/*
 * Generic style that applies to all devices.
 * Must be included before other stylesheets.
 *
 * We're forced to style assuming viewport-fit=cover because viewport-fit-contain does
 * fails to enforce the bottom safe area on iOS for webapps (it works fine in Cordova).
 * To make this work, all app elements are contained within #view and #view is the
 * only element with postion:fixed. All app elements that are outside the normal
 * page flow (e.g. dialogs) should be position:absolute. The body cover the entire
 * display with a black background and #view is positioned within the safe area.
 */

* {
	box-sizing: border-box;
}

body {
	width: 100%;
	font: normal 17px FontAwesome, Helvetica, Arial, sans-serif;
	background-color: black;	/* for safe areas on mobile devices */
	-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;-ms-text-size-adjust: none;
	margin: 0;
}

/* the main container for all app HTML */
#view {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgb(220,220,225);
	overflow: hidden;
}

/* safe areas prior to iOS 11.2 */
@supports (padding: constant(safe-area-inset-top)) {
	#view {
		top: constant(safe-area-inset-top);
		right: constant(safe-area-inset-right);
		bottom: constant(safe-area-inset-bottom);
		left: constant(safe-area-inset-left);
	}
}

/* safe areas for iOS 11.2 and after */
@supports (padding: env(safe-area-inset-top)) {
	#view {
		top: env(safe-area-inset-top);
		right: env(safe-area-inset-right);
		bottom: env(safe-area-inset-bottom);
		left: env(safe-area-inset-left);
	}
}

input {
	font-family: FontAwesome, Helvetica, Arial, sans-serif;
}

/*
 * Styling for generic elements.
 * Do this first to override later.
 */
h1 {
	font-size: 19px;
	font-weight: bold;
}

h2 {
	font-size: 17px;
	font-weight: bold;
}

h3 {
	font-size: 17px;
	font-weight: bold;
}

ul {
	list-style-type: disc;
	list-style-position: outside;
	margin-left: 0;
	padding-left: 1.1em;
}

li {
	margin-left: 0;
	padding-left: 0;
}

table {
	border-collapse: collapse;
}

td {
	vertical-align: middle;
	padding-top: 2px;
	padding-bottom: 2px;
}

thead tr {
	border-bottom: 1px solid #B4B4B4;
}

th {
	font-weight: bold;
	text-decoration: underline;
	padding-top: 4px;
	padding-bottom: 4px;
}

td:first-child {
	padding-left: 6px;
}

td:last-child {
	padding-right: 6px;
}

tr:first-child {
	border-top: 0;
}

select {
	color: darkblue;
	font-size: 16px;
	font-weight: bold;
}

.selectorArrow {
	content: "\f054";
	width: 25px;
}

input, .input, .inputCustom {
	/* The default input styling seems to come out too small without some help. */
	font-size: 16px;
	font-weight: bold;
	color: darkblue;
	padding: 2px;
}

textarea {
	/* The default input styling seems to come out too small without some help. */
	font-size: 16px;
}

.input, .output {
	color: darkblue;
}

input:disabled, .inputDisabled {
	color: rgb(40, 40, 120);
	background-color: rgb(230, 230, 230);
	opacity: 1.0;
}

.inputCustom, .input {
	border: 1px solid lightGray;
}

.inputCustom {
	display: inline-block;
}

.invalid {
	color: red;
	text-decoration: line-through;
}

input[type="button"], button {
	color: black;
	font-size: 16px;
	font-weight: bold;
	background-color: #e8e8e8;
	border: 1px solid #808080;
	-webkit-appearance: none;
	border-radius: 4px;
	height: 24px;
	min-width: 24px;
	padding-left: 4px;
	padding-right: 4px;
}

.inputButton {
	float: right;
	margin-right: 8px;
	color: black;
	min-height: 26px;
}

input[type="radio"] {
	border: solid 1px black;
/*
	width: 24px;
	height: 24px;
	border-radius: 12px;
*/
}

input[type="checkbox"] {
	border: solid 1px black;
	width: 22px;
	height: 22px;
	border-radius: 4px;
}

canvas {
	margin: 5px;
}

/* prevent wrapping before units text */
.unitSpan {
	white-space: nowrap;
}

