:root {
    --lightest-green: #E6EFD8;
    --light-green: #C0CB50;
    --medium-green: #AAA13B;
    --dark-green: #5DC300;
    --darkest-green: #3F7D13;
    --ab-green: #5DC300;
    /* */
    --lightest-blue: #E8EEFB;
    --light-blue: #C6DFFE;
    --pale-blue: #83bdcd; /* As per African Bank */
    --mid-blue: #00a7d6; /* As per African Bank */
    --dark-blue: #152A5F;
    --darkest-blue: #162A5B;
    --ab-blue: #012B60;
    /* */
    --black: #000000;
    --white-001: #FFFFFF;
    --white-002: #F3F6FA;
    /*  Summary page section header. */
    --summary-section-header: #012B60;
    /* Primary buttons styling */
    --btn-primary-background: #5DC300;
    --btn-primary-border: #5DC300;
    --btn-primary-color: #FFFFFF;
    --btn-primary-hover-background: #5DA300;
    --btn-primary-hover-border: #5DA300;
    --btn-primary-hover-color: #FFFFFF;
    --btn-primary-width: 16rem;
    /* Primary light buttons styling */
    --btn-light-primary-background: #FFFFFF;
    --btn-light-primary-border: #012B60;
    --btn-light-primary-color: #012B60;
    --btn-light-primary-hover-background: #152A5F;
    --btn-light-primary-hover-border: #012B60;
    --btn-light-primary-hover-color: #FFFFFF;
    --btn-light-primary-width: 16rem;
    /* Outlined primary buttons styling */
    --btn-outline-primary-background: #FFFFFF;
    --btn-outline-primary-border: #012B60;
    --btn-outline-primary-color: #012B60;
    --btn-outline-primary-hover-background: #012B60;
    --btn-outline-primary-hover-border: #012B60;
    --btn-outline-primary-hover-color: #FFFFFF;
    --btn-outline-primary-width: 16rem;
    /* Verify buttons for user, owner, and credit score pages */
    --btn-verify-normal-background: #C2DCF2;
    --btn-verify-normal-border: #C2DCF2;
    --btn-verify-normal-color: #012B60;
    --btn-verify-hover-background: #012B60;
    --btn-verify-hover-border: #012B60;
    --btn-verify-hover-color: #FFFFFF;
    --btn-verify-grey-background: #054E93;
    --btn-verify-grey-border: #054E93;
    --btn-verify-grey-color: #FFFFFF;
    /* Register submit */
    --btn-register-submit-normal-background: #C2DCF2;
    --btn-register-submit-normal-border: #C2DCF2;
    --btn-register-submit-normal-color: #012B60;
    --btn-register-submit-hover-background: #012B60;
    --btn-register-submit-hover-border: #012B60;
    --btn-register-submit-hover-color: #FFFFFF;
    --btn-register-submit-grey-background: lightgrey;
    --btn-register-submit-grey-border: lightgrey;
    --btn-register-submit-grey-color: #012B60;
    /* Accordion colors */
    --accordion-text: #012B60;
    --accordion-background: #e9eef0;
    /* nav menu colors */
    --nav-active-normal-icon: #012B60;
    --nav-active-normal-text: #012B60;
    --nav-active-normal-background: #d5e5eb;
    --nav-inactive-normal-icon: #012B60;
    --nav-inactive-normal-text: #012B60;
    --nav-inactive-normal-background: #e9eef0;
    --nav-inactive-hover-icon: #012B60;
    --nav-inactive-hover-text: #012B60;
    --nav-inactive-hover-background: #d5e5eb;
    --top-nav-radius: 10px;
    --radius-1: 1px;
    --ab-radius: 2px;
    --radius-5: 5px;
    --radius-10: 10px;
    --radius-15: 15px;
    --radius-20: 20px;

    --font-family: 'Montserrat';
}

body {
    color: var(--ab-blue) !important;
    font-family: var(--font-family) !important;
    font-size: 16px !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ab-blue) !important;
    font-family: var(--font-family) !important;
    font-size: 24px !important;
}

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

h3#register-header-text {
    color: var(--summary-section-header) !important;
}

.text-dark {
    color: var(--summary-section-header) !important;
}

.fa-upload {
    color: var(--dark-green) !important;
}

.is-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%235DC300' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
}

.max-h-70px {
    max-height: 128px !important;
}

#profile-summary [class^=flaticon-]:before {
    content: none !important;
}

.fa-upload:before {
    content: none !important;
}

#consumer-credit [class^=flaticon2-]:before {
    content: none !important;
}

#consumer-credit [class^=flaticon-]:before {
    content: none !important;
}

#div-basic-screening-wizard [class^=flaticon-]:not([class=flaticon-information]):before {
    content: none !important;
}

.nav-icon {
    width: 0 !important;
}

