body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 75%; z-index: 0; }
#more {display: none;} /* read more button */
#moreuatype {display: none;} /* read more button */
#moreRisks {display: none;} /* read more button */
#morelus {display: none;} /* read more button */

#menu {
  position: absolute;
  background: rgba(255, 255, 255, 0.60);
  box-shadow: 0px 10px 20px -3px rgba(0, 0, 0, 0.15);
  margin: 8px 6px 6px 6px;
  display: flex;
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  z-index: 4;
  opacity: 0.9;
  border-radius: 3px;
}

.info {
  height: 10px;
  width: 10px;
}

#note {
  position: absolute;
  bottom: 35px; /* 10 */
  left: 10px; /* 350 */
  text-align: center;
  background: rgba(255, 255, 255, 0.60);
  opacity: 0.9;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font: 13px "Raleway", sans-serif;
  font-weight: 200;
  z-index: 4;
  padding: 0px 10px 0px 10px;
}

.seperator {
    border-top: 1px solid #eee;
    height: 10px;
    margin-top: 10px;
    margin-left: 10px;
}

.wrapper {
  position: relative;
  display: flex;
  min-width: 100px;
}

.search {
  border: 1px solid grey;
  border-radius: 5px;
  font: 13px "Raleway", sans-serif;
  font-weight: 200;
  height: 25px;
  width: 79vw;
  margin-right: 15px;
  padding: 2px 23px 2px 30px;
  outline: 0;
  background-color: #f5f5f5;
}

.search-icon {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 14px;
}

.clear-icon {
  position: absolute;
  top: 9px;
  right: 8px;
  width: 12px;
  cursor: pointer;
  visibility: hidden;
}

.search:hover, .search:focus {
  border: 1px solid #009688;
  background-color: white;
}

.siteList {
    cursor: pointer;
}

.sites {
  font: 14px "Raleway", sans-serif;
  font-weight: 500;
}

#close {
  float:right;
  display:inline-block;
  padding:2px 5px;
  cursor: pointer;
}

#sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 25%; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: #FFFFFF; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 10px;
  font-size: 13px;
  font-family: "Raleway", sans-serif;
}

#locationFS span {
  color: black;
  font-weight: bold;
}

.close {
  display: fixed;
  margin-right: 10px;
  text-align: center;
  padding: 3px 0;
  font-size: 17px;
  font-weight: 400;
  border: 0.5px solid #d3d3d3;
  opacity: 0.7;
  top: 0;
  border-radius: 30%;
  line-height: 10px;
  height: 12px;
  background-color: #d3d3d3;
}

.close:hover{
  background-color: #acacac;
  border: 0.5px solid #acacac;
}

/* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 25%; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: #FFFFFF; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding: 10px 8px 6px 0px;
  font-size: 12px;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  box-shadow: -5px 0px 60px -40px;
}

.sidenavFact {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 25%; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 3; /* Stay on top */
  background-color: #FFFFFF; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding: 0px 0px 0px 0px;
  top: 0;
  right: 10;
  display: none;
  font-size: 13px;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  margin-left: 8px;
}


.sidenavFact p {
  margin-right: 10px;
}

.sidenavFact b {
  font-weight: 550;
}

.sidenav .closebtn {
}

/* The navigation menu links */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 0px;
  text-decoration: none;
  font-size: 14px;
  font-family: "Raleway", sans-serif;
  color: #818181;
  display: block;
  width: 100%;
  margin-left: 10px;
}

/* The navigation menu links */
.sidenav ab, .dropdown-btn {
  padding: 6px 8px 6px 0px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 200;
  font-family: "Raleway", sans-serif;
  display: block;
  width: 100%;
  margin-left: 10px;
}

/* Catalogue Site Names */
.sidenav c, .dropdown-btn {
  padding: 6px 8px 6px 0px;
  text-decoration: none;
  font-size: 13px;
  font-family: "Raleway", sans-serif;
  color: #818181;
  display: block;
  width: 100%;
  margin-left: 10px;
}

/* Filter headers */
.sidenav f {
  padding: 6px 8px 0px 0px;
  text-decoration: none;
  /* text-transform: uppercase; */
  font-size: 12px;
  font-weight: 600;
  font-family: "Raleway", sans-serif;
  color: #818181;
  display: block;
  margin-left: 10px;
  cursor: default;
}

/* The navigation menu links */
.sidenav t {
  padding: 6px 8px 6px 0px;
  text-decoration: none;
  /* text-transform: uppercase; */
  font-size: 11px;
  font-family: "Raleway", sans-serif;
  color: #818181;
  display: block;
  margin-left: 10px;
}

/* The navigation menu links */
.sidenav h {
  padding: 6px 8px 6px 0px;
  font-weight: 300;
  text-decoration: none;
  /* text-transform: uppercase; */
  font-size: 15px; /* 32px */
  font-family: "Raleway", sans-serif;

  color: #000000;
  display: block;
  text-align: center;
  margin-left: 10px;
}

