.square{
    font-size: 14px;
    position:relative;
}

.squares-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    border-radius:10px;
    overflow: hidden;
} 
.squares-container--three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 16px;
}
.squares-container--8 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr  ;
    grid-column-gap: 4px;
}
.squares-container--3 {
    display: grid;
    grid-template-columns: repeat(3,minmax(0, 1fr))  ;
    grid-column-gap: 4px;
}

.squares-container--4 {
    display: grid;
    grid-template-columns: repeat(4,minmax(0, 1fr))  ;
    grid-column-gap: 4px;
}
.squares-container--2 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0, 1fr))  ;
    grid-column-gap: 16px;
}
.squares-container--1 {
    display: grid;
    grid-template-columns: minmax(0, 1fr)  ;
    grid-column-gap: 16px;
}


.squares-container--material div img{
     aspect-ratio: 2 / 1 !important; 
    object-fit: cover;
    width:100%

}


.grid--colors img{
    aspect-ratio: 2/1;
}

.square img {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(71, 71, 71,0.2);
}


.remove-model-btn{
    grid-column: span 2;

}

form.contact-form {
    display: grid;
}

.gallery-item{
    cursor: pointer;
}

.container__range{
    grid-column: 1/-1;
  }
  
.container__range input{
    width:100%;
  }
      
  .noUi-value.noUi-value-horizontal.noUi-value-sub {
    display: none !important;
}
[data-pips] .range-slider-ui {
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
}
.noUi-handle.noUi-handle-lower {
    transform: translate(5px, 0px);
}
.focused-raycaster{
    -webkit-box-shadow: inset 0px 0px 28px 5px rgba(136, 192, 227, 1);
    -moz-box-shadow: inset 0px 0px 28px 5px rgba(136, 192, 227, 1);
    box-shadow: inset 0px 0px 28px 5px rgba(136, 192, 227, 1);
}
.lil-gui{
display: none !important;
}


body { margin: 0;overflow: hidden; }
canvas { display: block; }
input{color:black}
:root{
    --resize-handle__width:30px;
    --resizer-handle__height:30px;
}
@media screen and (min-width:992px) {
:root{
    --resize-handle__width:30px;
    --resizer-handle__height:30px;
}
}

.resize-handle {
    position: sticky;
    top: 0%;
    transform: translate(-50%,10px);
    left:calc( 50% ) !important;
    width: 30px;
    height: 10px;
    cursor: ns-resize;
    background-color: rgb(27, 27, 27);
    border-radius: 10px;
    z-index: 20;
}

@media screen and (min-width:992px){
.resize-handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left:calc( 100% - 12px) !important;
    width: 10px;
    height: 30px;
    cursor: ew-resize;
    background-color: rgb(27, 27, 27);
    border-radius: 10px;
}
}
.side-menu {
    position: absolute;
    overflow-y:auto;

}

@media screen and (max-width:991px){
    .side-menu {
    
    height:40vh;
    width:100%;
    bottom:0;
    background-color: rgba(220, 220, 220, 0.8);
    box-shadow: 0px -1px rgba(0,0,0,0.1);
}

}
@media screen and (max-width:992px){
.side-menu>div:nth-child(2) {
/* border: 10px solid lime; */
margin-top: -10px;
}
}
@media screen and (min-width:992px){
    .side-menu {
    left: 0;
    top: 0;
    width: 20vw;

    background-color: rgba(220, 220, 220, 0.8);
   
    height:calc(100%);
    }
}
.remove-model-btn{
grid-column:  1/-1;
}

#exportButton{
    top:48px !important; 
    transform:translate(0, -50%) !important;
}
#importButton{
    top:80px !important; 
    transform:translate(0, -50%) !important;
}


.side-menu .hide-side {
    display: none !important;
}

.messenger-menu{
    
    position: fixed; 
    right: 20px; 
    top: 200px; 
  
    border-radius: 10px; 
    overflow: auto; 
    max-height: calc(-100px + 70vh); 
    border: 1px solid rgb(0, 0, 0); 
    background: white;
    backdrop-filter: blur(10px); 
    z-index: 500;
    max-width:unset;
    bottom: unset;;
    width: 50vw;
}
@media screen and (min-width:992px) {
.messenger-menu{

    max-width:15%;
    position: fixed;
    top:unset; 
    right: 20px; 
    bottom: 20px; 
    border-radius: 10px; 
    overflow: auto; 
    max-height: calc(-60px + 60vh); 
    border: 1px solid rgb(0, 0, 0); 
    background: white;
    backdrop-filter: blur(10px); 
    z-index: 500;
}
}
.production-hide{
    display: none;
}
input#fileInput,button#importButton,button#exportButton,button#enableShadowsButton
{
    display: none;
}

#saveSendButton{
    display: none;
}