:root {
    --text-color: #4e4b4b;
    --colorstripe1: #d7e0e1;
    --colorstripe2: #e4eced;
    --primary-fg: #ffffff;
    --primary-border: var(--primary-bg);
    --leadtime-chip-selected-bg: var(--primary-bg);
    --leadtime-chip-selected-border: var(--primary-border);
    --leadtime-chip-selected-fg: var(--primary-fg);
    --bookingfinder-slot-bg: #ffffff;
    --bookingfinder-slot-border: #cccccc;
    --bookingfinder-slot-active-bg: var(--primary-bg);
    --bookingfinder-slot-active-border: var(--primary-border);
    --bookingfinder-slot-active-fg: var(--primary-fg);
    --bookingfinder-chip-bg: #f9f9f9;
    --bookingfinder-chip-border: #cccccc;
    --bookingfinder-chip-active-bg: var(--primary-bg);
    --bookingfinder-chip-active-border: var(--primary-border);
    --bookingfinder-chip-active-fg: var(--primary-fg);
    --settings-chip-bg: var(--bookingfinder-chip-bg);
    --settings-chip-border: var(--bookingfinder-chip-border);
    --settings-chip-fg: var(--text-color);
    --settings-chip-hover-border: #9e9e9e;
    --settings-chip-active-bg: var(--primary-bg);
    --settings-chip-active-border: var(--primary-border);
    --settings-chip-active-fg: var(--primary-fg);
    --settings-nav-fg: var(--primary-bg);
    --settings-tab-accent-bg: var(--primary-bg);
    --settings-action-fg: var(--primary-bg);
    --tab-menu-border: var(--border-soft);
    --tab-menu-link-bg: transparent;
    --tab-menu-link-fg: var(--settings-nav-fg);
    --tab-menu-link-hover-bg: var(--bookingfinder-chip-bg);
    --tab-menu-link-hover-fg: var(--settings-nav-fg);
    --tab-menu-active-bg: var(--primary-bg);
    --tab-menu-active-border: var(--primary-border);
    --tab-menu-active-fg: var(--primary-fg);
    --tab-menu-font-family: inherit;
    --tab-menu-font-weight: 600;
    --tab-menu-radius: 6px;
    --tab-menu-focus-ring: var(--primary-bg);
    --bookingfinder-description-bg: #f9f9f9;
    --bookingfinder-description-border: #e0e0e0;
    --bookingfinder-description-fg: #444444;
    --bookingfinder-toggle-off-bg: var(--btn-danger-bg);
    --bookingfinder-toggle-off-border: var(--bookingfinder-chip-border);
    --bookingfinder-toggle-on-bg: var(--success-fg);
    --bookingfinder-toggle-on-border: var(--success-fg);
    --bookingfinder-toggle-focus: var(--primary-bg);
    --bookingembed-preview-header-bg: #f7f7f7;
    --bookingembed-preview-header-fg: #1f2937;
    --bookingembed-preview-title-fg: #6f6f6f;
    --bookingembed-preview-action-bg: #ffffff;
    --bookingembed-preview-action-border: #d0d0d0;
    --bookingembed-preview-action-fg: var(--primary-bg);
    --bookingembed-preview-action-hover-bg: #f0f0f0;
    --bookingembed-preview-action-hover-fg: var(--primary-bg);
    --leadtime-chip-bg: #ffffff;
    --leadtime-rounding-selected-bg: #efefef;
    --leadtime-rounding-selected-border: #c9c9c9;
    --leadtime-rounding-selected-fg: #4e4b4b;
    --leadtime-disabled-bg: #efefef;
    --leadtime-disabled-border: #cfcfcf;
    --leadtime-disabled-fg: #8a8a8a;
    --switch-track-bg: var(--colorstripe1);
    --switch-scale: 0.75;
    --switch-track-border: var(--colorstripe1);
    --switch-thumb-bg: var(--leadtime-chip-bg);
    --switch-track-checked-bg: var(--primary-bg);
    --switch-track-checked-border: var(--primary-bg);
    --switch-focus-shadow: var(--primary-bg);
    /*bs color für btn-danger*/

    --btn-danger-bg: #d9534f;
    --success-fg: #41aa68;
    --brand: #2A7F68;
    --brand-strong: #1D5C4B;
    --brand-soft: rgba(42,127,104,.12);
    --brand-2: var(--brand-strong);
    --bg: #F6FBF9;
    --surface: var(--bg-card);
    --text: #0F172A;
    --text-muted: #64748B;
    --muted: var(--text-muted);
    --bg-page: #F6FBF9;
    --bg-card: #FFFFFF;
    --border: rgba(15,23,42,.12);
    --border-soft: rgba(15,23,42,.10);
    --control-bg: #fff;
    --control-hover: var(--brand-soft);
    --icon-color: var(--brand);
    --date-icon-color: var(--icon-color);
    --date-control-bg: var(--control-bg);
    --date-control-border: var(--border);
    --date-control-hover-bg: var(--control-hover);
    --date-control-hover-border: color-mix(in srgb, var(--brand) 30%, var(--border));
    --date-control-hover-ring: 0 0 0 .2rem color-mix(in srgb, var(--brand) 12%, transparent);
    --date-control-focus-ring: 0 0 0 .25rem color-mix(in srgb, var(--brand) 18%, transparent);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.12);
    --section-y: 18px;
    --landing-max: 720px;
    --minimal-max: 520px;
    --content-max: 720px;
    --h1: clamp(28px, 5.5vw, 42px);
    --lead: clamp(16px, 3.5vw, 20px);
    --small: 13px;
    --slot-radius: .75rem;
    --slot-pad-x: .85rem;
    --slot-pad-y: .55rem;
    --date-radius: .9rem;
    --date-pad-y: .85rem;
    --date-pad-x: 1rem;
    --btn-radius: 14px;
    --glow: 0 0 0 1px rgba(15,23,42,.06), 0 18px 60px rgba(15,23,42,.08);
    --glow-brand: 0 0 0 .25rem var(--brand-soft);
}

/* Wiederverwendbares Tab-Menü für gleichrangige Ansichten. */
.tab-menu {
    border-bottom: 1px solid var(--tab-menu-border);
    margin-bottom: -1px;
}

.tab-menu > li > a {
    background-color: var(--tab-menu-link-bg);
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--tab-menu-radius) var(--tab-menu-radius) 0 0;
    color: var(--tab-menu-link-fg);
    font-family: var(--tab-menu-font-family);
    font-weight: var(--tab-menu-font-weight);
}

.tab-menu > li > a:hover,
.tab-menu > li > a:focus {
    background-color: var(--tab-menu-link-hover-bg);
    color: var(--tab-menu-link-hover-fg);
}

.tab-menu > li.active > a,
.tab-menu > li.active > a:hover,
.tab-menu > li.active > a:focus {
    background-color: var(--tab-menu-active-bg);
    border-color: var(--tab-menu-active-border);
    color: var(--tab-menu-active-fg);
}

.tab-menu > li > a:focus-visible {
    outline: 2px solid var(--tab-menu-focus-ring);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .tab-menu > li {
        float: none;
        margin-left: 0;
    }

    .tab-menu > li > a {
        border-radius: 4px;
    }
}

/*Breitere Seitendarstellung derzeit nur für ausgewählte Seiten

    Siehe _Layout.cshtml

*/

.body-content-lg {
    width: 96%;
}

body:not(#hugerte) {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    padding-top: 50px;
    padding-bottom: 20px;
}

.body-content {
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

body.booking-profile-page:not(#hugerte) {
    padding-top: 0;
}

body.booking-profile-page .body-content {
    padding-top: 0;
}

a.nolink,
a:hover.nolink,
a:focus.nolink,
a:active.nolink,
a:visited.nolink {
    text-decoration: none;
}

a:focus:not(:focus-visible) {
    outline: none;
}

label:not(.radio-inline, .checkbox-inline, .radio, .checkbox) {
    font-family: Verdana;
    font-size: 0.9em;
    font-weight: normal;
}

label.control-caption {
    font-size: 0.9em;
    opacity: 0.75;
    padding: 8px 8px 0 0;
}

label.label-group {
    width: 100%;
}

    /*pull-right für Button in einem Label */

    label.label-group button {
        float: right !important;
    }

.rscolor {
    background-color: #1a4e80;
}

.sumsign {
    font-size: 0.78em;
    position: relative;
    top: -2px;
}

.nowrap {
    white-space: nowrap;
}

/* Mousepointer anzeigen */

.clickable {
    cursor: pointer !important;
}

.cursor-default {
    cursor: default !important;
}

.not-allowed {
    cursor: not-allowed !important;
}

.not-visible {
    visibility: hidden;
}

.prevent-select {
    -webkit-user-select: none; /* Safari */

    -ms-user-select: none; /* IE 10 and IE 11 */

    user-select: none; /* Standard syntax */
}

.info-text {
    color: blue;
}

.underline {
    text-decoration: underline;
}

.noresize {
    resize: none;
}

.no-border {
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.align-right {
    text-align: right;
}

[disabled] {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

option[disabled] {
    font-style: italic;
}

.hidden-readonly {
    /*Schreibgeschützt nicht als schreibgeschützt darstellen*/

    background-color: inherit !important;
}

input[type=radio] {
    cursor: pointer;
}

span[name="category-icon"] {
    margin-left: 4px;
    margin-right: 6px;
}

span[name="required"] {
    color: red;
    display: none;
    font-weight: 600;
    margin-left: 4px;
}

.btn-help {
    font-weight: bold;
}

.btn-wrap {
    text-wrap: wrap;
}

.info-icon-btn,
.info-icon-btn:focus,
.info-icon-btn:active,
.info-icon-btn:hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 2px;
}

.help-muted {
    font-size: 0.9em;
    color: #777;
}

.emptylist-info {
    font-style: italic;
    opacity: 0.75;
}

.centered {
    text-align: center;
}

.anker-color {
    color: var(--primary-bg);
}

/* Suchergebnis in Text hervorheben */

.highlight-result {
    color: #51d853;
}

.bold {
    font-weight: bold;
}

.selectedrow {
    background-color: antiquewhite;
}

/*Spalten, die auf breiten Geräten nur zum Füllen gebraucht werden (damit Summe col=12 ist), die bei

    vertikaler Anordnung aber keinen Platz wegnehmen sollen*/

.col-spacer {
    height: 1px;
    padding: 0px;
    margin: 0px;
}

/*Trennlinie für <select>-Liste*/

select option.divider {
    font-size: 1px;
    background: rgba(0, 0, 0, 0.5);
}

.dropdown-menu {
    overflow: overlay;
}

    .dropdown-menu .divider.small {
        margin: 3px 0;
    }

select.no-border {
    border: none !important;
    box-shadow: none;
    outline: none;
}

/*Button mit Icon 'fa-lock' oder 'fa-lock-open' */

button[name="publics"] {
    /*Trotz unterschiedlich breiter Icons die Buttons immer in der gleichen Breite anzeigen. */

    width: 24px;
}

/*Die Buttongruppe innerhalb von .btn-group.wide wird auf voller Breite angezeigt.

    (Standard ist dagegen, dass der Button nur so Breit ist, wie der anzuzeigende Text erfordert.

*/

.btn-group-wide .btn-group, .btn-group-wide button {
    text-align: start;
    width: 100%
}

.btn-group-wide .dropdown-menu {
    width: 100%;
}

.btn-group-wide button span.caret {
    float: right;
    margin-top: 8px;
}

/*Ohne diese Awneisung würden Buttons in Tabellen bei Hover auf Zeile (nicht auf Button) mit einem

    weißen Hintergrund angezeigt werden.

*/

.table-hover button {
    background-color: transparent;
}

.dropdown-menu button:not(.btn-primary) {
    background-color: transparent;
    border: 1px solid transparent !important;
    border-radius: 0;
    display: inline-block;
    line-height: 1.5;
    padding: 0.4em 0.65em;
    text-align: left;
    width: 100%;
    vertical-align: middle;
}

.dropdown-menu button:hover:not(.btn-primary) {
    background-color: #eee;
}

.resource-groups-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.resource-header-row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 6px;
}

.resource-filter {
    max-width: 240px;
    width: 100%;
}

.resource-filter-input {
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M11.2 10.5l3.1 3.1-0.7 0.7-3.1-3.1a5.5 5.5 0 1 1 0.7-0.7zm-5.7 0.2a4.3 4.3 0 1 0 0-8.6 4.3 4.3 0 0 0 0 8.6z' fill='%23999'/></svg>");
    background-position: 8px center;
    background-repeat: no-repeat;
    padding-left: 30px;
}

.resource-groups-grid .resource-group {
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
}

.resource-groups-grid .resource-group-header {
    background-color: #f2f2f2;
    border-bottom: 1px solid #d9d9d9;
    padding: 6px 10px;
}

.resource-groups-grid .resource-group-body {
    padding: 8px 10px;
}

.resource-groups-grid .resource-group table {
    width: 100%;
}

.resource-chips {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.resource-chip {
    align-items: center;
    border: 1px solid #cfcfcf;
    border-radius: 16px;
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    width: 100%;
}

    .resource-chip label {
        align-items: center;
        cursor: pointer;
        display: flex;
        gap: 8px;
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

.resource-chip-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.resource-article-link {
    padding: 0;
    font-size: 12px;
    line-height: 1.2;
    align-self: flex-start;
    text-align: left;
}

    .resource-article-link[disabled] {
        cursor: not-allowed;
        color: #999;
        text-decoration: none;
    }

    .resource-article-link:focus,
    .resource-article-link:active,
    .resource-article-link:focus-visible,
    .resource-article-link.btn:focus,
    .resource-article-link.btn:active,
    .resource-article-link.btn:focus:active,
    .resource-article-link.btn:focus-visible:active {
        outline: none;
        box-shadow: none;
    }

.resource-chip-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-chip-index {
    align-items: center;
    display: flex;
    gap: 6px;
}

.resource-chip-index-label {
    color: #666;
    font-size: 12px;
}

.resource-index-input {
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    height: 28px;
    padding: 2px 6px;
    width: 4.2ch;
}

    .resource-index-input:disabled {
        background-color: #f5f5f5;
        color: #999;
    }

.resource-chip input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 1px solid #337ab7;
    border-radius: 3px;
    display: inline-block;
    height: 16px;
    position: relative;
    width: 16px;
    outline: none;
    box-shadow: none;
    flex: 0 0 16px;
    min-width: 16px;
    min-height: 16px;
}

    .resource-chip input[type="checkbox"]:focus {
        outline: none;
        box-shadow: none;
    }

    .resource-chip input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 1px;
        top: 1px;
        width: 12px;
        height: 12px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 12px 12px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 6.5l2.2 2.2L10 3' fill='none' stroke='%23337ab7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    }

.resource-chip-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-chip input[type="radio"] {
    margin-left: auto;
}

.resource-chip.is-main {
    background-color: #fff;
    border-color: #337ab7;
}

    .resource-chip.is-main .resource-chip-name {
        color: #333;
        font-weight: 600;
    }

.resource-chip.is-selected:not(.is-main) {
    border-color: #9dbce0;
}

.resource-groups-grid .resource-group td:first-child {
    white-space: normal;
    word-break: break-word;
}

    .resource-groups-grid .resource-group td:first-child label {
        align-items: flex-start;
        display: inline-flex;
        gap: 6px;
        white-space: normal;
        width: 100%;
    }

.appointmenttypes-list-column .list-group-item {
    white-space: normal;
}

.appointmenttypes-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
}

    .appointmenttypes-grid[data-tab="details"] {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

        .appointmenttypes-grid[data-tab="details"] .appointmenttypes-section {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

            .appointmenttypes-grid[data-tab="details"] .appointmenttypes-section + .appointmenttypes-section {
                margin-top: 14px;
            }

.rs-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0 16px;
}

.apptype-card {
    background-color: #fff;
    border: none;
    border-radius: 0;
}

    .apptype-card .rs-tabs {
        border-bottom: none;
        border-radius: 0;
        margin: 0;
    }

.rs-tab {
    background-color: #f6f7f8;
    border: 1px solid #d8d8d8;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    color: #666;
    cursor: pointer;
    font-size: 13px;
    margin: 12px 4px -1px 0;
    padding: 8px 14px;
    position: relative;
}

    .rs-tab:hover,
    .rs-tab:focus {
        background-color: #f0f2f4;
        color: #444;
        outline: none;
    }

    .rs-tab.is-active {
        background-color: #fff;
        border-bottom: 1px solid #fff;
        color: #333;
        font-weight: 600;
    }

        .rs-tab.is-active::before {
            background-color: var(--settings-tab-accent-bg);
            content: "";
            height: 3px;
            left: -1px;
            position: absolute;
            right: -1px;
            top: -1px;
        }

.apptype-tab-content {
    padding-top: 6px;
}

.apptype-card-body {
    padding: 24px;
    border: 1px solid #d8d8d8;
    border-top: 1px solid #d8d8d8;
    border-radius: 0 0 6px 6px;
}

.appointmenttypes-layout {
    display: flex;
    flex-wrap: wrap;
    max-width: 930px;
    margin-right: auto;
    width: 100%;
}

    .appointmenttypes-layout > [class*="col-"] {
        float: none;
    }

    .appointmenttypes-layout .appointmenttypes-list-column {
        flex: 0 0 24%;
        max-width: 24%;
    }

    .appointmenttypes-layout .appointmenttypes-grid-column {
        flex: 0 0 76%;
        max-width: 76%;
    }

.bookingembeds-layout {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    margin-right: auto;
}

    .bookingembeds-layout > [class*="col-"] {
        float: none;
    }

    .bookingembeds-layout .bookingembeds-list-column {
        flex: 0 0 180px;
        max-width: 180px;
        width: auto;
    }

    .bookingembeds-layout .bookingembeds-grid-column {
        flex: 1 1 auto;
        max-width: 100%;
        width: auto;
        padding-left: 18px;
    }

.bookingembeds-layout {
    display: block;
    margin-right: 0;
}

.bookingembed-selection {
    margin-bottom: 18px;
}

.bookingembed-selection-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.bookingembed-selection-dropdown {
    flex: 1 1 auto;
    min-width: 240px;
}

.bookingembed-selection-reset {
    flex: 0 0 auto;
    width: 260px;
    min-width: 260px;
    white-space: nowrap;
}

.bookingembed-selection .bookingembed-list-actions {
    margin-top: 0;
}

.bookingembeds-preview-row {
    margin-top: 18px;
}

.bookingembeds-section {
    margin-top: 28px;
}

    .bookingembeds-section:first-child {
        margin-top: 0;
    }

.bookingembeds-switch-group {
    margin-top: 24px;
    margin-bottom: 4px;
}

    .bookingembeds-switch-group .switch-row {
        align-items: center;
        gap: 10px;
    }

    .bookingembeds-switch-group + .bookingembeds-section {
        margin-top: 8px;
    }

.bookingembed-preview-settings-main .bookingembeds-switch-group + .bookingembeds-section {
    margin-top: 8px;
}

.bookingembeds-section.bookingembeds-detail {
    margin-top: 8px !important;
}

.bookingembed-accordion .panel-title a {
    display: block;
    text-decoration: none;
}

.bookingembed-accordion .panel-heading {
    padding: 10px 15px;
}

.bookingembed-accordion .panel {
    margin-bottom: 0;
}

    .bookingembed-accordion .panel + .panel {
        margin-top: 0;
    }

.bookingembed-list-actions {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 8px;
    margin-top: 12px;
}

    .bookingembed-list-actions .btn {
        flex: 1 1 0;
    }

.bookingembed-panel-disabled .panel-title a {
    color: #9aa0a6;
    cursor: not-allowed;
}

.bookingembed-panel-disabled .panel-heading {
    background: #f5f5f5;
}

.bookingembed-preview-frame iframe {
    display: block;
    margin: 0 auto;
    max-width: none;
}

.bookingembed-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    z-index: 1051;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

    .bookingembed-preview-modal.is-wide {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
    }

.bookingembed-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    cursor: default;
    background: var(--bookingembed-preview-header-bg);
    color: var(--bookingembed-preview-header-fg);
}

    .bookingembed-preview-header .modal-titlebar-buttons {
        float: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        order: 2;
    }

    .bookingembed-preview-header .modal-titlebar-text {
        order: 1;
    }

    .bookingembed-preview-header .modal-titlebar-buttons .btn {
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .bookingembed-preview-header #embed-preview-close {
        width: 34px;
        min-width: 34px;
        padding: 0;
    }

.bookingembed-preview-title {
    font-weight: 600;
    color: var(--bookingembed-preview-title-fg);
}

.bookingembed-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bookingembed-preview-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bookingembed-preview-action-border);
    background: var(--bookingembed-preview-action-bg);
    color: var(--bookingembed-preview-action-fg);
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.2;
}

    .bookingembed-preview-action:hover,
    .bookingembed-preview-action:focus {
        background: var(--bookingembed-preview-action-hover-bg);
        color: var(--bookingembed-preview-action-hover-fg);
    }

    .bookingembed-preview-action .glyphicon {
        font-size: 16px;
    }

.bookingembed-preview-body {
    padding: 12px 16px 16px;
    overflow-x: hidden;
    overflow-y: hidden;
    height: calc(100vh - 58px);
    max-height: calc(100vh - 58px);
}

.bookingembed-preview-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
    height: 100%;
    max-height: calc(100vh - 92px);
    min-width: 0;
}

.bookingembed-preview-settings {
    flex: 0 0 220px;
    max-width: 220px;
    overflow: hidden;
    overflow-y: auto;
    max-height: 100%;
    padding-right: 10px;
}

.bookingembed-preview-settings-columns {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    min-width: 0;
}

.bookingembed-preview-settings-main {
    flex: 0 0 220px;
    max-width: 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.bookingembed-preview-settings .form-group {
    margin-bottom: 32px;
}

.bookingembed-preview-settings-main .form-group,
.bookingembed-preview-settings-main .bookingembeds-section,
.bookingembed-preview-settings-main .bookingembeds-switch-group {
    margin-bottom: 20px;
}

.bookingembed-preview-settings-main label,
.bookingembed-preview-settings-main .switch-text {
    line-height: 1.5;
}

.bookingembed-preview-settings-main #public-bookingfinder-weekday-settings-preview.bookingfinder-chip-group,
.bookingembed-preview-settings-main #public-bookingfinder-daypart-settings-preview.bookingfinder-chip-group,
#public-bookingfinder-weekday-settings.bookingfinder-chip-group,
#public-bookingfinder-daypart-settings.bookingfinder-chip-group,
#public-bookingfinder-weekday-settings-preview.bookingfinder-chip-group,
#public-bookingfinder-daypart-settings-preview.bookingfinder-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bookingembed-preview-settings-main #public-bookingfinder-daypart-settings-preview.bookingfinder-chip-group,
#public-bookingfinder-weekday-settings.bookingfinder-chip-group,
#public-bookingfinder-weekday-settings-preview.bookingfinder-chip-group,
#public-bookingfinder-daypart-settings.bookingfinder-chip-group,
#public-bookingfinder-daypart-settings-preview.bookingfinder-chip-group {
    gap: 3px !important;
}

.bookingembed-preview-settings-main #public-bookingfinder-weekday-settings-preview .bookingfinder-chip {
    min-width: 46px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bookingembed-bookingoptions #public-bookingfinder-weekday-settings-preview .bookingfinder-chip,
.bookingembed-bookingoptions #public-bookingfinder-weekday-settings .bookingfinder-chip {
    min-width: 46px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bookingembed-bookingoptions,
.bookingembed-preview-bookingoptions {
    display: block;
}

.bookingembed-option-group {
    display: block;
    margin-bottom: 20px;
}

    .bookingembed-option-group .form-group {
        margin-bottom: 0 !important;
    }

    .bookingembed-option-group .bookingembeds-switch-group,
    .bookingembed-option-group .bookingembeds-section {
        margin: 0 !important;
    }

.bookingembed-preview-colors-heading {
    margin-top: 50px;
}

.bookingembed-preview-frame {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 0;
    max-width: 100%;
    padding-right: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

@supports (height: 100dvh) {

    .bookingembed-preview-modal,
    .bookingembed-preview-modal.is-wide {
        height: 100dvh;
        max-height: 100dvh;
    }

    .bookingembed-preview-body {
        height: calc(100dvh - 58px);
        max-height: calc(100dvh - 58px);
    }

    .bookingembed-preview-layout {
        max-height: calc(100dvh - 92px);
    }
}

.bookingembed-preview-frame iframe {
    display: block;
    overflow: hidden;
    border: 0;
    outline: none;
    max-width: 100%;
}

.bookingembed-filepicker-modal {
    z-index: 2001 !important;
}

.bookingembed-filepicker-backdrop {
    z-index: 2000 !important;
}

.hugerte-filepicker-modal {
    z-index: 2003 !important;
}

.hugerte-filepicker-backdrop {
    z-index: 2002 !important;
}

body.bookingembed-preview-open {
    overflow: hidden;
}

@media (max-width: 991px) {

    .bookingembeds-layout .bookingembeds-list-column,
    .bookingembeds-layout .bookingembeds-grid-column {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
    }

    .bookingembed-selection-row {
        flex-wrap: wrap;
        align-items: stretch;
    }
}

.appointmenttypes-grid-column {
    border: none;
    padding: 8px 0;
}

@media (max-width: 767px) {

    .appointmenttypes-layout .appointmenttypes-list-column,
    .appointmenttypes-layout .appointmenttypes-grid-column {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .apptype-card .rs-tabs {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0;
        margin-bottom: 12px;
    }

    .rs-tab {
        margin: 0;
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
    }

        .rs-tab.is-active {
            border-bottom-color: #d8d8d8;
        }

            .rs-tab.is-active::before {
                left: 0;
                right: 0;
                top: 0;
                height: 2px;
                border-radius: 4px 4px 0 0;
            }

    .apptype-card-body {
        padding: 14px;
    }

    .switch-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .appointmenttypes-leadtime-option {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .appointmenttypes-leadtime-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .appointmenttypes-leadtime-inputs {
        width: 100%;
        gap: 8px;
    }

    #type-leadtime-hours-row,
    #type-leadtime-rounding-row,
    #type-leadtime-filter-row {
        width: 100%;
    }

    #type-leadtime-filter {
        width: 100%;
        min-width: 0;
    }

    .appointmenttypes-leadtime-rounding {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
    }

    .appointmenttypes-leadtime-rounding-group {
        width: 100%;
        flex-wrap: wrap;
    }

    .appointmenttypes-buffer-row,
    .appointmenttypes-quota-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 20px;
    }

    .bookingembed-selection-row {
        flex-wrap: wrap;
    }

    .bookingembed-selection-dropdown {
        min-width: 0;
        width: 100%;
    }

    .bookingembed-selection-reset {
        width: 100%;
        min-width: 0;
    }

    .bookingembed-list-actions {
        flex-wrap: wrap;
    }

        .bookingembed-list-actions .btn {
            width: 100%;
        }
}

.booking-profile-shell {
    --booking-profile-primary: var(--booking-landing-primary, var(--booking-accent, #3979c9));
    --booking-profile-page: var(--booking-bg, #f4f7fb);
    --booking-profile-surface: var(--booking-surface, #ffffff);
    --booking-profile-text: var(--booking-text, #1f3045);
    --booking-profile-muted: color-mix(in srgb, var(--booking-profile-text) 62%, #ffffff);
    --booking-profile-border: color-mix(in srgb, var(--booking-profile-primary) 18%, #d8e1ed);
    --booking-profile-border-soft: color-mix(in srgb, var(--booking-profile-primary) 11%, #e8eef5);
    --booking-profile-primary-soft: color-mix(in srgb, var(--booking-profile-primary) 10%, var(--booking-profile-surface));
    --booking-profile-shadow-sm: 0 8px 24px rgba(31, 48, 69, .06);
    --booking-profile-shadow-md: 0 16px 38px rgba(31, 48, 69, .09);
    --booking-profile-card-radius: var(--booking-container-radius, 20px);
    --booking-profile-field-radius: var(--booking-field-radius, 14px);
    --booking-profile-section-space: var(--booking-profile-section-gap, 28px);
    --brand: var(--booking-profile-primary);
    --text: var(--booking-profile-text);
    --date-radius: var(--booking-profile-field-radius);
    --bookingfinder-slot-active-bg: var(--booking-profile-primary);
    --bookingfinder-slot-active-border: var(--booking-profile-primary);
    --bookingfinder-slot-active-fg: var(--booking-accent-text, #ffffff);
    --date-icon-color: var(--booking-profile-primary);
    --date-control-bg: var(--booking-profile-surface);
    --date-control-border: var(--booking-profile-border);
    --date-control-hover-bg: var(--booking-profile-primary-soft);
    --date-control-hover-border: var(--booking-profile-primary);
    --date-control-hover-ring: 0 8px 20px color-mix(in srgb, var(--booking-profile-primary) 14%, transparent);
    --date-control-focus-ring: 0 0 0 3px color-mix(in srgb, var(--booking-profile-primary) 22%, transparent);
    background: var(--booking-profile-page);
    color: var(--booking-profile-text);
    padding: 40px 0 52px;
}

.bookingfinder-public.booking-profile-without-outer-frame {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    max-width: none;
    overflow: visible;
    padding: 0;
    width: 100%;
}

.bookingfinder-public.booking-profile-outer-frame {
    background: transparent;
}

.bookingfinder-public.booking-profile-without-outer-frame .booking-profile-shell {
    padding-left: 24px;
    padding-right: 24px;
}

.booking-profile-shell .lp-container {
    max-width: 1320px;
}

.booking-profile-layout {
    display: grid;
    grid-template-areas:
        "main"
        "info";
    gap: var(--booking-profile-section-space);
}

.booking-profile-main {
    grid-area: main;
    display: grid;
    grid-template-areas:
        "header"
        "booking";
    gap: var(--booking-profile-section-space);
    min-width: 0;
}

.booking-profile-header {
    grid-area: header;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 224px;
    padding: clamp(30px, 3vw, 40px) clamp(40px, 4vw, 48px);
    border: 1px solid var(--booking-profile-border-soft);
    border-radius: var(--booking-profile-card-radius);
    background-color: var(--booking-profile-header-background, color-mix(in srgb, var(--booking-profile-primary) 10%, var(--booking-profile-surface)));
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: var(--booking-profile-shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--booking-profile-surface) 72%, transparent);
    color: var(--booking-profile-header-text, var(--booking-profile-text));
    overflow: hidden;
}

.booking-profile-header::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background:
        radial-gradient(ellipse at 88% 12%, color-mix(in srgb, var(--booking-profile-primary) 25%, transparent), transparent 44%),
        radial-gradient(ellipse at 66% 110%, color-mix(in srgb, var(--booking-profile-primary) 10%, transparent), transparent 50%),
        linear-gradient(120deg, color-mix(in srgb, var(--booking-profile-surface) 42%, transparent), color-mix(in srgb, var(--booking-profile-surface) 8%, transparent));
}

.booking-profile-header--with-image::before {
    background: linear-gradient(102deg, color-mix(in srgb, var(--booking-profile-surface) 96%, transparent) 0%, color-mix(in srgb, var(--booking-profile-surface) 86%, transparent) 54%, color-mix(in srgb, var(--booking-profile-surface) 34%, transparent) 100%);
}

.booking-profile-header-content {
    position: relative;
    z-index: 1;
    max-width: 620px;
    padding: 0;
}

.booking-profile-logo {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 56px;
    margin-bottom: 12px;
}

.booking-profile-provider,
.booking-profile-subheadline,
.booking-profile-intro {
    margin: 0 0 10px;
    color: inherit;
}

.booking-profile-header .booking-profile-provider {
    margin-bottom: 14px;
    opacity: .74;
}

.booking-profile-provider,
.booking-profile-info-provider {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.booking-profile-headline {
    max-width: 15ch;
    margin: 0 0 16px;
    color: inherit;
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.07;
}

.booking-profile-headline--provider {
    max-width: 18ch;
}

.booking-profile-subheadline {
    max-width: 48ch;
    font-size: 1.12em;
    font-weight: 600;
    line-height: 1.5;
}

.booking-profile-intro {
    max-width: 54ch;
    color: inherit;
    line-height: 1.68;
    opacity: .78;
}

.booking-profile-info {
    grid-area: info;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content";
    gap: 24px;
    min-width: 0;
    padding: 28px;
    border: 1px solid var(--booking-profile-border-soft);
    border-radius: var(--booking-profile-card-radius);
    background: var(--booking-profile-surface);
    box-shadow: var(--booking-profile-shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--booking-profile-surface) 82%, transparent);
}

.booking-profile-info--with-image {
    grid-template-areas:
        "image"
        "content";
}

.booking-profile-image {
    grid-area: image;
    width: 100%;
    height: clamp(188px, 24vw, 260px);
    border: 1px solid var(--booking-profile-border-soft);
    border-radius: var(--booking-profile-field-radius);
    object-fit: cover;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--booking-profile-primary) 10%, transparent);
}

.booking-profile-info-content {
    grid-area: content;
    min-width: 0;
}

.booking-profile-info-title {
    margin: 0 0 12px;
    color: var(--booking-profile-text);
    font-size: 1.35em;
    font-weight: 700;
    letter-spacing: -.02em;
}

.booking-profile-info-provider {
    margin: 0 0 14px;
    color: color-mix(in srgb, var(--booking-profile-primary) 76%, var(--booking-profile-text));
}

.booking-profile-info-text {
    margin: 0;
    color: var(--booking-profile-muted);
    line-height: 1.7;
    overflow-wrap: anywhere;
    white-space: normal;
}

.booking-profile-info-text > :first-child {
    margin-top: 0;
}

.booking-profile-info-text > :last-child {
    margin-bottom: 0;
}

.booking-profile-info-text > ul,
.booking-profile-info-text > ol {
    padding-left: 1.4em;
}

.booking-profile-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--booking-profile-border-soft);
    font-size: 13px;
}

.booking-profile-legal-links a {
    color: var(--booking-profile-primary);
    font-weight: 600;
}

.booking-profile-booking-card {
    grid-area: booking;
    min-width: 0;
    padding: var(--booking-embed-inner-padding, 32px);
    border: 1px solid var(--booking-profile-border-soft);
    border-radius: var(--booking-profile-card-radius);
    background: var(--booking-profile-surface);
    box-shadow: var(--booking-profile-shadow-md), inset 0 1px 0 color-mix(in srgb, var(--booking-profile-surface) 82%, transparent);
}

.booking-profile-booking-card .booking-embed-flow {
    max-width: none;
}

.booking-profile-booking-card #embed-date-group {
    position: relative;
}

.booking-profile-booking-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--booking-profile-border-soft);
    color: var(--booking-profile-text);
}

.booking-profile-booking-heading .glyphicon {
    color: var(--booking-profile-primary);
    font-size: 18px;
}

.booking-profile-booking-heading h2 {
    margin: 0;
    font-size: 1.45em;
    font-weight: 700;
    letter-spacing: -.02em;
}

.booking-profile-booking-card .booking-embed-flow label {
    color: var(--booking-profile-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
}

.booking-profile-booking-card .lp-date {
    min-height: 60px;
    padding: 14px 18px;
    border-color: var(--booking-profile-border);
    border-radius: var(--booking-profile-field-radius);
    background: linear-gradient(135deg, var(--booking-profile-surface), color-mix(in srgb, var(--booking-profile-primary) 4%, var(--booking-profile-surface)));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--booking-profile-primary) 6%, transparent);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.booking-profile-booking-card .lp-date:hover {
    border-color: var(--booking-profile-primary);
    background: var(--booking-profile-primary-soft);
    box-shadow: var(--date-control-hover-ring);
}

.booking-profile-booking-card .lp-date:focus-visible {
    outline: none;
    box-shadow: var(--date-control-focus-ring);
}

.booking-profile-booking-card .embed-slot-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: -2px 0 14px;
}

.booking-profile-booking-card .embed-slot-nav-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--booking-profile-primary) 24%, var(--booking-profile-border));
    border-radius: 999px;
    background: transparent;
    color: var(--booking-profile-primary);
    font-size: 13px;
    line-height: 1;
}

.booking-profile-booking-card .embed-slot-nav-button .glyphicon {
    display: inline-flex;
    align-items: center;
    height: 16px;
    line-height: 16px;
}

.booking-profile-booking-card .embed-slot-nav-button .embed-slot-nav-label {
    display: inline-flex;
    align-items: center;
    height: 16px;
    line-height: 16px;
    transform: translateY(1px);
}

.booking-profile-booking-card .embed-slot-nav-button:not(:disabled):hover {
    border-color: var(--booking-profile-primary);
    background: color-mix(in srgb, var(--booking-profile-primary) 12%, transparent);
    color: var(--booking-profile-primary);
    text-decoration: none;
}

.booking-profile-booking-card .embed-slot-nav-button:not(:disabled):focus-visible {
    border-color: var(--booking-profile-primary);
    background: color-mix(in srgb, var(--booking-profile-primary) 12%, transparent);
    box-shadow: var(--date-control-focus-ring);
    color: var(--booking-profile-primary);
    text-decoration: none;
}

.booking-profile-booking-card .embed-slot-chip {
    min-height: 52px;
    padding: 13px 16px;
    width: var(--bookingfinder-slot-chip-width, auto);
    max-width: var(--bookingfinder-slot-chip-width, 100%);
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: var(--bookingfinder-slot-bg, var(--booking-profile-surface));
    border: 1px solid var(--bookingfinder-slot-border, var(--booking-profile-border));
    border-radius: var(--bookingfinder-slot-radius, var(--booking-profile-field-radius));
    color: var(--booking-profile-text);
    font-size: 15px;
    font-weight: 600;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}

.booking-profile-booking-card .embed-slots-grid {
    display: grid;
    grid-template-columns: repeat(var(--bookingfinder-slot-columns-effective, var(--bookingfinder-slot-columns, 3)), minmax(var(--bookingfinder-slot-chip-width), 1fr));
    gap: var(--bookingfinder-slot-gap, 12px);
    justify-content: stretch;
}

.booking-profile-booking-card .embed-slot-chip:not(.active):not(.is-selected):hover {
    border-color: var(--booking-profile-primary);
    background-color: var(--booking-profile-primary-soft);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--booking-profile-primary) 13%, transparent);
    transform: translateY(-1px);
}

