/****************************************************************************************
 *                                  Reusable "Components"
 ***************************************************************************************/

[x-cloak] {
  display: none !important;
}

/* dvh, not vh: mobile browsers resolve 100vh against the toolbar-hidden height, so the card
 * outgrew the list inside it and left dead space under the last row. */
.common-list-card {
    min-height: calc(100dvh - 10rem - env(safe-area-inset-bottom) - 30px);
}

@media (min-width: 1024px) {
    .common-list-card {
        min-height: calc(100vh - 10rem);
    }
}

/* Form row layout: stacked on mobile, side-by-side on desktop */
.common-form-row {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
}

.common-form-row__label {
    flex: 1;
    min-width: 0;
    font-size: var(--text-row);
    font-weight: 500;
    color: var(--color-olympia-ink-700);
}

/* Read-mode value rendered on the right side of a common-form-row. */
.common-form-row__value {
    font-size: var(--text-row);
    color: var(--color-olympia-ink-500);
}

/* Section header sitting above a common-form-row card. One tier heavier
   than row labels (text-base medium) so groups read as their own level. */
.common-form-section__header {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-olympia-ink-700);
}

.common-form-row__input {
    width: 100%;
    margin-top: 8px;
}

@media (min-width: 768px) {
    .common-form-row {
        flex-direction: row;
        align-items: start;
    }

    .common-form-row__label {
        padding-right: 24px;
    }

    .common-form-row__input {
        width: 320px;
        flex-shrink: 0;
        margin-top: 0;
        margin-left: auto;
        text-align: right;
    }

    .common-form-row__input input:not([type="hidden"]):not(.text-center),
    .common-form-row__input select:not(.text-center),
    .common-form-row__input textarea:not(.text-center),
    .common-form-row__input .common-template-forms-select,
    .common-form-row__input ul,
    .common-form-row__input .common-form-error {
        text-align: left;
    }
}

/* "Optional" badge appended inside a common-form-row label. The default
   convention is "required"; only optional fields show the badge. */
.common-form-row__optional {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 400;
    color: var(--color-olympia-ink-300);
}

/* Muted secondary line beneath a common-form-row label, paired with the
   label so the label tier doesn't read oversized on its own row. */
.common-form-row__description {
    margin-top: 2px;
    font-size: var(--text-row-secondary);
    line-height: var(--text-row-secondary--line-height);
    font-weight: 400;
    color: var(--color-olympia-ink-500);
}

/* Canonical text input / select used inside common-form-row.
   Warm-canvas fill, hairline border, emerald focus ring.
   Box dimensions match the legacy text-xs + p-2 footprint. */
.common-form-input {
    display: block;
    width: 100%;
    background-color: var(--color-olympia-canvas);
    border: 1px solid var(--color-olympia-canvas-border);
    border-radius: 0.5rem;
    padding: 8px;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--color-olympia-ink-900);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.common-form-input::placeholder {
    color: var(--color-olympia-ink-300);
}

.common-form-input:focus {
    outline: none;
    border-color: var(--color-olympia-emerald);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-olympia-emerald) 15%, transparent);
}

.common-form-input--error,
.common-form-input--error:focus {
    border-color: var(--color-olympia-clay-soft);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-olympia-clay-soft) 15%, transparent);
}

/* Normalize native UA chrome on time/date/number inputs so they sit at the
   same height as plain text inputs and don't render UA spinners/indicators
   that conflict with our custom icon overlays. */
input[type="time"].common-form-input,
input[type="date"].common-form-input,
input[type="datetime-local"].common-form-input,
input[type="number"].common-form-input {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: textfield;
}

.common-form-input::-webkit-calendar-picker-indicator,
.common-form-input::-webkit-inner-spin-button,
.common-form-input::-webkit-outer-spin-button,
.common-form-input::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

/* Modifier: one step up from the dense in-app footprint, for standalone pages (auth)
   where a single field carries the page. */
.common-form-input--lg {
    padding: 10px 12px;
    font-size: var(--text-row);
    line-height: var(--text-row--line-height);
}

/* Modifier: input has a leading icon overlaid on its left side. */
.common-form-input--with-leading-icon {
    padding-inline-start: 2.5rem;
}

/* Modifier: input has a trailing button/icon overlaid on its right side
   (e.g. password show/hide toggle). */
.common-form-input--with-trailing-icon {
    padding-inline-end: 2.5rem;
}

/* Modifier: input has a trailing currency / percentage symbol overlaid
   on its right side. Tighter pad than --with-trailing-icon. */
