:root {
    /* Border-Radius */
    --border-radius: 0.375rem;
    --border-radius-sm: 0.25rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 1rem;
    --border-radius-xxl: 2rem;
    --border-radius-2xl: var(--border-radius-xxl);
    --border-radius-pill: 50rem;
}

body.mud-theme-light {
    /* Basisvariablen für das helle Theme (aus light_theme.css) */
    --primary: #2c3e50;
    --secondary: #95a5a6;
    --success: #18bc9c;
    --info: #3498db;
    --warning: #f39c12;
    --danger: #e74c3c;
    --light: #ecf0f1;
    --dark: #7b8a8b; /* MudBlazor 'Dark' color im Light Theme */
    --body-bg: #fff;
    --body-color: #212529;
    --link-color: #18bc9c; /* Deine Linkfarbe für helles Theme */
    --link-hover-color: #13967d; /* Deine Link-Hoverfarbe für helles Theme */
    --custom-surface: #f8f9fa; /* z.B. --gray-100 */
    --custom-drawer-bg: #ecf0f1; /* z.B. --gray-200 */
    --custom-appbar-text: #fff; /* Textfarbe für Appbar, wenn Primary dunkel ist */
    --custom-lines-default: #dee2e6; /* z.B. --border-color */
    --custom-table-striped: #f8f9fa;
    --custom-table-hover: #ecf0f1;
    --custom-text-secondary: rgba(33, 37, 41, 0.75); /* z.B. --secondary-color */
    --custom-text-disabled: #b4bcc2; /* z.B. --gray-500 */
    --custom-action-disabled-bg: #dee2e6; /* z.B. --gray-300 */

    /* MudBlazor Paletten-Variablen mit deinen hellen Theme-Variablen überschreiben */
    --mud-palette-primary: var(--primary);
    --mud-palette-secondary: var(--secondary);
    --mud-palette-success: var(--success);
    --mud-palette-info: var(--info);
    --mud-palette-warning: var(--warning);
    --mud-palette-error: var(--danger);
    --mud-palette-dark: var(--dark);
    --mud-palette-light: var(--light); /* MudBlazor 'Light' color im Light Theme */

    --mud-palette-background: var(--body-bg);
    --mud-palette-surface: var(--custom-surface);
    --mud-palette-drawer-background: var(--custom-drawer-bg);
    --mud-palette-appbar-background: var(--primary);
    --mud-palette-appbar-text: var(--custom-appbar-text);

    --mud-palette-text-primary: var(--body-color);
    --mud-palette-text-secondary: var(--custom-text-secondary);
    --mud-palette-text-disabled: var(--custom-text-disabled);

    --mud-palette-action-default: var(--body-color);
    --mud-palette-action-disabled: var(--custom-text-disabled);
    --mud-palette-action-disabled-background: var(--custom-action-disabled-bg);

    --mud-palette-lines-default: var(--custom-lines-default);
    --mud-palette-lines-inputs: var(--custom-lines-default);
    --mud-palette-table-lines: var(--custom-lines-default);
    --mud-palette-table-striped-background: var(--custom-table-striped);
    --mud-palette-table-hover: var(--custom-table-hover);

    --mud-palette-divider: rgba(0,0,0,0.12);
    --mud-palette-overlay-dark: rgba(0,0,0,0.5); /* Für dunkle Overlays im hellen Theme */

    /* Spezifisch für MudLink, falls nicht über --mud-palette-primary/success abgedeckt */
    --mud-palette-link: var(--link-color);
    --mud-palette-link-hover: var(--link-hover-color);
}

