/* input(49,10): run-time error CSS1035: Expected colon, found '.'
input(55,17): run-time error CSS1035: Expected colon, found '{'
input(67,17): run-time error CSS1035: Expected colon, found '{'
input(84,18): run-time error CSS1035: Expected colon, found '{'
input(212,18): run-time error CSS1035: Expected colon, found '{'
input(226,25): run-time error CSS1035: Expected colon, found '{'
input(241,25): run-time error CSS1035: Expected colon, found '{'
input(253,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(264,25): run-time error CSS1035: Expected colon, found '{'
input(271,18): run-time error CSS1035: Expected colon, found '{'
input(291,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(353,13): 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(418,22): run-time error CSS1035: Expected colon, found '.'
input(456,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '{'
input(502,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '{'
input(549,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found '{'
input(598,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(611,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(621,20): run-time error CSS1035: Expected colon, found '{'
input(706,23): run-time error CSS1035: Expected colon, found ','
input(782,27): run-time error CSS1036: Expected expression, found ':'
input(788,27): run-time error CSS1036: Expected expression, found ':'
input(795,27): run-time error CSS1036: Expected expression, found ':'
input(804,27): run-time error CSS1036: Expected expression, found ':'
input(881,15): run-time error CSS1035: Expected colon, found '{'
input(887,15): run-time error CSS1035: Expected colon, found '{'
input(932,21): run-time error CSS1035: Expected colon, found '{'
input(946,21): run-time error CSS1035: Expected colon, found '{'
input(1014,8): run-time error CSS1035: Expected colon, found '{'
input(1021,24): run-time error CSS1035: Expected colon, found '{'
input(1033,24): run-time error CSS1035: Expected colon, found '{'
input(1092,21): run-time error CSS1035: Expected colon, found '{'
input(1139,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '.' */
/* Cy-Fair Federal Credit Union Custom Styles */
/* Global */
:root {
    --primarycolor: #75bd43;
    --primarylight: #F9FFF8;
    --secondarycolor: #75bd43;
    --darkgreen: #5d9c30;
    --accentcolor: #678fb5;
    --altcolor: #181818;
    --altdisabled: #D4D4D4;
    --black: #181818;
    --white: #ffffff;
    --lightgray: #f7f7f7;
    --gray: #d4d4d4;
    --darkgray: #595959;
    --red: #98002e;
    --blue: #678fb5;
    --clear: transparent;
}

/* --------------------------------------------- global */
/* header */
.wf-hdr-btns {
    background-color: var(--lightgray);
}

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

.wf-hdr-sub {
    color: var(--darkgray) !important;
}

/* scrollbars */
::-webkit-scrollbar-thumb {
    background-color: var(--primarycolor) !important;
    border-color: var(--black);
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--darkgreen) !important;
    border-color: var(--black);
}

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

.wf-pmi-complete {
    .circle-min {
        background: var(--gray) !important;
        border-color: var(--darkgray) !important;
    }

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

.wf-pmi-complete:hover {
    .circle-min {
        background: var(--white) !important;
        border-color: var(--blue) !important;
    }

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

.wf-pmi-current .circle-min {
    background: var(--white);
    border-color: var(--darkgreen);
}

.wf-pmi-current {
    .wf-pmi-link {
        color: var(--darkgreen) !important;
        text-decoration: none;
    }
}

.text-danger {
    color: var(--red) !important;
}

#confirmation-content a {
    font-weight: bold !important;
}

/* Next and Previos Btn */
#wf-nxt-btn:disabled,
#wf-nxt-btn[disabled] {
    background-color: var(--darkgray) !important;
    color: var(--white) !important;
}

#wf-nxt-btn:disabled span,
#wf-nxt-btn[disabled] span {
    color: var(--white) !important;
}

#wf-nxt-btn:hover:disabled,
#wf-nxt-btn:hover[disabled] {
    background-color: var(--darkgray) !important;
    color: var(--white) !important;
}

#wf-prv-btn:disabled,
#wf-prv-btn[disabled] {
    background-color: var(--darkgray) !important;
    color: var(--white) !important;
}

#wf-prv-btn:disabled span,
#wf-prv-btn[disabled] span {
    color: var(--white) !important;
}

#wf-nxt-btn {
    background-color: var(--black) !important;
    color: var(--white) !important;
    opacity: 1;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#wf-prv-btn {
    background-color: var(--white) !important;
    color: var(--black) !important;
    opacity: 1;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#wf-nxt-btn:hover,
#wf-prv-btn:hover {
    background-color: var(--primarycolor) !important;
    color: var(--black) !important;
    opacity: 1;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Buttons */
