/* ==== SIDEBAR ==== */
#sidebar
{
	height: 100%;
	background-color: #77A3A6;
}

    #sidebar .app-logo
    {
    	height: 107px;
    	color: #FFFFFF;
    }

    #sidebar .app-logo a
    {
        display: block;
        padding: 25px;
    }
        
    #sidebar .menu-group, #sidebar .menu-title, #sidebar .menu-content
    {
    	width: 100%;
    }

    #sidebar .menu-group ~ .menu-group
    {
    	margin-top: 20px;
    }

	    #sidebar .menu-group .menu-title
	    {
	    	background-color: #66898A;
		    color: #FFFFFF;
		    height: 40px;
		    line-height: 40px;
		    overflow: hidden;
		    padding-left: 50px;
		    padding-right: 7px;
		    text-transform: uppercase;
		    position: relative;
	    }

	    	#sidebar .menu-group .menu-title > span
	    	{
	    		margin: 0;
	    		padding: 0;
	    		font-size: 14px;
	    		font-weight: normal;
	    	}

	    #sidebar .menu-content
	    {
    		width: 100%;
    	}
	    	
	    	#sidebar .menu-content ul > li
	    	{
	    		display: block;
	    		border-bottom: 1px solid #66898A;
	    	}

		    	#sidebar .menu-content ul > li > a
		    	{
		    		width: 100%;
		    		text-decoration: none;
		    		color: #FFFFFF;
		    		background-color: #77A3A6;
		    		height: 39px;
		    		display: table;
		    		padding-left: 35px;
		    		-webkit-transition: all 200ms linear;
                                -moz-transition: all 200ms linear;
                                -ms-transition: all 200ms linear;
                                -o-transition: all 200ms linear;
                                transition: all 200ms linear;
		    	}

		    	#sidebar .menu-content.customBorder > ul > li > a
		    	{
		    		width: 100%;
		    		text-decoration: none;
		    		color: #FFFFFF;
		    		background-color: #77A3A6;
		    		height: 39px;
		    		display: table;
		    		padding-left: 20px;
		    		border-left: 5px solid transparent;
		    		-webkit-transition: all 200ms linear;
                                -moz-transition: all 200ms linear;
                                -ms-transition: all 200ms linear;
                                -o-transition: all 200ms linear;
                                transition: all 200ms linear;
		    	}
                        

		    		#sidebar .menu-content ul > li > a > span
			    	{
			    		line-height: 40px;
			    	}

			    	#sidebar .menu-content ul > li:hover,
			    	#sidebar .menu-content ul > li.active,
			    	#sidebar .menu-content ul > li.open
			    	{
			    		background-color: #FFFFFF;
			    	}

		    		#sidebar .menu-content ul > li:hover > a,
		    		#sidebar .menu-content ul > li.open > a,
		    		#sidebar .menu-content ul > li.active > a
		    		{
		    			background-color: #FFFFFF;
		    			color: #404040;
                                        font-weight: bold;
		    			-webkit-transition: all 200ms linear;
                                        -moz-transition: all 200ms linear;
                                        -ms-transition: all 200ms linear;
                                        -o-transition: all 200ms linear;
                                        transition: all 200ms linear;
		    		}


/*
 * menu-level-1
 */
#sidebar .menu-content ul.accordion
{
	display: none;
}

#sidebar .menu-content ul > li.active > ul.accordion
{
	display: block;
}

	#sidebar .menu-content ul.accordion > li
	{
		display: block;
		border-bottom: 0;
		border-top: 1px solid #BBBBBB;
	}

		#sidebar .menu-content ul.accordion > li > a
		{
			width: 100%;
			background-color: #F0F0F0;
			color: #686868;
			display: table;
			padding-left: 50px;
			font-weight: normal;
			position: relative;
		}
			#sidebar .menu-content ul.accordion > li > a > span
    		{
    			display: table-cell;
    			vertical-align: middle;
    		}

		#sidebar .menu-content ul.accordion > li:first-child
		{
			background-color: #F0F0F0;
			border-top: 0;
		}

			#sidebar .menu-content ul.accordion > li:hover > a
			{
				background-color: #DDDDDD;
				-webkit-transition: all 200ms linear;
				-moz-transition: all 200ms linear;
				-ms-transition: all 200ms linear;
				-o-transition: all 200ms linear;
				transition: all 200ms linear;
			}

				#sidebar .menu-content ul.accordion > li.active > a,
                                #sidebar .menu-content ul.accordion > li:hover.active > a
				{
					border-bottom: 0;
					background-color: #DDDDDD;
				}

					#sidebar .menu-content ul.accordion > li > a .expand-sign .sign
					{
						transform: rotate(0deg);
    					transition: all 0.1s linear 0s;
						font-weight: bold;
						font-size: 20px;
						-webkit-transition: all 400ms ease-in-out;
						-moz-transition: all 400ms ease-in-out;
						-o-transition: all 400ms ease-in-out;
						transition: all 400ms ease-in-out;
					}

					#sidebar .menu-content ul.accordion > li.active > a .expand-sign .sign,
					#sidebar .menu-content ul.accordion > li.open > a .expand-sign .sign
					{
						transform: rotate(45deg);
					}



