.appbar{
	position: fixed;
	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 green;               //←←←←←←←←←←←←←←←←←←←←	

	& > .primary, & > .second {
		 position: absolute;
		 float: left;
		 width: 100%;
		 height: 100%;
		 padding-left: 4px;
		 padding-right: 4px;

		 @include flex-justify;
		 @include transition(.150s, stan);
			
			& > h1{
				position: relative;
				float: left;

				margin-right: auto; //need it

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

			}	

			& > .icon{
				position: relative;
				display: inline-block;
				top: 0px;
				height: 48px;
				width: 48px;
				margin-left: 16px;
				display: block;

				background-image:  url('svg/illustrations/gosive-logo-gradiente.svg');

				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;

				@include selectNo;
				//border: 0.1px solid red;            
			}	


			& > div {
				position: relative;
				float: right;
				height: 48px;
				min-width: 48px;
				padding: 4px;	
				padding-left: 8px;
				padding-right: 8px;
				//border: 0.5px solid red;               
				

				&::before{
					position: absolute;
					content: '';
					bottom: 0px;
					left: 0px;

					width: 100%;
					height: 4px;
					transform: scaleX(0);
					transform-origin: center;

					background-color:$c-pd;
					@include transition(0.250s, stan);
				}	

				//@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;               //←←←←←←←←←←←←←←←←←←←←
				}


				& label{
					margin: 0px;
					@include font(caption, $c-b);
					@include selectNo;
					@include back-visivility;
					opacity: 0.67;

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

			    @include transition(.150s, emph);
				&:active  {transform:scale(0.95);}
			}/*div*/
	}

}