
:root {
    --gray: #ececec;
    --font-small: 11px;
    --font-medium: 13px;
    --font-large: 16px;
    --font-xl: 21px;
    --font-xxl: 26px;

    /* CAREER CLUSTER COLORS */
    --agriculture: #125E37;
    --architecture: #21824D;
    --arts-av-communication: #066C37;
    --business: #56803E;
    --education: #41806B;
    --finance: #0A819B;
    --government: #1F7377;
    --health: #0A819B;
    --hospitality: #067BB3;
    --human-services: #0366CB;
    --information-technology: #3067B1;
    --law-public-safety: #363794;
    --manufacturing: #4773B8;
    --marketing: #6E64A7;
    --stem: #4D3C90;
    --transportation: #371C52;

    /* 2026-27 CAREER CLUSTER COLORS (new/renamed pathways only) */
    --digital-technology: #C8BACF;
    --construction: #F7CAB3;
    --advanced-manufacturing: #F9BB9C;
    --energy-natural-resources: #DFEED3;
    --public-service-safety: #E2F3FC;
    --management: #EFDFED;
    --supply-chain-transportation: #FCE9E0;
    --arts-entertainment-design: #EAB9D4;
    --hospitality-events-tourism: #F4D9E8;
    --financial-services: #FBCB6D;
    --education-2026: #63CCF0;
    --healthcare-human-services: #9BDBF3;
    --agriculture-2026: #B0D68E;
    --marketing-sales: #D0C8D8;

    /* 2026-27 CAREER CLUSTER TEXT COLORS */
    --agriculture-2026-text: #38592A;
    --arts-entertainment-design-text: #862858;
    --digital-technology-text: #613174;
    --supply-chain-transportation-text: #96331F;
    --construction-text: #96331F;
    --advanced-manufacturing-text: #96331F;
    --energy-natural-resources-text: #38592A;
    --healthcare-human-services-text: #0D4752;
    --public-service-safety-text: #0D4752;
    --financial-services-text: #7A4D1F;
    --hospitality-events-tourism-text: #862858;
    --education-2026-text: #0D4752;
    --marketing-sales-text: #613174;
    --management-text: #613174;
}

/**
* GLOBAL STYLING
*/
body {
    margin: 0;
    background-color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body, body * {
    font-family: 'Poppins', sans-serif !important;
}

h1 {
    font-size: 30px;
    line-height: 40px;
    color: var(--primary-color);
}

h2 {
    font-size: 32px;
    color: var(--primary-color);
    margin: 1rem 0;
}

body h3,
.middle_when_right_side_bar h3,
.middle_when_no_right_side_bar h3 {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.6px;
    margin: 1rem 0;
}

h4 {
    font-size: 21px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.6px;
    margin: 1rem 0;
}

h5 {
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    margin: 1rem 0;
}

h6 {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 1rem 0;
}

p {
    font-size: var(--font-large);
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

li {
    font-size: var(--font-large);
}

hr {
    border: 1px solid var(--primary-color);
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
}

ul {
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
 }

button {
    padding-block: 1px;
    padding-inline: 6px;
}

blockquote {
    background-color: var(--gray);
    padding: 1rem;
    margin: 0;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    text-align: center;
    color: var(--primary-color);
}

blockquote > * {
    font-size: 18px;
    font-weight: 600;
}

blockquote > *::before {
    content: '"';
}

blockquote > *::after {
    content: '"';
}

img {
    border: 10px solid var(--gray);
    border-radius: 5px;
    margin: 10px;
    box-sizing: border-box;
    max-width: 100%;
}


/**
* REUSABLE, GLOBAL STYLING
*/
.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-col {
    flex-direction: column;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.m-auto {
    margin: auto;
}

.ml-auto {
    margin-left: auto;
}

.h-full {
    height: 100%;
}

.w-full {
    width: 100%;
}

.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.flex-item {
    flex: 1;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/**
* PATHWAYS PAGES STYLING
*/
body.agriculture :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--agriculture);
}

body.architecture-construction :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--architecture);
}

body.arts-av-communication :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--arts-av-communication);
}

body.business :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--business);
}

body.education :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--education);
}

body.finance :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--finance);
}

body.government :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--government);
}

body.health-sciences :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--health);
}

body.hospitality-tourism :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--hospitality);
}

body.human-services :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--human-services);
}

body.information-technology :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--information-technology);
}

body.law-public-safety :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--law-public-safety);
}

body.manufacturing :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--manufacturing);
}

body.digital-technology-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--digital-technology);
    --cluster-text-color: var(--digital-technology-text);
}

body.construction-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--construction);
    --cluster-text-color: var(--construction-text);
}

body.advanced-manufacturing-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--advanced-manufacturing);
    --cluster-text-color: var(--advanced-manufacturing-text);
}

body.energy-natural-resources-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--energy-natural-resources);
    --cluster-text-color: var(--energy-natural-resources-text);
}

body.public-service-safety-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--public-service-safety);
    --cluster-text-color: var(--public-service-safety-text);
}

body.management-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--management);
    --cluster-text-color: var(--management-text);
}

