.offcanvas.theme22-template .nav-link i {
color: #ffcc00 !important;
}

.row.welcome-slideshow {
margin-top: -0.6em !important;
}

.welcome-title {
text-transform: uppercase;
color: #000;
font-weight: bold;
margin: 0;
}

nav.breadcrumbs {
display: none;
}

.welcome-title,
.welcome-p {
text-align: center;
font-size: 2.5em;

}

.welcome-p {
font-size: 1em;
color: #333;
}

.colorO {
color: #F57A33;
}

.list1 ul li,
.list2 ul li {
font-family: inherit;
line-height: 1.5em;
margin-bottom: .9rem;
text-rendering: optimizeLegibility;
}

.list1 ul li {
font-weight: bold;
font-size: 1.5rem;
list-style: none;
text-align: center;
}

.list2 ul li {
font-weight: normal;
font-size: 1rem;
}



p {
font-weight: normal;
font-size: 1em;
margin: 0;
margin-bottom: .9rem;
text-rendering: optimizeLegibility;
/*padding-left: 1.5em;*/
padding-top: 1em;
}

.welcome-banner {
width: 96.7%;
margin: 1em 1em;
}


.providing {
color: #333;
text-align: center;
font-size: 1.2em;
margin-top: -.7em;
padding: .5em;
}

ul.panelList {
float: left;
margin-right: 30px;
}

.template-page-style ol li,
.template-page-style ul li {
font-family: inherit;
font-weight: normal;
font-size: 0.87rem;
line-height: 1.1;
margin-bottom: 0.9rem;
text-rendering: optimizeLegibility;
text-align: left;
}

.template-page-style h3 {
background-color: #2e5291;
background-color: rgb(104, 99, 99);
color: #fff;
display: block;
font-size: 1em;
padding: .4em;
text-align: center;
text-transform: uppercase;
}

i.fa.fa-circle {
font-size: .5em;
color: red;
margin: -.8em 1em;
display: inline-block;
}

#resizer {
max-width: 100%;
width: 100%;
}

.breadcrumbs {
border: none;
}

.welcome-slideshow {
position: relative;
}

.welcome-center-girl {
background: url('/welcome/img/2022/welcome center floating girl.png');
position: absolute;
z-index: 10;
height: 34em;
width: 31em;
top: 0;
right: 0;
margin-top: 18em;
margin-right: 3em;
}

.welcome-center-title {
position: absolute;
z-index: 1
}

.welcome-center-title {
position: absolute;
z-index: 3;
margin: -14em auto;
left: 0;
right: 0;
}

.welcome-center-title h1 {
color: #FFF;
font-size: 3em;
text-shadow: 2px 2px 0px rgb(0 0 0 / 40%);
}

.welcome-center-title p {
color: #061838;
background: #fbd04e;
width: 30%;
text-align: center;
margin: auto;
}

.p-m-0 {
padding: 0 !important;
margin: 0 !important;
}

.overlay {
background: rgb(51 51 51 / 20%);
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 2;
width: 100%;
height: 97%;
}

.welcome-center-container {
max-width: 80em;
margin: auto;
}

.template-page-style h3 {
background: none;
color: #092b74;
border-bottom: solid #ebe8dc;
font-size: 1.5em;
padding: 0;
text-align: center;
text-transform: uppercase;
font-family: "Open Sans", sans-serif;
display: block;
margin: 0 auto;
}

.panel,
.panel1,
.panel2 {}

.panel ul li,
.panel1 ul li,
.panel2 ul li {
text-align: center;
margin-top: 1em;
}

.panel ul,
.panel1 ul,
.panel2 ul,
.type-none {
list-style-type: none;
}

.live-responses {
color: red;
font-weight: bold;
}

.wc-row1 p {
font-size: 1.05em;
padding: 1em 2em;
}

@media (max-width: 1830px) {
.welcome-center-girl {
height: 34em;
width: 30em;
margin-top: 18em;
margin-right: 3em;
transition: .2s;
background-size: 18em;
background-repeat: no-repeat;
margin-right: -7em;
}
}

@media (max-width: 1600px) {
.welcome-center-girl {
width: 25em;
}
}

@media (max-width: 1500px) {
.welcome-center-girl {
width: 23em;
}
}

@media (max-width: 1400px) {

.welcome-center-title p {
font-size: 1em;
color: #2e5291;
background: #fbd04e;
width: 90%;
text-align: center;
margin: auto;
}

.welcome-center-girl {
width: 21em;
}

.wc-row1 p {
font-size: 1.05em;
padding: 1em;
}
}

