@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(//static.boardingschoolreview.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.boardingschoolreview.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.boardingschoolreview.com/fonts/hind_300_first.woff2) format('woff2'), url(//static.boardingschoolreview.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.boardingschoolreview.com/fonts/hind_400_first.woff2) format('woff2'), url(//static.boardingschoolreview.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.boardingschoolreview.com/fonts/hind_500_first.woff2) format('woff2'), url(//static.boardingschoolreview.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.boardingschoolreview.com/fonts/hind_600_first.woff2) format('woff2'), url(//static.boardingschoolreview.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.boardingschoolreview.com/fonts/hind_700_first.woff2) format('woff2'), url(//static.boardingschoolreview.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.boardingschoolreview.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:300;
}
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 (ported from PVSR).
   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);

	/* 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;

	/* Brand tokens — BSR (BoardingSchoolReview)
	   ------------------------------------------------------------
	   This is the per-site theming block. The structural tokens above are
	   identical across SRN sites; only this block changes per brand. The v4
	   component CSS (hero-section.css, srn-v4.css, school-listing.css)
	   references these var()s instead of hardcoding hexes — so porting the
	   look to another site is a values-only edit here.

	   PVSR reference values (for cross-checking the port):
	     --brand-accent  #F5A623   --link-color #2165d3
	     --hero-town-link #4da6ff   --cta-orange #f4b350
	*/
	/* Javier 2026-05-30: BSR v4 must match PVSR's colors exactly — no per-site
	   difference. These mirror PVSR's hero-section.css / srn-v4.css brand hexes. */
	--brand-accent:   #F5A623; /* school-hero accent + badges (matches PVSR) */
	--link-color:     #2165d3; /* v4 row/link color (matches PVSR) */
	--hero-town-link: #4da6ff; /* state/town hero link (matches PVSR) */
	--cta-orange:     #f4b350; /* member-area submit button (matches PVSR) */
}

@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;
}
.fw-300{
    font-weight:300;
}
.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, 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;
}
.text-style-1{
    font-size:16px;
    color: #616161;
    font-weight:300;
}
.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,H3.tpl-sub-list-title{
    font-style: normal;
    color: #f4b350;
    font-size: 24px;
    margin:25px 0;
    font-family: Montserrat-bold,sans-serif;
}
H2.list-title.lt-lre{
    margin:10px 0;
}
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: 30px;
    font-weight:700;
    margin: 15px 0 15px;
    font-family: Montserrat-bold,sans-serif;
}
H2.review-dt-title,#student_review H2.so-dt-title{
    font-style: normal;
    color: #f4b350;
    font-size: 24px;
    font-weight:700;
    margin: 25px 0 25px;
    font-family: Montserrat-bold,sans-serif;
    line-height:24px;
}
H2.c-blue-h2{
    font-size:18px;
    font-weight:400;
    display:block;
    color:#006699;
    margin-bottom:10px;
}
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;
}
@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: 10px;
    }
    .large-btn, A.large-btn {
        width: calc(100% - 90px);
        padding: 0 10px 0 70px;
        font-size: 16px;
    }
}


#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;
}
/* v4 listing-page layout (Phase 1b BSR migration): on listing pages put the filter
   sidebar on the LEFT and the school list on the RIGHT (the default above is
   content-left / sidebar-right, kept for profile/member/article pages). Scoped to the
   real BSR listing body-ids (#boarding_school_state + the by-* category pages); the
   PVSR ids are included as harmless future-proofing (they match no BSR markup). This
   is the structural precondition for the Phase-3 filter sidebar. */
@media (min-width: 1201px) {
    #boarding_school_state #main-content,
    #boarding-schools-by-religion #main-content,
    #boarding_schools_by_sport #main-content,
    #boarding_schools_extra #main-content,
    #state_schools #main-content,
    #religious-schools #main-content,
    #affiliation-schools #main-content,
    #sport-schools #main-content,
    #find-school-result #main-content {
        position:relative;
        display:block;
        float:right;
        width: 824px;
        margin:0 auto;
        padding:0;
    }
    #boarding_school_state #secondary-content,
    #boarding-schools-by-religion #secondary-content,
    #boarding_schools_by_sport #secondary-content,
    #boarding_schools_extra #secondary-content,
    #state_schools #secondary-content,
    #religious-schools #secondary-content,
    #affiliation-schools #secondary-content,
    #sport-schools #secondary-content,
    #find-school-result #secondary-content {
        position:relative;
        display:block;
        float:left;
        width: 336px;
        margin:0 auto;
        padding:0;
    }
}
@media (min-width: 768px) and (max-width: 1200px) {
    #boarding_school_state #main-content,
    #boarding-schools-by-religion #main-content,
    #boarding_schools_by_sport #main-content,
    #boarding_schools_extra #main-content,
    #state_schools #main-content,
    #religious-schools #main-content,
    #affiliation-schools #main-content,
    #sport-schools #main-content,
    #find-school-result #main-content {
        float: right;
    }
    #boarding_school_state #secondary-content,
    #boarding-schools-by-religion #secondary-content,
    #boarding_schools_by_sport #secondary-content,
    #boarding_schools_extra #secondary-content,
    #state_schools #secondary-content,
    #religious-schools #secondary-content,
    #affiliation-schools #secondary-content,
    #sport-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;
    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: 1.3;
    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,.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;
}
.section-wrapper.tab-box-wrapper{
    border-radius: 10px;
	background-color:#ffffff;
}
.section-wrapper.amc-box-wrapper{
    border-radius: 5px;
    border:none;
}
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;
    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;
    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;
}
.sec-content.quick-box {
    padding: 5px 0;
}
.sec-content.dyk-box {
    padding:20px;
    font-size: 20px;
    font-weight:300;
}
.sec-content.amc-box{
    padding:10px 20px;
    border-radius:5px;
    border: 1px solid #e6e6e6;
    font-size: 18px;
    color: #616161;
    font-weight: 300;
}
.sec-content.review-spell-check{
    display:table;
    border: 1px solid #e6e6e6;
    padding:5px 0;
}
/*MultipleSchoolsLayoutView*/
.sec-overview-wrapper{
    color: #616161;
    font-size:16px;
    width: 100%;
    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,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: 768px;
        padding:0;
        margin: 0 auto;
    }
    #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{
        font-size:30px;
    }
    .section-wrapper{
        margin:10px;
    }
    header.section-header > .sec-header-icon-bg.large-icon{
        width:60px;
    }
    header.section-header H2.sec-header-title{
        font-size:1.2rem;
        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 10px;
    }
    .sec-content.tab-box{
        padding: 10px 10px 0;
    }
    .sec-content.dyk-box{
        padding:10px;
    }
    .sec-content.amc-box {
        padding:10px 10px;
    }
    /*MultipleSchoolsLayoutView*/
    .sec-overview-wrapper{
        margin:0 0 10px;
    }
    .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;
    }
    .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;
    }
    .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) {
    .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%;
        height:600px;
    }
    .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) {
    .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;
        height:600px;
    }
    .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;
}
.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;
}
.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%;
    text-align:center;
    vertical-align:middle;
    overflow:hidden;
}
.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{
        width:336px;
        height:280px;
    }
    .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,.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;
    }
}.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: 766px;
    width: calc(100% - 414px);
    width: -webkit-calc(100% - 414px);
    width: -moz-calc(100% - 414px);
    position:relative;
}
.header-search-bar.logged-in{
    width: calc(100% - 471px);
    width: -webkit-calc(100% - 471px);
    width: -moz-calc(100% - 471px);
    position:relative;
}
.cse-search-box{
    display: inline-flex;
    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;
    width:7px;
    height:38px;
    line-height: 38px;
    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:300;
    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:65px;
    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:55px;
    height:36px;
}
.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:55px;
    height:36px;
    line-height:36px;
    margin: 4px 10px 4px 0;
}
/*FeaturedSchoolsHeaderView*/
.fs-banner-wrapper {
    background-color: #e9e9e9;
    display: block;
    height: 80px;
    margin: 0 auto;
    width: 100%;
    border-bottom: 1px solid #d9d9d9;
    cursor:pointer;
}
.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:160px;
        height:auto;
        line-height: 1;
    }
    .header-content .header-logo-img {
        width:160px;
        height:auto;
        margin-top:5px;
    }
    .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;
}
.ft-logo{
    margin-right: 30px;
    margin-top: 5px;
}
.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.ft-cmp-link{
    display:none;
}
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)
{
    .footer-top {
        width: 93.75%;
        padding: 3.125%;
    }
    .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;
    }
    A.ft-nav-link.ft-cmp-link{
        display:block;
    }
    .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;
    }
}
@media (max-width: 336px)
{
    footer.page-footer
    {
        font-size:14px;
    }
}


#interstitial_background {
  position:fixed;
  background-color: #000;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:100;
}
#interstitial_content {
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:101;
}
#interstitial_ad_wrapper {
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:99999999999;
  text-align:center;
}
#interstitial_ad_wrapper p { margin: 10px; text-align:right; color: #FFF; font-weight:bold; }
#interstitial_ad_wrapper p a { font-weight: normal; text-decoration: none; }
#interstitial_ad_wrapper p a:link { color: #FC0; }
#interstitial_ad_wrapper p a:hover { color: #FE0; }
#interstitial_ad_wrapper p a:active { color: #FF0; }/* 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:460px;
}
.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: 600px;
    width: 100%;
    height: auto;
    object-fit:cover;
    object-position:center top;
}
.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;
}
.welcome-section .ag-thumbs{
    margin-top: 0;
}
.ag-thumbs-slider {
    font-size: 0;
    display: inline-block;
    overflow: hidden;
    width: auto;
    position:relative;
}
.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 {
    height: 100%;
    width: 3em;
    cursor: pointer;
}
.ag-previous img, .ag-next img {
    position: absolute;
    top: 45%;
}
.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 {
    top: 35%;
    width: 61px;
    height: 122px;
}
.ag-redesign .ag-previous > div, .ag-redesign .ag-next > div {
    width: 61px;
}
.ag-redesign .ag-next {
    right: 61px;
}
.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: 50px;
    }
    .ag-redesign .ag-previous img, .ag-redesign .ag-next img {
        top: calc(50% - 50px);
        width: 50px;
        height: 91px;
    }
    .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;
        align-items: 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;
    }
}
/* 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;
}
.mini-map.map-have-option,.full-map.map-have-option{
    border-radius: 5px 5px 0 0;
}
.rs-map{
    height: 250px;
    width: 100%;
}
.map-select-btn {
    border: 1px solid #cbcedb;
    border-top: none;
    height: 35px;
    width: calc(100% - 10px);
    color: #545455;
    font-size: 18px;
    outline: 0 none;
    padding: 4px 5px;
    border-radius: 0 0 5px 5px;
    box-sizing: content-box;
}
@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;
    }
}/*popular articles box, recent article box used on most of pages*/
.mpa-pt
{
    display:block;
    position:relative;
    text-decoration: none;
    overflow:hidden;
    border-radius: 5px;
    margin-bottom:10px;
    padding:0;
}
A.mpa-pt:hover{
    text-decoration: none;
}
.mpa-photo{
    width: 100%;
    height: 218px;
    object-fit:cover;
    object-position:center top;
    border-radius: 5px;
    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 0 5px 5px;
    font-size:18px;
    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;
}

