/* Bootstrap 0verides */
.alert {
  position: relative;
  z-index: 75;
}

a {
  text-decoration: none;
  
}

.nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.dropdown-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.dropdown-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.modal-fluid {
  /*overflow-x:initial;*/
  /*overflow-y:initial;*/
  overflow:initial;
}

/* .modal-body { */
  /* text-align: center; */
  /* height: 90vh; */
  /* overflow: auto; */
  /*overflow-x:hidden;*/
  /*overflow-y:auto;*/
  /* margin-left: auto; */
  /* margin-right: auto; */
/* } */

/* .modal-dialog { */
  /* max-width: 90%; */
/* } */

.table {
  font-size: 13px !important;
}

.td {
  white-space: nowrap !important;
}
/* Bootstrap 0verides */

.navbar-brand-md-size {
  font-size: 14px;
}

.lus-dt-button {
  max-width: 40px;
  align-items: center;
  justify-items: center;
  justify-content: center;
}

.locaters-header {
  top: 50px;
  width: 250px;
  font-size: 0.7em;
  /* height: 200px; */
  z-index: 50;
}

.locaters-logo {
  /* top: 50px; */
  width: 100px;  
  /* z-index: 50; */
}

.mapahref {
  border-style: solid;
  border-color:white;
  border-width: 3px;
  transition: all 1.0s ease;
}

.mapahref:hover {
  border-style: solid;
  border-color: #0000ff;
  border-width: 3px;
  /* transition: all 1.0s ease; */
}

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
  .navbar-brand-md-size {
    font-size: 22px;
  }
  .locaters-header {
    top: 50px;
    width: 410px;
    font-size: 1em;
    /* height: 200px; */
    z-index: 100;
  }
  .locaters-logo {
    /* top: 50px; */
    width: 200px;
    z-index: 50;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  
}

body {
  font-family: Roboto, Arial;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* Boxicons attempted overides */
.bx-xs, .bx-sm {
  margin: 0;
  padding: 0;
}

i {
  margin: 0;
  padding: 0;
}
/* Boxicons attempted overides */

.container-fluid {
  height: 100vh !important;
}

.cursor-pointer {
  cursor: pointer;
}

.ml-20 {
  margin-left: 20em;
}
.mr-20 {
  margin-right: 20em;
}

header {
	float: left;
	width: 100%;
	height: 9vh;
	background-color: black;	
}

.lus_datatable tr:hover td {
  background-color: rgb(0, 123, 255);
  color: white;
  cursor: pointer;
}

.navbardiv {
  height: 50px;
}

.main-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
/*  align-items: center; */
  position: absolute;  
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
}

.main-divnew {
/*  align-items: center; */
  position: absolute;  
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
/*  padding: 50px; */
}

.map-div {
  /* position: relative; */
/*  width: calc(100% - 110px); */
/*  flex: 1; */
  /* flex: 1 0 auto; */
  width: 100%;
  height: 100%;
/*  width: 700px; */
/*   padding-top: 48px; */
  padding-top: 0px;
}

.coords {
  background-color: rgb(0, 123, 255);
  color: white;
  font-size: 14px;
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 25px;
  bottom: 65px;
  left: 80px;
  border: none;
  border-radius: 8px;
  z-index: 50;
}

.login-success {
  position: absolute;
  top: 65px;
  left: 110px;
  width: calc(100% - 220px);
}

.main-forms-div {
  position: absolute;
  top: 0px;
  left: 0px;
  min-height: 100%;
  min-width: 100%;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.relative-div {
  position: relative;
}

.show-pwd {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 30px;
  right: 10px;
  cursor: pointer;
}

.slider {
  appearance: none;
  width: 200px;
  height: 8px;
  background: rgb(0, 123, 255); 
  outline: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 20px;
  background: rgb(52, 58, 64);    
  cursor: pointer;
}

.slider::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 20px;
  background: rgb(52, 58, 64);    
  cursor: pointer;
}

