<commit_before>@import 'variables';

body {
    // http://blog.55minutes.com/2012/04/iphone-text-resizing/
    -webkit-text-size-adjust: 100%;
    color: #222;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

header,
main,
footer {
    display: block;
}

#cookie-message {
    font-size: .75em;
    display: none;
    margin: auto;
    padding: 1.2em 1.33em;
}

main {
    background: white;
    padding: 0 1em;
}

a {
    color: $link-color;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-decoration-skip: ink;
}

a:focus,
a:active {
    background-color: $brand-color;
    color: #000;
}

abbr {
    cursor: help;
    font-weight: bold;
    text-decoration: none;
}

label {
    cursor: pointer;
}

summary {
    font-weight: bold;
    margin: 1em 0;
}

header {
    background: $brand-color;
    overflow: hidden;

    a {
        color: #000;
        display: inline-block;
        line-height: 1;
        padding: .66667em;
    }

    a:hover {
        background-color: $brand-color-darker;
        text-decoration: none;
    }

    .site-name {
        float: left;
        font-size: 1.5em;
    }

    .site-name:after {
        content: url('/static/svg/bus.svg');
        display: inline-block;
        margin-left: .66667em;
    }

    .ferry:after {
        content: url('/static/svg/boat.svg');
        margin-top: -1em;
    }

    ul {
        float: right;
        margin: 0;

        li {
            display: inline;
        }

        a {
            padding: 1em;
            padding-left: .5em;
            line-height: 1.5em;
        }
    }

    .search {
        float: right;

        label {
            display: block;
            line-height: 1.5;
            padding: 1em .5em;
            padding-left: 0;

            input {
                margin: 0;
                position: absolute;
                top: -3em;
            }

            input:focus {
                border-width: .75em 1em;
                left: 0;
                top: 0;
                width: 100%;
            }

            + input {
                display: none;
            }
        }
    }
}

h1,
h2 {
    font-weight: 600;
    line-height: 1.2em;
    margin: .5em 0;
}

h1 {
    font-size: 1.75em;
}

h2 {
    font-size: 1.25em;
    margin-top: 1em;
}

h3 {
    font-size: 1em;
    margin: .25em 0;
}

.bulleted li {
    list-style: disc;
    margin-left: 1em;
}

.button,
input[type='submit'] {
    appearance: none;
    background: $brand-color;
    border: 0;
    border-bottom: .0625em solid $brand-color-darker;
    border-radius: .5em;
    color: inherit;
    display: inline-block;
    font: inherit;
    margin-bottom: .5em;
    margin-top: .0625em;
    padding: .5em;
    padding-bottom: .4em;
    vertical-align: bottom;

    &:hover {
        border-bottom-width: .125em;
        margin-top: 0;
        text-decoration: none;
    }

    &:focus,
    &:active {
        background-color: $brand-color-darker;
        border-bottom: 0;
        margin-top: .125em;

        &:after {
            content: '\2026';
        }
    }
}

input[type='text'],
input[type='url'],
input[type='email'],
textarea {
    display: block;
    width: 100%;
}

.errorlist {
    color: #f00;
    float: right;
    font-size: .875em;
    margin: 0 0 -1em;
}

input[type='text'],
input[type='url'],
input[type='email'],
input[type='search'],
textarea {
    appearance: none;
    border: 1px solid $brand-color;
    border-radius: 0;
    box-sizing: border-box;
    font: inherit;
    outline: 0;
    padding: .25em;
    padding-right: 0;

    &:focus {
        border-color: $brand-color-darker;
    }

    .errorlist + p & {
        border-color: #f00;
    }
}

.timetable-date {
    display: inline-block;
    position: relative;

    &:after {
        border: .25em solid white;
        border-bottom: 0;
        border-top: .5em solid #222;
        content: '';
        height: 0;
        position: absolute;
        right: .5em;
        top: 1em;
    }

    select {
        appearance: none;
        background: none;
        border: 1px solid $brand-color;
        font: inherit;
        height: 2.5em;
        padding: 0 1.5em 0 .5em;
        position: relative;
        vertical-align: top;
        z-index: 1;

        &::-ms-expand {
            display: none;
        }
    }
}

input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
}

ul,
ol,
li {
    list-style: none;
    padding: 0;
}

ul,
ol {
    margin: 1em 0;
}

