.modal-popup .modal-inner-wrap {
    width: 80%;
    margin: 2rem auto;
    height: 95%;
    max-height: 95% !important;
    border-radius: 5px;
}
.modal-content {
    padding-top: 10px !important;
}
.modal-popup._inner-scroll .modal-content {
    height: 100%;
}
.modal-body {
    height: 85%;
}
#artpopup {
    height: 100%;
}
.modal-dialog.vertical-align-center.modal-lg {
    height: 100%;
}
.vertical-alignment-helper {
    height: 100%;
}
#popup-modal {
    height: 100%;
}
.upload-art {
    height: 100%;
}
.shippingBoxContainer {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    padding: 10px;
    position: relative;
    flex-wrap: wrap;
}
:root {
    --height: 250px;
    --width: 350px;
    --depth: 250px;
}
._3dbox,
._3dbox * {
    transform-style: preserve-3d;
}
.boxlabel {
    font-family: Helvetica;
    font-size: 20px;
}
.wrap {
    perspective: 2050px;
    perspective-origin: 50% 50%;
    overflow: visible !important;
}
._3dbox {
    height: var(--height);
    width: var(--depth);
    transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 0 auto;
    margin-top: 80px;
    transform-style: preserve-3d;
    position: relative;
    transform: rotateX(-15deg) rotateY(15deg);
}
.acknowledge {
    list-style-type: initial;
    font-size: 12px;
    line-height: 18px;
    margin-top: 2px;
    margin-bottom: 10px;
    padding-left: 15px;
}
.rotate {
    animation: rotateBox 20s infinite linear;
    -webkit-animation: rotateBox 20s infinite linear;
}
._3dface {
    overflow: hidden;
    position: absolute;
    border: 1px solid #b07c38;
    box-shadow:
        inset 0 0 0px 0px rgba(0, 0, 0, 0.1),
        0 0 0px rgba(0, 0, 0, 0.3);
    color: #333;
    opacity: 0.7;
}
._3dface--top {
    height: var(--width);
    width: var(--depth);
    bottom: 100%;
    position: absolute;
    background-color: #d6a970;
    transform: translateY(50%) rotateX(90deg);
}
._3dface--bottom {
    height: var(--width);
    width: var(--depth);
    top: 100%;
    position: absolute;
    background-color: #d6a970;
    transform: translateY(-50%) rotateX(-90deg);
    box-shadow: 5px 2px 43px rgba(0, 0, 0, 1);
}
._3dface--right {
    width: var(--width);
    height: 100%;
    left: var(--depth);
    position: absolute;
    background-color: #d6a970;
    transform: translateX(-50%) rotateY(90deg);
}
._3dface--left {
    width: var(--width);
    height: 100%;
    left: 0;
    position: absolute;
    background-color: #d6a970;
    transform: translateX(-50%) rotateY(270deg);
}
.aux {
    width: var(--depth);
    height: var(--width);
    position: absolute;
    transform: translateY(-50%) rotateX(-90deg);
    background-color: transparent !important;
}
._3dface--front {
    height: var(--height);
    width: var(--depth);
    top: 0;
    position: absolute;
    background-color: #d6a970;
    transform: rotateX(90deg);
    transform-origin: center top;
}
._3dface--back {
    height: var(--height);
    width: var(--depth);
    top: 100%;
    position: absolute;
    background-color: #d6a970;
    transform: rotateX(90deg) rotateY(180deg);
    transform-origin: center top;
}
.boxDesign {
    position: relative;
    display: block;
    width: 63%;
    float: left;
    min-height: 450px;
    border-radius: 5px;
    background-color: transparent;
    overflow: hidden;
    max-height: 560px;
    user-select: none;
}
.boxDesign p {
    color: #000;
}
.fa.fa-camera {
    font-size: 16px;
    vertical-align: middle;
}
.removeTopBorder:after {
    background: 0 0 !important;
}
.boxDesign:before,
.boxDesign:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 10px;
    bottom: 10px;
    left: 0;
    right: 0;
    -moz-border-radius: 100px/10px;
    border-radius: 100px/10px;
}
.boxDesign:after {
    right: 10px;
    left: auto;
    -webkit-transform: skew(8deg) rotate(3deg);
    -moz-transform: skew(8deg) rotate(3deg);
    -ms-transform: skew(8deg) rotate(3deg);
    -o-transform: skew(8deg) rotate(3deg);
    transform: skew(8deg) rotate(3deg);
}
.textControls {
    display: block;
    width: 37%;
    padding-left: 15px;
    text-align: left;
    position: relative;
    padding-top: 5px;
}
.editorb {
    padding: 5px;
    margin: 2px;
    font-size: 17px;
    border: 1px solid #f2f2f2;
    background-color: #fff;
    font-weight: 700;
    text-align: center;
    width: 33px;
    float: left;
    cursor: pointer;
}
.editori {
    padding: 5px;
    margin: 2px;
    font-family: "Poppins";
    font-size: 17px;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    font-style: italic;
    text-align: center;
    width: 33px;
    float: left;
    cursor: pointer;
}
.editoru {
    padding: 5px;
    margin: 2px;
    font-size: 17px;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    text-decoration: underline;
    text-align: center;
    width: 33px;
    float: left;
    cursor: pointer;
}
.txt_clr_cls {
    font-size: 25px;
    cursor: pointer;
}
.yellow {
    color: #ff0;
    background-color: #ff0;
}
.green {
    color: green;
    background-color: green;
}
.blue {
    color: #00f;
    background-color: #00f;
}
.black {
    color: #000;
    background-color: #000;
}
.white {
    color: #fff;
}
.red {
    color: red;
    background-color: red;
}
.black,
.blue,
.green,
.red,
.white,
.yellow {
    border-radius: 15px;
    line-height: 20px !important;
}
@keyframes rotateBox {
    from {
        transform: rotateX(0deg) rotateY(0deg);
        -ms-transform: rotateX(0deg) rotateY(0deg);
        -webkit-transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(0deg) rotateY(360deg);
        -ms-transform: rotateX(0deg) rotateY(360deg);
        -webkit-transform: rotateX(0deg) rotateY(360deg);
    }
}
@-webkit-keyframes rotateBox {
    from {
        transform: rotateX(0deg) rotateY(0deg);
        -ms-transform: rotateX(0deg) rotateY(0deg);
        -webkit-transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(0deg) rotateY(360deg);
        -ms-transform: rotateX(0deg) rotateY(360deg);
        -webkit-transform: rotateX(0deg) rotateY(360deg);
    }
}
.boxbtn {
    outline: none;
    border: 0;
    padding: 10px;
    background-color: #9a6f33;
    color: #fff;
    padding-left: 13px;
    padding-right: 13px;
}
.labelContainer {
    display: block;
    width: 100%;
}
.boxtext {
    width: 100%;
    border: 1px solid #3e969b;
    border-radius: 4px;
    padding: 5px;
}
.box-side.active {
    border: 1px solid #d5d5d5;
    background-color: #f4f4f4;
    border-radius: 3px;
}
.box-side {
    cursor: pointer;
    background-color: #fff;
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    flex: 1 1 auto;
}
.box-portion {
    cursor: pointer;
    background: #e8eefd !important;
    color: #122957 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 3px !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: 0 1px 0 0 rgb(0 0 0/10%) !important;
    width: 49%;
    margin-right: 5px;
}
.box-portion.active {
    background-color: #f4f4f4 !important;
}
.box-side svg {
    display: inline-block;
    width: 38px;
    height: 40px;
    fill: none;
}
svg:not(:root) {
    overflow: hidden;
}
.box-side span {
    display: inline-block;
    font-size: 1rem;
    margin: 0;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.box-portion span {
    display: inline-block;
    margin: 0;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.08rem !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    font-weight: 700;
}
.btnBoxSideControls .box-side {
    width: calc(16.6667% - 5px);
    border: 1px solid #d5d5d5;
    flex: 0 0 auto;
    min-width: initial;
    margin-right: 5px;
    border-radius: 3px;
}
.box-side svg .edges {
    stroke: #7b7b7b;
}
.box-side.active svg .sides {
    fill: #7b7b7b;
}
.box-side svg .sides {
    fill: #d5d5d5;
    opacity: 0.5;
    transition:
        fill 0.3s ease,
        opacity 0.3s ease;
}
.box-side svg .edges .base {
    opacity: 0.4;
}
.btnBoxSideSelector {
    display: inline-flex;
    width: 100%;
    border-radius: 3px;
    padding: 5px 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.btnBoxSideControls {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
    border-radius: 3px;
    padding: 5px 0;
    justify-content: space-between;
}
.sp-replacer {
    border: 0 !important;
    background: 0 0 !important;
    margin-top: -30px !important;
}
.add-artwork input {
    display: none !important;
}
.btn.large {
    letter-spacing: 0.08rem !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    font-weight: 700;
}
.btn {
    padding: 8px 15px !important;
    background: #e8eefd !important;
    color: #122957 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 3px !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1) !important;
}
.add-artwork p {
    display: inline-block !important;
    font-size: 0.75rem !important;
    vertical-align: middle !important;
    margin-bottom: 0 !important;
    color: #7b7b7b !important;
}
p {
    margin: 0;
    line-height: 2.3;
}
.ui-draggable {
    cursor: move;
}
.pattern {
    display: inline-block;
    width: 100px;
    height: 75px;
    padding: 4px;
}
.boxdimension {
    border: 1px solid #3e969b;
    border-radius: 4px;
    padding: 5px;
    width: 90px;
}
.styleBox {
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
}
.colorSelector {
    display: inline-block;
    margin-left: 10px;
    padding: 5px 12px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    box-shadow: 0px 0px 2px 0px #939393;
    position: relative;
}
#txt_clr {
    margin-left: 15px;
}
.boxDimesionCls {
    display: none;
    width: 100%;
    margin: 0 auto;
}
.addmore {
    cursor: pointer;
    text-decoration: underline;
}
#extraTextBox {
    display: none;
}
.fontstyle {
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
}
.clrBox {
    display: none;
    width: 190px;
    height: 40px;
    position: absolute;
    background-color: #f8f8f8;
    padding: 8px 0;
    border-radius: 5px;
    top: 35px;
    right: 0;
    box-shadow: 1px 1px 3px #bcb6b6;
}
.loading-cube {
    display: none;
    position: absolute;
    border-radius: 5px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 41, 87, 0.4);
    align-items: center;
    z-index: 1111;
}
.loading-cube .container-loading {
    position: relative;
    top: 40%;
    transform: scale(1.5);
}
.cube-container {
    margin: 0 auto !important;
}
.container-loading {
    perspective: 300px;
}
.container-loading,
.cube,
.half1,
.half2 {
    transform-style: preserve-3d;
}
.container-loading,
.cube {
    width: 100px;
    height: 100px;
}
.cube {
    animation: cube 3s forwards infinite;
    transform-origin: center 50px;
}
.container-loading,
.cube,
.half1,
.half2 {
    transform-style: preserve-3d;
}
.half1 {
    height: 40px;
    animation: half-fold 3s forwards infinite;
}
.half1,
.s1 {
    top: 0;
    transform-origin: 50% 100%;
}
.half1,
.side,
.tooltip {
    position: absolute;
}
.s1 {
    left: 40px;
    animation: s1ani 3s forwards infinite;
}
.side {
    width: 20px;
    height: 20px;
    background: #e8fdf4;
    border: 1px dashed rgba(0, 0, 0, 0.05);
}
.s2 {
    top: 20px;
    animation: s2ani 3s forwards infinite;
}
.s2,
.s3,
.s4 {
    left: 40px;
    transform-origin: 50% 0;
}
.s5 {
    left: 20px;
    top: 20px;
    transform-origin: 100% 50%;
    animation: s5ani 3s forwards infinite;
}
.s3 {
    top: 40px;
    animation: s3ani 3s forwards infinite;
}
.s4 {
    top: 60px;
    animation: s4ani 3s forwards infinite;
}
.s6 {
    left: 60px;
    top: 40px;
    transform-origin: 0 50%;
    animation: s6ani 3s forwards infinite;
}
@keyframes cube {
    0%,
    30% {
        transform: rotateX(0);
    }
    40% {
        transform: rotateX(45deg) rotateY(0) rotateZ(45deg);
    }
    60% {
        transform: rotateX(60deg) rotateY(0) rotateZ(45deg);
    }
    65%,
    70% {
        transform: rotateX(60deg) rotate(45deg) rotateZ(180deg);
    }
    75%,
    80% {
        transform: rotateX(60deg) rotate(45deg) rotateZ(360deg);
    }
    90% {
        transform: rotateX(0) rotate(0) rotateZ(0);
    }
}
@keyframes s1ani {
    0% {
        opacity: 1;
        transform: translateY(0);
        background: #e8fdf4;
    }
    40% {
        transform: rotateX(0);
        background: #e8fdf4;
    }
    50% {
        transform: rotateX(-90deg);
        background: #e8fdf4;
    }
    90% {
        transform: rotateX(-90deg);
    }
}
@keyframes s2ani {
    0% {
        opacity: 0;
        transform: rotateX(-179deg);
    }
    10% {
        opacity: 1;
        transform: rotateX(0);
    }
    40% {
        background: #e8fdf4;
    }
    45%,
    80% {
        background: #dcfcee;
    }
    65% {
        opacity: 1;
        background: #dcfcee;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes s3ani {
    0%,
    10% {
        opacity: 0;
        transform: rotateX(-179deg);
    }
    20%,
    90% {
        opacity: 1;
        transform: rotateX(0);
    }
    40% {
        background: #e8fdf4;
    }
    45% {
        background: #d1fbe9;
    }
    100% {
        opacity: 0;
    }
}
@keyframes s4ani {
    0%,
    20% {
        opacity: 0;
        transform: rotateX(-179deg);
    }
    10%,
    100% {
        opacity: 0;
    }
    30% {
        opacity: 1;
        transform: rotateX(0);
    }
    40% {
        transform: rotateX(0);
        background: #e8fdf4;
    }
    50% {
        transform: rotateX(90deg);
        background: #dcfcee;
    }
    80% {
        background: #dcfcee;
    }
    90% {
        opacity: 1;
        transform: rotateX(90deg);
    }
}
@keyframes s5ani {
    0%,
    10% {
        opacity: 0;
        transform: rotateY(-179deg);
    }
    20% {
        opacity: 1;
        background: #e8fdf4;
        transform: rotateY(0);
    }
    40% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateY(90deg);
    }
    55% {
        background: #e8fdf4;
    }
    60% {
        background: #f1fef8;
    }
    90% {
        transform: rotateY(90deg);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes s6ani {
    0%,
    20% {
        opacity: 0;
        transform: rotateY(179deg);
    }
    30% {
        opacity: 1;
        transform: rotateY(0);
    }
    40% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateY(-90deg);
        background: #e8fdf4;
    }
    60%,
    80% {
        background: #f1fef8;
    }
    90% {
        opacity: 1;
        transform: rotateY(-90deg);
    }
    100% {
        opacity: 0;
    }
}
@keyframes half-fold {
    0%,
    50% {
        transform: rotateX(0);
    }
    60%,
    90% {
        transform: rotateX(-90deg);
    }
}
.resetBtn {
    padding: 12px;
    border-radius: 3px;
    border: none;
    background-color: #846232;
    color: #fff;
}
.leftSideRotate {
    width: 50%;
    float: left;
    display: flex;
    z-index: 1001;
}
.rightSideRotate {
    width: 50%;
    float: left;
    display: flex;
    z-index: 1001;
}
@media only screen and (max-width: 768px) {
    .modal-body {
        position: relative;
        padding: 15px;
        display: block;
        max-width: 100%;
    }
    .textControls {
        width: 100%;
        margin-top: 40px;
    }
    .boxDesign {
        width: 100%;
    }
}
@media only screen and (max-width: 425px) {
    .upload-art {
        width: 380px;
        max-width: 100%;
    }
    .leftSideRotate {
        margin: auto;
        width: 100%;
    }
    .rightSideRotate {
        margin: auto;
        width: 100%;
    }
    .boxDesign {
        min-height: 400px !important;
    }
}
@media only screen and (max-width: 425px) {
    .upload-art {
        width: 320px;
    }
    .fontstyle {
        margin-left: 0;
    }
    .boxDesign {
        min-height: 350px;
    }
    .resetDesignBtn {
        margin-left: 10px !important;
    }
}
.zoomMain {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
#outer-box-zoom-range:focus {
    outline: none;
    border-color: inherit;
    box-shadow: none;
}
#inner-box-zoom-range:focus {
    outline: none;
    border-color: inherit;
    box-shadow: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    border-radius: 50px;
    height: 20px;
    width: 20px;
    cursor: pointer;
}
.BoxPlus {
    position: absolute;
    z-index: 1001;
    left: 50px;
    top: -50px;
}
.BoxMinus {
    position: absolute;
    left: 50px;
    top: 54px;
    z-index: 1001;
}
#boxZoom {
    -webkit-appearance: none;
    border: 1px solid #fff;
    transform: rotate(-90deg);
    width: 120px;
    padding: 10px;
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 12px;
}
#boxZoom::-webkit-slider-runnable-track {
    height: 3px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
