/* lakefrontbus.com */

html, body {
	margin: 0;
	padding: 0;
}

body {
	background: #fff url(/lakefront-faint.png) no-repeat right 24px bottom 24px fixed;
	background-size: 420px auto;
	color: #1f2933;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 24px;
}

.wrap {
	width: 90%;
	max-width: 760px;
	margin: 0 auto;
}

/* the hidden attribute always wins over the display rules below */

[hidden] {
	display: none !important;
}

/* header */

#header {
	background: #3e5247;
	padding: 14px 0;
}

#header .wrap {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

#logo {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.2px;
	text-decoration: none;
}

#logo img {
	margin-right: 12px;
}

#office-link {
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 6px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	padding: 5px 14px;
	text-decoration: none;
}

#office-link:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* front page */

body.home {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#hero {
	align-items: center;
	background: linear-gradient(160deg, #3e5247 0%, #5f7566 100%);
	color: #fff;
	display: flex;
	flex: 1;
	padding: 60px 0 80px 0;
}

#hero h1 {
	color: #fff;
	font-size: 56px;
	letter-spacing: -1.4px;
	line-height: 60px;
}

#hero p {
	color: #e1e8e2;
	font-size: 21px;
	line-height: 30px;
	margin: 0 0 34px 0;
}

.action {
	background: #e2a32b;
	border-radius: 8px;
	color: #22302a;
	display: inline-block;
	font-size: 19px;
	font-weight: 700;
	padding: 14px 28px;
	text-decoration: none;
}

.action:hover {
	background: #efb541;
}

/* content */

#content {
	padding: 70px 0 80px 0;
}

h1 {
	color: #3e5247;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.8px;
	line-height: 46px;
	margin: 0 0 14px 0;
}

#content p {
	color: #52606d;
	font-size: 18px;
	margin: 0;
}

/* forms */

label {
	color: #3e4c59;
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin: 18px 0 6px 0;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
select {
	background: #fff;
	border: 1px solid #c5ccd6;
	border-radius: 6px;
	box-sizing: border-box;
	color: #1f2933;
	font-family: inherit;
	font-size: 16px;
	height: 42px;
	padding: 8px 12px;
}

input[type="number"] {
	width: 120px;
}

input[type="color"] {
	background: #fff;
	border: 1px solid #c5ccd6;
	border-radius: 6px;
	cursor: pointer;
	height: 34px;
	padding: 2px;
	vertical-align: middle;
	width: 46px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
select:focus {
	border-color: #3e5247;
	box-shadow: 0 0 0 3px rgba(62, 82, 71, 0.2);
	outline: 0;
}

#content input[type="number"] {
	font-size: 22px;
	height: 48px;
	vertical-align: middle;
}

input[type="submit"],
button {
	background: #3e5247;
	border: 1px solid #3e5247;
	border-radius: 6px;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	height: 42px;
	padding: 0 18px;
}

input[type="submit"]:hover,
button:hover {
	background: #2f4037;
}

#content input[type="submit"] {
	height: 48px;
	vertical-align: middle;
}

button[disabled] {
	background: #aab2bd;
	border-color: #aab2bd;
	cursor: default;
}

#answer {
	color: #1f2933;
	font-size: 22px;
	line-height: 30px;
	margin-top: 24px;
}

/* footer */

#footer {
	border-top: 1px solid #e2e5ea;
	padding: 16px 0;
}

#footer p {
	color: #8894a3;
	font-size: 13px;
	margin: 0;
}

#footer a {
	color: #8894a3;
}

/* pages of plain text: privacy, terms */

.text-page {
	flex: 1;
	padding: 34px 0 50px 0;
}

.text-page .wrap {
	max-width: 720px;
}

.text-page h1 {
	margin: 0 0 6px 0;
}

.text-page h2 {
	font-size: 18px;
	margin: 26px 0 6px 0;
}

.text-page p,
.text-page li {
	line-height: 24px;
	margin: 0 0 10px 0;
}

.text-page ul {
	margin: 0 0 10px 0;
	padding: 0 0 0 20px;
}

/* phones */

@media screen and (max-width: 480px) {
	#content {
		padding: 40px 0 50px 0;
	}

	h1 {
		font-size: 32px;
		line-height: 38px;
	}

	#hero h1 {
		font-size: 40px;
		line-height: 44px;
	}
}

