:root {
--html-min-width: 320px;
}
html {
overflow-x: auto;
overflow-y: auto;
background-color: #FFFFFF;
min-width: var(--html-min-width);
}
html, body {
padding: 0px;
margin: 0px;
}
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"); #app_prefweb_configurator {
--color-primary: #FF6700;
--color-primary-tint-10: color-mix(in srgb, var(--color-primary) 10%, white);
--color-primary-tint-20: color-mix(in srgb, var(--color-primary) 20%, white);
--color-primary-tint-50: color-mix(in srgb, var(--color-primary) 50%, white);
--color-primary-tint-75: color-mix(in srgb, var(--color-primary) 75%, white);
--color-primary-dark-20: color-mix(in srgb, black 20%, var(--color-primary));
--color-primary-dark-40: color-mix(in srgb, black 40%, var(--color-primary));
--color-gray-5: color-mix(in srgb, black 5%, white);
--color-gray-10: color-mix(in srgb, black 10%, white);
--color-gray-15: color-mix(in srgb, black 15%, white);
--color-gray-50: color-mix(in srgb, black 50%, white);
--color-danger: #d9534f;
--color-success: #76b72a;
--padding-small-x: 5px;
--padding-small: 10px;
--padding-normal: 15px;
--padding-large: 30px;
--font-color-normal: black;
--font-color-normal-tint-75: color-mix(in srgb, var(--font-color-normal) 75%, white);
--font-size-normal: 14px;
--font-size-medium: 16px;
--font-size-large: 20px;
--font-size-large-x: 24px;
--font-size-large-xx: 32px;
--font-weight-small: 300;
--font-weight-normal: 400;
--font-weight-large: 500;
--font-weight-large-x: 700;
--top-bar-height: 100px;
--top-bar-height-small: 162px;
--top-bar-background: var(--color-primary-tint-75);
--top-bar-logo-width: 504px;
--top-bar-logo-width-small: 272px;
--top-bar-logo-image: url(/prefweb_configurator/preference_logo_en.png);
--top-bar-logo-height: var(--top-bar-height);
--top-bar-logo-small-image-1: url(/prefweb_configurator/preference_logo_en_small_1.png);
--top-bar-logo-small-image-2: url(/prefweb_configurator/preference_logo_en_small_2.png);
--top-bar-logo-small-height: 100px;
--menu-padding: var(--padding-small);
--menu-button-size: 52px;
--menu-button-padding: var(--padding-small);
--menu-button-padding-inner: var(--padding-small-x);
--menu-button-color-normal: var(--color-primary-dark-40);
--menu-button-color-active: black;
--menu-button-background-normal: transparent;
--menu-button-background-active: var(--color-primary-dark-20);
--menu-button-font-weight: var(--font-weight-large);
--menu-button-font-size: var(--font-size-normal);
--menu-icon-size: calc(var(--menu-button-size) - var(--menu-button-padding) - var(--menu-button-padding));
--title-bar-height: 50px;
--transition-duration-dropdown: 0.2s;
--button-font-size: var(--font-size-normal);
--button-font-weight: var(--font-weight-large);
--button-padding: var(--padding-small-x) var(--padding-small);
--button-default-color: white;
--button-default-background: var(--color-gray-50);
--button-default-background-hover: color-mix(in srgb, black 15%, var(--color-gray-50));
--button-default-background-disabled: color-mix(in srgb, var(--color-gray-50) 30%, white);
--button-primary-color: white;
--button-primary-background: var(--color-primary);
--button-primary-background-hover: color-mix(in srgb, black 15%, var(--color-primary));
--button-primary-background-disabled: color-mix(in srgb, var(--color-primary) 30%, white);
--button-success-color: white;
--button-success-background: var(--color-success);
--button-success-background-hover: color-mix(in srgb, black 15%, var(--color-success));
--button-success-background-disabled: color-mix(in srgb, var(--color-success) 30%, white);
--button-danger-color: white;
--button-danger-background: var(--color-danger);
--button-danger-background-hover: color-mix(in srgb, black 15%, var(--color-danger));
--button-danger-background-disabled: color-mix(in srgb, var(--color-danger) 30%, white);
--cart-width: 360px;
--cart-image-size: 100px;
--cart-buttons-width: calc((var(--cart-width) - var(--cart-image-size) - var(--padding-normal) - var(--padding-normal) - var(--padding-small) - var(--padding-small)) / 2);
--cart-small-width: calc(var(--html-min-width) - var(--menu-padding) - var(--menu-padding));
--cart-small-image-size: 100px;
--cart-small-buttons-width: calc((var(--cart-small-width) - var(--padding-normal) - var(--padding-normal) - var(--padding-small)) / 2);
--backdrop-color: rgba(0,0,0,0.15);
--page-background: white;
--home-card-size: 256px;
--home-card-item-padding: var(--padding-large);
--home-card-image-size: calc(var(--home-card-size) - var(--home-card-item-padding) - var(--home-card-item-padding));
--home-card-small-size: 192px;
--home-card-small-item-padding: var(--padding-normal);
--home-card-small-image-size: calc(var(--home-card-small-size) - var(--home-card-small-item-padding) - var(--home-card-small-item-padding));
--loading-size: 64px;
}
#app_prefweb_configurator * {
color: var(--font-color-normal);
font: normal var(--font-size-normal)/1.4 "Roboto",sans-serif;
box-sizing: border-box;
}
#app_prefweb_configurator,
#app_prefweb_configurator.viewMode1,
#app_prefweb_configurator.viewMode3 {
min-height: 100vh;
display: grid;
grid-template-rows: var(--top-bar-height) 1fr;
}
#app_prefweb_configurator.viewWidthXL,
#app_prefweb_configurator.viewMode1.viewWidthXL,
#app_prefweb_configurator.viewMode3.viewWidthXL {
grid-template-rows: var(--top-bar-height-small) 1fr;
}
#app_prefweb_configurator.viewMode2 {
display: grid;
grid-template-rows: var(--top-bar-height) var(--title-bar-height) 1fr;
}
#app_prefweb_configurator.viewMode2.viewWidthXL {
grid-template-rows: var(--top-bar-height-small) var(--title-bar-height) 1fr;
}
#app_prefweb_configurator > .pwb-top-bar {
grid-row: 1;
width: 100%;
height: var(--top-bar-height);
background-color: var(--top-bar-background);
background-image: url(/prefweb_configurator/preference-top-bar-bg.png);
background-position: left top;
background-repeat: no-repeat;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: 1fr auto;
z-index: 1000001;
}
#app_prefweb_configurator.viewWidthXL > .pwb-top-bar {
height: var(--top-bar-height-small);
}
#app_prefweb_configurator > #prefweb-container {
grid-row: 2;
}
#app_prefweb_configurator.viewMode2 > #prefweb-container {
grid-row: 3;
}
#app_prefweb_configurator > .pwb-page-title {
grid-row: 2;
background-color: var(--color-primary-tint-20);
justify-self: stretch;
align-self: stretch;
justify-content: start;
align-content: center;
font-size: var(--font-size-large);
font-weight: var(--font-weight-normal);
color: var(--color-primary-dark-40);
padding-left: var(--padding-large);
}
#app_prefweb_configurator > .pwb-page-container {
grid-row: 2;
background-image: url(/prefweb_configurator/preference_bg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-color: var(--page-background);
justify-self: stretch;
align-self: stretch;
justify-content: stretch;
align-content: stretch;
}
#app_prefweb_configurator > .pwb-backdrop-dropdown,
#app_prefweb_configurator > .pwb-backdrop-loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--backdrop-color);
z-index: 1000000;
}  #app_prefweb_configurator .pwb-top-bar .logo {
grid-column: 1;
grid-row: 1 / 2;
display: block;
width: var(--top-bar-logo-width);
height: var(--top-bar-logo-height);
background-image: var(--top-bar-logo-image);
background-size: var(--top-bar-logo-width) var(--top-bar-logo-height);
background-repeat: no-repeat;
background-position: center center;
align-self: start;
justify-self: start;
margin-left: var(--padding-large);
cursor: pointer;
}
@-webkit-keyframes logo-small-keyframes {
0% {
background-image: var(--top-bar-logo-small-image-1);
-webkit-transform: translateY(0);
transform: translateY(0);
}
45% {
background-image: var(--top-bar-logo-small-image-1);
-webkit-transform: translateY(0);
transform: translateY(0);
}
47.5% {
background-image: var(--top-bar-logo-small-image-1);
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
47.6% {
background-image: var(--top-bar-logo-small-image-2);
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
50% {
background-image: var(--top-bar-logo-small-image-2);
-webkit-transform: translateY(0);
transform: translateY(0);
}
95% {
background-image: var(--top-bar-logo-small-image-2);
-webkit-transform: translateY(0);
transform: translateY(0);
}
97.5% {
background-image: var(--top-bar-logo-small-image-2);
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
97.6% {
background-image: var(--top-bar-logo-small-image-1);
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
100% {
background-image: var(--top-bar-logo-small-image-1);
-webkit-transform: translateY(0);
}
}
@keyframes logo-small-keyframes {
0% {
background-image: var(--top-bar-logo-small-image-1);
-webkit-transform: translateY(0);
transform: translateY(0);
}
45% {
background-image: var(--top-bar-logo-small-image-1);
-webkit-transform: translateY(0);
transform: translateY(0);
}
47.5% {
background-image: var(--top-bar-logo-small-image-1);
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
47.6% {
background-image: var(--top-bar-logo-small-image-2);
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
50% {
background-image: var(--top-bar-logo-small-image-2);
-webkit-transform: translateY(0);
transform: translateY(0);
}
95% {
background-image: var(--top-bar-logo-small-image-2);
-webkit-transform: translateY(0);
transform: translateY(0);
}
97.5% {
background-image: var(--top-bar-logo-small-image-2);
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
97.6% {
background-image: var(--top-bar-logo-small-image-1);
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
100% {
background-image: var(--top-bar-logo-small-image-1);
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#app_prefweb_configurator.viewWidthXL .pwb-top-bar .logo {
grid-column: 1 / span 2;
grid-row: 1;
justify-self: center;
width: var(--top-bar-logo-width-small);
height: var(--top-bar-logo-small-height);
background-image: var(--top-bar-logo-small-image-1);
background-size: var(--top-bar-logo-width-small) var(--top-bar-logo-small-height);
background-repeat: no-repeat;
background-position: center center;
-webkit-animation: logo-small-keyframes 12.0s infinite linear;
animation: logo-small-keyframes 12.0s infinite linear;
margin-left: 0;
}
#app_prefweb_configurator .pwb-top-bar .right-menu {
grid-column: 2;
grid-row: 1 / 2;
display: grid;
position: relative;
grid-template-columns: none;
justify-self: end;
align-self: end;
justify-content: end;
padding: 0 var(--menu-padding) var(--menu-padding) 0;
}
#app_prefweb_configurator.viewWidthXL .pwb-top-bar .right-menu {
grid-column: 1 / span 2;
grid-row: 2;
}
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item {
display: grid;
position: relative;
min-width: var(--menu-button-size);
height: var(--menu-button-size);
cursor: pointer;
padding: var(--menu-button-padding);
grid-auto-columns: auto;
column-gap: var(--menu-button-padding-inner);
background: var(--menu-button-background-normal);
}
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item.menu-item-1 {
grid-column: 1;
}
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item.menu-item-2 {
grid-column: 2;
}
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item.menu-item-3 {
grid-column: 3;
}
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item.menu-item-4 {
grid-column: 4;
}
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item.menu-item-5 {
grid-column: 5;
}
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item svg {
grid-column: 1;
width: var(--menu-icon-size);
height: var(--menu-icon-size);
fill: var(--menu-button-color-normal);
}
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item span {
grid-column: 2;
align-self: center;
justify-self: start;
white-space: nowrap;
color: var(--menu-button-color-normal);
font-size: var(--menu-button-font-size);
font-weight: var(--menu-button-font-weight);
}
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item .menu-counter {
--text-size: 12px;
--vertical-padding: 2px;
--horizontal-padding: 2px;
display: block;
position: absolute;
top: 4px;
right: 4px;
padding: calc(var(--vertical-padding) + 1px) var(--horizontal-padding) calc(var(--vertical-padding) - 1px) var(--horizontal-padding);
color: black;
background-color: var(--color-primary-tint-10);
font-size: var(--text-size);
line-height: var(--text-size);
min-width: calc(var(--text-size) + var(--horizontal-padding) + var(--horizontal-padding));
font-weight: var(--font-weight-large-x);
border-radius: calc((var(--text-size) / 2) + var(--vertical-padding));
text-align: center;
}
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item:hover,
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item.active {
background: var(--menu-button-background-active);
}
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item:hover span,
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item.active span  {
color: var(--menu-button-color-active);
}
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item:hover svg,
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item.active svg  {
fill: var(--menu-button-color-active);
}
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item:hover .menu-counter,
#app_prefweb_configurator .pwb-top-bar .right-menu .menu-item.active .menu-counter  {
background: white;
}   #app_prefweb_configurator .pwb-language:not(.visible),
#app_prefweb_configurator .pwb-cart:not(.visible),
#app_prefweb_configurator .pwb-backdrop-dropdown:not(.visible),
#app_prefweb_configurator .pwb-backdrop-loading:not(.visible) {
visibility: hidden;
opacity: 0.0;
transition: visibility var(--transition-duration-dropdown) step-end, opacity var(--transition-duration-dropdown) ease-in-out;
}
#app_prefweb_configurator .pwb-language.visible,
#app_prefweb_configurator .pwb-cart.visible,
#app_prefweb_configurator .pwb-backdrop-dropdown.visible,
#app_prefweb_configurator .pwb-backdrop-loading.visible {
visibility: visible;
opacity: 1.0;
transition: visibility var(--transition-duration-dropdown) step-start, opacity var(--transition-duration-dropdown) ease-in-out;
}   #app_prefweb_configurator .pwb-language {
background-color: white;
position: absolute;
display: block;
top: var(--menu-button-size);
right: calc(var(--menu-button-size) + var(--menu-padding));
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
z-index: 1000002;
}
#app_prefweb_configurator .pwb-language > .pwb-cart-container {
display: grid;
grid-auto-rows: auto;
}
#app_prefweb_configurator .pwb-language .language-item {
padding: var(--padding-small) var(--padding-normal);
color: var(--color-primary-dark-40);
font-weight: var(--font-weight-large);
display: block;
}
#app_prefweb_configurator .pwb-language .language-item:not(:first-child) {
border-top: 1px solid var(--color-gray-15);
}
#app_prefweb_configurator .pwb-language .language-item.active {
background-color: var(--color-primary-tint-50);
color: black;
cursor: default;
}
#app_prefweb_configurator .pwb-language .language-item:not(.active):hover {
background-color: var(--color-primary-tint-20);
color: black;
cursor: pointer;
}   #app_prefweb_configurator .pwb-cart {
background-color: white;
position: absolute;
display: block;
top: var(--menu-button-size);
right: var(--menu-padding);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
z-index: 1000002;
min-width: var(--cart-width);
max-width: calc(100vw - var(--menu-padding) - var(--menu-padding));
max-height: calc(100vh - var(--top-bar-height));
overflow-y: auto;
overflow-x: auto;
}
#app_prefweb_configurator.viewWidthXL .pwb-cart {
max-height: calc(100vh - var(--top-bar-height-small));
max-width: calc(100vw - var(--menu-padding) - var(--menu-padding));
min-width: calc(var(--html-min-width) - var(--menu-padding) - var(--menu-padding));
}
#app_prefweb_configurator .pwb-cart > .pwb-cart-container {
display: grid;
grid-auto-rows: auto;
}
#app_prefweb_configurator .pwb-cart .button {
min-width: var(--cart-buttons-width);
}
#app_prefweb_configurator.viewWidthXL .pwb-cart .button {
min-width: var(--cart-small-buttons-width);
}
#app_prefweb_configurator .pwb-cart .cart-header {
display: grid;
grid-template-columns: 1fr auto;
padding: var(--padding-normal);
background-color: var(--color-primary-tint-20);
}
#app_prefweb_configurator .pwb-cart .cart-header .title {
grid-column: 1;
font-size: var(--font-size-large);
font-weight: var(--font-weight-large);
color: var(--color-primary-dark-40);
}
#app_prefweb_configurator .pwb-cart .cart-header .button {
grid-column: 2;
}
#app_prefweb_configurator .pwb-cart .cart-item {
padding: var(--padding-normal);
display: grid;
grid-template-rows: auto auto;
grid-template-columns: var(--cart-image-size) 1fr;
gap: var(--padding-small);
border-top: 1px solid var(--color-gray-15);
}
#app_prefweb_configurator .pwb-cart .cart-item > .item-image {
grid-row: 1;
grid-column: 1;
align-self: start;
justify-self: center;
}
#app_prefweb_configurator .pwb-cart .cart-item > .item-image,
#app_prefweb_configurator .pwb-cart .cart-item > .item-image img {
width: var(--cart-image-size);
height: var(--cart-image-size);
}
#app_prefweb_configurator .pwb-cart .cart-item > .item-fields {
grid-row: 1;
grid-column: 2;
align-self: start;
justify-self: start;
}
#app_prefweb_configurator .pwb-cart .cart-item > .item-buttons {
grid-row: 2;
grid-column: 1 / span 2;
display: grid;
gap: var(--padding-small);
grid-template-columns: 1fr auto;
}
#app_prefweb_configurator.viewWidthXL .pwb-cart .cart-item > .item-buttons {
grid-template-columns: 1fr 1fr;
}
#app_prefweb_configurator:not(.viewWidthXL) .pwb-cart .cart-item  > .item-buttons > .button-success {
grid-column: 1;
justify-self: end;
}
#app_prefweb_configurator:not(.viewWidthXL) .pwb-cart .cart-item > .item-buttons > .button-danger {
grid-column: 2;
justify-self: end;
}
#app_prefweb_configurator.viewWidthXL .pwb-cart .cart-item  > .item-buttons > .button-success {
grid-column: 1;
justify-self: stretch;
}
#app_prefweb_configurator.viewWidthXL .pwb-cart .cart-item > .item-buttons > .button-danger {
grid-column: 2;
justify-self: stretch;
}
#app_prefweb_configurator .pwb-cart .cart-item .item-description {
font-size: var(--font-size-medium);
font-weight: var(--font-weight-large);
color: var(--color-primary-dark-40);
word-break: break-all;
}
#app_prefweb_configurator .pwb-cart .cart-item .item-label {
font-weight: var(--font-weight-normal);
color: var(--font-color-normal-tint-75);
}
#app_prefweb_configurator .pwb-cart .cart-item .item-text {
font-weight: var(--font-weight-large);
color: var(--font-color-normal);
}
#app_prefweb_configurator .pwb-cart .cart-message {
border-top: 1px solid var(--color-gray-15);
padding: var(--padding-normal);
}   #app_prefweb_configurator .button,
#app_prefweb_configurator .button.button-default {
display: block;
padding: var(--button-padding);
font-size: var(--button-font-size);
font-weight: var(--button-font-weight);
color: var(--button-default-color);
background-color: var(--button-default-background);
cursor: pointer;
text-align: center;
}
#app_prefweb_configurator .button.disabled {
cursor: default;
}
#app_prefweb_configurator .button:hover,
#app_prefweb_configurator .button.button-default:hover {
background-color: var(--button-default-background-hover);
}
#app_prefweb_configurator .button.button-primary {
color: var(--button-primary-color);
background-color: var(--button-primary-background);
}
#app_prefweb_configurator .button.button-primary:hover {
background-color: var(--button-primary-background-hover);
}
#app_prefweb_configurator .button.button-danger {
color: var(--button-danger-color);
background-color: var(--button-danger-background);
}
#app_prefweb_configurator .button.button-danger:hover {
background-color: var(--button-danger-background-hover);
}
#app_prefweb_configurator .button.button-success {
color: var(--button-success-color);
background-color: var(--button-success-background);
}
#app_prefweb_configurator .button.button-success:hover {
background-color: var(--button-success-background-hover);
}   #app_prefweb_configurator > .pwb-page-container > .pwb-page-home {
display: grid;
grid-template-rows: auto auto;
grid-gap: var(--padding-large);
padding: var(--padding-large);
}
#app_prefweb_configurator.viewWidthXL > .pwb-page-container > .pwb-page-home {
grid-gap: var(--padding-normal);
padding: var(--padding-normal);
}
#app_prefweb_configurator .home-text {
grid-row: 1;
align-self: start;
justify-self: start;
padding: var(--padding-large);
}
#app_prefweb_configurator.viewWidthXL .home-text {
padding: var(--padding-normal);
}
#app_prefweb_configurator .home-title {
font-size: var(--font-size-large-xx);
font-weight: var(--font-weight-normal);
color: var(--color-primary-dark-40);
padding-bottom: var(--padding-large);
}
#app_prefweb_configurator.viewWidthXL .home-title {
font-size: var(--font-size-large-x);
padding-bottom: var(--padding-normal);
}
#app_prefweb_configurator .home-description {
font-size: var(--font-size-large);
font-weight: var(--font-weight-small);
color: black;
}
#app_prefweb_configurator.viewWidthXL .home-description {
font-size: var(--font-size-medium);
}
#app_prefweb_configurator .home-card-container {
display: grid;
grid-template-columns: repeat(auto-fit, var(--home-card-size));
grid-gap: var(--padding-large);
align-self: start;
justify-self: stretch;
align-content: start;
justify-content: center;
}
#app_prefweb_configurator.viewWidthXL .home-card-container {
grid-template-columns: repeat(auto-fit, var(--home-card-small-size));
grid-gap: var(--padding-normal);
}
#app_prefweb_configurator .home-card-container .home-card-item {
display: grid;
align-self: stretch;
justify-self: center;
justify-content: center;
align-content: start;
cursor: pointer;
background-color: var(--color-gray-5);
grid-auto-rows: auto;
grid-row-gap:  var(--home-card-item-padding);
padding: var(--home-card-item-padding);
}
#app_prefweb_configurator.viewWidthXL .home-card-container .home-card-item {
grid-row-gap:  var(--home-card-small-item-padding);
padding: var(--home-card-small-item-padding);
}
#app_prefweb_configurator .home-card-container .home-card-item:hover {
background-color: var(--color-gray-10);
}
#app_prefweb_configurator .home-card-container .home-card-item > .home-card-item-image {
display: block;
width: var(--home-card-image-size);
height: var(--home-card-image-size);
background-color: transparent;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center, 50%, 50%;
}
#app_prefweb_configurator.viewWidthXL .home-card-container .home-card-item > .home-card-item-image {
width: var(--home-card-small-image-size);
height: var(--home-card-small-image-size);
}
#app_prefweb_configurator .home-card-container .home-card-item > .home-card-item-image.image-modelgridsetter {
background-image: url(/prefweb_configurator/home_image_model_grid_setter.svg);
}
#app_prefweb_configurator .home-card-container .home-card-item > .home-card-item-image.image-modelselector {
background-image: url(/prefweb_configurator/home_image_model_selector.svg);
}
#app_prefweb_configurator .home-card-container .home-card-item > .home-card-item-name {
text-align: center;
font-size: var(--font-size-large-x);
font-weight: var(--font-weight-normal);
color: var(--color-primary-dark-40);
}
#app_prefweb_configurator.viewWidthXL .home-card-container .home-card-item > .home-card-item-name {
font-size: var(--font-size-large);
}   @-webkit-keyframes loading-keyframes {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading-keyframes {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#app_prefweb_configurator > .pwb-backdrop-loading {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
#app_prefweb_configurator > .pwb-backdrop-loading > .pwb-loading {
grid-column: 1;
grid-row: 1;
align-self: center;
justify-self: center;
display: grid;
grid-template-rows: auto auto;
}
#app_prefweb_configurator > .pwb-backdrop-loading > .pwb-loading > .pwb-loading-spinner {
display: block;
grid-row: 1;
align-self: start;
justify-self: center;
width: var(--loading-size);
height: var(--loading-size);
position: relative;
padding: 0px !important;
text-indent: -9999em;
--border-size: round(down, calc(var(--loading-size) * 0.15), 1px);
border-top: var(--border-size) solid var(--page-background);
border-right: var(--border-size) solid var(--page-background);
border-bottom: var(--border-size) solid var(--page-background);
border-left: var(--border-size) solid var(--color-primary);
border-radius: 50%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-animation: loading-keyframes 1.1s infinite linear;
animation: loading-keyframes 1.1s infinite linear;
}
#app_prefweb_configurator > .pwb-backdrop-loading > .pwb-loading > .pwb-loading-spinner::after {
width: var(--loading-size);
height: var(--loading-size);
}
#app_prefweb_configurator > .pwb-backdrop-loading > .pwb-loading > .pwb-loading-text {
grid-row: 2;
align-self: start;
justify-self: center;
display: block;
margin-top: var(--padding-normal);
color: var(--color-primary-dark-40);
font-size: var(--font-size-medium);
font-weight: var(--font-weight-large);
}html, body {
min-height: 100vh;
}
.masthead, .mobile-header-space {
display: none !important;
grid-area: none !important;
}
.skip-link, .dt-mobile-header, footer, .mobile-sticky-header-overlay {
display: none !important;
}
.vc_row, .wf-wrap {
margin: 0 !important;
}
.vc_row {
background-color: transparent;
}
.vc_row, .vc_column-inner {
padding: 0 !important;
}
.vc_row {
width: 100% !important;
}