@font-face {
    font-family: 'Gordita-Regular';
    src: url('../fonts/gordita-regular-webfont.woff2') format('woff2'), url('../fonts/gordita-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gordita-Light';
    src: url('../fonts/gordita-light-webfont.woff2') format('woff2'), url('../fonts/gordita-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gordita-Medium';
    src: url('../fonts/gordita-medium-webfont.woff2') format('woff2'), url('../fonts/gordita-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gordita-bold';
    src: url('../fonts/gordita-bold-webfont.woff2') format('woff2'), url('../fonts/gordita-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Gordita-Regular';
}

p {
    margin-bottom: 0;
}

a {
    text-decoration: none;
}

.cursor-pointer {
    cursor: pointer;
}

.field-validation-error {
    color: #E14A5B;
}

.signup-page {
    height: 100vh;
}

    .signup-page .left-box {
        width: 32.7%;
        background-color: #F9F9F9;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 20px;
    }

        .signup-page .left-box .des-header {
            width: 108%;
        }

        .signup-page .left-box .mob-header {
            display: none;
        }

        .signup-page .left-box::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        .signup-page .left-box::-webkit-scrollbar {
            width: 6px;
            background-color: #F5F5F5;
        }

        .signup-page .left-box::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #00E587;
        }

        .signup-page .left-box header {
            position: relative;
            top: -40px;
        }

            .signup-page .left-box header .que-link {
                width: 32px;
                height: 32px;
                align-items: center;
                border-radius: 32px;
                background: #FFF;
                box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
                justify-content: center;
                display: flex;
                padding: 6px;
                margin-right: 16px;
            }

                .signup-page .left-box header .que-link a {
                    display: flex;
                }

            .signup-page .left-box header .close-icon {
                display: none;
            }

            .signup-page .left-box header .go-btn a {
                padding: 4px 12px;
                font-weight: 500;
                font-size: 14px;
                color: #00B8AD;
                border-radius: 24px;
                background: #FFF;
                box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
                line-height: 24px;
                display: block;
                text-decoration: none;
                font-family: 'Gordita-Medium';
                display: flex;
                align-items: center;
            }

                .signup-page .left-box header .go-btn a img {
                    margin-right: 10px;
                }

        .signup-page .left-box .header-title {
            font-size: 18px;
            font-weight: 700;
            color: #3F4A65;
            text-align: center;
            margin-bottom: 24px;
            margin-top: -24px;
            font-family: 'Gordita-bold';
        }

        .signup-page .left-box .card-box {
            padding: 0 60px;
        }

.signup-form .input-field {
    position: relative;
}

    .signup-form .input-field .validatefield ~ .input-icon {
        position: absolute;
        top: 10px;
        right: 8px;
        width: 24px;
        height: 24px;
        display: block;
    }

    .signup-form .input-field .input-icon {
        display: none;
    }

    .signup-form .input-field input {
        width: 100%;
        height: 48px;
        border-radius: 4px;
        font-size: 16px;
        padding: 0 15px;
        border: 1px solid #CACFDE;
        background: #FFFFFF;
        color: #1E2330;
        outline: none;
        letter-spacing: 0.5px;
    }
    
    .signup-form .hint-text {
        display: block;
        color: #6c757d;
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }

    .signup-form .input-field label {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        color: #95A0BD;
        font-size: 16px;
        pointer-events: none;
        transition: 0.3s;
        line-height: 16px;
        letter-spacing: 0.4px;
    }

    .signup-form .input-field input::placeholder {
        color: transparent;
    }

    .signup-form .input-field input:focus::placeholder {
        color: #95A0BD;
    }

.signup-form input:focus {
    border: 1px solid #3F4A65;
}

    .signup-form input:focus ~ label,
    .signup-form input:valid ~ label {
        top: 0;
        left: 15px;
        font-size: 12px;
        padding: 0 2px;
        background-color: #F9F9F9;
        color: #1E2330;
    }

.optional-field {
    top: 50% !important;
    left: 15px !important;
    font-size: 16px !important;
    color: #95A0BD !important;
    background-color: white !important;
    width: 95%;
}

.signup-form .input-field .eye-icon {
    outline: 0;
    background: transparent;
    border: none;
    position: absolute;
    top: 9px;
}

@supports (-webkit-touch-callout: none) {
    .signup-page .input-field .eye-icon {
        right: 3px;
    }
}

@supports not (-webkit-touch-callout: none) {
    .signup-page .input-field .eye-icon {
        right: 12px;
    }
}

.signup-form .input-field .eye-icon #eyeOpen {
    display: none;
}

.signup-form .input-field .eye-icon #eyeRedOpen {
    display: none;
}

.signup-form .input-field input.valid {
    border: 1px solid #00E587;
}

    .signup-form .input-field input.valid:focus ~ label {
        color: #00E587;
    }

    .signup-form .input-field input.valid ~ label {
        color: #00E587;
    }

.signup-form .input-field .input-validation-error {
    position: relative;
}

    .signup-form .input-field .input-validation-error ~ .error-icon {
        position: absolute;
        top: 9px;
        right: 16px;
        display: block;
    }

.signup-form .input-field input.input-validation-error {
    border: 1px solid #E14A5B;
}

    .signup-form .input-field input.input-validation-error ~ label {
        color: #E14A5B;
    }

    .signup-form .input-field input.input-validation-error:focus ~ label {
        color: #E14A5B;
    }

.signup-form .input-field .error-icon {
    display: none;
}

.signup-form .input-field #eye-error {
    display: none;
}

.signup-form .input-field .input-validation-error ~ .eye-icon #eye-error {
    display: block;
}

.signup-form .input-field .input-validation-error ~ .eye-icon #eye-success {
    display: none;
}

.signup-form .input-field .form-select {
    height: 48px;
    border-radius: 4px;
    font-size: 16px;
    padding: 0 15px;
    color: #95A0BD;
    border: 1px solid #CACFDE;
    outline: none;
    letter-spacing: 0.5px;
    background-image: url("../../images/down-arrow.svg");
    background-size: 24px 24px;
}

    .signup-form .input-field .form-select:focus {
        box-shadow: none;
        border-color: #CACFDE;
        background-image: url("../../images/up-arrow.png");
        background-size: 40px 40px;
        background-position: right 0.25rem center;
    }

    .signup-form .input-field .form-select option {
        color: #1E2330;
    }

    .signup-form .input-field .form-select.valid {
        border: 1px solid #00E587;
        color: #1E2330 !important;
    }

    .signup-form .input-field .form-select.input-validation-error {
        border: 1px solid #E14A5B;
        color: #E14A5B
    }


