/* body {
    --color-back-1: rgb(0,0,2);
    --color-back-2: rgb(24, 24, 26);
    --color-back-3: rgb(48, 48, 50);
    --color-back-4: rgb(56, 56, 58);
    --color-back-5: rgb(72, 72, 74);
    --color-back-6: rgb(96, 96, 98);
    
    --color-text-1: rgb(253,253,255);
    --color-text-2: rgb(232,232, 234);
    --color-text-3: rgb(211, 211, 213);
    --color-text-4: rgb(174, 173, 175);
    --color-text-5: rgb(146, 146, 148);
    --color-text-6: rgb(123, 123, 125);

    --color-orange: #e37813;
    --color-red: #e32913;

    --weight-bold: 600;
}

body.light-mode {
    --color-text-1: rgb(0,0,2);
    --color-text-2: rgb(24, 24, 26);
    --color-text-3: rgb(48, 48, 50);
    --color-text-4: rgb(96, 96, 96);
    --color-text-5: rgb(120, 120, 122);
    --color-text-6: rgb(144, 144, 148);
    
    --color-back-1: rgb(253,253,255);
    --color-back-2: rgb(242,242, 244);
    --color-back-3: rgb(231, 231, 233);
    --color-back-4: rgb(224, 223, 225);
    --color-back-5: rgb(216, 216, 218);
    --color-back-6: rgb(204, 204, 206);

    --weight-bold: 700;
} */


/* .hstack span {
    line-height: 0 !important;
} */


/* #region Rezizing */

.resz:not(.custom) {
    position: relative;
}
.resz-h:not(.custom) .resz-drag {
    cursor: col-resize;
}
.resz-h:not(.custom) .resz-drag {
    position: absolute;
    width: 8px;
    top: 0;
    bottom: 0;
    z-index: 2;
}
.resz-h:not(.custom) .resz-drag::before {
    content: '';
    display: block;
    position: absolute;
    width: 2px;
    height: 100%;
    background-color: var(--style-background-accent-ultrathick);
    transition-delay: 0.8s;
    transition-duration: var(--anim-duration-long);
    opacity: 0;
}
.resz-h:not(.custom) .resz-drag:hover:before
.resz-h.resizing:not(.custom) .resz-drag:before {
    opacity: 1;
    transition-delay: 0;
}
.resz-h:not(.custom) .resz-drag.leading {
    left: -4px;
}
.resz-h:not(.custom) .resz-drag.leading::before {
    left: 2px;
}
.resz-h:not(.custom) .resz-drag.trailing {
    right: -4px;
}
.resz-h:not(.custom) .resz-drag.trailing::before {
    right: 2px;
}


/* .resz-mnav {
    
} */
.resz-mnav .resz-drag {
    width: 8px;
    top: var(--style-padding-large);
    bottom: var(--style-padding-large);
    display: block;
    right: -4px;
    z-index: 1;
    position: absolute;
    cursor: col-resize !important;
}
.resz-mnav .resz-drag::before {
    background-color: var(--style-background-accent-ultrathick);
    content: '';
    position: absolute;
    left: 3px;
    width: 2px;
    top: 0;
    bottom: 0;
    opacity: 0;
    transition-delay: 0;
    transition-duration: var(--anim-duration-medium);
}
.resz-mnav .resz-drag:hover::before,
.resz-mnav.resizing .resz-drag::before {
    opacity: 1;
    transition-delay: 0.3s;
}

/* #endregion */

/* #region Page Layouts */

.pg-lay-wrap {
    max-height: 100%;
    height: 100%;
    min-height: 100%;
    max-width: 100%;
    width: 100%;
    min-width: 100%;
    background-color: var(--color-back-2);
}
.pg-lay {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: 100%;
    height: 100%;
    min-height: 100%;
    flex-grow: 1;
    overflow: hidden;
}


.pg-lay.master {
    display: grid;
    grid-template-rows: auto 1fr;
}

