﻿
#smsForget[type=text] {
    letter-spacing: 5px;
}

.cursor-pointer {
    cursor: pointer;
}


.popup.login {
    width: 1109px;
    margin-left: -555px;
    background: none;
    border: none;
    box-shadow: none;
    top: 423px;
    scroll-behavior: auto;
    overflow: auto;
    border-radius: 5.98131px;
}

.card1log {
    width: 37.5%;
    margin: 0;
    background: transparent;
}

#rc-anchor-alert, .rc-anchor-alert {
    display: none;
}

.card2log {
    width: 53%;
}

.logWrap {
    padding: 5% 7% 3%;
}

.popup .container {
    width: 100%;
    display: flex;
    margin: 0px;
    padding: 0px;
    background: none;
    border: none;
}

    .popup .container .card {
        box-shadow: 0px 54px 47px -18px rgba(0, 0, 0, 0.29);
        border-radius: 5.98131px;
        display: block;
        padding: 20px;
        height: max-content;
    }

    .popup .container #Auth2FactorCard.card {
        width: 590px;
        height: 650px;
        border-radius: 8px;
        gap: 20px;
        padding: 30px;
    }

        .popup .container #Auth2FactorCard.card .Auth2FactorCard__inner {
            display:flex;
            flex-direction:column;
            gap:20px;
        }

    .popup .container .card.hidden {
        display: none;
    }

    .popup .container .card1log .card_slogan {
        width: 100%;
        height: max-content;
        background: #004645;
        margin-top: 75px;
        box-shadow: 0px 54px 47px -18px rgba(0, 0, 0, 0.29);
        border-radius: 5.98131px 0px 0px 5.98131px;
        padding: 120px 60px 100px;
    }



        .popup .container .card1log .card_slogan .text {
            color: #FFFFFF;
            font-family: Ubuntu;
            font-style: normal;
            font-weight: bold;
            font-size: 26px;
            line-height: 30px;
            text-align: center;
        }


        .popup .container .card1log .card_slogan [type=button] {
            width: 85%;
            height: 48px;
            background: #FFFFFF;
            border-radius: 5.98131px;
            font-family: Ubuntu;
            font-style: normal;
            font-weight: 500;
            font-size: 16px;
            line-height: 18px;
            text-align: center;
            color: #2C3537;
            border: none;
        }

            .popup .container .card1log .card_slogan [type=button].btn-notification {
                border-radius: 6px;
                background: var(--Notification, #FFC700);
                display: flex;
                height: 48px;
                padding: 6px 20px 6px 16px;
                justify-content: center;
                align-items: center;
                gap: 8px;
                align-self: stretch;
            }


.notificationEpv {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}



.popup .container .card2log .close .btn-close {
    float: right;
    width: 15px;
    height: 15px;
}

.popup .container .card2log .title {
    text-align: center;
    margin-top: 50px;
    font-family: Ubuntu;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 23px;
    text-align: center;
    color: #2C3537;
}


.popup .container .card2log .btn-group {
    width: 100%;
}

    .popup .container .card2log .btn-group [type=button] {
        font-family: Ubuntu;
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 21px;
        text-align: center;
        color: #2C3537;
        border: 1px solid #99A0A2;
        height: 48px;
        border: 1px solid #ADB0B2
    }

.popup .container .card2log .forms {
    position: relative;
    overflow: hidden;
    padding-top: 35px;
}

.popup .container .card2log .row-12 {
    width: 100%;
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
}

input[type=text] {
    font-family: 'Ubuntu';
    font-style: normal;
    font-size: 15px !important;
    line-height: 48px;
    color: #2C3537;
    padding-left: 15px;
}

.attachDate input {
    font-family: Ubuntu-Medium;
    font-style: normal;
    font-size: 15px !important;
    line-height: 48px;
    color: #2C3537;
    padding-left: 15px;
}

input[type=password] {
    color: #99A0A2;
    padding-left: 15px;
    font-size: 15px;
}

.labels {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 18px;
    color: #2C3537;
    padding-bottom: 10px;
}


.popup .container .card2log .row-12 .input {
    background: #FFFFFF;
    border: 1px solid #D2D4D5;
    box-sizing: border-box;
    border-radius: 6px;
    width: 100%;
    height: 48px;
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 48px;
    color: #2C3537;
}

.popup .container .card2log .submit-box {
    padding: 15px 0px;
}

    .popup .container .card2log .submit-box [type=button] {
        width: 100%;
        height: 48px;
        background: #008B8A;
        border-radius: 6px;
        font-family: Ubuntu;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 18px;
        text-align: center;
        color: #FFFFFF;
        border: none;
    }

.popup .container .card2log .divider {
    display: inline-flex;
    height: max-content;
    align-items: center;
    color: #99A0A2;
}

    .popup .container .card2log .divider svg {
        margin: auto;
    }

    .popup .container .card2log.divider p {
        font-family: Ubuntu;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        color: #99A0A2;
        padding: 0px 16px 0px 16px;
    }

.popup .container .card2log .ecp {
    padding-top: 0px;
}

    .popup .container .card2log .ecp [type=button] {
        width: 100%;
        height: 48px;
        background: transparent;
        border-radius: 6px;
        font-family: Ubuntu;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 18px;
        text-align: center;
        color: #2C3537;
        border: none;
        border: 1px solid #ADB0B2;
    }

input::-moz-placeholder {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 48px;
    color: #D2D4D5;
}

input::-webkit-input-placeholder {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 48px;
    color: #D2D4D5;
}

input:-ms-input-placeholder {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 46px;
    line-height: 18px;
    color: #D2D4D5;
}

input:-moz-placeholder {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 48px;
    color: #D2D4D5;
}


.backgroundT {
    display: none;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #00000085 !important;
    z-index: 48 !important;
    display: none;
}

.show {
    display: block !important;
}

span.field-icon {
    position: absolute;
    cursor: pointer;
    right: 1.5rem;
    top: 3.2rem;
    color: #99A0A1;
    z-index: 2;
    font-family: 'Font Awesome 5 Free';
    font-weight: 800;
    font-size: 0.8em;
    margin: -12px !important;
    margin: -38px -12px 0px 0px !important;
}

.modalDialogForget {
    height: 40%;
}

.forgetPass {
    color: #008B8A !important;
    text-decoration: underline !important;
    cursor: pointer;
}

.forgetPassModalContent {
    border-radius: 6px;
    border: none;
    width: max-content;
    height: max-content;
}

.biometry__forget__password.forgetPassModalContent {
    padding: 20px;
    background: white;
}

.forgetPassModal {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .forgetPassModal p {
        text-align: left;
    }

#beforeCodeconfirmed .telephone {
    display: inline-block;
}

#phoneForget, #newPassInp, #newPassInpConfirm, #documentData, #UserNameName, #newPassInpBiometryChange, #newPassInpConfirmBiometryChange {
    width: 468px;
    height: 48px;
    border: 1px solid #D2D4D5;
    box-sizing: border-box;
    border-radius: 6px;
}

