@charset "UTF-8";
/* CSS Document */

:root {
  --darkBlue: #244576;
  --lightBlue: #bad1e2;
  --chpTan: #cbc5bf;
  --royalBlue: #5878bb;
  --orange: #f05627;
  --yellow: #fbe7b1;
  --white: #ffffff;
  --offWhite: #f2f3f4;
  --black: #000000;
}

html {
	height:100%;
	width:100%;
}

.hide {
	visibility: hidden;
	display:none;
}

body { 
	font-family: 'Montserrat', sans-serif; 
	background-color: var(--offWhite);
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
	box-sizing: border-box;
	color:var(--darkBlue);
	font-size:15px;
	line-height: 1.2em;
	position:relative;
	z-index:0;
	 overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
}

.user-cannot-see {
    display:none
}


a {
	text-decoration: none;
	color:var(--darkBlue);
	font-weight: bold;
}

a:hover {
	color: var(--lightBlue);
	text-decoration: none;
}

/*Mobile First (portrait phones, 575px and below)*/

.splash {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background: var(--white);
	text-align: center;
	z-index: 999;
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.splashLogo {
	width:50%;
	height:auto;
}

.sponsorLogo {
	width:45%;
	height:auto;
	color: var(--white);
	background-color: var(--darkBlue);
	padding:1em;
	margin-top:1em;
	position:relative;
	border-radius:10px;
}

.sponsorLogo h5 {
	text-transform: uppercase;
	font-weight: 100;
	padding: 0;
	margin:0 0 1em;
	font-size:60%; 
}

.aboutLogo {
	width:200px;
	margin:0px auto;
	padding:1em 0 0;
}

#header {
	width:100%; 
	background-color: var(--white);
	position: relative;
}

#refresh-indicator {
	position: absolute;
	top: -60px; /* Positioned above the visible content */
	left: 0;
	width: 100%;
	height: 60px;
	background-color: #eee;
	text-align: center;
	line-height: 60px;
	transition: top 0.2s ease-out; /* Smooth transition for the indicator */
}

#refresh-indicator.active {
	top: 0; /* Show the indicator when active */
}

#content {
	width:95%; 
}

#footer {
	width:100%; 
	text-align: center;
	font-size:70%;
	height:100px;
}

#shadowBG {
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:22;
	background-color: rgba(0,0,0,.25);
	display:none;
	visibility: hidden;
}

#shadowBG.active {
	display:block;
	visibility: visible;
}

.nav {
	display:flex;
	flex-wrap: wrap;
}

.navLogoLink {
	flex-grow: 1;
	justify-content: flex-start;
}

.navLogo {
	margin:15px 15px 0px;
	height: 45px;
}

.menuIconHolder {
	display:flex;
	flex-grow: 1;
	justify-content: flex-end;
	visibility: visible;
}

.menuIcon {
  width: 30px;
  padding-right: 15px;
  padding-top: 12px;
 
}

.menuIcon:before,
.menuIcon:after,
.menuIcon div {
  background: var(--darkBlue);
  content: "";
  display: block;
  height: 6px;
  border-radius: 0px;
  margin: 6px 0px;
  transition: 0.5s;
}
.menuIcon.active:before {
  transform: translateY(12px) rotate(135deg);
}
.menuIcon.active:after {
  transform: translateY(-12px) rotate(-135deg);
}
.menuIcon.active div {
  transform: scale(0);
}

#navMenu {
	display:none;
	visibility: hidden;
}

#navMenu.active {
	width:100%;
	display:flex;
	visibility: visible;
	flex-basis: 100%;
	flex-direction: column;
	justify-content: center;
}

#navMenu a {
	width:93%;
	text-align: right;
	padding:5px 0px;
	border-top: 1px var(--lightBlue) solid;
	transition: 0.5s;
	margin:auto;
}

#navMenu a.selected {
	font-weight: bold;
	color: var(--lightBlue);
	text-decoration: none;
}