.ra-box
{
    padding: 15px 0 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #fcfcfc;
    overflow: auto;
}
.ra-pt {
    display:block;
    position:relative;
    width: 259px;
    margin-right: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    background-color: #fff;
}
.ra-pt:last-of-type{
    margin-right:0;
}
.ra-photo-link {
    display:block;
    width: 100%;
}
.ra-photo{
    width: 100%;
    border-radius: 5px 5px 0 0;
    height: 200px;
    object-fit:cover;
    object-position:center top;
}
.ra-tb-cnt{
    padding: 20px;
}
A.ra-title-link {
    display:block;
    margin: 10px 0;
    font-weight: 700;
    font-size: 18px;
}
.ra-publish-date,.ra-blurb{
    font-size: 16px;
    color: #616161;
    font-weight: 300;
}
@media (min-width: 767px) and (max-width:1200px)
{
    .ra-photo{
        height:110px;
    }
}
/*
FeaturedSchoolsHorizontalView
FeaturedSchoolsVerticalView
*/
.fsv-bc-wrapper{
    position:relative;
    display:block;
    margin:10px 4px;
}
.fsv-bc-img-link{
    position:relative;
    display:block;
    float: left;
    width: 48%;
    min-width:135px;
    height: 135px;
    text-align: center;
    padding: 0 10px 5px 0;
    cursor:pointer;
}
.fsv-bc-img{
    position:relative;
    display:block;
    background: none repeat scroll 0 0 #fbfbfb;
    text-align: center;
    width:auto;
    height: 135px;
    cursor:pointer;
}
.fsv-bc-name-si{
    position:relative;
    display:block;
    float: left;
    width: 45%;
    color: #616161;
    font-size: 16px;
    font-weight: 300;
    padding-bottom: 10px;
    cursor:pointer;
}
.fsv-bc-name-si .fsv-bc-name{
    font-weight: 700;
}
.fsv-bc-desc{
    position:relative;
    display:block;
    color: #616161;
    font-size: 16px;
    padding-bottom: 10px;
    width: 98%;
    font-weight: 300;
    cursor:pointer;
    clear:both;
}
.fsh-bc-wrapper{
    position:relative;
    display:block;
    margin:10px 4px;
    float: left;
    width: 48%;
}
#compare_schools .fsh-bc-wrapper,#school_ranking .fsh-bc-wrapper{
    width: 33%;
    margin:10px 0;
}
.fsh-bc-img-link{
    position:relative;
    display:block;
    float: left;
    width: 40%;
    min-width : 150px;
    height: 150px;
    padding: 0 10px 5px 0;
    font-size: 14px;
    cursor:pointer;
}
.fsh-bc-img{
    position:relative;
    display:block;
    background: none repeat scroll 0 0 #fbfbfb;
    text-align: center;
    width:auto;
    height: 150px;
    cursor:pointer;
}
.fsh-bc-name-si{
    position:relative;
    display:block;
    float: left;
    width: 56%;
    color: #616161;
    font-size: 16px;
    font-weight: 300;
    padding-bottom: 10px;
    cursor:pointer;
}
.fsh-bc-name-si .fsh-bc-name{
    font-weight: 700;
}
.fsh-bc-desc {
    position:relative;
    display:block;
    color: #616161;
    font-size: 16px;
    padding-bottom: 10px;
    width: 96%;
    font-weight: 300;
    cursor:pointer;
    clear:both;
}
@media (min-width: 1080px) and (max-width:1200px)
{
    .fsh-bc-img-link{
        width: 51%;
    }
    .fsh-bc-name-si{
        width: 45%;
    }
}
@media (min-width: 1000px) and (max-width:1080px)
{
    .fsv-bc-img{
        width:auto;
        height: 125px;
    }
    .fsv-bc-img-link{
        width: 46%;
        min-width:125px;
        height: 125px;
        padding: 5px 15px 5px 0;
    }
}
@media (min-width: 767px) and (max-width:1080px)
{
    .fsh-bc-img-link{
        float: none;
        width: 100%;
    }
    .fsh-bc-name-si{
        height: auto;
        width: 100%;
    }
}
@media (min-width: 767px) and (max-width:1000px)
{
    .fsv-bc-img-link{
        float: none;
        width: 100%;
    }
    .fsv-bc-name-si{
        height: auto;
        width: 100%;
    }
}
@media (max-width: 767px)
{
    .fsh-bc-wrapper,#compare_schools .fsh-bc-wrapper,#school_ranking .fsh-bc-wrapper{
        float: none;
        width: 100%;
    }
    .fsh-bc-img-link{
        width: 48%;
        min-width: 135px;
        height: 135px;
    }
    .fsh-bc-img{
        width:auto;
        height: 135px;
    }
    .fsh-bc-name-si{
        width: 48%;
        float:left;
    }
}
.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;
    text-align: left;
    vertical-align: middle;
    border-top: 1px solid #e5e5e5;
    border-right: 10px solid #ebebeb;
    background-color: #f2f2f2;
    font-size: 18px;
    padding: 0 0 0 20px;
    word-break: break-word;
}
.dt-name-cell.so-matriculation-name{
	border-top:none;
}
.dt-name-cell.dt-blank-cell{
    background-color: #fff;
}
.dt-value-cell {
    position: relative;
    height: 40px;
    display:table-cell;
    text-align:center;
    vertical-align: middle;
    border-top: 1px solid #e5e5e5;
    font-size: 18px;
    color: #616161;
    padding: 0 3px;
    word-break: break-word;
    word-wrap: break-word;
}
.dt-single-row-table:last-of-type .dt-name-cell,
.dt-single-row-table:last-of-type .dt-value-cell
{
    border-bottom: 1px solid #e5e5e5;
}
.chart-row-hidden{
    display:none;
}
.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 15px;
}
.so-data-table .dt-name-cell{
    width: 35%;
    height: 64px;
}
.so-data-table .dt-value-cell{
    font-weight:300;
}
.so-data-table .dt-value-cell.fw-600{
    font-weight:600;
}
.so-data-table .dt-name-cell.definitions-name-cell{
    font-size: 11px;
    color:gray;
    background-color: #fff;
    border-top: 1px solid #fff;
}
.so-data-table .dt-value-cell.dt-cells-1{
   width: 70%;
}
.so-data-table .dt-value-cell.dt-cells-2{
   width: 35%;
}
.so-data-table .dt-value-cell.dt-cells-2.avg-em-cell{
    font-style: italic;
}

.so-data-table .dt-row .dt-cells-2:nth-of-type(2n){
    border-right: 1px solid #e5e5e5;
}
.so-data-table .dt-row .dt-cells-3:nth-of-type(3n),.so-data-table .dt-row .dt-cells-3:nth-of-type(3n+1){
    border-right: 1px solid #e5e5e5;
}