main li {
    break-inside: avoid;

    a {
        display: block;
        overflow: hidden;
        padding: .125em 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.has-smalls {
    li {
        a {
            text-decoration: none;
        }

        a:hover span {
            text-decoration: underline;
        }
    }

    span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    small {
        color: #222;
        display: block;
        float: left;
        font-size: .75em;
        margin-right: .5em;
    }

    a small:last-child {
        padding-bottom: .33em;
        margin: 0;
    }
}

.bulleted,
main p,
table {
    a {
        display: inline;
        padding: 0;
    }

    a[href^='http']:after {
        content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='10' width='10'%3E%3Cpath d='M4.3 3.5H.5v6h6V5.7M4.5.5v1l1 1-3 3 2 2 3-3 1 1h1v-5z' fill='white' stroke='%2361c'/%3E%3C/svg%3E");
        margin-left: .25em;
        vertical-align: top;
    }
}

.bulleted a {
    white-space: normal;
}

.breadcrumb {
    border-bottom: 1px solid $brand-color;
    margin: 0 -1em;
    overflow: hidden;
    padding: .5em 0 0 1em;

    li {
        float: left;
        margin: 0;
        margin-top: -.5em;
    }

    a {
        float: left;
        padding: .75em 0;
    }

    li:after {
        color: $brand-color-darker;
        content: '\203A';
        float: left;
        padding: .75em .5em;
    }

    li:last-child:after {
        padding-right: 0;
        width: 0;
    }
}

.services {
    a {
        white-space: normal;
    }

    // override `main li a` styles
    a:hover {
        color: $link-color;
        text-decoration: underline;
    }

    a:focus,
    a:active {
        color: #000;
    }

    .name {
        color: #dc7;
        float: left;
        font-variant-numeric: tabular-nums;
        margin-bottom: .5em;
        margin-right: 1em;

        &.is-short {
            font-size: 3em;
            line-height: 1.2em;
            margin-bottom: 0;
            margin-right: .33em;
        }
    }

    a[href^="/services/bakerloo-elephant"],
    a[href^="/services/central-ealing"],
    a[href^="/services/circle-aldgate"],
    a[href^="/services/district-ealing"],
    a[href^="/services/hammersmith-city"],
    a[href^="/services/jubilee-stanmore"],
    a[href^="/services/metropolitan"],
    a[href^="/services/northern-morden"],
    a[href^="/services/piccadilly-heathrow"],
    a[href^="/services/victoria-bricton"],
    a[href^="/services/waterloo-city"] {
        .name {
            color: white;
            padding: 0 .25em;
        }
    }

    a[href^="/services/bakerloo-elephant"] .name {
        background: rgb(178, 99, 0);
    }

    a[href^="/services/central-ealing"] .name {
        background: rgb(220, 36, 31);
    }

    a[href^="/services/circle-aldgate"] .name {
        background: rgb(255, 211, 41);
    }

    a[href^="/services/district-ealing"] .name {
        background: rgb(0, 125, 50);
    }

    a[href^="/services/hammersmith-city"] .name {
        background: rgb(244, 169, 190);
    }

    a[href^="/services/jubilee-stanmore"] .name {
        background: rgb(161, 165, 167);
    }

    a[href^="/services/metropolitan"] .name {
        background: rgb(155, 0, 88);
    }

    a[href^="/services/northern-morden"] .name {
        background: rgb(0, 0, 0);
    }

    a[href^="/services/piccadilly-heathrow"] .name {
        background: rgb(0, 25, 168);
    }

    a[href^="/services/victoria-bricton"] .name {
        background: rgb(0, 152, 216);
    }

    a[href^="/services/waterloo-city"] .name {
        background: rgb(147, 206, 186);
    }

    a:focus .name,
    a:active .name {
        color: inherit;
    }
}

#regions {
    position: relative;
}

#svgmap {
    bottom: 0;
    height: 100%;
    max-width: 50%;
    position: absolute;
    right: 0;
    width: auto;

    path {
        fill: $brand-color-darker;
        stroke: #fff;
    }

    a {
        cursor: pointer;
    }

    .highlight,
    a:focus,
    a:hover {
        outline: 0;

        path {
            fill: #dc7;
        }
    }

    a path.outline {
        fill: none;
        stroke: $brand-color-darker;
        stroke-width: 1px;
    }
}

.map-wrapper {
    display: none;
}

