[v-cloak] {
    display: none !important;
}

[v-cloak] #creator-panel {
    display: none !important;
}

#digiconfigwrap {
    #configurator-panel {
        .digiconfig-steps {
            .digiconfig-step {

                .config-step-head {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;
                    gap: 8px;
                    margin-bottom: 8px;

                    .step-head-label {
                        font-size: 14px;
                        font-weight: 500;
                        color: #2A2A2A;
                    }

                    .step-head-values {
                        font-size: 14px;
                        font-weight: 500;
                        color: #605F5F;
                    }

                    .step-head-default {
                        border-radius: 50px;
                        background: #DCF4E1;
                        font-size: 10px;
                        font-weight: 500;
                        color: #157147;
                        padding: 6px 10px 6px 8px;
                        line-height: 1;
                        display: flex;
                        align-items: center;
                        gap: 6px;

                        &:before {
                            content: "";
                            width: 12px;
                            height: 12px;
                            display: block;
                            background: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.32812 5.64512L4.68028 7.99727L9.38458 3.29297" stroke="%23157147" stroke-width="0.907258" stroke-linecap="round" stroke-linejoin="round"/></svg>');
                        }
                    }

                    .step-head-error {
                        border-radius: 50px;
                        background: #FFE0E3;
                        font-size: 10px;
                        font-weight: 500;
                        color: #B92D3A;
                        padding: 5px 10px 5px 8px;
                        line-height: 1;
                        display: flex;
                        align-items: center;
                        gap: 6px;

                        &:before {
                            content: "";
                            width: 12px;
                            height: 12px;
                            display: block;
                            background: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.39717 2.6025C3.1775 2.38283 2.82192 2.38283 2.60225 2.6025C2.38258 2.82217 2.38258 3.17775 2.60225 3.39742L5.20479 5.99996L2.60225 8.6025C2.38258 8.82217 2.38258 9.17775 2.60225 9.39742C2.82192 9.61709 3.1775 9.61709 3.39717 9.39742L5.99971 6.79488L8.60225 9.39742C8.82192 9.61709 9.1775 9.61709 9.39717 9.39742C9.61684 9.17775 9.61684 8.82217 9.39717 8.6025L6.79464 5.99996L9.39717 3.39742C9.61684 3.17775 9.61684 2.82217 9.39717 2.6025C9.1775 2.38283 8.82192 2.38283 8.60225 2.6025L5.99971 5.20504L3.39717 2.6025Z" fill="%23B92D3A"/></svg>');
                        }
                    }
                }

                .config-step-body {
                    margin-bottom: 18px;

                    .body-box {
                        margin: 0px;

                        .size-price-box {
                            font-size: 11px;
                            color: #605F5F;
                            margin-top: -10px;
                        }
                    }
                }



                &.step-type-color {
                    .config-body-color {
                        .body-box {
                            display: flex;
                            flex-wrap: wrap;
                            flex-direction: row;
                            justify-content: flex-start;
                            gap: 8px;

                            .data-color-item {
                                width: 26px;
                                height: 26px;
                                padding: 0;
                                margin: 0;
                                border: 1px solid #807E7E;
                                text-indent: -600vw;
                                border-radius: 50px;
                            }

                            .show-more {
                                color: #605F5F;
                                font-size: 12px;
                                font-weight: 400;
                                text-decoration: underline;
                                cursor: pointer;
                            }
                        }
                    }
                }

                &.step-type-size {
                    .body-box {
                        display: flex;
                        flex-wrap: wrap;
                        flex-direction: row;
                        justify-content: flex-start;
                        gap: 5px;

                        .size-price-box {
                            width: 100%;
                        }

                        .data-size-item {
                            .data-size-input {
                                input {
                                    background-color: #fff;
                                    color: #CBCBCB;
                                    border-color: #CBCBCB;
                                    font-size: 14px;
                                    border-radius: 2px;
                                    text-align: center;
                                    padding: .5rem .3rem;

                                    &.filled {
                                        border-color: #2A2A2A;
                                        color: #2A2A2A;
                                        box-shadow: 0px 0px 0px 1px #2a2a2a;
                                    }
                                }
                            }
                        }

                        .data-size-limit {
                            font-size: 11px;
                            color: #605F5F;
                            text-align: center;
                            margin-bottom: -4px;
                        }

                        .data-size-label {
                            font-size: 14px;
                            text-align: center;
                            color: #2B2B2B;
                            margin-top: 4px;
                        }
                    }
                }

                &.step-type-radio {
                    .body-box {
                        display: flex;
                        flex-wrap: wrap;
                        flex-direction: row;
                        justify-content: flex-start;
                        gap: 8px;

                        .btn {
                            background-color: #fff;
                            color: #CBCBCB !important;
                            border-color: #CBCBCB;
                            font-size: 14px;
                            border-radius: 2px;
                            text-transform: none;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: 8px;

                            span {
                                color: #CBCBCB !important;
                            }

                            img {
                                opacity: 0.4;
                            }


                            &.option-active {
                                border-color: #2A2A2A;
                                color: #2A2A2A !important;
                                box-shadow: 0px 0px 0px 1px #2a2a2a;

                                span {
                                    color: #2A2A2A !important;
                                }

                                img {
                                    opacity: 1;
                                }
                            }

                            span {
                                font-weight: 500;
                            }
                        }

                        .show-more {
                            color: #605F5F;
                            font-size: 12px;
                            font-weight: 400;
                            text-decoration: underline;
                            cursor: pointer;
                            transform: translateY(7px);
                        }
                    }
                }

                &.step-type-checkbox.step-display-image {
                    .config-step-body.config-body-checkbox {
                        .body-box.step-checkbox-image {
                            display: flex;
                            flex-wrap: wrap;
                            flex-direction: row;
                            justify-content: flex-start;
                            gap: 8px;

                            label {
                                border-radius: 2px;
                                padding: 8px;
                                background-color: #fff;
                                border: 1px solid #CBCBCB;
                                font-size: 11px;
                                color: #949494;
                                width: 90px;
                                display: flex;
                                flex-direction: column;
                                justify-content: flex-start;
                                align-items: center;
                                gap: 8px;
                                text-align: center;
                                position: relative;

                                img {
                                    opacity: .4;
                                }

                                &:has(input:checked) {
                                    color: #2A2A2A;
                                    border-color: #2A2A2A;
                                    box-shadow: 0px 0px 0px 1px #2a2a2a;

                                    img {
                                        opacity: 1;
                                    }
                                }

                                input {
                                    position: absolute;
                                    top: 0px;
                                    left: 0px;
                                    width: 100%;
                                    height: 100%;
                                    opacity: 0.000001;
                                    cursor: pointer;
                                }

                                .step-checkbox-info {
                                    text-align: center;
                                    font-size: 11px;
                                }

                                .cta-show-more {
                                    position: absolute;
                                    right: 0px;
                                    top: 0px;
                                    width: 100%;
                                    height: 100%;
                                    background-color: #242424BF;
                                    color: #fff;
                                    font-size: 22px;
                                    font-weight: 500;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    cursor: pointer;
                                }


                            }
                        }
                    }
                }

                &.step-type-files {
                    .step-head-values {
                        display: none;
                    }

                    .body-box {
                        display: flex;
                        flex-wrap: wrap;
                        flex-direction: row;
                        justify-content: flex-start;
                        gap: 8px;

                        .btn {
                            border-radius: 2px;
                            border: 1px solid #2A2A2A;
                        }

                        label.btn {
                            position: relative;
                            margin: 0px;
                            text-transform: none;
                            width: calc(50% - 4px);

                            div.file-item-add {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: center;
                                gap: 8px;
                                font-size: 14px;
                                color: #2A2A2A;

                                &:before {
                                    content: '';
                                    width: 22px;
                                    height: 22px;
                                    display: flex;
                                    background: url('../images/configurator/files-Icon.svg') center no-repeat;
                                    background-size: contain;
                                }


                            }

                            input {
                                position: absolute;
                                top: 0px;
                                left: 0px;
                                width: 100%;
                                height: 100%;
                                opacity: 0.000001;
                                cursor: pointer;
                            }
                        }

                        div {
                            font-size: 11px;
                            color: #605F5F;
                        }

                        div.file-item-btn {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            text-transform: none;
                            background: #E4E4E4 !important;
                            width: calc(50% - 4px);
                            font-size: 14px;
                            color: #2A2A2A;

                        }

                        label.file-item-pos {
                            width: 100%;
                            border: 1px solid #CBCBCB;
                            font-size: 14px;
                            border-radius: 2px;

                            input {
                                display: none;
                            }

                            .file-item-name {
                                display: flex;
                                gap: 8px;
                                padding: 4px 11px;
                                align-items: center;
                                justify-content: space-between;
                                font-size: 11px;
                                color: #605F5F;

                                .file-item-del {
                                    line-height: 1;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    transform: translateY(-1px);
                                }
                            }
                        }
                    }
                }

                &.step-type-radio.step-display-button {
                    .config-step-body.config-body-radio {
                        .body-box {
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            gap: 10px;

                            .btn {
                                font-weight: 500;
                            }

                        }
                    }
                }
            }


        }

        .row.digiconfig-bottom {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin: 0;

            .col-md-5 {
                width: calc(50% - 8px);
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
                justify-content: flex-start;
                background: #FAFAFB;
                padding: 18px 14px;
                border-radius: 2px;
                margin: 0;

                @media (max-width: 768px) {
                    width: 100%;
                }

                .price-label {
                    font-size: 11px;
                    color: #605F5F;
                }

                .price-value {
                    font-size: 26px;
                    font-weight: 600;

                }
            }

            .col-md-12 {
                margin: 0;
                padding: 0;

                button.btn.btn-default {
                    width: 100%;
                    background: var(--accent-color) !important;
                    font-size: 22px;
                    color: #2B2B2B;
                    padding: 22px;
                    text-transform: none;
                    ;

                    &:disabled {
                        background: var(--accent-color) !important;
                        opacity: .5;
                        cursor: not-allowed;
                    }
                }
            }

            .get-pdf-summary {
                border: 1.5px solid #2B2B2B;
                padding: 13px;
                width: 100%;
                text-align: center;
                font-size: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 8px;
                letter-spacing: -0.44px;
                margin-top: -8px;


            }
        }
    }

    .modal.show {
        opacity: 1;
    }

    #creator-panel {
        width: 100%;
        max-width: 1300px;
        height: 100%;
        position: fixed;
        right: 0px;
        top: 0px;
        z-index: 1000;
        background: #fff;
        box-shadow: 0px 0px 0px 1000vw rgba(0, 0, 0, 0.3);
    }


    #creator-panel>.container {
        display: flex;
        height: 100%;
        flex-direction: row;
        padding: 0 1rem;
        overflow-x: hidden;
        width: 100%;
    }

    #creator-panel .creator-left {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: .25rem;
        align-items: center;
        padding: 1rem;
        padding-left: 0;
        border-right: 1px solid #EAEAEA;
    }

    .creator-left button {
        cursor: pointer;
        width: 80px;
        height: 80px;
        color: var(--lite-color);
        font-size: var(--size-xxs);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0px;
        background-color: #F5F5F5;
        border: 1px solid transparent;
        outline: 0;
    }

    .creator-left button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .creator-left button span {
        display: block;
    }

    .creator-left button:hover {
        color: var(--primary-color);
        background-color: #EAEAEA;
    }

    .creator-left button svg:hover path {
        stroke: var(--primary-color);
    }

    #creator-panel .creator-context {
        /* width: 30%; */
        padding: 1rem 0.5rem;
        border-right: 1px solid #EAEAEA;
    }

    #creator-panel .creator-main-wrap {
        width: 100%;
        height: 100%;
    }

    #creator-panel .creator-main-wrap.slimer {
        width: 55%;
    }

    #creator-panel .creator-main-wrap .creator-areas>img.creator-image {
        box-shadow: unset;
    }

    #creator-panel .creator-main-head {
        display: flex;
        gap: .5rem;
        align-items: center;
        justify-content: flex-start;
        padding: 1rem;
        background: #F5F5F5;
        position: relative;
    }

    #creator-panel .creator-main-head:after {
        content: "";
        height: 100%;
        width: 300vw;
        display: block;
        background: whitesmoke;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
    }

    #creator-panel .creator-main-head .icon-state-close {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #EAEAEA;
        border-radius: 6px;
        flex-shrink: 0;
        margin-left: auto;
        margin-right: -20px;
        cursor: pointer;
        transition: transform .2s linear;

        &:hover {
            transform: rotate(180deg);
        }
    }

    .creator-main-head button {
        font-size: var(--size-xs);
        font-weight: 500;
        color: var(--primary-color);
        background: var(--white-color);
        border: 2px solid var(--primary-color);
        border-radius: 6px;
        outline: 0;
        transition: all .2s ease-in-out;
        display: inline-flex;
        gap: 0.5rem;
    }

    .creator-main-head button.active,
    .creator-main-head button.active:hover,
    .creator-main-head button.active:active,
    .creator-main-head button.active:focus,
    .creator-main-head button:hover,
    .creator-main-head button:active,
    .creator-main-head button:focus,
    .creator-main-head button:focus:active {
        color: var(--white-color);
        background: var(--primary-color);
        border: 2px solid var(--primary-color);
        outline: 0;
    }

    .creator-main-head button.has-files,
    #creator-panel .creator-main-box .btn-area {
        position: relative;
    }

    .creator-main-head button.has-files:after {
        content: "";
        background: url(/img/cms/content/circle-check.svg);
        display: inline-block;
        width: 18px;
        height: 18px;
        filter: brightness(0);
    }

    .creator-main-head button.active.has-files:after,
    .creator-main-head button.has-files:hover:after,
    .creator-main-head button.active.has-files:hover:after {
        content: "";
        background: url(/img/cms/content/circle-check.svg);
        display: inline-block;
        width: 18px;
        height: 18px;
        filter: brightness(1) !important;
    }

    .creator-main-head button.has-files:before,
    .creator-main-head button.active.has-files:before,
    .creator-main-head button.has-files:hover:before,
    .creator-main-head button.active.has-files:hover:before,
    #creator-panel .creator-main-box .btn-area.has-files:before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 20px;
        border: 1px solid #fff;
        position: absolute;
        right: -5px;
        top: -5px;
        background: #DC3545;
    }

    .creator-main-head button.has-files.accepted:before,
    .creator-main-head button.active.has-files.accepted:before,
    .creator-main-head button.has-files.accepted:hover:before,
    .creator-main-head button.active.has-files.accepted:hover:before,
    #creator-panel .creator-main-box .btn-area.has-files.accepted:before {
        background: #198754;
    }

    #creator-panel .creator-main-box div>div:has(.btn-area) {
        background: #F5F5F5;
        padding: 0px 16px 16px 16px;
        display: flex;
        gap: 0.4rem;
        border: 0px solid #fff;
        position: relative;
    }

    #creator-panel .creator-main-box div>div:has(.btn-area):after {
        content: "";
        height: 100%;
        width: 300vw;
        display: block;
        background: whitesmoke;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
    }

    #creator-panel .creator-main-box .btn-area {
        font-size: 14px;
        font-weight: 500;
        color: var(--primary-color);
        background: var(--white-color);
        border-radius: 6px;
        outline: 0;
        border: 0px solid #fff;
        padding: 4px 12px;
        transition: all .2s ease-in-out;
        display: inline-flex;
        gap: 0.5rem
    }

    #creator-panel .creator-main-box .btn-area:hover,
    #creator-panel .creator-main-box .btn-area.active,
    #creator-panel .creator-main-box .btn-area.active:hover {
        background: var(--primary-color);
        color: var(--white-color);
    }

    #creator-panel .creator-main-box .btn-area.has-files:after {
        content: "";
        background: url(/img/cms/content/circle-check.svg);
        display: inline-block;
        width: 18px;
        height: 18px;
        filter: brightness(0);
    }

    #creator-panel .creator-main-box .btn-area.has-files.active:after,
    #creator-panel .creator-main-box .btn-area.has-files:hover:after {
        content: "";
        background: url(/img/cms/content/circle-check.svg);
        display: inline-block;
        width: 18px;
        height: 18px;
        filter: brightness(1);
    }


    /* === SubMenu Left Context === */
    .creator-context .align-column {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .creator-context .align-column button {
        cursor: pointer;
        display: flex;
        gap: 1rem;
        flex-direction: row;
        background-color: #F5F5F5;
        width: 100%;
        padding: .5rem;
        font-size: 10px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: left;
        border: none;
        white-space: nowrap;
        outline: 0;
    }

    .creator-context .layout-column div div {
        margin-bottom: 4px;
    }

    .creator-context .align-column>div {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .creator-context .align-column div button:hover {
        background-color: #EAEAEA;
    }



    .creator-context .layout-column div button {
        background-color: #F5F5F5;
        width: 32px;
        font-size: 18px;
        font-weight: 200;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: center;
        margin-bottom: 3px;
        padding: 8px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .creator-context .layout-column button {
        transition: all .3s ease-in-out;
    }

    .creator-context .layout-column button:hover {
        background: #EAEAEA !important;
    }

    .creator-context .layout-column div input {
        display: inline-flex;
        width: calc(100% - 64px);
        padding: 8px;
        text-align: center;
        border: 0px solid #fff;
        height: 38px;
        font-size: 12px;
    }

    .creator-context .layout-column {
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0px;
        width: 160px;
    }

    .creator-context .layout-column>div {
        margin-bottom: 8px;
    }


    /* configurator */
    .box-effect {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        clip: rect(10px, 10px, 10px, 10px);
        overflow: hidden;
    }



    /* Files popup */

    #uploadCreatorModal,
    #cartErrorModal {
        background: rgba(0, 0, 0, 0.2);
    }

    #uploadCreatorModal .modal-dialog {
        width: 100vw;
        height: 100vh;
        transform: translate(0%, 10%);
    }

    #uploadCreatorModal .modal-header,
    #cartErrorModal .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #uploadCreatorModal .modal-header:after,
    #cartErrorModal .modal-header:after {
        display: none
    }

    #uploadCreatorModal .dropzone {
        border: 0px solid #fff;
        padding: 20px 10px;
        display: block;
        flex-direction: column;
    }

    .dropzone .dz-preview .dz-success-mark,
    .dropzone .dz-preview .dz-error-mark {
        display: none;
        visibility: hidden;
    }

    #uploadCreatorModal .dropzone .dz-button {
        font-size: 12px;
        line-height: 166%;
    }

    #uploadCreatorModal .dropzone .dz-button img {
        border-radius: 8px;
        border: 1px solid var(--black-800, #2B2B2B);
        background: var(--black-50, #FAFAFB);
        box-shadow: 0px 1.00001px 2.00003px 0px rgba(16, 24, 40, 0.05);
        width: 40px;
        height: 40px;
        object-fit: contain;
        margin-bottom: 12px;
    }

    #uploadCreatorModal .dropzone.dz-started .dz-message {
        display: block;
        margin-left: -25px;
        margin-right: -25px;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 30px;
        padding-top: 30px;
        margin-top: -35px;
    }

    #uploadCreatorModal:has(.digi-dz-filehead) .dz-message {
        margin-bottom: 60px;
    }

    #uploadCreatorModal .digi-dz-filehead {
        background-color: #FFCB2F;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -37px;
        margin-bottom: 30px;
        width: calc(100% - 30px);
        margin-left: 0px;
        padding: 10px;
        font-size: 14px;
        gap: 10px;
        position: absolute;
        left: 15px;
        top: 170px;
        height: 40px;
    }

    #uploadCreatorModal .dropzone .dz-preview.dz-image-preview {
        display: inline-flex;
        padding: var(--spacing-md, 8px) var(--spacing-md, 8px) var(--spacing-lg, 12px) var(--spacing-md, 8px);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md, 8px);
        align-self: stretch;
        border-radius: var(--radius-md, 8px);
        background: var(--black-100, #F5F5F5);
        margin: 4px;
        width: calc(33% - 8px);
    }

    #uploadCreatorModal .dropzone .dz-preview.dz-image-preview.dz-error {
        border: 1px solid red;
        background: #ffdcdc;
    }

    .dropzone .dz-preview.dz-error .dz-error-message {
        font-size: 10px;
        line-height: 130%;
    }

    #uploadCreatorModal .dropzone .dz-preview.dz-image-preview>img {
        aspect-ratio: 14 / 9;
        object-fit: cover;
        width: 100%;
        height: auto;
        background: #fff;
        border-radius: 4px;
        transition: all .3s ease-in-out;
    }

    #uploadCreatorModal .dropzone .dz-preview.dz-image-preview .dz-remove {
        width: 20px;
        height: 20px;
        background: white url(/img/custom/trash.svg) center center no-repeat;
        background-size: contain;
        border-radius: 20px;
        position: absolute;
        right: 5px;
        top: 8px;
        text-indent: -99999px;
        border: 3px solid #fff;
    }

    #uploadCreatorModal .dropzone .dz-preview .dz-details,
    #uploadCreatorModal .dropzone .dz-preview .dz-details .dz-size {
        position: static;
        opacity: 1;
        text-align: left;
        font-size: 12px;
        padding: 0px;
        background: transparent;
        margin-bottom: 0px;
    }

    #uploadCreatorModal .dz-digi-import {
        position: static;
        opacity: 1;
        width: 100%;
        display: inline-flex;
        padding: 8px 20px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        border: 2px solid var(--black-800, #2B2B2B);
        background: var(--White, #FFF);
        cursor: pointer !important;
        opacity: 1;
        transition: all .3s ease-in-out;
    }

    #uploadCreatorModal .dz-digi-import:hover {
        background: var(--black-800, #2B2B2B);
        color: var(--White, #FFF);
    }

    #uploadCreatorModal .dz-error .dz-digi-import {
        display: none !important;
    }

    #uploadCreatorModal .dz-error .dz-error-message {
        position: static !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    #uploadCreatorModal .dz-error .dz-error-message:after {
        display: none !important;
    }

    .lang-de #uploadCreatorModal .dz-digi-import {
        font-size: 15px;
        width: calc(100% - 20px);
        left: 10px;
    }

    #uploadCreatorModal .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
        background: transparent;
    }

    #uploadCreatorModal .dropzone .dz-preview.dz-image-preview:hover .dz-digi-import {
        opacity: 1;
    }

    #uploadCreatorModal .dropzone .dz-preview.dz-image-preview.dz-error:hover .dz-digi-import {
        display: none;
    }

    #uploadCreatorModal .dropzone .dz-preview.dz-image-preview:hover>img {
        filter: brightness(.5);
    }

    /* layers */
    #creator-panel .creator-context .layer-column {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #creator-panel .creator-context button:last-child {
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;

        span:has(svg) {
            height: 19px;

            svg {
                width: 19px;
                height: 19px;
            }
        }
    }

    #creator-panel .creator-context .layer-column .layer-wrap {
        display: flex;
        padding: var(--spacing-md, 8px) var(--spacing-md, 8px) var(--spacing-lg, 12px) var(--spacing-md, 8px);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md, 8px);
        align-self: stretch;
        border-radius: var(--radius-md, 8px);
        background: var(--black-100, #F5F5F5);
        font-size: 10px;
        line-height: 125%;
        width: 100%;
        max-width: 160px;
    }

    #creator-panel .creator-context .layer-column .layer-img img,
    #creator-panel .creator-context .layer-column .layer-img {
        width: 100%;
    }

    #creator-panel .creator-context .layer-column .layer-img img {
        aspect-ratio: 15 / 5;
        object-fit: cover;
        border-radius: 5px;
        background: #fff;
        width: 150px;
    }

    #creator-panel .creator-context .layer-column .layer-head {
        width: 100%;
        position: relative;
        font-size: 0px;
        text-align: center;
    }

    #creator-panel .creator-context .layer-column .layer-head:before {
        content: "";
        background: url(/img/cms/content/handle.svg) center center no-repeat;
        display: inline-block;
        width: 24px;
        height: 15px;
        position: static;
        cursor: grab;
    }

    #creator-panel .creator-context .layer-column .layer-head .layer-del {
        height: 20px;
        width: 20px;
        background: url(/img/custom/trash.svg) center center no-repeat;
        background-size: contain;
        border-radius: 20px;
        position: absolute;
        right: 0px;
        top: 0px;
        text-indent: -99999px;
        cursor: pointer;
    }

    #creator-panel .creator-context .layout-column>button:first-of-type {
        margin-top: 36px;
    }

    #creator-panel .creator-context .layout-column>button {
        display: flex;
        padding: var(--spacing-md, 8px);
        align-items: center;
        gap: var(--spacing-xl, 16px);
        align-self: stretch;
        width: 100%;
        font-size: 10px;
        font-weight: 500;
        border: 0px solid #fff;
        margin-bottom: 4px;
        background: #F5F5F5;
        cursor: pointer;
    }



    /* main area */

    .creator-main-box .creator-area {
        background: transparent !important;
        border: unset !important;
        background-color: transparent !important;
    }

    .creator-main-box .creator-area.has-files2 .creator-area-label {
        display: block !important;
        position: absolute;
        bottom: -25px;
        left: unset !important;
        font-size: 10px;
        width: initial !important;
        padding: 6px 10px 4px 10px;
        color: #000;
        background-color: #fff;
        border-radius: 100px;
        margin-left: 0px;
        border: 1px solid rgba(0, 0, 0, 0.3);
        transform: translateX(50%);
        top: -30px;
        bottom: auto !important;
        z-index: 999;
        line-height: 100%;
        right: 50%;
        text-align: center;
        word-break: keep-all;
        white-space: nowrap;
    }

    .creator-main-box .creator-area:nth-child(1) {
        border: 1px dashed var(--frame, #094BAC) !important;
        background: rgba(255, 255, 255, 0.20) !important;
    }

    .creator-main-box .creator-area .creator-area-name {
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.20);
        border: 1px dashed var(--frame, #094BAC) !important;
        font-size: 0px;
        background-size: contain;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .creator-main-box .creator-area .creator-area-name:after {
        content: "";
        width: 100%;
        height: 100%;
        background: url(/img/cms/content/upload_base.svg) center center no-repeat;
        display: block;
        max-width: 140px;
        max-height: 200px;
        background-size: contain;
        z-index: 1;
    }

    .lang-gb .creator-main-box .creator-area .creator-area-name:after {
        background: url(/img/cms/content/upload_base_en.svg) center center no-repeat;
        background-size: contain;
    }

    .lang-de .creator-main-box .creator-area .creator-area-name:after {
        background: url(/img/cms/content/upload_base_de.svg) center center no-repeat;
        background-size: contain;
    }

    .creator-main-box .creator-area.has-files2 .creator-area-name:after {
        display: none;
    }

    .creator-main-box .creator-area:has(.yoyoo-ddr) .creator-area-name {
        background: transparent;
        border: 2px dashed var(--frame, #094BAC);
        position: absolute;
    }

    .creator-open button.btn {
        width: 100%;
        margin-bottom: 10px;
        padding: 8px 20px;
        border: 1px solid #EAEAEA;
        color: #EAEAEA !important;
        font-size: var(--size-xs);
        font-family: var(--font-header);
        font-style: normal;
        font-weight: 500;
        line-height: 170%;
        width: 100%;
        text-transform: none;
        background: #121212 !important;
    }

    .creator-open .creator-data {
        margin-bottom: 10px;
        display: inline-grid;
    }

    .creator-open .creator-data>div {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
    }

    .creator-open .creator-data .creator-data-item {
        display: inline-flex;
        padding: 4px 16px;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        border-radius: 100px;
        border: 1px solid var(--black-300, #CBCBCB);
        background: var(--black-100, #F5F5F5);
        font-size: 16px;
        width: auto;
        margin-bottom: 5px;
    }

    .creator-open .creator-data .creator-data-item:before {
        content: "";
        background: url(/img/cms/content/circle-check.svg);
        display: inline-block;
        width: 18px;
        height: 18px;
        filter: brightness(0);
    }

    .creator-main-box .creator-areas,
    .creator-main-box .visual-box {
        position: relative;
        display: inline-block;
    }

    .creator-main-box .area-acceptance {
        position: absolute;
        padding: 16px;
        width: 100%;
        bottom: 0;
        display: flex;
        gap: 15px;
        background: transparent;
        border: 0px solid #fff;
        box-shadow: unset;
        z-index: 1;
        display: flex;
        justify-content: center;
    }

    .creator-main-box .area-acceptance span {
        font-family: Space Grotesk;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 166%;
        padding-bottom: 16px;
        display: inline-block;
    }

    .accept-box {
        padding: 4px;
        border: 2px solid var(--black-800, #2B2B2B);
        border-radius: 100px;
        display: inline-flex;
        flex-direction: row;
        gap: 4px;
        align-items: center;
        justify-content: center;
        position: relative;
        background: #fff;
    }

    .accept-box span {
        padding: 3px 24px !important;
        z-index: 1;
        cursor: pointer;
    }


    .accept-box.cancel-accept span:last-child {
        color: #fff;
        background: #198754;
        border-radius: 100px;
    }

    .accept-box.no-accept span:first-child {
        color: #fff;
        border-radius: 100px;
        background: #DC3545;
    }

    .accept-box.info-accept {
        border: unset;
        cursor: pointer;
    }

    .accept-box.info-accept svg {
        height: 32px;
        width: 32px;
    }

    #acceptanceModal {
        width: 100vw;
        height: 100vh;
    }

    #showPreview.modal.fade .modal-dialog,
    #showPreview.modal.fade .modal-dialog,
    #savePreviewModal.modal.fade .modal-dialog,
    #acceptanceModal.modal.fade .modal-dialog,
    #consentModal.modal.fade .modal-dialog,
    #cartErrorModal.modal.fade .modal-dialog {
        width: 100vw;
        height: 100vh;
        transform: unset;
        margin: 0px;
        padding: 0px;
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 100vw;
    }

    #acceptanceModal .modal-content,
    #consentModal .modal-content,
    #cartErrorModal .modal-content {
        width: 100%;
        max-width: 600px;
        margin: 0px 16px;
    }

    #acceptanceModal .modal-body,
    #consentModal .modal-body,
    #cartErrorModal .modal-body {
        padding: 0px 32px 32px 32px;
        font-size: 14px;
        line-height: 160%;
    }

    #acceptanceModal .modal-body>div:first-child {
        margin-bottom: 17px;
    }

    #acceptanceModal .modal-body>div:nth-child(2) {
        margin-bottom: 32px;
    }

    #acceptanceModal .modal-body>div:nth-child(3) {
        margin-bottom: 8px;
    }

    #acceptanceModal .modal-body>button {
        width: 100%;
        background: #000;
        border: unset;
        padding: 10px 20px;
        color: #fff;
        transition: all .2s ease-in-out;
        cursor: pointer;
    }

    #acceptanceModal .modal-body>button:disabled {
        width: 100%;
        background: #F5F5F5;
        border: unset;
        padding: 10px 20px;
        color: #CBCBCB;
        cursor: not-allowed;
    }

    #acceptanceModal .modal-body>div>div>div {
        display: inline-flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    #acceptanceModal .modal-body>div div:empty {
        display: none;
    }

    #acceptanceModal .modal-body .accept-box {
        padding: 2px;
        border-width: 1px
    }

    #acceptanceModal .modal-body .accept-box span {
        font-size: 10px;
        padding: 2px 16px;
    }

    #acceptanceModal .modal-header,
    #consentModal .modal-header {
        padding: 32px 32px 0px 32px;
        border-bottom: unset;
    }

    #showPreview .modal-header,
    #savePreviewModal .modal-header {
        padding: 16px 32px;
        background-color: var(--accent-color);
    }

    #acceptanceModal .modal-title,
    #consentModal .modal-title {
        font-size: 34px;
        font-style: normal;
        font-weight: 500;
        line-height: 110%;
        letter-spacing: -0.6px;
        display: inline-flex;
        gap: 9px;
        align-items: center;
        padding-bottom: 16px;
    }

    #showPreview .modal-title,
    #savePreviewModal .modal-title {
        color: #5C5C5C;
        font-size: var(--size-xs);
    }

    #savePreviewModal .close {
        display: none;
    }

    #showPreview .modal-title strong,
    #savePreviewModal .modal-title strong {
        color: var(--primary-color);
        font-size: var(--size-s);
        font-weight: bold;
        display: block;

    }

    #acceptanceModal .modal-title:before {
        content: '';
        width: 37px;
        height: 37px;
        display: block;
        background-image: url("data:image/svg+xml,%3Csvg width='37' height='37' viewBox='0 0 37 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.9375' y='0.5' width='36' height='36' rx='18' fill='%231BA97F'/%3E%3Cpath d='M13.6484 18.5L17.3984 22.25L24.8984 14.75' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    }

    #consentModal .modal-title:before {
        content: '';
        width: 37px;
        height: 37px;
        display: block;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="31" height="30" viewBox="0 0 31 30" fill="none"><rect x="0.648438" width="30" height="30" rx="15" fill="%231BA97F"/><path d="M15.6484 17.4V15M15.6484 12.6H15.6544M21.6484 15C21.6484 18.3137 18.9621 21 15.6484 21C12.3347 21 9.64844 18.3137 9.64844 15C9.64844 11.6863 12.3347 9 15.6484 9C18.9621 9 21.6484 11.6863 21.6484 15Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center center no-repeat;
    }


    .creator-main-box .visual-item {
        border: 1px solid #CBCBCB;
    }

    .preview-box {
        margin-top: 15px;
    }

    .preview-box .preview-item:before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50px;
        background: red;
        position: absolute;
        right: 12px;
        top: -3px;
        z-index: 2;
        border: 1px solid #fff;
    }

    .preview-box .preview-item.accepted:before {
        background: #1a8754;
    }

    .creator-main-box .visual-item .visual-label {
        padding: 12px 16px;
        width: 100%;
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
    }

    .creator-main-box .visual-item .visual-label i {
        font-style: unset;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        cursor: pointer;
    }

    #showPreview,
    #savePreviewModal,
    #acceptanceModal,
    #consentModal,
    #cartEmptyModal {
        background: rgba(0, 0, 0, 0.3);
    }


    @-moz-keyframes spin {
        from {
            -moz-transform: rotate(0deg);
        }

        to {
            -moz-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spin {
        from {
            -webkit-transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    #showPreview #previewMain,
    #savePreviewModal #previewMain {
        position: absolute;
        left: -1000vw;
    }

    #showPreview .modal-body,
    #savePreviewModal .modal-body {
        max-height: 250px;
        position: relative;
        height: 100%;
        min-height: 250px;
    }


    #savePreviewModal .modal-body .save-preview-item {
        position: absolute;
        left: -9999vw;
        top: -9999vh;
    }

    #savePreviewModal .modal-body .save-preview-item.collapse {
        display: block;
    }

    #showPreview .modal-body:after,
    #savePreviewModal .modal-body:after {
        content: "";
        width: 108px;
        height: 108px;
        position: absolute;
        left: calc(50% - 54px);
        top: 67px;
        background-size: cover !important;
        background: url('data:image/svg+xml,<svg width="108" height="107" viewBox="0 0 108 107" fill="none" xmlns="http://www.w3.org/2000/svg"><path id="Line" d="M100.647 53.2499C100.647 59.3756 99.4408 65.4414 97.0966 71.1008C94.7524 76.7602 91.3165 81.9024 86.9849 86.234C82.6534 90.5655 77.5111 94.0014 71.8517 96.3456C66.1923 98.6898 60.1266 99.8964 54.0009 99.8964C47.8752 99.8964 41.8095 98.6898 36.1501 96.3456C30.4907 94.0014 25.3484 90.5655 21.0169 86.2339C16.6854 81.9024 13.2494 76.7602 10.9052 71.1008C8.56103 65.4413 7.35449 59.3756 7.35449 53.2499C7.35449 47.1242 8.56104 41.0585 10.9052 35.3991C13.2495 29.7397 16.6854 24.5974 21.0169 20.2659C25.3485 15.9344 30.4907 12.4985 36.1501 10.1543C41.8095 7.81006 47.8752 6.60351 54.0009 6.60352C60.1266 6.60352 66.1924 7.81007 71.8518 10.1543C77.5112 12.4985 82.6534 15.9344 86.9849 20.266C91.3165 24.5975 94.7524 29.7397 97.0966 35.3992C99.4408 41.0586 100.647 47.1243 100.647 53.25L100.647 53.2499Z" stroke="%232B2B2B" stroke-width="12.868" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.16 12.87"/></svg>') center center no-repeat;
        -webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)));
    }

    #showPreview .modal-body:before,
    #savePreviewModal .modal-body:before {
        content: "";
        position: absolute;
        top: 67px;
        z-index: 2;
        left: calc(50% - 54px);
        width: 108px;
        height: 108px;
        border-radius: 141.524px;
        -webkit-animation: spin 1s infinite linear;
        background: conic-gradient(from 250deg at 50% 50%, #fff 0deg, rgba(0, 0, 0, 0.00) 331.875deg, rgba(0, 0, 0, 0.00) 360deg);

    }

    .creator-main-box .creator-areas {
        overflow: hidden;
        box-shadow: unset;
    }

    .creator-areas .creator-area .yoyoo-ddr.active>div:first-child {
        opacity: 1;
        background: transparent !important;
    }

    .creator-summary {
        position: absolute;
        right: 30px;
        bottom: 30px;
        padding: 18px 82px 18px 14px;
        border-radius: 2px;
        background: #FAFAFB;
        display: inline-flex;
        gap: 8px;
        flex-direction: column;

        .creator-summary-label {
            font-size: 14px;
            font-weight: 600;
        }

        .creator-summary-price {
            font-weight: 600;
            font-size: 20px;

            div:last-child {
                font-size: 14px;
                opacity: .6;
            }
        }

        .creator-summary-next {
            position: absolute;
            right: 14px;
            bottom: 18px;

            button {
                background-color: var(--accent-color) !important;
                border: unset;
                border-radius: 0px;
                cursor: pointer;

                svg {
                    fill: #000;
                    stroke: #000;
                    cursor: pointer;

                    path {
                        stroke: #000;
                    }
                }

            }
        }




    }


}

.product-delivery-price,
.product-omnibus-info,
.product-current-viewers,
.product-information .product-variants,
.product-information .product-discounts,
.product-information .product-avail,
.product-information .product-avail,
.product-information .product-howto {
    display: none !important;
}