/* Colors for the top 4 steps in the wizard. Outer wizard if you want. */
.wizard-4#kt_wizard .wizard-nav .wizard-steps .wizard-step[data-wizard-state=done] .wizard-wrapper .wizard-number {
    color: var(--dark-blue);
    background-color: var(--white-001);
    border-radius: var(--top-nav-radius) !important;
    border-color: var(--dark-blue) !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.wizard-4#kt_wizard .wizard-nav .wizard-steps .wizard-step[data-wizard-state=current] .wizard-wrapper .wizard-number {
    color: var(--dark-blue);
    background-color: var(--white-001);
}

.wizard-4#kt_wizard .wizard-nav .wizard-steps .wizard-step[data-wizard-state=pending] .wizard-wrapper .wizard-number {
    color: var(--dark-blue);
    background-color: var(--white-001);
    border-radius: var(--top-nav-radius) !important;
    border-color: var(--dark-blue) !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.wizard-4#kt_wizard .wizard-nav .wizard-steps .wizard-step[data-wizard-state=done] .wizard-wrapper .wizard-label .wizard-title {
    color: var(--dark-blue);
    font-size: 24px !important;
}

.wizard-4#kt_wizard .wizard-nav .wizard-steps .wizard-step[data-wizard-state=current] .wizard-wrapper .wizard-label .wizard-title {
    color: var(--white-001);
    font-size: 24px !important;
}

.wizard-4#kt_wizard .wizard-nav .wizard-steps .wizard-step[data-wizard-state=pending] .wizard-wrapper .wizard-label .wizard-title {
    color: var(--dark-blue);
    font-size: 24px !important;
}

.wizard-4#kt_wizard .wizard-nav .wizard-steps .wizard-step[data-wizard-state=done] .wizard-wrapper .wizard-label .wizard-desc {
    color: var(--dark-blue);
    font-size: 16px !important;
}

.wizard-4#kt_wizard .wizard-nav .wizard-steps .wizard-step[data-wizard-state=current] .wizard-wrapper .wizard-label .wizard-desc {
    color: var(--white-001);
    font-size: 16px !important;
}

.wizard-4#kt_wizard .wizard-nav .wizard-steps .wizard-step[data-wizard-state=pending] .wizard-wrapper .wizard-label .wizard-desc {
    color: var(--dark-blue);
    font-size: 16px !important;
}

.wizard-4#kt_wizard .wizard-nav .wizard-steps .wizard-step[data-wizard-state=done] {
    background-color: var(--white-001) !important;
    border-radius: var(--top-nav-radius) !important;
    border-color: var(--dark-blue) !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.wizard-4#kt_wizard .wizard-nav .wizard-steps .wizard-step[data-wizard-state=current] {
    background-color: var(--dark-blue) !important;
    border-radius: var(--top-nav-radius) !important;
    border-color: var(--dark-blue) !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.wizard-4#kt_wizard .wizard-nav .wizard-steps .wizard-step[data-wizard-state=pending] {
    background-color: var(--white-001) !important;
    border-radius: var(--top-nav-radius) !important;
    border-color: var(--dark-blue) !important;
    border-width: 1px !important;
    border-style: solid !important;
}


/* Colors for the left-side steps in basic screening and funder search wizards. Inner wizards if you want. */
/*
.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state=current] .wizard-wrapper .wizard-icon {
    color: var(--dark-green);
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state=pending] .wizard-wrapper .wizard-icon {
    color: var(--dark-green);
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state=done] .wizard-wrapper .wizard-icon {
    color: var(--dark-green);
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="current"] {
    background-color: white !important;
    border-color: var(--dark-green) !important;
    border-style: solid !important;
    border-width: 1px !important;
    margin-bottom: var(--radius-1);
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="current"]:after {
    border-left-color: var(--dark-green) !important;
    margin-bottom: var(--radius-1);
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="pending"] {
    background-color: white !important;
    border-color: var(--light-green) !important;
    border-style: solid !important;
    border-width: 1px !important;
    margin-bottom: var(--radius-1);
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="done"] {
    background-color: white !important;
    border-color: var(--light-green) !important;
    border-style: solid !important;
    border-width: 1px !important;
    margin-bottom: var(--radius-1);
}


.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="current"] .wizard-wrapper .wizard-label .wizard-title {
    color: var(--dark-blue);
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="current"] .wizard-wrapper .wizard-label .wizard-desc {
    color: var(--dark-blue);
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="pending"] .wizard-wrapper .wizard-label .wizard-title {
    color: var(--dark-blue);
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="pending"] .wizard-wrapper .wizard-label .wizard-desc {
    color: var(--dark-blue);
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="done"] .wizard-wrapper .wizard-label .wizard-title {
    color: var(--dark-blue);
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="done"] .wizard-wrapper .wizard-label .wizard-desc {
    color: var(--dark-blue);
}
*/

/* -------------------------------------------------------------------------------- */
/* Right side bar colors */
.navi .navi-item .navi-link .navi-text {
    color: var(--dark-blue);
}

.navi .navi-item .navi-link:hover .navi-text {
    color: var(--dark-blue) !important;
}

#kt_quick_user_toggle {
    background-color: white !important;
    color: var(--dark-blue) !important;
}

