/* Marges d'impression */
@page {
	margin: 0mm 0mm 0mm 0mm;
}

body {
	margin: 0;
	font-family: "Open Sans", Arial, Helvetica, Sans-Serif;
	font-size: 10pt;
}

body.pdl-web {
	margin: 1em;
	font-size: 16pt;
}

div, p {
	margin: 0;
	padding: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	padding-left: 2em;
}

.clearboth {
	clear: both;
}

/* === Page === */

div.page {
	width: 21cm;
	height: 29.7cm;
	padding: 6mm;
	box-sizing: border-box;
	background-color: white;
	page-break-after: always;
	/* Do not use complex SVG, wkhtml do not render it well */
	background-image: url('aleop-footer.png');
	background-size: 30%;
	background-repeat: no-repeat;
	background-position: bottom right;
	/* wkhtml */
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	-webkit-box-orient: vertical;
	/* overflow: hidden; */
}

.pdl-web>div.page {
	width: auto;
	height: auto;
}

div.page>div {
	/* wkhtml */
	-webkit-box-flex: 0;
	-webkit-flex: 0;
	flex: 0;
}

div.page>div.vfill {
	/* wkhtml */
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	min-height: 1em;
}

div.page>div.vfill2 {
	/* wkhtml */
	-webkit-box-flex: 3;
	-webkit-flex: 3;
	flex: 3;
	min-height: 1em;
}

div.page>div.vfill3 {
	/* wkhtml */
	-webkit-box-flex: 10;
	-webkit-flex: 10;
	flex: 10;
	min-height: 1em;
}

/* === Header === */

div.header {
	width: 100%;
}

div.header div.firstline {
	display: table;
}

div.header div.routecodes {
	vertical-align: middle;
	display: table-cell;
	padding-right: 0.4em;
}

div.header div.routecodes > div {
	display: table;
} 

div.header div.routecodes > div > div {
	display: table-cell;
}

div.header div.routecodes > div > div > p {
	font-family: "Simplon Norm", Arial, Helvetica, Sans-Serif;
	font-weight: 500;
	font-size: 160%;
	min-width: 1.4em;
	padding: 0.1em 0.2em 0.1em 0.2em;
	border-radius: 0.4em;
	margin-right: 0.2em;
	text-align: center;
	white-space: nowrap;
}

div.header div.routenames {
	font-family: "Simplon Norm", Arial, Helvetica, Sans-Serif;
	font-weight: 500;
	vertical-align: middle;
	display: table-cell;
	width: 99%;
	color: #000fa0;
	font-size: 120%;
}

div.header div.logo {
	vertical-align: middle;
	display: table-cell;
	/* Do not use complex SVG, wkhtml do not render it well */
	background-image: url('aleop-logo.png');
	background-size: 8em;
	height: 2.6em;
	min-width: 8em;
	background-position: center left;
	background-repeat: no-repeat;
}

/* === Date range === */

div.daterange {
	text-align: center;
	font-family: "Simplon Norm", Arial, Helvetica, Sans-Serif;
	font-weight: 500;
	font-size: 110%;
	color: #000fa0;
}

/* === Schedules block === */

div.schedblock {
	page-break-inside: avoid;
}

table.schedules {
	font-family: "Open Sans Condensed", "Open Sans", Arial, Helvetica, Sans-Serif;
	width: 100%;
	border-collapse: collapse;
}

table.schedules tr {
	line-height: 0.7em;
}

table.schedules td > p {
	display: inline-block;
}

table.schedules tr > td {
	font-size: 70%;
	border-left: 0.2em white solid;
	text-align: center;
	padding: 0;
	padding-left: 0.1em;
	padding-right: 0.3em;
	width: 3.6%;
}

table.schedules tr > td > div {
	width: 100%;
	height: 100%;
	overflow: visible;
	white-space: nowrap;
}

/* --- Route header with headsign --- */

table.schedules tr.headsign > td {
	font-family: "Simplon Norm", Arial, Helvetica, Sans-Serif;
	font-weight: 500;
	color: #000fa0;
	text-align: left;
	padding: 0.2em;
}

table.schedules tr.blockhead > td {
	font-family: "Simplon Norm", Arial, Helvetica, Sans-Serif;
	font-weight: 500;
	color: white;
	text-align: left;
	padding: 0.2em;
	border-bottom: 0.2em white solid;
}

div.schedblock.weekdays table.schedules tr.blockhead > td {
	background-color: #000fa0;
}

div.schedblock.weekend table.schedules tr.blockhead > td {
	background-color: #bdd143;
	color: black;
}

/* --- Specific route row (if multiple routes) --- */

table.schedules tr.routes-head > td.title {
	text-align: right;
	padding-right: 1em;
	font-weight: bold;
}

table.schedules tr.routes-head > td.routes {
	text-align: center;
	color: black;
	font-weight: bold;
}

div.schedblock.weekdays table.schedules tr.routes-head > td.routes {
	background-color: #DCEBF8;
}

div.schedblock.weekend table.schedules tr.routes-head > td.routes {
	background-color: #E5EDBB;
}

/* --- Dow row --- */

table.schedules tr.dows {
	font-family: "Calibri", Arial, Helvetica, Sans-Serif;
	font-weight: bold;
	text-align: center;
	color: black;
}

table.schedules tr.dows > td.dow {
	padding-top: 0.1em;
	padding-bottom: 0.2em;
}

