/* Style set: shared */

/******************** /global.css ********************/


* {
    box-sizing: border-box;

    /* For Google Chrome */
    ::-webkit-scrollbar {
        width: var(--scrollbar-width);
        height: var(--scrollbar-width);
    }

    ::-webkit-scrollbar-thumb {
        min-height: 50px;
        border-radius: 1rem;
        border: 3px solid var(--color-page-scrollbar-bg);
        background-color: var(--color-page-scrollbar-fg);
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--color-page-scrollbar-hover-fg);
    }

    ::-webkit-scrollbar-track {
        background-color: var(--color-page-scrollbar-bg);
    }

}

html {
    font-family: var(--page-font-family);
    scroll-padding-top: 10rem;
}

body {
    margin: 0;
    transition: var(--transition-basic);
    background-color: var(--color-page-bg);
    color: var(--color-page-text);
}

form {
    margin: 0;
}

a {
    text-decoration: none;
    color: var(--color-page-link);

    &:hover {
        text-decoration: underline;
        color: var(--color-page-link-hover);
    }
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
    font-family: Montserrat;
    font-weight: normal;
}

h1 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
h2 {
    font-size: 1.3rem;
}
h3 {
    font-size: 1.2rem;
}

th {
    text-align: left;
}

hr {
    border: none;
    border-top: 1px solid var(--color-page-hairline);

    &.TopMargin {
        margin-top: 1rem;
    }
    &.BottomMargin {
        margin-bottom: 1rem;
    }
}

.DisplayNone {
    display: none;
}

.NotMobile {
    @media (max-width: 560px /* $mobile-breakpoint */) {
        display: none;
    }
}

.OnlyMobile {
    @media (min-width: 560px /* $mobile-breakpoint */) {
        display: none !important;
    }
}

.Bold {
    font-weight: bold;
}

.Italics {
    font-style: italic;
}

.Underlined {
    text-decoration: underline;
}

.Strikethrough {
    text-decoration: line-through;
}

.Monospace {
    font-family: 'Courier New', Courier, monospace;
}

.CenteredText {
    text-align: center;

    &>*:not(.CenteredText) {
        text-align: initial;
    }
}

.RightText {
    text-align: right;

    &>* {
        text-align: initial;
    }
}

.SoftText {
    color: var(--color-page-text-soft);
}
.BarelyText {
    color: var(--color-page-text-barely);
}

.PositiveText {
    color: var(--color-sentiment-positive-solid-bg);
}
.WarningText {
    color: var(--color-sentiment-warning-solid-bg);
}
.NegativeText {
    color: var(--color-sentiment-negative-solid-bg);
}

.SmallText {
    font-size: 0.8em;

    &.MarginLeft {
        margin-left: 0.15em;
    }
    &.MarginRight {
        margin-right: 0.15em;
    }
}

.Ghost {
    opacity: 0.6;
}

.NoWrap {
    white-space: nowrap;
}

.WordBreakWord {
    word-break: break-word;
}
.WordBreakAll {
    word-break: break-all;
}

.TopMargin {
    margin-top: 1em;
}

.BottomMargin {
    margin-bottom: 1em;
}

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

    &.Inline {
        display: inline-flex
    }

    &.Gap {
        gap: 1rem;
    }
}

.FlexRow {
    display: flex;
    flex-direction: row;

    &.Inline {
        display: inline-flex
    }

    &.Gap {
        gap: 1rem;
    }
}

.FlexRowWrap {
    display: flex;
    flex-wrap: wrap;

    &.Inline {
        display: inline-flex
    }

    ;
}

.FlexGrow {
    flex-grow: 1;
}

.FlexGrow2 {
    flex-grow: 2;
}

.FlexGrow3 {
    flex-grow: 3;
}

.FlexCentered {
    align-items: center;
    justify-content: center;
}

@media (max-width: 560px /* $mobile-breakpoint */) {
    .FlexColumnForMobile {
        flex-direction: column;
    }
}

.InlineIconLeft {
    margin-right: 0.25em;
    font-size: 0.8em;
}

.InlineIconRight {
    margin-left: 0.25em;
    font-size: 0.8em;
}

.WrappedControls {
    &>* {
        margin-bottom: 0.5rem;

        &:not(:last-child) {
            margin-right: 0.4rem;
        }
    }

    &.MarginTop {
        margin-top: 0.5rem;
    }
}

.Toaster {
    position: absolute;
    z-index: 999998;

    div.Toast {
        border: 1px solid black;
        box-shadow: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.3);

        &.info {
            border-color: rgb(194, 194, 194);
        }

        &.success {
            background-color: rgb(82, 151, 82);
            border-color: rgb(137, 226, 19);
            color: white;
        }

        &.warning {
            background-color: rgb(211, 162, 0);
            border-color: rgb(238, 218, 107);
            color: white;
        }

        &.error {
            background-color: rgb(161, 40, 40);
            border-color: rgb(226, 90, 66);
            color: white;
        }

    }
}

.FlatMessage {
    display: block;
    position: relative;
    width: 50vw;
    max-width: 30rem;
    margin: 2rem auto;
    padding: 2rem 3rem;
    border-radius: 1rem;
    background-color: var(--color-page-bg);
    color: var(--color-page-text);
    border: 1px solid var(--color-page-hairline);
    box-shadow: 0rem 0.25rem 2rem var(--color-page-shadow);

    &.AlignLeft {
        margin-left: 0;
    }

    &.TopMargin {
        margin-top: 5rem;
    }

    &.Wide {
        width: 70vw;
        max-width: 50rem;
    }

    p a {
        text-decoration: underline;
    }

    @media (max-width: 800px /* $small-breakpoint */) {
        width: 100%;
    }

    &.Success {
        border-width: 2px;
        color: var(--color-sentiment-positive-solid-bg);
        border-color: var(--color-sentiment-positive-soft-bg);
    }

    &.Warning {
        border-width: 2px;
        color: var(--color-sentiment-warning-solid-bg);
        border-color: var(--color-sentiment-warning-soft-bg);
    }

    &.Error {
        border-width: 2px;
        color: var(--color-sentiment-negative-solid-bg);
        border-color: var(--color-sentiment-negative-soft-bg);
    }

    .Hider {
        position: absolute;
        bottom: 0.75rem;
        right: 1.5rem;
    }

}

.ReactCodeMirror {
    width: 100%;
    display: flex;

    .cm-editor {
        width: 0;
        flex-grow: 1;
    }
}

.VisibleLinks {
    a {
        text-decoration: underline;
    }
}

.SeparatedBullets {
    li {
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
    }
}

.HighlightText {
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    border-radius: 0.25rem;
    color: black;
    background-color: rgb(255, 255, 159);

    &.Level2 {
        background-color: rgb(194, 255, 159);
    }

    &.Level3 {
        background-color: rgb(255, 217, 159);
    }

    &.Level4 {
        background-color: rgb(159, 255, 231);
    }

    &.Level4 {
        background-color: rgb(255, 159, 159);
    }

    &.Level5 {
        background-color: rgb(159, 197, 255);
    }
}

.Currency {

    .Symbol {
        font-size: 0.9em;
    }

    .Code {
        margin-left: 0.25em;
        font-size: 0.8em;
    }

}

