/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    NOTE (>_<): ---------------------
    brave.css must ONLY be updated in
    BraveCloudWeb.Framework!
        1. The Module level Component project depends on BraveCloudWeb.Framework
        2. When the BraveCloudWeb version is uplifted in your module it pulls in brave.css
        3. When your solution builds, a copy is made of brave.css
                from the Component project wwwroot > UI project wwwroot
    ---------------------------------

    --- Add styles here sparingly!
    --- 1. Avoid in-line styles!
    --- 2. Use MudBlazor classes and Framework as much as possible
            ** Breakpoints: https://mudblazor.com/features/breakpoints
            ** MudGrid:     https://mudblazor.com/components/grid
            ** Display:     https://mudblazor.com/wasm/features/display
            ** Spacing:     https://mudblazor.com/wasm/features/spacing
            ** Flexbox:     https://mudblazor.com/features/flex
    --- 3. For Page/Component specific styles in special cases use "CSS Isolation"
    --- 4. Remember to test colours in Dark Mode!

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
        --------- MUDBLAZOR override related ------------------------------
        --------- MUDBLAZOR override related ------------------------------
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto/Roboto-Regular.ttf");
}

/* MB - MudTheme darkmode bug work-around */
.mud-input {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* MB - <hr> height fix after upgrade work-around (divider after the usercard in navmenu became tall) */
div.b-usercard + hr {
    max-height: 1px !important;
}

/* MB - Sticky Breadcrumb & Buttons Bar */
.mud-toolbar-dense {
    background-color: var(--mud-palette-background);
    height: 48px;
    top: 64px;
    position: sticky;
    position: -webkit-sticky;
    z-index: 100;
}

.mud-scroll-to-top .visible {
    z-index: var(--mud-zindex-appbar);
}

@media (min-width: 600px) {
    .mud-toolbar {
        height: 64px;
        position: sticky;
        position: -webkit-sticky;
        z-index: 100;
    }
}

@media (min-width: 0) and (orientation: landscape) {
    .mud-toolbar {
        height: 48px;
    }
}

.mud-toolbar {
    display: flex;
    position: relative;
    align-items: center;
    height: 56px;
    position: sticky;
    position: -webkit-sticky;
    z-index: 100;
}

/* MB - Override th for position sticky where Action col is sticky */
.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    z-index: 3 !important;
}
/* MB - Override icon colour */
.mud-expand-panel .mud-expand-panel-icon {
    color: var(--mud-palette-secondary) !important;
}

/* MB - mud-picker + Responsive Container Field > input-control margin fix */
.mud-picker.b-resp-cntr-field .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* MB - Override MudSwitch > Track opacity (predominantly for dark mode) */
.mud-switch-base.mud-switch-disabled + .mud-switch-track {
    opacity: .30 !important;
}

/* MB - Tooltip z-index to appear above other elements */
.mud-tooltip-root .mud-popover-cascading-value {
    z-index: var(--mud-zindex-snackbar);
}

/* MB - Popovers containing a Picker to appear above other elements */
.mud-popover:has(.b-picker-stack-top) {
    z-index: calc(var(--mud-zindex-appbar) + 1) !important;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
        --------- BRAVE STYLES ------------------------------
        --------- BRAVE STYLES ------------------------------
        ** Prefix brave styles with 'b-'
        ** NOTE: For consistency, MudBlazor works in multiples of 4px for
                 padding and margins
        -----------------------------------------------------
        -----------------------------------------------------
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */
/* ---------------------------------------
--- BC - Text related
--------------------------------------- */
.b-text-deactivated {
    color: var(--mud-palette-error);
}

.b-text-disabled {
    color: var(--mud-palette-action-disabled) !important;
}

.b-text-force-wrap {
    word-break: break-all;
}

.b-text-lighten {
    color: var(--mud-palette-action-default) !important;
}

/* ---------------------------------------
--- BC - General
--------------------------------------- */
.b-breadcrumb-bar {
    z-index: calc(var(--mud-zindex-appbar) - 1);
}

.b-usercard {
    background-color: var(--mud-palette-drawer-background);
    color: var(--mud-palette-drawer-text);
}

.b-progress-circular-container {
    vertical-align: middle;
    display: inline-flex !important
}

.b-hyperlink {
    color: var(--mud-palette-secondary) !important;
    text-decoration: none;
}

    .b-hyperlink:hover {
        text-decoration: underline !important;
    }

.b-selected-item {
    background-color: var(--mud-palette-dark-hover)
}

.b-right-border {
    border-right: 1px solid var(--mud-palette-divider) !important;
}

.b-divider-invisible {
    margin: 0 !important;
    border: none !important;
}
/* ---------------------------------------
--- BC - <BraveGoLink>
--------------------------------------- */
#b-golink {
    color: var(--mud-palette-secondary) !important;
    text-decoration: none;
}
    #b-golink.b-text-disabled {
        color: var(--mud-palette-action-disabled) !important;
    }

