html, body {
	font-family: Tahoma;
	height: 100%;
	font-size: 1.3em;
}
#viewDiv {
	height: 100%;
	width: 100%;
	background-color: white;
}
#spinner_sm {
	border: 20px solid gray;
	border-top: 20px solid blue;
	border-radius: 70%;
	width: 100px;
	height: 100px;
	animation: spin 1s linear infinite;
	top: 20%;
	left: 45%;
	display: none;
	position: absolute;
	opacity: 0.8;
}
#spinner_lg {
	border: 30px solid blue;
	border-top: 30px solid black;
	border-radius: 70%;
	width: 140px;
	height: 140px;
	animation: spin 1s linear infinite;
	top: 20%;
	left: 45%;
	display: none;
	position: absolute;
	opacity: 0.6;
}
@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);
	color: white;
	width: 90px;
	height: 90px;
	border-radius: 45px;
	font-size: 1.2em;
}
.esri-widget--button:hover { /* for some reason you need to do this to keep the widget bar button colors blue after selecting it */
	background-color: rgb(37,61,122);
	color: white;
}
/* ------------------ */

/* ---- splash screen ---- */
.splashbackground {
	width: 100%;
	height: 100%;
	background-color: black;
	position: absolute;
	opacity: 0.5;
	z-index: 1;
}
#splashscreen {
	min-width: 80%;
	max-width: 90%;
	min-height: 85%;
	max-height: 95%;
	background-color: white;
	position: relative;
	top: 5%;
	z-index: 2;
	padding: 5vh;
	border: solid 10px white;
	box-shadow: inset 0 0 27px 5px;
	text-align: center;
}
#splash-content {
	font-size: 24px;
	margin-top: 3vh;
	margin-bottom: 3vh;
}
#btnAgree {
	width: 30vw;
	height: 7vh;
	font-size: 2em;
}
#btnHelp, #btnVideo {
	width: 25vw;
	height: 5vh;
	font-size: 1.4em;
	margin: 5px;
}
#splashPropertyInfo {
	width: 35vw;
	height: 8vh;
	font-size: 1.4em;
	border: 2px solid #3c3c3c;
	box-shadow:0 0 5px;
	background-color:rgb(73,118,185);
}
#disclaimer {
	font-size:24px;
}
/* --- end of splash screen --- */

/* ---- header and items in header plus reset button ---- */
#header {
	width: 100vw;
	left: 10px;
	height: 120px;
	bottom: 5px;
	position: absolute;
	background-color: rgb(37,61,122);
	padding: 3px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.75), 0 0 5px rgba(0, 0, 0, 0.75);
}
#logo {
	width: 40%;
	margin: 1%;
}
#title{
	display: none;
}
#nomapButton {
	top: 10%;
	left: 500px !important;
	width: 290px !important;
	position: absolute;
	border: 2px solid #3c3c3c;
	box-shadow: 0 0 5px;
	background-color: #4976B9;
	font-size: x-large;
}
#menuButton {
	top: 10% !important;
	left: 83% !important;
	width: 150px !important;
	position: absolute;
	border: 2px solid #3c3c3c;
	box-shadow: 0 0 5px;
	background-color: #4976B9;
	font-size: x-large;
}
#dropdown-content {
	display: none;
	left: 80%;
	bottom: 95%;
	position: absolute;
	background-color: #4976B9;
	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
}
#resetButton {
	top: 14vh !important;
	left: 15px !important;
	position: absolute;
	border: 2px solid #3c3c3c;
	box-shadow: 0 0 5px;
	font-size: 24pt;
	width: 90px !important;
	height: 90px !important;
	border-radius: 45px !important;
}
.esri-icon-refresh {
	font-size: 48px !important;
}
/* 
/////////////////// STYLE FOR WIDGETS /////////////////////
*/
/* Style for zoom widget */
.esri-component.esri-zoom.esri-widget {
	box-shadow: 0 0 5px;
	width: 100px;
	height: 205px;
	top: 10px;
	padding-left: 5px;
	padding-top: 5px;
}
.esri-interactive {
	margin-top: 5px;
}
.esri-home{
	margin-left: 5px;
	font-size: 42px;
}
.esri-icon-home, .esri-icon-minus, .esri-icon-plus {
	font-size: 32px;
}
/* Style for search widget
----------------------------------- */
#searchDiv {
	top: 10px;
	right: 15px;
	height: 110px;
	width: 780px;
	position: absolute;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.75), 0 0 5px rgba(0, 0, 0, 0.75);
	padding-left: 5px;
	padding-right: 5px;
}
#searchDiv .esri-widget--button {
	margin: 3px;
}
.esri-icon-search, .esri-icon-down-arrow, .esri-icon-close {
	font-size: 32px;
}
.esri-input.esri-search__input {
	position: absolute;
	font-size: 32px;
	font-weight: bold;
	-webkit-text-fill-color: red;
	width: 470px;
	height: 80px;
	left: 100px;
	border: 2px solid blue;
	margin-top: 5px;
}
.esri-menu__list-item {
	font-size: 22pt;
}
/* Style for other widgets in top-right container, incl. styles used by multiple widgets
-------------------------------------------------------------------------------------- */
#widgetsDiv {
	top: 120px;
	height: 580px;
	width: 140px;
	position: absolute;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.75), 0 0 5px rgba(0, 0, 0, 0.75);
}
#widgetsDiv .esri-widget--button {
	margin-left: 12px !important;
	margin-top: 20px !important;
	width: 120px;
	height: 120px;
	border-radius: 60px;
}

