html,
      body {
         user-select: none;
         -webkit-user-select: none;
         -khtml-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
      }
   
      html,
      body {
         background-color: #f9f9f9;
         width: 100%;
         height: 100%;
         margin: 0px;
         overflow: hidden;
         position: fixed;
      }
   
      body {
         margin: 0;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
           'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
           sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
       }
       
       code {
         font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
           monospace;
       }
       
      #root {
         z-index: 1;
         display: block;
         width: 100%;
      }
   
      canvas {
         display: block;
      }
   
      #loader {
         position: absolute;
         left: 50%;
         top: 168px;
         transform: translate(-50%, 100%);
         z-index: 1200;
         margin-top: 136px;
         opacity: 1;
         transition: opacity 1s;
      }
   
      #exploreButtton {
         position: absolute;
         left: 50%;
         top: 341px;
         transform: translate(-50%, 100%);
         z-index: 1200;
         cursor: pointer;
         height: 74px;
         width: 417px;
         background: #80808057;
         border-radius: 2px;
         align-items: center;
         text-align: center;
         padding: 12px;
         font-family: Roboto;
         font-style: normal;
         font-weight: normal;
         font-size: 24px;
         line-height: 36px;
         color: #FFFFFF;
         border: 0;
      }
   
      #loading {
         display: none;
         justify-content: center;
         position: absolute;
         left: 50%;
         top: 57%;
         transform: translate(-50%, -280%);
         width: 100%;
         height: 120px;
         background: #ffffff;
      }
   
      #loading>div {
         text-align: center;
         font-family: Roboto;
         font-style: normal;
         font-weight: 300;
         font-size: 40px;
         line-height: 48px;
      }
   
      #mainload {
         display: none;
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         height: 100vh;
         background-color: #ffffff;
         z-index: 1200;
      }
   
   
      @media screen and (min-width: 640px) and (max-width: 824px) and (orientation : landscape) {
   
         #loading {
            display: none;
            justify-content: center;
            position: absolute;
            left: 50%;
            top: 70%;
            transform: translate(-50%, -280%);
            width: 265px;
            height: 120px;
            background: #ffffff;
         }
      }
   
  

   
  
   
   
   
      #Scalable {
         transform: scale(0.6);
         width: 100%;
         height: 100vh;
      }
   
      .mobile {
         display: none;
      }
   
      #loader {
         width: 938px;
         height: 5px;
      }
   
      .hotspots {
         display: none;
         position: absolute;
         z-index: 11;
         font-family: 'Roboto';
      }
   
      #hotspot1demo:focus {
         outline: none;
         border: none;
      }
   
      #loading:focus {
         outline: none;
         border: none;
      }
   
      .MuiPaper-root.MuiDrawer-paper.makeStyles-drawerPaper-2.MuiDrawer-paperAnchorLeft.MuiDrawer-paperAnchorDockedLeft.MuiPaper-elevation0 {
         min-width: 283px;
      }
   
      #orion-keyboard-color-menu-wrapper {
         position: absolute;
         left: 22vw;
         top: 45vh;
         z-index: 10;
         display: none
      }

      @media screen and (max-width: 1350px)  {
         #orion-keyboard-color-menu-wrapper {
            left: 25vw;
         }
      }
      @media screen and (max-width: 1160px)  {
         #orion-keyboard-color-menu-wrapper {
            /* left: 40vw;
            top: 5vh; */
            left: 71vw;
            top: 0vh;
            transform: scale(0.6);
         }
      }
      /* @media screen and (max-width:960px)  {
         #orion-keyboard-color-menu-wrapper {
            left: 40vw;
            top: 5vh;
         }
      } */
   
      @media screen and (min-width: 640px) and (max-width: 824px) and (orientation : landscape) {
   
         #loading {
            display: none;
            justify-content: center;
            position: absolute;
            left: 50%;
            top: 70%;
            transform: translate(-50%, -280%);
            width: 265px;
            height: 120px;
            background: #ffffff;
         }
   
      }
   
   
   
      @media screen and (max-width: 600px) {
       
         #root {
            z-index: 1;
            /* position: absolute; 
          top: 92.5%; 
          left: 0px; */
            display: block;
            width: 100%;
         }
   
         .desktop {
            display: none;
         }
   
         .mobile {
            display: block;
         }
   
         div#loading {
            display: flex;
            flex-wrap: wrap;
            left: 50%;
            top: 42%;
            transform: translate(-50%, -240%);
            min-width: 350px;
         }
   
         #loaders {
            width: 278px;
            height: 5px;
            top: 465px;
            left: 50%;
            transform: translate(-50%, -50%);
         }
   
         #loading>div>.img {
            margin-top: 44px;
            margin-left: 40px;
            height: 69px;
            width: 164px;
         }
   
         #loading>div {
            margin: 0;
            font-weight: normal;
            font-size: 24px;
            line-height: 36px;
   
         }
   
         #exploreButtton {
            position: absolute;
            left: 50%;
            top: 473px;
            transform: translate(-50%, 100%);
            z-index: 1200;
            cursor: pointer;
            height: 74px;
            width: 379px;
            background: #80808057;
            border-radius: 2px;
            align-items: center;
            text-align: center;
            padding: 12px;
            font-family: Roboto;
            font-style: normal;
            font-weight: normal;
            font-size: 24px;
            line-height: 36px;
            color: #FFFFFF;
            border: 0;
         }
      }
   
      @media screen and (max-width: 390px) {
         #exploreButtton {
            position: absolute;
            left: 50%;
            top: 473px;
            top: 465px;
            transform: translate(-50%, 100%);
            z-index: 1200;
            cursor: pointer;
            height: 74px;
            width: 330px;
            background: #80808057;
            border-radius: 2px;
            align-items: center;
            text-align: center;
            padding: 12px;
            font-family: Roboto;
            font-style: normal;
            font-weight: normal;
            font-size: 24px;
            line-height: 36px;
            color: #FFFFFF;
            border: 0;
         }
   
         #loaders {
            width: 330px;
            height: 37px;
            top: 440px;
         }
   
         #loading>div>img {
            margin-left: 40px !important;
   
         }
   
         .threebtns>div {
            display: flex !important;
            justify-content: center;
            max-width: 360px;
         }
   
      }
   
      #infinityrt-canvas {
         transition: margin 1s;
        
      }