html,
body {
  font-family: "Lato", sans-serif;
}

::selection {
  background: var(--secondary-color);
  color: #fff;
}

.modal-background {
    background-color: gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.clear {
    clear:both;
}

hr {
    margin: 25px 0;
}

/* ==================================================== */
/* root
/* ==================================================== */
:root {
    /* SC
    --primary-color: #051561;
    --secondary-color: #aaaaaa;
    --background-alert: #efefef;
    */
    /* PF
    --primary-color: #ffcc00;
    --secondary-color: #aaaaaa;
    --background-alert: #efefef;
    */
    /* CMS1
    --primary-color: #6b0808;
    --secondary-color: #ef8441;
    --background-alert: #f5b27c;
    */
    --primary-color: #6b0808;
    --secondary-color: #ef8441;
    --background-alert: #f5b27c;
    --filter-label-color: #8d8d99;
    --border-color: #e2e1e1;
    --black-text-color: #16100f;
    --main-content-background: #f9f9f9;
    --negative-color: #e2574c;
    --positive-color: #3db39e;
    --avatar-color: #024d74;
    --neutral-color: #ceba8f;
}

/* ==================================================== */
    /* Common buttons
/* ==================================================== */
    .control-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.button-small {
    padding: 5px 24px;
    font-weight: 400;
    text-align: center;
    color: white;
    border: 1px solid var(--primary-color);
    border-radius: 9999px;
    background-color: var(--primary-color);
    cursor: pointer;
    min-width: 20px;
}

.button-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 44px;
}

    .button-wrapper.no-space {
        margin: 0;
    }

.primary-btn-big {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    white-space: nowrap;
    font-weight: 400;
    color: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 9999px;
    background-color: var(--primary-color);
    height: 44px;
    cursor: pointer;
}

    .primary-btn-big:hover, .primary-btn-small:hover {
        border-color: var(--secondary-color);
        background-color: var(--secondary-color);
    }

.secondary-btn-big {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    white-space: nowrap;
    font-weight: 400;
    border-radius: 9999px;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    background-color: #fff;
    height: 44px;
    cursor: pointer;
}

    .secondary-btn-big:hover, .secondary-btn-small:hover {
        border-color: var(--secondary-color);
        color: var(--secondary-color);
    }

.primary-btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    white-space: nowrap;
    font-weight: 400;
    color: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 9999px;
    background-color: var(--primary-color);
    height: 38px;
    cursor: pointer;
}

.secondary-btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    white-space: nowrap;
    font-weight: 400;
    border-radius: 9999px;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    background-color: #fff;
    height: 38px;
    cursor: pointer;
}

.button-wrapper-login {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
}

.button-wrapper.small-space {
    margin: 10px 0;
}

/* ==================================================== */
/* Panel Popup                                          */
/* ==================================================== */
.popup {
    background-color: white;
    border-radius: 6px;
    box-shadow: 0px 2px 16px #8d8d998d;
    z-index: 40;
}

    .popup .title-wrapper {
        background-color: var(--primary-color);
        display: flex;
        align-items: center;
        text-align: center;
        padding: 10px 16px;
        border-radius: 6px 6px 0 0;
        cursor: move;
    }

        .popup .title-wrapper .title {
            flex: 1 1 0%;
            font-weight: 900;
            color: white;
        }

        .popup .title-wrapper .x {
            color: white;
            cursor: pointer;
        }

    .popup .content > table:first-child {
        margin-top: 30px;
    }

    .popup tbody tr td {
        padding: 0 20px;
    }

        .popup tbody tr td:first-child div {
            font-size: 14px;
            color: var(--filter-label-color);
        }

    .popup .content table select,
    .popup .content table input[type="text"],
    .popup .content table textarea,
    .popup .content table input[type="password"] {
        appearance: none;
        font-size: 14px;
        line-height: 20px;
        width: 100%;
        background-color: white;
        color: var(--black-text-color);
        padding: 8px 16px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
    }

        .popup .content table select:focus,
        .popup .content table input[type="text"]:focus,
        .popup .content table textarea:focus,
        .popup .content table input[type="password"]:focus {
            outline: 2px solid transparent;
            outline-offset: 2px;
            box-shadow: inset 0 0 0 0px #fff, inset 0 0 0 calc(2px + 0px) var(--primary-color), var(--tw-shadow, 0 0 #0000);
        }

    .popup .button-wrapper.medium-space {
        padding: 0 20px;
        margin: 0 0 30px 0;
    }

    .popup hr {
        margin: 25px 20px 20px 20px;
    }

