* {box-sizing: border-box;}

body{
  background-color: #f8f8f8;
  color: #212529;
  padding-top: 56px;
}
body.dark-mode {
  background-color: #444;
  color: #f8f9fa;
}

a {
  color: #3295ff;
  text-decoration: none;
}
a:link{
  color: #3295ff;
  text-decoration: none;
}
a:hover{
  color: #7fbdff;
  text-decoration: none;
}
a:visited {
  color: #3295ff;
  text-decoration: none;
}
a:visited:hover {
  color: #7fbdff;
  text-decoration: none;
}

.navbar{
  background-color: #f1f1f1!important;
  border-bottom: 1px solid rgb(218, 218, 218);
  color: #4e4e4e!important;
  width: 100%;
  box-sizing: border-box;
}

/* Add this to handle overflow issues */
.navbar-collapse {
  overflow: visible;
}

.nav-link{
  color: #4e4e4e!important;

}
body.dark-mode .nav-link{
  color: rgba(255,255,255,.55)!important;

}
body.dark-mode .navbar{
  background-color: rgb(51, 51, 51)!important;
  border-bottom: 1px solid #222;
}

.navbar-toggler {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.dropdown-menu-nav{
  background-color: #c5c5c5;
  color: #333;
}

body.dark-mode .dropdown-menu-nav{
  background-color: rgba(33, 37, 41, 1);
  color: #f1f1f1;
}
body.dark-mode .dropdown-item-nav{
  background-color: rgba(33, 37, 41, 1);
  color: #f1f1f1;
}
body.dark-mode .dropdown-item-nav:hover{
  background-color: rgb(77, 86, 95);
  color: #f1f1f1;
}
.container-fluid{
  max-width: 1300px;
}
.location-search{
  width: 400px!important;
}

.location-search input{
  background-color: #f9f9f9;
  /*background-image: linear-gradient(-11deg, rgb(51, 51, 51), rgb(37, 42, 46), rgb(51, 51, 51));*/
  color: #ccc;
  border-color: #a8a8a8;
}

body.dark-mode input{
  background-color: rgb(51, 51, 51);
  /*background-image: linear-gradient(-11deg, rgb(51, 51, 51), rgb(37, 42, 46), rgb(51, 51, 51));*/
  color: #f1f1f1!important;
  border-color: #0d6efd;
}

body.dark-mode input:focus{
  background-color: #444!important;
  color: #f1f1f1;
  outline: none!important;
  border-color: #0d6efd!important;
  box-shadow: none!important;
}

input:focus{
  background-color: #f9f9f9!important;
   outline: none!important;
   box-shadow: inset  0 0 5px #7fbdff!important;
   border-color: #7fbdff!important;
}


.autocomplete-list{
  width: 400px!important;
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 400px;
  z-index: 2;
}

.input-wrapper{
  position: relative;
}

.autocomplete-list2{
  width: 100%!important;
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 400px;
  z-index: 2;
}

.compare-search-form{
  border: 1px solid #dedede; background-color: #dedede;
}

body.dark-mode .compare-search-form{
  border: 1px solid rgba(0, 0, 0, 0.125);
  background-color: #303030;
}

body.dark-mode .autocomplete-list .list-group-item{
  background-color: #333!important;
  color: #f1f1f1
}

body.dark-mode .autocomplete-list .list-group-item:hover{
  background-color: #444!important;
  color: #f1f1f1
}
body.dark-mode .autocomplete-list2 .list-group-item{
  background-color: #333!important;
  color: #f1f1f1
}

body.dark-mode .autocomplete-list2 .list-group-item:hover{
  background-color: #444!important;
  color: #f1f1f1
}

.content{
  background-color: #f1f1f1;
  color: #333;
}

body.dark-mode .content{
  background-color: #333;
  color: #f1f1f1;
}

/* title tags */
h1 {
  font-size: 1.25rem; 
  margin-bottom: 1rem
}

h2 {
  font-size: 1.0rem;
  margin-bottom: 1rem;
  margin-top: 1.5rem

}

h3 {
  font-size: 1.0rem; 
}

h4 {
  font-size: 1.25rem; 
}

h5 {
  font-size: 1rem; 
}

h6 {
  font-size: 0.875rem; 
}
p{ line-height: 1.7;}

#map-icon{
  border: 4px solid #f1f1f1;
  cursor: pointer;
}

