html {
    font-size: 16px;
}

/* Coloris */
.clr-picker{display:none;flex-wrap:wrap;position:absolute;width:200px;z-index:1000;border-radius:10px;background-color:#fff;justify-content:flex-end;direction:ltr;box-shadow:0 0 5px rgba(0,0,0,.05),0 5px 20px rgba(0,0,0,.1);-moz-user-select:none;-webkit-user-select:none;user-select:none}.clr-picker.clr-open,.clr-picker[data-inline=true]{display:flex}.clr-picker[data-inline=true]{position:relative}.clr-gradient{position:relative;width:100%;height:100px;margin-bottom:15px;border-radius:3px 3px 0 0;background-image:linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg,#fff,currentColor);cursor:pointer}.clr-marker{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid #fff;border-radius:50%;background-color:currentColor;cursor:pointer}.clr-picker input[type=range]::-webkit-slider-runnable-track{width:100%;height:16px}.clr-picker input[type=range]::-webkit-slider-thumb{width:16px;height:16px;-webkit-appearance:none}.clr-picker input[type=range]::-moz-range-track{width:100%;height:16px;border:0}.clr-picker input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0}.clr-hue{background-image:linear-gradient(to right,red 0,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%)}.clr-alpha,.clr-hue{position:relative;width:calc(100% - 40px);height:8px;margin:5px 20px;border-radius:4px}.clr-alpha span{display:block;height:100%;width:100%;border-radius:inherit;background-image:linear-gradient(90deg,rgba(0,0,0,0),currentColor)}.clr-alpha input[type=range],.clr-hue input[type=range]{position:absolute;width:calc(100% + 32px);height:16px;left:-16px;top:-4px;margin:0;background-color:transparent;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}.clr-alpha div,.clr-hue div{position:absolute;width:16px;height:16px;left:0;top:50%;margin-left:-8px;transform:translateY(-50%);border:2px solid #fff;border-radius:50%;background-color:currentColor;box-shadow:0 0 1px #888;pointer-events:none}.clr-alpha div:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border-radius:50%;background-color:currentColor}.clr-format{display:none;order:1;width:calc(100% - 40px);margin:0 20px 20px}.clr-segmented{display:flex;position:relative;width:100%;margin:0;padding:0;border:1px solid #ddd;border-radius:15px;box-sizing:border-box;color:#999;font-size:12px}.clr-segmented input,.clr-segmented legend{position:absolute;width:100%;height:100%;margin:0;padding:0;border:0;left:0;top:0;opacity:0;pointer-events:none}.clr-segmented label{flex-grow:1;margin:0;padding:4px 0;font-size:inherit;font-weight:400;line-height:initial;text-align:center;cursor:pointer}.clr-segmented label:first-of-type{border-radius:10px 0 0 10px}.clr-segmented label:last-of-type{border-radius:0 10px 10px 0}.clr-segmented input:checked+label{color:#fff;background-color:#666}.clr-swatches{order:2;width:calc(100% - 32px);margin:0 16px}.clr-swatches div{display:flex;flex-wrap:wrap;padding-bottom:12px;justify-content:center}.clr-swatches button{position:relative;width:20px;height:20px;margin:0 4px 6px 4px;padding:0;border:0;border-radius:50%;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;cursor:pointer}.clr-swatches button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}input.clr-color{order:1;width:calc(100% - 80px);height:32px;margin:15px 20px 20px auto;padding:0 10px;border:1px solid #ddd;border-radius:16px;color:#444;background-color:#fff;font-family:sans-serif;font-size:14px;text-align:center;box-shadow:none}input.clr-color:focus{outline:0;border:1px solid #1e90ff}.clr-clear,.clr-close{display:none;order:2;height:24px;margin:0 20px 20px;padding:0 20px;border:0;border-radius:12px;color:#fff;background-color:#666;font-family:inherit;font-size:12px;font-weight:400;cursor:pointer}.clr-close{display:block;margin:0 20px 20px auto}.clr-preview{position:relative;width:32px;height:32px;margin:15px 0 20px 20px;border-radius:50%;overflow:hidden}.clr-preview:after,.clr-preview:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border:1px solid #fff;border-radius:50%}.clr-preview:after{border:0;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.clr-preview button{position:absolute;width:100%;height:100%;z-index:1;margin:0;padding:0;border:0;border-radius:50%;outline-offset:-2px;background-color:transparent;text-indent:-9999px;cursor:pointer;overflow:hidden}.clr-alpha div,.clr-color,.clr-hue div,.clr-marker{box-sizing:border-box}.clr-field{display:inline-block;position:relative;color:transparent}.clr-field input{margin:0;direction:ltr}.clr-field.clr-rtl input{text-align:right}.clr-field button{position:absolute;width:30px;height:100%;right:0;top:50%;transform:translateY(-50%);margin:0;padding:0;border:0;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;pointer-events:none}.clr-field.clr-rtl button{right:auto;left:0}.clr-field button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 1px rgba(0,0,0,.5)}.clr-alpha,.clr-alpha div,.clr-field button,.clr-preview:before,.clr-swatches button{background-image:repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);background-position:0 0,4px 4px;background-size:8px 8px}.clr-marker:focus{outline:0}.clr-keyboard-nav .clr-alpha input:focus+div,.clr-keyboard-nav .clr-hue input:focus+div,.clr-keyboard-nav .clr-marker:focus,.clr-keyboard-nav .clr-segmented input:focus+label{outline:0;box-shadow:0 0 0 2px #1e90ff,0 0 2px 2px #fff}.clr-picker[data-alpha=false] .clr-alpha{display:none}.clr-picker[data-minimal=true]{padding-top:16px}.clr-picker[data-minimal=true] .clr-alpha,.clr-picker[data-minimal=true] .clr-color,.clr-picker[data-minimal=true] .clr-gradient,.clr-picker[data-minimal=true] .clr-hue,.clr-picker[data-minimal=true] .clr-preview{display:none}.clr-dark{background-color:#444}.clr-dark .clr-segmented{border-color:#777}.clr-dark .clr-swatches button:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.clr-dark input.clr-color{color:#fff;border-color:#777;background-color:#555}.clr-dark input.clr-color:focus{border-color:#1e90ff}.clr-dark .clr-preview:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.clr-dark .clr-alpha,.clr-dark .clr-alpha div,.clr-dark .clr-preview:before,.clr-dark .clr-swatches button{background-image:repeating-linear-gradient(45deg,#666 25%,transparent 25%,transparent 75%,#888 75%,#888),repeating-linear-gradient(45deg,#888 25%,#444 25%,#444 75%,#888 75%,#888)}.clr-picker.clr-polaroid{border-radius:6px;box-shadow:0 0 5px rgba(0,0,0,.1),0 5px 30px rgba(0,0,0,.2)}.clr-picker.clr-polaroid:before{content:'';display:block;position:absolute;width:16px;height:10px;left:20px;top:-10px;border:solid transparent;border-width:0 8px 10px 8px;border-bottom-color:currentColor;box-sizing:border-box;color:#fff;filter:drop-shadow(0 -4px 3px rgba(0,0,0,.1));pointer-events:none}.clr-picker.clr-polaroid.clr-dark:before{color:#444}.clr-picker.clr-polaroid.clr-left:before{left:auto;right:20px}.clr-picker.clr-polaroid.clr-top:before{top:auto;bottom:-10px;transform:rotateZ(180deg)}.clr-polaroid .clr-gradient{width:calc(100% - 20px);height:120px;margin:10px;border-radius:3px}.clr-polaroid .clr-alpha,.clr-polaroid .clr-hue{width:calc(100% - 30px);height:10px;margin:6px 15px;border-radius:5px}.clr-polaroid .clr-alpha div,.clr-polaroid .clr-hue div{box-shadow:0 0 5px rgba(0,0,0,.2)}.clr-polaroid .clr-format{width:calc(100% - 20px);margin:0 10px 15px}.clr-polaroid .clr-swatches{width:calc(100% - 12px);margin:0 6px}.clr-polaroid .clr-swatches div{padding-bottom:10px}.clr-polaroid .clr-swatches button{width:22px;height:22px}.clr-polaroid input.clr-color{width:calc(100% - 60px);margin:10px 10px 15px auto}.clr-polaroid .clr-clear{margin:0 10px 15px 10px}.clr-polaroid .clr-close{margin:0 10px 15px auto}.clr-polaroid .clr-preview{margin:10px 0 15px 10px}.clr-picker.clr-large{width:275px}.clr-large .clr-gradient{height:150px}.clr-large .clr-swatches button{width:22px;height:22px}.clr-picker.clr-pill{width:380px;padding-left:180px;box-sizing:border-box}.clr-pill .clr-gradient{position:absolute;width:180px;height:100%;left:0;top:0;margin-bottom:0;border-radius:3px 0 0 3px}.clr-pill .clr-hue{margin-top:20px}


*, ::after, ::before {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position: ;
	--tw-gradient-via-position: ;
	--tw-gradient-to-position: ;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(63,131,248,.5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia: ;
}


 main.no-couch {
    -webkit-background-size: 20px 20px;
    -moz-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    background-size: 20px 20px;
    background-image: -webkit-linear-gradient(left, #444f61 1px, transparent 1px), -webkit-linear-gradient(top, #444f61 1px, transparent 1px);
    background-image: -moz-linear-gradient(left, #94a3b8 1px, transparent 1px), -moz-linear-gradient(top, #94a3b8 1px, transparent 1px);
    background-image: -o-linear-gradient(left, #94a3b8 1px, transparent 1px), -o-linear-gradient(top, #94a3b8 1px, transparent 1px);
    background-image: linear-gradient(to right, #444f61 1px, transparent 1px), linear-gradient(to bottom, #444f61 1px, transparent 1px);
}


@media(prefers-color-scheme:dark) {
    main.no-couch {
        -webkit-background-size: 20px 20px;
        -moz-background-size: 20px 20px;
        -o-background-size: 20px 20px;
        background-size: 20px 20px;
        background-color: rgb(30, 41, 59);
        background-image: -webkit-linear-gradient(left, rgb(55, 65, 81)1px, transparent 1px), -webkit-linear-gradient(top, rgb(55, 65, 81)1px, transparent 1px);
        background-image: -moz-linear-gradient(left, rgb(55, 65, 81)1px, transparent 1px), -moz-linear-gradient(top, rgb(55, 65, 81)1px, transparent 1px);
        background-image: -o-linear-gradient(left, rgb(55, 65, 81)1px, transparent 1px), -o-linear-gradient(top, rgb(55, 65, 81)1px, transparent 1px);
        background-image: linear-gradient(to right, rgb(55, 65, 81)1px, transparent 1px), linear-gradient(to bottom, rgb(55, 65, 81)1px, transparent 1px)
    }
}

body {
    margin-top: 0 !important;
    padding-top: 68px !important;
}

.design-tool-layout {
    height: calc(100vh - 80px);
}

.design-tool-image-upload {
    display: none !important;
}

.sidebar-option {
    display: none;
}

.sidebar-option.active {
    display: flex;
}

.sidebar-option-m {
    display: none;
}

.option-select {
    cursor: pointer;
}

.close-option-m {
	background-color: rgba(255, 255, 255, .3);
	padding: 5px 15px;

    span {
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 1px;
    }
}

.size-option {
    font-size: 1.125rem;
}

.color-border-selector {
    gap: 15px;
    display: none;
}

.clr-field input {
    padding: 4px;
}

.clr-field button {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.rotate-canvas {
    color: #ffffff !important;
}

.rotate-image {
    color: #ffffff !important;
}

.fit-to-canvas {
    color: #ffffff !important;
}

#loading-spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(31,41,55,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    backdrop-filter: blur(5px);
    z-index: 10001;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #fff;
  border-right-color: rgb(255, 0, 81);
  animation: l2 1s infinite linear;
}
@keyframes l2 {to{transform: rotate(1turn)}}

.tmodal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(31,41,55,0.5);
  backdrop-filter: blur(5px);
}

.tmodal-btn {
    height: 36px;
    width: 140px;
    font-size: 1.2rem;
    line-height: 2.0rem;
}


.tmodal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  border-radius: .4rem;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #333;
}

.tmodal-header {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
}

.tmodal-body {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    flex-direction: column;
}

.tmodal-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    gap: 15px;
    width: 100%;
    padding: 0px;
}

.tmodal-row-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.tmodal-text-header {
    color: #333;
    font-size: 1.5rem;
    font-weight: 900;
}

.tmodal p {
    color: #333;
    margin: 0;
    font-size: 1rem;
}

.tmodal-hr {
    width: 80%;
    border-color: #bbb;
}

.tmodal-close:hover {
    background-color: #2c3a4e;
}

.tmodal-close {
    padding-top: .5rem !important;
    color: #fff;
}

.preview-instructions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.print-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    padding: 0px 25px;
}

.print-quality {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

#total-price {
    color: rgb(14, 159, 110);
    font-size: 1.2rem;
    font-weight: 600;
}

.trow-50 {
    width: 50%;
}

.tmodal-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 25px 10px 10px;
}

.zoom-container {
    position: absolute;
    bottom: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    left: 0;
    z-index: 1;
}

.error-message {
    background-color: #ffc1c1;
    border-radius: .4rem;
    border: 1px solid #8d1414;
    color: #8d1414;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    width: 80%;
    font-size: 1.2rem;
    font-weight: 900;
    text-align: center;
}

.zoom-bg {
    background-color: rgba(150,150,150,.85);
    border: 1px solid #fff;
}

#mb-tool-options {
    display: none;
}


@media screen and (max-width: 769px) {
    body {
        padding-top: 42px !important;
    }

    #selected-items-list {
        display: none;
    }

    .desktop-options {
        display: none;
    }
    
    .sidebar-option.active {
        display: none;
    }

    .sidebar-option-m.active {
        display: flex;
    }

    .sidebar-option-m {
        .bg-white {
            background-color: #fff;
        }
    }

    .toolbar-option {
        display: none;
    }

    .quality-container.dk {
        display: none;
    }

    .mb-hidden {
        display: none;
    }

    #mb-tool-options.show-tools {
        display: block;
    }

    .zoom-container {
        bottom: 3rem;
    }

    .tmodal-row {
        flex-direction: column;
    }

    .trow-50 {
        width: 100%;
    }

    .tmodal-close {
        margin: 0;
    }

    #threejs-container {
        height: 200px;
    }

    .tmodal-header {
        justify-content: center;
    }

    #mobile-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 10;
        transition: top 0.5s ease-out;
    }

    #mobile-sidebar.ms-hide {
        top: 100%;
    }

    .design-tool-layout {
        height: calc(100vh - 40px);
    }
}