#map {
    position: fixed;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
}

body:has(.loading-screen:not(.d-none)) * {
    transition: none !important;
}

.leaflet-zoom-animated {
    will-change: transform;
}

.leaflet-container {
    will-change: transform;
    transform: translateZ(0);
}

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

[data-bs-theme=dark] .leaflet-tile-pane, [data-bs-theme=dark]:not([no-invert]) .leaflet-overlay-pane canvas {
    filter: invert(1) hue-rotate(180deg) contrast(90%) brightness(70%);
}

/* [data-bs-theme=dark] .leaflet-overlay-pane canvas {
    filter: brightness(80%);
} */

/* [data-bs-theme=dark] .leaflet-marker-pane, [data-bs-theme=dark] .leaflet-overlay-pane svg {
    filter: brightness(90%);
} */

.leaflet-control {
    font-weight: 500;
    user-select: none;
    -webkit-user-select: none;
}

.leaflet-right .leaflet-control {
    margin-right: 16px !important;
}

.leaflet-top .leaflet-control {
    margin-top: 16px !important;
}

.leaflet-control-zoom {
    border: none !important;
    border-radius: 12px;
    box-shadow: var(--shadow-6) !important;
}

.leaflet-bar a {
    background-color: var(--button-bg) !important;
    color: var(--bs-body-color) !important;
    border: none !important;
    font-size: 25px !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    transition: background-color 0.3s;
    -webkit-tap-highlight-color: transparent !important;
}

.leaflet-bar a:first-child {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.leaflet-bar a:last-child {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

@media (hover: hover) and (pointer: fine) {
    .leaflet-bar a:hover {
        background-color: var(--button-hover) !important;
    }
}

.leaflet-bar a:active {
    background-color: var(--button-active) !important;
}

.leaflet-tooltip {
    font-weight: 600;
    font-size: 13px;
    border-radius: 12px;
    padding: 10px 20px 10px 20px;
}

.leaflet-popup {
    cursor: default;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;

    .leaflet-popup-tip {
        pointer-events: none;
    }
}

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

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

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

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

.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(.no-popup-anim):not(.leaflet-zoom-active) .vehicle-popup {
    transition: opacity 0.2s linear, transform 0.5s ease-in-out !important;
}

.vehicle-popup .popup-row {
    margin-bottom: 3px;
}

.vehicle-popup .vehicle-popup-header {
    /* min-height: 37.5px; */
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    /* padding-left: 50px; */
    /* padding-left: 65px; */
    margin-bottom: 5px;
}

.vehicle-popup .last-updated {
    font-style: italic;
    color: var(--bs-secondary-color);
}

/* .vehicle-popup .vehicle-popup-header.bus {
    background-image: url(../images/bus_circle.png);
}

.vehicle-popup .vehicle-popup-header.night {
    background-image: url(../images/night_bus_circle.png);
}

.vehicle-popup .vehicle-popup-header.tram {
    background-image: url(../images/tram_circle.png);
}

.vehicle-popup .vehicle-popup-header.trolley {
    background-image: url(../images/trolley_circle.png);
} */

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

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

.popup-row .info {
    user-select: none;
    -webkit-user-select: none;
}

.popup-row .icon {
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-left: 3px;
}

.popup-row .icon:first-child {
    margin-left: 0;
}

.popup-row .icon.speedometer {
    mask-image: url(../images/speedometer_icon.svg);
    width: 18px;
    height: 18px;
}

.popup-row .vehicle-model {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
}

.popup-row .vehicle-model .vehicle-feature-icon {
    display: inline-block;
    background-color: var(--bs-body-color);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 13px;
    height: 13px;
}

.vehicle-feature-icon.low-floor {
    mask-image: url(../images/low_floor_icon.svg);
}

.vehicle-feature-icon.ac {
    mask-image: url(../images/ac_icon.svg);
}

.popup-row .info .speed {
    border-left: none;
    padding-left: 0;
}

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

.leaflet-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);
}

.leaflet-vehicle-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    will-change: transform;
    transform: translateZ(0);
    animation: fadeIn 0.15s ease-in;
}

