/* Signin */
.formcard-panel {border-radius: 5px; margin: 20px auto; max-width: 450px}
@media (max-width: 575.98px) {
.formcard-panel {margin: 50px auto; width: 100%}
}
.formcard-panel .h5 {margin-bottom: 1.5rem}
.formcard-panel .error-message.invalid-feedback {font-size: .9em!important; font-weight: 500}
.formcard-panel .form-floating {margin-bottom: 10px}
.formcard-panel .form-floating>.form-control {font-size: .9rem; height: calc(3rem + 2px)}
.formcard-panel .form-floating>.form-control[type=password] {padding-right: 60px}
.formcard-panel .form-floating>.form-control:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #fff inset !important}
.formcard-panel .form-floating>.form-control:focus,
.formcard-panel .form-floating>.form-control:not(:placeholder-shown) {padding-top: 1.5rem}
.formcard-panel .form-floating>label {padding: .8rem .75rem}
.formcard-panel .form-floating > .toggle-password {cursor: pointer; font-size: 1.2em; padding: 2px 5px; position: absolute; right: 25px; top: 10px}
.formcard-panel .form-floating > .toggle-password .fa-eye {margin-right: 1px}
.formcard-panel .signin,
.formcard-panel .signup-panel .signup {font-size: 17px; font-weight: 500; margin-top: 30px; padding: 10px 0; width: 100%}
.formcard-panel .signin:focus,
.formcard-panel .signup-panel .signup:focus {box-shadow: none!important}
.formcard-panel .login-help-panel {font-size: .95em; margin-top: 10px}
.formcard-panel .remember-me input {cursor: pointer}
.formcard-panel .remember-me label {display: inline}
.formcard-panel .login-help {text-align: right;}
.formcard-panel .login-help a {text-decoration: none}
.formcard-panel .login-help a:hover {text-decoration: underline}
.formcard-panel hr {height: 2px; margin: 45px 0; opacity: 1}
.formcard-panel .signup-panel {text-align: center}
.formcard-panel .signup-panel .signup {margin-top: 0!important; width: 50% !important}

/* Validation */
.is-invalid~.invalid-feedback, .is-invalid~.invalid-tooltip,
.was-validated :invalid~.invalid-feedback, .was-validated :invalid~.invalid-tooltip {font-size: .8em}

/* Valid */
.form-control.is-valid, .was-validated .form-control:valid,
.form-select.is-valid, .was-validated .form-select:valid {border-color: #ced4da}
.form-control.is-valid:focus, .was-validated .form-control:valid:focus,
.form-select.is-valid:focus, .was-validated .form-select:valid:focus {border-color: #86b7fe !important}

/* Icons */
.form-control.is-valid, .was-validated .form-control:valid {background-image: none; padding-right: .5rem}
.form-select.is-valid, .was-validated .form-select:valid {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); padding-right: 2.25rem}



/* Light theme */
.formcard-panel {background-color: rgba(0, 0, 0, .05)}
@media (max-width: 575.98px) {
.app-main-default {background-color: rgba(0, 0, 0, .05)}
.formcard-panel {background-color: transparent}
}
.formcard-panel .form-floating>label {color: #888}
.formcard-panel .signin {background-color: #666; color: #fff}
.formcard-panel .signin:hover {background: #333}
.formcard-panel .login-help-panel,
.formcard-panel .login-help a {color: #666}
.formcard-panel .login-help a:hover {color: #000}
.formcard-panel hr {background: #fff; border-top: 1px solid #ccc}
.formcard-panel .signup-panel .signup {background: #42b72a; color: #fff}
.formcard-panel .signup-panel .signup:hover {background: #36a420; color: #fff}