/* office (dispatcher website) */

body.office {
	background-color: #f3f5f2;
}

.wide {
	max-width: 1100px;
}

body.office .tab {
	background: #fff;
	border: 1px solid #e2e5ea;
	border-radius: 8px;
	margin-bottom: 40px;
	margin-top: 24px;
	padding: 24px;
}

#login {
	background: #fff;
	border: 1px solid #e2e5ea;
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(31, 41, 51, 0.1);
	box-sizing: border-box;
	margin: 9vh auto 40px auto;
	max-width: 380px;
	padding: 34px 32px 26px 32px;
	width: 90%;
}

#login img {
	display: block;
	margin: 0 auto 14px auto;
}

#login h1 {
	font-size: 24px;
	line-height: 30px;
	margin-bottom: 6px;
	text-align: center;
}

#login input[type="text"],
#login input[type="password"] {
	height: 46px;
	width: 100%;
}

#login input[type="submit"] {
	height: 46px;
	margin-top: 24px;
	width: 100%;
}

/* Tracking: only the map, as big as the window under the tabs */

body.full {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

body.full #app {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

body.full #app > .wrap {
	flex: 1;
	max-width: none;
	min-height: 0;
	width: 100%;
}

body.full #tab-tracking {
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	padding: 0;
}

body.full #track-map {
	border: 0;
	border-radius: 0;
	height: 100%;
	margin: 0;
}

#who {
	color: #fff;
	font-size: 15px;
	margin-left: 14px;
	white-space: nowrap;
}

/* the reminder to connect Stripe: a thin line above the tabs */

#stripe-banner {
	background: #fff8e6;
	border-bottom: 1px solid #efd28c;
	font-size: 14px;
	line-height: 20px;
}

#stripe-banner .wrap {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
}

#stripe-banner a {
	color: #3e5247;
	font-weight: 600;
}

#stripe-banner button,
#stripe-banner button:hover {
	background: none;
	border: 0;
	border-radius: 0;
	color: #52606d;
	font-size: 14px;
	height: 20px;
	padding: 0 4px;
}

/* rides taken with no signal that were not paid: first on the Bus cards screen, when there are any */

#late-box {
	margin-bottom: 26px;
	max-height: 250px;
	overflow-y: auto;
}

#late-box h2 {
	margin-top: 0;
}

/* a tablet of a bus in Setup, with its lock */

.tablet {
	white-space: nowrap;
}

.tablet + .tablet {
	margin-top: 4px;
}

/* a small "?" beside a control, with a few words that say what the control does */

.explain {
	display: inline-block;
	position: relative;
}

button.small.explain-mark {
	font-weight: 700;
	padding: 0;
	width: 24px;
}

.explain-text {
	background: #fff;
	border: 1px solid #c5ccd6;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(31, 41, 51, 0.14);
	box-sizing: border-box;
	color: #1f2933;
	display: none;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-top: 4px;
	max-width: 70vw;
	padding: 8px 12px;
	position: absolute;
	right: 0;
	text-align: left;
	top: 100%;
	white-space: normal;
	width: 280px;
	z-index: 2000;
}

.explain:hover .explain-text,
.explain-mark:focus-visible + .explain-text,
.explain.open .explain-text {
	display: block;
}

.explain.shut:hover .explain-text,
.explain.shut .explain-mark:focus-visible + .explain-text {
	display: none;
}

/* On a narrow screen the table scrolls sideways and would cut the words off, so they show
   across the bottom of the screen. */

@media screen and (max-width: 800px) {
	.explain-text {
		bottom: 16px;
		left: 16px;
		max-width: none;
		position: fixed;
		right: 16px;
		top: auto;
		width: auto;
	}
}

#tabs {
	background: #fff;
	border-bottom: 1px solid #e2e5ea;
}

#tabs .wrap {
	overflow-x: auto;
	white-space: nowrap;
}

#tabs a {
	border-bottom: 3px solid transparent;
	color: #52606d;
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	padding: 13px 14px 10px 14px;
	text-decoration: none;
}

#tabs a:hover {
	color: #3e5247;
}

#tabs a.on {
	border-bottom-color: #e2a32b;
	color: #3e5247;
}

h2 {
	color: #1f2933;
	font-size: 18px;
	font-weight: 700;
	margin: 32px 0 10px 0;
}

