.nav-toolbar {
    background-color: var(--mud-palette-primary);
}

.mud-container-custom {
    padding: 0;
    height: 100%;
}

.portal-logo {
    height: 3rem;
    width: auto;
}

.extendPopoverFitContent {
    width: auto !important;
    max-width: initial !important;
}

.dynamic-filter-select-popover {
    /*margin-top: 2em;*/
    width: 290px !important;
}

.editUserPopoverAdjustment {
    transform: translateY(35px) !important;
}

.align-center input {
    text-align: center;
}

.align-right input {
    text-align: right;
}

.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    flex-wrap: wrap;
    box-shadow: none !important;
}

/*Commenting out the mudblazor overrides from global.css*/
/*.mud-input.mud-input-underline:before {
    display: none !important;
}

.mud-popover.mud-popover-open {
    margin-top: 2.5rem;
}

.mud-dialog .mud-dialog-title,
.mud-input-slot.mud-input-root.mud-input-root-text {
    padding: 0 !important;
}*/

/* Forms */
/*.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(0px, -20px) scale(1);
    background: none;
}

.mud-dialog {
    padding: 10px !important;
}
}*/

.thick-border-left {
    border-left-color: var(--mud-palette-primary);
    border-left-width: 5px;
}

.mud-box-success-custom {
    color: var(--mud-palette-success-darken) !important;
    background-color: var(--mud-palette-success-hover) !important;
}

.mud-box-warning-custom {
    color: var(--mud-palette-warning-darken) !important;
    background-color: var(--mud-palette-warning-hover) !important;
}

/* Animations */
@keyframes flash {
    0% {
        background-color: var(--mud-palette-primary);
    }

    100% {
        background-color: inherit;
    }
}

.flash-effect {
    animation: flash 3s ease-out 2;
}

/*Payload rich text*/
.payload-generated-markup li {
    list-style: disc;
    Displays bullet points margin-left: 20px;
    Adjusts the left margin padding-left: 10px;
    Adds padding for better alignment
}

/* Search Select Filter */
.filter-scrollable {
    max-height: calc(27vh - 3.5rem) !important; /* Allow filter to scroll for tall filter lists */
    height: auto;
    overflow-y: auto;
}

.edit-user-filter-scrollable {
    max-height: calc(27vh - 3.5rem) !important; /* Allow filter to scroll for tall filter lists */
    height: auto;
    overflow-y: auto;
}

/* Data Panels */
.data-panels {
    background-color: var(--custom-palette-primary);        
    cursor: pointer;
}

    .data-panels .mud-svg-icon {
        border-radius: 35px;
        line-height: 1.1;
        background-color: #fff;
        color: var(--mud-palette-primary);
        text-shadow: none;
        transition: all linear .25s;
        border: solid 3px;
        border-color: rgba(0, 0, 0, 0.1);
        margin: 0.5rem 0.5rem 0;
    }

    .data-panels .mud-card-header .mud-card-header-actions {
        all: unset;
    }

    .data-panels .mud-card-header .tile-header {
        font-size: 1.15rem !important;
    }

/* Error handler component - do not apply if displayed within a MudDialog */
:not(.mud-dialog-content) .error-handler-grid {
    align-content: center !important;
    min-height: 100vh;
}

/* Apply to Error handler component displayed within a MudDialog*/
.mud-dialog-content .error-handler-grid {
    align-content: initial !important;
    min-height: initial !important;
}


/* Country Code Selector & Phone Number */
 .customPhoneTxt .mud-input-outlined-border {
    border-left-style: hidden !important;
    border-radius: 0 !important;
    padding: 1px !important;
    margin: 0 !important;
}

 .customPhoneTxt .mud-input {
    padding: 0px !important;
    padding-left:-4px !important;
}

 .countryCodeSel .mud-input {
    padding: 0px !important;
}

 .countryCodeSel .mud-input-outlined-border {
    border-right-style: hidden !important;
    border-radius: 0 !important;
    padding: 0px !important;
    margin: 0 !important;
}