/* ---------------------------------------
--- BC - Alignment
--------------------------------------- */
.b-centre-text {
    text-align: center !important;
}

.b-right-text {
    text-align: right !important;
}

.b-left-text {
    text-align: left !important;
}

.b-vertical-middle-text {
    vertical-align: middle !important;
}

.b-nowrap {
    white-space: nowrap;
}
.b-wrap {
    white-space: normal;
}
.b-pre-wrap {
    white-space: pre-wrap;
}

.b-scrollable {
    overflow-y: scroll;
}

.b-flex-center-contents {
    display: flex;
    justify-content: center;
}

.b-width-100 {
    width: 100%;
}

.b-overflow-x-hidden {
    overflow-x: hidden !important;
}

/* ---------------------------------------
--- BC - <BraveResponsiveFieldContainer />
--------------------------------------- */
#b-resp-field-cntr {
}

    #b-resp-field-cntr .mud-grid-spacing-xs-3 {
        width: calc(100% + 6px);
    }

/* ---------------------------------------
--- BC - #b-item-editor (used in ItemEditor style components > see CRM)
--------------------------------------- */
.b-item-editor {
}
    .b-item-editor .b-item-editor-left {
        padding-left: 16px !important;
        padding-top: 20px !important;
    }
    .b-item-editor .b-item-editor-right {
        padding-bottom: 24px !important;
    }
    .b-item-editor .b-item-editor-alert {
        margin: 20px 32px 0 20px !important;
    }
    /* ---------------------------------------
** NOTE: DEPRECATING this! Do not use anymore! **
** NOTE: DEPRECATING this! Do not use anymore! **
--- BC - #b-editor-items-card (used in ItemEditor style components > see MDS)
--------------------------------------- */
    #b-editor-items-card {
    }

    #b-editor-items-card > .mud-card-content {
        padding: 8px !important;
    }

    #b-editor-items-card .mud-grid-spacing-xs-3 {
        width: calc(100% + 12px);
    }

/* ---------------------------------------
--- BC - <BraveDrawerLayout />
--------------------------------------- */
#b-drawer {
}
    /* <MudDrawerHeader> */
    #b-drawer .b-drawer-header {
        padding: 4px 0 0 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid var(--mud-palette-divider) !important;
    }

    /* <MudDrawerHeader> */
    #b-drawer .b-drawer-linear-loader {
        margin: 0 0 24px 0 !important;
    }

    /* <MudDrawerHeader> */
    #b-drawer .b-drawer-body {
        margin: 24px 0 0 0 !important;
        padding: 0 24px 24px 24px !important;
    }
        #b-drawer .b-drawer-body:not(:has(.b-page-nav-group)) {
            border-bottom: 1px solid var(--mud-palette-divider) !important;
        }

    /* MudNavGroup -> b-page-nav-group */
    /*      This is for a "Detail page requiring Drawer Sub Navigation"! */
    #b-drawer .b-page-nav-group {
        padding: 0 !important;
    }
        #b-drawer .b-page-nav-group button {
            padding: 0px !important;
        }
        #b-drawer .b-page-nav-group .mud-nav-link {
            padding: 4px 4px 4px 0 !important;
        }
            #b-drawer .b-page-nav-group .mud-nav-link:hover {
                padding-left: 8px !important;
                background-color: var(--mud-palette-action-default-hover);
            }
        /* Active Sub Nav link */
        #b-drawer .b-page-nav-group .b-page-nav-group-active .mud-nav-link {
            color: var(--mud-palette-secondary-darken);
            font-weight: 500;
        }
        #b-drawer .b-page-nav-group .mud-nav-link-text {
            margin-left: 0 !important;
        }

