@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@300;400;600;900&display=swap');
/*font-family: 'Encode Sans Condensed', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');
/*font-family: 'Rancho', cursive;*/
body,html{ font-size: 18px; letter-spacing: 1px;line-height: 150%;  color: #6c7293; font-family: 'Encode Sans Condensed', sans-serif;}
html {scroll-behavior: smooth; }
a{ color:  #6c7293; text-decoration: none}
a:hover{ color:#dc3545}
a:hover, a:focus {text-decoration: none; outline: none;}
h1, h2, h3, h4, h5 { line-height: 1.3;  color: #3c3750 }
ul, ol{ margin: 0; padding: 0; list-style: none; }
p:last-child{ margin-bottom: 0 }

a,.animate{transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease;}

.m-2{ margin: 15px }
.mb-1{margin-bottom: 10px}
.mb-2{margin-bottom: 20px}

.pull-right{ float: right; }
.pull-left{ float: left; }
.w-100{ width: 100% }

.text-center{ text-align: center; }

.form-group{ position: relative; margin-bottom: 20px }
.form-control{ padding: 5px; border: 1px solid #ddd; width: 100% }
.form-control:focus, button:focus, .btn:focus{box-shadow:none !important; outline: none !important; background: none !important}
.form-control{border-radius: 0 !important;}
.form-control option{ line-height: 150% }
label{ font-size: 13px; text-transform: uppercase; font-weight: 600 }

.bg-theme{ background: #647fa3 }
.txt-theme{ color: #647fa3 }
.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }

.slider-bar {-webkit-appearance: none; width: 100%; height: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s;     vertical-align: 15px;} 
.slider-bar:hover {opacity: 1; } 
.slider-bar::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 15px; height: 15px; background: #64a7f5; cursor: pointer; border-radius: 100% } 
.slider-bar::-moz-range-thumb {width: 15px; height: 15px; background: #64a7f5; cursor: pointer; border-radius: 100% }

.mozgat img{ width: 100%; height: auto; }
.wall-area .mozgat img{ height: 100% }
.producrt-accordion{cursor: pointer;} 
.producrt-accordion:after {content: '\002B'; color: #fff; font-weight: bold; float: right; margin-left: 5px; } 
.active.producrt-accordion:after {content: "\2212"; } 
.accordion-panel {/*padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; */ display: none;}
.accordion-panel.open{ display: block; }

.col .size{font-size: 10px; text-align: center}
.pro-thumb-area .mozgat .size{ display: none !important; }
.wall-area .size{ display: block !important;color: #333; background: #f1f1f1;height: auto; line-height: 100%; }

.size_h, .size_w{ position: absolute; width: 40px; height: 20px; text-align: center; }
.size_h{top: 50%; margin-top: -15px; transform: rotate(-90deg); left: -35px;}
.size_w{left: 50%; margin-left: -15px; bottom: -10px;}

.table-custom{ margin-top: 20px; border: 1px solid #ddd; border-bottom: none; background: #fff }
.table-custom td{ border-bottom: 1px solid #ddd; padding: 5px; text-align: center;}
.table-custom td:last-child{ border-left: 1px solid #ddd }
.table-custom td .mozgat{ position: relative; text-align: center; margin: auto; }
.table-custom td .mozgat img{width: 80%}
.col-heading{text-align: left; padding: 10px; background: rgba(0,0,0, .3); color: #ffffff; font-size: 14px; line-height: 100%;}
.dashboard{ height: calc(100vh - 60px) !important;  position: relative; overflow: hidden; background: #f1f1f1}
.product-details{ width: 350px; height: calc(100vh - 60px) !important; border-left: 1px solid #ddd; /*background: #fff;*/ overflow-y: auto; position: relative; z-index: 11;}
.action-bottom{ position: fixed; z-index: 12; left: 0; right: 0; bottom: 0px; padding: 10px; border-top: 1px solid #ddd; background: #f1f1f1 }
.action-bottom a, .add2cart{ background:#64a7f5 ; color: #fff; border-radius: 4px; text-align: center; padding: 7px 15px; font-size: 13px; font-weight: 600 ; margin-bottom: 5px 10px 5px 0}
.action-bottom a:hover, .add2cart:hover{ opacity: .7; color: #fff }
hr{ margin: 15px auto; border-top:  1px solid #ddd; background: none !important; display: inline-block; width: 100% }

header, footer{ text-align: center; position: relative;}
header{background: #647fa3; color: #fff; min-height: 60px; line-height: 60px}
footer{ margin-top: 50px; padding: 10px; background:  rgba(0,0,0, .5); color: #fff}

.dimention{ text-align: center; }
.dimention input{ display: inline-block;  border: 1px solid #ddd; background: #f1f1f1; padding:5px; text-align: center; width: 50px; vertical-align: middle; }
.dimention strong{ font-weight: 300 !important; vertical-align: middle; }

.other-artical img, .wall-pallet img{ width: 48px; }
.wall-pallet a{ opacity: .7 }
.wall-pallet a:hover, .wall-pallet a.active{ opacity: 1 }
.color-thumb{ display: inline-block; border-radius: 4px; width: 24px; height: 24px; border: 1px solid #ddd;opacity: .7 }
.color-thumb:hover, .color-thumb.active{opacity: 1; border: 1px solid rgba(0,0,0,0.3);}
.product-details h3{ font-size: 18px; font-weight: 600 }
.product-desc .small{ font-size: 12px; margin-top: -5px; margin-right: 10%;  }
.custom-orientation{ margin-bottom: 5px }
.custom-orientation div{ display: inline-block; margin:0 5px; opacity: .6; cursor: pointer; }
.custom-orientation img{ width: 60px }

.custom-orientation div:hover, .custom-orientation div.active{ opacity: 1 }
.custom-dimention div{ height: 50px }
.custom-dimention label span{float: right; font-weight: 400; text-align: right;background: #64a7f5; color: #fff; line-height: 130%; padding: 1px 5px; border-radius: 3px;     margin-top: 9px;}
.select-product{ background:  #64a7f5; text-align: center; }
.select-product a{ text-transform: uppercase; font-size: 13px; font-weight: 600; color: #fff; padding:0 10px;border-right:2px solid; opacity: .7  }
.select-product a:last-child{ border-right: 0 }
.select-product a.active, .select-product a:hover{ opacity: 1 }
.base-area{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 5px solid; width: 400px; height: 400px; background-size: 50px auto; }
.area-show{ position: absolute; text-align: center; font-size: 12px; font-weight: 600 }
.area_x{ left: 0; top: -30px; width: 100% }
.area_y{ top: 50%; margin-top: -15px; transform: rotate(-90deg); right: -30px}
/*.base-area:after, .base-area:before{ content: ''; position: absolute;   display: inline-block;  }
.base-area:after{left: 0; width: 100%; height: 1px; top: -15px; border-top: 1px solid rgba(0,0,0,.3);}
.base-area:before{ right: -15px; top: 0; width: 1px; height: 100%;border-right: 1px solid rgba(0,0,0,.3); }*/
.txt{ font-size: 13px; line-height: 130% } 
.header-top-right{ position: absolute; right: 20px; top: 10px }
.bucket{ display: inline-block; }
.bucket span{ background: #fc0; color: #647fa3; display: inline-block; font-weight: 600; font-size: 10px; text-align: center; width: 20px; height: 20px; line-height: 20px; border-radius: 100%; position: absolute; right: -10px; top: -5px }
.bucket img{ width: 36px }

.product-card{ margin-bottom: 20px; background: #fff; box-shadow: 1px 2px 2px 2px rgba(0,0,0,.1) }
.product-card-heading{background: #64a7f5; color: #fff !important; text-align: left; padding: 5px 15px; display: block;}
.product-card-heading:after {content: '\002B'; color: #fff; font-weight: bold; float: right; margin-left: 5px; } 
.product-card-heading.active:after {content: "\2212"; } 
.card-panel{ padding:20px 15px; display: none; }
.card-panel.open{ display: block; }
.product-price{ margin: 10px auto 0; display: inline-block; width: 100%; }
.total-amount{background: #fff; padding: 7px 5px; color: #647fa3; display: inline-block; margin-right: 10px; line-height: 100%; position: relative; top: -8px;}
.total-amount span{background: #64a7f5; color: #fff; padding: 2px 5px; font-weight: 600}
.table-custom h6{ font-weight: 400; line-height: 100%; font-size: 10px; }
.product-div{ width: 80%; margin: auto; position: relative; display: block; }
.product-div:after{ content: ''; position: relative; padding-bottom: 100%; display: block; }
.product-div img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 100%; max-width: 100%; }
.product-div img.rotate_vertical{ transform: translate(-50%, -50%) rotate(90deg); -webkit-transform: translate(-50%, -50%) rotate(90deg); -moz-transform: translate(-50%, -50%) rotate(90deg); -o-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: rotate(90deg); transform: translate(-50%, -50%) rotate(90deg);}