#map {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;

    &.service-map,
    &.stop-map {
        position: relative;
        height: 210px;
    }

    &.service-map {
        margin: 1em 0;
        height: 240px;
    }

}

.leaflet-marker-icon.just-arrow {
    .arrow {
        border: 8px solid transparent;
        border-bottom-color: #333;
        border-top: 0;
    }
}

.leaflet-marker-icon.leaflet-div-icon {
    background: none;
    border: 0;
    color: #222;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;

    .bus,
    .stop {
        border: 1px solid rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }

    .bus {
        background: #fff;
        height: 12px;
        line-height: 12px;
        margin-top: 3px;
    }

    .coloured {
        border-color: #fff;
        // text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    }

    .white-text {
        color: #fff;
        // text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
    }

    .stop {
        background: $brand-color;
        border-radius: 10px;
        line-height: 16px;
        height: 18px;
    }

    &.active .stop {
        background: #fff;
    }

    .arrow {
        border: 5px solid transparent;
        border-bottom: 5px solid #000;
        border-top: 0;
        left: 5px;
        position: absolute;
        top: -6px;
        transform-origin: 5px 16px;
    }

}

body {
    .leaflet-container {
        font-family: inherit;
        font-size: .875em;
    }
}

.leaflet-popup-content a {
    display: block;
    font-size: 1em;
    overflow: hidden;

    span {
        display: block;
    }

    small {
        color: #222;
        display: block;
        float: left;
        font-size: .75em;
        margin-right: .5em;
    }
}

table {
    border-collapse: collapse;
}

td {
    border-top: 1px solid $brand-color;
}

th,
td {
    border-left: 1px solid $brand-color;
    padding: .25em .5em;
    text-align: left;

    &:first-child {
        border-left: 0;
        padding-left: 0;
    }

    &:last-child {
        padding-right: 0;
    }
}

.timetable-wrapper-wrapper {
    font-size: .875em;
    margin: 1em 0;

    input {
        vertical-align: top;
    }
}

.timetable-wrapper {
    margin-right: -1.1em;
    margin-top: 1em;
    overflow: auto;
}

input:not(:checked) + label {
    + .timetable-wrapper,
    + .route {
        .OTH,
        .TIP {
            display: none;
        }

        .referrer {
            display: table-row;
        }
    }
}

.timetable {
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
    padding-right: 1.1em;
    table-layout: fixed;

    td {
        border-left: 0;
    }

    td,
    th {
        height: 1.5em;
    }

    tbody tr:first-child {
        td,
        th {
            border-top: 0;
        }
    }

    .referrer {
        td,
        th {
            background: $brand-color;
        }

        td[colspan] {
            background: none;
        }

        a {
            color: #000;
        }
    }

    th {
        border-right: 1px solid $brand-color;
        border-top: 1px solid $brand-color;
        font-weight: normal;
        white-space: nowrap;

        a {
            display: block;
            margin: -.25em -.5em;
            margin-left: 0;
            max-width: calc(100vw - 12em);
            overflow: hidden;
            padding: .25em .5em;
            padding-left: 0;
            text-overflow: ellipsis;
        }
    }

    tfoot td {
        border-left: 1px solid $brand-color;
        border-top: 1px solid $brand-color;
        vertical-align: top;
    }

    tfoot td:first-child {
        border: 0;
    }

    .OTH,
    .TIP {
        th a {
            padding-left: 1em;
        }
    }
}

.fancy {
    th {
        padding-right: 0;
        position: absolute;

        a {
            margin-right: 0;
            max-width: inherit;
        }
    }

    tfoot td:first-child {
        position: absolute;
    }
}

.route {
    .OTH,
    .TIP {
        a {
            padding-left: 1em;
        }
    }
}

.asides {
    clear: both;
    overflow: hidden;
}

.aside {
    margin-top: 1em;

    table {
        margin: 0 -.5em;
    }

    td {
        border: 0;
        padding: .125em .5em;
        vertical-align: top;

        &:nth-child(2) {
            width: 100%;
        }

        &:last-child {
            white-space: nowrap;
        }

        a {
            display: block;
            margin: -.125em -.5em;
            padding: .125em .5em;
        }
    }

    .credit {
        font-size: .75em;
        margin: .3em 0 0;
        text-align: right;
    }
}

.box {
    border: 1px solid $brand-color;
    box-sizing: border-box;
    padding: .5em .75em;
}

.box h2 {
    margin: .25em 0 .5em;
}

.box ul {
    margin: 0;
}

#sidebar {
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    overflow: auto;
    padding: 0 1em;
    position: absolute;
    top: 50%;
    width: 100%;
}

