:root {
    --background: rgb(0,0,56);
    --background-even: rgb(0, 0, 71);
    --color: rgb(225, 225, 225);
    --saturation-1: 10%;
    --saturation-2: 20%;
    --saturation-5: 50%;
    --saturation-8: 80%;
    --saturation-10: 100%;
    --lightness-8: 75%;
    --lightness-5: 50%;
    --lightness-3: 35%;
    --opacity-10: 100%;
    --opacity-8: 80%;
    --opacity-6: 60%;
}

.dark {
    --background: hsl(var(--hue), 50%, 10%);
    --background-0: hsl(var(--hue), 50%, 5%);
    --background-5: hsl(var(--hue), 50%, 50%);
    --background-a: #0000aa;
    --background-odd: hsl(var(--hue), 45%, 15%);
    --background-even: hsl(var(--hue), 45%, 22%);
    /*--background-odd-5: rgb(0,0, 56);
    --background-even-5: rgb(0,0, 72);*/
    --background-alert: #ff6a00;
    /*--color: rgb(138, 138, 225);*/
    --color-13: rgb(80, 80, 134);
    --color-light: hsla(var(--hue), 50%, 75%, 100%);
    --color: hsla(var(--hue), 80%, 65%, 100%);
    --color-darker: hsla(var(--hue), 50%, 35%, 100%);
}

.light {
    --background: rgb(0, 0, 0);
    --background-0: rgb(0, 0, 8);
    --background-5: rgb(0, 0, 55);
    --background-a: #0000aa;
    --background-odd: rgb(0,0,5);
    --background-odd-5: rgb(0,0, 56);
    --background-even: rgb(0,0,27);
    --background-even-5: rgb(0,0, 72);
    --background-alert: #ff6a00;
    /*--color: rgb(138, 138, 225);*/
    --color-13: rgb(80, 80, 134);
    --color-light: hsla(var(--hue), 50%, 75%, 100%);
    --color: hsla(var(--hue), 50%, 50%, 100%);
    --color-darker: hsla(var(--hue), 50%, 35%, 100%);
}

.yellow-palette {
    --hue: 60;
    --hue2: 229;
    --hue3: 314;
    --hue4: 135;
    --alert-hue: 31;
    --error-hue: 0;
    --warning-hue: 297;
    --info-hue: 183;
    --detail-hue: 200;
    --comment-hue: 121;
    /*--background: rgb(0, 0, 0);
    --background-0: rgb(8, 8, 0);
    --background-5: rgb(55, 56, 0);
    --background-a: #aaaa00;
    --background-odd-5: rgb(55, 56, 0);
    --background-even-5: rgb(71, 72, 0);
    --background-odd: rgb(5, 5, 0);
    --background-even: rgb(7, 7, 0);
    --background-alert: #ff6a00;
    --color: rgb(225, 226, 138);*/
}

.blue-palette {
    --hue: 229;
    --hue2: 60;
    --hue3: 135;
    --hue4: 314;
    --alert-hue: 31;
    --error-hue: 0;
    --warn-hue: 297;
    --info-hue: 183;
    --detail-hue: 200;
    --comment-hue: 121;
}

.error {
    background: hsla(var(--error-hue), 100%, 100%, 100%);
    color: white;
    font-weight: 900;
}

