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

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

@font-face {
    font-family: Gordita-Medium;
    src: url('/fonts/Gordita-Medium.woff2') format("woff2"), url('/fonts/Gordita-Medium.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-Regular;
}

.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 .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 .class-label {
    position: absolute !important;
    top: 0 !important;
    left: 15px !important;
    color: black !important;
    font-size: 12px !important;
    pointer-events: none !important;
    transition: 0.3s !important;
    transform-origin: left top !important;
    transform: translateY(-50%) scale(1) !important;
    background-color: white !important;
    padding: 0 5px !important;
    z-index: 1 !important;
}

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

.signup-form input:focus ~ .class-label {
    color: #1E2330;
}

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

.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
}


.auth-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: left;
    margin-bottom: 16px;
    margin-top: 20px;
}

.buttons-extender {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 10px;
}

.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-Regular';
}

.cancel-btn {
    padding: 12px 35px;
    display: inline-flex;
    border-radius: 40px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    align-items: center;
    outline: 0;
    border: 2px solid #000000;
    transition: all 0.4s ease-in-out;
    font-family: 'Gordita-Regular';
    background: #FFFFFF;
    color: #000000;
    margin-right: 10px;
}

.cancel-btn a {
    text-decoration: none;
}

.cancel-btn:hover {
    background: #FFFFFF;
    color: #000000;
    border-color: #000000;
    box-shadow: none;
    text-decoration: none;
    text-underline-offset: 4px;
}

.cancel-btn:active,
.cancel-btn:focus {
    background: #FFFFFF;
    color: #000000;
    border-color: #000000;
    outline: none;
}

.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-Regular;
    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-Regular';
    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-extender {
    margin-left: 20px;
    margin-right: 20px
}

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

.alert-success {
    width: 100%;
    padding: 14px;
    align-items: flex-start;
    border-radius: 8px;
    border: 1px solid  #00E587;
    margin-bottom: 1rem;
    display: inline-flex;
    position: relative;
}
.alert-success .alert-content .alert-description {
    color:  #00E587 ;
    font-size: 14px;
    margin-bottom:5px;
}

.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%;
}

.back-to-login-custom-container {
    width: 100%;
    height: 100%;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 40px;
    justify-content: right;
    gap: 8px;
    display: inline-flex;
}

.back-to-login-custom-link {
    color: #1E2330;
    font-size: 14px;
    font-family: Gordita-Regular;
    font-weight: 700;
    text-decoration: underline;
    line-height: 24px;
    word-wrap: break-word;
    align-self: flex-start;
}

.back-to-login-custom-link:hover {
    color: #1E2330;
}


.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;
}

.validation-bar {
    height: 3px;
    width: 0%;
    background-color: transparent;
    transition: width 0.3s ease;
    position: absolute;
    bottom: 0;
    left: 0;
}

.valid-bar {
    width: 100%;
    background-color: green;
}

.invalid-bar {
    width: 0%;
    background-color: red;
}


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%;
    }

    .signup-form .auth-code-number-input {
        width: 14%;
        height: 40px;
    }

    .signup-secondary-btn,
    .signup-btn .btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .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;
    }
}

