:root {
    --backgroundColor1: #f2f2f2;
    --backgroundColor2: #ffffff;
    --color1: #3c4043;
    --color2: #707375;
    --color3: #d4d4d4;
    --accentColor1: lightgray;
    --accentContrastColor1: #000000;
    --accentColor2: #666666;
    --accentContrastColor2: #ffffff;
    --errorColor: #ff0000ff;
    --warningColor: #ffb400ff;
    --dialogResultYesColor: var(--accentColor1);
    --dialogResultYesContrastColor: var(--accentContrastColor1);
    --dialogResultNoColor: var(--accentColor2);
    --dialogResultNoContrastColor: var(--accentContrastColor2);
    --dialogResultCancelColor: #ff0000ff;
    --dialogResultCancelContrastColor: #f2f2f2;
    --color-outer-circle: #F3E600;
    --color-middle-circle: #000;
    --color-inner-circle: #fff;
    --input-border-color: #000;
    --input-border-color-focus: #000;
    --Textcolor1: #000000;
    --Textcolor2: #212529;
    /*overflow: hidden;*/
}

/* ################################################################ */
/* Temporäre Anpassungen für alte Components auf neue UI Elemente ! */
/* ################################################################ */
.activePanel > .configurator-root {
    height: 100%;
}

.root.configurator[ConfiguratorLayout] {
    grid-template-rows: max-content auto 70px;
}

.btn-adding-group {
    background-color: transparent;
}

.product-configuration-list-wrapper {
    width: auto;
}

.root.showActivePanel.showPanelHeader.showFooter > .activePanel > .product-configuration-list-wrapper {
    height: 100%;
}

.magnetic-planner-container {
    width: auto;
    height: 100%;
}

#canvasdivref {
    width: 100%;
    height: 100%;
    position: absolute !important;
}

.root:not(:has(#canvasdivref)) .activeMenuItemCloseButton[ConfiguratorLayout] {
    top: 35px;
    right: 5px;
}


.footer > .btn.btn-secondary.btn-menu-header {
    background-color: gray;
    margin: 5px;
    margin-top: 10px;
}

.activeMenuItem[ConfiguratorLayout] {
    overflow: auto;
    background-color: var(--backgroundColor1);
}

.contentFlyout-dropdown-context {
    background-color: var(--backgroundColor1);
}

.btn.btn-light.single-select-option-btn[SingleSelectOption] {
    background-color: #ffffff !important;
    border-radius: 5px !important;
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.1);
}

.image-hosting-area[SingleSelectOption]:is(.desktop *) {
    min-width: 125px !important;
}

.image-hosting-area[SingleSelectOption]:is(.mobile *) {
    min-width: 100px !important;
}

.row[SingleSelectOption]:is(.desktop *) {
    min-height: 100px;
}

.row[SingleSelectOption]:is(.mobile *) {
    min-height: 100px;
}

.row[SingleSelectOption] > .single-select-option-item-column[SingleSelectOption] > table[SingleSelectOption] {
    height: 100%;
}

button .btn.btn-secondary.btn-menu-header {
    margin-top: 6px;
    height: 29px;
    width: 29px;
    padding-left: 5px;
    padding-top: 3px;
    border: 1px solid black;
    color: black;
}

.root > .menu > .menuButton[Button] {
    z-index: 40;
}

.root > .menu:has(.root.isPopUp) > .menuButton[Button] {
    z-index: 1005;
    background-color: #FFF;
}

button.btn.btn-light.single-select-option-btn {
    background-color: transparent;
    border: 1px solid lightgrey;
}

.product-selector-list-item-container:first-child[ProductConfigurationList] {
    margin-top: 10px;
}

[associatedmediaobjectsviewer].associated-media-obj-viewer-item {
    padding: 20px;
}

[ConfiguratorLayout] .footer {
    border: 0px;
}

.option-selector-container {
    position: relative;
}

.addProductModalContentList[ProductSelector] {
    height: 100vh;
    max-height: 100vh;
}

.product-selector-header-cardview[ProductSelector] {
    margin-top: 20px;
}

.product-selector-btn-remove-product[ProductSelector] {
    background-color: transparent;
}

.diomex-item-list-container {
    width: 100%;
}

button:focus {
    outline: 0px;
}

.option-selector-message-error-bottom {
    position: sticky !important;
    bottom: 2.5%;
    width: 100% !important;
    top: unset !important;
}

.configurator-add-related-products-btn-container-roomplanner[Configurator]:is(.mobile *) {
    top: 8px !important;
    left: -8px;
}

.configurator-add-related-products-btn-container-roomplanner[Configurator] > .btn.configurator-select-all-btn[Configurator]:is(.mobile *) {
    background-color: transparent;
    color: var(--Textcolor1);
    font-size: 17px;
    width: 150px;
    text-decoration: underline;
}

.dialog-label {
    word-break: break-word;
    font-size: small!important;
}

.configurator-add-related-products-btn-container-roomplanner[Configurator] > .btn.configurator-select-all-btn[Configurator] > i:is(.mobile *) {
    display: none;
}

@media(min-width:575px) {
    .configuration-overview-container[ConfigurationOverview] {
        max-height: 85vh;
        max-width: 67vw;
        overflow: scroll;
        scroll-behavior: smooth;
    }
}

@media(max-width:575px) {

    #canvasdivref {
        height: 100%;
        position: absolute !important;
    }

    div#btnAddingGroup {
        bottom: 150px;
        position: absolute;
    }

    .menu {
        max-width: 96%;
    }

    .configuration-overview-container[ConfigurationOverview] {
        max-height: 72vh;
        overflow: scroll;
        scroll-behavior: smooth;
    }

    .d-flex .col,
    .d-flex .row {
        font-size: medium;
    }
}


