html {
     font-family: sans-serif;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
}
 body {
     margin: 0;
}
 a {
     background-color: transparent;
}
 a:active, a:hover {
     outline: 0;
}
 b, strong {
     font-weight: bold;
}
 svg:not(:root) {
     overflow: hidden;
}
 button, input, optgroup, select, textarea {
     color: inherit;
     font: inherit;
     margin: 0;
}
 button {
     overflow: visible;
}
 button, select {
     text-transform: none;
}
 button, html input[type="button"], 
/* 1 */
 input[type="reset"], input[type="submit"] {
     -webkit-appearance: button;
     cursor: pointer;
}
 body {
     overflow-y: hidden;
     margin: 0;
     padding: 0;
}
 #container {
     width: 100%;
     height: 100%;
}
 #map {
     height: 60% !important;
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
}
 #mapRegions {
     display: none;
     height: 60% !important;
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
}



		/* 
	Generic Styling, for Desktops/Laptops 
	*/
	table { 
		width: 100%; 
		border-collapse: collapse; 
	}
	/* Zebra striping */
	tr:nth-of-type(odd) { 
		background: #eee; 
	}
	th { 
		background: #333; 
		color: white; 
		font-weight: bold; 
		cursor: s-resize;
		background-repeat: no-repeat;
        background-position: 3% center;
	}
	td, th { 
		/* padding: 6px;  */
		border: 1px solid #ccc; 
		text-align: left; 
	}
	
	th.des:after {
      content: "\21E9";
    }
    
    th.aes:after {
      content: "\21E7";
    }
	
	/* 
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
	@media 
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
	
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #ccc; }
		
		td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%; 
		}
		
		td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		/*
		Label the data
		*/
		td:before {
		  content: attr(data-th) ": ";
          font-weight: bold;
          width: 6.5em;
          display: inline-block;
		}
	}
	
	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 0; 
			margin: 0; 
			width: 320px; }
        }
        
        .row_sliders2 {
            justify-content: space-between;
            padding: 15%;
            display: inline;
            height: 10%;
            width: 90%;
       }
        .row_sliders2>div {
            justify-content: space-between;
            padding: 15%;
            display: inline;
            height: 10%;
            width: 90%;
       }
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			width: 495px; 
        }
        .row_sliders2 {
            justify-content: space-between;
            padding: 15%;
            display: inline;
            height: 10%;
            width: 90%;
       }
        .row_sliders2>div {
            justify-content: space-between;
            padding: 15%;
            display: inline;
            height: 10%;
            width: 90%;
       }
	}



 .control-panel {
     position: absolute;
     bottom: 0;
     top: unset !important;
     right: 0;
     opacity: 0.85;
     margin-bottom: 10px;
	 margin: auto;
     z-index: 1000;
     width: 100%;
     height: 40% !important;
     border-top: 3px solid #aac741;
     background-color: #f8f8f8;
}
 .control-panel p {
     margin-bottom: .5rem;
}
 .sliders {
     margin: auto;
     width: 75%;
}
 #student-count, #pem-count {
     padding-left: 10%;
}
 .row {
     display: flex;
     white-space: nowrap;
     width: 100% !important;
	 margin: auto;
}
 .row>div {
     justify-content: space-between;
     margin: auto;
     padding: auto;
     display: inline-block;
	 margin: auto;
}

 .row_sliders {
     display: flex;
     white-space: nowrap;
     padding: 0%;
     width: 80% !important;
	 height: 0%;
}
 .row_sliders>div {
     justify-content: space-between;
     padding: 0%;
     display: inline-block;
	 height: 100%;
}
 .row_sliders2 {
     justify-content: space-between;
     padding: 15%;
     display: inline;
	 height: 10%;
	 width: 90%;
}
 .row_sliders2>div {
     justify-content: space-between;
     padding: 15%;
     display: inline;
	 height: 10%;
	 width: 90%;
}
/* style="padding-left: 10%" */


 .selected {
    background-color: #aac741;
}


 #legend, #legendRegion {
	 width: 30%;
     border-radius: 5px;
     background-color: lightgrey;
}
 #summary {
     padding-left: 5%;
}
 .noUi-target, .noUi-target * {
     -webkit-touch-callout: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-user-select: none;
     -ms-touch-action: none;
     touch-action: none;
     -ms-user-select: none;
     -moz-user-select: none;
     user-select: none;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
 .noUi-target {
     position: relative;
     direction: ltr;
}
 .noUi-base, .noUi-connects {
     width: 100%;
     height: 100%;
     position: relative;
     z-index: 1;
}
 .noUi-connects {
     overflow: hidden;
     z-index: 0;
}
 .noUi-connect, .noUi-origin {
     will-change: transform;
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     height: 50%;
     width: 100%;
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
}
 html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
     left: auto;
     right: 0;
}
 .noUi-horizontal .noUi-origin {
     height: 0;
}
 .noUi-handle {
     position: absolute;
}
 .noUi-horizontal {
     height: 18px;
}
 .noUi-horizontal .noUi-handle {
     width: 70px;
     height: 28px;
     left: -17px;
     top: -6px;
}
 html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
     right: -17px;
     left: auto;
}
 .noUi-target {
     background: #FAFAFA;
     border-radius: 4px;
     border: 1px solid #D3D3D3;
     box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
 .noUi-connects {
     border-radius: 3px;
}
 .noUi-connect {
     background: #aac741;
}
 .noUi-draggable {
     cursor: ew-resize;
}
 .noUi-handle {
     border: 1px solid #D9D9D9;
     border-radius: 50px;
     background: #FFF;
     cursor: pointer;
     box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
 .noUi-tooltip {
     font-size: 15px;
     display: block;
     top: 5px;
     position: absolute;
     color: #000;
     text-align: center;
     white-space: nowrap;
}
 .noUi-horizontal .noUi-tooltip {
     -webkit-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
     left: 50%;
     bottom: 120%;
}
 .noUi-handle{
     background : #fff !important;
}
 .leaflet-bottom {
     z-index:0 !important;
}
 .noUi-horizontal {
     height:10px !important;
}
 .noUi-connects {
     margin-top:11px !important;
     top: -6px 
}
 .noUi-target {
     border:none !important;
}
 .noUi-handle-lower {
     top:-15px !important;
}
 .noUi-handle-upper {
     top:-15px !important;
}
 html {
     font-size: 62.5%;
}
 body {
     font-size: 1.5em;
     line-height: 1.6;
     font-weight: 400;
     font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: #222;
}
 p {
     margin-top: 0;
}
 a {
     color: #1EAEDB;
}
 a:hover {
     color: #0FA0CE;
}
 .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
     display: inline-block;
     height: 38px;
     padding: 0 10px;
     color: #555;
     text-align: center;
     font-size: 11px;
     font-weight: 600;
     line-height: 38px;
     letter-spacing: .1rem;
     text-transform: uppercase;
     text-decoration: none;
     white-space: nowrap;
     background-color: transparent;
     border-radius: 4px;
     border: 1px solid #bbb;
     cursor: pointer;
     box-sizing: border-box;
}
 ul {
     list-style: circle inside;
}
 ol, ul {
     padding-left: 0;
     margin-top: 0;
}
 li {
     margin-bottom: 1rem;
}
 button, .button {
     margin-bottom: 1rem;
}
 pre, blockquote, dl, figure, table, p, ul, ol, form {
     margin-bottom: 2.5rem;
}
 .container:after, .row:after, .u-cf {
     content: "";
     display: table;
     clear: both;
}
 ul.tab-nav {
     list-style: none;
     border-bottom: ;
     padding-left: 3%;
     padding-right: 0%;
}
 ul.tab-nav li {
     display: inline;
}
 ul.tab-nav li a.button {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     margin-bottom: -1px;
     border-bottom: none;
     border-top: 0.1em solid #888;
     border-bottom: 0.1em solid #888;
     border-left: 0.1em solid #888;
     border-right: 0.1em solid #888;
}
 ul.tab-nav li a.active.button {
     border-bottom: 0.175em solid #f8f8f8;
     border-top: 0.175em solid #aac741;
     border-left: 0.175em solid #aac741;
     border-right: 0.175em solid #aac741;
}
 .tab-content .tab-pane {
     display: none;
}
 .tab-content .tab-pane.active {
     display: block;
	 width: 100% !important;
}
 
.leaflet-right .leaflet-control {
    margin-right: -190px;
}