/*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: 300;
}
.cmp-data-table .dt-value-cell.dt-cells-3{
    width:25%;
}
.cmp-data-table .dt-value-cell.dt-cells-2{
    width:37.5%;
}
.cmp-data-table .definitions-name-cell{
    font-size: 11px;
    color:gray;
}
@media (min-width: 767px) and (max-width:1200px)
{
}
@media (max-width: 767px)
{
    .dt-name-cell, .cmp-data-table .dt-name-cell,.so-data-table .dt-name-cell{
        padding-left:5px;
    }
    .cmp-data-table .dt-name-cell,.cmp-data-table .dt-value-cell{
        font-size:12px;
    }
}
@media (max-width: 400px)
{
    .dt-name-cell{
        font-size:14px;
    }
}
@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:18px;
    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: 18px;
    font-weight: 300;
    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: 300;
    font-family: Hind,sans-serif;
    width:75%;
    width: calc(100% - 95px);
    width: -webkit-calc(100% - 95px);
    padding: 20px 5px 20px 10px;
    margin-left: 80px;
    word-break: break-word;
    text-align: left;
}
.checkmark_content:before {
    content: '';
    position: absolute;
    width: 18px;
    height: 8px;
    background: 0 0;
    top: 50%;
    left: -50px;
    border: 8px solid #f5b34f;
    border-top: none;
    border-right: none;
    margin-top: -12px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.checkmark-no-content{
    display: block;
    position: relative;
    background: #f7f7f7;
    font-size: 18px;
    font-weight: 300;
    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;
    text-align: left;
}
.nav-pill-button{
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    color: #1E8BC3;
    background-color: #f2f2f2;
    font-size: 13px;
    font-weight:400;
    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: 14px;
    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;
}
.quick-stats-text{
    margin-top:6px;
    margin-bottom:6px
}
.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: 16px;
    color: #1e8bc3;
    width: 95%;
    display:block;
}
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;
}
/*BoardingSchoolByStateTableView*/
.fbs-head-row{
    position:relative;
    display:block;
    margin: 0;
    padding: 10px;
    font-size: 16px;
}
.home-fbs-head-row.fbs-head-row{
    background-color: #F5F4F4;
    border-bottom: 1px solid #E6E6E6;
}
.fbs-head-row.fbs-head-row-region{
    background-color: #F5F4F4;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6;
}
.fbs-head-row-name{
    display: inline-block;
    width: 82px;
    padding: 5px 0;
    text-align:left;
    float: left;
}
.fbs-head-row-list{
    display: inline-block;
    width: calc(100% - 90px);
    width: -webkit-calc(100% - 90px);
    width: -moz-calc(100% - 90px);
    padding: 5px 0;
    text-align:left;
    float: left;
}
.state-box-list-row{
    width:100%;
    display: flex;
}
.state-box-list-column {
    box-sizing: border-box;
    display: block;
    width: 33.1%;
    width: calc((100% - 3px)/3);
    width: -moz-calc((100% - 3px)/3);
    width: -webkit-calc((100% - 3px)/3);
    border-bottom: 1px solid #e6e6e6;
    padding: 20px 0;
    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{
    background-color: #1e8bc3;
    color: #fff;
    text-decoration: none;
}
.state-box-list-column a.state-link{
    font-size: 18px;
    margin: 0 5px 0 20px;
    text-transform: capitalize;
}
/*
ActiveTabsHeader
*/
#nav-tabs{
    position:relative;
    font-size:16px;
    height: 60px;
    display:flex;
}
#nav-options{
    display:none;
}
A.nav-tab-link{
    position:relative;
    display:inline-flex;
    height: 60px;
    justify-content: center;
    align-items: center;
    background: none repeat scroll 0 0 #1e8cc5;
    color:#FFFFFF;
    border-right: 1px solid #4ca2d1;
    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:#fff;
    color:#616161;
    border-right: 1px solid #fff;
    cursor: default;
}
A.nav-tab-link:first-of-type{
    border-radius:8px 0 0 0;
}
A.nav-tab-link:last-of-type{
    border-radius:0 8px 0 0;
}
A.nav-tab-link:hover{
    text-decoration:none;
    cursor: pointer;
}
A.nav-tab-link.active-nt:hover{
    cursor: default;
}
A.nav-tab-link:not(.active-nt):hover {
    background: #F9BF3B;
    border-right:1px solid #F9BF3B;
}
A.nav-tab-7.common-tab{
    width: 13%;
    font-size:15px;
}
A.nav-tab-7.student-body-tab{
    width: 15%;
    font-size:15px;
}
A.nav-tab-7.school-type-tab{
    width: 14%;
    font-size:15px;
}
A.nav-tab-7 .nav-tab-name,A.nav-tab-7 .nav-tabs-count{
    font-size:15px;
}
A.nav-tab-6{
    width: calc(100%/6);
    width:-moz-calc(100%/6);
    width:-webkit-calc(100%/6);
}
A.nav-tab-5{
    width: 20%;
}
A.nav-tab-4{
    width: 25%;
}
A.nav-tab-3{
    width: calc(100%/3);
    width:-moz-calc(100%/3);
    width:-webkit-calc(100%/3); 
}
A.nav-tab-2{
    width: 50%; 
}
.nav-tab-content{
    padding-top: 4px;
}
.nav-tab-name,.nav-tabs-count{
    display:block;
    width:100%;
    text-align:center;
    vertical-align:middle;
}
.nav-tabs-count{
    font-size: 14px;
}
/*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){
    .nav-pill-button{
        margin:2px 0 5px;
    }
    #nav-tabs{
        height:70px;
    }
    A.nav-tab-link{
        height:70px;
    }
    A.nav-tab-7{
        font-size:14px;
    }
    A.nav-tab-7 .nav-tab-name,A.nav-tab-7 .nav-tabs-count{
        font-size:14px;
    }
}
@media (max-width: 767px){
    .state-box-list-row{
        display:block;
    }
    .state-box-list-column{
        width:100%;
        display:block;
    }
    .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{
        display: none;
    }
    #nav-options{
        display: block;
        height: 35px;
        padding: 4px 5px;
        width: 100%;
        font-size: 16px;
        border-radius: 5px 5px 0 0;
    }
}

.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.boardingschoolreview.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: 6px;
    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-23-24 > .sec-header-icon{
    width: 23px;
    height: 24px;
    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.boardingschoolreview.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;
}
.rss-icon {
    background: url('/images/new_sprites.png') no-repeat -14px -13px;
}
.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(0.8);
}
.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(0.8);
}
.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(0.8);
}
.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(0.8);
}
.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(0.8);
}
.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;
}

/*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 !important;}
.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:'';
    width: 48px;
    height: 48px;
    background: url('https://www.boardingschoolreview.com/images/featured_payment_star.png') no-repeat;
}
.altumcode-latest-conversion-title{
    color:#1E8BC3 !important;
    font-size: 16px !important;
}
.altumcode-latest-conversion-content img{
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
}
.altumcode-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;
}
.altumcode-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;
    }
}.spell_checker_cp{
    display:block;
    margin-bottom:10px;
    font-size:18px;
    font-weight:300;
    font-family: Hind,sans-serif;
}
.spell_checker_cp_check {
    width: 16px;
    height: 16px;
    padding: 3px;
    background-image: url('/spell_checker/images/spellcheck.png');
    background-repeat: no-repeat;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
}
.spell_check {
    font-family: Hind,sans-serif;
    font-size: 18px;
}
.sc_misspelled {
    color: #FF0000;
    text-decoration: underline;
    cursor: pointer;
    font-size:18px;
    font-weight:300;
    font-family: Hind,sans-serif;
}
.suggestionBox {
    border: 1px solid #000000;
    background-color: #ADE4F8;
    z-index: 5000;
    padding: 5px;
}
.suggestionBox div.suggestion, .suggestionBox div.addToDictionary {
    text-decoration: underline;
    cursor: pointer;
    font-size:18px;
    font-weight:300;
    font-family: Hind,sans-serif;
}
.corrected {
    color: #009900;
    font-size:18px;
    font-weight:300;
    font-family: Hind,sans-serif;
}
.spell_checker_cp_resume {
    width: 16px;
    height: 16px;
    padding: 3px;
    background-image: url('/spell_checker/images/resume.png');
    background-repeat: no-repeat;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
}
.spell_checker_cp_working {
    width: 16px;
    height: 16px;
    padding: 3px;
    background-image: url('/spell_checker/images/working.gif');
    background-repeat: no-repeat;
    vertical-align: middle;
    display: inline-block;
}
.spell_checker_cp_result {
    border: 1px solid #000000;
    background-color: #FFFFFF;
    font-size:18px;
    font-weight:300;
    font-family: Hind,sans-serif;
    overflow: auto;
    margin: 0;
    padding: 0;
}
a.spell_checker_cp_check{
    text-decoration:none;
}
span.spell_checker_cp_status{
    font-size:18px;
    font-weight:300;
    font-family: Hind,sans-serif;
}/*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-input-wrapper{
    position: relative;
}
.wfs-input-wrapper .wfs-input{
    box-sizing: border-box;
    width: 313px;
    padding-right: 30px;
}
.wfs-input{
    width: 245px;
    padding: 7px;
}
.wfs-opt{
    width: 300px;
    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:300;
    margin:20px 0;
}
.fs-label{
    display:inline-block;
    width: 245px;
    margin-top: 5px;
}
.fs-input-wrapper {
    position: relative;
    display: inline-block;
    width: calc(100% - 263px);
    vertical-align: top;
}
.fs-input,.fs-opt{
    display:inline-block;
    width: calc(100% - 263px);
    padding: 0 7px;
    margin:0;
    height:37px;
    border: 1px solid #e2e6f4;
    box-shadow: 2px 2px 5px #eee inset;
    line-height:37px;
}
.fs-input-wrapper .fs-input{
    width: 100%;
    padding-right: 35px;
    box-sizing: border-box;
}
.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-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;
}
.fs-submit-wrapper{
    display:inline-block;
    padding-left: 245px;
    width: calc(100% - 245px);
}
.fs-advanced-search{
    margin: 5px 5px 0 0;
    text-align: right;
    float: right;
}
#secondary-content .fs-label{
    display:block;
    font-size: 1em;
    font-weight: 400;
}
#secondary-content .fs-input-wrapper,#secondary-content .fs-input,#secondary-content .fs-opt{
    width: calc(100% - 15px);
}
#secondary-content .fs-submit-wrapper{
    text-align:left;
    padding:0;
}

/* 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;
}

/* 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;
}

/* 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;
}

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

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

/*SearchAdvancedBoxView*/
.afs-form-groups-row{
    position:relative;
    display:block;
    width:100%;
}
.afs-form-group{
    position:relative;
    display:inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
    border: 1px solid #efefef;
}
.afs-form-group.col-1{
    margin-right:5px;
}
.afs-label {
    position:relative;
    display:block;
    background: none repeat scroll 0 0 #efefef;
    font-weight: 700;
    font-size: 16px;
    padding: 5px;
    vertical-align: baseline;
}
.afs-swicth-label{
    position:relative;
    display: inline-block;
    font-size: 14px;
    width:25%;
    margin: 5px 0 0;
    text-align:center;
    background: none repeat scroll 0 0 #efefef;
    border-right: 1px solid #f8f8f8;
    color: #a2a2a2;
}
.afs-swicth-label.active{
    background: none repeat scroll 0 0 #fff;
    border-right: 1px solid #efefef;
    color: #616161;
}
.afs-opt{
    width:95%;
    font-size: 16px;
    margin: 5px auto;
}
.afs-opt.afs-search-type-opt{
    display:none;
}
.afs-opt.afs-search-type-opt.active{
    display:block;
}
#focus.afs-opt{
    margin: 32px auto 5px;
}
.afs-checkbox{
    display:inline-block;
    vertical-align: baseline;
}
.afs-checkbox-label{
    display:inline-block;
    font-size:16px;
    vertical-align: middle;
}
.afs-cbs-wrapper{
    display:block;
    margin:5px 0;
}
.afs-checkbox-wrapper{
    display:block;
}
.afs-checkbox-wrapper.col-1{
    display:inline-block;
    width: 174px;
}
.afs-checkbox-wrapper.col-2{
    display:inline-block;
    margin-right:17px;
    width:auto;
}
.afs-submit-wrapper{
    margin:5px auto 10px;
    text-align:center;
}
.afs-submit{
    width:299px;
}
/*consultant list form*/
#cd-form,#events-form,#job-form{
    display:block;
    width:100%;
    margin-bottom:15px;
}
.cd-form-selection,.events-form-selection,.job-form-selection{
    position:relative;
    display:inline-block;
    width:70%;
    padding:4px 5px;
    height:35px;
    color:#545455;
    vertical-align: middle;
}
.cd-form-submit,.events-form-submit,.job-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-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*/
/*Consultant Input Form*/
.cc-form,.consultant-input-form{
    position:relative;
    display:block;
}
.cc-form .form-control,.consultant-input-form .form-control{
    display:inline-block;
}
.cc-label,.csti-label{
    width:150px;
    font-weight:300;
}
.cc-input,.cc-opt,.csti-input,.csti-opt{
    width:300px;
}
.cc-submit,.csti-submit{
    margin-left:150px;
}
/* 
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);
}
/*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;
}
.fp-seals-img{
    display:block;
    margin-top:10px;
    max-width: 320px;
    width: 100%;
}
@media (min-width: 1200px)
{
    .afs-checkbox-wrapper.col-1 {
        width: 220px;
    }
}
@media (min-width: 767px) and (max-width:1200px)
{
    .cl-wrapper{
        display:block;
    }
    .cmp-opt{
        display:block;
        width:500px;
    }
    .cs-label{
        width:110px;
    }
    .cc-textarea,.csti-textarea {
        width: 300px;
    }
    .afs-swicth-label{
        width:31%;
    }
    .afs-opt{
        width:90%;
    }
    .afs-checkbox-label {
        font-size: 11px;
    }
    .afs-checkbox-wrapper.col-1 {
        width: 120px;
    }
    .afs-checkbox-wrapper.col-1:last-of-type{
        width: auto;
    }
}
@media (max-width: 981px) {
    .wfs-input{
        padding: 9px 7px; 
        /* adjust diff in heights */
    }
}
@media (max-width: 767px)
{
    /*consultant list form*/
    .cd-form-selection,.events-form-selection,.job-form-selection{
        width:50%;
    }
    .cd-form-submit,.events-form-submit,.job-form-submit{
        font-size:16px;
        margin-left:5px;
    }
    /*
    IndexFindSchoolsFormView
    FindSchoolsFormView
    */
    .fs-label{
        display:block;
        width: 240px;
    }
    .fs-input-wrapper,.fs-input,.fs-opt{
        width: calc(100% - 15px);
    }
    .fs-submit-wrapper{
        text-align:left;
        padding:0;
        width:100%;
    }
    .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,.csti-input,.csti-opt,.csti-textarea {
        width:90%;
    }
    .csti-label{
        width:100%;
    }
    .cc-submit,.csti-submit{
        margin-left:0;
    }
    .lost-pw-form .lost-pw-label{
        width:120px;
    }
    .lost-pw-form .lost-pw-input,.lost-pw-form .lost-pw-text{
        width:192px;
    }
    .afs-form-group{
        width:100%;
    }
    .afs-form-group.col-1{
        margin-right:0;
    }
    .afs-swicth-label{
        width:31%;
    }
    .afs-checkbox-wrapper.col-1:last-of-type{
        width: auto;
    }
}
@media (max-width: 480px) {
    .cmp-form-group{
        margin:20px 0px;
    }
}
@media (max-width: 336px)
{
    .cd-form-submit,.events-form-submit,.job-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: 300;
    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: 300;
    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: 300;
    position:relative;
    display:block;
    margin:30px 0 20px;
}
.add-user-section{
    display:none;
}
.stch-cup-label{
    width: 20%;
    text-align: right;
    font-weight: 300;
}
.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;
}
/*
SchoolMemberDashboardView
StudentMemberDashboardView
*/
.banner-wrapper{
    border-radius: 5px;
    border: 2px solid #f4b350;
    padding: 20px;
    background-color: #f7f7f7;
    font-size: 18px;
    font-weight: 300;
}
.banner-wrapper.suggestion-banner-wrapper{
    padding: 10px;
    margin-top: 40px;
}
.banner-wrapper.openings-banner-wrapper{
    background-color: #FFF9D7;
    border-radius: 3px 3px 3px 3px;
    font-size: 100%;
    font-weight:400;
}
.banner-wrapper.admisions-banner-wrapper{
    background-color: #fff9d7;
}
.openings-text-title{
    font-size: 28px;
    color: #1e8cc5;
    font-weight: 600;
}

