input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #f5b0a7;
}
input[type=range]::-webkit-slider-thumb {
  height: 16px;
  width: 8px;
  background-color: #ff4445;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #f5b0a7;
}
input[type=range]:focus::-webkit-slider-thumb {
	background-color: #000;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #f5b0a7;
}
input[type=range]::-moz-range-thumb {
  height: 16px;
  width: 8px;
  background: #ff4445;
  cursor: pointer;
}
input[type=range]::-ms-track {
	width: 100%;
	height: 8px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
}
input[type=range]::-ms-fill-lower {
  	background: #2a6495;
}
input[type=range]::-ms-fill-upper {
  	background: #3071a9;
}
input[type=range]::-ms-thumb {
	height: 16px;
	width: 8px;
	background: #ff4445;
	cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  	background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  	background: #367ebd;
}


.changeroom-section{
	background-color: #f3f1ed !important;
}
.changeroom-section h2{ font-weight: 500 }


#changeRoomForm{ display: none }

#changeRoomForm .back{
  color: #ff4445;
}
#changeRoomForm .back a{ text-decoration: none }
#changeRoomForm .back a span { font-weight: 500 }

.changeRoom-controls {
	display: flex;
	pointer-events: auto;
	cursor: pointer;
}
.changeRoom-controls.disabled {
	pointer-events: none;
	opacity: 0.5;
	cursor: default;
}
.changeRoom-controls:hover {

}
.shadow-box.bg-top-left.info-box{
	background-color: #fce0db !important;
	top: 0;
	left: 0;
	min-height: 350px;
	width: 95%;
	padding-top: 200px !important;
}
.shadow-box.bg-top-left.info-box .no{
	color: #fff;
	font-size: 350px;
	line-height: 51px;
}
.changeroom-section .hide-info{
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 20px;
	text-align: left;
	z-index: 3;
	width: 95% !important;
	background-image: url('../../dist/images/arrow-r.svg');
	background-repeat: no-repeat;
	background-position: 90% 50%
}
.shadow-box.bg-top-left.info-box .txt{
	margin-top: -100px;
}
.shadow-box.bg-top-left.info-box p{
	font-size: 1.2rem;
	line-height: 1.4rem;
}
.shadow-box.bg-top-left.info-box:before, .shadow-box.bg-top-left.shadow-white:before{
	background-color: #fff !important;
	height: calc(100% - 16px) !important;
}
.changeRoom-productitem{
  cursor: pointer;
}
.changeRoom-productitem.active.shadow-white:before{
	background-color: #ff4445 !important;
}
.changeRoom-productitem:hover{
	opacity: 0.8;
}
.changeRoom-productitem .txt{
	position: absolute;
	bottom: 20px;
	left: 20px;
}
.changeRoom-controls div div{
	background: #fff;
	font-size: 0.8rem;
	line-height: 1.3;
	font-weight: 600;
	text-transform: uppercase;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 55px;
	height: 100%;
}

.changeRoom-controls div input {
  margin-top: auto;
}

