:root {
    --primary-color: #0069B4;
    --layout-width: 100vw;
    --sidebar-width: 80px;
    --topnav-height: 64px;
    --content-padding: 24px;
}

*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    overflow-x: auto; /* Allow horizontal scroll on smaller screens */
}

#app {
    width: 1920px;
    height: 100vh;
    min-width: 1200px; /* Minimum supported width */
    max-width: none; /* Allow full width on large screens */
}

/* Global layout variables */
:root {
    --layout-width: 100vw;
    --sidebar-width: 80px;
    --sidebar-expanded-width: 350px;
    --topnav-height: 64px;
    --content-padding: 24px;
    --primary-color: #0069B4;
    --sidebar-background: #ffffff;
    --topnav-background: #25336C;
    --content-background: #f8f9fa;
}

/* Responsive behavior for smaller screens */
@media (max-width: 1200px) {
    #app {
        width: 768px;
    }
}

body {
    background-color: #eff4f9;
    font-family: Arial, sans-serif;
}

a {
    text-decoration: none;
    color: #333333;
    cursor: pointer;
}

    a:hover {
        color: #333333 !important;
        text-decoration: none;
    }

p, span, button {
    font-size: 14px;
}

/* Table Structure */
.mud-table-root {
    border-collapse: separate;
    border-spacing: 0 4px;
}

.mud-table-row {
    height: 52px;
}

.mud-table-cell {
    padding: 0;
}

/* Header Styling */
.mud-table-row th.mud-table-cell,
.mud-table-pagination-toolbar {
    border: none;
}

table.mud-table-root > .mud-table-head {
    background-color: #D7D7D7;
    color: #D7D7D7;
}

/* Body Styling */
.mud-table-root .mud-table-body .mud-table-row td.mud-table-cell:first-child {
    padding-left: 10px;
}

.mud-table-root .mud-table-body .mud-table-row td.mud-table-cell:last-child div {
    justify-content: flex-end;
    padding-right: 0px;
}

.mud-table-body .mud-table-row {
    margin-bottom: 5px;
}

/* Cell's Font */
.mud-table-root .mud-table-head .mud-table-row .mud-table-cell {
    font-size: 14px;
    font-weight: 700;
}

table.mudtable .mud-table-root .mud-table-body .mud-table-row .mud-table-cell {
    font-size: 16px;
    font-weight: 100;
}

/* Cell Borders */
table.mudtable tr td {
    border-top: 1px solid #D7D7D7;
    border-bottom: 1px solid #D7D7D7 !important;
}

    table.mudtable tr td:first-child {
        border-left: 0px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    table.mudtable tr td:last-child {
        border-right: 1px solid #D7D7D7;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

/* Remove Shadow */
.mud-elevation-1 {
    box-shadow: none;
}

/* Hide Data Grid Footer */
.mud-table-foot {
    display: none;
}

.mud-table-pagination {
    display: flex;
    justify-content: center;
}

/*
    Button Shadow
*/

.mud-button-filled {
    box-shadow: none;
}

    .mud-button-filled:hover {
        box-shadow: none;
    }

/* Input CSS */
.mud-input {
    height: 38px;
}

/* Mud Button */
.mud-button-label {
    font-size: 16px;
    text-transform: none;
}

.mud-dialog-title {
    height: 57px;
}

.mud-expand-panel.mud-expand-panel-border {
    border-bottom: none;
}

.mud-expansion-panels .mud-expand-panel:first-child .mud-expand-panel-header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* Remove bottom border radius when the last panel is expanded */
.mud-expansion-panels .mud-expand-panel:last-child.mud-panel-expanded .mud-expand-panel-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.mud-expansion-panels .mud-expand-panel:last-child .mud-expand-panel-header {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.mud-expansion-panels .mud-expand-panel:not(:first-child):not(:last-child) .mud-expand-panel-header {
    border-radius: 0;
}

.mud-expand-panel .mud-expand-panel-header {
    height: 60px;
    border: 1px solid #ddd;
    padding: 16px 20px;
}

.mud-expand-panel.mud-panel-expanded .mud-expand-panel-header {
    background-color: #eff4f9;
}

.mud-expand-panel:not(.mud-panel-expanded) .mud-expand-panel-header {
    background-color: #fff;
}

.mud-expand-panel .mud-collapse-container {
    border: none;
}

    .mud-expand-panel .mud-collapse-container.mud-collapse-entered {
        border: 1px solid #ddd;
        border-top: none;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

.mud-expand-panel-header .mud-expand-panel-text {
    font-size: 20px;
    font-weight: 700;
}

.mud-expansion-panels .mud-expand-panel-header svg {
    fill: #0069B4;
}

.mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding-top: 8px;
    padding-bottom: 16px;
    padding-left: 20px;
    padding-right: 20px;
}

.mud-expand-panel.mud-panel-expanded {
    margin: 0;
}

.mud-loader {
    width: 64px;
    height: 64px;
    border: 6px solid #e0e0e0;
    border-top: 6px solid #1976d2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

h6.manage-page-header {
    font-family: Arial;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
}

.btn-link {
    text-decoration: none !important;
}

/*Custom headers*/
H1.mud-typography.mud-typography-h1 {
    color: #000000DE;
}

H2.mud-typography.mud-typography-h2 {
    color: #000000DE;
}

H3.mud-typography.mud-typography-h3 {
    color: #00000099;
}

/* Custom inputs */
.input-md .mud-select-input {
    height: 40px !important;
    min-height: 40px !important;
}

.input-lg .mud-select-input {
    height: 56px !important;
    min-height: 56px !important;
}


.mud-picker.mud-picker-inline.mud-picker-input-text.input-lg .mud-input {
    height: 56px !important;
    min-height: 56px !important;
}

.mud-picker.mud-picker-inline.mud-picker-input-text.input-md .mud-input {
    height: 40px !important;
    min-height: 40px !important;
}