#hugemap {
    height: 50%;

    .marker-cluster {
        // background-clip: padding-box;
        background: $brand-color;
        border-radius: 20px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .65);

        div {
            background: #fff;
            border-radius: 15px;
            font-size: 12px;
            height: 30px;
            margin-left: 5px;
            margin-top: 5px;
            text-align: center;
            width: 30px;
        }

        span {
            line-height: 30px;
        }
    }
}

.leaflet-container .leaflet-control.hugemap-status {
    background: #fff;
    background: rgba(255, 255, 255, .8);
    margin: 0;
    padding: 0 5px;
}

.colour {
    display: inline-block;
    height: 1em;
    width: 1em;
}

.warning {
    border: 1px solid $brand-color;
    padding: 1em;
}

.contact-details {
    word-wrap: break-word;
}

.banner-ad {
    min-height: 5.25em;
    overflow: hidden;
    padding: 1em 0;
}

.ad-label {
    font-size: .75em;
    height: 2em;
    margin: 0 auto;
    max-width: 80.66667em;
}

.adsbygoogle {
    display: block;
    margin: 0 auto;
    max-width: 60.5em;
}

footer {
    margin-top: 1.5em;

    ul,
    .banner-ad {
        border-top: 1px solid $brand-color;
        clear: both;
        margin: 0;
        padding: 1em .625em;
    }

    ul {
        color: #555;
        font-size: .75em;
        padding: 1em;
        text-align: center;

        a {
            padding: 1.2em .25em;
        }
    }

    li {
        display: inline;

        &::before {
            color: $brand-color-darker;
            content: '  \2022  ';
        }

        &:first-child::before {
            display: none;
        }
    }
}

@media print {
    @import 'print';
}
<commit_msg>Remove button bottom margin, unused .button class<commit_after>@import 'variables';

body {
    // http://blog.55minutes.com/2012/04/iphone-text-resizing/
    -webkit-text-size-adjust: 100%;
    color: #222;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

header,
main,
footer {
    display: block;
}

#cookie-message {
    font-size: .75em;
    display: none;
    margin: auto;
    padding: 1.2em 1.33em;
}

main {
    background: white;
    padding: 0 1em;
}

a {
    color: $link-color;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-decoration-skip: ink;
}

a:focus,
a:active {
    background-color: $brand-color;
    color: #000;
}

abbr {
    cursor: help;
    font-weight: bold;
    text-decoration: none;
}

label {
    cursor: pointer;
}

summary {
    font-weight: bold;
    margin: 1em 0;
}

header {
    background: $brand-color;
    overflow: hidden;

    a {
        color: #000;
        display: inline-block;
        line-height: 1;
        padding: .66667em;
    }

    a:hover {
        background-color: $brand-color-darker;
        text-decoration: none;
    }

    .site-name {
        float: left;
        font-size: 1.5em;
    }

    .site-name:after {
        content: url('/static/svg/bus.svg');
        display: inline-block;
        margin-left: .66667em;
    }

    .ferry:after {
        content: url('/static/svg/boat.svg');
        margin-top: -1em;
    }

    ul {
        float: right;
        margin: 0;

        li {
            display: inline;
        }

        a {
            padding: 1em;
            padding-left: .5em;
            line-height: 1.5em;
        }
    }

    .search {
        float: right;

        label {
            display: block;
            line-height: 1.5;
            padding: 1em .5em;
            padding-left: 0;

            input {
                margin: 0;
                position: absolute;
                top: -3em;
            }

            input:focus {
                border-width: .75em 1em;
                left: 0;
                top: 0;
                width: 100%;
            }

            + input {
                display: none;
            }
        }
    }
}

h1,
h2 {
    font-weight: 600;
    line-height: 1.2em;
    margin: .5em 0;
}

h1 {
    font-size: 1.75em;
}

h2 {
    font-size: 1.25em;
    margin-top: 1em;
}

h3 {
    font-size: 1em;
    margin: .25em 0;
}

.bulleted li {
    list-style: disc;
    margin-left: 1em;
}

