/*#region ===== GENERAL ===== */

.body-content {
    min-width: 900px !important;
}

h2, h4, h5 {
    font-weight: 400;
}

.content > h3:first-of-type {
    margin-top: 0.75rem;
}

.compbox h5,
.sameform h5 {
    text-align: left;
    margin: 6px 1rem;
    font-weight: 400;
}

    .compbox h5 > span {
        font-size: var(--type-ramp-base-font-size);
        line-height: var(--type-ramp-base-line-height);
        color: var(--neutral-fill-inverse-hover);
    }

.hide {
    display: none !important;
}

.content {
    width: 100%;
}

table {
    margin-bottom: 0;
}

/* Extra definitions */
:root {
    --dialog-max-width: 94%;
    /*indianred*/
    --error: #cd5c5c !important;
    --info: #04a5bb !important;
    --success: #13a10e !important;
    /* Default to light theme */
    --logo-color-1: #ef7748;
    --logo-color-2: #03445a;
    --logo-color-3: #000000;
}

/* Dark theme color */
@media (prefers-color-scheme: dark) {
    :root {
        --logo-color-1: #ef7748;
        --logo-color-2: #ffffff;
        --logo-color-3: #ffffff;
    }
}

/* Header */
.layout > .header {
    background-color: var(--neutral-layer-2) !important;
    color: var(--neutral-foreground-rest) !important;
    border-bottom: calc(var(--stroke-width)* 2px) solid var(--accent-fill-rest); /*var(--warning)*/
}

.header > div {
    font-weight: normal;
    column-gap: 20px;
}

.header a {
    color: var(--neutral-foreground-rest) !important;
    text-decoration: none;
    white-space: nowrap;
}

/*.header > div > div.stack-horizontal {
        width: initial !important;
        column-gap: 20px !important;
    }*/

header svg.logo {
    height: 28px;
    opacity: .9;
}

header .fluentui-counterbadge {
    bottom: 50% !important;
}

fluent-button.headericon::part(start) {
    margin-inline-end: 8px;
}

fluent-button.headericon svg {
    width: 15px !important;
}

.header-btn1::part(control) {
    background: padding-box linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), border-box rgba(0, 0, 0, 0);
}

.header-btn1 > svg {
    fill: var(--neutral-foreground-rest) !important;
    width: 24px !important;
}

fluent-anchor.nohover::part(control) {
    cursor: default;
}

fluent-select::part(listbox) {
    border: 1px solid var(--neutral-stroke-strong-rest) !important;
}

fluent-select.resetwidth {
    min-width: initial;
    width: 100%;
}

.fluent-dialog-body .fluent-messagebar-provider,
.fluent-dialog-body fluent-text-field,
.fluent-dialog-body fluent-text-area,
.expandform > div,
.expandform fluent-text-field,
.expandform fluent-text-area {
    width: 100%;
}

img {
    max-width: 100%;
    max-height: 100%;
}

    img.zoom {
        cursor: pointer;
        max-height: 78px; /* height of product datagrid row is 90px */
        transition: all 0.3s ease;
        transform: translateZ(0) scale(1.0, 1.0);
    }

        img.zoom:hover {
            opacity: 0.9;
            transform: translateZ(0) scale(1.05, 1.05);
        }

.logouploaderwrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.thumbs-wrapper {
}

    .thumbs-wrapper.logos {
        height: 180px;
        justify-content: center !important;
        padding: 24px 12px 12px;
    }

    .thumbs-wrapper > div {
        position: relative;
        max-width: 24%;
        height: 160px;
    }

    .thumbs-wrapper.logos > div {
        max-width: initial;
    }

    .thumbs-wrapper > div > svg {
        /* Since we are adding a border for better visibility */
        width: 22px !important;
        position: absolute;
        top: 6px;
        right: 6px;
        background-color: white;
        border-radius: 10px;
        border: 1px solid var(--error);
    }

    .thumbs-wrapper.logos > div > svg {
        top: -12px;
        right: -24px;
    }

div[data-logos="1"].dark > img:first-child,
div[data-logos="1"] > img:nth-child(2) {
    display: none;
}

div[data-logos="1"].dark > img:nth-child(2) {
    display: block;
}

table th.column-header.select-all > svg {
    margin-top: 5px;
}

/* Datagrid that uses FluentAnchor for clickability */
table.tlink tr > td {
    height: 44px !important;
}

table.tlink50 tr > td {
    height: 50px !important;
}

table.tlink60 tr > td {
    height: 60px !important;
}

/*table.tlink90 tr > td {
    height: 90px !important;
}*/

/* Footer */

footer a {
    font-size: var(--type-ramp-minus-1-font-size);
}

.fluent-messagebar-message .title {
    padding: 0 8px 0 0 !important;
}

.fluent-messagebar-message {
    font-size: var(--type-ramp-base-font-size) !important;
}

/* Themes Overrride (Shadow Root) */
fluent-button.filter::part(content),
.header-page fluent-button::part(content) {
    margin-left: auto;
}

fluent-switch[current-checked="true"]::part(switch) {
    background: mediumseagreen;
}

fluent-combobox,
fluent-select,
fluent-text-field::part(root),
fluent-search::part(root),
fluent-number-field::part(root) {
    height: 40px;
}

    /* Show two lines in the Select */
    fluent-select.double {
        height: 60px;
    }

        fluent-select.double::part(selected-value) {
            white-space: normal !important;
        }

    fluent-select.cleardisabled[aria-disabled="true"] {
        color: transparent;
    }

fluent-number-field::part(step-down) {
    padding: 8px 8px 0 8px;
}

fluent-number-field.textright::part(control) {
    text-align: right;
}

fluent-text-field.code::part(root) {
    height: 48px;
}

fluent-text-field.code::part(control) {
    text-align: center;
    letter-spacing: 4px;
}

fluent-dialog.left::part(control) {
    max-width: calc(var(--dialog-max-width) - 2 * var(--dialog-padding));
}

.fluent-inputfile-container {
    margin-bottom: 28px;
}
/* Fix icon at start, but this affects all buttons (even if no icon) */
/*fluent-button::part(start) {
    margin-inline-end: 8px;
}*/

/*fluent-button.delicon::part(control) {
    border: 0;
}*/

/*fluent-button.delicon svg {
    fill: var(--error) !important;
}*/

fluent-button.small.delicon svg {
    fill: var(--error) !important;
}

fluent-button.small.editicon svg {
    fill: var(--info) !important;
}