/* ---------------------------------------
--- BC - Field side by side (including timepicker fix)
--------------------------------------- */
        .b-side-by-side-field {
            max-width: 48.5% !important;
            display: inline-block
        }

@media (min-width: 1200px) {
    .b-side-by-side-field {
        max-width: 49% !important;
    }
}

.mud-picker-timepicker-toolbar.b-side-by-side-field {
    max-width: 100% !important;
    display: flex;
}

/* ---------------------------------------
--- BC - Buttons
--------------------------------------- */
/* <BraveButton> */
.b-btn {
    max-height: 38px;
}

.b-btn-unavailable { /* No MudColor available from Theme */
    background-color: darkgray !important;
    color: white !important;
}

.b-icon-btn-loader {
    position: relative;
    top: 12px;
}

    .b-icon-btn-loader .mud-progress-circular-svg {
        display: inline-flex;
    }

/*button with right margin*/
.b-btn-mr-responsive {
    margin-right: 48px;
}

@media (max-width: 600px) {
    .b-btn-mr-responsive {
        margin-right: 12px;
    }
}
/*button with left margin*/
.b-btn-ml-responsive {
    margin-left: 48px;
}

@media (max-width: 600px) {
    .b-btn-ml-responsive {
        margin-left: 12px;
    }
}

.b-icon-btn {
    margin-top: 2px !important;
}

/* ---------------------------------------
--- BC - Brave Buttons Bar
--------------------------------------- */
#b-btns-bar {
    position: sticky;
    position: -webkit-sticky;
    top: 114px;
    padding-top: 0 !important;
    z-index: calc(var(--mud-zindex-appbar) - 1);
}

@media (min-width: 0) {
    #b-btns-bar {
        top: 56px;
    }
}

@media (min-width: 600px) {
    #b-btns-bar {
        top: 64px;
    }
}

@media (min-width: 960px) {
    #b-btns-bar {
        top: 114px;
    }
}

/* ---------------------------------------
--- BC - For Pages with Main content and Sidebar content (typically on the right)
       - This will swap the stacking order in smaller Display ports
--------------------------------------- */
#b-page-main {
    order: 1;
}
#b-page-sidebar {
    order: 2;
}
@media (max-width: 1280px) {
    #b-page-main {
        order: 2;
    }

    #b-page-sidebar {
        order: 1;
    }
}

/* ---------------------------------------
--- BC - Search Bar
--------------------------------------- */
#b-search-fields-bar {
}

/* ---------------------------------------
--- BC - ColumnPreferences & SearchFieldPreferences
--------------------------------------- */
.b-tools-select {
    min-width: 200px
}
    .b-tools-select.b-tool-highlight .mud-input-outlined-border {
        border-color: var(--mud-palette-secondary) !important;
    }
    .b-tools-select.b-tool-highlight.b-more-fields-select {
        max-width: calc(100% - 40px) !important;
    }
        .b-tools-select.b-tool-highlight.b-more-fields-select .mud-input-outlined-border {
            border-color: var(--mud-palette-secondary) !important;
        }

/* ---------------------------------------
--- BC - <BraveSearchTableBar>
            <ToolsChildContent>
            <FiltersChildContent>
--------------------------------------- */
    #b-search-table-bar {
    }

    #b-search-table-bar #b-search-table-bar-tools {
    }

    #b-search-table-bar #b-search-table-bar-filters {
    }
        #b-search-table-bar #b-search-table-bar-filters .mud-expand-panel:not(.mud-panel-expanded) {
            padding-bottom: 0px !important;
        }
        #b-search-table-bar #b-search-table-bar-filters .mud-expand-panel-content {
            padding-bottom: 4px !important;
        }