/* ################################################################ */
/* Temporäre Anpassungen für alte Components auf neue UI Elemente ! */
/* ################################################################ */

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.noclear{
    clear:none!important;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

[ConfiguratorLayout].root {
    width: 100%;
    height: 100%;
}

[Label].root {
    color: var(--color1);
}

[Button].root.checked [Label].root :is(.desktop *) {
    /*    background-color: var(--accentColor1);*/
    border-color: var(--accentColor1) !important;
    color: var(--accentContrastColor1);
}

[Button].menuButton.root.checked:is(.mobile *) {
    background-color: white;
    border-radius: 5px;
}

[Button].root:not(.checked) [Label].root:hover:not(.body[PopUp] > .menuItemGroup[ConfiguratorLayout] > div > button > .root.hasIcon.hasCaption):is(.desktop *) {
/*    background-color: var(--accentColor2);
    border-color: var(--accentColor2);
    color: var(--accentContrastColor2);*/
    cursor: pointer;
}

[Button].root:not(.checked) [Label].root:hover:not(.body[PopUp] > .menuItemGroup[ConfiguratorLayout] > div > button > .root.hasIcon.hasCaption):is(.mobile *) {
    cursor: pointer;
}


[PopUp].root {
    background-color: var(--backgroundColor2);
    margin: 0.75rem;
    border-radius: 0.5rem;
    animation-duration: 0.25s;
    animation-fill-mode: forwards;
}

    [PopUp].root.positionCenter {
        animation-name: popUpAnimationCenter;
    }

    [PopUp].root.isPopUp.positionTop {
        animation-name: popUpAnimationTop;
    }

    [PopUp].root.isPopUp.positionBottom {
        animation-name: popUpAnimationBottom;
    }

    [PopUp].root.isPopUp.positionLeft {
        animation-name: popUpAnimationLeft;
    }

    [PopUp].root.isPopUp.positionRight {
        animation-name: popUpAnimationRight;
    }

    [PopUp].root.isFlyOut {
        margin: unset;
        border-radius: unset;
    }

        [PopUp].root.isFlyOut.positionTop {
            animation-name: popUpAnimationBottom;
            border-left-style: unset;
            border-top-style: unset;
            border-right-style: unset;
        }

        [PopUp].root.isFlyOut.positionBottom {
            animation-name: popUpAnimationTop;
            border-left-style: unset;
            border-right-style: unset;
            border-bottom-style: unset;
        }

        [PopUp].root.isFlyOut.positionLeft {
            animation-name: popUpAnimationRight;
            border-left-style: unset;
            border-top-style: unset;
            border-bottom-style: unset;
        }

        [PopUp].root.isFlyOut.positionRight {
            animation-name: popUpAnimationLeft;
            border-top-style: unset;
            border-right-style: unset;
            border-bottom-style: unset;
        }

    [PopUp].root.arrow {
        animation-name: popUpAnimationArrow;
        animation-duration: 0.0s;
        animation-fill-mode: forwards;
    }

@keyframes popUpAnimationTop {
    from {
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    }

    to {
        clip-path: polygon(0 140%, 100% 140%, 140% 0, 0 0);
    }
}

@keyframes popUpAnimationBottom {
    from {
        clip-path: polygon(0 0, 0 0, 100% 0, 100% 0);
    }

    to {
        clip-path: polygon(0 0, 0 140%, 100% 140%, 140% 0);
    }
}

@keyframes popUpAnimationLeft {
    from {
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }

    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes popUpAnimationRight {
    from {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }

    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes popUpAnimationCenter {
    from {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }

    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes popUpAnimationArrow {
    0% {
        clip-path: inset(100% 100% 100% 100%);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

[PopUp].header:not(:empty) {
    margin-top: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom-width: 0.1rem;
    border-bottom-style: solid;
    border-bottom-color: var(--color2);
    text-align: center;
    font-size: xx-large;
}

[PopUp].body {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color2) #00000000;
}

[PopUp].footer:not(:empty) {
    margin-bottom: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.75rem;
    border-top-width: 0.1rem;
    border-top-style: solid;
    border-top-color: var(--color2);
}

[LoadingCircle].background,
[PopUp].background {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation-name: backgroundOverlayAnimation;
    animation-duration: 0s;
    animation-fill-mode: forwards;
}

[PopUp].background {
    cursor: pointer;
}

@keyframes backgroundOverlayAnimation {
    from {
        background-color: hsla(0,0%,0%,0);
    }

    to {
        background-color: hsla(0,0%,0%,0.15);
    }
}

[ConfiguratorLayout].root {
    background-color: var(--backgroundColor1);
}

[ConfiguratorLayout] .panelSelector {
    background-color: var(--backgroundColor2);
}

[ConfiguratorLayout] .activePanelMenu {
    background-color: var(--backgroundColor2);
}

    [ConfiguratorLayout] .activePanelMenu [PopUp].root {
        --popUpContainerElementSelector: .activePanel;
        --popUpPosition: bottom;
        --popUpShowArrow: true;
    }

    [ConfiguratorLayout] .activePanelMenu [PopUp].background {
        backdrop-filter: unset;
        animation-name: unset;
        animation-duration: unset;
        animation-fill-mode: unset;
    }

[ConfiguratorLayout] .appMenu {
    background-color: var(--backgroundColor2);
    border-right-width: 0.1rem;
    border-right-color: var(--color3);
    border-right-style: solid;
}

    [ConfiguratorLayout] .appMenu:is(.mobile *) {
        border-right-width: unset;
        border-right-color: unset;
        border-right-style: unset;
    }

    [ConfiguratorLayout] .appMenu [PopUp].root {
        --popUpContainerElementSelector: .activePanel;
        --popUpPosition: bottom;
        --popUpShowArrow: true;
    }

[ConfiguratorLayout] .menu:is(.desktop *) {
    background-color: var(--backgroundColor2);
    box-shadow: 2px 0px 3px 1px rgba(0,0,0,0.1);
    border-bottom: 1px solid #ccc;
}

[ConfiguratorLayout] .menu:is(.mobile *) {
    background-color: var(--backgroundColor1);
    grid-auto-columns: minmax(2rem, 6rem);
    padding: 0.5rem;
}

[ConfiguratorLayout] .menu [PopUp].root {
    --popUpContainerElementSelector: .activeMenuItem;
    --popUpPosition: bottom;
    --popUpShowArrow: true;
}

    [ConfiguratorLayout] .menu [PopUp].root:is(.mobile *) {
        --popUpContainerElementSelector: .activePanel;
        --popUpPosition: top;
        --popUpStretchHorizontal: true;
    }

[ConfiguratorLayout] .activePanel {
    border-right-width: 0.1rem;
    border-right-color: var(--color3);
    border-right-style: solid;
}

    [ConfiguratorLayout].activePanel:is(.mobile *) {
        border-right-width: unset;
        border-right-color: unset;
        border-right-style: unset;
    }

[ConfiguratorLayout] .footer {
    background-color: var(--backgroundColor2);
    border-right-color: var(--color3);
    border-right-style: solid;
}

.configurator.root[ConfiguratorLayout] > .footer[ConfiguratorLayout] {
    border-right-width: 0.1rem;
}

[ConfiguratorLayout] .footer:is(.mobile *) {
    border-right-width: unset;
    border-right-color: unset;
    border-right-style: unset;
    border-radius: 0.5rem 0.5rem 0px 0px;
}

[ConfiguratorLayout] .activeMenuItemOpenButton {
    background-color: var(--backgroundColor2);
    color: var(--color2);
    border-style: solid;
    border-width: thin;
    border-color: var(--color3);
    border-radius: 0.1875rem;
    font-size: smaller;
    box-shadow: 0px 0px 5px -3px var(--color1);
    bottom: 135px;
    padding: 4px 9px 3px 9px;
    border-radius: 6px;
    font-family: var(--main-cas-font-family-glight);
}

.composed-image-container-slide:is(.desktop *):has(> img.composedimagevideoavailable)::after {
    content: "\f144";
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-style: normal;
    font-size: 90px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    pointer-events: none;
    opacity: 0.5;
}

.activeMenuItemOpenButton[ConfiguratorLayout]::after {
    font-family: "Font Awesome 6 Pro";
    content: "\f077";
    font-weight: 200;
    font-size: 12px;
    padding-left: 6px;
}

.activeMenuItemCloseButton[ConfiguratorLayout]::after {
    font-family: "Font Awesome 6 Pro";
    content: "\f078";
    font-weight: 200;
    font-size: 12px;
    padding-left: 6px;
}

.root.showActiveMenuItem .activeMenuItemCloseButton[ConfiguratorLayout] {
    top: -0.50rem;
}

[ConfiguratorLayout] .activeMenuItemCloseButton {
    background-color: var(--backgroundColor2);
    color: var(--color2);
    border-style: solid;
    border-width: thin;
    border-color: var(--color3);
    border-radius: 0.1875rem;
    font-size: smaller;
    box-shadow: 0px 0px 5px -3px var(--color1);
    margin-top: 10px;
    right: 7px;
    padding: 4px 9px 3px 9px;
    border-radius: 6px;
    font-family: var(--main-cas-font-family-glight);
}

.root.showActiveMenuItem.showActivePanel .activeMenuItemCloseButton[ConfiguratorLayout] {
    top: calc(33% - 30px) !important;
    position: fixed;
}

[ConfiguratorLayout] .menu:is(.mobile *) {
    min-width: 100%;
}

[ConfiguratorLayout] .menuButton.checked:is(.mobile *) [Label].root {
    box-shadow: 0 0 2px 1px var(--accentColor1);
}

[ConfiguratorLayout] .menuButton.checked [Label].root {
    z-index: 2;
}

[ConfiguratorLayout] .menuButton:is(.mobile *) [Label].root {
    border-style: solid;
    border-width: 0.1rem;
    border-color: var(--color2);
    aspect-ratio: 1;
    flex-flow: column;
    background-color: transparent;
    border-radius: 5px;
    padding: 5px;
}

[ConfiguratorLayout] .menuButton:is(.mobile *) [Label].icon {
    font-size: xx-large;
}

[ConfiguratorLayout] .menuButton:is(.mobile *) [Label].caption {
    font-family: var(--main-cas-font-family-gmedium);
    font-size: 12px;
    padding-top: 4px;
    font-weight: 500;
}

[Button].panelHeader:is(.desktop *) {
    min-width: 150px;
}

/*******************************************************
/* Feat3 spezifisch (ehemals Configurator.css */
/*******************************************************


/*#region icons */
.fas.fa-minus-circle,
.fas.fa-mouse-pointer,
.fas.fa-heart {
    color: white;
}

.svg-icon.svg-ruler {
    display: none;
}
/*#endregion icons*/

.option-selector-header {
    font-family: var(--main-cas-font-family-gmedium);
}

.btn-group.productconfigurationselector-tabs.product-selector-tab-container {
    margin-left: -25px;
    margin-top: -11px;
}

.linkdecoration {
    text-decoration: underline;
    cursor: pointer;
}

.single-select-option-arrow-closed {
    transition: all .3s;
    transform: rotate(0deg);
}

.single-select-option-arrow-open {
    transition: all .3s;
    transform: rotate(180deg);
}

.single-select-option-header {
    width: 100%;
    border-bottom: 1px solid #C2C2C2;
    padding: 15px 0px;
    display: flex;
    justify-content: space-between;
}

.btn-request-image {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.modal-content-wrapper {
    padding: 0 0 65px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip-wrapper {
    display: flex;
}

.btn-fuehlenActiv > .btn-fuehlen-span {
    padding: 0px;
}

.btn-teilen-span,
/*.btn-kaufen-span,*/
.btn-fuehlen-span,
.btn-save-span {
    vertical-align: middle;
    align-items: center;
    font-weight: 300;
    flex-direction: column;
    display: flex;
}

.btn-save-span {
    padding: 0 15px 0 15px;
}

.btn-teilen-span,
.btn-kaufen-span,
.btn-fuehlen-span {
    padding: 0px;
}

.btn-save-span {
    padding: 0;
}

.change-option-action-modal-body-list-text-custom {
    font-family: var(--main-cas-font-family);
}

.product-selector-list-item-container:last-child {
    margin-bottom: 180px;
}

.single-select-option-value-compare {
    color: black !important;
}

.btn-schliessen {
    height: 54px;
    display: grid;
    margin: 0px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.btn-pdf {
    background-color: #f3e600;
    border: 2px solid #f3e600;
    min-height: 54px;
}

.btn-kaufen-footer {
    background-color: #f3e600;
    width: 100%; /* Fallback Value */
    width: -moz-available; /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
    margin: 15px;
}

    .btn-kaufen-footer > svg {
        fill: #fff;
        transition-duration: .15s;
        transition-property: color;
    }

.btn-pdf {
    display: grid;
    margin: 0px;
    align-items: center;
    font-weight: normal;
    width: 100%;
}

.btn.btn-light.single-select-option-btn {
    background-color: #ffffff;
}

.single-select-option-item-column {
    padding: 0px;
}

.single-select-option-name {
    font-size: 15px;
    padding-left: 20px;
    vertical-align: middle;
    color: #000 !important;
}

    .single-select-option-name:not(.alternated-text) {
        font-weight: 500;
        font-family: var(--main-cas-font-family-gmedium);
        color: var(--Textcolor2) !important;
    }

    .single-select-option-name.alternated-text {
        font-weight: 200;
        font-family: var(--main-cas-font-family-glight);
        color: var(--Textcolor2) !important;
        font-size: 14px;
    }

.single-select-option-arrow-icon {
    font-size: 30px;
    padding-right: 22px;
}

/* popupnew */
.overlay {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ende popupnew */

/* new */
.edit-mobil {
    position: absolute;
    left: 0;
    top: 0;
    width: 92px;
    border-right: 2px dashed #fff;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.option-selector-wrapper-open.option-selector-close-btn-text-open > .edit-mobil {
    border: none;
}

.option-selector-wrapper-open.option-selector-close-btn-text-open > .edit-mobil {
    border: none;
}

/* popup */
.popup-modal {
    background: rgb(0 0 0 / 10%);
}

.fas.fa-ruler-vertical {
    display: none;
}

.modal-dialog-configurator {
    max-width: 748px;
    margin: 1rem auto;
    position: relative;
    pointer-events: none;
    opacity: 1;
    min-height: unset;
    height: 95vh;
    z-index: 100;
}

.modal-btn-back {
    text-align: left;
    font-size: 18px;
    font-family: var(--main-cas-font-family);
    letter-spacing: 0px;
    color: #808080;
    opacity: 1;
    cursor: pointer;
}

.modal-dialog-configurator > .modal-content.popup-content > .modal-header > .modal-title {
    text-align: center;
    font-family: var(--main-cas-font-family-smregular);
    font-size: 24px;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    justify-content: center;
    width: 100%;
    padding: 0px 25%;
}

.modal-dialog-configurator > .modal-content.popup-content > .modal-header > .modal-subtitle {
    text-align: center;
    font-family: var(--main-cas-font-family-smregular);
    font-size: 24px;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
}

.modal-content.popup-content {
    box-shadow: 0px 0px 20px #0000004d;
    overflow: auto;
    min-height: calc(100vh - 100px);
}

.modal-header {
    border-bottom: none;
    background-color: #F2F2F2;
    flex-direction: column;
}

    .modal-header > .modal-title {
        font-size: 16px;
        color: #808080;
    }

.modal-subtitle {
    font-size: 24px;
    font-family: var(--main-cas-font-family-smregular), var(--main-cas-font-family);
    text-align: center;
    justify-content: center;
    width: 100%;
}

.modal-body.qr-code-modal-body {
    background-color: #F2F2F2;
    padding: 0rem;
}

.modal-item-content {
    text-align: left;
}

    .description > div > form > label,
    .modal-item-content > form > label {
        border: 0px;
        color: #000;
        font-family: var(--main-cas-font-family);
        font-size: 16px;
        display: grid;
        margin-right: 0;
    }

        .description > div > form > label > input,
        .modal-item-content > form > label > input {
            color: #808080;
            font-family: var(--main-cas-font-family-glight);
            font-size: 16px;
            padding: 14px;
            border: 0px;
        }

.modal-item {
    margin: auto;
    max-width: 100%;
    height: 139px;
    margin-bottom: 10px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 1;
    display: flex;
    box-shadow: inset 0 0 0 0 #F3E600;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
    justify-content: flex-end;
}

.modal-item-text,
.modal-text {
    font-family: var(--main-cas-font-family);
    margin: 0 0 30px 0;
}

.modal-text-small {
    font-family: var(--main-cas-font-family);
    font-size: 16px;
    color: #808080;
    margin: 20px 0 20px 0px;
    display: inline;
}

.span-schliessen,
#stopcounter.modal-text-small {
    cursor: pointer;
}

.text-center {
    text-align: center;
}

.modal-text-small#stopcounter {
    text-align: center;
    text-decoration: underline;
}

.modal-list-item-icon {
    float: left;
    margin: 5px 0px 0 0;
}

.modal-item-text-left {
    padding: 0px 25%;
    text-align: left;
    font-family: var(--main-cas-font-family);
}

.modal-text-margin {
    margin: 60px 30px 60px 0;
    width: 50%;
}

.modal-list {
    display: block;
    margin-bottom: 10px;
    text-align: left;
    font-family: var(--main-cas-font-family);
}

.modal-list-headline {
    margin: 25px 0 5px 0;
}

.modal-list-item {
    padding: 5px 15px;
    display: flex;
}

.modal-item-image {
    min-width: 17%;
    display: flex;
    align-items: center;
    margin: 0px 11px;
    justify-content: center;
}

.modal-item-button {
    height: 100%;
    display: inline;
    min-width: 64.5%;
    text-align: left;
    margin: 18px 0px;
}

.modal-item-fliesstext {
    font-size: 18px;
    font-family: var(--main-cas-font-family);
    color: #000000;
    opacity: 1;
}

.modal-item-button-action {
    width: -webkit-fill-available;
    background: #F3E600 0% 0% no-repeat padding-box;
    opacity: 1;
    display: -ms-flexbox;
    -ms-flex-align: center;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 13%;
    min-width: 13%;
}

.modal-btn-close {
    float: right;
    margin: 0 20px 0 20px;
    cursor: pointer;
}

.modal-timer {
    font-family: var(--main-cas-font-family-smregular);
    font-size: 46px;
    color: #656560;
}

.wrapper-link-share {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.modal-button-action {
    padding: 0 10px 0 15px;
}

.modal-dialog-configurator > .modal-content > .modal-footer {
    display: none;
}

.popup-modal {
    z-index: 10000 !important;
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.modal-timer-wrapper {
    text-align: center;
    margin: 0 0 100px 0;
}

.modal-qrCodeWrapper {
    justify-content: center;
    text-align: center;
    display: flex;
    width: 100%;
    margin: 0 0 20px 0;
}

.modal-qrcode {
    border-radius: 10px;
    border: 1px solid black;
    padding: 10px;
    background-color: #fff;
    width: 222px;
    height: 222px;
}

.formIsCollaborateWithCasaristaSuccessMessageData {
    margin: 0 0 10px 0;
}

/* Ende Popup */


/*#region payment */
.payment-total-wrapper {
    margin-bottom: 100px;
}

.payment-heading {
    font-weight: 300;
    font-size: 26px;
    line-height: 33px;
    font-family: var(--main-cas-font-family-smregular), times new roman,"serif";
    margin-bottom: 30px;
}

.payment-into-text {
    color: #808080;
    font-weight: 300;
    font-size: 16px;
    line-height: 22px;
    font-family: var(--main-cas-font-family),sans-serif;
    margin-bottom: 40px;
}

    .payment-into-text a {
        color: #808080;
        text-decoration: underline;
    }

.payment-wrapper {
    position: relative;
}

.payment-label {
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    padding: 15px 10px;
    font-weight: 300;
    font-size: 16px;
    line-height: 22px;
    font-family: var(--main-cas-font-family),sans-serif;
    width: 100%;
    cursor: pointer;
    margin-bottom: 20px;
}

.payment-checkbox-wrapper {
    display: none;
}

.payment-image {
    width: 35px;
    margin-right: 20px;
    height: auto;
    float: left;
}

.payment-text-detail {
    font-weight: 300;
    font-size: 14px;
    line-height: 21px;
    font-family: var(--main-cas-font-family),sans-serif;
    color: #808080;
    margin-left: 55px;
}

/*#region error classes */
.payment-message {
    width: 100%;
    border-radius: 5px;
    padding: 10px;
    margin: 30px 0;
}

    .payment-message.payment-message-error {
        background: #FFD38B;
        border-radius: 5px;
    }

    .payment-message .payment-message-icon {
        float: left;
        width: 20px;
        margin-right: 10px;
    }

        .payment-message .payment-message-icon .svg {
            float: left;
            width: 100%;
            height: auto;
        }

        .payment-message .payment-message-icon path {
            fill: #000;
        }

    .payment-message .payment-message-text {
        margin-left: 30px;
        color: #000;
        font-weight: 300;
        font-size: 14px;
        line-height: 21px;
        font-family: var(--main-cas-font-family),sans-serif;
    }

    .payment-message .payment-message-heading {
        font-weight: medium;
        font-size: 14px;
        line-height: 21px;
        font-family: var(--main-cas-font-family),sans-serif;
    }

    .payment-message .payment-message-text a {
        color: #000;
        text-decoration: underline;
    }

.payment-wrapper .payment-messages {
    position: relative;
    left: 570px;
    top: 0;
    width: 400px;
    max-width: calc((100vw - 550px) / 2 - 30px );
}

    .payment-wrapper .payment-messages .payment-message {
        margin-top: 0;
    }

        .payment-wrapper .payment-messages .payment-message.payment-message-disabled {
            border: 1px solid #c2c2c2;
            padding: 10px 12px;
            font-weight: 300;
            font-size: 14px;
            line-height: 21px;
            font-family: var(--main-cas-font-family),sans-serif;
            color: #808080;
            margin: -77px 0 10px 0;
        }

            .payment-wrapper .payment-messages .payment-message.payment-message-disabled .payment-message-text {
                color: #808080;
            }

            .payment-wrapper .payment-messages .payment-message.payment-message-disabled path {
                fill: #c2c2c2;
            }

.payment-agb-missing {
    background: #FFD38B;
    border-radius: 5px;
}

/*#endregion error classes END */

/*#endregion payment END */

.linkshare {
    border: none;
    background: #F3E600;
    color: var(--black);
    display: inline;
    line-height: 1.5;
    letter-spacing: 0.32px;
    font-weight: 400;
    font-family: var(--main-cas-font-family-gmedium), sans-serif;
    z-index: 100;
    width: 113px;
    height: 54px;
}

/* share tooltips */

.whatsapp-tooltip,
.mail-tooltip {
    padding: 5px 8px;
    position: relative;
    cursor: pointer;
}

.mail-tooltiptext,
.whatsapp-tooltiptext {
    display: none;
    color: #0000004D;
    font-size: 12px;
    right: -73px;
    top: 40px;
    position: absolute;
    width: 130px;
}

.mail-tooltip:hover .mail-tooltiptext,
.whatsapp-tooltip:hover .whatsapp-tooltiptext {
    display: block;
}

/* Ende share tooltips */

.wrapper-share-label-inputlinkshare .inputlinkshare {
    border: 0px;
    color: #808080;
    font-family: var(--main-cas-font-family-glight);
    font-size: 16px;
    padding: 15px;
    font-weight: normal;
    width: 100%;
    height: 54px;
    /*background-color:#FFF;*/
}

.whatsapp-tooltip,
.mail-tooltip {
    padding: 5px 8px;
    position: relative;
    cursor: pointer;
}

/* ende overlay Info */

/*#region Overlay */

/* Ende share tooltips */

.display-contents {
    display: contents;
}

.overlayInfo {
    top: -50px;
}

/* ende overlay Info */

.overlayCanvas > #canvasdivref {
    justify-content: center;
    align-items: center;
    display: flex;
}

.helpOverlay-VisibleElement.overlayCanvas > #canvasdivref > canvas {
    width: 70% !important;
    height: 40% !important;
}



div.helpOverlay-VisibleElement.overlayCanvas > div#canvasdivref > div.configurator-dimension-text-container > div.configurator-dimension-text > button.btn.btn-configurator {
    background: transparent !important;
}

.overlayText {
    color: #fff;
    font-size: 20px;
    font-family: var(--main-cas-font-family-smregular);
}

.overlayInfoText {
    position: relative;
    top: 9px;
    left: -30px;
    width: 150px;
    color: #fff;
    font-size: 20px;
    font-family: var(--main-cas-font-family-smregular);
}



.overlayInfoIcon {
    position: relative;
    top: -33px;
    right: -24px;
    color: #fff;
    font-size: 20px;
    font-family: var(--main-cas-font-family-smregular);
}

.overlayPositionText {
    position: absolute !important;
    top: 91px;
    left: 121px;
    width: 300px;
    color: #fff;
    font-size: 20px;
    font-family: var(--main-cas-font-family-smregular);
}



.overlayPositionIcon {
    position: absolute !important;
    top: 39px;
    left: 44px;
    color: #fff;
    font-size: 20px;
    font-family: var(--main-cas-font-family-smregular);
}

.overlayCanvasText {
    position: relative;
    top: -140px;
    left: 100px;
    width: 260px;
    color: #fff;
    font-size: 20px;
    font-family: var(--main-cas-font-family-smregular);
}

.overlayCanvasIcon {
    position: relative;
    top: -245px;
    left: 300px;
    color: #fff;
    font-size: 20px;
    font-family: var(--main-cas-font-family-smregular);
}


.overlayElementAddText {
    position: absolute !important;
    top: -140px;
    left: 100px;
    width: 240px;
    text-align: center;
}

.overlayElementAddIcon {
    position: absolute !important;
    top: -100px;
    left: 0px;
}

.overlayElementAddIcon {
    position: absolute !important;
    top: -100px;
    left: 18px;
    color: #fff;
    font-size: 20px;
    font-family: var(--main-cas-font-family-smregular);
}


.overlayOptionAddText {
    position: absolute !important;
    top: 50%;
    right: 35%;
    width: 250px;
}

.overlayOptionAddIcon {
    position: absolute !important;
    top: 400px;
    right: 560px;
}

.overlayMasseAddText {
    position: absolute !important;
    width: 206px;
    right: 160px;
    top: 95px;
}

.overlayMasseAddIcon {
    position: absolute !important;
    top: 50px;
}

.overlayTeilenText {
    position: absolute !important;
    width: 206px;
    right: 160px;
    top: 95px;
}

.overlayTeilenIcon {
    position: absolute !important;
    top: 50px;
}

.helpOverlay-VisibleElement .helpOverlay-VisibleElement-inactive > #masseAnzeigen {
    background-color: transparent;
}
/*#endregion Overlay*/

.option-selector-close-btn-text-close .option-selector-open-option-text::before {
    right: 0% !important;
    top: 33px !important;
    margin-top: -11px !important;
    width: 30px !important;
    height: 15px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='15' class='svg svg-icon' viewBox='0 0 30 15.638'%3E%3Cpath d='M.62 15.638a.585.585 0 0 1-.44-.189.615.615 0 0 1-.18-.44.643.643 0 0 1 .18-.44L14.56.189A.635.635 0 0 1 15 0a.585.585 0 0 1 .44.189l14.38 14.38a.615.615 0 0 1 .18.44.643.643 0 0 1-.18.44.629.629 0 0 1-.881 0L15 1.51 1.061 15.449a.619.619 0 0 1-.441.189Z'/%3E%3C/svg%3E") !important;
}

.btn-configurator.info {
    display: none;
}

.btn-configurator.support {
    display: none;
    background-color: rgb(0 0 0 / 0%);
    border-color: rgb(0 0 0 / 0%);
    position: absolute;
    top: 34px;
    right: -33px;
}

.btn.btn-configurator.btn-save,
.btn.btn-configurator.btn-fuehlen {
    border: 1px solid black;
    border-radius: 5px;
}

.btn.btn-configurator.btn-pdf,
.btn.btn-configurator.btn-schliessen,
.btn.btn-yellow,
.diomex-btn-primary-add {
    background-color: var(--yellow);
}

.footer-bottom-deliver-text-container {
    width: 100%;
}

.wrapper-share-label-inputlinkshare {
    width: 70%
}

.wrapper-share-label-linkshare {
    /*width: 30%;*/
}

.modal-item-wrapper {
    /*    padding-bottom: 20%;*/
    font-size: 18px;
    justify-content: center;
    max-height: 70dvh;
    width: 100%;
    overflow-x: auto;
    max-height: 70dvh;
}

    .modal-item-wrapper:is(.mobile *) {
        overflow-y: scroll;
    }

.btn.btn-configurator.btn-optionselector-footer[Configurator] {
    margin-left: 18px !important;
    max-width: calc(100% - 10px);
    margin-bottom: 20px;
}

.btn-optionselector-header,
.btn-optionselector-footer {
    background-color: #000;
    color: #000;
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    border: 0px !important;
}

    .btn-optionselector-header:hover,
    .btn-optionselector-footer:hover {
        background-color: #f3e600 !important;
        color: #000 !important;
    }

.content:has(.formIsCollaborateWithCasaristaSuccessMessageData) .body[PopUp],
.content:has(.content-switch-container) .body[PopUp] {
    padding-top: 0px;
}

.content:has(.formIsCollaborateWithCasaristaSuccessMessageData) [PopUp].header:not(:empty),
.content:has(.content-switch-container) [PopUp].header:not(:empty) {
    padding-bottom: 0px;
}

.modal-content-title {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

/*#region media*/
@media (max-width: 1390px) {

    .configurator-sum-price-desktop {
        font-size: 34px;
    }

    .configurator-shipping-date-text {
        font-size: 15px;
    }

    .configurator-checkout-btn {
        width: 130px;
        padding: 5px 8px;
        font-size: 15px;
    }

    .configurator-save-btn {
        width: 130px;
        padding: 5px 8px;
        font-size: 15px;
    }

    .configurator-select-all-btn {
        width: 252px;
        font-size: 15px;
        position: initial;
        vertical-align: top;
    }

    .footer-bottom-deliver-text {
        margin-right: 0px;
    }
}

@media (max-width: 1199.9px) {
    .configurator-sharing-text {
        font-size: 12px;
    }

    .configurator-header-phone-btn {
        padding: 0px 10px;
    }

    .configurator-sum-price-desktop {
        font-size: 29px;
        word-spacing: -11px;
    }

    .configurator-shipping-date-text {
        font-size: 13px;
    }
}

@media (min-width: 1051px) {
    .configurator-scroll-option-panel {
        height: 100%;
        overflow-y: auto;
    }

    .option-selector-footer-content {
        display: none;
    }
}

@media (min-width: 1025px) {

    .configurator-save-btn:hover {
        cursor: pointer;
        transform: scale(1.05);
    }




    .configurator-select-all-btn:hover {
        cursor: pointer;
        transform: scale(1.05);
    }

    .configurator-checkout-btn:hover {
        cursor: pointer;
        transform: scale(1.05);
    }


    .single-select-option-header:hover {
        cursor: pointer;
    }


    .button-leiste-container > .alternated-footer-bar > .btn-configurator:hover,
    .button-leiste-container > .classic-footer-bar > .btn-configurator:hover,
    .modal-item-content > .btn-configurator:hover {
        background-color: var(--yellow) !important;
        border: 2px solid var(--yellow);
    }

    .btn-configurator.support:hover {
        background-color: rgb(0 0 0 / 0%) !important;
        border-color: rgb(0 0 0 / 0%) !important;
    }

    .modal-item-button-action:hover {
        position: relative;
        left: 0;
    }

    .btn.btn-configurator.btn-pdf:hover,
    button.btn.btn-configurator.btn-pdf:hover {
        background-color: #000;
        border: 2px solid #000;
    }

    .btn-configurator.btn-request-image:hover,
    .btn-configurator.btn-fuehlenActiv:hover {
        background-color: #f3e600;
        border: 2px solid #f3e600;
        color: #000;
    }



    .button-leiste-container > .classic-footer-bar > .btn-pdf:hover,
    .button-leiste-container > .btn-kaufen:hover,
    .btn-pdf:hover,
    .btn-kaufen:hover {
        color: #fff !important;
        background-color: #000;
        transition-duration: .15s;
        transition-property: color;
    }

    .modal-item:hover {
        box-shadow: inset -800px 0 0 0 #F3E600;
        cursor: pointer;
    }

    .btn-kaufen:hover.btn-kaufen > svg {
        /*fill: #fff;*/
        transition-duration: .15s;
        transition-property: color;
    }

    .min-width-220 {
        min-width: 220px;
    }

    .hide-on-desktop {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .mobile-push-5, .mobile-pull-5, .mobile-push-10, .mobile-pull-10, .mobile-push-15, .mobile-pull-15, .mobile-push-20, .mobile-pull-20, .mobile-push-25, .mobile-pull-25, .mobile-push-30, .mobile-pull-30, .mobile-push-35, .mobile-pull-35, .mobile-push-40, .mobile-pull-40, .mobile-push-45, .mobile-pull-45, .mobile-push-50, .mobile-pull-50, .mobile-push-55, .mobile-pull-55, .mobile-push-60, .mobile-pull-60, .mobile-push-65, .mobile-pull-65, .mobile-push-70, .mobile-pull-70, .mobile-push-75, .mobile-pull-75, .mobile-push-80, .mobile-pull-80, .mobile-push-85, .mobile-pull-85, .mobile-push-90, .mobile-pull-90, .mobile-push-95, .mobile-pull-95, .mobile-push-33, .mobile-pull-33, .mobile-push-66, .mobile-pull-66 {
        position: relative
    }

    .hide-on-mobile {
        display: none !important
    }

    .mobile-grid-5 {
        float: left;
        width: 5%
    }

    .mobile-prefix-2-5 {
        margin-left: 2.5%
    }

    .mobile-suffix-2-5 {
        margin-right: 2.5%
    }

    .mobile-prefix-5 {
        margin-left: 5%
    }

    .mobile-suffix-5 {
        margin-right: 5%
    }

    .mobile-push-5 {
        left: 5%
    }

    .mobile-pull-5 {
        left: -5%
    }

    .mobile-grid-10 {
        float: left;
        width: 10%
    }

    .mobile-prefix-10 {
        margin-left: 10%
    }

    .mobile-suffix-10 {
        margin-right: 10%
    }

    .mobile-push-10 {
        left: 10%
    }

    .mobile-pull-10 {
        left: -10%
    }

    .mobile-grid-15 {
        float: left;
        width: 15%
    }

    .mobile-prefix-15 {
        margin-left: 15%
    }

    .mobile-suffix-15 {
        margin-right: 15%
    }

    .mobile-push-15 {
        left: 15%
    }

    .mobile-pull-15 {
        left: -15%
    }

    .mobile-grid-20 {
        float: left;
        width: 20%
    }

    .mobile-prefix-20 {
        margin-left: 20%
    }

    .mobile-suffix-20 {
        margin-right: 20%
    }

    .mobile-push-20 {
        left: 20%
    }

    .mobile-pull-20 {
        left: -20%
    }

    .mobile-grid-25 {
        float: left;
        width: 25%
    }

    .mobile-prefix-25 {
        margin-left: 25%
    }

    .mobile-suffix-25 {
        margin-right: 25%
    }

    .mobile-push-25 {
        left: 25%
    }

    .mobile-pull-25 {
        left: -25%
    }

    .mobile-grid-30 {
        float: left;
        width: 30%
    }

    .mobile-prefix-30 {
        margin-left: 30%
    }

    .mobile-suffix-30 {
        margin-right: 30%
    }

    .mobile-push-30 {
        left: 30%
    }

    .mobile-pull-30 {
        left: -30%
    }

    .mobile-grid-35 {
        float: left;
        width: 35%
    }

    .mobile-prefix-35 {
        margin-left: 35%
    }

    .mobile-suffix-35 {
        margin-right: 35%
    }

    .mobile-push-35 {
        left: 35%
    }

    .mobile-pull-35 {
        left: -35%
    }

    .mobile-grid-40 {
        float: left;
        width: 40%
    }

    .mobile-prefix-40 {
        margin-left: 40%
    }

    .mobile-suffix-40 {
        margin-right: 40%
    }

    .mobile-push-40 {
        left: 40%
    }

    .mobile-pull-40 {
        left: -40%
    }

    .mobile-grid-45 {
        float: left;
        width: 45%
    }

    .mobile-grid-47 {
        float: left;
        width: 47.5%
    }

    .mobile-prefix-45 {
        margin-left: 45%
    }

    .mobile-suffix-45 {
        margin-right: 45%
    }

    .mobile-push-45 {
        left: 45%
    }

    .mobile-pull-45 {
        left: -45%
    }

    .mobile-grid-50 {
        float: left;
        width: 50%
    }

    .mobile-prefix-50 {
        margin-left: 50%
    }

    .mobile-suffix-50 {
        margin-right: 50%
    }

    .mobile-push-50 {
        left: 50%
    }

    .mobile-pull-50 {
        left: -50%
    }

    .mobile-grid-55 {
        float: left;
        width: 55%
    }

    .mobile-prefix-55 {
        margin-left: 55%
    }

    .mobile-suffix-55 {
        margin-right: 55%
    }

    .mobile-push-55 {
        left: 55%
    }

    .mobile-pull-55 {
        left: -55%
    }

    .mobile-grid-60 {
        float: left;
        width: 60%
    }

    .mobile-prefix-60 {
        margin-left: 60%
    }

    .mobile-suffix-60 {
        margin-right: 60%
    }

    .mobile-push-60 {
        left: 60%
    }

    .mobile-pull-60 {
        left: -60%
    }

    .mobile-grid-65 {
        float: left;
        width: 65%
    }

    .mobile-prefix-65 {
        margin-left: 65%
    }

    .mobile-suffix-65 {
        margin-right: 65%
    }

    .mobile-push-65 {
        left: 65%
    }

    .mobile-pull-65 {
        left: -65%
    }

    .mobile-grid-70 {
        float: left;
        width: 70%
    }

    .mobile-prefix-70 {
        margin-left: 70%
    }

    .mobile-suffix-70 {
        margin-right: 70%
    }

    .mobile-push-70 {
        left: 70%
    }

    .mobile-pull-70 {
        left: -70%
    }

    .mobile-grid-75 {
        float: left;
        width: 75%
    }

    .mobile-prefix-75 {
        margin-left: 75%
    }

    .mobile-suffix-75 {
        margin-right: 75%
    }

    .mobile-push-75 {
        left: 75%
    }

    .mobile-pull-75 {
        left: -75%
    }

    .mobile-grid-80 {
        float: left;
        width: 80%
    }

    .mobile-prefix-80 {
        margin-left: 80%
    }

    .mobile-suffix-80 {
        margin-right: 80%
    }

    .mobile-push-80 {
        left: 80%
    }

    .mobile-pull-80 {
        left: -80%
    }

    .mobile-grid-85 {
        float: left;
        width: 85%
    }

    .mobile-prefix-85 {
        margin-left: 85%
    }

    .mobile-suffix-85 {
        margin-right: 85%
    }

    .mobile-push-85 {
        left: 85%
    }

    .mobile-pull-85 {
        left: -85%
    }

    .mobile-grid-90 {
        float: left;
        width: 90%
    }

    .mobile-prefix-90 {
        margin-left: 90%
    }

    .mobile-suffix-90 {
        margin-right: 90%
    }

    .mobile-push-90 {
        left: 90%
    }

    .mobile-pull-90 {
        left: -90%
    }

    .mobile-grid-95 {
        float: left;
        width: 95%
    }

    .mobile-prefix-95 {
        margin-left: 95%
    }

    .mobile-suffix-95 {
        margin-right: 95%
    }

    .mobile-push-95 {
        left: 95%
    }

    .mobile-pull-95 {
        left: -95%
    }

    .mobile-grid-33 {
        float: left;
        width: 33.33333%
    }

    .mobile-prefix-33 {
        margin-left: 33.33333%
    }

    .mobile-suffix-33 {
        margin-right: 33.33333%
    }

    .mobile-push-33 {
        left: 33.33333%
    }

    .mobile-pull-33 {
        left: -33.33333%
    }

    .mobile-grid-66 {
        float: left;
        width: 66.66667%
    }

    .mobile-prefix-66 {
        margin-left: 66.66667%
    }

    .mobile-suffix-66 {
        margin-right: 66.66667%
    }

    .mobile-push-66 {
        left: 66.66667%
    }

    .mobile-pull-66 {
        left: -66.66667%
    }

    .mobile-grid-100 {
        clear: both;
        width: 100%
    }

    .mobile-top-0 {
        margin-top: 0
    }

    .mobile-top-5 {
        margin-top: 5px
    }

    .mobile-top-10 {
        margin-top: 10px
    }

    .mobile-top-15 {
        margin-top: 15px
    }

    .mobile-top-20 {
        margin-top: 20px
    }

    .mobile-top-30 {
        margin-top: 30px
    }

    .mobile-top-35 {
        margin-top: 35px
    }

    .mobile-top-40 {
        margin-top: 40px
    }

    .mobile-top-50 {
        margin-top: 50px
    }

    .mobile-top-60 {
        margin-top: 60px
    }

    .mobile-top-65 {
        margin-top: 65px
    }

    .mobile-top-70 {
        margin-top: 70px
    }

    .mobile-top-80 {
        margin-top: 80px
    }

    .mobile-top-90 {
        margin-top: 90px
    }

    .mobile-top-100 {
        margin-top: 100px
    }

    .mobile-top-130 {
        margin-top: 130px
    }

    .mobile-top-180 {
        margin-top: 180px
    }

    .mobile-top-200 {
        margin-top: 200px
    }

    .mobile-bottom-0 {
        margin-bottom: 0
    }

    .mobile-bottom-5 {
        margin-bottom: 5px
    }

    .mobile-bottom-10 {
        margin-bottom: 10px
    }

    .mobile-bottom-15 {
        margin-bottom: 15px
    }

    .mobile-bottom-20 {
        margin-bottom: 20px
    }

    .mobile-bottom-25 {
        margin-bottom: 25px
    }

    .mobile-bottom-30 {
        margin-bottom: 30px
    }

    .mobile-bottom-35 {
        margin-bottom: 35px
    }

    .mobile-bottom-40 {
        margin-bottom: 40px
    }

    .mobile-bottom-50 {
        margin-bottom: 50px
    }

    .mobile-bottom-60 {
        margin-bottom: 60px
    }

    .mobile-bottom-70 {
        margin-bottom: 70px
    }

    .mobile-bottom-80 {
        margin-bottom: 80px
    }

    .mobile-bottom-90 {
        margin-bottom: 90px
    }

    .mobile-bottom-100 {
        margin-bottom: 100px
    }

    .mobile-bottom-200 {
        margin-bottom: 200px
    }

    .mobile-bottom-300 {
        margin-bottom: 300px
    }

    .mobile-right-0 {
        margin-right: 0
    }

    .mobile-right-5 {
        margin-right: 5px
    }

    .mobile-right-10 {
        margin-right: 10px
    }

    .mobile-right-15 {
        margin-right: 15px
    }

    .mobile-right-20 {
        margin-right: 20px
    }

    .mobile-right-30 {
        margin-right: 30px
    }

    .mobile-right-40 {
        margin-right: 40px
    }

    .mobile-right-50 {
        margin-right: 50px
    }

    .mobile-right-60 {
        margin-right: 60px
    }

    .mobile-right-70 {
        margin-right: 70px
    }

    .mobile-right-80 {
        margin-right: 80px
    }

    .mobile-right-90 {
        margin-right: 90px
    }

    .mobile-right-100 {
        margin-right: 100px
    }

    .mobile-left-0 {
        margin-left: 0
    }

    .mobile-left-5 {
        margin-left: 5px
    }

    .mobile-left-10 {
        margin-left: 10px
    }

    .mobile-left-15 {
        margin-left: 15px
    }

    .mobile-left-20 {
        margin-left: 20px
    }

    .mobile-left-30 {
        margin-left: 30px
    }

    .mobile-left-40 {
        margin-left: 40px
    }

    .mobile-left-50 {
        margin-left: 50px
    }

    .mobile-left-60 {
        margin-left: 60px
    }

    .mobile-left-70 {
        margin-left: 70px
    }

    .mobile-left-80 {
        margin-left: 80px
    }

    .mobile-left-90 {
        margin-left: 90px
    }

    .mobile-left-100 {
        margin-left: 100px
    }

    .lh-20, .lh-50, .lh-60, .lh-70 {
        line-height: 1.3;
    }

    .m-f-8, .m-f-9, .m-f-10, .m-f-11, .m-f-12, .m-f-13, .m-f-14, .m-f-15, .m-f-16, .m-f-17, .m-f-18, .m-f-19, .m-f-20, .m-f-21, .m-f-22, .m-f-23, .m-f-24, .m-f-25, .m-f-26, .m-f-27, .m-f-28, .m-f-29, .m-f-30, .m-f-31, .m-f-32, .m-f-33, .m-f-34, .m-f-35, .m-f-36, .m-f-37, .m-f-38, .m-f-39, .m-f-40, .m-f-41, .m-f-42, .m-f-43, .m-f-44, .m-f-45, .m-f-46, .m-f-47, .m-f-48, .m-f-49, .m-f-50, .m-f-51, .m-f-52, .m-f-53, .m-f-54, .m-f-55, .m-f-56, .m-f-57, .m-f-58, .m-f-59, .m-f-60, .m-f-61, .m-f-62, .m-f-63, .m-f-64, .m-f-65, .m-f-66, .m-f-67, .m-f-68, .m-f-69, .m-f-70, .m-f-71, .m-f-72, .m-f-73, .m-f-74, .m-f-75, .m-f-76, .m-f-77, .m-f-78, .m-f-79, .m-f-80, .m-f-81, .m-f-82, .m-f-83, .m-f-84, .m-f-85, .m-f-86, .m-f-87, .m-f-88, .m-f-89, .m-f-90, .m-f-91, .m-f-92, .m-f-93, .m-f-94, .m-f-95, .m-f-96, .m-f-97, .m-f-98, .m-f-99, .m-f-100 {
        line-height: 1.3
    }

    .m-f-8 {
        font-size: 8px
    }

    .m-f-9 {
        font-size: 9px
    }

    .m-f-10 {
        font-size: 10px
    }

    .m-f-11 {
        font-size: 11px
    }

    .m-f-12 {
        font-size: 12px
    }

    .m-f-13 {
        font-size: 13px
    }

    .m-f-14 {
        font-size: 14px
    }

    .m-f-15 {
        font-size: 15px
    }

    .m-f-16 {
        font-size: 16px
    }

    .m-f-17 {
        font-size: 17px
    }

    .m-f-18 {
        font-size: 18px
    }

    .m-f-19 {
        font-size: 19px
    }

    .m-f-20 {
        font-size: 20px
    }

    .m-f-21 {
        font-size: 21px
    }

    .m-f-22 {
        font-size: 22px
    }

    .m-f-23 {
        font-size: 23px
    }

    .m-f-24 {
        font-size: 24px
    }

    .m-f-25 {
        font-size: 25px
    }

    .m-f-26 {
        font-size: 26px
    }

    .m-f-27 {
        font-size: 27px
    }

    .m-f-28 {
        font-size: 28px
    }

    .m-f-29 {
        font-size: 29px
    }

    .m-f-30 {
        font-size: 30px
    }

    .m-f-31 {
        font-size: 31px
    }

    .m-f-32 {
        font-size: 32px
    }

    .m-f-33 {
        font-size: 33px
    }

    .m-f-34 {
        font-size: 34px
    }

    .m-f-35 {
        font-size: 35px
    }

    .m-f-36 {
        font-size: 36px
    }

    .m-f-37 {
        font-size: 37px
    }

    .m-f-38 {
        font-size: 38px
    }

    .m-f-39 {
        font-size: 39px
    }

    .m-f-40 {
        font-size: 40px
    }

    .m-f-41 {
        font-size: 41px
    }

    .m-f-42 {
        font-size: 42px
    }

    .m-f-43 {
        font-size: 43px
    }

    .m-f-44 {
        font-size: 44px
    }

    .m-f-45 {
        font-size: 45px
    }

    .m-f-46 {
        font-size: 46px
    }

    .m-f-47 {
        font-size: 47px
    }

    .m-f-48 {
        font-size: 48px
    }

    .m-f-49 {
        font-size: 49px
    }

    .m-f-50 {
        font-size: 50px
    }

    .m-f-51 {
        font-size: 51px
    }

    .m-f-52 {
        font-size: 52px
    }

    .m-f-53 {
        font-size: 53px
    }

    .m-f-54 {
        font-size: 54px
    }

    .m-f-55 {
        font-size: 55px
    }

    .m-f-56 {
        font-size: 56px
    }

    .m-f-57 {
        font-size: 57px
    }

    .m-f-58 {
        font-size: 58px
    }

    .m-f-59 {
        font-size: 59px
    }

    .m-f-60 {
        font-size: 60px
    }

    .m-f-61 {
        font-size: 61px
    }

    .m-f-62 {
        font-size: 62px
    }

    .m-f-63 {
        font-size: 63px
    }

    .m-f-64 {
        font-size: 64px
    }

    .m-f-65 {
        font-size: 65px
    }

    .m-f-66 {
        font-size: 66px
    }

    .m-f-67 {
        font-size: 67px
    }

    .m-f-68 {
        font-size: 68px
    }

    .m-f-69 {
        font-size: 69px
    }

    .m-f-70 {
        font-size: 70px
    }

    .m-f-71 {
        font-size: 71px
    }

    .m-f-72 {
        font-size: 72px
    }

    .m-f-73 {
        font-size: 73px
    }

    .m-f-74 {
        font-size: 74px
    }

    .m-f-75 {
        font-size: 75px
    }

    .m-f-76 {
        font-size: 76px
    }

    .m-f-77 {
        font-size: 77px
    }

    .m-f-78 {
        font-size: 78px
    }

    .m-f-79 {
        font-size: 79px
    }

    .m-f-80 {
        font-size: 80px
    }

    .m-f-81 {
        font-size: 81px
    }

    .m-f-82 {
        font-size: 82px
    }

    .m-f-83 {
        font-size: 83px
    }

    .m-f-84 {
        font-size: 84px
    }

    .m-f-85 {
        font-size: 85px
    }

    .m-f-86 {
        font-size: 86px
    }

    .m-f-87 {
        font-size: 87px
    }

    .m-f-88 {
        font-size: 88px
    }

    .m-f-89 {
        font-size: 89px
    }

    .m-f-90 {
        font-size: 90px
    }

    .m-f-91 {
        font-size: 91px
    }

    .m-f-92 {
        font-size: 92px
    }

    .m-f-93 {
        font-size: 93px
    }

    .m-f-94 {
        font-size: 94px
    }

    .m-f-95 {
        font-size: 95px
    }

    .m-f-96 {
        font-size: 96px
    }

    .m-f-97 {
        font-size: 97px
    }

    .m-f-98 {
        font-size: 98px
    }

    .m-f-99 {
        font-size: 99px
    }

    .m-f-100 {
        font-size: 100px
    }

    /* overlay */

    .overlayInfoText {
        top: 9px;
        left: -30px;
        width: 150px;
    }


    .overlayInfoIcon {
        top: -33px;
        right: -24px;
    }


    .overlayPositionText {
        top: 91px;
        left: 121px;
    }

    .overlayPositionIcon {
        top: 39px;
        left: 44px;
    }

    .overlayCanvasText {
        top: -140px;
        left: 100px;
    }

    .overlayCanvasIcon {
        top: -245px;
        left: 300px;
    }

    .overlayElementAddText {
        top: -140px;
        left: 100px;
    }

    .overlayElementAddIcon {
        top: -100px;
        left: 0px;
    }
    /* overlay ende */


    /* Update nach Casarista Changes an CSS*/

    .configurator-bottom-container-desktop-col {
        padding: 15px 0px 0px 10px;
    }

    .configurator-scroll-option-panel .option-selector-wrapper-header-closed {
        margin-top: 0px !important;
    }

    .option-selector-background-container .option-selector-close-btn {
        height: 80px !important;
        padding: 20px 35px 20px 20px !important;
    }

    .option-selector-close-btn-text-close .option-selector-open-option-text::before {
        right: 0% !important;
        top: 50% !important;
        margin-top: -10px !important;
        width: 30px !important;
        height: 15px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='15' class='svg svg-icon' viewBox='0 0 30 15.638'%3E%3Cpath d='M.62 15.638a.585.585 0 0 1-.44-.189.615.615 0 0 1-.18-.44.643.643 0 0 1 .18-.44L14.56.189A.635.635 0 0 1 15 0a.585.585 0 0 1 .44.189l14.38 14.38a.615.615 0 0 1 .18.44.643.643 0 0 1-.18.44.629.629 0 0 1-.881 0L15 1.51 1.061 15.449a.619.619 0 0 1-.441.189Z'/%3E%3C/svg%3E") !important;
    }

    .root-container .configurator-dimension-text {
        margin-top: 0px !important;
    }

    .footer-bottom-deliver-text {
        letter-spacing: 0px;
        margin-top: 4px;
    }

    .helpOverlay-VisibleElement-inactive {
        display: inline;
    }

    .configurator-add-related-products-btn-container-roomplanner {
        display: inline-grid !important;
    }

    /* Ende Update nach Casarista Changes an CSS*/

    .hide-on-mobile {
        display: none !important;
    }

    .flyout-container-back {
        top: -44px !important;
        height: 44px !important;
    }

    .col-lg-6.button-leiste {
        padding: 14px 3px 14px 3px;
    }

    .btn-configurator.btn-fuehlen {
        min-width: unset;
    }

    .btn-configurator.btn-teilen,
    .button-leiste-container > button,
    .button-leiste-container > .alternated-footer-bar > button,
    .button-leiste-container > .classic-footer-bar > button {
        margin: 0px 3px !important;
    }
}

@media (max-width: 575.9px) {
    .btn.btn-configurator.btn-teilen,
    .btn.btn-configurator.btn-kaufen {
        margin: 0px !important;
    }


    .configuration-overview-column-header {
        font-size: 15px !important;
    }

    .configurator-top-btn-container {
        margin-top: 0;
        margin-bottom: 30px;
    }

    .configurator-checkout-container {
        margin-left: -15px;
        padding: 0 0 10px;
        text-align: left;
    }

    .btn.configurator-positions-btn {
        padding: .375rem .55rem;
        min-width: 34px;
        min-height: 34px;
    }

    .modal-dialog-configurator > .modal-content.popup-content > .modal-header > .modal-title {
        padding: 0px 8%;
        margin-top: 15px;
    }

    .modal-item-content {
        padding: 0px 5% 5% 5%;
        text-align: left;
    }

    .modal-item {
        max-width: 95%;
    }

    .popup-content:not(.image-content) {
        background-color: white !important;
        border-radius: 0px !important;
        max-height: 100vh !important;
        height: 99vh;
        width: 98vw;
    }

    .image-modal-wrapper {
        font-size: 16px;
    }

    .image-modal-submitted {
        padding: 0px 23%;
    }

    #image-request-text {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .popup-modal {
        z-index: 10001 !important;
    }

    .modal-dialog-configurator {
        justify-content: center;
    }

    .configurator-positions-btn,
    .configurator-save-btn,
    .configurator-checkout-btn {
        display: none;
    }

    .btn-configurator.info {
        top: 0px;
        right: 82vw;
    }

    .configurator-dimension-text > .btn-configurator {
        padding: 0.375rem 0.40rem;
        max-width: 40px;
        max-height: 40px;
        border: 2px solid #000;
        background-color: #fff;
        border-radius: 0px;
    }

    .configurator-dimension-text-container {
        position: absolute;
        top: 10px;
    }

    .fas.fa-ruler-vertical {
        display: block;
    }

    .configurator-shipping-date-text {
        position: absolute;
        left: 50vw;
        top: -51px;
        transform: unset;
        min-width: 46vw;
    }

    .btn.btn-configurator.btn-teilen,
    .btn.btn-configurator.btn-fuehlen,
    .btn.btn-configurator.btn-kaufen,
    .btn.btn-configurator.btn-save {
        max-width: 110px;
        font-size: 13px;
        height: 65px;
        z-index: 1;
        position: relative;
        min-width: calc(25% - 8px);
        padding: 0px;
    }

    .button-leiste-container > button,
    .button-leiste-container > .alternated-footer-bar > button,
    .button-leiste-container > .classic-footer-bar > button {
        margin: 0px 5px !important;
    }

    .button-leiste {
        padding: 10px 0px !important;
    }

    .footer-bottom-deliver-text > div {
        letter-spacing: 0px;
    }

    .button-leiste-container > a > svg,
    .button-leiste-container > .alternated-footer-bar > a > svg,
    .button-leiste-container > .classic-footer-bar > a > svg {
        float: none;
        height: 27px
    }

    .configurator-bottom-container-desktop-row {
        border: none;
    }

    .button-leiste-container {
        border-top: 1px solid #c2c2c2;
        padding-top: 10px;
    }

    .col-lg-6.button-leiste {
        justify-content: center;
    }

    .btn-save-span {
        padding: 0 5px 0 5px;
    }


    .configurator-seperator-text {
        display: none;
    }

    .col-footer-bottom-deliver-text,
    .configurator-bottom-container-desktop-col {
        display: block;
        flex: unset;
        max-width: unset;
    }

    .button-leiste-container {
        text-align: center;
    }

    /*#region switch Abmessungen*/
    .configurator-dimension-switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 28px;
    }

    .configurator-dimension-slider-span:before {
        height: 20px;
        width: 20px;
    }

    input:checked + .configurator-dimension-slider-span:before {
        -webkit-transform: translateX(22px);
        -ms-transform: translateX(22px);
        transform: translateX(22px);
    }
    /*#endregion switch Abmessungen*/
}

/* payment mobile */
@media (max-width: 1024px) {
    /* mobile query */
    .payment-wrapper .payment-messages {
        position: static;
        left: unset;
        max-width: unset;
        width: 100%;
    }

        .payment-wrapper .payment-messages .payment-message.payment-message-disabled {
            margin-top: 0;
            margin-bottom: 30px;
        }
}
/* payment mobile end*/

/*Für iPhone 6+, 7+ and 8+ Maße anzeigen*/
@media (max-width: 414px) {
    .button-leiste {
        padding: 10px 0px !important;
    }

    .btn.btn-configurator.btn-teilen,
    .btn.btn-configurator.btn-fuehlen,
    .btn.btn-configurator.btn-kaufen {
        min-width: calc(25% - 4px);
    }


    .btn-configurator.info {
        right: 86vw;
    }

    .configurator-add-related-products-btn-container-roomplanner {
        margin-left: 0px;
    }


    .btn.btn-configurator.btn-teilen, .btn.btn-configurator.btn-fuehlen, .btn.btn-configurator.btn-kaufen, .btn.btn-configurator.btn-save {
        max-width: calc(24% - 8px);
        margin: 0;
        width: calc(25% - 8px);
        height: auto;
        min-height: 60px;
    }

        .btn.btn-configurator.btn-teilen > .svg.svg-icon,
        .btn.btn-configurator.btn-fuehlen > .svg.svg-icon,
        .btn.btn-configurator.btn-fuehlen > img,
        .btn.btn-configurator.btn-kaufen > .svg.svg-icon,
        .btn.btn-configurator.btn-save > .svg.svg-icon {
            width: calc(25% - 2px);
            min-height: 33px;
            max-width: 24%;
            margin: 0;
            min-width: 28px;
        }

    .button-leiste-container {
        text-align: center;
    }

    .inputlinkshare {
        width: 100%;
    }

    .catalog-entity-item-big-image-container {
        height: calc(100% - 175px) !important;
    }


    .diomex-item-list-item > .col-12.col-xl-11.flyout-container > .flyout-wrapper > .flyout-body > .catalog-entity-item-big-image-container {
        height: calc(100% - 140px) !important;
        margin-bottom: 0px !important;
    }


    .diomex-item-list-item > .col-12.col-xl-11.flyout-container > .flyout-wrapper > .flyout-body {
        margin-top: 0px !important;
    }
}

/*Für Iphone 5 Maße anzeigen*/
@media (max-width: 375px) {
    .configurator-dimension-text-container {
        right: 16px;
    }

    .configurator-bottom-container-desktop-col {
        padding: 15px 0px 0px 10px;
    }

    .configurator-shipping-date-text {
        left: 200px;
        top: -46px;
    }

    .btn.btn-configurator.btn-teilen,
    .btn.btn-configurator.btn-fuehlen,
    .btn.btn-configurator.btn-kaufen,
    .btn.btn-configurator.btn-save {
        max-width: 25%;
    }

    .button-leiste {
        padding: 10px 0px !important;
    }

    .btn-configurator#masseAnzeigen {
        margin-right: 8px;
    }
}

@media (max-width: 320px) {

    .configurator-shipping-date-text {
        left: 185px;
        top: -39px;
    }

    .btn.btn-configurator.btn-teilen,
    .btn.btn-configurator.btn-fuehlen,
    .btn.btn-configurator.btn-kaufen,
    .btn.btn-configurator.btn-save {
        max-width: 25%;
    }

    .btn-configurator.info {
        right: 80vw;
    }

    .option-selector-close-btn-text-close .option-selector-open-option-text::after {
        font-size: 19px;
    }

    .option-selector-close-btn-text-close .option-selector-open-option-text::before {
        right: -35%;
    }

    .option-selector-background-container .option-selector-close-btn {
        padding: 15px 20px 10px 20px;
        align-items: center;
        display: flex;
    }

    .option-selector-close-btn-text-close .option-selector-open-option-text::before {
        right: -18% !important;
    }
}

@media (max-width: 280px) {
    .configurator-shipping-date-text {
        left: 160px;
        top: -37px;
    }

    .option-selector-hide-option-text::before {
        right: -58%;
    }

    .edit-mobil {
        width: 80px;
    }

    .option-selector-close-btn-text-close .option-selector-open-option-text {
        margin-left: -10px;
    }

    .btn-configurator#masseAnzeigen {
        margin-right: 9px;
    }

    .btn-save-span {
        padding: 0;
    }

    .btn.btn-configurator.btn-teilen, .btn.btn-configurator.btn-fuehlen, .btn.btn-configurator.btn-kaufen, .btn.btn-configurator.btn-save {
        font-size: 12px;
    }
}

/*#endregion media*/

.linkshare {
    border: none;
    background: #F3E600;
    color: var(--black);
    display: inline;
    line-height: 1.5;
    letter-spacing: 0.32px;
    font-weight: 400;
    font-family: var(--main-cas-font-family-gmedium), sans-serif;
    z-index: 100;
    width: 100%;
    height: 54px;
}

/* share tooltips */

.whatsapp-tooltip,
.mail-tooltip {
    padding: 5px 8px;
    position: relative;
}

.mail-tooltiptext,
.whatsapp-tooltiptext {
    display: none;
    color: #0000004D;
    font-size: 12px;
    right: -73px;
    top: 40px;
    position: absolute;
    width: 130px;
}

.mail-tooltip:hover .mail-tooltiptext,
.whatsapp-tooltip:hover .whatsapp-tooltiptext {
    display: block;
}

/* Ende share tooltips */

/* ende overlay Info */

/*#region Overlay */
.overlayInfo {
    top: -50px;
}

.overlayCanvas > #canvasdivref {
    justify-content: center;
    align-items: center;
    display: flex;
}

.overlayCanvas.helpOverlay-VisibleElement > #canvasdivref > canvas {
    width: 70% !important;
    height: 40% !important;
}

div.helpOverlay-VisibleElement.overlayCanvas > div#canvasdivref > div.configurator-dimension-text-container > div.configurator-dimension-text > button.btn.btn-configurator {
    background: transparent !important;
}