fluent-button.delicon:hover::part(control) {
    background: padding-box linear-gradient(#cf6f6f, #cf6f6f), border-box #cf6f6f;
}

fluent-button.editicon:hover::part(control) {
    background: padding-box linear-gradient(var(--accent-foreground-focus), var(--accent-foreground-focus)), border-box var(--accent-foreground-focus);
}

fluent-button.delicon::part(control) {
    background: padding-box linear-gradient(var(--error), var(--error)), border-box var(--error);
}

fluent-button.warning::part(control) {
    background: padding-box linear-gradient(var(--warning), var(--warning)), border-box var(--warning);
}

fluent-button.noborder::part(control) {
    border: none !important;
}
/* BUTTON GREEN */
fluent-button.btn-green::part(control) {
    color: #fff;
    background: padding-box linear-gradient(forestgreen, forestgreen), border-box forestgreen;
}

    fluent-button.btn-green::part(control):hover {
        background: padding-box linear-gradient(green, green), border-box green;
    }

fluent-button.btn-green > svg {
    fill: #fff !important;
}

fluent-button.top {
    border-radius: 0 0 4px 4px;
}

fluent-button.btn-postage {
    height: 60px;
    min-width: 120px;
}

    fluent-button.btn-postage > span {
        display: block;
        font-size: var(--type-ramp-minus-1-font-size);
        font-style: italic;
    }

/* WORKSHEET ANSWER BUTTONS */
.btnqbtn {
    column-gap: 20px !important;
}

    .btnqbtn > fluent-button {
        min-width: 90px;
        height: 40px;
    }

.footer-note-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

.footer-note-right,
.top-left {
    border-radius: 4px 0 !important;
}

.compbox .footer-note-right {
    color: var(--neutral-fill-strong-hover);
    border: 1px solid var(--neutral-stroke-focus);
    border-width: 1px 0 0 1px;
    padding: 4px 8px;
}

/*.bottom-left,*/
.top-right {
    border-radius: 0 4px;
}

.bottom-right {
    margin: 0 0px -10px auto;
    border-radius: 4px 0;
}

    .bottom-right::part(control) {
        border-width: 1px 0px 0px 1px;
    }

.compbox-edit > fluent-button,
fluent-button.small,
fluent-anchor.small {
    font-size: 12px;
    height: 28px;
}

    fluent-anchor.small svg {
        fill: var(--neutral-layer-1) !important;
    }

    .compbox-edit > fluent-button::part(control)
    /*fluent-button.small::part(control),*/
    fluent-anchor.small::part(control) {
        padding: 0 calc((8 + (var(--design-unit) * 2 * var(--density))) * 1px);
    }

/* Making Box with AddCircle */
fluent-button.moveicon svg:nth-child(2) {
    margin-left: -7px;
    margin-bottom: -6px;
    width: 14px !important;
}

fluent-button.fullleft {
    width: 100%;
}

    fluent-button.fullleft::part(control) {
        justify-content: start;
    }

/* Fix for label spacing even though its unused spacing */
fluent-number-field::part(label) {
    display: none;
    visibility: hidden;
}

.searchbox {
    align-items: end !important;
    column-gap: 2px !important;
}

    .searchbox > div:first-child {
        width: 100%;
    }

    .searchbox fluent-button {
        height: 40px;
        margin-bottom: 3px;
        width: 40px;
    }

        .searchbox fluent-button:hover::part(control) {
            background-color: transparent;
        }

    .searchbox svg {
        fill: var(--neutral-foreground-rest) !important;
    }

/*#endregion ===== */

/*#region ===== PREVIEWS / OVERVIEWS ===== */

.column-info-title > div:first-child,
.info-title,
.small-info-title {
    color: var(--neutral-fill-strong-hover);
}

.small-info-title {
    font-size: var(--type-ramp-minus-1-font-size);
}

.column-info-title {
    column-gap: 20px !important;
    padding-top: 8px;
}

    .column-info-title > div {
        row-gap: 6px !important;
    }

        .column-info-title > div:first-child {
            flex-shrink: 4;
            white-space: nowrap
        }

/*#endregion ===== */

/*#region ===== REPORT ===== */

.report-daterange {
    align-items: center !important;
    column-gap: 16px !important;
}

    .report-daterange > div:first-child {
        width: 60px;
        color: var(--accent-foreground-rest);
    }

    .report-daterange > fluent-divider {
        width: 2px;
        height: 74px;
    }

/*fluent-select.report::part(control) {
    border-color: var(--accent-fill-rest);
}*/

/*#endregion ===== */

/*#region ===== LAYOUT ===== */
.profile {
    row-gap: normal 16px;
}

    .profile .stack-horizontal > div:first-child {
        width: 200px;
        color: var(--neutral-fill-strong-hover);
    }

fluent-divider {
    width: 100%;
}

/*fluent-divider.report {
        width: 2px;
        height: 74px;
        /*background-color: var(--accent-base-color);**
    }*/


.text-accent,
.text-accent-reg {
    color: var(--accent-foreground-rest) !important;
}

.text-accent {
    font-size: var(--type-ramp-plus-1-font-size) !important;
}

label.text-accent.mt {
    margin-top: 10px;
}
/* FluentLabel - Act as a header */
div.text-accent.mt,
label.text-accent {
    margin-bottom: calc(var(--design-unit)* 2px);
}
/*.text-sub {
    font-size: var(--type-ramp-minus-1-font-size);
    opacity: .8;
}*/
.child50pct > div {
    width: 50%;
}

/*.flex-cols-2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

    .flex-cols-2 > div {
        flex: 0 0 45%;
        box-sizing: border-box;
        text-align: center;
        margin: 6px 0;
    }
        .flex-cols-2 > div > fluent-button {
            width: 100%;
        }*/

fluent-button.anchor {
    height: auto;
    font-size: inherit;
    line-height: inherit;
}

    fluent-button.anchor::part(control) {
        white-space: normal !important;
        border: none !important;
        padding: 0 !important;
        text-align: left !important;
    }

fluent-button.slim {
    height: 24px;
}

.subfullwidth > * {
    width: 100%;
}

.button-list {
}

    .button-list > div {
        width: 100%;
        text-align: center;
    }

        .button-list > div > fluent-button {
            width: 90%;
            max-width: 200px;
        }

.btn-faded {
    opacity: .8;
}

fluent-button.btn-left::part(control) {
    justify-content: start;
}

/*label.underline {
    border-bottom: 1px solid var(--accent-base-color);
    width: 100%;
    margin-bottom: 6px;
}*/

/*.button-list > div > fluent-button::part(control) {
            justify-content: start;
        }*/

/*#endregion ===== */

/*#region ===== CURRENT MEMBERSHIP LIMIT TABLE ===== */

.reportchanger {
    margin-top: 28px;
    justify-content: end !important;
    column-gap: 20px !important;
}

    .reportchanger > fluent-button {
        font-size: 14px;
        height: 26px;
    }

/*#endregion ===== */

/*#region ===== CURRENT MEMBERSHIP LIMIT TABLE ===== */
.membertable {
    text-align: left;
    padding: .75rem;
    margin: 8px 16px 16px;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-fill-strong-hover);
    margin: auto !important;
}

    .membertable table {
        width: 100%;
    }

        .membertable table tbody tr:first-child td {
            padding: 8px 8px 4px 4px;
        }

        .membertable table td {
            padding: 4px 8px 4px 4px;
        }

        .membertable table th {
            font-weight: initial;
        }

        .membertable table tr th:nth-child(3),
        .membertable table tr td:nth-child(3) {
            text-align: right;
        }

