:root {
    --alert-topbar-height: 60px;
    --status-topbar-height: 55px;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    src: url(/fonts/MaterialSymbolsOutlined.woff2) format('woff');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
}

    body.k-body, body.k-body:fullscreen {
        color: #212121;
        background-color: white;
    }

.k-drawer-container.main {
    background-color: white;
}

[data-ns-widget="page"] {
    margin: 0 auto 0 auto;
    position: relative;
    margin-bottom: 15px;
    margin-top: 15px;
    height: calc(100vh - 115px - var(--alert-topbar-height) - var(--status-topbar-height));
}

    [data-ns-widget="page"][data-ns-width="full"] {
        width: calc(100vw - 120px);
    }

.k-drawer-content {
    /*width: calc(100vw - 100px);*/
    overflow: unset;
}

.navbar-icon-link {
    display: flex;
    align-items: center;
    gap: .5em;
    padding-left: 1.5em;
}

.navbar-icon-container {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .navbar-icon-container > img {
        max-height: 100%;
        max-width: 100%;
    }

.k-appbar {
    height: 75px;
}

    .k-appbar a {
        text-decoration: none;
        color: unset;
    }


div.k-drawer.sidebar {
    height: calc(100vh - 85px - var(--alert-topbar-height) - var(--status-topbar-height));
    border-right: 1px solid gray;
}

.k-drawer-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}


.k-drawer-items a {
    text-decoration: none;
}

.drawer-icon .material-symbols-outlined {
    font-size: 42px;
    color: white;
}


.k-hierarchy-cell {
    cursor: pointer;
}

.k-table-alt-row {
    background-color: var(--kendo-neutral-10);
}


th.k-header.k-table-th {
    border-right: 1px solid var(--kendo-neutral-50);
}

.grid-no-scroll .k-grid-content {
    overflow-y: auto;
}

.grid-no-scroll .k-grid-header,
.grid-no-scroll .k-grid-footer {
    padding-right: 0; /* version 2.26 and older requires !important here */
}

.grid-no-scroll .k-grid-header-wrap,
.grid-no-scroll .k-grid-footer-wrap {
    border-right-width: 0;
}

.grid-minimal-margins td.k-table-td {
    padding: 0 1em;
}

/* Utility classes */
.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}


/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-corner {
    background-color: transparent
}


::-webkit-scrollbar-thumb:vertical {
    min-height: 30px;
}

::-webkit-scrollbar-thumb:horizontal {
    min-width: 30px;
}

::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background: rgba(0, 0, 0, .3);
    border-radius: 10px;
    background-clip: padding-box
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, .5);
        background-clip: padding-box;
        border: 1px solid transparent;
    }

/* Sticky Headers */

div.sticky-header .k-grid-aria-root {
    overflow: visible;
}

.sticky-header .k-grid-header {
    position: sticky;
    top: 0px;
    z-index: 2;
}

.k-column-title {
    white-space: normal;
}


.k-grid .k-grid-header .k-table-th {
    padding: 10px;
}