/* Static fallback utilities to reduce FOUC before Tailwind Play hydrates. */
:root {
  --nexdirectory-brand-50: color-mix(in srgb, var(--nexdirectory-primary, #ff5e14) 8%, #ffffff);
  --nexdirectory-brand-100: color-mix(in srgb, var(--nexdirectory-primary, #ff5e14) 14%, #ffffff);
  --nexdirectory-brand-200: color-mix(in srgb, var(--nexdirectory-primary, #ff5e14) 24%, #ffffff);
  --nexdirectory-brand-300: color-mix(in srgb, var(--nexdirectory-primary, #ff5e14) 36%, #ffffff);
  --nexdirectory-brand-400: color-mix(in srgb, var(--nexdirectory-primary, #ff5e14) 52%, #ffffff);
  --nexdirectory-brand-500: var(--nexdirectory-primary, #ff5e14);
  --nexdirectory-brand-600: var(--nexdirectory-primary-hover, #e04f0d);
  --nexdirectory-brand-700: color-mix(in srgb, var(--nexdirectory-primary-hover, #e04f0d) 80%, #000000);
  --nexdirectory-brand-800: color-mix(in srgb, var(--nexdirectory-primary-hover, #e04f0d) 64%, #000000);
  --nexdirectory-brand-900: color-mix(in srgb, var(--nexdirectory-primary-hover, #e04f0d) 48%, #000000);
}

.max-w-6xl {
  max-width: 72rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
}

.shadow-md {
  box-shadow: 0 8px 18px -6px rgba(15, 23, 42, 0.22);
}

.w-4 {
  width: 1rem;
}

.h-4 {
  height: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.h-5 {
  height: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.h-6 {
  height: 1.5rem;
}

.w-8 {
  width: 2rem;
}

.h-8 {
  height: 2rem;
}

.w-10 {
  width: 2.5rem;
}

.h-10 {
  height: 2.5rem;
}

.w-14 {
  width: 3.5rem;
}

.h-14 {
  height: 3.5rem;
}

.bg-brand-50 {
  background-color: var(--nexdirectory-brand-50) !important;
}

.bg-brand-100 {
  background-color: var(--nexdirectory-brand-100) !important;
}

.bg-brand-400 {
  background-color: var(--nexdirectory-brand-400) !important;
}

.bg-brand-500 {
  background-color: var(--nexdirectory-brand-500) !important;
}

.bg-brand-600 {
  background-color: var(--nexdirectory-brand-600) !important;
}

.bg-brand-700 {
  background-color: var(--nexdirectory-brand-700) !important;
}

.bg-brand-800 {
  background-color: var(--nexdirectory-brand-800) !important;
}

.text-brand-100 {
  color: var(--nexdirectory-brand-100) !important;
}

.text-brand-300 {
  color: var(--nexdirectory-brand-300) !important;
}

.text-brand-500 {
  color: var(--nexdirectory-brand-500) !important;
}

.text-brand-600 {
  color: var(--nexdirectory-brand-600) !important;
}

.text-brand-700 {
  color: var(--nexdirectory-brand-700) !important;
}

.text-brand-800 {
  color: var(--nexdirectory-brand-800) !important;
}

.text-brand-900 {
  color: var(--nexdirectory-brand-900) !important;
}

.text-white {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.hover\:text-white:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.focus\:text-white:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.active\:text-white:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.visited\:text-white:visited {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.no-underline {
  text-decoration-line: none !important;
}

.border-brand-100 {
  border-color: var(--nexdirectory-brand-100) !important;
}

.border-brand-200 {
  border-color: var(--nexdirectory-brand-200) !important;
}

.border-brand-300 {
  border-color: var(--nexdirectory-brand-300) !important;
}

.border-brand-400 {
  border-color: var(--nexdirectory-brand-400) !important;
}

.border-brand-500 {
  border-color: var(--nexdirectory-brand-500) !important;
}

.border-brand-600 {
  border-color: var(--nexdirectory-brand-600) !important;
}

.hover\:bg-brand-50:hover {
  background-color: var(--nexdirectory-brand-50) !important;
}

.hover\:bg-brand-100:hover {
  background-color: var(--nexdirectory-brand-100) !important;
}

.hover\:bg-brand-600:hover {
  background-color: var(--nexdirectory-brand-600) !important;
}

.hover\:bg-brand-700:hover {
  background-color: var(--nexdirectory-brand-700) !important;
}

.hover\:text-brand-500:hover {
  color: var(--nexdirectory-brand-500) !important;
}

.hover\:text-brand-600:hover {
  color: var(--nexdirectory-brand-600) !important;
}

.hover\:text-brand-700:hover {
  color: var(--nexdirectory-brand-700) !important;
}

.hover\:text-brand-800:hover {
  color: var(--nexdirectory-brand-800) !important;
}

.group:hover .group-hover\:text-brand-500 {
  color: var(--nexdirectory-brand-500) !important;
}

.group:hover .group-hover\:text-brand-600 {
  color: var(--nexdirectory-brand-600) !important;
}

.group:hover .group-hover\:text-brand-700 {
  color: var(--nexdirectory-brand-700) !important;
}

.focus\:border-brand-300:focus {
  border-color: var(--nexdirectory-brand-300) !important;
}

.focus\:border-brand-500:focus {
  border-color: var(--nexdirectory-brand-500) !important;
}

.focus\:ring-2:focus,
.focus\:ring-brand-400:focus,
.focus\:ring-brand-500:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nexdirectory-primary, #ff5e14) 35%, #ffffff) !important;
}

.ring-brand-400 {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nexdirectory-primary, #ff5e14) 28%, #ffffff) !important;
}

.ring-brand-500 {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nexdirectory-primary, #ff5e14) 35%, #ffffff) !important;
}

.fill-brand-600 {
  fill: var(--nexdirectory-brand-600) !important;
}

.selection\:bg-brand-100::selection {
  background-color: var(--nexdirectory-brand-100);
}

.selection\:bg-brand-200::selection {
  background-color: var(--nexdirectory-brand-200);
}

.selection\:text-brand-700::selection {
  color: var(--nexdirectory-brand-700);
}

.selection\:text-brand-900::selection {
  color: var(--nexdirectory-brand-900);
}