* {cursor: none;}
html, body {height: 100%;}

body {background-color: #000; color: #eee; font-family: sans-serif; font-weight: bold; font-size: 140%; overflow: hidden; position: relative;}
div#main {}

div.left{float: left; margin-left: 10px;}
div.right{float: right; margin-right: 10px;}

div.third {float: left; width: 33%; display: inline;}
div.half {width: 47%; display: inline;}

div.header {vertical-align: middle;}


div.arrival {margin: 6px; margin-left: 10px; margin-right: 10px; background-color: #101010;}
div.arrival div {color: #eee;}
/*div.cta {color: #0a79c3;}
div.uchicago {color: #800000; }
div.metra {color: #ff6f2a; }
div.ssl {color: #7f2620; }*/

div.arrival div.route {background-color: #0a79c3; color: #fff; padding: 10px; height: 100%; width: 50px; margin-right: 10px; text-align: center; float: left; font-size: 190%;}
div.cta div.route {background-color: #0a79c3;}
div.uchicago div.route {background-color: #800000;}
div.metra div.route {background-color: #ff6f2a;}
div.ssl div.route {background-color: #7f2620;}

div.arrival div.dest { float: left; padding: 9px; font-size: 110%; padding-top: 12px;}

div.arrival div.dest.long { font-size: 105%; padding-top: 10px;}
div.arrival div.route { font-size: 110%; padding-top: 15px; padding-bottom: 10px;}
div.arrival div.route.long { font-size: 80%; padding-top: 15px; padding-bottom: 10px;}
div.arrival div.rlong { font-size: 75%; padding-top: 15px; padding-bottom: 15px;}
div.arrival div.time-wrap { float: right; display: flex; align-items: center;}
div.arrival div.time { padding: 10px; font-size: 140%; color: #bbb; width: 170px; text-align: right; white-space: nowrap; box-sizing: border-box;}
div.arrival div.time .live-icon { font-size: 65%; color: #4caf50; margin-right: 4px; vertical-align: middle;}
div.arrival div.dest .run { font-size: 75%; color: #999;}
div.arrival div.dest .service { font-size: 75%; margin-left: 4px;}
div.arrival div.dest .service.local { color: #999;}
div.arrival div.dest .service.express { background-color: #b33f3f; color: #fff; padding: 1px 5px; border-radius: 3px;}
div.arrival div.dest .service.do-not-board { background-color: #e6b800; color: #000; padding: 1px 5px; border-radius: 3px;}
div.arrival div.sched-time-col { text-align: right; padding: 10px 0; margin-right: 6px; min-width: 62px;}
div.arrival div.delay-col { text-align: right; padding: 10px 0; margin-right: 14px; width: 58px; white-space: nowrap; box-sizing: border-box;}
div.arrival div.sched-time-col .sched-time { font-size: 75%; color: #999;}
div.arrival div.sched-time-col .sched-time.strike { text-decoration: line-through;}
div.arrival div.delay-col .delay { font-size: 75%; color: #ff6f2a;}

/* fetch/parse failure for this panel's data source this poll, as
opposed to a stop legitimately having nothing to show -- see main.js's
loadData() and arrivals.py's per-agency "status" field */
div.stop.data-issue { opacity: 0.55;}
div.stop.data-issue::before { content: "\26A0"; color: #e6b800; font-size: 70%; margin: 0 0 2px 10px; display: block;}

#data-status { display: none; position: fixed; bottom: 8px; right: 12px; font-size: 60%; color: #e6b800; z-index: 999;}

/*.odd {background-color: #ddd;}
.even {background-color: #999;}*/
.stop-name {background-color: #000; text-align: center; font-size: 200%; padding-top: 20px;}
div.large {font-size: 140%; padding-top: 20px;}
div.direction-name {padding: 10px; background-color: #444; text-align: center; color: #eee; font-size: 120%;}
div.direction-name.large {padding-bottom: 18px; background-color: #444; text-align: center; color: #eee; font-size: 150%; padding-top: 18px;}
.clear::after {content: ""; display: table; clear: both;}
.where {display: inline; font-size: 130%; text-align: center;}
.where.small { font-size: 90%; margin-top: 10px; position: absolute; left: 10px;}
.stopbox {position: relative;}

/* "Leave in" rows (data-walk-mins stops, see main.js): a 4-box stat
strip -- Leave In / Departs / (reserved) / Route -- reusing the Divvy
station panels' own title-then-big-number boxes (div.divvy-status/
-header/-data below) instead of a parallel set of rules. This gets its
own flex/gap rule rather than also carrying the div.divvy-station
class those boxes normally sit in -- main.js's real-station poll
selects *every* .divvy-station element to reset it to "No Data" before
repopulating the ones with an actual #divvy-station-<id> match, and an
arrival row here has no such id, so it doesn't have a real station's
data to be repopulated with. Sharing that class name confuses the two
independent 30s polls (this row's own arrivals.py fetch vs the
station-status one) into occasionally clobbering each other. */
div.arrival.leave-in { display: flex; gap: 10px;}
/* The overrides below only exist because these boxes were never
nested inside a colored div.arrival.<agency> before, and
div.arrival div{color:#eee} (a broad, higher-specificity rule than a
bare .divvy-icon/.divvy-data) would otherwise flatten their accent
colors. */
div.arrival.leave-in .divvy-icon { color: #0a79c3;}
/* main.css's existing .live-icon rule only targets div.time (the old
row layout) -- the Departs box needs its own since a.live's wifi icon
now sits in div.divvy-data instead. */
div.arrival.leave-in div.divvy-data .live-icon { font-size: 55%; color: #4caf50; margin-right: 4px; vertical-align: middle;}
/* Graded wind-down as the leave-buffer runs out (see main.js): a plain
color swap reads faster at a glance than resizing/blinking, and these
already sit in the biggest, boldest text on the row. */
div.arrival.leave-in div.divvy-data.leave-now { color: #e6b800;}
div.arrival.leave-in div.divvy-data.leave-run { color: #ff6f6f;}
div.arrival.leave-in div.divvy-data.leave-toolate { color: #666;}
/* .route's own float/width/padding (further down this file) were
tuned for floating next to a headsign, not sitting centered as the big
number in its own stat box -- reset to fit this context instead. */
div.arrival.leave-in div.divvy-data .route { float: none; width: auto; height: auto; margin: 0; padding: 0; font-size: 130%;}

div.divvy-station { display: flex; gap: 10px; margin-left: 10px; margin-right: 10px;}
div.divvy-status { flex: 1; min-width: 0; text-align: center;}
div.divvy-header { background-color: #444; font-size: 100%; padding: 8px;}
div.divvy-data { font-size: 170%; background-color: #101010; padding-bottom: 15px; padding-top: 15px;}
.divvy-icon { display: inline-block; margin-right: 6px; vertical-align: middle; font-size: 85%; color: #0a79c3;}

div.bike-box { display: flex; align-items: center; gap: 12px; margin: 6px 10px 10px; padding: 10px 14px; background-color: #101010;}
div.bike-box .bike-icon { flex: 0 0 auto; font-size: 170%; color: #0a79c3;}
div.bike-box .bike-info { flex: 1; min-width: 0;}
div.bike-box .bike-address { color: #eee;}
div.bike-box .bike-walk { color: #bbb; font-size: 80%; margin-top: 4px;}
div.bike-box .bike-walk .bike-blocks { color: #999; margin-left: 4px;}

#clock {text-align: center; font-size: 350%; margin-bottom: 18px;}