#filters {
	width:90%;
	margin:0 auto;
	max-height:0px;
	border-radius:10px;
	border:none;
	background-color: var(--white);
	overflow:hidden;
	transition: 0.5s ease-out;
	padding:0 1em;
	position:relative;
	box-sizing: border-box;
	font-size:90%;
	display:grid;
	grid-auto-rows: 1fr;
	align-items:center;
}

#filters.active {
	margin:1em auto 0;
	max-height:600px;
	border:1px solid var(--lightBlue);
	padding:3em 1em 1em;
	line-height: 1.2em;
}

.filterRow {
	padding:0px;
	margin:0px;
}

h3.guideHeading {
	display:inline-block;
	cursor:pointer;
}

.arrowShape {
	color: var(--darkBlue);
}

.arrow {
	height:16px;
	width:auto;
	transform: rotate(0);
	transition: .5s;
	vertical-align:top;
	margin-left: .2em
}

.arrow.active {
	transform: rotate(90deg);
}

.guideInternal {
	display:none;
}

h4 {
	text-align: center;
	font-weight:400;
	color: var(--lightBlue);
	margin-bottom:0px;
}

h4.about {
	text-align: left;
	font-weight:bold;
	color: var(--darkBlue);
	margin-bottom:0px;
	font-style: italic;
}

hr {
	width:80%;
	border:none;
	border-bottom: 1px solid var(--lightBlue);
}

.locationButton {
	margin: 0 auto;
	text-align: center;
}

.closeButton, .closeDialogueButton {
	position:absolute;
	color: var(--darkBlue);
	top:12px;
	right:12px; 
	width:20px;
	height:auto;
}

.closeIcon {
	width:20px;
	height:auto;
	cursor:pointer;
}

.closeIconSVG{
	fill:var(--lightBlue);
}

.closeIcon:hover .closeIconSVG {
	fill:var(--darkBlue);
}

button, .button {
	padding:.4em 2em;
	border-radius:10px;
	border:1px solid var(--darkBlue);
	color: var(--darkBlue);
	background-color: var(--offWhite);
	cursor:pointer;
	font-weight:300;
	font-size:90%;
}

button:hover, .button:hover {
	background-color: var(--white);
	color: var(--darkBlue);
}

.smButton {
	padding:.2em 1em;
	min-width:175px;
}

.detailData {
	padding:.2em 1.3em;
	border-radius:10px;
	border:1px solid var(--darkBlue);
	color: var(--darkBlue);
	background-color: var(--offWhite);
	cursor:pointer;
	min-width:175px;
}

.dateRangeInput {
	padding:.2em 0em;
	border-radius:10px;
	border:1px solid var(--darkBlue);
	color: var(--darkBlue);
	background-color: var(--offWhite);
	cursor:pointer;
	width:175px;
	text-align:center;
	font-size:100%;
}

select {
  appearance: none;
  /* safari */
  -webkit-appearance: none;
  /* other styles for aesthetics */
  width: 175px;
  min-width:175px;
  padding:.2em 1em;
  background-color: var(--offWhite);
  border: 1px solid var(--darkBlue);
  border-radius: 10px;
  color: var(--darkBlue);
  cursor: pointer;
  text-align: center;
  font-size:100%;
}

#info {
	width:90%;
	margin: 1em auto 0;
	display:flex;
	justify-content: space-between;
	align-items: flex-start;
}

.updateTime {
	color: var(--darkBlue);
	font-size: 70%;
	font-style: italic;
	padding: 0 1em;
	cursor:pointer;
	align-self: flex-end;
}

.updateTime:hover {
	color: var(--lightBlue);
}

#resetButton, #filterButton, #reloadButton {
	height:20px;
	width:20px;
	cursor: pointer;
	align-self: flex-start;
	display: flex;
	margin:4px 12px 0px 0px;
	text-align: left;
}

.reloadIconSVG.spin {
	transform: rotate(4320deg);
	transition-duration: 16s;
}


#filterButton {
	height:22px;
	width:22px;
	margin:3px 12px 0px 0px;
}

#settingsButtons {
	display:flex;
	flex-direction: row;
	align-content: flex-start;
}

#feedContainer {
	width: 90%;
	margin: 0 auto 1em;
}

