/*
 * Style for model-specific content that is independent of viewport size.
 */

/*
 * Style aircraft-dependent page columns within groups
 */

/*
 * Aircraft page
 */

.largeUI .ac .pageMain {
	left: 200px;
	right: 2px;
	max-width: 922px;
	overflow: scroll;
}
.largeUI.devWidthLT-L .ac .pageMain {
	left: 120px;
}
.largeUI.devWidthLT-L .ac .pageSelector {
	width: 110px;
}
.devWidthLT-M .ac .group,
.devWidthLT-M .ac .input {
	font-size: 15px;
}

.ac .rowLabel {
	width: 50%;
}

.acCabinConfig {
	margin-bottom: 10px;
	float: left;
}
.acCabinConfig > div:first-child {
	width:100%;
	text-align:center;
	margin-bottom: 4px;
}
.acCabin {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 92px;
}
.devWidthLT-M .acCabin {
	margin-left: 0;
}
.acCabin6 {
	height: 140px;
}
.acCabin .acSeat:first-child, .acCabin .acSeat:nth-child(2) {
}
.acCabin6 .acSeat:nth-child(3), .acCabin6 .acSeat:nth-child(4) {
	margin-top: 6px;
}
.acCabin6 .acSeat:nth-child(5), .acCabin6 .acSeat:nth-child(6) {
	margin-top: 18px;
}

.acSeat {
	position: relative;
	height: 40px;
	width: 40px;
}

.acSeatbase {
	position: absolute;
	height: 100%;
	width: 100%;
	border-radius: 8px;
	border: 1px solid blue;
}
.acSeatback {
	position: absolute;
	bottom: 0;					/* seat facing forward */
	height: 16px;
	width: 100%;
	border-radius: 4px 4px 8px 8px;
	border: 1px solid blue;
}
.acFixed .acSeatbase, .acFixed .acSeatback,
.quick .acSeatbase, .wb .acSeatbase, .trip .acSeatbase,
.quick .acSeatback, .wb .acSeatback, .trip .acSeatback {
	border-color: black;
}
.acSeatAft {
	transform: rotate(180deg);
}
.acSeatRemoved .acSeatbase {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	color: grey;
}
.acSeatRemoved .acSeatbase::before {
	content: "X";
}
.acSeatRemoved .acSeatback {
	visibility: hidden;
}

/* Lavatory faces left and has a different shape */
.acSeatLav {
	transform: rotate(-90deg);
}
.acSeatLav .acSeatback {
	border-radius: 4px 4px 0 0;
	height: 8px;
}
.acSeatLav .acSeatbase {
	border-radius: 12px 12px 0 0;
}

.acSeatBlank {
	visibility: hidden;
}

.acAdjTable {
	margin-left: 16px;
	margin-top: 4px;
	margin-bottom: 10px;
	float: left;
}
.devWidthLT-M .acAdjTable {
	margin-left: 0;
	float: left;
	clear: left;
}
.acAdjTable td:first-child {
	padding-left: 0;
}

.io-ac-interiorType {
	float: left;
	clear: left;
}

.acCustomCB td {
	text-align: left !important;
}
.acCustomCB td:first-child {
	width: 250px;
}
.acCustomCB thead td {
	color: black;
}

.ac .noAircraftText {
	text-align: center;
	padding-top: 40px;
	font-size: 20px;
	font-weight: bold;
	color: darkgrey;
}

/*
 * All Checklist page
 */

.allCL .pageContent {
	background-color: white;
}

.allCL .clStep > tbody > tr:first-child > td {
	padding-top: 2px;
}
.allCL .clStep > tbody > tr:last-child > td {
	padding-bottom: 2px;
}
.allCL .clStep {
	border: none;
}

.allCL .output {
	color: black;
}

.allCL .clProcTitle {
	margin-top: 35px;
}

/*
 * Approach Procedure page
 */

.ap .rowLabel {
	width: 45%;
}

.ap .radioTable td {
	width: 120px;
	text-align: center;
}

.ap .rwyText .output {
	color: black;
}

/*
 * Bus page
 */

.bus .rowLabel {
	width: 200px;
}
.bus .groupTitle td:last-child {
	text-align: left;
}

@media screen and (max-width: 767px), screen and (max-height: 699px) {		/* small UI */
	.bus .rowLabel {
		width: 125px;
	}
	.bus .groupTitle td:first-child {
		width: 110px;
	}
}

/*
 * Checklist Procedure page
 */

.clStep > tbody > tr:first-child > td {
	padding-top: 4px;
}

.clStep > tbody > tr:last-child > td {
	padding-bottom: 4px;
}