@media (max-width: 1280px) {

.center-text {
text-align: left !important;
}

.panel ul li,
.panel1 ul li,
.panel2 ul li {
text-align: left;
}

.csa {
margin-left: 1em !important;
}

.welcome-center-girl {
display: none;
}
}


@media (max-width: 900px) {
.template-page-style h3 {
text-align: left;
padding-left: 0.5em;
}
}

@media (max-width: 600px) {
h1 {
font-size: 1em;
}

.welcome-center-title h1 {
color: #FFF;
margin-top: 4em;
font-size: 1.5em;
text-shadow: 2px 2px 0px rgb(0 0 0 / 40%);
}

.welcome-center-title p {
font-size: 1em;
color: #2e5291;
background: #fbd04e;
width: 90%;
text-align: center;
margin: auto;
}

.template-page-style h3 {
width: 100%;
}

}

.face-hp-boxes {
height: 15em;
position: relative;
margin-bottom: 1.5em;
cursor: pointer;
transition: .2s;
border-radius: .2em;
overflow: hidden;
margin: .5em;
}

.container.template-pages h2 {
font-weight: bold;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 2.5em;
z-index: 1;
}


.overlay {
background: rgb(51 51 51 / 20%);
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 2;
width: 100%;
height: 97%;
}

.overlay2 {
background: #1b1c53;
/* background: #0d6efd; */
/* background: #003179; */
top: 0;
bottom: 0;
width: 100%;
height: 100%;
transition: .2s;
}

.face-hp-boxes h2 {
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
font-style: italic;
color: #FFF;
font-size: 2.2em;
padding: 1em;
position: absolute;
display: block;
margin: 1.7em auto;
text-align: center;
top: 0;
bottom: 0;
text-transform: uppercase;
left: 0;
right: 0;
text-shadow: 4px 2px 0px rgb(0 0 0 / 80%);
z-index: 2;
}

.position-relative {
position: relative;
}

.row.school-container {
border-bottom: solid #f1f1f1;
}

.row.schools-container p {
/*border-radius: 1em 1em 0 0;*/
font-size: .9em;
margin: 0;
text-rendering: optimizeLegibility;
line-height: 2em;
}

.schools-container i {

color: #283d47;
background: #ffffff;
width: 2em;
height: 2em;
padding: .5em;
border-radius: 2em;
}

.schools-container a {
text-decoration: none;
}

.schools-container .data {
padding: 1em;
margin-top: 0em;
}

p.school-name-label {
color: #FFF;
text-decoration: none;
font-weight: 400 !important;
margin-top: 0 !important;
text-align: center;
position: absolute;
top: 0;
padding: .02em !important;
background: #132136;
width: 100%;
}

.schools-container .data {}

div#az-filter button {
background: #06426e;
border: none;
margin: .2em .15em;
color: #FFF;
font-size: 1em;
padding: .2em .7em;
border-radius: .2em;
transition: .2s;
}

div#az-filter button:hover {
color: gold;
}

button#load-more {
background: #ffffff;
border-radius: 2em;
text-align: center;
display: block;
text-decoration: none;
transition: all .3s;
width: 12em;
margin: 3.5em auto;
border: solid #517ec3;
color: #517ec3;
transition: .5s;
}

button#load-more:hover {
background: #517ec3;
color: gold;
}

.nth-school-color:nth-child(even) {
background: #f3f3f3;
}

.hp-new-section a.button#load-more :hover {
transform: scale(1.02);
}

div#az-filter {
margin-bottom: 1em;
display: none;
}

label {
display: inline-block;
text-transform: uppercase;
}

hr.schools-divider {
border-bottom: solid #a3a3a3 .1em;
border-top: solid .2em #a3a3a3;
margin-bottom: .5em;
margin-top: .5em;
}

.label-edge {
position: absolute;
background: #709dff;
height: .3em;
width: 100%;
margin: -0.2em 0em;
border-radius: 9em;
}

/* ============================================
MODERN SCHOOL FILTER FORM STYLES
============================================ */

.school-filter-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
padding: 1.5rem;
margin-bottom: 1.5rem;
/* border: 1px solid #e5e7eb; */
}

/* Section Labels */
.filter-section-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
font-weight: 600;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 0.75rem;
}

.filter-section-label i {
color: #0062e6;
font-size: 1rem;
}

/* Search Input */
.filter-search-section {
margin-bottom: 1.25rem;
}

.filter-search-wrapper {
position: relative;
display: flex;
align-items: center;
}