body.dark-mode #map-icon{
  border: 4px solid #333;
  cursor: pointer;
}

#map { height: 100%; width: 100%;
border-radius: 5px;
border: 1px solid #444; }

.map-modal-dialog {
    height: 90%;
}
.map-modal-content {
    height: 100%;
}
.map-modal-body {
    height: 100%;
}
  /* Custom styles for the popup */
.map-popup .leaflet-popup-content-wrapper {
    background: #f1f1f1;
    color: #333;
    border-radius: 5px;
    padding: 15px;
}
body.dark-mode .map-popup .leaflet-popup-content-wrapper {
    background: #333;
    color: #f8f9fa;
    border-radius: 5px;
    padding: 15px;
}
.leaflet-control-attribution{
  background-color: #444!important;
  color: #888;
}
.map-popup .leaflet-popup-tip {
    background: #2c3e50;
}
.map-popup .leaflet-popup-content {
    margin: 0;
}
.map-popup .leaflet-popup-content {
    font-size: 16px;
}
.map-popup .leaflet-popup-content p {
  font-size: 16px;
}
body.dark-mode .leaflet-control-zoom-in{
  background-color: #222;
  color: #0d6efd;
}
body.dark-mode .leaflet-control-zoom-out{
  background-color: #222;
  color: #0d6efd;
}
body.dark-mode .leaflet-bar a{
  border-color: #444;
}
#climate-chart{
  width: 100%;
  cursor: pointer;
}

.social-btn{
  border: 1px solid #3295ff;
  border-radius: 5px;
  width: 24px;
  height: 24px;
  text-align: center;
  margin-left: 8px;
  margin-bottom: 4px;
}
.social-btn:hover {
  color: #7fbdff;
  border-color: #7fbdff;
}

.enlarge-btn{
  border: 0px solid #3295ff;
  border-radius: 5px;
 
  height: 24px;
  text-align: center;
  margin-right: 8px;
  margin-bottom: 4px;
}
.enlarge-btn:hover {
  color: #7fbdff;
  border-color: #7fbdff;
}


/* image slider *************************************************************/
.img-comp-containerxx {
  position: absolute;
  height: 1024px; /*should be the same height as the images*/
}

.img-comp-container {
  width: 100%;
  max-width: 1226px;
  position: relative;
  overflow: hidden;
}
.img-comp-container::before {
  content: "";
  display: block;
  padding-bottom: 51.8%; /* Aspect ratio (height / width * 100%) */
}
.img-comp-container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.img-comp-img {
  position: absolute;
  height: 100%;
  overflow: hidden;
}

.img-comp-img img {
  display: block;
}

.img-comp-slider {
  position: absolute;
  z-index: 9;
  cursor: ew-resize;
  /*set the appearance of the slider:*/
  width: 60px;
  height: 67%;
  background: linear-gradient(to right, 
  rgba(255, 255, 255, 0) 0%, 
  rgba(255, 255, 255, 0) 45%, 
  rgba(255, 255, 255, 1) 50%, 
  rgba(255, 255, 255, 0) 55%,
  rgba(255, 255, 255, 0) 100%);
  opacity: 0.7;
}

.img-comp-slider i {
  font-size: 14px;
  color: white;
  position: absolute;
  top:calc(50% - 10px)
}
.img-comp-slider .fa-chevron-left{
  left: 0px;
  margin: 10px;
}
.img-comp-slider .fa-chevron-right{
  right: 0px;
  margin: 10px;

}

.chart-container {
  border: 1px solid rgba(0, 0, 0, 0.125);
  background-color: #303030;
  border-bottom: 0px;
  position: relative;
  width: 100%; 
  padding-top: 51.79%;
  margin-bottom: 0px;
}

.chart-container #climate-chart {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.compare-container {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-bottom: 0px;
  position: relative;
  /*display: inline-block;*/
  width: 100%; 
}
.table-dark{
  --bs-table-bg: #3a3a3a;
  --bs-table-striped-bg: #4e4e4e;
  --bs-table-striped-color: #f1f1f1;
  --bs-table-active-bg: #dfe0e1;
  --bs-table-active-color: #f1f1f1;
  --bs-table-hover-bg: #e5e6e7;
  --bs-table-hover-color: #333;
  color: #f1f1f1;
  border-color: #dfe0e1;
}


