#menu{
  background-color: #ffffff00;

}

model-viewer {
  --progress-bar-color: transparent;
}

#conf_color_menu{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#info-content {
  transition: transform 0.5s ease-in-out;
}

.btn-hover:hover {
  background-color: #e0e0e0;
}

#conf_color_menu div div:hover{
  border: solid 1px rgb(121, 121, 121);
}



 #info-1, #info-2, #info-3 {
    transition: transform 0.3s ease; /* Geçiş efekti ekle */

  }

  #info-menu {
    background-color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    transition: opacity 0.3s ease;

  }



  .info-point {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    margin: 0 0.5rem;
    background-color: #036A76;
    transition: background-color 0.3s ease-in-out;
  }

#conf_color_menu::-webkit-scrollbar-thumb {
    background-color: red;
}

  /* DIMENSION */
  .dot{
    display: none;
  }

  .dim{
    background: #fff;
    border-radius: 4px;
    border: none;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    color: rgba(0, 0, 0, 0.8);
    display: block;
    font-family: Futura, Helvetica Neue, sans-serif;
    font-size: 1em;
    font-weight: 700;
    max-width: 128px;
    overflow-wrap: break-word;
    padding: 0.5em 1em;
    position: absolute;
    width: max-content;
    height: max-content;
    transform: translate3d(-50%, -50%, 0);
    pointer-events: none;
    --min-hotspot-opacity: 0;
  }

  .hotspot{
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: none;
    background-color: blue;
    box-sizing: border-box;
    pointer-events: none;
  }

  .hotspot[slot="hotspot-hand"]{
    --min-hotspot-opacity: 0;
    background-color: red;
  }

  .hotspot[slot="hotspot-foot"]:not([data-visible]) {
    background-color: transparent;
    border: 3px solid blue;
  }

  .annotation{
    background-color: #888888;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }

  @media only screen and (max-width: 800px) {
    #ar-menu{
      display: none;
    }

    .dim{
      font-size: 3vw;
    }
  }

  .dimensionLineContainer{
    pointer-events: none;
    display: block;
  }

  .dimensionLine{
    stroke: #47474749;
    stroke-width: 2;
    stroke-dasharray: 0;
  }

  .hide{
    display: none;
  }
  /* This keeps child nodes hidden while the element loads */
  :not(:defined) > * {
    display: none;
  }