/* references to other pages */
.reference {
	text-decoration: underline;
	color: blue;
	white-space: nowrap;
}

/* Miscellaneous warnings */
.warn {
	color: red;
}

/*
 * Some browsers mangle the input width. Adjust.
 */
.input.n2 {
	min-width: 3ch;
	max-width: 6ch;
	text-align: right;
}

.input.n3 {
	min-width: 4ch;
	max-width: 7ch;
	text-align: right;
}

.input.n4 {
	min-width: 5ch;
	max-width: 8ch;
	text-align: right;
}

.input.n5 {
	min-width: 6ch;
	max-width: 10ch;
	text-align: right;
}

.input.n6 {
	min-width: 7ch;
	max-width: 10ch;
	text-align: right;
}

.input.n7 {
	min-width: 8ch;
	max-width: 11ch;
	text-align: right;
}

.input.n8 {
	min-width: 9ch;
	max-width: 12ch;
	text-align: right;
}

.input.s0, .input.S0 {
	text-align: left;
}
.input.s4, .input.S4 {
	min-width: 4ch;
	max-width: 4em;
	text-align: left;
}
.input.s5, .input.S5 {
	min-width: 5ch;
	max-width: 5em;
	text-align: left;
}
.input.s6, .input.S6 {
	min-width: 6ch;
	max-width: 6em;
	text-align: left;
}
.input.s7, .input.S7 {
	min-width: 7ch;
	max-width: 7em;
	text-align: left;
}
.input.s7, .input.S7 {
	min-width: 7ch;
	max-width: 7em;
	text-align: left;
}
.input.s8, .input.S8 {
	min-width: 8ch;
	max-width: 8em;
	text-align: left;
}
.input.s12, .input.S12 {
	min-width: 12ch;
	max-width: 12em;
	text-align: left;
}
.input.s20, .input.S20 {
	min-width: 20ch;
	max-width: 20em;
	text-align: left;
}

.input.S0, .input.S4, .input.S5, .input.S6, .input.S7, .input.S8, .input.S12, .input.S20 {
	text-transform: uppercase;
}

.wind .input.S5 {
	max-width: 6ch;
	text-align: right;
}

.wind .input.S7 {
	max-width: 8ch;
	text-align: right;
}

button {
	font-family:inherit;
	height: 45px;
	min-width: 46px;
}
.devWidthLT-M button {
	height: 32px;
	min-width: 32px;
}

/* Input with + and = buttons */
.ioNumPM {
	text-align: center;
}

/*
 * Header bars
 */
.viewHeaderBar {
	width: 100%;
	height: 50px;
	background-color: grey;
	color: white;
	white-space: nowrap;
}

.viewHeaderBar td {
	vertical-align: middle;
}

.viewHeaderBar td:first-child {
	width: 25%;
	text-align: left;
	padding-left: 4px;
}

.viewHeaderBar td:nth-child(2) {
	width: 50%;
	text-align: center;
}

.viewHeaderBar td:last-child {
	width: 25%;
	text-align: right;
	padding-right: 4px;
}

/*
 * Style groups and rows
 */

.column {								/* wrapper for groups in a column */
	width: 100%;
}

.devWidthGE-XL .column {
	float: left;
	width: 50%;
}

.groupTitle {
	margin-top: 10px;
	margin-bottom: 4px;
	min-height: 28px;
	width: 100%;
	font-size: 16px;
	font-weight: bold;
	vertical-align: middle;
	text-align: left;
}

.groupTitle button {
	height: 24px;
}

.group {
	margin-top: 4px;
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: bold;
	border-collapse: collapse;
	border-radius: 8px;
	background-color: white;
	overflow: hidden;
}

.iGroup, .oGroup {
	padding-left: 3px;
	padding-right: 3px;
}

.group > tbody > tr {
	border-top: 1px solid #B4B4B4;
}

.group > tbody > tr:first-child {
	border-top: none;
}

.groupTitle td:nth-child(2) {
	text-align: center;
}

.groupTitle td:nth-child(3) {
	text-align: right;
}

