:root,
[data-theme="light"]
{
    --buildmatrixBlue: #0071e3;
    --buildmatrixBlueTenPercent: rgba(0,113,227,0.1);
    --buildmatrixBlueFifteenPercent: rgba(0,113,227,0.15);
    --buildmatrixBlueTwentyPercent: rgba(0,113,227,0.2);
    --buildmatrixBlueHover: #1c8cff;
    --buildmatrixBlueActive: #0159b4;
    --buildmatrixBlueActiveFifteenPercent: rgba(1,89,180,0.15);
    --buildmatrixBlueActiveThirtyPercent: rgba(1,89,180,0.3);
    --buildmatrixBlueText: #ffffff;
    --pageBackColor: #f3f3f3;
    --unauthenticatedBackColor: #f3f3f3;
    --contentBackColor: #ffffff;
    --contentBackColorActive: #e6f2fd;
    --primaryTextColor: #000000;
    --mediumTextColor: #6b6b6b;
    --lightTextColor: #909090;
    --lighterTextColor: #a0a0a0;
    --borderColor: #d6d6d6;
    --borderActiveColor: #363636;
    --boxShaddowColor: rgba(0, 0, 0, 0.25);
    --boxShaddowColorLightOnly: rgba(0, 0, 0, 0.25);
    --placeholderText: #a9a9a9;
    --redLight: #ce0303;
    --error: var(--redLight);
    --redLightTenPercent: rgba(206, 3, 3, 0.1);
    --redLightHover: #ff0404;
    --redLightHoverFivePercent: rgba(255, 4, 4, 0.05);
    --redLightHoverFifteenPercent: rgba(255, 4, 4, 0.15);
    --redLightActive: #9f0202;
    --redLightActiveTenPercent: rgba(159,2,2,0.1);
    --redLightActiveTwentyPercent: rgba(159,2,2,0.2);
    --greenLight: #11BB36;
    --disabledTextColor: #000000;
    --disabledAreaColor: #d6d6d6;
    --tool-tip-icon-aura: rgba(32, 143, 255, 0.15);
    --radioCheckedBorderColor: black;
    --linkButtonText: #0376EC;
    --linkButtonHoverText: var(--buildmatrixBlueHover);
    --linkButtonActiveText: #208fff;
    --linkButtonHoverBackground: var(--buildmatrixBlueTenPercent);
    --linkButtonActiveBackground: var(--buildmatrixBlueActiveFifteenPercent);
    --redLinkButtonText: var(--redLight);
    --redLinkButtonHoverText: var(--redLightHover);
    --redLinkButtonActiveText: var(--redLightHover);
    --redLinkButtonHoverBackground: var(--redLightHoverFivePercent);
    --redLinkButtonActiveBackground: var(--redLightActiveTenPercent);
    --dialogBorderColor: --buildmatrixBlueHover;
    --headlessDialogBorderColor: var(--borderColor);
    --dialogBorderWidth: 0px;
    --editableSectionOverlay: rgba(0, 0, 0, 0.12);
    --userMenuBackColor: var(--contentBackColor);
    --movingBackgroundHoverColour: var(--pageBackColor);
}

[data-theme="dark"]
{
    --pageBackColor: #151519;
    --unauthenticatedBackColor: #151519;
    --contentBackColor: #252529;
    --contentBackColorActive: #190d02;
    --primaryTextColor: #e7e7e7;
    --mediumTextColor: #a9a9a9;
    --lightTextColor: #6f6f6f;
    --borderColor: #595959;
    --boxShaddowColor: transparent;
    --boxShaddowColorLightOnly: transparent;
    --placeholderText: #565656;
    --disabledTextColor: #e7e7e7;
    --disabledAreaColor: #666666;
    --tool-tip-icon-aura: rgba(32, 143, 255, 0.3);
    --radioCheckedBorderColor: var(--primaryTextColor);
    --linkButtonHoverBackground: var(--buildmatrixBlueTwentyPercent);
    --linkButtonActiveBackground: var(--buildmatrixBlueActiveThirtyPercent);
    --redLinkButtonHoverBackground: var(--redLightHoverFifteenPercent);
    --redLinkButtonActiveBackground: var(--redLightActiveTwentyPercent);
    --dialogBorderColor: #13B5EA;
    --headlessDialogBorderColor: #13B5EA;
    --dialogBorderWidth: 1px;
    --editableSectionOverlay: rgba(255, 255, 255, 0.22);
    --userMenuBackColor: var(--pageBackColor);
    --movingBackgroundHoverColour: var(--buildmatrixBlueFifteenPercent);
    /*--redLight: #F19203;
    --redLightTenPercent: rgba(241, 146, 3, 0.1);
    --redLightHover: #ff9404;
    --redLightHoverFivePercent: rgba(255, 148, 4, 0.05);
    --redLightHoverFifteenPercent: rgba(255, 148, 4, 0.15);
    --redLightActive: #9f5c02;
    --redLightActiveTenPercent: rgba(159,92,2,0.1);
    --redLightActiveTwentyPercent: rgba(159,92,2,0.2);*/
    --error: #F19203;
}