@scope (.pg-lay) to ([popover], [dialog]) {

    .pg-lay-content {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        min-width: 0px;
        min-height: 0px;
        position: relative;
        flex-wrap: nowrap;
    }
    .pg-lay-content > * {
        max-height: 100%;

    }

    /* #region Page Layout - Header Area */

    header.pg-lay-header.with-border > * {
        border-bottom: var(--border-regular);
    }

    /* #region Page Layout - Nav Area */
    nav.pg-lay-nav {
        display: flex;
        position: sticky;
        top: 0;
        height: var(--style-toolbar-height);
    }

    nav.pg-lay-nav,
    nav.pg-lay-nav > * {
        display: flex;
        align-items: center;
        padding: 0 var(--style-padding-small);
        font-size: 12.5px;
    }

    nav.pg-lay-nav .leading {
        justify-content: start;
        justify-self: start;
        flex-grow: 1;
        flex-shrink: 1;
    }
    nav.pg-lay-nav .pg-lay-tool-lead,
    nav.pg-lay-nav .pg-lay-tool-trail {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--style-padding-small);
    }

    nav.pg-lay-nav .leading .pg-lay-tool-lead:not(:empty) {
        margin-left: var(--style-padding-tiny);
        border-left: var(--border-regular);
        padding-left: var(--style-padding-medium);
    }
    nav.pg-lay-nav .trailing .pg-lay-tool-view {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: var(--style-padding-medium);
        border-left: var(--border-regular);
        padding-left: var(--style-padding-tiny);
    }
    nav.pg-lay-nav .trailing .pg-lay-tool-view:empty {
        display: none;
    }

    nav.pg-lay-nav .center {
        justify-content: center;
        justify-self: center;
        flex-grow: 3;
        flex-shrink: 1;
    }
    nav.pg-lay-nav .trailing {
        justify-content: end;
        justify-self: end;
        flex-grow: 1;
        flex-shrink: 1;
    }
    /* #endregion */

    /* #region Page Layout - Header Area  */

    .pg-lay-filter {
        min-height: var(--style-toolbar-height);
        
    }

    /* #endregion */

    /* #endregion */


    .pg-lay-sidebar,
    .pg-lay-detail,
    .pg-lay-inspector {
        position: relative;
        overflow: initial !important;
        min-height: 100%;
        display: flex;
        flex-grow: 1;
    }

    .pg-lay-detail {
        container-type: inline-size;
        container-name: layout-detail;
    }

    .pg-lay-sidebar-resize,
    .pg-lay-inspector-resize {
        flex: 1;
        width: inherit;
    }

    .pg-lay-inspector-resize.hide-insp {
        display: none;
    }

    .pg-lay-sidebar {
        container-type: inline-size;
        container-name: layout-sidebar;
        border-right: var(--border-regular);
    }

    .pg-lay-inspector {
        container-type: inline-size;
        container-name: layout-inspector;
        border-left: var(--border-regular);
        display: block;
        height: 100%;
        min-height: 100%;
        max-height: 100%;
    }
    .pg-lay-inspect-content {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        overflow-x: hidden;
        overflow-y: auto;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: 100%;
        min-height: 100%;
        max-height: 100%;
    }

}

/* #endregion */

/* #region Dashboards */

.dbd {
    display: contents;
}

.dbd-end {
    display: contents;
}

