.navbar {
  color: white;
  background-color: #213f48;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: white;
}
.navbar-default .navbar-brand {
  color: white;
  font-size: 1.5em;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: white;
  background-color: #257f9e;
}
.navbar-default .navbar-toggle {
  border-color: #87ba31;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #257f9e;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #213f48;
}
.paginate_button.active, .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
  background-color: #257f9e !important;
  color: white !important;
}

.pagination>li>a, .pagination>li>span {
  color: #213f48 !important;
}
/*
.ghoverlabel {
  padding: 10px;
  border-radius: 5px;
  background: white;
  color: black;
} */

#form-control {
  align-self: center;
  width: 100% !important;
}

div.form-group.has-feedback {
  width: 100% !important;
}
body {
  font-family: 'Roboto', sans-serif;
}
.header {
  background-color: #213F48;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.scorecards-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
}
.scorecard {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #213F48;
  padding: 15px;
  border-radius: 5px;
  text-align: center;
}
.header .picker-input, .header h4, .header div {
  color: white;
}
.bootstrap-select .btn {
  background-color: #213F48;
  border: 3px solid #257F9E;
  color: white;
}
.bootstrap-select .btn:hover,
.bootstrap-select .btn:focus {
  background-color: #257F9E;
  color: white;
}
.bootstrap-select .dropdown-menu {
  background-color: #213F48;
  border: 3px solid #257F9E;
}
.bootstrap-select .dropdown-menu li a {
  color: white;
}
.bootstrap-select .dropdown-menu li a:hover {
  background-color: #257F9E;
  color: white;
}

/* Map Controls Styling */
#trash-map-controls {
  position: fixed;
  top: 80px;
  right: -350px;
  width: 350px;
  height: 100%;
  background-color: #213F48;
  padding: 20px;
  border-radius: 12px;
  transition: right 0.4s ease-in-out;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

#trash-map-controls.open {
  right: 0;
}

/* Button to open map controls */
.trash-map-control-button {
  background-color: #257F9E;
  color: white;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
  transition: background-color 0.3s;
}

.trash-map-control-button:hover {
  background-color: #87BA31;
}

/* Styling inside the controls panel */
.trash-map-controls-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.trash-map-controls-content input,
.trash-map-controls-content label {
  color: white;
}

.checkbox-input,
.slider-input {
  background-color: #257F9E;
  border-radius: 5px;
  padding: 10px;
}

.slider-input {
  margin-top: 10px;
}

.trash-map-controls-content .slider-input input {
  background-color: #2980B9;
  border: none;
  color: white;
}

/* Recycle Map Controls Styling */
#recycle-map-controls {
  position: fixed;
  top: 80px;
  right: -350px;
  width: 350px;
  height: 100%;
  background-color: #213F48;
  padding: 20px;
  border-radius: 12px;
  transition: right 0.4s ease-in-out;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

#recycle-map-controls.open {
  right: 0;
}

/* Button to open map controls */
.recycle-map-control-button {
  background-color: #257F9E;
  color: white;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
  transition: background-color 0.3s;
}

.recycle-map-control-button:hover {
  background-color: #87BA31;
}

/* Styling inside the controls panel */
.recycle-map-controls-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.recycle-map-controls-content input,
.recycle-map-controls-content label {
  color: white;
}

.checkbox-input,
.slider-input {
  background-color: #257F9E;
  border-radius: 5px;
  padding: 10px;
}

.slider-input {
  margin-top: 10px;
}

.recycle-map-controls-content .slider-input input {
  background-color: #2980B9;
  border: none;
  color: white;
}

/* Green Waste Map Controls Styling */
#greenewaste-map-controls {
  position: fixed;
  top: 80px;
  right: -350px;
  width: 350px;
  height: 100%;
  background-color: #213F48;
  padding: 20px;
  border-radius: 12px;
  transition: right 0.4s ease-in-out;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

#greenewaste-map-controls.open {
  right: 0;
}

/* Button to open map controls */
.greenewaste-map-control-button {
  background-color: #257F9E;
  color: white;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
  transition: background-color 0.3s;
}

.greenewaste-map-control-button:hover {
  background-color: #87BA31;
}

/* Styling inside the controls panel */
.greenewaste-map-controls-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.greenewaste-map-controls-content input,
.greenewaste-map-controls-content label {
  color: white;
}

.checkbox-input,
.slider-input {
  background-color: #257F9E;
  border-radius: 5px;
  padding: 10px;
}

.slider-input {
  margin-top: 10px;
}

.greenewaste-map-controls-content .slider-input input {
  background-color: #2980B9;
  border: none;
  color: white;
}