html, body {
	font-family: Tahoma;
	font-size: 0.9em;
	height: 100%;
}
.splashbackground {
	width: 100%;
	height: 100%;
	background-color: black;
	position: absolute;
	opacity: 0.5;
	z-index: 1;
}
#splashscreen {
	min-width: 40%;
	max-width: 70%;
	min-height: 60%;
	max-height: 90%;
	background-color: white;
	position: relative;
	top: 10%;
	z-index: 2;
	padding: 5vh;
	border: solid 10px white;
	box-shadow: inset 0 0 27px 5px;
	text-align: center;
}
#splash-content {
	padding: 5vh;
}
#helpVideo {
	width: 100%;
	height: 100%;
	border: 5px solid white;
}
#videoDiv {
	height: 70%;
	width: 60%;
	left: 20%;
	top: 20%;
	z-index: 4;
	background-color: black;
	position: absolute;
}
#videoClose {
	position:absolute;
	top:10vh;
	right:10vw;
}
#splashPropertyInfo {
	font-size: 1.4em;
	width: 15vw;
	height: 7vh;
	border: 2px solid #3c3c3c;
	box-shadow:0 0 5px;
	background-color:rgb(73,118,185);
}
#disclaimer {
	font-size:14px;
	text-align:left;
}
#viewDiv {
	height: 100%;
	width: 100%;
}
#spinner_sm {
	border: 10px solid white;
	border-top: 10px solid #4976B9;
	border-radius: 70%;
	width: 50px;
	height: 50px;
	animation: spin 1s linear infinite;
	top: 20%;
	left: 45%;
	display: none;
	position: absolute;
	opacity: 0.8;
}
#spinner_lg {
	border: 20px solid white;
	border-top: 20px solid #4976B9;
	border-radius: 70%;
	width: 100px;
	height: 100px;
	animation: spin 1s linear infinite;
	top: 20%;
	left: 45%;
	display: none;
	position: absolute;
	opacity: 0.8;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* These next 2 say they're for widget buttons, but all buttons on the page except on popup use ESRI widget buttons even if they aren't a widget */
.esri-widget--button {
	background-color: rgb(37,61,122);
	margin: 0.7vh;
	color: white;
	width: 40px;
	height: 40px;
	border-radius: 20px;
}
.esri-widget--button:hover {
	background-color: rgb(73,118,185);
}
/* ------------------ */