body.mud-theme-dark {
    /* Basisvariablen für das dunkle Theme (aus dark_theme.css) */
    --primary: #375a7f;
    --secondary: #444;
    --success: #00bc8c;
    --info: #3498db;
    --warning: #f39c12;
    --danger: #e74c3c;
    --light: #adb5bd; /* MudBlazor 'Light' color im Dark Theme */
    --dark: #303030;
    --body-bg: #222;
    --body-color: #fff;
    --link-color: #00bc8c; /* Deine Linkfarbe für dunkles Theme */
    --link-hover-color: #009670; /* Deine Link-Hoverfarbe für dunkles Theme */
    --custom-surface: #303030; /* z.B. --gray-800 oder --gray-dark */
    --custom-drawer-bg: #222222; /* z.B. --gray-900 */
    --custom-appbar-text: #f0f3f5;
    --custom-lines-default: #444; /* z.B. --gray-700 */
    --custom-table-striped: #444444;
    --custom-table-hover: #525252;
    --custom-text-secondary: rgba(255, 255, 255, 0.75); /* z.B. --secondary-color */
    --custom-text-disabled: #898989; /* z.B. --gray-600 */
    --custom-action-disabled-bg: #444; /* z.B. --gray-700 */

    /* MudBlazor Paletten-Variablen mit deinen dunklen Theme-Variablen überschreiben */
    --mud-palette-primary: var(--primary);
    --mud-palette-secondary: var(--secondary);
    --mud-palette-success: var(--success);
    --mud-palette-info: var(--info);
    --mud-palette-warning: var(--warning);
    --mud-palette-error: var(--danger);
    --mud-palette-dark: var(--dark);
    --mud-palette-light: var(--light);

    --mud-palette-background: var(--body-bg);
    --mud-palette-surface: var(--custom-surface);
    --mud-palette-drawer-background: var(--custom-drawer-bg);
    --mud-palette-appbar-background: var(--primary);
    --mud-palette-appbar-text: var(--custom-appbar-text);

    --mud-palette-text-primary: var(--body-color);
    --mud-palette-text-secondary: var(--custom-text-secondary);
    --mud-palette-text-disabled: var(--custom-text-disabled);

    --mud-palette-action-default: var(--body-color);
    --mud-palette-action-disabled: var(--custom-text-disabled);
    --mud-palette-action-disabled-background: var(--custom-action-disabled-bg);

    --mud-palette-lines-default: var(--custom-lines-default);
    --mud-palette-lines-inputs: var(--custom-lines-default);
    --mud-palette-table-lines: var(--custom-lines-default);
    --mud-palette-table-striped-background: var(--custom-table-striped);
    --mud-palette-table-hover: var(--custom-table-hover);

    --mud-palette-divider: rgba(255,255,255,0.12);
    --mud-palette-overlay-light: rgba(255,255,255,0.5); /* Für helle Overlays im dunklen Theme */

    /* Spezifisch für MudLink */
    --mud-palette-link: var(--link-color);
    --mud-palette-link-hover: var(--link-hover-color);
}

.page{
    padding-top: 100px;
    margin-right: 100px;
    margin-left: 100px;
}
.container{
    max-width: 100%;
}

#preload{
    display: none;
}
.pagination .page-item:nth-child(10) .page-link  
{
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

/*noinspection ALL*/
a.mud-link
{
    color: var(--mud-palette-success) !important;
    text-decoration: underline !important;
}
a.mud-link:hover{
    color: var(--link-hover-color) !important;
}

a.mud-link.mud-link-underline-none{
    text-decoration: none !important;
}

a.nav-link:hover{
    color: #9cadbf !important;
}

/*noinspection CssUnresolvedCustomProperty*/
.table-header{
    background-color: var(--mud-palette-secondary);
}

div.mud-list-item-extended.mud-list-item-gutters-extended.mud-list-item-clickable-extended.mud-ripple.mud-selected-item.mud-primary-text.mud-primary-hover{
    /*noinspection CssUnresolvedCustomProperty*/
    color: var(--mud-palette-success) !important;
}
.mud-checkbox .mud-button-root.mud-icon-button.mud-primary-text.mud-checkbox-dense.mud-ripple.mud-ripple-checkbox .mud-icon-root.mud-svg-icon{
    fill: var(--mud-palette-success);
}
.mud-list-item-extended.mud-list-item-gutters-extended.mud-list-item-clickable-extended.mud-list-item-functional.mb-2 .mud-list-item-icon-extended .mud-icon-root.mud-svg-icon.mud-primary-text.mud-icon-size-medium{
    fill: var(--mud-palette-success);
}
.mud-input.mud-input-outlined:focus-within>.mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-shrink>.mud-input-outlined-border {
    border-color: rgba(var(--success-rgb), 0.6) !important;
}

.mud-input:focus-within~label.mud-input-label.mud-input-label-inputcontrol {
    color: rgba(var(--success-rgb), 0.6);
}

/*noinspection ALL*/
a.navbar_link{
    color: var(--mud-palette-appbar-text) !important;
    text-decoration: none !important;
}
/*noinspection ALL*/
a.navbar_link:hover{
    color: var(--navbar-link-hover-color) !important;
}

li.mud-pagination-item.mud-pagination-item-selected button.mud-button-root.mud-button.mud-button-outlined.mud-button-outlined-primary.mud-button-outlined-size-medium{
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
}

.iconItem:hover {
    transform: scale(1.03);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.indexpoint{
    color: var(--mud-palette-text-primary) !important;
    text-decoration: none !important;
}

.indexpoint:hover{
    color: var(--mud-palette-text-secondary) !important;
}