.clSelectable > tbody > tr:first-child > td {
	padding-top: 13px;
}

.clSelectable > tbody > tr:last-child > td {
	padding-bottom: 13px;
}

.clCondStepText > tbody > tr:first-child > td {
	padding-top: 3px;
}

.clCondStepText > tbody > tr:last-child > td {
	padding-bottom: 3px;
}

.clStepItem {
	width: 43%;
}

.clStepAction table td {
	padding: 4px 7px;
	height: 22px;
}

.clWarning, .clCaution, .clNote {
	margin: 0 12px;
}

.clBoxHeader {
	display: block;
	font-size: 19px;
	margin-top: 0;
	margin-bottom: 6px;
}

.clInfoTable td,
.clInfoTable2C td {
	padding: 6px 4px !important;
}
.clFigureCaption {
	text-align: center;
}

.clFigure td:last-child {
	width: 2000px;
}

@media screen and (max-width: 767px), screen and (max-height: 699px) {		/* small UI */
	.clSelectable > tbody > tr:first-child > td {
		padding-top: 4px;
	}

	.clSelectable > tbody > tr:last-child > td {
		padding-bottom: 4px;
	}
	.clStepAction table td {
		height: 18px;
	}
	.clBoxHeader {
		font-size: 15px;
	}
	.clInfoTable td,
	.clInfoTable2C td {
		padding: 4px 3px !important;
	}
}

/* small UI */
.preflight,
.startITTenvelope, .airStartEnvelope, .emergDescentProfiles, .torqueEnvelope,
.coldWeatherStart, .preheat {
	width: 280px;
}

@media screen and (min-width: 480px) {		/* small UI 480px */
	.preflight,
	.startITTenvelope, .airStartEnvelope, .emergDescentProfiles, .torqueEnvelope,
	.coldWeatherStart, .preheat {
		width: 440px;
	}
}
@media screen and (min-width: 600px) {		/* small UI 600px */
	.preflight,
	.startITTenvelope, .airStartEnvelope, .emergDescentProfiles, .torqueEnvelope,
	.coldWeatherStart, .preheat {
		width: 540px;
	}
}
@media screen and (min-width: 768px) and (min-height: 700px) {		/* large UI */
	.preflight,
	.startITTenvelope, .airStartEnvelope, .emergDescentProfiles, .torqueEnvelope,
	.coldWeatherStart, .preheat {
		width: 730px;
	}
}

.clAlarmRecallTable {
	margin-top: 4px;
	margin-bottom: 4px;
	border-collapse: separate;
}

.clAlarmRecallTable tr {
	border: none;
}

.clAlarmRecallTable tr td:nth-child(2) {
	padding-right: 8px;
}

.clAlarmRecallTable .masterWarning,
.clAlarmRecallTable .masterCaution {
	border: solid 2px black;
	border-radius: 6px;
	text-align: center;
	font-weight: bold;
	padding: 4px 2px !important;
}

.clOxyTable, .clTirePressTable {
	width: 100%;
}

.clTirePressTable, .clColdEnvelopeTable {
	width: 300px;
	margin: auto;
}

.clCruiseTable {
	width: 500px;
	margin: auto;
}

.clOxyTable td, .clColdEnvelopeTable {
	text-align: center;
	padding: 2px 4px;
}

@media screen and (max-width: 767px), screen and (max-height: 699px) {		/* small UI */
	.clOxyTable td {
		text-align: left;
	}

	.clOxyTable td:first-child {
		width: 42%;
		padding-right: 4px;
	}
}
.masterWarning, .engWarning {
	background-color: red;
}

.masterCaution, .engCaution {
	background-color: gold;
}

/*
 * Circuit Breakers page
 */

.io-cb-diagram, .io-cbp-diagram, .io-cbe-diagram {
	max-width: 97%;
	width: 600px;
}

.cbRow td:first-child, .cbRow2 td:first-child {
	width: 135px;
}

.cbRow2 td:nth-child(2) {
	width: 175px;
}

.cbRow2 td:nth-child(3) {
	width: 100px;
}

.io-cbe-description {
	width: 550px;
}

@media screen and (max-width: 767px), screen and (max-height: 699px) {		/* small UI */
	.cbe .s0, .cbe .S0 {
		width: 160px;
	}
	.io-cbe-description {
		width: 97% !important;
	}
}

/*
 * Climb Torque page
 */

.climbtq .rowLabel {
	width: 50%;
}

.climbtq .ioNumPM {
	margin: auto;
}

.climbTorque {
	width: 100%;
}

.climbTorqueISA {
	margin: auto;
}

.climbTorqueISA tr {
	border: none;
}

