:root {
    --bs-body-font-family: var(--mud-typography-default-family);
    --bs-body-font-size: var(--mud-typography-default-size);
    --bs-body-font-weight: var(--mud-typography-default-weight);
    --bs-body-line-height: var(--mud-typography-default-lineheight);
    --bs-body-bg: var(--mud-palette-background);
    --bs-body-color: var(--mud-palette-text-primary);
    --bs-link-color-rgb: var(--mud-palette-text-primary);
    --bs-link-hover-color-rgb: var(--mud-palette-text-primary);
    --mdb-body-bg: var(--mud-palette-background);
    --mdb-body-color: var(--mud-palette-text-primary);
}

body {
}

@media screen and (min-width: 1920px) {
    .container {
        max-width: 1890px;
    }
}

@media screen and (max-width: 1919px) {
    .container {
        max-width: 1800px;
    }
}

.body-text-color {
    color: var(--mud-palette-text-primary) !important;
}

.brand-text {
    font-weight: 400;
    font-family: "Roboto";
    font-size: 22px;
    user-select: none
}

.mud-appbar {
    background-color: var(--mud-palette-background);
}

[data-bs-theme="dark"] .mud-appbar, [data-mdb-theme="dark"] .mud-appbar {
    border-bottom: solid 2px var(--mdb-border-color);
}

.page-wrapper {
    display: flex;
}

.sidebar-left,
.sidebar-right {
    overflow-y: auto;
    position: relative;
    width: 280px;
    font-size: 14px;
    min-height: calc(100vh - var(--mud-appbar-height));
}

.sidebar-mobile {
    font-size: 14px;
}

.sidebar-left {
    border-right: solid 1px var(--mdb-border-color);
}

.sidebar-right {
    border-left: solid 1px var(--mdb-border-color);
}

.sidebar-left .mud-nav-link, .sidebar-mobile .mud-nav-link {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.sidebar-left .mud-nav-link-text, .sidebar-mobile .mud-nav-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-content {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .sidebar-left,
    .sidebar-right {
        display: none !important;
    }

    .page-wrapper {
        flex-direction: column;
        /*margin: 56px 0 0 0;*/ /* Adjust for smaller appbar if needed */
    }
}

.romanList {
    list-style-type: lower-roman;
}

.abcList {
    list-style-type: lower-alpha;
}

.responsive-table {
    width: 100%;
}

    .responsive-table th,
    .responsive-table td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: left;
    }

@media screen and (max-width: 768px) {
    .responsive-table thead {
        display: none; /* Hide headers on mobile */
    }

    .responsive-table tr {
        display: block;
        border: 1px solid #ddd;
    }

        .responsive-table tr:first-of-type {
            border-top: 1px solid #ddd;
        }

        .responsive-table tr:last-of-type {
            border-bottom: 1px solid #ddd;
        }

    .responsive-table tr {
        border-top: none;
        border-bottom: none;
    }

    .responsive-table td {
        display: block;
        position: relative;
        border: none;
        border-bottom: 1px solid #eee;
    }
        .responsive-table td:empty {
            display: none;
            visibility: hidden;
        }
}