* {
    box-sizing: border-box
}

@media only screen and (min-width:540px) {
    section.mainSection {
        background-image: url(/assets/img/loginLp/loginCenterBg.png)
    }
}

section.mainSection {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 229px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh
}

section.innerSection {
    max-width: 1382px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 45px
}

section.mainContent {
    padding: 0 15px
}

section header {
    margin-bottom: 45px
}

.logo {
    margin-bottom: 0
}

.logo svg {
    width: 212px
}

path.logoSvgColor {
    fill: #fff
}

h1.formTitle {
    font-weight: 800 !important;
    font-size: 56px;
    line-height: 73px;
    color: #fff;
    text-align: center
}

h2.formSubTitle {
    font-weight: 700;
    font-size: 32px;
    line-height: 42px;
    text-align: center;
    color: #fff;
    margin-bottom: 45px
}

.formCover {
    background: #fff;
    box-shadow: 8px 4px 30px rgb(44 44 44/15%);
    border-radius: 15px;
    max-width: 403px;
    margin: auto;
    padding: 27px 30px 45px
}

label.LcMandatory {
    display: block;
    font-weight: 400;
    font-size: 13px;
    line-height: 17px;
    color: #3f4756
}

input[type=text],
input[type=password] {
    line-height: 18px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    outline: none
}

.LcWidgetTopWrapper.lcFieldWrapper {
    margin-bottom: 27px;
    position: relative
}

input.LoginSubmit-Submit,
input.LogoutSubmit-Submit {
    margin-top: 17px;
    background: #2193ff;
    border-radius: 8px !important;
    padding: 8px;
    font-weight: 700;
    font-size: 19px;
    line-height: 25px;
    margin-bottom: 8px
}

.forgotPassword {
    margin-bottom: 45px
}

.forgotPassword a {
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #2193ff
}

.dontHaveAcc {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #3f4756
}

.dontHaveAcc a {
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #2193ff
}

.errorValidation {
    font-size: 12px;
    line-height: 14px;
    margin-top: 1px;
    color: #fff;
    position: absolute;
    z-index: 18;
    top: 100%;
    right: 0;
    background-color: #f6bbbb;
    padding: 2px;
    width: 100%;
    border: 1px solid #e01c1c;
    border-radius: 8px;
    text-align: left;
    color: #333
}

.formErrorMessage {
    font-size: 12px;
    line-height: 14px;
    margin-top: 1px;
    background-color: #f6bbbb;
    padding: 2px;
    width: 100%;
    border: 1px solid #e01c1c;
    border-radius: 8px;
    text-align: left;
    color: #333;
    margin-bottom: 8px
}

.errorValidationIn {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #3f4756;
    position: relative;
    padding-left: 19px
}

.errorValidationIn:before {
    content: "";
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTUnIGhlaWdodD0nMTYnIHZpZXdCb3g9JzAgMCAxNSAxNicgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNNy41IDE0LjI1QzEwLjkzNzUgMTQuMjUgMTMuNzUgMTEuNDM3NSAxMy43NSA4QzEzLjc1IDQuNTYyNSAxMC45Mzc1IDEuNzUgNy41IDEuNzVDNC4wNjI1IDEuNzUgMS4yNSA0LjU2MjUgMS4yNSA4QzEuMjUgMTEuNDM3NSA0LjA2MjUgMTQuMjUgNy41IDE0LjI1Wicgc3Ryb2tlPScjRTAxQzFDJyBzdHJva2Utd2lkdGg9JzEuNScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJy8+PHBhdGggZD0nTTUuNzMxNDUgOS43Njg3Nkw5LjI2ODk1IDYuMjMxMjYnIHN0cm9rZT0nI0UwMUMxQycgc3Ryb2tlLXdpZHRoPScxLjUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcvPjxwYXRoIGQ9J005LjI2ODk1IDkuNzY4NzZMNS43MzE0NSA2LjIzMTI2JyBzdHJva2U9JyNFMDFDMUMnIHN0cm9rZS13aWR0aD0nMS41JyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48L3N2Zz4K);
    width: 18px;
    height: 15px;
    display: block;
    margin-right: 10px;
    background-repeat: no-repeat;
    position: absolute;
    left: 0
}