/* white (mana store control) */
#sidebar .menu-content.white
{
	background-color: #FFFFFF;
}

	#sidebar .menu-content.white ul > li
	{
		border-bottom: 0;
		width: 100%;
		background: #FFFFFF;
	}

	#sidebar .menu-content.white ul > li > a
	{
		color: #878787;
		border: none;
		padding-left: 50px;
		background: #FFFFFF;
		-webkit-transition: all 200ms linear;
		-moz-transition: all 200ms linear;
		-ms-transition: all 200ms linear;
		-o-transition: all 200ms linear;
		transition: all 200ms linear;
	}

		#sidebar .menu-content.white ul > li:hover
		{
		}

			#sidebar .menu-content.white ul > li:hover > a
			{
				background-color: #efefef;
				padding-left: 50px;
				color: #878787;
				-webkit-transition: all 200ms linear;
				-moz-transition: all 200ms linear;
				-ms-transition: all 200ms linear;
				-o-transition: all 200ms linear;
				transition: all 200ms linear;
			}

		#sidebar .menu-content.white ul > li.active
		{
			border-left: 5px solid #404040;
			font-weight: bold;
			width: 100%;
		}

			#sidebar .menu-content.white ul > li.active > a
			{
				background: #FFFFFF;
				color: #404040;
				padding-left: 45px;
				-webkit-transition: all 200ms linear;
				-moz-transition: all 200ms linear;
				-ms-transition: all 200ms linear;
				-o-transition: all 200ms linear;
				transition: all 200ms linear;
			}

		#sidebar .menu-content.white ul > li.active:hover > a
		{
			background-color: #efefef;
			padding-left: 45px;
			-webkit-transition: all 200ms linear;
			-moz-transition: all 200ms linear;
			-ms-transition: all 200ms linear;
			-o-transition: all 200ms linear;
			transition: all 200ms linear;
		}




/*
 * menu-level-1 with border
 */
#sidebar .menu-content ul.accordion-border
{
	display: none;
}

#sidebar .menu-content ul > li.active > ul.accordion-border
{
	display: block;
}

	#sidebar .menu-content ul.accordion-border > li
	{
		display: block;
		border-bottom: 0;
		border-top: 1px solid #999999;
	}

		#sidebar .menu-content ul.accordion-border > li > a
		{
			width: 100%;
			background-color: #C8C8C8;
			color: #404040;
			display: table;
                        border-left: solid 5px transparent;
			padding-left: 35px;
			font-weight: normal;
			position: relative;
		}
			#sidebar .menu-content ul.accordion-border > li > a > span
    		{
    			
    		}

		#sidebar .menu-content ul.accordion-border > li:first-child
		{
			background-color: #C8C8C8;
			border-top: 0;
		}

			#sidebar .menu-content ul.accordion-border > li:hover > a,
			#sidebar .menu-content ul.accordion-border > li.open > a,
			#sidebar .menu-content ul.accordion-border > li:hover.active > a
			{
				background-color: #BBBBBB;
				border-left: 5px solid #FFFFFF;
				-webkit-transition: all 200ms linear;
				-moz-transition: all 200ms linear;
				-ms-transition: all 200ms linear;
				-o-transition: all 200ms linear;
				transition: all 200ms linear;
			}
                        
                        #sidebar .menu-content ul.accordion-border > li:hover > a span{
                            -webkit-transition: all 200ms linear;
                            -moz-transition: all 200ms linear;
                            -ms-transition: all 200ms linear;
                            -o-transition: all 200ms linear;
                            transition: all 200ms linear;
                        }
                        #sidebar .menu-content ul.accordion-border > li.active:hover > a span{
                            margin-left: 0;                            
                        }

				#sidebar .menu-content ul.accordion-border > li.active > a
				{
					border-left: 5px solid #FFFFFF;
					font-weight: bold;
					border-bottom: 0;
					background-color: #BBBBBB;
				}

					#sidebar .menu-content ul.accordion-border > li > a .expand-sign .sign
					{
						transform: rotate(0deg);
    					transition: all 0.1s linear 0s;
						font-weight: bold;
						font-size: 20px;
						-webkit-transition: all 400ms ease-in-out;
						-moz-transition: all 400ms ease-in-out;
						-o-transition: all 400ms ease-in-out;
						transition: all 400ms ease-in-out;
					}

					#sidebar .menu-content ul.accordion-border > li.active > a .expand-sign .sign,
					#sidebar .menu-content ul.accordion-border > li.open > a .expand-sign .sign
					{
						transform: rotate(45deg);
					}






/* menu-level-3 */
#sidebar .menu-content ul.accordion-group
{
	display: none;
}