.newWindow {
  position: absolute;
  right: 0;
  top: 8px;
  padding-right: 7px;
  cursor: pointer;
  width: 10px;
  height: 10px;
}


.filterPanelHeader {
  background-color: white; /* Green */
  border: none;
  color: #818181;
  padding: 6px 8px 6px 0px;
  text-align: left;
  text-decoration: none;
  display: block;
  width: 100%;
  font-size: 13px;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  margin-left: 10px;
  cursor: auto;
}

.button {
  background-color: white; /* Green */
  border: none;
  color: #818181;
  padding: 6px 8px 6px 0px;
  text-align: left;
  text-decoration: none;
  display: block;
  font-size: 14px;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  cursor: pointer;
  margin-left: 10px;
}

.filterHeader {
  background-color: white; /* Green */
  border: none;
  color: #818181;
  padding: 6px 8px 6px 0px;
  text-align: left;
  text-decoration: none;
  display: block;
  font-size: 14px;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  cursor: pointer;
  margin-left: 10px;
}

.filter {
  height: 12px;
  width: 12px;
}

.button:focus {
  color: #818181;
}
.button:hover {
  color: black;
}

.button1 {
  width: 100%;
  font-size: 13px;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  /*margin-left: 20px; */
}

.button2 {
  margin-left: 0px;
  font-size: 11px;
  width: auto;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
}

.button3 {
  background-color: white; /* Green */
  border: none;
  color: #818181;
  padding: 6px 8px 6px 0px;
  text-align: left;
  text-decoration: none;
  margin-left: 0px;
  font-size: 10px;
  width: auto;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  display: inline;
  font-weight: 200;
  cursor: pointer;
}

.button3:hover {
  color: black;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .dropdown-btn-hover {
  color: #818181;
}

/* When you mouse over the navigation links, change their color */
.sidenav c:hover, .dropdown-btn-hover {
  color: #f1f1f1;
}

/* Style page content */
.main {
  margin-left: 200px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
  background-color: #FFFFFF;
  color: #c1c1c1;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #FFFFFF;
  width: 100%;
}

.less-container
{
  display: block;
  background-color: #FFFFFF;
  width: 100%;
}

.filter-container {
  background-color: #FFFFFF;
  width: 100%;
  padding-top: 10px;
}

.filter-box {
  padding-top: 3px;
  padding-bottom: 3px;
  height: 298px;
  overflow-y:auto;
  border-color: black;
  margin-left: 10px;
  border-radius: 5px;
  border: 1.5px solid #f1f1f1;
  box-shadow: inset 0px 0px 10px 0px #f1f1f1;

}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 12px;
  color: #000000;
}

.submit {
  margin-bottom: 20px;
  align-content: center;
  border: 1px solid grey;
  border-radius: 5px;
  font: 12px "Raleway", sans-serif;
  font-weight: 300;
  outline: 0;
  padding: 3px 13px 3px 13px;
  background-color: #f5f5f5;
}

.submit:hover {
  background-color: #c4c4c4;
  cursor: pointer;
}

.filterSubmitandClear {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  margin-left: 45px;
  margin-right: 45px;
}

.fullExtent {
margin-left: 15px;
margin-right: 15px;
position: relative;
display: flex;
justify-content: space-between;
}

.filter-headers {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.fullExtentbtn {
  border: 1px solid transparent;
  width: 190px;
  background-color: #cc3333;
  padding: 7px;
  font: 13px "Raleway", sans-serif;
  color: #fff;
  cursor: pointer;
  text-align: center;
  margin-right: 0px;
  transform: scale(0.9);
}

.fullExtentbtn:hover {
  background-color: #d96666;
}

.showall {
  margin-top: 5px;
  margin-bottom: 20px;
  border: 1px solid grey;
  border-radius: 5px;
  font: 13px "Raleway", sans-serif;
  font-weight: 300;
  outline: 0;
  padding: 3px 13px 3px 13px;
  background-color: #f5f5f5;
}


/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.twentysixpoint {
  line-height: 14pt;
}

.popup {
  width: auto;
}

.popup t {
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 19pt;
}

body {
  font: 16px Arial;
}

/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  right: 0;
  left: 0;
}

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font: 14px "Raleway", sans-serif;
}

input[type=text] {
  margin-right: 0px;
  width: 75%;
  background-color: #f1f1f1;
  font: 14px "Raleway", sans-serif;
  align-items: center;
  transform: scale(0.9);
}

input[type=submit] {
  background-color: #cc3333;
  color: #fff;
  cursor: pointer;
  font: 13px "Raleway", sans-serif;
  text-align: center;
  margin-right: 0px;
  transform: scale(0.9);
}

input[type=submit]:hover {
  background-color: #d96666;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  margin-left: 15px;
  margin-right: 0px;
  width: 70%;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}