/* sidebar */
.siftal #sidebar .scr{overflow:hidden;overflow-y:auto;height:80%;height:calc(100% - 70px);}
.siftal #sidebar figure{padding:2em 0;text-align:center;color:#ddd}
.siftal #sidebar figure .avatar{position:relative;width:100px;margin:1em auto;display:block;height:100px;}
.siftal #sidebar figure .avatar:before{position:absolute;top:0;right:0;bottom:0;left:0;content:'';transition:.3s;border:2px solid transparent;border-color:transparent #888;border-radius:50%}
.siftal #sidebar figure .avatar:after{font-family:"siftal";content:"\e20c";position:absolute;top:0;bottom:0;right:0;left:0;text-align:center;line-height:90px;font-size:2em;border-radius:50%;color:#fff;opacity:0.3;transition:0.3s;margin:5px;}
.siftal #sidebar figure .avatar img{display:block;max-width:100%;height:100%;padding:.5em;border-radius:50%;margin:0 auto;width:100%;overflow:hidden;transition:0.3s;}
.siftal #sidebar figure .avatar:hover img{transform: scale(1.2);}
.siftal #sidebar figure .avatar:focus img{transform: scale(1.4);}
.siftal #sidebar figure:hover .avatar:before{border-color:transparent #fff}
.siftal #sidebar figure:hover .avatar:after{content:"\e05f";background-color:rgba(0,0,0,0.3);opacity:1}
.siftal #sidebar figure figcaption{max-width:100%;margin:0 auto;padding:1em 0;overflow:hidden;white-space: nowrap;text-overflow:ellipsis;}
.siftal #sidebar .menu{overflow-y:auto;}


[data-debugger] .siftal #sidebar figure .avatar:before{border-color:#f69900}

#sidebar .toggleClean{position:absolute;top:0;left:0;color:#fff;padding:5px;margin:5px;font-size:2em;z-index:-1;opacity:0;transition:0.3s;}
#sidebar:hover .toggleClean{z-index:1;opacity:1;}

/* change avatar placeholder on page loading */
.siftal.loading-page #sidebar .avatar:before{animation-duration:1s;-webkit-animation-duration:1s;animation-fill-mode:both;-webkit-animation-fill-mode:both;animation-name:flash;-webkit-animation-name:flash;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;}
@-webkit-keyframes flash{ from, 50%, to {opacity:1;} 25%, 75% {opacity:0.5;}}
@keyframes flash { from, 50%, to {opacity:1;} 25%, 75% {opacity:0.5;}}



/* sidenav menu */
.siftal #sidebar ul.sidenav{font-size:1.2em;margin-bottom:1em;}
.siftal #sidebar ul.sidenavService{font-size:1.2em;margin-bottom:1em;}
.siftal #sidebar ul > li{color:#d5d5d5;}
.siftal #sidebar ul > li.title{background-color:#333;transition:0.3s; padding:0.5em 1em;margin-top:0.7em;}
.siftal #sidebar ul > li.title:hover{background-color:#000;}
.siftal #sidebar ul > li.detail{background-color:#333;padding:0.7em 1em;transition:0.3s;}
.siftal #sidebar ul > li.detail:hover{background-color:#222;}
.siftal #sidebar ul > li.detail .progress{background-color:rgba(0, 0, 0, 0.3)}
.siftal #sidebar ul > li.detail .btn{padding:10px 1.2em;line-height:normal}
.siftal #sidebar ul > li > a{position:relative;display:block;padding:1em 1.5em;color:#d5d5d5;transition:background-color 0.3s;cursor:pointer;max-width:300px;margin:0 auto;line-height:1.5em;}
.siftal #sidebar ul > li.item{padding:1em 1.5em;color:#d5d5d5;transition:background-color 0.3s;cursor:pointer;max-width:300px;margin:0 auto;line-height:1.5em;}
.siftal #sidebar ul > li > a > i{font-size:1.2em;display:inline-block;margin:0 0.5em 0 0 ;}
.rtl.siftal #sidebar ul > li > a > i{margin:0 0 0 0.5em ;}
.siftal #sidebar ul > li > a:hover{background-color:rgba(0,0,0,0.3)}
.siftal #sidebar ul > li > a:focus{background-color:rgba(0,0,0,0.7)}
.siftal #sidebar ul > li > a:active{background-color:rgba(0,0,0,0.7)}
.siftal #sidebar ul > li > ul{background-color: #252525;font-size:0.9em}
.siftal #sidebar ul > li > ul > li{}
// 2nd level
.siftal #sidebar ul > li > ul > li > a{position:relative;padding:0.7em 2.5em;}
.ltr.siftal #sidebar ul > li > ul > li > a{padding-right:0;}
.rtl.siftal #sidebar ul > li > ul > li > a{padding-left:0;}
// 3rd level
.siftal #sidebar ul > li > ul > li > ul > li > a{position:relative;padding:0.7em 4em;}
.ltr.siftal #sidebar ul > li > ul > li > ul > li > a{padding-right:0;}
.rtl.siftal #sidebar ul > li > ul > li > ul > li > a{padding-left:0;}


.siftal #sidebar ul > li > a.weAreHere{background-color:rgba(0,0,0,0.8);color:#fff}
.siftal.ltr #sidebar .activeContent{background-color:rgba(255,255,255,0.1);color:#fff;border-left: 7px solid #fff;}
.siftal.rtl #sidebar .activeContent{background-color:rgba(255,255,255,0.1);color:#fff;border-right: 7px solid #fff;}

.siftal.ltr #sidebar #ermileBadge{padding-right:0;}
.siftal.rtl #sidebar #ermileBadge{padding-left:0;}

.siftal #sidebar .hr{
	width:80%;
	border-top:1px solid #777;
	border-top:1px solid rgba(255,255,255,0.2);
	margin: 1em auto;
}


.siftal #sidebar ul > li > a.clicked{margin-left:5px;margin-right:5px;}
.siftal #sidebar ul > li > a.clicked:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom:0;
	left:0;
	background-color: rgba(255,255,255,0.5);
	width: 100%;
	height: 100%;
	z-index: 2;
	border: 1px solid #fff;
	box-shadow:0 0 0 rgba(204,169,44,0.4);
	animation:pulseSlow 0.5s infinite ease-in-out;
}
@keyframes pulseSlow { 0%{opacity:.3} 70%{opacity:.5} 100%{opacity:.3}}