.climbTorqueISA td:first-child {
	text-align: right;
}

.climbTorqueISA td:nth-child(2) {
	text-align: left;
	padding: 4px;
	width: 20px;
}

.climbTorqueISA td:last-child {
	text-align: left;
	padding: 4px;
}

.climbTorque th, .climbTorque td {
	text-align: center;
}

.climbTorque tr:nth-child(even) {
	background: lightgrey;
}

.climbTorque {
	max-width: 400px;
	margin: auto;
}
/*
 * Departure page
 */

.devWidthGE-XL .dep .iGroup,
.devWidthGE-XL .dep .oGroup {	/* side by side on large width */
	float: left;
	width: 50%;
}

.dep .iGroup .rowLabel {
	width: 25%;
}
.dep .oGroup .rowLabel {
	width: 45%;
}

.dep .oGroup canvas {
	width: 140px;
	height: 210px;
	margin-left: 0;
}
.dep .canvasRow > td > div {
	display: flex;
	justify-content: center;
}
.dep .canvasRow .rwyText {
	width: 188px;
	text-align: left;
	margin-top: 4px;
	margin-left: 4px;
}

.devWidthLT-M .io-dep-cruiseProfile {
	font-size: 14px;		/* too big on small screens */
}

.devWidthXS .dep .canvasRow .rwyText {
	width: 160px;
}

.dep .wind span {
	white-space: nowrap;
}

.northSel td {				/* also dest */
	text-align: center;
	min-width: 8ch;
	padding: 2px;
}

.northSel .northHead td {	/* also dest */
	font-size: 85%;
}

/*
 * Departure Procedure page
 */

.dp .rowLabel {
	width: 45%;
}

/*
 * Destination page
 */

.devWidthGE-XL .dest .iGroup,
.devWidthGE-XL .dest .oGroup {	/* side by side on large width */
	float: left;
	width: 50%;
}

.dest .iGroup .rowLabel {
	width: 25%;
}
.dest .oGroup .rowLabel {
	width: 45%;
}

.dest .oGroup canvas {
	width: 140px;
	height: 210px;
}
.dest .canvasRow > td > div {
	display: flex;
	justify-content: center;
}
.dest .canvasRow .rwyText {
	width: 179px;
	text-align: left;
	margin-top: 4px;
	margin-left: 4px;
	margin-right: -10px;
}
.devWidthXS .dest .canvasRow .rwyText {
	width: 162px;
	font-size: 13.5px;
	margin-right: -4px;
}

.dest .wind span {
	white-space: nowrap;
}

.destFuel td {
	text-align: center;
	min-width: 73px;
	padding: 2px;
}

.destFuel .destFuelHead td {
	font-size: 85%;
}

/*
 * Emergency memory items page,
 */
.largeUI .mem .pageMain {
	left: 200px;
	right: 2px;
	max-width: 922px;
	overflow: scroll;
}

.mem .noMemText {
	text-align: center;
	padding-top: 40px;
	font-size: 20px;
	font-weight: bold;
}

.mem .group > span > span > .clStep:first-child {
	border-top: none;
}

.mem .group {
	background-color: transparent;			/* hides group background for button */
}

.mem .group button {
	margin-left: 40px;
}

/*
 * Enroute page
 */

.enrt .rowLabel {
	width: 40%;
}
.devWidthLT-M .enrt .rowLabel {
	width: 38%;
}

.enrt .oGroup canvas {
	width: 330px;
	margin-left: 0;
}
.enrt .canvasRow div {
	width: 330px;
	text-align: left;
	padding: 2px;
	margin: auto;
}
.devWidthLT-M .enrt .oGroup canvas {
	width: 300px;
}
.devWidthLT-M .enrt .canvasRow div {
	width: 300px;
}

.windMode, .routeDistMode {
	height: 30px;
	font-size: 90%;
}

/*
 * Glide page
 */

.glide .rowLabel {
	width: 45%;
}

.glide .radioTable td {
	width: 50px;
	height: 1px;
}
.glide .radioTable tr:first-child td {
	font-size: 19px;
	vertical-align: bottom;
	text-align: center;
	padding-bottom: 0;
	padding-top: 4px;
}
.glide .radioTable tr:last-child td {
	vertical-align: top;
	text-align: center;
	padding-bottom: 0;
	padding-top: 0;
}

/* style the glide distance computer */
.glideShowTemp, .glideHideTemp {
	margin: auto;
	width: 300px;
	position:relative
}
.glideShowTemp {
	height: 350px;
}
.glideHideTemp {
	height: 275px;
}
.glideShowTemp tr, .glideHideTemp tr {
	border: none;
}
.glideShowTemp td, .glideHideTemp td {
	text-align: center;
}

