:root {
  /* Backgrounds */
  --color-background: #f4f5f7; /* Light neutral gray for overall page */
  --color-surface: #ffffff; /* White for content blocks */
  /* Text */
  --color-text-primary: #000000; /* Main text */
  --color-text-secondary: #6b6b6b; /* Secondary */
  /* Could also do: #6c757d for secondary */
  /* Accent / Interactive */
  --color-accent: #1e3a8a; /* Dark-medium blue for buttons, icons, etc. */
  --color-accent-hover: #274cb0; /* Slightly lighter blue for hover states */
  --color-accent-active: #162b6f; /* Darker tone for active states */
  --color-light-hover: #e0e0e0; /* Non blue button hover (same as border) */
  --color-table-row-hover: rgba(
    60,
    64,
    67,
    0.04
  ); /* Very light gray for table rows */
  /* Borders & Dividers */
  --color-border: #e0e0e0; /* Subtle gray for edges / outlines */
  --color-divider: #d1d5db; /* For horizontal rules or section splits */
  /* Status Colors (Optional) */
  --color-success: #16a34a;
  --color-warning: #eab308;
  --color-error: #dc2626;
  --color-error-hover: #c82333;
  --color-onhold: #ffa500;
}

/* Colors */

.pending {
  color: var(--color-warning) !important;
  border: 2px solid var(--color-warning) !important;
}

.inactive {
  color: var(--color-error) !important;
  border: 2px solid var(--color-error) !important;
}

.inactive-status {
  color: var(--color-error) !important;
  border: 1px solid var(--color-error) !important;
}

.archived {
  color: var(--color-text-secondary) !important;
  border: 2px solid var(--color-text-secondary) !important;
}

.onhold {
  color: var(--color-onhold) !important;
  border: 2px solid var(--color-onhold) !important;
}

/* Mud colors */
.accent-progress-color .mud-progress-circular-circle {
  stroke: var(--color-accent);
}

.error-progress-color .mud-progress-circular-circle {
  stroke: var(--color-error);
}

.success-progress-color .mud-progress-circular-circle {
  stroke: var(--color-success);
}

.warning-progress-color .mud-progress-circular-circle {
  stroke: var(--color-warning);
}

.progress-text.accent {
  color: var(--color-accent) !important;
  fill: var(--color-accent) !important;
}

.progress-text.error-label {
  color: var(--color-error) !important;
  fill: var(--color-error) !important;
}

.progress-text.success-label {
  color: var(--color-success) !important;
  fill: var(--color-success) !important;
}

.progress-text.warning-label {
  color: var(--color-warning) !important;
  fill: var(--color-warning) !important;
}

.change-text.accent {
  color: var(--color-accent) !important;
}

.change-text.error-label {
  color: var(--color-error) !important;
}

.change-text.success-label {
  color: var(--color-success) !important;
}

.change-text.warning-label {
  color: var(--color-warning) !important;
}

::deep .mud-progress-circular-underlay circle {
  stroke: var(--custom-track-color) !important;
}

.mud-input-adornment .mud-icon-root {
  color: var(--color-text-secondary);
}

/*.mud-input-outlined-border {
    border-radius: 2.5rem !important;
    border-color: var(--color-border) !important;
}*/
/*.capsule-field*/
.mud-input-outlined-border {
  border-radius: 2.5rem !important;
  border-color: var(--color-border) !important;
}

/*.capsule-field*/
.mud-input-label-outlined {
  background: var(--mud-palette-surface) !important;
  padding-inline: 10px !important;
  overflow: visible !important;
}

.capsule-field
  .mud-shrink
  ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.capsule-field
  .mud-input:focus-within
  ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
  transform: translate(20px, -6px) scale(0.75) !important;
  max-width: calc((100% - 20px) / 0.75) !important;
}

.capsule-field .mud-input-outlined-border legend {
  padding-inline: 10px;
}

.text-area .mud-input-outlined-border {
  border-radius: 1rem !important;
}

.text-area
  .mud-shrink
  ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
  transform: translate(14px, -6px) scale(0.75) !important;
  max-width: calc((100% - 14px) / 0.75) !important;
}

.text-area .mud-input-outlined-border legend {
  padding-inline: 10px;
}