@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: var(--brand-accent);
	--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: var(--brand-accent);
	--hero-height-desktop: 500px;
}

/* Town theme - blue links */
.hero-section.hero-town {
	--hero-link-color: var(--hero-town-link);
}

/* 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: var(--brand-accent) !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: var(--hero-town-link) !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: var(--brand-accent) !important;
}

.hero-section.hero-town .hero-stats-box .quick-stats-box a:hover {
	color: var(--hero-town-link) !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: var(--brand-accent) !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: 0;
}

/* 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;
	z-index: 2;
	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;
}

/* ============================================================
   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;
	/* DEBUG: Visible border for ad placeholder */
	border: 2px dashed rgba(255, 165, 0, 0.7);
	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;
}


.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;
}

.hero-section .inline-filmstrip-thumbs {
	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;
}

.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
   ============================================================ */

/* BASE structural rules (ported from PVSR agallery.css — BSR's agallery.css merge
   was deferred in Phase 1, so these were missing and the lightbox rendered inline
   instead of as a fixed full-screen modal). The override rules below layer on top. */
.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;
}
.school-lightbox-overlay .lightbox-container {
	position: relative;
	background: #000;
	width: 95%;
	max-width: 1180px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	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; }
/* Prev/next arrows — match PVSR exactly: CSS-triangle arrows (white over dark
   outline), the next3.png <img> hidden. (Replaces an earlier approximation that
   left the orange arrow image visible.) */
.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 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Override container padding - more space above image, flush at bottom */
.school-lightbox-overlay .lightbox-container {
	padding: 30px 20px 0;
}

/* 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; }

	.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 */
	}
}/* 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: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent; }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover,
  .mfp-arrow:focus {
    opacity: 1; }
  .mfp-arrow:before,
  .mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
  .mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
  .mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F; }

.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; } }.welcome-section {
    width: 100%;
    margin:0 0 20px;
    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: 300;
}
H2.welcome-h2 A{
    color: #f5b34f;
}
/*advertising page*/
.advertising-img-wrapper{
    position:relative;
    display:block;
    width:100%;
    margin:20px auto;
    text-align:center;
}
.advertising-img{
    position:relative;
    display:block;
    width:80%;
    height:auto;
    margin:0 auto;
    text-align:center;
}
/*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);
}
img.cited-logo-center-1{
    margin: 0 5px 0 11px;
    margin: 0 calc((100% - 275px)/6) 0 calc((100% - 275px)/3);
}
img.cited-logo-center-2{
    margin: 0 11px 0 5px;
    margin: 0 calc((100% - 275px)/3) 0 calc((100% - 275px)/6);
}
@media (min-width: 767px) and (max-width:1200px)
{

}
@media (max-width: 767px)
{
    .welcome-section{
        padding-top: 71px;
        margin:0 0 10px;
    }
}
@media (max-width: 480px)
{
    .welcome-wrapper {
        margin-top: 50px;
    }
    .welcome-wrapper H1.welcome-h1 {
        font-size: 24px;
    }
}
@media (max-width: 336px)
{
}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;
}
.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;
}
article.amc-content-html .amc-blockquote, article.amc-content-html blockquote{
    padding: 10px 10px 10px 15px;
    margin-bottom: 20px;
    font-style: italic;
    border-left: 3px solid #ccc;
    background-color: #f1f1f1;
    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:300;
    margin:20px 0 0;
}
.amc-content-html ul {
    margin:20px 0;
    list-style: none outside none;
}
.amc-content-html LI {
    margin: 0 0 5px 22px;
    list-style-type: disc;
}
.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: #333;
    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:300;
    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;
}
.sec-rss{
    position:relative;
    display: block;
    margin: 20px 0;
    padding: 0;
    border-radius: 5px;
    background-color: transparent;
}
H2.sec-header-rss{
    font-size: 18px;
    min-height:60px;
}
H2.sec-header-rss:hover{
    text-decoration:underline;
}

@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;
    }
}.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;
}
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, var(--link-color))
     .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              var(--link-color)   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: var(--link-color);
	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 var(--link-color)
   - Form labels — v4 caption typography (#616161, 14px/500)
   - Submit button — keep orange CTA token (var(--cta-orange) 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;
	border-radius: 4px;
	overflow: hidden;
	background-color: #fff;
	margin-bottom: 16px;
}

/* Section header band — override blue/green legacy.
   The legacy chrome (page-layout.css 190-265) uses display:table-cell
   with a SEPARATE solid-color background on .sec-header-title-cnt
   (sec-1 → var(--cta-orange) orange, sec-2 → #68c3a3 green, sec-3 → #1e8bc3 blue)
   plus a fixed-width 60-80px icon-bg cell and an H2 with 90% width +
   70px min-height + white text. We collapse all of that to a single
   gray v4 band centered on the title text. !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: #e5e7eb !important;
	color: #616161 !important;
	border-bottom: 1px solid #ebebeb;
	padding: 0;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
body.srn-auth-page .sec-2-header .sec-header-title-cnt,
body.srn-auth-page .sec-3-header .sec-header-title-cnt {
	background: transparent !important;
	display: block !important;
	width: 100%;
	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: #616161 !important;
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	padding: 12px 16px;
	text-align: center;
	width: auto;
	min-height: 0;
	height: auto;
	border-radius: 0;
	font-family: inherit;
	display: block;
}
/* Hide the left icon block — v4 card headers don't carry an icon. */
body.srn-auth-page .sec-2-header .sec-header-icon-bg,
body.srn-auth-page .sec-3-header .sec-header-icon-bg {
	display: none !important;
}

/* 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;
	font-size: 14px;
	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: var(--link-color);
	box-shadow: 0 0 0 3px rgba(33, 101, 211, 0.15);
}

/* Labels */
body.srn-auth-page .form-label {
	color: #616161;
	font-size: 14px;
	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: var(--link-color);
}