.wf-btn-primary {
    background-color: var(--black) !important;
    color: var(--white) !important;
}

.wf-btn-primary:hover {
    background-color: var(--primarycolor) !important;
    color: var(--black) !important;
}

.wf-btn-secondary {
    background-color: var(--white) !important;
    color: var(--black) !important;
}

.wf-btn-secondary:hover {
    background-color: var(--primarycolor) !important;
    color: var(--black) !important;
}

.wf-btn-secondary span {
    color: var(--black) !important;
}

.wf-btn-secondary:hover span {
    color: var(--black) !important;
}

.wf-hdr-btn {
    color: var(--black) !important;
}

.wf-hdr-btn:hover {
    color: var(--primarycolor) !important;
}

.btn-group:hover {
    background-color: var(--darkgreen) !important;
    color: var(--black) !important;
}

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

.dropdown-item:hover {
    background-color: var(--primarycolor) !important;
    color: var(--white) !important;
}

#wft_card_header_1,
#wft_card_header_2,
#wft_card_header_3,
#wft_card_header_4 {
    border-color: var(--darkgray) !important;
}

.add-product-btn:hover {
    opacity: 1.00 !important;
}

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

    &::before {
        background-color: var(--altcolor);
    }
}

.wf-pmi-complete .circle-maj {
    border-color: var(--altcolor) !important;
    color: var(--white);
    background-color: var(--altcolor);

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

    &::before {
        background-color: var(--altcolor);
    }
}

.wf-pmi-complete:hover .circle-maj {
    border-color: var(--accentcolor) !important;
    color: var(--white);
    background-color: var(--accentcolor);

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

    &::before {
        background-color: var(--altcolor);
    }
}

.wf-pmi-current {

    &:before {
        background-color: var(--altcolor);
    }
}

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


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

.wf-pmi-current {
    .wf-pmi-link {
        color: var(--primarycolor);
        text-decoration: none;

        &:hover {
            cursor: default;
        }
    }

    &:hover {
        cursor: default !important;

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

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

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

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

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

/* radio btn */
.k-radio {
    transition: box-shadow 0.3s ease;
}

.k-radio:hover {
    box-shadow: 0 0 0 2px var(--primarycolor);
    transition: box-shadow 0.3s ease;
}

.k-radio:checked,
.k-radio.k-checked {
    background-image: none !important;
    background-color: var(--gray) !important;
    border: 4px solid var(--darkgray) !important;
}

.k-radio:checked:focus {
    box-shadow: 0 0 0 2px var(--primarycolor);
}

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

.k-input:hover,
.k-input-solid:hover,
.k-numerictextbox:hover {
    background-color: #f5fafc !important;
}

.form-control:focus {
    background-color: #f5fafc !important;
}

.fa-sign-out-alt:hover {
    color: var(--black) !important;
}

#wf-row-confirmation {
    a:hover .fas {
        color: var(--black) !important;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

input:-internal-autofill-selected {
    background-color: #f5fafc !important;
}

.k-input-inner {
    background-color: var(--white) !important;
    color: var(--black) !important;
}

.k-input-inner:hover {
    background-color: #f5fafc !important;
    color: var(--black) !important;
}

.k-input-button {
    background-color: var(--lightgray) !important;
    color: var(--black) !important;
}

.k-input-button:hover {
    background-color: var(--gray) !important;
    color: var(--white) !important;
}

/* these 2 declarations were missing terminators */
.k-svg-icon>svg {
    color: var(--darkgray);
}

.k-svg-icon>svg:hover {
    color: var(--black);
}

/* State Field .address-validate.state declarations will return here. delete comment after fix applied */
/*  button icon masking isn't necessary for residence (it's a kendo button), so these declarations hide it */

.address-validate.state {
    &::after {
        background-color: var(--clear);
        z-index: -1;
    }

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

/* button icon masking is necessary for the employment state dropdown (non-kendo*), and these declarations reverse those above */
/* note: although the select dropdown has kendo classes, these are manually hard-coded to the select box so that it can accept styles that target kendo classes. */
/* actual kendo elements are compiled at runtime and do not exist as static HTML. the options menu in this scenario is also HTML, and it is these option tags that cannot be targeted */
#loan-current-employment-form {
    .address-validate.state {
        &::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
            display: block;
            height: 36px;
            width: 31px;
            background-color: var(--lightgray);

        }

        &::after {
            background-color: var(--clear);
            z-index: 2;
        }

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

            &::after {
                background-color: var(--clear);
            }
        }
    }
}

.k-button-text:hover {
    color: var(--primarycolor) !important;
    border-bottom: 2px dotted !important;
    border-color: var(--black) !important;
}

.wf-application-stage {
    .k-button-text:hover {
        color: var(--black) !important;
        border-bottom: 0px !important;
    }
}


/* Drop Down */
.k-list .k-selected {
    background-color: var(--gray);
    color: var(--black);
}

.k-list-item.k-selected:hover,
.k-selected.k-list-optionlabel:hover,
.k-list-item.k-selected.k-hover,
.k-selected.k-hover.k-list-optionlabel {
    background-color: var(--gray) !important;
    color: var(--black) !important;
}

.k-list-item:hover,
.k-list-item.k-hover,
.k-picker:focus,
.k-picker.k-focus {
    background-color: var(--primarycolor) !important;
    color: var(--white) !important;
}

.k-list-item:focus,
.k-list-optionlabel:focus,
.k-list-item.k-focus,
.k-focus.k-list-optionlabel {
    box-shadow: inset 0 0 0 2px var(--gray);
}

/* Calculator */
#wfl-calc-wrapper .input-group .input-group-prepend h2 {
    background-color: var(--lightgray) !important;
}

