.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;
}

/* #artpopup button.button {
    width: 225px;
    margin-left: -20px;
	height: 50px;
} */

.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: rgb(214, 169, 112);
	transform: translateY(50%) rotateX(90deg);
}

._3dface--bottom {
	height: var(--width);
	width: var(--depth);
	top: 100%;
	position: absolute;
	background-color: rgb(214, 169, 112);
	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: rgb(214, 169, 112);
	transform: translateX(-50%) rotateY(90deg);
}

._3dface--left {
	width: var(--width);
	height: 100%;
	left: 0%;
	position: absolute;
	background-color: rgb(214, 169, 112);
	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: rgb(214, 169, 112);
	transform: rotateX(90deg);
	transform-origin: center top;
}

._3dface--back {
	height: var(--height);
	width: var(--depth);
	top: 100%;
	position: absolute;
	background-color: rgb(214, 169, 112);
	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: none !important;
}

.boxDesign:before,
.boxDesign:after {
	content: "";
	position: absolute;
	z-index: -1;
	/* -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8); */
	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: bold;
	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: 0px;
	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: bold;
}

.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: 0px !important;
	background: none !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: bold;
}

.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: 0px;
	line-height: 2.3;
}

.ui-draggable {
	/*width: 100% !important;*/
	cursor: move;
}

.pattern {
	display: inline-block;
	width: 100px;
	height: 75px;
	padding: 4px;
}

.activeColor {
	/* border: 1px solid #deedee; */
	/* box-shadow: 0px 0px 0px 0px rgb(62, 150, 155), 0px 0px 6px 0px rgb(62, 150, 155); */
}

.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: white;
	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 0px;
	border-radius: 5px;
	top: 35px;
	right: 0px;
	box-shadow: 1px 1px 3px #bcb6b6;
}

/* ---------------- Loading Cube ------------- */
.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);
	}
}

/* ----------- Loading Cube ends here ---------*/

/* .modal.fade .modal-dialog {
	transform: translate(0,-14%) !important;
} */

.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%;
	}

	/* .shippingBoxContainer {
		display: block;
	}
	
	.modal-content{
		margin-top: 90px !important;
	} */
}

@media only screen and (max-width: 425px) {
	/* .btnBoxSideSelector {
		display: grid;
	} */

	.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: 0px;
	}

	.boxDesign {
		min-height: 350px;
	}

	.resetDesignBtn {
		margin-left: 10px !important;
	}
}
/****************************** Range Slider ***********************************/
.zoomMain {
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.zoomContainer {
	/* position: absolute;
    left: -30px;
	bottom: 140px; */
}

#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 white;
	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;
}

/*hide the outline behind the border*/
#boxZoom:-moz-focusring {
	outline: 1px solid white;
	outline-offset: -1px;
}

#boxZoom:focus::-moz-range-track {
	background: #ccc;
}

#boxZoom::-ms-track {
	height: 3px;
	background: transparent;
	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 rgb(193, 177, 177), 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;
}
/*._3dface--back {
	width: 98px !important;
}
._3dface--front {
	width: 98px !important;
}
._3dface--top {
	width:98px !important;
}
._3dface--top {
	width:98px !important;
}
._3dface--bottom {
	width:98px !important;
}*/
.logoImg {
	height: 67px;
	float: right;
	width: auto;
}
.buttonImage {
	width: 260px;
}
.buttonpopup {
	width: 150px;
}
.btn.resetButton {
	height: 42px;
	line-height: 1;
	/* margin-left: 150px;
    margin-top: -42px; */
}
.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;
}

/* custom */
.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 0;
	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);
	}
	/* .btnBoxSideSelector {
		flex-wrap: initial;
	} */
	.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;
	/*background-color: transparent !important;
	background-image: url("../../images/brown_e_texture.webp");
	background-size: cover;*/
}

.brown_texture {
	opacity: 1;
	/*background-color: transparent !important;
	background-image: url("../../images/brown_texture.jpeg");
	background-size: cover;*/
}

.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: rgb(214, 169, 112);
	transform: translateY(50%) rotateX(90deg);
}

._3dface--bottom {
	height: var(--width);
	width: var(--depth);
	top: 100%;
	position: absolute;
	background-color: rgb(214, 169, 112);
	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: rgb(68, 67, 67);
}

._3dface--bottom--top-left {
	top: 20px;
	left: 0px;
}

._3dface--bottom--top-right {
	top: 20px;
	right: 0px;
}

._3dface--bottom--bottom-left {
	bottom: 20px;
	left: 0px;
}

._3dface--bottom--bottom-right {
	bottom: 20px;
	right: 0px;
}

.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: 0px;
	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: 0px;
	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: 0px;
}

.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: 0px;
	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: white;
	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: rgb(236, 235, 235);
}
.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%;
}