/* =====================================================
   Navbar / Sidebar
   ===================================================== */
* {
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
}

/* Grundlayout */
.app {
	display: flex;
	height: 100vh;
}

/* Sidebar */
.sidebar {
	width: 240px;
	background: #1e293b;
	color: #fff;
	display: flex;
	flex-direction: column;
	padding: 20px 15px;
}

.sidebar h2 {
	margin: 0 0 30px 0;
	font-size: 20px;
}

/* Navigation */
.menu .nav-link {
	display: block;
	color: #cbd5e1;
	padding: 12px 10px;
	border-radius: 6px;
	font-size: 14px;
	text-decoration: none;
}

.menu .nav-link:hover, .menu .nav-link.active {
	background: #334155;
	color: #fff;
}

/* Content */
.content {
	flex: 1;
	padding: 25px;
	overflow-y: auto;
	color: #fff;
}

/* =====================================================
   Responsive
   ===================================================== */
@media ( max-width : 768px) {
	.app {
		flex-direction: column;
		height: auto;
	}
	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 60px;
		padding: 10px;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		z-index: 100;
	}
	.sidebar h2 {
		display: none;
	}
	.menu {
		display: flex;
		width: 100%;
		justify-content: space-around;
	}
	.menu .nav-link {
		flex: 1;
		text-align: center;
		padding: 10px 0;
	}
	.content {
		padding: 15px;
		padding-top: 60px;
	}
}