#boxZoom::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #dab17d;
    margin-top: -5px;
}
#boxZoom:focus {
    outline: none;
}
#boxZoom:focus::-webkit-slider-runnable-track {
    background: #ccc;
}
#boxZoom::-moz-range-track {
    height: 3px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
#boxZoom::-moz-range-thumb {
    border: none;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #dab17d;
}
#boxZoom:-moz-focusring {
    outline: 1px solid #fff;
    outline-offset: -1px;
}
#boxZoom:focus::-moz-range-track {
    background: #ccc;
}
#boxZoom::-ms-track {
    height: 3px;
    background: 0 0;
    border-color: transparent;
    border-width: 6px 0;
    color: transparent;
}
#boxZoom::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
#boxZoom::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
#boxZoom::-ms-thumb {
    border: none;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #dab17d;
}
#boxZoom:focus::-ms-fill-lower {
    background: #888;
}
#boxZoom:focus::-ms-fill-upper {
    background: #ccc;
}
.panes {
    display: none;
}
.ActivePane {
    display: block;
    position: absolute;
    background: #e8eefd;
    border-radius: 2px;
    width: 271px;
    height: auto;
    min-height: 50px;
    top: 50px;
    left: 15px;
    box-shadow:
        0 1px 3px #c1b1b1,
        0 1px 2px rgba(0, 0, 0, 0.24);
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.AddImagePane > .intro {
    text-align: center;
}
.panes h1 {
    font-family:
        -apple-system,
        system-ui,
        BlinkMacSystemFont,
        Segoe UI,
        Roboto,
        Helvetica Neue,
        Arial,
        sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.panes p {
    margin-top: 0;
    margin-bottom: 1rem;
}
.AddImagePane > .intro ul li {
    border-top: none;
}
.catalog-product-view .modal-inner-wrap .AddImagePane > .intro ul li {
    width: 100%;
}
.AddImagePane > .intro ul li {
    text-align: left;
    white-space: nowrap;
    float: left;
    width: 50%;
}
.AddImagePane > .intro ul li a.clipart {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23666'%3E%3Cpath d='M24 2.1c-13.3 0-24 10.7-24 24 0 6.5 2.5 8.5 6.6 8.8v-3.8c0-2.6 2.1-4.8 4.8-4.8h24.9c2.6 0 4.8 2.1 4.8 4.8v3.8c4.3-.3 7-2.3 7-8.8-.1-13.2-10.8-24-24.1-24zM8.5 22c-.6 3.2-2.5 5.6-4.3 5.3-1.8-.4-2.8-3.3-2.2-6.5.6-3.2 2.5-5.6 4.3-5.3 1.8.3 2.8 3.2 2.2 6.5zm15.3-3.5c-6.3 0-11.4-3.1-11.4-7s5.1-7 11.4-7 11.4 3.1 11.4 7-5.1 7-11.4 7zm20.1 8.7c-1.8.3-3.8-2-4.3-5.3-.6-3.2.4-6.1 2.2-6.4 1.8-.3 3.8 2 4.3 5.3.7 3.2-.3 6.1-2.2 6.4zm-7.6 1.1H11.4c-1.5 0-2.7 1.2-2.7 2.7v12.1c0 .8.3 1.4.8 1.9s1.2.8 1.9.8h24.9c.8 0 1.4-.3 1.9-.8s.8-1.2.8-1.9v-12c0-1.5-1.2-2.8-2.7-2.8zM18.2 39.4c-.6 0-1-1.9-1-4.3s.5-4.3 1-4.3c.6 0 1 1.9 1 4.3s-.4 4.3-1 4.3zm11.6 0c-.6 0-1-1.9-1-4.3s.5-4.3 1-4.3c.6 0 1 1.9 1 4.3s-.4 4.3-1 4.3z'/%3E%3C/svg%3E");
    background-position: 15px;
}
.AddImagePane > .intro ul li a {
    background-position: 2px;
    background-repeat: no-repeat;
    -webkit-background-size: 23px 23px;
    background-size: 23px 23px;
    display: block;
    height: 32px;
    padding-left: 45px;
}
.AddImagePane > .intro ul li a h2 {
    color: #122957;
    font-size: 12px;
    line-height: 25px;
    padding-top: 5px;
    margin-bottom: 0;
    font-weight: 600;
    margin-top: 0;
}
.AddImagePane > .intro ul li a span {
    color: #959595;
    display: block;
}
.panes a {
    text-decoration: none;
}
.clipart:hover,
.upload:hover {
    text-decoration: none;
}
.AddImagePane > .intro ul li a.upload {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMyIDMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yNy41ODYsMTIuNzEyQzI2LjY2LDEwLjI1MSwyNC4yODQsOC41LDIxLjUsOC41Yy0wLjY0MSwwLTEuMjYsMC4wOTMtMS44NDYsMC4yNjYgICAgQzE4LjA2OCw2LjIwNSwxNS4yMzMsNC41LDEyLDQuNWMtNC45MDQsMC04Ljg5NCwzLjkyNC04Ljk5OCw4LjgwM0MxLjIwNywxNC4zNDIsMCwxNi4yODMsMCwxOC41YzAsMy4zMTIsMi42ODgsNiw2LDZoNnYtMkg1Ljk5NyAgICBDMy43OTQsMjIuNSwyLDIwLjcwOSwyLDE4LjVjMC0xLjg5MywxLjMxNy0zLjQ4MiwzLjA4Ny0zLjg5NkM1LjAyOSwxNC4yNDUsNSwxMy44NzYsNSwxMy41YzAtMy44NjYsMy4xMzQtNyw3LTcgICAgYzMuMTYyLDAsNS44MzQsMi4wOTcsNi43MDIsNC45NzVjMC43NjktMC42MTEsMS43MzktMC45NzUsMi43OTgtMC45NzVjMi4zMTYsMCw0LjIyNSwxLjc1LDQuNDczLDRoMC4wMyAgICBjMi4yMDMsMCwzLjk5NywxLjc5MSwzLjk5Nyw0YzAsMi4yMDUtMS43ODksNC0zLjk5Nyw0SDIwdjJoNmMzLjMxMiwwLDYtMi42OTMsNi02QzMyLDE1LjczNSwzMC4xMywxMy40MDcsMjcuNTg2LDEyLjcxMnoiIGZpbGw9IiMwMDAwMDAiLz4KCQk8cG9seWdvbiBwb2ludHM9IjE2LDEzLjUgMTEsMTkuNSAxNCwxOS41IDE0LDI3LjUgMTgsMjcuNSAxOCwxOS41IDIxLDE5LjUgICAiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
}
.intro {
    display: none;
}
.introActive {
    display: block !important;
}
#clipArtCollection {
    display: none;
}
.clipArtCollectionActive {
    display: inline-block !important;
}
.artList {
    overflow-y: auto;
    height: 340px;
}
.artHeader {
    font-size: 16px;
    padding: 15px;
}
#clipArtCollection .scroller {
    position: relative;
    padding-bottom: 50px;
    -webkit-overflow-scrolling: touch;
}
#clipArtCollection .scroller > .item {
    max-width: 18%;
    float: left;
    margin: 1%;
    padding: 5px;
    cursor: pointer;
}
.cntfront {
    width: auto !important;
    height: auto !important;
}
.cntback {
    width: auto !important;
    height: auto !important;
}
.cntleft {
    width: auto !important;
    height: auto !important;
}
.cntright {
    width: auto !important;
    height: auto !important;
}
.cnttop {
    width: auto !important;
    height: auto !important;
}
.cntbottom {
    width: auto !important;
    height: auto !important;
}
.ui-wrapper {
    min-width: 40px !important;
}
.blocks .uploadclipart .ui-resizable {
    width: 40px !important;
}
.logoImg {
    height: 67px;
    float: right;
    width: auto;
}
.buttonImage {
    width: 260px;
}
.buttonpopup {
    width: 150px;
}
.btn.resetButton {
    height: 42px;
    line-height: 1;
}
.textControls button.btn.large.rotate-btn {
    height: 42px;
    line-height: 1;
    width: 113px;
}
button#saved-artwork-btn {
    height: 42px;
}
.saved-artwork-popup button.close-artwork {
    border-radius: 18px;
    padding: 6px;
    padding-top: 1px;
    position: absolute;
    top: -18px;
    padding-left: 8px;
    padding-right: 8px;
    right: -12px;
    z-index: 999;
}
.textControls .saved-artwork-popup {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 13px;
    padding-left: 12px;
    margin-top: 10px;
    padding-right: 12px;
}
.catalog-product-view .modal-popup .modal-title {
    border: 0;
}
.catalog-product-view .modal-popup #popup-mpdal .modal-header > .close {
    display: none;
}
.catalog-product-view .modal-header .action-close {
    height: 40px;
    background: #fff;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transform: translate(25%, -25%);
}
.catalog-product-view .modal-header .action-close:before {
    font-size: 20px;
    color: #b0adac;
    line-height: 1.3;
}
.add-image-nav {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}
.textControls > .add-artwork {
    position: relative;
    display: inline-block;
}
.product-add-form .box-tocart .action.tocart {
    margin-left: 0;
}
.cart.table-wrapper .col.qty .input-text + .mage-error {
    position: absolute;
}
.qty-holder {
    padding: 0 0 10px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}
