body {
  overflow-x: hidden;
}

model-viewer::part(default-ar-button) {
  z-index: 100;
}

#model-viewer {
  height: 650px; 
}

#viewer {
  height: 100%;
  overflow: visible;
}

#options {
  background-color: rgba(255,255,255,0.5);
  height: 100%;
}

#controls-container {
}

#front-panel-options {
  display: flex;
}

.options {
  display: flex;
}

.option-container {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 65px;
}

.option-img {
  width: 40px;
  border-radius: 999px;
}

.option {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  margin: 2px;
  cursor: pointer;
  border: 2px solid transparent;
}

.option-shadow::after {
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 30%);
  content: '';
  display: block;
  height: 40px;
  position: absolute;
  top: 4px;
  width: 40px;
  border-radius: 999px;
}

.option-label {
  display: none;
  position: absolute;
  bottom: 0px;
  white-space: nowrap;
}

.active {
  box-shadow: 0 0 1px 2px #4b6569;
}

#wood-options-container {
  margin-left: 25px;
}

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

.text-center .option-label {
  left: -200%;
  right: -200%;
}

#hide-show {
  position: absolute;
  bottom: 20px;
}



/* @media (max-width: 768px) { */
/*   * { */
/*     margin: unset; */
/*   } */

/*   body { */
/*     padding: 10%; */
/*     width: 100vw; */
/*   } */

/*   #model-viewer { */
/*     width: 90%; */
/*   } */

/*   #viewer { */
/*     width: 100%; */
/*     height: 1300px; */
/*     margin-top: -450px; */
/*     position: relative; */
/*   } */

/*   #front-panel-options { */
/*     flex-direction: column; */
/*   } */

/*   .controls { */
/*     position: absolute; */
/*     bottom: 5px; */
/*     padding-left: 5px; */
/*     width: 100%; */
/*   } */

/*   #hide-show { */
/*     position: absolute; */
/*     bottom: -20px; */
/*   } */

/*   .options { */
/*     flex-wrap: wrap; */
/*     padding-right: 20px; */
/*   } */

/*   #wood-options-container { */
/*     margin-left: unset; */
/*   } */

/*   model-viewer::part(default-ar-button) { */
/*     bottom: 500px; */
/*   } */
/* } */

/* @media (min-width: 767px) { */
/*   model-viewer::part(default-ar-button) { */
/*     top: 50px; */
/*     right: 100px; */
/*   } */
/* } */

/* /1* temp *1/ */