#wfl-calc-wrapper .input-group .input-group-prepend h2 .badge-pill {
    color: var(--black) !important;
}

#wfl-calc-wrapper {
    .k-input-inner:hover {
        background-color: #f3fff6 !important;
        color: var(--black) !important;
    }

    .k-input-inner:focus,
    .k-focus,
    .k-input-inner:active {
        background-color: #f3fff6 !important;
        color: var(--black) !important;
    }
}

#wfl-calc-wrapper .k-slider-selection,
#wfl-calc-wrapper .k-draghandle {
    background-color: var(--primarycolor);
    border-color: var(--primarycolor);
    box-shadow: 0 0 0 2px var(--primarycolor);
}


#wfl-calc-wrapper .k-draghandle:focus {
    border-color: var(--primarycolor);
    box-shadow: 0 0 0 2px var(--primarycolor);
}

.k-slider .k-draghandle {
    border-color: var(--black);
    color: var(--white);
    background-color: var(--primarycolor);
}

#wfl-calc-wrapper .k-rounded-full:hover {
    background-color: var(--darkgreen);
    color: var(--white);
}

#wfl-calc-wrapper .k-rounded-full:hover .k-svg-icon>svg {
    color: var(--white);
}

#wfl-calc-wrapper .k-rounded-full:active {
    background-color: var(--darkgray);
}


.wf-btn-grp {
    .k-button-text:hover {
        color: var(--black) !important;
    }
}

.form-control:disabled {
    background-color: var(--lightgray) !important;
}

/* Checkbox */

.card-chk-btn .fas,
.card-chk-btn span {
    color: var(--darkgray) !important;
    transition: ease-in-out 0.15s;
}

.card-chk-btn input:checked+.fas,
.card-chk-btn input:checked~span {
    color: var(--black) !important;
    transition: ease-in-out 0.15s;
}

.k-checkbox {
    transition: box-shadow 0.3s ease;
}

.k-checkbox:hover {
    box-shadow: 0 0 0 2px var(--primarycolor);
    transition: box-shadow 0.3s ease;
}

.k-checkbox:checked {
    background-color: var(--darkgray);
    border-color: var(--black);
}

.k-checkbox:focus,
.k-checkbox:checked:focus {
    box-shadow: 0 0 0 2px var(--primarycolor);
}

