@charset "utf-8";

* { margin: 0; padding: 0; }

#location,
#region { color: white; display: block; }
#region{ margin-left: 8px; }

#location .material-icons,
#region .material-icons { vertical-align: middle; pointer-events: none; }

.show-schedule { background-color: #0a779a; color: white; padding: 4px; flex-grow: 0; }
.show-platforms { background-color: #dee4e5; color: #0a3057; padding: 5px 8px 5px 5px; border-bottom: 1px solid #ccc; }
.show-platforms.expanded { border-bottom: unset; }
.show-platforms + div { background-color: #dee4e5; padding: 0px 6px 5px 6px; }
.show-platforms + div > div:first-child { padding-top: 4px; border-top: 1px solid #ccc; }

ul.platforms-list { font-size: 0.98em; }
ul.platforms-list > li.platform { padding: 4px 0 4px 0; user-select: none; -webkit-user-select: none; }
ul.platforms-list > li.platform:active{ opacity: 0.8; }

body { width: 100svw; height: 100svh; display: flex; flex-direction: column; margin: 0; padding: 0; color: #242424; font-family: "Roboto", sans-serif; font-size: 16px; }

.mobile-referal { display: flex; align-items: center; margin-bottom: 8px; }
.mobile-referal > a { flex: 1; }
.mobile-referal > a > img:first-child { height: 56px; }

h1 { font-size: 20px; font-weight: 500; }
h1.lite3 { font-size: 18px; }
h1.lite4 { font-size: 17px; }
h1.lite5 { font-size: 16px; font-weight: unset; }
h1 > small { font-size: 12px; display: block; }
h2 { font-size: 19px; font-weight: 500; }
h3 { font-size: 18px; font-weight: 500; }
h4 { font-size: 17px; font-weight: 500; }
h5 { font-size: 16px; font-weight: 500; }
h6 { font-size: 15px; font-weight: 500; }

p { color: #5a6062; font-size: 15px; margin: 0 0 8px 0; padding: 0; }
p small { font-size: 14px; }
p b { color: #242424; }

a:link, a:visited { color: #003893; text-decoration: none; overflow-wrap: break-word; }
a:hover, a:active { color: #C01863; }

p a:link img,
p a:visited img { margin: 25px 0; }

hr { border-bottom: 1px solid #cee3ea; border-top: none; border-left: none; border-right: none; margin-bottom: 20px; padding-top: 10px; }

.route-text { flex-grow: 1; margin: 1px 4px 1px 8px; }

.report.material-icons { background-color: #cb1826; color: white; padding: 4px; }

.content-panel { overflow-x: clip; overflow-y: auto; overscroll-behavior-y: contain; }
.map-panel { height: 100%; z-index: 2000; overflow: clip; }
.content { position: relative; height: 100%; }
.sub-panel { display: flex; height: 95%; overflow-x: clip; overflow-y: auto; overscroll-behavior-y: contain; }

@property --navScale { syntax: "<number>"; initial-value: 1; inherits: true; }
@property --navScale2 { syntax: "<number>"; initial-value: 1; inherits: true; }
#header { flex-shrink: 0; height: calc(52px * var(--navScale)); display: flex; align-items: center; background-color: #073662; z-index: 2002; }
#logo { height: 100%; overflow-y: clip; padding: 0 12px 0 6px; flex: 1 0 auto; display: flex; align-items: center; }
#nav { height: 100%; flex: 0 1 auto; overflow: auto; position: relative; scrollbar-width: thin; }
#nav input[type="checkbox"] { display: none; }
#nav input[type="checkbox"] ~ label { display: none; }
#nav ul { display: flex; position: relative; height: 100%; }
#nav ul li { background-color: #0A487C; border-left: 1px solid #708aa2; list-style: none; position: relative; display: flex; align-items: center; }
#nav ul li.current,
#nav ul li:hover { background-color: #086C8B; }
#nav ul li.current:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #ffffff transparent; margin-left: -10px; position: absolute; bottom: 0; left: 50%; }
#nav li { font-size: calc(18px * var(--navScale2)); }
#nav li a { line-height: calc(52px * var(--navScale)); padding: 0 calc(15px * var(--navScale2)); white-space: nowrap; color: #fff; user-select: none; -webkit-user-select: none; }

#pagenav_language { display: flex; }

#secondary-menu { padding-top: 6px; padding-left: 4px; }
#secondary-menu ul { list-style: none; text-align: right; }
#secondary-menu ul li { border-right: 1px solid #ccc; display: inline-block; font-size: 0.9em; padding: 0 4px 0 4px; }
#secondary-menu ul li:last-of-type { border-right: none; }
#secondary-menu ul li a { background-color: #fff; }
#secondary-menu ul li a:link,
#secondary-menu ul li.current a:link,
#secondary-menu ul li.current a:link { background-color: #edece1; border-radius: 5px; }

a.btn,
input[type="submit"],
input[type="button"] { background-color: #0A487C; border: none; border-radius: 6px; cursor: pointer; color: #fff; display: inline-block; font-size: 1em; padding: 12px; }

a.btn { display: block; font-size: 0.8em; padding: 15px 0 16px 0; text-align: center; }

input,
select { font-family: "Roboto", sans-serif; }

a.btn:active,
input[type="submit"]:active,
input[type="button"]:active { background-color: #086C8B; }

input[type="text"],
input[type="number"],
input[type="email"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
.selectstyle > select { background-color: Background; border: 1px solid #097598; border-radius: 4px; padding: 6px; font-size: 1em; -webkit-appearance: none; appearance: none; width: 100%; }

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
.selectstyle > select:focus { outline: none; border-color: #81A1AB; }

.selectstyle > select { padding-right: 2.5em; background-position: calc(100% - 12px) 13px, calc(100% - 7px) 13px, calc(100% - 23px) 6px; background-color: Background; background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-size: 5px 5px, 5px 6px, 1px 18px; background-repeat: no-repeat; -webkit-box-sizing: border-box; box-sizing: border-box; }
.selectstyle > select:focus { background-position: calc(100% - 7px) 12px, calc(100% - 12px) 12px, calc(100% - 23px) 6px; background-image: linear-gradient(45deg, gray 50%, transparent 50%), linear-gradient(135deg, transparent 50%, gray 50%), linear-gradient(to right, #ccc, #ccc); background-size: 5px 5px, 6px 5px, 1px 18px; background-repeat: no-repeat; outline: 0; }

.error select,
.error input[type="text"],
.error input[type="number"],
.error input[type="email"] { border: 2px solid #f30000; }

.error:before { background-color: #f30000; color: #fff; border-radius: 4px 4px 0 0; content: attr(data-err); display: block; font-size: 0.8em; width: 50%; padding: 4px 8px 2px 8px; }
.error.selectstyle:after { top: 36px; }
.error-message { background-color: #f7cbcb; border: 2px solid #f30000; border-radius: 7px; color: #f30000; margin: 9px 0; padding: 9px 15px; }
.error-message p { color: #f30000; margin: 0; }

.content-width { margin: auto; padding: 0.5% 0.5% 0 0.5%; max-width: 1360px; flex: 1 0 0; overflow: auto; }
.content-width h1, h2 { padding-bottom: 6px; padding-left: 2px; }
.content-width h1.lite3, h1.lite4, h1.lite5 { padding-bottom: unset; padding-left: unset; }
.content-width > div:first-child > h2 > span { display: block; }

.frame-a { background-color: #cee3ea; border-radius: 6px; padding: 1%; }
.frame-a > form > div:first-child { display: flex; }
.frame-a h1.lite3, h1.lite4, h3 { padding-left: 2px; padding-bottom: 2px; }
.frame-b { background-color: #097598; border-radius: 6px; color: #fff; padding: 8px; }
.frame-b p { color: #fff; }
.frame-c { background-color: #edece1; border-radius: 12px; margin: 0; padding: 15px 35px; }
.frame-c h2 { border-bottom: 2px solid #fff; margin: 0 -35px 20px -35px; padding: 0 20px 9px 20px; }
.frame-c p { color: #242424; }

.horz-sep { display: flex; align-items: center; margin: 12px 0px; }
.horz-sep:before,
.horz-sep:after { content: ""; flex-grow: 1; background-color: #87a5b9; height: 1px; font-size: 0px; margin: 0px 6px; }
.horz-sep > span { background-color: #5F748A; border-radius: 16px; color: #fff; font-size: 1em; padding: 6px 8px 6px 8px; }

#bustimes-wrap { display: flex; background-color: #cee3ea; }
#bustimes-wrap > div:first-child { flex: 1; }
#bustimes-wrap > div:first-child > form:last-child > div.selectstyle:nth-child(4) { margin: 2px 0 2px 0; }
#bustimes-wrap > div:first-child > form:last-child > div:first-child > input:first-child { text-transform: uppercase; }
#bustimes-wrap > div:first-child > form:last-child > div:first-child > input:first-child::placeholder { text-transform: none; }
#bustimes-wrap > div:last-child { flex: 1.5; margin: 14px; }

.submit-eta { width: 100%; }
#eta-out-wrap p { margin: 0; font-style: italic; }
div.stop-label { font-size: 1.1em; margin-bottom: 8px; }

ul.stop-wait-times { color: #272727; list-style: none; margin: 0; padding: 0 0 10px 0; display: flex; align-items: center; }
ul.stop-wait-times > li { font-size: 1.2em; height: 48px; padding: 0 0 0 9px; position: relative; display: flex; align-items: center; }
ul.stop-wait-times > li:first-child { background-color: #fff; border-left: 4px solid #000; padding: 0 4px 0 4px; font-size: 1.1em; font-weight: 500; }
ul.stop-wait-times > li:first-child:after { border-style: solid; border-width: 24px 0 24px 6px; border-color: transparent transparent transparent #ffffff; content: ""; height: 0; position: absolute; top: 0; right: -6px; width: 0; z-index: 1; }
ul.stop-wait-times > li:first-child > div { overflow-y: clip; max-height: 44px; }
ul.stop-wait-times > li:nth-child(2) { background-color: #E2EAEC; padding-left: 14px; }
ul.stop-wait-times > li:nth-child(3) { background-color: #CBD9DD; }
ul.stop-wait-times > li:nth-child(4) { background-color: #B2C7CD; }
ul.stop-wait-times > li:nth-child(5) { background-color: #99B5BD; }
ul.stop-wait-times > li:nth-child(6) { background-color: #80A4AC; }
ul.stop-wait-times > li:nth-child(7) { background-color: #7A9CA3; }
ul.stop-wait-times > li:nth-child(n+8) { display: none; }
ul.stop-wait-times > li.static { padding-left: 12px; padding-right: 8px; }
ul.stop-wait-times > li:not(:first-child) > div > span { flex: 1; text-align: right; }
ul.stop-wait-times > li:not(:first-child) > div > small { padding-left: 1px; font-size: 11px; }
ul.stop-wait-times > li:not(:first-child) > i:last-child { align-self: flex-start; margin-left: -4px; padding: 0 0 2px 2px; font-size: 12px; opacity: 0.5; transform: rotate(180deg); }

.eta-project-group { padding: 20px 0 0 0; position: relative; }
.eta-project-group > span:first-child { color: #e2eaec; font-size: 0.8em; position: absolute; top: 0; left: 0; z-index: 9; }

.unformat li { list-style-position: inside; }
.unformat li:has(> a:first-child ) { padding: 3px 0; }
.unformat h4 { background: none; padding: 5px 0 2px 0; }
.unformat h4 ~ section { margin-left: 15px; }
.unformat h3 ~ section { margin-bottom: 15px; }
.unformat h3 { margin-bottom: 0; }
.unformat ul { margin-left: 10px; }

.divMap, .divMapTP { position: absolute; width: calc(100% - 310px); height: 100%; background-color: #E9E6DF; }
.divMapTP { width: calc(100% - 360px); }

#svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }

#map-side-route-info-wrap { position: absolute; top: 0; right: 0; width: 310px; height: 100%; z-index: 2003; border-left: 1px solid #827F81; background-color: #f5fafb; }
#map-side-route-info-wrap::-webkit-scrollbar { width: 4px; }
#map-side-route-info-wrap::-webkit-scrollbar-track { background-color: #FFF; margin: 12px 0; }
#map-side-route-info-wrap::-webkit-scrollbar-thumb { background-color: #0a779a; }

.flex { display: flex !important; }
#tp-trip-info-wrap { position: absolute; top: 0; right: 0; width: 360px; height: 100%; z-index: 2003; border-left: 1px solid #827F81; background-color: #f5fafb; touch-action: none; }
#tp-trip-info-wrap > div:last-child { background-color: #FFF; border-bottom: 1px solid #ccc; padding: 3px; }
#tripinfo-wrap { max-height: calc(100svh - (52px * var(--navScale)) - 202px); padding: 3px 0 3px 0; overflow-x: clip; overflow-y: auto; overscroll-behavior-y: contain; color: #073662; font-size: 0.9em; display: flex; flex-direction: column; }
#tripinfo-wrap.opt-dt { max-height: calc(100svh - (52px * var(--navScale)) - 241px); }
#tripinfo-wrap > div { display: flex; }
#tripinfo-wrap > div > div:first-child { width: 56px; flex-shrink: 0; padding: 2px 5px 0 0; text-align: right; }
#tripinfo-wrap > div > div:last-child { flex-grow: 1; display: flex; flex-direction: column; }
#tripinfo-wrap > div > div:last-child > div { display: flex; }
#tripinfo-wrap > div > div:last-child > div:last-child { margin: 6px 0 6px 0; }
#tripinfo-wrap > div > div:last-child > div > div:first-child { width: 30px; flex-shrink: 0; display: flex; }
#tripinfo-wrap > div > div:last-child > div > div:first-child > div { border-left: 6px dotted #0A779A; margin-left: 9px; }
#tripinfo-wrap > div > div:last-child > div > div:first-child > div.route { border-left-style: solid;  }
#tripinfo-wrap > div > div:last-child > div:first-child > div:last-child { flex-grow: 1; padding-top: 2px;}
#tripinfo-wrap > div > div:last-child > div:first-child > div:last-child > span:first-child { font-weight: bold; }
#tripinfo-wrap > div > div:last-child > div:last-child > div:last-child { display: flex; flex-direction: column; padding: 8px 0 8px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
#tripinfo-wrap > div > div:last-child > div:last-child > div:last-child > span:first-child { font-weight: bold; }
#tripinfo-wrap > div:not(:first-child):not(:last-child) > div:last-child > div > div:first-child > i { font-size: 22px; margin-left: 1px; }
#tripinfo-wrap > div:last-child > div:last-child > div:last-child { display: none; }

#trip-opts { font-size: 13px; border: none; }
#trip-opts > legend:first-child { display: none; }
#trip-opts > div:nth-child(2) { display: flex; }
#trip-opts > div:nth-child(2) > span { display: flex; align-items: center; justify-content: center; }
#trip-opts > div:nth-child(2) > span:nth-child(2) { flex: 1 1 auto; }
#trip-opts > div:nth-child(2) > span > label { border-bottom: transparent 2px solid; padding: 0 2px; user-select: none; -webkit-user-select: none; padding: 6px; border: black 1px solid; margin: 0 auto; min-width: 80px; text-align: center; display: inline; }
#trip-opts > div:nth-child(2) > span > input { display: none; }
#trip-opts > div:nth-child(2) > span > input:checked ~ label { border: #0a779a 2px solid; background-color: #0a779a; color: white; }
#trip-opts > div:nth-child(2) > span > input:disabled ~ label { color: #A3A3A3; }
#trip-opts > div:nth-child(3) { display: flex; padding: 4px 0 4px 0; }
#trip-opts > div:nth-child(3) > input:first-child { border: 1px solid #000; border-radius: unset; padding: 6px; background-color: Background; }
#trip-opts > div:nth-child(3) > input:first-child:invalid { color: red; }
#trip-opts > div:last-child { padding-top: 8px; }
#trip-opts > div:last-child > select { border: 1px solid #000; border-radius: unset; height: 32px; }
#trip-opts > div:last-child > select:focus { border-color: unset; }

#tripinfo-error { color: red; padding: 6px; text-align: center; }

#sbr-wrap { background: linear-gradient(#073662,#062B4E); color: #fff; padding: 5px 4px 5px 6px; display: flex; align-items: center; }
#sbr-wrap > div:first-child { flex-grow: 1; pointer-events: none; }
#sbr-wrap > div:first-child > i:first-child { display: none; }
#sbr-wrap .selectstyle { margin: 0; position: relative; }
#sbr-wrap .selectstyle select { padding: 9px; }
#sbr-wrap .selectstyle:after { top: 11px; }

.location-disabled { background-color: #65787d !important; }

#businfo-wrap { max-height: calc(100svh - (52px * var(--navScale)) - 34px); background-color: #fff; padding: 0; overflow-x: clip; overflow-y: auto; overscroll-behavior-y: contain; }
#businfo-wrap > div:first-child { border-top: 1px solid #ccc; }
#businfo-wrap > div:first-child > select { border-radius: unset; border: 0; padding-left: 6px; background-color: #073662; color: #FFF; background-image: linear-gradient(45deg, transparent 50%, lightgray 50%), linear-gradient(135deg, lightgray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); }
#businfo-wrap > div:first-child > select:focus { background-image: linear-gradient(45deg, lightgray 50%, transparent 50%), linear-gradient(135deg, transparent 50%, lightgray 50%), linear-gradient(to right, #ccc, #ccc); }
#businfo-wrap > div:nth-child(2) > div > div:first-child { background-color: #000; border-top: 1px solid #ccc; color: #fff; padding: 5px 8px 5px 4px; }
#businfo-wrap > div:nth-child(2) > div > div:nth-child(2) > ul { list-style: none; }
#businfo-wrap > div:nth-child(2) > div > div:nth-child(2) > ul > li { border-left: 4px solid #000; }
#businfo-wrap > div:nth-child(2) > div > div:nth-child(2) > ul > li:has(input[type="checkbox"]:checked) { border-left-width: 6px; }
#businfo-wrap > div:nth-child(2) > div > div:nth-child(2) > ul > li > input[type="checkbox"] { display: none; }
#businfo-wrap > div:nth-child(2) > div > div:nth-child(2) > ul > li > input[type="checkbox"]:checked ~ label { background-color: #dee4e5; }
#businfo-wrap > div:nth-child(2) > div > div:nth-child(2) > ul > li > input[type="checkbox"]:checked ~ label > span.route-text { margin-left: 6px; }
#businfo-wrap > div:nth-child(2) > div > div:nth-child(2) > ul > li > label { min-height: 34px; display: flex; align-items: center; color: #0a3057; user-select: none; -webkit-user-select: none; }
#businfo-wrap > div:nth-child(2) > div > div:nth-child(2) > ul > li > label:before { display: none; }
#businfo-wrap > div:nth-child(2) > div > div:nth-child(2) > ul > li:nth-child(odd) > label { background-color: #f5fafb; }

.route-alert-wrap { background-color: #cb1826; color: #fff; padding: 4px; display: none; font-size: 15px; }

.agency-alert-wrap { background-color: #cb1826; border-top: 1px solid #ccc; color: #fff; padding: 5px 4px 5px 4px; }
.agency-alert-wrap:has(> div:last-child:empty) { display: none; }
.agency-alert-wrap > div:last-child { background-color: #cb1826; color: #fff; padding: 4px 4px 0 4px; display: none; font-size: 15px; margin-top: 8px; border-top: 1px solid #eaa; }

.alert:not(:first-child) { border-top: 1px solid #eaa; padding-top: 4px; margin-top: 8px; }
.alert span:first-child { font-weight: 400; }
.alert > span:first-child { font-weight: 460; }
.alert > p { font-weight: 360; color: #fff; white-space: pre-line; margin: unset; padding: unset; }
.alert > p:last-child { margin-top: 6px; }

#mapkey-wrap { background: linear-gradient(#006f8c,#073662); color: #fff; border-top: 1px solid #ccc; border-bottom: 1px solid #827F81; padding: 5px 8px 5px 4px; }
#mapkey-wrap > div:last-child { padding: 2px; margin-top: 4px; font-size: 15px; }
#mapkey-wrap > div:last-child > div:first-child { display: flex; padding: 4px 0 4px 1px; border-top: 1px solid #079; flex-flow: row wrap; align-items: center; }
#mapkey-wrap > div:last-child > div:first-child > div { padding: 6px 6px 6px 0; position: relative; width: 128px; display: flex; align-items: center; }
#mapkey-wrap > div:last-child > div:first-child > div > img { height: 32px; }
#mapkey-wrap > div:last-child > div:first-child > div > span { padding-left: 6px; width: 64px; }
#mapkey-wrap > div:last-child > div:first-child > div:nth-child(5) > i { width: 32px; text-align: center; transform: rotate(180deg); }
#mapkey-wrap > div:last-child > div:last-child { text-align: center; }

#subscription-interstitial-wrap { display: none; }
#subscription-interstitial-wrap.shown { display: flex; background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2003; justify-content: center; }

#subscription-interstitial { display: flex; flex-direction: column; max-width: 700px; position: absolute; margin: 25svh 15px 0; background-color: white; padding: 20px; -webkit-box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14), 0 4px 18px 3px rgba(0, 0, 0, 0.12) !important; box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14), 0 4px 18px 3px rgba(0, 0, 0, 0.12) !important; border-radius: 5px; }
#subscription-interstitial > h2 { display: flex; align-items: center; }
#subscription-interstitial > h2 > i { flex-grow: 1; font-weight: bold; padding: 10px; cursor: pointer; text-align: right; }

#subscription-interstitial-platform-name { font-weight: lighter; font-size: 1.2em; text-align: center; }

.continue-to-subscription { background-color: #e89f1e; padding: 7px 10px 7px 20px; border-radius: 8px; border: #c98000 1px solid; color: white !important; display: inline-flex; align-items: center; margin: 5px 0; cursor: pointer; }
.continue-to-subscription:hover { color: black !important; }
.continue-to-subscription::after { content: "chevron_right"; font-family: Material Icons; font-size: 1.4em; }

#continue-to-subscriptions-wrap { margin-top: 15px; display: inline-flex; flex-direction: column; align-items: flex-start; }

.map-vehicle-wrap,
.map-platform-eta-wrap { width: 100%; flex: 1 0 auto; background-color: #ccc; }

.PopupDrag { cursor: pointer; pointer-events: auto; }
.PopupDragAlt { cursor: pointer; pointer-events: none; }

.mapinfo-wrap,
.vehicleinfo-wrap,
.connectioninfo-wrap { width: 344px; color: #fff; background-color: #fff; position: absolute; z-index: 2001; box-shadow: 4px 4px 3px 1px rgba(0, 0, 0, 0.25); border-radius: 4px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }

.vehicleinfo-wrap { width: 216px; }

.expander { position: relative; display: flex; align-items: center; user-select: none; -webkit-user-select: none; }
.expander > i:first-child { margin-right: 4px; background-size: 22px; background-position: center; background-repeat: no-repeat; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" enable-background="new 0 0 22 22" height="22px" width="22px"><circle cx="11" cy="11" r="9"/></svg>'); }
.expander.outline > i:first-child { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" enable-background="new 0 0 22 22" height="22px" width="22px"><circle cx="11" cy="11" r="9" stroke="black" stroke-opacity="0.1" stroke-width="4"/></svg>'); }
.expander > *:nth-child(2) { margin: 1px 0 0 0; }
.expander.hidden > i:first-child { display: none; }
.expander.expanded > i:first-child { transform: rotate(180deg); }
.expander > * { pointer-events: none;  }

.pinned-close { position: absolute; top: 0; right: 0; z-index: 1; display: none; align-items: center; background-color: #cb1826; border-top-right-radius: 4px; }
.pinned-close > i { font-size: 21px; pointer-events: none; }

.mapinfo-header { background-color: #073662; padding: 4px; display: flex; align-items: center; border-radius: 4px 4px 0 0px; }
.mapinfo-header > div:first-child { flex: 0 0 auto; }
.mapinfo-header > div:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 0 6px 0 3px; }
.mapinfo-header > div:nth-child(2) > div { white-space: nowrap; overflow: clip; text-overflow: ellipsis; width: calc(100% - 16px); }
.mapinfo-header > div:nth-child(3) { flex: 0 0 auto; position: relative; bottom: -10px; left: -21px; display: flex; flex-direction: column; align-items: center; }
.mapinfo-header > div:nth-child(3) > small { font-size: 10px; }
.mapinfo-header > div:nth-child(3) > small:last-child { margin: -3px 0 -1px 0; }

.map-vehicle-wrap > .mapinfo-header > div:first-child { display: flex; background-color: #FFF; border-radius: 4px; }
.map-vehicle-wrap > .mapinfo-header > div:nth-child(2) { font-size: 0.9em; padding-left: 6px; }

.mapinfo-eta { color: #073662; }
.mapinfo-eta .bus-eta { width: 64px; }
.mapinfo-eta:has(.bus-eta.static) .bus-eta { width: 82px; }
.mapinfo-eta:has(.connection-row) { background-color: #073662; padding: 0 2px 2px 0; }

.no-eta-bus-row { display: flex; align-items: center; font-style: italic; font-size: 0.8em; height: 40px; padding: 0; }
.no-eta-bus-row:has(+ div.eta-bus-row) { display: none; }
.no-eta-bus-row > span { flex: 1; text-align: center; }

.eta-bus-row { height: 40px; display: flex; font-size: 15px; background-color: #fff; padding: 0; width: 100%; }
.eta-bus-row:not(:first-child) { border-top: 1px solid #073662; }
.eta-bus-row .bus-eta:after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 20px 0 21px 9px; border-color: transparent; }
.eta-bus-row:nth-of-type(odd) .bus-eta:after { border-left-color: #ffffff; }
.eta-bus-row:nth-of-type(even) .bus-eta:after { border-left-color: #f5fafb; }
.eta-bus-row:nth-child(n+10) { display: none; }

.bus-route { flex-grow: 1; display: flex; align-items: center; border-left: 4px solid #000; padding: 2px 4px; overflow-y: clip; }
.bus-route > span { max-height: 36px; font-weight: 600; }

.bus-eta { flex-shrink: 0; display: flex; align-items: center; justify-content: right; position: relative; background-color: #097598; color: #fff; }
.bus-eta > div:first-child > small { margin-left: 2px; font-size: 11px; }
.bus-eta.static > div:first-child > small { margin-right: 12px; }
.bus-eta > i:last-child { align-self: flex-start; margin-left: -4px; padding: 0 0 2px 2px; font-size: 12px; opacity: 0.5; transform: rotate(180deg); }

.mapinfo-header,
.mapinfo-footer { box-sizing: border-box; }

.mapinfo-footer { display: flex; background-color: #073662; height: 23px; padding: 0 4px 0 1px; border-radius: 0 0 4px 4px; font-size: 0.8em; /*overflow-y: clip;*/ }
.mapinfo-footer:has(> div:first-child:not(:empty)) { height: 24px; }
.mapinfo-footer > div:first-child { flex: 0; display: flex; align-items: center; }
.mapinfo-footer > div:first-child > i { pointer-events: none; }
.mapinfo-footer > div:last-child { flex: 1; display: flex; align-items: center; text-align: right; }
.mapinfo-footer > div:last-child > span { flex: 1; }

.map-vehicle-wrap ~ .mapinfo-footer > div:first-child { flex: 0; }
.connectioninfo-wrap .mapinfo-footer { display: none; }

.connection-row { display: flex; background-color: #f9f9f9; padding-right: 6px; }
.connection-row:not(:first-child) { border-top: 1px solid #073662; }
.connection-row > div:first-child { background-color: #073662; display: flex; align-items: center; padding: 2px; }
.connection-row > div:first-child > i:first-child { color: white; }
.connection-row > div:nth-child(2) { padding-left: 6px; padding-top: 2px; }
.connection-row > div:nth-child(2) > p { font-size: 0.8em; margin: 0 0 6px 0; }

/*-map info wrap pointer-*/
.top-middle:after { border-width: 0 6px 10px 6px; border-color: transparent transparent #073662 transparent; top: -9px; left: 50%; margin-left: -6px; content: ""; border-style: solid; position: absolute; pointer-events: none; }
.top-left:after { border-width: 0 6px 10px 6px; border-color: transparent transparent #073662 transparent; top: -9px; left: 6px; content: ""; border-style: solid; position: absolute; pointer-events: none; }
.top-right:after { border-width: 0 6px 10px 6px; border-color: transparent transparent #073662 transparent; top: -9px; right: 6px; content: ""; border-style: solid; position: absolute; pointer-events: none; }
.bottom-middle:after { border-width: 10px 6px 0 6px; border-color: #073662 transparent transparent transparent; bottom: -9px; left: 50%; margin-left: -6px; content: ""; border-style: solid; position: absolute; pointer-events: none; }
.bottom-left:after { border-width: 10px 6px 0 6px; border-color: #073662 transparent transparent transparent; bottom: -9px; left: 6px; content: ""; border-style: solid; position: absolute; pointer-events: none; }
.bottom-right:after { border-width: 10px 6px 0 6px; border-color: #073662 transparent transparent transparent; bottom: -9px; right: 6px; content: ""; border-style: solid; position: absolute; pointer-events: none; }
.left-middle:after { border-width: 6px 10px 6px 0; border-color: transparent #073662 transparent transparent; left: -9px; top: 50%; margin-top: -6px; content: ""; border-style: solid; position: absolute; pointer-events: none; }
.left-top:after { border-width: 6px 10px 6px 0; border-color: transparent #073662 transparent transparent; left: -9px; top: 6px; content: ""; border-style: solid; position: absolute; pointer-events: none; }
.left-bottom:after { border-width: 6px 10px 6px 0; border-color: transparent #073662 transparent transparent; left: -9px; bottom: 6px; content: ""; border-style: solid; position: absolute; pointer-events: none; }
.right-middle:after { border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #073662; right: -9px; top: 50%; margin-top: -6px; content: ""; border-style: solid; position: absolute; pointer-events: none; }
.right-top:after { border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #073662; right: -9px; top: 6px; content: ""; border-style: solid; position: absolute; pointer-events: none; }
.right-bottom:after { border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #073662; right: -9px; bottom: 6px; content: ""; border-style: solid; position: absolute; pointer-events: none; }

.agencytitle { border-top: 1px solid #cee3ea; }
.agencytitle > h4:first-child { display: inline-block; padding: 3px 7px 3px 4px; margin-bottom: 4px; border-radius: 0 0 8px 0; background-color: #cee3ea; }
.agencytitle > h5:first-child { display: inline-block; padding: 2px 6px 2px 4px; margin-bottom: 4px; border-radius: 0 0 7px 0; background-color: #cee3ea; }

.agencydetails { display: flex; padding: 0 4px 4px 4px; }
.agencydetails:not(:last-child) { margin-bottom: 4px; }
.agencydetails > div.agency1 { width: 336px; margin-right: 16px; }
.agencydetails > div.agency2 { width: 480px; margin-right: 16px; }
.agencydetails > div.agency3 { width: 256px; }
.agencydetails > div.agency3 > img { max-width: 256px; }
.agencydetails > ul { list-style: none; font-size: 15px; }

.agencydetails:has(> div.alert2) { flex-direction: column; }
.alert2:not(:first-child) { border-top: 1px solid #cee3ea; margin-top: 4px; padding-top: 4px; }
.alert2 span:first-child { font-size: 15px; font-weight: 400; color: #000; }
.alert2 > span:first-child { font-weight: 460; }

.route-timetable-wrap { border-bottom: 1px solid #ccc; padding: 6px; }

.tt-routeselect-wrap { background-color: #dee4e5; display: flex; flex-direction: column; }
.tt-routeselect-wrap fieldset { border: none; display: block; margin: 2px; padding: 0; position: relative; }
.tt-routeselect-wrap fieldset legend { display: block; font-size: 15px; padding: 8px 0 2px 6px; text-align: left; }

.route-timetable fieldset input[type="radio"] { display: none; }
.route-timetable fieldset input[type="radio"] ~ label { background-color: #073662; border-bottom: 4px solid #073662; border-radius: 5px 5px 0 0; color: #fff; display: inline-block; font-size: 0.9em; margin: 2px 3px 0 3px; padding: 4px 8px 0px 8px; }
.route-timetable fieldset input[type="radio"]:checked + label { background-color: #097598; border-bottom-color: #097598; padding-top: 6px; margin-top: 0; }

#timetable-detail-wrap { overflow-x: scroll; }
table.timetable-detail { border-collapse: collapse; border-bottom: 1px solid #7498b5; border-top: 1px solid #7498b5; font-size: 0.8em; min-width: 100%; table-layout: fixed; }
table.timetable-detail tr:nth-of-type(even) { background-color: #f5fafb; }
table.timetable-detail th { background-color: #073662; border-bottom: 1px solid #7498b5; border-right: 1px solid #7498b5; color: #fff; margin: 0; padding: 4px 2px 4px 2px; font-weight: normal; }
table.timetable-detail td { border-right: 1px solid #bcc7d0; margin: 0; padding: 6px 4px 6px 4px; text-align: center; }
table.timetable-detail tr:hover td,
table.timetable-detail tr:active td { background-color: #097598; color: #fff; }

.pagenav { min-width: 118px; display: flex; align-items: center; background-color: transparent; color: #fff; padding-left: 8px !important; user-select: none; -webkit-user-select: none; }
.pagenav > i { font-size: 20px; }
.pagenav > select { font-size: 16px; padding-right: unset; border-radius: unset; border: 0; background-color: transparent; color: #FFF; background-image: linear-gradient(45deg, transparent 50%, lightgray 50%), linear-gradient(135deg, lightgray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); }
.pagenav > select:focus { background-image: linear-gradient(45deg, lightgray 50%, transparent 50%), linear-gradient(135deg, transparent 50%, lightgray 50%), linear-gradient(to right, #ccc, #ccc); }
.pagenav > select > option { background-color: #0B4578; }

#dragwrap-start, #dragwrap-end { display: flex; }
#dragwrap-end{ margin: 6px 0 10px 0; }
#dragwrap-start > div:first-child, #dragwrap-end > div:first-child { width: 32px; user-select: none; -webkit-user-select: none; display: flex; align-items: center; }
#dragwrap-start > div:first-child:has(> .dragpin.disabled), #dragwrap-end > div:first-child:has(> .dragpin.disabled) { pointer-events: none; }
#dragwrap-start > div:last-child, #dragwrap-end > div:last-child { flex: 1 }
#dragwrap-start > div:last-child > input, #dragwrap-end > div:last-child > input { flex: 1; border-radius: 0; border-style: none none solid none; width: 100%; height: 36px; }

.dragpin { pointer-events: none; user-select: none; -webkit-user-select: none; }
.dragpin.disabled { opacity: 0.25; }
.dragpin.dragging { position: absolute; left: 0px; opacity: unset; z-index: 2003; }

@keyframes loading-marquee { from { transform: translateX(0px); } to { transform: translateX(330px); } }
#loading-marquee-wrap circle { animation-name: loading-marquee; animation-duration: 0.8s; animation-iteration-count: infinite; animation-direction: alternate; }

#sub-iframe { width: 100%; flex-grow: 1; margin-top: 0px !important; overflow: auto !important; }

/*Media queries*/
@media only screen and (pointer: fine) and (hover: hover)
{
    #svg-platforms, #svg-stations, #svg-vehicles, #svg-connections, #svg-regions { cursor: pointer; }
}

@media only screen and (max-width: 1366px)
{
    #header { height: calc(48px * var(--navScale)); }
    #nav li { font-size: calc(17px * var(--navScale2)); }
    #nav li a { line-height: calc(48px * var(--navScale)); padding: 0 calc(13px * var(--navScale2)); }

    ul.stop-wait-times > li:nth-child(n+6) { display: none; }
    .eta-bus-row:nth-child(n+9) { display: none; }

    #businfo-wrap { max-height: calc(100svh - (48px * var(--navScale)) - 34px); }
    #tripinfo-wrap { max-height: calc(100svh - (48px * var(--navScale)) - 202px); }
    #tripinfo-wrap.opt-dt { max-height: calc(100svh - (48px * var(--navScale)) - 241px); }
}

@media only screen and (min-width: 1024px)
{
    #businfo-wrap, #drag-wp-wrap { display: block !important; }
}

@media only screen and (max-width: 1023px)
{
    #header { height: calc(44px * var(--navScale)); flex-direction: row-reverse; padding: 0 3px 0 3px; }
    #logo { padding: 0 32px 0 6px; }
    #logo > img { margin: 0px auto 0px auto; }

    #map-side-route-info-wrap { right: 0; width: 100svw; position: absolute; overflow: auto; height: auto; }

    #tp-trip-info-wrap { position: relative; left: 0; right: auto; height: unset; width: unset; border-left: unset; }

    .divMap, .divMapTP { top: 29px; width: 100%; height: calc(100% - 29px); right: unset; bottom: 0; }

    #sbr-wrap { padding-top: 0; padding-left: 4px; }
    #sbr-wrap > div:first-child { pointer-events: unset; }
    #sbr-wrap > div:first-child > i:first-child { display: unset; }

    #businfo-wrap { max-height: calc(100svh - (44px * var(--navScale)) - 29px); }
    #tripinfo-wrap { max-height: calc(100svh - (44px * var(--navScale)) - 201px); }
    #tripinfo-wrap.opt-dt { max-height: calc(100svh - (44px * var(--navScale)) - 240px); }

    /*Minimized Menu*/
    #nav { padding: 1px; overflow: unset; position: unset; height: unset; }
    #nav input[type="checkbox"] { display: none; }
    #nav input[type="checkbox"] ~ label { display: block; width: 24px; height: 24px; cursor: pointer; }
    #nav input[type="checkbox"] ~ label > i { color: white; }
    #nav input[type="checkbox"] ~ label > i:last-child { display: none; }
    #nav input[type="checkbox"]:checked ~ label > i:first-child { display: none; }
    #nav input[type="checkbox"]:checked ~ label > i:last-child { display: unset; }
    #nav input[type="checkbox"] ~ ul { position: absolute; top: calc(44px * var(--navScale)); right: 0; width: 100%; background-color: #08467a; display: none; }
    #nav input[type="checkbox"]:checked ~ ul { display: block; z-index: 999; }
    #nav input[type="checkbox"] ~ ul li { border-left: none; }
    #nav input[type="checkbox"]:checked ~ ul li { border-bottom: 1px solid #708aa2; }
    #nav input[type="checkbox"]:checked ~ ul li .pagenav,
    #nav input[type="checkbox"]:checked ~ ul li a:link,
    #nav input[type="checkbox"]:checked ~ ul li a:visited { max-width: unset; text-align: unset; width: 100%; padding: 8px; line-height: unset; }
    #nav input[type="checkbox"] ~ ul li.current:after { display: none; }
    #nav ul { position: unset; height: unset }
    #nav ul li { height: unset; display: flex; align-items: center; font-size: unset; }
    #nav ul li:last-of-type { border-radius: 0; }

    ul.stop-wait-times > li:nth-child(5) { display: none; }
    .eta-bus-row:nth-child(n+8) { display: none; }

    .agencydetails > div.agency3 { width: 192px; }
    .agencydetails > div.agency3 > img { max-width: 192px; }
}

@media only screen and (max-width: 896px) {
    ul.stop-wait-times > li:nth-child(4) { display: none; }
}

@media only screen and (max-width: 768px)
{
    ul.stop-wait-times > li:nth-child(4),
    ul.stop-wait-times > li:nth-child(5) { display: flex; }

    .agencytitle > h4:first-child,
    .agencytitle > h5:first-child { max-width: calc(100svw - 32px); }

    .agencydetails { flex-direction: column; }
    .agencydetails > div.agency1 { width: unset; margin-right: unset; }
    .agencydetails > div.agency2 { width: unset; margin-right: unset; }
    .agencydetails > div.agency3 { display: none; }

    #bustimes-wrap { flex-direction: column; }
    #bustimes-wrap > div:first-child { flex: 0; }
    #bustimes-wrap > div:last-child { flex: 0; margin: 6px 0 0 0; }
}

@media only screen and (max-width: 640px)
{
    ul.stop-wait-times > li:nth-child(5) { display: none; }
}

@media only screen and (max-width: 512px)
{
    #header { height: calc(40px * var(--navScale)); }
    #nav input[type="checkbox"] ~ ul { top: calc(40px * var(--navScale));  }

    .mobile-referal > a > img:first-child { height: 48px; }

    .content-width:has(.frame-a) { padding: 0; }
    .content-width { padding: 5px 5px 0 5px; }

    .frame-a { border-radius: 0; padding: 4px; }
    .frame-a > h3 { padding-top: 4px; }
    .frame-b { padding: 6px; border-radius: 0; }

    .eta-stop-wrap > span:first-child { display: block; text-align: center; }

    div.stop-label { font-size: 1em; margin: 0 0 8px 0; }

    .submit-eta { padding: 8px !important; }

    ul.stop-wait-times > li { font-size: 1em; padding-left: 10px; }
    ul.stop-wait-times > li:first-child { font-size: 15px; }
    ul.stop-wait-times > li:first-child > div { max-height: 36px; }
    ul.stop-wait-times > li:nth-child(2) { padding-left: 12px; }
    ul.stop-wait-times > li.static { padding-left: 11px; padding-right: 7px; }
    ul.stop-wait-times > li > div > i:last-child { font-size: 11px; }
    ul.stop-wait-times > li:nth-child(4) { display: none; }

    .mapinfo-wrap,
    .vehicleinfo-wrap,
    .connectioninfo-wrap { width: 100svw; min-height: 0; background-color: transparent; border-radius: 0; border-top: 1px solid #ccc; z-index: 2002; top: 29px !important; left: 0 !important; cursor: unset; }
    .pinned-close { border-top-right-radius: unset; }

    #subscription-interstitial { margin: 0; align-self: flex-end; border-radius: 0; padding-bottom: 30px; max-height: 70%; overflow: auto; }

    .mapinfo-header { width: 100%; position: relative; border-radius: 0 !important; }

    .mapinfo-label > span:first-child { width: 272px; }

    .mapinfo-footer { border-radius: 0; }
    .mapinfo-footer > div:first-child > div:first-child { border-bottom-left-radius: unset; }

    #businfo-wrap { max-height: calc(100svh - (40px * var(--navScale)) - 29px); }
    #tripinfo-wrap { max-height: calc(100svh - (40px * var(--navScale)) - 201px); }
    #tripinfo-wrap.opt-dt { max-height: calc(100svh - (40px * var(--navScale)) - 240px); }

    .pagenav { padding: 3px 1px 2px 5px !important; flex: 1; }
    .pagenav > i { font-size: 19.5px; }

    .top-middle:after, .top-left:after, .top-right:after, .bottom-middle:after, .bottom-left:after, .bottom-right:after,
    .left-middle:after, .left-top:after, .left-bottom:after, .right-middle:after, .right-top:after, .right-bottom:after { display: none; }
}

@media only screen and (max-height: 512px)
{
    .eta-bus-row:nth-child(n+4) { display: none; }
}