#header {
  background-color: $color-background;
  color: $color-text;
  //@extend %pseudo-afterlight;
  h1 {
		@extend %flex;
		@extend %align-items-flex-end;
		@extend %flex-wrap-wrap;
		padding: 0.5*$gap 0;
		font-weight: normal;
		font-size: $font-size;
    line-height: 1.5*$font-size;
		margin: 0;
		overflow: hidden;
		//display: flex;
		//flex-direction: row-reverse;
		@include respond-to(min-menu-collapse) {
			//line-height: $gap + $breadcrumb-height;
			padding: 0.5*$box-padding 0 0.5*$box-padding $box-padding;
			margin: $gap 0;
		}
		& > .separator,& > .ancestor{
			@extend %order-2;
			//float: right;
			color: $color-text-muted;
			//padding: .4em 0;
			margin-top: $gap;
			text-decoration: none;
			&:hover{
				color: $color-text;
			}
		}
	  	& > .ancestor{
			&:before{
				content: '/';
				margin: 0 .5*$gap;
			}
		}
		& > .self{
			@extend %order-1;
			font-size: 2*$font-size;
      line-height: 1.2;
			float: left;
			margin-right: $box-padding;
			position: relative;
			z-index: 3;
			@extend %align-self-flex-start;
			.icon{
				color: $color-important;
				margin: 0 .5*$gap;
				line-height: 0;
				position: relative;
				bottom: -3px;
        @include respond-to(max-small-screen){
          display: none;
				}
			}
			a {
				color: $color-text;
				display: inline;
			}

			@include respond-to(max-menu-collapse){
				display: block;
				margin-right: 0;
			}
		}
		& > .separator{
			display: none;
			//margin: 0 $gap;
			//@extend %rotate-180;
			//color: rgba($color-text,.33);
			//&:last-of-type{
			//	display: none;
			//}
		}
	  	a,span{
			display: inline-block;
		}
		a{
			//font-weight: bold;
			color: $color-text;
		}
  }

  #main_menu_scroll_buttons {
		@extend %control-menu-buttons;
		top: initial;
		left: 1.5*$box-padding;
		right: 1.5*$box-padding;
		margin: 0 (-$box-padding);
		z-index: 2;
		@include respond-to(min-menu-collapse){
			margin: 0;
			display: none !important;
		}
  }
	.menu-project-template{
		@include small;
		font-weight: normal;
		color: $color-text-muted;
		margin: 0 .5*$gap;
	}
}

$button-size: $box-padding;

//%rounded-action-buttons{
//	width: 2*$box-padding + 2;
//	height: 2*$box-padding + 2;
//	padding: $gap;
//	margin-top: -$gap;
//	margin-right: -$gap;
//	@extend %list-style-none;
//	top: $topmenu-height + $gap;
//	right: .5*$gap + 1;
//	position: fixed;
//	z-index: z($z-priority, action-button);
//	@include respond-to(max-menu-collapse){
//		right: $gap;
//		bottom: $gap;
//		top: auto;
//	}
//	&:after{
//		@extend %button-positive;
//		@extend %button-rounded;
//		@extend %material__elevation--depth_4;
//		@extend %transform-none;
//		@include icon(add-action);
//		padding: $gap;
//		text-align: center;
//		line-height: $button-size;
//		width: $button-size;
//		height: $button-size;
//		overflow: visible;
//		opacity:1;
//		position: absolute;
//		left: 2 + 2*$box-padding + $gap;
//		top: 2 + 2*$box-padding + $gap;
//		font-size: $font-h2;
//		z-index: 1;
//	}
//	@extend %pseudo-before;
//	&:before{
//		position: absolute;
//		left: $gap;
//		right: $gap;
//		top: $gap;
//		bottom: $gap;
//	}
//	li {
//		@extend %transition-all-quicker-easeout;
//		position: absolute;
//		padding: $gap;
//		top: 0;
//		left: 0;
//		&:hover{
//			z-index: 1;
//		}
//	}
//	a{
//		@extend %tooltip-parent;
//		@extend %button-rounded;
//		@extend %material__elevation--depth_3;
//		padding: $gap;
//		text-align: center;
//		line-height: $button-size;
//		height: $button-size;
//		width: $button-size;
//		overflow: visible;
//		opacity: 0;
//		display: none;
//		font-size: $font-h1;
//		&:before{
//			width: 100%;
//			opacity: 1;
//		}
//		&:after{
//			display: none;
//		}
//		.tooltip{
//			top: 50%;
//			right: 95%;
//			right: calc(100% - $box-padding);
//			left: auto;
//			bottom: auto;
//			margin-top: 0;
//			@extend %translateY-correction;
//		}
//	}
//	&:hover{
//		a{
//			opacity: 1;
//			display: inline-block;
//		}
//		.tooltip{
//			display: block;
//		}
//		//&:after{
//		//	@extend %rotate-45ccw;
//		//	//background-color: darken($color-border,0);
//		//	//border-color: darken($color-border,0);
//		//}
//		@for $i from 1 through 9 {
//			& > li:nth-of-type(#{$i}){
//				@include translateY(2.5*$box-padding * $i - 1);
//				@include respond-to(max-menu-collapse){
//					@include translateY(-2.5*$box-padding * $i + 1);
//				}
//			}
//		}
//	}
//}
%listlike-action-buttons{

}
.menu-easy-new-entity{ //,#main_menu_top_project
	@extend %list-style-none;
	@extend %border-radius-small;
	@extend %material__elevation--depth_4;
	@extend %transform-none;
	//overflow: hidden;
	$btn-right: .5*$gap + 1;
	&__wrapper{

		top: $topmenu-height + $gap;
		right: $btn-right;
		position: fixed;
		z-index: z($z-priority, action-button);
		@include respond-to(max-menu-collapse){
			right: $gap;
			bottom: $gap;
			top: auto;
		}
	}
	&__trigger{
		@include icon-parent(add-action);
		@extend %button-positive;
		@extend %button-rounded;
		@include smallest;
		@extend %material__elevation--depth_4;
		&:before{
			position: absolute;
			top: 33%;
			left: 50%;
			font-size: $font-h1;
			@extend %translate-correction;
		}
		padding: 1.5*$gap $gap .5*$gap;
		text-align: center;
		line-height: $button-size;
		width: $button-size;
		height: $button-size;
		overflow: visible;
		opacity:1;
		//position: absolute;
		//right: 0;
		//top: 2 + 2*$box-padding + $gap;
		z-index: 1;
		margin-bottom: $gap;
		&.w-toggleable__trigger--active{
			&:before{
				@include icon(cancel-alt);
			}
			background: $color-negative;
			border-color: $color-negative;
			width: $button-size;
			height: $button-size;
			@include respond-to(max-menu-collapse){
				//bottom: 0;
				//top: auto;
				//right: -$servicebar-width + $gap;
			}
		}
	}
	@extend %material__elevation--depth_4;
	display: none;
	z-index: 1;
	position: absolute;
	right: $button-size + 1.5*$box-padding;
	min-width: 160px;
	top: 0;
	&.w-toggleable__content--active{
		display: block;
	}
	@include respond-to(max-menu-collapse){
		bottom: 0;
		top: auto;

	}
	a{
		display: block;
		//margin-left: -$sidebar-width - $box-padding;
		@extend %border-radius-none;
		&:before{
			width: $box-padding;
		}
	}
	//@extend %rounded-action-buttons;
}

