/*
 * Summary (flight performance) page
 */
.fp .page {
	display: block;
}
.fpHeader {
	padding: 2px 2px 0 0;
	font-size: 80%;
	display: flex; align-items: center; justify-content: space-between;
}
.fpAc, .fpTrip {
	display: inline-block;
}
.fpHeader_buttons {
	display: flex; align-items: center;
	float: right;
}
.fpHeader button {
	min-height: 2.2em;
	min-width: 40px;
	margin: 0;
	padding: 2px;
}
.fpHeader_buttons button:first-child {
	margin-right: 4px;
}

.fpTrip .card_title,
.fpAc .card_title {
	display: none;
}
.fpTrip button, .fpAc button {
	margin-left: 4px;
}

.fpTrip {
	width: auto;
}
.fpTrip .selector_value {
	min-width: 20ch;
	width: auto;
	margin-right: 4px;
}
.fpTrip .card_row-main {
	width: auto;
}
.fpTrip .card_label {
	min-width: 7ch;
	width: auto;
}
.fpAc {
	width: auto;
}
.fpAc .selector_value {
	min-width: 10ch;
	width: auto;
	margin-right: 4px;
}
.fpAc .card_label {
	min-width: 10ch;
	width: auto;
}

.fpPanels {
	width: 100%;
}

.fpRowNote {
	color: white;
	background-color: grey;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	height: 1.7em;
}

.fpPanels .card_panel {
	font-size: 80%;
}

/* W&B panel */
.fpWb .card_label:first-child {
	flex: 2 0 12ch;
}
.fpWb .card_label:nth-child(3) {
	flex: 0 0 4ch;
}
.fpWb .card_value {
	flex: 1 0 9ch;
}

/* Departure panel */
.fpDep .card_label:first-child {
	flex: 1 1 11ch;
}
.fpDep .card_label:nth-child(3) {
	flex: 0 0 4ch;
}
.fpDep .card_value {
	flex: 1 0 7ch;
}

/* Enroute panel */
.fpEnrt .card_label:first-child {
	flex: 1 0 12ch;
}
.fpEnrt .card_value {
	flex: 2 0 21ch;
}

/* Destination panel */
.fpDest .card_label:first-child {
	flex: 1 1 11ch;
}
.fpDest .card_label:nth-child(3) {
	flex: 0 0 4ch;
}
.fpDest .card_value {
	flex: 1 0 7ch;
}

/* When viewport width >= 1024, groups are arranged horizontally. */
.viewSizeGE-XL .fpWb,
.viewSizeGE-XL .fpDep,
.viewSizeGE-XL .fpEnrt,
.viewSizeGE-XL .fpDest {
	width: 25%;
	float: left;
}

/* When viewport width < 1024, groups are arranged in a 2x2 array. */
.viewSizeLT-XL .fpEnrt {
	clear: left;
}
.viewSizeLT-XL .fpWb,
.viewSizeLT-XL .fpDep,
.viewSizeLT-XL .fpEnrt,
.viewSizeLT-XL .fpDest {
	width: 50%;
	float: left;
}
/* When viewport width < 556, groups are arranged vertically. */
.viewSizeLT-M .fpHeader {
	display:flex;
	align-items:center;
	justify-content: space-between;
}
.viewSizeLT-M .fpWb,
.viewSizeLT-M .fpDep,
.viewSizeLT-M .fpEnrt,
.viewSizeLT-M .fpDest {
	width: 100%;
}