@import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); 
@import url('fontawesome-free-6.6.0-web/css/fontawesome.min.css');
@import url('fontawesome-free-6.6.0-web/css/solid.min.css');

:root {
    color-scheme: light dark;
}

body[data-theme="dark"] {
    color-scheme: dark;
}

body[data-theme="light"] {
    color-scheme: light;
}

html, body {
    /* CEDS Application design */
    font-size: 16px;
    overflow: hidden;
    --disabled-opacity: 0.65;
    --type-ramp-base-font-size: 12.8px;
    --type-ramp-base-line-height: 19.2px;
    --type-ramp-base-font-variations: "wght" 400, "opsz" 10.5;
    --type-ramp-minus-1-font-size: 10px;
    --type-ramp-minus-1-line-height: 14px;
    --type-ramp-minus-1-font-variations: "wght" 400, "opsz" 8;
    --type-ramp-minus-2-font-size: 8px;
    --type-ramp-minus-2-line-height: 14px;
    --type-ramp-minus-2-font-variations: "wght" 400, "opsz" 8;
    --type-ramp-plus-1-font-size: 14px;
    --type-ramp-plus-1-line-height: 20px;
    --type-ramp-plus-1-font-variations: "wght" 400, "opsz" 10.5;
    --type-ramp-plus-2-font-size: 16px;
    --type-ramp-plus-2-line-height: 22px;
    --type-ramp-plus-2-font-variations: "wght" 400, "opsz" 10.5;
    --type-ramp-plus-3-font-size: 20px;
    --type-ramp-plus-3-line-height: 26px;
    --type-ramp-plus-3-font-variations: "wght" 400, "opsz" 10.5;
    --type-ramp-plus-4-font-size: 24px;
    --type-ramp-plus-4-line-height: 32px;
    --type-ramp-plus-4-font-variations: "wght" 400, "opsz" 36;
    --type-ramp-plus-5-font-size: 28px;
    --type-ramp-plus-5-line-height: 36px;
    --type-ramp-plus-5-font-variations: "wght" 400, "opsz" 36;
    --type-ramp-plus-6-font-size: 32px;
    --type-ramp-plus-6-line-height: 40px;
    --type-ramp-plus-6-font-variations: "wght" 400, "opsz" 36;
    /* Success Color Scheme */
    --background-success-rest: #198754;
    --background-success-hover: #157347;
    --background-success-active: #157347;
    --foreground-success-rest: #fff;
    --foreground-success-hover: #fff;
    --foreground-success-active: #fff;
    /* Warning Color Scheme */
    --background-warning-rest: #ffc107;
    --background-warning-hover: #ffca2c;
    --background-warning-active: #ffca2c;
    --foreground-warning-rest: #000;
    --foreground-warning-hover: #000;
    --foreground-warning-active: #000;
    /* Alert Color Scheme*/
    --background-alert-rest: #dc3545;
    --background-alert-hover: #bb2d3b;
    --background-alert-active: #bb2d3b;
    --foreground-alert-rest: #fff;
    --foreground-alert-hover: #fff;
    --foreground-alert-active: #fff;
    /* NOV Branding */
    --primary-text-color: light-dark(rgb(31,31,31),rgb(227,227,227));
    --body-font: Source Sans Pro,Calibri,Apple SD Gothic Neo,Helvetica,Arial;
    --nov-red: rgb(218 41 28);
    --nov-blue: rgb(0,112,150);
    --nov-gray: rgb(117,120,123);
    --accent-fill-rest: var(--nov-blue);
    --accent-fill-hover: var(--nov-blue);
    --accent-fill-active: var(--nov-blue);
    --foreground-on-accent-rest: #ffffff;
    --foreground-on-accent-hover: #ffffff;
    --foreground-on-accent-active: #ffffff;
    /* Fluent theme recommendation */
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: var(--body-font);
    line-height: var(--type-ramp-base-line-height);
    font-weight: var(--font-weight);
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-layer-rest);
}