.error-msg {
    color: #E14A5B;
    font-size: 12px;
    margin-left: 14px;
    margin-top: 4px;
}

.error-no-space-msg {
    color: #E14A5B;
    font-size: 12px;
    margin-left: 14px;
    margin-top: 4px;
    display: none;
}

.verify-password {
    margin-bottom: 24px;
}

    .verify-password ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

        .verify-password ul li {
            align-items: center;
            display: flex;
            margin-bottom: 6px;
        }
            /* .verify-password ul li:first-child span {
                color: #8E9097;
            }*/

            .verify-password ul li span {
                margin-left: 6px;
                color: #8E9097;
                font-size: 12px;
                letter-spacing: 0.15px;
            }

    .verify-password .password-error span {
        color: #FC5555;
    }

    .verify-password .password-success span {
        color: #00E587;
    }

.signup-btn {
    text-align: center;
    margin-bottom: 16px;
}

.signup-btn button {
    padding: 12px 35px;
    display: inline-flex;
    background: linear-gradient(135deg, #00E587 0%, #00B8AD 100%);
    border-radius: 40px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    align-items: center;
    outline: 0;
    border: none;
    transition: all 0.4s ease-in-out;
    font-family: 'Gordita-bold';
}

.signup-btn button img {
    margin-left: 15px;
}

.signup-btn button:hover {
    background-image: linear-gradient(135deg, #00E587 0%, #00B8AD 100%);
    box-shadow: 0 4px 15px 0 rgb(23 168 108 / 75%);
}

.signup-page .right-box {
    width: calc(100% - 32.7%);
    background: #FFF;
    box-shadow: 0px 12px 25px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: flex-end;
    padding: 20px;
}


    .signup-page .right-box .integation-detail {
        width: 700px;
        margin: 0 auto;
    }

        .signup-page .right-box .integation-detail h2 {
            font-weight: 700;
            font-size: 40px;
            color: #3F4A65;
            font-family: 'Gordita-bold';
            text-align: center;
            margin-bottom: 20px;
        }

        .signup-page .right-box .integation-detail p {
            font-size: 18px;
            line-height: 28px;
            color: #3F4A65;
            margin-bottom: 48px;
            text-align: center;
            margin: 0 auto 48px auto;
            width: 60%;
        }

    .signup-page .right-box .owl-carousel {
        align-self: center;
    }

.right-box-img {
    margin-bottom: 128px;
}

.support-btn {
    position: fixed;
    bottom: 36px;
    right: 36px;
}

    .support-btn button {
        padding: 10px 24px;
        display: flex;
        background: white;
        color: #1E2330;
        border-radius: 40px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
        font-family: 'Gordita-bold';
        outline: 0;
        align-items: center;
        border: 2px solid #1E2330;
    }

.signup-page .signup-info {
    font-size: 12px;
    color: #1E2330;
    margin-bottom: 24px;
    text-align: center;
}

    .signup-page .signup-info a.link {
        font-weight: 700;
        text-decoration: underline;
        color: #1E2330;
        font-family: 'Gordita-bold';
    }

.signup-page .seprator {
    font-size: 12px;
    color: #000;
    display: flex;
    justify-content: center;
    position: relative;
    width: 170px;
    margin: 0 auto;
}

    .signup-page .seprator:before {
        content: "";
        position: absolute;
        right: 93px;
        display: block;
        width: 60px;
        height: 1px;
        background-color: #AFB8CD;
        top: 9px;
    }

    .signup-page .seprator:after {
        content: "";
        position: absolute;
        left: 93px;
        display: block;
        width: 60px;
        height: 1px;
        background-color: #AFB8CD;
        top: 9px;
    }

.signup-page .soc-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .signup-page .soc-icon ul {
        padding: 0;
        list-style: none;
        margin: 10px 0;
    }

        .signup-page .soc-icon ul li {
            display: inline-flex;
            justify-content: center;
            margin-right: 16px;
        }
            .signup-page .soc-icon ul li:last-child {
                margin-right: 0;
            }

            .signup-page .soc-icon ul li a {
                padding: 18px;
                border-radius: 48px;
                background-color: #FFFFFF;
                box-shadow: 0px 4px 4px 0px rgb(0 0 0 / 15%), 0px 1px 2px 0px rgb(0 0 0 / 15%);
                width: 48px;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

    .signup-page .soc-icon p {
        font-size: 12px;
        color: #1E2330;
        margin-bottom: 0;
    }

        .signup-page .soc-icon p a {
            color: #00E587;
            text-decoration: none;
        }

.mob-support-btn {
    position: fixed;
    bottom: 24px;
    right: 24px
}

    .mob-support-btn button {
        width: 48px;
        height: 48px;
        display: inline-block;
        background: white;
        border-radius: 40px;
        outline: 0;
        border: 2px solid black;
        display: none;
    }

.verify-email h2 {
    color: #000;
    font-size: 24px;
    font-weight: 700;
    font-family: 'Gordita-bold';
}

.verify-email p {
    font-size: 16px;
    color: #000;
    margin: 16px 0;
}

    .verify-email p button {
        text-decoration: underline;
        color: #000;
        font-weight: 700;
        font-family: 'Gordita-bold';
        border: none;
        background: none;
        outline: 0;
        padding: 0px !important;
    }

.forgot-link {
    margin: 16px 0 0 0;
    text-align: right;
    width: 100%;
}

    .forgot-link a {
        text-decoration: underline;
        color: #505D80;
        font-size: 15px;
        font-weight: 500;
        font-family: 'Gordita-Regular';
        letter-spacing: 0.48px;
    }

.alert-error {
    border-radius: 8px;
    border: 1px solid #E14A5B;
    background: #EEC1C6;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    column-gap: 16px;
}

    .alert-error .alert-content .alert-des {
        color: #202223;
        font-size: 14px;
    }

.pwd-step input {
    position: relative;
}

.pwd-step:after {
    content: "";
    position: absolute;
    display: block;
    height: 3px;
    background: linear-gradient(158deg, #00E587 0%, #00B8AD 100%);
    top: auto;
    bottom: 0;
    width: 20%;
}

.pwd-step.first-step:after {
    width: 20%;
}

.pwd-step.sec-step:after {
    width: 40%;
}

.pwd-step.third-step:after {
    width: 60%;
}

.pwd-step.fourth-step:after {
    width: 80%;
}

.pwd-step.fifth-step:after {
    width: 100%;
}
/*Activate Payment*/

.header-username {
    font-size: 18px;
    color: #FFFFFF;
    font-family: 'Gordita-bold';
}

.top-header {
    padding: 20px 32px;
    background: linear-gradient(135deg, #00E587 0%, #00B8AD 100%);
    box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.10);
}

    .top-header h2 {
        font-size: 18px;
        font-weight: 700;
        font-family: 'Gordita-bold';
        color: #FFFFFF;
        margin: 0;
    }

.logout-btn a {
    border-radius: 24px;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
    padding: 4px 16px;
    font-weight: 500;
    font-family: 'Gordita-Medium';
    color: #00B8AD !important;
    font-size: 14px;
    line-height: 24px;
    display: block;
    cursor: pointer;
    border: 0;
}

    .logout-btn a img {
        margin-right: 10px;
    }

.active-payment {
    height: calc(100vh - 80px);
}

    .active-payment .left-box {
        padding: 48px 62px;
        background: #F9F9F9;
        box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15);
        width: 35.6%;
        overflow-y: auto
    }

    .active-payment .right-box {
        background: #FFF;
        box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15);
        width: calc(100% - 35.6%);
        padding: 48px;
        overflow-x: hidden;
    }

        .active-payment .right-box .box-detail {
            width: 600px;
        }

        .active-payment .right-box .page-title-box h2 {
            font-size: 24px;
            font-family: 'Gordita-bold';
            font-weight: 700;
            color: #2F364B;
            margin-bottom: 24px;
        }

        .active-payment .right-box .page-info p {
            font-size: 18px;
            color: #2F364B;
            line-height: 35px;
            margin-bottom: 32px;
        }

        .active-payment .right-box .contract-detail {
            background-color: rgba(63, 74, 101, 0.5);
            padding: 24px;
        }

            .active-payment .right-box .contract-detail .contract-box {
                padding: 24px;
                border-radius: 16px;
                background: #FFF;
                box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.10);
                width: 530px;
                margin: 0 auto;
            }

                .active-payment .right-box .contract-detail .contract-box h2 {
                    color: #2F364B;
                    font-size: 24px;
                    font-weight: 700;
                    margin: 16px 0;
                    font-family: 'Gordita-bold';
                }

                .active-payment .right-box .contract-detail .contract-box p {
                    font-size: 18px;
                    line-height: 28px;
                    color: #2F364B;
                    margin-bottom: 16px;
                }

                .active-payment .right-box .contract-detail .contract-box .signup-btn button {
                    padding: 10px 16px;
                }

            .active-payment .right-box .contract-detail .contract-info-box {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                column-gap: 25px;
            }

            .active-payment .right-box .contract-detail .contract-inner-box {
                box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.10);
                border-radius: 16px;
                background: #FFF;
                padding: 24px;
            }

                .active-payment .right-box .contract-detail .contract-inner-box h2 {
                    font-weight: 700;
                    font-size: 18px;
                    font-family: 'Gordita-bold';
                    margin-bottom: 16px;
                }

                .active-payment .right-box .contract-detail .contract-inner-box p {
                    font-size: 14px;
                    line-height: 20px;
                }

                .active-payment .right-box .contract-detail .contract-inner-box .contact-detail {
                    list-style: none;
                    padding-left: 0;
                }

                    .active-payment .right-box .contract-detail .contract-inner-box .contact-detail li {
                        margin-bottom: 16px;
                    }

                        .active-payment .right-box .contract-detail .contract-inner-box .contact-detail li a {
                            color: #2F364B;
                            font-size: 14px;
                            display: inline-flex;
                            align-items: center;
                        }

                            .active-payment .right-box .contract-detail .contract-inner-box .contact-detail li a img {
                                margin-right: 8px;
                            }