/*#endregion ===== */

/*#region ===== CUSTOM SPLASHSCREEN ===== */

/* Horrible performance when wrapping a datagrid .pgloading {
    align-items: center !important;
    margin-top: 56px;
}

    .pgloading > div:first-child {
        width: 300px;
        display: grid;
        grid-gap: 12px;
        grid-auto-flow: column;
    }*/
div.fluent-dialog-header > div {
    outline: none;
}
/*fluent-dialog[aria-label=" splashscreen"]::part(control),*/
fluent-dialog::part(control) {
    border: 2px solid var(--accent-fill-focus);
}

fluent-dialog.left::part(control),
fluent-dialog.right::part(control) {
    border: none;
}


.splash {
    font-family: var(--body-font);
    -webkit-font-smoothing: antialiased;
    user-select: none;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

    .splash h1 {
        font-size: 32px;
        font-weight: 600;
        margin-top: 40px;
        line-height: 40px;
        margin: 40px 0px 0px 0px;
        user-select: none;
    }

    .splash h2 {
        font-size: 24px;
        font-weight: 400;
        line-height: 32px;
        margin: 24px 0px 50px 0px;
        user-select: none;
    }

    .splash h3 {
        font-size: 16px;
        font-weight: 300;
        margin: 0px;
        user-select: none;
    }

    .splash .logo {
        margin: 8px 0;
    }

    .splash > div {
        width: 340px;
        margin: 10px 0px;
    }

/*#endregion ===== */

/*#region ===== HTML / SVG ICONS ===== */

.btn-red-icon > svg,
.fill-red {
    /*.iconx > svg { */
    fill: var(--error) !important;
}

.fill-green {
    /*.iconx > svg { */
    fill: var(--success) !important;
}

.fill-accent {
    /*.iconx > svg { */
    fill: var(--accent-fill-rest) !important;
}

.iconhx,
.iconhcheck {
    font-size: inherit !important;
}
    .iconhcheck > span {
        display: initial !important;
        margin-left: 6px;
    }

    .iconhx::before,
    .iconhcheck::before {
        font-weight: 600;
    }

    .iconhx::before {
        content: '✕';
        color: var(--error);
        opacity: .8;
    }

    .iconhcheck::before {
        content: '✓';
        color: var(--success);
    }

/*#endregion ===== */

/*#region ===== LIST BOX MULTIPLE SELECT OPTION ===== */

.fluent-calendar.withweek {
    width: calc((var(--calendar-cell-size) + 2* var(--calendar-gap))* 8) !important;
}

    .fluent-calendar.withweek .week-days, .fluent-calendar.withweek .week {
        grid-template-columns: repeat(8, 1fr) !important;
    }

    .fluent-calendar.withweek .week-number {
        color: var(--accent-fill-rest);
        border: 1px solid red;
        border-width: 0 1px;
        border-radius: 0;
    }

/*#endregion ===== */

/*#region ===== LIST BOX MULTIPLE SELECT OPTION ===== */

fluent-anchored-region > div:first-child {
    min-width: 200px;
}

.fluent-autocomplete-multiselect div[role=listbox] {
    border: 1px solid var(--neutral-fill-strong-hover);
    border-radius: 0 0 calc(var(--control-corner-radius) * 1px) calc(var(--control-corner-radius) * 1px);
    border-top: 0;
    width: 100%;
    max-height: 390px !important;
}

.fluent-autocomplete-multiselect[single-select] div[role=listbox],
.fluent-autocomplete-multiselect.single div[role=listbox] {
    border: 1px solid var(--neutral-fill-strong-hover);
    border-radius: calc(var(--control-corner-radius) * 1px);
}

.list-selectall {
    /*border-bottom: 1px solid var(--neutral-fill-inverse-hover);*/
    padding: 2px 2px 0 2px;
    /*border: 2px solid var(--neutral-fill-strong-hover);*/
    border: 1px solid var(--neutral-fill-strong-hover);
    border-radius: calc(var(--control-corner-radius) * 1px) calc(var(--control-corner-radius) * 1px) 0 0;
    border-width: 1px 1px 0 !important;
    border-bottom: 0;
}

    .list-selectall > fluent-option {
        width: 100%;
    }

        .list-selectall > fluent-option[aria-selected='true']::before {
            background: var(--presence-available);
        }

/*change to use onHover instead */
.fluent-autocomplete-multiselect div[role=listbox] fluent-option:not([disabled])[selectable] {
    /*border: var(--neutral-fill-strong-hover) solid 1px;*/
    /*border: transparent solid 1px !important;*/
    border: none !important;
}

.fluent-autocomplete-multiselect div[role=listbox] fluent-option:hover:not([disabled])[selectable] {
    /*border: var(--neutral-fill-strong-hover) solid 1px !important;*/
}

.fluent-autocomplete-multiselect.hover1 div[role=listbox] fluent-option.hover1:not([selected]):hover::before,
.fluent-autocomplete-multiselect.hover1 div[role=listbox] fluent-option.hover1:not([selected])[selectable]:hover::before {
    background: var(--accent-fill-rest) !important;
    height: 4px;
}

.selectcount {
    margin-left: auto;
    margin-right: 6px;
}

    .selectcount div {
        display: flex;
        border-radius: 10px;
        background-color: var(--accent-fill-rest);
        width: 20px;
    }

    .selectcount span {
        color: var(--foreground-on-accent-rest);
        flex: 1 0;
        text-align: center;
        font-size: 11px;
    }

.fluent-autocomplete-multiselect fluent-flipper {
    opacity: 1;
}

fluent-text-field.fluent-datepicker {
    width: 130px;
}

/* Single Select AutoComplete */
.fluent-autocomplete-multiselect[single-select] fluent-badge::part(control) {
    /*background: none;
    /*color: inherit;*/
    font-size: var(--type-ramp-base-font-size);
}

.fluent-autocomplete-multiselect[single-select] fluent-flipper,
.fluent-autocomplete-multiselect[single-select] fluent-badge > span > svg {
    display: none;
}

/*#endregion ===== */
/*#region ===== FLUENT ICONS ===== */
/* uses bool.ToString() to determine visibility */
svg.False {
    opacity: 0;
}

/*#endregion ===== */

/*#region ===== FLUENT TABS ===== */

fluent-tabs::part(activeIndicator) {
    width: 80%;
    z-index: 1;
}

fluent-tabs {
    margin: 10px 0;
}

fluent-tabs, fluent-tab-panel {
    width: 100%;
}

fluent-tab-panel {
    border: 1px solid var(--neutral-stroke-focus);
    border-radius: 0 6px 6px 6px;
    padding: 12px;
    margin-top: -1px;
    background: var(--neutral-layer-1);
}

fluent-tab {
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    padding: 0 8px;
}

    fluent-tab[aria-selected="true"] {
        border: 1px solid var(--accent-fill-rest);
        border-bottom: 1px solid var(--neutral-layer-1);
        background: var(--neutral-layer-1);
    }

.fluent-dialog-body fluent-tab[aria-selected="true"] {
    border-bottom: 1px solid var(--fill-color);
}

/*fluent-tabs.select {
    margin: 0;
}

    fluent-tabs.select fluent-tab {
        border-bottom: 1px;
        border-radius: 4px;
    }

        fluent-tabs.select fluent-tab[aria-selected="true"] {
            border-bottom: 1px solid var(--accent-fill-rest);
            border-radius: 4px;
        }

    fluent-tabs.select fluent-tab-panel {
        display: none;
    }*/

/*#endregion ===== */

div.hasbadge > fluent-badge {
    margin-left: 10px;
}

/*#region ===== ACCORDION ===== */

fluent-accordion {
    border: 1px solid var(--neutral-stroke-focus);
    border-radius: 6px;
    box-shadow: var(--elevation-shadow-card-rest);
}

    fluent-accordion.filters {
        /*max-width: 999px;*/
        position: relative;
    }

fluent-accordion-item::part(region) {
    background: none;
    border-top-color: var(--neutral-stroke-focus);
}

/*#endregion ===== */

/*#region ===== COMPBOX ===== */

/*.fluent-dialog-body {
    border: 1px solid var(--neutral-stroke-focus);
    border-radius: 6px;
}*/

.fluent-dialog-body > * {
    margin-bottom: 16px;
}

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

.compbox {
    /*box-shadow: var(--elevation-shadow-card-rest);*/
    border: 1px solid var(--neutral-stroke-focus);
    border-radius: 6px;
}

    div.text-accent.mt,
    .compbox.mt {
        margin-top: 28px;
    }

    .compbox.pad {
        padding: 16px;
    }

    .compbox.footerext {
        border-radius: 0 0 6px 6px;
        width: 98%;
        margin: 0 auto;
        border-top: 0;
        padding: 16px;
        background-color: var(--neutral-fill-stealth-rest);
    }

.fluent-dialog-body .datagrid.compbox {
    background: var(--neutral-fill-rest);
    border-color: var(--neutral-fill-inverse-rest);
}

.fluent-dialog-body div[data-grid="full"] {
    max-height: calc(100vh - 268px);
}

.fluent-dialog-body > div {
    width: calc(100% - 20px);
}

.fluent-dialog-body .sameform.nopad {
    padding: 0;
}

    .fluent-dialog-body .sameform.nopad .datagrid.compbox {
        margin: 0 10px 10px;
    }

.compbox > h2 {
    color: var(--neutral-fill-strong-rest);
}

.compbox-edit > div:first-child {
    flex-grow: 1;
    font-weight: bolder;
    color: var(--neutral-foreground-rest) !important;
}

    .compbox-edit > div:first-child > span {
        font-weight: 400;
        margin-left: 10px;
        color: var(--input-filled-placeholder-rest)
    }

/*.compbox .stack-vertical > div {
        padding: 0 20px;
    }*/
/* Section */
.compbox section {
    display: flex;
    align-items: center;
    padding: 20px;
    /*margin: 0 20px;*/
    border-radius: 4px;
    background: var(--neutral-fill-secondary-rest);
    /* box-shadow: var(--elevation-shadow-card-rest); */
}

    .compbox section.stealth {
        background: none;
        border: none;
        padding: 0;
    }

.fluent-dialog-body .sectiontitle {
    margin-right: 20px;
}
/* Normal Entries */
/*.compbox fluent-text-field:host() .root {
        height: 40px;
    }*/
fluent-text-field.code {
    font-size: var(--type-ramp-plus-4-font-size);
    width: 200px !important;
}

.validation-message.code {
    width: initial !important;
}
/*fluent-text-field.code:host() .root {
    height: 48px;
}

fluent-text-field.code:host() input {
    text-align: center;
}*/
/* Filters */

/*fluent-search.filter-search::part(clear-button) {
    display: none;
}*/

/*[data-box='filters'] {
    border: none;
}*/

/*[data-box='filters'] > div > div.stack-vertical > div {
        border: 1px solid var(--neutral-stroke-focus);
        border-radius: 4px;
        padding: 8px;
        /* Required to fix AutoComplete mysterious spacing under input **
        height: 82px;
    }*/

[data-box='filters'] fluent-switch {
    height: 40px;
}

[data-box='filters'] label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* filter options stack */
[data-box='filters'] > div {
    column-gap: 16px !important;
    flex-wrap: wrap;
}

    /* inner-filter options stack */
    [data-box='filters'] > div > div {
        /*width: calc(50% - 5px) !important;
            row-gap: 16px !important;*/
        border: 1px solid var(--neutral-stroke-focus);
        border-radius: 4px;
        padding: 8px;
        width: auto;
        /* Required to fix AutoComplete mysterious spacing under input */
        height: 82px;
        /*min-width: 290px;*/
    }

[data-box='filters'] fluent-text-field,
[data-box='filters'] fluent-number-field,
[data-box='filters'] fluent-search {
    /*[data-box='filters'] .stack-vertical > div {*/
    /*width: 100%;*/
    min-width: 250px;
}

    [data-box='filters'] fluent-text-field.fluent-datepicker {
        width: 131px;
        min-width: 131px;
    }

    [data-box='filters'] fluent-text-field:host() .root {
        height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
    }

fluent-button.filter {
    position: absolute;
    top: 8px;
    right: 50px;
}

/*#endregion ===== */

/*#region ===== STATUS LABEL ===== */

fluent-button.status {
    width: 100%;
    /*border-radius: 4px 0;*/
}

    fluent-button.status::part(control) {
        padding: 0;
        /*background: darkgreen; <= label color goes here */
        justify-content: start;
    }

.statuslabel {
    display: flex;
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff;
    /*justify-content: center;*/
}

    .statuslabel > svg {
        margin-right: 6px;
        /*width: 16px !important;*/
        fill: #ffffff !important;
    }



/*.statuslabel > span {
        font-size: var(--type-ramp-base-font-size);
    }*/

.box-intent-info {
    padding: 4px 8px;
}

/*#endregion ===== */
/*#region ===== CHARTS ===== */
/* Legend in datagrid */
.chartcolor {
    height: 16px;
    width: 32px;
    border-radius: 4px;
}
/* Legend color in datagrid below the cart */
.datagrid .colorbox {
    height: 16px;
    width: 16px;
    border-radius: 6px;
}

    /* Manually Assign Colors Here */
    .datagrid .colorbox[data-itemid="0"],
    .datagrid .colorbox[data-itemid="16"] {
        background-color: #A2D2FF;
    }

    .datagrid .colorbox[data-itemid="1"],
    .datagrid .colorbox[data-itemid="17"] {
        background-color: #FFAFCC;
    }

    .datagrid .colorbox[data-itemid="2"],
    .datagrid .colorbox[data-itemid="18"] {
        background-color: #BDE0FE;
    }

    .datagrid .colorbox[data-itemid="3"],
    .datagrid .colorbox[data-itemid="19"] {
        background-color: #BDE0FE;
    }

    .datagrid .colorbox[data-itemid="4"],
    .datagrid .colorbox[data-itemid="20"] {
        background-color: #FFC8DD;
    }

    .datagrid .colorbox[data-itemid="5"],
    .datagrid .colorbox[data-itemid="21"] {
        background-color: #A3F7B5;
    }

    .datagrid .colorbox[data-itemid="6"],
    .datagrid .colorbox[data-itemid="22"] {
        background-color: #FFD670;
    }

    .datagrid .colorbox[data-itemid="7"],
    .datagrid .colorbox[data-itemid="23"] {
        background-color: #CDB4DB;
    }

    .datagrid .colorbox[data-itemid="8"],
    .datagrid .colorbox[data-itemid="24"] {
        background-color: #F4A261;
    }

    .datagrid .colorbox[data-itemid="9"],
    .datagrid .colorbox[data-itemid="25"] {
        background-color: #FEC89A;
    }

    .datagrid .colorbox[data-itemid="10"],
    .datagrid .colorbox[data-itemid="26"] {
        background-color: #99D98C;
    }

    .datagrid .colorbox[data-itemid="11"],
    .datagrid .colorbox[data-itemid="27"] {
        background-color: #FFB4A2;
    }

    .datagrid .colorbox[data-itemid="12"],
    .datagrid .colorbox[data-itemid="28"] {
        background-color: #ADC178;
    }

    .datagrid .colorbox[data-itemid="13"],
    .datagrid .colorbox[data-itemid="29"] {
        background-color: #9AD1D4;
    }

    .datagrid .colorbox[data-itemid="14"],
    .datagrid .colorbox[data-itemid="30"] {
        background-color: #D4A5A5;
    }

    .datagrid .colorbox[data-itemid="15"],
    .datagrid .colorbox[data-itemid="31"] {
        background-color: #8ECAE6;
    }

.chart-wrapper {
    text-align: center;
}

    .chart-wrapper .stack-horizontal {
        align-items: center !important;
        justify-content: center !important;
        font-size: var(--type-ramp-minus-1-font-size);
    }

        /* Legend in header */
        .chart-wrapper .stack-horizontal .chartcolor {
            height: 12px;
            width: 24px;
            margin-left: 6px;
        }

.chart {
    margin-top: 10px;
}

    .chart canvas {
        display: inline-block !important;
        /*margin: auto;*/
    }

/*#endregion ===== */

/*#region ===== DATAGRID ===== */
.datagrid {
    overflow: auto;
    display: block;
    /* extend the height by 1px */
    padding-bottom: 1px;
    /* to allow the column options to appear properly */
    min-height: 120px;
    /* force as tabs change the color */
    background: var(--neutral-fill-rest);
}

    .datagrid[data-grid="full"] {
        margin-top: 28px;
        min-height: 250px;
    }

div[data-grid="full"] {
    max-height: calc(100vh - 98px);
}

div[data-grid="half"] {
    max-height: calc(100vh / 2 - 98px);
}
/* height : Horizental */
.datagrid-images::-webkit-scrollbar {
    height: 6px;
}
/* width */
.fluent-dialog-body::-webkit-scrollbar,
.datagrid::-webkit-scrollbar,
div[role="listbox"]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
/* Track */
.datagrid-images::-webkit-scrollbar-track,
.fluent-dialog-body::-webkit-scrollbar-track,
.datagrid::-webkit-scrollbar-track,
div[role="listbox"]::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px black;
    border-radius: 4px;
}