.iGroup .row1c,
.iGroup .row2c,
.iGroup .rowWB {
	height: 48px;
}
.devWidthLT-M .iGroup .row1c,
.devWidthLT-M .iGroup .row2c,
.devWidthLT-M .iGroup .rowWB {
	height: 40px;
}

.oGroup .row1c,
.oGroup .row2c,
.oGroup .rowWB,
.iGroup .oRow {
	height: 26px;
}

.hide {
	display: none;
}

.oTable td:first-child,
.oTable td:nth-child(3) {
	padding-right: 4px;
}

.row2c td:nth-child(3) {
	text-align:right;
}

.row2c td:nth-child(2) {
	min-width: 50px;
}

.row2c td:nth-child(4) {
	min-width: 50px;
}

.row-disabled {
	color: darkgray;
}

.rowMsg {
	border-top: none !important;
	min-height: 20px;
	color: red;
}

.rowLabel {
	padding-right:6px;
	min-width: 90px;
}

.rowNote {
	height: 26px !important;
}

.rowNote td {
	text-align: center;
	background-color: grey;
	color: white;
	height: 26px;
}

.rowTip {
	color: blue;
	font-weight: bold;
}

.canvasRow td {
	text-align: center;
	padding: 2px 0;
}

/*
 * Style selector lists.
 */
.viewListHeader {
	width: 100%;
	background-color: rgb(170, 170, 170);
	color: white;
	border-bottom: 1px solid black;
}
.smallUI .viewListHeader {
	border-top: 1px solid black;
}

.viewListHeader td:first-child {
	width: 25px;
	text-align: center;
	font-size: 24px;
}

.viewListHeader td:last-child {
	width: 25px;
	text-align: center;
	font-size: 24px;
}

.viewList {
	width: 100%;
}

.viewListNullMsg {
	padding: 3px;
	width: 100%;
	text-align: center;
	color: grey;
}

tr.selectorListElt-sel, tr.selectorListElt-unsel {
	border-bottom: 1px solid #B4B4B4;
	font-size: 15px;
	font-weight: bold;
	line-height: 17px;
}

.selectorListElt-sel td, .selectorListElt-unsel td {
	padding: 3px;
	border-style: none;
	text-align: left;
	vertical-align: middle;
	height: 44px;
}

.selectorListElt-sel {
	background-color: darkblue;
	color: white;
}

.selectorListElt-unsel {
	background-color: white;
	color: black;
}

.doubleSelector .selectorListElt-unsel .selectorArrow {
	color: white;
}

/*
 * Style the faked dropdown selectors
 */
.selDropdown {
	background-repeat: no-repeat;
	background-position: center right;
	background-image: url("../image/dropdown.png");
	padding-top: 4px;
	padding-left: 2px;
	padding-right: 18px;
	border: 1px;
	border-style: inset;
	border-color: initial;
	min-width: 45px;
	min-height: 24px;	/* height of dropdown.png */
	white-space: nowrap;
}

/*
 * Style dialogs.
 */
#dialog-wrapper {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0,0,0,0.2);
	display:flex;
	justify-content: center;
	align-items: center;
}

#dialog-box {
	background-color: white;
	border-radius: 8px;
	border: 4px solid darkblue;
	max-height: 100%;
	min-width: 320px;
}

#dialog-text {
	overflow: auto;
	max-width: 600px;
	min-width: 200px;
	max-height: 600px;
	font-size: 16px;
	font-weight: normal;
	padding: 6px;
	text-align: left;
}

@media screen and (max-height: 680px) {
	#dialog-text {
		max-height: 480px;
	}
}
@media screen and (max-height: 580px) {
	#dialog-text {
		max-height: 380px;
	}
}
@media screen and (max-height: 480px) {
	#dialog-text {
		max-height: 280px;
	}
}
@media screen and (max-height: 380px) {
	#dialog-text {
		max-height: 200px;
	}
}

#dialog-text h2 {
	font-size: 17px;
	font-weight: bold;
}

#dialog-text p {
	margin-bottom: .5em;
}

#dialog-text ul {
	margin-top: .5em;
}

#dialog-buttons {
	display:flex;
	justify-content: space-around;
	padding: 4px;
}

.dialog-button {
	min-width: 65px;
	margin: 15px 6px 6px 6px;
	text-align: center;
	display: block;
}

