/* START The things that are used 100% in the new design. */
@import url("./variables.b3a364bfeb04.css");
@import url("../base.fc758846001a.css");

:root {
    --body-top: 0;
    --container-top: 0;
}

/* START Reboot */
* {
    box-sizing: border-box;
}

th {
    text-align: inherit;
}

body,
.bgcolor {
    color: var(--dryft-text-color);
    background-color: var(--bg-color);
}

body {
    font-weight: 400;
    line-height: 1.3;
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Compensate for fixed footer for pages that contain a form */
    padding-bottom: 80px;
}
/* END Reboot */

/* START DebugMenu */
[data-iommi-type="DebugMenu"] {
    right: 0 !important;

    ul {
        display: flex;
        flex-direction: row;
        gap: 15px;
        margin: 0;
        font-size: 80%;
        padding: 0;

        a {
            padding: 8px;
            display: inline-flex;
        }
    }
}
/* END DebugMenu */

/* START Details */
.details {
    --filled-bg: var(--panel-bg-color);
    --filled-border: var(--panel-border-color);
    --filled-color: var(--dryft-text-color);

    border-radius: 16px;
    border: 1px solid var(--table-border);
    background-color: transparent;
    overflow: hidden;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;

    &.filled,
    &[open]:not(.closing).filled_when_open {
        border-color: var(--filled-border);
        background-color: var(--filled-bg);
        color: var(--filled-color);
    }

    &[open]:not(.closing) > summary::before {
        rotate: 90deg;
    }

    summary {
        cursor: pointer;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 16px;

        &::marker {
            content: '>';
            content: none;
        }

        &::before {
            content: '>';
            transition: rotate 0.3s;
            display: inline-block;
            margin-right: 10px;
            font-size: 24px;
            font-weight: 500;
        }
    }
}

.details_content {
    padding: 0 16px 16px 16px;
}
/* END Details */

/* START Tooltip/Popover */
.tooltip {
    cursor: help;
}

.popover {
    cursor: pointer;
}

.tooltip_content,
.popover_content {
    display: none !important;
}

/* START Generated via JS */
.custom_tooltip,
.custom_popover {
    position: absolute;
    z-index: 999;
    max-width: 600px;
    background-color: var(--bg);
    color: var(--text-color);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    padding: 8px 12px;
}

.custom_tooltip {
    --bg: var(--primary-color);
    --text-color: var(--primary-contrast-color);
}

.custom_popover {
    --bg: var(--bg-color);
    --text-color: var(--dryft-text-color);
    --filter-color: drop-shadow(0 0 1px rgba(0, 0, 0, .3));

    filter: var(--filter-color);

    &::after {
        filter: var(--filter-color);
    }
}

.custom_tooltip.is_visible,
.custom_popover.is_visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.custom_tooltip::after,
.custom_popover::after {
    content: "";
    position: absolute;
    border: 6px solid transparent;
}

.custom_tooltip.bottom_arrow::after,
.custom_popover.bottom_arrow::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--bg);
}
.custom_tooltip.top_arrow::after,
.custom_popover.top_arrow::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--bg);
}

.custom_tooltip.left_arrow::after,
.custom_popover.left_arrow::after {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--bg);
}

.custom_tooltip.right_arrow::after,
.custom_popover.right_arrow::after {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--bg);
}
/* END Generated via JS */
/* END Tooltip/Popover */

/* START Badges */
.badge {
    --color: var(--muted-color);
    --border-color: var(--muted-color);
    --bg-color: transparent;
    --border-radius: 4px;
    --padding: 4px 8px;
    --font-size: 14px;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--padding);
    font-size: var(--font-size);
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--border-radius);
    color: var(--color);
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    width: max-content;
}

.badge_primary {
    --color: var(--primary-contrast-color);
    --border-color: var(--primary-color);
    --bg-color: var(--primary-color);
}

.badge_success {
    --color: var(--success-contrast-color);
    --border-color: var(--success-color);
    --bg-color: var(--success-color);
}

.badge_danger {
    --color: var(--danger-contrast-color);
    --border-color: var(--danger-color);
    --bg-color: var(--danger-color);
}

.badge_warning {
    --color: var(--warning-contrast-color);
    --border-color: var(--warning-color);
    --bg-color: var(--warning-color);
}

.badge_tertiary {
    --color: var(--tertiary-contrast-color);
    --border-color: var(--tertiary-color);
    --bg-color: var(--tertiary-color);
}

.badge_muted {
    --color: var(--muted-contrast-color);
    --border-color: var(--muted-color);
    --bg-color: var(--muted-color);
}

.badge_pale {
    --color: var(--pale-contrast-color);
    --border-color: var(--pale-color);
    --bg-color: var(--pale-color);
}

.badge_notice {
    --color: var(--notice-contrast-color);
    --border-color: var(--notice-color);
    --bg-color: var(--notice-color);
}

.badge_info {
    --color: var(--info-contrast-color);
    --border-color: var(--info-color);
    --bg-color: var(--info-color);
}

.badge_light {
    --color: var(--dryft-text-color);
    --border-color: #E9E9F0;
    --bg-color: var(--bg-color);
}

[class*="badge_outline_"] {
    --bg-color: transparent;
}

.badge_outline_primary {
    --color: var(--primary-color);
    --border-color: var(--primary-color);
}

.badge_outline_success {
    --color: var(--success-color);
    --border-color: var(--success-color);
}

.badge_outline_danger {
    --color: var(--danger-text-color);
    --border-color: var(--danger-text-color);
}

.badge_outline_warning {
    --color: var(--warning-color);
    --border-color: var(--warning-color);
}

.badge_outline_tertiary {
    --color: var(--tertiary-color);
    --border-color: var(--tertiary-color);
}

.badge_outline_muted {
    --color: var(--muted-color);
    --border-color: var(--muted-color);
}

.badge_outline_notice {
    --color: var(--notice-color);
    --border-color: var(--notice-color);
}

.badge_pill {
    --border-radius: 100px;
}

.badge_lg {
    --padding: 8px 12px;
}

/* For a badge that annotates something rather than announcing it: a count beside
   a heading, a percentage beside a price. */
.badge_sm {
    --padding: 1px 8px;
    --font-size: 11px;
}

/*
 * A bare form control: an input, select or textarea drawn as nothing more than a
 * bordered box at text size. .input_container is the form-page control -- 52px
 * tall, its own label and error slots -- which is the right thing on a form and
 * far too much inside a table cell or an inline editor. This is that same control
 * with the furniture taken off.
 */
.control {
    padding: 4px 8px;
    border: 1px solid var(--dryft-border-color);
    border-radius: var(--border-radius-small);
    background: var(--box-color);
    color: inherit;
    font: inherit;
    font-size: 13px;
}

.control:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -1px;
}

.control_sm {
    padding: 3px 6px;
    font-size: 12px;
}

/* START Modal */
/*
 * A modal made of plain divs. <dialog>'s showModal() needs a JS port and the Elm
 * apps here have none, so this gives the same shape -- a scrim, a centred box, a
 * head, a scrolling body, a row of actions -- to anything that can only render
 * markup.
 *
 * The scrim covers the sidebar menu (z-index 998) but centres its dialog in the
 * part of the page the menu is not covering, so a wide dialog never slides under
 * it. On mobile the menu widths are 0 and it centres in the viewport.
 */
.modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--medium-gap);
    padding-left: calc(var(--menu-width, 0px) + var(--medium-gap));
    background: color-mix(in srgb, var(--dryft-dark-color) 45%, transparent);
    backdrop-filter: blur(2px);
}

.compact_menu .modal {
    padding-left: calc(var(--compact-menu-width, 0px) + var(--medium-gap));
}

.modal_dialog {
    display: flex;
    flex-direction: column;
    gap: var(--medium-gap);
    width: min(420px, 100%);
    max-height: 92vh;
    overflow: hidden;
    padding: var(--large-gap);
    border-radius: var(--panel-border-radius);
    background: var(--box-color);
    box-shadow: 0 8px 32px var(--shadow-color);
}

/* Wide enough for a list; wide enough for a table. */
.modal_dialog_wide { width: min(680px, 100%); }
.modal_dialog_full { width: 100%; max-width: 1180px; }

/* A dialog whose head is a band rather than a line of text: the padding moves
   off the box and onto the parts, so the head can carry its own ground. */
.modal_dialog_flush {
    gap: 0;
    padding: 0;
}

.modal_head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--close-gap);
}

.modal_dialog_flush > .modal_head {
    align-items: stretch;
    border-bottom: 1px solid var(--dryft-border-color);
    background: var(--panel-bg-color);
}

.modal_title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.modal_subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--dryft-subtle-text-color);
}

.modal_body {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    overflow-y: auto;
    font-size: 14px;
    line-height: 22px;
}

.modal_dialog_flush > .modal_body {
    padding: var(--medium-gap) 26px 22px;
}

.modal_actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--close-gap);
}

.modal_dialog_flush > .modal_actions {
    padding: var(--close-gap) var(--medium-gap);
    border-top: 1px solid var(--dryft-border-color);
}
/* END Modal */

/* START Steps */
/*
 * The rail across the top of a wizard: where you are, what you have done, what
 * is still coming. Equal columns rather than content width, so the labels sit
 * where the eye expects them however long one of them gets translated to.
 */
.steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    flex: 1;
    margin: 0;
    padding: 14px var(--medium-gap);
    list-style: none;
}

.step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    font-size: 13px;
    color: var(--muted-color);
}

.step_number {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--dryft-border-color);
    background: var(--bg-color);
    font-size: 13px;
    font-weight: 600;
}

.step_active {
    color: var(--dryft-text-color);
    font-weight: 600;
}

.step_active .step_number {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--primary-contrast-color);
}

.step_done {
    color: var(--success-color);
}

.step_done .step_number {
    border-color: var(--success-color);
    color: var(--success-color);
}
/* END Steps */

/* START Note */
/*
 * A line or two set aside from the flow: an explanation, a caution, a refusal.
 * Quieter than a badge and louder than body text, and toned by what it is for.
 */
.note {
    padding: 10px 14px;
    border: 1px solid var(--dryft-border-color);
    border-radius: var(--border-radius);
    background: var(--panel-bg-color);
    color: var(--dryft-text-color);
    font-size: 13px;
    line-height: 1.5;
}

.note_warning {
    border-color: var(--warning-color);
    background: color-mix(in srgb, var(--warning-color) 12%, transparent);
}

.note_danger {
    border-color: var(--danger-text-color);
    background: color-mix(in srgb, var(--danger-text-color) 12%, transparent);
    color: var(--danger-text-color);
}
/* END Note */

/* START Dropzone */
/*
 * Somewhere to drop a file, drawn as a dashed target the size of the gesture
 * rather than the size of the words in it.
 */
.dropzone {
    display: block;
    padding: 32px;
    border: 2px dashed var(--primary-color);
    border-radius: 12px;
    background: var(--panel-bg-color);
    text-align: center;
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
}

.dropzone_over {
    border-color: var(--dryft-text-color);
    background: var(--bg-color);
}

.dropzone input[type="file"] {
    display: none;
}
/* END Dropzone */

/* START Skeleton */
/* A bar of nothing, sweeping, while the real thing is fetched. */
.skeleton {
    height: 22px;
    margin: 8px auto;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--panel-bg-color) 25%, var(--bg-color) 50%, var(--panel-bg-color) 75%);
    background-size: 200% 100%;
    animation: skeleton_sweep 1.4s ease-in-out infinite;
}

@keyframes skeleton_sweep {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
    }
}
/* END Skeleton */

/* START Stat */
/* One figure, said once, with its name over it and its detail under it. */
.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--dryft-border-color);
    border-radius: var(--border-radius);
    background: var(--box-color);
}

.stat_label {
    font-size: 11px;
    font-weight: 500;
    color: var(--dryft-subtle-text-color);
}

.stat_value {
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    font-variant-numeric: tabular-nums;
}

.stat_sub {
    font-size: 12px;
    color: var(--dryft-subtle-text-color);
}
/* END Stat */

/* START Chip */
/*
 * A chip: a small clickable thing carrying a value that can be switched on -- a
 * filter, a facet, a granted permission. A badge states something; a chip does
 * something. The tones tint rather than fill, so a chip still reads as a control
 * and its color says what kind of thing it is rather than how loud it is.
 */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--pill-radius);
    background: var(--box-level-2-color);
    color: var(--dryft-text-color);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.chip_danger {
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    color: var(--danger-text-color);
}

.chip_warning {
    background: color-mix(in srgb, var(--warning-color) 16%, transparent);
    color: var(--warning-color);
}

.chip_success {
    background: color-mix(in srgb, var(--success-color) 14%, transparent);
    color: var(--success-color);
}

/* Switched on. A ring rather than a change of fill, so the tone still says what
   kind of chip it is. */
.chip_on {
    border-color: currentColor;
    box-shadow: 0 0 0 1px currentColor;
}

/* Not granted but earned -- dashed, because nothing was decided here. */
.chip_provisional {
    border-style: dashed;
}

/*
 * A chip in two parts: the value, and the button that takes it away. The chip
 * becomes the frame, the parts carry the padding, and the divider between them
 * is the frame's own border colour.
 */
.chip_split {
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    border-color: var(--dryft-border-color);
    border-radius: var(--border-radius);
    background: var(--box-color);
}

.chip_body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 6px 10px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.chip_remove {
    padding: 0 10px;
    border: 0;
    background: none;
    color: var(--dryft-subtle-text-color);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.chip_split .chip_remove {
    border-left: 1px solid var(--dryft-border-color);
}

.chip_remove:hover {
    color: var(--danger-text-color);
}
/* END Chip */

/* START Event log */
/*
 * A list of things that happened: who did it, what they did, when, and a line of
 * detail. The time is pushed to the right edge of each entry's head, so the times
 * form a column to read down however long the sentences beside them are.
 */
.event_log {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--close-gap) 0;
    border-bottom: 1px solid var(--dryft-border-color);
    font-size: 13px;
}

.event:last-child {
    border-bottom: 0;
}

.event_head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--close-gap);
}

.event_time {
    margin-left: auto;
    color: var(--dryft-subtle-text-color);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.event_detail {
    color: var(--dryft-subtle-text-color);
    font-size: 12px;
}

/*
 * What an edit moved, a line per field. One price edit touches half a dozen
 * fields at once, so they are rows with the labels in a column rather than a
 * sentence to pick apart.
 */
.event_changes {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;

    & li {
        display: flex;
        align-items: baseline;
        gap: var(--tiny-gap);
    }
}

.event_change_label {
    flex: 0 0 auto;
    min-width: 11em;
    color: var(--dryft-subtle-text-color);
}

/* The value being left behind reads as left behind. */
.event_change_from,
.event_change_arrow {
    color: var(--dryft-subtle-text-color);
}

.event_change_to {
    font-weight: 600;
}

/*
 * The same log folded into one line per entry, for a history shown inside the
 * row it belongs to. The time leads instead of trailing, in a fixed column.
 */
.event_log_compact {
    gap: var(--tiny-gap);
}

.event_log_compact .event {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--close-gap);
    padding: 0;
    border-bottom: 0;
    font-size: 12px;
}

.event_log_compact .event_time {
    width: 10em;
    flex: 0 0 auto;
    margin-left: 0;
}
/* END Event log */
/* END Badges */

