:root {
    --primary-color: #7e1d2d;
    --primary-light-color: #de6f81;
    --primary-dark-color: #55131e;

    --secondary-color: #777074;
    --secondary-light-color: #857d81;
    --secondary-dark-color: #686265;
}

.ui-sidebar {
    background: #eee !important;
    width: fit-content !important;
    min-width: 30rem !important;
    overflow-y: scroll;
}

.tarifMenu-header {
    color: var(--primary-color);
    background: white !important;
    padding: 1rem 1rem 0;
    font-weight: bold;
    font-size: 1.5rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ui-datatable-tablewrapper {
    display: grid;

    table {
        width: unset !important;
    }
}

.ui-datatable {
    .ui-datatable-data .col {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1.1rem;
        color: var(--secondary-color);

        &:focus, &:hover {
            color: var(--primary-color);
        }
    }

    .ui-filter-column {
        padding-top: 0 !important;
        background: white !important;

        .ui-state-hover {
            border-color: var(--primary-color);
        }

        .ui-state-focus {
            border-color: var(--primary-color);
            box-shadow: var(--primary-color);
        }
    }
}

.button-group {
    margin-left: 0.5rem;
}

.ui-button {
    --main-color: var(--primary-color);
    --border-color: var(--primary-color);
    --font-color: white;

    --activ-main-color: var(--primary-dark-color);
    --activ-border-color: var(--primary-dark-color);
    --activ-font-color: white;

    &.color-inverted {
        --main-color: white;
        --border-color: var(--secondary-color);
        --font-color: var(--secondary-color);

        --activ-main-color: white;
        --activ-border-color: var(--primary-color);
        --activ-font-color: var(--primary-color);
    }

    &.ui-state-hover, &.ui-state-focus {
        background: var(--activ-main-color) !important;
        border-color: var(--activ-border-color) !important;
        color: var(--activ-font-color) !important;
    }


    &.only-icons {
        border: none !important;
        background: none !important;
        color: var(--secondary-color) !important;
        padding: 0 !important;
        width: 1.5rem !important;

        &.ui-state-hover {
            color: var(--primary-color) !important;
        }
    }

    background: var(--main-color) !important;
    border-color: var(--border-color) !important;
    color: var(--font-color) !important;
    box-shadow: none !important;
    margin: 0.25rem !important;
}

.ui-toolbar {
    background: #eee !important;
    height: 3.5rem;
    align-content: center;
}

.titlebar {
    text-align: center;
    background: white !important;
    border-color: var(--secondary-color) !important;
    color: var(--secondary-color) !important;
    font-size: 1.1rem !important;
    text-overflow: ellipsis !important;

    &.ui-state-hover, &.ui-state-focus {
        border-color: var(--primary-color) !important;
        box-shadow: none !important;
        color: var(--primary-color) !important;

    }
}

.inputTable {
    margin-top: 1rem;
    width: fit-content;

    /* Verstecke den Header der Tabelle */
    #input_head {
        display: none;
    }


    .ui-datatable td {
        padding: 0.75rem 1rem;
        white-space: nowrap;
        width: auto;
        min-width: 250px;  /* Label + Wert Spalte mind. 200px */
    }

}