body {
  margin: 0px;
  min-height: 0;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

@font-face {
  font-family: neuton;
  font-weight: 400;
  font-style: italic;
  src: url("https://cdn.smartvx.com/fonts/Neuton-Italic.ttf") format("truetype");
}

@font-face {
  font-family: neuton;
  font-weight: 400;
  font-style: normal;
  src: url("https://cdn.smartvx.com/fonts/Neuton-Regular.ttf")
    format("truetype");
}

@font-face {
  font-family: "neuton";
  font-style: normal;
  font-weight: bold;
  src: url("https://cdn.smartvx.com/fonts/Neuton-Bold.ttf") format("truetype");
}

/* roboto-regular - latin */
@font-face {
  font-family: "neuton";
  font-style: normal;
  font-weight: 900;
  src: url("https://cdn.smartvx.com/fonts/Roboto-Black.ttf") format("truetype");
}

/* roboto-regular - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("https://cdn.smartvx.com/fonts/Roboto-Regular.ttf")
    format("truetype");
}

/* roboto-regular - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: bold;
  src: url("https://cdn.smartvx.com/fonts/Roboto-Bold.ttf") format("truetype");
}

/* roboto-regular - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  src: url("https://cdn.smartvx.com/fonts/Roboto-Black.ttf") format("truetype");
}

.body {
  /* Break the flow */
  position: absolute;
  top: 0px;

  /* Give them all the available space */
  width: 100vw;
  height: 100vh;

  /* Remove the margins if any */
  margin: 0;

  /* Allow them to scroll down the document */
  overflow-y: hidden;

  z-index: 0;
}

.dslider {
  /* position: absolute;  
  width: 500px;
  height: 50px;
  bottom: 15px;
  left: 80px;   */
  pointer-events: all;
  width: auto;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 10px;
  margin-top: 7px;
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(0, 0, 0, 0);
  z-index: 999;
}

.track {
  position: relative;
  border-radius: 3px;
  width: 100%;
  height: 6px;
  left: 50%;
  top: 50%;
  background: #367ebd99;
  border: #ffffff99 1px solid;
}

.thumb-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  background-color: #ffffffcc;
}

.main_view {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  overflow: hidden;
  margin: 0px;
  transform-origin: left top;
  z-index: 3;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  max-height: 999999px;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  pointer-events: none;
  /* could be an issue with removing inline css from index.html */
}

.speaker {
  height: 30px;
  width: 30px;
  position: relative;
  display: inline-block;
}

.speaker .mute_span {
  display: block;
  width: 8px;
  height: 8px;
  background: #fff;
  margin: 11px 0 0 2px;
}

.speaker .mute_span:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  border-width: 10px 14px 10px 15px;
  left: -13px;
  top: 5px;
}

.speaker .mute_span:before {
  transform: rotate(45deg);
  border-radius: 0 50px 0 0;
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-style: double;
  border-color: #fff;
  border-width: 7px 7px 0 0;
  left: 18px;
  top: 9px;
  transition: all 0.2s ease-out;
}

.speaker:hover .mute_span:before {
  transform: scale(0.8) translate(-3px, 0) rotate(42deg);
}

.speaker.mute .mute_span:before {
  transform: scale(0.5) translate(-15px, 0) rotate(36deg);
  opacity: 0;
}

.playbar {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 996;
  height: 40%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  /* opacity: 0.0; */
  will-change: transform;
  overflow: hidden;
}

.playbar_gradient {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 991;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  /* opacity: 0.0; */
  background-color: rgba(0, 0, 0, 0.5);
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0) 60%
  );
  transition: background-color 0.3s linear;
  transition-delay: 0.5s;
  will-change: transform;
  overflow: hidden;
}

#playPauseButton,
#fullScreenButton,
#muteButtonRegion,
#languagemenubutton,
.languageChoice,
#toggleText {
  cursor: pointer;
}

#languagemenu {
  cursor: auto;
}

.grow-icon {
  pointer-events: all;
}

.tooltip:hover .grow-icon {
  animation: hovergrow 0.9s forwards;
}

@keyframes hovergrow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.playbutton {
  box-sizing: border-box;
  height: 20px;

  border-color: transparent transparent transparent #ffffff;
  transition: 100ms all ease;
  will-change: border-width;
  /*cursor: pointer;*/

  /*play state*/
  border-style: solid;
  border-width: 10px 0px 10px 18px;
  opacity: 1;
}

.pausebutton {
  box-sizing: border-box;
  height: 20px;

  border-color: transparent transparent transparent #ffffff;
  transition: 100ms all ease;
  will-change: border-width;
  /*cursor: pointer;*/

  /* paused state*/
  border-style: double;
  border-width: 0px 0 0px 18px;
  opacity: 1;
}