.forgot-password-header-container {
    width: 100%;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.forgot-password-header-title {
    text-align: center;
    color: #1E2330;
    font-size: 24px;
    font-family: Gordita-Regular;
    font-weight: 700;
    word-wrap: break-word;
}

.forgot-password-forgot-password-header-description {
    align-self: stretch;
    color: #3F4A65;
    font-size: 16px;
    font-family: Gordita-Regular;
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
    margin-bottom: 20px !important;
}

.forgot-password-confirmation-custom-container {
    width: 100%;
    height: 100%;
    padding: 16px;
    background: #D2ECCB;
    border-radius: 8px;
    border: 1px #66BD50 solid;
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex;
}

.forgot-password-confirmation-success-icon-container {
    width: 24px;
    height: 24px;
    position: relative;
}

.forgot-password-confirmation-success-icon:nth-child(1) {
    left: 2px;
    top: 1.99px;
}

.forgot-password-confirmation-success-icon:nth-child(2) {
    width: 13px;
    height: 10.01px;
    left: 9px;
    top: 4px;
}

.forgot-password-confirmation-content-container {
    flex: 1 1 0;
    align-self: stretch;
    padding-left: 16px;
    padding-right: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    display: inline-flex;
}

.forgot-password-confirmation-content {
    align-self: stretch;
}

.forgot-password-confirmation-label {
    color: #66BD50;
    font-size: 14px;
    font-family: Gordita-Regular;
    font-weight: 400;
    line-height: 20px;
    word-wrap: break-word;
}

.forgot-password-confirmation-value {
    color: #66BD50;
    font-size: 14px;
    font-family: Gordita-Regular;
    font-weight: 500;
    line-height: 20px;
    word-wrap: break-word;
}

.forgot-password-confirmation-title {
    color: #1E2330;
    font-size: 24px;
    font-family: Gordita-Regular;
    margin-top: 10px;
    font-weight: 700;
    word-wrap: break-word;
}

.forgot-password-confirmation-text {
    width: 100%;
    color: #3F4A65;
    font-size: 16px;
    font-family: Gordita-Regular;
    font-weight: 400;
    line-height: 24px;
    margin-top: 10px;
    word-wrap: break-word;
}

.forgot-password-confirmation-resend {
    width: 100%;
}

.forgot-password-confirmation-resend-link {
    color: #3F4A65;
    font-size: 16px;
    font-family: Gordita-Regular;
    font-weight: 700;
    text-decoration: underline;
    line-height: 24px;
    word-wrap: break-word;
}

@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: 320px) and (max-width: 1024px) {
    .auth-code-input-inner-container {
        gap: 10px;
        padding: 8px;
        margin: 0;
        flex-wrap: wrap;
    }

    .auth-code-number-input {
        width: 20%;
        height: 40px;
        text-align: center;
    }
}

@media screen and (min-width: 320px) and (max-width: 768px) {
    .auth-code-input-inner-container {
        gap: 5px;
        padding: 5px;
    }

    .auth-code-number-input {
        width: 25%;
        height: 35px;
    }
}

@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;
    }

    .signup-form .btn-actions {
        margin-right: 50px;
    }
}

.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;
}

.validation-bar {
    height: 3px;
    width: 0%;
    background-color: transparent;
    transition: width 0.3s ease;
    position: absolute;
    bottom: 0;
    left: 0;
}

.valid-bar {
    width: 100%;
    background-color: green;
}

.invalid-bar {
    width: 0%;
    background-color: red;
}

#passwordStrengthBar, #confirmPasswordStrengthBar {
    width: 405.35px;
    height: 3px;
    flex-shrink: 0;
    border-radius: 20px;
}

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

.red-progress {
    background-color: #E14A5B;
}

.feedback-message {
    color: var(--Ebony-Clay-50, #7A88AC) !important;
    font-family: 'Gordita', sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0.4px !important;
}

#eyeClosedConfirm, #eyeRedClosedCurrent {
    display: none !important;
}

.reset-input-field input {
    border: none;
    padding-top: 15px;
    padding-left: 30px;
    outline: none;
}

.reset-input-field label {
    position: absolute;
    left: 10px;
    top: -20px;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    color: #888;
}

.reset-input-field input::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 10px;
    top: -20px;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    color: #888;
    z-index: 1;
}

.reset-input-field input:focus::before,
.reset-input-field input:not(:placeholder-shown)::before {
    color: #333;
}

#passwordStrengthBar, #confirmPasswordStrengthBar {
    width: 400.32px;
    height: 4px;
    flex-shrink: 2;
    border-radius: 20px;
}

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

.red-progress {
    background-color: #E14A5B;
}

.feedback-message {
    color: var(--Ebony-Clay-50, #7A88AC) !important;
    font-family: 'Gordita', sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0.4px !important;
}

#eyeClosedConfirm, #eyeRedClosedCurrent {
    display: none !important;
}

.reset-input-field input {
    border: none;
    padding-top: 15px;
    padding-left: 30px;
    outline: none;
}

.reset-input-field label {
    position: absolute;
    left: 10px;
    top: -20px;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    color: #888;
}

.reset-input-field input::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 10px;
    top: -20px;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    color: #888;
    z-index: 1;
}