#kt_quick_user_toggle:hover {
    background-color: var(--dark-blue) !important;
    color: white !important;
}

.svg-icon.svg-icon-primary svg g [fill] {
    fill: var(--dark-blue) !important;
}

.symbol.symbol-light-dark .symbol-label {
    background-color: var(--dark-blue) !important;
    color: white !important;
}
/* -------------------------------------------------------------------------------- */
/* Password strength progress bar. */
.progress-bar.bg-warning {
    background-color: var(--mid-blue) !important;
}

/* -------------------------------------------------------------------------------- */
/* Google G icon color on login button. */
i.fab.fa-google {
    color: var(--dark-blue);
}

/*
a:hover {
    color: var(--dark-blue) !important;
}
*/

i.fa.fa-question-circle {
    color: var(--dark-green) !important;
}

i.fa.fa-info-circle {
    color: var(--dark-green) !important;
}

.label.label-xl.label-rounded.label-light-primary {
    background-color: var(--lightest-green) !important;
    color: var(--dark-green) !important;
}
/* -------------------------------------------------------------------------------- */
/* RADIO CSS. */
/* Standard radio (checked background) and border color CSS. */
.radio.radio-outline.radio-primary > input:checked ~ span {
    background-color: transparent !important;
    border-color: var(--dark-green) !important;
}
/* Standard radio (checked tick) color CSS. */
.radio.radio-outline.radio-primary > input:checked ~ span:after {
    background-color: var(--dark-green) !important;
    width: 10px !important;
    height: 10px !important;
}
/* Standard radio (unchecked background) and border color CSS. */
.radio.radio-outline.radio-primary > input:not(:checked) ~ span {
    background-color: transparent !important;
    border-color: var(--dark-green) !important;
}

/* Standard radio (checked disabled background) and border color CSS. */
.radio.radio-outline.radio-primary > input:checked:disabled ~ span {
    background-color: transparent !important;
    border-color: lightgrey !important;
}
/* Standard radio (checked disabled tick) color CSS. */
.radio.radio-outline.radio-primary > input:checked:disabled ~ span:after {
    background-color: lightgrey !important;
    width: 10px !important;
    height: 10px !important;
}
/* Standard radio (unchecked disabled background) and border color CSS. */
.radio.radio-outline.radio-primary > input:not(:checked):disabled ~ span {
    background-color: transparent !important;
    border-color: lightgrey !important;
}
/* Funding requirements page. */
/*.radio > input[name='financefor']:checked ~ span {
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
    color: var(--dark-green) !important;
}*/

.radio > input[name='financefor']:checked ~ span {
    background-color: transparent !important;
    border-color: var(--dark-green) !important;
}
.radio > input[name='financefor']:checked ~ span:after {
    background-color: var(--dark-green) !important;
    width: 10px !important;
    height: 10px !important;
}
.radio > input[name='financefor']:not(:checked) ~ span {
    background-color: transparent !important;
    border-color: var(--dark-green) !important;
}

.radio > input[name='financefor']:checked:disabled ~ span {
    background-color: transparent;
    border-color: lightgrey !important;
}
.radio > input[name='financefor']:checked:disabled ~ span:after {
    background-color: lightgrey !important;
    width: 10px !important;
    height: 10px !important;
}
.radio > input[name='financefor']:not(:checked):disabled ~ span {
    background-color: transparent !important;
    border-color: lightgrey !important;
}

/* -------------------------------------------------------------------------------- */
/* CHECKBOX CSS. */
.checkbox > input#input-credit-score-declaration:checked ~ span {
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
}
/* Standard checkbox (checked tick) border color CSS. */
.checkbox > input#input-credit-score-declaration:checked ~ span:after {
    border-color: white !important;
}
/* Standard checkbox (unchecked background) and border color CSS. */
.checkbox > input#input-credit-score-declaration:not(:checked) ~ span {
    background-color: lightgrey !important;
    border-color: var(--dark-green) !important;
    border-width: 2px !important;
    /*border-color: lightgrey !important;*/
}

.checkbox > input#input-summary-declaration:checked ~ span {
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
}
/* Standard checkbox (checked tick) border color CSS. */
.checkbox > input#input-summary-declaration:checked ~ span:after {
    border-color: white !important;
}
/* Standard checkbox (unchecked background) and border color CSS. */
.checkbox > input#input-summary-declaration:not(:checked) ~ span {
    background-color: lightgrey !important;
    border-color: var(--dark-green) !important;
    border-width: 2px !important;
    /*border-color: lightgrey !important;*/
}