.table-light{
  --bs-table-bg: #d9d9d9;
  --bs-table-striped-bg: #ebebeb;
  --bs-table-striped-color: #333;
  --bs-table-active-bg: #e0e0e0;
  --bs-table-active-color: #333;
  --bs-table-hover-bg: #e5e5e5;
  --bs-table-hover-color: #333;
  color: #333;
  border-color: #dfe0e1;
}

.modal-xxl {
  max-width: 1440px;
  width: calc(100% - 80px);
  user-select: none;
}
.modal-backdrop
{
    opacity:0.8 !important;
}
.modal-content{
  background-color: #c5c5c5;
  color: #333;
}

body.dark-mode .modal-content{
  background-color: #333;
  color: #f1f1f1;
}

.modal-body-center {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;  
}

.btn-close-headless {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 999;
}
#btn-close-map{
  width: 25px;
  height: 25px;
}
body.dark-mode .btn-close{
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode .card{
  background-color: #303030;
  color: #cacaca;
}
body.dark-mode .card-list{
  background-color: #303030;
}

body.dark-mode .custom-group .custom-group-item{
  background-color: #303030!important;
}

body.dark-mode .custom-group .custom-group-item:hover{
  background-color: #333!important;
}

.custom-group-item {
  padding-left: 2.5rem;
}

body.dark-mode .custom-group .sidebar-group-item{
  background-color: #333!important;
}

body.dark-mode .custom-group .sidebar-group-item:hover{
  background-color: #3b3b3b!important;
}

.sidebar-group-item {
  padding-left: 2.5rem;
}


.custom-group {
  list-style-type: none; /* Remove default bullets */
  border: none!important;
  border-radius: 0px;
}
.custom-group .ico-flag::before {
  content: "\f024"; /* Unicode for Font Awesome icon (check-circle) */
  font-family: "Font Awesome 5 Free"; /* Ensure correct font is used */
  font-weight: 900; /* Use the solid variant of the icon */
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  color: #007bff; /* Customize icon color */
}
.custom-group .ico-airplain::before {
  content: "\f072"; /* Unicode for Font Awesome icon (check-circle) */
  font-family: "Font Awesome 5 Free"; /* Ensure correct font is used */
  font-weight: 900; /* Use the solid variant of the icon */
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  color: #007bff; /* Customize icon color */
}
.custom-group .ico-airplain:hover::before {
  color: #7fbdff;
}
.custom-group .ico-change::before {
  content: "\e4bb"; /* Unicode for Font Awesome icon (check-circle) */
  font-family: "Font Awesome 5 Free"; /* Ensure correct font is used */
  font-weight: 900; /* Use the solid variant of the icon */
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  color: #007bff; /* Customize icon color */
}
.custom-group .ico-change:hover::before {
  color: #7fbdff;
}
.custom-group .ico-compare::before {
  content: "\f422"; /* Unicode for Font Awesome icon (check-circle) */
  font-family: "Font Awesome 5 Free"; /* Ensure correct font is used */
  font-weight: 900; /* Use the solid variant of the icon */
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  color: #007bff; /* Customize icon color */
}
.custom-group .ico-compare:hover::before {
  color: #7fbdff;
}
.custom-group .ico-flag::before {
  content: "\f024"; /* Unicode for Font Awesome icon (check-circle) */
  font-family: "Font Awesome 5 Free"; /* Ensure correct font is used */
  font-weight: 900; /* Use the solid variant of the icon */
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  color: #007bff; /* Customize icon color */
}
.custom-group .ico-flag:hover::before {
  color: #7fbdff;
}


.custom-list {
  list-style-type: none; /* Remove default bullets */
  padding-left: 0;
}
.custom-list li {
  position: relative;
  padding-left: 25px; /* Adjust padding to make space for the icon */
  line-height: 28px;
}
.custom-list .ico-flag::before {
  content: "\f024"; /* Unicode for Font Awesome icon (check-circle) */
  font-family: "Font Awesome 5 Free"; /* Ensure correct font is used */
  font-weight: 900; /* Use the solid variant of the icon */
  position: absolute;
  left: 0;
  top: 0;
  color: #007bff; /* Customize icon color */
}
.custom-list .ico-flag:hover::before {
  color: #7fbdff;
}
.custom-list .ico-airplain::before {
  content: "\f072"; /* Unicode for Font Awesome icon (check-circle) */
  font-family: "Font Awesome 5 Free"; /* Ensure correct font is used */
  font-weight: 900; /* Use the solid variant of the icon */
  position: absolute;
  left: 0;
  top: 0;
  color: #007bff; /* Customize icon color */
}
.custom-list .ico-airplain:hover::before {
  color: #7fbdff;
}
.custom-list .ico-cricle_arrow_right::before {
  content: "\f0a9"; /* Unicode for Font Awesome icon (check-circle) */
  font-family: "Font Awesome 5 Free"; /* Ensure correct font is used */
  font-weight: 900; /* Use the solid variant of the icon */
  position: absolute;
  left: 0;
  top: 0;
  color: #007bff; /* Customize icon color */
}
.custom-list .ico-cricle_arrow_right:hover::before {
  color: #7fbdff;
}

.custom-list .ico-compare::before {
  content: "\f422"; /* Unicode for Font Awesome icon (check-circle) */
  font-family: "Font Awesome 5 Free"; /* Ensure correct font is used */
  font-weight: 900; /* Use the solid variant of the icon */
  position: absolute;
  left: 0;
  top: 0;
  color: #007bff; /* Customize icon color */
}
.custom-list .ico-compare:hover::before {
  color: #7fbdff;
}

.custom-list .ico-change::before {
  content: "\e4bb"; /* Unicode for Font Awesome icon (check-circle) */
  font-family: "Font Awesome 5 Free"; /* Ensure correct font is used */
  font-weight: 900; /* Use the solid variant of the icon */
  position: absolute;
  left: 0;
  top: 0;
  color: #007bff; /* Customize icon color */
}
.custom-list .ico-change:hover::before {
  color: #7fbdff;
}


footer{
  width: 100%;
  background-color: #f1f1f1;
  color: #333;
  border-top: 1px solid rgb(218, 218, 218)

}
body.dark-mode footer{
  width: 100%;
  background-color: #333;
  color: #f1f1f1;
  border-top: #222
}

footer span{
  font-size: 13px;
}
footer li{
  font-size: 22px;
}

.err{
  padding-top: 0px;
}
body.err .container{
  max-width: 700px;
  margin-top: 10%;
}
body.err h1{
  font-size: 5rem;
  color: #c2c2c2;
}
body.err p{
  font-size: 1.5rem;
  color: #c2c2c2;
}

body.err a{
  color: #dddddd;
}

body.err small{
  font-size: 1rem;
}
.err_h{
  border-bottom: 1px solid #666;
}
.err_f{
  border-top: 1px solid #666;
}

@media (max-width: 992px) {
  body.err .container{
    margin-top: 10px;
  }
  body{
    padding-right: 0 !important 
  }
  nav{
    padding-right: 0 !important 
  }
  .offcanvas-collapse {
    position: fixed;
    top: 56px; /* Height of navbar */
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #333;
    transition: transform .2s ease-in-out, visibility .2s ease-in-out;
  }
  .offcanvas-collapse.open {
    visibility: visible;
    transform: translateX(-100%);
  }

  .navbar-nav-first {
    margin-top: 1rem !important; /* Adjust this value as needed */
  }
  .container{
      padding: 0px;
      min-width: 100%;
  }

  .container-fluid{
    padding-left: 0px!important;
  }

  
  .location-search{
    width: 100%!important;
  }
  #location-search-wrapper{
    margin-top: 20px!important;
    margin-bottom: 10px!important;
  }

  .autocomplete-list{
    left: 0px;
    width: 100%!important;
    z-index: 2;
  }

  .content {
      margin: 0 !important;
      border-radius: 0px!important;
    }
  .title-bar {
    margin-top: 0 !important;
    border-radius: 0px!important;
  }
  .modal-xxl {
    max-width: 1440px;
    width: 100%;
  }
  .modal-dialog{
    margin: 0px!important;
  }
  .btn-close-headless {
    right: 8px;
    top: 8px;
    width: 0.5em!important;
    height: 0.5em!important;
  }
  table{
    font-size: 11px;
  }

  .row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0px;
    padding-left: calc(var(--bs-gutter-x)* .5);
}

.modal-dialog.map-modal-dialog {
  max-width: 100%;
  width: 100%;
  height: 100%;
  margin: 0;
}

.modal-content.map-modal-content {
  height: 100%;
  border: none; /* Remove borders if desired */
  border-radius: 0; /* Remove border-radius if desired */
}

.rounded {
  border-radius: 0 !important; /* Override the border radius */
}
.card-sidebar{
  border-radius: 0px;
  margin-top: 0px!important;
}
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}