.container {
  @apply hidden;
  @screen lg {
    @apply bg-storm-500 pt-6 flex flex-col;
  }
}

.openContainer {
  @apply transition-width w-96 min-w-[24rem] duration-75;
  flex-basis: 24rem;
}

.closedContainer {
  @apply transition-width w-16 duration-75;
  flex-basis: 3rem;
}

.showForMobile {
  @apply flex flex-col fixed top-0 right-0 left-0 bottom-0 bg-stone-50 z-50 w-full py-6;
  ol {
    @apply bg-stone-50;
  }
}

.top {
  @apply pb-2;
}

.topLine {
  @apply flex justify-between items-center w-full pb-2 px-4;
}

.menuIcon {
  @apply hidden;
  @screen lg {
    @apply block cursor-pointer mx-1 text-white;
  }
}

.closedContainer .menuIcon {
  @apply mt-3;
}

.openBranchSelector {
  @apply opacity-100 transition-opacity duration-75 min-w-[200px];
}

.openNav {
  @apply opacity-100 transition-opacity duration-75 relative h-full overflow-hidden;
}

.createBranch {
  @apply relative text-base ml-[0.8rem];
}

.createBranchDisabled a {
  @apply text-stone-500;

  &:hover {
    @apply text-stone-500;
  }
}

.createBranchIcon {
  @apply hidden;

  @screen lg {
    @apply block font-bold text-xl cursor-pointer -ml-4 text-white border-2 rounded-full border-white;
    path {
      @apply stroke-[3.5rem];
    }
  }
}

.closedItem {
  @apply hidden;
}

.empty {
  @apply m-4 mt-8;
}

.tabList {
  @apply text-sm;

  li {
    @apply mx-4 px-2;
  }
}

.tab {
  @apply text-storm-50;
  button {
    @apply font-normal;
  }
}

.active {
  @apply text-orange-400;
}

.tabPanel {
  @apply px-0 absolute left-0 right-0 bottom-0 top-9 overflow-auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    @apply hidden;
  }
}

.tableNavTrigger {
  @apply fixed right-5 bottom-5 z-50 w-14 h-14 rounded-full bg-link-1 flex justify-center items-center;

  span,
  svg {
    @apply text-white text-2xl;
  }
}

.database {
  @apply mt-1.5 mx-2;

  span {
    @apply font-semibold;
  }
}

.schemaSelector {
  @apply m-0 max-w-none;
}

.selector {
  @apply w-[230px] max-w-none;
}
