@charset "UTF-8";
:root {
/*    !*Hier werden globale Custom-Css-variablen erstellt*!
    --lo-bg-color: #fafafa;*/
    /*--custom-wolf-software-background-color-gridselect: #32aae130;*/
    --custom-wolf-software-background-color-gridselect: #B1DFF570;
    /*--lo-bg-color-alpha-1: #f8f8f8;
    --lo-bg-color-alpha-2: #e6e6e680;
    --lo-bg-color-alpha-3: #fafafa80;
    --lo-bg-color-alpha-4: #e6e6e610;*/
    --custom-button-focus-color: #32aae1;
    --custom-wolf-software-red: #e64b14;
    --custom-wolf-software-yellow: #fab432;
    --custom-wolf-software-green: #96c319;
    --custom-wolf-software-blue: #32aae1;

    --custom-wolf-software-border-color: #e6e6e6;
    --custom-wolf-software-darker-border-color: #b8b8b8;

    --custom-wolf-software-text-reversed-color: #3c3c3c; /*im aktuellen layout wird keine reversed color benutzt daher ist diese die normale textcolor*/
    --custom-wolf-software-header-font-family: 'Open Sans', Arial, sans-serif;
    --custom-wolf-software-header-font-weight: 800;
    --custom-wolf-software-header-font-style: italic;
    --custom-wolf-software-header-font-transform: uppercase;
    --custom-wolf-software-header-font-size-h6: 0.9rem;

}

.custom-wolf-software-h6-header{
    color: rgb(60 60 60);
    font-family: var(--custom-wolf-software-header-font-family), serif;
    font-weight: var(--custom-wolf-software-header-font-weight);
    font-size: var(--custom-wolf-software-header-font-size-h6);
    font-style: var(--custom-wolf-software-header-font-style);
    text-transform: var(--custom-wolf-software-header-font-transform);
}
h2{
    color: rgb(60 60 60);
    font-family: 'Open Sans',Arial,sans-serif;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
}
h3{
    color: rgb(60 60 60);
    font-family: 'Open Sans',Arial,sans-serif;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
}
h4{
    color: rgb(60 60 60);
    font-family: 'Open Sans',Arial,sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 1.2rem;
    text-transform: uppercase;
}
h5{
    color: rgb(60 60 60);
    font-family: 'Open Sans',Arial,sans-serif;
    font-weight: 800;
    font-style: italic;

    text-transform: uppercase;
}
h6{
    color: rgb(60 60 60);
    font-family: 'Open Sans',Arial,sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    font-style: italic;
    text-transform: uppercase;
    margin: 0;
    padding-left: 2px;
}
label:empty::before {
    content: "\200B";           /* Zero-Width Space → erzeugt eine Zeile */
}

/* ================================================================
   Burger Sidebar — Telerik Vertical Menu Overrides
   ================================================================ */

