@radius-size: 16px;
@padding-size: 16px;

* { margin: 0; padding: 0; }

body {
	font-family: 'Ubuntu', sans-serif;
	font-size: 1.2em;
}

.main {
	background-color:lightgray;
	margin-left: 160px;
}

.nav {
	background-color: white;
	padding: @padding-size;
}

.dashboard {
	padding: 24px + 24px;
}

.card {
	background-color: white;
	padding: @padding-size;
	border-radius: @radius-size;
}

.row {
	display: flex;
	flex-direction: row;
}

.col {
	flex-grow: 1;
	margin: 24px;
}

.sidebar {
	height: 100%;
	width: 160px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: var(--primary-color-lightblue);
	overflow-x: hidden;
	padding-top: 48px + 8px;
}

.sidebar-links {
	// padding: 8px;
	padding-left: 24px;
	display: flex;
	flex-direction: column;

	a {
		color: white;
		text-decoration: none;
		padding: @padding-size;
	}
}

.sidebar-links a.active {
	background-color: white;
	border-top-left-radius: @radius-size;
	border-bottom-left-radius: @radius-size;
	color: black;
}