body.supply-chain-transportation-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--supply-chain-transportation);
    --cluster-text-color: var(--supply-chain-transportation-text);
}

body.arts-entertainment-design-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--arts-entertainment-design);
    --cluster-text-color: var(--arts-entertainment-design-text);
}

body.hospitality-events-tourism-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--hospitality-events-tourism);
    --cluster-text-color: var(--hospitality-events-tourism-text);
}

body.financial-services-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--financial-services);
    --cluster-text-color: var(--financial-services-text);
}

body.education-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--education-2026);
    --cluster-text-color: var(--education-2026-text);
}

body.healthcare-human-services-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--healthcare-human-services);
    --cluster-text-color: var(--healthcare-human-services-text);
}

body.agriculture-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--agriculture-2026);
    --cluster-text-color: var(--agriculture-2026-text);
}

body.marketing-sales-2026 :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--marketing-sales);
    --cluster-text-color: var(--marketing-sales-text);
}

body.marketing :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--marketing);
}

body.stem :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--stem);
}

body.transportation :not(header):not(header *):not(footer):not(footer *) {
    --primary-color: var(--transportation);
}

body.pathways h1 {
    color: var(--cluster-text-color, var(--primary-color));
}

body.pathways h2, body.pathways h3 {
    color: var(--cluster-text-color, black);
}

body.pathways .market-data {
    border-collapse: collapse;
}

body.pathways .market-data * {
    font-size: var(--font-large);
    padding: 5px;
}

body.pathways .market-data caption {
    font-size: var(--font-xxl);
    font-weight: bold;
    margin-bottom: 10px;
}

body.pathways .market-data th, body.pathways .market-data td {
    border: 1px solid black;
    max-width: 350px;
}

body.pathways .ec-container .site-color {
    /* falls back to --primary-color for pathways that don't define a darker --cluster-text-color */
    color: var(--cluster-text-color, var(--primary-color));
}

body.pathways .ec-container .ec-item {
    background-color: rgba(from var(--primary-color) r g b / 0.2);
    color: var(--primary-color);
}

/* 2026 pathway body classes all end in "-2026" and define --cluster-text-color; keeps legacy pathways on the translucent style above */
body[class*="-2026"] .ec-container .ec-item {
    background-color: var(--primary-color);
    color: var(--cluster-text-color);
}

body.pathways .ec-container .ec-item .initial-content {
    width: 100%;
}

body.pathways .ec-container .ec-item .initial-content span {
    text-align: left;
}

body.pathways .ec-container hr {
    border: 2px solid var(--primary-color);
}

body.pathways .ec-container .right-ec-chevron svg path {
    fill: var(--cluster-text-color, var(--primary-color));
}

.pathway-header {
    margin: 1rem 2rem;
}

.pathway-header .pathway-top-label {
    margin-bottom: 0;
}

.pathway-icon {
    margin-right: 20px;
}

.pathway-icon svg {
    width: 70px;
    height: 100%;
    fill: var(--cluster-text-color, var(--primary-color));
}


/**
* HEADER STYLING
*/
header {
    background-color: white;
    position: sticky;
    top: 0;
    transition: all 0.2s ease;
    z-index: 99999;
}

/* Header scrolled state styles */
header.header-scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    z-index: 999;
}

header.header-scrolled .logo-container {
    height: 50px;
    padding: 10px;
}

header.header-scrolled .top-navigation .top-nav-link svg {
    height: 0;
}

header.header-scrolled .top-navigation {
    margin: 0 auto;
}

header .categoryLevel ul:not(.level1) {
    display: none;
}

header .chevron-wrapper {
    display: inline;
}

header #mobile-menu .chevron-wrapper {
    height: fit-content;
    margin: auto 0;
}

#mobile-menu-toggle-wrapper {
    width: 120px;
    display: flex;
    justify-content: center;
    background-color: var(--primary-color);
    order: 1;
}

.header-inner {
    flex-direction: row;
    flex-wrap: wrap;
    transition: padding 0.2s ease;
    border-bottom: 2px solid var(--primary-color);
    background-color: #F7F7F7;
}

.logo-container {
    width: auto;
    height: 50px;
    padding: 10px;
    margin: auto;
    margin-left: 10px;
    transition: all 0.2s ease;
    box-sizing: content-box;
}

.logo-container img {
    height: auto;
    max-height: 50px;
    border: none;
    border-radius: 0;
    margin: 0;
    transition: max-height 0.2s ease;
}

.top-navigation {
    margin: 10px auto;
    width: 100%;
    transition: margin 0.2s ease;
    position: relative;
    order: 2;
}

.top-navigation button {
    background: none;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
}

.top-navigation .top-nav-link {
    height: 100%;
    max-width: 100px;
    flex: 1;
    padding: 10px 3px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    color: var(--primary-color);
    font-size: var(--font-small);
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.top-navigation svg {
    height: 20px;
    display: block;
    margin: 0 auto;
    fill: var(--primary-color);
    transition: fill 0.2s ease, color 0.2s ease, height 0.2s ease;
    flex-shrink: 0;
}

.top-navigation .top-nav-link:hover svg, .top-navigation .top-nav-link:focus svg {
    fill: white;
}

.top-navigation .top-nav-link:hover, .top-navigation .top-nav-link:focus {
    background-color: var(--primary-color);
    color: white;
}

#search-modal {
    position: absolute;
    display: flex;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    background-color: var(--primary-color);
    top: 0;
    left: 0;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    pointer-events: none;
}