.booking-profile-booking-card .embed-slot-chip.active,
.booking-profile-booking-card .embed-slot-chip.is-selected {
    background-color: var(--bookingfinder-slot-active-bg, var(--booking-profile-primary));
    border-color: var(--bookingfinder-slot-active-border, var(--booking-profile-primary));
    color: var(--bookingfinder-slot-active-fg, var(--booking-accent-text, #ffffff));
    box-shadow: 0 10px 20px color-mix(in srgb, var(--booking-profile-primary) 22%, transparent);
}

.booking-profile-booking-card .embed-slot-chip.bookingfinder-slot-chip-hard-risk,
.booking-profile-booking-card .embed-slot-chip.bookingfinder-slot-chip-hard-safe {
    background-color: var(--bookingfinder-slot-bg, var(--booking-profile-surface));
    border-color: var(--bookingfinder-slot-border, var(--booking-profile-border));
    color: var(--booking-profile-text);
}

.booking-profile-booking-card .embed-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.booking-profile-booking-card .embed-filter-chip {
    border: 1px solid var(--bookingfinder-slot-border, var(--booking-profile-border));
    border-radius: var(--booking-profile-field-radius);
    background-color: var(--booking-profile-surface);
    color: var(--booking-profile-text);
}

.booking-profile-booking-card .embed-filter-chip.active {
    border-color: var(--booking-profile-primary);
    background-color: var(--booking-profile-primary);
    color: var(--booking-accent-text, #ffffff);
}

.booking-profile-booking-card .form-control,
.booking-profile-booking-card .btn:not(.embed-slot-chip) {
    border-radius: var(--booking-profile-field-radius);
}

.booking-profile-booking-card .form-control {
    min-height: 48px;
    width: 100%;
    border-color: var(--booking-profile-border);
    background: var(--booking-profile-surface);
    box-shadow: none;
}

.booking-profile-booking-card .form-control::placeholder {
    color: color-mix(in srgb, var(--booking-profile-muted) 74%, transparent);
}

.booking-profile-booking-card .form-control:focus,
.booking-profile-booking-card .mydropdown button[name=dropdownbtn]:focus {
    border-color: var(--booking-profile-primary);
    box-shadow: var(--date-control-focus-ring);
}

.booking-profile-booking-card .mydropdown button[name=dropdownbtn] {
    min-height: 48px;
    width: 100%;
    border-color: var(--booking-profile-border);
    border-radius: var(--booking-profile-field-radius);
    background: var(--booking-profile-surface);
    color: var(--booking-profile-text);
}

.booking-profile-booking-card .booking-embed-flow .form-group {
    margin-bottom: var(--booking-field-gap, 18px);
}

.booking-profile-booking-card .bookingfinder-selected-slot:not(:empty) {
    margin: 4px 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--booking-profile-border-soft);
    border-radius: var(--booking-profile-field-radius);
    background: var(--booking-profile-primary-soft);
    color: var(--booking-profile-text);
}

.booking-profile-booking-card .embed-actions {
    display: block;
    width: 100%;
    margin-top: 24px;
}

.booking-profile-booking-card .embed-actions .btn {
    min-height: 54px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
}

.booking-profile-booking-card .embed-actions .btn-primary {
    display: block;
    width: 100%;
    border-color: var(--booking-profile-primary);
    background-color: var(--booking-profile-primary);
    color: var(--booking-accent-text, #ffffff);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--booking-profile-primary) 24%, transparent);
}

.booking-profile-booking-card .embed-actions .btn-primary:not(:disabled):hover,
.booking-profile-booking-card .embed-actions .btn-primary:not(:disabled):focus {
    border-color: var(--booking-profile-primary);
    background-color: color-mix(in srgb, var(--booking-profile-primary) 88%, var(--booking-profile-text));
    color: var(--booking-accent-text, #ffffff);
}

@media (min-width: 1200px) {
    .booking-profile-layout {
        grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
        grid-template-areas: "info main";
        column-gap: var(--booking-profile-section-space);
        align-items: start;
    }

    .booking-profile-layout--without-info {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main";
    }

    .booking-profile-info {
        display: flex;
        height: auto;
        align-self: start;
        flex-direction: column;
    }

    .booking-profile-info-content {
        display: flex;
        min-height: 0;
        flex-direction: column;
    }

    .booking-profile-legal-links {
        margin-top: 24px;
        padding-top: 16px;
    }

    .booking-profile-image {
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .booking-profile-shell {
        padding: 20px 0 32px;
    }

    .bookingfinder-public.booking-profile-without-outer-frame .booking-profile-shell {
        padding-left: 10px;
        padding-right: 10px;
    }

    .booking-profile-header,
    .booking-profile-info,
    .booking-profile-booking-card {
        border-radius: min(var(--booking-profile-card-radius), 18px);
    }

    .booking-profile-header {
        min-height: 0;
        padding: 28px 24px;
    }

    .booking-profile-info,
    .booking-profile-booking-card {
        padding: 24px;
    }

    .booking-profile-info--with-image {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "image"
            "content";
        align-items: start;
        gap: 16px;
    }

    .booking-profile-info--with-image .booking-profile-image {
        align-self: auto;
        height: clamp(188px, 54vw, 260px);
        min-height: 0;
        margin-bottom: 0;
    }

    .booking-profile-info--with-image .booking-profile-info-content {
        min-width: 0;
    }

    .booking-profile-info--with-image .booking-profile-info-text,
    .booking-profile-info--with-image .booking-profile-legal-links a {
        overflow-wrap: anywhere;
    }

    .booking-profile-info--mobile-image-disabled {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "content";
    }

    .booking-profile-info--mobile-image-disabled .booking-profile-image {
        display: none;
    }

    .booking-profile-booking-heading {
        margin-bottom: 20px;
    }

    .booking-profile-booking-card .embed-slot-nav {
        flex-wrap: wrap;
    }

    .booking-profile-booking-card .embed-slot-nav-button {
        flex: 1 1 140px;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
    }

    .booking-profile-booking-card .embed-slot-nav-button .embed-slot-nav-label {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .booking-profile-booking-card .embed-slots-grid {
        grid-template-columns: repeat(var(--bookingfinder-slot-columns-mobile-effective, var(--bookingfinder-slot-columns-mobile, 2)), minmax(var(--bookingfinder-slot-chip-width), 1fr));
        justify-content: stretch;
    }
}

.appointmenttype-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.appointmenttype-actions-top {
    margin-top: 0;
    margin-bottom: 12px;
}

.appointmenttype-actions #delete-type {
    background-color: #fff;
    border-color: #ccc;
    color: var(--settings-action-fg);
}

.appointmenttype-actions #new-type {
    background-color: #fff;
    border-color: #ccc;
    color: var(--settings-action-fg);
}

.appointmenttype-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.form-usage-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.appointmenttype-chip {
    border: 1px solid var(--settings-chip-border);
    border-radius: 18px;
    background-color: var(--settings-chip-bg);
    color: var(--settings-chip-fg);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    padding: 6px 12px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

    .appointmenttype-chip:hover,
    .appointmenttype-chip:focus {
        border-color: var(--settings-chip-hover-border);
        outline: none;
    }

    .appointmenttype-chip.is-selected {
        background-color: var(--settings-chip-active-bg);
        border-color: var(--settings-chip-active-border);
        color: var(--settings-chip-active-fg);
    }

@media (min-width: 768px) {

    .appointmenttype-chip {
        width: 100%;
    }
}

.appointmenttypes-grid .form-group,
.appointmenttypes-grid .checkbox {
    margin: 0 !important;
    min-height: 0 !important;
}

.appointmenttypes-grid[data-tab="reminders"] .form-group {
    margin-bottom: 20px !important;
}

.appointmenttypes-grid[data-tab="reminders"] .remindercontainer {
    margin: 0 0 12px !important;
}

.appointmenttypes-grid[data-tab="reminders"] hr {
    display: none;
}

.appointmenttypes-grid[data-tab="reminders"] .remindercontainer li {
    margin-bottom: 10px;
}

.appointmenttypes-grid[data-tab="reminders"] .appointmenttypes-alerts hr {
    display: none;
}

.appointmenttypes-grid[data-tab="reminders"] .appointmenttypes-remind-guests hr {
    display: none;
}

.appointmenttypes-grid[data-tab="reminders"] .appointmenttypes-alerts,
.appointmenttypes-grid[data-tab="reminders"] .appointmenttypes-remind-guests {
    margin-bottom: 20px;
}

.appointmenttypes-grid[data-tab="reminders"] #appointmenttypes-reminders-accordion .panel-body > .form-group + .form-group {
    margin-top: 18px !important;
}

.appointmenttypes-grid[data-tab="reminders"] #appointmenttypes-reminders-accordion .appointmenttype-confirmation-settings .form-group + .form-group {
    margin-top: 18px !important;
}

.appointmenttypes-grid .checkbox {
    padding-top: 0 !important;
}

.appointmenttypes-grid .appointmenttypes-checkboxes .checkbox {
    margin: 0 0 10px;
    min-height: 0;
    padding-top: 0;
}

.appointmenttypes-grid .appointmenttypes-grid-full {
    grid-column: 1 / -1;
}

.appointmenttypes-grid .appointmenttypes-main-resource {
    margin-bottom: 0 !important;
}

.appointmenttypes-grid[data-tab="details"] .appointmenttypes-main-resource {
    margin-bottom: 0 !important;
}

.appointmenttypes-grid[data-tab="details"] #appointmenttypes-details-accordion {
    margin-top: 18px;
}

#appointmenttypes-root .panel-heading.clickable .appointmenttypes-accordion-chevron {
    font-size: 10px;
    color: #5d87c1;
    transition: transform 0.15s ease-in-out;
}

#appointmenttypes-root .panel-heading.clickable:not(.collapsed) .appointmenttypes-accordion-chevron {
    transform: rotate(180deg);
}

.appointmenttypes-grid[data-tab="details"] #appointmenttypes-details-collapse .panel-body {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.appointmenttypes-grid[data-tab="details"] #appointmenttypes-details-collapse .appointmenttypes-section-public {
    margin-top: 2px;
}

.appointmenttypes-grid[data-tab="details"] #appointmenttypes-details-collapse .appointmenttypes-section-public > .form-group + #type-public-booking-fields {
    margin-top: 18px;
}

.appointmenttypes-section-public #type-public-booking-fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.appointmenttypes-grid[data-tab="buffers"] #appointmenttypes-bookingstrategy-accordion .panel + .panel {
    margin-top: 14px;
}

.appointmenttypes-grid[data-tab="buffers"] #appointmenttypes-bookingstrategy-accordion .panel-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.appointmenttypes-grid[data-tab="buffers"] #appointmenttypes-bookingstrategy-accordion .appointmenttypes-buffer-row,
.appointmenttypes-grid[data-tab="buffers"] #appointmenttypes-bookingstrategy-accordion .appointmenttypes-quota-row {
    margin: 0;
}

.appointmenttypes-grid[data-tab="buffers"] #appointmenttypes-bookingstrategy-accessquota-collapse .appointmenttypes-quota-section-intro {
    margin-top: 24px;
}

.appointmenttypes-description-header {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.appointmenttypes-description textarea[readonly] {
    background-color: #f9f9f9;
    cursor: pointer;
}

.required-marker {
    color: #d9534f;
    font-weight: 700;
    margin-left: 6px;
}

.pool-type-picker-container {
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fafafa;
    padding: 10px 12px;
}

.pool-type-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0;
    max-height: 220px;
    overflow-y: auto;
}

.pool-type-list .pool-type-chip {
    margin: 0 12px 10px 0;
}

.pool-type-chip.is-disabled,
.pool-type-chip:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    background: var(--leadtime-chip-bg);
    border-color: #cccccc;
}

.pool-assigned-types {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0;
}

.pool-assigned-type-item {
    margin: 0 12px 10px 0;
}

.pool-assigned-type-link {
    cursor: pointer;
}

.pool-assigned-type-link:hover,
.pool-assigned-type-link:focus {
    outline: none;
}

.appointmenttypes-leadtime {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.appointmenttypes-leadtime-rounding {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: center;
}

.appointmenttypes-leadtime-rounding-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.appointmenttypes-leadtime-rounding-label {
    color: #efefef;
    font-size: 12px;
    min-width: 70px;
}

.appointmenttypes-leadtime-rounding-dropdown {
    width: 120px;
    min-width: 120px;
}

.appointmenttypes-leadtime-rounding-direction {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.appointmenttypes-leadtime-controls .form-control:disabled,
.appointmenttypes-leadtime-controls input[disabled] {
    background-color: var(--leadtime-disabled-bg);
    color: var(--leadtime-disabled-fg);
    border-color: var(--leadtime-disabled-border);
}

.appointmenttypes-leadtime-controls .mydropdown button[disabled] {
    background-color: var(--leadtime-disabled-bg);
    color: var(--leadtime-disabled-fg);
    border-color: var(--leadtime-disabled-border);
    opacity: 1;
}

.appointmenttypes-leadtime-rounding-direction input[disabled] + .leadtime-chip {
    background: var(--leadtime-chip-bg);
    border-color: var(--leadtime-disabled-border);
    color: var(--leadtime-disabled-fg);
    cursor: not-allowed;
    opacity: 1;
}

.appointmenttypes-leadtime-rounding-direction .leadtime-chip {
}

.appointmenttypes-leadtime-controls .form-control {
    height: 34px;
}

.appointmenttypes-leadtime-controls .mydropdown .dropdown-toggle {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.appointmenttypes-leadtime-controls .leadtime-chip {
    display: inline-flex;
    align-items: center;
}

.appointmenttypes-leadtime-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.appointmenttypes-leadtime-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 34px;
    gap: 16px;
}

.appointmenttypes-leadtime-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
}

.appointmenttypes-leadtime-option {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 20px;
}

.appointmenttypes-leadtime-toggle {
    min-width: 0;
    display: flex;
    align-items: center;
    height: 34px;
}

.switch-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.switch-row.is-disabled,
.switch-row.is-disabled .switch,
.switch-row.is-disabled .switch-text,
.switch-row.is-disabled .slider {
    cursor: not-allowed !important;
}

.switch-text {
    margin: 0;
    font-weight: 400;
}

.switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    margin-bottom: 0;
    width: calc(44px * var(--switch-scale));
    height: calc(24px * var(--switch-scale));
}

    .switch input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--switch-track-bg);
    border: 1px solid var(--switch-track-border);
    transition: .2s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: calc(18px * var(--switch-scale));
        width: calc(18px * var(--switch-scale));
        left: calc(3px * var(--switch-scale));
        bottom: calc(2px * var(--switch-scale));
        background-color: var(--switch-thumb-bg);
        transition: .2s;
    }

.switch input:checked + .slider {
    background-color: var(--switch-track-checked-bg);
    border-color: var(--switch-track-checked-border);
}

.switch input:focus + .slider {
    box-shadow: 0 0 1px var(--switch-focus-shadow);
}

.switch input:checked + .slider:before {
    transform: translateX(calc(20px * var(--switch-scale)));
}

.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.appointmenttypes-leadtime-choice {
    display: inline-flex;
    position: relative;
}

    .appointmenttypes-leadtime-choice > input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        margin: 0;
        pointer-events: none;
    }

.leadtime-chip {
    display: inline-flex;
    align-items: center;
    height: 34px;
    line-height: 1;
    padding: 6px 14px;
    border: 1px solid #cccccc;
    border-radius: 16px;
    cursor: pointer;
    background: var(--leadtime-chip-bg);
    font-weight: 400;
}

    .leadtime-chip.is-selected {
        background: var(--leadtime-chip-selected-bg);
        border-color: var(--leadtime-chip-selected-border);
        color: var(--leadtime-chip-selected-fg);
    }

    .leadtime-chip.is-locked,
    .leadtime-chip:disabled {
        cursor: not-allowed;
        opacity: 0.65;
    }

.appointmenttypes-leadtime-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

#type-leadtime-hours-row,
#type-leadtime-rounding-row,
#type-leadtime-filter-row {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

#type-leadtime-hours {
    width: 10ch;
    max-width: 100%;
}

#type-buffer-before,
#type-buffer-after {
    width: 10ch;
    max-width: 100%;
}

#type-quota-active,
#type-quota-days,
#type-quota-max,
#type-search-horizon-days,
#type-hardcap-day,
#type-hardcap-week {
    width: 10ch;
    max-width: 100%;
}

.appointmenttypes-buffer-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 32px;
    margin-top: 20px;
}

    .appointmenttypes-buffer-row .form-group {
        min-width: 0;
    }

.appointmenttypes-quota-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 32px;
    margin-top: 20px;
}

    .appointmenttypes-quota-row .form-group {
        min-width: 0;
    }

#type-leadtime-hours-row {
    min-height: 38px;
}

#type-leadtime-filter-row {
    min-height: 38px;
}

#type-leadtime-filter {
    width: 50%;
    min-width: 220px;
}

    #type-leadtime-filter .btn-group {
        width: 100%;
        max-width: 100%;
    }

    #type-leadtime-filter .btn-group-wide {
        width: 100%;
        max-width: 100%;
    }

    #type-leadtime-filter .dropdown-toggle {
        width: 100%;
        text-align: left;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

.appointmenttypes-leadtime-choice input:checked + .leadtime-chip {
    background: var(--leadtime-chip-selected-bg);
    border-color: var(--leadtime-chip-selected-border);
    color: var(--leadtime-chip-selected-fg);
}

.appointmenttypes-leadtime-rounding-direction .appointmenttypes-leadtime-choice input:checked + .leadtime-chip {
    background: var(--leadtime-rounding-selected-bg);
    border-color: var(--leadtime-rounding-selected-border);
    color: var(--leadtime-rounding-selected-fg);
}

.appointmenttypes-leadtime-rounding-direction .leadtime-chip {
    padding: 0 4px !important;
    line-height: 1.1;
    height: 26px;
    display: inline-flex;
    align-items: center;
}

input[type=checkbox],
input[type=checkbox]:checked {
    height: 16px;
    width: 16px;
    cursor: pointer;
    margin-top: 2px; /*betrifft erstmal alle checkboxes, soll aber wahrscheinlich nur für die default boxes gelten*/

    vertical-align: sub;
}

/*input[type=checkbox].neutral-input {

    background-color: gray;

    color: var(--text-color);

    -webkit-appearance: none;

    -moz-appearance: none;

}

input[type=checkbox].neutral-input:checked {

    background-color: transparent;

    -webkit-appearance: none;

    -moz-appearance: none;

}*/

.red {
    color: red !important;
}

.ok-enabled {
    /**Bootstrap success*/

    color: rgb(92, 184, 92) !important;
}

.ok-disabled {
    /**Bootstrap default*/

    color: rgb(51, 122, 183) !important;
}

.btn-danger-inverse {
    background-color: transparent;
    color: var(--btn-danger-bg);
}

.glyphicon.btn-danger-icon {
    color: #fff;
}

.anker-sort {
    color: currentColor;
}

    .anker-sort[data-isactive="0"] span {
        display: none;
    }

    .anker-sort[data-isactive="1"][data-desc="0"] span[name="desc"] {
        display: none;
    }

    .anker-sort[data-isactive="1"][data-desc="0"] span[name="asc"] {
        display: inline;
    }

    .anker-sort[data-isactive="1"][data-desc="1"] span[name="desc"] {
        display: inline;
    }

    .anker-sort[data-isactive="1"][data-desc="1"] span[name="asc"] {
        display: none;
    }

    .anker-sort:hover {
        color: Highlight;
    }

.sortbtn {
    background-color: inherit;
    border: none;
    font-size: 0.75em;
}

    .sortbtn span {
        top: -1px;
    }

        .sortbtn span[data-active="0"] {
            color: darkgray;
        }

        .sortbtn span[data-active="1"] {
            color: var(--primary-bg);
        }

a.foreign-account-home {
    /*margin-top: 16px;*/

    color: #888;
    padding: 7px 14px 7px 14px;
    margin-top: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.widget {
    min-height: 100px;
    min-width: 150px;
    padding: 10px 10px 0 10px;
    /*text-align: center;*/

    border: 2px solid #eee;
    border-radius: 10px 10px;
    margin-bottom: 10px;
}

.widget-header {
    font-size: 18px;
}

.widget-body {
    font-size: 0.9em;
}

.widget a:link,
.widget a:hover,
.widget a:focus,
.widget a:active,
.widget a:visited {
    text-decoration: none;
}

/*Element, das dem User Eingabefehler anzeigt. Die Klasse wird dem Element immer dann hinzugefügt, wenn es das asp-validation-for Attribut hat.*/

.field-validation-error {
    background-color: antiquewhite;
    font-size: 0.9em;
    padding: 4px;
}

.booking-embed-flow .field-validation-error:not([hidden]) {
    color: #a94442;
    background-color: rgba(217, 83, 79, 0.10);
    border: 1px solid rgba(217, 83, 79, 0.28);
    border-radius: 4px;
    padding: 5px 4px 1px;
    margin-top: 3px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 26px;
}

/*Snackbar ist ein Popover am unteren Bildschirmrand. Ideal für kurze Erfolgsmeldungen */

#snackbar, #snackbar-error {
    display: none;
    min-width: 250px; /* Set a default minimum width */
    max-width: min(90vw, 960px);

    text-align: center; /* Centered text */

    border-radius: 2px; /* Rounded borders */

    padding: 8px; /* Padding */

    position: fixed; /* Sit on top of the screen */

    z-index: 99999; /* Add a z-index if needed */

    left: 50%; /* Center the snackbar */
    transform: translateX(-50%);

    bottom: 30px; /* 30px from the bottom */
}

#snackbar {
    background-color: #333; /* Black background color */

    color: #fff; /* White text color */
}

#snackbar-error {
    background-color: red;
    color: #fff; /* White text color */
}

/* Animations to fade the snackbar in and out */

@-webkit-keyframes fadein {

    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {

    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {

    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {

    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

.popover, .popover-title, .popover-content {
    font-size: 12px;
    color: var(--text-color);
}

.popover {
    z-index: 5000;
}

    .popover.in:not(.popover-wide) {
        max-width: 200px;
    }

/* GN, Telefonstil. obsolet */

.phonestyle {
    background-color: lightgreen;
}

/* GN, Werbeblocker. obsolet */

.adblocker {
    background-color: darkorange;
}

/* GN */

#clipnoscreeninginfobox {
    background-color: aliceblue;
}

    #clipnoscreeninginfobox .header {
        font-weight: bold;
        text-align: center;
    }

/* Buchungsstatus für Zusatzoptionen */

.articlestatus {
    font-size: 0.9em;
    opacity: 0.85;
}

/* Farben für GN-Status und GN Telefonstil/Adblocker */

.gn-status-red {
    background-color: #f2dede;
}

.gn-status-yellow {
    background-color: #fcf8e3;
}

.gn-status-green {
    background-color: #dff0d8;
}

/*Services*/

#account_table td[name="actions"] a {
    padding-left: 8px;
    text-decoration: none;
}

/*Tarifdarstellung*/

#tariffselector #tarifflist label {
    font-weight: 600;
    opacity: 0.85;
}

#tariffselector .order-tariff-card {
    background: #fff;
    border: 1px solid var(--default-border-color, #cccccc);
    border-radius: 6px;
    color: inherit;
    display: block;
    margin-bottom: 8px;
    padding: 12px;
    text-align: left;
    width: 100%;
}

    #tariffselector .order-tariff-card:hover {
        border-color: var(--primary-bg);
    }

    #tariffselector .order-tariff-card:focus,
    #tariffselector .order-tariff-card:focus-visible {
        outline: 2px solid var(--primary-bg);
        outline-offset: 2px;
    }

    #tariffselector .order-tariff-card.selected,
    #tariffselector .order-tariff-card[aria-pressed="true"],
    #tariffselector #additionaltariffdropdown.tariff-dropdown-selected button[name="dropdownbtn"],
    #tariffselector #additionaltariffdropdown.tariff-dropdown-selected button[name="dropdownbtn"]:hover,
    #tariffselector #additionaltariffdropdown.tariff-dropdown-selected button[name="dropdownbtn"]:focus,
    #tariffselector #additionaltariffdropdown.tariff-dropdown-selected button[name="dropdownbtn"]:active,
    #tariffselector #additionaltariffdropdown.tariff-dropdown-selected .dropdown.open > button[name="dropdownbtn"] {
        background-color: color-mix(in srgb, var(--primary-bg) 18%, transparent);
    }

    #tariffselector .order-tariff-card.selected,
    #tariffselector .order-tariff-card[aria-pressed="true"] {
        border-color: var(--primary-bg);
        color: inherit;
    }

    #tariffselector #additionaltariffdropdown.tariff-dropdown-selected button[name="dropdownbtn"] {
        border: 2px solid var(--primary-bg);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-bg) 14%, transparent);
    }

#tariffselector .order-tariff-card-title,
#tariffselector .order-tariff-card-marker {
    display: block;
}

#tariffselector .order-tariff-card-title {
    font-weight: 600;
}

#tariffselector .order-tariff-card-marker {
    font-size: 12px;
    margin-top: 4px;
    opacity: 0.85;
}

#tariffselector .order-tariff-additional {
    margin-top: 16px;
}

#tariffselector .order-tariff-additional-label {
    color: #666;
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

[data-premiumordered="0"]:not(:hover),
[data-premiumordered="2"]:not(:hover) {
    opacity: 0.6 !important;
}

.tariffinfo {
    font-size: 0.9em;
    margin-top: 12px;
    opacity: 0.8;
    padding: 4px;
    text-align: left;
}

.pricing-container {
    text-align: center;
    white-space: normal !important;
    margin-bottom: 12px;
    margin-top: 6px;
}

    .pricing-container .pricing-header {
        font-size: 26px;
        color: var(--primary-bg);
    }

    .pricing-container .pricing-row {
        background-color: #eee;
        padding-top: 20px;
        padding-bottom: 20px;
    }

.pricing-row .integer-part {
    font-size: 20px;
    color: var(--primary-bg);
}

.pricing-row .integer-part-fraction {
    color: var(--primary-bg);
    vertical-align: top;
}

.pricing-container #defaultprices {
    text-align: center;
}

    .pricing-container #defaultprices td {
        padding-right: 15px;
        border-right: 1px solid #eee;
    }

#tariffselector .tariff-three-column {
    text-align: left;
}

#tariffselector .tariff-detail-headline {
    margin: 4px 0 14px;
    text-align: left;
}

#tariffselector .tariff-detail-panel {
    padding: 6px 10px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #f7f7f7;
    background-color: color-mix(in srgb, var(--primary-bg) 7%, transparent);
}

#tariffselector .tariff-detail-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #eee;
}

#tariffselector .tariff-detail-row:last-child {
    border-bottom: 0;
}

#tariffselector .tariff-detail-icon {
    text-align: center;
}

#tariffselector .tariff-detail-icon-box {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--primary-bg);
    background-color: #e9e9e9;
    background-color: color-mix(in srgb, var(--primary-bg) 18%, transparent);
}

#tariffselector .tariff-detail-label {
    min-width: 0;
    text-align: left;
}

#tariffselector .tariff-detail-value {
    padding-left: 8px;
    text-align: right;
    white-space: nowrap;
}

#tariffselector .tariff-detail-highlight .tariff-detail-label,
#tariffselector .tariff-detail-highlight .tariff-detail-value {
    font-weight: bold;
}

@media (max-width: 480px) {
    #tariffselector .tariff-detail-row {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    #tariffselector .tariff-detail-value {
        grid-column: 2;
        padding-left: 0;
    }
}

/* Tarifauswahl auf der Modul-Bestellseite */
.order-tariff-dialog {
    margin: 0;
}

#tariffselector .modal-content {
    border-radius: 10px;
    overflow: hidden;
}

#tariffselector .modal-footer {
    border-top: 1px solid #e5e5e5;
}

.order-tariff-dialog-selection-header {
    color: #666;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.order-tariff-dialog-selection {
    border-right: 1px solid #e5e5e5;
    min-height: 300px;
    padding: 20px;
}

#tariffselector .tariff-change-date-selector {
    margin-top: 24px;
}

.order-tariff-dialog-information {
    min-height: 300px;
    padding: 20px 28px;
}

.order-tariff-dialog-or {
    align-items: center;
    color: #777;
    display: flex;
    gap: 12px;
    margin: 28px 0;
    text-align: center;
}

    .order-tariff-dialog-or:before,
        .order-tariff-dialog-or:after {
        background-color: #e5e5e5;
        content: '';
        flex: 1;
        height: 1px;
    }

#tariffselector #tarifflist #offer {
    margin-top: 8px;
}

#tariffselector #tarifflist #offer[disabled] {
    background-color: #f7f7f7;
}

@media (max-width: 767px) {
    .order-tariff-dialog-selection {
        border-bottom: 1px solid #e5e5e5;
        border-right: 0;
        min-height: 0;
    }
}

.order-tariff-title {
    color: #555;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.order-tariff-price-summary {
    margin-bottom: 20px;
}

.order-tariff-basic-fee {
    color: var(--primary-bg);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 8px;
}

    .order-tariff-basic-fee .integer-part {
        font-size: inherit;
    }

    .order-tariff-basic-fee .integer-part-fraction {
        font-size: 0.62em;
    }

.order-tariff-period {
    color: #444;
    font-size: 0.43em;
    font-weight: 400;
    margin-left: 8px;
}

.order-tariff-info {
    color: #666;
    margin-top: 10px;
}

.order-tariff-price-details {
    background-color: #f8fbff;
    border: 1px solid #d9e5f5;
    border-radius: 6px;
    padding: 14px 18px;
}

    .order-tariff-price-details h5 {
        font-size: 18px;
        font-weight: 600;
        margin: 4px 0 10px;
    }

    .order-tariff-price-details .list-group {
        margin-bottom: 0;
    }

    .order-tariff-price-details .list-group-item {
        background-color: transparent;
        border-left: 0;
        border-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .order-tariff-price-details .list-group-item:first-child {
        border-top: 0;
    }

.order-tariff-offer-hint {
    background-color: #f8fbff;
    border: 1px solid #d9e5f5;
    border-radius: 6px;
    color: #555;
    padding: 20px;
}

@media (max-width: 767px) {
    .order-tariff-dialog-selection {
        border-bottom: 1px solid #e5e5e5;
        border-right: 0;
        min-height: 0;
    }

    .order-tariff-dialog-information {
        min-height: 0;
    }
}

/**Gesprächsnotizen*/

.calldetail {
    padding: 0px;
    margin: 0px;
}

.calldetail-r1, .calldetail-r1:hover {
    background: var(--tr1-bg) !important;
}

.calldetail-r2, .calldetail-r2:hover {
    background: var(--tr2-bg) !important;
}

.calldetail-top td {
    border-bottom: 0 !important;
}

.calldetail-bottom td {
    border-top: 0 !important;
    padding-top: 0px !important;
}

.calldetail-phone {
    padding-top: 10px;
}

    .calldetail-phone a {
        padding-right: 10px;
    }

    .calldetail-phone span {
        padding-right: 5px;
    }

.calldetail-note {
    padding: 1px 4px 4px 4px;
}

/* TimePicker*/

.timepicker-list {
    height: 190px;
    min-width: 60px;
    overflow: auto;
}

    .timepicker-list a {
        cursor: pointer;
    }

input#search {
    margin-bottom: 6px !important;
}

/* Editierbare Dropdown-Liste. Select mit Input

    z.B. kalenderberechtigungen oder Termingäste

*/

.editselect {
    position: relative;
    /*display: inline-block;*/
}

.editselect-selecteditems {
    display: none;
    background-color: #eee;
    padding: 8px;
}

.editselect-selecteditem {
    align-items: center;
    background-color: #ccc;
    border-radius: 12px;
    cursor: default;
    display: inline-flex;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.2px;
    line-height: 24px;
    margin: 0 5px 5px 0;
    /*max-width: calc(100%  -5px);*/

    overflow: hidden;
    padding: 4px 12px;
}

    .editselect-selecteditem button.close {
        margin-left: 5px;
    }

.editselect-content {
    display: none;
    position: absolute;
    margin-top: 8px;
    background-color: white;
    min-width: 160px;
    max-height: 200px;
    overflow: auto;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
}

    .editselect-content [role=listitem] {
        color: black;
        padding: 8px;
        text-decoration: none;
        display: block;
        cursor: pointer;
    }

        .editselect-content [role=listitem]:hover {
            background-color: #eee;
        }

    .editselect-content .username {
        color: #777;
        font-weight: 500;
        font-size: 12px;
        letter-spacing: 0.2px;
        line-height: 24px;
    }

.editselect .show {
    display: block;
}

.editselect-input {
    background-color: #eee;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    cursor: text;
    outline: none !important;
    padding: 8px;
    width: 100% !important;
}

    .editselect-input:focus {
        border-bottom: 2px solid dodgerblue;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: none;
        -webkit-box-shadow: none;
        outline: none !important;
    }

/*Buttongroups*/

.btngroup-spacy button {
    margin-left: 0px !important;
    margin-right: 2px !important;
    margin-bottom: 4px !important;
}

/*Signature editor*/
.signature-editor-preview {

    border: 1px solid #d9e0e7;

    background: #ffffff;

    padding: 12px;

    max-height: 420px;

    overflow: auto;

}

.signature-editor-field-row .form-group > .row {
    display: flex;
}

.signature-editor-field-row .form-group > .row > .col-xs-2,
.signature-editor-field-row .form-group > .row > .col-xs-10 {
    display: flex;
    align-items: center;
}

.signature-editor-field-row .form-group > .row > .col-xs-2 {
    flex: 0 0 16.666667%;
    justify-content: center;
}

.signature-editor-field-row .form-group > .row > .col-xs-10 {
    flex: 0 0 83.333333%;
}

.signature-editor-input-cell {
    display: block !important;
}

.signature-editor-input-with-format {
    display: flex;
    width: 100%;
    align-items: center;
}

.signature-editor-input-with-format .form-control {
    flex: 1 1 auto;
}

.signature-editor-format-button,
.signature-editor-format-button:focus,
.signature-editor-format-button:hover {
    margin-left: 4px;
    padding: 6px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.signature-editor-format-dialog {
    display: none;
    margin-top: 8px;
    padding: 6px 0 0;
}

.signature-editor-format-dialog label {
    display: block;
    margin-bottom: 4px;
}

.signature-format-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    max-width: 100%;
}

.signature-format-row {
    flex: 0 0 auto;
}

.signature-format-combo {
    display: flex;
    align-items: center;
    gap: 4px;
}

.signature-format-combo .signature-format-size-input {
    width: 64px;
    flex: 0 0 64px;
}

.signature-format-combo .signature-format-color-input {
    width: 82px;
    flex: 0 0 82px;
}

.signature-format-unit {
    min-width: 18px;
}

.signature-format-color-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.signature-format-color-picker {
    flex: 0 0 28px;
    height: 34px;
    border-radius: 4px;
}

.signature-format-row .signature-format-bold,
.signature-format-row .signature-format-italic {
    width: 30px;
    height: 30px;
    padding: 0;
}

.signature-editor-existing-label {
    display: block;
    margin-top: 16px;
}

.signature-editor-existing-preview {
    margin-top: 4px;
}

 /*Carousel*/

.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */

.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */

#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */

@media screen and (max-width: 767px) {

    /* Hide captions */

    .carousel-caption {
        display: none;
    }
}

/* Icon when the collapsible content is shown */

.collapse-btn:after {
    font-family: "Glyphicons Halflings";
    content: "\e114";
    float: right;
    margin-left: 15px;
    cursor: pointer;
}

/* Icon when the collapsible content is hidden */

.collapse-btn.collapsed:after {
    content: "\e113";
    cursor: pointer;
}

/**FAQ*/

.faq-insert-icon {
    margin-right: 4px;
}

/*Splitter*/

.wrap {
    width: 100%;
    white-space: nowrap;
}

.resizable {
    width: 50%;
    height: 100%;
    display: inline-block;
    overflow: hidden;
}

.ui-resizable-e {
    cursor: e-resize;
    width: 10px;
    top: 0;
    bottom: 0;
    background-color: #cfcfcf;
    z-index: 10;
}

/*Tree*/

.node rect {
    fill: #fff;
    stroke-width: 1px;
}

.node-inactive rect {
    cursor: pointer;
    fill-opacity: 0.3;
    stroke: white;
}

.node-active rect {
    cursor: default;
}

.node-questionlink rect {
    fill-opacity: 1.0;
}

.node text {
    font: 14px sans-serif;
    pointer-events: none;
}

.node-active text {
    font-weight: bold;
}

.node-inactive text {
    font-weight: normal;
}

.node-replylink text {
    font-style: italic;
    color: #331ee8; /* todo: funktioniert nicht */
}

.link {
    fill: none;
}

.templink {
    fill: none;
    stroke: red;
    stroke-width: 3px;
}

.ghostCircle.show {
    display: block;
}

.ghostCircle, .activeDrag .ghostCircle {
    display: none;
}

/*Wartezeichen*/

#loader, #loader2, #loader3, #loader4, #loader-popup {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1000;
    margin: -75px 0 0 -75px;
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid var(--primary-bg);
    width: 40px;
    height: 40px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 0.7s linear infinite;
    display: none;
    text-align: center;
}

#background-refresh-indicator {
    display: none;
    position: fixed;
    top: 70px;
    right: 24px;
    z-index: 1000;
    color: var(--primary-bg);
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
}

#background-refresh-indicator .glyphicon-refresh {
    animation: spin 1.2s linear infinite;
}

@media (max-width: 767px) {
    #background-refresh-indicator {
        top: 56px;
        right: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #background-refresh-indicator .glyphicon-refresh {
        animation-duration: 2.4s;
    }
}

[name="dlgloader"] {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1000;
    /*margin: -75px 0 0 -75px;*/

    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid var(--primary-bg);
    width: 25px;
    height: 25px;
    -webkit-animation: spin 5s linear infinite;
    animation: spin 0.9s linear infinite;
    display: none;
    text-align: center;
}

.fa-spinner.on {
    -webkit-animation: spin 2s ease-in infinite;
}

.progress {
    background-color: transparent;
    width: 100%;
}

    .progress .progressbar {
        background-color: #999;
        border-radius: 2px;
        font-weight: 600;
        height: 12px;
        opacity: 0.7;
        text-align: center;
        width: 0;
    }

/*Vertragsverwaltung */

.table-contract-r1 {
    background-color: var(--colorstripe1);
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-top: 4px;
    padding-bottom: 4px;
}

.table-contract-r2 {
    background-color: var(--colorstripe2);
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-top: 4px;
    padding-bottom: 4px;
}

.table-contract-r3 {
    background-color: var(--colorstripe2);
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-top: 0px;
    padding-bottom: 4px;
}

.modul-status {
    color: var(--primary-bg);
    padding: 6px;
}

@-webkit-keyframes spin {

    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Add animation to "page content" */

.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
}

@-webkit-keyframes animatebottom {

    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0px;
        opacity: 1
    }
}

