html, body {
    height: 100%;
    /* overflow: hidden; */
    font-family: 'Jost', sans-serif;
  }
#map {
    height: 80%;
  }

.navbar{
    height: 10%;
    /* background-color: #FBFBF8; */
    /* background-color: #DFEBF1; */
    background-color: #DDE5EC;
    /* margin-bottom:0.2em; */
    border-bottom: 4px solid #4e82be;
    /* border-bottom: 4px solid #ab0202; */
  }

/*
.popover-header {
  font-family: 'Jost', sans-serif;
}

.popover-body {
  font-family: 'Jost', sans-serif;
}
*/
a {
    color: #233A5A;
  }
footer  {
    width: 100%;
    height: 10%;
    background-color: #d6dbdf;
    color: #4e82be;
    text-align: center;
    border-top: 4px solid #4e82be;
    /* margin-top: 0.5em; */
    /* padding: 0.5em; */
    /* position: absolute;  */
    /* bottom: 0; */
  }
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: none;
  }
.leaflet-container {
    font: 15px/1.5 'Jost', sans-serif;
  }
.leaflet-control-layers-expanded {
    background: rgba(255, 255, 255, 0);
  }

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

a, a:hover, a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}
/*
#sidebarnew {
    min-width: 200px;
    max-width: 200px;
    width: 200px;
    // position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
    background: #4e82be;
    // color: #fff;
    transition: all 0.3s;
}

#sidebarnew .sidebar-header {
  padding: 20px;
  background: #4e82be;
}

#sidebarnew ul.components {
  padding: 20px 0;
  border-bottom: 1px solid #4e82be;
}

#sidebarnew ul p {
  color: #fff;
  padding: 10px;
}

#sidebarnew ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
}
#sidebarnew ul li a:hover {
  color: #4e82be;
  background: #fff;
}

// #sidebarnew ul li.active > a, a[aria-expanded="true"] {
//  color: #fff;
//  background: #4e82be;
//} 
ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #4e82be;
}

#sidebarnew.active {
  margin-left: -300px;
}

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 150px;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  #sidebarnew {
      margin-left: -300px;
  }
  #sidebarnew.active {
      margin-left: 0;
  }
}
*/

/*
USED IN HELP.PUG FOR THE EXPANSION/MINIMISING OF SECTIONS
*/
.card, .card-header, .card-body, .card-footer{
  border-radius:0px !important;
  border-width: 0px 0px 0px 0px; 
  background-color: rgba(255, 255, 255, 0.2);
}

.card-header{
  padding: 0.25rem 0.25rem;
}

.mb-0 > a {
  display: block;
  position: relative;
}
.mb-0 > a:after {
  content: "+";
  position: absolute;
  right: 0;
}
.mb-0 > a[aria-expanded="true"]:after {
  content: "_"; // fa-chevron-up
}

.leaflet-verticalcenter {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  top: 50%; /* possible because the placeholder's parent is the map */
  right: 50%;
  transform: translateY(-50%); /* using the CSS3 Transform technique */
  /* padding-top: 10px; */
}

.leaflet-horizontalcenter {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  top: 50%; /* possible because the placeholder's parent is the map */
  right: 50%;
  transform: translateX(-50%); /* using the CSS3 Transform technique */
  /* padding-top: 10px; */
}

/* Styling for the loading rotater */
.rotater {
  /* margin: 100px auto; */
  width: 100px;
  height: 100px;
  position: relative;
  text-align: center;
  /* top: 250px;
  right: 250px; */
  
  -webkit-animation: sk-rotate 2.0s infinite linear;
  animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #eb344f;
  border-radius: 100%;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.textcurrent {
  /* color: white; */
  /* text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; */
  min-width: 150px;
  max-width: 450px;
  padding: 6px 8px;
  background: white;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 2px;
}

.datepicker {
  min-width: 200px;
  max-width: 200px;
  padding: 6px 8px;
  background: white;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  border-radius: 2px;
}

.latlngbox {
  min-width: 160px;
  max-width: 160px;
  padding: 6px 8px;
  background: white;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 2px;
}

.modal{
  position: absolute;
  z-index: 99987;
  /* overflow: visible !important; */
}

.panelContainer{
  margin-right: -15px;
  margin-left: -15px;
  cursor: auto;
}

.radio {
  margin: 16px 0;
  display: block;
  cursor: pointer;
}
.radio input {
  display: none;
}
.radio input + span {
  height: 18px;
  padding-left: 18px;
  display: block;
  position: relative;
}
.radio input + span:not(:empty) {
  padding-left: 30px;
}
.radio input + span:before, .radio input + span:after {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  left: 0;
  top: 0;
  position: absolute;
}
.radio input + span:before {
  background: #d1d7e3;
  transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2);
}
.radio input + span:after {
  background: #fff;
  transform: scale(0.78);
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}
.radio input:checked + span:before {
  transform: scale(1.04);
  background: #4e82be;
}
.radio input:checked + span:after {
  transform: scale(0.4);
  transition: transform 0.3s ease;
}
.radio:hover input + span:before {
  transform: scale(0.92);
}
.radio:hover input + span:after {
  transform: scale(0.74);
}
.radio:hover input:checked + span:after {
  transform: scale(0.4);
}

.panelInfo{
  cursor: auto;
}
input[type=text]{
  width: 80%;
  padding: 12px 15px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=number]{
  width: 60%;
  padding: 12px 15px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.areaSelect{
  width: 60%;
  padding: 12px 15px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.checkbox {
  margin: 16px 0;
  display: block;
  cursor: pointer;
}
.checkbox input {
  display: none;
}
.checkbox input + span {
  height: 18px;
  padding-left: 18px;
  display: block;
  position: relative;
}
.checkbox input + span:not(:empty) {
  padding-left: 30px;
}
.checkbox input + span:before, .checkbox input + span:after {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 3px;
  left: 0;
  top: 0;
  position: absolute;
}
.checkbox input + span:before {
  background: #d1d7e3;
  transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2);
}
.checkbox input + span:after {
  background: #fff;
  transform: scale(0.78);
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}
.checkbox input:checked + span:before {
  transform: scale(1.04);
  background: #4e82be;
}
.checkbox input:checked + span:after {
  transform: scale(0.4);
  transition: transform 0.3s ease;
}
.checkbox:hover input + span:before {
  transform: scale(0.92);
}
.checkbox:hover input + span:after {
  transform: scale(0.74);
}
.checkbox:hover input:checked + span:after {
  transform: scale(0.4);
}