/*@font-face { font-family: 'Quattrocento Sans';  font-style: normal; font-weight: 400; src: local('Quattrocento Sans Regular'), local('Quattrocento-Sans-Regular'), url('/css/QuattrocentoSans-Regular.ttf');font-display: swap;}
@font-face { font-family: 'Quattrocento Sans';  font-style: normal; font-weight: 700; src: local('Quattrocento Sans Bold'), local('Quattrocento-Sans-Bold'), url('/css/QuattrocentoSans-Bold.ttf');font-display: swap;}*/
html { /*-webkit-text-size-adjust: 100%;*/ }
main {width: 98%;max-width: 1280px;margin: 0 auto;}
h1 {  font-size: 2em;  margin: 0.67em 0; text-transform: capitalize;text-wrap: balance;}
h2 {  font-size: 1.7em; padding: 0.67em 0;margin: 0;text-transform: capitalize;text-wrap: balance;}
h3, .h3 { font-size: 1.17em; margin:0; text-transform: capitalize;text-wrap: balance;}
pre {  font-family: monospace, monospace;  font-size: .8em; }
a {  background-color: transparent; }
b, strong { font-weight: bolder; }
img { border-style: none;display:block;width: 100%;height: auto; }
button, input, optgroup, select, textarea { font-family: inherit;font-size: 1rem; margin: 0; }
fieldset { padding: 0.35em 0.75em 0.625em; }
[type="checkbox"],[type="radio"] {box-sizing: border-box; padding: 0; }
input[type=file]::file-selector-button { appearance: button; font: inherit;}  
body { margin: 0; line-height: 1.2; font-family: system-ui, sans-serif;background:#f8f8f8;}

@media screen and (max-width: 650px) {
    main {width: 96%;margin: 0 auto;}
}

p { margin-top: 5px; }
p a {color: #2c5bbe; text-decoration:underline;}
a:hover { text-decoration:none; color:#777777;}
a { text-decoration:none; color:#2c5bbe;}
* { box-sizing: border-box; }
ul {margin:0; }
.v-center {text-align: center;margin: auto;align-items: center;justify-content: center;}
@media only screen and (max-width: 650px) {
    body { font-size:1.1em; }
    .v-center {height: 138px;}
}
article { width: 100%;}
.h2-highlight { background: #444444; color: #ffffff; margin: 10px 0; padding:.67em 2%; }
/**
.h2 { font-size: 1.7em; text-align:left;  padding: 5px 2% 5px 2%;}
**/
.clear:after { content: " "; display: table; clear: both; }
iframe {width: 100%;height: auto;border: none;}

/***********************************
        Error Page
************************************/
.system_page { text-align: center;margin: 60px auto; }
.system_svg { width: 100px; height: 100px; margin: 0 auto 35px;  display: block; }
table.system_table {width: 98%;}

/*****************************************************
 				GRID
*****************************************************/
.g-group { display: flex; } 
.g-flex {flex:auto;}
.g-wrap {flex-wrap:wrap;}
.g-g10 {gap:10px;}
.g-g20 {gap:20px;}/**/
.g-v-center {align-items: center;}
.g-center {justify-content: center;}
.g-space-between{justify-content: space-between;}
.g2-1 {
    flex-basis: calc(50% - 20px);
}
aside {display: flex;gap: .5rem;min-width:300px;width:300px;margin:0 auto;flex-direction: column; }
.lucky-day { width:300px; margin: 0 auto; text-align:center;background: white; }
.lucky-day-number {font-size:3.5em;color:#006600;margin:10px;animation:blinkingNumber 2s infinite;}
@keyframes blinkingNumber{
    0%{opacity: .1;}
    29%{opacity: .1;}
    30%{opacity: 1;}
    99%{opacity: 1;}
    100%{opacity: .1;}
}
@media screen and (max-width: 900px) {
.gm-wrap { flex-wrap: wrap; }
.g2-1 {
    flex-basis: 100%;
}
}

@media screen and (max-width: 650px) {
.g-group { flex-wrap: wrap; }
}


/*****************************************************
 				 STATION HEAD
*****************************************************/
header {margin-bottom:1.5rem;}
.st-head {color: #ffffff;height:189px;}
.c-title {font-size: 1.2rem;font-weight: bold;margin-bottom: 5px;}
.st-icon { max-width: 65px;  height:65px; display: block; margin: 0 0 3px 0; border-radius: 100%; }
.st-icon:hover { filter: opacity(0.5);}
.st-icon-text a {font-size: .8rem;color:#ffffff;}

@media screen and (max-width: 650px) {
    .c-section {background-color:#dddddd; padding:10px 0;width: 100%;color:#000000;}
    .st-icon-text a {font-size: .8rem;color:#000000;}
    .st-logo { max-height: 120px; width:auto; }
    .st-head {height:276px;}
}


/*****************************************************
 				STATIONS SECTION
*****************************************************/
.sts-section {background-color: #eeeeee;padding: .4rem 0;border-bottom: thin solid #777777;}
.g-sts-logos {width: 96%;max-width: 1280px;margin: auto;display: flex;gap: 1rem;justify-content: center;flex-wrap: wrap;align-items: center; }
.g-sts-logos a:hover { opacity:.5;}
.g-sts-logos img {height: 50px;}
@media screen and (max-width: 600px) {
.g-sts-logos img {height: 40px;}
}


/*****************************************************
 	        MARKET NAVIGATION 
*****************************************************/
.nav {background: #333333;}
.selected {background-color:#2c5bbe;color: #ffffff; }
.hide-logout {display:none!important;}
.nav-dropdown > :first-child:after { content: "\25BE"; padding-left: 4px; }
[class$="menu"] ul { margin: 0; padding: 0; list-style-type: none; position: relative; background: #333333;  /* Menu Bar Color */ }
[class$="menu"] ul li { display: inline-block; }
[class$="menu"] ul li a { text-decoration: none; display: block; padding: 15px; font-size: 1em; color: #ffffff; /* Font Color Size Style */ }
[class$="menu"] ul li:hover { background: #555555;}
[class$="menu"] ul ul { position: absolute; z-index:2; min-width: 200px; display: none; background: #444444; /* Dropdown Color */} /* Can add .8 ul ul li a to change dorpdwon text color */
[class$="menu"] ul ul li { display: block;  }
[class$="menu"] ul li:hover ul { display: block;}
[class$="menu"] ul li i { float: right; padding-left: 10px; color: #ffffff; /*font awesoome color*/}
[class$="menu"] .mobile-button { font-size: 24px; padding: 0.6em; cursor: pointer; display: none;  background: #333333; color: #ffffff;} /*mobile bar menu color*/
.focus-button { float:right; background-color: #2c5bbe; }
@media(max-width: 850px) {
[class$="menu"] .mobile-button {display: block; }
[class$="menu"] ul {  position: static; }
[class$="menu"] ul li { display: block; }
[class$="menu"] ul ul { position: static; }
.mobilenav-hide {display:none;}
.mobilenav {display:block;}
.focus-button { float:none; }
}

.menu-school { background-color: lightgrey; padding: 10px;font-size:.6em;}
.menu-school img { width: 40px; height: auto; margin-right: 5px;}
.menu-school-grid { display: flex; gap:.75em; }
.menu-team { display: flex; align-items: center; }
.menu-team a { color:#000000;}
@media(max-width: 1100px) {
    .menu-team-text { display: none;}
}
@media(max-width: 650px) {
    .menu-school-grid { flex-wrap: wrap;}
}

.feature-school-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.feature-school-team { width: 200px; margin: 10px;text-align: center; }
.feature-school-name {color:#000000;}
.feature-school-mascot {font-size: 2rem;text-transform: uppercase;font-weight: bold;line-height: 1;margin: 0;}

/*****************************************************
 				 STREAMING
*****************************************************/
.stream-wrapper {border-width: 2px;border-style: solid;border-color: #2c5bbe;}
.stream-wrapper img {margin:0;}
#stream-image {width: 100%;height: 250px;overflow: hidden;}
.stream-text {min-height:55px;background: #2c5bbe;color: white;padding: 5px 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#stream-title {font-size: 1.3rem;}
.onair-wrapper {display:flex; align-items: center;background: #180909;padding: 5px 0 0 0;}
.onair-wrapper img { width:75px;border-bottom-right-radius: 20px;border-top-right-radius: 20px;}
.onair-text {color: #ffffff;padding-left:10px;}
.onair-title {font-size: 1.2rem;color: #ff9292;}
.stream-badges {display: flex;flex-wrap: wrap;padding: 10px 0;gap: 10px;justify-content: center;}
.stream-badges img { width: 135px;}


/*****************************************************
 				NEWS / CALENDAR LISTING
*****************************************************/
.nl-container { display: flex; margin:0 0 1rem 0;background: #ffffff;padding: 1rem;box-shadow: 1px 1px 4px #a8a8a8;gap:1rem;align-items: center;}
.nl-pin {background: rgba(217,0,0,1); background: linear-gradient(90deg, rgba(217,0,0,1) 0%, rgba(255,255,255,1) 25%); padding: 20px 0 20px 20px;}
.nl-container h2 {margin: 0 0 10px 0;padding: 0;}
.nl-image {max-width:200px;}
.nl-text a {color:#2c5bbe;}
.nl-text h2 { font-size: 1.17em; margin:0; text-transform: capitalize;}
.nl-date, .content-date { font-size: .7em; padding: 0 10px; font-style:italic; color:#333333; }
.audio-wrapper {background-color: #222222;border-radius: 5px;margin: 10px auto;color:white;}
.audio-wrapper p {margin: 0;padding: 5px 0 0 20px;color: white;}

@media screen and (max-width:900px) {
    .nl-container { flex-wrap: wrap;}
    .nl-image { max-width:100%;}
}

/*****************************************************
 				NEWS / FEATURE
*****************************************************/
.news-feature-wrapper {display: flex;gap: 1rem;margin-bottom: 2rem;}
.news-feature-card {flex-basis: 100%;display: flex;flex-direction: column;margin: 0;box-shadow: 1px 1px 4px #a8a8a8;text-align: center;align-items: center;}
.news-feature-text {padding:.25rem;}
@media screen and (max-width:900px) {
    .news-feature-wrapper {flex-direction: column;}
}


/************************************************
			ARTICLE DETAILS
*************************************************/
.lead-img {max-width: 960px;}

.content-wrapper {box-shadow: 1px 1px 4px #a8a8a8;background: white;padding: 1rem;}
.content-image-float {float:right; width:50%; margin:0 0 10px 10px;}
.content-image-float > div {font-size: .7em;text-align: center;padding: .2rem;}
@media screen and (max-width: 950px) {
    .content-image-float {float:none; width:100%; margin:0 0 20px 0;}
}

/*****************************************************
        CALENDAR DATE ICON
*****************************************************/
time.icon { font-size: .8em; display: block; position: relative; width: 9em; height: 8em; margin: 0 10px 10px 0; border:1px solid #cccccc; text-align: center; }
time.icon strong { position: absolute; top: 0; padding: 0.4em 0; color: #fff; background-color: #B50000; display: block; width: 100%; }
time.icon em { position: absolute; bottom: 0.3em; color: #b50000; display: block; width: 100%; }
time.icon span { width: 100%; font-size: 2.8em; letter-spacing: -0.05em; padding-top: 0.8em; display: block; }
@media screen and (max-width:900px) {
    time.icon { margin: 0 auto 10px;}
}



/*****************************************************
 				SPORTS PAGE
*****************************************************/
.scorestream-widget-container { height: 200px!important;}

/****************  SCHOOL PAGE SPONSORS ********************/
.sponsors-wrapper {display: flex;flex-wrap:wrap; gap:10px;justify-content: center;margin: 50px 0;}
.sponsors {width: 200px;text-align: center;padding: 10px;box-shadow: 1px 1px 4px #a8a8a8;display: flex;align-items: center;justify-content: center;background: white;text-wrap: balance;}
.sponsors img {margin:-10px;}

.sph-wrapper {display: flex;justify-content: space-evenly;align-items: center;}
.sph-wrapper img {max-width: 200px;width:25%;}
.sph-school {font-size: 3cqw;}
.sph-mascot {font-size: calc(7cqi - 10px);text-transform: uppercase;font-weight: bold;line-height: 1;margin: 0;}
@media screen and (max-width: 850px) {
.sph-wrapper img {width:20%;}
}
@media screen and (max-width: 750px) {
.sph-wrapper img {display:none;}
}
@media screen and (max-width: 650px) {
.sph-wrapper img {display:block;}
}
@media screen and (max-width: 500px) {
.sph-wrapper img {width:25%;}
.sph-mascot {font-size: calc(10cqi - 5px);}
}
/*****************************************************
 				ARTICLE WRAPPER
*****************************************************/
.article-wrapper {
	display:block;
	margin: 10px;
	border: #333333;
	border-width: 1px;
	border-style:solid;
	border-radius: 10px;
}

.article-date {
	background-color: #EEEEEE;
	font-size: .7em;
	padding: 5px 10px 5px 10px;
	font-style:italic;
	color:#333333;
}
.article-body {
	padding: 10px;
	text-align:justify;
}
.article-img {
	margin-bottom: 10px;
}
.article-img img {
	max-width:590px;
	max-height:400px;
	display:block;
	margin:auto;
}
.readmore {
	text-align:center;
}
.audio-Yes {
	
}
.audio-No {
	display:none;
}
.pdf-Yes {
	
}
.pdf-No {
	display:none;
}
/*****************************************************
 				Media   ?may not need
*****************************************************/
.content-pdf{ margin: 30px 20px; }
.content-pdf .icon { margin-right: 10px; }
.icon img { max-width:17px; height:auto; }
.content-pdf a { color:#000000; text-decoration:none; }
.content-audio { margin:30px 20px;}
.content-audio p {margin: 10px;}
.soundcloud {margin: 30px 20px;}

.size {
	font-size: .7em;
	font-style:italic;
	color:#333333;
}
.description{
	width:70%;
	margin: 0px 0px 10px 40px;
	padding: 5px 5px 5px 10px;
	color: #666666;
	font-size:.8em;
	border:#333333;
	border-width: 1px;
	border-style:solid;
	border-top-style:none;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
/*****AUDIO******/
.news-audio-wrapper {
    background: grey;
    padding: 10px 10px 5px;
    margin: 10px 1%;
    border-radius: 5px;
}


/*********** Horizontal Scroll Image Row ***********/
.scroll-box {position: relative;width: 100%;height: 260px;}
.scroll-indicator {
    position: absolute;
    right: 0;
    height: 100%;
    z-index: 2;
    background: rgb(0 0 0 / 49%);
    color: white;
    padding: 100px 10px;
    font-size: 3rem;
    border: none;
}
.gallery-scrolling-wrapper {display: flex;position: absolute;overflow-x: scroll;inset: 0 0 0 0;gap: 10px;}
.gallery-card img {width:auto; max-height:220px;box-shadow: 2px 2px 6px #aaaaaa;margin: 10px;}
.gallery-scrolling-wrapper::-webkit-scrollbar { height:5px; }
.gallery-scrolling-wrapper::-webkit-scrollbar-track { background: #eee; }
.gallery-scrolling-wrapper::-webkit-scrollbar-thumb { background: #2c5bbe; }
.gallery-scrolling-wrapper::-webkit-scrollbar-thumb:hover { background: #333; }



/**************  Document List  ****************************************************/
.file-list { margin: 13px 2%;}
.file-list:after { content: " "; display: block; clear: both; }
.file-list svg {float: left; width:40px; height:auto; margin: 0 10px 0 0;}
.file-list a {line-height: 3;}
.file-type {margin: 0 0 0 10px; font-size:.8em;}
@media screen and (max-width: 900px) {
   .file-list a {line-height: 1;} 
}

/***********************************
        TABLE STYLE
************************************/

table { border-collapse: collapse; text-align:center;}
th {  padding: 8px 10px; text-transform: uppercase;  background-color: #333333; color: white;}
td {  padding: 8px 10px; vertical-align:middle;}
tr:nth-child(even){background-color: #f2f2f2}

.contest-grid {display: grid;grid-template-columns: repeat(2, 1fr);margin-block-end: 1rem;}
@media screen and (max-width: 750px) {
    .contest-grid {display: block;;}
}
/*****************************************************
 				SPORTS SCHEDULE
*****************************************************/

.sports-archive-score { padding: 0 20px 0 0; font-size: 2.8em; font-weight: normal; }
.sports-archive-audio { display:inline-flex; white-space: nowrap; padding: 10px; width: 100%; }
.sports-archive-audio iframe {  background: #ffffff; }

#sportHighlight {margin:3rem 0 1rem 0;}

.gs-wrapper {display: flex;background-color: white;margin: 0 0 1rem 0;box-shadow: 1px 1px 4px #a8a8a8;}
aside > .gs-wrapper {margin:0;}
.gs-today-highlight { border:2px solid red;}
.gs-update { background-color:orange;}
.gs-icon { padding: 10px 12.5px; text-align: center; font-size:.7em; }
.gs-icon img { width:30px; height:30px; margin: 10px auto; }
.gs-info{  width:100%; padding: 5px 10px 5px 10px; }
.gs-info img {margin: 0;}/*Aside Fix*/
.gs-date {color:#a00000;}
.gs-tournament {margin: 5px 0 0 20px;}
.st-group {display: flex;align-items: center;row-gap: 0px;flex-wrap: wrap;column-gap: 15px;justify-content: space-between;}
.st-wrapper {display: flex;margin: 5px;align-items: center; flex-wrap: wrap;}
.st-wrapper img {width:50px; height:50px;}
.gs-tag {text-orientation:upright; writing-mode: vertical-lr; font-size: .7em; line-height: 1em; padding-right: 5px; vertical-align: middle;}
.st-text {margin-left:10px;}
.st-school {font-size:.9em; display:block;}
.st-mascot {text-transform: uppercase; font-size:1.3em;}
.gs-matchup {flex-basis: auto; font-size: 2em;}
.gs-station { display: flex;column-gap: 10px;justify-content: center;align-items: center;white-space: nowrap;}
.basketball {background-color:#CF5300; color:#ffffff;}
.football {background-color:#624a2e; color:#ffffff;}
.volleyball,.soccer,.baseball {background-color:#fafafa;}
.softball {background-color:#ccff00;}
@media screen and (max-width: 1100px) {
    .st-group {justify-content: normal;}
    .gs-station {width:75%;}
    }

@media screen and (max-width: 1000px) {
    .gs-matchup { width: 75%; text-align: center;}
}
@media screen and (max-width: 860px) {
    .sports-archive-audio {display: block; white-space: inherit;}
}
@media screen and (max-width: 650px) {
    .gs-wrapper { margin: 10px 4%;}
}
/*****************************************************
 				CLOSINGS
*****************************************************/
.closings { border-bottom: 1px #999999 solid; padding: 15px 0; display: flex; align-items: stretch;}
.closing-name { text-transform: uppercase; }
.closing-address { padding-left:30px; color:#333333; font-size: .7em; }
.closing-detail { font-size:.9em; }
.closing-note { font-size:.8em; }
.closing-notice { width:170px; max-width:170px; padding-right:10px;  }
.closing-info { width:100%;}
.yellow { background-color:#ffffe0; }
.hidden {display:none;}
@media screen and (max-width: 650px) {
    .closings { margin: 0 4% 0 4%; }
}


/*****************************************************
            I-Frame
*****************************************************/
.iframe-container { overflow: hidden; padding-top: 40%; position: relative; height:1600px; }
.iframe-container iframe { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.iframe-youtube {width:100%;height:auto;aspect-ratio:560 / 315;border:none;}
@media screen and (max-width: 1000px) {
    .iframe-container { padding-top: 60%; }
}
@media screen and (max-width: 500px) {
    .iframe-container { padding-top: 80%; }
}

/****************  JOB LISTING *****************************************************/
.job-listings {background-color: #ffffff;padding: 1rem;margin: 0 0 1rem 0;box-shadow: 1px 1px 4px #a8a8a8;}
.job-listings-title {font-size: 1.5em;font-weight: bold;margin: 0;}
.job-listings-town { font-size: .7em; margin-left: 20px; font-weight: normal;}
.job-listings-posted {font-size: .8em; margin-left: 20px;}
.job-listings-position {margin: 10px 0 0 0; font-size: 1.1em;}
.job-listings-body {margin-left: 20px;}

/*****************************************************
 				SHOP LOCAL
*****************************************************/
.client-listing {background-color: #ffffff;padding: 1rem;margin: 0 0 1rem 0;box-shadow: 1px 1px 4px #a8a8a8;}
.client-listing img { float:right; max-height: 200px; max-width: 200px; margin: 0 0 10px 10px;}
.client-listing-business { font-size: 1.4em; margin-top: 0;}
.client-listing h2 { font-size: 2em; text-transform:uppercase; color:#2c5bbe; margin-top: 0; border-bottom: 1px solid #2c5bbe; }
.client-website:before { 	margin-left:20px; padding-right:10px; vertical-align:middle; content:url(/Content/images/icon/web.png); }
.client-website a { text-decoration:underline; }
/*.client-facebook:before { margin-left:20px; padding-right:10px; vertical-align:middle; content:url(/Content/images/icon/FB-icon-25.png); }*/
.client-facebook a { text-decoration:underline; }
@media screen and (max-width: 650px) {
    .client-listing img {float:none; text-align:center; margin:auto; max-height: 300px;max-width: 300px;}
}

/*****************************************************
 				CONTACT PAGE
*****************************************************/
.contact {width:100%;}
.contact p { margin-left: 40px;}
.mapicon { width:50px; margin: 0 0 20px 40px; display: inline-block; }

/*****************************************************
 				FOOTER
*****************************************************/
footer { color: #ffffff; background-color: #333333;padding:2rem 0 5rem;text-align: center;margin:2rem 0 0 0;}
.footer-flex {display: flex;width: 96%;max-width: 1280px;margin: auto;gap: 1rem;flex-wrap: wrap;justify-content: space-between;}
.footer-nav {flex: 1 1 300px;text-align: left;}
.footer-contact {}
footer img {max-width:200px;margin: auto;}
footer a {color:#ffffff; text-decoration:none;padding: .5rem; display: inline-block;}
footer a:hover {color:#000000;background:#eeeeee; }
footer ul { padding:0;}
footer li { list-style: none;display:inline-block;font-size: .8rem;}
.copyright { text-align:center; font-size: .8rem; padding:1rem 0; }

@media screen and (max-width: 600px) {
    .footer-flex {justify-content:center;}
    .footer-nav {text-align: center;}
}

/*****************************************************
 				SUMMER TOUR
*****************************************************/
.summertour-sponsors { text-align:center; }
.summertour-sponsors img { width:200px; height:auto; margin:5px; }
.summertour-stop { color:#CC3300; margin-left: 20px;}
/*****************************************************
 				THE BIG SHOW
*****************************************************/
.bigshowtable {width:100%;}
.bigshowtable td{ text-align:center; width:31%; padding: 10px 1%; background-color:#880909; color: #ffffff; }

/*****************************************************
PAGINATION
*****************************************************/
.pagination, .system_pagination { margin: 10px 0; text-align: center; }
.pagination ul, .system_pagination ul  {padding:0;}
.pagination li, .system_pagination li { display: inline; margin: 5px; padding: 5px 10px; background-color: #EBEBEB; color:#333333; border-radius: 3px; }
.pagination li a, .system_pagination li a { color:#333333; }
.pagination .active, .system_pagination .active { padding: 5px 10px; background-color:#2c5bbe; }
.pagination .active a, .system_pagination .active a { color:#ffffff;}
.pagination-inline-next, .system_pagination-prev {vertical-align: middle;}

/*****************************************************
 				FORM STYLE 
*****************************************************/
form {max-width:800px;margin:auto;}

.form-grid, .form-flex {display: flex;flex-wrap: wrap;column-gap: 2rem;}
.form-grid > div, .form-flex > div {flex: 1 1 auto;}

label {line-height: 1;font-size: 1rem;margin-block:1rem .25rem;display: block;}
label:has(+ input:required):after, label:has(+ textarea:required):after, label:has(+ select:required):after {content: ' *';color: red;}
label:has(+ input[type=radio])::after {
    content: '';
}

input[type=text],  input[type=email], textarea, select, input[type=url] {width: 100%; padding: .75em; border: thin solid #ccc; border-left: .25em solid; border-radius: .25em; transition: border-color .5s ease-out;}
input[type=password] {width: 100%; max-width:500px;padding: .75em; border: thin solid #ccc; border-left: .25em solid; border-radius: .25em; transition: border-color .5s ease-out;}
textarea {field-sizing: content;}
select {background: #ffffff; appearance:none;}

input[type=datetime-local], input[type=date], input[type=tel], input[type=number] {padding: .75em; border: thin solid #ccc; border-left: .25em solid; border-radius: .25em; transition: border-color .5s ease-out;}
input[type=file] {width: 100%; max-width: 500px;}

#login input[type=text], #login input[type=password] { width: 300px;}

.form-note {padding-left:20px; font-size: .8em; color: #8d1212; font-weight: 300;}
.tiny-body {padding:10px 2%;}

input:optional, select:optional {border-left-color: #999;}
input:required:valid, select:required:valid {border-left-color: palegreen;}
input:invalid, select:invalid {border-left-color: salmon;}
input:required:focus:valid, select:required:focus:valid {border-left-color: palegreen;}
input:focus:invalid, select:focus:invalid {border-left-color: salmon;}
input:focus, select:focus {outline: none;}

input[type=submit], button[type=submit] { background-color:#2c5bbe; color: white; padding: 14px 30px; margin: 5px; border: none; border-radius: 3px; cursor: pointer; font-weight:bold;-webkit-appearance: button; }
input[type=submit]:hover, button[type=submit]:hover { background: #666666; }
input[type=submit]:focus, button[type=submit]:focus { background-color:#96b7da; }




/********* PASSWORD ENTRY  *****************************************************/
.password-form {max-width:500px;text-align: left;}
.password-view-wrapper {display: flex;justify-content: space-between;align-items: flex-end;max-width: 500px;}
.password-view-checkbox {font-size: .8rem;display: flex;gap: .5rem;margin-right: 1rem;}
#password_error_wrapper {columns: 2;max-width: 450px;    margin: .5em;font-size: .8rem;}
#password_error_match {font-size: .8rem;margin: -.5rem 0 1rem 1rem;color: red;}
.password-error {color: red; font-weight:bold;}
.password-success {color: green;font-weight:bold;}
.password-no-break {white-space: nowrap;}

/********* SEARCH FORM *****************************************************/
#search {text-align:center;}
#search label {display: none;}
#search input[type=text], #search select {width:auto;border: thin solid #999;}
#search input[type=submit] {  padding: 10px 30px; }

#form_login {max-width: 350px;margin: auto;}

/*****************************************************
 				ACTION BUTTON 
*****************************************************/
.a-btn { display:inline-block; padding: 10px 30px; margin: 0 20px 20px 20px; border-radius: 3px; background-color:#2c5bbe; color:#ffffff; }
.a-btn:hover {  background-color:#007bbe; text-decoration:underline; color:#ffffff; }

/*****************************************************
 				MODAL
*****************************************************/
.modal { display: none; /* Hidden by default */ position: fixed; z-index: 3; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); padding: 10vh 15vw;}
@media screen and (max-width: 650px) { 
.modal {padding: 10vh 1vw;}
}
.modal-container { position: relative; background-color:#eeeeee; padding:40px 20px 20px; color:#000000;text-align:left;}
.imgcontainer { text-align: left;  margin: 10px 0 10px 0; position: relative; }
.close { position: absolute; right: 10px; top: 10px; color: #000; font-size: 1.2em; }
.close:hover, .close:focus { color: red; cursor: pointer; }
.animate {  animation: animatezoom 0.6s }

@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/***********************************
        CRAWLER
************************************/
.crawler-sticky { position: sticky;top: 0; z-index:10;}
.crawler { width: 100%; line-height:40px; margin: 0 auto; white-space: nowrap; overflow: hidden; }
.crawler-yellow {background: yellow;}
.crawler-orange {background: orange;}
.crawler-red {background:red; color:white;font-weight:bold;}
.crawler span { display: inline-block; padding-left: 100%;}
.crawler-yellow span {animation: crawler 15s linear infinite;}
.crawler-orange span {animation: crawler 17s linear infinite;}
.crawler-red span {animation: crawler 19s linear infinite;}
.crawler span:hover { animation-play-state: paused }
@keyframes crawler {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .crawler { white-space: normal  }
  .crawler span { animation: none; padding-left: 0; }
}

/***********************************
        SLIDESHOW
************************************/
.slideshow-container { max-width: 1000px; position:relative; margin: 0 auto; height: auto;}
.slideshow-inner {aspect-ratio: 1200 / 630;}
.mySlides { display: none; width: 100%; height: auto; overflow: hidden; }
.mySlides img { animation: kenburns 5s 1; width: 100%; height: 100%; object-fit: cover;}
.slideshow-container .prev, .slideshow-container .next {cursor: pointer; position: absolute; bottom: 4px; width: auto; padding: 0 10px; color: #ffffff; font-weight: bold; font-size: 30px;  transition: .6s ease; opacity: .7; background: inherit; border: none;}
.slideshow-container .next { right: 0px; }
.slideshow-container .prev { left: 0px; }
.slideshow-container .prev:hover, .slideshow-container .next:hover { color: #000000; background-color: #ffffff; }
.text-box { color: #ffffff; padding: 10px 30px; text-align: center;  background-color: #444444; width: 100%;text-transform: capitalize; font-size: 1.1em; position: absolute; bottom: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.dot-section {position:absolute;bottom:40px;width:100%;text-align:center;}
.dot, .dot2 { cursor: pointer;  height: 12px;  width: 12px;  background-color: #bbb;  border-radius: 50%;  display: inline-block;  transition: background-color .6s ease; margin:5px 2px; }
.active, .dot:hover, .dot2:hover { background-color: #2c5bbe }
@media screen and (max-width: 800px) {
    .text-box, .slideshow-container .prev, .slideshow-container .next {bottom:-40px;}
    .dot-section {bottom:0;}
    .slideshow-container { margin: 0 auto 90px; }
}
@keyframes kenburns {
    0%{transform: scale(1);opacity:0;} 
    10% {opacity:1;} 
    90% {opacity:1;}
    100% {transform: scale(1.1);opacity:0;}
}



/*************************************************  
            CLIENT PORTAL
****************************************************/
.p-group{display:flex;}
.p-grid {width:100%}

.p-add-btn { display: inline-block;padding: 3px 15px;margin: 0 5px;border-radius: 5px;background-color: #5f5f5f;color: #ffffff;cursor: pointer;}
.p-a-btn { display: block;padding: 10px 30px;margin: 0 20px 20px 20px;border-radius: 5px;background-color: #2c5bbe;color: #ffffff;width: 50%;min-width: 250px;text-align: center;position: relative;font-weight: bold;cursor: pointer;}
.p-add-btn:hover, .p-a-btn:hover {background-color: #000000;color:#ffffff;}
.p-edit-btn {      
    float:right;
    display: inline-block;
    padding: 3px 10px;
    margin: 10px 0 0 5px;
    border-radius: 3px;
    background-color: #444444;
    color: #ffffff;
}

.p-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #2c5bbe;
    border: thin solid white;
    width: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
}
.f-right { float:right;}

@media screen and (max-width: 1000px) {
    .p-group {flex-wrap:wrap;}
}


/***************     BRACKET STATUS     ***************/
.mb-wrapper {background: #eeeeee;border-radius: 10px;}
.mb-title {background: #3d75eb;padding: 10px;text-align: center;border-radius: 10px 10px 0 0;color: white;font-weight: bold;}
.mb-box {padding: 10px 20px;display: flex;align-items: center;gap: 10px;}
.mb-text {text-align: right;}
.mb-total {text-align: center;font-size: .9rem;margin-left: 20px;}
.mb-total span {font-size: 4rem;}
.mb-link a {color: black;background: grey;display: block;padding: 10px;border-radius: 0 0 10px 10px;text-align: center;}
.mb-link a:hover {background-color:#000000; color: white;}

/*************************************************  
            Audio Player  
****************************************************/
@keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}
@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}

#streamPlayer button[data-plyr="play"]::before {content: 'LISTEN LIVE';font-size: 1.3rem;float: left;padding-right: 10px;color: #ffffff;animation: pulsate 3s ease-out infinite;}
#streamPlayer button.plyr__controls__item.plyr__control.plyr__control--pressed {background: #2c5bbe;}
#streamPlayer .plyr--audio .plyr__controls {background: #222;border-radius: inherit;color: #aaa;padding: 5px;}
#streamPlayer .plyr__control svg {display: block;fill: #ffffff;height: 30px;pointer-events: none;width: 30px;}
#streamPlayer .plyr__control.plyr__control--pressed .icon--not-pressed, #streamPlayer .plyr__control.plyr__control--pressed .label--not-pressed, #streamPlayer .plyr__control:not(.plyr__control--pressed) .icon--pressed, #streamPlayer .plyr__control:not(.plyr__control--pressed) .label--pressed {display: none}
.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true] {background: #2c5bbe;color: #ffffff;}


.plyr{-webkit-font-smoothing: antialiased;
    align-items: center;
    direction: ltr;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    font-family: var(--plyr-font-family,inherit);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    font-weight: var(--plyr-font-weight-regular,400);
    line-height: 1.7;
    line-height: var(--plyr-line-height,1.7);
    max-width: 100%;
    min-width: 200px;
    position: relative;
    text-shadow: none;
    transition: box-shadow .3s ease;
    z-index: 0;
}
.plyr audio,.plyr iframe,.plyr video {display: block;height: 100%;width: 100%}
.plyr button {font: inherit;line-height: inherit;width: auto}
.plyr:focus {outline: 0}
.plyr--full-ui {box-sizing: border-box}
.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before {box-sizing: inherit}
.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label {touch-action: manipulation}
.plyr__control {background: 0 0;
    border: 0;
    border-radius: 3px;
    border-radius: var(--plyr-control-radius,3px);
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    overflow: visible;
    padding: calc(10px * .7);
    padding: calc(var(--plyr-control-spacing,10px) * .7);
    position: relative;
    transition: all .3s ease;}

.plyr__control svg {display: block;
    fill: currentColor;
    height: 18px;
    height: var(--plyr-control-icon-size,18px);
    pointer-events: none;
    width: 18px;
    width: var(--plyr-control-icon-size,18px);}
.plyr__control:focus {outline: 0}
.plyr__control.plyr__tab-focus {outline-color: #00b3ff;outline-color: var(--plyr-tab-focus-color, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));outline-offset: 2px;outline-style: dotted;outline-width: 3px}
a.plyr__control {text-decoration: none}
a.plyr__control::after,a.plyr__control::before {display: none}

.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed {display: none}
.plyr--full-ui ::-webkit-media-controls {display: none}
.plyr__controls {align-items: center;display: flex;justify-content: flex-end;text-align: center}
.plyr__controls .plyr__progress__container {flex: 1;min-width: 0}
.plyr__controls .plyr__controls__item:first-child {margin-left: 0;margin-right: auto}
.plyr__controls .plyr__controls__item.plyr__progress__container {padding-left: calc(10px/ 4);padding-left: calc(var(--plyr-control-spacing,10px)/ 4);}
.plyr__controls .plyr__controls__item.plyr__time {padding: 0 calc(10px / 2);padding: 0 calc(var(--plyr-control-spacing,10px)/ 2);}
.plyr__time {
    font-size: 13px;
    font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px));
}
.plyr--full-ui input[type=range] {    -webkit-appearance: none;
    background: 0 0;
    border: 0;
    border-radius: calc(13px * 2);
    border-radius: calc(var(--plyr-range-thumb-height,13px) * 2);
    color: #2c5bbe;
    /* color: var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#2c5bbe))); */
    display: block;
    height: calc((3px * 2) + 13px);
    height: calc((var(--plyr-range-thumb-active-shadow-width,3px) * 2) + var(--plyr-range-thumb-height,13px));
    margin: 0;
    min-width: 0;
    padding: 0;
    transition: box-shadow .3s ease;
    width: 100%;}
.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;border-radius:calc(5px / 2);border-radius:calc(var(--plyr-range-track-height,5px)/ 2);height:5px;height:var(--plyr-range-track-height,5px);-webkit-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-webkit-user-select:none;user-select:none;background-image:linear-gradient(to right,currentColor 0,transparent 0);background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0))}

.plyr--full-ui input[type=range]::-webkit-slider-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2);box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2));height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px);-webkit-appearance:none;margin-top:calc(((13px - 5px)/ 2) * -1);margin-top:calc(((var(--plyr-range-thumb-height,13px) - var(--plyr-range-track-height,5px))/ 2) * -1)}



.plyr__volume {align-items: center;display: flex;max-width: 110px;min-width: 80px;position: relative;width: 20%}
.plyr__volume input[type=range] {margin-left: calc(10px / 2);
    margin-left: calc(var(--plyr-control-spacing,10px)/ 2);
    margin-right: calc(10px / 2);
    margin-right: calc(var(--plyr-control-spacing,10px)/ 2);
    position: relative;
    z-index: 2;}
.plyr--full-ui input[type=range]:focus {
    outline: 0;
}
.plyr__time+.plyr__time::before {
    content: '\2044';
    margin-right: 10px;
    margin-right: var(--plyr-control-spacing,10px);
}
.plyr--is-ios .plyr__volume {min-width: 0;width: auto}
.plyr--audio {display: block}

.plyr--audio .plyr__controls {
    background: #222;
    background: var(--plyr-audio-controls-background,#222);
    border-radius: inherit;
    color: #ffffff;
    color: var(--plyr-audio-control-color,#ffffff);
    padding: 0 5px;
    /*padding: var(--plyr-control-spacing,5px);*/
    border-radius: 5px;
}

.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {background-color: rgba(193, 200, 209, .6);}
.plyr__sr-only {clip: rect(1px, 1px, 1px, 1px);overflow: hidden;border: 0 !important;height: 1px !important;padding: 0 !important;position: absolute !important;width: 1px !important}
.plyr__progress {left: calc(13px * .5);left: calc(var(--plyr-range-thumb-height,13px) * .5);margin-right: 13px;margin-right: var(--plyr-range-thumb-height,13px);position: relative;}
.plyr__progress input[type=range] {position: relative;z-index: 2;}
.plyr__progress input[type=range], .plyr__progress__buffer {margin-left: calc(13px * -.5);margin-left: calc(var(--plyr-range-thumb-height,13px) * -.5);margin-right: calc(13px * -.5);margin-right: calc(var(--plyr-range-thumb-height,13px) * -.5);width: calc(100% + 13px);width: calc(100% + var(--plyr-range-thumb-height,13px));}
.plyr--audio .plyr__progress__buffer {color: rgba(193,200,209,.6);color: var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6));}
.plyr__progress__buffer {-webkit-appearance: none;background: 0 0;border: 0;border-radius: 100px;height: 5px;height: var(--plyr-range-track-height,5px);left: 0;margin-top: calc((5px / 2) * -1);margin-top: calc((var(--plyr-range-track-height,5px)/ 2) * -1);padding: 0;position: absolute;top: 50%;}
.plyr__controls .plyr__controls__item {margin-left: calc(10px / 4);margin-left: calc(var(--plyr-control-spacing,10px)/ 4);}
progress {vertical-align: baseline;}
.plyr__progress .plyr__tooltip {font-size: 13px;font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px));left: 0;}
.plyr__tooltip {background: rgba(255,255,255,.9);background: var(--plyr-tooltip-background,rgba(255,255,255,.9));border-radius: 3px;border-radius: var(--plyr-tooltip-radius,3px);bottom: 100%;box-shadow: 0 1px 2px rgb(0 0 0 / 15%);box-shadow: var(--plyr-tooltip-shadow,0 1px 2px rgba(0,0,0,.15));color: #4a5464;color: var(--plyr-tooltip-color,#4a5464);font-size: 13px;font-size: var(--plyr-font-size-small,13px);font-weight: 400;font-weight: var(--plyr-font-weight-regular,400);left: 50%;line-height: 1.3;margin-bottom: calc(calc(10px / 2) * 2);margin-bottom: calc(calc(var(--plyr-control-spacing,10px)/ 2) * 2);opacity: 0;padding: calc(10px / 2) calc(calc(10px / 2) * 1.5);padding: calc(var(--plyr-control-spacing,10px)/ 2) calc(calc(var(--plyr-control-spacing,10px)/ 2) * 1.5);pointer-events: none;position: absolute;transform: translate(-50%,10px) scale(.8);transform-origin: 50% 100%;transition: transform .2s .1s ease,opacity .2s .1s ease;white-space: nowrap;z-index: 2;}
.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip {transform: translate(0, 0) scale(1)}
.plyr .plyr__control.plyr__tab-focus .plyr__tooltip, .plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible {opacity: 1;transform: translate(-50%, 0) scale(1)}






@keyframes pulsate{
0% {transform: scale(0.3, 0.3);opacity: 0.0;}
50% {transform: scale(1, 1) translateX(0px);opacity: 0.8;}
70% {transform: scale(1, 1) translateX(0px);opacity: 0.8;}
100% {transform: scale(0.3, 0.3) translateX(0px);opacity: 0.0;}
}