.tab h2:first-child {
	margin-top: 0;
}

h3 {
	border-bottom: 1px solid #e9ecf0;
	color: #3e5247;
	font-size: 15px;
	font-weight: 700;
	margin: 26px 0 0 0;
	padding-bottom: 6px;
}

h2 + form h3:first-child {
	margin-top: 14px;
}

tr.click {
	cursor: pointer;
}

tr.click:hover {
	background: #eef2ee;
}

table {
	border-collapse: collapse;
	margin: 0 0 14px 0;
	width: 100%;
}

th,
td {
	border-bottom: 1px solid #e9ecf0;
	padding: 9px 10px;
	text-align: left;
}

th {
	border-bottom-color: #d5dae1;
	color: #52606d;
	font-size: 13px;
	font-weight: 600;
}

td select {
	height: 34px;
	padding: 4px 8px;
}

input.long {
	width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: #3e5247;
	height: 18px;
	vertical-align: middle;
	width: 18px;
}

button.small {
	background: #fff;
	border-color: #c5ccd6;
	color: #3e5247;
	font-size: 14px;
	height: 32px;
	padding: 0 12px;
}

button.small:hover {
	background: #eef2ee;
}

.row span {
	display: inline-block;
	margin: 0 12px 8px 0;
	vertical-align: bottom;
}

.row label {
	margin-top: 0;
}

/* a row of boxes inside a longer form, such as Day and Time */

div.row {
	margin-top: 18px;
}

div.row span {
	margin-bottom: 0;
}

/* Route setup and Setup: their parts side by side, one shows at a time */

.parts {
	border-bottom: 1px solid #e2e5ea;
	margin: -6px 0 22px 0;
	padding-bottom: 14px;
}

.parts a {
	border-radius: 6px;
	color: #52606d;
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	margin-right: 4px;
	padding: 6px 14px;
	text-decoration: none;
}

.parts a:hover {
	background: #eef2ee;
}

.parts a.on {
	background: #3e5247;
	color: #fff;
}

textarea {
	border: 1px solid #c5ccd6;
	border-radius: 6px;
	box-sizing: border-box;
	color: #1f2933;
	font-family: inherit;
	font-size: 15px;
	padding: 8px 12px;
	width: 100%;
}

#stop-import {
	border-top: 1px solid #e9ecf0;
	margin-top: 14px;
	padding-top: 4px;
}

#import-result div {
	margin: 4px 0;
}

/* a row whose boxes share the whole width */

div.row.fill {
	display: flex;
}

div.row.fill span {
	flex: 1;
	min-width: 0;
}

div.row.fill span:last-child {
	margin-right: 0;
}

div.row.fill input {
	width: 100%;
}

/* the stop form: the address takes the room that is left */

#stop-form div.row,
#notify-form {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
}

#stop-form div.row span {
	margin-bottom: 8px;
}

span.grow {
	flex: 1;
	min-width: 240px;
}

.tab p a {
	color: #3f6b55;
}

.tab ol {
	margin: 12px 0;
	padding-left: 24px;
}

.tab li {
	margin: 6px 0;
}

#bus-connect {
	margin-bottom: 14px;
}

#bus-connect p {
	margin: 0;
}

#bus-connect img {
	background: #fff;
	margin: 8px 0;
}

#connect-code {
	font-size: 28px;
	letter-spacing: 2px;
}

#who button {
	margin-left: 8px;
}

.suggest-box {
	position: relative;
}

.suggest {
	background: #fff;
	border: 1px solid #c5ccd6;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(31, 41, 51, 0.14);
	left: 0;
	margin-top: 4px;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 2000;
}

.suggest-item {
	border-bottom: 1px solid #e9ecf0;
	cursor: pointer;
	padding: 8px 12px;
}

.suggest-item:hover,
.suggest-item.on {
	background: #eef2ee;
}

.suggest-by {
	color: #8894a3;
	font-size: 12px;
	padding: 4px 12px;
	text-align: right;
}

label.pick {
	color: #1f2933;
	font-size: 16px;
	font-weight: normal;
	margin: 0;
}

.error {
	color: #b42318;
	font-weight: 600;
	margin: 6px 0;
}

.note {
	color: #6b7785;
	margin: 6px 0;
}

