.mud-snackbar.mud-alert-filled-warning {
    color: var(--mud-palette-text-primary) !important;
}

/* Limit muddrawer width*/
.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom {
    border-top-left-radius: var(--connect-border-radius);
    border-top-right-radius: var(--connect-border-radius);
    max-width: var(--connect-max-width);
    left: 50% !important;
    transform: translateX(-50%);
}

.mud-dialog-container {
    max-width: var(--connect-max-width);
}
.mud-dialog-container.mud-dialog-bottomcenter, .mud-dialog-container.mud-dialog-center {
    /* Center the width-capped container WITHOUT a transform. This container is
       the full-viewport fixed holder for the dialog's position:fixed overlay
       (scrim), which is a child of it. A transform here makes the container the
       containing block for that fixed overlay, so the backdrop only covers this
       ~1200px box instead of the whole screen — on wide monitors the edges show
       through. left:0 + right:0 + margin-inline:auto centers the container with
       no transform, so the overlay covers the full viewport again. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    transform: none;
    max-width: var(--connect-max-width); /* Limit the width */
    width: 100%; /* Ensure it scales within the screen */
    padding-bottom: 0px !important;
}

/* The desktop new look (the sidebar is in the page from 960px): what slides up from the bottom on a phone opens as a
   modal in the middle of the screen instead. Covers the drawer dialogs (ConnectDialogDrawer and MenuDialogDrawer,
   positioned by the .dialog-drawer class) and bottom MudDrawers such as the check-in. */
