#map {
    position: fixed;
    width: 100%;
    height: 100%;
    font-size: 0.75rem;
    line-height: 1.5;
    user-select: none;
    -webkit-user-select: none;
}

body:has(> div.menu:not(.hidden)) > #map {
    visibility: hidden;
    transition: visibility 0s 225ms;
}

html:not([loaded]) * {
    transition: none !important;
}

.maplibregl-map {
    -webkit-touch-callout: none;
}

.maplibregl-canvas {
    outline: none;
}

.vehicle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

[data-bs-theme=dark] #map {
    background-color: #343a40;
}

#map.hovering .maplibregl-canvas-container {
    cursor: pointer;
}

#map.crosshair .maplibregl-canvas-container,
#map.crosshair .maplibregl-canvas-container * {
    cursor: crosshair;
}

.map-pane {
    position: absolute;
    top: 0;
    left: 0;
}

.shadow-pane {
    z-index: 1;
}

.markers-pane {
    z-index: 2;
}

.tooltips-pane {
    z-index: 5;
}

.popups-pane {
    z-index: 6;
}

.maplibregl-ctrl-top-right {
    z-index: 10;
}

.maplibregl-ctrl-top-right .maplibregl-ctrl {
    margin: 16px 16px 0 0;
}

.map-zoom-control {
    font-weight: 500;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 12px;
    box-shadow: var(--shadow-6);
}

.map-zoom-control a {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-indent: 1px;
    font-size: 25px;
    font-weight: bold;
    background-color: var(--button-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color 0.3s;
    -webkit-tap-highlight-color: transparent;
}

.map-zoom-control a:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.map-zoom-control a:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

@media (hover: hover) and (pointer: fine) {
    .map-zoom-control a:hover {
        background-color: var(--button-hover);
    }
}

.map-zoom-control a:active {
    background-color: var(--button-active);
}

.map-tooltip {
    padding: 10px 20px 10px 20px;
    border: 1px solid;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.map-tooltip-top::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -6px;
    margin-bottom: -12px;
    border: 6px solid transparent;
    background: transparent;
    pointer-events: none;
}

.map-popup {
    width: max-content;
    text-align: center;
    cursor: default;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    animation: fadeIn 0.2s linear;
}

.map-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 16px;
}

.map-popup-content {
    max-width: 500px;
    margin: 13px 24px 13px 20px;
    line-height: 1.3;
    font-size: 1.08333em;
    min-height: 1px;
}

.map-popup-content p {
    margin: 1.3em 0;
}

.map-popup-tip-container {
    position: absolute;
    left: 50%;
    width: 40px;
    height: 20px;
    margin-top: -1px;
    margin-left: -20px;
    overflow: hidden;
    pointer-events: none;
}

.map-popup-tip {
    width: 17px;
    height: 17px;
    padding: 1px;
    margin: -10px auto 0;
    pointer-events: none;
    transform: rotate(45deg);
}

.map-popup-content-wrapper,
.map-popup-tip {
    background: rgba(var(--bs-body-bg-rgb), 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow-8);
}

.trip-place-preview {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    min-width: 160px;
    max-width: 260px;
    background: var(--bs-secondary-bg);
    box-shadow: var(--shadow-8);
    border-radius: 16px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
}

.trip-place-preview.hidden {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.trip-place-preview .save-place-prompt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.trip-place-preview .save-place-prompt .prompt-label {
    font-size: 14px;
    font-weight: 600;
}

.trip-place-preview .save-place-prompt .prompt-address {
    margin-top: -4px;
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.trip-place-preview .save-place-prompt .prompt-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.trip-place-preview .save-place-prompt .prompt-button {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.trip-place-preview .save-place-prompt .prompt-button.save {
    background-color: var(--bs-primary);
    color: white;
}

.trip-place-preview .save-place-prompt .prompt-button.cancel {
    background-color: var(--bs-tertiary-bg);
}

@media (hover: hover) and (pointer: fine) {
    .trip-place-preview .save-place-prompt .prompt-button:hover {
        opacity: 0.85;
    }
}

.map-popup-content {
    color: var(--bs-body-color);
}

.map-tooltip {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.map-tooltip::before {
    border-top-color: var(--bs-body-bg);
}

input, select {
    color: var(--bs-body-color);
}

.icon:not(.line-info .icon),
.modal-button {
    background-color: var(--bs-body-color);
}

.popup-row {
    font-weight: 600;
}

.popup-row p {
    margin: 0;
}

.stop-popup .popup-row {
    margin-bottom: 5px;
}

.vehicle-tooltip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

/* #map:not(.no-popup-anim):not(.leaflet-zoom-active) .vehicle-tooltip {
    transition: transform 0.5s ease-in-out !important;
} */

#map:not(.zooming) .vehicle-popup,
#map:not(.zooming) .vehicle-tooltip {
    transition: translate 0.5s ease-in-out;
}

.vehicle-popup .map-popup-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 180px;
    margin: 10px 12px;
    line-height: 17px;
}

.vehicle-popup .vehicle-model {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-weight: 600;
}

.vehicle-popup .vehicle-model > span:not(.vehicle-chip) {
    color: var(--bs-secondary-color);
}

:is(.vehicle-popup, .vehicle-tooltip) .vehicle-chip {
    padding: 0 0.5em;
    border-radius: 0.75em;
    line-height: 21px;
    background-color: rgba(var(--bs-body-color-rgb), 0.1);
}

.vehicle-popup .stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--bs-secondary-color);
}

.vehicle-popup [data-ghost] {
    display: inline-flex;
    flex-direction: column;
}

.vehicle-popup [data-ghost]::after {
    content: attr(data-ghost);
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.vehicle-popup .stat.speed [data-ghost]::after {
    font-weight: 800;
}

.vehicle-popup .stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vehicle-popup .stat strong {
    color: var(--bs-body-color);
}

.vehicle-popup .stat .glyph {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    mask-image: url(../images/clock_icon.svg);
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../images/clock_icon.svg);
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.vehicle-popup .stat.speed .glyph {
    mask-image: url(../images/speedometer_icon.svg);
    -webkit-mask-image: url(../images/speedometer_icon.svg);
}

.popup-row .title {
    font-weight: bold;
    font-size: 15px;
}

.popup-row .description {
    white-space: pre-wrap;
}

.map-tooltip .line-number.bus {
    color: var(--bus);
}

.map-tooltip .line-number.trolley {
    color: var(--trolley);
}

.popup-row.view-more {
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}

.loading-screen,
.page-notice {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    overflow: hidden;
}

.page-notice {
    margin: 20px;
}

.location-marker {
    border-radius: 50%;
    background-color: #1da1f2;
    border: 3px solid white;
    box-shadow: var(--shadow-marker);
}

.location-accuracy-circle {
    width: calc(var(--radius) * 2);
    height: calc(var(--radius) * 2);
    box-sizing: border-box;
    border-radius: 50%;
    background-color: rgba(29, 161, 242, 0.2);
    border: 1px solid rgba(29, 161, 242, 0.35);
}

#map:not(.zooming) .location-accuracy-circle {
    transition: width 0.25s linear, height 0.25s linear;
}

.location-marker,
.location-accuracy-circle,
.map-tap-marker,
.trip-route-marker {
    pointer-events: none;
}

.location-marker .heading {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    background: conic-gradient(from -30deg, rgba(29, 161, 242, 0.35) 0deg, rgba(29, 161, 242, 0.35) 60deg, transparent 60deg, transparent 360deg);
    -webkit-mask-image: radial-gradient(circle, transparent 12px, black 12px);
    mask-image: radial-gradient(circle, transparent 12px, black 12px);
    border-radius: 50%;
    transition: transform 0.3s ease-out;
    pointer-events: none;
    z-index: -1;
}

.location-marker .heading.visible {
    display: block;
}

.map-tap-marker {
    border-radius: 50%;
    background-color: var(--bs-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* .leaflet-map-pane:not(.leaflet-zoom-anim) .leaflet-vehicle-icon:has(.vehicle-marker.complex),
.leaflet-map-pane:not(.leaflet-zoom-anim) .vehicle-marker-simple {
    transition: all 0.5s ease-in-out;
} */

.buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    position: absolute;
}

body:not(:has(> .popup-modal:not(.closed))) .button.menu-button {
    z-index: 999 !important;
}

.buttons.top.left {
    top: 16px;
    left: 16px;
}

.buttons.top.left .button {
    z-index: 1;
}

.buttons.top.right {
    flex-direction: column;
    top: 106px;
    right: 16px;
}

.buttons.top.right .button {
    z-index: 1;
}

.buttons.bottom-right {
    bottom: 16px;
    right: 16px;
}

.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--button-bg);
    /* color: black; */
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-6);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.3s;
    /* background-image: url(../images/three_lines.svg);
    background-size: contain;
    background-repeat: no-repeat; */
}

@media (hover: hover) and (pointer: fine) {
    .button:hover {
        background-color: var(--button-hover);
    }
}

.button:active {
    background-color: var(--button-active);
}

.button.big {
    width: 56px;
    height: 56px;
}

.button .icon {
    width: 25px;
    height: 25px;
}

.button .icon.menu {
    mask-image: url(../images/menu_icon.svg);
    -webkit-mask-image: url(../images/menu_icon.svg);
}

.button .icon.search {
    mask-image: url(../images/search_icon.svg);
    -webkit-mask-image: url(../images/search_icon.svg);
}

.button .icon.filter {
    mask-image: url(../images/filter_icon.svg);
    -webkit-mask-image: url(../images/filter_icon.svg);
}

.button .icon.favorite {
    mask-image: url(../images/favorite_icon.svg);
    -webkit-mask-image: url(../images/favorite_icon.svg);
}

.button .icon.layers {
    mask-image: url(../images/layers_icon.svg);
    -webkit-mask-image: url(../images/layers_icon.svg);
}

.button .icon.location {
    mask-image: url(../images/location_off_icon.svg);
    -webkit-mask-image: url(../images/location_off_icon.svg);
}

.button .icon.location.on {
    mask-image: url(../images/location_on_icon.svg);
    -webkit-mask-image: url(../images/location_on_icon.svg);
}

.button .icon.location.following {
    mask-image: url(../images/location_gps_icon.svg);
    -webkit-mask-image: url(../images/location_gps_icon.svg);
}

.button .icon.scroll-up {
    mask-image: url(../images/menu_up_icon.svg);
    -webkit-mask-image: url(../images/menu_up_icon.svg);
}

.button .icon.scroll-down {
    mask-image: url(../images/menu_down_icon.svg);
    -webkit-mask-image: url(../images/menu_down_icon.svg);
}

.button svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    font-size: 1.5rem;
}

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

.hidden {
    opacity: 0;
    pointer-events: none;
}

.sidebar {
    display: flex;
    flex-direction: column;
    position: absolute;
    min-width: 240px;
    max-width: 240px;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0px 24px 24px 0px;
    box-shadow: var(--shadow-16);
    background-color: var(--bs-body-bg);
    transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
    user-select: none;
    -webkit-user-select: none;
    z-index: 1000;
}

.sidebar.closed {
    transform: translateX(-100%);
    box-shadow: none;
}

.sidebar-header {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
    border-radius: 0px 24px 0px 0px;
    padding: 10px;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: background-color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
    .sidebar-header:hover {
        background-color: var(--button-hover);
    }
}

.sidebar-header:active {
    background-color: var(--button-active);
}

.sidebar-header .logo {
    display: inline-block;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
}

