@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap);

#destination-dropdown,
input[type=date] {
    height: 34px;
    padding: 0 12px
}

input[type=date],
select {
    -webkit-appearance: none;
    background-position: 96%;
    background-size: 12px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> <polygon points='0,0 60,0 30,40' style='fill:black;'/> </svg>")
}

.timetable .run-footer .continues-as-route,
.timetable .trip-frequency {
    font-weight: var(--font-w700)
}

.timetable .table-container .table,
h1 {
    margin-bottom: 0
}

#error-message,
.route-color-swatch,
.route-color-swatch-large,
.timetable .trip-frequency,
.timetable th.city-column,
.trip-name {
    text-align: center
}

:root {
    --dark: #333;
    --light: #ccc;
    --bg-dark: #fff0;
    --table-odd-light: #f9f9f9;
    --table-odd-dark: #1e1e1e;
    --city-row-light: #415d86;
    --city-row-dark: #a0c4ff;
    --timetable-a-symbol-light: #212529;
    --timetable-thdead: #3166AB;
    --timetable-thead-text-light: #fff;
    --timetable-thead-text-dark: #ddd;
    --timetable-border-dark: #404040;
    --link: #488dfd;
    --font-family: Lato, sans-serif;
    --webkit-scrollbar-thumb-dark: rgb(255 255 255 / .8);
    --webkit-scrollbar-thumb-light: rgb(156 156 156 / .8);
    --webkit-scrollbar-track-dark: rgb(255 255 255 / .2);
    --webkit-scrollbar-track-light: rgb(57 57 57 / .2);
    --font-w0-8em: .8em;
    --font-w1em: 1em;
    --font-w1-2em: 1.2em;
    --font-w400: 400;
    --font-w500: 500;
    --font-w600: 600;
    --font-w700: 700;
    --loader-anim: spin 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
    --border-radius: 18px
}

html {
    font-family: var(--font-family);
    font-size: var(--font-w0-8em)
}

body {
    background-color: var(--bg-dark);
    padding-bottom: 100px;
    transition: background-color .3s
}

h1 {
    font-weight: var(--font-w600)
}

a:hover {
    text-decoration: underline
}

#text-message {
    font-size: var(--font-w1-2em);
    padding-bottom: 18px
}

.form-container {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin-top: 18px
}

label {
    margin-right: 5px
}

#destination-dropdown,
input {
    background-color: var(--bg-dark);
    color: var(--dark);
    border: 1px solid var(--light);
    border-radius: var(--border-radius, 8px);
    font-size: var(--font-w1em);
    font-family: var(--font-family);
    transition: background-color .3s, color .3s, border-color .3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1)
}

#error-message,
.timetable .city-row,
.timetable th.city-column,
.timetable-label>h2 {
    font-size: var(--font-w1-2em)
}

input[type=date] {
    min-width: calc(100% - 24px)
}

@supports (-webkit-touch-callout:none) {
    input[type=date] {
        min-width: calc(100% - 12px);
        height: 34px;
        padding: 0 12px;
        box-sizing: border-box
    }
}

#destination-dropdown option {
    font-size: large !important;
    padding: 8px
}

select {
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 30px 0 10px !important;
    -webkit-padding-end: 30px !important;
    -webkit-padding-start: 10px !important
}

input[type=date] {
    -moz-appearance: none;
    appearance: none
}

input[type=date]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none
}

.white-dot {
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #333;
    cursor: pointer
}

.excluded-dates,
.stop-header,
.stop-name-container,
.timetable table>tbody>tr:nth-of-type(odd) {
    background-color: var(--table-odd-light)
}

.map {
    width: 100%;
    max-width: 720px;
    border-radius: var(--border-radius);
    height: 250px;
    margin-bottom: 18px;
    margin-top: 18px
}

.map .mapboxgl-map {
    font-family: var(--font-family) !important
}

.map .mapboxgl-popup-content .popup-title {
    margin: 0;
    font-weight: var(--font-w700)
}

.map .mapboxgl-popup-content .route-item {
    display: flex;
    align-items: center;
    line-height: 1
}

.map-legend,
caption {
    visibility: hidden;
    height: 0
}

table {
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0
}

.timetable .run-footer,
.timetable .run-header,
.timetable .stop-header,
.timetable .stop-time {
    text-align: center;
    vertical-align: middle
}

.stop-code,
.stop-time,
.timetable {
    font-weight: var(--font-w400)
}

.timetable a.symbol {
    padding-left: 4px;
    color: var(--timetable-a-symbol-light);
    text-decoration: none
}

.timetable .city-row {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    color: var(--city-row-light)
}

.timetable .table-container {
    overflow-x: scroll;
    border-radius: 4px
}

.timetable .table-container::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 8px
}

.timetable .table-container::-webkit-scrollbar-track {
    background-color: var(--webkit-scrollbar-track-light);
    border-radius: 4px
}

.timetable .table-container::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--webkit-scrollbar-thumb-light)
}

.timetable thead tr {
    background: var(--timetable-thdead)
}

.timetable thead tr,
.timetable thead tr a {
    color: var(--timetable-thead-text-light)
}

.timetable th {
    text-align: left
}

.timetable td,
.timetable th {
    padding: 0
}

.timetable table>tbody>tr>td,
.timetable table>tbody>tr>th,
.timetable table>tfoot>tr>td,
.timetable table>tfoot>tr>th,
.timetable table>thead>tr>td,
.timetable table>thead>tr>th {
    padding: 6px;
    line-height: 1.2;
    vertical-align: top;
    border-bottom: 1px solid var(--timetable-thead-text-dark);
    border-right: 1px solid var(--timetable-thead-text-dark)
}