/* ---------------------------------------
--- BC - <BraveSearchTableContainer> contains <MudTable>||<MudDataGrid>
--------------------------------------- */
#b-search-table-container {
}

    #b-search-table-container .mud-table-row .mud-table-cell {
        padding: 1px 24px 1px 16px;
    }

        #b-search-table-container .mud-table-row .mud-table-cell .b-actions-menu .mud-chip {
            margin: 2px 4px;
        }
    /* Fix overflow in MudGrid columns chooser */
    #b-search-table-container .columns-panel {
        max-height: 60vh;
        overflow-y: scroll;
    }

    /* MudDataGrid > Column chooser > Hide Blank switch (for Action column) */
    .mud-data-grid-columns-panel .mud-drop-item:not(:has(p)) {
        display:none !important;
    }
/* ---------------------------------------
--- BC - <BraveSearchTableContainer>
            >  <MudTable>
                >  <BraveActionsMenu>
--------------------------------------- */
.b-sticky-actions, .b-sticky-actions-header {
    position: sticky;
    position: -webkit-sticky;
    right: 0;
    z-index: 2;
    background: var(--mud-palette-background-gray);
    text-align: center;
    border: 0;
}
.b-sticky-actions-header {
    background: var(--mud-palette-surface) !important;
    border-bottom: 1px solid var(--mud-palette-table-lines) !important;
    border-left: none !important;
}

@media (min-width: 600px) {
    .b-sticky-actions, .b-sticky-actions-header {
        width: 1px; /* Hack to shrink Actions col */
    }
}

.b-actions-menu {
}

    .b-actions-menu .mud-list-item-text {
        margin-top: 0;
        margin-bottom: 0;
    }
/* Override MB for Actions menu */
.mud-popover .mud-list.mud-list-padding {
    padding: 0 !important;
}

.mud-list-item-icon {
    min-width: 36px !important;
}

/* ---------------------------------------
--- BC - MudTable
--------------------------------------- */
.b-table {
}

    .b-table th, .b-table td {
        vertical-align: top;
    }
    /* MudTable > td > <MudToggleIconButton> as Radio for Selection */
    .b-table .mud-table-row:has(td button.mud-secondary-text) {
        background-color: var(--mud-palette-action-disabled) !important;
    }

    /* ONLY EVER used for the first column in the grid IF it is a radio or checkbox */
    .b-table .b-check-radio-column {
        width: 80px !important;
    }

/* fix so td with text will vert align with chips or svgs */
.b-table-text-icons-align td:not(:has(div.mud-chip, svg)) {
    padding-top: 12px !important;
}


/* ---------------------------------------
--- BC - MudTd row selected
--------------------------------------- */
.b-selected-row {
    background-color: var(--mud-palette-action-disabled) !important;
}

    .b-selected-row > td {
        color: white !important;
    }

        .b-selected-row > td .mud-input {
            color: white !important;
        }

/* ---------------------------------------
--- BC - Used in <MudDataGrid> <MudTable> a column with Checkboxes, icons, etc
    <MudDataGrid Class="b-mudtable-first-icon-col b-mudtable-last-icon-col"
--------------------------------------- */
.b-mudtable-first-icon-col table tr th:first-child,
.b-mudtable-first-icon-col table tr td:first-child {
    width: 24px;
    padding: 0 8px !important;
}

.b-mudtable-last-icon-col table tr th:last-child,
.b-mudtable-last-icon-col table tr td:last-child {
    width: 24px;
    padding: 0 8px !important;
}

/* ---------------------------------------
--- BC - Used in <MudTable> if multiselect col needs to be skinnier
--------------------------------------- */
.b-mudtable-first-checkbox-col th:first-child {
    width: 24px;
}

/* >> PLEASE LEAVE FOR POSSIBLE future support of TOP Pager */
/* ---------------------------------------
--- BC - Used in <BraveSearchTableContainer>
                    ->  <MudDataGrid>
                        ->  <ToolBarContent>
                            ->  <BravePager />
--------------------------------------- *//*
.mud-table-pagination-toolbar.b-pagination-top {
    width: auto !important;
}

    .mud-table-pagination-toolbar.b-pagination-top {
        border-top: none !important;
    }*/