.border-btn button {
    padding: 10px 16px;
    display: inline-flex;
    border-radius: 40px;
    border: 2px solid #1E2330;
    border-radius: 40px;
    text-decoration: none;
    background-color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    color: #1E2330;
    align-items: center;
    outline: 0;
    transition: all 0.4s ease-in-out;
    font-family: 'Gordita-bold';
}

.border-btn a {
    padding: 10px 16px;
    display: inline-flex;
    border-radius: 40px;
    border: 2px solid #1E2330;
    border-radius: 40px;
    text-decoration: none;
    background-color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    color: #1E2330;
    align-items: center;
    outline: 0;
    transition: all 0.4s ease-in-out;
    font-family: 'Gordita-bold';
}


.page-title {
    color: #2F364B;
    font-size: 24px;
    font-weight: 700;
    font-family: 'Gordita-bold';
    margin-bottom: 16px;
}

.page-des {
    color: #2F364B;
    font-size: 16px;
}

.verify-identity.modal .modal-content {
    border-radius: 16px;
}

.verify-identity.modal .modal-dialog {
    width: 342px;
    margin: 0 auto;
}

.verify-identity.modal .faq.modal-dialog {
    width: 100%;
    margin: 0 auto;
    color: black !important;
    padding: 25px;
}

    .verify-identity.modal .faq.modal-dialog .modal-body .model-details-body {
        max-height: 528px;
        overflow-y: auto;
        padding-right: 18px;
    }

        .verify-identity.modal .faq.modal-dialog .modal-body .model-details-body::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #E4E7EE;
        }

        .verify-identity.modal .faq.modal-dialog .modal-body .model-details-body::-webkit-scrollbar {
            width: 6px;
            background-color: #E4E7EE;
        }

        .verify-identity.modal .faq.modal-dialog .modal-body .model-details-body::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #CACFDE;
        }

    .verify-identity.modal .faq.modal-dialog h5 {
        font-family: 'Gordita-bold';
        text-align: left;
        font-size: 24px;
        color: black !important;
    }

    .verify-identity.modal .faq.modal-dialog p {
        text-align: left;
        color: black !important;
        font-size: 16px !important;
    }

    .verify-identity.modal .faq.modal-dialog label {
        font-family: 'Gordita-bold';
        font-size: 16px;
        color: black !important;
    }

    .verify-identity.modal .faq.modal-dialog ul li {
        font-size: 16px;
        text-align: left;
        color: black !important;
    }

    .verify-identity.modal .faq.modal-dialog ol li {
        font-size: 16px;
        text-align: left;
        color: black !important;
    }

        .verify-identity.modal .faq.modal-dialog ol li a {
            color: black !important;
        }

