@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");

:root {
  --primary: #83aeab;
  --primaryhover: rgba(131, 174, 171, 0.5);
  --delete: #801717;
  --deletehover: rgb(95, 17, 17);
  --update: #6c7075;
  --secondary: #4e80b9;
  --secondaryhover: #405e80;
  --gray: #ece7e7;
  --grayhover: #4e4e4e;
  --orange: #b0522c;
  --orangehover: #8a7b75;

  /* --primary: #83AEAB;*/
  /* --primary: #4e80b9;*/
}

.requiredinput {
  color: #ba1e1e;
  font-size: 20px;
}


.button {
  /* Flexbox properties for inline SVG and text centering */
  display: flex; /* Makes the anchor tag a flex container */
  align-items: center; /* Vertically centers items along the cross axis */
  justify-content: center; /* Horizontally centers content along the main axis */
  gap: 8px; /* Adds space between the SVG icon and the text */
  /* --- ADD THIS LINE TO PREVENT STRETCHING --- */
  width: fit-content;
  /* Your existing button styles */
  background-color: var(--primary) !important;
  color: white;
  padding: 0.5rem 1rem;
  border: rgb(58, 58, 58) solid 1px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-in;
}

.button:hover {
  background-color: white !important;
  color: var(
    --primary
  ); /* This will apply to the text and the icon if set up correctly */
  border: var(--primary) solid 1px;
}

/* New rule to target the SVG path's stroke on hover */
.button:hover svg path {
  stroke: var(--primary); /* Change stroke to primary color on hover */
}

/* Initial state for the icon's stroke */
.button svg path {
  stroke: white; /* Default icon color */
  transition: stroke 200ms ease-in; /* Smooth transition for the icon stroke */
}

.updatebutton {
  background-color: var(--secondary) !important;
  gap: 8px;
  text-transform: uppercase;
  color: white;
  padding: 0.5rem 1rem;
  border: rgb(58, 58, 58) solid 1px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-in;
  width: fit-content;
}
.updatebuttonlower {
  background-color: var(--secondary) !important;
  gap: 8px;

  color: white;
  padding: 0.5rem 1rem;
  border: rgb(58, 58, 58) solid 1px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-in;
  width: fit-content;
}
.updatebuttonlower:hover {
  background-color: #fff !important; /* Change to hover color */
  border-color: var(
    --secondaryhover
  ); /* Optional: Change border color on hover */
  color: var(--secondary);
  transition: all 200ms ease-out;
}
.updatethin {
  background-color: var(--secondary) !important;
  gap: 8px;
  text-transform: uppercase;
  color: white;
  padding: 3px 8px;
  border: rgb(58, 58, 58) solid 1px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-in;
  width: fit-content;
}

.commentbutton {
  background-color: var(--secondary) !important;
  color: white;
  padding: 0.5rem 1rem;
  gap: 8px;
  border: rgb(58, 58, 58) solid 1px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-in;
}
.updatebutton:hover {
  background-color: #fff !important; /* Change to hover color */
  border-color: var(
    --secondaryhover
  ); /* Optional: Change border color on hover */
  color: var(--secondary);
  transition: all 200ms ease-out;
}
.updatethin:hover {
  background-color: #fff !important; /* Change to hover color */
  border-color: var(
    --secondaryhover
  ); /* Optional: Change border color on hover */
  color: var(--secondary);
  transition: all 200ms ease-out;
}

.secondarybutton {
  background-color: var(--grayhover) !important;
  color: white;
  gap: 8px;

  padding: 0.5rem 1rem;
  border: rgb(58, 58, 58) solid 1px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-in;
  width: fit-content;
}
.secondarythin {
  background-color: var(--grayhover) !important;
  color: white;
  gap: 8px;
  text-transform: uppercase;

  padding: 3px 8px;
  border: rgb(58, 58, 58) solid 1px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-in;
  width: fit-content;
}
.secondarythin:hover {
  background-color: var(--grayhover) !important;
  color: rgb(240, 240, 240) !important;
  border-color: rgb(58, 58, 58);
  transition: all 200ms ease-out;
}

