:root {
--break-enormous-static: 128px;
--break-huge-static: 96px;
--break-large-static: 64px;
--break-ample-static: 48px;
--break-significant-static: 32px;
--break-increased-static: 24px;
--break-default-static: 16px;
--break-decreased-static: 12px;
--break-modest-static: 8px;
--break-small-static: 4px;
--break-tiny-static: 2px;
--break-enormous: 128px;
--break-huge: 96px;
--break-large: 64px;
--break-ample: 48px;
--break-significant: 32px;
--break-increased: 24px;
--break-default: 16px;
--break-decreased: 12px;
--break-modest: 8px;
--break-small: 4px;
--break-tiny: 2px;
--grey-248: rgb(248, 248, 248);
--ultraLightGrey: rgb(240, 240, 240);
--grey-224: rgb(224, 224, 224);
--grey-208:rgb(208, 208, 208);
--lightGrey: rgb(192, 192, 192);
--grey-176: rgb(176, 176, 176);
--grey-160: rgb(160, 160, 160);
--grey-144:rgb(144, 144, 144);
--midGrey: rgb(128, 128, 128);
--grey-112: rgb(112, 112, 112);
--grey-96: rgb(96, 96, 96);
--grey-80: rgb(80, 80, 80);
--darkGrey: rgb(64, 64, 64);
--grey-48: rgb(48, 48, 48);
--grey-32: rgb(32, 32, 32);
--ultraDarkGrey: rgb(16, 16, 16);
--blue-bright: rgb(0, 128, 255);
--blue-bright-active: rgb(0, 115, 230);
--blue-bright-hover: rgb(26, 140, 255);
--blue-bright-halo-hover: hsl(210, 100%, 65%);
--blue-deep: rgb(14, 72, 139);
--blue-deep-active: rgb(9, 48, 93);
--blue-deep-hover: rgb(18, 96, 186);
--blue-mist: rgb(250, 250, 255);
--blue-mist-deep: rgb(240, 240, 255);
--gold: rgb(255, 179, 15);
--gold-accent: rgb(253, 237, 205);
--gold-headline-background: rgb(255, 195, 66);
--gold-hover: rgb(255, 187, 41);
--gold-cart-hover: rgb(251, 208, 121);
--green: rgb(0, 148, 0);
--green-active: rgb(0, 122, 0);
--green-hover: rgb(0, 173, 0);
--orange: rgb(255, 128, 0);
--red: rgb(214, 0, 0);
--red-active: rgb(163, 0, 0);
--red-hover: rgb(255, 0, 0);
--red-deep: rgb(139, 18, 14);
--red-deep-active: rgb(93, 12, 9);
--red-deep-hover: rgb(186, 24, 18);
--red-background-error: rgb(255, 214, 214);
--red-bright: rgb(203, 16, 20);
--yellow-mist: rgb(255, 255, 242);
--account-background: rgb(240, 240, 244);
--screen-cover-dark: rgba(0, 0, 0, .75);
--screen-cover-light: rgba(0, 0, 0, .25);
--grey-background: var(--ultraLightGrey);
--interface-base-color: var(--ultraDarkGrey);
--interface-base-color-hover: var(--darkGrey);
--interface-base-color-ripple: var(--midGrey);
--interface-base-color-content: var(--grey-224);
--interface-base-color-content-hover: white;
--font-size-large-static: 40px;
--font-size-significant-static: 32px;
--font-size-increased-static: 24px;
--font-size-default-static: 20px;
--font-size-decreased-static: 16px;
--font-size-modest-static: 12px;
--font-size-small-static: 8px;
--font-size-large: 40px;
--font-size-significant: 32px;
--font-size-increased: 24px;
--font-size-default: 20px;
--font-size-decreased: 16px;
--font-size-modest: 12px;
--font-size-small: 8px;
--font-color-default: var(--darkGrey);
--font-color-dim: var(--grey-96);
--font-color-light: var(--lightGrey);
--font-color-branded: var(--gold);
--font-color-link: var(--blue-deep);
--font-weight-bold: 900;
--font-weight-standard: 400;
--font-weight-light: 100;
--border-size-default: 1px;
--border-size-thick: 2px;
--border-size-extra-thick: 4px;
--border-style-default: solid;
--border-radius-large: 16px;
--border-radius-default: 8px;
--border-radius-small: 4px;
--border-radius-tiny: 2px;
--border-radius-micro: 1px;
--border-clear: var(--border-size-default) var(--border-style-default) transparent;
--border-ultraLight: var(--border-size-default) var(--border-style-default) var(--ultraLightGrey);
--border-light: var(--border-size-default) var(--border-style-default) var(--lightGrey);
--border-mid: var(--border-size-default) var(--border-style-default) var(--midGrey);
--border-dark: var(--border-size-default) var(--border-style-default) var(--grey-32);
--border-active: var(--border-size-default) var(--border-style-default) var(--blue-deep);
--border-beforeCart: var(--border-size-thick) var(--border-style-default) var(--lightGrey);
--border-blue-thick: var(--border-size-thick) var(--border-style-default) var(--blue-deep);
--border-blue-bright-thick: var(--border-size-thick) var(--border-style-default) var(--blue-bright);
--border-clear-thick: var(--border-size-thick) var(--border-style-default) transparent;
--border-dark-thick: var(--border-size-thick) var(--border-style-default) var(--grey-32);
--border-grey-224-thick: var(--border-size-thick) var(--border-style-default) var(--grey-224);
--border-light-thick: var(--border-size-thick) var(--border-style-default) var(--lightGrey);
--border-mid-thick: var(--border-size-thick) var(--border-style-default) var(--midGrey);
--border-red-thick: var(--border-size-thick) var(--border-style-default) var(--red);
--border-ultra-dark-thick: var(--border-size-thick) var(--border-style-default) var(--interface-base-color);
--border-light-extra-thick: var(--border-size-extra-thick) var(--border-style-default) var(--lightGrey);
--border-blue: var(--border-size-default) var(--border-style-default) var(--blue-deep);
--border-green: var(--border-size-default) var(--border-style-default) var(--green);
--border-red: var(--border-size-default) var(--border-style-default) var(--red);
--border-white: var(--border-size-default) var(--border-style-default) white;
--border-white-thick: var(--border-size-thick) var(--border-style-default) white;
--border-gold-thick: var(--border-size-thick) var(--border-style-default) var(--gold);
--border-green-thick: var(--border-size-thick) var(--border-style-default) var(--green);
--outline-black-thick: var(--border-size-thick) var(--border-style-default) black;
--outline-blue-thick: var(--border-size-thick) var(--border-style-default) var(--blue-deep);
--outline-focus: var(--border-size-thick) var(--border-style-default) var(--blue-deep-active);
--shadow-size-small: 2px;
--shadow-size-default: 4px;
--shadow-size-large: 8px;
--shadow: 0 0 var(--shadow-size-default) var(--shadow-size-default) rgba(0, 0, 0, .2);
--shadow-down: 0 var(--shadow-size-default) var(--shadow-size-default) var(--shadow-size-default) rgba(0, 0, 0, .2);
--shadow-down-clear: 0 var(--shadow-size-default) var(--shadow-size-default) var(--shadow-size-default) rgba(0, 0, 0, 0);
--shadow-down-small: 0 var(--shadow-size-small) var(--shadow-size-small) var(--shadow-size-small) rgba(0, 0, 0, .2);
--shadow-down-small-clear: 0 var(--shadow-size-small) var(--shadow-size-small) var(--shadow-size-small) rgba(0, 0, 0, 0);
--shadow-left: -4px 0 4px rgba(0, 0, 0, .4);
--shadow-soft: 0 0 var(--shadow-size-default) var(--shadow-size-default) rgba(0, 0, 0, .1);
--shadow-right: var(--shadow-size-default) 0 var(--shadow-size-default) var(--shadow-size-default) rgba(0, 0, 0, .2);
--shadow-listing: 2px 4px 6px rgba(0, 0, 0, .1);
--shadow-listing-selected: 2px 4px 6px rgba(0, 0, 0, .5);
--shadow-blue: 0 0 var(--shadow-size-default) var(--shadow-size-default) rgba(14, 72, 139, .2);
--transition-timing-function-default: ease-in-out;
--transition-ultra-fast: 50ms;
--transition-fast: 100ms;
--transition-medium: 300ms;
--transition-ultraSlow: 1500ms;
--size-processing-default: 50px;
--size-processing-spinning-border: 16px;
--cart-tab-width: 90px;
--cart-tab-height: 70px;
--control-tab-length: 100px;
--control-tab-width: -20px;
--filter-width: 440px;
--navigation-height: 78px;
--navigation-top-row: 80px;
--resultsColumn-main-start: 140px;
--screen-width-standard: 1200px;
--screen-width-narrow: 600px;
--icon-arrow-down: url('data:image/svg+xml;utf8, ');
--icon-arrow-left: url('data:image/svg+xml;utf8, ');
--icon-arrow-right: url('data:image/svg+xml;utf8, ');
--icon-arrow-up: url('data:image/svg+xml;utf8, ');
--icon-arrow-down-blue: url('data:image/svg+xml;utf8, ');
--icon-arrow-left-blue: url('data:image/svg+xml;utf8, ');
--icon-arrow-right-blue: url('data:image/svg+xml;utf8, ');
--icon-arrow-up-blue: url('data:image/svg+xml;utf8, ');
--icon-arrow-down-black: url('data:image/svg+xml;utf8, ');
--icon-arrow-left-black: url('data:image/svg+xml;utf8, ');
--icon-arrow-right-black: url('data:image/svg+xml;utf8, ');
--icon-arrow-up-black: url('data:image/svg+xml;utf8, ');
--icon-checkbox-blue: url('data:image/svg+xml;utf8, ');
--icon-checkbox-blue-hover: url('data:image/svg+xml;utf8, ');
--icon-checkbox-blue-active: url('data:image/svg+xml;utf8, ');
--icon-checkbox-green: url('data:image/svg+xml;utf8, ');
--icon-checkbox-green-active: url('data:image/svg+xml;utf8, ');
--icon-checkbox-green-hover: url('data:image/svg+xml;utf8, ');
--icon-checkbox-red: url('data:image/svg+xml;utf8, ');
--icon-checkbox-red-deep: url('data:image/svg+xml;utf8, ');
--icon-checkbox-red-deep-active: url('data:image/svg+xml;utf8, ');
--icon-checkbox-red-deep-hover: url('data:image/svg+xml;utf8, ');
--icon-shopping-cart-black: url('data:image/svg+xml;utf8, ');
--icon-shopping-cart-gold: url('data:image/svg+xml;utf8, ');
--map-marker-default: url('data:image/svg+xml;utf8, ');
--map-marker-selected: url('data:image/svg+xml;utf8, ');
}
.displayWidth {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
z-index: 10000;
width: 70px;
height: 25px;
font-size: 20px;
color: yellow;
background-color: rgb(128, 128, 128);
}
@media all and (min-width: 800px) and (max-width: 1199px) {
.displayWidth {
background-color: rgb(96, 96, 96);
}
}
@media all and (min-width: 600px) and (max-width: 799px) {
.displayWidth {
background-color: rgb(64, 64, 64);
}
}
@media all and (min-width: 1px) and (max-width: 599px) {
.displayWidth {
background-color: rgb(32, 32, 32);
}
}
/* Tags */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font: inherit;
}
*::file-selector-button,
body {
font-family: 'Roboto Condensed', system-ui, sans-serif;
font-display: swap;
-webkit-font-smoothing: antialiased;
color: var(--font-color-default);
}
*::file-selector-button {
max-width: 100%;
}
*::file-selector-button,
.--button {
cursor: pointer;
user-select: none;
}
img,
picture,
svg {
display: block;
max-width: 100%;
}
form {
font-size: 0;
}
input {
min-width: 0; /* input elements have a min width set by browser. */
}
input[type="checkbox"],
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
cursor: pointer;
background-color: white;
border: var(--border-mid);
}
input[type="checkbox"] {
border-radius: var(--border-radius-small);
}
input[type="radio"] {
border-radius: 50%;
}
input:-webkit-autofill {
-webkit-background-clip: text;
}
/* Animations */
.cover {
position: fixed;
inset: 0;
pointer-events: none;
}
.cover.--decisionBox,
.cover.--navigation,
.cover.--searchFilter {
opacity: 0;
transition-property: opacity;
}
.cover.--processing {
background-color: transparent;
transition-property: background-color;
}
.cover.--decisionBox,
.cover.--processing {
display: flex;
justify-content: center;
align-items: center;
}
.cover.--decisionBox {
z-index: 10;
}
.cover.--processing {
z-index: 100;
}
.cover.--navigation {
z-index: 200;
}
.cover.--searchFilter {
z-index: 300;
}
.cover.--decisionBox,
.cover.--navigation,
.cover.--searchFilter {
background-color: var(--screen-cover-dark);
}
.cover.--decisionBox.--active,
.cover.--navigation.--active,
.cover.--searchFilter.--active {
opacity: 1;
pointer-events: auto;
}
.cover.--processing.--active {
background-color: var(--screen-cover-light);
transition-delay: 0s;
}
.processing__checkmark,
.processing__successCircle {
display: flex;
justify-content: center;
align-items: center;
}
.processing__checkmark,
.processing__spinning {
position: absolute;
}
.processing__checkmark {
z-index: 130;
}
.processing__checkmark__shadow,
.processing__checkmark__top {
display: flex;
justify-content: center;
align-items: center;
mask-image: url(../images/mask-square.svg);
mask-position: calc(-1 * (var(--size-processing-default) + var(--size-processing-spinning-border))) 0;
mask-size: calc(var(--size-processing-default) + var(--size-processing-spinning-border)) auto;
mask-repeat: no-repeat;
transition-property: mask-position;
}
.processing__checkmark__top {
position: absolute;
z-index: 1120;
}
.processing__checkmark__shadow {
position: relative;
z-index: 1110;
top: .125rem;
right: -.125rem;
opacity: .4;
}
.processing__checkmark__shadow > img,
.processing__checkmark__top > img {
width: calc(.6 * (var(--size-processing-default) + var(--size-processing-spinning-border)));
}
.processing__successCircle,
.processing__spinning {
aspect-ratio: 1;
opacity: 0;
width: var(--size-processing-default);
border-radius: 50%;
}
.processing__successCircle {
position: relative;
z-index: 120;
background-color: var(--green);
transition-property: opacity, width;
}
.processing__spinning {
z-index: 110;
border-color: var(--blue-deep);
border-style: solid;
border-width: .5rem;
animation: savingOne 0.8s infinite linear alternate, savingTwo 1.6s infinite linear;
transition-property: opacity;
}
.processing__checkmark__shadow.--active,
.processing__checkmark__top.--active {
mask-position: 0px 0px;
transition-property: mask-position;
transition-delay: var(--transition-medium);
}
.processing__successCircle.--active,
.processing__spinning.--active {
opacity: 1;
}
.processing__successCircle.--active {
width: calc(var(--size-processing-default) + var(--size-processing-spinning-border));
transition-delay: 0s;
}
.input__animationAuxiliary {
display: flex;
justify-content: center;
position: relative;
}
.animation__processing {
position: absolute;
z-index: 10;
width: 3.125rem;
aspect-ratio: 1;
border-radius: 50%;
border-color: var(--blue-deep);
border-style: solid;
border-width: .5rem;
opacity: 0;
animation: savingOne 0.8s infinite linear alternate, savingTwo 1.6s infinite linear;
transition-property: opacity;
}
.animation__processing.--aux {
bottom: 2.5rem;
}
.animation__processing.--active {
opacity: 1;
}
.animation__ripple__darkInterface {
position: absolute;
z-index: 10;
border-radius: 50%;
animation: .35s ease-out ripple;
animation-fill-mode: forwards;
opacity: 1;
transform: scale(1);
}
.animation__ripple__darkInterface {
background-color: var(--interface-base-color-ripple);
}
@keyframes leftMarkerHighlight {
0% {
transform: scale(1, 1);
opacity: 1;
}
100% {
transform: scale(1.5, 1.5);
opacity: 0;
}
}
@keyframes mapMarkerHighlight {
0% {
transform: scale(1, 1);
opacity: 1;
}
100% {
transform: scale(1.25, 1.25);
opacity: 0;
}
}
@keyframes ripple {
100% {
transform: scale(100);
opacity: 0;
}
}
@keyframes savingOne {
0% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%) }
12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%) }
25% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%) }
50% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%) }
62.5% { clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%) }
75% { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%) }
100% { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%) }
}
@keyframes savingTwo {
0% { transform: scaleY(1) rotate(0deg) }
49.99% { transform: scaleY(1) rotate(135deg) }
50% { transform: scaleY(-1) rotate(0deg) }
100% { transform: scaleY(-1) rotate(-135deg) }
}
/* Auxiliary */
.aux__main,
.modal,
.modal__decisionBox {
border: var(--border-white-thick);
}
.aux__main,
.modal,
.modal__decisionBox {
outline: var(--outline-black-thick);
}
.account__headline,
.aux__main__headlineBlock,
.modal__headlineBlock {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--break-default);
padding: var(--break-default);
text-align: center;
}
.account__headline,
.aux__main__headlineBlock,
.cart__header,
.modal__headlineBlock {
background-color: var(--interface-base-color);
}
.account__headline.--first,
.modal__headlineBlock {
border-top-right-radius: calc(var(--border-radius-default) - 2px);
border-top-left-radius: calc(var(--border-radius-default) - 2px);
}
.account__headline,
.modal__headlineBlock {
height: 80px;
}
.account_belowDetails {
display: flex;
gap: var(--break-default);
margin-bottom: var(--break-large);
padding: 0 var(--break-default) 0;
}
.account__belowDetails__container {
flex-basis: 50%;
padding: var(--break-default);
background-color: var(--darkGrey);
background-color: var(--interface-base-color);
}
.account__belowDetails__headlineWrapper {
display: flex;
align-items: center;
gap: var(--break-default);
}
.account__belowDetails_list {
margin-left: var(--break-default);
}
.account__belowDetails_list li {
margin-bottom: var(--break-modest);
}
.account__belowDetails__body {
display: none;
color: white;
}
.account__belowDetails__body.--active {
display: list-item;
}
.account__belowDetails__headlineWrapper {
margin-bottom: var(--break-decreased);
}
.account__belowDetails__headline {
color: var(--gold);
}
.aux__main__headlineBlock__headline,
.modal__headlineBlock__headline {
text-align: center;
}
.aux {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
background-color: var(--midGrey);
}
.aux.--success {
background-color: var(--blue-mist);
}
.aux__main {
margin: var(--break-significant) auto var(--break-large);
width: var(--screen-width-narrow);
background-color: white;
border-radius: var(--border-radius-default);
}
.aux__main.--success {
outline: var(--outline-blue-thick);
}
.aux__main__headlineBlock {
min-height: 80px;
border-top-right-radius: var(--border-radius-default);
border-top-left-radius: var(--border-radius-default);
}
.aux__main__headlineBlock.--success {
background-color: var(--blue-deep);
}
.aux__main__headlineBlock__headline {
display: none;
color: var(--gold);
}
.aux__main__headlineBlock__headline.--active {
display: block;
}
.aux__main__headlineBlock__headline.--success {
color: white;
}
.aux__main__contentBlock {
margin: var(--break-default);
padding: var(--break-default);
min-height: 240px;
background-color: var(--ultraLightGrey);
border-radius: var(--border-radius-default);
}
.aux__main__contentBlock.--withInputFields {
margin: 0;
padding: var(--break-large) var(--break-significant);
background-color: transparent;
border-radius: 0;
}
.aux__main__contentBlock__headline {
margin: 0 0 var(--break-default);
text-align: center;
}
/* Branding */
.logo__link {
display: flex;
align-items: center;
}
.logo__header {
width: 400px
}
.logo__mapSearch {
height: 50px;
}
.aux__logo,
.aux__logoOffset,
.bw__logo,
.header__icon {
aspect-ratio: 1/1;
}
.bw__logo {
width: 80px;
}
.aux__logo,
.aux__logoOffset {
width: 40px;
}
.header__icon {
width: 60px;
}
.copyright__footer,
.copyright__modal,
.homepage__resultsColumn__main__copyright__text {
color: var(--font-color-dim);
}
.copyright__footer {
flex-shrink: 1;
text-align: center;
}
.copyright__modal {
margin: var(--break-significant) 0 var(--break-small);
text-align: right;
}
/* Error */
.input__error {
display: none;
margin: 0 0 var(--break-increased);
background-color: var(--red-background-error);
}
.input__error.--nationalVendorsList {
margin: 0;
}
.input__error.--embedded {
margin: var(--break-modest) 0 var(--break-default);
}
.input__error.--account {
margin-top: var(--break-default);
}
.input__error.--mapSearch {
margin: 0;
max-width: 35vw;
border: var(--border-red);
box-shadow: var(--shadow-down);
pointer-events: auto;
vertical-align: top;
}
.input__error.--account-notLast {
margin-top: var(--break-decreased);
margin-bottom: var(--break-default);
}
.input__error.--break-large-stable {
margin-bottom: var(--break-large);
}
.input__error.--active {
display: flex;
}
.input__error.--mapSearch.--active {
display: inline-flex;
}
.input__error.--active.--nationalVendorsList {
display: none;
}
.input__error.--decisionBox {
margin: var(--break-default);
}
.input__error__closePanel {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 0;
flex-shrink: 0;
width: 32px;
background-color: var(--red);
cursor: pointer;
}
.input__error__message {
padding: var(--break-modest);
color: var(--red);
}
/* Font */
.pageHeadline {
font-size: var(--font-size-large-static);
}
.account__headline,
.cart__headline,
.cart__total,
.news__item__headline {
font-size: var(--font-size-large);
}
.aux__main__headlineBlock__headline,
.homepage__filter__main__panel__headline,
.input__button__text,
.modal__headlineBlock__headline {
font-size: var(--font-size-significant-static);
}
.account__unit__displayValue__text,
.account__unit__field,
.account__unit__headline__title,
.account__unit__subHeadline,
.aux__main__contentBlock__headline,
.cart__item__text,
.cart__subHeadline__text,
.cart__total,
.checkbox__label.--account,
.checkbox__unit__account__upgrade__text__price,
.input__unit__password__field.--largeSize,
.modal__decisionBox__headline__title,
.modal__decisionBox__valueText,
.select__unit__account,
.topMessage__text,
.vendorResult__headline {
font-size: var(--font-size-significant);
}
.bodyLeader,
.homepage__resultsColumn__main__listing__header__text,
.input__bodyText,
.input__unit__field,
.input__unit__password__field,
.mapPage__searchPanel__topColumns__columnOne__headline,
.mapPage__searchPanel__topColumns__columnOne__zip__input,
.navigation__unit__largeText {
font-size: var(--font-size-increased-static);
}
.account__belowDetails__headline,
.account__unit__body,
.account__unit__fileUpload,
.cart__item__text,
.cart__subHeadline__text,
.input__button__text.--shoppingCart,
.input__passwordMatch__label.--largeSize,
.input__unit__label.--largeSize,
.modal__decisionBox__button,
.modal__decisionBox__subHeadline,
.modal__decisionBox__subInstructions,
.news__item__bodyText,
.news__item__quoteText,
.news__item__submittedBy,
.news__unit__description,
.vendorResult__row__column__text,
.vendorResult__servicesHeadline {
font-size: var(--font-size-increased);
}
.account__unit__bottom__section__button,
.account__unit__bottom__section__info__text,
.bodyText,
.checkbox__label,
.dateSubHeadline,
.homepage__resultsColumn__noResults,
.homepage__searchPanel__topColumns__columnTwo__filter__text,
.homepage__filter__main__panel__checkboxes__unit__checkbox__label,
.homepage__filter__main__panel__clear__button__text,
.input__unit__label,
.modal__message,
.navigation__unit__standardText,
.unorderedList {
font-size: var(--font-size-default-static);
}
.account__unit__headlineInstructions,
.aux__main__contentBlock__text,
.cart__links__text,
.checkbox__unit__account__upgrade__button,
.checkbox__unit__account__upgrade__text,
.input__button__text.--shoppingCart,
.input__passwordMatch__label,
.modal__contentBlock__main__textIconBlock__text,
.news__img__caption,
.news__item__miniTitle,
.news__item__publishedOn {
font-size: var(--font-size-default);
}
.account__belowDetails__body,
.account__unit__headline__bubble,
.input__error__message,
.navigation__unit__subText,
.standardFooter__internal__bottom__recaptcha,
.standardFooter__internal__privacyTerms__activeUnit,
.standardFooter__internal__privacyTerms__unit,
.standardFooter__internal__twoColumns__links__activeUnit,
.standardFooter__internal__twoColumns__links__unit {
font-size: var(--font-size-decreased-static);
}
.cart__links__text,
.news__unit__date,
.shoppingCart__items__count {
font-size: var(--font-size-decreased);
}
.copyright__footer,
.copyright__modal,
.homepage__resultsColumn__main__copyright__text {
font-size: var(--font-size-small-static);
}
.--bold,
.account__belowDetails__headline__emphasis,
.account__unit__headline__title,
.aux__main__contentBlock__headline,
.cart__headline,
.cart__subHeadline__text,
.checkbox__unit__account__upgrade__text__date,
.checkbox__unit__account__upgrade__text__price,
.homepage__filter__main__panel__headline,
.input__unit__label,
.input__passwordMatch__label,
.mapPage__searchPanel__topColumns__columnOne__headline,
.modal__decisionBox__headline__title,
.news__item__headline,
.news__item__publishedOn,
.news__item__submittedBy,
.pageHeadline,
.shoppingCart__items__count,
.vendorResult__headline,
.vendorResult__servicesHeadline {
font-weight: var(--font-weight-bold);
}
.aux__main__headlineBlock__headline,
body,
.input__unit__label.--largeSize {
font-weight: var(--font-weight-standard);
}
.standardFooter__internal__bottom__recaptcha {
font-weight: var(--font-weight-light);
}
.news__item__quoteText {
font-style: italic;
}
/* Footer */
.standardFooter {
display: flex;
justify-content: center;
background-color: var(--interface-base-color);
}
.standardFooter__internal {
margin: 0 var(--break-significant);
padding: var(--break-large) 0 var(--break-modest);
width: var(--screen-width-standard);
}
.standardFooter__internal__twoColumns {
display: flex;
justify-content: space-between;
margin-bottom: var(--break-large);
}
.standardFooter__internal__twoColumns__links {
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: var(--break-default);
}
.standardFooter__internal__twoColumns__links__unit,
.standardFooter__internal__privacyTerms__unit {
color: var(--font-color-light);
}
.standardFooter__internal__twoColumns__links__activeUnit,
.standardFooter__internal__privacyTerms__activeUnit {
color: var(--font-color-branded);
}
.standardFooter__internal__twoColumns__links__activeUnit {
color: var(--font-color-branded);
}
.standardFooter__internal__twoColumns__logos {
display: flex;
flex-direction: column;
row-gap: var(--break-significant);
}
.standardFooter__internal__privacyTerms {
display: flex;
flex-wrap: wrap;
gap: var(--break-default);
margin-bottom: var(--break-large);
text-align: center;
}
.standardFooter__internal__bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: var(--break-large);
}
.standardFooter__internal__bottom__recaptcha {
color: var(--font-color-light);
}
.standardFooter__internal__twoColumns__links__activeUnit,
.standardFooter__internal__privacyTerms__activeUnit {
color: var(--font-color-branded);
}
/* Forms */
.checkbox__unit {
display: flex;
align-items: center;
}
.checkbox {
flex-shrink: 0;
margin: 0 var(--break-default) 0 0;
padding: 0;
width: 32px;
aspect-ratio: 1/1;
border-radius: var(--border-radius-default) !important;
}
.checkbox.--checkboxUpgradeDefault {
margin: 0;
}
.checkbox.--account.--active {
border: var(--border-mid);
background-color: var(--blue-mist);
}
.checkbox:checked {
background-image: var(--icon-checkbox-blue);
border: var(--border-blue);
}
.checkbox.--account:checked {
background-image: var(--icon-checkbox-green);
border: var(--border-green);
}
.checkbox.--account.--deactivated:checked {
background-image: var(--icon-checkbox-red-deep);
border: var(--border-red);
}
.checkbox__label {
cursor: pointer;
}
.checkbox__label.--account {
color: var(--grey-160);
}
.checkbox__label.--account.--active,
.checkbox__label.--account.--checkboxSelected {
color: var(--font-color-default);
}
.input__hidden {
display: none;
}
.input__unit,
.input__bodyText {
margin-bottom: var(--break-significant);
}
.input__bodyText.--beforeIcon {
margin-bottom: var(--break-enormous);
}
.importantMarker__bodyText {
padding: 0 var(--break-modest);
background-color: var(--darkGrey);
color: white;
font-weight: var(--font-weight-bold);
}
.input__unit {
display: flex;
flex-direction: column;
}
.input__unit.--largeBreak {
margin-bottom: var(--break-large);
}
.input__unit__label {
display: block;
padding: 0 0 var(--break-modest) 0;
}
.account__unit__displayValue__text,
.account__unit__field,
.input__unit__field,
.input__unit__password__field,
.modal__decisionBox__valueText {
padding: var(--break-modest);
}
.input__unit__field,
.input__unit__password {
border: var(--border-light);
}
.account__unit__displayValue,
.account__unit__field,
.account__unit__fileUpload,
.select__unit__container {
display: none;
}
.account__unit__displayValue__text,
.account__unit__field,
.account__unit__fileUpload,
.select__unit__account {
max-width: 100%;
cursor: pointer;
}
.account__unit__image {
cursor: pointer;
}
.account__unit__fileUpload {
margin-top: var(--break-significant);
outline: none;
}
.account__unit__displayValue.--active,
.account__unit__field.--visible {
display: block;
}
.account__unit__field,
.select__unit__account {
border: var(--border-light);
outline: var(--border-clear);
}
.select__unit__container {
position: relative;
}
.select__unit__container.--active {
display: inline-flex;
}
.select__unit__account {
padding: var(--break-modest) var(--break-modest) var(--break-modest) var(--break-small);
}
.select__unit__account__activationButton {
display: none;
position: absolute;
inset: 0;
z-index: 10;
cursor: pointer;
}
.checkbox__unit__account.--checkboxUpgradeNative {
flex-direction: column;
}
.checkbox__unit__account.--checkboxUpgradeDefault.--active,
.checkbox__unit__account.--checkboxUpgradeNative {
display: flex;
gap: var(--break-default);
padding: var(--break-modest) 0 0 var(--break-modest);
border-radius: var(--border-radius-default);
}
.checkbox__unit__account.--checkboxUpgradeDefault {
align-items: center;
}
.checkbox__unit__account.--checkboxUpgradeDefault.--active {
margin: var(--break-increased) 0 0 var(--break-default);
padding-bottom: var(--break-modest);
width: 65%;
}
.checkbox__unit__account.--checkboxUpgradeNative.--active {
padding-bottom: var(--break-decreased);
}
.checkbox__unit__account.--checkboxUpgradeDefault.--active,
.checkbox__unit__account.--checkboxUpgradeNative.--active {
background-color: var(--grey-background);
outline: var(--border-beforeCart);
}
.checkbox__unit__account.--checkboxUpgradeDefault:not(.--active):has(.--expiration.--active),
.checkbox__unit__account.--checkboxUpgradeNative:not(.--active):has(.--expiration.--active) {
margin-bottom: var(--break-default);
}
.checkbox__unit__account.--checkboxUpgradeNative.--active:last-child {
margin-bottom: 0;
}
.checkbox__unit__account__inputContainer {
display: flex;
align-items: center;
position: relative;
}
.checkbox__unit__account__inputContainer.--checkboxUpgradeDefault {
display: none;
}
.checkbox__unit__account__inputContainer.--checkboxUpgradeDefault.--active {
display: flex;
}
.checkbox__unit__account__inputContainer__checkboxWrapper {
display: flex;
align-items: center;
position: relative;
}
.checkbox__unit__account__inputContainer__cover {
position: absolute;
z-index: 20;
inset: 0;
background-color: transparent;
pointer-events: none;
}
.checkbox__unit__account__inputContainer__cover.--active {
cursor: pointer;
pointer-events: all;
}
.checkbox__unit__account__inputContainer__cover.--changeStateCover {
z-index: 10;
}
.select__unit__account__activationButton.--active {
display: block;
}
.account__unit__displayValue__text {
display: inline-block;
border: var(--border-clear);
}
.account__unit__field.--textArea {
width: 100%;
min-height: 100px;
field-sizing: content;
resize: none;
}
.account__unit__field.--active,
.input__unit__password__field.--largeSize.--active,
.select__unit__account.--active {
background-color: var(--blue-mist);
border: var(--border-active);
cursor: auto;
}
.account__unit__fileUpload.--active {
display: block;
}
.input__unit__password {
display: flex;
align-items: center;
position: relative;
}
.input__unit__password.--largeSize {
width: 448px;
}
.input__unit__password__field {
flex-grow: 1;
max-width: 100%;
border: none;
}
.input__unit__password__eye {
box-sizing: content-box;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
inset: 0 0 0 auto;
padding: 0 var(--break-modest);
cursor: pointer;
}
.input__unit__password__eye__image {
display: none;
width: 36px;
user-select: none;
}
.input__unit__password__eye__image.--largeSize {
width: 40px;
}
.input__unit__password__eye__image.--active {
display: block;
}
.input__passwordMatch {
padding-left: var(--break-modest);
height: 1.5rem;
}
.input__passwordMatch.--largeSize {
height: 1.75rem;
}
.input__passwordMatch__label,
.input__passwordMatch__checkmark {
display: none;
}
.input__passwordMatch__label.--active,
.input__passwordMatch__checkmark.--active {
display: block;
}
.input__passwordMatch {
display: flex;
align-items: center;
gap: var(--break-modest);
margin: var(--break-modest) 0 0 0;
}
.input__passwordMatch__label {
padding: 0;
color: var(--green);
}
.input__passwordMatch__checkmark {
width: 1.25rem;
height: 1.25rem;
background-image: var(--icon-checkbox-green);
background-size: contain;
background-repeat: no-repeat;
border-radius: var(--border-radius-small);
}
.checkbox__unit__account__upgrade__text {
display: none;
}
.checkbox__unit__account__upgrade__text.--active {
display: block;
}
.checkbox__unit__account__upgrade__text.--price {
position: relative;
top: .25rem;
}
.checkbox__unit__account__upgrade__buttonContainer,
.checkbox__unit__account__upgrade__text.--expiration {
margin-right: var(--break-increased);
}
.checkbox__unit__account__upgrade__buttonContainer {
display: none;
align-items: center;
margin-left: var(--break-increased);
padding: var(--break-modest);
gap: var(--break-default);
background-color: white;
border: var(--border-light);
border-radius: var(--border-radius-default);
}
.checkbox__unit__account__upgrade__text.--expiration {
margin-left: 0;
}
.checkbox__unit__account__upgrade__buttonContainer.--checkboxUpgradeDefault {
margin-left: 0;
}
.account__belowDetails__headline__emphasis,
.checkbox__unit__account__upgrade__text__date,
.checkbox__unit__account__upgrade__text__inactive {
padding: 0 var(--break-modest);
}
.checkbox__unit__account__upgrade__text__date {
color: var(--font-color-default);
background-color: white;
color: white;
background-color: var(--red-deep);
}
.checkbox__unit__account__upgrade__text__inactive {
display: none;
color: white;
background-color: var(--red-deep);
border-left: .0625rem solid white;
}
.checkbox__unit__account__upgrade__text__inactive.--green {
background-color: var(--green);
}
.checkbox__unit__account__upgrade__text__inactive.--red {
background-color: var(--red-deep);
}
.checkbox__unit__account__upgrade__text__inactive.--active {
display: inline;
}
.checkbox__unit__account__upgrade__text__price {
position: relative;
top: -.2rem;
vertical-align: text-top;
}
.account__belowDetails__headline__emphasis {
display: none;
}
.account__belowDetails__headline__emphasis.--active {
display: inline;
}
.account__belowDetails__headline__emphasis.--green,
.account__belowDetails__headline__emphasis.--red,
.checkbox__unit__account__upgrade__text__date.--active {
color: white;
}
.account__belowDetails__headline__emphasis.--green,
.checkbox__unit__account__upgrade__text__date.--active {
background-color: var(--green);
}
.account__belowDetails__headline__emphasis.--red {
background-color: var(--red);
}
.account__belowDetails__headline__emphasis {
white-space: nowrap;
}
.input__button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
background-color: var(--interface-base-color);
border: none;
border-radius: var(--border-radius-large);
cursor: pointer;
overflow: hidden;
}
.input__button.--shoppingCart {
display: none;
margin: 0;
width: 320px;
border-radius: var(--border-radius-large);
}
.input__button.--shoppingCart.--active {
display: flex;
}
.input__button.--searchBox {
margin: 44px 0 60px;
}
.input__button__text {
position: relative;
z-index: 100;
margin: 0;
padding: var(--break-modest) 0;
color: var(--gold);
user-select: none;
}
.input__button__text.--shoppingCart {
padding: var(--break-modest) 0;
}
/* Header */
.header {
display: flex;
justify-content: center;
align-items: center;
padding: var(--break-default) 0;
background-color: var(--interface-base-color);
}
.header__internal {
display: flex;
justify-content: space-between;
align-items: center;
width: var(--screen-width-standard);
}
.header__left,
.header__right {
width: 45px;
}
.header__left.--myAccount,
.header__right.--myAccount {
width: 90px;
}
.header__right {
display: flex;
align-items: center;
}
.header__right.--active {
border: var(--border-mid);
background-color: var(--grey-32);
}
/* Home Page */
.homepage__wrapper {
display: flex;
flex-direction: column;
position: absolute;
inset: 0;
}
.homepage__main {
flex-grow: 1;
position: relative;
width: 100%;
overflow: hidden;
}
.homepage__map {
position: absolute;
z-index: 10;
inset: var(--navigation-top-row) 0 0;
}
/* Home Page - Filter */
.homepage__filter__desktop,
.homepage__filter__mobile,
.homepage__filter__tablet,
.homepage__resultsColumn__desktop,
.homepage__resultsColumn__tablet {
transition-property: left;
}
.homepage__filter__desktop,
.homepage__resultsColumn__desktop {
position: fixed;
background-color: white;
box-shadow: var(--shadow-right);
}
.homepage__filter__desktop {
top: 0;
right: auto;
bottom: 0;
}
.homepage__filter__desktop,
.homepage__filter__mobile,
.homepage__filter__tablet {
z-index: 310;
}
.homepage__filter__desktop {
left: -460px; /* Extra 20 to keep shadow off screen */
width: 440px;
}
.homepage__filter__desktop.--active,
.homepage__filter__mobile.--active,
.homepage__filter__tablet.--active {
left: 0;
}
.homepage__filter__main,
.homepage__resultsColumn__main {
position: absolute;
overflow-y: auto;
}
.homepage__filter__main {
inset: 0;
}
.homepage__filter__main__panel,
.homepage__resultsColumn__main__searchPanel,
.homepage__resultsColumn__noResults {
margin-bottom: var(--break-default-static);
padding: var(--break-default-static);
background-color: var(--blue-mist);
border-bottom: var(--border-light);
}
.homepage__filter__main__panel__headline {
margin: 0 0 var(--break-increased-static);
padding: var(--break-small-static) var(--break-default-static);
color: white;
background-color: var(--blue-deep);
}
.homepage__filter__main__panel__checkboxes {
margin: 0 0 var(--break-modest-static);
}
.homepage__filter__main__panel__clear {
display: flex;
justify-content: flex-end;
}
.homepage__searchPanel__topColumns__columnTwo__filter {
display: flex;
}
.homepage__filter__main__panel__clear__button,
.homepage__searchPanel__topColumns__columnTwo__filter {
padding: var(--break-small-static) var(--break-decreased-static);
background-color: white;
border: var(--border-mid);
border-radius: var(--border-radius-default);
cursor: pointer;
pointer-events: auto;
}
.homepage__filter__main__panel__clear__button__text,
.homepage__searchPanel__topColumns__columnTwo__filter__text {
color: var(--blue-deep);
}
.homepage__filter__control {
display: flex;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: auto;
}
.homepage__searchPanel__topColumns__columnTwo__filter {
display: inline-flex;
align-items: center;
box-shadow: var(--shadow-down-small);
}
.homepage__searchPanel__topColumns__columnTwo__filter__text {
margin-right: var(--break-modest-static);
}
.homepage__searchPanel__topColumns__columnTwo__filter__rightArrow {
width: 10px;
}
/* Home Page - Search */
.mapPage__logoNavRow,
.mapPage__searchPanel__topColumns__columnOne.--closed {
box-shadow: var(--shadow-down);
}
.mapPage__logoNavRow {
position: fixed;
top: 0;
right: 0;
bottom: auto;
left: 0;
z-index: 110;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 var(--break-decreased-static) 0 var(--break-increased-static);
height: var(--navigation-top-row);
background-color: var(--interface-base-color);
}
.mapPage__searchPanel {
position: fixed;
top: calc(var(--navigation-top-row) + var(--break-default-static));
right: 0;
bottom: auto;
left: 0;
z-index: 120;
margin: 0 var(--break-significant-static);
pointer-events: none;
}
.mapPage__searchPanel__topColumns {
display: flex;
align-items: flex-end;
gap: var(--break-increased-static);
margin-bottom: var(--break-default-static);
}
.mapPage__searchPanel__topColumns__columnOne {
width: 476px;
border-radius: var(--border-radius-large);
box-shadow: var(--shadow-down-clear);
pointer-events: auto;
transition-property: box-shadow;
}
.mapPage__searchPanel__topColumns__columnOne__headline {
padding: var(--break-small-static) var(--break-default-static);
color: white;
background-color: var(--blue-deep);
border-top-right-radius: var(--border-radius-large);
border-top-left-radius: var(--border-radius-large);
}
.mapPage__searchPanel__topColumns__columnOne__zip {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 var(--break-modest-static);
background-color: white;
border-right: var(--border-mid);
border-bottom: var(--border-mid);
border-left: var(--border-mid);
border-bottom-right-radius: var(--border-radius-large);
border-bottom-left-radius: var(--border-radius-large);
cursor: pointer;
}
.mapPage__searchPanel__topColumns__columnOne__zip__button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: var(--break-small-static) var(--break-small-static) var(--break-small-static) 0;
}
.mapPage__searchPanel__topColumns__columnOne__zip__button__animation,
.mapPage__searchPanel__topColumns__columnOne__zip__button__icon {
width: 24px;
}
.mapPage__searchPanel__topColumns__columnOne__zip__button__animation {
position: absolute;
z-index: 10;
aspect-ratio: 1;
border-radius: 50%;
border-color: black;
border-style: solid;
border-width: 4px;
opacity: 0;
animation: savingOne 0.8s infinite linear alternate, savingTwo 1.6s infinite linear;
transition-property: opacity;
}
.mapPage__searchPanel__topColumns__columnOne__zip__button__animation.--active {
opacity: 1;
}
.mapPage__searchPanel__topColumns__columnOne__zip__button__icon {
opacity: 0;
transition-property: opacity;
}
.mapPage__searchPanel__topColumns__columnOne__zip__button__icon.--active {
opacity: 1;
}
.mapPage__searchPanel__topColumns__columnOne__zip__input {
flex-grow: 1;
padding: var(--break-decreased-static) var(--break-decreased-static) var(--break-decreased-static) var(--break-small-static);
border: none;
border-top-right-radius: var(--border-radius-large);
border-bottom-right-radius: var(--border-radius-large);
background-color: transparent;
}
.mapPage__searchPanel__topColumns__columnTwo {
padding-bottom: var(--break-modest-static);
}
/* Home Page - Vendor Results */
.vendorResult {
display: none;
position: relative;
margin: 0 var(--break-modest) var(--break-increased) var(--break-modest);
padding: var(--break-default) var(--break-decreased) 0;
scroll-margin: var(--break-modest);
background-color: white;
border: var(--border-grey-224-thick);
border-radius: var(--border-radius-default);
/* overflow: hidden; */
box-shadow: var(--shadow-listing);
}
.vendorResult.--selected {
border: var(--border-dark-thick);
box-shadow: var(--shadow-listing-selected);
}
.vendorResult.--active {
display: block;
}
.vendorResult__flag {
display: none;
/* position: absolute;
inset: -2px auto -2px -2px;
z-index: 10;
width: 6px;
background-color: var(--darkGrey);
border-top-left-radius: var(--border-radius-default);
border-bottom-left-radius: var(--border-radius-default); */
}
.vendorResult.--selected > .vendorResult__flag {
display: block;
}
.vendorResult__break,
.vendorResult__headline,
.vendorResult__row,
.vendorResult__row__singleColumn {
margin-bottom: var(--break-significant);
}
.vendorResult__headline {
padding: var(--break-decreased) var(--break-small) var(--break-small) 0;
}
.vendorResult__row,
.vendorResult__row__singleColumn {
display: flex;
padding: 0 var(--break-small);
}
.vendorResult__row {
gap: var(--break-small);
}
.vendorResult__servicesHeadline {
padding: var(--break-tiny) var(--break-increased) var(--break-tiny) var(--break-small);
}
.vendorResult__contact__icon {
width: 56px;
height: 40px;
padding: 0 var(--break-modest);
}
.vendorResult__contact__icon > img {
width: 40px;
aspect-ratio: 1/1;
}
.vendorResult__row__column,
.vendorResult__row__singleColumn {
flex-direction: column;
gap: var(--break-small);
}
.vendorResult__row__column {
display: flex;
}
.vendorResult__row__column__bullet {
display: flex;
align-items: center;
margin-left: var(--break-small);
}
.vendorResult__row__column__bullet__icon {
width: 8px;
aspect-ratio: 1/1;
margin: 0 var(--break-decreased) 0 0;
}
.vendorResult__break {
margin-right: var(--break-tiny);
margin-left: var(--break-tiny);
border-bottom: var(--border-light);
}
.map__marker {
display: none;
width: 52px;
height: 69px;
cursor: pointer;
background-image: var(--map-marker-default);
background-repeat: no-repeat;
background-size: contain;
transition-property: background-image;
}
.map__marker.--active {
display: block;
}
.map__marker.--selected {
background-image: var(--map-marker-selected);
}
/* Home Page - Results Column */
.homepage__resultsColumn__desktop,
.homepage__resultsColumn__tablet {
top: var(--navigation-top-row);
right: auto;
bottom: 0;
left: 0;
}
.homepage__resultsColumn__desktop,
.homepage__resultsColumn__mobile,
.homepage__resultsColumn__tablet {
display: none;
z-index: 20;
}
.homepage__resultsColumn__desktop.--active,
.homepage__resultsColumn__mobile.--active,
.homepage__resultsColumn__tablet.--active {
display: block;
}
.homepage__resultsColumn__desktop {
width: 520px;
}
.homepage__resultsColumn__desktop.--closed {
left: -520px;
}
.homepage__resultsColumn__tablet.--closed {
left: -400px;
}
.homepage__resultsColumn__main {
top: var(--resultsColumn-main-start);
right: 0;
bottom: 0;
left: 0;
z-index: 10;
}
.homepage__resultsColumn__main__shadow {
position: absolute;
top: calc(var(--resultsColumn-main-start) - 500px);
right: 0;
bottom: auto;
left: 0;
z-index: 20;
height: 500px;
border-bottom: var(--border-clear);
box-shadow: inset var(--shadow-down-clear);
transition-property: border-bottom, box-shadow;
background-color: transparent;
overflow-x: hidden;
clip-path: polygon(0% 0%, 100% 0%, 100% 110%, 0% 110%);
}
.homepage__resultsColumn__main__shadow.--active {
border-bottom: var(--border-mid);
box-shadow: var(--shadow-down);
}
.homepage__resultsColumn__main__listing {
padding: 0 var(--break-modest-static);
}
.homepage__resultsColumn__main__listing__header {
display: flex;
margin: 0 0 var(--break-default) 0;
pointer-events: none;
}
.homepage__resultsColumn__main__listing__header__text {
margin-right: var(--break-modest-static);
}
.homepage__resultsColumn__main__listing__header__information {
width: 20px;
aspect-ratio: 1/1;
cursor: pointer;
pointer-events: auto;
}
.homepage__filter__main__panel__checkboxes__unit {
display: flex;
align-items: center;
margin: var(--break-modest-static);
}
.homepage__filter__main__panel__checkboxes__unit__checkbox {
flex-shrink: 0;
margin: 0 var(--break-small-static) 0 0;
padding: 0;
width: 32px;
aspect-ratio: 1/1;
background-repeat: no-repeat;
background-position: center;
border-radius: var(--border-radius-default) !important;
}
.homepage__filter__main__panel__checkboxes__unit__checkbox__label {
padding: var(--break-tiny-static) var(--break-modest-static);
cursor: pointer;
border: var(--border-clear);
border-radius: var(--border-radius-default);
}
.homepage__filter__main__panel__checkboxes__unit__checkbox:checked {
background-image: var(--icon-checkbox-blue);
border: var(--border-blue);
}
.homepage__filter__main__panel__checkboxes__unit__checkbox:checked + label {
background-color: var(--blue-deep);
color: white;
border: var(--border-blue);
}
.homepage__resultsColumn__results__wrapper {
display: none;
padding: var(--break-default) 0;
background-color: var(--ultraLightGrey);
border-top: var(--border-light-thick);
}
.homepage__resultsColumn__results__wrapper.--active {
display: block;
}
.homepage__resultsColumn__noResults {
padding-bottom: var(--break-modest);
margin: 0 var(--break-modest);
}
.homepage__control__tab {
position: absolute;
z-index: 100;
top: 50%;
right: -20px;
left: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
background-color: white;
border: var(--border-light);
border-top-right-radius: var(--border-radius-default);
border-bottom-right-radius: var(--border-radius-default);
overflow: hidden;
transform: translateY(-50%);
cursor: pointer;
}
.homepage__control__tab__shadow {
position: absolute;
z-index: 10;
inset: 0 auto 0 -16px;
width: 16px;
box-shadow: var(--shadow-soft);
}
.homepage__control__tab__icon {
width: 10px;
height: 17px;
background-image: var(--icon-arrow-right);
background-repeat: no-repeat;
background-position: center;
}
.homepage__control__tab__icon.--filter,
.homepage__control__tab__icon.--resultsColumn.--closed {
background-image: var(--icon-arrow-right);
}
.homepage__control__tab__icon.--filter.--active,
.homepage__control__tab__icon.--resultsColumn {
background-image: var(--icon-arrow-left);
}
.homepage__filter__main__panel__checkboxes__unit__checkboxLegal__label {
padding: 1px 12px;
color: black;
cursor: pointer;
user-select: none;
}
.homepage__resultsColumn__main__copyright {
display: flex;
align-items: center;
height: 16px;
border-top: var(--border-ultraLight);
background-color: white;
}
/* Modal */
.modal,
.modal__decisionBox,
.modal__shoppingCart {
margin: auto;
max-width: 95%;
background-color: white;
border-radius: var(--border-radius-default);
overscroll-behavior: contain;
}
.modal,
.modal__shoppingCart {
height: 95%;
max-height: 95%;
}
.modal__decisionBox {
max-height: calc(100% - 32px);
}
.modal,
.modal__decisionBox {
width: var(--screen-width-narrow);
}
.modal__shoppingCart {
width: var(--screen-width-standard);
overflow: auto;
}
.modal::backdrop,
.modal__decisionBox::backdrop,
.modal__shoppingCart::backdrop {
background-color: var(--screen-cover-dark);
}
.modal__message.--withBreak {
margin: 0 0 var(--break-large);
}
.modal__headlineBlock__headline {
display: none;
color: var(--gold);
}
.modal__headlineBlock__headline.--active {
display: block;
}
.modal__contentBlock {
padding: var(--break-large) var(--break-significant) 0;
}
.modal__contentBlock {
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
inset: 80px 0 0 0;
padding-bottom: var(--break-modest);
overflow-y: auto;
}
.modal__contentBlock__main__textIconBlock {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
margin: var(--break-large) 0;
}
.modal__contentBlock__main__wrapperForMouse {
display: none;
justify-content: center;
align-items: center;
flex-wrap: wrap;
row-gap: var(--break-default);
column-gap: var(--break-modest);
margin: calc(var(--break-default) * -1) 0 0;
padding: var(--break-modest);
cursor: pointer;
}
.modal__contentBlock__main__wrapperForMouse.--active {
display: flex;
}
.modal__contentBlock__main__textIconBlock__text {
margin: 0;
padding: 0;
text-align: center;
}
.modal__icon__link {
padding-left: var(--break-decreased);
}
.modal__icon__forgotPassword {
width: 24px;
}
.modal__contentBlock__main__textIconBlock__icon.--forgotPassword {
width: 24px;
}
.modal__contentBlock__main__textIconBlock__icon.--resendActivation,
.modal__contentBlock__main__textIconBlock__icon.--resendPasswordResetRequest {
width: 32px;
}
.modal__decisionBox__subHeadline {
margin-bottom: var(--break-default);
}
.modal__decisionBox__subHeadline.--delete {
padding-bottom: var(--break-significant);
}
.modal__decisionBox__valueText {
margin-left: var(--break-default);
}
.modal__decisionBox__valueText:empty {
display: none;
}
.modal__decisionBox__subInstructions {
margin-top: var(--break-significant);
}
.modal__decisionBox__buttonContainer {
display: flex;
align-items: center;
gap: var(--break-default);
padding: var(--break-default) var(--break-default) 0;
}
.modal__decisionBox__buttonContainer.--delete {
padding-bottom: var(--break-decreased);
}
/* My Account */
main.--myAccount {
display: flex;
justify-content: center;
position: relative;
background-color: var(--account-background);
}
.account {
width: var(--screen-width-standard);
margin: var(--break-significant) 0;
background-color: white;
border: var(--border-mid);
border-radius: var(--border-radius-default);
}
.account__headline {
margin-bottom: var(--break-large);
color: var(--gold);
}
.account__headline.--first {
color: var(--gold);
}
.account__unit__headline,
.cart__header,
.modal__decisionBox__headline {
padding: var(--break-modest) var(--break-default);
}
.account__unit__headline,
.modal__decisionBox__headline {
background-color: var(--gold);
}
.account__unit__headline {
display: flex;
align-items: center;
gap: var(--break-default);
}
.account__unit__headline__bubble {
display: none;
justify-content: center;
align-items: center;
padding: 0 var(--break-default);
height: 28px;
color: white;
border: var(--border-white);
border-radius: var(--border-radius-default);
}
.account__unit__headline__bubble.--active {
display: flex;
}
.account__large__checkmark {
flex-grow: 0;
flex-shrink: 0;
width: 36px;
aspect-ratio: 1/1;
background-color: white;
border: var(--border-mid);
border-radius: var(--border-radius-default);
}
.account__large__checkmark.--active,
.account__large__checkmark.--paused {
background-color: transparent;
cursor: pointer;
}
.account__large__checkmark.--active {
background-image: var(--icon-checkbox-green);
border-color: var(--green);
}
.account__large__checkmark.--paused {
background-image: var(--icon-checkbox-red);
border-color: var(--red);
}
.account__unit__headlineInstructions,
.modal__decisionBox__subHeadline,
.modal__decisionBox__subInstructions {
padding: var(--break-decreased) var(--break-default);
}
.modal__decisionBox__headline {
display: flex;
justify-content: space-between;
align-items: center;
}
.account__unit__headlineInstructions {
background-color: var(--grey-224);
}
.modal__decisionBox__subHeadline,
.modal__decisionBox__subInstructions {
background-color: var(--ultraLightGrey);
}
.account__unit__subHeadline {
display: flex;
align-items: center;
}
.account__unit__subHeadline {
margin: var(--break-large) 0 0 var(--break-default);
padding: var(--break-modest) var(--break-default);
background-color: var(--gold-headline-background);
}
.account__unit {
margin: 0 0 var(--break-large);
}
.account__unit__bottomWrapper {
padding: 0 var(--break-default);
}
.account__unit__allFields,
.account__unit__allFields__column {
display: flex;
flex-direction: column;
gap: var(--break-modest);
}
.account__unit__allFields {
margin: var(--break-significant) 0 var(--break-significant) var(--break-default);
}
.account__unit__allFields.--twoColumn {
flex-direction: row;
flex-wrap: wrap;
}
.account__unit__allFields.--specialty {
width: 65%;
}
.account__unit__allFields__column {
width: 45%;
}
.account__unit__allFields.--twoColumn,
.account__unit__allFields.--specialty:has(.checkbox__unit__account.--active),
.account__unit__allFields__column.--statewide:has(.checkbox__unit__account.--active) {
gap: var(--break-significant);
}
.account__unit__oneField {
display: none;
font-size: 0; /* Needed to avoid strange top-margin issue on Select elements in Chrome. Unknown why this helps because this is a wrapper. */
}
.account__unit__oneField.--active {
display: block;
}
.account__unit__passwords {
display: none;
flex-direction: column;
gap: var(--break-significant);
}
.account__unit__passwords.--active {
display: flex;
}
.account__unit__bottom {
border-top: var(--border-mid);
}
.account__unit__bottom__section {
display: none;
align-items: flex-start;
flex-direction: column;
gap: var(--break-default);
margin: var(--break-default) 0 0;
}
.account__unit__bottom__section.--active {
display: flex;
}
.account__unit__bottom__section__buttonContainer {
display: flex;
align-items: flex-start;
gap: var(--break-modest);
}
.account__unit__bottom__section__button,
.checkbox__unit__account__upgrade__button,
.account__unit__fileUpload::file-selector-button,
.modal__decisionBox__button {
color: white;
border-radius: var(--border-radius-small);
user-select: none;
}
.account__unit__bottom__section__button,
.modal__decisionBox__button {
background-color: var(--darkGrey);
}
.checkbox__unit__account__upgrade__buttonContainer.--open {
display: flex;
}
.checkbox__unit__account__upgrade__buttonContainer.--active {
border: var(--border-blue);
}
.account__unit__bottom__section__button,
.checkbox__unit__account__upgrade__button,
.modal__decisionBox__button {
cursor: pointer;
}
.account__unit__bottom__section__button,
.checkbox__unit__account__upgrade__button {
display: none;
}
.account__unit__bottom__section__button.--active,
.checkbox__unit__account__upgrade__button.--active {
display: flex;
}
.account__unit__bottom__section__button {
width: 80px;
aspect-ratio: 5/2;
}
.checkbox__unit__account__upgrade__button,
.account__unit__bottom__section__button {
justify-content: center;
align-items: center;
}
.checkbox__unit__account__upgrade__button {
gap: var(--break-modest);
width: 112px;
aspect-ratio: 7/2;
}
.modal__decisionBox__button.--delete {
background-color: var(--red-deep);
}
.account__unit__bottom__section__button.--delete {
margin-left: var(--break-decreased);
}
.modal__decisionBox__button {
display: flex;
justify-content: center;
padding: var(--break-modest);
}
.modal__decisionBox__button.--changeUpgradeState {
width: 96px;
}
.account__unit__fileUpload::file-selector-button {
padding: var(--break-modest);
background-color: var(--blue-deep);
border: none;
}
.account__unit__bottom__section__info {
display: flex;
align-items: center;
gap: var(--break-decreased);
padding: var(--break-modest);
background-color: var(--grey-background);
border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
}
.account__unit__bottom__section__info__icon {
width: 40px;
}
.account__unit__body.--deleteAccount {
text-align: right;
}
/* My Account - Shopping Cart */
.cartTab {
display: flex;
justify-content: center;
position: fixed;
z-index: 1000;
top: calc(var(--cart-tab-height) * -1);
right: 0;
width: 100%;
height: var(--cart-tab-height);
overflow: hidden;
transition: top var(--transition-medium) ease;
}
.cartTab.--active {
top: 0;
transition: top var(--transition-medium) ease;
}
.cartTab__internal {
display: flex;
justify-content: flex-end;
align-items: center;
width: var(--screen-width-standard);
}
.cartTab__iconContainer {
display: flex;
justify-content: center;
align-items: center;
position: relative;
right: calc(var(--cart-tab-width) * -.2);
width: var(--cart-tab-width);
height: var(--cart-tab-height);
background-color: white;
border-right: var(--border-dark-thick);
border-bottom: var(--border-dark-thick);
border-left: var(--border-dark-thick);
border-bottom-right-radius: var(--border-radius-default);
border-bottom-left-radius: var(--border-radius-default);
}
.cart__header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 80px;
background-color: var(--gold);
border-top-right-radius: var(--border-radius-small);
border-top-left-radius: var(--border-radius-small);
}
.cart__buttons {
display: flex;
align-items: center;
gap: var(--break-modest);
}
.cart__links {
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--break-modest);
height: 88px;
padding: 0 var(--break-default);
}
.cart__links.--last {
justify-content: space-between;
margin-bottom: var(--break-significant);
}
.cart__links__text {
display: none;
}
.cart__links__text.--active {
display: block;
}
.cart__links__text.--link {
color: var(--blue-deep);
cursor: pointer;
}
.cart__subHeadline {
display: none;
justify-content: space-between;
align-items: center;
gap: var(--break-default);
height: 70px;
padding: 0 var(--break-default);
background-color: var(--ultraLightGrey);
}
.cart__subHeadline.--active {
display: flex;
}
.cart__subHeadline.--total {
justify-content: flex-end;
margin: var(--break-significant) 0;
}
.cart__internal {
position: absolute;
inset: 238px 0 0 0;
overflow-y: auto;
}
.cart__item {
display: none;
justify-content: space-between;
margin: var(--break-significant) 0 0 0;
padding: 0 var(--break-default);
}
.cart__item.--active {
display: flex;
}
.cart__item__description {
display: flex;
}
.cart__item__close {
display: flex;
align-items: center;
margin-right: var(--break-modest);
padding: 0 var(--break-small);
cursor: pointer;
}
.cart__item__description__body {
display: flex;
flex-direction: column;
}
.cart__total {
margin: var(--break-default) 0 var(--break-large);
padding-right: var(--break-default);
text-align: right;
}
.shoppingCart {
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-image: var(--icon-shopping-cart-black);
background-size: contain;
background-repeat: no-repeat;
}
.shoppingCart.--cartTab,
.shoppingCart.--nav {
width: 40px;
height: 30px;
cursor: pointer;
}
.shoppingCart.--header {
width: 48px;
height: 36px;
}
.shoppingCart__items__count {
position: relative;
left: 3px;
color: var(--gold);
user-select: none;
}
.shoppingCart__items__count.--header {
top: 2px;
color: white;
}
/* Navigation */
.navigation {
position: absolute;
top: 0;
right: -800px;
bottom: 0;
left: auto;
z-index: 210;
width: 500px;
background-color: var(--ultraLightGrey);
border-left: var(--border-white);
box-shadow: var(--shadow-left);
overflow-y: auto;
transition-property: right;
}
.navigation.--active {
right: 0;
}
.navigation__row1,
.navigation__row2,
.navigation__row3,
.navigation__row4,
.navigation__row5 {
border-bottom: var(--border-mid);
background-color: white;
}
.navigation__rowLast {
height: 100px;
background-color: var(--ultraLightGrey);
}
.navigation__row1 {
display: flex;
justify-content: flex-end;
align-items: center;
padding: var(--break-default-static) var(--break-decreased-static);
height: var(--navigation-top-row);
background-color: var(--ultraDarkGrey);
}
.navigation__row2 {
padding: var(--break-default-static) 0;
}
.navigation__row3,
.navigation__row4,
.navigation__row5 {
padding: var(--break-modest-static) 0;
}
.navigation__unitLarge,
.navigation__unitStandard {
display: flex;
align-items: center;
cursor: pointer;
}
.navigation__unitLarge {
padding: var(--break-decreased-static) var(--break-default-static);
gap: var(--break-decreased-static);
}
.navigation__unitStandard {
padding: var(--break-modest) var(--break-default-static);
gap: var(--break-modest-static);
}
.navigation__unitStandard.--dynamic {
display: none;
}
.navigation__unitStandard.--dynamic.--active {
display: flex;
}
.navigation__unit__iconLarge {
width: 30px;
aspect-ratio: 2/3;
}
.navigation__unit__iconStandard {
width: 24px;
aspect-ratio: 1/1;
background-position: center;
background-repeat: no-repeat;
}
.navigation__unit__largeText,
.navigation__unit__standardText,
.navigation__unit__subText {
color: var(--grey-80);
}
.navigation__unit__subText {
color: var(--blue-deep);
}
.navigationOverhang {
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: auto;
z-index: 110;
width: 75px;
height: var(--navigation-height);
padding-right: var(--break-decreased-static);
background-color: var(--interface-base-color);
border-left: var(--border-mid);
border-bottom: var(--border-mid);
border-bottom-left-radius: var(--border-radius-default);
box-shadow: var(--shadow);
transition-property: opacity;
}
.navigationOverhang.--active {
opacity: 0;
border-left: var(--border-clear);
border-bottom: var(--border-clear);
}
.navigationOverhang__left {
display: none;
}
.navigationOverhang__right {
display: block;
}
/* News */
.header__nav {
border-top-width: 0.25rem;
border-top-style: solid;
border-top-color: var(--grey48);
border-bottom-width: 0.25rem;
border-bottom-style: solid;
border-bottom-color: var(--grey48);
}
.header__nav__internal {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-right: auto;
margin-left: auto;
padding-top: var(--one);
width: var(--screen-width-standard);
max-width: 100%;
}
.news__unit {
display: flex;
flex-direction: column;
margin: var(--break-significant) 0;
}
.news__unit__thumb {
width: 100%;
height: auto;
}
.news__unit__description {
margin: var(--break-modest) 0 0;
color: var(--font-color-link);
}
.news__unit__date {
margin: var(--break-modest) 0 0;
}
.news__item__headline {
margin: 0 0 var(--break-significant);
}
.news__item__containerSubmittedPublished {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
}
.news__item__submittedPublishedColumn {
margin-bottom: var(--break-modest);
}
.news__item__miniTitle {
margin: var(--break-small) 0;
}
.news__item__bodyContainer {
margin: var(--break-modest) 0 var(--break-large);
}
.news__start__line {
margin-bottom: var(--break-modest);
height: 4px;
background-color: var(--lightGrey);
}
.news__img__caption,
.news__item__bodyText {
margin-bottom: var(--break-significant);
}
.news__img__caption {
margin-top: 0;
padding: var(--break-default);
max-width: 100%;
background-color: var(--grey-248);
}
.news__item__quoteText {
margin: 0 0 var(--break-significant) var(--break-significant);
padding: var(--break-default);
color: var(--orange);
background-color: var(--ultraLightGrey);
}
/* Shared */
.body__standard {
overflow-x: hidden;
}
.body__standard.--locked,
.body__standard.--locked-byModal {
height: 100vh;
overflow-y: hidden;
}
.activationWrapper {
display: none;
}
.activationWrapper.--active {
display: block;
}
.wrapper_edgeToEdge {
position: relative;
}
.mainContainer {
display: flex;
justify-content: center;
padding: var(--break-large);
}
.mainContainer__internal {
width: var(--screen-width-standard);
max-width: 100%;
}
.mainContainer__internal.--news {
display: flex;
flex-direction: column;
align-items: center;
}
.halo {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 45px;
aspect-ratio: 1/1;
border-radius: 50%;
transition-property: background-color;
cursor: pointer;
}
.halo.--dynamic {
display: none;
}
.halo.--dynamic.--active {
display: flex;
}
.halo.--invisible {
visibility: hidden;
}
.halo.--invisible.--active {
visibility: visible;
}
.clearValue {
visibility: hidden;
height: 24px;
aspect-ratio: 1 / 1;
background-color: var(--grey-112);
border-radius: 50%;
}
input:not(:placeholder-shown) + .clearValue {
visibility: visible;
}
.clearValue.--active {
visibility: visible;
}
.lineContainer.--clearValue {
width: 12px;
}
.lineContainer.--decisionBox,
.lineContainer.--header,
.lineContainer.--modal,
.lineContainer.--navigation,
.lineContainer.--shoppingCart,
.lineContainer.--topMessage,
.userIcon {
width: 30px;
}
.lineContainer.--closeNavigation,
.lineContainer.--clearValue,
.lineContainer.--error,
.lineContainer.--removeFromCart,
.lineContainer.--topMessage,
.userIcon {
aspect-ratio: 1/1;
}
.lineContainer {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.lineContainer.--decisionBox,
.lineContainer.--header,
.lineContainer.--modal,
.lineContainer.--navigation,
.lineContainer.--shoppingCart {
height: 22px;
}
.lineContainer.--closeNavigation {
width: 24px;
}
.lineContainer.--removeFromCart {
width: 18px;
}
.lineContainer.--error {
width: 20px;
}
.lineContainer__row {
transform: scale(1) translate(0, 0) rotate(0);
transition-property: opacity, transform;
}
.lineContainer__row.--decisionBox,
.lineContainer__row.--header,
.lineContainer__row.--modal,
.lineContainer__row.--navigation,
.lineContainer__row.--shoppingCart,
.lineContainer__row.--topMessage {
height: 4px;
}
.lineContainer__row.--closeNavigation {
height: 3px;
}
.lineContainer__row.--clearValue,
.lineContainer__row.--error,
.lineContainer__row.--removeFromCart {
height: 2px;
}
.lineContainer__row.--clearValue,
.lineContainer__row.--error,
.lineContainer__row.--header,
.lineContainer__row.--modal,
.lineContainer__row.--topMessage {
background-color: white;
}
.lineContainer__row.--navigation {
background-color: var(--grey-224);
}
.lineContainer__row.--closeNavigation {
background-color: var(--blue-deep);
}
.lineContainer__row.--decisionBox,
.lineContainer__row.--removeFromCart,
.lineContainer__row.--shoppingCart {
background-color: var(--interface-base-color);
}
.lineContainer__row.--closeNavigation,
.lineContainer__row.--decisionBox,
.lineContainer__row.--header,
.lineContainer__row.--modal,
.lineContainer__row.--navigation,
.lineContainer__row.--shoppingCart,
.lineContainer__row.--topMessage {
border-radius: var(--border-radius-tiny);
}
.lineContainer__row.--clearValue,
.lineContainer__row.--error,
.lineContainer__row.--removeFromCart {
border-radius: var(--border-radius-micro);
}
.lineContainer__row.--clearValue {
transition-property: none;
}
.lineContainer.--header.--active > .lineContainer__row.--header.--row1,
.lineContainer__row.--decisionBox.--row1,
.lineContainer__row.--modal.--row1,
.lineContainer__row.--navigation.--row1,
.lineContainer__row.--shoppingCart.--row1 {
transform: translate(-1px, 9px) rotate(45deg);
}
.lineContainer.--header.--active > .lineContainer__row.--header.--row2,
.lineContainer__row.--navigation.--row2 {
opacity: 0;
transform: scale(.1);
}
.lineContainer.--header.--active > .lineContainer__row.--header.--row3,
.lineContainer__row.--decisionBox.--row2,
.lineContainer__row.--modal.--row2,
.lineContainer__row.--navigation.--row3,
.lineContainer__row.--shoppingCart.--row2 {
transform: translate(-1px, -9px) rotate(-45deg);
}
.lineContainer__row.--closeNavigation.--row1 {
transform: translate(0, 11px) rotate(45deg);
}
.lineContainer__row.--closeNavigation.--row2 {
transform: translate(0, -10px) rotate(-45deg);
}
.lineContainer__row.--topMessage.--row1 {
transform: translate(0, 12px) rotate(45deg);
}
.lineContainer__row.--topMessage.--row2 {
transform: translate(0, -14px) rotate(-45deg);
}
.lineContainer__row.--removeFromCart.--row1 {
transform: translate(0, 8px) rotate(45deg);
}
.lineContainer__row.--removeFromCart.--row2 {
transform: translate(0, 6px) rotate(-45deg);
}
.lineContainer__row.--clearValue.--row1 {
transform: translate(6px, 11px) rotate(45deg);
}
.lineContainer__row.--clearValue.--row2 {
transform: translate(6px, 1px) rotate(-45deg);
}
.lineContainer__row.--error.--row1 {
transform: translate(0, 8px) rotate(45deg);
}
.lineContainer__row.--error.--row2 {
transform: translate(0, -10px) rotate(-45deg);
}
.back {
margin-left: -4px;
width: 16px;
}
.fiveDots {
display: flex;
justify-content: center;
margin-bottom: var(--break-default);
}
.fiveDots.--breakLarge {
margin-bottom: var(--break-large);
}
.fiveDots__image {
width: 192px;
aspect-ratio: 12 / 1;
}
.highlightEffect {
background-color: rgb(204, 222, 255);
}
.wrapper__rightAlign {
display: flex;
justify-content: flex-end;
}
.--button.--blueBright {
background-color: var(--blue-bright);
}
.--button.--blueDeep {
background-color: var(--blue-deep);
}
.--button.--green {
background-color: var(--green);
}
.--button.--greyDark {
background-color: var(--darkGrey);
}
.--button.--red-deep {
background-color: var(--red-deep);
}
/* Single Pages */
.singlePage__verticalCenter {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}
.singlePage__icon {
width: 192px;
aspect-ratio: 1/1;
}
/* Standard Page Body */
.pageHeadline,
.dateSubHeadline,
.bodyLeader,
.bodyText,
.unorderedList {
margin: 0;
padding: 0;
}
.dateSubHeadline,
.pageHeadline {
text-align: center;
}
.pageHeadline,
.bodyLeader,
.bodyText,
.unorderedList > li {
margin-bottom: var(--break-default);
}
.bodyText.--breakLarge {
margin-bottom: var(--break-large);
}
.pageHeadline.--withBorder,
.dateSubHeadline {
margin-bottom: var(--break-significant);
padding-bottom: var(--break-significant);
border-bottom: var(--border-dark);
}
.news__unit,
.pageHeadline.--withBorder {
width: 544px;
}
.unorderedList {
margin-bottom: var(--break-large);
padding-left: var(--break-significant);
}
/* Top Messages */
.topMessage__container {
display: none;
justify-content: space-between;
align-items: center;
padding: var(--break-modest) var(--break-default);
color: white;
background-color: var(--blue-bright);
border-bottom: var(--border-dark-thick);
}
.topMessage__container.--active {
display: flex;
}
.topMessage__close {
flex-shrink: 0;
margin-left: var(--break-increased);
}
@media all and (min-width: 800px) and (max-width: 1199px) {
:root {
--screen-width-standard: 95%;
}
/* Animations */
/* Auxiliary */
/* Branding */
/* Error */
.input__error.--mapSearch {
max-width: 50vw;
}
/* Font */
/* Footer */
/* Forms */
/* Header */
/* Home Page */
/* Home Page - Filter */
.homepage__filter__desktop,
.homepage__resultsColumn__desktop {
position: static;
width: auto;
background-color: transparent;
box-shadow: none;
transition-property: none;
}
.homepage__filter__tablet,
.homepage__resultsColumn__tablet {
position: fixed;
right: auto;
bottom: 0;
background-color: white;
box-shadow: var(--shadow-right);
}
.homepage__filter__tablet {
top: 0;
left: -380px;
width: 360px;
}
/* Home Page - Search */
.mapPage__searchPanel__topColumns__columnOne {
width: 356px;
}
/* Home Page - Vendor Results */
.vendorResult__row__column__bullet__icon {
width: 8px;
}
/* Home Page - Results Column */
.homepage__resultsColumn__tablet {
width: 400px;
}
.homepage__resultsColumn__tablet.--closed {
left: -400px;
}
/* Modal */
/* My Account */
/* My Account - Shopping Cart */
/* Navigation */
/* News */
/* Shared */
/* Single Pages */
/* Standard Page Body */
/* Top Messages */
/* Transitions */
}
@media all and (min-width: 1px) and (max-width: 799px) {
/* Scale 3/4 of original */
:root {
--break-enormous: 96px;
--break-huge: 72px;
--break-large: 48px;
--break-ample: 36px;
--break-significant: 24px;
--break-increased: 18px;
--break-default: 12px;
--break-decreased: 9px;
--break-modest: 6px;
--break-small: 3px;
--break-tiny: 1px;
--font-size-large: 30px;
--font-size-significant: 24px;
--font-size-increased: 18px;
--font-size-default: 15px;
--font-size-decreased: 12px;
--font-size-modest: 9px;
--font-size-small: 8px;
--screen-width-standard: auto;
--screen-width-narrow: 100%;
--navigation-height: 60px;
--control-tab-length: 65px;
--control-tab-crest: 15px;
--control-tab-icon-length: 13px;
--control-tab-icon-crest: 8px;
--filter-width: 330px;
--navigation-top-row: 60px;
}
/* Animations */
/* Auxiliary */
.aux__main {
margin: 0 0 var(--break-large);
border-top: initial;
border-right: initial;
border-left: initial;
border-bottom: var(--border-ultra-dark-thick);
outline: initial;
border-radius: 0;
}
.aux__main__headlineBlock {
border-radius: 0;
}
.aux__main__headlineBlock {
min-height: 50px;
}
.aux__main__contentBlock {
min-height: 160px;
}
/* Branding */
.logo__header {
width: auto;
height: 50px;
}
.logo__mapSearch {
height: 40px;
}
/* Error */
.input__error.--active.--nationalVendorsList {
display: flex;
}
.input__error.--mapSearch {
max-width: 75vw;
}
/* Font */
.vendorResult__row__column__text,
.vendorResult__servicesHeadline {
font-size: var(--font-size-significant);
}
.mapPage__searchPanel__topColumns__columnOne__headline {
font-size: var(--break-increased-static);
}
.homepage__searchPanel__topColumns__columnTwo__filter__text,
.mapPage__searchPanel__topColumns__columnOne__headline,
.mapPage__searchPanel__topColumns__columnOne__zip__input {
font-size: var(--font-size-decreased-static);
}
/* Footer */
.standardFooter__internal__twoColumns {
flex-direction: column;
align-items: center;
margin-bottom: initial;
}
.standardFooter__internal__twoColumns__links {
align-items: center;
margin-bottom: var(--break-large);
}
.standardFooter__internal__twoColumns__links__unit,
.standardFooter__internal__twoColumns__links__activeUnit {
text-align: center;
}
.standardFooter__internal__twoColumns__logos {
margin-bottom: var(--break-large);
}
.standardFooter__internal__privacyTerms {
justify-content: center;
}
.standardFooter__internal__bottom {
display: flex;
flex-direction: column;
justify-content: initial;
align-items: center;
flex-wrap: nowrap;
}
.standardFooter__internal__bottom__recaptcha {
text-align: center;
}
/* Forms */
.checkbox {
width: 24px;
}
/* Header */
.header {
height: 77px;
}
.header__internal {
width: 100vw;
padding: 0 var(--break-default-static);
}
.header__left {
display: none;
}
.header__right {
width: 37px;
}
.header__left.--myAccount,
.header__right.--myAccount {
width: 74px;
}
/* Home Page */
/* Home Page - Search */
.mapPage__searchPanel {
gap: var(--break-decreased-static);
top: calc(var(--navigation-top-row) + var(--break-decreased-static));
margin: 0 var(--break-default-static);
}
.mapPage__searchPanel__topColumns {
flex-wrap: wrap;
gap: var(--break-decreased-static);
}
.mapPage__searchPanel__topColumns__columnOne {
width: auto;
border-radius: initial;
box-shadow: var(--shadow-down-clear);
transition-property: none;
}
.mapPage__searchPanel__topColumns__columnOne.--closed {
box-shadow: var(--shadow-down-clear);
}
.mapPage__searchPanel__topColumns__columnOneMobile {
width: clamp(300px, 360px, 90vw);
border-radius: var(--border-radius-large);
pointer-events: auto;
box-shadow: var(--shadow-down);
}
.mapPage__searchPanel__topColumns__columnTwo {
padding-bottom: var(--break-small-static);
}
.mapPage__searchPanel__topColumns__columnOne__headline {
padding: var(--break-small-static) var(--break-default-static);
color: white;
background-color: var(--blue-deep);
border-top-right-radius: var(--border-radius-large);
border-top-left-radius: var(--border-radius-large);
}
.mapPage__searchPanel__topColumns__columnOne__zip {
padding: 0 var(--break-modest-static);
}
.mapPage__searchPanel__topColumns__columnOne__zip__button {
padding: var(--break-small-static) var(--break-small-static) var(--break-small-static) 0;
}
.mapPage__searchPanel__topColumns__columnOne__zip__button__animation,
.mapPage__searchPanel__topColumns__columnOne__zip__button__icon {
width: 18px;
}
.mapPage__searchPanel__topColumns__columnOne__zip__button__animation {
border-width: 3px;
}
.mapPage__searchPanel__topColumns__columnOne__zip__input {
padding: var(--break-modest-static) var(--break-modest-static) var(--break-modest-static) var(--break-small-static);
}
/* Home Page - Filter */
.homepage__filter__desktop,
.homepage__filter__tablet,
.homepage__resultsColumn__desktop,
.homepage__resultsColumn__tablet {
position: static;
width: auto;
background-color: transparent;
box-shadow: none;
transition-property: none;
}
.homepage__filter__mobile {
position: fixed;
top: 0;
right: auto;
bottom: 0;
left: clamp(-380px, calc((80vw + 20px) * -1), -350px);
width: clamp(330px, 80vw, 360px);
background-color: white;
}
.homepage__searchPanel__topColumns__columnTwo__filter {
padding: var(--break-small-static) var(--break-modest-static);
}
.homepage__searchPanel__topColumns__columnTwo__filter__text {
margin-right: var(--break-small-static);
}
.homepage__searchPanel__topColumns__columnTwo__filter__rightArrow {
width: 8px;
}
/* Home Page - Vendor Results */
.vendorResult {
margin: 0 var(--break-small) var(--break-default) var(--break-small);
margin: 0 128px var(--break-default);
padding: var(--break-decreased) var(--break-decreased) 0;
}
.vendorResult__break,
.vendorResult__headline,
.vendorResult__row,
.vendorResult__row__singleColumn {
margin-bottom: var(--break-increased);
}
.vendorResult__headline {
padding: var(--break-modest) var(--break-tiny) var(--break-modest) 0;
}
.vendorResult__servicesHeadline {
padding: var(--break-tiny) var(--break-default) var(--break-tiny) var(--break-tiny);
}
.vendorResult__contact__icon {
width: 50px;
height: 36px;
padding: 0 6px;
}
.vendorResult__contact__icon > img {
width: 36px;
}
.vendorResult__row__column__bullet__icon {
width: 6px;
margin: 0 var(--break-modest) 0 0;
}
.map__marker {
width: 39px;
height: 52px;
}
/* Home Page - Results Column */
.homepage__resultsColumn__mobile {
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
height: 300px;
background-color: white;
box-shadow: var(--shadow-right);
transition-property: bottom, height;
}
.homepage__resultsColumn__mobile.--closed {
bottom: -300px;
}
.homepage__resultsColumn__mobile__pointerMotion {
position: fixed;
inset: 0;
z-index: 500;
pointer-events: none;
}
.homepage__resultsColumn__mobile__pointerMotion.--active {
pointer-events: auto;
}
.homepage__resultsColumn__main__shadow {
visibility: hidden;
}
.homepage__resultsColumn__main {
top: 0;
}
.homepage__resultsColumn__main__listing {
margin-top: var(--break-modest-static);
}
.homepage__control__tab.--resultsColumn {
top: -16px;
right: 50%;
left: auto;
bottom: 100%;
width: 80px;
height: auto;
border-top-left-radius: var(--border-radius-default);
border-bottom-right-radius: initial;
transform: translateX(50%) translateY(0);
}
.homepage__control__tab__shadow.--resultsColumn {
inset: auto 0 -16px 0;
width: auto;
height: 16px;
}
.homepage__control__tab__icon.--resultsColumn {
width: 11px;
height: 7px;
background-image: var(--icon-arrow-down);
}
.homepage__control__tab__icon.--resultsColumn.--closed {
background-image: var(--icon-arrow-up);
}
.homepage__genericButton {
gap: var(--break-small-static);
padding: var(--break-small-static) var(--break-modest-static);
}
.homepage__genericButton__rightArrow {
width: 7px;
}
/* Modal */
/* My Account */
.account {
max-width: 100%;
border-left: none;
border-right: none;
border-radius: 0;
}
.account_belowDetails {
flex-direction: column;
gap: var(--break-significant);
}
.account__belowDetails__container {
flex-basis: auto;
}
.account__headline.--first {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.account__large__checkmark {
width: 30px;
}
.account__unit__allFields__column {
width: 100%;
}
.account__unit__allFields.--specialty {
width: max-content;
}
.account__unit__bottom__section__info__icon {
width: 36px;
}
.account__unit__field.--textArea {
min-height: 75px;
}
/* My Account - Shopping Cart */
.shoppingCart__items__count.--cartTab {
font-size: var(--font-size-decreased);
}
.cartTab__internal {
width: 100%;
max-width: initial;
}
.cartTab__iconContainer {
right: 0;
}
.cart__total {
font-size: var(--font-size-significant);
}
/* Navigation */
.navigation {
right: auto;
left: auto;
right: -1600px;
width: 100vw;
border-left: 0;
box-shadow: none;
overflow-y: auto;
transition-property: right;
}
.navigation.--active {
right: 0;
}
.navigation__rowLast {
height: 50px;
}
.navigationOverhang {
justify-content: space-between;
top: 0;
right: 0;
bottom: auto;
left: 0;
padding-right: var(--break-decreased-static);
padding-left: var(--break-decreased-static);
width: auto;
border-left: initial;
border-bottom: var(--border-mid);
border-bottom-left-radius: initial;
box-shadow: var(--shadow-down);
transition-property: none;
}
.navigationOverhang.--active {
opacity: 1;
border-left: initial;
border-bottom: var(--border-clear);
}
.navigationOverhang__left {
display: block;
}
.navigationOverhang__error {
display: none;
align-items: center;
padding: var(--break-decreased-static);
}
.navigationOverhang__error:has(.input__error.--active) {
display: flex;
}
/* News */
.news__start__line {
height: 4px;
}
/* shared */
.clearValue {
height: 18px;
}
.lineContainer.--clearValue {
width: 10px;
}
.lineContainer__row.--clearValue.--row1 {
transform: translate(4px, 8px) rotate(45deg);
}
.lineContainer__row.--clearValue.--row2 {
transform: translate(4px, 0px) rotate(-45deg);
}
/* Single Pages */
/* Standard Page Body */
.news__unit,
.pageHeadline.--withBorder {
width: 432px;
}
.fiveDots__image {
width: 128px;
}
/* Top Messages */
/* Transitions */
}
@media all and (min-width: 1px) and (max-width: 599px) {
/* Animations */
/* Auxiliary */
/* Branding */
/* Error */
/* Font */
/* Footer */
/* Forms */
/* Header */
/* Home Page */
/* Home Page - Filter */
/* Home Page - Vendor Results */
/* Home Page - Results Column */
.vendorResult__servicesHeadline {
padding: var(--break-tiny) var(--break-default) var(--break-tiny) var(--break-tiny);
}
.vendorResult__row__column__bullet__icon {
width: 6px;
margin: 0 var(--break-modest) 0 0;
}
/* Modal */
/* My Account */
/* My Account - Shopping Cart */
/* Navigation */
/* News */
/* Shared */
/* Single Pages */
/* Standard Page Body */
/* Top Messages */
/* Transitions */
}
/* :link */
.navigation__unitLarge:link,
.navigation__unitStandard:link,
.news__unit__date:link,
.standardFooter__internal__privacyTerms__unit:link,
.standardFooter__internal__privacyTerms__activeUnit:link,
.standardFooter__internal__twoColumns__links__unit:link,
.standardFooter__internal__twoColumns__links__activeUnit:link {
text-decoration: none;
}
li a:link,
.--link,
.account__unit__body > a:link,
.aux__main__contentBlock__text > a:link,
.bodyText > a:link,
.checkbox__label > a:link,
.modal__contentBlock__main__wrapperForMouse:link,
.modal__message > a:link,
.news__item__bodyText > a:link,
.news__item__submittedBy > a:link,
.news__unit__description:link,
.unorderedList > li > a:link {
text-decoration: underline;
}
li a:link {
color: var(--blue-deep);
}
.account__unit__body > a:link,
.aux__main__contentBlock__text > a:link,
.bodyText > a:link,
.checkbox__label > a:link,
.modal__message > a:link,
.news__item__bodyText > a:link,
.news__item__submittedBy > a:link,
.news__unit__description:link,
.unorderedList > li > a:link {
color: var(--font-color-link);
}
.homepage__filter__main__panel__checkboxes__unit__checkboxLegal__label > a:link {
color: black;
}
.modal__contentBlock__main__wrapperForMouse:link {
color: var(--font-color-default);
}
.news__unit__date:link {
color: var(--font-color-default);
}
.standardFooter__internal__privacyTerms__unit:link,
.standardFooter__internal__bottom__recaptcha > a:link,
.standardFooter__internal__twoColumns__links__unit:link {
color: var(--font-color-light);
}
.standardFooter__internal__twoColumns__links__activeUnit:link {
color: var(--font-color-branded);
}
/* :visited */
li a:visited {
color: var(--blue-deep);
}
.aux__main__contentBlock__text > a:visited,
.account__unit__body > a:visited,
.bodyText > a:visited,
.checkbox__label > a:visited,
.modal__message > a:visited,
.news__item__bodyText > a:visited,
.news__item__submittedBy > a:visited,
.news__unit__description:visited,
.unorderedList > li > a:visited {
color: var(--font-color-link);
}
.homepage__filter__main__panel__checkboxes__unit__checkboxLegal__label > a:visited {
color: black;
}
.modal__contentBlock__main__wrapperForMouse:visited {
color: var(--font-color-default);
}
.standardFooter__internal__privacyTerms__unit:visited,
.standardFooter__internal__bottom__recaptcha > a:visited,
.standardFooter__internal__twoColumns__links__unit:visited {
color: var(--font-color-light);
}
/* :hover */
@media (any-hover: hover) {
a:hover,
button:hover,
.--button:hover,
.halo:hover,
input:hover,
select:hover,
textarea:hover {
cursor: pointer;
}
input:-webkit-autofill:hover,
select:-webkit-autofill:hover,
textarea:-webkit-autofill:hover {
box-shadow: 0 0 0 160px var(white) inset !important;
}
li a:hover {
color: var(--blue-deep);
}
.--button.--blueBright:hover {
background-color: var(--blue-bright-hover);
}
.--button.--blueDeep:hover {
background-color: var(--blue-deep-hover);
}
.--button.--green:hover {
background-color: var(--green-hover);
}
.--button.--greyDark:hover {
background-color: var(--grey-96);
}
.--button.--red-deep:hover {
background-color: var(--red-deep-hover);
}
.account__large__checkmark.--button.--active:hover {
background-image: var(--icon-checkbox-green-hover);
}
.account__unit__fileUpload::file-selector-button:hover {
background-color: var(--blue-deep-hover);
}
.cart__item__close:hover {
background-color: var(--red);
}
.checkbox.--account:checked:hover {
background-image: var(--icon-checkbox-green-hover);
}
.checkbox.--account.--deactivated:checked:hover {
background-image: var(--icon-checkbox-red-deep-hover);
}
.halo.--decisionBox:hover {
background-color: var(--gold-accent);
}
.halo.--header:hover,
.halo.--modal:hover,
.halo.--navigation:hover {
background-color: var(--interface-base-color-hover);
}
.halo.--shoppingCart:hover {
background-color: var(--gold-cart-hover);
}
.halo.--topMessage:hover {
background-color: var(--blue-bright-halo-hover);
}
.homepage__control__tab:hover {
border-top-color: var(--blue-deep);
border-right-color: var(--blue-deep);
border-bottom-color: var(--blue-deep);
}
.homepage__control__tab:hover > .homepage__control__tab__icon.--filter,
.homepage__control__tab:hover > .homepage__control__tab__icon.--resultsColumn.--closed {
background-image: var(--icon-arrow-right-blue);
}
.homepage__control__tab:hover > .homepage__control__tab__icon.--filter.--active,
.homepage__control__tab:hover > .homepage__control__tab__icon.--resultsColumn {
background-image: var(--icon-arrow-left-blue);
}
@media all and (min-width: 1px) and (max-width: 799px) {
.homepage__control__tab.--resultsColumn:hover {
border-bottom-color: var(--lightGrey);
border-left-color: var(--blue-deep);
}
.homepage__control__tab:hover > .homepage__control__tab__icon.--resultsColumn.--closed {
background-image: var(--icon-arrow-up-blue);
}
.homepage__control__tab:hover > .homepage__control__tab__icon.--resultsColumn {
background-image: var(--icon-arrow-down-blue);
}
}
.homepage__genericButton:hover {
border-color: var(--blue-deep);
box-shadow: var(--shadow-blue);
}
.input__button:hover > .input__button__text {
color: var(--gold-hover);
}
.input__error__closePanel:hover {
background-color: var(--red-hover);
}
.navigation__unitLarge:hover,
.navigation__unitStandard:hover {
background-color: var(--ultraLightGrey);
}
.shoppingCart.--cartTab:hover,
.shoppingCart.--nav:hover {
background-image: var(--icon-shopping-cart-gold);
}
.shoppingCart.--cartTab:hover .shoppingCart__items__count,
.shoppingCart.--nav:hover .shoppingCart__items__count {
color: var(--interface-base-color-hover);
}
.standardFooter__internal__bottom__recaptcha > a:hover,
.standardFooter__internal__privacyTerms__unit:hover,
.standardFooter__internal__privacyTerms__activeUnit:hover,
.standardFooter__internal__twoColumns__links__unit:hover,
.standardFooter__internal__twoColumns__links__activeUnit:hover {
text-decoration: underline;
}
}
/* :focus */
.account__unit__field:focus.--active,
.input__unit__field:focus,
.input__unit__password:has(.input__unit__password__field:focus),
.input__unit__password__field:focus.--largeSize.--active,
.select__unit__account:focus.--active {
background-color: var(--blue-mist);
border: var(--border-active);
outline: var(--outline-focus);
}
.mapPage__searchPanel__topColumns__columnOne__zip__input:focus {
outline: none;
}
.mapPage__searchPanel__topColumns__columnOne__zip:has( .mapPage__searchPanel__topColumns__columnOne__zip__input:focus ) {
border-color: var(--blue-deep);
box-shadow: var(--shadow-blue);
}
.input__unit__password__field:focus {
outline: none;
background-color: var(--blue-mist);
}
.select__unit__account:focus {
color: initial;
}
/* :active */
li a:active {
color: var(--blue-deep);
}
.--button.--blueBright:active {
background-color: var(--blue-bright-active);
}
.--button.--blueDeep:active {
background-color: var(--blue-deep-active);
}
.--button.--green:active {
background-color: var(--green-active);
}
.--button.--greyDark:active {
background-color: var(--grey-32);
}
.--button.--red-deep:active {
background-color: var(--red-deep-active);
}
.account__large__checkmark.--button.--active:active {
background-image: var(--icon-checkbox-green-active);
}
.account__unit__body > a:active,
.aux__main__contentBlock__text > a:active,
.bodyText > a:active,
.checkbox__label > a:active,
.modal__message > a:active,
.news__item__bodyText > a:active,
.news__item__submittedBy > a:active,
.news__unit__date:active,
.news__unit__description:active,
.standardFooter__internal__twoColumns__links__unit:active,
.standardFooter__internal__twoColumns__links__activeUnit:active,
.standardFooter__internal__privacyTerms__unit:active,
.standardFooter__internal__privacyTerms__activeUnit:active,
.standardFooter__internal__bottom__recaptcha > a:active,
.unorderedList > li > a:active {
color: var(--red-bright);
}
.account__unit__fileUpload::file-selector-button:active {
background-color: var(--blue-deep-active);
}
.cart__item__close:active {
background-color: var(--red-deep);
}
.checkbox.--account:checked:active {
background-image: var(--icon-checkbox-green-active);
}
.checkbox.--account.--deactivated:checked:active {
background-image: var(--icon-checkbox-red-deep-active);
}
.homepage__control__tab:active > .homepage__control__tab__icon.--filter,
.homepage__control__tab:active > .homepage__control__tab__icon.--resultsColumn.--closed {
background-image: var(--icon-arrow-right-black);
}
.homepage__control__tab:active > .homepage__control__tab__icon.--filter.--active,
.homepage__control__tab:active > .homepage__control__tab__icon.--resultsColumn {
background-image: var(--icon-arrow-left-black);
}
.homepage__control__tab:active {
border-top-color: black;
border-right-color: black;
border-bottom-color: black;
}
@media all and (min-width: 1px) and (max-width: 799px) {
.homepage__control__tab.--resultsColumn:active {
border-bottom-color: transparent;
border-left-color: black;
}
.homepage__control__tab:active > .homepage__control__tab__icon.--resultsColumn.--closed {
background-image: var(--icon-arrow-up-black);
}
.homepage__control__tab:active > .homepage__control__tab__icon.--resultsColumn {
background-image: var(--icon-arrow-down-black);
}
}
.input__error__closePanel:active {
background-color: var(--red-active);
}
.modal__contentBlock__main__wrapperForMouse:active {
color: var(--font-color-default);
}
/* Modifiers */
.--bold {
font-weight: var(--font-weight-bold);
}
.--centerText {
text-align: center;
}
.--doNotShow {
display: none !important;
}
.--hidden {
display: none;
}
.--invisible {
visibility: hidden;
}
.--lowercase {
text-transform: lowercase;
}
.--nowrap {
white-space: nowrap;
}
.--overflowWrap {
overflow-wrap: break-word;
}
.--shadowDownSmall {
box-shadow: var(--shadow-down-small);
}
/* Transitions */
.cover.--decisionBox,
.cover.--navigation,
.cover.--searchFilter,
.halo,
.homepage__filter__desktop,
.homepage__filter__mobile,
.homepage__filter__tablet,
.homepage__resultsColumn__desktop,
.homepage__resultsColumn__mobile,
.homepage__resultsColumn__tablet,
.lineContainer__row,
.navigation,
.navigationOverhang {
transition-duration: var(--transition-medium);
transition-timing-function: var(--transition-timing-function-default);
}
.homepage__filter__main__panel__checkboxes__unit__checkbox {
transition-duration: var(---transition-fast);
transition-timing-function: var(--transition-timing-function-default);
}
.animation__processing,
.mapPage__searchPanel__topColumns__columnOne__zip__button__animation,
.mapPage__searchPanel__topColumns__columnOne__zip__button__icon,
.processing__checkmark__shadow.--active,
.processing__checkmark__top.--active {
transition-duration: var(--transition-medium);
transition-timing-function: linear;
}
.homepage__resultsColumn__main__shadow,
.map__marker,
.mapPage__searchPanel__topColumns__columnOne,
.processing__checkmark__shadow,
.processing__checkmark__top,
.processing__successCircle,
.processing__spinning.--active {
transition-duration: var(--transition-fast);
transition-timing-function: linear;
}
.animation__processing.--active,
.cover.--processing,
.mapPage__searchPanel__topColumns__columnOne__zip__button__animation.--active,
.mapPage__searchPanel__topColumns__columnOne__zip__button__icon.--active,
.processing__spinning {
transition-duration: 0s;
transition-timing-function: linear;
}