/*---------------------------------
	Main elements
-----------------------------------*/
html, body{
	font-family: Tahoma;
	font-size: 0.9em;
	height: 100%;
}
#viewDiv{
	height: 100%;
	z-index: 0;
}

/*---------------------------------------------------
	Style for splash screen and help
---------------------------------------------------*/
/* this is the black background for the help and splash screens ... */
.splashbackground {
	width: 100%;
	height: 100%;
	background-color: black;
	position: absolute;
	opacity: 0.75;
	z-index: 1;
}

/* this is the splash screen on regular media */
@media only screen and (min-width: 900px) {
	#splashscreen {
		min-width: 50%;
		max-width: 80%;
		min-height: 70%;
		max-height: 80%;
		background-color: white;
		position: relative;
		top: 10%;
		z-index: 2;
		border: solid 10px white;
		box-shadow: inset 0 0 27px 5px;
		text-align: center;
	}
	#splash-content {
		padding-left: 2%;
		padding-right: 2%;
		padding-top: 1%;
	}
}
/* this is the splash screen on mobile media */
@media only screen and (max-width: 900px) {
	#splashscreen {
		width: 100%;
		height: 100%;
		background-color: white;
		position: relative;
		top: 0%;
		z-index: 2;
		border: solid 10px white;
		box-shadow: inset 0 0 27px 5px;
		text-align: center;
		font-size: smaller;
		overflow-x: auto;
	}
	#quickstartbutton {
		display: none;
	}
	#browser-warning {
		display: none;
	}
	#splash-content {
		padding: 5%;
	}
	#disclaimer {
		max-height: 225px;
		border: ridge;
		border-color: aliceblue;
		overflow-x: auto;
		padding: 10px;
	}
}

/* this is the help screen and video on regular media */
@media only screen and (min-width: 900px) {
	/* LEAVE THIS ALONE IT'S NOT GOING TO GET BETTER!! */
	#helpscreen {
		padding-left: 3%;
		padding-top: 2%;
		min-width: 40%;
		max-width: 60%;
		min-height: 80%;
		max-height: 90%;
		background-color: white;
		position: relative;
		top: 10%;
		z-index: 2;
		border: solid 10px white;
		box-shadow: inset 0 0 27px 5px;
		text-align: center;
	}
	#helpimage {
		height: 55%;
	}
	#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;
	}
}
/* this is the help screen and video on mobile media */
@media only screen and (max-width: 900px) {
	#helpscreen {
		width: 100%;
		height: 100%;
		background-color: white;
		position: relative;
		top: 0%;
		z-index: 2;
		border: solid 10px white;
		box-shadow: inset 0 0 27px 5px;
		text-align: center;
		font-size: smaller;
	}
	#helpimage {
		width: 80%;
		margin-left: 10%;
		max-height: 60%;
	}
	#helpVideo {
		width: 100%;
		height: 100%;
		border: 5px solid white;
	}
	#videoDiv {
		height: 80%;
		width: 80%;
		left: 10%;
		top: 15%;
		z-index: 4;
		background-color: black;
		position: absolute;
	}
	#videoClose {
		position:absolute;
		top:2vh;
		right:2vw;
	}
}
/*---------------------------------------------------
	End of style for splash screen and help
---------------------------------------------------*/

