/* Shadow background */

#shadow-background{
	position : fixed;
	top : 0px;
	background : #000000;
	opacity : 0;
	height : 0%;
	width : 100%;
	cursor : pointer;
    z-index: 99;
	
	-webkit-transition : opacity .5s ease-in-out;
	transition : opacity .5s ease-in-out;
}

/* Lateral menu */

#lateral-menu{
	position : fixed;
	top : 0px;
	background-color : #ffffff;
	height : 100%;
	width : 350px;
	box-shadow : 0px 0px 20px #000000;
    z-index: 99;
	
	-webkit-transition : .5s ease-in-out;
	transition : .5s ease-in-out;
}

#lateral-menu .button-notif{
	position : absolute;
	background-color : rgba(0, 0, 0, 0.5);
	box-shadow : 0px 0px 0px 1px rgba(255, 255, 255, 0.25);
	top : 12px;
	right : 100px;
	height : 24px;
	width : 24px;
	padding : 2px;
	border-radius : 24px;
	cursor : pointer;
	
	-webkit-transition : .5s ease-in-out;
	transition : .5s ease-in-out;
}

#lateral-menu .button-notif img{
	-webkit-transition : .15s ease-in-out;
	transition : .15s ease-in-out;
}

#lateral-menu .button-notif #notifications{
	position : absolute;
	top : -638px;
	left : -180px;
    margin-top : 0.5em;
    display : inline-block;
    background : #ffffff;
	border : 1px solid #ffffff;
	box-shadow : 0px 0px 0px 3px rgba(0, 0, 0, 0.5);
	border-radius : 8px;
    position :relative;
    min-height : 100px;
    max-height : 500px;
    width : 250px;
	cursor : default;
	z-index : 3;
	
	opacity : 0;
	
	-webkit-transition : .5s ease-in-out;
	transition : .5s ease-in-out;
}

#lateral-menu .button-notif #notifications::before{
    content :"\A";
    border-style : solid;
    border-width : 0px 10px 10px 10px;
    border-color : transparent transparent rgba(0, 0, 0, 0.5) transparent;
    position : absolute;
    top : -13px;
    left : 181px;
}

#lateral-menu .button-notif #notifications .title{
	position : relative;
	background : #e9e9e9;
	color : #333333;
	font-weight : bold;
	padding : 15px 45px;
	border-bottom : 1px solid #cccccc;
	border-radius : 8px 8px 0px 0px;
}

#lateral-menu .button-notif #notifications .title img{
	position: absolute;
	top : 11px;
	left : 12px;
	
	-webkit-transition : all ease-in-out .5s;
	transition : all ease-in-out .5s;
}

#lateral-menu .button-notif #notifications .no-content{
	text-align : center;
	line-height : 50px;
}

#lateral-menu .button-exit{
	position : absolute;
	background-color : rgba(0, 0, 0, 0.5);
	box-shadow : 0px 0px 0px 1px rgba(255, 255, 255, 0.25);
	top : 12px;
	right : 56px;
	height : 24px;
	width : 24px;
	padding : 2px;
	border-radius : 24px;
	cursor : pointer;
	
	-webkit-transition : .5s ease-in-out;
	transition : .5s ease-in-out;
}

#lateral-menu .button-exit img{
	-webkit-transition : .15s ease-in-out;
	transition : .15s ease-in-out;
}

#lateral-menu .button-menu{
	position : absolute;
	background-color : rgba(0, 0, 0, 0.5);
	box-shadow : 0px 0px 0px 1px rgba(255, 255, 255, 0.25);
	top : 12px;
	right : 12px;
	height : 24px;
	width : 24px;
	padding : 2px;
	border-radius : 24px;
	cursor : pointer;
}

#lateral-menu .button-menu img{
	-webkit-transition : .15s ease-in-out;
	transition : .15s ease-in-out;
}

#lateral-menu .header{
	background-image : url(../imgs/header-background.jpg);
	background-position : center bottom;
	height : 180px;
	width : 100%;
    position:relative;
	border-bottom : 3px solid #ffffff;
	overflow : hidden;
}

#lateral-menu .header .user{
	border-spacing: 0px;
	border-collapse: separate;
	height : 100%;
	
	-webkit-transition : .5s ease-in-out;
	transition : .5s ease-in-out;
}

#lateral-menu .header td:first-child{
	padding : 25px
}

#lateral-menu .header td:last-child{
	color : #ffffff;
}

#lateral-menu .header td:last-child .username{
	padding-right : 25px;
	font-size : 22px;
	font-weight : bold;
}