#sendSmsForget, #sendSmsForgetBiometry {
    display: grid;
}

#capLogSecContainer {
    margin-top: 20px;
}

#exampleModalLabel {
    margin: 0 !important;
}



#sendSmsBtnForget {
    height: 48px;
    background: #008B8A;
    box-shadow: 0px 8.2243px 12.7103px -4.48598px rgb(62 83 87 / 38%);
    border-radius: 6px;
    border: none;
    font-family: Ubuntu;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;
}

#sendSmsBtnForgetPass {
    height: 48px;
    background: #008B8A;
    border-radius: 6px;
    border: none;
    font-family: Ubuntu;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;
}


#smsForget {
    border: 1px solid #D2D4D5;
    box-sizing: border-box;
    border-radius: 6px;
    width: 468px;
    height: 48px;
}

input#saveAndLogin {
    width: 100%;
    bottom: 0;
    margin-bottom: 22px;
}

#resultForgetTxt {
    margin-left: 0 !important;
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #99A0A2;
    display: flow-root;
}

#enterSmsForget {
    margin-top: 35px;
}

#saveAndLogin {
    margin-top: 30px;
    background: #99A0A2;
    box-shadow: 0px 8.2243px 12.7103px -4.48598px rgba(62, 83, 87, 0.38);
    border-radius: 6px;
    font-family: Ubuntu;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;
    width: 468px;
    height: 48px;
    border: none;
}

.requirments {
    margin: 15px 0px 15px 15px;
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #99A0A2;
    background: #F2FAFA;
    border: 1px solid #008F91;
    padding: 8px 15px;
    border-radius: 8px;
    margin-left: 0px;
}