.adItem {
	margin: .25em 0;
	box-sizing: border-box;
	border-radius: 10px;
	overflow: hidden;
	height: auto;
	background-attachment:local;
	background-position: center;
	background-size: cover;
	width:100%;
	border: 1px solid var(--royalBlue);
	text-align: center;
	cursor: pointer;
}

.HDCTadItemA, .HDCTadItemB {
	margin: .25em 0;
	box-sizing: border-box;
	border-radius: 10px;
	overflow: hidden;
	background-attachment:local;
	background-position: center;
	background-size: cover;
	width:100%;
	border: 1px solid var(--royalBlue);
	text-align: center;
	cursor: pointer;
}

.HDCTadItemA {
	height: 60px;
}

.HDCTadItemB {
	height: 100px;
}

.callItem {
	margin: .25em 0;
	box-sizing: border-box;
	display:flex;
	flex-direction:row;
	justify-content: space-between;
}

.callItem.active {
	flex-direction: column;
}

.aboutDetail {
	width:97%;
	background-color: var(--white);
	border-radius: 10px;
	margin:0 auto;
	padding:0 1em 0;
	box-sizing: border-box;
	transition: .5s;
	z-index: 0;
	position:relative;
}

.callDetail {
	width:97%;
	background-color: var(--white);
	border-radius: 10px;
	hei-ght:3.4em;
	display:none;
	visibility: hidden;
	margin:0 auto;
	padding:0 1em 0;
	box-sizing: border-box;
	transition: .5s;
	z-index: 0;
	position:relative;
}

.callItem.active .callDetail {	
	margin: -2em auto -2em;
	height:auto;
	padding:0 0 4em;
	display:block;
	visibility: visible;
}

.noResults {
	width:100%;
	background-color: var(--orange);
	font-weight: 600;
	color: var(--white);
	text-align: center;
	padding:.5em 1em;
	border-radius: 10px;
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
	position: sticky;
	top: -6px;
	z-index: 20;
	margin:.5em 0;
	box-sizing: border-box;
}

.callDate {
	width:100%;
	background-color: var(--darkBlue);
	font-weight: 600;
	color: var(--white);
	text-align: center;
	padding:.5em 0;
	border-radius: 10px;
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
	position: sticky;
	top: -6px;
	z-index: 20;
	margin:.5em 0;
	box-sizing: border-box;
}

.pageHeading {
	width:100%;
	background-color: var(--offWhite);
	font-weight: 600;
	color: var(--darkBlue);
	text-align: center;
	padding:.5em 0;
	border:1px solid var(--darkBlue);
	border-radius: 10px;
	position:relative;
	z-index: 10;
	margin:.5em 0;
	box-sizing: border-box;
}

.callStation {
	width:100%;
	margin:.5em -1em 1.5em;
	color:var(--RoyalBlue);
	text-align: right;
	font-size:70%;
}

.callStation a {
	font-weight:normal;
}


.callTime {
	border-radius: 10px 0px 0px 10px;
	background-color: var(--lightBlue);
	font-weight: 600;
	color: var(--black);
	text-align: right;
	padding:.5em .5em .5em .1em;
	width: 26%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	z-index: 2;
}

.callType {
	border-radius: 0px 10px 10px 0px;
	background-color: var(--lightBlue);
	font-weight: 600;
	color: var(--black);
	text-align: left;
	padding:.5em .6em .5em 1em;
	width: 73.5%;
	box-sizing: border-box;
	display:flex;
	align-self: stretch;
	justify-content: flex-end;
	align-items: center;
	z-index:2;
}

.chp {
	border-left: .4em solid var(--chpTan);
}


.callTypeText {
	align-items: center;
	text-align: left;
	flex-grow:100;
}

.callItem.active .callType {
	align-self: flex-end;
}

.callMapIcon, .callReportIcon {
	flex-grow: 1;
	justify-content: flex-end;
	display: flex;
}

.callDistance {
	font-weight: 400;
	color: var(--royalBlue);
	flex-grow:1;
	padding:0 .2em;
}

.mapIcon, .reportIcon {
	width:21px;
	height:auto;
}

