.user-login-form-pre{
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  margin-bottom: 60px;
}
.admin-login-form{
  display: flex;
  justify-content: center;

}

.description-error {
  .description {
    display: inline-block;
    color: #e1242a !important;
    font-weight: bold;
    margin-top: 0.75rem;
  }
}

.was-validated :invalid ~ .description {
  display: none;
}

.user-login-form-pre .font-size-14{
  font-size: var(--bs-body-font-size-second);
}
.user-login-form-pre .font-size-12{
  font-size: 12px;
}

.login-form{
  border: 1px solid #D6D6D6;
  border-radius: 14px;
  overflow: hidden;
  padding: 2.6rem 6rem 1.5rem 6rem;
  width: 49%;
}
.login-form h3{
  text-align: center;
  margin-bottom: 24px;
}
.register-form{
  border: 1px solid #D6D6D6;
  border-radius: 14px;
  overflow: hidden;
  padding: 2.6rem 5rem 1.5rem 5rem;
  width: 49%;
}

.register-form h3{
    text-align: center;
    margin-bottom: 24px;
}

.page-user-login .register-form{
  width: unset;
}

.register-form .btn{
  background: #fff;
  color: var(--bs-red);
  border: 2px solid var(--bs-red);
  font-weight:700;
  width: 320px;
}
.login-form__top label{
  font-weight: 700;
}
.login-form__top label.form-check-label {
  font-weight: 400;
}

.login-form__top .input-bg input{
  background-color: var(--bs-gray);
  width:360px;
  height: 46px;
}
input:not([type=radio]).form-control:not(:placeholder-shown){
  background-color: var(--bs-gray);
}

.login-form__top .input-bg input:focus{
  background-color: #FFFFFF;
}
.user-login-form .login-form__top  .form-item-name label::before {
  content:none;
}
.user-login-form .login-form__top  .form-item-pass label::before{
  content:none;
}
.login-form__bottom{
  margin-top: 24px;
}
.user-login-form .a-link-color{
  color: var(--bs-body-color);
}

.user-login-form .mt10{
  margin-top: 10px;
}
.user-login-form .login-form__submit button{
  width:360px;
  height: 54px;
}
.user-login-form .login-form__submit button::before{
  content:none;
}
.register-form .btn:hover {
  background: var(--bs-red);
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
}

.login-form-center {
  width: 600px;
  padding: 32px 64px 24px 64px;
  border: 1px solid #D6D6D6;
  border-radius: 14px;
  overflow: hidden;
}

.login-form-center h3 {
  text-align: center;
  margin-bottom: 24px;
}

.login-form-center .explain {
  text-align: center;
  margin-bottom: 24px;
}

.login-form-center .login-form__top .input-bg input {
  background-color: var(--bs-gray);
  width: 100%;
  height: 46px;
}

.login-form-center .login-form__submit{
  text-align: center;
  align-items: center;
}

.login-form-center .login-form__bottom {
  padding-left: 0;
  text-align: center;
}

.register-form-nav-to-register {
  width: 600px;
  overflow: hidden;
  padding: 24px 6rem 1.5rem 6rem;
  text-align: center;
}

.register-form-nav-to-register h4 {
    width: 100%;
    margin: 0 0 16px 0;
}

.login-form-center .btn {
    background: var(--bs-red);
    color: #fff;
    border: 2px solid var(--bs-red);
    font-weight: 700;
}

.register-form .description {
  margin-bottom: 1.5em;
  text-align: center;
}

.changePassModal .a-link-color{
  color: var(--bs-body-color);
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: var(--bs-body-color);
}


.user-login-form input.form-control:not(:placeholder-shown){
  border-color: #A1A4AC;
}

.user-login-form input.error{
  background-color: #FCE8E9 !important;
  border-color: var(--bs-red) !important;
}

.user-login-form label{
  line-height: 28px;
  margin-bottom: 12px;
}
.user-login-form .hold-state{
  margin-top: 17px;
}


.was-validated .form-control:valid, .form-control.is-valid {
  border-color: #A1A4AC;
  /* background-color: #FCE8E9; */
  background-image: none;
}

.was-validated .form-control:valid, .form-control.is-invalid {
  background-color: var(--bs-gray);
  background-image: none;
}

.was-validated input.form-control:invalid, .form-control.is-invalid {
  background-color: #FCE8E9;
  border-color: var(--bs-red);
  background-image: none;
}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked{
  background-color: var(--bs-red);
}

.was-validated .form-check-input:valid, .form-check-input.is-valid{
  border-color: #0078b5;
}
.was-validated .invalid-feedback{
  font-weight: bold;
}

.custom-close-position{
  position: fixed;
  right: 34px;
  top: 34px;
  background-image: none;
  background-color: var(--bs-body-color);
  border-radius: 20px;
  padding: 0;
  width: 36px;
  height: 36px;
  font-size: 1.125rem;
  color: white;
}

