*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
}
.wrapper {
  position: relative;
  min-width: 250px;
  height: 600px;
  overflow: hidden;
}

.img-absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/*.leaflet-div-icon {
  background: transparent !important;
  border: none !important;
}*/
/*.map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}*/
.map {
  position: relative; 
  width: 100%;
  height: 100%;
  z-index: 1;
}

.map__tooltip {
  padding: 0;
  background-color: transparent;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: none;
  font-weight: bold;
  color: #333333;
  max-width: 215px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  white-space: unset;
  text-shadow: 0.5px 0 0.5px #fff, 0 0.5px 0.5px #fff, -0.5px 0 0.5px #fff, 0 -0.5px 0.5px #fff;
}
.map__tooltip::before {
  display: none;
}
.map__cluster_number {
    position: absolute;
    top: 51%;
    left: 68%;
    width: 25px;
    height: 25px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #de3333;
    box-sizing: 0px 0px 0px rgba(218, 51,51, .1);
    color: #FFF;
    border-radius: 100%;
    text-align: center;
    z-index: 300;
}
.object {
    position: fixed;
    left: 0; 
    right: auto;
    top: 0;
    width: 400px;
    height: 95vh; /* Высота почти на весь экран */
    max-height: 95vh;
    overflow-y: auto;
    bottom: 0;
    background-color: #fff;
    z-index: 1000;
    padding: 50px 30px;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
    transform: translateX(-100%);
    padding-bottom: 20px; 
}




.object.is-open {
    transform: translateX(0);
}

.object__close {
  position: absolute;
  top: 30px;
  right: 30px;
  background-color: #999;
  border: 0;
  width: 30px;
  height: 3px;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  cursor: pointer;
}
.object__close::after {
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  background-color: #999;
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
  position: absolute;
  top: 0;
  left: 0;
}
.object__title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 15px;
}
.object__img {
  position: relative;
  padding-bottom: 65%;
  margin-bottom: 25px;
}

.leaflet-control-attribution a,
.leaflet-control-attribution span {
  display: none;
}

.overlay-form {
  display: flex;
  flex-direction: column;
  position: absolute;
  transform: translateX(0);
  top: 0;
  right: 0;
  min-width: 250px;
  max-width: 330px;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
  z-index: 2;
}

.overlay-form_open {
  transform: translateX(100%);
}

.form {
  display: flex;
  flex-direction: column;
}

.form select{
  padding: 5px;
  margin-bottom: 3px;
  background: #fff;
  border: none;
  border-radius: 3px;
}

.form input[type=submit]{
  padding: 8px;
  margin-bottom: 10px;
  border: none;
  border-radius: 3px;
  background: #12A163;
  color: #fff;
  font-weight: 500;
  min-height: 35px;
}

.form input[type="text"],
.form input[type="email"] {
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 3px;
  border: none;
}
.small-map_wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

#small-map {
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
}
.small-map_wrapper #close {
  cursor: pointer;
  position: absolute;
  right: 5px;
  z-index: 2;
  top: 5px;
}
.activeSmallMap {
  visibility: visible;
}

.active #small-map {
  cursor: pointer;
}

/*.icon {
    width: 25px;
    height: 25px;
    background-color: red;
    border-radius: 100%;
    filter: drop-shadow(0px 0px 10px red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .8;
}*/
.icon {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  filter: drop-shadow(0px 0px 10px red);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  color: #fff;
}

/*.green {
    width: 25px;
    height: 25px;
    background-color: green;
    border-radius: 100%;
    filter: drop-shadow(0px 0px 10px green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}*/
.green {
  background-color: green !important;
}

.red {
  background-color: red !important;
}

.open_form {
  font-size: 14px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.06);
  background: #12A163;
  color: #fff;
  font-weight: 500;
  display: none;
}

.close_form {
  position: absolute;
  top: 1px;
  right: 8px;
  font-size: 30px;
  font-weight: bold;
  display: block;
  width: min-content;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  color: #fff;
  background: transparent;
}

.svgIcon {
  color: green;
}

#desc{
  margin-bottom: 8px;
  padding: 4px;
  min-height: 48px;
}

.pointBtn{
  padding: 8px;
  border: none;
  border-radius: 3px;
}

.pointBtn{
  font-weight: 500;
  background: #FF721B;
  margin: 10px 10px 10px 0;
  color: #fff;
  min-height: 35px;
}

@media only screen and (max-width:1200px){
  .wrapper {
    max-width: 990px;
  }
}
@media only  screen and (max-width:992px){
}
@media only  screen and (max-width:768px){
}
@media only  screen and (max-width:680px){
}
@media only  screen and (max-width:480px){
}
@media only  screen and (max-width:320px){
}
 
/*.object {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}*/

.leaflet-marker-icon {
    z-index: 9999 !important;
}

.custom-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    border-radius: 50%;
    text-align: center;
    border: 2px solid white;
}

/*.cluster-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    font-weight: bold;
    text-align: center;
}*/





.cluster-icon.green {
    background-color: #28a745;
}


.cluster-icon.red {
    background-color: #dc3545;
}


.cluster-icon.mixed {
    background: linear-gradient(to right, #dc3545 50%, #28a745 50%);
}

.cluster-icon {
    width: 40px !important;
    height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    line-height: 40px !important;
    border-radius: 50% !important;
    font-weight: bold !important;
    font-size: 18px !important; 
    color: white !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
}













.object__image {
    width: 100%; 
    height: auto;
    max-height: 250px; 
    object-fit: contain;
    border-radius: 10px;
    margin-bottom: 10px;
}


.object__desc {
    font-size: 16px;
    line-height: 1.4;
    margin-top: 10px;
    text-align: justify;
}




.cesium-infoBox {
    left: 0 !important;
    right: auto !important;
    width: 400px !important;
    max-height: 95vh !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 10px !important;
    overflow-y: auto !important;
}

.object-content {
  padding: 10px;
}

.object-content .object__img {
  margin-bottom: 15px;
}

.object-content .object__title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.object-content .object__desc {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.object-content a {
  color: #12A163;
  text-decoration: none;
  font-weight: bold;
}