body[data-size="150"] {
    --font-size-6: 10px;
    --font-size-8: 12px;
    --font-size-10: 14px;
    --font-size-11: 15px;
    --font-size-12: 17px;
    --font-size-13: 18px;
    --font-size-14: 20px;
    --font-size-16: 23px;
    --font-size-18: 25px;
    --font-size-20: 28px;
}

body[data-size="200"] {
    --font-size-6: 12px;
    --font-size-8: 15px;
    --font-size-10: 17px;
    --font-size-11: 19px;
    --font-size-12: 20px;
    --font-size-13: 21px;
    --font-size-14: 22px;
    --font-size-16: 26px;
    --font-size-18: 30px;
    --font-size-20: 32px;
}

body[data-size="150"] *,
body[data-size="200"] * {
    line-height: normal !important;
}

body[data-size="150"] .planner .inputMinutes,
body[data-size="150"] .planner .inputHour,
body[data-size="200"] .planner .inputMinutes,
body[data-size="200"] .planner .inputHour {
    max-width: fit-content;
}

body[data-size="150"] > .modal .window,
body[data-size="200"] > .modal .window {
    height: auto;
    padding: 10px;
}

body[data-size="150"] .head.desktop .menu > a,
body[data-size="200"] .head.desktop .menu > a {
    padding-right: 0px;
}

body[data-size="150"] .schedule .transport > .title,
body[data-size="200"] .schedule .transport > .title,
body[data-size="150"] .travel-time,
body[data-size="200"] .travel-time,
body[data-size="150"] .planner-results button.accordion-toggle,
body[data-size="200"] .planner-results button.accordion-toggle,
body[data-size="150"] .row-stops li.stop_info a.title,
body[data-size="200"] .row-stops li.stop_info a.title,
body[data-size="150"] .row-stops li.stop_info,
body[data-size="200"] .row-stops li.stop_info,
body[data-size="150"] .planner-realtime-toggle button,
body[data-size="200"] .planner-realtime-toggle button,
body[data-size="150"] .filter-routes .direction,
body[data-size="200"] .filter-routes .direction,
body[data-size="150"] .departing-routes .direction,
body[data-size="200"] .departing-routes .direction {
    height: auto;
}

body[data-size="150"] .travel-start,
body[data-size="150"] .travel-finish {
    height: 26px;
}

body[data-size="200"] .travel-start,
body[data-size="200"] .travel-finish {
    height: 30px;
}

body[data-size="150"] .planner-results .option .result .point .time,
body[data-size="200"] .planner-results .option .result .point .time,
body[data-size="150"] .point-info .stop-intermediate .stop-container .stop-time,
body[data-size="200"]
    .point-info
    .stop-intermediate
    .stop-container
    .stop-time {
    font-size: var(--font-size-10);
}

body[data-size="150"] .planner-results .option .result .point .time.special,
body[data-size="200"] .planner-results .option .result .point .time.special {
    font-size: 13px;
}

body[data-size="150"] .timetable .departures .cellx,
body[data-size="200"] .timetable .departures .cellx {
    min-width: var(--font-size-20);
}

body[data-size="150"] .planner-results .transport-number,
body[data-size="200"] .planner-results .transport-number {
    padding: 6px;
}

.app body[data-size="150"] ul.nav-tabs.nav-search,
body[data-size="200"] ul.nav-tabs.nav-search {
    display: block;
}

body[data-size="150"] .map-controls button.planner-start,
body[data-size="150"] .map-controls a.planner-start,
body[data-size="200"] .map-controls button.planner-start,
body[data-size="200"] .map-controls a.planner-start,
body[data-size="150"] .m .mapMenu .content button.a.bookmark-set,
body[data-size="150"] .m .mapMenu .content button.a.start-set,
body[data-size="150"] .m .mapMenu .content button.a.finish-set,
body[data-size="200"] .m .mapMenu .content button.a.bookmark-set,
body[data-size="200"] .m .mapMenu .content button.a.start-set,
body[data-size="200"] .m .mapMenu .content button.a.finish-set {
    height: auto;
}

body[data-size="150"] .map-controls a.realtime-departures,
body[data-size="150"] .m a.realtime-departures,
body[data-size="200"] .map-controls a.realtime-departures,
body[data-size="200"] .m a.realtime-departures {
    height: auto;
    white-space: normal;
    text-align: center;
}

body[data-size="150"] .m .label_transport,
body[data-size="200"] .m .label_transport {
    height: auto !important;
}

body[data-size="150"] .head.mobile .title,
body[data-size="200"] .head.mobile .title {
    padding: 0px 10px;
}

body[data-size="150"] ul.nav-tabs,
body[data-size="200"] ul.nav-tabs {
    gap: 4px;
}

body[data-size="150"] .nav-transport li {
    padding-left: 6px;
    padding-right: 6px;
    flex: 1;
}
body[data-size="200"] .nav-transport li {
    padding-left: 2px;
    padding-right: 2px;
    flex: 1;
}

body[data-size="150"] .nav-transport li span,
body[data-size="200"] .nav-transport li span {
    line-height: var(--font-size-8) !important;
    font-size: var(--font-size-10);
}

body[data-size="150"] .planner-realtime-toggle button,
body[data-size="200"] .planner-realtime-toggle button {
    min-height: 36px;
}

body[data-size="150"] .form-material label,
body[data-size="200"] .form-material label {
    top: 18px;
}

body[data-size="200"] .form-material input:focus ~ label,
body[data-size="200"] .form-material input:not(:placeholder-shown) ~ label {
    font-size: var(--font-size-8);
}

body[data-size="150"] .desktop .menu .form-material input:focus ~ label,
body[data-size="150"]
    .desktop
    .menu
    .form-material
    input:not(:placeholder-shown)
    ~ label {
    font-size: var(--font-size-8);
}

body[data-size="200"] .desktop .menu .form-material input:focus ~ label,
body[data-size="200"]
    .desktop
    .menu
    .form-material
    input:not(:placeholder-shown)
    ~ label {
    font-size: var(--font-size-6);
}

body[data-size="150"] .desktop .menu .search input[type="text"] {
    font-size: var(--font-size-11);
}

body[data-size="200"] .desktop .menu .search input[type="text"] {
    font-size: var(--font-size-10);
}

body[data-size="150"] .desktop .menu .search.form-material label,
body[data-size="200"] .desktop .menu .search.form-material label {
    font-size: var(--font-size-12);
}