.Bandwidth {

    .Units {
        margin-left: 0.15em;
        font-size: 0.8em;
    }

}

.ZingText {
    color: var(--color-contrast-block-zing);
}

.LabeledValues {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 0.25rem;

    &.Ladder {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: normal;
    }

    .StateIcons {
        display: inline-block;
        display: flex;
        align-items: flex-end;
        gap: 0.5rem;
        justify-content: center;
        height: 1.4rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        color: var(--color-contrast-block-bg);
    }
}

.LabeledValue {
    display: inline-block;
    margin-top: 0.25rem;
    border: 1px solid transparent;
    border-radius: 1rem;

    &.TopLined {
        width: 100%;
        margin-top: 0.5rem;
        padding-top: 0.25rem;
        border-radius: 0;
        border-top: 1px dashed var(--color-page-hairline);

        label {
            display: block;
            margin-bottom: 0.25rem;
        }
    }

    &>label {
        font-size: smaller;
        margin-right: 0.5rem;
    }

    &.Positive, &.Warning, &.Negative {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        border-color: var(--color-sentiment-positive-soft-text);
        background-color: var(--color-sentiment-positive-soft-bg);
    }
    &.Warning {
        border-color: var(--color-sentiment-warning-soft-text);
        background-color: var(--color-sentiment-warning-soft-bg);
    }
    &.Negative {
        border-color: var(--color-sentiment-negative-soft-text);
        background-color: var(--color-sentiment-negative-soft-bg);
    }

}


.CondExpr {
    .Symbol {
        color: black;
    }
    .Reserved {
        color: black;
    }
    .Name {
        color: rgb(0, 145, 12);
    }
    .Number {
        color: rgb(184, 52, 0);
    }
    .Constant {
        color: rgb(184, 52, 0);
    }
    .ParseErrorPos {
        border-left: 3px solid red;
    }
    .ParseError {
        padding: 0.25rem 0.5rem;
        background-color: rgb(253, 232, 232);
        color: rgb(176, 0, 0);
        border-radius: 0.5rem;
    }
}

/* CodeMirror 6 */
.cm-editor {
    width: 100%;
}


/******************** /client-style/client-colors.css ********************/


.BasicPage,
.ClientPage {

    --client-color-plan-tile-bg: var(--color-page-bg-soft);
    --client-color-plan-tile-text: var(--color-page-text);
    --client-color-plan-tile-rim: var(--color-page-hairline);
    --client-color-plan-tile-link: var(--color-page-link);
    --client-color-plan-tile-link-hover: var(--color-page-link-hover);

}

/*--------------------------------------------------------------------------------*/
.ClientPage { @media (prefers-color-scheme: dark) {

    --client-color-plan-tile-bg: var(--color-page-bg-soft);
    --client-color-plan-tile-text: var(--color-page-text);
    --client-color-plan-tile-rim: var(--color-page-hairline);
    --client-color-plan-tile-link: var(--color-page-link);
    --client-color-plan-tile-link-hover: var(--color-page-link-hover);

} }


/******************** /components/DataGrid.css ********************/

.DataGrid {

    .TopBar {
        padding-bottom: 1rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;

        &.WithUnderFilterBar {
            padding-bottom: 0;
        }

        &.Bottom {
            padding-top: 1rem;
            padding-bottom: 0rem;
        }

        @media (max-width: 560px /* $mobile-breakpoint */) {
            flex-direction: column;
        }

        @media (min-width: 560px /* $mobile-breakpoint */) {
            .InputHarness {

                .Input {
                    height: 2rem;
                    border-radius: 0;
                }

                .BeforeInput,
                .AfterInput {
                    color: var(--color-contrast-block-bg);
                }
            }
        }

        .Button {
            background-color: var(--color-control-bg);
            color: var(--color-contrast-block-bg);
            border-radius: 2rem;

            &:hover:not([disabled]) {
                background-color: var(--color-contrast-block-bg);
                color: var(--color-control-bg);
            }

            &[disabled] {
                color: var(--color-page-text-barely);
                border-color: var(--color-page-text-barely);
            }
        }
    }

    .UnderFilterBar {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;

        .Button {
            border-radius: 1rem;
        }
    }

    .Paging {
        flex-grow: 1;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .PageSummary {
            margin-left: 0.5rem;
            font-size: 0.8rem;
            color: var(--color-page-text-soft);
        }

        .InputHarness {
            margin-left: 0.25rem;
        }

        .Input.Bordered {
            padding: 0 0.2rem;
            border-radius: 2rem;

            @media (max-width: 560px /* $mobile-breakpoint */) {
                height: 2.5rem;
            }
        }

        .Button {
            margin-right: 0.25rem;
            padding: 0;
            width: 2rem;
            border-radius: 2rem;

            @media (max-width: 560px /* $mobile-breakpoint */) {
                width: 2.5rem;
            }

            &:disabled {
                color: var(--color-page-text-soft);
            }

            &:focus {
                outline-color: var(--color-control-focus-rim);
            }
        }

    }

    .Content {
        &.OverflowWidth {
            overflow-x: auto;
        }
    }

    table.GridTable {
        border-collapse: collapse;

        th {

            div.Sleeve {
                display: flex;
                align-items: center;

                &:not(:first-child) {
                    margin-top: 0.5rem;
                }
            }

            &.AlignCenter {
                .Sleeve {
                    justify-content: center;
                }
            }

            &.AlignRight {
                .Sleeve {
                    justify-content: end;
                    flex-direction: row-reverse;
                }
            }

            .Sorter {
                font-size: 0.9rem;
                padding: 0 0.2rem;
                color: var(--color-page-text-soft);

                svg {
                    margin-bottom: -0.2rem;
                }

                &.SortingThis {
                    color: var(--color-page-text);
                }
            }
        }

        .Loading div {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem;

            svg {
                margin-right: 0.25rem;
            }
        }

        .NoRows div {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem;
            font-style: italic;
        }
    }

    &.SelectList {

        .Content {

            .GridTable {
                width: 100%;
                cursor: default;
            }

            tr.DataRow,
            div.DataRow {
                padding: 0.5rem;

                &.Disabled {
                    opacity: 0.5;
                }

                td {
                    padding: 0.5rem;
                }

                &.Selected {
                    background-color: var(--color-contrast-block-bg);
                    color: var(--color-contrast-block-text);
                }

                &:hover {
                    background-color: var(--color-page-hover-bg);
                }

                &:not(:first-child) {
                    border-top: 1px solid var(--color-page-hairline);
                }

            }

        }
    }

    &.BasicTable {

        .Content {
            display: inline-block;
        }
        &.FullWidth > .Content {
            display: block;
        }

        .GridTable {
            width: 100%;
            border: 1px solid var(--color-page-hairline);

            caption {
                margin-bottom: 0.25rem;
                padding: 0 0.5rem;
                font-size: 1.2rem;
                font-weight: bold;
                text-align: left;
            }

            th {
                padding: 0.5rem;
                text-align: left;
                border-top: 1px solid var(--color-page-hairline);
            }

            tr.DataRow,
            div.DataRow,
            tfoot>tr {
                /*padding: 0.5rem;*/
                border-bottom: 1px solid var(--color-page-hairline);

                &.Selected {
                    background-color: var(--color-page-bg-soft);
                }

                &:hover:not(.Disabled) {
                    background-color: var(--color-page-hover-bg);
                }

                &.Disabled {
                    opacity: 0.5;
                }

                &>td {
                    padding: 0.5rem;

                    .SubCell {
                        &:not(:first-child) {
                            margin-top: 0.5rem;
                        }
                    }

                    ul {
                        margin-top: 0;
                        margin-bottom: 0;
                    }

                    &.AlignLeft {
                        text-align: left;
                    }

                    &.AlignCenter {
                        text-align: center;
                    }

                    &.AlignRight {
                        text-align: right;
                    }

                    &.Actions {
                        white-space: nowrap;

                        &>.Button {
                            padding: 0 0.5rem;

                            &:not(:first-child) {
                                border-left: none;
                            }

                            &:not(:hover) {
                                &:not(:first-child) {
                                    border-top-left-radius: 0;
                                    border-bottom-left-radius: 0;
                                }
                                &:not(:last-child) {
                                    border-top-right-radius: 0;
                                    border-bottom-right-radius: 0;
                                }
                            }

                            &:hover:not(:disabled) {
                                background-color: var(--color-contrast-block-hover-bg);
                                color: var(--color-contrast-block-text);
                            }

                        }
                    }
                }

                &:first-child {
                    border-top: 1px solid var(--color-page-hairline);
                }
            }
        }

        &.HoverHighlight {
            .GridTable {
                cursor: default;

                tr.DataRow,
                div.DataRow {
                    &:hover {
                        background-color: var(--color-page-hover-bg);
                    }
                }
            }
        }
    }

    div.GridTable.AsBullets {

        ul.DataRow {
            margin: 0;
            padding-left: 0;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--color-page-hairline);
            color: var(--color-page-text-soft);
            list-style: none;

            &:first-child {
                border-top: 1px solid var(--color-page-hairline);
            }

            & > li {
                padding-top: 0.3rem;
                padding-bottom: 0.3rem;
                padding-left: 6.5rem;
                text-indent: -3.25rem;

                & > label {
                    display: inline-block;
                    min-width: 3rem;
                    font-size: 0.85rem;
                    padding-right: 0.5rem;
                }

                & > span {
                    color: var(--color-page-text);
                }
            }
        }

    }

}