/* START Drawer */
#drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--scrim-color);
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease;
    z-index: 9998;
}

#drawer-overlay.active {
    opacity: 1;
    display: block;
}

.drawer_content {
    --width: 320px;
    --height: max-content;
    --padding: 16px;

    position: fixed;
    background: var(--bg-color);
    z-index: 9999;
    overflow-y: auto;
    transition: transform 0.3s ease;
    border: 1px solid light-dark(#E9E9F0, #333);
    display: none;
    padding: var(--padding);

    &.left,
    &.right {
        max-width: 100%;
        width: var(--width);
        height: 100%;

        &.active {
            transform: translateX(0);
        }
    }

    &.left {
        top: 0;
        left: 0;
        transform: translateX(-100%);
    }

    &.right {
        top: 0;
        right: 0;
        transform: translateX(100%);
    }

    &.top,
    &.bottom {
        max-height: 100%;
        height: var(--height);
        width: 100%;

        &.active {
            transform: translateY(0);
        }
    }

    &.top {
        top: 0;
        left: 0;
        transform: translateY(-100%);
    }

    &.bottom {
        bottom: 0;
        left: 0;
        transform: translateY(100%);
    }
}
/* END Drawer */

/* START Panel */
.panel {
    background-color: var(--panel-bg-color);
    color: var(--dryft-text-color);
    border-radius: var(--panel-border-radius);
    border: 1px solid var(--panel-border-color);
    padding: var(--panel-padding);
}

.panel a {
    color: var(--dryft-text-color);
}

/*
 * The quiet panel. Same shape as .panel and built from the same border, radius
 * and padding tokens, on a ground close enough to the page that what sits inside
 * it -- cards, tables, a .panel of its own -- reads as the content and this reads
 * as the grouping. Its own class rather than a .panel modifier, so it does not
 * inherit the `.panel + .panel` stacking margin: these usually sit in a flex
 * column that already spaces them.
 */
.panel_light {
    background-color: var(--panel-light-bg-color);
    color: var(--dryft-text-color);
    border-radius: var(--panel-border-radius);
    border: 1px solid var(--panel-border-color);
    padding: var(--panel-padding);
}

.panel-secondary {
    background-color: var(--panel-secondary-bg-color);
    color: var(--dryft-text-color-dark-background);
}

.panel-secondary a {
    color: var(--dryft-text-color-dark-background);
}

.panel + .panel {
    margin-top: var(--large-gap);
}

.panel .input_container {
    background-color: var(--bg-color);
}

.panel .panel {
    background-color: var(--panel-nested-bg-color);
}

.panel .panel .input_container {
    background-color: var(--form-control-bg-color);
}
/* Collapsible panel header */
.panel_header {
    display: flex;
    align-items: center;
    gap: var(--close-gap);
    padding: var(--close-gap) var(--panel-padding);
    margin: calc(-1 * var(--panel-padding)) calc(-1 * var(--panel-padding)) var(--panel-padding);
    background: var(--panel-header-bg-color);
    border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0;
    cursor: pointer;
    user-select: none;
}

.panel_header h3 { margin: 0; }

.panel_header img {
    width: 16px;
    height: 16px;
}

.panel_header .expand_icon { display: none; }
.panel.collapsed .panel_header .collapse_icon { display: none; }
.panel.collapsed .panel_header .expand_icon { display: block; }
.panel.collapsed .panel_body { display: none; }
.panel.collapsed .panel_header {
    margin-bottom: calc(-1 * var(--panel-padding));
    border-radius: var(--panel-border-radius);
}
/* END Panel */

/* START Dialog */
body:has(dialog[open]) {
    overflow: hidden;
}

dialog {
    --padding-x: 20px;
    --padding-y: 20px;
    --max-width: 960px;

    border: none;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 25px 50px -12px var(--shadow-color);
    max-width: var(--max-width);
    width: max-content;
    background-color: var(--bg-color);
}

dialog::backdrop {
    background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(4px);
}

.dialog_header,
.dialog_body,
.dialog_footer {
    padding: var(--padding-y) var(--padding-x);
    background-color: var(--bg-color);
}

.dialog_header {
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--border-subtle);
}

.dialog_footer {
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--border-subtle);
}

.dialog_trigger,
.dialog_close {
    cursor: pointer;
}
/* END Dialog */

/* START Search Field */
.search_field {
    border-radius: 40px;
    border: 1px solid var(--form-control-placeholder-color);
    background-color: var(--form-control-color);
    padding: 8px 12px 8px 40px;
    font-family: Poppins;
    font-size: 15px;
    line-height: 22px;
    color: var(--form-control-placeholder-color);
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.0002 21L16.6572 16.657M16.6572 16.657C17.4001 15.9141 17.9894 15.0322 18.3914 14.0615C18.7935 13.0909 19.0004 12.0506 19.0004 11C19.0004 9.94939 18.7935 8.90908 18.3914 7.93845C17.9894 6.96782 17.4001 6.08588 16.6572 5.34299C15.9143 4.6001 15.0324 4.01081 14.0618 3.60877C13.0911 3.20672 12.0508 2.99979 11.0002 2.99979C9.9496 2.99979 8.90929 3.20672 7.93866 3.60877C6.96803 4.01081 6.08609 4.6001 5.34321 5.34299C3.84288 6.84332 3 8.87821 3 11C3 13.1218 3.84288 15.1567 5.34321 16.657C6.84354 18.1573 8.87842 19.0002 11.0002 19.0002C13.122 19.0002 15.1569 18.1573 16.6572 16.657Z' stroke='%23737C80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center left 10px;
    outline: none;
    width: 100%;
}
/* END Search Field */

/* START Inputs */
.input_error_text {
    margin: 2px 0 0 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    color: var(--danger-text-color);
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    margin: 0;
    width: 14px;
    height: 14px;
    border: 1px solid var(--primary-color);
    border-radius: 3px;
    position: relative;
    cursor: pointer;

    &::before {
        content: "";
        width: 8px;
        height: 8px;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        transform-origin: bottom left;
        background-color: var(--primary-contrast-color);
        display: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
    }

    &:checked {
        background-color: var(--primary-color);

        &::before {
            display: block;
        }
    }

    &.is_invalid {
        border-color: var(--danger-text-color);

        &:checked {
            background-color: var(--danger-color);
        }

        &::before {
            background-color: var(--danger-contrast-color);
        }
    }

    &.is_valid {
        border-color: var(--success-color);

        &:checked {
            background-color: var(--success-color);
        }

        &::before {
            background-color: var(--success-contrast-color);
        }
    }

    &:disabled {
        opacity: 0.4;
        cursor: not-allowed;

        & + label {
            opacity: 0.4;
            cursor: not-allowed;
        }
    }
}

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    margin: 0;
    width: 14px;
    height: 14px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    position: relative;
    cursor: pointer;

    &::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--primary-color);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        display: none;
    }

    &:checked::before {
        display: block;
    }

    &.is_invalid {
        border-color: var(--danger-text-color);

        &::before {
            background-color: var(--danger-text-color);
        }
    }

    &.is_valid {
        border-color: var(--success-color);

        &::before {
            background-color: var(--success-color);
        }
    }
}

input {
    border: 1px solid var(--dryft-text-color);
}

label {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.input_container {
    --padding-y: 8px;
    --padding-x: 12px;
    --input-min-width: 120px;
    --border-width: 1px;

    border-radius: 4px;
    border: var(--border-width) solid var(--form-control-border-color);
    background-color: var(--form-control-bg-color);
    padding: var(--padding-y) var(--padding-x);
    display: flex;
    align-items: center;
    cursor: text;
    height: 52px;
    font-size: 1rem;
    line-height: normal;

    &:has(textarea) {
        height: auto;
    }
    min-width: calc(var(--input-min-width) + var(--padding-x) * 2 + var(--border-width) * 2);

    &:not(:is(
        :has(input:disabled),
        :has(input.is_invalid),
        :has(input.is_valid),

        :has(textarea:disabled),
        :has(textarea.is_invalid),
        :has(textarea.is_valid),

        :has(select:disabled),
        :has(select.is_invalid),
        :has(select.is_valid))
    ) {
        &:hover,
        &:focus-within {
            border: 1px solid var(--form-control-color);
        }
    }

    &:has(.tox-editor-container) {
        padding-top: calc(var(--padding-y) + 25px);

        label {
            top: -33px;
        }
    }

    &:has(select) {
        padding-bottom: 0;
    }

    input::-webkit-calendar-picker-indicator {
        display: none;
    }

    .input_content {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .input_field {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column-reverse;
    }

    input,
    select,
    textarea,
    .naked_input_text {
        width: 100%;
        border: none;
        outline: none;
        font-size: 16px;
        line-height: 1;
        font-weight: 500;
        color: var(--dryft-text-color);
        background: transparent;
        padding: 16px 0 0;
        min-width: var(--input-min-width);
    }

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

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding-right: var(--padding-x);
        padding-left: var(--padding-x);
        margin-left: calc(var(--padding-x) * -1);
        width: calc(100% + var(--padding-x) * 2);
        padding-bottom: var(--padding-y);
        line-height: 1.125;

        option {
            color: var( --dryft-dark-color);
        }
    }

    textarea {
        min-height: 34px;
        height: 140px;
        width: 100%;
        resize: vertical;

        &[rows] {
            height: auto;
        }
    }

    input::placeholder,
    textarea::placeholder {
        color: transparent;
        font-size: 0;
        opacity: 0;
    }

    label {
        all: unset;
        font-size: 16px;
        height: 25px;
        transform: translateY(9px);
        transition: all 0.3s ease;
        color: var(--form-control-placeholder-color);
        position: absolute;
        top: 0;
        background-color: transparent;
        width: 100%;
        pointer-events: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 1;
    }

    input:focus + label,
    textarea:focus + label,
    input:not(:placeholder-shown) + label,
    .naked_input_text + label,
    textarea:not(:placeholder-shown) + label,
    select + label {
        transform: translateY(0);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.44px;
        color: var(--form-control-placeholder-color);
    }

    .input_prefix,
    .input_suffix {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    &:has(
        input:disabled,
        select:disabled,
        textarea:disabled
    ) {
        background-color: transparent;
        color: var(--form-control-placeholder-color);
        cursor: not-allowed;
        opacity: 0.4;

        label {
            background-color: transparent;
        }

        input, select, textarea {
            cursor: not-allowed;
        }
    }

    /* Note that this rule must come before is_invalid for the priority to be correct */
    &:has(
        input.warning,
        textarea.warning,
        select.warning
    ) {
        border-color: var(--warning-color);

        label {
            color: var(--warning-color);
        }
    }

    &:has(
        input.is_invalid,
        textarea.is_invalid,
        select.is_invalid
    ) {
        border-color: var(--danger-text-color);

        label {
            color: var(--danger-text-color);
        }
    }

    &:has(
        input.is_valid,
        select.is_valid,
        textarea.is_valid
    ) {
        border-color: var(--success-color);

        label {
            color: var(--success-color);
        }
    }
}


.small_number .input_container {
    width: 80px;
    min-width: 0;
}

.small_number .input_content {
    min-width: 0;
    width: auto;
}

.small_number .input_field {
    min-width: 0;
}

.small_number input {
    min-width: 0 !important;
    width: 100% !important;
}

.large_number .input_container {
    width: 120px;
    min-width: 0;
}

.large_number .input_content {
    min-width: 0;
    width: auto;
}

.large_number .input_field {
    min-width: 0;
}

.large_number input {
    min-width: 0 !important;
    width: 100% !important;
}

td.small_number {
    width: 120px !important;
}

.department_icon_selector {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: center;
}

.department_icon_trigger {
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--border-radius-small);
    border: 1px solid var(--form-control-border-color);
    background: var(--bg-color);
    display: flex;
    align-items: center;
    gap: var(--tiny-gap);
}

.department_icon_trigger:hover {
    border-color: var(--form-control-color);
}

.department_icon_trigger::after {
    content: "";
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.5;
}

.department_dropdown {
    margin: 0;
    padding: 0;
    inset: unset;
    top: anchor(bottom);
    left: anchor(left);
    margin-top: 2px;
    background: var(--bg-color);
    border: 1px solid var(--form-control-border-color);
    border-radius: var(--border-radius-small);
    box-shadow: 0 4px 12px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
    min-width: 180px;
    max-height: min(600px, 80vh);
    overflow-y: auto;
    position-try-fallbacks: flip-block;
}

.department_dropdown_item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--close-gap);
    padding: var(--close-gap) var(--medium-gap);
    cursor: pointer;
    white-space: nowrap;
    background: transparent;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

.department_dropdown_item:first-child {
    border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
}

.department_dropdown_item:last-child {
    border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
}

.department_dropdown_item:hover {
    background: var(--table-row-hover-color);
}

.department_dropdown_item.selected {
    background: var(--panel-bg-color);
    font-weight: 500;
}

.add_inline_button {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--dryft-text-color);
    margin-top: 1rem;
}

.insight_empty_state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--dryft-subtle-text-color);
}

.insight_empty_state_title {
    margin: 0;
}

.insight_empty_state_text {
    max-width: 32rem;
}

.project_booking_section {
    display: flex;
    flex-direction: column;
    gap: var(--close-gap);
}

.project_booking_switch {
    display: flex;
    align-items: center;
    gap: var(--close-gap);
    cursor: pointer;
    font-weight: 600;
}

.project_booking_verdict {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tiny-gap);
}

.project_booking_blockers {
    margin: 0;
    padding-left: 1.25rem;
}

.project_booking_note {
    color: var(--dryft-subtle-text-color);
}

.project_booking_workers {
    display: flex;
    flex-direction: column;
    gap: var(--tiny-gap);
    padding-top: var(--close-gap);
    border-top: 1px dashed var(--panel-border-color);
}

/* An unknown element, so it lays out inline until told otherwise -- and the select2
   widget it builds inside itself needs the full width to measure against. */
select2-multi {
    display: block;
}

.bulk_project_section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--panel-border-color);
    border-radius: var(--border-radius);
    background: var(--panel-bg-color);
}

.bulk_project_section_title {
    margin: 0;
}

.action_edit_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.action_edit_table td {
    padding: 0 0.5rem;
    vertical-align: bottom;
}

.action_edit_table td:first-child {
    padding-left: 0;
}

.action_edit_table td:last-child {
    padding-right: 0;
}

.action_edit_primary_row {
    vertical-align: bottom;
}

.action_edit_department {
    height: 1px;
}

.action_edit_department .department_icon_selector {
    display: flex;
    height: 100%;
}

.action_edit_department .department_icon_trigger {
    height: 100%;
    background: var(--form-control-bg-color);
}

.action_edit_name {
    width: 100%;
}

.action_edit_menu {
    width: 0;
    white-space: nowrap;
}

.action_edit_menu > * {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
}

.action_edit_menu .input_container.small_number {
    margin-right: var(--close-gap);
    --padding-x: 6px;
    width: 70px;
}

.action_edit_menu .input_container.small_number .label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.action_edit_hours,
.action_edit_margin,
.action_edit_price {
    width: 80px;
}

.action_edit_hours .input_container,
.action_edit_margin .input_container,
.action_edit_price .input_container {
    min-width: 80px;
    --input-min-width: 0;
    width: 100%;
}