@media (min-width: 960px) {
    body:has(.side-nav) .mud-dialog-container.mud-dialog-bottomcenter {
        align-items: center;
    }

    body:has(.side-nav) .mud-dialog.dialog-drawer {
        position: relative;
        bottom: auto;
        width: min(560px, calc(100vw - 48px)) !important;
        border-radius: 16px !important;
        transform: none;
        animation: desktop-modal-in 160ms ease-out forwards !important;
    }

    body:has(.side-nav) .mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.mud-drawer--open {
        top: 50%;
        bottom: auto;
        width: min(560px, calc(100vw - 48px));
        max-height: calc(100dvh - 64px);
        border-radius: 16px;
        transform: translate(-50%, -50%);
        animation: desktop-modal-in 160ms ease-out;
    }

    /* A calendar opens with the same corner radius as the dialogs and cards it opens over. */
    body:has(.side-nav) .mud-popover-open:has(.mud-picker-calendar-header) {
        border-radius: 1rem;
    }

    /* The check-in is as tall as what it shows, up to the screen, so a single question is not left in a tall empty box;
       others, like the emoji picker, keep their own height. The check-in view reads the cap to fit inside it. */
    body:has(.side-nav) .mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.mud-drawer--open.checkin-drawer {
        --checkin-drawer-max-height: min(760px, calc(100dvh - 64px));
        height: auto;
        max-height: var(--checkin-drawer-max-height);
        overflow-y: auto;
    }


    body:has(.side-nav) .mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.mud-drawer--closed {
        visibility: hidden;
    }

    /* Full-screen dialogs open as a large modal instead of covering the page. What really needs the whole
       screen keeps it: a PDF, a video, a zoomable image, the CORE print-all and the D.R.I.V.E. report. */
    body:has(.side-nav) .mud-dialog-container:has(> .mud-dialog-fullscreen) {
        align-items: center;
        justify-content: center;
    }

    body:has(.side-nav) .mud-dialog.mud-dialog-fullscreen:not(:has(
        .tc-pdf-viewer-root, video, .tc-image-pan-zoom, .core-print-all-panel, .drive-gauge-container)) {
        width: min(960px, calc(100vw - 64px));
        height: min(900px, calc(100dvh - 64px));
        margin: auto;
        border-radius: 16px;
        animation: desktop-modal-in 160ms ease-out;
        /* A dialog built on ConnectDialogBase pins its action bar to the viewport's bottom edge. That was the dialog's
           bottom when it filled the screen; now it left the buttons stranded below the modal. A transform makes the
           modal the box that fixed children are placed against. */
        transform: translateZ(0);
    }

    /* A full-screen dialog's layout sizes itself to the viewport (100dvh less its footer's 40px). In the modal above
       that is taller than the dialog, so the dialog scrolled into blank space and a footer button could sit below
       what was reachable. In the modal the layout fills the dialog's own height instead. */
    body:has(.side-nav) .mud-dialog.mud-dialog-fullscreen:not(:has(
        .tc-pdf-viewer-root, video, .tc-image-pan-zoom, .core-print-all-panel, .drive-gauge-container))
        .tc-layout-container-content {
        min-height: 100%;
    }

    body:has(.side-nav) .mud-dialog.mud-dialog-fullscreen:not(:has(
        .tc-pdf-viewer-root, video, .tc-image-pan-zoom, .core-print-all-panel, .drive-gauge-container))
        .tc-layout-connect-scroll {
        height: 100%;
        max-height: 100%;
    }

    /* A dialog dims what is behind it but does not blur it: the blur softened the sidebar behind every dialog. The
       dialog centres in the content beside the sidebar rather than the whole window, so it never sits over the
       sidebar's edge. */
    body:has(.side-nav):not(:has(.tc-no-side-nav)) .mud-overlay-dialog,
    body:has(.side-nav):not(:has(.tc-no-side-nav)) .tc-dialog-backdrop {
        backdrop-filter: none;
    }

    body:has(.side-nav):not(:has(.tc-no-side-nav)) .mud-overlay-dialog .mud-overlay-scrim.mud-overlay-dark {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }

    /* The container spans the screen rather than the 1200px cap above: that cap, centred on a wide screen and less
       the sidebar's padding, left a wide dialog 880px to open in. Each dialog's own width rule sets its size. */
    body:has(.side-nav):not(:has(.tc-no-side-nav)) .mud-dialog-container {
        box-sizing: border-box;
        padding-left: var(--side-nav-width, 0px);
        max-width: none;
    }

    /* A modal that asks MudBlazor for ExtraLarge (up to 1920px) was held to 1200px by the container's cap; it keeps
       that limit itself now the container spans the screen. */
    body:has(.side-nav):not(:has(.tc-no-side-nav)) .mud-dialog:not(.mud-dialog-fullscreen) {
        max-width: min(100%, var(--connect-max-width));
    }

    /* An edge on every modal, so a dialog reads as its own surface over the dimmed page rather than as part of it.
       Important because tc-components-enhanced.css clears every dialog's border with !important. */
    body:has(.side-nav) .mud-dialog,
    body:has(.side-nav) .mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.mud-drawer--open {
        border: 1px solid var(--connect-colors-border, var(--mud-palette-divider)) !important;
    }

    /* The dialog sizing standard. A dialog that declares a size (DesktopModalAttribute) opens at it however it was
       opened, full screen or as a modal of MudBlazor's own width: Compact 480, Standard 640, Wide 960, Extra wide
       1280. If it asks, it is only as tall as its content, up to the screen, then it scrolls. The widths are
       important because some dialogs set an inline width, and the legacy .floating-dialog base pins its max-width with
       !important. */
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-compact) > .mud-dialog {
        width: min(480px, calc(100vw - var(--side-nav-width, 0px) - 64px)) !important;
        max-width: none !important;
    }

    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-standard) > .mud-dialog {
        width: min(640px, calc(100vw - var(--side-nav-width, 0px) - 64px)) !important;
        max-width: none !important;
    }

    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-wide) > .mud-dialog {
        width: min(960px, calc(100vw - var(--side-nav-width, 0px) - 64px)) !important;
        max-width: none !important;
    }

    /* Extra wide also takes the screen's height: a plan's dashboard scrolls a long way, and 900px left most of a
       large screen empty. */
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-extrawide) > .mud-dialog {
        width: min(1280px, calc(100vw - var(--side-nav-width, 0px) - 64px)) !important;
        max-width: none !important;
        height: calc(100dvh - 64px);
    }

    /* A sized dialog opens beside the sidebar while it has room there (its width, the 320px sidebar and a 32px margin
       each side). With less, it was squeezed beside a dimmed sidebar that sat empty, so it's centred on the whole
       screen instead, over the sidebar. */
    @media (max-width: 1023.98px) {
        body:has(.side-nav):not(:has(.tc-no-side-nav)) .mud-dialog-container:has(> .mud-overlay.tc-modal-standard) {
            padding-left: 0;
        }

        body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-standard) > .mud-dialog {
            width: min(640px, calc(100vw - 64px)) !important;
        }
    }

    @media (max-width: 1343.98px) {
        body:has(.side-nav):not(:has(.tc-no-side-nav)) .mud-dialog-container:has(> .mud-overlay.tc-modal-wide) {
            padding-left: 0;
        }

        body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-wide) > .mud-dialog {
            width: min(960px, calc(100vw - 64px)) !important;
        }
    }

    @media (max-width: 1663.98px) {
        body:has(.side-nav):not(:has(.tc-no-side-nav)) .mud-dialog-container:has(> .mud-overlay.tc-modal-extrawide) {
            padding-left: 0;
        }

        body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-extrawide) > .mud-dialog {
            width: min(1280px, calc(100vw - 64px)) !important;
        }
    }

    /* In a sized dialog the content fills it: the layout's own width caps (600px content-max-width, or a dialog's
       ChildContentMaxWidth) left a narrow column in a wider dialog. The dialog's size is the one width that counts. */
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"]) .tc-layout-child-content-container {
        max-width: none !important;
    }

    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-fit) > .mud-dialog.mud-dialog-fullscreen {
        height: auto;
        max-height: min(900px, calc(100dvh - 64px));
    }

    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-fit) .mud-dialog-content,
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-fit) .tc-dialog-content {
        overflow-y: auto;
    }

    /* The dialog bases give a full-screen dialog's content the height of the screen, which is what held a short form
       open to the modal's full height. */
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-fit) .connect-dialog-content,
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-fit) .tc-dialog-content {
        height: auto !important;
        min-height: 0 !important;
    }

    /* A dialog on ConnectDialogBase, or one using the legacy dialog-actions class, pins its action bar over the bottom of
       its content. In a modal that is only as tall as its content, that bar sat over the last field; here it takes its
       place under the content instead. */
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-fit) .mud-appbar.mud-appbar-fixed-bottom,
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-fit) .dialog-actions {
        position: relative;
    }

    /* The layout clips its own sideways overflow, which makes it a scroll box of its own, and a sticky footer sticks to the
       nearest one: so it never stuck to the dialog, and a tall form's Save sat past the bottom until scrolled to. The
       dialog's content is the one that scrolls. */
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-fit) .tc-layout-container-content {
        overflow: visible;
    }

    /* The footer sits in a wrapper that is only as tall as itself, and a sticky element cannot leave its parent, so the
       wrapper is what sticks to the bottom of the dialog, with the dialog's own colour behind it. */
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-fit) .mud-container:has(> #tc-layout-actionbar) {
        position: sticky;
        bottom: 0;
        z-index: 1000;
        background: var(--connect-colors-app-background);
    }

    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay.tc-modal-fit) .tc-layout-connect-scroll {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    /* A sized dialog on TCLayout keeps its title and footer in place and scrolls only what is between them. When the
       whole layout scrolled, the close button went out of view, and the scrollbar ran into the dialog's rounded top
       corner. */
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"])
        :is(.mud-dialog-content, .mud-dialog):has(> .tc-layout-container-content) {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"])
        :is(.mud-dialog-content, .mud-dialog) > .tc-layout-container-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"])
        :is(.mud-dialog-content, .mud-dialog) > .tc-layout-container-content > .tc-layout-child-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-top: 12px !important;
    }

    /* With no footer, the last row would sit on the dialog's bottom edge. */
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"])
        :is(.mud-dialog-content, .mud-dialog) > .tc-layout-container-content
        > .tc-layout-child-content.tc-layout-no-bottom-padding {
        padding-bottom: 20px !important;
    }

    /* A sized dialog already scrolls its content under a pinned title and footer, so a bounded region inside it
       would give a second scrollbar. */
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"]) .tc-dialog-scroll-region {
        max-height: none;
        overflow-y: visible;
    }

    /* Every sized dialog has the same surface, painted once on the dialog so title, content and footer share it.
       Dialogs had set their own: accent, menu background, or a gradient behind the layout or its header. Cards inside
       keep their colours. The importants beat the inline backgrounds a dialog sets on itself. */
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"]) > .mud-dialog {
        background:
            radial-gradient(ellipse at top right,
                color-mix(in srgb, var(--mud-palette-primary) 14%, transparent),
                transparent 60%),
            linear-gradient(160deg, var(--connect-colors-menu-background), var(--connect-colors-accent)) !important;
    }

    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"])
        :is(.mud-dialog-content, .mud-dialog) > .tc-layout-container-content,
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"])
        :is(.mud-dialog-content, .mud-dialog) > .tc-layout-container-content > .tc-layout-titlebar-content,
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"])
        .tc-layout-container-content .tc-layout-actions-content,
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"])
        .tc-layout-container-content .mud-container:has(> .tc-layout-actions-content),
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"]) .tcdl-header,
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"]) .tcdl-footer,
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"]) .tc-dialogtable-title,
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"])
        .mud-dialog-actions > .mud-appbar,
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"])
        :is(.connect-floating-dialog-content, .fixed-height) > .menu-background {
        background: transparent !important;
    }

    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay[class*="tc-modal-"]) .tc-dialogtable-content {
        padding-top: 12px;
    }

    /* A wide dialog gets a line under its pinned title, so the long content scrolling under it has an edge to pass
       beneath. Compact and standard dialogs are short enough to go without. */
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay:is(.tc-modal-wide, .tc-modal-extrawide))
        :is(.mud-dialog-content, .mud-dialog) > .tc-layout-container-content > .tc-layout-titlebar-content,
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay:is(.tc-modal-wide, .tc-modal-extrawide))
        :is(.tcdl-header, .tc-dialogtable-title) {
        border-bottom: 1px solid var(--connect-colors-border);
        padding-bottom: 12px;
    }

    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay:is(.tc-modal-wide, .tc-modal-extrawide))
        :is(.mud-dialog-content, .mud-dialog) > .tc-layout-container-content > .tc-layout-child-content,
    body:has(.side-nav) .mud-dialog-container:has(> .mud-overlay:is(.tc-modal-wide, .tc-modal-extrawide))
        .tcdl-scroll {
        padding-top: 16px !important;
    }

    /* A menu that opens as a dialog (MenuDialogDrawer) is a short list, so it is a small popover beside the button that
       opened it, with no dimming of the page, rather than a modal. Its position is set when it opens. */
    body:has(.side-nav) .mud-dialog-container:has(.dialog-drawer .menu-dialog-list) .mud-overlay-dialog,
    body:has(.side-nav) .mud-dialog-container:has(.dialog-drawer .menu-dialog-list) .mud-overlay-scrim {
        background: transparent !important;
        backdrop-filter: none !important;
    }

    body:has(.side-nav) .mud-dialog.dialog-drawer:has(.menu-dialog-list) {
        width: min(300px, calc(100vw - 24px)) !important;
        max-height: calc(100dvh - 24px);
        border-radius: 12px !important;
        /* An outline, drawn as a ring because dialogs have their border removed, so the menu reads as its own surface
           against the page and the dialog behind it. */
        box-shadow: 0 0 0 1px var(--connect-colors-border), 0 12px 32px rgba(0, 0, 0, 0.4);
    }

    body:has(.side-nav) .mud-dialog.dialog-drawer .menu-dialog-list {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* The menu is one rounded surface. Its rows are square, so they clip to its corners rather than poke out of them, and
       the content area inside has no corner radius of its own to disagree with the menu's. */
    body:has(.side-nav) .mud-dialog.dialog-drawer:has(.menu-dialog-list) {
        overflow: hidden !important;
    }

    body:has(.side-nav) .mud-dialog.dialog-drawer:has(.menu-dialog-list) .mud-dialog-content {
        border-radius: 0 !important;
    }

    /* A line only between rows, and under a title when there is one: not above the first row of a menu with no title,
       nor under the last. */
    body:has(.side-nav) .mud-dialog.dialog-drawer:has(.menu-title-blank) .menu-dialog-list {
        border-top: none !important;
    }

    body:has(.side-nav) .mud-dialog.dialog-drawer .menu-dialog-list > [role="menuitem"]:last-child,
    body:has(.side-nav) .mud-dialog.dialog-drawer .menu-dialog-list .menu-list-item:last-child {
        border-bottom: none !important;
    }

    /* A row lights up under the pointer. */
    body:has(.side-nav) .mud-dialog.dialog-drawer .menu-dialog-list > [role="menuitem"]:not(.hover-default):hover {
        background: var(--mud-palette-action-default-hover) !important;
    }

    body:has(.side-nav) .mud-dialog.dialog-drawer .custom-title:has(.menu-title-blank) {
        display: none;
    }

    /* A dialog's close button sits at the top right, where desktop users look for it. A back arrow that steps
       through a dialog's own screens stays on the left. */
    body:has(.side-nav) .mud-dialog .tc-layout-nav-close {
        order: 99;
    }

    /* The pages the sidebar opens directly (the wide list pages) need no back arrow beside it. A wide page reached
       from another page, such as CORE comparison from the dashboard, adds .keep-back-button to keep it. */
    body:has(.side-nav) .mud-layout:has(.desktop-list-width):not(:has(.keep-back-button)) .tc-layout-nav-button:not(.tc-layout-nav-close) {
        display: none;
    }
}