/******************** /components/action/Button.css ********************/

.Button:not(.Blank) {
    font-size: 0.9rem;
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 0rem 0.8rem;
    height: 2rem;
    border-radius: 0.3rem;
    transition: all 0.1s ease-in-out;
    text-decoration: none;
    font-family: var(--page-font-family);
    font-size: 0.9rem;
    white-space: nowrap;
    color: var(--color-control-text);

    /* Default flavor: Hollow */
    background-color: transparent;
    border: 1px solid var(--color-control-rim);

    &.ToggledOn {
        background-color: var(--color-contrast-block-bg);
        color: var(--color-contrast-block-text);
        border: 1px solid var(--color-contrast-block-bg);
    }

    @media (pointer: coarse) {
        min-height: 2.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    &:hover {
        background-color: var(--color-page-hover-bg);
    }

    &:disabled {
        background-color: transparent;
        color: var(--color-page-text-soft);
        border-color: var(--color-page-hairline);
    }

    &.Hazard {
        color: var(--color-sentiment-negative-solid-bg);
        border-color: var(--color-sentiment-negative-solid-bg);

        &:hover {
            color: red;
            border-color: red;
        }
    }

    &.Warning {
        color: var(--color-sentiment-warning-solid-bg);
        border-color: var(--color-sentiment-warning-solid-bg);

        &:hover {
            color: orange;
            border-color: orange;
        }
    }

    &.Solid {
        background-color: var(--color-contrast-block-bg);
        color: var(--color-contrast-block-text);
        border: 1px solid var(--color-contrast-block-bg);

        &:hover {
            background-color: var(--color-contrast-block-hover-bg);
            border-color: var(--color-contrast-block-hover-bg);
        }

        &:disabled {
            background-color: var(--color-contrast-block-disabled-bg);
            border-color: var(--color-contrast-block-disabled-bg);
        }

        &.Hazard {
            color: var(--color-sentiment-negative-solid-text);
            background-color: var(--color-sentiment-negative-solid-bg);
            border-color: var(--color-sentiment-negative-solid-bg);
            &:hover {
                background-color: red;
                border-color: red;
            }
        }

        &.Warning {
            color: var(--color-sentiment-warning-solid-text);
            background-color: var(--color-sentiment-warning-solid-bg);
            border-color: var(--color-sentiment-warning-solid-bg);
            &:hover {
                background-color: orange;
                border-color: orange;
            }
        }
    }

    &.Link {
        height: auto;
        background-color: transparent;
        color: var(--color-page-link);
        border: none;
        font-weight: normal;
        cursor: pointer;

        @media (pointer: fine) {
            padding: 0;
        }

        &:hover {
            color: var(--color-page-link-hover);
            text-decoration: underline;
        }

        label {
            cursor: pointer;
        }
    }

    &.MenuItem {
        display: flex;
        justify-content: flex-start;
        min-height: 3rem;
        padding: 0.5rem 0.75rem;
        border: 0;
        border-radius: 0;
        color: var(--color-page-text);

        &:hover {
            background-color: var(--color-contrast-block-hover-bg);
            color: var(--color-contrast-block-text);
        }
    }

    &>.Inliner {
        overflow: hidden;
        width: 0;
    }

    &.MarginLeft {
        margin-left: 0.3rem;
    }

    &.MarginRight {
        margin-right: 0.3rem;
    }

    &.MarginBottom {
        margin-bottom: 0.5rem;
    }

    &>.Icon {
        &.Left {
            &:not(:last-child) {
                margin-right: 0.3rem;
            }
        }

        &.Right {
            margin-left: 0.3rem;
        }

        &.Second {
            display: none;
        }
    }

    &.SecondIcon > .Icon {
        &.Second {
            display: inline-flex;
        }
        &:not(.Second) {
            display: none;
        }
    }

    &>.DropDown {
        display: flex;
        align-items: center;
        margin-left: 0.5rem;
        margin-right: -0.4rem;
    }

    &>.BusySpinner {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    &:not(.Busy)>*.BusySpinner {
        visibility: hidden;
    }

    &.Busy>*:not(.BusySpinner) {
        visibility: hidden;
    }

    &.Select {
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;

        select {
            font-size: 0.9rem;
            border: none;
            background-color: transparent;
            height: 1.7rem;
        }

    }

}

/******************** /components/action/Spinner.css ********************/

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

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

.Spinner {
    animation-name: SpinnerSpin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: steps(8);
}

.SpinnerBlock {
    font-size: 2.5rem;
    padding: 3rem;
    text-align: center;
    color: var(--color-page-text-soft);
}

/******************** /components/action/TabBar.css ********************/


.TabBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--color-page-hairline);

    @media (max-width: 560px /* $mobile-breakpoint */) {
        overflow: auto;
        justify-content: flex-start;
    }

    &.ForHeader {
        justify-content: center;
        position: sticky;
        top: 0;
        margin-top: -2rem;
        margin-bottom: 2rem;
        margin-left: -2rem;
        margin-right: -2rem;
        padding-top: 1rem;
        z-index: 100;
        box-shadow: 0rem 0rem 0.75rem rgba(0, 0, 0, 0.2);
        background-color: var(--color-page-bg);
    }

    &.MarginBottom {
        margin-bottom: 1.5rem;
    }

    .Band {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        @media (max-width: 560px /* $mobile-breakpoint */) {
            flex-wrap: nowrap;
        }
    }

    .Tab {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem;
        padding-left: 1rem;
        padding-right: 1rem;
        font-family: var(--page-font-family);
        font-size: 0.9rem;
        text-decoration: none;
        white-space: nowrap;
        transition: var(--transition-basic);
        border: none;
        border-bottom: 4px solid transparent;
        background-color: transparent;
        color: var(--color-contrast-block-bg);

        &[disabled] {
            color: var(--color-page-text-soft);
        }

        &.Selected {
            border-bottom-color: var(--color-contrast-block-bg);
        }

        .Icon {
            margin-right: 0.3rem;
        }

        @media (min-width: 560px /* $mobile-breakpoint */) {
            &:hover:not([disabled]) {
                border-bottom-color: var(--color-contrast-block-zing);
            }
        }

    }

    &.Stretch {
        .Tab {
            flex-grow: 1;
        }
    }

}