.mapIconSVG {
	fill:#F05728;
}

.typeInfoIconBox, .dispoInfoIconBox, .locationInfoIconBox, .updatedInfoIconBox, .radiusInfoIconBox, .dateInfoIconBox, .agencyInfoIconBox, .callTypeInfoIconBox, .callDispoInfoIconBox, .origTypeInfoIconBox, .alertLevelInfoIconBox, .addressInfoIconBox {
	display:inline-block;
	vertical-align:middle;
	margin-left:.5em;
	margin-right:-.7em;
	cursor: pointer;
}

.shareIconBox {
	display:inline-block;
	vertical-align:middle;
	margin-left:0em;
	margin-right:1em;
	cursor: pointer;
}

.igIconBox {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0em;
    margin-right: 1em;
    cursor: pointer;
}

.updatedFlag {
	color: var(--darkBlue);
}

.infoIcon {
	width:18px;
	height:18px;
}

.infoIconSVG {
	fill: var(--lightBlue);
}

.infoIcon:hover .infoIconSVG {
	fill: var(--royalBlue);
}

.mapIconSVG.warn {
	fill: var(--orange);
}

.mapIconSVG {
	fill: var(--royalBlue);
}

.resetIcon, .gearIcon, .reloadIcon {
	fill: var(--darkBlue);
}

.gearIconDot {
	fill: var(--orange);
}

.labelDot {
	color: var(--orange);
}

.iconInfo {
	width:1em;
	height:1em;
	display:inline-block;
}

#resetButton:hover .resetIcon, #filterButton:hover .gearIcon, #reloadButton:hover .reloadIcon {
	fill: var(--lightBlue);
}

.reloadIconSVG.spin .reloadIcon {
	fill: var(--lightBlue);
}
 
.label {
	display:inline-block;
	width:25%;
	text-align: right;
	padding-right:1em;
	color: var(--darkBlue);
	font-weight: 600;
	font-size:95%;
	padding: .2em .5em .2em 0;
	vertical-align: top;
}

#filter .label {
	padding: 0em .5em 0em 0;
}

.detail {
	display:inline-block;
	width:69%;
	text-align: left;
	color: var(--black);
	font-weight: 400;
	font-size:95%;
	padding: .2em 0 .2em .5em;
	vertical-align: middle;
}

.callTypeInfo, .origCallTypeInfo, .dispoInfo, .updateInfo, .locationInfo, .radiusInfo, .dateInfo, .agencyInfo, .callTypeSetInfo, .callDispoSetInfo, .updatedInfo, .alertLevelInfo, #locationDialogue, .mapLinkButtons {
	display:none;
	visibility:hidden;
	width:300px;
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
	background-color: var(--white);
	border-radius: 10px;
	height:0px;
	padding:1em;
	box-sizing: border-box;
	transition: .5s;
	overflow: hidden;
	position:fixed;
	left:50%;
	top:50%;
	margin-left:-150px;
	margin-top:-150px;
	z-index:30;
	font-size:15px;
	color: var(--darkBlue);
}

.mapLinkButtons {
	position:absolute;
	margin-top:-50px;
	margin-left:-125px;
	width:250px;
}

.origCallTypeInfo {
	margin-top:-215px;
}

.locationInfo {
	margin-top:-225px;
}

.radiusInfo {
	margin-top:-218px;
}

.dateInfo {
	margin-top:-146px;
}

.agencyInfo {
	margin-top:-234px;
}

.callTypeSetInfo, .callDispoSetInfo {
	margin-top:-251px;
}

.alertLevelInfo {
	margin-top:-276px;
}


#locationDialogue {
	margin-top:-174px;
	text-align: center;
}

#customAddress {
	width:100%;
	padding:.2em 1em;
	border-radius:10px;
	border:1px solid var(--darkBlue);
	color: var(--darkBlue);
	background-color: var(--white);
	text-align:left;
	font-size:100%;
	box-sizing: border-box;
}