/* next three are for the spinner that spins in the middle of the map while the data is being fetched */
/* regular styling */
@media only screen and (min-width: 601px) {
	#spinner {
		border: 20px solid white;
		border-top: 20px solid #007bff;
		border-radius: 70%;
		width: 100px;
		height: 100px;
		animation: spin 1s linear infinite;
		top: 20%;
		left: 45%;
		display: none;
		position: absolute;
		opacity: 0.7;
	}
}
/* mobile styling (only difference is the left attribute) */
@media only screen and (max-width: 600px) {
	#spinner {
		border: 20px solid white;
		border-top: 20px solid #007bff;
		border-radius: 70%;
		width: 100px;
		height: 100px;
		animation: spin 1s linear infinite;
		top: 20%;
		left: 35%;
		display: none;
		position: absolute;
		opacity: 0.7;
	}
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/*---------------------------------------------------
	Style for parcel-click popup
---------------------------------------------------*/
/* Regular styling below - mobile didn't work unless I put regular into a min-width block */
@media only screen and (min-width: 601px) {
	/* main popup container */
	.esri-popup__main-container {
		position: fixed !important;
		left: 5vw !important;
		top: 15px;
		min-width: 30%;
		max-width: 70%;
		max-height: 400px;
		min-height: 330px;
		background-color: #F9FAFC;
	}
	/* this makes the text on the popup stand out better */
	.esri-feature-fields__field-data {
		color: black;
	}
	/* put a thin border around the content */
	.esri-feature__content-element {
		border: 1px solid black;
	}
	/* container for zoom-to and click-for-info button */
	.esri-popup__inline-actions-container {
		margin: 2px;
		max-width: 100% !important;
	}
	/* click-to-get-info button */
	.esri-popup__action:nth-child(1) {
		background-color: #007bff;
		border-radius: 5px;
		min-width: 40%;
		max-width: 50%;
		color: white;
		position: absolute !important;
		left: 20%;
		font-weight: bold;
	}
	/* for some stupid reason you have to do this to show the
		caption on the button in mobile mode, but most phones held
		sideways will be greater than 600px width so it needs to be here as well */
	.esri-popup__action:nth-child(1):before {
		content: "CLICK FOR PROPERTY INFO";
		font-size: small;
		padding: 5px;
	}
	/* When many mobile devices are turned sideways the "Zoom to" caption gets in the way
		of the "click for property info" button, so this turns off that caption.
		It is assumed the icon will make the purpose of the button self-evident */
	.esri-popup__action-text{
		display: none !important;
	}
	/* this is the container sans the parcel # and address info pane on larger screens */
	.esri-view-width-xlarge .esri-popup__main-container {
		width: 30%;
		border: 2px solid #3c3c3c;
		box-shadow: 0 0 5px;
	}
}
/* Mobile styling below */
@media only screen and (max-width: 600px) {
	/* main popup container */
	.esri-popup__main-container {
		position: absolute !important;
		left: 5% !important;
		top: 50% !important;
		min-width: 70%;
		max-width: 90%;
		height: 50% !important;
		background-color: #F9FAFC;
	}
	/* this makes the text on the popup stand out better */
	.esri-feature-fields__field-data {
		color: black;
	}
	/* put a thin border around the content */
	.esri-feature__content-element {
		border: 1px solid black;
	}
	/* container for zoom-to and click-for-info button */
	.esri-popup__inline-actions-container {
		margin: 5px;
		width: 100% !important;
	}
	/* click-to-get-info button */
	.esri-popup__action:nth-child(1) {
		background-color: #007bff;
		border-radius: 5px;
		left: 20% !important;
		min-width: 60%;
		max-width: 75%;
		color: white;
		position: absolute !important;
		font-size: small;
	}
	/* for some stupid reason you have to do this to show the
		caption on the button in mobile mode */
	.esri-popup__action:nth-child(1):before {
		content: "CLICK FOR PROPERTY INFO";
		font-size: small;
		padding: 5px;
	}
}
/*---------------------------------------------------
End of style for parcel-click popup
---------------------------------------------------*/