input.vaildFieldLc,
input.errorFieldLc {
    background-image: none !important
}

::placeholder {
    color: #9fa3ab;
    opacity: 1
}

:-ms-input-placeholder {
    color: #9fa3ab
}

::-ms-input-placeholder {
    color: #9fa3ab
}

input[type=text]:hover,
input[type=password]:hover,
.lcFieldWrapper select:hover {
    border: 1px solid #91c9ff !important
}

input[type=text]:focus,
input[type=password]:focus,
.lcFieldWrapper select:focus {
    border: 1px solid #2193ff !important
}

input[type=text].vaildFieldLc,
select.vaildFieldLc,
input[type=password].vaildFieldLc {
    background-image: none !important;
    border: 1px solid #69af4d !important
}

span.QuickLoginWithRegulationWidget-passwordToggle {
    display: block !important;
    position: absolute;
    top: 12px;
    right: 7px;
    width: 17px;
    border: 1px solid transparent;
    height: 17px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    cursor: pointer
}

span.hidePassword {
    background-image: url(/assets/img/real-lps/eye-slash.svg)
}

span.showPassword {
    background-image: url(/assets/img/real-lps/eye-open.svg)
}

@media only screen and (max-width:540px) {
    section.mainSection {
        background-image: url(/assets/img/loginLp/bgMobile.png)
    }

    section.mainSection {
        padding-bottom: 429px
    }

    .logo svg {
        width: 125px
    }

    section.innerSection {
        margin-top: 30px
    }

    section header {
        margin-bottom: 30px
    }

    h1.formTitle {
        font-weight: 700;
        font-size: 40px;
        line-height: 52px
    }

    h2.formSubTitle {
        font-weight: 700;
        font-size: 20px;
        line-height: 26px
    }

    .formCover {
        width: 100%
    }
}

section.mainSectionDark {
    display: flex;
    flex-wrap: wrap;
    background: #1d1d2b;
    min-height: 100vh
}

section.rightSectionDark {
    width: 49%;
    display: flex;
    align-items: flex-start;
    justify-content: end
}

.rightSectionDark img {
    width: 1232px;
    max-width: none
}

section.leftSectionDark {
    width: 51%;
    padding-left: 90px;
    padding-top: 90px;
    padding-bottom: 128px;
    z-index: 1
}

h1.formTitleDark {
    font-weight: 800 !important;
    font-size: 64px;
    line-height: 83px;
    color: #fff;
    margin-bottom: 15px;
    padding: 4px;
    background: rgba(29, 29, 43, .7);
    display: inline-block
}

h2.formSubTitleDark {
    font-weight: 700 !important;
    font-size: 32px;
    line-height: 42px;
    color: #2193ff;
    margin-bottom: 49px;
    padding: 4px;
    background: rgba(29, 29, 43, .7);
    display: inline-block
}

.mainContentDark .formCover {
    margin: 0
}

.loginLpImgMob {
    display: none
}

@media only screen and (max-width:1540px) {
    section.leftSectionDark {
        width: 60%
    }

    section.rightSectionDark {
        width: 40%
    }
}

@media only screen and (max-width:1260px) {
    section.leftSectionDark {
        width: 90%
    }

    section.rightSectionDark {
        width: 10%
    }

    .rightSectionDark img {
        width: 1106px;
        max-width: none
    }
}

@media only screen and (max-width:748px) {
    section.leftSectionDark {
        padding: 15px;
        width: 100%
    }

    .mainContentDark .formCover {
        margin: auto
    }

    section.rightSectionDark {
        width: 100%
    }

    .loginLpImg {
        display: none
    }

    .loginLpImgMob {
        display: block
    }

    .rightSectionDark img {
        width: 100%;
        max-width: 100%
    }
}

@media only screen and (max-width:540px) {
    h1.formTitleDark {
        font-weight: 700 !important;
        font-size: 40px;
        line-height: 52px;
        margin-top: 0
    }

    h2.formSubTitleDark {
        font-weight: 700;
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 30px
    }

    .mainContentDark .formCover {
        max-width: 345px
    }
}

.ClField-Password>label.LcMandatory {
    display: block !important;
}