.onboarding-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99;
}

/* .onboarding-container.background {
  pointer-events: all;
  background-color: #000000db;
} */
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: all;
  background-color: #000000db;
  /* z-index: 1; */
}

.onboarding {
  position: absolute;
  width: 200px;
  height: fit-content;
  display: flex;
  align-items: center;
}

.direction-top > .onboarding {
  flex-direction: column;
}

.direction-bottom > .onboarding {
  flex-direction: column-reverse;
}

.direction-left > .onboarding {
  flex-direction: row;
}

.direction-right > .onboarding {
  flex-direction: row-reverse;
}

.hide {
  opacity: 0;
}
