body{
	font-family: calibri;
}

a{
	color: #336699;
}

form{
	position: relative;
	margin: 0;
	padding: 0;
	height: 21cm;
	width: 29.7cm;
	background-size: contain;
	background-repeat: no-repeat;
}

form#page1{
	background-image: url("graphics/NavLog_LocalTemplate.gif");
}

form#page2{
	background-image: url("graphics/NavLog_LocalTemplate_ext.gif");
}

form input,
form div,
form textarea{
	position: absolute;
	background: none;
	border: none;
	border-radius: 5px;
}

/* LEFT SIDE */

.row_session {
    top: 65px;
}
.row_session input{
	height: 15px;
	font-size: 8px;
	text-align: center;
}

.waypoints input{
	left: 19px;
    width: 79px;
    height: 24px;
	text-align: center;
	font-size: 10px;
}

.alt, .mh{
	position: relative;
	top: 16px;
	text-align: center;
}
.alt input{
	left: 114px;
    width: 36px;
    height: 24px;
	text-align: center;
}

.alt span{
	position: absolute;
	left: 105px;
	height: 24px;
	width: 9px;
	font-size: 9px;
}

.arrow_up::before{
	content: "↑";
}

.arrow_down::before{
	content: "↓";
}

.mh input{
	left: 285px;
    width: 38px;
    height: 24px;
	text-align: center;
}


.small{
	width: 38px;
    height: 12px;
	text-align: center;
	font-size: 8px;
}

.nav input{
	left: 157px;
}

.wind input{
	left: 200px;
}

.course input{
	left: 243px;
}

.dist input{
	left: 329px;
}

.spd input{
	left: 371px;
}

.eet input{
	left: 414px;
}

textarea[name^="notes_"]{
	position: absolute;
	font-size: 6px;
	font-family: 'B612 Mono', monospace;
	resize: none;
	overflow: hidden;
}

.footer input{
	font-size: 9px;
}


/* RIGHT SIDE*/

	/* FUELPLANNING */
	.fuelplanning div{
		position: relative;
	}

	.fuelplanning input{
		height: 13px;
		font-size: 10px;
		text-align: center;
		font-size: 8px;
	}

	.fuel{
		left: 47px;
		width: 38px;
	}

	.time{
		left: 91px;
		width: 31px;
	}

	.ff{
		left: 128px;
		width: 29px;
	}


	/* W&B */
	.mb{
		top: 89px;
	    left: 857px;
	}

	.mb div{
		position: relative;
	}

	.mb input{
		height: 11px;
		text-align: center;
		font-size: 8px;
	}

	.mass{
		width: 52px;
	}

	.arm{
		left: 59px;
	    width: 70px;
	}

	.moment{
		left: 134px;
	    width: 111px;
	}


	/* Grafik */
	#diagram{
		width: 454px;
		height: 182px;
		left: 638px;
		top: 275px;
	}

	#diagram span{
		display: inline-block;
		width: 6px;
		height: 6px;
		position: absolute;
		opacity: 0;
		outline: none;
		bottom: 3px;
		right: 3px;
	}

	#ZFM:after{
		content: "\d7";
	    position: relative;
		color: #6E548E;
		bottom: 8px;
		right: 5px;
		z-index: 4;
	}

	#TOM{
		background: #DA823A;
		border-radius: 50%;
		z-index: 3;
	}

	#LDM{
		background: #A94541;
		/*transform: translate(0, -3px);*/
		z-index: 2;
	}

	#line{
		background: rgba(5,5,5,0.2);
		width: 100px; height: 1px;
		opacity: 0;
		/* transform: translate(0, 20px); */
		z-index: 1;
	}

	/* PERFORMANCE */

	.performance{
		top: 509px;
		left: 650px;
	}

	.performance .run_left{
		left: 146px;
		width: 54px;
		height: 12px;
	}
	.performance .run_right{
		left: 132px;
		width: 54px;
		height: 12px;
	}

	.performance input{
		text-align: center;
		font-size: 10px;
	}

	.performance input[name$="_TORA"],
	.performance input[name="takeOF_name"],
	.performance input[name="landing_name"],
	.performance input[name="alternate_name"]{
		font-size: 14px;
	}

	.performance input[name$="_rwy_note"]{
		font-size: 9px;
		text-transform: lowercase;
		height: 10px;
		top: 19px;
		width: 39px;
	}

	.perf_notes{
		font-size: 9px;
		width: 220px;
	}

	.perf_notes label{
		position: absolute;
	}

	.perf_notes input{
		display: inline-block;
		width: 25px;
		font-size: 9px;
		text-align: left;
	}

/* PAGE 2*/

#page2 .waypoints{
	top: -128px;
}

#page2 .alt{
	top: -113px;
}

#page2 .nav{
	top: -129px;
    left: -2px;
}

#page2 .wind{
	top: -129px;
    left: -4px;
}

#page2 .course{
	top: -129px;
    left: -5px;
}

#page2 .mh{
	top: -112px;
    left: -5px;
}

#page2 .dist{
	top: -130px;
    left: -7px;
}

#page2 .spd{
	top: -130px;
    left: -7px;
}

#page2 .eet{
	top: -130px;
    left: -9px;
}

/* OVERLAY */

#overlay{
	display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
	background-image: url('graphics/BG.jpg');
	background-repeat: repeat;
	background-size: cover;
	font-size: 13px;
}

#overlay h1,h2{
	font-family: 'Tilt Neon', sans-serif;
	width: 100%;
	text-align: center;
	padding: 10px;
}

h1{
	text-shadow: 1px 1px rgba(255,255,255,0.5);
	box-shadow: 1px 1px 7px grey;
	backdrop-filter: blur(5px);
}


.content{
	display: flex;
}

.cols {
	background: rgba(255,255,255,0.4);
	min-height: 500px;
	flex: 1 1 0;
    padding: 10px;
    margin: 20px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
	font-family: 'Dosis', sans-serif;
	text-shadow: 1px 1px rgba(255,255,255,0.5);
	box-shadow: 1px 1px 7px grey;
}

.cols li {
    margin-bottom: 7px;
	list-style-type: '🛩️';
    padding-left: 10px;
}

/* PRINT */

@media print{
	body{
		margin: 0;
		padding: 0;
	}

	.menu, .no_print{
		display: none;
	}

	input[type="date"]::-webkit-inner-spin-button,
	input[type="date"]::-webkit-calendar-picker-indicator {
		display: none;
		-webkit-appearance: none;
	}

	form input,
	form div,
	form textarea{
		outline: none;
	}
}