.fa-circle, .fa-check, .fa-times {
    font-size: 5px;
    margin-right: 5px;
}

.fa-times {
    font-size: 7px;
}

.colorGrey {
    margin-top: 1px;
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #99A0A2;
}

.success {
    color: #008F91;
}

.notSuccess {
    color: #D52B1E;
}

ul {
    margin-top: 10px;
}

#eye1, #eye2 {
    font-size: 12px;
    right: 3.5rem;
}

.d-flext label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    margin: 12px 0;
    cursor: pointer;
    position: relative;
}


/* input */
.d-flext input {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}


.design {
    width: 18px;
    height: 18px;
    border: 1px solid #99A0A1;
    border-radius: 100%;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

    .design::before,
    .design::after {
        content: "";
        display: block;
        width: inherit;
        height: inherit;
        border-radius: inherit;
        position: absolute;
        transform: scale(0);
        transform-origin: center center;
    }

    .design:before {
        background: white;
        opacity: 0;
        transition: .3s;
        position: absolute;
        left: -1px;
        top: -1px;
    }

    .design::after {
        background: #008B8A;
        opacity: .4;
        transition: .6s;
        position: absolute;
        top: -1px;
        left: -1px;
    }


.d-flext input:checked + .design::before {
    opacity: 1;
    transform: scale(.6);
    transform: scale(-0.4);
}

.d-flext input:checked + .design {
    border: 1px solid #008B8A;
    background: #008B8A;
}

.d-flext input:focus + .design {
    border: 1px solid #008B8A;
}

    .d-flext input:focus + .design:before {
        background: white;
    }


    .d-flext input:focus + .design::after,
    .d-flext input:active + .design::after {
        opacity: .1;
        transform: scale(1.6);
    }

.btnbtn {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;
    border-radius: 6px;
    height: 48px;
    width: 48%;
    border: none;
}

.errorLogin {
    width: 17rem;
    background: #D34B46;
    box-shadow: 0px 20.1869px 15.7009px -8.2243px rgb(44 53 55 / 44%);
    border-radius: 8.97196px;
    color: white;
    padding: 9px 14px;
    margin-top: 10px;
    position: absolute;
}

    .errorLogin:after {
        content: " ";
        position: absolute;
        bottom: 100%;
        left: 20%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #D34B46 transparent;
    }

.errorEcp:after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #D34B46 transparent transparent transparent;
}

.errorEcp {
    background: #D34B46;
    border-radius: 8.97196px;
    color: white;
    padding: 9px 14px;
    position: absolute;
    bottom: 15%;
    right: 8%;
    width: 35rem;
}

.redClass {
    border: 1px solid #D34B46 !important;
}

.forgetPass {
    padding: 15px;
}

#regMobile {
    display: none;
}

