/* input(85,9): run-time error CSS1035: Expected colon, found '{'
input(94,20): run-time error CSS1035: Expected colon, found ','
input(109,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(120,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(138,10): run-time error CSS1035: Expected colon, found '{'
input(153,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#wf-logo-wrap'
input(166,10): run-time error CSS1035: Expected colon, found '{'
input(178,7): run-time error CSS1035: Expected colon, found '.'
input(188,17): run-time error CSS1035: Expected colon, found '{'
input(210,7): run-time error CSS1035: Expected colon, found '{'
input(220,9): run-time error CSS1035: Expected colon, found '{'
input(242,9): run-time error CSS1035: Expected colon, found '{'
input(251,6): run-time error CSS1035: Expected colon, found '.'
input(262,10): run-time error CSS1035: Expected colon, found '.'
input(268,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(284,25): run-time error CSS1035: Expected colon, found '{'
input(291,18): run-time error CSS1035: Expected colon, found '{'
input(317,17): run-time error CSS1035: Expected colon, found '{'
input(336,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(368,19): run-time error CSS1035: Expected colon, found '{'
input(375,11): run-time error CSS1035: Expected colon, found '{'
input(390,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(402,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(421,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(432,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(446,21): run-time error CSS1035: Expected colon, found '{'
input(469,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(487,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(624,16): run-time error CSS1035: Expected colon, found '{'
input(654,20): run-time error CSS1035: Expected colon, found '{'
input(781,31): run-time error CSS1035: Expected colon, found '{'
input(806,23): run-time error CSS1035: Expected colon, found ','
input(922,12): run-time error CSS1035: Expected colon, found '{'
input(945,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(968,9): run-time error CSS1035: Expected colon, found '{'
input(1006,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1022,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#current-members-header'
input(1031,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1055,15): run-time error CSS1035: Expected colon, found '{'
input(1062,21): run-time error CSS1035: Expected colon, found '{'
input(1102,24): run-time error CSS1035: Expected colon, found '{'
input(1119,20): run-time error CSS1035: Expected colon, found '{'
input(1145,27): run-time error CSS1035: Expected colon, found '{'
input(1152,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1166,21): run-time error CSS1035: Expected colon, found '{'
input(1186,16): run-time error CSS1035: Expected colon, found '{'
input(1206,16): run-time error CSS1035: Expected colon, found '{'
input(1236,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#success-alert-front-span'
input(1250,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '{'
input(1285,11): run-time error CSS1035: Expected colon, found '{'
input(1305,10): run-time error CSS1035: Expected colon, found '{'
input(1311,10): run-time error CSS1035: Expected colon, found '{'
input(1324,21): run-time error CSS1035: Expected colon, found '{'
input(1341,18): run-time error CSS1035: Expected colon, found ','
input(1361,17): run-time error CSS1035: Expected colon, found '{'
input(1431,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1451,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1461,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1471,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1479,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#upload-front-image'
input(1514,27): run-time error CSS1035: Expected colon, found '{'
input(1537,7): run-time error CSS1035: Expected colon, found '.'
input(1544,9): run-time error CSS1035: Expected colon, found '.'
input(1559,10): run-time error CSS1035: Expected colon, found '{'
input(1571,20): run-time error CSS1035: Expected colon, found ','
input(1589,7): run-time error CSS1035: Expected colon, found '.'
input(1601,7): run-time error CSS1035: Expected colon, found '.'
input(1614,15): run-time error CSS1035: Expected colon, found '{'
input(1627,9): run-time error CSS1035: Expected colon, found '.'
input(1650,28): run-time error CSS1035: Expected colon, found ','
input(1667,31): run-time error CSS1035: Expected colon, found '{'
input(1689,25): run-time error CSS1035: Expected colon, found '{'
input(1707,20): run-time error CSS1035: Expected colon, found '{'
input(1808,17): run-time error CSS1035: Expected colon, found '{'
input(1836,7): run-time error CSS1035: Expected colon, found '.'
input(1862,7): run-time error CSS1035: Expected colon, found '.'
input(1884,11): run-time error CSS1035: Expected colon, found ','
input(1927,19): run-time error CSS1035: Expected colon, found '{'
input(1939,20): run-time error CSS1035: Expected colon, found '{'
input(1951,20): run-time error CSS1035: Expected colon, found '{'
input(1967,26): run-time error CSS1035: Expected colon, found '{'
input(1994,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#new-application'
input(2044,23): run-time error CSS1035: Expected colon, found '{'
input(2069,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(2085,13): run-time error CSS1035: Expected colon, found '{'
input(2117,8): run-time error CSS1035: Expected colon, found '{'
input(2125,14): run-time error CSS1035: Expected colon, found '{'
input(2150,8): run-time error CSS1035: Expected colon, found '{'
input(2162,18): run-time error CSS1035: Expected colon, found '{'
input(2178,22): run-time error CSS1035: Expected colon, found '{'
input(2211,16): run-time error CSS1035: Expected colon, found '{'
input(2219,7): run-time error CSS1035: Expected colon, found '.'
input(2265,15): run-time error CSS1035: Expected colon, found '{'
input(2283,11): run-time error CSS1035: Expected colon, found '{'
input(2296,23): run-time error CSS1035: Expected colon, found '{'
input(2319,19): run-time error CSS1035: Expected colon, found '{'
input(2325,36): run-time error CSS1035: Expected colon, found '{'
input(2342,8): run-time error CSS1035: Expected colon, found '['
input(2377,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#confirmation-content'
input(2408,17): run-time error CSS1035: Expected colon, found '{' */
/* ----------------------------------------------------------- century custom css */
/* 1. font families (Mrs. Eaves, Objektiv): copy/paste the following code into the custom contact widget: <head><link rel="stylesheet" href="https://use.typekit.net/pzi0omd.css"></head>  */
/* 2. background-image: currently hosted on ecutechnology.com  */
/* 3. color scheme: upload exported JSON file (in DOW-[ticket number]  */
/* NOTES:  */

:root {
    --sitebg: #ffffff;
    --primarycolor: #06595a;
    --primarydark: #0b3739;
    --primaryalpha: #06595a38;
    --primarydarkalpha: #06595ad1;
    --primarymodalalpha: #06595a91;
    --primarydisabled: #96b3b4;
    --secondarycolor: #C88242;
    --secondarydisabled: #d69e6a;
    --secondaryfaint: #dfbc9c;
    --secondaryalpha: #C882426b;
    --secondarydim: #9f6936e3;
    --accentcolor: #FFD400;
    --accenthover: #fffc51;
    --accentalpha: #FFD4006b;
    /* the following alt colors need to be changed to century color scheme */
    --altcolor: #a83c36;
    --altalpha: #a83c36de;
    /* additional colors based on the primary color */
    --navcolor: #c5e3ca;
    --navdisabled: #6d918e;
    --navnumberdisabled: #c5e3ca;
    --footerbg: #0b3739;
    /* elemental colors */
    --white: #FFFFFF;
    --whitealpha: #FFFFFF6b;
    --black: #202020;
    --graytext: #f9f9f9;
    --graybg: #fbfbfb;
    --inputborder: #06595a;
    --inputbghover: #e7f3f3;
    --brightgreen: #3ba84b;
    --hilite: #204d11;
    --clear: transparent;
    --eraser: #797979;
    --cardbg: #e3f1f1;
    /* the following remaining colors need to be changed to century color scheme */
    --cardborder: #9dd4d9;
    --cardselect: #9dd4d9;
    --cardselecthover: #87c6cc;
}

/* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 00 global */
html,
body {
    font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

h1.wf-hdr-main {
    font-size: 1.7rem;
}

.wf-main-wrapper {
    background-color: var(--clear);
}

.wf-application-wrapper {
    overflow: hidden;
}

.wf-application-stage {
    background-color: var(--white);
    border-color: var(--primarycolor);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

#wf-row-identcards {
    img {
        min-width: 150px;
        min-height: 150px;
    }
}

/* buttons */
.wf-btn-grp {

    .wf-btn-primary,
    .wf-btn-secondary {
        font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
        font-weight: bold;
    }
}

.wf-pn-btn-grp {
    overflow: hidden;
}

#wf-prv-btn {
    background-color: var(--white);
    color: var(--primarycolor);

    &:hover {
        background-color: var(--cardbg);
        color: var(--primarycolor);
        opacity: 1;
    }
}

#wf-nxt-btn {
    background-color: var(--accentcolor);
    color: var(--primarycolor);

    &:hover {
        background-color: var(--accenthover);
        color: var(--primarycolor);
        opacity: 1;
    }

    &:disabled {
        &:hover {
            color: var(--primarycolor);
        }
    }
}

#wf-prv-btn,
#wf-nxt-btn {
    border-color: var(--inputborder);
    font-weight: bold;

    span {
        font-weight: bold;
    }
}

/* header */


.wf-hdr-logo {
    position: relative;
    z-index: 1 !important;
    background-color: var(--clear);
    border-bottom: 2px solid;
    border-color: var(--primarycolor);

    #wf-logo-wrap {
        max-width: 25% !important;
    }
}

div.col-2:has(.wf-contact-button) {
    display: flex;
}

.wf-contact-button {
    margin-top: 0;
    color: var(--accentcolor);

    span {
        top: 0;
    }

    &:hover {
        color: var(--accenthover);
    }
}

.wf-hdr-step-name {
    background-color: var(--primarydark) !important;

    h1.wf-step-h1 {
        color: var(--accentcolor);
        padding: 0.5rem 0 0.5rem 0.1rem !important;
    }
}

.wf-hdr-btns {
    background-color: var(--primaryalpha);
    border-bottom-color: var(--primarycolor);

    .wf-hdr-btn {
        text-shadow: none;

        span {
            text-shadow: none;
        }

        i {
            text-shadow: none;
        }

        &:hover {
            color: var(--secondarycolor);
        }
    }
}

/* footer */
.wf-footer {
    background-color: var(--footerbg);
    border-color: var(--footerbg);

    a {
        color: var(--white);
    }
}

.footer-divider {
    color: var(--secondarydisabled);
}

#ncua-logo {
    svg {
        path {
            &:nth-child(2) {
                stroke: var(--footerbg);
            }

            &:nth-child(4) {
                stroke: var(--footerbg);
            }

            &:nth-child(5) {
                fill: var(--footerbg);
            }
        }
    }

    .NCUA-logo-fill {
        fill: var(--white);
    }
}

#eho-logo {
    svg {
        path {
            fill: var(--white);
        }
    }
}

.wf-fine-print {

    p.copyright-version {
        color: var(--graytext);

        &:nth-child(2) {
            display: none;
        }
    }
}

/* progress menu */
.wf-progress-menu-inner {
    label.collapse-arrow:hover {
        cursor: default;
    }
}

.wf-pmi-current {
    &:hover {
        .circle-maj {
            background: var(--primarycolor) !important;
        }
    }
}

.wf-pm-item {
    font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
}

.wf-pmi-current .circle-maj,
.wf-pmi-current .circle-maj:hover {
    border-color: var(--navcolor) !important;
    background-color: var(--primarycolor);

    .wf-progress-number {
        color: var(--navcolor);
        text-decoration: none;
    }
}

.wf-pmi-current {
    .wf-pmi-link {
        color: var(--navcolor);
        text-decoration: none;
        border-bottom: 3px dotted;
        border-color: var(--navcolor);

        &:hover {
            cursor: default;
        }
    }

    &:hover {
        cursor: default !important;

        .wf-pmi-link {
            color: var(--navcolor);
            text-decoration: none;
        }
    }

    &::before {
        background: var(--navcolor);
    }
}

.wf-pmi-complete {
    .circle-maj {
        background-color: var(--navcolor);
        border-color: var(--navcolor);

        span {
            color: var(--primarycolor);
        }
    }

    &::before {
        background: var(--navcolor);
    }

    .wf-pmi-link {
        color: var(--navcolor);
    }
}

.wf-pmi-incomplete {
    &::before {
        background-color: var(--navdisabled);
    }

    .circle-maj,
    .circle-min {
        border-color: var(--navdisabled);
        background-color: var(--navdisabled);

        &:hover {
            .wf-progress-number {
                text-decoration: none;
            }
        }

        span.wf-progress-number {
            color: var(--navnumberdisabled);
        }
    }

    .wf-pmi-link {
        color: var(--navdisabled);
    }
}

label.collapse-arrow>i:hover:before {
    border-color: var(--primarydisabled);
    background-color: var(--primarydark) !important;
}

/* forms */
.k-form {
    .k-form-label {
        padding-left: .5rem;
        padding-bottom: .25rem;
    }
}

.form-group {
    label {
        padding-left: .5rem;
        padding-bottom: .25rem;
        margin-bottom: 0;
        font-size: .85rem;
    }
}

.form-control {
    border-radius: 99rem;
}

.k-input-md {
    border-color: var(--inputborder);

    &:hover {
        border-color: var(--primaryalpha) !important;
        background-color: var(--inputbghover) !important;
    }
}

.k-radio,
.k-checkbox {
    border-color: var(--inputborder);
}

.k-checkbox {
    &:checked {
        background-color: var(--secondarycolor);
        border-color: var(--secondarycolor);

        &:active {
            background-color: var(--secondarydim);
        }

        &:focus {
            box-shadow: 0 0 0 0.15rem var(--secondaryfaint) !important;
        }
    }
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: var(--secondarycolor);
    background-color: var(--secondarycolor);

    &:active {
        background-color: var(--secondarydim);
    }
}

.k-picker-solid {
    border-radius: 99rem;
    border-color: var(--inputborder) !important;
    background-color: var(--white) !important;
    background-image: none !important;

    &:hover {
        border-color: var(--primaryalpha) !important;
        background-color: var(--inputbghover) !important;
    }

    &:focus {
        box-shadow: none !important;
        border-color: var(--altcolor) !important;
        background-color: var(--inputbghover) !important;
    }
}

.k-form-field-wrap {

    .k-input-button {
        border-color: var(--inputborder);
        background-color: var(--white);

        &:hover {
            background-color: var(--primaryalpha);
            border-color: var(--primaryalpha);
        }
    }

    &:hover {
        .k-input-button {
            border-color: var(--primaryalpha);
        }
    }

    .workPhone,
    .phone-field {
        text-transform: uppercase;
    }
}

.k-form-field-wrap {
    &:hover {
        .k-disabled {
            .k-input-button {
                border-color: var(--inputborder) !important;
            }
        }
    }
}

