* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-content-zooming: none;
}
:root{
  --highlight:rgb(137, 194, 248);
  --l1:rgb(18, 206, 248);
  --l2:rgba(23, 174, 249, 0.537);
  --l3:rgb(73, 196, 234);
}


html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
 
}
body{
 min-height: 400px;
  margin: auto;
 
}

#pano {
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  margin-top: 0;
  pointer-events: all;
}

.main_wrapper{
 background:#eee;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap:0;
  min-height: 450px;
  max-height: 100%;
}


.links{
  display: flex;
  flex-direction: row;
  width: 100%;
  gap:10px;
  padding: 20px;
}
.copy{
  width:100%;
  text-align: center;
  padding-bottom: 10px;
}

.footer{
  text-align: center!important;
  position: fixed;
  width: 100%;
  background:#fff;
  flex-grow: 1;
  bottom: 0;
}
.footer>.nav{
  margin-top: 10px;
  width: 100%!important;
  
  display: flex;
  flex-direction: row;
  justify-content: center;
  
}
.nav-menu{
  background: #fff;
  border-radius: 0px!important;
  padding:10px;
  z-index: 1000;
  margin-bottom: 0!important;
  box-shadow: 0px 0px 1px black;
}
.nav-menu>.navbar-brand{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 40px;
  margin-left: 40px;

}
.nav-menu>.form-inline{
  position: absolute;
  right:10%;
}
#search{

  
  max-width:800px;
}
.view-settings{
  display:block;
  background:#fff;
  border-radius: 8px;
  min-width: 300px;
  max-width: 350px;
  max-height: 550px;
  padding:10px;
  position: fixed;
  z-index: 2;
  pointer-events: all;
  top:50%;
  transform: translateY(-50%);
  margin-left:10px;
  margin-top: 10px;
}
.prop-details{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.prop-details>textarea{
  margin-top: 10px;
  z-index: 2;
  max-height: 80px!important;
  overflow-y: auto;
  overflow-x: hidden;
  word-wrap: break-word;
}
.info-icon{
  width: 25px;
  height: 25px;
  color:#555;
  pointer-events: all;
  cursor: pointer;
  display: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  
}
.info-icon:hover{
  width: 25px;
  height: 25px;
  color:rgb(120, 132, 237);
  z-index: 2;
}
.editor{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
 position: fixed;
 z-index: 51;
 pointer-events: none;
 position: relative;


 overflow: hidden;
}

.view-settings>.settings{
  display: flex;
  
  flex-direction: column;
  
}

.view-settings>.settings>span>label{
  
  margin-left: 10px;
  font-weight: normal;
}
.scenes>button{
  margin-top: 10px;
}
.view-settings>.settings>span>input{
  cursor: pointer;
}
.scene-list{
  min-width: 200px;
  background: #fff;
  overflow-y:auto;
  min-height: 200px;
  overflow-x: hidden;
  max-height: 200px;
  border-radius:2px;
  border:1px solid #aaa;
}
.scene-list>span:hover{
  background: var(--l1);
}
.scene-list>span{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: hidden;
  padding: 10px;
  cursor: pointer;
}
.scene_active{
  background:var(--l2);
  border: 0.5px dotted #aaa;
}
.dialog{
  display: none;
  flex-direction: column;
  text-align: center;
  padding: 10px;
  position: fixed;
  left:50%;
  transform: translateX(-50%);
  min-width: 200px;
  min-height: 200px;
  width:90%;
  background: #fff;
  border-radius: 8px;
  z-index: 2;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  pointer-events: all;
  max-width: 400px;
}
.dialog>div{
  display: flex;
  flex-direction: column;
  gap:10px;
}
.dialog>span{
  display: flex;
  flex-direction: column;
  gap:10px;
  margin-top: 2px;
}
.dialog>span>label{
  font-size: 1.2rem;
}
.dialog>div>*{
  width: 100%;
}
.dialog>span>*{
  width: 100%;
  display: flex;
  flex-direction: row;
  
}
.dialog>span>span>label{
margin-right: 5px;
}
.dialog>span>span>.eline{
margin-right: 5px;
width:100%;
}
.view-header{
  font-weight: bold;
}
.side-menu{
  position:relative;
  z-index: 2;
  background: #fff;
  width: fit-content;
  padding: 5px;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
 height: fit-content;
 gap:10px;
  left:50%;
  transform: translateX(-50%);
  overflow-x:auto;
  overflow-y: hidden;
  max-width: 500px;
  pointer-events: all;
 
}

.side-menu>span{
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  min-height: 100%;

}
.side-menu>span>span{
  border: 0.2px solid #aaa;
  height: 100%!important;
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-height: fit-content;
  
  min-width:fit-content!important;
  flex-grow: 1;
  flex-direction: column;
  padding: 0px;
  overflow: hidden;
  max-height: 50px;
}

.side-menu>span>div{
background: #aaa;
min-width: 25px;
min-height: 25px;
width: 0%;
height: 18vw;
max-width: 100px;
max-height: 100px;
overflow: hidden;
text-align: center;
border-radius: 100%;
margin-bottom: 2px;
display: block

}
.side-menu-editor{
  width: 10vw!important;
}
.side-menu>span:hover >span{
  background: #ccc;
}
.side-menu>span>div>img{
   
    width: 100%;
    height: 100%;
}
.info-display{
  background: rgba(255, 255, 255, 0.9);
  position: relative;
 
  z-index: 1000!important;
  font-size: 1rem;
  max-width: 250px;
  width:fit-content;
  padding:10px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 8px;
  display: none;
  
}
.bottom-toolbar{
position: absolute!important;
top:50%;
opacity: 0.8;
transform: translateY(-50%);
right: 0% !important;
bottom:auto!important;
flex-direction: column!important;
flex-wrap: nowrap;
width: auto!important;
height: auto!important;
margin-right: 10px;
margin-top: 10px;
}
.bottom-toolbar>.bottom-tools {
  display: none;
}
.bottom-toolbar>.side-menu{
  flex-direction: column!important;
  max-height: 200px!important;
}
.bottom-menu{
  position: fixed;
  z-index: 2;
 width: 100%;
 bottom: 0;
 
 display: flex;
 flex-direction: column;
 text-align: center;
}
.bottom-tools{
  display: flex;
  position: relative;
  justify-content: center;
  gap:10px;
  flex-direction: row;
  padding:10px;
  text-align: center;
  pointer-events: all;
  width: -moz-fit-content;
  width: fit-content!important;
  cursor: pointer;
  background: #fff;
  border-radius: 12px;
  width: fit-content!important;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;
  
}
.bottom-tools>svg{
 color:#aaa;
 min-width:25px;
 max-width:25px;
 min-height: 25px;
 max-height: 25px;
 z-index: 2;
}
.bottom-tools>svg:hover{
 color:rgb(57, 87, 113);
 width:25px;
 height: 25px;
 z-index: 2;
}
.bottom-menu>.related{
  background: #fff;
  min-height:fit-content;
  display: block;
  position: relative;
  left: 50%;
  padding: 10px;
  transform: translateX(-50%);
  width: fit-content;
  border-radius: 4px;
}



.related-item>div>img{
height: 100%;
width: 100%;
}
.related-item{
  display: flex;
  width: auto;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: hidden;
   width:80px;
  height: 100px;
  min-width: 50px;
  min-height: 100px;
cursor: pointer;
 pointer-events: all;
 background: #ddd;
 
}
.related>.props{
  display: none;
  flex-direction: row;
  gap:10px;
  justify-content: center;
}
.related>label{
  width:100%;
  cursor: pointer;
  pointer-events: all;
  padding: 5px;
  border-radius: 2px;
  border: 0.5px solid #aaa;
}
.related>label:hover{
  background: #ccc;
}
.related-item:hover{
background: #ccc;
}
.related-item>div{
  width:80px;
  height: 80px;
  min-width: 50px;
  min-height: 50px;

}
.related-item>span{
  font-size: 10px;
}
.props-active{
display: flex!important;

  flex-direction: row;
}
.lb-room{
  width: 100%;
  text-align: center
}
.flex-active{
  display: flex!important;
}
.flex-inactive{
  display: none;
}
.prop-header{
  padding: 5px;
  margin-top: 10px;
  border-radius: 4px;
  z-index: 2;
  width: fit-content;
  background: #fff;
  position: absolute;
  font-size: 1rem;
  opacity:0.8;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px;
}
.prop-header>.prop_name{
  width: 100%;
  text-align: center;
  font-size: 1rem;
}
.prop-header>.prop_room{
  width: 100%!important;

  text-align: center;
  font-size: 1rem;
  font-weight: bold;
}
.c-bt{
  background: #aaa;
  border-radius: 4px;
  width: fit-content;
  height: fit-content;
  padding: 5px;
  font-size: 1.4rem!important;
}
.c_1:hover{
  background: rgb(3, 182, 72);
}
.c_1{
  background: rgb(9, 234, 28);
  color:#fff;
}
.c_2:hover{
  background: rgb(3, 121, 232);
  
}
.c_2{
  background: rgb(8, 141, 236);
  color:#fff;
}
.active-room{
  border-radius: 4px;
}
.active-room>span{
  background: var(--highlight);

}
/* scrollbar*/
.side-menu::-webkit-scrollbar{
  cursor: pointer;
  width:2em;
  height: 2em;
}
.side-menu::-webkit-scrollbar-track{
  background: #999;
  border-radius: 2px;
}
.side-menu::-webkit-scrollbar-thumb{
  background: linear-gradient(#eee,#ccc,#ccc,#ccc);
  cursor: pointer;
  border-radius: 8px;
}


/*scrollbar*/

/*hotspots*/
.hotspot>.edit-icon:hover{
  color:var(--l2);
}
.hotspot>.edit-icon{
  color:#fff;
  width: 25px;
  height: 25px;
  cursor: pointer;
  margin-top: 2px;

}
.hotspot>div>div>.main-icon{
  color:var(--l3);
  width: 50px;
  height: 50px;
  cursor: pointer;
transform: perspective(100px);
}


.move-icon{
  background:#fff;
  color: #aaa !important;
  border-radius: 8px;
  margin-top: 15px!important;
 
}
.move-icon:hover{
  background: var(--l1);
  color: #222!important;
}
.hotspot>div{
  display: flex;
  flex-direction:row;
  flex-wrap: nowrap;
  width: fit-content;
 height: fit-content;
 gap:5px;
}

.hotspot>div>div:hover + .htar{
  display: block;
 opacity: 1.0!important;
}
.hotspot>div>.htar:hover{
  display: block;
 opacity: 1.0!important;
}
.hotspot>div>.htar{
  min-width: 80px;
  width: fit-content;
  background:rgba(255, 255, 255, 0.9);
  display: block;
  opacity: 0.5;
  font-size:1.0rem;
  border-radius: 4px;
  padding: 2px;
  cursor: pointer;
  text-align: center;
  margin-left: 5px;
}
.all-events{
  pointer-events: all!important;
}
.hotspot>div>div{
background: #fff;
padding: 2px;
cursor: pointer;
z-index: 3;
max-height: 60px;
border-radius: 4px;
}
.hotspot{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: fit-content;
  width: fit-content;
  pointer-events: all;
  
 
}
.hotspot-dialog{
  display:none;
  flex-direction: column;
  flex-wrap: nowrap;
  position: absolute;
  gap: 10px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 3;
  padding: 5px;
  background: #fff;
  height: fit-content;
  width: fit-content;
  border-radius: 8px;
}
.hotspot-dialog>select{
  font-size: 2rem;
  min-width: 100px;
  width: 100%;
}
.hotspot-dialog>*{
  cursor: pointer;
  position: relative;
  height: fit-content;
  width: 100%;
  margin-top: 5px;
  pointer-events: all;
}
/*hotspots*/
.preview-tools{
  position: fixed;
  z-index:3;
  margin-left: 10px;
  margin-top: 10px;
  pointer-events: all;
}