﻿body {
}

/*Color Definitions*/

:root {
    /*--background: #f0f5f5;*/
    /*--background2: #d1e0e0;*/
    --highlight: #29828e;
    --highlight2: #b8e8ec;
    /*background: #F7AA52;*/
}

/*Styles*/
.info_text {
    background-color: var(--highlight2);
}

.header-text {
    color: var(--highlight2);
}

/*Large Devices*/
.subheader-text {
    background-color: #b8e8ec;
    margin: 0;
}

/*Depending on the given MediaSize we change the class*/

/*Small Devices*/
    .subheader-text.small-device {
        background-color: #b8e8ec;
        margin: 0;
        size: 12px;
        font-size: 12px;
    }

/*Medium Devices*/
    .subheader-text.medium-device {
        background-color: #b8e8ec;
        margin: 0;
        font-size: 14px;
    }

/*Large Devices*/
.subheader-text.large-device {
    background-color: #b8e8ec;
    margin: 0;
    font-size: 18px;
}

/*Text Class for Toolbar Items*/
.toolbaritem_text {
    padding-left: 4px;
    cursor: default;
    font-size: 14px;
}

/*Use this class to manipulte Toolbaritem to display different images*/
.toolbaritem_main {
    display: none;
}
/*Use this for toolbar item images*/
.toolbaritem_img {
    height: 18px;
    width: 18px;
}

.h-94 {
    height: 94vh !important;
}


/*Additional Styles for Pages*/
.new-page-container {
    display: flex;
    flex-direction: column;
    height: 90vh; /* Full viewport height */
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.new-top-row {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    z-index: 10;
}

.new-grid-container {
    flex: 1; /* Take remaining space */
    overflow: auto; /* Allow grid to have its own scrollbars */ 
}

.new-grid-container-vertical {
    flex: 1; /* Take remaining space */
    overflow-x: hidden;
    overflow-y: auto;
}

.new-grid-container-fix {
    /*change 31.08.2025:*/
    /*flex: 1;
    padding-bottom: 80px;*/
    flex: 1 1 auto; /* Take remaining space Before change: 31.08.2025 flex:1*/
    min-height: 0;
    display: flex;
    flex-direction: column;
    /*end change 31.08.2025:*/
    overflow: hidden;
}

.new-sticky-toolbar {
    position: sticky !important;
    top: 0;
    z-index: 1; /* Über dem Grid-Content platzieren */
    background-color: white; /* Hintergrund der Toolbar fixieren */
    border-bottom: 1px solid #ddd; /* Optionaler Rand */
}

/*Style for Login and Register Icon*/
.bs-icon.bs-icon-circle {
    border-radius: 50%;
}

.bs-icon.bs-icon-primary {
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

.bs-icon.bs-icon-xl {
    --bs-icon-size: 2.5rem;
}

.bs-icon.bs-icon-md {
    --bs-icon-size: 2rem;
}

.bs-icon {
    --bs-icon-size: .75rem;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: var(--bs-icon-size);
    width: calc(var(--bs-icon-size) * 2);
    height: calc(var(--bs-icon-size) * 2);
    color: var(--bs-primary);
}

.sem-headline {
    text-align: center;
    font-weight: 500;
    font-size: 16px;
}

/* Menü-Popup über Sidebar sichtbar machen */
.e-menu-wrapper,
.e-menu-parent {
    z-index: 2000 !important; /* höher als Sidebar */
}

/* Light Mode Farben */
:root[data-bs-theme="light"] .e-menu-wrapper,
:root[data-bs-theme="light"] .e-menu-parent {
    /*background-color: var(--bs-body-bg);*/
    color: var(--bs-body-color);
    /*border: 1px solid var(--bs-border-color, #dee2e6);*/
}

/* Dark Mode Farben */
:root[data-bs-theme="dark"] .e-menu-wrapper,
:root[data-bs-theme="dark"] .e-menu-parent {
    /*background-color: var(--bs-body-bg);*/
    color: var(--bs-body-color);
    /*border: 1px solid var(--bs-border-color, #444c54);*/
}

/* Syncfusion ListView: Avatar + Text vertikal mittig */
.e-list-wrapper.e-list-multi-line.e-list-avatar {
    display: flex;
    height: 50px !important;  
    align-items: center; /* vertikale Zentrierung */
}


/* Avatar + Text mit etwas Abstand */
.e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
    margin-right: 8px;
}

/* Text soll mittig neben Avatar stehen */
.e-list-wrapper.e-list-multi-line.e-list-avatar .e-list-item-header {
    display: flex;
    align-items: center;
}

/*Accordion Design*/

/*Accordion Header:*/
.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon .e-icons .e-acrdn-header-content {
    color: #F7AA52 !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    /*background-color: #008796 !important;*/
}

.e-accordion .e-acrdn-item.e-select > .e-acrdn-header {
    background: #008796 !important;
}

.e-accordion .e-acrdn-item.e-selected > .e-acrdn-header .e-acrdn-header-content,
.e-accordion .e-acrdn-item.e-selected > .e-acrdn-header .e-toggle-icon {
    color: #F7AA52 !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}