/* input groups */
.input-group {
    border-radius: 99rem !important;
    max-height: 38px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: var(--inputborder) !important;
    transition: ease-in-out .15s;

    &:hover {
        border-color: var(--primaryalpha) !important;

        .form-control {
            background-color: var(--cardbg) !important;

            &:disabled {
                background-color: #e9ecef !important;
            }
        }

        .input-group-append {
            border-color: var(--primaryalpha);
        }

        .k-input-spinner {
            border-color: var(--primaryalpha);
        }
    }

    .form-control {
        border-radius: 0rem;
    }

    .k-input-spinner {
        width: 36px;
        border-left: 1px solid;
        border-color: var(--primarycolor);

        .k-button-solid-base {
            background-image: none;
            background-color: var(--white);
            transition: ease-in-out .15s;

            &:hover {
                background-color: var(--primaryalpha);
                border-color: var(--primaryalpha);
            }
        }
    }

    .input-group-prepend {

        h2 {
            background-color: var(--secondaryfaint);
            font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;


            .badge-pill {
                color: var(--secondarycolor);
                position: relative;
                top: -8px;
                padding-left: 1.5rem;
            }
        }
    }

    &:has(.input-group-prepend) {
        &:hover {
            border-color: var(--primaryalpha) !important;

            .input-group-text {
                border-right-color: var(--primaryalpha) !important;
            }
        }
    }

    .input-group-append {
        border-color: var(--inputborder);
        cursor: pointer;
        max-height: 100%;

        .form-control {
            &:hover {
                background-color: var(--cardbg);
            }
        }

        .wfm_eye_button {
            background-color: var(--white) !important;
            background-image: none !important;
            position: relative;
            border-left: 1px solid !important;
            border-left-color: var(--inputborder) !important;

            .fa {
                color: var(--white) !important;
                position: relative;
                top: -1px;
            }
        }

        .fa,
        .fa-eye {
            position: relative;
        }

        .input-group-addon,
        .input-group-addon.toggle-password {
            background-color: var(--secondarycolor) !important;
            color: var(--white);
            background-image: none !important;
            max-height: 100% !important;
            padding: 10% .4rem !important;

            &:hover {
                background-color: var(--secondarydim) !important;
                border-left-color: var(--primaryalpha) !important;
            }
        }
    }

    .input-group-text {
        color: var(--primarycolor);
        text-shadow: 0 0 1px var(--primaryalpha);
        background-color: var(--primaryalpha) !important;
        border-color: var(--clear) !important;
        border-right-color: var(--inputborder) !important;
    }
}

/* modals */
/* this property overrides some z-index settings in wf2_temp.less that were intended to keep 
the header above the main container, which should no longer be necessary */
.wf-hdr-logo,
.wf-hdr-step-name,
.wf-hdr-btns,
.wf-progress-menu-inner {
    z-index: 0;
}

.wf-hdr-error {
    z-index: 100000;
}

/* bootstrap */
.modal-dialog {
    .btn-modal {
        border-radius: 99px !important;
        transition: ease-in-out .15s;

        &:hover {
            opacity: 1 !important;
            background-color: var(--secondarydisabled) !important;
            border-color: var(--secondarydisabled) !important;
        }
    }

    .btn-outline-secondary {
        border-color: var(--accentcolor) !important;
        background-color: var(--white) !important;
        color: var(--secondarycolor) !important;
        border-radius: 99px !important;
        transition: ease-in-out .15s;

        &:hover {
            background-color: var(--secondaryfaint) !important;
        }
    }
}

.modal.show {
    backdrop-filter: blur(2px);
    background-color: var(--primarymodalalpha);
}

.modal-dialog {
    .modal-content {
        border-radius: 1rem;

        .modal-header {
            background-color: var(--primarycolor) !important;
            padding: 1rem;
            border-bottom: 1px solid !important;
            border-bottom-color: var(--primaryalpha);

            .modal-title,
            h3 {
                color: var(--white) !important;
                font-size: 1.1rem;
            }

            button.close {
                color: var(--accentcolor) !important;
                padding: .25rem 1rem;
                margin: -.25rem -1rem -1rem auto;

                &:hover {
                    text-shadow: 0 2px 0 var(--primarydark);
                }

                &:focus {
                    outline: none;

                    span {
                        text-shadow: 0 0 3px var(--cardbg);
                    }
                }
            }
        }

        .wf-modal-content-wrapper {
            .modal-footer {
                border-color: var(--primaryalpha);
                background-color: var(--cardbg);

                .btn-primary,
                .btn-modal {
                    background-color: var(--primarycolor) !important;
                    color: var(--accentcolor) !important;
                    border: 1px solid !important;
                    border-color: var(--primarycolor) !important;
                    border-radius: 99px !important;
                    padding: .35rem 2rem !important;
                    max-width: max-content;
                    margin: .75rem auto !important;
                    display: block;
                    min-width: 150px;

                    &:hover {
                        color: var(--accentcolor) !important;
                        background-color: var(--primarydark) !important;
                        border-color: var(--primarydark) !important;
                    }
                }

                .btn-outline-secondary {
                    background-color: var(--white) !important;
                    color: var(--primarycolor) !important;
                    border: 1px solid !important;
                    border-color: var(--primarycolor) !important;
                    border-radius: 99px !important;
                    padding: .35rem 2rem !important;
                    max-width: max-content;
                    margin: .75rem auto !important;
                    display: block;
                    min-width: 150px;

                    &:hover {
                        background-color: var(--cardbg) !important;
                    }
                }
            }
        }

        .wf-bs-modal-btns {
            button {
                font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
                font-weight: 700;
            }

            button.wf-btn-outline-secondary {
                background-color: var(--white) !important;
                color: var(--primarycolor) !important;
                border: 1px solid !important;
                border-color: var(--primarycolor) !important;
                border-radius: 99px !important;
                padding: .35rem 2rem !important;
                max-width: max-content;
                margin: .75rem auto !important;
                display: block;
                min-width: 150px;

                &:hover {
                    background-color: var(--cardbg) !important;
                }
            }

            button.wf-btn-primary {
                background-color: var(--primarycolor) !important;
                color: var(--accentcolor) !important;
                border: 1px solid !important;
                border-color: var(--primarycolor) !important;
                border-radius: 99px !important;
                padding: .35rem 2rem !important;
                max-width: max-content;
                margin: .75rem auto !important;
                display: block;
                min-width: 150px;
                font-weight: bold;

                &:hover {
                    color: var(--accentcolor) !important;
                    background-color: var(--primarydark) !important;
                    border-color: var(--primarydark) !important;
                }
            }
        }
    }
}

/* co-applicant ID upload modal button fix */

.co-image-capture-section {
    .wf-modal-content-wrapper {
        .modal-footer {
            padding: 0;
            flex-direction: row-reverse;
        }
    }
}

.modal-backdrop {
    background-color: var(--primarycolor);
    display: none;
}

/* kendo */
.k-overlay {
    background-color: var(--primarymodalalpha) !important;
    backdrop-filter: blur(2px) !important;
    opacity: 1 !important;
}