@keyframes animatebottom {

    from {
        bottom: -100px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

/**Bootstrap/Themes überschreiben*/

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../../../lib/bootstrap/dist/fonts/glyphicons-halflings-regular.eot');
    src: url('../../../lib/bootstrap/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../../lib/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../../../lib/bootstrap/dist/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../../lib/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../../lib/bootstrap/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.collapse-btn {
    cursor: pointer;
}

.navbar {
    margin-bottom: 20px;
}

.navbar-brand {
    height: 60px;
    padding-top: 4px;
}

    .navbar-brand > img {
        max-width: 200px;
        max-height: 50px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

.wl-logo-preview {
    max-width: 200px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.wl-sections {
    display: block;
}

.wl-section + .wl-section {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e9ecef;
}

.wl-section .wl-field {
    margin-bottom: 0;
}

    .wl-section .wl-field + .wl-field {
        margin-top: 16px;
    }

.wl-legal-hint {
    margin-bottom: 12px;
}

.wl-domain-actions,
.wl-logo-actions,
.wl-legal-actions {
    margin-top: 8px;
}

    .wl-logo-actions .btn + .btn,
    .wl-legal-actions .btn + .btn {
        margin-left: 8px;
    }

.wl-legal-row + .wl-legal-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #ececec;
}

.wl-legal-title .label {
    margin-left: 6px;
}

.navbar-default {
    background-color: white;
    border-color: white;
    border-bottom: 1px solid #eee;
}

    .navbar-default .navbar-link {
        color: #5f6368;
    }

    .navbar-default .btn-link {
        color: #5f6368;
    }

        .navbar-default .btn-link:hover,
        .navbar-default .btn-link:focus {
            color: #5f6368;
        }

ul.nav li a {
    padding-left: 6px;
}

    ul.nav li a:not(.last-btn) {
        padding-right: 6px;
    }

.navbar-fixed-top .navbar-brand:focus:not(:focus-visible),
.navbar-fixed-top .navbar-nav > li:not(.dropdown) > a:focus:not(:focus-visible) {
    outline: none;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    vertical-align: middle;
}

/*Überschreibt Bootstrap */

.table-responsive.sticky-vertical {
    width: fit-content !important;
}

.sticky-vertical > table > thead > tr > th, .sticky-vertical > table > thead > tr > td {
    background-color: #eee;
    font-weight: normal;
    position: sticky;
    top: 0;
    z-index: 6;
}

/*Tabelle mit rundem Außenrahmen*/

table.rndtable {
    border-collapse: separate; /* wichtig für sichtbare Ecken */

    border-spacing: 0;
    width: 100%;
}

    /* --- THEAD --- */

    /* Erste Zeile im thead: oben abrunden */

    table.rndtable thead tr:first-child th:first-child {
        border-top-left-radius: 4px;
    }

    table.rndtable thead tr:first-child th:last-child {
        border-top-right-radius: 4px;
    }

    /* Letzte Zeile im thead: unten abrunden, nur wenn KEIN tbody folgt */

    table.rndtable thead:last-child tr:last-child th:first-child {
        border-bottom-left-radius: 4px;
    }

    table.rndtable thead:last-child tr:last-child th:last-child {
        border-bottom-right-radius: 4px;
    }

    /* --- TBODY --- */

    /* Erste Zeile im tbody: oben abrunden, nur wenn KEIN thead vorhanden ist */

    table.rndtable:not(:has(thead)) tbody tr:first-child td:first-child {
        border-top-left-radius: 4px;
    }

    table.rndtable:not(:has(thead)) tbody tr:first-child td:last-child {
        border-top-right-radius: 4px;
    }

    /* Letzte Zeile im tbody: unten abrunden */

    table.rndtable tbody tr:last-child td {
        border-bottom: 1px solid #ddd;
    }

        table.rndtable tbody tr:last-child td:first-child {
            border-bottom-left-radius: 4px;
        }

        table.rndtable tbody tr:last-child td:last-child {
            border-bottom-right-radius: 4px;
        }

    /* --- Rahmen & Hintergrund (optional) --- */

    table.rndtable th:first-child, table.rndtable td:first-child {
        border-left: 1px solid #ddd;
    }

    table.rndtable th:last-child, table.rndtable td:last-child {
        border-right: 1px solid #ddd;
    }

.well-highlight, .well-white {
    background-color: white;
}

    .well-highlight:hover {
        background-color: #efefef;
    }

a.well-highlight {
    text-decoration: none;
}

footer > a:link,
footer > a:visited,
footer > a:hover,
footer > a:active {
    color: #777; /*text-muted*/
}

@media (min-width: 1200px) {

    .modal-xl {
        width: 90%;
        max-width: 1400px;
    }
}

.glyphicon-info-sign {
    color: var(--primary-bg);
}

/**Das zusätzliche Zuweisen dieser Klasse zu .modal-header bewirkt, dass der Header über die ganze Breit angezeigt wird, während die Breite für den Content darunter etwas schmaler ist- */

.modal-titlebar {
    /*background-color: #eee;*/

    border: none;
    padding-bottom: 8px;
    padding-top: 8px;
}

.modal-titlebar2 {
    background-color: transparent;
    border: none;
    font-size: 15px;
    font-weight: 600;
    opacity: 0.75;
    padding-bottom: 8px;
    padding-top: 8px;
}

.modal-titlebar-text {
    font-size: 15px;
    font-weight: 600;
    opacity: 0.75;
}

.modal-titlebar .modal-titlebar-buttons {
    float: right;
}

.modal-titlebar .close {
    font-size: 1.8em;
}

.modal-title {
    text-align: center;
}

/* FileManager: Modal-Kopf und Werkzeugleiste bleiben auf die Dateiverwaltung begrenzt. */
.filemanager-modal .modal-dialog {
    max-width: 1400px;
}

@media (min-width: 992px) {
    .filemanager-modal .modal-dialog {
        width: 80%;
    }
}

.filemanager-modal .modal-header {
    align-items: center;
    background-color: #fbfdff;
    border-bottom: 1px solid #dbe3ec;
    display: flex;
    padding: 22px 42px;
    text-align: left !important;
}

.filemanager-modal .modal-header .modal-titlebar-text {
    color: #3f4a5d;
    flex: 1 1 auto;
    font-size: 28px;
    font-weight: 600;
    opacity: 1;
    order: 1;
    text-align: left;
}

.filemanager-modal .modal-header > span:not(.modal-titlebar-text) {
    display: inline-flex;
    float: none !important;
    margin-left: 24px;
    order: 2;
}

.filemanager-modal .modal-header .close {
    color: #7f8794;
    float: none;
    font-size: 34px;
    line-height: 1;
    margin: 0;
    opacity: 0.9;
}

.filemanager-root .filemanager-toolbar {
    align-items: center;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #e2eaf3;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 10px;
    padding: 4px 0 10px;
}

.filemanager-root .filemanager-toolbar .filemanager-upload-button,
.filemanager-root .filemanager-toolbar .filemanager-create-folder-button {
    color: #1681f2;
    min-width: 48px;
}

.filemanager-root .filemanager-folder-create {
    flex: 0 0 auto;
    width: 300px;
}

.filemanager-root .filemanager-folder-create .input-group {
    width: 100%;
}

.filemanager-root .filemanager-folder-create .input-group-btn {
    width: 1%;
}

.filemanager-root .filemanager-folder-name {
    min-width: 0;
}

.filemanager-root [data-filemanager-role="file-input"] {
    display: none !important;
}

.filemanager-root .filemanager-toolbar-search {
    flex: 0 1 280px;
    margin-left: auto;
    max-width: 280px;
    min-width: 180px;
    width: 280px;
}

.filemanager-root .filemanager-toolbar-search .input-group-addon {
    background-color: #fff;
    color: #4c67ac;
}

.filemanager-root .filemanager-navigation {
    align-items: center;
    display: flex;
    gap: 14px;
    margin-bottom: 10px;
}

.filemanager-root .filemanager-navigation [data-filemanager-role="breadcrumbs"] {
    min-width: 0;
}

@media (max-width: 767px) {
    .filemanager-modal .modal-header {
        padding: 16px 20px;
    }

    .filemanager-modal .modal-header .modal-titlebar-text {
        font-size: 24px;
    }

    .filemanager-root .filemanager-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
        gap: 8px;
    }

    .filemanager-root .filemanager-folder-create {
        flex: 0 1 300px;
        max-width: 100%;
    }

    .filemanager-root .filemanager-toolbar-search {
        flex: 1 1 100%;
        margin-left: 0;
        max-width: none;
        min-width: 0;
        width: 100%;
    }
}

/*Terminfinder: Modal im Dock-Zustand unten links fixieren */

.bookingfinder-docked {
    bottom: 20px;
    height: auto;
    left: 20px;
    overflow: visible;
    right: auto;
    top: auto;
    width: 190px;
}

    .bookingfinder-docked .modal-dialog {
        margin: 0;
        max-width: calc(100vw - 40px);
        position: static;
        width: 100%;
        transform: none;
    }

        .bookingfinder-docked .modal-dialog .modal-content {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
        }

.bookingfinder-minimized .modal-body,
.bookingfinder-minimized .modal-footer {
    display: none;
}

.bookingfinder-minimized .bookingfinder-modal-modebar-host,
.bookingfinder-docked .bookingfinder-modal-modebar-host {
    display: none !important;
}

.modal-backdrop.bookingfinder-backdrop-hidden {
    display: none;
}

.bookingfinder-draggable .modal-header {
    background-color: #f5f5f5;
}

.bookingfinder-modal .bookingfinder-title {
    display: none;
}

.bookingfinder-modal {
    --bookingfinder-modal-left-col-width: 224px;
    --bookingfinder-modal-right-col-width: 224px;
    --bookingfinder-base-width: calc(var(--bookingfinder-modal-left-col-width) + var(--bookingfinder-modal-right-col-width) + var(--bookingfinder-gap));
    --bookingfinder-slot-width: 190px;
    --bookingfinder-modal-width: calc(var(--bookingfinder-modal-left-col-width) + var(--bookingfinder-slot-width) + var(--bookingfinder-modal-right-col-width) + (var(--bookingfinder-gap) * 2));
    --bookingfinder-gap: 25px;
    --bookingfinder-slot-gap: 4px;
    --bookingfinder-slot-chip-width: 108px;
    --bookingfinder-slot-radius: 14px;
    --bookingfinder-slot-columns: 3;
    --bookingfinder-modal-data-col-share: 0.35;
}

    .bookingfinder-modal .mydropdown button[name=dropdownbtn],
    .bookingfinder-modal .mydropdown button[name=dropdownbtn] span[name=caption] {
        white-space: nowrap;
    }

    .bookingfinder-modal .mydropdown button[name=dropdownbtn] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .bookingfinder-modal .mydropdown button[name=dropdownbtn] span[name=caption] {
            flex: 1 1 auto;
            min-width: 0;
        }

        .bookingfinder-modal .mydropdown button[name=dropdownbtn] span.caret {
            flex: 0 0 auto;
            margin-left: auto;
        }

.booking-message {
    display: none;
    margin-bottom: 16px;
}

    .booking-message .alert {
        margin: 0;
    }

.bookingfinder-public,
.bookingfinder-embed {
    --booking-accent: #1f6aa5;
    --booking-accent-text: #ffffff;
    --booking-surface: #ffffff;
    --booking-bg: #f3f6f9;
    --bookingfinder-side-col-width: 300px;
    --bookingfinder-base-width: calc((var(--bookingfinder-side-col-width) * 2) + var(--bookingfinder-gap));
    --bookingfinder-slot-width: 420px;
    --bookingfinder-gap: 6px;
    --bookingfinder-slot-gap: 6px;
    --bookingfinder-slot-chip-width: 108px;
    --bookingfinder-slot-radius: 14px;
    --bookingfinder-slot-columns: 3;
    --bookingfinder-slot-columns-mobile: 2;
    background: var(--booking-surface);
    border-radius: 10px;
    border: var(--booking-embed-outer-border-width, 0) solid var(--booking-embed-outer-border-color, transparent);
    --booking-embed-outer-shadow-default: 0 10px 30px rgba(15, 23, 42, 0.08);
    box-shadow: var(--booking-embed-outer-shadow, var(--booking-embed-outer-shadow-default));
    padding: var(--booking-embed-outer-padding, 16px);
    margin: var(--booking-embed-outer-margin, 0 auto);
    width: var(--booking-embed-form-width, calc(100% - (2 * var(--booking-embed-outer-margin-x-size, var(--booking-embed-outer-margin-size, 0px)))));
    max-width: var(--booking-embed-form-max-width, calc(var(--bookingfinder-base-width) + var(--bookingfinder-slot-width) + var(--bookingfinder-gap)));
    height: var(--booking-embed-form-height, auto);
    box-sizing: border-box;
    overflow: hidden;
}

.bookingfinder-mobile-internal {
    --booking-accent: var(--primary-bg, #1f6aa5);
    --booking-accent-text: var(--primary-text, #ffffff);
    --bookingfinder-side-col-width: 100%;
    --bookingfinder-base-width: 100%;
    --bookingfinder-slot-width: 100%;
    --bookingfinder-gap: 12px;
    --bookingfinder-slot-gap: 10px;
    --bookingfinder-slot-chip-width: 106px;
    --bookingfinder-slot-columns: 3;
    --bookingfinder-slot-columns-mobile: 2;
    background: var(--background-color, #f4f7fb);
    border-radius: 12px;
    border: 1px solid var(--default-border-color, #d8e1ee);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    margin: 10px auto 18px auto;
    padding: 14px;
}

    .bookingfinder-mobile-internal .bookingfinder-layout.bookingfinder-expanded {
        flex-direction: column;
    }

    .bookingfinder-mobile-internal .bookingfinder-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .bookingfinder-mobile-internal .bookingfinder-col-slots {
        order: 2;
        background: var(--booking-surface, #ffffff);
        border: 1px solid var(--default-border-color, #d8e1ee);
        border-bottom: 0;
        border-radius: 14px 14px 0 0;
        margin-bottom: 0;
        padding: 12px 12px 0 12px;
    }

    .bookingfinder-mobile-internal .bookingfinder-col-data {
        order: 3;
        background: var(--booking-surface, #ffffff);
        border: 1px solid var(--default-border-color, #d8e1ee);
        border-top: 0;
        border-radius: 0 0 14px 14px;
        margin-top: 0;
        padding: 0 12px 12px 12px;
    }

    .bookingfinder-mobile-internal #appointment-type-dropdown {
        margin-bottom: 8px;
    }

    .bookingfinder-mobile-internal .bookingfinder-range-header {
        display: none;
    }

    .bookingfinder-mobile-internal .bookingfinder-date-accordion {
        margin-top: 0;
        margin-bottom: 12px;
    }

    .bookingfinder-mobile-internal .bookingfinder-date-body {
        margin-top: 0;
    }

    .bookingfinder-mobile-internal .bookingfinder-date-field {
        margin-bottom: 0;
    }

    .bookingfinder-mobile-internal .bookingfinder-date-field-end {
        display: none;
    }

    .bookingfinder-mobile-internal .bookingfinder-date-field-start .input-group {
        border-radius: 16px;
        border: 2px solid color-mix(in srgb, var(--booking-accent) 45%, #d8e1ee);
        background: var(--booking-surface, #ffffff);
    }

    .bookingfinder-mobile-internal .bookingfinder-date-field-start .form-control {
        border: 0;
        box-shadow: none;
        font-size: 20px;
        font-weight: 700;
        height: 54px;
        padding: 10px 14px;
    }

    .bookingfinder-mobile-internal .bookingfinder-date-field-start .input-group-addon {
        background: transparent;
        border: 0;
        color: var(--booking-accent);
        font-size: 16px;
        font-weight: 500;
        min-width: 146px;
        padding-right: 12px;
    }

    .bookingfinder-mobile-internal .bookingfinder-date-open-trigger .glyphicon {
        margin-left: 8px;
    }

    .bookingfinder-mobile-internal .bookingfinder-slot-nav {
        justify-content: flex-start;
        margin-top: 0;
        margin-bottom: 10px;
        min-height: 30px;
    }

    .bookingfinder-mobile-internal #bookingfinder-prev-slots {
        display: none;
    }

    .bookingfinder-mobile-internal #bookingfinder-next-slots {
        align-items: center;
        color: var(--booking-accent);
        display: inline-flex;
        font-size: 18px;
        font-weight: 600;
        gap: 8px;
        padding: 0;
        text-decoration: underline;
    }

    .bookingfinder-mobile-internal .bookingfinder-slot-list {
        min-height: 0;
    }

    .bookingfinder-mobile-internal .bookingfinder-slot-grid {
        gap: 10px 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bookingfinder-mobile-internal .bookingfinder-slot-chip {
        border-radius: 14px;
        font-size: 20px;
        font-weight: 700;
        height: 52px;
        max-width: none;
        min-height: 52px;
        padding: 6px 4px;
        width: 100%;
    }

.bookingfinder-mobile-internal .bookingfinder-filter {
    display: none;
}

/* Mobile internal: clean single-column booking flow */
.bookingfinder-root.bookingfinder-mobile-internal {
    --booking-mobile-surface: var(--booking-surface, #ffffff);
    --booking-mobile-border: color-mix(in srgb, var(--booking-accent) 24%, #d9e1ee);
    --booking-mobile-radius: 18px;
    --booking-mobile-gap: 12px;
    --booking-mobile-input-height: 56px;
    background: var(--background-color, #f4f7fb);
    border: 1px solid var(--default-border-color, #d8e1ee);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    margin: 10px auto 18px auto;
    padding: 14px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-layout.bookingfinder-expanded {
    display: flex;
    flex-direction: column;
    gap: var(--booking-mobile-gap);
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col {
    flex: 0 0 100%;
    max-width: 100%;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-filters,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-slots,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-data {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-slots,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-data {
    order: initial;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-filter,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-range-header,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field-end,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field-end {
    display: none !important;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-accordion {
    margin: 0;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-body {
    margin: 0;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field-start {
    margin-bottom: 0;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field-start .input-group {
    align-items: center;
    border: 2px solid var(--booking-mobile-border);
    border-radius: 16px;
    overflow: hidden;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field-start .form-control {
    border: 0;
    box-shadow: none;
    font-size: 17px;
    font-weight: 700;
    height: var(--booking-mobile-input-height);
    line-height: calc(var(--booking-mobile-input-height) - 4px);
    padding: 0 14px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field .form-control[type="date"]::-webkit-datetime-edit,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field .form-control[type="date"]::-webkit-date-and-time-value {
    line-height: calc(var(--booking-mobile-input-height) - 4px);
    padding: 0;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field-start .input-group-addon {
    background: transparent;
    border: 0;
    color: var(--booking-accent);
    font-size: 17px;
    font-weight: 600;
    padding-right: 12px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-slot-nav {
    justify-content: space-between;
    margin: 4px 0 10px;
}

.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-prev-slots,
.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-next-slots {
    color: var(--booking-accent);
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    gap: 6px;
    padding: 0;
    text-decoration: none;
}

.bookingfinder-mobile-modebar {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto 10px;
    max-width: 680px;
}

.bookingfinder-mobile-modebar[hidden] {
    display: none !important;
}

.bookingfinder-mobile-modebar .btn {
    background: #f4f6f9;
    border: 1px solid #c5ccd7;
    border-radius: 8px;
    color: #5e6b7f;
    font-size: 18px;
    font-weight: 600;
}

.bookingfinder-mobile-modebar .btn.active,
.bookingfinder-mobile-modebar .btn[aria-selected="true"] {
    background: #dde3ec;
    border-color: #b6bfcd;
    color: #3f4a5d;
}

.bookingfinder-modal .modal-header.modal-titlebar {
    align-items: center;
    display: flex;
    gap: 12px;
}

.bookingfinder-modal .modal-header.modal-titlebar .modal-titlebar-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

.bookingfinder-modal .bookingfinder-modal-modebar-host {
    display: flex;
}

.bookingfinder-modal .modal-header.modal-titlebar .bookingfinder-modal-modebar-host {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-start;
    margin: 0 0 0 12px;
    min-width: 0;
    order: 2;
}

.bookingfinder-modal .modal-header.modal-titlebar .modal-titlebar-buttons {
    float: none;
    margin-left: auto;
    order: 3;
}

.bookingfinder-modal .modal-header.modal-titlebar .bookingfinder-modal-modebar-host .bookingfinder-mobile-modebar {
    margin: 0;
    max-width: none;
    width: auto;
}

.bookingfinder-modal .modal-header.modal-titlebar .bookingfinder-modal-modebar-host .bookingfinder-mobile-modebar-proxy {
    display: inline-grid;
    gap: 6px;
    grid-template-columns: auto auto;
}

.bookingfinder-modal .modal-header.modal-titlebar .bookingfinder-modal-modebar-host .bookingfinder-mobile-modebar .btn {
    font-size: 12px;
    font-weight: 600;
    min-height: 28px;
    min-width: 110px;
    padding: 4px 10px;
}

.bookingfinder-modal .bookingfinder-modal-container #bookingfinder-mobile-modebar {
    display: none !important;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-mobile-modebar {
    margin-bottom: 10px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-mode-panel[hidden] {
    display: none !important;
}

.bookingfinder-modal #bookingfinder-manage-mode {
    padding: 4px 8px 0;
}

.bookingfinder-modal #bookingfinder-manage-mode .bookingfinder-manage-layout {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 25px;
    align-items: start;
    width: 100%;
    margin: 0;
}

.bookingfinder-modal #bookingfinder-manage-mode .bookingfinder-manage-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.bookingfinder-modal #bookingfinder-manage-mode .bookingfinder-manage-section + .bookingfinder-manage-section {
    margin-top: 0;
}

.bookingfinder-modal #bookingfinder-manage-mode .bookingfinder-manage-contact-head {
    color: var(--default-text-color, #1f2937);
    font-weight: 700;
    margin-bottom: 8px;
}

.bookingfinder-modal #bookingfinder-manage-mode .bookingfinder-manage-list {
    display: grid;
    gap: 8px;
}

.bookingfinder-modal #bookingfinder-manage-mode .bookingfinder-manage-item {
    background: #ffffff;
    border: 1px solid var(--bookingfinder-slot-border, #cccccc);
    border-radius: 14px;
    color: var(--default-text-color, #1f2937);
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    text-align: left;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    width: 100%;
}

.bookingfinder-modal #bookingfinder-manage-contacts {
    margin-top: 4px;
}

.bookingfinder-modal #bookingfinder-manage-contacts .bookingfinder-contact-hit.active {
    background: var(--default-hover-bg-color, #eef4ff);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(84, 122, 182, .35);
}

.bookingfinder-modal #bookingfinder-manage-bookings .bookingfinder-manage-item {
    align-items: center;
    background-color: var(--bookingfinder-slot-bg);
    border-color: var(--bookingfinder-slot-border);
    border-radius: var(--bookingfinder-slot-radius, 14px);
    font-size: 14px;
    font-weight: 400;
    justify-content: center;
    line-height: 1.3;
    min-height: 42px;
    padding: 9px 10px;
    text-align: center;
    white-space: normal;
}

.bookingfinder-modal #bookingfinder-manage-bookings .bookingfinder-manage-item:hover,
.bookingfinder-modal #bookingfinder-manage-bookings .bookingfinder-manage-item:focus {
    background-color: #f0f6ff;
    border-color: #9fb9e7;
    box-shadow: 0 1px 4px rgba(54, 89, 141, .15);
    outline: none;
}

.bookingfinder-modal #bookingfinder-manage-bookings .bookingfinder-manage-item.active {
    background-color: var(--bookingfinder-slot-active-bg);
    border-color: var(--bookingfinder-slot-active-border);
    color: var(--bookingfinder-slot-active-fg);
}

.bookingfinder-modal #bookingfinder-manage-mode .bookingfinder-manage-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

.bookingfinder-modal #bookingfinder-manage-rebook-panel {
    min-width: 0;
    margin-top: 0 !important;
}

.bookingfinder-modal #bookingfinder-manage-rebook-type {
    display: none !important;
}

.bookingfinder-modal #bookingfinder-manage-rebook-panel .bookingfinder-manage-list {
    display: grid;
    gap: 8px;
}

.bookingfinder-modal #bookingfinder-manage-rebook-slots .bookingfinder-slot-chip {
    max-width: none;
    width: 100%;
}

.bookingfinder-modal #bookingfinder-manage-rebook-slots {
    margin-bottom: 12px;
}

@media (max-width: 1200px) {
    .bookingfinder-modal #bookingfinder-manage-mode .bookingfinder-manage-layout {
        grid-template-columns: 1fr;
    }
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-manage-section + .bookingfinder-manage-section {
    margin-top: 10px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-manage-contact-head {
    color: var(--default-text-color, #1f2937);
    font-weight: 700;
    margin-bottom: 8px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-manage-list {
    display: grid;
    gap: 8px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-manage-item {
    background: var(--booking-surface, #ffffff);
    border: 1px solid var(--booking-mobile-border);
    border-radius: 12px;
    color: var(--default-text-color, #1f2937);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
    width: 100%;
}

.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-manage-contacts .bookingfinder-manage-item {
    align-items: flex-start;
    border-radius: 18px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 108px;
    padding: 14px 16px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-manage-contacts .bookingfinder-manage-item:hover,
.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-manage-contacts .bookingfinder-manage-item:focus {
    border-color: var(--booking-accent, #1f6aa5);
    outline: none;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-manage-item.active {
    background-color: var(--bookingfinder-slot-active-bg);
    border-color: var(--bookingfinder-slot-active-border);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    color: var(--bookingfinder-slot-active-fg);
}

.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-manage-contacts .bookingfinder-manage-item-title {
    color: var(--default-text-color, #1f2937);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-manage-contacts .bookingfinder-manage-item-meta {
    color: var(--booking-label, #5b6b7f);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-manage-contacts .bookingfinder-manage-item.active .bookingfinder-manage-item-title,
.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-manage-contacts .bookingfinder-manage-item.active .bookingfinder-manage-item-meta {
    color: var(--bookingfinder-slot-active-fg);
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-manage-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 10px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-slot-list {
    min-height: 0;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-slot-grid {
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-slot-chip {
    border: 1px solid var(--booking-mobile-border);
    border-radius: 14px;
    font-size: 18px;
    font-weight: 700;
    height: 54px;
    max-width: none;
    min-height: 54px;
    width: 100%;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-current-type {
    background: var(--booking-surface, #ffffff);
    border: 1px solid var(--booking-mobile-border);
    border-radius: 14px;
    color: var(--default-text-color, #1f2937);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px;
    padding: 10px 12px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-data .form-group {
    margin-bottom: 10px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-data .form-control {
    border: 1px solid var(--booking-mobile-border);
    border-radius: 0;
    box-shadow: none;
    font-size: 18px;
    height: var(--booking-mobile-input-height);
}

.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-manage-search {
    border: 1px solid var(--booking-mobile-border);
    border-radius: 0;
    box-shadow: none;
    font-size: 18px;
    height: var(--booking-mobile-input-height);
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-data textarea.form-control {
    height: auto;
    min-height: 100px;
}

.bookingfinder-root.bookingfinder-mobile-internal #book-now {
    border-radius: 14px;
    display: block;
    font-size: 18px;
    font-weight: 700;
    height: 56px;
    margin: 14px auto 0;
    max-width: 320px;
    width: 100%;
}

@media (max-width: 420px) {
    .bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-open-label {
        display: none;
    }

    .bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field-start .input-group-addon {
        min-width: 42px;
        padding-right: 10px;
    }
}

.bookingfinder-type-cards {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 12px;
}

.bookingfinder-type-card {
    align-items: flex-start;
    background: var(--booking-surface, #ffffff);
    border: 1px solid var(--default-border-color, #d8e1ee);
    border-radius: 18px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
    color: var(--default-text-color, #1f2937);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 108px;
    padding: 14px 16px;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    width: 100%;
}

    .bookingfinder-type-card:hover,
    .bookingfinder-type-card:focus {
        border-color: var(--booking-accent, #1f6aa5);
        outline: none;
    }

    .bookingfinder-type-card.active {
        background: var(--default-hover-bg-color, #eef4ff);
        border-color: var(--booking-accent, #1f6aa5);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    }

    .bookingfinder-type-card:disabled {
        cursor: not-allowed;
        opacity: 0.7;
    }

.bookingfinder-type-card-icon {
    color: var(--booking-accent, #1f6aa5);
    font-size: 22px;
    line-height: 1;
}

.bookingfinder-type-card-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
}

.bookingfinder-type-card-meta {
    color: var(--booking-label, #5b6b7f);
    font-size: 15px;
    line-height: 1.3;
}

.bookingfinder-type-card.active .bookingfinder-type-card-meta {
    color: inherit;
}

.bookingfinder-root[data-bookingembed-flow="true"].bookingfinder-public,
.bookingfinder-root[data-bookingembed-flow="true"].bookingfinder-embed {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.bookingfinder-host {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: var(--booking-embed-host-justify, flex-start);
    min-height: var(--booking-embed-host-min-height, auto);
}

.bookingfinder-public.bookingfinder-collapsed,
.bookingfinder-embed.bookingfinder-collapsed {
    max-width: var(--bookingfinder-base-width);
}

.bookingfinder-embed {
    margin: var(--booking-embed-outer-margin, 0 auto);
    --booking-embed-outer-shadow-default: 0 6px 20px rgba(15, 23, 42, 0.06);
}

    .bookingfinder-public label,
    .bookingfinder-embed label {
        color: var(--booking-label);
    }

    .bookingfinder-public .bookingfinder-type-description,
    .bookingfinder-embed .bookingfinder-type-description,
    .bookingfinder-public .bookingfinder-range-label,
    .bookingfinder-embed .bookingfinder-range-label,
    .bookingfinder-public .bookingfinder-slot-nav-label,
    .bookingfinder-embed .bookingfinder-slot-nav-label,
    .bookingfinder-public .bookingfinder-selected-slot,
    .bookingfinder-embed .bookingfinder-selected-slot {
        color: var(--booking-label);
    }

    .bookingfinder-public .form-group,
    .bookingfinder-embed .form-group {
        margin-bottom: var(--booking-field-gap);
    }

    .bookingfinder-public input,
    .bookingfinder-public select,
    .bookingfinder-public textarea,
    .bookingfinder-embed input,
    .bookingfinder-embed select,
    .bookingfinder-embed textarea {
        border-radius: var(--booking-field-radius);
    }

    .bookingfinder-public .mydropdown .dropdown-menu,
    .bookingfinder-embed .mydropdown .dropdown-menu,
    .booking-embed-flow .mydropdown .dropdown-menu {
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .bookingfinder-public .mydropdown button[name=dropdownbtn],
    .bookingfinder-embed .mydropdown button[name=dropdownbtn],
    .booking-embed-flow .mydropdown button[name=dropdownbtn] {
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    .bookingfinder-public #appointment-type-dropdown .mydropdown,
    .bookingfinder-embed #appointment-type-dropdown .mydropdown {
        width: min(100%, calc(100%));
        min-width: 180px;
        max-width: 100%;
    }

        .bookingfinder-public #appointment-type-dropdown .mydropdown button[name=dropdownbtn],
        .bookingfinder-embed #appointment-type-dropdown .mydropdown button[name=dropdownbtn] {
            width: 100%;
        }

    .bookingfinder-public .mydropdown button[name=dropdownbtn] span[name=caption],
    .bookingfinder-embed .mydropdown button[name=dropdownbtn] span[name=caption],
    .booking-embed-flow .mydropdown button[name=dropdownbtn] span[name=caption] {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
    }

    .bookingfinder-public .mydropdown button[name=dropdownbtn] span.caret,
    .bookingfinder-embed .mydropdown button[name=dropdownbtn] span.caret,
    .booking-embed-flow .mydropdown button[name=dropdownbtn] span.caret {
        flex: 0 0 auto;
    }

    .bookingfinder-public .bookingfinder-slot-chip,
    .bookingfinder-embed .bookingfinder-slot-chip {
        font-size: 13px;
        min-height: 34px;
        width: 100%;
        max-width: 100%;
        padding: 6px 8px;
    }

    .bookingfinder-public .bookingfinder-chip,
    .bookingfinder-embed .bookingfinder-chip {
        font-size: 13px;
        padding: 6px 12px;
    }

    .bookingfinder-public .bookingfinder-range-button,
    .bookingfinder-embed .bookingfinder-range-button {
        padding: 6px 10px;
    }

.bookingfinder-modal .modal-dialog {
    max-width: 95%;
    width: min(848px, calc(100vw - 40px)) !important;
    transition: transform 0.25s ease;
}

.bookingfinder-modal .modal-content {
    overflow: hidden;
}

.bookingfinder-modal.bookingfinder-expanded .modal-dialog {
    transform: none;
    width: min(848px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    margin: 40px auto;
}

.bookingfinder-modal.bookingfinder-loading .bookingfinder-modal-container {
    min-height: 560px;
}

.bookingfinder-modal.bookingfinder-rendering .modal-dialog {
    opacity: 0;
    transform: translateY(6px);
    visibility: hidden;
}

.bookingfinder-modal.bookingfinder-rendering .bookingfinder-modal-container {
    min-height: 560px;
}

.bookingfinder-layout {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--bookingfinder-gap);
    transition: all 0.25s ease;
    align-items: flex-start;
}

.bookingfinder-modal .bookingfinder-layout {
    gap: 25px !important;
    justify-content: flex-start !important;
}

.bookingfinder-modal .bookingfinder-col-filters,
.bookingfinder-modal .bookingfinder-col-slots,
.bookingfinder-modal .bookingfinder-col-data {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#dlg-bookingfinder.bookingfinder-modal .bookingfinder-modal-container .bookingfinder-layout {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 25px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
}

#dlg-bookingfinder.bookingfinder-modal .bookingfinder-modal-container .bookingfinder-col-filters {
    flex: 0 0 224px !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
}

#dlg-bookingfinder.bookingfinder-modal .bookingfinder-modal-container .bookingfinder-col-slots {
    flex: 0 0 190px !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
}

#dlg-bookingfinder.bookingfinder-modal .modal-body {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

#dlg-bookingfinder.bookingfinder-modal .bookingfinder-modal-container .bookingfinder-col-data {
    flex: 0 0 224px !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
}

.bookingfinder-public .bookingfinder-layout,
.bookingfinder-embed .bookingfinder-layout {
    width: 100%;
    max-width: 100%;
    border: var(--booking-embed-inner-border-width, 0) solid var(--booking-embed-inner-border-color, transparent);
    border-radius: var(--booking-container-radius);
    box-shadow: var(--booking-embed-inner-shadow, none);
    padding: var(--booking-embed-inner-padding, 0);
    box-sizing: border-box;
}

.bookingfinder-layout.bookingfinder-slots-collapsed {
    gap: 0;
}

    .bookingfinder-layout.bookingfinder-slots-collapsed .bookingfinder-col-form {
        flex: 0 0 100%;
        max-width: 100%;
    }

.bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-form,
.bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-form {
    display: contents;
}

.bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-grid,
.bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-grid {
    display: contents;
}

.bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-col-filters,
.bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-col-filters {
    order: 1;
    flex: 0 0 var(--bookingfinder-side-col-width);
    max-width: var(--bookingfinder-side-col-width);
}

.bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-slots,
.bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-slots {
    order: 2;
}

.bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-col-data,
.bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-col-data {
    order: 3;
    flex: 0 0 var(--bookingfinder-side-col-width);
    max-width: var(--bookingfinder-side-col-width);
}

.bookingfinder-slots {
    margin-top: 0;
}

.bookingfinder-col {
    flex: 0 0 auto;
    max-width: 100%;
    transition: max-width 0.25s ease, flex-basis 0.25s ease, opacity 0.2s ease;
}

.bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-form,
.bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-slots {
    flex: 0 0 auto;
    max-width: 100%;
}

.bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-form {
    flex: 0 0 var(--bookingfinder-base-width);
    max-width: var(--bookingfinder-base-width);
}

.bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-form,
.bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-form {
    display: contents !important;
    flex: 0 0 auto !important;
    max-width: none !important;
}

.bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-grid,
.bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-grid {
    display: contents !important;
}

.bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-slots {
    flex: 0 0 var(--bookingfinder-slot-width);
    max-width: var(--bookingfinder-slot-width);
    min-width: 0;
    opacity: 1;
    pointer-events: auto;
}

.bookingfinder-layout.bookingfinder-slots-collapsed .bookingfinder-col-slots {
    flex: 0 0 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.bookingfinder-manage.bookingfinder-cancel {
    margin-top: 14px;
}

    .bookingfinder-manage.bookingfinder-cancel .input-group .btn {
        min-width: 130px;
    }

    .bookingfinder-manage.bookingfinder-cancel .bookingfinder-cancel-details {
        margin-top: 8px;
        padding: 10px 12px;
        border: 1px solid var(--bookingfinder-description-border);
        border-radius: 8px;
        background: var(--bookingfinder-description-bg);
        color: var(--bookingfinder-description-fg);
    }

    .bookingfinder-manage.bookingfinder-cancel .bookingfinder-cancel-title {
        font-weight: 600;
    }

    .bookingfinder-manage.bookingfinder-cancel .bookingfinder-cancel-status {
        margin-top: 4px;
    }

    .bookingfinder-manage.bookingfinder-cancel .bookingfinder-cancel-actions {
        margin-top: 8px;
        display: flex;
        gap: 8px;
        align-items: center;
    }

.booking-embed-flow {
    width: var(--booking-embed-form-width, auto);
    max-width: var(--booking-embed-form-max-width, 100%);
    height: var(--booking-embed-form-height, auto);
}

.lp-shell {
    background: radial-gradient(circle at top, #ffffff 0%, var(--bg-page) 64%);
    color: var(--text);
    padding: var(--section-y) 14px;
}

.lp-theme-default {
    --brand: #2F5DA8;
    --brand-strong: #1F3F73;
    --brand-soft: rgba(47,93,168,.12);
    --brand-2: var(--brand-strong);
    --bg: #F7F9FC;
    --bg-page: #F7F9FC;
    --bg-card: #FFFFFF;
    --surface: var(--bg-card);
    --text: #0F172A;
    --text-muted: #64748B;
    --border: rgba(15,23,42,.12);
    --border-soft: rgba(15,23,42,.10);
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.lp-container {
    margin: 0 auto;
    max-width: var(--landing-max);
}

.lp-narrow {
    max-width: var(--content-max);
}

.lp-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
    padding: 16px;
}

.lp-card--soft {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.lp-card--premium {
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.lp-h1 {
    font-size: var(--h1);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0 0 8px;
}

.lp-lead {
    color: var(--text);
    font-size: var(--lead);
    line-height: 1.35;
    margin: 0 0 8px;
}

.lp-muted {
    color: var(--muted);
    font-size: var(--small);
    line-height: 1.45;
    margin: 0;
}

.lp-slot {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    min-width: 84px;
    border-radius: var(--slot-radius);
    padding: var(--slot-pad-y) var(--slot-pad-x);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

    .lp-slot:hover {
        border-color: color-mix(in srgb, var(--brand) 35%, var(--border-soft));
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(15,23,42,.06);
    }

    .lp-slot.bookingfinder-slot-chip-hard-risk,
    .embed-slot-chip.bookingfinder-slot-chip-hard-risk {
        background-color: #fff4f4;
        border-color: #d9534f;
        color: #a94442;
    }

    .lp-slot.bookingfinder-slot-chip-hard-safe,
    .embed-slot-chip.bookingfinder-slot-chip-hard-safe {
        background-color: #f3fbf3;
        border-color: #3c763d;
        color: #2f6f31;
    }

    .lp-slot.is-selected {
        background: var(--brand);
        border-color: var(--brand) !important;
        color: #fff;
        box-shadow: var(--shadow-sm);
    }

.lp-date {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--date-pad-y) + .08rem) calc(var(--date-pad-x) + .05rem);
    border: 1px solid var(--date-control-border);
    border-radius: var(--date-radius);
    background: var(--date-control-bg);
    color: var(--text);
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

    .lp-date:hover {
        background: var(--date-control-hover-bg);
        border-color: var(--date-control-hover-border);
        box-shadow: var(--date-control-hover-ring);
    }

    .lp-date:focus-visible {
        outline: none;
        box-shadow: var(--date-control-focus-ring);
    }

.lp-date-value {
    color: var(--text);
    font-weight: 600;
    letter-spacing: .01em;
}

.lp-date-meta {
    align-items: center;
    color: var(--date-icon-color);
    display: inline-flex;
    gap: 8px;
}

.lp-date-open {
    font-size: var(--small);
}

.lp-date-native {
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

.booking-embed-flow.is-iframe .lp-date-native {
    pointer-events: auto;
    z-index: 3;
    cursor: pointer;
}

    .booking-embed-flow.is-iframe .lp-date-native::-webkit-calendar-picker-indicator {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        cursor: pointer;
    }

.booking-embed-flow.is-iframe #embed-date-group:hover #embed-date-trigger {
    background: var(--date-control-hover-bg);
    border-color: var(--date-control-hover-border);
    box-shadow: var(--date-control-hover-ring);
}

.booking-embed-flow.is-iframe #embed-date-group:focus-within #embed-date-trigger {
    outline: none;
    box-shadow: var(--date-control-focus-ring);
}

.booking-profile-booking-card .lp-date-native {
    pointer-events: auto;
    cursor: pointer;
}

.booking-profile-booking-card .lp-date-native::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.lp-shell #embed-date-group {
    position: relative;
}

.lp-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lp-form {
    background: var(--surface);
    border-radius: var(--radius-lg);
}

.lp-shell.lp-standard .lp-form,
.lp-shell.lp-minimal .lp-form {
    padding: 1rem;
}

@media (min-width: 768px) {
    .lp-shell.lp-standard .lp-form,
    .lp-shell.lp-minimal .lp-form {
        padding: 1.5rem;
    }
}

.lp-form .form-group {
    margin-bottom: 1rem;
}

.lp-form .form-control,
.lp-form .form-select {
    background: var(--control-bg);
    border-color: var(--border-soft);
}

    .lp-form .form-control::placeholder {
        color: color-mix(in srgb, var(--text-muted) 70%, #fff);
    }

.lp-shell.lp-services,
.lp-shell.lp-services-inline {
    min-height: 100dvh;
}

.lp-shell.lp-standard,
.lp-shell.lp-services {
    --lp-standard-accent: var(--booking-accent, var(--brand));
    --date-icon-color: var(--lp-standard-accent);
    --date-control-border: color-mix(in srgb, var(--lp-standard-accent) 30%, var(--border));
    --date-control-hover-bg: color-mix(in srgb, var(--lp-standard-accent) 10%, var(--bg-card));
    --date-control-hover-border: color-mix(in srgb, var(--lp-standard-accent) 45%, var(--border));
    --date-control-hover-ring: 0 0 0 .2rem color-mix(in srgb, var(--lp-standard-accent) 14%, transparent);
    --date-control-focus-ring: 0 0 0 .25rem color-mix(in srgb, var(--lp-standard-accent) 20%, transparent);
}

.lp-shell.lp-services-inline {
    --lp-inline-accent: var(--brand);
    --date-icon-color: var(--lp-inline-accent);
    --date-control-border: color-mix(in srgb, var(--lp-inline-accent) 30%, var(--border));
    --date-control-hover-bg: color-mix(in srgb, var(--lp-inline-accent) 10%, var(--bg-card));
    --date-control-hover-border: color-mix(in srgb, var(--lp-inline-accent) 45%, var(--border));
    --date-control-hover-ring: 0 0 0 .2rem color-mix(in srgb, var(--lp-inline-accent) 14%, transparent);
    --date-control-focus-ring: 0 0 0 .25rem color-mix(in srgb, var(--lp-inline-accent) 20%, transparent);
}

.lp-services-intro {
    margin-bottom: 16px;
}

.lp-services-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    margin-bottom: 18px;
}

@media (min-width: 576px) {
    .lp-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .lp-services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lp-service-card {
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 164px;
    padding: 24px;
    text-align: left;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
    width: 100%;
}

    .lp-service-card:hover {
        border-color: color-mix(in srgb, var(--brand) 30%, var(--border-soft));
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .lp-service-card:focus-visible {
        outline: none;
        box-shadow: 0 0 0 .25rem var(--brand-soft);
    }

.lp-service-icon {
    color: var(--brand);
    font-size: 20px;
    line-height: 1;
}

.lp-shell.lp-services .lp-service-card .lp-service-icon,
.lp-shell.lp-services .lp-service-card .lp-service-icon.glyphicon {
    color: var(--brand);
}

.lp-service-title {
    color: var(--text);
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
}

.lp-service-duration {
    color: var(--text-muted);
    display: block;
    font-size: .9rem;
}

.lp-service-description {
    color: var(--text);
    display: -webkit-box;
    font-size: .92rem;
    line-clamp: 2;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lp-service-card.is-selected {
    background: var(--brand-soft);
    border-color: var(--brand);
}

.lp-service-slots-header {
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 600;
    margin-top: 2px;
}

.lp-service-slots {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
    min-height: 40px;
}

.lp-service-slots-loading,
.lp-service-slots-empty {
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.35;
}

.lp-slot-more-inline {
    margin-top: 4px;
}

.lp-services-booking,
.lp-services-inline-booking {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px;
}

.lp-services-booking-placeholder {
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    margin-bottom: 12px;
    padding: 12px;
}

.lp-services-booking.is-inactive .booking-embed-flow {
    opacity: .5;
    pointer-events: none;
}

.lp-services-inline-booking.is-inactive .booking-embed-flow {
    opacity: .5;
    pointer-events: none;
}

.lp-services-booking.is-inactive .booking-embed-flow .embed-actions,
.lp-services-inline-booking.is-inactive .booking-embed-flow .embed-actions {
    pointer-events: auto;
}

.booking-embed-flow #embed-contact-step-content.is-hidden {
    display: none;
}

.lp-shell.lp-services .booking-embed-flow,
.lp-shell.lp-services-inline .booking-embed-flow {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.lp-shell.lp-services #embed-step-2 hr,
.lp-shell.lp-services-inline #embed-step-2 hr {
    display: none;
}

.lp-shell.lp-services .lp-slot.is-selected,
.lp-shell.lp-services-inline .lp-slot.is-selected {
    background: var(--brand-soft);
    border-color: var(--brand) !important;
    color: var(--brand-strong);
}

@media (min-width: 992px) {
    .lp-shell.lp-services .booking-embed-flow,
    .lp-shell.lp-services-inline .booking-embed-flow {
        display: grid;
        gap: 24px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .lp-shell.lp-services #embed-step-1,
    .lp-shell.lp-services #embed-step-2,
    .lp-shell.lp-services-inline #embed-step-1,
    .lp-shell.lp-services-inline #embed-step-2 {
        margin: 0;
    }
}

.lp-shell.lp-cancel {
    min-height: 100dvh;
}

.lp-shell.lp-manage {
    min-height: 100dvh;
}

.lp-cancel-shell {
    max-width: min(var(--content-max), 520px);
}

.lp-manage-shell {
    max-width: min(var(--content-max), 520px);
}

.lp-cancel-card {
    margin: 0 auto;
    padding: 18px;
}

.lp-manage-card {
    margin: 0 auto;
    padding: 18px;
}

.lp-shell.lp-cancel .booking-landing-brand,
.lp-shell.lp-manage .booking-landing-brand {
    margin-bottom: 10px;
}

.lp-shell.lp-cancel .booking-landing-logo,
.lp-shell.lp-manage .booking-landing-logo {
    max-height: 48px;
    width: auto;
    display: block;
}

.lp-cancel-form {
    display: grid;
    gap: 12px;
}

.lp-cancel-code label {
    color: var(--muted);
    display: inline-block;
    font-size: var(--small);
    font-weight: 600;
    margin-bottom: 6px;
}

.lp-cancel-result {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding: 14px;
}

.lp-cancel-result__label {
    color: var(--muted);
    font-size: var(--small);
    font-weight: 600;
}

.lp-cancel-result__value {
    color: var(--text);
    font-size: clamp(1rem, 4.1vw, 1.1rem);
    font-weight: 600;
    line-height: 1.35;
}

.lp-cancel-actions {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

    .lp-cancel-actions form {
        margin: 0;
    }

.lp-manage-intro {
    margin-top: -2px;
}

.lp-manage-result {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding: 14px;
}

.lp-manage-result__label {
    color: var(--muted);
    font-size: var(--small);
    font-weight: 600;
}

.lp-manage-result__value {
    color: var(--text);
    font-size: clamp(1rem, 4.1vw, 1.1rem);
    font-weight: 600;
    line-height: 1.35;
}

.lp-manage-actions {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.lp-manage-slots {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.lp-manage-slot {
    text-align: left;
}

.lp-manage-empty {
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-md);
    color: var(--muted);
    padding: 12px;
}

.lp-manage-confirm-row {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    padding: 10px 12px;
}

.lp-manage-confirm-label {
    color: var(--muted);
    font-size: var(--small);
    font-weight: 600;
}

.lp-manage-confirm-value {
    color: var(--text);
    font-weight: 600;
}

.lp-trust-row {
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 12px;
    margin-top: 12px;
}

.lp-trust-item {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.lp-shell a,
.lp-postbooking a {
    color: var(--brand);
}

    .lp-shell a:hover,
    .lp-postbooking a:hover {
        color: var(--brand-strong);
    }

.lp-shell .btn-primary,
.lp-postbooking .btn-primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    font-weight: 600;
    padding-top: .85rem;
    padding-bottom: .85rem;
    box-shadow: 0 10px 26px rgba(15,23,42,.08);
}

.lp-shell .booking-embed-flow .embed-slot-chip.active,
.lp-shell .booking-embed-flow .embed-slot-chip.is-selected,
.lp-postbooking .booking-embed-flow .embed-slot-chip.active,
.lp-postbooking .booking-embed-flow .embed-slot-chip.is-selected {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

.lp-shell .btn-primary:hover,
.lp-postbooking .btn-primary:hover {
    background-color: var(--brand-strong) !important;
    border-color: var(--brand-strong) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.10);
}

.lp-shell .btn-link,
.lp-postbooking .btn-link {
    color: var(--brand);
    text-decoration: none;
}

    .lp-shell .btn-link:hover,
    .lp-postbooking .btn-link:hover {
        color: var(--brand-strong);
        text-decoration: underline;
    }

    .lp-shell .btn-link:focus,
    .lp-shell .btn-link:focus-visible,
    .lp-postbooking .btn-link:focus,
    .lp-postbooking .btn-link:focus-visible {
        box-shadow: 0 0 0 .2rem var(--brand-soft);
        outline: 0;
    }

.lp-shell .form-control:focus,
.lp-shell .form-select:focus,
.lp-postbooking .form-control:focus,
.lp-postbooking .form-select:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 .2rem var(--brand-soft) !important;
}

.lp-shell .bi,
.lp-shell svg,
.lp-postbooking .bi,
.lp-postbooking svg {
    color: var(--icon-color);
    fill: currentColor;
}

.lp-slot-more,
.lp-slot-more svg,
.lp-slot-more .glyphicon {
    color: var(--brand);
    fill: currentColor;
}

.lp-slot-more {
    align-items: center;
    background: transparent;
    border: 0;
    display: inline-flex;
    font-size: .95rem;
    gap: .4rem;
    font-weight: 600;
    padding: .15rem 0;
    text-decoration: none;
}

    .lp-slot-more:hover,
    .lp-slot-more:focus {
        color: var(--brand-strong);
        text-decoration: none;
    }

.lp-shell #embed-next-slots,
.lp-shell #embed-next-slots:hover,
.lp-shell #embed-next-slots:focus,
.lp-shell #embed-next-slots:active,
.lp-shell #embed-next-slots:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.lp-shell.lp-services #embed-next-slots .glyphicon,
.lp-shell.lp-services #embed-next-slots:hover .glyphicon,
.lp-shell.lp-services #embed-next-slots:focus .glyphicon,
.lp-shell.lp-services-inline #embed-next-slots .glyphicon,
.lp-shell.lp-services-inline #embed-next-slots:hover .glyphicon,
.lp-shell.lp-services-inline #embed-next-slots:focus .glyphicon {
    color: var(--brand);
}

.lp-shell.lp-services-inline .lp-date-meta,
.lp-shell.lp-services-inline .lp-date-open,
.lp-shell.lp-services-inline .lp-date .glyphicon,
.lp-shell.lp-services-inline .lp-date svg {
    color: var(--date-icon-color);
}

.lp-shell.lp-services-inline #embed-slot-nav .embed-slot-nav-button,
.lp-shell.lp-services-inline #embed-slot-nav .embed-slot-nav-button .embed-slot-nav-label,
.lp-shell.lp-services-inline #embed-slot-nav .embed-slot-nav-button .glyphicon {
    color: var(--lp-inline-accent);
}

    .lp-shell.lp-services-inline #embed-slot-nav .embed-slot-nav-button.btn {
        border-color: var(--border-soft);
    }

        .lp-shell.lp-services-inline #embed-slot-nav .embed-slot-nav-button.btn:hover,
        .lp-shell.lp-services-inline #embed-slot-nav .embed-slot-nav-button.btn:focus,
        .lp-shell.lp-services-inline #embed-slot-nav .embed-slot-nav-button.btn:active {
            border-color: var(--lp-inline-accent);
            color: var(--lp-inline-accent);
        }

.lp-date svg,
.lp-date .glyphicon {
    color: var(--date-icon-color);
    fill: currentColor;
}

.lp-trust-mini {
    color: var(--text-muted);
    font-size: .9rem;
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    align-items: center;
    justify-content: center;
}

    .lp-trust-mini-item,
    .lp-trust-mini .lp-trust-item {
        display: inline-flex;
        gap: .4rem;
        align-items: center;
    }

    .lp-trust-mini svg,
    .lp-trust-mini .bi,
    .lp-trust-mini .glyphicon {
        color: var(--brand);
        fill: currentColor;
    }

.lp-shell.lp-standard .lp-standard-layout {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2rem;
}

.lp-shell.lp-standard .lp-standard-pane {
    min-width: 0;
}

@media (min-width: 992px) {
    .lp-shell.lp-standard .lp-standard-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(24px, 3vw, 48px);
        row-gap: 0;
        align-items: start;
    }

    .lp-shell.lp-standard .lp-standard-pane-copy {
        max-width: 560px;
        justify-self: start;
    }

    .lp-shell.lp-standard .lp-standard-pane-booking {
        width: 100%;
        max-width: 620px;
        justify-self: stretch;
        min-width: 0;
    }

    .lp-shell.lp-standard .lp-booking-col {
        display: block;
    }

    .lp-shell.lp-standard .lp-booking-card,
    .lp-shell.lp-standard .lp-standard-booking-card {
        max-width: 100%;
        margin-left: 0;
    }
}

.lp-standard .lp-standard-content {
    display: flex;
    flex-direction: column;
}

.lp-standard .booking-landing-main-copy {
    margin-bottom: 0;
}

.lp-standard .lp-provider {
    margin: 0;
}

.lp-standard .lp-trust-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .25rem;
}

.lp-standard .lp-chip {
    font-size: .95rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: var(--brand-soft);
    border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
    color: var(--brand-strong);
    font-weight: 500;
}

.lp-standard .lp-standard-expect h3 {
    margin-bottom: .6rem;
    margin-top: 0;
}

.lp-standard .lp-standard-expect-list {
    margin: 0;
    padding-left: 20px;
}

    .lp-standard .lp-standard-expect-list li {
        color: var(--text);
        margin-bottom: .45rem;
    }

.lp-standard .lp-booking-col {
    display: flex;
    justify-content: flex-end;
}

.lp-standard .lp-booking-card,
.lp-standard .lp-standard-booking-card {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    box-shadow: var(--shadow-sm);
}

.lp-standard .lp-booking-card {
    padding-top: 1.65rem;
}

.lp-standard .lp-slots-block {
    margin-bottom: 1rem;
}

.lp-standard .lp-form .form-group {
    margin-bottom: 1rem;
}

.lp-standard .embed-actions {
    margin-top: 1rem;
}

.lp-shell .embed-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.lp-shell.lp-minimal .embed-actions {
    margin-top: 1rem;
}

.lp-shell.lp-trust .lp-container {
    max-width: 1080px;
}

.lp-shell.lp-trust .booking-landing-main-copy {
    margin-bottom: 14px;
}

.lp-shell.lp-trust .lp-trust-head-card {
    margin-bottom: 8px;
}

.lp-shell.lp-trust .lp-trust-head {
    align-items: stretch;
}

    .lp-shell.lp-trust .lp-trust-head .booking-landing-main-copy {
        margin-bottom: 0;
    }

.lp-shell.lp-trust .booking-landing-brand--stack {
    align-items: flex-start;
    flex-direction: column;
}

.lp-shell.lp-trust .booking-landing-provider--stack {
    display: flex;
    flex-direction: column;
    font-size: 1.05rem;
    font-weight: 700;
    gap: 2px;
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
}

.lp-shell.lp-trust .booking-landing-provider-line {
    display: block;
}

.lp-shell.lp-trust .lp-trust-main {
    margin-top: 8px;
    align-items: flex-start;
}

.lp-shell.lp-trust .lp-trust-tile {
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--bg-card)), var(--bg-card));
    border-color: color-mix(in srgb, var(--brand) 18%, transparent);
    min-height: 128px;
}

.lp-shell.lp-trust .lp-trust-tile-icon {
    color: var(--brand);
    margin-bottom: 8px;
}

    .lp-shell.lp-trust .lp-trust-tile-icon .glyphicon {
        color: currentColor;
        font-size: var(--lp-trust-icon-size, 16px);
    }

.lp-shell.lp-trust .booking-landing-trust-tile-title {
    font-size: var(--lp-trust-title-size, 1.05rem);
    font-weight: 600;
    margin-bottom: 4px;
}

.lp-shell.lp-trust .lp-trust-tile-description {
    color: var(--text-muted);
    font-size: var(--lp-trust-description-size, .85rem);
    line-height: 1.35;
}

.lp-shell.lp-trust .lp-trust-booking-card {
    box-shadow: var(--shadow-md);
    border-color: transparent;
    position: relative;
}

    .lp-shell.lp-trust .lp-trust-booking-card::before {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        top: 0;
        height: 2px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--brand) 24%, var(--bg-card));
    }

.lp-shell.lp-trust .lp-trust-faq .lp-faq-item {
    border: 0;
    box-shadow: none;
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border-soft));
    margin-bottom: 8px;
}

.lp-shell.lp-trust .lp-trust-faq .panel-heading {
    background: transparent;
    padding: 0;
}

.lp-shell.lp-trust .lp-trust-faq .panel-title {
    margin: 0;
}

.lp-shell.lp-trust .lp-trust-faq .lp-faq-trigger {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 10px 0;
    color: var(--text);
}

    .lp-shell.lp-trust .lp-trust-faq .lp-faq-trigger:focus,
    .lp-shell.lp-trust .lp-trust-faq .lp-faq-trigger:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 .2rem var(--brand-soft);
        border-radius: var(--radius-sm);
    }

.lp-shell.lp-trust #embed-next-slots {
    background: transparent;
    border: 0;
    color: var(--brand-2);
    font-size: 14px;
    font-weight: 600;
    margin: 0 auto;
    padding: 6px 4px;
    text-decoration: underline;
}

    .lp-shell.lp-trust #embed-next-slots .glyphicon {
        margin-left: 6px;
    }

.btn-brand {
    background: var(--brand);
    border-color: var(--brand);
    border-radius: .9rem;
    color: var(--bg-card);
}

    .btn-brand:hover,
    .btn-brand:focus {
        background: var(--brand-2);
        border-color: var(--brand-2);
        color: var(--bg-card);
    }

.lp-compact .lp-container {
    max-width: var(--content-max);
}

.lp-minimal .lp-container {
    max-width: var(--minimal-max);
}

.lp-shell.lp-minimal {
    background: var(--bg-card);
    --lp-minimal-accent: var(--booking-accent, var(--brand));
    --date-icon-color: var(--lp-minimal-accent);
    --date-control-border: color-mix(in srgb, var(--lp-minimal-accent) 30%, var(--border));
    --date-control-hover-bg: color-mix(in srgb, var(--lp-minimal-accent) 10%, var(--bg-card));
    --date-control-hover-border: color-mix(in srgb, var(--lp-minimal-accent) 45%, var(--border));
    --date-control-hover-ring: 0 0 0 .2rem color-mix(in srgb, var(--lp-minimal-accent) 14%, transparent);
    --date-control-focus-ring: 0 0 0 .25rem color-mix(in srgb, var(--lp-minimal-accent) 20%, transparent);
}

    .lp-shell.lp-minimal .lp-card--glow {
        margin: 0 auto;
        padding: 20px;
    }

.lp-card--glow {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--glow);
}

    .lp-card--glow:focus-within {
        box-shadow: var(--glow), var(--glow-brand);
    }

.lp-tz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

    .lp-tz label {
        color: var(--text-muted);
        font-size: .95rem;
        margin-bottom: 0;
    }

    .lp-tz .form-select {
        width: auto;
        min-width: 210px;
    }

.lp-tz-hint {
    color: var(--text-muted);
    font-size: .86rem;
    margin-top: .35rem;
}

.lp-shell.lp-minimal .lp-tz {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

    .lp-shell.lp-minimal .lp-tz label {
        color: var(--booking-label);
        font-size: inherit;
        font-weight: 400;
        line-height: inherit;
        margin-bottom: 0;
    }

    .lp-shell.lp-minimal .lp-tz .form-select {
        appearance: none;
        background-color: var(--control-bg);
        border: 1px solid var(--border-soft);
        border-radius: var(--date-radius);
        color: var(--text);
        height: 42px;
        line-height: 1.4;
        min-width: 0;
        padding: .5rem 2.25rem .5rem .75rem;
        width: 100%;
    }

.lp-shell.lp-minimal .lp-tz-hint {
    font-size: .82rem;
    margin-top: .3rem;
}

.lp-shell.lp-minimal .lp-tz-group {
    margin-top: 1.75rem;
}

@media (max-width: 575px) {
    .lp-tz {
        align-items: stretch;
        flex-direction: column;
    }

        .lp-tz .form-select {
            width: 100%;
            min-width: 0;
        }

    .lp-shell.lp-minimal .lp-tz {
        display: flex;
    }
}

.lp-theme-med {
    --brand: #2A7F68;
    --brand-strong: #1D5C4B;
    --brand-soft: rgba(42,127,104,.12);
    --brand-2: var(--brand-strong);
    --bg: #F6FBF9;
    --bg-page: #F6FBF9;
    --bg-card: #FFFFFF;
    --surface: var(--bg-card);
    --text: #0F172A;
    --text-muted: #64748B;
    --border: rgba(15,23,42,.12);
    --border-soft: rgba(15,23,42,.10);
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.12);
    --icon-color: var(--brand);
    --date-icon-color: var(--brand);
    --date-control-bg: color-mix(in srgb, var(--bg-card) 88%, var(--bg-page));
    --date-control-border: color-mix(in srgb, var(--brand) 30%, var(--border));
    --date-control-hover-bg: color-mix(in srgb, var(--brand) 10%, var(--bg-card));
    --date-control-hover-border: color-mix(in srgb, var(--brand) 45%, var(--border));
    --date-control-hover-ring: 0 0 0 .2rem color-mix(in srgb, var(--brand) 14%, transparent);
    --date-control-focus-ring: 0 0 0 .25rem color-mix(in srgb, var(--brand) 20%, transparent);
}

.lp-theme-tax {
    --brand: #2F5DA8;
    --brand-strong: #1F3F73;
    --brand-soft: rgba(47,93,168,.12);
    --brand-2: var(--brand-strong);
    --bg: #F7F9FC;
    --bg-page: #F7F9FC;
    --bg-card: #FFFFFF;
    --surface: var(--bg-card);
    --text: #0F172A;
    --text-muted: #64748B;
    --border: rgba(15,23,42,.12);
    --border-soft: rgba(15,23,42,.10);
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.12);
    --icon-color: var(--brand);
    --date-icon-color: var(--brand);
    --date-control-bg: color-mix(in srgb, var(--bg-card) 88%, var(--bg-page));
    --date-control-border: color-mix(in srgb, var(--brand) 30%, var(--border));
    --date-control-hover-bg: color-mix(in srgb, var(--brand) 10%, var(--bg-card));
    --date-control-hover-border: color-mix(in srgb, var(--brand) 45%, var(--border));
    --date-control-hover-ring: 0 0 0 .2rem color-mix(in srgb, var(--brand) 14%, transparent);
    --date-control-focus-ring: 0 0 0 .25rem color-mix(in srgb, var(--brand) 20%, transparent);
}

.lp-theme-legal {
    --brand: #375A9E;
    --brand-strong: #243E73;
    --brand-soft: rgba(55,90,158,.12);
    --brand-2: var(--brand-strong);
    --bg: #F7F8FD;
    --bg-page: #F7F8FD;
    --bg-card: #FFFFFF;
    --surface: var(--bg-card);
    --text: #0F172A;
    --text-muted: #64748B;
    --border: rgba(15,23,42,.12);
    --border-soft: rgba(15,23,42,.10);
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.12);
    --icon-color: var(--brand);
    --date-icon-color: var(--brand);
    --date-control-bg: color-mix(in srgb, var(--bg-card) 88%, var(--bg-page));
    --date-control-border: color-mix(in srgb, var(--brand) 30%, var(--border));
    --date-control-hover-bg: color-mix(in srgb, var(--brand) 10%, var(--bg-card));
    --date-control-hover-border: color-mix(in srgb, var(--brand) 45%, var(--border));
    --date-control-hover-ring: 0 0 0 .2rem color-mix(in srgb, var(--brand) 14%, transparent);
    --date-control-focus-ring: 0 0 0 .25rem color-mix(in srgb, var(--brand) 20%, transparent);
}

.lp-theme-premium {
    --brand: #1E7AA8;
    --brand-strong: #165A7D;
    --brand-soft: rgba(30,122,168,.12);
    --brand-2: var(--brand-strong);
    --bg: #F6FAFD;
    --bg-page: #F6FAFD;
    --bg-card: #FFFFFF;
    --surface: var(--bg-card);
    --text: #0F172A;
    --text-muted: #64748B;
    --border: rgba(15,23,42,.12);
    --border-soft: rgba(15,23,42,.10);
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.12);
    --icon-color: var(--brand);
    --date-icon-color: var(--brand);
    --date-control-bg: color-mix(in srgb, var(--bg-card) 88%, var(--bg-page));
    --date-control-border: color-mix(in srgb, var(--brand) 30%, var(--border));
    --date-control-hover-bg: color-mix(in srgb, var(--brand) 10%, var(--bg-card));
    --date-control-hover-border: color-mix(in srgb, var(--brand) 45%, var(--border));
    --date-control-hover-ring: 0 0 0 .2rem color-mix(in srgb, var(--brand) 14%, transparent);
    --date-control-focus-ring: 0 0 0 .25rem color-mix(in srgb, var(--brand) 20%, transparent);
}

.lp-postbooking {
    margin-top: 18px;
}

    .lp-postbooking.is-hidden {
        display: none;
    }

.lp-postbooking-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.lp-postbooking-icon {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 28px;
    margin-bottom: 12px;
}

    .lp-postbooking-icon .glyphicon,
    .lp-postbooking-icon .bi,
    .lp-postbooking-icon svg {
        color: currentColor !important;
        fill: currentColor;
    }

.lp-postbooking-headline {
    margin: 0 0 8px;
    color: var(--text);
}

.lp-postbooking-subheadline {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: var(--lead);
}

.lp-postbooking-steps {
    margin: 0 0 14px;
    padding-left: 18px;
}

    .lp-postbooking-steps li {
        margin-bottom: 6px;
    }

.lp-postbooking-summary {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: var(--small);
}

.lp-postbooking--pending .lp-postbooking-icon {
    color: var(--brand);
}

.lp-postbooking--confirmaction .lp-postbooking-icon {
    color: var(--brand);
}

.lp-postbooking--confirmaction .lp-postbooking-subheadline .lp-confirm-action-type {
    display: block;
}

.lp-postbooking--confirmaction .lp-postbooking-subheadline .lp-confirm-action-date {
    display: block;
    font-size: 0.9em;
    line-height: 1.35;
    margin-top: 20px;
    margin-bottom: 20px;
}

.lp-postbooking--confirmaction #embed-postbooking-cta {
    margin-top: 20px;
}

.lp-postbooking--confirmed .lp-postbooking-icon,
.lp-postbooking--auto .lp-postbooking-icon {
    color: var(--brand-strong);
}

.lp-shell.lp-compact .booking-embed-flow {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.lp-shell.lp-compact #embed-date-group {
    position: relative;
}

.lp-shell.lp-compact #embed-step-2 hr {
    border-color: var(--border);
    margin-bottom: 16px;
}

.lp-shell.lp-compact .embed-slot-chip {
    border-radius: var(--slot-radius);
    font-size: 16px;
    font-weight: 600;
    min-height: 42px;
    min-width: 84px;
    padding: var(--slot-pad-y) var(--slot-pad-x);
    width: auto;
    max-width: none;
}

    .lp-shell.lp-compact .embed-slot-chip.active,
    .lp-shell.lp-compact .embed-slot-chip.is-selected {
        background: var(--brand);
        border-color: var(--brand);
        box-shadow: var(--shadow-sm);
        color: #fff;
    }

.lp-shell.lp-compact .embed-slot-nav {
    margin-top: 10px;
}

.lp-shell.lp-compact #embed-next-slots {
    background: transparent;
    border: 0;
    color: var(--brand-2);
    font-size: 14px;
    font-weight: 600;
    margin: 0 auto;
    padding: 6px 4px;
    text-decoration: underline;
}

    .lp-shell.lp-compact #embed-next-slots,
    .lp-shell.lp-compact #embed-next-slots .glyphicon {
        color: var(--brand-2);
    }

        .lp-shell.lp-compact #embed-next-slots .glyphicon {
            margin-left: 6px;
        }

.lp-shell.lp-compact .embed-actions .btn {
    background: var(--brand);
    border-color: var(--brand);
    border-radius: .9rem;
    color: var(--bg-card);
    font-size: 18px;
    font-weight: 700;
    min-height: 52px;
}

.lp-shell.lp-compact {
    --date-control-bg: color-mix(in srgb, var(--bg-card) 88%, var(--bg-page));
    --date-control-border: color-mix(in srgb, var(--brand) 30%, var(--border));
    --date-control-hover-bg: color-mix(in srgb, var(--brand) 10%, var(--bg-card));
    --date-control-hover-border: color-mix(in srgb, var(--brand) 45%, var(--border));
    --date-control-hover-ring: 0 0 0 .2rem color-mix(in srgb, var(--brand) 14%, transparent);
    --date-control-focus-ring: 0 0 0 .25rem color-mix(in srgb, var(--brand) 20%, transparent);
    --date-icon-color: var(--brand);
}

.lp-shell.lp-trust {
    --lp-trust-scale: var(--booking-landing-font-scale, 1);
    --lp-trust-icon-size: calc(16px * var(--lp-trust-scale));
    --lp-trust-title-size: calc(1.05rem * var(--lp-trust-scale));
    --lp-trust-description-size: calc(.85rem * var(--lp-trust-scale));
    --date-control-bg: color-mix(in srgb, var(--bg-card) 86%, var(--bg-page));
    --date-control-border: color-mix(in srgb, var(--brand) 34%, var(--border));
    --date-control-hover-bg: color-mix(in srgb, var(--brand) 14%, var(--bg-card));
    --date-control-hover-border: color-mix(in srgb, var(--brand) 52%, var(--border));
    --date-control-hover-ring: 0 0 0 .2rem color-mix(in srgb, var(--brand) 18%, transparent);
    --date-control-focus-ring: 0 0 0 .25rem color-mix(in srgb, var(--brand) 24%, transparent);
    --date-icon-color: var(--brand);
}

.lp-surface {
    background: var(--surface);
}

.lp-bg-soft {
    background: color-mix(in srgb, var(--bg-page) 70%, var(--bg-card));
}

.lp-border {
    border: 1px solid var(--border);
}

.bookingfinder-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bookingfinder-gap);
}

.bookingfinder-form-col {
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
}

.bookingfinder-form-col-filters {
    flex: 0 0 calc((100% - var(--bookingfinder-gap)) / 2);
    max-width: calc((100% - var(--bookingfinder-gap)) / 2);
}

.bookingfinder-form-col-data {
    flex: 0 0 calc((100% - var(--bookingfinder-gap)) / 2);
    max-width: calc((100% - var(--bookingfinder-gap)) / 2);
}

.bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-col-filters,
.bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-col-filters,
.bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-col-data,
.bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-col-data {
    flex: 0 0 var(--bookingfinder-side-col-width) !important;
    max-width: var(--bookingfinder-side-col-width) !important;
}

.bookingfinder-public .bookingfinder-layout.bookingfinder-expanded,
.bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded {
    display: grid !important;
    grid-template-columns: var(--bookingfinder-side-col-width) minmax(0, 1fr) var(--bookingfinder-side-col-width);
    column-gap: var(--bookingfinder-gap);
    align-items: start;
}

    .bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-col-filters,
    .bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-col-filters {
        grid-column: 1;
    }

    .bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-slots,
    .bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-slots {
        grid-column: 2;
        flex: 0 0 auto !important;
        max-width: none !important;
        min-width: 0;
    }

    .bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-col-data,
    .bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-form-col-data {
        grid-column: 3;
    }

.bookingfinder-form-row .form-group {
    margin-bottom: 10px;
}

.bookingfinder-range-header {
    align-items: center;
    display: flex;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    margin-bottom: 8px;
    position: relative;
}

.bookingfinder-slot-nav {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 2px;
    gap: 6px;
}

    .bookingfinder-slot-nav .bookingfinder-range-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        line-height: 1;
        text-decoration: none;
        padding: 6px 12px;
        border-radius: 8px;
        border: 1px solid var(--default-border-color, #c8d4e6);
        background-color: #f7f9fc;
        color: var(--primary-bg, #4f77b3);
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }

        .bookingfinder-slot-nav .bookingfinder-range-button:hover,
        .bookingfinder-slot-nav .bookingfinder-range-button:focus,
        .bookingfinder-slot-nav .bookingfinder-range-button:active {
            text-decoration: none;
            background-color: #eaf0fb;
            border-color: #9eb6de;
            color: var(--primary-bg, #4f77b3);
        }

        .bookingfinder-slot-nav .bookingfinder-range-button .glyphicon {
            font-size: 14px;
            line-height: 1;
            margin-top: -1px;
        }

    .bookingfinder-slot-nav .bookingfinder-slot-nav-label {
        font-size: 14px;
        line-height: 1;
    }

.bookingfinder-range-button {
    padding: 2px 6px;
}

.bookingfinder-range-date-button {
    min-width: 190px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--default-border-color, #c8d4e6);
    background-color: #f7f9fc;
    color: #3f4b5e;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .bookingfinder-range-date-button:hover,
    .bookingfinder-range-date-button:focus,
    .bookingfinder-range-date-button:active {
        background-color: #eaf0fb;
        border-color: #9eb6de;
        color: #2f3f59;
    }

.bookingfinder-range-date-input {
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 2px) !important;
    transform: translateX(-50%) !important;
    width: min(430px, calc(100vw - 32px)) !important;
    min-width: 320px !important;
    max-width: min(430px, calc(100vw - 32px)) !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    appearance: none;
    -webkit-appearance: none;
}

.bookingfinder-range-date-input::-webkit-calendar-picker-indicator,
.bookingfinder-range-date-input::-webkit-datetime-edit {
    display: none;
}

    .bookingfinder-range-button:focus,
    .bookingfinder-range-button:focus-visible,
    .bookingfinder-range-button:active,
    .bookingfinder-range-button:active:focus {
        outline: none !important;
        box-shadow: none !important;
    }

.bookingfinder-slot-list {
    min-height: 120px;
}

.bookingfinder-no-slots {
    display: block;
    width: 100%;
    text-align: center;
}

.bookingfinder-slot-grid {
    display: grid;
    grid-template-columns: repeat(var(--bookingfinder-slot-columns-effective, var(--bookingfinder-slot-columns, 3)), minmax(var(--bookingfinder-slot-chip-width), 1fr));
    gap: var(--bookingfinder-slot-gap);
    justify-content: center;
}

.bookingfinder-public .bookingfinder-slot-grid,
.bookingfinder-embed .bookingfinder-slot-grid {
    width: 100%;
    justify-content: start;
}

.bookingfinder-public .bookingfinder-col-slots,
.bookingfinder-embed .bookingfinder-col-slots,
.bookingfinder-public #slot-list,
.bookingfinder-embed #slot-list {
    border: 0;
    box-shadow: none;
}

.bookingfinder-public hr,
.bookingfinder-embed hr,
.booking-embed-flow hr {
    display: none;
}

.bookingfinder-modal .bookingfinder-slot-grid {
    grid-template-columns: minmax(var(--bookingfinder-slot-chip-width), 1fr);
    width: fit-content;
    max-width: 100%;
    justify-content: center;
    column-gap: var(--bookingfinder-slot-gap);
    margin-left: auto;
    margin-right: auto;
    row-gap: var(--bookingfinder-slot-gap);
}

.bookingfinder-modal .bookingfinder-slot-chip {
    width: var(--bookingfinder-slot-chip-width);
    max-width: var(--bookingfinder-slot-chip-width);
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bookingfinder-modal .bookingfinder-col-data .form-control {
    width: 100%;
}

.bookingfinder-public .bookingfinder-col-data .form-control,
.bookingfinder-embed .bookingfinder-col-data .form-control {
    width: 100%;
    max-width: 100%;
}

.bookingfinder-public .bookingfinder-col-data .form-group,
.bookingfinder-embed .bookingfinder-col-data .form-group {
    width: 50%;
    max-width: 50%;
}

.bookingfinder-public .bookingfinder-col-data .mydropdown,
.bookingfinder-embed .bookingfinder-col-data .mydropdown {
    width: 100%;
    max-width: 100%;
}

.bookingfinder-modal .bookingfinder-col-data .form-group,
.bookingfinder-modal .bookingfinder-col-filters .form-group,
.bookingfinder-modal .bookingfinder-col-slots .bookingfinder-range-header,
.bookingfinder-modal .bookingfinder-col-slots .bookingfinder-slot-nav {
    margin-bottom: 8px;
}

.bookingfinder-contact-search-results {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    margin-top: 4px;
    max-height: 220px;
    overflow-y: auto;
    padding: 0;
}

.bookingfinder-contact-search-results .bookingfinder-contact-hit {
    margin-bottom: 4px;
    text-align: left;
    white-space: normal;
    border: 0;
    box-shadow: none;
}

.bookingfinder-contact-search-results .bookingfinder-contact-hit:last-child {
    margin-bottom: 0;
}

.bookingfinder-modal .bookingfinder-col-slots {
    overflow: visible;
}

.bookingfinder-slot-chip {
    width: var(--bookingfinder-slot-chip-width);
    max-width: var(--bookingfinder-slot-chip-width);
    background-color: var(--bookingfinder-slot-bg);
    border: 1px solid var(--bookingfinder-slot-border);
    border-radius: var(--bookingfinder-slot-radius, 14px);
    cursor: pointer;
    font-size: 14px;
    padding: 9px 10px;
    white-space: nowrap;
    align-items: center;
    display: inline-flex;
    justify-content: center;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .bookingfinder-slot-chip:hover,
    .bookingfinder-slot-chip:focus {
        background-color: #f0f6ff;
        border-color: #9fb9e7;
        box-shadow: 0 1px 4px rgba(54, 89, 141, .15);
    }

    .bookingfinder-slot-chip.bookingfinder-slot-chip-hard-risk {
        background-color: #fff4f4;
        border-color: #d9534f;
        color: #a94442;
    }

    .bookingfinder-slot-chip.bookingfinder-slot-chip-hard-safe {
        background-color: #f3fbf3;
        border-color: #3c763d;
        color: #2f6f31;
    }

    .bookingfinder-slot-chip.active {
        background-color: var(--bookingfinder-slot-active-bg);
        border-color: var(--bookingfinder-slot-active-border);
        color: var(--bookingfinder-slot-active-fg);
    }

.bookingfinder-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

#public-bookingfinder-weekday-settings .bookingfinder-chip,
#public-bookingfinder-weekday-settings-preview .bookingfinder-chip,
#public-bookingfinder-daypart-settings .bookingfinder-chip,
#public-bookingfinder-daypart-settings-preview .bookingfinder-chip {
    margin: 0 3px 3px 0 !important;
}

#bookingfinder-weekdays.bookingfinder-chip-group {
    display: grid;
    grid-template-columns: repeat(5, 46px);
    gap: 2px;
}

.bookingfinder-modal #bookingfinder-weekdays.bookingfinder-chip-group {
    grid-template-columns: repeat(5, 46px);
}

#bookingfinder-shortcuts.bookingfinder-chip-group,
#bookingfinder-dayparts.bookingfinder-chip-group {
    gap: 2px;
}

#bookingfinder-shortcuts .bookingfinder-chip,
#bookingfinder-dayparts .bookingfinder-chip {
    margin: 0;
}

.bookingfinder-type-chip-group {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
}

.bookingfinder-type-chip-group .bookingfinder-type-chip {
    margin: 0;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    text-align: left;
    font-size: 14px;
    line-height: 1.2;
    font-family: inherit;
}

#bookingfinder-weekdays .bookingfinder-chip {
    width: 46px;
    padding: 4px 0;
    justify-content: center;
}

.bookingfinder-embed #bookingfinder-weekdays .bookingfinder-chip,
.bookingfinder-public #bookingfinder-weekdays .bookingfinder-chip {
    margin: 0 !important;
}

#embed-list-chips.bookingfinder-chip-group {
    flex-direction: column;
}

#embed-list-chips .bookingfinder-chip {
    width: 100%;
    justify-content: flex-start;
    border: 1px solid var(--settings-chip-border);
    border-radius: 18px;
    background-color: var(--settings-chip-bg);
    color: var(--settings-chip-fg);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    padding: 6px 12px;
    text-align: left;
    white-space: nowrap;
}

    #embed-list-chips .bookingfinder-chip:hover,
    #embed-list-chips .bookingfinder-chip:focus {
        border-color: var(--settings-chip-hover-border);
        outline: none;
    }

    #embed-list-chips .bookingfinder-chip.active {
        background-color: var(--settings-chip-active-bg);
        border-color: var(--settings-chip-active-border);
        color: var(--settings-chip-active-fg);
    }

.bookingfinder-chip {
    background-color: var(--bookingfinder-chip-bg);
    border: 1px solid var(--bookingfinder-chip-border);
    border-radius: 16px;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 10px;
}

    .bookingfinder-chip.active {
        background-color: var(--bookingfinder-chip-active-bg);
        border-color: var(--bookingfinder-chip-active-border);
        color: var(--bookingfinder-chip-active-fg);
    }

.bookingfinder-type-description {
    background-color: var(--bookingfinder-description-bg);
    border: 1px solid var(--bookingfinder-description-border);
    border-radius: 8px;
    color: var(--bookingfinder-description-fg);
    font-size: 12px;
    padding: 8px 10px;
    margin-bottom: 10px;
}

    .bookingfinder-type-description p:last-child {
        margin-bottom: 0;
    }

.bookingfinder-toggle {
    align-items: center;
    background-color: var(--bookingfinder-toggle-off-bg);
    border-radius: 50%;
    border: 1px solid var(--bookingfinder-toggle-off-border);
    display: inline-flex;
    height: 14px;
    justify-content: center;
    padding: 0;
    width: 14px;
}

    .bookingfinder-toggle.active {
        background-color: var(--bookingfinder-toggle-on-bg);
        border-color: var(--bookingfinder-toggle-on-border);
    }

    .bookingfinder-toggle:focus,
    .bookingfinder-toggle:focus-visible {
        outline: 2px solid var(--bookingfinder-toggle-focus);
        outline-offset: 2px;
    }

.bookingfinder-date-accordion {
    margin-bottom: 10px;
    margin-top: 8px;
}

.bookingfinder-embed .bookingfinder-date-accordion,
.bookingfinder-public .bookingfinder-date-accordion {
    display: block;
}

.bookingfinder-modal .bookingfinder-date-accordion {
    display: block;
}

.bookingfinder-embed .bookingfinder-date-toggle,
.bookingfinder-public .bookingfinder-date-toggle {
    display: none;
}

.bookingfinder-modal .bookingfinder-date-toggle {
    display: none;
}

.bookingfinder-embed .bookingfinder-date-body,
.bookingfinder-public .bookingfinder-date-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 6px;
    row-gap: 6px;
    width: 100%;
}

.bookingfinder-modal .bookingfinder-date-body {
    display: block;
}

.bookingfinder-embed .bookingfinder-date-body.collapse:not(.in),
.bookingfinder-public .bookingfinder-date-body.collapse:not(.in) {
    visibility: hidden;
    pointer-events: none;
    height: auto !important;
    overflow: visible;
}

.bookingfinder-embed .bookingfinder-date-body .bookingfinder-date-field,
.bookingfinder-public .bookingfinder-date-body .bookingfinder-date-field {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
}

.bookingfinder-modal .bookingfinder-date-body .bookingfinder-date-field {
    width: 100%;
    max-width: 100%;
    margin-bottom: 6px;
}

.bookingfinder-embed .bookingfinder-date-field .input-group,
.bookingfinder-public .bookingfinder-date-field .input-group {
    width: 100%;
    border-radius: var(--booking-field-radius);
    overflow: hidden;
}

.bookingfinder-modal .bookingfinder-date-field .input-group {
    width: 100%;
    border-radius: var(--booking-field-radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.bookingfinder-embed .bookingfinder-date-field .input-group-addon,
.bookingfinder-public .bookingfinder-date-field .input-group-addon {
    display: table-cell;
}

.bookingfinder-modal .bookingfinder-date-field .input-group-addon {
    display: table-cell;
    cursor: pointer;
}

.bookingfinder-modal .bookingfinder-date-field .form-control {
    cursor: pointer;
}

.bookingfinder-modal .bookingfinder-date-field .input-group:hover .form-control,
.bookingfinder-modal .bookingfinder-date-field .input-group:hover .input-group-addon,
.bookingfinder-modal .bookingfinder-date-field .input-group:focus-within .form-control,
.bookingfinder-modal .bookingfinder-date-field .input-group:focus-within .input-group-addon {
    background-color: #eef5ff;
}

.bookingfinder-embed .bookingfinder-date-field .form-control,
.bookingfinder-public .bookingfinder-date-field .form-control {
    border-radius: var(--booking-field-radius) !important;
}

.bookingfinder-modal .bookingfinder-date-field .form-control {
    border-radius: var(--booking-field-radius) !important;
}


.bookingfinder-embed #load-slots,
.bookingfinder-public #load-slots {
    display: none;
}

.bookingfinder-date-toggle {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: 600;
    gap: 6px;
    height: 34px;
    line-height: 34px;
}

    .bookingfinder-date-toggle .glyphicon {
        font-size: 18px;
        line-height: 34px;
    }

.bookingfinder-date-body {
    margin-top: 8px;
}

.bookingfinder-date-field .input-group-addon {
    background-color: #ffffff;
}

.bookingfinder-selected-slot {
    margin: 10px 0;
}

.booking-confirm-card {
    border: 1px solid var(--bookingfinder-slot-border, #d8d8d8);
    border-radius: var(--booking-field-radius, 10px);
    background: var(--booking-surface, #ffffff);
    padding: 10px 12px;
}

.booking-confirm-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--booking-label, #24303f);
}

    .booking-confirm-card-head .glyphicon {
        font-size: 16px;
    }

.booking-confirm-card-sub {
    margin-top: 6px;
    color: var(--booking-label, #24303f);
}

.booking-confirm-card-actions {
    margin-top: 10px;
}

.booking-confirm-card.booking-confirm-card-info {
    border-color: var(--booking-accent, #1f6aa5);
    background: rgba(31, 106, 165, 0.08);
}

.booking-confirm-card.booking-confirm-card-success {
    border-color: #2e7d32;
    background: rgba(46, 125, 50, 0.08);
}

.booking-confirm-card.booking-confirm-card-error {
    border-color: #c0392b;
    background: rgba(192, 57, 43, 0.08);
}

@media (max-width: 767px) {

    .bookingfinder-layout {
        flex-direction: column;
    }

    .bookingfinder-slots {
        width: 100%;
    }

    .bookingfinder-public .bookingfinder-slot-grid,
    .bookingfinder-embed .bookingfinder-slot-grid {
        grid-template-columns: repeat(var(--bookingfinder-slot-columns-mobile-effective, var(--bookingfinder-slot-columns-mobile, 2)), minmax(var(--bookingfinder-slot-chip-width), 1fr));
        justify-content: stretch;
    }

    .bookingfinder-public,
    .bookingfinder-embed {
        margin: 12px 8px;
        padding: 12px;
        border-radius: 8px;
    }
}

@media (max-width: 420px) {
    .bookingfinder-mobile-internal .bookingfinder-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bookingfinder-mobile-internal .bookingfinder-date-open-label {
        display: none;
    }

    .bookingfinder-mobile-internal .bookingfinder-date-field-start .input-group-addon {
        min-width: 42px;
    }
}

@media (max-width: 991px) {

    .bookingfinder-public .bookingfinder-layout.bookingfinder-expanded,
    .bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded {
        flex-direction: column;
    }

        .bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-form,
        .bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-form,
        .bookingfinder-public .bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-slots,
        .bookingfinder-embed .bookingfinder-layout.bookingfinder-expanded .bookingfinder-col-slots {
            flex: 0 0 100%;
            max-width: 100%;
        }

    .bookingfinder-public .bookingfinder-form-col,
    .bookingfinder-embed .bookingfinder-form-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .bookingfinder-public .bookingfinder-col-form,
    .bookingfinder-embed .bookingfinder-col-form {
        display: contents;
    }

    .bookingfinder-public .bookingfinder-form-grid,
    .bookingfinder-embed .bookingfinder-form-grid {
        display: contents;
    }

    .bookingfinder-public .bookingfinder-form-col-filters,
    .bookingfinder-embed .bookingfinder-form-col-filters {
        order: 1;
    }

    .bookingfinder-public .bookingfinder-col-slots,
    .bookingfinder-embed .bookingfinder-col-slots {
        order: 2;
    }

    .bookingfinder-public .bookingfinder-form-col-data,
    .bookingfinder-embed .bookingfinder-form-col-data {
        order: 3;
    }
}

/*Kleinere Header und Footer für den modalen Dialog: weniger padding oben/unten und kein Rahmen*/

.modal-header-small,
.modal-footer-small {
    border: none;
    padding: 8px 15px;
}

footer > a {
    padding-left: 0px;
    padding-right: 20px;
}

    footer > a:link,
    footer > a:visited,
    footer > a:hover,
    footer > a:active {
        text-decoration: none;
    }

.container-fluid {
    overflow: auto;
}

/*Kalenderansicht / fullcalendar */

.small-allday {
    font-size: 0.7em;
}

.fc .fc-event.buffer-event,
.fc .fc-event.buffer-event .fc-event-main,
.fc .fc-event.buffer-event .fc-event-main-frame,
.fc .fc-event.buffer-event .fc-event-title,
.fc .fc-event.buffer-event .fc-event-time,
.fc .fc-event.buffer-event .fc-event-title-container,
.fc .fc-list-event.buffer-event,
.fc .fc-list-event.buffer-event .fc-list-event-graphic,
.fc .fc-list-event.buffer-event .fc-list-event-title {
    opacity: 0.5 !important;
}

.calendar-search {
    margin-top: 20px;
    padding-bottom: 3px !important;
}

/*Die normale Ansicht der Kalenderseite mit Sidebar links für z.B. Minikalender*/

.calendar-grid {
    display: grid;
    grid-row-gap: 8px;
    grid-column-gap: 8px;
    grid-template:
        "hd content" minmax(30px, 30px)
        "sd content" minmax(200px, auto);
    grid-template-columns: 210px auto;
}

/*Diese Ansicht der Kalenderseite gilt, wenn nur ein einzelner Kalender angezeigt

    werden soll. Die Sidebar ist dann nicht sichtbar.

*/

.calendar-grid-singlecalendar {
    display: grid;
    grid-row-gap: 8px;
    grid-column-gap: 8px;
    grid-template:
        "hd content" minmax(0px, 30px)
        "sd content" minmax(0px, auto);
    grid-template-columns: 0px auto;
}

.calendar-grid .header {
    grid-area: hd;
    /*background-color: indianred;*/
}

.calendar-grid .content {
    grid-area: content;
    min-width: 500px;
    /*background-color: lightgreen;*/
}

.calendar-grid .sidebar {
    grid-area: sd;
    /*background-color: lightyellow;*/
}

/*Toolbar*/

.calendar-grid .dropdown-menu button {
    width: 100%;
    border-radius: 0;
    text-align: left;
}

    .calendar-grid .dropdown-menu button:hover,
    .calendar-grid .dropdown-menu label.checkmark-container:hover {
        background-color: #eee;
    }

div#calendar.fc a {
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: none !important;
}

.fc .fc-toolbar-title {
    opacity: 0.75;
    text-align: left;
}

/*.fc .fc-non-business {

    background-color: #5f5353;

}*/

.fc-col-header-cell a, .fc-timegrid-axis a, .fc-daygrid-week-number, .fc-daygrid-day-number {
    text-decoration: none !important;
    cursor: pointer;
}

.fc-list-event {
    cursor: pointer;
}

/*Termine in Kalenderansicht*/

.busystatus-available {
    border-left-width: 4px !important;
    border-left-style: dotted !important;
    border-left-color: white !important;
}

.attendancestatus-absent {
    opacity: 0.5 !important;
}

/*Dropdowns nebeneinander anzeigen*/

.dropdown-inline .dropdown {
    display: inline;
    padding-bottom: 6px;
    padding-top: 6px;
}

    .dropdown-inline .dropdown:not(:first-child) {
        margin-left: 8px;
    }

/*Kontextmenus*/

.ctxmenu {
    padding: 0;
    width: 100%;
}

    .ctxmenu button {
        background-color: transparent;
        border: none;
        box-shadow: none;
        -webkit-box-shadow: none;
        display: block;
        margin: 0;
        outline: none !important;
        padding: 6px 12px !important;
        text-align: left;
        width: 100%;
    }

        .ctxmenu button:hover {
            background-color: #e4e4e4;
        }

/*Alle Datepicker */

.datepicker table tr td, .datepicker table tr th {
    border-radius: 20px;
}

/*Schreibgeschützte Datepicker nicht als schreibgeschützt darstellen*/

div.date input[readonly] {
    background-color: transparent !important;
    cursor: pointer;
}

/*Datepicker auf Kalenderseite*/

.calendar-grid .datepicker th {
    font-weight: normal;
}

    .calendar-grid .datepicker tbody tr, .calendar-grid .datepicker th.dow {
        font-size: 0.8em;
    }

/*buttons*/

.btn-default:focus {
    outline: none !important;
}

.trustedcalendar {
    font-size: 16px;
    padding-top: 3px;
    color: #43dd4b !important;
    float: right !important;
    opacity: 1;
    cursor: help;
}

/*Kalenderansicht, Kalenderauflistung*/

.calendarlist-container {
    box-sizing: border-box;
    margin-top: 12px;
}

.calendarlist-grid {
    display: grid;
    /*grid-row-gap: 8px;*/

    grid-column-gap: 4px;
    grid-template: "lbl btn" minmax(30px, auto);
    grid-template-columns: auto 62px;
}

.calendarlist-label {
    grid-area: lbl;
    opacity: 0.85;
    padding: 8px 4px 8px 4px;
}

/*Buttons in Überschrift 'Meine Kalender' und 'Weitere Kalender'*/

.calendarlist-button {
    grid-area: btn;
    text-align: end;
    padding-top: 6px;
    padding-right: 2px;
    padding-bottom: 6px;
}

    /* Kalender-Checkbox in der Kopfzeile sichtbar und klickbar halten */

    .calendarlist-button .checkmark-container {
        display: inline-block;
        height: 20px;
        margin-right: 6px;
        padding: 0;
        position: relative;
        overflow: visible;
        min-width: 20px;
        min-height: 20px;
        vertical-align: middle;
        width: 20px;
    }

        .calendarlist-button .checkmark-container .checkmark {
            box-sizing: border-box;
            display: block;
            opacity: 1;
            z-index: 1;
            background-color: #fff;
            border-color: #4e4b4b;
        }

        .calendarlist-button .checkmark-container .checkmark-sm {
            border: 1px solid #4e4b4b !important;
        }

        .calendarlist-button .checkmark-container input:checked ~ .checkmark:after {
            content: "";
            display: block !important;
            border-color: #4e4b4b !important;
            border-style: solid;
        }

        .calendarlist-button .checkmark-container .checkmark-sm:after {
            border-width: 0 2px 2px 0;
        }

    .calendarlist-button #addmycalendar,
    .calendarlist-button #addothercalendar,
    .calendarlist-button [name="collapse-sign"] {
        top: -5px;
    }

/*Buttons pro Kalender*/

.calendar-button {
    grid-area: btn;
    text-align: end;
    padding-top: 8px;
    padding-right: 2px;
    padding-bottom: 6px;
}

    .calendar-button div.popover-remove,
    .calendar-button div.popover-options,
    .calendarlist-button div.popover-othercalendar {
        display: inline;
    }

    .calendarlist-button span, .calendar-button span {
        font-size: 0.9em;
        font-weight: 400;
        opacity: 0.7;
        /*padding-left für den letzten Button funktioniert hier nicht, weil das Popup die Reihenfolge durcheinander

        bringt. Und aus irgendeinem Grund sind die Abstände der bisher zwei Buttons in calendar-button geringer als in calendarlist-button.

        Darum wird padding-left gezielt inline zugewiesen.

    */
    }

.calendar-grid button#addappointment {
    border-radius: 24px;
}

.calendarlist-header {
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
}

    .calendarlist-header:hover {
        background-color: #eee;
    }

.calendarlist-content {
    font-size: 1em;
    font-weight: normal;
    cursor: pointer;
    padding-left: 4px;
    /*margin-top: 8px;*/
}

    .calendarlist-content .calendarname {
        padding-top: 8px;
        font-size: 14px;
    }

    .calendarlist-content div[role=listitem] {
        display: block;
        padding-top: 3px;
        padding-bottom: 2px;
    }

        .calendarlist-content div[role=listitem]:hover {
            background-color: #eee;
        }

/*Kalenderseite, Auflistung der Kalender*/

/*Eigene Checkboxen*/

.checkmark-container {
    display: block;
    position: relative;
    padding-left: 28px;
    padding-top: 4px;
    cursor: pointer;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */

    .checkmark-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark {
    position: absolute;
    top: 4px;
    left: 0;
    height: 20px;
    width: 20px;
    border: 1px solid var(--text-color); /*Bei checkmark-bold ist der Rahmen dicker, wodurch Farben besser zur Geltung kommen*/

    border-radius: 4px;
    background-color: transparent;
}

/*Beim dicken Rahmen kommen Farben besser zur Geltung*/

.checkmark-bold {
    border: 2px solid;
}

/**/

.checkmark-noborder {
    border: none;
}

span.checkmark-sm {
    height: 16px;
    top: 2px;
    width: 16px;
}

.checkmark-container:hover input ~ .checkmark {
    background-color: #eee;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkmark-container input:checked ~ .checkmark:after {
    display: block;
}

/*Der Haken selbst: Dieser Haken ist für die einfachen Checkboxen mit 1px Rahmen*/

.checkmark-container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 12px;
    border: solid var(--text-color);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*Der Haken selbst: Dieser Haken ist für die farblichen Checkboxen mit 2px Rahmen*/

.checkmark-container .checkmark-bold:after {
    left: 6px;
    top: 1px;
    width: 5px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkmark-container .checkmark-sm:after {
    height: 9px;
    left: 5px;
    top: 2px;
    width: 4px;
}

/*Kalendereinstellungen*/

.settings-grid {
    display: grid;
    grid-row-gap: 8px;
    grid-column-gap: 80px;
    grid-template:
        "hd hd" minmax(40px, 40px)
        "sd content" minmax(200px, auto);
    grid-template-columns: 270px auto;
}

    .settings-grid .header {
        grid-area: hd;
    }

        .settings-grid .header button {
            padding-top: 4px;
            padding-bottom: 4px;
        }

    .settings-grid .content {
        grid-area: content;
        min-width: 300px;
        max-width: 500px;
        padding-top: 6px;
    }

        .settings-grid .content.appointmenttypes-card {
            max-width: 930px;
            width: 100%;
        }

    .settings-grid .sidebar {
        grid-area: sd;
    }

@media (max-width: 991px) {

    .settings-grid {
        grid-column-gap: 16px;
        grid-row-gap: 12px;
        grid-template:
            "hd" auto
            "sd" auto
            "content" auto / minmax(0, 1fr);
        grid-template-columns: minmax(0, 1fr);
    }

        .settings-grid .content {
            min-width: 0;
            max-width: none;
            width: 100%;
        }

            .settings-grid .content.appointmenttypes-card {
                max-width: none;
            }
}

@media (max-width: 767px) {

    .settings-grid {
        grid-row-gap: 10px;
    }

        .settings-grid .sidebar div[role=group] {
            margin-left: 12px;
        }
}

/*TreeView Kalendereinstellungen*/

.settings-grid .sidebar div[role=group] {
    margin-left: 20px;
}

.settings-grid div[role=tree] > div.grid:not(:first-child) {
    margin-top: 6px;
}

.settings-grid div[role=tree] > div[role=treeitem].header {
    margin-top: 24px;
    margin-bottom: 5px;
    padding-left: 12px;
}

.calendarcolor {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    margin-right: 8px;
    padding-top: 1px;
    vertical-align: middle;
}

.calendarcolor-active .glyphicon {
    color: white;
    top: 0;
    left: 2px;
    font-size: 0.9em;
}

#colorpalette .calendarcolor {
    margin-bottom: 6px;
    margin-left: 3px;
    margin-right: 3px;
}

/*Button neben Label Kalendercolor*/

#color.calendarcolor {
    margin-left: 6px;
}

#colorpalette button#closecolor {
    margin-top: 4px;
    width: 130px;
}

.ctxmenu #colorpalette {
    padding: 14px 8px;
}

.hd2 {
    font-size: 16px;
    font-weight: 400;
    opacity: 0.85;
}

#accountingsetting .hd2,
#individualpaymentcondition .hd2,
#accountingexport .hd2 {
    margin-bottom: 12px;
}

.hd3 {
    font-size: 0.9em;
    font-weight: 600;
    opacity: 0.85;
}

.settings-grid .sidebar .grid {
    cursor: pointer;
    display: grid;
    grid-column-gap: 0;
    grid-template:
        "sglabel sgbtn" minmax(30px, 30px);
    grid-template-columns: auto 50px;
}

    .settings-grid .sidebar .grid:hover {
        background-color: #eee;
        border-top-right-radius: 24px;
        border-bottom-right-radius: 24px;
    }

    .settings-grid .sidebar .grid .grid-label {
        grid-area: sglabel;
    }

    .settings-grid .sidebar .grid .grid-button {
        grid-area: sgbtn;
        text-align: end;
    }

        .settings-grid .sidebar .grid .grid-button span {
            color: var(--settings-nav-fg);
            padding-top: 7px;
            padding-right: 2px;
            padding-bottom: 6px;
            font-size: 0.9em;
            opacity: 0.85;
        }

            .settings-grid .sidebar .grid .grid-button span:last-child {
                padding-right: 6px;
                padding-left: 14px;
            }

.settings-grid .sidebar .btn {
    border: none;
    color: var(--settings-nav-fg);
    text-align: left;
    box-shadow: none;
}

    /*submenu buttons, z.b. 'Neuen Kalender einrichten'*/

    .settings-grid .sidebar .btn[data-cardid]:hover {
        box-shadow: none;
        background-color: #eee;
        border-top-right-radius: 24px;
        border-bottom-right-radius: 24px;
    }

    /*submenu buttons pro kalender*/

    .settings-grid .sidebar .btn[data-calendarid][data-cardid] {
        padding-left: 16px;
    }

.settings-grid .sidebar .active-grp {
    box-shadow: none;
    background-color: #eee;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}

.settings-grid .sidebar .active-btn {
    box-shadow: none;
    font-weight: 600;
}

.settings-grid .content .label {
    color: var(--text-color);
    font-size: 0.9em;
    font-weight: 400;
    padding-left: 0;
    white-space: normal;
}

.settings-grid .sidebar label {
    color: var(--text-color);
    font-size: 1em;
    font-weight: 400;
    cursor: pointer;
    padding-right: 0;
    padding-left: 0;
}

.settings-grid #card .help-muted {
    margin-top: 4px;
}

.settings-grid #card hr {
    margin-top: 8px;
    margin-bottom: 16px;
}

.settings-grid #card #newuser {
    /*margin-top: 0;*/

    margin-bottom: 8px;
    width: 100%;
}

    .settings-grid #card #newuser span {
        padding-right: 8px;
    }

.settings-grid #card #usersharings .row {
    margin-bottom: 4px;
}

.settings-grid #card #usersharings span.fa-user,
#guestlist span.fa-user {
    background-color: #eee;
    border-radius: 24px;
    color: #ccc;
    padding: 5px 6px;
    font-size: 12px;
}

.settings-grid #card .bookingfinder-settings-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

    .settings-grid #card .bookingfinder-settings-card .form-group {
        margin-bottom: 0;
    }

    .settings-grid #card .bookingfinder-settings-card .text-muted {
        margin-top: 6px;
    }

.settings-grid #card .bookingfinder-chip-group {
    gap: 12px;
}

.settings-grid #card .bookingfinder-chip {
    padding: 6px 12px;
}

#guestlist button.close {
    font-size: inherit;
    padding-right: 4px;
}