/* ==================================================== */
/* Table                                                */
/* ==================================================== */
.table-wrapper {
    overflow-x: auto;
}

.table-overflow {
    display: inline-block;
    overflow: hidden;
    min-width: 100%;
    vertical-align: middle;
    position:relative;
}

.table {
    min-width: 100%;
}

    .table tbody tr.paging td > div.fl > table tbody tr > td > span,
    .table tbody tr.paging td > div.fl > table tbody tr > td > a {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        line-height: 1rem;
        border-radius: 0.375rem;
        border: 1px solid var(--filter-label-color);
        color: var(--filter-label-color);
        background-color: white;
    }

    .table tbody tr.paging td > div.fl > table tbody tr > td > span {
        cursor: default;
        background-color: var(--filter-label-color);
        color: white;
    }

        .table tbody tr.paging td > div.fl > table tbody tr > td > span:hover,
        .table tbody tr.paging td > div.fl > table tbody tr > td > a:hover {
            background-color: var(--filter-label-color);
            color: white;
        }

    .table tbody tr.paging .fr {
        color: var(--filter-label-color);
        font-size: 0.875rem;
        line-height: 1.25rem;
        margin-top: 15px;
    }

    .table tbody tr:nth-of-type(2) th {
        font-weight: 400;
        color: var(--black-text-color);
        padding: 0.75rem 1.5rem;
        background-color: white;
        border-bottom: 1px solid var(--border-color);
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase;
        text-align: left;
    }

    .table tbody tr:nth-of-type(2) th:last-child {
        width: 0 !important;
    }

        .table tbody tr:nth-of-type(2) th a {
            font-weight: 400;
            text-align: left;
            font-size: 0.75rem;
            line-height: 1rem;
            text-decoration-line: underline;
            text-transform: uppercase;
            color: var(--secondary-color);
        }

    .table tbody tr td {
        color: var(--black-text-color);
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 400;
    }

        .table tbody tr td span.dropDown {
            color: var(--secondary-color);
            text-decoration-line: underline;
            font-size: 0.875rem;
            line-height: 1.25rem;
        }

    .table tbody > tr:not(.paging) > td {
        padding: 0.75rem 1.5rem;
    }

    .table tbody tr.paging td {
        padding: 2px;
    }

        .table tbody tr.paging td:first-child {
            padding-left: 0;
        }

        .table tbody tr.paging td:last-child {
            background-color: transparent !important;
            padding-right: 0;
        }

    .table tbody tr:not(.paging) td:last-child {
        background-color: var(--secondary-color);
    }

    .table > tbody > tr:not(.paging) > td:last-child span span {
        color: white;
        text-decoration: unset;
        cursor: pointer;
    }

    .table tbody tr:not(.paging) td:last-child span {
        height: 20px;
        width: 20px;
    }

    .table th:nth-child(1) {
        border-top-left-radius: 6px;
    }

    .table th:nth-last-child(1) {
        border-top-right-radius: 6px;
    }


    .table textarea {
        appearance: none;
        font-size: 14px;
        line-height: 20px;
        width: 100%;
        background-color: white;
        color: var(--black-text-color);
        padding: 8px 16px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
    }

        .table textarea:focus {
            outline: 2px solid transparent;
            outline-offset: 2px;
            box-shadow: inset 0 0 0 0px #fff, inset 0 0 0 calc(2px + 0px) var(--primary-color), var(--tw-shadow, 0 0 #0000);
        }