@media only screen and (max-width: 1200px) {
    .card1log {
        display: none !important;
    }

    #forgetPassword.show {
        padding: 0 !important;
        display: flex !important;
        align-items: flex-end;
    }

    #forgetPassword .modalDialogForget {
        height: max-content;
        width: 100%;
    }


    .card2log {
        width: 100%;
    }

    .popup.login {
        background: white;
        border-radius: 0;
        left: 1px !important;
        top: 409px;
        width: 100%;
    }

    .popup.login {
        background: white;
        border-radius: 0;
        left: 1px !important;
        top: 350px;
        width: 100%;
    }

    a#ProfilesEmailsSavesId div {
        position: unset !important;
        margin-left: 0px !important;
    }



    span.fa.fa-fw.fa-eye.field-icon.toggle-password {
        top: 6.1rem !important;
    }

    input#email1 {
        position: unset;
    }

    .popup .container .card {
        padding: 0px;
    }

    img#iconid {
        position: unset;
    }

    p#profileEmail span {
        margin-left: 0px;
    }

    .logWrap {
        padding: 17% 4% 3%;
    }

    .popup .container .card2log .btn-group [type=button] {
        font-size: 14px;
        line-height: 16px;
    }


    .labels {
        font-size: 14px;
        line-height: 16px;
    }

    span.field-icon {
        top: 3.5rem;
    }

    .forgetPass {
        padding: 0;
        float: right;
    }

    .popup .container .card2log .submit-box [type=button] {
        font-size: 14px;
        line-height: 16px;
    }

    .popup .container .card2log .title {
        font-size: 16px;
        line-height: 18px;
    }

    .ecp {
        display: none;
    }

    #regMobile {
        display: block;
    }

        #regMobile button {
            border: 1px solid #2C3537;
            border-radius: 6px;
            height: 48px;
            width: 100%;
            background: white;
            font-weight: 500;
            font-size: 14px;
            line-height: 16px;
            text-align: center;
            color: #2C3537;
        }

    .modal-body.forgetPassModal {
        justify-content: inherit;
    }

    .modal-content.forgetPassModalContent .modal-header {
        padding: 26px 17px 11px !important;
    }

    .forgetPassModalContent button#close-btn span {
        font-size: 56px;
        font-weight: 100;
        cursor: pointer;
    }

    .popup .container {
        width: 100%;
        display: contents;
    }

    .card.card2log {
        box-shadow: none !important;
    }

    .modal-body {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    .popup.login.simple._auto_height.log_in.active .card.card2log .title.text-center p {
        font-family: 'Ubuntu';
        font-style: normal;
        font-weight: 700;
        font-size: 16px !important;
        line-height: 18px;
        text-align: center;
        color: #2C3537;
        margin: 0px 0px -26px 0px;
        padding: 11px 0px 0px 0px;
    }

    div#registrationVue span.fa.fa-fw.field-icon.togglePassword.fa-eye, div#registrationVue span.fa.fa-fw.field-icon.togglePassword.fa-eye-slash {
        margin: 0px 10px 0px 0px !important;
    }

    .popup.login.simple._auto_height.log_in.active .card.card2log .close {
        margin-top: -35px;
        margin-right: 7px;
    }

    div#beforeCodeconfirmed {
        height: 100% !important;
    }

        div#beforeCodeconfirmed span.text {
            font-family: 'Ubuntu';
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 18px;
            color: #2C3537;
        }


    .registration .textWrap {
        width: 100% !important;
    }

        .registration .textWrap h5, .registration .textWrap p {
            width: 100% !important;
            font-size: 16px !important;
        }

    div div#sendSmsForget {
        position: relative !important;
        margin: 0 !important;
        width: 100%;
    }

    #phoneForget, #newPassInp, #newPassInpConfirm, #documentData, #UserNameName, #smsForget {
        width: 100%;
        height: 48px;
        border: 1px solid #D2D4D5;
        box-sizing: border-box;
        border-radius: 6px;
    }

    .main .container .card .registration .p5 {
        width: 100% !important;
    }

    .frsbmt.text-center, .frsbmt.text-center input {
        width: 100% !important;
    }

    .xColumn {
        width: 100% !important;
    }

    div#text {
        width: 100% !important;
    }

    .main .container .card .registration .reg .form {
        padding-bottom: 0px !important;
    }

    span.validation.field-validation-error {
        top: 0px;
        left: 0%;
        position: initial;
    }

    .main .container .card .registration .reg {
        height: 100%;
    }

    input#ConfirmPasswordUser {
        margin-bottom: 22px;
    }

    span.fa.fa-fw.field-icon.togglePassword.fa-eye::before, span.fa.fa-fw.field-icon.togglePassword.fa-eye-slash::before {
        border: 1px solid #E5E5E5;
        padding: 5px 3px;
        height: 22px;
        width: 22px;
        border-radius: 13px;
        bottom: -15px;
        right: 35px;
    }

    .reg span.fa-eye {
        right: -2rem;
    }

    .reg span.fa-eye-slash {
        position: absolute;
        cursor: pointer;
        right: 1.1rem;
        top: 2.8rem;
        color: #99A0A1;
        z-index: 2;
    }

    .reg.treb {
        width: 100%;
        padding: 8px 53px 8px 20px !important;
        background: #F2FAFA;
        border: 1px solid #008F91 !important;
        border-radius: 8px;
        margin-bottom: 13px;
    }

    .container.podtverzhdenyea {
        display: grid;
        width: 100%;
    }

        .container.podtverzhdenyea .card {
            width: 100% !important;
        }

        .container.podtverzhdenyea .slogan {
            display: none;
        }

        .container.podtverzhdenyea div#msgsms {
            text-align-last: center;
        }

    .profiles_mains span.field-icon {
        right: 2.5rem;
    }

    .profiles_mains a#ProfilesEmailsId div {
        margin-left: 0px !important;
    }

    .profiles_mains input#email1 {
        margin-left: 0px !important;
    }

    .profiles_mains .form-group {
        height: 35px;
    }
}