.glideAlt, .glideDistTable {
	position:absolute;
	top: 90px;
}
.glideAlt {
	left: 0;
	transform: translate(0,-50%);	/* top positioning refers to center of height */
	-webkit-transform: translate(0,-50%);
}

.glideDistTable {
	left: 185px;
	height: 50px;
	transform: translate(-50%,-50%);	/* positioning refers to center */
	-webkit-transform: translate(-50%,-50%);
}
.glideDistTable td {
	height: 45px;
}

.glideDistance {
	color: red;
	font-size: 34px;
}

.glideWindSpeed {
	position:absolute;
	top: 130px;
	left: 185px;
	transform: translate(-50%,0);	/* left/right positioning refers to center of width */
	-webkit-transform: translate(-50%,0);
}

.glideHeadWind, .glideTailWind {
	position:absolute;
	top: 235px;
}
.glideHeadWind {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	right: 115px;
	padding-right:18px;
}
.glideTailWind {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	left: 185px;
	padding-left:18px;
}

.glideTempTable {
	position:absolute;
	bottom: 0;
	left: 185px;
	transform: translate(-50%, 0);	/* X positioning refers to center of width */
	-webkit-transform: translate(-50%, 0);
}
.glideTempContent {
	width: 128px;
}

.io-glide-targetAltitude {
	width: 100px;
}

/*
 * Quick Setup page
 */

.devWidthXS .quick {
	font-size: 13px;
}

.quickWBgroup .rowLabel {
	width: 40%;
}
.quickDepGroup .rowLabel,
.quickEnrtGroup .rowLabel,
.quickAltGroup .rowLabel,
.quickDestGroup .rowLabel {
	width: 50%;
}
.devWidthLT-M .quickWBgroup .rowLabel,
.devWidthLT-M .quickDepGroup .rowLabel,
.devWidthLT-M .quickEnrtGroup .rowLabel,
.devWidthLT-M .quickAltGroup .rowLabel,
.devWidthLT-M .quickDestGroup .rowLabel {
	width: 35%;
}

.quickWBgroup .group td:nth-child(2),
.quickWBgroup .group td:nth-child(3) {
	text-align: center;
}
.quickWBgroup .group td:last-child {
	text-align: left;
	padding-left: 2px;
}

/* the Trip page copies the quick setup page. */
/* Make the "save as trip" and "Reverse" button and the winds invisible in Trip */
.trip .saveAsTrip, .trip .reverseTrip, .trip .quickWind {
	display: none;
}

/*
 * Summary (flight performance) page
 */

.sumHeader {
	width: 100%;
}
.sumAC, .sumTrip {
	display: inline-block;
}

.sumTrip .groupTitle,
.sumAC .groupTitle {
	display: none;
}
.sumTrip .group,
.sumAC .group {
	margin-top: 4px;
}
.sumTrip td:nth-child(2),
.sumAC td:nth-child(2) {
	display:flex;
	align-items:center;
	justify-content: space-between;
}
.sumTrip .group {
	width: 347px;
}
.sumTrip .input {
	width: 215px;
	margin-right: 13px;
}
.sumTrip .rowLabel {
	width: 62px;
	min-width: 62px;
}

.sumQuick {
	float: right;
	margin-top: 5px;
	margin-right: 2px;
	width: 53px;
}
.sumEmail {
	float: right;
	margin-top: 5px;
	margin-right: 2px;
}

.sumAC .group {
	width: 263px;
}
.sumAC .group select {
	width: 104px;
	margin-right: 13px;
}
.sumAC .rowLabel {
	min-width: 89px;
	width: 89px;
}

.sumWB canvas {
	margin-left: auto;
	margin-right: auto;
}

.sumDep canvas, .sumDest canvas {
	margin-left: 0;
	margin-right: 0;
}
.sumDep .canvasRow > td > div,
.sumDest .canvasRow > td > div {
	display: flex;
	justify-content: center;
}
.sumDep .canvasRow .rwyText,
.sumDest .canvasRow .rwyText {
	text-align: left;
	margin-top: 4px;
	margin-left: 4px;
	margin-right: -4px
}

.sumEnrt input.io-enrt-windSpeed-kt {
	max-width: 3em;
	margin: 0;
}
.sumEnrt select.io-enrt-windDir {
	max-width: 8em;
	margin: 0;
}

/* When viewport width < 1024, groups are arranged in a 2x2 array. */
.devWidthLT-XL .sumEnrt {
	clear: left;
}
.devWidthLT-XL .sumWB,
.devWidthLT-XL .sumDep,
.devWidthLT-XL .sumEnrt,
.devWidthLT-XL .sumDest {
	width: 50%;
	float: left;
}