#guestlist [role="listitem"] {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    margin-left: 0;
}

#guestlist {
    max-height: 100px;
    overflow: hidden auto;
}

#card .remindercontainer,
.dlgappointment .remindercontainer {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

    #card .remindercontainer li {
        display: inline-block;
        margin-bottom: 8px;
    }

    /*.dlgappointment .remindercontainer li {

    display: inline-block;

    margin-bottom: 4px;

}*/

    #card .remindercontainer input[name=interval] {
        margin-left: 8px;
        margin-right: 8px;
        padding-left: 4px;
        padding-right: 4px;
        text-align: right;
        width: 55px;
    }

    .dlgappointment .remindercontainer input[name=interval] {
        /*margin-left: 8px;

    margin-right: 8px;*/

        padding-left: 4px;
        padding-right: 4px;
        text-align: right;
        width: 55px;
    }

    .dlgappointment .remindercontainer input[name=interval] {
        padding-bottom: 7px;
        padding-top: 7px;
    }

        .dlgappointment .remindercontainer input[name=interval]:focus {
            padding-bottom: 5px;
        }

    #card .remindercontainer input[name=time],
    .dlgappointment .remindercontainer input[name=time] {
        padding-left: 4px;
        padding-right: 4px;
        text-align: center;
        width: 60px;
    }

    #card .remindercontainer span,
    .dlgappointment .remindercontainer span {
        margin-left: 8px;
        margin-right: 8px;
    }

    #card .remindercontainer .rndbutton,
    .dlgappointment .remindercontainer .rndbutton {
        color: #8f8f8f;
        font-size: 16px;
        font-weight: 700;
        padding: 8px 12px;
        text-align: center;
        vertical-align: middle;
    }

        #card .remindercontainer .rndbutton:hover,
        .dlgappointment .remindercontainer .rndbutton:hover {
            background-color: #efefef !important;
            border-radius: 50%;
            cursor: pointer;
        }

    .dlgappointment .remindercontainer select {
        border: none !important;
        box-shadow: none;
        height: 34px;
        padding: 6px 4px 6px 4px;
        width: unset;
    }

        .dlgappointment .remindercontainer select[disabled] {
            background-color: #eee;
            cursor: not-allowed;
        }