/* TERMS AND CONDITIONS CHECKBOX. */
.checkbox > input#terms-and-conditions:checked ~ span {
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
    width: 25px !important;
    height: 25px !important;
}
/* Standard checkbox (checked tick) border color CSS. */
.checkbox > input#terms-and-conditions:checked ~ span:after {
    border-color: white !important;
    width: 25px !important;
    height: 25px !important;
    left: 5px !important;
    top: 3px !important;
    width: 10px !important;
    height: 18px !important;
    border: solid white !important;
    border-width: 0 4px 4px 0 !important;
    -webkit-transform: rotate(45deg) !important;
    -ms-transform: rotate(45deg) !important;
    transform: rotate(45deg) !important;
}
/* Standard checkbox (unchecked background) and border color CSS. */
.checkbox > input#terms-and-conditions:not(:checked) ~ span {
    background-color: lightgrey !important;
    border-color: var(--dark-green) !important;
    border-width: 2px !important;
    /*border-color: lightgrey !important;*/
    width: 25px !important;
    height: 25px !important;
}

/* Standard checkbox (checked background) and border color CSS. */
.checkbox > input:checked ~ span {
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
}
/* Standard checkbox (checked tick) border color CSS. */
.checkbox > input:checked ~ span:after {
    border-color: white !important;
}
/* Standard checkbox (unchecked background) and border color CSS. */
.checkbox > input:not(:checked) ~ span {
    background-color: lightgrey !important;
    border-color: var(--dark-green) !important;
    border-width: 2px !important;
    /*border-color: lightgrey !important;*/
}
/* Standard checkbox (checked background) and border color CSS. */
.checkbox.checkbox-primary > input:checked ~ span {
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
}
/* Standard checkbox (checked tick) and border color CSS. */
.checkbox.checkbox-primary > input:checked ~ span:after {
    border-color: white !important;
}
/* Standard checkbox (unchecked background) and border color CSS. */
.checkbox.checkbox-primary > input:not(:checked) ~ span {
    background-color: lightgrey !important;
    border-color: var(--dark-green) !important;
    border-width: 2px !important;
    /*border-color: lightgrey !important;*/
}

/* Standard outlined checkbox (checked background) and border color CSS. */
.checkbox.checkbox-outline > input:checked ~ span {
    background-color: white !important;
    border-color: var(--dark-green) !important;
}
/* Standard outlined checkbox (checked tick) and border color CSS. */
.checkbox.checkbox-outline > input:checked ~ span:after {
    border-color: var(--dark-green) !important;
}
/* Standard outlined checkbox (unchecked background) and border color CSS. */
.checkbox.checkbox-outline > input:not(:checked) ~ span {
    background-color: transparent !important;
    border-color: var(--dark-green) !important;
}
/* -------------------------------------------------------------------------------- */
.accordion.accordion-toggle-arrow .card .card-header .card-title:after {
    color: var(--accordion-text) !important;
}

.accordion.accordion-toggle-arrow .card .card-header .card-title {
    background-color: var(--accordion-background);
    color: var(--accordion-text) !important;
}

.accordion i.flaticon-profile {
    color: var(--accordion-text) !important;
}

/* -------------------------------------------------------------------------------- */
a.text-primary:focus {
    color: var(--dark-green) !important;
}

span i {
    color: var(--dark-green);
}

label a {
    color: var(--dark-green);
}

a {
    color: var(--dark-green) !important;
}

a.btn-light-primary {
    color: var(--darker-green) !important;
    background-color: white;
}

a:hover {
    color: var(--green) !important;
}

a.text-hover-primary, .text-hover-primary {
    color: var(--dark-green) !important;
}

a.text-hover-primary:hover, .text-hover-primary:hover {
    color: var(--dark-green) !important;
}

span#register-result-name, #register-result-surname, #register-result-email {
    font-weight: bold !important;
}

span#register-result-name-label, #register-result-surname-label, #register-result-email-label {
    font-weight: normal !important;
    color: var(--ab-blue) !important;
}

#register-result-message {
    color: var(--ab-blue) !important;
}
/* -------------------------------------------------------------------------------- */
/*
input:disabled {
    border-color: transparent !important;
    background-color: lightblue !important;
}

input {
    border-color: lightgray !important;
    background-color: white !important;
}

input:hover {
    border-color: var(--blue-8) !important;
}

input:focus {
    border-color: var(--blue-8) !important;
    background-color: var(--blue-1) !important;
}
*/
/*
select {
    border-color: lightgray !important;
    background-color: white !important;
}

select:focus {
    border-color: var(--blue-8) !important;
    background-color: var(--blue-1) !important;
}

select:disabled {
    border-color: transparent !important;
    background-color: lightgrey !important;
}

select:hover:not(:disabled) {
    border-color: var(--blue-8) !important;
    background-color: white !important;
}
*/
/* Buttons. */
#register-header-text {
    color: var(--ab-green) !important;
}

#login-header-text {
    color: var(--ab-blue) !important;
}

.text-uppercase {
    text-transform: none !important;
}


.btn.btn-outline-primary#id-onboarding-summary-edit-a, #profile-summary-continue-funder-search, #profile-summary-view-funder-searches, #profile-summary-start-funder-search, #id-onboard-summary-add-company-btn {
    width: 18rem !important;
}

button#button-wizard-next {
    content: "Next" !important;
}

button.swal2-confirm i.fa-thumbs-up {
    color: white !important;
    font-family: 'Montserrat' !important;
}