.verify-identity.modal .modal-body .modal-subtitle {
    font-size: 18px;
    font-weight: 500;
    font-family: 'Gordita-Medium';
    letter-spacing: -0.5px;
    color: #3F4A65;
    margin-bottom: 12px;
}

.verify-identity.modal .modal-body h3 {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Gordita-bold';
    background: linear-gradient(to right, rgba(0, 229, 135, 1), rgba(0, 184, 173, 1));
    -webkit-background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.verify-identity.modal .modal-body .modal-detail p {
    font-size: 12px;
    color: #505D80;
    line-height: 20px;
    text-decoration: none;
}

.modal-backdrop {
    background-color: #3F4A65;
}
/* Steps */

.verify-step {
    margin-top: 48px;
}

    .verify-step .step {
        position: relative;
        color: rgba(0, 0, 0, 0.5);
    }

    .verify-step .stepe-info {
        display: none;
    }

    .verify-step .step + .step {
        margin-top: 24px
    }

    .verify-step .step > div:first-child {
        position: static;
        height: 0;
    }

    .verify-step .step > div:not(:first-child) {
        margin-left: 24px;
        padding-left: 16px;
    }

    .verify-step .step.step-active {
        color: #000000
    }

        .verify-step .step.step-active .circle {
            background: linear-gradient(135deg, #00E587 0%, #00B8AD 100%),linear-gradient(0deg, rgba(228, 231, 238, 0.3), rgba(228, 231, 238, 0.3));
            color: #FFFFFF;
        }

        .verify-step .step.step-active.check .step-details {
            color: rgba(0, 0, 0, 0.5) !important;
        }

        .verify-step .step.step-active.check .circle {
            background: #7feac4;
            filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.12));
            border: 2px solid #FFFFFF;
        }

            .verify-step .step.step-active.check .circle:after {
                background: linear-gradient(135deg, #00E587 0%, #00B8AD 100%);
                opacity: 0.5;
                opacity: 0.5;
                top: 0;
                height: 115%;
            }
    /* Circle */

    .verify-step .step-box {
        position: relative;
    }

        .verify-step .step-box .line {
            top: 26px;
            left: 12px;
            /* height: 120px; */
            height: 100%;
            position: absolute;
            border-left: 4px solid #E4E7EE;
        }

    .verify-step .step.step-active .step-box .line {
        border-width: 3px;
        border-image: linear-gradient(135deg, #00E587 0%, #00B8AD 100%);
        border-image-slice: 1;
        border-image-source: linear-gradient(135deg, #00E587 0%, #00B8AD 100%);
        opacity: 0.5;
    }

    .verify-step .step:last-child .step-box .line {
        border: none;
    }

    .verify-step .circle {
        position: relative;
        width: 24px;
        height: 24px;
        color: rgba(0, 0, 0, 0.5);
        font-weight: 700;
        font-family: 'Gordita-bold';
        text-align: center;
        border-radius: 24px;
        border: 0.5px solid rgba(228, 231, 238, 0.30);
        background: #E4E7EE;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 2px;
    }
        /* Vertical Line */
    .verify-step .step:last-child .circle:after {
        display: none
    }
    /* Stepper Titles */
    .verify-step .title {
        line-height: 1.5em;
        font-weight: 700;
        font-size: 16px;
        font-family: 'Gordita-bold';
    }

    .verify-step .caption {
        font-size: 14px;
    }

.verify-form.signup-form .input-field input {
    width: 100%;
}

.verify-form.signup-form .signup-btn {
    text-align: left;
    margin-top: 32px;
}

    .verify-form.signup-form .signup-btn button {
        padding: 12px 24px;
    }


.verify-form.signup-form .idnumber input.valid ~ label {
    top: 0;
    left: 15px;
    font-size: 12px;
    padding: 0 2px;
    background-color: #F9F9F9;
    color: #00E587;
}

.verify-form.signup-form .select-company-box label {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Gordita-bold';
    color: #2F364B;
    margin-bottom: 16px;
}

.verify-form.signup-form .select-company-box .comp-box {
    padding: 24px;
    border-radius: 8px;
    border: 1px solid #CACFDE;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .verify-form.signup-form .select-company-box .comp-box h4 label {
        font-size: 18px;
        font-weight: 700;
        font-family: 'Gordita-bold';
        color: #505D80;
        margin-bottom: 0px !important;
    }

    .verify-form.signup-form .select-company-box .comp-box p {
        font-size: 16px;
        color: #505D80;
    }

.custom-switch .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .custom-switch .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.custom-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .custom-switch .slider:before {
        position: absolute;
        content: "";
        height: 30px;
        width: 30px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

.custom-switch input:checked + .slider {
    background: linear-gradient(135deg, #00E587 0%, #00B8AD 100%);
}

.custom-switch input:focus + .slider {
    box-shadow: 0 0 1px #00E587;
}

.custom-switch input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.custom-switch .slider.round {
    border-radius: 34px;
}

    .custom-switch .slider.round:before {
        border-radius: 50%;
    }

.custom-checkbox label {
    display: flex;
    align-items: center;
    color: #9e9e9e;
    top: -21px !important;
    left: 0 !important;
    position: relative;
    padding: 0 !important;
    font-size: 0 !important;
}

.custom-checkbox input {
    width: 0;
    height: 0;
    opacity: 0;
}

.custom-checkbox label > span {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    border: 2px solid #CACFDE;
    margin-right: 0;
    border-radius: 3px;
    transition: all 0.3s;
}

.custom-checkbox input:checked + label > span {
    border: 10px solid #00E587;
    animation: bounce 250ms;
}

    .custom-checkbox input:checked + label > span:before {
        content: '';
        position: absolute;
        top: 6px;
        left: 4px;
        border-right: 3px solid transparent;
        border-bottom: 3px solid transparent;
        transform: rotate(45deg);
        transform-origin: 0% 100%;
        animation: checked-box 125ms 250ms forwards;
        box-sizing: content-box;
    }

.custom-radio .radio-box {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



    .custom-radio .radio-box input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }



    .custom-radio .radio-box .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
        border-radius: 50%;
    }



    .custom-radio .radio-box:hover input ~ .checkmark {
        background-color: #ccc;
    }



    .custom-radio .radio-box input:checked ~ .checkmark {
        background-color: #00E587;
    }



    .custom-radio .radio-box .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }



    .custom-radio .radio-box input:checked ~ .checkmark:after {
        display: block;
    }



    .custom-radio .radio-box .checkmark:after {
        top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
    }

.file-upload-box {
    margin-top: 32px;
}

    .file-upload-box .accordion-item {
        padding: 24px;
        border-radius: 8px;
        border: 1px solid #CACFDE;
        background: #FFF;
        margin-bottom: 24px;
        box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.10);
    }

        .file-upload-box .accordion-item .accordion-button {
            padding: 0 !important;
            color: #2F364B !important;
            font-size: 14px;
            background-color: transparent !important;
            width: 78px !important;
            border: none !important;
            box-shadow: none !important;
        }

            .file-upload-box .accordion-item .accordion-button::after {
                background-image: url("../../images/accordion-down-arrow.svg") !important;
            }

            .file-upload-box .accordion-item .accordion-button:not(.collapsed)::after {
                background-image: url("../../images/accordion-up-arrow.svg");
            }

    .file-upload-box .accordion h3 {
        font-size: 14px;
        font-weight: 500;
        color: #2F364B;
        font-family: 'Gordita-Medium';
    }

    .file-upload-box .accordion p {
        font-size: 12px;
        color: #2F364B;
        line-height: 20px;
    }

    .file-upload-box .accordion .accordion-collapse .accordion-body {
        padding: 0 !important;
    }

    .file-upload-box .accordion .accordion-item .accordion-collapse {
        margin-top: 16px;
    }

@keyframes checked-box {
    0% {
        width: 0;
        height: 0;
        border-color: #FFFFFF;
        transform: translate(0, 0) rotate(45deg);
    }

    33% {
        width: 4px;
        height: 0;
        border-color: #FFFFFF;
        transform: translate(0, 0) rotate(45deg);
    }

    100% {
        width: 4px;
        height: 8px;
        border-color: #FFFFFF;
        transform: translate(0, -8px) rotate(45deg);
    }
}

@keyframes bounce {
    0% {
        transform: scale(1);
    }

    33% {
        transform: scale(.7);
    }

    100% {
        transform: scale(1);
    }
}

.no-record {
    font-size: 18px;
    color: #2F364B;
    line-height: 28px;
    margin: 24px 0;
    text-align: center;
}

.terms-option {
    display: flex;
    align-items: flex-start;
    column-gap: 8px;
}

    .terms-option p {
        font-size: 16px;
        color: #505D80;
    }

.information-box {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid #F8A23E;
    border-radius: 16px;
    font-size: 16px;
    color: #60719A;
    column-gap: 16px;
}

.form-link {
    column-gap: 24px;
    margin-top: 32px;
}

    .form-link .verify-form.signup-form .signup-btn {
        margin: 0;
    }

.later-link a {
    color: #1E2330;
    font-size: 14px;
    text-decoration: underline;
    font-weight: 700;
    font-family: 'Gordita-bold';
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.later-link .disableLink {
    pointer-events: none;
    opacity: 0.5;
}

.success-box-detail {
    align-items: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-self: center;
    align-self: center;
    margin: auto;
}

    .success-box-detail h2 {
        font-weight: 700;
        font-family: 'Gordita-bold';
        font-size: 24px;
        color: #2F364B;
        margin: 0px 0 8px 0;
    }

    .success-box-detail p {
        font-size: 16px;
        color: #2F364B;
        margin-bottom: 24px;
        text-align: center;
    }
/*File Upload*/

.upload_dropZone .upload-file-box {
    border-radius: 7.213px;
    border: 0.902px dashed #60719A;
    background: #F7F8FA;
    transition: outline-offset 0.2s ease-out, outline-color 0.3s ease-in-out, background-color 0.2s ease-out;
    position: relative;
    padding: 14px;
    margin: 16px 0 0 0;
}

.upload_dropZone .small {
    font-size: 14.427px;
    color: #505D80;
}

    .upload_dropZone .small a {
        text-decoration: underline;
        font-family: 'Gordita-Medium';
        font-weight: 500;
        color: #505D80;
    }

.upload_dropZone .btn.btn-upload {
    font-size: 10.82px;
    color: #505D80;
    position: relative;
}

.upload_dropZone #upload_image_background {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 999;
    cursor: pointer;
}

.file-upload-image {
    border-radius: 8px;
    border: 1px solid #CACFDE;
    background: #FFF;
    margin-top: 16px;
    position: relative;
}

    .file-upload-image.file-upload-success {
        border: none;
    }

        .file-upload-image.file-upload-success::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #00E587 0%, #00B8AD 100%) border-box;
            border-radius: 8px;
            border: 2px solid transparent;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
            transition: border 0.5s ease;
            animation: border-pulse 2s ease-in-out infinite;
        }

    .file-upload-image.file-upload-error {
        border: 1px solid #E14A5B;
    }

    .file-upload-image .file-name {
        color: #60719A;
        font-size: 14px;
        word-break: break-word;
        text-align: left;
    }

    .file-upload-image .upload-fail p {
        color: #60719A
    }

.upload_img {
    width: calc(33.333% - (2rem / 3));
    object-fit: contain;
}

.add-more {
    margin-top: 24px;
    font-size: 14px;
}

    .add-more a {
        color: #2F364B;
        display: flex;
        align-items: center;
    }

        .add-more a img {
            margin-left: 8px;
        }

.file-upload-image img {
    max-width: 24px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

input::-ms-reveal,
input::-ms-clear {
    display: none;
}

.signup-form .readonly label {
    top: 0 !important;
    left: 15px !important;
    font-size: 12px !important;
    padding: 0 2px !important;
    background-color: #F9F9F9 !important;
    color: #1E2330 !important;
}

.signup-form .readonly input {
    background-color: #F9F9F9 !important;
}

.signup-form .readonly select {
    background-color: #F9F9F9 !important;
    pointer-events: none;
}

a.contact_support {
    font-weight: bold;
    color: black;
    text-decoration: underline;
    text-align: right;
}

#directorshipEmptyResult {
    margin-left: 20px;
}

.signup-form .optional label {
    top: 50% !important;
    left: 15px !important;
    font-size: 16px !important;
    color: #95A0BD !important;
    background-color: white !important;
    width: 95%;
}

.alert-error .alert-content .alert-des a {
    color: #202223;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
}

.success-box {
    background-color: #E3FFF3;
    border-radius: 8px;
    border: 1px solid #00E587;
    padding: 16px;
    font-size: 14px;
    color: #202223;
    display: flex;
    align-items: flex-start;
    margin: 0 auto !important;
    margin: 0 auto !important;
    margin-bottom: 36px !important;
    width: 320px;
}

    .success-box img {
        padding-right: 16px;
    }
/*Progress Bar*/
.progress {
    height: 4px;
    border-radius: 8px 4px 4px 8px;
    background-color: #dcdfe6;
    display: none;
}

    .progress .progress-bar {
        background: linear-gradient(135deg, #00E587 0%, #00B8AD 100%);
    }

.progress-border {
    position: relative;
}

    .progress-border:after {
        content: "";
        position: absolute;
        display: block;
        height: 4px;
        background: linear-gradient(135deg, #00E587 0%, #00B8AD 100%);
        top: auto;
        bottom: -2px;
        left: 0;
        border-radius: 8px 4px 4px 8px;
    }

    .progress-border.first-step:after {
        width: 20%;
    }

    .progress-border.second-step:after {
        width: 40%;
    }

    .progress-border.third-step:after {
        width: 60%;
    }

    .progress-border.fouth-step:after {
        width: 80%;
    }

    .progress-border.fifth-step:after {
        width: 100%;
    }

.file-upload-error {
    font-size: 12px;
    color: #E14A5B;
    margin: 16px 0 0 0;
    word-wrap: break-word;
}

.header-username {
    font-size: 18px;
    color: #FFFFFF;
    font-family: 'Gordita-bold';
}

.soc-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 60px;
}

    .soc-list li {
        display: inline-flex;
        padding-right: 8px;
    }

        .soc-list li a {
            width: 48px;
            height: 48px;
            padding: 3px 9px;
            justify-content: center;
            align-items: center;
            border-radius: 56px;
            background: #FFF;
            box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.12);
            display: flex;
        }

.process-detail {
    margin: 92px 0 0 0;
}

    .process-detail p {
        font-size: 14px;
    }

    .process-detail .link-detail {
        text-decoration: underline;
        font-family: 'Gordita-bold';
        font-weight: 700;
        color: #2F364B;
    }

.document-list .doc-box {
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--colour-text-ebony-20, #CACFDE);
    background: var(--colour-background-white, #FFF);
    box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.10);
    width: 400px;
    margin-bottom: 16px;
}

    .document-list .doc-box:last-child {
        margin-bottom: 0;
    }

    .document-list .doc-box h3 {
        font-size: 14px;
        font-family: 'Gordita-bold';
        word-wrap: break-word;
    }

    .document-list .doc-box p {
        font-size: 12px;
        color: #2F364B;
        margin-bottom: 0;
        text-align: left;
    }


.upload-delete {
    z-index: 99;
}

.pass-verify p {
    font-size: 12px;
    color: #7A88AC;
    letter-spacing: 0.4px;
    margin: 8px 0 0 16px;
    display: flex;
    width: 100%;
}

.cont-error-box {
    border-radius: 8px;
    border: 1px solid #F8A23E;
    background: #F5DCBE;
    font-size: 14px;
}

.overlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(63, 74, 101, 0.5);
    z-index: 9999;
    display: none;
}

    .overlay.rotate {
        background: rgba(63, 74, 101, 0.8);
    }

        .overlay.rotate .overlay_img {
            width: 134px;
            height: 134px;
            margin: 0 auto;
        }

            .overlay.rotate .overlay_img img {
                width: 100%;
            }

        .overlay.rotate .overlay__content {
            background-color: transparent;
        }