div.schedblock.weekdays table.schedules tr.dows > td.dow {
	background-color: #DCEBF8;
}

div.schedblock.weekend table.schedules tr.dows > td.dow {
	background-color: #E5EDBB;
}

/* --- Trip short names row --- */

table.schedules tr.shortnames {
	font-family: "Calibri", Arial, Helvetica, Sans-Serif;
	text-align: center;
	color: black;
}

table.schedules tr.shortnames > td.title {
	text-align: right;
	padding-right: 1em;
}

table.schedules tr.shortnames > td.shortname {
	font-family: "Open Sans Condensed", "Open Sans", Arial, Helvetica, Sans-Serif;
	font-weight: bold;
	font-size: 60%;
	padding-top: 0.1em;
	padding-bottom: 0.2em;
}

div.schedblock.weekdays table.schedules tr.shortnames > td.shortname {
	background-color: #DCEBF8;
}

div.schedblock.weekend table.schedules tr.shortnames > td.shortname {
	background-color: #E5EDBB;
}

/* --- Period of application row --- */

table.schedules tr.period {
	font-family: "Calibri", Arial, Helvetica, Sans-Serif;
}

table.schedules tr.period > td.title {
	text-align: right;
	padding-right: 1em;
}

table.schedules tr.period0 > td {
	background-color: #C0C0C0;
}

table.schedules tr.period0 > td.void {
	background: none;
}

table.schedules tr.period1 > td { 
	background-color: #D9D9D9;
}

table.schedules tr.period1 > td.void {
	background: none;
}

div.schedblock.weekdays table.schedules tr.period > td.period-yes {
	background-color: #000fa0;
	color: white;
	font-weight: bold;
}

div.schedblock.weekend table.schedules tr.period > td.period-yes {
	background-color: #bdd143;
	color: black;
	font-weight: bold;
}

/* --- Header note row --- */

table.schedules tr.notes-head > td {
	background-color: white;
	text-align: center;
	color: black;
}

table.schedules tr.notes-head > td > div {
	display: table;
}

table.schedules tr.notes-head > td > div > p {
	display: table-cell;
}

/* --- Stop, city, pickup/dropoff only --- */

table.schedules tr > td.city {
	text-align: right;
	font-weight: bold;
}

table.schedules tr > td.city span.area {
	font-weight: normal;
}

table.schedules tr > td.stop {
	text-align: left;
	border-left: none;
}

table.schedules tr > td.stopnote {
	width: 1%;
	border-left: none;
}

table.schedules tr > td.pickupdropoffonly {
	width: auto;
}

table.schedules tr > td.pickupdropoffnorm {
	background-color: white;
	width: 1%;
}

/* --- Times --- */

div.schedblock.weekdays table.schedules tr.even {
	background-color: #DCEBF8;
}

div.schedblock.weekdays table.schedules tr.odd {
	background-color: #F0F6FC;
}

div.schedblock.weekdays table.schedules tr.even > td.tad {
	background-color: #F8CBAD;
}

div.schedblock.weekdays table.schedules tr.odd > td.tad {
	background-color: #FDF1E7;
}

div.schedblock.weekend table.schedules tr.even {
	background-color: #E5EDB4;
}

div.schedblock.weekend table.schedules tr.odd {
	background-color: #F9FBED;
}

div.schedblock.weekend table.schedules tr.even > td.tad {
	background-color: #F8CBAD;
}

div.schedblock.weekend table.schedules tr.odd > td.tad {
	background-color: #FDF1E7;
}

table.schedules tr.even > td.empty {
	background-color: #eeeeee;
}

table.schedules tr.odd > td.empty {
	background-color: white;
}

table.schedules tr > td.void {
	background-color: white;
}

table.schedules td.time > div {
	display: table;
}

table.schedules td.time > div > p {
	display: table-cell;
}

/* --- End of table notes --- */

table.schedules tr.notes-foot > td {
	color: black;
	text-align: left;
}

/* --- Icons (phone, wheelchair, bike) --- */

table.schedules .phone, table.schedules .wheelchair, table.schedules .bike {
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	height: 1em;
}

table.schedules .phone {
	background-image: url('phone.svg');
	background-size: 0.7em;
	width: 0.7em;
	min-width: 0.7em;
}

table.schedules .wheelchair {
	background-image: url('wheelchair.svg');
	background-size: 0.8em;
	width: 0.8em;
	min-width: 0.8em;
}

table.schedules .bike {
	background-image: url('bike.svg');
	background-size: 0.9em;
	width: 0.7em;
	min-width: 0.7em;
}

span.phone-note {
	display: inline-block;
	background-color: #F8CBAD;
	background-repeat: no-repeat;
	background-position: center;
	height: 1em;
	background-image: url('phone.svg');
	background-size: 0.7em;
	width: 3em;
	min-width: 3em;
}

/* === Footer === */

div.footer {
	font-family: "Calibri", Arial, Helvetica, Sans-Serif;
	display: table;
	width: 100%;
	font-size: 60%;
	color: #000fa0;
	page-break-inside: avoid;
}

div.footer > div {
	display: table-cell;
	padding-right: 0.4em;
	padding-left: 0.4em;
}

div.footer p.header {
	font-size: 120%;
	font-weight: bold;
	margin-top: 0.5em;
}

div.footer div.agencyinfo {
	width: 50%;
}

div.footer div.notes {
	width: 50%;
}

div.footer .bold {
	font-weight: bold;
}

div.footer .smaller {
	font-size: 90%;
}