@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;
} */

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

.shape-stop-label {
    display: flex;
    justify-content: center;
    text-align: center;
    white-space: normal;
    max-width: 150px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    color: var(--bs-body-color);
    font-weight: bold;
}

.vehicle-marker-simple {
    border-radius: 50%;
    /* background-color: var(--bus); */
    box-shadow: var(--shadow-marker);
}

.vehicle-marker:not(.complex) {
    height: 31px;
    width: 31px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 13.4px;
    font-weight: 700;
    color: white;
    /* outline: 2px solid white; */
    box-shadow: var(--shadow-marker);
}

.vehicle-marker:not(.complex).direction {
    border-radius: 0 100% 100% 100%;
}

.vehicle-marker.complex {
    display: flex;
    align-items: center;
    gap: 1px;
    min-height: 22px;
    border-radius: 8px;
    padding: 1px 5px;
    font-size: 13.4px;
    color: white;
    box-shadow: var(--shadow-marker);

    .bearing {
        width: 16px;
        height: 16px;
        mask-size: contain;
        mask-repeat: no-repeat;
        background-color: currentColor;
        mask-image: url(../images/arrow_up.svg);
    }

    .type {
        width: 16px;
        height: 16px;
        /* margin: 0 1px; */
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: currentColor;
    }

    .type.bus {
        mask-image: url(../images/vehicle_icon.svg);
    }

    .type.tram {
        mask-image: url(../images/tram_icon.svg);
    }

    .type.trolley {
        mask-image: url(../images/trolley_icon.svg);
    }

    .type.train {
        /* mask-image: url(../images/train_icon.svg); */
        width: 32px;
        mask-image: url(../images/bdz_logo.svg);
    }

    .info {
        font-size: 11px;
    }
}

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

.button.menu-button {
    z-index: 999 !important;
}

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

    .button {
        z-index: 1;
    }
}

body:has(.topbar-notice:not(.d-none)):not(:has(div.menu:not(.hidden))) .buttons.top-left {
    position: static;
    margin-top: 16px;
    margin-left: 16px;
}

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

.button {
    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);
}

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

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

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

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

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

.button .icon.scroll-down {
    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 {
    position: absolute;
    width: 240px;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0px 16px 16px 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(-240px);
    box-shadow: none;
}

.sidebar-header {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}

.sidebar-header .logo {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-right: 10px;
}

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

.sidebar-header .title-container {
    display: flex;
    flex-direction: column;
}

.sidebar-header .title-container .city-selector {
    display: flex;
    align-items: center;
    gap: 2px;
    /* cursor: pointer; */
}

.sidebar-header .title-container .city-selector .icon {
    display: inline-block;
    background-color: var(--bs-body-color);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    mask-image: url(../images/chevron_down.svg);
}

.sidebar-list {
    display: flex;
    flex-direction: column;
    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;
}

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

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

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

.sidebar-button .icon.route-change {
    mask-image: url(../images/route_change_icon.svg);
}

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

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

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

.sidebar-footer {
    position: absolute;
    bottom: 0;
    padding: 10px;
}

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

.sidebar-footer .credits {
    font-style: italic;
}

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

.sidebar-footer .links .icon {
    width: 30px;
    height: 30px;
}

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

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

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

.sidebar-footer .attribution {
    font-size: 13px;
}

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;
}

.menu-header {
    padding: 16px;
    padding-left: 72px;
    display: flex;
    font-size: 25px;
    font-weight: 700;
}

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

.menu-content .category {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 16px;
    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: 25px;
    color: var(--bs-body-color);
    width: 25px;
    height: 25px;
    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: 5px;
}

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-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: 16px;
    /* 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: 16px;
    padding: 16px;
    gap: 16px;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

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

.topbar-notice {
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    text-align: center;
    padding: 4px;
    font-size: 12px;
    background-color: var(--bs-body-bg);
    cursor: pointer;
}

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

@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);
}

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

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

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

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

.modal-button.reset::before {
    mask-image: url(../images/reset_icon.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);
}

.search-bar {
    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 8px 8px 14px;
    background: none;
    border: none;
}

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

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

[data-bs-theme=dark] .search-bar input::-webkit-search-cancel-button {
    background: url(../images/close_circle_icon_dark_mode.svg) no-repeat 50% 50%;
}

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

.filter-list {
    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-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);
}

.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;

    .number {
        width: 3rem;
    }

    .icon {
        width: 1.5rem;
    }
}

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

.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 .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);
} */