/* modals */
/* bootstrap */
.modal-dialog {

    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(--gray) !important;
    background-color: var(--white) !important;
    color: var(--black) !important;
    transition: ease-in-out .15s;

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

.modal.show {
    backdrop-filter: blur(2px);
}

.modal-dialog {
    .modal-content {

        .modal-header {
            border-color: var(--darkgray) !important;
            background-color: var(--darkgray) !important;

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

            button.close {
                color: var(--white) !important;
            }
        }

        .wf-modal-content-wrapper {
            border-color: var(--clear);

            .modal-footer {
                border-color: var(--clear);
            }
        }

        .wf-bs-modal-btns {

            button.wf-btn-outline-secondary {
                background-color: var(--white) !important;
                color: var(--black) !important;
                border: 1px solid !important;
                border-color: var(--clear) !important;

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

            button.wf-btn-primary:disabled {
                background-color: var(--darkgray) !important;
                color: var(--white) !important;
                border-color: var(--black) !important;
            }

            button.wf-btn-primary {
                background-color: var(--black) !important;
                color: var(--white) !important;
                border-color: var(--black) !important;

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

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

#mfa-modal #mfa-submit-btn {
    background-color: var(--black) !important;
    color: var(--white) !important;
    border-color: var(--black);
}

#mfa-modal:hover #mfa-submit-btn:hover {
    background-color: var(--primarycolor) !important;
    color: var(--black) !important;
    border-color: var(--primarycolor);
}


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

.k-window,
.k-dialog {

    .k-window-titlebar,
    .k-dialog-titlebar {
        background-color: var(--darkgray);
        border-color: var(--darkgray);

        .k-window-title,
        .k-dialog-title {
            color: var(--white);
        }

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

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

            }
        }
    }

    .k-window-content,
    .k-dialog-content {

        border-color: var(--clear);
    }

    .k-dialog-actions {

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

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

        .btn-outline-secondary {

            background-color: var(--white);
            color: var(--black);
            transition: ease-in-out .15s;

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


/* --------------------------------------------- Add Product */

.product-card-header {
    background-color: var(--black) !important;
}

/* --------------------------------------------- Membership */

h1.wf-hdr-main {
    color: var(--darkgray) !important;
}

/* Agree Checkbox */

.k-checkbox:focus,
.k-checkbox:checked:focus {
    box-shadow: 0 0 0 2px var(--primarycolor);
}

.custom-checkbox {
    .custom-control-label::before {
        transition: box-shadow 0.3s ease;
    }
}

.custom-checkbox:hover {
    .custom-control-label::before {
        box-shadow: 0 0 0 2px var(--primarycolor);
        transition: box-shadow 0.3s ease;
    }
}

.custom-checkbox:active {
    .custom-control-label::before {
        background-color: var(--darkgray) !important;
        box-shadow: 0 0 0 2px var(--primarycolor);
        transition: box-shadow 0.3s ease;
    }
}

.custom-checkbox:focus,
.custom-checkbox:checked:focus {
    .custom-control-label::before {
        background-color: var(--darkgray) !important;
        box-shadow: 0 0 0 2px var(--primarycolor);
        transition: box-shadow 0.3s ease;
    }
}

.custom-control-input:checked~.custom-control-label::before {
    color: var(--white) !important;
    background-color: var(--darkgray);
    border-color: var(--black);
}


#already-member-btn {
    background-color: var(--white) !important;
    color: var(--black) !important;
    border: 1px solid var(--black) !important;
}

#already-member-btn:hover {
    background-color: var(--primarycolor) !important;
    color: var(--black) !important;
    border: 1px solid var(--primarycolor) !important;
}


.k-dialog-actions .k-button-solid-base {
    background-color: var(--white) !important;
    color: var(--black) !important;
}

.k-dialog-actions:hover .k-button-solid-base:hover {
    background-color: var(--primarycolor) !important;
    color: var(--black) !important;
}

#review-page-form .row.applicant-form-wrapper #wfm-details-box .row.product-details-subtotal {
    color: var(--darkgreen) !important;
}

.product-card-header .wfm_product_info_header {
    color: var(--black) !important;
}

.product-card-header .wfm_product_info_header:hover {
    color: var(--primarycolor) !important;
}

#add-co-applicant-btn:hover {
    opacity: 1 !important;
}

#mfa-modal #mfa-submit-btn:hover {
    Opacity: 1 !important;
}

.wfm-confirmation-grid #new-application .btn-primary {
    background: var(--white) !important;
    border-color: var(--black) !important;
    color: var(--black) !important;
}

.wfm-confirmation-grid #new-application .btn-primary:hover {
    background: var(--primarycolor) !important;
    border-color: var(--primarycolor) !important;
    color: var(--black) !important;
    opacity: 1.0 !important;
}

.wfm-confirmation-grid #new-application .btn-primary i {
    color: var(--black) !important;
}

/* Upload Picture */

.wf-upload-text {
    .fa-solid {
        color: var(--blue)
    }
}

.wf-upload-text:hover {
    .fa-solid {
        color: var(--primarycolor)
    }
}


/* Agreements */

#CFFCU-loan-button {
    display: block !important;
    background-color: var(--white) !important;
    color: var(--black) !important;
    padding: .25rem 2rem .15rem !important;
    border: 1px solid var(--black) !important;
    border-radius: 50rem !important;
    max-width: max-content !important;
    transition: ease-in-out .15s !important;
}

#CFFCU-loan-button span {
    color: var(--black) !important;
}

#CFFCU-loan-button a span {
    color: var(--black) !important;
}