.table-no-bg {
    min-width: 100%;
}

    .table-no-bg tbody tr.paging td > div.fl > table tbody tr > td > span, .table-no-bg tbody tr.paging td > div.fl > table tbody tr > td > a {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        line-height: 1rem;
        border-radius: 0.375rem;
        border: 1px solid var(--filter-label-color);
        color: var(--filter-label-color);
        background-color: white;
    }

    .table-no-bg tbody tr.paging td > div.fl > table tbody tr > td > span {
        cursor: default;
        background-color: var(--filter-label-color);
        color: white;
    }

        .table-no-bg tbody tr.paging td > div.fl > table tbody tr > td > span:hover, .table-no-bg tbody tr.paging td > div.fl > table tbody tr > td > a:hover {
            background-color: var(--filter-label-color);
            color: white;
        }

    .table-no-bg tbody tr.paging .fr {
        color: var(--filter-label-color);
        font-size: 0.875rem;
        line-height: 1.25rem;
        margin-top: 15px;
    }

    .table-no-bg tbody tr:nth-of-type(1) th {
        font-weight: 400;
        color: var(--black-text-color);
        padding: 0.75rem 1.5rem;
        background-color: white;
        border-bottom: 1px solid var(--border-color);
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase;
        text-align: left;
    }

        .table-no-bg tbody tr:nth-of-type(1) th a {
            font-weight: 400;
            text-align: left;
            font-size: 0.75rem;
            line-height: 1rem;
            text-decoration-line: underline;
            text-transform: uppercase;
            color: var(--secondary-color);
        }

    .table-no-bg tbody tr td {
        color: var(--black-text-color);
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 400;
    }

        .table-no-bg tbody tr td span.dropDown {
            color: var(--secondary-color);
            text-decoration-line: underline;
            font-size: 0.875rem;
            line-height: 1.25rem;
        }

    .table-no-bg tbody > tr:not(.paging) > td {
        padding: 0.75rem 1.5rem;
    }

    .table-no-bg tbody tr.paging td {
        padding: 2px;
    }

        .table-no-bg tbody tr.paging td:first-child {
            padding-left: 0;
        }

        .table-no-bg tbody tr.paging td:last-child {
            background-color: transparent !important;
            padding-right: 0;
        }

    .table-no-bg > tbody > tr:not(.paging) > td:last-child span span {
        color: white;
        text-decoration: unset;
        cursor: pointer;
    }

    .table-no-bg th:nth-child(1) {
        border-top-left-radius: 6px;
    }

    .table-no-bg th:nth-last-child(1) {
        border-top-right-radius: 6px;
    }

.compact-table {
    min-width: 100%;
    display: table;
}

    .compact-table td {
        font-weight: 400;
        color: var(--black-text-color);
        padding: 6px 12px;
        background-color: white;
        border-bottom: 1px solid var(--border-color);
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase;
        text-align: left;
    }

    .compact-table td {
        padding: 6px 12px;
        color: var(--black-text-color);
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 400;
    }

    .compact-table td:nth-child(1) {
        border-top-left-radius: 6px;
    }

    .compact-table td:nth-last-child(1) {
        border-top-right-radius: 6px;
    }

