:root {
    --main-horizontal-margin: 32px;
    --main-vertical-margin: 32px;
    --version-height: calc(var(--mud-appbar-height) / 3);
    --main-width: calc(100% - var(--main-horizontal-margin));
    --main-height: calc(100% - var(--version-height) - var(--main-vertical-margin) - var(--mud-appbar-height));
    --max-modal-height: 80%;
}

html {
    overflow: hidden;
}

.background-paper {
    position: absolute;
    width: var(--main-width);
    height: var(--main-height);
    margin: var(--main-vertical-margin) var(--main-horizontal-margin);
    padding: var(--main-vertical-margin) var(--main-horizontal-margin);
    overflow-x: hidden;
    overflow-y: scroll;
}

.m-0 {
    margin: 0 !important;
}

.p-0 {
    padding: 0 !important;
}

.w-100 {
    width: 100%;
}

*:has(> code) {
    font-size: 0.75rem;
    background-color: var(--mud-palette-background-gray);
}

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

/* MudDataGrid related */
.mud-table-cell > .mud-icon-button,
.mud-icon-small-padding,
.mud-table-cell > .column-header > .mud-input-control-boolean-input .mud-icon-button {
    padding: 8px !important;
}

.mud-table-pagination-toolbar.small > .mud-table-pagination-actions > * {
    padding: 12px 8px;
}

.mud-table-row > th {
    padding: 6px 12px !important;
}

.mud-data-grid .mud-table-cell .column-header .mud-menu .mud-icon-button .mud-icon-button-label {
    opacity: 1;
}

.mud-data-grid .mud-table-cell .column-header .sort-direction-icon {
    opacity: 0.3;
}

tbody .mud-table-cell .mud-icon-button,
.mud-grid-item .mud-icon-button {
    padding: 8px !important;
}

/* Navbar related */
.application-logo {
    width: 32px;
}

.mud-nav-item {
    align-items: center;
}

.mud-nav-item > a {
    text-decoration: none !important;
}

.mud-list-item-icon {
    min-width: auto !important;
    margin-right: 12px;
}

.mud-drawer-content .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):not(:hover) {
    background-color: transparent;
}

.mud-drawer-content .mud-navmenu.mud-navmenu-default .mud-nav-link-expand-icon.mud-transform {
    fill: currentColor;
}

.mud-drawer.mud-drawer-responsive.mud-drawer-pos-left,
.mud-drawer.mud-drawer-persistent.mud-drawer-pos-left {
    height: calc(101% - var(--mud-appbar-height));
}

/*** Version related ***/
.version {
    position: absolute;
    bottom: 8px;
    width: 100%;
    height: var(--version-height);
    text-align: center;
}

.version > h6 {
    font-size: 0.75rem;
}

.report-bug-text {
    padding: 0 !important;
    padding-inline: 8px !important;
    cursor: pointer !important;
}

ul > li > ul {
    margin-inline-start: 16px;
}