body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: Arial, sans-serif;
    }

    #map {
        height: 100%;
        z-index: 1;
    }

    .form-box {
        position: fixed;
        background: transparent;
        padding: 15px 20px;
        z-index: 999;
        width: 150px;
    }

	#tspControlButton {
    background: url("../img/distance.png") no-repeat center center;
    background-size: contain;
    border: 1;
    padding: 0;
	width: 30px;
    height: 42px;
    cursor: pointer;
	position: fixed;
	left:180px;
	top:7px;
	}

	#pdfUploadButton {
    background: url("../img/pdf.png") no-repeat center center;
    background-size: contain;
    border: none;
	position: fixed;
    padding: 0;
	width: 50px;
    height: 62px;
    cursor: pointer;
	left:55px;
	top:5px;
	}

	#XMLUploadButton {
    background: url("../img/xml.png") no-repeat center center;
    background-size: contain;
    border: none;
	position: fixed;
    padding: 0;
	width: 30px;
    height: 42px;
    cursor: pointer;
	left:145px;
	top:7px;
	}
	
	#routeInfo {
	display: none;  /* Alguses peidetud */
    position: fixed;
    top: 15px;
    left: 270px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}
	
#opacityControl {
  position: fixed;
  bottom: 0px;
  left: 10px;
  padding: 8px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 0px 0px rgba(0,0,0,0.1);
  z-index: 999;
  width: 130px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: stretch;
  
}

#opacityControl label {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  user-select: none;
  margin-bottom: 8px;
  white-space: nowrap;
  text-align: left;
}

/* Horisontaalne liugur */
#opacityRange {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 6px;
  background: linear-gradient(to right, #ffcccc, #aa0000);
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 0 6px rgba(0,123,255,0.5);
  transition: background 0.3s ease;
}

/* Slideri nupp */
#opacityRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #aa0000;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
  margin-top: -2.5px;
  position: relative;
  z-index: 1;
}

#opacityRange::-webkit-slider-thumb:hover {
  background: #007bff;
  border-color: #0056b3;
}

#opacityRange::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #aa0000;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
  position: relative;
  z-index: 1;
  margin-top: -2.5px;
}

#opacityRange::-moz-range-thumb:hover {
  background: #007bff;
  border-color: #0056b3;
}

#opacityRange::-moz-range-track {
  background: linear-gradient(90deg, #007bff 0%, #00d4ff 100%);
  height: 10px;
  border-radius: 6px;
  box-shadow: inset 0 0 6px rgba(0,123,255,0.5);
}

#opacityRange::-ms-track {
  width: 100%;
  height: 10px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

#opacityRange::-ms-fill-lower {
  background: linear-gradient(90deg, #007bff 0%, #00d4ff 100%);
  border-radius: 6px;
  box-shadow: inset 0 0 6px rgba(0,123,255,0.5);
}

#opacityRange::-ms-fill-upper {
  background: linear-gradient(90deg, #007bff 0%, #00d4ff 100%);
  border-radius: 6px;
  box-shadow: inset 0 0 6px rgba(0,123,255,0.5);
}

#opacityRange::-ms-thumb {
  width: 22px;
  height: 22px;
  background: #ffffff;
  border: 3px solid #007bff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.3s ease, border-color 0.3s ease;
}

#opacityRange::-ms-thumb:hover {
  background: #007bff;
  border-color: #0056b3;
}



    .form-box label {
        display: block;
        margin-top: 10px;
        font-weight: bold;
    }

    .form-box input[type="text"],
    .form-box input[type="file"],
    .form-box input[type="color"] {
        width: 100%;
        padding: 6px;
        margin-top: 5px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    .form-box button {
        width: 100%;
        padding: 8px;
        background-color: #3388ff;
        border: none;
        color: white;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
    }

    .form-box button:hover {
        background-color: #2a74d6;
    }
	
	.custom-label span {
  background-color: white;
  border: 1px solid #333;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
  color: black;
  white-space: nowrap;
  user-select: none;
}

.leaflet-tooltip.custom-tooltip {
    background-color: rgba(255, 255, 255, 0.4);
    color: black;
	font-size: 11px;
	font-weight: bold;
    border-radius: 2px;
    padding: 2px 2px;
	border: none !important;
}

.leaflet-tooltip.custom-tooltip::before {
    display: none;
}

.leaflet-tooltip.feature-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-weight: bold;
    color: black;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: translateY(-20px);
}

.feature-label {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.feature-label.tooltip-visible {
  opacity: 1;
}