html
{

}

html, body
{
    margin: 0;
    height: 100%;
    font-size: 16px;
}

body
{
    font-family: "Poppins", Helvetica;
    color: var(--primaryTextColor);
    background-color: var(--pageBackColor);
    line-height: 1.4;
}

strong
{
    font-weight: 500;
}
[data-theme="dark"]
{
    strong
    {
        font-weight: 600;
    }
}

@media (max-width: 489.99999999px)
{
    html, body
    {
        font-size: 3.2653vw;
    }
}

*
{
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
*:focus-visible
{
    outline: none;
}

a
{
    color: var(--primaryTextColor);
    text-decoration: none;
}

p
{
    margin: 0 0 1.25rem 0;
}

hr
{
    border: 0;
    border-top: 1px solid var(--borderColor);
    margin: 0;
}
.light-text
{
    color: var(--lightTextColor);
}
.lighter-text
{
    color: var(--lighterTextColor);
}

.fw500
{
    font-weight: 500;
}

/* Buildmatrix buttons are all custom, remove default styles */
button, a.button
{
    font-family: unset;
    font-size: unset;
    padding-block: 0;
    padding-inline: 0;
    border-style: none;
    border-image: none;
    cursor: pointer;
    /* Default button style */
    background-color: var(--buildmatrixBlue);
    border: solid 1px var(--buildmatrixBlue);
    height: 2rem;
    border-radius: 9999px;
    font-weight: 400;
    /*letter-spacing: 0.03125rem;*/
    color: var(--buildmatrixBlueText);
    padding: 0 1rem;
    line-height: 1.4;
}
a.button
{
    text-align: center;
    height: auto;
    padding: calc(((2rem - (1em * 1.4)) / 2) - 1px) 0;
}
    button:hover, a.button:hover
    {
        border-color: var(--buildmatrixBlueHover);
        background-color: var(--buildmatrixBlueHover);
    }
    button:active, a.button:active
    {
        border-color: var(--buildmatrixBlueActive);
        background-color: var(--buildmatrixBlueActive);
    }
        button:active:not(:disabled):not(.bm-dropdown-control)
        {
            transform: scale(0.98);
        }

    button.save, button.cancel
    {
        min-width: 5.3125rem;
    }
    button.cancel
    {
        color: var(--redLight);
        background-color: #f3f3f3;
        border-color: var(--borderColor);
    }
        button.cancel:hover
        {
            color: white;
            background-color: var(--redLightHover);
            border-color: var(--redLightHover);
        }
        button.cancel:active
        {
            background-color: var(--redLightActive);
            border-color: var(--redLightActive);
        }

    button:focus-visible
    {
        outline: none;
    }

    button:disabled
    {
        cursor: not-allowed !important;
        /*opacity: 0.55;*/
    }

    /*button:disabled:hover
        {
            background-color: var(--buildmatrixBlue);
        }*/

button.link-button
{
    background-color: transparent;
    border: 0;
    height: initial;
    font-weight: 400;
    color: var(--linkButtonText);
    letter-spacing: unset;
    display: block;
    padding: calc((1.5rem - (1em * 1.4)) / 2) 0.6rem;
    margin: 0 0.15rem;
    font-size: 0.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    position: relative;
}

        button.link-button::before
        {
            content: "";
            position: absolute;
            inset: -0.375rem -0.2rem;
        }

    button.link-button.light
    {
        color: var(--lightTextColor);
    }
        button.link-button:hover
        {
            background-color: var(--linkButtonHoverBackground);
            color: var(--linkButtonHoverText);
        }

        button.link-button:active
        {
            background-color: var(--linkButtonActiveBackground);
            color: var(--linkButtonActiveText);
        }
        button.link-button:disabled
        {
            color: var(--lightTextColor);
        }

            button.link-button:disabled:hover
            {
                background-color: transparent;
            }

        button.link-button.save, button.link-button.cancel
        {
            min-width: auto
        }

        button.link-button.cancel
        {
            color: var(--redLinkButtonText);
        }

            button.link-button.cancel:hover
            {
                background-color: var(--redLinkButtonHoverBackground);
                color: var(--redLinkButtonHoverText);
            }

            button.link-button.cancel:active
            {
                background-color: var(--redLinkButtonActiveBackground);
                color: var(--redLinkButtonActiveText);
            }

img
{
    max-width: 100%;
    display: block;
}

main
{
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
}
    main.content-left
    {
        justify-content: flex-start;
    }
    main *:not(.scrollable):not(.editable-section-overlay);
    {
        max-width: calc(100vw - 3.75rem);
    }

main>*
{
    display: inline-block;
}

.dialog
{
    padding: 1.875rem;
    font-size: 0.875rem;
    background-color: var(--pageBackColor);
}

    .dialog.message-box
    {
        padding: 1.25rem;
    }

.dialog .content-row
{
    padding: 0.875rem 0;
}

.heading-container
{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
    gap: 2.125rem;
}
.heading-container h1
{
    margin-left: 1rem;
}
h1, h2, h3, h4, h5
{
    margin-top: 0;
}

h1
{
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
    margin: 0;
}
h2
{
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    padding: 0.5rem 0 0.4375rem 1.25rem;
    margin: 0;
}
h3
{

}
h4
{
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.25em;
}
ul
{
    padding-inline-start: 1.25rem;
}
.text-center
{
    text-align: center;
}
.box-shaddow
{
    box-shadow: 0 4px 4px 0 var(--boxShaddowColor);
}

.ten-top-left-br
{
    border-top-left-radius: 0.625rem !important;
}

.ten-top-right-br
{
    border-top-right-radius: 0.625rem !important;
}

.ten-bottom-left-br
{
    border-bottom-left-radius: 0.625rem !important;
}

.ten-bottom-right-br
{
    border-bottom-right-radius: 0.625rem !important;
}
.no-bottom-margin
{
    margin-bottom: 0 !important;
}
.bottom-margin0p8125
{
    margin-bottom: 0.8125rem !important;
}
.bottom-margin1p25
{
    margin-bottom: 1.25rem !important;
}

.bottom-margin1p875
{
    margin-bottom: 1.875rem !important;
}
.bottom-margin2p5
{
    margin-bottom: 2.5rem !important;
}
.no-bottom-padding
{
    padding-bottom: 0 !important;
}
.bottom-padding1p25
{
    padding-bottom: 1.25rem !important;
}

.bottom-padding2p5
{
    padding-bottom: 2.5rem !important;
}

.bottom-padding1p875
{
    padding-bottom: 1.875rem !important;
}
.no-top-padding
{
    padding-top: 0 !important;
}

.half-width
{
    width: 50% !important;
}
.quarter-width
{
    width: 25% !important;
}
.three-quarter-width
{
    width: 75% !important;
}
.font-size0p625
{
    font-size: 0.75rem !important;
}

.font-size0p75
{
    font-size: 0.75rem !important;
}

.font-size0p875
{
    font-size: 0.875rem !important;
}

.twoCol
{
    display: flex;
    column-gap: 2.5rem;
    row-gap: 3.75rem;
    flex-wrap: wrap;
}

.alert-danger
{
    color: var(--error);
}

.red-light
{
    color: var(--redLight);
}

.green-light
{
    color: var(--greenLight);
}

.bm-blue
{
    color: var(--buildmatrixBlue);
}

.visibility-hidden
{
    visibility: hidden;
}

.flex-start-center
{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-between-center
{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.flex-center-center
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-center-center-column
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.flex-start-baseline
{
    display: flex;
    align-items: baseline;
}

.gap0625
{
    gap: 0.625rem;
}

.gap125
{
    gap: 1.25rem;
}

.border-top, .border-top-light
{
    border-top: solid 1px var(--borderColor);
}

[data-theme="dark"]
{
    .border-top-light
    {
        border-top: 0;
    }
}

.no-border
{
    border: 0;
}

.no-border
{
    border: 0;
}

.content-bg
{
    background-color: var(--contentBackColor);
}

.page-bg
{
    background-color: var(--pageBackColor);
}

.pill
{
    border-radius: 9999px;
}

.pad0p5
{
    padding: 0.5rem;
}

.pad0p625
{
    padding: 0.625rem;
}

.pad0p875
{
    padding: 0.875rem;
}

.pad1p25
{
    padding: 1.25rem;
}

.pad1p875
{
    padding: 1.875rem;
}

.pad2p50
{
    padding: 2.5rem;
}

.vpad1p25
{
    padding: 1.25rem 0;
}

.vpad2p50
{
    padding: 2.5rem 0;
}

.bpad0p375
{
    padding-bottom: 0.375rem;
}

.w25
{
    width: 25rem
}

.w28p75
{
    width: 28.75rem
}

.h4p5
{
    height: 4.5rem;
}

.h5
{
    height: 5rem;
}

.text0p75
{
    font-size: 0.75rem;
}

.relative{
    position: relative;
}

.lh1p5
{
    line-height: 1.5;
}

.blue-outline
{
    outline: solid 2px var(--buildmatrixBlue);
    border-radius: 0.625rem;
}

.tool-tip-icon img
{
    width: 1.125rem;
    cursor: pointer;
}

.tooltips-disabled .tool-tip
{
    display: none !important;
}

.bm-slide-in
{
    transition: all 0.8s linear(0, 0.09 6.3%, 0.32 13.5%, 0.57 21.2%, 0.77 29.4%, 0.91 38.3%, 0.99 48.2%, 1.02 59.8%, 1.01 73.6%, 1);
    font-size: 0.875rem;
}

.bm-slide-in-right-backdrop
{
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: transparent;
}

.bm-slide-in-right
{
    position: fixed;
    top: 3.4375rem;
    right: 0;
    z-index: 1100;
    transform: translateX(100%);
    display: flex;
    flex-direction: column;
}

    .bm-slide-in-right.open
    {
        transform: translateX(0);
    }

.user-avatar
{
    border: solid 0.125rem var(--buildmatrixBlueText);
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: white;
    padding: 0;
}
.user-avatar svg path
{
    fill: var(--buildmatrixBlue);
}
button.user-avatar:hover, button.user-avatar:active
{
    border-color: var(--buildmatrixBlueText);
    background-color: white;
}
button.user-avatar:hover svg path
{
    fill: var(--buildmatrixBlueHover);
}
    button.user-avatar:active svg path
    {
        fill: var(--buildmatrixBlueActive);
    }

.page-loading-host
{
    position: relative;
    min-height: 12rem;
    flex: 1;
}


/******************************************* Standard Panels *********************************/

.footer-panel-vertical
{
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    gap: 1.25rem;
    width: 100%;
    align-items: center;
}
    .footer-panel-vertical form, .footer-panel-vertical button
    {
        width: 100%;
    }

.footer-panel-horizontal
{
    display: flex;
    justify-content: space-between;
    padding: 0.9375rem;
    width: 100%;
    align-items: center;
}

.footer-panel-horizontal-centered
{
    gap: 1.25rem;
    display: flex;
    justify-content: center;
    padding: 0.9375rem;
    width: 100%;
    align-items: center;
}

.footer-panel-vertical:has(button.action-button)
{
    padding-bottom: 1.375rem
}

.footer-panel-horizontal-left
{
    gap: 1.25rem;
    display: flex;
    justify-content: flex-start;
    padding: 1.25rem;
    width: 100%;
    align-items: center;
}

.edit-button-bar
{
    display: flex;
    justify-content: flex-end;
}


.content-box
{
    border: solid 1px var(--borderColor);
    border-radius: 0.625rem;
    background-color: var(--contentBackColor);
    font-size: 0.75rem;
    margin-bottom: 1.25rem;
}

    .content-box
    {
        position: relative;
    }
        .content-box .sub-section .content-row
        {
            padding: 0.234375rem 1.25rem;
        }
            .content-box .sub-section .content-row .headingRow
            {
                padding-bottom: 0.625rem;
            }
            .content-box .sub-section .content-row h3
            {
                margin: calc((3.28125rem - (1em * 1.4)) / 2) 0;
                font-size: 1rem;
                font-weight: 500;
            }
            .content-box .sub-section .content-row h4
            {
                margin: calc((2.03125rem - (1em * 1.4)) / 2) 0;
                font-weight: 500;
                color: var(--primaryTextColor);
            }

        .content-box .sub-section .edit-button-bar
        {
            margin-right: -1.2rem;
        }


/******************************************* Unauthenticated *********************************/

/*@media (max-width: 439.99999999px)
{
    html:has(.unauthenticated), body:has(.unauthenticated)
    {
        font-size: 3.63636vw;
    }
}*/

.page-loading-host:has(.unauthenticated), .page-loading-host:has(.unauthenticated) .content
{
    height: 100%;
}

.unauthenticated
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: var(--unauthenticatedBackColor);
    height: 100%;
    font-size: 0.875rem;
}
    .unauthenticated main, .unauthenticated .website-link
    {
        padding: 1.25rem 0;
    }
    .unauthenticated a
    {
        color: var(--lightTextColor);
        display: inline-flex;
        padding: 0 0.5rem;
        margin: 0.45rem 0.25rem;
        font-size: 0.875rem;
        height: 1.1rem;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
    }
    .unauthenticated button.link-button
    {
        font-size: 0.875rem;
    }

    .unauthenticated a:hover
    {
        color: var(--buildmatrixBlueHover);
    }

    .unauthenticated h1
    {
        color: var(--buildmatrixBlue);
        font-weight: 300;
        font-size: 1.75rem;
        margin-bottom: 1.875rem;
    }
        .unauthenticated h1 span
        {
            font-weight: 500;
        }

    .unauthenticated h2
    {
        color: var(--primaryTextColor);
        font-size: 1.75rem;
        font-weight: 400;
        padding: 0;
        margin: 0 0 1.375rem 0;
    }
        .unauthenticated h2 > .tick
        {
            position: absolute;
            right: -2.9375rem;
            bottom: 0.1875rem;
        }

        .unauthenticated h2 .tick__path
        {
            stroke-width: 0.1225rem !important;
        }
    .unauthenticated p
    {
        color: var(--primaryTextColor);
        margin-bottom: 2.375rem;
        text-align: center;
    }
    .unauthenticated .checkbox
    {
        color: var(--primaryTextColor);
        margin-bottom: 1.0625rem;
    }

    .unauthenticated .logo
    {
        font-weight: 600;
        margin-bottom: 1.3125rem;
        height: 75px;
    }
    .unauthenticated .unauthenticatedFooter
    {
        gap: 1rem;
        display: flex;
        justify-content: center;
        padding: 1.25rem;
        width: 100%;
        align-items: center;
    }
@media (max-width: 599.99999999px)
{
    .unauthenticated .unauthenticatedFooter
    {
        flex-direction: column;
    }
}
    .unauthenticated .footer-panel-vertical
    {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0.625rem;
    }

.unauthenticated .status
{
    margin-top: 2.1875rem;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3125rem 0.75rem;
    font-size: 1rem;
    color: var(--primaryTextColor);
    margin-left: 0.3125rem;
}

    .unauthenticated .status.static
    {
        margin-top: 2.1875rem;
        position: relative;
        top: 0;
        left: 0;
        transform: none;
    }

    @media(max-width: 599.999999px)
    {
        .unauthenticated .status
        {
            margin-top: 1.1875rem;
        }
    }

        .unauthenticated .status::before
        {
            content: "";
            position: absolute;
            left: -0.3125rem;
            top: 1px;
            bottom: 1px;
            width: 0.3125rem;
            background: #0071E3;
            border-radius: 999px;
        }

.unauthenticated .login-error
{
    font-size: 0.625rem;
    padding: 0.34375rem 0;
    color: var(--error);
    margin-top: -1.5625rem;
}

    .unauthenticated fieldset
    {
        font-size: 0.875rem;
    }

.unauthenticated input, .unauthenticated select, .unauthenticated textarea
{
    background-color: #ffffff;
    color: #000000;
}


[data-theme="dark"]
{
    .unauthenticated input, .unauthenticated select, .unauthenticated textarea
    {
        background-color: #252529;
        color: var(--primaryTextColor);
    }
}
    /******************************************* Nav Bar *****************************************/
    .navbarToggle
    {
        position: relative;
        padding: 0.875rem 0.625rem;
        background-color: transparent;
        background-image: none;
        border: 0px solid transparent;
        border-radius: 50%;
    }

        .navbarToggle .iconBar
        {
            display: block;
            width: 1.375rem;
            height: 0.125rem;
            border-radius: 0.0625rem;
            background-color: #ffffff;
        }

            .navbarToggle .iconBar + .iconBar
            {
                margin-top: 0.25rem;
            }

    .mainNav, .subNav
    {
        height: 3.4375rem;
        display: flex;
        background-color: var(--buildmatrixBlue);
        color: var(--buildmatrixBlueText);
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
    }

        .mainNav::-webkit-scrollbar, .subNav::-webkit-scrollbar
        {
            display: none;
        }

        .mainNav > *, .subNav > *
        {
            flex-shrink: 0;
        }

        .mainNav .inner, .subNav .inner
        {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .mainNav nav, .subNav nav
        {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
            scroll-behavior: auto;
            width: calc(100vw - 11.8125rem);
        }

            .mainNav nav.dragging, .subNav nav.dragging
            {
                cursor: grabbing;
            }

    .subNav
    {
        background-color: #ffffff;
        border-bottom: 1px solid var(--borderColor);
    }

    .mainNav a
    {
        color: var(--buildmatrixBlueText);
        text-decoration: none;
    }

    .subNav a
    {
        color: var(--buildmatrixBlue);
        text-decoration: none;
    }

nav .navbarToggle, nav .navItem
{
    display: inline-block;
    font-weight: 500;
}

.logoContainer
{
    height: 2.5rem;
    margin: 0 3.125rem 0 1rem;
    display: block;
}

        .logoContainer svg
        {
            height: 2.5rem;
        }

    .backContainer, button.forwardContainer
    {
        height: 2.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        cursor: pointer;
    }

.backContainer
{
    width: 2.5rem;
    margin-left: 0.75rem;
    margin-right: 0.0625rem;
}
button.forwardContainer
{
    width: 2.5rem;
    margin-right: 0.75rem;
}

        .backContainer:hover, button.forwardContainer:hover
        {
            background-color: #f3f3f3;
        }

        .backContainer:active, button.forwardContainer:active
        {
            background-color: var(--buildmatrixBlueTenPercent);
        }

    button.forwardContainer
    {
        margin-left: 0.0625rem;
        background-color: transparent;
        padding: 0;
        border: 0;
    }

    img.back, img.forward
    {
        height: 1.25rem;
        display: block;
    }

    nav .navbarToggle
    {
        margin: 0 0.5rem 0 0.6875rem;
    }

nav .navItem .navLink
{
    padding: 1rem 1rem;
    position: relative;
    display: block;
}

    nav .navUnderline
    {
        content: "";
        position: absolute;
        left: 1rem;
        right: 0;
        bottom: 0.625rem;
        height: 3px;
        background: white; /*var(--buildmatrixBlueText);*/
        border-radius: 999px;
        pointer-events: none;
        display: none;
    }

    .subNav .navUnderline
    {
        background: var(--buildmatrixBlue);
    }

    .mainNav .user-avatar
    {
        margin-right: 0.875rem;
    }

    .user-avatar img, .user-avatar svg
    {
        width: 1.3rem;
    }

    .subNav nav .navItem .navLink
    {
        display: flex;
        align-items: center;
    }

        .subNav nav .navItem .navLink .count
        {
            font-size: 0.625rem;
            font-weight: 500;
            text-align: center;
            letter-spacing: 0;
            line-height: normal;
            margin-left: 0.4rem;
            padding: 0 0.1875rem;
            border: solid 1px var(--buildmatrixBlue);
            border-radius: 0.1875rem;
            min-width: 1.125rem;
        }

    .fullScreenButton
    {
        position: relative;
        flex: 0 0 auto;
        width: 2.5rem;
        height: 2.5rem;
        margin-left: auto;
        margin-right: 0.875rem;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    button.fullScreenButton:hover,
    button.fullScreenButton:active
    {
        background-color: transparent;
    }

    .fullScreenIcon
    {
        position: absolute;
        top: 50%;
        left: 50%;
        display: none;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    /*
 * Non-full-screen default:
 * Show full-screen.svg.
 */
    .fullScreenButton:not(.isFullScreen) .fullScreenIconDefault
    {
        display: block;
    }

    /*
 * Non-full-screen hover:
 * Show full-screen-hover.svg.
 */
    .fullScreenButton:hover .fullScreenIconDefault,
    .fullScreenButton.isFullScreen:not(:active):hover .fullScreenIconActive
    {
        display: none;
    }

    .fullScreenButton:hover .fullScreenIconHover
    {
        display: block;
    }

    /*
 * Non-full-screen pressed:
 * Show full-screen-active.svg.
 *
 * These rules come after :hover so the pressed state takes priority.
 */
    .fullScreenButton:not(.isFullScreen):active .fullScreenIconDefault,
    .fullScreenButton:not(.isFullScreen):active .fullScreenIconHover
    {
        display: none;
    }

    .fullScreenButton:not(.isFullScreen):active .fullScreenIconActive
    {
        display: block;
    }

    /*
 * Full-screen default:
 * Show full-screen-active.svg.
 */
    .fullScreenButton.isFullScreen .fullScreenIconActive
    {
        display: block;
    }

        .fullScreenButton.isFullScreen .fullScreenIconActive path
        {
            fill: #0376ec;
        }

    /*
 * Full-screen pressed:
 * Reverse the image and show full-screen.svg.
 */
    .fullScreenButton.isFullScreen:active .fullScreenIconActive,
    .fullScreenButton.isFullScreen:active .fullScreenIconHover
    {
        display: none;
    }

    .fullScreenButton.isFullScreen:active .fullScreenIconDefault
    {
        display: block;
    }

        .fullScreenButton.isFullScreen:active .fullScreenIconDefault path
        {
            fill: #0253a5;
        }

    .verticalNav
    {
        position: relative;
    }

        .verticalNav .navItem
        {
            display: block;
            margin: 0;
            font-weight: 400;
        }

            .verticalNav .navItem .navLink
            {
                padding: 0.625rem 1.78rem;
                display: block;
                position: relative;
                z-index: 3;
            }

        /*.verticalNav .navItem a:hover
        {
            background-color: var(--pageBackColor);
        }

        .verticalNav .navItem a:active
        {
            background-color: var(--contentBackColorActive);
        }

            .verticalNav .navItem a:hover::before,
            .verticalNav .navItem a:active::before
            {
                content: ' ';
                position: absolute;
                display: inline;
                left: 0.5rem;
                top: 0.4rem;
                bottom: 0.4rem;
                width: 5px;
                background-color: var(--buildmatrixBlue);
                border-radius: 9999px;
            }*/

        .verticalNav .movingBackground
        {
            z-index: 2;
            position: absolute;
            background-color: var(--movingBackgroundHoverColour);
            transition: all 0.1s ease;
        }

    .verticalNav .movingBackground::before
    {
        content: ' ';
        position: absolute;
        display: inline;
        left: 0.5rem;
        top: 0.4rem;
        bottom: 0.4rem;
        width: 0.3125rem;
        background-color: var(--buildmatrixBlue);
        border-radius: 9999px;
    }
    /************************************ Forms *******************************************/

input, select, textarea, .bm-dropdown
{
    background-color: var(--contentBackColor) !important;
    color: var(--primaryTextColor);
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}
    input:autofill,
    input:-webkit-autofill
    {
        -webkit-text-fill-color: var(--primaryTextColor);
        box-shadow: 0 0 0 var(--contentBackColor) white inset;
        -webkit-box-shadow: 0 0 0 1000px var(--contentBackColor) inset;
        caret-color: var(--primaryTextColor);
        background-color: var(--contentBackColor) !important;
        -webkit-background-clip: text;
        background-clip: text;
    }

        input[type="radio"]
        {
            box-sizing: content-box;
            /* Remove default browser styling */
            -webkit-appearance: none;
            appearance: none;
            /* Outer circle sizing */
            width: 1.25rem;
            height: 1.25rem;
            border: 1px solid var(--primaryTextColor);
            border-radius: 50%;
            outline: none;
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
            font-size: 0;
            margin: 0.1875rem;
        }

            input[type="radio"]:disabled
            {
                border-color: var(--disabledTextColor);
            }

            input[type="radio"]:hover
            {
                border-color: var(--buildmatrixBlueHover);
            }

    .light-text input[type="radio"]:disabled, .light-text input[type="radio"]:hover
    {
        border-color: var(--lightTextColor);
        cursor: not-allowed;
    }

    input[type="radio"]:checked
    {
        /* The percentage controls the size of the inner dot */
        background: radial-gradient(circle, var(--buildmatrixBlue) 35%, transparent 40%);
        border-color: var(--radioCheckedBorderColor);
    }
        input[type="radio"]:checked:hover
        {
            border-color: var(--buildmatrixBlueHover);
        }

            input[type="radio"]:checked:hover:disabled
            {
                background: radial-gradient(circle, var(--buildmatrixBlueHover) 35%, transparent 40%);
            }


            input[type="radio"]:checked:hover:not(:disabled):not(:active)
            {
                /* The percentage controls the size of the inner dot */
                background: radial-gradient(circle, var(--buildmatrixBlueHover) 35%, transparent 40%);
                border-color: var(--buildmatrixBlueHover);
            }

    input[type="radio"]:active:not(:disabled)
    {
        background: radial-gradient(circle, var(--buildmatrixBlueActive) 35%, transparent 40%);
        border-color: var(--buildmatrixBlueActive) !important;
    }

    input:disabled, select:disabled, textarea:disabled, fieldset:disabled label
    {
        background-color: var(--contentBackColor);
        color: var(--disabledTextColor);
        /* Safari/iOS Safari */
        -webkit-text-fill-color: var(--disabledTextColor);
        opacity: 1;
    }

        input.light-text:disabled, select.light-text:disabled, textarea.light-text:disabled, fieldset:disabled label.light-text
        {
            color: var(--lightTextColor);
        }

        ::placeholder, input:disabled::placeholder
        {
            color: var(--placeholderText);
            -webkit-text-fill-color: var(--placeholderText);
        }

    fieldset
    {
        margin-inline: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
        padding-bottom: 1.875rem;
    }

        fieldset input:not([type="checkbox"]):not([type="radio"]), fieldset select, fieldset textarea, .bm-dropdown-control
        {
            padding: calc((2.5rem - (1em * 1.7)) / 2) 0.875rem;
            line-height: 1.7;
            width: 100%;
            float: left;
            border: solid 1px var(--borderColor);
            position: relative;
            z-index: 0;
        }

        fieldset .k-dropdownlist
        {
            width: 100%;
            border: 0;
            float: left;
            border: solid 1px var(--borderColor);
            position: relative;
            z-index: 0;
        }

        fieldset input:not([type="checkbox"]):not([type="radio"]):not(.first-row), fieldset select:not(.first-row), fieldset textarea:not(.first-row), fieldset .bm-dropdown:not(.first-row)
        {
            margin-top: -1px;
        }

        fieldset input.half-width:not(.first-col),
        fieldset input.quarter-width:not(.first-col),
        fieldset input.three-quarter-width:not(.first-col),
        fieldset .bm-dropdown.half-width:not(.first-col),
        fieldset .bm-dropdown.quarter-width:not(.first-col),
        fieldset .bm-dropdown.three-quarter-width:not(.first-col)
        {
            margin-left: -1px;
        }

        fieldset input.half-width:not(.first-col),
        fieldset .bm-dropdown.half-width:not(.first-col)
        {
            width: calc(50% + 1px) !important;
        }

        fieldset input.quarter-width:not(.first-col),
        fieldset .bm-dropdown.quarter-width:not(.first-col)
        {
            width: calc(25% + 1px) !important;
        }

        fieldset input.three-quarter-width:not(.first-col),
        fieldset .bm-dropdown.three-quarter-width:not(.first-col)
        {
            width: calc(75% + 1px) !important;
        }

    .inline-check-radio-wrapper
    {
        display: flex;
        align-items: center;
        gap: 0.5625rem;
        width: fit-content;
        cursor: pointer;
    }

        .inline-check-radio-wrapper span
        {
            font-size: 0.875rem;
        }

.twofa-input
{
    text-align: center;
    font-size: 1.3rem;
    letter-spacing: 0.4rem;
    padding: calc((3.125rem - (1em * 1.6)) / 2) 0.875rem !important;
}

[data-theme="dark"]
{
    .user-security input:not(:disabled),
    .user-security select:not(:disabled),
    input[type=radio],
    input[type=checkbox],
    .user-security .bm-dropdown:not(:has(button:disabled)),
    .user-security .bm-dropdown-control:not(:disabled),
    .bm-dropdown:has(.bm-dropdown-control-open),
    .bm-dropdown-control-open
    {
        background-color: var(--pageBackColor) !important;
    }

    .user-security input:autofill,
    .user-security input:-webkit-autofill
    {
        box-shadow: 0 0 0 var(--pageBackColor) white inset;
        -webkit-box-shadow: 0 0 0 1000px var(--pageBackColor) inset;
    }
}

.scrollable
{
    overflow-y: auto;
    /* Important for Chrome / Edge */
    scrollbar-width: auto;
    scrollbar-color: auto;
}

    .scrollable::-webkit-scrollbar
    {
        width: 15px;
    }

    .scrollable::-webkit-scrollbar-track
    {
        background: var(--pageBackColor);
    }

    .scrollable::-webkit-scrollbar-thumb
    {
        background: var(--placeholderText);
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        background-clip: padding-box;
        border-radius: 7px;
        min-height: 27px;
    }

    /* Remove arrow buttons */
    .scrollable::-webkit-scrollbar-button
    {
        width: 0;
        height: 0;
        display: none;
    }

[data-theme="dark"]
{
    .scrollable::-webkit-scrollbar-track
    {
        background: var(--contentBackColor);
    }
}

.chevron
{
    display: inline-block;
    border-style: solid;
    border-width: 1px 1px 0 0; /* Thickness of the chevron lines */
    height: 0.5rem; /* Height of the chevron side */
    width: 0.5rem; /* Width of the chevron side */
    vertical-align: middle;
    margin-right: 0.3rem;
}

    /* Directional rotations */
    .chevron.right
    {
        transform: rotate(45deg);
    }

    .chevron.left
    {
        transform: rotate(-135deg);
    }

    .chevron.up
    {
        transform: rotate(-45deg);
    }

    .chevron.down
    {
        transform: rotate(135deg);
    }

h1 .chevron
{
    border-width: 2px 2px 0 0;
    height: 0.65rem;
    width: 0.65rem;
    margin: 0 0.7375rem 0 0.4375rem;
}

/* Avoid stacking both modal overlays. */
body:has(#components-reconnect-modal[open])
.session-timeout::backdrop
{
    background: transparent;
}

/**************************************************************************************/
.valid.modified:not([type=checkbox])
{
    /*outline: 1px solid #26b050;*/
}

input[aria-invalid="true"],
input[aria-invalid="true"]:focus,
input.invalid,
input.invalid:focus,
fieldset .k-dropdownlist[aria-invalid="true"]
{
    border-color: var(--error) !important;
    z-index: 2 !important;
}

.invalid, .invalid::placeholder
{
    border-color: var(--error) !important;
}

    .text-danger
    {
        color: var(--error);
    }

fieldset input.last-row.invalid, fieldset select.last-row.invalid, fieldset textarea.last-row.invalid
{
    border-bottom: solid 1px var(--error);
}
/*[data-theme="dark"]
{
    fieldset .k-dropdownlist[aria-invalid="true"],
    .invalid, .text-danger
    {
        outline: solid 2px var(--error);
        outline-offset: -2px;
    }
}*/


.validation-message
{
    color: var(--error);
}

    .validation-dialog ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }

.single-field-error, .single-field-error-below
{
    color: var(--error);
    text-align: center;
    font-size: 0.625rem;
}

    .single-field-error
    {
        line-height: 1.25;
        padding: 0.34375rem 0;
        margin-top: calc((((1em * 1.4) + (0.34375rem * 2)) * -1) + 1.5px);
    }

.single-field-error-below
{
    position: absolute;
    bottom: 0.75rem;
    margin: 0;
    left: 0;
    right: 0;
}

.single-field-error:empty, .single-field-error-below:empty
{
    display: none;
}

    .validation-dialog li
    {
        margin: 0;
        padding: 0;
    }

    .blazor-error-boundary
    {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
        padding: 1rem 1rem 1rem 3.7rem;
        color: white;
    }

        .blazor-error-boundary::after
        {
            content: "An error has occurred."
        }

    .validation-alert ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .validation-alert li
    {
        margin: 0;
        padding: 0;
    }