.k-window,
.k-dialog {
    border-radius: 1rem;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);

    .k-window-titlebar,
    .k-dialog-titlebar {
        background-color: var(--primarycolor);
        border-bottom: 1px solid;
        border-color: var(--primaryalpha);


        .k-window-title,
        .k-dialog-title {
            color: var(--white);
            font-size: 1.1rem;
            font-weight: 600;
            padding-block: .75rem;
        }

        .k-button,
        .k-icon-button,
        .k-input {

            .k-svg-icon,
            .k-svg-icon,
            .k-svg-icon {
                color: var(--accentcolor) !important;

                svg {
                    stroke-width: 1;
                    stroke-linecap: butt;
                    stroke-dasharray: 0;
                }

            }

            &::before {
                background: var(--white);
            }

            &:hover {

                .k-svg-icon,
                .k-svg-icon,
                .k-svg-icon {
                    svg {
                        filter: drop-shadow(0px 2px 0px var(--primaryalpha));
                    }
                }

                &::before {
                    background: var(--white);
                }
            }
        }
    }

    .k-window-content,
    .k-dialog-content {
        padding: 1rem !important;
    }

    .k-dialog-actions {
        background-color: var(--cardbg);
        border-color: var(--primaryalpha);

        .k-button-solid-primary {
            max-width: max-content;
            margin: .75rem auto;
            border-radius: 99px;
            padding: .5rem 1.5rem;
            background-color: var(--primarycolor);
            border: 1px solid;
            border-color: var(--primarycolor);
            color: var(--accentcolor);
            transition: ease-in-out .15s;

            &:hover {
                background-color: var(--primarydark);
                border-color: var(--primarydark);
                color: var(--accentcolor);
            }
        }

        .btn-outline-secondary,
        .k-button-solid-base {
            max-width: max-content;
            margin: .75rem auto;
            border-radius: 99px;
            padding: .5rem 1.5rem;
            background-color: var(--white);
            border: 1px solid;
            border-color: var(--primarycolor);
            color: var(--primarycolor);
            transition: ease-in-out .15s;

            &:hover {
                background-color: var(--cardbg);
            }
        }

        .btn {
            font-weight: bold !important;
        }

        .wf-btn-tertiary {
            background-color: var(--secondarycolor) !important;
            color: var(--white);
            border-color: var(--secondarycolor) !important;
            border-radius: 99rem !important;

            &:hover {
                background-color: var(--secondarydim) !important;
                opacity: 1 !important;
            }
        }
    }
}

.k-dialog-actions {
    button {
        font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
        font-weight: 400 !important;
    }
}

/* scrollbars */
::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: var(cardbg) !important;
}

::-webkit-scrollbar-thumb {
    background-color: var(--primarydisabled);
    border-color: var(--primaryalpha);
    border-radius: 99px;
}

/* stager background */
/* the z-index property is causing a cosmetic issue when the modal-backdrop is active on the applicants screen. 
setting it to 0 currently places the ID upload   */

.wf-stage-inner {
    &::before {
        content: " ";
        display: block;
        height: 90%;
        width: 150%;
        position: absolute;
        top: 10%;
        left: -25%;
        background-image: url('https://centurycu.lkcsproof.com/images/ribbon-shape-desktop.svg');
        background-size: 100%;
        background-position: center center;
        background-repeat: no-repeat;
    }
}

/* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 01 membership */
/* ----------------------------------------------------------- 01 agreements */

#wf-row-identcards .col-sm-12.col-lg-6 .wf-box-member #already-member-form {
    display: grid;
    grid-template-columns: 0fr 1fr;
    grid-column-gap: 1.5rem;

    img {
        min-height: auto;
    }
}

#wf-row-identcards .wf-box-member {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    margin-bottom: 1rem !important;
}

#agreements-form-div {
    margin-bottom: 0 !important;
}

#current-members-header {
    white-space: nowrap;
}

#current-members-secondary-text p {
    margin-bottom: 0;
}

#current-members-secondary-text {
    position: relative;
    top: .55rem;
}

#already-member-btn {
    margin-top: .5rem;
    background-color: var(--primarycolor);
    color: var(--accentcolor);
    border-radius: 99px;
    font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
    font-weight: bold;
    transition: ease-in-out .15s;

    &:hover {
        background-color: var(--primarydark);
        border-color: var(--primarycolor);
        color: var(--accentcolor);
    }
}

.wf-box-member {
    width: 90%;
    margin: auto;
    position: relative;
    background-color: var(--clear);
    border-color: var(--clear);
    color: var(--black);
    z-index: 1;

    #current-members-header {
        color: var(--primarycolor) !important;
    }
}

#current-members-header {
    position: relative;
    max-width: max-content;

    &::after {
        content: "";
        display: block;
        aspect-ratio: 5 / 2;
        height: 22px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='22' class='decorator' viewBox='0 0 80 22' fill='%23C88242 '%3E%3Cpath d='M77.8721 0.00864767C71.2105 0.0432389 60.6926 0.380502 52.1203 3.59748C52.0942 3.60613 52.0682 3.62343 52.0334 3.63208C51.8858 3.68396 51.7468 3.7445 51.5992 3.79638C51.5384 3.82233 51.4689 3.84827 51.4081 3.87421C51.2691 3.9261 51.1302 3.98663 50.9999 4.03852C50.9478 4.05582 50.9044 4.08176 50.8522 4.09906C50.7046 4.15959 50.5483 4.22877 50.4006 4.29796C50.3398 4.3239 50.279 4.34984 50.2182 4.37579C50.0879 4.43632 49.949 4.49686 49.8187 4.55739C49.7753 4.57469 49.7232 4.60063 49.6797 4.61792C49.5321 4.68711 49.3757 4.76494 49.2281 4.83412C49.1673 4.86006 49.1065 4.89465 49.0544 4.9206C48.9241 4.98113 48.8025 5.05031 48.6722 5.11085C48.6288 5.13679 48.5854 5.15409 48.542 5.17138C48.3943 5.24921 48.238 5.32704 48.0903 5.41352C48.0295 5.44811 47.9774 5.47406 47.9166 5.50865C47.795 5.57783 47.6734 5.64701 47.5518 5.71619C47.5258 5.73349 47.491 5.75079 47.465 5.76808L47.4042 5.74214C47.4216 5.75079 47.4476 5.75943 47.465 5.76808C44.3209 7.59277 41.7067 9.98821 40.0043 13.136C38.3107 9.98821 35.6878 7.59277 32.5437 5.76808C34.8106 4.73035 37.338 4.15094 40.0043 4.15094C42.6707 4.15094 43.6695 4.43632 45.3631 4.96384C46.831 4.00393 48.4377 3.17374 50.1487 2.44733C47.1089 0.882076 43.6608 0 40.013 0C36.3652 0 31.3886 1.32311 27.9058 3.59748C27.9058 3.59748 27.8971 3.59748 27.8884 3.60613C27.7407 3.70126 27.5844 3.80503 27.4368 3.9088C27.4368 3.9088 27.4194 3.91745 27.4107 3.9261C27.2631 4.02987 27.1241 4.125 26.9764 4.22877C26.9678 4.23742 26.9504 4.24607 26.9417 4.25472C26.8027 4.35849 26.6638 4.46226 26.5335 4.56604C26.5161 4.57469 26.5074 4.59198 26.4901 4.60063C26.3598 4.7044 26.2208 4.80818 26.0905 4.91195C26.0732 4.92925 26.0471 4.94654 26.0297 4.96384C25.9082 5.06761 25.7866 5.17138 25.665 5.26651C25.6476 5.27516 25.6389 5.29245 25.6215 5.3011C25.4913 5.41352 25.361 5.52594 25.2307 5.64701C25.222 5.65566 25.2133 5.66431 25.2046 5.67296C25.0744 5.79402 24.9441 5.91509 24.8138 6.03616C24.8138 6.03616 24.8051 6.04481 24.7964 6.05346C24.6575 6.18318 24.5272 6.31289 24.3969 6.44261C24.3101 6.52909 24.2319 6.60692 24.145 6.6934C24.1364 6.70204 24.119 6.71934 24.1103 6.72799C22.4427 8.45755 21.0531 10.4552 20.0109 12.6517C18.9165 10.3341 17.4226 8.2327 15.6248 6.44261C15.0081 5.82862 14.3654 5.25786 13.6793 4.7217C16.4933 5.02437 19.3942 5.4827 22.1561 6.19182C22.4688 5.84591 22.7901 5.50865 23.1202 5.18003C23.9627 4.34119 24.8572 3.57154 25.8039 2.87972C17.6745 0.328617 8.28574 0.0432389 2.15395 0.00864767C0.964065 0.00864767 0 0.959905 0 2.13601C0 3.22563 0.8251 4.1423 1.91076 4.25472C6.09706 4.69575 9.84909 6.57233 12.6718 9.38286C15.4771 12.1761 17.3618 15.8947 17.8135 20.0369C17.9351 21.1525 18.8818 21.9914 20.0022 21.9914C21.1313 21.9914 22.0693 21.1439 22.1909 20.0369C22.6425 15.8947 24.5272 12.1761 27.3325 9.38286C27.6799 9.03695 28.0447 8.70833 28.4182 8.38836C33.3862 10.7319 37.1121 14.3813 37.807 20.0542C37.9459 21.1612 38.8753 22 39.9957 22H40.013C41.1334 22 42.0714 21.1612 42.2017 20.0542C42.8879 14.3813 46.6225 10.7406 51.5818 8.38836C51.9553 8.70833 52.32 9.03695 52.6675 9.38286C55.4728 12.1761 57.3575 15.8947 57.8091 20.0369C57.9307 21.1525 58.8774 21.9914 59.9978 21.9914C61.1269 21.9914 62.0649 21.1439 62.1865 20.0369C62.6381 15.8947 64.5229 12.1761 67.3282 9.38286C70.1509 6.57233 73.9029 4.69575 78.0892 4.25472C79.1749 4.1423 80 3.22563 80 2.13601C80 0.951258 79.0359 -1.32084e-07 77.846 0.00864767H77.8721ZM64.4013 6.44261C62.6034 8.2327 61.1095 10.3341 60.0152 12.6517C58.9816 10.4552 57.592 8.45755 55.9157 6.72799C59.2509 5.70755 62.8553 5.09355 66.3381 4.71305C65.6606 5.24921 65.0092 5.81997 64.3926 6.43396L64.4013 6.44261Z'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        position: absolute;
        margin-inline: auto;
        left: 0;
        right: 0;
    }
}

