.leaflet-control-container .leaflet-top, .leaflet-control-container .leaflet-bottom {
  /* fix for map controls becoming invisible in Safari */
	transform: translate3d(0px, 0px, 0px);
}

html, body, #map {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: "Verdana", sans-serif;
}

html, body {
	overflow: hidden;
}

body {
	position: absolute;
	overflow: hidden;
}

#menu, #infoModal, #mapMaster, #mapMaster2, #menuBody {
  transition: all .15s linear;
}

texz {
  display: inline-block;
  vertical-align: middle;
}

.topnav {
  overflow: hidden;
  background-color: #383838;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 6px 14px;
  text-decoration: none;
  font-size: 12px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: darkred;
  color: white;
}

#navlogo {
	font-size: 16px;
	font-family: Apple Chancery;
	padding: 0 20px 2px
	/*border-right: 1px solid white;*/
}

ul {
  list-style-type:none;
  padding: 8px 0 18px 20px;
  font-size: 12px;
}

li {
  display: flex;
  align-items: center;
}

.tabcontent li {
  display: list-item;
}

.indented {
  padding-left: 36pt;
  text-indent: -36pt;
}

.pulltab {
	z-index: 1000;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);

	height: 16px;
	width: 70px;
	border-radius: 12px 12px 0 0;
	line-height:14px;
	font-size: 10px;

	text-align:center;
	cursor: pointer;
	background-color:darkred;
	color: #F4F6F7;
}

.pulltab:before, .pulltab:after {
    content: "";
    position: absolute;
    height: 6px;
    width: 12px;
    bottom: 0;
}

.pulltab:after {
    right: -12px;
    border-radius: 0 0 0 6px;
		box-shadow: -6px 0 0 0 darkred;
}

.pulltab:before {
    left: -12px;
    border-radius: 0 0 6px 0;
		box-shadow: 6px 0 0 0 darkred;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
}

#table, #filetable {
	width: 100%;
	min-width: 850px;
	font-size: 11px;
	color: #424949;
	font-family: Verdana;
}

#table th.sort:active, #filetable th.sort:active {
  background-color: red;
}

#table th.sort, #filetable th.sort {
  cursor: pointer;
}

#table th, #filetable th {
  background-color: darkred;
  font-weight: normal;
  color: #F4F6F7;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: default;
  text-align: left;
  height: 40px;

  display: inline-block;
  margin-right: -6px;
}

table thead tr{
  display:block;
}

tr {
  display: block;
  border-bottom: 1px solid #cccccc;
}

table tbody{
display:block;
overflow: hidden auto;
}

#table td, #filetable td {
  display: inline-block;
  margin-right: -2px;
}

#headrow, #fileheadrow {
  background-color: darkred;
  border-bottom: 1px solid #cccccc;
}

.rowBand1 {
  background-color: white;
}

.rowBand2 {
  background-color: #ededed;
}

.rowClickable:hover {
  background-color: #cccccc;
}

.rowClickable:active {
  background-color: #bfbfbf;
}

/*#table_body::after, #filetable_body::after {
  content: "\00a0";
  padding-bottom: 12px;
}*/

.clearButton, .plusButton {
  width: 16px;
  height: 16px;
	padding: 0;
  border: none;
  cursor: pointer;
  vertical-align: middle;
}
.clearButton {
	background: url(images/clear.png) no-repeat;
	background-size: cover;
  margin: 0 0 0 6px;
}
.plusButton {
	background: url(images/plus.png) no-repeat;
	background-size: cover;
	margin: 0 0 0 4px;
}

.searchBlock {
  float: left;
  cursor: pointer;
  color: #F4F6F7;
  background-color: darkred;
  border-radius: 10px;
  margin: 2px 4px;
  padding: 1px 8px;
}

.searchBlock::after{
  content: " ×";
}

#popupDateTable th {
  padding-right: 8px;
}

#popupDateTable tr {
  display: table-row;
}

.leaflet-popup-content {
  overflow-y: auto;
  overflow-x: hidden;
}

.celldivHead {
  max-height: 100%;
  width: calc(100% - 10px);
  overflow: auto;
  margin: 2px 6px 2px 4px;
  display: flex;
  align-items: center;
  height: calc(100% - 4px);
}

.celldivBody {
  max-height: 100%;
  width: calc(100% - 10px);
  margin: 2px 6px 2px 5px;
  vertical-align: middle;
	-webkit-text-size-adjust: 100%;
}

#sorttable_sortfwdind, #sorttable_sortrevind {
  position: fixed;
  transform: translate(-11px, 11px);
}

input[type="radio"] {
  -webkit-appearance: none;
  display:inline-block;
  width: 16px;
  height: 16px;
  margin: 0 18px 0 10px;
  background:url(images/radio.png) left top no-repeat;
	background-size: cover;
  vertical-align: middle;
  cursor: pointer;
  padding-left: 16px;
}

input[type="radio"]:checked {
  background: url(images/radio.png) right top no-repeat;
	background-size: cover;
}

.switch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 36px;
  min-width: 36px;
  height: 16px;
  margin-right: 8px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.sorttable_sorted::before, .sorttable_sorted_reverse::before {
	float: left;
	width: 0px;
	transform: translate(-1ch, 1.6ch);
	font-family: Menlo;
}

