* {
	margin: 0px; /* nogle browsere har automatisk forkerte marginer, så det er nødvendigt*/
}

body {
	font-family: Arial, sans-serif;
	background-color: white;
}

@media only screen and (max-width: 1279px) {
	header {
		display: none;
	}
}

@media only screen and (min-width: 01px) {  /*ændrer alle dem her til 1280px for at få forskelligt view fra smartphone og pc*/
	header {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		height: 150px;
		width: 100%;
		text-align: center;
		background-image: url("headerImage.JPG");
		background-size: 100%;
		overflow: hidden;
	}
}

h1 {
	font-size: 40px;
	color: #EEF0EB;
	background-color: #153243;
	vertical-align: middle;
}

@media only screen and (min-width: 01px) {
	h1 {
		width: 180px;
		padding: 7px 0 7px 0;
		border-radius: 10px 10px 10px 10px;
	}
}

a {
	color: inherit;
	text-decoration: none;
}

@media only screen and (min-width: 1280px) {
	a {
		width: max-content;
	}
}



nav {
	text-align: center;
}

li {
	display: flex;
	justify-content: center;
	align-items: center;
}

#menubar {
		display: flex;
		flex-wrap: nowrap;
		list-style-type: none;
		align-items: center;
}

@media only screen and (max-width: 1279px) {
	#menubar {
		background: #153243;
		height: 100px;
	}
}

@media only screen and (min-width: 01px) {
	#menubar {
		padding: 8px;
			background: #153243;
	}
}

#logoPhone {
	height: 100%;
}

@media only screen and (min-width: 01px) {
	#logoPhone {
		display: none;
	}
}


@media only screen and (min-width: 01px) {
	#logo {
		width: 80px;
		margin: 20px;
	}
}


/*
@media only screen and (min-width: 01px) { /* kan måske matches med header hvis den er en flexbox
	#header {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 400px;
		background-image: none;
	}
} */


#main {
	margin: auto;
	width: 95%;
	max-width: 1800px;
}

@media only screen and (min-width: 1280px) {
	#main {
		width: 70%;
	}
}

#phoneTitle {
	font-weight: bold;
	font-size: 50px;
}

.menubarItem {
	color: #EEF0EB;
	width: 100px;
	text-align: center;
	height: 70px;
	flex: 16%;
	font-weight: bold;
	border-radius: ;
	margin: 0px 10px;
	font-size: 20px;
}

@media only screen and (min-width: 01px) {
	.menubarItem {
	width: max-content;
	height: 100%;
	margin-left: 15px;
	margin-right: 15px;
	}
}

.menubarItem:hover {
	color: #B4B8AB;
}

.opdateret {
	background-color: #284B63;
	border-radius: 3px;
	pointer-events: none;
	font-size: 16px;
	padding: 3px;
}

.onlyPhone {
	width: max-content;
}

@media only screen and (min-width: 01px) {
	.onlyPhone {
		display: none;	
	}
}

@media only screen and (max-width: 1279px) {
	.emptyCell.onlyPhone {
		display: block;
		width: auto;
	}
}

.space {
	visibility: hidden;
}

.dataRow {
	max-height: 39px; /*for at få tomme felter til at passe i højde. Den sidste px er border*/
	margin: 0 4px;
	padding: 0 8px;
	border-bottom: 1px solid #B4B8AB;
	display: flex;
	justify-content: space-between;
	background-color: #edeff0;
}

.bottomDataRow {
	border-radius: 0px 0px 5px 5px;
}

@media only screen and (min-width: 1280px) {
	.secondBottomDataRow {
		border-radius: 0px 0px 5px 5px;
	}
}

.monthlyYear {
	margin: 10px 0;
	font-weight: bold;
	text-decoration: underline;
}

.tableUnit {
	text-align: left;
	margin: 10px 0;
	font-weight: bold;
}

.tableNumber {
	text-align: right;
	margin: 10px 0;
}

.tableGIF {
	margin: 20px 0;
}

.flexContainer {
	display: flex;
	flex-wrap: wrap;
}

.tableHead {
	margin: 0 4px;
	background-color: #284B63;
	color: #EEF0EB;
	padding: 6px 2px;
	border-radius: 5px 5px 0px 0px;
	border-color: #DDE7EC;
	font-weight: bold;
}

/* der er to table classes, så den kan skelne mellem dem der skal være 33% og 25%, mens de er i samme kolonne*/
.table {
	flex: 50%;
	text-align: center;
}

@media only screen and (min-width: 01px) {
	.table {
		flex: 33%;
	}
}

.table25 {
	flex: 50%;
	text-align: center;
}

@media only screen and (min-width: 01px) {
	.table25 {
		flex: 25%;
	}
}

.table33 {
	flex: 100%;
	text-align: center;
}
@media only screen and (min-width: 01px) {
	.table33 {
		flex: 33%;
	}
}


.emptyCell {
	height: 40px;
	background-color: #edeff0;
	margin: 0 4px;
}