@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(//static.privateschoolreview.com/fonts/montserrat.woff) format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat-bold';
  font-style: normal;
  font-weight: 500;
  src: local('Montserrat Medium'), local('Montserrat-Medium'), url(//static.privateschoolreview.com/fonts/montserrat_medium.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  font-display: swap;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 300;
  src: local('Hind Light'), local('Hind-Light'), url(//static.privateschoolreview.com/fonts/hind_300_first.woff2) format('woff2'), url(//static.privateschoolreview.com/fonts/hind_300_second.woff) format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  src: local('Hind Regular'), local('Hind-Regular'), url(//static.privateschoolreview.com/fonts/hind_400_first.woff2) format('woff2'), url(//static.privateschoolreview.com/fonts/hind_400_second.woff) format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 500;
  src: local('Hind Medium'), local('Hind-Medium'), url(//static.privateschoolreview.com/fonts/hind_500_first.woff2) format('woff2'), url(//static.privateschoolreview.com/fonts/hind_500_second.woff) format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  src: local('Hind Semibold'), local('Hind-Semibold'), url(//static.privateschoolreview.com/fonts/hind_600_first.woff2) format('woff2'), url(//static.privateschoolreview.com/fonts/hind_600_second.woff) format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 700;
  src: local('Hind Bold'), local('Hind-Bold'), url(//static.privateschoolreview.com/fonts/hind_700_first.woff2) format('woff2'), url(//static.privateschoolreview.com/fonts/hind_700_second.woff) format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'fcicons';
  font-weight: normal;
  font-style: normal;
  src: url(//static.privateschoolreview.com/fonts/fcicons.ttf) format('truetype');
  font-display: swap;
}* {
    line-height:1.5;
    border: 0 none;
    margin: 0;
    padding: 0;
}
HTML {
    font-size:100%;
    overflow-y: scroll;
    color:#616161;
    font-family: Hind, sans-serif;
    scroll-behavior: smooth;
}
HTML, BODY, DIV, SPAN, IFRAME, H1, H2, H3, P, A, EM, FONT, IMG, STRONG, DL, DT, DD, UL, OL, LI, FORM, LABEL, TABLE, TR, TD {
    border:none;
    outline:none;
    vertical-align:baseline;
    font-family: Hind, sans-serif;
    margin:0;
    padding:0;
}
EM{
	font-size:16px;
	font-weight: 400;
}
HTML, BODY {
    font-family: Hind, sans-serif;
    background:#FCFCFC;
    margin:0 auto;
    padding:0;
    height:auto;
    overflow-x:hidden;
}
UL, OL {
    list-style:none;
}
B, STRONG {
    font-weight:400;
}
input, select, textarea{
    border-color: #eaeaea;
    border-style: solid;
    border-width: 1px;
    background-color: #f7f7f7;
    padding:3px;
    font-family:inherit;
    font-size:1em;
    color: #616161;
    border-radius: 5px;
}
input[type="checkbox"] {
    margin: 0 4px;
}
input[type="radio"] {
   margin:0 4px 0 0;
}
input[type="button"],input[type="submit"]{
    position:relative;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    background: #f4b350;
    transition: background-color .25s linear;
    -o-transition: background-color .25s linear;
    -webkit-transition: background-color .25s linear;
    -moz-transition: background-color .25s linear;
    cursor: pointer;
    padding: 7px 15px 4px;
    -webkit-appearance: none;
    border: none;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
}
input[type="button"]:hover,input[type="submit"]:hover {
    background: #F9BF3B;
    cursor: pointer;
}

TEXTAREA{
    resize: vertical;
}
SELECT > OPTION{
    text-indent:10px;
}
textarea:focus, input:focus,BUTTON:focus{
    outline: none;
}
A {
    color:#1E8BC3;
    text-decoration:none;
    word-break: break-word;
    cursor:pointer;
}
A:visited {
    color:#1E8BC3;
}
A:hover {
    color:#F4B350;
    text-decoration:underline;
}
A:active {
    color: #2c9fe4;
}
li:hover,a:hover,li,a{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}
H2{
    font-style:normal;
    font-size:24px;
}
P{
    color: #616161;
    margin-bottom:10px;
    
}
TABLE {
    border-collapse: collapse;
    text-align: left;
    clear: both;
}
TD {
    vertical-align: middle;
    padding:3px;
}
@media (max-width: 767px)
{
    HTML{
        -webkit-text-size-adjust:none;
    }
    H2{
        font-style:normal;
        font-size:20px;
    }
    P{
        word-break: break-word;
    }
}

@media (max-width: 640px)
{
    html {
        font-size:100%;
    }
}
@media (max-width: 480px)
{
    html {
        font-size:90%;
    }
}
@media (max-width: 336px)
{
    html {
        font-size:90%;
    }
}

/* Design tokens — Typography
   ----------------------------------------------------------------
   5-role type scale per 2026-04-23 Javier/ad-guy handoff.
   Size tokens carry size only; weight is set on the element.
   Weight-300 is eliminated globally — do not reintroduce.

   Role     | Desktop | Mobile | Weight | Line-height | Color
   -------- | ------- | ------ | ------ | ----------- | -------
   heading  |  32px   |  24px  |  700   |    1.2      | #111827
   section  |  24px   |  18px  |  600   |    1.3      | #1f2937
   body     |  16px   |  16px  |  400   |    1.6      | rgb(97,97,97)
   label    |  14px   |  14px  |  500   |    1.4      | rgb(107,114,128)
   caption  |  14px   |  14px  |  400   |    1.5      | rgb(107,114,128)

   Legacy retirement map:
     T3 (~20px)  → --t-section (block-intro) or --t-body (inline)
     T5 (~15/500)→ --t-label
     T7 (~12px)  → --t-caption
     T8 (~12px)  → --t-caption
*/
:root {
	/* Font sizes */
	--t-heading: 32px;
	--t-section: 24px;
	--t-body:    16px;
	--t-label:   14px;
	--t-caption: 14px;

	/* Line heights */
	--lh-heading: 1.2;
	--lh-section: 1.3;
	--lh-body:    1.6;
	--lh-label:   1.4;
	--lh-caption: 1.5;

	/* Text colors — Javier 2026-04-26: t-body/label/caption non-accent gray
	   standardized so we stop showing several shades. */
	--tc-heading: #111827;
	--tc-section: #1f2937;
	--tc-body:    rgb(97, 97, 97);
	--tc-label:   rgb(107, 114, 128);
	--tc-caption: rgb(107, 114, 128);

	/* Header hierarchy — Javier 2026-06-01.
	   Three ranked header levels (distinct from the type-role scale above):
	     1  Page title (top of page)      — brand blue, or WHITE over a hero photo.  Size = --t-heading (32px).
	     2  Card / section title          — orange.                                  Size = --t-section (24px).
	     3  Sub-section header (in a card) — brand blue.                              Size 18px.
	   CONFLICT NOTE: Level 1 and Level 3 are the SAME brand blue (#1E8BC3).
	   They're separated by size (32 vs 18), weight/face, and context (page-top
	   vs inside a card), never adjacent at the same level — so they don't collide
	   in practice. Also note this blue == --color link blue used for text links;
	   header level-3 reads as a header (18px bold Montserrat) not a link, but keep
	   that in mind if a level-3 header ever sits inline next to body links. */
	--hdr-1-color:      #1E8BC3;   /* page title */
	--hdr-1-color-hero: #FFFFFF;   /* page title over a hero photo */
	--hdr-1-size:       var(--t-heading);  /* 32px */
	--hdr-2-color:      #f4b350;   /* card / section title (orange) */
	--hdr-2-size:       var(--t-section);  /* 24px */
	--hdr-3-color:      #1E8BC3;   /* sub-section header */
	--hdr-3-size:       18px;

	/* Spacing — 4pt grid, per Javier 2026-04-23 "divisible-by-4" standard.
	   Use these for all mobile card/section gaps and any new horizontal /
	   vertical rhythm. Legacy 10/15/18/24px values should migrate to the
	   nearest --space-* as code is touched. */
	--space-1:  4px;
	--space-2:  8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 40px;
	--space-9: 48px;
}

@media (max-width: 768px) {
	:root {
		--t-heading: 24px;
		--t-section: 18px;
	}
}

/* Utility classes — opt-in application of the full role (size + lh + color).
   Weight is set on the element (or via .fw-* utilities) per handoff rules. */
.t-heading {
	font-size: var(--t-heading);
	line-height: var(--lh-heading);
	color: var(--tc-heading);
}
.t-section {
	font-size: var(--t-section);
	line-height: var(--lh-section);
	color: var(--tc-section);
}
.t-body {
	font-size: var(--t-body);
	line-height: var(--lh-body);
	color: var(--tc-body);
}
.t-label {
	font-size: var(--t-label);
	line-height: var(--lh-label);
	color: var(--tc-label);
}
.t-caption {
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--tc-caption);
}
/*font weight basic */
.bold{
    font-weight:bold;
}
.fw-700{
    font-weight:700;
}
.fw-600{
    font-weight:600;
}
.fw-500{
    font-weight:500;
}
.fw-400{
    font-weight:400;
}
.fs-12{
    font-size:12px;
}
.fs-13{
    font-size:13px;
}
.fs-14{
    font-size:14px;
}
.fs-15{
    font-size:15px;
}
.fs-16{
    font-size:16px;
}
.fs-17{
    font-size:17px;
}
.fs-18{
    font-size:18px;
}
.fs-19{
    font-size:19px;
}
.fs-20{
    font-size:20px;
}
.virtual-link {
    color:#1E8BC3;
    text-decoration:none;
    word-break: break-word;
    cursor:pointer;
}
.virtual-link:hover {
    color:#F4B350;
    text-decoration:underline;
}
/*
font color basic
*/
.emstyle {
    font-size: 13px;
    font-style: normal;
}
.red,.emphasized{
    color:red;
}
.emphasized-2 {
    color:#F99900;
}
.gray,.very-de-emphasized{
    color:#CCC;
}
.df-color{
    color:#616161;
}
.df-link-color{
    color:#1E8BC3;
}
/*display basic*/
.dp-hidden{
    display:none;
}
.dpo-xsmd-inline,.dpo-xsmd-block,.dpo-xsmd-inline-block,.dpo-xsmd-inline-flex,.dpo-xsmd-flex{
    display:none;
}
.dpo-xsmdlg-inline,.dpo-xsmdlg-block,.dpo-xsmdlg-inline-block,.dpo-xsmdlg-inline-flex,.dpo-xsmdlg-flex{
    display:none;
}
.dpo-xllg-inline{
    display:inline;
}
.dpo-xllg-inline-block{
    display:inline-block;
}
.dpo-xllg-block{
    display:block;
}
.dpo-xllg-inline-flex{
    display:inline-flex;
}
.dpo-xllg-flex{
    display:flex;
}
.center {
    text-align: center;
}
.t-right{
    text-align: right;
}
/*others*/
.submit, A.submit, input.submit {
    position: relative;
    border-radius: 8px;
    background: #F4B350;
    transition:background-color .25s linear;
    -o-transition:background-color .25s linear;
    -webkit-transition:background-color .25s linear;
    -moz-transition:background-color .25s line;
    color: #FFFFFF;
    font-size: 16px;
    font-family:inherit;
    font-weight: bold;
    cursor:pointer;
    padding: 7px 15px 4px;
    -webkit-appearance: none;
    border:none;
    font-size:18px;
}
.submit:hover, A.submit:hover, input.submit:hover {
    background: #F9BF3B;
    cursor: pointer;
}
.submit:active, A.submit:active, input.submit:active {
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F39C12), to(#F39C12));
    background: -webkit-linear-gradient(#F39C12, #F39C12);
    background: -moz-linear-gradient(#F39C12, #F39C12);
    background: -ms-linear-gradient(#F39C12, #F39C12);
    background: -o-linear-gradient(#F39C12, #F39C12);
    background: linear-gradient(#F39C12, #F39C12);
    cursor: pointer;
}
.member-submit, A.member-submit, input.member-submit  {
    font-weight: 400;
    clear: both;
    cursor: pointer;
    padding: 7px 15px 4px;
    color: #1e8bc3;
    -webkit-appearance: none;
    border: 1px solid #1e8bc3;
    background: #fff;
    border-radius: 8px;
    margin-top: 5px;
    overflow: hidden;
    font-size: 18px;
    transition: background-color .25s linear;
    -o-transition: background-color .25s linear;
    -webkit-transition: background-color .25s linear;
    -moz-transition: background-color .25s linear;
    -webkit-font-smoothing: antialiased;
}
.member-submit:hover, A.member-submit:hover, input.member-submit:hover {
    background: #1e8bc3;
    color: #fff;
}
.member-submit:active, A.member-submit:active, input.member-submit:active {
    color: #fff;
}
.member-submit-1, A.member-submit-1, input.member-submit-1 {
    font-weight: 700;
    clear: both;
    cursor: pointer;
    padding: 7px 15px 4px;
    color: #fff;
    -webkit-appearance: none;
    background: #f4b350;
    border-radius: 8px;
    margin-top: 5px;
    overflow: hidden;
    font-size: 18px;
    transition: background-color .25s linear;
    -o-transition: background-color .25s linear;
    -webkit-transition: background-color .25s linear;
    -moz-transition: background-color .25s linear;
    -webkit-font-smoothing: antialiased;
}
.member-submit-1:hover, A.member-submit-1:hover, input.member-submit-1:hover {
    background: #f9bf3b;
    text-decoration: none;
    color: #fff;
}
.member-submit-1:active, A.member-submit-1:active, input.member-submit-1:active {
    color: #fff;
}
.member-submit-2, A.member-submit-2, input.member-submit-2 {
    font-weight: 400;
    clear: both;
    cursor: pointer;
    padding: 7px 15px 4px;
    -webkit-appearance: none;
    border: 1px solid #d06363;
    color: #d06363;
    background: #ebebeb;
    border-radius: 5px;
    margin-top: 5px;
    overflow: hidden;
    font-size: 18px;
    transition: background-color .25s linear;
    -o-transition: background-color .25s linear;
    -webkit-transition: background-color .25s linear;
    -moz-transition: background-color .25s linear;
    -webkit-font-smoothing: antialiased;
}
.member-submit-2:hover, A.member-submit-2:hover, input.member-submit-2:hover {
    background: #d06363;
    text-decoration: none;
    color: #fff;
}
.member-submit-2:active, A.member-submit-2:active, input.member-submit-2:active {
    color: #d06363;
}
.member-submit-3, A.member-submit-3, input.member-submit-3 {
    background: none repeat scroll 0 0 #f4b350;
    border-radius: 3px;
    font-size: 18px;
    font-weight: 400;
    border: medium none;
    color: #fff;
    padding: 7px 15px 4px;
    width: auto;
    cursor: pointer;
    clear: both;
    -webkit-appearance: none;
    overflow: hidden;
}
.member-submit-3:hover, A.member-submit-3:hover, input.member-submit-3:hover {
    background: none repeat scroll 0 0 #f9bf3b;
    cursor: pointer;
}
.member-submit-3:active, A.member-submit-3:active, input.member-submit-3:active {
    color: #fff;
}
.large-btn-wrapper{
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 auto 25px;
    font-size: 18px;
    font-weight: 400;
}
.large-btn, A.large-btn, input.large-btn {
    position: relative;
    display: inline-flex;
    width: auto;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin: 0 auto;
    padding: 0 30px 0 90px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    background-color: #f4b350;
    transition: background-color .25s linear;
    -o-transition: background-color .25s linear;
    -webkit-transition: background-color .25s linear;
    -moz-transition: background-color .25s linear;
    -webkit-font-smoothing: antialiased;
}
.large-btn:hover, A.large-btn:hover, input.large-btn:hover {
    background: #f9bf3b;
}
.large-btn:active, A.large-btn:active, input.large-btn:active {
    background: #f39c12;
}
.large-btn-icon-wrapper{
    background-color: #e4a649;
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 8px 0 0 8px;
}

.clear-f{
    clear:both;
}
.clear-fa::after{
    content:'';
    clear:both;
}
.break{
    clear:both;
}
.spamtrap{
    display: none;
    visibility: hidden;
}
.unclickable{
    cursor:default;
}
.clickable{
    cursor:pointer;
}
.bg_hover_change.featured-bg-class{
	background-color: #f7f7f7;
}
/* Hover bg changes gated to devices with a real pointer — avoids sticky-hover on touch
   (iOS/Android keep :hover active after tap until user taps elsewhere, visually the same
   as leaving a stale grey bg on the last-tapped row). */
@media (hover: hover) {
    .bg_hover_change:hover{
        background-color: #f7f7f7;
        cursor:pointer;
    }
    .bg_hover_change.featured-bg-class:hover{
        background-color: #FFFFFF;
        cursor:pointer;
    }
}
.text-style{
    font-size:18px;
    color: #616161;
    font-weight: 400;
}
.small_note {
    font-size: 16px;
    color:red;
    font-weight:600;
}
.user_message {
    text-align:center;
    font-weight:bold;
    color: #F00;
    width:100%
}
span.item-disc{
    display:inline-block;
    position: relative;
    padding-left: 35px;
}
span.item-disc:before{
    content: "\2022";
    position: absolute;
    width:9px;
    height:27px;
    top: 1px;
    left: 20px;
}
H2.para-title-1{
    font-size: 18px;
    margin-bottom:10px;
    font-weight:600;
    color:#F1AC47;
    text-transform:uppercase;
}
H2.para-title-2{
    font-size:18px;
    margin-bottom:10px;
    font-weight:700;
    font-family: Montserrat-bold,sans-serif;
}
H2.para-title-3, H3.para-title-3{
    font-size:18px;
    margin-bottom:10px;
    font-weight:700;
    font-family:Montserrat-bold,sans-serif;
    color:#1e8bc3;
}
H2.list-title,H2.list-ctitle{
    font-style: normal;
    color: #f4b350;
    font-size: 24px;
    margin:15px 0;
    font-family: Montserrat-bold,sans-serif;
}
H2.amc-article-title{
    color: #1e8bc3;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 20px 0;
}
H2.so-dt-title{
    font-style: normal;
    color: #f4b350;
    font-size: 24px;
    font-weight:700;
    margin: 0 0 12px;
    font-family: Montserrat-bold,sans-serif;
}
UL.list-1{
    list-style: disc outside none;
    padding: 0 0 0 22px;
    margin-bottom:10px;
}
UL.amc-pa-ul{
    margin: 20px 0 20px 22px;
    list-style: disc inside none;
}
LI.amc-pa-li{
    margin: 6px 0;
}
UL.truth-tree-ul{
    margin:10px 0 10px 20px;
    list-style:disc;
}
@media (min-width: 767px) and (max-width:1200px)
{
    .submit,A.submit {
        font-size:1rem;
    }
    .dpo-xsmdlg-inline{
        display:inline;
    }
    .dpo-xsmdlg-block{
        display:block;
    }
    .dpo-xsmdlg-inline-block{
        display:inline-block;
    }
    .dpo-xsmdlg-inline-flex{
        display:inline-flex;
    }
    .dpo-xsmdlg-flex{
        display:flex;
    }
}
@media (max-width: 767px)
{
    .submit,A.submit {
        font-size:1rem;
    }
    .dpo-xsmd-inline{
        display:inline;
    }
    .dpo-xsmd-block{
        display:block;
    }
    .dpo-xsmd-inline-block{
        display:inline-block;
    }
    .dpo-xsmd-inline-flex{
        display:inline-flex;
    }
    .dpo-xsmd-flex{
        display:flex;
    }
    .dpo-xsmdlg-inline{
        display:inline;
    }
    .dpo-xsmdlg-block{
        display:block;
    }
    .dpo-xsmdlg-inline-block{
        display:inline-block;
    }
    .dpo-xsmdlg-inline-flex{
        display:inline-flex;
    }
    .dpo-xsmdlg-flex{
        display:flex;
    }
    .dpo-xllg-inline,.dpo-xllg-block,.dpo-xllg-inline-block,.dpo-xllg-inline-flex,.dpo-xllg-flex{
        display:none;
    }
    H2.list-title,H2.list-ctitle{
        font-size: 20px;
        width: 93%;
        margin:10px 0;
    }
    H2.list-title.cl-list-title{
        margin-left:10px;
    }
    H2.amc-article-title{
        margin: 0 0 10px 0;
    }
    H2.so-dt-title{
        font-size: 20px;
        margin-left: 0;
    }
    .large-btn, A.large-btn {
        width: calc(100% - 90px);
        padding: 0 10px 0 70px;
        font-size: 16px;
    }
}



/* Success messages routed through the generic red .user_message box
   (Parimal 2026-08-13: "Details updated successfully" rendered red). */
.user_message .um-success,
.user_message .um-success a {
    color: green;
}
#page-container {
    min-height:100% !important;
    height:auto;
    position:relative;
}
#header-wrapper {
    width:100%;
    background: #F2F2F2;
    height:auto;
}
#main-wrapper {
    width: 1180px;
    min-height:600px;
    margin:0 auto;
    padding:0;
}
#main-headline-wrapper {
    overflow:hidden;
    margin: 16px 0 0;
}
#main-content {
    position:relative;
    display:block;
    float:left;
    width: 824px;
    margin:0 auto;
    padding:0;
}
#secondary-content {
    position:relative;
    display:block;
    float:right;
    width: 336px;
    margin:0 auto;
    padding:0;
}
/* Listing-page desktop layout — narrow main content + sidebar-LEFT.
   Mirror the default float order so the filter sidebar (in #secondary-content)
   sits on the left, matching the long-standing town-page pattern. Town was
   originally the only listing page with a filter; Phase A + B (Javier 2026-05-27,
   commits 1c2b651a + 644dc207) extended the filter to state/county/zip/
   neighborhood/online/dual-language/adhd/summer/special-ed/religious/affiliation/
   sport/blueribbon listings, so the same left-sidebar mirror needs to apply to
   all of them. (Rankings page #toptwentyschools intentionally excluded — it has
   no filter and keeps the default main-left / secondary-right layout.)

   Gated to min-width:1201px so the 768-1200 tablet range falls back to the
   responsive width:63%/36% split defined at line 326. */
@media (min-width: 1201px) {
    #town-schools #main-content,
    #county_schools #main-content,
    #zip-schools #main-content,
    #online-schools #main-content,
    #dual-language-schools #main-content,
    #add-adhd-schools #main-content,
    #summer-schools #main-content,
    #special-education-schools #main-content,
    #special-program-schools #main-content,
    #religious-schools #main-content,
    #affiliation-schools #main-content,
    #sport-schools #main-content,
    #blueribbon-schools #main-content,
    #find-school-result #main-content {
        position:relative;
        display:block;
        float:right;
        width: 824px;
        margin:0 auto;
        padding:0;
    }
    #town-schools #secondary-content,
    #county_schools #secondary-content,
    #zip-schools #secondary-content,
    #online-schools #secondary-content,
    #dual-language-schools #secondary-content,
    #add-adhd-schools #secondary-content,
    #summer-schools #secondary-content,
    #special-education-schools #secondary-content,
    #special-program-schools #secondary-content,
    #religious-schools #secondary-content,
    #affiliation-schools #secondary-content,
    #sport-schools #secondary-content,
    #blueribbon-schools #secondary-content,
    #find-school-result #secondary-content {
        position:relative;
        display:block;
        float:left;
        width: 336px;
        margin:0 auto;
        padding:0;
    }
}
/* Tablet range (768-1200): mirror float direction so sidebar sits on the
   left like desktop. */
@media (min-width: 768px) and (max-width: 1200px) {
    #town-schools #main-content,
    #county_schools #main-content,
    #zip-schools #main-content,
    #online-schools #main-content,
    #dual-language-schools #main-content,
    #add-adhd-schools #main-content,
    #summer-schools #main-content,
    #special-education-schools #main-content,
    #special-program-schools #main-content,
    #religious-schools #main-content,
    #affiliation-schools #main-content,
    #sport-schools #main-content,
    #blueribbon-schools #main-content,
    #find-school-result #main-content {
        float: right;
    }
    #town-schools #secondary-content,
    #county_schools #secondary-content,
    #zip-schools #secondary-content,
    #online-schools #secondary-content,
    #dual-language-schools #secondary-content,
    #add-adhd-schools #secondary-content,
    #summer-schools #secondary-content,
    #special-education-schools #secondary-content,
    #special-program-schools #secondary-content,
    #religious-schools #secondary-content,
    #affiliation-schools #secondary-content,
    #sport-schools #secondary-content,
    #blueribbon-schools #secondary-content,
    #find-school-result #secondary-content {
        float: left;
    }
}
#all-content {
    position:relative;
    display:block;
    width: 1180px;
    max-width: 1180px;
    margin:0 auto;
    padding:0;
    clear: both;
}
#main-content::after,#secondary-content::after{
    clear:both;
}
.breadcrumbs {
    font-size:16px;
    color: #98999a;
}
#content-headline-wrapper.has-breadcrumbs{
    margin: 16px 0 0;
}
#content-headline-wrapper.no-breadcrumbs{
    margin: 20px 0 0;
}
#content-headline-wrapper{
    width:auto;
}
#content-headline-wrapper.chw-layout-2{
    width:auto;
}
#content-headline-wrapper.chw-layout-1{
    width:824px;
}
#content-headline-wrapper.chw-layout-1.has-hm{
    width:794px;
}
H1#main-headline{
    position:relative;
    display: block;
    font-family: Montserrat-bold, sans-serif;
    /* Heading role — page title. Keeps brand color. */
    color: #1E8BC3;
    font-size: var(--t-heading);
    line-height: var(--lh-heading);
    font-weight: 700;
    margin:0;
    padding:0;
    text-decoration: none;
    border:0;
}
h1#main-headline span {
    line-height: var(--lh-heading);
    font-family: Montserrat-bold,sans-serif;
}
H1#main-headline a:hover{
    color: #1E8BC3;
    text-decoration: none;
}
H1#main-headline.font42{
    font-size:42px;
}
H1#main-headline.font38{
    font-size:38px;
}
H1#main-headline.font35{
    font-size:35px;
}
H1#main-headline.font32{
    font-size:32px;
}
H1#main-headline.font36{
    font-size:36px;
}
.section-wrapper{
    margin:20px 0;
    padding:0;
    border-radius: 12px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.section-wrapper.sec-bg-1{
    background-color: #FEFEFB;
}
.section-wrapper.sec-bg-2{
    background-color: #FBFFFC;
}
.section-wrapper.sec-bg-3{
    background-color: #FDFDFF;
}
.section-wrapper.sec-bg-4{
    background-color:#F7F7F7;
}
.section-wrapper.sec-bg-5{
    background-color:#E4F1FE;
}
.section-wrapper.sec-no-border{
    border:none;
    box-shadow:none;
}
.section-wrapper.tab-box-wrapper{
    border-radius: 10px 10px 10px 10px;
	background-color:#FFFFFF;
}
.section-wrapper.amc-box-wrapper{
    border-radius: 5px;
    border:none;
}
.section-wrapper.sec-school-widgets{
    margin:0 0 10px;
}
header.section-header {
    position:relative;
    display:table;
    text-align:center;
    vertical-align:middle;
    -webkit-border-radius:12px 12px 0 0;
    -moz-border-radius:12px 12px 0 0;
    border-radius:12px 12px 0 0;
    height:auto;
    width:100%;
}
header.section-header.sec-1-header{
    background-color: #e9aa4b;
}
header.section-header.sec-2-header{
    background-color: #61b597;
}
header.section-header.sec-3-header{
    background-color: #0082c5;
}
header.section-header.amc-header{
    background-color: transparent;
    border-radius:0;
    text-align:left;
}
header.section-header.sec-1-header > .sec-header-title-cnt {
    background: -webkit-gradient(linear,0 0,0 bottom,from(#f4b350),to(#f4b350));
    background: -webkit-linear-gradient(#f4b350,#f4b350);
    background: -moz-linear-gradient(#f4b350,#f4b350);
    background: -ms-linear-gradient(#f4b350,#f4b350);
    background: -o-linear-gradient(#f4b350,#f4b350);
    background: linear-gradient(#f4b350,#f4b350);
}
header.section-header.sec-2-header > .sec-header-title-cnt{
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#68C3A3 ), to(#68C3A3 ));
    background: -webkit-linear-gradient(#68C3A3 , #68C3A3 );
    background: -moz-linear-gradient(#68C3A3 , #68C3A3 );
    background: -ms-linear-gradient(#68C3A3 , #68C3A3 );
    background: -o-linear-gradient(#68C3A3 , #68C3A3 );
    background: linear-gradient(#68C3A3 , #68C3A3 );
}
header.section-header.sec-3-header > .sec-header-title-cnt{
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1E8BC3), to(#1E8BC3));
    background: -webkit-linear-gradient(#1E8BC3, #1E8BC3);
    background: -moz-linear-gradient(#1E8BC3, #1E8BC3);
    background: -ms-linear-gradient(#1E8BC3, #1E8BC3);
    background: -o-linear-gradient(#1E8BC3, #1E8BC3);
    background: linear-gradient(#1E8BC3, #1E8BC3);
}
.sec-header-icon-bg{
    position:relative;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    height: 100%;
    border-radius: 12px 0 0;
    width:60px;
}
.sec-header-title-cnt{
    position:relative;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border-radius: 0 12px 0 0;
}
H2.sec-header-title{
    position:relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    /* Section role — Javier 2026-04-25 revised section weight 600 → 500.
       White color kept for tinted header bars. */
    font-weight: 500;
    font-size: var(--t-section);
    line-height: var(--lh-section);
    color: #FFFFFF;
    font-family:Montserrat, sans-serif;
    margin:0 auto;
    padding:0;
    -webkit-border-radius:0 12px 0 0;
    -moz-border-radius:0 12px 0 0;
    border-radius:0 12px 0 0;
    width:90%;
    min-height:70px;
    height:auto;
}
header.section-header > .sec-header-icon-bg.large-icon, header.section-header > .sec-header-icon-bg.full-large-icon{
    width:80px;
}
#secondary-content header.section-header > .sec-header-icon-bg.large-icon {
    width:60px;
}
.sec-content {
    margin:0;
    padding: 5px 8px;
    /* Javier 2026-05-22: cards must be pure white (#fff). The page canvas
       (#main-content) stays at #fcfcfc, so cards lift off the background.
       Previously this defaulted to #fcfcfc which made cards blend into
       the page background, defeating their purpose as distinct surfaces. */
    background-color: #ffffff;
}
.sec-content.sec-no-header {
    border-radius: 12px;
}
.sec-content.sec-no-padding{
    padding:0;
}
.sec-content.sec-after-header {
    border-radius: 0 0 12px 12px;
}
.sec-content.sec-box {
    padding:10px 20px;
}
.sec-content.text-box {
    padding:15px 20px;
}
.sec-content.text-box p{
    margin-bottom:15px;
}
.sec-content.text-box p:last-child{
    margin-bottom:0px;
}
.sec-content.sec-box-1 {
    padding:10px;
}
.sec-content.sec-box-2 {
    padding:0 20px;
}
.sec-content.tab-box {
    padding: 30px 20px 20px;
}
#mcsl-box .sec-content.tab-box {
    padding: 0 20px 20px;
}
.sec-content.quick-box {
    padding: 5px 0;
    font-size: 16px;
}
.sec-content.dyk-box {
    padding:20px;
    font-size: 16px;
    font-weight:400;
    color: #616161;
}
.sec-content.amc-box{
    padding:10px 20px;
    border-radius:5px;
    border: 1px solid #e6e6e6;
    font-size: 18px;
    color: #616161;
    font-weight: 400;
}
/*MultipleSchoolsLayoutView*/
.sec-overview-wrapper{
    color: #616161;
    font-size:16px;
    margin:0 0 20px;
}
.sec-gallery-wrapper{
    margin:20px 0;
}
.sec-gallery-wrapper:empty{
    margin:0;
}
.sec-title-list-wrapper{
    margin:20px 0 0;
}
@media (min-width: 767px) and (max-width:1200px)
{
    #main-wrapper {
        width: 98%;
    }
    #main-headline-wrapper {
        width: 100%;
    }
    #content-headline-wrapper.chw-layout-1{
        width: 63%;
    }
    #content-headline-wrapper.chw-layout-1.has-hm{
        width: calc(63% - 30px);
    }
    #main-content {
        width: 63%;
    }
    #secondary-content {
        width: 36%;
        margin-left:1%;
    }
    #all-content{
        width: 100%;
    }
    #secondary-content header.section-heade > .sec-header-icon-bg,
    #secondary-content header.section-header > .sec-header-icon-bg.large-icon
    {
        width:50px;
    }
    
    #secondary-content H2.sec-header-title {
        font-size: 1rem;
        min-height:60px;
        height:auto;
    }
}
@media (max-width: 767px)
{
    #page-container{
        min-height: auto !important;
    }
    #page-container,footer.page-footer{
        transition:margin-left 0.5s ease 0s;
        -moz-transition:margin-left 0.5s ease 0s;
        -webkit-transition:margin-left 0.5s ease 0s;
        -o-transition:margin-left 0.5s ease 0s;
    }
    #main-wrapper {
        width: 100%;
        padding-top: 82px;
    }
    #index #main-wrapper {
        padding-top: 0;
    }
    #index .welcome_container {
        padding-top: 71px;
    }
    #main-content, #secondary-content, #all-content {
        float: none;
        width: 100%;
        max-width: 100%;
        padding:0;
        margin: 0 auto;
        overflow-x: hidden;
    }
    /* M11 (2026-05-11, Javier): on mobile, #secondary-content stacks below
       #main-content, so the first section in the sidebar (Related School
       Videos on a profile page) was butting against the previous section.
       Match the same 16px rhythm #main-content uses for its flex `gap`
       (Javier 2026-04-26 mobile spacing tighten — see schools.css). */
    #secondary-content {
        margin-top: 16px;
    }
    #main-headline-wrapper {
        width:100%;
        display:none;
    }
    .breadcrumbs{
        display:none;
    }
    #content-headline-wrapper.has-breadcrumbs,#content-headline-wrapper.no-breadcrumbs,#content-headline-wrapper{
        margin: 10px 10px 0;
    }
    #content-headline-wrapper,#content-headline-wrapper.chw-layout-2,#content-headline-wrapper.chw-layout-1,#content-headline-wrapper.chw-layout-1.has-hm{
        width:auto;
    }
    h1#main-headline{
        /* Uses --t-heading, which auto-overrides to 24px on mobile. */
        font-size: var(--t-heading);
    }
    .section-wrapper{
        margin:10px;
    }
    header.section-header > .sec-header-icon-bg.large-icon{
        width:60px;
    }
    header.section-header H2.sec-header-title{
        /* Uses --t-section, which auto-overrides to 18px on mobile. */
        font-size: var(--t-section);
        min-height:60px;
        height:auto;
    }
    .sec-content.sec-box,.sec-content.sec-box-1{
        margin:0;
        padding:10px;
    }
    
    .sec-content.sec-box-2 {
        padding:0 16px;
    }
    .sec-content.tab-box{
        padding: 10px 10px 0;
    }
    .sec-content.dyk-box{
        padding:10px;
    }
    .sec-content.amc-box {
        padding:10px 10px;
    }
    #top-info-box {
        margin-top: 15px;
    }
    .left-ris-content-wrapper {
        padding-top: 15px !important;
    }
    #top-placement-box {
        margin-bottom: 0;
    }
    #top-placement-box .sec-content {
        padding-bottom: 0;
    }
    #school-details-box {
        margin-top: 15px;
    }
    #school-details-box .sec-content {
        padding-top: 5px;
    }
    #school-details-box h2 {
        margin-top: 10px;
        margin-bottom: 0;
        padding-bottom: 20px;
    }
    /*MultipleSchoolsLayoutView*/
    .sec-overview-wrapper{
        margin:0 0 10px;
    }
    /* Fix Quick Stats mobile layout - override inline floats */
    .sec-overview-wrapper > div {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
    .sec-gallery-wrapper{
        margin:10px 0;
    }
    .sec-gallery-wrapper:empty{
        margin:0;
    }
    .sec-title-list-wrapper{
        margin:10px 0;
    }
}
@media (max-width: 480px)
{
    H1#main-headline.font38{
        font-size:24px;
    }
    H1#main-headline.font42{
        font-size:26px;
    }
    H1#main-headline.font35{
        font-size:22px;
    }
    H1#main-headline.font32{
        font-size:20px;
    }
    H1#main-headline.font36{
        font-size:18px;
    }
}
@media (max-width: 336px)
{
    .section-wrapper{
        margin:10px 3px;
    }
    H2.sec-header-title{
        font-size:1.1rem;
    }
    .sec-content {
        padding: 3px;
    }
    .sec-content.sec-box,.sec-content.sec-box-1{
        margin:0;
        padding:10px 3px;
    }
    .sec-content.sec-box-2 {
        padding:0 3px;
    }
    .sec-content.tab-box{
        padding: 10px 3px 0;
    }
    .sec-content.dyk-box{
        padding:3px;
    }
    .sec-content.amc-box {
        padding:10px 3px;
    }
}
/*Display Utilities For Ads*/
/* Ads for mobile width <=399*/
@media (max-width: 399px) {
    .srn-ads-cnt{
        position:relative;
        margin:10px auto;
        max-width:320px;
    }
    .srn-ads-cnt.tmsads-row{
        margin:0 auto;
        padding:10px 0;
        text-align:center;
        vertical-align:middle;
    }
    .srn-ads-cnt.tmsads-row .tmsads, .srn-ads-cnt.tmsads-row .msads{
        margin:0 auto;
        text-align:center;
        vertical-align:middle;
    }
    .dc-xs-h-115{
        min-height:115px;
    }
    .srn-ads-cnt{
        overflow:hidden;
    }
    .tmsads > :first-child, .msads > :first-child {
        overflow:hidden;
    }
    /* Remove extra margin from hero mobile ads - spacing controlled by wrapper padding (15px) */
    .hero-mobile-ad-wrapper .srn-ads-cnt.hero-mobile-ad {
        margin: 0 auto;
    }
    .dc-xs-none {
        display: none;
    }
    .dc-xs-inline {
        display: inline;
    }
    .dc-xs-inline-block {
        display: inline-block;
    }
    .dc-xs-block {
        display: block;
    }
    .dc-xs-table {
        display: table;
    }
    .dc-xs-table-row {
        display: table-row;
    }
    .dc-xs-table-cell {
        display: table-cell;
    }
    .dc-xs-flex {
        display: -ms-flexbox;
        display: flex;
    }
    .dc-xs-inline-flex {
        display: -ms-inline-flexbox;
        display: inline-flex;
    }
    .dc-xs-mt-0{
        margin-top:0;
    }
    .dc-xs-mb-0{
        margin-bottom:0;
    }
}
/* Ads for mobile width >399 and <=764*/
@media (min-width: 399px) and (max-width: 764px) {
    .srn-ads-cnt{
        position:relative;
        margin:10px auto;
        max-width:336px;
    }
    .srn-ads-cnt.tmsads-row{
        margin:0 auto;
        padding:10px 0;
        text-align:center;
        vertical-align:middle;
    }
    .srn-ads-cnt.tmsads-row .tmsads, .srn-ads-cnt.tmsads-row .msads{
        margin:0 auto;
        text-align:center;
        vertical-align:middle;
    }
    .dc-md-h-115{
        min-height:115px;
    }
    /* Remove extra margin from hero mobile ads - spacing controlled by wrapper padding (15px) */
    .hero-mobile-ad-wrapper .srn-ads-cnt.hero-mobile-ad {
        margin: 0 auto;
    }
    .dc-md-none {
        display: none;
    }
    .dc-md-inline {
        display: inline;
    }
    .dc-md-inline-block {
        display: inline-block;
    }
    .dc-md-block {
        display: block;
    }
    .dc-md-table {
        display: table;
    }
    .dc-md-table-row {
        display: table-row;
    }
    .dc-md-table-cell {
        display: table-cell;
    }
    .dc-md-flex {
        display: -ms-flexbox;
        display: flex;
    }
    .dc-md-inline-flex {
        display: -ms-inline-flexbox;
        display: inline-flex;
    }
    .dc-md-mt-0{
        margin-top:0;
    }
    .dc-md-mb-0{
        margin-bottom:0;
    }
}
/* Ads for mobile width >764 and <=1199px*/
@media (min-width: 764px) and (max-width: 1199px) {
    .infobox-top-right .srn-ads-cnt{
        margin:20px auto;
    }
    .srn-ads-cnt{
        position:relative;
        margin:20px auto;
    }
    .srn-ads-cnt.tmsads-row{
        margin:0 auto;
        padding:20px 0;
        text-align:center;
        vertical-align:middle;
    }
    .srn-ads-cnt.tmsads-row .tmsads, .srn-ads-cnt.tmsads-row .msads{
        margin:0 auto;
        text-align:center;
        vertical-align:middle;
    }
    .srn-ads-cnt.header-overlay.has-overlay:before{
        background-color: white;
        opacity: 1;
        height: 100%;
        width: 100%;
        margin-bottom: -100%;
        position: absolute;
        z-index: 9999;
        left: 0;
        top:0;
        content:'';
    }
    .srn-ads-cnt.custom-sticky-ads{
        text-align:left;
        width:100%;
        /* min-height (was height:600px) + overflow:visible so The Ad Shop's
           refresh code can resize the creative without our rigid box clipping
           it vertically. Reserves 600px so there's no CLS on first paint.
           Asana 1214654890888266 (ad-guy refresh cut-off). */
        min-height:600px;
        overflow:visible;
    }
    .dc-lg-none {
        display: none;
    }
    .dc-lg-inline {
        display: inline;
    }
    .dc-lg-inline-block {
        display: inline-block;
    }
    .dc-lg-block {
        display: block;
    }
    .dc-lg-table {
        display: table;
    }
    .dc-lg-table-row {
        display: table-row;
    }
    .dc-lg-table-cell {
        display: table-cell;
    }
    .dc-lg-flex {
        display: -ms-flexbox;
        display: flex;
    }
    .dc-lg-inline-flex {
        display: -ms-inline-flexbox;
        display: inline-flex;
    }
    .dc-lg-mt-0{
        margin-top:0;
    }
    .dc-lg-mb-0{
        margin-bottom:0;
    }
}
@media (min-width: 1200px) {
    .infobox-top-right .srn-ads-cnt{
        margin:20px auto;
    }
    .srn-ads-cnt{
        position:relative;
        margin:20px auto;
    }
    .srn-ads-cnt.tmsads-row{
        margin:0 auto;
        padding:20px 0;
        text-align:center;
        vertical-align:middle;
    }
    .srn-ads-cnt.tmsads-row .tmsads, .srn-ads-cnt.tmsads-row .msads{
        margin:0 auto;
        text-align:center;
        vertical-align:middle;
    }
   .srn-ads-cnt.header-overlay.has-overlay:before{
        background-color: white;
        opacity: 1;
        height: 100%;
        width: 100%;
        margin-bottom: -100%;
        position: absolute;
        z-index: 9999;
        left: 0;
        top:0;
        content:'';
   }
    .srn-ads-cnt.custom-sticky-ads{
        text-align:left;
        width:300px;
        /* see md-breakpoint note above — Asana 1214654890888266 */
        min-height:600px;
        overflow:visible;
    }
    .dc-xl-none {
        display: none;
    }
    .dc-xl-inline {
        display: inline;
    }
    .dc-xl-inline-block {
        display: inline-block;
    }
    .dc-xl-block {
        display: block;
    }
    .dc-xl-table {
        display: table;
    }
    .dc-xl-table-row {
        display: table-row;
    }
    .dc-xl-table-cell {
        display: table-cell;
    }
    .dc-xl-flex {
        display: -ms-flexbox;
        display: flex;
    }
    .dc-xl-inline-flex {
        display: -ms-inline-flexbox;
        display: inline-flex;
    }
    .dc-xl-mt-0{
        margin-top:0;
    }
    .dc-xl-mb-0{
        margin-bottom:0;
    }
}
.list-row-border-1{
    border-bottom: 1px solid #e6e6e6;
}
.list-row-border-2{
    border-bottom: 1px solid #e5e5e5;
}
.list-row-border-3{
    border-bottom: 1px solid #b8b8b8;
}
.list-row-border-4{
    border-bottom: 1px solid #E2E6F4;
}
.srn-ads-cnt{
    position: relative;
    text-align:center;
    vertical-align:middle;
    overflow:hidden;
    height:auto;
    /* Javier 2026-05-25: removed `border:1px solid blue !important` — left over
       from ad-layout debugging shipped on 2025-10-21 sync. The blue 1px border
       was drawn around every ad container site-wide; on pages where any ad slot
       failed to render (rankings page Recent Articles area, etc.) the empty
       wrapper still painted the border, leaving a visible blue line that
       Javier's sandbox round-trip flagged as a spacing/padding mismatch. */
}
.srn-ads-cnt.tmsads-row{
    width:100%;
    text-align:center;
    vertical-align:middle;
    align-items:center;
    justify-content:center;
}
.srn-ads-cnt.tmsads-row .tmsads, .srn-ads-cnt.tmsads-row .msads{
    text-align:center;
    vertical-align:middle;
    margin:0 auto;
}
/* Slots opt-in with class="collapse-if-empty" when their placeholder height
   would create a visible gap when unfilled (e.g. the two ads between the
   rankings table and #recent-articles on /top-school-listings).
   renderAD() inserts an empty .tmsads / .msads child even when the ad
   itself doesn't fill, so :empty on the wrapper isn't enough. Target the
   inner placeholder via :has() — when an actual creative renders, the
   inner div has content and the wrapper shows normally.
   Trades CLS-prevention for these specific slots; deliberate per design. */
.srn-ads-cnt.collapse-if-empty:has(> .tmsads:empty),
.srn-ads-cnt.collapse-if-empty:has(> .msads:empty),
.srn-ads-cnt.collapse-if-empty:empty{
    display: none;
}
.srn-ads-cnt.tmsads-border-1{
    border-bottom: 1px solid #e6e6e6;
}
.srn-ads-cnt.tmsads-border-2{
    border-bottom: 1px solid #e5e5e5;
}
.srn-ads-cnt.tmsads-border-3{
    border-bottom: 1px solid #b8b8b8;
}
.srn-ads-cnt.tmsads-border-4{
    border-bottom: 1px solid #E2E6F4;
}
.tmsads > :first-child, .msads > :first-child{
    width: 100%;
    height: 100%;
    text-align:center;
    vertical-align:middle;
    overflow:hidden;
}
/* Sticky sidebar units: let the inner GPT wrapper size to the refreshed
   creative instead of being clamped to 100% of a fixed box + clipped.
   Pairs with .custom-sticky-ads min-height/overflow above. Asana 1214654890888266 */
.srn-ads-cnt.custom-sticky-ads .tmsads > :first-child,
.srn-ads-cnt.custom-sticky-ads .msads > :first-child{
    height:auto;
    overflow:visible;
}
.srn-ads-cnt.tmsads-above-headline .tmsads > :first-child, .srn-ads-cnt.tmsads-above-headline .msads > :first-child{
    overflow:visible;
}
.srn-ads-cnt::after,.srn-ads-cnt::before{
    content:'';
    clear:both;
}
.tmsads-float-left{
    float:left;
    margin-right:15px;
}
.tmsads-float-right{
    float:right;
    margin-left:15px;
}
.overlayDiv{
    background-color: white;
    opacity: 1;
    height: 100%;
    width:100%;
    margin-bottom: -100%;
    position:absolute;
    z-index:9999;
}
.ld-ad-in-content{
    margin: 20px auto 0 !important;
}/*Display Utilities For Ads*/
/* Ads for mobile width <=399*/
@media (max-width: 399px) {
    .dc-mobile-horizontal-1,.dc-mobile-horizontal-2{
        width:100%;
        height:auto;
        min-width:320px;
        min-height:100px;
    }
    .dc-mobile-horizontal-3,.dc-mobile-horizontal-4,.dc-mobile-horizontal-5,.dc-mobile-horizontal-6{
        display:none;
    }
    .dc-mobile-square-1,.dc-mobile-square-2,.dc-mobile-square-3,.dc-mobile-square-4,.dc-mobile-square-5{
        width:300px;
        height:250px;
    }
    .dc-mobile-vertical-1,.dc-mobile-vertical-2,.dc-mobile-vertical-3{
        display:none;
    }
    .dc-mobile-vertical-4{
        width:300px;
        height:250px;
    }
    .dc-mobile-infeed{
        width:100%;
        height:auto;
        min-height:231px;
        max-height:360px;
    }
}
/* Ads for mobile width >399 and <=764*/
@media (min-width: 399px) and (max-width: 764px) {
    .dc-big-mobile-horizontal-1,.dc-big-mobile-horizontal-2{
        width:100%;
        height:auto;
        min-width:320px;
        min-height:100px;
    }
    .dc-big-mobile-horizontal-3,.dc-big-mobile-horizontal-4,.dc-big-mobile-horizontal-5,.dc-big-mobile-horizontal-6{
        display:none;
    }
    .dc-big-mobile-square-1,.dc-big-mobile-square-2,.dc-big-mobile-square-3,.dc-big-mobile-square-4,.dc-big-mobile-square-5{
        width:336px;
        height:280px;
    }
    .dc-big-mobile-vertical-1,.dc-big-mobile-vertical-2,.dc-big-mobile-vertical-3{
        display:none;
    }
    .dc-big-mobile-vertical-4{
        width:336px;
        height:280px;
    }
    .dc-big-mobile-infeed{
        width:100%;
        height:auto;
        min-height:231px;
        max-height:360px;
    }
}
/* Ads for mobile width >764 and <=1199px*/
@media (min-width: 764px) and (max-width: 1199px) {
    .dc-tablet-horizontal-1,.dc-tablet-horizontal-2{
        width:100%;
        max-width:728px;
        height:90px;
    }
    .dc-tablet-horizontal-3,.dc-tablet-horizontal-4,.dc-tablet-horizontal-5,.dc-tablet-horizontal-6{
        width:100%;
        max-width:728px;
        height:90px;
    }
    .dc-tablet-square-1,.dc-tablet-square-2,.dc-tablet-square-3{
        width:336px;
        height:280px;
    }
    .dc-tablet-square-4,.dc-tablet-square-5{
        display:none;
        
    }
    .dc-tablet-vertical-1,.dc-tablet-vertical-2,.dc-tablet-vertical-3{
        width:100%;
        max-width:300px;
        height:600px;
    }
    .dc-tablet-vertical-1.custom-sticky-ads,.dc-tablet-vertical-2.custom-sticky-ads,.dc-tablet-vertical-3.custom-sticky-ads{
        width:100%;
        max-width:300px;
        height:auto;
    }
    .dc-tablet-vertical-4{
        display:none;
    }
    .dc-tablet-infeed{
        width:100%;
        height:auto;
        min-height:241px;
        max-height:360px;
    }
}
@media (min-width: 1200px) {
    .dc-desktop-horizontal-1,.dc-desktop-horizontal-2{
        width:728px;
        height:90px;
    }
    .dc-desktop-horizontal-3,.dc-desktop-horizontal-4,.dc-desktop-horizontal-5{
        width:728px;
        height:90px;
    }
    .dc-desktop-horizontal-6{
        width:970px;
        height:250px;
    }
    .dc-desktop-square-1,.dc-desktop-square-2{
        width:336px;
        height:280px;
    }
    .dc-desktop-square-3,.dc-desktop-square-4,.dc-desktop-square-5{
        display:none;
    }
    .dc-desktop-vertical-1,.dc-desktop-vertical-2,.dc-desktop-vertical-3{
        width:300px;
        height:600px;
    }
    .dc-desktop-vertical-1.custom-sticky-ads,.dc-desktop-vertical-2.custom-sticky-ads,.dc-desktop-vertical-3.custom-sticky-ads{
        width:300px;
        height:auto;
    }
    .dc-desktop-vertical-4{
        width:300px;
        height:250px;
    }
    .dc-desktop-infeed{
        width:100%;
        height:auto;
        min-height:383px;
        max-height:480px;
    }
}
/* Unfilled-slot placeholder — class added by markUnfilledAdSlots() (ads.js),
   which only runs on test/local hostnames. Shows the reserved ad space with
   the orange dashed marker Javier asked for (2026-08-09). */
.srn-ad-unfilled{
    min-height:90px;
    outline:2px dashed rgba(255,165,0,.7);
    outline-offset:-2px;
    position:relative;
}
.srn-ad-unfilled::after{
    content:'Ad may not load in test area';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:12px;
    color:#c77700;
    white-space:nowrap;
}
.tippy-box[data-theme~=light-border]{background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,8,16,.15);color:#333;box-shadow:0 4px 14px -2px rgba(0,8,16,.08)}.tippy-box[data-theme~=light-border]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light-border]>.tippy-arrow:after,.tippy-box[data-theme~=light-border]>.tippy-svg-arrow:after{content:"";position:absolute;z-index:-1}.tippy-box[data-theme~=light-border]>.tippy-arrow:after{border-color:transparent;border-style:solid}.tippy-box[data-theme~=light-border][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light-border][data-placement^=top]>.tippy-arrow:after{border-top-color:rgba(0,8,16,.2);border-width:7px 7px 0;top:17px;left:1px}.tippy-box[data-theme~=light-border][data-placement^=top]>.tippy-svg-arrow>svg{top:16px}.tippy-box[data-theme~=light-border][data-placement^=top]>.tippy-svg-arrow:after{top:17px}.tippy-box[data-theme~=light-border][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff;bottom:16px}.tippy-box[data-theme~=light-border][data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:rgba(0,8,16,.2);border-width:0 7px 7px;bottom:17px;left:1px}.tippy-box[data-theme~=light-border][data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-theme~=light-border][data-placement^=bottom]>.tippy-svg-arrow:after{bottom:17px}.tippy-box[data-theme~=light-border][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light-border][data-placement^=left]>.tippy-arrow:after{border-left-color:rgba(0,8,16,.2);border-width:7px 0 7px 7px;left:17px;top:1px}.tippy-box[data-theme~=light-border][data-placement^=left]>.tippy-svg-arrow>svg{left:11px}.tippy-box[data-theme~=light-border][data-placement^=left]>.tippy-svg-arrow:after{left:12px}.tippy-box[data-theme~=light-border][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff;right:16px}.tippy-box[data-theme~=light-border][data-placement^=right]>.tippy-arrow:after{border-width:7px 7px 7px 0;right:17px;top:1px;border-right-color:rgba(0,8,16,.2)}.tippy-box[data-theme~=light-border][data-placement^=right]>.tippy-svg-arrow>svg{right:11px}.tippy-box[data-theme~=light-border][data-placement^=right]>.tippy-svg-arrow:after{right:12px}.tippy-box[data-theme~=light-border]>.tippy-svg-arrow{fill:#fff}.tippy-box[data-theme~=light-border]>.tippy-svg-arrow:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA2czEuNzk2LS4wMTMgNC42Ny0zLjYxNUM1Ljg1MS45IDYuOTMuMDA2IDggMGMxLjA3LS4wMDYgMi4xNDguODg3IDMuMzQzIDIuMzg1QzE0LjIzMyA2LjAwNSAxNiA2IDE2IDZIMHoiIGZpbGw9InJnYmEoMCwgOCwgMTYsIDAuMikiLz48L3N2Zz4=);background-size:16px 6px;width:16px;height:6px}
.tippy-box{font-size: 1.13rem;}

/*https://unpkg.com/tippy.js@6.3.7/themes/light-border.css*/.m-header-navbar, .m-search-icon,.m-search-x-delete,#m-header-login-line,.m-cat-menu{
    display:none;
}
.header-content {
    width: 1180px;
    height: 110px;
    margin: 0 auto;
    position:relative;
    display:flex;
}
.header-content .header-logo-link {
    width:auto;
    align-items:center;
    justify-content:center;
    display:inline-flex;
}
.search-bar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.header-search-bar {
    width: 794px;
    width: calc(100% - 385px);
    width: -webkit-calc(100% - 385px);
    width: -moz-calc(100% - 385px);
    position:relative;
}
.header-search-bar.logged-in{
    width: calc(100% - 442px);
    width: -webkit-calc(100% - 442px);
    width: -moz-calc(100% - 442px);
    position:relative;
}
.cse-search-box{
    display: inline-flex;
    align-items: center;
    position:relative;
}
.search-input {
    width: 430px;
    -webkit-appearance: none;
    position:relative;
    display: inline-block;
    vertical-align:middle;
    height:38px;
    line-height:38px;
    padding:0px;
    text-indent:10px;
    background: #fff;
    font-size:16px;
    border-bottom: 1px solid #d9d9d9;
    border-left: 1px solid #d9d9d9;
    border-top: 1px solid  #d9d9d9;
    border-right:0 none;
    border-radius: 5px 0 0 5px;
    outline: none;
    overflow: hidden;
}
.search-x-delete{
    position:relative;
    display: inline-block;
    /* border-box keeps the 1px top/bottom borders inside the same 38px the
       input and button occupy — content-box made this span 40px tall and it
       poked 2px below the rest of the search bar (Javier 07-07). */
    box-sizing: border-box;
    width:27px; /* was content-box 7px + 20px side padding — same footprint */
    height:38px;
    line-height: 36px;
    padding:0 10px 0 10px;
    background: #fff;
    border-bottom: 1px solid #d9d9d9;
    border-top: 1px solid #d9d9d9;
    color:#FFF;
    cursor:pointer;
    outline: none;
}
.search-button {
    position:relative;
    display: inline-block;
    margin-left:0;
    padding: 0;
    width:100%;
    height:38px;
    width:85px;
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    background: #F4B350;
    transition:background-color .25s linear;
    -o-transition:background-color .25s linear;
    -webkit-transition:background-color .25s linear;
    -moz-transition:background-color .25s linear;
    -webkit-font-smoothing: antialiased;
    outline:none;
}
.search-button:hover {
    -webkit-font-smoothing: antialiased;
    position:relative;
    background: #F9BF3B;
    cursor: pointer;
}
.search-button:active {
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F39C12), to(#F39C12));
    background: -webkit-linear-gradient(#F39C12, #F39C12);
    background: -moz-linear-gradient(#F39C12, #F39C12);
    background: -ms-linear-gradient(#F39C12, #F39C12);
    background: -o-linear-gradient(#F39C12, #F39C12);
    background: linear-gradient(#F39C12, #F39C12);
    cursor: pointer;
}
/*
autocomplet css
*/
ul.iaut-ul-wrapper {
    position: absolute;
    max-height: 226px;
    overflow-y: scroll;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid rgba(33,33,33,.1);
    z-index: 1000;
    outline: 0
}
.header-search-bar.m-active ul.iaut-ul-wrapper{
    position: fixed;
    border-radius: 0;
}
ul.iaut-ul-wrapper>li.iaut-li-wrapper {
    padding: 8px 10px;
    list-style: none;
    text-align: left;
    font-size: 16px;
    color: #212121;
    transition: all .1s ease-in-out;
    border-radius: 3px;
    background-color: #fff;
    word-break:break-word;
    word-wrap:break-word;
    transition: all .2s ease
}
.header-search-bar.m-active ul.iaut-ul-wrapper>li.iaut-li-wrapper {
    padding: 5px;
}

ul.iaut-ul-wrapper>li.iaut-li-wrapper::selection {
    color: rgba(255,255,255,0);
    background-color: rgba(255,255,255,0)
}
ul.iaut-ul-wrapper>li.iaut-li-wrapper:hover {
    cursor: pointer;
    background-color: rgba(123,123,123,.1)
}
ul.iaut-ul-wrapper>li.iaut-li-wrapper mark {
    background-color: transparent;
    color: #ff7a7a;
    font-weight: 700
}
ul.iaut-ul-wrapper>li.iaut-li-wrapper mark::selection {
    color: rgba(255,255,255,0);
    background-color: rgba(255,255,255,0)
}
ul.iaut-ul-wrapper>li.iaut-li-wrapper[aria-selected=true] {
    background-color: rgba(123,123,123,.1)
}
/*body search form on search page*/
.body-search-bar{
    margin: 20px 12px;
}
#header-login-line {
    width: auto;
    font-size: 13px;
    color: #959aa9;
    height: 110px;
    line-height: 110px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
A.header-btn-1 {
    position:relative;
    color: #FFFFFF;
    font-size:16px;
    font-weight:600;
    padding: 7px 15px 4px;
    border-radius: 5px;
    text-decoration: none;
    background: #f4b350;
    transition: background-color .25s linear;
    -o-transition: background-color .25s linear;
    -webkit-transition: background-color .25s linear;
    -moz-transition: background-color .25s linear;
}
A.header-btn {
    position:relative;
    color: #1E8BC3;
    font-size:16px;
    font-weight:600;
    padding: 6px 22px 3px 22px;
    margin:0 15px 0 0;
    border-radius: 5px;
    text-decoration: none;
    background-color: white;
    border: 1px solid #1E8BC3;
    transition: background-color .25s linear;
    -o-transition: background-color .25s linear;
    -webkit-transition: background-color .25s linear;
    -moz-transition: background-color .25s linear;
}
.header-login-line A.header-btn:hover {
    background: #1e8bc3;
    cursor: pointer;
    color: #fff;
    text-decoration:none;
}
.header-login-line A.header-btn-1:hover  {
    background: #f9bf3b;
    cursor: pointer;
    text-decoration:none;
}
#header-nav-wrapper {
    position:relative;
    text-align:center;
    background-color: #1E8BC3;
    width:100%;
}
.header-nav-content {
    position: relative;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    width: 1180px;
    margin: 0 auto;
}
A.header-nav-link {
    color: #FFF;
    font-size:16px;
    font-family: Montserrat, sans-serif;
    font-weight:400;
    line-height: 46px;
    height: 46px;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    text-decoration:none;
    transition: background-color .25s linear 0s;
    position:relative;
    
}
A.header-nav-link::before,A.header-nav-link::after{
    content:'';
    line-height: 46px;
    height: 46px;
    width:70px;
    display:inline-flex;
}
A.header-nav-link:hover {
    background-color: #f4b350;
    color: #FFF;
}
A.header-nav-link.nav-hover {
    background-color: #f4b350;
}

/*header dropdownlist*/
#menuarea-wrapper{
    text-align:center;
    clear:both;
    margin:0 auto;
    position:relative;
}
.header-dropdown-list {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #FFFFFF;
    border: 9px solid #F4B350;
    position: absolute;
    z-index: 99999;
    overflow: hidden;
}
.hdl-cat-tab{
    float:left;
    padding: 15px 20px 0;
}
A.hdl-cat-link{
    display: block;
    text-align: left;
    font-size:18px;
    font-weight:700;
    padding: 0 0 10px;
    border-bottom: 1px solid #D3D9F1;
    margin: 0 0 10px;
}
.hdl-cat-content{
    float:left;
    border-left:10px solid #F4B350;
    padding-bottom: 999px;
    margin-bottom: -999px;
    background-color: #FFFFFF;
}
.hdl-cat-link img{
    vertical-align:middle;
    margin-right:5px;
    width:63px;
    height:41px;
    border-radius:4px;
    object-fit:cover;
}
.hdl-sa-list {
    display:none;
    background-color: #fff;
    text-align: left;
    width: 340px;
    padding: 0 5px;
    border-top: 1px solid #D3D9F1;
    background: none repeat scroll 0 0 #F8F8F8;
}
.hdl-sa-header {
    height:30px;
    width: 295px;
    color: #DE7E18;
    font-size: 20px;
    font-weight:700;
    padding: 5px;
    margin: 10px 20px 0;
}
.hdl-sa-link {
    position: relative;
    display: flex;
    align-items:center;
    justify-content:normal;
    border-bottom: 1px solid #D3D9F1;
    width: 300px;
    height: auto;
    margin:0 15px;
    padding: 10px;
    text-decoration:none;
    text-align: left;
}
.hdl-sa-link:hover {
    background-color: #F1F4FF;
    text-decoration:none;
    cursor:pointer;
}
.hdl-sa-link img{
    position: relative;
    width:63px;
    height:41px;
    line-height:41px;
    margin: 4px 10px 4px 0;
    border-radius:4px;
    object-fit:cover;
}
/*FeaturedSchoolsHeaderView*/
.fs-banner-wrapper {
    background-color: #e9e9e9;
    display: block;
    margin: 0 auto;
    width: 100%;
    cursor:pointer;
}
.platinum-header{
	height:80px;
}
.fs-bc {
    margin: 0 auto;
    width: 860px;
    display: block;
    position: relative;
}
.fs-bc-left{
    display: block;
    position: relative;
    float:left;
    margin: 5px 10px 0 0;
    cursor:pointer;
}
.fs-bc-right{
    display: inline;
    position: relative;
    cursor:pointer;
}
IMG.fs-bc-img{
    background: #fbfbfb;
    border: 1px solid #bbbfc2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    float: left;
    width: 60px;
    height: 60px;
    margin: 3px 10px 2px 0;
}
.fs-bc-name-address{
    display: inline-block;
    position: relative;
    min-width: 150px;
    font-size: 16px;
    margin-right: 5px;
}
.fs-bc-name-address STRONG {
    display: block;
    font-size: 16px;
    font-weight: 600;
}
A.fs-bc-name{
    font-size: 16px;
    font-weight: 600;
}
.fs-bc-name-address  .top-featured-bg,.fs-bc-name-address .featured-bg{
    margin-top: 2px;
}
.fs-bc-long-desc{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    padding: 5px 0 0 0;
}

#top-to-site {
    position: fixed;
    bottom: 50px;
    right: 20px;
    z-index: 99;
    background-color:#e9aa4b;
    border-radius: 30% 30% 30% 30%;
    box-shadow: 0 0 2px #e9aa4b inset;
    cursor: pointer;
    border-radius: 30% 30% 30% 30%;
    padding-top: 17px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 3px;
    display:none;
}
#top-to-site::before{
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    border-top: 5px solid #FFFFFF;
    border-right: 5px solid #FFFFFF;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-radius:5px;
}
#top-to-site.showTopToBtn{
    display:block;
}
@media (min-width: 1200px)
{
    .fs-bc {
        width: 1000px;
    }
    .fs-bc-name-address {
        min-width: 150px;
        width: auto;
        margin-right: 15px;
    }
}
@media (min-width: 767px) and (max-width:1200px)
{
    .header-content, .header-nav-content{
        width:768px;
    }
    .header-content .header-logo-img {
        width:160px;
        height:auto;
    }
    .header-search-bar{
        width: 394px;
        width: calc(100% - 373px);
        width: -webkit-calc(100% - 373px);
        width: -moz-calc(100% - 373px);
    }
    .header-search-bar.logged-in{
        width: calc(100% - 430px);
        width: -webkit-calc(100% - 430px);
        width: -moz-calc(100% - 430px);
    }
    .search-input {
        font-size: 12px;
        width: 14.4rem;
    }
    .search-button{
        width:38px;
    }
    A.header-nav-link{
        font-size:14px;
    }
    A.header-nav-link::before,A.header-nav-link::after{
        width:18px;
    }
    .fs-bc{
        width:760px;
    }
}

@media (max-width: 767px)
{
    #menuarea-wrapper,#header-login-line,.header-search-bar .search-x-delete{
        display:none;
    }
    .header-search-bar.logged-in{
        width: 0px;
    }
    .header-content {
        position:relative;
        width:100%;
        height: 67px;
        background: #f2f2f2;
        display:block;
        text-align: center;
    }
    .header-content .header-logo-link{
        position:relative;
        display:inline-block;
        width:140px;
        height:auto;
        line-height: 1;
    }
    .header-content .header-logo-img {
        width:140px;
        height:auto;
        margin-top:3px;
    }
    .nav-down{
        z-index: 100000;
        border-bottom:4px solid #1E8BC3;
    }
    .headroom--pinned{
        transform: translateY(0);
    }
    .headroom--unpinned {
        transform: translateY(-100%);
    }
    .headroom, .headroom1 {
        transition: transform .25s ease-in-out;
        will-change: transform;
    }
    .header-fixed {
        position: fixed;
        z-index: 99999999999999;
        right: 0;
        left: 0;
        top: 0;
    }
    #header-nav-wrapper {
        min-width: 0;
        left: 0;
        position: fixed;
        margin-top: 71px;
        width: 0;
        top: 0;
        height: 100%;
        transition: width .5s ease 0s;
        -moz-transition: width .5s ease 0s;
        -webkit-transition: width .5s ease 0s;
        -o-transition: width .5s ease 0s;
        z-index: 999999999;
        overflow: hidden;
        overflow-y: visible;
    }
    #header-nav-wrapper.m-active{
        width:305px;
    }
    .header-nav-content {
        position: relative;
        display:block;
        background-color: #1e8dc5;
        color: #fff;
        overflow-y: visible;
        width: 250px;
        height: 100%;
        padding:0 0 71px 30px;
    }
    #m-header-login-line{
        display:block;
        width: 220px;
        margin: 20px 30px 0 0;
        text-align: center;
        border-bottom: 1px solid #fff;
    }
    .m-header-login-line A.header-btn{
        font-size: 14px;
        display: block;
        margin:20px 0;
    }
    .m-header-login-line A.header-btn-1{
        font-size: 14px;
        display:block;
        margin:20px 0;
    }
    A.header-nav-link{
        display:block;
        color: #fff;
        height:55px;
        line-height:55px;
        font-family:Hind,sans-serif;
        display:block;
        vertical-align:middle;
        font-weight: 700;
        width:100%;
        border-bottom: 1px solid #3498ca;
        font-size: 16px;
        text-align: left;
    }
    A.header-nav-link:hover{
        background-color: transparent;
    }
    A.header-nav-link::before, A.header-nav-link::after {
        content: none;
    }
    .m-cat-icon{
        position: relative;
        display: inline-block;
        float: right;
        text-align: center;
        vertical-align: middle;
        width:42px;
        height:55px;
        line-height:55px;
        background-color: #1e8dc5;
    }
    A.header-nav-link.m-menu-active {
        border-bottom: 1px solid #f4bb61;
    }
    A.header-nav-link.m-menu-active .m-cat-icon{
        background-color:#f4b34f;
    }
    .m-cat-icon::after{
        content:'';
        clear:both;
    }
    .m-cat-menu.m-active{
        display:block;
        background-color:#f4b34f;
    }
    .m-cat-menu.m-active A.header-nav-link{
        border-bottom: 1px solid #f4bb61;
        padding-left:10px;
        font-size:16px;
        font-weight:normal;
    }
    .header-search-bar{
        height: 67px;
        background: #f2f2f2;
        width:100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        overflow: hidden;
        transition: all .5s ease 0s;
        -moz-transition: all .5s ease 0s;
        -webkit-transition: all .5s ease 0s;
        -o-transition: all .5s ease 0s;
        left: initial;
    }
    .header-search-bar.m-active{
        width:100%;
    }
    .header-search-bar .cse-search-box {
        width: 89%;
    }
    .header-search-bar .search-input{
        font-size:13px;
        width: 90%;
    }
    .header-search-bar .search-button{
        display:none;
    }
    .header-search-bar .m-search-x-delete {
        width: 10%;
        height: 38px;
        line-height:38px;
        vertical-align:middle;
        background: #fff;
        border: 1px solid #d9d9d9;
        border-left: none;
        border-radius: 0 5px 5px 0;
        position: relative;
        padding:0;
        display: inline-block;
    }
    .header-search-bar .m-search-x-delete::before{
        content:'X';
        width: 23px;
        height: 23px;
        line-height: 23px;
        border-radius: 50%;
        margin-top: 7px;
        background-color: #d2d2d2;
        color: #fff;
        cursor: pointer;
        position: absolute;
        left: 50%;
        margin-left: -12.5px;
        display: inline-block;
    }
    /*body search form on search page*/
    .body-search-bar .search-input{
        width: calc(88% - 30px);
        width: -webkit-calc(88% - 30px);
        width: -moz-calc(100% - 30px);
        font-size: 13px;
    }
    .body-search-bar .search-button{
        width:12%;
    }
    .body-search-bar .search-button::before{
        left: 9px;
    }
    .fs-banner-wrapper {
        display: none;
    }
    
}
footer.page-footer {
    background-color: #1E8BC3;
}
.footer-top-wrapper,.footer-bottom-wrapper {
    display:block;
    position:relative;
    width: 100%;
    clear:both;
    z-index: 0;
}
.footer-top-wrapper{
    background-color: rgb(242, 242, 242);
}
.footer-top,.footer-bottom {
    display:block;
    position:relative;
    width: 1180px;
    height: auto;
    font-size: 16px;
    margin: 0px auto;
    overflow: hidden;
    clear: both;
}
.footer-top,.footer-bottom{
    padding:30px 0 20px;
}
.ft-logo-address{
    float: left;
    font-size:16px;
    color:#616161;
    display: flex;
    align-items: center;
}
.ft-logo{
    margin-right: 30px;
}
.ft-address{
    display:inline-block;
}
.ft-nav-wrapper{
    float: right;
}
.ft-nav{
    float: left;
    margin-left: 60px;
}
A.ft-nav-link{
    position:relative;
    display:block;
    color: #1e8cc5;
    margin:0 5px;
    transition:color .25s linear;
    -o-transition:color .25s linear;
    -webkit-transition:color .25s linear;
    -moz-transition:color .25s linear;
    text-transform: capitalize;
}
A.ft-nav-link:hover{
    color:#F0BF0B;
    text-decoration:none;
}
.fb-social{
    float: left;
    margin-top:8px;
}
.fb-copyright{
    float: right;
    color: #FFFFFF;
}
A.fb-copyright-link{
    color: #FFFFFF;
    font-weight: 700;
}

a.fb-twitter,a.fb-facebook{
    display:inline-block;
    position: relative;
    font-size:0;
    line-height:38px;
    vertical-align: bottom;
    text-align: center;
}
.x-shape-wrapper{
    position: relative;
    width: 34px;
    height: 34px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:0;
    line-height:36px;
    margin-bottom: 2px;
}
.x-shape {
    width: 50%;
    height: 50%;
    background-color: #1e8bc3;
    clip-path: polygon(
    30% 0%, 50% 35%, 80% 0%, 100% 0%, 60% 50%, 100% 100%, 80% 100%, 
    50% 65%, 20% 100%, 0% 100%, 40% 50%, 0% 0%
    );
}
.grecaptcha-badge { 
    visibility: hidden; 
}
.gcaptcha-text{
    font-size:12px;
    margin-top:15px;
}
@media (min-width: 767px) and (max-width:1200px)
{
    .footer-top,.footer-bottom{
        width: 98%;
    }
    .ft-logo{
        margin-right:0;
    }
    .ft-address{
        display:block;
        margin:10px 0;
    }
    .ft-nav-2,.ft-nav-3{
        margin-left:11px;
    }
}
@media (max-width: 767px)
{
    /* Javier 2026-04-23 M5: footer content at 12px left was too close to the
       screen edge. Bump horizontal padding to 20px (matches the card-interior
       margin used throughout the page body). */
    .footer-top {
        box-sizing: border-box;
        width: 100%;
        padding: 12px 20px;
    }
    .footer-bottom{
        width: 100%;
        text-align:center;
    }
    .ft-logo-address,.ft-nav-wrapper,.ft-nav, .fb-social,.fb-copyright{
        float:none;
        width:100%;
        margin:0;
        display:block;
    }
    .ft-logo{
        margin-right:0;
    }
    .ft-address{
        display:block;
        margin:10px 0;
    }
    A.ft-nav-link{
        margin:10px 0;
    }
    .fb-copyright{
        margin-top:10px;
    }
}
@media (max-width: 640px)
{
    footer.page-footer
    {
        font-size:18px;
    }
}
@media (max-width: 480px)
{
    footer.page-footer
    {
        font-size:16px;
    }
}
/* R5-09: Prevent blank white area below footer on mobile */
@media (max-width: 767px) {
    html {
        background-color: #1E8BC3;
    }
}
@media (max-width: 336px)
{
    footer.page-footer
    {
        font-size:14px;
    }
}


/* classes attached to <body> */
/* TODO: make fc-event selector work when calender in shadow DOM */
.fc-not-allowed,
.fc-not-allowed .fc-event { /* override events' custom cursors */
  cursor: not-allowed;
}

/* TODO: not attached to body. attached to specific els. move */
.fc-unselectable {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.fc {
  /* layout of immediate children */
  display: flex;
  flex-direction: column;

  font-size: 1em
}
.fc,
  .fc *,
  .fc *:before,
  .fc *:after {
    box-sizing: border-box;
  }
.fc table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1em; /* normalize cross-browser */
    display:table;
  }
.fc th {
    text-align: center;
  }
.fc th,
  .fc td {
    vertical-align: top;
    padding: 0;
  }
.fc a[data-navlink] {
    cursor: pointer;
  }
.fc a[data-navlink]:hover {
    text-decoration: underline;
  }
.fc-direction-ltr {
  direction: ltr;
  text-align: left;
}
.fc-direction-rtl {
  direction: rtl;
  text-align: right;
}
.fc-theme-standard td,
  .fc-theme-standard th {
    border: 1px solid #ddd;
    border: 1px solid var(--fc-border-color, #ddd);
  }
/* for FF, which doesn't expand a 100% div within a table cell. use absolute positioning */
/* inner-wrappers are responsible for being absolute */
/* TODO: best place for this? */
.fc-liquid-hack td,
.fc-liquid-hack th {
    position: relative;
}

.fc-icon {
  /* added for fc */
  display: inline-block;
  width: 1em;
  height: 1em;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'fcicons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fc-icon-chevron-left:before {
  content: "\e900";
}

.fc-icon-chevron-right:before {
  content: "\e901";
}

.fc-icon-chevrons-left:before {
  content: "\e902";
}

.fc-icon-chevrons-right:before {
  content: "\e903";
}

.fc-icon-minus-square:before {
  content: "\e904";
}

.fc-icon-plus-square:before {
  content: "\e905";
}

.fc-icon-x:before {
  content: "\e906";
}
/*
Lots taken from Flatly (MIT): https://bootswatch.com/4/flatly/bootstrap.css

These styles only apply when the standard-theme is activated.
When it's NOT activated, the fc-button classes won't even be in the DOM.
*/
.fc {

  /* reset */

}
.fc .fc-button {
    border-radius: 0;
    overflow: visible;
    text-transform: none;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }
.fc .fc-button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
  }
.fc .fc-button {
    -webkit-appearance: button;
  }
.fc .fc-button:not(:disabled) {
    cursor: pointer;
  }
.fc .fc-button::-moz-focus-inner {
    padding: 0;
    border-style: none;
  }
.fc {

  /* theme */

}
.fc .fc-button {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.4em 0.65em;
    font-size: 1em;
    line-height: 1.5;
    border-radius: 0.25em;
  }
.fc .fc-button:hover {
    text-decoration: none;
  }
.fc .fc-button:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem #f5b34f;
  }
.fc .fc-button:disabled {
    opacity: 0.65;
  }
.fc {

  /* "primary" coloring */

}
.fc .fc-button-primary {
    color: #fff;
    color: var(--fc-button-text-color, #fff);
    background-color: #f5b34f;
    background-color: var(--fc-button-bg-color, #f5b34f);
    border-color: #f5b34f;
    border-color: var(--fc-button-border-color, #f5b34f);
  }
.fc .fc-button-primary:hover {
    color: #fff;
    color: var(--fc-button-text-color, #fff);
    background-color: #f5bd67;
    background-color: var(--fc-button-hover-bg-color, #f5bd67);
    border-color: #f5bd67;
    border-color: var(--fc-button-hover-border-color, #f5bd67);
  }
.fc .fc-button-primary:disabled { /* not DRY */
    color: #fff;
    color: var(--fc-button-text-color, #fff);
    background-color: #f5b34f;
    background-color: var(--fc-button-bg-color, #f5b34f);
    border-color: #f5b34f;
    border-color: var(--fc-button-border-color, #f5b34f); /* overrides :hover */
  }
.fc .fc-button-primary:focus {
    box-shadow: 0 0 0 0.2rem #f5b34f;
  }
.fc .fc-button-primary:not(:disabled):active,
  .fc .fc-button-primary:not(:disabled).fc-button-active {
    color: #fff;
    color: var(--fc-button-text-color, #fff);
    background-color: #f5b34f;
    background-color: var(--fc-button-active-bg-color, #f5b34f);
    border-color: #f5b34f;
    border-color: var(--fc-button-active-border-color, #f5b34f);
  }
.fc .fc-button-primary:not(:disabled):active:focus,
  .fc .fc-button-primary:not(:disabled).fc-button-active:focus {
    box-shadow: 0 0 0 0.2rem #f5b34f;
  }
.fc {

  /* icons within buttons */

}
.fc .fc-button .fc-icon {
    vertical-align: middle;
    font-size: 1.5em; /* bump up the size (but don't make it bigger than line-height of button, which is 1.5em also) */
  }
.fc .fc-button-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
  }
.fc .fc-button-group > .fc-button {
    position: relative;
    flex: 1 1 auto;
  }
.fc .fc-button-group > .fc-button:hover {
    z-index: 1;
  }
.fc .fc-button-group > .fc-button:focus,
  .fc .fc-button-group > .fc-button:active,
  .fc .fc-button-group > .fc-button.fc-button-active {
    z-index: 1;
  }
.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
.fc-direction-rtl .fc-button-group > .fc-button:not(:first-child) {
    margin-right: -1px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
.fc-direction-rtl .fc-button-group > .fc-button:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
.fc .fc-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.5em;
  }
.fc .fc-toolbar.fc-footer-toolbar {
    margin-top: 1.5em;
  }
.fc .fc-toolbar-title {
    font-size: 1.75em;
    margin: 0;
    color:#f4b350;
  }
.fc-direction-ltr .fc-toolbar > * > :not(:first-child) {
    margin-left: .75em; /* space between */
  }
.fc-direction-rtl .fc-toolbar > * > :not(:first-child) {
    margin-right: .75em; /* space between */
  }
.fc-direction-rtl .fc-toolbar-ltr { /* when the toolbar-chunk positioning system is explicitly left-to-right */
    flex-direction: row-reverse;
  }
.fc .fc-scroller {
    -webkit-overflow-scrolling: touch;
    position: relative; /* for abs-positioned elements within */
  }
.fc .fc-scroller-liquid {
    height: 100%;
  }
.fc .fc-scroller-liquid-absolute {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }
.fc .fc-scroller-harness {
    position: relative;
    overflow: hidden;
    direction: ltr;
      /* hack for chrome computing the scroller's right/left wrong for rtl. undone below... */
      /* TODO: demonstrate in codepen */
  }
.fc .fc-scroller-harness-liquid {
    height: 100%;
  }
.fc-direction-rtl .fc-scroller-harness > .fc-scroller { /* undo above hack */
    direction: rtl;
  }
.fc-theme-standard .fc-scrollgrid {
    border: 1px solid #ddd;
    border: 1px solid var(--fc-border-color, #ddd); /* bootstrap does this. match */
  }
.fc .fc-scrollgrid,
    .fc .fc-scrollgrid table { /* all tables (self included) */
      width: 100%; /* because tables don't normally do this */
      table-layout: fixed;
    }
.fc .fc-scrollgrid table { /* inner tables */
      border-top-style: hidden;
      border-left-style: hidden;
      border-right-style: hidden;
    }
.fc .fc-scrollgrid {

    border-collapse: separate;
    border-right-width: 0;
    border-bottom-width: 0;

  }
.fc .fc-scrollgrid-liquid {
    height: 100%;
  }
.fc .fc-scrollgrid-section { /* a <tr> */
    height: 1px /* better than 0, for firefox */

  }
.fc .fc-scrollgrid-section > td {
      height: 1px; /* needs a height so inner div within grow. better than 0, for firefox */
    }
.fc .fc-scrollgrid-section table {
      height: 1px;
        /* for most browsers, if a height isn't set on the table, can't do liquid-height within cells */
        /* serves as a min-height. harmless */
    }
.fc .fc-scrollgrid-section-liquid > td {
      height: 100%; /* better than `auto`, for firefox */
    }
.fc .fc-scrollgrid-section > * {
    border-top-width: 0;
    border-left-width: 0;
  }
.fc .fc-scrollgrid-section-header > *,
  .fc .fc-scrollgrid-section-footer > * {
    border-bottom-width: 0;
  }
.fc .fc-scrollgrid-section-body table,
  .fc .fc-scrollgrid-section-footer table {
    border-bottom-style: hidden; /* head keeps its bottom border tho */
  }
.fc {

  /* stickiness */

}
.fc .fc-scrollgrid-section-sticky > * {
    background: #fff;
    background: var(--fc-page-bg-color, #fff);
    position: sticky;
    z-index: 3; /* TODO: var */
    /* TODO: box-shadow when sticking */
  }
.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky > * {
    top: 0; /* because border-sharing causes a gap at the top */
      /* TODO: give safari -1. has bug */
  }
.fc .fc-scrollgrid-section-footer.fc-scrollgrid-section-sticky > * {
    bottom: 0; /* known bug: bottom-stickiness doesn't work in safari */
  }
.fc .fc-scrollgrid-sticky-shim { /* for horizontal scrollbar */
    height: 1px; /* needs height to create scrollbars */
    margin-bottom: -1px;
  }
.fc-sticky { /* no .fc wrap because used as child of body */
  position: sticky;
}
.fc .fc-view-harness {
    flex-grow: 1; /* because this harness is WITHIN the .fc's flexbox */
    position: relative;
  }
.fc {

  /* when the harness controls the height, make the view liquid */

}
.fc .fc-view-harness-active > .fc-view {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
.fc .fc-col-header-cell-cushion {
    display: inline-block; /* x-browser for when sticky (when multi-tier header) */
    padding: 2px 4px;
  }
.fc .fc-bg-event,
  .fc .fc-non-business,
  .fc .fc-highlight {
    /* will always have a harness with position:relative/absolute, so absolutely expand */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
.fc .fc-non-business {
    background: rgba(215, 215, 215, 0.3);
    background: var(--fc-non-business-color, rgba(215, 215, 215, 0.3));
  }
.fc .fc-bg-event {
    background: rgb(143, 223, 130);
    background: var(--fc-bg-event-color, rgb(143, 223, 130));
    opacity: 0.3;
    opacity: var(--fc-bg-event-opacity, 0.3)
  }
.fc .fc-bg-event .fc-event-title {
      margin: .5em;
      font-size: .85em;
      font-size: var(--fc-small-font-size, .85em);
      font-style: italic;
    }
.fc .fc-highlight {
    background: rgba(188, 232, 241, 0.3);
    background: var(--fc-highlight-color, rgba(188, 232, 241, 0.3));
  }
.fc .fc-cell-shaded,
  .fc .fc-day-disabled {
    background: rgba(208, 208, 208, 0.3);
    background: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
  }
/* link resets */
/* ---------------------------------------------------------------------------------------------------- */
a.fc-event,
a.fc-event:hover {
  text-decoration: none;
}
/* cursor */
.fc-event[href],
.fc-event.fc-event-draggable {
  cursor: pointer;
}
/* event text content */
/* ---------------------------------------------------------------------------------------------------- */
.fc-event .fc-event-main {
    position: relative;
    z-index: 2;
  }
/* dragging */
/* ---------------------------------------------------------------------------------------------------- */
.fc-event-dragging:not(.fc-event-selected) { /* MOUSE */
    opacity: 0.75;
  }
.fc-event-dragging.fc-event-selected { /* TOUCH */
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  }
/* resizing */
/* ---------------------------------------------------------------------------------------------------- */
/* (subclasses should hone positioning for touch and non-touch) */
.fc-event .fc-event-resizer {
    display: none;
    position: absolute;
    z-index: 4;
  }
.fc-event:hover, /* MOUSE */
.fc-event-selected { /* TOUCH */

}
.fc-event:hover .fc-event-resizer, .fc-event-selected .fc-event-resizer {
    display: block;
  }
.fc-event-selected .fc-event-resizer {
    border-radius: 4px;
    border-radius: calc(var(--fc-event-resizer-dot-total-width, 8px) / 2);
    border-width: 1px;
    border-width: var(--fc-event-resizer-dot-border-width, 1px);
    width: 8px;
    width: var(--fc-event-resizer-dot-total-width, 8px);
    height: 8px;
    height: var(--fc-event-resizer-dot-total-width, 8px);
    border-style: solid;
    border-color: inherit;
    background: #fff;
    background: var(--fc-page-bg-color, #fff)

    /* expand hit area */

  }
.fc-event-selected .fc-event-resizer:before {
      content: '';
      position: absolute;
      top: -20px;
      left: -20px;
      right: -20px;
      bottom: -20px;
    }
/* selecting (always TOUCH) */
/* OR, focused by tab-index */
/* (TODO: maybe not the best focus-styling for .fc-daygrid-dot-event) */
/* ---------------------------------------------------------------------------------------------------- */
.fc-event-selected,
.fc-event:focus {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)

  /* expand hit area (subclasses should expand) */

}
.fc-event-selected:before, .fc-event:focus:before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
.fc-event-selected,
.fc-event:focus {

  /* dimmer effect */

}
.fc-event-selected:after, .fc-event:focus:after {
    content: "";
    background: rgba(0, 0, 0, 0.25);
    background: var(--fc-event-selected-overlay-color, rgba(0, 0, 0, 0.25));
    position: absolute;
    z-index: 1;

    /* assume there's a border on all sides. overcome it. */
    /* sometimes there's NOT a border, in which case the dimmer will go over */
    /* an adjacent border, which looks fine. */
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
  }
/*
A HORIZONTAL event
*/
.fc-h-event { /* allowed to be top-level */
  display: block;
  border: 1px solid #3788d8;
  border: 1px solid var(--fc-event-border-color, #3788d8);
  background-color: #3788d8;
  background-color: var(--fc-event-bg-color, #3788d8)

}
.fc-h-event .fc-event-main {
    color: #fff;
    color: var(--fc-event-text-color, #fff);
  }
.fc-h-event .fc-event-main-frame {
    display: flex; /* for make fc-event-title-container expand */
  }
.fc-h-event .fc-event-time {
    max-width: 100%; /* clip overflow on this element */
    overflow: hidden;
  }
.fc-h-event .fc-event-title-container { /* serves as a container for the sticky cushion */
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0; /* important for allowing to shrink all the way */
  }
.fc-h-event .fc-event-title {
    display: inline-block; /* need this to be sticky cross-browser */
    vertical-align: top; /* for not messing up line-height */
    left: 0;  /* for sticky */
    right: 0; /* for sticky */
    max-width: 100%; /* clip overflow on this element */
    overflow: hidden;
  }
.fc-h-event.fc-event-selected:before {
    /* expand hit area */
    top: -10px;
    bottom: -10px;
  }
/* adjust border and border-radius (if there is any) for non-start/end */
.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start),
.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
}
.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end),
.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-start) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}
/* resizers */
.fc-h-event:not(.fc-event-selected) .fc-event-resizer {
  top: 0;
  bottom: 0;
  width: 8px;
  width: var(--fc-event-resizer-thickness, 8px);
}
.fc-direction-ltr .fc-h-event:not(.fc-event-selected) .fc-event-resizer-start,
.fc-direction-rtl .fc-h-event:not(.fc-event-selected) .fc-event-resizer-end {
  cursor: w-resize;
  left: -4px;
  left: calc(-0.5 * var(--fc-event-resizer-thickness, 8px));
}
.fc-direction-ltr .fc-h-event:not(.fc-event-selected) .fc-event-resizer-end,
.fc-direction-rtl .fc-h-event:not(.fc-event-selected) .fc-event-resizer-start {
  cursor: e-resize;
  right: -4px;
  right: calc(-0.5 * var(--fc-event-resizer-thickness, 8px));
}
/* resizers for TOUCH */
.fc-h-event.fc-event-selected .fc-event-resizer {
  top: 50%;
  margin-top: -4px;
  margin-top: calc(-0.5 * var(--fc-event-resizer-dot-total-width, 8px));
}
.fc-direction-ltr .fc-h-event.fc-event-selected .fc-event-resizer-start,
.fc-direction-rtl .fc-h-event.fc-event-selected .fc-event-resizer-end {
  left: -4px;
  left: calc(-0.5 * var(--fc-event-resizer-dot-total-width, 8px));
}
.fc-direction-ltr .fc-h-event.fc-event-selected .fc-event-resizer-end,
.fc-direction-rtl .fc-h-event.fc-event-selected .fc-event-resizer-start {
  right: -4px;
  right: calc(-0.5 * var(--fc-event-resizer-dot-total-width, 8px));
}
.fc .fc-popover {
    position: absolute;
    z-index: 9999;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
  }
.fc .fc-popover-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 3px 4px;
  }
.fc .fc-popover-title {
    margin: 0 2px;
  }
.fc .fc-popover-close {
    cursor: pointer;
    opacity: 0.65;
    font-size: 1.1em;
  }
.fc-theme-standard .fc-popover {
    border: 1px solid #ddd;
    border: 1px solid var(--fc-border-color, #ddd);
    background: #fff;
    background: var(--fc-page-bg-color, #fff);
  }
.fc-theme-standard .fc-popover-header {
    background: rgba(208, 208, 208, 0.3);
    background: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
  }


:root {
  --fc-daygrid-event-dot-width: 8px;
}
/* help things clear margins of inner content */
.fc-daygrid-day-frame,
.fc-daygrid-day-events,
.fc-daygrid-event-harness { /* for event top/bottom margins */
}
.fc-daygrid-day-frame:before, .fc-daygrid-day-events:before, .fc-daygrid-event-harness:before {
  content: "";
  clear: both;
  display: table; }
.fc-daygrid-day-frame:after, .fc-daygrid-day-events:after, .fc-daygrid-event-harness:after {
  content: "";
  clear: both;
  display: table; }
.fc .fc-daygrid-body { /* a <div> that wraps the table */
    position: relative;
    z-index: 1; /* container inner z-index's because <tr>s can't do it */
  }
.fc .fc-daygrid-day.fc-day-today {
      background-color: rgba(255, 220, 40, 0.15);
      background-color: var(--fc-today-bg-color, rgba(255, 220, 40, 0.15));
    }
.fc .fc-daygrid-day-frame {
    position: relative;
    min-height: 100%; /* seems to work better than `height` because sets height after rows/cells naturally do it */
  }
.fc {

  /* cell top */

}
.fc .fc-daygrid-day-top {
    display: flex;
    flex-direction: row-reverse;
  }
.fc .fc-day-other .fc-daygrid-day-top {
    opacity: 0.3;
  }
.fc {

  /* day number (within cell top) */

}
.fc .fc-daygrid-day-number {
    position: relative;
    z-index: 4;
    padding: 4px;
  }
.fc {

  /* event container */

}
.fc .fc-daygrid-day-events {
    margin-top: 1px; /* needs to be margin, not padding, so that available cell height can be computed */
  }
.fc {

  /* positioning for balanced vs natural */

}
.fc .fc-daygrid-body-balanced .fc-daygrid-day-events {
      position: absolute;
      left: 0;
      right: 0;
    }
.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
      position: relative; /* for containing abs positioned event harnesses */
      min-height: 2em; /* in addition to being a min-height during natural height, equalizes the heights a little bit */
    }
.fc .fc-daygrid-body-natural { /* can coexist with -unbalanced */
  }
.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
      margin-bottom: 1em;
    }
.fc {

  /* event harness */

}
.fc .fc-daygrid-event-harness {
    position: relative;
  }
.fc .fc-daygrid-event-harness-abs {
    position: absolute;
    top: 0; /* fallback coords for when cannot yet be computed */
    left: 0; /* */
    right: 0; /* */
  }
.fc .fc-daygrid-bg-harness {
    position: absolute;
    top: 0;
    bottom: 0;
  }
.fc {

  /* bg content */

}
.fc .fc-daygrid-day-bg .fc-non-business { z-index: 1 }
.fc .fc-daygrid-day-bg .fc-bg-event { z-index: 2 }
.fc .fc-daygrid-day-bg .fc-highlight { z-index: 3 }
.fc {

  /* events */

}
.fc .fc-daygrid-event {
    z-index: 6;
    margin-top: 1px;
  }
.fc .fc-daygrid-event.fc-event-mirror {
    z-index: 7;
  }
.fc {

  /* cell bottom (within day-events) */

}
.fc .fc-daygrid-day-bottom {
    font-size: .85em;
    padding: 2px 3px 0
  }
.fc .fc-daygrid-day-bottom:before {
  content: "";
  clear: both;
  display: table; }
.fc .fc-daygrid-more-link {
    position: relative;
    z-index: 4;
    cursor: pointer;
  }
.fc {

  /* week number (within frame) */

}
.fc .fc-daygrid-week-number {
    position: absolute;
    z-index: 5;
    top: 0;
    padding: 2px;
    min-width: 1.5em;
    text-align: center;
    background-color: rgba(208, 208, 208, 0.3);
    background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
    color: #808080;
    color: var(--fc-neutral-text-color, #808080);
  }
.fc {

  /* popover */

}
.fc .fc-more-popover .fc-popover-body {
    min-width: 220px;
    padding: 10px;
  }
.fc-direction-ltr .fc-daygrid-event.fc-event-start,
.fc-direction-rtl .fc-daygrid-event.fc-event-end {
  margin-left: 2px;
}
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
  margin-right: 2px;
}
.fc-direction-ltr .fc-daygrid-week-number {
    left: 0;
    border-radius: 0 0 3px 0;
  }
.fc-direction-rtl .fc-daygrid-week-number {
    right: 0;
    border-radius: 0 0 0 3px;
  }
.fc-liquid-hack .fc-daygrid-day-frame {
    position: static; /* will cause inner absolute stuff to expand to <td> */
  }
.fc-daygrid-event { /* make root-level, because will be dragged-and-dropped outside of a component root */
  position: relative; /* for z-indexes assigned later */
  white-space: nowrap;
  border-radius: 3px; /* dot event needs this to when selected */
  font-size: .85em;
  font-size: var(--fc-small-font-size, .85em);
}
/* --- the rectangle ("block") style of event --- */
.fc-daygrid-block-event .fc-event-time {
    font-weight: bold;
  }
.fc-daygrid-block-event .fc-event-time,
  .fc-daygrid-block-event .fc-event-title {
    padding: 1px;
  }
/* --- the dot style of event --- */
.fc-daygrid-dot-event {
  display: flex;
  align-items: center;
  padding: 2px 0

}
.fc-daygrid-dot-event .fc-event-title {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0; /* important for allowing to shrink all the way */
    overflow: hidden;
    font-weight: bold;
  }
.fc-daygrid-dot-event:hover,
  .fc-daygrid-dot-event.fc-event-mirror {
    background: rgba(0, 0, 0, 0.1);
  }
.fc-daygrid-dot-event.fc-event-selected:before {
    /* expand hit area */
    top: -10px;
    bottom: -10px;
  }
.fc-daygrid-event-dot { /* the actual dot */
  margin: 0 4px;
  box-sizing: content-box;
  width: 0;
  height: 0;
  border: 4px solid #3788d8;
  border: calc(var(--fc-daygrid-event-dot-width, 8px) / 2) solid var(--fc-event-border-color, #3788d8);
  border-radius: 4px;
  border-radius: calc(var(--fc-daygrid-event-dot-width, 8px) / 2);
}
/* --- spacing between time and title --- */
.fc-direction-ltr .fc-daygrid-event .fc-event-time {
    margin-right: 3px;
  }
.fc-direction-rtl .fc-daygrid-event .fc-event-time {
    margin-left: 3px;
  }


/*
A VERTICAL event
*/

.fc-v-event { /* allowed to be top-level */
  display: block;
  border: 1px solid #3788d8;
  border: 1px solid var(--fc-event-border-color, #3788d8);
  background-color: #3788d8;
  background-color: var(--fc-event-bg-color, #3788d8)

}

.fc-v-event .fc-event-main {
    color: #fff;
    color: var(--fc-event-text-color, #fff);
    height: 100%;
  }

.fc-v-event .fc-event-main-frame {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

.fc-v-event .fc-event-time {
    flex-grow: 0;
    flex-shrink: 0;
    max-height: 100%;
    overflow: hidden;
  }

.fc-v-event .fc-event-title-container { /* a container for the sticky cushion */
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 0; /* important for allowing to shrink all the way */
  }

.fc-v-event .fc-event-title { /* will have fc-sticky on it */
    top: 0;
    bottom: 0;
    max-height: 100%; /* clip overflow */
    overflow: hidden;
  }

.fc-v-event:not(.fc-event-start) {
    border-top-width: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

.fc-v-event:not(.fc-event-end) {
    border-bottom-width: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

.fc-v-event.fc-event-selected:before {
    /* expand hit area */
    left: -10px;
    right: -10px;
  }

.fc-v-event {

  /* resizer (mouse AND touch) */

}

.fc-v-event .fc-event-resizer-start {
    cursor: n-resize;
  }

.fc-v-event .fc-event-resizer-end {
    cursor: s-resize;
  }

.fc-v-event {

  /* resizer for MOUSE */

}

.fc-v-event:not(.fc-event-selected) .fc-event-resizer {
      height: 8px;
      height: var(--fc-event-resizer-thickness, 8px);
      left: 0;
      right: 0;
    }

.fc-v-event:not(.fc-event-selected) .fc-event-resizer-start {
      top: -4px;
      top: calc(var(--fc-event-resizer-thickness, 8px) / -2);
    }

.fc-v-event:not(.fc-event-selected) .fc-event-resizer-end {
      bottom: -4px;
      bottom: calc(var(--fc-event-resizer-thickness, 8px) / -2);
    }

.fc-v-event {

  /* resizer for TOUCH (when event is "selected") */

}

.fc-v-event.fc-event-selected .fc-event-resizer {
      left: 50%;
      margin-left: -4px;
      margin-left: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2);
    }

.fc-v-event.fc-event-selected .fc-event-resizer-start {
      top: -4px;
      top: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2);
    }

.fc-v-event.fc-event-selected .fc-event-resizer-end {
      bottom: -4px;
      bottom: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2);
    }
.fc .fc-timegrid .fc-daygrid-body { /* the all-day daygrid within the timegrid view */
    z-index: 2; /* put above the timegrid-body so that more-popover is above everything. TODO: better solution */
  }
.fc .fc-timegrid-divider {
    padding: 0 0 2px; /* browsers get confused when you set height. use padding instead */
  }
.fc .fc-timegrid-body {
    position: relative;
    z-index: 1; /* scope the z-indexes of slots and cols */
    min-height: 100%; /* fill height always, even when slat table doesn't grow */
  }
.fc .fc-timegrid-axis-chunk { /* for advanced ScrollGrid */
    position: relative /* offset parent for now-indicator-container */

  }
.fc .fc-timegrid-axis-chunk > table {
      position: relative;
      z-index: 1; /* above the now-indicator-container */
    }
.fc .fc-timegrid-slots {
    position: relative;
    z-index: 1;
  }
.fc .fc-timegrid-slot { /* a <td> */
    height: 1.5em;
    border-bottom: 0 /* each cell owns its top border */
  }
.fc .fc-timegrid-slot:empty:before {
      content: '\00a0'; /* make sure there's at least an empty space to create height for height syncing */
    }
.fc .fc-timegrid-slot-minor {
    border-top-style: dotted;
  }
.fc .fc-timegrid-slot-label-cushion {
    display: inline-block;
    white-space: nowrap;
  }
.fc .fc-timegrid-slot-label {
    vertical-align: middle; /* vertical align the slots */
  }
.fc {


  /* slots AND axis cells (top-left corner of view including the "all-day" text) */

}
.fc .fc-timegrid-axis-cushion,
  .fc .fc-timegrid-slot-label-cushion {
    padding: 0 4px;
  }
.fc {


  /* axis cells (top-left corner of view including the "all-day" text) */
  /* vertical align is more complicated, uses flexbox */

}
.fc .fc-timegrid-axis-frame-liquid {
    height: 100%; /* will need liquid-hack in FF */
  }
.fc .fc-timegrid-axis-frame {
    overflow: hidden;
    display: flex;
    align-items: center; /* vertical align */
    justify-content: flex-end; /* horizontal align. matches text-align below */
  }
.fc .fc-timegrid-axis-cushion {
    max-width: 60px; /* limits the width of the "all-day" text */
    flex-shrink: 0; /* allows text to expand how it normally would, regardless of constrained width */
  }
.fc-direction-ltr .fc-timegrid-slot-label-frame {
    text-align: right;
  }
.fc-direction-rtl .fc-timegrid-slot-label-frame {
    text-align: left;
  }
.fc-liquid-hack .fc-timegrid-axis-frame-liquid {
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  }
.fc .fc-timegrid-col.fc-day-today {
      background-color: rgba(255, 220, 40, 0.15);
      background-color: var(--fc-today-bg-color, rgba(255, 220, 40, 0.15));
    }
.fc .fc-timegrid-col-frame {
    min-height: 100%; /* liquid-hack is below */
    position: relative;
  }
.fc-media-screen.fc-liquid-hack .fc-timegrid-col-frame {
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
    }
.fc-media-screen .fc-timegrid-cols {
    position: absolute; /* no z-index. children will decide and go above slots */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
  }
.fc-media-screen .fc-timegrid-cols > table {
      height: 100%;
    }
.fc-media-screen .fc-timegrid-col-bg,
  .fc-media-screen .fc-timegrid-col-events,
  .fc-media-screen .fc-timegrid-now-indicator-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
.fc {

  /* bg */

}
.fc .fc-timegrid-col-bg {
    z-index: 2; /* TODO: kill */
  }
.fc .fc-timegrid-col-bg .fc-non-business { z-index: 1 }
.fc .fc-timegrid-col-bg .fc-bg-event { z-index: 2 }
.fc .fc-timegrid-col-bg .fc-highlight { z-index: 3 }
.fc .fc-timegrid-bg-harness {
    position: absolute; /* top/bottom will be set by JS */
    left: 0;
    right: 0;
  }
.fc {

  /* fg events */
  /* (the mirror segs are put into a separate container with same classname, */
  /* and they must be after the normal seg container to appear at a higher z-index) */

}
.fc .fc-timegrid-col-events {
    z-index: 3;
    /* child event segs have z-indexes that are scoped within this div */
  }
.fc {

  /* now indicator */

}
.fc .fc-timegrid-now-indicator-container {
    bottom: 0;
    overflow: hidden; /* don't let overflow of lines/arrows cause unnecessary scrolling */
    /* z-index is set on the individual elements */
  }
.fc-direction-ltr .fc-timegrid-col-events {
    margin: 0 2.5% 0 2px;
  }
.fc-direction-rtl .fc-timegrid-col-events {
    margin: 0 2px 0 2.5%;
  }
.fc-timegrid-event-harness {
  position: absolute /* top/left/right/bottom will all be set by JS */
}
.fc-timegrid-event-harness > .fc-timegrid-event {
    position: absolute; /* absolute WITHIN the harness */
    top: 0; /* for when not yet positioned */
    bottom: 0; /* " */
    left: 0;
    right: 0;
  }
.fc-timegrid-event-harness-inset .fc-timegrid-event,
.fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link {
  box-shadow: 0px 0px 0px 1px #fff;
  box-shadow: 0px 0px 0px 1px var(--fc-page-bg-color, #fff);
}
.fc-timegrid-event,
.fc-timegrid-more-link { /* events need to be root */
  font-size: .85em;
  font-size: var(--fc-small-font-size, .85em);
  border-radius: 3px;
}
.fc-timegrid-event { /* events need to be root */
  margin-bottom: 1px /* give some space from bottom */
}
.fc-timegrid-event .fc-event-main {
    padding: 1px 1px 0;
  }
.fc-timegrid-event .fc-event-time {
    white-space: nowrap;
    font-size: .85em;
    font-size: var(--fc-small-font-size, .85em);
    margin-bottom: 1px;
  }
.fc-timegrid-event-short .fc-event-main-frame {
    flex-direction: row;
    overflow: hidden;
  }
.fc-timegrid-event-short .fc-event-time:after {
    content: '\00a0-\00a0'; /* dash surrounded by non-breaking spaces */
  }
.fc-timegrid-event-short .fc-event-title {
    font-size: .85em;
    font-size: var(--fc-small-font-size, .85em)
  }
.fc-timegrid-more-link { /* does NOT inherit from fc-timegrid-event */
  position: absolute;
  z-index: 9999; /* hack */
  color: inherit;
  color: var(--fc-more-link-text-color, inherit);
  background: #d0d0d0;
  background: var(--fc-more-link-bg-color, #d0d0d0);
  cursor: pointer;
  margin-bottom: 1px; /* match space below fc-timegrid-event */
}
.fc-timegrid-more-link-inner { /* has fc-sticky */
  padding: 3px 2px;
  top: 0;
}
.fc-direction-ltr .fc-timegrid-more-link {
    right: 0;
  }
.fc-direction-rtl .fc-timegrid-more-link {
    left: 0;
  }
.fc {

  /* line */

}
.fc .fc-timegrid-now-indicator-line {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    border-style: solid;
    border-color: red;
    border-color: var(--fc-now-indicator-color, red);
    border-width: 1px 0 0;
  }
.fc {

  /* arrow */

}
.fc .fc-timegrid-now-indicator-arrow {
    position: absolute;
    z-index: 4;
    margin-top: -5px; /* vertically center on top coordinate */
    border-style: solid;
    border-color: red;
    border-color: var(--fc-now-indicator-color, red);
  }
.fc-direction-ltr .fc-timegrid-now-indicator-arrow {
    left: 0;

    /* triangle pointing right. TODO: mixin */
    border-width: 5px 0 5px 6px;
    border-top-color: transparent;
    border-bottom-color: transparent;
  }
.fc-direction-rtl .fc-timegrid-now-indicator-arrow {
    right: 0;

    /* triangle pointing left. TODO: mixin */
    border-width: 5px 6px 5px 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
  }


:root {
  --fc-list-event-dot-width: 10px;
  --fc-list-event-hover-bg-color: #f5f5f5;
}
.fc-theme-standard .fc-list {
    border: 1px solid #ddd;
    border: 1px solid var(--fc-border-color, #ddd);
  }
.fc {

  /* message when no events */

}
.fc .fc-list-empty {
    background-color: rgba(208, 208, 208, 0.3);
    background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center; /* vertically aligns fc-list-empty-inner */
  }
.fc .fc-list-empty-cushion {
    margin: 5em 0;
  }
.fc {

  /* table within the scroller */
  /* ---------------------------------------------------------------------------------------------------- */

}
.fc .fc-list-table {
    width: 100%;
    border-style: hidden; /* kill outer border on theme */
  }
.fc .fc-list-table tr > * {
    border-left: 0;
    border-right: 0;
  }
.fc .fc-list-sticky .fc-list-day > * { /* the cells */
      position: sticky;
      top: 0;
      background: #fff;
      background: var(--fc-page-bg-color, #fff); /* for when headers are styled to be transparent and sticky */
    }
.fc {

  /* only exists for aria reasons, hide for non-screen-readers */

}
.fc .fc-list-table thead {
    position: absolute;
    left: -10000px;
  }
.fc {

  /* the table's border-style:hidden gets confused by hidden thead. force-hide top border of first cell */

}
.fc .fc-list-table tbody > tr:first-child th {
    border-top: 0;
  }
.fc .fc-list-table th {
    padding: 0; /* uses an inner-wrapper instead... */
  }
.fc .fc-list-table td,
  .fc .fc-list-day-cushion {
    padding: 8px 14px;
  }
.fc {


  /* date heading rows */
  /* ---------------------------------------------------------------------------------------------------- */

}
.fc .fc-list-day-cushion:after {
  content: "";
  clear: both;
  display: table; /* clear floating */
    }
.fc-theme-standard .fc-list-day-cushion {
    background-color: rgba(208, 208, 208, 0.3);
    background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
  }
.fc-direction-ltr .fc-list-day-text,
.fc-direction-rtl .fc-list-day-side-text {
  float: left;
}
.fc-direction-ltr .fc-list-day-side-text,
.fc-direction-rtl .fc-list-day-text {
  float: right;
}
/* make the dot closer to the event title */
.fc-direction-ltr .fc-list-table .fc-list-event-graphic { padding-right: 0 }
.fc-direction-rtl .fc-list-table .fc-list-event-graphic { padding-left: 0 }
.fc .fc-list-event.fc-event-forced-url {
    cursor: pointer; /* whole row will seem clickable */
  }
.fc .fc-list-event:hover td {
    background-color: #f5f5f5;
    background-color: var(--fc-list-event-hover-bg-color, #f5f5f5);
  }
.fc {

  /* shrink certain cols */

}
.fc .fc-list-event-graphic,
  .fc .fc-list-event-time {
    white-space: nowrap;
    width: 1px;
  }
.fc .fc-list-event-dot {
    display: inline-block;
    box-sizing: content-box;
    width: 0;
    height: 0;
    border: 5px solid #3788d8;
    border: calc(var(--fc-list-event-dot-width, 10px) / 2) solid var(--fc-event-border-color, #3788d8);
    border-radius: 5px;
    border-radius: calc(var(--fc-list-event-dot-width, 10px) / 2);
  }
.fc {

  /* reset <a> styling */

}
#calendar a:not([href]) {
    pointer-events: none;
}
.fc .fc-list-event-title a {
    color: inherit;
    text-decoration: none;
  }
.fc {

  /* underline link when hovering over any part of row */

}
.fc .fc-list-event.fc-event-forced-url:hover a {
    text-decoration: underline;
  }



  .fc-theme-bootstrap a:not([href]) {
    color: inherit; /* natural color for navlinks */
  }
  
@media (max-width: 480px)
{
    .fc .fc-button{
        padding:2px;
    }
    .fc-direction-ltr .fc-toolbar > * > :not(:first-child) {
        margin-left: 2px;
    }
    .fc .fc-toolbar-title{
        font-size:1.1em;
    }
}
.ag-container * {
    position: relative;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/** views and thumbs **/
.ag-views div, .ag-thumbs > div {
    font-size: 0px;
    height: inherit;
    white-space: nowrap;
    list-style-type: none;
}
.ag-views div > img, .ag-thumbs div > img {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

/** views **/
.ag-view {
    width: 100%;
    overflow: hidden;
}
.ag-views {
    overflow: hidden;
}
.ag-compact .ag-views{
    height: auto;
}
.ag-index .ag-views{
    height:600px;
    min-height: 520px;
    overflow: hidden;
}
.ag-views > div {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
}
.ag-views div img {
    max-width: 100%;
    max-height: 520px;
    width: 100%;
    height: auto;
    object-fit:cover;
    object-position:center center;
}
.ag-views div picture img {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.welcome-section .ag-views div img {
    min-width: 100%;
    max-width: none;
    max-height: none;
    min-height: 100%;
}
.welcome-section .ag-views div {
    width: 100%;
    height: 100%;
}
.welcome-section .featured_school_name { font-weight: bolder; }
@media (min-width: 767px)  {
    .welcome-section .ag-views div picture img,.welcome-section .ag-views div > img {
        top:50%;
        left:0;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
}
/** thumbs **/
.ag-thumbs {
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
    position:relative;
    scroll-behavior: smooth;
}
.welcome-section .ag-thumbs{
    margin-top: 0;
}
.ag-thumbs-slider {
    font-size: 0;
    display: inline-block;
    overflow: hidden;
    width: auto;
    position: relative;
    left: 0;
}
.ag-thumbs-slider > div {
    display: inline-block;
    width: auto;
    height: 90px;
    overflow: hidden;
    cursor: pointer;
}
.ag-thumbs-slider > div > img {
    margin: 0px 2px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 100%;
    max-width: 200px;
    opacity: 0.75;
}
.ag-thumbs-slider img.ag-thumb-image{
    margin: 0 2px;
    opacity: .75;
    width:90px;
    height:90px;
    object-fit:cover;
    object-position:center top;
}
.ag-thumbs-current img.ag-thumb-image {
    opacity: 1 !important;
}
/** caption **/
.ag-text {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: inherit;
    height: 0;
    background-color: transparent;
    overflow: visible;
    z-index: 10;
    max-width: 100%;
}
.ag-title {
    /*display: -webkit-box;*/
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: inherit;
    background-color: transparent;
}
.ag-title > a {
    width: 100%;
    margin-left: 24px;
    font-size: 24px;
    color: #FFFFFF;
    text-shadow: 1px 1px #000000;
    font-weight: normal;
    outline-color: rgb(255, 255, 255);
    text-decoration: none;
}
.ag-caption-background {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQI12P4////fgAJuwO9HJmTBQAAAABJRU5ErkJggg==");
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.ag-caption {
    color: #000000;
    background-color: transparent;
    width: calc(100% - 24px);
    font-size: 15px;
    text-transform: none;
    font-weight: normal;
    margin-left: 24px;
}
.ag-star {
    display: none;
    width: 16px;
    height: 16px;
    margin-left: 5px;
    vertical-align: baseline;
    top: 10px;
    position: absolute;
}
.ag-text-background {
    width: 100%;
    /*height: inherit;*/
    background-color: transparent;
}
.ag-loading {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10;
}
.ag-previous img, .ag-next img, .ag-loading img {
    width: 3em;
    height: 3em;
}
.ag-previous {
    position: absolute;
    display: none;
    cursor: pointer;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    overflow: visible;
    z-index: 10;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}
.ag-next {
    position: absolute;
    display: none;
    cursor: pointer;
    top: 0;
    right: 3em;
    width: 0;
    height: 100%;
    overflow: visible;
    z-index: 10;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}
.ag-previous > div, .ag-next > div {
    background: rgba(245, 179, 79, 0.8);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
	justify-content: center;
    justify-content: center;
    transition: background 0.3s ease;
    cursor: pointer;
}
.ag-previous > div:hover, .ag-next > div:hover {
    background: rgba(245, 179, 79, 1);
}
.ag-previous img, .ag-next img {
    position: static;
    top: auto;
    filter: brightness(0) invert(1);
    width: 30px !important;
    height: 30px !important;
}
.ag-show {
    width: 100%;
}
.ag-slide-previous {
    transition: 1s;
    left: -100%;
}
.ag-slide-current {
    transition: 1s;
    left: 0;
}
.ag-slide-next {
    transition: 1s;
    left: 100%;
}
.ag-thumbs-current > img {
    opacity: 1 !important;
}
.ag-previous, .ag-next { display: none; }
.ag-hover:hover .ag-previous, .ag-hover:hover .ag-next { display: block; }
/**
    Loading animation start
*/
.ag-loading-block {
    background-color: #FFFFFF;
    border: 3px solid #575A5C;
    float: left;
    /*display: inline-block;*/
    height: 2em;
    margin-left: 0.4em;
    width: 0.6em;
    opacity: 0.3;
    -webkit-animation-name: ag-loading-blocks;
    -webkit-animation-duration: 1.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: reverse;
    -webkit-transform: scale(0.7);
    -ms-animation-name: ag-loading-blocks;
    -ms-animation-duration: 1.3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: reverse;
    -ms-transform: scale(0.7);
    animation-name: ag-loading-blocks;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-timing-function: linear;
    transform: scale(0.7);
}

#ag-load-block-1 {
    -webkit-animation-delay: 0.39s;
    animation-delay: 0.39s;
}

#ag-load-block-2 {
    -webkit-animation-delay: 0.52s;
    animation-delay: 0.52s;
}

#ag-load-block-3 {
    -webkit-animation-delay: 0.65s;
    animation-delay: 0.65s;
}

@-webkit-keyframes ag-loading-blocks {
    0% {
        -webkit-transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(0.7);
        opacity: 0.3;
    }
}

@keyframes ag-loading-blocks {
    0% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(0.7);
        opacity: 0.3
    }
}
/* Loading animation end */
/* redesign */
.ag-redesign .ag-previous, .ag-redesign .ag-next { 
    display: block; 
    z-index: 99;
}
.ag-redesign{
    margin:20px 0 10px;
}
.welcome-section .ag-redesign,.sec-gallery-wrapper .ag-redesign{
    margin:0;
}
.ag-redesign.ag-compact .ag-title {
    text-transform: uppercase;
}
.ag-redesign.ag-index .ag-thumbs {
    height: 0px;
}
.ag-redesign .ag-caption {
    color: white;
}
.ag-redesign .ag-previous img, .ag-redesign .ag-next img {
    position: static;
    width: 40px;
    height: 40px;
    filter: brightness(0) invert(1);
    transform: rotate(180deg);
}
.ag-redesign .ag-previous > div, .ag-redesign .ag-next > div {
    background: rgba(245, 179, 79, 0.8);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
	justify-content: center;
    justify-content: center;
    transition: background 0.3s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.ag-redesign .ag-previous > div:hover, .ag-redesign .ag-next > div:hover {
    background: rgba(245, 179, 79, 1);
}
.ag-redesign .ag-next {
    right: 70px;
}
.ag-redesign .ag-previous {
    left: 0;
}
.ag-redesign .ag-loading-block {
    background-color: #f5b34f;
    border: 3px solid #f5b34f;
}
/* override on index */
.ag-redesign.ag-index {
    margin: 0;
    max-width: none;
}
.ag-redesign.ag-index .ag-views > div {
    background-color: black;
}
.ag-redesign.ag-index .ag-views img {
    opacity: 0.4;
}
.ag-redesign .ag-star {
    display: none;
}
.ag-redesign.ag-index .ag-title {
    background-color: rgba(0,0,0,0.6);
    text-align: center;
    padding: 20px 0 20px 0;
}
.ag-redesign.ag-index .ag-title > a {
    margin-left: 0px;
    margin: 0 32px 0 32px;
    font-size: 18px;
    text-shadow: none;
}
.ag-redesign.ag-compact .ag-title > a {
    font-size: 22px;
    font-weight: 700;
    text-shadow: none;
}
.ag-redesign.ag-compact .ag-text-background {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wcDFAkWsRByEAAAAA1JREFUCNdjkOs5ehMABIQCSYOeLqkAAAAASUVORK5CYII=');
    padding: 20px 0;
}
.ag-redesign .ag-previous, .ag-redesign .ag-next {
    display: block;
}
.ag-redesign .ag-caption {
    font-size: 18px;
}
.ag-redesign .ag-caption-background {
    background: transparent;
    padding-top: 2px;
    padding-bottom: 2px;
}
@media (min-width: 767px) and (max-width:1200px)
{
    .ag-compact .ag-views{
        height:460px;
    }
    .ag-index .ag-views{
        height:560px;
    }
}
@media (max-width: 981px) {
    .ag-compact .ag-views{
        height:320px;
    }
    .ag-index .ag-views{
        height:740px;
    }
    .ag-title > a {
        font-size: 16px;
    }
    .ag-redesign.ag-compact .ag-caption {
        font-size: 14px;
    }
    .ag-redesign .ag-caption-background {
        display: none;
    }
}
@media (max-width: 767px){
    .ag-redesign{
        margin:10px 0;
    }
    .ag-compact .ag-views{
        height:260px;
    }
    .ag-index .ag-views{
        height:775px;
    }
    .ag-redesign.ag-compact .ag-title > a{
        font-size: 14px;
    }
    .ag-redesign.ag-compact .ag-text-background{
        padding: 10px 0;
    }
}
@media (max-width: 480px) {
    .ag-compact .ag-views{
        height:230px;
    }
    .ag-redesign.ag-index .ag-previous, .ag-redesign.ag-index .ag-next {
        width: 50px;
        z-index: 11;
    }
    .ag-redesign.ag-index .ag-next {
        right: 0px;
    }
    .ag-redesign .ag-next {
        right: 55px;
    }
    .ag-redesign .ag-previous > div, .ag-redesign .ag-next > div {
        width: 55px;
        height: 55px;
    }
    .ag-redesign .ag-previous img, .ag-redesign .ag-next img {
        width: 30px;
        height: 30px;
    }
    .ag-redesign.ag-index .ag-previous img, .ag-redesign.ag-index .ag-next img {
        top: calc(100% - 91px);
        z-index: 11;
    }
    .ag-redesign.ag-index .ag-text > div {
        top: -91px !important;
        height: 91px !important;
    }
    .ag-redesign.ag-index .ag-title {
        height: 91px !important;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
	justify-content: center;
        align-items: center;
	justify-content: center;
        justify-content: center;
        padding: 0;
    }
    .ag-redesign.ag-index .ag-title > a {
        /* width: 100%;*/
        margin: 0 50px;
    }
    .ag-redesign .ag-caption-background {
        display: none;
    }
}

/* Photo Gallery Popup Styles */
.ag-popup-wrapper {
	max-width: 95vw;
	margin: 20px auto;
	background: #000;
	padding: 20px;
	box-sizing: border-box;
}

.ag-popup-wrapper .ag-container {
	margin: 0;
	max-width: 100%;
}

.ag-popup-wrapper .ag-views {
	height: auto;
	max-height: 70vh;
}

.ag-popup-wrapper .ag-views div img {
	max-height: 70vh;
	object-fit: contain;
}

.ag-popup-wrapper .ag-thumbs {
	margin-top: 20px;
}

/* Ensure popup is centered and responsive */
@media (max-width: 767px) {
	.ag-popup-wrapper {
		padding: 10px;
		max-width: 100vw;
		margin: 10px auto;
	}

	.ag-popup-wrapper .ag-views {
		max-height: 60vh;
	}

	.ag-popup-wrapper .ag-views div img {
		max-height: 60vh;
	}
}

/* View all photos button styling */
.view-all-photos-btn-wrapper {
	text-align: right;
	padding: 15px 0;
	width: 100%;
}

.view-all-photos-btn {
	background: rgba(245, 179, 79, 0.8);
	color: #fff;
	border: none;
	padding: 12px 30px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.3s ease;
}

.view-all-photos-btn:hover {
	background: rgba(224, 154, 48, 0.9);
}

.view-all-photos-btn:active {
	background: rgba(208, 136, 32, 1);
}

/* Magnific Popup custom styles for photo gallery */
.mfp-zoom-in .mfp-content {
	opacity: 0;
	transition: all 0.3s ease-in-out;
	transform: scale(0.8);
}

.mfp-zoom-in.mfp-ready .mfp-content {
	opacity: 1;
	transform: scale(1);
}

.mfp-zoom-in.mfp-removing .mfp-content {
	opacity: 0;
	transform: scale(0.8);
}

.mfp-zoom-in.mfp-bg {
	opacity: 0;
	transition: all 0.3s ease-out;
}

.mfp-zoom-in.mfp-ready.mfp-bg {
	opacity: 0.9;
}

.mfp-zoom-in.mfp-removing.mfp-bg {
	opacity: 0;
}

/* ============================================
   School Photo Lightbox
   Custom lightbox replacement for Magnific Popup
   ============================================ */

/* Transparent overlay - darkens the background */
.school-lightbox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-content: center;
}

/* Black container - the actual popup */
.school-lightbox-overlay .lightbox-container {
	position: relative;
	background: #000;
	width: 95%;
	max-width: 1180px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	padding: 20px;
	box-sizing: border-box;
}

.school-lightbox-overlay .lightbox-close {
	position: absolute;
	top: 10px;
	right: 15px;
	background: none;
	border: none;
	color: #fff;
	font-size: 36px;
	cursor: pointer;
	z-index: 10;
	line-height: 1;
	padding: 5px 10px;
	opacity: 0.8;
	transition: opacity 0.2s;
}

.school-lightbox-overlay .lightbox-close:hover {
	opacity: 1;
}

.school-lightbox-overlay .lightbox-prev,
.school-lightbox-overlay .lightbox-next {
	position: absolute;
	top: 50%;
	margin-top: -55px;
	width: 90px;
	height: 110px;
	cursor: pointer;
	z-index: 10;
	background: transparent;
	border: none;
	padding: 0;
	opacity: 0.65;
	transition: opacity 0.2s ease;
}

.school-lightbox-overlay .lightbox-prev:hover,
.school-lightbox-overlay .lightbox-next:hover {
	opacity: 1;
}

/* Hide the img elements, use CSS triangles instead */
.school-lightbox-overlay .lightbox-prev img,
.school-lightbox-overlay .lightbox-next img {
	display: none;
}

/* Triangle arrows using CSS borders */
.school-lightbox-overlay .lightbox-prev:before,
.school-lightbox-overlay .lightbox-prev:after,
.school-lightbox-overlay .lightbox-next:before,
.school-lightbox-overlay .lightbox-next:after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: 50%;
	margin-top: -25px;
	border-top: 21px solid transparent;
	border-bottom: 21px solid transparent;
}

/* Left arrow */
.school-lightbox-overlay .lightbox-prev:after {
	border-right: 17px solid #FFF;
	left: 26px;
}
.school-lightbox-overlay .lightbox-prev:before {
	border-right: 19px solid #3F3F3F;
	left: 24px;
	margin-top: -27px;
	border-top: 23px solid transparent;
	border-bottom: 23px solid transparent;
}

/* Right arrow */
.school-lightbox-overlay .lightbox-next:after {
	border-left: 17px solid #FFF;
	right: 26px;
}
.school-lightbox-overlay .lightbox-next:before {
	border-left: 19px solid #3F3F3F;
	right: 24px;
	margin-top: -27px;
	border-top: 23px solid transparent;
	border-bottom: 23px solid transparent;
}

.school-lightbox-overlay .lightbox-prev {
	left: 0;
}

.school-lightbox-overlay .lightbox-next {
	right: 0;
}

.school-lightbox-overlay .lightbox-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex: 1 1 auto;
	min-height: auto;
}

.school-lightbox-overlay .lightbox-image-wrapper {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-height: auto;
	width: auto;
	max-width: 100%;
}

.school-lightbox-overlay .lightbox-picture {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-content: center;
	max-height: 100%;
	max-width: 100%;
}

.school-lightbox-overlay .lightbox-image {
	max-width: 100%;
	max-height: calc(100vh - 280px);
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.3s;
}

.school-lightbox-overlay .lightbox-image.loaded {
	opacity: 1;
}

/* Slide animations */
.school-lightbox-overlay .lightbox-picture.slide-out-left {
	animation: slideOutLeft 0.15s ease-in forwards;
}

.school-lightbox-overlay .lightbox-picture.slide-out-right {
	animation: slideOutRight 0.15s ease-in forwards;
}

.school-lightbox-overlay .lightbox-picture.slide-in-right {
	animation: slideInRight 0.25s ease-out forwards;
}

.school-lightbox-overlay .lightbox-picture.slide-in-left {
	animation: slideInLeft 0.25s ease-out forwards;
}

@keyframes slideOutLeft {
	from { transform: translateX(0); opacity: 1; }
	to { transform: translateX(-100px); opacity: 0; }
}

@keyframes slideOutRight {
	from { transform: translateX(0); opacity: 1; }
	to { transform: translateX(100px); opacity: 0; }
}

@keyframes slideInRight {
	from { transform: translateX(100px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
	from { transform: translateX(-100px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

.school-lightbox-overlay .lightbox-loading {
	position: absolute;
	color: #fff;
	font-size: 16px;
	display: none;
}

.school-lightbox-overlay .lightbox-loading.visible {
	display: block;
}

.school-lightbox-overlay .lightbox-caption-wrapper {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(30, 140, 197, 0.85);
	box-sizing: border-box;
	z-index: 5;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 12px 25px;
}

.school-lightbox-overlay .lightbox-caption {
	color: #fff;
	text-align: left;
	font-size: 16px;
	line-height: 1.4;
	flex: 1;
}

.school-lightbox-overlay .lightbox-thumbs-wrapper {
	display: flex;
	flex-direction: column;
	background: rgba(30, 140, 197, 0.85);
	padding: 12px 25px 15px;
}

.school-lightbox-overlay .lightbox-counter {
	color: #fff;
	font-size: 14px;
	white-space: nowrap;
	text-align: right;
	margin-top: 10px;
}

.school-lightbox-overlay .lightbox-thumbs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	max-width: 100%;
	justify-content: flex-start;
	flex-wrap: nowrap;
	/* Hide scrollbar but keep scrolling */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}
.school-lightbox-overlay .lightbox-thumbs::-webkit-scrollbar {
	display: none; /* Chrome/Safari/Opera */
}

.school-lightbox-overlay .lightbox-thumb {
	width: 105px;
	height: 77px;
	min-width: 105px;
	object-fit: cover;
	cursor: pointer;
	opacity: 0.85;
	border: 2px solid transparent;
	transition: opacity 0.2s, border-color 0.2s;
	border-radius: 4px;
}

.school-lightbox-overlay .lightbox-thumb:hover {
	opacity: 1;
}

.school-lightbox-overlay .lightbox-thumb.active {
	opacity: 1;
	border-color: #1b9aaa;
}

/* Hide arrows when only 1 image */
.school-lightbox-overlay.single-image .lightbox-prev,
.school-lightbox-overlay.single-image .lightbox-next,
.school-lightbox-overlay.single-image .lightbox-thumbs {
	display: none;
}

/* Responsive */
@media (max-width: 767px) {
	.school-lightbox-overlay {
		padding: 0;
		background: #000;
		align-items: stretch;
	}

	.school-lightbox-overlay .lightbox-container {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		padding: 0;
		border-radius: 0;
		box-sizing: border-box;
	}

	.school-lightbox-overlay .lightbox-content {
		flex: 1;
		justify-content: center;
	}

	.school-lightbox-overlay .lightbox-prev,
	.school-lightbox-overlay .lightbox-next {
		width: 50px;
		height: 70px;
		top: 50%;
		margin-top: -35px;
	}

	/* Smaller triangles on mobile */
	.school-lightbox-overlay .lightbox-prev:before,
	.school-lightbox-overlay .lightbox-prev:after,
	.school-lightbox-overlay .lightbox-next:before,
	.school-lightbox-overlay .lightbox-next:after {
		margin-top: -15px;
		border-top: 14px solid transparent;
		border-bottom: 14px solid transparent;
	}

	.school-lightbox-overlay .lightbox-prev:after {
		border-right-width: 12px;
		left: 12px;
	}
	.school-lightbox-overlay .lightbox-prev:before {
		border-right-width: 14px;
		left: 10px;
		margin-top: -16px;
		border-top-width: 15px;
		border-bottom-width: 15px;
	}

	.school-lightbox-overlay .lightbox-next:after {
		border-left-width: 12px;
		right: 12px;
	}
	.school-lightbox-overlay .lightbox-next:before {
		border-left-width: 14px;
		right: 10px;
		margin-top: -16px;
		border-top-width: 15px;
		border-bottom-width: 15px;
	}

	.school-lightbox-overlay .lightbox-prev {
		left: 0;
	}

	.school-lightbox-overlay .lightbox-next {
		right: 0;
	}

	.school-lightbox-overlay .lightbox-image {
		max-height: calc(100vh - 140px);
		max-width: 100vw;
		width: auto;
		height: auto;
	}

	.school-lightbox-overlay .lightbox-thumb {
		width: 55px;
		height: 42px;
		min-width: 55px;
	}

	.school-lightbox-overlay .lightbox-thumbs {
		padding: 6px 8px;
		margin-top: 0;
		gap: 3px;
	}

	.school-lightbox-overlay .lightbox-caption {
		padding: 8px 12px;
		font-size: 12px;
	}

	.school-lightbox-overlay .lightbox-close {
		position: fixed;
		top: 70px;
		right: 10px;
		font-size: 24px;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
	justify-content: center;
		justify-content: center;
		padding: 0;
		z-index: 100000;
	}
}

/* Mobile landscape orientation */
@media (max-width: 926px) and (max-height: 500px) and (orientation: landscape) {
	.school-lightbox-overlay {
		padding: 0;
		background: #000;
		align-items: stretch;
	}

	.school-lightbox-overlay .lightbox-container {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		padding: 0;
		flex-direction: row;
	}

	.school-lightbox-overlay .lightbox-content {
		flex: 1;
		height: 100%;
	}

	.school-lightbox-overlay .lightbox-image {
		max-height: 100vh;
		max-width: 75vw;
	}

	.school-lightbox-overlay .lightbox-thumbs {
		flex-direction: column;
		height: 100%;
		width: auto;
		max-width: 100px;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 5px;
		gap: 3px;
	}

	.school-lightbox-overlay .lightbox-thumb {
		width: 60px;
		height: 45px;
		min-width: 60px;
		min-height: 45px;
	}

	.school-lightbox-overlay .lightbox-caption {
		font-size: 11px;
		padding: 6px 10px;
	}

	.school-lightbox-overlay .lightbox-prev,
	.school-lightbox-overlay .lightbox-next {
		width: 35px;
		height: 35px;
	}

	.school-lightbox-overlay .lightbox-prev img,
	.school-lightbox-overlay .lightbox-next img {
		width: 18px;
		height: 18px;
	}

	.school-lightbox-overlay .lightbox-next {
		right: 110px;
	}

	.school-lightbox-overlay .lightbox-close {
		position: fixed;
		top: 5px;
		right: 5px;
		width: 36px;
		height: 36px;
		font-size: 22px;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		display: flex;
		align-items: center;
	justify-content: center;
		justify-content: center;
		z-index: 100001;
	}
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
    }
.leaflet-container {
    overflow: hidden;
    }
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
      -webkit-user-drag: none;
    }
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
    background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
    image-rendering: -webkit-optimize-contrast;
    }
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
    width: 1600px;
    height: 1600px;
    -webkit-transform-origin: 0 0;
    }
.leaflet-marker-icon,
.leaflet-marker-shadow {
    display: block;
    }
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
    max-width: none !important;
    max-height: none !important;
    }
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
    max-width: none !important;
    max-height: none !important;
    width: auto;
    padding: 0;
    }

.leaflet-container img.leaflet-tile {
    /* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
    mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
    -ms-touch-action: pan-x pan-y;
    touch-action: pan-x pan-y;
    }
.leaflet-container.leaflet-touch-drag {
    -ms-touch-action: pinch-zoom;
    /* Fallback for FF which doesn't support pinch-zoom */
    touch-action: none;
    touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
    -ms-touch-action: none;
    touch-action: none;
}
.leaflet-container {
    -webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
    -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
    filter: inherit;
    visibility: hidden;
    }
.leaflet-tile-loaded {
    visibility: inherit;
    }
.leaflet-zoom-box {
    width: 0;
    height: 0;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    z-index: 800;
    }
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
    -moz-user-select: none;
    }

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
    width: 1px;
    height: 1px;
    }
.lvml {
    behavior: url(#default#VML);
    display: inline-block;
    position: absolute;
    }


/* control positioning */

.leaflet-control {
    position: relative;
    z-index: 800;
    pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
    pointer-events: auto;
    }
.leaflet-top,
.leaflet-bottom {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    }
.leaflet-top {
    top: 0;
    }
.leaflet-right {
    right: 0;
    }
.leaflet-bottom {
    bottom: 0;
    }
.leaflet-left {
    left: 0;
    }
.leaflet-control {
    float: left;
    clear: both;
    }
.leaflet-right .leaflet-control {
    float: right;
    }
.leaflet-top .leaflet-control {
    margin-top: 10px;
    }
.leaflet-bottom .leaflet-control {
    margin-bottom: 10px;
    }
.leaflet-left .leaflet-control {
    margin-left: 10px;
    }
.leaflet-right .leaflet-control {
    margin-right: 10px;
    }


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
    opacity: 0;
    -webkit-transition: opacity 0.2s linear;
       -moz-transition: opacity 0.2s linear;
            transition: opacity 0.2s linear;
    }
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
    opacity: 1;
    }
.leaflet-zoom-animated {
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    }
svg.leaflet-zoom-animated {
    will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
    -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
       -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
            transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
    }
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
    -webkit-transition: none;
       -moz-transition: none;
            transition: none;
    }

.leaflet-zoom-anim .leaflet-zoom-hide {
    visibility: hidden;
    }


/* cursors */

.leaflet-interactive {
    cursor: pointer;
    }
.leaflet-grab {
    cursor: -webkit-grab;
    cursor:    -moz-grab;
    cursor:         grab;
    }
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
    cursor: crosshair;
    }
.leaflet-popup-pane,
.leaflet-control {
    cursor: auto;
    }
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    cursor:         grabbing;
    }

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
    pointer-events: none;
    }

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
    pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
    pointer-events: auto;
    }

/* visual tweaks */

.leaflet-container {
    background: #ddd;
    outline-offset: 1px;
    }
.leaflet-container a {
    color: #0078A8;
    }
.leaflet-zoom-box {
    border: 2px dotted #38f;
    background: rgba(255,255,255,0.5);
    }


/* general typography */
.leaflet-container {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.5;
    }


/* general toolbar styles */

.leaflet-bar {
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-radius: 4px;
    }
.leaflet-bar a {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: black;
    }
.leaflet-bar a,
.leaflet-control-layers-toggle {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    }
.leaflet-bar a:hover,
.leaflet-bar a:focus {
    background-color: #f4f4f4;
    }
.leaflet-bar a:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    }
.leaflet-bar a:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: none;
    }
.leaflet-bar a.leaflet-disabled {
    cursor: default;
    background-color: #f4f4f4;
    color: #bbb;
    }

.leaflet-touch .leaflet-bar a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    }
.leaflet-touch .leaflet-bar a:first-child {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    }
.leaflet-touch .leaflet-bar a:last-child {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    }

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    font: bold 18px 'Lucida Console', Monaco, monospace;
    text-indent: 1px;
    }

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
    font-size: 22px;
    }


/* layers control */

.leaflet-control-layers {
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    background: #fff;
    border-radius: 5px;
    }
.leaflet-control-layers-toggle {
    background-image: url(images/layers.png);
    width: 36px;
    height: 36px;
    }
.leaflet-retina .leaflet-control-layers-toggle {
    background-image: url(images/layers-2x.png);
    background-size: 26px 26px;
    }
.leaflet-touch .leaflet-control-layers-toggle {
    width: 44px;
    height: 44px;
    }
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display: none;
    }
.leaflet-control-layers-expanded .leaflet-control-layers-list {
    display: block;
    position: relative;
    }
.leaflet-control-layers-expanded {
    padding: 6px 10px 6px 6px;
    color: #333;
    background: #fff;
    }
.leaflet-control-layers-scrollbar {
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 5px;
    }
.leaflet-control-layers-selector {
    margin-top: 2px;
    position: relative;
    top: 1px;
    }
.leaflet-control-layers label {
    display: block;
    font-size: 13px;
    font-size: 1.08333em;
    }
.leaflet-control-layers-separator {
    height: 0;
    border-top: 1px solid #ddd;
    margin: 5px -10px 5px -6px;
    }

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
    background-image: url(images/marker-icon.png);
    }


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
    background: #fff;
    background: rgba(255, 255, 255, 0.8);
    margin: 0;
    }
.leaflet-control-attribution,
.leaflet-control-scale-line {
    padding: 0 5px;
    color: #333;
    line-height: 1.4;
    }
.leaflet-control-attribution a {
    text-decoration: none;
    }
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
    text-decoration: underline;
    }
.leaflet-attribution-flag {
    display: inline !important;
    vertical-align: baseline !important;
    width: 1em;
    height: 0.6669em;
    }
.leaflet-left .leaflet-control-scale {
    margin-left: 5px;
    }
.leaflet-bottom .leaflet-control-scale {
    margin-bottom: 5px;
    }
.leaflet-control-scale-line {
    border: 2px solid #777;
    border-top: none;
    line-height: 1.1;
    padding: 2px 5px 1px;
    white-space: nowrap;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    background: rgba(255, 255, 255, 0.8);
    text-shadow: 1px 1px #fff;
    }
.leaflet-control-scale-line:not(:first-child) {
    border-top: 2px solid #777;
    border-bottom: none;
    margin-top: -2px;
    }
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
    border-bottom: 2px solid #777;
    }

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    box-shadow: none;
    }
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    border: 2px solid rgba(0,0,0,0.2);
    background-clip: padding-box;
    }


/* popup */

.leaflet-popup {
    position: absolute;
    text-align: center;
    margin-bottom: 20px;
    }
.leaflet-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 12px;
    }
.leaflet-popup-content {
    margin: 13px 24px 13px 20px;
    line-height: 1.3;
    font-size: 13px;
    font-size: 1.08333em;
    min-height: 1px;
    }
.leaflet-popup-content p {
    margin: 17px 0;
    margin: 1.3em 0;
    }
.leaflet-popup-tip-container {
    width: 40px;
    height: 20px;
    position: absolute;
    left: 50%;
    margin-top: -1px;
    margin-left: -20px;
    overflow: hidden;
    pointer-events: none;
    }
.leaflet-popup-tip {
    width: 17px;
    height: 17px;
    padding: 1px;

    margin: -10px auto 0;
    pointer-events: auto;

    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: white;
    color: #333;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
    }
.leaflet-container a.leaflet-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    text-align: center;
    width: 24px;
    height: 24px;
    font: 16px/24px Tahoma, Verdana, sans-serif;
    color: #757575;
    text-decoration: none;
    background: transparent;
    }
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
    color: #585858;
    }
.leaflet-popup-scrolled {
    overflow: auto;
    }

.leaflet-oldie .leaflet-popup-content-wrapper {
    -ms-zoom: 1;
    }
.leaflet-oldie .leaflet-popup-tip {
    width: 24px;
    margin: 0 auto;

    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
    }

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
    border: 1px solid #999;
    }


/* div icon */

.leaflet-div-icon {
    background: #fff;
    border: 1px solid #666;
    }


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
    position: absolute;
    padding: 6px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #222;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
.leaflet-tooltip.leaflet-interactive {
    cursor: pointer;
    pointer-events: auto;
    }
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    position: absolute;
    pointer-events: none;
    border: 6px solid transparent;
    background: transparent;
    content: "";
    }

/* Directions */

.leaflet-tooltip-bottom {
    margin-top: 6px;
}
.leaflet-tooltip-top {
    margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
    left: 50%;
    margin-left: -6px;
    }
.leaflet-tooltip-top:before {
    bottom: 0;
    margin-bottom: -12px;
    border-top-color: #fff;
    }
.leaflet-tooltip-bottom:before {
    top: 0;
    margin-top: -12px;
    margin-left: -6px;
    border-bottom-color: #fff;
    }
.leaflet-tooltip-left {
    margin-left: -6px;
}
.leaflet-tooltip-right {
    margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    top: 50%;
    margin-top: -6px;
    }
.leaflet-tooltip-left:before {
    right: 0;
    margin-right: -12px;
    border-left-color: #fff;
    }
.leaflet-tooltip-right:before {
    left: 0;
    margin-left: -12px;
    border-right-color: #fff;
    }

/* Printing */

@media print {
/* Prevent printers from removing background-images of controls. */
    .leaflet-control {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
    -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
    -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
    -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
    transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
    /* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
    -webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
    -moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
    -o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
    transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}.leaflet-bar button,
.leaflet-bar button:hover {
  background-color: #fff;
  border: none;
  border-bottom: 1px solid #ccc;
  width: 26px;
  height: 26px;
  line-height: 26px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: black;
}

.leaflet-bar button {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
}

.leaflet-bar button:hover {
  background-color: #f4f4f4;
}

.leaflet-bar button:first-of-type {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.leaflet-bar button:last-of-type {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: none;
}

.leaflet-bar.disabled,
.leaflet-bar button.disabled {
  cursor: default;
  pointer-events: none;
  opacity: .4;
}

.easy-button-button .button-state{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.leaflet-touch .leaflet-bar button {
  width: 30px;
  height: 30px;
  line-height: 30px;
}.marker-description {
    font-size:14px;
    text-align: center;
}
.full-map-wrapper,.mini-map-wrapper {
    margin:20px 0;
}
.mini-map {
    width:100%;
    height:280px;
    border: 1px solid #D0D0D0;
    border-radius: 5px;
    z-index: 0;
}
.full-map{
    width:100%;
    height:400px;
    border:solid 1px #000;
}
.rs-map{
    height: 250px;
    width: 100%;
}
/* Mobile map lazy loading */
.mobile-map-screenshot {
	display: block;
	width: 100%;
	height: auto;
	cursor: pointer;
	transition: opacity 0.2s ease;
	border-radius: 4px;
	border: 1px solid #D0D0D0;
	object-fit: cover;
	object-position: center;
	max-width: 100%;
}

.mobile-map-screenshot:hover {
	opacity: 0.85;
}

.mobile-map-lazy-container {
	width: 100%;
	min-height: 280px;
}

/* Desktop map lazy loading */
.map-screenshot-desktop {
	display: block;
	width: 100%;
	height: auto;
	cursor: pointer;
	transition: opacity 0.2s ease;
	border-radius: 4px;
	border: 1px solid #D0D0D0;
	object-fit: cover;
	object-position: center;
	max-width: 100%;
}

.map-screenshot-desktop:hover {
	opacity: 0.85;
}

.map-lazy-container {
	width: 100%;
	height: 280px;
}
/* RS map container: match rs-map height to prevent extra spacing on swap */
#rs-map-container {
	height: 250px;
}

#map-container {
	width: 100%;
	height: 280px;
}

/* Related Schools (RS) map lazy loading */
.rs-map-screenshot {
	display: block;
	width: 100%;
	height: auto;
	cursor: pointer;
	transition: opacity 0.2s ease;
	border-radius: 10px;
	border: 1px solid #D0D0D0;
	object-fit: cover;
	object-position: left top;
	max-width: 100%;
	background-color: #f2efe9;
}

.rs-map-screenshot:hover {
	opacity: 0.85;
}

@media (max-width: 767px){
    .full-map-wrapper{
        padding:0 10px;
        margin:10px 0;
    }
    .mini-map-wrapper{
        margin:10px 0;
    }
    .full-map {
        height: 250px;
    }
    #mobile-map.mini-map {
        height:175px;
    }
    .st-member-full-map{
        height:500px;
        border:solid 1px #000;
        clear:both;
        margin-bottom: 5px;
    }
	.mobile-map-lazy-container {
		min-height: 175px;
	}
}.racial-color::before{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
}
.racial-color.racial-color1::before{
    background-color: #9c59b8;
}
.racial-color.racial-color2::before{
    background-color: #cb5a5e;
}
.racial-color.racial-color3::before{
    background-color: #68c3a3;
}
.racial-color.racial-color4::before{
    background-color: #d55401;
}
.racial-color.racial-color5::before{
    background-color: #1e8bc3;
}
.racial-color.racial-color6::before{
    background-color: #cf2413;
}
.racial-color.racial-color7::before{
    background-color: #f4b350;
}
.racial-color.racial-color8::before{
    background-color: #3c856b;
}

/*rec size*/
.rec-size{
    position:relative;
    display: inline-block;
    width:10px;
    height: 10px;
}
.rec-color1{
    background-color:#9c59b8;
}
.rec-color2{
    background-color:#cb5a5e;
}
.rec-color3{
    background-color:#68c3a3;
}
.rec-color4{
    background-color:#d55401;
}
.rec-color5{
    background-color:#1E8BC3;
}
.rec-color6{
    background-color:#CF2413  ;
}
.rec-color7{
    background-color:#F4B350;
}
.rec-color8{
    background-color:#3C856B;
}
.js-plotly-plot .plotly .modebar-btn[data-title="Download plot as a png"] .icon path {
    fill: rgba(242, 242, 242, 1.0) !important;
}
.js-plotly-plot .plotly .modebar-btn[data-title="Download plot as a png"]:hover .icon path {
    fill: rgba(68, 68, 68, 0.3) !important;
}
.js-plotly-plot .plotly .draglayer.cursor-crosshair{
    cursor: default !important;
}
.js-plotly-plot .plotly .cursor-ew-resize,.js-plotly-plot .plotly .cursor-w-resize,.js-plotly-plot .plotly .cursor-e-resize,.js-plotly-plot .plotly .cursor-ns-resize,.js-plotly-plot .plotly .cursor-s-resize,.js-plotly-plot .plotly .cursor-n-resize,.js-plotly-plot .plotly .cursor-sw-resize,.js-plotly-plot .plotly .cursor-se-resize,.js-plotly-plot .plotly .legendtoggle{
    cursor:default !important;
}
.chart_nav_bar {
    line-height: 0px;
    width: auto;
    font-size: 16px;
    bottom: 13px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0);
}
.chart_nav_bar.large_device{
    display: block;
    text-align: right;
    position:absolute;
}
.chart_nav_bar.small_device{
    display: none;
    text-align: center;
    position:relative;
}
.chart_nav_item {
    display: inline-block;
    text-align: center;
    color: #1E8BC3;
    cursor: pointer;
    text-decoration:none;
    font-weight:normal;
    font-size: 14px;
}
.chart_nav_item:before {
    content: "";
    border: 1px solid #f4b350;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin: 7px 10px 0 0;
}
.chart_nav_item:hover,.chart_nav_item:active{
    text-decoration:none;
    color: #1E8BC3;
}
.chart_nav_item.active {
    /* Standard brand blue. Was #119DFF, an off-palette bright blue the expanded
       ("View Data") state turned the link — Javier 2026-06-28: "the blue color
       of the arrows should fit our style guide / use existing blue color." */
    color: #1E8BC3;
    text-decoration:none;
    font-weight: normal;
}
.chart_nav_item.active:before {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
.nav-content-sec{
    display:none;
}
.nav-content-sec.active{
    display:block;
    max-width: 100%;
}
table.min-chart-datatable{
    table-layout: fixed;
    /* Javier 2026-05-22: cap width at 90% (was 100%) so the table doesn't
       extend wider than the Plotly chart above it — Plotly renders the
       chart with internal margins that make it appear narrower than its
       container. Centered via margin: 0 auto. */
    width: 90%;
    max-width: 100%;
    box-sizing:border-box;
    border-collapse: collapse;
    border-color: inherit;
    text-indent: 0;
    margin: 0px auto 15px;
    text-align: center;
    /* Javier 2026-05-22: rounded corners on the table to match the
       12px card radius used elsewhere. The radius is applied per-cell
       (below) rather than on the <table> element + overflow:hidden,
       because <table>-level overflow clipping is browser-inconsistent. */
    border-radius: 12px;
}
/* Rounded corners for the View Data table. The parent <tr> has its own
   background (set on .mcd-thead tr: #e5e7eb), so per-cell radius alone
   doesn't help — the tr's square background shows behind the rounded
   cells. Apply radius + overflow:hidden on the corner rows (display:flex
   so this is well-behaved), and matching radius on the corner cells as
   belt-and-suspenders. */
.min-chart-datatable .mcd-thead tr:first-child{
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden;
}
.min-chart-datatable .mcd-tbody tr:last-child{
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    overflow: hidden;
}
.min-chart-datatable .mcd-thead tr:first-child .mcd-th:first-child{
    border-top-left-radius: 12px;
}
.min-chart-datatable .mcd-thead tr:first-child .mcd-th:last-child{
    border-top-right-radius: 12px;
}
.min-chart-datatable .mcd-tbody tr:last-child .mcd-td:first-child{
    border-bottom-left-radius: 12px;
}
.min-chart-datatable .mcd-tbody tr:last-child .mcd-td:last-child{
    border-bottom-right-radius: 12px;
}
table.min-chart-datatable.mcd-col2{
	width: 90%;
}
.mcd-caption-heading{
	font-style: normal;
	color: #111827;
	font-size: 15px;
	font-weight: 500;
	font-family: inherit;
	text-align: center;
	margin: 0 0 12px;
}
.mcd-caption-title{
    color:rgb(51 65 85 /1);
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin:0px auto;
    text-align:center;
    width:85%;
}
.mcd-thead,.mcd-tbody{
    display:block;
    width:100%;
}
.mcd-tbody tr, .mcd-thead tr{
	border-top:0;
	border-left:0;
	border-right:0;
	border-bottom:1px solid #e5e7eb;
	color: #374151;
	display:flex;
	justify-content: center;
	width:100%;
}
.mcd-thead tr{
	/* Javier 2026-05-22: bump from #f3f4f6 → #e5e7eb to match the
	   parent .so-data-table header row color. */
	background: #e5e7eb;
}
.mcd-tbody tr:last-child{
	border-bottom: none;
}
/* Column widths: label col (Year/Grade) ~20%, data cols share the rest evenly.
   Each column class is named for the data it holds, so the same selectors must
   cover all variants encountered (col_school, col_town, col_state, col_district,
   col_national). Pre-edit the rules omitted col_town/col_national, leaving those
   columns un-sized in town/county pages. */
.mcd-col2 .col_year,.mcd-col2 .col_grade{
	width: 20%;
	margin-right: 3px;
}
.mcd-col2 .col_school,.mcd-col2 .col_town,.mcd-col2 .col_state,.mcd-col2 .col_district,.mcd-col2 .col_national,.mcd-col2 .col_value{
	width: calc(80% - 3px);
}
.mcd-col3 .col_year,.mcd-col3 .col_grade{
	width: 20%;
	margin-right: 3px;
}
.mcd-col3 .col_school,.mcd-col3 .col_town,.mcd-col3 .col_state{
	width: calc(40% - 3px);
	margin-right: 3px;
}
.mcd-col3 .col_district,.mcd-col3 .col_national{
	width: 40%;
}
.mcd-col4 .col_year,.mcd-col4 .col_grade{
	width: 20%;
	margin-right: 3px;
}
.mcd-col4 .col_school,.mcd-col4 .col_town{
	width: calc(26.67% - 3px);
	margin-right: 3px;
}
.mcd-col4 .col_state{
	width: calc(26.67% - 3px);
	margin-right: 3px;
}
.mcd-col4 .col_district,.mcd-col4 .col_national{
	width: 26.66%;
}
/* Alignment: label col left, data cols centered (header + body) */
.mcd-thead .col_year,.mcd-thead .col_grade,
.mcd-tbody .col_year,.mcd-tbody .col_grade{
	text-align: left;
}
.mcd-thead .col_school,.mcd-thead .col_town,.mcd-thead .col_state,.mcd-thead .col_district,.mcd-thead .col_national,
.mcd-tbody .col_school,.mcd-tbody .col_town,.mcd-tbody .col_state,.mcd-tbody .col_district,.mcd-tbody .col_national{
	text-align: center;
}
.mcd-th{
	/* Javier 2026-05-22: bump from #f3f4f6 → #e5e7eb to match the
	   parent .so-data-table header row color. */
	background-color: #e5e7eb;
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	display: inline-block;
	vertical-align: middle;
	padding: 10px 12px;
}
.mcd-td{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 400;
	color: #374151;
	background: #ffffff;
}
.mcd-tbody .col_year, .mcd-tbody .col_grade{
	/* Javier 2026-05-22: bump from #f9fafb → #f3f4f6 to match the
	   parent .so-data-table left/label column color. */
	background: #f3f4f6;
	font-weight: 500;
	text-align: left;
}
.nav-downlaod-sec{
    display:block;
    text-align:left;
    font-size:14px;
}
.cdw-ndb{
    font-size:14px;
    font-weight:400;
}
.data-privacy-text{
    font-size:12px;
    text-align: left;
}
@media (max-width: 767px)
{
    .js-plotly-plot .plotly .modebar-group{
        padding-left: 3px;
    }
    
    .pie-chart .js-plotly-plot .plotly .modebar-group{
        padding-left: 0px;
    }
    .chart_nav_bar.large_device{
        display: none;
    }
    .chart_nav_bar.small_device{
        display: block;
    }
    .chart_nav_bar.small_device .chart_nav_item {
        margin-top:5px;
        margin-bottom: 0px;
    }
    table.min-chart-datatable.mcd-col2{
        width: 100%;
    }
    .nav-downlaod-sec{
        text-align:left;
    }
    .mcd-caption-heading{
        margin: 0 0 20px;
    }
}

@media (max-width: 420px)
{

    .js-plotly-plot .plotly g.xtick text{
        font-size:10px !important;
    }
}

/* Javier 2026-04-23 D3: amCharts writes inline style="background-color:#fdfdfd"
   on the generated <svg>, which reads as a darker rectangle inside the white
   card. Force the chart surface transparent so the card's white background
   (or the gray label column next to it) shows through uniformly. */
.dt-chart-cell svg,
.dt-value-cell.chartimg-cell svg,
.chartdiv svg,
.chartdiv > div > svg {
    background-color: transparent !important;
}
/*popular articles box, recent article box used on most of pages*/
.mpa-pt
{
    display:block;
    position:relative;
    text-decoration: none;
    overflow:hidden;
    border-radius: 8px;
    /* Javier 2026-04-23 M1: inter-article gap was 10px on mobile (not divisible by 4).
       Bumped to next multiple of 4 per the mobile spacing standard. */
    margin-bottom:12px;
    padding:0;
}
A.mpa-pt:hover{
    text-decoration: none;
}
.mpa-photo{
    width: 100%;
    height: 218px;
    object-fit:cover;
    object-position:center top;
    border-radius: 8px;
    display:block;
    margin:0;
    padding:0;
}
.mpa-title{
    display:flex;
    align-items:center;
    position:absolute;
    left:0;
    bottom:0;
    width: calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    width: -webkit-calc(100% - 30px);
    height: auto;
    min-height:40px;
    border-radius: 0;
    /* Javier 2026-04-26: sidebar card text is body role (16px). */
    font-size: var(--t-body);
    background: #1E8BC3;
    opacity: 0.8;
    margin: 0;
    line-height:1.2;
    padding: 5px 15px;
    color: white;
}
.mpa-more-cnt{
    padding: 10px;
}
H3.mpa-more{
    font-size:20px;
    color:#1e8cc5;
    text-align:center;
    font-weight:700;
    margin-bottom:10px
}
A.mpa-more-link{
    font-size: 16px;
    line-height: 32px;
}

/* Recent Articles: transparent background so page bg shows between cards */
#recent-articles.section-wrapper {
    background-color: transparent;
    border: none;
    box-shadow: none;
}
#recent-articles .sec-content {
    background-color: transparent;
}
.ra-box
{
    padding: 15px 0 0;
    display: flex;
    gap: 20px;
    background-color: transparent;
    overflow: auto;
}
.ra-pt {
    display:block;
    position:relative;
    width: 259px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    background-color: #fff;
}
.ra-photo-link {
    display:block;
    width: 100%;
}
.ra-photo{
    width: 100%;
    border-radius: 10px 10px 0 0;
    height: 200px;
    object-fit:cover;
    object-position:center top;
}
.ra-tb-cnt{
    padding: 20px;
}
/* Javier 2026-04-24 A2: Recent Articles — date in caption role (14px),
   title + blurb in body role (16px); title stays bold. Brand-blue color
   explicitly set because .t-body utility class applies --tc-body (dark
   gray) which would otherwise override the link default. */
A.ra-title-link {
    display:block;
    margin: 10px 0;
    font-weight: 600;
    font-size: var(--t-body);
    line-height: var(--lh-body);
    color: #1E8BC3;
}
A.ra-title-link:hover,
A.ra-title-link:focus {
    color: #F4B350;
}
.ra-publish-date{
    font-size: var(--t-caption);
    line-height: var(--lh-caption);
    color: var(--tc-caption);
    font-weight: 400;
}
.ra-blurb{
    font-size: var(--t-body);
    line-height: var(--lh-body);
    color: var(--tc-body);
    font-weight: 400;
}
@media (min-width: 767px) and (max-width:1200px)
{
    .ra-photo{
        height:110px;
    }
}
.general-data-table{
    display:block;
}
/*
.dt-single-row-table
.dt-single-row
are used to fix the table layout fixed not working in ios safari.
*/
.dt-single-row-table{
    table-layout: fixed;
    display:table;
    max-width: none;
    width: auto;
    min-width: 100%;
}
.dt-row{
    display:table-row;
    width:100%;
}
.dt-name-cell{
    position: relative;
    display:table-cell;
    box-sizing: border-box;
    text-align: left;
    vertical-align: middle;
    /* Inter-row divider is drawn via pseudo-element on .dt-single-row-table
       with a 20px horizontal inset (Javier 2026-04-24 A3.c). */
    /* Label column on profile tables — same look as the School Rankings
       category-col (.top20-placement-list .category-col): #f3f4f6 bg,
       --tc-body text, weight 600. Mihajlo 2026-05-02: synced font-weight
       (was 500) and color (was --tc-label) so School Facts / Faculty /
       Tuition / etc. read identically to School Rankings on the same page. */
    background-color: #f3f4f6;
    font-size: var(--t-body);
    line-height: var(--lh-body);
    font-weight: 600;
    color: var(--tc-body);
    padding: 0 10px 0 20px;
    word-break: break-word;
}
.dt-name-cell.dt-blank-cell{
    background-color: #f3f4f6;
}
.dt-value-cell {
    position: relative;
    height: 40px;
    display:table-cell;
    box-sizing: border-box;
    text-align:center;
    vertical-align: middle;
    /* Inter-row divider is on .dt-single-row-table::before (inset 20px). */
    /* Javier 2026-04-26: text within tables (TD/data cells) is body role —
       16px / 400 / --tc-body. Reverses the Apr 25 caption-on-TD ruling. */
    font-size: var(--t-body);
    line-height: var(--lh-body);
    font-weight: 400;
    color: var(--tc-body);
    padding: 0 3px;
    word-wrap: break-word;
}
.dt-chart-cell {
    position: relative;
    display:table-cell;
    box-sizing: border-box;
    height:auto;
    text-align:center;
    vertical-align: middle;
    font-size: var(--t-body);
    line-height: var(--lh-body);
    color: var(--tc-body);
    padding: 0 3px;
    word-wrap: break-word;
}
.dt-chart-cell.chartimg-cell.dt-cells-1{
    border-top: none;
}

/* Javier 2026-05-05: row dividers extend full-width through the card,
   passing through gray label column and white value column as a single
   continuous line. z-index:1 lifts the line above .dt-name-cell's
   #f3f4f6 background so the stroke paints across the gray cell. */
.so-data-table .dt-single-row-table,
.so-data-table.general-data-table > .dt-single-row-table {
    position: relative;
}
.so-data-table .dt-single-row-table + .dt-single-row-table::before,
.so-data-table.general-data-table > .dt-single-row-table + .dt-single-row-table::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #ebebeb;
    pointer-events: none;
    z-index: 1;
}

/* Same full-width divider on the first row of a general-data-table that
   follows another general-data-table — keeps the line continuous across
   wrapper boundaries (trends pages stack one wrapper per stat group). */
.so-data-table.general-data-table + .so-data-table.general-data-table > .dt-single-row-table:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #ebebeb;
    pointer-events: none;
    z-index: 1;
}
/* Javier 2026-05-11 D7: chart rows stay in the DOM when hidden so crawlers
   and LLM training pipelines can read the chart image's alt-text + data
   table fragments. visibility:collapse is the table-row equivalent of
   display:none — the row is removed from layout without being removed
   from the DOM. Spec-defined behavior for display:table-row elements. */
.chart-row-hidden{
    visibility: collapse;
}
.dt-vtop{
    vertical-align:top;
}
/*percent circle*/
.dt-pc-wrapper {
    width: 70px;
    height: 70px;
    position: relative;
    border-radius: 50%;
    background: #68c3a3;
    margin: 20px auto;
}
.dt-pc-left, .dt-pc-right {
    width: 70px;
    height: 70px;
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: 0;
    background: #e6e6e6;
}
.dt-pc-right-hidden {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    border-radius: 50%;
    background: #68c3a3;
}

.dt-pc-left{
    clip: rect(0,35px,auto,0);
}
.dt-pc-right, .dt-pc-right-hidden {
    clip: rect(0,auto,auto,35px);
}
.dt-percent-mask {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    left: 5px;
    top: 5px;
    background: #fff;
    position: absolute;
    text-align: center;
    line-height: 60px;
}
/*SOTableView*/
.so-data-table{
    margin: 6px 0 25px;
}
.so-data-table .dt-name-cell{
    /* Javier 2026-05-05: unified first-column width 38% across all profile-page
       data tables (was 35%). Mobile override below also 38%. */
    width: 38%;
    height: 70px;
}
.so-data-table .dt-name-cell.chartimg-name-cell{
    width: 0;
    height: 0;
    border:0;
    padding:0;
    margin:0;
}
/* Javier 2026-05-11 D3: header row of every profile/town/state data table
   uses a *darker* grey (#e5e7eb) than the regular label column (#f3f4f6).
   This applies uniformly across both cells: the header's left "label" cell
   (.dt-name-cell.definitions-name-cell) AND the header's data cells (the
   "This Town (Birmingham)" / "This State (AL)" cells, selected via the
   ~-sibling combinator) so the whole row reads as one band. */
.so-data-table .dt-name-cell.definitions-name-cell{
    font-size: 14px;
    color:#616161;
    background-color: #e5e7eb;
    font-weight: 600;
    border-top: 1px solid #ebebeb;
}
.so-data-table .dt-row .definitions-name-cell ~ .dt-value-cell{
    background-color: #e5e7eb;
    color: #616161;
    font-weight: 600;
}
.so-data-table .dt-value-cell.dt-cells-1{
   width: 62%;
}
/* 31% ×2 + 38% name-cell = 100% exactly. Without exact arithmetic the browser
   normalizes mismatched column widths and the divider visibly wobbles between
   single-value and two-value rows (Javier called this out 2026-04 mobile QA). */
.so-data-table .dt-value-cell.dt-cells-2{
   width: 31%;
}
.so-data-table .dt-chart-cell.chartimg-cell.dt-cells-1{
   width: 100%;
}
.so-data-table .dt-chart-cell.chartimg-cell.dt-cells-2{
   width: 50%;
}
.chartdiv{
    position:relative;
}
.so-data-table .dt-chart-cell.chartimg-cell.dt-cells-1 .chartdiv{
    width:100%;
    height:320px;
}
.so-data-table .dt-value-cell.chartimg-cell.dt-cells-1 .chartdiv{
    width:100%;
    height:320px;
}
.so-data-table .dt-value-cell.chartimg-cell.pie-chart.dt-cells-1 .chartdiv{
    width:60%;
    height:262px;
    padding:5px 2px;
    margin: 0 auto;
    text-align:center;
}
.so-data-table .dt-value-cell.chartimg-cell.dt-cells-2 .chartdiv{
    width:100%;
    height:250px;
    padding:5px 2px;
}
.so-dt-source-wrapper{
    /* caption role — source/citation under the table. */
    font-size: var(--t-caption);
    line-height: var(--lh-caption);
    color: var(--tc-caption);
    font-style: normal;
    font-weight: 400;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
    text-align: left;
}
/*CompareSchoolsTableView*/
/*PopularComparisionTableView*/
.cmp-data-table .dt-name-cell{
    width: 25%;
    line-height: 2em;
    padding: 10px 0 0 20px;
    word-break: break-word;
    word-wrap: break-word;
}
.cmp-data-table .dt-value-cell{
    line-height: 2em;
    padding: 10px 3px;
    word-break: break-word;
    word-wrap: break-word;
    font-weight: 400;
}
.cmp-data-table .dt-value-cell.dt-cells-3{
    width:25%;
}
.cmp-data-table .dt-value-cell.dt-cells-2{
    width:37.5%;
}
/*FeaturedSchoolAdvertisingTableView*/
.featured-data-table .dt-name-cell{
    padding: 20px 3px 20px 20px;
    width: calc(100%/4);
    font-family:Hind, sans-serif;
    font-weight: initial;
}
.featured-data-table .dt-value-cell{
    width: calc(100%/4);
    padding: 20px 5px;
    font-family:Hind, sans-serif;
    font-size:16px;
}
.featured-data-table .dt-value-cell.fdt-cell-1{
    border-right: 1px solid #e5e5e5;
}
.wrapper-checkmark-no-content{
    width:100%;
    height:30px;
}
@media (min-width: 767px) and (max-width:1200px)
{
    .so-data-table .dt-value-cell{
        width:65%;
        word-break: break-all;
    }
    .so-data-table .dt-chart-cell.chartimg-cell.dt-cells-1 .chartdiv{
        width:100%;
        height:280px;
    }
    .so-data-table .dt-value-cell.chartimg-cell.dt-cells-1 .chartdiv{
        width:100%;
        height:280px;
    }
    .so-data-table .dt-value-cell.chartimg-cell.pie-chart.dt-cells-1 .chartdiv{
        width:60%;
        height:240px;
        padding:5px 2px;
        margin: 0 auto;
        text-align:center;
    }
    .so-data-table .dt-value-cell.chartimg-cell.dt-cells-2 .chartdiv{
        width:100%;
        height:215px;
        padding:5px 2px;
    }
}
@media (max-width: 767px)
{
    /* Force 100% width to prevent long unbroken words from stretching the table */
    .dt-single-row-table {
        width: 100% !important;
        max-width: 100%;
    }

    /* Javier 2026-05-06: switch each row from display:table-row to flex on
       mobile. Reason: display:table + table-layout:fixed wasn't honoring the
       38%/62% column widths on rows past the first one (browser quirk with
       single-row anonymous tables — row 0 got 38% from content sizing, rows
       1+ silently fell back to 50/50). Flex distributes width deterministically:
       label cell flex-basis 38%, value/chart cells flex:1.

       align-items: stretch (default) lets cells grow to row's content
       height — desktop's fixed height:70px and height:40px on label/value
       are converted to min-height here so multi-line content doesn't
       overflow into adjacent rows. */
    .so-data-table .dt-row {
        display: flex;
        align-items: stretch;
        width: 100%;
    }
    /* On mobile the rows are flex, and visibility:collapse on a flex element
       hides it WITHOUT releasing its layout space — hidden chart rows left a
       tall blank gap in the table. display:none here; the row markup stays in
       the DOM (the crawler rationale above is about source, not rendering). */
    .so-data-table .dt-row.chart-row-hidden {
        display: none;
    }
    .so-data-table .dt-row > .dt-name-cell {
        flex: 0 0 38%;
        max-width: 38%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: auto;
        min-height: 70px;
    }
    .so-data-table .dt-row > .dt-value-cell,
    .so-data-table .dt-row > .dt-chart-cell {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: auto;
        min-height: 40px;
    }

    /* Javier 2026-05-05: vertical divider on the right of the gray label cell
       removed (was 1px solid #e0e0e0). Font-size left to inherit --t-body (16px)
       to match the desktop/spec t-body role on every TD. */
    .dt-name-cell, .cmp-data-table .dt-name-cell,.so-data-table .dt-name-cell{
        padding-left:15px;
        padding-right:10px;
    }
    /* M19 (part 2): inner item separators (between Basketball/Cheering/... inside the Sports cell)
       are drawn as a gradient background that spans the item-group's full width. The gap between
       the line and the card's inner edge comes from the value-cell's own 10px horizontal padding —
       no extra inset on the line itself, so it reads as "breathing room" not "orphaned separator". */
    .dt-value-cell .so-dt-ce-item-group{
        box-sizing: border-box;
        border-bottom: none;
        background-image: linear-gradient(to right, #ebebeb, #ebebeb);
        background-repeat: no-repeat;
        background-size: 100% 1px;
        background-position: bottom center;
    }
    .dt-value-cell .so-dt-ce-item-list:last-child .so-dt-ce-item-group{
        background-image: none;
    }
    /* M17 + M20: value cell centered horizontally and vertically on mobile.
       Javier 2026-05-05: text in tables is body role (16px) — was 14px override. */
    .dt-value-cell, .so-data-table .dt-value-cell{
        padding: 0 10px;
        text-align: center;
        vertical-align: middle;
        border-right: none;
    }
    /* M20: nested group content (sports list) also centered on mobile */
    .dt-value-cell .so-dt-ce-item-group,
    .dt-value-cell .so-dt-ce-item-list-group,
    .dt-value-cell .so-dt-ce-item-list{
        text-align: center;
    }
    /* Javier 2026-05-05: unified first-column width 38% / 62% across all tables. */
    .so-data-table .dt-value-cell{
        width:62%;
        word-wrap: break-word;
        word-break: normal;
        overflow-wrap: break-word;
        /* Javier 2026-04-20: disable auto-hyphenation — was breaking "Teachers" into "Teach-ers"
           and "Students" into "Stu-dents" in comparison table cells on mobile. */
        hyphens: manual;
    }
    .so-data-table .dt-name-cell{
        width:38%;
    }
    /* M18: "State avg.: X%" secondary caption sized down on mobile.
       Specificity bumped to beat the non-media .dt-vc-avg rule in schools.css (loads later);
       also target the inner <em> because reset.css sets EM { font-size: 16px } directly on the tag,
       which doesn't inherit from its parent div. */
    .so-data-table .dt-vc-avg,
    .dt-value-cell .dt-vc-avg,
    .so-data-table .dt-vc-avg em,
    .dt-value-cell .dt-vc-avg em{
        font-size: 12px;
        font-weight: 400;
    }
    .cmp-data-table .dt-name-cell,.cmp-data-table .dt-value-cell{
        font-size:12px;
    }
    .so-data-table .dt-chart-cell.chartimg-cell.dt-cells-1 .chartdiv{
        width:100%;
        height:260px;
    }
    .so-data-table .dt-value-cell.chartimg-cell.dt-cells-1 .chartdiv{
        width:100%;
        height:260px;
    }
    .so-data-table .dt-value-cell.chartimg-cell.pie-chart.dt-cells-1 .chartdiv{
        width:60%;
        height:200px;
        padding:5px 2px;
        margin: 0 auto;
        text-align:center;
    }
    .so-data-table .dt-value-cell.chartimg-cell.dt-cells-2 .chartdiv{
        width:100%;
        height:180px;
        padding:5px 2px;
    }
    .featured-data-table .dt-name-cell{
        border-right: 1px solid #ebebeb;
        font-size: 14px;
        padding-left: 5px;
        width: 28%;
    }
    .featured-data-table .dt-value-cell{
        font-size: 14px;
        width: 24%;
    }
}
@media (max-width: 400px)
{
    /* Javier 2026-05-05: keep TDs at --t-body (16px) on every viewport — the
       prior 14px sub-400 step-down made the smallest screens read smaller than
       spec; t-body is fixed 16px regardless of breakpoint. */
    .so-data-table .dt-chart-cell.chartimg-cell.dt-cells-1 .chartdiv{
        width:100%;
        height:260px;
    }
    .so-data-table .dt-value-cell.chartimg-cell.dt-cells-1 .chartdiv{
        width:100%;
        height:260px;
    }
    .so-data-table .dt-value-cell.chartimg-cell.pie-chart.dt-cells-1 .chartdiv{
        width:60%;
        height:200px;
        padding:5px 2px;
        margin: 0 auto;
        text-align:center;
    }
    .so-data-table .dt-value-cell.chartimg-cell.dt-cells-2 .chartdiv{
        width:100%;
        height:180px;
        padding:5px 2px;
    }
}
@media (max-width: 336px)
{
}
summary.faq-accordion::-webkit-details-marker {
  display: none;
}
summary.faq-accordion > div.faq-title {
    width: calc(100% - 50px);
    display: inline-block;
    vertical-align: top;
}
details.faq-details{
    font-size:16px;
    border-bottom: 1px solid #e5e5e5;
}
details.faq-details:last-of-type {
    border: none;
}
summary.faq-accordion {
    display: block;
    padding: 15px 0;
    color:#1E8BC3;
    cursor: pointer;
}
details.faq-details .faq-question{
    padding:0 0 0 18px;
    font-size: 16px;
    font-weight: 400;
    margin-bottom:15px;
}
summary.faq-accordion:before {
    content:"";
    border: 1px solid #f4b350;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin: 7px 10px 0 0;
}

details.faq-details[open] summary.faq-accordion:before {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}/*lazyload for shared, can combine in shared features css*/
.no-js img.lazyload {
    display: none;
}
img.lazyload:not([src]) {
    visibility: hidden;
}
.lazy-loaded {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    opacity: 1;
}
/*checkmark text for shared, can combine in shared features css*/
.checkmarks_list{
    display:block;
    width:100%;
    margin:0;
    padding: 0;
    position: relative;
}
.checkmark_row{
    display:block;
    width:100%;
    margin: 0 0 5px 0;
    padding: 0;
    position: relative;
    background-color: #efefef;
}
.checkmarks_list .checkmark_row:last-of-type{
    margin-bottom:0px;
}
.checkmark_content {
    display: block;
    position: relative;
    background: #f7f7f7;
    font-size: 18px;
    font-weight: 400;
    font-family: Hind,sans-serif;
    width:75%;
    width: calc(100% - 95px);
    width: -webkit-calc(100% - 95px);
    padding: 20px 10px 20px 10px;
    margin-left: 30px;
    word-break: break-word;
    text-align: left;
}
.checkmark_content:before {
    content: '•';
    position: absolute;
    width: auto;
    height: auto;
    background: none;
    /* Javier 2026-05-18 P2.5: align orange bullet with first row of text
       (not vertically-centered in multi-line items). Was top:50%;margin-top:-12px
       which centered against the whole content block. Now anchored to top
       with a margin that lands the bullet glyph optically on the first text
       line — works for the default .checkmark_content padding (20px). The
       hero variant uses a smaller padding and adds its own margin-top
       override (see hero-section.css). Applies everywhere orange bullets
       render: state/town/county listings, compare pages, profile boxes. */
    top: 0;
    left: -20px;
    border: none;
    margin-top: 18px;
    font-size: 28px;
    color: #f5b34f;
    line-height: 1;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
}
.checkmark-no-content{
    display: block;
    position: relative;
    background: #f7f7f7;
    font-size: 18px;
    font-weight: 400;
    font-family: Hind,sans-serif;
}
.checkmark-no-content::before{
    content: '';
    position: absolute;
    width: 18px;
    height: 8px;
    background: 0 0;
    border: 8px solid #f5b34f;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/*tooltipbox for shared, can combine in shared features css*/
.bubble_text{
    display: inline-block;
    text-decoration: dotted underline;
    word-break: break-word;
    cursor: help;
    text-underline-offset: 0.1em;
}
.bubble_text:hover{
    text-decoration-color: #111111;
}
/*Nav pills*/
.nav-pills {
  flex-wrap: wrap;
}
.nav-pill-button{
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    color: #1E8BC3;
    background-color: #f2f2f2;
    font-size: 13px;
    font-weight:600;
    cursor:pointer;
}
.nav-pill-button:hover, button.nav-pill-button:focus{
    text-decoration: underline;
    outline:0;
}
.nav-pill-button.active{
    background-color: #1e8cc5;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor:auto;
}
.nav-pill-button.active:hover, button.nav-pill-button.active:focus {
    text-decoration: none;
    outline:0;
    cursor:auto;
}
.nav-pill-button.npb-bg-yellow{
    color: #f4b350;
}
.nav-pill-button.npb-bg-yellow.active {
    background-color: #f4b350;
    color: #ffffff;
}
/*quick Stats for shared*/
.quick-stats-ul{
    margin:0;
    padding:0;
    position:relative;
}
.quick-stats-li{
    position:relative;
    margin-left: 27px;
    list-style: none;
}
.quick-stats-text{
    margin-top:6px;
    margin-bottom:6px
}

.quick-stats-text:before {
    content: '›';
    position: absolute;
    left: -27px;
    font-size: 24px;
    color: #f5b34f;
    font-weight: bold;
    line-height: 1.2;
}
.quick-stats-text > strong{
    font-weight: 700;
}
.quick-links-block {
    border-bottom: 1px solid #c7d8c3;
    padding-bottom: 7px;
    padding-top: 7px;
    padding-left: 20px;
}
.quick-links-block:last-of-type{
    border-bottom:none;
}
.quick-links-title{
    color: #616161;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}
.quick-stats-links{
    font-size: 14px;
    color: #1e8bc3;
    font-weight: 400;
    display: inline;
}
a.quick-stats-links:hover{
    text-decoration:none;
}

.stripe-button-el{
    overflow:hidden;
    display:inline-block;
    visibility:visible !important;
    background-image:-webkit-linear-gradient(#28a0e5,#015e94);
    background-image:-moz-linear-gradient(#28a0e5,#015e94);
    background-image:-ms-linear-gradient(#28a0e5,#015e94);
    background-image:-o-linear-gradient(#28a0e5,#015e94);
    background-image:-webkit-linear-gradient(#28a0e5,#015e94);
    background-image:-moz-linear-gradient(#28a0e5,#015e94);
    background-image:-ms-linear-gradient(#28a0e5,#015e94);
    background-image:-o-linear-gradient(#28a0e5,#015e94);
    background-image:linear-gradient(#28a0e5,#015e94);
    -webkit-font-smoothing:antialiased;
    border:0;
    padding:1px;
    text-decoration:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2);
    -ms-box-shadow:0 1px 0 rgba(0,0,0,0.2);
    -o-box-shadow:0 1px 0 rgba(0,0,0,0.2);
    box-shadow:0 1px 0 rgba(0,0,0,0.2);
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
    cursor:pointer;
}
.stripe-button-el::-moz-focus-inner{
    border:0;
    padding:0;
}
.stripe-button-el span{
    display:block;
    position:relative;
    padding:0 12px;
    height:39px;
    line-height:39px;
    background:#1275ff;
    background-image:-webkit-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);
    background-image:-moz-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);
    background-image:-ms-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);
    background-image:-o-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);
    background-image:-webkit-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);
    background-image:-moz-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);
    background-image:-ms-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);
    background-image:-o-linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);
    background-image:linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);
    font-size:14px;color:#fff;
    font-weight:bold;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-shadow:0 -1px 0 rgba(0,0,0,0.25);
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);
    -ms-box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);
    -o-box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
}
.stripe-button-el:not(:disabled):active,.stripe-button-el.active{background:#005d93}.stripe-button-el:not(:disabled):active span,.stripe-button-el.active span{
    color:#eee;background:#008cdd;background-image:-webkit-linear-gradient(#008cdd,#008cdd 85%,#239adf);
    background-image:-moz-linear-gradient(#008cdd,#008cdd 85%,#239adf);
    background-image:-ms-linear-gradient(#008cdd,#008cdd 85%,#239adf);
    background-image:-o-linear-gradient(#008cdd,#008cdd 85%,#239adf);
    background-image:-webkit-linear-gradient(#008cdd,#008cdd 85%,#239adf);
    background-image:-moz-linear-gradient(#008cdd,#008cdd 85%,#239adf);
    background-image:-ms-linear-gradient(#008cdd,#008cdd 85%,#239adf);
    background-image:-o-linear-gradient(#008cdd,#008cdd 85%,#239adf);
    background-image:linear-gradient(#008cdd,#008cdd 85%,#239adf);
    -webkit-box-shadow:inset 0 1px 0 rgba(0,0,0,0.1);
    -moz-box-shadow:inset 0 1px 0 rgba(0,0,0,0.1);
    -ms-box-shadow:inset 0 1px 0 rgba(0,0,0,0.1);
    -o-box-shadow:inset 0 1px 0 rgba(0,0,0,0.1);
    box-shadow:inset 0 1px 0 rgba(0,0,0,0.1);
}
.stripe-button-el:disabled,.stripe-button-el.disabled{
    background:rgba(0,0,0,0.2);
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}
.stripe-button-el:disabled span,.stripe-button-el.disabled span{
    color:#999;
    background:#f8f9fa;
    text-shadow:0 1px 0 rgba(255,255,255,0.5);
}
/*rank score and rank box*/
.rank-score-cnt{
    border-radius: 20%;
    height: 28px;
    width: 38px;
    text-align: center;
    line-height: 28px;
    color: white;
    display: inline-block;
    vertical-align: middle;
    background-color: #68C3A3;
    font-size:16px;
}
.rank-score-cnt.rank-color-10{
    width:48px;
    background-color: #61b597;
}
.rank-score-cnt.rank-color-9{
    background-color: #68C3A3;
}
.rank-score-cnt.rank-color-8{
    background-color: #0082c5;
}
.rank-score-cnt.rank-color-7{
    background-color: #1E8BC3;
}
.rank-score-cnt.rank-color-6{
    background-color: #e9aa4b;
}
.rank-score-cnt.rank-color-5{
    background-color: #F4B350;
}
.total-rank-score{
    display:inline-block;
    font-size:16px;
}
/*Index State Popular Cities View*/
.state-box-list-row{
    width:100%;
    display: flex;
}
.state-box-list-column {
    box-sizing: border-box;
    padding-left:40px;
    padding-right: 5px;
    display: block;
    width: 33.1%;
    width: calc((100% - 3px)/3);
    width: -moz-calc((100% - 3px)/3);
    width: -webkit-calc((100% - 3px)/3);
    height: 185px;
    border-bottom: 1px solid #e6e6e6;
    cursor:pointer;
}
.state-box-list-row:last-of-type .state-box-list-column{
    border-bottom:none;
}
.state-box-list-row:last-of-type .state-box-list-column.column1:only-child{
    border-right: 1px solid #e6e6e6;
}
.state-box-list-column.column2{
    border-left:1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
}
.state-box-list-column a{
    display:block;
}
.state-box-list-column a:hover,.state-box-list-column a:hover .popular-city-count{
    background-color: #1e8bc3;
    color: #fff;
    text-decoration: none;
}
.state-box-list-column a.state-link{
    font-size: 24px;
    font-weight: 700;
    margin: 30px 0 20px;
    text-transform: capitalize;
}
.state-box-list-column a.popular-city-link{
    font-size: 14px;
}
.state-box-list-column .popular-city-count{
    color: #616161;
    display: inline-block;
}
/*
ActiveTabsHeader
ActiveTabsHeaderForClosedView
*/
#nav-tabs,#nav-ctabs{
    position:relative;
    font-size:16px;
    height: auto;
    display:flex;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 0;
    flex-wrap: wrap;
    justify-content: center;
}
#nav-options,#nav-coptions{
    display:none;
}
/* Filter chip style tabs with X button - per Javier's feedback */
.nav-tab-chip{
    position:relative;
    display:inline-flex;
    height: 32px;
    line-height: 32px;
    text-align:center;
    vertical-align:middle;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 400;
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #68c3a3;
    transition: border-color 0.25s linear 0s;
    -o-transition: border-color 0.25s linear 0s;
    -webkit-transition: border-color 0.25s linear 0s;
    -moz-transition: border-color 0.25s linear 0s;
    overflow: hidden;
}
.nav-tab-chip .nav-tab-link-text{
    color: #333333;
    text-decoration: none;
    padding: 0 10px;
    pointer-events: none;
    cursor: default;
}
.nav-tab-chip .nav-tab-link-text:hover{
    text-decoration: none;
}
.nav-tab-chip .nav-tab-close{
    background-color: #68c3a3;
    border: none;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    padding: 0 8px;
    line-height: 32px;
    height: 100%;
    transition: background-color 0.2s;
}
.nav-tab-chip .nav-tab-close:hover{
    background-color: #5ab392;
}
.nav-tab-chip.active-nt{
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #68c3a3;
}
.nav-tab-chip.active-nt .nav-tab-link-text{
    color: #333333;
    cursor: default;
}
.nav-tab-chip.active-nt .nav-tab-close{
    background-color: #68c3a3;
    color: #FFFFFF;
}
.nav-tab-chip:not(.active-nt):hover {
    border-color: #5ab392;
}
/* Clear all filters button */
.nav-tab-clear-all{
    display: inline-flex;
    height: 32px;
    line-height: 32px;
    align-items: center;
    padding: 0 12px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    background-color: transparent;
    color: #68c3a3;
    border: none;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}
.nav-tab-clear-all:hover{
    color: #5ab392;
    background-color: #f5f5f5;
}
/* Legacy support for old tab link style */
A.nav-tab-link{
    position:relative;
    display:inline-flex;
    height: 50px;
    line-height: 50px;
    text-align:center;
    vertical-align:middle;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    background-color: #68c3a3;
    color: #FFFFFF;
    border: none;
    transition: background-color 0.25s linear 0s;
    -o-transition: background-color 0.25s linear 0s;
    -webkit-transition: background-color 0.25s linear 0s;
    -moz-transition: background-color 0.25s linear 0s;
}
A.nav-tab-link.active-nt{
    background-color: transparent;
    color: #666;
    border: 1px solid #ccc;
    cursor: default;
}
A.nav-tab-link:first-of-type{
    border-radius: 5px;
}
A.nav-tab-link:last-of-type{
    border-radius: 5px;
}
A.nav-tab-link:hover{
    text-decoration:none;
    cursor: pointer;
}
A.nav-tab-link.active-nt:hover{
    cursor: default;
    background-color: #f5f5f5;
}
A.nav-tab-link:not(.active-nt):hover {
    background: #74dbb7;
}
A.nav-tab-5{
    width: auto;
    min-width: 140px;
}
A.nav-tab-4{
    width: auto;
    min-width: 160px;
}
A.nav-tab-3{
    width: auto;
    min-width: 180px;
}
A.nav-tab-2{
    width: auto;
    min-width: 200px;
}
.nav-tab-content{
    padding-top: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    line-height: 40px;
    gap: 4px;
}
.nav-tab-name,.nav-tabs-count{
    display: inline;
    text-align:center;
    vertical-align:middle;
}
.nav-tabs-count{
    font-size: 14px;
    font-weight: 600;
}
/*Compare CheckBox*/
.tpl-cmp-wrapper{
    position: relative;
    display: block;
    width: auto;
    float: left;
    line-height:1;
    vertical-align: middle;
    margin:4px 0;
    padding-left:2px;
}
input.custom-checkbox{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
}
input.custom-checkbox::before {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: -2px;
    left: -2px;
    background: #f7f7f7;
    border:2px solid #f5b34f;
    border-radius: 5px;
    background-color: white;
}
input.custom-checkbox::after{
    opacity: 0;
    content: "";
    display: block;
    position: absolute;
    width: 7px;
    height: 3px;
    background: 0 0;
    top: 4px;
    left: 3px;
    border: 3px solid #1e8cc5;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
input.custom-checkbox:checked::after {
    opacity: 1;
}
.custom-checkbox-text{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #f4b350;
    font-size: 16px;
    cursor: pointer;
    margin-left: 8px;
    margin-top: 4px;
    height:20px;
    line-height:20px;
}
.tpl-remove-wrapper{
    color: #F4B350;
    font-size: 16px;
    cursor: pointer;
}
@media (min-width: 1200px)
{

}
@media (min-width: 767px) and (max-width:1200px){
    .state-box-list-column{
        padding-left:20px;
        height: 240px;
    }
    .state-box-list-column a.state-link{
        font-size:18px;
    }
    .state-box-list-column .popular-city-count{
        display:block;
    }
    .nav-pill-button{
        margin:2px 0 5px;
    }
    A#nav-tab-all.nav-tab-5{
        width: 16%;
    }
    A#nav-tab-high.nav-tab-5{
        width: 19%;
    }
    A#nav-tab-elementary.nav-tab-5{
        width: 28%;
    }
    A#nav-tab-pre.nav-tab-5{
        width: 16%;
    }
    A#nav-tab-public.nav-tab-5{
        width: 21%;
    }
    A.nav-tab-4{
        width: 23%;
    }
    A#nav-tab-elementary.nav-tab-4{
        width: 31%;
    }
    
    
}
@media (max-width: 767px){
    .state-box-list-row{
        display:block;
    }
    .state-box-list-column{
        padding: 0 30px;
        width:100%;
        height:185px;
    }
    .state-box-list-column.column2{
        border-left:none;
        border-right:none;
    }
    .state-box-list-row:last-of-type .state-box-list-column.column1:only-child{
        border-right: none;
    }
    #nav-tabs,#nav-ctabs{
        display: none;
    }
    #nav-options,#nav-coptions{
        display: block;
        height: 35px;
        padding: 4px 5px;
        width: 100%;
        font-size: 16px;
        border-radius: 5px 5px 0 0;
    }
}

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8; }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover,
  .mfp-close:focus {
    opacity: 1; }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  bottom: 0;
  right: 6px;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }

.mfp-arrow {
  position: absolute;
  opacity: 1;
  margin: 0;
  top: 50%;
  margin-top: -30px;
  padding: 0;
  width: 60px;
  height: 60px;
  background: rgba(245, 179, 79, 0.8);
  border-radius: 50%;
  transition: background 0.3s ease, opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent; }
  .mfp-arrow:active {
    margin-top: -29px; }
  .mfp-arrow:hover,
  .mfp-arrow:focus {
    background: rgba(245, 179, 79, 1);
    opacity: 1; }
  .mfp-arrow:before,
  .mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: medium inset transparent; }
  .mfp-arrow:after {
    border-top-width: 10px;
    border-bottom-width: 10px;
    margin-left: 2px; }
  .mfp-arrow:before {
    border-top-width: 12px;
    border-bottom-width: 12px;
    opacity: 0; }

.mfp-arrow-left {
  left: 10px; }
  .mfp-arrow-left:after {
    border-right: 15px solid #FFF;
    margin-left: -2px; }
  .mfp-arrow-left:before {
    margin-left: 0;
    border-right: 0; }

.mfp-arrow-right {
  right: 10px; }
  .mfp-arrow-right:after {
    border-left: 15px solid #FFF;
    margin-left: 2px; }
  .mfp-arrow-right:before {
    border-left: 0; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
  .mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
  .mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  left: 0;
  width: 100%;
  cursor: auto; 
bottom: 40px;
}
.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
}
.mfp-sp .mfp-title{
    padding: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wcDFAkWsRByEAAAAA1JREFUCNdjkOs5ehMABIQCSYOeLqkAAAAASUVORK5CYII=);
}

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }.ms-options-wrap,
.ms-options-wrap * {
    box-sizing: border-box;
}

.ms-options-wrap > button:focus,
.ms-options-wrap > button {
    position: relative;
    width: 100%;
    text-align: left;
    border: 1px solid #aaa;
    background-color: #fff;
    padding: 15px;
    margin-top: 1px;
    font-size: 16px;
    color: #616161;
    outline: none;
    white-space: nowrap;
    border-radius:5px;
}

.ms-options-wrap > button > span {
    display: inline-block;
}

.ms-options-wrap > button[disabled] {
    background-color: #e5e9ed;
    color: #808080;
    opacity: 0.6;
}

.ms-options-wrap > button:after {
    content: ' ';
    height: 0;
    position: absolute;
    top: 50%;
    right: 5px;
    width: 0;
    border: 6px solid rgba(0, 0, 0, 0);
    border-top-color: #999;
    margin-top: -3px;
}

.ms-options-wrap.ms-has-selections > button {
    color: #333;
}

.ms-options-wrap > .ms-options {
    position: absolute;
    left: 0;
    width: 100%;
    margin-top: 1px;
    margin-bottom: 20px;
    background: white;
    z-index: 2000;
    border: 1px solid #aaa;
    overflow: auto;
    visibility: hidden;
}

.ms-options-wrap.ms-active > .ms-options {
    visibility: visible
}

.ms-options-wrap > .ms-options > .ms-search input {
    width: 100%;
    padding: 4px 5px;
    border: none;
    border-bottom: 1px groove;
    outline: none;
}

.ms-options-wrap > .ms-options .ms-selectall {
    display: inline-block;
    font-size: .9em;
    text-transform: lowercase;
    text-decoration: none;
}
.ms-options-wrap > .ms-options .ms-selectall:hover {
    text-decoration: underline;
}

.ms-options-wrap > .ms-options > .ms-selectall.global {
    margin: 4px 5px;
}

.ms-options-wrap > .ms-options > ul,
.ms-options-wrap > .ms-options > ul > li.optgroup ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.ms-options-wrap > .ms-options > ul li.ms-hidden {
    display: none;
}

.ms-options-wrap > .ms-options > ul > li.optgroup {
    padding: 5px;
}
.ms-options-wrap > .ms-options > ul > li.optgroup + li.optgroup {
    border-top: 1px solid #aaa;
}

.ms-options-wrap > .ms-options > ul > li.optgroup .label {
    display: block;
    padding: 5px 0 0 0;
    font-weight: bold;
}

.ms-options-wrap > .ms-options > ul label {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 4px 4px 4px 20px;
    margin: 1px 0;
    border: 1px dotted transparent;
}
.ms-options-wrap > .ms-options.checkbox-autofit > ul label,
.ms-options-wrap > .ms-options.hide-checkbox > ul label {
    padding: 4px;
}

.ms-options-wrap > .ms-options > ul label.focused,
.ms-options-wrap > .ms-options > ul label:hover {
    background-color: #efefef;
    border-color: #999;
}

.ms-options-wrap > .ms-options > ul li.selected label {
    background-color: #efefef;
    border-color: transparent;
}

.ms-options-wrap > .ms-options > ul input[type="checkbox"] {
    margin: 0 5px 0 0;
    position: absolute;
    left: 4px;
    top: 7px;
}

.ms-options-wrap > .ms-options.hide-checkbox > ul input[type="checkbox"] {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}/*agallery icon*/
.ag-featured {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 5px;
    bottom: 2px;
    background: url('https://static.privateschoolreview.com/static/star3.png') no-repeat center center;
    background-size: contain;
    opacity: 1 !important;
}
/*Form validation css for shared*/
.invalid-icon {
    background:url('/images/new_sprites.png') no-repeat  -18px -70px;
}
.error-icon {
    background:url('/images/new_sprites.png') no-repeat  -216px -18px;
}
.valid-icon {
    background:url('/images/new_sprites.png') no-repeat  -366px -168px;
}
.valid-icon, .invalid-icon, .error-icon{
    display: inline-block;
    width:16px;
    height:16px;
    vertical-align: bottom;
    padding-bottom:3px;
}

/*open map for shared*/
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
    -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
    -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
    -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
    transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}
.marker-cluster-small {
    background: url('/images/new_sprites.png') no-repeat -405px -230px;
    width: 53px;
    height: 52px;
}
.marker-cluster-medium {
    background: url('/images/new_sprites.png') no-repeat -332px -229px;
    width: 56px;
    height: 55px;
}
.marker-cluster-large {
    background: url('/images/new_sprites.png') no-repeat -251px -224px;
    width: 66px;
    height: 65px;
}
.marker-cluster {
    background-clip: padding-box;
    border-radius: 20px;
}
.marker-cluster div {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
    border-radius: 15px;
    font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
    line-height: 30px;
}

.cr_content_wrapper .cr-sm-icon-fb {
    background: url('/images/new_sprites.png') no-repeat -543px -14px;
}
.cr_content_wrapper .cr-sm-icon-x {
    background: url('/images/new_sprites.png') no-repeat -542px -104px;
}
.cr_content_wrapper .cr-sm-icon-ig {
    background: url('/images/new_sprites.png') no-repeat -542px -45px;
}
.cr_content_wrapper .cr-sm-icon-tik {
    background: url('/images/new_sprites.png') no-repeat -543px -73px;
}
.cr_content_wrapper .cr-sm-icon-fik {
    background: url('/images/flickr-20.png') no-repeat;
}
.cr_content_wrapper .cr-sm-icon-wim {
    background: url('/images/vimeo-20.png') no-repeat;
}
.cr_content_wrapper .cr-sm-icon-linkd {
    background: url('/images/linkedin-20.png') no-repeat;
}
.cr_content_wrapper .cr-sm-icon-youtu {
    background: url('/images/youtube-20.png') no-repeat;
}

/*Header icons*/
.header-fs-bg{
    content: '';
    background: url('/images/new_sprites.png') no-repeat -308px -13px;
    width: 34px;
    height: 28px;
    display: inline-flex;
    margin-right: 5px;
}
.search-button::before{
    content: '';
    background: url('/images/new_sprites.png') no-repeat -112px -163px;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 7px;
    left: 30px;
}
.hdl-sa-header::before{
    content: '';
    background: url('/images/new_sprites.png') no-repeat -165px -169px;
    width: 18px;
    height: 16px;
    position:relative;
    display: inline-block;
    margin-right:5px;
}

/*Footer bottom icons*/
a.fb-facebook{
    background:url('/images/new_sprites.png') no-repeat -256px -6px;
    width: 38px;
    height: 38px;
}

.article-star-icon::before{
    content:'';
    background: url('/images/new_sprites.png') no-repeat -165px -169px;
    display: inline-block;
    height: 16px;
    width: 18px;
    vertical-align: middle;
    margin-right:15px;
}
.quick-stats-li::before {
    content: '';
    position: absolute;
    top: 6px;
    left: -17px;
    width: 7px;
    height: 12px;
    background: url('/images/new_sprites.png') no-repeat -72px -120px;
}
.quick-links-list .quick-stats-li{
    margin:8px 0 8px 17px;
}
.quick-links-list .quick-stats-li::before{
    left: -17px;
    top: 4px;
}
.tpl-cqf-row::before {
    content: '';
    position: absolute;
    top: 4px;
    left: -17px;
    width: 7px;
    height: 12px;
    background: url('/images/new_sprites.png') no-repeat -72px -120px;
}
.school-verified-icon.valid-icon{
    padding-bottom:5px;
}
.sec-header-icon{
    position:relative;
    display:inline-flex;
    align-items: center;
    justify-content: center;
}
.icon-48-48 > .sec-header-icon{
    width: 48px;
    height: 48px;
    vertical-align: middle;
}
.icon-41-41 > .sec-header-icon{
    width: 41px;
    height: 41px;
    vertical-align: middle;
}
.icon-41-40 > .sec-header-icon{
    width: 41px;
    height: 40px;
    vertical-align: middle;
}
.icon-24-23 > .sec-header-icon{
    width: 24px;
    height: 23px;
    vertical-align: middle;
}
.icon-24-33 > .sec-header-icon{
    width: 24px;
    height: 33px;
    vertical-align: middle;
}
.icon-32-32 > .sec-header-icon{
    width: 32px;
    height: 32px;
    vertical-align: middle;
}
.icon-33-33 > .sec-header-icon{
    width: 33px;
    height: 33px;
    vertical-align: middle;
}
.icon-35-30> .sec-header-icon{
    width: 35px;
    height: 30px;
    vertical-align: middle;
}
.icon-34-32 > .sec-header-icon{
    width: 34px;
    height: 32px;
    vertical-align: middle;
}
.featured-placement-icon{
    background: url('https://www.privateschoolreview.com/images/featured_payment_star.png') no-repeat;
}
.serch-ico{
    background: url('/images/new_sprites.png') no-repeat -354px -6px;
}
.find-school-icon {
    background: url('/images/new_sprites.png') no-repeat -56px -154px;
}
.ra-icon{
    background: url('/images/new_sprites.png') no-repeat -155px -106px;
}
.mpa-icon{
    background: url('/images/new_sprites.png') no-repeat -4px -105px;
}
.quick-links-icon{
    background: url('/images/new_sprites.png') no-repeat -104px -106px;
}
.idea-icon{
    background: url('/images/new_sprites.png') no-repeat -413px -8px;
}
.login-head-icon{
    background:url('/images/new_sprites.png') no-repeat -255px -56px;
}
.aisc-icon {
    background: url('/images/new_sprites.png') no-repeat -206px -160px;
}
.video-icon {
    background: url('/images/new_sprites.png') no-repeat -460px -110px;
}
.news-icon {
    background: url('/images/new_sprites.png') no-repeat -14px -13px;
}
.job-icon{
    background: url('/images/new_sprites.png') no-repeat -308px -13px;
}
.request-info-icon{
    background: url('/images/new_sprites.png') no-repeat -259px -107px;
}
/*SOInfoView*/
.icon-rating-score::before{
    margin:0 23px;
    display:inline-block;
    content:'';
    width: 49px;
    height: 50px;
    background: url('/images/new_sprites.png') no-repeat -480px -233px;
	transform:scale(calc(39 / 49));
}
.icon-address::before{
    margin:0 29px;
    display:inline-block;
    content:'';
    width: 37px;
    height: 49px;
    background: url('/images/new_sprites.png') no-repeat -7px -232px;
	transform:scale(calc(39 / 49));
}
.icon-tel::before{
    margin:0 23px;
    display:inline-block;
    content:'';
    width: 49px;
    height: 50px;
    background: url('/images/new_sprites.png') no-repeat -117px -231px;
	transform:scale(calc(39 / 49));
}
.icon-website::before{
    margin:0 23px;
    display:inline-block;
    content:'';
    width: 52px;
    height: 40px;
    background: url('/images/new_sprites.png') no-repeat -181px -235px;
	transform:scale(calc(39 / 49));
}
.icon-submit-review::before{
    margin:0 23px;
    display:inline-block;
    content:'';
    width: 52px;
    height: 50px;
    background: url('/images/new_sprites.png') no-repeat -480px -233px;
	transform:scale(calc(39 / 49));
}
.icon-request::before{
    content:'';
    width: 33px;
    height: 33px;
    background: url('/images/new_sprites.png') no-repeat -259px -107px;
}
.icon-ss::before{
    content:'';
    width: 33px;
    height: 33px;
    background: url('/images/new_sprites.png') no-repeat -11px -163px;
}
.icon-large-request::before{
    content:'';
    width: 34px;
    height: 28px;
    background: url('/images/new_sprites.png') no-repeat -308px -13px;
}
.icon-direction:before {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 7px;
    height: 12px;
    background: url('/images/new_sprites.png')  no-repeat -72px -120px;
}
.so-jump-btn{
    background: url('/images/new_sprites.png') no-repeat -120px -21px;
    height: 5px;
    width: 9px;
}
.so-jump-btn.active{
    background: url('/images/new_sprites.png') no-repeat -120px -27px;
    height: 5px;
    width: 9px;
}
.jump-list-nav::before{
    content:'';
    background: url('/images/new_sprites.png') no-repeat -60px -70px;
    display:block;
    position: absolute;
    width: 25px;
    height: 12px;
    top: -11px;
    left: 40px;
    z-index: 11;
}

.toggle-chart-btn {
    position: absolute;
    left:-15px;
    bottom:0px;
    height:19px;
    background: url('/images/new_sprites.png') no-repeat -461px -2px;
    width: 29px;
    z-index: 10;
    cursor:pointer;
}
.dt-cells-1 .toggle-chart-btn{
    left: -moz-calc(50% - 15px);
    left: -webkit-calc(50% - 15px);
    left: -o-calc(50% - 15px);
    left: calc(50% - 15px);
}
/* State chart-expand toggle: draw the chevron in CSS using the brand blue
   (#1E8BC3) instead of the sprite's off-palette royal blue (Javier 2026-06-28:
   "verify color of buttons; is it using our default blues?"). Compound selector
   so it wins over the shared .toggle-chart-btn sprite rule; scoped to state
   pages (.state-toggle-chart-btn) so town/county/school toggles are untouched. */
.toggle-chart-btn.state-toggle-chart-btn{
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toggle-chart-btn.state-toggle-chart-btn::before{
    content: "";
    width: 7px;
    height: 7px;
    border: solid #1E8BC3;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);        /* points down (collapsed) */
    margin-top: -3px;
    transition: transform .15s ease;
}
.toggle-chart-btn.state-toggle-chart-btn.expanded::before{
    transform: rotate(-135deg);      /* points up (expanded) */
    margin-top: 3px;
}


/*Review star in table list*/
.icon{
    background-image:url('/images/new_sprites.png');
    -webkit-background-size: 640px 480px;
    background-size: 640px 480px;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
}
.icon-star, .icon-star-medium, .icon-star-mini, .icon-star-small {
    position: relative;
    vertical-align: text-top;
    margin-top:2px;
}
.icon-star-medium {
    width: 95px;
    height: 21px;
}
.star-medium-5 {
    background-position: -284px -326px;
}
.star-medium-15 {
    background-position: -265px -326px;
}
.star-medium-25 {
    background-position: -246px -326px;
}
.star-medium-35 {
    background-position: -227px -326px;
}
.star-medium-45 {
    background-position: -208px -326px;
}
.star-medium-50 {
    background-position: -7px -326px;
}
.star-medium-40 {
    background-position: -26px -326px;
}
.star-medium-30 {
    background-position: -45px -326px;
}
.star-medium-20 {
    background-position: -64px -326px;
}
.star-medium-10 {
    background-position: -83px -326px;
}
.star-medium-silver-5 {
    background-position: -284px -386px;
}
.star-medium-silver-15 {
    background-position: -265px -386px;
}
.star-medium-silver-25 {
    background-position: -246px -386px;
}
.star-medium-silver-35 {
    background-position: -227px -386px;
}
.star-medium-silver-45 {
    background-position: -208px -386px;
}
.star-medium-silver-50 {
    background-position: -7px -386px;
}
.star-medium-silver-40 {
    background-position: -26px -386px;
}
.star-medium-silver-30 {
    background-position: -45px -386px;
}
.star-medium-silver-20 {
    background-position: -64px -386px;
}
.star-medium-silver-10 {
    background-position: -83px -386px;
}
.icon-star{
    width: 80px;
    height: 18px;
}
.star-5 {
    background-position: -241px -297px;
}
.star-15 {
    background-position: -225px -297px;
}
.star-25 {
    background-position: -209px -297px;
}
.star-35 {
    background-position: -193px -297px;
}
.star-45 {
    background-position: -177px -297px;
}
.star-10{
    background-position: -71px -297px;
}
.star-20{
    background-position: -55px -297px;
}
.star-30{
    background-position: -39px -297px;
}
.star-40{
    background-position: -23px -297px;
}
.star-50{
    background-position: -7px -297px;
}
.icon-alt {
    position: absolute;
    left: -9999px;
    top: auto;
    display: block;
    width: 1px;
    height: 1px;
    line-height: 1px;
    font-size: 1px;
    overflow: hidden;
}
.icon-star-mini{
    width: 80px;
    height: 12px;
}
.star-mini-5{
    background-position: -241px -297px;
}

/*review start for review form*/
.starsContainer{
    margin-bottom:5px;
}
.starsContainer .starSprite{
    float:left;
}
.bigStar,.blueStar,.yellowStar {
    background: url('/images/new_sprites.png') no-repeat;
    width: 46px;
    height: 45px;
    background-size: 640px 480px;
}
.bigStar {
    background-position: -438px -425px;
    outline-width: 0;
    background-size: 640px 480px;
}
.yellowStar{
    background-position: -529px -425px;
    outline-width: 0;
    background-size: 640px 480px;
}
/*
MultipleSchoolsListView
PSRMultipleSchoolsListView
TopSchoolsListView
SONearbySchoolsListView
PSRSONearbySchoolsListView
SOPeopelAlsoViewedListView
*/
.top-featured-bg{
    background: url('/images/new_sprites.png') no-repeat -512px -168px;
    display: inline-block;
    height: 16px;
    width: 18px;
    margin-right:5px;
    margin-top:4px;
    vertical-align: top;
}
.featured-bg{
    background: url('/images/new_sprites.png') no-repeat -165px -169px;
    display: inline-block;
    height: 16px;
    width: 16px;
    margin-right:5px;
    margin-top:4px;
    vertical-align: top;
}
.top-ranked-bg{
    background: url('/images/new_sprites.png') no-repeat -466px -169px;
    display: inline-block;
    height: 16px;
    width: 16px;
    margin-right:5px;
    margin-top:4px;
    vertical-align: top;
}
.top-ranked-bg.quick-stats-bg{
    margin-top: 2px;
    
}

.blueribbon-bg{
    background: url('/images/new_sprites.png') no-repeat -63px -22px;
    display: inline-block;
    height: 13px;
    width: 20px;
    margin-top:7px;
    margin-right:5px;
}
.tpl-showmore-loading-gif{
    background: url("/images/showmoreloadingimage.gif") no-repeat scroll 0 50% rgba(0, 0, 0, 0);
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

/*National Data School List Header Start*/
.list-order{
    cursor: pointer;
}
.list-order::before{
    content:'';
    height: 16px;
    width: 16px;
    display: inline-block;
    padding: 0;
    cursor: pointer;
    margin-right: 4px;
    background: url('/images/new_sprites.png') no-repeat -167px -71px;
}
.list-order.list-order-desc::before{
    background: url('/images/new_sprites.png') no-repeat -115px -70px;
}
.list-order.list-order-asc::before{
    background: url('/images/new_sprites.png') no-repeat -215px -69px
}
/*National Data School List Header end*/

/*Top Listing Pages start*/
.tsl_metric_row.to_mark::before{
    content: '';
    display:inline-block;
    vertical-align:middle;
    position:relative;
    height: 36px; 
    width:38px;
    background: url("/images/ioc2.png") no-repeat 0 0;
    margin:auto 12px;
}
.to_mark_1::before{background-position: 0 0;}
.to_mark_2::before{background-position: -37px 0 !important;}
.to_mark_3::before{background-position: -74px 0 !important;}
.to_mark_4::before{background-position: -112px 0 !important;}
.to_mark_5::before{background-position: -150px 0 !important;}
.to_mark_6::before{background-position: -188px 0 !important;}
.to_mark_7::before{background-position: -225px 0 !important;}
.to_mark_8::before{background-position: -263px 0 !important;}
.to_mark_9::before{background-position: -301px 0 !important;}
.to_mark_10::before{background-position: -339px 0 !important;}
.to_mark_11::before{background-position: -377px 0 !important;}
.to_mark_12::before{background-position: -415px 0 !important;}
.to_mark_13::before{background-position: 0 -37px !important;}
.to_mark_14::before{background-position: -37px -37px !important;}
.to_mark_15::before{background-position: -74px -37px !important;}
.to_mark_16::before{background-position: -112px -37px !important;}
.to_mark_17::before{background-position: -150px -37px !important;}
.to_mark_18::before{background-position: -188px -37px !important;}
.to_mark_19::before{background-position: -225px -37px !important;}
.tsl_metric_row::after{
    content: '';
    display:inline-block;
    vertical-align:middle;
    position:relative;
    background: url('/images/sprites.png') no-repeat -214px -62px;
    width: 18px;
    height: 29px;
    margin-right:11px;
}
/*
SchoolMemberTabsView
StudentMemberTabsView
*/
.contact-us-bg::before{
    content:'';
    background: url('/images/new_school_sprites.png') no-repeat -9px -11px;
    display: inline-block;
    height: 29px;
    vertical-align: middle;
    width: 33px;
    padding-right: 10px;
}
.member-dashboard::before {
    content:'';
    background: url('/images/new_school_sprites.png') no-repeat -59px -10px;
    display: inline-block;
    width: 34px;
    height: 33px;
    vertical-align: middle;
    margin-right: 10px;
}
.active-tab.member-dashboard::before{
    background: url('/images/new_school_sprites.png') no-repeat -110px -62px;
}
.member-profile::before{
    content:'';
    background: url('/images/new_school_sprites.png') no-repeat -162px -61px;
    display: inline-block;
    width: 34px;
    height: 33px;
    vertical-align:middle;
    padding-right: 10px;
}
.active-tab.member-profile::before {
    background: url('/images/new_school_sprites.png') no-repeat -107px -8px;
}
.member-photo::before {
    content:'';
    background: url('/images/new_school_sprites.png') no-repeat -12px -116px;
    display: inline-block;
    width: 34px;
    height: 27px;
    vertical-align:middle;
    padding-right: 10px;
}
.active-tab.member-photo::before {
    background: url('/images/new_school_sprites.png') no-repeat -358px -14px ;
}
.member-video::before {
    content:'';
    background: url('/images/new_school_sprites.png') no-repeat -261px -118px;
    display: inline-block;
    width: 34px;
    height: 23px;
    vertical-align:middle;
    padding-right: 10px;
}
.active-tab.member-video::before {
    background: url('/images/new_school_sprites.png') no-repeat -59px -67px;
}
.member-house::before {
    content:'';
    background: url('/images/new_school_sprites.png') no-repeat -413px -61px;
    display: inline-block;
    width: 34px;
    height: 33px;
    vertical-align:middle;
    padding-right: 10px;
}
.active-tab.member-house::before {
    background: url('/images/new_school_sprites.png') no-repeat -309px -11px;
}
.member-stories::before {
    content:'';
    background: url('/images/new_school_sprites.png') no-repeat -361px -64px;
    display: inline-block;
    width: 34px;
    height: 29px;
    vertical-align:middle;
    padding-right: 10px;
}
.active-tab.member-stories::before {
    background: url('/images/new_school_sprites.png') no-repeat -259px -12px;
}
.member-job::before {
    content:'';
    background: url('/images/new_school_sprites.png') no-repeat -259px -62px;
    display: inline-block;
    width: 34px;
    height: 30px;
    vertical-align:middle;
    padding-right: 10px;
}
.active-tab.member-job::before {
    background: url('/images/new_school_sprites.png') no-repeat -209px -11px;
}
.member-upgrade::before {
    content:'';
    background: url('/images/new_school_sprites.png') no-repeat -213px -109px;
    display: inline-block;
    width: 34px;
    height: 33px;
    vertical-align:middle;
    padding-right: 9px;
    position:relative;
}
.active-tab.member-upgrade::before {
    background: url('/images/new_school_sprites.png') no-repeat -17px -62px;
}
.member-student::before {
    content:'';
    background: url('/images/new_school_sprites.png') no-repeat -110px -112px;
    display: inline-block;
    width: 34px;
    height: 33px;
    vertical-align:middle;
    padding-right: 10px;
}
.active-tab.member-student::before {
    background: url('/images/new_school_sprites.png') no-repeat -410px -10px;
}
.member-received::before {
    content:'';
    background: url('/images/new_school_sprites.png') no-repeat -209px -62px;
    display: inline-block;
    width: 34px;
    height: 29px;
    vertical-align:middle;
    padding-right: 10px;
}
.active-tab.member-received::before {
    background: url('/images/new_school_sprites.png') no-repeat -157px -10px;
}
/*
DropDownSubStudentsListView
*/
.profile-select-icon span{
    background: url('/images/new_sprites.png') no-repeat -120px -21px;
    display: inline-block;
    height: 5px;
    width: 9px;
}
/*
schools/school-dashboard
featured school payment
*/
.icon-member-submit::before{
    content:'';
    width: 34px;
    height: 33px;
    background: url('/images/new_school_sprites.png') no-repeat -158px -111px;
}
.icon-featured-placement-wrapper::before{
    content:'';
    background: url('/images/new_sprites.png') no-repeat -165px -169px;
    display: inline-block;
    height: 16px;
    width: 16px;
}
.social-proofy-latest-conversion-title{
    color:#1E8BC3 !important;
    font-size: 16px !important;
}
.social-proofy-latest-conversion-content img{
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
}
#featured_schools_payment .social-proofy-latest-conversion-title::before{
    content:"";
    background: url('/images/new_sprites.png') no-repeat -165px -169px;
    display: inline-block;
    height: 16px;
    width: 16px;
    margin-right: 5px;
    margin-top: 2px;
    vertical-align: top;
}
.social-proofy-latest-conversion-description{
    color:#616161 !important;
}

@media (min-width: 767px) and (max-width:1200px)
{
    .search-button::before{
        left: 6px;
    }
}

@media (max-width: 767px)
{
    .m-header-navbar{
        position:relative;
        background: url('/images/new_sprites.png') no-repeat -411px -64px;
        display: inline-block;
        vertical-align: middle;
        float:left;
        width: 21px;
        height: 20px;
        margin: 24px 0 0 20px;
    }
    .m-search-icon{
        position:relative;
        background: url('/images/new_sprites.png') no-repeat -363px -66px;
        display: inline-block;
        vertical-align: middle;
        float:right;
        width: 21px;
        height: 20px;
        margin: 24px 20px 0 0;
    }
    .m-search-icon.m-inactive{
        display: none;
    }
    .header-fs-bg{
        display: inline-block;
        vertical-align: middle;
    }
    .m-ci-arrow-down{
        background:url('/images/new_sprites.png') no-repeat -167px -22px;
        width:16px;
        height:13px;
        display:inline-block;
    }
    .m-ci-arrow-up{
        background:url('/images/new_sprites.png') no-repeat -514px -69px;
        width:16px;
        height:13px;
        display:inline-block;
    }
    .icon-rating-score::before,.icon-tel::before,.icon-website::before,.icon-submit-review::before{
        margin:0 23px 0 0;
    }
    .icon-address::before{
        margin:0 29px 0 6px;
    }
    /*SOTableView*/
    .chartimg-enlarge{
        display: inline-block;
        width: 16px;
        height: 16px;
        position: absolute;
        top: 3px;
        right: 3px;
        background: url('/images/new_sprites.png') no-repeat -514px -19px;
        cursor: -webkit-zoom-in;
        cursor: -moz-zoom-in;
        cursor: zoom-in;
    }
    /*
    SchoolMemberTabsView
    StudentMemberTabsView
    */
    .mobile-menu-bar span{
        background:url('/images/new_school_sprites.png') no-repeat -316px -65px;
        width: 25px;
        height: 25px;
        display: inline-block;
        margin-top: 14px;
        margin-left: 12px;
    }
}/*Form css basic*/
.form-group{
    margin-bottom:10px;
}
.form-label{
    font-family:Hind,sans-serif;
    display: inline-block;
    font-weight: 400;
    vertical-align: top;
}
.form-radio{
    display:inline-block;
    margin-right:10px;
}
/* round and adjust diff for input box and select */
.form-control {
    display: block;
    border-radius: 5px;
    -ms-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}
/*
IndexFindSchoolsFormView
FindSchoolsFormView
*/
#wfs-form-wrapper {
    position: absolute;
    background: transparent;
    z-index: 1;
    overflow: hidden;
    width: 100%;
}
.wfs-form{
    position: relative;
    display:block;
    margin:25px 0;
}
.wfs-form-group{
    display: inline-block;
    margin: 0 8px 13px;
    text-align: left;
    font-size: 18px;
}
.wfs-form-group.virtual-checkbox{
    display: block;
    text-align: center;
    margin: 0;
}
.wfs-input{
    width: 245px;
    padding: 7px;
}
.wfs-opt{
    width: 245px;
    padding: 3px 7px;
}
.wfs-submit{
    margin: 43px 0 20px 0;
    text-align: center;
    font-weight: 600;
}
.welcome-wrapper #fs-more-search, .welcome-wrapper .search-advanced {  
    font-size: 14px; 
    font-weight: 700; 
    float: none; 
}
.welcome-wrapper .search-advanced { 
    text-transform: uppercase; 
}
/*FindSchoolsFormView*/
.fs-form{
    position: relative;
    display:block;
    margin:25px 0;
    height:auto;
}
.fs-form-group{
    text-align: left;
    width: 100%;
    font-size:18px;
    font-weight: 400;
    margin:20px 0;
}
.fs-label{
    display:inline-block;
    width: 190px;
    margin-top: 5px;
}
.fs-input-wrapper {
    position: relative;
    display: inline-block;
    width: calc(100% - 208px);
    vertical-align: top;
}

.fs-input {
    display: inline-block;
    width: 100% !important;
    padding: 0 35px 0 7px !important;
    margin: 0;
    height: 37px;
    border: 1px solid #e2e6f4;
    box-shadow: 2px 2px 5px #eee inset;
    line-height: 37px;
    box-sizing: border-box !important;
}

.fs-crosshair-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #999;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 5;
}

.fs-crosshair-icon:hover {
    color: #666;
    transform: translateY(-50%) scale(1.1);
}

.fs-crosshair-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.fs-crosshair-icon.is-loading svg,
.fs-crosshair-icon.is-denied svg {
    /* Hide default crosshair when in other states */
}

.fs-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0,0,0,0.1);
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: fs-spin 0.8s linear infinite;
    display: none;
}

@keyframes fs-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fs-crosshair-icon.is-loading .fs-spinner {
    display: block;
}

.fs-crosshair-icon.is-loading svg {
    display: none;
}

.fs-crosshair-icon.is-denied {
    color: #e74c3c; /* Red for denied */
}

.fs-opt {
    display: inline-block;
    width: calc(100% - 208px);
    padding: 0 7px;
    margin: 0;
    height: 37px;
    border: 1px solid #e2e6f4;
    box-shadow: 2px 2px 5px #eee inset;
    line-height: 37px;
}
.fs-more-search-wrapper{
    margin-top:14px;
    margin-bottom:12px;
    text-align:right;
}
.fs-more-search-anchor{
    text-decoration:none;
    font-size:14px;
    margin-right:10px;
}
.fs-submit-wrapper{
    display:inline-block;
    padding-left: 190px;
}
#secondary-content .fs-label{
    display:block;
    font-size: 1em;
    font-weight: 400;
}
#secondary-content .fs-input-wrapper,#secondary-content .fs-opt{
    width: calc(100% - 15px);
}
#secondary-content .fs-submit-wrapper{
    text-align:left;
    padding:0;
}
/*** find school, online schools check box**/
.find-custom-checkbox-wrapper{
    display: inline-block;
    position: relative;
    width: auto;
    line-height: 1;
    vertical-align: middle;
    margin: 4px 0;
    padding-left: 4px;
    cursor: pointer;
}
.fs-form .find-custom-checkbox-wrapper{
    padding-left: 0;
    margin:0;
}
input.find-custom-checkbox::before{
    content: "";
    display: block;
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: -2px;
    left: -2px;
    background: #f7f7f7;
    border: 2px solid #e6e6e6;
    border-radius: 5px;
    opacity: 1;
    -moz-opacity: 1; 
    -webkit-opacity: 1; 
    filter: alpha(opacity=100); 
}
input.find-custom-checkbox::after {
    cursor: pointer;
    opacity: 0;
    -moz-opacity: 0; 
    -webkit-opacity: 0; 
    filter: alpha(opacity=0); 
    content: '';
    position: absolute;
    width: 8px;
    height: 4px;
    background: 0 0;
    top: 3px;
    left: 1px;
    border: 2px solid #f5b34f;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
input.find-custom-checkbox {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin: 0;
    cursor: pointer;
    width: 15px;
    height: 15px;
}
input.find-custom-checkbox:checked::after {
    opacity: 1;
    -moz-opacity: 1; 
    -webkit-opacity: 1; 
    filter: alpha(opacity=100); 
}
.find-label {
    font-size:13px;
    margin:0 5px;
}
.fs-form .find-label {
    /* keep a gap between the custom checkbox and its text
       (Javier 2026-08-09: "add a blank space before 'Include FL virtual schools'") */
    margin:0 0 0 6px;
}

/* Location dropdown for find schools form */
.fs-location-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e2e6f4;
    border-top: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none;
    margin-top: -1px;
}

.fs-location-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-location-item {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.fs-location-item:last-child {
    border-bottom: none;
}

.fs-location-item:hover {
    background-color: #f8f9fa;
}

.fs-location-item.fs-location-detected {
    font-weight: 500;
    color: #2c3e50;
}

.fs-location-item.fs-location-current {
    color: #3498db;
}

.fs-location-icon {
    margin-right: 8px;
    display: inline-block;
    position: relative;
    width: 18px;
    height: 24px;
    vertical-align: middle;
}

/* Map marker icon for both detected location and current location */
/* Using sprite from icon-address: background position -7px -232px, size 37x49 */
.fs-location-icon.icon-pin::before,
.fs-location-icon.icon-gps::before {
    content: '';
    display: block;
    width: 37px;
    height: 49px;
    background: url('/images/new_sprites.png') no-repeat -7px -232px;
    transform: scale(0.5);
    transform-origin: top left;
    position: absolute;
    left: 0;
    top: -2px;
}

/* Autocomplete suggestion styles */
.fs-location-item.fs-location-autocomplete {
    padding: 10px 15px;
}

.fs-location-item.fs-location-autocomplete:hover {
    background-color: #e8f4f8;
}

.fs-location-item.fs-location-autocomplete .fs-location-icon {
    width: 18px;
    height: 18px;
    vertical-align: text-top;
}

.fs-location-item.fs-location-autocomplete .fs-location-icon.icon-search::before {
    content: '🔍';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.fs-location-text {
    display: inline-block;
    vertical-align: middle;
    flex: 1;
}

.fs-location-main {
    font-weight: 500;
    color: #2c3e50;
}

.fs-location-secondary {
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 2px;
}

.fs-location-item.fs-location-no-results {
    color: #999;
    font-style: italic;
    padding: 15px;
    text-align: center;
    cursor: default;
    pointer-events: none;
}

/* Make location field container relative for dropdown positioning */
.fs-form-group {
    position: relative;
}

.wfs-form-group {
    position: relative;
}

/*consultant list form*/
#cd-form{
    display:block;
    width:100%;
    margin-bottom:15px;
}
.cd-form-selection{
    position:relative;
    display:inline-block;
    width:70%;
    padding:4px 5px;
    height:35px;
    color:#545455;
    vertical-align: middle;
}
.cd-form-submit{
    margin-left:10px;
}
/*consultant list form*/
.cmp-form{
    float: left;
    display:block;
}
.cmp-form #divFirstSchool {
    padding-top: 20px;
    border-top: 1px solid #d0d0d0;
}
.cl-wrapper{
    display:inline-block;
}
.cmp-form-group{
    margin:20px;
}
.cmp-label {
    width: 180px;
    font: 300 18px Hind;
    display: inline-block;
}
.cmp-label strong{
    font-weight:600;
}
.cmp-opt{
    display:inline-block;
    width: 400px;
    height:37px;
}
.cmp-more-search-wrapper{
    margin:0 20px 12px;
    display:block;
    text-align:right;
}
.cmp-more-search-anchor{
    text-decoration:none;
    font-size:14px;
}
.cmp-submit-wrapper{
    text-align:right;
    margin:20px;
}
/*Contact Us Form*/
.feedback-form textarea {
    width: 90%;
}
/*Contact School Form*/
.cs-form{
    position:relative;
    display:block;
    font-size: 1rem;
}
.cs-form .form-control{
    display:inline-block;
}
.cs-label{
    width:130px;
}
.cs-input{
    width:300px;
}
.cs-radio {
    width:13px;
}
.cs-textarea {
    width:96%;
}
.cs-submit-wrapper {
    margin: 15px 5px;
}
/*Contact Consultant Form*/
.cc-form{
    position:relative;
    display:block;
}
.cc-form .form-control{
    display:inline-block;
}
.cc-label{
    width:150px;
    font-weight: 400;
}
.cc-input,.cc-opt{
    width:300px;
}
.cc-submit{
    margin-left:150px;
}
/*request Log Info Form*/
.identify-form{
    position:relative;
    display:block;
    font-size: 1rem;
    margin:20px 0;
}
.identify-form .form-control{
    display:inline-block;
}
.identify-label{
    width:150px;
}
.identify-opt{
    width:300px;
}
/*request Log Contacted Form*/
.contacted-form{
    position:relative;
    display:block;
    font-size: 1rem;
    margin:20px 0;
}
.contacted-form .form-control{
    display:inline-block;
}
.contacted-label{
    width:150px;
}
.contacted-input{
    width:300px;
}
.contacted-checkbox-label{
    display:inline;
}
/*school widget and api Form*/
.sw-api-ul{
    list-style:disc;
    margin-left: 40px;
}
.sw-api-form{
    position:relative;
    display:block;
    margin-top: 30px;
}
.sw-api-form .form-control{
    display:inline-block;
}
.sw-api-label{
    width:30%;
    font-weight: 400;
}
.sw-api-input{
    width:63%;
}
.sw-api-textarea {
    width:63%;
}
.sw-api-submit-wrapper {
    margin: 15px auto 5px 30%;
}
/* 
School Login Form 
Student Login Form
*/
.login-form{
    position:relative;
    display:block;
    margin:20px 0;
}
.login-form .login-form-group{
    text-align:center;
}
.login-form-group.lfg-no-left{
    text-align: left;
    margin-left: calc(50% - 55px);
}
.login-form .form-control{
    display:inline-block;
}
.login-form .login-label{
    width:94px;
    vertical-align: middle;
    padding: 2px;
}
.login-form .login-input{
    width:192px;
    padding: 3px;
}
.lfg-helplink-wrapper{
    padding-top: 3px; 
}
.login-help-link{
    display:block;
    font-size: 14px;
    margin-top:8px;
}
/*
lost-password
forgot-password
reset-password
*/
.lost-pw-form{
    position:relative;
    display:block;
    margin:20px 0;
}
.lost-pw-form .lost-pw-form-group{
    text-align:center;
}
.lost-pw-form .form-control{
    display:inline-block;
}
.lost-pw-form .lost-pw-label{
    width:172px;
    vertical-align: middle;
    padding:2px;
}
.lost-pw-form .lost-pw-input{
    width:244px;
    padding: 3px;
}
.lost-pw-form .lost-pw-text{
    width:244px;
    padding: 3px;
    text-align:left;
}

.lost-pw-submit-wrapper{
    text-align: left;
    margin-left: calc(50% - 36px);
}
/*SOReviewsView*/
.review-form{
    position:relative;
    display:block;
    margin:10px 0;

}
.form-body-wrapper{
    white-space: nowrap;
}
.review-form-group{
    margin-bottom:18px;
}
.review-info-group{
    width: calc(50% - 5px);
    display: inline-block;
    padding: 0;
    white-space: normal;
    box-sizing: border-box;
    vertical-align: top;
}
.review-info-group + .review-info-group{
    margin-left: 6px;
}
.review-label,.review-label-text{
    margin-bottom: 10px;
    color: #616161;
}
.review-opt,.review-input{
    width: 100%;
    font-weight: 400;
    border: 1px solid #d9d9d9;
    font-size: 14px;
    height: 39px;
    box-sizing: border-box;
}
.review-textarea {
    height: 122px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    resize: vertical;
    white-space:pre-wrap;
}
/*payment form*/
.payment-logo{
    width:257px;
    height:auto;
}
.payment-radio{
    display:inline-block;
}
.payment-btn{
    width: 255px;
}
.payment-btn-text{
    min-height: 39px;
}
.fp-label{
    display:block;
}
form.right-featured-payment .fp-opt{
    width:250px;
    display:inline-block;
}
form.left-featured-payment .fp-opt{
    width: 440px;
    display:inline-block;
}
.fp-seals-img{
    display:block;
    margin-top:10px;
    max-width: 320px;
    width: 100%;
}
/*
LeftMailingListFormView
RightMailingListFormView
*/
.lpml-form-group-wrapper{
    margin:0 10px;
}
.rpml-form-group-wrapper{
    margin:10px 0;
}
.lpml-header-label,.rpml-header-label{
    display:inline;
}
.lpml-header-checkbox,.lpml-checkbox,.lpml-btm-checkbox,
.rpml-header-checkbox,.rpml-checkbox,.rpml-btm-checkbox,
.lpml-addl-email-checkbox,.rpml-addl-email-checkbox{
    display:inline-block;
}
.lpml-header-checkbox, .lpml-btm-checkbox,
.rpml-header-checkbox, .rpml-btm-checkbox,
.lpml-addl-email-checkbox,.rpml-addl-email-checkbox{
   vertical-align:middle;
}
.lpml-addl-email-label,.rpml-addl-email-label{
    display:inline;
    cursor:pointer;
}
.lpml-form-group{
    display:inline-flex;
    width:calc((100% - 20px)/3);
    align-items:center;
    justify-content:normal;
}
.lpml-label,.rpml-label{
    padding-left:13px;
    font-size: 18px;
    color: #616161;
    font-weight: 400;
}
.lpml-btm-input-label,.rpml-btm-input-label{
    width:45px;
}
.lpml-btm-input,.rpml-btm-input{
    display:inline-block;
    margin-left:5px;
}
.lpml-seals-img,.rpml-seals-img{
    display:block;
    width:100%;
    max-width: 320px;
    margin-top:10px;
}
.rpml-form-group-wrapper .ms-selectall{
    display:none !important;
}
@media (min-width: 1200px)
{
    .identify-submit{
        margin-left:150px;
    }
}
@media (min-width: 767px) and (max-width:1200px)
{
    .cl-wrapper{
        display:block;
    }
    .cmp-opt{
        display:block;
        width:500px;
    }
    .cs-label{
        width:110px;
    }
    .cc-textarea {
        width: 300px;
    }
    .identify-label{
        width:110px;
    }
    .identify-submit{
        margin-left:110px;
    }
    .contacted-input{
        width:280px;
    }
    .lpml-form-group{
        display:inline-flex;
        width:calc((100% - 20px)/2);
        align-items:center;
        justify-content:normal;
    }
}
@media (max-width: 981px) {
    .wfs-input{
        padding: 9px 7px; 
        /* adjust diff in heights */
    }
}
@media (max-width: 767px)
{
    /*consultant list form*/
    .cd-form-selection{
        width:50%;
    }
    .cd-form-submit{
        font-size:16px;
        margin-left:5px;
    }
    /*
    IndexFindSchoolsFormView
    FindSchoolsFormView
    */
    .fs-label{
        display:block;
        width: 240px;
    }
    .fs-input-wrapper,.fs-opt{
        width: calc(100% - 15px);
    }
    .fs-submit-wrapper{
        text-align:left;
        padding:0;
    }
    .cmp-form{
        float:none;
    }
    .cl-wrapper{
        display:block;
    }
    .cmp-opt{
        font-size:16px;
        display:block;
        width:96% ;
    }
    .cs-form .form-radio{
        display:block;
    }
    .cs-input,.cs-textarea {
        width:90%;
    }
    .cc-input,.cc-opt,.cc-textarea {
        width:90%;
    }
    .cc-submit{
        margin-left:0;
    }
    .identify-opt{
        width:90%;
    }
    .identify-submit{
        margin-left:0px;
    }
    .lost-pw-form .lost-pw-label{
        width:120px;
    }
    .lost-pw-form .lost-pw-input,.lost-pw-form .lost-pw-text{
        width:192px;
    }
    /*featured placement box*/
    .left-featured-payment-box{
        margin:0;
        display:none;
    }
    .lpml-form-group{
        display:inline-flex;
        width:calc(100% - 20px);
        align-items:center;
        justify-content:normal;
    }
    
}
@media (max-width: 480px) {
    .cmp-form-group{
        margin:20px 0px;
    }
}
@media (max-width: 336px)
{
    .cd-form-submit{
        padding: 7px 7px 4px;
    }
    .lost-pw-form .lost-pw-label{
        width:110px;
    }
    .lost-pw-form .lost-pw-input,.lost-pw-form .lost-pw-text{
        width:182px;
    }
}/*Member Public Basic CSS*/
.member-top-wrapper {
    background-color: #f7f7f7;
    margin: 20px 0;
    padding:15px 22px;
    position:relative;
    display:block;
}
.member-top-left{
    float:left;
    display:block;
}
.member-top-right{
    float:right;
    display:block;
}
.member-top-link{
    margin-right:30px;
}
A.contact-us-bg{
    margin-right:0px;
}
A.member-top-link:last-of-type{
    margin-right:10px;
}
.member-second-wrapper{
    display:flex;
    font-size:100%;
}
.member-second-left{
    width: 220px;
    background-color: #1e8cc5;
    border-radius: 5px 0 0;
}
.member-second-right {
    width: 718px;
    width: calc(100% - 260px);
    width: -webkit-calc(100% - 260px);
    width: -moz-calc(100% - 260px);
    padding: 20px;
    min-height: 350px;
    position: relative;
}
nav.member-menu{
    position:relative;
    display:block;
}
A.member-menu-tab{
    font-size: 14px;
    font-weight: 700;
    display: flex;
    padding: 20px 0 20px 20px;
    border-right: 10px solid #1c85bb;
    text-decoration: none;
    color: #fff;
    border-bottom: 1px solid #4ba3d1;
    align-items: center;
}
A.member-menu-tab.active-tab{
    color: #1e8bc3;
    border-right: none;
    background-color:#fff;
}
H2.featured-text{
    font-size: 28px;
    color: #1e8cc5;
    font-weight: 600;
}
H2.member-para-title {
    font-size: 28px;
    color: #1e8cc5;
    font-weight: 600;
    text-align: center;
    margin-top: 20px;
}
H2.yellow-form-title{
    color: #f5b34f;
    font-size: 32px;
    font-weight: 700;
}
H3.banner-heading-text{
    color: #f5b34f;
    font-weight: 700;
    font-size:18px;
    margin-bottom:10px;
}
.member-paras-wrapper{
    margin-bottom:40px;
}
.member-para{
    font-size: 18px;
    font-weight: 400;
    margin-top: 30px;
}
.member-para.member-nav{
    margin-top: 20px;
}
.member-nav li.quick-stats-li::before{
    left: -27px;
}
.member-para-1{
    font-size: 18px;
    font-weight: 400;
    margin-top: 15px;
}
.member-para.cmp-list-abbr{
    font-size:16px;
    font-weight:400;
}
/*
/students/edit-login
/schools/edit-login
*/
.stch-cp-form,.stch-cu-form,.stch-caue-form{
    font-size: 18px;
    font-weight: 400;
    position:relative;
    display:block;
    margin:30px 0 20px;
}
.add-user-section{
    display:none;
}
.stch-cup-label{
    width: 20%;
    text-align: right;
    font-weight: 400;
}
.stch-cup-input-wrapper{
    display:inline-block;
    width: 78%;
}
.stch-cup-input{
   width: 90%;
   text-align:left;
   margin:0 auto;
}
.stch-cup-submit-wrapper{
    text-align:center;
}
@media (min-width: 1200px)
{
    .member-second-right{
        width:917px;
    }
}
@media (min-width: 767px) and (max-width:1200px)
{
    .member-second-left{
        width:28%;
    }
    .member-second-right{
        width: 66%;
    }
    H2.yellow-form-title{
        font-size: 24px;
    }
    .stch-cup-label{
        width: 100%;
        display:block;
        text-align:left;
    }
    .stch-cup-input-wrapper{
        width: 100%;
        display:block;
        text-align:left;
    }
    .stch-cup-input{
        margin:0;
    }
    .stch-cup-submit-wrapper{
        text-align:left;
    }
}
@media (max-width: 767px){
    .member-second-wrapper{
        font-size:90%;
    }
    .member-top-link{
        margin-right:10px;
    }
    A.member-menu-tab{
        padding: 10px 0 10px 10px;
    }
    #mobile-menu-container {
        background-color: #1e8cc5;
    }
    .mobile-menu-bar{
        position:absolute;
        top:0;
        left:0;
        width:50px;
        height:50px;
        background-color:#1e8cc5;
    }
    .member-second-left{
        display:none;
    }
    .member-second-right{
        width: 100%;
        padding:10px;
    }
    .banner-wrapper{
        padding: 5px 5px 15px;
    }
    H2.yellow-form-title{
        font-size: 22px;
        text-align: center;
    }
    .stch-cup-label{
        width: 100%;
        display:block;
        text-align:left;
    }
    .stch-cup-input-wrapper{
        width: 100%;
        display:block;
        text-align:left;
    }
    .stch-cup-input{
        margin:0;
    }
    .stch-cup-submit-wrapper{
        text-align:left;
    }
}
@media (max-width: 480px){
    .member-second-right{
        padding:5px;
    }
}/**
 * Hero Section Component Styles
 *
 * Unified styles for hero sections across school profiles and town/county pages.
 * Uses CSS custom properties for theming.
 *
 * @see HeroSectionView.inc.php - Abstract parent class
 * @see SchoolHeroView.inc.php - School profile hero
 * @see TownHeroView.inc.php - Town/county listing hero
 *
 * ============================================================
 * REFACTORING TODO - CSS cleanup after hero migration:
 * ============================================================
 *
 * AFTER ALL PAGES MIGRATED, REMOVE FROM schools.css:
 * - .welcome-wrapper styles (legacy bg-view)
 * - .bg-view-* classes
 * - .town-bg-* classes
 * - Old filmstrip/lightbox styles duplicated here
 *
 * ADD THEME CLASSES FOR NEW PAGES:
 * - .hero-section.hero-state (state listing pages)
 * - .hero-section.hero-county (county listing pages)
 * - .hero-section.hero-district (district listing pages)
 *
 * ============================================================
 */

/* ============================================================
   CSS CUSTOM PROPERTIES (THEMING)
   ============================================================ */

.hero-section {
	--hero-link-color: #F5A623;
	--hero-bg-overlay: rgba(0, 0, 0, 0.5);
	--hero-text-color: #FFFFFF;
	--hero-height-desktop: 500px;
	--hero-height-mobile: 510px; /* Increased from 450px to accommodate full filmstrip thumbnails per Javier feedback Jan 31 2026 */
}

/* School theme - orange links, reduced height */
.hero-section.hero-school {
	--hero-link-color: #F5A623;
	--hero-height-desktop: 500px;
}

/* Town theme - blue links */
.hero-section.hero-town {
	--hero-link-color: #4da6ff;
}

/* Town Hero - Additional overrides */
.hero-section.hero-town .hero-left-content {
	/* No dark background - relies on middle photo overlay for contrast */
	padding: 15px;
}

/* Checkmark bullet styling for town pages.
   Javier 2026-05-18 P2.4: body copy off-white (#f4f6f8) over hero photo. */
.hero-section.hero-town .checkmarks_list,
.hero-section.hero-town .checkmark_content {
	color: #f4f6f8 !important;
}

/* Links in checkmarks - orange (rollover blue without underline) */
.hero-section.hero-town .checkmarks_list a,
.hero-section.hero-town .checkmark_content a {
	color: #F5A623 !important;
	/* Orange links per Javier feedback */
	text-decoration: underline !important;
}

.hero-section.hero-town .checkmarks_list a:hover,
.hero-section.hero-town .checkmark_content a:hover {
	color: #4da6ff !important;
	/* Blue on rollover */
	text-decoration: none !important;
}

/* Bubble text (tooltips) - blue */
.hero-section.hero-town .checkmark_content .bubble_text {
	color: var(--hero-link-color) !important;
	text-decoration: underline;
	cursor: help;
}

/* Javier 2026-05-21 (later evening): bullet sizing + spacing matched to the
   School Notes section on school profile pages — `.grey-bullet-box ul li`
   uses font-size 16px / line-height 1.5 with browser-default `::marker`
   (which renders the bullet glyph at the text font-size and vertically
   centers it on the first line of text via line-box metrics).

   Replication for the hero (which uses positioned `::before` rather than a
   real `<ul><li>`):
   • Bullet glyph at 16px (was 18) — same as text.
   • line-height: 1 on the glyph so it occupies its natural box.
   • padding-left 16px on .checkmark_content reserves ~7px gap after the
     ~5-6px wide glyph (matches School Notes browser-default gap).
   • margin-top: 5px on the ::before pushes the bullet down so its visual
     center aligns with the first-line optical center of the text (text
     line-height 1.5 × 16 = 24px → center ≈ 12px from top; bullet glyph
     center at ~8px from line-box top, so margin-top: 5px lands center at
     ~13px, optically aligned with the text). */
.hero-section.hero-town .checkmark_content {
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	padding: 3px 0 3px 16px !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	margin-left: 0 !important;
	width: auto !important;
}

.hero-section.hero-town .checkmark_content::before {
	color: #f5b34f !important;
	font-size: 16px !important;
	line-height: 1 !important;
	left: 0 !important;
	top: 3px !important;
	margin-top: 5px !important;
}

.hero-section.hero-town .checkmark_row {
	margin-bottom: 1px !important;
	background: transparent !important;
}

.hero-section.hero-town .checkmarks_list {
	margin: 0 !important;
	padding: 0 !important;
}

/* Quick Stats styling - transparent background (same as school page) */
.hero-section.hero-town .hero-stats-box {
	position: relative;
	z-index: 11;
	/* Javier 2026-05-11: the -7px lift hack was compensating for the inner
	   .section-wrapper 20px margin (now zeroed universally — see the
	   .hero-section .hero-stats-box .quick-stats-box rule below). Box top
	   now lines up directly via .hero-right-content { top: 44px }. */
}
/* Javier 2026-05-18 P2.3: glass-card Quick Facts. Brand-blue darkened mask
   (#0082C5 → 20% lightness → rgba(0, 54, 82, 0.82)) with backdrop-filter
   blur so the box reads as a frosted-glass panel against the photo. */
.hero-section.hero-town .hero-stats-box .quick-stats-box {
	background-color: rgba(0, 54, 82, 0.82) !important;
	background: rgba(0, 54, 82, 0.82) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px;
	overflow: hidden;
}

.hero-section.hero-town .hero-stats-box .quick-stats-box .sec-content,
.hero-section.hero-town .hero-stats-box .quick-stats-box .section-content {
	background-color: transparent !important;
	background: transparent !important;
}

.hero-section.hero-town .hero-stats-box .quick-stats-box .quick-stats-ul,
.hero-section.hero-town .hero-stats-box .quick-stats-box .quick-stats-ul li,
.hero-section.hero-town .hero-stats-box .quick-stats-box .quick-stats-text {
	color: #f4f6f8 !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Quick Stats links - orange (same as bullet links) */
.hero-section.hero-town .hero-stats-box .quick-stats-box a {
	color: #F5A623 !important;
}

.hero-section.hero-town .hero-stats-box .quick-stats-box a:hover {
	color: #4da6ff !important;
	text-decoration: none !important;
}

.hero-section.hero-town .hero-stats-box .quick-stats-box header.section-header.sec-3-header {
	background-color: rgba(0, 130, 197, 0.65) !important;
	background: rgba(0, 130, 197, 0.65) !important;
}

.hero-section.hero-town .hero-stats-box .quick-stats-box header.section-header.sec-3-header>.sec-header-title-cnt {
	background-color: rgba(0, 130, 197, 0.4) !important;
	background: rgba(0, 130, 197, 0.4) !important;
}

/* ============================================================
   SCHOOL HERO - QUICK STATS STYLING
   ============================================================ */

/* Quick Stats box — Javier 2026-05-18 P2.3 glass card (same treatment as
   the town variant above; brand-blue 0.82 + backdrop blur + faint white border). */
.hero-section.hero-school .hero-stats-box .quick-stats-box {
	background-color: rgba(0, 54, 82, 0.82) !important;
	background: rgba(0, 54, 82, 0.82) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px;
	overflow: hidden;
}

/* D8 (2026-05-11): zero the global .section-wrapper { margin: 20px 0 } rule
   inside any hero variant (school, town, city, state listings, rankings).
   Without this, the visible Quick Facts blue box sat 20px below the positioned
   .hero-right-content wrapper, so .hero-right-content { top: 44px } never
   actually placed the box at the H1 cap-top. */
.hero-section .hero-stats-box .quick-stats-box {
	margin-top: 0 !important;
}

.hero-section.hero-school .hero-stats-box .quick-stats-box .sec-content,
.hero-section.hero-school .hero-stats-box .quick-stats-box .section-content {
	background-color: transparent !important;
	background: transparent !important;
}

/* Quick Stats text white */
.hero-section.hero-school .hero-stats-box .quick-stats-box .quick-stats-ul,
.hero-section.hero-school .hero-stats-box .quick-stats-box .quick-stats-ul li,
.hero-section.hero-school .hero-stats-box .quick-stats-box .quick-stats-text {
	color: #f4f6f8 !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Quick Stats links - ORANGE */
.hero-section.hero-school .hero-stats-box .quick-stats-box .quick-stats-ul a {
	color: #F5A623 !important;
}

/* Quick Stats header - blue theme (same as town) */
.hero-section.hero-school .hero-stats-box .quick-stats-box header.section-header.sec-3-header {
	background-color: rgba(0, 130, 197, 0.65) !important;
	background: rgba(0, 130, 197, 0.65) !important;
	border-bottom: none;
	overflow: hidden;
	/* Clips inner corners to fix dark pixel artifacts */
}

.hero-section.hero-school .hero-stats-box .quick-stats-box header.section-header.sec-3-header>.sec-header-title-cnt {
	background-color: rgba(0, 130, 197, 0.4) !important;
	/* Darker blue around icon - matches town page per Javier */
	background: rgba(0, 130, 197, 0.4) !important;
	border-radius: 4px 4px 0 0;
	/* Match parent corners to prevent dark pixel artifacts */
}

/* ============================================================
   HERO CONTAINER
   ============================================================ */

.welcome-wrapper.hero-section {
	position: relative;
	height: var(--hero-height-desktop);
	overflow: visible;
}

.hasBg .welcome-wrapper.hero-section {
	overflow: visible;
}

.hasBg .welcome-wrapper.hero-section {
	position: relative;
	height: var(--hero-height-desktop);
}

/* Hero height - both school and town pages */
.welcome-wrapper.hero-section.hero-school,
.hasBg .welcome-wrapper.hero-section.hero-school,
.welcome-wrapper.hero-section.hero-town,
.hasBg .welcome-wrapper.hero-section.hero-town {
	height: 500px;
}

/* ============================================================
   PHOTO GRID BACKGROUND
   ============================================================ */

.hero-section .hero-photo-grid {
	display: grid;
	/* Layout: decorative side | main content area | decorative side */
	/* Middle photo is 1300px (1180px content + 60px margin each side for better spacing) */
	/* On 1920px screen: (1920-1300)/2 = 310px each side */
	grid-template-columns: calc((100% - 1300px) / 2) 1300px calc((100% - 1300px) / 2);
	gap: 0;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* z-index:auto (not 0) so the grid does NOT create a stacking context.
	   The grid is still painted first (it's the first child → behind the
	   content layer), but its photo captions can now be raised above the
	   z-index:2 .hero-content-wrapper, making the middle photo's school-name
	   link clickable instead of trapped beneath the content layer
	   (Asana 1205875793927552). */
	z-index: auto;
}

/* For screens narrower than 1300px, middle takes full width */
@media (max-width: 1300px) {
	.hero-section .hero-photo-grid {
		grid-template-columns: 0 100% 0;
	}
}

/* Middle photo should be width of viewport on mobile (Javier feedback Jan 2026) */
@media (max-width: 767px) {
	.hero-section .hero-photo-grid {
		grid-template-columns: 0 100% 0 !important;
	}
}

.hero-section .hero-photo-item {
	overflow: hidden;
	position: relative;
}

.hero-section .hero-photo-item .hero-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* No opacity - use overlay instead for better color preservation */
}

/* Javier 2026-05-26 (sandbox round 2): school-name + best-state-rank label
   overlaid bottom-right of each hero photo. z-index:2 above the ::after dark
   overlay (z-index:1). Backend logic: show .hero-photo-rank only if the
   school's best state rank is ≤ 25 (or top 20% in state); omit the span
   entirely otherwise. Tiebreaker order: SAT → acceptance → tuition →
   diversity → faculty-edu → alphabetical. */
.hero-section .hero-photo-caption {
	position: absolute;
	bottom: 10px;
	right: 12px;
	text-align: right;
	/* Above .hero-content-wrapper (z-index:2) so the school-name <a> inside is
	   clickable; the grid no longer traps this in a z-0 context (see
	   .hero-photo-grid). The caption itself stays pointer-events:none so it
	   doesn't block content underneath — only its <a> child opts back in. */
	z-index: 3;
	pointer-events: none;
}
.hero-section .hero-photo-school {
	display: block;
	font-size: var(--t-label);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
	line-height: 1.35;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
	letter-spacing: 0.01em;
}
.hero-section .hero-photo-rank {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.68);
	line-height: 1.4;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
	letter-spacing: 0.02em;
}

/* Side cards (photos 1 & 3) — the entire panel is a single clickable link.
   The .hero-photo-item becomes a block <a>; transitions match the rest of
   the site's motion conventions. */
.hero-section a.hero-photo-item.hero-side-card {
	display: block;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-section a.hero-side-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
}
.hero-section a.hero-side-card .hero-photo {
	transition: transform 0.35s ease;
}
.hero-section a.hero-side-card:hover .hero-photo {
	transform: scale(1.03);
}
.hero-section a.hero-side-card::after {
	transition: opacity 0.25s ease;
}
.hero-section a.hero-side-card:hover::after {
	opacity: 0.70;
}
.hero-section a.hero-side-card .hero-photo-caption {
	pointer-events: auto;
}

/* Center badge (photo 2) — caption is pass-through except for the <a> child
   holding the school name, so Quick Facts + filmstrip + other interactive
   elements in the column stay reachable. */
.hero-section .hero-center-badge {
	pointer-events: none;
}
.hero-section .hero-center-badge a.hero-photo-school {
	pointer-events: auto;
	color: rgba(255, 255, 255, 0.95);
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.hero-section .hero-center-badge a.hero-photo-school:hover {
	opacity: 0.75;
	text-decoration: underline;
}

/* Black overlay layers on top of photos */
.hero-section .hero-photo-item::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 1;
}

/* Javier 2026-05-18 P1: black overlays → brand-blue (#0082C5 darkened to
   20% lightness → #003652 → rgba(0, 54, 82, ...)). Hue stays consistent
   with the nav bar and link colors.

   The spec is a continuous horizontal gradient across the whole hero:
     0%  → rgba(0,54,82,0.35)   left edge
     22% → rgba(0,54,82,0.65)
     50% → rgba(0,54,82,0.72)   center peak (text-zone legibility)
     78% → rgba(0,54,82,0.65)
     100%→ rgba(0,54,82,0.35)   right edge
   Implemented as 3 per-column gradient slices that join smoothly at the
   photo boundaries — left column 0.35→0.65, center 0.65→0.72→0.65,
   right 0.65→0.35. Uniform-color flat overlays would step visibly at the
   photo joins; the gradient slices read as one continuous fade.

   Blur stays on the CENTER overlay only — Javier's mock shows the outer
   photos sharp (girl on left readable, "Inspire" text on right readable),
   only the center text zone behind the heading reads as frosted glass. */

/* Javier 2026-05-21 revision: outer photos read "natural" (overlay
   reduced from 0.35 → 0.08, ≈85-100% photo brightness). Middle photo
   uses an asymmetric 4-stop gradient — DARKER on the left (0.72)
   behind the H1/contact text where readability matters, LIGHTER on
   the right (0.28) so the photo content remains visible. Targets per
   Javier's spec: outer 85-100% brightness, center ~60-70% with text
   zone darker. Avoid filter:brightness / opacity (would dim photos
   globally and prevent zone-by-zone control). Quick Facts card keeps
   its current treatment (blur + glass) — explicitly unchanged. */

/* Left column — near-clear overlay (only 0.08 blue wash, photo reads natural) */
.hero-section .hero-photo-item:nth-child(1)::after {
	background: rgba(0, 54, 82, 0.08);
}

/* Right column — same near-clear treatment as left */
.hero-section .hero-photo-item:nth-child(3)::after {
	background: rgba(0, 54, 82, 0.08);
}

/* Middle photo — asymmetric gradient: darker on the LEFT behind the
   H1 + contact text (0.72) → fades right (0.28) so the classroom photo
   stays visible on the right side. Slightly cooler dark-blue stops on
   the left (rgba(0,35,55) / rgba(0,45,70)) for extra text-zone weight,
   warming back to (0,54,82) toward the right. */
.hero-section .hero-photo-item:nth-child(2)::after {
	background: linear-gradient(
		90deg,
		rgba(0, 35, 55, 0.72) 0%,
		rgba(0, 35, 55, 0.72) 25%,
		rgba(0, 45, 70, 0.65) 50%,
		rgba(0, 54, 82, 0.42) 75%,
		rgba(0, 54, 82, 0.28) 100%
	);
}

/* Single image (school profile fallback — no 3-column grid). Same
   asymmetric gradient: left edge darker behind text, right edge clearer. */
.hero-section .hero-photo-grid-single .hero-photo-item::after {
	background: linear-gradient(
		90deg,
		rgba(0, 35, 55, 0.72) 0%,
		rgba(0, 35, 55, 0.72) 25%,
		rgba(0, 45, 70, 0.65) 50%,
		rgba(0, 54, 82, 0.42) 75%,
		rgba(0, 54, 82, 0.28) 100%
	);
}

.hero-section .hero-photo-grid-single .hero-photo {
	object-position: center center;
}

/* Javier 2026-05-18 P2.6: slight desaturation on the center hero photo only.
   Makes orange links and bullets pop more against the background photo. */
.hero-section .hero-photo-item:nth-child(2) .hero-photo,
.hero-section .hero-photo-grid-single .hero-photo {
	filter: saturate(0.88);
}

/* ============================================================
   CONTENT WRAPPER (ABOVE PHOTOS)
   ============================================================ */

.hero-section .hero-content-wrapper {
	display: flex;
	flex-direction: column;
	position: absolute;
	width: 100%;
	z-index: 2;
	bottom: 0;
	box-sizing: border-box;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 1180px;
	top: 0;
	padding: 0;
}

/* ============================================================
   HOMEPAGE HERO (.hero-home)
   Centered welcome headline + intro links + school-search form overlaid on the
   featured-school photo grid. Replaces the old arrow carousel.
   (Asana 1205875793927552, Javier 2026-06-22)
   ============================================================ */

/* index.css sets .welcome-wrapper { margin-top:100px } for the old carousel
   overlay; neutralize it on the hero root so the photo grid starts at the top. */
.welcome-wrapper.hero-section.hero-home {
	margin-top: 0;
}

/* Match the standard listing/school hero height (500px). The homepage was
   previously 615px to fit the centered welcome headline + search form ABOVE the
   thumbnail filmstrip; the filmstrip was removed (Javier 2026-06-25, large hero
   photos only), so the shorter standard height now fits without overlap and
   makes every site hero the same height (Javier 2026-06-28).
   min-height (not a fixed height) so the hero GROWS to fit the expanded
   "More search options" advanced filters instead of clipping them below the
   hero (Javier review 2026-06-28); see the .hero-content-wrapper flow override
   below — the photo grid is absolute top/bottom:0 so it covers the taller hero.
   Two selectors to win over the .hasBg variant of the .hero-town height rule. */
.welcome-wrapper.hero-section.hero-home,
.hasBg .welcome-wrapper.hero-section.hero-home {
	/* min-height, NOT fixed height (Mihajlo 2026-07-18): collapsed the hero sits
	   at the standard 500px, but with "More Search Options" open the content
	   column is ~532px — a fixed 500px clipped the LESS SEARCH OPTIONS link at
	   the photo edge. height:auto lets the flowed .hero-content-wrapper extend
	   the hero those ~30px; the absolute photo grid stretches to cover. */
	height: auto;
	min-height: 500px;
}

/* The shared .hero-content-wrapper is position:absolute (top/bottom:0), which
   pins it to the fixed hero height — the expanded advanced filters then spilled
   out below the hero. On the homepage flow it in normal position so it drives
   the hero's (min-)height and the hero grows to contain the filters. Only the
   homepage hero is affected; town/state heroes keep the absolute overlay. */
.hero-section.hero-home .hero-content-wrapper {
	position: relative;
	top: auto;
	bottom: auto;
	height: auto;
}

/* The search-form wrapper is position:absolute (legacy carousel overlay),
   which dropped it out of the centered column and let it overlap the
   filmstrip. Flow it in-line so the column sizes correctly. */
.hero-section.hero-home #wfs-form-wrapper {
	position: relative;
	overflow: visible;
}

.hero-section.hero-home .hero-home-center {
	text-align: center;
	color: #fff;
	padding: 50px 20px 0;
	box-sizing: border-box;
}

.hero-section.hero-home .hero-home-center .welcome-h1 {
	color: #fff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
	margin: 0 10px 18px;
}

.hero-section.hero-home .hero-home-center .welcome-h2 {
	color: #fff;
	font-weight: 400;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
	margin: 0 10px 26px;
}

.hero-section.hero-home .hero-home-center .welcome-h2 a {
	color: #f5b34f;
}

/* Mobile: the stacked search form is tall, so let the homepage hero grow and
   flow the filmstrip after the form instead of pinning it to the bottom (which
   clipped the form inside the fixed-height content wrapper). */
@media (max-width: 767px) {
	.welcome-wrapper.hero-section.hero-home,
	.hasBg .welcome-wrapper.hero-section.hero-home {
		/* Same as desktop: grow with the expanded search options. */
		height: auto;
		min-height: var(--hero-height-mobile);
	}
	/* Photo grid covers the full (now auto-height) hero, so the form sits on
	   the darkened photo like the old homepage. */
	.hero-section.hero-home .hero-photo-grid {
		height: 100%;
	}
	.hero-section.hero-home .hero-content-wrapper {
		height: auto;
		overflow: visible;
		padding-top: 24px;
	}
	/* Flow the filmstrip after the form (it's absolute bottom:0 by default). */
	.hero-section.hero-home .inline-filmstrip-wrapper {
		position: relative;
		order: 3;
		margin-top: 14px;
		padding-bottom: 12px;
	}
	.hero-section.hero-home .hero-home-center {
		padding-top: 8px;
	}
	.hero-section.hero-home .hero-home-center .welcome-h1 {
		font-size: 30px;
		margin-bottom: 12px;
	}
	.hero-section.hero-home .hero-home-center .welcome-h2 {
		font-size: 16px;
		margin-bottom: 16px;
	}
}

/* ============================================================
   HEADLINE / BREADCRUMBS SLOT
   ============================================================ */

.hero-section #content-headline-wrapper.has-breadcrumbs {
	margin: 0;
	text-align: left;
	padding-left: 0 !important;
}

.hero-section #main-headline-wrapper {
	padding: 8px 0;
	text-align: left;
	margin-left: 0 !important;
	padding-left: 0 !important;
	/* Leave space for Quick Facts box on right (336px sidebar + 20px gap) */
	max-width: calc(100% - 356px);
}

.hero-section .breadcrumbs {
	text-align: left;
	margin-left: 0 !important;
	padding-left: 0 !important;
}

.hero-section H1#main-headline {
	text-align: left;
	margin-left: 0 !important;
	padding-left: 0 !important;
	/* Leave space for Quick Facts box (336px sidebar + 20px gap) */
	max-width: calc(100% - 356px) !important;
}

/* Javier 2026-05-21: tightened drop shadow on H1 + breadcrumbs to
   `0 2px 4px / 0.45` (was 0 3px 8px / 0.55). Pairs with the lighter
   gradient overlay (outer 0.08, middle right-edge 0.28) — a chunkier
   shadow would now read as too heavy against the brighter photos. */
.hero-section H1#main-headline,
.hero-section .breadcrumbs {
	color: var(--hero-text-color);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.hero-section H1#main-headline {
	text-indent: 0 !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.welcome-wrapper.hero-section #content-headline-wrapper,
.welcome-wrapper.hero-section #content-headline-wrapper.chw-layout-1,
.welcome-wrapper.hero-section #content-headline-wrapper.chw-layout-2,
.welcome-wrapper.hero-section #content-headline-wrapper.chw-layout-1.has-hm,
.welcome-wrapper.hero-section #content-headline-wrapper.has-breadcrumbs,
body.hasBg .welcome-wrapper.hero-section #content-headline-wrapper,
body.hasBg .welcome-wrapper.hero-section #content-headline-wrapper.chw-layout-1 {
	width: auto !important;
	max-width: none !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

.welcome-wrapper.hero-section #main-headline-wrapper,
body.hasBg .welcome-wrapper.hero-section #main-headline-wrapper {
	width: auto !important;
	max-width: none !important;
	overflow: visible !important;
}

.welcome-wrapper.hero-section H1#main-headline,
body.hasBg .welcome-wrapper.hero-section H1#main-headline {
	overflow: visible !important;
	white-space: normal !important;
}

.hero-section .breadcrumbs a {
	color: var(--hero-link-color);
}

/* ============================================================
   CONTENT BODY (3-COLUMN LAYOUT)
   ============================================================ */

.hero-section .hero-content-body {
	display: flex;
	align-items: flex-start;
	font-size: 18px;
	flex: 1;
	color: var(--hero-text-color);
	background-color: transparent;
	padding: 10px 0;
	border-radius: 4px;
}

/* Left content column.
   Javier 2026-05-21 (late): stacked shadow (drop + halo) replaces the
   removed scrim layer. The halo (`0 0 8px rgba(0,0,0,0.6)`) lifts the
   text off any photo behind it without introducing a localized overlay
   that would show edges at the photo-column boundaries. Combined with
   the existing drop shadow it gives text reliable contrast even on
   high-variance / bright photos. */
.hero-section .hero-left-content {
	flex: 1;
	text-align: left;
	color: #f4f6f8;
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.55),
		0 0 8px rgba(0, 0, 0, 0.60);
	font-size: 15px;
	line-height: 1.5;
	margin-top: 0;
}

/* Javier 2026-05-21 (later evening): scrim ::before REMOVED.
   Every variant (linear, radial, masked) showed perceptible edges where
   the scrim crossed the underlying photo-column overlay boundaries —
   outer photos at 0.08 opacity vs middle at gradient created enough
   contrast to make any local darkening visible. Simpler solution
   accepted: drop the scrim entirely, rely on enhanced text-shadow
   (defined on `.hero-section .hero-left-content` below) to lift the
   bullet text off the photo without any new layer. */

/* Middle content column (ads) */
.hero-section .hero-middle-content {
	flex: 0 0 auto;
	text-align: left;
	margin-left: 20px;
	/* Javier 2026-08-07 ("ad slot marked with dashed lines, but no ad"): this
	   was a leftover DEBUG outline marking the hero ad placeholder — it drew an
	   orange dashed box whether or not the slot filled. The slot keeps its
	   reserved 300x250 so layout doesn't shift; it's just no longer outlined. */
	min-width: 300px;
	min-height: 250px;
	margin-right: 356px;
	/* 336px sidebar + 20px gap — ad right edge aligns with #main-content (824px) */
}

/* Right content column (Quick Stats) - aligned with secondary-content sidebar */
.hero-section .hero-right-content {
	position: absolute;
	top: 44px;
	/* Align top edge of the visible Quick Facts box with the visible top of the H1 cap
	   letters (Javier 2026-05-11 follow-up: 40px lined up with the line-box top, sat
	   4px too high; 44px lands on the cap-top of "Highlands School").
	   Paired with the rule below that zeroes the .section-wrapper 20px margin inside
	   .hero-stats-box — without that, the visible blue box sat 20px below this wrapper. */
	right: 0;
	/* Align flush with content edge */
	width: 336px;
	/* Match #secondary-content sidebar width (336px) so left edge aligns with mini map */
	text-align: left;
	margin-top: 0;
}

/* ============================================================
   CARD ROWS (LEFT CONTENT ITEMS)
   ============================================================ */

.hero-section .card-row {
	min-height: fit-content;
	border-bottom: none;
	text-align: left;
	margin-bottom: 4px;
	/* Javier 2026-04-26: text under school name is body role (16px). */
	font-size: var(--t-body);
	line-height: var(--lh-body);
	font-weight: 400;
}

.hero-section .card-row,
.hero-section .card-row span {
	color: var(--hero-text-color);
}

.hero-section .card-row a {
	color: var(--hero-link-color);
}

/* URL vertical centering next to favicon */
/* gap reduced from 8px to 4px per Javier feedback Jan 31 2026 - less space above social icons */
.hero-section .card-row.card-website .cr_content_wrapper {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

/* Website link - align favicon and text vertically (override schools.css display:block) */
.hero-section .card-row.card-website .cr_content_wrapper #cr-school-website {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	/* Reduced gap - match Tel: spacing */
}

.hero-section .card-row.card-website .cr_content_wrapper .websiteFaviconIcon {
	width: 20px !important;
	height: 20px !important;
	vertical-align: middle;
	flex-shrink: 0;
	position: relative;
	bottom: 0 !important;
	/* Override schools.css bottom:-10px */
}

/* Social media icons - separate row below website URL */
/* margin-top removed, now using parent gap for spacing per Javier feedback Jan 31 2026 */
.hero-section .cr-sm-social-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	width: 100%;
	margin-left: 0;
	margin-top: 0;
}

.hero-section .cr-sm-social-row:empty {
	display: none;
}

/* ============================================================
   QUICK STATS BOX
   ============================================================ */

.hero-section .hero-stats-box {
	/* Positioned by .hero-right-content */
}

.hero-section .quick-stats-box .sec-content {
	background-color: transparent;
}

.hero-section .section-wrapper {
	margin: 20px 0;
	border: 1px solid rgba(128, 128, 128, 0.5) !important;
}

/* ============================================================
   LINKS
   ============================================================ */

.hero-section .content_on_bg a {
	color: var(--hero-link-color);
}

/* ============================================================
   FILMSTRIP (PHOTO THUMBNAILS)
   ============================================================ */

.hero-section .inline-filmstrip-wrapper {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	/* Full-width overlay; only the thumbs need to catch clicks. Let the empty
	   areas pass through to the hero photo school-name links beneath
	   (Asana 1205875793927552). */
	pointer-events: none;
}


.hero-section .inline-filmstrip-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 10px 0;
	/* No horizontal padding — thumbs start at left edge of content wrapper, aligned with #main-content */
	/* Gradient removed per Javier feedback Feb 3 2026 */
	background: transparent;
	/* The wrapper is full-width + z-index:10, but the thumbs only occupy the
	   left ~824px. Its transparent right portion was eating clicks on the
	   middle photo's bottom-right school-name link (which lives in the z-0
	   photo grid). Make the empty container click-through; thumbs re-enable
	   their own pointer events below. (Asana 1205875793927552) */
	pointer-events: none;
}

.hero-section .inline-filmstrip-thumbs {
	pointer-events: auto;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	/* Enable horizontal scroll */
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Match main content column width */
	max-width: 824px;
}

.hero-section .inline-filmstrip-thumbs::-webkit-scrollbar {
	display: none;
}

/* Javier 2026-08-07: on the school profile — now the only page with a
   filmstrip — let it run the full content width (both columns, like the menu
   header below it) instead of stopping at the 824px main column, so desktop
   shows every thumbnail instead of clipping the last one. */
.hero-section.hero-school .inline-filmstrip-thumbs {
	max-width: 100%;
}
/* Javier 2026-08-09: keep the ORIGINAL 97px thumbnail size on the full-width
   strip — when there are too many, the last one truncates at the edge and the
   row auto-scrolls on rollover (hero-section.js initInlineFilmstripScroll),
   exactly the pre-change behaviour but across both columns. (Supersedes the
   brief shrink-to-fit variant.) */

.hero-section .inline-filmstrip-thumb {
	flex-shrink: 0;
	width: 97px;
	height: 76px;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	border: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* School page filmstrip - same as town (97x76) */
.hero-section.hero-school .inline-filmstrip-thumb {
	width: 97px;
	height: 76px;
	border-radius: 4px;
	border: none;
	position: relative;
}

.hero-section.hero-school .inline-filmstrip-thumb img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.hero-section.hero-school .inline-filmstrip-thumbs {
	gap: 11px;
}

.hero-section .inline-filmstrip-thumb:hover,
.hero-section .inline-filmstrip-thumb.active {
	border-color: var(--hero-link-color);
}

.hero-section .inline-filmstrip-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Town page filmstrip - larger thumbnails (97x76) */
.hero-section.hero-town .inline-filmstrip-thumb {
	width: 97px;
	height: 76px;
	border-radius: 4px;
	border: none;
	position: relative;
}

.hero-section.hero-town .inline-filmstrip-thumb img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.hero-section.hero-town .inline-filmstrip-thumbs {
	gap: 11px;
}

/* ============================================================
   MOBILE AD UNIT (ABOVE FILMSTRIP)
   Per Javier feedback Jan 31 2026 - ad above the fold on mobile
   ============================================================ */

.hero-section .hero-mobile-ad-wrapper {
	display: none; /* Hidden on desktop */
}

/* Post-hero mobile ad (for schools WITH photos) - hidden on desktop */
.hero-mobile-ad-wrapper.hero-post-mobile-ad {
	display: none;
}

/* ============================================================
   HERO LIGHTBOX STYLES (SHARED)
   Applies to: #town-filmstrip-lightbox, #school-hero-lightbox
   ============================================================ */

/* Symmetric vertical padding so the photo is centered with equal margin above
   and below; the bottom overlay (caption + filmstrip) rides up off the bottom edge. */
.school-lightbox-overlay .lightbox-container {
	padding: 30px 20px;
}

/* Image wrapper - shrink to fit image so overlay sits at bottom of photo */
.school-lightbox-overlay .lightbox-image-wrapper {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 1 auto;
	width: auto;
	max-width: 100%;
	margin-bottom: 0;
}

/* Make photo bigger - nearly full height of overlay */
.school-lightbox-overlay .lightbox-image {
	max-height: calc(90vh - 40px);
}

/* Bottom overlay - 50% black, spans full width of image wrapper */
/* Padding top reduced to 20px to match bottom padding per Javier feedback Jan 2026 */
.school-lightbox-overlay .lightbox-bottom-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
	padding: 20px 20px 20px;
	z-index: 5;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.school-lightbox-overlay .lightbox-caption {
	background: transparent;
	padding: 0;
	text-align: left;
}

.school-lightbox-overlay .lightbox-caption:empty {
	display: none;
}

.school-lightbox-overlay .lightbox-caption .lightbox-school-link {
	display: block;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.school-lightbox-overlay .lightbox-caption .lightbox-school-link:hover {
	text-decoration: underline;
}

.school-lightbox-overlay .lightbox-caption .lightbox-school-title {
	display: block;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.school-lightbox-overlay .lightbox-caption .lightbox-description {
	margin: 0;
	font-size: 18px;
	color: #fff;
	line-height: 1.4;
}

/* Counter - between caption and filmstrip */
.school-lightbox-overlay .lightbox-bottom-overlay .lightbox-counter {
	color: #fff;
	font-size: 13px;
	text-align: right;
	margin: 0;
	white-space: nowrap;
}

/* Filmstrip thumbs inside bottom overlay */
.school-lightbox-overlay .lightbox-bottom-overlay .lightbox-thumbs {
	display: flex;
	gap: 8px;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	flex-wrap: nowrap;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.school-lightbox-overlay .lightbox-bottom-overlay .lightbox-thumbs::-webkit-scrollbar {
	display: none;
}

.school-lightbox-overlay .lightbox-thumb {
	flex-shrink: 0;
	border-radius: 4px;
}

.school-lightbox-overlay .lightbox-thumb.active {
	border-color: #fff;
}

/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */

@media (max-width: 991px) {
	.hero-section .hero-middle-content {
		margin-right: 0;
		min-width: auto;
	}

	.hero-section .hero-right-content {
		position: relative;
		width: auto;
		margin-top: 10px;
	}
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */

@media (max-width: 767px) {

	/* Javier 2026-05-26 (sandbox round 2): caption insets + type sizes tighten
	   on mobile so the school name + rank line stay legible without crowding. */
	.hero-section .hero-photo-caption { bottom: 7px; right: 9px; }
	.hero-section .hero-photo-school  { font-size: 13px; }
	.hero-section .hero-photo-rank    { font-size: 11px; }

	/* The mobile grid collapses the two side photos to 0-width columns
	   (grid-template-columns: 0 100% 0), so their bottom-right captions squeeze
	   into ~11px slivers that overlap the center photo, and the center photo's
	   own caption bleeds onto the filmstrip below (Parimal QA 2026-06-16). The
	   per-photo name/rank overlay is a desktop affordance — on mobile the
	   filmstrip already shows the photos — so hide all hero photo captions. */
	.hero-section .hero-photo-caption { display: none; }

	.welcome-wrapper.hero-section,
	.hasBg .welcome-wrapper.hero-section {
		height: auto;
		min-height: var(--hero-height-mobile);
		overflow: visible;
	}

	.hero-section .hero-photo-grid {
		grid-template-columns: 0 100% 0;
		/* Middle photo takes full width (Javier feedback Jan 2026) */
		position: absolute;
		height: 510px;
		/* Increased to accommodate full filmstrip thumbnails per Javier feedback Jan 31 2026 */
		top: 0;
	}

	/* Content wrapper - match photo grid height for proper filmstrip positioning */
	.hero-section .hero-content-wrapper {
		position: relative;
		padding: 10px 15px 0 15px;
		/* Bottom padding removed - spacing to ad controlled by ad wrapper (15px) */
		padding-top: 80px;
		/* Move title down from header */
		max-width: 100%;
		box-sizing: border-box;
		/* Fixed height matching photo grid / hero so long state-page text stays inside
		   the hero bg and flows behind the (absolute-positioned) filmstrip at bottom —
		   same visual as town/west-chester where content fits naturally. */
		height: 510px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	/* Reorder elements: headline, content-body (without quick facts), filmstrip, then quick facts */
	.hero-section #content-headline-wrapper {
		order: 1;
	}

	.hero-section .hero-content-body {
		order: 2;
	}

	.hero-section .inline-filmstrip-wrapper {
		order: 3;
	}

	/* Headline wrapper - full width on mobile */
	.hero-section #main-headline-wrapper {
		max-width: 100% !important;
		padding-right: 15px;
	}

	.hero-section H1#main-headline {
		max-width: 100% !important;
		font-size: 29px; /* 20% increase from 24px per Javier feedback Jan 31 2026 */
		line-height: 1.2;
		word-wrap: break-word;
	}

	.hero-section .hero-content-body {
		flex-direction: column;
		padding: 5px 0;
		flex-grow: 0; /* Don't expand - keep compact */
	}

	.hero-section .hero-left-content {
		font-size: 14px;
		margin-top: 10px;
		padding-left: 0;
		max-width: 100%;
		width: 100%;
		overflow: hidden;
		line-height: 1.3; /* Tighter line height per Javier feedback Jan 31 2026 */
	}

	/* Reduce card row height on mobile - condense icons/text per Javier feedback Jan 31 2026 */
	.hero-section .card-row {
		min-height: auto;
		margin-bottom: 4px; /* Reduced from 8px */
	}

	/* Ensure social row has clearance from filmstrip */
	.hero-section .cr-sm-social-row {
		margin-bottom: 5px;
	}

	/* Mobile ad unit - inside hero for schools WITHOUT photos */
	/* Per Javier feedback Jan 31 2026 */
	.hero-section .hero-mobile-ad-wrapper {
		display: block;
		text-align: center;
		order: 2;
		margin-top: 16px;
		margin-bottom: 16px;
	}

	/* Post-hero mobile ad - AFTER hero section for schools WITH photos */
	/* Shows below filmstrip thumbnails, above floating menu per Javier feedback Jan 31 2026 */
	/* Note: This element is OUTSIDE .hero-section, so no parent selector */
	/* M14: equal top/bottom whitespace around the ad */
	.hero-post-mobile-ad {
		display: block !important;
		text-align: center;
		padding: 0 15px;
		margin-top: 16px;
		margin-bottom: 16px;
		background: transparent;
	}


	/* Schools without photos - reduce hero height since no filmstrip */
	.hero-section.no-filmstrip {
		min-height: 350px;
	}

	.hero-section.no-filmstrip .hero-photo-grid {
		height: 100%;
	}

	.hero-section.no-filmstrip .hero-content-wrapper {
		min-height: 350px;
	}

	.hero-section.no-filmstrip .hero-mobile-ad-wrapper {
		margin-top: 20px;
	}

	/* Hide ads on mobile */
	.hero-section .hero-middle-content {
		display: none;
	}

	/* Hide Quick Facts in hero on mobile - shown via main-content instead */
	.hero-section .hero-right-content {
		display: none !important;
	}

	/* Filmstrip adjustments for mobile - anchor near bottom of hero with balanced
	   margins. Javier 2026-04-26: was bottom:15px which combined with the
	   container's 10px bottom-padding gave a ~25px gap between thumb-bottom and
	   hero-bottom. Pulled to bottom:6px so the visual gap is roughly 16px (6 +
	   container's 10px internal padding) — matches the new mobile spacing target. */
	.hero-section .inline-filmstrip-wrapper {
		position: absolute;
		bottom: 6px;
		left: 15px;
		right: 15px;
		margin: 0;
		width: auto;
	}

	/* Cap hero intro bullets to the first 2 on mobile per Javier 2026-04-26 —
	   any bullets past the second one render behind the absolute-positioned
	   filmstrip thumbnails and aren't visible anyway. Desktop renders all. */
	.hero-section .checkmarks_list .checkmark_row:nth-child(n+3) {
		display: none;
	}

	.hero-section .inline-filmstrip-thumbs {
		max-width: 100%;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
	}

	/* Lightbox mobile overrides */
	/* Move caption and filmstrip to black area under photo per Javier feedback Jan 2026 */
	.school-lightbox-overlay .lightbox-image-wrapper {
		flex-direction: column;
		margin-bottom: 0;
	}

	.school-lightbox-overlay .lightbox-image {
		max-height: calc(100vh - 180px); /* Leave room for caption/filmstrip below */
	}

	/* Move bottom overlay under the photo instead of overlaying it */
	.school-lightbox-overlay .lightbox-bottom-overlay {
		position: relative;
		bottom: auto;
		left: auto;
		right: auto;
		background: #000; /* Solid black since it's now under the photo */
		padding: 10px 12px 12px;
		gap: 6px;
		width: 100%;
	}

	.school-lightbox-overlay .lightbox-bottom-overlay .lightbox-caption {
		font-size: 12px;
	}

	.school-lightbox-overlay .lightbox-bottom-overlay .lightbox-counter {
		font-size: 11px;
	}

	.school-lightbox-overlay .lightbox-bottom-overlay .lightbox-thumb {
		width: 55px;
		height: 42px;
		min-width: 55px;
	}
}

/* Mobile landscape */
@media (max-width: 926px) and (orientation: landscape) {

	.welcome-wrapper.hero-section,
	.hasBg .welcome-wrapper.hero-section {
		height: var(--hero-height-mobile);
	}

	.hero-section .headline-school {
		padding-left: 20px;
	}
}

/* Mobile portrait */
@media (max-width: 767px) and (orientation: portrait) {

	.welcome-wrapper.hero-section,
	.hasBg .welcome-wrapper.hero-section {
		height: auto;
		min-height: 450px;
		position: relative;
	}

	.hero-section .hero-photo-grid {
		min-height: 350px;
		/* Ensure photos visible but shorter */
	}
}
/* Javier 2026-08-07: "(Updated Aug. 4, 2026)" after each blog hero bullet —
   quieter than the article title/blurb it trails. */
.hero-blog .blog-hero-updated{
	font-size: var(--t-caption);
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
}

/* Javier 2026-08-09: /find-schools — the dropdowns sit directly on the photo
   like the homepage; strip the SectionView box chrome (green header + white
   card) from the search form inside the hero. Labels go white for legibility
   over the photo. */
.hero-find-schools .hero-left-content .section-wrapper {
	background: transparent;
	/* !important needed: the generic `.hero-section .section-wrapper` border
	   above is !important and was drawing a thin outline around the dropdown
	   module (Javier 2026-08-09: "remove the thin white line"). */
	border: none !important;
	box-shadow: none;
	margin: 0;
}
.hero-find-schools .hero-left-content .section-header { display: none; }
.hero-find-schools .hero-left-content .sec-content {
	background: transparent;
	padding: 0;
}
.hero-find-schools .hero-left-content label,
.hero-find-schools .hero-left-content .form-label {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.welcome-section {
    width: 100%;
    /* No bottom margin: the first content section below the hero already carries
       its own 20px top margin. The old 20px here stacked on top of it (the
       content column forms a BFC so the two margins don't collapse), leaving a
       40px gap under the hero. Zeroing it makes the hero→content gap the
       standard 20px (Javier 2026-06-28: "too much white space above recent
       articles / ad; use standard spacing"). */
    margin:0;
    position: relative;
}
.welcome-wrapper {
    margin-top: 100px;
    position: absolute;
    z-index: 1;
    text-align: center;
    color: white;
    width: 100%;
}
H1.welcome-h1{
    font-weight: 700; 
    font-size: 48px; 
    margin: 0 10px 20px 10px;
}
H2.welcome-h2{
    font-weight: normal; 
    margin: 0 10px 35px 10px;
    font-size: 20px;
    font-weight: 400;
}
H2.welcome-h2 A{
    color: #f5b34f;
}
/*feature school payment page*/
.fs-adv-box .featured-review {
    padding:10px 20px;
    color: #494949;
    font-style: italic;
    font-size:16px;
    font-family:Hind, sans-serif;
    font-weight: initial;
    border-radius: 5px;
    margin:10px 0;
}
.fs-adv-box .featured-review.featured-top-review{
    background-color: #e4f1fe;
}
.fs-adv-box .featured-review.featured-bottom-review{
    padding:5px 10px;
    margin:25px 0;
}
.fs-adv-box  A.featured-sample-link{
    display: block;
    width:100%;
    margin:10px 0;
}
.fs-adv-box img.featured-sample {
    width: 61.8%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.fs-adv-box .featured-sample-text{
    margin: 10px auto;
    font-size: 16px;
    color: #616161;
    font-style:italic;
    text-align:center;
}
/*top featured ranked overview box*/
.tpfl-school-detail {
    display: block;
    margin: 0 10px 0 10px;
    padding: 5px 0;
}
.tpfl-school-detail.list-row-border-2:last-of-type{
    border:none;
}
A.tpfl-school-link {
    line-height: 28px;
    text-align: left;
    font-weight: 600;
    font-size:20px;
}
.tpfl-thumb-desc-wrapper {
    display: block;
    width:auto;
    position:relative;
    cursor:pointer;
}
.tpfl-thumb-wrapper {
    float: left;
    max-width: 90px;
    cursor:pointer;
}
.tpfl-desc-wrapper {
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
    cursor:pointer;
}
/**/
.pml-list-wrapper{
    margin-bottom:10px;
}
UL.list-1.pml-list{
    margin-bottom:0;
    float:left;
    width:30%;
}
.pml-sublist{
    margin:5px 0 0;
}
.pml-li{
    margin-bottom:5px;
}
/*consultant listing page*/
.consulatnt-listing .cl-created-date{
    text-align:right;
}
.consulatnt-listing .cl-para{
    margin-bottom:10px;
    word-break: break-word;
}
.consulatnt-listing .cl-para.cl-para-desc ul{
    list-style:disc;
}
.consulatnt-listing .cl-para.cl-para-desc ul li{
    list-style-type:disc;
    list-style-position:inside;
    list-style-image:none;
    margin-left:30px;
}
/*about-us page*/
a.para-logo{
    display:block;
    margin-bottom:5px;
}
img.partner-logo{
    display:block;
    max-width:90%;
    height:auto;
}
img.cited-logo-grey{
    vertical-align:middle;
}
img.cited-logo-center{
    margin: 0 46px;
    margin: 0 calc((100% - 215px)/2);
}
@media (min-width: 767px) and (max-width:1200px)
{
    .fs-adv-box img.featured-sample{
        width:100%;
    }
    .login-form .left-label{
        width: 14%;
    }
    UL.list-1.pml-list{
        float:none;
        width:calc(100% - 20px);
    }
}
@media (max-width: 767px)
{
    .welcome-section{
        padding-top: 71px;
        margin:0 0 10px;
    }
    .fs-adv-box img.featured-sample{
        width:100%;
    }
    .fs-adv-box .featured-review.featured-bottom-review{
        margin:25px 0 0;
    }
    UL.list-1.pml-list{
        float:none;
        width:calc(100% - 20px);
    }
}
@media (max-width: 480px)
{
    .welcome-wrapper {
        margin-top: 50px;
    }
    .welcome-wrapper H1.welcome-h1 {
        font-size: 24px;
    }
}
@media (max-width: 336px)
{
}.compare-school-list H2.so-dt-title,.popular-comparison-wrapper H2.so-dt-title{
    margin:10px 30px;
}
img.cmp-school-thumb {
    display: block;
    margin: 10px auto;
    border-radius: 5px;
    width:95%;
    width: calc(100% - 20px);
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    height:auto;
    object-fit:cover;
    object-position:center top;
}
a.cmp-link-button{
    width: 200px;
    font-weight: bold;
    font-size: 18px;
    height: 30px;
    cursor: pointer;
    border: none;
    display: block;
    margin: 20px auto;
    background: #F4B350;
    border-radius: 5px;
    color: #FFFFFF;
    font-weight: 600;
    padding-top: 5px;
    text-decoration: none;
}
a.cmp-link-button:hover{
    background: #f9bf3b;
}

/*PopularComparisionTableView*/
.pct-se-wrapper{
    position:relative;
    display:block;
    text-align: left;
    width: 90%;
    margin: 0 auto;
}
.pct-se-wrapper .cr_content_wrapper{
    width:100%;
    display:block;
}
.pct-thumb-wrapper,.pct-links-wrapper{
    float:left;
    display:block;
    position:relative;
    margin-right:10px;
}
.pct-thumb-wrapper{
    width:90px;
}
.pct-thumb-wrapper + .pct-links-wrapper{
    width:calc(90% - 100px);
}
A.pct-school-link{
    line-height: 28px;
    text-align: left;
    font-size: 20px;
    font-weight: 600;
    display: block; 
}
.popular-comparison-wrapper .tpl-review-wrapper{
    margin-bottom:10px;
}
.popular-comparison-wrapper .cmp-data-table .dt-value-cell.dt-cells-2:nth-child(2n){
    border-right: 2px solid #e2e5f4;
}
.pct-top-placement-text{
    text-align:left;
}
@media (min-width: 767px) and (max-width:1200px)
{
}
@media (max-width: 767px)
{
    .compare-school-list H2.so-dt-title{
        text-align:center;
        margin:10px auto;
    }
    a.cmp-link-button{
        width: 90%;
        height:auto;
        font-size:12px;
    }
    A.pct-school-link{
        font-size: 18px;
        line-height:1.4;
    }
    .pct-thumb-wrapper, .pct-links-wrapper{
        float:none;
        margin-right:0;
    }
    .pct-thumb-wrapper + .pct-links-wrapper{
        width:auto;
    }
    .popular-comparison-wrapper .checkmark_content::before{
        display:none;
    }
    .popular-comparison-wrapper .checkmark_content{
        width: calc(100% - 15px);
        width: -webkit-calc(100% - 15px);
        margin-left:0;
        font-size: 15px;
    }
    .popular-comparison-wrapper .tpl-review-wrapper{
        font-size: 15px;
    }
    .popular-comparison-wrapper .cmp-data-table .dt-name-cell, .popular-comparison-wrapper .cmp-data-table .dt-value-cell {
        font-size: 15px;
    }
    .popular-comparison-wrapper .t20p-list-head-row{
        display:none;
    }
    .popular-comparison-wrapper .top20-placement-list.default-layout .category-col{
        display:none;
    }
    .popular-comparison-wrapper .top20-placement-list.default-layout .attribute-col{
        width:100%;
    }
}
@media (max-width: 336px)
{
}/* srn-v4.css — Shared v4 visual atoms (Phase 0 of member-area redesign,
   Mihajlo 2026-05-26).

   Source: extracted from pages/toplist.css lines 104–208 (the v4 grouped
   layout Javier landed 2026-05-26 via efe795b8 + 412a25bc + R3 da628535).
   Behavior-neutral lift: every rule below pairs the legacy `.tsl_*`
   selector with a neutral `.srn-*` name so /top-school-listings renders
   pixel-identical, while future member-area / auth pages can drop the
   `.srn-*` classes and inherit the same chrome.

   Naming convention (neutral atoms):
     .srn-card                 — outer bordered card (radius 4px, #ebebeb)
     .srn-card-header          — gray banded card header (flex row)
     .srn-card-header-label    — bold label inside the header
     .srn-card-header-select   — header dropdown (compact, white bg)
     .srn-section-header       — uppercase divider between row groups
     .srn-row                  — flex content row (icon + content + arrow)
     .srn-row-bottom-divider   — modifier: bottom 1px #ebebeb (except last)
     .srn-row-content          — vertical stack (link over description)
     .srn-row-link             — primary link line (16px/700, #2165d3)
     .srn-row-desc             — secondary description (13px, #6b7280)

   v4 design tokens (read from toplist.css 2026-05-26 R3 state, do not
   drift without Javier sign-off):
     card-border           #ebebeb           radius 4px
     header-band-bg        #e5e7eb
     section-divider-bg    #f3f4f6
     row-hover-bg          #f1f6ff
     icon-tile-bg          #ffffff           radius 8px
     row-link              #2165d3   16px / 700
     row-desc              #6b7280   13px / 1.35
     header-label          #616161   14px / 600

   Cascade: included from style-css.php immediately before pages/toplist.css
   so any later toplist.css declarations still override (none currently do,
   but preserves the original load order). */


/* ============================================================
   CARD CONTAINER
   ============================================================ */
.srn-card,
.tsl_container {
	border: 1px solid #ebebeb;
	border-radius: 4px;
	overflow: hidden;
}


/* ============================================================
   CARD HEADER (gray band + label + optional dropdown)
   ============================================================ */
.srn-card-header,
.tsl_header {
	display: flex;
	align-items: center;
	gap: 12px;
	clear: both;
	background-color: #e5e7eb;
	padding: 12px 16px;
	border-bottom: 1px solid #ebebeb;
}
.srn-card-header-label,
.tsl_header_text_1 {
	color: #616161;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	white-space: nowrap;
}
.srn-card-header-select,
.tsl_selection {
	margin: 0;
	width: auto;
	color: #616161;
	background-color: #fff;
	font-size: 14px;
}


/* ============================================================
   SECTION HEADER (uppercase divider between row groups)
   ============================================================ */
.srn-section-header,
.tsl_section_header {
	background-color: #f3f4f6;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 700;
	color: #616161;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-top: 1px solid #ebebeb;
	border-bottom: 1px solid #ebebeb;
}
.srn-section-header:first-child,
.tsl_section_header:first-child {
	border-top: none;
}


/* ============================================================
   CONTENT ROW (flex: icon + content + arrow)
   ============================================================ */
.srn-row,
.tsl_metric_row {
	display: flex;
	align-items: center;
	padding: 0;
}
/* Bottom-divider modifier — chain with `.list-row-border-3` legacy class
   so existing markup keeps the same border-bottom + last-child reset. */
.srn-row.srn-row-bottom-divider,
.tsl_metric_row.list-row-border-3 {
	border-left: none;
	border-right: none;
	border-bottom: 1px solid #ebebeb;
}
.srn-row.srn-row-bottom-divider:last-child,
.tsl_metric_row.list-row-border-3:last-child {
	border-bottom: none;
}
.srn-row:hover,
.tsl_metric_row:hover {
	background-color: #f1f6ff;
	cursor: pointer;
}
/* Icon tile: the global icon_features.php sprite paints via `.to_mark::before`.
   We add the white tile wash + tighten flex spacing. R3 correction: was
   #deeaf9 light-blue, now #ffffff white (Javier 2026-05-26). */
.srn-row.to_mark::before,
.tsl_metric_row.to_mark::before {
	flex-shrink: 0;
	margin: 12px 16px;
	background-color: #ffffff;
	border-radius: 8px;
}
/* Content stack — link over secondary description */
.srn-row-content,
.tsl_metric_content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	padding: 12px 0;
}
.srn-row-link,
.tsl_metric_link {
	font-size: 16px;
	color: #1E8BC3;
	font-weight: 700;
	display: block;
}
.srn-row-desc,
.tsl_metric_desc {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.35;
	display: block;
}
/* Arrow ::after rendered by icon_features.php — make it a proper flex item */
.srn-row::after,
.tsl_metric_row::after {
	flex-shrink: 0;
}


/* ============================================================
   MOBILE — listing-card atoms
   ============================================================ */
@media (max-width: 767px) {
	.srn-row.to_mark::before,
	.tsl_metric_row.to_mark::before {
		margin: 10px 12px;
	}
	.srn-section-header,
	.tsl_section_header {
		padding: 5px 12px;
	}
}


/* ============================================================
   AUTH-PAGE APPLICATION (Phase 1 — Mihajlo 2026-05-26)
   ============================================================

   Apply v4 chrome to the 6 unauthenticated auth pages
   (school-login, student-login, create-account, forgot-password,
   reset-password, request-login-info) by adding `srn-auth-page` to
   the body class. All rules are scoped to `body.srn-auth-page` so
   they cannot bleed into the rest of the site.

   What it does:
   - Page bg → #fcfcfc (matches v4 listing page)
   - SectionView wrappers (.sec-box-wrapper / .sec-contacted /
     .sec-reset-pw + the generic .sec-box-wrapper used for intros)
     get v4 card chrome: 1px #ebebeb border + 4px radius + white bg
   - Section headers (.sec-2-header / .sec-3-header) — override the
     legacy blue/green band to the v4 gray #e5e7eb band; hide the
     left icon block (sec-header-icon-bg) which is not in v4's
     card-header pattern
   - Form inputs — clean v4 input style (1px #d1d5db, 4px radius,
     8px 12px pad, 14px) + focus ring with the v4 link blue #2165d3
   - Form labels — v4 caption typography (#616161, 14px/500)
   - Submit button — keep orange CTA token (#f4b350 already matches
     v4 checkmark orange) but switch to 4px radius for card consistency
   - Mobile: prevent iOS zoom on input focus by upping font to 16px */

body.srn-auth-page {
	background-color: #fcfcfc;
}

/* Card chrome on every SectionView wrapper used by the 6 auth pages. */
body.srn-auth-page .sec-box-wrapper,
body.srn-auth-page .sec-contacted,
body.srn-auth-page .sec-reset-pw {
	border: 1px solid #ebebeb;
	/* Javier 2026-06-03: round the corners to match the redesigned cards
	   (was 4px — he flagged the login box corners as not rounded enough). */
	border-radius: 12px;
	overflow: hidden;
	background-color: #fff;
	margin-bottom: 16px;
}

/* Javier 2026-06-03: auth-page box headers = the BLUE module Javier asked for
   (the "School Login" box should match the "Did You Know?" / Quick Facts blue
   module on the redesigned pages, keeping its icon), NOT the earlier grey band.
   The legacy chrome (page-layout.css) already paints sec-3-header blue with a
   left icon cell + white title; the earlier auth pass overrode that to a grey,
   icon-hidden band. Reverse it: brand-blue band, white title, icon shown,
   left-aligned like the other blue modules. !important needed because the
   legacy selectors carry higher specificity. */
body.srn-auth-page .sec-2-header,
body.srn-auth-page .sec-3-header {
	background-color: #0082c5 !important;
	color: #fff !important;
	border-bottom: none;
	min-height: 0;
}
body.srn-auth-page .sec-2-header .sec-header-title-cnt,
body.srn-auth-page .sec-3-header .sec-header-title-cnt {
	background: #1E8BC3 !important;
	border-radius: 0;
}
body.srn-auth-page .sec-2-header H2.sec-header-title,
body.srn-auth-page .sec-3-header H2.sec-header-title,
body.srn-auth-page .sec-2-header .sec-header-title,
body.srn-auth-page .sec-3-header .sec-header-title {
	color: #fff !important;
	/* Javier 2026-07-30: header text was 16px — match the default blue-module
	   title size/weight/face (--t-section = 24px, 18px on mobile, Montserrat
	   from the base H2.sec-header-title rule) instead of a smaller custom one. */
	font-size: var(--t-section);
	font-weight: 500;
	margin: 0;
	padding: 12px 16px;
	text-align: left;
	height: auto;
	border-radius: 0;
}
/* Show the section icon (login key, etc.) in the blue header — same as the
   other blue modules. */
body.srn-auth-page .sec-2-header .sec-header-icon-bg,
body.srn-auth-page .sec-3-header .sec-header-icon-bg {
	display: table-cell !important;
	vertical-align: middle;
}

/* Section content padding for the form bodies */
body.srn-auth-page .sec-box-wrapper > *:not(header),
body.srn-auth-page .sec-contacted > *:not(header),
body.srn-auth-page .sec-reset-pw > *:not(header) {
	padding-left: 16px;
	padding-right: 16px;
}
body.srn-auth-page .sec-box-wrapper > *:first-child:not(header) {
	padding-top: 16px;
}
body.srn-auth-page .sec-box-wrapper > *:last-child {
	padding-bottom: 16px;
}

/* Inputs — clean v4-coherent style */
body.srn-auth-page input[type="text"],
body.srn-auth-page input[type="password"],
body.srn-auth-page input[type="email"],
body.srn-auth-page input[type="tel"],
body.srn-auth-page input[type="number"],
body.srn-auth-page select,
body.srn-auth-page textarea {
	border: 1px solid #d1d5db;
	border-radius: 4px;
	padding: 8px 12px;
	/* Javier 2026-07-30: box text was 14px — match the site's default 16px body. */
	font-size: 16px;
	background-color: #fff;
	color: #1f2937;
	line-height: 1.4;
	box-sizing: border-box;
}
body.srn-auth-page input[type="text"]:focus,
body.srn-auth-page input[type="password"]:focus,
body.srn-auth-page input[type="email"]:focus,
body.srn-auth-page input[type="tel"]:focus,
body.srn-auth-page input[type="number"]:focus,
body.srn-auth-page select:focus,
body.srn-auth-page textarea:focus {
	outline: none;
	border-color: #1E8BC3;
	box-shadow: 0 0 0 3px rgba(33, 101, 211, 0.15);
}

/* Labels */
body.srn-auth-page .form-label {
	color: #616161;
	/* Javier 2026-07-30: 14px → default 16px body size. */
	font-size: 16px;
	font-weight: 500;
}

/* Form group spacing */
body.srn-auth-page .form-group,
body.srn-auth-page .login-form-group,
body.srn-auth-page .lost-pw-form-group,
body.srn-auth-page .std-form-group {
	margin-bottom: 12px;
}

/* Inner-section headers used inside StudentCreateAccountFormView
   ("Username and Password", "Student Information", "About the Student",
   "Address and Telephone Number"). Restyle to match the v4
   `.srn-section-header` atom — uppercase gray divider band. */
body.srn-auth-page .stdf-section-title {
	background-color: #f3f4f6;
	color: #616161;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 0;
	margin: 16px 0 12px;
	border-top: 1px solid #ebebeb;
	border-bottom: 1px solid #ebebeb;
	line-height: 1.5;
	font-family: inherit;
}
body.srn-auth-page .stdf-section-title:first-child,
body.srn-auth-page form > .stdf-section-title:first-of-type {
	margin-top: 0;
}

/* Primary submit — keep orange CTA (matches v4 #f5b34f token), polish */
body.srn-auth-page input.submit,
body.srn-auth-page button.submit {
	border-radius: 4px;
	padding: 10px 22px;
	font-weight: 600;
	font-size: 15px;
}

/* Help / forgot link */
body.srn-auth-page .login-help-link,
body.srn-auth-page a.login-help-link {
	color: #1E8BC3;
	/* Javier 2026-07-30: same default 16px as the rest of the box text. */
	font-size: 16px;
}

/* Intro text card on /school-login + /create-account uses `.text-style`
   inside the wrapper — give it consistent text color/leading. */
body.srn-auth-page .text-style p,
body.srn-auth-page .text-style li {
	color: #374151;
	line-height: 1.55;
}


/* Auth-page mobile tweaks */
@media (max-width: 767px) {
	body.srn-auth-page .sec-2-header,
	body.srn-auth-page .sec-3-header {
		padding: 10px 12px;
	}
	body.srn-auth-page .sec-2-header .sec-header-title,
	body.srn-auth-page .sec-3-header .sec-header-title {
		font-size: 15px;
	}
	body.srn-auth-page input[type="text"],
	body.srn-auth-page input[type="password"],
	body.srn-auth-page input[type="email"],
	body.srn-auth-page input[type="tel"],
	body.srn-auth-page input[type="number"],
	body.srn-auth-page select,
	body.srn-auth-page textarea {
		font-size: 16px;
		padding: 10px 12px;
	}
}


/* ============================================================
   MEMBER-AREA v4 — Javier sandbox redesign (2026-06-01)
   ============================================================

   Integrated by Mihajlo's Claude from the design-sandbox round-trip
   (design-sandbox-javier-20260601-1442.zip): the page-scoped inline
   <style> blocks Javier authored on pages/school-dashboard.html and
   pages/update-school-data.html, plus the new --hdr-* header tokens
   (tokens.css). CHANGELOG/COMMUNICATION rationale in the zip.

   This REPLACES the earlier Phase 2/3/4 member-area treatment
   (Mihajlo 2026-05-26, the #2165d3 / grey-title-band / separate-stat-
   cards direction). Javier reviewed that on test and asked for the
   member area to follow the public-site design language instead:
   brand-blue #1E8BC3 shell, orange section titles, one-card stat row,
   profile-style data-table edit form.

   SCOPE: Javier scoped everything to `#school_information` (the body_id
   of school-dashboard + update-school-data) because the sandbox is a
   single static page. Rescoped here to `body.srn-member-area` — the
   shared shell hook injected by SchoolMemberTabsView + StudentMemberTabsView
   on every /schools/* + /students/* page — so the whole member area
   gets one consistent design (Javier also asked for the student area to
   match). Content-specific selectors (.stat-data-*, .mci-*, .schd-*,
   .stats-data-wrapper) only match on the pages that render that markup,
   so the broader scope is a safe no-op elsewhere.

   NOTE: the sandbox did NOT load this file (srn-v4.css), so Javier's
   overrides were tuned against baseline only. Reproducing his result on
   the real site therefore meant removing the old Phase 2/3/4 rules
   (done — this section replaces them) rather than layering on top.

   FOLLOW-UP (flagged to Javier): the shell + title/body treatment now
   covers student pages, but the student-dashboard CONTENT widgets and
   the other ~16 member form pages weren't in his sandbox — they inherit
   the shared shell + form atoms here but haven't had a dedicated pass. */


/* ── Shell: page canvas ── */
body.srn-member-area {
	background-color: #fcfcfc;
}

/* Clip the inner content (blue sidebar column) to the section-wrapper's
   radius — the card frame itself comes from .sec-content (toplist/schools). */
body.srn-member-area .section-wrapper {
	overflow: hidden;
}

/* ── Shell: top utility bar — grey rounded bar (matches the SAT page's
   "Show school map" bar) ── */
body.srn-member-area .member-top-wrapper {
	background-color: #f3f4f6;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: var(--space-3) var(--space-4);  /* 12 / 16 */
	margin: var(--space-5) 0;                /* 20px */
}
body.srn-member-area .member-top-link,
body.srn-member-area A.member-top-link {
	font-size: var(--t-label);               /* 14px */
	font-weight: 500;
	color: #1E8BC3;
	text-decoration: none;
}
body.srn-member-area .member-top-link:hover,
body.srn-member-area A.member-top-link:hover {
	text-decoration: underline;
}

/* ── Shell: left nav sidebar — brand-blue surface, label-role tabs,
   full-width dividers ── */
body.srn-member-area .member-second-left,
body.srn-member-area #member-second-left.member-second-left {
	background-color: #1E8BC3;
	border-radius: 0;
}
body.srn-member-area A.member-menu-tab {
	font-size: var(--t-label);               /* 14px */
	line-height: var(--lh-label);
	font-weight: 600;
	color: #fff;
	border-right: none;                      /* no inset — divider runs full width */
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	padding: var(--space-4) var(--space-5);  /* 16 / 20, even both sides */
}
body.srn-member-area A.member-menu-tab.active-tab {
	color: #1E8BC3;
	background-color: #fff;
	border-right: none;
}

/* Right content column padding (kept from the prior member-area pass). */
body.srn-member-area .member-second-right {
	padding: var(--space-6);                 /* 24px */
}

/* Featured/upgrade banner — keep orange CTA, just round the corners. */
body.srn-member-area .featured-banner-wrapper {
	border-radius: var(--space-1);
}


/* ============================================================
   DASHBOARD CONTENT (school-dashboard + shared member body text)
   ============================================================ */

/* Page title ("School Dashboard") — orange section-header title (L2),
   Montserrat-bold, left-aligned. Also catches the student-dashboard
   section titles ("Announcements", etc.) for a consistent look. */
body.srn-member-area H2.member-para-title {
	font-size: var(--hdr-2-size);            /* 24px */
	line-height: var(--lh-section);
	font-weight: 700;
	color: var(--hdr-2-color);               /* #f4b350 */
	font-family: 'Montserrat-bold', sans-serif;
	text-align: left;
	margin: 0 0 var(--space-4);              /* 16px */
}

/* Orange form/section titles — standardized network orange title spec. */
body.srn-member-area H2.yellow-form-title {
	font-size: var(--hdr-2-size);            /* 24px */
	line-height: var(--lh-section);
	font-weight: 700;
	color: var(--hdr-2-color);               /* #f4b350 */
	font-family: 'Montserrat-bold', sans-serif;
	margin: 0 0 var(--space-3);              /* 12px */
	/* explicit resets — older pass turned this into a grey band */
	background: none;
	border: none;
	padding: 0;
	text-align: left;
}

/* Suggestions intro — regular body text (replaces the old orange heading) */
body.srn-member-area .suggestion-intro {
	font-size: var(--t-body);                /* 16px */
	line-height: var(--lh-body);
	font-weight: 400;
	color: var(--tc-body);
	margin: 0 0 var(--space-3);              /* 12px */
}

/* Body paragraphs — body role */
body.srn-member-area .member-para,
body.srn-member-area .member-para-1 {
	font-size: var(--t-body);                /* 16px */
	line-height: var(--lh-body);
	font-weight: 400;
	color: var(--tc-body);
	margin-top: var(--space-5);              /* 20px */
}
body.srn-member-area .member-nav li.quick-stats-li {
	font-size: var(--t-body);
	line-height: var(--lh-body);
	color: var(--tc-body);
	margin-top: var(--space-2);              /* 8px */
}
body.srn-member-area .suggestion-badge-img {
	display: block;
	margin: var(--space-4) 0 0;              /* 16px above */
}
body.srn-member-area .member-para a,
body.srn-member-area .member-nav a {
	color: #1E8BC3;
}

/* Profile-suggestions banner — soft tinted card */
body.srn-member-area .suggestion-banner-wrapper {
	background-color: #f3f4f6;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: var(--space-5);                 /* 20px */
}

/* Instruction bullets → grey rounded box */
body.srn-member-area .member-paras-wrapper {
	background: #f3f4f6;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: var(--space-4) var(--space-5);  /* 16 / 20 */
	margin-bottom: var(--space-5);           /* 20px */
}
body.srn-member-area .member-paras-wrapper .member-para {
	margin: 0;
}
body.srn-member-area .member-paras-wrapper .member-para + .member-para,
body.srn-member-area .member-paras-wrapper ul.member-para {
	margin-top: var(--space-3);              /* 12px between paras inside the box */
}

/* Dashboard announcement sections ("Upcoming Application Deadlines",
   "Upcoming Events") — each its own white card with table-style rows
   (Javier 2026-06-12: "these should be their own cards" + "implement
   attached tables" = profile-table row dividers). */
body.srn-member-area .member-dl-card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
	padding: var(--space-4) var(--space-5);  /* 16 / 20 */
	margin: var(--space-5) 0 0;              /* 20px between cards */
}
body.srn-member-area .member-dl-card .member-para-title {
	margin: 0;
	padding-bottom: var(--space-3);          /* 12px */
	border-bottom: 1px solid #ebebeb;        /* closes the title off like a table header */
}
body.srn-member-area ul.member-dl-list {
	margin: 0;
	padding-left: 28px;                      /* room for the orange arrow (::before left:-27px) */
}
body.srn-member-area .member-dl-list li.quick-stats-li {
	margin: 0;
	padding: var(--space-3) 0;               /* 12px row height */
	border-bottom: 1px solid #ebebeb;        /* profile-table row divider */
}
body.srn-member-area .member-dl-list li.quick-stats-li:last-child {
	border-bottom: none;
	padding-bottom: var(--space-1);          /* 4px — card padding closes the bottom */
}

/* Saved / Requested Schools list — profile-table look (Javier 2026-06-12:
   "rebuild to the exact profile-table look we've established"). Replaces the
   legacy boxy per-column grey header cells with the so-data-table language:
   card frame, one continuous #f3f4f6 header band, full-width #ebebeb row
   dividers, hover wash. Scoped to the member layout so the shared tp-list-*
   classes on public listing pages are untouched. */
body.srn-member-area .tp-school-list.st-member-layout {
	margin-top: var(--space-5);              /* 20px (was 40px) */
	border: 1px solid #ebebeb;
	border-radius: 8px;
	overflow: hidden;
}
body.srn-member-area .tp-school-list.st-member-layout .tp-list-head-row .tp-list-column {
	background-color: #f3f4f6;               /* dt-name-cell grey */
	font-size: var(--t-label, 14px);
	font-weight: 600;                        /* dt-name-cell weight */
	color: var(--tc-body);
	margin: 0;                               /* kill the 3px gaps + 10px bottom */
	box-shadow: none;                        /* kill the legacy #ebebeb drop strip */
	padding: var(--space-3) 0 var(--space-3) 0.8%;
	border-bottom: 1px solid #ebebeb;
}
body.srn-member-area .tp-school-list.st-member-layout .tp-list-row.list-row-border-2 {
	border-bottom: 1px solid #ebebeb;        /* unify divider color (was #e5e5e5) */
}
body.srn-member-area .tp-school-list.st-member-layout .tp-list-row:last-of-type {
	border-bottom: none;
}
body.srn-member-area .tp-school-list.st-member-layout .tp-list-row:hover,
body.srn-member-area .tp-school-list.st-member-layout .tp-list-row.bg_hover_change:hover {
	background-color: #f9fafb;               /* profile-table hover wash */
}
body.srn-member-area .tp-school-list.st-member-layout .tp-list-row .tp-list-column {
	font-size: var(--t-body);
	color: var(--tc-body);
}

/* Statistics — all three figures on one row inside a single card.
   Per-stat boxes removed; the wrapper IS the one card. Resets clear the
   older pass's per-wrapper card chrome + child paddings. */
body.srn-member-area .stats-form-wrapper,
body.srn-member-area .contact-info-form-wrapper {
	background: none;
	border: none;
	border-radius: 0;
	overflow: visible;
	padding: 0;
	margin-bottom: 0;
}
body.srn-member-area .stat-data-row,
body.srn-member-area .stat-data-cell {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}
body.srn-member-area .stats-data-wrapper {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-3);                     /* 12px */
	margin: var(--space-4) 0 0;              /* 16px */
	padding: var(--space-5) var(--space-4);  /* 20 / 16 */
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
body.srn-member-area .stat-data-row {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	border-radius: 0;
	padding: 0;
	text-align: center;
	box-sizing: border-box;
	overflow: visible;                       /* external schm sets overflow:hidden, which clips the divider */
}
/* Thin grey divider between stats */
body.srn-member-area .stat-data-row + .stat-data-row::before {
	content: '';
	position: absolute;
	left: -6px;                              /* centered in the 12px gap */
	top: var(--space-1);                     /* 4px inset */
	bottom: var(--space-1);                  /* 4px inset */
	width: 1px;
	background: #e0e0e0;
	pointer-events: none;
}
body.srn-member-area .stat-data-cell {
	font-size: var(--t-heading);             /* 32px */
	line-height: var(--lh-heading);
	font-weight: 700;
	color: #1E8BC3;
	font-family: 'Montserrat-bold', sans-serif;
}
body.srn-member-area .stat-data-cell .very-de-emphasized {
	color: #9ca3af;
	font-weight: 700;
}
body.srn-member-area .stat-desc-cell {
	font-size: var(--t-label);               /* 14px */
	line-height: var(--lh-label);
	font-weight: 500;
	color: var(--tc-label);
	margin-top: var(--space-2);              /* 8px */
}

/* Forms — stats selector + contact-info inputs */
body.srn-member-area .stats-form {
	display: flex;
	gap: var(--space-3);                     /* 12px */
	margin: 0;
	flex-wrap: wrap;
}
body.srn-member-area .stats-form .form-control.stats-opt {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}
/* "Show me statistics for:" behaves like a field label */
body.srn-member-area .stats-form-wrapper > span {
	display: block;
	font-size: var(--t-label);               /* 14px */
	line-height: var(--lh-label);
	font-weight: 500;
	color: var(--tc-label);
	margin-bottom: var(--space-1);           /* 4px — matches .mci-label */
}
body.srn-member-area .form-control {
	font-size: var(--t-body);                /* 16px */
	line-height: var(--lh-body);
	color: var(--tc-body);
	padding: var(--space-2) var(--space-3);  /* 8 / 12 */
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background-color: #fff;
}
body.srn-member-area .mci-label,
body.srn-member-area .form-label {
	display: block;
	font-size: var(--t-label);               /* 14px */
	line-height: var(--lh-label);
	font-weight: 500;
	color: var(--tc-label);
	margin-bottom: var(--space-1);           /* 4px */
}
body.srn-member-area .mci-input {
	display: block;
	width: 100% !important;                  /* fill the column — overrides size="15" */
	max-width: none !important;
	box-sizing: border-box;
}

/* Contact form — explicit 2-column grid */
body.srn-member-area .member-contact-info-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);                     /* 16px */
}
body.srn-member-area .member-contact-info-form .clear-f {
	display: none;
}
body.srn-member-area .mci-form-group {
	width: auto;
	float: none;
	margin: 0;
	min-width: 0;
}

/* Two-column page layout (stats | contact) */
body.srn-member-area .member-form-wrapper {
	display: flex;
	gap: var(--space-7);                     /* 32px */
	margin-top: var(--space-6);              /* 24px */
	flex-wrap: wrap;
}
body.srn-member-area .stats-form-wrapper,
body.srn-member-area .contact-info-form-wrapper {
	flex: 1 1 320px;
	min-width: 0;
}

/* Primary CTA — keeps its orange request-info styling from schm css.
   Sits on its own grid row, sized to one input column. */
body.srn-member-area .mci-submit-wrapper {
	grid-column: 1 / 2;
	margin-top: 0;
}
body.srn-member-area .member-submit-btn-wrapper {
	max-width: none;
}
body.srn-member-area .member-submit-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}


/* ============================================================
   EDIT-PROFILE FORM (update-school-data — schd-* classes)
   ============================================================ */

/* Sub-section headers inside the card — header level 3 (brand blue, 18px).
   Sits below the orange card title (L2) and the blue page title (L1). */
body.srn-member-area .schd-form-title {
	font-size: var(--hdr-3-size);            /* 18px */
	line-height: var(--lh-section);
	font-weight: 700;
	color: var(--hdr-3-color);               /* #1E8BC3 */
	font-family: 'Montserrat-bold', sans-serif;
	margin: var(--space-6) 0 var(--space-2); /* 24 / 8 */
	padding: 0 var(--space-5);               /* indent to match card, rows are full-bleed */
}
body.srn-member-area .schd-form-title:first-child {
	margin-top: var(--space-5);
}

/* Field label = grey cell (left), like the profile data table's .dt-name-cell */
body.srn-member-area .schd-label {
	align-self: center;
	display: flex;
	align-items: center;
	flex: 0 0 40%;
	max-width: 40%;
	background: transparent;                 /* grey is painted on the row background now */
	margin: 0 var(--space-4) 0 0;
	padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
	font-size: var(--t-body);                /* 16px */
	font-weight: 600;
	color: var(--tc-body);
	box-sizing: border-box;
}

/* Input width tiers — sized to expected content from a small standard set. */
body.srn-member-area .schd-input,
body.srn-member-area .schd-opt {
	height: auto;
	line-height: var(--lh-body);
	box-sizing: border-box;
	align-self: center;
	margin: var(--space-2) 0;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	max-width: 360px;
}
/* Rich-text overview fields (Short / Detailed school overview) — CKEditor
   won't honor a centered/narrow width, so stack the row and let the editor
   fill the field full-width, left-aligned, helper anchored to the same edge. */
body.srn-member-area .schd-form-group:has(textarea.schd-opt) {
	flex-direction: column;
	align-items: stretch;
	padding: 0 var(--space-5) var(--space-4);
	background: none;                        /* override the 40% gradient */
}
body.srn-member-area .schd-form-group:has(textarea.schd-opt) > .schd-label {
	align-self: stretch;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin: 0 calc(-1 * var(--space-5)) var(--space-4);
	padding: var(--space-3) var(--space-5);
	background: #f3f4f6;
}
body.srn-member-area textarea.schd-opt {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 0 var(--space-3);
	min-height: 120px;
}
body.srn-member-area .schd-form-group:has(textarea.schd-opt) .cke,
body.srn-member-area .schd-form-group:has(textarea.schd-opt) .cke_chrome {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 var(--space-3) !important;
}
body.srn-member-area .schd-form-group:has(textarea.schd-opt) .notify-label {
	width: auto;
	margin: 0;
	padding-left: 0;
	text-align: left;
}
body.srn-member-area .schd-form-group:has(textarea.schd-opt) .notify-label .em-text {
	width: auto;
	text-align: left;
}
body.srn-member-area .schd-input-d {
	flex: 0 0 auto;
	width: 96px;
}      /* zip, year, AP count */
body.srn-member-area .schd-short-opt {
	flex: 0 0 auto;
	width: 120px;
}   /* Yes/No selects */
body.srn-member-area .schd-phone-input {
	flex: 0 0 auto;
	width: 200px;
}
body.srn-member-area .schd-phone-ext-input {
	flex: 0 0 auto;
	width: 72px;
}
body.srn-member-area .schd-grade-opt {
	flex: 0 0 auto;
	width: auto;
	min-width: 110px;
}
/* short numeric fields → narrow like "Year founded" (template uses plain
   .schd-input here; target by id — see COMMUNICATION.md, fold into
   .schd-input-d in the template later) */
body.srn-member-area #campus_size,
body.srn-member-area #college_acceptance_rate,
body.srn-member-area #acceptance_rate,
body.srn-member-area #students_color {
	flex: 0 0 auto;
	width: 96px;
}
body.srn-member-area .schd-endo-input {
	flex: 0 0 auto;
	width: 64px;
}
/* "[+] ADD MORE" trigger — brand-blue link */
body.srn-member-area .schd-ma-add-more {
	align-self: center;
	margin-left: var(--space-2);
	color: #1E8BC3;
	font-size: var(--t-label);
	font-weight: 600;
	cursor: pointer;
}
body.srn-member-area .schd-ma-add-more:hover {
	text-decoration: underline;
}
/* Inline orange buttons (Edit courses, Remove sport) — rounded, even padding */
body.srn-member-area .member-submit-3 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	padding: var(--space-2) var(--space-4);  /* 8 / 16 */
	border-radius: 6px;
	font-size: var(--t-label);
	font-weight: 600;
	line-height: 1;
}
/* Date-picker fields (First/Last Day of School) — calendar cue */
body.srn-member-area .ej-edit-datepicker-input {
	flex: 0 0 auto;
	width: 170px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 34px;
}
body.srn-member-area .schd-phone-ext-label {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	background: none;
	align-self: center;
	margin: 0 var(--space-2);
	padding: 0;
	font-weight: 500;
}

/* Form rows: continuous grey label column + white value area with bordered
   inputs, plus full-width horizontal dividers. */
body.srn-member-area .schd-form-group {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0 var(--space-5) 0 0;
	/* Grey label column painted as the row background so it fills the full
	   row height even when helper text wraps to a 2nd line */
	background: linear-gradient(to right, #f3f4f6 0, #f3f4f6 40%, #fff 40%);
}
/* Dividers drawn as full-width lines ABOVE the grey cell (z-index) so they
   cross both columns — same technique as the profile data tables. */
body.srn-member-area .schd-form-group::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: #ebebeb;
	z-index: 1;
	pointer-events: none;
}
body.srn-member-area .schd-form-group:last-of-type::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: #ebebeb;
	z-index: 1;
	pointer-events: none;
}
/* helper/notify text drops to its own line under the value column */
body.srn-member-area .schd-form-group .notify-label {
	flex: 1 0 100%;
	margin: var(--space-1) 0 0;
	padding-left: calc(40% + var(--space-4));
}

/* Helper / notify text — caption role */
body.srn-member-area .em-text {
	font-size: var(--t-caption);
	line-height: var(--lh-caption);
	color: var(--tc-caption);
}
body.srn-member-area .em-text.red {
	color: #d04646;
}

/* Form panel → white profile-style card the tabs attach to.
   Only the .active panel shows (external JS toggles .active on tab click). */
body.srn-member-area .schd-form-wrapper {
	display: none;
}
body.srn-member-area .schd-form-wrapper.active {
	display: block;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 0 0 12px 12px;            /* square top to meet the tabs */
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
	padding: 0;                              /* full-bleed: grey label cells reach the card edge */
	overflow: hidden;                        /* clip rows to the bottom radius */
}
/* Sports + Extracurriculars panels hold loose content (headings, checkbox
   grid, remove list) rather than the grey label-cell rows the full-bleed
   padding:0 above was made for — their text sat clipped against the card
   edge (Parimal 2026-08-11). These two get an inner gutter of their own. */
body.srn-member-area #schd-sports-form-wrapper.active,
body.srn-member-area #schd-extrac-form-wrapper.active {
	padding: var(--space-4) var(--space-5);
}
/* On phones the extracurricular text input (size=40) and type dropdown
   forced the card past the viewport — cap them to the panel width. */
body.srn-member-area .schd-extrac-form-group .schd-input,
body.srn-member-area .schd-extrac-form-group .schd-opt {
	max-width: 100%;
	box-sizing: border-box;
}
body.srn-member-area .schd-submit-wrapper {
	margin: 0;
	padding: var(--space-5);
}


/* ============================================================
   GENERIC MEMBER-AREA FORM ATOMS (other /schools/* + /students/*
   form pages: news, jobs, events, edit-login, update-student-data, …)
   Kept from the prior pass so those ~16 forms don't regress; focus
   ring recoloured to brand blue to match the new shell. The .schd-*
   / .form-control rules above are more specific and win on the pages
   that have a dedicated treatment.
   ============================================================ */
body.srn-member-area .member-second-right input[type="text"],
body.srn-member-area .member-second-right input[type="password"],
body.srn-member-area .member-second-right input[type="email"],
body.srn-member-area .member-second-right input[type="tel"],
body.srn-member-area .member-second-right input[type="number"],
body.srn-member-area .member-second-right input[type="url"],
body.srn-member-area .member-second-right input[type="date"] {
	border: 1px solid #d1d5db;
	border-radius: 6px;
	padding: var(--space-2) var(--space-3);
	font-size: var(--t-label);
	background-color: #fff;
	color: var(--tc-body);
	line-height: var(--lh-label);
	box-sizing: border-box;
}
body.srn-member-area .member-second-right input[type="text"]:focus,
body.srn-member-area .member-second-right input[type="password"]:focus,
body.srn-member-area .member-second-right input[type="email"]:focus,
body.srn-member-area .member-second-right input[type="tel"]:focus,
body.srn-member-area .member-second-right input[type="number"]:focus,
body.srn-member-area .member-second-right input[type="url"]:focus,
body.srn-member-area .member-second-right input[type="date"]:focus,
body.srn-member-area .member-second-right select:focus,
body.srn-member-area .member-second-right textarea:focus {
	outline: none;
	border-color: #1E8BC3;
	box-shadow: 0 0 0 3px rgba(30, 139, 195, 0.15);
}
body.srn-member-area .member-second-right .stch-cup-label {
	font-size: var(--t-label);
	font-weight: 500;
	color: var(--tc-label);
}
body.srn-member-area .member-second-right .stch-cup-input {
	width: 100%;
	max-width: 360px;
}


/* ============================================================
   MOBILE (≤767px) + DESKTOP TAB STRIP (≥768px)
   ============================================================ */

/* Section tabs integrated as pressable tabs on top of the form card.
   Desktop only — the bar is dpo-xllg-block (hidden ≤768px where the
   <select> takes over). */
@media (min-width: 768px) {
	body.srn-member-area .schd-nav-tab-wrapper {
		display: flex;
		gap: var(--space-1);                 /* 4px between tabs */
		margin: 0;
		border: none;
		border-radius: 0;
		overflow: visible;
	}
	body.srn-member-area a.schd-nav-tab-link {
		display: block;
		flex: 1 1 0;
		width: auto;
		height: auto;
		background: #1E8BC3;
		color: #fff;
		border: 1px solid #e0e0e0;
		border-bottom: none;
		border-radius: 8px 8px 0 0;
		font-size: var(--t-label);
		font-weight: 600;
		line-height: var(--lh-label);
		padding: var(--space-3) var(--space-2); /* 12 / 8 */
		text-align: center;
		cursor: pointer;
	}
	body.srn-member-area a.schd-nav-tab-link:hover {
		background: #176f9c;
	}
	body.srn-member-area a.schd-nav-tab-link.active {
		background: #fff;
		color: #374151;                      /* dark grey when selected */
		position: relative;
		z-index: 2;
		margin-bottom: -1px;                 /* merge into the card body */
	}

	/* Two-column layout for stats + contact on desktop */
	body.srn-member-area .member-form-wrapper {
		align-items: flex-start;
	}
}

@media (max-width: 767px) {
	body.srn-member-area .member-top-wrapper {
		margin: var(--space-3) 0;
		padding: var(--space-2) var(--space-3);
	}
	body.srn-member-area .member-second-right {
		padding: var(--space-4);
	}
	body.srn-member-area H2.yellow-form-title {
		text-align: left;
	}
	body.srn-member-area .member-para,
	body.srn-member-area .member-para-1 {
		margin-top: var(--space-4);
	}
	body.srn-member-area .stats-data-wrapper {
		gap: var(--space-2);
		padding: var(--space-4) var(--space-2);
	}
	body.srn-member-area .stat-data-cell {
		font-size: var(--t-section);         /* steps to 18px */
	}
	body.srn-member-area .member-form-wrapper {
		gap: var(--space-5);
	}
	body.srn-member-area .member-contact-info-form {
		grid-template-columns: 1fr;
	}
	body.srn-member-area .mci-submit-wrapper {
		grid-column: 1 / -1;
	}

	/* Edit-profile form: label stacks full-width above the value */
	body.srn-member-area .schd-label {
		flex: 1 0 100%;
		max-width: 100%;
		margin: 0 0 var(--space-2);
	}
	body.srn-member-area .schd-form-group {
		padding: var(--space-2) var(--space-4);
	}
	body.srn-member-area .schd-input,
	body.srn-member-area .schd-opt {
		width: 100%;
	}
	body.srn-member-area .schd-form-group .notify-label {
		margin-left: 0;
		padding-left: 0;
	}
	body.srn-member-area .em-text {
		width: auto;
	}

	/* Generic member-area form inputs — 16px to avoid iOS zoom */
	body.srn-member-area .member-second-right input[type="text"],
	body.srn-member-area .member-second-right input[type="password"],
	body.srn-member-area .member-second-right input[type="email"],
	body.srn-member-area .member-second-right input[type="tel"],
	body.srn-member-area .member-second-right input[type="number"],
	body.srn-member-area .member-second-right input[type="url"],
	body.srn-member-area .member-second-right input[type="date"] {
		font-size: var(--t-body);
		padding: var(--space-3) var(--space-3);
	}
}
/**National Data School List start**/
.ranked-school{
    position: relative;
    font-size: 16px;
    display: block;
    width: 92%;
    text-align: left;
    margin-bottom: 8px;
}
.ranked-school.rs-arrow::before{
    content: "";
    border: solid #f5b34f;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    margin-right:10px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.ranked-school strong{
    font-weight:500;
}
.nd-list-head-row{
    display:flex;
}
.nd-list-row{
    display:flex;
    align-items: center;
    justify-content: center;
}
.nd-list-column{
    position: relative;
    display:inline-block;
    vertical-align:middle;
    padding:15px 5px;
}
.nd-list-head-row .nd-list-column{
    background-color: #f2f2f2;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
    box-shadow: 0px 10px #ebebeb;
}
.nd-list-head-row .nd-list-column .header-row-subtitle{
    display: inline-block;
    width: 100%;
    padding: 10px 0 10px .6%;
    font-size: 16px;
    text-align: center;
}
.nd-school-list .column1{
    width: 30%;
    text-align:left;
    margin-right:3px;
    position:relative;
}
.nd-school-list .column1:after{
    clear:both;
}
.nd-school-list .column2{
    width: 25%;
    margin-right:3px;
    text-align:center;

}
.nd-school-list .column2.list-order{
    font-weight:bold;
}
.nd-school-list .column3{
    width: calc(45% - 6px);
    width: -moz-calc(45% - 6px);
    width: -webkit-calc(45% - 6px);
    text-align:left;
}
.nd-school-list .nd-list-row .column1{
    font-size: 20px;
    font-weight: 600;
    color: #616161;
    position:relative;
    clear: both;
}
.nd-school-list .nd-list-row .column1:after{
    clear:both;
}
.nd-school-list .nd-list-head-row .column3{
    text-align:center;
}
.nd-school-list .ndl-rank{
    width: 37px;
    float: left;
    line-height: 28px;
    font-weight: 400;
    font-size:16px;
}
.nd-school-list .ndl-same-rank{
    color: #cccccc;
}
.nd-school-list .ndl-link-wrapper{
    width: calc( 100% - 42px );
    width: -moz-calc( 100% - 42px );
    width: -webkit-calc( 100% - 42px );
    float: right;
}
/* v4 grouped-layout atoms (.tsl_container / .tsl_header / .tsl_section_header /
   .tsl_metric_row / .tsl_metric_content / .tsl_metric_link / .tsl_metric_desc
   + R3 white icon tile + mobile overrides) moved to components/srn-v4.css
   2026-05-26 so /schools/* + /students/* + auth pages can adopt the same
   atoms via neutral `.srn-*` class names. /top-school-listings markup still
   emits the legacy `.tsl_*` classes which srn-v4.css matches via grouped
   selectors — no render diff. */
/* ===== Phase B: hero photo grid (national-data stat pages) ===== */
.stat-hero{
    position:relative;
    border-radius:10px;
    overflow:hidden;
    margin-bottom:18px;
    min-height:170px;
    display:flex;
    align-items:flex-end;
    background:#1f3a5f;
}
.stat-hero-grid{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:repeat(8,1fr);
    grid-auto-rows:100%;
}
.stat-hero-tile{ display:block; overflow:hidden; }
.stat-hero-tile img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.stat-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(20,40,70,0.30) 0%,rgba(20,40,70,0.78) 100%);
}
.stat-hero-content{
    position:relative;
    z-index:1;
    padding:18px 22px;
    color:#fff;
}
.stat-hero-plain .stat-hero-content{ color:#1f3a5f; }
.stat-hero-headline{
    margin:0;
    font-size:24px;
    line-height:1.2;
    color:inherit;
    font-weight:700;
}
.stat-hero-subtitle{
    margin:6px 0 0;
    font-size:14px;
    color:inherit;
    opacity:0.9;
}
/* ===== Phase B: level-pill grade filter (acceptance-rate stat table) ===== */
.nd-level-pill-bar{ margin: 0 0 12px; padding: 2px 0; }
button.nd-level-pill{
    font-family: inherit;
    cursor: pointer;
    line-height: 1.2;
}
.nd-level-avg{ font-variant-numeric: tabular-nums; }
/* ===== Phase B: Quick-Links sidebar =====
 * Now shares the RegionQuickLinksView markup (quick-links-block /
 * quick-links-title / quick-links-list) so spacing, margins, padding and the
 * arrow bullets match the "Quick Links" box (Javier, Asana 1215862069791070).
 * The only delta is the active item: bold, non-link text for the current
 * dimension. */
.stat-sibling-links{ margin-bottom:16px; }
.stat-sibling-active .stat-sibling-current{
    font-weight:700;
    color:#1f3a5f;
}

/*Geo Map start*/
/* Phase B: native <details> collapsible wrapper around the state map. */
.geo-map-details{
    margin-bottom:8px;
}
.geo-map-summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 4px;
    font-weight:600;
    color:#2b6cb0;
    user-select:none;
}
.geo-map-summary::-webkit-details-marker{ display:none; }
.geo-map-summary::before{
    content:"\25BC"; /* down triangle when open */
    font-size:11px;
    color:#9aa6b2;
    transition:transform .15s ease;
}
.geo-map-details:not([open]) .geo-map-summary::before{
    transform:rotate(-90deg); /* points right when collapsed */
}
#geo-map-visualization{
    width:100%;
    height:480px;
}
.geo-map-legend{
    font-size:13px;
    color:#616161;
}
.geo-map-legend::after{
    content:"";
    clear:both;
}
.geo-map-legend .range{
    display: inline-block;
}
.geo-map-legend b{
    font-weight: 600;
}
.geo-map-legend .range-bar{
    background:linear-gradient(to right,#f5f6f7,#74a6bf,#1e8bc3);
    width:100px;
    display: inline-block;
    height: 15px;
}
.geo-map-legend .avg-left{
    display: inline-block;
    float:right;
}
#geo-map-visualization g circle, #geo-map-visualization g path{
	cursor: pointer;
}
.geo-map-legend.pct-students .avg-left{
    display: block;
    float:none;
}
.google-visualization-tooltip {
  margin-top:25px !important;
}
.google-visualization-tooltip-item:first-child {
    display: none;
    visibility: hidden;
}
.google-visualization-tooltip-item span {
    font-weight: bold;
}
@media (max-width: 998px){
    #geo-map-visualization{
        height:300px;
    }
}

/* SAT-stats state-card layout — Javier 2026-05-27 (sandbox round 5).
   Used on /average-sat-score-stats/national-data states tab. One .sat-state-row
   per state inside the nd-school-list wrapper; each carries a header row
   (rank badge + state name link + Avg SAT + view-top-XX CTA) followed by a
   single .tpl-item-card with the state's #1 SAT school. Other stat-types
   and the towns/counties tabs keep the legacy 3-column table layout. */
.sat-state-row{
    padding: 16px 0;
}
.sat-state-header{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.sat-state-rank{
    display: inline-block;
    background: #f5a623;
    color: #fff;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}
.sat-state-row .nd-list-column1-link,
.sat-state-row a.nd-list-column1-link{
    font-size: 20px;
    font-weight: 700;
    /* Javier 2026-06-25: state name in the style-guide heading black, not blue.
       Javier 2026-08-06: that near-black (#111827) read as "full black" — use
       the style guide's standard body grey instead. */
    color: var(--tc-body);
    text-decoration: none;
}
.sat-state-row .nd-list-column1-link:hover{
    text-decoration: underline;
}
.sat-state-score{
    font-size: 20px;
    font-weight: 700;
    /* Javier 2026-07-06 (Asana 1215862069791070): the state average ("Avg. SAT:
       1359") in the style-guide heading black, not orange — matches the state
       name to its left.
       Javier 2026-08-06: the LABEL keeps that role but moves off near-black to
       the standard body grey; only the sorted VALUE goes orange (below). */
    color: var(--tc-body);
}
.sat-state-score .sat-score-dot{
    color: #333;
    font-weight: 400;
}
/* Javier 2026-08-06: "the value being sorted should be orange" — the metric
   number only; its unit ("students") stays unbolded in the label grey so the
   number is what carries the emphasis. */
.sat-state-score .sat-score-num{
    color: #f5a623;
}
.sat-state-score .sat-score-unit{
    font-weight: 400;
    color: var(--tc-body);
}
/* The %-in-private-schools detail line ("(41,169 out of 222,526 total K-12
   students)") sat at the header's 20px/700 — Javier 2026-08-06: smaller,
   non-bold. */
.sat-state-score .rank_top_p_detail{
    display: inline-block;
    margin-top: 2px;
    font-size: var(--t-caption);
    line-height: var(--lh-caption);
    font-weight: 400;
    color: var(--tc-body);
}
/* Javier 2026-07-06 (Asana 1215862069791070): the school's own score inside the
   state card ("1450 avg SAT") at 16px — was 24px (20px mobile), which shouted
   over the school name. Scoped to the national tables' state cards; the
   per-state listing pages keep the 24px ranked-card metric. */
.sat-cards-row .tpl-rank-metric-inline .tpl-rank-metric-value{
    font-size: 16px;
}
.sat-state-viewall{
    font-size: 14px;
    font-weight: 700;
    /* Javier 2026-06-25: standard brand-blue link color (was strange #2165d3). */
    color: #1E8BC3;
    margin-left: auto;
    white-space: nowrap;
}
.sat-state-viewall:hover{
    text-decoration: underline;
}
.sat-cards-row .tpl-item-card.sat-state-card{
    margin-bottom: 8px;
}
/* Javier 2026-06-02: address line shown when a state's #1 school has no quick
   facts (grades/enrollment/type) to fill the 2nd info column — render a plain
   address instead of the 2-column grid so no divider is left dangling. */
.sat-state-card .tpl-item-address-single{
    font-size: var(--t-body);
    line-height: var(--lh-body);
    color: var(--tc-body);
}
@media (max-width: 767px){
    .sat-state-rank{ font-size: 15px; padding: 2px 8px; }
    .sat-state-row .nd-list-column1-link{ font-size: 16px; }
    .sat-state-score{ font-size: 15px; }
    .sat-state-viewall{
        margin-left: 0;
        flex-basis: 100%;
    }
    /* Phase B hero: fewer tiles + smaller type on mobile */
    .stat-hero{ min-height: 130px; }
    .stat-hero-grid{ grid-template-columns: repeat(4,1fr); }
    .stat-hero-content{ padding: 14px 16px; }
    .stat-hero-headline{ font-size: 19px; }
    .stat-hero-subtitle{ font-size: 13px; }
}


@media (max-width: 767px){
    .geo-map-legend .avg-left{
        width:auto;
        float:none;
        display:block;
    }
    .content-tab {
        margin: 0 0 10px;
        padding: 30px 3px 10px;
    }
    .nd-school-list .nd-list-row .column1{
        font-weight:normal;
        padding: 15px 0px 15px 3px;
    }
    .nd-list-column,.nd-list-column a{
        font-size:14px;
    }
    .nd-list-head-row .nd-list-column,.nd-list-head-row .nd-list-column a{
        font-size:12px;
    }
    .nd-list-head-row .nd-list-column .header-row-subtitle{
        padding: 0;
        font-size:12px;
    }
    .nd-list-column a.nd-list-column1-link{
        font-size:12px;
        font-weight:600;
    }
    .nd-school-list .ndl-rank{
        display:block;
        float: none;
        width:auto;
        font-size:14px;
    }
    .nd-school-list .ndl-link-wrapper{
        display:block;
        float: none;
        width:auto;
    }
}

@media (max-width: 420px){
    #geo-map-visualization{
        height:250px;
    }
}
/**National Data School List end  **/


/* ============================================================
   STATE PAGE — "View Top Ranked <ST> Schools:" links box
   Javier 2026-08-07: rounded grey box under the orange table title,
   orange bullets in two columns.
   ============================================================ */
.state-stat-links{
    margin: 0 20px 16px;
    padding: 14px 18px;
    background: #f5f6f7;
    border-radius: 12px;
}
.state-stat-links-title{
    font-weight: 700;
    color: var(--tc-body);
    margin-bottom: 8px;
}
.state-stat-links-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 24px;
}
.state-stat-links-list li{
    position: relative;
    padding-left: 20px;
    line-height: 1.6;
}
/* Orange chevron — Javier 2026-08-09: same sizing logic as the Quick Facts
   box (.quick-stats-text:before): a fixed 24px bold glyph, NOT text-relative
   (the card facts use the same fixed-glyph approach). */
.state-stat-links-list li:before{
    content: '\203A';
    position: absolute;
    left: 0;
    top: -5px;
    font-size: 24px;
    color: #f5b34f;
    font-weight: bold;
    line-height: 1.2;
}
.state-stat-links-list a{
    color: var(--color-link, #1E8BC3);
    text-decoration: none;
    /* Javier 2026-08-09: bold the links. */
    font-weight: 700;
}
.state-stat-links-list a:hover{ text-decoration: underline; }
@media (max-width: 767px){
    .state-stat-links{ margin: 0 10px 14px; }
    .state-stat-links-list{ grid-template-columns: 1fr; }
}

/* Javier 2026-08-09: national-data trends card — too much white above the
   orange "(Trends)" title vs the per-state pages (51px vs idaho's 23px).
   Breakdown was: 30px card padding + 20px empty overview-wrapper margin +
   15px h2 margin (collapsed). Target the national page's body id so state
   pages keep their spacing. 15px pad + 8px title pad = idaho's 23px. */
.sec-overview-wrapper h2.list-title{
    margin-top: 0;
    padding-top: 8px;
}
#toplist-national .sec-content.sec-no-header.tab-box{
    padding-top: 15px;
}
#toplist-national .sec-content .sec-overview-wrapper:not([class*="-trend-wrapper"]){
    /* the EMPTY overview block (the trends card itself also carries
       .sec-overview-wrapper, hence the exclusion); :empty fails on the
       whitespace text node the template leaves inside. */
    margin: 0;
    display: none;
}
/*DropdownlistView*/
.choose-selection-cnt{
    padding: 5px 8px;
}
.choose-opt{
    width:600px;
    margin-right: 10px;
}
.submit.choose-submit{
    -webkit-font-smoothing: antialiased;
    padding: 5px 10px;
}
.submit.choose-submit:hover{
    background: #F9BF3B;
}
.submit.choose-submit:active{
    background: #F39C12;
}
.choose-selection-cnt .d-btn{
    width: 169px;
    height: 36px;
    float:right;
}
/**StateTypeTableView**/
/*default layout*/
.spt-school-list .checkmarks_list{
    margin-bottom:10px;
}
.spt-list-head-row{
    display:flex;
}
.spt-list-row{
    display:flex;
    align-items: center;
    justify-content: center;
}
.spt-list-row:hover{
    cursor:pointer;
}
.spt-list-column{
    position: relative;
    display:inline-block;
    vertical-align:middle;
    padding:15px 0 10px;
}
.spt-list-column.column1{
    padding-left:15px;
}
/* Javier 2026-04-24 (clarified): first column is --t-body (16px); other
   columns stay --t-caption (14px). Keep 600 weight on header so it reads
   as a header, 400 on data rows. */
/* Javier 2026-05-25: header-row bg #f2f2f2 → #e5e7eb to match the unified
   darker-grey header band (.so-data-table, .mcd-th, .trends-data-table thead,
   .t20p-list-head-row). State pages still override to white via the
   #state_schools rule below — only non-state listings (tuition / membership /
   religious-affiliation) pick up the new color here. */
.spt-school-list .spt-list-head-row .spt-list-column{
    background-color: #e5e7eb;
    font-weight: 600;
    margin-bottom: 10px;
    box-shadow: 0px 10px #ebebeb;
}

/* Column 1 — first column, body role. */
.spt-school-list .column1{
    width: 32%;
    color: #616161;
    text-align:left;
    margin-right:3px;
    font-size: var(--t-body);
    line-height: var(--lh-body);
}
.spt-school-list .spt-list-row .column1{
    font-weight: 400;
}
/* Columns 2/3/4 — caption role. */
.spt-school-list .column2, .spt-school-list .column3,.spt-school-list .column4{
    color: #616161;
    font-weight: 400;
    width: calc( (68% - 24px)/3 );
    width: -moz-calc( (68% - 24px)/3 );
    width: -webkit-calc( (68% - 24px)/3 );
    margin-right:3px;
    text-align:center;
    /* Javier 2026-04-26: text in tables is body role (16px). */
    font-size: var(--t-body);
    line-height: var(--lh-body);
}
.spt-school-list .column2.tuition-list-order{
    font-weight:bold;
}
.spt-school-list .column4{
    margin-right:0px;
}
.spt-school-list .spt-rank{
    width: 37px;
    line-height: 28px;
    font-weight: 400;
    font-size:16px;
    margin-right:5px;
    display: inline-block;
}
.spt-school-list .spt-same-rank{
    color: #cccccc;
}

/*
MultipleSchoolsListView
PSRMultipleSchoolsListView
TopSchoolsListView
SONearbySchoolsListView
PSRSONearbySchoolsListView
SOPeopelAlsoViewedListView
*/
.tp-list-head-row{
    display:flex;
    align-items: normal;
    justify-content: center;
}
.tpl-head-row-subtitle{
    font-size:16px;
}
.tp-list-row{
    display:flex;
    align-items: normal;
    justify-content: center;
}
div.tp-list-row:last-of-type{
    border-bottom:none;
}
.tp-list-row:hover{
    cursor:pointer;
}
.tp-list-column{
    position: relative;
    display:inline-block;
    vertical-align:middle;
}
div.tp-list-column:not(:last-of-type){
    margin-right:3px;
}
/* Javier 2026-05-25: header-row bg #f2f2f2 → #e5e7eb to match the unified
   darker-grey header band across the redesign. Used on TopSchoolsListView,
   MultipleSchools / PSRMultipleSchools / NewMultipleSchools / MultipleClosed,
   SOPSRNearbySchoolsListView (sister-site nearby block on school profile),
   StudentMemberSchoolListView. */
.tp-list-head-row .tp-list-column{
    background-color: #e5e7eb;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
    box-shadow: 0px 10px #ebebeb;
    padding: 13px 0 8px .8%;
    text-align: left;
}
.tp-list-row .tp-list-column{
    padding: 15px 0 15px 5px;
    font-size: 16px;
    color: #616161;
    font-weight: 400;
}
.tpl-school-detail{
    width: 100%;
    display: block;
    margin-bottom:5px;
}
A.tpl-school-link{
    line-height: 28px;
    text-align: left;
    font-size: 20px;
    font-weight: 600;
    display: block;
    min-width: 130px;
}
/* Make star icons act like bullets - text wraps under text, not under icon */
A.tpl-school-link.featured-school,
A.tpl-school-link.top-school{
    padding-left: 24px;
    position: relative;
}
A.tpl-school-link .top-featured-bg,
A.tpl-school-link .featured-bg,
A.tpl-school-link .top-ranked-bg{
    position: absolute;
    left: 0;
    top: 0;
    margin-right: 0;
}
A.tpl-school-link.tpl-psr-link{
    color:#68C3A3;
}
.tpl-thumb-desc-wrapper{
    display:block;
}
.tpl-thumb-wrapper{
    float: left;
    max-width:90px;
}
.tpl-thumb{
    margin-right: 5px;
    max-width: 85px;
    max-height: 60px;
    object-fit:cover;
    object-position:center top;
}
.tpl-desc-wrapper{
    display:inline-block;
    font-size:16px;
    font-weight:normal;
}
.tpl-type-desc{
    font-weight:normal;
}
.tpl-review-wrapper{
    color: #616161;
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    cursor:pointer;
}
.tp-list-row.tpl-showmore-wrapper{
    padding: 0;
    margin: 15px auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:none;
}
/* Disable bg_hover_change on wrapper — inner .tpl-showmore-content handles its own hover */
.tp-list-row.tpl-showmore-wrapper:hover{
    background-color: transparent;
}
.tpl-showmore-content{
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 15px 0;
    background-color: #f5f5f5;
    color: #1e8cc5;
    cursor: pointer;
    border-radius: 10px;
}
.tpl-showmore-content:hover{
    color: #1e8cc5;
    text-decoration:none;
    background-color: #ebebeb;
}
.tpl-showmore-loading{
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 15px 0;
    background-color: #f5f5f5;
    font-weight: bold;
    display:none;
}
.tp-school-list .tpl-rank {
    width: 11%;
    float: left;
    display: block;
    line-height: 28px;
    font-weight: 400;
    word-break: break-word;
}
.tp-school-list .tpl-same-rank{
    color:#ccc;
}
.tp-school-list .tpl-school-detail.tpl-has-rn{
    width: calc(85% - 5px);
    float: left;
    display: block;
    margin-bottom:5px;
    margin-left: 5px;
}
.tpl-cqf-list{
   display: flex;
   flex-direction: column;
}
.tpl-cqf-row{
    position: relative;
    display: inline-block;
    margin-left: 17px;
}
.tpl-cqf-row::before{
    content: '›';
    position: absolute;
    left: -15px;
    color: #F39C12;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
}
/*default layout*/
.tp-school-list.default-layout .column1{
    width: 300px;
}
.tp-school-list.default-layout .column2{
    width: 198px;
}
.tp-school-list.default-layout .column3{
    width: 250px;
}
/*blueribbon layout*/
.tp-school-list.blueribbon-layout .column1{
    width: 300px;
}
.tp-school-list.blueribbon-layout .column2{
    width: 198px;
}
.tp-school-list.blueribbon-layout .column3{
    width: 277px;
}
/*toplist layout*/
.tp-school-list.toplist-layout .column1{
    width: 330px;
}
.tp-school-list.toplist-layout .column2{
    width: 110px;
    text-align:center;
}
.tp-school-list.toplist-layout .column3{
    width: 110px;
    text-align:center;
}
.tp-school-list.toplist-layout .column4{
    width: 198px;
}
/*nearby layout*/
.tp-school-list.nearby-layout .column1{
    width: 243px;
}
.tp-school-list.nearby-layout .column2{
    width: 172px;
}
.tp-school-list.nearby-layout .column3{
    width: 77px;
    text-align:center;
    font-weight:500;
}
.tp-school-list.nearby-layout .column4{
    width: 281px;
}
/*sonearby layout*/
.tp-school-list.sonearby-layout .column1{
    width: 243px;
}
.tp-school-list.sonearby-layout .column2{
    width: 172px;
}
.tp-school-list.sonearby-layout .column3{
    width: 77px;
    text-align:center;
    font-weight:500;
}
.tp-school-list.sonearby-layout .column4{
    width: 281px;
}
/*student member list layout*/
.tp-school-list.st-member-layout{
    margin-top:40px;
}
.tp-school-list.st-member-layout .column1{
    width: 300px;
}
.tp-school-list.st-member-layout .column2{
    width: 147px;
    text-align:center;
}
.tp-school-list.st-member-layout .column3{
    width: 107px;
    text-align:center;
}
.tp-school-list.st-member-layout .column4{
    width: 147px;
    text-align:center;
}
.tp-school-list.st-member-layout .column5{
    width: 200px;
    text-align:center;
}
#mcsl-box{
    display:none;
}
#mcsl-box-vlink{
    display: block;
    margin: 8px 11px;
    text-align: right;
    /* Standard brand link blue. Was #069 (#006699), a legacy darker blue this ID
       rule forced over the .virtual-link default, so the "Show Closed Private
       Schools" toggle rendered off-palette (Javier 2026-06-28). */
    color:#1E8BC3;
    text-decoration:none;
    font-size:15px;
}
@media (min-width: 767px) and (max-width:1200px) {
    .choose-opt{
        width: 59%;
    }
    /*tuition layout*/
    .spt-school-list .spt-list-head-row .spt-list-column{
        font-size:18px;
    }
    .spt-school-list .column1{
        font-size:18px;
    }
    .spt-school-list .column2, 
    .spt-school-list .column3,
    .spt-school-list .column4{
        font-size:16px;
    }
    
    .tp-list-head-row .tp-list-column{
        padding:10px 0 10px 3px;
    }
    .tp-list-head-row .tp-list-column {
        font-size:1rem;
    }
    .tpl-thumb-wrapper{
        float:none;
        display:block;
    }
    .tpl-desc-wrapper{
        display:block;
    }
    .tp-school-list .tpl-rank {
        float:none;
        width:100%;
    }
    .tp-school-list .tpl-school-detail.tpl-has-rn{
        width:100%;
        margin-left:0;
    }
    /*default layout*/
    .tp-school-list.default-layout .column1{
        width: 35%;
    }
    .tp-school-list.default-layout .column2{
        width: 28%;
    }
    .tp-school-list.default-layout .column3{
        width: 37%;
    }
    /*blueribbon layout*/
    .tp-school-list.blueribbon-layout .column1{
        width: 35%;
    }
    .tp-school-list.blueribbon-layout .column2{
        width: 28%;
    }
    .tp-school-list.blueribbon-layout .column3{
        width: 37%;
    }
    /*toplist layout*/
    .tp-school-list.toplist-layout .column1{
        width: 38%;
    }
    .tp-school-list.toplist-layout .column2{
        width: 17%;
    }
    .tp-school-list.toplist-layout .column3{
        width: 17%;
    }
    .tp-school-list.toplist-layout .column4{
        width: 28%;
    }
    /*nearby layout*/
    .tp-school-list.nearby-layout .column1{
        width:34%;
    }
    .tp-school-list.nearby-layout .column2{
        width:24%;
    }
    .tp-school-list.nearby-layout .column3{
        width:10%;
    }
    .tp-school-list.nearby-layout .column4{
        width:32%;
    }
    /*sonearby layout*/
    .tp-school-list.sonearby-layout .column1{
        width: 34%;
    }
    .tp-school-list.sonearby-layout .column2{
        width: 24%;
    }
    .tp-school-list.sonearby-layout .column3{
        width:10%;
    }
    .tp-school-list.sonearby-layout .column4{
        width:32%;
    }
    /*student member list layout*/
    .tp-school-list.st-member-layout .column1{
        width: 36%;
    }
    .tp-school-list.st-member-layout .column2{
        width: 20%;
    }
    .tp-school-list.st-member-layout .column3{
        width:12%;
    }
    .tp-school-list.st-member-layout .column4{
        width:14%;
    }
    .tp-school-list.st-member-layout .column5{
        width:18%;
    }
    
}
@media (max-width: 767px){
    .choose-opt{
        width: 75%;
        height:35px;
    }
    .choose-selection-cnt .m-btn{
        float:right;
        display: inline;
        width: 20%;
        font-size: 1rem;
        margin: 0;
    }
    .spt-school-list .spt-list-head-row .spt-list-column{
        font-size:14px;
    }
    .spt-school-list .column1{
        font-size:14px;
    }
    /* Columns 2-4 matched to column1 (14px) so body rows read consistently on mobile —
       Javier Apr 20: 12px felt too small next to the 14px county name. */
    .spt-school-list .column2,
    .spt-school-list .column3,
    .spt-school-list .column4{
        font-size:14px;
    }
    
    .tp-list-head-row{
        display:none;
    }
    .tp-list-row{
        display:block;
        text-align:left;
        padding: 15px 10px;
    }
    .tp-list-row:hover{
        cursor:pointer;
    }
    div.tp-list-column{
        margin:0;
    }
    .tp-list-row .tp-list-column{
        padding:0;
    }
    .tp-school-list .tpl-rank {
        float:none;
        width:100%;
    }
    .tp-school-list .tpl-school-detail.tpl-has-rn{
        width:100%;
        margin-left:0;
    }
    /*default layout*/
    .tp-school-list.default-layout .column1{
        width:100%;
    }
    .tp-school-list.default-layout .column2{
        width:100%;
    }
    .tp-school-list.default-layout .column3{
        display:inline-block;
        width:auto;
        text-align:left;
    }
    .tp-school-list.default-layout .column4{
        display:inline-block;
        width:auto;
        text-align:left;
    }
    /*blueribbon layout*/
    .tp-school-list.blueribbon-layout .column1{
        width:100%;
    }
    .tp-school-list.blueribbon-layout .column2{
        width:100%;
    }
    .tp-school-list.blueribbon-layout .column3{
        width:100%;
        text-align:left;
    }
    .tp-school-list.blueribbon-layout .column4{
        width:100%;
        text-align:left;
    }
    /*toplist layout*/
    .tp-school-list.toplist-layout .column1{
        width:100%;
    }
    .tp-school-list.toplist-layout .column2{
        width:100%;
        text-align:left;
    }
    .tp-school-list.toplist-layout .column3{
        width:100%;
        text-align:left;
    }
    .tp-school-list.toplist-layout .column4{
        width:100%;
    }
    /*nearby layout*/
    .tp-school-list.nearby-layout .column1{
        width:100%;
    }
    .tp-school-list.nearby-layout .column2{
        width:100%;
    }
    .tp-school-list.nearby-layout .column3{
        width:100%;
        text-align:left;
    }
    .tp-school-list.nearby-layout .column4{
        width:100%;
        text-align:left;
    }
    /*sonearby layout*/
    .tp-school-list.sonearby-layout .column1{
        width:100%;
    }
    .tp-school-list.sonearby-layout .column2{
        width:100%;
    }
    .tp-school-list.sonearby-layout .column3{
        width:100%;
        text-align:left;
        font-weight: 500;
    }
    .tp-school-list.sonearby-layout .column4{
        width:100%;
        text-align:left;
    }
    /*student member list layout*/
    .tp-school-list.st-member-layout .column1{
        width: 100%;
    }
    .tp-school-list.st-member-layout .column2{
        display:none;
        width:auto;
        text-align:left;
    }
    .tp-school-list.st-member-layout .column3{
        display:none;
        width:auto;
        text-align:left;
    }
    .tp-school-list.st-member-layout .column4{
        display:none;
        width:auto;
        text-align:left;
    }
    .tp-school-list.st-member-layout .column5{
        display:none;
        width:auto;
        text-align:left;
    }
    #mcsl-box-vlink{
        margin: 8px 11px;
        text-align: left;
        font-size:15px;
    }
    .spt-school-list .spt-rank{
        width:auto;
        font-size:12px;
        margin-right:0;
        display:block;
    }
}
@media (max-width: 400px){
    .tp-list-row{
        padding: 15px 5px;
    }
}
/* Javier 2026-04-20: County-by-state sortable table (state page only) gets card treatment
   matching the school-profile data tables: white card surface throughout (no grey inside
   the card per "off-white → white → white" surface system), rounded 8px corners with
   outline border, horizontal row dividers only, card-header-style first row distinguished
   by 600 weight + border-bottom (NOT a grey band), and the old darker box-shadow band
   below the header removed. */
#state_schools #main-content .spt-school-list .spt-table-card{
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    margin-top: 20px;
}
#state_schools #main-content .spt-school-list .spt-list-head-row .spt-list-column{
    /* White header surface matches the rest of the card — the 14px/600 font vs the body's
       14px/400 provides the header distinction; the border-bottom anchors the header row.
       Old #f2f2f2 bg + box-shadow `0px 10px #ebebeb` band removed per Javier Apr 20. */
    background-color: #ffffff;
    box-shadow: none;
    margin-bottom: 0;
}
/* Javier 2026-04-24 A3.c: row dividers in the sortable county/town table should
   NOT reach the card edge — use a pseudo-element line inset 20px on each side,
   matching the .so-data-table pattern. The header row and every data row except
   the last carry the ::after line. Zero the legacy full-width border so only
   the pseudo-element renders. */
#state_schools #main-content .spt-school-list .spt-list-head-row,
#state_schools #main-content .spt-school-list .spt-list-row{
    position: relative;
    border-bottom: none !important;
}
#state_schools #main-content .spt-school-list .spt-list-head-row::after,
#state_schools #main-content .spt-school-list .spt-list-row:not(:last-of-type)::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: #ebebeb;
    pointer-events: none;
}
#state_schools #main-content .spt-school-list .spt-list-column{
    border-right: none;
}
@media (max-width: 336px){
    .tp-list-row{
        padding: 15px 0px;
    }
}

/* Sidebar Quick Links: increase text from 14px to 16px */
.quick-links-block .quick-stats-links{
    font-size: 16px;
}

/* Sidebar filter chips section (Mar 2026) */
.sidebar-filter-chips{
    margin-bottom: 5px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}
.sidebar-filter-chips-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.sidebar-filter-label{
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.sidebar-clear-all{
    font-size: 13px;
    color: #e67e22;
    text-decoration: none;
    font-weight: 400;
}
.sidebar-clear-all:hover{
    color: #d35400;
    text-decoration: underline;
}
.sidebar-filter-chips #nav-tabs{
    padding: 0;
    border-bottom: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}
.sidebar-filter-chips .nav-tab-chip{
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    width: 100%;
}
.sidebar-filter-chips .nav-tab-chip .nav-tab-link-text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: left;
}
.sidebar-filter-chips .nav-tab-chip .nav-tab-close{
    width: 32px;
    min-width: 32px;
    padding: 0;
    text-align: center;
}
.sidebar-filter-chips #nav-clear-all-filters{
    display: none !important;
}

/* Active-filter chips (one per selected checkbox filter). Same green pill as
   the level tab-chips they replace, so the box looks unchanged to the user. */
.checkbox-filter-chips{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}
.checkbox-filter-chips .filter-chip{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 32px;
    padding: 0 0 0 10px;
    border: 1px solid #68c3a3;
    border-radius: 5px;
    background-color: #ffffff;
    color: #333333;
    font-size: 13px;
    line-height: 32px;
    /* Long labels ("Daycare / Preschool") clip rather than break the pill */
    overflow: hidden;
    white-space: nowrap;
}
.checkbox-filter-chips .filter-chip-count{
    margin-left: 4px;
    font-weight: 600;
    color: #333333;
}
.checkbox-filter-chips .filter-chip-close{
    margin-left: auto;
    width: 32px;
    min-width: 32px;
    height: 100%;
    padding: 0;
    border: none;
    background-color: #68c3a3;
    color: #ffffff;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.checkbox-filter-chips .filter-chip-close:hover{
    background-color: #5ab392;
}

/* A level chip whose filtered count is zero is dropped (JS toggles this
   class in updateNavTabCounts) — no "High Schools (0)" chips. */
.sidebar-filter-chips .nav-tab-chip.nav-tab-empty{
    display: none !important;
}

/* Town page: Javier 2026-05-21 (eve): restored 20px top margin to give
   the card visual separation from the hero/filmstrip above (matches the
   FAQ card's spacing pattern). Tab-box top padding raised 15→22 so the
   orange H2 sits 22px from card edge (matching FAQ). */
#asl-box.section-wrapper{ margin: 20px 0 10px; }
/* Javier 2026-05-21: bump ad margin from 10px → 15px so the space below
   the ad matches the space above it. */
#asl-box .srn-ads-cnt{ margin: 15px auto; }
#asl-box > .sec-content.tab-box{ padding-top: 22px; }
#asl-box .sec-overview-wrapper:empty,
#asl-box .sec-gallery-wrapper:empty{ margin: 0; display: none; }
/* Javier 2026-05-22: previous `:has(:not(:empty))` CSS attempt failed
   because `:empty` doesn't match elements containing whitespace
   (newlines/spaces in the inner div). The wrapper is now suppressed
   at the PHP level — MultipleSchoolsLayoutView buffers its contents
   and only emits the wrapper if there's visible content. */
#asl-box .sec-title-list-wrapper{ margin-top: 0; }
/* Javier 2026-05-21 (eve): symmetric spacing for the orange H2 in this
   card — 22px above (from .sec-content.tab-box padding-top) + 22px below
   (margin-bottom). Was margin: 0 0 10px (asymmetric 22/10). */
#asl-box H2.list-title{ margin: 0 0 22px; }
#asl-box #nav-tabs{ padding: 10px 0 15px; }

/* Town page school listing item layout (Feb 2026) */
.tpl-school-name-row{
    padding: 0 0 4px;
}
.tpl-school-name-row A.tpl-school-link{
    font-size: 20px;
    font-weight: 600;
}
/* Javier 2026-05-11 D7 (Round 5): year-by-year trend table emitted below
   each Plotly trend chart by TrendTableHelper. Always in the DOM so
   crawlers and LLM training pipelines can read every year's value, but
   visually clipped to the 4 most recent rows. "Show all years" button
   toggles .trends-data-expanded on the wrapper; CSS reveals the rest. */
.trends-data-table-wrapper{
    margin: 14px 0 6px;
    max-width: 100%;
    overflow-x: auto;
}
.trends-data-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--tc-body);
    table-layout: auto;
}
.trends-data-table thead th{
    background: #e5e7eb;
    color: #555;
    font-weight: 600;
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid #d1d5db;
}
.trends-data-table tbody td{
    padding: 5px 10px;
    border-bottom: 1px solid #ebebeb;
}
.trends-data-table tbody td.trends-data-td-year{
    background: #f3f4f6;
    width: 30%;
    font-weight: 500;
    color: #555;
}
.trends-data-table-wrapper .trends-data-row-hidden{
    /* Default state: rows past the cutoff stay in the DOM at 0 height.
       Using visibility:collapse (table-row equivalent of display:none)
       means crawlers still read the cells, but layout reserves no space. */
    visibility: collapse;
}
.trends-data-table-wrapper.trends-data-expanded .trends-data-row-hidden{
    visibility: visible;
}
.trends-data-table-toggle{
    display: inline-block;
    margin: 8px 0 0;
    padding: 4px 12px;
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #1e8cc5;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.trends-data-table-toggle:hover{
    background: #f3f4f6;
}

/* Javier 2026-05-11 D8: dataset-download link bar — muted text links under
   each data-source heading, in line with "plain text links, muted color,
   small font" per his spec. Sits in #county-details-box (town) or directly
   below the StateOverViewTableView heading (state) and links to /api/
   dataset_export.php?... with CSV / XML / JSON format options. */
.dataset-download-bar{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 10px 0 16px;
    padding: 6px 0 0;
    font-size: 12px;
    color: #777;
}
/* When the download bar is the last thing in a box (e.g. the town/state
   "Private School Trends" module), drop its trailing margin so the box's own
   bottom padding is the only spacing — otherwise the 16px margin stacks on the
   24px padding and leaves an oversized empty band at the bottom of the box
   (Javier 2026-06-28: "too much blank space at bottom of box"). */
.dataset-download-bar:last-child{
    margin-bottom: 0;
}
/* State page @ mobile: the bar renders as a direct #main-content child (no
   padded box around it like the town page's county-details-box), so it sat
   flush against the viewport edge (mobile-qa 2026-07-18). Give it the page's
   standard 10px gutter there. */
@media (max-width: 767px){
    #main-content > .dataset-download-bar{
        padding-left: 10px;
        padding-right: 10px;
    }
}
.dataset-download-label{
    font-weight: 500;
    color: #555;
}
.dataset-download-link{
    color: #1e8cc5;
    text-decoration: none;
}
.dataset-download-link:hover{
    text-decoration: underline;
}
.dataset-download-sep{
    color: #bbb;
}
.dataset-download-notice{
    flex-basis: 100%;
    font-size: 11px;
    color: #999;
    font-style: italic;
    margin-top: 2px;
    line-height: 1.4;
}

/* Javier 2026-05-11 D10 (Round 5): pill bar for school-level selection.
   Replaces the chip-with-× pattern (ActiveTabsHeaderView) on ranking pages.
   Each pill is a navigation link; the active one is highlighted with the
   site's primary blue. Counts in lighter text after each label. */
.level-pill-bar{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    scrollbar-width: thin;
    align-items: center;
}
.level-pill-bar-label{
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-right: 4px;
    white-space: nowrap;
}
.level-pill-bar > .level-pill{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
    border: 1px solid transparent;
}
.level-pill-bar > .level-pill:hover{
    background: #e5e7eb;
}
.level-pill-bar > .level-pill-active{
    background: #1e8cc5;
    color: #fff;
    border-color: #1e8cc5;
}
.level-pill-bar > .level-pill-active:hover{
    background: #176fa0;
}
.level-pill-bar .level-pill-count{
    font-weight: 400;
    opacity: 0.85;
}
@media (max-width: 767px){
    .level-pill-bar > .level-pill{
        padding: 4px 10px;
        font-size: 12px;
    }
}

/* Javier 2026-05-11 D10: inline filter row above the school cards on ranking
   pages — replaces the right-column "filters" box. Renders the level-filter
   chips (active_tabs) + a "Showing N schools" count side-by-side. */
.inline-filter-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 0 0 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}
.inline-filter-row-tabs{
    flex: 1 1 auto;
    min-width: 0;
}
.inline-filter-row-tabs #nav-tabs,
.inline-filter-row-tabs .nav-tab-wrapper{
    /* The chip nav inherits its existing flex/wrap styling; just clip
       overflow so a long chip list scrolls horizontally on narrow screens
       instead of breaking the row vertically. */
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: thin;
}
/* In the inline-filter-row context the chip nav is a "select a level"
   control (each chip navigates to /{metric}-stats/{state}/{level}), not
   an "active filter you can dismiss" widget. Hide the × close buttons
   and bump label padding so the chips read as plain pill buttons. */
.inline-filter-row-tabs .nav-tab-close{
    display: none !important;
}
.inline-filter-row-tabs .nav-tab-chip{
    padding-right: 12px;
    cursor: pointer;
}
.inline-filter-row-tabs .nav-tab-chip:hover{
    background: #f3f4f6;
}
/* Hide the mobile <select> shadow nav — the chip pills work fine at all
   widths via the horizontal-scroll fallback above. */
.inline-filter-row-tabs select.nav-option-wrapper{
    display: none;
}
.inline-filter-row-tabs .nav-tab-clear-all{
    display: none !important;
}
.inline-filter-row-count{
    flex: 0 0 auto;
    font-size: 13px;
    color: #777;
    font-weight: 500;
    white-space: nowrap;
}
@media (max-width: 767px){
    .inline-filter-row{
        flex-direction: column;
        align-items: stretch;
        padding: 8px 10px;
    }
    .inline-filter-row-count{
        align-self: flex-end;
    }
}

/* Javier 2026-05-11 D6: collapsible map wrapper on /{metric}-stats/{state}
   pages — closed on first load so the ranked list isn't pushed below the
   fold. Map content is still rendered in the DOM (markers + script init),
   it just isn't visible until the user expands.
   The chevron rotates 180° via the [open] attribute. */
.ranking-map-collapsible{
    margin: 0 0 15px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.ranking-map-summary{
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--tc-body);
    background: #f3f4f6;
    border-bottom: 1px solid transparent;
    user-select: none;
}
.ranking-map-collapsible[open] .ranking-map-summary{
    border-bottom-color: #e5e5e5;
}
.ranking-map-summary::-webkit-details-marker{
    display: none;
}
.ranking-map-summary::marker{
    content: '';
}
.ranking-map-summary-region{
    color: #777;
    font-weight: 400;
}
.ranking-map-summary-stats{
    color: #888;
    font-weight: 400;
    font-size: 13px;
    margin-left: 4px;
}
.ranking-map-chevron{
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #777;
    transition: transform 0.18s ease;
}
.ranking-map-collapsible[open] .ranking-map-chevron{
    transform: rotate(180deg);
}
.ranking-map-content{
    padding: 0;
}

/* === New Card Layout (Phase 1 redesign) === */
/* Javier 2026-05-11 D11: card-to-card spacing 15px (was 12px) so banner-to-
   card and card-to-card share the same vertical rhythm in the main column. */
.tpl-item-card{
    display: flex;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid #e8e8e8;
    min-height: 200px;
}
/* Javier 2026-05-15 (Option C + tweaks): ranking cards keep the normal card
   layout — NO flanking columns, NO progress bar. Instead:
     • rank → small inline pill ON THE SAME LINE as the blue school name
     • ranked metric + Add-to-Compare + View Profile share ONE footer line
       under a divider: metric left, action buttons right
   Card is otherwise identical to the default .tpl-item-card. */

/* Pill inline with the school name. The name <a> grows to fill the
   remaining flex space (flex: 1 below); long school names wrap *inside*
   the name container instead of dropping to a new row below the pill.
   align-items: flex-start so the pill aligns with the first line of a
   wrapping name (was align-items: center which pushed wrapped text below). */
.tpl-item-card.ranked-layout .tpl-school-name-row{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.tpl-item-card.ranked-layout .tpl-school-name-row a.tpl-school-link,
.tpl-item-card.ranked-layout .tpl-school-name-row .tpl-school-link{
    flex: 1 1 0;
    min-width: 0;
    word-break: break-word;
}
/* Javier 2026-05-20: rank pill is the same orange as the star/featured
   color (#F5A623), white text. Sized to be 4px LARGER than the school
   name (20px → 24px) and 100 HEAVIER (600 → 700). Same rule applies to
   .tpl-rank-metric-value so rank-on-left and metric-on-right share the
   same typographic weight, framing the school name between them. */
.tpl-rank-pill{
    /* Inline-flex so the rank number + tie-range span sit side-by-side.
       Javier 2026-05-22: switched align-items baseline → center. With
       different font sizes (24px num, 20px tie), baseline alignment puts
       the two text masses on the same descender line, which reads as
       vertically off because the larger text's optical center is lower
       than the smaller text's optical center. align-items: center sits
       both spans' line-boxes (line-height: 1) on the same midline so
       the optical centers align. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F5A623;
    border: 1px solid #F5A623;
    border-radius: 4px;
    padding: 1px 10px;
    font-family: Hind, sans-serif;
    color: #fff;
    white-space: nowrap;
    flex: 0 0 auto;
}
/* Javier 2026-05-22: two-part badge — "#N" (large/bold, 24px desktop)
   + "(TN–TM)" (smaller, regular, 20px desktop). Both spans get
   line-height matching the larger font-size (24px) so the line-boxes
   are uniform height. align-items: center then aligns the line-box
   centers. With Hind metrics, the smaller text's BASELINE within its
   24px line-box sits ~1.2px ABOVE the larger text's baseline, making
   the suffix look "high." A 1px translateY on the suffix pushes it
   down to optically match the rank-number baseline without affecting
   layout. */
/* Both spans get translateY to push their glyphs down to the pill's
   optical center. The line-boxes are already centered (line-box center
   at pill center), but Hind's baseline metrics put the GLYPHS slightly
   above the line-box center — the larger `#N` glyph is ~1.2px above,
   the smaller `(TN–TM)` ~1px above. Compensate per-span. */
.tpl-rank-pill .tpl-rank-num{
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    transform: translateY(1px);
}
.tpl-rank-pill .tpl-rank-tie{
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    transform: translateY(1px);
}
/* Footer on ranked cards: metric value/label on the left, the action
   buttons (Add-to-Compare + View Profile) grouped on the right, on the
   same line. The divider lives here (border-top). */
.tpl-item-footer.tpl-item-footer-ranked{
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.tpl-rank-metric-inline{
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
/* Javier 2026-05-20: metric value matches the rank pill — 4px larger than
   the school name (20px → 24px) + 100 heavier (600 → 700). Frames the
   school name visually between the orange rank pill (left) and the navy
   metric value (right). Label below uses --t-caption (same as the bullet
   text in .tpl-item-fact rows) so the value+label pair reads as one
   data point with the same typographic rhythm as the rest of the card. */
.tpl-rank-metric-inline .tpl-rank-metric-value{
    font-family: Hind, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: #2a3a5a;
}
/* Javier 2026-08-06: "1,349 students — don't bold 'students'". The unit is
   split off the value (TopSchoolsNationalDataTableView::splitValueUnit) so it
   can sit beside the number at caption weight/size. */
.tpl-rank-metric-inline .tpl-rank-metric-unit{
    margin-left: 4px;
    font-size: var(--t-caption);
    line-height: var(--lh-caption);
    font-weight: 400;
    color: var(--tc-caption);
}
.tpl-rank-metric-inline .tpl-rank-metric-label{
    font-size: var(--t-caption);
    line-height: var(--lh-caption);
    font-weight: 400;
    color: #777;
}
.tpl-item-footer-actions{
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}
@media (max-width: 767px){
    /* Mobile: scale rank pill + metric value down proportionally (school
       name is smaller on mobile too). Keeps the "rank/metric 4px larger
       than school name, +100 weight" ratio Javier specced for desktop.
       Javier 2026-05-22: also scale line-height down 24→20 so the
       line-box matches the larger mobile font-size (else the pill is
       taller than needed). translateY nudges from desktop also apply
       on mobile — both glyphs land at the pill optical center. */
    .tpl-rank-pill{
        padding: 1px 8px;
    }
    .tpl-rank-pill .tpl-rank-num{
        font-size: 20px;
        line-height: 20px;
    }
    .tpl-rank-pill .tpl-rank-tie{
        font-size: 16px;
        line-height: 20px;
    }
    .tpl-rank-metric-inline .tpl-rank-metric-value{
        font-size: 20px;
    }
    /* Narrow phones: the metric box shrank below its own text and the label
       painted under "Add to Compare" (Parimal QA 2026-08-17). Keep the metric
       at natural width and let the action buttons wrap to the next line. */
    .tpl-item-footer.tpl-item-footer-ranked{
        flex-wrap: wrap;
    }
    .tpl-item-footer.tpl-item-footer-ranked .tpl-rank-metric-inline{
        flex-shrink: 0;
    }
    .tpl-item-footer-actions{
        gap: 10px;
    }
    /* Mobile: tighten the asl-box internal padding (desktop 22px is
       too much real estate on small viewports). */
    #asl-box > .sec-content.tab-box{
        padding-top: 16px;
    }
    /* Mobile: keep the orange title's margin-bottom proportional to
       the smaller mobile padding-top (desktop is 22/22 symmetric). */
    #asl-box H2.list-title{
        margin: 0 0 16px;
    }
}
/* Javier 2026-05-11 D11: 15px below banner ads when they appear inside the
   main school-list / overview column, so banner→next-card spacing matches
   card→card. Scoped to #main-content so sidebar/sticky ads stay unaffected. */
#main-content .srn-ads-cnt.tmsads-row{
    margin-bottom: 15px;
}
/* Keep old class for backward compat */
.tpl-item-columns{
    display: flex;
    gap: 12px;
    padding: 10px 0 5px;
}
a.tpl-item-col-photo,
.tpl-item-col-photo{
    flex: 0 0 200px;
    align-self: stretch;
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    position: relative;
}
.tpl-item-col-photo img,
.tpl-item-col-photo img.tpl-thumb{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
    margin: 0;
    display: block;
}
/* Phase B: real school photo on stat-page cards (wraps an absolutely-positioned
   <img> already covered by the .tpl-item-col-photo img rule above). */
.tpl-item-col-photo .tpl-card-photo{
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}
.tpl-item-col-photo .tpl-map-placeholder{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
}
.tpl-item-col-photo .tpl-map-placeholder img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.4);
    border-radius: 0;
}
.tpl-item-col-photo .tpl-map-placeholder::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.35);
}
.tpl-item-col-photo .tpl-map-fallback::after{
    display: none;
}
.tpl-item-col-photo .tpl-map-fallback{
    background: #e8edf2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}
.tpl-map-fallback .tpl-map-pin{
    font-size: 2em;
    color: #f5a623;
}
.tpl-map-fallback .tpl-map-pin::before{
    content: '\1F4CD';
}
.tpl-map-fallback .tpl-map-label{
    color: #666;
    font-size: 0.9em;
    margin-top: 4px;
}
/* Content area (right side of card) */
.tpl-item-col-content{
    flex: 1;
    padding: 12px 15px;
    /* body role — card content copy */
    font-size: var(--t-body);
    line-height: var(--lh-body);
    color: var(--tc-body);
    display: flex;
    flex-direction: column;
    position: relative;
}
/* Keep old class for backward compat */
.tpl-item-col-text{
    flex: 1;
    font-size: var(--t-body);
    line-height: var(--lh-body);
    color: var(--tc-body);
}
/* Two-column info area — grid with independent column flow */
.tpl-item-info-columns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0 15px;
    flex: 1;
    align-items: start;
}
/* Each side is a single grid cell — items inside flow independently */
.tpl-item-info-left{
    grid-column: 1;
    grid-row: 1;
    padding-right: 15px;
}
.tpl-item-info-right{
    grid-column: 2;
    grid-row: 1;
    font-size: var(--t-body);
    line-height: var(--lh-body);
    color: var(--tc-body);
}
/* Vertical divider between info columns: anchored to .tpl-item-info-columns so it always
   starts right below the school name regardless of how the name wraps, and stops at the
   natural bottom of the info block (before icons/footer). No overlap with the title, no
   alignment drift between cards with 1-line vs 2-line names. */
.tpl-item-info-columns{
    position: relative;
}
.tpl-item-info-columns::after{
    content: '';
    position: absolute;
    top: 5px;
    bottom: 0;
    left: calc(50% - 7px);
    width: 1px;
    background-color: #e5e5e5;
    pointer-events: none;
}
.tpl-item-info-right > *{
}
.tpl-item-fact .tpl-cqf-row{
    margin-left: 17px;
}
.tpl-item-fact,
.tpl-item-desc,
.tpl-item-addr,
.tpl-item-phone,
.tpl-item-icons,
.tpl-item-compare{
    padding: 2px 0;
    /* caption role — meta/fact rows inside card */
    font-size: var(--t-caption);
    line-height: var(--lh-caption);
    color: var(--tc-caption);
    font-weight: 400;
}
/* Footer: Compare left, View Profile right */
.tpl-item-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #e5e5e5;
}
/* Ensure gap between last info row and footer separator */
.tpl-item-col-content > :nth-last-child(2) {
    margin-bottom: 10px;
}
/* View Profile: ghost button style (Option A per Javier) */
.tpl-view-profile{
    display: inline-block;
    /* label role — button text. Color override keeps dark button label readable. */
    color: #333 !important;
    font-weight: 500;
    text-decoration: none;
    font-size: var(--t-label);
    line-height: var(--lh-label);
    white-space: nowrap;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 16px;
    transition: all 0.2s ease;
}
.tpl-view-profile:hover{
    text-decoration: none;
    background-color: #f5f5f5;
    border-color: #999;
    color: #333;
}
/* Ads inside school list: match card spacing */
.tp-school-list .srn-ads-cnt{
    margin-bottom: 12px;
}
/* === Mobile card layout === */
@media (max-width: 767px){
    .tpl-item-card{
        flex-direction: column;
    }
    .tpl-item-columns{
        flex-direction: column;
    }
    /* R4-04: Increase card photo height on mobile */
    a.tpl-item-col-photo,
    .tpl-item-col-photo{
        flex: 0 0 auto;
        width: 100%;
        min-height: 180px;
        max-height: 220px;
    }
    .tpl-item-col-photo img,
    .tpl-item-col-photo img.tpl-thumb{
        width: 100%;
        height: 220px;
        max-height: 220px;
        border-radius: 0;
    }
    .tpl-item-col-photo .tpl-map-placeholder,
    .tpl-item-col-photo .tpl-map-fallback{
        width: 100%;
        height: auto;
    }
    /* Center map on marker */
    .tpl-item-col-photo .tpl-map-placeholder img{
        transform-origin: center center;
    }
    .tpl-item-info-columns{
        grid-template-columns: 1fr 1fr;
        gap: 0 12px;
    }
    /* Thin vertical divider between info columns on mobile too (Javier 2026-04-09) */
    .tpl-item-info-columns::after{
        display: block;
    }
    .tpl-item-info-left{
        padding-right: 12px;
    }
    /* 12px gap between photo and school name on mobile, tighter line spacing */
    .tpl-item-col-content{
        padding: 12px 15px 12px;
        line-height: 1.3;
    }
    /* Tighter line spacing on school names and quick facts on mobile */
    .tpl-item-fact,
    .tpl-item-addr,
    .tpl-item-phone{
        padding: 1px 0;
        line-height: 1.6;
    }
    .tpl-item-col-content .tpl-item-name{
        line-height: 1.3;
    }
    /* View Profile same size as Add to Compare — both live in the label role. */
    .tpl-view-profile{
        font-size: var(--t-label);
        padding: 4px 12px;
    }
    /* Card spacing on mobile — Javier 2026-04-23 M7 + global div-by-4 standard.
       All inter-card gaps use 12px (reduced from 16/24). Same value used for
       last-child so the gap to the next section stays uniform. */
    .tpl-item-card{
        margin-bottom: 12px;
    }
    .tpl-item-card:last-child{
        margin-bottom: 12px;
    }
    /* M10 (2026-05-11, Javier): related-school cards must match the width of
       the filter/sub-card boxes above them. The Apr-23 M7 12px horizontal
       gutter made these cards visibly narrower than the
       .rs-twrapper.rs-list-header filter card directly above. Zero the gutter
       so .tpl-item-card spans the full container width
       (.tp-school-list.sonearby-layout itself already has the page-edge
       inset). */
    .tp-school-list.sonearby-layout .tpl-item-card{
        margin-left: 0;
        margin-right: 0;
    }
    /* Ads inside school list: match card spacing */
    .tp-school-list .srn-ads-cnt {
        margin: 16px auto !important;
    }
    body[id$="schools"] .srn-ads-cnt {
        margin: 16px auto !important;
    }
    /* M8: No vertical line on mobile (columns stack) */
    .tpl-item-col-photo{
        border-right: none;
    }
    /* M9: Address/phone margin reset */
    .tpl-item-addr, .tpl-item-phone{
        margin: 0;
    }
}

/* County page above-fold layout - 3 column (Dec 2024) */
.county-layout{
    display: flex;
    flex-wrap: wrap;
}
.county-left-col{
    width: 28%;
    margin-right: 2%;
}
.county-middle-col{
    width: 40%;
}
.county-right-col{
    width: 28%;
}
.county-middle-ad{
    margin-top: 15px;
}
.county-filmstrip{
    margin-top: 15px;
}

@media (max-width: 991px){
    .county-layout{
        display: block;
    }
    .county-left-col,
    .county-middle-col,
    .county-right-col{
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-bottom: 15px;
    }
}

/* Trends key stats cards.
   Javier 2026-05-04: cards stay distinct (rounded borders, individual
   pills) — the gap between them is preserved at 10px but the wrapper
   gets a white background so the gap reads as white space, not the
   page's off-white #fcfcfc bleeding through. */
.trends-key-stats{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
    background: #fff;
}
/* Trends outer wrapper: own card with white bg */
#county-details-box{
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}
#county-details-box > .sec-content{
    padding: 0;
}
/* Javier 2026-05-11 D2: light grey bg INSIDE each stat sub-card.
   Same #f3f4f6 used on .dt-name-cell (label column of data tables) so the
   trend stats card grey reads as "data" rather than as decoration. The outer
   wrapper (.trends-key-stats / #county-details-box) stays white, so the
   orange "<City>, AL Private School Trends" heading still sits on white. */
.trends-stat-card{
    flex: 1 1 calc(33.33% - 10px);
    min-width: 120px;
    background: #f3f4f6;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.trends-stat-value{
    font-family: Hind, sans-serif;
    /* Javier 2026-04-20: unified font-size across all tiles (previously flagged as inconsistent) */
    font-size: 22px;
    font-weight: 600;
    color: #444;
    line-height: 1.2;
}
.trends-stat-label{
    /* Javier 2026-04-20: fixed size (was 0.85em — relative size drifted with parent context) */
    font-size: 13px;
    font-weight: 400;
    color: #666;
    margin-top: 4px;
    line-height: 1.3;
}
/* Trend sections — profile-section-card style with orange headers */
.trends-section{
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    padding: 22px 20px 20px;
}
.trends-section summary.trends-section-summary,
.trends-section div.trends-section-summary{
    padding: 0;
    margin-top: 0;
    /* Javier 2026-05-22: margin-bottom 12 → 22 for symmetric spacing
       inside the card (matches the .so-dt-title rule). */
    margin-bottom: 22px;
    /* Javier 2026-05-22: standardize orange text size at 24px across
       the network. trends-section-summary was the outlier at 30px;
       .so-dt-title (most orange titles) is 24px, .list-title is 24px. */
    font-size: 24px;
    /* Javier 2026-05-22: standardize orange text font to Montserrat —
       was inheriting body font (Hind). All other orange titles use
       Montserrat-bold via basic.css. */
    font-family: Montserrat-bold,sans-serif;
    font-weight: 700;
    color: #f4b350;
    cursor: default;
    background: none;
    border-radius: 0;
    list-style: none;
}
.trends-section summary.trends-section-summary::after{
    display: none;
}
.trends-section summary.trends-section-summary::-webkit-details-marker{
    display: none;
}
/* Mobile: match the 20px size used by .so-dt-title and .list-title on
   small viewports (basic.css). Margin-bottom 22→16 to pair with the
   smaller mobile card padding. Javier 2026-05-22. */
@media (max-width: 767px){
    .trends-section summary.trends-section-summary,
    .trends-section div.trends-section-summary{
        font-size: 20px;
        margin-bottom: 16px;
    }
}
.trends-section > *:not(summary){
    padding: 0;
}
/* Prevent chart/table content overflow */
.trends-section .chartdiv{
    overflow: hidden;
}
.trends-section .dt-single-row-table{
    overflow: hidden;
}
/* Data tables inside trends sections: white background (off-white/white/white system), inset from edges */
.trends-section .so-data-table,
.trends-section .general-data-table {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}
/* Javier 2026-04-23 D2: trends/hub tables use the same gray label column
   as profile tables (matches School Rankings category column). */
.trends-section .dt-name-cell {
    background-color: #f3f4f6;
}
.trends-section .definitions-name-cell {
    background-color: #f3f4f6;
}
.trends-section .so-data-table .dt-name-cell.definitions-name-cell {
    font-size: var(--t-body);
}
/* Javier 2026-04-20: Academics + every trends table missing row dividers between
   data rows. Javier 2026-04-24 A3.c: those dividers now come from the global
   .dt-single-row-table::before pseudo-element in data_table.css (inset 20px on
   both sides so the line doesn't reach the card edge). Nothing needed here. */
/* Javier 2026-04-26: text within tables is body role (16px) — both first
   column and value cells. */
.trends-section .so-data-table .dt-name-cell{
    font-size: var(--t-body);
}
.trends-section .so-data-table .dt-value-cell{
    font-size: var(--t-body);
}
@media (max-width: 767px){
    .trends-section .so-data-table .dt-name-cell{
        font-size: var(--t-body);
    }
    .trends-section .so-data-table .dt-value-cell{
        font-size: var(--t-body);
    }
}
/* Column-divider alignment is fixed upstream in data_table.css:
   `.dt-single-row-table { width: 100% !important; max-width: 100% }` on mobile clamps
   each per-row table to exactly 100% of its parent. Without that, long unbreakable words
   (e.g. "extracurriculars") let the table grow beyond 100%, making that one row's cells
   compute at a different width and breaking the divider alignment. */
/* All charts visible — no hide/show toggle */
/* Show more/less charts toggle — hidden in non-Enrollment sections */
.trends-section .trends-charts-toggle {
    display: none;
}
/* Racial breakdown collapsible in Enrollment section */
.trends-racial-toggle {
    display: block;
    padding: 10px 20px;
    color: #1e8cc5;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}
.trends-racial-toggle:hover {
    text-decoration: underline;
}
.trends-racial-breakdown {
    display: none;
}
.trends-racial-breakdown.show {
    display: block;
}
/* Closed schools: segmented toggle tabs (matching profile page nearby schools) */
#mcsl-box #nav-ctabs{
    display: inline-flex;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    gap: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 12px;
}
#mcsl-box #nav-ctabs .nav-tab-link{
    border-radius: 0;
    border: none;
    border-right: 1px solid #ddd;
    background: #fff;
    color: #616161;
    padding: 4px 16px;
    font-size: 13px;
    height: 34px;
    line-height: 34px;
    margin: 0;
    text-decoration: none;
}
#mcsl-box #nav-ctabs .nav-tab-link:last-child{
    border-right: none;
}
#mcsl-box #nav-ctabs .nav-tab-link.active-nt{
    background-color: #1e8cc5;
    color: #fff;
}

/* Closed schools: uses same card layout as active schools (NewMultipleSchoolsListView) */

@media (max-width: 767px){
    .trends-section:not([open]){
    }
    .trends-stat-card{
        flex: 1 1 calc(50% - 10px);
    }
    /* Hide year labels on Plotly charts on mobile */
    .trends-section .xtick {
        display: none;
    }
    /* Javier 2026-05-11 M2: cap state/town intro bullets to first 2 on mobile.
       Bullets emit as <div class="checkmark_row"> inside <div class="checkmarks_list">
       via checkmarks() in shared/srn_lib.inc.php. Scoped to the listing overview
       wrapper (#asl-box .sec-overview-wrapper) so profile-page bullets are
       unaffected. CSS-only — bullets stay rendered server-side so Google indexes
       all of them; mobile users see 2. */
    #asl-box .sec-overview-wrapper .checkmarks_list .checkmark_row:nth-of-type(n+3){
        display: none;
    }
    /* Global mobile side margins — 4px gutter on every top-level card across listing + profile.
       Rule is applied to TOP-LEVEL card containers only (never .sec-content, which is the
       inner wrapper — stacking margins across .section-wrapper + .sec-content + .profile-section-card
       multiplies the inset and makes cards visibly narrower than their siblings).
       This is a listing rule (file lives under components/) but equally applies on profile. */
    #main-content > .section-wrapper,
    #main-content > .sec-box-wrapper,
    #main-content > .profile-section-card,
    #main-content > .mini-map-wrapper,
    #main-content > .map-wrapper,
    #main-content > .hero-mobile-quick-facts,
    #main-content > .quick-stats-box,
    #main-content > .spt-school-list,
    #main-content > .hero-section,
    #main-content > .trends-section,
    #main-content > #faq-box,
    #main-content > #state-details-box,
    #main-content > #top-ranked-schools,
    #main-content > #filter-sidebar,
    #main-content > .tp-school-list {
        margin-left: 4px;
        margin-right: 4px;
    }
    /* LM1 (ad spacing): equal top/bottom gap around any mobile ad unit */
    #main-content [class*="ad-unit-wrapper"],
    #main-content [class*="ad-wrapper"],
    #main-content .srn-ads-cnt {
        margin-top: 16px;
        margin-bottom: 16px;
    }
}


/* =============================================================================
   Listing-page mobile reorder + ad collapse — applies to state/county/town.
   Selector `body[id$="schools"]` matches: state_schools, county_schools, town-schools.
   Does NOT match school_overview (profile), so these rules are listing-scoped.
   Moved from pages/schools.css 2026-04-21 + unified across listing types.
   ============================================================================= */
@media (max-width: 767px) {
	/* Reorder sections on mobile: Map and Filter before FAQ */
	body[id$="schools"] {
		display: flex;
		flex-direction: column;
	}

	/* Header and headline stay at top (order: 0 is default) */
	body[id$="schools"] #header {
		order: 0;
	}

	/* Main content (school list) — unified 16px vertical spacing between every child
	   (ad, school list, trends, county details, FAQ, etc.). Javier 2026-04-26: bumped down
	   from 20px to 16px on mobile to tighten card-to-card rhythm. Mirrors the profile page
	   pattern in #school_overview #main-content to keep listing and profile spacing consistent. */
	body[id$="schools"] #main-content {
		order: 1;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	/* Children are spaced by the flex gap only — reset their own vertical margins so
	   they don't add on top of the 16px. */
	body[id$="schools"] #main-content > * {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	/* Quick Facts (outside #main-content, between hero and #main-wrapper).
	   Above: 24px margin-top to visually match the 16px gap below + the box's internal
	   bottom-padding (~12px), so visual whitespace is roughly equal on both sides. */
	body[id$="schools"] .hero-mobile-quick-facts {
		margin-top: 24px;
		margin-bottom: 16px;
		/* Horizontal gutter set here directly — QF is a sibling of #main-content (outside the
		   `#main-content > *` margin rule), so listing gutter wouldn't otherwise reach it. */
		margin-left: 4px;
		margin-right: 4px;
	}
	/* #main-wrapper's 82px top padding is for pages WITHOUT a hero (it offsets the fixed nav).
	   Town pages have a hero that already covers that offset, so cancel the extra padding. */
	body[id$="schools"] #main-wrapper {
		padding-top: 0;
	}

	/* Map comes after school list */
	body[id$="schools"] .map-wrapper {
		order: 2;
		border-radius: 8px;
		overflow: hidden;
		/* L/R margins from unified listing rule (4px) */
	}

	/* Filter comes after map */
	body[id$="schools"] .filter-schools-box {
		order: 3;
	}

	/* FAQ moves down after filter */
	body[id$="schools"] #faq-list-box {
		order: 4;
	}

	/* Articles after FAQ */
	body[id$="schools"] .articles-box {
		order: 5;
	}

	/* Secondary content (sidebar) — match profile page mobile layout */
	body[id$="schools"] #secondary-content {
		order: 6;
		width: 100%;
	}
	body[id$="schools"] #secondary-content > * {
		/* 4px L/R gutter matches #main-content card treatment so sidebar map, Quick Links,
		   and widget boxes aren't flush to viewport edges on mobile. */
		margin: 0 4px 16px;
	}
	/* Map: constrain height on mobile (side margins unified to 4px via listing rule) */
	body[id$="schools"] #secondary-content .map-wrapper {
		height: 250px;
		overflow: hidden;
		border-radius: 8px;
		border: 1px solid #e0e0e0;
	}

	/* Quick links */
	body[id$="schools"] .quick-links-box {
		order: 7;
	}

	/* Popular articles last */
	body[id$="schools"] .popular-articles-box {
		order: 8;
	}

	/* All other elements get default order (0) or specific values */
	body[id$="schools"] > * {
		flex-shrink: 0;
	}

	/* Hide the sidebar/desktop Quick Facts on mobile per Javier feedback Mar 2026.
	   Scoped to .hero-stats-box only — must NOT hide .hero-mobile-quick-facts .quick-stats-box,
	   which is the mobile-only copy rendered inside the hero area. Without this scope the rule
	   matched the body-level body[id$="schools"] selector and hid both copies. */
	body[id$="schools"] .hero-stats-box .quick-stats-box {
		display: none !important;
	}

	/* Hide sidebar filter box on mobile — replaced by bottom sheet */
	body[id$="schools"] .filter-schools-box {
		position: absolute;
		left: -9999px;
		visibility: hidden;
	}
	/* Hide sidebar filter chips on mobile (all listing templates) */
	.sidebar-filter-chips {
		display: none !important;
	}

	/* === Ad Auto-Collapse on mobile === */
	body[id$="schools"] .srn-ads-cnt.ad-collapsed {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	body[id$="schools"] .srn-ads-cnt.ad-expanded {
		max-height: 500px;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	body[id$="schools"] .ad-collapse-toggle {
		display: block;
		text-align: center;
		padding: 6px;
		font-size: 12px;
		color: #999;
		cursor: pointer;
		background: #f9f9f9;
		border-bottom: 1px solid #eee;
	}
	body[id$="schools"] .ad-collapse-toggle:hover {
		color: #666;
	}
}

/* Card photo column — vertical divider on desktop, collapsed on mobile */
.tpl-item-col-photo {
	border-right: 1px solid #e5e5e5;
}
@media (max-width: 767px) {
	.tpl-item-col-photo {
		border-right: none;
	}
}

/* Nearby Schools listing: remove outer border (individual cards have their own) */
.tp-school-list.sonearby-layout {
	border-radius: 8px;
	overflow: hidden;
	border: none;
}
.tp-school-list.sonearby-layout .tp-list-head-row .tp-list-column {
	box-shadow: none;
	margin-bottom: 0;
}

/* Javier 2026-08-09: grey vertical divider between two adjacent centered
   value columns in the trends data tables (state/town/county/zip/specialty
   pages all share so-data-table). Same not-fully-closed style as the school
   card's info-column divider: inset from the cell's top/bottom edges. The
   sibling selector only fires when TWO value cells sit next to each other,
   so single-value rows are untouched. */
.so-data-table .dt-value-cell.dt-cells-2 + .dt-value-cell.dt-cells-2{
    position: relative;
}
.so-data-table .dt-value-cell.dt-cells-2 + .dt-value-cell.dt-cells-2::before{
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: #e0e0e0;
}
/*School Open House Page EventListView*/
.event-detail-wrapper > H2.para-title-3:not(:first-child){
    margin-top:20px;
}
/*JobsCategoriesView*/
A.job-category{
    display:block;
    text-align:center;
    vertical-align:middle;
    padding: 13px 0;
    font-size:18px;
}
A.job-category:hover{
    background-color: #f1f3ff;
    text-decoration:none;
}
A.job-category{
    border-bottom: 1px solid #e2e6f4;
}
A.job-category:last-child{
    border-bottom: none;
}
.job-content p:last-child{
    margin-bottom:0;
}
.job-content{
    margin:20px 0;
}
/*School Profile Start*/
/*Quick Stats View*/
#school_overview #main-content  .quick-stats-box{
    display:none;
}
#school_overview #secondary-content .quick-stats-box{
    display:block;
    position:relative;
}
/* Quick Facts box: match card radius everywhere (hero, sidebar, mobile) */
.section-wrapper.quick-stats-box {
    border-radius: 12px;
    overflow: hidden;
}
/*SOInfoView*/
#top-info-box{
	background-color: #FFFFFF;
}
/* Javier Apr 22: on schools without a photo album, short overview, or map image,
   #top-info-box would still render as an empty bordered strip (its only real content
   is the hidden agallery popup markup + JSON-LD <script>). Hide it when its sec-content
   has no visible direct children — the JSON-LD script tag stays in the DOM for SEO
   (display:none elements are still emitted in HTML). */
#top-info-box:not(:has(.sec-content > :not(.mfp-hide):not(.school-lightbox-overlay):not(script):not(style))){
	display: none;
}
#top-info-box .checkmarks_list{
    margin:0;
    padding:0 0 25px;
    width:100%;
}
/* School Overview Section */
.school-overview-section{
    margin: 0;
    background-color: #f7f7f7;
    padding: 20px;
}
.overview-title{
    font-style: normal;
    color: #f4b350;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 10px;
    font-family: Montserrat-bold,sans-serif;
}
/* Javier 2026-05-05: invisible scroll target for the floating "About" link
   when a profile has no long-form description. Renders as a 0×0 inline marker
   so it occupies no layout space while still being addressable via #about-the-school. */
.so-anchor-only{
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.school-overview-section ul{
    list-style: disc outside none;
    padding: 0 0 0 22px;
    margin: 0;
}
.school-overview-section ul li{
    margin: 6px 0;
    font-size: 16px;
    line-height: 1.5;
}
.school-overview-section ul li::marker{
    color: #f4b350;
}
.cards-wrapper{
    margin:0;
    padding:0;
    display: flex;
    position:relative;
    align-items: normal;
    justify-content: normal;
    flex-wrap: wrap;
}
.cards-wrapper.nf-cards-wrapper{
    width:50%;
    float:left;
}
.cards-wrapper.f-cards-wrapper{
    width:100%;
    float:none;
}
.card-row{
    position: relative;
    min-height: 44px;
    font-size:18px;
    margin: 0;
    padding: 8px 0;
    color:#616161;
    border-bottom: 1px solid #e2e6f4;
    display:flex;
    align-items: center;
    flex-wrap:nowrap;
}
.cards-wrapper.nf-cards-wrapper > .card-row{
    width:100%;
}
.cards-wrapper.f-cards-wrapper > .card-row{
    width: calc(50% - 1px);
    width: -moz-calc(50% - 1px);
    width: -webkit-calc(50% - 1px);
    display: inline-flex;
}
.cards-wrapper.f-cards-wrapper > .card-row.card-odd {
    border-right: 1px solid #e2e5f4;
}
A.cr-review-link,A.cr-review-link:hover{
    text-decoration:none;
}
A.cr-review-link .cr-review-bracket,A.cr-review-link:hover .cr-review-bracket{
    color:#616161;
}
/* D1: Icons left-align with school name — remove left margin, keep right margin for text spacing */
.icon-address::before {
    margin: 0 29px 0 0 !important;
}
.icon-tel::before {
    margin: 0 23px 0 0 !important;
}
.icon-website::before {
    margin: 0 23px 0 0 !important;
}
/* D9: review/rating-score icon was indented 23px past the other icons; pin it to the same left edge */
.icon-rating-score::before {
    margin: 0 23px 0 0 !important;
}
.cr_content_wrapper{
    width:calc(100% - 85px);
}
.cr_content_wrapper #cr-school-website{
    display:block;
}
.cr_content_wrapper .cr-sm-link{
    display: inline-block;
}
.cr_content_wrapper .cr-sm-icon {
    width:20px;
    height:20px;
    display:inline-block;
    vertical-align: bottom;
}
.websiteFaviconIcon{
	width:24px !important;
	height:24px !important;
	margin-right:8px;
	vertical-align: middle;
	position:relative;
	bottom:-10px;
	opacity:1 !important;
	filter:none !important;
	display:inline-block;
}
.infobox-top-right{
    width:336px;
    float:left;
    margin-left:20px;
}
.info-btns-wrapper{
    position:relative;
    display: flex;
    margin: 20px 0;
    padding:0;
    gap: 20px;
}
A.info-box-btn{
    position: relative;
    display:inline-flex;
    flex: 1;
    height: 60px;
    line-height: 60px;
    font-size:18px;
    font-weight: 600;
    color: white;
    margin: 0;
    padding: 0 0 0 60px;
    align-items:center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
}
A.info-box-btn:hover{
    text-decoration: none;
    color: white;
}
A.info-box-btn.ib-btn-request{
    background-color: #68c3a3;
    transition: background-color .25s linear;
    -o-transition: background-color .25s linear;
    -webkit-transition: background-color .25s linear;
    -moz-transition: background-color .25s linear;
}
A.info-box-btn.ib-btn-request:hover{
    background-color: #74dbb7;
}
A.info-box-btn.ib-btn-ss{
    background-color: transparent;
    border: 1px solid #ccc;
    color: #666;
    transition: all .25s linear;
    -o-transition: all .25s linear;
    -webkit-transition: all .25s linear;
    -moz-transition: all .25s linear;
}
A.info-box-btn.ib-btn-ss:hover{
    background-color: #f5f5f5;
    color: #666;
}
A.info-box-btn > .icon-wrapper{
    position: absolute;
    top:0;
    left:0;
    display: inline-flex;
    align-items:center;
    justify-content:center;
    width: 60px;
    height: 60px;
    border-radius: 8px 0 0 8px;
}
A.info-box-btn > .icon-request{
    background-color: #61b597;
}

A.info-box-btn > .icon-ss{
    background-color: #e0e0e0;
}


/*Map Image*/
.map-image-wrapper{
    height:500px;
    overflow: hidden;
}
.map-image{
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: block;
}
/*Top 20 Placements*/
.top-placement-text{
    margin-top: 0;
    font-weight:400;
    font-size:18px;
}
/* Rankings table: card-like with rounded corners matching data tables */
.top20-placement-list.default-layout {
    border: 1px solid #ebebeb;
    border-radius: 8px;
    overflow: hidden;
}
.t20p-list-head-row{
    display:flex;
}
.t20p-list-row{
    display:flex;
    align-items: normal;
    justify-content: center;
    border-top: 1px solid #ebebeb;
}
/* Javier 2026-04-23 D1: header row gets a full-width horizontal line under it
   (the vertical column divider in the header row is removed below, so the
   horizontal line is uninterrupted from left edge to right edge of the card). */
/* Each row carries the generic .list-row-border-2 class which adds its own
 * border-bottom; stacked with the next row's border-top it doubles to 2px.
 * Drop the bottom border here so horizontal lines stay a single 1px stroke. */
.top20-placement-list .t20p-list-row.list-row-border-2{
    border-bottom: none;
}
.t20p-list-row:hover{
    cursor:pointer;
}
.t20p-list-row:last-of-type{
    border-bottom: none;
}
.t20p-list-column{
    position: relative;
    display:inline-block;
    vertical-align:middle;
}
div.t20p-list-column:not(:last-of-type){
    margin-right:0;
}
/* Javier 2026-04-25: rankings table cells follow the same first-column rule
   as .so-data-table — first column (.category-col) is --t-body (16px),
   attribute column stays --t-caption (14px). Background + weight specifics
   set per cell type below. */
/* Javier 2026-05-25: bump header-row bg from #f3f4f6 → #e5e7eb to match the
   parent .so-data-table header row color (and mcd-th chart-datatable header).
   The body-row category-col below stays #f3f4f6 so header reads as a darker
   band over the lighter label column. */
.t20p-list-head-row .t20p-list-column{
    background-color: #e5e7eb;
    color: #616161;
    font-weight: 600;
    margin-bottom: 0;
    padding: 10px 0 10px 20px;
    text-align: left;
}
.t20p-list-row .t20p-list-column{
    padding: 15px 0 15px 20px;
    font-weight: 400;
}
.t20p-list-column.category-col{
    font-size: var(--t-body);
    line-height: var(--lh-body);
}
.t20p-list-column.attribute-col{
    /* Javier 2026-04-26: text in tables is body role (16px). */
    font-size: var(--t-body);
    line-height: var(--lh-body);
}
/* Javier 2026-05-05: vertical divider on right of category-col removed.
   Gray-to-white column transition is the only edge between cells now. */
/* First column: gray bg + gray text (matches spec) */
.top20-placement-list.default-layout .t20p-list-row .category-col{
    background-color: #f3f4f6;
    color: #616161;
    font-weight: 600;
}
/*default layout*/
/* Javier 2026-05-05: unified first-column width 38%/62% across all profile-page
   data tables (rankings, School Facts, Faculty, Tuition, etc.). */
.top20-placement-list.default-layout .category-col{
    width: 38%;
    text-align:left;
    box-sizing: border-box;
}
.top20-placement-list.default-layout .attribute-col{
    width: 62%;
    text-align:left;
    box-sizing: border-box;
}
/* Javier 2026-04-28: rankings link text inherits the cell's body role
   (16px). The earlier 14px override was a leftover from when attribute
   cells were caption-sized — the cell is now t-body, the link must
   match so "Lowest average acceptance rates" / "Largest student body"
   etc. render at 16px. */
A.t20p-list-link{
    font-size: var(--t-body);
    line-height: var(--lh-body);
}
/*listing alumni layout*/
.top20-placement-list.listing-alumni-layout .category-col{
    width: 25%;
    text-align:left;
}
.top20-placement-list.listing-alumni-layout .attribute-col{
    width: 73%;
    text-align:left;
}
.top20-placement-list.listing-alumni-layout .t20p-list-row {
    display: table;
    width: 100%;
}
.top20-placement-list.listing-alumni-layout .t20p-list-row .t20p-list-column{
    display:table-cell;
}
/*SOTableView Custom*/
.chartimg {
    max-width: 100%;
    width: 100%;
    height: auto;
}
.dt-vc-avg{
    font-size: 16px;
    font-weight: 400;
    color:#616161;
    padding: 0;
    margin: 0;
    height: auto;
}
/*******************for pie chart img zoom********************/
#chartimg-overlay{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.8) none 50% / contain no-repeat;
    cursor: pointer;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
}
#chartimg-overlay.open {
    visibility: visible;
    opacity: 1;
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
    z-index:999999999999999;
}
#chartimg-overlay::after { /* X button icon */
    content: "\2715";
    position: absolute;
    color:#fff;
    top: 10px;
    right:20px;
    font-size: 2em;
    cursor: pointer;
}
/***************end for pie chart img zoom*************************/
.school-calendar-fc-wrapper{
    font-size:18px;
    margin-top:10px;
    margin-bottom:35px;
    font-weight: 400;
    width:100%;
    min-height:654px;
}
.so-dt-ce-item-list-group{
    display: block;
    width: 100%;
    position: relative;
    margin-top: 10px;
}
/* Table-cell is a BFC so the first child's margin-top doesn't collapse into the cell —
   it renders as 10px of blank space above the group, breaking vertical centering in
   cells that have no preceding <strong> label. Zero out the first group's top margin
   so the cell's `vertical-align: middle` can center the whole list as a single block.
   Uses :first-of-type (not :first-child) because the section may have an INPUT checkbox
   ("show more" toggle) as its first element sibling before the item-list-group DIV. */
.so-dt-ce-section > .so-dt-ce-item-list-group:first-of-type{
    margin-top: 0;
}
.so-dt-ce-item-list-group + .so-dt-ce-item-list-group{
    margin-top: 6px;
}
.so-dt-ce-item-list{
    display: table;
    width: 100%;
}
/* Javier 2026-04-26 Apr-26-followup: row dividers must inset from the card
   edge instead of running flush. Draw the line via a background gradient on
   the row (was border-bottom on each cell, which produced a full-width line
   touching the card). 16px on each side of the row + the cell's 3px outer
   padding ≈ 19-20px from the card edge.
   Desktop only — mobile uses a different per-item-group gradient (defined
   in data_table.css) that already accounts for the narrower mobile layout. */
@media (min-width: 768px){
    .so-dt-ce-item-list{
        background-image: linear-gradient(to right, #d1d5db, #d1d5db);
        background-repeat: no-repeat;
        /* Javier 2026-04-26 Apr-26-followup: bumped from 32px to 40px
           total inset (20px each side) so the visible line has ~20px
           gap on left (from column boundary) and ~20px on right (from
           value-cell content edge), matching the school-facts row
           dividers. */
        background-size: calc(100% - 40px) 1px;
        background-position: bottom center;
    }
    /* Drop the trailing line on the last row of a section — Javier:
       "below 'National Junior Honor Society'; no horizontal line below it". */
    .so-dt-ce-section .so-dt-ce-item-list-group:last-child > .so-dt-ce-item-list:last-child,
    .so-dt-ce-section > .so-dt-ce-item-list-group:only-child > .so-dt-ce-item-list:last-child {
        background-image: none;
    }
}
.so-dt-ce-item-list.cell-1{
    width: 100%;
}
.so-dt-ce-item-group {
    position: relative;
    display: table-cell;
    vertical-align:middle;
    text-align:left;
    /* border-bottom replaced by row-level gradient (above) so dividers
       stop short of the card edge. */
    font-size: var(--t-body);
    color: var(--tc-body);
    /* Javier Apr 22: was `height: 40px; padding: 0 16px` — 2-line items squished to 43px
       leaving no breathing room above/below wrapped text. Switched to symmetric vertical
       padding so rows grow with content, keeping ~10px above/below text whether single-
       or multi-line. Padding math: (10px × 2) + 1-line text ≈ 41px (matches prior) / (10px × 2)
       + 2-line text ≈ 68px (proper multi-line spacing). Table row-height still equalizes
       siblings automatically. */
    padding: 10px 16px;
    word-break: break-word;
    word-wrap: break-word;
}
/* D11: Extracurriculars category labels ("Club or Organization:", "Recreational...")
   render as <strong> inside .dt-value-cell — distinguish from list items with theme orange */
.dt-value-cell > strong{
    color: #f4b350;
    font-weight: 600;
}
/* Javier 2026-04-26 Apr-26-followup: section headers had inconsistent vertical
   gaps because spacing was carried by `<br/><br/>` between sections in PHP — first
   header had 0px above (no preceding section), later ones had ~52px (two BRs).
   Scoped to #extracurricular-list (the only cell that uses this header pattern;
   School Memberships uses BRs to list links, those must stay visible). */
#extracurricular-list > strong{
    display: block;
    margin-top: 20px;
}
#extracurricular-list > strong:first-of-type{
    margin-top: 12px;
}
#extracurricular-list > br{
    display: none;
}
/* D18b: first and subsequent group wrappers get clearance from their preceding label */
.dt-value-cell > strong + br + .so-dt-ce-section .so-dt-ce-item-list-group{
    margin-top: 6px;
}
/* Javier Apr 22: Sports/Extras items rendered bottom-pinned leaving 11px empty above.
   Root cause: `.so-dt-ce-section` is a <span> (inline), and its first line-box inherited
   the cell's 21px line-height, pushing the nested block .so-dt-ce-item-list-group down
   by that line-height. The table-cell's `vertical-align: middle` then centers the
   section-inline-box (line-box top + content) rather than the visual content block —
   so the real items ended up hugging the cell bottom.
   Fix: make the section block-level. Table-cell vertical-align:middle centers a single
   block child by geometric height, so items now sit centered. Scope to the top-level
   section child of value-cell so nested item-list-group margins still apply. */
.dt-value-cell > .so-dt-ce-section {
    display: block;
}
.so-dt-ce-item-list.cell-1 .so-dt-ce-item-group{
    padding-right:46.2%;
}
.so-dt-ce-item-list .so-dt-ce-item-group:nth-of-type(2n+1) {
    width: 53.8%;
}
.so-dt-ce-item-list .so-dt-ce-item-group:nth-of-type(2n) {
    width: 46.2%;
}
.so-dt-ce-item {
    display: inline;
    white-space: normal;
    word-break: break-word;  
}
.so-dt-ce-section .so-dt-ce-item-list-group .so-dt-ce-item-list:nth-child(n+9){
    display: none;
}
.so-dt-ce-section input[type="checkbox"]{
    display: none;
}
.so-dt-ce-section input[type="checkbox"]:checked ~ .so-dt-ce-item-list-group .so-dt-ce-item-list:nth-child(n+9){
    display: table;
}
/* First item in list inherits the row-top border from its parent .dt-value-cell;
 * drop this border-top to avoid doubling (2px stacks) with the prior item-group's border-bottom. */
.toggle-label {
    display: inline-block;
    cursor: pointer;
    margin-top: 12px;
    color: #f4b350;
    user-select: none;
}
.toggle-label::before {
    content: "";
    border: 1px solid #f4b350;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin: 7px 10px 0 0;
    transition: transform 0.3s ease;
}
.show-more-label,
.hide-label {
   display: none;
}
input[type="checkbox"]:not(:checked) ~ .show-more-label {
   display: inline-block;
}
input[type="checkbox"]:checked ~ .hide-label {
   display: inline-block;
}
input[type="checkbox"]:checked ~ .hide-label::before {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}


/*School Note*/
/* school-notes-wrapper: now uses .grey-bullet-box for bullet styling */
.school-notes-wrapper{
    margin-top: 10px;
}
.school-notes-wrapper UL.mb0 {
    margin-bottom: 0px;
}
/* Override old :before bullets — grey-bullet-box uses ::marker instead */
.school-notes-wrapper LI:before{
    content: none;
}
.school-notes-wrapper span.school-note-li {
    padding-left: 0;
    display: inline;
    word-break: break-word;
}
.last-updated-text {
    color: gray;
    margin-top: 10px;
    font-size: 14px;
    text-align: right;
    margin-bottom: 5px;
}
/* REQUEST FREE INFORMATION button — placed between cards */
.large-btn-wrapper.request-info-between-cards {
	text-align: center;
	margin: 0 0 20px;
}
.request-info-between-cards .info-box-btn.ib-btn-request {
	display: inline-flex;
	width: auto;
	min-width: 300px;
	height: 60px;
	line-height: 60px;
	font-size: 18px;
	font-weight: 600;
	padding: 0 30px 0 60px;
	border-radius: 8px;
}
/* Source text tighter to bullets when inside grey box */
.grey-bullet-box .last-updated-text {
	margin-top: 15px;
	margin-bottom: 0;
}
/*Left Large Video*/
#left-video-placehoder{
    margin:20px 0;
    padding:0;
}
#left-video-placehoder:empty{
    margin:0;
    padding:0;
}
.video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video-wrapper iframe, .video-wrapper object, .video-wrapper embed, .video-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*related school video*/
.video-thumb-wrapper {
    display:block;
    font-size:18px;
    margin: 10px 0 0;
    padding: 5px 0 0;
    position: relative;
    text-align: left;
}
.video-thumb-wrapper A.vt-link{
    display:block;
}
.video-thumb-wrapper img.vt-image {
    text-align: center;
    width: 96%;
    width: calc(100% - 12px);
    width: -moz-calc(100% - 12px);
    width: -webkit-calc(100% - 12px);
    height:auto;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
}
.video-thumb-wrapper .vt-duration {
    background-color: #000000;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    display: inline-block;
    font-size: 11px;
    font-weight: 400;
    height: 14px;
    opacity: 0.75;
    padding: 0 4px;
    position: absolute;
    bottom: 15%;
    right: 6%;
    vertical-align: top;
}
.video-thumb-title {
    width:100%;
    border-bottom: 1px solid #DADFE1;
    margin: 0;
    padding: 0;
}
.video-thumb-title A.vt-link{
    word-break:break-word;
    display: inline-block;
    margin:20px 0 10px;
}
.vl-view-more {
    font-size:16px;
    clear:both;
    padding-top: 15px;
    text-align: center;
}
/*video popup*/
.video-dialog-wrapper {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1001;
}
.video-dialog-section {
    width: 640px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 3px;
    background: #fff;
    background: -webkit-linear-gradient(#fff, #bbb);
    background: -moz-linear-gradient(#fff, #bbb);
    background: -o-linear-gradient(#fff, #bbb);
}
span.youtube-description {
    width: 100% !important;
}
.video-dialog-section .close {
    z-index: 1002;
    cursor: pointer;
    *cursor: hand;
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 1px 1px 3px #000;
    -moz-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.video-dialog-section .close:hover {
    background: #00d9ff;
}
/*related school news*/
.rss-item-date{
    color: #DD6919;
    font-size: 11px;
}
.rss-view-more {
    font-size: 13px;
    text-align:right;
}
.sec-related-news li.rss-item {
    border-bottom: 1px solid #E2E6F4;
    font-size:16px;
    list-style: none outside none;
    padding: 10px 0;
    word-break: break-word;
}
.sec-related-news ul li.rss-item:last-of-type{
    border-bottom:none;
}
/* Javier 2026-04-23 D4: give the Related School News card its inset in ONE place
   (the sec-content wrapper) instead of stacking 16px onto both the outer section
   and the inner ul — the prior Apr-20 fix was producing ~40px of cumulative
   inset, which is why the inner content read as narrower than the card border. */
.sec-related-news .sec-content{
    padding-left: 16px;
    padding-right: 16px;
}
.sec-related-news ul{
    margin: 0;
    padding: 0;
}
.new-achive-text {
    border-bottom: 1px solid #E2E6F4;
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-size:18px;
    color:#616161;
}
.twitter-timeline-wrapper{
    height:400px;
    border-radius: 12px;
    margin:20px 0;
    border: 1px solid #e6e6e6;
}
.instgram-wrapper{
    min-height:486px;
    margin:20px 0 8px;
    border: 1px solid #e6e6e6;
    border-bottom:none;
    border-radius: 3px;
}
/*Events News*/
.events-news-item {
    position: relative;
    padding-left:20px;
    color: #616161;
    font-size:18px;
    font-weight: 400;
}
.events-news-ul.news-ul > .events-news-item:not(:last-child){
    margin-bottom:15px;
}
.events-news-item:before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 2px solid #f5b24a;
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
    border-top: none;
    border-right: none;
    top: 8px;
    left:0px
}
.eni-content-more,.eni-content-hide,.ei-hide,.ni-hide{
    display:none;
}
.eni-read-more{
    text-align:right;
    margin-right:20px;
}
.ei-read-more-link,.ni-read-more-link{
   font-style:italic;
}
/*Related School Section*/
.rs-twrapper{
    margin:20px 0 0;
    border-radius: 8px;
}
/* Remove all bottom spacing inside Related Schools card — card margin handles gap */
#related-school-box .rs-twrapper {
    margin-bottom: 0;
}
/* D7 / M9 (2026-05-11, Javier): grade-level filter (pills on desktop, "Show me:"
   select on mobile) gets a standalone-card treatment so it fits the newer
   card/sub-card layout. Subtle sub-card pattern: light-grey fill, 1px hairline
   border, padding, explicit margin-bottom to separate from the school list. */
#related-school-box .rs-twrapper.rs-list-header {
    background-color: #f7f7f7;
    border: 1px solid #e5e5e5;
    padding: 12px 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
}
/* School location map (hero/card area) — rounded corners on static image */
#map-wrapper {
    border-radius: 8px;
    overflow: hidden;
}
#map-wrapper img {
    border-radius: 8px;
}
/* D3: Nearby Schools map — rounded corners, match spacing above and below */
#rs-map-wrapper {
    border-radius: 8px;
    overflow: hidden;
    margin: 20px 0 0;
    border: 1px solid #ebebeb;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
}
#rs-map-wrapper .rs-map,
#rs-map-wrapper .rs-map-screenshot,
#rs-map-wrapper img {
    border-radius: 8px;
    display: block;
    width: 100%;
    max-width: 100%;
}
#rs-map-wrapper .rs-map-screenshot,
#rs-map-wrapper img {
    height: auto;
}
/* keep .rs-map at 250px from map.css so Leaflet has a non-zero render box on hover-swap */
#related-school-box .sec-content.sec-box > :last-child {
    margin-bottom: 0;
}
#related-school-box .rs-twrapper > :last-child {
    margin-bottom: 0;
}
.related-schools-header H2.so-dt-title{
    margin-bottom:20px;
}
.rs-checkmark-wrapper, .rs-tabs-wrapper, .rs-list-wrapper, .rs-school-list{
    display:none;
}
.rs-checkmark-wrapper.active, .rs-tabs-wrapper.active, .rs-list-wrapper.active, .rs-school-list.active{
    display:block;
}

/* School Reviews + Related Schools: match profile-section-card padding */
/* These use section-wrapper, not profile-section-card */
#school_reviews .sec-content.sec-box {
	padding: 22px 20px 20px;
}
#related-school-box .sec-content.sec-box {
	padding: 20px 20px 0;
}
#school_reviews H2.so-dt-title {
	margin-top: 0;
	margin-bottom: 12px;
}
/*SOReviewsView*/
.sch-avg-rating-wrapper{
    border-bottom:1px solid #e5e5e5;
}
.sch-avg-rating-wrapper strong{
    font-weight:bold;
}
.sch-avg-rating-wrapper .icon-star-medium {
    margin-top:0px;
}
.school-ov-bg .icon-star-medium,
.school-ov-bg .sch-avg-rating-wrapper .icon-star-medium {
    filter: brightness(1.05) saturate(1.2);
}
.school-ov-bg .top-ranked-bg,
.school-ov-bg .bg-content-right .top-ranked-bg {
    filter: sepia(1) saturate(3) hue-rotate(-10deg) brightness(1.1);
}
.review-item{
    margin:6px 0 30px;
}
.review-date{
    font-size: 14px;
}
.review-body{
    display:block;
    font-size:18px;
    font-weight: 400;
    color: #616161;
}
.review-note-wrapper{
    margin-bottom: 20px;
    position: relative;
    font-size: 16px;
    font-weight: 400;
}
/* When review-note-wrapper also has grey-bullet-box, let grey-bullet-box handle padding */
/* Review note list: desktop keeps outside bullets with indent */
.review-note-list {
    list-style: disc outside none;
    padding: 0 0 0 22px;
    margin: 0;
}
.review-note-item {
    list-style: disc outside;
    margin: 6px 0;
    color: #616161;
    font-size: 16px;
    line-height: 1.5;
    display: list-item;
    font-weight: 400;
}
.review-note-item::marker {
    color: #f4b350;
}
/* Hide old custom dot elements — grey-bullet-box uses ::marker instead */
.rni-dot-wrapper{
    display: none;
}
.rni-dot{
    display: none;
}
.rni-text{
    display: inline;
    padding-left: 0;
}
/* Submit Review button: ghost style, right-aligned (Option B per Javier) */
.review-submit-wrapper {
	text-align: right;
	margin-top: 12px;
}
.review-submit-wrapper .review-submit {
	background: transparent;
	border: 1px solid #f4b350;
	color: #f4b350;
	border-radius: 8px;
	padding: 8px 24px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}
.review-submit-wrapper .review-submit:hover {
	background: #f4b350;
	color: #fff;
}
.review-submit-wrapper .review-submit[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* Stars section — filled by default (PVSR = positive reviews only), amber on hover */
#review_recommend .starsContainer {
	margin-bottom: 8px;
}
#review_recommend .starsContainer .bigStar {
	background: none !important;
	width: auto !important;
	height: auto !important;
	float: left;
	margin-right: 6px;
	cursor: pointer;
	transition: color 0.15s ease;
}
#review_recommend .starsContainer .bigStar::before {
	content: '☆';
	font-size: 42px;
	color: #ccc;
	line-height: 1;
}
/* Hover: fill all stars up to hovered one */
#review_recommend .starsContainer:hover .bigStar::before {
	content: '★';
	color: #f4b350;
}
#review_recommend .starsContainer .bigStar:hover ~ .bigStar::before {
	content: '☆';
	color: #ccc;
}
/* yellowStar class = filled (pre-filled for all 5 by default, or set by JS on click) */
#review_recommend .starsContainer .bigStar.yellowStar::before {
	content: '★';
	color: #f4b350;
}

/* D3: Segmented toggle for nearby schools tabs */
#related-school-box .nav-pills.rs-tab-nav {
	display: inline-flex;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	gap: 0;
}
#related-school-box .nav-pills.rs-tab-nav .nav-pill-button {
	border-radius: 0;
	border: none;
	border-right: 1px solid #ddd;
	background: #fff;
	color: #616161;
	padding: 8px 16px;
	font-size: 13px;
	margin: 0;
}
#related-school-box .nav-pills.rs-tab-nav .nav-pill-button:last-child {
	border-right: none;
}
#related-school-box .nav-pills.rs-tab-nav .nav-pill-button.active {
	background-color: #1e8cc5;
	color: #fff;
}

/* .tpl-item-col-photo (desktop + mobile overrides) moved to components/school-listing.css */

/*Floating jump navigation bar*/
.floating-jump-nav {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    z-index: 999;
    overflow: hidden;
}
.floating-jump-nav.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.floating-jump-nav.is-hidden {
    display: none;
}
.floating-jump-placeholder {
    display: none;
}
.floating-jump-inner {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.floating-jump-inner::-webkit-scrollbar {
    display: none;
}
.floating-jump-nav .floating-jump-link {
    white-space: nowrap;
    padding: 14px 16px;
    color: #616161;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.floating-jump-nav .floating-jump-link:hover {
    color: #333;
    text-decoration: none;
}
.floating-jump-nav .floating-jump-link.active {
    color: #F5A623;
    border-bottom-color: #F5A623;
}
/* Request Info tab - bold and blue styling */
.floating-jump-nav .floating-jump-link.floating-jump-request {
    font-weight: 700;
    color: #1E8BC3;
}
/*SOReviewsView*/
input#review_name::placeholder {
    color: #C6C6C6;
}
input#review_name:focus::placeholder {
    color: transparent;
}
/*Right Tuition Box*/
.dyk-wrapper div.so-dyk-text:not(:last-child){
    margin-bottom:15px;
}

/*school background photo */
#school_overview.hasBg #secondary-content .quick-stats-box header.section-header.sec-3-header{
	background-color: transparent;
	border-bottom: 1px solid #fff;
}
#school_overview.hasBg #secondary-content .quick-stats-box header.section-header.sec-3-header>.sec-header-title-cnt{
	background: transparent;
}
#school_overview.hasBg #secondary-content .quick-stats-box .quick-stats-ul{
	color:#FFFFFF;
}
#school_overview.hasBg #secondary-content .quick-stats-box .quick-stats-ul a,
.school-ov-bg #secondary-content .quick-stats-box .quick-stats-ul a {
	color: #F5A623 !important;
}
#school_overview.hasBg #secondary-content .sec-content.quick-box{
	background: transparent;
}
.hasBg .welcome-wrapper {
	position: absolute;
	text-align: center;
	color: #fff;
	width: 100%;
	margin-top:0;
	z-index: 0;
	background-color: #000;
}
.hasBg .school-ov-bg{
	height: 585px;
	overflow: hidden;
}
.hasBg .school-ov-bg img{
	opacity: .4;
	top: 50%;
	left: 0;
	-webkit-transform: translate(0,-50%);
	-ms-transform: translate(0,-50%);
	transform: translate(0,-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	position: absolute;
}
.hasBg #main-headline-wrapper{
	position: relative;
}
.hasBg .breadcrumbs,
.hasBg .breadcrumbs a,
.hasBg .breadcrumbs span {
	color: #fff !important;
}
.hasBg H1#main-headline {
	color: #fff !important;
}
/* Align school name and Quick Facts horizontally on schools with background photos */
.hasBg #secondary-content .section-wrapper:first-child {
	margin-top: 0;
}
.hasBg #main-headline-wrapper {
	margin-top: 0;
}
.filter-schools-box .serch-ico {
	transform: scale(0.75) !important;
	-webkit-transform: scale(0.75) !important;
	-moz-transform: scale(0.75) !important;
}
.filter-schools-box {
	border: none !important;
}
.filter-schools-box .tpl-cmp-wrapper {
	padding-left: 0 !important;
	margin-right: 10px !important;
}

/* Mobile fixed buttons for Map and Filter */
.mobile-action-buttons {
	display: none;
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	gap: 12px;
	align-items: center;
}
.mobile-action-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 24px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	border: 2px solid #ddd;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.mobile-action-btn-map {
	background-color: #61b597;
	color: #fff;
	border-color: #61b597;
}
.mobile-action-btn-filter {
	background-color: #fff;
	color: #333;
	border-color: #ddd;
}
.mobile-action-btn-filter .filter-badge {
	background-color: #e53935;
	color: #fff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: bold;
}
@media (max-width: 767px) {
	.mobile-action-buttons {
		display: flex;
	}

	/* #town-schools mobile reorder + ad-collapse moved to components/school-listing.css */
}

/* === Mobile Filter Bar (sticky chip row) === */
.mobile-filter-bar {
	display: none;
}
@media (max-width: 767px) {
	.mobile-filter-bar {
		display: block;
		position: sticky;
		top: 0;
		z-index: 99;
		background: #fff;
		border-bottom: 1px solid #e0e0e0;
		padding: 8px 10px;
		/* Javier 2026-04-26: was `margin: 0 -15px 8px -15px` which pushed the bar
		   15px past the card on each side. Now sits within the card outline. */
		margin: 0 0 8px 0;
	}
	.mfb-inner {
		display: flex;
		align-items: center;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mfb-inner::-webkit-scrollbar {
		display: none;
	}
	.mfb-count {
		flex-shrink: 0;
		font-size: 14px;
		font-weight: 600;
		color: #333;
		white-space: nowrap;
	}
	.mfb-chips {
		display: flex;
		gap: 6px;
		flex-shrink: 0;
	}
	.mfb-chip {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		background: #e8f5e9;
		color: #2e7d5b;
		border: 1px solid #68c3a3;
		border-radius: 16px;
		padding: 4px 10px;
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
	}
	.mfb-chip-x {
		background: none;
		border: none;
		color: #2e7d5b;
		font-size: 16px;
		line-height: 1;
		padding: 0 0 0 2px;
		cursor: pointer;
		font-weight: bold;
	}
	.mfb-filter-btn {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		background: #fff;
		color: #333;
		border: 1.5px solid #ccc;
		border-radius: 20px;
		padding: 6px 14px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		white-space: nowrap;
		margin-left: auto;
	}
	.mfb-filter-btn svg {
		flex-shrink: 0;
	}
}

/* === Filter Bottom Sheet === */
.filter-sheet-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 10000;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.filter-sheet-overlay.visible {
	display: block;
	opacity: 1;
}
.filter-sheet {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10001;
	background: #fff;
	border-radius: 16px 16px 0 0;
	max-height: 85vh;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
	display: flex;
	flex-direction: column;
	visibility: hidden;
}
.filter-sheet.visible {
	transform: translateY(0);
	visibility: visible;
}
.filter-sheet-header {
	display: flex;
	align-items: center;
	padding: 16px 20px 12px;
	border-bottom: 1px solid #e0e0e0;
	flex-shrink: 0;
}
.filter-sheet-title {
	font-size: 18px;
	font-weight: 700;
	color: #333;
}
.filter-sheet-reset {
	margin-left: auto;
	font-size: 14px;
	color: #68c3a3;
	text-decoration: none;
	font-weight: 500;
	margin-right: 16px;
}
.filter-sheet-reset:hover {
	text-decoration: underline;
}
.filter-sheet-close {
	background: none;
	border: none;
	font-size: 28px;
	color: #666;
	cursor: pointer;
	line-height: 1;
	padding: 0;
}
.filter-sheet-body {
	flex: 1;
	overflow-y: auto;
	padding: 12px 20px;
	-webkit-overflow-scrolling: touch;
}
.filter-sheet-footer {
	padding: 12px 20px;
	border-top: 1px solid #e0e0e0;
	flex-shrink: 0;
}
.filter-sheet-apply {
	width: 100%;
	padding: 14px;
	background: #68c3a3;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.filter-sheet-apply:active {
	background: #5aad8f;
}

/* Bottom sheet filter sections */
.fs-section {
	margin-bottom: 16px;
}
.fs-section-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: #888;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}
.fs-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.fs-chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border: 1.5px solid #ddd;
	border-radius: 20px;
	background: #fff;
	color: #333;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}
.fs-chip-active {
	background: #e8f5e9;
	border-color: #68c3a3;
	color: #2e7d5b;
}
.fs-chip-disabled {
	opacity: 0.4;
	cursor: default;
}
.hasBg .ag-views div img{
	cursor: pointer;
}
.hasBg .school-name-wrapper{
	position:absolute; 
	bottom: 10px;
	right: 30px;
}

@media (min-width: 767px) and (max-width:1200px)
{
    #school_overview #main-content  .quick-stats-box{
        display:none;
    }
    #school_overview #secondary-content .quick-stats-box{
        display:block;
    }
    .cards-wrapper.nf-cards-wrapper{
        width: auto;
        float:none;
    }
    .cards-wrapper.f-cards-wrapper{
        width: auto;
        float:none;
    }
    .cards-wrapper.f-cards-wrapper > .card-row{
        width: 100%;
    }
    .cards-wrapper.f-cards-wrapper > .card-row.card-odd {
        border-right: none;
    }
    .info-btns-wrapper{
        flex-wrap: wrap;
        gap: 12px;
    }
    A.info-box-btn{
        width:100%;
        flex: none;
    }
    A.info-box-btn.ib-btn-request{
        margin: 0;
    }
    A.info-box-btn.ib-btn-ss{
        margin: 0;
    }
    .school-calendar-fc-wrapper{
        width:100%;
        min-height:410px;
    }
}

@media (max-width: 767px)
{
	/* Floating jump nav mobile styles */
	.floating-jump-nav {
		position: relative;
	}
	.floating-jump-nav::after {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 40px;
		background: linear-gradient(to right, transparent, #fff);
		pointer-events: none;
		z-index: 10;
	}
	.floating-jump-nav.scrolled-end::after {
		opacity: 0;
	}
	.floating-jump-link {
		display: flex;
		align-items: center;
		line-height: 1;
	}
	.hasBg .school-ov-bg{
		height: 300px;
	}
	.hasBg .school-ov-bg img{
		top: 0 !important;
		left: 0 !important;
		transform: none !important;
		position: absolute !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center center !important;
	}
    #school_overview #main-content  .quick-stats-box{
        display:block;
        order: -1; /* Show Quick Stats above other content on mobile */
        margin-top: 15px;
        padding-top: 0;
    }
    #school_overview #main-content .hero-mobile-ad-wrapper.hero-post-mobile-ad {
        order: -2; /* Show ad above Quick Stats on mobile (filmstrip profiles) */
    }
    /* Quick Facts mobile spacing — 20px default between cards */
    /* Quick Facts spacing — handled by gap on #main-content */
    #school_overview #secondary-content .quick-stats-box{
        display:none;
    }
    /* Ensure main-content uses flexbox for ordering on mobile */
    /* gap: 16px between ALL children — Javier 2026-04-26 mobile spacing tighten (was 20px). */
    #school_overview #main-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-top: 16px !important;
        background: #fcfcfc;
        border-radius: 15px 15px 0 0;
        position: relative;
        z-index: 1;
    }
    /* Zero out all individual margins — gap handles everything */
    #school_overview #main-content > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* Pull main-content up closer to hero thumbnails on mobile */
    /* Increased from -60px to -83px to accommodate 530px hero height per Javier feedback Jan 31 2026 */
    #school_overview.hasBg #main-content {
        margin-top: -83px !important;
    }
    /* Mobile map should appear after Quick Stats */
    #school_overview .card-mobile-map {
        order: 0;
    }
    #school_overview .section-wrapper.dyk-wrapper{
        display:none;
    }
    #left-video-placehoder{
        margin:10px 0;
    }
    img.chartimg{
        cursor: -webkit-zoom-in;
        cursor: -moz-zoom-in;
        cursor: zoom-in;
    }
    .cards-wrapper.nf-cards-wrapper, .cards-wrapper.f-cards-wrapper{
        width: auto;
        float:none;
    }
    .cards-wrapper.f-cards-wrapper > .card-row, .cards-wrapper.nf-cards-wrapper > .card-row{
        width: 100%;
        display: flex;
        flex-wrap:nowrap;
    }
    .cards-wrapper.f-cards-wrapper > .card-row.card-odd {
        border-right: none;
    }
    .card-row.card-address.has-map{
        border-bottom:none;
    }
    /* Javier 2026-04-23 M2: map screenshot is pre-rendered at 336px but the
       profile cards use a 4px gutter (see #school-details-box margin). Match
       that gutter — flex parent stretches children to cross-axis width, so
       width:calc is needed to actually see the 4px inset; `margin: 0 auto`
       centers the shrunk element inside the flex row. */
    .card-mobile-map{
        box-sizing: border-box;
        /* !important needed — the element carries inline `style="width:100%"`
           from the PHP view so our computed width gets overridden otherwise. */
        width: calc(100% - 8px) !important;
        max-width: none !important;
        border-bottom:1px solid #e2e6f4;
        display:block;
        text-align:center;
        margin: 0 auto;
    }
    .card-mobile-map .mobile-map-screenshot{
        max-width: 100% !important;
        width: 100%;
    }
    .address-direction-wrapper{
        width:100%;
        display:block;
        vertical-align: middle;
        height: 48px;
        line-height: 48px;
        margin: 0;
        padding:0;
        text-align:left;
    }
    A.icon-direction {
        font-size: 13px;
        height: 48px;
        line-height: 48px;
        vertical-align:middle;
        display: inline-block;
        position: relative;
        margin-right: 10px;
        padding-left: 12px;
    }
    A.website-click{
        font-size:16px;
    }
    .info-btns-wrapper{
        /* Javier 2026-04-23 M3: buttons sat at left=10 while profile cards
           sit at left=4. Match the 4px gutter so Request Info / Save School
           line up with the cards above + the form card below. */
        margin: 0 0 20px;
        padding: 0 4px;
        flex-wrap: wrap;
        gap: 12px;
        box-sizing: border-box;
        width: 100%;
    }
    A.info-box-btn{
        width: 100%;
        flex: none;
        box-sizing: border-box;
    }
    A.info-box-btn.ib-btn-request{
        margin: 0;
    }
    A.info-box-btn.ib-btn-ss{
        margin: 0;
    }
    .video-wrapper{
        width:calc(100% - 20px);
        width:-moz-calc(100% - 20px);
        width:-webkit-calc(100% - 20px);
        margin:10px auto 0 auto;
        text-align:center;
    }
    .video-dialog-section {
        margin: 0;
        padding: 0;
    }
    .video-dialog-section .close {
        top: 10px; right: 12px;
        font-size: 16px;
        padding: 8px;
    }
    .video-dialog-section #video-title {
        white-space: nowrap;
    }
    .video-dialog-section #youtube-title {
        font-size: 14px;
    }
    .twitter-timeline-wrapper,.instgram-wrapper{
        margin:10px 0;
        border: 1px solid #e6e6e6;
        display:none;
    }
    #school_overview #content-headline-wrapper{
        padding-right:0;
    }
    .rs-twrapper{
        margin:20px 0;
    }
    .rs-text-1{
        display: block;
        font-size:17px;
        vertical-align: middle;
        margin: 0 5px 0 1.5%;
    }
    .rs-selection{
        display:inline-block;
        margin: 0 10px;
    }
    .sch-avg-rating-wrapper,.review-item{
        padding:0 10px;
    }
    /* Mobile: review endorsement bullets — outside position for proper text alignment */
    .review-note-list {
        list-style: disc outside none;
        padding: 0 0 0 22px;
    }
    .review-note-item {
        list-style: disc outside;
    }
    .school-calendar-fc-wrapper{
        width:100%;
        min-height:320px;
    }
    /* Mobile data tables — Javier 2026-04-26: text within tables is body role
       (16px). Both first column and value cells use --t-body. Weight split
       still distinguishes header (500/600) from data (400). */
    .so-data-table {
        font-size: var(--t-body);
    }
    .so-data-table .dt-name-cell {
        font-size: var(--t-body);
        font-weight: 500;
    }
    .so-data-table .dt-value-cell {
        font-size: var(--t-body);
        font-weight: 400;
    }
    /* Mobile first-column label padding (Javier 2026-04-09: "too close to edge") */
    .so-data-table .dt-name-cell {
        padding-left: 15px;
        padding-right: 10px;
    }
    .so-dt-ce-item-list,.so-dt-ce-item-list.cell-1{
        width: 100%;
        font-size: 16px;
    }
    .so-dt-ce-item-list .so-dt-ce-item-group{
        /* Javier Apr 22:
           (1) Was display:table which makes each item a block-level table, so siblings
               stack vertically — but display:table does NOT honor vertical-align for its
               content, so the sport/extra name sat top-aligned in the 40px box. Flex
               keeps the block-level stacking AND centers content vertically.
           (2) Desktop base rule sets height:40px (fixed) — fine there because table-row
               equalization grows the whole row to match. On mobile (flex, one item per row)
               that fixed height clipped 2-line items. Swap to min-height so 2-line items
               grow naturally while single-liners stay at 40. */
        display: flex;
        align-items: center;
        width:100% !important;
        height: auto;
        min-height: 40px;
        font-size: 16px;
        font-weight: 400;
    }
    .so-dt-ce-item-list.cell-1 .so-dt-ce-item-group{
        padding-right:3px;
    }
    .so-dt-ce-item-list .so-dt-ce-item-group .so-dt-ce-item{
        display:table-cell;
        vertical-align:middle;
        font-size: 16px;
        color: #616161;
        /* Javier Apr 22: was `padding: 15px 3px` — the vertical 15px stacked with the outer
           item-group's 10px (padding: 10px 16px), making Extras rows 50+px taller than Sports
           rows (which have no inner .so-dt-ce-item wrapper). Horizontal 3px kept for consistent
           text inset; vertical padding removed since the outer item-group handles it now. */
        padding: 0 3px;
        word-break: break-word;
        word-wrap: break-word;
    }
    /* Mobile: first column (labels) left-aligned */
    .so-dt-ce-item-list .so-dt-ce-item-group {
        border-right: none;
        text-align: left;
    }
    .so-dt-ce-item-list .so-dt-ce-item-group .so-dt-ce-item {
        text-align: left;
    }
    /* Mobile: links inside value cells are blue, weight 300 (matching desktop) */
    .so-data-table .dt-value-cell a,
    .so-dt-ce-item-list .so-dt-ce-item-group a {
        color: #1e8bc3 !important;
        font-weight: 400 !important;
    }
    .so-dt-ce-section .so-dt-ce-item-list-group .so-dt-ce-item-list:nth-child(1) .so-dt-ce-item-group{
        border-top: none;
    }
    /* Javier 2026-04-20: Extras mobile — horizontal dividers between items inside each category,
       plus right-column padding so content isn't flush to the cell edge. */
    .dt-value-cell .so-dt-ce-item-list + .so-dt-ce-item-list > .so-dt-ce-item-group{
        border-top: 1px solid #ebebeb;
    }
    .dt-value-cell .so-dt-ce-item-list-group + .so-dt-ce-item-list-group{
        margin-top: 12px;
    }
    /* Right column of value-cell gets matching padding (left padding already exists via cell padding) */
    .so-data-table .dt-value-cell{
        padding-left: 12px;
        padding-right: 12px;
    }
    /* Profile section cards on mobile — unified 16px padding, 20px spacing.
       L/R gutter comes from the TOP-LEVEL listing rule (components/school-listing.css) which
       only margins direct children of #main-content — nested cards don't re-apply 4px or we
       get stacking insets and uneven card widths.
       Boosted specificity with #school_overview to override desktop rules defined later in file. */
    #school_overview .profile-section-card{
        padding: 16px 16px 20px;
        margin: 0 !important;
    }
    /* Nested cards inside #school-details-box need gap too */
    #school_overview #school-details-box > .sec-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    /* Zero margin on between-cards button — gap handles spacing */
    #school_overview .large-btn-wrapper.request-info-between-cards {
        margin: 0 !important;
    }
    /* Zero margin on ads inside #school-details-box — gap handles spacing */
    #school_overview #school-details-box .srn-ads-cnt {
        margin: 0 auto !important;
    }
    /* Remove pseudo-element clearfix space inside flex containers */
    #school_overview #school-details-box .srn-ads-cnt::before,
    #school_overview #school-details-box .srn-ads-cnt::after,
    #school_overview #main-content > .srn-ads-cnt::before,
    #school_overview #main-content > .srn-ads-cnt::after {
        display: none;
    }
    /* Unified mobile heading spacing: 16px from card inner edge for ALL sections.
       Javier 2026-04-23 M6.b: visible gap from the orange "Extracurriculars"
       section-header text down to the first data row was ~20px (12 padding
       + 8 margin). Collapse to 8px so the header reads as connected to the
       data below (divisible-by-4 standard). */
    #school_overview .profile-section-card > H2.so-dt-title{
        margin: 0 0 8px;
        padding-bottom: 0;
    }
    #school_overview #top-info-box H3.so-dt-title {
        padding-top: 16px;
        font-size: 20px;
    }
    #school_overview #top-placement-box H2.so-dt-title {
        margin-left: 0;
        margin-top: 0;
    }
    #school_overview #school-details-box h2 {
        margin-top: 0;
        /* Javier 2026-04-23 M6.b: drop padding-bottom (the margin-bottom:8px
           from the generic profile-section-card rule is now the single source
           of vertical space between the orange header and the data below). */
        padding-bottom: 0;
    }
    #school_overview #school_reviews H2.so-dt-title,
    #school_overview #related-school-box H2.so-dt-title {
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 8px;
    }
    /* Grey bullet box padding on mobile — tighter to fit within card */
    #school_overview .grey-bullet-box {
        padding: 16px;
    }
    /* Javier 2026-04-23 M6.a: capitalize first letter of each extracurricular
       item name — the raw data has some entries like "newspaper" / "yearbook club"
       that should render as "Newspaper" / "Yearbook Club". */
    #extracurricular-list .so-dt-ce-item {
        text-transform: capitalize;
    }
    /* Javier 2026-04-23 M6.c: the "Club or Organization:" sub-header inside the
       extracurricular list needs equal top + bottom margin so it breathes
       symmetrically against the surrounding rows. */
    #extracurricular-list > strong,
    #extracurricular-list strong:first-child {
        display: block;
        margin: 8px 0;
    }
    /* FAQ padding on mobile */
    .profile-section-card .faq-details {
        padding-left: 5px;
        padding-right: 5px;
    }
    /* Quick Links alignment on mobile */
    #school_overview .quick-links-block {
        padding-left: 16px;
    }
    /* REQUEST FREE INFO button spacing on mobile */
    #school_overview .profile-section-card .large-btn-wrapper,
    #school_overview .grey-bullet-box .large-btn-wrapper {
        margin-top: 16px;
        margin-bottom: 4px;
    }
    #school_overview #main-content {
        gap: 20px;
    }
    /* Ad spacing on mobile — no top margin (flexbox doesn't collapse), only bottom */
    #school_overview .srn-ads-cnt {
        margin: 0 auto 20px;
        background: transparent;
    }
    /* All ads inside #main-content flex — gap handles spacing, no extra margin */
    #school_overview #main-content .srn-ads-cnt {
        margin: 0 auto !important;
    }
    /* Inside #main-content: side margins only — gap handles vertical spacing */
    #school_overview #main-content > .section-wrapper {
        margin: 0 4px !important;
    }
    /* Zero ALL sec-content vertical padding inside main-content so gap = exact 20px visual */
    #school_overview #main-content > .section-wrapper > .sec-content,
    #school_overview #main-content > .section-wrapper > .sec-content.sec-box,
    #school_overview #main-content > .section-wrapper > .sec-content.sec-box-2 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* #request-placeholder: zero all internal spacing — gap handles it */
    #school_overview #request-placeholder {
        margin: 0 !important;
    }
    #school_overview #request-placeholder > .section-wrapper {
        margin: 0 4px !important;
    }
    #school_overview #request-placeholder .sec-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    #school_overview #request-placeholder .left-ris-content-wrapper {
        padding-top: 10px !important;
        padding-bottom: 0 !important;
    }
    #school_overview #request-placeholder .step-btn-wrapper {
        padding-bottom: 20px !important;
    }
    #school_overview #request-placeholder .std-submit-wrapper {
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }
    /* Outside #main-content (secondary-content, footer): keep 20px bottom margin */
    #school_overview #secondary-content .section-wrapper {
        margin: 0 4px 20px !important;
    }
    /* Ads inside article sections: 10px + article's 10px margin = 20px visual gap */
    #secondary-content .sec-content .srn-ads-cnt {
        margin: 10px auto !important;
    }
    /* Standalone ads between section-wrappers in secondary-content: 20px gap */
    #secondary-content > .srn-ads-cnt {
        margin: 20px auto !important;
    }
    /* Side margins only — gap handles vertical spacing */
    #school_overview #top-placement-box {
        margin: 0 4px !important;
    }
    #school_overview #top-info-box {
        margin: 0 4px !important;
    }
    /* School Rankings content on mobile — keep inner bottom padding for breathing room */
    #school_overview #top-placement-box .sec-content.sec-box {
        padding: 16px 16px 16px !important;
    }
    #school_overview #top-placement-box .top20-placement-list {
        margin-bottom: 20px;
    }
    /* Flags/checkmarks — tighter line height on mobile */
    #school_overview .card-row .checkmarks_list .checkmark_row {
        line-height: 1.3;
    }
    /* Map/photo card area — gap handles spacing, no individual margins */
    /* M4: Quick Facts rounded corners on mobile */
    #school_overview .quick-stats-box {
        border-radius: 12px;
    }
    /* M5: School Notes heading-to-content gap smaller on mobile */
    #school_overview .profile-section-card > H2.so-dt-title {
        margin-bottom: 8px;
    }
    /* Javier 2026-05-05: equal top/bottom margin around mobile ads. The
       prior 20px asymmetric top + 0 bottom (from the .sec-content.sec-box
       > :last-child rule above zeroing mb) read as visually unbalanced. */
    #school_overview #related-school-box .srn-ads-cnt {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }
    /* .tpl-item-col-photo mobile override moved to components/school-listing.css */
    /* Nearby Schools: hide tab buttons on mobile — "Show me:" dropdown is the mobile equivalent */
    #related-school-box .nav-pills.rs-tab-nav {
        display: none !important;
    }
    /* sec-box sections: match profile-section-card top padding — override sec-content zero rule */
    #school_overview #main-content > #top-placement-box > .sec-content.sec-box,
    #school_overview #main-content > #school_reviews > .sec-content.sec-box,
    #school_overview #main-content > #related-school-box > .sec-content.sec-box {
        padding-top: 16px !important;
    }
    /* Nearby Schools: tighten spacing between header dropdown and checkmark block */
    #related-school-box .rs-checkmark-block {
        margin-top: 12px;
    }
    /* Nearby Schools: spacing above the "Show me:" filter row */
    #related-school-box .rs-list-header {
        margin-top: 15px;
    }
    #related-school-box .rs-text-1 {
        font-size: 16px;
        margin: 0;
        padding: 8px 0 0;
    }
    /* R4-02: Remove extra white space between star rating and submit button */
    #review_recommend .starsContainer {
        margin-bottom: 0;
    }
    .review-submit-wrapper {
        margin-top: 6px;
    }
    /* R4-06/08: School Facts values — add padding so text isn't flush with edges */
    .so-data-table .dt-value-cell {
        padding-left: 10px;
        padding-right: 10px;
    }
    /* R4-07/09: Reduce gap below About section ad before Quick Facts/Rankings */
    #school_overview .school-overview-section {
        margin-bottom: 0;
    }
    /* R4-05: Reduce Nearby Schools map height on mobile */
    #rs-map-wrapper .rs-map-screenshot {
        height: 180px !important;
    }
    /* R5-01: Bold module titles on mobile */
    H2.sec-header-title {
        font-weight: 700;
    }
    /* R5-02: Quick Links link text — 18px for readability */
    .quick-stats-links {
        font-size: 18px;
    }
    /* R6-05: Review form + endorsement box — white bg like other cards */
    #school_overview #school_reviews .review-form {
        background: #fff;
        padding: 16px 16px 0;
        margin: 0 -16px;
    }
    /* R6-05b: Endorsement box — white bg, no grey */
    #school_overview #school_reviews .review-note-wrapper.grey-bullet-box {
        margin-bottom: 0;
        border-radius: 8px 8px 0 0;
        font-weight: 400;
        background: #fff;
    }
    /* R5-04: Margin below Submit Review card (review-form bottom padding) */
    #school_overview #school_reviews .review-submit-wrapper {
        padding-bottom: 16px;
    }
    /* R5-06: School Reviews — use default font size, don't bold first paragraph */
    #school_overview #school_reviews .review-body {
        font-size: 16px;
        font-weight: 400;
    }
    /* R5-06b: Review form labels and inputs — 16px on mobile, match RIS form height */
    #school_overview #school_reviews .review-label,
    #school_overview #school_reviews .review-label-text {
        font-size: 16px;
    }
    #school_overview #school_reviews .review-opt,
    #school_overview #school_reviews .review-input {
        font-size: 16px;
        height: auto;
    }
    #school_overview #school_reviews .review-textarea {
        font-size: 16px;
    }
    /* R5-08: Request Information — all form elements 16px on mobile */
    #school_overview #request-placeholder .std-label,
    #school_overview #request-placeholder .form-label,
    #school_overview #request-placeholder .std-radio-label {
        font-size: 16px;
    }
    #school_overview #request-placeholder .std-input,
    #school_overview #request-placeholder .std-country-opt,
    #school_overview #request-placeholder .std-state-opt,
    #school_overview #request-placeholder .std-description-textarea,
    #school_overview #request-placeholder .form-control {
        font-size: 16px;
    }
    #school_overview #request-placeholder .review-opt,
    #school_overview #request-placeholder .review-input,
    #school_overview #request-placeholder select {
        font-size: 16px;
    }
    /* Javier 2026-04-23 M4: submit label one type-scale step up, matching
       the section-header size on mobile (18px). Button itself also needs to
       fill the full card width — see .step-btn-wrapper override below. */
    #school_overview #request-placeholder .std-ri-submit {
        font-size: var(--t-section);
        font-weight: 600;
        width: 100%;
        display: block;
    }
    #school_overview #request-placeholder .step-btn-wrapper {
        padding: 10px 0 20px 0;
        text-align: center;
    }
    #school_overview #request-placeholder .std-ris-prev-step {
        width: auto;
        float: none;
        display: inline-block;
        margin-bottom: 12px;
    }
    /* R6-03: About the School — bottom padding so grey box doesn't touch card edge */
    #school_overview #main-content > #top-info-box > .sec-content {
        padding-bottom: 16px !important;
    }
    /* R5-07: School Notes grey box — consistent text size */
    #school_overview #school-details-box .school-notes-wrapper.grey-bullet-box {
        font-size: 16px;
        font-weight: 400;
    }
}
@media (max-width: 336px)
{
    .school-notes-wrapper{
        margin-left: 10px;
        margin-right: 10px;
        word-break: break-word;
    }
    .sch-avg-rating-wrapper,.review-item{
        padding:0 5px;
    }
    .school-calendar-fc-wrapper{
        margin-left: 10px;
        margin-right: 10px;
        word-break: break-word;
        width:100%;
        min-height:300px;
    }
}

/* Quick Facts in school listing table - orange bullets (uses sprite from icon_features.php) */
.tpl-cqf-row {
	display: block;
	position: relative;
	margin-left: 17px;
	line-height: 1.6;
}

/* Clear the text '›' from components/school-listing.css so only the sprite arrow renders.
   Schools.css loads AFTER school-listing.css so equal-specificity cascade wins naturally
   — !important no longer needed. */
.tpl-cqf-row::before {
	content: '';
	font-size: 0;
}

.tpl-cqf-title {
	font-weight: normal;
}

/* ===== Grey Bullet Box — shared style for all grey containers with orange bullets ===== */
/* Used by: About the School, School Notes, Nearby Schools checkmarks */
.grey-bullet-box {
	background-color: #f7f7f7;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}
/* Remove bottom margin when last child inside a card — card padding (20px) handles spacing */
.profile-section-card > :last-child {
	margin-bottom: 0;
}
/* Rankings box: match card padding — 22px + border + half-leading = 32px visual */
#top-placement-box .sec-content.sec-box {
	padding-top: 22px;
	padding-bottom: 20px;
}
.grey-bullet-box ul {
	list-style: disc outside none;
	padding: 0 0 0 22px;
	margin: 0;
}
.grey-bullet-box ul li {
	margin: 6px 0;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
}
.grey-bullet-box ul li::marker {
	color: #f4b350;
}

/* ===== Profile Page Card Modernization (2026-03-18) ===== */

/* Make #school-details-box transparent — individual sections are their own cards */
#school-details-box {
	border: none;
	box-shadow: none;
	background: transparent;
}
#school-details-box > .sec-content {
	background: transparent;
	padding: 0;
}

/* Individual profile section cards */
.profile-section-card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	box-shadow: 0 3px 8px rgba(0,0,0,0.08);
	padding: 22px 20px 20px;
	margin-bottom: 20px;
}
/* Orange section headings inside cards — Javier 2026-05-21 (eve): same
   spacing above as below. Card has padding-top: 22px above the H2;
   match with margin-bottom: 22px below so the heading sits visually
   centered against the card's top edge. */
.profile-section-card > H2.so-dt-title,
.section-wrapper > .sec-content > H2.so-dt-title,
#top-placement-box H2.so-dt-title,
#top-info-box H2.so-dt-title {
	margin-top: 0;
	margin-bottom: 22px;
}
/* About the School title — 32px visual from card edge, 24px visual to content */
#top-info-box H3.so-dt-title {
	margin-top: 0;
	margin-bottom: 12px;
	padding-top: 22px;
}
/* Rankings box: match card top padding */
#top-placement-box H2.so-dt-title {
	margin-top: 0;
}
/* D6: FAQ left margin — align FAQ arrows with grey box bullet dots */
/* Grey box: card-padding(20px) + border(1px) + grey-padding(20px) = 41px from card edge */
/* FAQ: card-padding(20px) + faq-padding(21px) = 41px from card edge */
.profile-section-card .faq-details {
	padding-left: 21px;
	padding-right: 10px;
}

/* Grey boxes: rounded corners + outline border */
.school-overview-section {
	border-radius: 8px;
	margin-bottom: 20px;
	border: 1px solid #e0e0e0;
}
/* school-notes-wrapper grey-box styling now handled by .grey-bullet-box */
/* Nearby Schools checkmark bullets — uses grey-bullet-box for consistent bullet styling */
.rs-checkmark-block .checkmarks_list {
	padding-left: 22px;
	width: auto;
	box-sizing: border-box;
}
.rs-checkmark-block .checkmark_row {
	background-color: transparent;
	margin: 0;
	list-style: disc outside none;
	display: list-item;
	margin-left: 0;
	padding-right: 0;
	width: auto;
	box-sizing: border-box;
}
.rs-checkmark-block .checkmark_row::marker {
	color: #f4b350;
}
.rs-checkmark-block .checkmark_content {
	background: transparent;
	width: auto;
	margin-left: 0;
	padding: 6px 10px 6px 0;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
}
.rs-checkmark-block .checkmark_content:before {
	content: none;
}

/* Data tables: card-like with rounded corners and vertical separator */
/* Support both .so-data-table > .general-data-table (nested) and .so-data-table.general-data-table (same element) */
.so-data-table .general-data-table,
.so-data-table.general-data-table {
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #e5e5e5;
}
/* Javier 2026-05-05: removed the desktop ::after vertical divider on
   .dt-name-cell — every vertical line on the right edge of the gray
   label cell is gone (mobile counterpart border-right also dropped in
   data_table.css). Tables now read as a clean gray-to-white column
   transition with no separator stroke. */
@media (min-width: 768px) {
	.so-data-table .dt-name-cell,
	.so-data-table.general-data-table > .dt-single-row-table .dt-name-cell {
		border-right: none;
	}
	.so-data-table .dt-name-cell.definitions-name-cell {
		border-bottom: none;
	}
	/* Javier 2026-05-22: REVERTED the border-top: none suppression so the
	   grey divider crosses the FULL row (both name + value columns) under
	   the header. Previously suppressed to avoid a "double line" effect
	   under the corner, but Javier wants the consistent full-width divider
	   like the dividers between subsequent rows. Leaving commented as
	   record of the prior intent. */
	/*
	.so-data-table .general-data-table:has(> .dt-single-row-table:first-of-type .definitions-name-cell) > .dt-single-row-table:nth-of-type(2) .dt-name-cell,
	.so-data-table.general-data-table:has(> .dt-single-row-table:first-of-type .definitions-name-cell) > .dt-single-row-table:nth-of-type(2) .dt-name-cell {
		border-top: none;
	}
	*/
}
/* First row top border not needed inside rounded card */
.so-data-table .general-data-table .dt-single-row-table:first-of-type .dt-name-cell,
.so-data-table .general-data-table .dt-single-row-table:first-of-type .dt-value-cell,
.so-data-table .general-data-table .dt-single-row-table:first-of-type .dt-chart-cell,
.so-data-table.general-data-table > .dt-single-row-table:first-of-type .dt-name-cell,
.so-data-table.general-data-table > .dt-single-row-table:first-of-type .dt-value-cell,
.so-data-table.general-data-table > .dt-single-row-table:first-of-type .dt-chart-cell {
	border-top: none;
}
/* Last row bottom border not needed inside rounded card */
.so-data-table .general-data-table .dt-single-row-table:last-of-type .dt-name-cell,
.so-data-table .general-data-table .dt-single-row-table:last-of-type .dt-value-cell,
.so-data-table .general-data-table .dt-single-row-table:last-of-type .dt-chart-cell,
.so-data-table.general-data-table > .dt-single-row-table:last-of-type .dt-name-cell,
.so-data-table.general-data-table > .dt-single-row-table:last-of-type .dt-value-cell,
.so-data-table.general-data-table > .dt-single-row-table:last-of-type .dt-chart-cell {
	border-bottom: none;
}

/* Rankings table mobile: Javier 2026-05-05 — text in tables is body role
   (16px) on every viewport. Removed prior 14px font-size mobile overrides
   on .t20p-list-column / A.t20p-list-link so they inherit --t-body. */
@media (max-width: 767px) {
	.t20p-list-head-row .t20p-list-column {
		padding-left: 15px;
		padding-right: 15px;
	}
	.t20p-list-row .t20p-list-column {
		padding-left: 15px;
		padding-right: 15px;
	}
	/* M5: Align rankings table left margin with card content, add bottom margin */
	.top20-placement-list {
		margin-bottom: 15px;
	}
	/* M15: Category values are data, not headers — drop the bold */
	.top20-placement-list.default-layout .t20p-list-row .category-col {
		font-weight: 400;
	}
}

/* .tp-school-list.sonearby-layout moved to components/school-listing.css */H1#main-headline A.amc-fcat-headline-link:hover{
    text-decoration: none;
    color: #f4b350;
}
.amc-date-author{
    text-align: center;
    font-size: 16px;
    position:relative;
    display:block;
}
.amc-date{
    display:inline-block;
    height: 28px;
    line-height: 28px;
}
.amc-author{
    display:inline-block;
    vertical-align:middle;
    height: 28px;
    line-height: 28px;
}
.amc-photo-blurb{
    margin:15px 0 20px;
}
.amc-photo-blurb picture{
    float:left;
    margin-right:20px;
}
.amc-photo {
    width: 462px;
    height:auto;
}
.amc-photo-cnt{
    float: left;
    background: none repeat scroll 0 0 #fbfbfb;
    margin-right:20px; 
}
.amc-blurb {
    font-style:italic;
    margin:0;
    font-size: 16px;
}
.amc-read-more-cnt{
    text-align: right;
    margin-left: 7px;
}
A.amc-headline-link:hover,A.amc-headline-link:hover > H2.amc-article-title{
    text-decoration: none;
    color: #f4b350;
}
/* Javier 2026-05-20: refresh blockquote to use the brand-blue accent
   (#1E8BC3 from the menu bar) + the school-card grey (#F8F9FA), so the
   blockquote feels site-native instead of generic grey. Site-wide on
   article pages — covers both .amc-blockquote and bare <blockquote>. */
article.amc-content-html .amc-blockquote, article.amc-content-html blockquote{
    padding: 12px 16px;
    margin: 1rem 0;
    font-style: italic;
    border-left: 4px solid #1E8BC3;
    background: #F8F9FA;
    border-radius: 0 4px 4px 0;
    display: inline-block;
}
article.amc-content-html .amc-blockquote *:last-child, article.amc-content-html blockquote *:last-child{
    margin-bottom:0;
}
.amc-content-html{
    font-size:18px;
    color: #616161;
    font-weight: 400;
    margin:20px 0 0;
}
.amc-content-html ul {
    margin:20px 0;
    list-style: none outside none;
}
.amc-content-html ol {
    margin:20px 0;
}
.amc-content-html LI {
    margin: 0 0 5px 22px;
}
/* Scope the bullet to <ul> only; ordered lists must keep their numbers.
   The old unscoped `LI { list-style-type: disc }` forced disc on every
   list item, so numbered lists (<ol>) rendered as bullets on the live
   site (Asana 1213396191625713). */
.amc-content-html ul > LI {
    list-style-type: disc;
}
.amc-content-html ol > LI {
    list-style-type: decimal;
}
.amc-content-html li > p {
    margin: 0;
}
.amc-content-html p {
    margin-bottom:20px;
}
.amc-content-html  STRONG {
    color: #616161;
    font-weight: 600;
}
.amc-content-html table {
    border: 1px solid;
    max-width: 98% !important;
    overflow-wrap: break-word;
    width:100% !important;
    display:table;
    margin-bottom: 20px;
    border-collapse: collapse;
}
.amc-content-html tr {
    border: 1px solid;
}
.amc-content-html td,
.amc-content-html th {
    border: 1px solid;
    padding: 8px 12px;
}
.amc-content-html h1,
.amc-content-html h2,
.amc-content-html h3,
.amc-content-html h4,
.amc-content-html h5,
.amc-content-html h6 {
    color: rgb(97, 97, 97);
    font-weight: 700;
    margin: 25px 0 15px;
}
/* Note: an earlier defensive `p:has(>strong:only-child)` rule was removed
   because the CSS minifier choked on `:has()` and dropped surrounding
   rules along with it. Server-side fake-heading promotion in
   convert_content() now handles the case anyway. */
.amc-content-html h2 {
    font-size: 24px;
}
.amc-content-html h3 {
    font-size: 21px;
}
.amc-content-html h4 {
    font-size: 18px;
}
.amc-content-html .amc-yt,.amc-content-html .amc-iframe{
    display: block;
    clear: both;
    margin: 20px auto !important;
    max-width: 90%;
    height: auto;
    float: none !important;
    aspect-ratio: 16 / 9;
}
.amc-content-html .amc-img{
    display: block;
    clear: both;
    margin: 20px auto !important;
    max-width: 90%;
    height:auto;
    float: none !important;
}
.amc-content-html .amc-img-license{
    margin-left: calc(50% - 96px);
}
nav.amc-pagination-nav{
    margin:20px 0;
}
.amc-pagination-link,.amc-pagination-number{
    margin:0 5px;
}
.amc-resource-box {
    border: 1px solid lightGrey;
    border-radius: 5px;
    background-color: #F6F6F6;
    margin:20px 0;
}
.amc-resource-box > A.resource-block-link{
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0px 10px;
    font-size: 18px;
    font-weight: bold;
    color: #1E8BC3;
    text-decoration: none;
}
.amc-resource-box > .resource-block {
    padding: 5px 10px 10px;
    font-size:16px;
}
.amc-resource-box > .resource-block pre{
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    font-family: Hind, sans-serif;
}
.amc-comments-cnt{
    margin:20px 0;
}
.amc-nav-articles{
    width:100%;
    margin:20px 0;
    display:flex;
}
.amc-nav-p{
    margin:0 0 20px;
}
.amc-nav-block{
    width:50%;
    display:inline-block;
}
.amc-nav-block.amc-nav-pre{
    margin-right:10px;
}
.amc-nav-block.amc-nav-next{
    margin-left:10px;
}
.mpa-photo.amc-nav-photo{
    height:250px;
}
.mpa-pt.amc-nav-pt{
    margin-bottom:0;
}
.aisc-name{
    color: #616161;
    font-size: 18px;
    font-weight:600;
    margin-bottom:10px;
}
.aisc-blurb{
    color: #616161;
    font-weight: 400;
    margin-bottom:10px;
}
.mpa-photo.aisc-photo {
    height:185px;
}
.aisc-more{
    font-size: 18px;
    color: #1e8bc3;
    text-align: center;
    border-bottom: 1px solid #dadfe1;
    padding-bottom:10px;
    margin:10px 0;
}
.aisc-more-link{
    margin:6px 0;
    display: block;
}
@media (min-width: 767px) and (max-width:1200px)
{
    .amc-photo-blurb picture{
        float:none;
        margin-right:0px;
    }
    .amc-photo-blurb img{
        width: 100%;
    }
}
@media (max-width: 767px)
{
    .amc-photo-blurb picture{
        float:none;
        margin-right:0px;
    }
    .amc-photo-blurb img{
        width: 100%;
    }
    .amc-date-author{
        font-size:15px;
    }
    .amc-date,.amc-author{
        display:block;
    }
    .amc-photo {
        float:none;
        margin-right:0;
        width: 100%;
        max-width: 100%;
        height:auto;
    }
    .amc-blurb {
        margin:10px 0;
    }
    .amc-content-html img[src*="creativecommons.org"]{
        width: 80px !important;
        height: 15px !important;
    }
    nav.amc-pagination-nav{
        margin:10px;
    }
    .amc-pagination-link,.amc-pagination-number{
        font-size:14px;
    }
    .amc-comments-cnt{
        margin:10px 0;
    }
    .amc-nav-articles{
        margin:10px 0;
        display: block;
    }
    .amc-nav-block{
        width: 100%;
        display:block;
    }
    .amc-nav-p{
        margin:0 0 10px;
    }
    .amc-nav-block.amc-nav-pre,.amc-nav-block.amc-nav-next{
        margin-right:0;
        margin-left:0;
    }
    .mpa-pt.amc-nav-pt{
        margin-bottom:10px;
    }
}
@media (max-width: 336px)
{
    .amc-content-html table {
        font-size: 15px;
    }
    nav.amc-pagination-nav{
        margin:10px 5px;
    }
}/*
* Student Member Area
* DropDownSubStudentsListView
* Multiple profile menu
* Multiple profiles menu
*/
.profile-select-wrapper{
    display:inline-block;
    position:relative;
    cursor: pointer;
    margin:5px 30px 0 0;
    -webkit-tap-highlight-color:transparent;
}
.active-profile{
    display:inline-block;
    cursor: pointer;
    color: #1E8BC3;
    -webkit-tap-highlight-color:transparent;
}
.profile-select-icon{
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-left: 5px;
    border: 1px solid #E6E6E6;
    border-radius: 5px;
    line-height: 20px;
    text-align: center;
    -webkit-tap-highlight-color:transparent;
}
.profile-menu-wrapper{
    position:absolute !important;
    z-index:999999;
    display:none;
    top: 25px;
    right:0px;
    position: relative;
    border: 1px solid #E6E6E6;
    border-radius: 5px;
    background-color:#FFFFFF;
    padding-bottom:5px;
    -webkit-tap-highlight-color:transparent;
}
.profile-menu{
    padding:10px;
    min-width:160px;
    max-width:250px;
}
.profile-opt{
    display:block;
}
.add-profile-link{
    border-top:1px solid #CBD0E3; 
    padding:10px 0 0 10px;
    font-weight: 600;
    display:block;
}
/*
/students/email-notifications
*/
.email-notification-form{
    font-size: 18px;
    font-weight: 400;
    position:relative;
    display:block;
    margin:30px 0 20px;
}
.enf-form-group{
    margin:3px 0;
}
.enf-radio{
    display:inline-block;
}
.enf-label{
    width:auto;
    font-weight: 400;
}
.enf-radio-label{
    font-weight: 400;
}
.multi-select-box{
    width:80%;
    position: relative; 
    min-height:320px;
}
@media (min-width: 1200px){
    .enf-label{
        width:450px;
    }
}
@media (min-width: 767px) and (max-width:1200px){
    .enf-label{
        width:450px;
    }
}
@media (max-width: 767px){
    .profile-select-wrapper{
        display: block;
        margin-bottom: 20px;
    }
    .profile-menu-wrapper{
        right:unset;
        left:0;
    }
    .student-member-top-wrapper .mobile-menu-bar{
        height:100%;
    }
    .student-member-top-wrapper .mobile-menu-bar span{
        margin-top:34px;
    }
}

/* Save-school confirmation banner on /students/school-favorites.
   The shared MessageView renders red ".user_message emphasized" (reads like an
   error). Scoped to this page the message is always a positive save/remove
   confirmation, so style it as a success banner consistent with the member-area
   .banner-wrapper (rounded card) (Asana 1205875793927552). */
#school_favorite .user_message.emphasized {
    color: #1e7a3c;
    font-weight: 600;
    text-align: center;
    background-color: #eafaf0;
    border: 1px solid #b7e3c6;
    border-radius: 5px;
    padding: 14px 20px;
    margin: 0 0 20px;
    font-size: 18px;
}
#school_favorite .user_message.emphasized b {
    font-weight: 700;
}

@media (max-width: 480px){
}H3.stdf-section-title{
    border-bottom: 1px solid #dadfe1;
    color: #f4b350;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 20px 0 10px;
    padding-bottom: 10px;
}
.std-form{
    display:block;
    /* Javier 2026-04-26: text in sidebar cards is body role (16px). */
    font-size: var(--t-body);
    line-height: var(--lh-body);
}
.std-form-group{
    display:flex;
    flex-wrap:wrap;
    align-items: center;
}
.std-form-group.std-checkbox-form-group{
    display:block;
}
.std-form-group.std-student-state-form-group.inactive{
    display:none;
}
.std-label{
    padding: 5px;
    width: 200px;
    font-weight:400;
}
.std-label.std-desciption-label{
    width: 90%;
}
.std-label.std-checkbox-label{
    width: calc(100% - 60px);
    padding:0px;
}
.std-input,.std-opt,.std-radio,.std-radios-wrapper,.std-radio-group{
    display:inline-block;
}
.std-input{
    width: 240px;
    margin-right:6px;
    background-color: #fff;
}
.std-radio-label{
    margin-right:10px;
    font-weight:400;
}
.std-opt{
    margin-right:6px;
    background-color: #fff;
}
.std-description-textarea{
    width:85%;
    background-color: #fff;
}
.std-country-opt,.std-state-opt{
    width:230px;
}
.std-notify-label{
    display:block;
    width: calc(100% - 210px);
    margin-left:210px;
    font-size: 14px;
    font-style: normal;
    padding-top: 10px;
}
.std-validate-msg{
    display:block;
    font-size:18px;
    font-weight: 400;
    width: calc(100% - 210px);
    margin-left: 210px;
}
.std-custom-checkbox-wrapper{
    display:inline-block;
    position:relative;
    width:35px;
    height:35px;
    margin-right:15px;
    cursor: pointer;
}
.std-custom-checkbox{
    display:inline-block;
    position:relative;
}
.std-custom-checkbox::before{
    content: "";
    display: block;
    cursor: pointer;
    position: absolute;
    width: 30px;
    height: 30px;
    top: -2px;
    left: -2px;
    background: #f7f7f7;
    border: 2px solid #e6e6e6;
    border-radius: 5px;
    opacity: 1;
}
.std-custom-checkbox:checked::after{
    opacity: 1;
}
.std-custom-checkbox::after{
    cursor: pointer;
    opacity: 0;
    content: '';
    position: absolute;
    width: 12px;
    height: 6px;
    background: 0 0;
    top: 7px;
    left: 7px;
    border: 4px solid #f5b34f;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.save-profile-wrapper{
    display:none;
}
.save-profile-wrapper.active{
    display:block;
}

.right-ri-content-wrapper{
    padding: 20px;
    background: #f7f7f7;
}
.std-narrow-form .std-custom-checkbox::before{
    background: #ffffff;
}
.std-narrow-form .std-label{
    padding:5px 0;
    width:100%;
}
.std-narrow-form .std-label.std-user-type-label{
    width:auto;
    margin-right:6px;
}
.std-narrow-form .std-input,.std-narrow-form .std-country-opt,.std-narrow-form .std-state-opt,.std-narrow-form .std-description-textarea{
    width: 84%;
    margin-left:0px;
}
.std-narrow-form .std-notify-label{
    width: 84%;
    margin-left:0px;
}
/* Right-align REQUEST INFO button in sidebar form */
.std-submit-wrapper {
    text-align: right;
}
.std-narrow-form .std-ri-submit{
    background: #68c3a3;
}
.std-narrow-form .std-ri-submit:hover{
    background-color: #74dbb7;
}
.std-narrow-form .std-label.std-checkbox-label {
    width: calc(100% - 60px);
    padding: 0px;
}
.std-narrow-form .std-validate-msg{
    width:100%;
    margin-left: 0px;
}
.left-ris-content-wrapper{
    padding:20px;
    background: #f7f7f7;
}
.ris-step-wrapper{
    display:block;
    font-weight: 400;
    display:none;
}
.ris-step-wrapper.active{
    display:block;
}
.std-narrow-form .ris-step-wrapper .std-input, .std-narrow-form .ris-step-wrapper .std-country-opt, .std-narrow-form .ris-step-wrapper .std-state-opt{
    width: 89%;
    margin-left: 0px;
}
.step-desc-wrapper{
    text-align:right;
}
.step-btn-wrapper{
    text-align:right;
    padding:10px 10px 10px 0;
}
.std-ris-prev-step{
    float:left;
}
.std-ris-submit{
    float:right;
}
.duplicate-inquiry-validate-msg{
    display:none;
}
.duplicate-inquiry-validate-msg.active{
    display:block;
    color:red;
    text-align:center;
    margin:10px auto;
    font-weight:bold;
}

@media (min-width: 767px) and (max-width:1200px)
{
    .std-label{
        width: 140px;
    }
    .std-notify-label,.std-validate-msg{
        width: calc(100% - 150px);
        margin-left: 150px;
    }
    .right-ri-content-wrapper{
        padding:20px 5px;
    }
    .std-narrow-form .std-opt.std-month-opt{
        width: 30%;
    }
}
@media (max-width: 767px)
{
    .std-narrow-form .std-ri-submit{
        font-size:18px;
        padding: 12px 24px;
        width: 100%;
        box-sizing: border-box;
    }
    .std-label{
        width:100%;
        padding:0;
    }
    .std-input,.std-country-opt,.std-state-opt,.std-description-textarea{
        width: 90%;
    }
    .std-notify-label,.std-validate-msg{
        width: 90%;
        margin-left:0;
    }
    #right-ri-box{
        display:none;
    }
    .step-desc-wrapper{
        font-size: 14px;
    }
}
@media (max-width: 325px)
{
}/*** school widget page ***/
.schoolwidget .load {
    background: url("/images/showmoreloadingimage.gif") no-repeat scroll 0 50% rgba(0, 0, 0, 0);
    padding: 5px 0 5px 20px;
}
.schoolwidget .load{
    height:25px;
}
.schoolwidget .schoolwidget-form-container {float:left;width:400px;}
.schoolwidget .schoolwidget-form-container .contentboxouter{margin:10px;}
.schoolwidget .schoolwidget-iframe-container {float:left;margin:0 0 0 10px;}
.schoolwidget .schoolwidget-iframe-container iframe{max-width:1100px;}
.schoolwidget #DistrictResults,.schoolwidget #countyResults {
    padding: 10px;
    max-height: 400px;
    overflow: auto;
}
.schoolwidget #DistrictResults p,.schoolwidget #countyResults p{
    font-size:16px;
    margin-bottom:0px;
    margin-left:15px;
    max-height: 400px;
}
.schoolwidget .clear_section {
    margin-left:5px;
    text-decoration:none;
}
.schoolwidget .clear_section:hover {
    color: #2D8CCB;
}
.schoolwidget .expandable:hover {text-decoration:none;color:#2D8CCB;}
.schoolwidget .color_picker {position:relative;}
.schoolwidget #colorpicker_container {
    top: 50px;
    left: 180px;
    width: 356px;
    height: 0;
    overflow: hidden;
    position: absolute;
}
.schoolwidget .widget_html_source label {
    display: block;
    margin: 0 0 10px;
    font-size:16px;
    color: #666;
}
.schoolwidget .widget_html_source textarea {
    border: 1px solid #DADFE1;
    vertical-align: middle;
    padding: 2px;
    width: -webkit-calc(100% - 7px);
    width: calc(100% - 7px);
}
#schoolwidget-form p.description {
    margin-left:0;
}
#widget_city {
    width: -webkit-calc(100% - 9px);
    width: calc(100% - 9px);
}
@media (min-width: 1200px){
    .schoolwidget .schoolwidget-form-container {width: 833px;}
}
@media (min-width: 768px) and (max-width:1080px){
    .schoolwidget .schoolwidget-iframe-container{
        width: auto;
    }
}
@media (max-width: 767px) {
    #microdata-container{
        display: none;
    }
    .schoolwidget .schoolwidget-form-container{
        margin: 0 10px;
        width: auto;
        float:none;
    }
    .schoolwidget .schoolwidget-iframe-container{
        float: none;
        width: auto;
        margin: 0 auto;
        text-align: center;
    }
    .schoolwidget .schoolwidget-iframe-container iframe{
        max-width:100%;
    }
    .fademask.on {
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 101;
    }
}