.sorttable_sorted::before { content: "▾"; } /* ▾ */
.sorttable_sorted_reverse::before { content: "▴"; }

input:checked + .slider {
  background-color: darkred;
}

input:checked#exists + .slider {
  background-color: black;
}

input:checked#Msc_Residential + .slider {
  background-color: #CC6D00; /*darkorange;*/
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 12px;
}

.slider.round:before {
  border-radius: 50%;
}

li {
  margin-top: 6px;
}

li:first-child {
  margin-top:0;
}

input.dbox {
  width: 30px;
  text-align: center;
  font-size: 10px;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: default;
  /*padding-top: 3px;*/
  padding-right: 5px;
  margin-right: 15px;
  margin-left: auto;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #F7F7F7;
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 5px 8px;
  position: absolute;
  z-index: 0;
  bottom: 100%;
  right: calc(100% + 4px);
  opacity: 0.94;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 100%;
  border-width: 5px;
  border-style: solid;
  border-color: #cccccc transparent transparent #cccccc;
}

.tooltip .tooltiptexttable {
  visibility: hidden;
  width: 200px;
  background-color: #F7F7F7;
  border: 1px solid #cccccc;
  border-radius: 15px;
  padding: 5px 8px;
  position: absolute;
  z-index: 0;
  top: -3px;
  left: 100%;
  opacity: 0.93;
}

.tooltip:hover .tooltiptexttable {
  visibility: visible;
}

.tooltip .tooltiptexttable::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  border-style: none;
}


input[type="number"] {
  -moz-appearance:textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="date"], input[type="month"] {
  font-size: inherit;
  color: inherit;
  display: inline-block;
  vertical-align: middle;
  width: 100px;
}

input[type="text"] {
  font-size: inherit;
  color: inherit;
  display: inline-block;
  vertical-align: middle;
}

select {
  font-size: inherit;
  color: inherit;
}

.leaflet-shadow-pane {
  display: none;
}

.leaflet-container .leaflet-control-attribution {
  margin-left: 102px;
}

.resSchoolMarker {
  cursor: grab;
}

.loader {
  border: 12px solid darkred; /* Light grey */
  border-top: 12px solid #f3f3f3; /* Blue */
  border-bottom: 12px solid #f3f3f3; /* Blue */
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader-wrapper {
  display: inline-block;
  padding-right: 18px;
}

.modalTable {
	width: 100%;
	display: table;
	table-layout: auto;
	margin-bottom: 8pt;
}

.modalTable tbody, .modalTable thead {
	display: table-row-group;
}

.modalTable tr {
	display: table-row;
}

.modalTable tbody tr {
	border: none;
}

.modalTable tbody td {
	padding-top: 8pt;
}

.modal img {
	width: 100%;
	padding-top: 12px;
}

.modal iframe {
	display: block;
	margin: 0 auto;
	padding: 11px 0;
	max-width: 100%;
}

#menu {
	position: absolute;
	width: 300px;
	height: 100%;
}
#menuBody {
	height: calc(100% - 80px);
	border-right: 1px solid #cccccc;
}
#mapMaster {
	height: 100%;
	width: calc(100% - 300px);
	float: right;
	overflow: hidden;
}

#toggleMenuMobile, #showInfoMobile, #mobileAttribution {
	display: none;
}

.leaflet-control-attribution {display: inherit;}

#menu.showMenu 			{ left: 0; }
#menuBody.showMenu 	{ }
#mapMaster.showMenu { width: calc(100% - 300px); left: 0; }
#menu.hideMenu 			{ left: -300px; }
#menuBody.hideMenu 	{ }
#mapMaster.hideMenu { width: 100%; left: 0; }

@media only screen and (max-width: 480px) {

	#menu.showMenu 			{ }
	#menuBody.showMenu 	{ left: 0; }
	#mapMaster.showMenu { left: 480px; width: 100%; }
	#menu.hideMenu 			{ }
	#menuBody.hideMenu 	{ left: -480px; }
	#mapMaster.hideMenu { left: 0; width: 100%; }

	#menu {
		position: unset;
		width: 100%;
		height: fit-content;
		max-height: 100%;
		display: flex;
  	flex-direction: column;
		overflow: hidden;
		/*https://stackoverflow.com/questions/27784727/how-to-make-child-div-scrollable-when-it-exceeds-parent-height*/
	}
	#menuBody {
		border: none;
		position: absolute;
		width: 100%;
		margin-top: 80px;
	}
	#mapMaster {
		position: absolute;
		height: calc(100% - 80px);
		width: 100%;
	}

	#toggleMenuButton, #showInfoButton {
		display: none;
	}
	#toggleMenuMobile, #showInfoMobile {
		display: inherit;
	}
	#resetButton {
		/*margin: 10px 0;*/
	}

	.indented {
		padding-left: 12pt;
		text-indent: -12pt;
	}

	.modalTable {
		word-break: normal;
	}

	.modal iframe {
		height: auto;
	}

	#mobileAttribution {display: inherit;;}
	.leaflet-control-attribution {display: none;}
	.leaflet-control-zoom {display: none;}
	.leaflet-tooltip {display: none};

}