.common-form-input--with-trailing-symbol {
    padding-inline-end: 1.5rem;
}

/* Modifier: input is joined to a sibling control on its inline-start side
   (e.g. the country-code button on the phone field). Strips the start
   border + corners so the two elements read as one control. */
.common-form-input--joined-end {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-inline-start-width: 0;
}

/* Mirror of --joined-end: the input/select sits at the start of a joined
   control, with another input on its inline-end side. Sharpens the end
   corners so the trailing input can sit flush against it. */
.common-form-input--joined-start {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

/* Button-flavored variant of common-form-input — used as a select-style
   trigger that opens a dropdown. Same warm-canvas fill, hairline border,
   emerald focus ring, and 34px height; adds hover + disabled states since
   it's a click target rather than a typed-into field. */
.common-form-input-trigger {
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding: 8px;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    color: var(--color-olympia-ink-900);
    background-color: var(--color-olympia-canvas);
    border: 1px solid var(--color-olympia-canvas-border);
    border-radius: 0.5rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.common-form-input-trigger:hover {
    background-color: var(--color-olympia-canvas-hover);
}

.common-form-input-trigger:focus {
    outline: none;
    border-color: var(--color-olympia-emerald);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-olympia-emerald) 15%, transparent);
}

.common-form-input-trigger:disabled {
    background-color: var(--color-olympia-disabled-bg);
    color: var(--color-olympia-disabled-fg);
    border-color: var(--color-olympia-disabled-border);
    cursor: not-allowed;
}

/* Sibling button placed on the inline-start side of a joined input.
   Matches the input height and tokens; carries its own hover state. */
.common-form-prefix-button {
    display: inline-flex;
    align-items: center;
    padding: 8px;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: var(--color-olympia-ink-900);
    background-color: var(--color-olympia-canvas);
    border: 1px solid var(--color-olympia-canvas-border);
    border-start-start-radius: 0.5rem;
    border-end-start-radius: 0.5rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.common-form-prefix-button:hover {
    background-color: var(--color-olympia-canvas-hover);
}

.common-form-prefix-button:focus {
    outline: none;
    border-color: var(--color-olympia-emerald);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-olympia-emerald) 15%, transparent);
}

.common-form-error {
    margin-top: 8px;
    display: inline-flex;
    align-items: flex-start;
    align-self: flex-start;
    gap: 6px;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--color-olympia-clay-soft);
}

.common-form-error svg {
    width: 12px;
    height: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Reduce font size for all datepicker text */
.datepicker {
  font-size: 0.75rem !important;
}

.datepicker .datepicker-cell,
.datepicker .datepicker-footer,
.datepicker .days-of-week,
.datepicker .days-of-week .dow {
  font-size: 0.75rem !important;
}

.datepicker .datepicker-controls .view-switch {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

.datepicker .datepicker-controls .prev-btn svg,
.datepicker .datepicker-controls .next-btn svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
}

/* Selected date and hover state */
.datepicker .datepicker-cell.selected,
.datepicker .datepicker-cell:hover,
.datepicker .datepicker-header button:focus,
.datepicker .datepicker-header button:hover {
    background-color: var(--color-olympia-emerald) !important;
    color: var(--color-olympia-emerald-on) !important;
}

/* Footer buttons (like "Today" or "Clear") */
.datepicker .datepicker-footer button {
    background-color: var(--color-olympia-emerald) !important;
    border-color: var(--color-olympia-emerald) !important;
    color: var(--color-olympia-emerald-on) !important;
}

.datepicker-footer button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--color-olympia-emerald-focus) !important;
    border-color: var(--color-olympia-emerald-focus) !important;
}

/* On hover, arrows become white */
.datepicker-header button:hover svg {
    color: #ffffff;
    fill: #ffffff;
    stroke: #ffffff;
}

.datepicker-header button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--color-olympia-emerald-focus) !important;
    border-color: var(--color-olympia-emerald-focus) !important;
}

.datepicker .clear-btn {
  display: none !important;
}

.datepicker .today-btn {
  width: 100% !important;
  font-size: 0.75rem !important;
  padding: 0.4rem 0.75rem !important;
}

#nav-tab-background {
    position: absolute;
    bottom: 4px;          /* Add padding to the bottom */
    left: 0;
    height: calc(100% - 8px);  /* Adjust the height to account for padding (4px top and 4px bottom) */
    width: 0;
    background-color: #f3f4f6; /* bg-gray-100 */
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out; /* Smooth transition */
    border-radius: 8px;
    z-index: 0; /* Put it under the tab text but above the container */
}