/* A page can supply a richer title (a group's name and icon) and a line that only the desktop sidebar wants. Both are
   hidden unless the sidebar's own stylesheet shows them, and that stylesheet is only on the page while the sidebar is,
   so the defaults live here, where they are always loaded. */
.tc-group-title {
    display: none;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.show-with-side-nav {
    display: none;
}

/* DialogHelpers.PhoneFullscreenFormDialog: a modal that fills a phone's screen. Wider than that it stays a modal. */
@media (max-width: 599.98px) {
    .mud-dialog-container:has(> .mud-overlay.tc-phone-fullscreen) > .mud-dialog {
        margin: 0;
        width: 100%;
        max-width: 100% !important;
        height: 100%;
        max-height: 100% !important;
        border-radius: 0 !important;
    }

    /* The dialog's content scrolls, and the footer sticks to its bottom, as the desktop's fitted modals do (see
       tc-modal-fit): otherwise Submit started below the screen. */
    .mud-dialog-container:has(> .mud-overlay.tc-phone-fullscreen) .tc-layout-container-content {
        overflow: visible;
    }

    .mud-dialog-container:has(> .mud-overlay.tc-phone-fullscreen) .mud-container:has(> #tc-layout-actionbar) {
        position: sticky;
        bottom: 0;
        z-index: 1000;
        background: var(--connect-colors-app-background);
    }
}

/* The desktop new look draws a divider as a plain 1px line the width of what it divides, not a 2px bar that fades out
   toward its ends. */
@media (min-width: 960px) {
    body:has(.side-nav) .mud-divider,
    body:has(.side-nav) .tc-divider {
        background: var(--connect-colors-border) !important;
        height: 1px !important;
        border-radius: 0 !important;
    }
}

/* A dialog that supplies its own header leaves MudBlazor's title empty, but the title keeps its bottom border, which
   showed as a stray line across the very top of the dialog. */
@media (min-width: 960px) {
    body:has(.side-nav) .mud-dialog .mud-dialog-title {
        border-bottom: none;
    }
}

@keyframes desktop-modal-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.mud-button-filled.mud-button-filled-info:hover, .mud-button-filled.mud-button-filled-info:focus-visible
{
    filter: brightness(90%);
    background: var(--mud-palette-info) !important;
}

.mud-button-filled.mud-button-filled-primary {
    color: var(--mud-palette-background);
}

.mud-input {
    background: var(--mud-palette-drawer-background);
    border-radius: var(--connect-border-radius);
}

    .mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
        padding: 10px 16px;
    }

