#content {
    margin: 2rem auto;
}

@media screen and (max-width: 768px) {
    #content {
        padding: 1rem;
    }
}

#content, .uk-navbar-container > div {
    max-width: 800px;
}

#content.wider, .uk-navbar-container .wider {
    max-width: 1000px;
}

.trip-detail > div {
    border-left: 1px solid #ccc;
    padding-left: 40px;
    padding-bottom: 1px;

    .distance-from-previous-stop {

        position: relative;
        margin: 3rem 0;

        .dot {
            position: absolute;
            border: 5px solid #ccc;
            border-radius: 50%;
            left: -5px;
            top: 7px;
        }

        .dot:nth-of-type(2) {
            top: 19px;
        }

        .dot:nth-of-type(3) {
            top: -5px;
        }
    }

    .thumbnail {
        max-width: 259px;
        max-height: 212px;
    }

    h2 {
        padding-top: 20px;
    }
}

@media screen and (max-width: 768px) {
    .trip-detail > div .distance-from-previous-stop .dot {
        left: -15px;
    }
}

/* Scale Google Map controls down. */
/* .gm-style-mtc, */
/* .gm-fullscreen-control, */
/* .gmnoprint, */
/* .gm-bundled-control { */
/*     transform: scale(0.9); /* Adjust the scale as needed */ */
/*     transform-origin: bottom right; /* Adjust based on positioning */ */
/* } */
/*  */