/*
 * 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: 60%;
}

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

/*
 * Approach Procedure page
 */

.ap .rowLabel {
	width: 45%;
}

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

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

/*
 * 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;
}
.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%;
}

/*
 * 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: 40%;
}
.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: -10px
}

.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;
}

/*
 * 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;
}