@scope (.dbd) to ([popover], [dialog], .dbd-end, .dbd-clear) {

    .dbd-wrap {
        display: block;
        flex-direction: column;
        overflow-x: auto;
        overflow-y: auto;
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        height: 100%;
        max-height: 100%;
        position: relative;
    }
    .dbd-lay {
        padding: 0 var(--style-padding-large) var(--style-padding-large);
        position: relative;
        height: auto;
        min-height: 100%;
        width: 100%;
        max-width: 2000px;
        display: flex;
        flex-direction: column;
        justify-self: center;
        
    }
    .dbd-lay.style-summary {
        padding-top: var(--style-padding-xxlarge);
    }
    .dbd-lay.size-small {
        max-width: 960px;
    }
    .dbd-lay.size-medium {
        max-width: 1600px;
    }

    /* #region Dashboard Sections */

    .dbd-sect {
        padding: var(--style-padding-large) 0;
    }
    .dbd-sect:not(:last-child) {
        border-bottom: var(--border-regular);
    }

    .dbd-lay.style-summary .dbd-sect {
        padding:  var(--style-padding-xlarge) 0;
    }
    .dbd-sect.content {
        display: flex;
        flex-direction: column;
        gap: var(--style-padding-large);
    }

    .dbd-sticky-head {
        display: flex;
        flex-direction: column;
        top: 0;
        position: sticky;
        background-color: var(--color-back-2);
        z-index: 20;
        margin: 0 -8px;
        padding: 0 8px;
        border-bottom: none;
    }
    .dbd-sticky-head .dbd-sect {
        border-bottom: var(--border-regular);
    }
    
    /* #region Dashboard Header */

    .dbd-sect.header {
        
    }

    /* #endregion */

    /* #region DashboardContext */

    .dbd-sect.context {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .dbd-contx {
        height: var(--style-input-height);
        display: flex;
        align-items: center;
        width: 100%;
        flex-grow: 1;
    }
    .dbd-contx .dbd-lead-trail {
        display: flex;
        width: 100%;
    }
    .dbd-contx .dbd-lead-trail,
    .dbd-contx .dbd-lead-trail .lead,
    .dbd-contx .dbd-lead-trail .trail {
        align-items: stretch;
    }
    .dbd-contx .dbd-lead-trail .dbd-ctx-text {
        align-items: center;
        display: flex;
        justify-content: start;
    }
    .dbd-contx .dbd-lead-trail .trail .dbd-ctx-text {
        justify-content: end;
        text-align: right;
    }

    .dbd-lead-trail .icon .event-icon {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

    /* #endregion */

    /* #region Dashboard OD Header */

    .dbd-title-od {
        display: grid;
        gap: 0 var(--style-padding-medium);
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        justify-content: start;
    }
    .dbd-title-od:has(> .icon) {
        grid-template-columns: auto 1fr;
    }

    .dbd-title-od .icon {
        grid-row: span 2;
        width: 54px !important;
        height: 54px !important;
        border-radius: var(--style-border-radius-small) !important;
    }

    /* #endregion */

    /* #region DashboardTitleEdit  */

    .dbd-lead-trail input.dbd-header-edit {
        font-size: var(--size-font-h1);
        width: 100%;
    }

    /* #endregion */

    /* #region Dashboard Search */

    .dbd-srch {
        flex-shrink: 1;
        flex-grow: 0;
        display: flex;
        align-items: center;
        max-width: 240px;
        padding-left: var(--style-padding-small);
        /* border-radius: var(--style-border-radius-tiny);
        height: var(--style-input-height); */
        border-radius: var(--style-border-radius);
        min-height: var(--style-label-height);
        border: var(--border-regular);
        overflow: clip;
        gap: var(--style-padding-small);
    }
    .dbd-srch input[type=text] {
        background-color: transparent;
        outline: none;
        border: none;
        height: 100%;
        display: flex;
        flex-grow: 1;
        color: var(--color-text-2);
        cursor: text !important;
    }
    .dbd-srch:has(input:focus) {
        outline: 1.5px solid var(--color-accent-selection);
        outline-offset: 1.5px;
    }

    /* #endregion */

    /* #region Dashboard Content */
    .dbd-grid {
        display: grid;
        gap: var(--style-padding-large);
        flex-grow: 1;
        grid-auto-rows: 240px;
        grid-auto-flow: row dense;
    }
    .dbd-grid.v-grid240 {
        grid-auto-rows: 240px;
    }
    .dbd-grid.v-grid-auto {
        grid-auto-rows: auto;
    }
    .dbd-grid.h-grid2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .dbd-grid.h-grid4 {
        grid-template-columns: repeat(4, 1fr);
    }

    @container layout-detail (width < 1400px) {
        .dbd-grid.h-grid4 {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @container layout-detail (width < 600px) {
        .dbd-grid.h-grid2,
        .dbd-grid.h-grid4 {
            grid-template-columns: 1fr;
        }
    }

    /* #endregion */

    /* #region Dashboard Lead Trail  */

    .dbd-lead-trail,
    .dbd-lead-trail > * {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--style-padding-medium) var(--style-padding-xxlarge);
    }
    .dbd-lead-trail .leading {
        flex-grow: 1;
    }

    .dbd-lead-trail .leading .icon,
    .dbd-lead-trail .leading .icon > svg {
        width: var(--style-padding-xxlarge);
        height: var(--style-padding-xxlarge);
        flex-shrink: 0;
        
        border-radius: 6px;
        overflow: clip;
    }
    .dbd-lead-trail .trailing {
        text-align: right;
    }
    .dbd-lead-trail .trailing .trail-desc {
        max-width: 480px;
        text-wrap: pretty;
        text-wrap: balance;
    }

    .dbd-lead-trail .trailing .trail-badge {
        font-size: 16px;
        color: #fff;
        background-color: rgb(69, 69, 69);
        padding: 2px var(--style-padding-small);
        border-radius: var(--style-border-radius);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
    }

    .dbd-content-wrap {
        display: flex;
        flex-grow: 1;
        flex-shrink: 1;
        min-height: 0px;
        min-width: 0px;
    }

    .dbd-content-state {
        padding: var(--style-padding-large);
        flex-grow: 1;
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

    .dbd-content {
        display: block;
        position: relative;
    }

    .dbd-content.table,
    .dbd-content.grid {
        min-width: 100%;
        min-height: 100%;
        overflow: auto;
        overflow-anchor: none;
    }
    .dbd-content.table.clip-table,
    .dbd-content.grid.clip-table,
    .dbd-content.table.clip-table table,
    .dbd-content.grid.clip-table table {
        max-width: 100%;
        width: 100%;
        overflow-x: hidden;
        table-layout: auto;
        word-break: break-all;
    }


    .dbd-footer {
        padding: var(--style-padding-large);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dbd-footer * {
        color: var(--color-text-5);
    }
    /* #endregion */

    /* #endregion */

    /* #region Dashboard Widgets */

    .dbd-wid {
        border: var(--border-regular);
        border-radius: var(--style-border-radius-tiny);
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        grid-column: span 1;
        grid-row: span 1;
    }
    .dbd-wid.width-small {
        grid-column: span 1;
    }
    .dbd-wid.width-medium {
        grid-column: span 2;
    }
    .dbd-wid.width-large {
        grid-column: span 4;
    }
    .dbd-wid.height-medium {
        grid-row: span 2;
    }
    .dbd-wid.height-large {
        grid-row: span 3;
    }

    @container layout-detail (width < 1400px) {
        .dbd-wid.width-large {
            grid-column: span 2;
        }
    }
    @container layout-detail (width < 600px) {
        .dbd-wid.width-medium,
        .dbd-wid.width-large {
            grid-column: span 1;
        }
    }

    .dbd-wid:has(.dbd-inset) {
        padding: var(--style-padding-small);
    }
    .dbd-wid .dbd-inset {
        border-radius: var(--style-border-radius);
        overflow: hidden;
        display: flex;
        position: relative;
        flex-grow: 1;
    }
    .dbd-inset .dbd-fixed-brand {
        position: absolute;
        top: 10px;
        right: 10px;
        width: var(--style-label-height);
        height: var(--style-label-height);
        z-index: 1;
        border-radius: var(--style-border-radius);
        overflow: clip;
    }
    .dbd-inset .dbd-fixed-brand > * {
        width: var(--style-label-height);
        height: var(--style-label-height);
    }
    .dbd-inset .dbd-fixed-leading {
        position: absolute;
        top: 10px;
        left: 10px;
        height: var(--style-label-height);
        display: flex;
        align-items: center;
        justify-content: start;
        z-index: 1;
    }

    /* #region Widget Groups */

    .dbd-wid-group {
        display: flex;
        gap: var(--style-padding-medium);
    }
    .dbd-wid-group.vertical {
        flex-direction: column;
        min-height: max-content;
        overflow: hidden;
    }

    /* #endregion */

    /* #region Widget Plain  */

    .dbd-wid.plain {
        display: flex;
        flex-direction: column;
        gap: var(--style-padding-small);
    }

    .dbd-wid.plain.pad-leading {
        padding-left: var(--style-padding-small);
    }
    .dbd-wid.plain.pad-trailing {
        padding-right: var(--style-padding-small);
    }
    .dbd-wid.plain.pad-top {
        padding-top: var(--style-padding-small);
    }
    .dbd-wid.plain.pad-bottom {
        padding-bottom: var(--style-padding-small);
    }

    .dbd-wid.plain .dbd-wid-plain-wrap.rounded  {
        border-radius: var(--style-border-radius);
        overflow: hidden;
    }

    /* #endregion */


    /* #region Widget Header */

    .dbd-wid.basic header {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        padding: var(--style-padding-large) var(--style-padding-large);
        gap: var(--style-padding-medium);
        max-width: 100%;
        position: relative;
        overflow: hidden;
    }
    .dbd-wid.basic header.border-bottom {
        border-bottom: var(--border-regular);
    }
    .dbd-wid .dbd-wid-head {
        height: calc((var(--style-padding-large) * 2) + var(--style-label-height));
        min-height: calc((var(--style-padding-large) * 2) + var(--style-label-height));
    }
    .dbd-wid .dbd-wid-head-bg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }
    .dbd-wid .dbd-wid-head-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex: 1;
        align-items: stretch;
        justify-content: space-between;
        min-width: 0;
        height: var(--style-label-height);
        min-height: var(--style-label-height);
    }

    .dbd-wid.basic header .leading,
    .dbd-wid.basic header .trailing {
        display: flex;
        align-items: center;
        flex-shrink: 1;
        gap: var(--style-padding-small);
        text-wrap: nowrap;
        text-overflow: ellipsis;
        min-width: 0;
        flex-wrap: nowrap;
        flex-direction: row;
        height: var(--style-label-height);
    }
    .dbd-wid.basic header .leading {
        flex-grow: 2;
    }

    .dbd-wid.basic header .trailing {
        text-align: right;
        flex-shrink: 1;
    }
    .dbd-wid.basic header .leading > *,
    .dbd-wid.basic header .trailing > *
    .dbd-wid.basic header .hstack,
    .dbd-wid.basic header .hstack > * {
        overflow: hidden;
        text-wrap: nowrap;
        text-overflow: ellipsis;
    }
    
    .dbd-wid.basic header .icon,
    .dbd-wid.basic header .icon > svg {
        width: var(--style-label-height);
        height: var(--style-label-height);
        color: var(--dash-text-6);
    }

    .dbd-wid.basic header a .title::after {
        content: '\00E1D7';
        color: inherit;
        display: inline-block;
        position: relative;
        opacity: 0;
        transition-duration: var(--anim-duration-short);
        transform: translateX(-8px);
        padding-left: var(--style-padding-tiny);
    }
    .dbd-wid.basic header a:hover .title::after {
        transform: translateX(0);
        opacity: 1;
    }

    .dbd-wid .header-category {
        background-color: #383838;
        height: 18px;
        color: #fff;
        border-radius: 9px;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.06em;
        display: flex;
        align-items: center;
        line-height: 0;
        padding: 0 var(--style-padding-small);
    }

    .dbd-wid.basic header .desc {
        flex-shrink: 1;
        flex-grow: 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dbd-wid.basic header .trail-icon,
    .dbd-wid.basic header .trail-icon > svg {
        width: var(--style-label-height);
        height: var(--style-label-height);
        min-width: var(--style-label-height);
        min-height: var(--style-label-height);
        border-radius: var(--style-border-radius);
        overflow: hidden;
        flex: 0 0 var(--style-label-height)
    }

    .dbd-wid.basic header.color * {
        color: color-mix(in srgb, var(--wid-text-color) 75%, transparent)  !important;
    }
    .dbd-wid.basic header.color strong,
    .dbd-wid.basic header.color .strong {
        color: var(--wid-text-color) !important;
    }


    /* #endregion */

    /* #region Map Widget */

    .dbd-wid.map {
        display: flex;
        flex-shrink: 0;
        flex-grow: 1;
    }
    .dbd-wid.map:has(.mk-map) {
        line-height: 0 !important;

    }
    .v-grid-auto .dbd-wid.map:not(:has(.mk-map)) {
        height: 540px;
    }

    .dbd-wid.map .dbd-inset .map-container {
        width: 100% !important;
        height: 100% !important;
    }

    /* #endregion */

    /* #region Widget Table / Grid */

    table {
        min-width: 100%;
        max-width: 100%;
        max-height: 100%;
        text-wrap: nowrap;
        white-space: nowrap;
        position: relative;
        border-collapse: separate;
        border-spacing: 0;
    }

    table td,
    table th {
        background-color: transparent;
        vertical-align: middle;
        width: auto;
        overflow: hidden;
        text-align: left;
    }
    table th {
        position: sticky !important;
        top: 0;
        z-index: 2;
        background-color: var(--color-back-2);
        border-bottom: var(--border-regular);
        font-weight: var(--weight-bold) !important;
    }
    table thead tr:nth-of-type(2) th {
        top: 40px;
    }
    table th * {
        font-weight: var(--weight-bold) !important;
    }
    table thead tr:last-of-type th {
        border-bottom: var(--border-regular);
    }
    table tbody td,
    table tbody th {
        border-bottom: var(--border-regular);
        border-right: var(--border-regular);
    }
    table.hide-v-border td,
    table.hide-v-border th {
        border-left: none;
        border-right: none;
    }
    table.dashboard td {
        background-color: var(--color-back-2);
    }
    table tbody td:first-child:nth-last-child(2),
    table tbody th:first-child:nth-last-child(2) {
        border-right: none;
    }

    td.border-right {
        border-right: var(--border-regular);
    }
    td.border-left {
        border-left: var(--border-regular);
    }

    table td,
    table th {
        padding-left: var(--style-padding-medium);
        padding-right: var(--style-padding-medium);
        height: var(--style-toolbar-height);
    }
    table td:first-child,
    table th:first-child {
        padding-left: var(--style-padding-large);
        border-left: none;
    }
    table td:last-child,
    table th:last-child {
        padding-right: var(--style-padding-large);
        border-right: none;
    }

    table th.grow,
    table th.wide,
    table td.grow,
    table td.wide {
        width: 100%;
    }
    table th.shrink,
    table td.shrink {
        width: 0%;
    }

    table tbody th.sticky:first-child,
    table tbody td.sticky:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: var(--color-back-2);
        border-right: var(--border-regular);
    }

    table .col-justify-start,
    table .col-justify-left,
    table .align-left {
        text-align: left;
    }
    table .col-justify-center,
    table .align-center,
    table .align-centre {
        text-align: center;
    }
    table .col-justify-end,
    table .col-justify-right,
    table .align-right {
        text-align: right;
    }

    table .flex-left,
    table .flex-right,
    table .flex-center,
    table .flex-centre {
        display: flex;
        align-items: center;
    }
    table .flex-left {
        justify-content: start;
    }
    table .flex-center,
    table .flex-centre {
        justify-content: center;
    }
    table .flex-right {
        justify-content: end;
    }

    table td.clear-left {
        padding-left: 0;
    }
    table td.clear-right {
        padding-right: 0;
    }

    table th.pad-left,
    table th.padd-left,
    table td.pad-left,
    table td.padd-left {
        padding-left: var(--style-padding-xxlarge);
    }
    table th.pad-right:not(:has(button.col-title)),
    table th.padd-right:not(:has(button.col-title)),
    table td.pad-right,
    table td.padd-right {
        padding-right: var(--style-padding-xxlarge);
    }
    table th.pad-right button.col-title .sort-indicator,
    table th.padd-right button.col-title .sort-indicator {
        margin-left: var(--style-padding-xxlarge);
    }

    table tr.selectable td,
    table tr.selectable td * {
        cursor: pointer;
    }
    table tr.selectable:hover td {
        background-color: var(--color-back-3);
    }
    table tr.selectable:active td {
        background-color: var(--color-back-4);
    }

    table .sort-indicator {
        background-image: none !important;
        -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" ><path d="M5.23381 2H2.76619C1.9889 2 1.50878 2.84797 1.9087 3.5145L3.14251 5.57085C3.53091 6.21818 4.46909 6.21818 4.85749 5.57084L6.0913 3.5145C6.49122 2.84797 6.0111 2 5.23381 2Z" /></svg>') !important;
        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" ><path d="M5.23381 2H2.76619C1.9889 2 1.50878 2.84797 1.9087 3.5145L3.14251 5.57085C3.53091 6.21818 4.46909 6.21818 4.85749 5.57084L6.0913 3.5145C6.49122 2.84797 6.0111 2 5.23381 2Z" /></svg>') !important;
        width: 12px !important;
        height: 12px !important;
        background-color: var(--color-text-5);
        transition-duration: var(--anim-duration-short);
    }
    table .col-sort-asc .sort-indicator {
        transform: scaleY(1) rotateZ(180deg) !important;
    }

    table th .icon-glyph,
    table td .icon-glyph {
        width: 16px;
        height: 16px;
        border-radius: var(--style-border-radius);
    }

    

    /* When grid is auto height and table is last widget child avoid double border */
    .v-grid-auto table:last-child tbody tr:last-of-type td {
        border-bottom: none;
    }

    /* #endregion */


    /* #region Widget Color Block */

    .dbd-wid.basic.color-block {
        padding:  var(--style-padding-small);
    }
    .dbd-wid.basic.color-block * {
     color: inherit;   
    }
    .dbd-wid.basic.color-block .color-inset {
        border-radius: var(--style-border-radius);
        overflow: clip;
    }
    .dbd-wid.basic.color-block header {}

    .dbd-wid.basic.color-block .color-content {
        display: flex;
        flex-direction: row;
        justify-content: stretch;
    }
    .dbd-wid.basic.color-block .color-content > * {
        width: 100%;
        flex-grow: 1;
    }
    .dbd-wid.basic.color-block .dbd-content {
        width: 100%;
    }
    .dbd-wid.basic.color-block .dbd-content table td {
        border-color: color-mix(in srgb, currentColor 15%, transparent)  !important;
    }
    .dbd-wid.basic.color-block .dbd-content table tr:last-child td {
        border-bottom: none;
    }

    /* #endregion */

    /* #endregion */

    /* #region Dashboard Property Grid */

    .dbd-prop-grid-row {}

    tr.dbd-prop-grid-row td.edit-menu {
        opacity: 0;
        transition-duration: var(--anim-duration-short);
    }
    tr.dbd-prop-grid-row:hover td.edit-menu {
        opacity: 1;
    }

    .dbd-prop-grid-items {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--style-padding-small);
        padding-top: var(--style-padding-medium);
        padding-bottom: var(--style-padding-medium);
        height: auto;
    }

    .dbd-prop-grid-list {
        display: contents;
    }
    .dbd-prop-grid-list li {
        padding: 0 var(--style-padding-small);
        height: var(--style-label-height);
        display: flex;
        flex-shrink: 1;
        flex-grow: 0;
        align-items: center;
        border-radius: var(--style-border-radius);
    }
    .dbd-prop-grid-list.bg li {
        background-color: var(--style-background-accent-ultrathin);
    }

    /* #endregion */

    /* #region Dashboard Inspector */

    .dbd-insp-wrap {
        margin-top: var(--style-padding-small);
        border-top: var(--border-regular);
    }

    .dbd-insp-frame {
        background-color: var(--color-back-2);
        display: flex;
        width: 100%;
        height: auto;
    }

    .dbd-insp-header {
        display: flex;
        padding: var(--style-padding-xxlarge) var(--style-padding-large) var(--style-padding-medium);
    }

    /* #endregion */

}

@scope (.dbd .dbd-home) {

    /* .dbd-home-context {

    } */
    .dbd-home-context svg.logo {
        height: var(--style-padding-xlarge);
        width: auto;
    }
}

.dbd .dbd-full-grid-wrap {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    background-color: var(--color-back-2);
}

@scope (.dbd .dbd-full-grid-wrap) {
    .dbd-title {
        padding: var(--style-padding-xxxlarge) var(--style-padding-xxxlarge) var(--style-padding-large);
    }
    .dbd-grid {
        overflow: scroll;
    }
}



/* #endregion */

/* #region Variance Table */

table.variance-table {

}

@scope (table.variance-table) to ([popover],[dialog]) {

    td.act {
        border-right: 0;
    }

    td.var {
        padding-left: 0;
    }
    td.var span.diff-badge {
        display: flex;
        border-radius: var(--style-border-radius);
        text-align: center;
        padding: 2px var(--style-padding-tiny);
        color: #fff;
        text-align: center;
        justify-content: center;
    }

}

/* #endregion */

/* #region STP Week Calendar Table */

.stp-week-cal-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: var(--style-padding-xxlarge) 0;
}

@scope (.stp-week-cal-table) to ([popover], [dialog]) {
    .stp-wk-cal-row {
        display: flex;
        min-height: 90px;
        height: 90px;
    }
    .stp-wk-cal-row,
    .stp-wk-cal-row * {
        cursor: pointer;
    }
    .stp-wk-cal-row:hover {
        background-color: var(--style-background-accent-ultrathin);
    }
    .stp-wk-cal-row:active {
        background-color: var(--style-background-accent-thin);
    }
    
    .stp-wk-cal-row .body {
        flex-grow: 1;
        border-top: var(--border-regular);
        border-bottom: var(--border-regular);
        display: flex;
        align-items: center;
    }

    .stp-wk-cal-row .timeline {
        width: 120px;
        position: relative;
    }
    .stp-wk-cal-row .timeline .date-item {
        position: absolute;
        display: flex;
        align-items: center;
        height: 32px;
        right: calc(40px + var(--style-padding-large));
        color: var(--color-text-5);
    }
    
    .stp-wk-cal-row .timeline .date-item::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--color-text-6);
        top: 12px;
        right: calc((var(--style-padding-large) + 3.5px) * -1);
    }
    .stp-wk-cal-row.live .timeline .date-item {
        color: var(--color-text-1);
    }
    .stp-wk-cal-row .timeline .date-item.start {
        top: -16px;
    }
    .stp-wk-cal-row .timeline .date-item.end {
        top: calc(100% - 16px);
    }

    .stp-wk-cal-row .body .week-label {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: var(--style-padding-medium);
    }
    .stp-wk-cal-row .body .week-ico,
    .stp-wk-cal-row .body .week-ico svg {
        height: 24px;
        width: 24px;
    }

    .stp-wk-cal-space {
        display: flex;
        min-height: 30px;
        width: 120px;
        position: relative;
    }
    .stp-wk-cal-row .timeline::before,
    .stp-wk-cal-space::before {
        content: '';
        position: absolute;
        right: 40px;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: var(--style-background-accent-regular);
    }
}




