h1 {
    font-size: 22px;
}
.white-box {
	background: #fff;
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 10px;
}
.svg svg {
	background-image: linear-gradient(45deg, #b0b0b0 25%, transparent 25%), linear-gradient(-45deg, #b0b0b0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #b0b0b0 75%), linear-gradient(-45deg, transparent 75%, #b0b0b0 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.font{
	padding: 5px 11px;
	border: 1.5px solid #e8e5dc;
	border-radius: 20px;
	font-size: 12px;
	cursor: pointer;
	transition: all .15s;
	background: #fff;
	-webkit-tap-highlight-color: transparent;
	display: inline-block;
	margin-bottom: 10px;
}
.font.active{
	background: #1a1917;
	color: #fff;
	border-color: #1a1917;
}
.change-color{
	border-radius: 50%;
	width: 20px;
	height: 20px;
	margin-bottom: 10px;
	display: inline-block;
	vertical-align: top;
}
.change-color-wrapper{
	border-radius: 50%;
	width: 20px;
	height: 20px;
	margin-bottom: 10px;
	display: inline-block;
	vertical-align: top;
	background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
#change-color {
	-webkit-appearance: none;
	padding: 0;
	border: 1px solid;
	border-radius: 10px;
	width: 20px;
	height: 20px;
	margin-bottom: 10px;
	vertical-align: top;
	background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
	opacity: 0;
}
#change-color::-webkit-color-swatch {
  border: none;
  border-radius: 10px;
  padding: 0;
}
.change-color{
	border: 1px solid #ccc;
	border-radius: 50%;
}
.change-background-color{
	border-radius: 50%;
	width: 20px;
	height: 20px;
	margin-bottom: 10px;
	display: inline-block;
	vertical-align: top;
	border: 1px solid #ccc;
	border-radius: 50%;
}
.change-background-color-wrapper{
	border-radius: 50%;
	width: 20px;
	height: 20px;
	margin-bottom: 10px;
	display: inline-block;
	vertical-align: top;
	background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
#change-background-color {
	-webkit-appearance: none;
	padding: 0;
	border: 1px solid;
	border-radius: 10px;
	width: 20px;
	height: 20px;
	margin-bottom: 10px;
	vertical-align: top;
	background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
	opacity: 0;
}
#change-background-color::-webkit-color-swatch {
	border: none;
	border-radius: 10px;
	padding: 0;
}
.next-step{
	border-radius: 20px;
	margin-top: 20px;
}
.prev-step{
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: #5c5a55;
	margin-bottom: 13px;
	padding: 5px 0;
	text-decoration: none!important;
}
.prev-step::before {
	content: '←';
}
.size-select{
	padding: 6px 13px;
	border: 1.5px solid #e8e5dc;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all .15s;
	background: #fff;
	-webkit-tap-highlight-color: transparent;
	display: inline-block;
	margin-bottom: 10px;
}
.size-select.active{
	background: #1a1917;
	color: #fff;
	border-color: #1a1917;
}
.cart-info,
.checkout-info{
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #5c5a55;
	padding: 3px 0;
}
.cart-info span,
.checkout-info span{
	align-items: center;
	display: flex;
}
.choosenumber {
	float: right;
	overflow: hidden;
	position: relative;
	border: 1px solid #dfdfdf;
	background: #fff;
	border-radius: 3px;
	line-height: 32px;
	font-size: 14px;
	color: #333;
	margin: 5px 0 5px 0;
}
.decrease {
	float: left;
	border-right: 1px solid #dfdfdf;
	background: #fff;
	width: 32%;
	height: 32px;
	position: relative;
	pointer-events: none;
}
.decrease.active {
	pointer-events: auto;
	cursor: pointer;
}
.decrease i {
	width: 12px;
	height: 2px;
	background: #ccc;
	display: block;
	margin: 15px auto;
}
.decrease.active i {
	background: #288ad6;
}
.increase {
	float: right;
	border-left: 1px solid #dfdfdf;
	background: #fff;
	width: 32%;
	height: 32px;
	position: relative;
	cursor: pointer;
}
.increase i:first-child {
	width: 12px;
	height: 2px;
	background: #288ad6;
	display: block;
	margin: 15px auto;
}
.increase i:nth-child(2) {
	width: 2px;
	height: 12px;
	background: #288ad6;
	display: block;
	margin: 0 auto;
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
}
#number {
	font-size: 14px;
	color: #333;
	float: left;
	width: 33%;
	height: 32px;
	text-align: center;
	outline: none;
	border: none;
}
.featured-number {
	font-size: 28px;
	font-weight: 700;
	color: #e8593c;
}
.radio>.box, #select-voucher-modal .radio>.box {
	border: 1px solid #9e9e9e;
}
.radio>.box {
	display: inline-block;
	background-color: #fff;
	-ms-border-radius: 50%;
	border-radius: 50%;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	vertical-align: middle;
	margin-right: 5px;
}
input[type="radio"]:checked+label>.box:before{
	content: '';
	background-color: #fd761a;
	width: 8px;
	height: 8px;
	-ms-border-radius: 50%;
	border-radius: 50%;
	display: block;
	margin: 3px auto;
}
input[type="radio"]{
	-ms-opacity: 0;
	opacity: 0;
	width: 0;
	height: 0;
	border: 0;
	display: none;
}
.texterror {
	font-size: 12px;
	color: #dd4b39;
}