/******************** /components/action/Toolbar.css ********************/


.Toolbar {
    display: flex;
    font-size: 0.9rem;
    align-items: center;

    @media (max-width: 560px /* $mobile-breakpoint */) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    &.Inline {
        display: inline-flex;
        margin-right: 0.5rem;
    }

    &.Centered {
        justify-content: center;
    }

    &.MarginBottom {
        margin-bottom: 1rem;
    }

    &>.Band {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 2rem;
        border: 1px solid var(--color-control-rim);
        box-shadow: 0rem 0rem 0.75rem rgba(0, 0, 0, 0.1);
        overflow: hidden;

        @media (max-width: 560px /* $mobile-breakpoint */) {
            flex-grow: 1;
            margin-left: var(--mobile-horizontal-unpadding);
            margin-right: var(--mobile-horizontal-unpadding);
            padding-left: 0;
            padding-right: 0;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            border-radius: 0;
            border-left: none;
            border-right: none;
            box-shadow: none;
        }

        &>.Button, .ToolbarButton {
            justify-content: center;
            height: 2.3rem;
            border-radius: 0;
            border: none;
            background-color: transparent;
            color: var(--color-contrast-block-bg);

            @media (max-width: 560px /* $mobile-breakpoint */) {
                height: 3rem;
                margin: 1px;
                border-radius: 0.3rem;
                border: 1px solid var(--color-control-rim);
            }

            &:first-child {
                padding-left: 1.25rem;
            }

            &:last-child {
                padding-right: 1.25rem;
            }

            &[disabled] {
                color: var(--color-contrast-block-disabled-bg);
            }

            &:hover {
                background-color: var(--color-page-hover-bg);
            }

            &.ToggledOn {
                background-color: var(--color-contrast-block-bg);
                color: var(--color-contrast-block-text);
            }

            &.Solid {
                background-color: var(--color-contrast-block-bg);
                color: var(--color-contrast-block-text);
            }
        }

    }

    /* The header's toolbar has a different style than the others */
    &.ForHeader {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        margin-bottom: 1rem;

        &>.Band {
            padding: 0rem 2rem;
            border-radius: 2.1rem;
            border: 1px solid var(--color-control-rim);

            @media (max-width: 560px /* $mobile-breakpoint */) {
                flex-grow: 1;
                margin-left: var(--mobile-horizontal-unpadding);
                margin-right: var(--mobile-horizontal-unpadding);
                padding: 0rem;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                border-radius: 0;
                border-left: none;
                border-right: none;
                box-shadow: none;
            }

            &>.Button, .ToolbarButton {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                height: 4rem;
                min-width: 5rem;
                padding-left: 0.75rem;
                padding-right: 0.75rem;
                padding-bottom: 0.75rem;
                border-radius: 0;
                border: none;
                background-color: transparent;
                color: var(--color-contrast-block-bg);
                font-size: 1.5rem;

                @media (max-width: 560px /* $mobile-breakpoint */) {
                    margin: 1px;
                    border-radius: 0.3rem;
                    border: 1px solid var(--color-control-rim);
                }

                &[disabled] {
                    color: var(--color-contrast-block-disabled-bg);
                }

                .Inliner {
                    display: none;
                }

                label {
                    font-size: 0.8rem;
                    visibility: visible !important; /* Looks funny without the label when they are stacked */
                }

                @media (min-width: 560px /* $mobile-breakpoint */) {
                    &:hover:not([disabled]) {
                        background-color: var(--color-page-hover-bg);
                    }
                }

            }
        }

        &.MinWidths>.Button, &.MinWidths .ToolbarButton {
            min-width: auto;
        }

    }

}

/******************** /components/app/BrandTile.css ********************/


.BrandTiles {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, 28rem);
    column-gap: 0.75rem;
    row-gap: 1.5rem;

    @media (max-width: 560px /* $mobile-breakpoint */) {
        grid-template-columns: 100%;
        column-gap: 0;
        row-gap: 0;
    }

}

.BrandTile {
    padding: 0.5rem 1rem;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--color-page-hairline);
    background-color: transparent;
    transition: 0.2s all ease-in-out;
    box-shadow: none;

    @media (max-width: 560px /* $mobile-breakpoint */) {
        padding: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 0;
        border: none;
        border-top: 4px solid var(--color-page-hairline);
    }

    @media (min-width: 560px /* $mobile-breakpoint */) {
        &:hover {
            scale: 1.02;
            background: linear-gradient(var(--color-page-bg-soft), var(--color-page-bg));
            box-shadow: 0 0.5rem 1.5rem var(--color-page-shadow-soft);
            border-color: var(--color-page-link);
        }
    }

    .BrandListing {
        @media (max-width: 560px /* $mobile-breakpoint */) {
            display: flex;
            flex-direction: column;
        }
    }

    .HeaderBar {
        display: flex;
        flex-direction: row;

        @media (max-width: 560px /* $mobile-breakpoint */) {
            flex-direction: column;
        }

        header {

            .LogoBox {
                display: inline-block;
                margin-left: -1rem;
                margin-top: -0.5rem;
                margin-bottom: 0.25rem;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                padding-left: 1rem;
                padding-right: 1.25rem;
                border-bottom-right-radius: 1.5rem;
                background-color: white;
                font-family: Montserrat;
                font-size: 1.2rem;
                font-weight: bold;
                color: black;

                @media (max-width: 560px /* $mobile-breakpoint */) {
                    margin: 0;
                    margin-bottom: 0.5rem;
                    border-radius: 0.25rem;
                    border-top-left-radius: 1rem;
                    border-bottom-right-radius: 1.5rem;
                }

                .Logo {
                    max-width: 120px;
                    max-height: 80px;
                }
            }

            .Title {
                font-size: 1.1rem;
                font-weight: 500;

                &.Extra {
                    font-size: 0.7rem;
                    font-weight: normal;
                }
            }

        }

        .HeaderDetail {
            padding-left: 1rem;
            padding-right: 1rem;
            font-size: 0.8rem;

            @media (max-width: 560px /* $mobile-breakpoint */) {
                padding-left: 0;
            }

            .BrandName {
                font-size: 0.9rem;
                font-weight: bold;
            }

            .Currency {
                font-size: 1rem;
                font-weight: bold;
            }
        }

        .CallToAction {
            margin-right: -0.5rem;
            flex-grow: 1;
            text-align: right;

            @media (max-width: 560px /* $mobile-breakpoint */) {
                margin-top: 0.5rem;
                flex-grow: unset;
                text-align: unset;
            }

            .Button {
                padding: 1.15rem 0.5rem;
                border-top-right-radius: 0.7rem;
                border-bottom-left-radius: 1rem;
                background-color: var(--color-page-bg-soft);

                &:not(:first-child) {
                    margin-left: 0.4rem;
                }

                @media (max-width: 560px /* $mobile-breakpoint */) {
                    padding: 0.5rem 1rem;
                    border-top-right-radius: unset;
                    border-bottom-left-radius: unset;
                    border-radius: 0.5rem;
                }

                &:hover {
                    background-color: var(--color-page-link-hover);
                    color: var(--color-page-bg);
                }
            }
        }

    }

    .Technologies {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 0.5rem;
        row-gap: 0.5rem;
        margin-top: 0.75rem;
        border-top: 1px solid var(--color-page-hairline);
        text-align: center;

        @media (max-width: 560px /* $mobile-breakpoint */) {
            margin-top: 0.25rem;
            flex-direction: column;
            text-align: left;
            border-top-style: none;
        }

        .Technology {
            flex-grow: 1;
            font-size: 0.9rem;
            margin-top: 0.5rem;

            .TechName {
                display: inline-block;
                font-size: 0.9rem;
                font-weight: bold;

                @media (max-width: 560px /* $mobile-breakpoint */) {
                    border-bottom: 1px solid var(--color-page-hairline);
                }
            }
        }

    }

}