.devWidthLT-XL .sumDiv .group,
.devWidthLT-XL .sumDiv .input {
	font-size: 15px;
}

.devWidthLT-XL .sumWB .rowLabel {
	width: 155px;
}
.devWidthLT-XL .sumDep .rowLabel {
	width: 42%;
}
.devWidthLT-XL .sumEnrt .rowLabel {
	width: 35%;
}
.devWidthLT-XL .sumDest .rowLabel {
	width: 35%;
}

.devWidthLT-XL .sumWB canvas {
	/* 800x600 * 15px/40px (font-size) */
	width: 300px;
	height: 225px;
}
.devWidthLT-XL .sumDep canvas,
.devWidthLT-XL .sumDest canvas {
	width: 140px;
	height: 210px;
}
.devWidthLT-XL .sumEnrt canvas {
	/* 600x140 * 15px/27px (font-size) */
	width: 333.3px;
	height: 77.8px;
	margin-left: 0;
}
.devWidthLT-XL .sumEnrt .canvasRow div {
	text-align: left;
	width: 364px;
	padding: 2px;
	margin: auto;
}
.devWidthLT-XL .sumDep .canvasRow .rwyText,
.devWidthLT-XL .sumDest .canvasRow .rwyText {
	width: 175px;
}

/* Adjustments for viewport width < 768 */
.devWidthLT-L .sumDiv .group,
.devWidthLT-L .sumDiv .input,
.devWidthLT-L .sumTrip .group,
.devWidthLT-L .sumAC .group {
	font-size: 12px;
}
.devWidthLT-L .sum .titleButton {
	width: 45px;
	font-size: 12px;
}

.devWidthLT-L .sumTrip .rowLabel {
	width: 49px;
	min-width: 49px;
}
.devWidthLT-L .sumTrip .group {
	width: 234px;
}
.devWidthLT-L .sumTrip .input {
	width: 125px;
	font-size: 12px;
	margin-right:6px;
}

.devWidthLT-L .sumAC .rowLabel {
	width: 70px;
	min-width: 70px;
}
.devWidthLT-L .sumAC .group {
	width: 209px;
}
.devWidthLT-L .sumAC .input {
	width: 84px;
	font-size: 12px;
	margin-right:6px;
}

.devWidthLT-L .sumWB .rowLabel {
	width: 110px;
}
.devWidthLT-L .sumWB canvas {
	/* 800x600 * 12px/40px (font-size) */
	width: 240px;
	height: 180px;
}

.devWidthLT-L .sumDep .rowLabel {
	width: 90px;
}
.devWidthLT-L .sumDep canvas,
.devWidthLT-L .sumDest canvas {
	width: 100px;
	height: 150px;
}
.devWidthLT-L .sumDep .canvasRow .rwyText,
.devWidthLT-L .sumDest .canvasRow .rwyText {
	width: 140px;
}
.devWidthLT-L .sumDep .row2c td:last-child {
	min-width: 55px;
}

.devWidthLT-L .sumEnrt .rowLabel {
	width: 110px;
}
.devWidthLT-L .sumEnrt canvas {
	/* 600x140 * 12px/27px (font-size) */
	width: 266.7px;
	height: 62.2px;
	margin-left: 0;
}
.devWidthLT-L .sumEnrt .canvasRow div {
	text-align: left;
	width: 267px;
	padding: 2px;
	margin: auto;
}
.devWidthLT-L .sumEnrt td:nth-child(2) {
	width: 50px !important;
}
.devWidthLT-L .sumEnrt .row2c td:last-child {
	min-width: 40px;
	padding-right: 2px;
}

.devWidthLT-L .sumDest .rowLabel {
	width: 90px;
}

/* When viewport width >= 1024, groups are arranged horizontally. */
.devWidthGE-XL .sumDiv .group,
.devWidthGE-XL .sumDiv .input {
	font-size: 12px;
}

.devWidthGE-XL .sumWB,
.devWidthGE-XL .sumDep,
.devWidthGE-XL .sumEnrt,
.devWidthGE-XL .sumDest {
	width: 25%;
	float: left;
}

.devWidthGE-XL .sumWB .rowLabel {
	width: 110px;
}
.devWidthGE-XL .sumWB canvas {
	/* 800x600 * 12px/40px (font-size) */
	width: 232px;
	height: 174px;
}