.table, .table-no-pagination {
    min-width: 100%;
}

    .table tbody tr:nth-of-type(2) th, .table-no-pagination tbody tr:nth-of-type(1) th {
        font-weight: 400;
        color: var(--black-text-color);
        padding: 0.75rem 1.5rem;
        background-color: white;
        border-bottom: 1px solid var(--border-color);
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase;
        text-align: left;
    }

        .table tbody tr:nth-of-type(2) th:last-child,
        .table-no-pagination tbody tr:nth-of-type(1) th:last-child {
            width: 0 !important;
        }

        .table tbody tr:nth-of-type(2) th a,
        .table-no-pagination tbody tr:nth-of-type(1) th a {
            font-weight: 400;
            text-align: left;
            font-size: 0.75rem;
            line-height: 1rem;
            text-decoration-line: underline;
            text-transform: uppercase;
            color: var(--secondary-color);
        }

    .table tbody tr td, .table-no-pagination tbody tr td {
        color: var(--black-text-color);
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 400;
    }

        .table tbody tr td span.dropDown,
        .table-no-pagination tbody tr td span.dropDown {
            color: var(--secondary-color);
            text-decoration-line: underline;
            font-size: 0.875rem;
            line-height: 1.25rem;
        }

    .table-no-pagination tbody > tr:not(.paging) > td {
        padding: 0.75rem 1.5rem;
    }

    .table tbody tr:not(.paging) td:last-child,
    .table-no-pagination tbody tr:not(.paging) td:last-child {
        background-color: var(--secondary-color);
    }

        .table tbody tr:not(.paging) td:last-child span,
        .table-no-pagination tbody tr:not(.paging) td:last-child span {
            height: 20px;
            width: 20px;
        }

    .table th:nth-child(1),
    .table-no-pagination th:nth-child(1) {
        border-top-left-radius: 6px;
    }

    .table th:nth-last-child(1),
    .table-no-pagination th:nth-last-child(1) {
        border-top-right-radius: 6px;
    }

.table,
.table-different-pagination {
    min-width: 100%;
}

    .table tbody tr.paging td > div.fl > table tbody tr > td > span,
    .table tbody tr.paging td > div.fl > table tbody tr > td > a,
    .table-different-pagination tbody tr.paging a,
    .table-different-pagination tbody tr.paging span {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        line-height: 1rem;
        border-radius: 0.375rem;
        border: 1px solid var(--filter-label-color);
        color: var(--filter-label-color);
        background-color: white;
    }

    .table tbody tr.paging td > div.fl > table tbody tr > td > span,
    .table-different-pagination tbody tr.paging span {
        cursor: default;
        background-color: var(--filter-label-color);
        color: white;
    }

        .table tbody tr.paging td > div.fl > table tbody tr > td > span:hover,
        .table tbody tr.paging td > div.fl > table tbody tr > td > a:hover,
        .table-different-pagination tbody tr.paging a:hover,
        .table-different-pagination tbody tr.paging span:hover {
            background-color: var(--filter-label-color);
            color: white;
        }

    .table tbody tr:nth-of-type(2) th,
    .table-different-pagination tbody tr:nth-of-type(2) td {
        font-weight: 400;
        color: var(--black-text-color);
        padding: 0.75rem 1.5rem;
        background-color: white;
        border-bottom: 1px solid var(--border-color);
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase;
        text-align: left;
    }

        .table tbody tr:nth-of-type(2) th:last-child,
        .table-different-pagination tbody tr:nth-of-type(2) td:last-child {
            width: 0 !important;
        }

        .table tbody tr:nth-of-type(2) th a,
        .table-different-pagination tbody tr:nth-of-type(2) td a {
            font-weight: 400;
            text-align: left;
            font-size: 0.75rem;
            line-height: 1rem;
            text-decoration-line: underline;
            text-transform: uppercase;
            color: var(--secondary-color);
        }

    .table tbody tr td,
    .table-different-pagination tbody tr td {
        color: var(--black-text-color);
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 400;
    }

        .table tbody tr td span.dropDown,
        .table-different-pagination tbody tr td span.dropDown {
            color: var(--secondary-color);
            text-decoration-line: underline;
            font-size: 0.875rem;
            line-height: 1.25rem;
        }

    .table-different-pagination tbody > tr:not(.paging) > td {
        padding: 0.75rem 1.5rem;
    }

    .table tbody tr:not(.paging) td:last-child,
    .table-different-pagination tbody tr:not(.paging) td:last-child {
        background-color: var(--secondary-color);
    }

        .table tbody tr:not(.paging) td:last-child span,
        .table-different-pagination tbody tr:not(.paging) td:last-child span {
            height: 20px;
            width: 20px;
        }

    .table th:nth-child(1),
    .table-different-pagination th:nth-child(1) {
        border-top-left-radius: 6px;
    }

    .table th:nth-last-child(1),
    .table-different-pagination th:nth-last-child(1) {
        border-top-right-radius: 6px;
    }

    .table textarea,
    .table-different-pagination textarea {
        appearance: none;
        font-size: 14px;
        line-height: 20px;
        width: 100%;
        background-color: white;
        color: var(--black-text-color);
        padding: 8px 16px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
    }

        .table textarea:focus,
        .table-different-pagination textarea:focus {
            outline: 2px solid transparent;
            outline-offset: 2px;
            box-shadow: inset 0 0 0 0px #fff, inset 0 0 0 calc(2px + 0px) var(--primary-color), var(--tw-shadow, 0 0 #0000);
        }


    .table-different-pagination > tbody > tr:not(.paging) > td:last-child a {
        display: block;
        color: white;
        text-decoration: unset;
        cursor: pointer;
        width: 24px;
        height: 24px;
    }

