:root {
    --lightest-green: #E6EFD8;
    --light-green: #C0CB50;
    --medium-green: #AAA13B;
    --dark-green: #5DC300; /* As per African Bank */
    --darkest-green: #3F7D13;
    /* */
    --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;
    /* */
    --black: #000000;
    --white-001: #FFFFFF;
    --white-002: #F3F6FA;
    /*  Summary page section header. */
    --summary-section-header: #152A5F;
    /* 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: #152A5F;
    --btn-light-primary-color: #152A5F;
    --btn-light-primary-hover-background: #152A5F;
    --btn-light-primary-hover-border: #152A5F;
    --btn-light-primary-hover-color: #FFFFFF;
    --btn-light-primary-width: 16rem;
    /* Outlined primary buttons styling */
    --btn-outline-primary-background: #FFFFFF;
    --btn-outline-primary-border: #152A5F;
    --btn-outline-primary-color: #152A5F;
    --btn-outline-primary-hover-background: #152A5F;
    --btn-outline-primary-hover-border: #152A5F;
    --btn-outline-primary-hover-color: #FFFFFF;
    --btn-outline-primary-width: 16rem;
    /* Verify buttons for user, owner, and credit score pages */
    --btn-verify-normal-background: #C9DBF2;
    --btn-verify-normal-border: #C9DBF2;
    --btn-verify-normal-color: #152A5F;
    --btn-verify-hover-background: #152A5F;
    --btn-verify-hover-border: #152A5F;
    --btn-verify-hover-color: #FFFFFF;
    --btn-verify-grey-background: #152A5F;
    --btn-verify-grey-border: #152A5F;
    --btn-verify-grey-color: #FFFFFF;
    /* Accordion colors */
    --accordion-text: #152A5F;
    --accordion-background: #e9eef0;
    /* nav menu colors */
    --nav-active-normal-icon: #152A5F;
    --nav-active-normal-text: #152A5F;
    --nav-active-normal-background: #d5e5eb;
    --nav-inactive-normal-icon: #152A5F;
    --nav-inactive-normal-text: #152A5F;
    --nav-inactive-normal-background: #e9eef0;
    --nav-inactive-hover-icon: #152A5F;
    --nav-inactive-hover-text: #152A5F;
    --nav-inactive-hover-background: #d5e5eb;
    --top-nav-radius: 10px;
    --radius-1: 1px;
    --radius-5: 5px;
    --radius-10: 10px;
    --radius-15: 15px;
    --radius-20: 20px;
}

.max-h-70px {
    max-height: 128px !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);
}

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

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

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

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

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

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

.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;
    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;
    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;
    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;
    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;
}
/* -------------------------------------------------------------------------------- */
/* CHECKBOX CSS. */
/* 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: 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: 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;
        }
/* -------------------------------------------------------------------------------- */

/*
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. */

.btn.btn-outline-primary i {
    color: var(--dark-green) !important;
    border-radius: var(--radius-1) !important;
}

.btn.btn-primary {
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
    color: white !important;
    border-radius: var(--radius-1) !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(--radius-1) !important;
    width: 15rem !important;
    box-shadow: none;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.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(--radius-1) !important;
    width: 8rem !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.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(--radius-1) !important;
    width: 8rem !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.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(--radius-1) !important;
    width: 15rem !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.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(--radius-1) !important;
    width: 8rem !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.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(--radius-1) !important;
    width: 8rem !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
/* Buttons on the OTP dialog popup END. */

.btn-primary#id-alert-button-ok, #kt_login_signin_submit, #register-submit-btn, #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(--radius-3) !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.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(--radius-0) !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.btn-primary#button-wizard-submit, #button-wizard-next {
    width: var(--btn-primary-width) !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled)#button-wizard-submit, #button-wizard-next {
    width: var(--btn-primary-width) !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.btn-outline-primary#button-wizard-save, #button-wizard-cancel {
    width: var(--btn-outline-primary-width) !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.btn-outline-primary:hover:not(.btn-text):not(:disabled):not(.disabled)#button-wizard-save, #button-wizard-cancel {
    width: var(--btn-outline-primary-width) !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.btn-light-primary#button-wizard-prev {
    width: var(--btn-light-primary-width) !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.btn-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled)#button-wizard-prev {
    width: var(--btn-light-primary-width) !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.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(--radius-5) !important;
    border-bottom-right-radius: var(--radius-5) !important;
    width: 10rem !important;
    box-shadow: none;
}

    .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(--radius-5) !important;
        border-bottom-right-radius: var(--radius-5) !important;
        width: 10rem !important;
        box-shadow: none;
    }

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

    .btn-light-primary#a-google:hover:not(.btn-text):not(:disabled) {
        background-color: darkgrey !important;
        border-color: darkgrey !important;
        color: white !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(--radius-1) !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

    .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(--radius-1) !important;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

.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(--radius-1) !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

    .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(--radius-1) !important;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

.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(--radius-1) !important;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

    .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(--radius-1) !important;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

.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: var(--dark-green) !important;
}

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

    .alert.alert-custom.alert-outline-info .alert-text {
        color: var(--dark-green) !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;
}

.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: 1rem !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: 0.875rem !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;
}

/*
i:before:hover {
    color: white !important;
}

i:after:hover {
    color: white !important;
}
*/

/*
[class^="flaticon-"]:before {
    color: #152A5F !important;
}

[class^="flaticon-"]:after {
    color: white !important;
}
*/

/*
i.flaticon-add::before {
    color: #152A5F !important;
}

#id-onboard-summary-add-company-btn i.flaticon-add:hover {
    color: white !important;
}

i.flaticon-add:hover::before {
    color: white !important;
}

.flaticon-add:before:hover {
    color: white !important;
}
*/