/* Handle */
.datagrid-images::-webkit-scrollbar-thumb,
.fluent-dialog-body::-webkit-scrollbar-thumb,
.datagrid::-webkit-scrollbar-thumb,
div[role="listbox"]::-webkit-scrollbar-thumb {
    background: var(--accent-fill-rest);
    border-radius: 4px;
}

    /* Handle on hover */
    .datagrid-images::-webkit-scrollbar-thumb:hover,
    .fluent-dialog-body::-webkit-scrollbar-thumb:hover,
    .datagrid::-webkit-scrollbar-thumb:hover,
    div[role="listbox"]::-webkit-scrollbar-thumb:hover {
        background: var(--accent-fill-hover);
    }

.datagrid.padded {
    padding: 12px;
    margin: 0;
}

table.fluent-data-grid {
    width: 100% !important;
}

    table.fluent-data-grid.invpodetails th {
        background: none !important;
    }

    table.fluent-data-grid.invpodetails tr > th:nth-child(4) div.col-title,
    table.fluent-data-grid.invpodetails tr > th:nth-child(5) div.col-title,
    table.fluent-data-grid.invpodetails tr > th:nth-child(6) div.col-title {
        background-color: var(--warning);
        border-radius: 4px;
        margin-right: 5px;
    }

    table.fluent-data-grid.invpodetails tr > th:nth-child(7) div.col-title {
        background-color: var(--error);
        border-radius: 4px;
        margin-right: 5px;
    }

    /* Default min-width is 100px, but when not using headers, this is too much */
    table.fluent-data-grid th {
        min-width: 60px !important;
    }
    /*
    table.fluent-data-grid > thead > tr > th:first-child > fluent-button:first-child {
        margin-left: 3px;
    }
    */
    table.fluent-data-grid > thead > tr > th {
        padding-top: 3px;
    }

