/* Hier wird die primäre Farbe überschrieben !! */
:root {
    --bs-primary: #006400 !important;
}

/* Schriftgrößen */

.e-combobox, .e-input, .e-checkbox-wrapper {
    font-size: 1rem !important;
}

.e-checkbox-label {
    font-size: 1rem !important;
}

/*Toolbar*/

.e-toolbar {
    border: 2px solid var(--bs-primary);
    margin-bottom: 2px;
}

.my-checkbox {
    margin: 5px 15px 5px 0;
}

    /* gezielt das Label von Syncfusion überschreiben */
    .my-checkbox .e-label,
    .e-checkbox-wrapper.my-checkbox .e-label {
        font-size: inherit !important; 
        line-height: inherit !important;
    }

/*Zweispaltige Page*/
.quadranten-container2 {
    display: grid;
    grid-template-columns: 50% 50%;
    height: 90vh;
    gap: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*4x4 Matrix-Page*/
.quadranten-container {
    display: grid;
    grid-template-rows: 50% 50%;
    grid-template-columns: 50% 50%;
    height: 90vh;
    gap: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*Zweispaltige Page, borders darin, mit div verwenden */
.quadranten-containerborders {
    overflow: auto;
    border: 1px solid darkgrey;
    padding: 5px;
}



/*Eingabebox für div, SyncFusion Style */
.border-box {
    display: flex;
    align-items: center;
    border-color: lightgray;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    padding: 5px 8px;
    width: fit-content;
}

/*Beschriftungs-Label*/

.beschriftungs-label {
    width: 130px;
    font-size: 1rem;
}


/* Horizontale Listboxen z.B. für Typ/Priorität */
.list-box-container {
    display: inline-block;
}

.list-box {
    list-style: none;
    margin: 0;
    display: flex; /* Setzt die Elemente in eine horizontale Reihe */
    gap: 15px; /* Abstand zwischen den Einträgen */
}

    .list-box li {
        /*  padding: 5px;
                    cursor: pointer; */
        display: flex;
        align-items: center; /* Vertikale Ausrichtung von Radio-Button und Text */
    }

        .list-box li:hover {
            background-color: #f0f0f0;
        }

    .list-box label {
        margin-left: 5px;
    }




/*Zeilen in Input Formularen aus Label und Input*/

.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.form-group {
    display: flex;
    align-items: center;
}


/*DateTime input */
.my-date-time {
    width: auto;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
    box-sizing: border-box; /* Stellt sicher, dass Padding berücksichtigt wird */
}

/*Kleine Buttons*/
.icon-button {
    background: none;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 1rem;
    margin-left: 5px;
    color: #666;
    padding: 0px 10px;
    height: 32px; /* gleiche Höhe wie Combobox */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .icon-button:hover {
        color: #000;
    }

/*MainLayout Overrides*/
.page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
}

.main-layout-appbar {
    width: 100%;
    position: fixed; /* Optional, falls die AppBar oben fixiert sein soll */
    top: 0;
    left: 0;
}

main {
    flex: 1;
    display: flex;
    justify-content: left;
    align-items: flex-start;
    padding-top: 60px; /* Abstand für die fixe AppBar */
}

.content {
    width: 100%;
    margin: 0 auto;
}


.e-filtered::before {
    color: red !important; /* Farbe des Indikators */
    font-weight: bold !important; /* Fett */
    font-size: 16px !important; /* Größer */
}

/* Transparente Buttons */
.transparent-button {
    min-width: 200px;
    background-color: transparent;
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    border-radius: 6px;
    padding: 5px 15px;
}

/* Klebende Filterbereiche, unterhalb desc PageHeader, scrollt nicht  */
.sticky-filter {
    position: sticky;
    top: 50px; /* Höhe des Headers beachten */
    z-index: 999;
    background: white;
    padding: 10px;
}

/*.custom-toast {
    border-radius: 16px;
    border-color: darkgreen;
    font-weight: bold;
    font-size: 14px;
}*/

.custom-toast.e-toast {
    background-color: yellow !important;
    color: black !important; /* optional für bessere Lesbarkeit */
}


.custom-toast .e-toast-icon {
    font-size: 20px !important;
    color: black !important;
    opacity: 1 !important;
    vertical-align: central !important;
}

.custom-toast .e-toast-message {
    background-color: yellow !important;
}