.sp-show-hr{
  display: none;
  color: #D6D6D6;
  margin-top: 30px;
}
@media (max-width: 67.5rem) {
  .user-login-form-pre {
    flex-direction: column;
  }
  .login-form{
    border: none;
    overflow: unset;
    padding: 0px;
    width: 100%;
  }
  .login-form__top .input-bg input{
    background-color: var(--bs-gray);
    width: 100%;
    height: 46px;
  }
  .user-login-form .login-form__submit button{
    width: 100%;
  }
  .register-form{
    border: none;
    overflow: unset;
    padding: 0px;
    width: 100%;
    border-top: 1px solid;
    border-radius: unset;
    margin-top: 0;
    margin-bottom: 0;
  }
  .register-form__top{
    /* margin-top: 30px; */
  }
  .sp-show-hr{
    display: block;
    color: #D6D6D6;
    margin-top: 30px;
  }
  .login-popup .user-login-form-pre{
    margin-bottom: 0px;
  }
  
  .changePassModal .modal-content-footer button{
    width: 100%;
  }
  
}



/* popup  */


.login-popup .login-popup-top{
  margin-top: 12px;
  margin-bottom: 34px;
}

.login-popup .login-popup-top h2{
  text-align: center;
  margin-bottom: 19px;
}

.login-popup .login-popup-top h3{
  text-align: center;
  margin-bottom: 19px;
}

.login-popup .text-al-ce{
  text-align: center;
}
.login-popup .mt10{
  margin-top: 10px ;
}
.login-popup .a-link-color {
  color: var(--bs-body-color);
}
.login-popup .user-login-form-pre{
  margin-bottom: 12px;
}
.login-popup .no-medical{
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
.login-popup .no-medical-font{
  margin-right: 10px;
  font-size: 14px;
}

.login-popup .doctor-choose{
  /* margin-top: 40px; */
  margin-bottom: 48px;
}
.login-popup h4{
  text-align: center;
  margin-bottom: 8px;
}
.doctor-choose .btn{
  color:var(--bs-body-color);
  border: none;
  width: 47%;
  margin-bottom: 24px;
  margin-top: unset;
  padding: initial;
}
.doctor-choose .btn:hover{
  font-size: 16px;
}

.pc-hide{
  /* display: none; */
}
.sp-hide{
  /* display: block; */
}

.register-description{
  font-size: 12px;
  margin-top: 16px;
  margin-bottom: 24px;
  display: flex;
  text-align: center;
}
.login-form__bottom{
  padding-left: 3rem;
}

.sp-flex-btn{
  display: flex;
  justify-content: space-between;
}

.doctor-choose .sp-flex-btn a .btn{
  width: 10.5rem
}
.no-mar-b .btn{
  margin-bottom: unset;
}
.form-check .form-check-input{
  background-color:var(--bs-gray);
}
@media (max-width: 67.5rem) {
  .container.login-popup{
    padding: 0px 2px;
  }
  .pc-hide{
    display: none;
  }
  .sp-hide{
    display: none;
  }
  .sp-br{
    width: 100%;
  }
  .sp-tab-li{
    width: 50%;
    font-weight: bold;
    text-align: center;
  }
  .sp-tab-li:first-child a{
    border-top-left-radius: 26px;
    border-top-right-radius: 0px;
    line-height: 30px;
  }
  .sp-tab-li:last-child a{
    border-top-left-radius: 0px;
    border-top-right-radius: 26px;
    line-height: 60px;
  }
  .sp-tab-li a{
    min-height: 76px; 
    padding-bottom: 0px;
  }
  .sp-tab-li a:not(.active){
    background-color: var(--bs-gray);
  }
  .sp-tab-li a.active .login-register-tab-title{
    border-bottom: 4px solid var(--bs-red);
  }
  .login-register-tab-title{
    line-height: 1.5em;
    padding-bottom: 8px;
  }
  .login-register-tab{    
    box-shadow: 0px 2px 12px #00000029;
    border-radius: 26px;
  }
  .login-popup .user-login-form-pre{
    margin-bottom: 12px;
    padding: 0 12px;
  }
  .login-popup .doctor-choose{
    margin-top: 20px;
    margin-bottom: 42px;
  }
  .register-form{
    border: none;
    overflow: hidden;
    margin-top: 30px;
  }
  .register-form h3{
    margin-bottom: 16px;
  }
  .doctor-choose{
    /* margin-top: 60px; */
    /* padding: 0px 5px; */
  }
  .doctor-choose h4{
    margin-bottom: 18px;
  }
  .doctor-choose .btn{
    margin-top: unset;
    padding: initial;
  }
  .no-medical{
    margin-top: 18px;
  }
  
  .doctor-choose .sp-flex-btn a .btn{
    width: 9.75rem
  }
  .login-form{
    border: none;
    overflow: hidden;
  }
  .login-form h3{
    margin-bottom: 24px;
  }
  .login-popup .user-login-form-pre{
    padding-bottom: 30px;
  }
  .login-form__bottom{
    padding-left: 0rem;
  }
  .nav-link{
    color: var(--bs-body-color);
  }
  .form-check .form-check-input{
    margin-left: -2.5rem;
    margin-top: 0;
  }

  .login-form-center {
    width: 100%;
    padding: 32px 32px 24px 32px;
    border: 1px solid #D6D6D6;
    border-radius: 14px;
    overflow: hidden;
  }
  .register-form-nav-to-register {
    width: 100%;
    overflow: hidden;
    padding: 32px 32px 24px 32px;
    text-align: center;
  }
  .nav-link {
    align-content: end;
  }
}