body {
}

/*Color Definitions*/

:root {
    --background: #f0f5f5;
    --background2: #d1e0e0;
    --highlight: #29828e;
    --highlight2: #b8e8ec;
}

/*Styles*/
.info_text {
    background-color: var(--highlight2);
}

.header-text {
    color: var(--highlight);
}

/*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 {
    background-color: #f8f9fa; /* Light background */
    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-fix {
    flex: 1; /* Take remaining space */
    overflow: hidden;
    padding-bottom: 80px;
}

.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: 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);
}

.tsp-headline {
    text-align: center;
    font-weight: 500;
    font-size: 16px
}