.action_edit_hours .input_content,
.action_edit_margin .input_content,
.action_edit_price .input_content,
.action_edit_hours .input_field,
.action_edit_margin .input_field,
.action_edit_price .input_field {
    min-width: 0;
}

.action_edit_hours input,
.action_edit_margin input,
.action_edit_price input {
    min-width: 0;
    width: 100%;
}

.has_breakdown_popover {
    position: relative;
}

/* While hovered, lift the wrapper into its own stacking context above any
   subsequent service/room rows that might otherwise paint on top. */
.has_breakdown_popover:hover,
.has_breakdown_popover:focus-within {
    z-index: 10000;
}

.price_breakdown_popover {
    position: absolute;
    z-index: 10000;
    top: calc(100% + 4px);
    right: 0;
    min-width: 240px;
    padding: 12px 14px;
    background: var(--box-color);
    color: var(--dryft-text-color);
    border: 1px solid var(--dryft-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5));
    font-size: 0.85rem;
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 80ms ease, visibility 80ms ease;
    text-align: left;
    white-space: nowrap;
    font-weight: normal;
}

.has_breakdown_popover:hover > .price_breakdown_popover,
.has_breakdown_popover:focus-within > .price_breakdown_popover {
    opacity: 1;
    visibility: visible;
}

/* The wrappers that carry no control of their own are given tabindex so a tap
   focuses them and opens the popover (see breakdownPopoverFocusable). Suppress the
   focus ring the browser would draw around a whole table cell — the popover
   appearing is the feedback. */
.has_breakdown_popover[tabindex]:focus {
    outline: none;
}

.has_breakdown_popover[tabindex]:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.price_breakdown_section + .price_breakdown_section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--dryft-border-color);
}

.price_breakdown_row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.price_breakdown_row.total {
    font-weight: bold;
}

.price_breakdown_row.deduction {
    opacity: 0.85;
}

.price_breakdown_row.profit_negative .price_breakdown_value {
    color: light-dark(#c0392b, #ff7e6e);
}

.price_breakdown_value {
    font-variant-numeric: tabular-nums;
}

.action_edit_price.has_breakdown_popover .price_breakdown_popover {
    top: calc(100% + 8px);
}

.price_breakdown_section_header {
    font-weight: 700;
    opacity: 0.7;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

/* Multi-status breakdown: one block per status, side by side, each tagged with
   its status color. No scrollbars — the popover sizes to its content. */
.price_breakdown_popover_multi {
    display: flex;
    align-items: stretch;
}

.price_breakdown_status_block {
    min-width: 150px;
}

.price_breakdown_status_block + .price_breakdown_status_block {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid var(--dryft-border-color);
}

/* Three status blocks side by side come to ~460px, which cannot fit a phone at
   any position — the popover was drawn off the edge of the screen whatever it was
   anchored to. Stack them instead, so the width is one block's and it grows
   downward. */
@media (max-width: 767px) {
    .price_breakdown_popover {
        min-width: 0;
        max-width: calc(100vw - 24px);
        pointer-events: auto;
    }

    .price_breakdown_popover_multi {
        flex-direction: column;
    }

    .price_breakdown_status_block + .price_breakdown_status_block {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--dryft-border-color);
    }
}

.price_breakdown_status_header {
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--dryft-border-color);
}

.price_breakdown_status_header.accepted {
    color: var(--status-accepted-bg);
}

.price_breakdown_status_header.published {
    color: var(--status-published-bg);
}

.price_breakdown_status_header.draft {
    color: var(--status-draft-bg);
}

/* The footer banner sits at the bottom of the viewport, so its breakdown
   popover opens upward instead of down. */
.summary_banner_figure.has_breakdown_popover {
    position: relative;
}

.summary_banner_figure.has_breakdown_popover > .price_breakdown_popover {
    top: auto;
    bottom: calc(100% + 8px);
    /* The total figure sits far left, so anchor the popover at the left and let
       it grow rightward instead of overflowing off the left edge. */
    left: 0;
    right: auto;
}

@property --field_saving_angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes field_saving_spin {
    to {
        --field_saving_angle: 360deg;
    }
}

.field_saving {
    position: relative;
}

.input_container.field_saving,
.input_container.field_saving:focus-within,
.input_container.field_saving:hover,
.department_icon_trigger.field_saving,
.department_icon_trigger.field_saving:hover {
    border-color: transparent !important;
}

/* Mark action fields that changed in the current draft/published version so
   it's obvious what the edit touched. Uses !important to stay visible through
   the input_container hover/focus-within border override. */
.input_container.field_changed_draft,
.input_container.field_changed_draft:focus-within,
.input_container.field_changed_draft:hover {
    border-color: var(--status-draft-bg) !important;
}

.input_container.field_changed_published,
.input_container.field_changed_published:focus-within,
.input_container.field_changed_published:hover {
    border-color: var(--status-published-bg) !important;
}

.field_saving::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 7px;
    padding: 1px;
    background: conic-gradient(
        from var(--field_saving_angle),
        var(--primary-color) 0deg,
        var(--primary-color) 60deg,
        color-mix(in srgb, var(--primary-color) 5%, transparent) 200deg,
        color-mix(in srgb, var(--primary-color) 5%, transparent) 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: field_saving_spin 1.1s linear infinite;
    z-index: 2;
}


.action_version_row td {
    vertical-align: baseline;
    padding-top: 0.25rem;
}

.action_version_label_cell {
    text-align: right;
}

.action_version_value {
    text-align: right;
}

.action_menu_container {
    position: relative;
}

.action_menu_trigger {
    padding: var(--close-gap);
    min-width: auto;
    background: transparent;
    border: none;

    &:hover {
        background: var(--table-row-hover-color);
    }
}

.action_menu_dropdown {
    margin: 0;
    padding: 0;
    inset: unset;
    top: anchor(bottom);
    right: anchor(right);
    margin-top: 2px;
    background: var(--bg-color);
    border: 1px solid var(--form-control-border-color);
    border-radius: var(--border-radius-small);
    box-shadow: 0 4px 12px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
    min-width: 180px;
    position-try-fallbacks: flip-block;
}

.action_menu_item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--close-gap);
    padding: var(--close-gap) var(--medium-gap);
    cursor: pointer;
    white-space: nowrap;
    background: transparent;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

.action_menu_item:first-child {
    border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
}

.action_menu_item:last-child {
    border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
}

.action_menu_item:hover {
    background: var(--table-row-hover-color);
}

.action_panel:has(.action_status_header) {
    position: relative;
    padding-left: calc(var(--panel-padding) + 16px);
}

.action_panel:has(.action_status_header.draft) {
    border-right: 3px solid var(--status-draft-bg);
}

.action_panel:has(.action_status_header.published) {
    border-right: 3px solid var(--status-published-bg);
}

.action_status_header {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 8px 2px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0 var(--panel-border-radius) var(--panel-border-radius) 0;
}

.action_status_header.published {
    background-color: var(--status-published-bg);
    color: var(--status-published-text);
}

.action_status_header.draft {
    background-color: var(--status-draft-bg);
    color: var(--status-draft-text);
}

.material_menu_container {
    position: relative;
}

.material_menu_trigger {
    padding: 0 4px !important;
    min-width: auto !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    background: transparent !important;
    border: none !important;
    opacity: 0.5;

    &:hover {
        opacity: 1;
        background: var(--table-row-hover-color);
    }
}

.material_menu_dropdown {
    margin: 0;
    padding: 0;
    inset: unset;
    top: anchor(bottom);
    right: anchor(right);
    margin-top: 2px;
    background: var(--bg-color);
    border: 1px solid var(--form-control-border-color);
    border-radius: var(--border-radius-small);
    box-shadow: 0 4px 12px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
    min-width: 120px;
    position-try-fallbacks: flip-block;
    font-size: 14px;
    line-height: 20px;
}


input,
textarea {
    background-color: transparent;
    color: var(--text-color);
}

.select_container {
    position: relative;

    select {
        width: 100%;
    }

    &:has(.select_prefix) {
        label,
        .select2-selection {
            padding-left: 28px;
        }
    }

    .select2-selection__clear {
        top: -4px;
    }

    &:has(.select2-selection__rendered:empty, .select2-selection__placeholder:empty, .select2-selection--multiple) {
        label {
            font-size: 16px;
            transform: translateY(10px);
        }
    }

    &:has(.select2-selection--multiple .select2-selection__rendered > :nth-child(2)),
    &:has(.select2-selection--multiple .select2-selection__rendered .select2-search__field:not(:placeholder-shown)) {
        label {
            transform: translateY(0);
            font-size: 10px;
        }
    }

    .select2-container--default .select2-selection .select2-selection__rendered {
        padding-left: 12px;
        padding-top: 12px;
        font-size: 16px;
    }

    /* select2 lays its chips out as floats with no vertical padding, which leaves the
       first row sitting on top of the floating label (they overlapped by a pixel), the
       last row against the bottom edge, and the remove cross flush against both the
       chip's edge and its text. A wrapping flex row with headroom for the label fixes
       the first two; centering the chip's own contents fixes the third. */
    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--tiny-gap);
        /* The top padding is what the floating label sits in, so it has to clear the
           label's 8px offset and 13px line box with a little room to spare. Together with
           a 22px chip and the bottom padding this comes to exactly the 52px min-height,
           so a control with chips in it is no taller than an empty one. */
        padding: 24px 12px 4px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        float: none;
        margin: 0;
        padding: 0 8px;
        line-height: 20px;

        /* Replacing select2's own #e4e4e4 on black, which reads as a light chip whichever
           theme the rest of the page is in. The page background is the one surface that
           steps away from the control's in both modes -- the pale and panel variables all
           land back on `--surface-2` in the dark theme, which is what the control already
           is, and the chips would disappear into it. */
        background-color: var(--bg-color);
        border-color: var(--border-subtle);
        color: var(--dryft-text-color);
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        order: 1;
        margin: 0;
        font-size: 16px;
        line-height: 1;
        color: var(--muted-color);

        &:hover {
            color: var(--dryft-text-color);
        }
    }

    /* iommi turns `allowClear` on for every select2, and select2 writes that clear-all in
       as the *first* child of the list and floats it -- which a flex container ignores, so
       it sat at the far left, in front of the chips it clears. Ordered last instead, where
       the search field's growth pushes it against the right edge, the way the single
       select's own clear already sits. */
    .select2-container--default .select2-selection--multiple .select2-selection__clear {
        order: 1;
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 1;
        color: var(--muted-color);

        &:hover {
            color: var(--dryft-text-color);
        }
    }

    /* Both are floated and offset by select2 for the layout we just replaced. The search
       field takes the rest of the line so clicking the empty space still focuses it, and
       so the clear-all after it is pushed to the right edge. */
    .select2-search--inline {
        float: none;
        flex: 1 1 4em;
    }

    .select2-container .select2-search--inline .select2-search__field {
        margin-top: 0;
    }

    label {
        all: unset;
        position: absolute;
        left: 12px;
        top: 8px;
        /* A pixel smaller than it reads elsewhere: the floated label and a row of chips
           have to share the 52px every other control on the page is, and this is what
           buys the chips their headroom. */
        font-size: 10px;
        color: var(--form-control-placeholder-color);
        z-index: 1;
        pointer-events: none;
        background: transparent;
        padding: 0;
        transition: all 0.3s ease;
    }

    .select_prefix {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        overflow: hidden;
        z-index: 1;
    }

    /* Named down to the variant on purpose: select2 hardcodes `background-color: white`
       at `.select2-container--default .select2-selection--multiple`, one class more
       specific than a bare `.select2-selection`, so this rule never applied and the
       control stayed white while the theme's text went light on it. */
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple {
        min-height: 52px;
        border: 1px solid var(--form-control-border-color);
        background-color: var(--form-control-bg-color);
        align-content: center;
    }

    &:has(select:disabled) {
        background-color: var(--bg-color);
        color: var(--form-control-placeholder-color);
        cursor: not-allowed;

       .select2-selection, input {
            cursor: not-allowed;
            background-color: var(--bg-color);
        }

        .select2-container--focus .select2-selection {
            border-color: var(--form-control-border-color);
        }
    }

    &:not(:is(
        :has(select:disabled),
        :has(select.is_invalid),
        :has(select.is_valid)
    )) {
        .select2-selection {
            &:hover,
            &:focus {
                border: 1px solid var(--form-control-color);
                background-color: var(--form-control-bg-color);
            }
        }
    }

    &:has(select.is_valid)  {
        .select2-selection {
            border-color: var(--success-color);
        }

        label {
            color: var(--success-color);
        }
    }

    &:has(select.is_invalid)  {
        .select2-selection {
            border-color: var(--danger-text-color);
        }

        label {
            color: var(--danger-text-color);
        }
    }

    &.select2-container--open {
        .select2-selection {
            border: 1px solid var(--form-control-color);
            background-color: var(--form-control-bg-color);
        }
    }

    .select2-container {
        width: 100% !important;
    }

    .select2-selection__arrow {
        height: 100% !important;
    }

    .select2-dropdown {
        border: 1px solid var(--form-control-color);
        background-color: var(--form-control-bg-color);
    }

    .select2-search--inline .select2-search__field {
        border: none !important;
    }
}

.required label:after {
    content: " *";
    color: red;
}

/* Radio fields: the label sits above the options (dryft/radio_field.html); each option
   is a row of button + text. The option divs carry the field's classes, so the required
   marker must not repeat after every option. */
.radio_options > div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-block: 4px;
}

.required input[type="radio"] + label:after {
    content: none;
}
/* END Inputs */

/* START Navs */
/* Folder tabs: a hairline rail across the strip, and the active tab an outlined box whose
   bottom edge is cut out against the rail so it joins the page below it. The labels are
   14px so that all of the Insikt tabs fit on one line in the content column.

   This is the tab strip. There is no second one: anything that switches between views of
   the same thing wears these classes, whether the tabs are links to other pages or buttons
   that swap what an app is showing. See prospects/storybook/components/tabs.html. */