fluent-checkbox[readonly]::part(control),
fluent-radio[readonly]::part(control),
fluent-radio[readonly]::part(label),
fluent-text-field[readonly]::part(root),
fluent-text-field[readonly]::part(start),
fluent-text-field[readonly]::part(control),
fluent-text-field[readonly]::part(end),
fluent-text-area[readonly]::part(root),
fluent-text-area[readonly]::part(start),
fluent-text-area[readonly]::part(control),
fluent-text-area[readonly]::part(end),
fluent-number-field[readonly]::part(root),
fluent-number-field[readonly]::part(start),
fluent-number-field[readonly]::part(control),
fluent-number-field[readonly]::part(end),
fluent-checkbox[disabled]::part(control),
fluent-radio[disabled]::part(control),
fluent-radio[disabled]::part(label),
fluent-text-field[disabled]::part(root),
fluent-text-field[disabled]::part(start),
fluent-text-field[disabled]::part(control),
fluent-text-field[disabled]::part(end),
fluent-text-area[disabled]::part(root),
fluent-text-area[disabled]::part(start),
fluent-text-area[disabled]::part(control),
fluent-text-area[disabled]::part(end),
fluent-number-field[disabled]::part(root),
fluent-number-field[disabled]::part(start),
fluent-number-field[disabled]::part(control),
fluent-number-field[disabled]::part(end),
fluent-select[disabled]::part(root),
fluent-select[disabled]::part(start),
fluent-select[disabled]::part(control),
fluent-select[disabled]::part(end),
fluent-button[disabled]::part(control) {
    /* Override Fluent UI distracting "not-allowed" cursor on disabled elements */
    cursor: auto !important;
}

fluent-button.outline {
    background: var(--neutral-fill-rest);
}

fluent-tooltip > div {
    word-break: break-word;
}

body[data-theme="dark"] .accent svg,
body[data-theme="dark"] button > img {
    -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
    filter: invert(100%);
}

body[data-theme="dark"] .layout-control > .sketch {
    -webkit-filter: invert(85%); /* safari 6.0 - 9.0 */
    filter: invert(85%);
}

@media (prefers-color-scheme: dark) {
    /* Workaround for data-theme="dark" not set consistently */
    /* https://github.com/microsoft/fluentui-blazor/issues/3897 */
    body:not([data-theme="light"]) .accent svg,
    body:not([data-theme="light"]) button > img,
    body:not([data-theme="light"]) fluent-button > img {
        -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
        filter: invert(100%);
    }

    body:not([data-theme="light"]) .layout-control > .sketch {
        -webkit-filter: invert(85%); /* safari 6.0 - 9.0 */
        filter: invert(85%);
    }
}

    .app {
        display: flex;
    }

        .app > .main {
            flex: 1;
            height: 100vh;
            width: 100vw;
            background: var(--fill-color);
        }

            .app > .main > .top-row > .title {
                flex: 1;
            }

            .app > .main > .top-row {
                font-size: var(--type-ramp-plus-2-font-size);
            }

            .app > .main > .content {
                height: calc(100% - 3.5rem);
                padding-top: 1.1rem;
            }


    .page {
        height: 100%;
        overflow-y: scroll;
        color: var(--primary-text-color);
        background: var(--fill-color);
    }

    .page,
    .modal-body,
    .btn,
    .btn-sm {
        font-size: var(--type-ramp-base-font-size);
        font-family: var(--body-font);
    }

    a,
    .btn-link {
        color: var(--accent-foreground-rest);
        text-decoration: underline;
        font-size: unset;
    }

        a:hover,
        .btn-link:hover {
            color: var(--accent-foreground-hover);
        }


    .bold {
        font-weight: bold;
    }

    .btn.oi, .btn-sm.oi {
        font-family: Icons;
    }

    p {
        font-size: var(--type-ramp-plus-2-font-size);
    }

    button {
        color: var(--primary-text-color);
    }

    .btn {
        border-style: none;
    }

    .btn-primary,
    .btn-primary:hover,
    .btn-primary:disabled,
    .btn-primary:not(:disabled):not(.disabled):active {
        color: var(--foreground-on-accent-rest);
        background: var(--nov-blue);
    }

        .btn-primary:focus {
            box-shadow: 0 0 0 0.2rem rgba(130,180,201,.5); /* NOV Blue 50% Tint */
        }

    .btn-secondary {
        color: #fff;
        background: var(--nov-gray);
    }