#sidebar .menu-content ul.accordion-border > li.active > ul.accordion-group
{
	display: block;
}

	#sidebar .menu-content ul.accordion-group > li
	{
		border: 0;
		display: table;
		width: 100%;
	}

		#sidebar .menu-content ul.accordion-group > li > a
		{
			display: table-cell;
			vertical-align: middle;
			background: #F0F0F0;
			height: 39px;
			border-bottom: 1px solid #F0F0F0;
			color: #888888;
			font-weight: normal;
		}

			#sidebar .menu-content ul.accordion-group > li:hover > a
			{
				background: #FFFFFF;
				color: #666666;
				-webkit-transition: all 200ms ease-in-out;
				-moz-transition: all 200ms ease-in-out;
				-o-transition: all 200ms ease-in-out;
				transition: all 200ms ease-in-out;
			}

			#sidebar .menu-content ul.accordion-group > li.active > a
			{
				background: #FFFFFF;
				color: #666666;
			}




.expand-sign
{
	top: 0;
	right: 0;
	width: 30px;
}

.expand-sign .sign
{
	position: absolute;
	font-weight: bold;
	font-size: 20px;
	top: 23%;
	right: 9px;
}


img.icon-menu
{
	position: absolute;
	top: 10px;
	left: 15px;
}


/* colors for menu (border-left) */

#sidebar .menu-content.customBorder li.border-color-1:hover > a,
#sidebar .menu-content.customBorder li.border-color-1.active > a,
#sidebar .menu-content.customBorder li.border-color-1.open > a
{
	border-left: 5px solid #808d95;
}

#sidebar .menu-content.customBorder li.border-color-2:hover > a,
#sidebar .menu-content.customBorder li.border-color-2.active > a,
#sidebar .menu-content.customBorder li.border-color-2.open > a
{
	border-left: 5px solid #808d95;
}

#sidebar .menu-content.customBorder li.border-color-3:hover > a,
#sidebar .menu-content.customBorder li.border-color-3.active > a,
#sidebar .menu-content.customBorder li.border-color-3.open > a
{
	border-left: 5px solid #808d95;
}

#sidebar .menu-content.customBorder li.border-color-4:hover > a,
#sidebar .menu-content.customBorder li.border-color-4.active > a,
#sidebar .menu-content.customBorder li.border-color-4.open > a
{
	border-left: 5px solid #808d95;
}

#sidebar .menu-content.customBorder li.border-color-5:hover > a,
#sidebar .menu-content.customBorder li.border-color-5.active > a,
#sidebar .menu-content.customBorder li.border-color-5.open > a
{
	border-left: 5px solid #808d95;
}

#sidebar .menu-content.customBorder li.border-color-6:hover > a,
#sidebar .menu-content.customBorder li.border-color-6.active > a,
#sidebar .menu-content.customBorder li.border-color-6.open > a
{
	border-left: 5px solid #808d95;
}

#sidebar .menu-content.customBorder li.border-color-7:hover > a,
#sidebar .menu-content.customBorder li.border-color-7.active > a,
#sidebar .menu-content.customBorder li.border-color-7.open > a
{
	border-left: 5px solid #808d95;
}

#sidebar .menu-content.customBorder li.border-color-8:hover > a,
#sidebar .menu-content.customBorder li.border-color-8.active > a,
#sidebar .menu-content.customBorder li.border-color-8.open > a
{
	border-left: 5px solid #662C91;
}

#sidebar .menu-content.customBorder li.border-color-9:hover > a,
#sidebar .menu-content.customBorder li.border-color-9.active > a,
#sidebar .menu-content.customBorder li.border-color-9.open > a
{
	border-left: 5px solid #808d95;
}

#sidebar .menu-content.customBorder li.border-color-10:hover > a,
#sidebar .menu-content.customBorder li.border-color-10.active > a,
#sidebar .menu-content.customBorder li.border-color-10.open > a
{
	border-left: 5px solid #808d95;
}

#sidebar .menu-content.customBorder li.border-color-11:hover > a,
#sidebar .menu-content.customBorder li.border-color-11.active > a,
#sidebar .menu-content.customBorder li.border-color-11.open > a
{
	border-left: 5px solid #808d95;
}


/*
 * icons ADMIN
 */
#sidebar .menu-content li a.catalogo-produtos
{
	background: url('icons/catalogo_produtos.png') no-repeat;
	background-position: 10px;
}

	#sidebar .menu-content li:hover a.catalogo-produtos,
	#sidebar .menu-content li.active a.catalogo-produtos,
	#sidebar .menu-content li.open a.catalogo-produtos
	{
		background: url('icons/catalogo_produtos_hover.png') no-repeat;
		background-position: 10px;
	}

#sidebar .menu-content li a.tarefas
{
	background: url('icons/tarefas.png') no-repeat;
	background-position: 10px;
}

	#sidebar .menu-content li:hover a.tarefas,
	#sidebar .menu-content li.active a.tarefas,
	#sidebar .menu-content li.open a.tarefas
	{
		background: url('icons/tarefas_hover.png') no-repeat;
		background-position: 10px;
	}