/** Shopify CDN: Minification failed

Line 251:2 Expected ":"

**/


.nav-div {
  width: 100%;
  background-color: white;
 
  
}

.model-div {
  width:calc(100vw - 450px);
  height:100vh;
  position: fixed;

  
}

button.buttonMat:disabled {
  color: inherit;  /* Behält die Textfarbe des aktiven Zustands bei */
  background-color: inherit; /* Behält die Hintergrundfarbe des Buttons bei */
  opacity: 1; /* Verhindert eine Veränderung der Opazität */
  
}

button.buttonMat {
  background: white;
  border: 1px solid lightgrey;
  cursor: pointer;
  border-radius: 20px;
  padding: 10px;
  margin-right: 5px;
  text-align: center;
  font-size: 13px;
  margin-top:5px;
  display: inline-flex;
  align-items: center;
  font-weight:600;
  min-width:  clamp(120px, 9.4vw, 155px);
  height: 35px;
}

button.buttonMat:hover {
  background: white;
border: 1px solid black;

}


.togglebutton{
  background:white;
  border:none;
  width:100%;
  height:40px;
  cursor:pointer;
  font-size: 20px;
  font-weight:bold;
  margin:0;
  padding:0; 
  justify-content: space-between;
  align-items: center; 
  display:flex;
}

.chevron.rotate {
  transform: rotate(180deg); /* aus V wird ^ */
  transition: transform 0.5s ease;
}

.panel{
  max-height: 600px;
  transition: max-height 0.5s ease, opacity 0.8s ease;
  opacity: 1;
}

.chevron {
  transition: transform 0.5s ease;
}

.closed{
  
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.2s ease;
  pointer-events: none;
}


.roomguic{
  max-height:0px;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.2s ease;
  pointer-events:none;
}

#createRoom{
 
  background-color: black;
  color:white;
  border: 1px solid grey;
  cursor: pointer;
  border-radius: 20px;
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-weight:bold;
  display: inline-flex;
  align-items: center;
  
  width:100%;
  height: 35px;
}

  .slider-ticks {
   

      width:350px;
      position:relative;
      top:-5px;
    }

.roomsize{
  min-width: clamp(120px, 9.4vw, 149px);
  height:23px;
  border-radius:5px;
  border:1px solid black;

}

    .slider-ticks span {
  position: absolute;
  transform: translateX(-50%);
      font-family: cursive;
      color:grey;
}

.slider-ticks1610 {

      width:350px;
      position:relative;
       top:-5px;
    }


    .slider-ticks1610 span {
  position: absolute;
  transform: translateX(-50%);
      font-family: cursive;
      color:grey;
}

.disabled { 
      background:#7db6ef !important;
      cursor:not-allowed !important;
      margin-top:20px !important;
     
}

#screenheightspan {
  position: absolute;
  cursor:pointer;
  color:white;
  top: -5px; /* Über dem Slider positionieren */
  background-color: black;
  font-size: 12px;
  left: 190px;
  border-radius: 15px; /* Runde Ecken */
  border: 1px solid black; /* Graue Border */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Schattierung für mehr Tiefe */
  width: 45px;
  height: 25px;
  display: flex;              /* Aktiviert Flexbox */
  justify-content: center;    /* Zentriert den Text horizontal */
  align-items: center;        /* Zentriert den Text vertikal */
  text-align: center; 
  z-index: 2;
  pointer-events: none
}


#addCart{
  width:100%;
  background:#0071e3;
  color:white;
  height:4.5rem;
  border-radius: 11px;
  border: none;
  cursor:pointer;
  margin-top:20px;
}

#addCart:hover{
   margin-top:17px;
}

#canvas-style {
  
  width: 100%;
  height: 100%;
  display: inline-block;
  /*background:rgb(77, 75, 75);*/
   
}


#sliderLabel {
  position: absolute;
  cursor:pointer;
  color:white;
  top: -7px; /* Über dem Slider positionieren */
  background-color: black;
  font-size: 12px;
  left: 35.1667px;
  border-radius: 15px; /* Runde Ecken */
  border: 1px solid black; /* Graue Border */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Schattierung für mehr Tiefe */
  width: 45px;
  height: 25px;
  display: flex;              /* Aktiviert Flexbox */
  justify-content: center;    /* Zentriert den Text horizontal */
  align-items: center;        /* Zentriert den Text vertikal */
  text-align: center; 
  z-index: 2;
  pointer-events: none
}

#sliderLabel3 {
  position: absolute;
  color: white;
  cursor:pointer;
  top: -5px; /* Über dem Slider positionieren */
  background-color: black;
  font-size: 12px;
  left: 138px;
  border-radius: 15px; /* Runde Ecken */
  border: 1px solid black; /* Graue Border */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Schattierung für mehr Tiefe */
  width: 45px;
  height: 25px;
  display: flex;              /* Aktiviert Flexbox */
  justify-content: center;    /* Zentriert den Text horizontal */
  align-items: center;        /* Zentriert den Text vertikal */
  text-align: center; 
  z-index: 2;
  pointer-events: none;
 
}