#search-modal.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

#search-modal * {
    color: white;
}

#search-modal form {
    margin: 8px;
    display: flex;
    width: 100%;
}

#search-modal svg {
    fill: white;
}

#search-modal #search-button {
    border: 2px solid white;
    border-radius: 5px;
    margin-left: 15px;
    padding: 0 15px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#search-modal #search-button svg {
    height: 15px;
    margin-right: 8px;
    transition: fill 0.2s ease;
}

#search-modal #search-button * {
    transition: color 0.2s ease;
}

#search-modal #search-button:hover {
    background-color: white;
    color: var(--primary-color);
}

#search-modal #search-button:hover * {
    color: var(--primary-color);
    fill: var(--primary-color);
}

#search-modal #close-search-button {
    display: flex;
}

#search-modal #close-search-button svg {
    height: 20px;
    margin-top: 8px;
    margin-right: 5px;
}

#search-modal .search_field {
    border: 0;
    border-radius: 5px;
    color: black;
    width: 100%;
    padding: 0 10px;
    font-size: var(--font-large);
}

/* Translate Modal Styles */
#translate-modal {
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    background-color: var(--primary-color);
    top: 0;
    left: 0;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    pointer-events: none;
}

#translate-modal.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

#translate-modal * {
    color: white;
}

#translate-modal a * {
    color: black;
}

#translate-modal svg {
    fill: white;
    transition: fill 0.2s ease;
}

#translate-modal h5 {
    margin: 8px 8px 0 8px;
    font-size: var(--font-large);
}

#translate-modal #translate {
    margin: 8px;
    flex: 1;
}

#translate-modal #translate #google_translate_element {
    padding-right: 30px;
}

#translate-modal #close-translate-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    background: transparent;
    border: none;
    cursor: pointer;
}

#translate-modal #close-translate-button svg {
    height: 20px;
    margin-top: 8px;
    margin-right: 5px;
}

.nav-link-text {
    flex: 1;
    margin-top: 5px;
    font-size: var(--font-medium);
    transition: height 0.2s ease;
}

.bottom-navigation {
    background-color: var(--primary-color);
    position: relative;
}

.bottom-navigation a {
    padding: 19px;
    text-decoration: none;
    color: white;
    font-size: var(--font-small);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Navigation item wrapper for desktop */
#bottom-nav-desktop .nav-item-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

#bottom-nav-desktop .main-nav-link {
    padding: 19px;
    padding-right: 5px;
    text-decoration: none;
    color: white;
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Links without visible dropdown toggle get even padding */
#bottom-nav-desktop .nav-item-wrapper:has(.main-nav-dropdown-toggle[style*="display: none"]) .main-nav-link {
    padding: 19px;
}

#bottom-nav-desktop .nav-item-wrapper:hover,
#bottom-nav-desktop .main-nav-link:focus,
#bottom-nav-desktop .main-nav-dropdown-toggle:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

#bottom-nav-desktop .main-nav-dropdown-toggle {
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 19px 10px;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
    font-size: 14px;
}

#bottom-nav-desktop .main-nav-dropdown-toggle .chevron-wrapper {
    display: flex;
    align-items: center;
}

#district-home-header-link {
    border: 2px solid white;
    border-radius: 5px;
    padding: 10px;
    margin: auto 10px;
    font-size: var(--font-medium);
}

#district-home-header-link-wrapper {
    min-height: 60px;
    display: flex;
}

#district-home-footer-link {
    padding: 9px;
    margin: 20px auto 0 auto;
    border: 2px solid white;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    display: block;
    width: fit-content;
    font-size: var(--font-large);
}

#district-home-footer-link:hover,
#district-home-footer-link:focus,
#district-home-header-link:hover,
#district-home-header-link:focus {
    background-color: white;
    color: var(--primary-color) !important;
    text-decoration: none;
}

#bottom-nav-desktop {
    display: none;
    position: relative;
}

.bottom-navigation nav button.main-nav-dropdown {
    position: relative;
    font-size: var(--font-medium);
    color: white;
    background-color: var(--primary-color);
    border: none;
    cursor: pointer;
    min-height: 55px;
}

#bottom-nav-desktop .interior-nav-list {
    position: absolute;
    padding: 5px;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--gray);
    min-width: 200px;
    z-index: 1000;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#bottom-nav-mobile {
    min-height: 58px;
    flex-direction: row-reverse;
}

#mobile-menu .interior-nav-list {
    position: static;
    background-color: var(--primary-color);
    padding-left: 20px;
    margin-left: 10px;
    margin-right: 30px;
    display: flex;
    flex-direction: column;
}

#mobile-menu .interior-nav-list * {
    color: white;
}

.bottom-navigation .interior-nav-list * {
    color: var(--primary-color);
}

.bottom-navigation .interior-nav-list a:hover,
#mobile-menu .interior-nav-list a:hover {
    text-decoration: underline;
}