.mud-input-textarea {
  border-radius: 1rem !important;
}

.mud-input-control-input-container
  > .mud-input.mud-input-outlined.mud-input-focused
  .mud-input-outlined-border {
  border-color: var(--color-accent) !important;
}

.mud-input > input.mud-input-root-outlined {
  /*padding: 1em 0.25em !important;*/
}

.mud-input-control {
  /* causing problems with overflow and spacing */
}

.mud-table-cell {
  border: none !important;
}

.mud-button-filled.mud-button-filled-primary span {
  color: #ffffff !important;
}

.mud-input-control.mud-field
  .mud-input-slot.mud-input-slot-nopadding.mud-input-root-outlined {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.mud-text-root > input {
  padding: 10px 0 7px !important;
}

.mud-select-root > input {
  padding: 10px 0 7px !important;
  text-align: start !important;
}

.mud-select-root div.mud-input-slot.mud-input-root {
  padding: 10px 0 7px !important;
  text-align: start !important;
}

.mud-date-root .mud-input > input.mud-input-root {
  padding: 10px 0 7px !important;
}

.mud-select-root .mud-input > input.mud-input-root {
  padding: 10px 0 7px !important;
}

/*.mud-input > input.mud-input-root {
    padding: 10px 0 7px !important;
}*/

.mud-numeric-root .mud-input > input.mud-input-root {
  padding: 10px 0 7px !important;
}

.mud-numeric-root .mud-input-adornment-text {
  margin-top: 0.25em;
}

.mud-search {
  flex: none !important;
}

.mud-search-root > input {
  padding: 5px 0 2px !important;
}

.mud-search-root-top > .mud-input {
  padding: 1px 0 1px !important;
}

.mud-search-root-top > .input {
  padding: 1px 0 1px !important;
}

.mud-search-root-top div.mud-input-slot.mud-input-root {
  padding: 1px 0 1px !important;
}

.mud-search-root-top .mud-input > input.mud-input-root {
  padding: 1px 0 1px !important;
}

.mud-search-root-top .mud-input > input.mud-input-root {
  padding: 1px 0 1px !important;
}

.global-search-result-link,
.global-search-result-link:hover,
.global-search-result-link:focus {
  color: inherit;
  display: block;
  text-decoration: none !important;
}

.global-search-result-link .mud-typography {
  text-decoration: none !important;
}

.mud-chip > .mud-chip-content {
  color: inherit !important;
}

.password-requirement-chip {
  justify-content: flex-start !important;
  width: 100%;
}

.password-requirement-chip > .mud-chip-content {
  justify-content: flex-start !important;
  text-align: left;
  white-space: normal;
}

.mud-snackbar {
  background-color: #ffffff !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16) !important;
}

.mud-snackbar .mud-snackbar-content-message,
.mud-snackbar .mud-button-root,
.mud-snackbar .mud-icon-root {
  color: var(--color-text-primary) !important;
}

/* Configuring focus */
/**:focus:not(:focus-visible) {
  outline: none;
}*/

*:focus {
  outline: none;
}

/* Bootstrap overrides */
.modal-footer {
  justify-content: center;
}

.modal-content {
  border-radius: 1rem !important;
  border: none !important;
}

.nav-underline .nav-link.active {
  font-weight: 400;
  color: var(--color-accent);
  border-bottom-color: currentColor;
}

.nav-underline .nav-link.active:hover {
  font-weight: 400;
  color: var(--color-accent-hover);
  border-bottom-color: currentColor;
}

.nav-link {
  color: var(--color-text-secondary);
}
/*.nav-underline .nav-link:focus,*/
.nav-underline .nav-link:hover {
  color: var(--color-light-hover);
  border-bottom-color: var(--color-light-hover);
}

.alert {
  border-radius: 1em !important;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow:
    0 0 0 0.1rem white,
    0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* Containers */
body {
  /* margin-bottom: 60px; */
  background-color: var(--color-background);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

.row-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 1em;
  margin-bottom: 0.5em;
}

.img-row-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  gap: 1em;
  margin-bottom: 0.5em;
}

.img-content {
  display: flex;
  flex-direction: column;
  height: -webkit-fill-available;
}
.img-row-container p {
  flex-grow: 1;
}

.select-container {
  text-align: start;
  flex-grow: 1;
}

.first {
  padding-top: 1em;
}

.last {
  margin-bottom: 1em;
}

.check-container {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.5em;
}

.first-grow > :last-child {
  flex-basis: 50%;
}

.second-grow > :first-child {
  flex-basis: 50%;
}

.box-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-border);
  padding: 1.5em 1em;
  border-radius: 1.5em;
  text-align: center;
  flex-grow: 1;
}