.nav_tabs {
    display: flex;
    flex-wrap: wrap;
    /* Space between wrapped rows, so a row's tabs do not sit with their tops on the
       rail of the row above. Nothing on a single row. */
    row-gap: 8px;
    padding-left: 0;
    list-style: none;
    margin: 0 0 16px 0;
    border-bottom: 1px solid var(--dryft-border-color);

    .nav_item {
        display: flex;
        white-space: nowrap;

        &:has(.nav_link.disabled) {
            cursor: not-allowed;
        }
    }

    .nav_link {
        display: flex;
        padding: 10px 14px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        /* A tab is a button as often as it is a link -- an in-page strip that swaps what an
           Elm app is showing has nothing to link to -- so the button's own chrome has to be
           taken off before the tab shape below shows through. */
        appearance: none;
        background: none;
        font-family: inherit;
        cursor: pointer;
        text-align: left;
        /* Muted through the color rather than through opacity: opacity would take the
           hover tint and outline down with the label, and the label is supposed to hold
           still while the tab shape reacts. */
        --nav-tab-label-color: color-mix(in srgb, var(--tab-color) 65%, transparent);
        color: var(--nav-tab-label-color);
        text-decoration: none;
        border: 1px solid transparent;

        /* Hold the label: the global `a:not(.without_hover):hover` would otherwise recolor
           it, and the whole point of the hover state here is that only the shape moves. */
        &:hover {
            color: var(--nav-tab-label-color);
        }
        /* Every tab carries its own piece of rail, so a strip narrow enough to wrap gets a
           rail per row instead of one rail under the bottom row only. On a single row it
           lands exactly on the strip's own rail and is invisible. */
        border-bottom-color: var(--dryft-border-color);
        border-radius: 8px 8px 0 0;
        /* Sit on the rail rather than above it, so the active tab can cut it open. */
        margin-bottom: -1px;

        /* Two ways of saying which tab is open, because there are two ways of building a
           strip: clicks that set the class, and a group of radio buttons that carries the
           state itself and needs no script at all. Same shape either way. */
        &.active,
        &:has(> input:checked) {
            color: var(--tab-color);
            font-weight: 600;
            background: var(--bg-color);
            border-color: var(--dryft-border-color);
            border-bottom-color: var(--bg-color);
        }

        /* The radio in a scriptless strip: it holds the state, the label around it is the
           tab, and it has nothing to show for itself. */
        & > input[type="radio"] {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        &:has(> input:focus-visible) {
            outline: 2px solid var(--link-color);
            outline-offset: 2px;
        }

        /* Nothing to be gained from following a link to the page you are already on. A
           button strip keeps its clicks: some of them let you press the open tab again to
           close it back down to a choice. */
        a&.active {
            pointer-events: none;
        }

        &:not(.active):not(:has(> input:checked)) {
            /* Hovering previews the shape the tab takes when it becomes active: the panel
               tint behind it, and its own outline at a fraction of the strength. The rail
               stays put, since the tab has not been opened yet, and the label keeps the
               muted color it has when idle so that only the shape moves. */
            &:hover {
                background: var(--panel-bg-color);
                border-color: color-mix(in srgb, var(--dryft-border-color) 35%, transparent);
                border-bottom-color: var(--dryft-border-color);
            }
        }

        &.disabled {
            /* Dimmed as a whole, from full strength, so it lands where it did before the
               label color took over from opacity. */
            color: var(--tab-color);
            opacity: 0.4;
            pointer-events: none;
        }
    }

    /* On a phone the tabs don't fit on one line, and letting them wrap turns the strip into
       a block that eats a third of the screen. There the strip becomes a popover instead:
       the current tab is a button, and tapping it lists every tab. The script in the tab
       strip template is what turns the list into a popover, so with no script the plain
       wrapping strip is what is left. */
    &[popover]:not(:popover-open) {
        /* `display: flex` above beats the browser's own rule for hiding a closed popover. */
        display: none;
    }

    &[popover] {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        margin: var(--close-gap) 0 0 0;
        min-width: 60vw;
        /* Line the list up with the button it hangs off, where the browser can measure it. */
        min-width: anchor-size(width);
        max-width: calc(100vw - 30px);
        max-height: 70vh;
        overflow-y: auto;
        background: var(--panel-bg-color);
        border: 1px solid var(--dryft-border-color);
        border-radius: 8px;
        box-shadow: 0 4px 14px var(--shadow-color);
        position: fixed;
        position-area: block-end span-inline-end;
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

        .nav_item {
            display: block;
        }

        .nav_link {
            /* A row in a list, not a folder tab: the cut-out edge and the rounded top
               corners have no rail to sit on here. */
            width: 100%;
            padding: 14px 16px;
            font-size: 16px;
            line-height: 24px;
            margin-bottom: 0;
            border: none;
            border-radius: 0;

            &.active {
                background: var(--tab-color);
                /* --panel-bg-color is light in light mode and dark in dark mode, which is
                   exactly the inverse of --tab-color. */
                color: var(--panel-bg-color);
            }
        }
    }

    &[popover]::backdrop {
        background: rgba(0, 0, 0, 0.2);
    }

    /* The flat variant, for a page-background-colored surface that needs the tabs to read
       as part of the chrome rather than as tabs of their own. */
    &.alternative {
        gap: 0;
        background: var(--dryft-dark-color);
        border-bottom: none;
        margin: 0;
        padding: 0 8px;

        .nav_link {
            color: color-mix(in srgb, var(--dryft-text-color-dark-background) 65%, transparent);
            border: none;
            border-radius: 0;
            margin-bottom: 0;

            &:hover {
                background: transparent;
            }

            &.active {
                color: var(--dryft-text-color-dark-background);
                background: transparent;
                border-bottom: 4px solid var(--dryft-text-color-dark-background);
            }
        }
    }
}

/* The phone-sized form of the strip: the current tab as a control, with the tab list
   hanging off it as a popover. */
.nav_tabs_picker_button {
    display: none;
    align-items: stretch;
    width: 100%;
    margin: 0 0 16px 0;
    padding: 0;
    background: var(--panel-bg-color);
    border: 1px solid var(--dryft-border-color);
    border-radius: 8px;
    overflow: hidden;
    color: var(--tab-color);
    text-align: left;

    .nav_tabs_picker_current {
        flex: 1;
        padding: 12px 16px;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
    }

    .fa {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        border-left: 1px solid var(--dryft-border-color);
        transition: transform 0.15s;
    }

    /* Point the chevron at the open list. */
    &:has(+ .nav_tabs:popover-open) .fa {
        transform: rotate(180deg);
    }
}

/* `data-picker` is set by the script in the tab strip template, so the button only ever
   shows when there is a popover behind it to open. */
@media screen and (max-width: 767px) {
    .nav_tabs_picker_button[data-picker] {
        display: flex;
    }
}
/* END Navs */

/* START Table */
/* iommi's error overlay over a table whose ajax reload timed out or failed */
.iommi_table_error_shown > .iommi_table_error {
    background: color-mix(in srgb, var(--bg-color) 85%, transparent);
    color: var(--danger-text-color);
    font-weight: 600;

    .iommi_table_error_retry {
        all: unset;
        box-sizing: border-box;
        cursor: pointer;
        border: 1px solid var(--danger-text-color);
        border-radius: 8px;
        padding: 6px 12px;
        font-weight: 500;
        line-height: 1.5;
        color: var(--danger-text-color);

        &:hover, &:focus {
            background-color: var(--danger-color);
            color: var(--danger-contrast-color);
        }
    }
}

/* A table keeps its old rows on screen while iommi reloads them over ajax, so the
   heavier reports (economics, for one) look frozen after a filter or sort. `table_loading`
   is set by custom.js for as long as a reload is in flight. The keyframes start and end on
   the resting border, so a fast reload only dips gently instead of flashing. */
.iommi-table-container.table_loading:has(.table) {
    animation: table_loading_pulse 1.4s ease-in-out infinite;
}

@keyframes table_loading_pulse {
    0%, 100% {
        border-color: var(--table-border);
        box-shadow: 0 0 0 0 transparent;
    }
    50% {
        border-color: var(--link-color);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--link-color) 18%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .iommi-table-container.table_loading:has(.table) {
        animation: none;
        border-color: var(--link-color);
    }
}

.table_container:has(.table), .iommi-table-container:has(.table) {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--table-border);

    display: inline-table;
    overflow: initial;
    width: 100%;

    nav {
        position: sticky;
        left: 0;
        margin-top: 10px;
    }
}

/* On mobile, let the table go edge-to-edge instead of stacking page (.container) padding
   on top of the table container's own padding/border. The container breaks out of the
   page padding (width:calc is needed because a negative margin alone only shifts a
   width:100% element, it doesn't widen it); the .table fills it, and cell padding
   (8px 12px) keeps content readable, so every row — including expanded detail rows —
   spans the full width. */
@media screen and (max-width: 767px) {
    .table_container:has(.table), .iommi-table-container:has(.table) {
        width: calc(100% + 30px);
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 0;
        padding-right: 0;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
}

.iommi-table-plus-paginator {
    width: 100%;
}

.table_row_border_none {
    border: none !important;
    background-image: none !important;
}

table, .table {
    margin: 0;
    position: relative;
    border-collapse: collapse;
    width: 100%;

    &:not(.static_head) th {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: var(--bg-color);
    }

    .panel &:not(.static_head) th {
        background-color: transparent;
    }

    &.dashed_border {
        tbody tr {
            background-image: repeating-linear-gradient(
                    to right,
                    var(--muted-color),
                    var(--muted-color) 5px,
                    transparent 5px,
                    transparent 8px
            );
            background-position: bottom;
            background-size: 100% 1px;
            background-repeat: repeat-x;

            &:last-child {
                background-image: none;
            }
        }
    }

}

.table {
    &:not(.dashed_border) {
        tbody tr {
            border-bottom: 1px solid var(--table-border);

            &:last-child {
                border-bottom: none;
            }
        }
    }

    &:not(.not_hover) {
        tbody tr {
            &:hover {
                td {
                    background-color: #0000000B;
                }
            }
        }
    }

    td,
    th {
        border-top: none;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 20px;
    }

    tr.active {
        td, th {
            font-weight: 700;
        }
    }

    td a {
        white-space: nowrap;
    }

    th {
        border-bottom: none;
        font-weight: 500;
        color: var(--muted-color);
        white-space: nowrap;

        & * {
            text-decoration: none;
            cursor: default;
        }

        & {
            color: var(--muted-color);
        }

        &[class*="sort_header"] {
            & * {
                text-decoration: underline;
                color: var(--dryft-text-color);
                font-weight: 500;
                cursor: pointer;

                &:hover {
                    color: var(--table-sort-hover);
                }
            }
        }

        &.sorted {
            & * {
                font-weight: 700;

                &:after {
                    content: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 7.5L5 2.5L10 7.5H0Z' fill='%231A353B'/%3E%3C/svg%3E%0A");
                    vertical-align: middle;
                    margin-left: 4px;
                    display: inline-block;
                }

                &:hover {
                    &:after {
                        content: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 7.5L5 2.5L10 7.5H0Z' fill='%23046A8C'/%3E%3C/svg%3E%0A");
                    }
                }
            }

            &.descending {
                & * {
                    &:after {
                        transform: rotate(180deg);
                    }
                }
            }
        }
    }
}
@media (prefers-color-scheme: dark) {
    table, .table {
        thead th {
            &.sorted {
                & * {
                    &:after {
                        content: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 7.5L5 2.5L10 7.5H0Z' fill='%23fff'/%3E%3C/svg%3E%0A");
                    }
                }
            }
        }
    }
}
/* END Table */

/* START Pagination */
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
}

.page_item.active .page_link {
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    color: var(--primary-contrast-color);
}

.page_item .page_link {
    border: 1px solid var(--table-border);
    color: var(--link-color);
    font-weight: 500;
    font-size: 14px;
    box-shadow: none;
    z-index: 3;
    margin-left: 0;
    line-height: 1.25;
    position: relative;
    display: block;
    padding: .5rem .75rem;
    text-decoration: underline;

    &:hover {
        text-decoration: none;
    }
}

