:root {
    --lightest-green: #E6EFD8;
    --light-green: #C0CB50;
    --medium-green: #AAA13B;
    --dark-green: #5DC300;
    --darkest-green: #3F7D13;
    --ab-green: #5DC300;
    --ab-dark-green: #4D9300;
    /* */
    --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;
    --ab-light-blue: #C2DCF2;
    /* */
    --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: #4D9300;
    --btn-primary-hover-border: #4D9300;
    --btn-primary-hover-color: #FFFFFF;
    --btn-primary-disabled-background: #F5F5F5;
    --btn-primary-disabled-border: #F5F5F5;
    --btn-primary-disabled-color: #717680;
    --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: #D5D7DA;
    --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;
}

#finance-product-non-bank-private-lenders:hover, #finance-product-government:hover {
    border-style: solid !important;
    border-width: 4px !important;
    border-color: var(--ab-light-blue) !important;
}

#finance-product-non-bank-private-lenders, #finance-product-government {
    border-style: solid !important;
    border-width: 4px !important;
    border-color: white !important;
}

.dropzone.dropzone-default {
    border-color: var(--ab-green) !important;
}

.dropzone-msg-title {
    font-family: 'Montserrat' !important;
    font-size: 18pt !important;
    color: #8095AF !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-arrow-left {
    color: var(--ab-blue) !important;
}

    .fa-arrow-left:hover {
        color: var(--ab-blue) !important;
    }

.fa-thumbs-up {
    display: none !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;
}
/* This works! */
#funder-search-summary-view [class^=flaticon-]:not(.flaticon-profile):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;
}

/* -------------------------------------------------------------------------------- */
/* 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;
}

.checkbox > input#input-credit-score-declaration:checked ~ span:after {
    border-color: white !important;
}

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

/*
.checkbox > input#input-summary-declaration:checked ~ span {
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
}

.checkbox > input#input-summary-declaration:checked ~ span:after {
    border-color: white !important;
}

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

/* TERMS AND CONDITIONS CHECKBOX. */
.checkbox > input#terms-and-conditions:checked ~ span {
    background-color: white !important;
    border-color: var(--ab-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: var(--ab-green) !important;
        width: 25px !important;
        height: 25px !important;
        left: 5px !important;
        top: 3px !important;
        width: 10px !important;
        height: 18px !important;
        border: solid var(--ab-green) !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: white !important;
    border-color: lightgrey !important;
    border-width: 2px !important;
    width: 25px !important;
    height: 25px !important;
}

/* Standard checkbox (checked background) and border color CSS. */
.checkbox > input:checked ~ span {
    background-color: white !important;
    border-color: var(--ab-green) !important;
}

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

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

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

/* Standard outlined checkbox (checked background) and border color CSS. */
.checkbox-inline > input:checked ~ span {
    background-color: white !important;
    border-color: var(--ab-green) !important;
}
    /* Standard outlined checkbox (checked tick) and border color CSS. */
    .checkbox-inline > input:checked ~ span:after {
        border-color: var(--ab-green) !important;
    }
/* Standard outlined checkbox (unchecked background) and border color CSS. */
.checkbox-inline > input:not(:checked) ~ span {
    background-color: white !important;
    border-color: lightgrey !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(--ab-green) !important;
}

    span i:hover {
        color: var(--ab-dark-green) !important;
        cursor: pointer !important;
    }

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 control styling. */
input {
    border-color: #F3F6FA !important;
    background-color: white !important;
}

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

    input:focus {
        border-color: var(--ab-light-blue) !important;
        border-width: 2px !important;
        background-color: white !important;
    }

    input:disabled {
        border-color: transparent !important;
        background-color: #F3F6FA !important;
    }

        input:disabled:hover {
            border-color: transparent !important;
            background-color: #F3F6FA !important;
        }

/* -------------------------------------------------------------------------------- */
/* Select control styling. */
select {
    color: var(--ab-blue) !important;
    border-color: #F3F6FA !important;
    background-color: white !important;
    /*
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    */
}

    select:hover {
        border-color: var(--ab-light-blue) !important;
    }

    select:focus {
        border-color: var(--ab-light-blue) !important;
        border-width: 2px !important;
        background-color: white !important;
    }

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

        select:disabled:hover {
            border-color: transparent !important;
            background-color: #F3F6FA !important;
        }

option {
    color: var(--ab-blue) !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;
    }


.swal2-icon.swal2-info {
    border-color: var(--ab-green) !important;
    color: var(--ab-green) !important;
}

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

    .swal-button.swal-button--confirm:hover:not(.btn-text):not(:disabled):not(.disabled) {
        background-color: var(--btn-primary-hover-background) !important;
        border-color: var(--btn-primary-hover-border) !important;
    }

    .swal-button.swal-button--confirm:disabled {
        background-color: var(--btn-primary-disabled-background) !important;
        border-color: var(--btn-primary-disabled-border) !important;
        color: var(--btn-primary-disabled-color) !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(--btn-primary-background) !important;
    border-color: var(--btn-primary-border) !important;
    color: white !important;
    border-radius: var(--ab-radius) !important;
    font-family: 'Montserrat' !important;
}

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

    .btn.btn-primary:disabled {
        background-color: var(--btn-primary-disabled-background) !important;
        border-color: var(--btn-primary-disabled-border) !important;
        color: var(--btn-primary-disabled-color) !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(--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)#id-alert-button-ok {
    background-color: var(--btn-primary-hover-background) !important;
    border-color: var(--btn-primary-hover-border) !important;
    color: var(--btn-primary-hover-color) !important;
}

.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled)#kt_login_signin_submit {
    background-color: var(--btn-primary-hover-background) !important;
    border-color: var(--btn-primary-hover-border) !important;
    color: var(--btn-primary-hover-color) !important;
}

.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled)#forgot-password-submit {
    background-color: var(--btn-primary-hover-background) !important;
    border-color: var(--btn-primary-hover-border) !important;
    color: var(--btn-primary-hover-color) !important;
}

.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled)#reset-password-submit {
    background-color: var(--btn-primary-hover-background) !important;
    border-color: var(--btn-primary-hover-border) !important;
    color: var(--btn-primary-hover-color) !important;
}

.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled)#email-activation-submit {
    background-color: var(--btn-primary-hover-background) !important;
    border-color: var(--btn-primary-hover-border) !important;
    color: var(--btn-primary-hover-color) !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;
}

.alert.alert-custom.alert-outline-primary {
    border-color: var(--ab-blue) !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: var(--ab-blue) !important;
}

    .alert.alert-custom.alert-outline-info .alert-icon .flaticon-information {
        color: var(--ab-blue) !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(--ab-blue) !important;
}