/* Filtered On Icon - Always hide default icon*/
th.column-header fluent-button.col-sort-button > svg[slot="end"][viewBox="0 0 16 16"] {
    display: none !important;
}
/* sortable arrow */
th.column-header fluent-button.col-sort-button > svg[slot="end"][viewBox="0 0 20 20"] {
    opacity: 0.80 !important;
}

/* Add a border instead When filtered */
.fluent-data-grid th.column-header:has(fluent-button.col-sort-button > svg[slot="end"][viewBox="0 0 16 16"]) fluent-button.col-options-button > svg {
    border: 1px solid var(--accent-fill-active);
    width: 18px !important;
    border-radius: 4px;
}

/*
.sticky-header {
    /* Fix height issue when scrolling long lists **
    height: 47px;
}
    */

.col-options {
    padding: 2px !important;
    background: var(--accent-fill-rest) !important;
    top: 3rem !important;
    border: none !important;
}

/*
.fluent-data-grid-row {
    align-items: center;
}
    */

.fluent-data-grid-row td.highlight {
    border-color: indianred;
    background-color: #cd5c5c1a;
}

/*
    .fluent-data-grid-row td.nowrap {
        white-space: nowrap;
        /* 
            In fluent-grid, can expand the column to see more data
            bads idea to show a scroll bar on individual cells
        **
        overflow: hidden;
    }
    */