.dlgappointment [disabled]:not([data-premiumordered]) {
    opacity: unset !important;
}

.dlgappointment .remindercontainer select:hover {
    background-color: #eee;
}

.dlgappointment .remindercontainer select option {
    background-color: #fff !important;
}

.dlgappointment .remindercontainer select,
.dlgappointment .remindercontainer input,
.dlgappointment .remindercontainer span {
    vertical-align: middle;
}

/*Dialog Termin*/

.dlgappointment input:not([type=checkbox]),
.dlgappointment textarea {
    background-color: transparent;
    border: none;
    box-shadow: none;
    cursor: text;
    outline: none !important;
    padding: 8px;
    -webkit-box-shadow: none;
}

.dlgappointment textarea {
    display: block;
    resize: none;
    width: 100%;
}

    .dlgappointment input:focus,
    .dlgappointment textarea:focus {
        background-color: #eee;
        border-bottom: 2px solid dodgerblue;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: none;
        -webkit-box-shadow: none;
        outline: none !important;
    }

    .dlgappointment input:hover,
    .dlgappointment textarea:hover {
        background-color: #eee;
        cursor: pointer;
    }

    .dlgappointment input:not([type=checkbox]):focus,
    .dlgappointment textarea:focus {
        cursor: text;
    }

.dlgappointment .rndbutton {
    padding: 4px 6px;
}

    .dlgappointment .rndbutton:hover {
        background-color: #ccc !important;
        border-radius: 4px;
        cursor: pointer;
    }

.dlgappointment #ctrl-contacts span.btn {
    background-color: transparent;
}

.dlgappointment .hover-row {
    background-color: #fafafa;
    border-radius: 4px;
}

    .dlgappointment .hover-row:hover {
        background-color: #efefef;
    }

.dlgappointment input#title {
    font-size: 1.5em;
}

.dlgappointment input#subject {
    font-size: 16px;
}

.dlgappointment label#startdate {
    /*margin-left: 4px;*/
}

.dlgappointment label#starttime {
    cursor: pointer;
    margin-left: 12px;
    margin-right: 2px;
}

.dlgappointment label#endtime {
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
}

.dlgappointment label#enddate {
    margin-left: 12px;
}

    .dlgappointment label#endtime.invalid,
    .dlgappointment label#enddate.invalid {
        background-color: rgb(252, 232, 230);
    }

.dlgappointment input#startdate {
    display: inline;
    margin: 0;
    padding: 4px 4px 4px 8px;
    width: 100%;
}

.dlgappointment input#starttime {
    cursor: text;
    display: inline;
    margin: 0 0 0 8px; /*links 8px mehr als das startdate*/

    padding: 1px 4px 4px 8px;
    width: 100%;
}

.dlgappointment input#endtime {
    cursor: text;
    display: inline;
    margin: 0;
    padding: 1px 4px 4px 8px;
    width: 100%;
}

.dlgappointment div#enddate {
    margin-left: 8px;
}

.dlgappointment input#enddate {
    display: inline;
    margin: 0;
    padding: 4px 4px 4px 8px;
    width: 100%;
}

.dlgappointment #reminderinfo {
    padding: 6px;
}

.dlgappointment .icon-col span {
    padding-left: 8px;
    padding-top: 11px;
}

.dlgappointment .icon-col .fa-map-pin {
    padding-left: 10px;
    opacity: 0.8;
}

.popover .time {
    font-size: 14px;
    padding: 6px 8px;
}

    .popover .time:hover {
        background-color: #eee;
        border-radius: 24px;
        cursor: pointer;
    }

.popover .time-active {
    background-color: blanchedalmond;
    border-radius: 24px;
    font-weight: 600;
}

.dlgappointment .moreoptions {
    padding-bottom: 6px;
    padding-left: 7px;
}

    .dlgappointment .moreoptions .checkmark-container {
        display: inline;
        padding-left: 24px;
    }

    .dlgappointment .moreoptions .summary {
        font-size: 12px;
        margin: 0;
        opacity: 0.65;
        padding: 0 0 8px 8px;
    }

    .dlgappointment .moreoptions .details {
        padding: 0 0 8px 8px;
    }

/*Zeitzone*/

.dlgappointment #btn-tz {
    margin-left: 16px;
}

.dlgappointment .has-innerrow {
    padding-left: 0;
    padding-top: 2px;
}

.dlgappointment .innerrow-1 {
    margin: 0;
}

.dlgappointment .innerrow-2 {
    font-size: 12px;
    margin: 0;
    /*opacity: 0.85; weiß nicht mehr, warum ich das auf 0.85 gesetzt hatte. Für das Serienmuster-Dropdown darf opacity aber nicht gesetzt sein*/
}

.dlgappointment .col-xs-11 {
    margin-bottom: 8px;
    padding-left: 4px;
}

.dlgappointment .innercol {
    padding-left: 2px;
}

.dlgappointment .dropdown#recurrence {
    display: inline;
    margin-left: 14px;
}

    .dlgappointment .dropdown#recurrence .dropdown-menu {
        min-width: 240px;
    }

.dlgappointment #allarticles .dropdown button {
    background-color: inherit;
}

    .dlgappointment #allarticles .dropdown button:hover {
        background-color: #ccc;
    }

.dlgappointment #calendardropdown .btn {
    background-color: transparent;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    padding-left: 7px;
}

.dlgappointment button {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.dlgappointment textarea#description {
    min-height: 100px;
}

.btn .caret {
    margin-left: 8px;
}

/**Serientermin*/

.dlgrecurrence input:not([type=radio]) {
    /*background-color: transparent;*/

    border: none;
    border-bottom: 2px solid #eee;
    box-shadow: none;
    cursor: text;
    outline: none !important;
    /*padding: 8px;*/

    -webkit-box-shadow: none;
}

.dlgrecurrence input:focus {
    /*background-color: #eee;*/

    border-bottom: 2px solid dodgerblue;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: none !important;
}

.radio-sm {
    margin-bottom: 7px;
    margin-top: 7px;
}

.label-bold {
    font-size: 0.9em;
    font-weight: 600;
    opacity: 0.85;
}

.dlgrecurrence button {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.dlgrecurrence .r1 {
    margin-bottom: 24px;
}

.dlgrecurrence .r2, .dlgrecurrence .r3 {
    margin-bottom: 8px;
}

.dlgrecurrence .r3 {
    padding-top: 1px;
}

input#r-endat {
    max-width: 150px;
}

input#interval, input#r-endafter {
    background-color: #eee;
    box-shadow: none;
    display: inline;
    /*height: 32px;*/

    padding: 0;
    text-align: center;
    width: 60px;
    /*vertical-align: bottom;*/
}

input#interval {
    margin: 0px 6px 0 6px;
}

input#r-endafter {
    margin: 0px 6px 0 0;
}

.dropdown#freq {
    /*border: none;*/

    display: inline !important;
}

button#freq {
    border-bottom: 2px solid #eee !important;
    padding-bottom: 6px;
    padding-top: 6px;
    vertical-align: baseline;
}

.day-button {
    background-color: #eee;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85em;
    height: 26px;
    margin-bottom: 8px;
    margin-right: 8px;
    margin-top: 8px;
    opacity: 0.9;
    width: 26px;
}

/*Zumindest das M ist breiter als die anderen Buchstaben*/

.day-button-wide {
    padding: 5px 0px 6px 8px;
}

.day-button-narrow {
    padding: 5px 0px 6px 9px;
}

.day-button-active {
    background-color: rgb(26, 115, 232);
    color: white;
}

.external-auth-buttons .form-group {
    margin-bottom: 10px;
}

.row.external-auth-buttons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
}

    .row.external-auth-buttons > .external-auth-button {
        float: none;
        width: auto;
        padding-left: 0;
        padding-right: 0;
    }

.gsi-material-button,
.ms-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #747775;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 400px;
    min-width: min-content;
}

.external-auth-buttons .gsi-material-button {
    margin-right: 0;
}

.external-auth-buttons .ms-material-button {
    margin-left: 0;
}

.external-auth-buttons .external-auth-button:first-child {
    padding-right: 0;
}