.OverlayInfoStep1 {
    top: 51px;
    right: 61px;
    position: relative;
    color: #fff;
    font-size: 20px;
    font-family: var(--main-cas-font-family-smregular);
}

.CustomHelpTextStep1 {
    position: relative;
    top: 45px;
    right: -32px;
}

.CustomHelpTextPositionStep1 {
    position: relative;
    top: -23px;
    right: -39px;
}

.OverlayPositionStep1 {
    top: 50px;
    right: -122px;
    position: relative;
    color: #fff;
    font-size: 20px;
    font-family: var(--main-cas-font-family-smregular);
}
/*#endregion Overlay*/

/*#region trustElement*/
.trust-element-total-wrapper {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 40px 0 50px 0;
    padding: 20px;
}

.trust-element-heading {
    font-weight: 300;
    font-size: 26px;
    line-height: 33px;
    font-family: var(--main-cas-font-family-smregular), times new roman,"serif";
    margin-bottom: 20px;
}

.trust-element-wrapper {
    display: block;
    padding: 0 0 10px 0;
}

.trust-element-icon {
    float: left;
    margin: 7px 0 0 0;
}

.left {
    float: left;
}

.trust-element-text {
    margin-left: 25px;
    font-weight: 400;
    color: #333;
}

    .trust-element-text strong {
        font-weight: 600;
        color: #000;
    }
/*#endregion trustElement*/

.steps .icon {
    aspect-ratio: 1/1;
    height: auto;
}

.mobile-grid-20 {
    float: left;
    width: 100%;
}

.mobile-grid-100 {
    clear: both;
    width: 100%;
}

.top-40 {
    margin-top: 40px;
}

.m-text-left {
    text-align: left;
}

.mobile-grid-80 {
    float: left;
    width: 80%;
}

.m-f-18 {
    font-size: 18px;
}

.mobile-bottom-50 {
    margin-bottom: 50px;
}

.wrapper, .inner-wrapper {
    max-width: 100vw;
    display: block;
}

/********************/

.steps .icon {
    background: #dcdcdc;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

.f-24 {
    font-size: 24px;
}

.f-16 {
    font-size: 16px;
}

.f-32 {
    font-size: 32px;
}

.f-60 {
    font-size: 60px;
}

.top-10 {
    margin-top: 10px;
}

.top-20 {
    margin-top: 20px;
}

.top-30 {
    margin-top: 30px;
}

.bottom-10 {
    margin-bottom: 10px;
}

.bottom-30 {
    margin-bottom: 30px;
}

.full-width {
    width: 100%;
}

.half-width {
    width: 50%;
}

.steps .icon .counter-text {
    position: absolute;
    bottom: 10%;
    left: 0;
    width: calc(100%);
    text-align: center;
    font-size: 2rem;
}

.steps.modal-item-wrapper > .container .icon.position-relative.mobile-grid-20 {
    height: 50px;
    width: 50px;
}

.steps.modal-item-wrapper .col-1 {
    max-width: 0px;
}

.font-heading {
    font-weight: 500;
    font-family: self-modern-regular,times new roman,"serif";
}

.position-relative {
    position: relative;
}

.grid-container {
    margin-left: auto;
    margin-right: auto;
}

/*region configurator mobile*/
.col-4.btn-area-mobile:is(.mobile *) {
    padding: 4px;
}

.content-root.configurator-root.configuratorIsOpen ~ .configurator-sum-mobile .p-configurator-sum-mobile .configurator-sum-mobile-h3 {
    display: none;
}




/*endregion configurator*/

h1, h2, h3, h4, h5 {
    font-weight: 500;
    font-family: self-modern-regular,times new roman,"serif";
}

body, select, input, textarea, button {
    color: #212529;
    font-family: grotex-regular,sans-serif;
}

.descriptionLink {
    text-decoration: underline;
    color: #000;
}

    .descriptionLink:hover {
        color: #000;
    }

.hide {
    display: none;
}

/*Checkbixen*/
.checkbox {
    width: 25px;
    height: 25px;
    border: 1px solid #707070;
    background: #fff;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    float: left;
    margin-right: 10px;
    text-align: center;
}

.checkout.checkbox {
    width: unset;
    height: unset;
    text-align: left;
}

.checked .checkbox {
    border-color: #f3e600;
    background-color: #f3e600;
}

.checkbox .checkmark {
    position: relative;
}

.hidden-chechobx-input {
    display: none;
}

.checkbox-caption {
    line-height: 25px;
}

.label-toggler {
    cursor: pointer;
}

.label-toggler {
    display: table !important;
}

/*Checkbixen*/
@media (min-width: 576px) {
    #CollaborateWithCasarista > div.container {
        max-width: unset;
    }
}

@media (max-width: 414px) {

    .mobile-grid-20 {
        width: 200%;
    }

    #CollaborateWithCasarista > div.container {
        padding-right: 0px;
        padding-left: 0px;
        margin-right: 0px;
        margin-left: 0px;
        max-width: none
    }

    .steps .icon {
        left: -20px;
    }

    .mobile-nopaddingright {
        padding-right: 0px;
    }

    .mobile-left-20 {
        left: -10px;
    }
}

/*#region checkout*/

:root {
    --text-secondary-color: #949494;
}

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, ins, kbd, q, samp, small, strong, sub, sup,
var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    background: transparent;
}

.checkout-wrapper ~ img {
    vertical-align: baseline;
}

.checkout-wrapper .validation-message {
    left: 15px;
    position: absolute;
    font-size: 12px;
    background: #fff;
    padding: 5px 10px;
    border-left: 3px solid red;
    border-radius: 3px;
    color: inherit;
    width: max-content;
}

article, aside, figure, footer, header, nav, section, details, summary {
    display: block
}

html {
    box-sizing: border-box
}

*, *:before, *:after {
    box-sizing: inherit
}

html {
    overflow-y: scroll
}

ul {
    list-style: none
}

.no-text-decoration {
    text-decoration: none;
    border: none
}

table {
    border-collapse: separate;
    border-spacing: 0
}

th {
    font-weight: 700;
    vertical-align: bottom
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--mediumGrey);
    margin: 1em 0;
    padding: 0
}

input, select {
    vertical-align: middle
}

    input[type="radio"] {
        vertical-align: middle
    }

    input[type="checkbox"] {
        vertical-align: baseline
    }

select, input, textarea {
    font: 99% sans-serif
}

table {
    font-size: inherit;
    font: 100%
}

small {
    font-size: 85%
}

strong {
    font-weight: 700
}

.clickable, label, input[type=button], input[type=submit], input[type=file], button {
    cursor: pointer;
    touch-action: manipulation;
}

button, input, select, textarea {
    margin: 0
}

    button, input[type=button] {
        width: auto;
        overflow: visible
    }

label {
    -webkit-touch-callout: none;
    iOS Safari -webkit-user-select: none;
    Safari -khtml-user-select: none;
    Konqueror HTML -moz-user-select: none;
    Old versions of Firefox -ms-user-select: none;
    Internet Explorer/Edge user-select: none;
    Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

body {
    font-family: var(--main-cas-font-family), sans-serif;
    font-weight: 400;
    background-color: var(--body-bg-color);
    font-size: 18px;
    line-height: 1.5;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    touch-action: manipulation;
}

h1, h2, h3, h4, h5 {
    font-weight: 500;
    font-family: 'Self-Modern-Regular', "Times New Roman", "serif";
}


body, select, input, textarea, button {
    color: var(--text-primary);
    font-family: var(--main-cas-font-family), sans-serif;
}

select {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--medium-grey);
    padding: 10px 40px 6px 20px;
    position: relative;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 18px;
    font-weight: 400;
}

a {
    color: var(--text-primary);
    border-bottom: 2px solid var(--text-primary);
    text-decoration: none;
}

.checkout-wrapper a {
    color: var(--black);
    text-decoration: none;
}

