body {
        font-family: Arial;
        margin: 0;
      }

      #panorama {
        width: 100%;
        height: 100dvh;
      }

      /* floor navigation buttons */

      #floorNav {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform:translateX(-50%);
        background: rgba(0,0,0,0.6);
        padding: 2px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        display:flex;
      }

      #floorNav button {
        display: block;
        margin: 5px;
        padding: 0;
        cursor: pointer;
      }

      #floorNav > div{
        display: none;
      }
      #floorNav > div.activeThumbNav{        
        display:flex;
        background-color: rgba(0,0,0,0.6) !important;
      }

      /* popup */

      #popup {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: white;
        padding: 15px;
        border-radius: 10px;
        display: none;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
      }

#floorNav button{
    background: #000;
    color: #fff;
}
#floorNav button span {
    display: block;
    padding: 3px;
    text-transform: uppercase;
    margin: 0;
    font-size: 12px;
}

/* control panel */

#controls{
position:absolute;
top:20px;
right:20px;
background:white;
padding:10px;
border-radius:3px;
box-shadow:0 0 10px rgba(0,0,0,0.3);
}

#controls button{
display:block;
margin:5px 0;
padding:6px 10px;
cursor:pointer;
width: 100%;
}


/* ===== MAP ===== */

#mapBox{
position:absolute;
top:5px;
left:40px;
width:220px;
background:#fff;
padding:10px;
border-radius:3px;
box-shadow:0 0 10px rgba(0,0,0,0.4);
}

/* floor buttons */

#floors button{
margin:3px 0 3px 0;
padding:5px 10px;
cursor:pointer;
}

.activeFloor{
background:#333;color:#fff;
}

/* map image */

#mapImg{
width:100%;
margin-top:5px;
}

/* points */

.point{
position:absolute;
width:20px;height:20px;
/* background:red;border-radius:50%; */
cursor:pointer;
}
.point:before{
    content: "\f041";
    color:red;
    font: normal normal normal 20px / 1 FontAwesome;
}

.active:before{color:orange !important;}

.wos-hide{display: none!important;}

#customMenu{
  position:absolute;
  display:none;
  background:rgba(0,0,0,0.75);
  color:#fff;
  padding:4px 6px;
  border-radius:4px;
  font-size:11px;
  z-index:9999;
}
#customMenu a{
  color: #fff !important;
}


/* =========================
   🔥 TORCH LAYER
========================= */

#coneLayer{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:10;
}

#conePath{
  fill: rgba(255, 0, 0, 0.28);
  stroke: darkred;
  stroke-width: 2;
}

#torch{
  position:absolute;
  width:0;
  height:0;
  left:0;
  top:0;
  pointer-events:none;
  z-index:999;

  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 140px solid rgba(255, 0, 0, 0.35);

  transform-origin: center center;
}

.owl-nav, .owl-dots{
  display: none !important;
}
#floorNav{
  width: 50%;
}
#floorNav1{
  width: 100%;
}
.item img{
  height: 50px;
}

@media all and ( max-width: 767px ){
  /*#mapBox{display: none !important;}*/
  #floorNav{
    width: 80%;
  }
  #controls {
    right:15px;
    top: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%);
  }
}