/* << PLEASE LEAVE FOR POSSIBLE future support of TOP Pager */

/* ---------------------------------------
--- BC - Used in <BraveSearchTableContainer>
                    ->  <MudTable>
                        ->  <ToolBarContent>
                            ->  <BraveSearchTablePager>
--------------------------------------- */
.b-pagination-top {
    width: 100%;
}

    .b-pagination-top .mud-table-pagination-toolbar {
        border-top: none !important;
    }

/* Mimic MudBlazor Pagination in <PagerContent> */
@media (max-width: 600px) {
    .b-pagination-top .mud-table-pagination-spacer {
        flex: none;
    }

    .b-pagination-top .mud-table-pagination-actions button:first-child,
    .b-pagination-top .mud-table-pagination-actions button:last-child {
        display: none;
    }
}

@media (max-width: 416px) {
    .b-pagination-top .mud-toolbar .mud-table-pagination-actions {
        margin-left: auto;
        margin-right: -14px;
        margin-inline-start: auto;
        margin-inline-end: -14px;
    }
}

/* ---------------------------------------
--- BC - Used in <BraveSearchTableContainer>
                    ->  <MudDataGrid>
                        ->  <ToolbarContent>
                            ->  <BraveMudDataGridToolBar />
--------------------------------------- */
#b-mud-data-grid-toolbar {
    width: 100%;
    display: flex;
}

/* ---------------------------------------
--- BC - Used in <BraveSearchTableContainer>
                    ->  <MudDataGrid>
                        ->  <PagerContent>
                            ->  <BravePagerClientSide>
                    ->  <MudTable>
                        ->  <PagerContent>
                            ->  <BraveSearchTablePager>
--------------------------------------- */
.mud-table-pagination:has(.b-flex-center-contents) {
    display: flex;
    justify-content: center;
}

/* ----------------------------------------
-- <MudDataGrid> (Grouped Rows)
---------------------------------------- */
.mud-data-grid tbody td:has(button.mud-table-row-expander) {
    height: 44px;
}

/* ----------------------------------------
-- <MudDataGrid> (Expandable Child Row)
        -> <HierarchyColumn>
---------------------------------------- */
.b-hierarchy-col {
    container: mud-data-grid-child-row / inline-size;

}
/* Ensure the parent is always a container */
:has(> .b-child-row) {
     container-type: inine-size;
     width: 85cqw;
}

/* ---------------------------------------
--- BC - Detail Page > Readonly Fields
--------------------------------------- */
/* NOTE: Set by using PageHelper on the root MudGrid.Css of editable content in your Details page! */
.b-edit-mode {
}
    /* Readonly field styling in EditMode but NOT for AuditFieldsDisplay */
    .b-edit-mode input:disabled:not(.mud-input-root-filled) {
        color: var(--mud-palette-dark);
        background-color: var(--mud-palette-action-default-hover);
    }
        .b-edit-mode input:disabled:not(.mud-input-root-filled) + div.mud-select-input {
            color: var(--mud-palette-dark);
            background-color: var(--mud-palette-action-default-hover);
        }
    .b-edit-mode label.mud-disabled {
        color: var(--mud-palette-text-primary) !important;
    }
    .b-edit-mode .mud-input.mud-disabled:not(:has(input.mud-input-root-filled)) {
        color: var(--mud-palette-dark) !important;
        background-color: var(--mud-palette-action-default-hover) !important;
    }
    /* Readonly textarea */
    .b-edit-mode .mud-input.mud-disabled:has(textarea) {
        color: var(--mud-palette-dark);
        background-color: var(--mud-palette-action-default-hover) !important;
    }