.loadingbutton {
  box-sizing: border-box;
  height: 20px;

  border-color: transparent transparent transparent #ffffff;
  transition: 100ms all ease;
  will-change: border-width;
  /*cursor: pointer;*/

  /* paused state*/
  border-style: double;
  border-width: 0px 0 0px 18px;
  opacity: 1;
}

.fullbutton {
  box-sizing: border-box;
  height: 26px;
  width: 26px;
  margin: 3px;

  background-size: contain;
  background-image: url("data:image/svg+xml;base64,PHN2ZwogICB3aWR0aD0iMjAuODkxNzUybW0iCiAgIGhlaWdodD0iMjAuOTc3Mjc4bW0iCiAgIHZpZXdCb3g9IjAgMCAyMC44OTE3NTIgMjAuOTc3Mjc4IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc1IgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnCiAgICAgaWQ9ImZ1bGxzY3JlZW5faWNvX3N2ZyIKICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmUiCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuODY2Mjk0NywtMC43Nzk0NjgxKSI+CiAgICA8cGF0aAogICAgICAgaWQ9InJlY3Q4NDYiCiAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZCIKICAgICAgIGQ9Im0gMS42MTYyOTQ3LDkuMzgyODUzMSB2IC03Ljc2Nzg2MyAwIDAgaCA3LjU5NDQzNiIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDE1NjQiCiAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZCIKICAgICAgIGQ9Im0gOS4yMTA3Mjc3LDIxLjAwNjczOSAtNy41OTQ0MzMsM2UtNiB2IDAgLTcuNzY3MzQ0IiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMTM2NyIKICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiNmZmZmZmY7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kIgogICAgICAgZD0ibSAyMS4wMDgwNDQsMTMuMjM5MzkzIDNlLTYsNy43NjczNDkgdiAwIEggMTMuMjQyNTYiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgxNTU5IgogICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2ZmZmZmZjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQiCiAgICAgICBkPSJtIDEzLjI0MjU2MywxLjYxNDk5MzEgNy43NjU0ODQsLTNlLTYgdiAwIGwgLTNlLTYsNy43Njc4NiIgLz4KICA8L2c+Cjwvc3ZnPg==");
  opacity: 1;
}

.restorebutton {
  box-sizing: border-box;
  height: 26px;
  width: 26px;
  margin: 3px;

  background-size: contain;
  background-image: url("data:image/svg+xml;base64,PHN2ZwogICB3aWR0aD0iMjAuODkxNzUybW0iCiAgIGhlaWdodD0iMjAuOTc3Mjc4bW0iCiAgIHZpZXdCb3g9IjAgMCAyMC44OTE3NTIgMjAuOTc3Mjc4IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc1IgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnCiAgICAgaWQ9InJlc3RvcmVfaWNvX3N2ZyIKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC44NjYyOTQ3LC0wLjc3OTQ2ODEpIj4KICAgIDxwYXRoCiAgICAgICBpZD0icmVjdDk3Mi03LTEiCiAgICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmU7ZmlsbDpub25lO3N0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZCIKICAgICAgIGQ9Im0gMTMuMzI4MDg3LDIxLjAwNjc0NiB2IC03Ljc2NTQwOSAwIGggNy42Nzk4ODUgdiAwIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJyZWN0OTcyLTctMS0xIgogICAgICAgc3R5bGU9ImRpc3BsYXk6aW5saW5lO2ZpbGw6bm9uZTtzdHJva2U6I2ZmZmZmZjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQiCiAgICAgICBkPSJtIDIxLjAwNzk3Miw5LjI5NDg3ODEgaCAtNy43NjU0MDkgdiAwIC03LjY3OTg4NSAwIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJyZWN0OTcyLTctMS0xLTgiCiAgICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmU7ZmlsbDpub25lO3N0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZCIKICAgICAgIGQ9Im0gOS4zODE2Mjk3LDEuNTI5NDY4MSB2IDcuNzY1NDA5IDAgaCAtNy42Nzk4ODUgdiAwIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJyZWN0OTcyLTctMS0xLTgtNCIKICAgICAgIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOm5vbmU7c3Ryb2tlOiNmZmZmZmY7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kIgogICAgICAgZD0ibSAxLjcwMTc0NDcsMTMuMjQxMzM3IGggNy43NjU0MDkgdiAwIDcuNjc5ODg1IDAiIC8+CiAgPC9nPgo8L3N2Zz4K");
  opacity: 1;
}

.playbackChoice {
  cursor: pointer;
}

.playbackChosen {
  font-weight: bold;
}

