:root, body.light {
  --primary:#005fa3;
  --on-primary:#ffffff;
  --primary-container:#d1e4ff;
  --on-primary-container:#001d36;
  --secondary:#535f70;
  --on-secondary:#ffffff;
  --secondary-container:#d7e3f7;
  --on-secondary-container:#101c2b;
  --tertiary:#6b5778;
  --on-tertiary:#ffffff;
  --tertiary-container:#f2daff;
  --on-tertiary-container:#251431;
  --error:#ba1a1a;
  --on-error:#ffffff;
  --error-container:#ffdad6;
  --on-error-container:#410002;
  --on-warning:#ffffff;
  --background:#fdfcff;
  --on-background:#1a1c1e;
  --surface:#faf9fc;
  --on-surface:#1a1c1e;
  --surface-variant:#dfe2eb;
  --on-surface-variant:#43474e;
  --outline:#73777f;
  --outline-variant:#c3c7cf;
  --shadow:#000000;
  --scrim:#000000;
  --inverse-surface:#2f3033;
  --inverse-on-surface:#f1f0f4;
  --inverse-primary:#9ecaff;
  --surface-dim:#dadadd;
  --surface-bright:#faf9fc;
  --surface-container-lowest:#ffffff;
  --surface-container-low:#f4f3f7;
  --surface-container:#eeedf1;
  --surface-container-high:#e8e8eb;
  --surface-container-highest:#e2e2e6;
}

:root, body.dark {
  --primary:#53dbc9;
  --on-primary:#003731;
  --primary-container:#005048;
  --on-primary-container:#74f8e5;
  --secondary:#b1ccc6;
  --on-secondary:#1c3531;
  --secondary-container:#334b47;
  --on-secondary-container:#cce8e2;
  --tertiary:#adcae6;
  --on-tertiary:#153349;
  --tertiary-container:#2d4961;
  --on-tertiary-container:#cce5ff;
  --error:#ffb4ab;
  --on-error:#690005;
  --error-container:#93000a;
  --on-error-container:#ffb4ab;
  --background:#191c1b;
  --on-background:#e0e3e1;
  --surface:#101413;
  --on-surface:#e0e3e1;
  --surface-variant:#3f4947;
  --on-surface-variant:#bec9c6;
  --outline:#899390;
  --outline-variant:#3f4947;
  --shadow:#000000;
  --scrim:#000000;
  --inverse-surface:#e0e3e1;
  --inverse-on-surface:#2d3130;
  --inverse-primary:#006a60;
  --surface-dim:#101413;
  --surface-bright:#363a39;
  --surface-container-lowest:#0b0f0e;
  --surface-container-low:#191c1b;
  --surface-container:#1d201f;
  --surface-container-high:#272b2a;
  --surface-container-highest:#323534;
}

::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button {
  background: none;
  width: .4rem;
  height: .4rem
}

@media only screen and (max-width: 600px) {
  html, body {
    scrollbar-width: none;
  }

  ::-webkit-scrollbar {
    display: none;
  }
}

.scroll {
  &::-webkit-scrollbar-corner {
    background: none;
  }

  &.scrollbars {
    scrollbar-gutter: both-edges;

    &:hover {
      x-scrollbar-width: auto;
    }
  }
}

:root {
  height: 100dvh;
  --size: 15px;
  --font: Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Noto Sans", Arial, sans-serif;
  --font-mono: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Noto Sans", Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  -webkit-overflow-scrolling: touch;
  --header-height: calc(5 * var(--size));
  --warning:var(--outline);
  --success:#2E7D32;
  --on-success: #AEE2AE;
  --ch-width: 9.2px;
}

body {
  height: 100dvh;
  overflow: hidden hidden;

  @media only screen and (max-width: 601px) {
    :not(input, .selectable) {
      user-select: none;
    }
  }
}

body > header {
  block-size: var(--header-height);
}

body > main {
  block-size: 100dvh;
  padding: 0 6px 0px 6px;
  margin-block: var(--_top) var(--_bottom) !important;

  *:has(thead.fixed) {
    position: sticky;
    inset-block-start: -0.0625rem;
    z-index: 10;
  }

  > div.scroll {
    block-size: 100%;
  }
}

#loading-indicator {
  display: none;
  position: fixed;
  top: calc(var(--header-height));
  pointer-events: none;
  z-index: 100;
  block-size: 0.1rem;
  border-radius: 0;
}

#loading-indicator.htmx-request {
  display: inline;
}

.success {
  color: var(--success);
  background-color: var(--on-success);
}

dialog {
  --dialog-header-height: 5rem;

  .dialog-header {
    min-block-size: var(--dialog-header-height);
    max-block-size: var(--dialog-header-height);
  }

  .dialog-main {
    block-size: 100%;
    inline-size: 100%;
  }
}

.flex {
  display: flex;
  flex-direction: column;
}

button {
  font-weight: bold;
}

.button-like {
  font-weight: bold;
  font-size: 0.875rem;
}

.mini-padding {
  --_padding: .15rem !important;
}

.x-scroll-sync {
  overflow: auto hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

  ::-webkit-scrollbar {
    display: none;
  }
}

.grid.tiny-space {
  --_gap: 0.5rem;
}