button.swal2-confirm {
    background-color: var(--btn-primary-background) !important;
    color: var(--btn-primary-color) !important;
    font-family: 'Montserrat' !important;
    border: var(--ab-radius) solid var(--btn-primary-border) !important;
}

button.swal2-confirm:hover:not(.btn-text):not(:disabled):not(.disabled) {
    background-color: var(--btn-primary-hover-background) !important;
    color: var(--btn-primary-hover-color) !important;
    font-family: 'Montserrat' !important;
    border: var(--ab-radius) solid var(--btn-primary-hover-border) !important;
}

button.swal2-cancel {
    background-color: var(--btn-outline-primary-background) !important;
    color: red !important;
    font-family: 'Montserrat' !important;
    border: var(--ab-radius) solid red !important;
}

button.swal2-cancel:hover:not(.btn-text):not(:disabled):not(.disabled) {
    background-color: red !important;
    color: var(--btn-outline-primary-hover-color) !important;
    font-family: 'Montserrat' !important;
    border: var(--ab-radius) solid red !important;
}

.btn.btn-outline-primary i {
    color: var(--dark-green) !important;
    border-radius: var(--ab-radius) !important;
    font-family: 'Montserrat' !important;
}

.btn.btn-primary {
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
    color: white !important;
    border-radius: var(--ab-radius) !important;
    font-family: 'Montserrat' !important;
}
/* Buttons on the OTP dialog popup BEGIN. */
.btn-primary#id-verify-mobile-resend-button {
    background-color: var(--btn-primary-background) !important;
    border-color: var(--btn-primary-border) !important;
    color: var(--btn-primary-color) !important;
    border-radius: var(--ab-radius) !important;
    width: 15rem !important;
    font-family: 'Montserrat' !important;
}

.btn-primary#VerifySmsBtnApply {
    background-color: var(--btn-primary-background) !important;
    border-color: var(--btn-primary-border) !important;
    color: var(--btn-primary-color) !important;
    border-radius: var(--ab-radius) !important;
    width: 8rem !important;
    font-family: 'Montserrat' !important;
}

.btn-secondary#VerifySmsBtnCancel {
    background-color: var(--btn-outline-primary-background) !important;
    border-color: var(--btn-outline-primary-border) !important;
    color: var(--btn-outline-primary-color) !important;
    border-radius: var(--ab-radius) !important;
    width: 8rem !important;
    font-family: 'Montserrat' !important;
}

.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled)#id-verify-mobile-resend-button {
    background-color: var(--btn-primary-hover-background) !important;
    border-color: var(--btn-primary-hover-border) !important;
    color: var(--btn-primary-hover-color) !important;
    border-radius: var(--ab-radius) !important;
    width: 15rem !important;
    font-family: 'Montserrat' !important;
}

.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled)#VerifySmsBtnApply {
    background-color: var(--btn-primary-hover-background) !important;
    border-color: var(--btn-primary-hover-border) !important;
    color: var(--btn-primary-hover-color) !important;
    border-radius: var(--ab-radius) !important;
    width: 8rem !important;
    font-family: 'Montserrat' !important;
}

.btn-secondary:hover:not(.btn-text):not(:disabled):not(.disabled)#VerifySmsBtnCancel {
    background-color: var(--btn-outline-primary-hover-background) !important;
    border-color: var(--btn-outline-primary-hover-border) !important;
    color: var(--btn-outline-primary-hover-color) !important;
    border-radius: var(--ab-radius) !important;
    width: 8rem !important;
    font-family: 'Montserrat' !important;
}
/* Buttons on the OTP dialog popup END. */

.btn-primary#id-alert-button-ok, #kt_login_signin_submit, #forgot-password-submit, #reset-password-submit, #email-activation-submit {
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
    color: white !important;
    border-radius: var(--ab-radius) !important;
    font-family: 'Montserrat' !important;
}

.btn-light-primary#back-btn {
    background-color: var(--lightest-green) !important;
    border-color: var(--lightest-green) !important;
    color: var(--dark-green) !important;
    border-radius: var(--ab-radius) !important;
    font-family: 'Montserrat' !important;
}

.btn-primary#button-wizard-submit, #button-wizard-next {
    width: var(--btn-primary-width) !important;
    font-family: 'Montserrat' !important;
}

.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled)#button-wizard-submit, #button-wizard-next {
    width: var(--btn-primary-width) !important;
    font-family: 'Montserrat' !important;
}

.btn-outline-primary#button-wizard-save {
    width: var(--btn-outline-primary-width) !important;
    font-family: 'Montserrat' !important;
}

.btn-outline-primary:hover:not(.btn-text):not(:disabled):not(.disabled)#button-wizard-save {
    width: var(--btn-outline-primary-width) !important;
    font-family: 'Montserrat' !important;
}

.btn-outline-primary#button-wizard-cancel {
    color: red !important;
    border-color: red !important;
    width: var(--btn-outline-primary-width) !important;
    font-family: 'Montserrat' !important;
}