.left-sidebar-old {
/*  background-color: grey; */
/*  color: white; */
  padding-top: 65px;
  width: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.left-sidebar {
  /*  background-color: grey; */
  /*  color: white; */
  position:absolute;
  top: 0px;
  left: 0px;
  height: 100vh;
  padding-top: 70px;
  width: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 50;
}

.left-sidebar li {
  height: 50px;
  margin-top: 10px;
  list-style: none;
  display: flex;  
  align-items: center;
  cursor: pointer;
}

.left-icon-div {
  position: relative;
  color: rgb(0, 123, 255);;
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  cursor: pointer;
  transition: all 1.0s ease;
}

.left-icon-div .lus-tooltip, .left-icon-div .right-tooltip {
  position: absolute;
  height: 45px;
  z-index: 100;
/*  background-color: lightgrey; */
  background-color: none;
  color: white;
  padding: 0;
  margin: 0;
  border: none;
  opacity: 0;
  transition: all 1.0s ease;
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
}

.left-icon-div .lus-tooltip {
  top: 0px;
  left: 54px;
}

.left-icon-div .right-tooltip {
  top: 0px;
  right: 55px;
}

.left-icon-div .lus-tooltip .tip-arrow,
.left-icon-div .right-tooltip .tip-arrow {
  background-color: none;
  color: rgb(52, 58, 64);
  padding: 0;
  margin-top: 5px;
}

.left-icon-div .lus-tooltip .tip-text {
  background-color: rgb(52, 58, 64);
  padding: 10px 15px 4px 15px;
  margin-left: -8px;
  border-radius: 10px;
}

.left-icon-div .right-tooltip .tip-text {
  background-color: rgb(52, 58, 64);
  padding: 10px 15px 4px 15px;
  margin-right: -9px;
  border-radius: 10px;
}

.left-icon-div:hover {
  background-color: lightgrey;
  border-radius: 10px;
/*  background-color: rgb(0, 123, 255); */
}

.active-div {
  background-color: lightgrey;;
}

.left-icon-div:hover .lus-tooltip, .left-icon-div:hover .right-tooltip {
    opacity: 1;
}

.leftpanels-old {
  position: relative;
  background-color: lightgrey;
  padding: 50px 5px 3px 0px;
  min-width: 270px;
  max-width: 270px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: left;
  transition: all 0.5s ease;
}

.leftpanels {
  position: absolute;
  top: 0px;
  left: 55px;
  z-index: 75;
  background-color: lightgrey;
  padding: 50px 5px 3px 5px;
  min-width: 270px;
  max-width: 270px;
  height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: left;
  /* transition: all 0.5s ease; */
}

.panel-close {
  position: absolute;
  font-size: 24px;
  cursor: pointer;
}

.panel-close-left {
  top: 50px;
  right: 10px;
}

.panel-close-right {
  top: 50px;
  right: 10px;
}

.leftpanel-legend {
  min-width: 325px;
  max-width: 325px;
}

/* .leftpanels.close {  opacity: 1; } */

.right-sidebar-old {
  position: relative;
  padding-top: 65px;
  width: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.right-sidebar {
  /*  background-color: grey; */
  /*  color: white; */
  position:absolute;
  top: 0px;
  right: 0px;
  height: 100vh;
  padding-top: 70px;
  width: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 50;
}

.rightpanels-old {
  position: relative;
  background-color: lightgrey;
  padding: 50px 5px 5px 5px;
  min-width: 300px;
  max-width: 300px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: left;
}

.rightpanels {
  position: absolute;
  top: 0px;
  right: 50px;
  height: 100vh;
  background-color: lightgrey;
  padding: 50px 5px 5px 5px;
  min-width: 300px;
  max-width: 300px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: left;
  z-index: 75;
}


.legend {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.legend-desc {
  margin-left: 2px;
}

.legend-comms {
  color: #990099;
  white-space: nowrap;
  min-width: 58px;
  display: flex;
  justify-content: center;
}

.legend-drain {
  color: #007299;
  white-space: nowrap;
  min-width: 58px;
  display: flex;
  justify-content: center;
}

.legend-elec {
  color: #7f3f00;
  white-space: nowrap;
  min-width: 58px;
  display: flex;
  justify-content: center;
}

.legend-gas {
  color: #009900;
  white-space: nowrap;
  min-width: 58px;
  display: flex;
  justify-content: center;
}

.legend-sewer {
  color: #009999;
  white-space: nowrap;
  min-width: 58px;
  display: flex;
  justify-content: center;
}

.legend-water {
  color: #0000ff;
  white-space: nowrap;
  min-width: 58px;
  display: flex;
  justify-content: center;
}

.legend-unid {
  color: black;
  white-space: nowrap;
  min-width: 58px;
  display: flex;
  justify-content: center;
}

.ol-div {
  position: absolute;
  top: 50px;
  left: 75px;
  width: 40px;
  height: 240px;
/*  background-color: red; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 25;
}


.ol-control button {
  background-color: rgb(0, 123, 255);
  color: white;
  font-size: 26px;
  border: none;
  border-width: 0px;
  border-radius: 50%;
  margin: 0px;
  width: 30px;
  height: 30px;
}


/* Style the maps custom controls */
.ol-scale-line {
  position: absolute;
  background-color: rgb(0, 123, 255);
  left: 70px;
}


.ol-zoom {
  position: absolute;
  top: 20px;
  left: 0px;  
  background-color: none;
  border: none;
  border-width: 0px;
  padding: 0px;
  margin: 0px;
}


/*
.ol-zoom-in {
  top: 20px;
  left: 0px;
  background-color: none;
  border: none;
  border-width: 0px;
  border-radius: 50%;
}
*/

.ol-rotate {
  position: absolute;
  background-color: none;
  width: 30px;
  height: 30px;
  top: 190px;
  left: 0px;
  border: none;
  border-width: 0px;
  border-radius: 50%;
  padding: 0px;
  margin: 0px;
}

.ol-full-screen {
  position: absolute;
  top: 110px;
  right: 12px;
}

.rotate-clock {
  position: absolute;
  background-color: none;
  width: 30px;
  height: 30px;
  top: 86px;
  left: 0px;
  border: none;
  border-width: 0px;
  border-radius: 50%;
  padding: 0px;
  margin: 0px;
}

.rotate-anticlock {
  top: 121px;
}

/*
.rotate-anticlock {
  position: absolute;
  background-color: none;
  width: 30px;
  height: 30px;
  top: 121px;
  left: 20px;
  border: none;
  border-width: 0px;
  border-radius: 50%;
  padding: 0px;
  margin: 0px;
}
*/

.geolocate {  
  position: absolute;
  background-color: none;
  width: 30px;
  height: 30px;
  top: 155px;
  left: 0px;
  border: none;
  border-width: 0px;
  border-radius: 50%;
  padding: 0px;
  margin: 0px;
}


div.fill {
   width: 100%;
   height: 100%;
}

.footer{
 /*  float: left;*/
/*  left: 0;*/
/*	width: 85%;*/
	height: 45px;
/*	background-color: black; */
}

.margin-small-forms {
  width:50%;

}

.form-group.required label:before{
  color: red;
  font-size: 22px;
  content: "*";
  position: absolute;
  /*margin-left: -10px;*/
}

.sidenav {
  /*  float: left; */
    height: 93%;
    width: 15%;
    position: fixed;
    z-index: 2;
    top: 48px;
    right: 0;
    background-color: grey;
    overflow-x: hidden;
    transition: 0.5s;
    display: none;
  /*  padding-top: 0px;*/
  /*  padding: 5px 0px 5px 5px;*/
  }
  
  .sidenav a {
  /*  padding: 5px 5px 5px 12px;*/
    text-decoration: none;
    /*font-size: 25px;*/
    /*color: #818181;*/
  /*  display: block;*/
    transition: 0.5s;
  }
  
  .sidenav a:hover {
  /*  background-color: skyblue;*/
    color: #f1f1f1;
  }
  
  .sidenav a.sel:hover {
    background:steelblue;
  }
  
  .sidenav a.sel:active {
    background: skyblue;
  }

  .sidenav .closebtn {
  /*  position: relative;*/
  /*  top: 0;*/
    right: 0;
    font-size: 24px;
  /*  margin-left: 10px;*/
  }
  

/* .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th  {
  margin:0;
  padding: 3px;
} */

/* .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td  {
  margin:0;
  padding: 3px;
} */

.layertable
{
  vertical-align: middle;
	width:100%;
  padding: 0;
}

.layertable td
{
  vertical-align: middle;
	width:50%;
  padding: 0;
}

.layerslider
{
	width:80%;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

.ol-popup {
    display: none;
    position: absolute;
    background-color: white;
/*    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2); */
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;   
    height: auto;
    width: auto;
    min-width: 600px;
    max-height:400px;  
    overflow: auto;      
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.ol-popup-closer:after {
    content: "X";
}

.ol-attribution a {
    text-decoration: none;
    color: #666;
    font-family: sans-serif;
    font-size: 100%;
}

.layer-switcher {
    top: 0.5em;
    right: 0.5em;
    text-align: left;
}

#popup-content>ul>li:nth-child(even) {
    background-color: #eee;
}

#popup-content ul {
    list-style-type: none;
    padding-left: 0;
}

#popup-content li {
    margin-bottom:0.25em;
}

 /* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 8px 10px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
/*   border: 1px solid #ccc; */
  border-top: none;
}

.myUL {
  padding: 0px 5px 5px 5px;
  margin: 0;
  list-style: none;
}

 /* Remove default bullets */
 .myUL ul {
  padding: 0;
  margin: 0;
  list-style: none;
 /*list-style-type: circle;
  */
}

.myUL li {
  padding: 0px 5px 0px 10px;
  margin: 0;
  list-style: none;
 /*list-style-type: circle;
  */
}

.myUL label {
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.myUL i {
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* Style the caret/arrow */
.layers-caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
/*.layers-caret:before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}*/

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
/*.layers-caret .caret-down::before {
   transform: rotate(90deg);
} */

.layers-caret.rotate-caret {
  transform: translateY(-50%) rotate(90deg);
}

/* Hide the nested list */
.nested {
  /* display: none; */
  list-style-type: none;
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}