.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;
}
.healthchecks .time-range > a {
  @apply font-medium text-sm px-2.5 py-1;
  @apply text-black bg-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300;
}
.healthchecks .time-range > a.active {
  @apply text-white bg-blue-700 hover:bg-blue-800;
}
.healthchecks .time-range > a:first-child {
  @apply rounded-s-lg;
}
.healthchecks .time-range > a:last-child {
  @apply rounded-e-lg;
}