.reset-input-field input:focus::before,
.reset-input-field input:not(:placeholder-shown)::before {
    color: #333;
}

.signup-form .security-setup-container-base {
    padding: 32px;
    background: #F9F9F9;
    border-radius: 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 24px;
    display: inline-flex;
}


.signup-form .verification-setup-container {
    width: 609px;
}

.signup-form .phonenumber-setup-container {
    width: 644px;
}

.signup-form .preferred-phonenumber-container {
    width: 580px;
}

.signup-form .security-setup-inner-base {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    display: flex;
}

.signup-form .security-setup-box-base {
    flex: 1 1 0;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 1px #CACFDE solid;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    display: inline-flex;
    align-content: center;
    text-align: center;
}

.two-factor-authentication-content {
    color: black;
    font-family: Gordita-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 50px;
}

.two-factor-authentication-container {
    display: flex;
    padding: 16px;
    width: 100%;
    flex-direction: column;
    margin-right: 100px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid lightgrey;
    margin-top: 30px;
}

.two-factor-authentication-container-inner-text {
    color: black;
    text-align: center;
    align-items: center;
    font-family: Gordita-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 10px;
}

.auth-code-input-inner-container {
    display: flex;
    gap: 20px;
    padding: 10px;
    align-items: center;
    margin: 0 auto;
    box-sizing: border-box;
}

.auth-code-number-input {
    border-radius: 4px;
    border: 1px solid lightgrey;
    font-size: 14px;
    flex: 1;
    max-width: 40px;
    height: 40px;
    text-align: center;
    box-sizing: border-box;

}

.two-factor-authentication-outer-container {
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.two-factor-authentication-outer-container-text {
    color: black;
    font-family: Gordita-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    text-decoration-line: underline;
}

.two-factor-authentication-outer-container-text:hover {
    color: var(--Ebony-100, #1E2330);
}

.two-factor-authentication-resend-text {
    color: var(--Ebony-100, #1E2330);
    text-align: center;
    font-family: Gordita-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    margin-left:100px;
    text-decoration-line: none;
}

.two-factor-authentication-resend-text:hover {
    color: var(--Ebony-100, #1E2330);
    text-decoration-line: none;
}

.two-factor-authentication-resend-icon{
    width: 24px;
    height: 24px;
}

.signup-secondary-btn {
    display: flex;
    height: 45px;
    padding: 12px 35px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 40px;
    font-size: 14px;
    text-decoration: none;
    color: var(--Ebony-100, #1E2330);
    font-weight: 700;
    font-family: 'Gordita-Regular';
    border: 2px solid var(--Ebony-100, #1E2330);
    transition: none;
}

.signup-secondary-btn:hover {
    text-decoration: none;
    color: var(--Ebony-100, #1E2330);
    border: 2px solid var(--Ebony-100, #1E2330);
}

.signup-form .preferred-phonenumber-info {
    height: 62px;
}

.signup-form .verification-setup-box {
    width: 545px;
}

.signup-form .auth-code-input-container {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    display: flex;
}


.signup-form .authenticator-setup-action-container {
    width: 223px;
    justify-content: space-between;
    display: inline-flex;
}

.signup-form .options {
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    display: flex;
    margin-right:200px;
}
.signup-form .option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.signup-form .radio-button {
    width: 24px !important;
    height: 24px !important;
    position: relative !important;
    border-radius: 50% !important;
    overflow: hidden;
    margin-right: 0 !important; 
}

.radio-button label {
    display: block;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: 3px black solid !important;
    background-color: #fff;
    transition: background-color 0.2s, border-color 0.2s;
}
.radio-button label::before {
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
}
@layer importantOverrides {
    .radio-button label {
        position: static !important;
    }
}
.custom-control-input:checked + label {
    border-color: #00B8AD !important;
}

.custom-control-input:checked + label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-color: #00B8AD !important;
    border-radius: 50%;
    opacity: 1;
}
.custom-control-input {
    display: none;
}
.option-text {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
    margin-left: 8px;
    width:200px;
}

.option-text div {
    color: var(--Ebony-100, #1E2330);
    leading-trim: both;
    text-edge: cap;
    font-family: Gordita-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}