/* Page view */
.content {
	background-color: white;
	width: 100%;
	margin-top: 20.7675vw;
	margin-bottom: 32.8375vw;
}

/* Nav bar */
.nav-bar {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 99;
}

.nav-bar-content {
	width: 100%;
	text-align: center;
}

.nav-bar-content ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline-block;
}

.nav-bar-content li {
	margin: 0;
	padding-top: 11.5375vw;
	font-size: 3.55vw;
	display: inline-block;
	height: 18.815vw;
	border-top: gray solid 1px;
	background-position: top;
	background-size: 12.425vw;
	background-repeat: no-repeat;
}

/* Header */
.header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99;
}

.header-content {
	background-color: green;
	width: 100%;
}

.header-content #list-name {
	position: fixed;
	top: 15vw;
	font-size: 4vw;
	width: 100%;
	margin-left: -50vw;
}

.header-content .go-back-btn {
	padding-left: 4.4375vw;
	font-size: 5.325vw;
	position: fixed;
	top: 6.2125vw;
	margin-left: 4.4375vw;
	color: white;
	text-decoration: none;
	background-image: url('../../images/icons/back-arrow.png');
	background-position: left;
	background-repeat: no-repeat;
	background-size: 5.325vw;
}

.header-content .uib-dropdown-menu {
	margin: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	width: 100vw;
	text-align: center;
}

.header-content img#userPic {
	position: fixed;
	top: 0;
	width: 15.975vw;
	height: 15.975vw;
	margin-left: 1.775vw;
	margin-top: 1.775vw;
	cursor: pointer;
}

.header-content img#down-arrow {
	position: fixed;
	top: 8vw;
	left: 70vw;
	width: 8vw;
}

.header-content h3 {
	color: white;
	font-size: 7.1vw;
	text-align: center;
	margin: 0;
	padding: 6.2125vw;
	font-weight: bold;
}

/* Date picker */
.input-bg {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 33.725vw;
	background-color: white;
	border-top: gray solid 1px;
	transition: 0.3s;
	z-index: 97;
}

.input-bg ul {
	padding: 0;
	list-style-type: none;
	margin-top: 16.5075vw;
}

.input-bg li {
	margin: 0;
	font-size: 3.55vw;
	display: inline-block;
	width: 15.5%;
	text-align: center;
	border-left: gray solid 1px;
}

.input-bg li:first-child {
	border: none;
}

#delete-list-btn {
	max-width: 25px;
}

@media only screen and (min-aspect-ratio: 14/10) {
	/* Page view */
	.content {
		background-color: white;
		width: 100%;
		margin-top: 11.7vh;
		margin-bottom: 18.5vh;
	}

	/* Nav bar */
	.nav-bar {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 99;
	}

	.nav-bar-content {
		width: 100%;
		text-align: center;
	}

	.nav-bar-content ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		display: inline-block;
	}

	.nav-bar-content li {
		margin: 0;
		padding-top: 6.5vh;
		font-size: 2vh;
		display: inline-block;
		height: 10.6vh;
		border-top: gray solid 1px;
		background-position: top;
		background-size: 7vh;
		background-repeat: no-repeat;
	}

	/* Header */
	.header {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99;
	}

	.header-content {
		background-color: green;
		width: 100%;
	}

	.header-content #list-name {
		position: fixed;
		top: 8.45vh;
		font-size: 2.25vh;
		width: 100%;
		margin-left: -50vw;
	}

	.header-content .go-back-btn {
		padding-left: 2.5vh;
		font-size: 3vh;
		position: fixed;
		top: 3.5vh;
		margin-left: 2.5vh;
		color: white;
		text-decoration: none;
		display: inline-block;
		background-image: url('../../images/icons/back-arrow.png');
		background-position: left;
		background-repeat: no-repeat;
		background-size: 3vh;
	}

	.header-content img#userPic {
		position: fixed;
		top: 0;
		width: 9vh;
		height: 9vh;
		margin-left: 1vh;
		margin-top: 1vh;
		cursor: pointer;
	}

	.header-content img#down-arrow {
		position: fixed;
		top: 4.5vh;
		left: 56vw;
		width: 4.5vh;
	}

	.header-content h3 {
		color: white;
		font-size: 4vh;
		text-align: center;
		margin: 0;
		padding: 3.5vh;
		font-weight: bold;
	}

	/* Input area background */
	.input-bg {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 19vh;
		background-color: white;
		border-top: gray solid 1px;
		transition: 0.3s;
		z-index: 97;
	}

	.input-bg ul {
		padding: 0;
		list-style-type: none;
		margin-top: 9.3vh;
	}

	.input-bg li {
		font-size: 2vh;
		display: inline-block;
		width: 15.5%;
		text-align: center;
		border-left: gray solid 1px;
	}

	.input-bg li:first-child {
		border: none;
	}

}
