:root {
    --shadowGrey: #0000001A;
    --greyLine: #e5e5e5;
    --textColour: #333333;
    --beigeBackground: #f2e8d8;
    --lightGreen: #3D8743;
}

@font-face {
  font-family: filsonSoft; 
  src: url(/0/Handler/CSSOverride/GetImage/1/filsonsoft-regular-webfont.woff); 
  src: url(/0/Handler/CSSOverride/GetImage/1/filsonsoft-regular-webfont.woff2); 
}

.megaedit-preview #addToBasketButton {
    top: 1rem;
}
.page-dynamicproduct-editor .catfish-button.is-small,
.page-dynamicproduct-editor .button.is-small {
    padding: 0.5rem;
}
.page-dynamicproduct-editor .MEUIFormField .control .meuiNonLayout,
.page-dynamicproduct-editor .MEUIFormField .control .zoom-button {
    height: 100%;
}
.page-dynamicproduct-editor .AddImageToField span.no-image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
}
.Script_DynamicUiGeneration_New .fb-background-color-select .colorSelector {
    min-width: 100%;
}
.Script_DynamicUiGeneration_New .ItemsListBody .itemDetails {
    padding-left: 1rem;
    padding-right: 1rem;
}
.Script_DynamicUiGeneration_New_MobileUX .DynamicUiGeneration-mobile-ui-global {
    position: fixed;
    bottom: 4.5rem;
    z-index: 5;
    max-height: 0px;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0px;
    -webkit-transition: max-height 0.15s linear;
    -moz-transition: max-height 0.15s linear;
    -o-transition: max-height 0.15s linear;
    transition: max-height 0.15s linear;
    box-shadow: inset 0px -7px 19px -10px rgba(0, 0, 0, 0.2);
}
.Script_DynamicUiGeneration_New_MobileUX
    .DynamicUiGeneration-mobile-ui-global
    > .columns {
    padding: 1rem;
    padding-bottom: 2rem;
    margin: 0 !important;
}
.Script_DynamicUiGeneration_New_MobileUX
    .DynamicUiGeneration-mobile-ui-global.is-active {
    max-height: 70vh;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux {
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 5;
    background: #fff;
    text-align: center;
    padding: 0rem;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux > .columns {
    padding: 0px;
    margin: 0px;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux > .columns > .column {
    padding: 1rem;
    margin: 0px;
    border-bottom: solid 1px #eee;
}
.Script_DynamicUiGeneration_New_MobileUX
    .eds-mobile-ux-footer
    .toggle-fieldlist-button {
    border: none;
    background: transparent !important;
}
.Script_DynamicUiGeneration_New_MobileUX
    .eds-mobile-ux-footer
    .progress-bar-container {
    display: block;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux-footer .progress-bar {
    position: relative;
    width: 100%;
    height: 1.5rem;
    border-radius: 0.75rem;
}
.Script_DynamicUiGeneration_New_MobileUX
    .eds-mobile-ux-footer
    .progress-bar
    .progress {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    display: block;
    height: 1.5rem;
}
.Script_DynamicUiGeneration_New_MobileUX .select-step-button .field-name {
    max-width: calc(100vw - 10rem) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.Script_DynamicUiGeneration_New_MobileUX .select-step-button {
    padding: 1rem;
    margin-bottom: -0.5rem;
}
.Script_DynamicUiGeneration_New_MobileUX .column.actions-list {
    overflow: hidden;
    overflow-x: auto;
    border-right: solid 1px #eee;
    box-shadow: inset -7px 0px 26px -13px rgba(0, 0, 0, 0.2);
    min-height: 100%;
}
.Script_DynamicUiGeneration_New_MobileUX
    .column.actions-list.Variable-Input-Container {
    overflow: visible;
    overflow-x: visible;
    text-align: left;
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button {
    padding: 0.5rem;
    height: 4rem;
    width: 4rem !important;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button span.fill_button {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.Script_DynamicUiGeneration_New
    .large-icon-vertical-button
    span.fill_button
    .check {
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon {
    display: block;
    margin: 0px !important;
    height: 1.8rem;
    line-height: 2rem;
    width: 100%;
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon + .text {
    font-size: 0.75em;
    font-weight: bold;
    padding-top: 0.3rem;
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon .fa-edit {
    margin-left: 0.2em;
}
.Script_DynamicUiGeneration_New .edit-mode-done-button {
    position: fixed;
    top: calc(50vh - 4rem);
    right: 1rem;
}
.Script_DynamicUiGeneration_New_MobileUX .column.eds-mobile-ux-header {
    position: fixed;
    top: 4rem;
    left: 0px;
    width: 100%;
    z-index: 9;
    padding: 0.5rem;
}
.Script_DynamicUiGeneration_New_MobileUX.EditingMode
    .column.eds-mobile-ux-header {
    top: 0px;
}
.Script_DynamicUiGeneration_New_MobileUX .column.eds-mobile-ux-header span {
    padding: 0rem 1rem;
    display: inline-block;
}
.Script_DynamicUiGeneration_New_MobileUX
    .column.eds-mobile-ux-header
    span.orderNR {
    border-right: solid 1px #fff;
}
.Script_DynamicUiGeneration_New_MobileUX .additionalTargetContainer {
    display: none !important;
}
@media screen and (max-width: 600px) {
    .Script_DynamicUiGeneration_New_MobileUX
        .meuiDateTimePicker
        + .dropdown-menu
        button,
    .Script_DynamicUiGeneration_New_MobileUX
        .meuiDateTimePicker
        + [uib-datepicker-popup-wrap]
        .uib-datepicker-popup.dropdown-menu
        button,
    .Script_DynamicUiGeneration_New_MobileUX
        [uib-datepicker-popup-wrap]
        .uib-datepicker-popup.dropdown-menu
        button {
        border: solid 1px #fff;
        padding: 0.7rem;
        font-size: 1rem;
        min-width: 100%;
        height: 3rem;
        border-radius: 5px;
    }
}
.Script_DynamicUiGeneration_New_MobileUX .input.is-danger,
.Script_DynamicUiGeneration_New_MobileUX .catfish-input.is-danger,
.Script_DynamicUiGeneration_New_MobileUX .catfish-select.is-danger,
.Script_DynamicUiGeneration_New_MobileUX .textarea.is-danger,
.catfish-textarea.is-danger {
    border-color: #cf4646 !important;
    background: #f9dcdc !important;
}
.megaedit-preview #addToBasketButton {
    top: 1rem;
    right: 5rem;
}

.UploadIntroDialog .modal-content {
    max-width: 30rem;
    box-shadow: none;
}
.UploadIntroDialog .modal-content .modal-header,
.UploadIntroDialog .modal-content .modal-footer {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}
.UploadIntroDialog .modal-content .modal-body {
    padding: 3rem;
    border-radius: 2rem;
}
.UploadIntroDialog .modal-content .modal-header {
    display: none;
}
.UploadIntroDialog .uploadIntro-UploadButton {
    border-style: dashed !important;
    border-width: 2px !important;
    background: transparent;
    padding: 1rem;
    white-space: normal;
}
.UploadIntroDialog .modal {
    background: rgba(255, 255, 255, 0.7);
}
.Script_DynamicUiGeneration_New .ItemsListBody .itemDetails {
    padding-left: 1rem;
    padding-right: 1rem;
}

.Script_DynamicUiGeneration_New_MobileUX .DynamicUiGeneration-mobile-ui-global {
    position: fixed;
    bottom: 4.5rem;
    z-index: 5;
    max-height: 0px;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0px;
    -webkit-transition: max-height 0.15s linear;
    -moz-transition: max-height 0.15s linear;
    -o-transition: max-height 0.15s linear;
    transition: max-height 0.15s linear;
    box-shadow: inset 0px -7px 19px -10px rgba(0, 0, 0, 0.2);
}

.Script_DynamicUiGeneration_New_MobileUX
    .DynamicUiGeneration-mobile-ui-global
    > .columns {
    padding: 1rem;
    padding-bottom: 2rem;
    margin: 0 !important;
}

.Script_DynamicUiGeneration_New_MobileUX
    .DynamicUiGeneration-mobile-ui-global.is-active {
    max-height: 70vh;
}

.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux {
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 5;
    background: #fff;
    text-align: center;
    padding: 0rem;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
}

.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux > .columns {
    padding: 0px;
    margin: 0px;
}

.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux > .columns > .column {
    padding: 1rem;
    margin: 0px;
    border-bottom: solid 1px #eee;
}

.Script_DynamicUiGeneration_New_MobileUX
    .eds-mobile-ux-footer
    .toggle-fieldlist-button {
    border: none;
    background: transparent !important;
}

.Script_DynamicUiGeneration_New_MobileUX
    .eds-mobile-ux-footer
    .progress-bar-container {
    display: block;
}

.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux-footer .progress-bar {
    position: relative;
    width: 100%;
    height: 1.5rem;
    border-radius: 0.75rem;
}

.Script_DynamicUiGeneration_New_MobileUX
    .eds-mobile-ux-footer
    .progress-bar
    .progress {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    display: block;
    height: 1.5rem;
}

.Script_DynamicUiGeneration_New_MobileUX .select-step-button .field-name {
    max-width: calc(100vw - 10rem) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Script_DynamicUiGeneration_New_MobileUX .select-step-button {
    padding: 1rem;
    margin-bottom: -0.5rem;
}

.Script_DynamicUiGeneration_New_MobileUX .column.actions-list {
    overflow: hidden;
    overflow-x: auto;
    border-right: solid 1px #eee;
    box-shadow: inset -7px 0px 26px -13px rgba(0, 0, 0, 0.2);
    min-height: 100%;
}

.Script_DynamicUiGeneration_New_MobileUX
    .column.actions-list.Variable-Input-Container {
    overflow: visible;
    overflow-x: visible;
    text-align: left;
}

.Script_DynamicUiGeneration_New .large-icon-vertical-button {
    padding: 0.5rem;
    height: 4rem;
    width: 4rem !important;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.Script_DynamicUiGeneration_New .large-icon-vertical-button span.fill_button {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.Script_DynamicUiGeneration_New
    .large-icon-vertical-button
    span.fill_button
    .check {
}

.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon {
    display: block;
    margin: 0px !important;
    height: 1.8rem;
    line-height: 2rem;
    width: 100%;
}

.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon + .text {
    font-size: 0.75em;
    font-weight: bold;
    padding-top: 0.3rem;
}

.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon .fa-edit {
    margin-left: 0.2em;
}

.Script_DynamicUiGeneration_New .edit-mode-done-button {
    position: fixed;
    top: calc(50vh - 4rem);
    right: 1rem;
}

.Script_DynamicUiGeneration_New_MobileUX .column.eds-mobile-ux-header {
    position: fixed;
    top: 4rem;
    left: 0px;
    width: 100%;
    z-index: 9;
    padding: 0.5rem;
}

.Script_DynamicUiGeneration_New_MobileUX.EditingMode
    .column.eds-mobile-ux-header {
    top: 0px;
}

.Script_DynamicUiGeneration_New_MobileUX .column.eds-mobile-ux-header span {
    padding: 0rem 1rem;
    display: inline-block;
}

.Script_DynamicUiGeneration_New_MobileUX
    .column.eds-mobile-ux-header
    span.orderNR {
    border-right: solid 1px #fff;
}

.Script_DynamicUiGeneration_New_MobileUX .additionalTargetContainer {
    display: none !important;
}

@media screen and (max-width: 600px) {
    .Script_DynamicUiGeneration_New_MobileUX
        .meuiDateTimePicker
        + .dropdown-menu
        button,
    .Script_DynamicUiGeneration_New_MobileUX
        .meuiDateTimePicker
        + [uib-datepicker-popup-wrap]
        .uib-datepicker-popup.dropdown-menu
        button,
    .Script_DynamicUiGeneration_New_MobileUX
        [uib-datepicker-popup-wrap]
        .uib-datepicker-popup.dropdown-menu
        button {
        border: solid 1px #fff;
        padding: 0.7rem;
        font-size: 1rem;
        min-width: 100%;
        height: 3rem;
        border-radius: 5px;
    }
}

.Script_DynamicUiGeneration_New_MobileUX .input.is-danger,
.Script_DynamicUiGeneration_New_MobileUX .catfish-input.is-danger,
.Script_DynamicUiGeneration_New_MobileUX .catfish-select.is-danger,
.Script_DynamicUiGeneration_New_MobileUX .textarea.is-danger,
.catfish-textarea.is-danger {
    border-color: #cf4646 !important;
    background: #f9dcdc !important;
}

.Script_DynamicUiGeneration_New .UploadIntroDialog .modal-content {
    max-width: 30rem;
    box-shadow: none;
}

.Script_DynamicUiGeneration_New .UploadIntroDialog .modal-content .modal-header,
.UploadIntroDialog .modal-content .modal-footer {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.Script_DynamicUiGeneration_New .UploadIntroDialog .modal-content .modal-body {
    padding: 3rem;
    border-radius: 2rem;
}

.Script_DynamicUiGeneration_New
    .UploadIntroDialog
    .modal-content
    .modal-header {
    display: none;
}

.Script_DynamicUiGeneration_New .UploadIntroDialog .uploadIntro-UploadButton {
    border-style: dashed !important;
    border-width: 2px !important;
    background: transparent;
    padding: 1rem;
    white-space: normal;
}

.Script_DynamicUiGeneration_New .UploadIntroDialog .modal {
    background: rgba(255, 255, 255, 0.7);
}

.Script_DynamicUiGeneration_New .SceneModeControls {
    position: absolute;
    bottom: 3rem;
    left: 3rem;
    z-index: 2;
}

@media screen and (max-width: 768px) {
    .Script_DynamicUiGeneration_New .SceneModeControls {
        bottom: 1rem;
        left: 1rem;
    }

    .editorBottom.is-attached-to-editor .priceContainer {
        bottom: 1rem;
        right: 1rem;
    }

    .editorBottom.is-attached-to-editor .priceContainer h2.subtitle {
        font-size: 1rem;
    }

    .editorBottom.is-attached-to-editor .priceContainer .price.title {
        font-size: 1.5rem;
    }
}

.Script_DynamicUiGeneration_New
    .customScriptUi-mainControlsArea
    > div
    > .control {
    display: inline;
    position: initial;
}

.Script_DynamicUiGeneration_New .SceneView-Container {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #fff;
}

.Script_DynamicUiGeneration_New .SceneView-Container .image-container {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.Script_DynamicUiGeneration_New .SceneView-Container .image-container img {
    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 10px;
}

.Script_DynamicUiGeneration_New .errormsg.error.text-danger.has-text-danger {
    white-space: normal;
}
.Script_DynamicUiGeneration_New .UploadIntroDialog .modal {
    background-image: url("/973669751/Handler/CSSOverride/GetImage/150/EditorSplash.jpg");
    background-size: cover;
    background-position: center;
}

.Script_DynamicUiGeneration_New .SceneView-Container .image-container {
    top: 38%;
    left: 70%;
}

.Script_DynamicUiGeneration_New .SceneView-Container {
    background-image: url("/973669751/Handler/CSSOverride/GetImage/150/EditorSplash.jpg");
    background-size: cover;
    background-position: center;
}
.upload-status-clone-target .galleryURI {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.upload-status-clone-target .galleryUploadItem__info {
    max-width: calc(100% - 7.7rem);
}
.upload-status-clone-target .galleryPreview.media-left {
    width: 3rem;
    max-width: 3rem;
}
.upload-status-clone-target .uploadList {
    max-height: 10rem !important;
}
.MEUIColumnLayout.box.imageconfiglist {
    max-height: calc(100vh - 22rem);
    overflow: hidden;
    overflow-y: auto;
    border-radius: 0px !important;
    box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}

.Script_DynamicUiGeneration_New
    .MEUIColumnLayout.box.imageconfiglist
    > .columns
    > .column {
    border: solid 1px rgba(0, 0, 0, 0.05);
    margin-bottom: -1px;
}

.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    .field.has-addons
    .control:last-child
    .catfish-button {
    margin-bottom: 0px;
}

.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE {
    padding-left: 3rem !important;
    position: relative;
}

.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE:before {
    content: "\f7a4";
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 1.1rem 0.5rem;
    background: #ccc;
    cursor: grab;
    width: 2.7rem;
    height: 3.15rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 5 Pro";
    text-align: center;
    border-radius: 4px;
}

.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE.UI-SORTABLE-CREATE-MODE {
    padding-left: 0.5rem !important;
}
.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE.UI-SORTABLE-CREATE-MODE
    .field-main-title {
    padding-left: 1.5rem;
}
.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE-CREATE-MODE:before {
    top: 0.25rem;
    left: 0.5rem;
    padding: 0.5rem 0;
    background: transparent;
    width: 2.5rem;
    height: 2rem;
    text-align: left;
}
.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE-CREATE-MODE:hover {
    outline: solid 1px #ccc;
}
.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE
    .meuiButton:not(.is-small) {
    padding-left: 1rem;
    padding-right: 1rem;
}
div#previewArea.draw_die_line {
    background: #fff;
}
.RefineSizeDialog .modal-content {
    width: 400px;
}

.megaEditBodyClass-RegisteredUser {
    .me-global-menu {
        .dropdown-item-editor-settings,
        .is-account-links,
        .dropdown-item-reset {
            display: none;
        }
    }
}

.page-dynamicproduct-editor {
    .editorTop {
        &.pane {
            background: white;
            border-bottom: 1px solid var(--greyLine);
            padding: 0px !important;
            /* inset: 0px !important; */
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
        }
        .headerWrapper {
            padding: 1rem 1rem 0.5rem 1rem;
            a.btn.btn-default,
            .viewControlButton,
            .me-global-menu button {
                color: var(
                    --brand-main-colors-and-font-primary-color
                ) !important;
                font-weight: 500 !important;
                margin-bottom: 0;
            }
            .backButton {
                display: flex !important;
                margin: 0px !important;
                .extratxt {
                    display: none;
                }
            }
        }
    }

    .add-to-basket-dialog {
        .ui-dialog-title {
            font-size: 0px;
            text-align: center;
            &:after {
                content: "Artwork customization policy";
                font-size: 1rem;
                font-weight: bold;
            }
        }
    }

    .icon {
        &.is-small {
            font-size: 1.2rem;
        }
    }

    .lhTabs_gallery,
    #leftPane-gallery {
        display: none !important;
    }

    span.current_prod_name {
        font-size: 1.5rem;
        background: transparent !important;
        color: var(--brand-main-colors-and-font-primary-color) !important;
        font-weight: bold;
        margin-bottom: 0px !important;
        max-width: 50vw !important;
        padding: 1rem !important;
        height: auto;
    }

    #parentContainer {
        /* height: calc(-9rem + 100vh); */
        width: 100%;
        /* margin-top: 9rem !important; */
        background: white;
    }

    div#fontPreloadDiv {
        font-size: 0.1px;
    }

    .editorLeft #leftPaneTabs #leftPaneList .lhTab a span {
        color: var(--brand-main-colors-and-font-primary-color) !important;
        font-size: 1rem;
        font-weight: 500;
    }

    .main_view_controls {
        a,
        button {
            color: var(--brand-main-colors-and-font-primary-color) !important;
        }
    }

    .lhTabs_customTab {
        a {
            &:before {
                content: "";
                background-image: url(/0/Handler/CSSOverride/GetImage/1/layers-icon.png);
                height: 1.75rem;
                width: 1.75rem;
                background-repeat: no-repeat;
                background-size: contain;
                margin: 1rem;
            }
            svg {
                display: none;
            }
            a,
            label {
                color: var(
                    --brand-main-colors-and-font-primary-color
                ) !important;
            }
        }
    }

    .customScriptUi-customTab {
        hr {
            opacity: 0;
        }
        h3 {
            font-size: 1.5rem;
            position: relative;
        }
    }
    .Script_DynamicUiGeneration_New .column.separator .separator-line {
        opacity: 0;
    }

    .editorBottom {
        &.is-attached-to-window {
            background: transparent;
        }
    }

    .undoRedoContainer {
        display: block !important;
    }

    .editorBottom {
        .rightSide {
            button.nextStepButton {
                background: var(
                    --brand-main-colors-and-font-primary-color
                ) !important;
                color: white;
                    border-radius: 28px;
                .icon {
                    display: none;
                }
            }
        }
    }
    .ui-dialog {
        border-radius: 8px;
        .ui-dialog-titlebar,
        .ui-dialog-buttonpane {
          background-color: #fbf9f2;
          border: none;
          text-align: center;
          overflow-y: auto;
        }
        .ui-widget-content, .ui-widget-content {
            background-color: #fbf9f2;
            img {
                margin: 0 auto;
                display: block;
            }
        }
        .ui-dialog-titlebar {
          font-weight: bold;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
        }
        .ui-dialog-buttonpane {
          justify-content: center !important;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
          button {
              border-radius: 24px;
          }
        }
        &.add-to-basket-dialog {
          max-width: 800px;
          width: fit-content !important;
          top: 50% !important;
          left: 50% !important;
          transform: translate(-50%, -50%);
          padding: 5rem 0;
          .ui-dialog-title {
            font-size: 0px !important;
          }
          input.add-to-basket-agree-checkbox {
            flex: 0 0 auto;
            margin: 0;
            height: 20px;
            width: 20px;
            -webkit-appearance: inherit;
            border-radius: 100%;
            border: 2px solid var(--greyLine);
                &:checked {
                    background-color: var(--brand-main-colors-and-font-primary-color);
                    background-image: url(/0/Handler/CSSOverride/GetImage/1/white-check.svg);
                    background-position: center;
                    background-size: 70%;
                    background-repeat: no-repeat;
                }
            }
        }
        .ui-dialog-titlebar-close {
          display: none;
        }
    }
    div#previewArea {
        background: white;
    }
    .preview_close_butto {
            border-radius: 28px;
    }
    .top-section-contents {
        background: var(--beigeBackground);
        .top-content {
            background: var(--lightGreen);
            width: 100%;
            text-align: center;
            color: white;
            padding: 8px 0;
        }
        .top-wave {
            width: 100%;
            color: white;
            fill: white;
            min-height: 15px;
            max-height: 70px;
            position: relative;
            display: flex;
        }
        img.top-logo {
            padding-left: 2rem;
            padding-top: 2rem;
            height: 30px;
            box-sizing: content-box;
        }
    }
    div#previewView {
        position: fixed;
        top: 0;
        z-index: 999999;
    }
    #leftPane-customTab {
        padding: 1rem !important;
    }
    .headerWrapper {
        .viewControlButton {
            display: flex;
            flex-direction: column;
        }
    }
    #previewView {
        iframe#previewWindow:not(.editor2 iframe#previewWindow) {
            transform: scale(1.3);
        }
        .preview_close_button {
            z-index: 9;
                border-radius: 28px;
            font-weight: bold;
        }
    }
}

.megaEditBodyClass-Admin {
    .bottom-bar-actions.bottom-bar-actions-top.ng-scope.ng-hide {
        display: block !important;
    }
}

@media screen and (min-width: 929px) {
    .page-dynamicproduct-editor {
        .editorTop {
            .headerWrapper {
                .rightSide {
                    padding-right: 80px;
                }
                .backButton {
                    position: absolute;
                    right: 0.5rem;
                    border-left: 1px solid var(--greyLine);
                    .icon {
                        .fa-angle-left:before {
                            content: "\58";
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 929px) {
    .page-dynamicproduct-editor {
        &.editorTop {
            &.headerWrapper {
                &.backButton {
                    .icon {
                        display: block;
                    }
                }
            }
        }
        .editorMain {
            position: relative !important;
            left: unset !important;
        }
        .editorLeft {
            &.is-opened {
                width: 100% !important;
                max-width: 100%;
            }
        }
        .top-section-contents {
            .top-content {
                display: none;
            }
            img.top-logo {
                padding-top: 1rem;
                height: 20px;
            }
        } 
    }
}

@media screen and (max-width: 929px) and (min-width: 410px) {
}

@media screen and (max-width: 767px) {
    .page-dynamicproduct-editor {
        .currentCanvasSizeWrapper {
            display: block !important;
        }
        /* .editorMain {
            height: calc(100vh - 100px - 30vh) !important;
        } */
        .editorTop {
            .headerWrapper {
                flex-direction: column;
                display: flex;
                .buttonContainer {
                    &.leftSide {
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        .rightSideWrapper {
                            max-width: 50%;
                            span.current_prod_name {
                                font-size: 1rem;
                            }
                        }
                        .backButton {
                            order: 3;
                            margin: 0 0 0 auto;
                            .icon {
                                display: block;
                                .fa-angle-left:before {
                                    content: "\58";
                                }
                            }
                        }
                    }
                }
            }
        }
        .nextStepButton {
            span.confirmextratxt {
                display: block !important;
            }
        }
        .add-fields-container {
            .MEUIFormField {
                flex-direction: column;
                gap: 1rem;
            }
        }
        .editorLeft {
            transform: translate(0) !important;
            max-width: 100% !important;
            width: 100% !important;
            background: transparent;
            bottom: 15vh !important;
            top: unset !important;
            z-index: 99 !important;
            position: fixed !important;
            height: 100px !important;
            #leftPaneTabs {
                flex-direction: column-reverse;
                ul#leftPaneList {
                    width: 100%;
                    border-bottom: 1px solid var(--greyLine);
                    border-top: 1px solid var(--greyLine);
                    padding: 1rem;
                    z-index: 99999;
                    background: white;
                    align-items: flex-start;
                    height: 100%;
                    max-height: 93px;
                    .lhTab {
                        a {
                            padding: 5px !important;
                        }
                    }
                    li,
                    .lhTab.ui-state-active {
                        &:before,
                        &:after {
                            display: none !important;
                        }
                        a:not(li[aria-expanded="true"] a) {
                            background: white !important;
                        }
                        a {
                            border-radius: 10px;
                        }
                    }
                }
                div#leftPane-customTab {
                    transform: translateY(110%);
                    &.opened-now {
                        transform: translateY(0);
                    }
                    .mCustomScrollBox {
                        overflow: auto;
                    }
                }
            }
            &:has(.opened-now) {
                height: calc(100vh - 26vh) !important;
            }
            .lhTabs_customTab {
                a {
                    &:before {
                        height: 1.25rem;
                        width: 1.255rem;
                        margin: 0.75rem;
                    }
                }
            }
        }
        .toggleCollapseTab {
            display: none !important;
        }
        .addtoBasketScreen,
        #loadingArea,
        .loadingArea,
        .loadingScreen {
            z-index: 999999999999999999999999999 !important;
        }
        .editorBottom {
            z-index: 99 !important;
            background: white !important;
            padding: 1rem !important;
            position: fixed !important;
            height: 15vh !important;
            .buttonContainer,
            .bottom-bar-actions,
            .nextStepButton {
                max-width: 100%;
                width: 100% !important;
            }
        }
        .customScriptUi-customTab {
            h3 {
                &:before {
                    content: "\58";
                    -moz-osx-font-smoothing: grayscale;
                    -webkit-font-smoothing: antialiased;
                    display: inline-block;
                    font-style: normal;
                    font-variant: normal;
                    text-rendering: auto;
                    line-height: 1;
                    font-family: "Font Awesome 5 Pro";
                    font-weight: 400;
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translate(0, -50%);
                }
            }
        }
        .ui-dialog {
            &.add-to-basket-dialog {
                width: 100% !important;
                left: -50% !important;
                transform: translate(50%, 50%);
                margin: 0px !important;
                top: -50% !important;
            }
        }
        .zoom_options {
            a,
            button {
                width: 55px;
                height: 44px;
                margin: 0px !important;
            }
        }
    }
}

@media screen and (max-width: 325px) {
    .page-dynamicproduct-editor {
        .editorTop {
            .headerWrapper {
                .rightSideWrapper {
                    width: 100% !important;
                    max-width: 100% !important;
                }
            }
        }
    }
}

#custom-zoom-controls-root {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0px;    
}

#custom-zoom-controls-root .czc-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: center;
}

#custom-zoom-controls-root .czc-label {
    font-weight: 600;
    color: var(--textColour);
}

#custom-zoom-controls-root .czc-slider {
    flex: 1;
    max-width: 280px;
    accent-color: var(--lightGreen);
}

#custom-zoom-controls-root .czc-dropdown {
    position: relative;
}

#custom-zoom-controls-root .czc-trigger {
    min-width: 64px;
    padding: 12px 40px 12px 12px;
    border: 1px solid #ADADAD;
    border-radius: 28px;
    background: rgb(255, 255, 255);
    cursor: pointer;
    color: rgb(51, 51, 51);
    text-align: left;
    position: relative;
    font-size: 1rem;
}

#custom-zoom-controls-root .czc-trigger:focus {
    outline: 2px solid #2e7d32;
    outline-offset: 2px;
}

#custom-zoom-controls-root .czc-trigger::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #666;
    transform: translateY(-50%);
}

#custom-zoom-controls-root .czc-panel {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    min-width: 120px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 4px 0;
    list-style: none;
    margin: 0;
    display: none;
    z-index: 51;
}

