html,
body {
  min-height: 100%;
  margin: 0;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  user-select: none;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: none;
}

.splash {
  /* background-image: url('/splash_desk.svg'); */
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 100%;
  width: 100%;
}

.static-splash {
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  z-index: 100200;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  /* remove for prod */
  /* display: none;  */
}

.light .static-splash {
  background-color: #eaeaea;
  color: rgb(28, 36, 47);
}

.dark .static-splash {
  color: #ddd;

  --base: #1c242f;
  --base-1: #202a37;
  --base-2: #181f28;
  --base-3: #111821;

  background: linear-gradient(
    to bottom,
    var(--base-1),
    var(--base-2) 40%,
    var(--base-3) 100%
  );
}

.dark .static-splash::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(64, 115, 255, 0.12) 0%,
    rgba(64, 115, 255, 0.06) 30%,
    rgba(64, 115, 255, 0) 60%
  );
  mix-blend-mode: screen;
}

.static-splash.hide {
  transition: opacity 1s ease-in-out;
  opacity: 0;
}

.static-splash__logo {
  width: 150px;
  height: 60px;
}

.light .dotLoader {
  --c: rgb(28, 36, 47) 92%, #0000;
}

.dark .dotLoader,
.dotLoaderWhite {
  --c: #fff 92%, #0000;
}

.static-splash__loader {
  margin-top: 30px;
}

.history-page__footer .dotLoader {
  margin: auto;
}

.dotLoader {
  width: 90px;
  height: 14px;
  background: radial-gradient(circle closest-side, var(--c)) calc(100% / -4) 0,
  radial-gradient(circle closest-side, var(--c)) calc(100% / 4) 0;
  background-size: calc(100% / 2) 100%;
  animation: l14 1.5s infinite;
}

@keyframes l14 {
  0% {
    background-position: calc(100% / -4) 0, calc(100% / 4) 0;
  }
  50% {
    background-position: calc(100% / -4) -14px, calc(100% / 4) 14px;
  }
  100% {
    background-position: calc(100% / 4) -14px, calc(3 * 100% / 4) 14px;
  }
}

@keyframes l15 {
  90%,
  100% {
    background-position: -30px 30px, -20px 40px, -10px 50px;
  }
}

.static-splash__title {
  font-size: 22px;
  font-family: 'Gotham_Pro_Medium';
  margin-top: 30px;
  text-align: center;
  width: 485px;
  line-height: 40px;
}

@media (max-width: 480px) {
  .static-splash__title {
    width: 85%;
  }
}

.static-splash__description {
  font-size: 15px;
  text-align: center;
  font-family: 'Gotham_Pro_Regular';
  margin-top: 35px;
  width: 262px;
  line-height: 20px;
}

.static-splash__description-by {
  font-size: 15px;
  text-align: center;
  font-family: 'Gotham_Pro_Regular';
  width: 262px;
  line-height: 20px;
}

.static-splash__try-again {
  visibility: hidden;
}

.static-splash__try-again button {
  border-radius: 6px;
  border: 1px solid transparent;
  min-width: 120px;

  justify-content: center;
  align-items: center;

  box-sizing: border-box;
  font-size: 14px;
  padding: 14px;
  padding-left: 28px;
  padding-right: 28px;
  font-family: Gotham_Pro_Medium;

  text-transform: uppercase;
  position: relative;
  z-index: 1000;

  transition: all 0.5s ease;
  margin-top: 35px;
  cursor: pointer;
}

.dark .static-splash button {
  background-color: #283646;
  color: #0796ea;
}

.dark .static-splash button:hover {
  background-color: #bfc2c9;
}

.dark .static-splash button:active {
  background-color: transparent;
  border-color: #dddddd;
  color: #dddddd;
}

.light .static-splash button {
  background-color: #d6d6d6;
  color: #0075ba;
}

.light .static-splash button:hover {
}

.light .static-splash button:active {
  background: transparent;
  border-color: #404040;
  color: #404040;
}

@media screen and (max-width: 480px) {
  html.scrolling,
  body.scrolling {
    /*[Vadim] testing, disabled since it makes flickering */
    /*position: fixed;*/
    /*width: 100%;*/
  }

  html.focused,
  body.focused {
    -webkit-overflow-scrolling: auto;
    /*todo: [vadim] research why*/
    overflow: auto !important;
  }
}

@media screen and (max-width: 1024px) {
  .splash {
    /* background-image: url('./splash_mob.svg'); */
  }
}

#sumsub-websdk-container {
  width: 100%;
}


.fullContentIsHidden {
  visibility: hidden !important;

  /* need this strange workaround to avoid the chart being rendered over the hidden content  */
  display: block !important;
}