.btn-outline-primary:hover:not(.btn-text):not(:disabled):not(.disabled)#button-wizard-cancel {
    color: white !important;
    background-color: red !important;
    border-color: red !important;
    width: var(--btn-outline-primary-width) !important;
    font-family: 'Montserrat' !important;
}

.btn-light-primary#button-wizard-prev {
    width: var(--btn-light-primary-width) !important;
    font-family: 'Montserrat' !important;
}

.btn-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled)#button-wizard-prev {
    width: var(--btn-light-primary-width) !important;
    font-family: 'Montserrat' !important;
}

.btn-primary#button-user-profile-identity, #button-user-profile-mobile, #button-owner-profile-identity, #button-owner-profile-mobile, #cc-identity-btn-id, #cc-mobile-btn-id {
    background-color: var(--btn-verify-normal-background) !important;
    border-color: var(--btn-verify-normal-border) !important;
    color: var(--btn-verify-normal-color) !important;
    border-top-right-radius: var(--ab-radius) !important;
    border-bottom-right-radius: var(--ab-radius) !important;
    width: 10rem !important;
    font-family: 'Montserrat' !important;
}

.btn-primary#button-user-profile-identity:disabled, #button-user-profile-mobile:disabled, #button-owner-profile-identity:disabled, #button-owner-profile-mobile:disabled, #cc-identity-btn-id:disabled, #cc-mobile-btn-id:disabled {
    background-color: var(--btn-verify-grey-background) !important;
    border-color: var(--btn-verify-grey-border) !important;
    color: var(--btn-verify-grey-color) !important;
    border-top-right-radius: var(--ab-radius) !important;
    border-bottom-right-radius: var(--ab-radius) !important;
    width: 10rem !important;
    font-family: 'Montserrat' !important;
}

.btn-light-primary#a-google {
    background-color: #e9eef0 !important;
    border-color: #e9eef0 !important;
    color: var(--dark-blue) !important;
    border-radius: var(--ab-radius) !important;
}

.btn-light-primary#a-google:hover:not(.btn-text):not(:disabled) {
    background-color: darkgrey !important;
    border-color: darkgrey !important;
    color: white !important;
    border-radius: var(--ab-radius) !important;
}

.btn-primary {
    background-color: var(--btn-primary-background) !important;
    border-color: var(--btn-primary-border) !important;
    color: var(--btn-primary-color) !important;
    border-radius: var(--ab-radius) !important;
    font-family: 'Montserrat' !important;
}

.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled) {
    background-color: var(--btn-primary-hover-background) !important;
    border-color: var(--btn-primary-hover-border) !important;
    color: var(--btn-primary-hover-color) !important;
    border-radius: var(--ab-radius) !important;
    font-family: 'Montserrat' !important;
}

.btn-light-primary {
    background-color: var(--btn-light-primary-background) !important;
    border-color: var(--btn-light-primary-border) !important;
    color: var(--btn-light-primary-color) !important;
    border-radius: var(--ab-radius) !important;
    font-family: 'Montserrat' !important;
}

.btn-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled) {
    background-color: var(--btn-light-primary-hover-background) !important;
    border-color: var(--btn-light-primary-hover-border) !important;
    color: var(--btn-light-primary-hover-color) !important;
    border-radius: var(--ab-radius) !important;
    font-family: 'Montserrat' !important;
}

.btn-outline-primary {
    background-color: var(--btn-outline-primary-background) !important;
    border-color: var(--btn-outline-primary-border) !important;
    color: var(--btn-outline-primary-color) !important;
    border-radius: var(--ab-radius) !important;
    font-family: 'Montserrat' !important;
}

.btn-outline-primary:hover:not(.btn-text):not(:disabled):not(.disabled) {
    background-color: var(--btn-outline-primary-hover-background) !important;
    border-color: var(--btn-outline-primary-hover-border) !important;
    color: var(--btn-outline-primary-hover-color) !important;
    border-radius: var(--ab-radius) !important;
    font-family: 'Montserrat' !important;
}

    /*
.btn-outline-primary#button-doc-a, #button-doc-b {
    border-color: var(--ab-green) !important;
    border-radius: var(--ab-radius) !important;
    font-family: 'Montserrat' !important;
}
*/
.btn-outline-primary#button-doc-a:hover:not(.btn-text):not(:disabled):not(.disabled), #button-doc-b:hover:not(.btn-text):not(:disabled):not(.disabled) {
    border-color: var(--btn-outline-primary-hover-border) !important;
    color: var(--btn-outline-primary-hover-color) !important;
    border-radius: var(--ab-radius) !important;
    font-family: 'Montserrat' !important;
}

.flaticon-profile {
    color: var(--dark-green) !important;
}

