@import url('/cdn/leaflet/leaflet.css');
@import url('/cdn//leaflet-gesture/leaflet-gesture-handling.css');
@import url('/cdn/fontawesome/css/all.css');
@import url('/cdn/bootstrap/css/bootstrap.min.css');
@import url('/cdn/bootstrap-icons/bootstrap-icons.min.css');

/*
 Propriétés génériques
*/
html,
body {
    font-family: Niramit, Helvetica, Arial, sans-serif, serif;
    font-size: 14px;
}

.btn-michaille {
    background: #1ee322;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 25px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: auto;
    position: relative;
    bottom: 5px;
}

.btn-michaille:hover {
    transform: translateY(-2px);
    color: white;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    background: #16aa19;
}

/*
 Propriétés Navlink
*/
.nav-link {
    background-color: #f4f4f4;
    border: 1px solid #e9e9e9 !important;
    color: #757575 !important;
    cursor: pointer;
}

.nav-link:hover {
    background-color: #0000001b;
}

.nav-link.active{
    color: #ffffff !important;
    background-color: #1ee322 !important;
    border-bottom: none !important;
}

/*
 Propriétés cartographie
*/
#map {
    border:1px solid rgb(221, 221, 221); 
    height:500px;
    border-radius: 20px;
}

.leaflet-div-icon {
    background: transparent;
    border:none;
}

.waypoint {
    font-size: 22px;
}

.runner-marker {
    font-size: 30px;
}

.raceStats-container i {
    color: #16aa19;
}

.waypoints-icons {
    width: 32px;
    height: 32px;
}

/*
 Propriétés profil élévation
*/
.elevationChart-container {
    width:100%;
    height: 500px;
}

@media (max-width: 767.98px) { 
    /*
        Propriétés Navlink
    */
    .nav-link {
        border: 1px solid #e9e9e9 !important;
        border-radius: 0 !important;
        width:100%;
        margin-right:0;
    }
    /*
        Propriétés cartographie
    */
    #map {
        height:250px;
    }
    /*
        Propriétés profil élévation mobile
    */
    .elevationChart-container {
        margin-top: 0;
        height: 300px;
        width: 100%;
    }

    .waypoints-icons {
        width: 18px;
        height: 18px;
    }

}