.border-radius-5 {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.select-wrapper {
    position: relative;
    display: inline-block;
}

    .select-wrapper::before {
        content: "";
        right: 15px;
        top: 50%;
        position: absolute;
        z-index: 1;
        width: 10px;
        height: 7px;
        display: inline-block;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

input {
    font-family: var(--main-cas-font-family), sans-serif;
    padding: 2px 10px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--input-border-color);
}

    input:focus {
        border: 1px solid var(--input-border-color-focus);
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"] {
        padding: 5px 10px;
        border-radius: 4px;
    }

    textarea,
    input.text,
    input[type="text"],
    input[type="button"],
    input[type="submit"] {
        -webkit-appearance: none;
    }

    input[type="radio"] {
        background: var(--mediumGrey);
        width: 1px;
        height: 1px;
        padding: 5px;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        border: 10px solid var(--mediumGrey);
        -moz-appearance: None;
        -webkit-appearance: none;
        -webkit-transition: background 400ms ease;
        -moz-transition: background 400ms ease;
        -ms-transition: background 400ms ease;
        -o-transition: background 400ms ease;
        transition: background 400ms ease;
    }

        input[type="radio"]:checked {
            background: var(--white);
            border-color: var(--yellow);
        }

.btn.checkout {
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: inherit;
    padding: 0 20px;
    letter-spacing: 0.7px;
    line-height: 50px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: unset;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    background: var(--btn-primary-bg-color);
    color: var(--btn-primary-text-color);
    border: 2px solid var(--btn-primary-border-color);
    font-weight: 500;
}


.btn .svg-btn-arrow {
    position: relative;
    top: 0px;
    margin-left: 10px;
}

.btn.btn-transparent .svg-btn-arrow {
    top: -1px;
}

.btn .svg-btn-arrow path {
    fill: var(--white);
}

.btn.btn-secondary .svg-btn-arrow path,
.btn.btn-yellow .svg-btn-arrow path {
    fill: var(--black);
}

.bnt.btn-secondary:focus {
    color: #fff;
}


.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.btn:focus, .btn:active:focus {
    outline: 0;
    border: 2px solid transparent;
}

.btn-small {
    line-height: 35px;
    font-size: 16px;
}

    .btn-small .svg-btn-arrow {
        position: relative;
        top: 1px;
        margin-left: 3px;
    }

.btn .btn-icon {
    aspect-ratio: 1 / 1;
    width: auto;
    margin-right: 10px;
}

.btn-small .btn-icon {
    margin-top: 6px;
    height: 20px;
}

.btn .btn-icon.btn-icon-material {
}

.btn.checkout.btn-secondary {
    background: var(--white);
    color: var(--black);
    border: 2px solid var(--black);
}

.btn-negative {
    background: var(--btn-negative-bg-color);
    color: var(--btn-negative-text-color);
    border: 2px solid var(--btn-negative-border-color);
}

    .btn-negative:focus, .btn-negative:active:focus,
    .btn-secondary:focus, .btn-secondary:active:focus {
        border: 2px solid var(--black);
    }


.btn.btn-secondary:focus,
.btn.btn-secondary:active,
.btn.btn-secondary:hover {
    background-color: var(--white);
    color: var(--black);
    border: 2px solid #000;
}


.btn.checkout.btn-yellow {
    background: var(--yellow);
    color: var(--black);
    border: 2px solid var(--yellow);
}

.btn-light {
    background: none;
}

.text-primary {
    color: var(--text-primary);
}

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

    .text-secondary a {
        color: var(--text-secondary-color);
        border-color: var(--text-secondary-color);
    }

.text-white {
    color: var(--text-negative-color);
}

.text-green {
    color: var(--text-green-color);
}

.text-yellow {
    color: var(--yellow);
}


.seperator {
    border: none;
    border-bottom: 1px solid var(--seperator-bg-color);
}

.wrapper {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: table;
}

.inner-wrapper {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.full-width {
    width: 100%;
}

.max-width-20 {
    max-width: 20px;
}

.max-width-150 {
    max-width: 150px;
}

.max-width-260 {
    max-width: 260px;
}

.max-width-350 {
    max-width: 350px;
}

.max-width-380 {
    max-width: 380px;
}

.max-width-400 {
    max-width: 400px;
}

.max-width-460 {
    max-width: 460px;
}

.max-width-510 {
    max-width: 510px;
}

.max-width-620 {
    max-width: 620px;
}

.max-width-700 {
    max-width: 700px;
}

.max-width-840 {
    max-width: 840px;
}

.max-width-950 {
    max-width: 950px;
}

.max-width-1280 {
    max-width: 1280px;
}

.center {
    margin: 0 auto;
    display: table;
}

.vertical-center {
    position: absolute;
    left: 50%;
    top: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.bg-black {
    background: var(--black);
}

.bg-yellow {
    background: var(--yellow);
}

.bg-lightgrey {
    background: var(--grey);
}

.bg-grey {
    background: var(--mediumGrey);
}

.bg-white {
    background: var(--white);
}

.bg-white-08 {
    background: hsla(0,0%,100%,0.80);
}

.left {
    float: left;
}

.right {
    float: right;
}

.svg-icon-filled-grey .path {
    fill: var(--text-secondary-color);
}

.bold, .strong {
    font-weight: 500;
    font-family: grotex-medium,sans-serif;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}


.checkout-wrapper {
    max-width: 920px;
}

.cart-element.grid-container.bg-white {
    margin-left: 10px;
    margin-right: 10px;
}

.cart-description {
    font-size: 16px;
    line-height: 1.4;
}

.cart-price-subelement {
    font-size: 16px;
    font-weight: 100;
    line-height: 1.4;
}

.cart-details-link {
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-primary);
    border-bottom: 2px solid var(--text-primary);
    text-decoration: none;
    cursor: pointer;
}

.cart-details-link-wrapper.wrapper-detail {
    cursor: pointer;
}



.cart-image {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
}

    .cart-image.svg-icon {
        height: auto;
        max-height: 80px;
        object-fit: contain;
    }

.trust-element-wrapper {
    display: block;
    padding: 0 0 10px 0;
}

.trust-element-icon {
    float: left;
    margin: 7px 0 0 0;
}

.trust-element-text {
    margin-left: 25px;
    font-weight: 400;
    color: #333;
}

.flex-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
}

    .flex-wrapper .flex-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }
/* navigation CSS */
.nav-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
    gap: 20px;
    font-size: 16px;
    min-height: 50px;
    margin-left: 10px;
    margin-right: 10px;
}

.nav-element {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 25%;
    background: var(--nav-bg);
    border: 2px solid var(--nav-bg);
}

    .nav-element:hover {
        text-decoration: none;
        color: #000;
    }

    .nav-element.current {
        background: var(--yellow);
        border-color: var(--yellow);
        color: #000;
        font-weight: 500;
        font-family: grotex-medium,sans-serif;
    }

.nav-element-step-counter {
    padding-right: 5px;
}

.nav-element-step-icon {
}

.nav-element-text {
}

.nav-element {
    /*pointer-events: none;*/
}

.nav-wrapper > .nav-element.current, /* link to current nav element */
.nav-wrapper > .nav-element.checked, /* link to nav element, with valid contetn */
.nav-wrapper > .nav-element.current + .nav-element /* link to next nav element */ {
    pointer-events: all;
}

.nav-element.checked .nav-element-step-counter {
    display: none;
}

.nav-element.checked .nav-element-step-icon {
    width: 14px;
    height: 10px;
    margin-right: 5px;
    background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214.01%22%20height%3D%2210.428%22%20viewBox%3D%220%200%2014.01%2010.428%22%3E%3Cpath%20class%3D%22path%22%20d%3D%22M12.06%2C19.42l-4.77-4.8a1%2C1%2C0%2C0%2C1%2C1.39-1.43l.02.02%2C3.35%2C3.37L19.28%2C9.3a1%2C1%2C0%2C0%2C1%2C1.44%2C1.38l-.02.02-8.65%2C8.71Z%22%20transform%3D%22translate(-6.987%20-8.992)%22%20fill%3D%22%2328a835%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
}


.nav-element.checked {
    cursor: pointer;
}

/* navigation CSS END */

.input-wrapper {
}

.input-label {
    background: var(--white);
    border: 1px solid var(--mediumGrey);
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: block;
    position: relative;
    margin-bottom: 20px;
}

    .input-label.checkbox {
        background: none;
        border: none;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

.input-caption {
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    top: 15px;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

.checkbox .input-caption {
    top: 1px;
}

.checkout.input-wrapper .checkout-input.input-text:required:not(:placeholder-shown),
.checkout.input-wrapper .checkout-input.input-email:required:not(:placeholder-shown),
.checkout.input-wrapper .checkout-input.input-tel:required:not(:placeholder-shown) {
    background: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2019.06%2019.06%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23d4381b%22%20stroke-miterlimit%3D%2211.34%22%20stroke-width%3D%221.5%22%20d%3D%22m18.53.53-18%2018m0-18%2018%2018%22%2F%3E%3C%2Fsvg%3E') no-repeat right center;
    background-size: 15px;
}

.checkout.input-wrapper .checkout-input.input-text:valid:required,
.checkout.input-wrapper .checkout-input.input-email:valid:required,
.checkout.input-wrapper .checkout-input.input-tel:valid:required { /* input is valid */
    background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214.01%22%20height%3D%2210.428%22%20viewBox%3D%220%200%2014.01%2010.428%22%3E%3Cpath%20class%3D%22path%22%20d%3D%22M12.06%2C19.42l-4.77-4.8a1%2C1%2C0%2C0%2C1%2C1.39-1.43l.02.02%2C3.35%2C3.37L19.28%2C9.3a1%2C1%2C0%2C0%2C1%2C1.44%2C1.38l-.02.02-8.65%2C8.71Z%22%20transform%3D%22translate(-6.987%20-8.992)%22%20fill%3D%22%2328a835%22%2F%3E%3C%2Fsvg%3E') no-repeat right center;
    background-size: 15px;
}

.checkout.input-wrapper .input.input-checkbox,
.checkout.input-wrapper .input.input-checkbox:focus {
    margin: 0;
    width: auto;
    /* Add if not using autoprefixer */
    /*-webkit-appearance: none;*/
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: var(--white);
    /* Not removed via appearance */
    margin: 0;
    font: inherit;
    color: var(--yellow);
    width: 1.15em;
    height: 1.15em;
    border: 2px solid var(--mediumGrey);
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    cursor: pointer;
}

.valid.modified:not([type=checkbox]) {
    border-bottom: none !important;
    outline: none !important;
}

.checkout.input-wrapper .input.input-checkbox:checked {
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

.input.input-checkbox::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 400ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--white);
    /* Windows High Contrast Mode */
    background-color: var(--white);
}

.input.input-checkbox:checked::before {
    transform: scale(1);
}

.input-label.filled .input-caption, /* fallback for FF */
.input-label.focused .input-caption /* fallback for FF */ { /* when user focuses the input or input has a value */
    font-size: 12px;
    color: var(--text-secondary-color);
    padding-top: 7px;
    top: 0;
    padding-bottom: 2px;
}

.checkout.input-wrapper .input {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0 15px 7px 15px;
    font-size: 18px;
    line-height: 23px;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
    width: calc(100% - 30px);
    cursor: pointer;
    background-position: right center;
}

.invalid {
    outline: none;
}


.input::placeholder {
    color: transparent;
}

.checkout.input-wrapper .input.input-textarea {
    margin-top: 15px;
}

.input.input-textarea::placeholder {
    color: var(--text-secondary-color);
    font-size: 16px;
}

.input:focus::placeholder {
    color: var(--text-secondary-color);
}

.checkout.input-wrapper .input:focus,
.checkout.input-wrapper .input:focus-visible {
    outline: none;
    border: none;
}

.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    background: #fff;
    background-clip: content-box !important;
}

.present-wrapper .input-radio,
.present-wrapper .input-radio:checked,
.payment-wrapper .input-radio,
.payment-wrapper .input-radio:checked {
    width: 1px;
    height: 1px;
    background: transparent;
    border: none;
    float: left;
}

.present-selector-wrapper .input-label,
.payment-wrapper .input-label {
    border: none;
    margin: 0 0 5px 0;
    padding: 5px 0;
    border: 2px solid var(--white);
}

.payment-wrapper .input-label {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border: 2px solid var(--lightGrey);
}

.present-selector-wrapper .input-caption,
.payment-wrapper .input-caption {
    position: static;
    padding-left: 40px;
    color: var(--black);
    font-size: 18px;
}

.payment-image {
    margin-left: 40px;
    margin-right: 20px;
}

.payment-wrapper .input-caption {
    padding-left: 105px;
}

.present-wrapper .input-label.selected,
.payment-wrapper .input-label.selected old browsers {
    background: var(--yellow);
    font-weight: bold;
    border: 2px solid #fff;
}

.payment-further-description {
    display: none;
}

.selected.payment-further-description {
    display: block;
    color: var(--text-secondary-color);
    font-size: 14px;
    margin-left: 106px;
    font-weight: 100;
}

.payment-wrapper .input-label.selected {
    background: var(--white);
    border: 2px solid var(--yellow);
}

    .present-wrapper .input-label.selected .input-caption::before,
    .payment-wrapper .input-label.selected .input-caption::before {
        content: "";
        width: 14px;
        height: 10px;
        position: absolute;
        left: 10px;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214.01%22%20height%3D%2210.428%22%20viewBox%3D%220%200%2014.01%2010.428%22%3E%3Cpath%20class%3D%22path%22%20d%3D%22M12.06%2C19.42l-4.77-4.8a1%2C1%2C0%2C0%2C1%2C1.39-1.43l.02.02%2C3.35%2C3.37L19.28%2C9.3a1%2C1%2C0%2C0%2C1%2C1.44%2C1.38l-.02.02-8.65%2C8.71Z%22%20transform%3D%22translate(-6.987%20-8.992)%22%20fill%3D%22%2328a835%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
    }

.present-image {
    object-fit: cover;
    width: 100%;
    max-width: calc(100vw - 20px);
    height: 337px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.input-focus-tooltipp {
    display: none;
    align-items: center;
    position: absolute;
    z-index: 10;
    top: calc(100% + 10px);
    background: var(--white);
    border: 1px solid var(--mediumGrey);
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
    font-size: 14px;
}

.checkout.input-wrapper .input:focus + .input-focus-tooltipp {
    display: flex;
}

.input-focus-tooltipp .svg-icon {
    margin-right: 5px;
    height: 14px;
}

.tooltipp-content {
}

.input-help-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

.focused .input-help-icon,
.filled .input-help-icon {
    right: 15px;
    top: 10px;
    transform: none;
}

.checkout.input-wrapper .svg-arrow {
    position: absolute;
    right: 10px;
    top: calc(100% - 20px);
}

.checkout.input-wrapper .focused .input.input-textarea {
    min-height: 100px;
}

#datepicker-output .present-icon {
    height: 14px;
    width: auto;
    margin-right: 10px;
    margin-left: 5px;
    vertical-align: text-top;
    margin-top: 2px;
}

/* datepicker CSS */
.ui-datepicker {
    background: var(--white);
    border: 1px solid var(--grey);
    padding: 10px 20px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: none;
    min-width: 350px;
    max-width: 100vw;
    margin-top: 30px;
}

    .ui-datepicker .ui-datepicker-calendar {
        width: 100%;
        text-align: center;
        border-collapse: collapse;
    }

    .ui-datepicker .ui-datepicker-week-end {
        opacity: 0.5;
    }

    .ui-datepicker .ui-state-disabled {
        opacity: 0.3;
    }

    .ui-datepicker .calendar-row .ui-datepicker-week-col {
        padding-left: 30px;
        padding-right: 15px;
        border-right: 1px solid var(--mediumGrey);
        font-weight: 500;
        font-family: grotex-medium,sans-serif;
    }

    .ui-datepicker .calendar-row.calendar-row-present .ui-datepicker-week-col {
        background: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2211%22%20height%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2011.797%2012%22%3E%3Cpath%20d%3D%22M5.024%203.129h-4.6A.424.424%200%200%200%200%203.55v2.027a.424.424%200%200%200%20.424.424h4.6Z%22%2F%3E%3Cpath%20d%3D%22M11.373%203.128h-4.6V6h4.6a.424.424%200%200%200%20.424-.421V3.552a.424.424%200%200%200-.424-.424Z%22%2F%3E%3Cpath%20d%3D%22M.805%2011.579a.421.421%200%200%200%20.421.421h3.931V6.6H.805Z%22%2F%3E%3Cpath%20d%3D%22M6.643%2012h3.928a.421.421%200%200%200%20.421-.421V6.598H6.643Z%22%2F%3E%3Cpath%20d%3D%22M8.832.707a.678.678%200%200%201%20.925.925%206.464%206.464%200%200%201-.635.9h.776a6.205%206.205%200%200%200%20.379-.592%201.27%201.27%200%200%200%200-1.283%201.307%201.307%200%200%200-1.12-.653%201.388%201.388%200%200%200-.331.043%201.518%201.518%200%200%200-.312.131%207.071%207.071%200%200%200-2.472%202.355h.741A6.473%206.473%200%200%201%208.831.706Z%22%2F%3E%3Cpath%20d%3D%22M3.28.174a1.289%201.289%200%200%200-.643-.173%201.266%201.266%200%200%200-.643.176%201.3%201.3%200%200%200-.477.491%201.27%201.27%200%200%200%200%201.283%206.2%206.2%200%200%200%20.381.584h.773a6.482%206.482%200%200%201-.624-.9.677.677%200%200%201%20.925-.925A6.534%206.534%200%200%201%204.34%201.753a6.71%206.71%200%200%201%20.672.787h.741A7.072%207.072%200%200%200%203.278.18Z%22%2F%3E%3C%2Fsvg%3E') no-repeat 10px 33%;
        background-size: auto 15px;
    }

    .ui-datepicker .ui-datepicker-title {
        text-align: center;
        margin-bottom: 10px;
        line-height: 20px;
        font-size: 16px;
        font-weight: 500;
        font-family: grotex-medium,sans-serif;
        color: var(--text-secondary-color);
    }

    .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
        float: left;
        background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.005%22%20height%3D%2210%22%20viewBox%3D%220%200%207.005%2010%22%3E%3Cpath%20d%3D%22M1%2C10A1%2C1%2C0%2C0%2C1%2C.336%2C8.254L3.995%2C5%2C.336%2C1.748A1%2C1%2C0%2C1%2C1%2C1.664.253L7.005%2C5%2C1.664%2C9.749A1%2C1%2C0%2C0%2C1%2C1%2C10Z%22%20transform%3D%22translate(7.005%2010)%20rotate(180)%22%2F%3E%3C%2Fsvg%3E') no-repeat left center;
    }

    .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
        text-align: right;
        float: right;
        background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.005%22%20height%3D%2210%22%20viewBox%3D%220%200%207.005%2010%22%3E%3Cpath%20d%3D%22M1%2C10A1%2C1%2C0%2C0%2C1%2C.336%2C8.254L3.995%2C5%2C.336%2C1.748A1%2C1%2C0%2C1%2C1%2C1.664.253L7.005%2C5%2C1.664%2C9.749A1%2C1%2C0%2C0%2C1%2C1%2C10Z%22%20transform%3D%22translate(0%200)%22%2F%3E%3C%2Fsvg%3E') no-repeat right center;
    }

    .ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
        cursor: pointer;
        border: none;
        aspect-ratio: 1 / 1;
        width: 20px;
        background-size: auto 70%;
    }

        .ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon,
        .ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon {
            display: none;
        }

    .ui-datepicker .ui-state-default {
        border: none;
        padding: 0 5px;
    }

    .ui-datepicker tbody .calendar-row-selectable {
        cursor: pointer;
    }

        .ui-datepicker tbody .calendar-row-selectable.selected-week {
            border: 2px solid var(--yellow);
        }

    .ui-datepicker .calendar-row th {
        padding: 0 5px;
        line-height: 2;
        border-bottom: 1px solid var(--mediumGrey);
    }
/* datepicker CSS END */


.cart-details-table {
    width: 100%;
    border-collapse: collapse;
}

.cart-details-table-header {
}

.cart-details-table-header-tr {
}

.cart-details-table-header-th {
    text-align: left;
    font-family: 'Self-Modern-Regular', "Times New Roman", "serif";
    font-weight: 100;
    background-color: var(--grey);
}

.cart-details-table-header-th-subheading {
    background: var(--white);
    padding-left: 10px;
}

.cart-details-table-th {
    text-align: right;
    padding-right: 10px;
    vertical-align: top;
    background-color: var(--grey);
    width: 50%;
}

.cart-details-table-td {
    text-align: left;
    vertical-align: middle;
    padding-left: 10px;
}

.cart-details-table-td-img {
    padding: 0;
}

.cart-details-table-img {
    max-height: 80px;
    height: 100%;
    width: 100px;
    max-width: 100px;
    object-fit: cover;
}

.cart-details-table-tr {
    border-bottom: 10px solid transparent;
}

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0
}

.grid-container:before, .mobile-grid-5:before, .mobile-grid-10:before, .mobile-grid-15:before, .mobile-grid-20:before, .mobile-grid-25:before, .mobile-grid-30:before, .mobile-grid-35:before, .mobile-grid-40:before, .mobile-grid-45:before, .mobile-grid-50:before, .mobile-grid-55:before, .mobile-grid-60:before, .mobile-grid-65:before, .mobile-grid-70:before, .mobile-grid-75:before, .mobile-grid-80:before, .mobile-grid-85:before, .mobile-grid-90:before, .mobile-grid-95:before, .mobile-grid-100:before, .mobile-grid-33:before, .mobile-grid-66:before, .tablet-grid-5:before, .tablet-grid-10:before, .tablet-grid-15:before, .tablet-grid-20:before, .tablet-grid-25:before, .tablet-grid-30:before, .tablet-grid-35:before, .tablet-grid-40:before, .tablet-grid-45:before, .tablet-grid-50:before, .tablet-grid-55:before, .tablet-grid-60:before, .tablet-grid-65:before, .tablet-grid-70:before, .tablet-grid-75:before, .tablet-grid-80:before, .tablet-grid-85:before, .tablet-grid-90:before, .tablet-grid-95:before, .tablet-grid-100:before, .tablet-grid-33:before, .tablet-grid-66:before, .grid-5:before, .grid-10:before, .grid-15:before, .grid-16:before, .grid-20:before, .grid-25:before, .grid-30:before, .grid-35:before, .grid-40:before, .grid-45:before, .grid-50:before, .grid-55:before, .grid-60:before, .grid-65:before, .grid-70:before, .grid-75:before, .grid-80:before, .grid-85:before, .grid-90:before, .grid-95:before, .grid-100:before, .grid-33:before, .grid-66:before, .grid-offset:before, .clearfix:before, .grid-container:after, .mobile-grid-5:after, .mobile-grid-10:after, .mobile-grid-15:after, .mobile-grid-20:after, .mobile-grid-25:after, .mobile-grid-30:after, .mobile-grid-35:after, .mobile-grid-40:after, .mobile-grid-45:after, .mobile-grid-50:after, .mobile-grid-55:after, .mobile-grid-60:after, .mobile-grid-65:after, .mobile-grid-70:after, .mobile-grid-75:after, .mobile-grid-80:after, .mobile-grid-85:after, .mobile-grid-90:after, .mobile-grid-95:after, .mobile-grid-100:after, .mobile-grid-33:after, .mobile-grid-66:after, .tablet-grid-5:after, .tablet-grid-10:after, .tablet-grid-15:after, .tablet-grid-20:after, .tablet-grid-25:after, .tablet-grid-30:after, .tablet-grid-35:after, .tablet-grid-40:after, .tablet-grid-45:after, .tablet-grid-50:after, .tablet-grid-55:after, .tablet-grid-60:after, .tablet-grid-65:after, .tablet-grid-70:after, .tablet-grid-75:after, .tablet-grid-80:after, .tablet-grid-85:after, .tablet-grid-90:after, .tablet-grid-95:after, .tablet-grid-100:after, .tablet-grid-33:after, .tablet-grid-66:after, .grid-5:after, .grid-10:after, .grid-15:after, .grid-16:after, .grid-20:after, .grid-25:after, .grid-30:after, .grid-35:after, .grid-40:after, .grid-45:after, .grid-50:after, .grid-55:after, .grid-60:after, .grid-65:after, .grid-70:after, .grid-75:after, .grid-80:after, .grid-85:after, .grid-90:after, .grid-95:after, .grid-100:after, .grid-33:after, .grid-66:after, .grid-offset:after, .clearfix:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0
}

.grid-container:after, .mobile-grid-5:after, .mobile-grid-10:after, .mobile-grid-15:after, .mobile-grid-20:after, .mobile-grid-25:after, .mobile-grid-30:after, .mobile-grid-35:after, .mobile-grid-40:after, .mobile-grid-45:after, .mobile-grid-50:after, .mobile-grid-55:after, .mobile-grid-60:after, .mobile-grid-65:after, .mobile-grid-70:after, .mobile-grid-75:after, .mobile-grid-80:after, .mobile-grid-85:after, .mobile-grid-90:after, .mobile-grid-95:after, .mobile-grid-100:after, .mobile-grid-33:after, .mobile-grid-66:after, .tablet-grid-5:after, .tablet-grid-10:after, .tablet-grid-15:after, .tablet-grid-20:after, .tablet-grid-25:after, .tablet-grid-30:after, .tablet-grid-35:after, .tablet-grid-40:after, .tablet-grid-45:after, .tablet-grid-50:after, .tablet-grid-55:after, .tablet-grid-60:after, .tablet-grid-65:after, .tablet-grid-70:after, .tablet-grid-75:after, .tablet-grid-80:after, .tablet-grid-85:after, .tablet-grid-90:after, .tablet-grid-95:after, .tablet-grid-100:after, .tablet-grid-33:after, .tablet-grid-66:after, .grid-5:after, .grid-10:after, .grid-15:after, .grid-16:after, .grid-20:after, .grid-25:after, .grid-30:after, .grid-35:after, .grid-40:after, .grid-45:after, .grid-50:after, .grid-55:after, .grid-60:after, .grid-65:after, .grid-70:after, .grid-75:after, .grid-80:after, .grid-85:after, .grid-90:after, .grid-95:after, .grid-100:after, .grid-33:after, .grid-66:after, .grid-offset:after, .clearfix:after {
    clear: both
}

.grid-container {
    margin-left: auto;
    margin-right: auto
}

.mobile-grid-5, .mobile-grid-10, .mobile-grid-15, .mobile-grid-20, .mobile-grid-25, .mobile-grid-30, .mobile-grid-35, .mobile-grid-40, .mobile-grid-45, .mobile-grid-50, .mobile-grid-55, .mobile-grid-60, .mobile-grid-65, .mobile-grid-70, .mobile-grid-75, .mobile-grid-80, .mobile-grid-85, .mobile-grid-90, .mobile-grid-95, .mobile-grid-100, .mobile-grid-33, .mobile-grid-66, .tablet-grid-5, .tablet-grid-10, .tablet-grid-15, .tablet-grid-20, .tablet-grid-25, .tablet-grid-30, .tablet-grid-35, .tablet-grid-40, .tablet-grid-45, .tablet-grid-50, .tablet-grid-55, .tablet-grid-60, .tablet-grid-65, .tablet-grid-70, .tablet-grid-75, .tablet-grid-80, .tablet-grid-85, .tablet-grid-90, .tablet-grid-95, .tablet-grid-100, .tablet-grid-33, .tablet-grid-66, .grid-5, .grid-10, .grid-15, .grid-16, .grid-20, .grid-25, .grid-30, .grid-35, .grid-40, .grid-45, .grid-50, .grid-55, .grid-60, .grid-65, .grid-70, .grid-75, .grid-80, .grid-85, .grid-90, .grid-95, .grid-100, .grid-33, .grid-66 {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px
}

.grid-parent {
    padding-left: 0;
    padding-right: 0
}

.grid-offset {
    clear: both;
    margin-left: -10px;
    margin-right: -10px
}

.top-5 {
    margin-top: 5px
}

.top-10 {
    margin-top: 10px
}

.top-15 {
    margin-top: 15px
}

.top-20 {
    margin-top: 20px
}

.top-25 {
    margin-top: 25px
}

.top-30 {
    margin-top: 30px
}

.top-35 {
    margin-top: 35px
}

.top-40 {
    margin-top: 40px
}

.top-45 {
    margin-top: 45px
}

.top-50 {
    margin-top: 50px
}

.top-60 {
    margin-top: 60px
}

.top-65 {
    margin-top: 65px
}

.top-70 {
    margin-top: 70px
}

.top-80 {
    margin-top: 80px
}

.top-90 {
    margin-top: 90px
}

.top-100 {
    margin-top: 100px
}

.top-120 {
    margin-top: 120px
}

.top-130 {
    margin-top: 130px
}

.top-140 {
    margin-top: 140px
}

.top-150 {
    margin-top: 150px
}

.top-160 {
    margin-top: 160px
}

.top-180 {
    margin-top: 180px
}

.top-200 {
    margin-top: 200px
}

.bottom-5 {
    margin-bottom: 5px
}

.bottom-10 {
    margin-bottom: 10px
}

.bottom-15 {
    margin-bottom: 15px
}

.bottom-20 {
    margin-bottom: 20px
}

.bottom-25 {
    margin-bottom: 25px
}

.bottom-30 {
    margin-bottom: 30px
}

.bottom-35 {
    margin-bottom: 35px
}

.bottom-40 {
    margin-bottom: 40px
}

.bottom-50 {
    margin-bottom: 50px
}

.bottom-60 {
    margin-bottom: 60px
}

