@font-face
{
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url(../lib/material-design-icons/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
}

@font-face
{
    font-family: 'Fluent Icons';
    font-style: normal;
    font-weight: 100 700;
    src: url(../lib/fluent-icons/FluentSystemIcons-Filled.woff2) format('woff2');
}

.fluent
{
    font-family: 'Fluent Icons' !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    font-size: 18px;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 4px;
}
.icon-ic_fluent_search_24_filled:before
{
    content: "\f69a";
}
.icon-ic_fluent_lock_closed_32_filled:before
{
    content: "\e79f";
}
.icon-ic_fluent_play_24_filled:before
{
    content: "\f610";
}
.icon-ic_fluent_stop_24_filled:before
{
    content: "\f743";
}
.icon-ic_fluent_filter_24_regular:before
{
    content: "\f407";
}

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

html
{
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) 
{
  html 
  {
    font-size: 16px;
  }
}


body
{
    height: 100vh;
    background-color: #1a1a1a;
}

div.body
{
    display: flex;
    flex: 200px 1;
    height: calc(100vh - 78px);
}

nav
{
    button
    {
        height: 37px;
    }
}

aside.navPanel
{
    flex: 1;
    max-width: 178px;

    a.nav-link  *
    {
        vertical-align: middle;
    }
    a.nav-link .icon
    {
        margin-right: 5px;
    }
}
main
{
    flex: 1;
}

html
{
    --ag-background-color: --bs-body-bg !important;
    --ag-odd-row-background-color: red !important;
}

.ag-theme-quartz-dark
{
    --ag-background-color: --bs-body-bg !important;
    --ag-odd-row-background-color: #273544 !important;
}
.ag-root-wrapper
{
    border: none !important;
}

.started
{
    color: lawngreen !important;
}
.stopped
{
    color: #ff4d4d !important;
}
.debug
{
    color: orange !important;
}

.make-secondary
{
    color: gray !important;
}


.table-cell-actions
{
    display: flex;
}
.table-cell-actions > *
{
    flex: 1;
}
.table-cell-actions > div.actions
{
    max-width: 50px;
    padding: 5px;
}
.table-cell-actions > div span
{
    cursor: pointer;
}

.f1
{
    flex: 1;
}
.mw-50
{
    max-width: 50px;
}
.clickable
{
    cursor: pointer;
}
.clickable:hover
{
    /*background-color: var(--bs-highlight-bg);*/
    background-color: #373e44;
}
.selected
{
    /*background-color: var(--bs-highlight-bg);*/
    background-color: #373e44;
}

.hidden
{
    visibility: hidden;
}

.ag-cell:hover .hidden
{
    visibility: visible;
}



.toast-container
{
    top: 64px;
    right: 10px;
}

.ag-theme-quartz-dark
{
    border: var(--ag-borders) var(--ag-border-color) !important;
    --ag-font-size: 16px !important;
}
.ag-filter-body-wrapper,
.ag-menu,
.ag-panel
{
    background-color: var(--ag-header-background-color) !important;
}
.ag-root-wrapper, .ag-sticky-top, .ag-sticky-bottom, .ag-dnd-ghost
{
    background-color: var(--ag-header-background-color) !important;
}