.layout-control fluent-text-field:not([disabled], [readonly])::part(root),
.layout-control fluent-text-area:not([disabled], [readonly])::part(control),
.layout-control fluent-number-field:not([disabled], [readonly])::part(root),
.layout-control fluent-select:not([disabled], [readonly])::part(control) {
    /* Provides an outline around the input to help the user to differentiate active inputs from disabled or readonly inputs */
    color: var(--primary-text-color);
    background: var(--fill-color);
    border: 1px solid var(--primary-text-color);
}

    .table-striped tbody tr:nth-of-type(odd) {
        /* Overrides the default css that ships with Blazor in _tables.scss */
        background: light-dark(rgba(31, 31, 31, .05), rgba(227, 227, 227, .05));
    }

    .table,
    .table-hover tbody tr:hover {
        /* Overrides the default css that ships with Blazor in _tables.scss */
        color: var(--primary-text-color);
        background: light-dark(rgba(31, 31, 31, .075), rgba(227, 227, 227, .075));
    }

        .table thead th {
            border-bottom: 2px solid var(--accent-fill-rest);
        }

        .table td, .table th {
            border-top: 1px solid var(--accent-fill-rest);
        }

    .valid.modified:not([type=checkbox], fluent-select),
    fluent-select.valid.modified::part(control) {
        outline: 1px solid #26b050;
    }


    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }

    .card-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
        align-items: center;
    }

    .nav-item > div {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

    div.nav-link {
        cursor: pointer;
    }

        div.nav-link:hover {
            background: rgba(255,255,255,0.1);
        }



    /* General icon buttons */
    button.oi {
        width: 25px;
        line-height: 19.2px;
        font-size: 12.8px;
        word-spacing: 9.1px; /* makes the button width approximately equal to the dropdown list caret */
        padding-block-start: 1px;
        padding-block-end: 1px;
        padding-inline-start: 6px;
        padding-inline-end: 6px;
    }

    /* Magnifying glass */
    button.magnifier {
        background: center center / 1rem no-repeat;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>');
    }


    table.quickgrid {
        table-layout: fixed;
        width: 100%;
    }

    .quickgrid th .col-options {
        background: var(--fill-color);
    }

    .quickgrid th .col-options-button {
        /* Remove default QuickGrid background, we will add our background in a pseudo element */
        background-image: unset !important;
    }

        .quickgrid th .col-options-button::after {
            content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>');
            display: inline-block;
            vertical-align: middle;
            width: 1rem;
            height: 1rem;
        }

col.col-2pc,
th.col-2pc {
    width: 2%;
}

col.col-3pc,
th.col-3pc {
    width: 3%;
}

col.col-4pc,
th.col-4pc {
    width: 4%;
}

col.col-5pc,
th.col-5pc {
    width: 5%;
}

col.col-6pc,
th.col-6pc {
    width: 6%;
}

col.col-7pc,
th.col-7pc {
    width: 7%;
}

col.col-8pc,
th.col-8pc {
    width: 8%;
}

col.col-9pc,
th.col-9pc {
    width: 9%;
}

col.col-10pc,
th.col-10pc {
    width: 10%;
}

col.col-11pc,
th.col-11pc {
    width: 11%;
}

col.col-12pc,
th.col-12pc {
    width: 12%;
}

col.col-13pc,
th.col-13pc {
    width: 13%;
}

col.col-14pc,
th.col-14pc {
    width: 14%;
}

col.col-15pc,
th.col-15pc {
    width: 15%;
}

col.col-16pc,
th.col-16pc {
    width: 16%;
}

col.col-18pc,
th.col-18pc {
    width: 18%;
}

col.col-20pc,
th.col-20pc {
    width: 20%;
}

col.col-24pc,
th.col-24pc {
    width: 24%;
}

col.col-25pc,
th.col-25pc {
    width: 25%;
}

col.col-30pc,
th.col-30pc {
    width: 30%;
}

col.col-50pc,
th.col-50pc {
    width: 50%;
}

col.col-75pc,
th.col-75pc {
    width: 75%;
}

    .quickgrid th {
        padding: 12px 0 12px 0;
    }

    .quickgrid tr {
        height: 2rem;
    }

    .quickgrid td {
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
    }

    .quickgrid[theme=default] .filtered .col-options-button,
    .quickgrid[theme=default] .filtered .search-box input,
    .quickgrid[theme=default] .filtered .search-box fluent-text-field::part(control) {
        color: var(--foreground-warning-active);
        background: var(--background-warning-active);
    }

        .quickgrid[theme=default] .filtered .col-options-button:hover {
            background: var(--background-warning-hover);
        }

    .quickgrid .search-box {
        width: 350px;
        max-height: 250px;
        overflow-y: scroll;
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quickgrid th .col-options .searchbar > input {
        width: calc(100% - 120px);
    }

    body[data-theme="dark"] .quickgrid th:not(.filtered) .col-options-button::after,
    body[data-theme="dark"] .quickgrid .col-title .sort-indicator,
    body[data-theme="dark"] .paginator nav .go-first,
    body[data-theme="dark"] .paginator nav .go-previous,
    body[data-theme="dark"] .paginator nav .go-next,
    body[data-theme="dark"] .paginator nav .go-last {
        -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
        filter: invert(100%);
    }

    body[data-theme="dark"] .quickgrid th .col-options-button {
        background-image: initial;
    }

@media (prefers-color-scheme: dark) {
    /* Workaround for data-theme="dark" not set consistently */
    /* https://github.com/microsoft/fluentui-blazor/issues/3897 */

    body:not([data-theme="light"]) .quickgrid th:not(.filtered) .col-options-button::after,
    body:not([data-theme="light"]) .quickgrid .col-title .sort-indicator,
    body:not([data-theme="light"]) .paginator nav .go-first,
    body:not([data-theme="light"]) .paginator nav .go-previous,
    body:not([data-theme="light"]) .paginator nav .go-next,
    body:not([data-theme="light"]) .paginator nav .go-last {
        -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
        filter: invert(100%);
    }

    body:not([data-theme="light"]) .quickgrid th .col-options-button {
        background-image: initial;
    }
}
    .button-container {
        padding-bottom: 3px;
    }

    .layout-component .modal {
        background: rgba(128, 128, 128, 0.75);
    }

    .layout-component .modal-dialog {
        max-width: 514px;
    }

    .layout-component .modal-content {
        color: var(--primary-text-color);
        background: var(--fill-color);
    }

    .layout-component .modal-title {
        font-size: var(--type-ramp-plus-4-font-size);
        line-height: var(--type-ramp-plus-4-line-height);
    }

    .layout-component .modal-header .close {
        /* For the close button 'X' */
        font-size: 2rem;
        outline: none;
        color: unset;
    }

    .layout-component .modal-body {
        padding: 0.5rem;
        scrollbar-gutter: stable;
    }

    .layout-component .modal-dialog-scrollable > .modal-body {
        scrollbar-gutter: stable;
    }

    .layout-component .modal-body .spinner {
        position: absolute;
    }

    .layout-component .modal-body .group-content > .layout-control.nolabel > div {
        /* make nolabel layout controls fill the dialog width */
        width: 466px;
    }

    @media (min-width: 576px) {
        /* Extends and overrides the default css that ships with Blazor in _modal.scss */
        .layout-component .modal-dialog-scrollable {
            position: absolute;
            top: 1.75rem;
            left: 1.75rem;
            min-height: calc(100% - 3.5rem);
            max-height: calc(100% - 3.5rem);
            min-width: calc(100% - 3.5rem);
            max-width: calc(100% - 3.5rem);
            padding: 1rem;
        }
    }

    .layout-component .modal-popup.fit-content .modal-dialog-scrollable {
        position: relative;
        min-width: unset;
        max-width: unset;
        left: unset;
        margin: auto;
        width: fit-content;
        max-height: unset;
        min-height: unset;
    }

    .searchbar button {
        margin-left: 5px;
    }

    .spinner {
        border: 16px solid silver;
        border-top: 16px solid rgb(0,112,150); /* NOV Blue */
        border-radius: 50%;
        width: 80px;
        height: 80px;
        animation: spin 700ms linear infinite;
        top: calc(50% - 40px);
        left: calc(50% - 40px);
        position: relative;
        display: inline-block;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg)
        }

        100% {
            transform: rotate(360deg)
        }
    }

