﻿/* The sidepanel menu */
.sidepanel {
	height: calc(100% - 110px); /* Specify a height */
	width: 0; /* 0 width - change this with JavaScript */
	position: fixed; /* Stay in place */
	z-index: 101; /* Stay on top */
	top: 110px;
	left: 0;
	background-color: var(--rcp-dark-grey); /* Black*/
	overflow-x: hidden; /* Disable horizontal scroll */
	/*padding-top: 60px;*/ /* Place content 60px from the top */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
	border-top-right-radius:10px;
}

	/* The sidepanel links */
	.sidepanel a {
		padding: 4px 8px 4px 8px;
		text-decoration: none;
		color: var(--rcp-light-grey);
		display: block;
		transition: 0.3s;
	}

		/* When you mouse over the navigation links, change their color */
		.sidepanel a:hover {
			color: #fff;
		}

	/* Position and style the close button (top right corner) */
	.sidepanel .closebtn {
		/*position: absolute;*/
		top: 0;
		/*right: 25px;*/
		font-size: 36px;
		/*margin-left: 50px;*/
		color: #fff;
	}

/* Style the button that is used to open the sidepanel */
.openbtn {
	/*font-size: 20px;
	cursor: pointer;
	background-color: var(--rcp-dark-grey);
	color: white;
	padding: 10px 15px;
	border: none;*/
}

	.openbtn:hover {
		/*background-color: #444;*/
	}



.sidebar-wrapper .sidebar-menu {
	padding-bottom: 10px;
}

	.sidebar-wrapper .sidebar-menu ul li {
		margin-left: 12px;
	}

.sidebar-wrapper .sidebar-menu .header-menu span {
	font-weight: bold;
	padding: 8px 0 8px 5px;
	display: inline-block;
	color: #fff;
}

	.sidebar-wrapper .sidebar-menu ul li a {
		display: inline-block;
		width: 100%;
		text-decoration: none;
		position: relative;
		padding: 8px 0 8px 5px;
	}

		.sidebar-wrapper .sidebar-menu ul li a:hover {
			background-color: var(--rcp-light-grey);
			color: var(--rcp-dark-grey);
		}

		.sidebar-wrapper .sidebar-menu ul li a i {
			margin-right: 10px;
			width: 30px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border-radius: 4px;
		}

		.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
			display: inline-block;
			animation: swing ease-in-out 0.5s 1 alternate;
		}

	.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		content: "\f105";
		font-style: normal;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		background: 0 0;
		position: absolute;
		right: 15px;
		top: 14px;
	}

	.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
		padding: 5px 0;
		
	}

	.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
		padding-left: 25px;
		color: #fff;
	}

		.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
			content: "\f111";
			font-family: "Font Awesome 5 Free";
			font-weight: 400;
			font-style: normal;
			display: inline-block;
			text-align: center;
			text-decoration: none;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			margin-right: 10px;
			font-size: 8px;
		}

	.sidebar-wrapper .sidebar-menu ul li a span.label,
	.sidebar-wrapper .sidebar-menu ul li a span.badge {
		float: right;
		margin-top: 8px;
		margin-left: 5px;
	}

	.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
	.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
		float: right;
		margin-top: 0px;
	}

	.sidebar-wrapper .sidebar-menu .sidebar-submenu {
		display: none;
	}

	.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
		transform: rotate(90deg);
		right: 17px;
	}