.callTypeInfo.active, .origCallTypeInfo.active, .dispoInfo.active, .updateInfo.active, .updatedInfo.active, .locationInfo.active, .radiusInfo.active, .dateInfo.active, .agencyInfo.active, .callTypeSetInfo.active, .callDispoSetInfo.active, .alertLevelInfo.active, #locationDialogue.active, .mapLinkButtons.active {
	display:block;
	visibility: visible;
	height:auto;
}

.warn {
	color: var(--orange);
	font-weight:600;
}

#pagination {
	text-align: center;
	padding-top:1em;
}

.pagination {
  display: inline-block;
  font-size:80%;
}

.pagination a {
  color: var(--lightBlue);
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid var(--lightBlue);
  margin-right:-1px;
  cursor: pointer;
}

.pagination a.active {
  background-color: var(--darkBlue);
  color: var(--white);
  border: 1px solid var(--darkBlue);
}

.pagination a:hover:not(.active) {background-color: var(--white);}

.pagination a:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.pagination a:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.pagination a#refreshButton {
	border: 1px solid var(--darkBlue);
	color: var(--darkBlue);
}

a#contactButton {
	border: 1px solid var(--darkBlue);
	color: var(--darkBlue);
}

#alertLevel {
	text-align: center;
	display: inline-block;
 	font-size:80%;
	vertical-align: middle;
	margin-left:-1px;
	line-height: 2em;
}

#alertLevel a {
  color: var(--lightBlue);
  float: left;
  text-decoration: none;
  border: 1px solid var(--darkBlue);
  background-color: var(--darkBlue);
  margin-right:-1px;
  cursor: pointer;
  padding:0;
  width:34px;
  font-weight: 400;
}

#alertLevel a.active {
  background-color: var(--offWhite);
  color: var(--darkBlue);
  border: 1px solid var(--darkBlue);

}

#alertLevel a:hover:not(.active) {background-color: var(--white);}

#alertLevel a:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

#alertLevel a:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.adPageImage {
	float:left;
	width:97%;
	height:auto;
	margin:auto;
	padding:0 1em 1em 0;
}

.right {
	float:right;
}

.clear {
	clear: left;
}


@media (min-width: 576px) {
/*Small devices (landscape phones, 576px and up)*/
	#filters.active {
		padding:1em 1em 1em;
	}
	.adItem {
		height: 90px;
	}
	.HDCTadItemA {
		height: 90px;
	}
	.HDCTadItemB {
		height: 160px;
	}
	.adPageImage {
		width:50%;
		max-width:250px;
	}
	.sponsorLogo h5 {
		font-size:65%; 
	}
}

@media (min-width: 768px) {
	
	
}

@media (min-width: 992px) {
/*Large devices (desktops, 992px and up)*/

	.nav {
		flex-wrap: nowrap;
	}

	.navLogo {
		margin:20px 20px 0px;
		height:55px;
	}
	
	.menuIconHolder {
		display:none;
		visibility: hidden;
	}
	
	.menuIcon {
		visibility: hidden;
		display: none;
	}
	
	#navMenu {
		flex-grow: 1;
		display:flex;
		visibility: visible;
		justify-content: flex-end;
		align-items: flex-end;
		width:auto;
		flex-basis:auto;
	}
	
	#navMenu.active {
		flex-direction: row;
		justify-content: flex-end;
		width:auto;
	}

	#navMenu a {
		margin:0;
		width:auto;
		text-align: center;
		padding:5px 15px;
		border-top: none;
		border-bottom: 1px var(--white) solid;
	}
	
	#navMenu a:hover {
		border-bottom: 1px var(--lightBlue) solid;
	}
	
	#navMenu a.selected {
		border-bottom: 1px var(--darkBlue) solid;
	}
	.adPageImage {
		width:35%;
	}
	.sponsorLogo h5 {
		font-size:100%; 
	}

}


@media (min-width: 1200px) {
/*Extra large devices (large desktops, 1200px and up)*/
	.adItem {
		height: auto;
	}
	
	.HDCTadItemA {
		height: 100px;
	}
	
	.HDCTadItemB {
		height: 200px;
	}
	
	.sponsorLogo h5 {
		font-size:120%; 
	}

}