.bar{

& .barLegend{
		position: relative;
		display: inline-block;
		width: calc(100% - 0px);
		height: 32px;
		//margin:8px;

		//border: 1px solid red;/************************/


		& .cont{
			position: relative;
			width: 25%;
			height: 100%;
			max-width: 132px;
			float: left;
		  	-webkit-transition:  all 0.300s;  
	  		transition:  all 0.300s;   		

		    display: flex;
			align-items: center;
			justify-content:center;
		    flex-direction: column; 
		    cursor: pointer;
		    //border: 1px solid white;
		    //border: 1px solid purple;/************************/

			&:hover{
		    	background-color: rgba($c_b, 0.04);
			}	

		    &--selected{
		    	background-color: rgba($c_b, 0.08);
		    }



			& label{
				display: block;
				overflow: hidden;
				padding-top: 4px;
				width: 100%;
				height: 100%;

				@include font(caption, $c-b);
			    text-align: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-wrap:none;
				
				pointer-events:none;   
				user-select: none;
				-moz-user-select: -moz-none;
				@include interaction-color;



				//border: 1px solid blue;/**********************/
			}/*label*/

			&:active{ background-color: rgba($c_b, 0.08); }

			//border: 1px solid blue;/************************/
		}/*cont*/

	}/*header*/


}/*dashboard_bar*/