.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: 3px;
    font-size: 14px;
    /* white-space: nowrap; */
}

.vehicle-feature-icon {
    display: inline-block;
    text-align: center;
    background-color: var(--bs-body-color);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    height: 18px;
    width: 18px;
}

.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: 16px 16px 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);
}

.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 .header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    /* padding: 16px 16px 8px 16px; */
    /* padding: 12px 12px 8px 12px; */
    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: calc(8px);
    left: 50%;
    transform: translate(-50%);
    border-radius: 2px;
    background-color: var(--bs-secondary-color);
}

.popup-modal .header .icon:not(.line-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: 10px;
    user-select: none;
    -webkit-user-select: none;
}

.popup-modal .header .icon:not(.line-info .icon):before {
    content: "";
    position: absolute;
    inset: 6px;
    background-color: var(--bs-body-color);
}

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

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

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

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

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

.stop-modal .arrivals, .popup-modal .route {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.history-modal .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

.history-modal .header > .icon::before {
    mask-image: url(../images/history_icon.svg);
}

.history-modal .content {
    padding: 0px 12px 12px 12px;
    gap: 4px;
}

.history-modal .content .inputs {
    display: flex;
    gap: 8px;
    width: 100%;
}

@media (max-width: 600px) {
    .history-modal .content .inputs {
        flex-direction: column;
    }
}

.history-modal .slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.history-modal .slider-container .slider-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
}

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

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

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

    .section:not(.input-container), .active-filters {
        border-radius: 16px;
    }

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

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

    .input-container {
        margin: 0 12px 0 12px;
    }

    .active-filters .list {
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
        /* padding: 0 16px 16px 16px; */

        .filter {
            font-size: 1.125rem;
            height: 1.75rem;
            cursor: pointer;
        }

        .filter:not(.line-info) {
            /* border-radius: 16px; */
            border-radius: 0.4375rem;
            background-color: var(--bs-body-bg);
            padding: 0 8px;
        }
    }

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

        .result {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            padding: 8px 16px;
            border-radius: 24px;
            font-size: 1.125rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }

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

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

.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;
}

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

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

.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;

    .icon {
        width: 24px;
        height: 24px;
        mask-size: contain;
        mask-repeat: no-repeat;
    }

    .icon.trip {
        mask-image: url(../images/trip_icon.svg);
    }

    .icon.vehicle {
        mask-image: url(../images/vehicle_icon.svg);
    }

    .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);
}

.popup-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;
}

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

.popup-modal .route .stop .stop-details {
    flex: 1 1 auto;
}

.popup-modal .route .stop .stop-details .stop-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.popup-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;
}

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

.popup-modal .route .stop .stop-details .stop-info .icon.no-boarding {
    mask-image: url(../images/no_boarding_icon.svg);
    background-color: var(--bs-form-invalid-color);
}

.popup-modal .route .stop .stop-indicators {
    display: flex;
    align-items: center;
    padding-right: 12px;
}

.popup-modal .route .stop .stop-indicators .circle, .brigade-modal .trip .trip-stop .circle {
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #fff;
    border: 3px solid #fff;
    width: 16px;
    height: 16px;
    z-index: 10;
}

.popup-modal .route .stop .stop-indicators .line, .brigade-modal .trip .trip-line {
    position: absolute;
    top: -30px;
    width: 16px;
    height: calc(100%);
    pointer-events: none;
}

.stop-modal .arrivals .arrival .arrival-header, .popup-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 .icon {
    background-image: url(../images/metro_icon_no_fill.svg);
}

[data-bs-theme=dark] .metro-marker, [data-bs-theme=dark] .line-info .line.metro .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 .number:not(:has(.brigade-number))  {
    border-radius: 50% !important;
    width: 1.5rem !important;
}