/******************** /components/app/HoodList.css ********************/


.HoodList {

    &.WithGroups {
    }
    &.NoGroups {
    }

    ul.HoodGroups {
        list-style: none;
        margin: 0;
        margin-left: -2.5rem;

        li.Group {

            .GroupName {
                display: inline-block;
                width: 15rem;
                margin-bottom: 0.3rem;
                font-size: 1.2rem;
                border-bottom: 2px solid var(--color-page-text);
            }

            &:not(:first-child) {
                margin-top: 1rem;
            }
        }
    }

    ul.Hoods {
        list-style: none;
        margin-left: -2.5rem;

        li.Hood {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            .HoodName {
                padding-top: 0.1rem;
                padding-bottom: 0.1rem;
            }

            .HoodStage {
                &.PartiallyActive {
                    color: var(--color-sentiment-warning-solid-bg);
                }
                &.UnderConstruction {
                    color: var(--color-sentiment-warning-solid-bg);
                }
                &.PendingConstruction {
                    color: var(--color-sentiment-warning-solid-bg);
                }
                &.Planned {
                    color: var(--color-sentiment-warning-solid-bg);
                }
                &.Potential {
                    color: var(--color-sentiment-warning-solid-bg);
                }
            }

        }
    }

}


/******************** /components/graphics/Chart.css ********************/

.Chart {
    overflow: hidden;

    &.Resizing {

        & > div {
            display: none;
        }
    }

    &.Border {
        border-radius: 1rem;
        border: 1px solid var(--color-page-hairline);
    }
}


/******************** /components/layout/BasicPage.css ********************/



.BasicPage {
    font-family: "Noto Sans";
    background-color: var(--color-page-bg);

    #PageFrame {
        display: flex;
        flex-direction: row;
        min-height: 100vh;

        @media (max-width: 560px /* $mobile-breakpoint */) {
            min-height: calc(100vh - 5rem);
        }

        h1 {
            text-align: center;
        }

        #PageSubtitle {
            margin-top: -0.75rem;
            margin-bottom: 1rem;
            text-align: center;
        }

        &>main {
            flex-grow: 1;
            padding: 2rem;
            margin-left: auto;
            margin-right: auto;
        }

        input:invalid {
            border-color: var(--color-sentiment-negative-solid-bg);
        }

    }

    @media (max-width: 560px /* $mobile-breakpoint */) {
        padding-top: 5rem;

        #PageFrame {
            &>main {
                padding: 0.5rem;
            }
        }

    }

}


/******************** /components/layout/ClientPage.css ********************/


.ClientPage {
    font-family: "Noto Sans";

    .PageContent {
        padding: 2rem;
    }

    .FormPanel {
        padding: 1rem 2rem;
        border: 1px solid var(--color-page-hairline);
        border-radius: 1rem;
        background-color: var(--color-page-bg-soft);
        overflow: auto;

        &.WithInnerPadding {
            padding: 0;
        }

        .InnerPadding {
            padding: 1rem 2rem;
        }
    }

}


/******************** /components/layout/ClientPreviewMode.css ********************/

#ClientPreviewMode {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 15rem;
    height: 5rem;
    background: none;
    background-color: #8d3217 !important;
    border: 0;
    border-radius: 0;
    border-top-left-radius: 1rem;
    scale: 1;
    transition: var(--transition-basic);
    border-top: 4px solid #b38f8f !important;
    border-left: 4px solid #b38f8f !important;
    color:rgb(243, 225, 225);
    box-shadow: 0.5rem 0.5rem 3rem #000000ff !important;

    @media (prefers-color-scheme: dark) {
        box-shadow: -0.5rem 0.5rem 3rem #ff9999ff !important;
    }

    &:hover {
        right: 0.5rem;
        bottom: 0.2rem;
        scale: 1.1;
        background-color:#c73319 !important;
        color: white !important;
        border-color: white !important;
    }

    .Main {
        display: block;
        font-size: 1.2rem;
        font-weight: bold;
    }
}


/******************** /components/layout/ContentSection.css ********************/


.ContentSection {

    &>h2 {
        display: flex;
        align-items: center;
        padding-top: 2rem;
        padding-bottom: 0.5rem;
        font-size: 1.6rem;
        font-weight: normal;
        border-bottom: 1px solid transparent;

        @media (max-width: 560px /* $mobile-breakpoint */) {
            font-size: 1.2rem;
        }

        &>.Title {
            flex-grow: 1;
            display: flex;
            align-items: center;

            &>.Thumbnail:first-child {
                margin-right: 0.5rem;
            }
        }

        &>.Expander {
            display: flex;
            align-items: center;
            padding-left: 1rem;
            /* transition: var(--transition-basic-half); */
        }

    }

    &>.Drawer {
        &>.Content {

            &>.Toolbar:not(:last-child) {
                margin-left: 1rem;
                margin-top: 0.5rem;
                margin-bottom: 1rem;
            }

            &>p:first-child {
                margin-top: 0;
            }
            &>p:last-child {
                margin-bottom: 0;
            }

        }
    }

    &.Expandable {
        h2 {
            cursor: default;

            @media (min-width: 560px /* $mobile-breakpoint */) {
                &:hover {
                    background-color: var(--color-page-hover-bg);
                }
            }

        }
    }

    &.Expanded {
        .Expander {
            transform: rotate(90deg);
        }
    }

    &.Collapsed {
        h2 {
            border-bottom-color: var(--color-page-hairline);
        }

        &>.Drawer {
            display: none;
        }
    }

}

