:root {
    --big_font: 2.22rem;
    --header_font: 1.40rem;
    --normal_font: 0.92rem;
    --smaller_font: 0.84em;
    --bold_weight: 600;

    --wrapper_width: 840px;
    --body-padding: 80px 80px 200px;

    --table_spacing: 34px;
    --row_spacing: 14px;
    --radius: 24px;

    --vehicle_info_widh: 160px;
    --bus_icon_cell: 280px;
    --bus_icon_height: 48px;
    --bus_image_height: 148px;

    --go_back_cell_width: 52px;
    --go_back_box_size: var(--line_box_size);

    --line_cell_width: 92px;
    --line_box_size: 40px;

    --transition: 0.16s ease;
}

/* ------------------------------
Light mode
------------------------------ */

:root {
    --background: rgb(240, 240, 242);
    --table_color: rgb(248, 248, 250);

    --line_box_color: rgb(224, 224, 226);
    --go_back_color: rgb(232, 232, 233);
    --border_color: rgb(236, 236, 238);
    --dumped: rgb(206, 206, 208);

    --shadow: 0 0 4px rgba(0, 0, 0, 0.12), inset 0 0 2px 1px rgba(255, 255, 255, 1);
    --light_shadow: inset 0 0 1px 0px rgba(0, 0, 0, 0.3);

    --main_font: rgba(0, 0, 0, 0.84);
    --mild_font: rgba(0, 0, 0, 0.64);
    --mild_mild_font: rgba(0, 0, 0, 0.34);

    --red: rgb(238, 31, 16);
    --blue: rgb(46, 69, 203);
    --green: rgb(67, 142, 30);
}

/* ------------------------------
Dark mode
------------------------------ */

[data-theme="dark"] {
    --background: rgb(0, 0, 0);
    --table_color: rgb(20, 20, 21);

    --line_box_color: rgb(38, 38, 40);
    --go_back_color: rgb(26, 26, 28);
    --border_color: var(--line_box_color);
    --dumped: rgb(48, 48, 50);

    --shadow: inset 0 0 2px rgb(100, 100, 100);
    --light_shadow: inset 0 0 1px rgb(100, 100, 100);

    --main_font: rgb(224, 224, 224);
    --mild_font: rgb(134, 134, 136);
    --mild_mild_font: var(--line_box_color);

    --red: rgb(238, 31, 16);
    --blue: rgb(123, 143, 253);
    --green: rgb(106, 180, 72);
}

[data-theme="dark"] #progress {
    background: var(--mild_mild_font);
}

[data-theme="dark"] #progressNow,
[data-theme="dark"] .vehAttr {
    background: var(--mild_font);
}

[data-theme="dark"] .message {
    background: var(--table_color);
    box-shadow: var(--shadow);
}

/* ------------------------------
General
------------------------------ */

* {
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    text-decoration: none;
    list-style: none;
    color: var(--main_font);
}

body {
    padding: var(--body-padding);
    background-color: var(--background);
    font-family: "Avenir Next", "Arial", sans-serif;
    font-size: var(--normal_font);
}

table {
    border-spacing: 0;
    width: 100%;
    border-collapse: collapse;
}

li {
    display: inline-block;
}

.wrapper {
    max-width: var(--wrapper_width);
    margin: 0 auto;
}

/* ------------------------------
Header table
------------------------------ */

.spacer {
    width: 100%;
    height: 3px;
    background-color: var(--line_box_color);
    margin-bottom: calc(var(--table_spacing) * 0.48);
}

.message {
    font-size: var(--normal_font);
    color: var(--mild_font);
    background-color: var(--go_back_color);
    margin-bottom: calc(var(--table_spacing) * 0.48);
    border-radius: var(--radius);
    padding: calc(1.8 * var(--row_spacing)) calc(2 * var(--row_spacing));
    display: table;
    width: 100%;
    box-sizing: border-box;
    box-shadow: var(--light_shadow);
}

.message.schedule {
    margin-top: calc(var(--table_spacing) * -0.5);
    margin-bottom: calc(var(--table_spacing) * 1);
}

.inline {
    display: table-cell;
    width: 100%;
    vertical-align: top;

}

.inline.bigIcon {
    width: calc(var(--bus_icon_height) * 1);
    font-size: calc(var(--big_font) * 0.7);
    line-height: 28px;
    height: 20px;
    display: inline-block;
}

.vertMiddle {
    vertical-align: middle;
}

.inline.bigIcon.vertMiddle {
    line-height: 24px;
}

.header {
    font-size: var(--header_font);
    margin-bottom: calc(var(--table_spacing) * 0.56);
    display: inline-block;
    margin-right: 6px;
}

