:root {
        --occupied: #757e9d;
        --free: #1eda1e;
        --unknown: #cccccc;
        --icon: #000;
        --foreground: #000;
        --background: #fff;
        --page: #ececec;
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --occupied: #757e9d;
          --free: #1eda1e;
          --unknown: #808080;
          --foreground: #fff;
          --background: #222;
          --page: #212121;
        }
      }

      html,
      body {
        height: 100%;
        margin: 0;
        background-color: var(--page);
      }

      #map {
        width: 100%;
        height: 100%;
        background-color: var(--background);
        visibility: hidden;
      }

      .loaded #map {
        visibility: visible;
      }

      .leaflet-tile-pane {
        filter: grayscale(0.8) brightness(1) opacity(0.5) contrast(1);
      }

      .policy-image-overlay {
        color: var(--icon);
      }

      @media (prefers-color-scheme: dark) {
        .leaflet-tile-pane {
          filter: invert(1) grayscale(1) brightness(0.8) opacity(0.5)
            contrast(1);
        }

        .leaflet-control-attribution {
          filter: invert() grayscale(1);
        }
      }

      .parking-space {
        stroke: var(--foreground);
        stroke-width: 0.5;
        stroke-opacity: 0.5;
        fill-opacity: 1;
        transition: fill 0.2s ease;
      }
      .parking-space.occupied {
        fill: var(--occupied);
      }
      .parking-space.free {
        fill: var(--free);
      }
      .parking-space.unknown {
        fill: var(--unknown);
      }

      .parking-space.dimmed {
        opacity: 0.3;
        fill-opacity: 0.3;
        pointer-events: none !important;
      }

      .policy-image-overlay.dimmed {
        opacity: 0.2;
        pointer-events: none !important;
      }

      .policy-control {
        background-color: transparent;
        padding: 0;
        max-width: 200px;
        margin: 5px !important;
      }

      .policy-item {
        cursor: pointer;
        margin: 4px;
        background-color: var(--background);
        vertical-align: middle;
        border-radius: 5px;
        border: 1px solid rgb(65, 65, 147);
        color: var(--foreground);
        overflow: hidden;
      }

      .policy-item.filtered {
        filter: grayscale(1) contrast(0.5);
      }

      .policy-control-img {
        color: white;
        background-color: grey;
        padding: 0.4rem;
        width: 1.6rem;
        height: 1.6rem;
        vertical-align: middle;
      }

      .policy-control-img {
        background-color: rgb(65, 65, 147);
      }

      .availability {
        text-transform: uppercase;
        font-weight: bold;
      }

      .availability.free {
        border-color: var(--free);
      }
      .availability.occupied {
        border-color: var(--occupied);
      }
      .availability.unknown {
        border-color: var(--unknown);
      }

      .name {
        color: rgb(77, 77, 77);
      }

      .policy-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(1fr, auto));
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        margin-top: 8px;
        align-items: center;
        justify-items: center;
      }

      .policy-sign {
        width: 60px;
      }

      .policy-control-count {
        text-align: right;
        display: inline-block;
        text-align: center;
        margin-left: auto;
        font: 1.2rem Arial, sans-serif;
        vertical-align: middle;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
      }
      .policy-control-count .free {
        color: var(--foreground);
        font-style: bold;
      }
      .policy-control-count .total {
        color: grey;
        font: 0.8rem Arial, sans-serif;
      }
      
      .loaded .splash {
        display: none;
      }

      .splash {
        max-width: 40%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        filter: grayscale(1) opacity(0.5);
      }
      .splash img {
        max-width: 100%;
        max-height: 100%;
        margin-bottom: 5%;
        position: relative;
      }
      .loader {
        width: 100%;
        height: 1px;
        background: linear-gradient(#414141 0 0) 0/0% no-repeat #ddd;
        animation: l1 10s infinite linear;
      }
      @keyframes l1 {
        100% {
          background-size: 100%;
        }
      }