/*****  GERAL  *****/
body {
    margin: 0;
    padding: 0;
}

.pointer {
	cursor: pointer;
}

.overflow-x-hidden {
	overflow-x: hidden !important;
}

ul {
	list-style:none;
	margin: 0;
	padding: 0;
}

#profile-thumb > img {
	object-fit: contain;
}

#profile-info > span > span {
	font-size: 10px;
	line-height: 14px;
}

/*****  LEFT MENU  *****/
#left-menu {
	background-color: #153538;
    font-family: Roboto;
	color: white !important;
	transition: width 0.5s;
}

#left-menu li:hover {
	background-color: grey;
}

#left-menu a {
	color: white;
}

#left-menu a:hover {
	text-decoration-line: none;
}

#left-menu,
#left-menu-closed #left-menu-list {
	width: 50px;
}

#left-menu.active,
#left-menu-open .fixed-item,
#left-menu-open #left-menu-list {
	width: 200px;
}

.transitioning {
	width: 0px !important;
}

	/*****  CLOSED MENU  *****/
	#left-menu-closed {
		display: flex;
	}

	#left-menu-closed .fixed-btn,
	#left-menu-closed #left-menu-list > li {
		width: 50px;
		height: 50px;
	}
	
	#left-menu-closed #left-menu-list::-webkit-scrollbar {
		display: none;
	}

	#left-menu-closed #left-menu-list > li > a,
	#left-menu-closed #left-menu-list > li > span {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#left-menu-closed #left-menu-list > li > span > i.fa-caret-right {
		position: absolute;
		right: 4px;
		font-size: 12px;
	}
	
	#left-menu-closed #left-menu-list > li.show-more:hover i.fa-caret-right.d-none,
	#left-menu-closed #left-menu-list > li.show-more[aria-describedby] i.fa-caret-right.d-none {
		display: block !important;
	}

		/*****  POPOVER  *****/
		div.popover {
			background-color: #153538;
			box-shadow: 2px 2px 5px 0 black;
			border: none;
		}

		div.popover > .arrow::before,
		div.popover > .arrow::after {
			border-right-color: #153538;
		}

		div.popover > h3 {
			background-color: transparent;
			text-align: center;
			font-family: Roboto;
		}

		div.popover > .popover-body {
			padding: 0;
		}

		div.popover > .popover-body > div {
			padding: 0.5rem 0.75rem;
		}

		div.popover > .popover-body > ul > li {
			padding: 0.1rem 0.75rem;
		}

		div.popover > .popover-body > ul > li:hover {
			background-color: grey;
		}

		div.popover > .popover-body > ul > li:first-child {
			padding-top: 0.5rem;
		}

		div.popover > .popover-body > ul > li:last-child {
			padding-bottom: 0.5rem;
		}

		div.popover > .popover-body,
		div.popover > .popover-body > ul > li > a {
			color: white;
			font-family: Roboto;
		}

		div.popover > .popover-body > ul > li > a:hover {
			text-decoration: unset;
		}

	/*****  OPEN MENU  *****/
	#left-menu-open {
		display: flex;
	}

	#left-menu-open .fixed-item .profile-item {
		width: 50px;
		height: 50px;
	}

	#left-menu-open .fixed-item,
	#left-menu-open #left-menu-list > li {
		height: 50px;
	}

	#left-menu-open .fixed-item > span,
	#left-menu-open #left-menu-list > li > a,
	#left-menu-open #left-menu-list > li > span {
		width: 100%;
		height: 100%;
		padding-left: 10px;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	#left-menu-open #left-menu-list::-webkit-scrollbar {
		display: none;
	}

		/*****  COLLAPSIBLE LIST  *****/
		#left-menu-open #left-menu-list > div {
			background-color: grey;
			border-top: 2px solid grey;
		}

		.collapsible {
			justify-content: space-between !important;
		}

		.collapsible i.fas.fa-caret-down {
			margin-right: 10px;
		}

		i.fas.fa-caret-down {
			transition: 0.5s;
		}

		[data-toggle="collapse"].collapsed i.fas.fa-caret-down {
			transform: rotate(-90deg);
		}

		ul.collapsible-list {
			margin-left: 10px;
			background-color: #153538;
		}

		ul.collapsible-list > li {
			padding: 5px 10px;
			cursor: pointer;
		}