.bottom-navigation .interior-nav-list a,
#mobile-menu .interior-nav-list a {
    padding: 0 20px;
    margin-top: 6px;
    margin-bottom: 6px;
    font-size: var(--font-medium);
}

/* Hide menu items containing index_content.cfm in the URL */
.interior-nav-list a[href*="index_content.cfm"] {
    display: none !important;
}

#main-heading-container {
    background-color: var(--gray);
    border-bottom: 2px solid var(--primary-color);
    padding: 15px;
    text-align: center;
}

/* Scrollbar styling for dropdown menus */
.interior-nav-list::-webkit-scrollbar {
    width: 8px;
}

.interior-nav-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.interior-nav-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.interior-nav-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Mobile menu scrollbar styling */
#mobile-menu::-webkit-scrollbar {
    width: 8px;
}

#mobile-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

#mobile-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

#mobile-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Chevron rotation on hover and when dropdown is open */
.main-nav-dropdown svg,
.main-nav-dropdown-toggle svg {
    transition: transform 0.3s ease;
}

/* Mobile navigation item wrapper */
#mobile-menu .nav-item-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid white;
    margin-left: 30px;
    margin-right: 30px;
    background-color: var(--primary-color);
}

#mobile-menu .main-nav-link {
    flex: 1;
    border: none;
    padding: 15px 0;
    font-size: var(--font-large);
    color: white;
    text-decoration: none;
    background-color: transparent;
    text-align: left;
}

#mobile-menu .main-nav-dropdown-toggle {
    border: none;
    background-color: transparent;
    color: white;
    cursor: pointer;
    padding: 15px 10px;
    display: flex;
    align-items: center;
}

#mobile-menu .interior-nav-list a {
    text-align: right;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#mobile-menu .nav-item-wrapper:last-of-type {
    border-bottom: 0;
}

/* Desktop: rotate when open */
#bottom-nav-desktop .main-nav-dropdown-toggle.dropdown-open svg {
    transform: rotate(180deg);
}

/* Mobile: only rotate when dropdown is actually open */
#mobile-menu .main-nav-dropdown-toggle.dropdown-open svg {
    transform: rotate(180deg);
}

/* Mobile dropdown styling */
#mobile-menu .nav-item-wrapper:has(.main-nav-dropdown-toggle.dropdown-open) {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Accessibility styles for skip link */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-to-main:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 8px 16px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: #000;
    color: #fff;
    text-decoration: none;
    z-index: 9999;
    display: block;
}

#breadcrumbs ul {
    list-style-type: none;
    flex-wrap: wrap;
}

#breadcrumbs ul li {
    margin-left: 15px;
}

#breadcrumbs ul li:first-child {
    margin-left: 0;
}

#breadcrumbs ul a {
    color: black;
}

#breadcrumbs ul li::marker {
    content: '/ ';
}

#breadcrumbs ul li:last-child {
    font-weight: bold;
}

#breadcrumbs ul li:first-child::marker {
    content: '';
}



/* HAMBURGER ICON */

#nav-icon {
    width: 35px;
    height: 27px;
    margin: auto 30px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

#nav-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: white;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
    top: 0px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
    top: 12px;
}

#nav-icon span:nth-child(4) {
    top: 24px;
}

#nav-icon.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
}

#nav-icon.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}

#mobile-menu {
    position: absolute;
    top: 100%;
    background-color: var(--primary-color);
    right: 0;
    width: 100%;
    text-align: right;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
}

#mobile-menu.show {
    max-height: 500px;
    overflow-y: auto;
    opacity: 1;
}

/**
* MAIN CONTENT STYLING
*/

.inside_nav_container {
    padding: 0;
    margin-top: 20px;
}

#inside_nav_flex {
    display: block;
}

.inside_nav_toggle {
    border: none;
    height: 50px;
    width: 100%;
    background-color: var(--primary-color);
    color: var(--cluster-text-color, white);
    text-align: left;
    padding-left: 20px;
}

.inside_nav_toggle:hover {
    cursor: pointer;
}

.inside_nav_toggle span {
    margin: auto 0;
}

.inside_nav_toggle .button_icon svg {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.inside_nav_toggle .button_icon svg path {
    fill: var(--cluster-text-color, white);
}

.inside_nav_toggle .button_icon.rotated svg {
    transform: rotate(180deg);
}

#inside_nav {
    display: none !important;
}

#inside_nav.open {
    display: block !important;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nested navigation indentation */
#inside_nav #menu ul[class*="children_for_"] {
    padding-left: 20px;
}

#inside_nav #menu ul[class*="children_for_"] a {
    font-size: var(--font-medium);
}

#inside_nav #menu {
    display: block;
    float: none;
    margin-right: 0;
    width: 100%;
}

#inside_nav #menu ul {
    background-color: var(--gray);
    list-style-type: none;
    padding: 0;
    margin-top: 0;
}

#inside_nav #menu span {
    width: 100%;
}

#inside_nav #menu a {
    color: black;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
}

.homepage-links-section {
    margin: 30px auto;
}

#homepage-links-container {
    margin: 15px auto 30px auto;
    max-width: 930px;
}