.field * option:hover {
  background-color: var(--primary);
  color: var(--on-primary);
}

.field * option, .field * optgroup {
  background-color: var(--surface-container);
  color: var(--on-surface);
}

.field > label, span, select, option {
  line-height: 1.2rem;
}

select, option {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

tr:has(td > input[type="hidden"]) {
  display: none;
}

.tiny-text {
  font-size: 0.6rem;

  @media only screen and (min-width: 601px) {
    font-size: 0.75rem;
  }
}

dialog.extra:not(.top, .bottom, .left, .right) {
  inline-size: 94%;
  block-size: 94%;
  max-inline-size: 85rem;
  max-block-size: 94%;
  inset: 3% auto auto 50%;
}

:has(.overlay.active) body {
  overflow-y: hidden;
}

img {
  object-position: top !important; 
}

.img-container {
  overflow: hidden;
}

.cropped-image {
  width: 5.5rem; /* Adjust width as needed */
  height: 5.5rem; /* Adjust height as needed */
  overflow: hidden;
  position: relative;
  border-radius: 0;
}

.cropped-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -23%);
  max-width: none;
  max-height: none;
  zoom: 0.3;
}

.max-size:not(.tiny, .small, .medium, .large, .extra) {
  height: 100%;
  width: 100%;
}

:is(button,.button).tiny {
  --_size: 1.5rem;
  padding: 0 0.5rem;

  &.circle {
    --_size: 1.25rem;
    padding: 0;
  }

  @media only screen and (min-width: 601px) {
    padding: 0 1.5rem;
  }
}

.small-chip {
  block-size: 1.25rem;
  border-radius: 1rem;
  border: none;
  font-size: 0.75rem;
}

a:is(:hover, :focus) {
  > .icon-like {
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
    border-color: var(--secondary-container);
  }
}

.icon-like {
  block-size: 2rem;
  padding: 0.25rem;
  transition: padding var(--speed1) linear;

  nav > a > & {
    --_round: .5rem !important;
  }
}

.outline-border {
  border-color: var(--outline-variant) !important;
}

.static {
  background-image: none;
  pointer-events: none;
}

.warning {
  background-color: var(--warning) !important;
  color: var(--on-warning) !important;
}

table {
  font-family: var(--font-mono);

  &.no-space {
    --row-height: 42px;
    tr {
      block-size: var(--row-height);
    }
  }

  &.small-space {
    /* Override padding if row height is wanted to be changed. */
    --row-height: 40px;
    tr {
      block-size: var(--row-height);
      th,
      td {
        padding: 0 0.5rem 0 0.5rem;
      }
    }

    @media screen and (min-width: 601px) {
      --row-height: 46px;
    }
  }

  .fixed {
    z-index: 10;
    font-weight: bold;

    td {
      border-block-end: .0625rem solid var(--outline);
    }

    td:first-of-type {
      text-align: left;
    }

    &.fixed-2-row {
      top: var(--row-height);

      th, 
      td {
        border-block-start: .0625rem solid var(--outline);
      }
    }
  }
}

.mono-font {
  font-family: var(--font-mono);
}

.normal-font {
  font-family: var(--font) !important;
}

table.four-ch :is(th,td) {
  min-width: calc(4 * var(--ch-width));
}

table.five-ch :is(th,td) {
  min-width: calc(5 * var(--ch-width));
}

table.six-ch :is(th,td) {
  min-width: calc(6 * var(--ch-width));
}

table.seven-ch :is(th,td) {
  min-width: calc(7 * var(--ch-width));
}

table.eight-ch :is(th,td) {
  min-width: calc(8 * var(--ch-width));
}

table.twelve-ch :is(th,td) {
  min-width: calc(12 * var(--ch-width));
}

:not(table).four-ch {
  width: calc(4 * var(--ch-width)) !important;
}

:not(table).five-ch {
  width: calc(5 * var(--ch-width)) !important;
}

:not(table).six-ch {
  width: calc(6 * var(--ch-width)) !important;

  &:is(td, th)::before {
    content: '';
    display: block; 
    width: calc(6 * var(--ch-width)) !important;
  }
}

:not(table).seven-ch {
  width: calc(7 * var(--ch-width)) !important;

  &:is(td, th)::before {
    content: '';
    display: block; 
    width: calc(7 * var(--ch-width)) !important;
  }
}

:not(table).eight-ch {
  width: calc(8 * var(--ch-width)) !important;

  &:is(td, th)::before {
    content: '';
    display: block; 
    width: calc(8 * var(--ch-width)) !important;
  }
}

:not(table).twelve-ch {
  width: calc(12 * var(--ch-width)) !important;

  &:is(td, th)::before {
    content: '';
    display: block; 
    width: calc(12 * var(--ch-width)) !important;
  }
}

table.tiny-space :is(th,td) {
  ---padding: .25rem;
}

.field.fill:before, .field.fill {
    background-color: inherit !important;
    color: inherit !important;

    > input, select {
      background-color: var(--surface-container-highest);
      color: var(--on-surface-variant);
    }
}

.link {
  cursor: pointer;
}

.wave:has(.link)::after {
  cursor: pointer;
}

@media only screen and (min-width: 601px) {
  :root {
    --size: 18px;
  }
}