/* CSS Document */

.tm-map{

    grid-area:map;

    position:relative;

}

#map{

    width:100%;
    height:100%;

}

/* *****************************************************************
************************** MARKER **********************************
******************************************************************/

.routeMarker{

    background:none;
    border:none;

}

.routeMarker.active{

    transform:scale(1.35);

    transition:all .20s ease;

    z-index:1000 !important;

}

.routeMarkerCard{

    position: relative;

    width: 40px;
    height: 40px;

}

.routeMarkerCard img {

    width:40px;
    height:40px;

    object-fit:cover;

    border-radius:50%;

    border:2px solid #fff;          /* statt 4px */

    box-shadow:0 2px 6px rgba(0,0,0,.35);

}

.routeMarker.active .routeMarkerCard img{

    border:4px solid #ffcc00;

    box-shadow:0 0 18px rgba(255,204,0,.9);

}



.routeMarkerNumber{

    position:absolute;

    right:-2px;
    bottom:-2px;

    width:30px;
    height:30px;

    border-radius:50%;

    background:#0d6efd;
    color:#fff;

    font-size:11px;
    font-weight:bold;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid white;
}

.routeMarker.active .routeMarkerNumber{

    background:#ff6600;

    transform:scale(1.2);

}