.sidebar-header .title {
    display: block;
    overflow: hidden;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-header .title-container {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.sidebar-header .title-container .city-selector {
    display: flex;
    align-items: center;
    align-self: flex-start;
    max-width: 100%;
    gap: 4px;
    padding: 5px 12px 5px 12px;
    border-radius: 16px;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: 14px;
    font-weight: 600;
}

.sidebar-header .title-container .city-selector .city-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-header .title-container .city-selector .icon {
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    mask-image: url(../images/chevron_down.svg);
    -webkit-mask-image: url(../images/chevron_down.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.sidebar-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    gap: 8px;
}

.sidebar-button {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 24px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.sidebar-button.active {
    pointer-events: none;
    background-color: var(--bs-secondary-bg);
}

@media (hover: hover) and (pointer: fine) {
    .sidebar-button:hover {
        background-color: var(--button-hover);
    }
}

.sidebar-button:active {
    background-color: var(--button-active);
}

.sidebar-button .icon {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.sidebar-button .icon.map {
    mask-image: url(../images/map_icon.svg);
    -webkit-mask-image: url(../images/map_icon.svg);
}

.sidebar-button .icon.history {
    mask-image: url(../images/history_icon.svg);
    -webkit-mask-image: url(../images/history_icon.svg);
}

.sidebar-button .icon.schedule {
    mask-image: url(../images/schedule_icon.svg);
    -webkit-mask-image: url(../images/schedule_icon.svg);
}

.sidebar-button .icon.alerts {
    flex-shrink: 0;
    mask-image: url(../images/alert_icon.svg);
    -webkit-mask-image: url(../images/alert_icon.svg);
}

.sidebar-button .count,
.alerts-item .count {
    flex-shrink: 0;
    min-width: 22px;
    margin-left: auto;
    padding: 0 7px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    color: color-mix(in srgb, var(--alert-color), #000 75%);
    background-color: var(--alert-color);
}

.sidebar-button .icon.analytics {
    mask-image: url(../images/analytics_icon.svg);
    -webkit-mask-image: url(../images/analytics_icon.svg);
}

.sidebar-button .icon.settings {
    mask-image: url(../images/settings_icon.svg);
    -webkit-mask-image: url(../images/settings_icon.svg);
}

.sidebar-button .icon.install {
    mask-image: url(../images/install_icon.svg);
    -webkit-mask-image: url(../images/install_icon.svg);
}

.sidebar-button .icon.whats-new {
    mask-image: url(../images/sparkles_icon.svg);
    -webkit-mask-image: url(../images/sparkles_icon.svg);
}

.sidebar-button .icon.info {
    mask-image: url(../images/info_icon.svg);
    -webkit-mask-image: url(../images/info_icon.svg);
}

.sidebar-button .icon.support {
    mask-image: url(../images/support_icon.svg);
    -webkit-mask-image: url(../images/support_icon.svg);
}

.sidebar-button .text {
    font-size: 16px;
    font-weight: 600;
}

.sidebar-button:not(.active) .icon {
    background-color: var(--bs-secondary-color);
}

.sidebar-button:not(.active) .text {
    color: var(--bs-secondary-color);
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid var(--bs-border-color);
}

.sidebar-footer .site-notice {
    margin-bottom: 10px;
}

.sidebar-footer .credits {
    font-style: italic;
    color: var(--bs-secondary-color);
}

.sidebar-footer .links {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
}

.sidebar-footer .links .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 36px;
    height: 36px;
    background-color: transparent;
    border-radius: 50%;
    transition: background-color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
    .sidebar-footer .links .icon:hover {
        background-color: var(--button-hover);
    }
}

.sidebar-footer .links .icon:active {
    background-color: var(--button-active);
}

.sidebar-footer .links .icon::before {
    content: "";
    position: absolute;
    inset: 5px;
    background-color: var(--bs-body-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.sidebar-footer .links .icon.facebook::before {
    mask-image: url(../images/facebook_icon.svg);
    -webkit-mask-image: url(../images/facebook_icon.svg);
}

.sidebar-footer .links .icon.forum::before {
    mask-image: url(../images/forum_icon.svg);
    -webkit-mask-image: url(../images/forum_icon.svg);
}

.sidebar-footer .links .icon.github::before {
    mask-image: url(../images/github_icon.svg);
    -webkit-mask-image: url(../images/github_icon.svg);
}

.sidebar-footer .links .icon.email::before {
    mask-image: url(../images/email_icon.svg);
    -webkit-mask-image: url(../images/email_icon.svg);
}

.sidebar-footer .attribution {
    font-size: 12px;
    color: var(--bs-secondary-color);
}

.revolut-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 150px;
    height: 35px;
    padding: 6px;
    border-radius: 8px;
    background-color: black;
    cursor: pointer;
}

.revolut-button::before {
    content: "";
    position: absolute;
    inset: 6px;
    mask: url(../images/revolut_icon.svg) center / contain no-repeat;
    -webkit-mask: url(../images/revolut_icon.svg) center / contain no-repeat;
    background-color: white;
}

[data-bs-theme=dark] .revolut-button {
    background-color: white;
}

[data-bs-theme=dark] .revolut-button::before {
    background-color: black;
}

div.menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bs-body-bg);
    transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 998;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

div.menu.hidden {
    visibility: hidden;
    transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 225ms;
}

.menu-header {
    padding: 16px;
    padding-left: 72px;
    display: flex;
    align-items: center;
    min-height: 70px;
    font-size: 25px;
    font-weight: 700;
}

.menu-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0 16px 16px 16px;
    gap: 10px;
}

.menu-content .category {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 24px;
    background-color: var(--bs-secondary-bg);
}

.menu-content .category .title {
    font-size: 25px;
    font-weight: 600;
    /* margin-bottom: 10px; */
}

div.menu .setting {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* div.menu .setting + .setting {
    margin-top: 10px;
} */

input[type=checkbox],
input[type=radio] {
    display: grid;
    place-content: center;
    font-size: 26px;
    color: var(--bs-body-color);
    width: 26px;
    height: 26px;
    padding: 5px;
    margin: 5px;
    border: 3px solid var(--bs-body-color);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

@media (hover: hover) and (pointer: fine) {
    input[type=checkbox]:hover,
    input[type=radio]:hover {
        box-shadow: 0px 0px 0px 8px var(--button-hover);
    }
}

input[type=checkbox]:active,
input[type=radio]:active {
    box-shadow: 0px 0px 0px 8px var(--button-active);
}

input[type=checkbox] {
    border-radius: 8px;
}

input[type=radio] {
    border-radius: 50%;
}

input[type=checkbox]::before,
input[type=radio]::before {
    content: "";
    width: 0.6em;
    height: 0.6em;
    opacity: 0;
    background-color: var(--bs-body-color);
    transition: 0.2s opacity;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type=checkbox]::before {
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type=radio]::before {
    clip-path: circle();
}

input[type=checkbox]:checked::before,
input[type=radio]:checked::before {
    opacity: 1;
}

.modal-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    user-select: none;
    -webkit-user-select: none;
    overflow-y: auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

.modal-container.hidden {
    visibility: hidden;
    transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 225ms;
}

.modal-backdrop {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

.modal-base {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - 64px);
    height: 70%;
    max-width: 600px;
    max-height: calc(100% - 64px);
    background-color: var(--bs-body-bg);
    border-radius: 24px;
    /* padding: 8px; */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

.notice-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: calc(100% - 64px);
    max-width: 400px;
    /* max-height: calc(100% - 64px); */
    margin: 32px 0;
    background-color: var(--bs-body-bg);
    border-radius: 24px;
    padding: 16px;
    gap: 16px;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
}

.notice-modal-container.hidden .notice-modal {
    transform: scale(0.95);
}

.notice-modal button {
    min-width: 75px;
    border-radius: 12px;
}

.embed-watermark {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    bottom: 16px;
    left: 16px;
    padding: 8px 14px 8px 8px;
    border-radius: 12px;
    background-color: var(--button-bg);
    box-shadow: var(--shadow-6);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.3s;
    z-index: 9999;
}

@media (hover: hover) and (pointer: fine) {
    .embed-watermark:hover {
        background-color: var(--button-hover);
    }
}

.embed-watermark:active {
    background-color: var(--button-active);
}

.embed-watermark .logo {
    width: 36px;
    height: 36px;
}

.popup-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 66px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 8px 8px 8px 14px;
    border-radius: 24px;
    background-color: var(--bs-body-bg);
    box-shadow: var(--shadow-16);
    z-index: 998;
    animation: popup-notice-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.popup-notice.d-none {
    display: none;
}

.popup-notice .inline-icon.location-gps,
.popup-notice .inline-icon.place {
    flex: 0 0 auto;
    width: 1.2em;
    height: 1.2em;
    color: var(--bs-primary);
}

.popup-notice .text {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    text-align: center;
    overflow-wrap: break-word;
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
}

.popup-notice .switch-button,
.popup-notice .cancel-button {
    flex: 0 0 auto;
    padding: 4px 14px;
    font-size: 0.85rem;
    border-radius: 16px;
    white-space: nowrap;
}

.popup-notice.closing {
    animation: popup-notice-out 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

.popup-notice.resizing {
    overflow: hidden;
}

.popup-notice.resizing .text {
    white-space: nowrap;
}

@keyframes popup-notice-in {
    from {
        opacity: 0;
        transform: translate(-50%, -12px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes popup-notice-out {
    from {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -12px) scale(0.9);
    }
}

.modal-base.scale-height {
    height: auto !important;
}

.brigade-modal .brigade-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 195px;
}

.vehicle-info-modal .content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 235px;
}

@media (max-width: 600px) {
    .modal-base {
        width: 100% !important;
        height: 100% !important;
        max-width: calc(100% - 64px);
        max-height: calc(100% - 64px);
    }

    .modal-base.fullscreen {
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

.modal-base .header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin-bottom: 8px;
    padding: 8px 8px 0px 8px;
}

.modal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 8px;
    background-color: var(--bs-body-bg);
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.3s;
}

.modal-button::before {
    content: "";
    position: absolute;
    inset: 8px;
    background-color: var(--bs-body-color);
}

.modal-button.modal-back::before {
    mask-image: url(../images/arrow_left.svg);
    -webkit-mask-image: url(../images/arrow_left.svg);
}

.modal-button.modal-close::before {
    mask-image: url(../images/close_icon.svg);
    -webkit-mask-image: url(../images/close_icon.svg);
}

.modal-button.more-info::before {
    mask-image: url(../images/three_dots.svg);
    -webkit-mask-image: url(../images/three_dots.svg);
}

.modal-button.share::before {
    inset: 6px 6px 6px 5px !important;
    mask-image: url(../images/share_icon.svg);
    -webkit-mask-image: url(../images/share_icon.svg);
}

.modal-button.vehicle::before {
    mask-image: url(../images/vehicle_icon.svg);
    -webkit-mask-image: url(../images/vehicle_icon.svg);
}

.modal-button.reset::before {
    mask-image: url(../images/reset_icon.svg);
    -webkit-mask-image: url(../images/reset_icon.svg);
}

.modal-button.save::before {
    mask-image: url(../images/bookmark_add_icon.svg);
    -webkit-mask-image: url(../images/bookmark_add_icon.svg);
}

.modal-button.favorite::before {
    mask-image: url(../images/favorite_icon.svg);
    -webkit-mask-image: url(../images/favorite_icon.svg);
}

.modal-button.favorite.filled::before {
    background: linear-gradient(180deg, #ffb800 0%, #ff6b00 100%);
    mask-image: url(../images/favorite_icon_filled.svg);
    -webkit-mask-image: url(../images/favorite_icon_filled.svg);
}

.modal-button.remove-favorite::before {
    mask-image: url(../images/delete_icon.svg);
    -webkit-mask-image: url(../images/delete_icon.svg);
}

.modal-button.filter-lines::before {
    mask-image: url(../images/filter_icon.svg);
    -webkit-mask-image: url(../images/filter_icon.svg);
}

.modal-button.decrease::before {
    mask-image: url(../images/minus_icon.svg);
    -webkit-mask-image: url(../images/minus_icon.svg);
}

.modal-button.increase::before {
    mask-image: url(../images/plus_icon.svg);
    -webkit-mask-image: url(../images/plus_icon.svg);
}

.modal-button.notifications::before {
    mask-image: url(../images/bell_icon.svg);
    -webkit-mask-image: url(../images/bell_icon.svg);
}

.modal-button.notifications.filled::before {
    background: linear-gradient(180deg, #ffb800 0%, #ff6b00 100%);
    mask-image: url(../images/bell_icon_filled.svg);
    -webkit-mask-image: url(../images/bell_icon_filled.svg);
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
}

.modal-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.popup-modal .modal-button {
    width: 35px;
    height: 35px;
    padding: 6px;
    background-color: var(--bs-secondary-bg);
}

.popup-modal .modal-button::before {
    content: "";
    position: absolute;
    inset: 6px;
    background-color: var(--bs-body-color);
}

@media (hover: hover) and (pointer: fine) {
    .modal-button:hover,
    .custom-dropdown-item:not(.disabled):hover {
        background-color: var(--button-hover);
    }
}

.modal-button:active,
.custom-dropdown-item:not(.disabled):active {
    background-color: var(--button-active);
}

.inline-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin-top: -0.2em;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    background-color: currentColor;
}

.inline-icon.share {
    mask-image: url(../images/share_icon_apple.svg);
    -webkit-mask-image: url(../images/share_icon_apple.svg);
}

.inline-icon.menu-dots {
    mask-image: url(../images/three_dots.svg);
    -webkit-mask-image: url(../images/three_dots.svg);
}

.inline-icon.filter-lines {
    mask-image: url(../images/filter_icon.svg);
    -webkit-mask-image: url(../images/filter_icon.svg);
}

.inline-icon.location-gps {
    mask-image: url(../images/location_gps_icon.svg);
    -webkit-mask-image: url(../images/location_gps_icon.svg);
}

.inline-icon.place {
    mask-image: url(../images/location_on_icon.svg);
    -webkit-mask-image: url(../images/location_on_icon.svg);
}

.search-bar {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    border-radius: 20px;
    background-color: var(--bs-secondary-bg);
    font-size: 1rem;
}

.search-bar input {
    width: 100%;
    margin: 0;
    padding: 8px 40px 8px 14px;
    background: none;
    border: none;
    line-height: 1.5em;
    -webkit-appearance: none;
    appearance: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-overflow: ellipsis;
}

.search-bar input:focus {
    outline: none;
}

.search-bar .clear-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 100%;
    cursor: pointer;
    touch-action: manipulation;
}

.search-bar .clear-button::before {
    content: "";
    display: block;
    width: 1.25em;
    height: 1.25em;
    background-color: var(--bs-secondary-color);
    mask-image: url(../images/close_circle_icon.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(../images/close_circle_icon.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.search-bar input:placeholder-shown ~ .clear-button {
    display: none;
}

.search-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.search-results,
.filter-list,
.search-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 8px 8px 8px;
}

.filter-list {
    overflow-y: auto;
    align-items: flex-start;
}

.search-info {
    text-align: center;
    gap: 4px;
}

.search-info > .title {
    font-size: 1.5rem;
    font-weight: 600;
}

.search-info .category {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 8px 16px;
    border-radius: 5px;
    background-color: var(--bs-secondary-bg);
}

.search-info .category .title {
    font-size: 1rem;
    font-weight: 700;
}

.search-info .category:first-of-type:last-of-type {
    border-radius: 16px;
}

.search-info .category:first-of-type {
    border-radius: 16px 16px 5px 5px;
}

.search-info .category:last-of-type {
    border-radius: 5px 5px 16px 16px;
}

.search-info .category:first-of-type.d-none + .category {
    border-radius: 16px 16px 5px 5px;
}

.open-planner-button {
    margin-top: 4px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    background-color: var(--bs-primary);
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .open-planner-button:hover {
        opacity: 0.85;
    }
}

.open-planner-button:active {
    opacity: 0.85;
}

.search-results .category .title {
    font-size: 1rem;
    font-weight: 600;
    padding-left: 16px;
}

.search-results .category .results {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-results .category .results .result {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    overflow-x: auto;
    padding: 8px 16px;
    border-radius: 5px;
    background-color: var(--bs-secondary-bg);
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-results .category .results .result:active {
    background-color: var(--button-active);
}

#favoriteVehiclesCategory .results .result {
    position: relative;
    padding-right: 44px;
}

#favoriteVehiclesCategory .results .result.offline {
    cursor: default;
    opacity: 0.6;
}

#favoriteVehiclesCategory .results .result .favorite-toggle {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: var(--bs-secondary-color);
    mask-image: url(../images/favorite_icon.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(../images/favorite_icon.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.2s;
}

#favoriteVehiclesCategory .results .result .favorite-toggle:hover {
    background-color: var(--bs-body-color);
}

#favoriteVehiclesCategory .results .result .favorite-toggle:active {
    transform: translateY(-50%) scale(0.85);
}

#favoriteVehiclesCategory .results .result .favorite-toggle.filled {
    background: linear-gradient(180deg, #ffb800 0%, #ff6b00 100%);
    mask-image: url(../images/favorite_icon_filled.svg);
    -webkit-mask-image: url(../images/favorite_icon_filled.svg);
}

#favoriteVehiclesCategory .results .result:has(.favorite-vehicle-notifications:not(.d-none)) {
    padding-right: 80px;
}

#favoriteVehiclesCategory .results .result .favorite-vehicle-notifications {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 48px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: var(--bs-secondary-color);
    mask-image: url(../images/bell_icon.svg);
    -webkit-mask-image: url(../images/bell_icon.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.15s;
}

#favoriteVehiclesCategory .results .result .favorite-vehicle-notifications:hover {
    background-color: var(--bs-body-color);
}

#favoriteVehiclesCategory .results .result .favorite-vehicle-notifications:active {
    transform: translateY(-50%) scale(0.85);
}

#favoriteVehiclesCategory .results .result .favorite-vehicle-notifications.filled {
    background: linear-gradient(180deg, #ffb800 0%, #ff6b00 100%);
    mask-image: url(../images/bell_icon_filled.svg);
    -webkit-mask-image: url(../images/bell_icon_filled.svg);
}

.search-results .category .results .result:first-of-type:last-of-type,
.cities-list .city:first-of-type:last-of-type {
    border-radius: 16px;
}

.search-results .category .results .result:first-of-type,
.cities-list .city:first-of-type {
    border-radius: 16px 16px 5px 5px;
}

.search-results .category .results .result:last-of-type,
.cities-list .city:last-of-type {
    border-radius: 5px 5px 16px 16px;
}

.line-info .line {
    display: flex;
    height: 1.5rem;
    gap: 4px;
}

.line-info .line .number {
    width: 3rem;
    white-space: nowrap;
}

.line-info .line .icon {
    width: 1.5rem;
}

.line-info.responsive {
    flex-wrap: wrap;
    gap: 0.3em;
}

.line-info.responsive .line {
    display: flex;
    height: 1.5em;
    gap: 0.3em;
}

.line-info.responsive .line .number {
    width: 3em;
    border-radius: 0.375em;
    white-space: nowrap;
}

.line-info.responsive .line .number.expand {
    min-width: 3em !important;
    width: auto !important;
    padding: 0 6px;
}

.line-info.responsive .line .icon {
    width: 1.5em;
}

.line-info.responsive .line.metro.sofia .icon {
    width: calc(1.5em + 2px);
    margin-right: -2px;
}

.line-info .line .icon {
    display: inline-block;
    position: relative;
    color: white;
    /* margin-right: 5px; */
    text-align: center;
    /* aspect-ratio: 1 / 1; */
    /* height: 1.5rem; */
    border-radius: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* .line-info .line.bus .icon,
.line-info .line.night .icon {
    background-image: url(../images/bus_icon_white.png);
}

.line-info .line.tram .icon {
    background-image: url(../images/tram_icon_white.png);
}

.line-info .line.trolley .icon {
    background-image: url(../images/trolley_icon_white.png);
}

.line-info .line.ferry .icon {
    background-image: url(../images/ferry_icon_white.png);
}

.line-info .line.train .icon {
    background-image: url(../images/train_icon_white.png);
} */

.line-info .line .icon::before {
    content: "";
    position: absolute;
    inset: 5px;
    background-color: white;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.line-info .line.bright .icon::before {
    background-color: black !important;
}

.line-info .line.bright .number {
    color: black !important;
}

.line-info:not(.big) .line .icon::before {
    inset: 4px;
}

.line-info.big .line .icon::before {
    inset: 5px;
}

.line-info .line.bus .icon::before,
.line-info .line.night .icon::before {
    mask-image: url(../images/types/bus.svg);
    -webkit-mask-image: url(../images/types/bus.svg);
}

.line-info .line.tram .icon::before {
    mask-image: url(../images/types/tram.svg);
    -webkit-mask-image: url(../images/types/tram.svg);
}

.line-info .line.trolley .icon::before {
    mask-image: url(../images/types/trolley.svg);
    -webkit-mask-image: url(../images/types/trolley.svg);
}

.line-info .line.metro .icon::before {
    mask-image: url(../images/types/metro.svg);
    -webkit-mask-image: url(../images/types/metro.svg);
}

.line-info .line.ferry .icon::before {
    mask-image: url(../images/types/ferry.svg);
    -webkit-mask-image: url(../images/types/ferry.svg);
}

.line-info .line.aerial .icon::before {
    mask-image: url(../images/types/aerial.svg);
    -webkit-mask-image: url(../images/types/aerial.svg);
}

.line-info .line.funicular .icon::before {
    mask-image: url(../images/types/funicular.svg);
    -webkit-mask-image: url(../images/types/funicular.svg);
}

.line-info .line.train .icon::before {
    mask-image: url(../images/types/train.svg);
    -webkit-mask-image: url(../images/types/train.svg);
}

.line-info .line .icon.agency-logo::before {
    mask-image: var(--logo);
    -webkit-mask-image: var(--logo);
}

/* .line-info .line .icon::before {
    content: "";
    position: absolute;
    inset: 4px;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: white;
}

.line-info.big .line .icon::before {
    inset: 6px !important;
}

.line-info .line.bus .icon::before, .line-info .line.night .icon::before {
    mask-image: url(../images/types/bus.svg);
}

.line-info .line.tram .icon::before {
    mask-image: url(../images/types/tram.svg);
}

.line-info .line.trolley .icon::before {
    mask-image: url(../images/types/trolley.svg);
}

.line-info .line.ferry .icon::before {
    mask-image: url(../images/types/ferry.svg);
}

.line-info .line.train .icon::before {
    mask-image: url(../images/types/train.svg);
} */

.line-info .line .number {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    /* margin-right: 5px; */
    /* text-align: center; */
    font-weight: 700;
    /* aspect-ratio: 2 / 1; */
    /* width: 3rem; */
    border-radius: 0.375rem;
    /* border-radius: 12.5% / 25%; */
}

/* .search-results .category .results .result .line.bus .number, .stop-modal .arrivals .arrival .line.bus .number,
.line-info .line.bus .number {
    background-color: var(--bus);
}

.search-results .category .results .result .line.night .number, .stop-modal .arrivals .arrival .line.night .number,
.line-info .line.night .number {
    background-color: var(--night);
}

.search-results .category .results .result .line.tram .number, .stop-modal .arrivals .arrival .line.tram .number,
.line-info .line.tram .number {
    background-color: var(--tram);
}

.search-results .category .results .result .line.trolley .number, .stop-modal .arrivals .arrival .line.trolley .number,
.line-info .line.trolley .number {
    background-color: var(--trolley);
} */

.vehicle-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    transition: background-color 0.2s;
}

.vehicle-chip .type-icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.search-results .category .results .result .route,
.stop-modal .arrivals .arrival .route {
    /* white-space: nowrap; */
    /* overflow-x: auto; */
    line-height: 1;
}

.search-results .category .results .result .vehicle-model {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 14px;
    /* white-space: nowrap; */
}

.search-results .category .results .result .vehicle-model .vehicle-chip {
    padding: 0 0.5em;
    border-radius: 0.75em;
    font-size: inherit;
}

.popup-modal {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 64px);
    height: var(--modal-start-height);
    max-width: 600px;
    box-shadow: var(--shadow-16);
    background-color: var(--bs-body-bg);
    border-radius: 24px 24px 0 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: transform 225ms cubic-bezier(0, 0, 0.2, 1), height 225ms cubic-bezier(0, 0, 0.2, 1);
    z-index: 1;
}

.popup-modal:not(.closed) {
    will-change: transform;
}

.popup-modal:focus {
    outline: none;
}

.popup-modal.resizing {
    transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
}

.popup-modal.closed {
    transform: translateY(100%);
    box-shadow: none;
}

@media (max-width: 600px) {
    .popup-modal {
        width: 100%;
        max-width: 100%;
    }
}

.popup-modal .spinner-border,
.modal-base .spinner-border,
.menu .spinner-border {
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: calc(50% - 1.5rem);
    left: calc(50% - 1.5rem);
}

@media (min-width: 601px) {
    .spinner-border.relative {
        position: relative;
        margin: 1.5rem;
        top: calc(50% - 1.5rem);
        left: calc(50% - 3rem);
    }
}

.spinner-border.static {
    position: static;
    margin: 1.5rem;
}

.popup-modal .notice,
.modal-base .notice,
.menu .notice {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--bs-warning);
    /* z-index: -1; */
}

.popup-modal .notice.empty-state,
.modal-base .notice.empty-state,
.menu .notice.empty-state {
    flex-direction: column;
    gap: 12px;
    padding: 24px 24px;
    color: unset;
}

.popup-modal .notice.empty-state .icon,
.modal-base .notice.empty-state .icon,
.menu .notice.empty-state .icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background-color: var(--bs-secondary-color);
    opacity: 0.5;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.popup-modal .notice.empty-state .message,
.modal-base .notice.empty-state .message,
.menu .notice.empty-state .message {
    max-width: 260px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.popup-modal .notice.empty-state.no-departures .icon,
.modal-base .notice.empty-state.no-departures .icon,
.menu .notice.empty-state.no-departures .icon {
    mask-image: url(../images/schedule_icon.svg);
    -webkit-mask-image: url(../images/schedule_icon.svg);
}

.popup-modal .notice.empty-state.no-route .icon,
.modal-base .notice.empty-state.no-route .icon,
.menu .notice.empty-state.no-route .icon {
    mask-image: url(../images/trip_icon2.svg);
    -webkit-mask-image: url(../images/trip_icon2.svg);
}

.popup-modal .notice.empty-state.error .icon,
.modal-base .notice.empty-state.error .icon,
.menu .notice.empty-state.error .icon {
    mask-image: url(../images/alert_icon.svg);
    -webkit-mask-image: url(../images/alert_icon.svg);
}

.popup-modal .notice.empty-state.no-search-results .icon,
.modal-base .notice.empty-state.no-search-results .icon,
.menu .notice.empty-state.no-search-results .icon {
    mask-image: url(../images/search_icon.svg);
    -webkit-mask-image: url(../images/search_icon.svg);
}

.popup-modal .notice.empty-state.no-duties .icon,
.modal-base .notice.empty-state.no-duties .icon,
.menu .notice.empty-state.no-duties .icon {
    mask-image: url(../images/calendar_icon.svg);
    -webkit-mask-image: url(../images/calendar_icon.svg);
}

.popup-modal .notice.empty-state.no-info .icon,
.modal-base .notice.empty-state.no-info .icon,
.menu .notice.empty-state.no-info .icon {
    mask-image: url(../images/info_icon.svg);
    -webkit-mask-image: url(../images/info_icon.svg);
}

.menu .notice.empty-state.no-alerts .icon {
    mask-image: url(../images/route_change_icon.svg);
    -webkit-mask-image: url(../images/route_change_icon.svg);
}

.menu .notice.empty-state.no-lines .icon {
    mask-image: url(../images/vehicle_icon.svg);
    -webkit-mask-image: url(../images/vehicle_icon.svg);
}

:is(.alerts-menu, .schedules-menu) .menu-content {
    flex: 1 1 auto;
}

:is(.alerts-menu, .schedules-menu) .notice.empty-state {
    flex: 1 1 auto;
}

.favorites-modal .favorite-stop .notice.empty-state {
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    padding: 4px 0;
}

.favorites-modal .favorite-stop .notice.empty-state .icon {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}

.popup-modal .header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px;
    cursor: ns-resize;
    /* box-shadow: 0 1px 10px #0000001f, 0 2px 4px -1px #0003; */
}

.popup-modal .header::before {
    position: absolute;
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    top: 8px;
    left: 50%;
    transform: translate(-50%);
    border-radius: 2px;
    background-color: var(--bs-secondary-color);
}

.popup-modal .header .title {
    font-weight: 700;
}

.popup-modal .header .icon:not(.line-info .icon),
.favorite-stop .stop-info > .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--bs-secondary-bg);
    flex: 0 0 auto;
    width: 35px;
    height: 35px;
    padding: 6px;
    border-radius: 12px;
    user-select: none;
    -webkit-user-select: none;
}

.popup-modal .header .icon.favorite::before {
    mask-image: url(../images/favorite_icon.svg);
    -webkit-mask-image: url(../images/favorite_icon.svg);
}

.popup-modal .header .icon.favorite-filled::before {
    mask-image: url(../images/favorite_icon_filled.svg);
    -webkit-mask-image: url(../images/favorite_icon_filled.svg);
}

.popup-modal .header .icon.layers::before {
    mask-image: url(../images/layers_icon.svg);
    -webkit-mask-image: url(../images/layers_icon.svg);
}

.popup-modal .header .icon:not(.line-info .icon)::before,
.favorite-stop .stop-info > .icon::before {
    content: "";
    position: absolute;
    inset: 7px;
    background-color: var(--bs-body-color);
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
}

.stop-modal .stop-info,
.favorite-stop .stop-info {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.stop-modal .stop-info > .icon::before,
.favorite-stop .stop-info > .icon::before {
    mask-image: url(../images/stop_icon.svg);
    -webkit-mask-image: url(../images/stop_icon.svg);
}

:is(.stop-modal, .favorite-stop) .stop-info > .icon[data-type="bus"]::before,
:is(.stop-modal, .favorite-stop) .stop-info > .icon > .glyph[data-type="bus"] {
    mask-image: url(../images/types/bus.svg);
    -webkit-mask-image: url(../images/types/bus.svg);
}

:is(.stop-modal, .favorite-stop) .stop-info > .icon[data-type="tram"]::before,
:is(.stop-modal, .favorite-stop) .stop-info > .icon > .glyph[data-type="tram"] {
    mask-image: url(../images/types/tram.svg);
    -webkit-mask-image: url(../images/types/tram.svg);
}

:is(.stop-modal, .favorite-stop) .stop-info > .icon[data-type="trolley"]::before,
:is(.stop-modal, .favorite-stop) .stop-info > .icon > .glyph[data-type="trolley"] {
    mask-image: url(../images/types/trolley.svg);
    -webkit-mask-image: url(../images/types/trolley.svg);
}

:is(.stop-modal, .favorite-stop) .stop-info > .icon[data-type="metro"]::before,
:is(.stop-modal, .favorite-stop) .stop-info > .icon > .glyph[data-type="metro"] {
    mask-image: url(../images/types/metro.svg);
    -webkit-mask-image: url(../images/types/metro.svg);
}

:is(.stop-modal, .favorite-stop) .stop-info > .icon[data-type="train"]::before,
:is(.stop-modal, .favorite-stop) .stop-info > .icon > .glyph[data-type="train"] {
    mask-image: url(../images/types/train.svg);
    -webkit-mask-image: url(../images/types/train.svg);
}

:is(.stop-modal, .favorite-stop) .stop-info > .icon[data-type="ferry"]::before,
:is(.stop-modal, .favorite-stop) .stop-info > .icon > .glyph[data-type="ferry"] {
    mask-image: url(../images/types/ferry.svg);
    -webkit-mask-image: url(../images/types/ferry.svg);
}

:is(.stop-modal, .favorite-stop) .stop-info > .icon[data-type="aerial"]::before,
:is(.stop-modal, .favorite-stop) .stop-info > .icon > .glyph[data-type="aerial"] {
    mask-image: url(../images/types/aerial.svg);
    -webkit-mask-image: url(../images/types/aerial.svg);
}

:is(.stop-modal, .favorite-stop) .stop-info > .icon[data-type="funicular"]::before,
:is(.stop-modal, .favorite-stop) .stop-info > .icon > .glyph[data-type="funicular"] {
    mask-image: url(../images/types/funicular.svg);
    -webkit-mask-image: url(../images/types/funicular.svg);
}

.stop-modal .stop-info > .icon.request::before,
.favorite-stop .stop-info > .icon.request::before {
    mask-image: url(../images/request_stop_icon.svg);
    -webkit-mask-image: url(../images/request_stop_icon.svg);
}

.stop-modal .stop-info > .icon.metro::before,
.favorite-stop .stop-info > .icon.metro::before {
    mask-image: url(../images/subway_icon.svg);
    -webkit-mask-image: url(../images/subway_icon.svg);
}

.stop-modal .stop-info > .icon.tramalicante::before,
.favorite-stop .stop-info > .icon.tramalicante::before {
    mask-image: url(../images/alicante/tramalicante_icon.svg);
    -webkit-mask-image: url(../images/alicante/tramalicante_icon.svg);
}

.popup-modal .header .stop-info > .icon.multi,
.favorite-stop .stop-info > .icon.multi {
    gap: 2px;
    width: auto;
    padding: 0 7px;
}

:is(.stop-modal, .favorite-stop) .stop-info > .icon.multi::before {
    display: none;
}

:is(.stop-modal, .favorite-stop) .stop-info > .icon > .glyph {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    background-color: var(--bs-body-color);
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.stop-modal .stop-info .stop-name,
.favorite-stop .stop-info .stop-name {
    font-weight: 700;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.stop-modal .stop-info,
.favorite-stop .stop-info {
    min-width: 0;
}

.stop-modal .stop-info .stop-title,
.favorite-stop .stop-info .stop-title {
    min-width: 0;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.stop-modal .stop-info .stop-code,
.favorite-stop .stop-info .stop-code,
.search-results .result .stop-code {
    font-size: 0.8em;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

.stop-modal .line-chips-wrapper {
    position: relative;
    flex-shrink: 0;
    font-size: 14px;
}

.stop-modal .board-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 4px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.stop-modal .board-controls::-webkit-scrollbar {
    display: none;
}

.stop-modal .board-controls .time-select {
    position: sticky;
    left: 0;
    z-index: 1;
    flex: 0 0 auto;
}

.stop-modal .board-controls .time-select::before {
    content: "";
    position: absolute;
    inset: 0 0 0 -16px;
    z-index: -1;
    background-color: var(--bs-body-bg);
}

.stop-modal .board-controls .time-select .scroll-edge.start {
    left: 100%;
    bottom: 0;
    padding: 0 32px 0 12px;
}


:is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 12px;
    font-size: 16px;
}

:is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips:empty {
    display: none;
}

:is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips.filtering {
    padding-right: 40px;
}

:is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips .line-group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
}

.scroll-edges {
    position: relative;
}

.scroll-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.scroll-edge.start {
    left: 0;
    padding: 0 32px 0 16px;
}

.scroll-edge.end {
    right: 0;
    padding: 0 16px 0 32px;
}

.scroll-edge.start.more {
    background: linear-gradient(to right, var(--bs-body-bg) calc(100% - 32px), transparent);
}

.scroll-edge.end.more {
    background: linear-gradient(to left, var(--bs-body-bg) calc(100% - 32px), transparent);
}

.scroll-edge.more::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    cursor: default;
    pointer-events: auto;
}

.scroll-edge.start.more::before {
    left: 0;
    right: 32px;
}

.scroll-edge.end.more::before {
    left: 32px;
    right: 0;
}

.scroll-edge:not(.more) .scroll-arrow {
    display: none;
}

.edge-button {
    position: relative;
    flex: 0 0 auto;
    width: var(--edge-button-size, 1.5em);
    height: var(--edge-button-size, 2em);
    border-radius: var(--edge-button-radius, 0.375em);
    background-color: var(--bs-secondary-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.2s;
}

.scroll-edge .edge-button {
    width: auto;
    height: 100%;
    aspect-ratio: 1;
    border-radius: var(--edge-button-radius, 12px);
}

.hidden .edge-button {
    pointer-events: none;
}

.edge-button::before {
    content: "";
    position: absolute;
    inset: 4px;
    background-color: var(--bs-body-color);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.scroll-edge .edge-button::before {
    inset: 0;
    mask-size: 24px;
    -webkit-mask-size: 24px;
}

.scroll-edge.start .scroll-arrow::before {
    mask-image: url(../images/chevron_left.svg);
    -webkit-mask-image: url(../images/chevron_left.svg);
}

.scroll-edge.end .scroll-arrow::before {
    mask-image: url(../images/chevron_right.svg);
    -webkit-mask-image: url(../images/chevron_right.svg);
}

@media (hover: hover) and (pointer: fine) {
    .edge-button:hover {
        background-color: var(--button-hover);
    }
}

.edge-button:active {
    background-color: var(--button-active);
}

.stop-modal .line-chips-wrapper .scroll-edge {
    bottom: 4px;
}

:is(.stop-modal, .timetable-modal, .brigade-modal) .clear-lines::before {
    mask-size: 20px;
    mask-image: url(../images/close_icon.svg);
    -webkit-mask-size: 20px;
    -webkit-mask-image: url(../images/close_icon.svg);
}

:is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips .line-chip {
    flex: 0 0 auto;
    cursor: pointer;
    transition: transform 0.1s;
}

:is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips.static .line-chip {
    pointer-events: none;
}

:is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips .line-chip:active {
    transform: scale(0.94);
}

:is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips .line-chip .line,
:is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips .filter-group-icon .line {
    pointer-events: none;
}

:is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips :is(.line-chip .number, .filter-group-icon .icon) {
    transition: filter 0.2s, opacity 0.2s, box-shadow 0.2s;
}

:is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips .line-chip:not(.active) .number,
:is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips .line-group.inactive .filter-group-icon .icon {
    filter: grayscale(1);
    opacity: 0.45;
}

:is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips.filtering .line-chip.active .number {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--line-color);
}

[data-bs-theme=dark] :is(.stop-modal, .timetable-modal, .brigade-modal, .notification-lines-modal) .line-chips.filtering .line-chip.active .line.night .number {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--night-line-casing);
}

.stop-modal .arrivals,
:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.filtering-modal .header {
    padding-top: 20px;
}

.filtering-modal .modal-button {
    width: 40px;
    height: 40px;
}

.filtering-modal .content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 12px 0;
    overflow-y: auto;
}

.filtering-modal .section,
.filtering-modal .active-filters,
.filtering-modal .saved-filters {
    border-radius: 16px;
}

.filtering-modal .section,
.filtering-modal .active-filters,
.filtering-modal .saved-filters {
    text-align: center;
    padding: 8px;
    margin: 0 12px 0 12px;
    background-color: var(--bs-secondary-bg);
}

.filtering-modal .title {
    font-weight: 600;
    margin-bottom: 6px;
}

.mode-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.mode-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px 0 6px;
    border-radius: 18px;
    background-color: var(--bs-body-bg);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.mode-chip.active {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.mode-chip.all {
    padding: 0 14px;
}

@media (hover: hover) and (pointer: fine) {
    .mode-chip:hover {
        background-color: var(--button-hover);
    }
}

.mode-chip:active {
    background-color: var(--button-active);
}

.mode-chip .line-info .line {
    height: 24px;
    pointer-events: none;
}

.mode-chip .line-info .line .icon {
    width: 24px;
    transition: filter 0.2s;
}

.mode-chip:not(.active) .line-info .line .icon {
    filter: grayscale(1);
    opacity: 0.6;
}

.filtering-modal .active-filters .list {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 18px;
    /* padding: 0 16px 16px 16px; */
}

.filtering-modal .active-filters .list .filter {
    cursor: pointer;
}

.filtering-modal .active-filters .list .filter:not(.line-info),
.filtering-modal .saved-filter-chips .filter:not(.line-info) {
    /* border-radius: 16px; */
    border-radius: 0.4375rem;
    background-color: var(--bs-body-bg);
    padding: 0 8px;
}

.filtering-modal .active-filters .list .filter-group,
.filtering-modal .saved-filter-chips .filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.filtering-modal .filter-group-icon {
    flex: 0 0 auto;
}

.filtering-modal .filter-search-results {
    display: flex;
    flex-direction: column;
}

.filtering-modal .filter-search-results .result {
    margin: 0 8px;
}

.filtering-modal .filter-search-results .result :is(.route-name, .model) {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.filtering-modal .filter-search-results .result .route-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.25;
}

.filtering-modal .saved-filters .list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filtering-modal .saved-filters .list .saved-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
    .filtering-modal .saved-filters .list .saved-filter:hover {
        background-color: var(--button-hover);
    }
}

.filtering-modal .saved-filters .list .saved-filter:active {
    background-color: var(--button-active);
}

.filtering-modal .saved-filters .list .saved-filter .saved-filter-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filtering-modal .saved-filters .list .saved-filter .name {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filtering-modal .saved-filters .list .saved-filter .saved-filter-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
}

.filtering-modal .saved-filters .list .saved-filter .remove-filter {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: var(--bs-secondary-color);
    mask-image: url(../images/close_circle_icon.svg);
    -webkit-mask-image: url(../images/close_circle_icon.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    transition: background-color 0.2s;
}

@media (hover: hover) and (pointer: fine) {
    .filtering-modal .saved-filters .list .saved-filter .remove-filter:hover {
        background-color: var(--bs-body-color);
    }
}

.filtering-modal .save-filter-prompt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.filtering-modal .save-filter-prompt .prompt-label {
    font-size: 14px;
    font-weight: 600;
}

.filtering-modal .save-filter-prompt .save-filter-name {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: none;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: 14px;
}

.filtering-modal .save-filter-prompt .prompt-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.filtering-modal .save-filter-prompt .prompt-button {
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.filtering-modal .save-filter-prompt .prompt-button.save {
    background-color: var(--bs-primary);
    color: white;
}

@media (hover: hover) and (pointer: fine) {
    .filtering-modal .save-filter-prompt .prompt-button:hover {
        opacity: 0.85;
    }
}

.filtering-modal .save-filter-prompt .prompt-button.cancel {
    background-color: var(--bs-tertiary-bg);
}

.favorites-modal .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: calc(100% - 120px);
    padding: 8px;
}

.favorites-modal .info .title {
    font-size: 20px;
    font-weight: 700;
}

.favorites-modal .info .description {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.favorites-modal .content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 12px 0;
    overflow-y: auto;
}

.map-style-modal .options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 4px 16px 16px;
}

.map-style-modal .option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.map-style-modal .option .preview {
    width: 100px;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid transparent;
    transition: border-color 0.2s, transform 0.15s;
}

.map-style-modal .option:active .preview {
    transform: scale(0.95);
}

.map-style-modal .option.selected .preview {
    border-color: var(--bs-primary);
}

.map-style-modal .option .preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.map-style-modal .option .label {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--bs-secondary-color);
}

.map-style-modal .option.selected .label {
    color: var(--bs-body-color);
}

.map-style-modal .note {
    padding: 0 16px 16px;
    font-size: 14px;
    text-align: center;
    color: var(--bs-secondary-color);
}

.favorites-modal .favorite-stop {
    padding: 8px 16px;
    color: inherit;
}

.favorites-modal .favorite-stop .fav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.favorites-modal .favorite-stop .modal-button:not(:hover) {
    background-color: var(--bs-body-bg);
}

.favorites-modal .favorite-stop .modal-button.filter-lines.active {
    background-color: var(--bs-primary);
}

.favorites-modal .favorite-stop .modal-button.filter-lines.active::before {
    background-color: white;
}

.favorite-routes-modal .header .modal-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    line-height: 1.2;
}

.favorite-routes-modal .header .stop-name {
    overflow-wrap: anywhere;
}

.favorite-routes-modal .header .stop-code {
    font-size: 0.8em;
    font-weight: 400;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.favorite-routes-modal .hint,
.notification-lines-modal .hint {
    padding: 0 16px 8px 16px;
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.favorite-routes-modal .departure-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 16px 8px 16px;
    font-weight: 600;
}

.favorite-routes-modal .departure-count .stepper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: -8px;
}

.favorite-routes-modal .departure-count .value {
    width: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.favorite-routes-modal .departure-count .modal-button.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.favorite-routes-modal .routes {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 8px;
    overflow-y: auto;
}

.favorite-routes-modal .route,
.filtering-modal .filter-search-results .result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
    .favorite-routes-modal .route:hover,
    .filtering-modal .filter-search-results .result:hover {
        background-color: var(--button-hover);
    }
}

.favorite-routes-modal .route:active,
.filtering-modal .filter-search-results .result:active {
    background-color: var(--button-active);
}

.favorite-routes-modal .route .line-info,
.filtering-modal .filter-search-results .result .line-info {
    flex-shrink: 0;
}

.favorite-routes-modal .route .destinations {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.favorite-routes-modal .route .destination {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-routes-modal .route .destination.none {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.favorite-routes-modal .route .skeleton-bar {
    width: 60%;
    height: 14px;
    border-radius: 4px;
}

.favorite-routes-modal .route input,
.filtering-modal .filter-search-results .result input {
    flex-shrink: 0;
    margin: -1px 0;
    box-shadow: none;
}

.favorite-routes-modal .routes.filtering .route:not(.selected) :is(.line-info, .destinations) {
    filter: grayscale(1);
    opacity: 0.45;
}

.favorite-routes-modal .actions {
    margin-top: auto;
}

.favorite-routes-modal .actions,
.notification-lines-modal .actions {
    display: flex;
    gap: 8px;
    padding: 8px 16px 16px 16px;
}

.favorite-routes-modal .actions .action-button.disabled,
.notification-lines-modal .actions .action-button.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.favorites-modal .favorite-stop .departures {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding: 8px;
    border-radius: 16px;
    background-color: var(--bs-secondary-bg);
}

.favorites-modal .favorite-stop .departures .departure {
    display: flex;
    justify-content: space-between;
    gap: 2px;
}

.favorites-modal .favorite-stop .departures .departure .time {
    white-space: nowrap;
}

.favorites-modal .favorite-stop .departures .departure.skeleton {
    align-items: center;
    height: 24px;
}

.favorites-modal .favorite-stop .departures .departure.skeleton .skeleton-bar {
    border-radius: 4px;
    background-color: var(--button-hover);
}

.favorites-modal .favorite-stop .departures .departure.skeleton .skeleton-bar.line-badge {
    width: 34px;
    height: 22px;
    border-radius: 8px;
}

.favorites-modal .favorite-stop .departures .departure.skeleton .skeleton-bar.destination {
    height: 14px;
}

.favorites-modal .favorite-stop .departures .departure.skeleton .skeleton-bar.time {
    width: 70px;
    height: 14px;
    flex-shrink: 0;
}

.stop-modal .arrivals .arrival {
    display: flex;
    flex-direction: column;
    /* gap: 6px; */
    padding: 8px 16px;
    border-radius: 24px;
    max-height: 61px;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.2s, margin 0.2s, max-height 0.2s;
    cursor: pointer;
    touch-action: manipulation;
}

.stop-modal .arrivals .arrival.cancelled .inner {
    opacity: 0.6;
}

.favorites-modal .departure.cancelled {
    opacity: 0.6;
}

.favorites-modal .departure.cancelled .time {
    text-decoration: line-through;
}

.stop-modal .arrivals .arrival:not(.expanded) .actions {
    display: none;
}

.stop-modal .arrivals .arrival.expanded {
    background-color: var(--bs-secondary-bg);
    margin: 8px;
    max-height: 140px;
}

.stop-modal .arrivals .arrival:has(.destination.wrapped):not(.expanded) {
    max-height: 76px;
    transition: background-color 0.2s, margin 0.2s;
}

.stop-modal .arrivals .arrival .inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.stop-modal .arrivals .arrival .actions {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.stop-modal .arrivals .arrival .actions .action {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border-radius: 16px;
    transition: background-color 0.2s;
    cursor: pointer;
}

.stop-modal .arrivals .arrival .actions .action .icon {
    width: 24px;
    height: 24px;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.stop-modal .arrivals .arrival .actions .action .icon.trip {
    mask-image: url(../images/trip_icon.svg);
    -webkit-mask-image: url(../images/trip_icon.svg);
}

.stop-modal .arrivals .arrival .actions .action .icon.vehicle {
    mask-image: url(../images/vehicle_icon.svg);
    -webkit-mask-image: url(../images/vehicle_icon.svg);
}

.stop-modal .arrivals .arrival .actions .action .label {
    font-size: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .stop-modal .arrivals .arrival .actions .action:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
}

.stop-modal .arrivals .arrival .actions .action:active {
    background-color: var(--button-active);
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 24px;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.2s, margin 0.2s;
    cursor: pointer;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop.departed .stop-details {
    opacity: 0.5;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop.next .stop-details .stop-info {
    font-weight: 700;
}

.stop-modal .arrivals .arrival:not(:has(.action:active)):active,
.popup-modal .route .stop:active {
    background-color: var(--button-active);
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-details {
    flex: 1 1 auto;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-details .stop-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-details .stop-info .stop-code {
    white-space: nowrap;
    font-size: 0.8em;
    font-weight: 400;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-details .stop-info .icon {
    display: inline-block;
    background-color: var(--bs-body-color);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 18px;
    height: 18px;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-details .stop-info .icon.request {
    mask-image: url(../images/request_stop_icon.svg);
    -webkit-mask-image: url(../images/request_stop_icon.svg);
    background-color: var(--bs-warning);
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-details .stop-restriction {
    display: flex;
    gap: 4px;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-details .stop-restriction span:last-child {
    font-weight: 600;
    color: var(--bs-body-color);
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-details .stop-times {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 6px;
    row-gap: 2px;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-details .stop-time {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-details .stop-time-icon {
    grid-column: 1;
    width: 16px;
    height: 16px;
    background-color: var(--bs-secondary-color);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-details .stop-time-icon.arrival {
    mask-image: url(../images/arrival_icon.svg);
    -webkit-mask-image: url(../images/arrival_icon.svg);
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-details .stop-time-icon.departure {
    mask-image: url(../images/departure_icon.svg);
    -webkit-mask-image: url(../images/departure_icon.svg);
}

.stop-platform {
    align-self: center;
    white-space: nowrap;
    padding: 0 5px;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-secondary-color);
    vertical-align: middle;
}

.stop-occupancy,
.stop-driver-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stop-occupancy.wrapped > span:first-child,
.stop-driver-change.wrapped > span:first-child,
.stop-restriction.wrapped > span:first-child {
    display: none;
}
.driver-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--bs-body-color);
}

.driver-change-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    mask-image: url(../images/driver_change_icon.svg);
    -webkit-mask-image: url(../images/driver_change_icon.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.occupancy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

.occupancy-icon {
    flex-shrink: 0;
    width: 21px;
    height: 16px;
    background-color: currentColor;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.occupancy.low {
    color: var(--delay-none);
}

.occupancy.medium {
    color: var(--delay-early);
}

.occupancy.high,
.occupancy.closed {
    color: var(--delay-delayed);
}

.occupancy.low .occupancy-icon {
    mask-image: url(../images/occupancy_low.svg);
    -webkit-mask-image: url(../images/occupancy_low.svg);
}

.occupancy.medium .occupancy-icon {
    mask-image: url(../images/occupancy_medium.svg);
    -webkit-mask-image: url(../images/occupancy_medium.svg);
}

.occupancy.high .occupancy-icon {
    mask-image: url(../images/occupancy_high.svg);
    -webkit-mask-image: url(../images/occupancy_high.svg);
}

.occupancy.closed .occupancy-icon {
    width: 16px;
    mask-image: url(../images/no_boarding_icon.svg);
    -webkit-mask-image: url(../images/no_boarding_icon.svg);
}

.favorites-modal .favorite-stop .departures .departure .time .occupancy {
    margin-right: 6px;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    margin-right: 10px;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-indicators .circle,
:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .circle,
.brigade-modal .trip .trip-stop .circle {
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: var(--bs-body-bg);
    border: 3px solid var(--line-color, var(--bs-secondary-color));
    width: 14px;
    height: 14px;
    z-index: 10;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop:first-of-type .stop-indicators .circle,
:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop:last-of-type .stop-indicators .circle {
    border-width: 5px;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop.next .stop-indicators .circle {
    position: relative;
    background-color: var(--line-color);
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop.next .stop-indicators .circle::before,
:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop.next .stop-indicators .circle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    background-color: var(--line-color);
    pointer-events: none;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop.next .stop-indicators .circle::before {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    animation: next-stop-halo 0.6s ease-in-out infinite alternate;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop.next .stop-indicators .circle::after {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
}

.popup-modal .route .stop .stop-indicators .trip-vehicle {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 11;
}

.popup-modal .route .stop .stop-indicators .trip-vehicle.line-info .line {
    position: static;
    width: auto;
    height: 22px;
    box-shadow: none;
}

.popup-modal .route .stop .stop-indicators .trip-vehicle.line-info .line .icon {
    width: 22px;
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

[data-bs-theme=dark] .popup-modal .route.night .stop .stop-indicators .trip-vehicle.line-info .line .icon {
    box-shadow: 0 0 0 1.5px var(--night-line-casing), 0 0 0 3.5px var(--bs-body-bg);
}

@keyframes next-stop-halo {
    from {
        transform: scale(0.76923);
        opacity: 0.45;
    }

    to {
        transform: scale(1);
        opacity: 0.2;
    }
}

[data-bs-theme=dark] :is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route.night .stop .stop-indicators > .line,
[data-bs-theme=dark] .brigade-modal .trip.night .trip-line {
    background-color: var(--night-line-casing) !important;
}

[data-bs-theme=dark] :is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route.night .stop .stop-indicators .circle,
[data-bs-theme=dark] .brigade-modal .trip.night .trip-stop .circle,
[data-bs-theme=dark] .dispatches-modal .dispatch .dispatch-stops.night {
    --line-color: var(--night-line-casing) !important;
}

.brigade-modal .trip .trip-line {
    position: absolute;
    top: -30px;
    width: 4px;
    height: 100%;
    pointer-events: none;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop .stop-indicators .line {
    position: absolute;
    width: 4px;
    height: calc(100% + 2px);
    pointer-events: none;
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop:first-of-type .stop-indicators .line {
    top: 50%;
    height: calc(50% + 1px);
}

:is(.popup-modal, .dispatches-modal, .timetable-modal, .timetable-trip-modal) .route .stop:last-of-type .stop-indicators .line {
    bottom: 50%;
    height: calc(50% + 1px);
}

:is(.route-modal, .timetable-modal) .route > * {
    flex-shrink: 0;
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators {
    position: relative;
    flex: 0 0 auto;
    align-self: stretch;
    margin: -8px 10px -8px 0;
    pointer-events: none;
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .branch {
    --line-color: var(--branch-color);
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .circle {
    position: absolute;
    top: calc(50% - 7px);
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .circle.terminus {
    border-width: 5px;
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .rail {
    position: absolute;
    width: 4px;
    background-color: var(--line-color);
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .rail.top {
    top: -1px;
    height: calc(50% + 1px);
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .rail.bottom {
    top: 50%;
    bottom: -1px;
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .connector {
    position: absolute;
    box-sizing: border-box;
    border: 0 solid var(--line-color);
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .rail.lead-top {
    top: 20px;
    bottom: 50%;
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .rail.lead-bottom {
    top: 50%;
    bottom: 20px;
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .connector.curve {
    left: 0;
    width: 100%;
    height: 20px;
    overflow: visible;
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .connector.curve.top {
    top: 0;
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .connector.curve.bottom {
    bottom: 0;
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .connector.curve.straddle {
    height: 40px;
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .connector.curve.top.straddle {
    top: -20px;
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .connector.curve.bottom.straddle {
    bottom: -20px;
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators .connector.curve path {
    fill: none;
    stroke: var(--line-color);
    stroke-width: 4px;
    stroke-linecap: round;
}

:is(.route-modal, .timetable-modal, .analytics-menu) .route .graph-indicators :is(.rail, .connector):not(.branch) {
    z-index: 1;
}

[data-bs-theme=dark] :is(.route-modal, .timetable-modal, .analytics-menu) .route.night .graph-indicators {
    --line-color: var(--night-line-casing);
    --branch-color: color-mix(in srgb, var(--night-line-casing), #000 30%);
}

:is(.route-modal, .timetable-modal) .route .stops-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

:is(.route-modal, .timetable-modal) .route .stops-toggle:active {
    background-color: var(--button-active);
}

:is(.route-modal, .timetable-modal) .route .stops-toggle .chevron {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: var(--bs-secondary-color);
    mask-image: url(../images/chevron_down.svg);
    -webkit-mask-image: url(../images/chevron_down.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transition: transform 0.2s;
}

:is(.route-modal, .timetable-modal) .route .stops-toggle.expanded .chevron {
    transform: rotate(180deg);
}

:is(.route-modal, .timetable-modal) .route .graph-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

:is(.route-modal, .timetable-modal) .route .graph-chunk,
:is(.route-modal, .timetable-modal) .route .graph-collapse-inner {
    display: flex;
    flex-direction: column;
}

.stop-modal .arrivals .arrival .arrival-header,
:is(.popup-modal, .dispatches-modal) .stop .stop-details {
    display: flex;
    flex-direction: column;
    /* overflow-x: hidden; */
    min-width: 0;
}

.line-info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.line-info .line.metro:is(.sofia, .copenhagen) .icon::before {
    display: none;
}

.line-info .line.metro.sofia .icon {
    background-image: url(../images/metro_icon_no_fill.svg);
}

.line-info .line.metro.copenhagen .icon {
    background-image: url(../images/copenhagen/metro_icon_no_fill.svg);
}

.line-info .line.tram.alicante .icon::before {
    display: none;
}

.line-info .line.tram.alicante .icon {
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url(../images/alicante/tramalicante_icon.svg);
}

[data-bs-theme=dark] .line-info .line.tram.alicante .icon {
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url(../images/alicante/tramalicante_icon_dark.svg);
}

[data-bs-theme=dark] .line-info .line.metro.sofia .icon {
    filter: invert(1) hue-rotate(180deg) contrast(90%) brightness(90%);
}

/* [data-bs-theme=dark] .line-info .line.metro .icon {
    background-image: none;
    background-color: var(--bs-body-color);
    mask-image: url(../images/metro_icon_no_fill.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
} */

.line-info .line.metro.sofia .number:not(:has(.brigade-number, .trip-short-name), .expand) {
    border-radius: 50% !important;
    width: 1.5em !important;
}

.line-info.big .line.metro.sofia .number:not(:has(.brigade-number, .trip-short-name)) {
    border-radius: 50% !important;
    width: 1.75rem !important;
}

.line-info .destination {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.popup-modal .header .line-info .destination.wrapped,
.timetable-trip-modal .header .line-info .destination.wrapped,
.stop-modal .arrivals .arrival .line-info .destination.wrapped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    font-size: 1rem;
    line-height: 1.15;
}

/* .stop-modal .arrivals .arrival .times {
    margin-left: auto;
    padding-left: 5px;
    white-space: nowrap;
} */

.stop-modal .arrivals .arrival .arrival-details,
:is(.popup-modal, .dispatches-modal, .timetable-trip-modal) .stop .arrival-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.stop-modal .arrivals .arrival .arrival-details,
:is(.popup-modal, .dispatches-modal, .timetable-trip-modal) .stop .arrival-details,
.arrival-time .unit {
    /* display: flex;
    justify-content: space-between; */
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.stop-modal .arrivals .arrival .arrival-time,
:is(.popup-modal, .dispatches-modal) .stop .arrival-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stop-modal .arrivals .arrival .arrival-time .time,
:is(.popup-modal, .dispatches-modal) .stop .arrival-time .time {
    font-size: 18px;
    height: 24px;
}

.stop-modal .arrivals .arrival.cancelled .arrival-time .time {
    text-decoration: line-through;
}

.arrival-details .gps {
    display: inline-block;
    text-align: center;
    background-color: var(--bs-secondary-color);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    height: 18px;
    width: 18px;
}

.arrival-details .gps-on {
    mask-image: url(../images/location_gps_icon.svg);
    -webkit-mask-image: url(../images/location_gps_icon.svg);
}

.arrival-details .gps-off {
    mask-image: url(../images/location_off_icon.svg);
    -webkit-mask-image: url(../images/location_off_icon.svg);
}

.arrival-details .delay {
    font-weight: 700;
}

.delay.delay-none {
    color: var(--delay-none);
}

.delay.delay-none .gps {
    background-color: var(--delay-none);
}

.delay.delay-early {
    color: var(--delay-early);
}

.delay.delay-early .gps {
    background-color: var(--delay-early);
}

.delay.delay-delayed, .delay.delay-cancelled {
    color: var(--delay-delayed);
}

.delay.delay-delayed .gps {
    background-color: var(--delay-delayed);
}

.trip-modal .line-info.big {
    cursor: pointer;
    /* overflow-x: hidden; */
    user-select: none;
    -webkit-user-select: none;
}

.line-info.big {
    font-size: 1.125rem;
}

.line-info.big .line {
    height: 1.75rem;
}

.line-info.big .line .icon {
    width: 1.75rem !important;
    height: 1.75rem !important;
}

.line-info.big .line .number {
    width: 3.5rem !important;
    border-radius: 0.4375rem !important;
}

.line-info.big .line:not(.metro.sofia) .number.expand {
    min-width: 3.5rem !important;
    width: auto !important;
    padding: 0 6px;
    border-radius: 0.4375rem !important;
}

.line-info.big .line:not(.metro.sofia) .number.big:not(.expand) {
    /* width: 4.5rem !important; */
    min-width: 4.5rem !important;
    width: auto !important;
    padding: 0 6px;
}

.line-info.huge {
    font-size: 1.25rem;
}

.line-info.huge .line {
    height: 2rem;
}

.line-info.huge .line .icon {
    width: 2rem !important;
    height: 2rem !important;
}

.line-info.huge .line .number {
    width: 4rem !important;
    border-radius: 0.5rem !important;
}

.line-info.huge .line .number.expand {
    min-width: 4rem !important;
    width: auto !important;
    padding: 0 6px;
}

.line-info.huge .line.metro.sofia .number {
    width: 2rem !important;
}

/* .line-info .line .number .brigade-number {
    line-height: 1;
} */

/* .line-info.big .line .number.big .brigade-number {
    font-size: 14px;
} */

.line-info:not(.big) .line .number.big {
    /* width: 3.75rem !important; */
    min-width: 3.75rem !important;
    width: auto !important;
    padding: 0 4px;
}

.line-info:not(.big, .responsive, .huge) .line .number.expand {
    min-width: 3rem !important;
    width: auto !important;
    padding: 0 6px;
    border-radius: 0.375rem !important;
}

.line-info:not(.big) .line.metro.sofia .number.big {
    width: 3rem !important;
    min-width: 0 !important;
}

.line-info .brigade-number {
    font-weight: normal;
}

.line-info .line .number.big .brigade-number {
    font-size: 12px;
}

.line-info .line .number .trip-short-name {
    margin-left: 4px;
    font-weight: normal;
    font-size: 14px;
}

.line-info.big .line .number.big .trip-short-name {
    font-size: 16px;
}

/* .line-info.smol .line .number .brigade-number {
    font-size: 13px !important;
} */

[data-bs-theme=dark][data-bs-theme-amoled] .line-info .line.night .icon,
[data-bs-theme=dark][data-bs-theme-amoled] .line-info .line.night .number {
    /* box-shadow: 0px 0px 10px 4px #353535; */
    /* box-shadow: 0px 0px 8px 4px #606060; */
    box-shadow: 0 0 0 1px var(--night-line-casing);
}

.filter-modal .filter-list .filter {
    display: inline-flex;
    align-items: center;
    /* width: 100%; */
    height: 40px;
    border-radius: 20px;
    background-color: var(--bs-secondary-bg);
    font-size: 1rem;
    padding-right: 14px;
}

.filter-modal .filter-list .filter input {
    width: 100%;
    margin: 0;
    padding: 8px 8px 8px 0px;
    background: none;
    border: none;
}

.filter-modal .filter-list .filter select {
    width: 100%;
    margin: 0px 8px 0px 8px;
    padding: 8px 0px;
    background-color: var(--bs-secondary-bg);
    border: none;
}

.filter-modal .filter-list .filter input:focus,
.filter-modal .filter-list .filter select:focus {
    outline: none;
}

.filter-modal .filter-list .filter input::-webkit-search-cancel-button {
    appearance: none;
    height: 1.5em;
    width: 1.5em;
    background: url(../images/close_circle_icon.svg) no-repeat 50% 50%;
    background-size: contain;
    opacity: 1;
}

.custom-dropdown-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 60px;
    min-width: 160px;
    background: var(--bs-secondary-bg);
    box-shadow: var(--shadow-8);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
}

.custom-dropdown-menu.hidden {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    opacity: 1;
    transition: opacity 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.tour-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.tour-spotlight {
    position: absolute;
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
    pointer-events: none;
}

.tour-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: var(--bs-secondary-bg);
    box-shadow: var(--shadow-16);
    border-radius: 20px;
    padding: 20px;
    transition: top 0.2s ease, left 0.2s ease;
}

.tour-card .tour-title {
    font-size: 18px;
    font-weight: 700;
}

.tour-card .tour-description {
    font-size: 15px;
    line-height: 1.4;
    color: var(--bs-secondary-color);
}

.tour-card .tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.tour-card .tour-dots {
    display: flex;
    gap: 7px;
}

.tour-card .tour-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-tertiary-bg);
}

.tour-card .tour-dot.active {
    background: var(--bs-primary);
}

.tour-card .tour-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.tour-card .tour-button {
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.tour-card .tour-button.skip {
    color: var(--bs-secondary-color);
}

.tour-card .tour-button.next {
    padding: 8px 18px;
    border-radius: 12px;
    background-color: var(--bs-primary);
    color: white;
}

@media (hover: hover) and (pointer: fine) {
    .tour-card .tour-button:hover {
        opacity: 0.85;
    }
}

.changelog-modal {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: calc(100% - 32px);
    max-width: 420px;
    max-height: calc(100% - 48px);
    padding: 20px 16px 16px 16px;
    background-color: var(--bs-body-bg);
    border-radius: 24px;
    box-shadow: var(--shadow-16);
    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
}

.changelog-modal-container.hidden .changelog-modal {
    transform: scale(0.95);
}

.changelog-modal .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.changelog-modal .app-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
    background: url(../images/branding/logo_full.svg) center / contain no-repeat;
    border-radius: 12px;
    box-shadow: var(--shadow-6);
}

.changelog-modal .changelog-title {
    font-size: 22px;
    font-weight: 700;
}

.changelog-modal .changelog-subtitle {
    font-size: 15px;
    color: var(--bs-secondary-color);
}

.changelog-modal .items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    margin: 0 -8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.changelog-modal .action-button {
    flex-shrink: 0;
}

.changelog-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 16px;
}

.changelog-item.link {
    cursor: pointer;
    transition: background-color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
    .changelog-item.link:hover {
        background-color: var(--button-hover);
    }
}

.changelog-item.link:active {
    background-color: var(--button-active);
}

.changelog-item .item-icon {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--bs-primary) 15%, transparent);
}

.changelog-item .item-icon::before {
    content: "";
    position: absolute;
    inset: 9px;
    background-color: var(--bs-primary);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.changelog-item .item-icon.alert::before {
    mask-image: url(../images/alert_icon.svg);
    -webkit-mask-image: url(../images/alert_icon.svg);
}

.changelog-item .item-icon.bell::before {
    mask-image: url(../images/bell_icon.svg);
    -webkit-mask-image: url(../images/bell_icon.svg);
}

.changelog-item .item-icon.analytics::before {
    mask-image: url(../images/analytics_icon.svg);
    -webkit-mask-image: url(../images/analytics_icon.svg);
}

.changelog-item .item-icon.history::before {
    mask-image: url(../images/history_icon.svg);
    -webkit-mask-image: url(../images/history_icon.svg);
}

.changelog-item .item-icon.schedule::before {
    mask-image: url(../images/schedule_icon.svg);
    -webkit-mask-image: url(../images/schedule_icon.svg);
}

.changelog-item .item-icon.layers::before {
    mask-image: url(../images/layers_icon.svg);
    -webkit-mask-image: url(../images/layers_icon.svg);
}

.changelog-item .text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.changelog-item .name {
    font-size: 16px;
    font-weight: 700;
}

.changelog-item .description {
    font-size: 14px;
    line-height: 1.3;
    color: var(--bs-secondary-color);
}

.changelog-item .arrow {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: var(--bs-secondary-color);
    mask-image: url(../images/chevron_right.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(../images/chevron_right.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.custom-dropdown-menu.favorite-parts-menu,
.custom-dropdown-menu.route-menu {
    min-width: 160px;
}

.custom-dropdown-menu .custom-dropdown-item {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.custom-dropdown-menu .custom-dropdown-item.disabled {
    opacity: 0.5;
    cursor: default;
}

.dropdown-item-icon {
    display: inline-block;
    background-color: var(--bs-body-color);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

.dropdown-item-icon.share {
    mask-image: url(../images/share_icon.svg);
    -webkit-mask-image: url(../images/share_icon.svg);
}

.dropdown-item-icon.navigate {
    mask-image: url(../images/directions_icons.svg);
    -webkit-mask-image: url(../images/directions_icons.svg);
}

.dropdown-item-icon.brigade {
    mask-image: url(../images/schedule_icon.svg);
    -webkit-mask-image: url(../images/schedule_icon.svg);
}

.dropdown-item-icon.timetable {
    mask-image: url(../images/calendar_icon.svg);
    -webkit-mask-image: url(../images/calendar_icon.svg);
}

.dropdown-item-icon.remove {
    mask-image: url(../images/close_circle_icon.svg);
    -webkit-mask-image: url(../images/close_circle_icon.svg);
}

.dropdown-item-icon.info {
    mask-image: url(../images/info_icon.svg);
    -webkit-mask-image: url(../images/info_icon.svg);
}

.dropdown-item-icon.favorite {
    mask-image: url(../images/favorite_icon.svg);
    -webkit-mask-image: url(../images/favorite_icon.svg);
}

.dropdown-item-icon.favorite.filled {
    background: linear-gradient(180deg, #ffb800 0%, #ff6b00 100%);
    mask-image: url(../images/favorite_icon_filled.svg);
    -webkit-mask-image: url(../images/favorite_icon_filled.svg);
}

.dropdown-item-icon.home {
    mask-image: url(../images/home_icon.svg);
    -webkit-mask-image: url(../images/home_icon.svg);
}

.dropdown-item-icon.work {
    mask-image: url(../images/work_icon.svg);
    -webkit-mask-image: url(../images/work_icon.svg);
}

.dropdown-item-icon.bookmark-add {
    mask-image: url(../images/bookmark_add_icon.svg);
    -webkit-mask-image: url(../images/bookmark_add_icon.svg);
}

.dropdown-item-icon.back {
    mask-image: url(../images/chevron_left.svg);
    -webkit-mask-image: url(../images/chevron_left.svg);
}

.dropdown-item-chevron {
    display: inline-block;
    flex-shrink: 0;
    margin-left: auto;
    background-color: var(--bs-secondary-color);
    mask-image: url(../images/chevron_right.svg);
    -webkit-mask-image: url(../images/chevron_right.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

.map-context-menu .custom-dropdown-item.back {
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.map-context-menu .custom-dropdown-item-header {
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 260px;
    border-bottom: 1px solid var(--bs-border-color);
}

.map-context-menu .custom-dropdown-item.danger {
    color: var(--bs-danger);
    border-top: 1px solid var(--bs-border-color);
}

.map-context-menu .custom-dropdown-item.danger .dropdown-item-icon {
    background-color: var(--bs-danger);
}

.map-context-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
}

.map-context-menu .save-place-prompt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.map-context-menu .save-place-prompt .prompt-label {
    font-size: 14px;
    font-weight: 600;
}

.map-context-menu .save-place-prompt .save-place-name {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: none;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: 14px;
}

.map-context-menu .save-place-prompt .prompt-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.map-context-menu .save-place-prompt .prompt-button {
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.map-context-menu .save-place-prompt .prompt-button.save {
    background-color: var(--bs-primary);
    color: white;
}

@media (hover: hover) and (pointer: fine) {
    .map-context-menu .save-place-prompt .prompt-button:hover {
        opacity: 0.85;
    }
}

.map-context-menu .save-place-prompt .prompt-button.cancel {
    background-color: var(--bs-tertiary-bg);
}

.cities-modal .language-buttons {
    position: absolute;
    display: flex;
    gap: 2px;
    top: 20px;
    right: 20px;
    padding: 3px;
    border-radius: 14px;
    background-color: var(--bs-secondary-bg);
}

.cities-modal .language-buttons .language-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 32px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s;
}

@media (hover: hover) and (pointer: fine) {
    .cities-modal .language-buttons .language-button:not(.active):hover {
        background-color: var(--button-hover);
        color: var(--bs-body-color);
    }
}

.cities-modal .language-buttons .language-button:not(.active):active {
    background-color: var(--button-active);
}

.cities-modal .language-buttons .language-button.active {
    background-color: var(--bs-primary);
    color: #fff;
}

.cities-modal .cities-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    padding: 28px 24px 0px 24px;
    text-align: center;
}

.cities-modal .cities-header .logo {
    position: relative;
    margin-bottom: 4px;
}

.cities-modal .cities-header p {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.cities-modal .cities-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
}

.cities-modal .cities-search .search-bar input {
    padding: 10px 32px 10px 14px;
}

.cities-map-button {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    height: 44px;
    padding: 0 16px 0 12px;
    border-radius: 22px;
    background-color: var(--bs-secondary-bg);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.3s;
}

.cities-map-button .icon {
    width: 20px;
    height: 20px;
    mask-image: url(../images/map_icon.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(../images/map_icon.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

@media (hover: hover) and (pointer: fine) {
    .cities-map-button:hover {
        background-color: var(--button-hover);
    }
}

.cities-map-button:active {
    background-color: var(--button-active);
}

html[cities-map] .buttons {
    display: none;
}

.popup-notice.cities-map-notice {
    top: auto;
    bottom: 24px;
}

.cities-map-marker {
    --marker-bg: var(--button-bg);
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    background-color: var(--marker-bg);
    box-shadow: var(--shadow-6);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.cities-map-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    margin-left: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--marker-bg);
}

@media (hover: hover) and (pointer: fine) {
    .cities-map-marker.hovered {
        --marker-bg: var(--button-hover);
    }
}

.cities-map-marker.cluster {
    padding: 0 6px 0 10px;
}

.cities-map-marker .flags {
    font-size: 16px;
    letter-spacing: 2px;
}

.map-tooltip.cities-map-tooltip {
    width: max-content;
    max-width: 260px;
    white-space: normal;
    text-align: center;
}

.cities-map-marker .count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 12px;
}

.cities-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    gap: 4px;
    padding: 8px;
    margin-bottom: 8px;
}

.cities-list .city {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: var(--bs-secondary-bg);
    cursor: pointer;
    transition: background-color 0.3s, font-weight 0.1s;
}

.cities-list .city.inactive {
    opacity: 0.6;
}

@media (hover: hover) and (pointer: fine) {
    .cities-list .city:hover {
        background-color: var(--button-hover);
    }

    .cities-list .city:hover .arrow {
        margin-right: -8px;
    }
}

.cities-list .city:active {
    background-color: var(--button-active);
}

.cities-list .city:active .arrow {
    margin-right: -8px;
}

.cities-list .city .city-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.cities-list .city-info .name {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cities-list .city-info .details {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.cities-list .city-info .tag {
    padding: 4px 8px;
    height: 24px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
}

.cities-list .city-info .tag.new {
    background: linear-gradient(180deg, #ffb800 0%, #ff6b00 100%);
}

.cities-list .city-info .tag.inactive {
    color: #fff;
    background: linear-gradient(180deg, #f74b52 0%, #ff000a 100%);
}

.cities-list .city-info .tag.test {
    background: linear-gradient(180deg, #7ec8f5 0%, #2f8fd8 100%);
}

.cities-list .city .arrow {
    display: inline-block;
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    /* margin-right: 8px; */
    background-color: var(--bs-body-color);
    mask-image: url(../images/chevron_right.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../images/chevron_right.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    transition: margin-right 0.15s;
}

.cities-list .favorite-toggle {
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: var(--bs-secondary-color);
    mask-image: url(../images/favorite_icon.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(../images/favorite_icon.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    cursor: pointer;
    transition: transform 0.15s, background-color 0.2s;
}

.cities-list .country-header .favorite-toggle {
    mask-image: url(../images/favorite_icon_filled.svg);
    -webkit-mask-image: url(../images/favorite_icon_filled.svg);
}

.cities-list .city .favorite-toggle:hover {
    background-color: var(--bs-body-color);
}

.cities-list .city .favorite-toggle:active {
    transform: scale(0.85);
}

.cities-list .favorite-toggle.filled {
    background: linear-gradient(180deg, #ffb800 0%, #ff6b00 100%);
    mask-image: url(../images/favorite_icon_filled.svg);
    -webkit-mask-image: url(../images/favorite_icon_filled.svg);
}

.cities-list .country-group.favorites-group {
    margin-bottom: 12px;
}

.cities-list .country-group.favorites-group .country-header {
    cursor: default;
}

.cities-list .country-group.favorites-group .country-header .favorite-toggle {
    cursor: default;
}

.cities-list .cities-no-results {
    padding: 24px 12px;
    text-align: center;
    color: var(--bs-secondary-color);
}

.cities-list .country-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.cities-list .country-group .country-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 20px;
    border-radius: 16px;
    background-color: var(--bs-secondary-bg);
    cursor: pointer;
    transition: background-color 0.3s, border-radius 0.2s;
}

.cities-list .country-group.expanded .country-header {
    border-radius: 16px 16px 5px 5px;
    margin-bottom: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .cities-list .country-group .country-header:hover {
        background-color: var(--button-hover);
    }
}

.cities-list .country-group .country-header:active {
    background-color: var(--button-active);
}

.cities-list .country-group .country-header .flag {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
}

.cities-list .country-group .country-header .country-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cities-list .country-group .country-header .country-count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 12px;
    font-weight: 700;
}

.cities-list .country-group .country-header .chevron {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: var(--bs-body-color);
    mask-image: url(../images/chevron_down.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(../images/chevron_down.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transition: transform 0.2s;
}

.cities-list .country-group.expanded .country-header .chevron {
    transform: rotate(180deg);
}

.cities-list .country-group .country-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.cities-list .country-group.expanded .country-collapse {
    grid-template-rows: 1fr;
}

.cities-list .country-group .country-collapse-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    min-height: 0;
}

.logo {
    background-color: var(--bs-body-color);
    width: 96px;
    height: 96px;
    mask-image: url(../images/branding/logo.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../images/branding/logo.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.brigade-modal .header .modal-title {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* .brigade-modal .header .line-info {
    margin-left: 4px;
} */

.brigade-modal .notice {
    padding-bottom: 16px;
}

:is(.brigade-modal, .dispatches-modal, .timetable-modal, .analytics-menu) .dates {
    margin-bottom: 8px;
}

:is(.brigade-modal, .dispatches-modal, .timetable-modal, .analytics-menu) .dates .dates-list {
    display: flex;
    justify-content: safe center;
    gap: 8px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

:is(.brigade-modal, .dispatches-modal, .timetable-modal, .analytics-menu) .dates .dates-list::-webkit-scrollbar {
    display: none;
}

:is(.brigade-modal, .dispatches-modal, .timetable-modal, .analytics-menu) .dates .dates-list .date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 0 100px;
    padding: 4px 16px;
    border-radius: 12px;
    line-height: 1.3;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

:is(.brigade-modal, .dispatches-modal, .timetable-modal, .analytics-menu) .dates .dates-list .date .day-date {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

:is(.brigade-modal, .dispatches-modal, .timetable-modal, .analytics-menu) .dates .dates-list .date .day-name {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

:is(.brigade-modal, .dispatches-modal, .timetable-modal, .analytics-menu) .dates .dates-list .date.selected {
    background-color: var(--bs-primary);
    color: white;
}

:is(.brigade-modal, .dispatches-modal, .timetable-modal, .analytics-menu) .dates .dates-list .date.in-range {
    background-color: color-mix(in srgb, var(--bs-primary) 25%, var(--bs-tertiary-bg));
    color: var(--bs-body-color);
}

:is(.brigade-modal, .dispatches-modal, .timetable-modal, .analytics-menu) .dates .dates-list .date.no-service:not(.selected) {
    opacity: 0.45;
}

.dates.has-calendar .dates-list {
    padding-right: 66px;
}

.dates:not(.has-calendar) .calendar-button {
    display: none;
}

.dates .calendar-button::before {
    mask-size: 20px;
    mask-image: url(../images/calendar_icon.svg);
    -webkit-mask-size: 20px;
    -webkit-mask-image: url(../images/calendar_icon.svg);
}

.calendar-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100% - 32px));
    padding: 16px;
    border-radius: 24px;
    background-color: var(--bs-body-bg);
    box-shadow: var(--shadow-6);
    transform: translate(-50%, -50%);
}

.calendar-modal > * {
    flex-shrink: 0;
}

.calendar-modal.resizing {
    overflow: hidden;
}

.calendar-modal .calendar-header {
    --edge-button-size: 32px;
    --edge-button-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.calendar-modal .calendar-month {
    font-size: 17px;
    font-weight: 700;
}

.calendar-modal .calendar-nav::before {
    inset: 25%;
}

.calendar-modal .calendar-nav.previous::before {
    mask-image: url(../images/chevron_left.svg);
    -webkit-mask-image: url(../images/chevron_left.svg);
}

.calendar-modal .calendar-nav.next::before {
    mask-image: url(../images/chevron_right.svg);
    -webkit-mask-image: url(../images/chevron_right.svg);
}

.calendar-modal .calendar-nav.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.calendar-modal :is(.calendar-weekdays, .calendar-days) {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-modal .calendar-weekdays span {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--bs-secondary-color);
}

.calendar-modal .calendar-days .day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
    opacity: 0.4;
}

.calendar-modal .calendar-days .day.outside {
    visibility: hidden;
}

.calendar-modal .calendar-days .day.available {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    opacity: 1;
    cursor: pointer;
    transition: background-color 0.2s;
}

.calendar-modal .calendar-days .day.today {
    box-shadow: inset 0 0 0 2px var(--bs-primary);
}

@media (hover: hover) and (pointer: fine) {
    .calendar-modal .calendar-days .day.available:not(.selected):hover {
        background-color: var(--button-hover);
    }
}

.calendar-modal .calendar-days .day.available:not(.selected):active {
    background-color: var(--button-active);
}

.calendar-modal .calendar-days .day.selected {
    background-color: var(--bs-primary);
    color: white;
    opacity: 1;
}

.calendar-modal .calendar-days .day.in-range {
    background-color: color-mix(in srgb, var(--bs-primary) 25%, var(--bs-tertiary-bg));
}

.range-modal .range-ends {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 4px;
}

.range-modal .range-end {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 14px;
    background-color: var(--bs-tertiary-bg);
}

.range-modal .range-end.active {
    box-shadow: inset 0 0 0 2px var(--bs-primary);
}

.range-modal .range-end span {
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.range-modal .range-end b {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.datetime-modal {
    gap: 0;
    max-height: calc(100% - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.datetime-modal .datetime-modes {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 14px;
    background-color: var(--bs-tertiary-bg);
    isolation: isolate;
}

.datetime-modal .datetime-mode {
    position: relative;
    flex: 1 1 auto;
    padding: 8px 10px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: background-color 0.2s, color 0.25s;
}

@media (hover: hover) and (pointer: fine) {
    .datetime-modal .datetime-mode:not(.active):hover {
        background-color: var(--button-hover);
    }
}

.datetime-modal .datetime-mode.active {
    color: white;
    transition: color 0.25s;
}

.datetime-modal .datetime-mode-indicator {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--bs-primary);
}

.datetime-modal .datetime-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.datetime-modal.resizing .datetime-body {
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 0;
    overflow: hidden;
}

.datetime-modal :is(.calendar-header, .datetime-done) {
    margin-top: 14px;
}

.datetime-modal .calendar-days .day {
    aspect-ratio: auto;
    height: 38px;
}

.datetime-modal .datetime-time {
    width: 100%;
    padding: 6px 12px;
    border: none;
    border-radius: 14px;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color-scheme: light dark;
    appearance: none;
}

.datetime-modal .datetime-time:focus {
    outline: 2px solid var(--bs-primary);
}

.datetime-modal .datetime-adjust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.datetime-modal .datetime-adjust-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 10px;
    background-color: var(--bs-tertiary-bg);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s;
}

@media (hover: hover) and (pointer: fine) {
    .datetime-modal .datetime-adjust-button:hover {
        background-color: var(--button-hover);
    }
}

.datetime-modal .datetime-adjust-button:active {
    background-color: var(--button-active);
}

@media (hover: hover) and (pointer: fine) {
    :is(.brigade-modal, .dispatches-modal, .timetable-modal, .analytics-menu) .dates .dates-list .date:not(.selected):hover {
        background-color: var(--button-hover);
    }
}

:is(.brigade-modal, .dispatches-modal, .timetable-modal, .analytics-menu) .dates .dates-list .date:not(.selected):active {
    background-color: var(--button-active);
}

.brigade-modal .trip-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0 16px 16px 16px;
}

:is(.brigade-modal, .timetable-modal) .brigade-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    padding: 0 16px 16px 16px;
}

:is(.brigade-modal, .timetable-modal) .brigade-list .brigade {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 5px;
    background-color: var(--bs-secondary-bg);
    cursor: pointer;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    color: inherit;
    transition: background-color 0.3s;
}

:is(.brigade-modal, .timetable-modal) .brigade-list .brigade .details {
    flex: 1;
}

:is(.brigade-modal, .timetable-modal) .brigade-list .brigade:active {
    background-color: var(--button-active);
}

:is(.brigade-modal, .timetable-modal) .brigade-list .brigade:first-of-type:last-of-type {
    border-radius: 16px;
}

:is(.brigade-modal, .timetable-modal) .brigade-list .brigade:first-of-type {
    border-radius: 16px 16px 5px 5px;
}

:is(.brigade-modal, .timetable-modal) .brigade-list .brigade:last-of-type {
    border-radius: 5px 5px 16px 16px;
}

.brigade-modal .scroll-button {
    position: absolute;
    bottom: 16px;
    right: 16px;
    transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
}

.brigade-modal .scroll-button .icon {
    background-color: #fff;
}

.brigade-modal .trip .inner {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    overflow-x: auto;
    padding: 8px 16px;
    border-radius: 16px;
    background-color: var(--bs-secondary-bg);
    cursor: pointer;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    color: inherit;
    transition: background-color 0.3s;
}

.brigade-modal .trip .inner:active {
    background-color: var(--button-active);
}

/* .brigade-modal .trip .line-info {
    margin-bottom: 4px;
} */

.brigade-modal .trip .trip-line {
    top: 25px;
    /* top: 48px; */
    left: 65px;
    height: calc(100% - 50px);
    /* height: calc(100% - 68px); */
}

.brigade-modal .trip .trip-stop {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.brigade-modal .trip .trip-stop .circle {
    margin: 0 1px;
    background-color: transparent;
}

.brigade-modal .trip .trip-stop .time {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
}

.brigade-modal .trip .trip-stop .name {
    flex: 1;
    font-weight: 700;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.brigade-modal .trip .details {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    /* align-items: center;
    gap: 4px; */
    font-size: 14px;
    margin-left: 70px;
    color: var(--bs-secondary-color);
}

.brigade-modal .trip .details .info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* .brigade-modal .trip .trip-details .arrow {
    display: inline-block;
    flex-shrink: 0;
    background-color: var(--bs-body-color);
    width: 35px;
    height: 20px;
    margin-right: 8px;
    mask-image: url(../images/chevron_down.svg);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
} */

.brigade-modal .trip-list .trip .notes {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 16px;
}

.brigade-modal .trip-list .trip .notes .note {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.vehicle-info-modal .information {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 16px 16px;
    gap: 4px;
}

.vehicle-info-modal .information .vehicle-info {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.vehicle-image {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.vehicle-info-modal .information .vehicle-image {
    margin-top: 8px;
}

.vehicle-info-modal .information img.vehicle-image {
    cursor: zoom-in;
}

.vehicle-info-modal .information .vehicle-image-credit {
    align-self: flex-end;
    font-size: 12px;
    color: var(--bs-secondary-color);
}

.vehicle-image.loading,
.skeleton-loading {
    background: var(--bs-secondary-bg);
    /* animation: loading 1.5s infinite alternate; */
    animation: skeleton-loading 2s ease-in-out 0.5s infinite;
}

@keyframes loading {
    0% {
        background-color: var(--bs-body-bg);
    }

    50% {
        background-color: var(--bs-secondary-bg);
    }

    100% {
        background-color: var(--bs-body-bg);
    }
}

@keyframes skeleton-loading {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

.vehicle-info-modal .info-field {
    display: flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: 5px;
    background-color: var(--bs-secondary-bg);
}

.vehicle-info-modal .info-field .icon {
    width: 26px;
    height: 26px;
    margin-right: 16px;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.vehicle-info-modal .info-field .details {
    display: flex;
    flex-direction: column;
}

.vehicle-info-modal .info-field .name {
    font-weight: 500;
}

.vehicle-info-modal .info-field .value {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.vehicle-info-modal .info-field.model .icon {
    mask-image: url(../images/model_icon.svg);
    -webkit-mask-image: url(../images/model_icon.svg);
}

.vehicle-info-modal .info-field.production-year .icon {
    mask-image: url(../images/calendar_icon.svg);
    -webkit-mask-image: url(../images/calendar_icon.svg);
}

.vehicle-info-modal .info-field.depot .icon {
    mask-image: url(../images/depot_icon.svg);
    -webkit-mask-image: url(../images/depot_icon.svg);
}

.vehicle-info-modal .info-field.operator .icon {
    mask-image: url(../images/operator_icon.svg);
    -webkit-mask-image: url(../images/operator_icon.svg);
}

.vehicle-info-modal .info-field:first-of-type:last-of-type {
    border-radius: 16px;
}

.vehicle-info-modal .info-field:first-of-type {
    border-radius: 16px 16px 5px 5px;
}

.vehicle-info-modal .info-field:last-of-type {
    border-radius: 5px 5px 16px 16px;
}

:is(.schedules-menu, .dispatches-modal, .analytics-menu) .lines-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

:is(.schedules-menu, .dispatches-modal, .analytics-menu) .lines-list .line-type {
    display: flex;
    flex-direction: column;
    align-items: center;
}

:is(.schedules-menu, .dispatches-modal, .analytics-menu) .lines-list .line-type .title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

:is(.schedules-menu, .dispatches-modal, .analytics-menu) .lines-list .line-type .lines {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    user-select: none;
    -webkit-user-select: none;
}

:is(.schedules-menu, .dispatches-modal, .analytics-menu) .lines-list .line-type .lines .line-info {
    cursor: pointer;
}

:is(.schedules-menu, .dispatches-modal, .analytics-menu) .lines-list .line-type .lines .line-info .number {
    margin: 0;
}

:is(.schedules-menu, .dispatches-modal, .analytics-menu) .lines-list .line-type .lines .agency-name {
    flex: 0 0 100%;
    text-align: center;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.dispatches-modal .content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.dispatches-modal .modes {
    padding: 0 16px 12px 16px;
}

.dispatches-modal .modes .mode-chip {
    padding: 0 14px;
}

.dispatches-modal .vehicle-search {
    width: auto;
    margin: 0 16px 12px 16px;
}

.dispatches-modal .trip-nav {
    gap: 0;
}

.dispatches-modal .trip-nav .previous::before {
    mask-image: url(../images/chevron_left.svg);
    -webkit-mask-image: url(../images/chevron_left.svg);
}

.dispatches-modal .trip-nav .next::before {
    mask-image: url(../images/chevron_right.svg);
    -webkit-mask-image: url(../images/chevron_right.svg);
}

.dispatches-modal .trip-nav .disabled {
    opacity: 0.3;
    pointer-events: none;
}

:is(.dispatches-modal, .analytics-menu) .selection {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 16px 12px 16px;
}

:is(.dispatches-modal, .analytics-menu) .selection .selection-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

:is(.dispatches-modal, .analytics-menu) .selection .line-info {
    flex-shrink: 0;
}

:is(.dispatches-modal, .analytics-menu) .selection .name {
    min-width: 0;
    font-weight: 600;
    line-height: 1;
}

:is(.dispatches-modal, .analytics-menu) .selection .selection-row.meta {
    flex-wrap: wrap;
    gap: 4px;
    font-size: 14px;
    color: var(--bs-secondary-color);
}

:is(.dispatches-modal, .analytics-menu) .selection .view-trip {
    margin-left: auto;
    padding: 2px 12px;
    border-radius: 12px;
    font-weight: 600;
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    text-decoration: none;
    transition: background-color 0.2s;
}

:is(.dispatches-modal, .analytics-menu) .selection .view-trip:active {
    background-color: var(--button-active);
}

:is(.dispatches-modal, .analytics-menu) .dates .dates-list .date {
    flex: 0 0 120px;
}

.dispatches-modal .brigades {
    margin-bottom: 8px;
}

.dispatches-modal .brigades .brigades-list {
    display: flex;
    gap: 6px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.dispatches-modal .brigades .brigades-list::-webkit-scrollbar {
    display: none;
}

.dispatches-modal .brigades .brigade-chip {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.dispatches-modal .brigades .brigade-chip.selected {
    background-color: var(--bs-primary);
    color: white;
}

@media (hover: hover) and (pointer: fine) {
    .dispatches-modal .brigades .brigade-chip:not(.selected):hover {
        background-color: var(--button-hover);
    }
}

.dispatches-modal .brigades .brigade-chip:not(.selected):active {
    background-color: var(--button-active);
}

.dispatches-modal .list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 16px 16px;
}

.dispatches-modal .list:has(> .route) {
    padding: 0 0 16px 0;
}

.dispatches-modal .list:empty {
    flex: none;
    padding: 0;
}

.dispatches-modal .notice {
    flex: 1 1 auto;
}

.dispatches-modal .vehicles-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dispatches-modal .vehicles-list .vehicle-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dispatches-modal .vehicles-list .vehicle-group .title {
    padding-left: 16px;
    margin-bottom: 4px;
    font-weight: 600;
}

.dispatches-modal .vehicles-list .vehicle {
    padding: 8px 16px;
    border-radius: 5px;
    background-color: var(--bs-secondary-bg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s;
}

.dispatches-modal .vehicles-list .vehicle:nth-child(2) {
    border-radius: 16px 16px 5px 5px;
}

.dispatches-modal .vehicles-list .vehicle:last-child {
    border-radius: 5px 5px 16px 16px;
}

.dispatches-modal .vehicles-list .vehicle:nth-child(2):last-child {
    border-radius: 16px;
}

.dispatches-modal .vehicles-list .vehicle:active {
    background-color: var(--button-active);
}

.dispatches-modal :is(.vehicles-list .vehicle, .selection-row.vehicle, .summary-row.vehicle) {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dispatches-modal :is(.vehicles-list .vehicle, .selection-row.vehicle, .summary-row.vehicle) .model {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.dispatches-modal .dispatch-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 16px;
    border-radius: 16px;
    background-color: var(--bs-secondary-bg);
    container-type: inline-size;
}

@container (max-width: 340px) {
    .dispatches-modal .dispatch-summary .summary-row:not(.summary-driver-change) :is(.name, .model) {
        display: none;
    }
}

.dispatches-modal .dispatch-summary .summary-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s;
}

.dispatches-modal .dispatch-summary .summary-row:active {
    opacity: 0.6;
}

.dispatches-modal .dispatch-summary .summary-row .line-info {
    flex-shrink: 0;
}

.dispatches-modal .dispatch-summary .summary-row .name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.dispatches-modal .dispatch-summary .summary-driver-change {
    position: relative;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 0;
    padding-left: 20px;
}

.dispatches-modal .dispatch-summary .summary-driver-change .driver-change-icon {
    position: absolute;
    top: 4px;
    left: 0;
}

.dispatches-modal .dispatch-summary .summary-driver-change .label {
    font-weight: 600;
    white-space: nowrap;
}

.dispatches-modal .dispatch-summary .summary-driver-change .name {
    padding-right: 46px;
    overflow: visible;
    white-space: normal;
}

.dispatches-modal .dispatch-summary .summary-driver-change .summary-meta {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 24px;
}

.dispatches-modal .dispatch-summary .summary-meta {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--bs-secondary-color);
}

.dispatches-modal .dispatch-summary .summary-line {
    align-items: flex-start;
}

.dispatches-modal .dispatch-summary .summary-line .name,
.dispatches-modal .dispatch-summary .summary-times .summary-meta {
    line-height: 1.5rem;
}

.dispatches-modal .dispatch-summary .summary-times {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    margin-left: auto;
}

.dispatches-modal .dispatch-summary .summary-counts {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.dispatches-modal .dispatch-summary .summary-brigades {
    columns: 3 140px;
    column-gap: 8px;
    font-size: 14px;
}

@container (max-width: 340px) {
    .dispatches-modal .dispatch-summary .summary-brigades {
        font-size: 13px;
    }
}

.dispatches-modal .dispatch-summary .summary-brigade {
    display: flex;
    align-items: flex-start;
    gap: 0.35em;
    padding: 2px 0;
    break-inside: avoid;
}

.dispatches-modal .dispatch-summary .summary-brigade.no-brigade {
    column-span: all;
}

.dispatches-modal .dispatch-summary .summary-brigade .brigade {
    flex-shrink: 0;
    min-width: 1.35em;
    padding: 2px 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--bs-secondary-color);
}

.dispatches-modal .dispatch-summary .summary-brigade [data-summary-brigade] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s;
}

.dispatches-modal .dispatch-summary .summary-brigade [data-summary-brigade]:active {
    opacity: 0.6;
}

.dispatches-modal .dispatch-summary .summary-brigade .vehicles {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-width: 0;
}

.dispatches-modal .dispatch-summary .summary-brigade .vehicle-chip {
    padding: 2px 0.4em;
    font-size: inherit;
}

.dispatches-modal .dispatch-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dispatches-modal .dispatch {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 5px;
    color: inherit;
    background-color: var(--bs-secondary-bg);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s;
}

.dispatches-modal .dispatch:first-of-type {
    border-radius: 16px 16px 5px 5px;
}

.dispatches-modal .dispatch:last-of-type {
    border-radius: 5px 5px 16px 16px;
}

.dispatches-modal .dispatch:first-of-type:last-of-type {
    border-radius: 16px;
}

.dispatches-modal .dispatch:active {
    background-color: var(--button-active);
}

.dispatches-modal .dispatch .dispatch-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dispatches-modal .dispatch .dispatch-header .line-info {
    flex-shrink: 0;
}

.dispatches-modal .dispatch .dispatch-header .destination {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.dispatches-modal .selection .vehicle-chip {
    background-color: var(--bs-secondary-bg);
}

.dispatches-modal .selection-row.vehicle .vehicle-chip {
    border-radius: 14px;
    font-size: 16px;
}

.dispatches-modal .vehicle-chip[data-vehicle-dispatches] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.dispatches-modal .vehicle-chip[data-vehicle-dispatches]:active {
    background-color: var(--button-active);
}

.dispatches-modal .dispatch:has(.dispatch-header .vehicle-chip:active) {
    background-color: var(--bs-secondary-bg);
}

.dispatches-modal .brigade-link {
    cursor: pointer;
    transition: opacity 0.2s;
}

.dispatches-modal .brigade-link:active {
    opacity: 0.6;
}

.dispatches-modal .dispatch:has(.dispatch-header .brigade-link:active) {
    background-color: var(--bs-secondary-bg);
}

.dispatches-modal .dispatch .dispatch-stops {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dispatches-modal .dispatch .dispatch-stops:not(.single)::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 5px;
    width: 4px;
    background-color: var(--line-color);
}

.dispatches-modal .dispatch .dispatch-stop {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
}

.dispatches-modal .dispatch .dispatch-stop .circle {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 3px solid var(--line-color);
    border-radius: 50%;
    background-color: var(--bs-secondary-bg);
    z-index: 1;
}

.dispatches-modal .dispatch .dispatch-stop .driver-change-icon {
    width: 14px;
    height: 14px;
}

.dispatches-modal .dispatch .dispatch-stop.driver-change .name {
    font-weight: 600;
}

.dispatches-modal .dispatch .dispatch-stop .times {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.dispatches-modal .dispatch .dispatch-stop .time.scheduled {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

.dispatches-modal .dispatch .dispatch-stop .time.delay {
    font-weight: 700;
}

.dispatches-modal .dispatch .dispatch-stop .name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dispatches-modal .route .stop {
    cursor: default;
}

:is(.statistics-menu, .alerts-menu) .menu-header {
    gap: 4px;
}

:is(.statistics-menu, .alerts-menu) .menu-header .modal-back {
    margin-block: -2px;
}

.alerts-menu .menu-header .notifications {
    margin-block: -2px;
    margin-left: auto;
}

.statistics-menu .analytics-menu {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    gap: 0;
    overscroll-behavior: contain;
}

.statistics-menu .delays-menu {
    padding: 0 16px 24px 16px;
    gap: 12px;
    overscroll-behavior: contain;
}

.analytics-menu .periods {
    padding: 0 16px 12px 16px;
}

.analytics-menu .periods .mode-chip {
    padding: 0 14px;
}

.analytics-menu .date-range {
    display: flex;
    justify-content: center;
    padding: 0 16px 12px 16px;
}

.analytics-menu .range-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    background-color: var(--bs-secondary-bg);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s;
}

@media (hover: hover) and (pointer: fine) {
    .analytics-menu .range-toggle:hover {
        background-color: var(--button-hover);
    }
}

.analytics-menu .range-toggle:active {
    background-color: var(--button-active);
}

.analytics-menu .range-toggle .icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background-color: var(--bs-secondary-color);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.analytics-menu .range-toggle .icon.calendar {
    mask-image: url(../images/calendar_icon.svg);
    -webkit-mask-image: url(../images/calendar_icon.svg);
}

.analytics-menu .range-toggle .icon.chevron {
    mask-image: url(../images/chevron_down.svg);
    -webkit-mask-image: url(../images/chevron_down.svg);
}

.analytics-menu .time-frame {
    --thumb: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 16px 12px 16px;
}

.analytics-menu .time-frame-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.analytics-menu .time-range-label {
    color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
}

.analytics-menu .time-range {
    position: relative;
    padding: 0 calc(var(--thumb) / 2);
}

.analytics-menu .time-range .hours {
    display: flex;
    gap: 2px;
    height: 32px;
}

.analytics-menu .time-range .hours > span {
    display: flex;
    flex: 1;
    align-items: flex-end;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.analytics-menu .time-range .hours > span::before {
    content: "";
    flex: 1;
    height: max(2px, calc(var(--trips) * 100%));
    border-radius: 2px 2px 0 0;
    background-color: var(--bs-secondary-bg);
}

.analytics-menu .time-range .hours > span.in::before {
    background-color: rgba(var(--bs-primary-rgb), 0.6);
}

@media (hover: hover) and (pointer: fine) {
    .analytics-menu .time-range .hours > span:hover::before {
        background-color: var(--button-hover);
    }

    .analytics-menu .time-range .hours > span.in:hover::before {
        background-color: var(--bs-primary);
    }
}

.analytics-menu .time-range .track {
    position: relative;
    height: var(--thumb);
}

.analytics-menu .time-range .track::before,
.analytics-menu .time-range .track .fill {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    height: 4px;
    border-radius: 2px;
}

.analytics-menu .time-range .track::before {
    left: 0;
    right: 0;
    background-color: var(--bs-secondary-bg);
}

.analytics-menu .time-range .track .fill {
    left: calc(var(--start, 0) * 100%);
    right: calc((1 - var(--end, 1)) * 100%);
    background-color: var(--bs-primary);
}

.analytics-menu .time-range input {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--thumb);
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.analytics-menu .time-range input::-webkit-slider-runnable-track {
    height: 100%;
    background: none;
}

.analytics-menu .time-range input::-moz-range-track {
    background: none;
}

.analytics-menu .time-range input::-webkit-slider-thumb {
    width: var(--thumb);
    height: var(--thumb);
    border: 3px solid var(--bs-primary);
    border-radius: 50%;
    background-color: white;
    box-shadow: var(--shadow-marker);
    pointer-events: auto;
    cursor: grab;
    -webkit-appearance: none;
    appearance: none;
}

.analytics-menu .time-range input::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--thumb);
    height: var(--thumb);
    border: 3px solid var(--bs-primary);
    border-radius: 50%;
    background-color: white;
    box-shadow: var(--shadow-marker);
    pointer-events: auto;
    cursor: grab;
}

.analytics-menu .time-range input:active::-webkit-slider-thumb {
    cursor: grabbing;
}

.analytics-menu .time-range input:active::-moz-range-thumb {
    cursor: grabbing;
}

.analytics-menu .time-range input:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--bs-body-color);
    outline-offset: 2px;
}

.analytics-menu .time-range input:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--bs-body-color);
    outline-offset: 2px;
}

.analytics-menu .time-scale {
    position: relative;
    height: 14px;
    margin: -4px calc(var(--thumb) / 2) 0 calc(var(--thumb) / 2);
    font-size: 11px;
    line-height: 14px;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.analytics-menu .time-scale span {
    position: absolute;
    left: calc(var(--at) * 100%);
    transform: translateX(-50%);
}

.analytics-menu .time-presets {
    display: flex;
    gap: 6px;
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.analytics-menu .time-presets::-webkit-scrollbar {
    display: none;
}

.analytics-menu .time-presets .mode-chip {
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    font-size: 0.875rem;
    white-space: nowrap;
}

.analytics-menu .time-presets .mode-chip:first-child {
    margin-left: auto;
}

.analytics-menu .time-presets .mode-chip:last-child {
    margin-right: auto;
}

.line-picker {
    display: flex;
    flex-direction: column;
}

.line-picker-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 20px;
    border: none;
    border-radius: 16px;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .line-picker-header:hover {
        background-color: var(--button-hover);
    }
}

.line-picker-header:active {
    background-color: var(--button-active);
}

.line-picker-header .title {
    flex: 1 1 auto;
    min-width: 0;
}

.line-picker-header .count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 12px;
    font-weight: 700;
}

.line-picker-header .chevron {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: var(--bs-body-color);
    mask-image: url(../images/chevron_down.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(../images/chevron_down.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transition: transform 0.2s;
}

.line-picker.expanded .line-picker-header .chevron {
    transform: rotate(180deg);
}

.line-picker-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.line-picker.expanded .line-picker-collapse {
    grid-template-rows: 1fr;
}

.line-picker-inner {
    min-height: 0;
    overflow: hidden;
}

.analytics-menu .line-picker .lines-list {
    padding-top: 12px;
}

.analytics-menu .notice {
    flex: 1 1 auto;
}

.analytics-menu .notice .last-run {
    max-width: 260px;
    margin-top: -4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.analytics-menu .notice .action-button {
    width: auto;
    padding: 0 20px;
    font-size: 15px;
}

.analytics-menu .report {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 24px 16px;
    transition: opacity 0.2s;
}

.analytics-menu .report:empty {
    display: none;
}

.analytics-menu .report.loading {
    opacity: 0.5;
    pointer-events: none;
}

.analytics-menu .headline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--on-time-color) 22%, var(--bs-secondary-bg)), var(--bs-secondary-bg) 75%);
}

.analytics-menu .headline .score {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.analytics-menu .headline .score .value {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.analytics-menu .headline .score .value small {
    font-size: 16px;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.analytics-menu .headline .split,
.analytics-menu .headline .trend {
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.analytics-menu .headline .trend {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.analytics-menu .headline .trend b {
    font-size: 15px;
    color: var(--bs-body-color);
}

.analytics-menu .headline .trend.up b {
    color: var(--delay-group-none);
}

.analytics-menu .headline .trend.down b {
    color: var(--delay-group-3);
}

.analytics-menu .headline .period {
    margin-top: -6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.analytics-menu .headline .highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.analytics-menu .headline .highlight {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    border-radius: 14px;
    background-color: var(--bs-body-bg);
    -webkit-tap-highlight-color: transparent;
}

.analytics-menu .headline .highlight:is([data-date], [data-route], [data-hour]) {
    cursor: pointer;
}

.analytics-menu .headline .highlight .name,
.analytics-menu .headline .highlight .details {
    font-size: 12px;
    color: var(--bs-secondary-color);
}

.analytics-menu .headline .highlight .name {
    font-weight: 600;
}

.analytics-menu .headline .highlight .value {
    font-size: 16px;
    font-weight: 700;
}

:is(.delays-menu, .analytics-menu) .section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 16px;
    background-color: var(--bs-secondary-bg);
}

:is(.delays-menu, .analytics-menu) .section .section-title {
    font-weight: 700;
    line-height: 1.2;
}

:is(.delays-menu, .analytics-menu) .section .hint {
    margin-top: -6px;
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.analytics-menu .chart {
    position: relative;
    height: 220px;
}

.analytics-menu :is(.delay-bar, .occupancy-bar) {
    display: flex;
    gap: 2px;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--bs-tertiary-bg);
}

.analytics-menu :is(.delay-bar, .occupancy-bar) > span {
    min-width: 2px;
}

.analytics-menu .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
}

.analytics-menu .legend .item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.analytics-menu :is(.legend, .stops-legend) .swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.analytics-menu .legend b {
    font-variant-numeric: tabular-nums;
}

:is(.delays-menu, .analytics-menu) .table-scroll {
    margin: 0 -8px;
    overflow-x: auto;
}

:is(.delays-menu, .analytics-menu) .table-scroll .row {
    --bs-gutter-x: 0;
}

:is(.delays-menu, .analytics-menu) .table-scroll .dt-layout-full {
    overflow-x: auto;
}

:is(.delays-menu, .analytics-menu) .stats-table {
    --bs-table-bg: transparent;
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
}

:is(.delays-menu, .analytics-menu) .stats-table :is(th, td) {
    padding: 6px 8px;
    vertical-align: middle;
}

:is(.delays-menu, .analytics-menu) .stats-table thead th.dt-type-numeric .dt-column-header {
    flex-direction: row;
}

:is(.delays-menu, .analytics-menu) .stats-table .numeric {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

:is(.delays-menu, .analytics-menu) .stats-table tbody tr {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    :is(.delays-menu, .analytics-menu) .stats-table tbody tr:hover > td {
        background-color: var(--bs-tertiary-bg);
    }
}

:is(.delays-menu, .analytics-menu) .stats-table tbody tr:active > td {
    background-color: var(--button-active);
}

.analytics-menu :is(.punctuality, .busy) {
    display: flex;
    align-items: center;
    gap: 8px;
}

.analytics-menu :is(.punctuality .delay-bar, .busy .occupancy-bar) {
    flex: 1 0 64px;
    height: 8px;
    border-radius: 4px;
    gap: 1px;
}

.analytics-menu :is(.punctuality, .busy) .numeric {
    min-width: 3em;
}

.analytics-menu :is(.patterns, .variants, .heatmap-metrics) {
    justify-content: flex-start;
}

.analytics-menu :is(.patterns, .variants, .heatmap-metrics) .mode-chip {
    max-width: 100%;
    padding: 0 14px;
}

.analytics-menu :is(.patterns, .variants, .heatmap-metrics) .mode-chip.active {
    background-color: var(--bs-primary);
    color: white;
}

.analytics-menu :is(.patterns, .variants, .heatmap-metrics) .mode-chip .headsign {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-menu .variants .mode-chip {
    height: 30px;
    padding: 0 12px;
    font-size: 0.8125rem;
}

.analytics-menu .stop-delays .stops {
    display: flex;
    flex-direction: column;
}

.analytics-menu .stop-delays .stop {
    display: flex;
    padding: 6px 0;
}

.analytics-menu .stop-delays .graph-indicators {
    margin: -6px 10px -6px 0;
}

.analytics-menu .stop-delays .graph-indicators .circle {
    background-color: var(--bs-secondary-bg);
}

.analytics-menu .stop-delays .stop-details {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.analytics-menu .stop-delays .stop.few .stop-details {
    opacity: 0.5;
}

.analytics-menu .stop-delays .stop.skipped .stop-details {
    opacity: 0.4;
}

.analytics-menu .stop-delays .stop.skipped .delay-bar {
    visibility: hidden;
}

.analytics-menu .stop-delays .stop.skipped .graph-indicators .circle,
.analytics-menu .stops-legend .dot.skipped {
    border-color: color-mix(in srgb, var(--line-color) 35%, var(--bs-secondary-bg));
}

.analytics-menu .stop-delays .stop-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 15px;
    line-height: 1.2;
}

.analytics-menu .stop-delays .stop-row .name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-menu .stop-delays .stop-code {
    font-size: 12px;
    color: var(--bs-secondary-color);
}

.analytics-menu .stop-delays .crowding {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
}

.analytics-menu .stop-delays .crowding .occupancy-bar {
    width: 40px;
    height: 6px;
    border-radius: 3px;
    gap: 1px;
}

.analytics-menu .stop-delays .delay {
    flex-shrink: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.analytics-menu .stop-delays .delay-bar {
    height: 6px;
    border-radius: 3px;
}

.analytics-menu .stops-legend {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--bs-secondary-color);
}

.analytics-menu .stops-legend .sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.analytics-menu .stops-legend .bar {
    width: 40px;
    height: 6px;
    border-radius: 3px;
}

.analytics-menu .stops-legend .levels {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 4px;
}

.analytics-menu .stops-legend .levels > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.analytics-menu .stops-legend .dot {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 3px solid var(--line-color);
    border-radius: 50%;
    opacity: 0.5;
}

.analytics-menu .stops-legend .dot.skipped {
    opacity: 1;
}

[data-bs-theme=dark] .analytics-menu .stop-delays .stops-legend.night {
    --line-color: var(--night-line-casing) !important;
}

.analytics-menu .heatmap-view {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analytics-menu .legend .swatch.few {
    background-color: var(--delay-group-none);
    opacity: 0.4;
}

.analytics-menu .legend .item.scale {
    flex: 1 1 200px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-width: 320px;
}

.analytics-menu .legend .gradient {
    height: 10px;
    border-radius: 3px;
}

.analytics-menu .legend .ticks {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
}

.analytics-menu .heatmap {
    display: grid;
    grid-template-columns: clamp(96px, 38%, 240px) repeat(var(--hours), minmax(0, 1fr));
    grid-auto-rows: 18px;
    gap: 2px;
    font-size: 12px;
    line-height: 18px;
}

.analytics-menu .heatmap :is(.corner, .hour) {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bs-secondary-bg);
}

.analytics-menu .heatmap .hour {
    display: flex;
    justify-content: center;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--bs-secondary-color);
}

.analytics-menu .heatmap .stop {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding-right: 4px;
    white-space: nowrap;
}

.analytics-menu .heatmap .name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-menu :is(.heatmap, .heatmap-tooltip) .stop-code {
    flex-shrink: 0;
    font-size: 0.8em;
    font-weight: 400;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.analytics-menu .heatmap .cell {
    border-radius: 3px;
    background-color: var(--bs-tertiary-bg);
}

.analytics-menu .heatmap .cell.filled {
    cursor: pointer;
}

.analytics-menu .heatmap .cell.few {
    opacity: 0.4;
}

.analytics-menu .heatmap .cell.active {
    opacity: 1;
    outline: 2px solid var(--bs-body-color);
    outline-offset: -1px;
}

.analytics-menu .heatmap-tooltip {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: max-content;
    max-width: min(260px, 100%);
    padding: 8px 10px;
    border-radius: 12px;
    background-color: var(--bs-body-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    font-size: 13px;
    line-height: 1.3;
    pointer-events: none;
}

.analytics-menu .heatmap-tooltip .title {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.analytics-menu .heatmap-tooltip .time {
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.analytics-menu .heatmap-tooltip .detail {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.analytics-menu .heatmap-tooltip b {
    font-variant-numeric: tabular-nums;
}

.analytics-menu .notes {
    padding: 0 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--bs-secondary-color);
}

@media (max-width: 600px) {
    .analytics-menu .chart {
        height: 200px;
    }

    .analytics-menu :is(.punctuality .delay-bar, .busy .occupancy-bar) {
        display: none;
    }

    .analytics-menu .heatmap {
        gap: 1px;
    }

    .analytics-menu .heatmap .hour:not(.major) {
        color: transparent;
    }

    .analytics-menu .heatmap .hour.major {
        z-index: 2;
    }
}

.timetable-modal {
    height: 85%;
}

.modal-base.page {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding-inline: max(0px, calc((100% - 1000px) / 2));
}

:is(.modal-base, .menu) .line-tabs {
    display: flex;
    flex-shrink: 0;
    margin: 0 16px 12px 16px;
    border-bottom: 1px solid var(--bs-border-color);
}

:is(.modal-base, .menu) .line-tabs:empty {
    display: none;
}

:is(.modal-base, .menu) .line-tabs .line-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 8px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bs-secondary-color);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s, border-color 0.2s;
}

:is(.modal-base, .menu) .line-tabs .line-tab.active {
    color: var(--bs-body-color);
    border-bottom-color: var(--bs-primary);
}

@media (hover: hover) and (pointer: fine) {
    :is(.modal-base, .menu) .line-tabs .line-tab:not(.active):hover {
        color: var(--bs-body-color);
    }
}

.menu .line-tabs {
    justify-content: center;
}

.menu .line-tabs .line-tab {
    flex: 0 1 200px;
}

.timetable-modal .list .stops-actions {
    padding: 0 16px 12px 16px;
}

.timetable-modal .list .stops-actions .show-on-map {
    max-width: 360px;
    margin: 0 auto;
}

.timetable-modal .list > .route {
    padding-bottom: 16px;
}

.timetable-modal .list > .brigade-list {
    padding: 0 0 16px 0;
}

.timetable-trip-modal .header .line-info {
    flex: 1 1 auto;
}

.timetable-trip-modal .trip-actions {
    flex-shrink: 0;
    padding: 0 16px 8px 16px;
}

.timetable-trip-modal .trip-actions .show-on-map {
    max-width: 360px;
    margin: 0 auto;
}

.timetable-trip-modal .content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 120px;
}

.timetable-trip-modal .route {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 16px;
}

.timetable-trip-modal .route .stop {
    cursor: default;
}

.timetable-trip-modal .route .stop.selected {
    background-color: var(--bs-tertiary-bg);
}

.timetable-trip-modal .route .stop.selected .stop-indicators .circle {
    background-color: var(--line-color);
}

.timetable-trip-modal .route .stop.selected .stop-info {
    font-weight: 700;
}

.timetable-trip-modal .route .stop .travel-time {
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.timetable-trip-modal .route .stop.selected .travel-time {
    font-weight: 700;
}

.timetable-trip-modal .route .stop.departed .travel-time {
    color: var(--bs-secondary-color);
}

.timetable-trip-modal .route .stop .arrival-details .time {
    font-variant-numeric: tabular-nums;
}

.timetable-trip-modal .route .stop.cancelled .arrival-details .time {
    text-decoration: line-through;
}

.timetable-modal .header .modal-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1 1 auto;
    column-gap: 8px;
    row-gap: 2px;
    min-width: 0;
    line-height: 1.2;
}

.timetable-modal .header .modal-title .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.timetable-modal.route .header .modal-title {
    flex-wrap: nowrap;
}

.timetable-modal.route .header .subject {
    flex-shrink: 0;
}

.timetable-modal.route .header .modal-title .title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.timetable-modal .header .subject {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.timetable-modal .header .subject:empty {
    display: none;
}

.timetable-modal .header .subject .stop-name {
    overflow-wrap: anywhere;
}

.timetable-modal .header .subject .stop-code {
    font-size: 0.8em;
    font-weight: 400;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.timetable-modal .directions {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
    width: calc(100% - 32px);
    max-width: 640px;
    margin: 0 auto 8px auto;
    padding: 4px;
    border-radius: 22px;
    background-color: var(--bs-secondary-bg);
}

.timetable-modal .directions .direction {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 18px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--bs-secondary-color);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.timetable-modal .directions .direction .headsign {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.timetable-modal .directions .direction.active {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: default;
}

[data-bs-theme=dark] .timetable-modal .directions .direction.active {
    background-color: var(--button-active);
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    .timetable-modal .directions .direction:not(.active):hover {
        color: var(--bs-body-color);
    }
}

.timetable-modal .directions .direction:not(.active):active {
    background-color: rgba(var(--button-hover-rgb), 0.6);
}

.timetable-modal :is(.views, .ways) {
    flex-shrink: 0;
    padding: 0 16px 8px 16px;
}

.timetable-modal .ways {
    flex-wrap: nowrap;
}

.timetable-modal :is(.views, .ways) .mode-chip {
    min-width: 0;
    padding: 0 14px;
}

.timetable-modal .ways .mode-chip {
    height: auto;
    min-height: 36px;
    padding: 6px 14px;
    line-height: 1.25;
}

.timetable-modal .ways .mode-chip .headsign {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
}

.timetable-modal .ways .mode-chip {
    min-width: auto;
}

.timetable-modal .ways .mode-chip .headsign {
    overflow-wrap: break-word;
}

:is(.timetable-modal, .brigade-modal) .lines {
    flex-shrink: 0;
    margin-bottom: 4px;
    font-size: 14px;
}

:is(.timetable-modal, .brigade-modal) .lines .lines-scroller {
    display: flex;
    padding: 4px 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

:is(.timetable-modal, .brigade-modal) .lines .lines-scroller::-webkit-scrollbar {
    display: none;
}

.timetable-modal .stop-row {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin: 0 16px 8px 16px;
}

.timetable-modal .stop-select {
    flex: 1 1 0;
    min-width: 0;
}

.filtering-modal .delay-select {
    margin: 0 12px;
}

:is(.timetable-modal .stop-select, .alert-filters .filter-select, .filtering-modal .delay-select) {
    position: relative;
}

:is(.timetable-modal .stop-select, .alert-filters .filter-select, .filtering-modal .delay-select) select {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 40px;
    border: none;
    border-radius: 18px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: 0.9375rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s;
}

:is(.timetable-modal .stop-select, .alert-filters .filter-select, .filtering-modal .delay-select) select:focus-visible {
    box-shadow: 0 0 0 2px var(--bs-primary);
}

@media (hover: hover) and (pointer: fine) {
    :is(.timetable-modal .stop-select, .alert-filters .filter-select, .filtering-modal .delay-select) select:hover {
        background-color: var(--button-hover);
    }
}

:is(.timetable-modal .stop-select, .alert-filters .filter-select, .filtering-modal .delay-select)::before,
:is(.timetable-modal .stop-select, .alert-filters .filter-select, .filtering-modal .delay-select)::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background-color: var(--bs-secondary-color);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    pointer-events: none;
    z-index: 1;
}

.timetable-modal .stop-select::before {
    left: 14px;
    mask-image: url(../images/stop_icon.svg);
    -webkit-mask-image: url(../images/stop_icon.svg);
}

.alert-filters .filter-select::before {
    left: 14px;
    mask-image: url(../images/filter_icon.svg);
    -webkit-mask-image: url(../images/filter_icon.svg);
}

.filtering-modal .delay-select::before {
    left: 14px;
    mask-image: url(../images/clock_alert_icon.svg);
    -webkit-mask-image: url(../images/clock_alert_icon.svg);
}

.filtering-modal .delay-select select {
    background-color: var(--bs-secondary-bg);
}

:is(.timetable-modal .stop-select, .alert-filters .filter-select, .filtering-modal .delay-select)::after {
    right: 14px;
    mask-image: url(../images/chevron_down.svg);
    -webkit-mask-image: url(../images/chevron_down.svg);
}

.timetable-modal .stop-row :is(.stop-timetable, .stop-board) {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bs-tertiary-bg);
    cursor: pointer;
    transition: background-color 0.2s;
}

.timetable-modal .stop-row :is(.stop-timetable, .stop-board)::before {
    content: "";
    position: absolute;
    inset: 9px;
    background-color: var(--bs-body-color);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.timetable-modal .stop-row .stop-timetable::before {
    mask-image: url(../images/calendar_icon.svg);
    -webkit-mask-image: url(../images/calendar_icon.svg);
}

.timetable-modal .stop-row .stop-board::before {
    mask-image: url(../images/map_icon.svg);
    -webkit-mask-image: url(../images/map_icon.svg);
}

.timetable-modal .stop-row :is(.stop-timetable, .stop-board):focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bs-primary);
}

@media (hover: hover) and (pointer: fine) {
    .timetable-modal .stop-row :is(.stop-timetable, .stop-board):hover {
        background-color: var(--button-hover);
    }
}

.timetable-modal .stop-row :is(.stop-timetable, .stop-board):active {
    background-color: var(--button-active);
}

.timetable-modal .summary {
    flex-shrink: 0;
    padding: 0 16px 8px 16px;
    font-size: 13px;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.timetable-modal .timetable-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 195px;
}

.timetable-modal .list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 16px 24px 16px;
}

.timetable-modal .notice {
    flex: 1 1 auto;
}

.timetable-modal .hour-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    background-color: var(--bs-secondary-bg);
    font-variant-numeric: tabular-nums;
}

.timetable-modal .hour-table tr + tr > * {
    border-top: 1px solid var(--bs-border-color);
}

.timetable-modal .hour-table th.hour {
    width: 3.25em;
    padding: 4px;
    border-right: 1px solid var(--bs-border-color);
    vertical-align: top;
    font-size: 16px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
    white-space: nowrap;
    transition: color 0.2s;
}

.timetable-modal .hour-table th.hour .label {
    position: sticky;
    top: 4px;
    display: block;
}

.timetable-modal :is(.hour-table th.hour .label, .summary, .line-card-summary) sup {
    margin-left: 1px;
    font-size: 10px;
    font-weight: 600;
    line-height: 0;
    color: var(--bs-secondary-color);
}

.timetable-modal .line-card .hour-table th.hour .label {
    top: calc(var(--header-height, 0px) + 4px);
}

.timetable-modal .hour-table tr.past th.hour {
    color: var(--bs-tertiary-color);
}

.timetable-modal .hour-table.columns {
    table-layout: fixed;
}

.timetable-modal .hour-table.columns th.hour {
    position: sticky;
    top: 0;
    z-index: 1;
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-secondary-bg);
}

.timetable-modal .hour-table.columns th.hour:first-child {
    border-top-left-radius: 16px;
}

.timetable-modal .hour-table.columns th.hour:last-child {
    border-top-right-radius: 16px;
}

.timetable-modal .line-card .hour-table.columns th.hour {
    top: var(--header-height, 0px);
}

.timetable-modal .hour-table.columns th.hour .label {
    position: static;
}

.timetable-modal .hour-table.columns :is(th, td) + :is(th, td) {
    border-left: 1px solid var(--bs-border-color);
}

.timetable-modal .hour-table.columns th.hour.past {
    color: var(--bs-tertiary-color);
}

.timetable-modal .hour-table.columns td {
    padding: 6px 2px;
    vertical-align: top;
}

.timetable-modal .hour-table.columns .minutes {
    flex-direction: column;
    align-items: center;
}

.timetable-modal .hour-table td {
    padding: 4px 8px;
}

.timetable-modal .minutes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.timetable-modal .minute {
    min-width: 2.4em;
    padding: 6px 5px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: inherit;
    text-decoration: none;
    background-color: var(--bs-body-bg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

.timetable-modal .minute sup {
    margin-left: 1px;
    font-size: 10px;
    font-weight: 700;
    line-height: 0;
}

.timetable-modal .minute.variant {
    color: var(--delay-delayed);
}

@media (hover: hover) and (pointer: fine) {
    .timetable-modal .minute:not(.next):hover {
        background-color: var(--button-hover);
    }
}

.timetable-modal .minute:not(.next):active {
    background-color: var(--button-active);
}

.timetable-modal .minute.past {
    opacity: 0.45;
}

.timetable-modal .minute.cancelled {
    text-decoration: line-through;
    opacity: 0.6;
}

.timetable-modal .minute.cancelled.past {
    opacity: 0.35;
}

.timetable-modal .minute.next {
    background-color: var(--bs-primary);
    color: white;
}

.timetable-modal .minute.next.variant {
    background-color: var(--delay-delayed);
}

[data-bs-theme=dark] .timetable-modal .minute.next.variant,
[data-bs-theme=dark] .timetable-modal .matrix table.trips thead th.trip.next.variant {
    background-color: color-mix(in srgb, var(--delay-delayed) 70%, black);
}

.timetable-modal .hour-table.badges .minutes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--chip-width), 1fr));
}

.timetable-modal .hour-table.badges .minute {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 4px 5px 4px;
    line-height: 18px;
}

.timetable-modal .line-info.tiny {
    font-size: 10px;
}

.timetable-modal .line-info.tiny .line .icon {
    display: none;
}

.timetable-modal .minute.next .line-info.tiny .number {
    box-shadow: 0 0 0 1.5px white;
}

.timetable-modal .legend {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 8px;
    padding: 12px 4px 0 4px;
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.timetable-modal .legend.badges {
    grid-template-columns: auto auto minmax(0, 1fr);
}

.timetable-modal .legend :is(.legend-group, .entries, .entry) {
    display: contents;
}

.timetable-modal .legend .title {
    grid-column: 1 / -1;
    font-weight: 700;
}

.timetable-modal .legend .legend-group > .line-info {
    grid-column: 1;
}

.timetable-modal .legend .entry .minute {
    grid-column: 1;
    justify-self: start;
}

.timetable-modal .legend.badges .entry .minute {
    grid-column: 2;
}

.timetable-modal .legend .entry .text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.timetable-modal .legend .minute {
    min-width: 2.75em;
    padding: 1px 5px;
    font-size: 13px;
    line-height: 18px;
    background-color: var(--bs-secondary-bg);
    cursor: default;
    pointer-events: none;
}

.timetable-modal .legend .minute.next {
    background-color: var(--bs-primary);
}
.timetable-modal .matrix-legend {
    flex-shrink: 0;
    max-height: 30%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 16px 12px 16px;
    box-shadow: inset 0 1px 0 var(--bs-border-color);
}

.timetable-modal .matrix-legend .legend {
    padding-top: 8px;
}

.timetable-modal .line-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timetable-modal .line-card + .line-card {
    margin-top: 24px;
}

.timetable-modal .line-card.continued {
    margin-top: 16px;
}

.timetable-modal .line-card-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 4px;
    background-color: var(--bs-body-bg);
}

.timetable-modal .line-card-header .line-info {
    flex-shrink: 0;
}

.timetable-modal .line-card-header .destination {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.timetable-modal .line-card-summary {
    margin-top: -6px;
    padding: 0 4px;
    font-size: 13px;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.timetable-modal .line-card .legend {
    padding-top: 4px;
}

.timetable-modal .matrix {
    flex: 1 1 auto;
    min-height: 0;
}

.timetable-modal .matrix .matrix-scroller {
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
}

.timetable-modal .matrix .scroll-edge {
    bottom: auto;
    z-index: 4;
    height: 36px;
    padding: 0 8px;
}

.timetable-modal .matrix .scroll-edge.start {
    left: var(--sticky-width, 0px);
}

.timetable-modal .matrix .scroll-edge.more {
    background: none;
}

.timetable-modal .matrix .scroll-edge.more::before {
    content: none;
}

.timetable-modal .matrix table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.timetable-modal .matrix :is(th, td) {
    height: 32px;
    padding: 0 8px;
    white-space: nowrap;
    text-align: center;
    background-color: var(--bs-body-bg);
    transition: background-color 0.2s;
}

.timetable-modal .matrix tbody tr:nth-child(odd) > * {
    background-color: var(--bs-tertiary-bg);
}

.timetable-modal .matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 36px;
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

.timetable-modal .matrix tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-left: 16px;
    text-align: left;
    font-weight: 600;
    box-shadow: inset -1px 0 0 var(--bs-border-color);
}

.timetable-modal .matrix thead th.corner {
    left: 0;
    z-index: 3;
    box-shadow: inset -1px -1px 0 var(--bs-border-color);
}

.timetable-modal .matrix tbody th .stop {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.timetable-modal .matrix tbody th .name {
    max-width: min(150px, 32vw);
    overflow: hidden;
    text-overflow: ellipsis;
}

.timetable-modal .matrix tbody th .stop-code {
    flex-shrink: 0;
    font-size: 0.8em;
    font-weight: 400;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.timetable-modal .matrix tbody tr.branch th .stop {
    padding-left: 10px;
}

.timetable-modal .matrix tbody tr.branch th .name {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.timetable-modal .matrix table.trips {
    --time-color: var(--bs-body-color);
}

.timetable-modal .matrix table.trips :is(td, th.trip).variant {
    --time-color: var(--delay-delayed);
    color: var(--time-color);
}

.timetable-modal .matrix th.trip {
    min-width: 52px;
    cursor: pointer;
}

.timetable-modal .matrix th.trip a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.timetable-modal .matrix th.trip .icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background-color: var(--time-color);
    mask-image: url(../images/trip_icon.svg);
    -webkit-mask-image: url(../images/trip_icon.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.timetable-modal .matrix th.trip:not(.variant) .icon {
    background-color: var(--bs-secondary-color);
}

.timetable-modal .matrix th.trip sup {
    margin-left: 2px;
    font-size: 11px;
    font-weight: 700;
    line-height: 0;
}

.timetable-modal .matrix table.trips td:not(:empty) {
    cursor: pointer;
}

.timetable-modal .matrix table.trips td sup {
    margin-left: 1px;
    font-size: 10px;
    font-weight: 600;
    line-height: 0;
    color: var(--bs-secondary-color);
}

.timetable-modal .matrix table.trips td:is(.past, .cancelled) {
    color: color-mix(in srgb, var(--time-color) 50%, transparent);
}

.timetable-modal .matrix table.trips .cancelled {
    text-decoration: line-through;
}

.timetable-modal .matrix th.trip:is(.past, .cancelled) .icon {
    opacity: 0.45;
}

.timetable-modal .matrix table.trips .next,
.timetable-modal .matrix table.trips tbody tr:nth-child(odd) > .next {
    background-color: var(--bs-primary-bg-subtle);
    font-weight: 700;
}

.timetable-modal .matrix table.trips thead th.trip.next {
    --time-color: white;
    background-color: var(--bs-primary);
    color: white;
}

.timetable-modal .matrix table.trips thead th.trip.next.variant {
    background-color: var(--delay-delayed);
}

.timetable-modal .matrix table.trips thead th.trip.next .icon {
    background-color: white;
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .timetable-modal .matrix table.trips td:not(:empty):hover,
    .timetable-modal .matrix table.trips th.trip:not(.next):hover {
        background-color: var(--button-hover);
    }
}

.timetable-modal .matrix table.trips td:not(:empty):active,
.timetable-modal .matrix table.trips th.trip:not(.next):active {
    background-color: var(--button-active);
}

.alert-filters .mode-chip {
    padding: 0 14px;
}

.alert-filters .filter-select {
    display: none;
}

@media (max-width: 600px) {
    .alert-filters .mode-filter {
        display: none;
    }

    .alert-filters .filter-select {
        display: block;
    }
}

.alerts-menu .alerts-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.alert-card.severe {
    --alert-color: var(--delay-delayed);
}

.alert-card.info {
    --alert-color: var(--bs-link-color);
}

.alert-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 16px;
    background-color: var(--bs-secondary-bg);
    user-select: text;
    -webkit-user-select: text;
    scroll-margin-top: 12px;
}

.alert-card.long .alert-title {
    cursor: pointer;
}

.alert-card .alert-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.alert-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-color: var(--alert-color);
    mask: url(../images/alert_icon.svg) center / contain no-repeat;
    -webkit-mask: url(../images/alert_icon.svg) center / contain no-repeat;
}

.alert-card.info .alert-icon {
    mask-image: url(../images/info_icon.svg);
    -webkit-mask-image: url(../images/info_icon.svg);
}

.alert-card.upcoming .alert-icon {
    opacity: 0.55;
}

.alert-card .alert-badge {
    flex-shrink: 0;
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: color-mix(in srgb, var(--alert-color), #000 45%);
    background-color: color-mix(in srgb, var(--alert-color) 40%, #fff);
}

[data-bs-theme=dark] .alert-card .alert-badge {
    color: var(--alert-color);
    background-color: color-mix(in srgb, var(--alert-color) 18%, transparent);
}

.alert-card .alert-meta {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.alert-card .alert-targets,
.search-results .result .stop-lines {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 14px;
}

:is(.alert-card .alert-targets, .search-results .result .stop-lines) .line-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-left: calc(1.5em + 6px);
}

:is(.alert-card .alert-targets, .search-results .result .stop-lines) .line-group .filter-group-icon {
    margin-left: calc(-1.5em - 6px);
}

.search-results .result .stop-lines {
    margin-top: 2px;
    font-size: 12px;
}

.alert-card .line-chip,
.alert-card .alert-stop {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.alert-card .alert-stop {
    padding: 1px 8px;
    border-radius: 8px;
    font-weight: 600;
    background-color: var(--bs-body-bg);
}

.alert-card .alert-agency {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 8px 1px 6px;
    border-radius: 8px;
    font-weight: 600;
    background-color: var(--bs-body-bg);
}

.alert-card .alert-agency .agency-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    mask-image: var(--logo, url(../images/operator_icon.svg));
    -webkit-mask-image: var(--logo, url(../images/operator_icon.svg));
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.alert-card .alert-description {
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.alert-card:not(.open) .alert-description {
    max-height: calc(1.45em * 6);
}

.alert-card.long:not(.open) .alert-description {
    mask-image: linear-gradient(to bottom, #000 60%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
    cursor: pointer;
}

.alert-card .alert-description :is(p, ul, ol) {
    margin: 0 0 6px 0;
}

.alert-card .alert-description :is(ul, ol) {
    padding-left: 20px;
}

.alert-card .alert-description li p {
    margin: 0;
}

.alert-card .alert-description > :last-child {
    margin-bottom: 0;
}

.alert-card .alert-images {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.alert-card .alert-images img {
    display: block;
    height: 140px;
    border-radius: 12px;
    background-color: var(--bs-body-bg);
    cursor: zoom-in;
}

.alert-image-modal-container .modal-backdrop {
    background: rgba(0, 0, 0, 0.85);
}

.alert-image-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: none;
}

.alert-image-track,
.alert-image-slide {
    position: absolute;
    inset: 0;
}

.alert-image-track.animate {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.alert-image-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;
    overflow: hidden;
}

.alert-image-slide[data-slot="-1"] {
    transform: translateX(calc(-100% - 24px));
}

.alert-image-slide[data-slot="1"] {
    transform: translateX(calc(100% + 24px));
}

.alert-image-viewport img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.alert-image-viewport.moving :is(.alert-image-track, img) {
    will-change: transform;
}

.alert-image-viewport.animate img {
    transition: transform 0.2s ease;
}

.alert-image-viewport.zoomed img {
    border-radius: 0;
    cursor: grab;
}

.alert-image-viewport.zoomed:active img {
    cursor: grabbing;
}

.alert-image-controls {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-image-counter {
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
}

.alert-image-nav {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
}

.alert-image-nav.previous {
    left: 12px;
}

.alert-image-nav.next {
    right: 12px;
}

.modal-button.alert-image-nav.previous::before {
    mask-image: url(../images/chevron_left.svg);
    -webkit-mask-image: url(../images/chevron_left.svg);
}

.modal-button.alert-image-nav.next::before {
    mask-image: url(../images/chevron_right.svg);
    -webkit-mask-image: url(../images/chevron_right.svg);
}

.alert-card .alert-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
}

.alert-card .alert-toggle {
    color: var(--bs-link-color);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.alert-card .alert-url,
.alert-card .alert-share {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--bs-link-color);
    text-decoration: none;
}

.alert-card .alert-share {
    margin-left: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.alert-card .alert-url::after,
.alert-card .alert-share::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: currentColor;
    mask: url(../images/external_link_icon.svg) center / contain no-repeat;
    -webkit-mask: url(../images/external_link_icon.svg) center / contain no-repeat;
}

.alert-card .alert-share::before {
    mask-image: url(../images/share_icon.svg);
    -webkit-mask-image: url(../images/share_icon.svg);
}

.alert-card:not(.long) .alert-toggle {
    display: none;
}

.alerts-menu .alerts-page .alert-card {
    cursor: pointer;
}

.alerts-modal .content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
    padding: 0 16px 16px 16px;
    overflow-y: auto;
}

.dropdown-item-icon.alerts {
    mask-image: url(../images/alert_icon.svg);
    -webkit-mask-image: url(../images/alert_icon.svg);
}

.modal-button.alerts-button:not([data-alerts]) {
    display: none;
}

.modal-button.alerts-button::before {
    background-color: var(--alert-color);
    mask-image: url(../images/alert_icon.svg);
    -webkit-mask-image: url(../images/alert_icon.svg);
}

.modal-button.alerts-button[data-alerts=severe]::before {
    background-color: var(--delay-delayed);
}

.modal-button.alerts-button[data-alerts=info]::before {
    background-color: var(--bs-link-color);
    mask-image: url(../images/info_icon.svg);
    -webkit-mask-image: url(../images/info_icon.svg);
}

.popup-modal .more-info[data-alerts]::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--alert-color);
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

.delays-menu {
    user-select: none;
    -webkit-user-select: none;
}

:is(.delays-menu, .analytics-menu) .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

:is(.delays-menu, .analytics-menu) .stats .metric {
    display: flex;
    flex-direction: column;
    background-color: var(--bs-secondary-bg);
    padding: 8px 16px;
    border-radius: 16px;
}

:is(.delays-menu, .analytics-menu) .stats .metric .name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

:is(.delays-menu, .analytics-menu) .stats .metric .value {
    font-size: 18px;
    font-weight: 700;
    margin: auto 0;
}

:is(.delays-menu, .analytics-menu) .stats .metric .details {
    font-size: 13px;
    color: inherit;
}

:is(.delays-menu, .analytics-menu) .stats .metric .details:not(a) {
    color: var(--bs-secondary-color);
}

.delays-menu .stats .metric .details .vehicle-chip {
    margin-top: 0.3em;
    padding: 0 0.5em;
    border-radius: 0.75em;
    font-size: inherit;
}

.delays-menu .stats-table td.text-truncate {
    max-width: 160px;
}

:is(.delays-menu, .analytics-menu) .delay-group-early {
    color: var(--delay-group-early);
}

:is(.delays-menu, .analytics-menu) .delay-group-none {
    color: var(--delay-group-none);
}

:is(.delays-menu, .analytics-menu) .delay-group-1 {
    color: var(--delay-group-1);
}

:is(.delays-menu, .analytics-menu) .delay-group-2 {
    color: var(--delay-group-2);
}

:is(.delays-menu, .analytics-menu) .delay-group-3 {
    color: var(--delay-group-3);
}

:is(.delays-menu, .analytics-menu) .delay-group-4 {
    color: var(--delay-group-4);
}

:is(.delays-menu, .analytics-menu) .delay-group-5 {
    color: var(--delay-group-5);
}

.special-vehicles-modal .vehicles-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: auto;
    gap: 8px;
    padding: 0 16px 16px 16px;
}

.special-vehicles-modal .vehicles-list .vehicle {
    position: relative;
    width: 250px;
    height: 170px;
    margin: 8px;
    border-radius: 16px;
    /* border: 1px solid rgba(196, 30, 58, 0.25); */
    border: 1px solid rgba(70, 158, 105, 0.25);
    transition: transform 0.2s;
    overflow: hidden;
}

.special-vehicles-modal .vehicles-list .vehicle .vehicle-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.special-vehicles-modal .vehicles-list .vehicle .vehicle-image.appear {
    animation: fadeIn 0.3s ease-out;
}

.special-vehicles-modal .vehicles-list a.vehicle {
    cursor: pointer;
}

.special-vehicles-modal .vehicles-list a.vehicle .status {
    background: rgb(22, 91, 51);
}

.special-vehicles-modal .vehicles-list div.vehicle {
    opacity: 0.6;
}

@media (hover: hover) and (pointer: fine) {
    .special-vehicles-modal .vehicles-list a.vehicle:hover {
        transform: scale(1.02);
        /* box-shadow: rgba(196, 30, 58, 0.25) 0px 12px 32px, rgba(22, 91, 51, 0.15) 0px 4px 12px; */
        /* border-color: rgba(196, 30, 58, 0.5); */
        box-shadow: rgba(70, 158, 105, 0.25) 0px 12px 32px;
        border-color: rgba(70, 158, 105, 0.5);
    }
}

.special-vehicles-modal .vehicles-list a.vehicle:active {
    transform: scale(1.02);
    /* box-shadow: rgba(196, 30, 58, 0.25) 0px 12px 32px, rgba(22, 91, 51, 0.15) 0px 4px 12px;
  border-color: rgba(196, 30, 58, 0.5); */
    box-shadow: rgba(70, 158, 105, 0.25) 0px 12px 32px;
    border-color: rgba(70, 158, 105, 0.5);
}

.special-vehicles-modal .vehicles-list .overlay {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    pointer-events: none;
}

.special-vehicles-modal .vehicles-list .model {
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 20px;
    color: white;
}

.special-vehicles-modal .vehicles-list .chip {
    position: absolute;
    top: 12px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px;
}

.special-vehicles-modal .vehicles-list .chip .brigade-number {
    font-size: 12px;
}

.special-vehicles-modal .vehicles-list .chip.left {
    left: 12px;
}

.special-vehicles-modal .vehicles-list .chip.right {
    right: 12px;
}

#specialVehiclesButton {
    display: flex;
    flex-direction: column;
}

/* 125 години трамваен транспорт */
.button:has(.years-125) {
    background: linear-gradient(to bottom, #469e69, #d2791e, #b4af8f);
}

/* 85 години тролейбусен транспорт */
.button:has(.years-85) {
    background: linear-gradient(to bottom, #d15642, #dc9440);
}

.button:has(.years-125):has(.years-85) {
    background: linear-gradient(to bottom, #f7941f, #0095da);
}

.button .icon.years-125 {
    background: transparent url(../images/125_years.png) no-repeat center/contain;
    filter: drop-shadow(1px 1px 1px rgb(0, 0, 0)) drop-shadow(1px 1px 4px rgb(0, 0, 0));
    width: 30px;
    height: 30px;
}

.button .icon.years-85 {
    background: transparent url(../images/85_years.png) no-repeat center/contain;
    filter: drop-shadow(1px 1px 1px rgb(0, 0, 0)) drop-shadow(1px 1px 4px rgb(0, 0, 0));
    width: 22px;
    height: 30px;
}

@media (hover: hover) and (pointer: fine) {
    .button:has(.years-125, .years-85):hover::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 12px;
        pointer-events: none;
    }
}

.button:has(.years-125, .years-85):active::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    pointer-events: none;
}

.pwa-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%);
    width: calc(100% - 40px);
    max-width: 400px;
    padding: 16px;
    background: var(--bs-body-bg);
    border-radius: 20px;
    animation: pwaModal 0.3s ease-out;
    box-shadow: var(--shadow-16);
    user-select: none;
    z-index: 9999;
}

@keyframes pwaModal {
    0% {
        opacity: 0;
        transform: translate(-50%, 100%);
    }

    100% {
        opacity: 1;
        transform: translate(-50%);
    }
}

.pwa-modal .icon {
    width: 64px;
    height: 64px;
    background: url(../images/branding/logo_full.svg) center / contain no-repeat;
    border-radius: 12px;
    box-shadow: var(--shadow-6);
}

.pwa-modal .title {
    font-size: 20px;
    font-weight: 600;
}

.pwa-modal .action-buttons {
    display: flex;
    gap: 16px;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

.action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-radius: 12px;
    font-weight: 600;
    background-color: var(--bs-primary);
    color: white;
    cursor: pointer;
}

.action-button.secondary {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.menu-content .setting-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
}

.menu-content .setting-choice {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-content .setting-choice .subtitle {
    font-weight: 600;
}

.menu-content .setting-choice .options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.menu-content .setting-choice .option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.menu-content .setting-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.menu-content .setting-choice .preview {
    display: block;
    width: 146px;
    height: 90px;
    border: 3px solid transparent;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.15s;
}

.menu-content .setting-choice .option:active .preview {
    transform: scale(0.95);
}

.menu-content .setting-choice input:checked + .preview {
    border-color: var(--bs-primary);
}

.menu-content .setting-choice input:focus-visible + .preview {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.menu-content .setting-choice .preview canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.menu-content .setting-choice .label {
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.menu-content .setting-choice input:checked ~ .label {
    color: var(--bs-body-color);
}

.menu-content :is(.setting-action, .notification-settings) {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-content :is(.setting-action, .notification-settings) .description {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

.menu-content .setting-action .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.menu-content .setting-action .action-button {
    flex: 1 1 auto;
    width: auto;
    padding: 0 16px;
}

.menu-content .notification-settings .subtitle {
    margin-top: 6px;
    font-weight: 600;
}

.menu-content .notification-settings .line-picker-header {
    margin-top: 4px;
}

.menu-content .notification-settings .line-picker-header .title {
    font-size: inherit;
}

.menu-content .notification-settings .line-picker-header .chevron {
    mask-image: url(../images/chevron_right.svg);
    -webkit-mask-image: url(../images/chevron_right.svg);
}

.notification-lines-modal .lines {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 16px 10px 16px;
    overflow-y: auto;
}

.notification-lines-modal .line-chips {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.notification-lines-modal .line-chips.filtering {
    padding-right: 0;
}

.notification-lines-modal .line-chips .line-group {
    flex-wrap: wrap;
    padding-left: calc(1.5em + 6px);
}

.notification-lines-modal .line-chips .line-group .filter-group-icon {
    margin-left: calc(-1.5em - 6px);
}

:root {
    color-scheme: light;
    scrollbar-color: var(--bs-tertiary-color) var(--bs-body-bg);
    
    --bus: #519dd5;
    --bus-dark: #2870a6;
    --tram: var(--bus);
    --tram-dark: var(--bus-dark);
    --trolley: var(--bus);
    --trolley-dark: var(--bus-dark);
    --night: var(--bus);
    --night-dark: var(--bus-dark);
    --cgm-light: #2d54a4;
    --cgm-light-hover: #1f3b73;
    --cgm-dark: #0b265e;

    --text-primary: #e2e3dd;
    --text-secondary: rgba(255, 255, 255, 0.7);

    --button-bg: var(--bs-body-bg); /* #f8f9fa */
    --button-hover: #ced4db;
    --button-active: #b2bdc7;
    --button-hover-rgb: 206, 212, 219;
    --button-active-rgb: 178, 189, 199;

    --delay-none: var(--delay-group-none);
    --delay-early: #ff9500;
    --delay-delayed: #dc3545;

    --alert-color: #f5a800;

    --delay-group-no-data: #6c757d;
    --delay-group-none: #11924b;
    --delay-group-early: #fc3b5a;
    --delay-group-1: #c99414;
    --delay-group-2: #c8690f;
    --delay-group-3: #cd1a0a;
    --delay-group-4: #9e0a39;
    --delay-group-5: #74141d;

    /* --bs-warning: #ffa726 !important; */
    --bs-warning: #e68600 !important;

    /* --shadow-marker: 0px 1px 10px 0px #0000001f, 0px 0px 4px 4px #0003; */
    --shadow-marker: 0px 0px 4px 3px #0003;
    --shadow-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    --shadow-8: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
    --shadow-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);

    --text-halo-width: 1px;
    --text-halo-color: #fff;
    --text-halo: var(--text-halo-width) 0 0 var(--text-halo-color), calc(-1 * var(--text-halo-width)) 0 0 var(--text-halo-color), 0 var(--text-halo-width) 0 var(--text-halo-color), 0 calc(-1 * var(--text-halo-width)) 0 var(--text-halo-color)
}

[data-bs-theme=dark] {
    color-scheme: dark;

    --text-halo-color: #000;

    --button-bg: var(--bs-secondary-bg);
    /* --button-hover: #2b3035; */
    --button-hover: #464e56;
    --button-active: #57616b;
    --button-hover-rgb: 70, 78, 86;
    --button-active-rgb: 87, 97, 107;

    --delay-early: #ffc107;
    --delay-delayed: #ff6966;

    --alert-color: #ffc107;

    --delay-group-early: #f01611;
    --delay-group-none: #28c676;
    --delay-group-1: #fed252;
    --delay-group-2: #ffa245;
    --delay-group-3: #f8754c;
    --delay-group-4: #f53b61;

    --night-line-casing: #808080;
}

[data-bs-theme=dark][data-bs-theme-amoled] {
    --bs-body-bg: #000;
    --bs-secondary-bg: #1a1a1a;
    
    --button-hover: #313131;
    --button-active: #484848;
    --button-hover-rgb: 49, 49, 49;
    --button-active-rgb: 72, 72, 72;
}

[data-bs-theme=dark][data-bs-theme-amoled] .bg-dark {
    background-color: var(--bs-body-bg) !important;
}