$imp: !important;
$my_color: #14a6ef;
$my_color_hover: #108bc9;

#page-login {
  .for-login, .for-forgot, .for-signup, .for-email-login {
    padding: Max(10vh, 100px) 30px $imp;
  }
}

#page-login .page-card {
  max-width: 1024px !important;
  display: flex;

  .text-center.sign-up-message {
    font-weight: 600;
    font-size: 14px;
    position: relative;
    top: 15px;
  }

  .login-content-bg {
    background: #f3f8fa;
    width: 50%;
    margin: -20px 20px -20px -20px;
    border-radius: 10px 0px 0px 10px;
    position: relative;

    .app-logo {
      max-height: 40px;
      margin: 20px;
    }

    img.app-login-bg {
      width: 90%;
      margin: 50px auto;
      display: block;
    }

    .login-copyrights {
      position: absolute;
      bottom: 20px;
      font-weight: 600;
      font-size: 13px;
      left: 0px;
      right: 0px;
      text-align: center;
    }
  }

  .login-content-form {
    width: 50%;
    padding: 50px 20px;

    .btn-login, .btn-signup, .btn-forgot {
      height: 50px !important;
      border-radius: 25px !important;
      font-size: 16px;
    }

    .forgot-password-message {
      margin-top: 15px;
    }

    span.toggle-password.text-muted {
      top: 14px !important;
      right: 14px !important;
      opacity: 0.7;
      transition: all 0.2s ease-in-out;

      &:hover {
        opacity: 1;
      }
    }
  }
}

.for-login .page-card form, .for-forgot .page-card form, .for-signup .page-card form, .for-email-login .page-card form {
  max-width: 100%;
  margin: 0 auto;
}

.for-login .page-card, .for-forgot .page-card, .for-signup .page-card, .for-email-login .page-card {
  max-width: 480px;
  padding: 20px;
  box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.10);
}

.for-login .page-card-head img, .for-forgot .page-card-head img, .for-signup .page-card-head img, .for-email-login .page-card-head img {
  max-height: 62px;
  margin-bottom: 40px;
}

.form-label {
  cursor: pointer;
}

#page-login .form-control {
  background: #ffffff $imp;
  border: 1px solid #D8D6DE $imp;
  height: 50px $imp;
  padding-left: 40px;
  transition: all 0.2s ease-in-out;

  &:focus.is-valid, &:focus {
    box-shadow: 0 3px 10px 0 rgba(37, 143, 231, 0.25) $imp;
    border-color: $my_color $imp;
    padding-left: 43px;
    outline: 0;
  }
}

.for-login .page-card .page-card-body .forgot-password-message > *, .for-forgot .page-card .page-card-body .forgot-password-message > *, .for-signup .page-card .page-card-body .forgot-password-message > *, .for-email-login .page-card .page-card-body .forgot-password-message > * {
  font-size: 14px;

  &:hover {
    color: $my_color;
  }
}

#page-login {
  h2 {
    margin-top: 0;
    font-weight: 700;
  }

  .page_content {
    background-color: #f5f5f5;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 300;

    .page-card {
      position: relative;
      z-index: 315;
    }

    .login-page-slideshow-container {
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      z-index: 310;

      .login-page-slideshow-item {
        height: 100vh;

        > img {
          height: 100%;
          width: 100%;
          max-width: initial;
          display: block;
        }
      }

      &:after {
        background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.9) 100%) repeat scroll 0 0;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        display: block;
        content: "";
        z-index: 312;
      }
    }

    &.full-background {
      top: 0px;
    }

    &.min-background {
      top: 74px;

      .login-page-slideshow-container {
        top: 74px;
      }
    }

    &.widget-background-transparent {
      .page-card .login-content-bg {
        background: transparent;
      }

      .page-card {
        padding-top: 45px $imp;
        padding-bottom: 45px $imp;
        background-color: rgba(255, 255, 255, 0.75) $imp;
        border: 2px solid rgba(255, 255, 255, 0.75) $imp;
        box-shadow: 0px 2px 14px -6px #000 $imp;
        color: #000000 $imp;
        position: relative;
        z-index: 315;

        .form-control {
          border: 1px solid #8d8d8d $imp;

          &:focus {
            border-color: var(--primary) $imp;
          }
        }

        > a {
          color: #000;
        }
      }
    }
  }
}

.for-email-login .page-card .page-card-body .field-icon, .for-forgot .page-card .page-card-body .field-icon, .for-login .page-card .page-card-body .field-icon, .for-signup .page-card .page-card-body .field-icon {
  left: 14px;
  top: 15px;
}

@media (max-width: 600px) {
  .for-login, .for-forgot, .for-signup, .for-email-login {
    margin: 0px;
  }
  .for-login .page-card-head, .for-forgot .page-card-head, .for-signup .page-card-head, .for-email-login .page-card-head {
    margin-bottom: 20px;
  }
  #page-login {
    .for-login, .for-forgot, .for-signup, .for-email-login {
      padding: 30px $imp;
    }
  }
  #page-login .page-card .login-content-bg {
    display: none;
  }
  #page-login .page-card .login-content-form {
    width: 100%;
    padding: 0px 10px 30px 10px;
  }
}