/* 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 APPLICATION (Phase 2 — Mihajlo 2026-05-26)
   ============================================================

   Apply v4 chrome to the logged-in member-area shell (SchoolMemberTabsView
   + StudentMemberTabsView). All /schools/* + /students/* pages share the
   shell: a top wrapper with Contact us / View Profile / Account / Logout
   links + a `.member-second-wrapper` flex split into a `.member-second-left`
   sidebar (220px, blue) and `.member-second-right` content column.

   Scope: `body.srn-member-area` is injected by both tab-view constructors
   so it's present on every page that renders through the shell.

   Visual changes (Phase 2 covers SHELL only — sidebar / top bar / card
   frame around the right column. Dashboard widgets + form-page content
   inside the right column are Phase 3+):

   - Page bg: #fcfcfc (matches v4 listing-page bg)
   - Top wrapper: v4 gray band (#e5e7eb) with rounded corners + light
     border, instead of the legacy bare gray box
   - Account/Contact links inside top bar: v4 blue var(--link-color)
   - Second wrapper: full v4 card chrome (1px #ebebeb border + 4px radius
     + overflow hidden) so sidebar + content sit inside one frame
   - Sidebar bg: legacy #1e8cc5 → v4 token var(--link-color) (deeper, more saturated)
   - Tab dividers: legacy 10px solid right-border replaced with subtle
     bottom-divider rgba(255,255,255,0.12) between tabs
   - Active tab: clean white flag (kept the existing pattern but tightened
     padding + dropped the right-border)
   - Hover state: faint bg lift rgba(255,255,255,0.06)
   - Right column: 24px padding (was 20px); 16px on mobile (matches v4 card)
   - Mobile: sidebar still hides per existing behavior, top wrapper tightens

   Cross-page consistency: the dashboard "featured banner" (`UPGRADE LISTING`
   orange CTA) keeps its existing styling — already on v4 orange token —
   except for the corner radius which we bump to 4px to match the new card. */

body.srn-member-area {
	background-color: #fcfcfc;
}

/* Top bar — v4 gray band with rounded corners */
body.srn-member-area .member-top-wrapper {
	background-color: #e5e7eb;
	border: 1px solid #ebebeb;
	border-radius: 4px;
	margin: 16px 0;
	padding: 10px 16px;
}
body.srn-member-area .member-top-link,
body.srn-member-area A.member-top-link {
	color: var(--link-color);
	font-size: 14px;
	text-decoration: none;
}
body.srn-member-area .member-top-link:hover,
body.srn-member-area A.member-top-link:hover {
	color: #14618a;
	text-decoration: underline;
}

/* Second wrapper — v4 card chrome around the whole sidebar+content split */
body.srn-member-area .member-second-wrapper {
	background-color: #fff;
	border: 1px solid #ebebeb;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 24px;
}

/* Sidebar — v4 blue token (was #1e8cc5) */
body.srn-member-area .member-second-left {
	background-color: var(--link-color);
	border-radius: 0;
}
body.srn-member-area #member-second-left.member-second-left {
	background-color: var(--link-color);
}

/* Tab links — clean border + hover + active treatments. Specificity is
   `body.srn-member-area .member-menu-tab` (0,2,1) which beats the legacy
   `A.member-menu-tab` (0,1,1) in components/member_area.css. The active
   variant (0,3,1) beats the base rule above. Do NOT inflate specificity
   with `A.` / `nav.member-menu A.` chains — those silently outscore the
   active-tab rule and make the active text invisible. */
body.srn-member-area .member-menu-tab {
	border-right: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding: 14px 16px;
	font-size: 13px;
	font-weight: 500;
	color: #fff;
	transition: background-color 0.15s ease;
}
body.srn-member-area .member-menu-tab:hover {
	background-color: rgba(255, 255, 255, 0.06);
}
body.srn-member-area .member-menu-tab.active-tab {
	background-color: #fff;
	color: var(--link-color);
	border-bottom: 1px solid #ebebeb;
	border-right: none;
}

/* Right column padding — slightly more generous than the legacy 20px,
   matches v4 card body breathing room. */
body.srn-member-area .member-second-right {
	padding: 24px;
}

/* Featured banner — keep orange CTA, just round the corners */
body.srn-member-area .featured-banner-wrapper {
	border-radius: 4px;
}


/* Member-area mobile tweaks */
@media (max-width: 767px) {
	body.srn-member-area .member-top-wrapper {
		margin: 12px 0;
		padding: 8px 12px;
	}
	body.srn-member-area .member-second-right {
		padding: 16px;
	}
}


/* ============================================================
   DASHBOARD WIDGETS (Phase 3 — Mihajlo 2026-05-26)
   ============================================================

   Restyle the right-column content on /schools/school-dashboard +
   /students/student-dashboard to use v4 card chrome. Phase 2 styled
   the SHELL (sidebar + top bar + outer card frame); Phase 3 styles
   the WIDGETS inside that right column.

   School dashboard widgets:
   - h2.member-para-title           — main page title ("School Dashboard")
   - .member-paras-wrapper          — welcome blurb + Profile Suggestions panel
   - .suggestion-banner-wrapper     — Profile Suggestions panel (was bare
                                       gray box w/ 2px orange border)
   - .stats-form-wrapper            — View School Statistics card
   - .contact-info-form-wrapper     — Your Contact Info card

   Student dashboard widgets (simpler):
   - h2.member-para-title           — "Announcements", "Upcoming Application
                                       Deadlines", "Upcoming Events"
   - .member-para / .member-para.member-nav  — body paragraphs + lists

   All scoped under body.srn-member-area .member-second-right to avoid
   bleeding into other contexts that reuse these utility class names. */


/* Main page title (h2.member-para-title) — v4 heading treatment */
body.srn-member-area .member-second-right h2.member-para-title {
	color: #1f2937;
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 14px;
	padding: 0;
	line-height: 1.3;
	text-align: left;
}

/* Welcome paragraph + plain body paragraphs */
body.srn-member-area .member-second-right .member-para {
	font-size: 15px;
	line-height: 1.55;
	color: #374151;
	margin-top: 12px;
}

/* List paragraphs (.member-para.member-nav) — used on student dashboard
   for Upcoming Deadlines / Events list. Keep the existing bullet
   treatment but tighten leading. */
body.srn-member-area .member-second-right .member-para.member-nav {
	margin-top: 8px;
}

/* Profile Suggestions panel — was bare #f7f7f7 w/ 2px orange border.
   v4: light gray bg (#f5f5f3 — matches the v4 intro pattern) + subtle
   border + cleaner heading. The cream/orange palette stays consistent
   with the v4 listing-page intro box. */
body.srn-member-area .suggestion-banner-wrapper {
	background-color: #f5f5f3;
	border: 1px solid #ebebeb;
	border-radius: 4px;
	padding: 14px 18px;
}
body.srn-member-area .suggestion-banner-wrapper h3.banner-heading-text {
	color: var(--cta-orange);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 8px;
}

/* Stats + Contact-Info widget cards — full v4 card chrome with the
   yellow-form-title h2 turned into a gray section-header band at top */
body.srn-member-area .stats-form-wrapper,
body.srn-member-area .contact-info-form-wrapper {
	background-color: #fff;
	border: 1px solid #ebebeb;
	border-radius: 4px;
	overflow: hidden;
	padding: 0;
	margin-bottom: 16px;
}
body.srn-member-area .stats-form-wrapper > h2.yellow-form-title,
body.srn-member-area .contact-info-form-wrapper > h2.yellow-form-title {
	background-color: #e5e7eb;
	color: #616161;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	padding: 12px 16px;
	border-bottom: 1px solid #ebebeb;
	text-align: left;
	font-family: inherit;
}
/* Pad direct children below the section-header band */
body.srn-member-area .stats-form-wrapper > *:not(h2.yellow-form-title),
body.srn-member-area .contact-info-form-wrapper > *:not(h2.yellow-form-title) {
	padding-left: 16px;
	padding-right: 16px;
}
body.srn-member-area .stats-form-wrapper > h2.yellow-form-title + *,
body.srn-member-area .contact-info-form-wrapper > h2.yellow-form-title + * {
	padding-top: 16px;
}
body.srn-member-area .stats-form-wrapper > *:last-child,
body.srn-member-area .contact-info-form-wrapper > *:last-child {
	padding-bottom: 16px;
}

/* Two-column layout for stats + contact-info on desktop (legacy already
   floats; we just enforce the gap so widgets don't touch) */
@media (min-width: 768px) {
	body.srn-member-area .member-form-wrapper {
		display: flex;
		gap: 16px;
		align-items: flex-start;
	}
	body.srn-member-area .member-form-wrapper > .stats-form-wrapper,
	body.srn-member-area .member-form-wrapper > .contact-info-form-wrapper {
		flex: 1;
		min-width: 0;
	}
}


/* Dashboard mobile tweaks */
@media (max-width: 767px) {
	body.srn-member-area .member-second-right h2.member-para-title {
		font-size: 18px;
	}
	body.srn-member-area .stats-form-wrapper > h2.yellow-form-title,
	body.srn-member-area .contact-info-form-wrapper > h2.yellow-form-title {
		padding: 10px 12px;
	}
	body.srn-member-area .stats-form-wrapper > *:not(h2.yellow-form-title),
	body.srn-member-area .contact-info-form-wrapper > *:not(h2.yellow-form-title) {
		padding-left: 12px;
		padding-right: 12px;
	}
}


/* ============================================================
   MEMBER-AREA FORMS (Phase 4 — Mihajlo 2026-05-26)
   ============================================================

   Apply v4 form atoms to all form-heavy /schools/* + /students/* pages:
   update-school-data, news, school-events, jobs, job-entry,
   school-photos, school-youtube, school-courses, update-student-data,
   email-notifications, edit-login (both audiences). 18 forms total.

   Strategy: extend the Phase 1 auth-page form atoms (input border /
   focus ring / submit polish) to ALSO apply on member-area form pages
   via `body.srn-member-area .member-second-right`. The legacy member
   pages use the same `.form-control` / `.form-label` / `.form-group` /
   `.submit` Bootstrap-style class names so the same selectors apply.

   Also adds atoms for two legacy patterns unique to member pages:
   - `.stch-cup-*` table-cell layout used on /schools/edit-login +
     /students/edit-login (Change Username/Password form)
   - Member-area data tables (news list, jobs list, additional-users
     list on edit-login)

   Scope kept tight to `.member-second-right` so it can't bleed into
   anything outside the member-area right column. */