/* Typography */
h1,
h2,
h3,
h4,
h6 {
  color: var(--color-text-primary);
  margin-top: 0;
  font-weight: 450;
}

h5 {
  color: var(--color-text-secondary);
  margin-top: 0;
  font-weight: 450;
}

.lower-text {
  text-transform: none !important;
}

/*p, small, span, label {
    color: var(--color-text-secondary);
}*/

.sub-text {
  color: var(--color-text-secondary);
}

.label {
  margin: 0;
  text-align: start;
}

.sub-header {
  color: var(--color-text-secondary);
  margin: 0;
  display: inline;
}

.accent {
  color: var(--color-accent) !important;
}

.error {
  color: var(--color-error) !important;
}

.surface {
  color: var(--color-surface) !important;
}

/* Consolidate into this class */
.secondary {
  color: var(--color-text-secondary) !important;
}

.primary {
  color: var(--color-text-primary) !important;
}

.secondary-border {
  border-color: var(--color-text-secondary) !important;
}

.card-title {
  color: var(--color-text-secondary) !important;
}

/* Content */
.card,
.form,
.display {
  background-color: var(--color-surface);
  /*border: 1px solid var(--color-border);*/
  /*border-radius: 0.5rem;*/
  border: none !important;
  border-radius: 1.5rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.borderless-display {
  background-color: var(--color-surface);
  border-radius: 0.5rem;
  /*padding: 1rem 1.5rem;*/
}

.card-title-container {
  display: flex;
  gap: 1em;
  align-items: center;
}
.card-title-container > :first-child {
  flex-grow: 1;
}

/* Tables */
table {
  width: 100%;
}
table tr {
  border-bottom: 1px solid var(--color-border);
}
table tr:last-of-type {
  border-bottom: none;
} /* This needs to be changed to visible rows only */
/*table tr:last-of-type > :first-child {
                border-radius: 0rem 0rem 0rem 1.5rem;
            }
            table tr:last-of-type > :last-child {
                border-radius: 0rem 0rem 1.5rem 0rem;
            }*/
table tr:hover {
  background-color: var(--color-table-row-hover);
  transition: background-color 0.2s ease;
}
/*table tr:first-of-type:hover {
            background-color: transparent !important;
        }*/

table th,
td {
  padding: 0.5em;
}

table.dataTable.no-footer {
  border: none;
}

table.dataTable thead th {
  border-bottom: 1px solid var(--color-border) !important;
}
table.dataTable thead th:hover {
  background-color: var(--color-table-row-hover);
}

thead {
  border-bottom: 1px solid var(--color-border);
}
thead tr > :first-child {
  border-radius: 1.5rem 0rem 0rem 0rem;
}
thead tr > :last-child {
  border-radius: 0rem 1.5rem 0rem 0rem;
}
thead tr:hover {
  background-color: transparent !important;
}

table tbody tr:last-of-type > :first-child {
  border-radius: 0rem 0rem 0rem 1.5rem;
}

table tbody tr:last-of-type > :last-child {
  border-radius: 0rem 0rem 1.5rem 0rem;
}

.mud-table-cell {
  font-size: var(--bs-body-font-size) !important;
  line-height: 1.6 !important;
}

.mud-data-grid .mud-table-cell .column-header .sortable-column-header {
  font-weight: bold;
  color: var(--color-text-secondary);
}

/* Pagination */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.pagination-row {
  display: flex;
  gap: 1em;
}
/*.pagination-row > :first-child {
        border-radius: 1em 0em 0em 1em;
    }
    .pagination-row > :last-child {
        border-radius: 0em 1em 1em 0em;
        border-right: none;
    }*/

.pagination-btn {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 0.5em 1em;
  border-radius: 0.5em;
  width: 2.7rem;
  height: 2.7rem;
  display: flex;
  justify-content: center;
}
.pagination-btn:hover {
  background-color: var(--color-light-hover);
  transition: background-color 0.2s ease;
}
.selected-pagination {
  background-color: var(--color-accent-active);
  color: #fff;
}
.selected-pagination:hover {
  background-color: var(--color-accent-hover) !important;
  transition: background-color 0.2s ease;
}

.selector-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* Horizontal Divider */
hr {
  width: 100%; /* TODO - Causing problems with overflow */
  margin: 0.5em;
  border: none;
  height: 1px;
  background-color: var(--color-divider);
}

/* Buttons */
.btn {
  background-color: var(
    --color-accent
  ); /* Change button border radius for perfect circles */
  color: #ffffff;
  border: none;
  padding: 0.6em 1.2em;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
  border: 2px solid var(--color-accent);
}
.btn:hover {
  background-color: var(--color-accent-hover);
  color: #ffffff;
  border: 2px solid var(--color-accent-hover);
}
.btn:disabled {
  background-color: var(--color-accent-hover);
  color: #ffffff;
}

.micro-btn {
  padding: 0.6em 2.6em;
  border-radius: 1.5em;
}

.error-btn {
  background-color: var(--color-error);
  color: #ffffff;
  border: none;
  padding: 0.6em 1.2em;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
  border: 2px solid var(--color-error);
}
.error-btn:hover {
  background-color: var(--color-error-hover);
  color: #ffffff;
  border: 2px solid var(--color-error-hover);
}

/* Consolidate open-btn and hollow btn */
.open-btn {
  background-color: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  font-weight: 500;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.open-btn:hover {
  border: 2px solid var(--color-accent-hover);
  color: var(--color-accent-hover);
}

.hollow-btn {
  background-color: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  padding: 0.6em 3.2em;
  border-radius: 1.5em;
  font-weight: 500;
  transition: background-color 0.2s ease;
}
.hollow-btn:hover {
  border: 2px solid var(--color-accent-hover);
  color: var(--color-accent-hover);
}

.small-btn {
  padding: 0.6em 3.2em;
  border-radius: 1.5em;
}

.action-icon-btn {
  padding: 0.6em 2.4em;
  border-radius: 1.5em;
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.icon-btn {
  background-color: transparent;
  border: none;
  color: white; /* Icon color */
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  padding: 0em 0.1em;
}
.icon-btn:hover {
  background-color: var(--color-background);
}

.round {
  padding: 0.25em;
  width: min-content;
  height: min-content;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-border);
}
.round img {
  display: block;
}

.filled {
  background-color: var(--color-accent) !important;
  color: white;
  border: 2px solid var(--color-accent) !important;
}
.filled:hover {
  background-color: var(--color-accent-hover) !important;
  border: 2px solid var(--color-accent-hover) !important;
}

.status {
  padding: 0.25em 0.75em;
  border: 1px solid var(--color-accent);
  cursor: default !important;
  font-size: 0.75rem;
}
.status:hover {
  border: 1px solid var(--color-accent-hover);
}

.inverted:hover {
  background-color: var(--color-surface) !important;
  transition: 0.2s ease;
}

/* Active, Inactive, and Pending btns */

.small-icon {
  width: 1.5em;
  height: auto;
}

.medium-icon {
  width: 2em;
  height: auto;
}

.sidebar-icon {
  width: 2.5em;
  height: auto;
}

.sidebar .logo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4em;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.sidebar-logo-img {
  position: absolute;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 180ms ease;
}

.sidebar-logo-img.active {
  opacity: 1;
}

.banner-icon {
  width: 10.5em;
  height: auto;
}

.small-logo-icon {
  width: 3.5em;
  height: auto;
}

.large-icon {
  width: 4em;
  height: auto;
}

.xlarge-icon {
  width: 6em;
  height: auto;
}

.lg-circle-icon-container {
  /* 1. Create a square container */
  width: 60px;
  height: 60px;
  /* 2. Create the circle shape */
  border-radius: 50%;
  background-color: black; /* Add a background color */
  border: 2px solid transparent; /* Optional: Add a border */
  /* 3. Center the icon inside */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Optional: Adjust icon color and size */
  color: white;
  font-size: 24px;
}
.lg-circle-icon-container img {
  width: 80%;
}
.primary-intro-image {
  /*width: 60em;*/
  width: 100%;
  height: auto;
  margin: auto;
  border-radius: 1em;
}

.table-btn {
  display: flex;
  border: 1px solid var(--color-border);
  /* border-radius: 0.5rem; old square shape */
  border-radius: 50%;
  padding: 0.5em;
}

.table-btn-container {
  display: flex;
  gap: 0.5em;
}

/* Search */
search {
  display: flex;
  gap: 0.5em;
  border: 1px solid var(--color-border);
  border-radius: 1.5rem; /*0.5rem;*/
  padding: 0.5em;
}

search input {
  border: none;
}

search input:focus {
  outline: none;
}

search:focus-within {
  border: 1px solid var(--color-accent-active);
}

.dataTables_filter {
  display: flex;
  gap: 0.5em;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.5em;
}

.dataTables_filter input {
  border: none;
}
.dataTables_filter input:focus {
  outline: none;
}
.dataTables_filter:focus-within {
  border: 1px solid var(--color-accent-active);
}

.filter-container {
  display: flex;
  align-items: center;
  gap: 1em;
}
.table-filter {
  border: 1px solid var(--color-border);
  border-radius: 1.5em;
  padding: 0.25em 0.25em 0.25em 0.75em;
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
}
.close-filter-btn {
  border: none;
  background-color: transparent;
  border-radius: 50%;
  height: fit-content;
}
.close-filter-btn:hover {
  background-color: var(--color-light-hover);
  transition: background-color 0.2s ease;
}

/* Inputs */
.text-field {
  border-radius: 1.5em;
  width: 75%;
  border: none;
  padding-left: 0.5em;
  box-sizing: border-box;
  flex-grow: 1;
}
.text-field:focus {
  outline: none;
}

/* Adjust placeholder text based on focus or nothing showing */
.text-field:focus ~ .input-placeholder,
.text-field:not(:placeholder-shown) ~ .input-placeholder {
  margin-bottom: 6em;
  font-size: 0.85rem;
  padding-left: 0.5em;
}

/* Adjust select placeholder */
.input-placeholder.show {
  margin-bottom: 6em;
  font-size: 0.85rem;
  padding-left: 0.5em;
}

.input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 2.5rem; /*0.5rem;*/
  padding: 0.75em;
  gap: 0.5em;
}
.input-container:focus-within {
  border: 1px solid var(--color-accent-active);
}
.input-container:has(.input-validation-error) {
  border: 1px solid var(--color-error);
}

.input-placeholder {
  position: absolute;
  pointer-events: none;
  transition: all 0.3s ease;
  padding-left: 2.5em;
}

.file-input-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid var(--color-border);
  padding: 3em 1em;
  border-radius: 1.5em;
}
.file-input-container:hover {
  background-color: var(--color-light-hover);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.highlighted {
  background-color: var(--color-light-hover);
  transition: background-color 0.2s ease;
}

.link-muted {
  text-decoration: none;
  color: rgba(15, 23, 42, 0.75);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 14px;
}
.link-muted:hover {
  background: rgba(15, 23, 42, 0.05);
  text-decoration: none;
  color: rgba(15, 23, 42, 0.95);
  border-color: transparent;
}

/* custom checkbox */
.checkbox {
  /* Remove default appearance */
  -webkit-appearance: none; /* For older Safari */
  appearance: none;
  /* unchecked styling */
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid var(--color-border);
  border-radius: 0.15em;
  display: grid;
  place-content: center; /* Center the checkmark */
  font: inherit;
  color: currentColor;
  cursor: pointer;
}
.checkbox:hover {
  outline: 0.15em solid var(--color-light-hover);
}

.checkbox::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0); /* Hide the checkmark by default */
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--color-accent);
}