.customPhoneTxt .mud-grid-spacing-xs-4 > .mud-grid-item {
    padding-left: 0px !important;
}

.tab-full-height {
    min-height: calc(100vh - var(--mud-appbar-height) - 96px);
    display: flex;
    flex-direction: column;
}

/* TODO: NOTE This is workaround for what appears to be a MudBlazor bug when a MudTextField is. When that bug is fixed this can be removed. */
/* mudblazor-field-disabled-override START */
.mudblazor-field-disabled-override input {
    padding-top: 10.5px !important;
    padding-bottom: 10.5px !important;
}

.mudblazor-field-disabled-override .mud-input.mud-disabled::before {
    border-bottom: 0 !important;
}


.mudblazor-field-disabled-override .mud-input.mud-disabled.mud-input-filled {
    border-radius: 4px;
    border-bottom: 0;
}

.mudblazor-field-disabled-override .mud-input-adornment-start.mud-input-root-filled-shrink {
    margin-top: 0px;
}
/* mudblazor-field-disabled-override END */

/* mud table */
.mri-data-grid .mud-table-head {
    background-color: var(--custom-palette-primary);
}

.mri-data-grid .mud-table-head .sortable-column-header, .mri-data-grid .mud-table-head .column-header {
    color: var(--custom-palette-text-primary) !important;
}

.mri-data-grid.mud-table .mud-table-head .mud-icon-root {
    fill: var(--custom-palette-text-primary) !important;
}

.mri-data-grid .mud-chip {
    background-color: var(--custom-palette-secondary) !important;
}

.mri-data-grid .mud-chip .mud-chip-content {
    color: var(--custom-palette-text-secondary) !important;
}

.mri-data-grid .mud-chip .mud-chip-content .mud-icon-root {
    fill: var(--custom-palette-text-secondary) !important;
}

.mri-nav-menu-group .mud-nav-item .mud-nav-link .mud-icon-root, .mri-nav-menu-group .mud-nav-link .mud-icon-root, .mud-nav-container .mud-nav-item .mud-nav-link .mud-icon-root {
    color: var(--custom-palette-text-secondary) !important;
    fill: var(--custom-palette-text-secondary) !important;
}

.mri-tooltip {
    color: #fff !important;
    cursor: pointer;
    z-index: 10000 !important;
}

.mri-status-toggle {    
    font-size: 14px !important;
    border-color: var(--custom-palette-text-primary) !important;
}

.mri-status-toggle .mri-status-toggle-item {
    color: var(--custom-palette-text-primary) !important;
}

.mri-status-toggle .mud-toggle-item-selected {
    background-color: var(--custom-palette-primary) !important;
}

.mud-toggle-item-selected .mud-toggle-item-text, .mud-toggle-item-selected .mud-typography {
    color: var(--custom-palette-text-primary) !important;
}

.mri-tabs .mud-tab-slider {
    background: var(--custom-palette-primary) !important;
}

.mud-link, a {
    color: #3F86BA !important;
    text-decoration: underline !important;
    font-size: 14px;
}

.f-bold {
    font-weight: 600;
}

.page-title {
    font-size: 24px !important;
}

/* input search */
.mri-details-grid-search .mud-input-control-input-container .mud-input-slot {
    padding: 3px 3px 3px 10px;
    min-height: 30px;
    font-size: 12px;
}

.mri-details-grid-search .mud-input-slot {
    font-size: 12px;
}

.mri-details-grid-search .mud-input .mud-input-outlined {
    padding-left: 6px;
    padding-inline-start: 6px;
    padding-right: 6px;
    padding-inline-end: 6px;
}

.mri-details-grid-search .mud-icon-root {
    font-size: 16px;
}

.mri-details-grid-search .mud-input-control-input-container .mud-input-slot {
    padding: 2px 6px !important;
}