.changeRoom-controls div.disabled { background-color: #fff !important; }
.changeRoom-controls div.hover:hover { background-color: #fce0db }
#saveControl{ background-image: url(../img/icon-download.png); background-repeat: no-repeat; background-position: 90% 50%; }
#mirrorControl{ background-image: url(../img/icon-mirror-image.png); background-repeat: no-repeat; background-position: 90% 50%; }
#markerControl{ background-image: url(../img/icon-hide-marker.png); background-repeat: no-repeat; background-position: 90% 50%; }
#shareControl{ background-image: url(../img/icon-copy.png); background-repeat: no-repeat; background-position: 90% 50%; }

.changeRoom-imgshadow {
	width: 540px;
	min-height: 745px;
	margin-left: auto

}
.changeRoom-imgbox {
	/*height: 100%;*/
	position: relative;
	background: #ececee;
	max-width: 100%;
}
.changeRoom-productsbox {
	position: relative;
}
.changeRoom-productitem{
	margin-bottom: 32px;
}
.two-columns { 
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.two-columns .changeRoom-productitem{
	width: calc(50% - 16px);
}
.two-columns .changeRoom-productitem:before{
	top: -8px !important;
	left: -8px !important;
	height: calc(100% - 4px) !important;
}
.two-columns .changeRoom-productitem:hover.bg-top-left img {
    transform: translate(-8px,-8px) !important;
}
.two-columns .shadow-box.bg-top-left.shadow-white:before{ 
	height: calc(100% - 4px) !important;
}
.two-columns .shadow-box.bg-top-left.info-box:before{
	height: calc(100% - 8px) !important;
}


canvas {
	width: 540px !important;
	height: 745px !important;
	touch-action: none;
	user-select: none;
	max-width: 100% !important;
}
.upload{
	position: absolute;
	top: 0;
	left: 0;
}
*[type=range] { position: relative; top: 4px }

.changeRoom-variantsbox{ 
	margin-left: -16px; 
	display: flex;
	flex-wrap: wrap;
}
.changeRoom-variantitem{
	/*border-left: 4px solid #f4f4f5;
	border-top: 4px solid #f4f4f5;*/
	width: 169px;
	height: 169px;
	overflow: hidden;
	margin: 0 0 16px 16px;
	position: relative;
}
.changeRoom-variantitem.active{
	/*border-left: 4px solid #ff4445;
	border-top: 4px solid #ff4445;*/
}
.changeRoom-variantitem:hover img{
	opacity: 0.8;
}
.changeRoom-variantitem:before{
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
}
.changeRoom-variantitem:after{
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	background: #f4f4f5;
	position: absolute;
	top:8px;
	left: 8px
}
.changeRoom-variantitem.active:before{
	background: #ff4445;
	margin: -8px 0 0 -8px;
}
.changeRoom-variantitem img{
	width: 100%;
	top:8px;
	left: 8px;
	position: absolute;
	z-index: 1
}

.uploader {
	display: block;
	clear: both;
	margin: 0 auto;
	width: 100%;
}
#fileDrag {
	width: 100%;
	height: 100%;
	display: block;
	background: rgba(255,255,255, 0.2);
	transition: all .2s ease;
	user-select: none;
	position: absolute;
	z-index: 2
}
#fileDrag.change{
	width: 180px;
	height: 50px;
	/*bottom:0;*/
	/*right: 0;*/
}
#fileDrag .dragover-info{ display:none; font-size: 20px; font-weight: bold; text-align: center; margin-top: 50px; }
#fileDrag.dragover .dragover-info{ display: block }
#fileDrag:hover, #fileDrag.dragover {
	background: rgba(255,255,255, 0.4);
	cursor: pointer;
}

#fileDrag .change-file{ display: none;}

#fileDrag .error{
	color: red;
	display: none;
	background: none;
	text-align: center
}

#fileDrag.change .change-file{ display: block;}
#fileDrag.change .add-file{ display: none;}
#fileDrag > div{ background-image: url(../img/icon-add-file.png); background-repeat: no-repeat; background-position: calc(100% - 1rem) 1rem }
#fileDrag.change > div{ background-position: calc(100% - 1rem) 0.5rem }

.hidden{ display: none; }


#loaderBox, #loaderBox2{
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	z-index: 3;
	width: 100%;
	height: 100%;
	display:none;
}

input[type="file"] {
	display: none;
}

#changeRoom-categories{ width: 100%; }

#sharePopup{
	background: #fce0db;
	width: 100%;
	/*position: absolute;
	top: 0;
	left: 200px;
	z-index: 1000;*/
	padding: 10px;
	display: none;
	position: relative;
}

#sharePopup .copy-txt, #sharePopup .link-box{ display: none; }
#sharePopup img{ cursor: pointer; }

.select2-dropdown{ border:0 !important; border-top: 1px solid #f3f1ed !important; }

@media (max-width: 1400px) {
	/*.changeRoom-controls div { width: 160px; }*/
}
@media (max-width: 1200px) {
	/*.changeRoom-controls div { width: 30%; margin: 5px 5%;  }*/
	.changeRoom-imgshadow{ margin-right:auto; }

	.two-columns .changeRoom-productitem{	width: 100% !important;	}
	.two-columns .changeRoom-productitem:before{
		top: -16px !important;
		left: -16px !important;
		height: calc(100% - 8px) !important;
	}
	.two-columns .changeRoom-productitem:hover.bg-top-left img {   transform: translate(-16px,-16px) !important;}

	.two-columns .shadow-box.bg-top-left.info-box:before{height: calc(100% - 16px) !important;	}
}
@media (max-width: 550px) {
	.changeRoom-imgbox{ overflow: hidden; }
	.canvas-container, canvas, .changeRoom-imgshadow {width: 330px !important; min-height: 455px !important; max-width:100%;}
	.canvas-container, canvas{ height: 455px !important }
	.shadow-box.bg-top-left:before{ top:0; left:0; }

	/*.changeRoom-controls div { width: 40%;  }*/
	/*.changeRoom-controls div:nth-child(5), .changeRoom-controls div:nth-child(6) { width: 90%; margin: 5px 0;  }*/

	.change-room__add-to-cart{ letter-spacing: 0.1px !important; font-weight: 500 !important; font-size:16px !important; }
	.changeRoom-variantsbox{ justify-content: space-between; }
	.changeRoom-variantitem{ width: 43%;}
}