#homepage-links-container a {
    text-decoration: none;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    margin: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#homepage-links-container a:hover, #homepage-links-container a:focus {
    background-color: var(--primary-color);
    color: white;
}

#homepage-links-container a:hover * , #homepage-links-container a:focus * {
    color: white;
}

#homepage-links-container .link-container {
    padding: 10px;
    width: 150px;
    min-height: 200px;
}

#homepage-links-container .link-container .icon-container .icon-inner {
    width: 35px;
    height: 35px;
    padding: 15px;
    background-color: var(--primary-color);
    border-radius: 50%;
}

#homepage-links-container .link-container .icon-container .icon-inner svg {
    max-width: 35px;
    max-height: 35px;
    fill: white;
}

#homepage-links-container .link-container .link-title {
    font-weight: bold;
    font-size: var(--font-large);
    margin: 10px 0 5px 0;
}

#homepage-links-container .link-container .link-description {
    font-size: var(--font-medium);
    color: black;
}

.homepage-links-heading {
    margin: 0 10px;
}

.middle_when_right_side_bar {
    width: 100% !important;
    display: inline-block;
}

#sidebar_content {
    width: 100%;
    display: inline-block;
}

.right_side_with_dotted_line,
.right_side_no_dotted_line {
    padding-right: 20px;
}

.right_side_with_dotted_line h3,
.right_side_no_dotted_line h3 {
    background: var(--primary-color) none;
}

#homepage-editor-section {
    margin-bottom: 30px;
}

#homepage-editor-section .homepage-editor-content {
    max-width: 350px;
    background-color: var(--gray);
    padding: 10px;
    margin: 20px;
}

#homepage-editor-section .homepage-editor-content h3 {
    margin: 0;
}

#homepage-editor-section .homepage-editor-content p {
    font-size: var(--font-small);
}

#homepage-editor-section .homepage-editor-content .image-container {
    padding-right: 10px;
}

#homepage-editor-section .homepage-editor-content .homepage-image {
    width: 100%;
    border: none;
    border-radius: 0;
    margin: 0;
}

#landing-social-feed {
    max-width: 930px;
    margin: auto;
    margin-bottom: 20px;
}

#landing-social-feed ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
}

#landing-social-feed ul li {
    flex: 1;
    border-bottom: 2px solid var(--gray);
    margin: 16px;
    margin-top: 0;
    display: flex;
    padding: 15px;
    padding-bottom: 30px;
}

#landing-social-feed ul li:last-child {
    border-right: none;
    border-bottom: 0;
}

#landing-social-feed ul li .image {
    display: flex;
    margin-right: 20px;
}

#landing-social-feed ul li img {
    width: 150px;
    margin: auto;
}

#landing-social-feed ul li .copy {
    display: block;
}

#social-icons-container a {
    margin: 0 15px;
}

#social-icons-container svg {
    height: 40px;
    fill: var(--primary-color);
}

div.headerbg {
    background-color: var(--primary-color);
    margin-top: 20px !important;
}

.detail_sitemap a {
    font-size: var(--font-medium);
}

/**
* CAREER CLUSTERS STYLING
*/
#career-clusters {
    margin: 20px;
}

#career-clusters-intro {
    max-width: 825px;
    margin: auto;
}

#career-clusters-list {
    max-width: 850px;
    margin: auto;
    list-style: none;
    padding: 0;
}

#career-clusters-list li {
    list-style: none;
    width: 100%;
}

#career-clusters-list .career-cluster-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#career-clusters .career-cluster {
    height: auto;
    background-color: var(--primary-color);
    padding: 10px 14px;
    margin: 5px 0;
    display: flex;
    flex-direction: row;
    text-decoration: none;
}

#career-clusters .career-cluster .chevron svg {
    margin: auto;
    transform: rotate(-90deg);
}

/* Career Cluster Background Colors - mapped to cluster IDs */
#career-clusters .career-cluster.cluster-1 {
    background-color: var(--agriculture); /* Agriculture, Food, & Natural Resources */
}

#career-clusters .career-cluster.cluster-2 {
    background-color: var(--arts-av-communication); /* Arts, AV, & Communications */
}

#career-clusters .career-cluster.cluster-3 {
    background-color: var(--information-technology); /* Information Technology */
}

#career-clusters .career-cluster.cluster-4 {
    background-color: var(--transportation); /* Transportation, Distribution, & Logistics */
}

#career-clusters .career-cluster.cluster-5 {
    background-color: var(--architecture); /* Architecture & Construction */
}

#career-clusters .career-cluster.cluster-6 {
    background-color: var(--manufacturing); /* Manufacturing */
}

#career-clusters .career-cluster.cluster-7 {
    background-color: var(--stem); /* Science, Technology, Engineering, & Mathematics */
}

#career-clusters .career-cluster.cluster-8 {
    background-color: var(--health); /* Health Sciences */
}

#career-clusters .career-cluster.cluster-9 {
    background-color: var(--law-public-safety); /* Law & Public Safety */
}

#career-clusters .career-cluster.cluster-10 {
    background-color: var(--human-services); /* Human Services */
}

#career-clusters .career-cluster.cluster-11 {
    background-color: var(--government); /* Government & Public Administration */
}