/* ---- header and items in header ---- */
@media only screen and (max-device-width: 1400px) { /* laptops */
	@media only screen and (max-device-height: 1020px) { /* smaller laptops */
		#header {
			left: 0px;
			width: 69vw;
		}
		#menuButton {
			left: 5%;
		}
		#nomapButton {
			left: 15%;
		}
		#logo {
			margin-left:45%;
		}
		#title{
			left: 70%;
		}
		#searchDiv {
			left: 69vw;
			width: 31vw;
		}
	}
	@media only screen and (min-device-height: 1021px) { /* larger laptops and small desktops */
		#header {
			left: 0px;
			width: 65vw;
		}
		#menuButton {
			left: 2vw;
		}
		#nomapButton {
			left: 10vw;
		}
		#logo {
			margin-left:43%;
		}
		#title{
			left: 70%;
		}
		#searchDiv {
			left: 65vw;
			width: 35vw;
			padding-right: 1vw;
		}
	}
}
@media only screen and (min-device-width: 1401px) { /* desktops */
	@media only screen and (max-device-height: 1000px) { /* smaller desktops and some larger laptops */
		#header {
			left: 0px;
			width: 70vw;
		}
		#menuButton {
			left: 7%;
		}
		#nomapButton {
			left: 17%;
		}
		#logo {
			margin-left:45%;
		}
		#title{
			left: 65%;
		}
		#searchDiv {
			left: 70vw;
			width: 30vw;
			padding-right: 1vw;
		}
		.esri-search__submit-button {
			margin-right: 25px !important;
		}
	}
	@media only screen and (min-device-height: 1001px) { /* larger desktops */
		#header {
			left: 0px;
			width: 70vw;
		}
		#menuButton {
			left: 5%;
		}
		#nomapButton {
			left: 13%;
		}
		#logo {
			margin-left:50%;
		}
		#title{
			left: 68%;
		}
		#searchDiv {
			left: 70vw;
			width: 30vw;
			padding-right: 7vw;
		}
		.esri-search__submit-button {
			margin-right: 25px !important;
		}
	}
}
#header {
	top: 0;
	height: 55px;
	position: absolute;
	background-color: rgb(26,43,86);
	padding: 5px;
}
#logo {
	height:50px;
	width:199px;
	cursor: pointer;	
}
#title{
	font-size:xx-large;
	color:white;
	top: 2%;
	position: absolute;
}
#nomapButton {
	top: 2%;
	width: 150px;
	position: absolute;
	border: 2px solid #3c3c3c;
	box-shadow: 0 0 5px;
	background-color: rgb(73,118,185);
	font-weight: bold;
}
#nomapButton:hover {
	background-color: rgb(28,92,255);
	color: white;
}
#menuButton {
	top: 2%;
	width: 80px;
	position: absolute;
	border: 2px solid #3c3c3c;
	box-shadow: 0 0 5px;
	background-color: rgb(73,118,185);
	font-weight: bold;
}
#menuButton:hover {
	background-color: rgb(28,92,255);
	color: white;
}
#dropdown-content {
	display: none;
	left: 4%;
	top: 50px;
	position: absolute;
	background-color: rgb(73,118,185);
	color: white;
	width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}
#dropdown-content a {
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}
#dropdown-content a:hover {
	background-color: #274D98;
}
#transition {
	height: 15px;
	top: 55px;
	width: 100%;
	position: absolute;
	background-image: linear-gradient(to top, rgba(26,43,86,0), rgba(26,43,86,0.9));
}
/* --------------------------------- */

/* 
/////////////////// STYLE FOR WIDGETS /////////////////////
*/
/* Style for zoom widget */
.esri-ui-top-left.esri-ui-corner {
	top: 70px;
}
.esri-component.esri-zoom.esri-widget {
	box-shadow: 0 0 5px;
}
#resetButton {
	top: 200px;
	left: 10px;
	position: absolute;
	border: 2px solid #3c3c3c;
	box-shadow: 0 0 5px;
	width: 50px;
	height: 50px;
	border-radius: 25px;
}
/* Style for search widget
----------------------------------- */
#searchDiv {
	background-color: rgb(26,43,86);
	height: 55px;
	position: absolute;
}
.esri-input.esri-search__input {
	font-weight: bold;
	-webkit-text-fill-color: red;
	width: 270px;
	height: 40px;
	right: 50px;
	border: 2px solid blue;
	margin-top: 5px;
}
#searchDiv-source-menu-button, .esri-search__submit-button, .esri-search__clear-button {
	background-color: white;
	color: #274D98;
}