.qty-holder > * {
    margin: 10px 0;
}
.qty-holder .btn-cart {
    border: 0;
    padding: 0;
    background-color: transparent;
    height: 40px;
}
.qty-holder #quantity:hover {
    background-color: transparent;
}
.qty-holder #quantity {
    height: 40px;
}
.qty-holder .btn-cart a {
    display: block;
}
.qty-holder .btn-cart img {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
@media (max-width: 1199px) {
    .buttonImage {
        width: 225px;
    }
}
@media (max-width: 991px) {
    .product-add-form .product-options-bottom .box-tocart > .fieldset {
        flex-direction: column;
    }
    .boxDesign {
        margin-bottom: 15px;
    }
    .textControls {
        padding-left: 0;
    }
    .textControls,
    .boxDesign {
        width: 100%;
        flex: 0 0 100%;
    }
}
@media (max-width: 767px) {
    .boxDesign {
        float: initial;
    }
    .buttonImage {
        width: 190px;
    }
    .catalog-product-view .modal-header .action-close {
        height: 40px;
        width: 40px;
        transform: translate(0, 0);
    }
    .cart.table-wrapper .col.qty .input-text + .mage-error {
        white-space: nowrap;
        transform: translateX(-50%);
    }
    .catalog-product-view .modal-popup .modal-content {
        padding-left: 0;
        padding-right: 0;
    }
    .catalog-product-view .modal-content {
        margin-top: 50px;
    }
}
@media (max-width: 576px) {
    .logoImg {
        display: none;
    }
    .catalog-product-view .modal-popup .modal-title {
        margin: 0;
    }
    button.btn.large.rotate-btn {
        margin-top: 10px;
    }
    ._3dbox {
        margin-top: 80px;
    }
}
._3dface {
    overflow: hidden;
    position: absolute;
    border: 1px solid #b07c38;
    box-shadow:
        inset 0 0 0px 0px rgba(0, 0, 0, 0.1),
        0 0 0px rgba(0, 0, 0, 0.3);
    color: #333;
    opacity: 0.7;
}
.brown_e_texture {
    opacity: 1;
}
.brown_texture {
    opacity: 1;
}
.white_e_texture {
    opacity: 1;
    background-color: transparent !important;
    background-image: url("../../images/white_e_texture.jpeg");
    background-size: cover;
}
.white_texture {
    opacity: 1;
    background-color: transparent !important;
    background-image: url("../../images/white_texture.jpeg");
    background-size: cover;
}
._3dface--top {
    height: var(--width);
    width: var(--depth);
    bottom: 100%;
    position: absolute;
    background-color: #d6a970;
    transform: translateY(50%) rotateX(90deg);
}
._3dface--bottom {
    height: var(--width);
    width: var(--depth);
    top: 100%;
    position: absolute;
    background-color: #d6a970;
    transform: translateY(-50%) rotateX(-90deg);
    box-shadow: 5px 2px 43px rgba(0, 0, 0, 1);
}
._3dface--bottom--cuttings {
    position: absolute;
    width: 8px;
    height: 30px;
    background-color: #444343;
}
._3dface--bottom--top-left {
    top: 20px;
    left: 0;
}
._3dface--bottom--top-right {
    top: 20px;
    right: 0;
}
._3dface--bottom--bottom-left {
    bottom: 20px;
    left: 0;
}
._3dface--bottom--bottom-right {
    bottom: 20px;
    right: 0;
}
.element-hide {
    display: none;
}
.inner-box {
    display: block;
    overflow: auto;
    height: 88%;
    margin-top: 20px;
}
.inner-box-container {
    width: 100%;
    display: grid;
    margin-top: 25px;
    margin-bottom: 35px;
}
.inner-box-wrapper-align {
    display: grid;
    margin: 0 auto;
    padding-right: 20px;
}
.section_1 {
    display: inline-flex;
    margin-left: 135px;
}
.disabled-section {
    height: 70px;
    width: 60px;
    background-color: #8c7656;
}
.section_1_content {
    height: 70px;
    width: 200px;
    background-color: #ccb38e;
    border: 1px dashed #7c5d2e;
    box-sizing: border-box;
    position: relative;
}
.section_1_content:hover {
    border: 2px solid #983838;
}
.section_2 {
    display: inline-flex;
    margin-left: 57px;
}
.section_1_content:hover {
    border: 2px solid #983838;
}
.section_2_content_1 {
    height: 100px;
    width: 70px;
    background-color: #ccb38e;
    border: 1px dashed #7c5d2e;
    box-sizing: border-box;
}
.section_2_content_1:hover {
    border: 2px solid #983838;
}
.section_2_content_2 {
    height: 100px;
    width: 70px;
    background-color: #ccb38e;
    border: 1px dashed #7c5d2e;
    border-left: 0;
    box-sizing: border-box;
}
.section_2_content_2:hover {
    border: 2px solid #983838;
}
.section_2_content_3 {
    height: 100px;
    width: 195px;
    background-color: #ccb38e;
    box-sizing: border-box;
}
.section_2_content_3:hover {
    border: 2px solid #983838;
}
.section_2_content_4 {
    height: 100px;
    width: 70px;
    background-color: #ccb38e;
    border: 1px dashed #7c5d2e;
    border-right: 0;
    box-sizing: border-box;
}
.section_2_content_4:hover {
    border: 2px solid #983838;
}
.section_2_content_5 {
    height: 100px;
    width: 70px;
    background-color: #ccb38e;
    border: 1px dashed #7c5d2e;
    box-sizing: border-box;
}
.section_2_content_5:hover {
    border: 2px solid #983838;
}
.section_3 {
    display: inline-flex;
    margin-left: 135px;
}
.section_3_content {
    height: 70px;
    width: 200px;
    background-color: #ccb38e;
    box-sizing: border-box;
    border: 1px dashed #7c5d2e;
    border-bottom: 0;
}
.section_3_content:hover {
    border: 2px solid #983838;
}
.section_4 {
    display: inline-flex;
    margin-left: 135px;
}
.section_4_content_1 {
    height: 100px;
    width: 60px;
    background-color: #ccb38e;
    box-sizing: border-box;
    border-radius: 100% 0 0 100%/8% 0% 0% 11%;
}
.section_4_content_2 {
    height: 100px;
    width: 200px;
    background-color: #ccb38e;
    border: 1px dashed #7c5d2e;
    border-bottom: 0;
    box-sizing: border-box;
}
.section_4_content_2:hover {
    border: 2px solid #983838;
}
.section_4_content_3 {
    height: 100px;
    width: 60px;
    background-color: #ccb38e;
    border-radius: 0 100% 100% 0/0% 9% 12% 0%;
}
.section_5 {
    display: inline-flex;
    margin-left: 135px;
}
.section_5_content_1 {
    height: 70px;
    width: 60px;
    background-color: #ccb38e;
    border-radius: 10% 0 0 100%/10% 10% 0% 90%;
}
.section_5_content_2 {
    height: 70px;
    width: 200px;
    background-color: #ccb38e;
    border: 1px dashed #7c5d2e;
    box-sizing: border-box;
}
.section_5_content_2:hover {
    border: 2px solid #983838;
}
.section_5_content_3 {
    height: 70px;
    width: 60px;
    background-color: #ccb38e;
    border-radius: 89% 11% 100% 0/0% 14% 86% 100%;
}
.section_1_content .img {
    width: 100%;
    height: 100%;
}
.section_2_content_1 .img {
    width: 100%;
    height: 100%;
}
.section_2_content_2 .img {
    width: 100%;
    height: 100%;
}
.section_2_content_3 .img {
    width: 100%;
    height: 100%;
}
.section_2_content_4 .img {
    width: 100%;
    height: 100%;
}
.section_2_content_5 .img {
    width: 100%;
    height: 100%;
}
.section_3_content .img {
    width: 100%;
    height: 100%;
}
.section_4_content_2 .img {
    width: 100%;
    height: 100%;
}
.section_5_content_2 .img {
    width: 100%;
    height: 100%;
}
#box_section_image_1,
#box_section_image_2,
#box_section_image_3,
#box_section_image_4,
#box_section_image_5,
#box_section_image_6,
#box_section_image_7,
#box_section_image_8,
#box_section_image_9 {
    width: 100% !important;
    height: 100% !important;
}
.content-hidden {
    overflow: hidden;
}
.image-placement-portion {
    display: inline-flex;
    width: 75px;
    padding: 4px 20px;
    box-sizing: content-box;
    border: 3px solid #f3f3f3;
    margin: 5px;
    background-color: #fff;
    border-radius: 10px;
}
.image-placement-portion.active {
    background-color: #f4f4f4;
    border: 2px solid #dadada;
}
.set-inner-box-design {
    line-height: 5px !important;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}
.inner-box-wrapper-align.white .section-content {
    background-color: #fff;
    border-color: #ff7f7f;
}
.inner-box-wrapper-align.white .disabled-section,
.inner-box-wrapper-align.white .section_4_content_1,
.inner-box-wrapper-align.white .section_4_content_3,
.inner-box-wrapper-align.white .section_5_content_1,
.inner-box-wrapper-align.white .section_5_content_3 {
    background-color: #ecebeb;
}
.box-helper {
    position: absolute;
    top: 70px;
    height: 20px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    color: #000;
    padding-left: 30px;
    animation: blinker 3s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
.only-outside-print .box-portion.outer-box-tab.active,
.only-inside-print .box-portion.inner-box-tab.active {
    width: 100%;
}
.disabled-inside-print:hover {
    border: 1px dashed #7c5d2c;
}
.static-msg {
    color: red;
    font-weight: 500;
    vertical-align: middle;
    transition: color 0.3s ease;
}
.static-msg a {
    color: red;
}