body {
  background-color: whitesmoke;
  font-family: Calibri,'PT Sans',sans-serif;
}

h1 {
	font-size: large 
}

h2 {
	font-size: medium
}

::placeholder { color: lightgrey; }

.waypoint { font-size: small; }

#LeafletMap {
  height:380px
}

.box {
	padding-left: 5px;
}

.box_input {  }
#box_result { 
    background: white;
    overflow: auto;
}
.box_sid { background: rgb(189, 215, 238); }
.box_route { background: rgb(157, 195, 230); }
.box_star { background: rgb(189, 215, 238); }

.airport_header { 
    background: #fcf703;
    min-height: 26px;
}

.icao { 
    background: #171717;
    color: #fcf703;
    font-weight: bold;
    float: left;
    padding: 3px 0px 0px 5px;
    min-height: 24px;
    width: 50px;
}

.airport_name {
    float: left;
    padding: 3px 0px 0px 5px;
}
.airport_flag {
    float: right;
    max-height: 26px;
}

.airport_content {
    background: #616161;
    color: white;
}

.airport_content_table {
    background: #616161;
    float: left;
    width: 100%;
}

/* Small displays 1 col x 5 rows */
.grid_container {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto auto auto auto auto auto auto auto;
	grid-gap: 10px;
	padding: 20px;
	justify-content: space-evenly;
}

#grid_input_1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

#grid_input_2 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
}

#grid_search_result_1 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
}

#grid_search_result_2 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 5;
	grid-row-end: 6;
}

#grid_departure {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 3;
	grid-row-end: 4;
    background: #616161;
	border-style: solid;
	border-width: 1px;
}

#grid_arrival {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 6;
	grid-row-end: 7;
    background: #616161;
	border-style: solid;
	border-width: 1px;
}

#grid_route {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 7;
	grid-row-end: 8;
}

.grid_map {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 8;
	grid-row-end: 9;
}

@media only screen and (min-width: 600px) {
/* Medium displays 2 x 4 */
	.grid_container {
		grid-template-columns: 50% 50%;
		grid-template-rows: auto auto auto auto auto;
		grid-gap: 10px;
		padding: 20px;
		justify-content: space-evenly;
	}

    #grid_input_1 {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 2;
	}

    #grid_input_2 {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
	}

	#grid_search_result_1 {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
	}

	#grid_search_result_2 {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
	}

	#grid_departure {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 3;
		grid-row-end: 4;
	}

	#grid_arrival {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 3;
		grid-row-end: 4;
	}

    #grid_route {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 4;
		grid-row-end: 5;
	}
    
	.grid_map {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 5;
		grid-row-end: 6;
	}
}

@media only screen and (min-width: 1300px) {
/* Large displays 3 col x 3 row */

	.grid_container {
		grid-template-columns: 30% 30% 40%;
		grid-template-rows: auto auto auto auto;
		grid-gap: 10px;
		padding: 20px;
		justify-content: space-evenly;
	}

    #grid_input_departure {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 2;
	}

    #grid_input_arrival {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
	}

	#grid_search_result_1 {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
	}

	#grid_search_result_2 {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
	}

    #grid_departure {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 3;
		grid-row-end: 4;
	}

	#grid_arrival {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 3;
		grid-row-end: 4;
	}
	
	#grid_route {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 4;
		grid-row-end: 5;
	}

	.grid_map {
		grid-column-start: 3;
		grid-column-end: 4;
		grid-row-start: 3;
		grid-row-end: 5;
	}
}