.devWidthGE-XL .sumDep .rowLabel {
	width: 35%;
}
.devWidthGE-XL .sumDep canvas,
.devWidthGE-XL .sumDest canvas {
	width: 100px;
	height: 150px;
}
.devWidthGE-XL .sumDep .canvasRow .rwyText,
.devWidthGE-XL .sumDest .canvasRow .rwyText {
	width: 140px;
}
.devWidthGE-XL .sumDep .row2c td:last-child {
	min-width: 55px;
}

.devWidthGE-XL .sumEnrt .rowLabel {
	width: 85px;
	min-width: 85px;
}
.devWidthGE-XL .sumEnrt canvas {
	width: 240px;
	height: 56px;
	margin-left: 0;
}
.devWidthGE-XL .sumEnrt .canvasRow div {
	text-align: left;
	width: 240px;
	padding: 2px;
	margin: auto;
}
.devWidthGE-XL .sumEnrt td:nth-child(2) {
	width: 50px !important;
}

.devWidthGE-XL .sumDest .rowLabel {
	width: 90px;
}

/* Adjustments for really large viewport (iPad Pro 12") */
.devWidthXXL .sumWB .rowLabel {
	min-width: 110px;
}
.devWidthXXL .sumWB canvas {
	width: 260px;
	height: 195px;
}

.devWidthXXL .sumDep .rowLabel,
.devWidthXXL .sumDest .rowLabel {
	width: 35%;
	min-width: 130px;
}
.devWidthXXL .sumDep canvas,
.devWidthXXL .sumDest canvas {
	width: 120px;
	height: 160px;
	margin-left: 0;
}
.devWidthXXL .sumDep .canvasRow .rwyText,
.devWidthXXL .sumDest .canvasRow .rwyText {
	width: 140px;
}

.devWidthXXL .sumEnrt .rowLabel {
	min-width: 105px;
	width: 105px;
}
.devWidthXXL .sumEnrt canvas {
	width: 270px;
	height: 56px;
}
.devWidthXXL .sumEnrt .canvasRow div {
	text-align: left;
	width: 270px;
	padding: 2px;
	margin: auto;
}

/* When viewport width < 556, groups are arranged vertically. */

.devWidthLT-M .sumHeader {
	display:flex;
	align-items:center;
	justify-content: space-between;
}
.devWidthLT-M .sum button {
	font-size: 12px;
}

.devWidthLT-M .sum .titleButton {
	width: 45px;
}
.devWidthLT-M .sumHeader > .titleButton {
	margin-top: 4px;
	margin-right: 2px;
}
.devWidthLT-M .sumHeader {
	flex-wrap: wrap;
	align-items: center;
}

.devWidthLT-M .sumTrip {
	order: 1;
}
.devWidthLT-M .sumQuick {
	order: 2;
}
.devWidthLT-M .sumAC {
	order: 3;
}
.devWidthLT-M .sumEmail {
	order: 4;
}

.devWidthLT-M .sumTrip,
.devWidthLT-M .sumAC {
	font-size: 12px;
	float: left;
}
.devWidthLT-M .sumTrip .group,
.devWidthLT-M .sumAC .group {
	width: 255px;
}
.devWidthLT-M .sumTrip .rowLabel,
.devWidthLT-M .sumAC .rowLabel {
	width: 70px;
}

.devWidthLT-M .sumTrip td:last-child,
.devWidthLT-M .sumAC td:last-child {
	padding-right: 2px;
}

.devWidthLT-M .sumTrip .input,
.devWidthLT-M .sumAC .input {
	font-size: 12px;
	width: 130px;
}

.devWidthLT-M .groupTitle {
	font-size: 12px;
	margin-top: 6px;
	min-height: 22px;
}

.sumTrip .input,
.sumAC .input {
	display: inline-block;
}

.devWidthLT-M .sumWB,
.devWidthLT-M .sumDep,
.devWidthLT-M .sumEnrt,
.devWidthLT-M .sumDest {
	width: 100%;
	float: left;
}

.devWidthLT-M .sumWB canvas {
	width: 200px;
	height: 150px;
}

/*
 * Procedure groups
 */

.largeUI .clGrps .pageMain {
	left: 200px;
	right: 2px;
	overflow: scroll;
}

.clGrps .pageContent {
	overflow-x: hidden;
	overflow-y: auto;
}

.g1000CASwarning, .g1000CAScaution, .g1000CASadvisory,
.g1000HSIcaution, .g1000MsgWhite, .g1000MsgYellow,
.g1000MsgWhite {
	padding: 1px 3px 0 2px;
	line-height: 20px;
}

.CASwarning, .CAScaution {
	border-radius: 4px;
	padding: 1px 2px 0 2px;
}

.EFS40warning {
	padding: 1px 1px 0 2px;
	color: red;
	border: 2px solid red;
	background-color: black;
	line-height: 1.6;
}