.bottom-70 {
    margin-bottom: 70px
}

.bottom-80 {
    margin-bottom: 80px
}

.bottom-90 {
    margin-bottom: 90px
}

.bottom-100 {
    margin-bottom: 100px
}

.bottom-120 {
    margin-bottom: 120px
}

.bottom-200 {
    margin-bottom: 200px
}

.bottom-300 {
    margin-bottom: 300px
}

.right-5 {
    margin-right: 5px
}

.right-10 {
    margin-right: 10px
}

.right-15 {
    margin-right: 15px
}

.right-20 {
    margin-right: 20px
}

.right-25 {
    margin-right: 25px
}

.right-30 {
    margin-right: 30px
}

.right-40 {
    margin-right: 40px
}

.right-50 {
    margin-right: 50px
}

.right-60 {
    margin-right: 60px
}

.right-70 {
    margin-right: 70px
}

.right-80 {
    margin-right: 80px
}

.right-90 {
    margin-right: 90px
}

.right-100 {
    margin-right: 100px
}

.left-5 {
    margin-left: 5px
}

.left-10 {
    margin-left: 10px
}

.left-15 {
    margin-left: 15px
}

.left-20 {
    margin-left: 20px
}

.left-25 {
    margin-left: 25px
}

.left-30 {
    margin-left: 30px
}

.left-40 {
    margin-left: 40px
}

.left-50 {
    margin-left: 50px
}

.left-60 {
    margin-left: 60px
}

.left-70 {
    margin-left: 70px
}

.left-80 {
    margin-left: 80px
}

.left-90 {
    margin-left: 90px
}

.left-100 {
    margin-left: 100px
}

.no-marin, .no-margin {
    margin: 0;
    padding: 0;
}

.no-lr-padding {
    padding-left: 0;
    padding-right: 0;
}

.no-r-padding {
    padding-right: 0;
}

.f-12, .f-13, .f-14, .f-15, .f-16, .f-17, .f-18, .f-19, .f-20, .f-21, .f-22, .f-23, .f-24, .f-26, .f-28, .f-30, .f-32, .f-34, .f-36 {
    line-height: 1.5
}

.f-38, .f-40, .f-44, .f-50, .f-60, .f-80 {
    line-height: 1.2
}

.f-12 {
    font-size: 12px
}

.f-13 {
    font-size: 13px
}

.f-14 {
    font-size: 14px
}

.f-15 {
    font-size: 14px
}

.f-16 {
    font-size: 16px
}

.f-17 {
    font-size: 17px
}

.f-18 {
    font-size: 18px
}

.f-19 {
    font-size: 19px
}

.f-20 {
    font-size: 20px
}

.f-21 {
    font-size: 21px
}

.f-22 {
    font-size: 22px
}

.f-23 {
    font-size: 23px
}

.f-24 {
    font-size: 24px
}

.f-26 {
    font-size: 26px
}

.f-28 {
    font-size: 28px
}

.f-30 {
    font-size: 30px
}

.f-32 {
    font-size: 32px
}

.f-34 {
    font-size: 34px
}

.f-36 {
    font-size: 36px
}

.f-38 {
    font-size: 38px
}

.f-40 {
    font-size: 40px
}

.f-44 {
    font-size: 44px
}

.f-50 {
    font-size: 50px
}

.f-60 {
    font-size: 60px
}

.f-80 {
    font-size: 80px;
    line-height: 80px;
}

.f-120 {
    font-size: 120px;
    line-height: 120px;
}

.lh-20 {
    line-height: 20px;
}

.lh-23 {
    line-height: 23px;
}

.lh-50 {
    line-height: 50px;
}

.lh-60 {
    line-height: 60px;
}

.lh-70 {
    line-height: 70px;
}

@media (min-width: 1025px) { /* desktop query */

    .push-5, .pull-5, .push-10, .pull-10, .push-15, .pull-15, .push-20, .pull-20, .push-25, .pull-25, .push-30, .pull-30, .push-35, .pull-35, .push-40, .pull-40, .push-45, .pull-45, .push-50, .pull-50, .push-55, .pull-55, .push-60, .pull-60, .push-65, .pull-65, .push-70, .pull-70, .push-75, .pull-75, .push-80, .pull-80, .push-85, .pull-85, .push-90, .pull-90, .push-95, .pull-95, .push-33, .pull-33, .push-66, .pull-66 {
        position: relative;
    }

    .hide-on-desktop {
        display: none !important
    }

    .grid-5 {
        float: left;
        width: 5%
    }

    .prefix-5 {
        margin-left: 5%
    }

    .suffix-5 {
        margin-right: 5%
    }

    .push-5 {
        left: 5%
    }

    .pull-5 {
        left: -5%
    }

    .grid-10 {
        float: left;
        width: 10%
    }

    .prefix-10 {
        margin-left: 10%
    }

    .suffix-10 {
        margin-right: 10%
    }

    .push-10 {
        left: 10%
    }

    .pull-10 {
        left: -10%
    }

    .grid-15 {
        float: left;
        width: 15%
    }

    .prefix-15 {
        margin-left: 15%
    }

    .suffix-15 {
        margin-right: 15%
    }

    .push-15 {
        left: 15%
    }

    .pull-15 {
        left: -15%
    }

    .grid-20 {
        float: left;
        width: 20%
    }

    .prefix-20 {
        margin-left: 20%
    }

    .suffix-20 {
        margin-right: 20%
    }

    .push-20 {
        left: 20%
    }

    .pull-20 {
        left: -20%
    }

    .grid-25 {
        float: left;
        width: 25%
    }

    .prefix-25 {
        margin-left: 25%
    }

    .suffix-25 {
        margin-right: 25%
    }

    .push-25 {
        left: 25%
    }

    .pull-25 {
        left: -25%
    }

    .grid-30 {
        float: left;
        width: 30%
    }

    .prefix-30 {
        margin-left: 30%
    }

    .suffix-30 {
        margin-right: 30%
    }

    .push-30 {
        left: 30%
    }

    .pull-30 {
        left: -30%
    }

    .grid-35 {
        float: left;
        width: 35%
    }

    .prefix-35 {
        margin-left: 35%
    }

    .suffix-35 {
        margin-right: 35%
    }

    .push-35 {
        left: 35%
    }

    .pull-35 {
        left: -35%
    }

    .grid-40 {
        float: left;
        width: 40%
    }

    .prefix-40 {
        margin-left: 40%
    }

    .suffix-40 {
        margin-right: 40%
    }

    .push-40 {
        left: 40%
    }

    .pull-40 {
        left: -40%
    }

    .grid-45 {
        float: left;
        width: 45%
    }

    .prefix-45 {
        margin-left: 45%
    }

    .suffix-45 {
        margin-right: 45%
    }

    .push-45 {
        left: 45%
    }

    .pull-45 {
        left: -45%
    }

    .grid-50 {
        float: left;
        width: 50%
    }

    .prefix-50 {
        margin-left: 50%
    }

    .suffix-50 {
        margin-right: 50%
    }

    .push-50 {
        left: 50%
    }

    .pull-50 {
        left: -50%
    }

    .grid-55 {
        float: left;
        width: 55%
    }

    .prefix-55 {
        margin-left: 55%
    }

    .suffix-55 {
        margin-right: 55%
    }

    .push-55 {
        left: 55%
    }

    .pull-55 {
        left: -55%
    }

    .grid-60 {
        float: left;
        width: 60%
    }

    .prefix-60 {
        margin-left: 60%
    }

    .suffix-60 {
        margin-right: 60%
    }

    .push-60 {
        left: 60%
    }

    .pull-60 {
        left: -60%
    }

    .grid-65 {
        float: left;
        width: 65%
    }

    .prefix-65 {
        margin-left: 65%
    }

    .suffix-65 {
        margin-right: 65%
    }

    .push-65 {
        left: 65%
    }

    .pull-65 {
        left: -65%
    }

    .grid-70 {
        float: left;
        width: 70%
    }

    .prefix-70 {
        margin-left: 70%
    }

    .suffix-70 {
        margin-right: 70%
    }

    .push-70 {
        left: 70%
    }

    .pull-70 {
        left: -70%
    }

    .grid-75 {
        float: left;
        width: 75%
    }

    .prefix-75 {
        margin-left: 75%
    }

    .suffix-75 {
        margin-right: 75%
    }

    .push-75 {
        left: 75%
    }

    .pull-75 {
        left: -75%
    }

    .grid-80 {
        float: left;
        width: 80%
    }

    .prefix-80 {
        margin-left: 80%
    }

    .suffix-80 {
        margin-right: 80%
    }

    .push-80 {
        left: 80%
    }

    .pull-80 {
        left: -80%
    }

    .grid-85 {
        float: left;
        width: 85%
    }

    .prefix-85 {
        margin-left: 85%
    }

    .suffix-85 {
        margin-right: 85%
    }

    .push-85 {
        left: 85%
    }

    .pull-85 {
        left: -85%
    }

    .grid-90 {
        float: left;
        width: 90%
    }

    .prefix-90 {
        margin-left: 90%
    }

    .suffix-90 {
        margin-right: 90%
    }

    .push-90 {
        left: 90%
    }

    .pull-90 {
        left: -90%
    }

    .grid-95 {
        float: left;
        width: 95%
    }

    .prefix-95 {
        margin-left: 95%
    }

    .suffix-95 {
        margin-right: 95%
    }

    .push-95 {
        left: 95%
    }

    .pull-95 {
        left: -95%
    }

    .grid-33 {
        float: left;
        width: 33.33333%
    }

    .prefix-33 {
        margin-left: 33.33333%
    }

    .suffix-33 {
        margin-right: 33.33333%
    }

    .push-33 {
        left: 33.33333%
    }

    .pull-33 {
        left: -33.33333%
    }

    .grid-66 {
        float: left;
        width: 66.66667%
    }

    .prefix-66 {
        margin-left: 66.66667%
    }

    .suffix-66 {
        margin-right: 66.66667%
    }

    .push-66 {
        left: 66.66667%
    }

    .pull-66 {
        left: -66.66667%
    }

    .grid-100 {
        clear: both;
        width: 100%
    }




    .show-on-mobile,
    .show-on-mobile-block {
        display: none;
    }

    a:hover {
        color: var(--text-primary);
    }

    .btn:hover {
        color: var(--black);
        text-decoration: none
    }

        .btn:hover .svg-btn-arrow path {
            fill: var(--black);
        }

    .btn.btn-yellow:hover .svg-btn-arrow path {
        fill: var(--black);
    }


    .btn-secondary:hover .svg-btn-arrow path {
        fill: var(--black);
    }

    .btn-secondary:hover {
        background: var(--white);
        color: var(--black);
        border: 2px solid var(--black);
    }

    .btn-negative:hover {
        background: var(--btn-negative-hover-bg-color);
        color: var(--btn-negative-hover-text-color);
        border: 2px solid var(--btn-negative-hover-border-color);
    }

    .btn-yellow:hover {
        background: var(--yellow);
        color: var(--black);
        border: 2px solid var(--yellow);
    }

    .btn-light:hover {
        background: none;
        color: var(--black);
        background-color: #dae0e5;
        border-color: #d3d9df;
    }

    .btn-light:active:focus,
    .btn-light:focus,
    .btn-light:active {
        background: none;
        color: var(--black);
    }

    .min-width-220 {
        min-width: 220px;
    }


    .present-wrapper .input-label.selected {
        border: 2px dotted var(--yellow);
    }

    .present-wrapper .input-label:hover {
        border: 2px dotted var(--yellow);
    }

    .delivery .cart-image {
        max-height: 240px;
    }


    .no-filling-image {
        display: flex;
        align-items: center;
    }

        .no-filling-image .cart-image {
            max-width: 100px;
            max-height: 60px;
            height: auto;
            float: none;
            object-fit: contain;
        }

    .ui-datepicker tbody .calendar-row-selectable:hover {
        background: var(--yellow);
    }
}

@media (min-width: 768px) {
    button.checkout-tooltip.checkout {
        width: auto;
        overflow: visible;
    }
}

@media (max-width: 767px) { /* mobile query */

    .mobile-push-5, .mobile-pull-5, .mobile-push-10, .mobile-pull-10, .mobile-push-15, .mobile-pull-15, .mobile-push-20, .mobile-pull-20, .mobile-push-25, .mobile-pull-25, .mobile-push-30, .mobile-pull-30, .mobile-push-35, .mobile-pull-35, .mobile-push-40, .mobile-pull-40, .mobile-push-45, .mobile-pull-45, .mobile-push-50, .mobile-pull-50, .mobile-push-55, .mobile-pull-55, .mobile-push-60, .mobile-pull-60, .mobile-push-65, .mobile-pull-65, .mobile-push-70, .mobile-pull-70, .mobile-push-75, .mobile-pull-75, .mobile-push-80, .mobile-pull-80, .mobile-push-85, .mobile-pull-85, .mobile-push-90, .mobile-pull-90, .mobile-push-95, .mobile-pull-95, .mobile-push-33, .mobile-pull-33, .mobile-push-66, .mobile-pull-66 {
        position: relative
    }

    .hide-on-mobile {
        display: none !important
    }

    .mobile-grid-5 {
        float: left;
        width: 5%
    }

    .mobile-prefix-2-5 {
        margin-left: 2.5%
    }

    .mobile-suffix-2-5 {
        margin-right: 2.5%
    }

    .mobile-prefix-5 {
        margin-left: 5%
    }

    .mobile-suffix-5 {
        margin-right: 5%
    }

    .mobile-push-5 {
        left: 5%
    }

    .mobile-pull-5 {
        left: -5%
    }

    .mobile-grid-10 {
        float: left;
        width: 10%
    }

    .mobile-prefix-10 {
        margin-left: 10%
    }

    .mobile-suffix-10 {
        margin-right: 10%
    }

    .mobile-push-10 {
        left: 10%
    }

    .mobile-pull-10 {
        left: -10%
    }

    .mobile-grid-15 {
        float: left;
        width: 15%
    }

    .mobile-prefix-15 {
        margin-left: 15%
    }

    .mobile-suffix-15 {
        margin-right: 15%
    }

    .mobile-push-15 {
        left: 15%
    }

    .mobile-pull-15 {
        left: -15%
    }

    .mobile-grid-20 {
        float: left;
        width: 20%
    }

    .mobile-prefix-20 {
        margin-left: 20%
    }

    .mobile-suffix-20 {
        margin-right: 20%
    }

    .mobile-push-20 {
        left: 20%
    }

    .mobile-pull-20 {
        left: -20%
    }

    .mobile-grid-25 {
        float: left;
        width: 25%
    }

    .mobile-prefix-25 {
        margin-left: 25%
    }

    .mobile-suffix-25 {
        margin-right: 25%
    }

    .mobile-push-25 {
        left: 25%
    }

    .mobile-pull-25 {
        left: -25%
    }

    .mobile-grid-30 {
        float: left;
        width: 30%
    }

    .mobile-prefix-30 {
        margin-left: 30%
    }

    .mobile-suffix-30 {
        margin-right: 30%
    }

    .mobile-push-30 {
        left: 30%
    }

    .mobile-pull-30 {
        left: -30%
    }

    .mobile-grid-35 {
        float: left;
        width: 35%
    }

    .mobile-prefix-35 {
        margin-left: 35%
    }

    .mobile-suffix-35 {
        margin-right: 35%
    }

    .mobile-push-35 {
        left: 35%
    }

    .mobile-pull-35 {
        left: -35%
    }

    .mobile-grid-40 {
        float: left;
        width: 40%
    }

    .mobile-prefix-40 {
        margin-left: 40%
    }

    .mobile-suffix-40 {
        margin-right: 40%
    }

    .mobile-push-40 {
        left: 40%
    }

    .mobile-pull-40 {
        left: -40%
    }

    .mobile-grid-45 {
        float: left;
        width: 45%
    }

    .mobile-grid-47 {
        float: left;
        width: 47.5%
    }

    .mobile-prefix-45 {
        margin-left: 45%
    }

    .mobile-suffix-45 {
        margin-right: 45%
    }

    .mobile-push-45 {
        left: 45%
    }

    .mobile-pull-45 {
        left: -45%
    }

    .mobile-grid-50 {
        float: left;
        width: 50%
    }

    .mobile-prefix-50 {
        margin-left: 50%
    }

    .mobile-suffix-50 {
        margin-right: 50%
    }

    .mobile-push-50 {
        left: 50%
    }

    .mobile-pull-50 {
        left: -50%
    }

    .mobile-grid-55 {
        float: left;
        width: 55%
    }

    .mobile-prefix-55 {
        margin-left: 55%
    }

    .mobile-suffix-55 {
        margin-right: 55%
    }

    .mobile-push-55 {
        left: 55%
    }

    .mobile-pull-55 {
        left: -55%
    }

    .mobile-grid-60 {
        float: left;
        width: 60%
    }

    .mobile-prefix-60 {
        margin-left: 60%
    }

    .mobile-suffix-60 {
        margin-right: 60%
    }

    .mobile-push-60 {
        left: 60%
    }

    .mobile-pull-60 {
        left: -60%
    }

    .mobile-grid-65 {
        float: left;
        width: 65%
    }

    .mobile-prefix-65 {
        margin-left: 65%
    }

    .mobile-suffix-65 {
        margin-right: 65%
    }

    .mobile-push-65 {
        left: 65%
    }

    .mobile-pull-65 {
        left: -65%
    }

    .mobile-grid-70 {
        float: left;
        width: 70%
    }

    .mobile-prefix-70 {
        margin-left: 70%
    }

    .mobile-suffix-70 {
        margin-right: 70%
    }

    .mobile-push-70 {
        left: 70%
    }

    .mobile-pull-70 {
        left: -70%
    }

    .mobile-grid-75 {
        float: left;
        width: 75%
    }

    .mobile-prefix-75 {
        margin-left: 75%
    }

    .mobile-suffix-75 {
        margin-right: 75%
    }

    .mobile-push-75 {
        left: 75%
    }

    .mobile-pull-75 {
        left: -75%
    }

    .mobile-grid-80 {
        float: left;
        width: 80%
    }

    .mobile-prefix-80 {
        margin-left: 80%
    }

    .mobile-suffix-80 {
        margin-right: 80%
    }

    .mobile-push-80 {
        left: 80%
    }

    .mobile-pull-80 {
        left: -80%
    }

    .mobile-grid-85 {
        float: left;
        width: 85%
    }

    .mobile-prefix-85 {
        margin-left: 85%
    }

    .mobile-suffix-85 {
        margin-right: 85%
    }

    .mobile-push-85 {
        left: 85%
    }

    .mobile-pull-85 {
        left: -85%
    }

    .mobile-grid-90 {
        float: left;
        width: 90%
    }

    .mobile-prefix-90 {
        margin-left: 90%
    }

    .mobile-suffix-90 {
        margin-right: 90%
    }

    .mobile-push-90 {
        left: 90%
    }

    .mobile-pull-90 {
        left: -90%
    }

    .mobile-grid-95 {
        float: left;
        width: 95%
    }

    .mobile-prefix-95 {
        margin-left: 95%
    }

    .mobile-suffix-95 {
        margin-right: 95%
    }

    .mobile-push-95 {
        left: 95%
    }

    .mobile-pull-95 {
        left: -95%
    }

    .mobile-grid-33 {
        float: left;
        width: 33.33333%
    }

    .mobile-prefix-33 {
        margin-left: 33.33333%
    }

    .mobile-suffix-33 {
        margin-right: 33.33333%
    }

    .mobile-push-33 {
        left: 33.33333%
    }

    .mobile-pull-33 {
        left: -33.33333%
    }

    .mobile-grid-66 {
        float: left;
        width: 66.66667%
    }

    .mobile-prefix-66 {
        margin-left: 66.66667%
    }

    .mobile-suffix-66 {
        margin-right: 66.66667%
    }

    .mobile-push-66 {
        left: 66.66667%
    }

    .mobile-pull-66 {
        left: -66.66667%
    }

    .mobile-grid-100 {
        clear: both;
        width: 100%
    }

    .mobile-top-0 {
        margin-top: 0
    }

    .mobile-top-5 {
        margin-top: 5px
    }

    .mobile-top-10 {
        margin-top: 10px
    }

    .mobile-top-15 {
        margin-top: 15px
    }

    .mobile-top-20 {
        margin-top: 20px
    }

    .mobile-top-30 {
        margin-top: 30px
    }

    .mobile-top-35 {
        margin-top: 35px
    }

    .mobile-top-40 {
        margin-top: 40px
    }

    .mobile-top-50 {
        margin-top: 50px
    }

    .mobile-top-60 {
        margin-top: 60px
    }

    .mobile-top-65 {
        margin-top: 65px
    }

    .mobile-top-70 {
        margin-top: 70px
    }

    .mobile-top-80 {
        margin-top: 80px
    }

    .mobile-top-90 {
        margin-top: 90px
    }

    .mobile-top-100 {
        margin-top: 100px
    }

    .mobile-top-130 {
        margin-top: 130px
    }

    .mobile-top-180 {
        margin-top: 180px
    }

    .mobile-top-200 {
        margin-top: 200px
    }

    .mobile-bottom-0 {
        margin-bottom: 0
    }

    .mobile-bottom-5 {
        margin-bottom: 5px
    }

    .mobile-bottom-10 {
        margin-bottom: 10px
    }

    .mobile-bottom-15 {
        margin-bottom: 15px
    }

    .mobile-bottom-20 {
        margin-bottom: 20px
    }

    .mobile-bottom-25 {
        margin-bottom: 25px
    }

    .mobile-bottom-30 {
        margin-bottom: 30px
    }

    .mobile-bottom-35 {
        margin-bottom: 35px
    }

    .mobile-bottom-40 {
        margin-bottom: 40px
    }

    .mobile-bottom-50 {
        margin-bottom: 50px
    }

    .mobile-bottom-60 {
        margin-bottom: 60px
    }

    .mobile-bottom-70 {
        margin-bottom: 70px
    }

    .mobile-bottom-80 {
        margin-bottom: 80px
    }

    .mobile-bottom-90 {
        margin-bottom: 90px
    }

    .mobile-bottom-100 {
        margin-bottom: 100px
    }

    .mobile-bottom-200 {
        margin-bottom: 200px
    }

    .mobile-bottom-300 {
        margin-bottom: 300px
    }

    .mobile-right-0 {
        margin-right: 0
    }

    .mobile-right-5 {
        margin-right: 5px
    }

    .mobile-right-10 {
        margin-right: 10px
    }

    .mobile-right-15 {
        margin-right: 15px
    }

    .mobile-right-20 {
        margin-right: 20px
    }

    .mobile-right-30 {
        margin-right: 30px
    }

    .mobile-right-40 {
        margin-right: 40px
    }

    .mobile-right-50 {
        margin-right: 50px
    }

    .mobile-right-60 {
        margin-right: 60px
    }

    .mobile-right-70 {
        margin-right: 70px
    }

    .mobile-right-80 {
        margin-right: 80px
    }

    .mobile-right-90 {
        margin-right: 90px
    }

    .mobile-right-100 {
        margin-right: 100px
    }

    .mobile-left-0 {
        margin-left: 0
    }

    .mobile-left-5 {
        margin-left: 5px
    }

    .mobile-left-10 {
        margin-left: 10px
    }

    .mobile-left-15 {
        margin-left: 15px
    }

    .mobile-left-20 {
        margin-left: 20px
    }

    .mobile-left-30 {
        margin-left: 30px
    }

    .mobile-left-40 {
        margin-left: 40px
    }

    .mobile-left-50 {
        margin-left: 50px
    }

    .mobile-left-60 {
        margin-left: 60px
    }

    .mobile-left-70 {
        margin-left: 70px
    }

    .mobile-left-80 {
        margin-left: 80px
    }

    .mobile-left-90 {
        margin-left: 90px
    }

    .mobile-left-100 {
        margin-left: 100px
    }

    .lh-20, .lh-50, .lh-60, .lh-70 {
        line-height: 1.3;
    }

    .m-f-8, .m-f-9, .m-f-10, .m-f-11, .m-f-12, .m-f-13, .m-f-14, .m-f-15, .m-f-16, .m-f-17, .m-f-18, .m-f-19, .m-f-20, .m-f-21, .m-f-22, .m-f-23, .m-f-24, .m-f-25, .m-f-26, .m-f-27, .m-f-28, .m-f-29, .m-f-30, .m-f-31, .m-f-32, .m-f-33, .m-f-34, .m-f-35, .m-f-36, .m-f-37, .m-f-38, .m-f-39, .m-f-40, .m-f-41, .m-f-42, .m-f-43, .m-f-44, .m-f-45, .m-f-46, .m-f-47, .m-f-48, .m-f-49, .m-f-50, .m-f-51, .m-f-52, .m-f-53, .m-f-54, .m-f-55, .m-f-56, .m-f-57, .m-f-58, .m-f-59, .m-f-60, .m-f-61, .m-f-62, .m-f-63, .m-f-64, .m-f-65, .m-f-66, .m-f-67, .m-f-68, .m-f-69, .m-f-70, .m-f-71, .m-f-72, .m-f-73, .m-f-74, .m-f-75, .m-f-76, .m-f-77, .m-f-78, .m-f-79, .m-f-80, .m-f-81, .m-f-82, .m-f-83, .m-f-84, .m-f-85, .m-f-86, .m-f-87, .m-f-88, .m-f-89, .m-f-90, .m-f-91, .m-f-92, .m-f-93, .m-f-94, .m-f-95, .m-f-96, .m-f-97, .m-f-98, .m-f-99, .m-f-100 {
        line-height: 1.3
    }

    .m-f-8 {
        font-size: 8px
    }

    .m-f-9 {
        font-size: 9px
    }

    .m-f-10 {
        font-size: 10px
    }

    .m-f-11 {
        font-size: 11px
    }

    .m-f-12 {
        font-size: 12px
    }

    .m-f-13 {
        font-size: 13px
    }

    .m-f-14 {
        font-size: 14px
    }

    .m-f-15 {
        font-size: 15px
    }

    .m-f-16 {
        font-size: 16px
    }

    .m-f-17 {
        font-size: 17px
    }

    .m-f-18 {
        font-size: 18px
    }

    .m-f-19 {
        font-size: 19px
    }

    .m-f-20 {
        font-size: 20px
    }

    .m-f-21 {
        font-size: 21px
    }

    .m-f-22 {
        font-size: 22px
    }

    .m-f-23 {
        font-size: 23px
    }

    .m-f-24 {
        font-size: 24px
    }

    .m-f-25 {
        font-size: 25px
    }

    .m-f-26 {
        font-size: 26px
    }

    .m-f-27 {
        font-size: 27px
    }

    .m-f-28 {
        font-size: 28px
    }

    .m-f-29 {
        font-size: 29px
    }

    .m-f-30 {
        font-size: 30px
    }

    .m-f-31 {
        font-size: 31px
    }

    .m-f-32 {
        font-size: 32px
    }

    .m-f-33 {
        font-size: 33px
    }

    .m-f-34 {
        font-size: 34px
    }

    .m-f-35 {
        font-size: 35px
    }

    .m-f-36 {
        font-size: 36px
    }

    .m-f-37 {
        font-size: 37px
    }

    .m-f-38 {
        font-size: 38px
    }

    .m-f-39 {
        font-size: 39px
    }

    .m-f-40 {
        font-size: 40px
    }

    .m-f-41 {
        font-size: 41px
    }

    .m-f-42 {
        font-size: 42px
    }

    .m-f-43 {
        font-size: 43px
    }

    .m-f-44 {
        font-size: 44px
    }

    .m-f-45 {
        font-size: 45px
    }

    .m-f-46 {
        font-size: 46px
    }

    .m-f-47 {
        font-size: 47px
    }

    .m-f-48 {
        font-size: 48px
    }

    .m-f-49 {
        font-size: 49px
    }

    .m-f-50 {
        font-size: 50px
    }

    .m-f-51 {
        font-size: 51px
    }

    .m-f-52 {
        font-size: 52px
    }

    .m-f-53 {
        font-size: 53px
    }

    .m-f-54 {
        font-size: 54px
    }

    .m-f-55 {
        font-size: 55px
    }

    .m-f-56 {
        font-size: 56px
    }

    .m-f-57 {
        font-size: 57px
    }

    .m-f-58 {
        font-size: 58px
    }

    .m-f-59 {
        font-size: 59px
    }

    .m-f-60 {
        font-size: 60px
    }

    .m-f-61 {
        font-size: 61px
    }

    .m-f-62 {
        font-size: 62px
    }

    .m-f-63 {
        font-size: 63px
    }

    .m-f-64 {
        font-size: 64px
    }

    .m-f-65 {
        font-size: 65px
    }

    .m-f-66 {
        font-size: 66px
    }

    .m-f-67 {
        font-size: 67px
    }

    .m-f-68 {
        font-size: 68px
    }

    .m-f-69 {
        font-size: 69px
    }

    .m-f-70 {
        font-size: 70px
    }

    .m-f-71 {
        font-size: 71px
    }

    .m-f-72 {
        font-size: 72px
    }

    .m-f-73 {
        font-size: 73px
    }

    .m-f-74 {
        font-size: 74px
    }

    .m-f-75 {
        font-size: 75px
    }

    .m-f-76 {
        font-size: 76px
    }

    .m-f-77 {
        font-size: 77px
    }

    .m-f-78 {
        font-size: 78px
    }

    .m-f-79 {
        font-size: 79px
    }

    .m-f-80 {
        font-size: 80px
    }

    .m-f-81 {
        font-size: 81px
    }

    .m-f-82 {
        font-size: 82px
    }

    .m-f-83 {
        font-size: 83px
    }

    .m-f-84 {
        font-size: 84px
    }

    .m-f-85 {
        font-size: 85px
    }

    .m-f-86 {
        font-size: 86px
    }

    .m-f-87 {
        font-size: 87px
    }

    .m-f-88 {
        font-size: 88px
    }

    .m-f-89 {
        font-size: 89px
    }

    .m-f-90 {
        font-size: 90px
    }

    .m-f-91 {
        font-size: 91px
    }

    .m-f-92 {
        font-size: 92px
    }

    .m-f-93 {
        font-size: 93px
    }

    .m-f-94 {
        font-size: 94px
    }

    .m-f-95 {
        font-size: 95px
    }

    .m-f-96 {
        font-size: 96px
    }

    .m-f-97 {
        font-size: 97px
    }

    .m-f-98 {
        font-size: 98px
    }

    .m-f-99 {
        font-size: 99px
    }

    .m-f-100 {
        font-size: 100px
    }

    .show-on-mobile {
        display: inline;
    }

    .show-on-mobile-block {
        display: block;
    }

    .m-no-floating {
        float: none;
    }


    .nav-wrapper {
        gap: 10px;
    }

    .nav-element-text {
        display: none;
    }

    .nav-element-step-counter {
        margin: 0;
        padding: 0;
    }

    .nav-element {
        width: unset;
        flex-grow: 3;
    }

        .nav-element.current {
            flex-grow: 10;
        }

            .nav-element.current .nav-element-text {
                display: flex;
            }

    .flex-wrapper {
        display: block;
    }

        .flex-wrapper .flex-wrapper {
            justify-content: flex-start;
        }

    .m-display-contents {
        display: contents;
    }

    .nav-element.checked .nav-element-step-icon {
        margin-right: 0;
    }

    .m-text-center {
        text-align: center;
    }

    .cart-image {
        width: 100%;
        max-height: 160px;
        min-height: 160px;
        object-fit: cover;
    }

    .payment-wrapper {
        margin-left: 10px;
        margin-right: 10px;
        width: calc(100% - 20px);
    }

    .no-filling-image .cart-image {
        width: 100px;
        max-height: 60px;
        height: auto;
        float: none;
        object-fit: contain;
    }

    .checkout.input-wrapper .input.input-textarea {
        min-height: 10vh;
    }

    .checkout.input-wrapper .focused .input.input-textarea {
        min-height: 20vh;
    }

    .present-image {
        max-height: 40vh;
    }

    .cart-details-table-img {
        max-width: 15vw;
        height: auto;
    }

    .cart-details-table-th,
    .cart-details-table-td {
        font-size: 14px;
    }

    /* datepicker CSS */
    .ui-datepicker {
        width: calc(100% - 20px);
        -moz-transform: translateX(-10px);
        -webkit-transform: translateX(-10px);
        -o-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        transform: translateX(-10px);
        margin-top: 20px;
    }

        .ui-datepicker .ui-state-default,
        .ui-datepicker .calendar-row .ui-datepicker-week-col {
            line-height: 35px;
        }

        .ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
        .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
            aspect-ratio: 1 / 2;
            background-size: auto 12px;
        }

        .ui-datepicker .ui-datepicker-title {
            line-height: 40px;
        }
    /* datepicker CSS END */

}

