#map {
    height: 620px;
    /*max-width: 70%;*/
}

button {
    border-radius: 16px;
    border-style: none;
    background: #535bf2;
    color: white;
    font-weight: bold;
    padding: 6px;
}

.leaflet-coordinates {
    /* From https://css.glass */
    background: rgba(210, 210, 210, 0.2);
    border-radius: 4px;
    border: 1px solid #aaa;
    font-size: 14px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    padding: 6px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #333333;
}

#start-polygon {
    background: #375dcd;
    width: 100%;
}

#start-polygon:hover {
    background: rgba(55, 93, 205, 0.6);
    width: 100%;
}

#save-zone, #check-point {
    background: #18b432;
    width: 100%;
    margin-top:4px;
}

#save-zone:hover, #check-point:hover {
    background: rgba(24, 180, 50, 0.6);
}

#delete-zones {
    background: #c03e3e;
    width: 100%;
    margin-top:4px;
}

#delete-zones:hover {
    background: rgba(192, 62, 62, 0.6);
}

#point-checker{
    margin-top: 10px;
}

#toggle-placing {
    margin-bottom: 16px;
    width: 100%;
}

#zone-name, #test-coords {
    margin-bottom: 5px;
    width: calc(100% - 10px);
    padding: 5px;
}

#check-result {
    margin-top: 5px;
    color: blue;
}

#control-container {
    background-color: white;
    background: rgba(210, 210, 210, 0.2);
    border-radius: 4px;
    border: 1px solid #aaa;
    font-size: 14px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    padding: 6px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);

    /*padding: 10px;*/
    max-width: 340px;
    /*box-shadow: 0 0 15px rgba(0,0,0,0.2);*/
}