.smallDialog {
	transform: scale(.3, .3);
	-webkit-transform: scale(.3, .3);
}

.largeDialog {
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	transition: transform 150ms linear;
	-webkit-transition: -webkit-transform 150ms linear;
}

/* spinner */
#dialog-spin-wrapper {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: white;
	display:flex;
	justify-content: center;
	align-items: center;
	opacity: 0.5;
}

@keyframes dialog-spinner {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-webkit-keyframes dialog-spinner {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.dialog-spin-box {
	opacity: 1;
}
.dialog-spin-text {
	text-align: center;
}
.dialog-spinner {
	position: relative;
}
.dialog-spinner div {
	left: 94px;
	top: 48px;
	position: absolute;
	-webkit-animation: dialog-spinner linear 1s infinite;
	animation: dialog-spinner linear 1s infinite;
	background: #28292f;
	width: 12px;
	height: 24px;
	border-radius: 30%;
	-webkit-transform-origin: 6px 52px;
	transform-origin: 6px 52px;
}
.dialog-spinner div:nth-child(1) {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-animation-delay: -0.916666666666667s;
	animation-delay: -0.916666666666667s;
}
.dialog-spinner div:nth-child(2) {
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-webkit-animation-delay: -0.833333333333333s;
	animation-delay: -0.833333333333333s;
}
.dialog-spinner div:nth-child(3) {
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
	-webkit-animation-delay: -0.75s;
	animation-delay: -0.75s;
}
.dialog-spinner div:nth-child(4) {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-animation-delay: -0.666666666666667s;
	animation-delay: -0.666666666666667s;
}
.dialog-spinner div:nth-child(5) {
	-webkit-transform: rotate(120deg);
	transform: rotate(120deg);
	-webkit-animation-delay: -0.583333333333333s;
	animation-delay: -0.583333333333333s;
}
.dialog-spinner div:nth-child(6) {
	-webkit-transform: rotate(150deg);
	transform: rotate(150deg);
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
}
.dialog-spinner div:nth-child(7) {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-animation-delay: -0.416666666666667s;
	animation-delay: -0.416666666666667s;
}
.dialog-spinner div:nth-child(8) {
	-webkit-transform: rotate(210deg);
	transform: rotate(210deg);
	-webkit-animation-delay: -0.333333333333333s;
	animation-delay: -0.333333333333333s;
}
.dialog-spinner div:nth-child(9) {
	-webkit-transform: rotate(240deg);
	transform: rotate(240deg);
	-webkit-animation-delay: -0.25s;
	animation-delay: -0.25s;
}
.dialog-spinner div:nth-child(10) {
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-animation-delay: -0.166666666666667s;
	animation-delay: -0.166666666666667s;
}
.dialog-spinner div:nth-child(11) {
	-webkit-transform: rotate(300deg);
	transform: rotate(300deg);
	-webkit-animation-delay: -0.083333333333333s;
	animation-delay: -0.083333333333333s;
}
.dialog-spinner div:nth-child(12) {
	-webkit-transform: rotate(330deg);
	transform: rotate(330deg);
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
.dialog-spinner {
	width: 100px !important;
	height: 100px !important;
	-webkit-transform: translate(-50px, -50px) scale(0.5) translate(50px, 50px);
	transform: translate(-50px, -50px) scale(0.5) translate(50px, 50px);
}

/* A table to layout radio buttons */
.radioTable, .radioTable tr {
	border: none;
}

/****
 * Style aircraft independent pages.
 ****/

/*
 * Style Help page
 */
.help .pageContent {
	font: normal 12pt FontAwesome, Helvetica, Arial, sans-serif;
	color: black;
	background-color: white;
	padding: 8px;
}

.help .pageContent p {
	text-align: justify;
}

.help .pageContent h1, .help .pageContent h2, .help .pageContent h3,
.help .pageContent ul, .help .pageContent dl {
	text-align: left;
}

.help .pageContent h3 {
	font-weight: normal;
	font-style: italic;
}

.help .pageContent table {
}

.help .pageContent table td, .help .pageContent table th {
	padding: 2px 3px;
	text-align: left;
}

.largeUI .help .pageSelector {
	border-right: solid 3px grey;
}

.largeUI .help .pageMain {
	left: 190px;
	max-width: 834px;
}

/*
 * Style Hold page
 */
.hold .rowLabel {
	width: 45%;
}

.smallUI .hold canvas {
	width: 300px;
	height: 300px;
}

/*
 * Radar page
 */
.rdr .rowLabel {
	width: 35%;
}
.profileRow td, .scopeRow td {
	text-align: center;
}

.rdrProfileLegend {
	margin-left: 0;
	font-size: 17px;
	text-align: left;
}
.smallUI .rdrProfileLegend {
	font-size: 10px;
}
.io-rdr-profile {
	width: 94vw;
	margin: 5px 0;
	max-width: 900px;
}
.io-rdr-scope {
	margin: 5px 0;
	width: 95vw;
	max-width: 500px;
}

.weatherType td {
	width: 11ch;
	text-align: center;
}
/*
 * Style Risk page
 */

.devWidthGE-L .riskInput {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-height: 1300px;
}

.devWidthGE-L .riskInput .iGroup {
	width: 49%;
}

.devWidthGE-L .riskData .oGroup {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

.devWidthGE-L .riskData button,
.devWidthGE-L .riskData .input,
.devWidthGE-L .riskData .groupTitle,
.devWidthGE-L .riskData .group {
	font-size: 14px;
}

.risk .rowLabel {
	width: 40%;
}

.riskMeter {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.riskData {
	position: absolute;
	top: 218px;
	left: 0;
	right: 0;
	bottom:0;
	overflow:scroll;
	border-top: solid 1px black
}

.riskHigh {
	color:red;
}

.risk .group td:nth-child(2) {
	text-align: center;
}

.riskInput .group td:last-child {
	width: 44px;
	text-align: left;
}

.riskMeter td {
	text-align: center !important;
}

.riskMeter .groupTitle {
	min-height: 0;
	margin: 0;
}

.riskMsg td {
	height: 42px;
	font-size: 14px;
}

.smallUI .riskInput .group td {
	font-size: 14px;
}
.smallUI .riskInput .group td:last-child {
	width: 40px;
	padding-left: 2px;
}

/*
 * Style Settings page
 */
.set .rowLabel {
	width: 40%;
}

.set .s0, .io-set-email {
	width: 97%;
}
.set .s0, .io-set-saveId {
	width: 60%;
}

.setCondAdjGrp .group td:nth-child(2), .setCondAdjGrp .group td:nth-child(3) {
	text-align: left;
}

/* the group that displays the TR data */
.setTrData .group {
	padding: 4px;
	height: 270px;
	overflow-y: auto;
}

@media screen and (min-height: 767px) {
	.setTrData .group {
		height: 500px;
	}
}

.setTrData .group p {
	padding-left: 8px;
}

/* the dialog that displays the TR problem description */
.setTrDialog {
	width: 100%;
	max-width: 600px;
}
#setTrDesc {
	width: 100%;
	height: 350px;
}

.smallUI .set .group button {
	font-size: 14px;
}

@media only screen and (orientation: portrait) {
	.smallUI #backupText {
		width: 250px;
		height: 290px;
		font-size: 10pt;
	}
}
@media only screen and (orientation: landscape) {
	.smallUI #backupText {
		width: 450px;
		height: 170px;
		font-size: 10pt;
	}
	.smallUI #setTrDesc {
		height: 160px;
	}
}


.largeUI .set .rowLabel {
	max-width: 200px;
}

.largeUI .set .s0, .io-set-email {
	max-width: 250px;
}

.largeUI #backupText {
	width: 500px;
	height: 440px;
	font-size: 10pt;
}

