* {
	box-sizing: border-box;
}

html, body, .container{
	width:100%;
}

small{
	font-size:smaller;
	line-height:1.25;
	display:block;
}

body{
	font-family:Arial, sans-serif;
	background-color:#f4f4f4;
	margin:0;
	padding:0;
	min-height:100vh;
	font-size:100%;
	padding:20px;
}

.container{
	display:flex;
	flex-direction:column;
	row-gap:10px;
}

#routeForm > input{
	max-width:min(30%, 190px);
}

.container > div{
	margin:20px auto;
	padding:20px;
	background-color:#fff;
	box-shadow:0 0 10px rgba(0, 0, 0, 0.1);
	border-radius:8px;
}

p{
	font-size:.7em;
}

h1, h2{
	color:#333;
	text-align:center;
}

h1{
	font-size:2em;
}

h2{
	font-size:1.25em !important;
	margin-bottom:20px;
	margin-top:0;
}

h3{
	font-size:.7em;
}

label,
.dinTurResultater span:nth-child(8n + 8),
.dinTurResultater span:nth-last-child(2){
	margin-bottom:10px;
	font-weight:bold;
	color:#555;
}

.takststrukturKnapper{
	max-width:500px;
	margin:20px 0;
	display:flex;
	column-gap:10px;
}

.takststruktur label{
	display:block;
}

.takststruktur table{
	margin-bottom:20px;
}

input[type="text"], input[type="number"]{
	padding:10px;
	margin-bottom:20px;
	border:1px solid #ccc;
	border-radius:4px;
	font-size:1.2em;
}

button.knap{
	padding:10px;
	background-color:#B1B35B;
	color:white;
	border:none;
	border-radius:4px;
	cursor:pointer;
}

button.knap:hover{
	background-color:#4cae4c;
}

.dinTurResultater input{
	width:75px;
	padding:2px;
}

.result{
	margin-top:20px;
	padding:20px;
	background-color:#e9ecef;
	border-radius:4px;
	font-size:1.2em;
	color:#333;
	text-align:center;
}

#map{
	min-height:400px;
	max-height:1000px;
	width:100%;
	flex-grow:1;
}

div.calculated{
	border:4px solid #c4c4c4;
	border-radius:20px;
	padding:25px;
	width:fit-content;
	margin:25px auto;
}

div.calculated h3{
	margin-top:0;
}

.dinTurResultater span:nth-child(8n + 8),
.dinTurResultater span:nth-last-child(2){
	margin-left:5px;
}

@media (min-width:1300px){
	input[type="text"], input[type="number"]{
		font-size:.9em;
	}

	h3{
		font-size:1.15em;
	}
	
	p, label{
		font-size:.9em;
	}
	
	.container{
		column-gap:40px;
		flex-direction:row;
	}
	
	.container > div.takststruktur{
		flex-basis:450px;
		flex-shrink:0;
		flex-grow:1;
	}
	
	.container > div.dinTur{
		flex-basis:450px;
		flex-shrink:1;
		flex-grow:1;
	}
	
	.container > div.dinTurResultater{
		flex-basis:450px;
		flex-shrink:0;
		flex-grow:1;
	}
	
	h1{
		margin-bottom:10px;
	}
	
	button.knap{
		min-width:130px;
		font-size:1em;
	}

	.takststrukturKnapper button.knap{
		display:block;
		padding:8px;
		font-size:1em;
		width:200px;
	}

	.dinTurResultater label:nth-child(8n + 2){
		display:block;
		margin-top:10px;
	}

	.dinTurResultater input:nth-child(8n + 3),
	.dinTurResultater input:nth-child(8n + 7){
		width:65px;
	}

	.dinTurResultater label:nth-child(8n + 4){
		width:50px;
		display:inline-block;
		text-align:center;
	}

	.dinTurResultater input:nth-child(8n + 5){
		width:45px;
	}

	.dinTurResultater input:nth-last-child(3){
		width:65px;
	}
	
	.dinTurResultater label:nth-last-child(4){
		margin-left:35px;
		text-align:left;
	}
}

@media (max-width:1300px){
	h1{
		font-size:3.5em;
	}
	
	.container > div{
		width:100%;
		padding:40px;
	}
	
	div.calculated{
		width:100%;
	}
	
	small{
		font-size:.5em;
		line-height:1;
	}
	
	button.knap{
		font-size:1.5em;
	}
	
	#routeForm > input{
		max-width:30%;
	}

	.dinTurResultater label:nth-child(8n + 2){
		width:250px;
		display:inline-block;
	}
	
	.dinTur input[type="text"],
	.dinTur input[type="number"],
	.takststruktur input[type="text"],
	.takststruktur input[type="number"]{
		font-size:1.7em;
	}
	
	output{
		font-size:1.5em;
	}

	.dinTurResultater label{
		font-size:1.5em;
	}
	
	.takststrukturKnapper{
		max-width:80%;
	}

	.dinTurResultater label:nth-child(8n + 4){
		width:60px;
		display:inline-block;
		text-align:left;
		margin-left:10px;
	}
	
	.dinTurResultater label:nth-last-child(4){
		margin-left:60px;
		text-align:left;
	}
}