.popup-table-wrapper {
    max-width: 1260px;
    overflow-x: auto;
    width: 100%;
}

.table_admin * {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    font-weight: 400 !important;
}

.popup-table-wrapper .table_admin > tbody > tr:first-of-type > td {
    color: var(--black-text-color);
    background-color: white;
    text-transform: uppercase;
    text-align: left;
}

    .popup-table-wrapper .table_admin > tbody > tr:first-of-type > td > b {
        font-weight: 400;
        color: var(--black-text-color);
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase;
        text-align: left;
    }

.popup-table-wrapper .table_admin tr td {
    border: 1px solid var(--border-color);
    padding: 10px 10px !important;
}

/* ==================================================== */
/* DropDownCheckboxes
/* ==================================================== */
div.dd_chk_select {
    font-size: 14px !important;
    line-height: 20px !important;
    appearance: none !important;
    min-width: 218px !important;
    background-color: white !important;
    color: var(--black-text-color) !important;
    padding: 8px 24px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    height: unset !important;
    background-image: unset !important;
}

div.dd_chk_drop {
    top: 36px !important;
    border-radius: 6px !important;
    left: 0 !important;
    border: 1px solid var(--border-color) !important;
}

    div.dd_chk_drop #checks label {
        margin-left: 6px;
    }

    div.dd_chk_drop div#checks {
        padding: 8px 24px !important;
    }

    div.dd_chk_drop #checks input[type=checkbox] {
        accent-color: var(--primary-color) !important;
    }

div.dd_chk_select div#caption {
    top: unset !important;
    height: unset !important;
}

/* ==================================================== */
/* Select2 DropDowns
/* ==================================================== */
.select2-container--default .select2-selection--single {
    background-color: white;
    border: 1px solid #e2e1e1 !important;
    border-radius: 6px !important;
    height: unset !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding: 5px 24px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #16100f !important;
    line-height: unset !important;
    font-size: 14px !important;
}

.select2-container--default
.select2-selection--single
.select2-selection__arrow {
    display: none !important;
}

.select2-container--open .select2-dropdown--below, .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--black-text-color) !important;
}

.select2-dropdown--below ul.select2-results__options li:last-child {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: inset 0 0 0 0px #fff, inset 0 0 0 calc(2px + 0px) var(--primary-color), var(--tw-shadow, 0 0 #0000);
}

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

/* ==================================================== */
/* Custom dropdown
/* ==================================================== */
.custom-dropdown-wrapper {
    font-size: 14px;
    line-height: 20px;
    color: var(--secondary-color);
    text-decoration-line: underline;
}

    .custom-dropdown-wrapper .custom-dropdown {
        z-index: 900;
        background-color: white;
        border-radius: 6px;
        max-width: 320px;
        box-shadow: 0px 2px 16px #8D8D998D;
    }

        .custom-dropdown-wrapper .custom-dropdown a {
            display: block;
            padding: 8px 20px;
            font-size: 14px;
            line-height: 20px;
            text-align: left;
            text-decoration-line: underline;
            border-bottom: 1px solid #E5E5E5;
            color: var(--secondary-color);
        }

            .custom-dropdown-wrapper .custom-dropdown a:hover {
                color: var(--primary-color);
            }