.EFS40caution {
	padding: 1px 1px 0 2px;
	color: gold;
	border: 2px solid gold;
	background-color: black;
	line-height: 1.6;
}

.gearWarn {
	padding: 1px 2px 0 2px;
	color: black;
	background-color: red;
	font-style: normal;
}

.clGrps .viewList .g1000CASwarning,
.clGrps .viewList .g1000CAScaution,
.clGrps .viewList .g1000CASadvisory {
	padding: 5px;
	border-radius: 4px;
}
.clGrps .viewList .casPanel {
	border: 1px solid black;
	padding: 4px;
}
.clGrps-proc button {
	float: left;
	border-radius: 8px !important;
	margin: 4px;
}
.clGrps .pageContent .titleButton {
	background-color: #e8e8e8;
	color: black;
	height: 40px;
	width: 140px;
}

.clGrps-proc .groupTitle td:last-child {
	width: 296px;
	padding: 0;
}

/* Center the buttons in the group */
.clGrps-proc .group {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	width: 100%;
}
.clGrps-proc .group button {
	font-size: 15px;
	line-height: 20px;
	height: 48px;
	width: 370px;
	margin: 8px;
	padding: 2px;
}

.clGrps-casW .group button, .clGrps-casC .group button, .clGrps-casA .group button {
	width: 170px;
	height: 54px;
	font-size: 14px;
}

.clGrps-casC .group button {
	margin: 7px 8px;
}

/* these can have 3 lines and styled warning lights in text */
.clGrps-emergency .group button,
.clGrps-normal .group button,
.clGrps-engine .group button,
.clGrps-electric .group button,
.clGrps-pressure .group button,
.clGrps-deice .group button,
.clGrps-avionics .group button {
	/*font-size: 15px;	/* a bit smaller font */
	/*line-height: 22px;	/* leave room in lines for style warning lights */
	/*height: 70px;*/
}

.clGrps-normal .group button, .clGrps-particular .group button {
	height: 48px;
	width: 260px;
}

.clGrps-g1000 .group button {
	width: 170px;
	height: 40px;
	margin: 4px 8px;
}
.clGrps-g3000 .group button {
	height: 48px;
	width: 300px;
	margin: 4px 8px;
	font-size: 14px;	/* a bit smaller font */
}
/* G3000: these can have 3 lines */
.clGrps-gnCom .group button,
.clGrps-gnMaps .group button,
.clGrps-gnWyptAirsp .group button,
.clGrps-gnFmsFp .group button,
.clGrps-gnFmsProc .group button,
.clGrps-gnFmsPerf .group button,
.clGrps-gnHzdDl .group button,
.clGrps-gnRdr .group button,
.clGrps-gnHzdTerrain .group button,
.clGrps-gnStSwCht .group button {
	height: 64px;
}

.clGrps-casPanel {
	border: 1px solid black;
	border-collapse: collapse;
	margin: 4px;
}
.clGrps-casPanel td button {
	height: 48px !important;
	min-width: 48px !important;
	max-width: 19vw !important;
	width: 7em !important;
	margin: 0 !important;
	border-radius: 0 !important;
	border: none !important;
}
.clGrps-casPanel td {
	border: 2px solid black;
	padding: 0;
	font-size: 90%;
	background-color: lightgray;
}

.clGrps-filter {
	padding-top: 6px;
	width: 100%;
	display: flex;
	justify-content: center;
}
.clGrps-filter .input {
	display: inline-block;
	min-width: 15ch;
}
.clGrps-filter td:first-child {
	font-weight: bold;
	text-align: right;
}
.devWidthLT-L .clGrps {
	font-size: 12px;
}

.devWidthLT-L .clGrps button {
	font-size: 13px;
}
/* "Normal & Emergency Procedures" is too big*/
.smallUI .clGrps .viewHeaderBar {
	font-size: 85%;
}
.smallUI .clGrps .viewHeaderBar td:nth-child(2) {
	white-space: normal;
}
.devWidthLT-L .clGrps .groupTitle .titleButton {
	max-width: 82px;
	height: auto;
}
.devWidthLT-L .clGrps-proc .groupTitle td:last-child {
	width: 187px;
}

.devWidthLT-L .clGrps-proc .group button {
	font-size: 12px;
	line-height: 18px;
	height: 60px;
	width: 170px;
	margin: 4px;
	padding: 1px 2px;
}

.devWidthLT-L .clGrps-casW .group button, .clGrps-casC .group button {
	width: 167px;
	height: 48px;
}

