.accessibility-dropdown {
    position: relative;
}

.main-navbar .accessibility-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    color: #111;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 10px;
    font-size: 1.4rem;
}

.main-navbar .accessibility-toggle:hover,
.main-navbar .accessibility-toggle:focus,
.main-navbar .accessibility-toggle[aria-expanded="true"] {
    color: var(--maroon, #8a1538);
    background: #fff;
}

.main-navbar .accessibility-toggle:focus-visible,
.main-navbar .accessibility-font-btn:focus-visible,
.main-navbar .accessibility-switch .form-check-input:focus-visible {
    outline: 3px solid var(--focus-ring-color, #e6e504);
    outline-offset: 3px;
    box-shadow: var(--focus-ring-shadow, 0 0 0 4px rgba(138, 21, 56, .25));
}

.main-navbar .accessibility-menu {
    direction: ltr;
    min-width: 190px;
    margin-top: .7rem !important;
    padding: .8rem 1rem;
    color: #202020;
    background: #fff;
    border: 1px solid rgba(138, 21, 56, .18);
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(28, 14, 18, .16);
}

[dir="ltr"] .main-navbar .accessibility-menu {
    right: 0;
    left: auto;
}

[dir="rtl"] .main-navbar .accessibility-menu {
    right: auto;
    left: 0;
}

.main-navbar .accessibility-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 42px;
}

.main-navbar .accessibility-symbol {
    min-width: 28px;
    color: #242424;
    font-size: 1.15rem;
    line-height: 1;
    text-align: center;
}

.main-navbar .accessibility-switch {
    min-height: 0;
    margin: 0;
    padding: 0;
}

.main-navbar .accessibility-switch .form-check-input {
    float: none;
    width: 2.35rem;
    height: 1.25rem;
    margin: 0;
    cursor: pointer;
    border-color: #d7d2d4;
    background-color: #efedef;
}

.main-navbar .accessibility-switch .form-check-input:checked {
    border-color: var(--maroon, #8a1538);
    background-color: var(--maroon, #8a1538);
}

.main-navbar .accessibility-font-size {
    justify-content: flex-start;
}

.main-navbar .accessibility-font-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #5e5558;
    background: #fff;
    border: 1px solid #e0dadd;
    border-radius: 4px;
    font-size: .72rem;
    line-height: 1;
}

.main-navbar .accessibility-font-btn:hover,
.main-navbar .accessibility-font-btn.is-active {
    color: #fff;
    background: var(--maroon, #8a1538);
    border-color: var(--maroon, #8a1538);
}

.main-navbar .accessibility-font-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.main-navbar .accessibility-row-icon {
    margin-inline-start: auto;
    color: #333;
    font-size: 1.35rem;
}

.auth-nav .layout-nav-utilities {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.auth-nav .accessibility-toggle,
.auth-nav .accessibility-toggle:hover,
.auth-nav .accessibility-toggle:focus,
.auth-nav .accessibility-toggle[aria-expanded="true"] {
    color: #1d1d1f;
    background: transparent;
    border-color: transparent;
}

html.dark-mode .main-navbar .accessibility-menu {
    color: #fff;
    background: #222;
    border-color: rgba(255, 255, 255, .3);
}

html.dark-mode .main-navbar .accessibility-symbol,
html.dark-mode .main-navbar .accessibility-row-icon {
    color: #fff;
}

@media (max-width: 992px) {
    .auth-nav .layout-nav-utilities {
        justify-content: center;
        width: 100%;
    }
}