.code {
	background: #fff8e6;
	border: 1px solid #efd28c;
	border-radius: 6px;
	font-size: 18px;
	padding: 12px 14px;
}

.map {
	border: 1px solid #d5dae1;
	border-radius: 8px;
	height: 460px;
	margin: 0 0 14px 0;
}

.split:after {
	clear: both;
	content: "";
	display: table;
}

.split-left {
	float: left;
	width: 42%;
}

.split-right {
	float: right;
	width: 55%;
}

.pin {
	border: 1px solid #1f2933;
	border-radius: 4px;
	box-sizing: border-box;
	font: 700 13px/20px -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	text-align: center;
	white-space: nowrap;
}

.pin-stop {
	background: #fff;
	color: #1f2933;
}

/* a bus on a map: a label in the color of the bus, above the spot, pointing at it */

.bus-label {
	background: #c0392b;
	border-radius: 7px;
	bottom: 10px;
	box-shadow: 0 2px 7px rgba(31, 41, 51, 0.4);
	color: #fff;
	cursor: pointer;
	font: 12px/16px -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	left: 0;
	padding: 4px 10px;
	position: absolute;
	text-align: center;
	transform: translateX(-50%);
	white-space: nowrap;
}

.bus-label:after {
	background: inherit;
	bottom: -5px;
	content: "";
	height: 10px;
	left: 50%;
	margin-left: -5px;
	position: absolute;
	transform: rotate(45deg);
	width: 10px;
}

.bus-label b {
	display: block;
	font-size: 14px;
	line-height: 18px;
	position: relative;
	z-index: 1;
}

.bus-label span {
	display: block;
	position: relative;
	z-index: 1;
}

.bus-label.old {
	background: #8894a3;
}

.bus-label.under {
	bottom: auto;
	top: 10px;
}

.bus-label.under:after {
	bottom: auto;
	top: -5px;
}

.bus-facts {
	font: 14px/21px -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.bus-facts b {
	font-size: 16px;
}

/* History on paper: the title, the buses, the map and the stops they reached */

#history-title {
	display: none;
	font-size: 22px;
	line-height: 28px;
}

body.printing #history-map {
	height: 470px;
	width: 680px;
}

@media print {
	#header,
	#stripe-banner,
	#tabs,
	#history-form,
	.leaflet-control-zoom {
		display: none !important;
	}

	body.office {
		background: #fff;
	}

	body.office .tab {
		border: 0;
		margin: 0;
		padding: 0;
	}

	#history-title {
		display: block;
	}

	#history-info {
		color: #1f2933;
	}

	.bus-label,
	.chip,
	.pin {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	tr {
		break-inside: avoid;
	}
}

/* bus cards on paper: the size of a bank card. The symbol and the bus company on top, the
   rider's name, and the bars with the card number at the bottom */

#card-sheet {
	padding: 10px;
}

.card-box {
	border: 1px dashed #8894a3;
	border-radius: 12px;
	box-sizing: border-box;
	break-inside: avoid;
	display: inline-block;
	height: 2.125in;
	margin: 0 0.15in 0.15in 0;
	padding: 0.14in 0.2in 0 0.2in;
	text-align: center;
	vertical-align: top;
	width: 3.375in;
}

.card-top {
	align-items: center;
	display: flex;
	height: 0.34in;
	justify-content: center;
}

.card-top img {
	height: 0.3in;
	margin-right: 0.1in;
	width: auto;
}

.card-top b {
	color: #000;
	font-size: 17px;
	letter-spacing: 0.3px;
}

.card-name {
	color: #000;
	font-size: 15px;
	font-weight: 600;
	height: 0.3in;
	line-height: 0.3in;
	margin-top: 0.05in;
	overflow: hidden;
	white-space: nowrap;
}

.card-phone {
	color: #000;
	font-size: 13px;
	height: 0.2in;
	line-height: 0.2in;
	overflow: hidden;
	white-space: nowrap;
}

.card-box svg {
	display: block;
	height: 0.72in;
	margin: 0.04in 0 0.02in 0;
	width: 100%;
}

.card-box span {
	color: #000;
	font-size: 13px;
	letter-spacing: 2px;
}

/* the sheet for the driver */

#driver-sheet {
	color: #000;
	max-width: 7.5in;
	padding: 20px;
}

.sheet-top {
	align-items: center;
	display: flex;
	margin-bottom: 14px;
}