.nav-tab-item {
    position: relative;
    z-index: 1;
    padding-top: 8px;    /* Add some padding on top */
    padding-bottom: 8px; /* Add some padding on bottom */
}

.tiptap p.is-editor-empty:first-child::before {
  color: var(--color-olympia-ink-300);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.tiptap p {
  margin: 0 0 0.75em;
}

.tiptap p:last-child {
  margin-bottom: 0;
}

.tiptap p:empty::before {
  content: "\00a0";
}

.tiptap h1 {
  font-size: 1.75em;
  font-weight: 700;
  margin: 1em 0 0.5em;
  line-height: 1.2;
}

.tiptap h2 {
  font-size: 1.5em;
  font-weight: 600;
  margin: 0.9em 0 0.5em;
  line-height: 1.3;
}

.tiptap h3 {
  font-size: 1.3em;
  font-weight: 600;
  margin: 0.8em 0 0.4em;
  line-height: 1.4;
}

.tiptap h4 {
  font-size: 1.15em;
  font-weight: 600;
  margin: 0.7em 0 0.3em;
  line-height: 1.5;
}

.tiptap h5 {
  font-size: 1em;
  font-weight: 600;
  margin: 0.6em 0 0.3em;
  line-height: 1.6;
}

.tiptap h6 {
  font-size: 0.9em;
  font-weight: 600;
  margin: 0.5em 0 0.25em;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.tiptap ul {
  list-style-type: disc;
  padding-left: 1.25rem;
}

.tiptap ol {
  list-style-type: decimal;
  padding-left: 1.25rem;
}

.tiptap li {
  margin-bottom: 0.25rem;
}

.tiptap a {
  color: var(--color-olympia-emerald);
  text-decoration: underline;
}

.is-active {
    background-color: var(--color-olympia-canvas-selected);
    border-color: var(--color-olympia-canvas-selected);
}

/* --------------------------------------- Alerts --------------------------------------- */

/* --break-tablet-small */
@media (min-width: 480px) {
    .common-template-django-messages {
        margin-top: 10px;
    }
}

/* --------------------------------------- Forms --------------------------------------- */

/* >>> Forms <<< */

.common-form {
    padding: 0 16px;
}

.common-form div:not(:first-child) {
    margin-top: 16px;
}

.common-form__form-items {
    display: flex;
    flex-direction: column;
}

.common-form__form-items div:not([class]) {
    display: flex;
    flex-direction: column;
}

.common-form__form-items ul.errorlist {
    order: 1;
    margin-top: 5px;
}

.common-form__form-items li {
    color: var(--color-error);
    font: var(--text-xs) var(--font-sans);
}

.common-form__form-items--hidden {
    display: none;
}

/* --break-tablet-large */
@media (min-width: 768px) {
    .common-form {
        padding: 0;
    }
}

/* ----------------------------------------- Lists ------------------------------------------ */

.common-list-item {
    display: flex;
    padding: 12px 16px;
}

.common-list-item--expandable {
    padding: 0;
    flex-direction: column;
}

.common-list-item__row {
    display: flex;
    align-items: flex-start;
    width: calc(100% - 16px);
    padding: 12px 8px;
    margin: 0 8px;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
}

@media (hover: hover) {
    .common-list-item__row:hover {
        background-color: var(--color-olympia-surface-hover);
    }

    .common-list-item__row .common-list-item__trailing-details__item {
        visibility: hidden;
    }

    .common-list-item__row:hover .common-list-item__trailing-details__item {
        visibility: visible;
    }

    .common-list-item__row .common-list-item__open {
        visibility: hidden;
    }

    .common-list-item__row:hover .common-list-item__open {
        visibility: visible;
    }
}



/* --break-tablet-small */
@media (min-width: 480px) {
    .common-list-item {
        padding: 12px 32px;
    }
    .common-list-item--expandable {
        padding: 0;
    }
    .common-list-item__row {
        padding: 12px 24px;
    }
}

.common-list-item__logo {
    display: flex;
    align-items: flex-start;
}

.common-list-item__logo img {
    border-radius: 50%;
}

.common-list-item__details--navbar {
    display: flex;
    width: 100%;
    margin-left: 16px;
}

.common-list-item__details {
    flex: 1;
    min-width: 0; /* Required for text truncation */
    margin-left: 10px;
}

.common-list-item__details h2 {
    font-weight: bold;
}

.common-list-item__details h2 span {
    color: var(--color-secondary);
    font-size: var(--font-size-tiny);
}

.common-list-item__trailing-details {
    display: flex;
    flex-shrink: 0; /* Prevent shrinking */
    align-items: center;
    justify-content: flex-end;
    margin-left: auto; /* Push to far right */
}

/* Display columns: extra properties shown per row (common/lists/column.html + columns_header.html), desktop only:
   phone rows have no room for them. The list becomes a grid whose tracks header and rows share through subgrid,
   so each column is as wide as its widest label or value (see the media block below). */
.common-list__columns-header,
.common-list-item__column {
    display: none;
}

.common-list-item__column-value {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--color-olympia-ink-700);
    white-space: nowrap;
}

.common-list-item__column-value--empty {
    color: var(--color-olympia-ink-300);
}

.common-list-item__column-caption {
    font-size: 0.75rem;
    line-height: 1rem;
    white-space: nowrap;
}

@media (min-width: 768px) {
    /* With columns active the list is the grid: avatar track, details track (remaining space, 18rem floor), one
       max-content track per column (--common-list-columns, set by the template) and the actions slot. Header and
       rows join these tracks through subgrid, so a column is exactly as wide as its widest label or value and
       nothing is configured or trimmed. The edge tracks size by content so they also absorb the rows' horizontal
       inset, which subgrid takes out of them. Past the details floor the list scrolls sideways.
       Row contract: a row must be `.common-list-item__logo`, `.common-list-item__details` and
       `.common-list-item__trailing-details` in that order (they map to the first two tracks and the rest), with the
       column cells and the actions item as the trailing block's direct children. */
    .common-list.common-list--columns {
        display: grid;
        grid-template-columns: max-content minmax(18rem, 1fr) repeat(var(--common-list-columns, 0), max-content) max-content;
        grid-auto-rows: max-content;
        align-content: start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .common-list--columns > li,
    .common-list--columns .common-list-item--expandable,
    .common-list--columns .common-list-item__row,
    .common-list--columns .common-list__columns-header {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
    }

    /* Overlays nested in a row item (drawer, bottom sheet) are fixed; keep their roots off the column tracks */
    .common-list--columns > li:not(.common-list__columns-header) > :not(.common-list-item) {
        grid-column: 1 / -1;
    }

    /* Anything in the list that isn't a row or the header (the empty state) spans the whole row of tracks */
    .common-list--columns > :not(li) {
        grid-column: 1 / -1;
    }

    /* The row's margin and padding are absorbed into the edge tracks, so its cells sit on the shared lines */
    .common-list--columns .common-list-item__row {
        width: auto;
        align-items: flex-start;
    }

    .common-list--columns .common-list-item__trailing-details {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 3 / -1;
        align-items: center;
    }

    /* Same horizontal inset as the rows at this width: 8px row margin + 24px row padding */
    .common-list__columns-header {
        position: sticky;
        top: 0;
        z-index: 1;
        align-items: center;
        padding: 6px 32px;
        background-color: white;
    }

    /* Spans the avatar and details tracks: starts at the row's leading edge like every other label at its column's */
    .common-list__columns-header-name {
        grid-column: 1 / 3;
        min-width: 0;
    }

    /* Header labels are never trimmed: the column's track grows to fit the longest label plus the sort arrow */
    .common-list__columns-header .common-list-item__column-caption,
    .common-list__columns-header-name {
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 400;
        color: var(--color-olympia-ink-500);
    }

    /* Column label; the active sort adds the direction arrow */
    .common-list__columns-header-label {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .common-list__columns-header-sort-arrow {
        width: 0.75rem;
        height: 0.75rem;
        flex-shrink: 0;
        color: var(--color-olympia-ink-500);
    }

    /* Cells take their track's width; the margin is the gap between columns and counts toward the track */
    .common-list-item__column {
        display: flex;
        margin-left: 1rem;
    }

    /* Right-edge fade on the list's wrapper, driven by the list's horizontal scroll position with no script, so it
       is there on first paint: full until the last stretch, gone at the end. A list that doesn't overflow sideways
       has an inactive timeline, which leaves the overlay at its invisible base state. */
    .common-list--columns {
        scroll-timeline: --common-list-x x;
    }

    .common-list--columns-wrap {
        timeline-scope: --common-list-x;
    }

    .common-list--columns-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 2rem;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
        opacity: 0;
        animation: common-list-fade-end linear both;
        animation-timeline: --common-list-x;
    }

    @keyframes common-list-fade-end {
        from { opacity: 1; }
        85% { opacity: 1; }
        to { opacity: 0; }
    }
}

.common-list-result-alert {
    padding: 10px;
    text-align: center;
}

/* --break-screen-small */
@media (min-width: 1024px) {
    .common-list li:last-child > a {
        border-bottom: 0;
    }
}

/* --------------------------------------- Navigation --------------------------------------- */

/* >>> Nav Icons <<< */

.common-nav-icons ul {
    display: flex;
    justify-content: center;
    padding: 12px 16px 4px;
}

.common-nav-icons li {
    width: 100%;
    cursor: pointer;
}

.common-nav-icons a,
.common-nav-icons button {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.common-nav-icons a div,
.common-nav-icons button div {
    display: flex;
    justify-content: center;
}

.common-nav-icons a div:first-child span,
.common-nav-icons button div:first-child span {
    font-size: 32px;
}

.common-nav-icons a div:last-child,
.common-nav-icons button div:last-child {
    font-size: var(--font-size-bottom-navigation);
}

/* --break-screen-small */
@media (min-width: 1024px) {
    .common-nav-icons ul {
        display: initial;
        padding: 0;
    }

    .common-nav-icons li {
        padding: 8px;
    }

    .common-nav-icons li:not(:first-child) {
        margin-top: 16px;
    }

    .common-nav-icons li:hover,
    .common-nav-icons {
        border-radius: var(--radius-lg);
        background-color: var(--color-border);
    }

    .common-nav-icons a div:first-child span {
        font-size: 48px;
    }

    .common-nav-icons a div:last-child {
        margin-top: 6px;
        font-size: var(--text-xs);
    }
}

/* --------------------------------------- Pagination --------------------------------------- */

.common-pagination {
    display: flex;
    align-items: center;
    padding: 10px 16px;
}

.common-pagination a {
    display: flex;
    align-items: center;
    color: var(--color-olympia-ink-300);
    padding: 4px;
    border-radius: 9999px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.common-pagination a:hover {
    color: var(--color-olympia-ink-700);
    background-color: var(--color-olympia-surface-selected);
}

.common-pagination__current {
    display: flex;
    justify-content: center;
    width: 100%;
}

.common-pagination__previous {
    display: flex;
    justify-content: flex-end;
    min-width: 50px;
    margin-right: 10px;
}
.common-pagination__next {
    display: flex;
    justify-content: flex-start;
    min-width: 50px;
}

/* --break-tablet-large */
@media (min-width: 768px) {
    .common-pagination {
        padding: 10px 32px;
    }

    .common-pagination--bottom {
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }
}

/****************************************************************************************
 *                                  Reusable Templates
 ***************************************************************************************/


 /* -------------------------------------- Events ------------------------------------- */

.common-template-events-week-calendar {
    margin-top: 16px;
}

.common-template-events-week-calendar__month {
    display: flex;
    padding: 16px;
    border-bottom: 1px solid var(--color-olympia-surface-200);
}

.common-template-events-week-calendar__month h3 {
    display: flex;
    align-items: center;
    width: 100%;
}

.common-template-events-week-calendar__month div {
    display: flex;
    align-items: center;
}

.common-template-events-week-calendar__week {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    padding: 8px 0;
}

.common-template-events-week-calendar__week li,
.common-template-events-week-calendar__week li a {
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
}

.common-template-events-week-calendar__current-day {
    background-color: var(--color-olympia-emerald);
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: relative;
}

.common-template-events-week-calendar__unselected-day {
    background-color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
    .common-template-events-week-calendar__week li a:hover .common-template-events-week-calendar__unselected-day {
        background-color: var(--color-olympia-surface-hover);
    }

    .common-template-events-week-calendar__week li a svg {
        transition: color 0.15s ease;
    }

    .common-template-events-week-calendar__week li a:hover svg {
        color: var(--color-olympia-ink-900);
    }
}

.common-template-events-week-calendar__events {
    margin-top: 8px;
    border-top: 1px solid var(--color-border);
}

/* --------------------------------------- Forms -------------------------------------- */

.common-template-forms-select__select {
    display: none;
}

.common-template-forms-select__button button {
    display: flex;
}

.common-template-forms-select__button-label {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.common-template-forms-select ul li span {
    cursor: pointer;
}

/* ------------------------------------- Navigation ----------------------------------- */

.common-template-navigation-bar {
    align-items: center;
    min-width: 0;
}

.common-template-navigation-bar a {
    cursor: pointer;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}