.text-center {
    text-align: center
}

.dimater-dialog-content {
    height: calc(100vh - 2 * var(--mud-appbar-height) - 2.5rem);
}

.dimater-dialog-content2 {
    height: calc(100vh - 3 * var(--mud-appbar-height) - 2.5rem);
}
.dimater-dialog-content-overflow-auto {
    overflow: auto;
    max-height: calc(100vh - 4 * var(--mud-appbar-height) - 2.5rem);
}
.dimater-dialog-content-overflow-auto .mud-grid-spacing-xs-3 {
    width: 100% !important;
    margin: 0 !important;
}
.dimater-dialog-content3 {
        background-image: linear-gradient( var(--mud-palette-background), var(--mud-palette-background-grey) 20%);
    }

.mud-toolbar-hover:hover {
    background-color: var(--mud-palette-table-hover) !important;
}


.calculation-toolbar {
    height: 10px !important; 
    --mud-internal-toolbar-height: 10px !important;
}

.calculation-expansion-panel-header .mud-expand-panel-header  {
    padding: 12px 24px;
    min-height: 34px !important;
}


.calculation-expansion-panel .mud-expand-panel.mud-panel-expanded {
    margin:  0 0 16px 0 !important;
}

.dimater-dialog-content-max {
    max-height: calc(100vh - 3 * var(--mud-appbar-height) - 2.5rem);
}
.dimater-tab-panel {
    height: 100%;
}

.mud-tab-panels-max-heigh
{
    height:calc(100% - 48px);
}

.dimater-drawer-background
{
    background-color: var(--mud-palette-drawer-background) !important;
}

.top-bar-style {
    width: calc(100px - 24px);
    margin-top: -2px;
}
.active .nav-link-avatar.mud-avatar.mud-avatar-outlined {
    color: var(--mud-palette-primary) !important;
    border: 1px solid var(--mud-palette-primary) !important;
}
.active .nav-link-avatar.mud-avatar.mud-avatar-filled {
    background-color: var(--mud-palette-primary) !important;
}

.active .nav-link-avatar.mud-avatar.text,
.active .nav-link-avatar.mud-avatar.mud-avatar-outlined .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--mud-palette-primary) !important;
}

.mud-avatar {
    font-family: 'Sulphur Point','Roboto','Helvetica','Arial','sans-serif';
}

.mud-input-control-no-marigin.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: -4px;
}

@media(hover: hover)and (pointer: fine) {
    .mud-nav-link:hover:not(.mud-nav-link-disabled) {
        background-color: transparent;
    }
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):active:not(.mud-nav-link-disabled) {
    background-color: transparent;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-primary);
    background-color: transparent !important;
}

.mud-avatar-outlined.mud-avatar-outlined-dark:focus,
.mud-avatar-outlined.mud-avatar-outlined-dark:hover {
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary)
}

.mud-icon-root.mud-svg-icon:focus,
.mud-icon-root.mud-svg-icon:hover {
    fill: var(--mud-palette-primary);
}
/* need proper solution for light mode 
    remove this dueu to warning color is needed 
.mud-button-text.mud-button-text-warning {
    color: var(--mud-palette-primary);
}

@media(hover: hover)and (pointer: fine) {
    .mud-button-text.mud-button-text-warning:hover {
        background-color: var(--mud-palette-primary-hover)
    }
}
*/
.dimater-simple-table {
    .mud-table-container {
        .header {
            background-color: rgba(var(--mud-palette-primary-rgb), 0.085);
            * {
                  font-weight: 700 !important;
            }
        }
    }
}