@media (min-width: 768px) and (max-width: 1024px) { /* tablet query */
    .tablet-push-5, .tablet-pull-5, .tablet-push-10, .tablet-pull-10, .tablet-push-15, .tablet-pull-15, .tablet-push-20, .tablet-pull-20, .tablet-push-25, .tablet-pull-25, .tablet-push-30, .tablet-pull-30, .tablet-push-35, .tablet-pull-35, .tablet-push-40, .tablet-pull-40, .tablet-push-45, .tablet-pull-45, .tablet-push-50, .tablet-pull-50, .tablet-push-55, .tablet-pull-55, .tablet-push-60, .tablet-pull-60, .tablet-push-65, .tablet-pull-65, .tablet-push-70, .tablet-pull-70, .tablet-push-75, .tablet-pull-75, .tablet-push-80, .tablet-pull-80, .tablet-push-85, .tablet-pull-85, .tablet-push-90, .tablet-pull-90, .tablet-push-95, .tablet-pull-95, .tablet-push-33, .tablet-pull-33, .tablet-push-66, .tablet-pull-66 {
        position: relative
    }

    .hide-on-tablet {
        display: none !important
    }

    .tablet-grid-5 {
        float: left;
        width: 5%
    }

    .tablet-prefix-5 {
        margin-left: 5%
    }

    .tablet-suffix-5 {
        margin-right: 5%
    }

    .tablet-push-5 {
        left: 5%
    }

    .tablet-pull-5 {
        left: -5%
    }

    .tablet-grid-10 {
        float: left;
        width: 10%
    }

    .tablet-prefix-10 {
        margin-left: 10%
    }

    .tablet-suffix-10 {
        margin-right: 10%
    }

    .tablet-push-10 {
        left: 10%
    }

    .tablet-pull-10 {
        left: -10%
    }

    .tablet-grid-15 {
        float: left;
        width: 15%
    }

    .tablet-prefix-15 {
        margin-left: 15%
    }

    .tablet-suffix-15 {
        margin-right: 15%
    }

    .tablet-push-15 {
        left: 15%
    }

    .tablet-pull-15 {
        left: -15%
    }

    .tablet-grid-20 {
        float: left;
        width: 20%
    }

    .tablet-prefix-20 {
        margin-left: 20%
    }

    .tablet-suffix-20 {
        margin-right: 20%
    }

    .tablet-push-20 {
        left: 20%
    }

    .tablet-pull-20 {
        left: -20%
    }

    .tablet-grid-25 {
        float: left;
        width: 25%
    }

    .tablet-prefix-25 {
        margin-left: 25%
    }

    .tablet-suffix-25 {
        margin-right: 25%
    }

    .tablet-push-25 {
        left: 25%
    }

    .tablet-pull-25 {
        left: -25%
    }

    .tablet-grid-30 {
        float: left;
        width: 30%
    }

    .tablet-prefix-30 {
        margin-left: 30%
    }

    .tablet-suffix-30 {
        margin-right: 30%
    }

    .tablet-push-30 {
        left: 30%
    }

    .tablet-pull-30 {
        left: -30%
    }

    .tablet-grid-35 {
        float: left;
        width: 35%
    }

    .tablet-prefix-35 {
        margin-left: 35%
    }

    .tablet-suffix-35 {
        margin-right: 35%
    }

    .tablet-push-35 {
        left: 35%
    }

    .tablet-pull-35 {
        left: -35%
    }

    .tablet-grid-40 {
        float: left;
        width: 40%
    }

    .tablet-prefix-40 {
        margin-left: 40%
    }

    .tablet-suffix-40 {
        margin-right: 40%
    }

    .tablet-push-40 {
        left: 40%
    }

    .tablet-pull-40 {
        left: -40%
    }

    .tablet-grid-45 {
        float: left;
        width: 45%
    }

    .tablet-prefix-45 {
        margin-left: 45%
    }

    .tablet-suffix-45 {
        margin-right: 45%
    }

    .tablet-push-45 {
        left: 45%
    }

    .tablet-pull-45 {
        left: -45%
    }

    .tablet-grid-50 {
        float: left;
        width: 50%
    }

    .tablet-prefix-50 {
        margin-left: 50%
    }

    .tablet-suffix-50 {
        margin-right: 50%
    }

    .tablet-push-50 {
        left: 50%
    }

    .tablet-pull-50 {
        left: -50%
    }

    .tablet-grid-55 {
        float: left;
        width: 55%
    }

    .tablet-prefix-55 {
        margin-left: 55%
    }

    .tablet-suffix-55 {
        margin-right: 55%
    }

    .tablet-push-55 {
        left: 55%
    }

    .tablet-pull-55 {
        left: -55%
    }

    .tablet-grid-60 {
        float: left;
        width: 60%
    }

    .tablet-prefix-60 {
        margin-left: 60%
    }

    .tablet-suffix-60 {
        margin-right: 60%
    }

    .tablet-push-60 {
        left: 60%
    }

    .tablet-pull-60 {
        left: -60%
    }

    .tablet-grid-65 {
        float: left;
        width: 65%
    }

    .tablet-prefix-65 {
        margin-left: 65%
    }

    .tablet-suffix-65 {
        margin-right: 65%
    }

    .tablet-push-65 {
        left: 65%
    }

    .tablet-pull-65 {
        left: -65%
    }

    .tablet-grid-70 {
        float: left;
        width: 70%
    }

    .tablet-prefix-70 {
        margin-left: 70%
    }

    .tablet-suffix-70 {
        margin-right: 70%
    }

    .tablet-push-70 {
        left: 70%
    }

    .tablet-pull-70 {
        left: -70%
    }

    .tablet-grid-75 {
        float: left;
        width: 75%
    }

    .tablet-prefix-75 {
        margin-left: 75%
    }

    .tablet-suffix-75 {
        margin-right: 75%
    }

    .tablet-push-75 {
        left: 75%
    }

    .tablet-pull-75 {
        left: -75%
    }

    .tablet-grid-80 {
        float: left;
        width: 80%
    }

    .tablet-prefix-80 {
        margin-left: 80%
    }

    .tablet-suffix-80 {
        margin-right: 80%
    }

    .tablet-push-80 {
        left: 80%
    }

    .tablet-pull-80 {
        left: -80%
    }

    .tablet-grid-85 {
        float: left;
        width: 85%
    }

    .tablet-prefix-85 {
        margin-left: 85%
    }

    .tablet-suffix-85 {
        margin-right: 85%
    }

    .tablet-push-85 {
        left: 85%
    }

    .tablet-pull-85 {
        left: -85%
    }

    .tablet-grid-90 {
        float: left;
        width: 90%
    }

    .tablet-prefix-90 {
        margin-left: 90%
    }

    .tablet-suffix-90 {
        margin-right: 90%
    }

    .tablet-push-90 {
        left: 90%
    }

    .tablet-pull-90 {
        left: -90%
    }

    .tablet-grid-95 {
        float: left;
        width: 95%
    }

    .tablet-prefix-95 {
        margin-left: 95%
    }

    .tablet-suffix-95 {
        margin-right: 95%
    }

    .tablet-push-95 {
        left: 95%
    }

    .tablet-pull-95 {
        left: -95%
    }

    .tablet-grid-33 {
        float: left;
        width: 33.33333%
    }

    .tablet-prefix-33 {
        margin-left: 33.33333%
    }

    .tablet-suffix-33 {
        margin-right: 33.33333%
    }

    .tablet-push-33 {
        left: 33.33333%
    }

    .tablet-pull-33 {
        left: -33.33333%
    }

    .tablet-grid-66 {
        float: left;
        width: 66.66667%
    }

    .tablet-prefix-66 {
        margin-left: 66.66667%
    }

    .tablet-suffix-66 {
        margin-right: 66.66667%
    }

    .tablet-push-66 {
        left: 66.66667%
    }

    .tablet-pull-66 {
        left: -66.66667%
    }

    .tablet-grid-100 {
        clear: both;
        width: 100%
    }

    .tablet-top-0 {
        margin-top: 0
    }

    .tablet-top-5 {
        margin-top: 5px
    }

    .tablet-top-10 {
        margin-top: 10px
    }

    .tablet-top-15 {
        margin-top: 15px
    }

    .tablet-top-20 {
        margin-top: 20px
    }

    .tablet-top-30 {
        margin-top: 30px
    }

    .tablet-top-35 {
        margin-top: 35px
    }

    .tablet-top-40 {
        margin-top: 40px
    }

    .tablet-top-50 {
        margin-top: 50px
    }

    .tablet-top-60 {
        margin-top: 60px
    }

    .tablet-top-65 {
        margin-top: 65px
    }

    .tablet-top-70 {
        margin-top: 70px
    }

    .tablet-top-80 {
        margin-top: 80px
    }

    .tablet-top-90 {
        margin-top: 90px
    }

    .tablet-top-100 {
        margin-top: 100px
    }

    .tablet-top-130 {
        margin-top: 130px
    }

    .tablet-top-180 {
        margin-top: 180px
    }

    .tablet-top-200 {
        margin-top: 200px
    }

    .tablet-bottom-0 {
        margin-bottom: 0
    }

    .tablet-bottom-5 {
        margin-bottom: 5px
    }

    .tablet-bottom-10 {
        margin-bottom: 10px
    }

    .tablet-bottom-15 {
        margin-bottom: 15px
    }

    .tablet-bottom-20 {
        margin-bottom: 20px
    }

    .tablet-bottom-25 {
        margin-bottom: 25px
    }

    .tablet-bottom-30 {
        margin-bottom: 30px
    }

    .tablet-bottom-35 {
        margin-bottom: 35px
    }

    .tablet-bottom-40 {
        margin-bottom: 40px
    }

    .tablet-bottom-50 {
        margin-bottom: 50px
    }

    .tablet-bottom-60 {
        margin-bottom: 60px
    }

    .tablet-bottom-70 {
        margin-bottom: 70px
    }

    .tablet-bottom-80 {
        margin-bottom: 80px
    }

    .tablet-bottom-90 {
        margin-bottom: 90px
    }

    .tablet-bottom-100 {
        margin-bottom: 100px
    }

    .tablet-bottom-200 {
        margin-bottom: 200px
    }

    .tablet-bottom-300 {
        margin-bottom: 300px
    }

    .tablet-right-0 {
        margin-right: 0
    }

    .tablet-right-5 {
        margin-right: 5px
    }

    .tablet-right-10 {
        margin-right: 10px
    }

    .tablet-right-15 {
        margin-right: 15px
    }

    .tablet-right-20 {
        margin-right: 20px
    }

    .tablet-right-30 {
        margin-right: 30px
    }

    .tablet-right-40 {
        margin-right: 40px
    }

    .tablet-right-50 {
        margin-right: 50px
    }

    .tablet-right-60 {
        margin-right: 60px
    }

    .tablet-right-70 {
        margin-right: 70px
    }

    .tablet-right-80 {
        margin-right: 80px
    }

    .tablet-right-90 {
        margin-right: 90px
    }

    .tablet-right-100 {
        margin-right: 100px
    }

    .tablet-left-0 {
        margin-left: 0
    }

    .tablet-left-5 {
        margin-left: 5px
    }

    .tablet-left-10 {
        margin-left: 10px
    }

    .tablet-left-15 {
        margin-left: 15px
    }

    .tablet-left-20 {
        margin-left: 20px
    }

    .tablet-left-30 {
        margin-left: 30px
    }

    .tablet-left-40 {
        margin-left: 40px
    }

    .tablet-left-50 {
        margin-left: 50px
    }

    .tablet-left-60 {
        margin-left: 60px
    }

    .tablet-left-70 {
        margin-left: 70px
    }

    .tablet-left-80 {
        margin-left: 80px
    }

    .tablet-left-90 {
        margin-left: 90px
    }

    .tablet-left-100 {
        margin-left: 100px
    }

    .t-f-8 {
        font-size: 8px
    }

    .t-f-9 {
        font-size: 9px
    }

    .t-f-10 {
        font-size: 10px
    }

    .t-f-11 {
        font-size: 11px
    }

    .t-f-12 {
        font-size: 12px
    }

    .t-f-13 {
        font-size: 13px
    }

    .t-f-14 {
        font-size: 14px
    }

    .t-f-15 {
        font-size: 15px
    }

    .t-f-16 {
        font-size: 16px
    }

    .t-f-17 {
        font-size: 17px
    }

    .t-f-18 {
        font-size: 18px
    }

    .t-f-19 {
        font-size: 19px
    }

    .t-f-20 {
        font-size: 20px
    }

    .t-f-21 {
        font-size: 21px
    }

    .t-f-22 {
        font-size: 22px
    }

    .t-f-23 {
        font-size: 23px
    }

    .t-f-24 {
        font-size: 24px
    }

    .t-f-25 {
        font-size: 25px
    }

    .t-f-26 {
        font-size: 26px
    }

    .t-f-27 {
        font-size: 27px
    }

    .t-f-28 {
        font-size: 28px
    }

    .t-f-29 {
        font-size: 29px
    }

    .t-f-30 {
        font-size: 30px
    }

    .t-f-31 {
        font-size: 31px
    }

    .t-f-32 {
        font-size: 32px
    }

    .t-f-33 {
        font-size: 33px
    }

    .t-f-34 {
        font-size: 34px
    }

    .t-f-35 {
        font-size: 35px
    }

    .t-f-36 {
        font-size: 36px
    }

    .t-f-37 {
        font-size: 37px
    }

    .t-f-38 {
        font-size: 38px
    }

    .t-f-39 {
        font-size: 39px
    }

    .t-f-40 {
        font-size: 40px
    }

    .t-f-41 {
        font-size: 41px
    }

    .t-f-42 {
        font-size: 42px
    }

    .t-f-43 {
        font-size: 43px
    }

    .t-f-44 {
        font-size: 44px
    }

    .t-f-45 {
        font-size: 45px
    }

    .t-f-46 {
        font-size: 46px
    }

    .t-f-47 {
        font-size: 47px
    }

    .t-f-48 {
        font-size: 48px
    }

    .t-f-49 {
        font-size: 49px
    }

    .t-f-50 {
        font-size: 50px
    }

    .t-f-51 {
        font-size: 51px
    }

    .t-f-52 {
        font-size: 52px
    }

    .t-f-53 {
        font-size: 53px
    }

    .t-f-54 {
        font-size: 54px
    }

    .t-f-55 {
        font-size: 55px
    }

    .t-f-56 {
        font-size: 56px
    }

    .t-f-57 {
        font-size: 57px
    }

    .t-f-58 {
        font-size: 58px
    }

    .t-f-59 {
        font-size: 59px
    }

    .t-f-60 {
        font-size: 60px
    }

    .t-f-61 {
        font-size: 61px
    }

    .t-f-62 {
        font-size: 62px
    }

    .t-f-63 {
        font-size: 63px
    }

    .t-f-64 {
        font-size: 64px
    }

    .t-f-65 {
        font-size: 65px
    }

    .t-f-66 {
        font-size: 66px
    }

    .t-f-67 {
        font-size: 67px
    }

    .t-f-68 {
        font-size: 68px
    }

    .t-f-69 {
        font-size: 69px
    }

    .t-f-70 {
        font-size: 70px
    }

    .t-f-71 {
        font-size: 71px
    }

    .t-f-72 {
        font-size: 72px
    }

    .t-f-73 {
        font-size: 73px
    }

    .t-f-74 {
        font-size: 74px
    }

    .t-f-75 {
        font-size: 75px
    }

    .t-f-76 {
        font-size: 76px
    }

    .t-f-77 {
        font-size: 77px
    }

    .t-f-78 {
        font-size: 78px
    }

    .t-f-79 {
        font-size: 79px
    }

    .t-f-80 {
        font-size: 80px
    }

    .t-f-81 {
        font-size: 81px
    }

    .t-f-82 {
        font-size: 82px
    }

    .t-f-83 {
        font-size: 83px
    }

    .t-f-84 {
        font-size: 84px
    }

    .t-f-85 {
        font-size: 85px
    }

    .t-f-86 {
        font-size: 86px
    }

    .t-f-87 {
        font-size: 87px
    }

    .t-f-88 {
        font-size: 88px
    }

    .t-f-89 {
        font-size: 89px
    }

    .t-f-90 {
        font-size: 90px
    }

    .t-f-91 {
        font-size: 91px
    }

    .t-f-92 {
        font-size: 92px
    }

    .t-f-93 {
        font-size: 93px
    }

    .t-f-94 {
        font-size: 94px
    }

    .t-f-95 {
        font-size: 95px
    }

    .t-f-96 {
        font-size: 96px
    }

    .t-f-97 {
        font-size: 97px
    }

    .t-f-98 {
        font-size: 98px
    }

    .t-f-99 {
        font-size: 99px
    }

    .t-f-100 {
        font-size: 100px
    }

    .hide-on-tablet {
        display: none;
    }

    .show-on-mobile {
        display: none;
    }


    .show-on-mobile-block {
        display: none;
    }

    .payment-wrapper {
        margin-left: 10px;
        margin-right: 10px;
        width: calc(100% - 20px);
    }

    .delivery .cart-image {
        max-height: 280px;
    }

    .no-filling-image {
        display: flex;
        align-items: center;
    }

        .no-filling-image .cart-image {
            max-width: 100px;
            max-height: 60px;
            height: auto;
            float: none;
            object-fit: contain;
        }
}
/*#endregion checkout*/

/* Gutscheine */
.gutschein-input-container {
    position: relative;
}

    .gutschein-input-container:focus-visible {
        outline: none;
    }

.gutschein-input {
    width: 100%;
    padding-right: 80px;
    border: none;
}

    .gutschein-input:focus-visible {
        outline: none;
    }

.gutschein-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 58px;
    background-color: #999;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    position: relative;
    padding: 0;
    transition: background-color 0.3s ease;
    font-size: medium;
    border: 0px;
}

    .gutschein-save-btn.filled {
        background-color: #000;
        color:#FFF;
    }

    .gutschein-save-btn:hover {
        background-color: #777;
    }

@media (min-width: 767px) {

    .gutschein-save-btn {
        width: 210px;
        float: right;
    }
}

.input-label.filled > .gutschein-input:not(:placeholder-shown) + .gutschein-save-btn,
.gutschein-input:focus:not(:placeholder-shown) + .gutschein-save-btn {
    opacity: 1;
    visibility: visible;
}

.gutschein-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
}

.gutschein-valid {
    background-color: white;
    border: 1px solid #CCCCCC;
    margin-top: 15px;
    width: fit-content;
}

.gutschein-invalid {
    background-color: white;
    border: 1px solid #D4381B;
    margin-bottom: 10px;
    width: 99%;
}

.gutschein-output {
    padding-left: 6px;
}

.btn-remove-gutschein {
    float: right;
    padding-right: 13px;
}

.font-regular {
    font-family: var(--main-cas-font-family);
}

.font-bold {
    font-family: var(--main-cas-font-family-gmedium);
}

@media(max-width: 767px) {
    .gutschein-valid, .gutschein-invalid {
        margin-top: 10px;
        max-width: 97%;    
    }

    .btn-remove-gutschein {
        float: right;
        padding-right: 4px;
    }
}

/* Gutscheine */

.product-selector-list-item-container.active {
    background-color: #F5E961;
    border-radius: 0px !important;
    border-bottom: 0px solid rgba(178, 0, 26, 0) !important;
    border-top: 0px solid rgba(178, 0, 26, 0) !important;
    border-left: 0px solid rgba(0,0,0,0) !important;
    border-right: 0px solid rgba(0,0,0,0) !important;
    z-index: 1 !important;
    cursor: pointer;
    color: #5B7387 !important;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.product-selector-modal {
    display: block;
    padding-left: calc(25% - 10em);
    padding-right: calc(25% - 10em);
}

.product-selector-modal-dialog {
    max-width: 100%;
    height: calc(100vh - 90px);
    margin: .5rem;
}

.product-selector-step-font {
    font-family: OpenSans-Bold;
    color: #5B7387;
    font-size: 18px;
    margin-bottom: 40px;
}

.product-selector-modal-body {
    height: 60%;
}

.product-selector-modal-header {
    height: auto;
    overflow-y: hidden;
}

.product-selector-modal-header-items {
    width: 100%;
    margin: auto;
}

.product-selector-modal-header-item-name {
    padding: 10px;
    margin: 0px;
}

.product-selector-list-image {
    width: 120px;
    padding-left: 8px;
}

    .product-selector-list-image img {
        width: 100%;
        height: auto;
        max-width: 200px;
    }

.product-selector-list-name {
    word-wrap: break-word;
    font-size: 16px;
    color: black;
    font-weight: 400;
    font-family: var(--main-cas-font-family-lglmedium);
}