.smart-paste-button {
    height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
    background: padding-box linear-gradient(var(--accent-fill-rest), var(--accent-fill-rest)), border-box var(--accent-stroke-control-rest);
    color: var(--foreground-on-accent-rest);
    border: calc(var(--stroke-width) * 1px) solid transparent;
    border-radius: calc(var(--control-corner-radius) * 1px);
    padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
}

    .smart-paste-button svg {
        fill: var(--neutral-layer-1) !important;
    }

    .smart-paste-button:disabled {
        opacity: var(--disabled-opacity);
    }

    form,
    .layout-component {
        --base-height-multiplier: 7;
        display: block;
    }

        .layout-component.separator-hr {
            border-top: 1px solid black;
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .layout-component.separator-vr {
            border-left: 1px solid black;
            margin-left: 0.25rem;
            margin-right: 0.25rem;
        }

        .layout-component .float-right {
            margin-left: auto;
        }

        .layout-component.control-group .group-header {
            padding-bottom: 10px;
            font-weight: 600;
        }

        .layout-component.control-group .group-content {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            gap: 1px;
        }

            .layout-component.control-group .group-content > button {
                width: fit-content;
            }

        .layout-component.tab-control {
            margin: 3px;
        }

        .layout-component.tab-content {
            outline-style: solid;
            outline-color: rgb(0,112,150); /* NOV Blue */
            padding: 6px;
            border-radius: 4px;
        }


.scrollable {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

.layout-control {
    --base-height-multiplier: 6;
    display: block;
    max-width: 394px;
    min-height: 28px;
}

    .layout-control fluent-button {
        --base-height-multiplier: 7;
    }

    .layout-control:has(> .textarea) {
        min-height: calc(4rem + 4px);
    }

    .layout-control:has(> .currency),
    .layout-control:has(> .delivery) {
        white-space: nowrap;
        display: inline-flex;
    }

    form label,
    .layout-control label {
        width: 12rem;
        vertical-align: top;
        margin-top: 3px;
        margin-bottom: 0;
        margin-right: 3px;
        padding-right: 20px; /* Allow space for feature messages icon */
        text-wrap: wrap;
    }

    .layout-control fluent-checkbox {
        margin-top: 3px;
    }

    .layout-control fluent-text-field,
    .layout-control fluent-text-area {
        border-radius: calc(var(--control-corner-radius) * 1px);
    }

    form input.uppercase,
    form .uppercase::part(control) {
        text-transform: uppercase;
    }

    .layout-control .feature-messages {
        background: lightgray;
        width: 10rem;
        padding: 3px;
        border: 1px solid;
        border-radius: 2px;
        margin-bottom: 3px;
    }

    .layout-control .sketch img {
        display: block;
        margin: auto;
    }

.layout-control.w100pc:has(.icon-container-left) {
    /* Leave space for the icon */
    padding-left: 24px;
}

.layout-control.w100pc:has(.icon-container-right) {
    /* Leave space for the icon */
    padding-right: 24px;
}

.layout-control .icon-container-top {
    float: right;
    position: relative;
    height: 0px;
    top: -20px;
}

.layout-control .icon-container-left {
    position: relative;
    height: 0px;
    width: 20px;
    left: -20px;
    top: 2px;
}
    .layout-control .icon-container-left.secondary:has(+ .icon-container-left) {
        /* Move left secondary icon further left when there is a primary icon already in the left position */
        left: -40px;
    }

.layout-control .checkbox .icon-container-right {
    position: relative;
    height: 0px;
    width: 20px;
    left: 24px;
    top: 2px;
}

.layout-control > .radiobuttons > fluent-radio-group[orientation="vertical"] fluent-radio + fluent-radio {
    /* fluent-radio normally have margin top and bottom, remove margin from the second and subsequent items to keep options compact */
    margin-top: 0px;
}

.layout-control > .checkbox,
.layout-control > .radiobuttons,
.layout-control > .textbox,
.layout-control > .textarea,
.layout-control > .combobox,
.layout-control > .datepicker,
.layout-control > .price-control,
.layout-control > .delivery-control,
.layout-control > .currency,
.layout-control > .delivery,
.layout-control > .fluent-autocomplete-multiselect {
    display: inline-block;
    width: 12rem;
}

    .layout-control > .textbox > fluent-text-field::part(root),
    .layout-control > .textarea > fluent-text-area::part(control),
    .layout-control > .combobox > fluent-select,
    .layout-control > .combobox > fluent-text-field::part(root),
    .layout-control > .datepicker > fluent-text-field.fluent-datepicker,
    .layout-control > .currency > fluent-number-field,
    .layout-control > .delivery > fluent-number-field {
        min-width: unset;
        width: 12rem;
    }

    .layout-control > .currency > fluent-select {
        width: 6rem;
    }

    .layout-control > .combobox > fluent-select::part(listbox) {
        /* Ensures the drop down remains at a satisfactory width, even if the combobox is reduced */
        min-width: 12rem;
        width: fit-content;
    }

    .layout-control > .currency > fluent-select::part(control),
    .layout-control > .delivery > fluent-select::part(control) {
        width: 6rem;
    }

.scrollable .checkbox,
.scrollable .radiobuttons,
.scrollable .currency > fluent-number-field,
.scrollable .delivery,
.scrollable .textbox,
.scrollable .textbox > fluent-text-field::part(root),
.scrollable .textarea,
.scrollable .textarea > fluent-text-area::part(control),
.scrollable .combobox,
.scrollable .combobox > fluent-select,
.scrollable .combobox > fluent-text-field::part(root) {
    /* Slightly narrower controls to allow for the scrollbar width */
    width: calc(12rem - 17px);
}
    .scrollable .combobox > fluent-select::part(listbox) {
        /* Ensures the drop down remains at a satisfactory width, even if the combobox is reduced */
        min-width: calc(12rem - 17px);
    }

fluent-accordion-item .checkbox,
fluent-accordion-item .radiobuttons,
fluent-accordion-item .currency,
fluent-accordion-item .delivery,
fluent-accordion-item .textbox,
fluent-accordion-item .textbox > fluent-text-field::part(root),
fluent-accordion-item .textarea,
fluent-accordion-item .textarea > fluent-text-area::part(control),
fluent-accordion-item .combobox,
fluent-accordion-item .combobox > fluent-select,
fluent-accordion-item .combobox > fluent-text-field::part(root) {
    /* Slightly narrower controls to allow for the scrollbar width */
    width: calc(12rem - 18px);
}

.layout-control .textbox.hyperlink {
    margin-top:3px;
}

.layout-control.label-right label {
    margin-left: 3px;
    width: fit-content;
}

.layout-control.label-right .checkbox {
    float: left;
    width: fit-content;
}

.layout-control .datepicker svg {
    width: 16px;
    fill: var(--accent-fill-rest);
    cursor: pointer;
}
    fluent-text-area::part(control),
    .layout-control .textarea textarea {
        width: 12rem;
        min-height: 4rem;
        scrollbar-gutter: stable;
    }

    fluent-select::part(control) {
        width: 12rem;
    }

    .layout-control > .checkbox input {
        vertical-align: middle;
        width: unset;
    }

    .layout-control.w100pc > .checkbox,
    .layout-control.w100pc > .textbox,
    .layout-control.w100pc > .combobox{
        width: 100%;
    }

        .layout-control.w100pc > .textbox > fluent-text-field,
        .layout-control.w100pc > .textbox > fluent-text-field::part(root),
        .layout-control.w100pc > .textarea > fluent-text-area,
        .layout-control.w100pc > .textarea > fluent-text-area::part(control),
        .layout-control.w100pc > .combobox > fluent-select,
        .layout-control.w100pc > .combobox > fluent-select::part(control),
        .layout-control.w100pc > .combobox > fluent-text-field,
        .layout-control.w100pc > .combobox > fluent-text-field::part(root) {
            width: 100%;
        }

        .layout-control.w100pc > .textbox.with-button > input {
            width: calc(100% - 25px);
        }

    .group-content > .layout-control.nolabel input,
    .group-content > .layout-control.nolabel textarea,
    .group-content > .layout-control.nolabel .feature-messages {
        width: 100%;
    }


.layout-control .radiobuttons fluent-radio.choice.constrained,
.layout-control .radiobuttons fluent-radio.choice.invalid {
    opacity: var(--disabled-opacity);
    outline: none;
}

.layout-control .radiobuttons fluent-radio.choice.checked.constrained {
    outline: 1px solid var(--background-warning-rest);
}

.layout-control .radiobuttons fluent-radio.choice.checked.invalid {
    outline: 1px solid var(--background-alert-rest);
}

.layout-control fluent-select.feature.null::part(control),
.layout-control fluent-text-field.feature.null::part(root),
.layout-control fluent-text-area.feature.null::part(control) {
    /* Not expected to be seen, intended to alert developers */
    background: violet;
}

.layout-control fluent-select.feature.value-invalid::part(control),
.layout-control fluent-text-field.feature.value-invalid::part(root),
.layout-control fluent-text-area.feature.value-invalid::part(control) {
    outline: 1px solid var(--background-alert-rest);
}

.layout-control fluent-select.feature.value-constrained::part(control),
.layout-control fluent-text-field.feature.value-constrained::part(root),
.layout-control fluent-text-area.feature.value-constrained::part(control) {
    outline: 1px solid var(--background-warning-rest);
}

        .layout-control .textbox .modal-popup > fluent-button {
            color: var(--primary-text-color);
            background: var(--neutral-fill-stealth-hover);
            width: 28px;
            height: unset;
        }

        .layout-control .textbox .modal-popup > fluent-button::part(control) {
            display: none;
        }

        .layout-control fluent-option.choice.default {
            background: var(--background-success-rest);
            color: var(--foreground-success-rest);
        }

        .layout-control fluent-option.choice.current {
            font-weight: 700;
        }

        .layout-control fluent-option.choice.constrained{
            background: var(--background-warning-rest);
            color: var(--foreground-warning-rest);
        }

        .layout-control fluent-option.choice.invalid {
            outline: unset;
            background: var(--background-alert-rest);
            color: var(--foreground-alert-rest);
        }

fluent-number-field::part(controls) {
    height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
}
    fluent-number-field::part(step-up) {
        padding-top: 0px;
        height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 0.5px);
    }
    fluent-number-field::part(step-down) {
        padding-top: 0px;
        height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 0.5px);
    }

