html, body {
	height: 100%;
	margin: 0px !important;
	line-height: 1.1 !important;

}

#legalaid_map {
    margin: 3px !important;
	/* height:	100% !important; */
	height:	90% !important;
    background-color: #b2d2f3a1 !important; /* This is the colour of the sea */
	
	/* will-change: transform;
    backface-visibility: hidden; */	
	
}

canvas, canvas3, canvas4, canvas5 {
  	-moz-user-select: none;
  	-webkit-user-select: none;
  	-ms-user-select: none;
}

#chartDiv {
  width: 335px;
  height: 300px;
}


#get_feat_div {
	display:none;
	position: fixed;
	top: 35px;
	/*height: 212px;
	width: 410px;*/
	right: 38px;
	z-index: 10001;
	/*font-size: x-small;*/
	color: #CECECE;
	background-color: rgba(80, 80, 80, 0.75);
	padding: 15px;
	border: 2px solid;
	border-color: rgba(111, 111, 111, 1.0);  
}

#legend_images1 {
	position: fixed;
	top: 271px;
  right: 61px;
	z-index: 10001;
  font-size: x-small;
  color: #CECECE;
  background-color: rgba(80, 80, 80, 0.75);
  padding: 5px;
  border: 2px solid;
  border-color: rgba(111, 111, 111, 1.0);  
}

#spinnerImg {
  display: none;
  position:absolute;
  top:50%;
  left:50%;
  z-index:20001;
}

/*body {overflow-y: scroll;}*/
 /*a {outline: 0 none; text-decoration: none;}*/
 /*a img {border: 0 none;}*/
#wrap {
  position:absolute;
  width: 800px;
  margin: 20px auto;
  font-family: arial, sans-serif;
  font-size: 14px;
  z-index:30000;
}

#noShow {
  padding: 5px 10px;
  background-color: #ddd;
}

/* Geocode divs */
#location_search {
  /*z-index: 1000;*/
  /*background-color: white;*/
  position: absolute;
  top: 80px;
  margin-top: 15px;
  /*left: 40px;*/
  width: auto;
  height: auto;
  padding: 10px;
}
#location_search input {
  width: 200px;
}

.gcd-gl-result {
	padding-top: 5em;
    padding-left: 0.2em;
}

.gcd-gl-result, .gcd-gl-result ul, .gcd-gl-result a {
  font-style: sans-serif;
  list-style-type: none;
  /*color: #cecece;
  padding-left: 0px;*/
  text-decoration: none !important;
}

.gcd-gl-result a:link .gcd-road {
  color: rgba(0,92,132,1.0) !important;
  text-decoration: none !important;
}

.gcd-gl-result a:visited {
  color: rgba(0,92,132,1.0) !important;
  text-decoration: none !important;
}
.gcd-gl-result a:hover {
  color: rgba(0,92,132,0.6) !important;
  text-decoration: underline !important;
}
.gcd-gl-result a:active {
  color: rgba(0,92,132,0.6) !important;
  text-decoration: underline !important;
}


/* 
#sidebar {
	top: 0px;
	left: 2px;
	
}*/

.layer-switcher {
	position: initial;
}

label {
	margin: 0.25rem;
}

.routing-buttons {
	display: none;
	padding-left: 5em;
}

.routing-buttons button{
  background-color:rgba(190,190,190,0.8);
  font-size: 0.9em;
}

.routing-buttons label{
  font-size: 0.9em;
}

.routing-buttons select{
  font-size: 0.8em;
}
.routing-buttons button:hover{background-color:rgba(242,242,242,0.8);}

.routing-buttons button:focus{background-color:rgba(242,242,242,0.8);}


#slider-1 {
    margin-bottom: 2.5em;
	width: 11.3em;
}      

#slider-2 {
    margin-bottom: 2.5em;
	width: 11.3em;	
}

#slider-3 {
    margin-bottom: 2.5em;
	width: 11.3em;	
}      

#slider-4 {
    margin-bottom: 2.5em;
	width: 11.3em;	
}

.custom-layer-control {
	font-size: small;	
}

.custom-layer-control label {
    display: inline-block;
    width: 100px;	
}

.custom-layer-control select {
    width: 145px; 
}



#custom-map-control li {
	display: block !important;
	font-size: small;	
}

