.body {
    font-family: "Roboto", sans-serif;
    color: #212121;
    background: #f2f2f2;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

#container {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

@-webkit-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@-webkit-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@-moz-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@-ms-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@-moz-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@-webkit-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@-o-keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
@keyframes uil-ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        margin: 0 0 0 0;
    }
    33% {
        width: 44%;
        height: 44%;
        margin: -22% 0 0 -22%;
        opacity: 1;
    }
    100% {
        width: 88%;
        height: 88%;
        margin: -44% 0 0 -44%;
        opacity: 0;
    }
}
.uil-ripple-css {
    background: none;
    position: relative;
    width: 200px;
    height: 200px;
}

.uil-ripple-css.small {
    background: none;
    position: relative;
    width: 48px;
    height: 48px;
    margin-left: auto;
    margin-right: auto;
}

.uil-ripple-css div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 50%;
    border-width: 5px;
    border-style: solid;
    -ms-animation: uil-ripple 2s ease-out infinite;
    -moz-animation: uil-ripple 2s ease-out infinite;
    -webkit-animation: uil-ripple 2s ease-out infinite;
    -o-animation: uil-ripple 2s ease-out infinite;
    animation: uil-ripple 2s ease-out infinite;
}

.uil-ripple-css.small div {
    border-width: 3px;
}

.uil-ripple-css div:nth-of-type(1) {
    border-color: #384248;
}
.uil-ripple-css div:nth-of-type(2) {
    border-color: #3eb6b5;
    -ms-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}

/*backdrop style*/
.backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 1;
    -webkit-transition: opacity 600ms linear;
    transition: opacity 600ms linear;
}

/*To remove map zoom and other options from track shuttl with vehicle number*/
.trackWithVehicleNum .gmnoprint{
    display: none;
}

.trackWithVehicleNum .gm-style .gm-style-iw + div {
    display: none; /* <-- this will generally work on the fly. */
    visibility: hidden; /* this 2 lines below are just for hard hiding. :) */
    opacity: 0;
}