html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: fedra_sans_armdemi;
}

.outer {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: table;
    position: absolute;
    width: 100%;
}

.cover {
    position:fixed;
    width:100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    padding-top: 40px;
    padding-bottom: 40px;
    background: rgba(0,0,0,0.4);
    box-shadow: 0px 0px 50px rgba(0,0,0, 0.2);
    position: relative;
}

.inner a {
    color:#fff;
}

.inner a:hover {
    color: #8dc641;
}

.inner-logo {
    /* background-image: url(../images/login/white-logo-arm.png); */
    background-repeat:no-repeat;
    background-size:contain;
    margin-left: auto;
    margin-right:auto;
    position: absolute;
    left:  0px;
    right: 0px;
    top: -120px;
    width: 200px;
    height: 100px;
}

/* .en-logo {
    background-image: url(../images/login/white-logo-en.png);
}

.arm-logo {
    background-image: url(../images/login/white-logo-arm.png);
} */

.lower-right {
    right: 15px;
    color: #fff;
    font-size:22px;
    position: fixed;
    bottom: 15px;
}

.top-right {
    right: 15px;
    top: 15px;
    position: fixed;
}

.message-box {
    color:#fff;
    width:66%;
    text-align:center;
    margin:0 auto;
    float:none;
    margin-top:-20px;
    margin-bottom:20px;
}

.message-box a {
    color: #8dc641;
}

.message-box p {
    font-size:20px;
}

.req-pwd-msg {
    margin:20px -40px 0 -40px;
}

.form-control {
    width:66%;
    height:60px;
    margin-left:auto;
    margin-right:auto;
    border-radius:0;
    font-size:22px;
    background: rgba(252,252,252,0.8);
}

.super-btn {
    border-radius:0;
    width:66%;
    height:60px;
    margin-left:auto;
    margin-right:auto;
    background: rgba(252,252,252,0.02);
    color:#fff;
    font-weight:bold;
    font-size:20px;
    border: 5px solid #fff;
    text-transform: uppercase;
    transition: background .3s ease, border .3s ease;
}

.super-btn:hover {
    background: #8dc641;
    border: 0 solid #8dc641;
    cursor: pointer;
}

.reset-pwd {
    width:66%;
    margin-left: auto;
    text-align:right;
    margin-right: auto;
}

.flash-box {
    width:66%;
    margin:0 auto;
    color:#000;
    text-align:center;
    padding:8px;
    font-size: 16px;
}

.error-flash {
    background: #f0ad4e;
}

.success-flash {
    background: #8dc641;
}

/* Style the language menu list */
ul.lang_menu {
    list-style: none;
    font-size: 22px;
}

ul.lang_menu li {
    display: inline;
}

ul.lang_menu li+li:before {
    padding: 8px;
    color: #000;
    content: "|";
}

ul.lang_menu li a {
    color:#000;
    text-decoration: none;
}

ul.lang_menu li a:hover {
    font-weight:bold;
    text-decoration: underline;
}

.active-menu-item {
    font-weight:bold;
}

.show-password, .hide-password {
    width: 35px;
    cursor: pointer;
    fill: #555;
}

.hide-password {
    display: none;
}

.reset-password-input-container {
    position: relative;
    width: 66%;
    margin-left: auto;
    margin-right: auto;
}

.reset-password-input {
    width: 100%;
}

.toggle-password {
    position: absolute;
    right: 5px;
    top: 13px;
}

.grecaptcha-badge { 
    visibility: hidden; 
}

.re-captcha-wrapper {
    position: absolute;
    width: 165px;
    height: 40px;
    left: 6px;
    bottom: 4px;
    background: rgba(75, 75, 75, 0.6);
    border-radius: 3px;
    padding: 5px 8px;
    color: #FFFFFF !important;
}

.re-captcha-wrapper .re-captcha-title {
    width: 150px;
    height: 10px;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 15px;
}

.re-captcha-wrapper .re-captcha-title .google-re-captcha {
    font-family: 'fedra_sans_armdemi';
    font-weight: bold;
}

.re-captcha-wrapper a {
    color: #FFFFFF !important;
    font-style: normal;
    font-weight: normal;
    font-size: 8px;
    line-height: 15px;
    letter-spacing: -0.1px;
    text-decoration-line: underline;
}

.re-captcha-wrapper span {
    font-size: 8px;
}

.outer .inner {
    background: initial;
    box-shadow: initial;
    width: 378px;
}

.outer .inner * {
    font-family: var(--font-family), sans-serif;;
}

.page-title {
    color: #212125;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    text-transform: capitalize;
}

.page-subtitle {
    color: #494952;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 156%;
    margin: 0;
}

form .form-group {
    margin-bottom: 24px;
}

form input.form-control,
form input.form-control:-webkit-autofill,
form .has-success input.form-control {
    width: 100%;
    height: 42px;
    padding: 12px;
    border-radius: 8px;
    border-color: #E5E5E8;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 125%;
    color: #212125;
    -webkit-text-fill-color: #212125;
    background-color: #F7F7F8;
    box-shadow: initial;
    -webkit-box-shadow: initial;
    /*transition: background-color 5000s ease-in-out 0s;*/
}

form input.form-control::placeholder,
form .has-success input.form-control::placeholder {
    color: #6A6A75;
    -webkit-text-fill-color: #6A6A75;
}

form input.form-control:focus,
form input.form-control:focus,
form input.form-control:-webkit-autofill:focus,
form .has-success input.form-control:focus,
form .has-error input.form-control:focus {
    box-shadow: initial;
}

form input.form-control:focus,
form input.form-control:-webkit-autofill:focus {
    border-color: #536BC0;
}

