.feather {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

.navbar {
  @apply justify-center flex flex-wrap space-x-2 gap-2 mt-10;
}
.navbar a {
  @apply font-bold py-2 px-4 rounded-lg;
}
.navbar a:hover {
  @apply bg-gray-200 shadow-inner;
}
.navbar a:focus {
  @apply outline-none ring-2 ring-blue-700 text-blue-700;
}
.navbar a.active {
  @apply bg-gray-300 text-black shadow;
}
.navbar a.active:hover {
  @apply shadow;
}

.sidebar {
  @apply flex flex-row flex-wrap justify-center lg:flex-col lg:w-48 gap-2 h-fit text-sm font-medium text-gray-900;
}
.sidebar a {
  @apply w-full block rounded-lg px-4 py-2  focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700;
}
.sidebar a:focus {
  @apply outline-none ring-2 ring-blue-700 text-blue-700;
}
.sidebar a:hover {
  @apply shadow-inner bg-gray-200 text-blue-700;
}
.sidebar a.active {
  @apply bg-blue-700 text-white;
}

.breadcrumb {
  @apply flex mb-4;
}

.healthchecks {
  @apply grid justify-items-stretch justify-stretch items-center mt-20 bg-white shadow-md p-5 rounded-lg;
}
.healthchecks > div:not(:last-child) {
  @apply mb-3;
}