/* -------------------------- */
/* --- Top navigation bar --- */
/* -------------------------- */
#top-navbar{
	background: #f0f0f0;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	height: 60px;
	left: 0;
	position: fixed;
	text-align: right;
	top: 0;
	width: 100%;
	z-index: 1000;
}

#top-logo-title{
	color: #28343f;
	display: block;
	float: left;
	font-size: 150%;
	height: 100%;
	line-height: 60px;
}

/* -------------------------- */
/* --- Top Navigation bar --- */
/* -------------------------- */
#top-userpanel{
	float: right;
	height: 100%;
	position: relative;
	right: 0;
	width: auto;
}

#top-username{
	color: #28343f;
	cursor: pointer;
	display: flex;
	height: 100%;
	padding: 0px 20px;
	transition: all 250ms ease-in-out;
    align-items: center;
}
#top-username:hover{
	background: #e0e0e0;
}
#top-username.active{
	background: #d0d0d0;
}
.top-profile-arrow {
    background-position-x: 0%;
    background-position-y: 0%;
    background-position: right 0;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%224%22%20viewBox%3D%220%200%208%204%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M.8.7L4%203.3%207.2.7%22%2F%3E%3C%2Fsvg%3E") no-repeat;
    height: 4px;
    margin: 1px 0px 0px 10px;
    opacity: 0.45;
    width: 8px;
}
.top-profile-menu{
	background: #f0f0f0;
	border-radius: 5px;
	border: 1px solid #d0d0d0;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 10px;
	top: 67px;
	transition: all 250ms ease-in-out;
	width: 160px;
}

.top-profile-menu:before{
    border-color: #d0d0d0 transparent;   
    border-style: solid;
    border-width: 0 8px 8px 8px;
    bottom: 100%;
    content: "";
    height: 0;
    position: absolute;
    right: 13px;
    width: 0;
}
.top-profile-menu:after{
    border-color: #f0f0f0 transparent;   
    border-style: solid;
    border-width: 0 6px 6px 6px;
    bottom: 100%;
    content: "";
    height: 0;
    position: absolute;
    right: 15px;
    width: 0;
}

#top-username.active ~ .top-profile-menu {
    opacity: 1;
    pointer-events: auto;
}

.top-profile-menu ul{
	margin: 5px 0px 5px 0px;
	padding: 0;
}
.top-profile-menu li{
	color: #28343f;
	display: block;
	font-size: 80%;
	line-height: 25px;
	list-style: none;
	margin-left: 0;
	margin: 0px;
	padding: 5px 10px;
	position: relative;
	text-align: left;
	text-shadow: none;
	transition: all 250ms ease-in-out;
}

.top-profile-menu li:hover{
	background: #e0e0e0;
	cursor: pointer;
}
/* --------------------------- */
/* --- Left navigation bar --- */
/* --------------------------- */
#side-navbar{
	background: #28343f;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	height: calc(100% - 60px);
	left: 0;
	position: fixed;
	top: 60px;
	transition: all 250ms ease-in-out;

	width: 250px;
	z-index: 1049;
}

#side-navbar ul{
	margin: 10px 0px 0px 0px;
	padding: 0;
}
#side-navbar li{
	border-left: 0px;
	color: #f2f9ff;
	display: block;		
	font-size: 120%;
	line-height: 30px;
	list-style: none;
	margin-left: 0;
	margin: 0px;
	padding: 5px 0px;
	position: relative;
	text-shadow: none;
	transition: all 250ms ease-in-out;
}

#side-navbar li:hover{
	background: #3b4a59;
	cursor: pointer;
}

#side-navbar li.active{
	background: #303d48;
	border-left: 7px solid #f2f9ff;
	font-weight: bold;
	position: relative;
}

#side-navbar li:before{
	-webkit-transform: scaleX(-1) translateX(100%);
	border-bottom: 25px solid transparent;
	border-radius:0;
	border-right: 7px solid #28343f;
	content: "";
	height: 0;
	left: 100%;
	margin-left: 0px;
	max-width: 300%;
	position:absolute;	
	top: 50%;	
	transform: scaleX(-1) translateX(100%);
	transition: all 250ms ease-in-out;
	z-index: 1000;
}
#side-navbar li:after{
	-webkit-transform:scaleY(-1) scaleX(-1) translateY(100%) translateX(100%);	
	border-bottom: 25px solid transparent;
	border-radius:0;
	border-right: 7px solid #28343f;
	content: "";
	height: 0;
	left: 100%;
	margin-left: 0px;
	max-width: 300%;
	position:absolute;	
	top: 50%;
	transform: scaleY(-1) scaleX(-1) translateY(100%) translateX(100%);	
	transition: all 250ms ease-in-out;
	z-index: 1000;
}
#side-navbar li:hover:before{
	margin-left: 0px;
	border-right: 7px solid #3b4a59;
	border-bottom: 25px solid transparent;
}
#side-navbar li:hover:after{
	margin-left: 0px;
	border-right: 7px solid #3b4a59;
	border-bottom: 25px solid transparent;
}
#side-navbar li.active:before{
	margin-left: 7px;
	border-right: 7px solid #303d48;
	border-bottom: 25px solid transparent;
}
#side-navbar li.active:after{
	margin-left: 7px;
	border-right: 7px solid #303d48;
	border-bottom: 25px solid transparent;
}

.side-navbar-bottom{
	bottom: 0;
	color: #3b4a59;
	position: absolute;
	text-align: center;
	width: 100%;
}

.sidebar-icon {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: inline-block;
	
}
.sidebar-icon:before{
	font-family: 'Font Awesome 5 Free';
	display: inline-block;
	font-weight: bold;
	font-size: 135%;
	height: 30px;
	margin: 5px 10px;
	width: 30px;
	text-align: center;
}
.icon-homepage:before{			content: "\f015";/*background-image: url("themes/default/images/icons/icon-homepage.png");			*/}
.icon-courses:before{			content: "\f02d";/*background-image: url("themes/default/images/icons/icon-courses.png");			*/}
.icon-quiz:before{				content: "\f46d";/*background-image: url("themes/default/images/icons/icon-quiz.png");				*/}
.icon-manage:before{			content: "\f7d9";/*background-image: url("themes/default/images/icons/icon-manage.png");			*/}
.icon-administration:before{	content: "\f085";/*background-image: url("themes/default/images/icons/icon-administration.png");	*/}
.icon-help:before{				content: "\f059";/*background-image: url("themes/default/images/icons/icon-help.png");				*/}

.sidebar-menu-text{
	display: inline-block;
	vertical-align: text-bottom;
	font-weight: normal;
}