/* titillium-web-regular - latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/titillium-web-v9-latin-regular.ttf') format('truetype')
}

@font-face {
    font-family: 'icomoon';
    font-weight: normal;
    font-style: normal;
    src: local('icomoon'), local('icomoon'), url('fonts/icomoon.woff') format('woff');
}

*, *:focus, *:hover {
    outline: none !important;
}

app {
    min-height: 100vh;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex: 1;
    flex: 1;
}

a {
    cursor: pointer;
}

#blazor-error-ui {
    display: none;
}

.validation-message, .validation-message {
    margin-top: .5rem;
    margin-bottom: .5rem;
    display: block;
    color: #f44336;
    position: relative;
    padding-left: 1.625rem
}

.validation-message:before {
    font-family: 'Font Awesome 5 Pro';
    font-size: 1rem;
    position: absolute;
    top: .12502rem;
    left: 0;
    display: inline-block;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.validation-message:before {
    content: "\f057";
}

.validation-errors li.validation-message {
    padding-left: 0rem;
    color: black;
    margin-top: 0;
    margin-bottom: 0;
}

.validation-errors li.validation-message:before {
    padding-left: 0rem;
    content: "";
}

ul.validation-errors {
    padding-left: 2rem;
    list-style-type: none;
    background-color: #ffe0b2;
    color: rgba(0,0,0,.87);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 2px;
    border: 0;
    display: block;
    margin-bottom: 1rem;
    position: relative;
}

.table-scrollable {
    max-height: 30rem;
    overflow: auto;
}

div.content.full-height {
    overflow: auto;
    max-height: calc(100% - 59px);
    height: calc(100% - 59px);
    max-width: calc(100% - 270px);
    width: calc(100% - 270px);
    position: fixed;
}
    
body.sidebar-xs div.content.full-height {
    max-width: calc(100% - 56px);
    width: calc(100% - 56px);
}

@media (max-width: 768px) {
    div.content {
        max-width: 100%;
        width: 100%;
    }

    div.content.full-height {
        overflow: auto;
        max-height: calc(100% - 59px);
        height: calc(100% - 59px);
        max-width: 100%;
        width: 100%;
        position: fixed;
    }
}

.sidebar:not(.sidebar-component) {
    z-index: 101;
}

app div.main-navbar {
    position: sticky;
    top: 0;
    z-index: 102;
}

.checkboxgrid {
    width:100%;
    display:inline-block;
}

.checkboxgrid-item {
    float:left;
    width:250px;
}

.navigationeditor {

}

.navigationeditor-level-1 {
    margin-left: 40px;
}

.navigationeditor-level-2 {
    margin-left: 80px;
}

.navigationeditor-level-3 {
    margin-left: 120px;
}

.navigationeditor-level-4 {
    margin-left: 160px;
}

.navigationeditor-level-5 {
    margin-left: 200px;
}

.navigationeditor-item {
    border: 1px solid #222;
    padding: 5px 10px;
    width: 300px;
    background-color: #f0f0f0;
    margin-bottom: 5px;
    overflow: hidden;
}

.spaceanchors a:not(:last-child) {
    margin-right:5px;
}

.stiJsViewerClearAllStyles {
    font-family: "Titillium Web" !important;
}

.stiJsViewerMainPanel {
    font-family: "Titillium Web" !important;
    background-color: #f9f8fb !important;
}

.stiJsViewerClearAllStyles * {
    box-sizing: unset !important;
}

.notextselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


/* #CLIP-795 */
:root {
    --logo-left: 34px;
    --hamburger-left: -284px;

    --sidebar-expanded-width: 16.875rem;
    --sidebar-collapsed-width: 3.35rem;

    --navitem-bottom-zindex: 1030;
    --navitem-height: 44px;
    --navitem-bottom-padding: 12px;
    --navitem-top-padding: 12px;
    --modal-tabheader-padding-bottom: 20px;
    --modal-tabheader-height: 44px;
    --userProfileEmpty-font-size: 160px;
    --logoEmpty-font-size: 160px;
    --largeLogoEmpty-font-size: 160px;        

    --querygrid-card-padding: 10px;

    --querygrid-navbar-card-top-height-nowrap: 44px; /* Can expand to 84px+ if page is narrowed down and there's a lot of text in headers */
    --querygrid-navbar-card-top-padding-bottom: 10px;
    --querygrid-navbar-card-top-border-top: 1px;
    --querygrid-navbar-card-top-border-bottom: 1px;

    --querygrid-navbars-height: 176px;
    --querygrid-navbar-top-height: 78px; /* height of top navbar together with margins, paddings, borders */

    --querygrid-navbar-bottom-height: 78px;
    --querygrid-navbar-empty-height: 12px; /* On some pages navbar is not implemented  */

    --querygrid-navbar-height: 63px; /* height of navbar together with margins, paddings, borders */
    --querygrid-navbar-margin-bottom: 10px;
    --querygrid-navbar-padding-bottom: 4px;
    --querygrid-navbar-border: 1px;

    /* Bootstrap 5.0 breakpoints **/
    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;
    --xxl: 1400px;
}