#custom-zoom-controls-root .czc-panel.open {
    display: block;
    z-index: 99999999;
}

#custom-zoom-controls-root .czc-option {
    display: block;
    width: 100%;
    padding: 6px 16px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--textColour);
    text-align: left;
}

#custom-zoom-controls-root .czc-option:hover,
#custom-zoom-controls-root .czc-option:focus {
    background: #f0f4f0;
    outline: 2px solid #2e7d32;
    outline-offset: -2px;
}

#cps-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0px;
    background: transparent;
}

#cps-strip .cps-iconbtn {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
    font-size: 18px;
    transition: background 0.15s;
}

#cps-strip .cps-iconbtn:hover {
    background: #ece7dd;
}

#cps-strip .cps-iconbtn:disabled,
#cps-strip .cps-iconbtn.cps-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#cps-strip .cps-designs {
    display: flex;
    align-items: flex-end;
    gap: 18px;
}

#cps-strip .cps-design {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

#cps-strip .cps-design .cps-label {
    color: var(--textColour);
    margin-bottom: 4px;
    min-height: 18px;
    font-weight: 500;
}

#cps-strip .cps-card {
    position: relative;
    padding: 0;
    border-radius: 8px;
    margin-bottom: 18px;
    &:has(.cps-active) {
        &:after {
            display: none;
        }
    }
    
    &:has(:nth-child(2)) {
        padding-right: 18px;
    }
}