/* ---------------------------------------
--- BC - Detail Page > Section
--------------------------------------- */
    .b-detail-section { /*pt-0 pb-2 px-2*/
        padding: 0 8px 8px 8px !important;
    }
    .b-detail-section:not(:has(.b-detail-expansion)) { /*mb-2*/
        margin-bottom: 8px !important;
    }

    /* ---------------------------------------
    --- BC - Detail Page > Section > Expansion Panel
    --------------------------------------- */
    .b-detail-section .b-detail-expansion {
    }
        .b-detail-expansion .mud-expand-panel {
            margin-bottom: 8px !important;
        }
            .b-detail-expansion .mud-expand-panel .mud-expand-panel-header {
                padding: 8px 16px !important;
                border-bottom: 1px solid var(--mud-palette-divider) !important;
            }
            .b-detail-expansion .mud-expand-panel .mud-expand-panel-content {
                padding: 16px !important;
            }

/* ---------------------------------------
--- BC - Clamped Heighted Container (Could be any Parent container element)
--------------------------------------- */
/* .b-table or .mud-table-container inside clamped container */
.b-resp-table-container-1 {
    height: clamp(250px, 15vh, 30vh);
    overflow: auto;
}
    .b-resp-table-container-1 .mud-table-container {
        height: max(150px, 12vh);
    }
.b-resp-table-container-2 {
    height: clamp(300px, 15vh, 30vh);
    overflow: auto;
}
    .b-resp-table-container-2 .mud-table-container {
        height: max(200px, 12vh);
    }
.b-resp-table-container-3 {
    height: clamp(400px, 20vh, 30vh);
    overflow: auto;
}
    .b-resp-table-container-3 .mud-table-container {
        height: max(300px, 16vh);
    }
.b-resp-table-container-4 {
    height: clamp(500px, 20vh, 45vh);
    overflow: auto;
}
    .b-resp-table-container-4 .mud-table-container {
        height: max(400px, 16vh);
    }

/* ---------------------------------------
--- BC - BraveResponsiveFieldContainer & [Fields]
--------------------------------------- */
/* MudItem wrapper for field */
.b-resp-cntr-muditem {
    padding: 2px 2px 2px 0 !important;
}
    /* Form field */
    .b-resp-cntr-muditem .b-resp-cntr-field {
        margin: 3px 0 2px 0; /*Margin.Dense*/
        padding: 4px 8px 4px 8px !important;
    }
        /* Validation error - Fix UI shift for mud-input-helper-text || mud-input-error*/
        .b-resp-cntr-muditem .b-resp-cntr-field:has(p.mud-input-helper-text) {
            padding-bottom: 0 !important;
        }
    /* Mud Switch */
    .b-resp-cntr-muditem .mud-switch {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

/* ---------------------------------------
--- BC - <BraveDialog> --> [FIELDS]
--------------------------------------- */
.b-dialog .mud-dialog-content .mud-input-control {
    padding-bottom: 22px !important;
}
    /* Validation error - Fix UI shift for mud-input-error */
    .b-dialog .mud-dialog-content .mud-input-control.mud-input-error {
        padding-bottom: 0 !important;
    }
/* ---------------------------------------
    --- BC - <BraveDialog> --> ContentText
    --------------------------------------- */
/* Fix UI Shift - Remove padding when error text    */
.b-dialog .mud-dialog-content:has(.mud-container .mud-typography.mud-error-text) #b-dialog-content-text {
    margin-bottom: 0 !important;
}
/* Fix UI Shift - Clicking the helper (The field's "RequiredError") removes that text > which causes the UI to shift */
.b-dialog .mud-dialog-content .mud-input-control-helper-container .mud-input-helper-text.mud-input-error .me-auto:empty {
    margin-bottom: 20px;
}

/* ---------------------------------------
--- BC - <BraveRepeatableDataItem>
--------------------------------------- */
.b-repeatable-data-block {
    margin-bottom: 16px;
}
    .b-repeatable-data-block .mud-paper {
        background-color: var(--mud-palette-background);
    }

.b-display-fld .mud-input {
    background: none !important;
}

/* ---------------------------------------
--- BC - <AccountSwitcher />
--------------------------------------- */
.b-account-switcher {
    min-width: 200px;
}

    .b-account-switcher .mud-popover-cascading-value {
        z-index: 1400;
    }

/* ---------------------------------------
--- BC - Swap arrows (transfer from a to b)
--------------------------------------- */
.b-swap-arrows {
    margin: auto !important;
    text-align: center !important;
}