/*
 * Style Terms of Use page
 */
.tou .group button, .tou .group input[type="checkbox"] {
	display: block;
	margin: auto;
}

.tou .group {
	font: normal 16px Helvetica, Arial, sans-serif;
	padding: 8px;
}

.tou .group p:first-child {
	margin-top: 0;
}

.tou p:last-child {
	margin-bottom: 0;
}

.tou p {
	text-align: justify;
	margin-bottom: 4px;
}

.tou ul {
	margin-top: 0;
	margin-bottom: 0;
}

.tou dt {
	margin-top: 6px;
}

.tou dd {
	margin-top: 2px;
}

.tou h1 {
	margin-top: 40px;
	font-size: 24px;
}

.tou h1:first-child {
	margin-top: 8px;
}

/*
 * Style Trips page
 */
.noTripText {
	text-align: center;
	padding-top: 40px;
	font-size: 20px;
	font-weight: bold;
	color: darkgrey;
}

/****
 * Style common elements of common aircraft-dependent pages.
 ****/
 
/*
 * Aircraft page, data source
 */
.acDocTable td:first-child {
	padding-right: 6px;
}

/*
 * Style departure procedure
 */
.coldAdj th, .coldAdj td {
	text-align: center;
}

.coldAdj th:first-child, .coldAdj td:first-child {
	text-align: left;
}