#cps-strip .cps-card-front,
#cps-strip .cps-card-back {
    border-radius: 8px;
    /* padding: 15px; */
    /* box-sizing: content-box; */
    width: 110px;
    border: 2px solid rgb(196 186 173 / 60%);
    &:not(#cps-strip .cps-card-back.cps-active,#cps-strip .cps-card-front.cps-active) {
        &:after {
            content: '';
            background: rgb(196 186 173 / 60%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
        }
    }
}

#cps-strip .cps-card-front {
    position: relative;
    z-index: 2;
    background: var(--beigeBackground);
}

#cps-strip .cps-card-back {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
}


#cps-strip .cps-design.cps-current .cps-card-front.cps-active,
#cps-strip .cps-design.cps-current .cps-card-back.cps-active {
    border: 2px solid var(--brand-main-colors-and-font-primary-color);
}

#cps-strip .cps-thumb {
    display: block;
    width: 110px;
    object-fit: contain;
    padding: 12px;
}

#cps-strip .cps-thumb-skeleton {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 12px;
}

#cps-strip .cps-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 3px;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
}

#cps-strip .cps-loading-overlay.cps-fade-out {
    opacity: 0;
}

#cps-strip .cps-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: #5ea36a;
    animation: cps-spin 0.8s linear infinite;
}