/* Inputs — same atoms as Phase 1, extended scope. */
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"],
body.srn-member-area .member-second-right select,
body.srn-member-area .member-second-right textarea {
	border: 1px solid #d1d5db;
	border-radius: 4px;
	padding: 8px 12px;
	font-size: 14px;
	background-color: #fff;
	color: #1f2937;
	line-height: 1.4;
	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: var(--link-color);
	box-shadow: 0 0 0 3px rgba(33, 101, 211, 0.15);
}

/* Labels */
body.srn-member-area .member-second-right .form-label,
body.srn-member-area .member-second-right label.form-label {
	color: #616161;
	font-size: 14px;
	font-weight: 500;
}

/* Form group spacing */
body.srn-member-area .member-second-right .form-group {
	margin-bottom: 12px;
}

/* Primary submit — keep orange CTA token (var(--cta-orange)), tighten to 4px radius */
body.srn-member-area .member-second-right input.submit,
body.srn-member-area .member-second-right button.submit {
	border-radius: 4px;
	padding: 10px 22px;
	font-weight: 600;
	font-size: 15px;
}

/* /schools/edit-login + /students/edit-login — legacy table-cell layout
   for "Change Username/Password" form. The 20%/78% label/input split
   works fine; just tighten typography to v4 tokens. */
body.srn-member-area .member-second-right .stch-cup-label {
	font-size: 14px;
	font-weight: 500;
	color: #616161;
}
body.srn-member-area .member-second-right .stch-cup-input {
	width: 100%;
	max-width: 360px;
}
body.srn-member-area .member-second-right .stch-cp-form,
body.srn-member-area .member-second-right .stch-cu-form,
body.srn-member-area .member-second-right .stch-caue-form {
	font-size: 14px;
	margin: 18px 0;
}

/* Page-title heading on form-heavy pages — match dashboard treatment
   (member-para-title is already styled by Phase 3; this catches the
   h2.featured-text variant used as a page heading on a few pages
   like update-school-data). */
body.srn-member-area .member-second-right h2.featured-text {
	color: #1f2937;
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 14px;
	text-align: left;
}

/* Member-area data tables (news list, jobs list, additional-users on
   edit-login). Light header band + clean row dividers. */
body.srn-member-area .member-second-right table {
	border-collapse: collapse;
	width: 100%;
	margin: 12px 0;
}
body.srn-member-area .member-second-right table th {
	background-color: #e5e7eb;
	color: #616161;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid #ebebeb;
}
body.srn-member-area .member-second-right table td {
	padding: 10px 12px;
	font-size: 14px;
	color: #374151;
	border-bottom: 1px solid #ebebeb;
}
body.srn-member-area .member-second-right table tr:last-child td {
	border-bottom: none;
}


/* Member-area form mobile tweaks */
@media (max-width: 767px) {
	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"],
	body.srn-member-area .member-second-right select,
	body.srn-member-area .member-second-right textarea {
		font-size: 16px;
		padding: 10px 12px;
	}
	body.srn-member-area .member-second-right table th,
	body.srn-member-area .member-second-right table td {
		padding: 8px;
		font-size: 13px;
	}
}
/*Top Listing Pages start*/
.tsl_header{
    display: block;
    clear: both;
    border: 1px solid #b8b8b8;
    border-radius: 6px 6px 0 0;
    background: #f6f6f6;
    padding:10px;
}
.tsl_header_text_1{
    margin-left: 2px;
    color: #616161;
    font-size: 18px;
    font-weight: 700;
    margin-top: 10px;
}
.tsl_selection {
    margin-bottom: -3px;
    display: inline-block;
    width: 74%;
    color: #616161;
    background-color: #fff;
    font-size: 16px;
}
.tsl_metric_row{
    display:block;
    padding:8px 0;
}
.tsl_metric_row.list-row-border-3{
    border-left: 1px solid #b8b8b8;
    border-right: 1px solid #b8b8b8;
}
.tsl_metric_row:hover{
    background:#f1f4ff;
    cursor:pointer;
}
.tsl_metric_content{
    position: relative;
    display: inline-block;
    vertical-align:middle;
    width: calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: -moz-calc(100% - 100px);
}
.tsl_metric_gn{
    color: #dd6919;
    font-family: Montserrat;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}
.tsl_metric_gn_r{
    color: #e2d3c8;
}
.tsl_metric_link{
    font-size: 15px;
    color: #2165d3;
    font-weight: 700;
}
/*Top Listing Pages End*/
/*Geo Map start*/
#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{
	cursor: pointer;
}
.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;
    }
}
@media (max-width: 767px){
    .geo-map-legend .avg-left{
        width:auto;
        float:none;
        display:block;
    }
}
@media (max-width: 420px){
    #geo-map-visualization{
        height:250px;
    }
}
/**National Data School List end  **//*School Open House Page EventListView*/
.event-detail-wrapper > H2.para-title-3:not(:first-child){
    margin-top:20px;
}
/*School Profile Start*/
/*Quick Stats View*/
#school_overview #main-content  .quick-stats-box{
    display:none;
}
#school_overview #secondary-content .quick-stats-box{
    display:block;
}
/*SOInfoView*/
#top-info-box .checkmarks_list{
    margin:0;
    padding:0 0 25px;
    width:100%;
}
.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: 100px;
    font-size:18px;
    margin: 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;
}
.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;
}

.infobox-top-right{
    width:336px;
    float:left;
    margin-left:20px;
}
.info-btns-wrapper{
    position:relative;
    display: flex;
    margin: 20px 0;
    padding:0;
}
A.info-box-btn{
    position: relative;
    display:inline-flex;
    width: calc(50% - 80px);
    width: -moz-calc(50% - 80px);
    width: -webkit-calc(50% - 80px);
    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: 5px;
    text-decoration: none;
    margin:0 10px;
}
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: #f5b34f;
    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-ss:hover{
    background-color: #f5bd67;
}
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: 5px 0 0 5px;
}
A.info-box-btn > .icon-request{
    background-color: #61b597;
}

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


/*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-ranking-tab-nav .nav-pill-button:not(:last-child){
    margin-right:5px;
}
.top-ranking-tab-nav .nav-pill-button{
    margin-top:10px;
}
.top-placement-text{
    margin-top: 10px;
    font-weight:300; 
    font-size:18px;
}
.t20p-list-head-row{
    display:flex;
}
.t20p-list-row{
    display:flex;
    align-items: normal;
    justify-content: center;
}
.t20p-list-row:hover{
    cursor:pointer;
}
.t20p-list-row:last-of-type{
    border:none;
}
.t20p-list-column{
    position: relative;
    display:inline-block;
    vertical-align:middle;
}
div.t20p-list-column:not(:last-of-type){
    margin-right:0.4%
}
.t20p-list-head-row .t20p-list-column{
    background-color: #f2f2f2;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
    box-shadow: 0px 10px #ebebeb;
    padding: 10px 0 10px .8%;
    text-align: left;
}
.t20p-list-row .t20p-list-column{
    padding: 15px 0 15px .8%;
    font-weight: 300;
}
.t20p-list-row.t20pl-showmore-wrapper{
    padding: 15px 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: none;
}
.t20pl-showmore-content {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 15px 0;
    background-color: #f5f5f5;
    color: #1e8cc5;
    cursor: pointer;
}
/*default layout*/
.top20-placement-list.default-layout .category-col{
    width: 35%;
    text-align:left;
}
.top20-placement-list.default-layout .category-col.repeat-cat{
    color:#CCCCCC;
}
.top20-placement-list.default-layout .attribute-col{
    width: 63%;
    text-align:left;
}
/*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;
}
/*listing review layout*/
.top20-placement-list.listing-review-layout .category-col{
    width: 50%;
    text-align:left;
}
.top20-placement-list.listing-review-layout .attribute-col{
    width: 48%;
    text-align:left;
}
.top20-placement-list.listing-review-layout .t20p-list-row {
    display: table;
    width: 100%;
}
.top20-placement-list.listing-review-layout .t20p-list-row .t20p-list-column{
    display:table-cell;
}
A.t20p-list-link{
    font-size: 18px;
    font-weight:600;
}
/*SOTableView Custom*/
.chartimg {
    max-width: 100%;
    width: 100%;
    height: auto;
}
.dt-vc-avg{
    font-size: 16px;
    font-weight: normal;
    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:300;
    width:100%;
    min-height:654px;
}
.so-dt-ce-item-list-group{
    display: block;
    width: 100%;
    position: relative;
}
.so-dt-ce-item-list{
    display: table;
    width: 100%;
}
.so-dt-ce-item-list.cell-1{
    width: 100%;
}
.so-dt-ce-item-group {
    position: relative;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    border-bottom: 1px solid #e5e5e5;
    font-size: 16px;
    color: #616161;
    padding: 0 3px;
    height:40px;
    word-break: break-word;
    word-wrap: break-word;
}
.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;
}
.so-dt-ce-section:not(.course-section):not(.sports-section) .so-dt-ce-item-list-group .so-dt-ce-item-list:nth-child(1) .so-dt-ce-item-group{
    border-top: 1px solid #e5e5e5;
}
.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);
}
.so-data-table .dt-single-row-table .dt-name-cell.so-matriculation-name{
    height: 40px;
}
.so-data-table .dt-single-row-table .dt-value-cell.so-matriculation-c2dc-1,.so-data-table .dt-single-row-table .dt-value-cell.so-matriculation-c3dc-1,.so-data-table .dt-single-row-table .dt-value-cell.so-matriculation-c3dc-2{
    font-size: 16px;
}
/*School Note*/
.school-notes-wrapper{
    font-size:18px;
    margin-top:10px;
    margin-bottom:35px;
    font-weight:300;
}
.school-notes-wrapper UL {
    margin-bottom: 10px;
}
.school-notes-wrapper LI{
    position: relative;
}
.school-notes-wrapper LI:before{
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #f5b34f;
    margin-top: 8px;
}
.school-notes-wrapper ul li ul LI:before{
    width: 6px;
    height: 6px;
    background-color: #FFFFFF;
    border: 2px solid #f5b34f;
}
.school-notes-wrapper span.school-note-li {
    padding-left:30px;
    display:inline-block;
    word-break: break-word;
}
.last-updated-text {
    color: gray;
    margin-top: 20px;
    font-size: 16px;
    text-align: right;
    margin-bottom: 10px;
}
/*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;
}
.new-achive-text {
    border-bottom: 1px solid #E2E6F4;
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-size:18px;
    color:#616161;
}
.fb-page-wrapper{
    height:520px;
    margin:20px 0;
    border: 1px solid #e6e6e6;
}
.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:300;
}
.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;
}
.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;
}
/*SOStudentsReviewsView*/
.rtw-add-review-link{
    float: right;
    font-size: 16px;
    margin-top: 11px;
}
.review-date{
    font-size: 14px;
    margin-left:10px;
}
.review-body{
    display:block;
    font-size:16px;
    font-weight:300;
    color: #616161;
}
.review-link{
    font-size: 18px;
    font-weight: 600;
}