/* ==================================================== */
/* Radiobuttonlist
/* ==================================================== */
.gruppierung-wrapper {
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.gruppierung-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--filter-label-color);
    margin-right: 10px;
}

.radiobutton-list {
    display: block;
}

    .radiobutton-list input[type="radio"] + label {
        margin-right: 15px;
        font-size: 14px;
        line-height: 20px;
        color: var(--black-text-color);
    }

    .radiobutton-list input[type="radio"] {
        margin-right: 5px;
        accent-color: var(--primary-color);
    }

/* ==================================================== */
/* Popup dialog
/* ==================================================== */
.innerwrapperinhalt {
    border-radius: 6px;
    border: 1px solid #E2E1E1 !important;
    box-shadow: 0px 2px 8px #8D8D998D;
}

.wrapper {
    background-color: #f9f9f9 !important;
    border-radius: 6px;
}

#KundenLogo_ImageKundenLogo {
    height: 50px;
    width: auto;
}

.innerwrapperinhalt .paddingwrapper h1 {
    color: var(--black-text-color);
    font-size: 24px;
    line-height: 32px;
}

.links-wrapper {
    display: flex;
    flex-wrap: wrap;
}

/* ==================================================== */
/* Stundenerfassung
/* ==================================================== */
.stundenerfassung {
    margin-right: 48px;
}

    .stundenerfassung a {
        font-weight: 400;
        text-align: left;
        font-size: 16px;
        line-height: 1rem;
        text-decoration-line: underline;
        /*    text-transform: uppercase;
    */ color: var(--secondary-color);
        cursor: pointer;
    }

/* ==================================================== */
/* Scoreliste: Erweiterte Optionen
/* ==================================================== */
.erweiterteoptionen {
    margin-top:16px;
}

.erweiterteoptionen a {
    font-weight: 400;
    text-align: left;
    font-size: 16px;
    line-height: 1rem;
    text-decoration-line: underline;
/*    text-transform: uppercase;
*/    color: var(--secondary-color);
    cursor: pointer;
}

.erweiterteoptionen .frage-wrapper {
    display: flex;
    margin-top: 12px;
}

.erweiterteoptionen .avg-wrapper {
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.erweiterteoptionen .title-left {
    margin-right: 10px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--filter-label-color);
    width: 65px;
}

.erweiterteoptionen select {
    font-size: 14px;
    appearance: none;
    line-height: 20px;
    min-width: 212px;
    background-color: white;
    color: var(--black-text-color);
    padding: 8px 24px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    width:100%;
}

.erweiterteoptionen input {
    appearance: none;
    font-size: 14px;
    line-height: 20px;
    max-width: 75px;
    background-color: white;
    color: var(--black-text-color);
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.erweiterteoptionen select:focus, .erweiterteoptionen input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: inset 0 0 0 0px #fff, inset 0 0 0 calc(2px + 0px) var(--primary-color), var(--tw-shadow, 0 0 #0000);
}

/* ==================================================== */
/* Scoreliste: Filter Templates
/* ==================================================== */
.container_filtertemplate {
    margin-top: 8px;
}

.container_filtertemplate a {
    font-weight: 400;
    text-align: left;
    font-size: 16px;
    line-height: 1rem;
    text-decoration-line: underline;
/*    text-transform: uppercase;
*/    color: var(--secondary-color);
    cursor: pointer;
}