.mud-container-content {
    padding: 16px !important;
}

.mud-table-cell {
    padding: 8px !important;
}


.mud-table-bordered .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:first-child {
    border-left: 1px solid var(--mud-palette-table-lines);
}

.mud-table-bordered .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:last-child {
    border-right: 1px solid var(--mud-palette-table-lines) !important;
}


.mri-data-grid .mud-table-empty-row {
    border-left: 1px solid var(--mud-palette-table-lines);
    border-right: 1px solid var(--mud-palette-table-lines);
}

.sales-category-select .mud-input-slot.mud-input-root-outlined, .sales-reported-value .mud-input-slot.mud-input-root-outlined {
    padding: 10.5px 14px !important;
}

.bg-none {
    background-color: unset !important;
}

.mud-input-control .mud-input-error > div {
    color: var(--mud-palette-error) !important;
}

.mud-picker .mud-input > input.mud-input-root-outlined {
    font-size: 12px;
}

.mud-picker .mud-icon-root {
    font-size: 16px;
}

ul {
    list-style: disc !important;
}

ul, ol {
    margin-left: 2rem !important;
}

ul .list-item-checkbox {
    list-style: none !important;
    margin-left: -1rem;
    display: flex;
    align-items: start;
}

ul .list-item-checkbox > input {
    margin-top: 6px;
    margin-right: 6px;
}

.article-card-dialog {
    word-wrap: break-word;
}

.article-card-summary {
    font-weight: 700;
}

.mud-pagination {
    list-style: none !important;
}

.mud-nav-link svg, .nav-menu-link span, .nav-menu-link svg {
    font-size: 1.2rem !important;
}

.nav-menu-link a {
    text-decoration: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.disabled-field {
    background-color: rgba(0, 0, 0, .09) !important;
    cursor: pointer;
}

.disable-field-label-bg label {
    background-color: unset !important;
}

.apply-date-filter-btn {
    height: 30px;
    margin-top:2.5px;
}


.transaction-amount-row, .transaction-amount-row div {
    display: inline-block;
    margin: 0; 
    vertical-align: top;
    width: unset !important;
}

.more-btn {
    border-radius: 4px !important;
}

.mud-alert-text-warning .mud-alert-message p,
.mud-alert-text-warning .mud-alert-message p b {
    color: var(--mud-palette-warning-darken) !important;
}

.mud-alert-text-warning .mud-alert-icon svg, .mud-alert-text-warning .mud-icon-button svg {
    fill: var(--mud-palette-warning-darken) !important;
}

.mud-alert-text-info .mud-alert-message p,
.mud-alert-text-info .mud-alert-message p b {
    color: var(--mud-palette-info-darken) !important;
}

.mud-alert-text-info .mud-alert-icon svg, .mud-alert-text-info .mud-icon-button svg {
    fill: var(--mud-palette-info-darken) !important;
}

.mud-alert-text-success .mud-alert-message p,
.mud-alert-text-success .mud-alert-message p b {
    color: var(--mud-palette-success-darken) !important;
}

.mud-alert-text-success .mud-alert-icon svg, .mud-alert-text-success .mud-icon-button svg {
    fill: var(--mud-palette-success-darken) !important;
}

.mud-alert-text-error .mud-alert-message p,
.mud-alert-text-error .mud-alert-message p b {
    color: var(--mud-palette-error-darken) !important;
}

.mud-alert-text-error .mud-alert-icon svg, .mud-alert-text-error .mud-icon-button svg {
    fill: var(--mud-palette-error-darken) !important;
}

.invoice-pdf-download-icon {
    padding: 0px !important;
}

.invoice-pdf-download-icon .mud-typography svg {
    fill: var(--custom-palette-primary) !important;
}

@media (max-width: 600px) {
    .mud-table-bordered .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:last-child {
        border-right: unset !important;
    }
}