.card-name {
    font-size: 1.1rem;
}

/* ----------------------------------------------------------- 02 account */

.hero-btn-ctnr {
    overflow: hidden;
    border-radius: 1rem;

    .prod-btn {
        border-radius: inherit;

    }
}

.hero-btn {
    .prod-btn-inner {
        background-color: var(--primarydarkalpha);
        border: 1px solid;
        border-color: var(--primarydarkalpha);
        border-radius: .75rem;

        .prod-btn-content {
            color: var(--accentcolor);
        }
    }

    &:hover {
        .prod-btn-outer {
            border-color: var(--primaryalpha);
        }

        .prod-btn-inner {
            background-color: var(--primarydark) !important;
            border-color: var(--primarydark) !important;

            .prod-btn-content {
                color: var(--accentcolor) !important;
            }
        }
    }

    .fa-info-circle {
        &::before {
            background-color: var(--primarycolor) !important;
        }

        &:hover {
            &::before {
                background-color: var(--secondarycolor) !important;
            }
        }
    }
}

.prod-btn-ctnr {
    .prod-btn-hdr-main {
        border-radius: 1rem;
        z-index: 1;
    }
}

/* ----------------------------------------------------------- 03 products */


#products-page-buttons-div {
    margin-bottom: 1rem;
}

div[id^="products-page-button-menu-"] {
    border-radius: .5rem;
    overflow: hidden;

    .dropdown-item {
        color: var(--black) !important;

        &:hover {
            background-color: var(--secondarycolor) !important;
            color: var(--white) !important;
        }
    }
}

/* the next 2 items correct a spacing issue on the product cards that should be moved to the LESS */

div[id^='product-account-nickname-'] {
    padding-bottom: .5rem !important;
}

#products-list-main-div #products-list-content-div .product-card .product-card-content .form-group:nth-child(n+2) {
    padding-bottom: 0;
}

.product-card {
    border: 1px solid !important;
    border-color: var(--primaryalpha) !important;
    overflow: hidden;
    border-radius: 1rem !important;

    .product-card-content {
        border: none;
        background-color: var(--white);
    }
}

i[id^="product-info-icon-"] {
    &:hover {
        color: var(--secondarycolor) !important;
    }
}

.product-card-header {
    padding: 0.6rem .5rem 0.4rem 1rem;
    border: 0px;
    border-bottom: 1px solid !important;
    border-color: var(--primaryalpha) !important;
    min-height: 38px;
}

.product-card-button {
    .wf-btn-primary {
        font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
        font-weight: bold;
        border: 1px solid;
        border-color: var(--inputborder);
        background-color: var(--primarycolor);
        border-radius: 99px !important;
        transition: ease-in-out .15s;

        &:hover {
            background-color: var(--white);
            color: var(--primarycolor) !important;
        }
    }
}

.product-name {
    font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
    font-weight: 500;

    .name-span {
        font-size: .85rem;
    }

    .fa-info-circle {
        top: -1px !important;

        &::before {
            color: var(--primarycolor);
        }

        &:hover {
            &::before {
                color: var(--secondarycolor);
            }
        }
    }
}

#products-page-buttons-div {
    .btn-group {
        .btn {
            font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
            font-weight: 500;
            min-height: 38px;
            border-radius: 99rem !important;
            border: 1px solid;
            border-color: var(--primaryalpha);
        }

        .dropdown-menu {

            button {
                color: var(--black);
            }
        }
    }
}

/* ----------------------------------------------------------- 04 applicants */

.bg-light,
.upload-bg-light {
    background-color: var(--white) !important;
    background-repeat: no-repeat;
    background-size: 19%;
    background-position: right 7px bottom -28px;
    border-color: var(--primaryalpha);
    border-radius: 1rem;

    #success-alert-front-span {
        color: var(--brightgreen);
    }

    .row {
        padding: 1rem 1rem .5rem !important;
    }
}

.wf-upload-text {
    line-height: 1.5;
    font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
    font-size: .95rem;

    span:nth-child(2) {
        color: var(--secondarycolor);
    }

    .fa-upload {
        color: var(--primarycolor);
        text-decoration: none;

        &::before {
            font-size: 2rem;
            position: relative;
            top: -8px;
            text-decoration: none;
        }
    }

    &:hover {
        text-decoration: none !important;

        span:nth-child(2) {
            color: var(--secondarydim);
            text-decoration: dotted;
        }

        .fa-upload {
            color: var(--secondarycolor);
            text-decoration: none;
        }
    }
}

.wf-form-wrapper {
    border-color: var(--primaryalpha);
    border-radius: 1rem;

    label {
        font-size: .85rem;
        margin-bottom: 0 !important;
    }

    input,
    select,
    .input-group {
        border-color: var(--inputborder);
        font-size: .85rem;
        max-height: 34px;
    }
}

.wf-form-checkbox {
    background-color: var(--primaryalpha);
}

#co-applicant-btn-div,
#beneficiary-btn-div {
    .btn {
        border-radius: 99px;
    }
}