/* #endregion */


/* #region Dashboard Single Schedule */

.dbd-lay.sched {
    display: grid;
    max-width: 1440px;
    padding-top: var(--style-padding-xxlarge);
    padding-bottom: var(--style-padding-xxxlarge);
    grid-template-columns: minmax(320px,460px) minmax(320px, 1fr);
    gap: var(--style-padding-large);
    min-height: initial;
    height: auto;
}

@scope (.dbd-lay.sched) to ([dialog],[popover]) {

    .col-lead,
    .col-trail {
        display: flex;
        flex-direction: column;
        gap: var(--style-padding-large);
    }
    .col-lead {
        /* max-width: 420px; */
    }
}

/* #endregion */

/* #region Dashboard Single Diagram */

.dbd-lay.diag {
    max-width: 1440px;
    padding-top: var(--style-padding-xxlarge);
    padding-bottom: var(--style-padding-xxxlarge);
    display: flex;
    flex-direction: row;
    gap: var(--style-padding-large);
    min-height: initial;
    height: auto;
}


@scope (.dbd-lay.diag) to ([dialog],[popover]) {

    .col-detail {
        max-width: 400px;
        min-width: 320px;
        width: 100%;
        display: flex;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: content;
        flex-direction: column;
        gap: var(--style-padding-large);
    }
    .col-act-timeline,
    .col-act-list {
        max-width: 480px;
        min-width: 320px;
        max-height: 80vh;
        flex-shrink: 1;
        display: flex;
        flex-direction: column;
        height: min-content;
        flex-shrink: 1;
        border: var(--border-regular);
        border-radius: var(--style-border-radius-tiny);
        overflow: clip;
    }
    .col-act-list {
        
        overflow-y: auto;
    }
    .col-act-list .header {
        position: sticky;
        top: 0;
    }
    .col-act-list .acts {
        padding: var(--style-padding-medium);
    }
}

/* #endregion */