/* Base: full-width menu — Farbe des Browser-Tabs (nicht der Tab-Leiste) */
.cmb-sidebar .k-menu.k-menu-vertical {
    width: 100%;
    color-scheme: light dark;
    background-color: light-dark(#ffffff, #292b2f) !important;
}

/* Sidebar settings — entfernt App-Theme-Hintergrund von inneren Buttons */
.cmb-sidebar .lo-bg {
    background-color: transparent !important;
}
.cmb-sidebar .lo-text {
    color: light-dark(#3c3c3c, #e8eaed) !important;
}

/* Sidebar Telerik Menü — Schrift- und Iconfarbe folgt Browser-Modus */
.cmb-sidebar .k-link,
.cmb-sidebar .k-menu-link,
.cmb-sidebar .k-menu-link-text {
    color: light-dark(#3c3c3c, #e8eaed) !important;
}
.cmb-sidebar .k-svg-icon svg {
    fill: light-dark(#3c3c3c, #e8eaed) !important;
}
.cmb-sidebar .k-menu-expand-arrow svg,
.cmb-sidebar .k-menu-expand-arrow .k-svg-icon svg {
    fill: light-dark(#3c3c3c, #e8eaed) !important;
}

.cmb-sidebar-menu .k-menu-item {
    width: 100%;
}

/* Collapsed: constrain menu and items to sidebar width */
.cmb-sidebar--collapsed .k-menu.k-menu-vertical {
    min-width: 0 !important;
    width: 44px !important;
}

.cmb-sidebar--collapsed .k-menu-item,
.cmb-sidebar--collapsed .k-item {
    min-width: 0 !important;
    width: 44px !important;
}

/* Collapsed: center-align the icon inside each link */
.cmb-sidebar--collapsed .k-link,
.cmb-sidebar--collapsed .k-menu-link {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 44px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Collapsed: hide link text completely */
.cmb-sidebar--collapsed .k-menu-link-text {
    display: none !important;
}

/* Collapsed: hide expand arrow */
.cmb-sidebar--collapsed .k-menu-expand-arrow {
    display: none !important;
}

/* Collapsed: keep icons visible and properly sized */
.cmb-sidebar--collapsed .k-icon,
.cmb-sidebar--collapsed .k-svg-icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    pointer-events: none;
}

/* Expanded: show link text normally */
.cmb-sidebar--expanded .k-menu-link-text {
    display: flex !important;
    opacity: 1;
}

/* Active / hovered / focused menu items — primary color background, white text */
.cmb-sidebar .k-menu-item.k-hover > .k-link,
.cmb-sidebar .k-menu-item.k-hover > .k-menu-link,
.cmb-sidebar .k-menu-item.k-focus > .k-link,
.cmb-sidebar .k-menu-item.k-focus > .k-menu-link,
.cmb-sidebar .k-menu-item.k-selected > .k-link,
.cmb-sidebar .k-menu-item.k-selected > .k-menu-link {
    color: white !important;
    background-color: var(--lo-primary-color) !important;
}
.cmb-sidebar .k-menu-item.k-hover > .k-link .k-svg-icon svg,
.cmb-sidebar .k-menu-item.k-hover > .k-menu-link .k-svg-icon svg,
.cmb-sidebar .k-menu-item.k-focus > .k-link .k-svg-icon svg,
.cmb-sidebar .k-menu-item.k-focus > .k-menu-link .k-svg-icon svg,
.cmb-sidebar .k-menu-item.k-selected > .k-link .k-svg-icon svg,
.cmb-sidebar .k-menu-item.k-selected > .k-menu-link .k-svg-icon svg {
    fill: white !important;
}

/* Submenü-Popups — gleiche Farben wie das App-Menü (var(--lo-bg-color)).
   Telerik rendert diese als .k-popup → .k-menu-group direkt am <body>,
   daher können sie nicht via .cmb-sidebar-Scope gestylt werden. */
.k-popup.k-menu-popup {
    background-color: var(--lo-bg-color) !important;
    border-color: var(--lo-border-color) !important;
}
.k-popup > .k-menu-group {
    background-color: var(--lo-bg-color) !important;
}
.k-popup > .k-menu-group .k-link,
.k-popup > .k-menu-group .k-menu-link,
.k-popup > .k-menu-group .k-menu-link-text {
    color: var(--lo-text-color) !important;
}
.k-popup > .k-menu-group .k-svg-icon svg {
    fill: var(--lo-text-color) !important;
}
/* Aktive / gehover-te Einträge im Submenu */
.k-popup > .k-menu-group .k-menu-item.k-hover > .k-link,
.k-popup > .k-menu-group .k-menu-item.k-hover > .k-menu-link,
.k-popup > .k-menu-group .k-menu-item.k-focus > .k-link,
.k-popup > .k-menu-group .k-menu-item.k-focus > .k-menu-link,
.k-popup > .k-menu-group .k-menu-item.k-selected > .k-link,
.k-popup > .k-menu-group .k-menu-item.k-selected > .k-menu-link {
    color: white !important;
    background-color: var(--lo-primary-color) !important;
}
.k-popup > .k-menu-group .k-menu-item.k-hover > .k-link .k-svg-icon svg,
.k-popup > .k-menu-group .k-menu-item.k-hover > .k-menu-link .k-svg-icon svg,
.k-popup > .k-menu-group .k-menu-item.k-focus > .k-link .k-svg-icon svg,
.k-popup > .k-menu-group .k-menu-item.k-selected > .k-link .k-svg-icon svg {
    fill: white !important;
}
/* Expand-Arrow (Pfeil für weitere Unterebenen) */
.k-popup > .k-menu-group .k-menu-expand-arrow svg {
    fill: var(--lo-text-color) !important;
}
.k-popup > .k-menu-group .k-menu-item.k-hover > .k-link .k-menu-expand-arrow svg,
.k-popup > .k-menu-group .k-menu-item.k-selected > .k-link .k-menu-expand-arrow svg {
    fill: white !important;
}

/*Hier sind zwei klassen für die custom validierung*/ 
/*Error*/
.input-invalid {
    border-color: var(--custom-wolf-software-red) !important;
    box-shadow: 0 0 3px var(--custom-wolf-software-red);
}
/*Warning*/
.input-warning {
    border-color: var(--custom-wolf-software-yellow) !important;
    box-shadow: 0 0 3px var(--custom-wolf-software-yellow);
}
/*Valid*/
.input-valid {
    border-color: var(--custom-wolf-software-green) !important;
    box-shadow: 0 0 3px var(--custom-wolf-software-green);
}
/*Hier werden bestimmte Telerik-Selectoren überschrieben*/
.k-grid tr th:last-child{
    border-inline-end-width: 1px;
}

.k-grid .k-table-th, .k-grid td, .k-grid .k-table-td{
    border-inline-end-width: 1px;
}
.k-table-tbody .k-table-row.k-selected>.k-table-td, .k-table-list .k-table-row.k-selected{
    background-color: var(--custom-wolf-software-background-color-gridselect) !important;
}

.k-menu-group .k-item>.k-link:active{
    background-color: var(--lo-bg-color)!important;
}

.k-button-solid-base:focus, .k-button-solid-base.k-focus{
    background-color: var(--custom-button-focus-color)!important;
}
button:focus .k-svg-icon svg path {
    fill: white;
}
button.telerik-blazor:focus .k-button-text {
    color: white;
}
/*.k-checkbox:checked, .k-checkbox.k-checked {
    border-color: var(--custom-button-focus-color)!important;
    color: #fff;
    background-color: var(--lo-text-color)!important;
}
.k-checkbox {
    border-color: var(--lo-text-color) !important;
    background-color: whitesmoke;
}*/
/*TelerikGrid*/
.k-grid tr:hover {
    cursor: pointer;
}
/*Hier werden custom Telerik-Selectoren erstell welche bei bedarf auf die Telerik Elemente angewendet werden können.
/*Die erste Klasse ist dabei der selbst erstellte Selector welcher angegeben werden kann um den Style bei bedarf zu überschreiben*/
.custom-telerik-grid-small-text .k-grid-content td {
    font-size: 12px;
    padding: 1px;
}

.custom-klick-and-plan-grid thead{
    background-color: #e2e2e2;
}
.custom-klick-and-plan-grid div.k-grid-aria-root{
    border: none;
}

/*Window-Close/Action Buttons*/
.k-window-titlebar-actions{ 
    color: black;
}
.k-window-titlebar .k-window-title{
    color: var(--lo-text-color-default);
}
.k-window-titlebar{
    background-color: var(--lo-bg-color-darker) !important;
}

/* Verhindert Textzeilenumbrüche in Grid-Zellen – Ellipsis bei Overflow */
/* .k-grid.no-stretch hat Spezifizität (0,3,0) und überschreibt Teleriks .k-grid .k-table-td (0,2,0) */
.k-grid.no-stretch .k-grid-table {
    table-layout: fixed;
}
.k-grid.no-stretch .k-table-td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}
.k-grid.no-stretch .k-table-th .k-cell-inner,
.k-grid.no-stretch .k-table-th .k-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide scrollbar while keeping scroll functionality */
.logo-no-scrollbar .k-grid-content,
.logo-no-scrollbar .k-table-scroller,
.logo-no-scrollbar .k-virtual-scroller {
    scrollbar-width: none !important; /* Firefox — !important needed to override Logo-Utility.css */
    -ms-overflow-style: none;         /* IE / Edge (legacy) */
}
.logo-no-scrollbar .k-grid-content::-webkit-scrollbar,
.logo-no-scrollbar .k-table-scroller::-webkit-scrollbar,
.logo-no-scrollbar .k-virtual-scroller::-webkit-scrollbar {
    display: none;                /* Chrome / Safari / Edge (Chromium) */
}

/* Hide horizontal scrollbar only — scroll still works */
.logo-no-scrollbar-x .k-grid-content,
.logo-no-scrollbar-x .k-table-scroller,
.logo-no-scrollbar-x .k-virtual-scroller {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none;         /* IE / Edge (legacy) */
}
.logo-no-scrollbar-x .k-grid-content::-webkit-scrollbar,
.logo-no-scrollbar-x .k-table-scroller::-webkit-scrollbar,
.logo-no-scrollbar-x .k-virtual-scroller::-webkit-scrollbar {
    height: 0; /* Chrome/Safari/Edge — height:0 hides only horizontal track */
}

/* Hide vertical scrollbar only — scroll still works */
.logo-no-scrollbar-y .k-grid-content,
.logo-no-scrollbar-y .k-table-scroller,
.logo-no-scrollbar-y .k-virtual-scroller {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none;         /* IE / Edge (legacy) */
}
.logo-no-scrollbar-y .k-grid-content::-webkit-scrollbar,
.logo-no-scrollbar-y .k-table-scroller::-webkit-scrollbar,
.logo-no-scrollbar-y .k-virtual-scroller::-webkit-scrollbar {
    width: 0; /* Chrome/Safari/Edge — width:0 hides only vertical track */
}
/* Remove the header scrollbar placeholder — Telerik adds padding-right to .k-grid-header
   to reserve space for the vertical scrollbar track. Since the scrollbar is hidden and
   takes no actual space, this padding creates a visible gap. Removing it keeps headers
   perfectly aligned with content columns. */
.logo-no-scrollbar-y .k-grid-header {
    padding-right: 0 !important;
}


/* ====== lo-splitter Overrides (KlickAndPlan, etc.) ====== */

/* 1. Gray canvas background — panes float as white panels on this gray.
      Two-class selector (.lo-splitter.lo-bg) has higher specificity (0,2,0) than .lo-bg (0,1,0),
      so it wins even when both have !important.
      !important needed: logo-3-web.css (index 10) loads after this file. */
.lo-splitter {
    background-color: var(--lo-splitter-bg) !important;
}
.lo-splitter.lo-bg {
    background-color: var(--lo-splitter-bg) !important;
}

/* 2. Remove pane borders — visual separation comes from the gray canvas between white panels. */
.lo-splitter > .k-pane {
    border: none !important;
}

/* 3. Remove all borders from pane content containers. */
.lo-splitter .logo-custom-content-container {
    border: none !important;
}


.lo-splitter .k-splitbar:hover {
    background-color: var(--lo-bg-color-darker) !important;
}