.report-appbar{
	position: relative;
	display: inline-block;
	
	width: calc(100% - 0px);
	left: 0px;

	height: 48px;
	top: 0px;
	box-shadow: 0px 0px 0px 0px;
    border-bottom: 1px solid lighten($c-divider, 0);               //←←←←←←←←←←←←←←←←←←←←
	z-index: 10;     
	overflow: hidden;  
	@include back-visivility;
	//opacity: 0.36;
    //border: 0.5px solid red;               //←←←←←←←←←←←←←←←←←←←←	


		
		& > h1{
			position: relative;
			float: left;

			margin-right: auto; //need it

			@include font(h6, $c-pd); //font
			@include selectNo;
			@include back-visivility;
			margin-top: 10px;
			margin-left: 8px;
			letter-spacing: 1.5px;
			
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;     //... at the end of input

			//border: 0.5px solid red;               //←←←←←←←←←←←←←←←←←←←←
		}	


		& > div {
			position: relative;
			float: left;
			height: 48px;
			min-width: 48px;
			padding: 4px;	
			//border: 0.5px solid red;               //←←←←←←←←←←←←←←←←←←←←	
			
			//@include centerFlex;
			@include centerFlexColum;
			@include back-visivility;
			//border: 0.5px solid blue;               //←←←←←←←←←←←←←←←←←←←←	

			& svg{
				height: 24px;
				width:  24px;
				fill: $c-pd;
				//opacity: 0.67;
				transform: rotate(0deg);
				@include transition(0.500s, stan);
				@include selectNo;
				@include back-visivility;
				//border: 0.5px solid blue;               //←←←←←←←←←←←←←←←←←←←←
			}


		}/*div*/


}


.report-appbar-blue{
		background: $cg-blue;

		& > h1{ @include font(h6, $c-w); }	

		& > div { 
			@include interaction-color-ramdon($cg-blue);

				& svg{ fill: $c-w; }
			      & label{
						@include font(caption, $c-w);
						opacity: 0.99;
			}
		}/*div*/
}


.report-appbar-black{
	
		background: $c-b;

		& > h1{ @include font(h6, $c-w); }	

		& > div { 
			@include interaction-color-ramdon($c-b);

				& svg{ fill: $c-w; }
			      & label{
						@include font(caption, $c-w);
						opacity: 0.99;
			}
		}/*div*/
}