.page_item:first-of-type .page_link {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.page_item:last-of-type .page_link {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.page_item:not(:last-of-type) .page_link {
    border-right-width: 0;
}

.page_item:not(.active) .page_link:hover {
    border-color: var(--table-border);
    background-color: var(--table-border);
}

.page_item {
    background-color: var(--bg-color);
}
/* END Pagination */

/* START Buttons */
.btn:not([class*="outline"]) {
    & {
        color: var(--button-color);
        background-color: var(--button-bg);
        border-color: var(--button-bg);

        &:not(:disabled):not(.disabled):hover {
            background-color: color-mix(in srgb, var(--button-bg) var(--button-hover-bg-opacity, 90%), transparent);
            border-color: color-mix(in srgb, var(--button-bg) var(--button-hover-bg-opacity, 90%), transparent);
            color: color-mix(in srgb, var(--button-color) 80%, transparent);
        }

        &:not(:disabled):not(.disabled) {
            &:active, &:focus, &.active {
                background-color: var(--button-bg);
                border-color: var(--button-bg);
                color: var(--button-color);
                outline: 3px solid color-mix(in srgb, var(--button-bg) 55%, transparent);
                outline-offset: 2px;
            }
        }
    }
}

.btn[class*="outline"] {
    & {
        border-radius: 8px;
        color: var(--button-color);
        border-color: var(--button-color);

        &:not(:disabled):not(.disabled):hover {
            background-color: var(--button-color);
            border-color: var(--button-color);
            color: color-mix(in srgb, var(--button-hover-color) 80%, transparent);
        }

        &:not(:disabled):not(.disabled) {
            &:active, &:focus, &.active {
                background-color: var(--button-color);
                border-color: var(--button-color);
                color: var(--button-hover-color);
                outline: 3px solid color-mix(in srgb, var(--button-color) 55%, transparent);
                outline-offset: 2px;
            }
        }
    }
}

.btn {
    all: unset;
    box-sizing: border-box;
    text-decoration: none;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    font-weight: 500;
    font-size: 1rem;
    padding: 6px 12px;
    cursor: pointer;
    line-height: 1.5;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;

    &:disabled, &.disabled {
        cursor: not-allowed;
        opacity: 1;

        &:not([class*="secondary"]):not([class*="ghost"]) {
            background-color: var(--btn-disabled-bg);
            border-color: var(--btn-disabled-bg);
            color: var(--btn-disabled-color);
        }
    }
}

.btn_lg {
    padding: 9px 20px;
    font-size: 1rem;
}

/*
 * The small button -- a control that sits in a row, a table cell or a toolbar
 * rather than at the bottom of a page. 28px tall: the line box is 18px and the
 * padding 4px, which is exactly the box `.btn_add` makes around its disc, so an
 * add button and the buttons beside it sit on the same line without anyone
 * nudging one of them.
 */
.btn_small {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 18px;
}

.btn_primary {
    --button-color: var(--primary-contrast-color);
    --button-bg: var(--primary-color);
}

.btn_tertiary {
    --button-hover-bg-opacity: 80%;
    --button-color: var(--tertiary-contrast-color);
    --button-bg: var(--tertiary-color);
}

.btn_success {
    --button-color: var(--success-contrast-color);
    --button-bg: var(--success-color);
}

.btn_publish {
    --button-color: var(--status-published-text);
    --button-bg: var(--status-published-bg);
}

.btn_accept {
    --button-color: var(--success-contrast-color);
    --button-bg: var(--success-color);
}

.btn_warning {
    --button-color: var(--warning-contrast-color);
    --button-bg: var(--warning-color);
}

.btn_danger {
    --button-color: var(--danger-contrast-color);
    --button-bg: var(--danger-color);
}

.btn_outline_primary {
    --button-color: var(--primary-color);
    --button-hover-color: var(--primary-contrast-color);
}

.btn_outline_tertiary {
    --button-color: var(--tertiary-color);
    --button-hover-color: var(--tertiary-contrast-color);
}

.btn_outline_success {
    --button-color: var(--success-color);
    --button-hover-color: var(--success-contrast-color);
}

.btn_outline_warning {
    --button-color: var(--warning-color);
    --button-hover-color: var(--warning-contrast-color);
}

.btn_outline_danger {
    --button-color: var(--danger-text-color);
    --button-hover-color: var(--danger-contrast-color);
}

.btn_transparent,
.btn_transparent:hover {
    background-color: transparent;
    color: var(--dryft-light-fill-color);
    border-color: transparent !important;
}

/* The button naming the section the worker bar is currently in: it sits among the bar's
   icon buttons and only takes on a shape when pointed at. */
.btn_bar_current {
    border-radius: var(--border-radius-small) !important;
    border: 2px solid transparent;
    border-color: transparent;
    background-color: transparent;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    &:hover {
        border-radius: var(--border-radius);
        border: 2px solid var(--border-strong);
        background-color: var(--muted-light-color);
        color: var(--dryft-text-color);
        text-decoration: none !important;
        vertical-align: center;
    }
}

.btn_secondary, .btn_outline_secondary,
.btn_ghost, .btn_outline_ghost {
    border: 1px solid var(--btn-text-light);
    background-color: transparent;
    color: var(--btn-text-light);

    &:not(:disabled):not(.disabled):hover {
        border: 1px solid rgba(from var(--btn-text-light) r g b / 0.80);
        background-color: rgba(from var(--btn-text-light) r g b / 0.05);
        color: rgba(from var(--btn-text-light) r g b / 0.80);
    }

    &:not(:disabled):not(.disabled) {
        &:active, &:focus, &.active {
            border: 1px solid var(--btn-text-light);
            background-color: rgba(from var(--btn-text-light) r g b / 0.10);
            color: var(--btn-text-light);
            outline: 3px solid rgba(from var(--btn-text-light) r g b / 0.35);
            outline-offset: 2px;
        }
    }

    &:disabled, &.disabled {
        background-color: transparent;
        border-color: var(--btn-disabled-border);
        color: rgba(from var(--btn-text-light) r g b / 0.40);
    }
}

.btn_cta, .btn_outline_cta {
    border: 1px solid var(--btn-cta-bg);
    background-color: var(--btn-cta-bg);
    color: var(--btn-cta-text);

    &:not(:disabled):not(.disabled):hover {
        border: 1px solid var(--btn-cta-hover-bg);
        background-color: var(--btn-cta-hover-bg);
        color: rgba(from var(--btn-cta-hover-text) r g b / 0.80);
    }

    &:not(:disabled):not(.disabled) {
        &:active, &:focus, &.active {
            border: 1px solid var(--btn-cta-bg);
            background-color: var(--btn-cta-bg);
            color: var(--btn-cta-text);
            outline: 3px solid color-mix(in srgb, var(--btn-cta-bg) 65%, transparent);
            outline-offset: 2px;
        }
    }
}

.btn_ghost, .btn_outline_ghost {
    border: 1px solid transparent !important;
}

/*
 * Two names for two things. `.btn_icon` is a button that carries an icon, and it
 * may carry a label beside it; `.btn_icon_only` is an icon on its own, and never
 * has a label -- what it does is in its `title`.
 *
 * Which is why only one of them has a border. A labelled button needs its outline
 * to read as pressable, but a lone pencil already reads as one, and a box drawn
 * around every pencil in a dense table is noise rather than an invitation.
 */
.btn_icon, .btn_icon_only {
    padding: 4px;
    border-radius: 4px !important;
    width: 32px;
    height: 32px;

    i {
        color: currentColor !important;
    }
}

/*
 * Written as `.btn.btn_icon_only` for the same reason `.btn.btn_add` is: the
 * `.btn:not([class*="outline"])` rules paint color, background and border-color
 * from --button-bg/--button-color, and at one class plus one :not() they outweigh
 * a lone variant class.
 */
.btn.btn_icon_only {
    border-color: transparent;
    background-color: transparent;
    color: var(--dryft-text-color);
}

.btn.btn_icon_only:not(:disabled):not(.disabled):hover {
    border-color: transparent;
    background-color: var(--btn-hover-bg);
    color: var(--dryft-text-color);
}

.btn.btn_icon_only:not(:disabled):not(.disabled):active,
.btn.btn_icon_only:not(:disabled):not(.disabled):focus,
.btn.btn_icon_only:not(:disabled):not(.disabled).active {
    border-color: transparent;
    background-color: var(--btn-hover-bg);
    color: var(--dryft-text-color);
    outline: 3px solid color-mix(in srgb, var(--primary-color) 45%, transparent);
    outline-offset: 2px;
}

/*
 * A segmented control: a handful of mutually exclusive choices, all shown at
 * once because the alternatives are the point. A pill track with the chosen
 * segment filled. Not .nav_tabs -- tabs change what you are looking at, this
 * changes what a thing is, or how one view of it is arranged.
 */
.segmented {
    display: inline-flex;
    align-self: flex-start;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--dryft-border-color);
    border-radius: var(--pill-radius);
    background: var(--box-level-2-color);
}

.segmented_option {
    padding: 5px 14px;
    border: 0;
    border-radius: var(--pill-radius);
    background: none;
    color: var(--dryft-subtle-text-color);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.segmented_option_on {
    background: var(--primary-color);
    color: var(--primary-contrast-color);
    font-weight: 600;
}

/*
 * The button that adds a row, a card, an item -- anything that is not there yet.
 * Dashed, because that is the convention for an outline drawn around an absence:
 * it reads as a slot to fill rather than as one more action competing with Save
 * and Cancel. Fully rounded, since it sits next to the thing it adds to rather
 * than in a row of actions. Filling in on hover is the whole gesture: the dashes
 * close up.
 *
 * Written as `.btn.btn_add` rather than `.btn_add`: the base
 * `.btn:not([class*="outline"])` rules paint color, background and border-color
 * from --button-bg/--button-color, and at one class plus one :not() they
 * outweigh a lone variant class. Every filled variant in here sets those two
 * custom properties instead, but this one cannot -- it is transparent at rest
 * and filled only on hover, which is two values for one property.
 */
.btn.btn_add {
    border: 1px dashed var(--border-strong);
    border-radius: var(--pill-radius);
    background-color: transparent;
    color: var(--dryft-text-color);
}

/* Carrying a disc, the left padding pulls in so the circle sits against the dashed
   border instead of floating inside it. */
.btn.btn_add:has(.btn_add_icon) {
    padding-left: 6px;
}

.btn.btn_add:not(:disabled):not(.disabled):hover {
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    color: var(--primary-contrast-color);
}

/*
 * The disc the add button carries its plus in. Sand at rest, so it reads as a slot
 * waiting to be filled rather than as an icon sitting next to a label; once the
 * button fills on hover the disc goes translucent against it and keeps its shape.
 */
.btn_add_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--btn-add-icon-size, 18px);
    height: var(--btn-add-icon-size, 18px);
    border-radius: 50%;
    background: var(--pale-color);
    color: var(--dryft-text-color);
}

.btn.btn_add:not(:disabled):not(.disabled):hover .btn_add_icon {
    background: rgba(255, 255, 255, 0.20);
    color: var(--primary-contrast-color);
}

.btn.btn_add:not(:disabled):not(.disabled):active,
.btn.btn_add:not(:disabled):not(.disabled):focus,
.btn.btn_add:not(:disabled):not(.disabled).active {
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    color: var(--primary-contrast-color);
    outline: 3px solid color-mix(in srgb, var(--primary-color) 45%, transparent);
    outline-offset: 2px;
}

.btn_secondary, .btn_outline_secondary,
.btn_ghost, .btn_outline_ghost {
    &:not(:disabled):not(.disabled):hover {
        background-color: var(--btn-hover-bg);
    }

    &:not(:disabled):not(.disabled) {
        &:active, &:focus, &.active {
            border: 1px solid var(--btn-text-light);
            background-color: var(--btn-hover-bg);
            color: var(--btn-text-light);
            outline: 3px solid rgba(from var(--btn-text-light) r g b / 0.35);
            outline-offset: 2px;
        }
    }
}

@media (prefers-color-scheme: dark) {
    .btn_bar_current {
        border-color: transparent;
        color: var(--dryft-text-color) !important;
    }
}
/* END Buttons */

/* START Typography */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    margin-bottom: .5rem;
    font-weight: 700;
}

.font_normal {
    font-weight: 400 !important;
}

.font_medium {
    font-weight: 500 !important;
}

.font_semibold {
    font-weight: 600 !important;
}

.font_bold, .bold, b {
    font-weight: 700 !important;
}

h1, .h1, .page_title {
    font-size: 28px;
    line-height: 32px;
}

h2, .h2, .section_title {
    font-size: 20px;
    line-height: 28px;
}

h3, .h3, .subtitle {
    font-size: 16px;
    line-height: 24px;
}

h4, .h4, .big_text {
    font-size: 15px;
    line-height: 22px;
}

h5, .h5, .medium_text {
    font-size: 14px;
    line-height: 20px;
}

.medium_small_text {
    font-size: 13px !important;
    line-height: 18px;
}

h6, .h6, .small_text {
    font-size: 11px;
    line-height: 16px;
}

a, .big_link,
.medium_link,
.small_link {
    text-decoration: underline;
    color: var(--link-color);
    cursor: pointer;
}

a:not(.without_hover):hover {
    color: rgba(from var(--link-color) r g b / 0.70);
}

.big_link {
    font-size: 15px;
    line-height: 22px;
}

.medium_link {
    font-size: 14px;
    line-height: 20px;
}

.small_link {
    font-size: 11px;
    line-height: 16px;
}

.placeholder,
input::placeholder,
textarea::placeholder {
    font-size: 16px;
}

.label {
    font-size: 11px;
}

/*
 * Text that is there to be read second: a field's label, a row's metadata, the
 * unit beside a figure. .text_muted fades whatever colour it lands on with
 * opacity, which dims a red warning into a pink one; this names the colour
 * instead, so it stays the same shade of quiet everywhere and in both themes.
 */
.text_subtle {
    color: var(--dryft-subtle-text-color);
}
/* END Typography */

/* START Spacing */
.mt_auto { margin-top: auto !important; }
.mb_auto { margin-bottom: auto !important; }
.ml_auto { margin-left: auto !important; }
.mr_auto { margin-right: auto !important; }

.mt_none { margin-top: 0 !important; }
.mb_none { margin-bottom: 0 !important; }
.ml_none { margin-left: 0 !important; }
.mr_none { margin-right: 0 !important; }

.pt_none { padding-top: 0 !important; }
.pb_none { padding-bottom: 0 !important; }
.pl_none { padding-left: 0 !important; }
.pr_none { padding-right: 0 !important; }

.mt_tiny { margin-top: var(--tiny-gap) !important; }
.mb_tiny { margin-bottom: var(--tiny-gap) !important; }
.ml_tiny { margin-left: var(--tiny-gap) !important; }
.mr_tiny { margin-right: var(--tiny-gap) !important; }

.mt_close { margin-top: var(--close-gap) !important; }
.mb_close { margin-bottom: var(--close-gap) !important; }
.ml_close { margin-left: var(--close-gap) !important; }
.mr_close { margin-right: var(--close-gap) !important; }

.mt_medium { margin-top: var(--medium-gap) !important; }
.mb_medium { margin-bottom: var(--medium-gap) !important; }
.ml_medium { margin-left: var(--medium-gap) !important; }
.mr_medium { margin-right: var(--medium-gap) !important; }

.mt_large { margin-top: var(--large-gap) !important; }
.mb_large { margin-bottom: var(--large-gap) !important; }
.ml_large { margin-left: var(--large-gap) !important; }
.mr_large { margin-right: var(--large-gap) !important; }

.pt_tiny { padding-top: var(--tiny-gap) !important; }
.pb_tiny { padding-bottom: var(--tiny-gap) !important; }
.pl_tiny { padding-left: var(--tiny-gap) !important; }
.pr_tiny { padding-right: var(--tiny-gap) !important; }

.pt_close { padding-top: var(--close-gap) !important; }
.pb_close { padding-bottom: var(--close-gap) !important; }
.pl_close { padding-left: var(--close-gap) !important; }
.pr_close { padding-right: var(--close-gap) !important; }

.pt_medium { padding-top: var(--medium-gap) !important; }
.pb_medium { padding-bottom: var(--medium-gap) !important; }
.pl_medium { padding-left: var(--medium-gap) !important; }
.pr_medium { padding-right: var(--medium-gap) !important; }

.pt_large { padding-top: var(--large-gap) !important; }
.pb_large { padding-bottom: var(--large-gap) !important; }
.pl_large { padding-left: var(--large-gap) !important; }
.pr_large { padding-right: var(--large-gap) !important; }
/* END Spacing */

/* START Container */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
/* END Container */

/* START Notify */
#notify-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    overflow: auto;
    scrollbar-width: none;
    max-height: 95vh;

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

.notify {
    padding: 12px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    min-width: 250px;
    max-width: 400px;
    pointer-events: auto;
    animation: slideIn 0.3s ease-out;
}

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

.notify.error {
    background-color: var(--danger-color);
    color: var(--danger-contrast-color);
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* END Notify */

/* START Background */
/* Dynamically generated class names */
.bg-vvs             { background-color: var(--vvs-color)            !important; }
.bg-el              { background-color: var(--el-color)             !important; }
.bg-plattsättning   { background-color: var(--plattsättning-color)  !important; }
.bg-måleri          { background-color: var(--måleri-color)         !important; }
.bg-projektledning  { background-color: var(--projektledning-color) !important; }
.bg-bygg            { background-color: var(--bygg-color)           !important; }
.bg-finsnickeri     { background-color: var(--finsnickeri-color)           !important; }

.bg-vvs-light             { background-color: var(--vvs-color-light)             !important; }
.bg-el-light              { background-color: var(--el-color-light)              !important; }
.bg-plattsättning-light   { background-color: var(--plattsättning-color-light)   !important; }
.bg-måleri-light          { background-color: var(--måleri-color-light)          !important; }
.bg-projektledning-light  { background-color: var( --projektledning-color-light) !important; }
.bg-bygg-light            { background-color: var(--bygg-color-light)            !important; }
.bg-finsnickeri-light     { background-color: var(--finsnickeri-color-light)     !important; }

.bg-striped-bygg {background: repeating-linear-gradient(45deg, var(--bg-color), var(--bg-color) 13px, var(--bygg-color) 13px, var(--bygg-color) 15px) fixed;}

.bg-striped-vvs             { background: repeating-linear-gradient(45deg, var(--bg-color), var(--bg-color) 13px, var(--vvs-color-light)              13px, var(--vvs-color-light)              14px) fixed !important; }
.bg-striped-el              { background: repeating-linear-gradient(45deg, var(--bg-color), var(--bg-color) 13px, var(--el-color-light)               13px, var(--el-color-light)               14px) fixed !important; }
.bg-striped-plattsättning   { background: repeating-linear-gradient(45deg, var(--bg-color), var(--bg-color) 13px, var(--plattsättning-color-light)    13px, var(--plattsättning-color-light)    14px) fixed !important; }
.bg-striped-måleri          { background: repeating-linear-gradient(45deg, var(--bg-color), var(--bg-color) 13px, var(--måleri-color-light)           13px, var(--måleri-color-light)           14px) fixed !important; }
.bg-striped-projektledning  { background: repeating-linear-gradient(45deg, var(--bg-color), var(--bg-color) 13px, var( --projektledning-color-light)            13px, var( --projektledning-color-light)            14px) fixed !important; }
.bg-striped-bygg            { background: repeating-linear-gradient(45deg, var(--bg-color), var(--bg-color) 13px, var(--bygg-color-light)             13px, var(--bygg-color-light)             14px) fixed !important; }

.bg-primary,
.bg-brand {
    background: var(--dryft-dark-color) !important;
    color: white !important;
}

.bg_success input {
    background-color: var(--success-color) !important;
}

.bg_attention,
.bg_attention * {
    background-color: var(--warning-color) !important;
    color: var(--warning-contrast-color) !important;
}

.bg_success input,
input.bg_success {
    background-color: var(--success-color) !important;
}

.bg_success {color: var(--success-contrast-color) !important; background-color: var(--success-color) !important;}
.bg_warn {color: var(--warning-contrast-color) !important; background-color: var(--warning-color) !important;}
.bg_error {color: var(--danger-contrast-color) !important; background-color: var(--danger-color) !important;}
/* Dynamically generated class names */

.bg_warning input,
input.bg_warning {
    background-color: var(--warning-color) !important;
}

.bg_warning,
.bg_warning_full {
    background-color: var(--warning-color);
    color: var(--warning-contrast-color);

    &.bg_warning_full {
        color: var(--warning-contrast-color);
    }
}

.bg_danger input,
input.bg_danger {
    background-color: var(--danger-color) !important;
}

.bg_danger,
.bg_danger_full {
    background-color: var(--danger-color);

    &.bg_danger_full {
        color: var(--danger-contrast-color);
    }
}

.bg_muted_light,
.bg_muted_light_full {
    background-color: var(--muted-light-color);

    &.bg_muted_light_full {
        color: var(--muted-light-contrast-color);
    }
}
/* END Background */

/* START Texts */
.numeric,
.numeric input {
    text-align: right;
    white-space: nowrap;
    font-family: Poppins, sans-serif;
}

.table .numeric, .numeric-tabular {
    font-variant-numeric: tabular-nums;
}

th.numeric {
    font-family: unset;
}

.date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-family: Poppins, sans-serif;
}