.container_filtertemplate select,
.container_filtertemplate input {
    font-size: 14px;
    appearance: none;
    line-height: 20px;
    min-width: 250px;
    background-color: white;
    color: var(--black-text-color);
    padding: 8px 24px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

    .container_filtertemplate select:focus,
    .container_filtertemplate input:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: inset 0 0 0 0px #fff, inset 0 0 0 calc(2px + 0px) var(--primary-color), var(--tw-shadow, 0 0 #0000);
    }

.container_filtertemplate .button_filtertemplate_save {
    padding: 5px 24px;
    font-weight: 400;
    text-align: center;
    color: white;
    border: 1px solid var(--primary-color);
    border-radius: 9999px;
    background-color: var(--primary-color);
    cursor: pointer;
    min-width:20px;
}

    .container_filtertemplate .button_filtertemplate_save:hover {
        border: 1px solid var(--secondary-color);
        background-color: var(--secondary-color);
    }

.container_filtertemplate .template-select-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.container_filtertemplate .button_deletefiltertemplate {
    color: var(--primary-color);
    cursor: pointer;
    min-width:10px;
}

    .container_filtertemplate .button_deletefiltertemplate:hover {
        color: var(--secondary-color);
        cursor: pointer;
    }

.container_filtertemplate.selected-template {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--filter-label-color);
    margin-right: 10px;
}

/* ==================================================== */
/* CheckBoxes
/* ==================================================== */
input[type="checkbox"] + label, input[type="radio"] + label {
    margin-right: 15px;
    font-size: 14px;
    line-height: 20px;
    color: var(--black-text-color);
}

input[type="checkbox"], input[type="radio"] {
    margin-right: 8px;
    accent-color: var(--primary-color);
}

/* ==================================================== */
/* Sticky table
/* ==================================================== */
.table.sticky-table {
    width: 100%;
    background-color: #ffffff;
}

/* ==================================================== */
/* Audio player
/* ==================================================== */
.mejs-container {
    width: 300px !important; /* Die gewünschte Breite */
    max-width: 100%; /* Responsiv, falls nötig */
}

.mejs-offscreen {
    display: none;
}

/* ==================================================== */
/* Team change
/* ==================================================== */
.switch-account-wrapper {
    margin-right: 24px;
}
.general-select {
    font-size: 14px;
    appearance: none;
    line-height: 20px;
    min-width: 250px;
    max-width: 100%;
    background-color: white;
    color: var(--black-text-color);
    padding: 8px 24px;
    padding-right: 40px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-image: url('https://www.chili.ch/hubfs/arrow-down-hipercom.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 12px;
}

    .general-select::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 40px;
        background-color: white;
        pointer-events: none;
    }

    .general-select:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: inset 0 0 0 0px #fff, inset 0 0 0 calc(2px + 0px) var(--primary-color), var(--tw-shadow, 0 0 #0000);
    }

/* ==================================================== */
/* Dashboard: Kundenzufriedenheitslevel
/* ==================================================== */
.customer-satisfaction {
    background-color: white;
    border-radius: 6px;
    padding: 20px;
    width: 100%;
    max-width: 500px;
    border: 1px solid var(--border-color);
}

    .customer-satisfaction h3 {
        font-size: 20px;
        font-weight: bold;
        color: var(--black-text-color);
    }

    .customer-satisfaction .list {
        display: flex;
        flex-direction: column;
    }

    .customer-satisfaction .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        border-bottom: 1px solid var(--border-color);
    }

        .customer-satisfaction .item:last-child {
            border-bottom: none;
        }

    .customer-satisfaction .date-range {
        flex: 2;
    }

    .customer-satisfaction .score {
        flex: 1;
        text-align: right;
        color: white;
        font-weight: bold;
        padding: 5px 10px;
        border-radius: 3px;
    }

        /* Farbregeln basierend auf Score-Trends */
        .customer-satisfaction .score.high {
            background-color: var(--positive-color);
        }

        .customer-satisfaction .score.low {
            background-color: var(--negative-color);
        }

        .customer-satisfaction .score.medium {
            background-color: var(--neutral-color);
        }


.nav-container {
    color: var(--secondary-color);
}