/* Style for basemap gallery widget
----------------------------------- */
.esri-basemap-gallery.esri-widget.esri-widget--panel-height-only {
	border-radius: 10px;
	box-shadow: 0 0 5px;
	border: 2px solid #3c3c3c;
	background-color: rgb(37,61,122);
	width: 420px;
}
.esri-basemap-gallery__item-title {
	color: white;
	font-size: 16pt;
	height: 120px;
}
.esri-basemap-gallery__item {
	font-weight: bold;
	background-color: rgb(37,61,122);
	color: white;
	border-radius: 10px;
	box-shadow: 0 0 5px;
	height: 150px;
	width: 420px;
}
.esri-basemap-gallery__item-thumbnail {
	height: 120px;
	width: 120px;	
}
/* Style for layer list widget
----------------------------------- */
.esri-layer-list__status-indicator {
	height: 18px;
	width: 18px;
}
.esri-collapse__icon::before{
	font-size: 42px;
}
.esri-layer-list.esri-widget.esri-widget--panel {
	border-radius: 10px;
	box-shadow: 0 0 5px;
	border: 2px solid #3c3c3c;
	background-color: white;
	font-size: 28pt;
	width: 570px;
}
.esri-layer-list__item-container {
	font-weight: bold;
	background-color: rgb(37,61,122);
	color: white;
	border-radius: 10px;
	box-shadow: 0 0 5px;
}
.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 {
	border-radius: 10px;
	box-shadow: 0 0 5px;
	background: white;
	padding: 20px;
	height: 200px;
	width: 140px;
}
#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: 42px;
}
.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;
}
#distanceButton, #areaButton {
	color: white;
	background-color: rgb(37,61,122);
	width: 100px;
	height: 80px;
}
/* Style for export/print widget
----------------------------------- */
.esri-print__header-title {
	font-size: 28pt;
	font-weight: bold;
}
.esri-print__export-button.esri-button {
	box-shadow: 0 0 10px #808080 inset, 0 0 10px #808080 inset;
	background-color: #95A2D1;
}
.esri-print.esri-widget.esri-widget--panel {
	border-radius: 10px;
	box-shadow: 0 0 5px;
	color: white;
	background-color: rgb(37,61,122);
	border: 2px solid #3c3c3c;
	width: 700px;
	font-size: 24pt;
}
.esri-expand.content esri-expand.content {
	border-radius: 10px;
	box-shadow: 0 0 5px;
	border: 2px solid #3c3c3c;
}
.esri-print.esri-widget.esri-widget--panel {
	border-radius: 10px;
	box-shadow: 0 0 5px;
	height: auto;
}
.esri-print__export-panel-container {
	border-radius: 5px;
	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;
	font-size: 24pt;
	height: 50px;
	margin-bottom: 10px;
}
.esri-print__export-button, .esri-widget__heading.esri-print__export-title {
	font-size: 24pt;
}
.esri-print__exported-file-link-title {
	color: red;
	font-weight: bold;
	font-size: 24pt;
}
/* advanced options would probably never be used on mobile and is almost impossible to style well, so get rid of it */
.esri-print__panel-container.esri-print__advanced-options-section {
	display: none;
}
.esri-print__exported-file {
	padding-left: 55px;
	font-size: 12pt;
}
/* 
//////////////// END OF  STYLE FOR WIDGETS //////////////////
*/

