/* -------------------------------- COLORS ---------------------------------- */
:root {
    --white: #fff;

    --blueLight: #0282FC;
    --blueLight-01: rgba(2,130,252,0.1);
    --blueLight-02: rgba(2,130,252,0.2);
    --blueLight-04: rgba(2,130,252,0.4);
    --blueLight-05: rgba(2,130,252,0.5);
    --blueMiddle: #023CFC;
    --blueMiddle-01: rgba(2,60,252,0.2);
    --blueMiddle-02: rgba(2,60,252,0.2);
    --blueMiddle-04: rgba(2,60,252,0.4);
    --blueDark: #0E123B;
    --blueDark-04: rgba(14,18,59,0.4);

    --red: #FF0000;

    --gray1: #C4C9D2;

    --green1: #2cb77e;

    --shadow1: rgba(211,226,255,1);
    --shadow0: rgba(234,241,255,0);
}
body,
html {
    overflow: auto;
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-style: normal;
    width: 100%;
    height: 100%;
    line-height: 1.5;
}
body.login {
    padding: 50px 0;
    margin: 0;
    /*    background: url("/assets/cms/img/login/login-bgrd.svg"), #00009E;
        background-size: auto 100%;
        background-repeat: no-repeat;*/
    background-color: var(--blueMiddle);
    position: relative;
    background-position: right top;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
body .ui-widget {
    font-family: 'Inter', sans-serif;
}
#loginFormWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
#loginFormWrapper_content {
    padding: 40px 50px;
    width: calc(100% - 40px);
    box-sizing: border-box;
    max-width: 500px;
    border: none;
    border-radius: 10px;
    text-align: center;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    -webkit-box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.3);
}
img.loginLogo {
    height: 30px;
    width: auto;
    display: block;
    margin: 0 auto;
}
h1 {
    margin: 40px 0 14px;
    color: #0B0D1C;
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}
label.block {
    width: 100%;
    line-height: 1;
    display: block;
    text-align: left;
    color: var(--blueDark);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
}
input.block {
    width: 100%;
    margin: 3px 0 23px;
    height: 50px;
    font-size: 16px;
    color: var(--blueDark);
    border-color: var(--blueDark);
    border-width: 1px;
    padding: 0.8rem;
}
body .ui-inputfield.ui-state-hover,
body .ui-selectonemenu.ui-state-hover,
body .ui-chkbox .ui-chkbox-box.ui-state-hover {
    border-color: var(--blueMiddle);
}
body .ui-inputfield.ui-state-focus,
body .ui-selectonemenu.ui-state-focus,
body .ui-chkbox .ui-chkbox-box.ui-state-focus {
    box-shadow: 0 0 0 .2em var(--blueLight-04);
    border-color: var(--blueMiddle);
}
body .ui-chkbox .ui-chkbox-box.ui-state-active {
    border-color: var(--blueMiddle);
    background: var(--blueMiddle);
    color: var(--white);
}
body .ui-chkbox .ui-chkbox-box.ui-state-active.ui-state-hover {
    background: var(--blueMiddle-04);
    box-shadow: 0 0 0 .2em var(--blueLight-04);
}
body .ui-button.btn-submit {
    width: 100%;
    height: 50px;
    /*    font-size: 20px;*/
    background-color: var(--blueLight);
    border-color: var(--blueLight);
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 10px;
    text-align: center;
    height: 50px;
    justify-content: center;
}
body .ui-button.ui-state-hover {
    background-color: var(--blueMiddle);
    border-color: var(--blueMiddle);
}
.form .ui-password {
    width: 100%;
}
body .ui-password.ui-password-masked .ui-password-icon,
body .ui-password.ui-password-unmasked .ui-password-icon {
    transform: translateY(-50%);
    margin-top: 0;
}
span.ui-messages-error-icon,
span.ui-messages-info-icon {
    position: relative;
}
span.ui-messages-error-icon:before,
span.ui-messages-info-icon:before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.ui-messages-error {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
body .ui-messages .ui-messages-error .ui-messages-error-icon {
    margin-right: 20px;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}
#footer_content {
    border-radius: 0;
    border: none;
    background: none;
    padding: 15px 20px;
    width: 100%;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
}
body .ui-widget .footerTxt {
    text-align: right;
    color: #00CAFC;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 20px;
    transform: translateX(20px);
}
.footerLinks {
    margin-top: 15px;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}
.footerLinks a,
.footerLinks a:hover {
    color: #fff;
}
.poweredTxt a {
    font-weight: 600;
}
.o-6 {
    opacity: 0.6;
}
input.block.loginPass{
    margin-bottom: 0;
}
.forgotPassLink{
    display: flex;
    justify-content: end;
    margin-bottom: 25px;
    margin-top: 5px;
}
.backLoginLink{
    margin-top: 30px;
}

/* ------------------------------- RESPONSIVE ------------------------------- */

@media(max-width: 768px) {
    .footerLinks {
        justify-content: center;
    }
}
@media(max-width: 540px) {
    #loginFormWrapper_content {
        padding: 20px;
    }
    h1 {
        margin-top: 20px;
    }
}