.text_danger {
    color: var(--danger-text-color) !important;

    a {
        color: #dc3545!important;
    }
}

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

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

.text_muted {
    opacity: 0.5;
}

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

.text_left {
    text-align: left;
}

.text_right {
    text-align: right;
}

.text_center {
    text-align: center;
}

.pre_wrap {
    white-space: pre-wrap;
}

.nowrap {
    white-space: nowrap;
}

.strikethrough {
    text-decoration: line-through;
}

.no_decoration {
    text-decoration: none;
}

.no_select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
/* END Texts */

/* START Additional */
.pie_chart_circle {
    stroke-dasharray: 31.42;
    transition: stroke-dashoffset 0.5s ease-out;
    stroke-dashoffset: calc(31.42 - (var(--percentage, 0) * 0.3142));
}

.border_none {
    border: none !important;
}

.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.hidden {
    display: none !important;
}

.internal_freetext {
    border: 1px dashed var(--dryft-text-color);
    padding: 0 0.2rem;
    white-space: pre-wrap;
}

.internal_freetext::before {
    content: "internt";
    float: right;
    background: var(--dryft-text-color);
    color: var(--bg-color);
    font-size: 70%;
    position: relative;
    right: -0.2rem;
    padding: 0 0.1rem;
}

.copy_field {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--panel-border-color);
    align-items: center;
    background-color: var(--panel-bg-color);
    font-size: 14px;
    line-height: 24px;

    .name {
        flex: 1;
    }

    .copy_icon {
        cursor: pointer;

        &:hover {
            color: var(--success-color);
        }
    }
}

.pointer {
    cursor: pointer;
}

.ellipsis {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.ellipsis_column_max_width {
      max-width: 150px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
}

.section_box {
    border: 1px solid var(--table-border);
    border-radius: 16px;
    padding: 16px;
}

.option_item {
    font-weight: 500;
    padding: 6px 8px;
    cursor: pointer;

    &:hover {
        background-color:#E1F3F0;
    }
}

.avatar {
    --size: 25px;
    --font-size: 12px;

    height: var(--size);
    width: var(--size);
    border-radius: 100%;
    flex-shrink: 0;
    object-fit: cover;

    &:not(img) {
        background-color: var(--primary-color);
        color: var(--primary-contrast-color);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size);
        font-weight: 600;
    }
}

.avatar_lg {
    --size: 64px;
    --font-size: 26px;
}

.avatar_square {
    border-radius: 4px;
}

/* TODO: I couldn’t find the page where these blocks can be seen. */
/* .avatar.done {
    box-shadow: 0 0 0 2px #28a745, 0 0 0 4px black;
}

.avatar.in_progress {
    box-shadow: 0 0 0 2px #ffc107, 0 0 0 4px black;
}

.avatar.flagged {
    box-shadow: 0 0 0 2px #dc3545, 0 0 0 4px black;
}

.avatar {
    border-radius: 100%;
    height: 25px;
    margin-bottom: 4px;
}

.marker .avatar {
    box-shadow: 0 0 0 2px black;
}

.avatar-simple-with-name {
    white-space: nowrap;
}

.avatars {
    float: right;
    display: flex;
}

.avatar-wrapper {
    min-width: 0;
    max-width: 21px;
}

@media screen and (max-width: 767px) {
    .compact-names .avatar-name {
        display: none;
    }
}

@media (prefers-color-scheme: dark) {
    .avatar {
        box-shadow: 0 0 0 2px black;
    }
} */
/* End Additional */
/* END The things that are used 100% in the new design. */

/* Other */
.dev nav.navbar,
.dev .navbar-toggler {
    background-color: #459658 !important;
}

.test nav.navbar,
.test .navbar-toggler {
    background-color: #245d31 !important;
}

.page-link {
    color: var(--link-color);
    text-decoration: underline;
    text-underline-offset: 0.1rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--link-color) !important;
}

.fg-vvs             { color: var(--vvs-color)            !important; }
.fg-el              { color: var(--el-color)             !important; }
.fg-plattsättning   { color: var(--plattsättning-color)  !important; }
.fg-måleri          { color: var(--måleri-color)         !important; }
.fg-projektledning  { color: var(--projektledning-color) !important; }
.fg-bygg            { color: var(--bygg-color)           !important; }
.fg-finsnickeri     { color: var(--finsnickeri-color)    !important; }

.mark-vvs               { border-left: 5px solid var(--vvs-color)             !important; }
.mark-el                { border-left: 5px solid var(--el-color)              !important; }
.mark-plattsättning     { border-left: 5px solid var(--plattsättning-color)   !important; }
.mark-måleri            { border-left: 5px solid var(--måleri-color)          !important; }
.mark-projektledning    { border-left: 5px solid var( --projektledning-color) !important; }
.mark-bygg              { border-left: 5px solid var(--bygg-color)            !important; }
.mark-finsnickeri       { border-left: 5px solid var(--finsnickeri-color)     !important; }

.mark-both-vvs              { border-left: 5px solid var(--vvs-color)             !important;border-right: 5px solid var(--vvs-color)             !important; }
.mark-both-el               { border-left: 5px solid var(--el-color)              !important;border-right: 5px solid var(--el-color)              !important; }
.mark-both-plattsättning    { border-left: 5px solid var(--plattsättning-color)   !important;border-right: 5px solid var(--plattsättning-color)   !important; }
.mark-both-måleri           { border-left: 5px solid var(--måleri-color)          !important;border-right: 5px solid var(--måleri-color)          !important; }
.mark-both-projektledning   { border-left: 5px solid var( --projektledning-color) !important;border-right: 5px solid var( --projektledning-color) !important; }
.mark-both-bygg             { border-left: 5px solid var(--bygg-color)            !important;border-right: 5px solid var(--bygg-color)            !important; }
.mark-both-finsnickeri      { border-left: 5px solid var(--finsnickeri-color)     !important;border-right: 5px solid var(--bygg-color)            !important; }

.mark-top-vvs               { border-top: 5px solid var(--vvs-color)             !important; }
.mark-top-el                { border-top: 5px solid var(--el-color)              !important; }
.mark-top-plattsättning     { border-top: 5px solid var(--plattsättning-color)   !important; }
.mark-top-måleri            { border-top: 5px solid var(--måleri-color)          !important; }
.mark-top-projektledning    { border-top: 5px solid var( --projektledning-color) !important; }
.mark-top-bygg              { border-top: 5px solid var(--bygg-color)            !important; }
.mark-top-finsnickeri              { border-top: 5px solid var(--finsnickeri-color)            !important; }

.border_success {border: 1px solid var(--success-color);}
.border_info {border: 1px solid var(--info-color);}
.border_warn {border: 1px solid var(--warning-color);}
.border_error {border: 1px solid var(--danger-text-color);}



.iommi_filter {
    margin-bottom: var(--medium-gap);
}


.iommi_filter .col-5,
.form-group .col-5 {
    padding-left: 0;
}

.form-group .col-5 label {
    padding-left: 15px;
}

.iommi_filter .form-check .col-5 {
    padding: 0;
    display: inline;
}

a + h1,
a + h2,
a + h3,
a + h4,
a + h5,
div + div h1,
div + div h2,
div + div h3,
div + div h4,
div + div h5 {
    margin-top: 1.5rem;
}

.worker_menu_active div + div h1 {
    margin-top: 0;
}