/*SOStudentsReviewBannerView*/
.submit-review-banner{
    position:relative;
    display:block;
    border-radius: 5px;
    border: 2px solid #f4b350;
    padding: 20px;
    background-color: #f7f7f7;
    font-size: 18px;
    font-weight: 300;
    cursor: pointer;
    margin:20px 0;
}
.srb-content{
    position:relative;
    display:block;
    width:100%;
    text-align:center;
    cursor: pointer;
}
.srbc-para-1{
    font-size: 28px;
    color: #1e8cc5;
    font-weight: 600;
    text-align: center;
}
.srbc-para-2.virtual-link{
    font-size: 18px;
    text-align: center;
}
/*SO jump button*/
#school_overview #content-headline-wrapper{
    padding-right:30px;
    position:relative;
}
.so-jump-btn-wrapper {
    position: absolute;
    align-items:center;
    justify-content:center;
    background-color: #FFFFFF;
    border: 1px solid #CCD1E4;
    border-radius: 30% 30% 30% 30%;
    box-shadow: 0 0 2px #CDD0E3 inset;
    height: 30px;
    width: 30px;
    cursor: pointer;
    right: 0px;
    top: 14px;
}
.so-jump-btn-wrapper:hover {
    background-color: #F5F5F5;
}
#content-headline-wrapper.font42-wrapper > .so-jump-btn-wrapper{
    top: 12px;
}
#content-headline-wrapper.font38-wrapper > .so-jump-btn-wrapper{
    top: 10px;
}
#content-headline-wrapper.font35-wrapper > .so-jump-btn-wrapper{
    top: 8px;
}
#content-headline-wrapper.font32-wrapper > .so-jump-btn-wrapper{
    top: 6px;
}
#content-headline-wrapper.font36-wrapper > .so-jump-btn-wrapper{
    top: 8.5px;
}
.jump-list-nav {
    display:none;
    position: absolute;
    top: 61px;
    right: -195px;
    background-color: #fff;
    border: 1px solid #cbd0e3;
    border-radius: 10px;
    color: #616161;
    font-size: 16px;
    padding: 5px 0;
    width: 263px;
    box-shadow: 0 9px 4px #777;
    z-index: 10000;
}
.jump-list-nav.active{
    display:block;
}
.jump-list-nav span.jump-list-link {
    color: #616161;
    display:block;
    line-height:30px;
    height:30px;
    vertical-align:middle;
    padding:0 20px;
    font-weight:normal;
    cursor:pointer;
}
.jump-list-nav span.jump-list-link:hover {
    color: #2c9fe4;
    cursor:pointer;
}
.jump-list-nav A.jump-list-edit-link{
    display:block;
    line-height:30px;
    height:30px;
    vertical-align:middle;
    padding:10px 20px 0;
    border-top: 1px solid #CBD0E3;
    margin-top: 10px;
}

/*for school profile background*/
#top-info-box{
	background-color: #FFFFFF;
}
/* v4 hero (Phase 2b BSR design migration): on hero pages the SchoolHeroView left
   column already renders rating/address/phone/website, so ONLY the duplicated
   #top-info-box cards (.cards-wrapper) are hidden — NOT the whole box. The box also
   holds the photo gallery (.ag-school), the Request-Info/Save buttons, the school
   "about" checkmarks, and the JSON-LD <script>, none of which the hero replaces, so
   those must keep rendering. (Phase 2b originally hid the whole box, which collapsed
   the .ag-school flexbox gallery to 0×0 — fixed here.) .hero-active set in
   school_overview.php whenever the hero renders. */
.hero-active #top-info-box .cards-wrapper{ display:none !important; }
/* Collapse the box only if its .sec-content has NO meaningful children (cards now
   hidden + no gallery/buttons/checkmarks) — keeps an empty bordered strip from
   showing. The :has() ignores hidden cards-wrapper, script, style, lightbox. */
.hero-active #top-info-box:not(:has(.sec-content > :not(.cards-wrapper):not(.mfp-hide):not(.school-lightbox-overlay):not(script):not(style))){ display:none; }
/* Non-hero pages: still collapse a fully-empty box (mirrors PVSR). */
#top-info-box:not(:has(.sec-content > :not(.mfp-hide):not(.school-lightbox-overlay):not(script):not(style))){ display:none; }
/* On hero pages the hero's right column already shows Quick Facts (desktop), so hide
   the duplicate sidebar copy in #secondary-content — mirrors what the legacy .hasBg
   rule did before we switched the body hook to .hero-active. */
#school_overview.hero-active #secondary-content .section-wrapper.quick-stats-box{ display:none !important; }
.hasBg .section-wrapper.quick-stats-box {
    border: none;
}
.hasBg .welcome-wrapper {
	position: absolute;
	text-align: center;
	color: #fff;
	width: 100%;
	margin-top:0;
	z-index: 0;
	background-color: #000;
}
.hasBg .breadcrumbs,.hasBg .breadcrumbs a,.hasBg #main-headline{
	color:#fff;
}
.school-ov-bg * {
	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;
}
.hasBg .school-ov-bg{
	height: 585px;
	overflow: hidden;
}
.hasBg .school-ov-bg img{
	opacity: .4;
	top: 60%;
	left: 0;
	-webkit-transform: translate(0,-50%);
	-ms-transform: translate(0,-50%);
	transform: translate(0,-50%);
}
.hasBg #main-headline-wrapper{
	position: relative;
}
.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;
    }
    A.info-box-btn{
        width:100%;
    }
    A.info-box-btn.ib-btn-request{
        margin:20px 0 10px;
    }
    A.info-box-btn.ib-btn-ss{
        margin:10px 0 15px;
    }
    .school-calendar-fc-wrapper{
        width:100%;
        min-height:410px;
    }
}