form input.form-control[aria-invalid="true"],
form input.form-control:-webkit-autofill[aria-invalid="true"],
form .has-error input.form-control,
form .has-error input.form-control:focus {
    box-shadow: initial;
    border-color: #FDA29B;
    background-color: #F7F7F8;
}

form .help-block {
    color: #f04438!important;
    border-color: #536BC0;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-top: 12px;
    margin-bottom: 0;
}

form button.super-btn,
.message-box a.super-btn {
    display: block;
    width: 100%;
    height: initial;
    padding: 8px 22px;
    border-radius: 8px;
    border: none;
    background-color: #536BC0;
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 173.333% */
    letter-spacing: 0.1px;
    text-transform: capitalize;
}
.spinner {
    display: none;
    margin: auto;
    width: 27px;
    height: 27px;
    position: relative;
  }

.spinner:before {
    content: "";
    display: block;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 4px solid #ccc;
    border-top-color: #4960b3;
    animation: spin 1s infinite linear;
    position: absolute;
  }


form button.super-btn {
    display: block;
    width: 100%;
    height: initial;
    padding: 8px 22px;
    border-radius: 8px;
    border: none;
    background-color: #536BC0;
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 173.333% */
    letter-spacing: 0.1px;
    text-transform: capitalize;
}

form button.super-btn:hover{
    border: none;
    background-color: #536BC0;
    color: #FFF;
    text-decoration: none;
}

.submit-button-wrap {
    padding-top: 8px;
}

form button.super-btn:hover,
.message-box a.super-btn:hover {
    border: none;
    background-color: #536BC0;
    color: #FFF;
    text-decoration: none;
}

form .reset-pwd {
    width: 100%;
    text-align: center;
    padding: 8px 11px;
}

form .reset-pwd a {
    color: #212125;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 185.714% */
    letter-spacing: 0.1px;
    text-decoration-line: underline;
}

form .reset-pwd a:hover {
    color: #212125;
}

.flash-box {
    display: flex;
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-top: 16px;
}

.flash-box svg {
    margin-right: 10px;
}

.flash-box.success-flash {
    background-color: #F0FCF7;
    color: #057A55;
}

.flash-box.warning-flash {
    background-color: #FFF1DE;
    color: #B96A03;
}

.flash-box.error-flash {
    background-color: #FEE9E7;
    color: #CA180B;
}

.message-box {
    width: 378px;
}

.message-box .page-title {
    margin: 16px 0;
    font-size: 18px;
}

.message-box .page-subtitle {
    font-size: 16px;
}

.message-box .req-pwd-msg {
    color: #494952;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 156%;
}

.message-box .req-pwd-msg a {
    color: #536BC0;
}

.reset-password-input-container {
    width: inherit;
}

.toggle-password {
    right: 12px;
    top: 12px;
}

ul#password-validation-rules {
    padding-left: 15px;
    margin-bottom: 0;
}

ul#password-validation-rules li {
    color: #6A6A75;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.4px;
}

ul#password-validation-rules li.valid {
    list-style-image: url("../images/check-mark.svg");
    color: #0E9F6E;
}

ul#password-validation-rules li.invalid {
    color: #CA180B;
}

.password-field-container {
    position: relative;
}
.toggle-password {
    position: absolute;
    right: 10px;
    top: 13px;
    cursor: pointer;
}
.fa-classic, .fa-regular, .fa-solid, .far, .fas{
    font-family: "Font Awesome 6 Free"!important;

}
#labs-form {
    margin-left: -19px;
    margin-right: -19px;
}
#labs-form input{
    height:60px;
    border-radius:0;
    font-size:22px;
    background: rgba(252,252,252,0.8);
    margin-left: auto;
    margin-right: auto;
}

#labs-form input:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

#labs-form button,
#labs-form #request-password-reset-form-btn,
#labs-form #reset-pwd-form-btn,
#labs-form .submit-button-wrap a,
#labs-form #login-btn{
    border-radius:0;
    height:60px;
    background: #e07789;
    color:#fff;
    font-weight:bold;
    font-size:20px;
    border: 5px solid #e07789;
    text-transform: uppercase;
    transition: background .3s ease, border .3s ease;
    margin-left: auto;
    margin-right: auto;
}

#labs-form .submit-button-wrap a{
    vertical-align: middle;
    line-height: 36px;
}

#labs-form button:hover,
#labs-form #request-password-reset-form-btn:hover,
#labs-form #reset-pwd-form-btn:hover,
#labs-form .submit-button-wrap a:hover,
#labs-form #login-btn:hover{
    opacity: 0.7;
    cursor: pointer;
}

#labs-form .form-group {
    margin-bottom: 15px;
}

#labs-form .submit-button-wrap {
    padding-top: 2px;
}

#labs-form .reset-pwd a,
#labs-form .page-title,
#labs-form .page-subtitle,
#labs-form .req-pwd-msg,
#labs-form #password-validation-rules li{
    color: #fff;
}

#labs-form input.form-control::placeholder,
#labs-form .has-success input.form-control::placeholder {
    color: #999999;
    -webkit-text-fill-color: #999999;
}

#labs-form .toggle-password {
    position: absolute;
    right: 13px;
    top: 19px;
    cursor: pointer;
    font-size: 18px;
}

#labs-form svg g path{
    fill: #e07789;
}

#labs-form .req-pwd-msg a {
    color: #e07789;
}

#labs-form .help-block {
    color: #D8403B!important; /* Error color */
    font-weight: bold;
    margin-top: 5px;
}

#labs-form .password-field-container {
    margin-bottom: 15px;
}