#logo-head {
    height:7.5%;
    border-radius: 5px;
    margin: 0.5% 0.5% 0.25% 0.5%;
}

#canvas {
  width: 70%;
  height: 70%;
  position: relative;
  float: left;
  margin: 0.25% 0.25% 0.25% 0.5%;
}

#subcanvas {
  width: 28.5%;
  height: 45%;
  float: left;
  position: relative;
  margin: 0.25% 0.5% 0.25% 0.25%;
}

#inspector {
  position: relative;
  width: 28.5%;
  height: 45.5%;
  float: left;
  margin: 0.25% 0.5% 0.5% 0.25%;
}

#model-browser {
  position: absolute;
  width: 70%;
  height: 20.3%;
  top: 78.2%;
  margin: 0.25% 0.25% 0.5% 0.5%;
  float: left
}

.info-text-cat {
  font-family: quicksand;
  font-size: smaller;
  font-weight: bold;
  margin: 5px 5px 5px 10px;
  line-height: 0.25;
}

#model-info {
  position: absolute;
  top: 10%;
}

#node-info {
  position: absolute;
  top: 40%;
}

#matrix-output {
  font-family: quicksand;
  font-size: x-small;
  top: 55%;
  left: 50%;
  text-align: center;
}

#models-scroller {
  width: 98%;
  height: 80%;
  position: relative;
  left: 1%;
  border: 1px solid black;
  top: 14%;
  border-radius: 5px;
  float: left;
  /* overflow-y: scroll; */
  white-space: nowrap;
}

#model-browser-buttons {
  position: absolute;
  width: 17%;
  top: 40%;
  left: 1.5%;
}

.model-thumb {
  border: 1px solid black;
  width: 18.8%;
  height: 85%;
  margin: 1% 0% 1% 1%;
  border-radius: 5px;
  text-align: center;
  float: left;
  z-index: 10;
}

.model-thumb img {
  border-radius: 5px;
  width: 100%;
  height: 100%;
}

#model-info-keys {
  font-weight: normal;
  float: left;
  padding-left: 15px;
  vertical-align: middle;
  padding-top: 5px;

}

#model-info-values {
  font-weight: normal;
  font-size: small;
  float: left;
  padding-left: 10px;
  vertical-align: middle;
  padding-top: 5px;

}

#node-info-keys {
  font-weight: normal;
  float: left;
  padding-left: 15px;
  vertical-align: middle;
  padding-top: 5px;

}

#node-info-values {
  font-weight: normal;
  font-size: small;
  float: left;
  padding-left: 10px;
  vertical-align: middle;
  padding-top: 5px;

}

body, html {
    height: 99%;
    background-color: #00629e;
}

.comp-container {
    border: 2px solid black;
    border-radius: 5px;
    background-color: #dadcde;
}

/* #subviewer {
  height: 95%;
  width: 95%;
} */

.comp-label {
  position: absolute;
  padding: 4px 6px 4px 6px;
  font-family: quicksand;
  font-weight: bold;
  font-size: smaller;
  left: 0.5%;
}

#inspector-buttons {
  margin: 0px 10px 0px 10px;
  position: absolute;
  bottom: 6%;
  left:7%;
}

#inspector-info {
  height: 75%;
  width: 95%;
  position: relative;
  top: 5%;
  left: 4%;
}

#ts3dlogo {
  height: 100%;
  width: 50%;
  /* left: 0%; */
  position: relative;
  float: left;
}

#ts3dlogo img {
  max-width:50%;
  max-height:60%;
  top: 22%;
  left: 2%;
  position: relative;
}

#hclogo {
  height: 100%;
  width: 50%;
  float: left;
  position: relative
}

#hclogo img{
  max-width: 60%;
  max-height: 65%;
  top: 20%;
  display: flex;
  float: right;
  right: 2%;
  position: relative;
}

.button-row {
  margin: 2px;
  border: 1px solid black;
  background-color: #00629e;
  font-family: quicksand;
  font-size: smaller;
}