.mud-input-label-outlined {
    transform: translate(14px,12px) scale(1);
    background: transparent;
    font-size: 16px !important;
    font-weight: 400 !important;
}

/*Modify mudchip look*/
.mud-chip-outlined.connect-mod {
    background-color: var(--mud-palette-drawer-background);
    color: var(--mud-palette-text-secondary);
    border-style: solid;
    border-width: 1px;
    border-radius: 999px;
    font-weight: 700 !important;
    font-size: 12px !important;
    min-width: fit-content;
}

.mud-chip-outlined.mud-chip-selected.connect-mod {
    background-color: var(--mud-palette-text-secondary);
    color: var(--mud-palette-background);
    font-weight: 700 !important;
    font-size: 12px !important;
    min-width: fit-content;
}

    .mud-chip-outlined.mud-chip-selected.connect-mod:hover {
        background-color: var(--mud-palette-text-secondary) !important;
    }

.mud-chip-outlined.connect-mod:hover {
    background-color: var(--mud-palette-drawer-background) !important;
}

    .mud-chip-outlined.connect-mod:hover:not(.mud-disabled), .mud-chip-filled:focus-visible:not(.mud-disabled) {
        background-color: var(--mud-palette-drawer-background);
    }

/*Modify mudButton look*/
.mud-button-filled:disabled {
    color: var(--mud-palette-background) !important;
    box-shadow: none;
    background-color: var(--mud-palette-action-default) !important;
}