/* Style for other widgets in top-right container, incl. styles used by multiple widgets
-------------------------------------------------------------------------------------- */
@media only screen and (max-device-width: 2500px) {
	#widgetsDiv {
		top: 70px;
		right: 0;
		height: 235px;
		width: 65px;
		padding-left: 2px;
		position: absolute;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.75), 0 0 5px rgba(0, 0, 0, 0.75);
	}
}
@media only screen and (min-device-width: 2500px) {
	#widgetsDiv {
		top: 70px;
		right: 0;
		height: 250px;
		width: 70px;
		padding-left: 2px;
		position: absolute;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.75), 0 0 5px rgba(0, 0, 0, 0.75);
	}
}
.esri-expand__panel .esri-widget--button {
	width: 50px;
	height: 50px;
	border: 2px solid #3c3c3c;
	box-shadow: 0 0 5px;
}
/* Style for basemap gallery widget
----------------------------------- */
.esri-basemap-gallery__item{
	font-weight: bold;
	font-size: medium;
	background-color: rgb(26,43,86);
	color: white;
	box-shadow: 0 0 5px;
}
.esri-basemap-gallery.esri-widget.esri-widget--panel-height-only {
	box-shadow: 0 0 5px;
	border: 2px solid #3c3c3c;
	background-color: rgb(26,43,86);
}
.esri-icon-basemap {
	font-size: 26px;
}
.esri-basemap-gallery__item-title {
	color: white;
}
.esri-basemap-gallery__item--selected{
	background-color: lightGray;
}
.esri-basemap-gallery__item--selected .esri-basemap-gallery__item-title {
	color: black;
	font-weight: bold;
}
/* Style for layer list widget
----------------------------------- */
.esri-layer-list__item-container {
	font-weight: bold;
	font-size: medium;
	background-color: rgb(26,43,86);
	color: white;
	box-shadow: 0 0 5px;
}
.esri-icon-layers {
	font-size: 26px;
}
.esri-layer-list__status-indicator {
	height: 18px;
	width: 18px;
}
.esri-layer-list.esri-widget.esri-widget--panel {
	box-shadow: 0 0 5px;
	border: 2px solid #3c3c3c;
	background-color: white;
}
.esri-layer-list__item--invisible-at-scale .esri-layer-list__item-title {
	color: #929CAC;
}
.esri-icon-non-visible::before {
	content: "\e610";
	margin-right: 20px;
	font-size: 22px;
	border: 2px solid white;
}
.esri-icon-visible::before {
	content: "\e605";
	color: yellow;
	border: 2px solid white;
	font-weight: bold;
	margin-right: 20px;
	font-size: 22px;
}
.esri-layer-list__child-toggle-icon--closed.esri-icon-right-triangle-arrow, .esri-layer-list__child-toggle-icon--opened.esri-icon-down-arrow {
	color: yellow;
	font-weight: bold;
}
/* Style for measure widget
----------------------------------- */
#measureDiv {
	box-shadow: 0 0 5px;
}
.esri-icon-measure {
	font-size: 26px;
}
#measureDiv {
	background: white;
	padding: 10px;
	height: 100px;
	width: 70px;
}
#distanceButton.action-button.esri-icon-measure-line.active, #areaButton.action-button.esri-icon-measure-area.active {
	background-color: #0079c1;
}
.esri-icon-measure-line, .esri-icon-measure-area {
	font-size: 26px;
}
.esri-distance-measurement-2d__container, .esri-area-measurement-2d__container {
	color: black;
	font-weight: bold;
	background-color: white;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.75), 0 0 5px rgba(0, 0, 0, 0.75);
	border: 3px solid #0079c1;
}
.esri-component.esri-distance-measurement-2d.esri-widget.esri-widget--panel, .esri-component.esri-area-measurement-2d.esri-widget.esri-widget--panel {
	top: 60vh;
	right: 1vw;
}
#distanceButton, #areaButton {
	color: white;
	background-color: rgb(26,43,86);
	width: 50px;
	height: 40px;
}
/* Style for export/print widget
----------------------------------- */
.esri-icon-printer {
	font-size: 26px;
}
.esri-print__export-button.esri-button {
	box-shadow: 0 0 10px #808080 inset, 0 0 10px #808080 inset;
	background-color: #95A2D1;
}
.esri-print__header-title {
	color: yellow;
}
.esri-print.esri-widget.esri-widget--panel {
	box-shadow: 0 0 5px;
	color: white;
	background-color: rgb(26,43,86);
	border: 2px solid #3c3c3c;
}
.esri-expand.content {
	box-shadow: 0 0 5px;
	border: 2px solid #3c3c3c;
}
.esri-print.esri-widget.esri-widget--panel {
	box-shadow: 0 0 5px;
}
.esri-print__export-panel-container {
	background-color: white;
	border: 1px solid black;
	text-align: center;
}
.esri-print__layout-tab {
	color: white;
	background-color: #95A2D1;
	font-weight: bold;
	border: 1px solid black;
	box-shadow: 0 0 5px #808080 inset, 0 0 5px #808080 inset;
}
.esri-select, .esri-print__input-text.esri-input, .esri-print__advanced-options-button-title {
	color: black;
	font-weight: bold;
}
.esri-print__exported-file-link-title {
	color: red;
	font-weight: bold;
	font-size: 16px;
}
.esri-print__advanced-options-section {
	color: black;
}
.esri-print__exported-file {
	padding-left: 55px;
}
/* 
//////////////// END OF  STYLE FOR WIDGETS //////////////////
*/

