:root {
    --ui-font: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    --ink: #203548;
    --muted: #4c6271;
    --line: #cbd8de;
    --panel: #f0f6f7;
    --accent: #08667d;
    --action: #ac4815;
}
html { -webkit-text-size-adjust: 100%; }
body { font: 15px/1.5 var(--ui-font); color: var(--ink); }
* { transition: none; }
a { color: var(--accent); text-underline-offset: .13em; }
:focus-visible { outline: 3px solid #207ba2; outline-offset: 2px; }
.header {
    background: #19384a;
    box-shadow: inset 0 -3px #32969c;
}
.header_in { background: none; }
.header .logo a { display: flex; height: 100%; align-items: center; }
.header .logo img { float: none; margin-top: 0; }
.footer .logo a { display: block; width: fit-content; margin-inline: auto; }
.middle { padding-top: 82px; }
h1, .page_title {
    color: var(--ink);
    font: 700 clamp(21px, 2.3vw, 28px)/1.22 var(--ui-font);
    text-transform: none;
    overflow-wrap: anywhere;
    margin-bottom: 14px;
}
.popular_station label, .right-sidebar label, .table_label, .result_tabs .tab > h2 {
    color: var(--ink);
    font: 650 17px/1.35 var(--ui-font);
    text-transform: none;
}
.popular_station a, .right-sidebar a { font-family: var(--ui-font); }
.popular_station .row { min-width: 0; }
.popular_station .wrap_link_more {
    display: none;
    bottom: 100%;
    width: max-content;
    max-width: min(32rem, calc(100vw - 24px));
    margin: 0;
    transform: translateX(calc(-50% + var(--menu-offset, 0px)));
}
.popular_station .wrap_a.is-open > .wrap_link_more {
    display: block;
    opacity: 1;
    z-index: 3;
}
.popular_station .wrap_link_more .wrr {
    display: flow-root;
    float: none;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 3px 12px #19384a24;
}
.popular_station .wrap_link_more li { white-space: normal; overflow-wrap: anywhere; }
.popular_station .wrap_link_more .btn_more { box-sizing: border-box; height: auto; }
@media (max-width: 640px), (hover: none), (pointer: coarse) {
    .popular_station .wrap_link_more {
        position: static;
        transform: none;
        width: auto;
        max-width: 100%;
        margin: 4px 0 8px;
    }
    .popular_station .wrap_link_more .wrr { box-shadow: none; background: #f7fafb; }
    .popular_station .wrap_link_more .arr { display: none; }
    .popular_station .wrap_link_more li a { padding: 7px 0; line-height: 1.4; }
    .popular_station .wrap_link_more .btn_more {
        background: white;
        margin-top: 4px;
        padding: 6px;
        line-height: 1.4;
    }
}
.breadcrumbs {
    clear: both;
    margin-bottom: 8px;
    color: var(--muted);
    font: 400 13px/18px var(--ui-font);
}
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    list-style: none;
}
.breadcrumbs li {
    display: flex;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.breadcrumbs li + li::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    box-sizing: border-box;
    margin: 6.5px 7px 0 6px;
    border: solid #718794;
    border-width: 1px 1px 0 0;
    transform: rotate(45deg);
}
.breadcrumbs a { color: inherit; }
.list .btn, .popular_station .btn {
    background: #f7f9fa;
    border-color: var(--line);
    border-radius: 6px;
    font: 500 14px/36px var(--ui-font);
    height: 36px;
}

.search_form {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: clamp(14px, 2vw, 22px);
    margin-bottom: 22px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.search_form .search_type label {
    font: 700 20px/1.25 var(--ui-font);
    text-transform: none;
    color: var(--ink);
}
.search_form .search_type .btns, .search_form .transport {
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
    padding: 3px;
    background: #e0eaee;
    border-radius: 8px;
    overflow: visible;
}
.search_form .btns ul, .search_form .transport ul { display: flex; flex-wrap: wrap; }
.search_form .search_type .btns li a, .search_form .transport li a {
    display: block;
    float: none;
    height: auto;
    border: 0;
    border-radius: 5px;
    padding: 8px 12px;
    color: #314e60;
    text-align: center;
    font: 550 14px/1.35 var(--ui-font);
}
.search_form .search_type .btns li a:hover, .search_form .transport li a:hover {
    background: #d0dfe5;
    color: var(--ink);
}
.search_form .search_type .btns li a.active, .search_form .transport li a.active {
    color: #fff;
    background: var(--accent);
}
.search_form .from_to label, .search_form .item_wrap .date > label {
    color: var(--ink);
    font: 600 14px/20px var(--ui-font);
    margin: 0 0 5px;
}
.search_form .from_to input.form-text, .search_form .item_wrap .date input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    border: 1px solid #97acb6;
    border-radius: 6px;
    padding: 0 10px;
    color: var(--ink);
    background: white;
    box-shadow: none;
    font: 400 16px/1.35 var(--ui-font);
}
.search_form .from_to .revers, .search_form .from_to .revers2 {
    border: 0;
    height: 44px;
    margin: 25px 0 0;
    background-position: center;
}
.search_form .from_to .item.where { max-width: 100%; }
.search_form .item_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}
.search_form .item_wrap .date { position: relative; width: 180px; margin: 0; }
.search_form .item_wrap .date .wrap_input { width: 100%; }
.search_form .item_wrap .date input { padding-right: 34px; }
.search_form .item_wrap .date::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 39px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    background: url("../images/date_bg.png") -151px -7px;
}
.search_form .description { margin-top: 4px; color: var(--muted); font: 12px/1.5 var(--ui-font); }
.search_form .description span { color: var(--accent); border-color: currentColor; }
.search_form .transport { margin: 25px 0 0; }
.search_form input.form-submit {
    box-sizing: border-box;
    height: 44px;
    width: auto;
    max-width: 100%;
    margin: 25px 0 0;
    padding: 0 16px;
    border-radius: 6px;
    background: var(--action);
    color: white;
    box-shadow: none;
    text-indent: 0;
    font: 650 15px/1.25 var(--ui-font);
}
.search_form input.form-submit:hover { background: #913b10; box-shadow: none; }
.search_form .from_to input.validation_error, .search_form .item_wrap input.validation_error { border-color: #b22f34; }

.station_result table td {
    font: 400 14px/1.4 var(--ui-font);
    color: var(--ink);
    border-color: var(--line);
}
.station_result table td { padding: 6px; }
.station_result table th {
    color: var(--muted);
    font-family: var(--ui-font);
    font-size: 12px;
}
.station_result table th { box-shadow: inset 0 -2px #c4d9dd; }
.station_result .time_zone, .result_tabs .time_zone { font-variant-numeric: tabular-nums; }
.station_result tbody tr:nth-child(even) { background: #f7fafb; }
.station_result table tbody tr.first:hover, .station_result table tr + tr:hover {
    background: #edf5f6;
    box-shadow: none;
}
.station_result .call_b, .station_result .call_r {
    width: 40px;
    height: 40px;
    background-position: center;
}
.station_result.small table { min-width: 0; table-layout: fixed; }
.station_result.small table td { font: 400 14px/1.4 var(--ui-font); color: var(--ink); }
.station_result.small table td.ico_tr { width: 20px; text-align: center; }
.station_result.small table col:first-child { width: 32px; }
.station_result.small .title { float: none; margin-right: 46px; overflow-wrap: anywhere; }
.station_result.small .title a { font-size: 15px; font-weight: 600; color: var(--accent); }
.station_result.small td label { font: 400 12px/1.4 var(--ui-font); color: var(--muted); }
.station_result.small .start_fin_wrap { margin-top: 5px; }
.station_result.small .start_fin_wrap .time_zone { font-size: 17px; font-weight: 600; }
.station_result.small .bot { padding-top: 6px; margin-top: 7px; }
.station_result.small .bot > div { overflow-wrap: anywhere; }
.station_result.small table th.time_s .wrap { height: auto; border: 0; }
.station_result.small table th.time_s .wrap .t { position: static; }
.station_result.small table th.time_s .wrap .t label,
.station_result.small table th.time_s .wrap .selectedTxt { line-height: 34px; font-size: 14px; }

.container:has(.stop-table) { overflow: clip; }
.stop-schedule { clear: both; }
.stop-time-setting {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
}
.clock-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font: 500 13px/1.2 var(--ui-font);
}
.clock-mode > span { margin-right: 4px; }
.clock-mode label { position: relative; cursor: pointer; }
.clock-mode input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.clock-mode label span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--accent);
    background: white;
}
.clock-mode input:checked + span { background: var(--accent); color: white; border-color: var(--accent); }
.clock-mode input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.clock-local {
    display: block;
    color: var(--muted);
    font: 500 11px/1.25 var(--ui-font);
}
.stop-table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: separate;
    font-size: 15px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
.stop-table :is(th, td) {
    box-sizing: border-box;
    padding: 10px 8px;
    border-bottom: 1px solid #dce6e8;
    text-align: center;
    vertical-align: middle;
}
.stop-table th:first-child { text-align: left; padding-left: 12px; }
.stop-table thead { position: sticky; top: 0; z-index: 2; }
.stop-table thead th {
    background: #e7f1f2;
    border-color: #bdcfd3;
    color: #324e59;
    font-size: 13px;
    font-weight: 600;
}
.stop-table thead th:first-child { border-top-left-radius: 8px; }
.stop-table thead th:last-child { border-top-right-radius: 8px; }
.stop-table thead abbr { display: none; text-decoration: none; }
.stop-table .stop-clock { width: 17%; }
.stop-table .stop-stay { width: 13%; }
.stop-table .stop-elapsed { width: 15%; }
.stop-table tbody th { font-weight: 500; overflow-wrap: anywhere; }
.stop-table tbody th a { text-decoration-color: #a4c3cb; }
.stop-table tbody th a:hover { text-decoration-color: currentColor; }
.stop-table tbody td { color: var(--muted); font-size: 14px; }
.stop-table .time_zone { color: var(--ink); font-size: 16px; font-weight: 600; }
.stop-table .time_zone:not(.active) { display: none; }
.stop-table .time_zone .g { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }
.stop-table tbody tr:nth-child(even):not(.active_tr) { background: #f7fafb; }
.stop-table .country_change td { background: var(--panel); }
@media (hover: hover) {
    .stop-table tbody tr:not(.active_tr):hover { background: #edf5f6; }
}

.ui-datepicker { border-radius: 8px; box-shadow: 0 4px 16px #19384a24; }
/* jQuery UI sets an inline z-index when the search calendar opens. */
#ui-datepicker-div { z-index: 4 !important; }
.ui-datepicker .ui-datepicker-header { background: var(--accent); }
.ui-datepicker th { color: var(--muted); }
.ui-autocomplete { max-width: calc(100vw - 20px); box-sizing: border-box; }

@media (max-width: 1100px) {
    main.content { padding-left: 16px; }
    .left-sidebar { display: none; }
}
@media (max-width: 860px) {
    main.content { padding: 0 16px; }
    .right-sidebar { box-sizing: border-box; width: 100%; margin: 0; padding: 0 16px; }
}
@media (max-width: 640px) {
    .middle { padding-top: 72px; }
    main.content { padding: 0 10px; }
    .header .logo img { margin-left: 12px; }
    .search_form { padding: 12px; border-radius: 9px; }
    .search_form .search_type .btns { float: none; margin-bottom: 14px; }
    .search_form .btns li { flex: 1 1 auto; }
    .search_form .search_type .btns li a, .search_form .transport li a {
        box-sizing: border-box;
        padding: 10px 6px;
        min-height: 42px;
        line-height: 22px;
    }
    .search_form .from_to .item.from { width: calc(100% - 46px); }
    .search_form .from_to .revers, .search_form .from_to .revers2 { width: 44px; }
    .search_form .from_to .item.to { width: 100%; margin-top: 9px; }
    .search_form .from_to .item.nomer { width: 100%; margin-right: 0; }
    .search_form .item_wrap .date { width: 100%; }
    .search_form .date .description { display: flex; flex-wrap: wrap; gap: 12px; }
    .search_form .date .description span { padding: 4px 0; margin: 0; }
    .search_form .transport { margin: 0; }
    .search_form input.form-submit { margin: 0; min-height: 46px; }
    .search_form .from_to .form-actions { clear: both; padding-top: 10px; }
    .search_form .item_wrap .form-actions { flex: 1 0 auto; }
    .search_form .item_wrap input.form-submit { width: 100%; }
    .ui-datepicker { width: min(270px, calc(100vw - 36px)); }
    .ui-datepicker table td a { line-height: 36px; }
    .ui-autocomplete li { white-space: normal; }
    .ui-autocomplete li a { padding-block: 7px; overflow-wrap: anywhere; }
    .popular_station .row, .popular_station .row.even {
        box-sizing: border-box;
        width: 100%;
        padding: 0;
        border: 0;
    }
    .popular_station .row + .row { margin-top: 20px; }
    .result_tabs .head .tab_switch { box-sizing: border-box; }
    .stop-table { table-layout: auto; }
    .stop-table :is(th, td) { padding: 9px 4px; }
    .stop-table th:first-child { padding-left: 8px; }
    .stop-table .stop-elapsed { display: none; }
    .stop-table .stop-clock { width: 6rem; }
    .stop-table .stop-stay { width: 4rem; }
    .stop-table thead th:nth-child(4) { border-top-right-radius: 8px; }

    /* Desktop browsers on a narrow window receive the seven-column timetable. */
    .station_result.big { display: block; }
    .station_result.big table, .station_result.big thead, .station_result.big tbody { display: block; }
    .station_result.big table { box-sizing: border-box; }
    .station_result.big thead tr { display: block; }
    .station_result.big thead th { display: none; }
    .station_result.big thead th.time_s {
        box-sizing: border-box;
        display: block;
        width: 100% !important;
        height: 46px;
        padding: 12px 8px;
    }
    .station_result.big th.time_s .wrap { border: none; height: auto; }
    .station_result.big th.time_s .wrap .t { top: 0; left: 0; }
    .station_result.big th.time_s .wrap :is(.start, .fin) { display: none; }
    .station_result.big tbody tr {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 44px;
        grid-template-areas: "icon title title graph" ". first second second" ". duration days days";
        gap: 4px 6px;
        padding: 8px 5px;
        border-bottom: 1px solid var(--line);
    }
    .station_result.big tbody td {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        padding: 0;
        border: 0;
        overflow-wrap: anywhere;
    }
    .station_result.big td:nth-child(1) { grid-area: icon; }
    .station_result.big td:nth-child(2) { grid-area: title; font-weight: 600; }
    .station_result.big td:nth-child(3) { grid-area: first; }
    .station_result.big td:nth-child(4) { grid-area: second; }
    .station_result.big td:nth-child(5) { grid-area: duration; }
    .station_result.big td:nth-child(6) { grid-area: days; }
    .station_result.big td:nth-child(7) { grid-area: graph; }
    .station_result.big td[data-label]::before {
        display: block;
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
    }
    .station_result.big .time_zone { font-size: 17px; font-weight: 600; }
}
@media (max-width: 480px) {
    .stop-table .stop-full { display: none; }
    .stop-table thead abbr { display: inline; }
    .stop-table .stop-clock { width: 3.8rem; }
    .stop-table .stop-stay { width: 3.5rem; }
}
@media (max-width: 380px) {
    .search_form .item_wrap .form-actions, .search_form .transport { width: 100%; }
    .search_form .transport li { flex: 1; }
}