.line-info.big .line.metro .number:not(:has(.brigade-number))  {
    width: 1.75rem !important;
}

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

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

.stop-modal .arrivals .arrival .arrival-details, .popup-modal .stop .arrival-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.stop-modal .arrivals .arrival .arrival-details, .popup-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, .popup-modal .stop .arrival-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.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);
}

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

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

.arrival-details .delay.delay-none {
    color: var(--delay-none);

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

.arrival-details .delay.delay-early {
    color: var(--delay-early);

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

.arrival-details .delay.delay-delayed {
    color: var(--delay-delayed);

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

.vehicle-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 .number.expand {
    min-width: 3.5rem !important;
    width: auto !important;
    padding: 0 6px;
    border-radius: 0.4375rem !important;
}

.line-info.big .line:not(.metro) .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.metro .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) .line .number.expand {
    min-width: 3rem !important;
    width: auto !important;
    padding: 0 6px;
    border-radius: 0.375rem !important;
}

.line-info:not(.big) .line.metro .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.smol .line .number .brigade-number {
    font-size: 13px !important;
} */

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

    .vehicle-modal .route.night, .trip-modal .route.night {
        .stop .stop-indicators .line {
            box-shadow: 0px 0px 8px 4px #606060;
        }

        .stop:first-of-type .stop-indicators .circle {
            box-shadow: 0px -3px 8px 4px #606060;
        }

        .stop:last-of-type .stop-indicators .circle {
            box-shadow: 0px 3px 8px 4px #606060;
        }
    }
}

.popup-modal .route .stop.departed .stop-details {
    opacity: 0.5;
}

.filter-modal .filter-list .filter, .input-container {
    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, .input-container input {
    width: 100%;
    margin: 0;
    padding: 8px 8px 8px 0px;
    background: none;
    border: none;
}

.filter-modal .filter-list .filter select, .input-container 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,
.input-container 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;
    background: var(--bs-secondary-bg);
    box-shadow: var(--shadow-8);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.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);
}

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

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

.cities-modal .language-buttons {
    position: absolute;
    display: flex;
    gap: 4px;
    top: 24px;
    right: 24px;
}

.cities-modal .language-buttons .language-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--bs-secondary-bg);
    cursor: pointer;
    transition: background-color 0.3s;
}

.cities-modal .language-buttons .language-button:first-of-type {
    border-radius: 12px 5px 5px 12px;
}

.cities-modal .language-buttons .language-button:last-of-type {
    border-radius: 5px 12px 12px 5px;
}

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

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

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

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

.cities-list .city {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    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;
}

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

        .arrow {
            margin-right: -8px;
        }
    }
}

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

    .arrow {
        margin-right: -8px;
    }
}

.cities-list .city .city-info {
    display: flex;
    flex-direction: column;
}

/* .cities-list .city-info .name {
    font-size: 18px;
} */

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

.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;
    transition: margin-right 0.15s;
}

.logo {
    background-color: var(--bs-body-color);
    width: 96px;
    height: 96px;
    mask-image: url(../images/logo.svg);
    mask-size: contain;
    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;
}

.brigade-modal .dates {
    display: flex;
    padding: 0 16px;
    margin-bottom: 8px;

    .dates-scroll {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px;
        transition: background-color 0.3s;
        cursor: pointer;

        .icon {
            display: flex;
            width: 20px;
            height: 20px;
        }
    }

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

    .dates-scroll.left .icon {
        mask-image: url(../images/chevron_left.svg);
    }

    .dates-scroll.right .icon {
        mask-image: url(../images/chevron_right.svg);
    }

    .dates-list {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex: 1 1 auto;
        overflow-x: auto;
        scrollbar-width: none;

        .date {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            padding: 8px 12px;
            line-height: 1.25;
            white-space: nowrap;
            color: var(--bs-secondary-color);
            cursor: pointer;
            transition: background-color 0.3s;

            .day-date {
                font-size: 14px;
                font-variant-numeric: tabular-nums;
                letter-spacing: -0.05em;
            }
            
            .day-name {
                font-size: 12px;
            }
        }

        .date.selected {
            color: var(--bs-body-color);
            border-bottom: 2px solid white;
        }

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

.brigade-modal .lines {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0px 32px 8px 32px;
}

.brigade-modal .trip-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0 16px 16px 16px;
}

.brigade-modal .brigade-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    padding: 0 16px 16px 16px;

    .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;

        .details {
            flex: 1
        }
    }

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

    .brigade:first-of-type:last-of-type  {
        border-radius: 16px;
    }

    .brigade:first-of-type {
        border-radius: 16px 16px 5px 5px;
    }

    .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);

    .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: 20px;
    /* top: 48px; */
    left: 59px;
    height: calc(100% - 40px);
    /* height: calc(100% - 68px); */
}

