<style>
        .marker {
            width: 50px;
            height: 50px;
            /*background-color: #ff5722;*/
            border-radius: 50% 50% 50% 0;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            border: solid #ff5722 3px; /* Цвет обводки маркера */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            box-shadow: inset 0em 0em 10px #E37619; /* Цвет свечения внутри маркера */
            transform: rotate(-45deg);
            opacity: 1;
        }
        
        .marker .tn-atom {
            pointer-events: none;
            position: absolute;
            background-color: transparent !important;
            width: 120% !important;
            height: 160% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        
        .plus-container {
            pointer-events: none;
            background-color: #ff5722; /* Цвет точки внутри маркера */
            width: 9px; /* Ширина точки внутри маркера */
            height: 9px; /* Высота точки внутри маркера */
            border-radius: 10000px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(2.2); /* Размер точки и плюса внутри маркера */
        }
        
        .marker:hover {
            background-color: #ff5722; /* Цвет заполнения при ховере маркера */
        }
        
        .marker:hover .plus-container {
            background-color: white;  /* Цвет заполнения точки при ховере маркера */
        }
        
        .marker:hover .plus {
            background-color: white; /* Цвет заполнения плюса при ховере маркера */
        }
        
        .marker:hover .plus:before {
            background-color: #ff5722; /* Цвет заполнения минуса при ховере маркера */
        }
        
        .marker:hover .plus:after {
            background-color: #ff5722; /* Цвет заполнения палки при ховере маркера */
        }

        .plus {
            position: relative;
            background: #ff5722;
            z-index: 2;
            width: 1px;
            height: 1px;
            transform: scale(0.7);
        }
        
        .plus:before, .plus:after {
            content: '';
            position: absolute;
            background: white;
        }

        
        .plus:before {
            top: 50%;
            left: 0;
            width: 100%;
            height: 4px;
            transform: translateY(-50%);
            border-radius: 5px;
        }

        .plus:after {
            top: 0;
            left: 50%;
            width: 4px;
            height: 100%;
            transform: translateX(-50%);
            border-radius: 5px;
        }
</style>

<script>
        document.addEventListener("DOMContentLoaded", function() {
            var markers = document.querySelectorAll(".marker .tn-atom");

            markers.forEach(function(marker) {
                var plus = document.createElement("div");
                plus.className = "plus";

                var plusContainer = document.createElement("div");
                plusContainer.className = "plus-container";

                plusContainer.appendChild(plus);
                marker.appendChild(plusContainer);
            });
        });

</script>

<style>
        .marker2 {
            width: 50px;
            height: 50px;
            /*background-color: #4DB94B;*/
            border-radius: 50% 50% 50% 0;
            transform: rotate(315deg);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            border: solid #4DB94B 1px; /* Цвет и ширина обводки маркера */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            box-shadow: inset 0em 0em 10px #4DB94B; /* Цвет свечения внутри маркера */
            opacity: 1;
        }
        
        .marker2 .tn-atom {
            pointer-events: none;
            width: 120% !important;
            height: 150% !important;
            background-color: transparent !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .plus-container2 {
            background-color: #4DB94B; /* Цвет точки внутри маркера */
            width: 6px; /* Ширина точки внутри маркера */
            height: 6px; /* Высота точки внутри маркера */
            border-radius: 10000px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(2.2); /* Размер точки и плюса внутри маркера */
        }
        
        .marker2:hover {
            background-color: #4DB94B;  /* Цвет заполнения при ховере маркера */
        }
        
        .marker2:hover .plus-container2 {
            background-color: white; /* Цвет заполнения точки при ховере маркера */
        }
        
        .marker2:hover .plus2 {
            background-color: white; /* Цвет заполнения плюса при ховере маркера */
        }
        
        .marker2:hover .plus2:before {
            background-color: #4DB94B; /* Цвет заполнения минуса при ховере маркера */
        }
        
        .marker2:hover .plus2:after {
            background-color: #4DB94B; /* Цвет заполнения палки при ховере маркера */
        }

        .plus2 {
            pointer-events: none;
            position: relative;
            background: #4DB94B;
            z-index: 2;
            width: 1px;
            height: 1px;
            transform: scale(0.7);
        }
        
        .plus2:before, .plus2:after {
            content: '';
            position: absolute;
            background: white;
        }

        
        .plus2:before {
            top: 50%;
            left: 0;
            width: 100%;
            height: 4px;
            transform: translateY(-50%);
            border-radius: 5px;
        }

        .plus2:after {
            top: 0;
            left: 50%;
            width: 4px;
            height: 100%;
            transform: translateX(-50%);
            border-radius: 5px;
        }
</style>

<script>
        document.addEventListener("DOMContentLoaded", function() {
            var markers = document.querySelectorAll(".marker2 .tn-atom");

            markers.forEach(function(marker) {
                var plus = document.createElement("div");
                plus.className = "plus2";

                var plusContainer = document.createElement("div");
                plusContainer.className = "plus-container2";

                plusContainer.appendChild(plus);
                marker.appendChild(plusContainer);
            });
        });
</script>

<div id="popupDiv" style="display: none;">
        <div class="c-cont">
            <div class="content">
                <div class="city">Город</div>
                <div class="sroki">
                    <div class="txt-s">Второй текст</div>
                    <div class="txt-d">Комментарий</div>
                </div>
            </div>
        </div>
</div>

<style>
    .sroki {
        display: flex;
        flex-direction: row;
        gap: 5px; /* Отступ между верхним и нижним текстом */
        font-size: 13px; /* Размер шрифта второго текста и комментария */
    }
    
    .txt-d {
        color: #4DB94B; /* Цвет комментария */
    }
    
    .txt-s {
        color: black; /* Цвет второго текста */
    }
    
    .city {
        color: #E37619; /* Цвет города */
        font-size: 16px; /* Размер шрифта города */
    }
    
    .content {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .c-cont {
        position: relative;
        padding: 10px; /* Отступ внутри попапа */
        border: 1px solid #ffffff4a; /* Цвет обводки */
        border-radius: 15px; /* Радиус обводки */
        background-color: #ffffff; /* Цвет плашки */
    }

    #popupDiv {
        position: absolute;
        z-index: 99999999; /* Уровень слоя */
        font-family: sans-serif; /* Задайте шрифт */
    }
</style>

<script>
    let popupTimeout;
    
    function handlePopupDisplay(e) {
        clearTimeout(popupTimeout); // Очистить таймер, если он был установлен
        
        let target = e.target;
        var posX = e.clientX + window.scrollX;
        var posY = e.clientY + window.scrollY;
        var popupDiv = document.getElementById('popupDiv');
        popupDiv.style.left = posX + 20 + 'px';
        popupDiv.style.top = posY + 20 + 'px';

        handleHashChange(target)
        popupDiv.style.display = 'block';
    }
    
    function handlePopupNONDisplay() {
        popupTimeout = setTimeout(function() { // Установить таймер для скрытия всплывающего окна
            var popupDiv = document.getElementById('popupDiv');
            popupDiv.style.display = 'none';
        }, 200); // Задержка в 200 миллисекунд
    }
    
    document.addEventListener('mouseover', function(e) {
        let element = e.target;
        var parentMarker = element.closest('.marker');
        var parentMarker2 = element.closest('.marker2');
        
        if (parentMarker || parentMarker2) {
            handlePopupDisplay(e); 
        }
    });
    
    document.addEventListener('mouseout', function(e) {
        let element = e.target;
        var parentMarker = element.closest('.marker');
        var parentMarker2 = element.closest('.marker2');
        
        if (parentMarker || parentMarker2) {
            handlePopupNONDisplay(); 
        }
    });

    function handleHashChange(target) {
        var elem = target.querySelector('.tn-atom');
        
        let hash = elem.getAttribute('href');

        if (hash.startsWith("#form#")) {
            var parts = hash.split("#");
            if (parts.length >= 5) {
                var region = decodeURIComponent(parts[2]).replace(/-/g, ' ');
                var city = decodeURIComponent(parts[3]).replace(/-/g, ' ');
                var days = decodeURIComponent(parts[4]).replace(/-/g, ' ');

                if (region && city && days) {
                    findObjects(region, city, days);
                }
            }
        }
    }

    function findObjects(region, city, days) {
        try {
            document.querySelector('.city').textContent = city;
            document.querySelector('.txt-d').textContent = days;
            selregion.value = region;
            selcity.value = city;
        } catch (error) {
            console.error('Error occurred:', error);
        }
    }
</script>