.settingsmenu {
  visibility: hidden;
  /* Position the tooltip */
  position: absolute;
  z-index: 2;
  padding: 10px;
  background-color: black;
  border-radius: 6px;
  bottom: 230%;
  left: -180%;
  margin-left: -60px;
  transition: all 0.1s linear;
}

.settingsmenuvisible {
  visibility: visible;
  transition: visibility 0.1s linear;
}

.languagemenu {
  visibility: hidden;
  /* Position the tooltip */
  position: absolute;
  z-index: 2;
  /* width: 180px; */
  padding: 10px;
  background-color: black;
  border-radius: 6px;
  bottom: 230%;
  left: -180%;
  margin-left: -60px;
  transition: all 0.1s linear;
}

.languagemenuvisible {
  visibility: visible;
  transition: visibility 0.1s linear;
}

.languageChosen {
  font-weight: bold;
}

.mobiletooltip {
  display: none;
}

.button-outline {
  position: absolute;
  height: 36px;
  width: 36px;
  left: 0px;
  top: 0px;
}

.tooltip {
  outline: none;
  display: inline-block;
  pointer-events: all;
}

.tooltip-focus:focus > div:first-child {
  outline: 3px solid #5797cf;
}

.tooltip .tooltiptext {
  visibility: hidden;
  outline: none;
  /* width: 100px; */
  background-color: black;
  font-family: sans-serif;
  font-size: 1em;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 5px;
  white-space: nowrap;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  transition: all 0.1s linear;
}

.tooltip:hover .tooltiptext {
  outline: none;
  visibility: visible;
  transition: visibility 0.1s linear;
}

.tooltip-focus:focus .tooltiptext {
  outline: none;
  visibility: visible;
  transition: visibility 0.1s linear;
}

.date-grid {
  display: grid;
  row-gap: 5px;
  grid-template-columns: repeat(7, 1fr);
}

.loader {
  font-size: 10px;
  /* margin: 50px auto; */
  margin-left: 30px;
  text-indent: -9999em;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(
    left,
    #ffffff 10%,
    rgba(255, 255, 255, 0) 42%
  );
  background: -webkit-linear-gradient(
    left,
    #ffffff 10%,
    rgba(255, 255, 255, 0) 42%
  );
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(
    left,
    #ffffff 10%,
    rgba(255, 255, 255, 0) 42%
  );
  background: linear-gradient(
    to right,
    #ffffff 10%,
    rgba(255, 255, 255, 0) 42%
  );
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loader:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}

.loader:after {
  background: #7f7f7f;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.octagon-shape {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
}

/* below was taken from inline index.html styling */

.splash-screen {
  position: absolute;
  z-index: 4000;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.splash-flex {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.splash-flex-top {
  justify-content: flex-start;
  align-items: center;
  color: #ffffff;
}

.splash-flex-top-text {
  margin-bottom: 5vh;
  margin-top: 2vh;
  text-align: center;
  font-size: 150%;
}

.splash-spinner-gradient-header {
  height: 50%;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0) 96%
  );
}

.splash-screen-backer {
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    circle 700px at center,
    #6bb7ff 0%,
    #0078ea 99%
  );
  background-size: cover;
  background-position-x: center;
  background-position-y: center;
  background-color: #f2f3f8;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.splash-spinner {
  box-sizing: border-box;
  position: absolute;
  z-index: 3;
  height: 40%;
  aspect-ratio: 1;
  transform-origin: center center;
  border-radius: 50%;
  border-top: 7px solid #5d78ff;
  border-right: 7px solid transparent;
  animation: spinner 1s linear infinite;
}

.closed_caption_line {
  position: absolute;
  top: 0px;
  left: 0px;
  color: white;
  background-color: black;
  padding: 3px;
  font-size: 40px;
}

#splash-language-selector {
  position: absolute;
  z-index: 6000;
  overflow-y: auto;
  bottom: 0;
  right: 0;
  transform-origin: 100% 100%;
}

#languagechangecontainer {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-content: flex-start;
  margin: 20px;
}

#languagechangeheader {
  padding: 0.5em;
  text-align: center;
  background: #3d3f41;
  border: 1px solid black;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}

.splashLanguageChoice.splashLanguageCurrentChoice {
  border: 3px solid black;
}

.splashLanguageChoice {
  padding: 0.25rem 1.5rem;
  margin: 2px;
  font-size: 1.5rem;
  line-height: 1.75;
  color: white;
  border-radius: 0.375rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 1px 1px rgba(0, 0, 0, 0.075);
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid #6c757d;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  opacity: 80%;
  font-weight: bold;
  background: radial-gradient(
    circle 90px at center,
    #ffffffee 0%,
    #ffffffcc 70%
  );
  color: #022c36;
}

.splashLanguageChoice:hover {
  background-color: #202326;
}