@media (min-width: 700px) {

    .modal-dialog {
        max-width: 500px !important;
        margin: 12.75rem auto !important;
        margin: 76px auto !important;
    }

    #eye1, #eye2 {
        position: unset;
        justify-self: right;
        padding-right: 40px;
        padding-top: 7px;
    }
}



.BecomeClient {
    display: grid;
    gap: 20px;
}

#CyberModal .modal-dialog {
    max-width: 920px !important;
}

#CyberModal .modal-content {
    height: max-content
}

#CyberModal .gridTemplate {
    gap: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

ul#CyberList {
    display: flex;
    flex-direction: column;
    margin-top: 0px;
    gap: 5px;
}


    ul#CyberList li::before {
        content: '';
        display: inline-block;
        height: 20px;
        width: 20px;
        margin-right: 5px;
        background-image: url(/Images/Tick.svg);
    }


.scamPNG {
    width: 398.06px;
    height: 258px;
}

.cyber_div {
    margin-top: 60px;
    cursor: pointer;
    display: flex;
    gap: 10px;
}

    .cyber_div img {
        width: 24px;
        height: 24px;
    }

    html body .BecomeClient .btn-submit.text-center.regs button[type=button], .cyber_div button {
        background: transparent;
        color: var(--White-Background, #FFF);
        text-align: center;
        font-family: Ubuntu;
        font-size: 16px;
        border-radius: revert;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        box-shadow: none;
        border-bottom: 1px solid;
        padding: 0;
        width: max-content;
        height: max-content;
    }

.mobile_version {
    display: none;
}

@media (max-width:768px) {
    #CyberModal .modal-dialog {
        max-width: 100% !important;
        height: max-content;
        padding-top: 40px;
    }

    #CyberModal div.modal-content .modal-header {
        padding: 30px 10px !important;
    }

    #CyberModal .modal-header .close {
        margin: 0;
        padding: 0;
    }

    .scamPNG {
        width: 324px;
        height: 216px;
    }

    .mobile_version.cyber_div {
        display: flex;
    }

    .cyber_div {
        justify-content: center;
        color: #333839;
        margin-top: 30px;
    }

        .cyber_div button {
            color: #333839;
        }

        .cyber_div img {
            filter: invert(90%) sepia(21%) saturate(3207%) hue-rotate(110deg) brightness(95%) contrast(114%);
        }

    #CyberModal {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

        #CyberModal .gridTemplate {
            gap: 20px;
            display: flex;
            flex-direction: column-reverse;
        }
}

@media(min-width:1200px) {
    div.ob__login-popup-head.d-flex {
        flex-direction: row-reverse;
        justify-content: space-between;
        width: 94%;
        margin: auto;
        height: max-content;
        align-items: center;
        padding: 10px 0px;
    }

    div.popup div.container div.card2log div.ob__login-popup-head.d-flex button.btn-close {
        height: max-content;
    }

    div.ob__login-popup-head.d-flex div.title.text-center {
        margin: 0;
    }

    div.logWrap {
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    div.popup div.container div.card2log div.btn-group button.btn.baspanaBusiness.btnSelect {
        border-left: 0;
    }
}

@media(max-width:1200px) {
    div.ob__login-popup-head.d-flex {
        flex-direction: column-reverse;
        padding: 20px;
    }

    .popup .container #Auth2FactorCard.card {
        width: 100%;
        height: 100%;
    }

a.forgetPass {
    padding: 0;
}

span.field-icon::before {
    font-size: 16px;
}

button.baspanaBusiness.bbreverse:hover {
    box-shadow: 0px 8.2243px 12.7103px -4.48598px rgba(62, 83, 87, 0.38);
}

div.popup div.container div.card1log div.card_slogan [type=button]:hover {
    box-shadow: 0px 17px 19px -14px rgba(0, 0, 0, 0.64);
}

div#CyberModal div.modal-header {
    align-items: center;
}

div.ob-banner-text {
    font-family: Ubuntu;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    text-align: left;
}

img.scamPNG {
    width: 417px;
    height: 313px;
}

input#sendSmsBtnForgetPass:hover {
    box-shadow: 0px 8.2243px 12.7103px -4.48598px rgb(62 83 87 / 38%);
}