input[type='submit'] {
    appearance: none;
    background: $brand-color;
    border: 0;
    border-bottom: .0625em solid $brand-color-darker;
    border-radius: .5em;
    color: inherit;
    display: inline-block;
    font: inherit;
    margin-top: .0625em;
    padding: .5em;
    padding-bottom: .4em;
    vertical-align: bottom;

    &:hover {
        border-bottom-width: .125em;
        margin-top: 0;
        text-decoration: none;
    }

    &:focus,
    &:active {
        background-color: $brand-color-darker;
        border-bottom: 0;
        margin-top: .125em;

        &:after {
            content: '\2026';
        }
    }
}

input[type='text'],
input[type='url'],
input[type='email'],
textarea {
    display: block;
    width: 100%;
}

.errorlist {
    color: #f00;
    float: right;
    font-size: .875em;
    margin: 0 0 -1em;
}

input[type='text'],
input[type='url'],
input[type='email'],
input[type='search'],
textarea {
    appearance: none;
    border: 1px solid $brand-color;
    border-radius: 0;
    box-sizing: border-box;
    font: inherit;
    outline: 0;
    padding: .25em;
    padding-right: 0;

    &:focus {
        border-color: $brand-color-darker;
    }

    .errorlist + p & {
        border-color: #f00;
    }
}

.timetable-date {
    display: inline-block;
    position: relative;

    &:after {
        border: .25em solid white;
        border-bottom: 0;
        border-top: .5em solid #222;
        content: '';
        height: 0;
        position: absolute;
        right: .5em;
        top: 1em;
    }

    select {
        appearance: none;
        background: none;
        border: 1px solid $brand-color;
        font: inherit;
        height: 2.5em;
        padding: 0 1.5em 0 .5em;
        position: relative;
        vertical-align: top;
        z-index: 1;

        &::-ms-expand {
            display: none;
        }
    }
}

input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
}

ul,
ol,
li {
    list-style: none;
    padding: 0;
}

ul,
ol {
    margin: 1em 0;
}

main li {
    break-inside: avoid;

    a {
        display: block;
        overflow: hidden;
        padding: .125em 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.has-smalls {
    li {
        a {
            text-decoration: none;
        }

        a:hover span {
            text-decoration: underline;
        }
    }

    span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    small {
        color: #222;
        display: block;
        float: left;
        font-size: .75em;
        margin-right: .5em;
    }

    a small:last-child {
        padding-bottom: .33em;
        margin: 0;
    }
}

.bulleted,
main p,
table {
    a {
        display: inline;
        padding: 0;
    }

    a[href^='http']:after {
        content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='10' width='10'%3E%3Cpath d='M4.3 3.5H.5v6h6V5.7M4.5.5v1l1 1-3 3 2 2 3-3 1 1h1v-5z' fill='white' stroke='%2361c'/%3E%3C/svg%3E");
        margin-left: .25em;
        vertical-align: top;
    }
}

.bulleted a {
    white-space: normal;
}

.breadcrumb {
    border-bottom: 1px solid $brand-color;
    margin: 0 -1em;
    overflow: hidden;
    padding: .5em 0 0 1em;

    li {
        float: left;
        margin: 0;
        margin-top: -.5em;
    }

    a {
        float: left;
        padding: .75em 0;
    }

    li:after {
        color: $brand-color-darker;
        content: '\203A';
        float: left;
        padding: .75em .5em;
    }

    li:last-child:after {
        padding-right: 0;
        width: 0;
    }
}

.services {
    a {
        white-space: normal;
    }

    // override `main li a` styles
    a:hover {
        color: $link-color;
        text-decoration: underline;
    }

    a:focus,
    a:active {
        color: #000;
    }

    .name {
        color: #dc7;
        float: left;
        font-variant-numeric: tabular-nums;
        margin-bottom: .5em;
        margin-right: 1em;

        &.is-short {
            font-size: 3em;
            line-height: 1.2em;
            margin-bottom: 0;
            margin-right: .33em;
        }
    }

    a[href^="/services/bakerloo-elephant"],
    a[href^="/services/central-ealing"],
    a[href^="/services/circle-aldgate"],
    a[href^="/services/district-ealing"],
    a[href^="/services/hammersmith-city"],
    a[href^="/services/jubilee-stanmore"],
    a[href^="/services/metropolitan"],
    a[href^="/services/northern-morden"],
    a[href^="/services/piccadilly-heathrow"],
    a[href^="/services/victoria-bricton"],
    a[href^="/services/waterloo-city"] {
        .name {
            color: white;
            padding: 0 .25em;
        }
    }

    a[href^="/services/bakerloo-elephant"] .name {
        background: rgb(178, 99, 0);
    }

    a[href^="/services/central-ealing"] .name {
        background: rgb(220, 36, 31);
    }

    a[href^="/services/circle-aldgate"] .name {
        background: rgb(255, 211, 41);
    }

    a[href^="/services/district-ealing"] .name {
        background: rgb(0, 125, 50);
    }

    a[href^="/services/hammersmith-city"] .name {
        background: rgb(244, 169, 190);
    }

    a[href^="/services/jubilee-stanmore"] .name {
        background: rgb(161, 165, 167);
    }

    a[href^="/services/metropolitan"] .name {
        background: rgb(155, 0, 88);
    }

    a[href^="/services/northern-morden"] .name {
        background: rgb(0, 0, 0);
    }

    a[href^="/services/piccadilly-heathrow"] .name {
        background: rgb(0, 25, 168);
    }

    a[href^="/services/victoria-bricton"] .name {
        background: rgb(0, 152, 216);
    }

    a[href^="/services/waterloo-city"] .name {
        background: rgb(147, 206, 186);
    }

    a:focus .name,
    a:active .name {
        color: inherit;
    }
}

#regions {
    position: relative;
}

#svgmap {
    bottom: 0;
    height: 100%;
    max-width: 50%;
    position: absolute;
    right: 0;
    width: auto;

    path {
        fill: $brand-color-darker;
        stroke: #fff;
    }

    a {
        cursor: pointer;
    }

    .highlight,
    a:focus,
    a:hover {
        outline: 0;

        path {
            fill: #dc7;
        }
    }

    a path.outline {
        fill: none;
        stroke: $brand-color-darker;
        stroke-width: 1px;
    }
}