#beneficiary-btn-div {
    .btn {
        transition: ease-in-out .15s;

        &:hover {
            background-color: var(--cardbg);
        }
    }
}

.wf-form-h2 {
    font-size: 1.2rem !important;
    color: var(--primarycolor);

    .fa-info-circle {
        &::before {
            color: var(--primarycolor) !important;
        }
    }

    .fa-info-circle {
        &:hover {
            &::before {
                color: var(--secondarycolor) !important;
            }
        }
    }
}

.form-group {

    .form-control,
    .custom-select,
    #eligibility-custom-value {
        border-color: var(--inputborder);
        background-color: var(--white);

        &:hover {
            border-color: var(--primaryalpha);
            background-color: var(--inputbghover);
        }

        &:focus {
            background-color: var(--inputbghover);
            border-color: var(--altcolor);
        }
    }
}

#mfa-modal,
#mfa-modal-dialog {
    .form-group {
        .col-12 {
            #multifactor-passcode-text {
                border-top-left-radius: 99px;
                border-bottom-left-radius: 99px;
                font-size: .85rem;
            }

            #mfa-submit-btn {
                border-top-left-radius: 0px !important;
                border-bottom-left-radius: 0px !important;
                border-left: 0px;
                font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
                font-size: .85rem;
                background-color: var(--secondarycolor);
                border-color: var(--primarycolor);
                height: 36px;

                &:hover {
                    background-color: var(--secondarydim) !important;
                    border: 1px solid;
                    border-left: 0px;
                    border-color: var(--primaryalpha) !important;
                    color: var(--white);
                }
            }
        }
    }

    #lbl-send-mfa-text,
    #lbl-send-mfa-call,
    #send-mfa-text,
    #send-mfa-call {
        font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
        font-size: .85rem;
        font-weight: 600;
        color: var(--secondarycolor);

        .k-icon,
        .k-button-icon,
        .k-svg-icon,
        .fas {
            top: 2px;
            margin-right: .25rem;
        }

        .fa-phone-square {
            top: 0px;
        }

        #lbl-send-mfa-text,
        #lbl-send-mfa-call {
            border-bottom-color: var(--secondarycolor);
        }
    }
}

#btn-submit-image {
    border-radius: 99px !important;
}

#qrUrl {
    border-radius: .5rem;
}

.copy-primary-address-btn {
    background-color: var(--primarycolor);
    border-color: var(--primarycolor);
    border-radius: 99px;

    &:hover {
        background-color: var(--primarycolor);
        border-color: var(--primarycolor);
        opacity: .65;
    }
}

.remove-coapplicant-button,
.remove-beneficiary-button {
    font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
    font-weight: bold;
    color: var(--secondarycolor);
}

#add-co-applicant-btn,
#add-Beneficiary-btn {
    font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
    font-size: .85rem;
    font-weight: bold;

    &:hover {
        opacity: 1;
    }
}

#add-co-applicant-btn {
    background-color: var(--primarycolor);
    border-color: var(--primarycolor);
    color: var(--accentcolor);

    &:hover {
        background-color: var(--primarydark);
    }
}

#add-Beneficiary-btn {
    border-color: var(--primarycolor);
    color: var(--primarycolor);
    background-color: var(--white);

    &:hover {
        background-color: var(--cardbg);
    }
}

/* image capture modal */
#image-capture-modal {

    #upload-front-image,
    #upload-back-image,
    #qrUrl {
        border-color: var(--secondarycolor);
    }

    #wf-modal-submit-wrapper {
        background-color: var(--cardbg);
        border-color: var(--primaryalpha);

        .wf-bs-modal-btns {
            max-width: max-content;
            margin: auto;
        }

        #btn-submit-image {
            margin: .75rem auto !important;
            margin-right: initial !important;
        }
    }

    .driving-license-qr-code-scanner {
        h5 {
            font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
            margin-bottom: .25rem;
        }
    }
}

/* address verification modal */
.address-validation-title {
    color: var(--primarycolor);
}

.custom-control.custom-radio {
    .custom-control-label {
        &::before {
            border-radius: 100% !important;
        }
    }
}

/* ----------------------------------------------------------- 04 review */
.wf-review-panel {
    border-radius: 1rem;
}

h2.review-heading {
    font-size: 1.3rem !important;
    padding-left: 1rem;
}

#wfm-details-box {
    background-color: var(--white);
    color: var(--black);
    border: 1px solid;
    border-color: var(--primaryalpha);

    h3.membership-details-heading {
        color: var(--primarycolor) !important;
        font-size: 1.25rem !important;
    }
}

#review-page-form {
    .row.applicant-form-wrapper {
        h3.membership-details-heading {
            font-size: 1.25rem !important;
            color: var(--primarycolor);
        }

        h5.product-details-heading {
            color: var(--primarycolor);
            font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
            font-size: .85rem;
        }
    }
}

.product-details-item {
    span {
        color: var(--primarydarkalpha) !important;
    }

    small {
        color: var(--brightgreen) !important;
    }
}

.product-details-subtotal,
.product-details-total {

    .total-sum-text,
    .wf-funding-h3 {
        color: var(--primarydarkalpha) !important;
    }

    .total-sum,
    #total-deposits-value {
        color: var(--brightgreen) !important;
    }

    &::before {
        color: var(--primarydarkalpha);
    }
}

.review-box-border {
    border-radius: 1rem;

    h3.text-bottom-border {
        font-size: 1.25rem !important;
        color: var(--primarycolor) !important;
    }
}

.tax-information-box {
    color: var(--black);
    background-color: var(--cardbg);
    border-color: var(--primaryalpha);
    border-radius: 1rem;

    h3.text-bottom-border {
        font-size: 1.25rem !important;
        color: var(--primarycolor) !important;
    }
}

#wfm-tax-button {
    font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
    font-size: .85rem;
    font-weight: bold;
    color: var(--accentcolor);
    border-radius: 99px !important;

    .fa-check {
        margin-right: .25rem;
    }

    &:hover {
        background-color: var(--primarydark) !important;
        border-color: var(--primarydark) !important;
        color: var(--accentcolor) !important;
        opacity: 1 !important;
    }
}

.custom-control-label {
    span.wfm_rev_info_circle {
        color: var(--primarycolor);

        &:hover {
            &::before {
                color: var(--secondarycolor) !important;
            }
        }
    }
}

/* review/signature modal */
/* ((((((((((((((((( use this CSS as much as possible for loan's signature modal ))))))))))))))))) */
.wf-modal-html,
.wf-modal-signature,
#wf-signature-dialog {
    border-radius: inherit;
}

#wf-signature-dialog,
#review-confirmation-modal {
    padding: 1rem;

    .wf-signature-statement,
    .wf-signature-controls {
        border-radius: inherit;
    }

    .wf-modal-html {
        margin-bottom: 0;
    }
}

.wf-confirmation {
    overflow: hidden;
    margin-top: 0;
    position: relative;
    background-color: var(--cardbg);
    border-color: var(--primaryalpha);

    .wf-confirmation-checkbox {
        position: relative;
        border-radius: .25rem;
        box-shadow: none !important;
    }

    &:before {
        display: block;
        content: "";
        position: absolute;
        height: 40px;
        width: 40px;
        left: 0;
        top: 0;
        background-color: var(--primaryalpha);
    }
}

#Application-Document-content {
    border-radius: 1rem;
    margin-bottom: 0;

    .text-bottom-border {
        font-size: 1.25rem !important;
        color: var(--primarycolor) !important;
    }
}