.secondarybutton:hover {
  background-color: #fff !important;
  color: var(--secondaryhover) !important;
  border-color: rgb(58, 58, 58);
  transition: all 200ms ease-out;
}
.orangebutton {
  background-color: var(--orange) !important;

  gap: 8px;

  color: white;
  padding: 0.5rem 1rem;
  border: rgb(58, 58, 58) solid 1px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-in;
  width: fit-content;
}
.orangethin {
  background-color: var(--orange) !important;
  text-transform: uppercase;
  gap: 8px;

  color: white;
  padding: 3px 8px;
  border: rgb(58, 58, 58) solid 1px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-in;
  width: fit-content;
}

.orangebutton:hover {
  background-color: #ffffff !important;
  color: var(--orange) !important;
  border-color: var(--orange) !important;
  transition: all 200ms ease-out;
}
.orangethin:hover {
  background-color: #ffffff !important;
  color: var(--orange) !important;
  border-color: var(--orange) !important;
  transition: all 200ms ease-out;
}
.cancelbutton {
  background-color: white !important;

  gap: 8px;

  color: var(--grayhover);
  padding: 0.5rem 1rem;
  border: rgb(59, 54, 54) solid 1px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-in;
}

.cancelbutton:hover {
  background-color: var(--grayhover) !important;
  color: #fff !important;
  border-color: var(--grayhover) !important;
  transition: all 200ms ease-out;
}
.deletebutton {
  background-color: var(--delete) !important;
  color: white;
  gap: 8px;
  padding: 0.5rem 1rem;
  border: var(--delete) solid 1px;
  border-radius: 0.25rem;
  cursor: pointer;
}
.deletebutton:hover {
  color: var(--delete) !important;
  background-color: #fff !important;
  border-color: var(--delete) !important;
  transition: all 200ms ease-out;
}
.deletebuttonthin {
  background-color: var(--delete) !important;
  text-transform: uppercase;
  gap: 8px;

  color: white;
  padding: 3px 8px;
  border: rgb(58, 58, 58) solid 1px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-in;
  width: fit-content;
}
.deletebuttonthin:hover {
  color: var(--delete) !important;
  background-color: #ffffff !important;
  border-color: var(--delete) !important;
  transition: all 200ms ease-out;
}
.primarycolor {
  color: var(--primary);
}
.bluecolor {
  color: var(--secondary);
}

#spinner {
  display: none;
}
.sidebar-link {
  color: #111827;
  padding: 10px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.sidebar-link:hover {
  background-color: #f3f4f6; /* Hover background */
  color: #111827; /* Hover text color */
}

.sidebar-link.active {
  background-color: #f3f4f6; /* Same as hover background */
  color: #111827; /* Same as hover text color */
}

#station-filter {
  color: #1f2937 !important;
  background-color: white !important;
  border-radius: 50%;
}
.primaryicon:hover {
  background-color: var(--primaryhover) !important;
}

.delete-button {
  background-color: var(--delete) !important; /* Use the custom primary color */
  gap: 8px;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-out;
}

.delete-button:hover {
  background-color: white !important;
  color: var(--deletehover);
  gap: 8px;
  padding: 0.5rem 1rem;
  border: var(--deletehover) solid 1px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 200ms ease-in;
}
.custom-font {
  font-family: "Lato", "Libre Baskerville", "Roboto", sans-serif; /* Use your custom font family */
}

#indiana-map-container svg {
  width: 200px; /* or 100% for responsive */
  height: auto; /* keeps aspect ratio */
}
/* CSS */
.custom-checkbox {
  width: 1.5rem; /* equivalent to w-4 */
  height: 1.5rem; /* equivalent to h-4 */
  color: var(--primary);
  background-color: #f3f4f6; /* equivalent to bg-gray-100 */
  border-color: #d1d5db; /* equivalent to border-gray-300 */
  /* equivalent to rounded */
  outline: none;
}

/* Styling for all counties in the SVG */
.county {
  /* Base style from your original SVG */
  fill: #d0d0d0; /* Default light gray fill */
  stroke: #000000; /* Black border */
  stroke-width: 0.15px; /* Adjusted stroke for the small viewBox */
  stroke-linecap: butt;
  stroke-linejoin: bevel;
  cursor: pointer;
  transition: fill 0.2s; /* Smooth transition for hover/data effects */
}