/******************** /components/layout/Dialog.css ********************/


.Dialog {

    --dialog-header-height: 3rem;

    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-page-mask);
    overflow: auto;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;

    &:not(.Opening) {
        opacity: 1;
    }

    &.Closing {
        opacity: 0;
    }

    .Button.Close {
        font-size: 1.2rem;
    }

    &.FlavorDanger > section {
        background-color: var(--color-sentiment-negative-soft-text);
        border: 2px solid var(--color-sentiment-negative-solid-bg);

        &>header {
            background-color: var(--color-sentiment-negative-solid-bg);
            color: var(--color-sentiment-negative-solid-text);

            .Button.Close {
                background-color: var(--color-sentiment-negative-solid-bg);
                color: var(--color-sentiment-negative-solid-text);

                &:hover {
                    background-color: var(--color-sentiment-negative-solid-text);
                    color: var(--color-sentiment-negative-solid-bg);
                }
            }
        }

        &>main {
            color: var(--color-sentiment-negative-solid-bg);
        }

        &>footer {
            background-color: var(--color-sentiment-negative-soft-text);
            border-top-color: var(--color-sentiment-negative-solid-bg);

            .Button {
                border-color: var(--color-sentiment-negative-solid-bg);
                color: var(--color-sentiment-negative-solid-bg);

                &:hover {
                    background-color: var(--color-sentiment-negative-soft-bg);
                    color: var(--color-sentiment-negative-solid-text);
                }

                &.Solid {
                    background-color: var(--color-sentiment-negative-solid-bg);
                    color: var(--color-sentiment-negative-solid-text);

                    &:hover {
                        border-color: var(--color-sentiment-negative-soft-bg);
                        background-color: var(--color-sentiment-negative-soft-bg);
                    }
                }
            }
        }
    }

    .Frame {
        display: flex;
        flex-direction: column;
        max-width: calc(100vw - 3rem);
        max-height: calc(100vh - 3rem);
        border-radius: 0.3rem;
        overflow: auto;
        background-color: var(--color-page-bg);
        color: var(--color-page-text);
        box-shadow: 0rem 0rem 1rem var(--color-page-shadow);

        @media (prefers-color-scheme: dark) {
            border: 1px solid var(--color-page-hairline);
        }

        &>header {
            display: flex;
            align-items: stretch;
            min-height: var(--dialog-header-height);
            height: var(--dialog-header-height);
            background-color: var(--color-page-bg-soft);

            &>.Icon {
                display: flex;
                align-items: center;
                justify-content: center;
                padding-left: 0.9rem;
                padding-right: 0.5rem;
            }

            h2 {
                flex-grow: 1;
                display: flex;
                align-items: center;
                margin: 0;
                padding-left: 0.9rem;
                padding-right: 0.5rem;
                padding-top: 0.3rem;
                padding-bottom: 0.4rem;
                font-size: 1.1rem;
                font-weight: normal;

                &:not(:first-child) {
                    padding-left: 0;
                }
            }

            .Button.Close {
                display: flex;
                align-items: center;
                padding-left: 0.7rem;
                padding-right: 0.7rem;
                border: none;
                background-color: var(--color-page-bg-soft);
                color: var(--color-page-text-soft);

                &:hover {
                    background-color: var(--color-sentiment-negative-solid-bg);
                    color: var(--color-sentiment-negative-solid-text);
                }

                &>.Inliner {
                    display: none;
                }
            }
        }

        &>main {
            position: relative;
            overflow: auto;

            &.Padded {
                padding: 1rem;
            }

            .PaddedContent {
                padding: 1rem;
            }
        }

        &>footer {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            padding: 0.5rem 0.9rem;
            border-top: 1px solid var(--color-page-hairline);

            &>*:not(:last-child) {
                margin-right: 0.3rem;
            }
        }

        @media (max-width: 560px /* $mobile-breakpoint */) {
            padding: 0;

            &.MobileFull {
                position: fixed;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                max-width: 100vw;
                max-height: 100vh;
                border-radius: 0;
                border: none;
            }
        }

    }

}


/******************** /components/layout/DirectoryPage.css ********************/


.DirectoryPage {

    --header-height: 60px;
    --footer-height: 50px;

    --page-content-width-narrow: 1000px;
    --page-content-width: var(--page-content-width-narrow);

    &.FullWidth {
        --page-content-width: 100%;
    }

    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Noto Sans";
    padding-top: var(--header-height);

    h1 {
        text-align: center;

        .SubTitle {
            margin-top: 0.25rem;
            font-size: 1.1rem;
        }
    }

    .PageContent {
        padding: 2rem;
        width: 100%;
        min-height: calc(100vh - var(--header-height) - var(--footer-height));
        max-width: var(--page-content-width);

        @media (max-width: 560px /* $mobile-breakpoint */) {
            padding: 0.5rem 1rem;
        }

    }

    header.DirectoryPageHeader {
        z-index: 200;
        display: flex;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--header-height);
        border-bottom: 1px solid var(--color-page-hairline);
        background-color: var(--color-page-bg);
        box-shadow: 0 0.25rem 0.5rem var(--color-page-shadow-soft);

        .HeaderContent {
            display: flex;
            width: 100%;
            max-width: var(--page-content-width);
            height: var(--header-height);

            & > span {
                display: flex;
                align-items: center;
                padding: 1rem;
            }

            .TitleBlock {
                display: flex;
                align-items: center;
                justify-content: center;
                column-gap: 1rem;
                padding: 0;
                padding-left: 1rem;
                white-space: nowrap;

                a {
                    color: var(--color-page-text);
                }

                @media (max-width: 560px /* $mobile-breakpoint */) {
                    flex-direction: column;
                }

                .IspsLogo {
                    width: calc(200px * 0.65);
                    height: calc(60px * 0.65);
                    transition: 0.2s all ease-in-out;

                    @media (min-width: 560px /* $mobile-breakpoint */) {
                        &:hover {
                            scale: 1.03;
                        }
                    }

                    @media (max-width: 560px /* $mobile-breakpoint */) {
                        width: calc(200px * 0.55);
                        height: calc(60px * 0.55);
                        margin-bottom: -0.3rem;
                    }
                }

                .Title {
                    font-family: Montserrat;
                    text-transform: uppercase;
                    font-size: 1.2rem;

                    @media (max-width: 560px /* $mobile-breakpoint */) {
                        margin-bottom: -0.25rem;
                    }

                    a {
                        text-decoration: none;

                        &:hover {
                            color: var(--color-page-link);
                        }

                        span {
                            display: inline-block;

                            &::first-letter {
                                font-size: 1.5rem;
                            }

                            @media (max-width: 560px /* $mobile-breakpoint */) {
                                font-size: 0.6rem;

                                &::first-letter {
                                    font-size: 0.8rem;
                                }
                            }

                        }
                    }

                }

            }

            & > .FlexGrow {
                padding: 0;
            }

            .Toolbar {
                .Band {
                    border: none;
                    padding: 0;

                    .Button {
                        height: 45px;
                        padding: 0 1rem;
                        border-radius: 2rem;
                        font-size: 1rem;

                        @media (max-width: 560px /* $mobile-breakpoint */) {
                            border: none;
                            padding: 0 0.5rem;
                            border-radius: 0.5rem;
                        }
                    }
                }
            }

        }
    }

    footer.DirectoryPageFooter {
        width: 100%;
        height: var(--footer-height);
        padding: 0.5rem;
        font-size: 0.8rem;
        text-align: center;
        border-top: 1px solid var(--color-page-hairline);
    }

    .TabBar {
        justify-content: center;
    }

}