.sheet-top img {
	height: 44px;
	margin-right: 14px;
	width: auto;
}

.sheet-top b {
	font-size: 20px;
}

#driver-sheet h1 {
	color: #000;
	font-size: 28px;
	line-height: 34px;
}

#driver-sheet h2 {
	margin-top: 22px;
}

#driver-sheet th,
#driver-sheet td {
	border-bottom: 1px solid #b8bfc7;
	color: #000;
	font-size: 15px;
	padding: 6px 10px 6px 0;
}

.sheet-facts {
	width: auto;
}

.sheet-facts th {
	padding-right: 24px;
}

body.printing-cards #header,
body.printing-cards #login,
body.printing-cards #app,
body.printing-sheet #header,
body.printing-sheet #login,
body.printing-sheet #app {
	display: none;
}

body.printing-cards,
body.printing-sheet {
	background: #fff;
}

tr.done td {
	color: #8894a3;
}

/* the color of a bus beside its name */

.chip {
	border-radius: 3px;
	display: inline-block;
	height: 12px;
	margin-right: 8px;
	width: 12px;
}

.pin-draft {
	background: #e2a32b;
	color: #1f2933;
}

@media screen and (max-width: 800px) {
	.split-left,
	.split-right {
		float: none;
		width: 100%;
	}

	body.office #login,
	body.office .tab {
		padding: 16px;
	}

	body.office .tab {
		overflow-x: auto;
	}
}

/* screens on the bus: door tablet and next-stop screen */

body.screen {
	background: #3e5247;
	color: #fff;
	box-sizing: border-box;
	min-height: 100vh;
	overflow: hidden;
	padding: 6vh 5vw;
	text-align: center;
}

body.screen label {
	color: #fff;
	font-size: 26px;
	line-height: 34px;
	margin-bottom: 16px;
}

body.screen input[type="number"] {
	font-size: 40px;
	height: 72px;
	text-align: center;
	width: 240px;
}

body.screen input[type="submit"] {
	background: #e2a32b;
	border-color: #e2a32b;
	color: #1f2933;
	font-size: 26px;
	height: 60px;
	padding: 0 32px;
}

body.screen .error {
	color: #ffd0d0;
	font-size: 22px;
	line-height: 30px;
}

.big {
	font-size: 22vw;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 4vh 0 3vh 0;
}

.medium {
	font-size: 7vw;
	line-height: 1.2;
	margin: 0;
}

.status {
	bottom: 10px;
	color: #a9b8ad;
	font-size: 14px;
	left: 0;
	margin: 0;
	position: fixed;
	width: 100%;
}

/* bus rental calendar */

.cal-head {
	margin: 0 0 10px 0;
	text-align: center;
}

.cal-title {
	display: inline-block;
	font-size: 18px;
	min-width: 190px;
}

.cal {
	table-layout: fixed;
}

.cal th {
	text-align: center;
}

.cal td {
	border: 1px solid #e2e5ea;
	height: 84px;
	padding: 4px;
	vertical-align: top;
}

.cal td.other {
	background: #f3f5f2;
}

.cal td.today {
	background: #fff8e6;
}

.cal-day {
	color: #3e4c59;
	display: block;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.cal-booking {
	background: #3e5247;
	border-radius: 4px;
	color: #fff;
	display: block;
	font-size: 13px;
	line-height: 17px;
	margin-top: 3px;
	overflow: hidden;
	padding: 2px 5px;
	text-decoration: none;
}

/* the Lakefront symbol, pale, in the corner of each screen of the office and of the front page */

body.office {
	background-image: none;
}

body.office .tab {
	background: #fff url(/lakefront-faint.png) no-repeat right 22px bottom 18px;
	background-size: 300px auto;
}

/* On a wide window the symbol stays in the corner of the window while the screen scrolls. */

@media screen and (min-width: 1240px) {
	body.office .tab {
		background-attachment: fixed;
		background-position: calc(50% + 380px) calc(100% - 30px);
	}
}

body.full .tab {
	background-image: none;
}

#hero {
	overflow: hidden;
	position: relative;
}

#hero:after {
	background: url(/lakefront-white.png) no-repeat center;
	background-size: contain;
	bottom: -30px;
	content: "";
	height: 380px;
	opacity: 0.09;
	position: absolute;
	right: -40px;
	width: 560px;
}

