BODY {
  overflow-x: hidden;
  font-family: 'averta';

  user-select: none;

  margin: 0;
  padding: 0;

  background: white;

  scroll-behavior: smooth;

  overflow-y: hidden;
  overflow-x: auto;
}

#loading-overlay {
  display: block;

  width: 100%;
  height: 100%;

  position: fixed;
  top: 0px;
  left: 0px;

  background: white;

  z-index: 100; /* FRONT */

  text-align: center;

  transition: 0.4s;

  cursor: progress;
}
#loading-overlay #loader {
  width: 40px;

  display: block;

  position: absolute;
  top: calc(50% + 30px); /* it is -20 + 50 */
  left: calc(50% - 20px);

  animation: rotate 3s infinite linear;
}
#loading-overlay #logon {
  display: block;

  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, calc(-50% - 50px));

  width: 100px;
}
#loading-overlay #logo {
  display: block;

  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, calc(-50% - 50px));

  width: 100px;

  transition: clip-path 1s;
}
#loading-overlay #load-info {
  font-size: 12px;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 20px;
  font-weight: 700;
  color: #233642;
  transition: 0.4s;
  text-transform: uppercase;
}

#main-container {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: scroll;

  display: block;

  width: 100%;
  height: 100%;
}
#main-container #bg-img {
  position: absolute;
  top: 0px;
  left: 0px;


  width: 100%;
  height: 100%;
  object-fit: cover;

  z-index: -10;

  transition: 0.5s;
}


#main-container #app-logo {
  position: fixed;
  top: 40px;
  left: 40px;

  display: block;

  height: 60px;

  z-index: 60;
}

#movivi {
  width: 100%;
  height: calc(100% - 140px);
  overflow: hidden;
  position: relative;
  margin: 0;
}

#viruselect {
  width: 100%;
  height: 140px;
  margin: 0;

  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;

  text-align: center;
}

#viruselect .virus {
  width: fit-content;
  height: 60px;
  background: #f8f8f8;
  display: inline-block;
  border-radius: 20px;
  margin-left: 15px;
  margin-right: 15px;

  margin-top: 40px;

  transition: 0.2s;

  cursor: pointer;
}
#viruselect .current {
  background: #233642;
}
#viruselect .virus .vtext {
  font-size: 16px;
  font-weight: 700;
  color: #233642;
  margin-left: 20px;
  margin-right: 20px;
  line-height: 30px;
}
#viruselect .current .vtext {
  color: white;
}

model-viewer::part(default-progress-bar) {
  display: none;
}


@media only screen and (max-height: 700px) {
  #movivi {
    height: calc(100% - 100px);
  }
  #viruselect {
    height: 100px;
  }
  #viruselect .virus {
    margin-top: 20px;
  }
}

@media only screen and (max-width: 800px) {
  #app-logo {
    display: none !important;
  }
  #movivi {
    height: calc(100% - 140px) !important;
  }

  #viruselect::-webkit-scrollbar {
    display: none !important;
  }
}


@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes loadslow {
  0% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.moved-out {
  opacity: 0;
  pointer-events: none !important;
}

*:focus {
    outline: none;
}

::selection {
  background: #0086D1;
  color: white;
}

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub {
  top: 0.4em;
}

::-webkit-scrollbar {
  display: none;
}
#viruselect::-webkit-scrollbar {
  display: block;
  width: 12px;
}
#viruselect::-webkit-scrollbar-track {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
#viruselect::-webkit-scrollbar-thumb {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: #233642;
  background-image: linear-gradient(to left, #25B99A, #00BEBF);

  min-height: 60px;

}
#viruselect::-webkit-scrollbar-thumb:hover {
  background: #25B99A;
}
#viruselect::-webkit-scrollbar-thumb:window-inactive {
  background: #e9e9e9;
}

/* Consider removing??? */
*:focus {
    outline: none;
}