* { box-sizing: border-box; }

header {
    background: #d8ebe5;
    order-radius: 0;
    padding: 3rem 2.5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

h1 {
    color: #011f51;
}

h2 {
    color: #108295;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: block;
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 500; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
  /*text-align: center;*/
}
#spinner{
  width: 8rem;
  height: 8rem;
  }

#spinner-content {
  align-items: center;
  justify-content: center;
  top: 50%;
  right: 50%;
  position: fixed;
  }

.invisible-overlay{
z-index: 9000;
    position: absolute;
    width: 100%;
    height: 50%;

}
.disabled-div {
    pointer-events: none;
    opacity: 0.4;
}
.nav-link {
    color:#108295;
}

.nav-link:hover{
    color:#1E7387;
}

.btn-lgl{
    --bs-btn-color: #fff;
    --bs-btn-bg: #108295;
    --bs-btn-border-color: #108295;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1E7387;
    --bs-btn-hover-border-color: #1E7387;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1E7387;
    --bs-btn-active-border-color: #1E7387;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #108295;
    --bs-btn-disabled-border-color: #108295;
}
.btn-outline-lgl {
    --bs-btn-color: #108295;
    --bs-btn-border-color: #108295;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #108295;
    --bs-btn-hover-border-color: #108295;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #108295;
    --bs-btn-active-border-color: #108295;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #108295;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #108295;
    --bs-gradient: none;
}
.btn-sm{
 font-size: 10px;
 padding: 3px;
 min-width:26px;
 min-height:23px;
}
.text-lgl{
    color: #108295;
}

.text-sm{
 font-size: 0.7em;
}
.bg-lgl {
    background-color: rgba(16,130,149, var(--bs-bg-opacity)) !important;
}
.clickable{
    cursor: pointer;
}
.accordion-button:not(.collapsed) {
 /* color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-bg);
  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);*/
  background-color: #d8ebe5;
  /* border: var(--bs-accordion-border-width) solid #108295;*/
}
.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;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

.closebtn {
  padding-left: 10px;
  color: #108295;
  font-weight: bold;
  float: right;
  font-size: 20px;
  cursor: pointer;
}

.closebtn:hover {
  color: #000;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch-lg{
  position: relative;
  display: inline-block;
  width: 100px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #108295;
}

input:focus + .slider {
  box-shadow: 0 0 1px #108295;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.switch-lg input:checked + .slider:before {
  -webkit-transform: translateX(66px);
  -ms-transform: translateX(66px);
  transform: translateX(66px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/* class on-off*/
.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+ .slider .on
{
    display: block;
}

input:checked + .slider .off
{
    display: none;
}
/*leaflet */

.map{
    height:700px;
}
/*https://www.geoapify.com/create-custom-map-marker-icon*/
.marker-pin {
  width: 17px;
  height: 17px;
  border-radius: 50% 50% 50% 0;
  /*background: #c30b82;*/
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
}

/* to draw white circle*/
.marker-pin::after {
    content: '';
    width: 10px;
    height: 10px;
    margin: 4px 0 0 4px;
    background: #fff;
    position: absolute;
    border-radius: 50%;
 }

/* to align icon*/
.custom-div-icon i {
   position: absolute;
   width: 22px;
   font-size: 22px;
   left: 0;
   right: 0;
   margin: 10px auto;
   text-align: center;
}

.leaflet-tooltip {
    pointer-events: auto;
    cursor:pointer;
}

.img-icon {
    max-width: 20px;
}