.payment-method-description {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 5px;
	margin: 5px 0;
	font-size: .92em;
	border-radius: 2px;
	line-height: 1.5;
	background-color: #dfdcde;
	color: #515151;
	display: none;
	opacity: 0;
	-moz-transition: max-height .5s ease-in-out;
	-ms-transition: max-height .5s ease-in-out;
	-o-transition: max-height .5s ease-in-out;
	-webkit-transition: max-height .5s ease-in-out;
	transition: max-height .5s ease-in-out;
	max-height: 1000px;
	height: auto;
}
input[name="payment_method"]:checked ~ .payment-method-description {
	display: block;
	opacity: 1;
	max-height: 1000px;
}
.show-select_address {
	display: block;
	cursor: pointer;
	color: #19a896;
}
.select_address-wrapper {
	display: block;
}
.edit-image{
	position: fixed;
	z-index : 1300;
	inset : 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0, 0, 0.5);
	-webkit-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	opacity: 0;
}
.edit-image > div{
	background: #fff;
	width: 100%;
	height: 100%;
	-webkit-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	transform: scale(0);
}
.edit-image .close-btn{
	background-color: #fff;
	border: 1px solid #d4d3d4;
	border-radius: 50%;
	width: 46px;
	height: 46px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	padding: unset;
	color: #8c8c8c;
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
	padding: 10px;
	position: fixed;
	z-index: 2000;
	top: 25px;
	right: 25px;
	-webkit-animation: fade-in .2s .1s forwards;
	animation: fade-in .2s .1s forwards;
}
.edit-image div.wrapper {
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: center;
	justify-content: center;
	height: 100%;
	display: -webkit-flex;
	display: flex;
	align-items: center;
}
@media (min-width: 960px){
	.edit-image div.wrapper  {
		min-width: 600px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
}
@media (max-width: 960px){
	.edit-image div.wrapper  {
		-webkit-flex-direction: column;
		flex-direction: column;
		justify-content: center;
		margin-top: -70px;
	}

}
.edit-image div.wrapper .column:first-child {
	-webkit-align-items: center;
	align-items: center;
}
.edit-image div.wrapper .column {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.edit-image div.wrapper .buttons {
	margin-top: 30px;
	margin-left : 60px;
	margin-right : 60px;
}
.edit-image .btn-lg {
	width: 240px;
}
#crop-image-wrapper{
	overflow: hidden;
	z-index: 999;
}
#cropbox{
	max-height: 400px;
	max-width: 400px;
	display: none;
}
.slidecontainer {
	padding-top: 20px;
	width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 3px solid #4CAF50;
	background: #fff;
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 3px solid #4CAF50;
	background: #fff;
	cursor: pointer;
}
.slidecontainer .cropper-text {
	margin-top: 10px;
	text-transform: uppercase;
	font-size: 12px;
	color: #8c8c8c;
	font-weight: 700;
	letter-spacing: 1.6px;
	z-index: 2;
	text-align: center;
}