.datagrid-legend-bottom {
    text-align: right;
    font-size: var(--type-ramp-minus-1-font-size);
    padding: 10px;
    font-style: italic;
    color: var(--neutral-fill-strong-hover);
}

tbody .datagrid-images {
    overflow: auto;
}

.datagrid-buttons {
    opacity: .5;
}

    .datagrid-buttons:hover {
        opacity: 1;
        transition: all 0.3s ease;
    }

/* Leave the Header as aligned left */
td.tdright {
    text-align: right;
}

table.samedatagrid {
    width: 100%;
}

    table.samedatagrid thead {
        height: 40px;
        background: var(--fill-color);
    }

    table.samedatagrid th {
        padding-left: 12px;
        padding-right: 12px;
    }

    table.samedatagrid tbody tr {
        border-bottom: calc(var(--stroke-width)* 1px) solid var(--neutral-stroke-divider-rest);
        display: table-row;
    }

        table.samedatagrid tbody tr:last-child {
            border-bottom: none;
        }

    table.samedatagrid tbody td {
        padding: calc((var(--design-unit) + var(--focus-stroke-width) - var(--stroke-width))* 1px) calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px);
    }

    /* All but first column aligned right */
    table.samedatagrid.alignmostright tr > th,
    table.samedatagrid.alignmostright tr > td {
        text-align: right;
    }

        table.samedatagrid.alignmostright tr > th:first-child,
        table.samedatagrid.alignmostright tr > td:first-child {
            text-align: left;
        }

    table.samedatagrid.align2left tr > th:nth-child(2),
    table.samedatagrid.align2left tr > td:nth-child(2) {
        text-align: left;
    }
/*
.colfilter-checkbox fluent-checkbox {
    height: 16px;
}

    .colfilter-checkbox fluent-checkbox::part(control) {
        width: 16px;
        height: 16px;
    }
*/

/* DataGridColumnSelect - START */

.checkbox-filter > fluent-checkbox.checked::part(control) {
    background: var(--success);
}

.checkbox-filter {
    text-align: right;
    padding: 8px;
    width: 100%;
    border-radius: 0.2rem;
    background: padding-box linear-gradient(var(--neutral-fill-input-rest), var(--neutral-fill-input-rest)), border-box var(--neutral-stroke-input-rest);
}

    .checkbox-filter > fluent-checkbox {
        margin-bottom: 10px;
    }

        .checkbox-filter > fluent-checkbox::part(control) {
            height: 18px;
            width: 18px;
        }

        .checkbox-filter > fluent-checkbox > span {
            font-size: var( --type-ramp-minus-1-font-size);
        }

    .checkbox-filter > div:nth-child(2) {
        flex-wrap: wrap;
        row-gap: 6px !important;
    }

        .checkbox-filter > div:nth-child(2) > fluent-checkbox {
            flex: 0 0 100%;
        }

.paginator {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
/*#endregion ===== */

/*#region ===== ACCESS EDITOR ===== */

.accesseditor {
    justify-content: space-between !important;
}

    .accesseditor > div {
        background: var(--neutral-layer-1);
        width: auto !important;
    }

/*#endregion ===== */

/*#region ===== TOAST / MESSAGE BAR ===== */
.fluent-toast-provider.position-topright {
    margin-top: 90px;
}

.fluent-toast {
    border-width: 1px;
    border-style: solid;
}

    .fluent-toast .fluent-toast-title {
        word-break: auto-phrase;
    }

    .fluent-toast > div > svg:first-child {
        min-width: 20px !important;
        width: 20px !important;
    }

.fluent-messagebar-provider {
    width: 100%;
    margin: 10px 10px 0 0;
}

.fluent-messagebar.rotate-fmb .fluent-messagebar-icon,
.rotate-child svg:first-child {
    animation: rotate-spin 1s linear infinite;
}

svg.fluent-messagebar-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
}

.fluent-toast-provider {
    /* Required to show Toast on top of Panels */
    z-index: 1000 !important;
}

/* Center and limit full width */
.content > .fluent-messagebar-notification {
    min-width: 320px;
    max-width: 800px;
}

.fluent-messagebar-notification {
    margin-left: auto;
    margin-right: auto;
    border-radius: calc(var(--control-corner-radius)* 1px);
}

    .fluent-toast.intent-success,
    .fluent-messagebar-notification.intent-success {
        border: 1px solid #9fd89f;
        background-color: #f1faf1;
    }

    .fluent-toast.intent-error,
    .fluent-messagebar-notification.intent-error {
        border: 1px solid #D13438;
        background-color: #FDF3F4;
    }

    .fluent-toast.intent-warning,
    .fluent-messagebar-notification.intent-warning {
        border: 1px solid #f4bfab;
        background-color: #FDF6F3;
    }

    .box-intent-info,
    .fluent-toast.intent-info,
    .fluent-messagebar.intent-info,
    .fluent-messagebar-notification.intent-info {
        border: 1px solid #04a5bb !important;
        background-color: #e0f8fb !important;
    }

        .fluent-toast.intent-info > div > svg,
        .fluent-messagebar.intent-info > div > svg,
        .fluent-messagebar-notification.intent-info > div > svg,
        .fill-info {
            fill: #04a5bb !important;
        }

.dark.fluent-toast.intent-success,
.dark.fluent-messagebar-notification.intent-success {
    border: 1px solid #107C10;
    background-color: #052505;
}

.dark.fluent-toast.intent-error,
.dark.fluent-messagebar-notification.intent-error {
    border: 1px solid #D13438;
    background-color: #3F1011;
}

.dark.fluent-toast.intent-warning,
.dark.fluent-messagebar-notification.intent-warning {
    border: 1px solid #DA3B01;
    background-color: #411200;
}

.dark.box-intent-info,
.dark.fluent-toast.intent-info,
.dark.fluent-messagebar.intent-info,
.dark.fluent-messagebar-notification.intent-info {
    border: 1px solid #2fcadf !important;
    background-color: #072529 !important;
}

    .dark.fluent-toast.intent-info > div > svg,
    .dark.fluent-messagebar.intent-info > div > svg,
    .dark.fluent-messagebar-notification.intent-info > div > svg {
        fill: #2fcadf !important;
    }

.fluent-messagebar-notification-content ul {
    margin: 0;
}

/* Move the icon to be top and not centered for the MessageBox */
.fluent-messagebox > div:first-child {
    align-items: start !important;
}

/*#endregion ===== */

/*#region ===== KEYFRAMES ANIMATION ===== */