@keyframes cps-spin {
    to {
        transform: rotate(360deg);
    }
}

body.cps-active .editorBottom__page-list > .pageListContainer,
body.cps-active .editorBottom__page-list > .pagesOverlayContainer,
body.cps-active .editorBottom__page-list > .closePagesOverlay,
body.cps-active .editorBottom__page-list .memobilePageClass.buttons,
body.cps-active .pageListInnerWrapper,
body.cps-active .pageListContainer > .buttons,
body.cps-active .pagesOverlayListContainer {
    display: none !important;
}

body.cps-active .editorBottom.is-attached-to-window {
    height: auto !important;
    padding-bottom: 0;
}


body.cps-active .ui-layout-pane-west {
    bottom: var(--cps-actionsbar-h, 0px) !important;
    height: auto !important;

}

#cps-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 24px;
    background: #fff;
    border-top: 1px solid var(--greyLine);
}

#cps-actions-bar .cab-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

#cps-actions-bar .cab-guidelines:focus {
    outline: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    outline-offset: 2px;
}

#cps-actions-bar .cab-right {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

#cps-actions-bar .cab-subtotal {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

#cps-actions-bar .cab-subtotal-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
}

#cps-actions-bar .cab-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--textColour);
}

#cps-actions-bar .cab-subtotal.is-on-sale {
    gap: 8px;
}

#cps-actions-bar .cab-price-compare {
    font-size: 15px;
    font-weight: 500;
    color: #888;
    text-decoration: line-through;
    padding-right: 10px;
}

#cps-actions-bar .cab-save {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-main-colors-and-font-primary-color, #1f5132);
}

#cps-actions-bar .cab-pack select {
    padding: 10px 16px;
    border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    border-radius: 28px;
    background: #fff;
    color: var(--textColour);
    font-weight: 600;
    cursor: pointer;
}

#cps-actions-bar .action-add-to-cart .cab-add {
    padding: 12px 40px;
    background: var(--brand-main-colors-and-font-primary-color, var(--brand-main-colors-and-font-primary-color));
    color: #fff;
    border: 0;
    border-radius: 28px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    width: 240px;
}

#cps-actions-bar .action-add-to-cart .cab-add:focus {
    outline: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    outline-offset: 2px;
}

body.cps-actionsbar .editorBottom__page-list > .buttonContainer.rightSide {
    display: none !important;
}


.editorLeft #leftPaneTabs #leftPane-cpsProduct {
    overflow-y: auto!important;
    padding: 0 !important;
}

.lhTabs_cpsProduct a svg {
    display: none;
}

#leftPane-cpsProduct #cps-feature-region {
    display: none;
}

#leftPane-cpsProduct.cps-view-feature #cps-feature-region {
    display: block;
    padding: 0 12px 14px;
}

.ps-feature-view {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px 6px;
}

.ps-feature-view .ps-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
        border-radius: 28px;
    background: #fff;
    color: var(--brand-main-colors-and-font-primary-color);
    font-weight: 600;
    
    cursor: pointer;
}

.ps-feature-view .ps-back-btn:hover {
    background: #eef5ef;
}

.ps-feature-view .ps-back-btn:focus {
    outline: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    outline-offset: 2px;
}

.ps-feature-view .ps-feature-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--textColour);
}


body.cps-active .editorBottom__page-list {
    flex-wrap: wrap;
    position: relative;
}

body.cps-active .editorBottom__page-list > .buttonContainer.rightSide {
    position: absolute;
    top: 0;
    right: 16px;
    z-index: 2;
    width: auto;
    margin: 0;
    padding: 0;
}

body.cps-active #custom-zoom-controls-root {
    width: 100%;
}

body.cps-active #cps-strip {
    width: 100%;
    box-sizing: border-box;
}


.emb-picker {
    padding: 12px;
    font-size: 1rem;
}

.emb-picker h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.emb-picker p {
    margin: 0 0 12px;
    color: #666;
}

.emb-picker .emb-preview {
    display: block;
    max-width: 100%;
    max-height: 200px;
    margin: 0 auto 12px;
    background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px
        16px;
    border: 1px solid var(--greyLine);
}

.emb-picker .emb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}

.emb-picker .emb-src-sw,
.emb-picker .emb-dst-sw {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    border-radius: 3px;
}

.emb-picker .emb-arrow {
    opacity: 0.6;
}

.emb-picker .emb-select {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    border-radius: 28px;
    background: #fff;
    color: var(--textColour);
    font: 1rem;
    font-weight: bold;
    cursor: pointer;
}

.emb-picker .emb-select:focus {
    outline: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    outline-offset: 2px;
}

.emb-picker .emb-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.emb-picker .emb-apply,
.emb-picker .emb-quantize {
    flex: 1;
    padding: 10px 16px;
    background: var(--brand-main-colors-and-font-primary-color, var(--brand-main-colors-and-font-primary-color));
    color: #fff;
    border: 0;
        border-radius: 28px;
    font-weight: 600;
    cursor: pointer;
}

.emb-picker .emb-apply:focus,
.emb-picker .emb-quantize:focus {
    outline: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    outline-offset: 2px;
}

.emb-picker .emb-reset {
    padding: 10px 16px;
    background: #fff;
    border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    color: var(--brand-main-colors-and-font-primary-color);
        border-radius: 28px;
    font-weight: 600;
    cursor: pointer;
}

.ps-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 12px;
    font-size: 1rem;
    color: var(--textColour);
}

.ps-title {
    display: none;
}

.ps-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    font-size: 1rem;
    color: var(--textColour);
    margin: 6px 0 2px;
    overflow: visible;
}

.ps-section-title .ps-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ps-section-title .ps-tip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--textColour);
    border-radius: 50%;
    background: #fff;
    color: var(--textColour);
    cursor: help;
    line-height: 1;
}

.ps-section-title .ps-tip-btn:focus {
    outline: 2px solid var(--textColour);
    outline-offset: 2px;
}

.ps-section-title .ps-tip-icon {
    font-weight: 700;
    font-size: 10px;
}

.ps-section-title .ps-tip-bubble {
    position: absolute;
    top: calc(100% + 8px);
    left: -8px;
    z-index: 1000;
    width: max-content;
    max-width: 220px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--textColour);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: var(--textColour);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
    opacity 0.12s ease-out,
    visibility 0.12s ease-out;
}

.ps-section-title .ps-tip-bubble::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 16px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    border-top: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    transform: translateX(-50%) rotate(45deg);
}

.ps-section-title .ps-tip:hover .ps-tip-bubble,
.ps-section-title .ps-tip:focus-within .ps-tip-bubble {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ps-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ps-segmented .ps-seg-btn {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px;
    border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    border-radius: 28px;
    background: #fff;
    color: var(--brand-main-colors-and-font-primary-color);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, color 0.15s;
}

.ps-segmented .ps-seg-btn:hover {
    background: #eef5ef;
}

.ps-segmented .ps-seg-btn.active {
    background: var(--brand-main-colors-and-font-primary-color);
    color: #fff;
}

.ps-segmented .ps-seg-btn:focus {
    outline: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    outline-offset: 2px;
}

.ps-design-count {
    display: block;
}

.ps-design-count select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    border-radius: 4px;
    background: #fff;
    color: var(--brand-main-colors-and-font-primary-color);
    font-weight: 600;
    cursor: pointer;
}

.ps-additional {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ps-additional .meuiRadioGroupItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.ps-additional .meuiRadioGroupItem:hover {
    border-color: var(--brand-main-colors-and-font-primary-color);
}

.ps-additional .meuiRadioGroupItem input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
    height: 25px;
    width: 25px;
    -webkit-appearance: inherit;
    border-radius: 100%;
    border: 2px solid var(--greyLine);
    &:checked {
        background-color: var(--brand-main-colors-and-font-primary-color);
        background-image: url(/0/Handler/CSSOverride/GetImage/1/white-check.svg);
        background-position: center;
        background-size: 70%;
        background-repeat: no-repeat;
    }
}
.meuiRadioGroupItem:has(input[type="radio"]:checked) {
    background: var(--beigeBackground);
}

.ps-additional .meuiRadioGroupItem span {
    flex: 1 1 auto;
    margin: 0;
    cursor: pointer;
    color: var(--brand-main-colors-and-font-primary-color);
}

.ps-additional span.ps-additional-price {
    text-align: right;
    font-size: 0.8rem;
}

.ps-additional .meuiRadioGroupItem .ps-open-indicator {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    color: var(--brand-main-colors-and-font-primary-color);
    display: none;
}

.ps-feature-region {
    margin-top: 8px;
}

.ps-feature-region:empty {
    display: none;
}

.cm-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    font-size: 1rem;
    color: var(--textColour);
}

.cm-panel .cm-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--textColour);
}

.cm-panel .cm-count {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    border-radius: 28px;
    background: #fff;
    color: var(--textColour);
    font-weight: 600;
    cursor: pointer;
}

.cm-panel .cm-count:focus {
    outline: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    outline-offset: 2px;
}

.cm-panel .cm-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cm-panel .cm-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cm-panel .cm-index {
    flex: 0 0 auto;
    min-width: 16px;
    color: var(--textColour);
}

.cm-panel .cm-label {
    flex: 0 0 auto;
}

.cm-panel .cm-code {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    border-radius: 8px;
    background: #fff;
    color: var(--textColour);
}

.cm-panel .cm-code:focus {
    outline: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    outline-offset: 1px;
    border-color: var(--brand-main-colors-and-font-primary-color);
}

.cm-panel .cm-suffix {
    flex: 0 0 auto;
    color: var(--textColour);
    font-weight: 600;
}