ins {
    background-color: light-dark(#B6F5B6, #1F5D2B);
}

del {
    background-color: light-dark(#FFC2C2, #6E2230);
}

.secondary_menu,
.tertiary_menu,
.quaternary_menu {
    background: var(--dryft-dark-color) !important;
    color: white !important;
}

.box-grid {
    display: grid;
    grid-template-areas: "a a";
    gap: var(--medium-gap);
}

.box-grid-3 {
    display: grid;
    grid-template-areas: "a a a";
    gap: var(--medium-gap);
}

.box-grid-4 {
    display: grid;
    grid-template-areas: "a a a a";
    gap: var(--medium-gap);
}


.box-grid .box {
    background-color: var(--dryft-dark-color);
    color: white;
    border: 0;
}

.box-dashed {
    border: 2px dashed var(--dryft-subtle-text-color) !important;
}

.dryft_logo_menu {
    height: 1rem;
    width: 5rem;
    /*noinspection CssUnknownTarget*/
    background: url("/static/images/logo2-white.1e7ac9e2746e.svg");
    background-size: cover;
    display: block;
}


.navbar {
    padding: 0 0 0 0.2rem;
    flex-flow: row nowrap;
    justify-content: flex-start;
    position: fixed;
    overflow: scroll;
}

.navbar {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.navbar::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

.navbar-toggler a {
    color: white;
    padding-right: 1rem;
}


.block {
    display: inline-block;
}


.project_card {
    display: inline-block;
    border: 1px solid var(--dryft-border-color);
    padding: 1rem;
    text-align: center;
    min-width: 9rem;
    border-radius: var(--border-radius);
}

.project_card h1 {
    font-size: 36px;
}

.identicon {
    max-width: 2rem;
}


.unread {
    background-color: var(--color-state-unread) !important;
}




.datetime {
    white-space: nowrap;
}

th.superheader {
    text-align: center;
    border-right: 1px solid var(--border-subtle);
    border-top: 0;
    font-weight: normal;
    border-bottom: 0 !important;
}


th.superheader:empty {
    border: 0;
}

h1 i,
h2 i,
h3 i,
h4 i,
h5 i {
    font-size: 80% !important;
}

*:disabled:not(:is(.btn, input, select)) {
    border: 0;
}

[v-cloak] {
  display: none;
}

table .summary-row {
    td {
        padding-top: var(--medium-gap);
        opacity: 0.7;
    }
}

input {
    border-radius: var(--border-radius-small);
}

button {
    white-space: nowrap;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* custom checkbox */
label.checkbox {
    display: flex;
    line-height: 1.5rem;
}
label.checkbox input[type="checkbox"] {
    visibility: hidden; /* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    overflow: hidden;
}

label.checkbox .custom-check {
    height: var(--large-gap);
    width: var(--large-gap);
    border: 2px solid var(--dryft-dark-color);
    border-radius: var(--border-radius-small);
    display: inline-block;
    min-width: var(--large-gap);
    margin-right: var(--close-gap);
}
input[type=checkbox]:checked + .custom-check {
    background: var(--dryft-light-color);
    /*noinspection CssUnknownTarget*/
    background-image: url("/static/images/checkbox-checked.fdb2372bc79d.svg");
    background-position: top 4px left 2px;
    background-repeat: no-repeat;
}

@media (prefers-color-scheme: dark) {
    label.checkbox .custom-check {
        border-color: var(--dryft-text-color);
    }
}

label.checkbox .custom-check.check-percent {
    width: auto;
    color: var(--dryft-subtle-text-color);
}

/* end custom checkbox */

.date {
    white-space: nowrap;
}

textarea {
    border-color: #ccc;
    min-height: 5rem;
}

.freetext-toggle-label {
    color: #888;
}

input.freetext-toggle {
    display: none;
}

.freetext-toggle:not(:checked) ~ .freetext {
    display: none;
}

.fixed-top:not(.dryft-menu) {
    margin-top: 2rem;
}


.dryft-menu {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 30;
}

.secondary_menu a {
    color: white;
}

.secondary_menu,
.tertiary_menu,
.quaternary_menu
{
    left: 0;
    width: 100%;
}

@media screen and (max-width: 767px) {
    nav.tertiary_menu,
    nav.quaternary_menu
    {
        margin-top: 2rem;
    }
}

.secondary_menu {
    top: 2rem;
    z-index: 24;
}

.tertiary_menu {
    top: 4rem;
    z-index: 21;
}


.quaternary_menu {
    top: 6rem;
    z-index: 19;
}

.menu_padding {
    margin-top: 1rem;
}

.filepicker input[type='file'] {
    display: none;
}

.filepicker {
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    margin-right: 0.4rem;
    max-height: 2.3rem;
    white-space: nowrap;
}


input.changed,
textarea.changed,
select.changed,
.changed input,
.changed textarea,
.changed select {
    background-color: var(--form-control-changed-bg-color) !important;
}


.on_input_boost input.changed,
.on_input_boost textarea.changed,
.on_input_boost select.changed,
.on_input_boost .changed input,
.on_input_boost .changed textarea,
.on_input_boost .changed select {
    background-color: unset !important;
    border: 1px solid #ffffca !important;
}


.blue-line {
    display: block;
    margin: 15px 35px;
    height: 6px;
    background-color: var(--dryft-dark-color);
}

form .iommi_form {
}

.worker_menu_active form {
    margin-bottom: unset;
}

.worker_menu_active #first {
    position: absolute;
    top: -20rem;
}

form > .links,
.pseudo-form > .links,
.pseudo-form2 > .links{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 14;
    background: var(--panel-bg-color);
    border-top: 1px solid var(--border-subtle);
    left: 0;
    text-align: right;
    padding: 5px 5px 5px calc(var(--menu-width) + var(--close-gap));

    button {
        margin-bottom: 0;
    }
}

.worker_menu_active {
    form > .links,
    .pseudo-form > .links,
    .pseudo-form2 > .links {
        padding: 5px;
    }
}
.links button {
    margin-bottom: 11px;
}

.links a {
    padding-right: 1rem;
}

.secondary_form > .links {
    position: unset;
    bottom: unset;
    width: unset;
    z-index: unset;
    background: unset;
    padding: unset;
    border-top: unset;
    left: unset;
    text-align: unset;
}

.pulse {
    animation: pulse-animation 3s infinite;
    transition-timing-function: ease;
}

@keyframes pulse-animation {
    50% {
      background-color: #aaF;
    }
}

.error-message {
    white-space: pre-wrap;
    background-color: #dc3545 !important;
    color: white;
    padding: 1rem 2rem;
    max-width: 50rem;
}

.warning-message {
    white-space: pre-wrap;
    background-color: #d97e34 !important;
    color: white;
    padding: 1rem 2rem;
    max-width: 50rem;
}

identicon-img,
identicon-img img  {
    height: 1.0rem;
    position: relative;
    vertical-align: middle;
}

search-input {
    position: relative;
    display: inline-block;
    width: 100%;
}
search-input input {
    width: 100%;
}

search-input .search-results {
    position: relative;
    cursor: pointer;
    width: 100%;
}

search-input .results-wrapper {
    background: var(--panel-nested-bg-color);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--border-subtle);
    max-height: 15rem;
    overflow: scroll;
    /*noinspection CssUnknownProperty*/
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    width: 40rem;
}
search-input .results-wrapper::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

search-input .active {
    background-color: var(--primary-color);
    color: var(--primary-contrast-color);
}

search-input .badge {
    margin-bottom: 0.5rem;
    margin-right: 0.2rem;
}

search-input .tags {
    text-align: right;
}



.helptext {
}

table select.form-control {
    min-width: 100%;
}

.overflow_table {
    overflow: scroll;
}

.overflow_table thead th {
    position: unset;
}

.has_primary_menu table thead th {
    top: 2.7rem;
}

.has_secondary_menu table thead th {
    top: 4.7rem;
}

.initial {
    border: 1px solid black;
    border-radius: 4px;
    padding: 0 0.2rem;
}

.department_icon {
    min-width: 1.4rem;
    text-align: center;
}

.department_icon_muted {
    filter: grayscale(1);
    opacity: 0.4;
}

.department_icons {
    display: inline-flex;
    gap: 0;
    white-space: nowrap;
}

/* A consolidated /partner/ row lists every yrkesgrupp on the project, so a single line sizes the
   whole column to the widest cell. Five per row keeps that column narrow; empty grid tracks
   collapse to zero, so a row with fewer icons is no wider than it needs to be. */
.department_icons_wrapped {
    display: inline-grid;
    grid-template-columns: repeat(5, min-content);
    justify-content: start;
    row-gap: 0.15rem;
}

.department_icons_wrapped .department_icon {
    min-width: 1.1rem;
}

.box {
    border-radius: var(--border-radius);
    padding: var(--medium-gap);
    border: 1px solid var(--dryft-dark-color);
    background-color: var(--box-color);
    gap: var(--close-gap);
    display: flex;
    flex-direction: column;
}

.box .box-level-2,
.compact-box .box-level-2{
    background-color: var(--box-level-2-color);
    border: 0;
}

.box-subtle {
    border: 0;
    background-color: light-dark(var(--dryft-light-muted), var(--surface-2));
}

.box h2 {
    margin-top: 0;
}

.box-important {
    background-color: var(--dryft-dark-color);
    border: 0;
    color: var(--dryft-text-color-dark-background);
}

.box-important .box {
    background-color: var(--panel-nested-bg-color);
    color: var(--dryft-text-color);
}

.box-link {
    /*noinspection CssUnknownTarget*/
    background-image: url("/static/images/box-link-arrow.0ba936002663.svg");
    background-position: right var(--medium-gap) bottom 50%;
    background-repeat: no-repeat;
    text-decoration: none;
}

.box-link.box-important {
    /*noinspection CssUnknownTarget*/
    background-image: url("/static/images/box-link-arrow-on-dark-bg.041857646611.svg");
    color: var(--dryft-text-color-dark-background);
}

.box-collapsable {
    /*noinspection CssUnknownTarget*/
    background-image: url("/static/images/chevron-down.b9018c05f3ea.svg");
    background-position: right var(--medium-gap) top var(--medium-gap);
    background-repeat: no-repeat;
}

.box-collapsable.box-expanded {
    /*noinspection CssUnknownTarget*/
    background-image: url("/static/images/chevron-up.8de62e1e36cc.svg");
}

@media (prefers-color-scheme: dark) {
    .box-collapsable {
        /*noinspection CssUnknownTarget*/
        background-image: url("/static/images/chevron-down-dark-background.219eaabdf564.svg");
    }
    .box-collapsable.box-expanded {
        /*noinspection CssUnknownTarget*/
        background-image: url("/static/images/chevron-up-dark-background.4526804a365a.svg");
    }

    .box-link {
        /*noinspection CssUnknownTarget*/
        background-image: url("/static/images/box-link-arrow-on-dark-bg.041857646611.svg");
    }
}

.box-collapsable .box-collapsable-content {
    display: none;
}

.box-collapsable.box-expanded .box-collapsable-content {
    display: unset;
}

.box-collapsable .box-collapsable-content-when-collapsed {
}

.box-collapsable.box-expanded .box-collapsable-content-when-collapsed {
    display: none;
}

.compact-box {
    border-radius: var(--border-radius-small);
    padding: var(--close-gap);
    border: 1px solid var(--dryft-dark-color);
    background-color: var(--box-color);
    gap: var(--close-gap);
    display: flex;
    flex-direction: column;
}


.subtle-text {
    color: var(--dryft-subtle-text-color);
}

.navbar-toggler {
    display: none;
}


.navbar-toggler {
    position: fixed;
    top: 0;
    z-index: 35;
    color: white;
    border-radius: 0;
    height: 2rem;
}

.navbar-toggler.secondary_menu {
    top: 2rem;
    z-index: 22;
    text-align: left;
}

.navbar-toggler.tertiary_menu {
    top: 4rem;
    z-index: 22;
    text-align: left;
}

.navbar-toggler.quaternary_menu {
    top: 6rem;
    z-index: 20;
    text-align: left;
}

.hide-on-desktop {
    display: none;
}

.italic {
    font-style: italic;
}

.center {
    text-align: center;
}

.table-sm td, .table-sm th {
    padding-left: 0.5rem;
}

.edit_table td input,
.edit_table td select {
    min-width: 100%;
    height: 1.5rem;
    margin: 0;
    padding: 0 0.1rem;
    font-size: 14px;
}

textarea.inline_comment {
    field-sizing: content;
    min-width: 12rem;
    min-height: 1.5rem;
    max-height: 12rem;
    padding: 0 0.1rem;
    font-size: 14px;
    resize: vertical;
}

.edit_table td input[type="checkbox"] {
    height: 14px;
    min-width: unset;
}

.edit_table td input.numeric {
    width: 3rem;
}

.numeric .errors {
    white-space: normal;
}

.text_right input {
    text-align: right;
}


.iommi_filter .select2_enhance {
    width: 100%;
}

.iommi_query_toggle_simple_mode {
    float: unset !important;
    display: block;
    text-align: right;
    width: 14rem;
    margin-left: auto;
}

.iommi_filter .form-check {
    padding-top: 1.5rem;
    padding-left: 1rem;
}
.iommi_filter .form-check div {
    display: inline;
}

.iommi_filter .form-check-label {
    padding-left: var(--close-gap);
    white-space: nowrap;
}

.iommi_filter .form-check-input {
    margin-left: 0;
    margin-top: unset;
}

.query + .iommi-table-container,
.links + .iommi-table-container,
.links + div {
    margin-top: var(--medium-gap);
}

.menu-padding {
    padding-top: 2.4rem;
}

.worker-page-titlebar {
    width: 100%;
    position: fixed;
    top: 0;
    background-color: var(--dryft-dark-color);
    color: white;
    text-align: center;
    box-shadow: 0 5px 10px var(--shadow-color);
    padding-top: var(--large-gap);
    padding-bottom: var(--medium-gap);
    font-size: 18px;
    font-weight: bold;
    z-index: 10;
    min-height: 4rem;
}

.worker-page-title {
    margin-left: 3rem;
    margin-right: 3rem;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev .worker-page-titlebar {
    background-color: #2a6723;
}

.worker-page-menu {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: var(--dryft-dark-color);
    color: white;
    display: flex;
    justify-content: space-between;
    z-index: 6;
    padding: 0.5rem 0.5rem var(--safe-area-padding-bottom);
}

.worker-page-menu .btn {
    flex-grow: 1;
    height: 3rem;
    line-height: 2rem;
    width: unset;
}
.worker-page-menu .btn.btn_transparent {
    color: var(--dryft-light-color) !important;
    background-color: transparent;
}


.worker-page-menu.secondary-menu {
    bottom: 0;
    left: 0;
    z-index: 5;
}

/* Lifted bars sit above the iOS home indicator area, so they drop the safe-area bottom
   padding `.worker-page-menu` sets for the bottom-most bar. Keeping it would give every
   bar in the stack the inset as dead space, growing the stack by an inset per bar. */
.worker-page-menu.tertiary-menu {
    bottom: calc(var(--worker-page-menu-height) + 4rem);
    left: 0;
    padding-bottom: 0.5rem;
}

.sidebar_menu_active .worker-page-menu.secondary-menu,
.sidebar_menu_active .worker-page-menu.tertiary-menu {
    left: var(--menu-width);
    width: calc(100% - var(--menu-width));
}

.sidebar_menu_active.compact_menu .worker-page-menu.secondary-menu,
.sidebar_menu_active.compact_menu .worker-page-menu.tertiary-menu {
    left: var(--compact-menu-width);
    width: calc(100% - var(--compact-menu-width));
}

.worker_menu_active.sidebar_menu_active {
    bottom: 4rem;
    left: 0;
}

.global-search-button {
    position: fixed;
    top: 0;
    height: 4rem;
    width: 3rem;
    background: var(--dryft-dark-color);
    right: 0;
    padding-top: 1.5rem;
}

#dryft_search_overlay1 {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: black;
    opacity: 90%;
    z-index: 999;
}

#dryft_search_overlay2 {
    text-align: center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
}

#dryft_search_input {
    font-size: 26px;
    margin-top: 2rem;
    &::placeholder {
        font-size: 26px;
    }
    color: white;
}

#dryft_search_close {
    display: none;
}

#dryft_search_output {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: var(--medium-gap);
    padding-top: var(--medium-gap);
}


#dryft_search_output h3 {
    color: #a2a2a2;
    margin-top: 5rem;
}

.worker_menu_active #dryft_search_output h3 {
    display: none;
}

/* Search button help widgets */
#dryft_search_output h3 b {
    color: white;
    border: 2px solid gray;
    border-radius: 6px;
    padding: var(--border-radius);
}

.card {
    padding: 0.5rem;
    background-color: var(--panel-nested-bg-color);
    color: var(--dryft-text-color);
    flex-direction: column;
    gap: var(--close-gap);
    display: flex;
    width: 20rem;
    border: 0;
}

.card.menu_item .menu_item_breadcrumb {
    color: #6a6a6a;
    font-size: 0.85em;
}

/* Calendar */

.dryft-booking {
    all: unset;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
}

.dryft-booking .dryft-body {
    background: white;
    position: relative;
}

.dryft-booking .dryft-booking-widget {
    display: flex;
    align-self: center;
    background: white;
    flex-flow: row wrap;
    gap: 1rem;
    justify-content: center;
}

.dryft-booking .dryft-booking-widget .dryft-summary {
    padding-bottom: 0.5rem;
}

.dryft-booking .dryft-navigation-bar {
    text-align: center;
    margin-bottom: var(--close-gap);
}

.dryft-booking .dryft-navigation-bar h1 {
    display: inline-block;
}

.dryft-booking .dryft-navigation-bar a {
    cursor: pointer;
    padding: 0.5rem;
}

.dryft-booking .dryft-calendar {
    background: var(--dryft-dark-background);
    color: white;
    padding: 1rem;
    min-width: 22rem;
    width: 22rem;
}

.dryft-booking .dryft-calendar button {
    background: transparent;
    color: white;
    border: 0;
}


.dryft-booking .dryft-calendar button[disabled] {
    color: #494949;
}

.dryft-booking button[disabled] {
    opacity: 50%;
}

.dryft-booking .dryft-calendar .dryft-day {
    text-align: center;
    border-radius: 50%;
    width: 45px;
    height: 45px;
}

.dryft-weekday {
    font-size: 12px;
}

.dryft-booking tbody tr:nth-child(odd),
.dryft-booking tbody tr:hover {
    background-color: unset;
}

.dryft-booking table {
    width: 100%;
    border-collapse: separate;
}

.dryft-booking .dryft-disabled {
    color: #515151;
}

.dryft-day.dryft-current-date {
    border: 1px solid var(--dryft-dark-color);
}

.dryft-booking .dryft-calendar table {
    margin-left: auto;
    margin-right: auto;
}

.dryft-booking .dryft-calendar .dryft-tc {
    margin: 0 0.5rem;
}

.dryft-booking .dryft-button {
    padding: 6px 12px;
    border-radius: 4px;
    min-width: 10rem;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.5rem;
    background: var(--dryft-dark-background);
    color: white;
    border: solid black;
    font-size: 1.05rem;
}

.dryft-booking .dryft-button.dryft-cancel {
    background: white;
    color: black;
    border: 1px solid black;
}

.dryft-booking .dryft-datetime-range {
    padding: 12px 24px;
}


.dryft-booking .dryft-logo {
    margin: 1rem 0;
    height: 2rem;
}

.dryft-booking h1 {
    font-size: 2rem;
    text-align: center;
    margin-top: 0.5rem;
    background: transparent;
    color: unset;
    margin-bottom: 0;
}

.dryft-booking .dryft-next,
.dryft-booking .dryft-previous {
    background-color: transparent;
    border: 0;
    position: relative;
    top: -12px;
}

.dryft-booking .dryft-next {
    padding-left: 2rem;
}

.dryft-booking .dryft-previous {
    padding-right: 2rem;
}

.dryft-booking .dryft-day.dryft-available,
.dryft-booking .dryft-day.dryft-selected {
    cursor: pointer;
    text-align: center;
    background-color: var(--dryft-light-muted);
    padding: var(--close-gap);
    font-size: 18px;
}

.dryft-booking .dryft-day.dryft-day-not-in-month {
    color: var(--dryft-middle-muted);
    background-color: white;
}

.dryft-booking .dryft-day.dryft-selected {
    background: var(--dryft-light-color);
    color: var(--dryft-dark-color);
}

.dryft-booking .dryft-available-times {
    flex-direction: column;
    display: flex;
}

.dryft-booking .dryft-available-times button {
    width: 14rem;
}

.dryft-booking .dryft-form {
    display: flex;
    flex-direction: column;
}

.dryft-booking .dryft-form input,
.dryft-booking .dryft-form textarea {
    margin-bottom: 0.5rem;
    border-radius: 3px;
    border: 1px solid #c9c9c9;
    background: #f5f8fa;
    font-size: 1.1rem;
    padding: 0.2rem 0.6rem;
}

.dryft-booking .dryft-form.dryft-form-ROT {
    max-width: 36rem;
    margin-top: 2rem;
}

.dryft-booking .dryft-form.dryft-form-ROT label {
    display: block;
    margin-bottom: 0.5rem;
}

.dryft-booking .dryft-form.dryft-form-ROT h2 {
    margin-top: 1rem;
}

.dryft-booking .dryft-form.dryft-form-ROT p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.dryft-booking .dryft-form.dryft-form-ROT input[type=radio] {
    margin-right: 0.5rem;
    display: inline-block;
}