.external-auth-buttons .external-auth-button:last-child {
    padding-left: 0;
}

.gsi-material-button .gsi-material-button-icon,
.ms-material-button .ms-material-button-icon {
    height: 20px;
    margin-right: 10px;
    min-width: 20px;
    width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper,
.ms-material-button .ms-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.gsi-material-button .gsi-material-button-contents,
.ms-material-button .ms-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.gsi-material-button .gsi-material-button-state,
.ms-material-button .ms-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gsi-material-button:disabled,
.ms-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
    border-color: #1f1f1f1f;
}

    .gsi-material-button:disabled .gsi-material-button-contents,
    .ms-material-button:disabled .ms-material-button-contents {
        opacity: 38%;
    }

    .gsi-material-button:disabled .gsi-material-button-icon,
    .ms-material-button:disabled .ms-material-button-icon {
        opacity: 38%;
    }

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state,
.ms-material-button:not(:disabled):active .ms-material-button-state,
.ms-material-button:not(:disabled):focus .ms-material-button-state {
    background-color: #303030;
    opacity: 12%;
}

.gsi-material-button:not(:disabled):hover,
.ms-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

    .gsi-material-button:not(:disabled):hover .gsi-material-button-state,
    .ms-material-button:not(:disabled):hover .ms-material-button-state {
        background-color: #303030;
        opacity: 8%;
    }

.gsi-material-button .gsi-material-button-icon svg,
.ms-material-button .ms-material-button-icon svg {
    width: 20px;
    height: 20px;
}

/* AB / Anrufbearbeitung */

/*Die @media-Werte hier setzen die Breiten für die drei Container, statt dass die col-lg Class-Attribute verwendet werden. Wenn die col-Anweisungen

    in phoneservice.js FAQ.resize geändert werden (oder in der account-/user.cshtml-Datei), dann muss das auch hier in den @media-Werten angepaßt werden.

*/

@media (min-width: 1212px) {

    #form-callhandling[data-callview='1'] {
        width: 25%;
    }

    #ab-container {
        width: 33.33333333%;
    }

        #ab-container[data-resized='1'] {
            width: 58.33333333%;
        }

    #gn-container {
        width: 41.66666667%;
    }
}

@media (min-width: 1680px) {

    #form-callhandling[data-callview='1'] {
        width: 23%;
    }

    #ab-container {
        width: 34.33333333%;
    }

        #ab-container[data-resized='1'] {
            width: 57.33333333%;
        }

    #gn-container {
        width: 42.66666667%;
    }
}

#gn-container #gn-organizations, #gn-container #gn-organizationinstruction textarea {
    background-color: lemonchiffon;
}

    #gn-container #gn-organizations legend, #gn-container #gn-callers legend {
        /*border-bottom:none;*/

        margin-bottom: 0px;
    }

        #gn-container #gn-organizations legend span[name="title"] {
            padding: 4px;
        }

#gn-container #gn-callers span[name="counter"] {
    font-size: 0.7em;
}

/*Gesprächsnotiz*/

#sendreply-options {
    margin-top: 4px;
}

    #sendreply-options .radio-inline {
        margin-bottom: 4px;
    }

    #sendreply-options #replyreason {
        font-weight: bold;
        margin-bottom: 4px;
    }

#statusmsg ul[name="sendreply-warning"] {
    padding-inline-start: 10px;
}

.calendarsettings-statusmsg {
    display: block;
    text-align: center;
}

    .calendarsettings-statusmsg .alert {
        display: inline-block;
        text-align: center;
        max-width: 100%;
    }

/*Z.B. Listenelemente, Dropdown-Button wie einen Placeholder anzeigen, wenn 'None' gewählt  ist*/

[data-isnone="1"] {
    color: #999 !important;
}

.placeholder-alert::placeholder {
    color: var(--attention-fg);
    opacity: 1; /* Firefox */
}

.placeholder-alert::-ms-input-placeholder { /* Edge 12 -18 */

    color: var(--attention-fg);
}

.mydropdown button[name=dropdownbtn] {
    text-overflow: ellipsis;
    overflow: hidden;
}

    .mydropdown button[name=dropdownbtn]:not([data-isnone="1"]) {
        /*button[data-isnone="1"] hat eine andere farbe*/

        color: var(--text-color) !important;
    }

    .mydropdown button[name=dropdownbtn] span[name=caption] {
        text-overflow: ellipsis;
        overflow: hidden;
    }

.mydropdown li a {
    padding: 3px 10px;
}

    .mydropdown li a:not([data-isnone="1"]) {
        /*a[data-isnone="1"] hat eine andere farbe*/

        color: var(--text-color) !important;
    }

/*Chat*/

#newchat-container textarea,
#thechat textarea {
    overflow: hidden;
    resize: none;
}

#thefullchat .col-sm-6 {
    padding: 0;
}

/*Gilt für AB und chat. Im chat bekommt der container den Focus nach Eingabe des Chatverlaufs*/

#gn-body, #gn-body:focus, #gn-body:focus-visible {
    outline: none;
}

.chat-caller {
    background-color: aliceblue;
    border-radius: 6px;
    margin: 2px 12px 2px 12px;
    padding: 6px;
}

.chat-agent {
    background-color: antiquewhite;
    border-radius: 6px;
    margin: 2px 12px 2px 12px;
    padding: 6px;
}

.chat-name {
    font-size: 12px;
    font-weight: bold;
    opacity: 0.5;
}

.chat-time {
    font-size: 12px;
    opacity: 0.75;
    text-align: right;
}

.chat-msg p {
    font-size: 16px;
    margin-bottom: 2px;
}

.chatcolor {
    height: 30px; /*gleiche höhe wie reset button*/
}

.codesnippet {
    background-color: #333;
    color: cadetblue;
    font-family: monospace, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.chatbox {
    cursor: default;
}

    .chatbox .panel {
        box-shadow: 4px 4px 12px 8px #ddd;
    }

    .chatbox .panel-heading {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    .chatbox .panel-footer {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        cursor: pointer;
        text-align: center;
    }

.chatconfig label {
    margin: 0;
    vertical-align: middle;
}

.chatconfig .btncolor {
    border: 0;
    border-radius: 6px;
    height: 18px;
    margin-right: 4px;
    vertical-align: middle;
    width: 18px;
}

.chatconfig input#headerbgcolor,
.chatconfig input#buttonbgcolor {
    border: 0;
    height: 0px;
    width: 0px;
}

.chatconfig .chatinput {
    border: none;
    cursor: text;
    font-size: 0.9em;
    opacity: 0.85;
    padding-top: 8px !important;
}

.chatconfig .fa-user-circle {
    background-color: #ccc;
    border-radius: 20px;
    color: #efefef;
    font-size: 22px;
    margin-right: 8px;
}

.chatconfig .fa-paper-plane {
    background-color: transparent;
    color: #ccc;
    cursor: pointer;
    font-size: 16px;
}

.chatconfig .fa-comment-alt {
    background-color: transparent;
    color: white;
    font-size: 16px;
    margin-right: 8px;
}

.chatconfig .panel-heading span {
    vertical-align: text-bottom;
}

.chatconfig .chat-agent {
    background-color: #eee;
    border: 0;
    margin: 0 0 24px 0;
    width: 100%;
}

/*Tagesberichte*/

#dayreports-container {
    border: 2px solid #eee;
    border-radius: 10px 10px;
    margin-bottom: 10px;
    margin-top: 20px;
    min-height: 100px;
    min-width: 150px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px;
}

    #dayreports-container table {
        margin-bottom: 0;
    }

/*News*/

#news-container {
    margin-top: 20px;
    overflow-x: hidden;
    overflow-y: auto;
}

    #news-container .news-menu {
        border: 1px solid #efefef;
        border-radius: 4px;
    }

.news-menu button {
    border: 0;
    margin: 2px;
}

#news-menu2[data-visible="0"] {
    display: none;
}

#news-menu2[data-visible="1"] {
    display: block;
}

#news-container .news-content {
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    margin-top: 6px;
    overflow: hidden;
    overflow-wrap: break-word;
    padding: 4px;
}

    #news-container .news-content .news-header {
        padding-bottom: 6px;
    }

#news-container input {
    background-color: #000;
}

#news-container a[data-toggle] {
    display: inline-flex;
    text-decoration: none;
}

    #news-container a[data-toggle]:hover {
        text-decoration: none;
    }

    #news-container a[data-toggle] span {
        margin-left: 6px;
    }

#news-container [name="btn-container"] {
    margin-bottom: 10px;
}

#news-table td[name="actions"] input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: sub;
}

#news-table td[name="actions"] button {
    padding-left: 8px;
    padding-right: 8px;
}

#news-container ul, #news-container ol {
    /*Einzug verkleinern*/

    padding-inline-start: 20px;
}

#news-container #lastexecution {
    background-color: #eee;
    font-size: 0.9em;
    margin: 10px 0;
    opacity: 0.85;
}

    #news-container #lastexecution div {
        padding: 2px;
    }

/*Mandantenjournal*/

#journal-table td[name="duration"] {
    text-align: right;
}

#journal-table button[name] {
    padding-left: 6px;
    padding-right: 6px;
}

#journal-table td input {
    margin-right: 4px;
    top: -1px;
}

.widget-body td[name="duration"] {
    text-align: right;
}

    #journal-table td[name="duration"] span,
    .widget-body td[name="duration"] span {
        padding: 4px;
    }

        #journal-table td[name="duration"] span[data-timerstatus="1"],
        .widget-body td[name="duration"] span[data-timerstatus="1"] {
            background-color: wheat;
            border-radius: 4px;
        }

        #journal-table td[name="duration"] span[data-timerstatus="2"],
        .widget-body td[name="duration"] span[data-timerstatus="2"] {
            background-color: #e8e8e8;
            border-radius: 4px;
        }

.widget-body #journalsummary {
    float: right;
}

    .widget-body #journalsummary table {
        border: none;
        width: 100%;
    }

        .widget-body #journalsummary table td {
            border: none;
        }

    .widget-body #journalsummary .popover {
        font-size: 13px;
        max-width: unset !important;
        width: 400px;
    }

.widget-body .table {
    margin: 0;
}

.widget-body .popover-content {
    padding: 9px;
}

.widget-body #journalsummary .btn {
    background-color: transparent;
    border: none;
}

.widget-body #journalsummary .fa-spinner.on {
    -webkit-animation: spin 3s linear infinite;
}

.ordercancellation-summary {
    float: right;
}

    .ordercancellation-summary .btn {
        background-color: transparent;
        border: none;
        padding: 2px 6px;
    }

.ordercancellation-tile {
    cursor: pointer;
}

.ordercancellation-tile-title {
    color: var(--primary-bg);
}

.ordercancellation-count {
    font-weight: 600;
}

.ordercancellation-count-new {
    color: #3B82F6;
}

.ordercancellation-count-cancel {
    color: #F97316;
}

.ordercancellation-modal {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ordercancellation-chart-row {
    display: flex;
    align-items: end;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px;
}

.ordercancellation-chart-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ordercancellation-range-button {
    min-width: 36px;
}

.ordercancellation-monthgroup {
    border: none;
    background: transparent;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
    padding: 6px 4px;
}

    .ordercancellation-monthgroup:hover,
    .ordercancellation-monthgroup.active {
        background-color: #cfcfcf;
    }

.ordercancellation-monthbars {
    display: flex;
    align-items: end;
    gap: 3px;
    height: 140px;
    margin-bottom: 6px;
}

.ordercancellation-bar {
    width: 12px;
    border-radius: 3px 3px 0 0;
}

.ordercancellation-bar-new {
    background-color: #3B82F6;
}

.ordercancellation-bar-cancellation {
    background-color: #F97316;
}

.ordercancellation-monthlabel {
    font-size: 11px;
    color: #666;
}

.ordercancellation-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ordercancellation-home .widget-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ordercancellation-home-title {
    color: var(--primary-bg);
}

.widget.ordercancellation-home:hover {
    background-color: transparent !important;
}

.ordercancellation-datefilter {
    margin-top: 4px;
}

.ordercancellation-pie-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ordercancellation-pie {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

    .ordercancellation-pie::after {
        content: '';
        position: absolute;
        inset: 42px;
        border-radius: 50%;
        background: #fff;
    }

.ordercancellation-pie-total {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-size: 24px;
    font-weight: 700;
}

.ordercancellation-pie-value {
    position: absolute;
    z-index: 1;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.ordercancellation-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ordercancellation-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.ordercancellation-legend-new {
    background-color: #3B82F6;
}

.ordercancellation-legend-cancel {
    background-color: #F97316;
}

.ordercancellation-table-box {
    min-width: 0;
}

.ordercancellation-average-symbol {
    cursor: help;
    font-weight: 700;
}

.ordercancellation-table {
    margin-bottom: 0;
}

.ordercancellation-table.table-hover > tbody > tr.ordercancellation-mainrow > td {
    background-color: var(--hover-bg);
}

.ordercancellation-modulerow td {
    color: #666;
}

.ordercancellation-modulecell {
    padding-left: 24px !important;
}

.ordercancellation-module-indent {
    display: inline-block;
    margin-right: 6px;
    color: #888;
}

.ordercancellation-table > tbody > tr.ordercancellation-modulerow > td.ordercancellation-firstactivation-muted {
    opacity: 0.6;
}

.ordercancellation-activefromto-muted {
    opacity: 0.6;
}

@media (max-width: 991px) {

    .ordercancellation-details {
        grid-template-columns: 1fr;
    }
}

/*Info Druckerwarteschlange*/

.printjobinfo {
    border: 2px solid #eee;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    display: inline-block;
    margin-top: 20px;
}

    .printjobinfo .row:first-child {
        text-align: end;
    }

/*Element, über das per Drag&Drop Dateien hochhgeladen werden können*/

.dragover {
    border: 2px dotted #afafaf !important;
    border-radius: 4px;
}

table#contact_table td[name="categories"] span {
    padding-right: 4px;
}

#contactform span.glyphicon-info-sign {
    padding-left: 4px;
}

/* Remove extra left and right margins, due to padding in columns */

.contactcards {
    margin: 0 -5px;
}

    /* Clear floats after the columns */

    .contactcards:after {
        content: "";
        display: table;
        clear: both;
    }

/* Float four columns side by side */

.cardcolumn {
    display: block;
    float: left;
    margin-bottom: 15px;
    padding: 0 10px;
    width: 100%;
}

/* Responsive columns */

@media screen and (min-width: 600px) {

    .cardcolumn {
        width: 50%;
    }
}

@media screen and (min-width: 1000px) {

    .cardcolumn {
        width: 33%;
    }
}

.contactcard {
    background-color: #f1f1f1;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */

    cursor: pointer;
    overflow: hidden;
    overflow-wrap: break-word;
    /*Höhe und Padding sind variable, darum wird das nicht hier festgelegt.

        height: 112px;

    padding: 10px;*/

    text-align: center;
}

    .contactcard:hover {
        background-color: #ccc;
    }

.popover .contactcard, .popover .contactcard:hover {
    background-color: transparent;
    border: none;
    box-shadow: none;
    height: unset;
    padding: 0;
}

.contactcard [name="company"] {
    font-weight: 600;
}

/*Info-Zeichen nur im Suchergebnis-Dialog anzeigen, nicht bei Hover über einen bereits ausgewählten Kontakt.*/

.contactcard [name="more"]:not(.cardcolumn .contactcard [name="more"]) {
    display: none;
}

.cardcolumn .contactcard [name="more"] {
    font-size: 0.9em;
    float: right;
    padding: 5px;
}

.contactcard [name="address"],
.contactcard [name="clientnr"],
.contactcard [name="customernr"],
.contactcard [name="email"],
.contactcard [name="phone"] {
    font-size: 0.9em;
}

.contactcard .popover.in {
    max-width: 400px;
    text-align: left;
}

    .contactcard .popover.in .contactcard {
        text-align: left;
    }

        .contactcard .popover.in .contactcard td {
            padding: 3px;
        }

#dayreport-date {
    display: inline;
    height: unset;
    padding: 2px 4px;
    text-align: center;
    width: 90px;
}

/*Meine Listbox: Modaler Dialog zur Auswahl von Listeneinträgen*/

#dlg-listbox thead tr {
    background-color: #dfdfdf;
}

    #dlg-listbox thead tr th {
        font-weight: 100;
    }

#dlg-listbox tbody tr[data-selected="1"] {
    background-color: #ccc;
}

.faq-reply-group .faq-reply-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 6px;
}

    .faq-reply-group .faq-reply-toolbar label {
        margin-bottom: 0;
    }

/* Booking mobile internal: final one-column cleanup */
.bookingfinder-root.bookingfinder-mobile-internal {
    max-width: 680px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-type-card-icon,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-toggle:not(.bookingfinder-date-toggle-mobile) {
    display: none !important;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field-start .input-group-addon {
    min-width: 124px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-filters,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-slots,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-data,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-data .form-group,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-data .mydropdown,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-data .mydropdown button[name=dropdownbtn],
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-col-data .form-control,
.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-contact-search-group,
.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-contact-search-input,
.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-contact-search-results {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-contact-search-results {
    margin-top: 8px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-slot-chip {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
    text-align: center;
    padding: 6px 8px;
    min-height: 62px;
    height: auto;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-chip {
    font-size: 18px;
    font-weight: 700;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-chip.active,
.bookingfinder-root.bookingfinder-mobile-internal #embed-list-chips .bookingfinder-chip.active,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-type-card.active {
    background-color: var(--bookingfinder-slot-active-bg);
    border-color: var(--bookingfinder-slot-active-border);
    color: var(--bookingfinder-slot-active-fg);
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-type-card-title,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-type-card-title {
    font-size: 18px;
    font-weight: 700;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-type-card-meta {
    font-size: 14px;
    font-weight: 500;
}

/* Mobile internal date selector: one date in accordion */
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-body {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-accordion-mobile {
    margin: 0 0 10px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-toggle-mobile {
    align-items: center;
    background: var(--booking-surface, #ffffff);
    border: 1px solid var(--booking-mobile-border);
    border-radius: 14px;
    color: var(--default-text-color, #1f2937);
    display: flex;
    font-size: 16px;
    font-weight: 600;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 10px 12px;
    width: 100%;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-toggle-mobile[aria-expanded="true"] .glyphicon {
    transform: rotate(180deg);
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-body-mobile[hidden] {
    display: none !important;
}

/* Mobile internal date section and slot nav final unification */
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-open-label {
    display: none !important;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field-start .input-group-addon,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field-end .input-group-addon {
    min-width: 44px;
    text-align: center;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field-start .input-group-addon .glyphicon,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field-end .input-group-addon .glyphicon {
    color: var(--booking-accent);
    font-size: 18px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-date-field .form-control::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-prev-slots,
.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-next-slots,
.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-manage-rebook-prev,
.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-manage-rebook-next {
    align-items: center;
    background: #f4f6f9;
    border: 1px solid #c5ccd7;
    border-radius: 8px;
    color: #5e6b7f;
    display: inline-flex !important;
    font-size: 17px;
    font-weight: 600;
    gap: 6px;
    justify-content: center;
    min-height: 44px;
    padding: 8px 10px;
    text-decoration: none;
}

.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-prev-slots .glyphicon,
.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-next-slots .glyphicon,
.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-manage-rebook-prev .glyphicon,
.bookingfinder-root.bookingfinder-mobile-internal #bookingfinder-manage-rebook-next .glyphicon {
    color: #5e6b7f;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-manage-actions .btn {
    background: #f4f6f9;
    border: 1px solid #c5ccd7;
    border-radius: 8px;
    color: #5e6b7f;
    font-size: 18px;
    font-weight: 600;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-manage-actions .btn.active,
.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-manage-actions .btn[aria-pressed="true"] {
    background: #dde3ec;
    border-color: #b6bfcd;
    color: #3f4a5d;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-manage-rebook-panel {
    margin-top: 10px;
}

.bookingfinder-root.bookingfinder-mobile-internal .bookingfinder-manage-rebook-nav {
    margin-bottom: 10px;
}

.bookingfinder-manage-confirm-dialog .modal-body {
    font-size: 24px;
    font-weight: 600;
}

.bookingfinder-manage-confirm-dialog .modal-footer .btn {
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    min-width: 132px;
    padding: 8px 16px;
}

/* Tasks: zentrales Inline-Layout fuer Teamleiter-Umverteilung */
#tasks-read-root .tasks-operator-layout {
    margin-left: -8px;
    margin-right: -8px;
}

#tasks-read-root .tasks-operator-layout > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

#tasks-read-root .tasks-work-filter-hint {
    margin-bottom: 8px;
}

#tasks-read-root .tasks-case-search-box {
    margin: 8px 15px 0;
}

#tasks-read-root .task-list-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0 15px 8px;
    min-height: 30px;
}

#tasks-read-root .task-list-pagination-link {
    border: 0;
    background: transparent;
    min-width: 20px;
    padding: 3px 2px;
}

#tasks-read-root .task-list-pagination-link.is-current,
#tasks-read-root .task-list-pagination-link:disabled {
    color: #777777;
    cursor: default;
    text-decoration: none;
}

#tasks-read-root .task-list-pagination-link.is-current {
    font-weight: 700;
}

#tasks-read-root .task-list-pagination-link--previous,
#tasks-read-root .task-list-pagination-link--next {
    min-width: auto;
}

#tasks-read-root .task-list-pagination-ellipsis {
    color: #777777;
    min-width: 16px;
    text-align: center;
}

#tasks-read-root .task-workspace-filter-row {
    margin-bottom: 12px;
}

#tasks-read-root .task-workspace-filter-row > .task-responsibility-picker {
    margin-top: 12px;
}

#tasks-read-root .tasks-case-search-box .input-group-addon {
    background: #f7f9fc;
}

#tasks-read-root .task-read-card {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

#tasks-read-root .task-read-card > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tasks-read-root .task-search-result-description,
#tasks-read-root .task-search-result-preview {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-box-orient: vertical;
}

#tasks-read-root .task-search-result-description {
    margin-top: 4px;
    -webkit-line-clamp: 2;
}

#tasks-read-root .task-search-result-preview {
    margin-top: 4px;
    -webkit-line-clamp: 3;
}

#tasks-read-root .task-case-search-filter-row {
    margin-bottom: 8px;
}

#tasks-read-root .task-case-search-filter-row .form-control {
    width: 100%;
}

#tasks-read-root .task-case-search-date-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    cursor: pointer;
    overflow: hidden;
}

#tasks-read-root .task-case-search-date-wrap .form-control {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#tasks-read-root .tasks-work-filter-group-title {
    margin-bottom: 6px;
    margin-top: 8px;
}

#tasks-read-root .tasks-work-filter-group + .tasks-work-filter-group-title {
    margin-top: 12px;
}

#tasks-read-root .tasks-work-filter-group > .btn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tasks-read-root .task-filter-summary {
    background: transparent;
    color: #777777;
    font-weight: 700;
    margin-left: auto;
    padding: 0;
}

#tasks-read-root .tasks-work-filter-group [name="task-work-filter"] {
    display: flex;
    align-items: center;
}

#tasks-read-root .task-filter-summary--overdue {
    color: #b42318;
}

#tasks-read-root .task-filter-summary--due-soon {
    color: #f0ad4e;
}

#tasks-read-root .task-read-meta-block {
    background: #fbfcfe;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    margin-top: 12px;
    padding: 12px 14px;
}

#tasks-read-root .task-read-meta-item + .task-read-meta-item {
    margin-top: 6px;
}

#tasks-read-root .task-read-status-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#tasks-read-root .task-read-header-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

#tasks-read-root .task-read-title-text {
    font-size: 19px;
    line-height: 1.28;
    font-weight: 700;
}

#tasks-read-root .task-read-description-text {
    margin-top: 4px;
    color: #1f2d3d;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tasks-read-root .task-detail-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 18px;
    margin-top: 8px;
}

#tasks-read-root .task-detail-meta-group {
    min-width: 0;
}

#tasks-read-root .task-detail-meta-group > .task-read-meta-item + .task-read-meta-item {
    margin-top: 6px;
}

#tasks-read-root .task-detail-meta-group--children .task-tree-children {
    display: block;
    width: 100%;
    margin-top: 6px;
}

#tasks-read-root .task-detail-meta-item--process {
    flex-wrap: nowrap;
    align-items: center;
}

#tasks-read-root .task-process-toggle,
#tasks-read-root .task-process-create {
    min-width: 0;
    min-height: 0;
    padding: 0 2px;
    color: #5f7f9f;
    font-size: 13px;
    line-height: 1.35;
}

#tasks-read-root .task-process-toggle {
    margin-right: 2px;
}

#tasks-read-root .task-process-create {
    margin-left: 4px;
    font-size: 11px;
}

#tasks-read-root .task-detail-meta-item--process .task-process-title {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tasks-read-root .task-process-show-children {
    min-height: 0;
    padding: 0;
    margin-top: 2px;
}

#tasks-read-root .task-tree-child-row {
    display: flex;
    width: 100%;
    min-width: 0;
    padding-left: 18px;
}

#tasks-read-root .task-tree-node {
    min-width: 0;
    max-width: 100%;
}

#tasks-read-root .task-tree-node-row {
    display: flex;
    min-width: 0;
    width: 100%;
    align-items: flex-start;
}

#tasks-read-root .task-tree-node + .task-tree-node {
    margin-top: 7px;
}

#tasks-read-root .task-tree-node-toggle,
#tasks-read-root .task-tree-node-toggle-placeholder {
    flex: 0 0 18px;
    width: 18px;
    min-height: 0;
    padding: 0;
    color: #5f7f9f;
    font-size: 10px;
    line-height: 1.35;
}

#tasks-read-root .task-tree-node-toggle-placeholder {
    display: inline-block;
}

#tasks-read-root .task-tree-node.is-current .task-tree-child-title {
    font-weight: 600;
}

#tasks-read-root .task-tree-node .task-tree-child-title {
    display: inline-block;
    min-width: 0;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

#tasks-read-root .task-tree-node-create {
    width: 14px;
    min-height: 0;
    padding: 0 1px;
    margin-left: 4px;
    font-size: 10px;
    line-height: 1.35;
    vertical-align: middle;
}

#tasks-read-root .task-tree-empty-create {
    margin-top: 2px;
}

#tasks-read-root .task-tree-node .task-tree-child-content {
    flex: 1 1 0;
}

#tasks-read-root .task-tree-node-loading {
    margin-top: 3px;
}

#tasks-read-root .task-tree-child-row + .task-tree-child-row {
    margin-top: 7px;
}

#tasks-read-root .task-tree-child-row.is-current .task-tree-child-title {
    font-weight: 600;
}

#tasks-read-root .task-tree-child-icon {
    flex: 0 0 auto;
    margin: 3px 6px 0 0;
    color: #8794a6;
}

#tasks-read-root .task-tree-child-content {
    min-width: 0;
}

#tasks-read-root .task-tree-child-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tasks-read-root .task-tree-child-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tasks-read-root .task-detail-meta-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    min-width: 0;
    gap: 0 6px;
    color: #4d5968;
    font-size: 13px;
    line-height: 1.35;
}

#tasks-read-root .task-detail-meta-item--status {
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

#tasks-read-root .task-detail-blocked-label {
    flex: 0 0 auto;
    margin: 0;
    vertical-align: middle;
}

#tasks-read-root .task-detail-meta-icon {
    width: 13px;
    color: #5f7f9f;
    font-size: 12px;
}

#tasks-read-root .task-detail-meta-value {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tasks-read-root .task-detail-meta-action {
    height: auto;
    min-height: 0;
    padding: 0;
    margin-left: 4px;
    font-size: 13px;
    line-height: 1.35;
    vertical-align: baseline;
}

#tasks-read-root .task-metadata-editor-region {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: grid-template-rows 220ms ease, margin-top 220ms ease, opacity 180ms ease, transform 220ms ease;
}

#tasks-read-root .task-metadata-editor-region.is-open {
    grid-template-rows: 1fr;
    margin-top: 10px;
    opacity: 1;
    transform: translateY(0);
}

#tasks-read-root .task-metadata-editor-region-inner {
    min-height: 0;
    overflow: hidden;
}

#tasks-read-root .task-metadata-editor-region + hr.m-t-sm.m-b-sm {
    margin-top: 6px;
    margin-bottom: 8px;
}

#tasks-read-root .task-metadata-editor-region .task-planning-section,
#tasks-read-root .task-metadata-editor-region .task-responsibility-editor {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dfe5ee;
    border-radius: 6px;
    background: #fcfdff;
}

@media (prefers-reduced-motion: reduce) {
    #tasks-read-root .task-metadata-editor-region {
        transition: none;
    }
}

#tasks-read-root .task-detail-relationship-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    margin: 0;
    padding: 0;
}

#tasks-read-root .task-detail-meta-group--relationships {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    min-width: 0;
}

#tasks-read-root .task-detail-split-button {
    display: inline-flex;
    min-width: 0;
}

#tasks-read-root .task-detail-split-button-main {
    min-height: 24px;
    padding: 2px 7px;
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tasks-read-root .task-detail-split-button-toggle {
    min-width: 26px;
    min-height: 24px;
    padding: 2px 6px;
    font-size: 10px;
    margin-left: -1px;
    border-left: 1px solid #9eabb9;
}

#tasks-read-root .task-detail-inline-region {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: grid-template-rows 220ms ease, margin-top 220ms ease, opacity 180ms ease, transform 220ms ease;
}

#tasks-read-root .task-detail-inline-region--structure,
#tasks-read-root .task-detail-inline-region--dependency,
#tasks-read-root .task-detail-timeline-section {
    clear: both;
    width: 100%;
    min-width: 0;
    max-width: none;
}

#tasks-read-root .task-detail-inline-region.is-open {
    grid-template-rows: 1fr;
    margin-top: 10px;
    opacity: 1;
    transform: translateY(0);
}

#tasks-read-root .task-detail-inline-region-inner {
    min-height: 0;
    overflow: hidden;
}

#tasks-read-root .task-detail-inline-region--structure .task-structure-tree,
#task-structure-management-modal .task-structure-tree {
    padding: 10px 12px;
    border: 1px solid #dfe5ee;
    border-radius: 6px;
    background: #fcfdff;
}

#task-structure-management-modal .task-structure-tree {
    max-height: 55vh;
    overflow: auto;
}

#task-structure-management-modal .task-tree-node,
#task-structure-management-modal .task-tree-node-row,
#task-structure-management-modal .task-tree-child-content {
    min-width: 0;
}

#task-structure-management-modal .task-tree-node-row {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

#task-structure-management-modal .task-tree-node + .task-tree-node {
    margin-top: 7px;
}

#task-structure-management-modal .task-tree-node-toggle,
#task-structure-management-modal .task-tree-node-toggle-placeholder {
    flex: 0 0 18px;
    width: 18px;
    min-height: 0;
    padding: 0;
    color: #5f7f9f;
    font-size: 10px;
    line-height: 1.35;
}

#task-structure-management-modal .task-tree-node-toggle-placeholder {
    display: inline-block;
}

#task-structure-management-modal .task-tree-child-icon {
    flex: 0 0 auto;
    margin: 3px 6px 0 0;
    color: #8794a6;
}

#task-structure-management-modal .task-tree-child-content {
    display: flex;
    flex: 1 1 0;
    flex-wrap: wrap;
    align-items: center;
}

#task-structure-management-modal .task-tree-child-title {
    display: inline-block;
    max-width: calc(100% - 24px);
    overflow: hidden;
    padding: 0;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#task-structure-management-modal .task-tree-node.is-current .task-tree-child-title {
    font-weight: 600;
}

#task-structure-management-modal .task-tree-node-create {
    flex: 0 0 auto;
    align-self: center;
    width: 14px;
    min-height: 0;
    padding: 0 1px;
    margin-left: 4px;
    font-size: 10px;
    line-height: 1.35;
    vertical-align: middle;
}

#task-structure-management-modal .task-tree-child-meta {
    flex: 0 0 100%;
}

#task-structure-management-modal .task-tree-empty-create {
    margin-top: 12px;
}

#task-structure-management-modal .task-tree-node-loading {
    margin-top: 3px;
}

#tasks-read-root .task-dependency-pipeline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #dfe5ee;
    border-radius: 6px;
    background: #fcfdff;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

#tasks-read-root .task-dependency-pipeline-stage,
#tasks-read-root .task-dependency-pipeline-items {
    min-width: 0;
}

#tasks-read-root .task-dependency-pipeline-stage-label {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

#tasks-read-root .task-dependency-pipeline-items {
    display: grid;
    gap: 6px;
}

#tasks-read-root .task-dependency-pipeline-card {
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #e1e7ef;
    border-radius: 5px;
    background: #fff;
}

#tasks-read-root .task-dependency-pipeline-stage--current .task-dependency-pipeline-stage-label {
    color: #3b739f;
}

#tasks-read-root .task-dependency-pipeline-card.is-current {
    border-color: #8faec7;
    background: #f2f8fc;
}

#tasks-read-root .task-dependency-pipeline-card-title {
    display: -webkit-box;
    overflow: hidden;
    color: #1f2d3d;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#tasks-read-root .task-dependency-pipeline-card-link {
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
}

#tasks-read-root .task-dependency-pipeline-card-status,
#tasks-read-root .task-dependency-pipeline-card-warning,
#tasks-read-root .task-dependency-pipeline-more,
#tasks-read-root .task-dependency-pipeline-empty {
    display: block;
    margin-top: 2px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.3;
}

#tasks-read-root .task-dependency-pipeline-empty {
    padding: 7px 8px;
    border: 1px dashed #d4dee8;
    border-radius: 5px;
    color: #8492a0;
    background: #fff;
    text-align: center;
}

#tasks-read-root .task-dependency-pipeline-card-warning {
    color: #8a5a00;
}

#tasks-read-root .task-dependency-pipeline-arrow {
    color: #7890a8;
    text-align: center;
}

.task-relationship-modal-subtitle {
    margin: -2px 0 14px;
    overflow-wrap: anywhere;
}

#task-dependency-management-modal .modal-body {
    max-height: 68vh;
    overflow-y: auto;
}

#task-dependency-management-modal .task-dependency-management-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: -2px 0 14px;
}

#task-dependency-management-modal .task-dependency-management-summary-item {
    padding: 3px 7px;
    border: 1px solid #dce5ee;
    border-radius: 999px;
    color: #58697a;
    background: #f7fafc;
    font-size: 12px;
    line-height: 1.25;
}

#task-dependency-management-modal .task-detail-dependencies-section {
    min-width: 0;
    min-height: 100%;
    padding: 12px;
    border: 1px solid #dfe6ee;
    border-radius: 7px;
    background: #fcfdff;
}

#task-dependency-management-modal .task-detail-dependencies-section-title {
    margin: 0;
    color: #263b4e;
    font-size: 14px;
    font-weight: 600;
}

#task-dependency-management-modal .task-detail-dependencies-section-description {
    min-height: 32px;
    margin: 4px 0 10px;
    line-height: 1.35;
}

#task-dependency-management-modal .task-detail-dependencies-list,
#task-dependency-management-modal .task-detail-dependencies-search-results {
    display: grid;
    gap: 6px;
    margin: 0;
}

#task-dependency-management-modal .task-detail-dependencies-list-item,
#task-dependency-management-modal .task-detail-dependencies-search-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 7px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    background: #fff;
    line-height: 1.35;
}

#task-dependency-management-modal .task-detail-dependencies-list-item > span:first-child {
    flex: 1 1 145px;
    min-width: 0;
    overflow-wrap: anywhere;
}

#task-dependency-management-modal .task-detail-dependencies-list-item .btn,
#task-dependency-management-modal .task-detail-dependencies-search-result .btn {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
}

#task-dependency-management-modal .task-detail-dependencies-empty {
    padding: 9px 10px;
    border: 1px dashed #ccd8e5;
    border-radius: 5px;
    color: #718096;
    background: #f8fafc;
}

#task-dependency-management-modal .task-detail-dependencies-search {
    padding-top: 10px;
    margin: 10px 0 0;
    border-top: 1px solid #e3e9f0;
}

#task-dependency-management-modal .task-detail-dependencies-search label {
    margin-bottom: 4px;
    color: #536577;
    font-weight: 600;
}

#task-dependency-management-modal .task-detail-dependencies-search-results {
    margin-top: 7px;
}

#task-dependency-management-modal .task-detail-dependencies-search-result {
    color: #34495e;
    background: #f7fbff;
}

#task-dependency-management-modal .task-detail-dependencies-list-item,
#task-dependency-management-modal .task-detail-dependencies-search-result {
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    #tasks-read-root .task-detail-inline-region {
        transition: none;
    }
}

@media (max-width: 767px) {
    #tasks-read-root .task-detail-relationship-actions {
        gap: 6px;
    }

    #tasks-read-root .task-detail-split-button {
        flex: 1 1 0;
    }

    #tasks-read-root .task-detail-split-button-main {
        flex: 1 1 auto;
    }

    #tasks-read-root .task-dependency-pipeline {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    #tasks-read-root .task-dependency-pipeline-arrow {
        min-height: 18px;
        transform: rotate(90deg);
    }

    #task-dependency-management-modal .task-dependency-management-grid > [class*="col-"] + [class*="col-"] {
        margin-top: 18px;
    }
}

#tasks-read-root .task-responsibility-editor {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e4e9f0;
}

#tasks-read-root .task-metadata-editor-region .task-responsibility-editor {
    margin-top: 0;
    padding: 10px 12px;
    border: 1px solid #dfe5ee;
}

@media (max-width: 1199px) {
    #tasks-read-root .task-detail-meta {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
    }
}

@media (max-width: 767px) {
    #tasks-read-root .task-detail-meta {
        grid-template-columns: minmax(0, 1fr);
    }
}

#tasks-read-root .task-read-meta-block--subtle {
    background: #fcfdff;
    border-color: #dfe5ee;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

#tasks-read-root .task-read-meta-item--status {
    display: flex;
    align-items: center;
    gap: 6px;
}

#tasks-read-root .task-read-status-indicator {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9da9b8;
    display: inline-block;
    flex: 0 0 auto;
}

#tasks-read-root .task-read-status-indicator--open,
#oneInboxRoot .oneinbox-status-indicator.is-open {
    background: #8794a6;
}

#tasks-read-root .task-read-status-indicator--inprogress,
#oneInboxRoot .oneinbox-status-indicator.is-inprogress {
    background: #3b739f;
}

#tasks-read-root .task-read-status-indicator--snoozed,
#oneInboxRoot .oneinbox-status-indicator.is-deferred {
    background: #6f7da1;
}

#tasks-read-root .task-read-status-indicator--done,
#oneInboxRoot .oneinbox-status-indicator.is-done {
    background: #4f7a63;
}

#tasks-read-root .task-read-status-indicator--cancelled,
#oneInboxRoot .oneinbox-status-indicator.is-cancelled {
    background: #8c6c6c;
}