#hero .wrap {
	position: relative;
	z-index: 1;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
select,
input[type="submit"],
button {
	border-radius: 8px;
}

/* a box that opens under a row of buttons: a new account, a new exception */

.panel {
	background: #f6f8f5;
	border: 1px solid #e0e5df;
	border-radius: 10px;
	margin: 0 0 16px 0;
	padding: 14px 16px 6px 16px;
}

.panel div.row:first-child {
	margin-top: 0;
}

/* Bus cards: the search box and the list of accounts */

#card-bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

#card-find {
	flex: 1;
	font-size: 17px;
	height: 46px;
	min-width: 240px;
}

#card-bar button {
	height: 46px;
}

#card-table th button {
	background: none;
	border: 0;
	color: #52606d;
	font-size: 13px;
	height: auto;
	padding: 0;
}

#card-table th button:hover {
	color: #3e5247;
}

#card-table th button.up:after {
	content: " \25B2";
	font-size: 9px;
}

#card-table th button.down:after {
	content: " \25BC";
	font-size: 9px;
}

table.rows td {
	padding-bottom: 11px;
	padding-top: 11px;
}

tr.click.on {
	background: #e9f0ea;
}

/* one account */

#account-head {
	align-items: center;
	border-bottom: 1px solid #e9ecf0;
	display: flex;
	justify-content: space-between;
	margin-bottom: 18px;
	padding-bottom: 16px;
}

#account-head h1 {
	font-size: 30px;
	line-height: 36px;
	margin: 0;
}

#account-code {
	color: #52606d;
	margin: 4px 0 0 0;
}

.state {
	background: #fde8e6;
	border-radius: 4px;
	color: #b42318;
	font-size: 13px;
	font-weight: 600;
	padding: 2px 8px;
}

#account-money {
	text-align: right;
}

#account-money b {
	color: #3e5247;
	display: block;
	font-size: 34px;
	line-height: 38px;
}

#account-money span {
	color: #52606d;
	font-size: 14px;
}

#account-form {
	margin-top: 18px;
}

#account-buttons {
	margin: 14px 0 0 0;
}

button.small.danger {
	border-color: #e3b1ab;
	color: #b42318;
}

button.small.danger:hover {
	background: #fde8e6;
}

/* routes: the days of the week, the calendar, the route picked in it */

.days {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	min-height: 42px;
}

.row span.days {
	display: flex;
	margin: 0;
}

.row .days label.pick {
	margin: 0;
	white-space: nowrap;
}

#route-cal-bar {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin-bottom: 14px;
}

#route-cal-bar .cal-head {
	margin: 0;
}

#route-open h3 {
	border: 0;
	margin-top: 0;
}

#route-open .split-right {
	width: 100%;
}

#route-open.one .split-left {
	width: 47%;
}

#route-open.one .split-right {
	width: 50%;
}

#exception-table td {
	font-size: 15px;
	padding-left: 6px;
	padding-right: 6px;
	white-space: nowrap;
}

button.small.plus {
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	margin-left: 8px;
	padding: 0;
	width: 32px;
}

#sched-cal td {
	height: 96px;
}

#route-open.one #sched-cal td {
	height: 62px;
}

a.cal-run {
	color: inherit;
	text-decoration: none;
}

a.cal-run:hover b {
	text-decoration: underline;
}

.cal td.run {
	background: #e6f1e9;
}

.cal td.changed {
	background: #fdeec7;
}

.cal td.off {
	background: #f3f5f2;
	color: #8894a3;
}

.cal td.today {
	box-shadow: inset 0 0 0 2px #e2a32b;
}

span.cal-day {
	color: inherit;
}

.cal-time {
	display: block;
	font-size: 12px;
	line-height: 15px;
	white-space: nowrap;
}

.key {
	border: 1px solid #d5dae1;
	display: inline-block;
	height: 11px;
	margin: 0 4px 0 10px;
	width: 11px;
}

.key:first-child {
	margin-left: 0;
}

.key.run {
	background: #e6f1e9;
}

.key.changed {
	background: #fdeec7;
}

.key.off {
	background: #f3f5f2;
}

/* a narrow screen: a wide table scrolls sideways inside its white box */

