.mode__btn {
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.25);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  overflow: hidden;
  position: fixed;
  right: 20px;
  top: 210px;
  z-index: 9;
}
.day {
  background-color: rgba(255, 255, 255, 0.75);
}
.dark__mode .night {
  background-color: #333333;
  -webkit-box-shadow: rgba(255, 255, 255, 0.25) 0 0 16px;
  box-shadow: rgba(255, 255, 255, 0.25) 0 0 16px;
}
.night .mode__btn__icon {
  -webkit-transform: translateY(-29px);
  -ms-transform: translateY(-29px);
  transform: translateY(-29px);
}
.mode__btn__icon {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 60px;
  padding-top: 8px;
  padding-bottom: 8px;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.day .mode__btn__icon {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.mode__btn__icon svg {
  width: 15px;
  height: 15px;
  fill: none;
}



.header__top,
.layers__btns .feedback-btn,
.btn-disclaimer .btn,
.layers__btns .btn,
.leaflet-control-container .leaflet-bottom.leaflet-right .info.legend
.header__top:before  {
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.dark__mode .header__top,
.dark__mode .layers__btns .feedback-btn,
.dark__mode .btn-disclaimer .btn,
.dark__mode .layers__btns .btn,
.dark__mode .leaflet-control-container .leaflet-bottom.leaflet-right .info.legend,
.dark__mode .leaflet-top.leaflet-left .leaflet-control-zoom a, 
.dark__mode .map_left_icon_item,
.dark__mode .layer__toggle,
.dark__mode .map__settings,
.dark__mode .map-disaster-layers-list,
.dark__mode .map__settings__options,
.dark__mode .map__settings__options ul li {
  background-color: rgba(51, 51, 51, 0.75);
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.dark__mode .leaflet-control-layers-overlays label span span,
.dark__mode .leaflet-control-layers-base label span span,
.dark__mode .map-disaster-layers-list label span span {
    background-color: #ffffff;
}
.dark__mode .leaflet-control-layers {
    background: #333333;
}
.dark__mode .header__top:before {
  border-color: transparent rgba(51, 51, 51, 0.75) transparent transparent;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.dark__mode svg path {
  fill: #ffffff !important;
}
.dark__mode svg path[stroke] {
  stroke: #ffffff !important;
}
.dark__mode svg g#flat #Layer path {
  fill: #13313d !important;
}
@media (max-width: 767px) {
  .mode__btn { right: 15px; }
}