.product-selector-list-desc {
    margin-bottom: 5px;
    margin-right: 5px;
    font-family: var(--main-cas-font-family-lglmedium);
    color: black;
    font-size: 14px;
    margin-top: 0px;
    line-height: 1;
}

[ProductConfigurationList].product-selector-list-description-detail {
    word-wrap: break-word;
    margin-bottom: 5px;
}

[ProductConfigurationList].product-selector-list-price {
    text-align: end;
    margin-bottom: 5px;
    margin-right: 5px;
    font-family: var(--main-cas-font-family-gmedium);
    color: black;
}

[ProductConfigurationList].product-selector-list-price-mobile:is(.mobile *) {
    font-family: var(--main-cas-font-family-lglmedium);
    color: black;
    font-size: 14px;
    display: block;
    float: none;
    text-align: end;
}

[ProductConfigurationList].product-selector-list-price-mobile:is(.desktop *) {
    display: none;
}

.product-selector-list-table {
    width: 100%;
}

.product-selector-vertical-btn-group {
    margin: 0px 0px 10px 0px;
}

.addProductModalContentList {
    height: 100%;
}

.product-selector-modal-product-name {
    padding: 10px;
    margin: 0px;
}

.product-selector-btn-remove-product {
    z-index: 1;
    position: absolute;
    right: 14px;
    font-size: 18px;
    padding: 0px 6px;
    margin: 3px;
    background-color: white;
}

.product-selector-flyout-body {
    padding: 20px;
}

.index-col-left {
    max-width: 100vw;
    flex: 100%;
}

.list-group {
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.12), 0 0px 0px 0 rgba(0, 0, 0, 0.08);
}

.product-selector-list-item-container {
    margin-top: 10px;
    z-index: auto;
}

.row {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

@media (max-width: 786px) {
    .product-configuration-list-image {
        max-width: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-configuration-list-detail {
        padding: 0px;
        flex: 1 1 225px;
    }
}

@media (max-width: 1399px) {
    .product-configuration-list-image {
        padding-left: 0;
    }
}

.product-selector-list-table.product-configuration-list-table > .row {
    flex-wrap: nowrap;
}

.product-selector-list-desc {
    text-align: end;
}

/*#region Error Handling*/
.my-reconnect-modal > div {
    background: rgb(0 0 0 / 60%);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10001;
    overflow: hidden;
    text-align: center;
    font-weight: bold;
}

    .my-reconnect-modal > div > div.errorMessage {
        background: #fff;
        max-width: 1024px;
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        box-shadow: 0 0 50px 0 rgb(0 0 0 / 30%);
        z-index: 10;
        margin: auto;
        padding: 70px 0 60px 0;
        overflow: hidden;
    }

.errorMessage-button-wrapper {
    position: static;
    bottom: 30px;
    width: 100%;
    justify-content: center;
    display: flex;
}

.errorMessage-button.btn-yellow {
    background: #F3E600;
    color: black;
    border: 2px solid var(--btn-yellow-border-color);
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    font-family: var(--main-cas-font-family-gmedium),sans-serif;
    height: unset;
    width: 45%;
    bottom: 0px;
}

    .errorMessage-button.btn-yellow span {
        font-size: 20px;
        padding: 10px 0;
        display: block;
    }

.renderMessage-headline,
.errorMessage-headline {
    text-align: center;
    font: normal normal normal 42px/52px Self Modern;
    font-family: var(--main-cas-font-family-smregular);
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
}

.renderMessage-headline {
    font-size: 22px;
}

.renderMessage-subheadline,
.errorMessage-subheadline {
    text-align: center;
    font-family: var(--main-cas-font-family-glight);
    font-size: 22px;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    font-weight: 100;
    padding: 10px 10px 0 10px;
}

.renderMessage-subheadline {
    font-size: 18px;
}

.wrapper-render-img {
    min-height: 193px;
}

.errorMessage-image {
    padding: 70px 0 70px 0;
}

.components-reconnect-hide > div {
    display: none;
}

.components-reconnect-show > div {
    display: none;
}

.components-reconnect-show > .show {
    display: block;
}

.components-reconnect-failed > div {
    display: none;
}

.components-reconnect-failed > .failed {
    display: block;
}

.components-reconnect-rejected > div {
    display: none;
}

.components-reconnect-rejected > .rejected {
    display: block;
}

.my-reconnect-modal > div > div.errorMessage {
    padding: 60px 30px;
}

@media (max-width: 1050px) {
    .my-reconnect-modal > div > div.errorMessage {
        width: 95%;
        position: absolute;
    }

    .errorMessage-subheadline {
        padding: 18px;
    }
}

@media (max-width: 767px) {
    mobile query

    .errorMessage-headline {
        font-size: 28px;
        line-height: 36px;
    }

    .errorMessage-image {
        height: unset;
        display: inline-block;
    }

    .errorMessage-button.btn-yellow {
        padding: 0;
        width: 100%;
    }
}

@media (max-width: 445px) {
    .errorMessage-subheadline {
        font-family: var(--main-cas-font-family-glight);
        font-size: 18px;
    }

    .errorMessage-button {
        width: 90%;
    }

        .errorMessage-button > span {
            font-family: var(--main-cas-font-family-gmedium);
            font-size: 20px;
        }

    .errorMessage-headline {
        font-size: 36px;
        padding: 0px 20px;
        line-height: 2rem;
    }

    .errorMessage-image {
        padding: 50px 0 50px 0;
    }
}

@media (max-width: 375px) {
    .errorMessage-headline {
        font-size: 28px;
    }

    .errorMessage-image {
        padding: 0% 0 30% 0;
    }
}

/*#endregion*/

.flyout-back-btn[SingleSelectOption] {
    display: none;
}

.menuItemGroup > .menuItemCaption.root > .root.hasIcon.hasCaption {
    flex-flow: inherit;
}

.single-select-option-item-column[SingleSelectOption] > table[SingleSelectOption] > tr[SingleSelectOption] > td[SingleSelectOption] > .composed-image-container[ComposedImage] > img[ComposedImage] {
    border-radius: 5px 0px 0px 5px;
}

/*#region MenuPopUps Zusatzregeln*/
.body[PopUp] > .menuPopupHeadline.root.hasCaption > .captionElements > .caption {
    font-size: 18px;
}

.body[PopUp] > .menuItemGroup[ConfiguratorLayout] > button > .root.hasIcon.hasCaption > .icon {
    padding-right: 5px;
    margin-bottom: 2px;
    font-size: 14px;
}

.body[PopUp] > .menuItemGroup[ConfiguratorLayout] > .menuItemGroupCaption.root.hasCaption > .captionElements > .caption {
    font-size: 15px;
}

.body[PopUp] > .menuItemGroup[ConfiguratorLayout] > button {
    margin-left: 0px;
}

/*.body[PopUp] > .menuItemGroup[ConfiguratorLayout] > .root[Label],
.body[PopUp] > .menuPopupHeadline.root.hasCaption > .root[Label],
.body[PopUp] > .menuPopupHeadline.root.hasCaption {
    padding: 6px;
}*/

.body[PopUp] > .menuItemGroup[ConfiguratorLayout]:nth-child(n+3) {
/*    margin-top: 35px;*/
}

[ConfiguratorLayout] [Label].menuPopupHeadline {
    margin-bottom: 0px;
}

.body[PopUp] > .menuItemGroup[ConfiguratorLayout] > button > .root.hasIcon.hasCaption:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--color1);
    cursor: pointer;
}

.content[PopUp]:has(.modal-item-wrapper) {
    background-color: #F2F2F2;
}

.menu[ConfiguratorLayout] > div[PopUp] > div[PopUp] > .content[PopUp] > .body[PopUp] {
    margin-left: 0px;
    margin-right: 0px;
    padding: 30px 0px 30px 0px;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
    max-height: calc(90dvh - 130px);
    border-radius: 5px;
}

    .menu[ConfiguratorLayout] > div[PopUp] > div[PopUp] > .content[PopUp] > .body[PopUp] > .menuItemGroup[ConfiguratorLayout] > .menuItemGroupCaption[Label] {
        padding: 0px 20px;
        color: var(--Textcolor2);
        font-family: var(--main-cas-font-family-gmedium);
        font-weight: 500;
        font-size: 15px;
    }

    .menu[ConfiguratorLayout] > div[PopUp] > div[PopUp] > .content[PopUp] > .body[PopUp] > .menuItemGroup[ConfiguratorLayout] > .menuItemEntry[ConfiguratorLayout] {
        padding: 0px 20px;
        color: var(--Textcolor2);
        font-weight: 400;
        font-family: var(--main-cas-font-family-glight) !important;
    }

.body[PopUp] > .menuPopupHeadline.root.hasCaption > .captionElements > .caption {
    font-size: 19px;
    font-weight: 500;
    font-family: var(--main-cas-font-family-gmedium);
    padding: 0px 20px;
    color: var(--Textcolor2)
}

/*#endregion MenuPopUps Zusatzregeln*/

.btn.btn-configurator.btn-save,
.btn.btn-configurator.btn-fuehlen {
    width: 50px;
    height: 50px;
}

    .btn.btn-configurator.btn-fuehlen > img {
        max-width: unset;
        margin-left: -4px;
        margin-top: 2px;
    }

    .btn.btn-configurator.btn-save > .fa-regular.fa-location-dot {
        margin-left: 0px;
        margin-top: 1px;
    }

    .btn.btn-configurator.btn-save > .fa-light.fa-floppy-disk {
        margin-left: -2px;
        margin-top: 2px;
    }


.configurator-toggle-swatch-btn {
    width: 100%;
    padding: 5px 5px;
    font-size: 15px;
    height: 32px;
    margin-bottom: 20px;
}

    .configurator-toggle-swatch-btn:is(.mobile *) {
        width: 100%;
        padding: 5px 0px 5px 0px;
        font-size: 16px;
        height: 32px;
        margin-bottom: 20px;
        margin-right: 11px;
        margin-left: -5px;
        min-height: 42px;
    }

    .configurator-toggle-swatch-btn.toggle-swatch-active {
        background-color: var(--white);
        color: var(--black);
    }

    .configurator-toggle-swatch-btn.toggle-swatch-inactive {
        background-color: var(--black);
        color: var(--white);
    }

    .configurator-toggle-swatch-btn:hover {
        cursor: pointer;
    }

.toggle-swatch-remove > .fa-minus-circle {
    color: black;
}

.option-selector-header.option-selector-header-custom {
    font-size: 17px;
    margin-top: 15px;
    font-weight: 300 !important;
    line-height: 23px;
}

    .option-selector-header.option-selector-header-custom:is(.mobile *) {
        margin-top: 25px; /*Wg. Einklappen Button im Mobile Mode 25px*/
    }

@media (min-width: 1200px) {
    .single-select-option-name[SingleSelectOption] {
        font-size: 15px;
    }
}

.diomex-item-list > .diomex-item-list-item-container[ItemList] {
    margin: 10px;
}

.composed-image-grid-image-style.active {
    border: 5px solid var(--yellow);
    box-shadow: none;
}

.composed-image-grid-image-style {
    border: 5px solid transparent;
}

.btn-light.cardview-single-select-option {
    cursor: pointer;
}

.scaled-down-composed-image:is(.desktop *) {
    height: 120px;
    width: 120px;
    object-fit: cover;
}

.scaled-down-composed-image:is(.mobile *) {
    height: 100px;
    width: 100px;
    object-fit: cover;
}

.image-hosting-area:is(.desktop *) {
    margin-right: 0px;
    width: 140px;
    text-align: left;
}

.image-hosting-area:is(.mobile *) {
    margin-right: 0px;
    width: 100px;
    text-align: left;
}

.configurator-sum-mobile:is(.mobile *) > .half-size-column > .configurator-sum-mobile-small:last-child {
    display: none
}

.hidden {
    display: none;
}

.activeMenuItem[ConfiguratorLayout]:is(.mobile *) {
    box-shadow: 0 0 10px 8px rgba(0,0,0,0.1)
}

.diomex-item-list[ItemList] {
    margin: 0px;
}

.option-selector-row[Option] {
    margin: 2px 0px 2px 0px;
}

.body[PopUp] > .menuItemGroup[ConfiguratorLayout] > .menuItemGroupCaption.root.hasCaption {
    margin: 0px;
}

.body[PopUp] > .menuPopupHeadline.root.hasCaption[Label]:not(:first-child),
.body[PopUp] > .menuItemGroup[ConfiguratorLayout],
.body[PopUp] > .menuItemGroup[ConfiguratorLayout] > div > button > .root.hasIcon.hasCaption {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
}

    .body[PopUp] > .menuItemGroup[ConfiguratorLayout] > div > button > .root.hasIcon.hasCaption:hover {
        cursor: pointer;
    }

    .body[PopUp] > .menuItemGroup[ConfiguratorLayout] > div > button > .root.hasIcon.hasCaption {
        font-size: 14px;
    }

        .body[PopUp] > .menuItemGroup[ConfiguratorLayout] > div > button > .root.hasIcon.hasCaption > i {
            width: 20px;
        }

    .body[PopUp] > .menuItemGroup[ConfiguratorLayout] > div > button {
        margin: 4px 4px 4px 0px;
    }

        .body[PopUp] > .menuItemGroup[ConfiguratorLayout] > div > button > .root.hasIcon.hasCaption > i {
            padding-bottom: 2px;
        }

.body[PopUp] > .menuPopupHeadline.root.hasCaption[Label]:first-child {
    padding: 0px;
}

.body[PopUp] > .menuItemGroup[ConfiguratorLayout] > .menuItemGroupCaption.root.hasCaption {
    padding: 0px;
    padding-bottom: 5px;
}

.btn.focus,
.btn:focus {
    box-shadow: none;
}

.option-selector-container[OptionGroup] {
    margin: 0px 17px 15px 0px
}

    .option-selector-container[OptionGroup]:is(.mobile *) {
        margin: 0px 5px 15px 0px;
    }

.option-selector-container.option-selector-container-custom[OptionGroup] > div[Option]:is(.desktop *) {
    margin-left: 2px;
    margin-right: 6px;
}

.option-selector-row.option-selector-header-name > .col12 {
    padding-left: 0px;
}

.single-select-option-name.option-title-area[SingleSelectOption] {
    display: block;
}

.single-select-option-btn-group-vertical[SingleSelectOption] > .single-select-option-btn[SingleSelectOption] {
    margin-bottom: 3px 3px 3px 3px;
}

    .single-select-option-btn-group-vertical[SingleSelectOption] > .single-select-option-btn[SingleSelectOption]:is(.mobile *) {
        margin: 3px 3px 3px -8px;
    }

.single-select-option-btn[SingleSelectOption] {
    padding: 0px;
}

.diomex-item-list-item[ItemList] > .contentFlyout-dropdown-context[OptionSelector] > .option-selector-container.option-selector-container-custom[OptionGroup]:last-child {
    margin-bottom: 5px;
}

.option-selector-row-custom[OptionGroup] {
    margin-top: 0px;
}

.row.option-selector-value[Option] > div[PopUp],
.row.option-selector-value[Option] > .btn-group-vertical.container-fluid.single-select-option-btn-group-vertical[SingleSelectOption] > div[PopUp] {
    background-color: var(--backgroundColor1);
}

.option-wrapper[Option]:has(.option-selector-footer:empty) > .option-selector-value[Option] > .single-select-option-btn-group-vertical[SingleSelectOption] > .single-select-option-btn[SingleSelectOption]:last-child {
    margin-bottom: 20px;
}

/* ---- btn cancel in header rule [SingleSelectOption] ---- */
.btn-cancel-footer[SingleSelectOption] {
    display: none;
}

.grid-list-selection[SingleSelectOption] {
    position: absolute;
    right: 12px;
    top: 20px;
}

.selection-layer{
    cursor:pointer;
}

.thumbnail-button-selected[OptionSelectionView] {
    background-color: var(--yellow);
    color: var(--Textcolor2);
    border-radius: 0px 0px 5px 5px;
    font-size: 14px !important;
    font-weight: 500;
    font-family: var(--main-cas-font-family-gmedium) !important;
    height: 29px;
}

    .detail-swiper-top[newswiper] > .swiper-wrapper > .swiper-slide > .selection-layer-detailed > .thumbnail-button-selected[OptionSelectionView]:is(.desktop *),
    .thumbnail-button-selected[OptionSelectionView]:is(.desktop *) {
        bottom: 9px;
    }

    .detail-swiper-top[newswiper] > .swiper-wrapper > .swiper-slide > .selection-layer-detailed > .thumbnail-button-selected[OptionSelectionView]:is(.mobile *),
    .thumbnail-button-selected[OptionSelectionView]:is(.mobile *) {
        bottom: 4px;
    }



.row.option-selector-value.option-selector-row[Option] > div[PopUp] > div[PopUp] > .content > .footer,
.row.option-selector-value.option-selector-row[Option] > div[SingleSelectOption] > div[PopUp] > div[PopUp] > .content > .footer {
    background-color: var(--backgroundColor1);
    place-content: normal;
    display: flex;
    border-top-width: 0px;
    padding-top: 4px;
}

.row.option-selector-value.option-selector-row[Option] > div[PopUp] > div[PopUp] > .content > .header,
.row.option-selector-value.option-selector-row[Option] > div[SingleSelectOption] > div[PopUp] > div[PopUp] > .content > .header {
    background-color: #fff;
    margin-top: 0px;
    padding: 0px;
    border-bottom-width: 0px;
}

    .row.option-selector-value.option-selector-row[Option] > div[PopUp] > div[PopUp] > .content > .header:not(:empty):is(.mobile *),
    .row.option-selector-value.option-selector-row[Option] > div[SingleSelectOption] > div[PopUp] > div[PopUp] > .content > .header:not(:empty):is(.mobile *) {
        height: 35px;
    }

    .row.option-selector-value.option-selector-row[Option] > div[PopUp] > div[PopUp] > .content > .header:not(:empty):is(.desktop *),
    .row.option-selector-value.option-selector-row[Option] > div[SingleSelectOption] > div[PopUp] > div[PopUp] > .content > .header:not(:empty):is(.desktop *) {
        height: 31px;
    }


.footer[PopUp] > .btn.btn-default.btn-border-radius.btn-apply-color[SingleSelectOption] {
    background-color: var(--yellow);
    width: 100%;
    margin-right: -3px;
    font-size: 14px;
    font-weight: 500;
}

.footer[PopUp] > .btn.btn-default.btn-border-radius.btn-compare[SingleSelectOption] {
    background-color: var(--backgroundColor2);
    width: 100%;
    margin-right: 8px;
    margin-left: -3px;
}

.overlay-button-selected[OptionSelectionView] {
    background-color: var(--yellow);
    color: var(--color1);
    border: 0px;
    border-radius: 0px 0px 5px 5px;
    height: 24px;
    font-size: 14px;
    width: calc(100% - 11px);
    width: -moz-available;
    width: -webkit-fill-available;
}


.slideview-single-select-option[SingleSelectOptionValue] {
/*    background-color: var(--backgroundColor2);*/
}

.custom-slider[OptionSelectionView] > input[OptionSelectionView] {
    border: 0px;
}

.option-selector-subheader[Option] {
    padding: 0px;
}

.option-selector-subheader-link {
    font-size: 18px !important;
    font-weight: 500;
    font-family: var(--main-cas-font-family-gmedium) !important;
    margin-top: 6px;
}

.single-select-option-value-name-container-slide[SingleSelectOptionValue]:is(.desktop *) {
    font-size: 14px !important;
    font-weight: 500;
    color: var(--Textcolor2);
    font-family: var(--main-cas-font-family-gmedium) !important;
}

.single-select-option-value-name-container-slide.thin-font[SingleSelectOptionValue]:is(.desktop *) {
    font-size: 13px !important;
    font-weight: 400;
    font-family: var(--main-cas-font-family-glight) !important;
}

.single-select-option-value-name-container-slide[SingleSelectOptionValue]:is(.mobile *) {
    font-size: 13px !important;
    font-weight: 400;
    font-family: var(--main-cas-font-family-gmedium) !important;
    z-index:1010;
}

.single-select-option-value-name-container-slide.thin-font[SingleSelectOptionValue]:is(.mobile *) {
    font-size: 15px !important;
    font-weight: 400;
    font-family: var(--main-cas-font-family-glight) !important;
    height: 20px;
}

.custom-grid-item > .key:is(.desktop *) {
    font-size: 14px !important;
    font-weight: 200;
    color: var(--Textcolor2);
    font-family: var(--main-cas-font-family-glight) !important;
    line-height: 14px;
}

.custom-grid-item > .value:is(.desktop *) {
    font-size: 15px !important;
    font-weight: 400;
    color: var(--Textcolor2);
    font-family: var(--main-cas-font-family-gmedium) !important;
}

.custom-grid-item > .key:is(.mobile *) {
    font-size: 13px !important;
    font-weight: 200;
    color: var(--Textcolor2);
    font-family: var(--main-cas-font-family-glight) !important;
}

.custom-grid-item > .value:is(.mobile *) {
    font-size: 15px !important;
    font-weight: 400;
    color: var(--Textcolor2);
    font-family: var(--main-cas-font-family-gmedium) !important;
}

.swiper-card-text {
    font-size: 16px !important;
    font-weight: 200;
    font-family: var(--main-cas-font-family-glight) !important;
}

.compare-button-container[OptionSelectionView] > .detailed-compare-button[OptionSelectionView] {
    border-radius: 5px;
    height: 30px;
    font-size: 15px;
    font-family: var(--main-cas-font-family-gmedium) !important;
}

.root.configurator.showActiveMenuItem.showActivePanel:is(.mobile *):has(.detail-swiper-bottom)[ConfiguratorLayout],
.root.configurator.showActiveMenuItem.showActivePanel:is(.mobile *):has(.visual-swiper-bottom)[ConfiguratorLayout],
.root.configurator.showActiveMenuItem.showActivePanel:is(.mobile *):has(.custom-slider)[ConfiguratorLayout],
.root.configurator.showActiveMenuItem.showActivePanel:is(.mobile *):has(.single-select-option-value-container)[ConfiguratorLayout] {
    grid-template-columns: unset;
    grid-template-rows: 0px auto;
    grid-template-areas: "activePanel" "activeMenuItem";
}

.btn.btn-default.btn-border-radius.btn-close-color.flyout-close-btn.btn-cancel-header {
    font-size: 15px !important;
    font-family: var(--main-cas-font-family-gmedium);
}

.single-select-option-value-little-btns-background[SingleSelectOptionValue],
.single-select-option-value-little-btns-mouseover-background[SingleSelectOptionValue] {
    background-color: var(--backgroundColor1);
    opacity: 0.9;
    top: 4px;
    right: 13px;
}

.single-select-option-item-column[SingleSelectOption] > table[SingleSelectOption] > tr[SingleSelectOption] > td[SingleSelectOption] > .composed-image-container[ComposedImage] > img[ComposedImage]:is(.mobile *) {
    max-width: 100px;
}

.option-selector-row[Option] > div[PopUp] > div[PopUp] > .content[PopUp] > .body[PopUp]:not(:has(.diomex-item-list-container)),
.option-selector-row[Option] > .btn-group-vertical.container-fluid[SingleSelectOption] > div[PopUp] > div[PopUp] > .content[PopUp] > .body[PopUp] {
    margin: 0px;
    padding: 0px;
}

.btn.btn-default.btn-border-radius.btn-close-color.flyout-close-btn.btn-cancel-header.absolute-left[SingleSelectOption] {
    padding: 5px;
    margin-left: 10px;
    font-size: 15px !important;
    color: var(--Textcolor2);
}

    .btn.btn-default.btn-border-radius.btn-close-color.flyout-close-btn.btn-cancel-header.absolute-left[SingleSelectOption]::before {
        font-family: "Font Awesome 6 Pro";
        content: "\f053";
        font-size: 12px;
        font-weight: 900;
    }

.single-select-option-modal-title[SingleSelectOption] {
    font-size: 15px;
    font-weight: 500;
    font-family: var(--main-cas-font-family-gmedium);
    overflow: hidden;
    white-space: nowrap;
    left: 50%;
    max-width: 50%;
    position: relative;
    transform: translateX(-50%);
    padding-top: 6px;
    color: var(--Textcolor2);
}

.button-area[OptionSelectionView] > .btn.configurator-toggle-swatch-btn {
    width: 250px;
    align-self: center;
    margin-bottom: 20px;
}

.compare-container > h3 {
    font-size: 15px;
    font-weight: 500;
    font-family: var(--main-cas-font-family-gmedium);
    padding: 8px 0px 5px 0px;
    overflow: hidden;
    white-space: nowrap;
    left: 50%;
    max-width: 50%;
    position: relative;
    transform: translateX(-50%);
    text-align: center;
}

.footer[PopUp] > .btn.btn-default.btn-border-radius.btn-close-color.flyout-close-btn[SingleSelectOption] {
    display: none;
}

.compare-container > .btn.btn-default.btn-border-radius.btn-close-color.flyout-close-btn {
    display: unset !important;
    position: absolute;
    left: 0px;
    padding: 5px 10px;
    font-size: 15px;
}

    .compare-container > .btn.btn-default.btn-border-radius.btn-close-color.flyout-close-btn::before {
        font-family: "Font Awesome 6 Pro";
        content: "\f053";
        font-weight: 900;
    }

    .compare-container > .btn.btn-default.btn-border-radius.btn-close-color.flyout-close-btn > .btn-text {
        font-weight: 500;
        font-family: var(--main-cas-font-family-gmedium);
    }

.column > .header {
    font-size: 18px;
    font-weight: 500;
    font-family: var(--main-cas-font-family-gmedium);
}

.column > .property {
    font-size: 18px;
    font-family: var(--main-cas-font-family-glight);
    font-weight: 400;
}

.pickup-color {
    background-color: var(--yellow) !important;
}

.remove-color {
    background-color: var(--backgroundColor2) !important;
}

.control-button.pickup-color > .centered-text, .control-button.remove-color > .centered-text {
    color: var(--color1) !important;
}

.control-button.pickup-color > .centered-text {
    font-family: var(--main-cas-font-family-gmedium);
    font-weight: 500;
}

.control-button.remove-color > .centered-text {
    font-family: var(--main-cas-font-family-glight);
    font-weight: 400;
}

.diomex-item-list[data-view-mode="LIST"] > .diomex-item-list-item-container {
    width: 100% !important;
}

.col-12.option-selector-value.single-select-option-name[SingleSelectOption] {
    padding: 40px 0px 40px 0px;
}



.image-title-area[OptionSelectionView] {
    font-size: 18px;
    font-weight: 500;
    font-family: var(--main-cas-font-family-gmedium);
}

.back-button-area {
    display: unset !important;
}