.devWidthLT-XL .clGrps-g3000 .group button {
	font-size: 13px;
	line-height: 17px;
	height: 58px;
	width: 266px;
}
.devWidthLT-L .clGrps-g3000 .group button {
	font-size: 11.2px;
	line-height: 17px;
	height: 58px;
	width: 186px;
}
.devWidthLT-M .clGrps-g3000 .group button {
	font-size: 11.2px;
	line-height: 17px;
	height: 44px;
	width: 300px;
}
/* these can have 4 lines */
.devWidthM .clGrps-g3000 .clGrps-gnHzdDl .group button,
.devWidthM .clGrps-g3000 .clGrps-gnRdr .group button,
.devWidthM .clGrps-g3000 .clGrps-gnHzdTerrain .group button {
	line-height: 15px;
	height: 64px;
}

/* these can have 3 lines and styled warning lights in text */
.devWidthLT-L .clGrps-emergency .group button,
.devWidthLT-L .clGrps-engine .group button,
.devWidthLT-L .clGrps-electric .group button,
.devWidthLT-L .clGrps-pressure .group button,
.devWidthLT-L .clGrps-deice .group button,
.devWidthLT-L .clGrps-avionics .group button {
	line-height: 21px;	/* leave room in lines for style warning lights */
	width: 190px;
	height: 67px;
}

.devWidthLT-L .clGrps-g1000 .group button{
	width: 150px;
	height: 40px;
}

.devWidthLT-L .clGrps-casPanel td button {
	font-size: 70% !important;
	height: 44px !important;
	min-width: 58px !important;
	max-width: 19vw !important;
	margin: 0 !important;
	border-radius: 0 !important;
	border: none !important;
}

.clAirspeedTable td {
	line-height: 1.2em;
	padding: 4px;
	border: 1px solid black;
}
.clAirspeedTable th {
	text-decoration: none;
	padding: 4px;
	border: 1px solid black;
}
.clAfcsFdTable, clAfcsVertModeTable, clAfcsLatModeTable, clAfcsCombiModeTable,
.clAfcsAtModeTable, .clAfcsAtFdModeTable {
	width: 100%;
}
.clAfcsFdTable td, .clAfcsFdTable th,
.clAfcsVertModeTable td, .clAfcsVertModeTable th,
.clAfcsLatModeTable td, .clAfcsLatModeTable th,
.clAfcsCombiModeTable td, .clAfcsCombiModeTable th,
.clAfcsAtModeTable td, .clAfcsAtModeTable th,
.clAfcsAtFdModeTable td, .clAfcsAtFdModeTable th
{
	border: 1px solid darkgrey;
}
.clAfcsFdTable td, .clAfcsVertModeTable td,
.clAfcsLatModeTable td, clAfcsCombiModeTable td,
.clAfcsAtModeTable td, .clAfcsAtFdModeTable td {
	padding-left: 4px;
	padding-right: 4px;
}
.clAfcsFdTable td:nth-child(3), .clAfcsFdTable td:nth-child(5),
.clAfcsVertModeTable td:nth-child(3), .clAfcsVertModeTable td:nth-child(4),
.clAfcsLatModeTable td:nth-child(3), .clAfcsLatModeTable td:nth-child(4),
.clAfcsCombiModeTable td:nth-child(3), .clAfcsCombiModeTable td:nth-child(4),
.clAfcsAtModeTable td:first-child,
.clAfcsAtFdModeTable td
{
	text-align: center;
}
.clAfcsAtModeTable td:first-child span.g1000AParm,
.clAfcsAtModeTable td:first-child span.g1000APmode {
	display: inline-block;
	min-width: 12ch;
}

/*
 * Trips page
 */

.devWidthGE-XL .trip .tripData {
	width: 100%;
}

.largeUI .trip .pageMain {
	left: 200px;
	right: 2px;
	max-width: 922px;
	overflow: scroll;
}

.trip .rowLabel {
	width: 32%;
}
.devWidthLT-M .trip .rowLabel {
	width: 35%;
	max-width: 180px;
}

.devWidthLT-M .io-trip-name {
	width: 210px;
}

/*
 * Weight and Balance page
 */

.devWidthGE-XL .wb .iGroup,
.devWidthGE-XL .wb .oGroup {	/* side by side on large width */
	float: left;
	width: 50%;
}

.wb .rowLabel {
	width: 35%;
}

.wb .iGroup td:nth-child(2), .wb .iGroup td:nth-child(3) {
	text-align: center;
}
.wb .iGroup td:last-child {
	text-align: left;
	padding-left: 2px;
}

.wb canvas {
	width: 300px;
	height: 225px;
}
.devWidthLT-M .wb canvas {
	width: 300px;
	height: 225px;
}