.filter-search-input {
width: 100%;
padding: 0.875rem 3rem 0.875rem 1rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
color: #1f2937;
background: #f9fafb;
transition: all 0.2s ease;
}

.filter-search-input::placeholder {
color: #9ca3af;
}

.filter-search-input:focus {
outline: none;
border-color: #0062e6;
background: #fff;
box-shadow: 0 0 0 4px rgba(0, 98, 230, 0.1);
}

.filter-search-clear {
position: absolute;
right: 0.75rem;
width: 2rem;
height: 2rem;
padding: 0;
background: #e5e7eb;
border: none;
border-radius: 50%;
color: #6b7280;
font-size: 0.875rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}

.filter-search-clear:hover {
background: #d1d5db;
color: #374151;
}

/* Toggle Button Group */
.filter-levels-section {
margin-bottom: 1.25rem;
}

.filter-toggle-group {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.filter-toggle {
flex: 0 0 auto;
margin: 0;
display: inline-block;
}

.filter-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}

.filter-toggle-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
background: #f3f4f6;
border: 2px solid #e5e7eb;
border-radius: 50px;
color: #4b5563;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}

.filter-toggle-btn i {
font-size: 0.9rem;
opacity: 0.7;
}

.filter-toggle-btn:hover {
background: #e5e7eb;
border-color: #d1d5db;
color: #374151;
}

.filter-toggle input[type="checkbox"]:checked + .filter-toggle-btn {
background: #0062e6;
border-color: #0062e6;
color: #fff;
box-shadow: 0 2px 8px rgba(0, 98, 230, 0.3);
}

.filter-toggle input[type="checkbox"]:checked + .filter-toggle-btn i {
opacity: 1;
}

/* Charter has different accent color */
.filter-toggle-charter input[type="checkbox"]:checked + .filter-toggle-btn {
background: #7c3aed;
border-color: #7c3aed;
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

/* Focus states for accessibility */
.filter-toggle input[type="checkbox"]:focus-visible + .filter-toggle-btn {
outline: 2px solid #0062e6;
outline-offset: 2px;
}

/* Results Bar */
.filter-results-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background: #f9fafb;
border-radius: 8px;
border: 1px solid #e5e7eb;
min-height: 3rem;
}

.filter-active-tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}

.filter-tag-label {
font-size: 0.8rem;
color: #6b7280;
font-weight: 500;
}

.filter-tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.625rem;
background: #dbeafe;
color: #1e40af;
font-size: 0.75rem;
font-weight: 500;
border-radius: 20px;
}

.filter-tag.all-schools {
background: #e5e7eb;
color: #4b5563;
}

.filter-tag.charter-tag {
background: #ede9fe;
color: #5b21b6;
}

.filter-reset-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 0.875rem;
background: transparent;
border: 1px solid #d1d5db;
border-radius: 6px;
color: #6b7280;
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}

.filter-reset-btn:hover {
background: #fee2e2;
border-color: #fca5a5;
color: #dc2626;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.school-filter-card {
padding: 1rem;
border-radius: 8px;
}

.filter-toggle-group {
gap: 0.375rem;
}

.filter-toggle-btn {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
}

.filter-toggle-btn i {
font-size: 0.85rem;
}

.filter-results-bar {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}

.filter-reset-btn {
width: 100%;
justify-content: center;
}
}

@media (max-width: 480px) {
.filter-toggle-btn span:not(.filter-toggle-btn i) {
/* Hide text on very small screens, show only icons */
}

.filter-section-label {
font-size: 0.8rem;
}
}

/* Legacy support - hide old styles */
.search-form {
display: none;
}

button.school-directory-search-btn {
display: none;
}

div#school-list img {
transition: .2s;
}

div#school-list img:hover {
transform: scale(1.1);
}

.search-form {
display: none; /* Hidden - using new .school-filter-card instead */
}

.school-dir-image-container {
.row.schools-container p {
/* border-radius: 1em 1em
transition: background-size 0.5s ease-in-out !important; /* Easing animation */
cursor: pointer;
background-position-y: 1em !important;
/*border-radius: 0 0 1em 1em;*/
}

.school-dir-image-container:hover {
/*background-size: 110% !important; */
filter: grayscale();
/* Scale the background image to 110% on hover */
}

p.school-name-label {
transition: .2s;
}

p.school-name-label:hover {
background: #0d6efd;
}

.sub-menuD a i {
margin-right: 10px;
color: #f67627;
}


@media only screen and (max-width: 1000px) {
.schools-container .data {
padding-top: 3em;
}
}