.btn.btn-default.btn-border-radius.btn-close-color.flyout-close-btn[EntityComparsion] {
    padding: 0px;
}

    .btn.btn-default.btn-border-radius.btn-close-color.flyout-close-btn[EntityComparsion] > .btn-text[EntityComparsion] {
        font-family: var(--main-cas-font-family-gmedium);
        font-weight: 500;
    }

    .btn.btn-default.btn-border-radius.btn-close-color.flyout-close-btn[EntityComparsion]::before {
        font-family: "Font Awesome 6 Pro";
        content: "\f053";
        font-weight: 900;
    }

.btn-border-radius.btn-overview-comparsion.configuration-overview-btn-remove[EntityComparsion], .btn-border-radius.btn-overview-comparsion.configuration-overview-btn-select[EntityComparsion] {
    width: calc(100% - 6px);
    border-radius: 10px;
    margin: 4px;
}

.option-selector-subheader.configuration-overview-subheader[EntityComparsion] {
    font-family: var(--main-cas-font-family-gmedium);
    font-weight: 500;
    font-size: 16px;
    width: 135px;
}

.configuration-overview-column-header[EntityComparsion] {
    font-size: 16px;
    font-family: var(--main-cas-font-family-gmedium);
    font-weight: 500;
}

.configuration-overview-option[EntityComparsion] {
    font-size: 16px;
    font-family: var(--main-cas-font-family-glight);
    font-weight: 400;
}

.btn-border-radius.btn-overview-comparsion.configuration-overview-btn-select[EntityComparsion] {
    background-color: var(--yellow);
}

    .btn-border-radius.btn-overview-comparsion.configuration-overview-btn-select[EntityComparsion]::after {
        content: 'Auswählen';
        font-family: var(--main-cas-font-family-gmedium);
        font-weight: 500;
        font-size: 16px;
        color: var(--color1);
        padding-left: 5px;
    }

    .btn-border-radius.btn-overview-comparsion.configuration-overview-btn-select[EntityComparsion] > i {
        color: var(--color1);
    }

.btn-border-radius.btn-overview-comparsion.configuration-overview-btn-remove[EntityComparsion] {
    background-color: var(--backgroundColor2);
}

    .btn-border-radius.btn-overview-comparsion.configuration-overview-btn-remove[EntityComparsion]::after {
        content: 'Entfernen';
        font-family: var(--main-cas-font-family-glight);
        font-weight: 400;
        font-size: 16px;
        color: var(--color1);
        padding-left: 5px;
    }

    .btn-border-radius.btn-overview-comparsion.configuration-overview-btn-remove[EntityComparsion] > i {
        color: var(--color1);
    }

.btn.btn-default.btn-border-radius.btn-compare-only-differences.btn-compare-only-differences-color.flyout-compare-only-differences-btn[SingleSelectOption] {
    background-color: var(--yellow);
}

.message-hosting-area[PushAlert] > .alert[PushAlert] > h4[PushAlert], .message-hosting-area[PushAlert] > .messageArea[PushAlert] > .alert[PushAlert] > h4[PushAlert] {
    font-family: var(--main-cas-font-family-gmedium);
    font-weight: 500;
    font-size: 16px;
}

.message-hosting-area[PushAlert] > .alert[PushAlert] > p[PushAlert], .message-hosting-area[PushAlert] > .messageArea[PushAlert] > .alert[PushAlert] > p[PushAlert] {
    font-size: 16px;
    font-family: var(--main-cas-font-family-glight);
    font-weight: 400;
}

.single-select-option-value-little-btns[SingleSelectOptionValue] > div[SingleSelectOptionValue] {
    padding: 2px;
}

tr:nth-child(even)[EntityComparsion] {
    background-color: var(--backgroundColor1) !important;
}

.composed-image-slide-slide-style-small[ComposedImage] {
    height: 150px;
    width: 150px;
}

.button-area.no-select-marking[OptionSelectionView] > .parent-text[OptionSelectionView] {
    font-size: 13px;
    font-family: var(--main-cas-font-family-glight);
    font-weight: 400;
}

.button-area[OptionSelectionView] > .header-text[OptionSelectionView] {
    font-size: 16px;
    color: var(--Textcolor2);
}

.button-area[OptionSelectionView] > .mobile-text[OptionSelectionView] {
    font-size: 15px;
    color: var(--Textcolor2);
    font-family: var(--main-cas-font-family-gmedium) !important;
    padding: 12px 0px;
}

.compare-button-container[OptionSelectionView] > .detailed-compare-button[OptionSelectionView]:is(.mobile *) {
    height: 21px !important;
    width: 114px !important;
    font-family: var(--main-cas-font-family-glight) !important;
    font-size: 13px;
}

.maximize-icon-container[SingleSelectOptionValue]:is(.mobile *) {
    width: 32px;
    height: 32px;
    top: 25px;
}

.single-select-option-value-name-container-slide[SingleSelectOptionValue] {
    width: calc(100% - 10px);
    margin-top: 0px;
}

.compare-button-container[OptionSelectionView] {
    display: none;
}

.btn-compare[SingleSelectOption] {
    display: none;
}

.image-hosting-area[SingleSelectOption]:is(.desktop *) {
    min-width: 140px;
}

.image-hosting-area:is(.mobile *) {
    min-width: 100px;
}

.cardview-single-select-option:is(.desktop *)[SingleSelectOptionValue] {
    min-height: 98%;
    min-width: 52px;
    height: 100%;
    transition: all .3s;
}

.single-select-option-value-container .fa-check, .single-select-option-value-container .fa-check:before {
    color: var(--yellow);
    font-size: 25px;
}

.composed-image-container-grid {
    display: inline-table;
    margin-bottom: 5px;
}

.row.option-selector-subheader.option-selector-subheader-border.option-selector-subheader-custom.option-selector-row {
    display: none;
}

.single-select-option-name.option-title-area {
    display: unset;
}

.menu[ConfiguratorLayout] > .menuButton.root[Button]:is(.mobile *) {
    /*       margin-bottom: 16px;;*/
}

.menu > .menuButton .caption[Label] {
    font-size: 16px;
    font-family: var(--main-cas-font-family-gmedium);
}



.configurator-dimension-text-span[Configurator] {
    font-size: 16px;
}

.button-leiste-container[Configurator] > .classic-footer-bar[Configurator] > .btn-fuehlen[ToggleSwatchButton] {
    margin: 0px 8px;
}

.menuItemEntry[ConfiguratorLayout] > .menuItemCaption[Button] > .hasCaption[Label] > .captionElements[Label] > .caption[Label] {
    font-family: var(--main-cas-font-family-glight);
    font-weight: 400;
    font-size: 15px;
}

.desktop:has(> #loading-circle[LoadingCircle]) #canvasdivref #loading-circle-aspect-ratio[LoadingCircle],
.mobile:has(> #loading-circle[LoadingCircle]) #canvasdivref #loading-circle-aspect-ratio[LoadingCircle] {
    display: none;
}

.swiper-slide-active > .selection-layer > .single-select-option-slide-container > .slideview-single-select-option > .single-select-option-value-name-container-slide[SingleSelectOptionValue] {
    width: calc(100% - 10px);
}

.content[popup]:has(.detail-swiper-top):has(.detail-swiper-bottom) > .body:is(.desktop *),
.content[popup]:has(.detail-swiper-top):has(.detail-swiper-bottom) > .footer:is(.desktop *) {
    padding: 0px 5px 0px 15px !important;
}

.maximize-icon-container > .magnifier-svg[SingleSelectOptionValue] {
    margin-bottom: 2px;
}

.composed-image-slide-slide-style[ComposedImage] {
    object-fit: cover !important;
}

.composed-image-slide-slide-style-small[ComposedImage] {
    object-fit: cover !important;
}
/* Swiper Buttons allgemein */

.swiper-button-next[newswiper]::after, .swiper-button-prev[newswiper]::after {
    color: black;
}

.swiper-slide-thumb-active > .single-select-option-slide-container > .slideview-single-select-option > .single-select-option-value-name-container-slide[SingleSelectOptionValue],
.swiper-slide-thumb-active > .selection-layer-detailed > .single-select-option-slide-container > .slideview-single-select-option > .single-select-option-value-name-container-slide[SingleSelectOptionValue],
.custom-active-slide > .selection-layer > .single-select-option-slide-container > .slideview-single-select-option > .single-select-option-value-name-container-slide[SingleSelectOptionValue] {
    width: calc(100% - 10px);
}

.body[PopUp]:has(.swiper-info-area) {
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
}

/* Swiper Buttons allgemein */


/* Allgemein Swiper */

.visual-area[OptionSelectionView] > .swiper[NewSwiper] > .swiper-wrapper[NewSwiper] > .swiper-slide[optionselectionview] > .composed-image-container[ComposedImage] > img[ComposedImage] {
    object-fit: cover !important;
}

.detailed-select-button[OptionSelectionView] {
    border-radius: 5px;
    background-color: var(--yellow);
    color: black;
    font-family: var(--main-cas-font-family-gmedium) !important;
    font-size: 16px;
    font-weight: 500;
}

.swiper-info-header[OptionSelectionView]:is(.desktop *) {
    font-weight: 500;
    font-size: 24px;
    font-family: var(--main-cas-font-family-gmedium) !important;
}

.swiper-info-header[OptionSelectionView]:is(.mobile *) {
    font-weight: 500;
    font-size: 18px;
    font-family: var(--main-cas-font-family-gmedium) !important;
}

.composed-image-slide-slide-style[ComposedImage]:is(.mobile *) {
    height: 185px;
}

.swiper-pagination-bullet-active {
    background: black !important;
}

.swiper-info-area-host[OptionSelectionView] {
    margin: 14px 8px 2px 8px;
}

    .swiper-info-area-host[OptionSelectionView]:is(.mobile *) {
        height: calc(100% - -14px);
    }

    .swiper-info-area-host[OptionSelectionView]:is(.desktop *) {
        height: calc(100% - 15px);
    }

.maximize-icon-container[OptionSelectionView] {
    top: 18px;
}

.button-area.no-select-marking[OptionSelectionView] {
    display: contents;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(1);
}

/* Allgemein Swiper */

.configuration-error-solution-modal-header-text[ConfigurationErrorSolutionPopup],
.font-weight-bold.change-option-action-modal-title[ConfigurationErrorSolutionPopup] {
    font-family: var(--main-cas-font-family-gmedium) !important;
}

.configuration-error-solution-modal-footer-container[ConfigurationErrorSolutionPopup] {
    display: flex;
}

.btn.btn-default.btn-border-radius.btn-primary-color.btn-success-color.flyout-success-btn[ConfigurationErrorSolutionPopup],
.btn.btn-default.btn-border-radius.btn-undo-color.btn-flyout-undo[ConfigurationErrorSolutionPopup],
.btn.btn-default.btn-border-radius.btn-close-color.flyout-close-btn[ConfigurationErrorSolutionPopup],
.btn.btn-default.btn-disabled.btn-border-radius.flyout-success-btn[ConfigurationErrorSolutionPopup] {
    padding: 8px 14px 7px 10px;
    margin: 4px;
}

.btn.btn-default.btn-border-radius.btn-undo-color.btn-flyout-undo[ConfigurationErrorSolutionPopup],
.btn.btn-default.btn-border-radius.btn-close-color.flyout-close-btn[ConfigurationErrorSolutionPopup] {
    border: 1px solid black;
}

.btn.btn-default.btn-border-radius.btn-primary-color.btn-success-color.flyout-success-btn[ConfigurationErrorSolutionPopup],
.btn.btn-default.btn-disabled.btn-border-radius.flyout-success-btn[ConfigurationErrorSolutionPopup] {
    background-color: var(--yellow) !important;
}

.optionCategoryTabFooter[OptionSelector] > .navBackButton[Button] > .root.hasIcon.hasCaption > i,
.optionCategoryTabFooter[OptionSelector] > .navNextButton[Button] > .root.hasIcon.hasCaption > i {
    /*display: none;*/
}

.optionCategoryTabFooter[OptionSelector] > .navBackButton[Button] > .root.hasIcon.hasCaption > .captionElements > .caption,
.optionCategoryTabFooter[OptionSelector] > .navNextButton[Button] > .root.hasIcon.hasCaption > .captionElements > .caption {
    text-decoration: underline;
    font-weight: 500;
    font-size: 16px;
    font-family: var(--main-cas-font-family-gmedium);
}

.optionCategoryTabFooter[OptionSelector] > .navBackButton[Button] > .root.hasIcon.hasCaption[Label]:hover,
.optionCategoryTabFooter[OptionSelector] > .navNextButton[Button] > .root.hasIcon.hasCaption[Label]:hover {
    background-color: transparent !important;
    border-radius: 5px;
    color: var(--color1) !important;
}

.optionCategoryTabFooter[OptionSelector] > .navBackButton[Button]:is(.desktop *) {
    margin-left: 5px;
    margin-bottom: 10px;
}

.optionCategoryTabFooter[OptionSelector] .navBackButton[label]:is(.desktop *) {
    margin-left: 3px;
}

.optionCategoryTabFooter[OptionSelector] > .navNextButton[Button]:is(.desktop *) {
    margin-right: 7px;
    margin-bottom: 10px;
}

.optionCategoryTabFooter[OptionSelector] > .navBackButton[Button]:is(.mobile *) {
    margin-left: 30px;
    margin-bottom: 30px;
}

.optionCategoryTabFooter[OptionSelector] > .navNextButton[Button]:is(.mobile *) {
    margin-right: 0px;
    margin-bottom: 30px;
}

.fas.fa-info-circle.single-select-option-value-compare::before {
    content: url('data:image/svg+xml,<svg class="magnifier-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>');
    position: absolute;
    top: -2px;
    right: 4px;
}

.single-select-option-value-little-btns {
    border-radius: 5px;
    border: 1px solid black;
    width: 35px;
    height: 34px;
    align-content: center;
    text-align: center;
    position: absolute;
    background: white;
    top: 7px !important;
    right: 7px !important;
}

.menu[ConfiguratorLayout] {
    justify-items: center;
}

.btn.btn-configurator:is(.desktop *) > svg {
    height: 28px;
    margin-bottom: 5px;
}

.btn-kaufen-tabs.btn-configurator[Configurator] {
    position: relative;
    float: right;
    max-width: 100px;
    border-radius: 5px;
    background-color: var(--yellow);
    margin-right: 10px;
    max-height: 40px;
}

    .btn-kaufen-tabs.btn-configurator[Configurator]:hover {
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.36);
        color: #000 !important;
    }

.footer-buttons {
    position: relative;
}

.optionCategoryTabFooter .btn-area-mobile.half-size-column.footer-buttons {
    float: right;
}

.footer-delivery-box {
    margin: 0px 5px 0px 24px;
    padding: 10px;
}

    .footer-delivery-box > .cart-description {
        margin-top: 10px;
    }

.isPopUp [Button] [Label].root {
    justify-content: unset;
}

.isPopUp .body[PopUp] > .menuItemGroup[ConfiguratorLayout] > div > button {
    width: 100%;
}

.mark-entry-color[Label] {
    color: white;
}

.single-select-option-value-name-container[SingleSelectOptionValue] {
    padding: 0px 5px 5px 5px;
}

.composed-image-grid-image-style[ComposedImage]:is(.mobile *) {
    max-height: 270px;
    object-fit: contain;
}

.toggle-swatch-button-text-area:is(.desktop *) {
    border: 1px solid black;
    background-color: #FFF;
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    margin-top: -15px;
    padding: 20px;
    text-align: center;
    font-size: 14px;
}

.toggle-swatch-button-text-area:is(.mobile *) {
    border: 1px solid black;
    background-color: #FFF;
    width: 100%;
    height: 100%;
    margin: -15px 11px 20px -5px;
    padding: 20px;
    text-align: center;
    font-size: 14px;
}

.btn-area-mobile.half-size-column[Configurator] {
    padding: 5px;
    /*float: left;*/
}

.btn-area-mobile > .btn.btn-configurator.btn-mobile[Configurator] {
    width: 60px;
    height: 60px;
}

.optionCategoryTabFooter[OptionSelector] > .navBackButton[Button]:is(.mobile *) {
    margin-left: -22px;
}

.optionCategoryTabFooter.hasNavBackButton.hasFinishButton > .navBackButton {
    margin-top: 22px;
}

[OptionSelector] [optionSelector].optionCategoryTabFooter .navNextButton {
    margin-right: 3px;
}

.mobile-delivery-box {
    position: absolute;
    bottom: 175px;
    left: 0px;
}

.menu[ConfiguratorLayout] {
    justify-content: flex-start;
}

.alternated-footer-bar > .btn {
    min-width: 140px;
}

.configurator-add-related-products-btn-container[Configurator] {
    bottom: 70px;
}

.diomex-item-list-container .row.option-selector-row.option-selector-row-custom.option-selector-header-name > .col-12 {
    padding-left: 2px;
}

.list-group-item-warning div[SingleSelectOptionValue] {
    border: none;
}

.footer > .btn.btn-default.btn-border-radius.btn-apply-color {
    margin-top: 9px;
}

.optionCategoryTabHeader > .optionCategoryTabButton {
    min-width: 24%; /* optional - damit die Buttons etwas größer sind. Padding ist auch eine Option */
}

.content-switch-container .modal-item-wrapper {
    max-height: unset;
    overflow-y: unset;
    overflow-x: unset;
}

.checkout-tooltip .checkout-tooltiptext {
    display: none;
    width: 335px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0px;
    position: absolute;
    z-index: 1;
    font-size: 12px;
    line-height: 25px;
    transform: translateY(-67px) translateX(-23px);
}

@media (min-width: 768px) {
    button.checkout-tooltip.checkout {
        width: auto;
        overflow: visible;
    }
}

.checkout-tooltip.checkout-pay-btn-inactive:hover .checkout-tooltiptext {
    display: block;
}

.checkout-pay-btn-inactive {
    background-color: lightgray !important;
    border: 2px solid lightgray !important;
}

.btn-footer-mobile {
    width: 100%;
    border-color: transparent;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    margin: 5px;
    min-height: 42px;
    font-weight: 600;
}
    .btn-footer-mobile svg {
        width: 24px;
    }

.btn-optionselector-footer-request {
    filter: invert(1);
    background: #FFF;
    color: #000;
}

    .btn-optionselector-footer-request svg{
        filter:invert(1);
    }

.btn-optionselector-footer-checkout {
    background-color: var(--yellow);
}


.request-pdf-text-area:is(.mobile *) {
    border: 1px solid black;
    background-color: #FFF;
    width: 100%;
    height: 100%;
    padding: 5px;
    margin: 5px;
    text-align: center;
    font-size: 14px;
}

.option-selector-footer-content .footer-delivery-box{
    margin-top:0px;
    padding-top:0px;
}

    .option-selector-footer-content .footer-delivery-box .cart-description {
        margin-top: 0px;
        padding-top: 0px;
    }

.optionCategoryTabHeader {
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    flex-wrap: nowrap;
    overflow-x: scroll;
    width: 100%;
    background-color: #FFF;
    position: sticky;
    top: -1px;
    z-index: 1000;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}

    .optionCategoryTabHeader::-webkit-scrollbar {
        display: none;
    }

    .optionCategoryTabHeader > .optionCategoryTabButton:is(.mobile *) {
        min-width: 30%;
    }

    .optionCategoryTabHeader > .optionCategoryTabButton {
        position: relative;
        flex-basis: 0;
        flex-grow: 1;
        min-width: 25%;
        height: 50px;
        padding: 0 20px;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: -15px;
        z-index: 1;
        background-color: transparent;
    }

        .optionCategoryTabHeader > .optionCategoryTabButton::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #FFF; /* Standard-Hintergrund */
            clip-path: polygon(0 0, calc(100% - 15px) 0, 99% 50%, calc(100% - 15px) 100%, 0 100%);
            z-index: -1;
            transition: background-color 0.3s ease;
        }

        .optionCategoryTabHeader > .optionCategoryTabButton::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: inset 0 0 0 20px black;
            clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
            z-index: -2;
        }

        .optionCategoryTabHeader > .optionCategoryTabButton:last-child::before {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }

        .optionCategoryTabHeader > .optionCategoryTabButton:last-child::after {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }

        .optionCategoryTabHeader:is(.desktop *) > .optionCategoryTabButton:hover::before {
            background-color: var(--accentColor2);
        }

        .optionCategoryTabHeader > .optionCategoryTabButton.checked::before {
            background-color: var(--accentContrastColor1); 
            color: var(--accentContrastColor2); 
        }

        .optionCategoryTabHeader > .optionCategoryTabButton.checked > .root.hasCaption > .captionElements > .caption[Label] {
            color: var(--accentContrastColor2);
        }

.optionCategoryTabButton:first-child {
    min-width: 25%;
    padding-left: 10px;
}

.optionCategoryTabHeader:first-child{
    padding-left:0px;
}

.optionCategoryTabButton:is(.desktop *):hover {
    color: var(--accentContrastColor2);
}

/* VISUAL SWIPER ARROWS */

/* Sicherstellen, dass der Swiper-Container relativ ist */
.visual-swiper-bottom.swiper[newswiper] {
    position: relative;
}

    /* Den Container der Pagination sichtbar lassen, aber die Bullets ausblenden */
    .visual-swiper-bottom.swiper[newswiper] .swiper-pagination-host[NewSwiper] {
        display: block;
    }

        .visual-swiper-bottom.swiper[newswiper] .swiper-pagination-host[NewSwiper] .swiper-pagination {
            display: none !important;
        }

    /* Arrows positionieren */
    .visual-swiper-bottom.swiper[newswiper] .swiper-button-prev,
    .visual-swiper-bottom.swiper[newswiper] .swiper-button-next {
        position: absolute !important; /* Absolute Positionierung */
        top: 50% !important; /* Vertikal zentrieren */
        transform: translateY(-50%); /* Korrekt zentrieren */
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 40px !important;
        height: 40px !important;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        color: #333;
        margin-top: 0 !important; /* Swiper's Standard-Margin entfernen */
        transition: background-color 0.3s ease;
        z-index: 10; /* Sicherstellen, dass die Arrows über den Slides liegen */
    }

        .visual-swiper-bottom.swiper[newswiper] .swiper-button-prev:hover,
        .visual-swiper-bottom.swiper[newswiper] .swiper-button-next:hover {
            background-color: rgba(255, 255, 255, 1);
        }

        /* Swiper's Standard-Pfeile ausblenden */
        .visual-swiper-bottom.swiper[newswiper] .swiper-button-prev::after,
        .visual-swiper-bottom.swiper[newswiper] .swiper-button-next::after {
            display: none;
        }

        /* Font Awesome Chevrons */
        .visual-swiper-bottom.swiper[newswiper] .swiper-button-prev::before {
            content: '\f053'; /* fa-chevron-left */
            font-family: 'Font Awesome 6 Pro';
            font-weight: 900;
            font-size: 18px;
            line-height: 40px;
            display: block;
            text-align: center;
        }

        .visual-swiper-bottom.swiper[newswiper] .swiper-button-next::before {
            content: '\f054'; /* fa-chevron-right */
            font-family: 'Font Awesome 6 Pro';
            font-weight: 900;
            font-size: 18px;
            line-height: 40px;
            display: block;
            text-align: center;
        }

    /* Positionierung der Arrows */
    .visual-swiper-bottom.swiper[newswiper] .swiper-button-prev {
        left: 10px !important; /* Abstand vom linken Rand */
    }

    .visual-swiper-bottom.swiper[newswiper] .swiper-button-next {
        right: 10px !important; /* Abstand vom rechten Rand */
    }

/* Mobile-Anpassung */
@media (max-width: 768px) {
    .visual-swiper-bottom.swiper[newswiper] .swiper-button-prev,
    .visual-swiper-bottom.swiper[newswiper] .swiper-button-next {
        width: 36px !important;
        height: 36px !important;
    }

        .visual-swiper-bottom.swiper[newswiper] .swiper-button-prev::before,
        .visual-swiper-bottom.swiper[newswiper] .swiper-button-next::before {
            font-size: 16px;
            line-height: 36px;
        }
}

/* VISUAL SWIPER ARROWS */

/* DETAIL SWIPER ARROWS */

/* Den Container sichtbar machen */
.detail-swiper-top.swiper[newswiper] .swiper-pagination-host[NewSwiper] {
    display: block;
}

    /* Nur die Pagination ausblenden */
    .detail-swiper-top.swiper[newswiper] .swiper-pagination-host[NewSwiper] .swiper-pagination {
        display: none !important;
    }

/* Sicherstellen, dass der Swiper-Container relativ ist */
.detail-swiper-top.swiper[newswiper] {
    position: relative;
}

    /* Arrows sichtbar machen und stylen */
    .detail-swiper-top.swiper[newswiper] .swiper-button-prev,
    .detail-swiper-top.swiper[newswiper] .swiper-button-next {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%);
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 40px !important;
        height: 40px !important;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        color: #333;
        margin-top: 0 !important;
        transition: background-color 0.3s ease;
        z-index: 10;
    }

        .detail-swiper-top.swiper[newswiper] .swiper-button-prev:hover,
        .detail-swiper-top.swiper[newswiper] .swiper-button-next:hover {
            background-color: rgba(255, 255, 255, 1);
        }

        /* Swiper's Standard-Pfeile ausblenden */
        .detail-swiper-top.swiper[newswiper] .swiper-button-prev::after,
        .detail-swiper-top.swiper[newswiper] .swiper-button-next::after {
            display: none;
        }

        /* Font Awesome Chevrons */
        .detail-swiper-top.swiper[newswiper] .swiper-button-prev::before {
            content: '\f053'; /* fa-chevron-left */
            font-family: 'Font Awesome 6 Pro';
            font-weight: 900;
            font-size: 18px;
            line-height: 40px;
            display: block;
            text-align: center;
        }

        .detail-swiper-top.swiper[newswiper] .swiper-button-next::before {
            content: '\f054'; /* fa-chevron-right */
            font-family: 'Font Awesome 6 Pro';
            font-weight: 900;
            font-size: 18px;
            line-height: 40px;
            display: block;
            text-align: center;
        }

    /* Positionierung */
    .detail-swiper-top.swiper[newswiper] .swiper-button-prev {
        left: 10px !important;
    }

    .detail-swiper-top.swiper[newswiper] .swiper-button-next {
        right: 10px !important;
    }

/* Mobile-Anpassung */

@media (max-width: 768px) {
    .detail-swiper-top.swiper[newswiper] .swiper-button-prev,
    .detail-swiper-top.swiper[newswiper] .swiper-button-next {
        width: 36px !important;
        height: 36px !important;
    }

        .detail-swiper-top.swiper[newswiper] .swiper-button-prev::before,
        .detail-swiper-top.swiper[newswiper] .swiper-button-next::before {
            font-size: 16px;
            line-height: 36px;
        }
}

/* DETAIL SWIPER ARROWS */