#career-clusters .career-cluster.cluster-12 {
    background-color: var(--education); /* Education & Training */
}

#career-clusters .career-cluster.cluster-13 {
    background-color: var(--marketing); /* Marketing */
}

#career-clusters .career-cluster.cluster-14 {
    background-color: var(--business); /* Business, Management, & Administration */
}

#career-clusters .career-cluster.cluster-15 {
    background-color: var(--finance); /* Finance */
}

#career-clusters .career-cluster.cluster-16 {
    background-color: var(--hospitality); /* Hospitality & Tourism */
}

/* Career Cluster Background Colors - mapped to 2026-27 cluster IDs */
#career-clusters .career-cluster.cluster-2026-1 {
    background-color: var(--agriculture-2026); /* Agriculture */
}

#career-clusters .career-cluster.cluster-2026-2 {
    background-color: var(--arts-entertainment-design); /* Arts, Entertainment, & Design */
}

#career-clusters .career-cluster.cluster-2026-3 {
    background-color: var(--digital-technology); /* Digital Technology */
}

#career-clusters .career-cluster.cluster-2026-4 {
    background-color: var(--supply-chain-transportation); /* Supply Chain & Transportation */
}

#career-clusters .career-cluster.cluster-2026-5 {
    background-color: var(--construction); /* Construction */
}

#career-clusters .career-cluster.cluster-2026-6 {
    background-color: var(--advanced-manufacturing); /* Advanced Manufacturing */
}

#career-clusters .career-cluster.cluster-2026-7 {
    background-color: var(--energy-natural-resources); /* Energy & Natural Resources */
}

#career-clusters .career-cluster.cluster-2026-8 {
    background-color: var(--healthcare-human-services); /* Healthcare & Human Services */
}

#career-clusters .career-cluster.cluster-2026-9 {
    background-color: var(--public-service-safety); /* Public Service & Safety */
}

#career-clusters .career-cluster.cluster-2026-10 {
    background-color: var(--financial-services); /* Financial Services */
}

#career-clusters .career-cluster.cluster-2026-11 {
    background-color: var(--hospitality-events-tourism); /* Hospitality, Events, & Tourism */
}

#career-clusters .career-cluster.cluster-2026-12 {
    background-color: var(--education-2026); /* Education */
}

#career-clusters .career-cluster.cluster-2026-13 {
    background-color: var(--marketing-sales); /* Marketing & Sales */
}

#career-clusters .career-cluster.cluster-2026-14 {
    background-color: var(--management); /* Management & Entrepreneurship */
}

/* Career Cluster Text Colors - mapped to 2026-27 cluster IDs */
#career-clusters .career-cluster.cluster-2026-1 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-1 svg,
#career-clusters .career-cluster.cluster-2026-1 svg path {
    color: var(--agriculture-2026-text);
    fill: var(--agriculture-2026-text);
}

#career-clusters .career-cluster.cluster-2026-2 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-2 svg,
#career-clusters .career-cluster.cluster-2026-2 svg path {
    color: var(--arts-entertainment-design-text);
    fill: var(--arts-entertainment-design-text);
}

#career-clusters .career-cluster.cluster-2026-3 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-3 svg,
#career-clusters .career-cluster.cluster-2026-3 svg path {
    color: var(--digital-technology-text);
    fill: var(--digital-technology-text);
}

#career-clusters .career-cluster.cluster-2026-4 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-4 svg,
#career-clusters .career-cluster.cluster-2026-4 svg path {
    color: var(--supply-chain-transportation-text);
    fill: var(--supply-chain-transportation-text);
}

#career-clusters .career-cluster.cluster-2026-5 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-5 svg,
#career-clusters .career-cluster.cluster-2026-5 svg path {
    color: var(--construction-text);
    fill: var(--construction-text);
}

#career-clusters .career-cluster.cluster-2026-6 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-6 svg,
#career-clusters .career-cluster.cluster-2026-6 svg path {
    color: var(--advanced-manufacturing-text);
    fill: var(--advanced-manufacturing-text);
}

#career-clusters .career-cluster.cluster-2026-7 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-7 svg,
#career-clusters .career-cluster.cluster-2026-7 svg path {
    color: var(--energy-natural-resources-text);
    fill: var(--energy-natural-resources-text);
}

#career-clusters .career-cluster.cluster-2026-8 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-8 svg,
#career-clusters .career-cluster.cluster-2026-8 svg path {
    color: var(--healthcare-human-services-text);
    fill: var(--healthcare-human-services-text);
}

#career-clusters .career-cluster.cluster-2026-9 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-9 svg,
#career-clusters .career-cluster.cluster-2026-9 svg path {
    color: var(--public-service-safety-text);
    fill: var(--public-service-safety-text);
}

#career-clusters .career-cluster.cluster-2026-10 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-10 svg,
#career-clusters .career-cluster.cluster-2026-10 svg path {
    color: var(--financial-services-text);
    fill: var(--financial-services-text);
}

#career-clusters .career-cluster.cluster-2026-11 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-11 svg,
#career-clusters .career-cluster.cluster-2026-11 svg path {
    color: var(--hospitality-events-tourism-text);
    fill: var(--hospitality-events-tourism-text);
}