.header>span:not(#fleetHeader) {
    font-size: var(--normal_font);
}

#headerTable {
    font-size: var(--big_font);
    margin-bottom: var(--table_spacing);
}

#headerTable #headerTitle {
    text-align: left;
    padding: 0 calc(0.5 * var(--row_spacing));
}

#headerTable #realTime {
    text-align: right;
}

#themeToggle {
    width: calc(0.6 * var(--bus_icon_height));
    height: calc(0.6 * var(--bus_icon_height));
    background: var(--main_font);
    mask-size: 85%;
    mask-repeat: no-repeat;
    mask-position: center;
    vertical-align: -4px;
    cursor: pointer;
    transition: rotate 0.8s ease;
}

#themeToggle.dark {
    mask-image: url(../icon/dark_mode.png);
    rotate: 360deg;
}

#themeToggle.light {
    mask-image: url(../icon/light_mode.png);
}

/* ------------------------------
Vehicle info
------------------------------ */

#vehicleImage {
    height: var(--bus_image_height);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: calc(0.5 * var(--row_spacing)) 0 calc(1.4 * var(--row_spacing));
}

/* ------------------------------
Main table settings (rounded)
------------------------------ */

.mainTable:not(#busReal):not(#courseInfo)>tr:not(:last-child) td:not(:first-child),
.mainTable>a:not(:last-child) td:not(:first-child),
.mainTable>tr:not(:last-child) table,
.mainTable>tr:not(:last-child) td.favBtn {
    border-bottom: 1px solid var(--border_color);
}


/* ------------------------------
Main table settings
------------------------------ */

.mainTable {
    margin-bottom: var(--table_spacing);
    background: var(--table_color);
    border-radius: var(--radius);
    border-collapse: separate;
    overflow: hidden;
}

.mainTable:not(:has(#allLines)) {
    box-shadow: var(--shadow);
    padding: 2px var(--row_spacing) 2px 0;
}

.mainTable td {
    padding-top: var(--row_spacing);
    padding-bottom: var(--row_spacing);
    vertical-align: middle;
}

#courseInfo td {
    vertical-align: top;
}

#courseInfo.mainTable td.nested {
    width: 100%;
}

#courseInfo table.secondary td {
    padding-top: 0px;
    padding-bottom: 4px;
}

#courseInfo table.primary td {
    padding-top: 3px;
    padding-bottom: 4px;
}

#courseInfo .way {
    font-size: var(--smaller_font);
    width: 0;
    transition: width 0.8s ease;
}

#courseInfo.mainTable td:has(> .way) {
    padding-right: var(--row_spacing);
}

.mainTable#courseInfo>tbody>tr:first-child>td {
    padding-top: calc(var(--row_spacing) * 1.14);
    padding-bottom: calc(var(--row_spacing) * 1.14);
}

.mainTable#courseInfo {
    padding-bottom: 0;
}

.mainTable#courseInfo>tbody>tr:last-child>td {
    padding-bottom: calc(var(--row_spacing) * 2.6);
}

.mainTable#courseInfo>tbody>tr>td {
    padding-top: 0;
    padding-bottom: 0;
}

#courseInfo #vehicleImage {
    width: 90%;
    height: calc(var(--bus_image_height) * 0.6);
    margin: calc(var(--row_spacing) * -0.4) 0 calc(0.6 * var(--table_spacing)) 0;
    background-position: top left;
    background-size: contain;
    box-sizing: border-box;
    animation: unset;
}

.courseVehicle .vehAttr,
#busReal .vehAttr,
#allVehicles .vehAttr {
    width: calc(var(--bus_icon_height) * 0.36);
    height: calc(var(--bus_icon_height) * 0.36);
    mask-size: auto calc(var(--bus_icon_height) * 0.36);
    mask-position: left center;
    mask-repeat: no-repeat;
}

#busReal .vehAttr,
#allVehicles .vehAttr {
    margin-left: 6px;
}

.vehicleDesc,
.vehicleOwner {
    margin-right: 4px;
}

.courseVehicle .vehAttr.ztm {
    width: calc(var(--bus_icon_height) * 0.74);
}

.courseVehicle .vehAttr.bptour,
.courseVehicle .vehAttr.kasp {
    width: calc(var(--bus_icon_height) * 1);
}

.mainTable:not(#busReal) td {
    padding-top: calc(var(--row_spacing) * 1.3);
    padding-bottom: calc(var(--row_spacing) * 1.3);
}

.mainTable:has(#allLines) {
    background: transparent;
    border-radius: 0;
}

.mainTable #allLines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--line_box_size) * 1.4), 1fr));
    width: 100%;
}

.mainTable #allLines td {
    padding-top: 0;
    padding-bottom: calc(var(--row_spacing) * 0.8);
    text-align: center;
}