@media (max-width: 768px){
	.function{
		display: none;
	}
	.mobile-product-function,
	.mobile-edit-image{
		display: flex;
		flex-flow : column;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		box-shadow: 0 0 8px rgb(0 0 0 / 30%);
		z-index: 11;
		transition: all 5s;
		justify-content: center;
		align-items: center;
	}
	.edit-image div.wrapper .buttons{
		display : none;
	}
	.edit-image .close-btn{
		display: none;
	}
	.edit-image .mobile-close-button{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #ccc;
		box-shadow: 0 0 10px rgb(0 0 0 / 30%);
		font-weight: bold;
	}
	.edit-image .mobile-close-button>svg{
		position: absolute;
		margin: 17px 15px;
		top: 0;
		left: 0;
	}
	.edit-image .mobile-close-button>a{
		position: absolute;
		margin: 17px 15px;
		top: 0;
		right: 0;
		height: 16px;
		line-height: 16px;
		text-decoration: none;
		cursor: pointer;
	}
	.bottom-choices{
		flex-basis: 0px;
		transition: flex-basis 0.2s ease 0s, -webkit-flex-basis 0.2s ease 0s;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgb(247, 247, 247);
		width: 100%;
	}
	.bottom-choices.selected{
		flex-basis: 50px;
	}
	.bottom-btn{
		padding: 15px;
		display: flex;
		width: 100%;
		justify-content: center;
	}
	.add-photo-btn, .checkout-btn{
		padding: 0;
		margin: 0;
		width: 100%;
		max-width: 400px;
	}
	.toggle-choices{
		justify-content: space-around;
		margin: 0px 18px;
		font-size: 12px;
		display: flex;
		align-items: center;
		width: 100%;
	}
	.style-chooser{
		align-items: center;
		justify-content: center;
		flex-basis: 50%;
		font-weight: 700;
		text-transform: uppercase;
		padding: 18px 0px 0px;
		display: flex;
		align-items: center;
	}
	.style-chooser.selected{
		color: #19a896;
		fill: #19a896;
	}
	.product-function .icons img{
		width: 35px;
	}
	.edit-image.show > div  {
		transform: unset;
	}
	.footer{
		margin-bottom: 120px;
	}

	.fab-wrapper{
		bottom: 120px !important;
	}
	.fab{
		bottom: 10px !important;
	}
	.fab-wheel{
		bottom:  15px !important;
	}
}
.thumbnail .close{
	position: absolute;
	right: 6px;
	top: 0px;
}

@media (min-width: 768px) {
	.edit-image > div  {
		position: absolute;
		background: #fff;
		max-width: 1000px;
		margin: auto;
		top: 50%;
		left: 50%;
		padding: 20px 50px;
		transform: translate(-50%,-50%) scale(0);;
		width: auto;
		height: auto;
	}
	.edit-image.show > div  {
		transform: translate(-50%,-50%) scale(1);
	}
	.edit-image .close-btn{
		top : -25px;
		right : -25px;
	}
	.edit-image div.wrapper .buttons{
		margin-right: 0
	}
}
.edit-image .frame-size {
	color: #333;
	font-size: 21px;
	font-weight: 700;
	margin-bottom: 24px;
	display: none;
}
.edit-image .buttons .frame-size {
	display: block;
}
.mobile-product-function,
.mobile-edit-image,
.mobile-close-button{
	display: none
}
.btn {
	border-radius: 0;
}
#upload-image{
	visibility: hidden;
}
.sticky{
	position: sticky;
	top: 60px;
	z-index: 100;
	right: 0;
}
#preview {
	overflow: hidden;
}
label.material{
	display: flex;
	justify-content: space-between;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 10px;
}
label.material:has(input:checked) {
	border: 1px solid #000;
	background: #faf9f7;
}
label.material div label{
	display: block;
}
label.material span{
	font-style: normal;
	font-weight: normal;
	font-size: 10px;
	color: #9c9a92;
}
.discount{
	background: #faeeda;
	border: 1.5px solid #EF9F27;
	border-radius: 10px;
	padding: 11px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	cursor: pointer;
	transition: background .15s;
	-webkit-tap-highlight-color: transparent;
}
.discount .discount-text >strong{
	font-size: 12.5px;
	font-weight: 600;
	color: #412402;
	display: block;
}
.discount .discount-text >span{
	display: block;
	font-size: 11px;
	color: #633806;
}
.discount .discount-btn{
	flex-shrink: 0;
	background: #ba7517;
	color: #fff;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}
#demo-content{
	overflow: visible;
	display:none;
	width: 95vw;
	padding: 5px;
}
#demo{
	text-align: -webkit-center;
}
.user-select-image{
	width: 50px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 2px;
	margin-top: 3px;
	margin-right: 3px;
	background: #e0e0e0;
}
.user-select-image.active{
	border: 1px solid red;
}
.stepper{
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 10px;
	padding: 13px 18px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .06);
	margin-bottom: 14px;
}
.sgrp {
	display: flex;
	align-items: center;
	gap: 7px;
}
.sline {
	flex: 1;
	height: 1px;
	background: #e8e5dc;
	margin: 0 6px;
}
.sline.active {
	background: #000;
}

.sgrp .step{
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
	transition: all .25s;
	background: #eceae4;
	color: #9c9a92;
}
.sgrp .step.active {
	background: #e8593c;
	color: #fff;
}
.sgrp .text{
	color: #000;
}