.ps-bgr {
    font-size: 1rem;
    color: var(--textColour);
}

.ps-bgr p {
    margin: 0 0 12px;
    color: #666;
}

.ps-bgr .ps-bgr-hint {
    color: var(--textColour);
    font-weight: 600;
}

.ps-bgr .ps-bgr-preview {
    display: block;
    max-width: 100%;
    max-height: 200px;
    margin: 0 auto 12px;
    background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px
        16px;
    border: 1px solid var(--greyLine);
}

.ps-bgr .ps-bgr-error {
    color: #b3261e;
    font-weight: 600;
}

.ps-bgr .ps-bgr-actions {
    display: flex;
    margin-top: 14px;
}

.ps-bgr .ps-bgr-run {
    flex: 1;
    padding: 10px 16px;
    background: var(--brand-main-colors-and-font-primary-color, var(--brand-main-colors-and-font-primary-color));
    color: #fff;
    border: 0;
    border-radius: 28px;
    font-weight: 600;
    cursor: pointer;
}

.ps-bgr .ps-bgr-run:focus {
    outline: 1.5px solid var(--brand-main-colors-and-font-primary-color);
    outline-offset: 2px;
}

.ps-bgr .ps-bgr-run:disabled {
    opacity: 0.6;
    cursor: progress;
}


.dof-dialog {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size:1rem;
    color: var(--textColour);
}

.dof-dialog .dof-section-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--brand-main-colors-and-font-primary-color);
    margin-top: 10px;
    text-align: center;
}

.dof-dialog .dof-section-text {
    text-align: center;
   color: var(--textColour);
}

