.header {
  @apply flex flex-col text-white absolute w-full top-12;
}

.hideFullHeader {
  @apply lg:hidden;
}

.hideSmallHeader {
  @apply hidden;
}

.headerDetails {
  @apply inline-block  py-2 px-8  bg-storm-500 relative h-28   justify-end;
  background-image: linear-gradient(to bottom, #354c5c, #192e3d);
  @screen lg {
    @apply flex h-12;
  }
}

.smallHeader {
  @apply hidden h-24;

  @screen lg {
    @apply h-16 flex items-center justify-between;
  }
}

.topLeft {
  @apply flex justify-items-center;
  button {
    @apply text-lg;
  }
}

.zIndex {
  @apply z-10;
}

.topRight {
  @apply flex mt-4 justify-start items-center;
  > * {
    @apply mr-2.5;
  }

  @screen lg {
    @apply justify-between mt-0;
  }
}

.databaseBreadcrumbs {
  @apply text-white;

  a,
  span {
    @apply text-xl text-white;
  }

  a {
    @apply px-0.5 hover:text-sky-300;
  }

  @screen lg {
    span,
    a {
      @apply text-lg;
    }
  }
}

.databaseBreadcrumbs div:first-of-type {
  span:first-of-type {
    @apply text-white/80;
  }
}

.permission {
  @apply hidden;
  @screen lg {
    @apply flex mt-0.5 ml-3;
  }
}

.mobileSelector {
  @screen lg {
    @apply hidden;
  }
}

.resetButton {
  @apply mr-5 text-xl text-white hover:text-stone-50 hidden lg:block;
}

.tooltip {
  @apply z-10;
}

.forAppNav {
  @screen lg {
    @apply h-16 pt-4 justify-end;
  }
}

.hideForApp {
  @screen lg {
    @apply hidden;
  }
}