@media screen and (max-width: 800px) {
	body.office .tab {
		overflow-x: auto;
	}

	#route-open.one .split-left,
	#route-open.one .split-right {
		width: 100%;
	}
}

/* front page: its three parts side by side */

#actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

#actions .action {
	flex: 1;
	text-align: center;
	white-space: nowrap;
}

/* rider pages: the schedule to pick on /track/, the form on /trip/ */

#content select {
	font-size: 18px;
	height: 48px;
	max-width: 100%;
}

#content p.error {
	color: #b42318;
	margin-top: 14px;
}

#content #answer,
#content #trip-answer {
	margin-top: 20px;
}

/* the calendar riders see: the schedules of each day */

#run-cal td {
	height: 96px;
}

.cal-weekday {
	display: none;
}

.cal-run {
	display: block;
	font-size: 13px;
	line-height: 17px;
	margin-top: 4px;
}

.cal-run b {
	display: block;
}

/* the trips asked for on the website, on the Bus rental screen */

#asked-box {
	margin-bottom: 22px;
}

#asked-box h2 {
	margin-top: 0;
}

@media screen and (max-width: 700px) {
	#actions .action {
		flex-basis: 100%;
	}

	/* the calendar becomes a list of days */

	#run-cal thead,
	#run-cal td.other {
		display: none;
	}

	#run-cal,
	#run-cal tbody,
	#run-cal tr,
	#run-cal td {
		display: block;
	}

	#run-cal td {
		border-width: 0 0 1px 0;
		height: auto;
		padding: 8px 10px;
	}

	.cal-weekday {
		display: inline;
	}

	.cal-title {
		margin: 0 4px;
		min-width: 0;
	}

	.cal-run b {
		display: inline;
	}
}

/* Route setup: the sheet of the routes, one row a route, each box to type in */

body.broad #app > .wide {
	max-width: 1320px;
	width: 94%;
}

.part[data-part="routes"] {
	overflow-x: auto;
}

table.sheet td {
	padding: 6px 3px;
	vertical-align: middle;
	white-space: nowrap;
}

table.sheet th {
	padding-left: 3px;
	padding-right: 3px;
}

table.sheet input[type="text"],
table.sheet input[type="date"],
table.sheet input[type="time"] {
	font-size: 15px;
	height: 34px;
	padding: 4px 6px;
}

table.sheet input[type="text"] {
	min-width: 170px;
	width: 100%;
}

table.sheet input[type="date"] {
	width: 136px;
}

table.sheet input[type="time"] {
	width: 112px;
}

table.sheet button.small {
	padding: 0 9px;
}

table.sheet tr.changed td:first-child {
	box-shadow: inset 3px 0 0 #e2a32b;
}

table.sheet tr.changed button:first-child {
	background: #e2a32b;
	border-color: #e2a32b;
	color: #1f2933;
}

.daybox label {
	color: #1f2933;
	display: inline-block;
	font-size: 12px;
	font-weight: normal;
	margin: 0 3px 0 0;
	text-align: center;
}

.daybox input {
	display: block;
	margin: 0 auto 2px auto;
}

/* the buses of a route: a list that drops down */

#stripe-help {
	margin: 8px 0 14px 0;
	max-width: 760px;
}

#stripe-help summary {
	cursor: pointer;
	font-weight: 600;
}

#stripe-help li {
	margin: 6px 0;
}

details.drop {
	display: inline-block;
	position: relative;
}

details.drop summary {
	background: #fff;
	border: 1px solid #c5ccd6;
	border-radius: 6px;
	cursor: pointer;
	font-size: 15px;
	line-height: 32px;
	min-width: 90px;
	padding: 0 10px;
}

.drop-list {
	background: #fff;
	border: 1px solid #c5ccd6;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(31, 41, 51, 0.16);
	max-height: 260px;
	min-width: 150px;
	overflow-y: auto;
	padding: 8px 12px;
	position: fixed;
	z-index: 1200;
}

.drop-list label {
	color: #1f2933;
	display: block;
	font-size: 15px;
	font-weight: normal;
	margin: 0;
	padding: 4px 0;
}

.drop-list a {
	border-top: 1px solid #e9ecf0;
	color: #3f6b55;
	display: block;
	font-size: 14px;
	margin-top: 6px;
	padding-top: 8px;
}

#stop-copy {
	margin-top: 0;
}

#import-fare {
	margin-left: 8px;
}