@import url('./theme/theme.css');

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: normal;
  overflow: hidden;
}

ul {
  padding-inline-start: 0px !important;
}

#app-loading {
  transition: 0.5s all;
  display: none;
  position: absolute;
  z-index: 10000;
  height: 100%;
  width: 100%;
  top: 0;
}

#app-loading .loading-group {
  z-index: 10000;
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  top: 0;
}

#app-loading .loading-group svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  fill-rule: evenodd;
  width: 30vw;
  animation-fill-mode: both;
}

#app-loading .loading-group .version {
  position: absolute;
  bottom: 10px;
  font-family: sans-serif;
  font-stretch: 75%;
  user-select: all;
}

#app-loading .loading-group.skadii svg {
  animation-name: opacity-loop;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

#app-loading .loading-group #overlay {
  animation-name: move-grad;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
  position: absolute;
  width: 300px;
  height: 300px;
  width: 100vw;
  transform: translate(0, 0);
}

#app-loading .loading-group.prinoth #overlay {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #000 45%, #000 55%, rgba(255, 255, 255, 0) 100%);
}

#app-loading .loading-group.demaclenko #overlay {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #007bc0 45%, #007bc0 55%, rgba(255, 255, 255, 0) 100%);
}

#app-loading .loading-group.ropeways #overlay {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #a3a3a3 45%, #a3a3a3 55%, rgba(255, 255, 255, 0) 100%);
}

@keyframes opacity-loop {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes move-grad {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(65vw, 0);
  }

  50.0001% {
    transform: translate(-65vw, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

noscript::before {
  content: '';
  display: block;
  position: absolute;
  text-align: center;
  top: 70px;
  background: url('/assets/logos/skadii/skadii.png') no-repeat;
  background-position: center;
  height: 84px;
  width: 100%;
}

noscript::after {
  content: 'Application loading failed because javascript is disabled. \A Please turn on javascript.';
  font-family: sans-serif;
  font-weight: bold;
  white-space: pre;
  color: #333;
  width: 100%;
  position: absolute;
  text-align: center;
  top: 180px;
}

#app-error {
  background: #111434;
  fill: white;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  transition: 0.5s all;
  z-index: 10000000000000;
}

#app-error > * {
  user-select: all;
  font-family: monospace;
  text-align: center;
}

#app-error img {
  width: 300px;
  max-width: 80%;
  margin: 30px;
}

#app-error p {
  margin: 10px;
  font-size: 20px;
}

#app-error h1 {
  font-size: 30px;
  margin: 0;
  font-weight: bold;
  letter-spacing: 0rem;
  line-height: 1;
}

#app-error button {
  background: none;
  border: 1px solid #86cad5;
  border-radius: 5px;
  padding: 5px;
  color: #86cad5;
  cursor: pointer;
  user-select: none;
}

#app-error button:hover {
  background: #86cad5;
  color: #182159;
}

#app-error .version {
  position: absolute;
  bottom: 10px;
}

/* 
  Skadii Animation:
*/
#skadii_inter_animation .svg-elem-1 {
  -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

#skadii_inter_animation.active .svg-elem-1 {
  fill: rgb(32, 166, 223);
}

#skadii_inter_animation .svg-elem-2 {
  -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

#skadii_inter_animation.active .svg-elem-2 {
  fill: rgb(32, 166, 223);
}

#skadii_inter_animation .svg-elem-3 {
  -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

#skadii_inter_animation.active .svg-elem-3 {
  fill: rgb(32, 166, 223);
}

#skadii_inter_animation .svg-elem-4 {
  -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
  transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

#skadii_inter_animation.active .svg-elem-4 {
  fill: rgb(32, 166, 223);
}

#skadii_inter_animation .svg-elem-5 {
  -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
  transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

#skadii_inter_animation.active .svg-elem-5 {
  fill: rgb(32, 166, 223);
}

#skadii_inter_animation .svg-elem-6 {
  -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
  transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

#skadii_inter_animation.active .svg-elem-6 {
  fill: rgb(32, 166, 223);
}

#skadii_inter_animation .svg-elem-7 {
  -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
  transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

#skadii_inter_animation.active .svg-elem-7 {
  fill: rgb(32, 166, 223);
}