/*------------------------------------------------------------------------
	The next several styles are for the bottom info tables container
-------------------------------------------------------------------------*/
/* regular styling for the info div */
@media only screen and (min-width: 601px) {
	#infoDiv {
		margin: auto;
		left: 1vw;
		height: 50vh;
		width: 98vw;
		position: fixed !important;
		top: auto !important;
		bottom: 0 !important;
		background-color: white;
		z-index: 1;
		border-radius: 5px;
		resize: vertical;
		display: none;
	}
	#infoDivHeader {
		width: 100%;
		height: 2%;
		cursor: ns-resize;
	}
	#infoDiv-handle {
		width: 99%;
		height: 2%;
		top: 0;
		right: 2%;
		background: linear-gradient( to bottom, gray, gray 50%, lightgray 50%, lightgray );
		background-size: 100% 2px;
		border: 1px solid gray;
	}
	#infoDiv-closebutton {
		position: absolute;
		right: 0px;
		top: 0px;
		cursor: pointer;
	}
	.nav-link {
		background-color: #f2f2f2;
		color: black;
		height: 45px;
		margin: 3px;
		cursor: pointer;
		box-shadow: black 8px 6px 13px -6px;
		white-space: nowrap;
	}
	#buttonsContainer{
		width: 99%;
		float: left;
		margin-left: 7px;
		margin-top: 0.3%;
		font-size: 0.9vw;
		vertical-align: middle;
	}
	#basicvalueinfo, #ownership, #econdevel, #tools, #electedofficials, #faq {
		width: 98%;
		height: 83%;
		overflow: auto;
		background-color: #DCE1F0;
		box-shadow: black 8px 6px 13px -6px;
		border-radius: 5px;
		margin: 14px;
	}
	#photos {
		cursor: pointer;
		width: 98%;
		height: 80%;
		overflow: auto;
		background-color: #DCE1F0;
		box-shadow: black 8px 6px 13px -6px;
	}
	#basic {
		background-color:white;
		height: 94%;
		margin-top: 1%;
		margin-bottom: 1%;
		margin-right: 1%;
		margin-left: 3%;
		box-shadow: black 8px 6px 13px -6px;
		overflow: auto;
		font-size: 1.1em;
	}
	#value {
		background-color:white;
		height: 94%;
		margin: 1%;
		box-shadow: black 8px 6px 13px -6px;
		overflow: auto;
		font-size: 1.1em;
	}
	#divYear0, #divYear1, #divYear2, #divYear3 {
		margin-bottom: 1%;
	}
	#firstowner, #secondowner, #otherowners {
		background-color: white;
		height: 94%;
		margin: 1%;
		box-shadow: black 8px 6px 13px -6px;
		left: 1%;
		font-size: 1.1em;
	}
	#TIFs, #abatements, #CommImpDist {
		background-color: white;
		height: 96%;
		margin-left: 2%;
		margin-top: 1%;
		box-shadow: black 8px 6px 13px -6px;
		left: 1%;
		font-size: 0.9em;
	}
	#paytaxes, #correctinfo, #print {
		background-color: white;
		height: 96%;
		margin: 1%;
		box-shadow: black 8px 6px 13px -6px;
		overflow: auto;
		padding: 1%;
		font-size: 1.1em;
	}
	#disagreeassessment, #checkapppeal, #appealedlastyear {
		background-color: white;
		height: 96%;
		margin: 1%;
		box-shadow: black 8px 6px 13px -6px;
		overflow: auto;
		padding: 1%;
		font-size: 1.1em;
		display: none;
	}
	#local, #state, #federal {
		background-color:white;
		height:96%;
		margin-left:1%;
		margin-top:0.5%;
		box-shadow: black 8px 6px 13px -6px;
		left:1%;
		font-size: 1.1em;
	}
	#btn-paytaxes {
		width:80%;
		height:5vh;
		margin-left:10%;
		margin-right:10%;
		background-color:navy;
		font-size:1vw;
	}
	#btn-correctinfo {
		width:80%;
		height:5vh;
		margin-left:10%;
		margin-right:10%;
		background-color:orange;
		font-size:1vw;
	}
	#btn-Informal {
		width:80%;
		height:5vh;
		margin-left:10%;
		margin-right:10%;
		background-color:#09AD19;
		font-size:1vw;
	}
	#btn-BOE {
		width:80%;
		height:5vh;
		margin-left:10%;
		margin-right:10%;
		background-color:#30A7B0;
		font-size:1vw;
	}
	#btn-Print {
		width:80%;
		height:5vh;
		margin-left:10%;
		margin-right:10%;
		background-color:#9690F5;
		font-size:1vw;
	}
} /* end of info div styling for regular */

/* mobile styling for the info div */
@media only screen and (max-width: 600px) {
	#infoDiv {
		margin: auto;
		width: 100vw;
		left: 0vw;
		height: 80vh;
		position: fixed !important;
		top: auto !important;
		bottom: 0% !important;
		border: 2px solid silver;
		background-color: white;
		display: none;
		z-index: 1;
	}
	#infoDivHeader{
		width: 100%;
		height: 2%;
	}	
	#infoDiv-handle {
		width: 95%;
		height: 2%;
		top: 0;
		right: 5%;
		background: linear-gradient(#007bff, white, #007bff);
		background-size: 100% 2px;
		border: 1px solid gray;
	}
	#infoDiv-closebutton {
		position: absolute;
		right: 0px;
		top: 0px;
		cursor: pointer;
	}
	.nav-link {
		background-color: #f2f2f2;
		height: 50px;
		margin: 0;
		cursor: pointer;
		white-space: nowrap;
		font-size: 1em;
		color: black;
		vertical-align: middle;
		font-weight: bold;
		border: 1px solid silver;
	}
	#buttonsContainer{
		width: 99%;
		float: left;
		margin: 1%;
	}
	#basicvalueinfo, #ownership, #econdevel, #tools, #electedofficials, #faq{
		width: 98%;
		height: 80%;
		overflow: auto;
		background-color: #DCE1F0;
		box-shadow: black 8px 6px 13px -6px;
		margin: 1%;
	}
	#photos {
		cursor: pointer;
		width: 98%;
		height: 80%;
		overflow: auto;
		background-color: #DCE1F0;
		box-shadow: black 8px 6px 13px -6px;
	}
	#basic {
		background-color:white;
		height: 96%;
		margin: 1%;
		padding: 5%;
		box-shadow: black 8px 6px 13px -6px;
		overflow: auto;
		font-size: 1.1em;
	}
	#value {
		background-color:white;
		height:96%;
		margin: 1%;
		padding: 3%;
		box-shadow:black 8px 6px 13px -6px;
		overflow:auto;
		font-size:1.1em;
	}
	#divYear0, #divYear1, #divYear2, #divYear3 {
		margin: 1%;
		padding: 5%;
		border: 1px solid black;
	}
	#firstowner, #secondowner, #otherowners {
		background-color: white;
		height: 40%;
		margin: 1%;
		padding: 5%;
		box-shadow: black 8px 6px 13px -6px;
		left: 1%;
		font-size: 1em;
		overflow: auto;
	}
	#TIFs, #abatements, #CommImpDist {
		background-color: white;
		height: 60%;
		margin-left: 1%;
		margin-top: 0.5%;
		box-shadow: black 8px 6px 13px -6px;
		padding: 5%;
		font-size: 0.9em;
	}
	#paytaxes, #correctinfo, #print {
		background-color: white;
		margin-left: 1%;
		margin-top: 0.5%;
		box-shadow: black 8px 6px 13px -6px;
		overflow: auto;
		padding: 5%;
		font-size: 1.1em;
	}
	#disagreeassessment, #checkapppeal, #appealedlastyear {
		background-color: white;
		margin-left: 1%;
		margin-top: 0.5%;
		box-shadow: black 8px 6px 13px -6px;
		overflow: auto;
		padding: 5%;
		font-size: 1.1em;
		display: none;
	}
	#local, #state, #federal {
		background-color:white;
		height:50%;
		margin:1%;
		box-shadow: black 8px 6px 13px -6px;
		padding: 5%;
		font-size: 1.1em;
	}
	#btn-paytaxes {
		width:80%;
		height:5vh;
		margin-left:10%;
		margin-right:10%;
		background-color:navy;
		font-size:5vw;
	}
	#btn-correctinfo {
		width:80%;
		height:5vh;
		margin-left:10%;
		margin-right:10%;
		background-color:orange;
		font-size:5vw;
	}
	#btn-Informal {
		width:80%;
		height:5vh;
		margin-left:10%;
		margin-right:10%;
		background-color:#09AD19;
		font-size:5vw;
	}
	#btn-BOE {
		width:80%;
		height:5vh;
		margin-left:10%;
		margin-right:10%;
		background-color:#30A7B0;
		font-size:5vw;
	}
	#btn-Print {
		width:80%;
		height:5vh;
		margin-left:10%;
		margin-right:10%;
		background-color:#9690F5;
		font-size:5vw;
	}
} /* end of info div styling for mobile */
/*---------------------------------------------------
End of style for info tables container
---------------------------------------------------*/

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

