.flash-alert {
  animation: appear-then-fade 8s both;
}

.flash-notice {
  animation: appear-then-fade 4s both;
}
form .hide {
  display: none;
}

form .highlighted {
  @apply bg-gray-300;
}

form details > summary {
  list-style: none;
}

form details > summary::marker, /* Latest Chrome, Edge, Firefox */ 
form details > summary::-webkit-details-marker /* Safari */ {
  display: none;
}

form button.disabled {
  @apply bg-gray-300 cursor-not-allowed;
}
/* For Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

/* For Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.text-wrap {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}
/* TODO; confirm no unintended consequences as have multiple dialogues in app */
dialog.slideover[open] {
  animation: slide-in-from-left 200ms forwards ease-in-out;
}

dialog.slideover[closing] {
  pointer-events: none;
  animation: slide-out-to-left 200ms forwards ease-in-out;
}

@keyframes slide-in-from-left{
  from {
    transform: translateX(-100%);
  }
}

@keyframes slide-out-to-left{
  to {
    transform: translateX(-100%);
  }
}
.toggle .toggle-bg:after {
  content: '';
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background-color: white;
  border: 1px solid gray;
  border-radius: 50%;
  height: 5rem;
  width: 5rem;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.toggle input:checked + .toggle-bg:after {
  transform: translateX(100%);
  border-color: white;
}

.toggle input:checked + .toggle-bg {
  @apply bg-primary-500 border-primary-500;
}

.toggle label:focus {
  outline: none;
}

.toggle label:active {
  outline: none;
}
.invalid-input {
  border-color: red;
  caret-color: red;
  animation: shake 0.5s;
}

.timer {
  position: relative;
  width: 60px;
  height: 60px;
}

.progress-ring__circle {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}

.progress-ring__progress {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  transition: stroke-dashoffset 0.35s;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes appear-then-fade {

  0%,
  100% {
    opacity: 0;
    visibility: hidden;
  }

  5%,
  60% {
    opacity: 1;
    visibility: visible;
  }
}
.location-search-field::placeholder {
  color: lightgray;
  font-style: italic;
}
.arrow {
  transition: transform 0.3s ease-in-out;
}

.arrow.rotate {
  transform: rotate(90deg);
}
.pagy {
  @apply flex font-semibold text-sm text-gray-500;
}

.pagy > * + * {
  @apply ml-1;
}

.pagy a:not(.gap) {
  @apply block rounded-md px-3 py-1 bg-gray-100;
}

.pagy a:not(.gap):hover {
  @apply bg-gray-200;
}

.pagy a:not(.gap):not([href]) {
  @apply text-gray-300 bg-gray-100 cursor-default;
}

.pagy a:not(.gap).current {
  @apply text-white bg-gray-400;
}

.pagy label {
  @apply inline-block whitespace-nowrap bg-gray-100 rounded-md px-3 py-0.5;
}

.pagy label input {
  @apply bg-gray-100 border-none rounded-md;
}
/*













 */