body {
  font-family: sans-serif;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
#webgi-canvas {
  width: 100% !important;
  height: 100% !important;
}
#webgi-canvas-container{
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0.5rem;

  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}


/* extra */
#options a img {
  border-radius: 10%;
  height: 75px;
  width: 100px;
  margin-right: 15px;
  background-color: rgba(208, 208, 208, 0.53);
}

#image:hover {
  transform: scale(1.1);
  border: 1px solid rgba(2, 2, 2, 0.466);
}

#options {
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  bottom: 0px !important;
  overflow: auto;
}
#options a img.active {
  border: 2px solid rgb(8, 8, 8);
}
#loader{ 
  position: absolute;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  top: 50%;
  left: 48%;
  margin: 0 auto;
  z-index: 9999;
  
}
#description {
  position: relative;

}

#details {
  position: absolute;
  left: 100px;
}

.switch {
  position: absolute;
  display: inline-block;
  width: 90px;
  height: 34px;
  right: 10px;
  top: 10px;
  z-index: 2
}

.switch input {display:none;}


      
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: grey;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: rgb(255 198 0);;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}



input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(55px);
}

.slider:after
{
content:'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}

input:checked + .slider:after
{  
content:'ON';
}


@keyframes mymove {
  from {
      left: 0px;
  }

  to {
      left: 100px;
  }
}

#assetManagerPopup {
  overflow: hidden !important;
  width: 33px !important;
  color: transparent !important;
  height: 33px !important;
  background: #0a3c4ee8 !important;
  padding: 10px !important;
  border-radius: 50% !important;
  animation-name: loadingPanel;
  animation-duration: .4s;
  animation-iteration-count: infinite;
}


#arvr{
  position: absolute;
  z-index: 2;
  right: 40px;
  top: 100px;
  display: none;
}


#vto {
  position: fixed;
  z-index: 2;
  bottom: 95px;
  display: flex;
  justify-content: center;
  width: 100%;
}
#vto button{
  background:rgb(255 198 0);
  width: 100px;
  border: navajowhite;
  color: black;
  height: 35px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
}

.maindiv
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #d7cfcf80;
    width: 500px;
    height: 500px;
    border-radius: 20px;
}
#subdiv
{
    text-align: center;
}
#canceldiv img
{
    width: 30px;
    position: absolute;
    left: 90.5%;
    cursor: pointer;
}




@media only screen and (min-width: 0px) and (max-width:1100px) {

  #vto {
    position: fixed;
    z-index: 2;
    bottom: 105px;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  #vto button{
    background:rgb(255 198 0);
    width: 100px;
    border: navajowhite;
    color: black;
    height: 35px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
  }
  
  #options {
      width: 100%;
      position: absolute;
      display: flex;
      justify-content: flex-start;
      bottom: 0px !important;
      left: 18px;
      overflow: auto;
  }
  #options a img.active {
    border: 2px solid rgb(8, 8, 8);
  }
  #canceldiv img
{
    width: 30px;
    position: absolute;
    left: 75.5%;
    cursor: pointer;
    top:10%
}

}

@keyframes loadingPanel {
  from {
      border: dashed #97c1ceb9 0px;
  }

  to {
      border: dashed #97c1ceb9 4px;
  }

}

@media screen and (min-device-width: 350px) and (max-device-width: 600px) {
  #options {
          width: 100%;
          position: absolute;
          display: flex;
          justify-content: flex-start;
          bottom: 0px !important;
          left: 3px;
          overflow: auto;
      }
      #options a img.active {
        border: 2px solid rgb(12, 12, 12);
      }
}