/* your custom CSS \*/
@-moz-keyframes pulsate {
    from {
        -moz-transform: scale(0.25);
        opacity: 1.0;
    }
    95% {
        -moz-transform: scale(1.3);
        opacity: 0;
    }
    to {
        -moz-transform: scale(0.3);
        opacity: 0;
    }
}

@-webkit-keyframes pulsate {
    from {
        -webkit-transform: scale(0.25);
        opacity: 1.0;
    }
    95% {
        -webkit-transform: scale(1.3);
        opacity: 0;
    }
    to {
        -webkit-transform: scale(0.3);
        opacity: 0;
    }
}

.labels {
    direction: ltr !important;
}

.gm-style {

    direction: ltr;
}

/* get the container that's just outside the marker image,
    which just happens to have our Marker title in it */
#map div[title="In Move"] {
    -moz-animation: pulsate 1.5s ease-in-out infinite;
    -webkit-animation: pulsate 1.5s ease-in-out infinite;
    border: 1pt solid #fff;
    /* make a circle */
    -moz-border-radius: 51px;
    -webkit-border-radius: 51px;
    border-radius: 51px;
    /* multiply the shadows, inside and outside the circle */
    -moz-box-shadow: inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
    -webkit-box-shadow: inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
    box-shadow: inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
    /* set the ring's new dimension and re-center it */
    height: 51px !important;
    margin: -18px 0 0 -18px;
    width: 51px !important;
}

/* hide the superfluous marker image since it would expand and shrink with its containing element */
/*	#dMap div[style*="987654"][title] img {*/
#map div[title="In Move"] img {
    display: none;
}

/* compensate for iPhone and Android devices with high DPI, add iPad media query */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width: 768px) {
    #map div[title="In Move"] {
        margin: -10px 0 0 -10px;
    }
}

#map div[title="In Stop"] {
    -moz-animation: pulsate 1.5s ease-in-out infinite;
    -webkit-animation: pulsate 1.5s ease-in-out infinite;
    border: 1pt solid #fff;
    /* make a circle */
    -moz-border-radius: 27px;
    -webkit-border-radius: 27px;
    border-radius: 27px;
    /* multiply the shadows, inside and outside the circle */
    -moz-box-shadow: inset 0 0 5px #1bb47c, inset 0 0 5px #1bb47c, inset 0 0 5px #1bb47c, 0 0 5px #2aff8c, 0 0 5px #06f, 0 0 5px #06f;
    -webkit-box-shadow: inset 0 0 5px #1bb47c, inset 0 0 5px #1bb47c, inset 0 0 5px #1bb47c, 0 0 5px #2aff8c, 0 0 5px #2aff8c, 0 0 5px #2aff8c;
    box-shadow: inset 0 0 5px #2aff8c, inset 0 0 5px #2aff8c, inset 0 0 5px #2aff8c, 0 0 5px #2aff8c, 0 0 5px #2aff8c, 0 0 5px #2aff8c;
    /* set the ring's new dimension and re-center it */
    height: 27px !important;
    margin: -6px 0 0 -6px;
    width: 27px !important;
}

/* hide the superfluous marker image since it would expand and shrink with its containing element */
/*	#dMap div[style*="987654"][title] img {*/
#map div[title="In Stop"] img {
    display: none;
}

/* compensate for iPhone and Android devices with high DPI, add iPad media query */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width: 768px) {
    #map div[title="In Stop"] {
        margin: -10px 0 0 -10px;
    }
}

#map .stop {
    -moz-animation: pulsate 1.5s ease-in-out infinite;
    -webkit-animation: pulsate 1.5s ease-in-out infinite;
    border: 1pt solid #fff;
    /* make a circle */
    -moz-border-radius: 27px;
    -webkit-border-radius: 27px;
    border-radius: 27px;
    /* multiply the shadows, inside and outside the circle */
    -moz-box-shadow: inset 0 0 5px #1bb47c, inset 0 0 5px #1bb47c, inset 0 0 5px #1bb47c, 0 0 5px #2aff8c, 0 0 5px #06f, 0 0 5px #06f;
    -webkit-box-shadow: inset 0 0 5px #1bb47c, inset 0 0 5px #1bb47c, inset 0 0 5px #1bb47c, 0 0 5px #2aff8c, 0 0 5px #2aff8c, 0 0 5px #2aff8c;
    box-shadow: inset 0 0 5px #2aff8c, inset 0 0 5px #2aff8c, inset 0 0 5px #2aff8c, 0 0 5px #2aff8c, 0 0 5px #2aff8c, 0 0 5px #2aff8c;
    /* set the ring's new dimension and re-center it */
    height: 27px !important;
    margin: -6px 0 0 -6px;
    width: 27px !important;
}

/* hide the superfluous marker image since it would expand and shrink with its containing element */
/*	#dMap div[style*="987654"][title] img {*/
#map .stop img {
    display: none;
}

/* compensate for iPhone and Android devices with high DPI, add iPad media query */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width: 768px) {
    #map .stop {
        margin: -10px 0 0 -10px;
    }
}

.leaflet-pane {
    z-index: 5 !important;
}

.infoWinDiv{
    margin-left: 15px;
}