.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 134px;
    height: 134px;
    background-color: #FFF;
    border-radius: 16px;
    padding: 24px;
}

.overlay .overlay_box {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
    line-height: 28px;
}

    .overlay .overlay_box p {
        width: 200px;
    }

.overlay__content img {
    width: 100%;
}

.overlay-close a {
    width: 32px;
    height: 32px;
    border-radius: 25px;
    background-color: #FFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 24px;
    right: 24px;
}

.signup-btn button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.alert {
    border-radius: 0.75rem !important;
}

.error-box {
    background-color: #EEC1C6;
    border-radius: 8px;
    border: 1px solid #E14A5B;
    padding: 16px;
    font-size: 14px;
    color: #202223;
    display: flex;
    align-items: flex-start;
    width: 320px;
    margin: 0 auto !important;
    margin-bottom: 16px !important;
}

    .error-box img {
        padding-right: 16px;
    }



input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

input::-ms-reveal,
input::-ms-clear {
    display: none;
}

.signup-owl-carousel {
    position: relative;
}

    .signup-owl-carousel .owl-nav button.owl-prev span,
    .signup-owl-carousel .owl-nav button.owl-next span {
        color: #272c38;
        font-size: 30px;
    }

    .signup-owl-carousel .owl-nav button.owl-prev {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        position: absolute;
    }

    .signup-owl-carousel .owl-nav button.owl-next {
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        position: absolute;
    }

    .signup-owl-carousel .owl-dots {
        text-align: center;
        bottom: 0;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

        .signup-owl-carousel .owl-dots .owl-dot {
            width: 8px;
            height: 8px;
            background-color: #CACFDE;
            border-radius: 100%;
            margin: 0 8px 0 0;
        }

            .signup-owl-carousel .owl-dots .owl-dot.active {
                width: 16px;
                background: linear-gradient(135deg, #00E587 0%, #00B8AD 100%);
                border-radius: 8px;
            }

    .signup-owl-carousel img {
        margin: 0 auto;
        margin-bottom: 15px;
        max-height: 50vh;
        width: auto !important;
    }

    .signup-owl-carousel .integation-detail {
        width: auto !important;
    }

    .signup-owl-carousel .integration-img-box {
        display: flex;
        align-items: center;
    }

ul.disc {
    list-style-type: disc;
}

.readonly-text {
    color: #CACFDE !important;
    border: 1px solid #CACFDE !important;
}

.modal-popup-even {
    z-index: 1040 !important;
}

.verify-identity.modal .modal-body .modal-subtitle-docu-sign {
    color: #2F364B;
    font-size: 24px;
    font-weight: 700;
    margin: 16px 0;
    font-family: 'Gordita-bold';
}

.verify-identity.modal .modal-body .modal-detail-docu-sign p {
    font-size: 18px;
    line-height: 28px;
    color: #2F364B;
    margin-bottom: 16px;
}

.payment-pages {
    overflow-y: hidden;
}

.custom-dropdown .dropdown-toggle {
    border: 1px solid #CACFDE;
    background-color: transparent;
    width: 100%;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.5px;
    color: #95A0BD;
    text-align: left;
    background-image: url(../../images/down-arrow.svg);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: top 12px right 10px;
    height: 48px;
    white-space: normal;
}

    .custom-dropdown .dropdown-toggle.show {
        background-image: url(../../images/up-arrow.svg);
    }

.custom-dropdown .dropdown-toggle:hover,
.custom-dropdown .dropdown-toggle:focus {
    box-shadow: none;
}

.custom-dropdown .dropdown-toggle::after {
    display: none;
}

.custom-dropdown .dropdown-menu {
    width: 100%;
    /* border: 1px solid #CACFDE; */
    border: none;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(228, 231, 238, 0.5);
}

.custom-dropdown .dropdown-menu .dropdown-item {
    margin: 0 8px;
    width: auto;
    color: #95A0BD;
    font-size: 14px;
    cursor: pointer;
    white-space: normal;
}

.custom-dropdown .dropdown-menu .dropdown-item:hover {
    background: rgba(228, 231, 238, 0.50);
    border-radius: 4px;
    color: #60719A;
}

.custom-dropdown .dropdown-toggle.valid {
    border: 1px solid #00E587;
    color: #1E2330 !important;
}

.custom-dropdown .dropdown-toggle.error {
    border: 1px solid #E14A5B;
    color: #E14A5B !important;
}

.custom-dropdown.dropdown .readonly {
    background-color: #F9F9F9;
    pointer-events: none;
    color: #CACFDE;
}

/*Responsive CSS*/
@media screen and (min-width: 320px) and (max-width: 1024px) {
    .payment-pages {
        overflow-y: auto;
    }
    .signup-page .right-box {
        display: none;
    }

    .signup-page .left-box {
        width: 100%;
    }

    .top-header {
        padding: 30px 16px;
    }

        .top-header .logout-btn a {
            border-radius: 32px;
            font-size: 0;
            width: 32px;
            height: 32px;
            text-align: center;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .top-header .logout-btn a img {
                margin: 0;
            }

    .active-payment {
        display: inherit !important;
        background: #F9F9F9;
    }

        .active-payment .left-box {
            width: 100%;
            padding: 24px;
            box-shadow: none;
        }

        .active-payment .right-box {
            width: 100%;
            box-shadow: none;
            padding: 24px;
            height: 90%;
            border-radius: 24px 24px 0px 0px;
        }

            .active-payment .right-box .box-detail {
                width: 100%;
            }

            .active-payment .right-box .page-title-box h2 {
                font-size: 24px;
            }

        .active-payment .left-box .payment-header {
            display: none;
        }

    .verify-step {
        margin: 8px 0 0 0;
    }

        .verify-step .step-details {
            display: none;
        }

    .steper-box {
        display: flex;
        justify-content: space-between;
    }

    .verify-step .step + .step {
        margin-top: 0;
    }

    .verify-step .step {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
    }

        .verify-step .step:before {
            position: absolute;
            content: "";
            background: #E4E7EE;
            width: 100%;
            top: 13px;
            left: -50%;
            z-index: 2;
            height: 4px;
        }

        .verify-step .step.step-active.check:after {
            position: absolute;
            content: "";
            background: linear-gradient(135deg, #00E587 0%, #00B8AD 100%);
            opacity: 0.5;
            width: 100%;
            top: 13px;
            left: 50%;
            z-index: 3;
            height: 4px;
        }

        .verify-step .step.step-active.check:last-child:after {
            display: none
        }

    .verify-step .circle:after {
        display: none;
    }

    .verify-step .circle {
        z-index: 4;
    }

    .verify-step .step:first-child::before {
        content: none;
    }

    .verify-step .step:last-child::after {
        content: none;
    }

    .verify-step .stepe-info {
        text-align: center;
        margin: 55px 0 0 0;
    }

        .verify-step .stepe-info h4 {
            font-size: 16px;
            font-weight: 700;
            font-family: 'Gordita-bold';
        }

        .verify-step .stepe-info p {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.5);
        }

    .verify-step .stepe-info {
        display: block;
    }

    .verify-form.signup-form .signup-btn {
        margin-top: 32px;
        text-align: center;
    }

    .verify-identity.modal .modal-body .modal-subtitle {
        color: #2F364B;
        font-size: 20px;
        font-weight: 700;
        margin: 16px 0;
        font-family: 'Gordita-bold';
    }

    .verify-identity.modal .modal-body .modal-detail p {
        font-size: 16px;
        line-height: 28px;
        color: #2F364B;
        margin-bottom: 16px;
    }

    .verify-identity.modal .modal-body .modal-subtitle-docu-sign {
        color: #2F364B;
        font-size: 20px;
        font-weight: 700;
        margin: 16px 0;
        font-family: 'Gordita-bold';
    }

    .verify-identity.modal .modal-body .modal-detail-docu-sign p {
        font-size: 16px;
        line-height: 28px;
        color: #2F364B;
        margin-bottom: 16px;
    }

    .verify-identity.modal {
        padding: 12px;
    }

    .verify-step .step .step-box .line {
        display: none;
    }
}

@media screen and (min-width: 320px) and (max-width: 768px) {
    .signup-page .left-box {
        padding-bottom: 40px;
    }

    .header-username {
        display: none !important;
    }

    .signup-page .left-box .card-box {
        padding: 0 24px;
    }

    .signup-page .left-box header .go-btn a {
        font-size: 0;
        width: 32px;
        height: 32px;
        border-radius: 33px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .signup-page .left-box header .go-btn a img {
            margin-right: 0;
        }

    .signup-page .left-box header .close-icon {
        display: inline-flex;
        margin-right: 0;
    }

    .signup-form .input-field input {
        width: 100%;
    }

    .signup-form .input-field {
        width: 100%;
    }

    .support-btn {
        display: none;
    }

    .mob-support-btn button {
        display: block;
    }

    .signup-page .left-box .mob-header {
        display: block;
        width: 100%;
    }

    .signup-page .left-box .des-header {
        display: none;
    }

    .signup-page .left-box .mob-header {
        width: 100%;
    }

    .signup-page .left-box header {
        margin-bottom: 0;
        top: -30px;
    }

    .success-box h2 {
        font-size: 24px;
    }

    .file-upload-box .accordion-item .accordion-button {
        width: auto !important;
    }

        .file-upload-box .accordion-item .accordion-button span {
            display: none;
        }

    .form-link {
        justify-content: center !important;
        flex-wrap: wrap;
    }

        .form-link .later-link {
            text-align: center;
            margin-bottom: 5px;
            margin-right: 50px;
        }

    .file-upload-box .accordion-item {
        padding: 16px;
    }

    .file-upload-image .upload-fail p {
        text-align: left;
    }

    .active-payment .right-box .page-info p {
        font-size: 16px;
        line-height: 26px;
    }

    .active-payment .right-box .contract-detail {
        padding: 0;
        background-color: transparent !important;
    }

        .active-payment .right-box .contract-detail .contract-box {
            width: 100%;
            box-shadow: none;
            padding: 0;
        }

            .active-payment .right-box .contract-detail .contract-box p {
                font-size: 16px;
            }

            .active-payment .right-box .contract-detail .contract-box h2 {
                font-size: 20px;
            }

        .active-payment .right-box .contract-detail .contract-info-box {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }

        .active-payment .right-box .contract-detail .contract-inner-box {
            margin-bottom: 16px;
            padding: 0;
            box-shadow: none;
        }

            .active-payment .right-box .contract-detail .contract-inner-box h2 {
                text-align: center;
            }

            .active-payment .right-box .contract-detail .contract-inner-box .contact-detail li {
                text-align: center;
            }

                .active-payment .right-box .contract-detail .contract-inner-box .contact-detail li:last-child {
                    margin-bottom: 0;
                }

    .header-username {
        display: none !important;
    }

    .soc-list li {
        padding-bottom: 7px;
    }

    .alert-success.alert-success-box {
        margin: 0;
        margin-bottom: 16px;
    }

    .alert-danger.alert-danger-box {
        margin: 0;
    }
}

@media screen and (min-width: 320px) and (max-width: 495px) {
    .active-payment .right-box .contract-detail .contract-box .border-btn {
        margin-right: 0;
        margin-bottom: 16px;
    }

    .document-list .doc-box {
        width: 100%;
    }

    .success-box {
        width: auto;
        margin: 0 32px 45px 32px !important;
    }

    .error-box {
        width: auto;
        margin: 0 32px 45px 32px !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .signup-form {
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

        .signup-form.verify-form {
            justify-content: flex-start;
            margin: 0 !important;
            display: inherit !important;
        }
}

@media screen and (min-width: 991px) and (max-width: 1200px) {
    .signup-page .left-box .card-box {
        padding: 0 32px;
    }

    .signup-owl-carousel img {
        max-width: 65%;
    }
}

@media screen and (min-width:768px) and (max-width:1400px) {
    .signup-page .left-box header .go-btn {
        margin-left: 5px;
    }

        .signup-page .left-box header .go-btn a {
            font-size: 11px;
            padding: 4px 8px;
        }

            .signup-page .left-box header .go-btn a img {
                width: 14px;
                margin-right: 5px;
            }

    .signup-page .right-box .integation-detail h2 {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .signup-page .right-box .integation-detail p {
        font-size: 14px;
    }
}

.font-12 {
    font-size: 12px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-22 {
    font-size: 22px !important;
}

.font-24 {
    font-size: 24px !important;
}

.font-26 {
    font-size: 26px !important;
}

.font-28 {
    font-size: 28px !important;
}

.font-30 {
    font-size: 30px !important;
}

.font-32 {
    font-size: 32px !important;
}

.line-height-28 {
    line-height: 28px !important;
}

a.contact-link {
    color: #2F364B !important;
    text-decoration: underline !important;
    font-weight: 700    !important;
    font-family: 'Gordita-Bold' !important;
}

a.contact-link:hover {
    color: #2F364B !important;
    text-decoration: underline !important;
    font-weight: 700    !important;
    font-family: 'Gordita-Bold' !important;
}

a.contact-link:visited {
    color: #2F364B !important;
    text-decoration: underline !important;
    font-weight: 700    !important;
    font-family: 'Gordita-Bold' !important;
}

.download-agreement-img {
    width: 64px;
    position: relative;
    align-items: center;
    align-content: center;
}

.download-btn button {
    padding: 10px 24px;
    display: flex;
    background: white;
    color: #1E2330;
    border-radius: 40px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Gordita-bold';
    outline: 0;
    align-items: center;
    border: 2px solid #1E2330;
}

.download-btn button:hover {
    box-shadow: 0 4px 15px 0 grey;
}

.agreement-container {
    width: 100%;
    height: 100%;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #CACFDE;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: inline-flex;
}

.terms-conditions-text {
    text-align: center;
    color: #3F4A65;
    font-size: 24px;
    font-weight: 700;
    word-wrap: break-word;
}

.pdf-reader-info {
    align-self: stretch;
    text-align: center;
    color: #60719A;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    word-wrap: break-word;
}

.agreement-checkbox-label {
    align-self: stretch;
    color: #1E2330;
    font-size: 16px;
    font-weight: 400;
    line-height: 20.80px;
    word-wrap: break-word;
}

input[type='checkbox'] {
    accent-color: #00E587;
}

.checkbox-size-medium {
    height: 18px;
    width: 18px;  
}

.agreement-info {
    padding-top: 10px;
    color: black;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    word-wrap: break-word;
}

.agreement-checkbox-container {
    padding-top: 16px;
}