.map-wrapper {
    display: none;
}

#map {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;

    &.service-map,
    &.stop-map {
        position: relative;
        height: 210px;
    }

    &.service-map {
        margin: 1em 0;
        height: 240px;
    }

}

.leaflet-marker-icon.just-arrow {
    .arrow {
        border: 8px solid transparent;
        border-bottom-color: #333;
        border-top: 0;
    }
}

.leaflet-marker-icon.leaflet-div-icon {
    background: none;
    border: 0;
    color: #222;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;

    .bus,
    .stop {
        border: 1px solid rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }

    .bus {
        background: #fff;
        height: 12px;
        line-height: 12px;
        margin-top: 3px;
    }

    .coloured {
        border-color: #fff;
        // text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    }

    .white-text {
        color: #fff;
        // text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
    }

    .stop {
        background: $brand-color;
        border-radius: 10px;
        line-height: 16px;
        height: 18px;
    }

    &.active .stop {
        background: #fff;
    }

    .arrow {
        border: 5px solid transparent;
        border-bottom: 5px solid #000;
        border-top: 0;
        left: 5px;
        position: absolute;
        top: -6px;
        transform-origin: 5px 16px;
    }

}

body {
    .leaflet-container {
        font-family: inherit;
        font-size: .875em;
    }
}

.leaflet-popup-content a {
    display: block;
    font-size: 1em;
    overflow: hidden;

    span {
        display: block;
    }

    small {
        color: #222;
        display: block;
        float: left;
        font-size: .75em;
        margin-right: .5em;
    }
}

table {
    border-collapse: collapse;
}

td {
    border-top: 1px solid $brand-color;
}

th,
td {
    border-left: 1px solid $brand-color;
    padding: .25em .5em;
    text-align: left;

    &:first-child {
        border-left: 0;
        padding-left: 0;
    }

    &:last-child {
        padding-right: 0;
    }
}

.timetable-wrapper-wrapper {
    font-size: .875em;
    margin: 1em 0;

    input {
        vertical-align: top;
    }
}

.timetable-wrapper {
    margin-right: -1.1em;
    margin-top: 1em;
    overflow: auto;
}

input:not(:checked) + label {
    + .timetable-wrapper,
    + .route {
        .OTH,
        .TIP {
            display: none;
        }

        .referrer {
            display: table-row;
        }
    }
}

.timetable {
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
    padding-right: 1.1em;
    table-layout: fixed;

    td {
        border-left: 0;
    }

    td,
    th {
        height: 1.5em;
    }

    tbody tr:first-child {
        td,
        th {
            border-top: 0;
        }
    }

    .referrer {
        td,
        th {
            background: $brand-color;
        }

        td[colspan] {
            background: none;
        }

        a {
            color: #000;
        }
    }

    th {
        border-right: 1px solid $brand-color;
        border-top: 1px solid $brand-color;
        font-weight: normal;
        white-space: nowrap;

        a {
            display: block;
            margin: -.25em -.5em;
            margin-left: 0;
            max-width: calc(100vw - 12em);
            overflow: hidden;
            padding: .25em .5em;
            padding-left: 0;
            text-overflow: ellipsis;
        }
    }

    tfoot td {
        border-left: 1px solid $brand-color;
        border-top: 1px solid $brand-color;
        vertical-align: top;
    }

    tfoot td:first-child {
        border: 0;
    }

    .OTH,
    .TIP {
        th a {
            padding-left: 1em;
        }
    }
}

.fancy {
    th {
        padding-right: 0;
        position: absolute;

        a {
            margin-right: 0;
            max-width: inherit;
        }
    }

    tfoot td:first-child {
        position: absolute;
    }
}

.route {
    .OTH,
    .TIP {
        a {
            padding-left: 1em;
        }
    }
}

.asides {
    clear: both;
    overflow: hidden;
}

.aside {
    margin-top: 1em;

    table {
        margin: 0 -.5em;
    }

    td {
        border: 0;
        padding: .125em .5em;
        vertical-align: top;

        &:nth-child(2) {
            width: 100%;
        }

        &:last-child {
            white-space: nowrap;
        }

        a {
            display: block;
            margin: -.125em -.5em;
            padding: .125em .5em;
        }
    }

    .credit {
        font-size: .75em;
        margin: .3em 0 0;
        text-align: right;
    }
}

.box {
    border: 1px solid $brand-color;
    box-sizing: border-box;
    padding: .5em .75em;
}

.box h2 {
    margin: .25em 0 .5em;
}

.box ul {
    margin: 0;
}

#sidebar {
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    overflow: auto;
    padding: 0 1em;
    position: absolute;
    top: 50%;
    width: 100%;
}

