:root {
  --app-height: 100%;
  --app-width: 100%;
}

* {
  outline: none;
}

html, body {
  margin: 0;
  padding: 0;
  background: white;
  overflow: hidden;
  font-family: 'Open Sans Regular', sans-serif;
}

#root {
  display: flex;
  width: var(--app-width);
  height: var(--app-height);
  position: relative;
}

#root .bg {
  position: relative;
  overflow: hidden;
}

#root .bg .poster {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition-duration: 0.3s;
}

#root .bg video {
  width: 100%;
  height: 99%;
  bottom: 0;
  position: absolute;
  object-fit: cover;
}

#root .bg.show .poster {
  opacity: 0;
}

#bootloader-container {
  background: white;
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 100;
  font-weight: bold;
  transition-delay: 0.3s;
  transition-duration: 1s;
}

#bootloader-container.off {
  opacity: 0;
  visibility: hidden;
}

.logo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}

@keyframes rotate {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0);
  }
}

.logo-container img {
  position: absolute;
  width: 18vmin;
  height: 18vmin;
}

#bootloader-container .logo-container img.logo-out:not(.stop) {
  animation: rotate 2s linear infinite;
}

/*noinspection CssInvalidPropertyValue,CssOverwrittenProperties*/
img, canvas {
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated; /* Chrome */
  image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
}

.react-time-picker__wrapper,
.react-date-picker__wrapper,
.react-datetime-picker__wrapper {
  border: none !important;
}

.react-datetime-picker__inputGroup > *,
.react-time-picker__inputGroup > *,
.react-date-picker__inputGroup > * {
  font-size: 30px !important;
}