/* input(86,10): run-time error CSS1035: Expected colon, found '{' input(98,7): run-time error CSS1035: Expected colon, found '.' input(107,17): run-time error CSS1035: Expected colon, found '{' input(133,7): run-time error CSS1035: Expected colon, found '{' input(163,9): run-time error CSS1035: Expected colon, found ',' input(185,9): run-time error CSS1035: Expected colon, found ',' input(227,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(239,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(250,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(277,10): run-time error CSS1035: Expected colon, found '.' input(283,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(299,25): run-time error CSS1035: Expected colon, found '{' input(306,18): run-time error CSS1035: Expected colon, found '{' input(332,17): run-time error CSS1035: Expected colon, found '{' input(359,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(410,16): run-time error CSS1035: Expected colon, found '{' input(440,20): run-time error CSS1035: Expected colon, found '{' input(546,23): run-time error CSS1035: Expected colon, found ',' input(662,12): run-time error CSS1035: Expected colon, found '{' input(693,13): run-time error CSS1035: Expected colon, found '{' input(715,10): run-time error CSS1035: Expected colon, found '{' input(911,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(937,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(953,15): run-time error CSS1035: Expected colon, found '{' input(963,21): run-time error CSS1035: Expected colon, found '{' input(1022,24): run-time error CSS1035: Expected colon, found '{' input(1031,16): run-time error CSS1035: Expected colon, found '.' input(1078,26): run-time error CSS1035: Expected colon, found '{' input(1135,16): run-time error CSS1035: Expected colon, found '{' input(1153,18): run-time error CSS1035: Expected colon, found '{' input(1182,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(1193,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(1224,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#image-capture-modal-body' input(1241,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#image-capture-modal' input(1279,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(1305,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(1313,28): run-time error CSS1035: Expected colon, found '{' input(1338,12): run-time error CSS1035: Expected colon, found '{' input(1350,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(1373,28): run-time error CSS1035: Expected colon, found ',' input(1384,11): run-time error CSS1035: Expected colon, found '{' input(1405,11): run-time error CSS1035: Expected colon, found '{' input(1432,25): run-time error CSS1035: Expected colon, found '{' input(1450,20): run-time error CSS1035: Expected colon, found '{' input(1551,17): run-time error CSS1035: Expected colon, found '{' input(1587,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' input(1604,10): run-time error CSS1035: Expected colon, found '{' input(1652,15): run-time error CSS1035: Expected colon, found 'img' input(1675,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '#full-height-container' */ /* ----------------------------------------------------------- multipli custom css */ /* 1. copy/paste the following code into the custom contact widget: font-family: "raleway", sans-serif; font-family: playfair-display, serif; */ /* 2. background-image: currently uploaded to oadmin */ /* 3. color scheme: upload exported JSON file (in DOW-[ticket number] */ /* NOTES: */ :root { --sitebg: #004F71; --primarycolor: #004F71; --primarydark: #00405b; --primaryalpha: #004362c4; --primaryfaint: #cad8df; --primarydarkalpha: #ff00ffd1; --primarymodalalpha: #004F7191; --primarydisabled: #638391; --secondarycolor: #eaf3fd; --secondaryhover: #ff00ff; --secondarydisabled: #ff00ff; --secondaryfaint: #ff00ff; --secondaryborder: #008065; --secondaryalpha: #ff00ff6b; --secondarydim: #ff00ffe3; --accentcolor: #67B346; --accentdisabled: #ff00ff; --accenthover: #488733; --accentborder: #ff00ff; --accentalpha: #67b3467d; --accentfaint: #ff00ff; --accentdim: #ff00ffe3; --altcolor: #008264; --althover: #00664e; --altalpha: #0082648c; /* additional colors based on the primary color */ --navcolor: #c1e0b4; --navdisabled: #5f9491; --navnumberdisabled: #FFFFFF; --footerbg: #ff00ff; /* elemental colors */ --white: #fcfcfc; --whitealpha: #fcfcfc9f; --black: #0e1932; --slate: #474747; --graytext: #f9f9f9; --graybg: #fbfbfb; --ghostgray: #f1f1f1; --lightgray: #d9dcdf; --inputborder: #d9dcdf; --inputbghover: turquoise; --brightgreen: #01c96b; --hilite: #ff00ff; --clear: transparent; --eraser: #797979; --cardbg: #dcecd5; /* the following remaining colors need to be changed to century color scheme */ --cardborder: #ff00ff; --cardselect: #ff00ff; --cardselecthover: #ff00ff; --error: #ff4800; /* custom content variables */ --mcu-card-bg: var(--white); --mcu-text: var(--black); --mcu-muted: var(--slate); } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 00 global */ html, body { font-family: "raleway", Helvetica, Arial, sans-serif !important; } h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--black) !important; } a { color: var(--altcolor); span { color: var(--altcolor); } } /* header */ .wf-hdr-step-name { background-color: var(--clear); box-shadow: none; border-bottom: 1px dashed; border-color: var(--altcolor); h1.wf-step-h1 { color: var(--white) !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); } } } .wf-main-wrapper, .wf-footer { background-color: var(--clear); } .wf-footer { border-top: 1px dashed; border-color: var(--altcolor); a { color: var(--white); } .footer-divider { color: var(--accentcolor) !important; } .EHO-logo-fill { fill: var(--white); } } .wf-application-stage { background-color: var(--secondarycolor); border-color: var(--clear); border-top-left-radius: .5rem; border-top-right-radius: .5rem; } #wf-prv-btn, #wf-nxt-btn { font-weight: 600; transition: ease-in-out .15s; } #wf-nxt-btn { background-color: var(--accentcolor) !important; border-color: var(--accentcolor) !important; span, .fas { color: var(--white); } &:hover { background-color: var(--accenthover) !important; border-color: var(--accenthover) !important; color: var(--white) !important; span, .fas { color: var(--white) !important; } } } #wf-prv-btn { background-color: var(--cardbg) !important; border-color: var(--cardbg) !important; ; span, .fas { color: var(--primarycolor); } &:hover { background-color: var(--navcolor) !important; border-color: var(--navcolor) !important; color: var(--white); span, .fas { color: var(--primarycolor); } } } html, body, header, .wf-hdr-logo { background-image: url('https://alpha-rrcu.ecutechnology.com/images/uploads/background.jpg?v=FmH8Q1da8momBkJXwVAvTkgXIrQ'); background-size: cover; background-position: center top; background-attachment: fixed; } /* forms */ /* kendo form elements */ .k-input, .k-input-solid, .k-numerictextbox, .k-picker, .k-picker-solid, .form-control { background-color: var(--white); border-color: var(--inputborder); color: var(--black); border-radius: .75rem; transition: ease-in-out .15s; &:hover { border-color: var(--altcolor); background-color: var(--white) !important; color: var(--black) !important; } } .k-form-field label { margin-bottom: .25rem !important; } .k-list-content li { &:hover { background-color: var(--accentalpha) !important; color: var(--black) !important; } } .k-list-content li.k-selected { color: var(--white) !important; background-color: var(--primaryalpha) !important; box-shadow: none !important; &:hover { background-color: var(--primaryalpha) !important; color: var(--white) !important; cursor: default; } } /* bootstrap form elements */ .custom-control-input:focus~.custom-control-label::before { box-shadow: 0 0 0 0.15rem var(--altalpha); } /* scrollbars */ ::-webkit-scrollbar-track { border-radius: 99px; background-color: var(--white) !important; overflow: hidden; } ::-webkit-scrollbar-thumb { background-color: var(--primaryalpha); border-color: var(--primarycolor); border-radius: 99px; } /* 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); } &:hover { .circle-maj { span { color: var(--white); } } } } .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; } .wf-hdr-error { color: var(--white) !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 */ /* bootstrap */ .wf-hdr-logo, .wf-hdr-step-name, .wf-hdr-btns, .wf-progress-menu-inner { z-index: 0; } .wf-hdr-error { z-index: 100000; } /* bootstrap modals */ .modal-dialog { .btn-modal { border-radius: 1rem !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: 1rem !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: 2px solid; border-color: var(--altalpha); border-radius: 1rem; .modal-header { background-color: var(--primarycolor) !important; padding: 1rem; border-bottom: 1px dashed !important; border-bottom-color: var(--altcolor) !important; .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-body { background-color: var(--white); } .modal-footer, .wf-bs-modal-btns { border-color: var(--inputborder); background-color: var(--secondarycolor); button, .btn, .btn-modal { display: block; font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important; font-weight: 500; border-radius: .75rem !important; padding: .5rem 2rem !important; border: 1px solid !important; max-width: max-content; margin: .75rem auto !important; min-width: 150px; } button.wf-btn-primary, .btn-primary, .btn-modal { background-color: var(--altcolor) !important; color: var(--white) !important; border-color: var(--altcolor) !important; &:hover { color: var(--black) !important; background-color: var(--accentcolor) !important; border-color: var(--accentcolor) !important; } } button.wf-btn-outline-secondary, .btn-outline-secondary { background-color: var(--white) !important; color: var(--primarycolor) !important; border-color: var(--primarycolor) !important; &:hover { background-color: var(--cardbg) !important; border-color: var(--altcolor) !important; color: var(--altcolor) !important; } } } } } } /* kendo modals */ .k-overlay { background-color: var(--primarymodalalpha) !important; backdrop-filter: blur(2px) !important; opacity: 1 !important; } .k-window, .k-dialog { border-radius: 1rem; border: 2px solid; border-color: var(--altalpha); box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); overflow: hidden; .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(--secondarycolor); border-color: var(--primaryalpha); .k-button-solid-primary { max-width: max-content; margin: .75rem auto; border-radius: .5rem; padding: .5rem 1.5rem; background-color: var(--altcolor); border: 1px solid; border-color: var(--altcolor); color: var(--white); transition: ease-in-out .15s; &:hover { background-color: var(--accentcolor); border-color: var(--accentcolor); color: var(--black); } } .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; } } /* info circle */ .fa-info-circle { color: var(--white) !important; } .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; } .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); } /* buttons */ .wf-btn-grp { .wf-btn { border-radius: .5rem !important; &:hover { opacity: 1; } } .wf-btn-primary { background-color: var(--altcolor); color: var(--white) !important; &:hover { background-color: var(--althover); } } } /* open in oadmin button */ .wf-hdr-btn-oadmin { color: var(--navcolor); span { color: var(--navcolor); } &:hover { color: var(--cardbg); span { color: var(--cardbg); } i { color: var(--cardbg) !important; } } } /* marketing boxes */ .mcu-hero { background: var(--mcu-card-bg); color: var(--mcu-text); border-radius: 1rem; border: 1px solid; border-color: var(--altcolor); box-shadow: 0px 5px 10px 0px rgba(14, 25, 50, 0.25); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; backdrop-filter: blur(0px); width: 100%; } .mcu-hero-1col { grid-template-columns: 1fr; } .mcu-hero__media { position: relative; overflow: hidden; min-width: 0; margin: 0 !important; } .mcu-hero__img { width: 100%; height: 100%; display: block; object-fit: cover; } .mcu-hero__content { padding: 20px 22px 26px; min-width: 0; } .mcu-hero__p { margin: 0 0 12px; color: var(--mcu-muted); font-size: 0.85rem; line-height: 1.55; } .mcu-hero__glass { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; color: var(--mcu-text); font-size: 1rem; line-height: 1.55; background: var(--mcu-glass-bg); -webkit-backdrop-filter: saturate(120%) blur(10px); backdrop-filter: saturate(120%) blur(10px); border-top: 1px solid var(--mcu-glass-border); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); white-space: normal; overflow-wrap: anywhere; word-break: break-word; text-wrap: balance; } .mcu-hero__glass-white { background-color: var(--whitealpha); } .mcu-accordion { --acc-card-bg: var(--white); --acc-border: var(--inputborder); --acc-title: var(--primarycolor); --acc-summary: var(--black); --acc-muted: var(--slate); --acc-radius: 1rem; width: 100%; } .mcu-acc__card { background: var(--acc-card-bg); border: 1px solid var(--acc-border); border-radius: var(--acc-radius); overflow: hidden; } .mcu-acc__title { margin: 0; padding: 18px 20px; font-size: 1.25rem; color: var(--acc-title); border-bottom: 1px solid var(--acc-border); } /* Items */ .mcu-acc__item { border-bottom: 1px solid var(--acc-border); } .mcu-acc__item:last-of-type { border-bottom: 0; } /* Summary row */ .mcu-acc__summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; color: var(--acc-summary); font-weight: 600; } .mcu-acc__summary::-webkit-details-marker { display: none; } /* Chevron */ .mcu-acc__chev { width: 20px; height: 20px; flex: 0 0 20px; position: relative; } .mcu-acc__chev::before { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-right: 2px solid var(--altcolor); border-bottom: 2px solid var(--altcolor); transform: rotate(45deg); transition: transform .2s ease; } .mcu-acc__item[open] .mcu-acc__chev::before { transform: rotate(225deg); } /* Panel content */ .mcu-acc__panel { padding: 8px 20px 20px; } .mcu-acc__text { margin: 0 0 14px; color: var(--acc-muted); line-height: 1.6; } .mcu-acc__hint { margin: 4px 0 10px; color: var(--acc-summary); font-weight: 600; font-size: .95rem; } .mcu-acc__note { margin: 6px 0 0; color: var(--acc-muted); font-size: .9rem; font-style: italic; } .mcu-accordion .wf-btn-primary { border-radius: .5rem !important; border-color: var(--altcolor); background-color: var(--altcolor); color: var(--white) !important; transition: ease-in-out .15s; margin: 1rem .75rem 0 0; &:hover { border-color: var(--accentcolor); background-color: var(--accentcolor); color: var(--black) !important; } } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 01 membership */ /* ----------------------------------------------------------- 01 agreements */ .wf-box-member { background-color: var(--white); border-color: var(--inputborder); border-radius: 1rem; } #agreements-form-div { margin-bottom: 0; } #already-member-btn { background-color: var(--altcolor); border-color: var(--altcolor); color: var(--white); border-radius: .75rem; transition: ease-in-out .15s; &:hover { background-color: var(--accentcolor); border-color: var(--accentcolor); color: var(--black); } } /* ----------------------------------------------------------- 02 account */ .wfm-accounts-grid { padding-bottom: 2rem; } .hero-btn-ctnr { overflow: hidden; border-radius: 1rem; .prod-btn { border-radius: inherit; } } .hero-btn { overflow: hidden; backdrop-filter: blur(0px); .prod-btn-outer { position: relatve; } .prod-btn-inner { background-color: var(--primaryalpha); border: 1px solid; border-color: var(--primaryalpha); position: absolute; bottom: -1px; width: 100%; max-width: 100%; margin: 0; padding: 0; max-height: 45px; overflow: hidden; backdrop-filter: blur(3px); .prod-btn-content { display: grid; grid-template-columns: 0fr 1fr; gap: .5rem; padding: 0 1rem; color: var(--white); .prod-btn-icon, .prod-btn-hdr { color: var(--white) !important; } .prod-btn-icon { justify-self: right; margin-top: 0; } .prod-btn-hdr { justify-self: left; } } } &:hover { .prod-btn-outer { border-color: var(--clear); } .prod-btn-inner { background-color: var(--altalpha) !important; border-color: var(--altalpha) !important; .prod-btn-content { color: var(--white) !important; } } } } .prod-btn-ctnr { .prod-btn-hdr-main { border-radius: 1rem; z-index: 1; } } /* ----------------------------------------------------------- 03 products */ #products-page-buttons-div { .btn-group .btn, .btn-group .btn-group .btn { border-radius: .5rem !important; transition: ease-in-out .15s; background-color: var(--altcolor); border-color: var(--altcolor); color: var(--white) !important; &:hover { opacity: 1; background-color: var(--althover); border-color: var(--althover); color: var(--white) !important; } } .btn-group .dropdown-menu { background-color: var(--white); border-radius: .25rem; button { color: var(--primarycolor); } button:hover { background-color: var(--cardbg); } } .btn.disabled, .btn:disabled { &:hover { background-color: var(--altcolor) !important; opacity: .65 !important; cursor: default; } } } .product-card { border-radius: .5rem !important; overflow: hidden; border: none !important; border-color: var(--altcolor); box-shadow: 0px 5px 10px 0px rgba(14, 25, 50, 0.25); .product-card-header { border: none !important; background-color: var(--altcolor) !important; h3 { color: var(--white) !important; padding-bottom: .5rem; span { font-weight: 400 !important; font-size: 1rem !important; } i { top: -1px !important; right: -6px !important; } } } .product-card-content { border: none !important; .input-group { border-radius: .5rem; } .form-group .text-danger { list-style: none; font-size: .85rem; padding: .5rem 0; } } .product-card-button button { border-radius: .5rem !important; background-color: var(--cardbg); border: 1px solid; border-color: var(--altcolor); color: var(--altcolor) !important; &:hover { background-color: var(--navcolor); } } } /* ----------------------------------------------------------- 04 Applicants */ .bg-light, .upload-bg-light { background: var(--mcu-card-bg); color: var(--mcu-text); border-radius: 1rem; border: 1px solid; border-color: var(--altcolor); box-shadow: 0px 5px 10px 0px rgba(14, 25, 50, 0.25); .fa-upload { font-size: 1.5rem; } span { color: var(--altcolor); &:hover { color: var(--primarycolor); } } } .wf-form-wrapper { background-color: var(--white); border-radius: 1rem; border-color: var(--inputborder); .input-group { border-color: var(--inputborder); border-radius: .75rem; .input-group-append button { border-left-color: var(--inputborder) !important; } &:hover { border-color: var(--altcolor) !important; } } select.form-control option { background-color: var(--white) !important; } } #beneficiary-btn-div .btn, #co-applicant-btn-div .btn { border-radius: .75rem; overflow: hidden; } #co-applicant-btn-div .btn { background-color: var(--altcolor); border-color: var(--altcolor); color: var(--white); &:hover { opacity: 1; background-color: var(--althover); } } #beneficiary-btn-div .btn { background-color: var(--white); border-color: var(--primarycolor); color: var(--primarycolor); &:hover { background-color: var(--cardbg); } } /* info circle */ .applicant .wfm_form_info_circle_header { color: var(--white) !important; } .applicant .wfm_form_info_circle_header::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; } .applicant .wfm_form_info_circle_header: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); } /* scan ID modal */ #image-capture-modal { #image-capture-modal-body { background-color: var(--white) !important; } .wf-bs-modal-btns { height: 60px; #btn-submit-image { height: 100%; } } } /* QR code redirect scan ID modal */ body.modal-open.wf2-temp-backdrop { font-family: "objektiv-mk1", Arial, Helvetica, sans-serif !important; #image-capture-modal { .modal-content { border-radius: 1rem; } .modal-header { background-color: var(--primarycolor) !important; h3, button { color: var(--white) !important; } } .modal-body { background-color: var(--white); } .wf-modal-submit-wrapper { .wf-bs-modal-btns { grid-template-columns: 1fr; } } } } .wf-form-wrapper.wf-form-checkbox { background-color: var(--primaryfaint); } .copy-primary-address-btn { border-radius: .5rem !important; border-color: var(--altcolor) !important; background-color: var(--altcolor); color: var(--white) !important; transition: ease-in-out .15s; height: 42px !important; &:hover { background-color: var(--accentcolor); border-color: var(--accentcolor) !important; color: var(--black) !important; } } /* MFA modal */ #mfa-modal .cards-container { background-color: var(--white); } #multifactor-passcode-text { border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; } #mfa-submit-btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; background-color: var(--altcolor) !important; border-color: var(--altcolor) !important; color: var(--white); transition: ease-in-out .15s; &:hover { background-color: var(--accentcolor) !important; border-color: var(--accentcolor) !important; color: var(--black) !important; } } #mfa-failure { .btn-outline-secondary { border-color: var(--altcolor) !important; background-color: var(--white) !important; color: var(--altcolor) !important; transition: ease-in-out .15s; &:hover { background-color: var(--cardbg) !important; } } } /* ----------------------------------------------------------- 05 due diligence */ .wf-due-diligence-questions-answers { padding-bottom: 2rem; } /* ----------------------------------------------------------- 06 review */ .wf-review-panel, .review-box-border, .tax-information-box { border-radius: 1rem; } #how-did-you-hear-about-us-drop-down { option { background-color: var(--white) !important; } } #wfm-row-review #wfm-tax-button { border-radius: .5rem !important; background-color: var(--altcolor); border-color: var(--altcolor); color: var(--white); transition: ease-in-out .15s; &:hover { opacity: 1; background-color: var(--accentcolor); border-color: var(--accentcolor); color: var(--black); } } .tax-information-box { background-color: var(--cardbg); } /* review signature modal */ .wf-modal-html, .wf-modal-signature, #wf-signature-dialog { border-radius: .75rem; } #wf-signature-dialog, #review-confirmation-modal { padding: 1rem; .wf-signature-statement, .wf-signature-controls { border-radius: inherit; } .wf-modal-html { margin-bottom: 0; } } #signature-popup { label { padding-bottom: .5rem; } .signature-pad { border-radius: .5rem; overflow: hidden; } } .wf-confirmation { overflow: hidden; border-radius: .5rem; margin-top: 0; position: relative; border-radius: .5rem; display: grid; grid-template-columns: 0fr 1fr; background-color: var(--cardbg); border-color: var(--primaryalpha); label { padding: .75rem; } .wf-confirmation-checkbox { position: relative; align-self: center; border-radius: .25rem; box-shadow: none !important; } &:before { display: block; content: ""; position: absolute; height: 100%; 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: .5rem !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(--primarycolor); 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(--primarycolor) !important; } svg { path { fill: var(--primarycolor) !important; } } .fa { color: var(--primarycolor); } &:hover { cursor: default; color: var(--primarycolor); border-color: var(--primaryalpha); background-color: var(--cardbg); span { color: var(--primarycolor) !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); } } /* ----------------------------------------------------------- 07 funding */ .wf-funding-details, .wf-box-border { border-radius: 1rem !important; } .product-details-label { color: var(--black) !important; } .wfm-funding-grid #wf-funding-box .row.wf-funding-details-input [class^="col-"] .input-group { border-radius: .5rem; border-color: var(--inputborder) !important; &:hover { border-color: var(--altcolor) !important; } } .wfm-funding-grid #wf-funding-box .row.wf-funding-details-input [class^="col-"] .input-group .input-group-prepend .input-group-text { border-right-color: var(--inputborder) !important; } /* ----------------------------------------------------------- 08 confirmation */ .wfm-confirmation-grid #new-application .btn-primary { border-radius: .5rem !important; background-color: var(--altcolor) !important; border-color: var(--altcolor) !important; color: var(--white) !important; transition: ease-in-out .15s; .fas { color: var(--white) !important; } &:hover { opacity: 1 !important; background-color: var(--accentcolor) !important; border-color: var(--accentcolor) !important; color: var(--black) !important; .fas { color: var(--black) !important; } } } #new-application h3.text-bottom-border { font-size: 1.2rem; font-weight: 600; border-bottom: 1px solid; border-color: #004f7180; margin-bottom: 1rem; } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 98 mobile */ .wf-pm-mobile-open .fas { color: var(--navcolor) !important; } .wf-pm-mobile-close .far { color: var(--accentcolor) !important; } .wf-pm-mobile-step-circle { background-color: var(--navdisabled) !important; } .wf-pm-mobile-step-label, .wf-pm-mobile-progress-number { color: var(--white) !important; } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 99 queries */ @media screen and (max-width: 768px) { #wf-row-identcards { grid-template-columns: 1fr; gap: 0; .mb-2 img { margin: auto; } } .mcu-hero__media { aspect-ratio: auto; height: 100%; min-height: 400px; } .mcu-hero__content { padding: 36px 44px; max-width: 520px; } } /* -----------------------------------------------------------++++++++++++++++++++++++++++++++ 02 add products */ /* these styles are onlyl for the v1 layout and will only work once a link to the custom stylesheet is added to the v1 layout. they currently reside in the custom contact widget */ html:has(.wf-breadcrumb) { background-image: none !important; #full-height-container>.row:nth-child(1) .col-12:nth-child(1) { background-color: #084e6f; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } .wf-breadcrumb li.active { background-color: #64b24e; color: black; span { color: black; } } #full-height-container { .dropdown-menu { background: white; } .btn-primary { background-color: #64b24e; color: black; span { color: black; } } .review-box-wrapper .col-12, .review-box-border .col-12, .div-box-border .col-12, .membership-product-details-wrapper .col-12, .product-details-item .col-12, .modal-body, .modal-body, .col-12, #wf-funding-row .col-12, #wf-funding-box .col-12, #wf-submit-buttons .col-12 { background-color: white; } } .product-details-heading, .product-details-label { color: black; } .wf-modal-content-wrapper { background-color: white; } #mfa-modal { .modal-header { background-color: #004f71; color: white; } #mfa-close { color: white; } .modal-body { background-color: white; } .wf-btn-wrapper .text-danger { color: #008264 !important; } #mfa-submit-btn, #mfa-failure .btn-modal { background-color: #008264; border-color: #008264; color: white; } #mfa-submit-btn:hover, #mfa-failure .btn-modal:hover { background-color: #61b154; border-color: #61b154; color: black; } } } ol.wf-breadcrumb { margin-top: 1rem; } ol.wf-breadcrumb li.active.selected { background: #c4ccd3; }