*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--van-gray-1);
  color-scheme: light;
  overflow: hidden;
}

html.dark {
  background: #222;
  color-scheme: dark;
}

#app {
  // Dynamic Viewport Units
  height: 100dvh;
  position: relative;
  overflow: hidden;

  .van-config-provider {
    overflow: hidden;
  }
}

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.slide-fadein-left-enter-active,
.slide-fadein-left-leave-active,
.slide-fadein-right-enter-active,
.slide-fadein-right-leave-active {
  transition:
    opacity 0.3s,
    transform 0.4s,
    -webkit-transform 0.4s;
}

.slide-fadein-left-enter-from,
.slide-fadein-right-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

.slide-fadein-left-leave-to,
.slide-fadein-right-enter-from {
  transform: translateX(-20px);
  opacity: 0;
}

.app-container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #f5f5f5;
  position: relative;

  .flex-row {
    display: flex;
    flex-direction: row;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
  }

  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bottom-block-btn {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    height: 42px;
    width: 340px;
    border-radius: 20px;
    font-size: 16px;
  }

  .van-nav-bar {
    &.self-nav-bar {
      background: rgba(255, 255, 255, 0);
      &:after {
        border: none;
      }
      .van-nav-bar__title {
        font-size: 19px;
        color: #191919;
      }
    }
  }

  .absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