/*
 * Style METAR
 */

.metar {
	width: 100%;
}

.metar tr {
	border: none;
}

.metar td:first-child {
	text-align: left;
	width: 100%;
	white-space: normal;
	padding-left: 0;
	padding-right: 4px;
}

.metar td:last-child {
	text-align: center;
	padding: 0;
}

.metar button {
	height: 38px;
	width: 38px;
}

@keyframes spin {
	from {transform: rotate(0deg)}
	to   {transform: rotate(360deg)}
}

.metarSpin {
	animation: spin 1s linear 0s infinite;
}

/*
 * Circuit breaker page
 */
.cbSelRow td:last-child, .cbpDescRow  td:last-child {
	white-space: normal;
	text-align: left;
}

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

/*
 * Style CAS
 */
.casDiv {
	margin: auto;
	overflow: auto;
}

.casWarningButton {
	color: red;
}

.casCautionButton {
	color: yellow;
}

.casCautionButton, .casWarningButton {
	font-style: normal;
	background-color: black;
	text-align: center;
	float:left;
}

/*
 * Style checklists
 */
.largeUI .cl.popupPage {
	right: 46px !important;
	width: auto !important;
}
.largeUI .cl.clLeftButtons {
	right: 0 !important;
	left: 46px !important;
}
.cl .iGroup {
	max-width: 782px;		/* enough to span 10.5" iPad Pro in portrait */
}

/* button panel on left or right. Child of #view */
.clView {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: auto;
	width: 46px;
	padding: 0px;
	background-color: rgb(220,220,225);
}
.clView.clLeftButtons {
	right: auto;
	left: 0px;
}

.clButtons {
	width: 100%;
	height: 100%;
}

.clButtons button {
	position: absolute;
	margin: 0px;
	width: 100%;
}

.clButtons img {
	width: 24px;
	height: 24px;
}

.clSpeakSettings {
	top: 0;
	height: 46px !important;
}
.clSpeakPlay {
	top: 46px;
	height: 92px !important;
	font-size: 40px;
}
.clSpeakPause {
	top: 46px;
	height: 92px !important;
	font-size: 24px;	/* FA pause symbol is much bigger than play symbol */
}
.clNext {
	top: 138px;
	bottom: 46px;
	height: auto !important;
	font-size: 40px;
}
.clSwitchSides {
	bottom: 0;
	height: 46px !important;
	font-size: 28px;
}

.clButtons .clHideBtn {
	visibility: hidden;
}

.cl .group {
	font-weight: normal;
	font-size: 19px;
}

.clStepText, .clWarningText, .clCautionText, .clNoteText, .clStepNote {
	line-height: 24px;
}

.smallUI .cl.popupPage {
	right: 0px;
	left: 0px;
}
.smallUI .cl .iGroup {
	margin-right: 46px;
}
.smallUI .cl.clLeftButtons .iGroup {
	margin-right: 0;
	margin-left: 46px;
}
.smallUI .cl .iGroup .titleButton {
	font-size: 11px;
	min-width: 111px;
}
.smallUI .cl .group {
	font-size: 17px;
}
/* button panel on left or right. Child of #view */
.smallUI .clView {
	top: 54px;
	z-index: 10;
}

.cl .group em {
	font-style: inherit;
	font-weight: bold;
}

.cl .group strong {
	font-style: inherit;
	color: red;
}
.cl .group .output {
	color: black;
}

