body {
  font-family: "Montserrat", sans-serif !important;
  font-optical-sizing: auto !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 11px !important;
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#logo {
    width: 80px !important;
    margin-left: 20px !important;
    margin-top: -5px !important;
    border-radius: 5px !important;
}

#MobileLogo {
  position: fixed !important;
  left: 12px !important;
  top: 10px !important;
  z-index: 1000 !important;
}

#ViewNLocation {
  position: fixed !important;
  right: 7% !important;
     top: 25px !important;
  z-index: 1000 !important;
}

#ViewNLocation .btn {
  background-color: #C94150 !important;
  color: white !important;
  /* padding: 8px 30px !important; */
      padding: 5px 20px !important;
  margin: 5px !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: background-color 0.3s !important;
}

#ViewNLocation .btn:hover {
  background-color: #a32f3d !important;
}

#MobileUti {
  display: block !important;
  margin-top: 10px !important;
  display: block !important;
    margin-top: 10px !important;
    position: fixed;
    left: 50px;
   
    align-items: center;
    bottom:150px;
}

#MobileUti .icon-btn
{
    margin-right: 3px !important;
}

#sceneList {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 20% !important;
  height: 90% !important;
  padding: 10px !important;
  background: none;
  z-index: 1000 !important;
  pointer-events: none !important;
  top: 25%;

  display: flex;                /* enable flexbox */
  flex-direction: column;       /* stack children vertically */
  justify-content: center;      /* center vertically */
  align-items: center; 
}

#sceneList .scenes {
  margin: auto 0; /* vertically center this only */
  width: 200px;
}

#sceneList .scene,
#sceneList .icon-btn,
#mobileIcons,
#MobileUti {
  pointer-events: auto !important;
}

#sceneList .scenes {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#sceneList .scene {
  display: block !important;
  width: 100% !important;
  height: 20px !important;
  margin-bottom: 5px !important;
}

#sceneList .scene .text {
  line-height: 20px !important;
  text-align: center !important;
  background: white;
  color: #000 ;
  border-radius: 2px !important;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
  width: 70% !important;
  font-size: 14px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#sceneList .icon-btn {
  background-color: #C94150 !important;
  color: white !important;
  padding: 6px !important;
  border-radius: 2px !important;
  font-size: 18px !important;
  margin: 5px 0 !important;
  cursor: pointer !important;
  transition: background-color 0.3s !important;
}

#sceneList .icon-btn:hover {
  background-color: #a32f3d !important;
}

#mobileIcons {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 18px !important;
  padding: 8px !important;
  margin-top: -8px !important;
  z-index: 1000 !important;
}

/* Hide default view control buttons */
.viewControlButton {
  display: none !important;
}
#sceneListToggle, #autorotateToggle, #fullscreenToggle {
  display: none !important;
}

/* Responsive Media Queries */

/* Extra Small Devices (phones, up to 576px) */
@media (max-width: 576px) {
  #sceneList {
    width: 25% !important;
    height: 70% !important;
    padding: 5px !important;
            margin-right: 35px;
  }


  #ViewNLocation {
  position: fixed !important;
  right: 7% !important;
     top: 12px !important;
  z-index: 1000 !important;
}
  #sceneList .scene .text { font-size: 12px !important; }
  #mobileIcons { font-size: 16px !important; }
}

/* Small Devices (tablets, 577px to 768px) */
@media (min-width: 577px) and (max-width: 768px) {
  #sceneList {
    width: 30% !important;
    height: 80% !important;
    padding: 8px !important;
            margin-top: -30px;
  }

  #MobileUti{
        bottom: 25px;
  }

  #ViewNLocation{
    top: 12px !important;
  }
  #sceneList .scene .text { font-size: 13px !important; }
  #mobileIcons { font-size: 17px !important; }
}

/* Medium Devices (tablets/desktops, 769px to 992px) */
@media (min-width: 769px) and (max-width: 992px) {
  #sceneList {
    width: 25% !important;
    height: 85% !important;
    padding: 10px !important;
            margin-top: -30px;
  }
   #MobileUti{
        bottom: 25px;
  }
  #sceneList .scene .text { font-size: 13px !important; }
  #mobileIcons { font-size: 18px !important; }
}

/* Large Devices (desktops, 993px to 1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
  #sceneList {
    width: 22% !important;
    height: 90% !important;
    padding: 10px !important;
  }
  #sceneList .scene .text { font-size: 14px !important; }
  #mobileIcons { font-size: 18px !important; }
  
  
  #sceneList .scenes{
    width:230px !important;
  }
  
  #logo{
    width: 120px !important;
  }
      
}

/* Extra Large Devices (large desktops, 1201px and up) */
@media (min-width: 1201px) {
  #sceneList {
    width: 20% !important;
    height: 90% !important;
    padding: 10px !important;
  }
  #sceneList .scene .text { font-size: 14px !important; }
  #mobileIcons { font-size: 18px !important; }
  
  #sceneList .scenes{
    width:230px !important;
  }
  
  #logo{
    width: 120px !important;
  }
}




@media screen and (width: 658px) and (orientation: landscape) {
  /* Your CSS for exactly 658px landscape */
  
  #sceneList .scene .text{
    line-height:22px !important;
    
  }
  #sceneList .scene
  {
    height:23px !important;
  }
  
  #sceneList .scenes{
    width:160px !important;
  }

}



@media screen and (max-width: 873px) and (orientation: landscape) {
  #sceneList .scene
{
    height: 20px !important;
}
#sceneList .scene .text {
    line-height: 20px !important;}
  
  
  #ViewNLocation{
            top: 17px !important;
  }
}