:root {
    --green: #237A34;
    --purple: #AA248D;
    --orange: #F28725;
    --navy: #004987;
    --teal: #0099A9;

    --primary-color-1: #00ADDA;
	--primary-color-1a: #00ADDA80; /* 50% opacity*/
	--primary-color-2: #000000;
	--primary-color-2a: #00000033; /* 20% opacity*/
	--primary-color-3: ;
	--primary-color-4: ;
	--highlight-color: #EAEAEA;
	--highlight-color-2: ;
	--link-color: #00ADDA;
	--link-color-2: ;
	--link-hover-color: #da0040;
	--link-hover-color-2: ;
	--link-hover-color-3: ;
	--top-nav-color: #ffffff;
	--top-nav-hover-color: ;
	--quicklink-hover: ;
	--button-1: #00ADDA;
	--button-2: #000000;
	--button-footer: #00ADDA;
}

[id] {
  scroll-margin-top: 90px;
}


@media (min-width: 99em) {
    [id] {
        scroll-margin-top: 100px;
    }
}

@media (min-width: 125em) {
    [id] {
        scroll-margin-top: 140px;
    }
}

/* Hide .sidebar if .sidebar-nav and .related-zone contain no child elements. */
.sidebar:not(:has(.sidebar-nav > *, .related-zone .editor > *, .trustee-info, .ward-sidebar, .related-col .editor > *, .program-details-wrapper, .quicklinks-wrapper, .documents-wrapper, .article-share)) {
    display: none;
}

ie-query {
    min-height: 0!important;
}

.text-uppercase {
    text-transform: uppercase;
}

.title-row {
    margin-bottom: 1rem;
}

.subpage-ul>.content-container {
    padding: 1rem 5%;
}

.event-name .card-description {
    overflow: revert;
    display: block;
    -webkit-line-clamp: revert;
    -webkit-box-orient: revert;
}

.btn-green {
    background: var(--green);
}

.btn-center {
    margin-left: auto;
    margin-right: auto;
}

.breadcrumbs {
    text-transform: none;
    font-weight: var(--font-medium);
    color: var(--primary-color-1);
}

.editor blockquote {
    margin: 1rem 0;
    border-left: 5px solid var(--primary-color-1);
}

.page-content ul,
.page-content .square-list,
.square-list,
.page-content ol {
    margin-left: .5rem;
    margin-bottom: .5rem;
}

.page-content ul li::before,
.square-list li::before {
    background: var(--primary-color-1);
}

.news-events {
    margin-bottom: 2rem;
}

/* Table */
.editor-table th,
ie-query table th {
    background-color: var(--primary-color-1) !important;
    color: white !important;
}

.editor-table,
ie-query table {
    box-shadow: none!important;
}

.editor-table td,
ie-query table td {
    border-right: 1px solid #999999;
}

ie-query table td:last-of-type {
    border-right: 0;
}

.editor-table tr:nth-child(odd),
ie-query table tr:nth-child(odd) {
    background: #E5F7FB;
}

ie-query table tr:nth-child(even) {
    background: white!important;
}

.editor-table p:last-of-type {
    margin-bottom: 0;
}

/* Custom Select */
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-select {
    background-color: #fff;
    border: 1px solid #AFAFAF;
    border-radius: 5px;
    transition: 0.5s;
    padding: 0.75rem 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
}


/* Fieldset */
fieldset {
    padding: 0;
}

fieldset .custom-select::after {
    content: none;
}

fieldset.custom-select-wrapper {
    position: relative;
    display: inline-flex;
    width: 100%;
    background-color: #fff;
    border: 1px solid #AFAFAF;
    border-radius: 5px;
}

fieldset .custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    border: none;
    padding: .35rem .75rem .625rem;
} 

fieldset legend {
    font-size: .8rem;
    font-weight: var(--font-bold);
    margin: 0 .75rem;
} 

.custom-select-wrapper i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* allows clicks to go through to the select */
    color: #707070;
}


input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    width: 10px;
    background-image: url('/images/x-cross.svg?fingerprint=ppb20251217013713');
    background-size: 10px 10px;
    cursor: pointer;
}

.nav-wrapper {
    height: auto;
    justify-content: space-between;
}

.site-logo {
    width: 120px;
    height: auto;
}

.quicklinks .swiper-slide {
    height: auto !important;
}

.quicklink {
    flex-direction: row;
    aspect-ratio: unset;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 1rem;
    color: var(--dark-font-color);
    height: 100%;
}

.quicklink i {
    color: var(--primary-color-1);
    font-size: 1.5rem;
}

.quicklink-label {
    min-height: unset;
    font-size: 1rem;
}

.quicklink-text {
    text-align: left;
    min-height: 100%;
}

.quicklink-desc {
    margin-top: .25rem;
    font-size: .9rem;
}

.home-news .news-item {
    width: 100%;
}

.news-item>a,
.news-item>div {
    display: block;
    box-shadow: 0px 3px 7.5px 0px rgba(0, 0, 0, 0.05);
}

.news-post-img {
    border: 0.5px solid #CCC;
}

.news-title {
    -webkit-line-clamp: 3;
}

.about-title {
    text-align: center;
    color: white;
}

.about-text {
    background-color: white;
    border-radius: 5px;
    padding: 2rem;
    margin: 0;
}

.about-cover {
    height: 30vw;
}

.about-block {
    padding: 0;
    margin-top: -38%;
}

.about-stats-item i {
    font-size: 1.5rem;
}

.home .about-number {
    color: var(--green);
    margin-bottom: 0;
    font-size: 1.5rem;
}

.about-stats-item {
    gap: 1.25rem;
}

.about-unit {
    font-size: .9rem;
    font-weight: var(--font-semibold);
}

.social-icon {
    border: 1.5px solid var(--primary-color-1);
    background: var(--primary-color-1);
}

.social-icon:hover {
    color: var(--primary-color-1) !important;
    border: 1.5px solid var(--primary-color-1);
}

.new-cbe {
    margin-top: 2rem;
}

.new-cbe .row {
    align-items: center;
    row-gap: 2rem;
}

.new-cbe img {
    max-width: 400px;
    width: 100%;
}

.new-cbe-cta-item i {
    font-size: 1.5rem;
}

.new-cbe-cta-item .flex-row {
    gap: 1rem;
}

.new-cbe-cta-item p {
    margin-top: 1rem;
}

.new-cbe-cta-item:nth-of-type(1) i {
    color: var(--primary-color-1);
}

.new-cbe-cta-item:nth-of-type(1) .btn {
    background-color: var(--primary-color-1);
}

.new-cbe-cta-item:nth-of-type(2) i {
    color: var(--purple);
}

.new-cbe-cta-item:nth-of-type(2) .btn {
    background-color: var(--purple);
}

.new-cbe-cta-item:nth-of-type(3) i {
    color: var(--green);
}

.new-cbe-cta-item:nth-of-type(3) .btn {
    background-color: var(--green);
}

.new-cbe-cta-item:nth-of-type(4) i {
    color: var(--orange);
}

.new-cbe-cta-item:nth-of-type(4) .btn {
    background-color: var(--orange);
}

.highlight-slides {
    position: relative;
    padding: 0 3rem;
}

.showcase-button-prev,
.showcase-button-next {
    position: absolute;
}

.round-button-prev,
.round-button-next {
    background: var(--primary-color-2);
    color: white;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

.round-button-prev {
    left: .5rem;
}

.round-button-next {
    right: .5rem;
}

.home .highlight-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 0;
}

.highlight-section h2,
.highlight-section p {
    text-align: center;
}

.highlight-section h2 {
    margin-bottom: 1rem;
}

.cta {
    padding: 2rem 1rem;
}

.cta .btn {
    margin-left: auto;
    margin-right: auto;
}

.cta2 {
    color: white;
}

.footer-top .row {
    row-gap: 0;
}

.footer-block {
    margin-bottom: 1.5rem;
}

.footer-block p {
    font-size: .9rem;
    line-height: 1.8;
}

.footer-block h4 {
    color: var(--primary-color-1);
}

.footer-block ul a {
    font-weight: var(--font-medium);
    font-size: .9rem;
}

.select-heading {
    margin-bottom: 5px;
    font-size: .9rem;
    font-weight: var(--font-medium);
}

.schools-select {
    margin-top: 0;
}

.footer-block.contact p {
    margin-bottom: .25rem;
}

footer address {
    line-height: 1.8;
    margin-bottom: 1rem;
    font-size: .9rem;
}

.footer-block.contact .flex-row {
    margin-bottom: .5rem;
    gap: .75rem;
}

.footer-block.contact .flex-row i {
    width: 16px;
}

footer .search-api-form {
    margin-bottom: 1rem;
}

.schools-select .custom-select,
#schools-dropdown {
    max-width: 100%;
    width: 100%;
}

.footer-welcome-wrapper {
    background-color: #1E1E1E;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
}

.footer-welcome-title {
    color: var(--primary-color-1);
    font-size: 1.1rem;
    font-weight: var(--font-bold);
}

.footer-welcome-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .9rem;
    font-weight: var(--font-medium);
}

.footer-welcome-links li {
    padding-right: .75rem;
    position: relative;
}

.footer-welcome-links li::after {
    content: "·";
    color: white;
    position: absolute;
    right: 0;
}

.footer-welcome-links li:last-of-type:after {
    content: none;
}

.footer-welcome-links a {
    color: white;
}