@media (max-width: 767px)
{
    #school_overview #main-content  .quick-stats-box{
        display:block;
    }
    #school_overview #secondary-content .quick-stats-box{
        display:none;
    }
    #left-video-placehoder{
        margin:10px 0;
    }
    .jump-list-nav.active{
        display:none;
    }
    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;
    }
    A.website-click{
        font-size:16px;
    }
    .info-btns-wrapper{
        margin: 0 10px;
        flex-wrap: wrap;
    }
    A.info-box-btn{
        width:100%;
    }
    A.info-box-btn.ib-btn-request{
        margin:20px 0 10px;
    }
    A.info-box-btn.ib-btn-ss{
        margin:10px 0 15px;
    }
    .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;
    }
    .fb-page-wrapper,.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:10px 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;
    }
    .submit-review-banner{
        margin:10px 0;
    }
    .review-date{
        margin-left:0px;
    }
    .school-calendar-fc-wrapper{
        width:100%;
        min-height:320px;
    }
    .so-dt-ce-item-list,.so-dt-ce-item-list.cell-1{
        width: 100%;
    }
    .so-dt-ce-item-list .so-dt-ce-item-group{
        display:table;
        width:100% !important;
    }
    .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;
        display: table-cell;
        vertical-align:middle;
        text-align:center;
        font-size: 16px;
        color: #616161;
        padding: 0 3px;
        height:40px;
        word-break: break-word;
        word-wrap: break-word;
    }
    .so-dt-ce-item-list .so-dt-ce-item-group:nth-of-type(2n+1) {
        border-right: none;
    }
    .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;
    }
}
@media (max-width: 336px)
{
    .school-notes-wrapper{
        margin-left: 10px;
        margin-right: 10px;
        word-break: break-word;
    }
    .school-calendar-fc-wrapper{
        margin-left: 10px;
        margin-right: 10px;
        word-break: break-word;
        width:100%;
        min-height:300px;
    }
}/*Sort Schools by Statistics*/
.sr-filter-dt{
    float: left;
    margin-right: 20px;
    width: 30%;
    border: 1px solid #e6e6e6;
    border-bottom: 0;
}
.srf-dt-header,.srf-dt-block-header{
    background: -moz-linear-gradient(center top,#fff,#f2f2f2) repeat scroll 0 0 rgba(0,0,0,0);
    background: -webkit-gradient(linear,0% 0%,0% 100%,from(#fff),to(#f2f2f2));
}
.srf-dt-block-header{
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
}
.srf-dt-row{
    color: #616161;
    font-size: 16px;
    vertical-align: baseline;
    word-break: normal;
    padding: 2px 0 4px 5px;
}
.srf-dt-header-title{
    font-size: 18px;
    font-weight: 700;
}
.srf-dt-header-title .mobile-toggle-icon{
    display: none;
}
.srf-dt-header-text{
    color: #a0a0a0;
    font-size: 13px;
    margin: 0 0 15px 0;
    font-style:italic;
}
.srf-dt-block-content{
    padding-left:8px;
}
.srf-checkbox{
    display:inline-block;
}
.srt-school-nav-list{
    float: left;
    width: 67.2%;
}
.srt-nav-pills{
    margin-bottom:10px;
}
.nav-pill-button.srt-nav-pill-button,.nav-pill-button.srt-nav-pill-button.active{
    font-size:16px;
    margin:0px;
}
.srt-list-head-row{
    display:flex;
}
.srt-list-row{
    display:flex;
    align-items: center;
    justify-content: center;
}
.srt-list-row:hover{
    cursor:pointer;
}
.srt-list-column{
    position: relative;
    display:inline-block;
    vertical-align:middle;
    padding:15px 0 15px;
}
.srt-list-column.column1{
    padding-left:15px;
}
.srt-list-head-row .srt-list-column{
    background-color: #f2f2f2;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
    box-shadow: 0px 10px #ebebeb;
}
.srt-school-list .column1{
    color: #616161;
    text-align:left;
    margin-right:3px;
    font-size: 20px;
}
.srt-school-list .srt-list-row .column1{
    font-weight: 600;
}
.srt-school-list .column2, .srt-school-list .column3,.srt-school-list .column4{
    color: #616161;
    font-weight: 300;
    margin-right:3px;
    text-align:center;
    font-size: 18px;
}
.srt-school-list .column1{
    width: 32%;
}
.srt-school-list .column-count-4.column2, .srt-school-list .column-count-4.column3,.srt-school-list .column-count-4.column4{
    width: calc( (68% - 24px)/3 );
    width: -moz-calc( (68% - 24px)/3 );
    width: -webkit-calc( (68% - 24px)/3 );
}
.srt-school-list .column-count-4.column4{
    margin-right:0px;
}
.srt-school-list .column-count-3.column2, .srt-school-list .column-count-3.column3{
    width: calc( (68% - 16px)/2 );
    width: -moz-calc( (68% - 16px)/2 );
    width: -webkit-calc( (68% - 16px)/2 );
}
.srt-school-list .column-count-3.column3{
    margin-right:0px;
}
.srt-school-list .column-count-2.column2{
    width: calc( 68% - 8px );
    width: -moz-calc( 68% - 8px );
    width: -webkit-calc( 68% - 8px );
    margin-right:0px;
}

/*
MultipleSchoolsListView
TopSchoolsListView
SONearbySchoolsListView
SOPeopelAlsoViewedListView
*/
.tp-list-head-row{
    display:flex;
    align-items: normal;
    justify-content: center;
}
.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;
}
.tp-list-head-row .tp-list-column{
    background-color: #f2f2f2;
    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: 300;
}
.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;
}
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;
}
.tpl-desc-wrapper{
    display:inline-block;
    font-size:16px;
    font-weight:normal;
}
.tpl-type-desc{
    font-weight:bold;
}
.tpl-review-wrapper{
    color: #616161;
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    cursor:pointer;
}
.tp-list-row.tpl-showmore-wrapper{
    padding: 15px 0;
    margin: 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:none;
}
.tpl-showmore-content{
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 15px 0;
    background-color: #f5f5f5;
    color: #1e8cc5;
    cursor: pointer;
}
.tpl-showmore-content:hover{
    color: #1e8cc5;
    text-decoration:none;
    background-color: #f7f7f7;
}
.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: 18%;
    float: left;
    display: block;
    line-height: 28px;
    font-weight: 300;
    word-break: break-word;
}
.tp-school-list .tpl-same-rank, .tp-school-list .tpl-same-display{
    color:#ccc;
}
.tp-school-list .tpl-sort-text{
    font-size:18px;
    font-weight:300;
}
.tp-school-list .grade-in-school{
    display:block;
}
.tp-school-list .tpl-school-detail.tpl-has-rn{
    width: calc(82% - 5px);
    float: left;
    display: block;
    margin-bottom:5px;
    margin-left: 5px;
}
.tp-list-row .no-school-wrapper{
    text-align:left;
    margin:10px 0;
}
.tpl-cqf-list{
   display: flex;
   flex-direction: column;
}
.tpl-cqf-row{
    position: relative;
    display: inline-block;
    margin-left: 17px;
}
.tpl-cqf-title {
    font-weight: normal;
}
/*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;
}

/*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;
}
@media (min-width: 767px) and (max-width:1200px) {
    .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%;
    }

    /*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%;
    }
    /*sort school by statistics*/
    .sr-filter-dt{
        margin-right:8px;
    }
    .nav-pill-button.srt-nav-pill-button, .nav-pill-button.srt-nav-pill-button.active{
        padding:10px;
        font-size:14px;
    }
    .srt-school-list .srt-list-head-row .srt-list-column{
        font-size:18px;
    }
    .srt-school-list .column1{
        font-size:18px;
    }
    .srt-school-list .column2, 
    .srt-school-list .column3,
    .srt-school-list .column4{
        font-size:16px;
    }
}
@media (max-width: 767px){
    .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 .grade-in-school{
        display:inline;
    }
    .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;
    }
    /*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;
    }
    /*sort school by statistics*/
    .sr-filter-dt{
        float:none;
        width:100%;
        margin-bottom:10px;
    }
    .srt-school-nav-list{
        float:none;
        width:100%;
        margin:10px 0;
    }
    .srf-dt-header-title .mobile-toggle-icon{
        display: block;
        float:right;
    }
    .nav-pill-button.srt-nav-pill-button, .nav-pill-button.srt-nav-pill-button.active{
        padding:10px;
        font-size:14px;
        margin: 5px;
    }
    .srt-school-list .srt-list-head-row .srt-list-column{
        font-size:14px;
    }
    .srt-school-list .column1{
        font-size:14px;
    }
    .srt-school-list .column2, 
    .srt-school-list .column3,
    .srt-school-list .column4{
        font-size:14px;
    }
    
}
@media (max-width: 400px){
    .tp-list-row{
        padding: 15px 5px;
    }
    .srt-school-list .srt-list-head-row .srt-list-column{
        font-size:14px;
    }
}
@media (max-width: 336px){
    .tp-list-row{
        padding: 15px 0px;
    }
}/*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;
    color:#069;
    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;
}

/* 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;
}
.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 (var(--brand-accent)), 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: var(--brand-accent);
    border: 1px solid var(--brand-accent);
    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;
}
.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;
    }
    .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;
}
.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: var(--brand-accent);
}
.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: var(--cta-orange);
    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;
}
/*review form page*/
.review-form-para{
    font-size:18px;
}
.review-form-para2{
    font-size:18px;
    font-style:italic;
    margin-bottom:40px;
}
.review-form-para3{
    font-size:18px;
    font-style:italic;
    font-weight:400;
    margin-bottom:20px;
}
.review-form-para4{
    font-size:18px;
    margin-top:50px;
}
.review-form{
    position:relative;
    display:block;
    margin:10px 0;
}
.review-form-group{
    position:relative;
    display:block;
    margin-bottom:10px;
}
.review-form-group.textarea-row{
    margin-bottom:50px;
}
.review-form-label{
    position:relative;
    display:block;
    font-weight:300;
}
.review-form-textarea-label{
    margin-bottom:10px;
}
.review-form-em-text{
    font-style:italic;
}
.review-form-title{
    position:relative;
    display:block;
    margin-bottom: 10px;
}
label.review-form-notify-label{
    position:relative;
    display: block;
    margin-top: 20px;
}
.review-form-input{
    width:400px;
    font-size:100%;
}
.review-form-textarea{
    width: 80%;
    resize: vertical;
}
.review-form-opt{
    max-width:90%;
}
.activity-label-row{
    margin-top:20px;
}
.review-col-1,.review-col-2,.review-col-3{
    display:inline-block;
    width: 10%;
}
.review-col-4{
    display:inline-block;
    width: calc(70% - 20px);
}
.review-col-4 .review-form-input{
    width:80%;
}
/*review data table page*/
.review-dt-questions {
    padding: 0 10px 14px 0;
    font-style: italic;
}
.review-dt-responses {
    padding: 0 10px 14px 0;
}
.review-data-table{
    margin:10px 0;
}
.review-name-cell,.review-content-cell{
    width: 50%;
    border: none !important;
    font-size: 16px !important;
    background: white;
    text-align:left;
    padding:0;
}
.review-ds-name-cell{
    width: 30%;
    border: none !important;
    font-size:18px !important;
    background: white;
    text-align:left;
    padding:0;
}
.review-ds-content-cell{
    width: 70%;
    border: none !important;
    font-size:18px !important;
    background: white;
    text-align:left;
    padding:0;
}
@media (min-width: 767px) and (max-width:1200px)
{
}
@media (max-width: 767px)
{
    .review-form-input{
        width:90%;
    }
    .review-form-textarea{
        width: 90%;
    }
    .review-col-1,.review-col-2,.review-col-3{
        display:inline-block;
        width: 20%;
    }
    .review-col-4{
        display:inline-block;
        width: calc(40% - 16px);
    }
}
@media (max-width: 336px)
{
}/*
* 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/student-dashboard
*/

.admisions-bc-para-1{
    font-family: Montserrat;
    font-size: 24px;
}
.admisions-bc-para-2{
    font-size: 16px;
}
/*
/students/email-notifications
*/
.email-notification-form{
    font-size: 18px;
    font-weight: 300;
    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: 300;
}
.enf-radio-label{
    font-weight: 300;
}
.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;
    }
}
@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;
    font-size:18px;
}
.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:300;
}
.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:300;
}
.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:300;
    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;
}
.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:300;
    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:16px;
    }
    .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;
    }
}
@media (max-width: 325px)
{
}.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline;list-style:none;padding:0}.select2-container .select2-selection--multiple .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;margin-left:5px;padding:0;max-width:100%;resize:none;height:18px;vertical-align:bottom;font-family:sans-serif;overflow:hidden;word-break:keep-all}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option--selectable{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px;padding-right:0px}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;padding-bottom:5px;padding-right:5px;position:relative}.select2-container--default .select2-selection--multiple.select2-selection--clearable{padding-right:25px}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;font-weight:bold;height:20px;margin-right:10px;margin-top:5px;position:absolute;right:0;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:inline-block;margin-left:5px;margin-top:5px;padding:0;padding-left:20px;position:relative;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}.select2-container--default .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-right:1px solid #aaa;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#999;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px;position:absolute;left:0;top:0}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{background-color:#f1f1f1;color:#333;outline:none}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-left:1px solid #aaa;border-right:none;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear{float:left;margin-left:10px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--group{padding:0}.select2-container--default .select2-results__option--disabled{color:#999}.select2-container--default .select2-results__option--selected{background-color:#ddd}.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0;padding-bottom:5px;padding-right:5px}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;display:inline-block;margin-left:5px;margin-top:5px;padding:0}.select2-container--classic .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#888;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555;outline:none}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option--group{padding:0}.select2-container--classic .select2-results__option--disabled{color:grey}.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}.select2-container--default .select2-selection--multiple{min-height:44px;border-radius:8px;padding:6px;font-size:14px;} 
@media (max-width: 767px)
{
    .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;
    }
    #microdata-container{
        display: none;
    }
}