.dof-dialog .dof-check {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dof-dialog .dof-check input[type="checkbox"] {
    accent-color: var(--brand-main-colors-and-font-primary-color);
}

.dof-dialog .dof-check-hint {
    margin-top: 4px;
    text-align: center;
    font-size: 12px;
    color: #a3261b;
}
.emb-picker .emb-select,
.cm-panel .cm-count,
.ps-design-count select,
#cps-actions-bar .cab-pack select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231f6b3b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}

.itemClass-ImageField {
    .meuiSwitch {
        display: none;  
    }
}

.editor2 {
    font-family: filsonSoft;
    input, button, select {
        font-family: filsonSoft;
    }
    div#me-design-help-backdrop {
        position: fixed;
        background: black;
        opacity: 0.86;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 99;
    }
    #me-design-help-modal { 
        z-index: 100;
    } 
    &.modal-open, #me-design-help-modal {
        .modal, &.modal {
            max-width: 500px;
            transform: translateX(-50%);
            left: 50%;
            width: 100%;
            .modal-card-head, .modal-card-body, .modal-card-foot {
                background: transparent;
                border: none;
            }
            .modal-card-head {
                text-align: center;
                padding-bottom: 0px;
                .modal-title, .ui-dialog-title {
                    font-size: 1.25rem;
                    font-weight: bold;
                    color: var(--brand-main-colors-and-font-primary-color);
                }
            }
            .modal-content {
                margin: 0 auto !important;
                border-radius: 10px;
                background: #fafaf2;
                padding: 1.5rem;
            }
            .modal-body {
                text-align: center;
                .dof-section-title {
                    font-size: 1.25rem;
                }
                .dof-section-text {
                    color: black;
                    font-size: 1rem;
                }
                span.check {
                    border-radius: 100%;
                }
            }
            .modal-card-foot {
                .buttons {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: row;
                    gap: 10px;
                    justify-content: center;
                }
                button {
                    border-radius: 24px !important;
                    background: var(--brand-main-colors-and-font-primary-color) !important;
                    color: white !important;
                    padding: 0 24px !important;
                    min-width: 48%;
                    margin: 0px;
                    &:nth-child(2) {
                        background: #555555 !important;
                    }
                }
            }
        }
    }
    .ui-dialog {
        .ui-dialog-titlebar {
             .ui-dialog-title {
                font-size: 1.25rem;
                font-weight: bold;
                color: var(--brand-main-colors-and-font-primary-color);
            }
        }

        .ui-dialog-buttonset {
            flex-direction: row;
            width: 100%;
            justify-content: center;
            button {
                background: var(--brand-main-colors-and-font-primary-color) !important;
                color: white !important;
                padding: 0 24px !important;
                min-width: 160px; 
                &:nth-child(2) {
                    background: #555555 !important;
                }
            }
            &:has(:nth-child(2)) {
                button {
                    min-width: 48%;
                }
            }
        }
    }
    .uiFieldFormatting {
        flex-wrap: wrap;
        justify-content: space-between!important;
        .control:last-child {
            width: 100%;
        }
    }
    .customScriptUi-mainControlsArea {
        /* z-index: 9999; */
        button {
            border-radius: 100%;
            background-color: white;
            width: 40px;
            height: 45.71px;
            box-shadow: 0px 1px 2px -1px #0000001A;
            i {
                font-weight: bolder;
                font-size: 1rem;
            }
        }
    }
    &.Script_DynamicUiGeneration_New {
        .column.separator {
            height: 0px;
            padding: 0px;
        }
    }
    #leftPaneList {
        .lhTabs_cpsProduct {
            order: 0;
        }
        .lhTabs_customTab {
            order: 1;
        }
        .lhTabs_upload {
            order: 2;
        }
        .lhTabs_text {
            order: 3;
        }
        .lhTabs_clipart {
            order: 4;
        }
        .lhTabs_layout {
            order: 5;
        }
    }
    #parentContainer {
        background: var(--brand-main-colors-and-font-background-color);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .freeTargetContainer {
            display: none !important;
            height: 0 !important;
            width: 0 !important;
        }
        .editorTop {
            width: 100% !important;
            order: 0;
            position: relative !important;
            padding-top: 1rem;
            .headerWrapper {
                justify-content: flex-start;
                .me-editor-design-help-button {
                    font-size: 0.8rem;
                    text-decoration: underline;
                    span {
                        color: black;
                    }
                    .icon {
                        background-image: url('/0/Handler/CSSOverride/GetImage/1/Help.svg');
                        background-size: 80%;
                    }
                    i {
                        display: none;
                    }
                }
                a, button, .me-editor-simple-preview-button {
                    height: unset;
                    margin: 0 !important;
                    padding: 0.5rem 1rem;
                    border: none;
                    outline: none;
                    box-shadow: none;
                }
                button.nextStepButton {
                    display: none;
                }
                .previewButton {
                    position: absolute;
                    right: 95px;
                    margin: 0px !important;
                    padding: 0px 10px 0;
                }
                .me-global-menu {
                    border-left: 1px solid rgb(229, 229, 229);
                }
                .undoRedoContainer {
                    .me-editor-undo-button {
                        .icon {
                            background-image: url("/0/Handler/CSSOverride/GetImage/1/Undo.svg");
                        }
                    }
                    .me-editor-redo-button {
                        .icon {
                            background-image: url("/0/Handler/CSSOverride/GetImage/1/Redo.svg");
                        }
                    }
                }
                .me-editor-simple-preview-button,  .me-editor-undo-button, .me-editor-redo-button, .me-editor-grid-toggle-button, .backButton {
                    i {
                        display: none;
                    }
                }
                .me-editor-simple-preview-button {
                    .icon {
                        background-image: url("/0/Handler/CSSOverride/GetImage/1/3D View.svg");
                    }
                }
                .backButton {
                    .icon {
                        background-image: url("/0/Handler/CSSOverride/GetImage/1/X.svg");
                        height: 20px;
                    }
                }
                .me-editor-grid-toggle-button {
                    .icon {
                        background-image: url("/0/Handler/CSSOverride/GetImage/1/Grid.svg");
                    }
                }
                .icon {
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                    height: 30px;
                    width: 30px;
                    margin: 0;
                }
            }
        }
        .editorLeft {
            background: white;
            position: relative !important;
            height: 100% !important;
            inset: 0 !important;
            order: 0;
            transform: none !important;
            width: 0.1% !important;

            .ps-additional {
                .ps-open-indicator {
                    display: none;
                }
            }
            #leftPaneTabs {
                padding-bottom: 150px;
                .ui-tabs-panel {
                    background: white;
                    padding: 10px 1rem !important;
                }
                .uploadTabPanel, .ft-panel--text {
                    .ft-add-button {
                        border-radius: 28px;
                    }
                    .ft-add-icon {
                        display: none;
                    }
                }
                button.me-panel-close {
                    position: absolute;
                    top: 1rem;
                    right: 1rem;
                    font-size: 0px;
                    border: 0;
                    background: none;
                    background-repeat: no-repeat;
                    background-size: 60%;
                    background-position: center;
                    background-image: url("/0/Handler/CSSOverride/GetImage/1/X.svg");
                    height: 30px;
                    width: 30px;
                }
                #leftPaneList {
                    background: white;
                    border-right: 1px solid var(--greyLine);
                    padding: 1rem 0.5rem;
                    gap: 10px;
                    z-index: 9;
                    li {
                        /* height: 60px;
                        width: 60px; */
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        &:before, &:after {
                            display: none;
                        }
                        &:hover {
                            a {
                                background-color: var(--beigeBackground)!important;
                            }
                        }
                        a {
                            padding: 0.5rem!important;
                            border-radius: 10px;
                            width: 100%;
                            &:before {
                                display: none;
                            }
                            svg {
                                display: none;
                            }
                        }
                        .icon {
                            display: block;
                            width: 25px;
                            height: 25px;
                            margin: 0.5rem 0px;
                            filter: unset;
                            &:before {
                                -moz-osx-font-smoothing: grayscale;
                                -webkit-font-smoothing: antialiased;
                                display: inline-block;
                                font-style: normal;
                                font-variant: normal;
                                text-rendering: auto;
                                line-height: 1;
                                font-family: "Font Awesome 5 Pro";
                                width: 100%;
                                height: 100%;
                                font-size: 1.75rem;
                                color: #346b39;
                                opacity: 1;
                                filter: unset;
                                text-align: center;
                            }
                            i {
                                display: none;
                            }
                        }
                        &.lhTabs_cpsProduct, &.lhTabs_upload, &.lhTabs_text, &.lhTabs_customTab, &.lhTabs_clipart, &.lhTabs_layout {
                            .icon {
                                background-repeat: no-repeat;
                                background-size: contain;
                                background-position: center;
                            }
                        }
                        &.lhTabs_cpsProduct {
                            .icon {
                                background-image: url('/0/Handler/CSSOverride/GetImage/1/Product.svg');
                            }
                        }
                        &.lhTabs_upload {
                           .icon {
                                background-image: url('/0/Handler/CSSOverride/GetImage/1/Upload.svg');
                            }
                        }
                        &.lhTabs_text {
                           .icon {
                                background-image: url('/0/Handler/CSSOverride/GetImage/1/Text.svg');
                            }
                        }
                        &.lhTabs_customTab {
                            .icon {
                                background-image: url('/0/Handler/CSSOverride/GetImage/1/Layers.svg');
                            }
                            .UI-SORTABLE-CREATE-MODE {
                                background: #faf9f5;
                                position: relative;
                            }
                        }
                        &.lhTabs_clipart {
                           .icon {
                                background-image: url('/0/Handler/CSSOverride/GetImage/1/Stickers.svg');
                            }
                        }
                        &.lhTabs_layout {
                           .icon {
                                background-image: url('/0/Handler/CSSOverride/GetImage/1/Templates.svg');
                            }
                        }
                    }
                }
                .customScriptUi-customTab {
                    h3 {
                        display: none;
                    }
                }
                button {
                    &.AddImageToField, &.AddClipartToField {
                        padding: 10px 14px;
                        border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
                        border-radius: 28px;
                        background: var(--brand-main-colors-and-font-primary-color);
                        text-align: center;
                        justify-content: center !important;
                        .icon {
                            display: none;
                        }
                    }
                    &.back-button {
                        width: 100%;
                        min-width: 0;
                        box-sizing: border-box;
                        padding: 10px 14px;
                        border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
                        border-radius: 28px;
                        background: var(--brand-main-colors-and-font-primary-color);
                        color: #fff;
                        font-weight: 600;
                        cursor: pointer;
                        text-align: center;
                        transition: background 0.15s, color 0.15s;
                    }
                    &.back-button {
                        .icon {
                            display: none;
                        }
                    }
                }
                .FieldEdit-FocusMode {
                    .AddClipartToField {
                        span {
                            color: white;
                            max-width: 59%;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                    }
                }
            }
            #leftPane-customTab {
                select.album-select-dropdown {
                    padding: 10px 14px;
                    border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
                    border-radius: 8px;
                }
                button.UploadButton {
                    border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
                    border-radius: 28px;
                    .icon {
                        display: none;
                    }
                }
                .ViewToggle, .backToForm {
                    border: none;
                    color: var(--brand-main-colors-and-font-primary-color);
                }
                .FormHead {
                    display: none;
                }
                .fbFieldsContainer {
                    & > .columns > .column.UI-SORTABLE-CREATE-MODE:hover {
                        outline: none;
                    }
                    .columns {
                        .column.UI-SORTABLE {
                            position: relative;
                            overflow: hidden;
                            padding: 0px !important;
                            position: relative;
                            left: 0px;
                            top: 0px;
                            height: 85px;
                            background-color: transparent;
                            border: none!important;
                            color: var(--brand-main-colors-and-font-primary-color);
                            &:before {
                                display: none;
                            }
                            .has-field-title .columns > .column:nth-child(1) {
                                display: none;
                            }
                            .field {
                                gap: 10px;
                                padding-left: 0.5rem;
                                .control {
                                    &.layer-thumb-column {
                                        width: 60px;
                                        height: 60px;
                                        border: 1px solid black;
                                        background: white;
                                        border-radius: 4px;
                                        * {
                                            width: 60px;
                                            height: 60px;
                                            overflow: hidden;
                                            object-fit: cover;
                                        }
                                        i.layer-thumb-icon {
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            font-size: 2rem;
                                        }
                                        .layer-thumb-image {
                                            border-radius: 4px;
                                            border: 1px solid black;
                                        }
                                        .layer-thumb-textfield {
                                            .layer-thumb-box {
                                                background-repeat: no-repeat;
                                                background-size: 25px;
                                                background-position: center;
                                                background-color: transparent;
                                                background-image: url('/0/Handler/CSSOverride/GetImage/1/field-text.svg');
                                                i {
                                                    display: none;
                                                }
                                            }
                                        }
                                    }
                                    &:has(> .meuiNonLayout input.text-field) {
                                        &:before {
                                            content: 'Text';
                                            height: 21px;
                                            font-size: 10px;
                                            max-width: 45px !important;
                                            background: var(--brand-main-colors-and-font-primary-color);
                                            color: white;
                                            border: none;
                                            border-radius: 28px;
                                            padding: 0 1rem !important;
                                            justify-content: center;
                                            align-items: center;
                                            display: flex;
                                        }
                                    }
                                    input.text-field {
                                        opacity: 0;
                                        pointer-events: none;
                                        height: 0px;
                                    }
                                    &:has(button .fa-edit) {
                                        background: transparent;
                                        position: absolute;
                                        top: 0;
                                        bottom: 0;
                                        width: 45%;
                                        z-index: 99999;
                                        button {
                                            width: 100%;
                                            margin: 0!important;
                                            opacity: 0;
                                        }
                                    }
                                    button {
                                        filter: unset;
                                        background-repeat: no-repeat;
                                        background-size: 25px;
                                        background-position: center;
                                        background-color: transparent;
                                        border: none;
                                        padding: 0 1rem!important;
                                        &:focus, &:active, &:hover {
                                            border: none!important;
                                        }
                                        &:before {
                                            font-size: 10px;
                                            position: absolute;
                                            bottom: 0;
                                            text-align: center;
                                            color: var(--brand-main-colors-and-font-primary-color);
                                        }
                                        i {
                                            display: none;
                                        }
                                        &.AddImageToField, &.AddClipartToField {
                                            height: 21px;
                                            font-size: 10px;
                                            max-width: fit-content!important;
                                            background: var(--brand-main-colors-and-font-primary-color);
                                            border: none;
                                            color: white;
                                            border: none;
                                            border-radius: 28px;
                                            display: flex;
                                            .icon {
                                                display: none;
                                            }
                                        }
                                        &:has(.fa-lock-open) {
                                            background-image: url('/0/Handler/CSSOverride/GetImage/1/Lock.svg');
                                            &:before{
                                                content: 'Lock';
                                            }
                                        }
                                        &:has(.fa-lock) {
                                            background-image: url('/0/Handler/CSSOverride/GetImage/1/Unlock.svg');
                                            &:before{
                                                content: 'Unlock';
                                            }
                                        }
                                        &:has(.fa-clone) {
                                            background-image: url('/0/Handler/CSSOverride/GetImage/1/Duplicate.svg');
                                            &:before{
                                                content: 'Duplicate';
                                            }
                                        }
                                        &:has(.fa-trash-alt) {
                                            background-image: url('/0/Handler/CSSOverride/GetImage/1/Delete.svg');
                                            &:before{
                                                content: 'Delete';
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    
                    .itemClass-ImageField:not(.itemClass-ImageField.FieldEdit-FocusMode), .itemClass-TextField:not(.itemClass-TextField.FieldEdit-FocusMode), .itemClass-ImageFieldClipart:not(.itemClass-ImageFieldClipart.FieldEdit-FocusMode) {
                        padding: 0.75rem 0.75rem 0.75rem 3.5rem;
                        &:before {
                            content: '';
                            background: #F4E8D840;
                            width: 100%;
                            height: 98%;
                            border-radius: 8px;
                            display: block;
                            position: absolute;
                            top: 1%;
                            right: 0;
                        }
                    }                    
                    .itemClass-ImageField, .itemClass-TextField, .itemClass-ImageFieldClipart {
                        .imageSliders{
                            display: none;
                        }
                        .columns {
                            .column:has(.field-main-title) {
                                display: none;
                            }
                        }
                        &.FieldEdit-FocusMode {
                            .handle {
                                display: none;
                            }
                            input.text-field, button.FontSelector, input.FontSizeInput, input.LetterSpacingInput {
                                border-radius: 5px;
                                border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
                            }
                            .meuiNonLayout:has(> input.text-field), div.FontSelector, .textColorSwatchPanel, .control:has(.FontSizeInput), .control:has(input.LetterSpacingInput){
                                &:before {
                                    font-weight: bold;
                                    color: var(--textColour);
                                    display: inline-block;
                                    padding-bottom: 0.5rem;
                                    padding-top: 0.75rem;
                                }
                            }
                            .meuiNonLayout:has(> input.text-field) {
                                &:before {
                                    content: "Say Something";
                                }
                            }
                            div.FontSelector {
                                display: flex;
                                flex-wrap: wrap;
                                &:before {
                                    content: "Font";
                                }
                            }
                            .control {
                                div:has(> .FontFormatButton-italic), :has(> .FontFormatButton-bold), :has(> .FontFormatButton-underline) {
                                    display: flex;
                                    align-items: flex-end;
                                }
                                .FontFormatButton-italic, .FontFormatButton-bold, .FontFormatButton-underline {
                                    border: none;
                                    overflow: hidden;
                                    &.has-background-dark {
                                        border-radius: 8px;
                                        background-color: var(--beigeBackground)!important;
                                    }
                                }
                                span.format-icon {
                                    &:before {
                                        font-weight: bold;
                                        color: black;
                                    }
                                    &.format-icon-underline:before {
                                        content: "U";
                                        text-decoration: underline;
                                    }
                                }
                                &:has(.FontSizeInput) {
                                    width: 30%!important;
                                    order: 4;
                                    margin: 0 0.5rem;
                                    &:before {
                                        content: "Size";
                                    }
                                }
                                &:has(input.LetterSpacingInput){
                                    width: 30%!important;
                                    order: 5;
                                    margin: 0 0.5rem;
                                    &:before {
                                        content: "Letter Spacing";
                                    }
                                }
                                &:has(.textColorSwatchPanel) {
                                    order: 6;
                                    padding-bottom: 1rem;
                                    .textColorSwatchPanel {
                                        &:before {
                                            content: "Color";
                                        }
                                        .ColorSelButtonColumn {
                                            width: 10%;
                                            button {
                                                border-radius: 100% !important;
                                                overflow: hidden;
                                                border: 1px solid var(--greyLine);
                                                &.meui-selected {
                                                    border-color: var(--brand-main-colors-and-font-primary-color);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            .uiFieldRotation, .uiFieldSize {
                                .control {
                                    width: 30%;
                                    &:has(.meuiSliderValue) {
                                        width: 70%;
                                        .RotationSlider, .SizeSlider {
                                            width: 90%;
                                            background: var(--beigeBackground);
                                            height: 8px;
                                            margin-top: 20px;
                                            float: left;
                                        }
                                        .ui-slider-handle {
                                            width: 20px;
                                            height: 20px;
                                            background: var(--lightGreen);
                                        }
                                    }
                                    input {
                                        border-radius: 5px;
                                        border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
                                    }
                                }
                                .meuiSliderValue {
                                    display: none;
                                }
                            }
                            .uiImageFlip {
                                .control {
                                    width: 47%;
                                    margin: 0 0.5rem;
                                    button {
                                        border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
                                        border-radius: 28px;
                                        .text {
                                            font-weight: bold;
                                            color: var(--brand-main-colors-and-font-primary-color)
                                        }
                                        .icon {
                                            background-repeat: no-repeat;
                                            background-size: contain;
                                            background-position: center;
                                            width: 20px;
                                            margin-right: 10px;
                                            i {
                                                display: none;
                                            }
                                        }
                                        &.is-primary {
                                            color: white;
                                            .icon {
                                                background-color: white;
                                            }
                                        }
                                    }
                                    &:nth-child(1){
                                        button {
                                            .icon {
                                                background-image: url('/0/Handler/CSSOverride/GetImage/1/Horizontal Flip.svg');
                                            }
                                        }
                                    }
                                    &:nth-child(2){
                                        button {
                                            .icon {
                                                background-image: url('/0/Handler/CSSOverride/GetImage/1/Vertical Flip.svg');
                                            }
                                        }
                                    }
                                }
                            }
                            .uiImageAlign {
                                justify-content: space-between;
                                .control {
                                    width: calc(90% / 6);
                                    border-radius: 8px;
                                    button {
                                        background-repeat: no-repeat;
                                        background-size: contain;
                                        background-position: center;
                                        border: none;
                                        box-shadow: none;
                                        outline: 0px;
                                        &.is-primary {
                                            background-color: transparent;
                                        }
                                        &:focus, &:hover, &:visited, &:focus-within {
                                            border: transparent;
                                        }
                                        i {
                                            display: none;
                                        }
                                    }
                                    &:nth-child(1){
                                        button {
                                            background-image: url('/0/Handler/CSSOverride/GetImage/1/Left Align.svg');
                                        }
                                    }
                                    &:nth-child(2){
                                        button {
                                            background-image: url('/0/Handler/CSSOverride/GetImage/1/Center Vertical Align.svg');
                                        }
                                    }
                                    &:nth-child(3){
                                        button {
                                            background-image: url('/0/Handler/CSSOverride/GetImage/1/Right Align.svg');
                                        }
                                    }
                                    &:nth-child(4){
                                        button {
                                            background-image: url('/0/Handler/CSSOverride/GetImage/1/Top Align.svg');
                                        }
                                    }
                                    &:nth-child(5){
                                        button {
                                            background-image: url('/0/Handler/CSSOverride/GetImage/1/Center Horizontal Align.svg');
                                        }
                                    }
                                    &:nth-child(6){
                                        button{
                                            background-image: url('/0/Handler/CSSOverride/GetImage/1/Bottom Align.svg');
                                        }
                                    }
                                    &:nth-child(4),&:nth-child(5),&:nth-child(6) {
                                        justify-content: flex-end;
                                        display: flex;
                                    }
                                     &:nth-child(1),&:nth-child(2),&:nth-child(3) {
                                        justify-content: flex-start;
                                        display: flex;
                                    }
                                }
                            }
                        }
                        .buttonClassName-Image {
                            margin-bottom: 1rem;
                            border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
                            border-radius: 28px;
                            justify-content: center!important;
                            font-weight: bold;
                            color: white;
                            .icon {
                                display: none;
                            }
                        }
                    }
                    /* Row spacing for the reorderable list.

                       .ui-sortable is jQuery UI's own class, and it is not put
                       on the container until the sortable is initialised, which
                       the script does from a timer roughly half a second after
                       the rows have painted. Keyed on that class alone, this gap
                       and margin arrived after the shopper was already looking
                       at the list, and every row jumped.

                       .UI-SORTABLE on the child columns is the script's own
                       marker for the same state, written by the row builder, so
                       it is in the markup from the first paint and these rules
                       apply immediately. The two conditions match: the builder
                       adds UI-SORTABLE exactly when the list is reorderable,
                       which is the same test the sortable's setup uses.

                       The .ui-sortable rule is kept, in a block of its own
                       rather than as a second selector on the same one, so the
                       two do not share a fate: a browser without :has() support
                       drops the rule it cannot parse, and what is left is the
                       original behaviour - correct spacing, arriving late. */
                    & > .columns:has(> .column.UI-SORTABLE) {
                        gap: 1rem;
                        margin: 0 !important;
                    }
                    & > .columns.ui-sortable {
                        gap: 1rem;
                        margin: 0 !important;
                    }
                    .field-main-title {
                        display: none;
                    }
                    .field-reorder-handle-column {
                        display: block !important;
                        width: 3rem;
                        height: 100% !important;
                        background: #f7ede2;
                        border-radius: 8px;
                        left: 0;
                        background-repeat: no-repeat;
                        background-position: center;  
                        background-image: url('/0/Handler/CSSOverride/GetImage/1/Dots.svg');
                        * {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .field-reorder-locked {
                        .field-reorder-handle-column {
                            pointer-events: none;
                            .handle {
                                cursor: not-allowed;
                            }
                        }
                    }
                }
            }
            #leftPane-layout {
                .leftPaneTabbedContentArea  {
                    .field:has(select) {
                        &:before {
                            content: "Category";
                            font-weight: bold;
                            color: var(--textColour);
                            display: inline-block;
                            padding-bottom: 0.5rem;
                        }
                        select {
                            border-radius: 5px;
                            border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
                        }
                    }
                    .layout_container {
                        .mCSB_container {
                            & > .columns {
                                margin: 0px!important;
                                .layout_thumbs {
                                    border: 1px solid black;
                                    border-radius: 8px;
                                    overflow: hidden;
                                }
                            }
                        }
                    }
                }
            }
            #leftPane-clipart {
                .clipArtSelectorContainer__container {
                    .leftPaneTabbedContentArea {
                        &:before {
                            content: "Category";
                            font-weight: bold;
                            color: var(--textColour);
                            display: inline-block;
                            padding-bottom: 0.5rem;
                        }
                    }
                    select {
                        border-radius: 5px;
                        border: 1.5px solid var(--brand-main-colors-and-font-primary-color);
                    }
                    .galleryWrapper {
                        .mCSB_container {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 1rem;     
                            justify-content: center;
                            & > div:first-child {
                                display: none;
                            }                   
                            .clipArtItem {
                                border: 1px solid black;
                                border-radius: 8px;
                                overflow: hidden;
                                width: calc(33% - 1rem);
                                .item__container {
                                    background: transparent;
                                }
                            }
                        }
                    }
                }
            }
            .FB-FormFooterContainer {
                display: none;
            }
            &.is-opened {
                width: 35% !important;
            }
        }
        .ui-layout-southh_inner {
            max-width: 50vw;
            width: 100% !important;
            transform: translateX(50%);
            transition: 0.2s ease-in-out;
        }
        .editorMain {
            position: relative !important;
            float: right;
            inset: 0 !important;
            order: 1;
            display: flex !important;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transform: translateX(50%);
            max-width: 50vw;
            width: 100% !important;
            anchor-name: --EditorMain;
            transition: 0.2s ease-in-out;
            padding-top: 1rem;
            .canvas-container {
                border-top-right-radius: 10px;
                border-top-left-radius: 10px;
                overflow: hidden;
                anchor-name: --CanvasContainer;
            }
            .main_view_controls {
                display: none;
            }
            .canvas-page-nav-label {
                min-width: max-content;
                max-width: 400px;
                text-align: center;
                padding-bottom: 0.5rem;
                color: var(--textColour);
            }
            .canvas-page-nav-next, .canvas-page-nav-prev {
                position: absolute;
                top: 40%;
                &[disabled="disabled"] {
                    display: none;
                }
            }
            .canvas-page-nav-next {
                right: -4rem;
            }
            .canvas-page-nav-prev {
                left: -4rem;
            }
            #cps-editor-main-dock {
                width: 100%;
                border-top: 1px solid var(--greyLine);
                section#custom-zoom-controls-root {
                    background: white;
                    border-bottom-right-radius: 10px;
                    border-bottom-left-radius: 10px;
                    padding: 1rem;
                    border-top: 1px solid var(--greyLine);
                }
                #cps-strip {
                    padding: 1rem 0 0;
                    anchor-name: --designStrip;
                }
            }
        }
        &:has(.editorLeft.is-opened) {
            .editorMain {
                transform: translateX(19%);
            }
            .ui-layout-southh_inner {
                transform: translateX(79%);
            }
            .toggleCollapseTab {
                left: 35% !important;
                .icon-container:before {
                    transform: rotate(180deg);
                }
            }
        }
    }
    & > .tooltip {
        display: none;
    }
    .editorBottom {
        z-index: 9 !important;
    }
    .toggleCollapseTab {
        top: 50%;
        background: white;
        border-radius: 0px;
        border-left: 1px solid var(--greyLine);
        box-shadow: none;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        width: 30px;
        height: 60px;
        left: 0px!important;
        .icon-container:before {
            content: "\f054";
            font-family: 'Font Awesome 5 Pro';
            color: black;
            display: block;
            top: 15px;
            position: absolute;
            font-weight: bold;
            left: 8px;
            font-size: 1.25rem;
        }
    } 
    .ui-dialog {
        &:has(#dlgPopupInstruction) {
            display: none;
        }
    }

    .ui-dialog:has(#dlgPopupInstruction) {
        display: none;
    }

    .cm-rows:has(.cm-error){
        .cm-code {
            border-color: #DC2626;
        }
        .cm-error {
            color: #DC2626;
        }
    }
    .warningCtrlContainer {
        .ui-warning-message {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            width: auto;
            max-width: 90vw;
            height: fit-content;
            position-anchor: --EditorMain;
            top: anchor(2%);
            left: anchor(-15%);
            right: anchor(108%);
            padding: 0.75rem 1rem;
            .me-helper__text {
                padding-right: 1rem;
                order: 0;
                margin-bottom: 0;
                display: flex;
                gap: 10px;
                align-items: center;
                .icon {
                    display: none;
                }
                div {
                    height: fit-content;
                    h4 {
                        font-weight: bold;
                    }
                }
            }
            .me-helper-show-more {
                order: 2;
                border: 0;
                border-radius: 28px;
                background: #fcf9f5;
                color: var(--brand-main-colors-and-font-primary-color);
                height: 40px;
                font-weight: bold;
                font-size: 0.75rem;
            }
            .me-helper-close {
                top: 50%;
                transform: translateY(-50%);
                right: 1rem;
                width: 30px;
                height: 30px;
                background: transparent;
                order: 3;
                font-size: 0;
                &::before {
                    height: 2px;
                    width: 70%;
                }
                &::after {
                    height: 70%;
                    width: 2px;
                }
            }
        }
    }
    .cps-empty-canvas-hint {
        padding: 1rem;
        .cps-empty-canvas-hint-line-1 {
            padding-bottom: 0.25rem;
            font-weight: bold;
        }
    }
    .canvas-page-nav-container {
        anchor-name: --canvasPageName;
    }
}

@media only screen and (max-width: 1440px) {
    .editor2 {
        #parentContainer {
            .editorLeft {
                &.is-opened {
                    width: 40% !important;
                }
            }
            &:has(.editorLeft.is-opened) {
                .editorMain {
                    transform: translateX(10%);
                }
                .toggleCollapseTab {
                    left: 40% !important;
                }
            }
        }
        .toggleCollapseTab {
            top: 65%;
        }
        .warningCtrlContainer {
            .ui-warning-message {
                top: anchor(2%);
                left: anchor(-5%);
                right: anchor(108%);
                transform: none !important;
            }
        }
    }
}

@media only screen and (min-width: 1025px) {
    .editor2 {
        #parentContainer {
            .editorLeft {
                #leftPaneTabs {
                    #leftPaneList {
                        li {
                            &.lhTabs_customTab {
                                border-bottom: 1px solid var(--greyLine);
                                padding-bottom: 1rem;
                            }
                        }
                    }
                }
                #cps-ps-root:not(.cps-view-feature #cps-ps-root) {
                    overflow-y: auto;
                    overflow-x: hidden;
                    height: 80%;
                }
            }
        }
    }
}

@media only screen and (max-width: 1024px) {
    .editor2 {
        overflow: hidden;
        #parentContainer {
            height: auto !important;
            overflow: visible !important;
            &:has(.editorLeft.is-opened) {
                .editorMain {
                    transform: translateX(17%);
                    max-width: 75vw;
                    padding-bottom: 40px;
                    max-height: 50dvh;
                }
            }
            .editorMain {
                transform: translateX(17%);
                max-width: 75vw;
                padding-bottom: 40px;
                max-height: 50dvh;
                .customScriptUi-mainControlsArea {
                    button {
                        width: 40px;
                        height: 40px;
                    }
                }
                #cps-strip .cps-designs {
                    gap: 5px;
                }
            }
            .editorTop {
                inset: 0px!important;
                .headerWrapper {
                    display: flex;
                    flex-wrap: wrap;
                   .buttonContainer {
                        &.rightSide {
                            width: 100%;
                            justify-content: flex-start;
                            padding: 0px !important;
                        }
                    }
                    .backButton {
                        bottom: 1rem;
                        right: 0.5rem;
                        position: absolute;
                    }
                    .UR_button_title {
                        display: block;
                    }
                    .me-editor-simple-preview-button {
                        .extratxt {
                            display: block;
                        }
                    }
                }
            }
            .editorLeft {
                width: 100% !important;
                max-width: 100%;
                order: 3;
                z-index: 99 !important;
                &.is-opened {
                    width: 100% !important;
                    max-width: 100%;
                }
                & > .ui-layout-content {
                    overflow: visible!important;
                    & > div {
                      overflow: visible!important;  
                    }
                }
                #leftPaneTabs {
                    position: relative;
                    overflow: visible!important;
                    & > div {
                        display: none!important;
                        &.activated-tab {
                            display: block!important;
                        }
                    }
                    padding: 0px !important;
                    .ui-tabs-panel {
                        position: absolute;
                        width: 100%;
                        min-height: calc(100vh - 160px - 9.5rem) !important;
                        padding: 40px 20px !important;
                        bottom: 65px !important;
                    }
                    #leftPane-customTab {
                        .mCustomScrollBox {
                            padding: 1rem;
                        }
                    } 
                }
                #leftPane-cpsProduct, #leftPane-customTab, .itemClass-TextField.FieldEdit-FocusMode, .itemClass-ImageField.FieldEdit-FocusMode {
                    &::before {
                        font-size: 1.25rem;
                        font-weight: bold;
                        color: var(--textColour);
                    }
                }
                #leftPane-cpsProduct {
                    &::before {
                        content: 'Product';
                    }
                }
                #leftPane-customTab:not(#leftPane-customTab:has(.FieldEdit-FocusMode)) {
                    &::before {
                        content: 'Layers';
                    }
                }
                .itemClass-TextField.FieldEdit-FocusMode {
                    &::before {
                        content: 'Text';
                    }
                }
                .itemClass-ImageField.FieldEdit-FocusMode {
                    &::before {
                        content: 'Transform';
                    }
                }
                .ps-panel {
                    padding: 0px;
                }
                ul#leftPaneList {
                    width: 100%;
                    flex-direction: row !important;
                    /* height: 100px; */
                    border-top: 1px solid var(--greyLine);
                    border-bottom: none;
                    justify-content: center;
                    li {
                        height: 65px !important;
                        &.lhTabs_customTab {
                            border-bottom: none !important;
                        }
                        &:before, &:after {
                            display: none;
                        }
                    }
                }
            }
            .editorBottom {
                position: relative !important;
                width: 100% !important;
                inset: 0px !important;
                order: 4;
                &:before {
                    content: '';
                    width: 100%;
                    background: white;
                    bottom: 0;
                    height: 100vh;
                    position: absolute;
                    top: 0;
                    z-index: -1;
                }
            }

            #cps-strip {
                .cps-card {
                    margin-bottom: 0px;
                }
                .cps-card-back {
                    top: 10px;
                }
                .cps-design {
                    .cps-label {
                        font-size: 0.75rem
                    }
                }
            }
        }
    }
    .toggleCollapseTab {
        display: none !important;
    }
}

