$color_1: rgba(255,255,255,0.25);
$color_2: rgba(255,255,255,0.3);
$color_3: rgba(255,255,255,0.5);
$color_4: #ffffff;

.sidebar {
	background: #333333;
	width: 70px;
	height: 100vh;
	position: fixed;
	padding-top: 47px;

	span {
		color: $color_1;
		padding: 20px 20px 10px 20px;
		display: block;
	}

	h3 {
		color: $color_2;
		font-size: 12px;
		padding-bottom: 5px;
	}

	ul {
		padding: 0;
		margin: 0;

		li {
			color: $color_3;
			list-style-type: none;
			font-weight: 300;
			cursor: pointer;
			font-size: 12px;
			padding: 20px 0px;
			text-align: center;

			i {
				margin-right: 5px;
				color: $color_3;
				width: 15px;
				font-size: 15px;
			}
		}

		.active {
			li {
				background: rgba(0,0,0,0.3);
				color: $color_4;
				background: rgba(0,0,0,0.3) !important;

				i {
					color: $color_4;
				}
			}
		}

		a {
			text-decoration: none;
		}
	}
    
	button {
		background: none;
		border: none;
	}

	.bottom-menu {
		position: absolute;
		bottom: 0;
		width: 100%;
		border-top: solid 1px rgba(255,255,255,0.2);
	}
}