html, body {
    font-family: Verdana, Geneva, Arial, sans-serif;
}

.brand-mark {
    align-items: center;
    background: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #c40027;
    display: flex;
    flex: 0 0 auto;
    height: 38px;
    justify-content: center;
    margin: 0 14px 0 4px;
    width: 38px;
}

.brand-mark::before,
.brand-mark span {
    border: 3px solid #21105e;
    border-radius: 50%;
    display: block;
}

.brand-mark::before {
    content: ";
    height: 24px;
    position: absolute;
    width: 24px;
}

.brand-mark span {
    background: #c40027;
    border-color: #c40027;
    height: 7px;
    position: relative;
    width: 7px;
}

.brand-copy .mud-typography-caption {
    color: rgb(255 255 255 / 72%);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.drawer-heading {
    color: rgb(255 255 255 / 65%);
    letter-spacing: 0.14em !important;
}

.mud-drawer .mud-nav-link {
    border-left: 4px solid transparent;
    color: rgb(255 255 255 / 86%);
    margin: 3px 10px;
}

.mud-drawer .mud-nav-link .mud-nav-link-icon {
    color: rgb(255 255 255 / 78%);
}

.mud-drawer .mud-nav-link.active:not(.mud-disabled) {
    background: #c40027;
    border-left-color: #fff;
    color: #fff;
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: #fff;
}

.mud-main-content {
    //background-image: radial-gradient(circle at 90% 8%, rgb(33 16 94 / 7%), transparent 24rem);
    min-height: 100vh;
}

.mud-paper {
    border: 1px solid rgb(217, 211, 158);
}

.mud-appbar .appbar-link {
    color: #fff !important;
    font-weight: 700;
    margin-left: auto;
    margin-right: 20px;
    opacity: 1;
}

.mud-appbar .appbar-link:hover,
.mud-appbar .appbar-link:focus-visible {
    color: #ffffd2 !important;
}

.mud-appbar .appbar-link:focus-visible {
    outline: 2px solid #ffffd2;
    outline-offset: 4px;
}

.mud-appbar .appbar-icon-button,
.mud-appbar .appbar-icon-button .mud-icon-root,
.mud-appbar .appbar-icon-button svg {
    color: #fff !important;
    fill: currentColor;
    opacity: 1;
}

.mud-appbar .appbar-icon-button:hover,
.mud-appbar .appbar-icon-button:focus-visible {
    background-color: rgb(255 255 255 / 14%);
    color: #fff !important;
}

.mud-drawer .mud-nav-link.active:not(.mud-disabled) {
    //background-color: #ffffd2 !important; - when yellow background 
    border-left-color: #c40027 !important;
    //color: #21105e !important;            - when yellow background 
    font-weight: 700;
    opacity: 1 !important;
}
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: rgb(255 255 255 / 100%) !important;   // when white text
}
.mud-drawer .mud-nav-link.active .mud-nav-link-icon,
.mud-drawer .mud-nav-link.active .mud-nav-link-text,
.mud-drawer .mud-nav-link.active .mud-nav-link-text * {
    //color: #21105e !important;            - when yellow background 
    color: rgb(255 255 255 / 86%) !important;   // when white text
    opacity: 1 !important;
}

@media (max-width: 700px) {
    .brand-copy .mud-typography-caption,
    .mud-appbar .mud-chip {
        display: none;
    }

    .brand-copy .mud-typography-h6 {
        font-size: 0.85rem;
    }
}