.mainTable .primary td {
    padding-top: var(--row_spacing);
    padding-bottom: 0;
    width: 100%;
}

#busReal.mainTable .secondary td {
    padding-top: 0;
    padding-bottom: var(--row_spacing);
    color: var(--mild_font);
    font-size: var(--smaller_font);
    width: 100%;
}

.direction,
.time,
#busReal .way,
#vehicleInfo td,
.stopName {
    padding-right: calc(var(--row_spacing) * 0.6);
}

#allStops a,
#favStops a {
    display: table-cell;
}

.favBtn {
    width: calc(0.8 * var(--bus_icon_height));
    cursor: pointer;
    vertical-align: bottom;
    line-height: 18px;
}

.favBtn.rem td:after {
    transition: scale var(--transition);
    display: block;
    background: url(../icon/fav_rem.png) center no-repeat;
    background-size: contain;
    content: " ";
}

.favBtn.add td:after {
    transition: scale var(--transition);
    display: block;
    background: url(../icon/fav_add.png) center no-repeat;
    background-size: contain;
    content: " ";
}

a.favBtn:hover td:after {
    scale: 1.14;
}

/* ------------------------------
Boxes
------------------------------ */

.lineBox,
.backBox,
.showBox {
    border-radius: 34%;
    box-shadow: var(--light_shadow);
    text-align: center;
    display: inline-block;
}


.lineBox:hover,
.backBox:hover,
.showBox:hover {
    background-color: var(--line_box_color);
}

#headerTable #back {
    width: calc(1.8 * var(--go_back_cell_width));
    text-align: left;
}

.backBox,
.showBox {
    background-color: var(--go_back_color);
    width: var(--go_back_box_size);
    line-height: var(--go_back_box_size);
    cursor: pointer;
}

.backBox {
    vertical-align: 2px;
}

.showBox {
    display: inline-block;
    margin-left: calc(var(--row_spacing) * 0.8);
    text-align: center;
    font-weight: var(--bold_weight);
    width: calc(var(--go_back_box_size) * 0.70);
    line-height: calc(var(--go_back_box_size) * 0.70);
    font-size: var(--smaller_font);
    vertical-align: 2px;
}

.showBox:after {
    content: ">";
    display: inline-block;
    transition: transform var(--transition);
}

.showBox.shown:after {
    transform: rotate(-180deg);
}

.lineBox {
    background: var(--line_box_color);
    width: var(--line_box_size);
    line-height: var(--line_box_size);
    margin: 0 auto;
    font-size: 1.1em;
}

#courseInfo .lineBox {
    margin: 0 calc(var(--row_spacing) * 1.2) 0 calc(var(--row_spacing) * 1.6);
}

#allLines .lineBox {
    width: calc(var(--go_back_box_size) * 1.14);
    line-height: calc(var(--go_back_box_size) * 1.14);
}

.lineBox a {
    display: block;
}

/* ------------------------------
Information cells - bus real
------------------------------ */

.line {
    text-align: center;
}

#busReal .line {
    width: calc(var(--line_cell_width) * 0.82);
}

.stopId,
.fleetId {
    text-align: left;
    min-width: calc(var(--line_cell_width) * 0.54);
    max-width: calc(var(--line_cell_width) * 0.54);
    width: calc(var(--line_cell_width) * 0.54);
}

/*
.fleetReg {
    width: calc(6 * var(--normal_font));
}
*/

#allStops .stopName,
#favStops .stopName {
    width: 100%;
}

.time,
.way {
    text-align: right;
}

.time:not(.bold) {
    color: var(--mild_mild_font);
}

/* ------------------------------
Information cells - stops
------------------------------ */

.busIcon,
.stopIcon,
.fleetIcon {
    display: table-cell;
}

.busIcon {
    width: var(--bus_icon_cell);
    background-position: right bottom+11px;
    background-repeat: no-repeat;
    background-size: auto calc(var(--bus_icon_height) * 1.06);
}

.busIcon,
.vehAttr {
    opacity: 0.9;
}

.stopIcon,
.fleetIcon,
.fleetIcon {
    min-width: calc(var(--bus_icon_height) * 1.1);
    max-width: calc(var(--bus_icon_height) * 1.1);
    width: calc(var(--bus_icon_height) * 1.1);
    padding-right: calc(var(--row_spacing) * 1.28);
    text-align: right;
    font-size: 1.56em;
    line-height: 16px;
}

a.stopLink,
a.vehicleLink {
    display: table;
    width: 100%;
}