/* 
///////////////////// STYLE FOR POPUP /////////////////////
*/
.esri-popup__main-container {
	position: fixed;
	left: 10vw !important;
	top: 12vh !important;
	min-width: 20%;
	max-width: 40%;
	max-height: 420px;
	min-height: 390px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.75), 0 0 5px rgba(0, 0, 0, 0.75);
}
#btnGetInfo {
	background-color: rgb(37,61,122);
	border-radius: 5px;
	min-width: 50%;
	max-width: 80%;
	color: white;
	left: 20%;
	font-weight: bold;
	padding: 2%;
	margin: 2%;
	bottom: 2%;
	text-align: center;
}
#btnGetInfo:hover{
	background-color: rgb(73,118,185);
}
/* Hide some unneccessary items for a cleaner-looking popup */
.esri-popup__header-container {
	display: none;
}
.esri-popup__action-text {
	display: none;
}
.esri-popup__icon--dock-icon {
	display: none;
}
.esri-popup__inline-actions-container {
	display: none;
}
/* end of hiding section */
/* 
//////////////// END OF  STYLE FOR POPUP //////////////////
*/

/* 
////////////// STYLE FOR INFO DIV AT BOTTOM //////////////
*/
#infoDiv {
	margin: auto;
	left: 1vw;
	height: 55vh;
	width: 98vw;
	position: fixed !important;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.75), 0 0 5px rgba(0, 0, 0, 0.75);
	top: auto !important;
	bottom: 0 !important;
	background-color: white;
	z-index: 1;
	overflow: vertical;
	display: none;
	resize: vertical;
}
#infoDivHeader {
	background-color: #95A2D1;
	float: left;
	width: 100%;
	height: 20px;
	border: 1px solid black;
	cursor: ns-resize;
}
#infoMinMaxButton {
	background-image: linear-gradient(green, white, green);
	border-radius: 5px;
	cursor: pointer;
	width: 3%;
	float: right;
	height: 20px;
	font-size: 10px;
	vertical-align: 0;
}
#infoCloseButton {
	background-image: linear-gradient(red, pink, red);
	border-radius: 5px;
	cursor: pointer;
	width: 3%;
	float: right;
	height: 20px;
	font-size: 10px;
	vertical-align: 0;
}
#buttonscontainer {
	width: 99%;
	margin-left: 4px;
}
.nav-link {
	background-color: rgb(37,61,122);
	color: white;
	height: 55px;
	cursor: pointer;
	box-shadow: black 4px 3px 7px -3px;
	border: 2px solid white;
	font-weight: bold;
	font-size: 1.1em;
}
.nav-link:hover {
	background-color: rgb(73,118,185);
	color: white;
}
.nav-link:active {
	background-color: rgb(28,92,255);
	color: white;
}
#basicvalueinfo, #ownership, #econdevel, #photos, #tools, #electedofficials, #faq {
	width: 98%;
	height: 44vh;
	overflow: auto;
	background-color: #DCE1F0;
	box-shadow: black 8px 6px 13px -6px;
	margin: 14px;
	resize: vertical;
}
#basic, #value, .photo {
	background-color: white;
	height: 92%;
	margin: 1%;
	padding: 1%;
	box-shadow: black 8px 6px 13px -6px;
	font-size: 1.1em;
}
#basic {
	margin-left: 3%;
}
#btnGetDetails {
	background-color: rgb(37,61,122);
	border-radius: 5px;
	width: 100%;
	color: white;
	font-weight: bold;
	padding: 2%;
	padding-left: 10%;
	margin: 2%;
	bottom: 2%;
	text-align: center;
}
#btnGetDetails:hover{
	background-color: rgb(73,118,185);
}
.photo {
	margin: 1%;
	padding: 1%;
	box-shadow: black 8px 6px 13px -6px;
	height:80%;
	cursor: pointer;
}
#firstowner, #secondowner, #otherowners, #taxes {
	background-color: white;
	margin: 2%;
	padding:2%;
	box-shadow: black 8px 6px 13px -6px;
	font-size: 1.1em;
}
#detailsPane, #divYear0, #divYear1, #divYear2, #divYear3, #divYear4, #divYear5 {
	background-color: white;
	height: 96%;
	margin: 1%;
	box-shadow: black 8px 6px 13px -6px;
	overflow: auto;
	padding: 1%;
	font-size: 1.1em;
}
#divYear0, #divYear1, #divYear2, #divYear3, #divYear4, #divYear5 {
	margin-bottom: 1%;
	margin-left: 5%;
}
#lblYear0, #lblYear1, #lblYear2, #lblYear3, #lblYear4, #lblYear5 {
	font-weight: bold;
	font-size: medium;
	margin-left: 20%;
	margin-bottom: 10px;
	border: 1px solid gray;
	text-align: center;
}
#TIFs, #CommImpDist, #TDD, #local, #state, #federal {
	background-color: white;
	height: 35vh;
	margin: 1%;
	padding: 2%;
	box-shadow: black 8px 6px 13px -6px;
	left: 1%;
	font-size: 1.1em;
	overflow: auto;
}
#paytaxes, #correctinfo, #print, #export, #apppeal {
	background-color: white;
	margin: 1%;
	box-shadow: black 8px 6px 13px -6px;
	overflow: auto;
	padding: 2%;
	font-size: 1.1em;
}
.tools-title {
	height: 20%;
	border-bottom: 1px solid gray;
	margin-bottom: 5%;
	font-size: 1vw;
}
.tools-content {
	height: 65%;
	overflow: auto;
}
.tools-buttons {
	height: 10%;
	text-align:center;
}
#printTable {
	margin-top:5%;
	margin-bottom:20%;
}
.tool-button {
	background-color: #4976B9;
	color: white;
	width: 150px;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid black;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 
		0 1px 5px 0 rgba(0, 0, 0, 0.12), 
		0 3px 1px -2px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	&:active {
		box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
		0 3px 14px 2px rgba(0, 0, 0, 0.12),
		0 5px 5px -3px rgba(0, 0, 0, 0.4);
		}
}
.faq-cols {
	background-color:white;
	margin:1%;
	padding:1%;
	box-shadow: black 8px 6px 13px -6px;
}
/* 
/////////// END OF STYLE FOR INFO DIV AT BOTTOM ///////////
*/

/*---------------------------------------------------
	Style for the modal photos - this can be
	the same on both regular and mobile
---------------------------------------------------*/
#theModal {
	display: none;
	position: fixed;
	z-index: 10;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.9);
}
#modalPhotos {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}
#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}
#modalPhotos, #caption {
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
	from {
		-webkit-transform: scale(0)
	}

	to {
		-webkit-transform: scale(1)
	}
}
@keyframes zoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}
#modalClose {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}
#modalClose:hover, #modalClose:focus {
		color: #bbb;
		text-decoration: none;
		cursor: pointer;
	}
/*---------------------------------------------------
	End of modal photos style
---------------------------------------------------*/