.warning {
    background: hsla(var(--warn-hue), 100%, 100%, 100%);
    color: white;
    font-weight: 900;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.top-row {
    justify-content: flex-start;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.navbar-brand {
    font-size: 1.6rem !important;
    font-family: 'Steelfish', sans-serif;
}


.NavMenu a.nav-link:hover {
    text-decoration: double;
}

.NavMenu h3 {
    color: hsla(var(--hue), 50%, 70%, 100%);
    margin-left: 40px;
    color: hsla(var(--hue), 50%, 61%, 63%);
    font-weight: 700;
    font-size: 1rem;
    margin-top: 6px;
}


.oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

html:not(.ultralight) {
    background: rgb(0,0,56);
    background: radial-gradient(circle at 100% 100%, rgba(0,0,56,1) 0%, rgba(1,0,10,1) 82%, rgba(0,0,0,1) 100%);
}

    html:not(.ultralight) body:not(.dark) {
        background-color: white;
    }

    html:not(.ultralight) body.dark {
        background-color: transparent;
        /*background-color: rgb(255, 255, 255, 0.99);*/
    }

html.ultralight body:not(.dark) {
    background-color: transparent;
}

html.ultralight body.dark {
    background-color: transparent;
}

html body:not(.dark) {
    color: black;
}

html body.dark {
    color: white;
}

.nav-item {
    font-size: 0.9rem;
    line-height: 0.5rem;
    margin-bottom: 0.3rem;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        margin-bottom: 1rem;
    }

    .nav-item a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 1rem;
        display: flex;
        align-items: center;
        /*line-height: 3rem;*/
        background: #00000080;
        padding: 0 3px;
        font-family: 'Novecento';
        font-weight: 700;
        /*padding: 2px 4px;*/
    }

        .nav-item a.active {
            background-color: rgba(255,255,255,0.25);
            /*color: white;*/
        }

        .nav-item a:hover {
            background-color: rgba(255,255,255,0.1);
            /*color: white;*/
        }
/*
.NavMenu .nav-link {
    color: white;
}*/
/*padding: 2px 0 !important;*/
/*border-radius: 0;*/

@media (min-width: 768px) {
    .navbar-toggler {
        display: none;
    }

    .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block !important;
    }
}


/* Transparency */

.transparent-unless-hover {
    opacity: 0.5;
}

    .transparent-unless-hover:hover {
        opacity: 1;
    }

/* table */
table.PropertyGrid td:first-child > div {
    margin-right: 10px;
}

table.dense td, table.dense th {
    padding: 0.1rem;
}

/* Quasar */
/* Quasar: Flex (consider simply importing quasar/src/css/flex-addon.sass) */
.justify-center {
    justify-content: center;
}

.row {
    margin: 0; /* Radzen sets this to -15 for some reason */
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
}

.no-wrap {
    flex-wrap: nowrap;
}

.items-center {
    align-items: center;
}

.self-start {
    align-self: self-start;
}

.self-center {
    align-self: center;
}

/* Adapted from default MainLayout.razor.css */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

body:not(.dark) .top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
}

body.dark .top-row {
    background-color: #080808;
    border-bottom: 1px solid #282828;
}

.top-row ::deep a, .top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
}

.top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}


/* table */

/*table, td, tr, th*/
tr {
    border-collapse: collapse;
    border: 1px solid hsla(var(--hue), 30%, 50%, 50%);
}

td, th {
    padding: 3px;
}

tr {
    background: none;
}


.toolbar {
    border: 1px solid hsla(var(--hue), 50%, 50%, 50%);
}

/* MudBlazor */
body.dark .mud-tabs-toolbar {
    background: black;
}


/* Radzen */
/* Radzen: Datatable */
body.dark .rz-datatable-data td .rz-cell-data, body.dark .rz-grid-table td .rz-cell-data {
    color: var(--color);
}

body.dark .rz-grid-table-fixed .rz-frozen-cell {
    /*background: var(--background);*/
    color: var(--color);
}

body.dark .rz-datatable-even > td {
    background: var(--background-even);
}

body.dark .rz-datatable-odd > td {
    background: var(--background-odd);
}

.rz-cell-filter-content {
    background: var(--background);
}

.rz-cell-filter {
    background: var(--background);
}

.rz-grid-table-fixed .rz-frozen-cell {
    background: var(--background);
}

.rz-datatable-thead th .rz-column-title, .rz-grid-table thead th .rz-column-title {
    color: var(--color-light);
}

.rz-datatable-thead th, .rz-grid-table thead th {
    background: var(--background);
    color: var(--color-light);
}

    .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) {
        border-right: solid 1px #dfe7eb;
    }

.rz-chkbox-box.rz-state-active {
    background-color: var(--background-5);
}

.rz-datatable {
    background-color: hsla(var(--hue),50%,11%,100%);
}