.vehAttr {
    display: inline-block;
    width: calc(var(--bus_icon_height) * 0.5);
    height: calc(var(--bus_icon_height) * 0.5);
    background: var(--blue);
    mask-size: auto calc(var(--bus_icon_height) * 0.5);
    mask-repeat: no-repeat;
    mask-position: center left;
    vertical-align: -3px;
    margin-right: -2px;
}

.gas,
.electric {
    background: var(--green);
}

.vehAttr.bptour,
.vehAttr.kasp {
    width: calc(var(--bus_icon_height) * 1.3);
}

.vehAttr.ztm {
    width: calc(var(--bus_icon_height) * 0.98);
}

/* ------------------------------
Information cells - vehicle info
------------------------------ */

#vehicleInfo td {
    vertical-align: top;
}

#vehicleInfo td.name {
    width: var(--vehicle_info_widh);
    padding-left: calc(var(--row_spacing) * 2);
}

#vehicleInfo td.value {
    white-space: inherit;
}

/* ------------------------------
Information cells - schedule
------------------------------ */

.scheduleTable {
    border-spacing: 2px;
    width: 100%;
}

.scheduleTable td {
    padding-right: var(--row_spacing);
    white-space: inherit;
    line-height: 22px;
}

.scheduleTable td:first-child {
    padding-right: calc(var(--row_spacing) * 1.2);
    text-align: right;
    width: calc(var(--bus_icon_height) * 1.2);
    font-size: 1.5em;
}

.scheduleTable span {
    display: inline-block;
}

.scheduleTable span:not(:last-child)::after {
    content: "  ⋅  ";
}

/* ------------------------------
Progress
------------------------------ */

#progress,
#progressNow {
    height: 3px;
    border-radius: 2px;
}

#progress {
    background: var(--background);
    margin-right: var(--row_spacing);
}

#progressNow {
    width: 0;
    transition: width 0.8s ease;
    background: var(--red);
    z-index: 1;
    opacity: 0.8
}


/* ------------------------------
Appendable classes
------------------------------ */

.hidden {
    display: none;
}

.bold {
    font-weight: var(--bold_weight);
}

.redFont {
    color: var(--red);
}

.dumped td {
    background-color: var(--dumped);
    background-clip: text;
    color: transparent;
}

/* ------------------------------
Text truncating
------------------------------ */

td {
    white-space: nowrap;
}

.td-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}

/* ------------------------------
Blinking animations
------------------------------ */

@keyframes colon {
    30% {
        opacity: inherit;
    }

    40% {
        opacity: 0;
    }

    80% {
        opacity: 0;
    }

    90% {
        opacity: inherit;
    }
}

#colon {
    animation: colon 1s linear infinite;
}

.blink {
    animation: colon 1s linear 3;
}


/* ------------------------------
Mobile style
------------------------------ */

@media only screen and (max-width: 640px) {
    :root {
        --big_font: 2.08rem;
        --header_font: 1.32rem;
        --normal_font: 0.90rem;
        --body-padding: 34px 22px 60px;
        --table_spacing: 28px;
        --row_spacing: 12px;
        --line_cell_width: 60px;
        --line_box_size: 36px;
        --go_back_cell_width: 56px;
        --go_back_box_size: 42px;
        --bus_icon_cell: 62px;
        --bus_icon_height: 44px;
        --bus_image_height: 82px;
        --vehicle_info_widh: 140px;
    }

    #headerTable #headerTitle {
        padding-left: 0;
    }

    #allLines .lineBox {
        width: calc(var(--line_box_size) * 1.18);
        line-height: calc(var(--line_box_size) * 1.18);
    }

    .mainTable #allLines {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--line_box_size) * 1.2), 1fr));
        width: 100%;
    }

    .stopId,
    .fleetId {
        text-align: left;
        min-width: calc(var(--line_cell_width) * 0.74);
        max-width: calc(var(--line_cell_width) * 0.74);
    }

    #busReal .line {
        width: var(--line_cell_width);
    }

    .message {
        padding: calc(1.6 * var(--row_spacing)) calc(1.4 * var(--row_spacing)) calc(1.6 * var(--row_spacing));
        margin-bottom: calc(var(--table_spacing) * 0.6);
    }

    .inline.bigIcon {
        line-height: 30px;
        font-size: calc(var(--big_font) * 0.76);
    }

    .stopIcon,
    .fleetIcon,
    .favBtn {
        line-height: 18px;
    }

    #courseInfo .lineBox {
        margin: calc(var(--row_spacing) * 0.2) calc(var(--row_spacing) * 1.12) calc(var(--row_spacing) * 0.2) calc(var(--row_spacing) * 1.44);
    }

    #courseInfo #vehicleImage {
        height: calc(var(--bus_image_height) * 0.8);
        background-size: contain;
    }

    .vehAttr {
        vertical-align: -3px;
    }
}