.wfm-confirmation-grid {
    padding-bottom: 2rem;
}

.wfm-confirmation-grid .col-lg-7 {
    display: grid;
    gap: 1rem;
}

.wf-modal-signature,
.wf-signature-content {

    .wf-btn-toggle {
        border-radius: 99px !important;
        display: grid;
        grid-template-columns: 0fr 1fr;
        gap: .25rem;
        align-items: center;
        padding: .5rem 1rem;
        border-color: var(--clear);
        background-color: var(--clear);
        color: var(--secondarycolor);

        span {
            white-space: nowrap;
        }

        .k-icon,
        .k-svg-icon,
        .fa,
        .k-button-icon {
            color: var(--primarycolor);
        }

        &:hover {
            border-color: var(--clear);
            background-color: var(--cardbg) !important;

            span {
                color: var(--secondarydim) !important;
            }

            path {
                fill: var(--secondarydark);
            }
        }
    }

    .wf-btn-toggle {
        svg {
            path {
                fill: var(--primarycolor);
            }
        }
    }

    .wf-btn-toggle-selected {
        border-color: var(--primaryalpha) !important;
        background-color: var(--cardbg) !important;

        span {
            color: var(--secondarydim) !important;
        }

        svg {
            path {
                fill: var(--primarycolor) !important;
            }
        }

        .fa {
            color: var(--primarycolor);
        }

        &:hover {
            cursor: default;
            color: var(--secondarydim);
            border-color: var(--primaryalpha);
            background-color: var(--cardbg);

            span {
                color: var(--secondarydim) !important;
                background-color: var(--clear);

            }

            path {
                fill: var(--primarycolor) !important;
            }

            .fa {
                color: var(--primarycolor) !important;
            }
        }
    }
}

.sign-touch.wf-btn-toggle,
.sign-touch.wf-btn-toggle-selected {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: .25rem;
    padding-top: .65rem;
}

button.wf-btn-erase {
    border-radius: 99px;
    border-color: var(--clear);
    color: var(--eraser);
    font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
    font-size: .85rem;

    .k-svg-icon {
        color: var(--eraser);
    }

    &:hover {
        background-color: var(--graybg);
        color: var(--primarydisabled);

        .k-svg-icon {
            color: var(--primarydisabled);
        }
    }

    &:active {
        border: var(--accentcolor);
    }

    &:focus {
        border: var(--clear);
    }
}

/* ----------------------------------------------------------- 06 funding */

.wf-funding-details,
.wf-box-border,
.div-box-border {

    h3.text-bottom-border,
    h2.funding-header {
        font-size: 1.25rem !important;
        color: var(--primarycolor) !important;
    }

    h5.product-details-label {
        font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
    }

    .funding-selection {
        .radio {
            .optional-regular {
                font-size: .85rem;
            }
        }
    }
}

#wf-funding-box {
    background-color: var(--white);
    color: var(--black);
    border: 1px solid;
    border-color: var(--primaryalpha);
    border-radius: 1rem;

    h3.membership-details-heading {
        font-size: 1.25rem !important;
        color: var(--primarycolor) !important;
    }

    h5.product-details-label {
        color: var(--primarycolor) !important;
    }

    .wf-products-small-text {
        color: var(--hilite) !important;
    }
}

.funding-selection {
    border-radius: 1rem;
    border-color: var(--primaryalpha);
}

#transfer-section,
.account-information-section {

    .radio,
    .radio-inline {
        label {
            cursor: pointer;
        }

        input {
            opacity: 0;
            cursor: pointer;
            position: relative;
            left: -.95rem;
        }

        span {
            margin-left: -.5rem;
        }

        label::before {
            content: "";
            position: absolute;
            top: .25rem;
            left: -.1rem;
            display: block;
            width: 1rem;
            height: 1rem;
            pointer-events: none;
            border: solid 1px;
            border-radius: 99rem;
            color: var(--inputborder);
            cursor: pointer;
        }

        input[type="radio"]:checked~label::before {
            border: solid .35rem !important;
            color: var(--secondarycolor);
            cursor: default;
        }
    }
}

.account-information-section {
    border-radius: 1rem;

    .radio-inline {
        span {
            margin-left: .5rem !important;
        }

        input {
            left: 0 !important;
        }
    }
}

.wfm-funding-grid {
    .wf-box-border {
        max-width: 100% !important;
        border-radius: 1rem;
    }
}

/* ----------------------------------------------------------- 07 authentication */
h2#applicant-name {
    font-size: 1.2rem;
}

#verid-questions-panel {
    .wf-box-border {
        border-radius: 1rem;
    }

    .custom-control {
        label {
            cursor: pointer;
        }
    }
}

h6.wf-question-header {
    font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
    font-weight: 600 !important;
    color: var(--secondarycolor) !important;

    .wf-question-counter {
        margin-top: 0 !important;
        border-color: var(--inputborder) !important;
        background-color: var(--inputborder) !important;
        color: var(--white) !important;
        font-size: .85rem !important;
        padding-top: .1rem !important;
        border-radius: 99rem !important;
        line-height: 1.05 !important;
    }

    .wf-question-text {
        color: var(--primarydarkalpha) !important;
    }
}

#authentication-page-form #questions-holder .radio-holder .custom-control-label:before {
    border-color: var(--inputborder);
    border-radius: 99px !important;
}

/* ----------------------------------------------------------- 08 confirmation */
#confirmation-content {
    border-radius: 1rem;
}

.wfm-confirmation-grid {
    #new-application {
        background-color: var(--cardbg);
        border-color: var(--primaryalpha);
        color: var(--black);

        .btn-primary {
            border-radius: 99px;
            font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
            font-weight: bold;
            background-color: var(--primarycolor);
            border-color: var(--primarycolor);
            color: var(--accentcolor);

            i {
                color: var(--accentcolor);
            }

            &:hover {
                border-color: var(--primarydark);
                background-color: var(--primarydark);
                color: var(--accentcolor);
                opacity: 1;

                i {
                    color: var(--accentcolor) !important;
                }
            }

        }

        h3.text-bottom-border {
            font-size: 1.25rem !important;
            color: var(--primarycolor) !important;
        }
    }
}

/* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 02 add products */
#wf-title-bar {
    background-color: var(--footerbg);
}

/* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 03 loans */
.wf-hdr-main {
    nothing: none;
}

/* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 99 bug fixes */

.modal-dialog {
    .k-picker-outline {
        border-radius: 99rem;
        border-color: var(--primarydisabled);
        transition: ease-in-out .15s;

        &:hover {
            background-color: var(--secondaryfaint);
            color: var(--primarycolor);
        }

        &:focus,
        &:focus-within {
            box-shadow: none;
            border-color: var(--secondaryalpha);
            background-color: var(--secondaryfaint);
        }
    }
}

.k-window,
.k-dialog {
    overflow: hidden;
}

.k-list-item.k-selected {
    &:hover {
        background-color: var(--accentcolor);
    }
}

.custom-control-label::before {
    border-color: var(--inputborder);
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 0.15rem var(--secondaryfaint);
}

/* LOAN |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ----------------------------------------------------------- 00 global */
.wf-btn-grp {
    .wf-btn {
        border-radius: 99rem !important;
        font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
        font-weight: normal;
        padding: .75rem 1.5rem !important;
        transition: ease-in-out .15s;
    }

    .wf-btn-primary {
        background-color: var(--primarycolor);
        color: var(--white);
        font-weight: bold;

        &:hover {
            background-color: var(--accentcolor);
        }
    }

    .wf-btn-secondary {
        border-color: var(--primarycolor);
        background-color: var(--white);
        color: var(--accentcolor);

        &:hover {
            background-color: var(--secondaryfaint);
        }
    }
}