/******************** /components/layout/NavBar.css ********************/


#NavBarSpacer {
    min-width: var(--nav-bar-width);

    @media (max-width: 560px /* $mobile-breakpoint */) {
        min-width: 0;
    }
}

#NavBar {
    z-index: 200;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: var(--nav-bar-width);
    background-color: var(--color-page-bg);
    border-right: 1px solid var(--color-page-hairline);

    .Brand {
        display: flex;
        flex-direction: row;
        padding: 1.5rem 1.5rem;
        border-bottom: 1px solid var(--color-page-hairline);

        .Hamburger {
            display: none;
        }

        .LogoAndTitle {
            display: inline-flex;
            flex-direction: column;

            .IspsLogo {
                width: calc(200px * 0.9);
                height: calc(60px * 0.9);
            }

            .Title {
                display: flex;
                align-items: center;
                margin-top: 0.5rem;
                font-family: Montserrat;
                font-size: 1.2rem;
                text-align: center;
            }

            @media (max-width: 560px /* $mobile-breakpoint */) {
                flex-direction: row;
                gap: 1rem;

                .IspsLogo {
                    width: calc(200px * 0.45);
                    height: calc(60px * 0.45);
                }

                .Title {
                    margin-top: 0;
                    font-size: 1.2rem;
                    text-align: left;
                    line-height: 1.1rem;
                }
            }
        }

    }

    #NavMenuBlock {
        overflow-y: auto;
        padding-bottom: 1.5rem;
    }

    ul.Menu {
        margin: 0;
        padding: 0;

        li {
            display: block;

            .Item {
                display: flex;
                align-items: center;
                min-height: 2.3rem;
                padding: 0.25rem 1rem;
                text-decoration: none;
                cursor: default;
                color: var(--color-page-text);

                .InlineIconLeft {
                    font-size: 1.2rem;
                    vertical-align: -0.2rem;
                    padding-right: 0.3rem;
                    color: var(--color-contrast-block-bg);
                }

                &.Selected {
                    background-color: var(--color-contrast-block-bg);
                    color: var(--color-contrast-block-text);

                    .InlineIconLeft {
                        color: var(--color-contrast-block-text);
                    }
                }

                &.Active {
                    &:hover {
                        background-color: var(--color-page-hover-bg);
                        color: var(--color-contrast-block-bg);

                        .InlineIconLeft {
                            color: var(--color-contrast-block-bg);
                        }
                    }
                }

            }
        }

        &.Level2 > li > .Item {
            padding-left: 2rem;
            font-size: 0.95rem;

            .InlineIconLeft {
                font-size: 1rem;
            }
        }

        &.Level3 > li > .Item {
            padding-left: 3rem;
            font-size: 0.9rem;

            .InlineIconLeft {
                font-size: 0.95rem;
            }
        }

    }

    @media (max-width: 560px /* $mobile-breakpoint */) {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        pointer-events: none;
        background-color: transparent;

        display: flex;
        flex-direction: column;

        .Brand {
            height: 5rem;
            padding-left: 1.5rem;
            padding-top: 1.75rem;
            pointer-events: all;
            background-color: var(--color-page-bg);

            .Hamburger {
                display: inline;
                font-size: 1.7rem;
                vertical-align: -0.4rem;
                margin-right: 0.75rem;
                border: none;
                background-color: transparent;
                color: var(--color-contrast-block-bg);

                .Inliner {
                    display: none;
                }
            }
        }

        #NavMenuBlock {
            flex-grow: 1;
            opacity: 0;
            overflow: auto;
            pointer-events: none;
            transition: all 0.15s;
            background-color: var(--color-page-bg);
        }

        &.Expanded {
            #NavMenuBlock {
                opacity: 1;
                pointer-events: all;
            }
        }

        ul.Menu {
            li {

                .Item {
                    padding: 0 1rem;
                    height: 3rem;

                    &.Active {
                        &:hover {
                            background-color: transparent;
                        }

                        &:active {
                            background-color: var(--color-contrast-block-zing);
                            color: var(--color-contrast-block-text);
                        }
                    }
                }

            }
        }

    }

}


/******************** /components/layout/PublicPage.css ********************/


.PublicPage {
    font-family: "Noto Sans";

    h1 {
        text-align: center;
    }

    .PageContent {
        padding: 2rem;

        @media (max-width: 560px /* $mobile-breakpoint */) {
            padding: 0.5rem;
        }

    }

    footer.PublicPageFooter {
        padding: 1rem;
        border-top: 1px solid var(--color-page-hairline);
    }
}


/******************** /components/layout/StatsBlock.css ********************/


.StatsBlock {
    display: flex;
    column-gap: 0.5rem;
    row-gap: 1rem;
    flex-wrap: wrap;

    &.Centered {
        justify-content: center;
    }

    .Group {
        display: flex;
        flex-direction: column;
        border-radius: 1rem;
        overflow: hidden;
        border: 1px solid var(--color-page-hairline);
        background-color: var(--color-page-bg-stark);

        header {
            text-align: center;
            font-size: 0.8rem;
            padding: 0.1rem 1rem;
            background-color: var(--color-page-bg-soft);
        }

        &>div {
            flex-grow: 1;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 2rem;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .Item {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding-top: 0.5rem;
            padding-bottom: 0.75rem;

            &.WithTip {
                cursor: help;
                label {
                    cursor: help;
                }
            }

            &>label {
                margin-bottom: 0.2rem;
                text-align: center;
                font-size: 0.8rem;
            }

            &>div {
                text-align: center;
                font-size: 1.5rem;

                .Prefix, .Suffix {
                    font-size: 1.3rem;
                }
            }
        }

    }

}


/******************** /components/layout/Toast.css ********************/


#Toasts {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    position: fixed;
    bottom: 1rem;
    left: 0;
    right: 0;
    z-index: 10000;
    pointer-events: none;
}

.Toast {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 30rem;
    margin: 0.25rem 1rem;
    padding: 0.75rem 1.5rem;
    padding-right: 0.5rem;
    border-radius: 0.5rem;
    transition: opacity 0.25s ease-in-out;
    pointer-events: all;
    background-color: white;
    color: black;
    opacity: 0;
    box-shadow: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.3);

    &:not(.Opening) {
        opacity: 1;
    }

    &:not(.Opening) {
        opacity: 1;
    }

    &.Closing {
        opacity: 0;
    }

    & > div {
        padding-top: 0.25rem;
    }

    & > main {
        flex-grow: 1;
        max-height: 80vh;
        overflow: auto;
    }

    & > nav {

        .Button {
            border: 0;
            min-width: 0;
            height: 1.5rem;
            border-radius: 0.25rem;
            background-color: transparent;

            &:hover {
                background-color: red;
                color: white;
            }

            .Inliner {
                display: none;
            }
        }

    }

    &.Info {
        border-color: rgb(194, 194, 194);
    }

    &.Success {
        background-color: rgb(82, 151, 82);
        border-color: rgb(137, 226, 19);
        color: white;
        .Button {
            color: white;
        }
    }

    &.Warning {
        background-color: rgb(211, 162, 0);
        border-color: rgb(238, 218, 107);
        color: white;
        .Button {
            color: white;
        }
    }

    &.Error {
        background-color: rgb(161, 40, 40);
        border-color: rgb(226, 90, 66);
        color: white;
        .Button {
            color: white;
        }
    }

}


