.bar{
	position: relative;
	width:  100%;
	//height: 500px;
	//border: 1px solid rgba($c_b, 0.12);		
	//border: 1px solid rgba(red, 1);	

	//border: 0.5px solid blue;/************************/


	& .title{
		position: relative;
		display: inline-block;
		overflow: hidden;
		//padding-top: 6px;
		max-width: 100%;
		margin-right:0px;
		width: auto;
		float: right;

		//font-weight: 400;
		text-align: right;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-wrap:none;

		@include font(subtitle1, $c-g);
		letter-spacing: 2px;

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



& .barBody{
		position: relative;
		width: calc(100% - 0px);
		height: 250px;
		float: right;

		//margin: 8px;
		margin-top: 16px;
		padding-bottom: 24px;
		padding-left: 48px;
		//width: calc(100% - 0px);

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

		//where we have one or multiple bars
		& .unit{
			position: relative;
			height: 100%;
			width: 50%;	
			margin-bottom: 16px;

			float: left;
			
			display: flex;
			align-items: center;
			justify-content:center;
			z-index: 1;

			border-left:    0.5px solid rgba($c_b, 0.06);	
			border-right:   0.5px solid rgba($c_b, 0.06);	
			border-bottom:  0.5px solid rgba($c_b, 0.06);	

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


			& .rectangle {
				max-width: 56px;
				position: relative;
				bottom: 0px;
				height: 0%;
				width: calc(100% - 16px);
				align-self: flex-end;


				margin-left: 8px;
				margin-right: 8px;


				float: left;
				border-bottom: 0.1px solid transparent;	

			  	-webkit-transition:  height 0.9s;  
			  	transition:  height 0.9s;  
			  	//border: 1px solid red;/************************/	



				& .value{
					position: absolute;
					top: 0px;
					height: 24px;
					left: 50%;
					transform: translateX(-50%);
					//max-width: 32px;
					visibility: hidden;
					opacity: 0;
					padding: 8px;

					display: flex;
					align-items: center;
					justify-content:center;

					background-color: $c-b;


				    font-size: 12px; 
				    font-weight: 500;  

				    color: rgba($c_w, 1);
				    text-align: center;
					white-space: nowrap;
					text-overflow: ellipsis;
					text-wrap:none;	

				  	-webkit-transition:  all 0.100s;  
				  	transition:  all 0.100s;   
				  	z-index: 2;


			  	&:after{
			  		content: "";
			  		position: absolute;
			  		top: 24px;
			  		width: 0px;
			  		height: 0px;

					  border: 5px solid $c-b;
					  border-left-color:    transparent;
					  border-right-color:   transparent;
					  border-top-color:      rgba(black, 0.67);;
					  border-bottom-color:  transparent;

						border-width: 20px 20px 20px 0px;
			  	}

					//border: 2px solid blue;/************************/
				}/*value*/	

				&:hover{
					cursor: pointer;
					& .value{
						top: -38px;
						visibility: visible;
						opacity: 1;
					}
				}
			}/*rectangle*/

			//name under each unit
			& .legend{
				position: absolute;
				bottom: -24px;
				height: 24px;
				width: 100%;

				align-items: center;
				justify-content:center;

				padding-top: 4px;
				padding-left: 4px;
				padding-right: 4px;

				@include font(caption, $c-b);

			overflow:hidden;
			white-space: nowrap; 
			text-overflow: ellipsis;
			text-wrap:none;	

			//border: 0.1px solid blue;/************************/
			}/*legend*/	

		}/*unit*/



		//label on the left of the graphc, value indicators
		& .line {
			position: absolute;
			right: 0px;
			bottom: 10%;
			width: calc(100% - 0px);
			border: 0.5px solid $c-divider;

			& label{
				position: absolute;
				width: 32px;
				left:-1px;
				top: -8px;
				padding-right: 2px;


				@include font(caption, $c-b);
			    background-color: $c_w;
			    text-align: right;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-wrap:none;		
				//border: 0.1px solid blue;/************************/
			}/*label*/
		}/*line*/


}/*barBody*/

& .barHeader{
		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*/