#career-clusters .career-cluster.cluster-2026-12 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-12 svg,
#career-clusters .career-cluster.cluster-2026-12 svg path {
    color: var(--education-2026-text);
    fill: var(--education-2026-text);
}

#career-clusters .career-cluster.cluster-2026-13 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-13 svg,
#career-clusters .career-cluster.cluster-2026-13 svg path {
    color: var(--marketing-sales-text);
    fill: var(--marketing-sales-text);
}

#career-clusters .career-cluster.cluster-2026-14 .career-cluster-title,
#career-clusters .career-cluster.cluster-2026-14 svg,
#career-clusters .career-cluster.cluster-2026-14 svg path {
    color: var(--management-text);
    fill: var(--management-text);
}

#career-clusters .career-cluster * {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
}

#career-clusters .career-cluster span {
    font-weight: 500;
}

#career-clusters .icon svg {
    height: 40px;
    fill: white;
    margin: auto 10px auto auto;
}

/**
* COURSE CATALOG STYLING
*/

#course-catalog {
    margin: 20px;
}

#course-catalog-intro {
    max-width: 850px;
    margin: auto;
}

#course-catalog-list {
    max-width: 850px;
    margin: auto;
}

#course-catalog .course-catalog-item {
    width: 100%;
    height: auto;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    padding: 5px 4px;
    margin: 5px 0;
    display: flex;
    flex-direction: row;
    text-decoration: none;
}

#course-catalog .course-catalog-item * {
    text-decoration: none;
    font-size: var(--font-large);
}

#course-catalog a.course-catalog-item p {
    font-size: var(--font-large);
    color: var(--primary-color);
    width: 100%;
}

#course-catalog .course-catalog-item .view-courses-btn {
    display: none;
    background-color: var(--primary-color);
    color: white;
    height: 20px;
    line-height: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 2px;
    text-transform: uppercase;
    font-size: var(--font-small);
    margin: 0 20px 10px 20px;
}

#course-catalog .course-catalog-item .chevron svg {
    margin: auto;
    transform: rotate(-90deg);
}

#course-catalog .course-catalog-item .chevron svg path {
    fill: var(--primary-color);
}

/**
* EC TOOL STYLING
*/
.ec-container {
    padding-left: 1rem;
}

.ec-container .ec-item {
    background-color: var(--gray);
    padding: 5px 15px;
}

.ec-container .ec-item .initial-content h4 {
    font-size: 19px;
}

.ec-container hr {
    margin-top: 0;
    margin-bottom: 10px;
    border: 2px solid gray;
}

.detail_expand_collapse_tool div:has(> h3.tool_heading) {
    padding-left: 1rem !important;
}

/**
* CONTENT EDITOR STYLING
*/
.detail_content_editor section {
    margin-top: 1rem;
    padding: 0 2rem 0 0.5rem;
}

.detail_content_editor div:has(> h3.tool_heading) {
    padding-left: 1rem !important;
}

.detail_content_editor img {
    margin: 0;
}

.detail_content_editor div div *:first-child {
    margin-top: 0;
}

.detail_content_editor div div *:last-child {
    margin-bottom: 0;
}

/**
* RESOURCES LINKS STYLING
*/
.detail_resources_links section {
    padding: 0 2rem 0 1rem;
}

.detail_resources_links div:has(> h3.tool_heading) {
    padding-left: 1rem !important;
}

.icon-title-container {
    font-size: 0.9rem;
    font-weight: 600;
}

/**
* HUB TOOL STYLING
*/
.cms-hub-tool {
    margin-top: 20px;
}

.cms-hub-tool .hub-tabs__tab {
    font-size: 14px;
}

/**
* ACP COURSES TOOL STYLING
*/

.acp-search-wrapper, .acp-filter-wrapper {
    z-index: -1;
}

/**
* FOOTER STYLING
*/
footer {
    background-color: var(--primary-color);
    color: white;
    margin-top: auto;
    padding: 0;
}

body footer a {
    color: white !important;
    text-decoration: none !important;
}

footer a:hover {
    text-decoration: underline;
}

.footer-top ul {
    padding: 10px 0;
    list-style-type: none;
    text-align: center;
}

.footer-top a {
    font-size: var(--font-medium);
    margin-bottom: 10px;
}

footer .footer-top {
    padding-left: 10px;
    padding-right: 10px;
}

footer .footer-top nav {
    margin: 0 20px;
}

footer .footer-bottom {
    padding: 10px 0;
    border-top: 2px solid white;
    margin: 0 30px;
}

footer .footer-bottom-inner {
    margin: 0 20px;
    flex-direction: column;
}

footer .footer-bottom-inner div {
    margin: auto;
    text-align: center;
}

footer #footer-cms4schools-logo {
    padding: 10px 0;
    width: 140px;
    margin: auto;
    margin-top: 10px;
}

footer #footer-cms4schools-logo svg {
    margin-top: auto;
}

footer #footer-logos-container {
    margin-bottom: 20px;
    display: none;
}

footer #inspire-logo, footer #ya-logo {
    margin: 0 20px;
}