/* display checkbox when checked */
.checkbox:checked::before {
  transform: scale(1);
}

/* focus effect */
/*.checkbox:focus {
        outline: max(2px, 0.15em) solid var(--color-accent);
        outline-offset: max(2px, 0.15em);
    }*/

/* toasts */
.toast-container {
  padding: 2em;
}

/* images */
.image-preview {
  display: none;
  max-width: 100%;
  max-height: 240px;
  margin-bottom: 1.5em;
}

.image-preview-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Loaders */
.skeleton-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 10;
}

.skeleton-container {
  padding: 1em;
}

.skeleton-content {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.skeleton-table-row {
  display: flex;
  gap: 1em;
  align-items: center;
  /*padding: 10px 0;*/
}

/* Form loaders */

.skeleton-label,
.skeleton-input,
.skeleton-button,
.skeleton-row,
.skeleton-circle {
  background-color: #e0e0e0;
  background-image: linear-gradient(
    90deg,
    #e0e0e0 0px,
    #f0f0f0 40px,
    #e0e0e0 80px
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 10px;
}

.skeleton-label {
  height: 20px;
  width: 30%;
}

.skeleton-input {
  height: 40px;
  width: 100%;
}

.skeleton-button {
  height: 40px;
  width: 100px;
}

/* table loaders */

.skeleton-table {
  width: 100%;
  border-collapse: collapse;
  padding: 1em;
}

.skeleton-row-container {
  display: flex;
  align-items: center;
  gap: 1em;
  padding-bottom: 1em;
}

.skeleton-circle {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  flex: none;
}

.skeleton-row {
  height: 40px;
  width: 100%;
  flex-grow: 1;
}

.shimmer {
  animation: shimmer 1.5s infinite linear;
  background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
  background-size: 1000px 100%;
}

@keyframes skeleton-pulse {
  0% {
    background-position: -100% 0;
  }

  100% {
    background-position: 100% 0;
  }
}

.loader-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.5em;
}

.loader-small-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
}

