.icon-marker {
    cursor: pointer;
    width: 50px;
    height: 50px;
    position: relative;
    transform: translate(-50%, -50%);
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: ease;
  }
  
  .icon2-marker {
    cursor: pointer;
    width: 50px;
    height: 50px;
    position: relative;
    transform: translate(-50%, -100%);
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: ease;
  }
  
  .icon2-marker:hover {
    scale: 1.1;
    transition: .3s ease; 
  }
  
  .mapContainer{
    background-color: #063955;
    padding-bottom: 10px;
  }
  
  .mapContainer__fullscreen {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  
  
  .map-buttons {
    margin-top: 20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  
  .map-buttons__fullscreen {
    flex-direction: column;
    width: calc(100% - 10px);
  } 
  
  .map-description {
    display: flex;
    overflow: auto;
    background-color: #063955;
    /* border-radius: 20px; */
   
  }
  
  .map-description__fullscreen {
    position: fixed;
    left: 70%;
    width: 30%;
    height: 100%;
    border-radius: 0px;
    justify-content: center
  }
  
  /* width */
  .map-description::-webkit-scrollbar {
    width: 20px;
  }
   
  /* Handle */
  .map-description::-webkit-scrollbar-thumb {
    background: #052f46; 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  .map-description::-webkit-scrollbar-thumb:hover {
    background: #0b6596; 
  }
  
  /* width */
  .map-description__fullscreen::-webkit-scrollbar {
    width: 20px;
  }
   
  /* Handle */
  .map-description__fullscreen::-webkit-scrollbar-thumb {
    background: #052f46;
    border-radius: 10px;
  }
  
  /* Handle on hover */
  .map-description__fullscreen::-webkit-scrollbar-thumb:hover {
    background: #0b6596; 
  }
  
  .button_map {
    display: flex;  
    width: 290px;
    height: auto;
    background-color: #052f46;
    color: white;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    font-size: small;
    padding: 20px;
  } 
  
  .button_map__descriptionContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .button_map__text {
    width: 100%;
  }
  
  .button_map__text__active {
  font-size: medium;
  }
  
  .button_map__category {
    border-radius: 10px;
    color: #ffffff;
  }

  .button_map__category::before {
    content: 'Категория дороги: ';
    color: #b4b4b4;
  }
  
  .button_map__date {
    border-radius: 10px;
    color: #ffffff;
  }

  .button_map__date::before {
    content: 'Срок выполнения работ: ';
    color: #b4b4b4;
  }
  .button_map__dateEnd {
    border-radius: 10px;
    color: #ffffff;
  }

  .button_map__dateEnd::before {
    content: 'Срок завершения работ: ';
    color: #b4b4b4;
  }

  .button_map__explotation {
    border-radius: 10px;
    color: #ffffff;
  }

  .button_map__explotation::before {
    content: 'Срок эксплуатации: ';
    color: #b4b4b4;
  }
  
  .button_map__customer {
    border-radius: 10px;
    color: #ffffff;
  }

  .button_map__customer::before {
    content: 'Заказчик: ';
    color: #b4b4b4;
  }

  .button_map__concedent {
    border-radius: 10px;
    color: #ffffff;
  }

  .button_map__concedent::before {
    content: 'Концедент: ';
    color: #b4b4b4;
  }
  
  .button_map__description {
    border-radius: 10px;
    color: #ffffff;
  }

  .button_map__description::before {
    content: '';
    color: #b4b4b4;
  }
  
  .button_map__km {
    color: #ffffff;
  }
  
  .button_map__km::before {
    content: 'Протяженность: ';
    color: #b4b4b4;
  }

  .button_map:hover {
    background-color: #052d42;
    outline: 1px solid #05283b ;
  } 
  
  
  .button_map__fullscreen {
    height: auto;
    width: 100%;
    padding: 20px;
  } 
  
  .button_map_active {
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: center;
    width: 490px;
    height: 100%;
    background-color: #052f46;
    border: solid 1px rgba(255, 255, 255, 0.507);
    color: white;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    font-size: small;
    padding: 20px;
    /* transition: .5s ease; */
  }
  
  .button_map_active__fullscreen {
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    background-color: #052f46;
    border: solid 1px rgba(255, 255, 255, 0.507);
    color: white;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    font-size: small;
    padding: 20px;
    transition: .5s ease;
  }
  
  .fullScreenButton {
    position: absolute;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-image: url('/wp-content/themes/avtoban-new/frontend/img/projects-map/fullScreen.svg');
    background-color: #ffffff28;
    margin-top: -50px;
    margin-left: 10px;
    border-radius: 10px;
    opacity: 80%;
  }
  .fullScreenButton__active {
    background-image: url('/wp-content/themes/avtoban-new/frontend/img/projects-map/fullScreen_active.svg');
  }
  
  .fullScreenButton__fullscreen {
    margin-top: 0;
    margin-left: 10px;
    bottom: 10px;
  }
  
  .fullScreenButton:hover {
    opacity: 100%;
  }
  
  .overlayOnMap {
    position: absolute;
    left: 50%;
    top: 5rem;
    width: 20%;
    height: 40%;
    background-color: white;
    border-radius: 2rem;
  }
  
  .grow {
    animation-name: grow;
  }
  
  
  @keyframes grow {
    0% {
      width: 0px;
      height: 0px;
    }
  
    60% {
      width: 0px;
      height: 0px;
    }
  
    90% {
      width: 80px;
      height: 80px;
    }
  
    100% {
      width: 30px;
      height: 30px;
    }
  }
  
  #someline{
    display: block;
    width: 30px;
    height: 30px;
    background-color: #000;
  }
  
  @media only screen and (max-width: 48em) {
    .button_map {
      display: flex;
      width: 15rem;
      height: auto;
      background-color: #052f46;
      color: white;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      cursor: pointer;
      font-size: small;
      padding: 20px;
    } 
  
    .button_map_active {
      display: flex;
      gap: 5px;
      flex-direction: column;
      align-items: flex-start;
      width: 15rem;
      height: 100%;
      background-color: #052f46;
      border: solid 1px rgba(255, 255, 255, 0.507);
      color: white;
      justify-content: center;
      border-radius: 10px;
      cursor: pointer;
      font-size: small;
      padding: 20px;
      transition: .5s ease;
    }
  
    .fullScreenButton {
      display: none;
    }
  }