.brigade-modal .trip .trip-stop {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.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);

    .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;

    .note {
        font-size: 14px;
        color: var(--bs-secondary-color);
    }
}

.vehicle-info-modal .information {
    display: flex;
    flex-direction: column;
    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-info-modal .information .vehicle-image {
    width: 100%;
    height: auto;
    border-radius: 16px;
    margin-top: 8px;
}

.vehicle-info-modal .information .vehicle-image.loading {
    background: var(--bs-secondary-bg);
    animation: loading 1.5s infinite alternate;
}

@keyframes loading {
    0% { background-color: var(--bs-body-bg); }
    50% { background-color: var(--bs-secondary-bg); }
    100% { background-color: var(--bs-body-bg); }
}

.vehicle-info-modal .info-field {
    display: flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: 5px;
    background-color: var(--bs-secondary-bg);

    .icon {
        width: 26px;
        height: 26px;
        margin-right: 16px;
        mask-size: contain;
        mask-repeat: no-repeat;
    }

    .external-link {
        width: 20px;
        height: 20px;
        margin-right: 0;
        margin-left: auto;
        mask-image: url(../images/external_link_icon.svg) !important;
    }

    .details {
        display: flex;
        flex-direction: column;
    }

    .name {
        font-weight: 500;
    }

    .value {
        font-size: 14px;
        color: var(--bs-secondary-color);

        .vehicle-feature-icon {
            background-color: var(--bs-secondary-color);
        }
    }
}

.vehicle-info-modal .info-field.model .icon {
    mask-image: url(../images/model_icon.svg);
}

.vehicle-info-modal .info-field.production-year .icon {
    mask-image: url(../images/calendar_icon.svg);
}

.vehicle-info-modal .info-field.features .icon {
    mask-image: url(../images/features_icon.svg);
}

.vehicle-info-modal .info-field.depot .icon {
    mask-image: url(../images/depot_icon.svg);
}

.vehicle-info-modal .info-field.operator .icon {
    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;
}

.vehicle-info-modal .info-field.interactive {
    cursor: pointer;
    transition: background-color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
    .vehicle-info-modal .info-field.interactive:hover {
        background-color: var(--button-hover) !important;
    }
}

.vehicle-info-modal .info-field.interactive:active {
    background-color: var(--button-active) !important;
}

.schedules-menu .lines-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.schedules-menu .lines-list .line-type {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.schedules-menu .lines-list .line-type .title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.schedules-menu .lines-list .line-type .lines {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    user-select: none;
    -webkit-user-select: none;

    .line-info {
        cursor: pointer;

        .number {
            margin: 0;
        }
    }
}

.route-changes-menu .route-changes-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.route-changes-menu .route-change {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-radius: 16px;
    background-color: var(--bs-secondary-bg);

    .title {
        font-size: 18px;
        font-weight: 600;
    }

    .date {
        font-size: 14px;
        color: var(--bs-secondary-color);
        margin-bottom: 8px;
    }
}

:root {
    --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: #1ea566;
    --delay-early: #ff9500;
    --delay-delayed: #dc3545;

    /* --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 4px #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);
}

[data-bs-theme=dark] {
    color-scheme: dark;

    --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-none: #24c279;
    --delay-early: #ffc107;
    --delay-delayed: #ff6966;
}

[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;

    .bg-dark {
        background-color: var(--bs-body-bg) !important;
    }
}