// Login page

.view-login,
.task-logout {

  .container-main {
    order: 1;

    @include media-breakpoint-down(md) {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      min-height: calc(100vh - 35vh);
    }

    #content {
      @include media-breakpoint-down(md) {
        max-width: 98%;
        padding: 0;
      }
    }
  }

  .login {
    width: 100%;
    max-width: 25rem;
    padding: 30px;
    margin: 1rem;
    color: var(--template-text-dark);
    background: var(--body-bg);
    border-radius: 10px;
    box-shadow: $login-box-shadow;

    @include media-breakpoint-down(lg) {
      margin-bottom: 3rem;
    }

    img {
      width: auto;
      max-height: 4.4rem;
    }

    .logo {
      padding: 0 20px 20px;
    }

    svg.joomla-logo {
      width: 2.4rem;
      height: 4.4rem;
      background-size: 4.4rem 2.4rem;

      path {
        fill: var(--template-bg-dark);
      }
    }

    &-watermark {
      position: absolute;
      z-index: -1;
      max-width: 500px;
      transform: rotate(12deg) translate(40%, 10%);
    }

  }

  .form-group {
    position: relative;
    margin-bottom: 1.85rem;

    label {
      span {
        font-size: ($font-size-base * .9);

        @include media-breakpoint-down(sm) {
          width: 100%;
        }
      }
    }

    .form-control-feedback {
      position: absolute;
      inset-inline-end: 0;
      bottom: -1.5rem;
      font-size: ($font-size-base * .75);
      text-align: end;
    }

    .form-control-hint {
      position: absolute;
      top: .1rem;
      inset-inline-end: 0;
      font-size: ($font-size-base * .75);
      text-align: end;
    }
  }

  input:focus,
  select:focus {
    box-shadow: $login-focus-box-shadow;
  }

  h1 {
    margin-bottom: .25rem;
    color: $white;
    text-align: center;
  }

  h2 {
    font-weight: $font-weight-normal;
    color: var(--template-bg-dark-10);
  }

  .btn {
    @include media-breakpoint-only(xs) {
      padding: 8px 10px;
      font-size: ($font-size-base * .875);
    }
  }

  .form-control,
  .form-select {
    max-width: none;
  }

  .sidebar-wrapper,
  .header .logo {
    flex: 1 0 400px;
  }

  .sidebar-wrapper {
    display: flex;
    flex-direction: column;
    max-width: none;
    background-color: var(--template-sidebar-bg);

    @include media-breakpoint-down(md) {
      order: 2;
      margin-bottom: 3rem;
    }

    .main-brand {
      margin-bottom: auto;

      a {
        font-size: ($font-size-base * .875);
      }
    }

    .card-header {
      font-size: ($font-size-base * 1.125);
      color: $white;
    }

    @if $enable-dark-mode {
      @include color-mode(dark) {
        .card-header {
          background: transparent;
        }
      }
    }
  }

  #sidebar {
    align-self: flex-end;
    width: 100%;
    font-size: ($font-size-base * .875);
    --body-color: var(--template-text-light);
    color: var(--template-text-light);
    text-align: center;

    .card {
      background: rgba(0, 0, 0, .1);
      box-shadow: none;

      .module-body {
        padding: .75rem 1.25rem;
      }
    }

    @if $enable-dark-mode {
      @include color-mode(dark) {
        .card {
          background: rgba(0, 0, 0, .4);
        }
      }
    }


    @include media-breakpoint-down(md) {
      position: relative;
      bottom: 0;
    }
  }

  .container-main,
  .sidebar-wrapper {

    @include media-breakpoint-down(md) {
      flex: 1 0 100% !important;
      max-width: 100% !important;
      min-height: auto;
    }
  }

  .wrapper {
    display: flex;

    @include media-breakpoint-down(md) {
      flex-direction: column;
    }
  }

  .header {
    display: flex;

    .logo {
      &.small {
        line-height: 2.5rem;
      }
    }

    @include media-breakpoint-down(md) {
      background: var(--template-bg-dark-70);
    }
  }
}

label {
  color: $login-label-color;
}

.com_login .sidebar-wrapper .main-brand {
  flex: 1;
  flex-basis: auto;
  margin-top: 100px;
  text-align: center;

  @include media-breakpoint-down(md) {
    margin-top: 10px;
  }
}

.com_login .sidebar-wrapper #sidebar p {
  margin-bottom: .2rem;
}

.com_login .sidebar-wrapper .main-brand a,
.com_login .sidebar-wrapper #sidebar,
.com_login .sidebar-wrapper #sidebar a {
  color: var(--template-text-light);
}

.view-login {
  #wrapper.d-flex {
    @include media-breakpoint-down(md) {
      display: flex !important;
    }
  }

  #sidebar-wrapper:not(.show):not(.collapse) {
    @include media-breakpoint-down(md) {
      display: block;
    }
  }

  .invalid .form-control-feedback {
    color: var(--danger-text);
  }
}

.login_message {
  margin: 1rem 1rem 0;
}