﻿        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-image: url('img/fon.webp');
            background-repeat: no-repeat;
            background-size: cover;
            padding: 0;
            margin: 0;
        }
        #map {
        	height: 100vh;
        	width: 100%;
        }

        /* Ensure tile images stay visible across zoom transitions */
        .wmap-tile,
        .wmap-fade-anim .wmap-tile,
        .wmap-tile-loaded {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .top-panel {
        	position: absolute;
        	background-color: #34383aeb;
        	width: 100%;
        	height: 35px;
        	z-index: 900;
        }

        .wmap-container .wmap-control-attribution {
        	display: none;
        }

        .win {
        	padding: 12px;
        }

        .win img {
        	width: 50px;
        	background: #1b2a34a8;
        	border-radius: 4px;
        	padding: 7px;
        	border: 1px;
        	border-color: #9d9d9d;
        	border-style: solid;
        	pointer-events: painted;
        }

        #dialog {
        	z-index: 1000;
        }

        .bottom-button {
        	position: absolute;
        	bottom: 0;
        	z-index: 1000;
        	left: 50%
        }

        .win img:hover {
        	border-color: #e40000;
        	border-style: solid;
        }

        .top-head {
        	position: absolute;
        	background: rgb(56 64 87 / 55%);
        	height: 40px;
        	top: 0;
        	width: 100%;
        	z-index: 999;
        	backdrop-filter: blur(5px);
        	box-shadow: inset 0px 0px 30px rgb(0 0 0 / 55%);
        	border-bottom: 1px solid #6e6e6e;
        }

        .wmap-top-head {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 10px;
            box-sizing: border-box;
        }

        .wmap-brand {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 58px;
            height: 24px;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.36);
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.85), rgba(14, 165, 233, 0.82));
            color: #ffffff;
            font-family: sans-serif;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.5px;
        }

        .wmap-top-text {
            padding-left: 4px;
        }

        .wmap-panel {
            border-color: rgba(38, 130, 255, 0.5);
        }

        .waste-panel {
            position: absolute;
            top: 52px;
            right: 12px;
            width: 260px;
            z-index: 1100;
            background: rgba(36, 42, 52, 0.92);
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 10px;
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(4px);
            padding: 10px 12px;
            box-sizing: border-box;
            color: #f4f7fb;
            font-family: sans-serif;
        }

        .waste-panel-title {
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 10px;
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .waste-panel-title::after {
            content: "▾";
            font-size: 12px;
            opacity: 0.9;
            transition: transform 0.15s ease;
        }

        .waste-panel.is-collapsed .waste-panel-title {
            margin-bottom: 0;
        }

        .waste-panel.is-collapsed .waste-panel-title::after {
            transform: rotate(-90deg);
        }

        .waste-panel-body {
            display: block;
        }

        .waste-panel.is-collapsed .waste-panel-body {
            display: none;
        }

        .admin-logout {
            position: absolute;
            top: 10px;
            right: 12px;
            z-index: 1300;
            background: rgba(24, 32, 43, 0.88);
            border: 1px solid rgba(255, 255, 255, 0.24);
            border-radius: 7px;
            color: #fff;
            text-decoration: none;
            font-size: 12px;
            padding: 7px 10px;
            font-family: sans-serif;
        }

        .admin-logout:hover {
            background: rgba(31, 104, 216, 0.92);
        }

        .waste-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            padding: 6px 0;
            cursor: pointer;
            user-select: none;
        }

        .waste-item-column {
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
        }

        .waste-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: #2a7fff;
            cursor: pointer;
        }

        .waste-select {
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.24);
            border-radius: 7px;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            font-size: 12px;
            padding: 6px 8px;
            box-sizing: border-box;
        }

        .waste-select option {
            color: #111;
        }

        .waste-input {
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.24);
            border-radius: 7px;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            font-size: 12px;
            padding: 6px 8px;
            box-sizing: border-box;
        }

        .waste-input:disabled {
            opacity: 0.6;
            cursor: default;
        }

        .waste-save-btn-ghost {
            margin-top: 2px;
            background: rgba(255, 255, 255, 0.14);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .waste-save-btn-ghost:hover {
            background: rgba(255, 255, 255, 0.22);
        }

        .waste-save-btn-danger {
            margin-top: 6px;
            background: rgba(196, 52, 64, 0.9);
            border-color: rgba(255, 184, 184, 0.42);
        }

        .waste-save-btn-danger:hover {
            background: rgba(170, 34, 48, 0.95);
        }

        .waste-editor-title {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.16);
            font-size: 12px;
            font-weight: 700;
            color: #d8e6ff;
        }

        .waste-coords-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .waste-coords-row .waste-item {
            padding: 0;
        }

        .waste-save-btn {
            margin-top: 8px;
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.24);
            border-radius: 8px;
            background: #2a7fff;
            color: #fff;
            font-size: 13px;
            font-weight: 700;
            padding: 8px 10px;
            cursor: pointer;
        }

        .waste-save-btn:hover {
            background: #1f68d8;
        }

        .waste-save-btn:disabled {
            opacity: 0.65;
            cursor: default;
        }

        .waste-save-status {
            margin-top: 8px;
            font-size: 12px;
            color: #cfe0ff;
            min-height: 16px;
        }

        .waste-save-status.is-error {
            color: #ffb7b7;
        }

        .marker-label-tooltip {
            background: rgba(21, 28, 40, 0.92);
            color: #f8fafc;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
            padding: 4px 7px;
            font-size: 12px;
            font-weight: 600;
        }

        .wmap-tooltip.marker-label-tooltip::before {
            border-top-color: rgba(21, 28, 40, 0.92);
        }


        .text {
        	display: inline-block;
        	color: aliceblue;
        	padding: 13px;
        	font-family: sans-serif;
        	font-size: 13px;
        }
        .text a{
            color:#ffffff;
        }
        .top-right {
        	display: inline-flex;
        	float: right;
        }

        .icon {
        	padding-top: 12px;
        	margin-right: 20px;
        }

        .icon img {
        	width: 23px;
        }

        table {
        	width: 100%;
        }

        .checkbox-td {
        	width: 23px;
        }

        .login-container {
            background: #333;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-align: center;
			height: 250px;
			font-size: 11px;
        }
        .login-container h2 {
            color: white;
            margin-bottom: 15px;
        }
        .login-container input {
            display: block;
			width: 300px;
            padding: 10px;
            margin: 15px 0;
            border: none;
            border-radius: 4px;
			font-size: 20px;
        }
        .login-container button {
            width: 320px;
            padding: 10px;
			margin-top: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
			font-size: 16px;
			font-weight: 800;
        }
        .login-container button:hover {
            background: gray;
        }
        
        .name-sys{
    position: absolute;
    font-size: 60px;
    text-align: center;
    top: 50px;
    color:white;
        }

        .map-tools-control {
            margin-top: 52px;
            background: rgba(24, 32, 43, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
            padding: 10px;
            width: 190px;
            color: #f8fafc;
            font-family: Arial, sans-serif;
        }

        .map-tools-title {
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .map-tools-btn {
            width: 100%;
            text-align: left;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
            padding: 7px 9px;
            margin-bottom: 6px;
            cursor: pointer;
            font-size: 12px;
        }

        .map-tools-btn:hover {
            background: rgba(255, 255, 255, 0.14);
        }

        .map-tools-btn.is-active {
            border-color: #22d3ee;
            background: rgba(34, 211, 238, 0.25);
        }

        .map-tools-radius {
            display: block;
            font-size: 11px;
            margin: 8px 0 4px;
            color: #cbd5e1;
        }

        .map-tools-input {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 7px;
            background: rgba(0, 0, 0, 0.26);
            color: #fff;
            padding: 6px 8px;
            font-size: 12px;
            margin-bottom: 8px;
        }

        .map-tools-status {
            font-size: 11px;
            color: #cbd5e1;
            border-top: 1px solid rgba(255, 255, 255, 0.16);
            padding-top: 8px;
        }

        .wmap-pm-toolbar .wmap-pm-icon-custom-select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235B5B5B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3C/g%3E%3C/svg%3E");
        }

        .wmap-pm-toolbar .wmap-pm-icon-custom-clear {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235B5B5B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/g%3E%3C/svg%3E");
        }

        .wmap-pm-toolbar .wmap-pm-icon-custom-union {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235B5B5B' stroke-width='2'%3E%3Ccircle cx='10' cy='12' r='5'/%3E%3Ccircle cx='14' cy='12' r='5'/%3E%3C/g%3E%3C/svg%3E");
        }

        .wmap-pm-toolbar .wmap-pm-icon-custom-diff {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235B5B5B' stroke-width='2'%3E%3Ccircle cx='10' cy='12' r='5'/%3E%3Ccircle cx='14' cy='12' r='5'/%3E%3C/g%3E%3Cpath d='M6 12h8' stroke='%235B5B5B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
        }

        .wmap-pm-toolbar .wmap-pm-icon-custom-export {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235B5B5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3Crect x='5' y='16' width='14' height='4' rx='1'/%3E%3C/g%3E%3C/svg%3E");
        }

        .wmap-pm-toolbar .wmap-pm-icon-custom-import {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235B5B5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 14V4'/%3E%3Cpath d='M8 8l4-4 4 4'/%3E%3Crect x='5' y='16' width='14' height='4' rx='1'/%3E%3C/g%3E%3C/svg%3E");
        }

        .wmap-pm-toolbar .wmap-pm-icon-custom-split {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235B5B5B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 6l14 12'/%3E%3Cpath d='M5 18l5-4'/%3E%3Cpath d='M14 11l5-5'/%3E%3Ccircle cx='7' cy='16' r='2'/%3E%3Ccircle cx='17' cy='8' r='2'/%3E%3C/g%3E%3C/svg%3E");
        }

        .wmap-pm-toolbar .wmap-pm-icon-custom-scale {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235B5B5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5'/%3E%3Cpath d='M20 15v5h-5'/%3E%3Cpath d='M9 4L4 9'/%3E%3Cpath d='M15 20l5-5'/%3E%3Cpath d='M15 4h5v5'/%3E%3Cpath d='M4 15v5h5'/%3E%3Cpath d='M20 9l-5-5'/%3E%3Cpath d='M9 20l-5-5'/%3E%3C/g%3E%3C/svg%3E");
        }

        .wmap-pm-toolbar .wmap-pm-icon-custom-freehand {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 24 24'%3E%3Cpath d='M4 16c2-5 4-7 6-7 1.5 0 2.3 1.2 3.6 1.2 1.4 0 2.1-1.4 3.4-1.4 1.4 0 2.1 1.3 2.1 2.9 0 3-2.4 5.3-6.4 5.3H8' fill='none' stroke='%235B5B5B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
        }

        .wmap-pm-toolbar .wmap-pm-icon-custom-lasso {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235B5B5B' stroke-width='2' stroke-linecap='round'%3E%3Cellipse cx='11' cy='10' rx='6' ry='4'/%3E%3Cpath d='M16 12c1.6 1.1 2.5 2.6 2.5 4 0 1.7-1.3 3-3 3-1.2 0-2.2-.8-2.2-2 0-1 .8-1.8 1.9-1.8'/%3E%3C/g%3E%3C/svg%3E");
        }

        .wmap-pm-toolbar .wmap-pm-icon-custom-copy {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235B5B5B' stroke-width='2'%3E%3Crect x='5' y='8' width='9' height='9' rx='1'/%3E%3Crect x='10' y='5' width='9' height='9' rx='1'/%3E%3C/g%3E%3C/svg%3E");
        }

        .wmap-pm-toolbar .wmap-pm-icon-custom-simplify {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235B5B5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l6-9 4 4 6-5'/%3E%3Ccircle cx='4' cy='17' r='1.5'/%3E%3Ccircle cx='10' cy='8' r='1.5'/%3E%3Ccircle cx='14' cy='12' r='1.5'/%3E%3Ccircle cx='20' cy='7' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
        }

        .custom-uploaded-marker-icon {
            filter: none;
        }

        .custom-icon-text-label {
            background: rgba(20, 24, 35, 0.9);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 6px;
            padding: 2px 7px;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
        }

        .custom-icon-text-label:before {
            border-top-color: rgba(20, 24, 35, 0.9) !important;
        }