/* ---------------------------------------
--- BC - Docs
--------------------------------------- */

code {
    color: var(--mud-palette-secondary);
}

.b-codeblock {
    font-family: 'Times New Roman', Times, serif;
    padding: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: var(--mud-palette-tertiary);
    background-color: var(--mud-palette-dark-darken);
}

    .b-codeblock .mud-typography {
        padding: 12px 24px 0 24px !important;
        color: var(--mud-palette-white);
    }

    .b-codeblock code { /* Make code stand out */
        color: #f434eb;
    }

        .b-codeblock code.com { /* Code comment */
            color: #9e9e9e;
        }

    .b-codeblock .b-code-copy-btn {
        position: absolute;
        top: 0px;
        right: 0px;
        color: var(--mud-palette-white);
    }

    .b-codeblock .b-codeblock-inner {
        background-color: var(--mud-palette-dark-hover);
        overflow: scroll;
    }

        .b-codeblock .b-codeblock-inner ::-moz-selection { /* Firefox */
            color: var(--mud-palette-white);
            background: var(--mud-palette-info-darken);
        }

        .b-codeblock .b-codeblock-inner ::selection {
            color: var(--mud-palette-white);
            background: var(--mud-palette-info-darken);
        }

/* ---------------------------------------
--- BC - Width up to Max (Dialog, Containers, Cards, etc)
         Will be 100% until it reaches the relevant display port size
         where it will be restricted to the px specified.
--------------------------------------- */
.b-width-max-sm {
    width: min(600px, 100%);
}

.b-width-max-md {
    width: min(960px, 100%);
}

.b-width-max-lg {
    width: min(1280px, 100%);
}

.b-width-max-xl {
    width: min(1920px, 100%);
}

/* ---------------------------------------
--- BC - MudDialog > Class
--------------------------------------- */
.b-dialog-container-100 {
    max-height: 100vh;
}

.b-dialog-container-90 {
    max-height: 90vh;
}

.b-dialog-container-80 {
    max-height: 80vh;
}

.b-dialog-container-50 {
    max-height: 50vh;
}

.b-dialog-container-100,
.b-dialog-container-90,
.b-dialog-container-80,
.b-dialog-container-50 {
    overflow-y: scroll;
}
    /* .mud-dialog-title */
    .b-dialog-container-100 .mud-dialog-title,
    .b-dialog-container-90 .mud-dialog-title,
    .b-dialog-container-80 .mud-dialog-title,
    .b-dialog-container-50 .mud-dialog-title {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: calc(var(--mud-zindex-appbar) + 3);
        background-color: var(--mud-palette-surface);
    }
    /* #b-btns-bar */
    .b-dialog-container-100 #b-btns-bar,
    .b-dialog-container-90 #b-btns-bar,
    .b-dialog-container-80 #b-btns-bar,
    .b-dialog-container-50 #b-btns-bar {
        z-index: calc(var(--mud-zindex-appbar) + 2);
        position: sticky;
        position: -webkit-sticky;
        top: 64px !important;
    }
    /* mud-dialog-content */
    .b-dialog-container-100 .mud-dialog-content,
    .b-dialog-container-90 .mud-dialog-content,
    .b-dialog-container-80 .mud-dialog-content,
    .b-dialog-container-50 .mud-dialog-content {
        padding-top: 0 !important;
    }

.b-dialog-actions {
    padding: 0 16px 8px 16px !important;
}

/* ---------------------------------------
--- BC - MudTooltip > Form Field - fix for responsive width
--------------------------------------- */
.b-tooltip-field-wrapper {
    width: 100%;
}

/* ---------------------------------------
--- BC - BraveWizard
--------------------------------------- */
#b-wizard-card {
}

    #b-wizard-card .b-wizard-btns-sit-right {
        display: flex;
        margin-left: auto;
    }

@media (max-width: 960px) {

    #b-wizard-card #b-wizard-card-step {
        padding-bottom: 6px !important;
    }

    #b-wizard-card #b-wizard-card-step-desc {
        padding-top: 6px !important;
    }
}

#b-wizard-card #b-wizard-card-content {
    overflow: scroll;
}