/*---------------------------------------------------
	Style for widgets at top-right of map
---------------------------------------------------*/
/* Search widget for regular media */
@media only screen and (min-width: 600px) {
	.esri-input.esri-search__input {
		font-weight: bold;
		-webkit-text-fill-color: red;
		width: 300px;
	}
	/* Next 2 are to nudge search widget over to the left since it's 
		wider than the default width */
	.esri-search__container {
		right: 50px;
		border: 2px solid #3c3c3c;
		box-shadow: 0 0 5px;
	}
	.esri-search__submit-button esri-widget--button {
		right: 50px;
	}
}
/* Search widget for mobile devices */
@media only screen and (max-width: 600px) {
	.esri-input.esri-search__input {
		font-weight: bold;
		font-size: small;
		-webkit-text-fill-color: red;
		width: 200px;
	}
	.esri-search__container {
		right: 0px;
		border: 2px solid #3c3c3c;
		box-shadow: 0 0 5px;
	}
}

/*.esri-search__sources-button {
	display: none;
}*/

.esri-expand__panel .esri-widget--button {
	width: 50px;
	height: 50px;
	border: 2px solid #3c3c3c;
	box-shadow: 0 0 5px;
}

#distanceButton.action-button.esri-icon-measure-line.active {
	background-color: #0079c1;
}

#areaButton.action-button.esri-icon-measure-area.active {
	background-color: #0079c1;
}

.esri-widget--button:hover, .esri-widget--button:focus {
	background-color: #0079c1;
}

.esri-widget__table tr th {
	width: 25% !important;
}

.esri-icon-basemap {
	font-size: 26px;
}

.esri-icon-measure {
	font-size: 26px;
}

.esri-icon-printer {
	font-size: 26px;
}

.esri-icon-layers {
	font-size: 26px;
}

.esri-icon-question {
	font-size: 26px;
}

.esri-icon-comment {
	font-size: 26px;
}

#helpbutton {
	width: 3.6em;
	height: 3.6em;
	cursor: pointer;
	border: 2px solid #3c3c3c;
	box-shadow: 0 0 5px;
}

#questionsbutton {
	width: 3.6em;
	height: 3.6em;
	cursor: pointer;
	border: 2px solid #3c3c3c;
	box-shadow: 0 0 5px;
}

#measureDiv {
	background: #fff;
	padding: 10px;
}

.action-button {
	font-size: 26px;
	background-color: transparent;
	border: 1px solid #d3d3d3;
	color: #6e6e6e;
	height: 50px;
	width: 50px;
	text-align: center;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.esri-component.esri-home.esri-widget, .esri-widget.esri-interactive {
	border: 2px solid #3c3c3c;
	box-shadow: 0 0 5px;
}