.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: 8px;
}

.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 {
            width: 420px;
            /* min-width: 200px;
            max-width: 600px; */
            background: linear-gradient(120deg, #232526ee 0%, #414345aa 100%);
            position: relative;
            transition: width 0.0s ease;
            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%; */
    max-width:40%;
    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;
}

.contactButtons__wrapper{
    width:calc(25% - 10px);
    position:absolute;
    right:10px;
    bottom:10px;
    }
    @media screen and (min-width:992px) {
        
        
.contactButtons__wrapper{
    width:calc(25% - 10px);
    position:absolute;
    right:10px;
    bottom:10px;
    }
    }
#landscape-controls{
    display:none
}
.greek-vars{
    /* display: none !important; */
}


#app canvas
{
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* border:1px solid cyan  !important */
}

    #mountain-gui{
        display:none !important;
    }

    button.show-element__button {
    border-radius: 4px !important;
    font-size: 1rem !important;
        padding: 0.6rem 1.2rem !important;
}


    button#shadowCastingBtn {
            top: 12px !important;
            bottom: unset !important;
        }


@media (max-width:992px) {
    .disclaimer-container{
        right:4px !important;
        top: 60px !important;
    }

    button#shadowCastingBtn {
        top: 4px !important;
        right:4px  !important;
        bottom: unset !important;
    }

    img.disclaimer-container__maker-logo {
        max-width: 20vw !important;
    }
}

@media (max-width:992px){
  body {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
}

@media (max-width:992px){
.secondary-container{overflow-y:auto}
}
.specification-wrapper{
     display:none !important 
}