:root {
--site-font: Plus Jakarta Sans, sans-serif;
--heading-font: Plus Jakarta Sans, sans-serif;
--footer-height: 200px;
--border-color: #505050;
--brand-a-bg: #000000;
--brand-a-hilite: #85cfff;
--brand-b-bg: #0a2540;
--brand-b-hilite: #85cfff;
--brand-b-color: #ffffff;
--generic-btn-hilite: #777;
--generic-btn-color: #000;
--generic-hover-color: #fff;
--standard-padding: 0 1em;
--generic-btn-bg: #000;
--footer-font: Plus Jakarta Sans, sans-serif;
--brand-a: #b5eaff;
--brand-a-color: #000000;
--brand-a-hover: #0a2540;
--brand-a-hover-color: #ffffff;
--brand-red: #b90e1f;
--brand-green: #00ff00;
--sidebar-width: 350px;
--min-input-field-width: 50px;
--min-input-field-height: 30px;
--min-screen-width: 320px;
--standard-width: 1200px;
--sidebar-padding: 4rem;
--brand-b: #0a2540;
--brand-b-hover: #85cfff;
--brand-b-hover-color: #000000;
--brand-form-color: #757579;
--brand-form-placeholder-color: #c2c2c2;
--min-header-height: 70px;
--max-header-height: 100px;
--border-color: #e4ecf2;
--ink: #0b0b0d;
--ink-black: #000000;
--white: #ffffff;
--bg-tint: #f5fafd;
--radius-lg: 22px;
--radius-md: 14px;
--radius-sm: 10px;
--shadow-soft: 0 20px 45px -25px rgba(11,11,13,.35);
--shadow-card: 0 12px 30px -18px rgba(11,11,13,.22);
--sidebar-default-width: 20%;
--sidebar-max-width: 350px;
--sidebar-min-width: 250px;
--sidebar-gap: 1.5rem;
--sidebar-min-screen-width: 800px;
}
@media screen and (max-width: 800px) {

#content:has(.sidebar-layout) {
    padding: 0;
}

.sidebar-layout {
    flex-direction: column;
}

.left-sidebar .sidebar,
.right-sidebar .sidebar {
    order: 2;
    max-width: unset;
    width: unset;
}

.left-sidebar .main-content,
.right-sidebar .main-content {
    order: 1;
    width: unset;
}

.sidebar-layout.both-sides {
    flex-direction: row;
    flex-wrap: wrap;
}

.both-sides .main-content {
    order: 1;
    width: 100%;
}

.both-sides .left-sidebar {
    order: 2;
    width: 50%;
    max-width: unset;
}

.both-sides .right-sidebar {
    order: 3;
    width: 50%;
    max-width: unset;
}
}