#sidenav {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 550;
}

	#sidenav-background {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		visibility: hidden;
		opacity: 0;
	}

	#sidenav-nav {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 200px;
		background-color: #FFFFFF;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
		-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
		-ms-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
		-o-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
	}

		#sidenav-nav > #sidenav-header {
			position: relative;
			float: left;
			width: 100.0%;
		}

		#sidenav-nav > #sidenav-header > .toolbar {
			border-bottom: 1px solid #EEEEEE;
		}

		#sidenav-nav > nav {
			position: relative;
			float: left;
			width: 100.0%;
			padding: 8px 0;
		}

			#sidenav-nav > nav > ul {
				position: relative;
				float: left;
				width: 100.0%;
				margin: 0;
				padding: 0;
				list-style: none;
			}

				#sidenav-nav > nav > ul > li {
					position: relative;
					float: left;
					width: 100.0%;
					transition: background-color 0.1s linear 0.0s;
					-webkit-transition: background-color 0.1s linear 0.0s;
					-moz-transition: background-color 0.1s linear 0.0s;
				}

				#sidenav-nav > nav > ul > li:hover {
					background-color: #EEEEEE;
				}

					#sidenav-nav > nav > ul > li > a {
						position: relative;
						float: left;
						width: 100.0%;
						height: 48px;
						padding: 0 16px;
						text-decoration: none;
					}

						#sidenav-nav > nav > ul > li > a i {}

						#sidenav-nav > nav > ul > li.active > a i {
							color: #EF5350;
						}

						#sidenav-nav > nav > ul > li > a span {
							font-weight: 500;
							text-decoration: none;
							color: #212121;
						}

						#sidenav-nav > nav > ul > li.active > a span {
							color: #EF5350;
						}

			#sidenav-nav > nav > .sidenav-divider {
				position: relative;
				float: left;
				width: 100.0%;
				height: 1px;
				margin: 8px 0;
				border-bottom: 1px solid #EEEEEE;
			}

@media (max-width: 1024px) {
	#sidenav {
		visibility: hidden;
		right: 0;
		transition-delay: 0.2s;
		-webkit-transition-delay: 0.2s;
		-moz-transition-delay: 0.2s;
	}

	#sidenav.open {
		visibility: visible;
		transition-delay: 0.0s;
		-webkit-transition-delay: 0.0s;
		-moz-transition-delay: 0.0s;
	}

		#sidenav > #sidenav-background {
			transition: opacity 0.2s linear 0.0s, visibility 0.0s linear 0.2s;
			-webkit-transition: opacity 0.2s linear 0.0s, visibility 0.0s linear 0.2s;
			-moz-transition: opacity 0.2s linear 0.0s, visibility 0.0s linear 0.2s;
		}

		#sidenav.open > #sidenav-background {
			visibility: visible;
			opacity: 1;
			transition: opacity 0.2s linear 0.0s, visibility 0.0s linear 0.0s;
			-webkit-transition: opacity 0.2s linear 0.0s, visibility 0.0s linear 0.0s;
			-moz-transition: opacity 0.2s linear 0.0s, visibility 0.0s linear 0.0s;
		}

		#sidenav > #sidenav-nav {
			visibility: hidden;
			left: -240px;
			transition: left 0.2s ease 0.0s, visibility 0.0s linear 0.2s;
			-webkit-transition: left 0.2s ease 0.0s, visibility 0.0s linear 0.2s;
			-moz-transition: left 0.2s ease 0.0s, visibility 0.0s linear 0.2s;
		}

		#sidenav.open > #sidenav-nav {
			visibility: visible;
			left: 0;
			transition: left 0.2s ease 0.0s, visibility 0.0s linear 0.0s;
			-webkit-transition: left 0.2s ease 0.0s, visibility 0.0s linear 0.0s;
			-moz-transition: left 0.2s ease 0.0s, visibility 0.0s linear 0.0s;
		}
}