#lateral-menu .header .profil-round{
	position: relative;
	width : 75px;
	height : 75px;
	overflow : hidden;
	border-radius : 75px;
	border : 3px solid #ffffff;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

#lateral-menu .header .profil-round img{
	object-fit : cover;
	width : 75px;
	height : 75px;
    z-index: 0;
	
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#lateral-menu  ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#lateral-menu ul li{
	position : relative;
	color : #333333;
	font-weight : bold;
	padding : 15px 45px;
	border-bottom : 1px solid #cccccc;
	cursor : pointer;
	
	-webkit-transition : background-color ease-in-out .15s, color ease-in-out .5s .25s;
	transition : background-color ease-in-out .15s, color ease-in-out .5s .25s;
}

#lateral-menu ul li:first-child{
	border-top : 1px solid #cccccc;
}

#lateral-menu ul li:hover, #lateral-menu ul .selected{
	background : #e9e9e9;
}

#lateral-menu ul li .img-translate{
	position: absolute;
	top : 11px;
	left : 12px;
	
	-webkit-transition : ease-in-out .5s;
	transition : ease-in-out .5s;
}

#lateral-menu ul li .img-translate img{
	-webkit-transition : .15s ease-in-out ;
	transition : .15s ease-in-out;
}

/* ANIMATIONS */

#lateral-menu .header::before{
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}

#lateral-menu .header:hover::before{
	-webkit-animation: shine .75s;
	animation: shine .75s;
}

#lateral-menu .header:hover .profil-round img{
	-webkit-transform: rotate(-5deg) scale(1.2);
	transform: rotate(-5deg) scale(1.2);
}

#lateral-menu .button-notif #notifications.custom-show{
	opacity : 1;
	-webkit-transform : translate(0px,650px);
	transform : translate(0px,650px);
}

#lateral-menu .button-notif:hover img,
#lateral-menu .button-exit:hover img,
#lateral-menu .button-menu:hover img{
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

#lateral-menu ul li:hover .img-translate img{
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

/* Lateral menu (Hide) */

#lateral-menu.custom-hide .button-notif #notifications{
	position : absolute;
	top : -38px;
	left : -360px;
    margin-top : 0.5em;
    display : inline-block;
    background : rgba(255, 255, 255, 0.7);
	border : 1px solid #ffffff;
	box-shadow : 0px 0px 0px 3px rgba(0, 0, 0, 0.5);
	border-radius : 8px;
    position :relative;
    min-height : 100px;
    max-height : 500px;
    width : 250px;
	cursor : default;
	z-index : 3;
	
	opacity : 0;
	
	-webkit-transition : .5s ease-in-out;
	transition : .5s ease-in-out;
}

#lateral-menu.custom-hide .button-notif #notifications::before{
    content :"\A";
    border-style : solid;
    border-width : 10px 10px 10px 0px;
    border-color : transparent rgba(0, 0, 0, 0.5) transparent transparent;
    position : absolute;
    top : 8px;
    left : -13px;
}

/* ANIMATIONS (Hide) */

#lateral-menu.custom-hide{
	background-color : rgba(255, 255, 255, 0.7);
	box-shadow : 0px 0px 20px rgba(0, 0, 0, 0.75);
	
	-webkit-transform : translate(-300px,0px);
	transform : translate(-300px,0px);
}

#lateral-menu.custom-hide .header .user{
	opacity : 0;
}

#lateral-menu.custom-hide .button-notif #notifications.custom-show{
	opacity : 1;
	-webkit-transform : translate(400px,0px);
	transform : translate(400px,0px);
}

#lateral-menu.custom-hide .button-notif{
	-webkit-transform : translate(88px,88px);
	transform : translate(88px,88px);
}

#lateral-menu.custom-hide .button-exit{
	-webkit-transform : translate(44px,44px);
	transform : translate(44px,44px);
}

#lateral-menu.custom-hide .button-menu img{
	content:url(../imgs/icons/menu.png);
}

#lateral-menu.custom-hide ul li{
	color : #ffffff;
	
	-webkit-transition : background-color ease-in-out .15s, color ease-in-out .5s;
	transition : background-color ease-in-out .15s, color ease-in-out .5s;
}

#lateral-menu.custom-hide ul li:hover, #lateral-menu.custom-hide ul .selected{
	color : #e9e9e9;
}

#lateral-menu.custom-hide ul li .img-translate{
	transform: translateX(300px);
}

#lateral-menu.custom-hide ul li:hover .img-translate img{
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}