.dryft-booking .dryft-form.dryft-form-ROT input {
    display: block;
}

.dryft-booking .dryft-form textarea {
    height: 5.5rem;
}

.dryft-booking .dryft-input-group {
    gap: 0 0.5rem;
    display: flex;
    flex-flow: wrap;
}

.dryft-booking .dryft-input-group input {
    flex: 1 1 auto;
}

.dryft-booking .dryft-input-group input:first-child {
    margin-left: 0;
}

.dryft-booking .dryft-button-group {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.dryft-booking .dryft-button-group .button {
    max-width: 10rem;
    width: 10rem;
}

.dryft-booking .dryft-error {
    background-color: #dc3545!important;
    color: white;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.5rem;
}

.dryft-booking-preview {
    opacity: 0.6;
}


#dryft-pin-icon {
    position: relative;
    top: 4px;
}

.dryft-selected-location {
    font-size: 1.1rem;
    text-align: center;
    width: 100%;
    margin-bottom: 1rem;
    cursor: pointer;
    border: 1px solid #e8e8e8;
    margin-top: 1rem;
}

.dryft-ask-for-zip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    vertical-align: center;
    text-align: center;
    font-size: 1.5rem;
    padding: 2rem;
    color: white;
    box-sizing: border-box;
}

.dryft-ask-for-zip input {
    width: 10rem;
    font-size: 4rem;
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
}

.dryft-booking .has-times {
    background-image: linear-gradient(-45deg, #ebebeb 25%, #dbd7d7 25%, #dbd7d7 50%, #ebebeb 50%, #ebebeb 75%, #dbd7d7 75%, #dbd7d7 100%);
    background-size: 8px 8px;
}

.dryft-booking .dryft-selected.has-times {
    background-image: linear-gradient(-45deg, #e5f7b1 25%, #cce096 25%, #cce096 50%, var(--dryft-light-color) 50%, #e5f7b1 75%, #cce096 75%, #cce096 100%);
    background-size: 8px 8px;
}


@media screen and (max-width: 700px)
{
    .dryft-booking .dryft-logo {
       height: 1.5rem;
    }

    .dryft-booking .dryft-available-times button {
        width: 24rem;
    }

    .dryft-booking .dryft-calendar .dryft-day {
        text-align: center;
        border-radius: 50%;
        width: 40px;
        height: 40px;
    }

    .dryft-booking .dryft-calendar {
    }

    .dryft-booking .dryft-available-times button {
        width: 22rem;
    }
}

@media (prefers-color-scheme: dark) {
    .dryft-booking .dryft-day.dryft-available,
    .dryft-booking .dryft-day.dryft-selected {
        background-color: var(--dryft-dark-color);
        color: var(--dryft-dark-muted);
    }

    .dryft-booking .dryft-day.dryft-day-not-in-month {
        background-color: black;
        opacity: 50%;
    }

    .dryft-booking .dryft-day.dryft-selected {
        background-color: var(--dryft-light-color);
        color: var(--dryft-dark-color);
    }
    .dryft-day.dryft-current-date {
        border: 1px solid var(--dryft-light-color);
    }

    .dryft-booking .has-times {
        background-image: linear-gradient(-45deg, #173841 25%, #284952 25%, #284952 50%, #173841 50%, #173841 75%, #284952 75%, #284952 100%);
        background-size: 8px 8px;
    }

    .dryft-booking .dryft-selected.has-times {
        background-image: linear-gradient(-45deg, #e5f7b1 25%, #cce096 25%, #cce096 50%, var(--dryft-light-color) 50%, #e5f7b1 75%, #cce096 75%, #cce096 100%);
        background-size: 8px 8px;
    }
}

/* end calendar */
.worker_menu_active form > .links,
.worker_menu_active .pseudo-form > .links {
    bottom: calc(4rem + var(--safe-area-padding-bottom));
}

.worker_menu_active .container {
    margin: 0;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: var(--safe-area-padding-bottom);
}


/* mobile */
@media screen and (max-width: 767px) {
    :root {
        --body-top: 4rem;
        /* Clear the fixed title bar, plus a gap so the content starts below the shadow it
           casts rather than under it. The 7rem this used to be is for a secondary menu
           bar, which only some pages have. */
        --container-top: calc(4rem + var(--medium-gap));
    }

    body:has(.secondary_menu) {
        --container-top: 7rem;
    }

    [data-iommi-type="DebugMenu"] {
        display: none;
    }

    #dryft_search_output h3 {
        display: none;
    }

    #dryft_search_close {
        display: block;
        position: fixed;
        top: var(--close-gap);
        right: var(--close-gap);
    }

    .navbar-toggler {
        display: unset;
    }

    .btn {
        width: 100%;
    }

    h1 {
        font-size: 18px;
    }

    h2 {
        font-size: 16px;
    }

    h3 {
        font-size: 1.3rem;
    }


    h4 {
        font-size: 1.2rem;
    }

    .hide-on-mobile {
        display: none;
    }

    .hide-on-desktop {
        display: unset;
    }

    .smaller_on_mobile {
        font-size: 90%;
    }

    .secondary_menu {
        top: 4rem;
    }

    .mapboxgl-popup-content,
    .mapboxgl-popup-close-button,
    .mapboxgl-popup-tip {
        zoom: 150%;
    }

    .container {
        margin-top: var(--container-top);
    }

    .hide_compact {
        display: none;
    }


    .worker_menu_active .container {
        margin-bottom: 4rem;
        margin-top: 5rem;
    }

    /* The title is already shown in the worker-page-titlebar on mobile */
    .container > h1:first-child {
        display: none;
    }
}

#index {
    position: fixed;
    top: 8rem;
    right: 0;
    list-style: none;
    padding-right: 1rem;
    padding-top: 1rem;
    border: 1px solid gray;
    height: 100%;
    overflow: scroll;
    padding-bottom: 10rem;
    max-width: 20rem;
    z-index: 10;
}

#index ul {
    list-style: none;
    padding-left: 1rem;
}

#index li {
    text-overflow: ellipsis;
    clear: both;
}

@media screen and (max-width: 767px) {
    #index {
        display: none;
    }
}


#fixed-top-invalid, #fixed-bottom-invalid {
    position: fixed;
    min-height: 0.5rem;
    width: 100%;
    z-index: 99;
    display: inline;
    padding-left: 6px;
    font-size: 2rem;
    pointer-events: none
}

#fixed-top-invalid {
    top: 0;
    border-top: 4px solid red;
}
#fixed-bottom-invalid {
    bottom: 0;
    border-bottom: 4px solid red;
}


.people {
    display: grid;
    grid-template-columns: repeat(auto-fit, 22rem);
    grid-gap: 1rem;
}

.people .person {
    padding: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
}


.table_cell_delimiter {
    border-right: 1px solid var(--border-strong);
}

.table_cell_delimiter_left {
    border-left: 1px solid var(--border-strong);
}

.more_info {
	position: relative;
    background: #d9d7d7;
    color: black;
    border-radius: 100%;
    padding: 2px 5px;
    margin-left: 1rem;
    cursor: pointer;
    content: "?";
}

.more_info::after {
	background-color: #333;
	border-radius: var(--border-radius);
	display: none;
	padding: 10px 15px;
	position: absolute;
	text-align: center;
	z-index: 999;
}

.more_info::before {
	background-color: #333;
	content: ' ';
	display: none;
	position: absolute;
	width: 15px;
	height: 15px;
	z-index: 999;
}

.more_info:hover::after {
	display: block;
}

.more_info:hover::before {
	display: block;
}

.more_info::after {
	content: attr(data-more_info);
    color: white;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, calc(100% + 10px));
}

.more_info::before {
	bottom: 0;
	left: 50%;
	transform: translate(-50%, calc(100% + 5px)) rotate(45deg);
}

.create_work_type {
    display: inline-block;
    border: 1px solid black;
    padding: 1rem;
    text-align: center;
    min-width: 8.5rem;
    /* margin: 0.5rem 0.5rem 1rem; */
    cursor: pointer;
}

.bare-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    /* margin-top: var(--medium-gap); */
}

.bare-list li {
    margin-top: 4px;
}

.bare-list i {
    font-size: 24px;
    margin-right: var(--close-gap);
}

.mapboxgl-popup-content,
.mapboxgl-popup-close-button {
    background-color: var(--bg-color);
    color: var(--dryft-text-color);
}


.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    border-bottom-color: var(--bg-color);
}

.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
    border-bottom-color: var(--bg-color);
}

.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
    border-bottom-color: var(--bg-color);
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    border-top-color: var(--bg-color);
}

.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
    border-top-color: var(--bg-color);
}

.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-top-color: var(--bg-color);
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: var(--bg-color);
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: var(--bg-color);
}

.workspec_freetext {
    opacity: 0.8;
}

.article_number {
    font-size: 84%;
    margin: 0.5rem;
    border-radius: 3px;
    border: 1px solid var(--dryft-text-color);
    padding: 0px 3px;
    opacity: 58%;
}

.select2-dropdown {
    background-color: var(--panel-nested-bg-color) !important;
}

@media (prefers-color-scheme: dark) {
    .box-important .box .btn_primary {
        border: 2px solid var(--dryft-dark-color);
    }
}

form .row {padding-right: 0;padding-left: 0;}

form .form-row {
    margin-right: 0;
    margin-left: 0;
}


@media print {
    .no_print,
    #index,
    .worker-page-titlebar,
    .worker-page-menu {
        display: none !important;
    }

    .card,
    .panel {
        background: unset;
        color: unset;
        border: unset;
    }
}

.fullscreen_overlay {
    background: #000000A0;
    position: fixed;
    display: table;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 60;
}

.fullscreen_wrapper {
    display: table-cell;
    vertical-align: middle;
}

.fullscreen {
    border: 1px solid var(--bg-color);
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    background: var(--bg-color);
    min-width: 44rem;
    max-width: 32rem;
    min-height: 35rem;
    text-align: center;

    label {
        width: 100%;
    }
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--dryft-text-color);
}

.added {
    color: var(--success-color);
    opacity: 100% !important;
    background-color: transparent !important;
}

.removed,
.removed span {
    color: var(--danger-text-color);
    text-decoration: line-through;
    opacity: 100% !important;
    background-color: transparent !important;
}

.unchanged {
    opacity: 0.5;
}

.unchanged .unchanged {
    opacity: unset;
}

/* opacity on the row composites its whole subtree as one group, so a price
   breakdown popover nested inside a dimmed unchanged row can never paint more
   opaque than 0.5 — it looks semi-transparent. Lift the dimming off the row
   while its breakdown is being inspected so the popover renders fully opaque. */
.unchanged:has(.has_breakdown_popover:hover),
.unchanged:has(.has_breakdown_popover:focus-within) {
    opacity: 1;
}


.cta_bg {
    background-color: var(--btn-cta-bg);
    color: var(--btn-cta-text);
}

.calendar {
    background-color: var(--panel-bg-color);

    .calendar_day_number {
        float: right;
        margin-left: 0.5rem;
    }

    .calendar_weekday {
        text-align: center;
    }

    .calendar_day {
        width: 10rem;
        height: 10rem;
        min-width: 10rem;
        min-height: 10rem;
        max-width: 10rem;
        max-height: 10rem;
        overflow: hidden;
        vertical-align: top;
        background-color: var(--bg-color);
        margin: 1rem;
        border: 2px solid var(--panel-bg-color);
        text-overflow: ellipsis;
    }

    .calendar_weekend .calendar_day_number {
        color: red;
    }

    .calendar_today {
        background-color: var(--panel-bg-color);
    }

    .calendar_navigation td div {
        display: flex;
        justify-content: space-evenly;
    }

    .calendar_other_month {
        opacity: 0.5;
    }
}

/* START iommi Panel form layout */
/*
 * iommi Panel layouts render <fieldset data-iommi-type="Panel">,
 * <div class="row" data-iommi-type="Panel"> and <div class="col" data-iommi-type="PanelCol">.
 * The form element itself is `.grid` (display:grid; gap:1rem), which spaces its direct
 * children — but fields nested in fieldsets/cols fall out of that grid, so we mirror the
 * same grid gap inside panels. Scoped to the data-iommi-type markers so it never collides
 * with the legacy Bootstrap-style .row/.col used elsewhere.
 */
fieldset[data-iommi-type="Panel"] {
    display: grid;
    gap: 1rem;
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

fieldset[data-iommi-type="Panel"] > legend {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 16px;
    color: var(--dryft-text-color);
}

.row[data-iommi-type="Panel"] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.row[data-iommi-type="Panel"] > [data-iommi-type="PanelCol"] {
    flex: 1 1 220px;
    min-width: 0;
    display: grid;
    gap: 1rem;
    align-content: start;
}
/* END iommi Panel form layout */

/* START Collapsible table filters */
/*
 * iommi query/filter forms (rendered via dryft/query_form.html) collapse behind a
 * "Filters" toggle on mobile. On desktop the toggle is hidden and filters render as before.
 */
.query_collapsible > summary {
    display: none;
}

@media screen and (max-width: 767px) {
    .query_collapsible > summary {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 10px 14px;
        border: 1px solid var(--table-border);
        border-radius: 8px;
        font-weight: 600;
        list-style: none;
    }

    .query_collapsible > summary::-webkit-details-marker {
        display: none;
    }

    .query_collapsible > summary::before {
        content: '>';
        font-size: 18px;
        font-weight: 500;
        transition: rotate 0.2s;
    }

    .query_collapsible[open] > summary {
        margin-bottom: 12px;
    }

    .query_collapsible[open] > summary::before {
        rotate: 90deg;
    }

    /* Indicator (script-toggled) shown when at least one filter is active in the URL. */
    .query_collapsible_active_dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--primary-color);
    }
}
/* END Collapsible table filters */

/* On mobile, Column.edit (and other icon columns) show only the icon, not the label. */
@media screen and (max-width: 767px) {
    .icon_column_label {
        display: none;
    }
}

/* Which stages of the offer cycle something is in — one lettered circle per stage, in
   the colors the Insikt pages paint their status badges and labels with. The letter is
   the initial of the stage's own name (so it follows the language), and it is what makes
   the row readable: the three colors are close enough on a white background that color
   alone is a guess, and a column of these is quieter than a row of full words. */
.version_letters {
    display: flex;
    gap: 3px;
    align-items: center;
}

.version_letter {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.version_letter.accepted {
    background-color: var(--status-accepted-bg);
    color: var(--status-accepted-text);
}

.version_letter.published {
    background-color: var(--status-published-bg);
    color: var(--status-published-text);
}

.version_letter.draft {
    background-color: var(--status-draft-bg);
    color: var(--status-draft-text);
}

/* The three-way "may invoice" control in the Ersättning table on Production Economics. */
.allowed_invoicing_control {
    display: grid;
    gap: 2px;
    width: 150px;
}

.allowed_invoicing_option {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 400;
    white-space: nowrap;
}

.allowed_invoicing_amount {
    width: 6em;
    padding: 0 4px;
    font-size: 12px;
}

.allowed_invoicing_warning,
.allowed_invoicing_error {
    font-size: 12px;
    white-space: normal;
}

.allowed_invoicing_cell_disabled .allowed_invoicing_option {
    opacity: 0.4;
    cursor: not-allowed;
}