.loader {
  width: 50px;
  aspect-ratio: 1;
}

.loader-small {
  width: 25px;
  aspect-ratio: 1;
}

.loader svg {
  width: 100%;
  height: 100%;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}

.loader-small svg {
  width: 100%;
  height: 100%;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}

.loader circle {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 8;
  stroke-linecap: round; /* <- rounded caps */
  stroke-linejoin: round;
}

.loader-circle {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 8;
  stroke-linecap: round; /* <- rounded caps */
  stroke-linejoin: round;
}

.inverted-circle {
  fill: none;
  stroke: var(--color-surface);
  stroke-width: 8;
  stroke-linecap: round; /* <- rounded caps */
  stroke-linejoin: round;
}

/* Google places auto complete overrides */
.pac-container {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border: 1px solid #e0e0e0;
  margin-top: 4px; /* Space between input and dropdown */
  z-index: 1050; /* Ensure it stays above modals/dialogs */
}

/* Individual suggestion row */
.pac-item {
  padding: 10px 14px;
  font-size: 12px;
  color: #333333;
  cursor: pointer;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
}

/* Hover and active states for rows */
.pac-item:hover,
.pac-item:active {
  background-color: #f5f5f5;
}

/* The primary text matching user input */
.pac-item-query {
  font-size: 12px;
  color: #1a1a1a;
  font-weight: 600;
}

/* Secondary address text (city, state, country) */
.pac-matched {
  color: var(--color-accent); /* Color matching text substrings */
}

/* Small Google attribution logo branding container */
.hdpi .pac-logo:after {
  padding: 2px;
  background-color: #fafafa;
}

@keyframes l20-1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }

  12.5% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 0%,
      100% 0%,
      100% 0%
    );
  }

  25% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      100% 100%,
      100% 100%
    );
  }

  50% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }

  62.5% {
    clip-path: polygon(
      50% 50%,
      100% 0,
      100% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }

  75% {
    clip-path: polygon(
      50% 50%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }

  100% {
    clip-path: polygon(
      50% 50%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      0% 100%
    );
  }
}

@keyframes l20-2 {
  0% {
    transform: scaleY(1) rotate(0deg);
  }

  49.99% {
    transform: scaleY(1) rotate(135deg);
  }

  50% {
    transform: scaleY(-1) rotate(0deg);
  }

  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}