/* ----------------------------------------------------------- 01 selection */

.prod-btn-hdr-main {
    h2 {
        white-space: nowrap;
        background-color: var(--primarydarkalpha);
        color: var(--white);
    }
}

.reg-btn-ctnr {
    .reg-btn {
        background-color: var(--whitealpha);
        border: 1px solid;
        border-color: var(--primaryalpha);
        box-shadow: 0 0 2px var(--primaryalpha);
        backdrop-filter: blur(2px);

        &:hover {
            border-color: var(--secondarycolor);

            .prod-btn-inner {

                .prod-btn-icon,
                .prod-btn-hdr {
                    color: var(--secondarycolor) !important;
                }
            }
        }

    }
}

/* ----------------------------------------------------------- 02 purpose */

#wfl-purpose-partial-div {
    h6 {
        font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
        color: var(--white);
        background-color: var(--primarycolor);
        padding: .25rem .5rem;
        border-radius: 99rem;
    }
}

/* ----------------------------------------------------------- 03 financing */

#calculator-info-form {
    .k-colspan-1 {
        .k-form-field-wrap {
            .k-input-solid {
                padding: 0 .35rem;
                border-color: var(--primarycolor);
                background-color: var(--secondaryfaint);

                input {
                    text-align: center;
                }
            }
        }
    }
}

#calculator-info-form {
    .k-form-fieldset {
        .k-d-grid {
            .k-form-field {
                &:nth-child(6) {
                    .input-group {
                        &:hover {
                            border-color: var(--primarycolor) !important;
                        }

                        #finance-rate {
                            color: var(--eraser) !important;
                        }
                    }
                }
            }
        }
    }
}

#wfl-calc-wrapper li.k-tick-large {
    color: var(--secondarycolor);
}

#wfl-calc-wrapper .k-rounded-full {
    border-radius: .25rem;
}

.k-slider-tooltip {
    background-color: var(--primarycolor) !important;
    border-color: var(--primarycolor) !important;
    color: var(--white) !important;
    padding: .15rem .35rem .15rem !important;

    .k-callout {
        color: var(--primarycolor) !important;
    }
}

.wf-pymt-box {
    border-color: var(--primarycolor);

    h4.card-hdr {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--primarycolor);
    }

    .card-hdr-divider {
        display: none;
    }

    #wfl-monthly-payment-display,
    #wfl-total-payment-display {
        font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
    }

    .pymt-lg sup {
        top: -.65rem;
    }

    .wf-btn-pymt-toggle {
        &:hover {
            background-color: var(--cardbg);
        }
    }
}

/* features & options */
.card-pkg {
    border: 1px solid;
    border-color: var(--primarycolor);
    overflow: hidden;
}

.card-wrap-row,
.card-bg,
.card-shelf {
    border: none;
    border-color: var(--primarycolor);
    font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
}

.card-bg {
    background-color: var(--cardbg);
}

.card-mid-ctnr {
    .card-hdr {
        color: var(--primarycolor);
        font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
    }

    .card-hdr-divider {
        border-color: var(--primarycolor);
        margin-left: -.5rem;
        margin-right: -.5rem;
    }
}

.card-left-ctnr {
    border-left: none;
    border-top: none;
    border-bottom: none;
    border-color: var(--primarycolor) !important;

    label {
        background-color: var(--primaryalpha) !important;

        &:hover {
            background-color: var(--primarydisabled) !important;
        }
    }
}

.card-drawer {
    border-top: 1px solid;
    border-color: var(--primarycolor);

    .card-drw-pkg-hdr {
        font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important;
    }

    .card-drw-pkg-btn {
        &:hover {
            color: var(--altcolor);
        }
    }
}

#wfl-package-individual-payment {
    bottom: -44px;
}

/* ----------------------------------------------------------- 04 applicant */
.wf-app-id-camera .fa-camera-retro {
    color: var(--secondarycolor);
}

.wf-legal-box {
    border-color: var(--primarycolor);

    .wf-hdr-basic {
        border-color: var(--accentcolor);
    }
}

.state:has(.wf-loan-template-dropdownlist) {
    .wf-loan-template-dropdownlist {
        border: none;

        &:hover {
            background-color: var(--inputbghover);
        }
    }

    &:focus-within {
        box-shadow: none;
        outline: none;
    }
}

/* ----------------------------------------------------------- 04 review */

.wf-review {
    div[id^="wfl-review-"] {
        overflow: hidden;
        border: 1px solid;
        border-color: var(--primarycolor);
        margin-bottom: 1rem;

        .k-expander {
            background-color: var(--cardbg);
            border: none;
        }

        .k-expander-content-wrapper {
            border-color: var(--clear);
            background-color: var(--white);
        }

        .k-expander-header {
            background-color: var(--cardbg);
            border: none;
        }

        .wf-hdr-review {
            font-size: 1.15rem;
        }
    }
}

.wf-signature-statement,
.wf-signature-controls {
    border-radius: .5rem;
    padding: 1rem 0.75rem 0 !important;
}

/* ----------------------------------------------------------- 07 confirmation */
#wf-row-confirmation {
    #confirmation-content {
        background-color: var(--cardbg);
        border-color: var(--primarycolor);
        margin-bottom: 3rem;

        p {
            line-height: 1.7;
            font-size: 1.2rem;
        }
    }

    .wf-btn-secondary {
        border-radius: 99px;
        padding: 1rem 1.5rem !important;
        border-color: var(--primarycolor);
        color: var(--accentcolor);
        font-family: "mrs-eaves-xl-serif", Georgia, 'Times New Roman', Times, serif;
        font-weight: bold;

        .fas {
            color: var(--accentcolor);
        }

        &:hover {
            background-color: var(--cardbg);
        }
    }
}

/* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 98 mobile */
.wf-pm-mobile-open {
    .fa-list-ul {
        color: var(--accentcolor) !important;
    }
}

.wf-pm-mobile-step-label {
    color: var(--white) !important;
    font-size: .85rem !important;
}

.wf-pm-mobile-step-circle {
    background-color: var(--altcolor) !important;
}

.wf-progress-menu-outer button.wf-pm-mobile-close .fa-window-close {
    color: var(--navcolor) !important;
}

/* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 99 media queries */

@media screen and (max-width: 768px) {
    .wf-application-wrapper {
        overflow: visible;
    }

    .wf-hdr-logo #wf-logo-wrap {
        max-width: 100% !important;
        padding: 1rem .5rem .5rem 0rem !important;
    }

    .wf-hdr-logo #wf-logo-wrap img {
        max-width: 100% !important;
    }

    .wf-hdr-btns {
        background-color: var(--navdisabled) !important;
    }

    #wf-row-identcards .wf-tile .mb-2 img {
        margin: auto;
    }

    #already-member-form {
        grid-template-columns: 1fr !important;
    }

    #current-members-header {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
    }

    #current-members-secondary-text {
        text-align: center;
    }

    #already-member-btn {
        display: block;
        margin: auto;
    }

    #transfer-section .radio {
        display: grid;
        grid-template-columns: 0fr 1fr;
        gap: 1rem;
    }

    #wf-prv-btn, #wf-nxt-btn {
        font-size: .85rem;
    }

}