.container {
  @apply py-20 bg-stone-50 mb-16;
}

.panel {
  @apply pt-10 px-10;
}

.tabList {
  @apply px-6;
}

.tab {
  @apply w-32 h-10 text-[#9AA5AD] relative;
  button {
    @apply flex items-center w-full;
  }
  span {
    @apply flex-shrink-0;
  }
}

.activeTab {
  @apply text-storm-600 border-storm-600;
}

.check {
  @apply mt-1.5 text-xl mr-2 flex-shrink-0 absolute left-0;
}

.isCompleted {
  @apply text-green-400;
}

.databaseForm {
  @apply w-full max-w-2xl mx-auto mt-14;
  a {
    @apply text-coral-300;
  }
  a:hover {
    @apply text-coral-400;
  }
  h3 {
    @apply mb-4;
  }
}

.welcome {
  @apply text-center;
  h1 {
    @apply text-4xl font-semibold;
  }
  p {
    @apply text-xl  my-6 leading-8;
  }
}

.whiteContainer {
  @apply max-w-2xl w-full border rounded-lg py-10 bg-white mx-auto;
}

.top {
  @apply mx-10;
}

.form {
  @apply flex items-center flex-col;
}

.label {
  @apply text-left;
}

.typeSelect {
  @apply mb-4 w-full;
}

.typeSelectInner {
  @apply w-full;
}

.or {
  @apply font-semibold text-center w-full my-5 text-lg text-stone-100;
}

.or::before,
.or::after {
  content: "";
  @apply w-[46%] border-t border-stone-100 inline-block align-middle relative;
}

.or::after {
  @apply right-0 -ml-[52%];
}

.or::before {
  @apply left-0 -mr-[52%];
}

.advancedSettings {
  @apply my-5 flex items-center;

  svg {
    @apply mr-2;
  }
}

.checkbox,
.radio {
  @apply mb-3 text-sm w-full;
}

.form .checkbox {
  svg {
    @apply text-coral-300;
    &:hover {
      @apply text-coral-400;
    }
  }
}

.instructions {
  @apply mb-8;
}

.buttons {
  @apply flex flex-col;
}

.button {
  @apply mt-8 mr-2 min-w-36 py-2 bg-coral-300;
  &:hover {
    @apply bg-coral-400;
  }
}

.popup {
  @apply text-storm-600 py-2 px-4 text-center;
}

.goBack {
  @apply mx-8;
}
