/* The sidepanel menu */
.sidepanel {
	height: auto; /* Specify a height */
	width: 0; /* 0 width - change this with JavaScript */
	position: fixed; /* Stay in place */
	z-index: 10; /* Stay on top */
	top: 0;
	left: 0;
	background-color: #777; /* Black*/
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 60px; /* Place content 60px from the top */
	padding-bottom: 0; /* Padding bottom 14px from the bottom */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
	}
	
	/* The sidepanel links */
	.sidepanel a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 24px;
	color: #ffffff;
	display: block;
	transition: 0.3s;
	text-align: center;
	border-top: 1px solid;
	}
	
	/* When you mouse over the navigation links, change their color */
	.sidepanel a:hover {
	color: #f1f1f1;
	}
	
	/* Position and style the close button (top right corner) */
	.sidepanel .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
	}
	
	/* Style the button that is used to open the sidepanel */
	.openbtn {
		font-size: 35px;
		cursor: pointer;
		background-color: #777;
		/* background-color: #111; */
		color: white;
		/* padding: 10px 15px; */
		border: none;
	}
	
	.openbtn:hover {
	background-color: #444;
	}
	
	
	/* ====== CSS FOR COLLPSE MENU MOBILE  =========*/
	.collapsible {
	background-color: #777;
	color: white;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	}
	
	.active, .collapsible:hover {
	background-color: #555;
	}
	
	.content-mobile {
	padding: 0 1px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	background-color: transparent;
	}

	@media (max-width: 991.98px) {
		.large-menu {
			display: none !important;
		}
		#mySidepanel {
			display: block !important;
		}
	}
	

	/*CSS FOR LIST MOBILE ITEMS */
	.list-item-mobile {
		background-color: #999 !important;

	}
	.list-group a:hover {
		background-color: rgb(255, 144, 0) !important;
	
	}