@keyframes rotate-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*#endregion ===== */

/*#region ===== NAVIGATION MENU ===== */

.navmenu {
    background: var(--neutral-fill-stealth-rest); /*var(--neutral-layer-2);*/
}

nav > .fluent-nav-menu > div.fluent-nav-item {
    border-bottom: 1px solid var(--neutral-fill-stealth-hover);
}

#main-menu div[role="group"] svg.fluent-nav-icon {
    width: 14px !important;
    min-width: 14px;
}

nav .fluent-nav-text {
    /*font-size: var(--type-ramp-minus-1-font-size);*/
    width: calc(100% - 60px) !important;
}
/*nav .expand-collapse-button {
    right: calc(var(--design-unit)* 1px);
}*/

.fluent-nav-group * .fluent-nav-menu > .fluent-nav-item .content-region {
    padding-inline-start: 16px !important;
}

.fluent-nav-group * .fluent-nav-menu .fluent-nav-item * .fluent-nav-menu .fluent-nav-item .content-region {
    padding-inline-start: 32px !important;
}

.fluent-nav-link.active > div > div > svg:first-child {
    stroke-width: 2px;
}

/* Menu separator */
/*.menusep {
    border-top: 1px solid var(--warning);
    padding-top: 4px;
}*/

/*#endregion ===== */

/*#region ===== HEADER PAGE ===== */

.header-page {
    justify-content: space-between !important;
    margin-top: 0.75rem;
    margin-bottom: 28px;
    /*max-width: 999px;*/
}

/*.header-page > div {
        width: auto !important;
    }

    .header-page fluent-button {
        width: 100%;
    }*/

/*#endregion ===== */

/*#region ===== EDITOR PAGE ===== */

/* Editor Loader */
.stack-vertical.loader {
    align-items: center !important;
    justify-content: center !important;
    height: 100%;
}

    .stack-vertical.loader > div {
        text-align: center;
        font-style: italic;
    }

/* SubTitle */
fluent-dialog > h5 {
    margin-bottom: 28px;
}

fluent-dialog h5.showdate > span {
    display: block;
    text-align: right;
    font-size: var(--type-ramp-minus-1-font-size) !important;
}

h4.fluent-typography[typo="pane-header"] {
    font-size: var(--type-ramp-plus-2-font-size) !important;
    line-height: var(--type-ramp-plus-2-line-height) !important;
}

.editor-headerbtns {
    justify-content: space-between !important;
}

    .editor-headerbtns > div:first-child {
        width: 100%;
    }

    .editor-headerbtns > div:last-child {
        width: auto !important;
    }

.fluent-dialog-main .fluent-dialog-footer {
    column-gap: 30px !important;
}

.fluent-dialog-main.left .fluent-dialog-footer > fluent-button:first-child {
    margin-left: auto;
}

.fluent-dialog-body > *:first-child,
.fluent-dialog-body > div.sameform {
    width: calc(100% - 16px);
}

/*.fluent-dialog-body .stack-vertical > * {*/
.fluent-dialog-body .compbox {
    /*background-color: var(--neutral-fill-layer-rest);*/
    width: 100%;
}

.fluent-dialog-body .stack-vertical > fluent-divider {
    margin: 16px 0 8px;
}

/*.fluent-dialog-body .stack-vertical > div.fluent-sortable-list {
        width: initial;
    }*/
.action-buttons-stack {
    flex: 1;
    row-gap: 30px !important;
}

    .action-buttons-stack fluent-button {
        width: 100%;
    }

/* for editing position */
fluent-number-field.pos {
    width: 130px;
}

/* Sortable List */
.fluent-sortable-list .sortable-item {
    margin-bottom: 3px 0 !important;
    background-color: var(--neutral-layer-1) !important;
    cursor: move;
}

.sortlist-wrapper {
    display: flex;
    flex-direction: column;
    width: calc(100% - 10px);
}

    .sortlist-wrapper > div:first-of-type {
        margin-bottom: 20px;
    }

    .sortlist-wrapper fluent-text-field {
        width: 100%;
    }
    /* Add item button */
    .sortlist-wrapper .stack-horizontal fluent-button {
        height: 40px;
    }

.sortable-item span {
    padding-right: 20px;
}

.sortable-item svg {
    margin-left: auto;
}

.datefootnote {
    text-align: right;
    font-style: italic;
    opacity: 0.8;
    font-size: var(--type-ramp-minus-1-font-size);
}

.abs-bottom-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 4px 0px 4px 0px;
}

/* Schedule Editor */

.schededitor > div:first-child {
    background-color: var(--neutral-fill-stealth-rest);
    font-weight: 600;
    height: 44px;
    align-items: center !important;
}

    .schededitor > div:first-child > div {
        padding-left: 16px;
    }

        .schededitor > div:first-child > div:first-child {
            /* Required to override the class profile */
            color: var(--neutral-foreground-rest);
        }

.schededitoritems > div {
    column-gap: 0 !important;
}

    .schededitoritems > div > div {
        padding: 6px 16px;
    }

        .schededitoritems > div > div:last-child {
            width: 60px;
            align-self: center;
            text-align: right;
        }

.schededitorequip > div {
    align-items: end !important;
}

    .schededitorequip > div > div:first-child {
        width: auto !important;
        white-space: nowrap;
    }

/*#endregion ===== */
/*#region ===== INPUT FORMS ===== */
label.fluent-input-label > span {
    /*font-size: var(--type-ramp-minus-1-font-size);*/
    color: var(--neutral-fill-strong-hover);
    margin-left: 0.5rem;
}

fluent-radio-group.centered {
    align-items: center;
}

    fluent-radio-group.centered > fluent-radio {
        margin: 0 10px;
    }

        fluent-radio-group.centered > fluent-radio:first-child {
            margin-left: 0;
        }

        fluent-radio-group.centered > fluent-radio:last-child {
            margin-right: 0;
        }

fluent-radio-group.select > fluent-radio {
    margin: 0 12px 0 6px;
    border: 1px solid var(--neutral-stroke-rest);
    padding: 6px 0 6px 6px;
    border-radius: 6px;
}

    fluent-radio-group.select > fluent-radio.checked {
        border-color: var(--accent-fill-rest);
    }

/*#endregion ===== */

/*#region ===== WIZARD IN EDITOR ===== */

.compbox.wiz {
    background: var(--neutral-layer-1);
    height: auto !important;
}

    .compbox.wiz .fluent-wizard-content {
        margin-top: 10px;
        padding-top: 16px;
        border-top: 1px solid var(--neutral-stroke-hover);
    }

.wizeditor {
    width: calc(100% - 16px) !important;
}

    .wizeditor > div:nth-child(2) > div > * {
        margin-bottom: 16px;
    }

    .wizeditor .fluent-wizard-content,
    .compbox.wiz .fluent-wizard-content {
        margin: 0 !important;
    }

    .wizeditor .fluent-wizard-buttons,
    .compbox.wiz .fluent-wizard-buttons {
        display: none !important;
    }