/*  CSS variables don't work as selectors in media queries so we have to hardcode widths here  
    https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
*/
@media (min-width: 768px) {
    /* move hamburger menu to the left */
    .navbar-brand a img {
        position: relative !important;
        left: var(--logo-left) !important;
    }

    /* move logo to the right and make room for the hamburger menu */
    .navbar-nav.mr-md-auto li.nav-item {
        position: relative !important;
        left: var(--hamburger-left) !important;
    }
}


/*
    Move menu item to the bottom. Intended for the Administration submenu
*/
/*html body .sidebar.sidebar-expand-md .sidebar-content ul.nav-sidebar li.nav-item-bottom,
html body .sidebar.sidebar-expand-lg .sidebar-content ul.nav-sidebar li.nav-item-bottom,
html body .sidebar.sidebar-expand-xl .sidebar-content ul.nav-sidebar li.nav-item-bottom,
html body .sidebar.sidebar-expand-xxl .sidebar-content ul.nav-sidebar li.nav-item-bottom
{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--navitem-bottom-z-index);
    padding-bottom: 0;
}*/

html body .sidebar-expand-md .sidebar-content ul.nav-sidebar li.nav-item-bottom {
    width: var(--sidebar-expanded-width);
}

@media (min-width: 768px) {
    html body.sidebar-xs .sidebar-expand-md .sidebar-content ul.nav-sidebar li.nav-item-bottom {
        width: var(--sidebar-collapsed-width);
    }
}

/* Media query mimicking the Limitless theme one that collapses the sidebar when decreasing screen width */ 
@media (max-width: 767.98px) {
    .sidebar-expand-md:not(.sidebar-component) li.nav-item-bottom {
        position:static !important;        
    }

    /* Stick nav-item-bottom to the bottom on mobile */
    /*.sidebar-expand-md:not(.sidebar-component) div.card-sidebar-mobile li.nav-item-bottom {
        position:fixed !important;
    }    */
    }    

/* CLIP-900
    Allow Modal.FullSize to stretch grid horizontally, as requested, but don't stretch vertically
    Inline CSS block instead of a css-isolated style due to the isolated one's scope not being wide enough */
.modal-dialog:has(cssIsolationContainer-devices) {    
    height: auto !important;
}

.plk-dd-spacing {
    height: 4px;
}

/* Basic styling for resizable table headers */
th div.resizable {
    cursor: col-resize; /* Indicates that the column can be resized */
    user-select: none; /* Prevents text selection during resize */
}

    /* Optional: Add a visual handle to indicate the resizable area */
    th div.resizable::after {
        content: '';
        position: absolute;
        right: 0;
        top: 10px;
        bottom: 10px;
        width: 5px; /* Width of the draggable area */
        background-color: #ccc; /* Visual indication of the draggable area */
        cursor: col-resize;
        display: block;
    }


.query-grid table {
    width: max-content;
}

.tab-content.h-100 {
    height: calc(100% - 66px) !important;
}

.monaco-editor-container { /* for all editor instances */
    height: 100%;
    border: 1px solid gray;
}