footer #inspire-logo a, footer #ya-logo a {
    margin: 0;
}

footer #inspire-logo > a svg, footer #ya-logo > a svg {
    height: 78px;
    margin: auto;
}

footer .social-icons-container {
    margin-top: 10px;
}

footer .social-icons-container svg {
    fill: white;
    width: 40px;
    margin: 0 4px;
}

.district-title {
    font-weight: bold;
    font-size: var(--font-large);
}

.district-address {
    font-size: var(--font-medium);
}

.district-contact {
    font-size: var(--font-medium);
    margin: 6px 0;
}

.district-contact svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    fill: white;
    margin-right: 5px;
}

.contact-us {
    display: none;
}

/**
* DESKTOP STYLING
*/
@media screen and (min-width: 769px) {
    /**
    * DESKTOP-SPECIFIC GLOBAL STYLING
    */
    h1 {
        font-size: 42px;
        line-height: auto;
    }

    #Breadcrumbs {
        padding-left: 0;
    }

    #main-heading-container {
        padding: 50px 100px 20px 120px;
        text-align: left;
    }

    .inside_nav_container {
        width: 320px;
        padding-left: 20px;
        padding-right: 0;
    }

    .inside_nav_container .title {
        font-size: 0.8rem;
    }

    #inside_nav_flex {
        display: flex;
        justify-content: center;
        margin-left: 100px;
        margin-right: 100px;
    }

    #landing-social-feed ul {
        flex-direction: row;
    }

    #landing-social-feed ul li {
        display: block;
        margin: 0;
        border-right: 2px solid var(--gray);
        border-bottom: 0;
    }


    #career-clusters .career-cluster {
        width: 150px;
        height: 125px;
        padding: 20px;
        margin: 10px;
        text-align: center;
    }

    #career-clusters .career-cluster {
        flex-direction: column;
        justify-content: space-around;
    }

    #career-clusters .career-cluster .chevron {
        display: none;
    }

    #career-clusters .icon svg {
        margin: auto;
    }

    #career-clusters-list li {
        width: fit-content;
    }

    #course-catalog .course-catalog-item {
        width: 170px;
        height: 100px;
        margin: 10px;
        text-align: center;
        flex-direction: column;
    }

    #course-catalog .course-catalog-item .view-courses-btn {
        display: block;
    }

    #course-catalog .course-catalog-item .chevron {
        display: none;
    }

    #course-catalog .course-catalog-item p {
        font-size: 0.9rem;
        margin: auto;
    }

    #homepage-editor-section .homepage-editor-content {
        margin-left: 0;
        margin-right: 0;
        max-width: 525px;
    }

    /**
    * FOOTER DESKTOP STYLING
    */
    footer {
        padding: 0 100px;
    }

    footer .footer-bottom-inner {
        flex-direction: row;
    }

    footer .footer-bottom-inner div {
        text-align: left;
    }

    footer #footer-logos-container {
        display: flex;
    }

    footer #footer-cms4schools-logo {
        margin: 0;
    }

    footer .footer-top {
        justify-content: space-between;
        padding-top: 15px;
        padding-left: 30px;
        padding-right: 30px;
        margin-left: 20px;
    }

    .footer-top ul {
        text-align: left;
    }

    footer .footer-bottom-inner div {
        margin: auto 0;
    }

    footer #district-home-footer-link {
        display: none;
    }

    .district-contact {
        margin: 1rem 0;
    }

    .contact-us {
        display: inline;
    }
}

/**
* HEADER DESKTOP STYLING
*/
@media screen and (min-width: 930px) {
    #bottom-nav-desktop {
        display: flex;
        flex-wrap: wrap;
    }

    #bottom-nav-mobile {
        display: none;
    }

    #mobile-menu-toggle-wrapper {
        display: none;
    }

    .logo-container {
        margin-left: 5%;
        height: 90px;
        padding: 10px;
        display: flex;
    }

    .logo-container img {
        max-height: 90px;
        max-width: 300px;
        object-fit: contain;
    }

    .top-navigation {
        background-color: var(--gray);
        margin-right: 5%;
        width: fit-content;
        border-radius: 5px;
    }

    .header-inner {
        border-bottom: none;
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: white;
    }

    header.header-scrolled .top-navigation {
        margin: 0 5% 0 auto;
    }

    .top-navigation .top-nav-link {
        width: 100px;
        padding: 10px;
        border-radius: 5px;
    }

    .top-navigation .top-nav-link svg {
        height: 30px;
    }
}

@media screen and (min-width: 951px) {
    #homepage-editor-section .homepage-editor-content {
        max-width: 335px;
    }

    #homepage-editor-section .homepage-editor-content:first-child {
        margin-right: 10px;
    }

    #homepage-editor-section .homepage-editor-content:last-child {
        margin-left: 10px;
    }
}

@media screen and (min-width: 1024px) {
    #sidebar_content {
        width: 380px;
    }

    .middle_when_right_side_bar {
        width: calc(100% - 4vw - 380px) !important;
    }
}

@media screen and (min-width: 1135px) {
    #homepage-editor-section .homepage-editor-content {
        max-width: 425px;
    }
}