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


/* Inspector */

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

#model-info {
  position: absolute;
  top: 7%;
  left: 2%;
  width: 90%;
}

#node-info {
  position: absolute;
  top: 30%;
  left: 2%;
}

#inventory-info {
  position: absolute;
  top: 48%;
  left: 2%;
}

#inspector-info {
  height: 100%;
}


/* Canvas */

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

#model-browser {
  width: 22%;
  height: 91.5%;
  margin: 0.25% 0.5% 0.5% 0.25%;
  float: left;
}

#display-filter {
  position: absolute;
  width: 60%;
  height: 30%;
  top: 68.75%;
  left: 17%;
}

#displayModeContainer {
  font-size: smaller;
  position: absolute;
  width: 98%;
  bottom: 3%;
  padding: 1% 17% 0% 16%;
  left: 1%;
  overflow: unset;
}

#filterSliders {
  position: absolute;
  width: 48.5%;
  height: 65%;
  top: 13%;
  left: 1%;
}

#companyFilter {
  position: absolute;
  width: 48.5%;
  height: 65%;
  top: 13%;
  left: 50.5%;
  font-size: smaller;
}

#companyLabel {
  margin: 2% 2% 1% 2%;
}

.companyFilterButton {
  border-radius: 5px;
  width: 30%;
  height: 75%;
  /* top: 20%; */
  position: relative;
  left: 2%;
}

.companyFilterButton.selected {
  border-style: inset;
  border-color: #c1c1c1;
  border-width: 4px;
}

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

#models-scroller {
  width: 96%;
  height: 94.5%;
  position: relative;
  left: 2%;
  /* right: 3%; */
  border: 1px solid black;
  top: 4.5%;
  border-radius: 5px;
  /* float: left; */
  overflow-y: scroll;
  white-space: nowrap;
  /* margin: 2% 1% 1% 2%; */
}

.subcomp {
  border: 1px solid black;
  border-radius: 5px;
  overflow-y: scroll;
  white-space: nowrap;
}

#model-browser-buttons {
  position: relative;
  width: 40%;
  top: 5.5%;
  left: 33.5%;
}

.inspector-values {
  font-size: smaller;
  margin-left: 0.5rem;
}

.model-thumb {
  border: 1px solid black;
  margin: 3% 3% 0% 3%;
  border-radius: 5px;
  text-align: center;
  float: left;
  z-index: 10;
  background-color:#96b3d1;
}

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

#file-input {
  height: 0px;
  width: 0px;
  visibility: hidden;
}

#model-info-keys {
  float: left;
  padding-left: 10px;
  vertical-align: middle;
  padding-top: 5px;
  font-size: smaller;

}

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

}

#node-info-keys {
  float: left;
  padding-left: 10px;
  vertical-align: middle;
  padding-top: 5px;
  font-size: smaller;

}

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

}

#inv-info-keys {
  float: left;
  padding-left: 10px;
  vertical-align: middle;
  padding-top: 5px;
  font-size: smaller;
}

#inv-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: #883738;
    font-family: quicksand;
}

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


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

#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: x-small;
}

#price-slider {
  position: absolute;
  top: 53%;
  left: 5%;
  font-size: small;
  width: 88%;

}

.pSlider {
  margin-bottom: 2%;
}

#stock-slider {
  position: absolute;
  top: 7%;
  left: 5%;
  font-size: small;
  width: 88%;
}


.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 2px; /* Specified height */
  background: #883737; 
  outline: none; /* Remove outline */
  opacity: 1.0; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 22px; /* Set a specific slider handle width */
  height: 22px; /* Slider handle height */
  cursor: pointer; /* Cursor on hover */
  background: url('../../img/3rings.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  cursor: pointer; /* Cursor on hover */
  background: url('../../img/3rings.png');
  background-repeat: no-repeat;
}



.price-slider2 {
  position: relative;
  text-align: center;
}

.price-slider2 input {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 15px;
  width: 100%;
  outline: none;
  height: 2px;
  margin: 0; 
  padding: 0;
  border-radius: 8px;
}

.price-slider2 input::-webkit-slider-thumb {
  pointer-events: all;
  position: relative;
  z-index: 1;
  outline: 0;
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 12px;
  background-color: white;
  background: url('../../img/3rings.png');
  background-repeat: no-repeat;
  background-size: cover;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.price-slider2::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 22px; /* Set a specific slider handle width */
  height: 22px; /* Slider handle height */
  cursor: pointer; /* Cursor on hover */
  background: url('../../img/3rings.png');
  background-repeat: no-repeat;
  background-size: cover;
}

/* width */
::-webkit-scrollbar {
  width: 0%;
  height: 0%;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}