@media only screen and (max-width: 768px) {
    .editor2 {
        #parentContainer {
            .editorLeft {
                gap: 1rem;
                #leftPaneTabs {
                    #leftPaneList {
                        justify-content: space-around;
                        li {
                            a {
                                min-width: auto;
                            }
                        }
                    }
                }
            }
            .editorMain {
                transform: translateX(0%);
                max-width: 80vw;
                padding-bottom: 10px;
                padding-top: 10dvh;
                left: 10% !important;
                #cps-editor-main-dock {
                    width: 100vw;
                    #custom-zoom-controls-root {
                        width: 80vw;
                        margin: 0 auto;
                    }
                    #cps-strip {
                        padding: 1rem;
                        position-anchor: --canvasPageName;
                        position: absolute;
                        top: 0px;
                        left: 50%;
                        transform: translateX(-50%);
                        gap: 25%;
                        .cps-card, .cps-label { 
                            display: none;
                            .cps-card-front, .cps-card-back {
                                flex: 1 0 0;
                                width: auto;
                                max-height: 52px;
                                .cps-thumb {
                                    width: 100%;
                                    height: 100%;
                                    max-height: 52px;
                                    padding: 8px;
                                }
                            }
                            .cps-card-back {
                                left: 15px;
                            }
                        }
                        button.cps-iconbtn {   
                            &:after {
                                position: absolute !important;
                                bottom: -2px;
                                font-size: 0.75rem;
                                width: 100%;
                            }
                            &:nth-child(1){
                                &:after {
                                    content: 'Delete current design';
                                }
                            }
                            &:nth-child(3){
                                &:after {
                                    content: 'Add a new design';
                                }
                            }
                        }
                    }
                }
                .canvas-page-nav-label {
                    position-anchor: --designStrip;
                    position: absolute;
                    top: 4dvh;
                    left: 50%;
                    transform: translateX(-50%);
                    padding-bottom: 0px;
                }
                .cps-page-label-slot {
                    display: none;
                }
            }
             .editorTop {
                .headerWrapper {
                    .previewButton {
                        right: 60px;
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 480px) {
    .editor2 {
        #parentContainer {
            .editorTop {
                .headerWrapper {
                    a, button, .me-editor-simple-preview-button {
                        transform: scale(0.8);
                        padding: 6px;
                    }
                }
            }
            .editorMain {
                max-width: 70vw;
                left: 15% !important;
                padding-bottom: 10px;
                max-height: 42dvh;
                padding-top: 10dvh;
                .canvas-page-nav-label {
                    top: 3dvh;
                }
                #cps-editor-main-dock {
                    #cps-strip {
                        gap: unset;
                        justify-content: space-between;
                        padding: 0.5rem;
                        button.cps-iconbtn {
                            width: 35px;
                            height: 35px;
                            &:after {
                                bottom: -8px;
                            }
                        }
                    }
                    #custom-zoom-controls-root {
                        width: 70vw;
                        padding: 0.5rem 1rem !important;    
                        .czc-inner {
                            gap: 3px;
                            .czc-trigger {
                                padding: 6px 40px 6px 10px;
                                font-size: 0.75rem;
                            }
                            .czc-label {
                                font-size: 0.75rem;
                            }
                        }
                    }
                }
            }
            .editorLeft {
                #leftPaneTabs {
                    #leftPaneList {
                        li {
                            width: auto;
                            height: 45px !important;
                            padding: 0px;
                            a {
                                span {
                                    font-size: 0.7rem !important;
                                }
                            }
                            .icon {
                                width: 25px;
                            }
                        }
                    }
                }
            }
            .editorBottom {
                padding: 0px!important;
                #cps-actions-bar {
                    justify-content: center;
                    gap: 5px;
                    width: 100%;
                    .cab-left {
                        display: none;
                    }
                    .cab-right  {
                        flex-direction: row;
                        margin: 0px;
                        gap: 10px;
                        width: 100%;
                        align-items: self-end;
                        flex-wrap: wrap;    
                        .cab-subtotal {
                            width: 60%;
                            flex-wrap: wrap;
                            gap: 0px;
                            .cab-subtotal-label {
                                width: 100%;        
                            }
                            .cab-price {
                                width: 100%;
                            }
                        }
                    }
                    .action-add-to-cart {
                        width: 100%;
                        .cab-add {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}