#main-menu{
  @extend .tabs;

	height: auto;
	margin: 0 (-$gap) 0;
	&>ul{
		padding: 0 $box-padding;
	}
  //@include tab-parent($color-foreground,$header-color-border, $color-background, $color-important, $color-text, $mainmenu-height, $gap);
  //padding: 0 0.5*$box-padding;
  a{
	margin-bottom: 0 !important;
  }
  position: relative;
  //padding-bottom: $box-padding;
  //margin: 0;
  .ps-scrollbar-x-rail{
	bottom:  ($box-padding - $scrollbar-width) /2;
	display: none !important;
  }
  &:hover{
	.ps-scrollbar-x-rail{
	  display: inherit;
	}
  }
	@include respond-to(min-menu-collapse){
		margin: 0;
		overflow: initial;
	}
}

.main_menu{
	&__settings,&__more{
		@extend %menu-tooltip;
		& > ul{
			display: none;
			right: 0;
			top: 100%;
		}
		& > a{
			display: none !important;
		}
		&.w-toggleable--active, &:hover{
			& > ul{
				display: block;
			}
			&:after{
				@include triangle-top-borders(.4*$gap, $color-text);
			}
		}
		&.w-toggleable--active{

				&:after{
					//@extend %border-radius-half-top;
					//@extend %material__elevation--depth_4;
					@include icon(cancel);
					border: none;
					margin-top: -.6em;
					color: $color-negative;
					//position: absolute;
					//text-align: center;
					//color: $color-negative;
					//top: -$box-padding;
					//right: $box-padding;
					//width: $box-padding;
					//line-height: $box-padding;
					//height: $box-padding;
					//background: $color-foreground;
				}

		}
		@extend %pseudo-after;
		&:after{
			@include triangle-bottom-borders(.4*$gap, $color-text-muted);
			top: 1em;
			right: 0;
		}
		&:before{
			font-size: $font-h2;
			margin-right: $box-padding;
			color: $color-text-muted;
		}
	}
	&__more{
		@include icon-parent(more-horiz);
		&:before{
			line-height: 0;
			vertical-align: bottom;
			position: relative;
			top: 1px;
		}
	}
	&__settings{
		@include icon-parent(settings);
		margin-left: auto;
		margin-right: -$box-padding;
	}
}


#mobile-actions{
	@extend %list-reset;
	@extend %flex;
	@extend %flex-wrap-wrap;
	@extend %justify-content-center;
	margin-top: $gap;
	@include respond-to(min-sidebar-collapse) {
		display: none;
	}
	a{
		margin: 3px;
	}
	li{
		@extend %flex;
		@extend %flex-wrap-wrap;
		@extend %justify-content-center;
	}
}