/******************** /components/scalar/CheckBox.css ********************/

.CheckBox {
    display: inline-flex;
    align-items: center;
    font-family: var(--page-font-family);
    font-size: 0.9rem;

    &.MarginLeft {
        margin-left: 0.3rem;
    }

    &.MarginRight {
        margin-right: 0.3rem;
    }

    &.Disabled {
        color: var(--color-page-text-soft);
    }

    &>span {
        padding-left: 0.15rem;
        padding-right: 0.5rem;
    }

    @media (pointer: coarse) {
        min-height: 2.5rem;
    }

}

/******************** /components/scalar/InputHarness.css ********************/

.InputHarness {
    display: inline-table;
    border-spacing: 0;

    &.WithTitle {
        vertical-align: 1.35rem;
    }

    &.MarginLeft {
        margin-left: 0.3rem;
    }

    &.MarginRight {
        margin-right: 0.3rem;
    }

    &.MarginBottom {
        margin-bottom: 0.5rem;
    }

    &.SimulatedTextBox {
        td.Input.Bordered {
            padding: 0.3rem 0.5rem;
            display: block;
        }
    }

    &>tbody>tr {

        &>td {
            padding: 0;

            &.Title {
                font-size: 0.8rem;
                padding-left: 0.2rem;
                padding-right: 0.3rem;
                color: var(--color-control-title);

                .Required {
                    font-size: 0.7rem;
                    margin-right: 0.2rem;
                    color: rgb(150, 0, 0);
                }

                .HelpArticle {
                    font-size: 0.7rem;
                    margin-left: 0.4rem;
                    cursor: pointer;
                }

            }

            &.Input {
                font-size: 0.9rem;
                width: 100%;
                display: flex;
                align-items: stretch;

                &.Bordered {
                    border-radius: 0.3rem;
                    background-color: var(--color-control-bg);
                    border: 1px solid var(--color-control-rim);
                    overflow: hidden;
                }

                /* Iconic button before or after the textbox */
                &>button,
                .Button {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    padding: 0;
                    padding-left: 0.4rem;
                    padding-right: 0.4rem;
                    background-color: transparent;
                    border-radius: 0;
                    border: none;
                    color: gray;
                    font-size: 0.9rem;

                    &:hover {
                        background-color: rgb(234, 234, 234);
                        color: black;
                    }

                    &:disabled {
                        color: lightgray;
                    }

                    @media (pointer: coarse) {
                        padding-left: 0.8rem;
                        padding-right: 0.8rem;
                        font-size: 1.3rem;
                    }
                }

                /* Iconic button before or after the textbox */
                &>.Icon {
                    display: flex;
                    align-items: center;
                    padding-left: 0.4rem;
                    padding-right: 0.4rem;
                    background-color: transparent;
                    border: none;
                    color: gray;
                    font-size: 1.2rem;
                }

                &>input:focus,
                textarea,
                select {
                    outline: none;
                }

                &:focus-within {
                    border-color: var(--color-control-focus-rim);
                    outline: 1px solid var(--color-control-focus-rim);
                }

                &:hover {
                    &>.AfterInput {
                        &>.ClearButton {
                            display: flex;
                        }
                    }
                }

                &:has(input:invalid) {
                    border-color: var(--color-sentiment-negative-solid-bg);
                    &:focus-within {
                        outline-color: var(--color-sentiment-negative-solid-bg);
                    }
                }

            }

            &.Prefix {
                width: 0%;
                font-size: 0.9rem;
                padding-right: 0.15rem;
                white-space: nowrap;

                &.Empty {
                    overflow: hidden;
                    max-width: 0;
                    padding: 0;
                }
            }

            &.Suffix {
                width: 0%;
                font-size: 0.9rem;
                padding-left: 0.15rem;
                white-space: nowrap;
            }

            &.ErrorMessage {
                font-size: 0.9rem;
                padding-top: 0.2rem;
                padding-left: 0.4rem;
                padding-right: 0.4rem;
                color: red;
            }

            &>.BeforeInput,
            &>.AfterInput {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: stretch;
                position: relative;

                /* Although these are mostly buttons, sometimes it's just decorative flair. As with the magnifier icon on <FilterTextBox>. */
                .Flair {
                    flex-grow: 1;
                    height: 100%;
                    width: 2rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                &.BeforeInput {
                    .Flair {
                        padding-left: 0.25rem;
                    }
                }

                &.AfterInput {
                    .Flair {
                        padding-right: 0.25rem;
                    }
                }
            }

            &>.AfterInput {
                .ClearButton {
                    /* display: flex; */
                    display: none;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    left: -1.8rem;
                    width: 1.8rem;
                    height: 100%;
                    cursor: default;
                    color: lightgray;

                    &:hover {
                        background-color: rgba(255, 255, 255, 0.8);
                        color: red;
                    }
                }
            }

        }

    }

}

/******************** /components/scalar/SelectBox.css ********************/

.TextBox.SelectBox {
    font-size: 0.9rem;
    width: 100%;
    height: calc(2rem - 2px);
    padding: 0 0.5rem;
    background-color: var(--color-control-bg);
    border: none;
    font-family: var(--page-font-family);

    &:disabled {
        color: rgb(199, 199, 199);
        background-color: var(--color-control-bg);
        border-color: rgb(199, 199, 199);
    }

    @media (pointer: coarse) {
        min-height: 2.5rem;
    }

}


/******************** /components/scalar/StaticTextBox.css ********************/


.StaticTextBox.InputHarness {

    tbody>tr>td.Input.Bordered {
        min-height: 32px;
        background-color: transparent;
    }

    .TextContent {
        width: 100%;
        padding-top: 0.325rem;
        padding-bottom: 0.325rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;

        &:not(.AllowWrap) {
            white-space: nowrap;
        }
    }

}


/******************** /components/scalar/TextBox.css ********************/

.TextBox {
    font-size: 0.9rem;
    width: 100%;
    height: calc(2rem - 2px);
    min-height: fit-content;
    padding: 0rem 0.5rem;
    background-color: transparent;
    color: var(--color-page-text);
    border: none;
    font-family: var(--page-font-family);

    &::placeholder {
        color: var(--color-page-text-barely);
    }

    &:disabled {
        background-color: transparent;
        color: var(--color-page-text-soft);
        border-color: var(--color-control-rim);
    }

    @media (pointer: coarse) {
        min-height: 2.5rem;
        font-size: 1rem;
    }

    &.Monospace {
        font-family: 'Courier New', Courier, monospace;
    }

}

.FilterTextBox {
    @media (max-width: 560px /* $mobile-breakpoint */) {
        width: 100%;
    }
}