.tdhop{
  position:relative; 
  width:100%;
  height:780px;
  background: rgba(222, 226, 230,0.5);
  background: -moz-linear-gradient(180deg, rgba(222, 226, 230,0.5) 0%, #2b3035 100%);
  background: -webkit-linear-gradient(180deg, rgba(222, 226, 230,0.5) 0%, #2b3035 100%);
  background: linear-gradient(180deg, rgba(222,226,230,0.5) 0%, #2b3035 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#797979",GradientType=1);
}
.tdhop>canvas:focus-visible{outline: none !important;}

/*annotation panel*/
#wrapAnnotations{top:10px; left:10px; width:20%; padding:10px;}
/*
#viewSpotDiv{position: relative; height: auto; max-height: 500px; overflow: auto;}
#viewSpotDiv::-webkit-scrollbar { width: .2em;}
#viewSpotDiv::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}
#viewSpotDiv::-webkit-scrollbar-thumb {background-color: darkgrey;outline: 1px solid slategrey;}
*/

.modelTools{ position:absolute; background-color: rgba(255, 255, 255, 0.9);}
#modelToolsH{top:10px; padding:10px; left:50%; width:auto; transform: translateX(-50%);}
#modelToolsV{top:10px; right:10px; width:150px; padding:10px;}


#measure-box{ position:absolute; background-color: rgba(255, 255, 255, 0.7); bottom:10px; padding:5px 10px; font-size: 12px;}
/* #panel_instructions{left: 50%; transform: translateX(-50%); width: 35%;} */
#measure-box{left:10px;}
#sections-box,#lightCanvas-box{position: absolute; bottom: 10px; right: 10px;}
#sections-box{width: 350px;}
/* #lightCanvas-box, #lightcontroller{height:250px; width:250px;} */

.view > div, .spot > div{display: inline-block; vertical-align: middle;}
.view > .viewToolbar, .spot > .spotToolbar{width:35px;}
.view > .viewDescription, .spot > .spotDescription{width: calc(100% - 40px); padding-right:5px;}
.view textarea, .spot textarea{font-size:12px;}

#object-control{
  position:absolute;
  left: 50%; 
  transform: translateX(-50%); 
  background-color: rgba(255, 255, 255, 0.7); 
  bottom:10px; 
  padding:5px 10px; 

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}
.thumb:nth-child(even){margin: 0 5px;}
.thumb:first-child,.thumb:last-child{margin:0 !important;}
.thumb{
  position: relative;
  width:70px;
  height: 70px;
  cursor: pointer;
  overflow-y: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  flex-direction: row;
}
.backdrop{
  position:absolute;
  top:0;
  left:0;
  width:70px;
  height:70px;
  backdrop-filter: blur(2px);
}

#paradata-modal{position: absolute; top: 5px; left: 5px; width: 450px; height:auto; max-height: 750px; background-color: #fff; padding: 10px 20px; border-radius: 0.375rem;}
#paradata-modal #model-uuid{cursor: pointer;}
#paradata-modal > .paradata-body{font-size: 0.85rem;}
#paradata-modal > .paradata-body span{display: inline-block; vertical-align: top;}
#paradata-modal > .paradata-body > #model-metadata span:first-child{width:100px; font-weight: bold;}
#paradata-modal > .paradata-body > #model-metadata span:last-child{width:275px;}
#paradata-modal .list-group-item{padding:1px}
#doiLi > span{padding:10px 0 !important;}

#paradata-modal > .paradata-body > #objects-metadata span:first-child{width:125px; font-weight: bold;}
#paradata-modal > .paradata-body > #objects-metadata span:last-child{width:135px;}
#objects-metadata > #listWrap{height:auto; max-height: 550px; overflow-x: hidden; overflow-y: auto;}