/* 
///////////////////// STYLE FOR POPUP /////////////////////
*/
.esri-popup__main-container {
	position: fixed;
	left: 15vw !important;
	top: 8vh !important;
	min-width: 65%;
	max-width: 70%;
	min-height: 770px;
	max-height: 820px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.75), 0 0 5px rgba(0, 0, 0, 0.75);
	padding: 10px;
}
#popupDiv {
	font-size: 20pt !important;
}
#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;
}
/* 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: 70vh;
	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;
	border-radius: 10px;
	overflow: vertical;
	display: none;
	resize: vertical;
}
#infoDivHeader {
	background-color: #95A2D1;
	float: left;
	width: 100%;
	height: 40px;
	border-radius: 5px;
	border: 1px solid black;
}
#infoMinMaxButton {
	background-image: linear-gradient(green, white, green);
	border-radius: 5px;
	cursor: pointer;
	width: 8%;
	float: right;
	height: 40px;
	font-size: 18px;
	vertical-align: 0;
}
#infoCloseButton {
	background-image: linear-gradient(red, pink, red);
	border-radius: 5px;
	cursor: pointer;
	width: 8%;
	float: right;
	height: 40px;
	font-size: 18px;
	vertical-align: 0;
}
#buttonscontainer {
	width: 99%;
	margin-left: 4px;
	padding-top: 35px;;
}
.nav-link {
	background-color: rgb(37,61,122);
	color: white;
	height: 95px;
	cursor: pointer;
	box-shadow: black 4px 3px 7px -3px;
	border: 2px solid white;
}
.nav-link:active {
	background-color: #274D98;
	color: white;
}
#basicvalueinfo, #ownership, #econdevel, #photos, #tools, #electedofficials, #faq {
	width: 98%;
	height: 55vh;
	overflow: auto;
	background-color: #DCE1F0;
	box-shadow: black 8px 6px 13px -6px;
	margin: 1%;
}
#basic, #value {
	background-color: white;
	height: 94%;
	width: 96%;
	margin: 1%;
	padding: 2%;
	box-shadow: black 8px 6px 13px -6px;
	border: 1px solid gray;
	overflow: auto;
}
#btnGetDetails {
	background-color: rgb(37,61,122);
	border-radius: 5px;
	width: 90%;
	color: white;
	padding-left: 20%;
	font-weight: bold;
	padding: 2%;
	margin: 2%;
	bottom: 2%;
	text-align: center;
}
#firstowner, #secondowner, #otherowners {
	background-color: white;
	height: 94%;
	width: 96%;
	margin: 1%;
	padding: 2%;
	box-shadow: black 8px 6px 13px -6px;
	font-size: 1.2em;
	border: 1px solid gray;
}
#divYear0, #divYear1, #divYear2, #divYear3, #divYear4, #divYear5 {
	background-color: white;
	height: 96%;
	margin: 1%;
	width: 90%;
	box-shadow: black 8px 6px 13px -6px;
	padding: 1%;
	font-size: 1.1em;
	margin-bottom: 1%;
	margin-left: 5%;
}
#lblYear0, #lblYear1, #lblYear2, #lblYear3, #lblYear4, #lblYear5 {
	font-weight: bold;
	font-size: 1.2em;
	margin-left: 20%;
	margin-bottom: 10px;
	border: 1px solid gray;
	text-align: center;
}
#TIFs, #CommImpDist, #TDD, #paytaxes, #correctinfo, #print, #export, #apppeal, #local, #state, #federal, .faq-cols, .photo {
	background-color: white;
	border: 1px solid gray;
	width: 96%;
	margin: 1%;
	padding: 2%;
	box-shadow: black 8px 6px 13px -6px;
	left: 1%;
	height: auto;
}
.tools-title {
	border-bottom: 1px solid gray;
	padding-bottom: 35px;
	font-size: 1.5em;
}
.tools-content {
	text-align: center;
	height: auto;
	padding-bottom: 35px;
	font-size: 1.1em;
	width: 96%;
}
.tools-buttons {
	height: auto;
	text-align:center;
}
.tool-button {
	background-color: #4976B9;
	color: white;
	width: 280px;
	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);
}
#chkInfo, #chkPhotos, #chkMap {
	width: 40px;
	height: 40px;
}
#printTable {
	margin-top:1%;
	margin-bottom:1%;
	margin-left: 20%;
	text-align: left;
	width: 80%;
}
/* 
/////////// END OF STYLE FOR INFO DIV AT BOTTOM ///////////
*/

/*---------------------------------------------------
   Style for the modal photos - disabled for tablets
---------------------------------------------------*/
#theModal {
	display: none;
}