.mud-button-outlined {
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-text-secondary);
}

.mud-dialog-title > .mud-typography-h6 {
    font-size: 1.375rem;
    font-weight: 700;
}

.mud-dialog-title {
    border-bottom: 1px solid var(--connect-colors-border);
    padding-bottom: 20px !important;
}

.mud-ripple:after {
    background-image: radial-gradient(circle, var(--connect-colors-ripple-background) 10%,transparent 10.01%) !important;
}

.mud-ripple {
    position: relative;
    overflow: hidden;
}

.mud-switch,
.mud-switch .mud-switch-span,
.mud-switch .mud-switch-base,
.mud-switch .mud-ripple {
    overflow: visible !important;
}

.mud-switch .mud-switch-span {
    width: 58px !important;
    height: 38px !important;
    padding: 12px !important;
    position: relative !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.mud-switch .mud-switch-base {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.mud-switch .mud-switch-button [class*="mud-switch-thumb"] {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.mud-switch .mud-switch-track {
    width: 100% !important;
    height: 100% !important;
    border-radius: 7px !important;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.mud-overlay .mud-overlay-scrim.mud-overlay-dark {
    background-color:rgba(0,0,0,0.75) !important;
}

.mud-snackbar {
    border-radius: var(--connect-border-radius);
}

    .mud-snackbar.mud-snackbar-surface {
        background: var(--tc-snackbar-surface-background) !important;
    }

    .mud-snackbar.mud-alert-outlined-success {
        color: var(--connect-colors-high-emphasis);
        --tc-snackbar-surface-background: var(--connect-colors-green-snackbar);
        border-color: var(--connect-colors-green);
    }

    .mud-snackbar.mud-alert-outlined-normal {
        color: var(--connect-colors-high-emphasis);
        --tc-snackbar-surface-background: var(--connect-colors-mb-dark);
        border-color: var(--connect-colors-border);
    }

    .mud-snackbar.mud-alert-outlined-info {
        color: var(--connect-colors-high-emphasis);
        --tc-snackbar-surface-background: var(--connect-colors-primary-snackbar);
        border-color: var(--connect-colors-primary);
    }

    .mud-snackbar.mud-alert-outlined-warning {
        color: var(--connect-colors-high-emphasis);
        --tc-snackbar-surface-background: var(--connect-colors-amber-snackbar);
        border-color: var(--connect-colors-amber);
    }

    .mud-snackbar.mud-alert-outlined-error {
        color: var(--connect-colors-high-emphasis);
        --tc-snackbar-surface-background: var(--connect-colors-alert-snackbar);
        border-color: var(--connect-colors-alert);
    }


.high-contrast .mud-snackbar {
    color: var(--connect-colors-high-emphasis) !important;
    border-color: var(--connect-colors-border) !important;
}

    .high-contrast .mud-snackbar.mud-snackbar-surface {
        background: var(--connect-colors-accent) !important;
    }

    .high-contrast .mud-snackbar.mud-alert-outlined-success > .mud-snackbar-icon {
        color: var(--connect-colors-green) !important;
    }

    .high-contrast .mud-snackbar.mud-alert-outlined-warning > .mud-snackbar-icon {
        color: var(--connect-colors-amber) !important;
    }

    .high-contrast .mud-snackbar.mud-alert-outlined-error > .mud-snackbar-icon {
        color: var(--connect-colors-alert) !important;
    }

.mud-table {
    background: transparent !important;
}

.mud-table-empty-row {
    background: transparent !important;
}
.mud-table .mud-table-pagination .mud-table-pagination-toolbar{
    min-height: 66px !important;
}