html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

:root {
    --bs-font-sans-serif: "Inter", "Segoe UI Variable", system-ui, sans-serif;
    --bs-font-monospace: "JetBrains Mono", "Cascadia Code", monospace;
}

@supports not selector(::-webkit-scrollbar) {
    .scroll {
        scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0);
        scrollbar-width: thin;
    }
}


.layout-drawer-body ::deep .groupbox {
    margin-top: 1rem;
}

.layout-drawer-body ::deep .btn-info {
    --bs-info: #0078d4;
    --bs-btn-hover-bg: #1260b0;
    margin-bottom: 1rem;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.layout .layout-header {
    z-index: 10 !important;
}

.layout .layout-footer.is-fixed {
    z-index: 10 !important;
}

/*BB LAYOUT*/
.layout-main {
    display: flex !important;
    flex-direction: column;
    max-height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
}

    .layout-main > .tabs {
        flex: 1;
    }

        .layout-main > .tabs > .tabs-body {
            display: flex;
        }

            .layout-main > .tabs > .tabs-body > .tabs-body-content {
                flex: 1;
                display: flex;
                flex-direction: column;
            }

.bb-override-tab-main {
    display: flex;
    flex-direction: column;
    max-height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
    height: 100%;
}

.bb-override-tab-main {
    flex: 1;
}

    .bb-override-tab-main > .tabs-body {
        display: flex;
        padding-bottom: 0;
        padding-top: 0;
    }

        .bb-override-tab-main > .tabs-body > .tabs-body-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

.bg-no-repeat {
    background-repeat: no-repeat;
}

.bg-position-center {
    background-position: center;
}

.bg-position-top {
    background-position: top;
}

.bg-position-bottom {
    background-position: bottom;
}

.bg-position-start {
    background-position: left;
}

.bg-position-end {
    background-position: right;
}

.bg-size-cover {
    background-size: cover;
}

.bg-size-contain {
    background-size: contain;
}

.bg-attachment-fixed {
    background-attachment: fixed;
}

.bg-attachment-scroll {
    background-attachment: scroll;
}

.monaco-editor-container { /* applies to all editor instances */
    height: 100%;
}

.monaco-host {
    isolation: isolate;
    width:100%;
    height:100%
}

.monaco-input {
    width: 100%;
    height: 100%;
}

    .monaco-input .monaco-editor-container {
        height: 100%;
    }

    .cc-tabs .tabs-body {
        --bb-tabs-body-padding: 0 !important;
    }

.cc-tabs .tabs-body-content {
    height: 100%
}

.drag-region {
    -webkit-app-region: drag;
}

.clickable {}

.clickable:hover{
    cursor:pointer;
}

.layout-side {
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--bs-dark) !important;
    border-radius: 0 5px 5px 0;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.tabs-body {
    padding:0 !important;
}

.tabs-body-content {
    max-width:100%;
}

.cc-menu {
    height:100%;
    overflow:auto
}