/* Containers */

#designer-wrapper {
	display: flex;
	height: 400px;
}

#designer-canvas-tiles {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    width: 300px;
    overflow: auto;
    height: auto;
    background: #f4f4f4;
    padding: 5px;
}
.designer-canvas-content{ width: 100%;}
#designer-canvas-wrapper {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 400px;
	border: 2px solid black;
	background: #ffffff;
	/*background-image: url('../img/designer/wall-tile-17.jpg');
	background-size: 50px 50px;
	background-repeat: repeat;*/
	background-image: url('../img/designer/wall-1.jpg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

#designer-tools-wrapper {
	background: #f4f4f4;
	padding: 5px;display: flex;
}

/* Tiles */

#designer-canvas-tiles .tile {
	width: 70px;
    height: 40px;
	/*background-image: url('../img/designer/wall-tiles.jpg');*/
	/*background-image: url('../img/designer/wall-1.jpg');*/
	background-position: center center;
	background-size: 250px 200px;
	background-repeat: no-repeat;
	cursor: pointer;
	border: 1px solid #ddd;
	transition: transform 0.2s ease-in-out;
}

#designer-canvas-tiles .tile.tile-1 {
	background-image: url('../img/designer/wall-1.jpg');
}

#designer-canvas-tiles .tile.tile-2 {
	background-image: url('../img/designer/wall-2.jpg');
}

#designer-canvas-tiles .tile.tile-3 {
	background-image: url('../img/designer/wall-3.jpg');
}

#designer-canvas-tiles .tile.tile-4 {
	background-image: url('../img/designer/wall-4.jpg');
}

#designer-canvas-tiles .tile.tile-5 {
	background-image: url('../img/designer/wall-5.jpg');
}

#designer-canvas-tiles .tile.tile-6 {
	background-image: url('../img/designer/wall-6.jpg');
}

#designer-canvas-tiles .tile:hover {
	transform: scale(1.1);
}

/* Canvas */

#designer-canvas-wrapper .canvas-size {
	background-color: black;
	color: white;
}

#designer-canvas-wrapper .canvas-size.canvas-size-h {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	padding: 2px 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

#designer-canvas-wrapper .canvas-size.canvas-size-v {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%) rotate(180deg);
	white-space: nowrap;
	padding: 8px 2px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

#designer-canvas.canvas-shadow {
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.8);
}

.canvas-preview {
	padding: 50px;
	border: 1px solid #F3F3F3;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
	text-align: center;
	/*background-image: url('../img/designer/wall-tile-17.jpg');
	background-size: 50px 50px;
	background-repeat: repeat;*/
	background-image: url('../img/designer/wall-1.jpg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Tools */

.designer-tools .designer-tool {
	margin-right: 10px;
	padding: 10px;
	display: inline-block;
}

.designer-tools .designer-tool .container {
	padding: 0px;
}

#designer-font-color {
	display: inline-block;
	width: 80px;
}

/* Variations */

#product-variation-frame-layout .img-cnt {
	width: 40px;
	height: 40px;
}

/** Dev Ovverride **/
#designer-tools-wrapper{text-align:center;}
#designer-tools-wrapper .designer-tools{display: flex;
justify-content: center;}
.designer-tools .designer-tool{margin-right: 0px; padding: 5px;}
.designer-tools .designer-tool select{background: #fff;
border-radius: .25rem;
border: 1px solid #ced4da;
height: 35px;
padding: 0 10px;}
.designer-tools .designer-tool .btn.btn-info{background: #f00;
border-color: #f00;
color: #fff;}
.designer-tools .designer-tool .zoomcontainer{display: flex;
align-items: center;
gap: 10px;
height: 35px;}
.designer-tools .designer-tool .zoomcontainer label{margin:0;}



@media (max-width:768px){
 #designer-tools-wrapper {
  display: block;
 }
 #designer-canvas-tiles{width:100%;}
 #designer-tools-wrapper .designer-tools{display:block;}
 #designer-tools-wrapper .designer-tools .designer-tool {
  width: 49%;
  display: inline-block;
 }
 #designer-tools-wrapper .designer-tools .designer-tool input, #designer-tools-wrapper .designer-tools .designer-tool select{width:100%;}
 #response_product_details .product-add-to-cart-container{display:block;}
 .product-add-to-cart-container .number-spinner{float: inherit; margin:0px auto 10px;}
 .product-add-to-cart-container .button-container .btn-product-cart{float: initial;}
 /*.konvajs-content{width:270px !important; height:250px !important;}*/
 /*.konvajs-content canvas{width:270px !important; height:250px !important;}*/
 

}
@media (max-width:480px){
 #designer-wrapper {
 overflow: hidden;
  display: block; height:300px; 
}
#designer-canvas-wrapper{
    width:600px; margin-left:-40%;
   height:300px;position: inherit;
}
#designer-canvas-wrapper .canvas-size.canvas-size-v {
   position: absolute;
  top: 27%;
  left: 0;}
}