.timetable table>thead>tr>th {
    vertical-align: top
}

.timetable table>caption+thead>tr:first-child>td,
.timetable table>caption+thead>tr:first-child>th,
.timetable table>colgroup+thead>tr:first-child>td,
.timetable table>colgroup+thead>tr:first-child>th,
.timetable table>thead:first-child>tr:first-child>td,
.timetable table>thead:first-child>tr:first-child>th {
    border-top: 0;
    min-width: 6em
}

.timetable table>thead>tr>td,
.timetable table>thead>tr>th {
    border: 0
}

.table-responsive {
    min-height: .01%;
    overflow-x: auto
}

.table-horizontal tbody tr th.stop-name-container {
    min-width: 95%
}

.table-hourly {
    width: auto
}

.timetable .table-vertical .trip-row .trip-notes {
    text-wrap: nowrap
}

.route-color-swatch {
    min-width: 34px;
    height: 34px;
    border-radius: 17px;
    line-height: 34px;
    font-size: 14px;
    letter-spacing: -.5px;
    padding: 0 5px
}

.route-color-swatch-large {
    min-width: 46px;
    height: 30px;
    border-radius: 8px;
    line-height: 30px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -1px;
    padding: 0 8px;
    margin-bottom: 18px
}

.timetable-page-label {
    margin-right: 28px
}

.timetable-page .container {
    padding: 8px !important
}

.excluded-dates {
    max-height: 54px;
    cursor: pointer;
    transition: max-height .8s ease-out;
    padding: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    border-radius: 18px
}

.excluded-dates-open {
    transition: max-height .8s ease-in;
    max-height: 2000px !important;
    -webkit-line-clamp: 1000;
    line-clamp: 1000
}

.stop-header,
.stop-name-container {
    position: sticky;
    left: 0;
    min-width: min(200px, 35vw) !important;
    min-height: 1.5em
}

.stop-header {
    background-color: var(--timetable-thdead)
}

.stop-code {
    height: 0;
    visibility: collapse
}

thead {
    position: sticky;
    top: 0;
    background-color: var(--timetable-thdead-text-light);
    z-index: 10
}

.table-container {
    overflow-y: hidden
}

.timetable-label>h2 {
    font-weight: var(--font-w500)
}

.loader {
    border: 8px solid var(--light);
    border-top: 8px solid var(--timetable-thdead);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: var(--loader-anim);
    animation-timing-function: ease-in-out;
    display: none;
    margin: 20px auto
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

#error-message {
    color: red;
    font-weight: 700;
    margin: 20px 0
}

@media (prefers-color-scheme:dark) {

    input[type=date],
    select {
        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> <polygon points='0,0 60,0 30,40' style='fill:white;'/> </svg>")
    }

    body {
        color: var(--light);
        background: trasparent
    }

    .loader {
        border: 8px solid var(--light);
        border-top: 8px solid var(--timetable-thdead)
    }

    .timetable thead tr,
    .timetable thead tr a,
    h1,
    h2,
    h3,
    h4,
    h5 {
        color: var(--timetable-thead-text-dark)
    }

    a:hover {
        text-decoration: underline
    }

    a {
        color: var(--link)
    }

    .stop-header,
    .timetable-page thead tr {
        background: var(--timetable-thdead)
    }

    .timetable table>tbody>tr>td,
    .timetable table>tbody>tr>th,
    .timetable table>tfoot>tr>td,
    .timetable table>tfoot>tr>th,
    .timetable table>thead>tr>td,
    .timetable table>thead>tr>th {
        border-bottom: 1px solid var(--timetable-border-dark);
        border-right: 1px solid var(--timetable-border-dark)
    }

    .stop-name-container,
    .timetable table>tbody>tr:nth-of-type(odd) {
        background-color: var(--table-odd-dark)
    }

    .timetable table>thead>tr>td,
    .timetable table>thead>tr>th {
        border: 0
    }

    .timetable .city-row,
    .timetable a.symbol,
    .timetable th.city-column {
        color: var(--city-row-dark)
    }

    .timetable .table-container::-webkit-scrollbar-track {
        background-color: var(--webkit-scrollbar-track-dark)
    }

    .timetable .table-container::-webkit-scrollbar-thumb {
        background-color: var(--webkit-scrollbar-thumb-dark)
    }

    .excluded-dates {
        background-color: #696969
    }

    #destination-dropdown,
    input {
        background-color: var(--dark);
        color: var(--light) !important;
        border: 1px solid var(--timetable-border-dark)
    }

    input[type=date] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-position: 96%;
        background-size: 12px;
        background-repeat: no-repeat
    }

    .mapboxgl-ctrl-group button,
    .maplibregl-ctrl-group button {
        background-color: var(--dark) !important
    }

    .mapboxgl-ctrl-group,
    .maplibregl-ctrl-group {
        background: 0 0 !important
    }

    .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button,
    .mapboxgl-ctrl-icon,
    .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
        filter: brightness(0) invert(100%);
        background-color: transparent !important
    }

    .mapboxgl-ctrl-attrib.mapboxgl-compact,
    .maplibregl-ctrl-attrib.maplibregl-compact {
        background-color: var(--dark) !important;
        color: var(--light) !important
    }

    .mapboxgl-ctrl-group:not(:empty),
    .maplibregl-ctrl-group:not(:empty) {
        box-shadow: none !important
    }

    .mapboxgl-ctrl-attrib a,
    .maplibregl-ctrl-attrib a {
        color: var(--link) !important
    }
}