html body{
  overflow-x: hidden;
}
.loading{
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
}
.hidden{
  display:none;
}
.sxs-player
{
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.yellow-border
{
    border: solid 3px rgba(255, 206, 86, 1);
}
.red-border
{
    border: solid 3px rgba(255, 99, 132, 1);
}
.ref{
  width: 33%;
  position: absolute;
  z-index: 99;
  right: calc(var(--bs-gutter-x) * .5);
  border: solid 3px #fff;
}
  .ref.description_all{
    top: calc( 9 / 16 * (50vw) + 38px);
    right: 0;
    height: calc(100vh - (9 / 16 * (50vw) + 88px));
    width: calc(100% - 0.75rem);
    left: 0.375rem;
  }
  .ref.margin-top{
    width: 40%;
    margin-top: 40px;
  }
.terminal{
  display: none;
  font-size: 100%;
  overflow-y: scroll;
  background-color: rgb(14,40,91);
}
    .charts .terminal{
      min-height:30px;
      max-height: calc( 100vh - (((50vw - 1.5rem) / 16) * 9) - 3rem - 30px - 30px );
    }
    .terminal span{
      display: block;
    }
    .terminal .Warning, .terminal .warning{
      color:rgba(255, 206, 86, 1);
    }
    .terminal .Error, .terminal .error{
      color:rgba(255, 99, 132, 1);
    }
    .terminal .timestamp{
      display: inline-block;
	  width: 100px;
	}
.charts{
  padding-top: 0.5rem;
  flex-grow: 1;
}
  .charts canvas{
    height: 100%;
  }
input[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track, input[type=range]::-ms-track
{
    height: 3px!important;
}
button.toggle-play-pause {
    border: 0;
    background: transparent;
    box-sizing: border-box;
    width: 0;
    height: 20px;
    border-color: transparent transparent transparent #ffffff;
    transition: 100ms all ease;
    cursor: pointer;
    border-style: solid;
    border-width: 10px 0 10px 15px;
  }
  button.pause {
    border-style: double;
    border-width: 0px 0 0px 15px;
  }
  button.toggle-play-pause:hover {
    border-color: transparent transparent transparent #eeeeee;
  }
button.toggle-fullscreen, button.toggle-description{
  background: transparent;
  box-sizing: border-box;
  color: #fff;
  height: 30px;
}
button.toggle-fullscreen:before {
  content: '\2921';
}
button.toggle-description:before {
  content: '\24D8';
}
.fullscreen-capable{
  opacity: 100;
  -webkit-transition: width 0.5s ease-in-out, margin 0.5s ease-in-out, opacity 0.5s ease-in-out;
  -moz-transition: width 0.5s ease-in-out, margin 0.5s ease-in-out, opacity 0.5s ease-in-out;
  -o-transition: width 0.5s ease-in-out, margin 0.5s ease-in-out, opacity 0.5s ease-in-out;
  transition: width 0.5s ease-in-out, margin 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.fullscreen{
  width: 160vh;
  margin: 0 calc((100vw - 160vh) / 2);
}
.time
{
    font-size: 80%;
    padding: 3px 10px;
}
.ml-auto{
  margin-left: auto;
}
.small{
  font-size: 0.875em!important;
  padding: .175rem .75rem!important;
  margin-top: -.175rem;	
}