fluent-checkbox::part(control) {
    /* FluentSwitch requires the default height multiplier value to display correctly */
    --base-height-multiplier: 8;
    /* Scale is achieved using transform workaround */
    --checkbox-scale: 0.7;
    transform: scale(var(--checkbox-scale));
}

fluent-radio-group {
    /* FluentRadioGroup requires the default height multiplier value to display correctly */
    --base-height-multiplier: 8;
}
fluent-radio::part(control) {
    /* Scale is achieved using transform workaround */
    --radiobutton-scale: 0.7;
    transform: scale(var(--radiobutton-scale));
}

fluent-switch::part(switch) {
    /* FluentSwitch requires the default height multiplier value to display correctly */
    /* https://github.com/microsoft/fluentui-blazor/issues/1820 */
    --base-height-multiplier: 8;
    /* Scale is achieved using transform workaround */
    --switch-scale: 0.8;
    transform: scale(var(--switch-scale));
    margin: calc(10px*(var(--switch-scale) - 1)) calc(20px*(var(--switch-scale) - 1));
}

    .design-messages .panel {
        display: block;
        word-break: break-word;
        white-space: normal;
        border: 1px solid;
        border-radius: 5px;
        padding: 6px 10px 6px 10px;
        margin: 0 0 4px 0;
        padding-bottom: 6px;
    }

        .design-messages .panel.alert {
            color: light-dark(var(--primary-text-color), #fff8f7);
            background: light-dark(#fff8f7, #272727);
            border-color: #d04437;
        }

        .design-messages .panel.warning {
            color: light-dark(var(--primary-text-color), #fffdf6);
            background: light-dark(#fffdf6, #272727);
            border-color: #ff9633;
        }

        .design-messages .panel.info {
            color: light-dark(var(--primary-text-color), #d6e5ff);
            background: light-dark(#d6e5ff, #272727);
            border-color: #77a9ff;
        }

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

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