/*
.input:hover {
    border-color: #00B4BA !important;
}

.btn.btn-light-primary {
    border-color: #00B4BA !important;
    background-color: #B8DEE9 !important;
    color: #00B4BA !important;
}

.btn.btn-primary {
    background-color: #00B4BA !important;
    border-color: #AFEEEE !important;
}

.alert.alert-custom.alert-outline-primary {
    border-color: #00B4BA !important;
    border-style: solid !important;
    border-width: 1px !important;
}

.btn.btn-secondary {
    border-color: #00B4BA !important;
    background-color: #B8DEE9 !important;
    color: #00B4BA;
}

.btn.btn-secondary:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-secondary:focus:not(.btn-text), .btn.btn-secondary.focus:not(.btn-text) {
     color: white;
     background-color: #00B4BA !important;
     border-color: #00B4BA !important;
 }

.btn.btn-light {
    color: white;
    background-color: #00B4BA;
    border-color: #00B4BA;
}
*/

.alert.alert-custom.alert-outline-primary {
    border-color: var(--dark-green) !important;
    border-style: solid !important;
    border-width: 1px !important;
}


/*
.header-menu .menu-nav > .menu-item.menu-item-rel {
    background-color: var(--blue-2);
}

.header-menu .menu-nav > .menu-item.menu-item-rel:hover:not(.menu-item-active) {
    background-color: var(--blue-4) !important;
    color: white !important;
}
.header-menu .menu-nav > .menu-item:hover > .menu-link .menu-text {
    color: white !important;
}
.header-menu .menu-nav > .menu-item > .menu-link .menu-text {
    color: var(--blue-4);
}
*/

/*
.symbol.symbol-light-dark > .symbol-label {
    background-color: var(--blue-4);
    color: white;
}

.btn.btn-secondary:hover .symbol-label {
    background-color: var(--blue-2) !important;
    color: var(--blue-4) !important;
}

.header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text {
    color: white;
}

.header-menu .menu-nav > .menu-item.menu-item-active > .menu-link {
    background-color: var(--blue-8);
    color: white;
}
*/

/* Colours for active nav item. */
.nav.nav-pills.nav-light-primary .nav-link.active {
    background-color: var(--nav-active-normal-background) !important;
}

.nav.nav-pills.nav-light-primary .nav-link.active .nav-text {
    font-weight: bold;
    color: var(--nav-active-normal-text) !important;
}

.nav.nav-pills.nav-light-primary .nav-link.active .nav-icon i {
    color: var(--nav-active-normal-icon) !important;
}

.nav.nav-pills.nav-light-primary .nav-link:not(.active) {
    background-color: var(--nav-inactive-normal-background) !important;
}

.nav.nav-pills.nav-light-primary .nav-link:not(.active) .nav-icon i {
    color: var(--nav-inactive-normal-icon) !important;
}

.nav.nav-pills.nav-light-primary .nav-link:not(.active) .nav-text {
    color: var(--nav-inactive-normal-text) !important;
}

.nav.nav-pills.nav-light-primary .nav-link:hover:not(.active) {
    background-color: var(--nav-inactive-hover-background) !important;
}

.nav.nav-pills.nav-light-primary .nav-link:hover:not(.active) .nav-icon i {
    color: var(--nav-inactive-hover-icon) !important;
}

.nav.nav-pills.nav-light-primary .nav-link:hover:not(.active) .nav-text {
    color: var(--nav-inactive-hover-text) !important;
}
/* --------------------------------------------------------------------------------------------- */
.alert.alert-custom.alert-outline-primary {
    border-color: lightgray !important;
}

.alert.alert-custom.alert-outline-primary .alert-icon .flaticon-information {
    color: lightgray !important;
}

.alert.alert-custom.alert-outline-primary .alert-text {
    color: black !important;
}

.alert.alert-custom.alert-outline-info {
    border-color: #D5D7DA !important;
}

.alert.alert-custom.alert-outline-info .alert-icon .flaticon-information {
    color: var(--ab-green) !important;
}

.alert.alert-custom.alert-outline-info .alert-text {
    color: var(--ab-blue) !important;
}

/*
.alert.alert-custom.alert-outline-info#register-result-message {
    border-color: var(--ab-blue) !important;
}

.alert.alert-custom.alert-outline-info#register-result-message .alert-icon .flaticon-information {
    color: var(--ab-blue) !important;
}

.alert.alert-custom.alert-outline-info#register-result-message .alert-text {
    color: var(--ab-blue) !important;
}
*/

/* ========================================
   African Bank Union Components - Override Wizard Styling
   ======================================== */

/* Current Step - Green SVG Union Design */
.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="current"] {
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 382 73' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M361.965 0C366.383 0 369.965 3.58172 369.965 8V18.6726C369.965 20.5698 370.639 22.4052 371.867 23.8512L380.959 34.5566C381.674 35.3985 381.674 36.7636 380.959 37.6055L371.867 48.3109C370.639 49.7569 369.965 51.5923 369.965 53.4895V65C369.965 69.4183 366.383 73 361.965 73H8.96484C4.54657 73 0.964844 69.4183 0.964844 65V8C0.964844 3.58172 4.54657 0 8.96484 0H361.965Z' fill='white' stroke='%235DC400' stroke-width='1'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-color: transparent !important;
    width: auto !important;
    max-width: 382px !important;
    height: 73px !important;
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    border-style: none !important;
    border-radius: 0 !important;
}