/* Hover effect */
.county:hover {
  fill: #a0a0a0;
}

/* Add your color classes here for dynamic data coloring (e.g., in your JS) */
.category-rural {
  fill: #fecaca;
} /* Red-100 placeholder */
.category-micropolitan {
  fill: #fde68a;
} /* Yellow-100 placeholder */
.category-metro {
  fill: #dbeafe;
} /* Blue-100 placeholder */

.custom-checkbox:focus {
  box-shadow: 0 0 0 2px rgba(12, 18, 20, 0.5); /* equivalent to focus:ring-blue-500 */
}

.custom-checkbox:checked {
  background-color: var(--primary); /* equivalent to text-blue-600 */
}

.custom-checkbox:checked:focus {
  box-shadow: 0 0 0 2px rgba(8, 10, 12, 0.5); /* equivalent to focus:ring-blue-500 */
}

.custom-checkbox.dark {
  background-color: #1f2937; /* equivalent to dark:bg-gray-700 */
  border-color: #374151; /* equivalent to dark:border-gray-600 */
}

.custom-checkbox.dark:focus {
  box-shadow: 0 0 0 2px rgba(25, 41, 85, 0.5); /* equivalent to dark:focus:ring-blue-600 */
}

.custom-checkbox.dark:checked {
  background-color: #4f46e5; /* equivalent to text-blue-600 */
}

/* Custom scrollbar style */
::-webkit-scrollbar {
  width: 3px; /* Adjust the width as needed */
  height: auto; /* Ensure vertical scrollbar is always visible */
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(131, 174, 171, 0); /* Light gray */
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; /* Gray */
  border-radius: 3px; /* Rounder edges */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* Darker gray */
}

table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #ddd;
}

.dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
}

.dataTables_wrapper .dataTables_filter input {
  margin-left: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
}

.dataTables_wrapper .dataTables_length label {
  display: flex;
  align-items: center;
}

.dataTables_wrapper .dataTables_length select {
  margin-left: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
}

.dataTables_wrapper .dataTables_paginate {
  display: flex;
  justify-content: flex-end;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  margin: 0 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: #007bff;
  color: white;
}

/* Ensure all table columns are aligned to the left by default */
table.dataTable td,
table.dataTable th {
  text-align: left; /* Default alignment for all columns */
}

/* Specific override for FD Number column */
table.dataTable td:nth-child(1), /* FD Number column */
table.dataTable th:nth-child(1) {
  text-align: left; /* Ensure FD Number aligns left */
}

/* Specific override for Name column */
table.dataTable td:nth-child(2), /* Name column */
table.dataTable th:nth-child(2) {
  text-align: left; /* Ensure Name aligns left */
}

/* Specific override for Role column */
table.dataTable td:nth-child(3), /* Role column */
table.dataTable th:nth-child(3) {
  text-align: left; /* Ensure Role aligns left */
}

/* Specific override for Active Member column */
table.dataTable td:nth-child(4), /* Active Member column */
table.dataTable th:nth-child(4) {
  text-align: left; /* Ensure Active Member aligns left */
}

/* Specific override for Edit Personnel column */
table.dataTable td:nth-child(5), /* Edit Personnel column */
table.dataTable th:nth-child(5) {
  text-align: left; /* Ensure Edit Personnel aligns left */
}
table.dataTable td:nth-child(6), /* Edit Personnel column */
table.dataTable th:nth-child(6) {
  text-align: left; /* Ensure Edit Personnel aligns left */
}
table.dataTable td:nth-child(7), /* Edit Personnel column */
table.dataTable th:nth-child(7) {
  text-align: right; /* Ensure Edit Personnel aligns left */
}

/* Ensure table columns are equally spaced */
table.dataTable th,
table.dataTable td {
  width: 16.66%; /* Adjust as needed for equal spacing */
}

/* Style adjustments for toggle-circle */
#toggle-circle {
  top: 10%; /* Center vertically */
  transform: translateY(-50%);
}

/* Labels for toggle switch */
#inactive-label {
  right: 56px; /* Position as needed */
}

#active-label {
  right: 56px; /* Position as needed */
}

.dataTables_info {
  margin-left: 1rem !important; /* Equivalent to ml-4 in Tailwind */
}