.clStep {
	width: 100%;
	border-top: 1px solid #B4B4B4;
	line-height: 30px;
	background-color: rgb(245, 245, 245);
}

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

.clStep-sel {
	background-color: LightYellow;
}

.clStep-unsel {
	background-color: white;
}

.clMemory {
	background-color: rgb(255, 228, 228);
}

.clStep > tbody > tr > td {
	padding: 2px;
	margin: 0;
	height: auto;
}
.devWidthLT-M .clStep > tbody > tr > td,
.devWidthLT-M .clStep .input {
	font-size: 13.5px;
	line-height: 19px;
}
/* really small screens */
.devWidthXS .clStep > tbody > tr > td,
.devWidthXS .clStep .input {
	font-size: 11px;
	line-height: 16px;
}

.clStep > tbody > tr {
	border-top: none;
}

.clStep ul {
	margin-top: 0;
	margin-bottom: 0;
}

.clCondStepText + .clStep {
	border-top: none;
}

.clStepNum {
	vertical-align: top;
	text-align: left;
	padding-right: 4px !important;
	height: auto;
	width: 28px;
}
.devWidthLT-M .clStepNum {
	width: 20px;
}
.clStepItem {
	vertical-align: top;
	text-align: left;
	height: auto;
}

.clStepAction, .clStepActionOnly {
	vertical-align: top;
	height: auto;
}

.clStepNote, .clStepActionOnlyNote {
	color: grey;
	vertical-align: top;
	height: auto;
}

.clStepActionOnly, clStepActionOnlyNote {
	text-align: left;
}

.clStepAction, .clStepNote {
	text-align: right;
	padding-right: 9px !important;
}

.clStepNote {
	padding-left: 40px !important;
}
.devWidthLT-M .clStepNote {
	padding-left: 20px !important;
}

.clStepAction li, .clStepNote li {
	text-align: left;
}

.clStepAction table td, clStepActionOnly table td {
	vertical-align: middle;
}

.clStepAmpl, .clStepActionOnlyAmpl {
	color: darkblue;
	text-align: left;
	vertical-align: top;
	padding-right: 9px !important;
}

.clCondRow td {
	font-style: italic;
}

.clSpace0, .clSpace1, .clSpace2, .clSpace3, .clSpace4 {
	width: 1px;
	padding: 0;
	background-color: transparent;	/*  #B4B4B4 */
}

.clSpace1 {
	width: 28px;
	min-width: 28px;
}

.clSpace2 {
	width: 56px;
	min-width: 56px;
}

.clSpace3 {
	width: 84px;
	min-width: 84px;
}

.clSpace4 {
	width: 112px;
	min-width: 112px;
}

.devWidthLT-M .clSpace1 {
	width: 20px;
	min-width: 20px;
}

.devWidthLT-M .clSpace2 {
	width: 40px;
	min-width: 40px;
}

.devWidthLT-M .clSpace3 {
	width: 60px;
	min-width: 60px;
}

.devWidthLT-M .clSpace4 {
	width: 80px;
	min-width: 80px;
}

.clCondText {
	font-style: italic;
}

.clWarning, .clCaution, .clNote {
	text-align: center;
}

.clWarningTitle {
	background-color: rgb(255,120,120);
	padding: 3px;
}

.clCautionTitle {
	background-color: gold;
	padding: 3px;
}

.clWarningText, .clCautionText, .clNoteText {
	text-align: center;
	border: none;
}
.clWarningText ul, .clCautionText ul, .clNoteText ul {
	text-align: left;
}

.clInfoTable, .clInfoTable2C {
	border: 1px solid black;
	text-align: center;
}
.clStepAction .clInfoTable, .clStepAction .clInfoTable2C {
	float: right;
}

.clInfoTable thead,
.clInfoTable2C thead {
	background-color: lightgrey;
}

.clInfoTable thead tr,
.clInfoTable2C thead tr {
	border-bottom: none;
}

.clInfoTable thead tr:last-child td,
.clInfoTable2C thead tr:last-child td {
	border-bottom: 1px solid black;
}

.clInfoTable2C td:first-child {
	border-right: 1px solid black;
}

