{% load static %}
        <link rel="stylesheet" href="{% static 'leaflet-gpx/css/leaflet-1.5.1.css' %}">
        <style type="text/css">
.map-container {
    border: 1px #999 solid;
    border-radius: 3px;
    box-shadow: 0 0 2px 1px #ccc;
    width: 95%;
    margin: 10px auto;
}

.map-container header {
    padding: 5px;
    padding-top: 8px;
}

.map-container header h3 {
    margin: 0;
    padding: 0;
}

.map-container .map {
    width: 100%;
    height: 500px;
}

.map-container .simple-map {
    padding: 1px;
}

.map-container .gpx-map {
    border: 1px #999 solid;
    border-left: none;
    border-right: none;
}

.map-container header .start {
    font-size: smaller;
    color: #444;
}

.gpx .map {
    border: 1px #999 solid;
    border-left: none;
    border-right: none;
    width: 100%;
    height: 500px;
}

.map-container footer {
    padding: 5px;
}

.map-container ul.info {
    list-style: none;
    margin: 0;
    padding: 0;
}

.map-container ul.info li {
    color: #444;
    padding: 2px;
    display: inline;
}

.map-container ul.info li span {
    color: black;
}
        </style>