.rz-expanded-row-content > td {
    background-color: hsl(var(--hue), 37%, 17%);
    color: hsl(var(--hue), 20%, 90%);
}

.rz-expanded-row-template {
    background-color: hsl(var(--hue), 37%, 17%);
    color: hsl(var(--hue), 60%, 60%);
}

/* Radzen: Datatable border */
.rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) {
    border-right: 1px solid hsl(var(--hue), 30%, 60%);
}

.rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) {
    /*border-right: solid 1px #dfe7eb;*/
    border-right: 1px solid hsl(var(--hue), 30%, 60%);
}

.rz-datatable-data td, .rz-grid-table td {
    /*padding: 0.5rem 0.625rem 0.5rem 0.625rem;*/
    border-bottom: 1px solid hsl(var(--hue), 30%, 60%);
}


/* Radzen: Select bar */
.rz-button-md, .rz-splitbutton .rz-button-text-icon-left, .rz-splitbutton .rz-button-text-only, .rz-splitbutton-menubutton, .rz-selectbutton .rz-button, .rz-selectbutton .rz-paginator-element, .rz-fileupload-choose, .rz-date-filter-buttons .rz-button, .rz-date-filter-buttons .rz-paginator-element {
    padding: 0 1rem;
}

.rz-selectbutton .rz-button, .rz-selectbutton .rz-paginator-element {
    background-color: hsla(var(--hue), 40%, 10%, 90%);
    color: hsla(var(--hue), 30%, 50%, 50%);
    border-color: hsla(var(--hue), 30%, 50%, 50%);
}

    .rz-selectbutton .rz-button.rz-state-active, .rz-selectbutton .rz-state-active.rz-paginator-element {
        background-color: hsla(var(--hue), 50%, 30%, 100%);
        color: hsla(var(--hue), 70%, 80%, 90%);
        border-color: hsla(var(--hue), 30%, 50%, 50%);
    }

/* Radzen: Profile menu*/

ul.rz-profile-menu, ul.rz-profile-menu .rz-navigation-menu {
    background-color: hsla(var(--hue), 40%, 33%, 90%);
}

.rz-chkbox-label {
    color: hsla(var(--hue), 70%, 80%, 90%);
}

/* Hover */
.HoverParent:hover .HideOnHover {
    visibility: hidden;
}

.HoverParent .ShowOnHover {
    visibility: hidden;
}

.HoverParent:hover .ShowOnHover {
    visibility: visible;
}

/* MudBlazor */

.mud-button-group-root.mud-button-group-override-styles .mud-button-root.mud-button.selected {
    background-color: hsl(var(--hue), 56%, 50%);
}

.mud-button-group-root.mud-button-group-override-styles .mud-button-root.mud-button.half-selected {
    background-color: hsla(var(--hue), 56%, 30%, 70%);
}

body.dark .mud-input-label-outlined {
    background: black;
}

/* Indicators */
.Indicators {
    border: 1px solid hsla(var(--hue), 50%, 40%, 50%);
    display: flex;
    align-items: stretch;
}

    .Indicators > *:hover {
        border: 1px solid hsla(var(--hue), 80%, 80%, 80%);
    }

    .Indicators > * {
        border: 1px solid black;
        display: inline-block;
        padding: 0 2px;
        /*border: 1px solid #00000040;*/
        vertical-align: middle;
        color: var(--color);
        background-color: var(--background);
        /*border-radius: 2px;*/
    }

    .Indicators *.inverse {
        color: var(--background);
        background-color: var(--color);
    }

    .Indicators div.Missing {
        background: var(--background-a);
    }

    .Indicators div.Off {
        background: #4a4a4a;
    }

    .Indicators div.Alert {
        background: var(--background-alert);
    }

    .Indicators div.On {
        background: #babaf9;
    }


.dev {
    opacity: 0.5;
}

/* Hover */
.HoverOnly {
    visibility: hidden;
}

.HoverOnlyParent:hover .HoverOnly {
    visibility: visible;
}

/* Faded */
.FadeUnlessHover {
    opacity: 0.4;
}

.FadeUnlessHoverParent:hover .FadeUnlessHover {
    opacity: 1.0;
}