#sidebar p {
	margin-top: 1.1rem !important;
	margin-right: 1rem !important;
	font-size: 0.9em !important;
}



@keyframes spinner {
	to {
	  transform: rotate(360deg);
	}
}

.spinner:after {
	content: "";
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	margin-left: -20px;
	border-radius: 50%;
	border: 5px solid rgba(0,92,132,0.6); 
	border-top-color: rgba(0,92,132,1.0); /* UoS Logo teal */
	animation: spinner 0.6s linear infinite;
}

.ol-control {
 	background-color: rgba(255,255,255,0) !important;
}


.ol-control button {
    background-color: rgba(0, 60, 136, 0.3) !important;
}

.ol-control button:hover {
    background-color: rgba(0, 60, 136, 0.7) !important;
}



/* .ol-control button {
	color: rgba(0,92,132,1.0) !important;
	background-color: rgba(0,60,136,0) !important;
	font-size:xx-large !important;	
	padding-left: 0.2em !important;
	margin-left: 0.35em !important;
	width: 1em !important;
	font-weight: 900 !important;
}

.ol-control button:focus {
	outline: none !important;
	color: rgba(0,92,132,0.6) !important;
} */


/* .ol-touch .ol-zoom-extent {
	top:5.5em;
}

.ol-control button:focus, .ol-control button:hover {
	text-decoration:none;
	background-color:rgba(0,60,136,.7);
} */

.ol-zoom .ol-zoom-in {
	/* border-radius:2px 2px 0 0; */
	border-radius:0 0 0 0 !important;
	 
}

.ol-zoom .ol-zoom-out {
	border-radius:0 0 0 0 !important;
}

#shaded-rectangle {
	width: 50px;
	height: 200px;
	color: rgba(120, 120, 120, 0.5);
	z-index: 100;
	float: left;
	
}

#route_dist {
	padding-left: 5em;
	color: #ff0000;
	float: right;
    position: fixed;
    /* bottom: 95px; */
	top: 150px;
    z-index: 1000;
    right: 20px;
}

/* .introjs-overlay {
   position: fixed!important;
} */

/* .intro_anim {
	position: fixed!important;
	width:75%!important; 
	height:75%!important;
	top:0!important;
	left:0!important;   
} */

/*  .introjs-tooltip {
	position: fixed;
	width: 1000px !important;
} */

/*
.intro_anim {
	width:100% !important; 
}
 */

.introjs-tooltipReferenceLayer {
	/* margin-top:0px !important; */ 
	/* top: 30% !important; */
	/* top: 50% !important; */
	/* top: 40% !important; */
	
}

.introjs-tooltip {
	max-width: none !important;
	width: 1000px;
	
	min-height: 500px;

	/* height: max-content; */
	/* height: 500px; */
    /* top: 30% !important; */
	/* margin-top: -200px !important; */
}

.introjs-helperNumberLayer {
	/* margin-top: -200px !important; */
	/* visibility: hidden !important; */
}

/* .importantRule { 
	top: -25% !important;
	top: 50% !important;
} */

/*  .introjs-custom {
	margin-top:0px !important; 
 } */
 
.fa-icons  {
	color: rgba(0, 92, 132, 1.0) !important;
}

#legal-area {
	margin-top: 1rem;
	margin-left: 2rem;
	font-size: small;
	
}

#legal-scheme {
	margin-top: 1rem;
	margin-left: 2rem;
	font-size: small;
	
}

#asy-area {
	margin-top: 1rem;
	margin-left: 2rem;
	margin-bottom: 3rem;	
	font-size: small;
	
}

#legal_aid_legend {
	display: block;
	/* margin-left: 3rem;
	margin-top: -1rem; */	
}

#distance_to_aid_legend {
	display: none;
	margin-left: 0.45rem;	
	margin-top: -1rem;
}

#imm_demand_legend {
	display: none;
	margin-left: 0.45rem;	
	/* margin-top: -1rem; */
}

#story_div {
  /* height: 300px; */
  height: 400px;
  max-width: 1200px;
  margin: auto;
}
#story_div img {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 1000px;

}

.options a {
  cursor: pointer;
}


.injected-style-dropdown {
	margin-left: 2rem;
	margin-bottom: 0.5rem;
	font-size: small;		

    /* Animation Properties */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* The state when it is fully visible */
.injected-style-dropdown.show {
    opacity: 1;
    transform: translateY(0);
}