#tasks-read-root .task-timeline-toggle {
    margin-top: 8px;
}

#tasks-read-root .task-primary-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

#tasks-read-root .task-primary-actions-row .btn {
    white-space: nowrap;
}

#tasks-read-root .task-action-bar {
    display: grid;
    gap: 10px;
}

#tasks-read-root .task-action-bar-group {
    min-width: 0;
}

#tasks-read-root .task-action-bar-group-title {
    margin-bottom: 5px;
    color: #777;
    font-size: 12px;
}

#tasks-read-root .task-action-bar-buttons,
#tasks-read-root .task-action-bar-reason-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#tasks-read-root .task-action-bar-buttons .btn {
    flex: 1 1 132px;
    min-height: 38px;
    white-space: normal;
}

#tasks-read-root .task-action-bar-reason {
    margin: 0;
    padding-top: 2px;
}

#tasks-read-root .task-action-bar-reason label {
    color: #555;
    font-size: 12px;
}

@media (min-width: 768px) {
    #tasks-read-root .task-action-bar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    #tasks-read-root .task-action-bar-reason {
        grid-column: 1 / -1;
    }
}

#tasks-read-root .task-whatsapp-action-composer {
    width: 100%;
    margin-top: 0;
    margin-bottom: 10px;
}

#tasks-read-root .task-proactive-whatsapp-start-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 12px;
}

#tasks-read-root .task-proactive-whatsapp-start-field,
#tasks-read-root .task-proactive-whatsapp-start-contact-field {
    min-width: 0;
}

#tasks-read-root .task-proactive-whatsapp-start-field--full,
#tasks-read-root .task-proactive-whatsapp-start-contact-field,
#tasks-read-root .task-proactive-whatsapp-start-selected-contact,
#tasks-read-root .task-proactive-whatsapp-start-contact-unavailable {
    grid-column: 1 / -1;
}

#tasks-read-root .task-proactive-whatsapp-start-selected-contact {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #b9d6ef;
    border-radius: 4px;
    background-color: #eef7ff;
}

#tasks-read-root .task-proactive-whatsapp-start-selected-contact .btn {
    flex: 0 0 auto;
}

#tasks-read-root .task-proactive-whatsapp-start-contact-results {
    max-height: 264px;
    overflow-y: auto;
}

#tasks-read-root .task-proactive-whatsapp-start-preview {
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #d9e4f2;
    border-radius: 4px;
    background-color: #fff;
}

#tasks-read-root .task-proactive-whatsapp-start-preview-content {
    margin-top: 4px;
    white-space: pre-wrap;
}

@media (min-width: 768px) {
    #tasks-read-root .task-proactive-whatsapp-start-fields {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

#tasks-read-root .task-read-case-reference {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #dce7f5;
    border-radius: 8px;
    background: #f8fbff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#tasks-read-root .task-read-case-reference-label {
    margin-bottom: 4px;
    font-size: 12px;
    color: #777;
}

#tasks-read-root .task-read-historical-case-references {
    margin-top: 4px;
    color: #777;
    font-size: 12px;
}

#tasks-read-root .task-read-case-reference [name="task-merge-communication-case"] {
    flex: 0 0 auto;
}

#task-merge-communication-case-modal .modal-dialog {
    max-width: calc(100vw - 30px);
}

#task-merge-communication-case-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 30px);
    overflow: hidden;
}

#task-merge-communication-case-modal .modal-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px 24px 12px;
    overflow: hidden;
}

#task-merge-communication-case-modal .modal-body > div[style] {
    display: flex;
    flex: 1 1 0;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}

#task-merge-communication-case-modal .modal-footer {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 12px 24px;
}

#task-merge-communication-case-modal .task-merge-communication-case-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
}

#task-merge-communication-case-modal .task-merge-communication-case-source {
    padding: 12px 14px;
    margin-bottom: 20px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 6px;
    min-width: 0;
}

#task-merge-communication-case-modal .task-merge-communication-case-source-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#task-merge-communication-case-modal .task-merge-communication-case-source-main > .glyphicon {
    flex: 0 0 auto;
    color: var(--primary-bg);
    font-size: 18px;
}

#task-merge-communication-case-modal .task-merge-communication-case-source-details {
    min-width: 0;
}

#task-merge-communication-case-modal .task-merge-communication-case-section-label {
    margin-bottom: 6px;
    color: #777;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

#task-merge-communication-case-modal .task-merge-communication-case-source-reference,
#task-merge-communication-case-modal .task-merge-communication-case-source-title,
#task-merge-communication-case-modal .task-merge-communication-case-source-context,
#task-merge-communication-case-modal .task-merge-communication-case-target-title,
#task-merge-communication-case-modal .task-merge-communication-case-target-context {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#task-merge-communication-case-modal .task-merge-communication-case-source-reference {
    color: var(--primary-bg);
    font-weight: 700;
}

#task-merge-communication-case-modal .task-merge-communication-case-source-title {
    margin-top: 2px;
    font-weight: 600;
}

#task-merge-communication-case-modal .task-merge-communication-case-source-context {
    margin-top: 3px;
    color: #777;
    font-size: 12px;
}

#task-merge-communication-case-modal .task-merge-communication-case-search {
    margin-bottom: 16px;
}

#task-merge-communication-case-modal .task-merge-communication-case-search label {
    font-weight: 600;
}

#task-merge-communication-case-modal .task-merge-communication-case-search .form-control {
    height: 40px;
}

#task-merge-communication-case-modal .task-merge-communication-case-search .input-group-addon {
    color: #667085;
    background: #fff;
}

#task-merge-communication-case-modal #task-merge-communication-case-results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
}

#task-merge-communication-case-modal .task-merge-communication-case-target {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    min-height: 56px;
    padding: 10px 38px 10px 50px;
    margin: 0;
    color: #333;
    text-align: left;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #e2e7ee;
    border-radius: 0;
}

#task-merge-communication-case-modal .task-merge-communication-case-target:last-of-type {
    border-bottom: 0;
}

#task-merge-communication-case-modal .task-merge-communication-case-target:hover {
    background: #f7f7f7;
}

#task-merge-communication-case-modal .task-merge-communication-case-target:focus {
    outline: 2px solid var(--primary-bg);
    outline-offset: 1px;
}

#task-merge-communication-case-modal .task-merge-communication-case-target.is-selected {
    background: #f7f7f7;
}

#task-merge-communication-case-modal .task-merge-communication-case-target-radio {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border: 2px solid #9ca3af;
    border-radius: 50%;
}

#task-merge-communication-case-modal .task-merge-communication-case-target.is-selected .task-merge-communication-case-target-radio {
    border-color: var(--primary-bg);
    box-shadow: inset 0 0 0 4px #fff;
    background: var(--primary-bg);
}

#task-merge-communication-case-modal .task-merge-communication-case-target-primary {
    display: flex;
    min-width: 0;
    gap: 8px;
}

#task-merge-communication-case-modal .task-merge-communication-case-target-reference {
    flex: 0 0 auto;
    color: var(--primary-bg);
    font-weight: 700;
}

#task-merge-communication-case-modal .task-merge-communication-case-target-title {
    min-width: 0;
    font-weight: 600;
}

#task-merge-communication-case-modal .task-merge-communication-case-target-context {
    display: block;
    margin-top: 3px;
    color: #777;
    font-size: 12px;
}

#task-merge-communication-case-modal .task-merge-communication-case-confirmation {
    flex: 0 0 auto;
    min-height: 18px;
    margin-top: 12px;
    padding: 10px 12px;
    color: #666;
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 12px;
}

#task-merge-communication-case-modal .task-merge-communication-case-confirmation:empty {
    display: none;
}

#task-merge-communication-case-modal .task-merge-communication-case-confirmation .glyphicon {
    color: var(--primary-bg);
}

@media (max-width: 767px) {
    #tasks-read-root .task-read-case-reference {
        align-items: flex-start;
        flex-direction: column;
    }

    #task-merge-communication-case-modal .modal-body,
    #task-merge-communication-case-modal .modal-footer {
        padding-left: 15px;
        padding-right: 15px;
    }

    #task-merge-communication-case-modal .task-merge-communication-case-target-primary {
        gap: 5px;
    }
}

#tasks-read-root .task-read-communication-identity {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #dce7f5;
    border-radius: 8px;
    background: #f8fbff;
}

#tasks-read-root .task-accordion-section {
    border: 1px solid #dce7f5;
    border-radius: 8px;
    background: #fbfdff;
}

#tasks-read-root .task-accordion-summary {
    margin-bottom: 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background-color 0.18s ease, color 0.18s ease;
}

#tasks-read-root .task-accordion-summary::-webkit-details-marker {
    display: none;
}

#tasks-read-root .task-accordion-chevron {
    color: #5f6b7a;
    font-size: 11px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.18s ease, color 0.18s ease;
}

#tasks-read-root details.task-accordion-section[open] > .task-accordion-summary .task-accordion-chevron,
#tasks-read-root .task-accordion-section.is-open > .task-accordion-summary .task-accordion-chevron {
    transform: rotate(90deg);
}

#tasks-read-root .task-accordion-summary:hover {
    background: #f1f6fd;
    color: #334257;
}

#tasks-read-root .task-accordion-summary:hover .task-accordion-chevron {
    color: #334257;
}

#tasks-read-root .task-accordion-summary:focus,
#tasks-read-root .task-accordion-summary:focus-visible {
    outline: 2px solid #8eb6e6;
    outline-offset: 2px;
}

#tasks-read-root .task-accordion-content {
    padding: 0 10px 10px;
}

#tasks-read-root .task-planning-summary {
    margin-bottom: 0;
    cursor: pointer;
}

#tasks-read-root .task-planning-section {
    margin-top: 0;
    padding: 0;
}

#tasks-read-root .task-planning-group {
    padding: 0;
}

#tasks-read-root .task-planning-section[data-mode="due"] .task-planning-group--snooze,
#tasks-read-root .task-planning-section[data-mode="snooze"] .task-planning-group--due {
    display: none;
}

#tasks-read-root .task-planning-drawer-title {
    margin-bottom: 6px;
    font-weight: 600;
}

#tasks-read-root .task-planning-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#tasks-read-root .task-planning-row .form-group {
    margin: 0;
}

#tasks-read-root .task-planning-row .task-datetime-group {
    width: 230px;
}

#tasks-read-root .task-planning-reason {
    flex: 1 1 260px;
    min-width: 180px;
}

#tasks-read-root .task-planning-reason textarea {
    height: 30px;
    min-height: 30px;
}

@media (max-width: 767px) {
    #tasks-read-root .task-planning-row {
        align-items: stretch;
    }

    #tasks-read-root .task-planning-row .task-datetime-group,
    #tasks-read-root .task-planning-reason {
        width: 100%;
    }
}

#tasks-read-root .task-datetime-input {
    width: 100%;
}

#tasks-read-root .task-datetime-group .input-group-btn > .btn {
    min-width: 34px;
}

/* Flatpickr wird an document.body angehängt; hoher z-index vermeidet Überdeckung durch Panel-/Modal-Stacks. */
.flatpickr-calendar {
    z-index: 99999 !important;
}

@media (min-width: 1200px) {
    #tasks-read-root .tasks-operator-layout {
        display: flex;
        flex-wrap: nowrap;
    }

    #tasks-read-root .tasks-operator-filter-column {
        flex: 0 0 220px;
        max-width: 220px;
        width: 220px;
    }

    #tasks-read-root .tasks-operator-list-column {
        flex: 0 0 360px;
        max-width: 360px;
        width: 360px;
    }

    #tasks-read-root .tasks-operator-detail-column {
        flex: 1 1 auto;
        min-width: 0;
    }
}

#tasks-read-root .tasks-operator-filter-column > .panel {
    border: 0;
    box-shadow: none;
    margin-bottom: 0;
}

#tasks-read-root .tasks-operator-filter-column > .panel > .panel-body {
    padding: 0;
}

#tasks-read-root.tasks-read-shell-root,
#tasks-read-root + #triage-inbox-root.panel {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 1199px) {
    #tasks-read-root.tasks-read-shell-root,
    #tasks-read-root + #triage-inbox-root.panel {
        width: auto;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
}

#tasks-read-root .task-responsibility-picker {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

#tasks-read-root .task-responsibility-picker-inline {
    display: grid;
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr) auto;
    align-items: stretch;
    column-gap: 4px;
    width: 100%;
    max-width: 100%;
}

#tasks-read-root .task-responsibility-picker-inline--without-assignee {
    grid-template-columns: minmax(0, 1fr) auto;
}

#tasks-read-root .task-responsibility-picker-inline > .form-control {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

#tasks-read-root .task-responsibility-picker-inline-team,
#tasks-read-root .task-responsibility-picker-inline-assignee {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tasks-read-root .task-responsibility-picker-inline-team.task-responsibility-picker-placeholder {
    color: #999999;
}

#tasks-read-root .task-responsibility-picker-inline-team.task-responsibility-picker-placeholder option {
    color: #333333;
}

#tasks-read-root .task-responsibility-picker-inline-team.task-responsibility-picker-placeholder option[value=""] {
    color: #999999;
}

#tasks-read-root .task-responsibility-picker-unavailable-option {
    font-style: italic;
}

#tasks-read-root .task-responsibility-picker-inline > .input-group-btn {
    display: flex;
    width: auto;
}

#tasks-read-root .task-responsibility-picker-inline-action {
    min-width: 34px;
    padding-left: 8px;
    padding-right: 8px;
}

#tasks-read-root .task-own-release-control {
    max-width: 100%;
}

#tasks-read-root .task-own-release-control-row {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
}

#tasks-read-root .task-own-release-control-row .task-responsibility-picker-inline-team {
    flex: 1 1 auto;
    width: auto;
}

#tasks-read-root .task-own-release-control-action {
    flex: 0 0 auto;
    white-space: nowrap;
}

#tasks-read-root .task-scope-filter-caption {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 15px;
    border-bottom: 1px solid #f0f0f0;
}

@media (max-width: 1199px) {
    #tasks-read-root .task-responsibility-picker-inline {
        grid-template-columns: minmax(88px, 38%) minmax(0, 1fr) auto;
    }
}

@media (max-width: 767px) {
    #tasks-read-root .task-responsibility-picker-inline {
        grid-template-columns: minmax(80px, 40%) minmax(0, 1fr) auto;
        column-gap: 3px;
    }

    #tasks-read-root .task-responsibility-picker-inline-action {
        min-width: 32px;
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* Tasks timeline MVP structure for workspace and communication-case style rendering */
.task-timeline {
    margin-bottom: 18px;
}

.task-timeline-scroll {
    display: block;
    min-height: 0;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0;
    padding-bottom: 2px;
}

.task-timeline-list {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 10px;
    min-height: 0;
    padding: 0 6px;
}

.task-timeline-day-separator {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin: 4px 0 -2px;
    color: #7f8c99;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.task-timeline-day-separator:first-child {
    margin-top: 8px;
}

.task-timeline-day-separator::before,
.task-timeline-day-separator::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background-color: #edf1f4;
}

.task-timeline-day-separator-label {
    flex: 0 0 auto;
    white-space: nowrap;
}

.task-timeline-empty {
    margin: 0;
}

.task-timeline-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
}

.task-timeline-heading-title {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.task-timeline-whatsapp-reply-action {
    flex: 0 0 auto;
}

.task-timeline-heading-filters {
    display: flex;
    flex: 1 1 260px;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.task-timeline-heading-filters .btn {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    min-width: 0;
    max-width: 280px;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid #eef2f5;
    border-radius: 14px;
    background-color: #f8fafc;
    box-shadow: none;
    color: #60788f;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.task-timeline-heading-filters .btn.active,
.task-timeline-heading-filters .btn[aria-pressed="true"] {
    border-color: #cbddeb;
    background-color: #e2edf6;
    box-shadow: none;
    color: #3d5f79;
}

.task-timeline-heading-filters .btn:hover,
.task-timeline-heading-filters .btn:focus,
.task-timeline-heading-filters .btn:focus-visible {
    border-color: #d7e4ef;
    background-color: #edf3f8;
    box-shadow: none;
    color: #337ab7;
}

.task-timeline-heading-filters .btn:focus,
.task-timeline-heading-filters .btn:focus-visible {
    outline: 2px solid #337ab7;
    outline-offset: 1px;
}

.task-timeline-heading-filters .btn:active {
    border-color: #d2e0ec;
    background-color: #e2edf6;
    box-shadow: none;
    color: #286090;
}

.task-timeline-filter-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-timeline-more {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    margin: 0;
    padding: 10px 0 2px;
}

.task-timeline-more .btn {
    min-height: 0;
    padding: 3px 8px;
    border-color: #d7e1ea;
    background-color: #fff;
    color: #587087;
}

.task-timeline-more .btn:hover,
.task-timeline-more .btn:focus,
.task-timeline-more .btn:focus-visible {
    border-color: #8fb2d3;
    color: #337ab7;
}

.task-timeline-filter-symbol {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin-left: 6px;
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    line-height: 1;
}

.task-timeline-entry {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    margin: 0;
}

.task-timeline-entry--clickable {
    cursor: default;
    pointer-events: none;
}

.task-timeline-entry--clickable .task-timeline-entry-content {
    pointer-events: auto;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.task-timeline-entry--clickable .task-timeline-entry-context {
    pointer-events: auto;
}

.task-timeline-entry--clickable .task-timeline-entry-actions {
    pointer-events: auto;
}

.task-timeline-entry--clickable .task-timeline-entry-content:hover,
.task-timeline-entry--clickable:focus .task-timeline-entry-content,
.task-timeline-entry--clickable:focus-visible .task-timeline-entry-content {
    box-shadow: 0 4px 12px rgba(24, 49, 75, 0.16);
    border-color: #8fb2d3;
    transform: translateY(-1px);
}

.task-timeline-entry--clickable:focus,
.task-timeline-entry--clickable:focus-visible {
    outline: none;
}

.task-timeline-entry--own {
    align-items: flex-end;
}

.task-timeline-entry--other {
    align-items: flex-start;
}

.task-timeline-entry--system {
    align-items: center;
    text-align: center;
}

.task-timeline-entry-meta {
    color: #666;
    font-size: 12px;
}

.task-timeline-entry-context {
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    min-width: 0;
    max-width: min(78%, 860px);
    margin-bottom: 2px;
    color: #71808f;
    line-height: 16px;
    white-space: nowrap;
}

.task-timeline-entry-context-sender,
.task-timeline-entry-context-recipient {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-timeline-entry-context-sender {
    flex: 1 1 auto;
}

.task-timeline-entry-context-recipient {
    flex: 1 1 auto;
}

.task-timeline-entry-context-channel,
.task-timeline-entry-time,
.task-timeline-entry-new-badge {
    flex: 0 0 auto;
}

.task-timeline-entry-context-channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 16px;
    line-height: 1;
}

.task-timeline-entry-context-channel .glyphicon {
    position: static;
    line-height: 1;
}

.task-timeline-result-award {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    border: 0;
    background: transparent;
    font-style: normal;
    color: #337ab7;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.task-timeline-result-award:focus,
.task-timeline-result-award:active,
.task-set-result-icon:focus,
.task-set-result-icon:active {
    outline: 0;
    box-shadow: none;
}

.task-set-result-icon {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    line-height: 1;
    font-style: normal;
    color: #337ab7;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Die aktive Bootstrap-Listenkartenfarbe gilt auch fuer bewusst gedimmte Zusammenfassungen. */
.task-read-card-active .text-muted,
.list-group-item.active .text-muted,
.list-group-item.active:focus .text-muted,
.list-group-item.active:hover .text-muted {
    color: #ffffff;
}

.task-timeline-result-award .far,
.task-set-result-icon .far {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    font-style: normal;
    font-size: inherit;
    line-height: 1;
}

.task-timeline-entry-context-recipient-label {
    flex: 0 0 auto;
    color: #9aa7b3;
    line-height: inherit;
}

.popover.in.task-timeline-context-popover {
    height: auto;
    min-width: 240px;
    max-width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-x: visible;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(31, 55, 82, 0.12);
}

.task-timeline-context-popover .popover-content {
    padding: 10px 12px;
}

.task-timeline-context-popover-fields {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
    margin: 0;
}

.task-timeline-context-popover-fields dt,
.task-timeline-context-popover-fields dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.task-timeline-context-popover-fields dt {
    color: #8895a2;
    font-size: 11px;
    font-weight: 500;
}

.task-timeline-context-popover-fields dd {
    color: #3d4e5f;
}

@media (max-width: 480px) {
    .popover.in.task-timeline-context-popover {
        min-width: 0;
        max-width: calc(100vw - 24px);
    }

    .task-timeline-context-popover-fields {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2px;
    }

    .task-timeline-context-popover-fields dd {
        margin-bottom: 6px;
    }
}

.task-timeline-entry-new-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 14px;
    border-radius: .25em;
    background-color: #edf3f8;
    color: #456176;
    font-size: 75%;
    font-weight: 700;
    line-height: 14px;
    padding: 0 5px;
}

.task-timeline-entry-content {
    width: fit-content;
    min-width: 320px;
    max-width: min(78%, 860px);
}

.task-timeline-entry-content--bubble {
    background-color: #fff;
    border: 1px solid #e2e8ef;
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(31, 55, 82, 0.04);
    position: relative;
    color: #2d3d4d;
    font-size: 14px;
    line-height: 1.5;
}

.task-timeline-bubble-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.task-timeline-bubble-topline-left {
    flex: 1 1 auto;
    min-width: 0;
}

.task-timeline-entry--own .task-timeline-entry-content--bubble {
    background-color: #fff;
    border-color: #e2e8ef;
}

.task-timeline-entry-content--email {
    max-width: min(78%, 860px);
}

.task-timeline-event-header-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0;
}

.task-timeline-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    background-color: #f1f5f8;
    color: #355066;
}

.task-timeline-event-badge--message {
    background-color: #e7f3fb;
    color: #1f567f;
}

.task-timeline-event-badge--status {
    background-color: #eef4ea;
    color: #33602f;
}

.task-timeline-event-badge--done {
    background-color: #e5f5ea;
    color: #28663d;
}

.task-timeline-event-badge--ownership {
    background-color: #f2ecfb;
    color: #5c3f86;
}

.task-timeline-event-badge--team {
    background-color: #eaf1f9;
    color: #325779;
}

.task-timeline-event-badge--planning {
    background-color: #fff2e2;
    color: #87582d;
}

.task-timeline-event-badge--created {
    background-color: #edf7f0;
    color: #2b6845;
}

.task-timeline-event-badge--draft {
    background-color: #f7efff;
    color: #68419a;
}

.task-timeline-event-badge--generic {
    background-color: #f2f2f2;
    color: #4d4d4d;
}

.task-timeline-entry-content--system {
    color: #555;
    max-width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 8px 12px;
    background-color: #f8f8f8;
    text-align: center;
}

.task-timeline-entry--system .task-timeline-entry-content {
    width: auto;
    max-width: 400px;
}

.task-timeline-entry-title {
    margin: 0;
    color: #23384d;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-timeline-entry-title--with-attachments {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.task-timeline-entry-title-text {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-timeline-entry-body {
    margin: 6px 0 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-timeline-entry-content--bubble,
.task-timeline-entry-content--system {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-timeline-email-header-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0;
}

.task-timeline-email-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
}

.task-timeline-email-badge .glyphicon,
.task-timeline-event-badge .glyphicon {
    position: static;
}

.task-timeline-email-badge--channel {
    background-color: #e8f1fb;
    color: #20527d;
}

.task-timeline-email-badge--direction {
    background-color: #eef4ea;
    color: #35622f;
}

.task-timeline-email-badge--status,
.task-timeline-email-badge--attachment {
    background-color: #f1f1f1;
    color: #444;
}

.task-timeline-email-line {
    margin-top: 4px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-timeline-email-line--recipients {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-timeline-entry-body--preview {
    margin-top: 6px;
    display: block;
    overflow: visible;
}

.task-timeline-entry-whatsapp-reply-reference {
    margin-bottom: 8px;
    padding: 5px 8px;
    border-left: 3px solid #c9d3dc;
    border-radius: 3px;
    background-color: #f7f9fb;
    color: #5f6f7d;
    font-size: 12px;
    line-height: 1.35;
}

.task-timeline-entry-whatsapp-reply-reference-title {
    font-weight: 600;
}

.task-timeline-entry-whatsapp-reply-reference-preview {
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-timeline-entry-whatsapp-delivery-status {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    color: #88949f;
    font-size: 0.88em;
    line-height: 1;
    vertical-align: baseline;
    white-space: nowrap;
}

.task-timeline-entry-whatsapp-delivery-status--pending > .far,
.task-timeline-entry-whatsapp-delivery-status--sent > .fas,
.task-timeline-entry-whatsapp-delivery-status--delivered > .fas {
    color: #88949f;
}

.task-timeline-entry-whatsapp-delivery-status--read > .fas {
    color: var(--primary-bg);
}

.task-timeline-entry-whatsapp-delivery-status--failed > .fas {
    color: #c9302c;
}

.task-timeline-entry-detailhint {
    margin-top: 10px;
    color: #71808f;
    font-size: 12px;
    line-height: 1.4;
}

.task-timeline-entry-attachments {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    color: #337ab7;
    font-size: inherit;
    font-weight: 400 !important;
    line-height: 1.4;
}

.task-timeline-entry-attachments .fa-paperclip {
    font-size: 0.9em;
    opacity: 0.78;
}

.task-timeline-entry-attachments:hover,
.task-timeline-entry-attachments:focus,
.task-timeline-entry-attachments:focus-visible {
    color: #23527c;
    outline: 0;
    text-decoration: none;
}

.task-timeline-attachment-dialog table {
    margin-bottom: 0;
}

.task-timeline-attachment-dialog-name .fa {
    color: #337ab7;
}

.task-timeline-entry-attachment {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.task-timeline-entry-attachment .glyphicon {
    flex: 0 0 auto;
    margin-top: 2px;
}

.task-timeline-entry-attachment-name {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-timeline-entry-attachment-size {
    flex: 0 0 auto;
    color: #8290a0;
}

.task-timeline-entry-whatsapp-media {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.task-timeline-entry-whatsapp-media-item,
.task-timeline-entry-whatsapp-media-status {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    color: #52616e;
    font-size: 12px;
}

.task-timeline-entry-whatsapp-media-name {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-timeline-entry-whatsapp-media-size {
    color: #8290a0;
}

.task-timeline-entry-whatsapp-media-download {
    padding: 0 2px;
}

.task-communication-media-status--retrying,
.task-communication-media-status--unavailable {
    color: #71808f;
}

.task-timeline-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    width: fit-content;
    max-width: min(78%, 860px);
    margin-top: 0;
}

.task-timeline-entry--other .task-timeline-entry-actions {
    align-self: flex-start;
}

.task-timeline-entry--own .task-timeline-entry-actions {
    align-self: flex-end;
}

.task-timeline-entry-actions .btn {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 7px;
    border-color: transparent;
    border-radius: 4px;
    background-color: transparent;
    box-shadow: none;
    color: #60788f;
    line-height: 1.35;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.task-timeline-entry-actions .btn .glyphicon {
    position: static;
    top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 1em;
    margin-right: 2px;
    font-size: 12px;
    line-height: 1;
}

.task-timeline-entry-actions .btn .fa,
.task-timeline-entry-actions .btn .fas,
.task-timeline-entry-actions .btn .far,
.task-timeline-entry-actions .btn .fab {
    position: static;
    top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 1em;
    margin-right: 2px;
    font-size: 12px;
    line-height: 1;
}

.task-timeline-entry-actions .btn .glyphicon::before {
    display: block;
    line-height: 1;
}

.task-timeline-entry-actions .btn .fa::before,
.task-timeline-entry-actions .btn .fas::before,
.task-timeline-entry-actions .btn .far::before,
.task-timeline-entry-actions .btn .fab::before {
    display: block;
    line-height: 1;
}

.task-timeline-entry-actions .btn:hover,
.task-timeline-entry-actions .btn:focus,
.task-timeline-entry-actions .btn:focus-visible {
    border-color: transparent;
    background-color: #edf3f8;
    color: #337ab7;
    box-shadow: none;
}

.task-timeline-entry-actions .btn:focus,
.task-timeline-entry-actions .btn:focus-visible {
    outline: 2px solid #337ab7;
    outline-offset: 1px;
}

.task-timeline-entry-actions .btn:active,
.task-timeline-entry-actions .btn.active,
.task-timeline-entry-actions .btn[aria-pressed="true"] {
    border-color: transparent;
    background-color: #e2edf6;
    color: #286090;
    box-shadow: none;
}

.task-timeline-entry-actions .btn:disabled,
.task-timeline-entry-actions .btn.disabled {
    background-color: transparent;
    color: #91a0ad;
    opacity: 1;
}

#tasks-read-root .task-read-message-attention,
#tasks-read-root .task-read-message-attention .glyphicon {
    color: currentColor;
}

.task-timeline-composer {
    border: 1px solid #d9e4f2;
    border-radius: 8px;
    background-color: #f9fbff;
    padding: 12px;
    margin-top: 4px;
}

#tasks-read-root .task-on-demand-composer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

#tasks-read-root .task-on-demand-composer-actions .btn {
    min-height: 38px;
}

#task-timeline-communication-detail-modal .modal-dialog,
#task-external-reply-composer-modal .modal-dialog,
#task-communication-chat-modal .modal-dialog {
    width: min(1125px, 96vw) !important;
    max-width: min(1125px, 96vw) !important;
}

#task-external-reply-composer-modal .task-external-reply-composer .form-group {
    margin-bottom: 8px;
}

#task-external-reply-composer-modal .modal-content {
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(31, 55, 82, .16);
}

#task-external-reply-composer-modal .modal-header {
    padding: 16px 52px 15px 20px;
    border-bottom: 1px solid #e4ebf1;
    background-color: #fbfcfe;
}

#task-external-reply-composer-modal .modal-body {
    padding: 18px 20px 20px;
}

#task-external-reply-composer-modal .task-external-reply-composer--email {
    color: #263746;
}

#task-external-reply-composer-modal .task-external-reply-email-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 14px;
    align-items: stretch;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #e2e9ef;
    border-radius: 7px;
    background-color: #fbfcfd;
}

#task-external-reply-composer-modal .task-external-reply-email-fields .form-group {
    margin-bottom: 0;
}

#task-external-reply-composer-modal .task-external-reply-field--subject,
#task-external-reply-composer-modal .task-external-reply-optional-fields {
    grid-column: auto;
}

#task-external-reply-composer-modal .task-external-reply-optional-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 14px;
}

#task-external-reply-composer-modal .task-external-reply-field label,
#task-external-reply-composer-modal .task-external-reply-attachment-inline-title {
    margin-bottom: 5px;
    color: #607080;
    font-size: 12px;
    font-weight: 600;
}

#task-external-reply-composer-modal .task-external-reply-email-fields .form-control {
    height: 38px;
    border-color: #ccd9e4;
    border-radius: 5px;
    box-shadow: none;
}

#task-external-reply-composer-modal .task-external-reply-email-fields .form-control:focus {
    border-color: #7da5c5;
    box-shadow: 0 0 0 2px rgba(86, 143, 184, .12);
}

#task-external-reply-composer-modal .task-external-reply-recipient-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 0;
    margin-top: 5px;
}

#task-external-reply-composer-modal .task-external-reply-recipient-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 6px;
    border: 1px solid #dce6ee;
    border-radius: 10px;
    background-color: #f7fafd;
    color: #526f87;
    font-size: 12px;
    overflow-wrap: anywhere;
}

#task-external-reply-composer-modal .task-external-reply-recipient-verification {
    flex: 0 0 auto;
}

#task-external-reply-composer-modal .task-external-reply-recipient-suggestions {
    display: flex;
    flex-direction: column;
    position: static;
    width: 100%;
    max-height: 190px;
    margin-top: 5px;
    overflow-y: auto;
}

#task-external-reply-composer-modal .task-external-reply-recipient-search-message {
    padding: 3px 0;
}

#task-external-reply-composer-modal .task-external-reply-recipient-suggestion {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 32px;
    border-color: #dce6ee;
    border-radius: 0;
    color: #344d62;
    text-align: left;
    white-space: normal;
}

#task-external-reply-composer-modal .task-external-reply-recipient-suggestion-name {
    flex: 0 1 auto;
    font-weight: 600;
    overflow-wrap: anywhere;
}

#task-external-reply-composer-modal .task-external-reply-recipient-suggestion-email {
    flex: 0 1 auto;
    color: #607080;
    overflow-wrap: anywhere;
}

#task-external-reply-composer-modal .task-external-reply-recipient-more {
    align-self: flex-start;
    padding-left: 0;
}

#task-external-reply-composer-modal .task-external-reply-draft-hint {
    margin-bottom: 10px;
}

#task-external-reply-composer-modal .task-external-reply-whatsapp-quote-context {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    padding: 8px 10px;
    border-left: 3px solid #c9d3dc;
    border-radius: 3px;
    background-color: #f7f9fb;
}

#task-external-reply-composer-modal .task-external-reply-whatsapp-quote-context-content {
    min-width: 0;
}

#task-external-reply-composer-modal .task-external-reply-whatsapp-quote-context-sender {
    color: #52616e;
    font-size: 12px;
    font-weight: 600;
}

#task-external-reply-composer-modal .task-external-reply-whatsapp-quote-context-preview {
    margin-top: 2px;
    overflow: hidden;
    color: #5f6f7d;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#task-external-reply-composer-modal .task-external-reply-whatsapp-quote-context-remove {
    min-width: 24px;
    padding: 0 3px;
    color: #5f6f7d;
    font-size: 18px;
    line-height: 1;
}

#task-communication-chat-modal .task-communication-chat-header {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

#task-communication-chat-modal .task-communication-chat-header-participant {
    font-weight: 600;
}

#task-communication-chat-modal .task-communication-chat-header-channel {
    color: #71808f;
    font-size: 12px;
    font-weight: 400;
}

#task-communication-chat-modal .task-communication-chat-history {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(58vh, 560px);
    overflow-y: auto;
    padding: 4px 2px 8px;
}

#task-communication-chat-modal .task-communication-chat-message {
    display: flex;
    flex-direction: column;
    max-width: 82%;
}

#task-communication-chat-modal .task-communication-chat-message--inbound {
    align-self: flex-start;
}

#task-communication-chat-modal .task-communication-chat-message--outbound {
    align-self: flex-end;
    align-items: flex-end;
}

#task-communication-chat-modal .task-communication-chat-message-participant {
    min-height: 16px;
    color: #5f6f7d;
    font-size: 12px;
    font-weight: 600;
}

#task-communication-chat-modal .task-communication-chat-message--outbound .task-communication-chat-message-participant:empty {
    display: none;
}

#task-communication-chat-modal .task-communication-chat-message-bubble {
    padding: 8px 10px;
    border: 1px solid #d7e0e7;
    border-radius: 9px;
    background: #f7f9fb;
    color: #263746;
}

#task-communication-chat-modal .task-communication-chat-message--outbound .task-communication-chat-message-bubble {
    min-width: 120px;
    border-color: #d9e4f2;
    background: #f3f7fb;
}

#task-communication-chat-modal .task-communication-chat-message--other-context {
    opacity: .72;
}

#task-communication-chat-modal .task-communication-chat-message-other-context-label {
    font-weight: 400;
}

#task-communication-chat-modal .task-communication-chat-message-body {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: break-word;
}

#task-communication-chat-modal .task-communication-chat-message-reply-reference {
    min-width: 0;
    margin-bottom: 6px;
    padding: 4px 6px;
    border-left: 3px solid #c9d3dc;
    border-radius: 3px;
    background: rgba(255, 255, 255, .45);
}

#task-communication-chat-modal .task-communication-chat-message-reply-reference-sender {
    overflow: hidden;
    color: #52616e;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#task-communication-chat-modal .task-communication-chat-message-reply-reference-preview {
    overflow: hidden;
    margin-top: 2px;
    color: #5f6f7d;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#task-communication-chat-modal .task-communication-chat-quote-action {
    align-self: flex-start;
    margin-top: 2px;
    padding-left: 0;
    color: #60788f;
}

#task-communication-chat-modal .task-communication-chat-message-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    color: #71808f;
    font-size: 11px;
    white-space: nowrap;
}

#task-communication-chat-modal .task-communication-chat-media {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid rgba(125, 145, 160, .25);
}

#task-communication-chat-modal .task-communication-chat-media-item,
#task-communication-chat-modal .task-communication-chat-media-status {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    color: #52616e;
    font-size: 12px;
}

#task-communication-chat-modal .task-communication-chat-media-name {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#task-communication-chat-modal .task-communication-chat-media-size {
    color: #8290a0;
}

#task-communication-chat-modal .task-communication-chat-media-download {
    padding: 0 2px;
}

#task-communication-chat-modal .task-communication-chat-delivery-status {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    color: #88949f;
    font-size: .88em;
}

#task-communication-chat-modal .task-communication-chat-delivery-status-text {
    margin-left: 3px;
}

#task-communication-chat-modal .task-communication-chat-delivery-status--pending > .far,
#task-communication-chat-modal .task-communication-chat-delivery-status--sent > .fas,
#task-communication-chat-modal .task-communication-chat-delivery-status--delivered > .fas {
    color: #88949f;
}

#task-communication-chat-modal .task-communication-chat-delivery-status--read > .fas {
    color: var(--primary-bg);
}

#task-communication-chat-modal .task-communication-chat-delivery-status--failed > .fas {
    color: #c9302c;
}

#task-communication-chat-modal .task-communication-chat-quote-context {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0;
    padding: 8px 10px;
    border-left: 3px solid #c9d3dc;
    border-radius: 3px;
    background: #f7f9fb;
}

#task-communication-chat-modal .task-communication-chat-quote-content {
    min-width: 0;
}

#task-communication-chat-modal .task-communication-chat-quote-sender {
    color: #52616e;
    font-size: 12px;
    font-weight: 600;
}

#task-communication-chat-modal .task-communication-chat-quote-preview {
    margin-top: 2px;
    overflow: hidden;
    color: #5f6f7d;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#task-communication-chat-modal .task-communication-chat-quote-remove {
    min-width: 24px;
    padding: 0 3px;
    color: #5f6f7d;
    font-size: 18px;
    line-height: 1;
}

#task-communication-chat-modal .task-communication-chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

#task-communication-chat-modal .task-communication-chat-composer textarea {
    flex: 1 1 auto;
    max-height: 140px;
    overflow-y: hidden;
}

#task-communication-chat-modal .task-communication-chat-composer .btn {
    flex: 0 0 auto;
}

#task-external-reply-composer-modal .task-external-reply-optional-field {
    margin-bottom: 6px;
}