.fluent-wizard li[status="current"] > div:first-child {
    font-weight: bold;
}

.fluent-wizard li[status="current"] svg {
    border: 2px solid var(--neutral-stroke-hover);
    border-radius: 12px;
}

/*#endregion ===== */


/*#region ===== INVENTORY ===== */

.inventory table,
.inventory table th {
    text-align: right;
}

    .inventory table th {
        width: 20%;
        min-width: 112px !important; /* fit int.MaxValue */
    }

        .inventory table th:last-child {
            width: 40%;
        }

    .inventory table thead {
        height: 27px;
        opacity: 0.5;
        background: inherit;
        font-size: var(--type-ramp-minus-1-font-size);
    }

    .inventory table tr {
        display: table-row !important;
    }

.invpostagestatus {
    column-gap: 6px !important;
}

    .invpostagestatus > svg:last-child {
        margin-left: -20px;
    }

.invupdate > div.stack-horizontal:not(:first-child) {
    margin-top: 8px;
}
.invupdate > div:nth-child(2) > div {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px, 1fr));
    gap: 16px;
}
.invupdate > div > div {
    font-size: var(--type-ramp-plus-1-font-size);
}


/*#endregion ===== */
/*#region ===== USER MANAGEMENT ===== */
/* Editor */
.userinfo {
    padding: 8px;
    justify-content: space-evenly !important;
    text-align: center;
}

    .userinfo > div > span:first-child {
        color: var(--neutral-fill-strong-hover);
    }

/*#endregion ===== */

/*#region ===== SITE RECORD ===== */

.panelsubs-row > div,
.panelsubs {
    padding: 8px 0 2px;
    width: 100%;
}

.panelsubs-row > div {
    padding: 0;
}

.panelsubs > div {
    padding-bottom: 6px;
    width: 100%;
}

    .panelsubs-row > div > span,
    .panelsubs > div > span {
        color: var(--neutral-fill-strong-hover);
        font-size: var(--type-ramp-minus-1-font-size);
    }

/*#endregion ===== */

/*#region ===== SITE DETAILS ===== */

.sitehours {
    max-width: 999px;
}

    .sitehours > div {
        align-items: center !important;
        max-width: 110px;
    }

        .sitehours > div > div:first-child {
            font-weight: 600;
            border-bottom: 1px solid var(--accent-fill-rest);
            width: auto;
        }

/*#endregion ===== */

/*#region ===== SITE EQUIPMENT ===== */

.rightinfo {
    color: var(--input-filled-placeholder-rest);
    text-align: right;
}

/*#endregion ===== */

/*#region ===== DASHBOARD ===== */

table.fluent-data-grid td span {
    display: block;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hover);
}

    table.fluent-data-grid td span.ellipsis {
        display: inherit;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.dashbordertop {
    border-top-color: var(--accent-fill-rest);
    border-width: 2px 1px 1px;
}

.dashtitle {
    font-size: 18px;
}

.dashsummary {
    align-items: center !important;
    justify-content: center !important;
    column-gap: 16px !important;
}

    .dashsummary > div:first-child {
        background: var(--accent-fill-rest);
        border-radius: 24px;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .dashsummary > div:first-child > svg {
            /*fill: #fff !important;*/
            width: 28px !important;
        }

    .dashsummary > div:nth-child(2) > div:nth-child(1) {
        opacity: 0.8;
    }

    .dashsummary > div:nth-child(2) > div:nth-child(2) {
        font-weight: bold;
        font-size: 40px;
        padding: 10px 0 14px;
    }

    .dashsummary > div:nth-child(2) > div:nth-child(3) {
    }

/*.dashsummary > div:nth-child(2) > div.pos > span {
        color: var(--success);
        }

        .dashsummary > div:nth-child(2) > div.pos > span > svg {
        fill: var(--success) !important;
        }

        .dashsummary > div:nth-child(2) > div.neg > span {
        color: var(--error);
        }

        .dashsummary > div:nth-child(2) > div.neg > span > svg {
        fill: var(--error) !important;
        }*/

/*#endregion ===== */

/*#region ===== PROFILE & SECURITY ===== */

#qrCode img {
    margin: 0 auto 20px;
    padding: 10px;
    background: #fff;
}

/*#endregion ===== */

/*#region ===== SCHEDULE ===== */

.legend {
    display: flex;
    align-items: center;
    height: 16px;
}

    .legend span {
        display: block;
        width: 4px;
        margin: 0 6px 0 12px;
        border-radius: 3px;
        height: 100%;
    }

.schedstatus0 {
    background-color: var(--error);
}

.schedstatus1 {
    background-color: var(--info);
}

.schedstatus2 {
    background-color: var(--success);
}

.schedname {
    padding-top: 10px;
}

    .schedname::part(control) {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .schedname svg {
        opacity: 0;
        visibility: hidden;
    }

td:hover .schedname svg {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.schedcard {
    width: 100%;
    height: auto;
    margin-bottom: 6px;
}

    .schedcard::part(control) {
        padding: 4px !important;
    }

    .schedcard::part(content) {
        width: 100%;
    }

    .schedcard > div {
        display: flex;
    }

        /* horizental bar */
        .schedcard > div > div:first-child > div {
            border: 1px solid transparent;
            border-radius: 6px;
            height: 100%;
            /*background-color: red;*/
            width: 3px;
            margin-right: 4px;
        }

        .schedcard > div > div:nth-child(2) {
            flex-grow: 1;
        }

            .schedcard > div > div:nth-child(2) > div:first-child {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

                .schedcard > div > div:nth-child(2) > div:first-child > div:last-child {
                    font-size: var(--type-ramp-minus-1-font-size);
                }

.sched-option {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

    .sched-option.h100 {
        height: 100%;
    }

    .sched-option fluent-button {
        opacity: 0;
        visibility: hidden;
        height: 24px;
    }

td:hover .sched-option fluent-button {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/*#endregion ===== */


/*#region ===== REGISTRATION / LOGIN ===== */
.login {
    max-width: 500px !important;
    margin: 20px auto 0;
    display: block;
}

.compbox.login > div:first-child {
    text-align: center;
    padding: 20px 20px;
    border-bottom: 1px solid #20b2aa;
    margin-bottom: 20px;
}

.compbox.login h2 {
    color: var(--neutral-fill-strong-rest);
}

.compbox.login .stack-vertical {
    align-items: stretch !important;
    padding: 0 20px;
}

.compbox.login fluent-text-field {
    width: 100%;
}

.compbox.login .subinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .compbox.login .subinfo p {
        margin-top: 16px;
    }

.compbox.register .stack-vertical {
    padding: 0 20px 10px;
}

.compbox.register section {
    margin-top: 10px;
}
/*#endregion ===== */