/* Done/Completed Step - Green SVG Union Design */
.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="done"] {
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 382 73' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M361.965 0C366.383 0 369.965 3.58172 369.965 8V18.6726C369.965 20.5698 370.639 22.4052 371.867 23.8512L380.959 34.5566C381.674 35.3985 381.674 36.7636 380.959 37.6055L371.867 48.3109C370.639 49.7569 369.965 51.5923 369.965 53.4895V65C369.965 69.4183 366.383 73 361.965 73H8.96484C4.54657 73 0.964844 69.4183 0.964844 65V8C0.964844 3.58172 4.54657 0 8.96484 0H361.965Z' fill='white' stroke='lightgrey' stroke-width='1'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-color: transparent !important;
    width: auto !important;
    max-width: 382px !important;
    height: 73px !important;
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    border-style: none !important;
    border-radius: 0 !important;
    /*
    background: #f8f9fa !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    width: auto !important;
    max-width: 382px !important;
    height: 73px !important;
    opacity: 0.6 !important;
    transition: all 0.3s ease !important;
    */
}

/* Pending Step - Inactive Union CSS Design */
.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="pending"] {
    /*background: #f8f9fa !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    width: auto !important;
    max-width: 382px !important;
    height: 73px !important;
    opacity: 0.6 !important;
    transition: all 0.3s ease !important;*/

    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 382 73' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M361.965 0C366.383 0 369.965 3.58172 369.965 8V18.6726C369.965 20.5698 370.639 22.4052 371.867 23.8512L380.959 34.5566C381.674 35.3985 381.674 36.7636 380.959 37.6055L371.867 48.3109C370.639 49.7569 369.965 51.5923 369.965 53.4895V65C369.965 69.4183 366.383 73 361.965 73H8.96484C4.54657 73 0.964844 69.4183 0.964844 65V8C0.964844 3.58172 4.54657 0 8.96484 0H361.965Z' fill='white' stroke='lightgrey' stroke-width='1'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-color: transparent !important;
    border-color: red !important;
    width: auto !important;
    max-width: 382px !important;
    height: 73px !important;
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    border-style: none !important;
    border-radius: 0 !important;
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="pending"]:hover {
    opacity: 0.8 !important;
    border-color: #cbd5e1 !important;
}

/* Hide the arrow indicator for all states */
.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="current"]:after,
.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="done"]:after,
.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="pending"]:after {
    display: none !important;
}

/* Ensure proper content layout within union-styled wizard steps */
.wizard-steps#div-side-nav-steps .wizard-step .wizard-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 1rem !important;
    height: 100% !important;
}

.wizard-steps#div-side-nav-steps .wizard-step .wizard-icon {
    margin-right: 1rem !important;
    flex-shrink: 0 !important;
    color: var(--dark-green) !important;
    margin-top: -35px !important;
}

.wizard-steps#div-side-nav-steps .wizard-step .wizard-label {
    flex: 1 !important;
}

.wizard-steps#div-side-nav-steps .wizard-step .wizard-title {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--dark-blue) !important;
    line-height: 1.2 !important;
}

.wizard-steps#div-side-nav-steps .wizard-step .wizard-desc {
    margin: 0.25rem 0 0 0 !important;
    font-size: 14px !important;
    color: #6b7280 !important;
    line-height: 1.2 !important;
}

/* Override white text/icons for current and done steps to be visible on white SVG background */
.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="current"] .wizard-wrapper .wizard-icon {
    color: var(--dark-green) !important;
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="pending"] .wizard-wrapper .wizard-icon,
.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="done"] .wizard-wrapper .wizard-icon {
    color: var(--dark-blue) !important;
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="current"] .wizard-wrapper .wizard-label .wizard-title,
.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="done"] .wizard-wrapper .wizard-label .wizard-title {
    color: var(--dark-blue) !important;
}

.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="current"] .wizard-wrapper .wizard-label .wizard-desc,
.wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="done"] .wizard-wrapper .wizard-label .wizard-desc {
    color: #6b7280 !important;
}

/* Responsive Design */
@media (max-width: 480px) {
    .wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="current"],
    .wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="done"],
    .wizard-steps#div-side-nav-steps .wizard-step[data-wizard-state="pending"] {
        width: 320px !important;
        height: 60px !important;
    }

    .wizard-steps#div-side-nav-steps .wizard-step .wizard-wrapper {
        padding: 0 0.75rem !important;
    }

    .wizard-steps#div-side-nav-steps .wizard-step .wizard-title {
        font-size: 0.9rem !important;
    }

    .wizard-steps#div-side-nav-steps .wizard-step .wizard-desc {
        font-size: 0.8rem !important;
    }
}


i:hover {
    color: white !important;
}

#register-result-alert-text p {
    color: var(--ab-blue) !important;
}

#register-result-email-address {
    font-weight: bold !important;
}

#email-activation-alert-text p {
    color: var(--dark-green) !important;
}