/* input(82,7): run-time error CSS1035: Expected colon, found '.' input(96,17): run-time error CSS1035: Expected colon, found '{' input(115,21): run-time error CSS1035: Expected colon, found '{' input(157,7): run-time error CSS1035: Expected colon, found '{' input(191,10): run-time error CSS1035: Expected colon, found '.' input(197,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(218,25): run-time error CSS1035: Expected colon, found '{' input(225,18): run-time error CSS1035: Expected colon, found '{' input(251,17): run-time error CSS1035: Expected colon, found '{' input(270,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(450,16): run-time error CSS1035: Expected colon, found '{' input(481,20): run-time error CSS1035: Expected colon, found '{' input(550,31): run-time error CSS1035: Expected colon, found '{' input(574,23): run-time error CSS1035: Expected colon, found ',' input(676,12): run-time error CSS1035: Expected colon, found '{' input(684,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(761,19): run-time error CSS1035: Expected colon, found '{' input(835,6): run-time error CSS1035: Expected colon, found '.' input(994,10): run-time error CSS1035: Expected colon, found '{' */ /* ----------------------------------------------------------- cloverbelt custom css 11-13-2025 */ /* 1. font families (Open Sans): copy/paste the following code into the custom contact widget: */ /* 2. background-image: currently uploaded to oadmin */ /* 3. color scheme: upload exported JSON file (in DOW-[ticket number] */ /* NOTES: */ :root { --sitebg: #ffffff; --primarycolor: #008931; --primarydark: #006624; --primaryalpha: #00893138; --primaryfaint: #c7e5d2; --primarydarkalpha: #006624d1; --primarymodalalpha: #002f1091; --primarydisabled: #8bb499; --secondarycolor: #1A67FF; --secondaryhover: #1453d1; --secondarydisabled: #7196df; --secondaryfaint: #cad8f5; --secondaryborder: #1A67FF; --secondaryalpha: #1A67FF6b; --secondarydim: #014386e3; --accentcolor: #014386; --accentdisabled: #768ba0; --accenthover: #1762ad; --accentborder: #b1bfcd; --accentalpha: #0143866b; --accentfaint: #eff6fd; --accentdim: #014386e3; --altcolor: #00ac5b; --altalpha: #00ac5bde; /* additional colors based on the primary color */ --navcolor: #008931; --navdisabled: #8bb499; --navnumberdisabled: #FFFFFF; --footerbg: #FFFFFF; /* elemental colors */ --white: #FFFFFF; --whitealpha: #FFFFFF9f; --black: #202020; --graytext: #f9f9f9; --graybg: #fbfbfb; --ghostgray: #f1f1f1; --lightgray: #dddddd; --inputborder: #dddddd; --inputbghover: #ebf7ef; --brightgreen: #01c96b; --hilite: #204d11; --clear: transparent; --eraser: #797979; --cardbg: #f3faf6; /* the following remaining colors need to be changed to century color scheme */ --cardborder: #afd1bc; --cardselect: #99bea7; --cardselecthover: #82ac92; --error: #ff4800; } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 00 global */ html, body { font-family: "open-sans", Helvetica, Arial, sans-serif !important; } h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--accentcolor) !important; } /* header */ .wf-hdr-logo { position: relative; z-index: 1 !important; } .wf-hdr-step-name { h1.wf-step-h1 { color: var(--white) !important; } } .wf-hdr-error { position: absolute; z-index: 1 !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); } } } /* buttons */ .wf-btn-grp { .wf-btn-primary { &:hover { opacity: 1; background-color: var(--primarydark); } } .wf-btn-secondary:hover { background-color: var(--cardbg); } } a, a span { color: var(--secondarycolor); } /* main */ .wf-main-wrapper { background-color: var(--clear); } .wf-application-stage, .wf-pn-btn-grp { background-color: var(--whitealpha); } #wf-prv-btn { background-color: var(--primaryfaint); color: var(--primarycolor); } #wf-prv-btn:hover { background-color: var(--cardborder); } /* footer */ .wf-footer { background-color: var(--white); border-color: var(--lightgray); a { color: var(--altcolor); } #eho-logo { display: none; } #ncua-logo { svg { .NCUA-logo-fill { fill: white; stroke: black; } path:nth-child(2), path:nth-child(3), path:nth-child(4) { stroke: black; } path:nth-child(5) { fill: black; } } } } /* progress menu */ .wf-progress-menu-outer { z-index: 1; } .wf-progress-menu-inner { label.collapse-arrow:hover { cursor: default; } } .wf-pmi-current { &:hover { .circle-maj { background: var(--white) !important; } } } .wf-pm-item-wrapper .circle-maj, .wf-pm-item-wrapper .circle-min { border-radius: .15rem; } .wf-pm-item { font-family: "open-sans", Arial, Helvetica, sans-serif !important; } .wf-pmi-current .circle-maj, .wf-pmi-current .circle-maj:hover { border-color: var(--navcolor) !important; background-color: var(--white); .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(--white); } } &::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(--accentalpha); background-color: var(--cardbg) !important; } .wf-pm-sm-hz-bar, .wf-pm-sm-coapp { background-color: var(--primaryfaint); } .wf-pm-submenu { border-top-right-radius: .15rem !important; } .wf-pm-sm-coapp, .wf-pm-sm-coapp-hdr, .coapp-circle-min { border-radius: .15rem !important; } .wf-pm-sm-coapp-delete a { color: var(--error) !important; position: relative; left: -5px; } .wf-pm-sm-cai-incomplete .coapp-circle-min { background-color: var(--navdisabled); border-color: var(--navdisabled); } .wf-pm-sm-coapp-item:before { background-color: var(--navdisabled); } /* forms */ input { border-color: var(--inputborder) !important; } .input-group { border-color: var(--inputborder); border-radius: 0; } .input-group:hover { border-color: var(--primarycolor); } input:-internal-autofill-selected { background-color: var(--cardbg) !important; } .wf-form-wrapper { border-color: var(--lightgray); border-radius: 0; } .wf-form-wrapper .wf-form-h2 { border-color: var(--lightgray); } .form-control, .custom-select { border-radius: 0; border-color: var(--inputborder); } .form-group .form-control:hover, .k-picker:hover { border-color: var(--primarycolor); } .form-group .form-control:focus, .k-picker:focus { border-color: var(--primarycolor); background-color: var(--inputbghover) !important; } .k-picker:hover { background-color: var(--white); } .k-rounded-md { border-radius: 0; } .k-list .k-selected, .k-list .k-selected:hover, .k-list-item:hover { background-color: var(--altcolor); color: var(--white); } .k-input, .k-input-solid, .k-numerictextbox, .k-picker-solid { border-color: var(--inputborder) !important; } .k-input input:focus, .k-input-solid input:focus, .k-numerictextbox input:focus, .k-picker-solid input:focus { background-color: var(--cardbg); } .k-input:hover input, .k-input-solid:hover input, .k-numerictextbox:hover input, .k-picker-solid:hover input { background-color: var(--cardbg); } .k-input:hover, .k-input-solid:hover, .k-numerictextbox:hover, .k-picker-solid:hover { border-color: var(--primarycolor) !important; background-color: var(--cardbg); } .k-form-error, .k-text-error, .k-form-field-error .k-label { color: var(--error); } .k-form-field-error .input-group, .k-input-solid.k-invalid, .k-input-solid.ng-invalid.ng-touched, .k-input-solid.ng-invalid.ng-dirty { border-color: var(--error) !important; } /* boxes */ .wf-box-border { border-color: var(--inputborder); } /* 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-hdr-error, .wf-progress-menu-inner { z-index: 0; } /* bootstrap */ .modal-dialog { .btn-modal { background-color: var(--accentcolor) !important; border-color: var(--accentcolor) !important; transition: ease-in-out .15s; &:hover { opacity: 1 !important; background-color: var(--accenthover) !important; border-color: var(--accenthover) !important; } } .btn-outline-secondary { border-color: var(--accentcolor); background-color: var(--white); color: var(--secondarycolor); border-radius: 99px; transition: ease-in-out .15s; &:hover { background-color: var(--ghostgray); } } } .modal.show { backdrop-filter: blur(2px); background-color: var(--primarymodalalpha); } .modal-dialog { .modal-content { .modal-header { background-color: var(--primarycolor) !important; border-bottom: 1px solid !important; border-bottom-color: var(--primarydark); .modal-title, h3 { color: var(--white) !important; font-size: 1.1rem; font-weight: 600; } button.close { color: var(--white) !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-bs-modal-btns { border-color: var(--lightgray); height: 47px; button { font-family: "open-sans", Arial, Helvetica, sans-serif !important; font-weight: 600; } button.wf-btn-outline-secondary { background-color: var(--white) !important; color: var(--accentcolor) !important; border-color: var(--clear) !important; &:hover { background-color: var(--ghostgray) !important; } } button.wf-btn-primary { background-color: var(--primaryfaint) !important; color: var(--primarycolor) !important; border-color: var(--clear) !important; &:hover { color: var(--primarycolor) !important; background-color: var(--inputbghover) !important; border-color: var(--clear) !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 { box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); .k-window-titlebar, .k-dialog-titlebar { background-color: var(--primarycolor); border-color: var(--primaryalpha); .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; 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 { nothing: none; } .k-dialog-actions { background-color: var(--cardbg); border-color: var(--primaryalpha); .k-button-solid-primary { background-color: var(--cardbg); border-color: var(--primarycolor); color: var(--primarycolor); font-weight: 700; transition: ease-in-out .15s; &:hover { background-color: var(--cardborder); border-color: var(--primarycolor); color: var(--primarycolor); } } .btn-outline-secondary, .k-button-solid-base { background-color: var(--white); 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; &:hover { background-color: var(--secondarydim) !important; opacity: 1 !important; } } } } .k-dialog-actions { button { font-family: "open-sans", Arial, Helvetica, sans-serif !important; font-weight: 400 !important; } } /* start new modal */ .k-window, .k-dialog { & .k-dialog-actions { .wf-btn-tertiary { background-color: var(--accentfaint) !important; color: var(--accentcolor) !important; border-color: var(--accentfaint) !important; font-weight: 600 !important; &:hover { background-color: var(--accentborder) !important; } } } } /* scrollbars */ ::-webkit-scrollbar-track { border-radius: 0px; background-color: var(--white) !important; } ::-webkit-scrollbar-thumb { background-color: var(--primarydisabled); border-color: var(--primaryalpha); border-radius: 0px; } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ MEMBERSHIP */ /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 01 agreements */ #wf-row-identcards .wf-box-member { background-image: url('https://ecutechnology.com/wp-content/uploads/2025/09/already-member-bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; border: none; } #already-member-btn:hover { background-color: var(--primarydark); } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 02 accounts */ .prod-btn-inner .prod-btn-content .prod-btn-hdr { color: var(--white) !important; } .prod-btn-info .fa-info-circle { color: var(--white) !important; } .prod-btn-info .fa-info-circle::before { text-shadow: -1px -1px 0 var(--primarycolor), 1px -1px 0 var(--primarycolor), -1px 1px 0 var(--primarycolor), 1px 1px 0 var(--primarycolor); padding: 0px !important; } .prod-btn-info .fa-info-circle:hover::before { color: var(--accentcolor); text-shadow: -1px -1px 0 var(--white), 1px -1px 0 var(--white), -1px 1px 0 var(--white), 1px 1px 0 var(--white); } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 03 products */ #products-page-buttons-div { margin-bottom: 1rem; } .product-card-header { padding-top: .5rem !important; min-height: 36px; border-radius: 0 !important; .product-name { color: var(--white) !important; .name-span { font-size: 1rem !important; font-weight: 400 !important; } } .product-info-icon { padding: .08rem !important; top: -1px !important; left: 9px; } } .product-card-content { border-radius: 0 !important; } .product-card-content .product-info-icon { color: var(--white); text-shadow: -1px -1px 0 var(--primarycolor), 1px -1px 0 var(--primarycolor), -1px 1px 0 var(--primarycolor), 1px 1px 0 var(--primarycolor); padding: 0px !important; } .product-card-content .product-info-icon:hover { color: var(--accentcolor); text-shadow: -1px -1px 0 var(--white), 1px -1px 0 var(--white), -1px 1px 0 var(--pwhite), 1px 1px 0 var(--pwhite); } div[id^='product-account-nickname-'] { border-bottom-color: var(--white); } #products-list-main-div #products-list-content-div .product-card .product-card-header h3 i { color: var(--white); background-color: var(--primarycolor); } #products-list-main-div #products-list-content-div .product-card .product-card-header h3 i:hover { color: var(--accentcolor); background-color: var(--white); } #products-page-buttons-div .btn-group .dropdown-menu button:hover { background-color: var(--primarycolor); color: var(--white); } #products-page-buttons-div .btn-group .dropdown-menu .dropdown-item.active, #products-page-buttons-div .btn-group .dropdown-menu .dropdown-item:active { color: var(--primarycolor); outline: 1px solid; outline-color: var(--altalpha); background-color: var(--cardbg); } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 04 applicants */ .bg-light, .upload-bg-light { border-radius: 0; border: none; background-color: var(--cardbg) !important; a.wf-upload-text span { color: var(--primarycolor); } a.wf-upload-text span.fa-upload { color: var(--accentcolor); } } #mfa-modal .wf-btn-wrapper button span { font-size: .85rem; font-weight: 600; } #mfa-modal .wf-btn-wrapper button .fas, #mfa-modal .wf-btn-wrapper button .fa-solid { position: relative; top: 1px; } .wf-form-h2 .fa-info-circle, .applicant .wfm_form_info_circle_header { color: var(--white) !important; text-shadow: -1px -1px 0 var(--primarycolor), 1px -1px 0 var(--primarycolor), -1px 1px 0 var(--primarycolor), 1px 1px 0 var(--primarycolor); padding: 0px !important; position: relative; top: -2px; left: .25rem; } .wf-form-h2 .fa-info-circle:hover, .applicant .wfm_form_info_circle_header:hover { color: var(--accentcolor) !important; text-shadow: -1px -1px 0 var(--white), 1px -1px 0 var(--white), -1px 1px 0 var(--white), 1px 1px 0 var(--white); } .applicant .beneficiary-section a.fa.fa-info-circle::before { color: var(--white) !important; } .applicant .beneficiary-section a.fa.fa-info-circle:hover::before { color: var(--accentcolor) !important; } .wf-form-checkbox { background: var(--cardbg); border-color: var(--cardborder); } .copy-primary-address-btn { padding: .75rem 1rem !important; background-color: var(--white) !important; border-color: var(--accentcolor) !important; color: var(--accentcolor) !important; border: 1px solid !important; border-radius: 0 !important; } .copy-primary-address-btn:hover { background-color: var(--cardbg) !important; } #add-Beneficiary-btn:hover { background: var(--cardbg); } #add-co-applicant-btn:hover { background-color: var(--primarydark); opacity: 1; } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 05 review */ #wfm-details-box { background-color: var(--cardbg); border-color: var(--cardborder); border-radius: 0; } #wfm-details-box .membership-details-heading { border-color: var(--primaryalpha); padding-bottom: .25rem; } #review-page-form .row.applicant-form-wrapper h5.product-details-heading { font-size: .85rem; } #review-page-form .row.applicant-form-wrapper #wfm-details-box .row.product-details-total { border-color: var(--primaryalpha); } .review-box-border { border-color: var(--inputborder); border-radius: 0; } .tax-information-box { background-color: var(--accentfaint); border-color: var(--accentborder); border-radius: 0; } .tax-information-box .wfm_rev_info_circle { color: var(--white); text-shadow: -1px -1px 0 var(--primarycolor), 1px -1px 0 var(--primarycolor), -1px 1px 0 var(--primarycolor), 1px 1px 0 var(--primarycolor); padding: 0px !important; } .tax-information-box .wfm_rev_info_circle:hover { color: var(--accentcolor); text-shadow: -1px -1px 0 var(--white), 1px -1px 0 var(--white), -1px 1px 0 var(--white), 1px 1px 0 var(--white); padding: 0px !important; } #wfm-row-review #wfm-tax-button:hover { background-color: var(--primarydark) !important; opacity: 1 !important; } /* signature modal */ button.wf-btn-toggle.wf-btn-toggle-selected, button.wf-btn-toggle.wf-btn-toggle-selected:hover { border-color: var(--primarycolor) !important; color: var(--primarycolor) !important; background-color: var(--white) !important; } button.wf-btn-toggle.wf-btn-toggle-selected svg path, button.wf-btn-toggle.wf-btn-toggle-selected:hover svg path { fill: var(--primarycolor) !important; } button.wf-btn-toggle.wf-btn-toggle-selected:hover .k-svg-icon { color: var(--primarycolor) !important; } .wf-btn-toggle:hover { background-color: var(--cardbg) !important; border-color: var(--primaryalpha) !important; color: var(--accenthover) !important; path { fill: var(--accenthover) !important; } } .wf-signature-canvas, .wf-signature-canvas canvas { max-height: 175px; } .wf-confirmation { background-color: var(--cardbg); border-color: var(--primaryalpha); } .wf-confirmation .wf-confirmation-checkbox, .wf-confirmation .wf-confirmation-checkbox:checked { box-shadow: 0 0 0 0.75rem var(--cardselect) !important; } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 06 funding */ #wf-funding-box { background-color: var(--cardbg); border-color: var(--cardborder); border-radius: 0; } #wf-funding-box .membership-details-heading { border-color: var(--primaryalpha); padding-bottom: .25rem; } #wf-funding-box .row.product-details-total { border-color: var(--primaryalpha); } #wf-funding-box h5.product-details-label { font-size: .85rem; color: var(--accentcolor) !important; } .wfm-funding-grid #wf-funding-box .row.wf-funding-details-input .wf-products-small-text { color: var(--eraser) !important; } .wfm-funding-grid #wf-funding-box .row.wf-funding-details-input [class^="col-"] .input-group .input-group-prepend { border-radius: 0; } .wfm-funding-grid #wf-funding-box .row.wf-funding-details-input [class^="col-"] .input-group .input-group-prepend .input-group-text { color: var(--primarycolor); } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 07 authentication */ .wfm_auth_info_circle { color: var(--white); } .wfm_auth_info_circle::before { text-shadow: -1px -1px 0 var(--primarycolor), 1px -1px 0 var(--primarycolor), -1px 1px 0 var(--primarycolor), 1px 1px 0 var(--primarycolor); padding: 0px !important; } .wfm_auth_info_circle:hover::before { color: var(--accentcolor); text-shadow: -1px -1px 0 var(--white), 1px -1px 0 var(--white), -1px 1px 0 var(--white), 1px 1px 0 var(--white); } #authentication-page-form #questions-holder .radio-holder .custom-control-label::before { border-color: var(--inputborder); } #authentication-page-form .wf-question-header .wf-question-counter { border-color: var(--primarycolor); background-color: var(--cardbg); } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 08 confirmation */ .wf-review-panel { border-radius: 0; background-color: var(--cardbg); border-color: var(--cardborder); } .wf-review-panel .text-bottom-border { font-size: 1rem; padding-bottom: .5rem; border-bottom: 1px solid; border-color: var(--primaryalpha); } .wf-review-panel .btn-primary:hover { background-color: var(--accenthover) !important; opacity: 1 !important; } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ LOANS */ /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 01 selection */ .prod-btn { border-radius: 0; } .prod-btn-hdr-main { min-width: 100px; } .prod-btn-hdr-main h2 { background-color: var(--cardbg); border: 1px solid; border-color: var(--primaryalpha); font-size: .85rem; font-weight: 600; border-radius: 0; } .reg-btn { background-color: var(--graybg) !important; border-color: var(--accentalpha) !important; border-radius: 0; } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 02 purpose */ .wfl-vehicle-table-header { background-color: var(--accentfaint); color: var(--primarycolor) !important; border-radius: 0; padding: .25rem .5rem; font-weight: 600; margin-bottom: .25rem; } #wfl-vehicle-select-form .k-form-fieldset .k-form-legend, #wfl-vehicle-vin-form .k-form-fieldset .k-form-legend { display: none; } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 03 Financing */ .card-pkg { border-radius: 0; } .card-pkg .card-shelf, .card-pkg .card-drawer { border-color: var(--primaryalpha); } .card-pkg .card-shelf { border-bottom: 0px; } .card-bg { background-color: var(--cardbg); } .card-pkg .card-drw-pkg-hdr { color: var(--eraser) !important; } .card-pkg .card-hdr-divider { border-color: var(--primaryalpha); } .card-pkg .card-left-ctnr label { background-color: var(--cardselect); } .card-pkg .card-left-ctnr label:hover { background-color: var(--cardselecthover); } .card-pkg .card-drw-ctnt { background-color: var(--cardbg); } .card-num-bg { background-color: var(--cardselecthover) !important; } .card-num-bg .wf-hdr-disc { color: var(--white) !important; } .card-pkg .pkg-item { color: var(--eraser) !important; } .card-pkg .card-btn { color: var(--secondarycolor); } .card-pkg .card-btn:hover { color: var(--secondaryhover); } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ MEDIA QUERIES */ @media screen and (max-width: 500px) { .wf-bs-modal-btns .btn { height: 100%; } }