/*@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700);*/

/*******************

Login Page

******************/

.login-register {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
  width: 100%;
  padding: 10% 0;
  position: fixed; }



.login-box {
  max-width: 400px;
  margin: 0 auto; }

  .login-box .footer {
    width: 100%;
    left: 0px;
    right: 0px; }

  .login-box .social {
    display: block;
    margin-bottom: 30px; }



#recoverform {
  display: none; }


.login-sidebar {
  padding: 0px;
  margin-top: 0px; }

  .login-sidebar .login-box {
    right: 0px;
    position: absolute;
    height: 100%; }





/******************/


.btn-login {
    background-color: #e73950 !important;
    border-color: #6f212f !important;
}
.btn-login:hover {
    background-color: #192f54 !important;
    border-color: #2A3F54 !important;
}

.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus {
    background-image: linear-gradient(#2A3F54,#2A3F54),linear-gradient(#e9ecef,#e9ecef) !important;
}








/* -=======[remember-box]=========- */

.login-remember-box {
    background-color: transparent !important;

    max-width: 400px;
    margin: 0 auto;
}

.justify-content-center-row {
    display: flex;
    justify-content: center;
}

.remember-card {
    box-shadow: #2A3F54 0px 0px 6px 0px;
    border-radius: 25px;
    background-color: #ffffffc2 !important;
    border: 0.5px solid white;
    cursor: default;

    overflow: hidden;
}

.remember-card-body {
    padding: 0.3rem;
}

.remember-card-body div {
    user-select: none;
}

.remember-card-body img {
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
}

.login-remember-box .label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18ch;
    font-size: 10px;
    color: var(--gray-dark);
    padding: 0px;
    font-weight: bold;
    display: block;
}

@media (max-width: 425px) {
  .login-remember-box .label {
      max-width: 16ch;
  }
}

@media (max-width: 385px) {
    .login-remember-box .label {
        max-width: 14ch;
    }
}

@media (max-width: 365px) {
    .login-remember-box .label {
        max-width: 12ch;
    }
}

@media (max-width: 330px) {
    .login-remember-box .label {
        max-width: 17ch;
    }
}


/* -=======[remember-box - overlay]=========- */

.remember-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #8e9fa96b;
    opacity: 0;
    transition: 300ms;
}

.remember-card:hover .remember-card-overlay {
    opacity: 1;
    transition: 250ms;
}


.remember-card-overlay .remember-card-overlay-cancel {
    width: 37px;
    height: 37px;
    position: absolute;
    left: -38px;
    top: 6px;
    background: var(--red) !important;
    border-radius: 50%;
    cursor: pointer;

    transition: 250ms;
}

.remember-card-overlay .remember-card-overlay-cancel i {
    margin-left: 0.5rem;
    margin-top: 0.25rem;
}


.remember-card:hover .remember-card-overlay .remember-card-overlay-cancel {
    left: 6px;
    transition: 250ms;
    transition-delay: 50ms;
}



.remember-card-overlay .remember-card-overlay-allow {
    width: 133px;
    height: 37px;
    position: absolute;
    right: -136px;
    top: 6px;
    background: var(--success) !important;
    border-radius: 25px;
    cursor: pointer;

    transition: 250ms;
}

.remember-card-overlay .remember-card-overlay-allow span {
    color: white;
    font-size: 14px;
    position: absolute;
    top: 8px;
    left: 58px;
    display: block;
    font-weight: bold;
}

.remember-card-overlay .remember-card-overlay-allow i {
    margin-left: 0.5rem;
    margin-top: 0.25rem;
}


.remember-card:hover .remember-card-overlay .remember-card-overlay-allow {
    right: 6px;
    transition: 250ms;
    transition-delay: 50ms;
}

@media (max-width: 435px) {

    .remember-card-overlay .remember-card-overlay-allow {
        width: 37px;
    }

    .remember-card-overlay .remember-card-overlay-allow span {
        display: none;
    }

    .remember-card-overlay .remember-card-overlay-allow i {
        margin-left: 0.25rem;
    }
}