.clInfoTable2C td:last-child {
	text-align: left;
}

.clBorderTable > thead > tr > td,
.clBorderTable > tbody > tr > td {
	border: 1px solid black;
}

.clTableHead, .clStep thead {
	background-color: lightgrey;
}

.clAlternative, .clAlternative tr {
	border: none;
}

.clAlternative td {
	height: 44px;
}

.clAlternative td:first-child {
	text-align: left;
	padding-right: 6px;
}

.clAlternative td:last-child {
	padding: 4px 4px 4px 8px;		/* leave space to touch */
}

.clEOP {
	font-size: 90%;
	font-style: italic;
}

/* checklist speakDialog */
#clSpeakDialog .clLabel {
	padding-right: 14px;
	padding-left: 0;
}
#clSpeakDialog > tbody > tr {
	height: 48px;
}
#clSpeakDialog .clSpeedRow table td {
	width: 40px;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}
#clSpeakDialog .clSpeakRow table td {
	width: 80px;
	padding-left: 2px;
	padding-right: 2px;
	text-align: center;
}
#clSpeakDialog .clButtonIcon {
	display: inline-block;
	width: 20px;
	text-align: center;
	color: black;
	background-color: #e8e8e8;
	border: 1px solid #808080;
	border-radius: 4px;
	margin: auto;
	padding: 2px;
}

/*
 * G1000 annunciations.
 */
.g1000CASwarning, .g1000CAScaution, .g1000CASadvisory,
.g1000MsgWhite, /* messages */
.g1000CompWhite, .g1000CompYellow, /* comparator */
.g1000Reversionary, /* reversionary */
.g1000HSIcaution,
.g1000AParm, .g1000APmode,
.g1000PFDwarning, .g1000PFDcaution, .g1000PFDmessage,
.CASwarning, .CAScaution {
	font-style: normal;
	white-space: nowrap;
	padding: 1px 2px;
}

.g1000CASwarning {
	background-color: black;
	color: red;
}

.g1000CAScaution, .g1000CompYellow, .g1000Reversionary {
	background-color: black;
	color: yellow;
}

.g1000CASadvisory, .g1000MsgWhite, .g1000CompWhite {
	background-color: black;
	color: white;
}

.garminNxi .g1000CompYellow,
.garminNxi .g1000CompWhite,
.garminNxi .g1000Reversionary {
	border: 1px solid black;
	border-radius: 3px;
}

.garminNxi .g1000CompYellow {
	background-color: yellow;
	color: black;
}

.garminNxi .g1000CompWhite {
	background-color: white;
	color: black;
}

.garminNxi .g1000Reversionary {
	background-color: blue;
	color: yellow;
}

.g1000HSIcaution {
	background-color: brown;
	color: yellow;
}

.g1000AParm {
	background-color: black;
	color: white;
}
.g1000APmode {
	background-color: black;
	color: green;
}

.g1000PFDwarning, .g1000PFDcaution, .g1000PFDmessage {
	padding: 3px;
	border: 1px solid black;
}

.garminNxi .g1000PFDwarning,
.garminNxi .g1000PFDcaution,
.garminNxi .g1000PFDmessage {
	border-radius: 3px;
}

.g1000PFDwarning {
	background-color: red;
	color: white;
}

.g1000PFDcaution {
	background-color: yellow;
	color: black;
}

.g1000PFDmessage {
	background-color: white;
	color: black;
}

.CASwarning, .CAScaution {
	border: 1px solid black;
	color: black;
}

.CASwarning {
	background-color: #FF7070;
}

.CAScaution {
	background-color: gold;
}

/*
 * Icons
 */
.ic {
	display: inline-block;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ic-directTo:before {
  content: "<svg viewBox="0 0 130 100">
	<path d="M 25 4 l 30 0 c 45 0, 45 92, 0 92 l -30 0 l 0 -96" stroke="black" stroke-width="8" fill="none" />
    <path d="M 0 50 L 110 50" stroke="black" stroke-width="4" fill="none" />
    <path d="M 130 50 l -20 -12 l 0 24 l 20 -12"  fill="black" />
</svg>";
}

.label {
	font-weight: bold;
	white-space: nowrap;
}