@media (min-width: 500px) {
    .about-block {
        margin-top: -30%;
    }

    .about-text {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 62em) {
    .nav-wrapper {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }

    .home .content-container {
        padding: 0 5%;
    }

    .news-grid-4 .banner-item-2 {
        grid-area: 1 / 3 / 2 / 5;
    }

    .news-grid-4 .banner-item-3 {
        grid-area: 2 / 3 / 3 / 4;
    }

    .news-grid-4 .banner-item-4 {
        grid-area: 2 / 4 / 3 / 5;
    }

    .banner-item-2 img {
        aspect-ratio: 3 / 1;
    }

    .quicklink {
        gap: 1.5rem;
        padding: 1rem 1.5rem;
    }

    .full-content .quicklink-col-wrapper {
        flex-basis: calc(100% / 3 * 0.7);
        max-width: calc(100% / 3 * 0.7);
    }

    .home-news .news-item {
        width: calc((100% - 2rem) / 3);
    }

    .about-cover {
        height: 17.5vw;
    }

    .about-text {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    .new-cbe-content {
        padding-left: 2rem;
    }

    .new-cbe img {
        max-width: 100%;
    }

    .home .highlight-section {
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }

    .about-block {
        margin-top: -17%;
    }

    .ctas {
        display: flex;
    }

    .cta2 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .cta1 {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%;
    }

    .cta {
        padding: 5% 5%;
    }

    .footer-block,
    .schools-select {
        margin-bottom: 2rem;
    }

    .footer-welcome-wrapper {
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .footer-welcome {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
    }

}


@media (min-width: 75em) {
    .site-logo {
        width: 10rem;
    }

    .banner-item:nth-of-type(1) h3 {
        font-size: 1.5rem;
    }

    .banner-item:nth-of-type(1) .banner-text {
        bottom: 1.5rem;
        left: 1.5rem;
    }

    .banner-item h3 {
        font-size: 1rem;
    }

    .round-button-prev {
        left: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .round-button-next {
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .home .highlight-section {
        padding-top: 2.5rem;
        padding-bottom: 3rem;
    }
}


/* Search bar */
footer .input-field input[type="text"].search-box {
    padding: .75rem;
    margin-bottom: 0;
    border: none;
    background: rgba(247, 247, 247, 0.40);
    width: 100%;
    color: white;
    border-radius: 5px;
    font-size: .9rem;
}

footer .search-box::placeholder {
    color: white;
}

footer .input-field i {
    color: white;
}

footer .search-button i {
    color: white;
}

footer .search-filters {
    position: static;
    background: none;
}

.last-modified-line {
    margin-bottom: .5rem;
}

/* Basic - Level 3 and Lower */
.last-modified {
    color: var(--dark-font-color);
}

.last-modified-text {
    margin-bottom: .5rem;
}

.page-header {
    background-color: transparent;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.page-header::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7931766456582633) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 1;
}

.page-header h1 {
    color: var(--dark-font-color);
}

.school-news-header.page-header h1 {
    color: white;
}

.school-news-header.page-header {
    background: transparent linear-gradient(95deg, #000000 0%, var(--primary-color-1) 50%, #000000 100%) 0% 0% no-repeat padding-box;
    background: var(--primary-color-1);
}

.page-header-no-image::after {
    content: none;
}

.page-header-no-image {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 1.5rem;
}

.page-header-image,
.page-header-image h1,
.page-header-image .breadcrumbs a {
    color: white;
}

.page-header .breadcrumbs {
    margin-bottom: .5rem;
    position: relative;
    z-index: 1;
}

.page-header-image {
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    aspect-ratio: 1920 / 390;
}

.page-content .quicklinks-wrapper {
    margin-top: 1.5rem;
}

.page-content h2 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.quicklink-item {
    flex-direction: row;
    justify-content: flex-start;
    padding: 0;
    aspect-ratio: unset;
    gap: 0;
    height: 100%;
    border: 2px solid #F0F0F0;
    ;
}

.quicklink-label-wrapper {
    color: white;
    flex-grow: 1;
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar .quicklink-label-wrapper {
    justify-content: center;
}

.quicklink-label-wrapper span {
    font-size: .9rem;
}

.quicklink-label-wrapper .quicklink-desc {
    color: #4a4a4a;
    font-weight: var(--font-regular);
    text-align: left;
}

.quicklink-item img {
    display: block;
    width: 100%;
    height: 85px;
    border-radius: 10;
    padding: 1rem;
}

.quicklink-img-wrapper {
    width: 35%;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    border-radius: 10px 0 0 10px;
}

.quicklink-img-wrapper i {
    color: currentColor;
    font-size: 3rem;
    text-align: center;
    display: block;
}

.image-link .quicklink-img-wrapper {
    transition: all .3s ease-in-out;
}

.image-link:hover .quicklink-img-wrapper,
.image-link:focus .quicklink-img-wrapper {
    filter: brightness(0.7);
}

.text-link:hover .quicklink-label-wrapper,
.text-link:focus .quicklink-label-wrapper {
    background-color: #f5f7f9;
}

.sidebar .quicklink-img-wrapper i {
    font-size: 2rem;
}

.main-content .text-link,
.full-content .text-link,
.main-content .text-link span,
.full-content .text-link span {
    text-align: left;
}

.sidebar .quicklink-item {
    flex-direction: column;
}

.sidebar .quicklink-img-wrapper,
.sidebar .quicklink-label-wrapper {
    width: 100%;
}

.sidebar .quicklink-img-wrapper {
    border-radius: 10px 10px 0 0;
    padding: .5rem;
}

.sidebar .quicklink-label-wrapper {
    border-radius: 0 0 10px 10px;
}

.sidebar .text-link,
.sidebar .quicklink-desc,
.sidebar .image-link span {
    text-align: center;
}

.showcase-zone {
    background-color: #F0F0F0;
}

.showcase-button-prev,
.showcase-button-next {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    top: 50%;
    transform: translateY(-50%);
}

.contact-zone {
    background-color: #CCE6F5;
    border-radius: 5px;
    padding: 2rem;
}

.contact-zone .circle-icon {
    background: rgba(0, 0, 0, 0.1975);
    color: var(--dark-font-color);
}

.contact-row {
    margin-bottom: 1rem;
}

.contact-row:last-of-type {
    margin-bottom: 0;
}

.contact-row a {
    color: var(--dark-font-color);
    word-break: break-all;
}

.contact-row a:hover,
.contact-row a:focus {
    text-decoration: underline;
}

.contact-title {
    margin-bottom: 1rem;
}

.contact-title h2 {
    text-align: center;
}

.contact-col {
    margin-bottom: 2rem;
}

/* Colour Block Template */
@media (min-width: 48em) {
    .contact-col,
    contact-title {
        margin-bottom: 0;
    }

    .off-campus-program .contact-col {
        margin-bottom: 2rem;
    }
}

@media (min-width: 62em) {
    .showcase-button-next {
        right: calc((10vw - 3rem) / 2);
    }

    .showcase-button-prev {
        left: calc((10vw - 3rem) / 2);
    }

    .off-campus-program .contact-col {
        margin-bottom: 0;
    }
}

/* Trustees Template */
.wards-map,
.trustee-photo {
    object-fit: contain;
    width: 100%;
    max-width: 450px;
}

.trustee-photo {
    border-radius: 5px;
    margin-bottom: 1rem;
}

.trustee-role,
.trustee-name {
    margin: 0;
}

.ward-card {
    background-color: white;
    padding: 1rem;
    border-radius: 5px;
    height: 100%;
}

.ward-card .circle-icon {
    background: rgba(0, 0, 0, 0.1975);
    color: var(--dark-font-color);
    width: 2rem;
    height: 2rem;
    font-size: .9rem;
}

.ward-card a {
    color: var(--primary-color-1);
}

.ward-card a:hover,
.ward-card a:focus {
    color: var(--link-hover-color);
}

.ward-school-list {
    row-gap: 1rem;
    margin-bottom: 2rem;
}

.page-content .ward-nav li:first-of-type {
    padding-top: 0;
}

.row-gap {
    row-gap: 1.5rem;
}

.trustee-intro {
    margin-bottom: 1rem;
}

/* Trustees landing */
.trustee-tile-image {
    margin-bottom: 1rem;
}
.trustee-tile-image img {
    width: 100%;
    border-radius: 5px;
}

.trustee-tiles-wrapper .row {
    row-gap: 2rem;
}

.trustee-template .sidebar-nav-only {
    order: unset;
}

@media (min-width: 62em) {
    .trustee-template .nav-secondary-wrapper {
        margin-bottom: 2rem;
    }

    .wards-map {
        width: 85%;
        max-width: 85%;
    }

    .trustee-photo {
        width: 100%;
        max-width: 100%;
    }
}

/* Article - News Story */
.article-header .breadcrumbs {
    margin-bottom: 0;
}

.news-banner {
    display: flex;
    flex-wrap: wrap;
}

.news-banner-text {
    background-color: var(--primary-color-2);
    color: white;
    padding: 1rem;
}

.news-banner-text p {
    margin-bottom: 2rem;
}

.news-banner-text p::after {
    content: "";
    width: 80px;
    height: 2px;
    background: #CCE6F5;
    display: block;
    margin-top: 2rem;
}

.news-banner-img {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.news-banner-img img {
    height: 100%;
    aspect-ratio: 16 / 9;
}

.news-banner-text h1 {
    line-height: 1.1;
    margin: 0 0 1.5rem;
    font-size: 2.2rem;
}

.showcase-zone.news-article {
    color: white;
}

/* Event Article */
.event-banner-text {
    color: var(--dark-font-color);
    justify-content: flex-start;
    padding-top: 2rem;
    padding-bottom: 2rem;
    width: 100%;
}

.event-banner .event-date-wrapper {
    border-radius: 5px;
}

.event-banner .related-event-details {
    padding-top: 0;
}

.event-banner .event-tag {
    font-weight: var(--font-medium);
}

.event-banner-info {
    align-items: flex-start;
    gap: 1rem;
}

.event-banner-info .format-date-2 {
    font-weight: var(--font-semibold);
}

.event-banner-info .event-date-wrapper {
    min-height: 5.5rem;
}

.event-banner-info .event-date-line {
    font-weight: var(--font-semibold);
    color: var(--dark-font-color) !important;
    margin-bottom: .5rem;
}

.event-banner-info .event-time-line {
    font-weight: var(--font-semibold);
}

.event-type {
    font-size: 1rem;
    margin-top: .5rem;
}

.event-website {
    margin-top: 2rem;
}

.event-description p {
    font-size: 1.3em;
}

.event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.event-banner-info .event-multiday {
    border-radius: 0 0 5px 5px;
}

.event-date-wrapper {
    padding: 0;
}

.location-contact-section.bg-colour {
    background-color: var(--dark-grey);
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}

.location-contact-section .bg-colour-filter {
    backdrop-filter: brightness(0.5);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.location-contact-section .row {
    row-gap: 1rem;
}

.event-card {
    background-color: white;
    border-radius: 5px;
    position: relative;
    padding: 1rem;
    height: 100%;
}

.event-contact-card i {
    background: rgba(0, 0, 0, 0.2);
    color: var(--dark-font-color);
}

.event-contact-card .contact-row a {
    color: var(--link-color);
    font-weight: var(--font-semibold);
}

.event-card-text {
    position: relative;
    z-index: 1;
}

.location-contact-zone svg {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    max-width: 50%;
}

.event-location-name {
    color: var(--primary-color-1);
    font-weight: var(--font-semibold);
    margin-bottom: .75rem;
}

.btn.flex-row {
    display: flex;
}

.image-text-section .editor> :first-child {
    margin-top: 0;
}

.image-text-section .col-text {
    order: -1;
}

.image-text-section img {
    width: 100%;
}

.article-upcoming-events .related-event-title {
    color: var(--dark-font-color);
}

.article-upcoming-events .related-event-title:hover,
.article-upcoming-events .related-event-title:focus {
    color: var(--link-hover-color);
}

.article-upcoming-events .event-full-date {
    font-weight: var(--font-regular);
}

.all-day-text {
    margin: .75rem 0;
}

@media (min-width: 62em) {

    .news-banner-img,
    .news-banner-text {
        flex-basis: 50%;
        max-width: 50%;
    }

    .event-banner-text {
        flex-basis: unset;
        max-width: unset;
        flex: 1;
    }

    .no-news-banner-img .news-banner-text {
        flex-basis: 100%;
        max-width: 100%;
    }

    .news-banner-text {
        padding: 2rem 5% 2rem 10%;
    }

    .event-card {
        padding: 2rem;
    }

    .location-contact-zone svg {
        right: 2rem;
    }

    .location-contact-section .bg-colour-filter {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .more-gap {
        margin-left: -2rem;
        margin-right: -2rem;
    }

    .more-gap>div {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .image-text-section .col-text {
        order: unset;
    }
}

.nav-secondary-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    color: var(--dark-grey);
    font-weight: var(--font-medium);
    font-size: 1.1rem;
    position: relative;
    background-color: transparent;
    margin: 0;
    padding: 0;
}

.nav-secondary-heading::after {
    content: '';
    background: linear-gradient(90deg, #00576D 0%, rgba(0, 173, 218, 0.00) 100%);
    width: 100%;
    height: 2px;
}

.nav-secondary-wrapper {
    margin-top: 0;
    margin-bottom: 2rem;
}

.page-content .nav-secondary-ul {
    margin: 0;
    list-style: none;
}

.page-content .nav-secondary-ul li::before {
    content: none
}

.secondary-nav-item::after,
.secondary-nav-item.active::after {
    content: none;
}

.page-content .secondary-nav-item,
.page-content .secondary-nav-item.active {
    background-color: transparent;
    padding: .75rem 0;
    margin-bottom: 0;
    border-bottom: 1px solid #ccc;
}

.secondary-nav-item.active a {
    font-weight: var(--font-medium);
}

.secondary-nav-item.active > a,
.secondary-nav-item.active > .secondary-nav-link > a {
    color: var(--primary-color-1);
    font-weight: var(--font-bold);
}

.page-content .nav-secondary-sub-menu {
    display: none;
    margin-left: 0.75rem;
    margin-top: .75rem;
}

.page-content .nav-secondary-sub-menu.active {
    display: block;
}

.secondary-nav-link {
    flex-wrap: nowrap;
}

.secondary-nav-link i {
    cursor: pointer;
    color: var(--primary-color-1);
    font-size: 1.5rem;
}

.page-content .nav-secondary-sub-menu li {
    padding-left: 0;
}

.page-content .nav-secondary-sub-menu li.active a {
    color: var(--primary-color-1);
    font-weight: var(--font-bold);
}

.secondary-level-3 a {
    color: #6B7280;
}

.secondary-level-4 a {
    color: #5e6570;
}

.nav-secondary a:hover,
.nav-secondary a:focus {
    color: #007FA3
}

/* Level 1 Landing */
.landing-template .row {
    row-gap: 1rem;
}

.landing-template .quicklink-label-wrapper span,
.landing-template .quicklink-desc {
    font-size: 1rem;
}

.bg-lightblue {
    background-color: #EDF3F7;
}

.image-wrapper img {
    width: 100%;
}

.page-content .subheading {
    font-size: 1.2rem;
    font-weight: var(--font-medium);
    margin-bottom: .25rem;
}

.bg-branches {
    background-image: url('/images/Background-Branches.svg?fingerprint=ppb20251217002614');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #F0F0F0;
}

.bg-branches.angled {
    padding-bottom: 12%;
}

.bg-branches .image-wrapper {
    aspect-ratio: 3/2;
    width: 100%;
}

.square-card-wrapper {
    display: block;
}

a.square-card-wrapper:hover,
a.square-card-wrapper:focus {
    filter: brightness(0.9)
}

.square-card-wrapper img {
    aspect-ratio: 1.25/1;
}

.bg-primary-1 .cards-wrapper {
    margin-bottom: 0;
}

.bg-primary-1 .card-wrapper {
    border: none
}

.card-wrapper h4 {
    color: var(--dark-font-color);
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.16);
}

.card-wrapper p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.angled-div {
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%);
    margin-top: -10%;
}

.angled-div .content-container {
    padding-top: 8%;
    padding-bottom: 8%;
}

.boxes-wrapper {
    margin-top: 2rem;
}

.box-wrapper {
    max-width: 400px;
}

.box-content {
    display: block;
    border-radius: 10px;
    color: var(--dark-font-color);
    border: 1px solid #EAEAEA;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 1rem;
    height: 100%;
}

.box-content h3 {
    color: var(--primary-color-1);
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.16);
    margin-bottom: .5rem;
}

.editor.text-center ul,
.editor.text-center ol {
    width: fit-content;
    margin: auto;
}


@media (max-width: 991px) {
    .nav-secondary {
        display: none;
    }

    .angled-div {
        clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
    }

    .bg-branches.angled {
        padding-bottom: 15%;
    }
}

@media (min-width: 62em) {
    .nav-secondary {
        display: block !important;
    }

    .nav-secondary-wrapper {
        margin-bottom: 2rem;
    }

    .sidebar-nav {
        order: unset;
    }

    .landing-template .quicklinks-wrapper {
        width: 80%;
        margin: auto;
    }

    .responsive-cards.one-card .responsive-card {
        flex-basis: 75%;
        max-width: 75%;
        margin: auto;
    }

    .responsive-cards.two-cards .responsive-card {
        flex-basis: 50%;
        max-width: 50%;
    }

    .bg-branches .image-wrapper {
        padding-right: 1.5rem;
    }

    .bg-branches .text-wrapper {
        padding-left: 1.5rem;
    }
}

@media (min-width: 99em) {
    .box-wrapper {
        max-width: 500px;
    }
}


/* Legend - event tags */
.event-tag[data-name="weekly update"] {
    color: var(--weekly-update);
}

.event-tag[data-name="principal's message"] {
    color: var(--principals-message);
}

.event-tag[data-name="school council"] {
    color: var(--school-council);
}

.event-tag[data-name="activities / clubs"] {
    color: var(--clubs);
}

.event-tag[data-name="performance / assembly"] {
    color: var(--performance);
}

.event-tag[data-name="no school / classes"] {
    color: var(--no-school);
}

.event-tag[data-name="well-being & health"] {
    color: var(--well-being);
}

.event-tag[data-name="culture / spirit"] {
    color: var(--culture);
}

.event-tag[data-name="meeting"] {
    color: var(--meeting);
}

.event-tag[data-name="off-site activity"] {
    color: var(--off-site-activity);
}

.event-tag[data-name="academic"] {
    color: var(--academic);
}

.event-tag[data-name="parent society"] {
    color: var(--parent-society);
}

.event-tag[data-name="athletics"] {
    color: var(--athletics);
}

.bg-colour[data-name="weekly update"] {
    background-color: var(--weekly-update);
}

.bg-colour[data-name="principal's message"] {
    background-color: var(--principals-message);
}

.bg-colour[data-name="school council"] {
    background-color: var(--school-council);
}

.bg-colour[data-name="activities / clubs"] {
    background-color: var(--clubs);
}

.bg-colour[data-name="performance / assembly"] {
    background-color: var(--performance);
}

.bg-colour[data-name="no school / classes"] {
    background-color: var(--no-school);
}

.bg-colour[data-name="well-being & health"] {
    background-color: var(--well-being);
}

.bg-colour[data-name="culture / spirit"] {
    background-color: var(--culture);
}

.bg-colour[data-name="meeting"] {
    background-color: var(--meeting);
}

.bg-colour[data-name="off-site activity"] {
    background-color: var(--off-site-activity);
}

.bg-colour[data-name="academic"] {
    background-color: var(--academic);
}

.bg-colour[data-name="parent society"] {
    background-color: var(--parent-society);
}

.bg-colour[data-name="athletics"] {
    background-color: var(--athletics);
}

.bg-colour-15[data-name="weekly update"] {
    background-color: var(--weekly-update-15);
}

.bg-colour-15[data-name="principal's message"] {
    background-color: var(--principals-message-15);
}

.bg-colour-15[data-name="school council"] {
    background-color: var(--school-council-15);
}

.bg-colour-15[data-name="activities / clubs"] {
    background-color: var(--clubs-15);
}

.bg-colour-15[data-name="performance / assembly"] {
    background-color: var(--performance-15);
}

.bg-colour-15[data-name="no school / classes"] {
    background-color: var(--no-school-15);
}

.bg-colour-15[data-name="well-being & health"] {
    background-color: var(--well-being-15);
}

.bg-colour-15[data-name="culture / spirit"] {
    background-color: var(--culture-15);
}

.bg-colour-15[data-name="meeting"] {
    background-color: var(--meeting-15);
}

.bg-colour-15[data-name="off-site activity"] {
    background-color: var(--off-site-activity-15);
}

.bg-colour-15[data-name="academic"] {
    background-color: var(--academic-15);
}

.bg-colour-15[data-name="parent society"] {
    background-color: var(--parent-society-15);
}

.bg-colour-15[data-name="athletics"] {
    background-color: var(--athletics-15);
}

/* Query - Content Card */
.ie-query-user-wrapper.row {
    row-gap: 1rem;
}

.content-card-image {
    position: relative;
}

.content-card-image img {
    width: 100%;
    aspect-ratio: 3/2;
}

.content-card-placeholder {
    width: 100%;
    aspect-ratio: 3/2;
    background-color: #999999;
}

.content-card {
    border: 1px solid #d6d6d6;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #666;
    font-size: .9rem;
}

.content-card:hover,
.content-card:focus {
    color: #666;
    text-decoration: none !important;
    box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 29px 0px;
}

.content-card-content>*:not(.content-card-choices) {
    padding-left: 1rem;
    padding-right: 1rem;
}

.content-card-content {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.content-card .btn {
    margin: .5rem 0 1rem 1rem;
}

.content-card.text-center .btn {
    margin: 0 auto 1rem;
}

.content-card h4 {
    color: var(--dark-font-color);
    margin-bottom: 0;
}

.content-card h5 {
    margin: 0;
    color: var(--primary-color-1);
    font-weight: var(--font-medium);
}

.content-card p {
    margin-bottom: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.content-card-date {
    justify-content: flex-end;
    align-items: baseline;
    color: #666;
    font-size: .85rem;
}

.content-card.text-center.content-date .content-card-date {
    justify-content: center;
}

.content-card.text-center.content-date h4 {
    color: var(--dark-font-color);
}

.content-card-tags {
    position: absolute;
    bottom: 0;
    left: 0;
    color: white;
    width: fit-content;
    margin: auto;
    font-size: .8rem;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
}

.content-card-tags>div {
    background-color: var(--dark-grey);
    padding: 5px 5px 3px;
}

.content-card-tags>div[data-name="sports"] {
    background-color: #00576D;
}

.content-card-tags div:nth-child(n+3) {
    display: none;
}

.content-card.text-center .content-card-tags {
    right: 0;
}

.content-card-choices ul {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.content-button .card-subtext-wrapper,
.content-button .content-card-choices ul,
.content-button .content-card-columns {
    border-bottom: 1px solid #e8e8e8;
    padding: 0 1rem .5rem;
}

.text-center .content-card-choices ul {
    justify-content: center;
}

.content-card-choices ul li {
    margin: 0;
    padding-left: 0.85rem;
}

.content-card-choices ul li::before {
    background-color: #666;
}

.content-card-footer {
    background-color: #f1f1f1;
    width: 100%;
    height: 30px;
}

/* card colours */
.card-navy h4,
.card-navy .column-title {
    color: var(--navy);
}

.card-navy .btn {
    background-color: var(--navy);
}

.card-blue h4,
.card-blue .column-title {
    color: var(--primary-color-1);
}

.card-blue .btn {
    background-color: var(--primary-color-1);
}

/* Off-campus Landing */
.ctas {
    row-gap: 1.5rem;
}

.cta-1 {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.cta-1-text {
    background-color: var(--primary-color-1);
    color: white;
    padding: 1rem;
    border-radius: 5px;
}

.cta-1-video {
    position: relative;
    padding-bottom: 56.25%;
}

.cta-1-video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}

.cta-2 {
    background-color: var(--orange);
    padding: 1rem;
    border-radius: 5px;
    height: 100%;
}

.cta-2 .btn {
    margin-left: auto;
    margin-right: auto;
}

.search-banner {
    aspect-ratio: 1920 / 466;
    color: white;
}

.search-course-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

#searchCourse {
    margin-top: 0;
    border: none;
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

#searchCourseInput {
    border-radius: 50px;
    border: 2px solid rgba(112, 112, 112, 0.40);
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    padding-left: 2.5rem;
    padding-right: 1rem;
}

#searchCourseInput::placeholder {
    color: rgba(0, 0, 0, 0.6);
}

.search-course {
    position: relative;
    width: 60%;
}

.search-course i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dark-font-color);
    left: .65rem;
}

.course-filter-legend {
    background: var(--light-grey);
    color: var(--dark-font-color);
    border-radius: 5px;
    padding: 3%;
    display: flex;
    flex-direction: column;
}

.course-filter .title-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.course-filter #reset-course-filters {
    color: var(--primary-color-1);
}

.course-select {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.course-legend-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    column-gap: 1.5rem;
}

.course-legend-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.course-icon i {
    background-color: var(--dark-grey);
    color: white;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    font-size: .85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-course {
    margin-top: -10%;
}

.courses-list {
    margin-top: 2rem;
}

.search-banner-content {
    padding-top: 7%;
    padding-bottom: 13%;
}

#reset-course-filters {
    cursor: pointer;
}

.course-card {
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    color: var(--dark-font-color);
    position: relative;
    background: white;
}

.course-card .arrow-right {

}

.course-card-title {
    background-color: #EEF9FD;
    padding: 1rem;
    border-radius: 5px 5px 0 0;
}

.course-card-content {
    border: 5px solid #EDEEF1;
    border-top: none;
    border-radius: 0 0 5px 5px;
    padding: 1rem;
    flex-grow: 1;
    min-height: 4rem;
}

.course-list .course-card-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.text-card-bottom {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.text-card-category {
    padding: .75rem 0;
    border-top: 2px solid #CCC;
}

.text-card-category:last-of-type {
    padding-bottom: 0;
}

.text-card-icons-list  {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.text-card-icons {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
}

.course-results {
    margin-top: 1rem;
}

.path-section {
    background-color: #EEF9FD;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.path-grid {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.path-item {
    width: 100%;
    border-radius: 5px;
    padding: 1rem;
}

.path-item:nth-of-type(1) {
    background-color: #C8ECD9;
}

.path-item:nth-of-type(2) {
    background-color: #CCE6F5;
}

.path-item:nth-of-type(3) {
    background-color: #FFDBBA;
}

.path-item ul li::before {
    background: var(--dark-font-color);
}

.resources-section .title-row,
.partners-section .title-row {
    justify-content: center;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.resources-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.resource-item {
    background-color: var(--dark-font-color);
    color: white;
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 2rem;
    width: 100%;
}

.partners-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    column-gap: 1.5rem;
    justify-content: center;
}

.partner-item {
    width: auto;
}

.partner-item img {
    width: 140px;
}

.supporter-item img {
    width: 235px;
}

@media (min-width: 48em) {
    .cta-1 {
        flex-direction: row;
    }

    .cta-1-text {
        width: 50%;
        border-radius: 0 5px 5px 0;
        padding: 3%;
    }

    .cta-1-video {
        flex-grow: 1;
    }

    .cta-1-video iframe {
        border-radius: 5px 0 0 5px;
    }

    .cta-2 {
        padding: 5%;
    }

    .course-filter-legend {
        flex-direction: row;
    }

    .course-filter,
    .course-legend {
        width: calc(50%);
    }

    .course-filter {
        border-right: 2px solid #ccc;
        padding-right: 2rem;
    }

    .course-legend {
        padding-left: 2rem;
    }

    .path-grid {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .path-item {
        padding: 1rem 2rem;
    }

    .path-item:last-of-type {
        width: 100%;
    }

    .path-item:nth-of-type(1) {
        width: calc(40% - .25rem);
    }

    .path-item:nth-of-type(2) {
        width: calc(60% - .25rem);
    }

    .resources-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .resource-item {
        width: calc(50% - .5rem);
    }
}

@media (min-width: 75em) {
    .course-select {
        flex-direction: row;
        margin-bottom: 0;
    }

    .resource-item {
        width: calc((100% - 4rem) / 5);
    }

    .search-banner-content h3 {
        margin-bottom: 1.5rem;
    }

    .ie-query-user-wrapper.course-row>.col-xs-12 {
        flex-basis: 20%;
        max-width: 20%;
    }
}

/* Course Legend */
[data-name="Fall (Semester 1)"] i {
    background-color: #A72450;
}

[data-name="Winter (Semester 2)"] i {
    background-color: #004987;
}

[data-name="Summer"] i {
    background-color: #F39847;
}

[data-name="Full Year"] i {
    background-color: #794C9D;
}

[data-name="Dual-Credit"] i {
    background-color: #249A5E;
}

[data-name="Exploratory"] i {
    background-color: #996633;
}

[data-name="Certificate"] i {
    background-color: #00afb3;
}

[data-name="Internship"] i {
    background-color: #4D6B53;
}

.course-editor:nth-of-type(1) .course-card-title {
    background-color: #EEF9FD;
}

.course-editor:nth-of-type(2) .course-card-title {
    background-color: #E4D9ED;
}

.course-editor:nth-of-type(3) .course-card-title {
    background-color: #F2FBD2;
}

.course-editor:nth-of-type(4) .course-card-title {
    background-color: #84B5DE;
}

.course-editor:nth-of-type(5) .course-card-title {
    background-color: #F9DDDE;
}


/* Individual off-campus program page */
.off-campus-program.page-header {
    padding-bottom: 2rem;
}

.off-campus-program.page-header * {
    color: white;
}

.off-campus-program .program-depart {
    margin-top: 2rem;
    text-transform: uppercase;
}

.off-campus-program .program-desc {
    margin-top: 1rem;
}

.off-campus-program .program-details,
.off-campus-program .program-partner {
    padding: 1rem 0;
}

.off-campus-program .program-deadline {
    padding: 1rem;
    background-color: #A72450;
    color: white;
}

.off-campus-program .program-deadline-title {
    margin-bottom: .5rem;
}

.off-campus-program .program-details-content {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 0 0 5px 5px;
    background: white;
}

.off-campus-program .no-program-img .program-details-content {
    border-radius: 5px;
}

.off-campus-program .program-details-wrapper>img {
    aspect-ratio: 16/9;
    border-radius: 5px 5px 0 0;
    width: 100%;
}

.program-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    row-gap: .5rem;
    padding: .75rem 1rem;
    align-items: flex-start;
    border-bottom: 1.5px solid var(--medium-grey);
}

.program-info-row:first-of-type {
    padding-top: 0;
}

.program-info-row:last-of-type {
    border-bottom: none;
}

.program-detail-text {
    font-weight: var(--font-medium);
}

.off-campus-program .program-partner img {
    object-fit: contain;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.program-info-label,
.program-partner-title {
    text-transform: uppercase;
}

.program-deadline-date {
    font-size: 130%;
    font-weight: var(--font-bold);
}

.btn.program-apply {
    margin-top: 0;
    background-color: #A72450;
}

.program-main-top {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2rem;
    row-gap: 1rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.program-tags {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.off-campus-program .title-row {
    color: white;
    padding: 1rem;
}

.off-campus-program .info-session {
    display: flex;
    flex-direction: column;
}

.off-campus-program .info-session .editor a {
    color: var(--teal);
}

.off-campus-program .info-session .editor ul li::before {
    background-color: var(--teal);
}

.off-campus-program .info-session .btn {
    background-color: var(--teal);
}

.off-campus-program .info-session-left {
    padding: 1.5rem 1rem;
    background-color: var(--teal);
    color: white;
}

.off-campus-program .info-session-right {
    padding: 1.5rem 1rem;
    background-color: #F0F0F0;
}

.off-campus-program .program-info-section .circle-icon-wrapper i {
    color: white;
    padding: 0.5rem;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    text-align: center;
}

.off-campus-program .program-info-section .col-xs-12 {
    display: flex;
    gap: 1rem;
}

.off-campus-program .program-benefits {
    background-color: #F0F0F0;
    color: var(--dark-font-color);
}


.off-campus-program .program-credits {
    color: white;
}

.off-campus-program .program-considerations {
    background-color: #F0EBE7;
    color: var(--dark-font-color);
}

.off-campus-program .program-considerations .editor ul li::before {
    background-color: var(--dark-font-color);
}

.off-campus-program .program-considerations .editor a,
.off-campus-program .program-apply .editor a {
    color: var(--primary-color-1);
}

.off-campus-program .program-apply {
    background-color: #A72450;
    color: white;
}

.off-campus-program .program-apply .editor ul li::before {
    background-color: white;
}

.off-campus-program .program-apply .btn {
    background-color: var(--button-2);
}

.off-campus-program .related-courses {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: relative;
}

.off-campus-program .related-courses::after {
    content: '';
    background: rgba(255, 255, 255, .3);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
}

.off-campus-program .related-courses>.content-container {
    position: relative;
    z-index: 1;
}

.off-campus-program .related-courses .btn {
    margin-left: auto;
    margin-right: auto;
}

.off-campus-program .related-courses .course-row {
    justify-content: center;
}

.explore-nav {
    background-color: #F0F0F0;
    padding: 2rem;
    border-radius: 5px;
    height: 100%;
}

.explore-nav .secondary-nav-item:last-of-type {
    border-bottom: none;
}

.off-campus-program .contact-section {
    margin-top: 2rem;
}

.off-campus-program .contact-zone {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-section>.row {
    row-gap: 1rem;
}

@media (min-width: 62em) {
    .program-sidebar {
        width: 35%;
    }
    .off-campus-program .program-header {
        width: 55%;
    }

    .off-campus-program.page-header {
        padding-bottom: 3rem;
        padding-top: 1rem;
    }

    .off-campus-program .program-depart {
        margin-top: 4rem;
    }

    .program-main-top {
        margin-top: 0;
    }

    .off-campus-program .sidebar-nav {
        margin-top: -15rem;
        position: relative;
        padding: 0;
    }

    .off-campus-program .program-deadline {
        padding: 1.5rem;
    }

    .off-campus-program .program-details-wrapper>img {
        aspect-ratio: 510/350;
    }

    .program-info-row {
        flex-wrap: nowrap;
    }

    .program-info-label {
        width: 50%;
    }

    .program-detail-text {
        width: calc(50% - 1rem);
    }

    .off-campus-program .info-session {
        flex-direction: row;
        background-color: #F0F0F0;
    }

    .off-campus-program .info-session-left {
        padding: 2rem 3rem;
        clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
        width: 50%;
    }

    .off-campus-program .info-session-right {
        padding: 2rem 3rem;
        width: 50%;
    }

    .off-campus-program .program-benefits,
    .off-campus-program .program-considerations {
        clip-path: unset;
    }

    .off-campus-program .program-credits {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
    }


    .off-campus-program .related-courses h3.text-shadow {
        margin-bottom: 1.5rem;
    }

    .off-campus-program .related-courses .btn {
        margin-top: 2rem;
    }

    .program-sidebar {
        margin-top: -18rem;
        z-index: 1;
    }

    .no-program-img.program-sidebar {
        margin-top: -17rem;
    }
}

@media (min-width: 75em) {
    .program-info-label {
        width: 40%;
    }

    .program-detail-text {
        width: calc(60% - 1rem);
    }

    .program-sidebar {
        width: 30%;
    }

    .has-program-img.program-sidebar {
        margin-top: -16rem;
    }
}

@media (min-width: 1800px) {
    .has-program-img.program-sidebar {
        margin-top: -15rem;
    }

    .no-program-img.program-sidebar {
        margin-top: -15rem;
    }
}

/* Individual Summer School Program */
.ss-program {
    --program-theme-light: color-mix(in srgb, var(--program-theme) 10%, white);
}

.program-header_info {
    margin: .5rem 0;
}

.program-header_info:last-of-type {
    margin-bottom: 0;
}

.ss-program .bg-colour {
    border-radius: 5px;
    padding: 2rem;
}

.ss-program section.bg-colour {
    border-radius: 0;
    padding: 2rem 0;
}

.ss-program .program-info-section {
    background-color: var(--program-theme-light);
}

.teacher-card {
    border-radius: 5px;
    border: 1.5px solid #A72450;
    background: #FCFAFB;
    padding: 1rem;
}

.teacher-card_title i,
.teacher-card_info h5 {
    color: #A72450;
}

.program-info_content h5 {
    color: var(--dark-font-color);
}

.teacher-card_title i {
    font-size: 1.3rem;
}

.teacher-card_info {
    border-bottom: 1px solid var(--medium-grey);
    padding-bottom: .75rem;
}

.program-info_content {
    border-color: #c7c7c7;
}

.teacher-card_info:last-of-type {
    border-bottom: none;
}

.btn-theme {
    background-color: var(--program-theme)!important;
}

.ss-program .editor details summary {
    background-color: var(--program-theme-light);
}

.expectation-fragment h3 {
    margin-bottom: 1rem;
}

.expectation-fragment .editor-layoutItem *:last-child {
    margin-bottom: 0;
}

.ss-program .program-register {
    background-color: #A72450;
}

.ss-program .program-enegagement {
    background-color: #F0EBE7;
}

.ss-program .btn-red {
    background-color: #A72450!important;
}

@media (min-width: 48em) {
    .expectation-fragment .editor-layoutItem:first-of-type {
        border-right: 1.5px solid #ccc;
        padding-right: 1rem;
    }

}


/* Contact Us */
.topics-notsure,
.topics-wrapper .row,
.contact-cta-nav .row {
    row-gap: 1.5rem;
}

.topics-wrapper {
    background-color: var(--orange);
    border-radius: 5px;
    padding: 1.5rem 1rem;
}

.topic-item {
    gap: 1rem;
    align-items: center;
}

.about-notice.notsure-list {
    padding: 0;
}

.about-notice.notsure-list .editor details summary {
    filter: none
}

.directory-filter {
    background: var(--light-grey);
    color: var(--dark-font-color);
    border-radius: 5px;
    padding: 3%;
}

.directory-select {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

#reset-filters {
    cursor: pointer;
    color: var(--primary-color-1);
    min-width: max-content;
}

.directory-list {
    margin-top: 2rem;
}

/* Directory Card */
.directory-card {
    border: 1px solid #ccc;
    border-left: 10px solid;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: space-between;
    border-left-color: #00ADDA;
    height: 100%;
    font-size: .9rem;
}

.directory-card address {
    white-space: normal;
}

.directory-card-info {
    padding: 1rem;
}

.directory-card-icons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background-color: #F7F7F7;
    text-align: center;
}

.directory-icon {
    row-gap: .5rem;
}

.directory-icon i {
    font-size: 1.5rem;
}

.directory-icon span {
    font-size: .75rem;
    font-weight: var(--font-medium);
}

.directory-phone {
    display: flex;
    align-items: center;
    border-radius: 5px;
    color: white;
    background-color: #00ADDA;
    width: fit-content;
    margin-top: 1rem;
}

.directory-phone i {
    padding: .5rem;
    border-radius: 5px 0 0 5px;
    background-color: #0092B9;
    position: relative;
    display: inline-block;
    background: rgba(0, 0, 0, 0.15);
}

.directory-phone span {
    padding: .35rem .75rem;
    font-weight: var(--font-medium);
    font-size: .85rem;
}

.depart-group {
    color: #707070;
    font-size: .75rem;
}

.depart-desc {
    color: #707070;
    margin-top: 1rem;
}

.directory-results-pagination {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    row-gap: 1rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.directory-results-pagination .per-page-selector {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.directory-results-pagination .custom-select {
    padding: .25rem 0 .25rem .5rem;
    min-width: 3.5rem;
}

.directory-load-more {
    margin-left: auto;
    margin-right: auto;
}

.directory-bottom {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #F0EBE7;
}

.main-directory {
    margin-bottom: 2rem;
}

.cta-zone {
    background-color: var(--orange);
    border-radius: 5px;
    padding: 1.5rem 1rem;
}

@media (min-width: 62em) {
    .topics-wrapper {
        padding: 2rem;
    }

    .directory-select {
        flex-wrap: nowrap;
    }

    .directory-card-info {
        padding: 1.5rem;
    }

    .directory-icon i {
        font-size: 1.75rem;
    }

    .cta-zone {
        padding: 2rem;
    }

    .contact-nav {
        flex-basis: calc(25% + 1rem);
        max-width: calc(25% + 1rem);
    }
}

@media (min-width: 99em) {
    .directory-select {
        width: 80%;
    }
}

/* Program Colour Theme */
.off-campus-program.page-header,
.off-campus-program .title-row,
.off-campus-program .program-info-section .circle-icon-wrapper i,
.off-campus-program .program-info-section .editor ul li::before,
.off-campus-program .program-benefits .editor ul li::before,
.off-campus-program .program-credits {
    background-color: var(--program-theme);
}

.off-campus-program .program-info-section .editor a,
.off-campus-program .program-benefits .editor a {
    color: var(--program-theme);
}

/* Directory Colour Theme */
.directory-card[data-name="cbeblue"] {
    border-left-color: #00ADDA;
}

.directory-card[data-name="cbeblue"] .editor a,
.directory-card[data-name="cbeblue"] .directory-icon {
    color: #00ADDA;
}

.directory-card[data-name="cbeblue"] .directory-phone {
    background-color: #00ADDA;
}

.directory-card[data-name="orange"] {
    border-left-color: #F28727;
}

.directory-card[data-name="orange"] .editor a,
.directory-card[data-name="orange"] .directory-icon {
    color: #F28727;
}

.directory-card[data-name="orange"] .directory-phone {
    background-color: #F28727;
}

.directory-card[data-name="teal"] {
    border-left-color: #3f96ac;
}

.directory-card[data-name="teal"] .editor a,
.directory-card[data-name="teal"] .directory-icon {
    color: #3f96ac;
}

.directory-card[data-name="teal"] .directory-phone {
    background-color: #3f96ac;
}

/* News Centre */
.headline-card img {
    border-radius: 0;
}

.news-headline {
    background-color: #f1f1f1;
    padding-top: 2rem;
}

.headline-card {
    color: var(--dark-font-color);
    padding-bottom: 1rem;
    display: block;
    height: 100%;
}

.headline-card:hover,
.headline-card:focus {
    background-color: var(--primary-color-1);
    color: unset;
}

.headline-card h4 {
    text-align: center;
    display: inline;
}

.headline-card .circle-icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    background: var(--primary-color-1);
    align-items: center;
    font-size: .5rem;
    vertical-align: middle;
    margin-left: .35rem;
}

.headline-title {
    text-align: center;
    margin-top: 1rem;
}

.search-news,
.news-select {
    width: 100%;
}

.all-news-tags {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    bottom: 0;
    left: 0;
}

.all-news-tag {
    padding: 3px 6px 2px;
    background: var(--primary-color-1);
    color: white;
    font-size: 12px;
    text-transform: uppercase;
}

.all-news-row .news-post-img {
    position: relative;
}

.all-news-article a {
    box-shadow: none;
    border: 2px solid #EDEEF1;
}

.page-content .all-news-article .news-title {
    margin-bottom: 0;
}

fieldset input {
    border: none;
}

.all-news-row {
    margin-top: 1rem;
    row-gap: 1rem;
}

.news-select {
    align-items: flex-start; 
}

.news-select select,
.news-select #dateRange,
.news-select .tagify {
    min-height: 32px;
    height: 32px;
}

.tagify__input  {
    min-height: 32px!important;
}

.news-select .tagify {
    height: auto;       
    min-height: 32px;   
    display: flex;
    align-items: center;
    flex-wrap: wrap;   
    border: none;
    width: 100%; 
}

.news-select .tagify__tags {
    display: flex;
    flex-wrap: wrap;
}

.news-select select:focus-visible,
.news-select input:focus-visible {
    outline: none;
}

.news-select .tagify__tag {
    border-radius: 50px;
    background-color: var(--light-grey);
}

.news-select .tagify__input {
    padding: 0;
    margin: 0;
}

.news-select .tagify__tag-text {
    text-transform: capitalize;
}

.news-select .tagify__tag>div::before {
    box-shadow: none;
}

.news-select .tagify__tag>div {
    padding-left: 12px;
    font-size: 16px;
}

.news-select .tagify__tag__removeBtn {
    padding-right: 3px;
    font-size: 18px;
}

.news-select .tagify__tag__removeBtn:hover+div::before {
    box-shadow: none;
}

.news-select .tagify__tag__removeBtn:hover {
    background: unset;
}

.tagify__dropdown__item {
    text-transform: capitalize;
}

.search-news-wrapper {
    margin-bottom: 1.5rem;
}

.corporate-news-centre .home-events-wrapper {
    height: auto;
}

.date-selector::before {
    content: "\f073";
    /* FontAwesome calendar icon unicode */
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color-1);
    pointer-events: none;
    z-index: 1;
}

#dateRange {
    padding-left: 22px;
}

/* Media Release */
.media-release {
    background-color: #F0EBE7;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.media-card {
    border-radius: 5px;
    border: 5px solid #EDEEF1;
    background: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    height: 100%;
    color: var(--dark-font-color);
}

.media-card:hover,
.media-card:focus {
    background-color: var(--primary-color-1);
    color: white;
}

.media-tag {
    background: #E9ECF3;
    color: var(--dark-font-color);
    width: fit-content;
    margin-top: 1rem;
}

.media-title,
.media-title h4 {
    text-align: left;
}

.media-title h4 {
    font-size: 1.1rem;
}

.media-title {
    margin-top: .5rem;
}

.media-release-row {
    justify-content: center;
}

.media-release .btn,
.cta-zone.text-center .btn {
    margin-left: auto;
    margin-right: auto;
}

.media-date {
    margin-bottom: 0;
}

.corporate-news-centre .contact-zone {
    height: 100%;
}

.school-news {
    background-color: #F7F7F7;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.school-news .row {
    row-gap: 1rem;
}

.school-news .news-item>a,
.school-news .news-item>div {
    display: flex;
    box-shadow: 0px 3px 15px #0000000D;
}

.school-news .news-post-img {
    border: none;
}

.news-site {
    color: var(--primary-color-1);
    font-weight: var(--font-bold);
    font-size: .9rem;
    margin-bottom: .75rem;
}

.news-site:nth-child(n+2) {
    display: none;
}

#loadMoreBtn {
    cursor: pointer;
}

.cta-zone-image {
    color: white;
}

.search-news-main {
    margin-top: 2rem;
}

@media (min-width: 62em) {
    .news-headline {
        padding: 2rem 5% 1rem;
    }

    .search-news-wrapper {
        flex-wrap: nowrap;
    }

    .news-select {
        flex-wrap: wrap;
    }

    .corporate-news-centre .nav-secondary-wrapper {
        margin-bottom: 3rem;
    }

    .search-news-main {
        margin-top: 0;
    }
}

@media (min-width: 75em) {
    .news-select {
        flex-wrap: nowrap;
    }

    .news-select #reset-filters {
        margin-top: 1.2rem;
    }
}

@media (min-width: 99em) {
    .media-release-row .col-xs-12 {
        flex-basis: 20%;
        max-width: 20%;
    }
}

/* Notice */
.notice-banner .article-tag,
.notice-main-content .circle-icon,
.notice-main-content .info-card-container .bts-col::after {
    background-color: var(--orange);
}

.notice-main-content .info-card-container .bts-col .btn-arrow::after {
    color: var(--orange);
}

.notice-main-content .content-card {
    color: var(--dark-font-color);
}

/* Partnerships Page */
.partner-form {
    margin-bottom: 2rem;
}

.partner-form-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.partner-form label {
    margin-bottom: 0;
}

.partner-form .input-field {
    margin-bottom: 0;
    display: flex;
    gap: 1rem;
    align-items: center;
}


.partner-form input[type="search"] {
    background-color: #fff;
    border: 1px solid #AFAFAF;
    border-radius: 5px;
    padding: 0.5rem .75rem;
    width: 100%;
}

.partner-form input[type="submit"] {
    margin-top: 1.5rem;
    margin-left: auto;
    width: fit-content;
    display: block;
}

.partner-form select {
    padding: 0.5rem .75rem;
}

.partner-table .col-name {
    width: 60% !important;
}

.partner-table .col-category {
    width: 40% !important;
}

.partner-table tr.odd {
    background: #E5F7FB;
}

.partner-table tr.even {
    background: #fff;
}

@media (min-width: 75em) {
    .partner-form .input-field-name {
        flex: 1;
    }
}

/* Sessions Page */
.session-row {
    margin-bottom: 1rem;
}

.session-label {
    color: var(--dark-grey);
}

.session-link {
    font-weight: var(--font-semibold);
}

.session-form {
    background: var(--light-grey);
    padding: 1.5rem;
    border-radius: 5px;
    margin-bottom: 2rem;
}

.session-form label {
    margin-bottom: 0;
}

.session-form .custom-select {
    padding: .5rem .75rem;
}

.session-form .btn {
    margin-top: 0;
    padding: .5rem 1.5rem;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.15;
}

.session-form .form-btns {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 1.5rem;
}

.session-blocks {
    margin-bottom: 2rem;
    row-gap: 1rem;
}

.session-block {
    background-color: #EFEAF3;
    padding: 1rem 1.5rem;
    border-radius: 5px;
    text-align: center;
}

.session-block h3 {
    color: #64308f;
    margin-top: 0;
    margin-bottom: .5rem;
}


form .reset {
    cursor: pointer;
}

@media (min-width: 62em) {
    .session-form .input-field {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .session-form .input-field label {
        width: 20%;
    }

    .session-form .form-btns {
        flex-direction: row;
        margin-left: auto;
        width: fit-content;
    }
}

/* Dates of Significance */
.dates-filter-wrapper {
    margin-top: 2rem;
}

.dates-of-significance .dates-filter {
    width: fit-content;
}

.dates-of-significance .event-row {
    display: flex;
    align-items: center;
}

.dates-of-significance .event-row>div {
    padding: .5rem;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 2.8rem;
}

.dates-of-significance .event-row-date {
    width: 20%;
    color: white;
    font-weight: var(--font-medium);
    text-align: center;
    font-size: .9rem;
}

.dates-of-significance .event-row-link {
    width: 3rem;
    background-color: var(--light-grey);
    text-align: center;
    align-items: center;
    transition: all .3s ease-in-out;
}


.dates-of-significance .event-row-link i {
    color: white;
    background: var(--primary-color-1);
    opacity: .5;
    padding: .5rem;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1.8rem;
    height: 1.8rem;
    font-size: .8rem;
    transition: all .3s ease-in-out;
}

.dates-of-significance .event-row-title {
    flex: 1;
    background-color: var(--light-grey);
    color: var(--dark-font-color);
    padding: .5rem 1rem !important;
    transition: all .3s ease-in-out;
    font-size: .9rem;
}

.dates-of-significance .month-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 1rem;
}

.dates-of-significance .month-container a:hover,
.dates-of-significance .month-container a:focus {
    text-decoration: none;
}

.dates-of-significance .month-container a:hover .event-row-title,
.dates-of-significance .month-container a:focus .event-row-title,
.dates-of-significance .month-container a:hover .event-row-link,
.dates-of-significance .month-container a:focus .event-row-link {
    background-color: rgba(0, 173, 218, 0.2);
}

.dates-of-significance .month-container a:hover i,
.dates-of-significance .month-container a:focus i {
    opacity: 1;
}

.dates-of-significance .main-content {
    order: -1;
}

.dates-of-significance .legend {
    margin-bottom: 2rem;
}

.dates-of-significance .legend-title {
    font-weight: var(--font-medium);
    margin-bottom: 1rem;
}

.dates-of-significance .legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dates-of-significance .legend-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
}

.dates-of-significance .swatch {
    width: 26px;
    height: 26px;
    background: var(--swatch);
    flex: 0 0 26px;
}

.page-content ul li.legend-item::before {
    content: none;
}


/* CTS Page */
.cts-results {
    margin-bottom: 1.5rem;
}

.cts-item {
    margin-bottom: .5rem;
}

.cts-form {
    margin-bottom: 0;
}

.cts-form .input-field {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cts-form input[type="submit"] {
    width: fit-content;
}

.cts-filters {
    margin-top: 2rem;
}

@media (min-width: 62em) {
    .cts-form  .input-field {
        flex-direction: row;
    }
}

/* Bell Times */
#bell-times-result {
    margin-top: 2rem;
}

.bell-times-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.bell-times-table th:first-child,
.bell-times-table td:first-child {
    width: 50% !important;
}

.bell-times-table th:not(:first-child),
.bell-times-table td:not(:first-child) {
    width: calc(50% / 3) !important;
}

[data-query-id="43a264f8-9403-4751-b79a-6e4f0289836a"] {
    min-height: 0 !important;
}

/* Lottery Page */
.school-filter-wrapper {
    margin-bottom: 1.5rem;
}

.lottery-table {
    display: none;
}

/* News Article Tag */
.all-news-tag[data-name="weekly update"] {
    background: var(--weekly-update);
}

.all-news-tag[data-name="principal's message"] {
    background: var(--principals-message);
}

.all-news-tag[data-name="school council"] {
    background: var(--school-council);
}

.all-news-tag[data-name="activities / clubs"] {
    background: var(--clubs);
}

.all-news-tag[data-name="performance / assembly"] {
    background: var(--performance);
}

.all-news-tag[data-name="no school / classes"] {
    background: var(--no-school);
}

.all-news-tag[data-name="well-being & health"] {
    background: var(--well-being);
}

.all-news-tag[data-name="culture / spirit"] {
    background: var(--culture);
}

.all-news-tag[data-name="meeting"] {
    background: var(--meeting);
}

.all-news-tag[data-name="off-site activity"] {
    background: var(--off-site-activity);
}

.all-news-tag[data-name="academic"] {
    background: var(--academic);
}

.all-news-tag[data-name="parent society"] {
    background: var(--parent-society);
}

.all-news-tag[data-name="athletics"] {
    background: var(--athletics);
}

.all-news-tag[data-name="registration"] {
    background: var(--registration);
}


.news-select .tagify__tag[title="weekly update"] {
    background: var(--weekly-update-20);
}

.news-select .tagify__tag[title="principal's message"] {
    background: var(--principals-message-20);
}

.news-select .tagify__tag[title="school council"] {
    background: var(--school-council-20);
}

.news-select .tagify__tag[title="activities / clubs"] {
    background: var(--clubs-20);
}

.news-select .tagify__tag[title="performance / assembly"] {
    background: var(--performance-20);
}

.news-select .tagify__tag[title="no school / classes"] {
    background: var(--no-school-20);
}

.news-select .tagify__tag[title="well-being & health"] {
    background: var(--well-being-20);
}

.news-select .tagify__tag[title="culture / spirit"] {
    background: var(--culture-20);
}

.news-select .tagify__tag[title="meeting"] {
    background: var(--meeting-20);
}

.news-select .tagify__tag[title="off-site activity"] {
    background: var(--off-site-activity-20);
}

.news-select .tagify__tag[title="academic"] {
    background: var(--academic-20);
}

.news-select .tagify__tag[title="parent society"] {
    background: var(--parent-society-20);
}

.news-select .tagify__tag[title="athletics"] {
    background: var(--athletics-20);
}

.news-select .tagify__tag[title="registration"] {
    background: var(--registration-20);
}




.news-select .tagify__tag[title="weekly update"] .tagify__tag__removeBtn {
    color: var(--weekly-update);
}

.news-select .tagify__tag[title="principal's message"] .tagify__tag__removeBtn {
    color: var(--principals-message);
}

.news-select .tagify__tag[title="school council"] .tagify__tag__removeBtn {
    color: var(--school-council);
}

.news-select .tagify__tag[title="activities / clubs"] .tagify__tag__removeBtn {
    color: var(--clubs);
}

.news-select .tagify__tag[title="performance / assembly"] .tagify__tag__removeBtn {
    color: var(--performance);
}

.news-select .tagify__tag[title="no school / classes"] .tagify__tag__removeBtn {
    color: var(--no-school);
}

.news-select .tagify__tag[title="well-being & health"] .tagify__tag__removeBtn {
    color: var(--well-being);
}

.news-select .tagify__tag[title="culture / spirit"] .tagify__tag__removeBtn {
    color: var(--culture);
}

.news-select .tagify__tag[title="meeting"] .tagify__tag__removeBtn {
    color: var(--meeting);
}

.news-select .tagify__tag[title="off-site activity"] .tagify__tag__removeBtn {
    color: var(--off-site-activity);
}

.news-select .tagify__tag[title="academic"] .tagify__tag__removeBtn {
    color: var(--academic);
}

.news-select .tagify__tag[title="parent society"] .tagify__tag__removeBtn {
    color: var(--parent-society);
}

.news-select .tagify__tag[title="athletics"] .tagify__tag__removeBtn {
    color: var(--athletics);
}

.news-select .tagify__tag[title="registration"] .tagify__tag__removeBtn {
    color: var(--registration);
}

.full-bleed {
    width: calc(100dvw - 8px);
    margin-left: calc(50% - 50dvw);
    max-width: unset;
    flex-basis: unset;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
}

/* Make sure only sidebar-nav stays at the top */
@media (max-width: 991px) {
    .main-content-row {
        display: flex;
        flex-direction: column;
    }

    .main-content-row .sidebar {
        display: contents;
    }

    .main-content-row .sidebar-nav {
        order: 1;
    }

    .main-content-row .main-content {
        order: 2;
    }

    .main-content-row .related-col {
        order: 3;
    }

    .main-content-row .sidebar-nav,
    .main-content-row .related-col {
        padding-left: 1rem;
        padding-right: 1rem;
    }


    .main-content-row .page-zone:nth-of-type(1) {
        order: 4;
    }

    .main-content-row .page-zone:nth-of-type(2) {
        order: 5;
    }

    .main-content-row .page-zone:nth-of-type(3) {
        order: 6;
    }

    .sidebar-nav-only {
        order: -1;
    }

    .main-content-row .nav-secondary-wrapper {
        margin-bottom: 0;
    }
}

.page-content summary h3 {
    font-size: 1.2rem;
}

/* Navigation */
.subpage-ul a:hover, 
.subpage-ul a:focus {
    color: #007FA3;
    border-left: 2px solid currentColor;
    padding-left: .5rem;
}

@media (min-width: 75em) {
    .subpage-ul > .content-container {
        padding: 1rem 5%;
    }

    .grid-item {
        max-width: 20%;
    }
}

/* Areas */
.area-area-1 { --area-color: #00adda; }
.area-area-2 { --area-color: #008b46; }
.area-area-3 { --area-color: #c7111f; }
.area-area-4 { --area-color: #666666; }
.area-area-5 { --area-color: #aa285d; }
.area-area-6 { --area-color: #004987; }
.area-area-7 { --area-color: #64308f; }
.area-central-a { --area-color: #f28726; }
.area-central-b { --area-color: #996633; }

.area-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.area-buttons .btn {
    margin: 0;
}

.area-info-title {
    color: white;
    background: var(--area-color);
    text-align: center;
    padding: .5rem 1rem;
    margin-bottom: 1rem;
    border-radius: 5px;
}

.area-section a {
    color: var(--area-color);
}

.area-section {
    margin-bottom: 2rem;
    scroll-margin-top: 100px;
}

.area-section h4 {
    margin-bottom: .5rem;
}

.area-section h5 {
    font-size: 1rem;
    margin-bottom: .5rem;
}

.area-section .row,
.program-schools-wrapper .row {
    row-gap: 1rem;
}

.area-contact-list, .area-director-list, .school-card-info {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.area-section .school-card {
    border: 1px solid var(--area-color);
    padding: 1rem;
    height: 100%;
    border-radius: 5px;
}

/* Area Offices */
/* .area-office-cards {
    row-gap: 2.5rem;
}

.area-office-card h3 {
    margin-bottom: .5rem;
}

.area-office-card h4 {
    margin-bottom: 0;
}

.area-office-card .area-contact-info {
    margin-bottom: 1rem;
} */

.area-directory {
    --cbe-blue: #00adda;
    --cbe-blue-dark: #007fa3;
    --text: #1f2937;
    --muted: #5b6470;
    --border: #d9e2e8;
    --card-bg: #ffffff;
    --page-bg: #f5f7fa;

    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 0;
    font-family: Arial, sans-serif;
    color: var(--text);
}

.area-directory__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.area-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    height: 100%;
}

.area-card:hover,
.area-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--cbe-blue);
}

.area-card h3 {
    margin: 0 0 0.85rem;
    color: var(--cbe-blue-dark);
    font-size: 1.25rem;
    line-height: 1.2;
    border-bottom: 2px solid #eaf7fb;
    padding-bottom: 0.5rem;
}

.area-card p {
    margin: 0;
    line-height: 1.65;
}

.area-card strong {
    color: #b55400;
    display: inline-block;
    margin-bottom: 0.45rem;
    font-size: 1.1em;
}

.area-card a {
    color: var(--primary-color-1);
    text-decoration: none;
}

.area-card a:hover,
.area-card a:focus {
    text-decoration: underline;
}

.area-card__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: black;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.area-card__block {
    margin-bottom: 1rem;
}

.area-card__block:last-child {
    margin-bottom: 0;
}

.area-card__line {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.45rem;
}

.area-card__line:last-child {
    margin-bottom: 0;
}

.area-card__icon-wrap {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    border-radius: 50%;
    background: #000;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.08rem;
}

.area-card__icon {
    font-size: 0.82rem;
    line-height: 1;
}

.area-card__text {
    flex: 1;
}

.area-directory__cta {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
}

.area-directory__cta h3 {
    margin-bottom: 0.75rem;
    color: var(--text);
    font-size: 1.4rem;
}

.area-directory__button {
    display: inline-block;
    background: var(--cbe-blue);
    color: #fff !important;
    padding: 0.85rem 1.35rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.area-directory__button:hover,
.area-directory__button:focus {
    background: var(--cbe-blue-dark);
    text-decoration: none;
    transform: translateY(-1px);
}

@media (max-width: 575px) {
    .area-directory {
        padding: 0.75rem;
    }

    .area-card {
        padding: 1rem;
    }

    .area-card h3 {
        font-size: 1.15rem;
    }

    .area-card__icon-wrap {
        width: 1.75rem;
        height: 1.75rem;
        min-width: 1.75rem;
    }
}

/* School Mini */
.school-card {
    border: 1px solid var(--primary-color-1);
    background-color: white;
    padding: 1rem;
    height: 100%;
    border-radius: 5px;
}

.school-card h4 {
    margin-bottom: .5rem;
}

.school-card h5 {
    font-size: 1rem;
    margin-bottom: .5rem;
}

/* View School Profile Modal */
body.lb-disable-scrolling {
    overflow: hidden;
}

.school-modal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--area-color);
    color: white;
    padding: .5rem 1rem;
    position: sticky;
    width: 100%;
    top: 0;
    border-radius: 5px 5px 0 0;
}

.school-modal-body {
    padding: 0 1.5rem;
    overflow: auto;
    height: 85vh;
    background-color: white;
    border-radius: 0 0 5px 5px;
}

.school-modal-dialog {
    background-color: white;
    border-radius: 5px;
    padding: 0;
    top: 50%;
}

button.school-modal-close {
    appearance: none;
    border: none;
    background: none;
    margin-left: auto;
    width: fit-content;
    display: block;
    color: white;
    cursor: pointer;
}

.school-modal-grid, .school-grade-count-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.school-modal-section .row {
    row-gap: 1.5rem;
}

.school-modal-grid .flex-row {
    align-items: baseline;
}

.school-modal-section hr {
    margin: 1rem 0;
}

.school-modal-section .btn {
    margin: 0 0 1rem;
    background-color: var(--area-color);
}

.school-modal-section {
    margin-bottom: 1rem;
}

.school-modal-section a {
    color: var(--area-color);
}

.school-info-value {
    color: var(--area-color);
    font-size: 1.375rem;
    font-weight: var(--font-semibold);
}

.school-modal-trigger {
    color: var(--area-color);
    cursor: pointer;
    display: block;
}

.allow-newlines.school-desc {
    white-space: pre-line;
}

#school-modal-map {
    width: 100%;
    height: 400px;
}

.school-map-legend {
    display: flex;
    margin: .5rem 0;
    gap: 1rem;
    flex-wrap: wrap;
}

.sf-legend[data-name="Attendance Area"]::before {
	content: "";
	border: 1px solid #00ADDA;
	background: rgba(0, 173, 218, 0.20);
	width: 25px;
	height: 25px;
}

.sf-legend[data-name="Walk Zone"]::before {
	content: "";
	border: 1px solid #B4439B;
	background: rgba(180, 67, 155, 0.20);
	width: 25px;
	height: 25px;
}

.school-map-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

@media (min-width: 62em) {
    .school-modal-dialog {
        width: 60%;
    }
}

.news-centre .search-row {
    justify-content: flex-end;
}

/* School Directory */
.sd {
    color: #1a1a1a;
    width: 100%;
}

.sd-hr {
    width: 100%;
    margin: 0;
}

.sd-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.sd-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--dark-font-color);
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    font-weight: var(--font-semibold);
    cursor: pointer;
    font-size: .9rem;
}

.sd-reset:hover {
    background: #000;
}

.sd-card {
    background: #fff;
    border: 0.0625rem solid #e6e6e6;
    border-radius: 10px;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
    padding: 1rem;
    margin-bottom: 1rem;
}

.sd-filters {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sd-filter {
    min-width: 0;
}

.sd-filter-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.1rem !important;
    margin: 0 0 0.875rem;
}

.sd-filter-title i {
    color: var(--primary-color-1);
}

.sd-search-row {
    display: flex;
    gap: 0.5rem;
}

.sd-search-input,
.sd-program-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    background: #fff;
    color: var(--dark-font-color);
}

.sd-search-input:focus,
.sd-program-select:focus {
    outline: 0.125rem solid var(--primary-color-1);
    outline-offset: 0.0625rem;
}

.sd-go {
    flex: 0 0 auto;
    background: var(--primary-color-1);
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: 0 1rem;
    font-weight: var(--font-bold);
    cursor: pointer;
}

.sd-go:hover {
    background: color-mix(in srgb, var(--primary-color-1) 85%, #000);
}

.sd-grade-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem 0.75rem;
}

.sd-grade {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.sd-grade input {
    appearance: none;
    -webkit-appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    flex: 0 0 auto;
    position: relative;
    border: 1px solid var(--primary-color-1);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
}
 
/* Blue checkmark drawn with a rotated border (no image) */
.sd-grade input:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.28rem;
    height: 0.55rem;
    border: solid var(--dark-font-color);
    border-width: 0 0.14rem 0.14rem 0;
    transform: translate(-50%, -60%) rotate(45deg);
}
 
.sd-grade input:focus-visible {
    outline: 0.125rem solid var(--dark-font-color);
    outline-offset: 0.0625rem;
}

.sd-letters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    row-gap: .5rem;
}

.sd-letters-label {
    font-weight: var(--font-bold);
    margin-right: 0.75rem;
    width: 100%;
}

.sd-letter {
    border: 0;
    background: transparent;
    color: var(--primary-color-1);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.4rem 0.65rem;
    border-radius: 5px;
    cursor: pointer;
    line-height: 1;
}

.sd-letter:hover {
    background: #E5F7FB;
}

.sd-letter.is-active {
    background: var(--primary-color-1);
    color: #fff;
}

.sd-letter:disabled {
    color: #c4c4c4;
    cursor: default;
    background: transparent;
    display: none;
}

.sd-count {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 0 0 1rem;
}

.sd-count-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--light-grey);
    color: var(--primary-color-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
}

.sd-count h2 {
    margin: 0;
}

.sd-table-wrap {
    border-radius: 5px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sd-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
}

.sd-table thead th {
    background: color-mix(in srgb, var(--primary-color-1) 82%, #000);
    color: #fff;
    font-weight: var(--font-bold);
    text-transform: uppercase;
}

.sd-table thead th:first-child {
    border-top-left-radius: 0.5rem;
}

.sd-table thead th:last-child {
    border-top-right-radius: 0.5rem;
}

.sd-table th,
.sd-table td {
    padding: .75rem 1rem;
    vertical-align: top;
    text-align: left;
    border: 1px solid #e6e6e6;
}

.sd-table tbody tr:nth-child(even) td {
    background: #E5F7FB;
}

/* Keep phone numbers on a single line */
.sd-table td[data-label="Phone"] {
    white-space: nowrap;
}

.sd-school-link {
    color: var(--primary-color-1);
    font-weight: var(--font-medium);
    text-decoration: none;
    font-size: 1rem;
}

.sd-school-link:hover {
    text-decoration: underline;
}

.sd-school-name {
    font-weight: var(--font-medium);
    font-size: 1rem;
}

.sd-addr-2 {
    color: #333;
}

.sd-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #666;
    font-size: 1rem;
}


/* Filter toggle — visible only below the desktop breakpoint */
.sd-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: var(--primary-color-1);
    color: #fff;
    border: 0;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: var(--font-semibold);
    cursor: pointer;
    margin-left: auto;
    width: fit-content;
}

.sd-filter-toggle-caret {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

.sd-filter-toggle.is-open .sd-filter-toggle-caret {
    transform: rotate(180deg);
}

/* Collapsed by default (mobile); expands when the button adds .is-open */
.sd-toolbar-wrapper {
    display: none;
}

.sd-toolbar-wrapper.is-open {
    display: block;
}

.sd-toolbar-wrapper {
    position: sticky;
    top: 72px;
    background: white;
    transition: padding 0.2s ease, box-shadow 0.2s ease;
}

/* Condensed state: applied by JS (.sd-stuck) once the sticky panel is pinned
   to the top on scroll. Hides the section titles + Reset row and tightens
   spacing so the filters take far less vertical room while scrolling. */
.sd-stuck .sd-toolbar-wrapper {
    padding-top: .5rem;
    padding-bottom: .75rem;
    /* box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
    border-radius: 10px; */
}

.sd-stuck .sd-toolbar {
    display: none;
}

.sd-stuck .sd-card {
    padding: 0.6rem 0.75rem;
    margin-bottom: 0;
}

.sd-stuck .sd-filter-title {
    display: none;
}

.sd-stuck .sd-filters {
    gap: 0.75rem;
}

@media (min-width: 48em) {
    .sd-grade-options {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 62em) {
    .sd-filter-toggle {
        display: none;
    }

    .sd-toolbar-wrapper,
    .sd-toolbar-wrapper.is-open {
        display: block;
    }

    .sd-toolbar-wrapper {
        top: 80px;
    }

    .sd-filters {
        flex-direction: row;
        align-items: stretch;
    }

    .sd-filter {
        flex: 1 1 0;
        padding-right: 1.5rem;
        border-right: 1px solid #e6e6e6;
    }

    .sd-filter:last-child {
        border-right: 0;
        padding-right: 0;
    }

    .sd-filter-search {
        flex: 1.2 1 0;
    }

    .sd-filter-grade {
        flex: 1.7 1 0;
    }
}

@media (min-width: 75em) {
    .sd-filter-grade {
        flex: 1.9 1 0;
    }

    .sd-grade-options {
        grid-template-columns: repeat(6, 1fr);
    }

    .sd-grade:first-of-type {
        grid-row: span 3;
        align-items: start;
    }

    .sd-letters-label {
        width: fit-content;
    }
}

@media (min-width:99em) {
    .sd-toolbar-wrapper {
        top: 5rem;
    }
}