#CFFCU-loan-button:hover {
    background-color: var(--primarycolor) !important;
    text-decoration: none !important;
}

#CFFCU-loan-button:hover span {
    color: var(black) !important;
    text-decoration: none !important;
}

/* Account/Products */

.product-card-header {
    background-color: var(--darkgray) !important;
}


.product-card-button {
    .wf-btn-primary {
        background-color: var(--black) !important;

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


/* Verify Your Phone Number Box */

#mfa-modal-dialog {
    .wf-btn-wrapper {
        max-width: max-content;

        button {

            .fas,
            .fa-solid {
                color: var(--blue);
            }

            span:last-child {
                color: var(--blue);
                border-bottom: 2px dotted;
                border-color: var(--clear);
            }

            &:hover {

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

                span:last-child {
                    color: var(--primarycolor);
                    border-color: var(--black);
                }
            }
        }

        &:hover {
            button {

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

                span:last-child {
                    color: var(--primarycolor);
                    border-bottom: 2px dotted;
                    border-color: var(--black);
                }
            }
        }
    }

    /* i assume these IDs only exist in the membership module */
    .wf-btn-wrapper {

        #lbl-send-mfa-text,
        #lbl-send-mfa-call {
            color: var(--blue) !important;
            font-weight: bold !important;
        }

        #lbl-send-mfa-text:hover,
        #lbl-send-mfa-call:hover {
            color: var(--primarycolor) !important;
            border-bottom: 2px dotted !important;
            border-color: var(--black) !important;
        }
    }
}

/* --------------------------------------------- Loan */
/* selection */
.prod-btn-hdr-main {
    h2 {
        background-color: var(--lightgray);
        color: var(--black);
    }
}

.all-loan-types {
    .prod-btn-hdr-main {
        h2 {
            background-color: var(--white);
            color: var(--black);
            width: 100px;
            padding: 7px 7px 7px 7px;
            text-align: center;
        }
    }
}

.loan-types-partial {
    .prod-btn-hdr-main {
        h2 {
            background-color: var(--white);
            color: var(--black);
            width: 100px;
            padding: 7px 7px 7px 7px;
            text-align: center;
        }
    }
}

.hero-btn .prod-btn-inner {
    background-color: var(--black) !important;
    border: 3px solid var(--white);
    color: var(--white);
    opacity: 0.7;
    transition: 0.5s ease;
}

.hero-btn:hover .prod-btn-outer .prod-btn-inner {
    background-color: var(--primarycolor) !important;
    color: var(--black) !important;
    border: 3px solid var(--white);
    opacity: 1;
    transition: 0.5s ease;
}

.hero-btn:hover .prod-btn-outer:hover .prod-btn-inner:hover {
    border: 3px solid var(--white);
    opacity: 1;
    transition: 0.5s ease;
}


.pymt-lg span {
    color: var(--darkgreen) !important;
}

.card-bg {
    background-color: var(--white) !important;
}

.card-drw-btn,
.card-pkg .card-left-ctnr label {
    background-color: var(--lightgray) !important;
}

.card-drw-btn .fas {
    color: var(--primarycolor)
}

.card-drw-ctnt {
    background-color: var(--white) !important;
}

.reg-btn {
    background-color: var(--white);
    border-color: var(--black);

    .prod-btn-inner {

        .fa-solid,
        .fa-regular,
        .fas {
            color: var(--black) !important;
        }

        h3 {
            color: var(--black) !important;
        }
    }

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

        .fa-solid,
        .fa-regular,
        .fas {
            color: var(--black) !important;
        }

        h3 {
            color: var(--black) !important;
        }
    }

    .prod-btn-info {
        i.fa-info-circle {
            color: var(--black) !important;
        }

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

.wfl-vehicle-table-header {
    background-color: var(--darkgray) !important;
    color: var(--white) !important;
}

.k-dialog-actions {

    .k-button:disabled,
    .k-button.k-disabled {
        background-color: var(--lightgray) !important;
        color: var(--darkgray) !important;
    }
}

/* Cy-Fair Custom Classes/IDs */
#disclosure-for-cc-modal-header-loans {
    font-size: 1.5em;
    box-sizing: border-box;
    margin: -15px -30px 12px;
    font-family: Roboto, sans-serif;
    font-weight: bolder;
    line-height: 1.1;
    color: var(--black);
    background-color: var(--gray);
    padding: 15px 15px 15px 30px;
}

/* media queries */
@media screen and (max-width: 768px) {
    .prod-btn-hdr-main h2 {
        min-width: 100% !important;
        text-align: left !important;
        padding-left: 0px !important;
    }
}