#hugemap {
    height: 50%;

    .marker-cluster {
        // background-clip: padding-box;
        background: $brand-color;
        border-radius: 20px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .65);

        div {
            background: #fff;
            border-radius: 15px;
            font-size: 12px;
            height: 30px;
            margin-left: 5px;
            margin-top: 5px;
            text-align: center;
            width: 30px;
        }

        span {
            line-height: 30px;
        }
    }
}

.leaflet-container .leaflet-control.hugemap-status {
    background: #fff;
    background: rgba(255, 255, 255, .8);
    margin: 0;
    padding: 0 5px;
}

.colour {
    display: inline-block;
    height: 1em;
    width: 1em;
}

.warning {
    border: 1px solid $brand-color;
    padding: 1em;
}

.contact-details {
    word-wrap: break-word;
}

.banner-ad {
    min-height: 5.25em;
    overflow: hidden;
    padding: 1em 0;
}

.ad-label {
    font-size: .75em;
    height: 2em;
    margin: 0 auto;
    max-width: 80.66667em;
}

.adsbygoogle {
    display: block;
    margin: 0 auto;
    max-width: 60.5em;
}

footer {
    margin-top: 1.5em;

    ul,
    .banner-ad {
        border-top: 1px solid $brand-color;
        clear: both;
        margin: 0;
        padding: 1em .625em;
    }

    ul {
        color: #555;
        font-size: .75em;
        padding: 1em;
        text-align: center;

        a {
            padding: 1.2em .25em;
        }
    }

    li {
        display: inline;

        &::before {
            color: $brand-color-darker;
            content: '  \2022  ';
        }

        &:first-child::before {
            display: none;
        }
    }
}

@media print {
    @import 'print';
}

{'fraction_non_alphanumeric': 0.13963453056080655, 'fraction_numerical': 0.0386578449905482, 'mean_word_length': 1.4906622724419334, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 4}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2860840', 'n_tokens_mistral': 12389, 'n_tokens_neox': 11180, 'n_words': 2417}