.text{
  font-size:17px;
  color:grey;
}

.noticeText{
  margin-left: 15px !important;
  margin-bottom: 10px !important;
  margin-top: 10px !important;
  color: white !important}

.slider:not(.grid) {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 5px;  
  background: #d3d3d39f;
  outline: none;
  opacity: 0;
  -webkit-transition: .2s;
  transition: opacity .2s;
  z-index: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 25px;
  border-radius: 15px; 
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
  z-index: 3;
}

.slider::-moz-range-thumb {
  width: 35px;
  height: 25px;
  border-radius: 15px; 
  background: black;
  cursor: pointer;
  z-index: 3;
}



#sliderLabel2 {
  position: absolute;
  cursor:pointer;
  top: -5px; /* Über dem Slider positionieren */
  background-color: black;
  font-size: 12px;
  left: 144px;
  border-radius: 15px; /* Runde Ecken */
  border: 1px solid black; /* Graue Border */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Schattierung für mehr Tiefe */
  width: 45px;
  height: 25px;
  display: flex;              /* Aktiviert Flexbox */
  justify-content: center;    /* Zentriert den Text horizontal */
  align-items: center;        /* Zentriert den Text vertikal */
  text-align: center; 
  z-index: 2;
  pointer-events: none;
  color:white;
}

#tDLabel {
  position: absolute;
  top: 20px; /* Über dem Slider positionieren */
  background-color: #fff;
  font-size: 12px;
  left: 115px;
  border-radius: 10px; /* Runde Ecken */
  border: 1px solid #888; /* Graue Border */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Schattierung für mehr Tiefe */
  width: 50px;
  height: 30px;
  display: flex;              /* Aktiviert Flexbox */
  justify-content: center;    /* Zentriert den Text horizontal */
  align-items: center;        /* Zentriert den Text vertikal */
  text-align: center;         /* Optional, um Text innerhalb des span zu zentrieren */
}


#renderCanvas {
  
  width: 100%;
  height: 100%;

  /*background:rgb(77, 75, 75);*/
   
}



.item-buttons {
  width: 450px;
  background-color: white;
  padding: 20px;
  left: calc(100vw - 450px);
  position:relative;
  padding-left: 30px;
  padding-right: 30px;
}

.item-buttons p {
  font-weight: 600;
  margin-bottom: 3px;
  color:#161616;
 
  
}

.sliderContainer {
  position: relative;
  width: 350px;
}

button.button3d:disabled {
  color: inherit;  /* Behält die Textfarbe des aktiven Zustands bei */
  background-color: inherit; /* Behält die Hintergrundfarbe des Buttons bei */
  opacity: 1; /* Verhindert eine Veränderung der Opazität */
  
}

button.button3d {
  background: white;
  border: 1px solid lightgrey;
  cursor: pointer;
  border-radius: 20px;
  padding: 10px;
  margin-right: 5px;
  text-align: center;
  font-size: 13px;
  margin-top:5px;
  display: inline-flex;
  align-items: center;
  
  min-width:  clamp(120px, 9.4vw, 155px);
  height: 35px;
  font-weight:600;
}

button.button3d:hover {
  background: white;
border: 1px solid black;

}

#poster{
    background: url(/cdn/shop/files/3d-icon.png?v=1754585099);
    background-position: center;
    width: 100px;
    height: 100px;
    left: calc(49vw - 200px);
    top: 50vh;
    position: fixed;
    background-size: cover;
    display: block;
}


button img {
  height: 25px;
  width: 25px;
  margin-right: 5px;
  border-radius: 25px;
  position: relative;
  left: -5px;
}
#mainelement{
display: flex;
      flex-direction: row;width:100%; 
      overflow-x: hidden;
    overflow-y: hidden;
}

#colorbox {
  width: 100%;
  margin-bottom: 0px;
}

.sliderContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

input[type="range"] {
  width: 100%;
}

@media (max-width: 768px) {

  #cartdiv{
    position: fixed;
        bottom: 5px;
        width: 100vw;
        background: #fff;
        z-index: 20;
  }

  #roomgui{
    height: 300px;
  }




  #addCart{
    width: 93%;
  }

  #poster{
    left: 40vw;
    top: 20vh;
  }

#createRoom{
  margin-bottom: 130px;
}
  .nav-div {
      padding: 0px;
  }
  .item-buttons {
      width:100%;
      margin-left: 0;
      margin-top: 40vh;
      left:0;
      padding-left: 10px;
      padding-right: 10px;
  }
  .model-div {
      flex-direction: column;
    height:40vh;
            position: fixed;
        z-index: 10;
        width:100%;
  }
#canvas-style{
  height:40vh;
}

#renderCanvas{
  height:40vh;
}

  #noticetext{
  margin-left:0px;
}

#mainelement{
display: flex;
      flex-direction: column;
  width:100%; 
}
}