#task-external-reply-composer-modal .task-external-reply-header-title {
    color: #23384c;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

#task-external-reply-composer-modal .task-external-reply-header-identity {
    margin-top: 3px;
    color: #71808f;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

#task-external-reply-composer-modal .task-external-reply-header-identity-prefix {
    color: #8290a0;
}

#task-external-reply-composer-modal .task-external-reply-header-identity-value {
    color: #52616e;
    font-weight: 600;
}

#task-external-reply-composer-modal .modal-header .modal-titlebar-text {
    display: block;
    pointer-events: none;
    padding-right: 34px;
}

#task-external-reply-composer-modal .modal-header .close {
    position: relative;
    z-index: 3;
    pointer-events: auto;
    cursor: pointer;
}

#task-external-reply-composer-modal .tox.tox-tinymce,
#task-external-reply-composer-modal .mce-tinymce {
    min-height: 520px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

#task-external-reply-composer-modal .tox .tox-editor-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

#task-external-reply-composer-modal .tox .tox-edit-area {
    display: flex;
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
}

#task-external-reply-composer-modal .tox .tox-edit-area__iframe {
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 0 !important;
}

#task-external-reply-composer-modal .task-external-reply-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#task-external-reply-composer-modal .task-external-reply-topline-label {
    margin-bottom: 0;
}

#task-external-reply-composer-modal .task-external-reply-topline .btn {
    padding: 0;
    white-space: nowrap;
}

#task-external-reply-composer-modal .task-external-reply-field--message {
    margin-bottom: 0;
}

#task-external-reply-composer-modal .task-external-reply-field--message > label {
    display: block;
    margin: 0 0 7px;
}

#task-external-reply-composer-modal .task-external-reply-attachment-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e4ebf1;
}

#task-external-reply-composer-modal .task-external-reply-attachment-inline-title {
    flex: 0 0 auto;
    margin: 0;
}

#task-external-reply-composer-modal .task-external-reply-attachment-inline-list {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

#task-external-reply-composer-modal .task-external-reply-attachment-inline-list .text-muted {
    white-space: nowrap;
}

#task-external-reply-composer-modal .task-external-reply-attachment-actions {
    flex: 0 0 auto;
    margin: 0;
}

#task-external-reply-composer-modal .task-external-reply-attachment-actions .btn {
    min-height: 32px;
    padding: 5px 9px;
    border-color: #ccd9e4;
    background-color: #fff;
    color: #526f87;
}

#task-external-reply-composer-modal .task-external-reply-bottomrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    margin-top: 14px;
    padding: 14px;
    border-top: 1px solid #e4ebf1;
    border-radius: 0 0 7px 7px;
    background-color: #fbfcfe;
}

#task-external-reply-composer-modal .task-external-reply-local-draft-status {
    grid-column: 1 / -1;
    min-height: 17px;
    color: #71808f;
}

#task-external-reply-composer-modal .task-external-reply-attachment-inline-list ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 100%;
}

#task-external-reply-composer-modal .task-external-reply-attachment-inline-list li {
    overflow-wrap: anywhere;
}

#task-external-reply-composer-modal .task-external-reply-bottomcol--actions {
    grid-column: 1 / -1;
}

#task-external-reply-composer-modal .task-external-reply-actionbuttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    min-height: 32px;
}

#task-external-reply-composer-modal .task-external-reply-actionbuttons .btn {
    min-height: 38px;
    padding-right: 13px;
    padding-left: 13px;
}

#task-external-reply-composer-modal .task-external-reply-actionbuttons [name="task-external-reply-send"] {
    min-width: 92px;
}

@media (max-width: 991px) {
    #task-timeline-communication-detail-modal .modal-dialog,
    #task-external-reply-composer-modal .modal-dialog {
        width: 96vw !important;
        max-width: 96vw !important;
    }

    #task-external-reply-composer-modal .tox.tox-tinymce,
    #task-external-reply-composer-modal .mce-tinymce {
        min-height: 420px;
    }

    #task-external-reply-composer-modal .task-external-reply-bottomrow {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #task-external-reply-composer-modal .task-external-reply-email-fields,
    #task-external-reply-composer-modal .task-external-reply-optional-fields {
        grid-template-columns: 1fr;
    }

    #task-external-reply-composer-modal .task-external-reply-field--subject,
    #task-external-reply-composer-modal .task-external-reply-optional-fields {
        grid-column: auto;
    }

    #task-external-reply-composer-modal .task-external-reply-attachment-inline {
        align-items: flex-start;
    }

    #task-external-reply-composer-modal .task-external-reply-attachment-inline-list {
        flex-basis: 160px;
        max-width: 100%;
    }

    #task-external-reply-composer-modal .task-external-reply-recipient-suggestion {
        align-items: flex-start;
        flex-wrap: wrap;
    }

}

.task-timeline-composer-title {
    margin-bottom: 6px;
}

#tasks-read-root .task-detail-tabs {
    margin-bottom: 12px;
}

#tasks-read-root .task-detail-tabs > li > button {
    border: 0;
    border-radius: 4px 4px 0 0;
    background: transparent;
    color: #337ab7;
    padding: 10px 14px;
}

#tasks-read-root .task-detail-tabs > li.active > button {
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

#tasks-read-root .task-detail-tab-content,
#tasks-read-root .task-email-conversation-tab {
    min-width: 0;
}

#tasks-read-root .task-email-conversation-heading {
    color: #666;
    font-size: 12px;
    margin-bottom: 10px;
}

#tasks-read-root .task-email-conversation-list {
    margin-bottom: 12px;
}

#tasks-read-root .task-email-conversation-list .list-group-item {
    overflow-wrap: anywhere;
    text-align: left;
}

#tasks-read-root .task-email-conversation-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#tasks-read-root .task-email-conversation-card {
    border: 1px solid #d5e0ea;
    border-radius: 6px;
    overflow: hidden;
}

#tasks-read-root .task-email-conversation-card-header {
    background: #f7fbff;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 12px;
    text-align: left;
    width: 100%;
}

#tasks-read-root .task-email-conversation-card-header:hover,
#tasks-read-root .task-email-conversation-card-header:focus {
    background: #eef6fd;
    outline: 2px solid #8fb2d3;
    outline-offset: -2px;
}

#tasks-read-root .task-email-conversation-card-subject,
#tasks-read-root .task-email-conversation-card-summary,
#tasks-read-root .task-email-conversation-card-details,
#tasks-read-root .task-email-conversation-preview {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#tasks-read-root .task-email-conversation-card-subject {
    font-weight: 600;
}

#tasks-read-root .task-email-conversation-card-meta {
    color: #666;
    font-size: 12px;
}

#tasks-read-root .task-email-conversation-card-badges,
#tasks-read-root .task-email-conversation-card-summary,
#tasks-read-root .task-email-conversation-card-details {
    padding: 0 12px;
}

#tasks-read-root .task-email-conversation-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
}

#tasks-read-root .task-email-conversation-status,
#tasks-read-root .task-email-conversation-attachments {
    border-radius: 10px;
    display: inline-block;
    font-size: 11px;
    padding: 3px 7px;
}

#tasks-read-root .task-email-conversation-status--pending {
    background: #fff3cd;
    color: #735c00;
}

#tasks-read-root .task-email-conversation-status--sent {
    background: #e5f5ea;
    color: #28663d;
}

#tasks-read-root .task-email-conversation-status--failed {
    background: #fbe9e9;
    color: #9d2525;
}

#tasks-read-root .task-email-conversation-status--inbound,
#tasks-read-root .task-email-conversation-status--neutral,
#tasks-read-root .task-email-conversation-attachments {
    background: #f1f1f1;
    color: #444;
}

#tasks-read-root .task-email-conversation-card-summary {
    padding-top: 8px;
}

#tasks-read-root .task-email-conversation-card-details {
    border-top: 1px solid #e5edf4;
    margin-top: 8px;
    padding-bottom: 12px;
    padding-top: 10px;
}

#tasks-read-root .task-email-conversation-preview {
    margin-top: 8px;
    white-space: pre-wrap;
}

#tasks-read-root .task-email-conversation-actions {
    margin-top: 10px;
}

.task-timeline-composer-input {
    background-color: #fff;
}

.task-communication-detail {
    font-size: 13px;
}

.task-communication-detail-meta {
    margin-bottom: 10px;
}

.task-communication-detail-datetime {
    margin-top: 8px;
    color: #666;
    font-size: 12px;
}

.task-communication-detail-fields {
    display: grid;
    grid-template-columns: minmax(84px, 110px) minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 6px;
    margin-bottom: 12px;
}

.task-communication-detail-fields dt {
    margin: 0;
    color: #555;
    font-weight: 600;
}

.task-communication-detail-fields dd {
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-communication-detail-section-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.task-communication-detail-message {
    border: 1px solid #dfe8f3;
    border-radius: 6px;
    background-color: #fafcff;
    padding: 10px;
    margin-bottom: 12px;
}

.task-communication-detail-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-communication-detail-html-frame {
    border: 0;
    display: block;
    height: min(60vh, 720px);
    max-width: 100%;
    min-height: 320px;
    overflow: auto;
    width: 100%;
}

.task-communication-detail-attachments ul {
    margin: 0;
    padding-left: 18px;
}

.task-communication-detail-attachments li {
    margin-bottom: 4px;
}

.task-create-case-dialog {
    font-size: 13px;
}

.task-create-case-dialog-ref {
    border: 1px solid #dfe8f3;
    border-radius: 6px;
    background-color: #fafcff;
    padding: 10px;
    margin-bottom: 12px;
}

.task-create-case-dialog-ref-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.task-create-case-dialog-ref .dl-horizontal dt,
.task-create-case-dialog-ref .dl-horizontal dd {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.business-hours-week-grid > thead > tr > th,
.business-hours-week-grid > tbody > tr > td,
.business-hours-week-grid .business-hours-time {
    text-align: left;
}

.business-hours-week-grid > thead > tr > th,
.business-hours-exceptions > thead > tr > th {
    font-weight: normal;
}

.business-hours-exceptions-label {
    display: block;
}

.business-hours-exception-actions {
    margin-bottom: 8px;
}

.business-hours-exceptions-scroll {
    overflow-x: auto;
}

.business-hours-exceptions {
    min-width: 620px;
}

.business-hours-week-grid-scroll {
    overflow-x: auto;
}

.business-hours-week-grid {
    min-width: 720px;
}

.business-hours-week-grid .business-hours-time {
    padding-left: 0;
    padding-right: 0;
}

.business-hours-week-grid .business-hours-time:focus:not(:focus-visible) {
    outline: none;
}

.business-hours-exception-row {
    cursor: pointer;
}

.business-hours-exception-row:focus {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.business-hours-exception-row:focus:not(:focus-visible) {
    outline: none;
}

/* Kompakte Kopfzeile für Razor-Seiten mit Seitentitel und nachfolgender Trennlinie. */
.page-heading {
    font-size: 18px;
    line-height: 1.1;
    margin-top: 10px;
    margin-bottom: 10px;
}

.page-heading-with-actions {
    display: flex;
    align-items: center;
}

.page-heading-actions {
    margin-left: auto;
}

.page-heading + hr {
    margin-top: 0;
    margin-bottom: 10px;
}

.contact-field-verification {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
}

.contact-field-verification--unverified {
    color: var(--default-border-color, #cccccc);
}

.contact-field-verification--unverified .contact-field-verification-action,
.contact-field-verification--unverified .contact-field-verification-indicator {
    color: var(--default-border-color, #cccccc);
}

.contact-field-verification--verified {
    color: var(--primary-bg);
}

.contact-field-verification--verified .contact-field-verification-action,
.contact-field-verification--verified .contact-field-verification-indicator {
    color: var(--primary-bg);
}

.contact-field-verification-action {
    color: inherit;
    padding: 0;
}

.contact-field-verification-action:hover,
.contact-field-verification-action:focus {
    color: inherit;
}

.contact-field-verification-action:disabled {
    color: inherit;
    opacity: 1;
}

.order-confirmation {
    margin: 8px auto;
    max-width: 420px;
}

.order-confirmation-header {
    text-align: center;
    margin-bottom: 22px;
}

.order-confirmation-header .glyphicon {
    color: var(--primary-bg, #337ab7);
    font-size: 28px;
}

.order-confirmation-header h4 {
    margin: 10px 0 0;
}

.order-confirmation #orderconfirmationcode {
    font-size: 22px;
    letter-spacing: 0.28em;
    text-align: center;
}

.order-confirmation-state {
    min-height: 20px;
}

.order-confirmation-resend {
    margin-top: 20px;
    text-align: center;
}

.order-confirmation-resend .help-block {
    margin-bottom: 0;
}

@media (max-height: 820px) {
    .task-timeline-scroll {
        max-height: min(46vh, 340px);
    }
}

@media (max-width: 767px) {
    .task-timeline-scroll {
        max-height: min(42vh, 300px);
        padding-right: 0;
    }

    .task-timeline-entry-content {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .task-timeline-entry-context {
        max-width: 100%;
    }

    .task-timeline-entry-content--email {
        max-width: 100%;
    }

    .task-timeline-entry-actions {
        max-width: 100%;
    }

    .task-timeline-entry-content--bubble {
        padding: 10px 12px;
    }

    #tasks-read-root .task-email-conversation-card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .task-communication-detail-fields {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    .task-communication-detail-fields dt {
        margin-top: 6px;
    }

    .task-create-case-dialog-ref .dl-horizontal dt,
    .task-create-case-dialog-ref .dl-horizontal dd {
        float: none;
        width: auto;
        text-align: left;
        margin-left: 0;
    }
}




/* Reusable soft semantic states */
.btn-soft-warning {
    background-color: #fff7e5;
    border-color: #ecd39c;
    color: #805d16;
}

.btn-soft-warning:hover,
.btn-soft-warning:focus {
    background-color: #fff0ca;
    border-color: #d9b968;
    color: #684b11;
}

.btn-soft-danger {
    background-color: #fcebed;
    border-color: #e7b8be;
    color: #a33c48;
}

.btn-soft-danger:hover,
.btn-soft-danger:focus {
    background-color: #f8dce0;
    border-color: #d998a2;
    color: #87313b;
}

.btn-soft-danger[disabled],
.btn-soft-danger[disabled]:hover,
.btn-soft-danger[disabled]:focus {
    background-color: #f6e3e5;
    border-color: #e4c3c8;
    color: #a06b73;
    opacity: 1;
}

.btn-soft-neutral {
    background-color: #ffffff;
    border-color: #d8dee6;
    color: #52606d;
}

.status-chip-success,
.oneinbox-status-chip.status-chip-success {
    color: #4f7a63;
    border-color: #c8ddd0;
    background: #f3faf5;
}

.status-chip-danger,
.oneinbox-status-chip.status-chip-danger {
    color: #a33c48;
    border-color: #e7c2c8;
    background: #fdf4f5;
}

.status-chip-neutral,
.oneinbox-status-chip.status-chip-neutral {
    color: #52606d;
    border-color: #d8dee6;
    background: #ffffff;
}

/* OneInbox presentation */
#oneInboxRoot[data-premiumordered],
        #oneInboxRoot[data-premiumordered]:not(:hover) {
            opacity: 1 !important;
        }

        #oneInboxRoot * {
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .oneinbox-master-detail {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }

        @media (min-width: 992px) {
            .oneinbox-master-detail {
                grid-template-columns: minmax(340px, 380px) minmax(0, 1fr);
                align-items: start;
            }

        }

        .oneinbox-list-panel {
            min-width: 0;
        }

        .oneinbox-filter-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 26px;
        }

        #oneInboxRoot .oneinbox-list-sort .oneinbox-sort-toggle {
            align-items: center;
            color: #969696;
            display: inline-flex;
            justify-content: center;
            min-height: 18px;
            min-width: 18px;
            text-decoration: none;
        }

        #oneInboxRoot .oneinbox-list-sort .oneinbox-sort-toggle .glyphicon {
            color: inherit;
            font-size: 12px;
            line-height: 1;
        }

        #oneInboxRoot .oneinbox-list-sort .oneinbox-sort-toggle:hover,
        #oneInboxRoot .oneinbox-list-sort .oneinbox-sort-toggle:focus {
            color: #5f5f5f;
            text-decoration: none;
        }

        .oneinbox-list-sort {
            display: flex;
            height: 0;
            justify-content: flex-end;
            margin: 0;
            position: relative;
            z-index: 1;
        }

        .oneinbox-list-sort .oneinbox-sort-toggle {
            bottom: 3px;
            position: absolute;
            right: 0;
        }

        .oneinbox-search-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: flex-end;
            margin: 0 0 16px;
            padding: 10px;
            border: 1px solid #d8dee6;
            border-radius: 6px;
            background: #fafbfd;
        }

        .oneinbox-search-toolbar .form-group {
            flex: 0 1 160px;
            min-width: 140px;
            margin: 0;
        }

        .oneinbox-search-toolbar .oneinbox-search-query {
            flex: 1 1 260px;
        }

        .oneinbox-filter-tab {
            border: 1px solid #d8dee6;
            border-radius: 999px;
            color: #425466;
            display: inline-flex;
            font-size: 13px;
            padding: 5px 10px;
            text-decoration: none;
        }

        .oneinbox-filter-tab:hover,
        .oneinbox-filter-tab:focus {
            background: #f3f8ff;
            border-color: #9db9d5;
            color: #245b9a;
            text-decoration: none;
        }

        .oneinbox-filter-tab.is-active {
            background: #245b9a;
            border-color: #245b9a;
            color: #fff;
        }

        .oneinbox-cards {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .oneinbox-card {
            border: 1px solid #d8dee6;
            border-radius: 6px;
            background: #fff;
            position: relative;
            transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
        }

        .oneinbox-swipe-host {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
        }

        .oneinbox-swipe-actions {
            display: none;
        }

        .oneinbox-swipe-card {
            position: relative;
            z-index: 1;
            transition: transform 180ms ease-out;
        }

        @media (max-width: 767px) {
            .oneinbox-swipe-actions {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: stretch;
                z-index: 0;
            }

            .oneinbox-swipe-actions-left { justify-content: flex-start; }
            .oneinbox-swipe-actions-right { justify-content: flex-end; }
            .oneinbox-swipe-actions button { display: none; min-width: 92px; border: 0; }
            .oneinbox-swipe-host[data-swipe-state="open-left"] .oneinbox-swipe-actions-left button,
            .oneinbox-swipe-host[data-swipe-state="open-right"] .oneinbox-swipe-actions-right button { display: block; }
            .oneinbox-swipe-host.is-swipe-dragging .oneinbox-swipe-card { transition: none; }
        }

        @media (prefers-reduced-motion: reduce) {
            .oneinbox-swipe-card { transition-duration: 1ms; }
        }

        .oneinbox-swipe-more-panel { position: fixed; inset: 0; z-index: 1100; }
        .oneinbox-swipe-more-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
        .oneinbox-swipe-more-sheet { position: absolute; bottom: 0; left: 0; right: 0; max-height: 75vh; overflow: auto; padding: 18px max(16px, env(safe-area-inset-bottom)); background: #fff; display: grid; gap: 10px; }
        .oneinbox-swipe-more-sheet button { min-height: 44px; text-align: left; }

        .oneinbox-card:hover,
        .oneinbox-card:focus-within {
            border-color: #b3c4d7;
            background: #f9fbfd;
        }

        .oneinbox-card.is-selected {
            border-color: #245b9a;
            background: #f3f8ff;
            color: #1f2933;
        }

        .oneinbox-card.is-selected:hover,
        .oneinbox-card.is-selected:focus-within {
            border-color: #245b9a;
            background: #eef5ff;
        }

        .oneinbox-card.is-selected *,
        .oneinbox-card.is-selected .oneinbox-subject,
        .oneinbox-card.is-selected .oneinbox-card-link,
        .oneinbox-card.is-selected .oneinbox-meta,
        .oneinbox-card.is-selected .oneinbox-preview,
        .oneinbox-card.is-selected .oneinbox-footer,
        .oneinbox-card.is-selected .text-muted,
        .oneinbox-card.is-selected .oneinbox-card-link:hover,
        .oneinbox-card.is-selected .oneinbox-card-link:focus,
        .oneinbox-card.is-selected .oneinbox-card-link:visited {
            color: #1f2933 !important;
        }

        .oneinbox-card.is-selected .oneinbox-card-link {
            background: transparent;
        }

        .oneinbox-card.is-selected .oneinbox-card-link:hover,
        .oneinbox-card.is-selected .oneinbox-card-link:focus {
            background: rgba(36, 91, 154, 0.04);
        }

        .oneinbox-card.is-selected::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            border-radius: 8px 0 0 8px;
            background: #245b9a;
        }

        .oneinbox-card-link {
            display: block;
            color: inherit;
            text-decoration: none;
            padding: 10px 12px;
        }

        .oneinbox-card-link:hover,
        .oneinbox-card-link:focus {
            text-decoration: none;
            background: #f6f9fd;
        }

        .oneinbox-card-link:focus {
            outline: 2px solid #245b9a;
            outline-offset: 2px;
        }

        .oneinbox-card-head {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 6px 0 0;
        }

        .oneinbox-subject {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            font-size: 14px;
            line-height: 1.3;
        }

        .oneinbox-card-time {
            flex: 0 0 auto;
            margin-left: auto;
            white-space: nowrap;
        }

        .oneinbox-meta,
        .oneinbox-preview,
        .oneinbox-footer {
            margin-top: 6px;
        }

        .oneinbox-meta-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .oneinbox-top-tags {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .oneinbox-top-tags .oneinbox-channel-marker {
            align-self: center;
            order: -1;
        }

        .oneinbox-status-chip {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            border: 1px solid #d8dee6;
            padding: 3px 8px;
            font-size: 12px;
            color: #334e68;
            background: #f8fafc;
        }

        .oneinbox-detail-panel .btn-primary {
            background-color: #245b9a;
            border-color: #1e4c80;
        }

        .oneinbox-channel-marker {
            display: inline-grid;
            place-items: center;
            box-sizing: border-box;
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            border: 1px solid var(--primary-border);
            border-radius: 5px;
            background: var(--primary-bg);
            color: var(--primary-fg);
            line-height: 1;
            vertical-align: middle;
            white-space: nowrap;
        }

        .oneinbox-channel-marker > .fab,
        .oneinbox-channel-marker > .fas,
        .oneinbox-channel-marker > .glyphicon {
            display: grid;
            place-items: center;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            margin: 0 !important;
            padding: 0 !important;
            position: static !important;
            top: auto !important;
            color: var(--primary-fg) !important;
            line-height: 1;
            text-align: center;
        }

        .oneinbox-channel-marker > .fab {
            font-size: 19px;
        }

        .oneinbox-channel-marker > .fas,
        .oneinbox-channel-marker > .glyphicon {
            font-size: 13px;
            line-height: 1;
        }

        .oneinbox-status-indicator {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 6px;
            background: #9da9b8;
        }


        .oneinbox-meta {
            color: #4f5b66;
            font-size: 13px;
        }

        .oneinbox-sender {
            min-width: 0;
        }

        .oneinbox-sender-primary,
        .oneinbox-sender-secondary {
            display: block;
            overflow-wrap: anywhere;
        }

        .oneinbox-sender-secondary {
            color: #63717d;
            font-size: 0.9em;
        }

        .oneinbox-preview,
        .oneinbox-detail-body,
        .oneinbox-detail-preview {
            white-space: pre-wrap;
            color: #1f2933;
        }

        .oneinbox-preview {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.35;
            min-height: 2.7em;
        }

        .oneinbox-footer {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            color: #4f5b66;
            font-size: 13px;
        }

        .oneinbox-paging {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2px;
            margin: 16px 0 8px;
            min-height: 30px;
        }

        .oneinbox-paging-link {
            border: 0;
            background: transparent;
            min-width: 20px;
            padding: 3px 2px;
        }

        .oneinbox-paging-link.is-current,
        .oneinbox-paging-link[aria-disabled="true"] {
            color: #777777;
            cursor: default;
            text-decoration: none;
        }

        .oneinbox-paging-link.is-current {
            font-weight: 700;
        }

        .oneinbox-paging-link-previous,
        .oneinbox-paging-link-next {
            min-width: auto;
        }

        .oneinbox-paging-ellipsis {
            color: #777777;
            min-width: 16px;
            text-align: center;
        }

        .oneinbox-detail-panel {
            border: 1px solid #d8dee6;
            border-radius: 8px;
            padding: 16px;
            background: #fff;
            min-width: 0;
            color: #1f2933;
        }

        .oneinbox-detail-panel .oneinbox-detail-header,
        .oneinbox-detail-panel .oneinbox-detail-title-main,
        .oneinbox-detail-panel .oneinbox-detail-body,
        .oneinbox-detail-panel .oneinbox-detail-section,
        .oneinbox-detail-panel .oneinbox-meta-head {
            color: #1f2933;
        }

        .oneinbox-detail-header {
            border-bottom: 1px solid #e4e7eb;
            padding-bottom: 10px;
            margin-bottom: 12px;
        }

        .oneinbox-detail-sender-line,
        .oneinbox-detail-participants {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 5px;
        }

        .oneinbox-meta-head + .oneinbox-detail-sender-line {
            margin-top: 8px;
        }

        .oneinbox-detail-participants {
            color: #52606d;
            font-size: 13px;
            gap: 5px 12px;
            margin-top: 8px;
        }

        .oneinbox-detail-sender-line .oneinbox-sender-primary,
        .oneinbox-detail-sender-line .oneinbox-sender-secondary {
            display: inline;
        }

        .oneinbox-detail-sender-line .oneinbox-sender-secondary::before {
            content: "· ";
        }

        .oneinbox-sender-candidates {
            display: contents;
        }

        .oneinbox-sender-candidates details summary {
            cursor: pointer;
        }

        .oneinbox-sender-candidates details[open] {
            display: contents;
        }

        .oneinbox-sender-candidate-list {
            flex: 0 0 100%;
            display: grid;
            gap: 8px;
            margin-top: 6px;
        }

        .oneinbox-sender-candidate {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }

        .oneinbox-sender-candidate form {
            margin: 0;
            text-align: center;
        }

        .oneinbox-detail-header .oneinbox-detail-title-main {
            margin: 8px 0 6px;
            line-height: 1.25;
        }

        .oneinbox-detail-section {
            margin-top: 14px;
            padding-top: 10px;
            border-top: 1px solid #eef2f6;
        }

        .oneinbox-mobile-back {
            display: none;
            margin-bottom: 12px;
        }

        @media (max-width: 991px) {
            .oneinbox-master-detail.has-selected .oneinbox-list-panel {
                display: none;
            }

            .oneinbox-master-detail.is-list-only .oneinbox-detail-panel {
                display: none;
            }

            .oneinbox-master-detail.has-selected .oneinbox-mobile-back {
                display: inline-block;
            }
        }

        .oneinbox-detail-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .oneinbox-detail-block + .oneinbox-detail-block {
            margin-top: 12px;
        }

        .oneinbox-tech details {
            border: 1px solid #d8dee6;
            border-radius: 8px;
            padding: 8px 10px;
            background: #f9fafb;
        }

        .oneinbox-tech summary {
            cursor: pointer;
            font-weight: 600;
        }

        .oneinbox-tech-table {
            margin-top: 10px;
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .oneinbox-tech-table th,
        .oneinbox-tech-table td {
            border-top: 1px solid #e4e7eb;
            padding: 6px 0;
            text-align: left;
            vertical-align: top;
        }

        .oneinbox-tech-table th {
            width: 180px;
            color: #52606d;
        }

        .oneinbox-event-list {
            margin: 10px 0 0;
            padding-left: 18px;
        }

        .oneinbox-actions {
            margin-top: 16px;
            padding-top: 12px;
            border-top: 1px solid #e4e7eb;
            display: grid;
            gap: 12px;
        }

        .oneinbox-actions form {
            margin: 0;
        }

        .oneinbox-actions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 8px;
        }

        .oneinbox-actions .form-group {
            margin-bottom: 8px;
        }

        .oneinbox-action-group {
            border: 1px solid #e4e7eb;
            border-radius: 8px;
            padding: 10px;
            background: #fbfcfe;
        }

        .oneinbox-action-group-title {
            margin: 0 0 8px;
            font-size: 13px;
            color: #4f5b66;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }

        .oneinbox-action-group.oneinbox-action-group-quick {
            border-color: #c9d6e3;
            background: #f6f9fc;
            margin-bottom: 4px;
            display: flex;
            flex-direction: column;
        }

        .oneinbox-action-group-title {
            display: none;
        }

        .oneinbox-quick-actions-layout {
            display: contents;
        }

        .oneinbox-quick-fields {
            display: grid;
            gap: 8px;
            grid-template-columns: 1fr;
            order: 2;
        }

        .oneinbox-quick-fields.collapse:not(.in) {
            display: none;
        }

        .oneinbox-quick-fields.collapse.in {
            display: grid;
        }

        .oneinbox-quick-actions-layout .form-group {
            margin-bottom: 0;
        }

        .oneinbox-quick-actions-buttons {
            display: grid;
            gap: 8px;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        }

        .oneinbox-quick-actions-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            margin-top: 12px;
            order: 1;
        }

        .oneinbox-quick-actions-row form {
            margin: 0;
        }

        .oneinbox-quick-actions-row .btn {
            white-space: nowrap;
        }

        .oneinbox-inline-action-panel {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #dfe8f2;
            order: 2;
        }

        .oneinbox-inline-action-panel-more {
            order: 4;
        }

        .oneinbox-inline-submit-actions {
            margin-top: 8px;
        }

        .oneinbox-more-actions {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #dfe8f2;
            order: 3;
        }

        .oneinbox-more-actions summary {
            cursor: pointer;
            font-weight: 600;
        }

        .oneinbox-more-actions-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

        .oneinbox-more-actions-grid form {
            margin: 0;
        }

        @media (min-width: 992px) {
            .oneinbox-quick-fields {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .oneinbox-quick-field-span-2 {
                grid-column: 1 / -1;
            }
        }

        .oneinbox-empty-state {
            border: 1px solid #d8dee6;
            border-radius: 8px;
            padding: 14px;
            background: #f8fafc;
            color: #334e68;
        }

        .oneinbox-action-collapse {
            margin-top: 8px;
        }

        .notification-center-nav {
            margin-right: 0;
        }

        .notification-center-toggle {
            position: relative;
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 2px 6px 2px 2px;
            color: var(--text-muted);
            background-color: var(--colorstripe2);
            border-color: var(--border-soft);
            border-radius: 4px;
            box-shadow: none;
        }

        .notification-center-toggle:hover,
        .notification-center-toggle:focus,
        .notification-center-toggle.focus,
        .open > .notification-center-toggle.dropdown-toggle {
            color: var(--text-color);
            background-color: color-mix(in srgb, var(--primary-bg) 10%, var(--control-bg));
            border-color: var(--primary-border);
        }

        .notification-center-toggle:focus-visible {
            outline: 2px solid var(--primary-bg);
            outline-offset: 2px;
        }

        .notification-center-bell {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            color: var(--primary-fg);
            background-color: var(--primary-bg);
            border: 1px solid var(--primary-border);
            border-radius: 50%;
        }

        .notification-center-toggle:not(.has-unread) .notification-center-bell {
            opacity: 0.65;
        }

        .notification-center-toggle.has-unread .notification-center-bell {
            opacity: 1;
        }

        #notification-center-label {
            margin-left: 6px;
            font-weight: 400;
        }

        .notification-center-toggle .notification-center-unread-count {
            top: 0;
            margin-left: 4px;
            color: var(--text-color);
            background-color: var(--colorstripe1);
        }

        .notification-center-menu {
            min-width: 250px;
            padding: 6px 0;
        }

        .notification-center-source {
            display: block;
            padding: 8px 14px;
        }

        .notification-center-source + .notification-center-source {
            border-top: 1px solid #e5e5e5;
        }

        .notification-center-source-summary,
        .notification-center-source-link {
            display: block;
        }

        .notification-center-source-summary {
            margin-top: 2px;
        }

        .notification-center-source-link {
            margin-top: 5px;
        }

        .oneinbox-information-row-unread > td:not(.oneinbox-information-action) {
            font-weight: 700;
        }

        .oneinbox-information-row-read > td {
            font-weight: 400;
        }

        /* Der KI-FAQ-Baum verwendet lokale Kontrast- und Umbruchregeln, damit weder Listen noch Buttons anderer Module betroffen sind. */
        #faq-ai-creation-workspace .faq-ai-creation-editor-tree,
        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-children,
        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node {
            min-width: 0;
            color: #333;
        }

        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node-heading {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            min-width: 0;
        }

        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node-select {
            flex: 1 1 auto;
            min-width: 0;
            max-width: 100%;
            height: auto;
            padding-left: 0;
            padding-right: 0;
            white-space: normal;
            overflow-wrap: anywhere;
            text-align: left;
            line-height: 1.4;
        }

        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node-expand {
            flex: 0 0 auto;
            margin-top: 2px;
        }

        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node-metadata,
        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node-preview {
            white-space: normal;
            overflow-wrap: anywhere;
        }

        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node:not(.active) .faq-ai-creation-editor-tree-node-metadata {
            color: #777;
        }

        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node:not(.active) .faq-ai-creation-editor-tree-node-preview {
            color: #333;
        }

        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-children {
            margin: 8px 0 0 16px;
        }

        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node.active {
            color: #fff;
        }

        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node.active .faq-ai-creation-editor-tree-node-select,
        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node.active .faq-ai-creation-editor-tree-node-select:hover,
        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node.active .faq-ai-creation-editor-tree-node-select:focus {
            color: #fff;
            font-weight: 700;
        }

        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node.active .faq-ai-creation-editor-tree-node-metadata,
        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node.active .faq-ai-creation-editor-tree-node-preview {
            color: #fff;
        }

        #faq-ai-creation-workspace .faq-ai-creation-editor-tree-node-select:focus {
            outline: 3px solid #fff;
            outline-offset: 2px;
            box-shadow: 0 0 0 5px #122b40;
        }

        @media (max-width: 767px) {
            #faq-ai-creation-workspace .faq-ai-creation-editor-tree-children {
                margin-left: 8px;
            }
        }

        @media (max-width: 767px) {
            .notification-center-nav {
                float: none !important;
                margin: 7.5px -15px;
            }

            .notification-center-nav > li > .notification-center-toggle {
                margin-left: 15px;
            }
        }

        .faq-metadata-batch-preview {
            display: grid;
            gap: 16px;
        }

        .faq-metadata-batch-preview-subtitle,
        .faq-metadata-batch-model-route,
        .faq-metadata-batch-regeneration-hint,
        .faq-metadata-batch-external-disclosure-hint {
            margin: 0;
        }

        .faq-metadata-batch-preview-subtitle {
            color: #777;
            font-size: 13px;
        }

        .faq-metadata-batch-processing-mode {
            margin: 0;
        }

        .faq-metadata-batch-mode-switch {
            background-color: var(--switch-track-bg);
            border: 1px solid var(--switch-track-border);
            border-radius: 34px;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            padding: 3px;
            position: relative;
            width: 100%;
        }

        .faq-metadata-batch-mode-thumb {
            background-color: var(--switch-track-checked-bg);
            border: 1px solid var(--switch-track-checked-border);
            border-radius: 34px;
            bottom: 3px;
            left: 3px;
            pointer-events: none;
            position: absolute;
            top: 3px;
            transition: transform .2s;
            width: calc((100% - 6px) / 3);
        }

        .faq-metadata-batch-mode-switch.is-public .faq-metadata-batch-mode-thumb {
            transform: translateX(100%);
        }

        .faq-metadata-batch-mode-switch.is-internal .faq-metadata-batch-mode-thumb {
            transform: translateX(200%);
        }

        .faq-metadata-batch-mode-switch .faq-metadata-batch-mode-option {
            align-items: center;
            color: inherit;
            cursor: pointer;
            display: flex;
            font-size: 13px;
            justify-content: center;
            margin: 0;
            min-height: 30px;
            min-width: 0;
            padding: 4px 8px;
            position: relative;
            text-align: center;
            white-space: normal;
            z-index: 1;
        }

        .faq-metadata-batch-mode-switch .faq-metadata-batch-mode-option.active {
            color: var(--switch-thumb-bg);
            font-weight: 600;
        }

        .faq-metadata-batch-mode-input {
            border: 0;
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            height: 1px;
            margin: -1px;
            opacity: 0;
            overflow: hidden;
            padding: 0;
            position: absolute;
            white-space: nowrap;
            width: 1px;
        }

        .faq-metadata-batch-mode-option:focus-within {
            border-radius: 34px;
            box-shadow: 0 0 1px var(--switch-focus-shadow);
            outline: 2px solid var(--switch-focus-shadow);
            outline-offset: 2px;
        }

        .faq-metadata-batch-metrics {
            display: grid;
            gap: 8px;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .faq-metadata-batch-metric {
            background-color: var(--switch-track-bg);
            border: 1px solid var(--switch-track-border);
            border-radius: 4px;
            display: grid;
            gap: 2px;
            min-width: 0;
            padding: 10px;
        }

        .faq-metadata-batch-metric-value {
            font-size: 20px;
            line-height: 1;
        }

        .faq-metadata-batch-metric-label {
            color: #777;
            font-size: 12px;
            line-height: 1.3;
        }

        .faq-metadata-batch-model-route {
            font-weight: 600;
        }

        .faq-metadata-batch-regeneration {
            border-top: 1px solid var(--switch-track-border);
            padding-top: 12px;
        }

        .faq-metadata-batch-regeneration-hint {
            color: #777;
            font-size: 12px;
            margin: 6px 0 0;
        }

        .faq-metadata-batch-external-disclosure-hint {
            border-left: 3px solid var(--switch-track-checked-border);
            padding-left: 10px;
        }

        .faq-metadata-batch-draft-card .faq-metadata-batch-draft-selection {
            align-items: center;
            border-top: 1px solid #eee;
            display: flex;
            flex-wrap: wrap;
            gap: 6px 8px;
            margin: 16px 0 0;
            padding: 10px 0 0;
        }

        .faq-metadata-batch-draft-card .faq-metadata-batch-draft-selection > input {
            flex: 0 0 auto;
            margin: 0;
        }

        .faq-metadata-batch-draft-card .faq-metadata-batch-selection-option {
            cursor: pointer;
            flex: 1 1 calc(100% - 24px);
            margin: 0;
            min-width: 0;
        }

        @media (max-width: 479px) {
            .faq-metadata-batch-mode-switch .faq-metadata-batch-mode-option {
                font-size: 12px;
                padding-left: 4px;
                padding-right: 4px;
            }

            .faq-metadata-batch-metrics {
                grid-template-columns: 1fr;
            }
        }