.easy-page{
  &-content.edit{
	#easy_grid_sidebar, #easy_grid_content{
	  //bottom: $toolbar-height;
	}
	.contextual{
	  position: absolute;
	  bottom: $gap;
	  left: $gap;
	  input{

	  }
	}
	.layout-buttons{
	  @extend %toolbar;
	}
	.close-icon-container{
	  position: absolute;
	  top: 2*$gap - 1;
	  right:  5*$gap;
	  a.icon-close{
		@extend %button-link;
		@include icon-parent(del);
		z-index: 2;
	  }
	}
  }
  &-zone{
  	@extend %clearfix;
	margin-right: -$gap;
	@include respond-to(min-medium-screen){
	  margin-right: -$box-padding;
	}
	#easy_grid_sidebar &{
	  margin-right: 0;
	}
	.edit & {
	  @extend %page-zone;
	}
	.add-module-edit-content{
	  text-align: center;
	  margin: ($box-padding - $gap) 0;
	}
  }
  &-toolbar{
	.edit &{
	  @extend %toolbar;
	  margin-top: -$box-margin;
	}
  }
  &-empty-zone{
	@extend %page-zone;
	@extend %box-inset;
	text-align: center;
	padding: 10*$gap;
	font-size: 4em;
  }
  &-content{
	//@extend %toolbar-fixed-bottom-parent;
		padding: 0;
  }
	&-add-module{
		$column-width: 300px;
		@extend %transition-all-quick-easeout;
		position: fixed !important;
		overflow: visible !important;
		top: $topmenu-height - 1;
		left: 0;
		bottom: 0;
		z-index: 2;
		width: $column-width;
		background: $color-foreground;
		@include translate(-$column-width, 0);
		&__content{
			padding: 0 !important;
		}
		&__wrapper{
			height: 100%;
			//overflow: auto;
		}
		&__item{
			position: static !important;
			width: auto !important;
			font-weight: bold;
			border-bottom: 1px solid $color-border-minor;
			@extend %flex;
			@extend %align-items-center;
			&:hover{
				background: mix($color-background,$color-foreground);
				cursor: move;
			}
			&-name{
				display: block;
				padding: $gap $gap $gap 0;
			}
			&-image{
				font-size: 1.5em;
				padding: $gap;
				@include icon-parent(chart);
			}
			&-description{
				@include small;
				font-weight: normal;
				display: block;
			}
		}
		&__controls{
			position: absolute;
			left: $column-width - 1;
			background: $color-foreground;
			border: 1px solid $color-border;
			padding: .5*$gap;
			bottom: -1px;
			@extend %flex;
			@extend %flex-wrap-nowrap;
			@include border-radius(0 .5*$gap 0 0);
			a{
				margin: .5*$gap;
			}
		}
		&_active{
			@extend %translate-reset;
		}
		&__easy-page-content_activated{
			margin-left: $column-width;
		}

	}
  &-editable-tabs{
	li{
	  position: relative;
	  & > span{
		@include small;
		//position: absolute;
		//top: 2px;
		//right: 2px;
		//left: 2px;
		display: none;
		line-height: $tab-height - 2;
		//background: $color-foreground;
		//border: 1px solid $color-border-minor;
		//display: none;
		text-align: center;
	  }
	  &:hover{
		& > a + span {
		  display: inline-block;
		}
	  }
	}

  }
  &__module{
		#easy_grid_sidebar &{
			width: auto !important;
			float: none !important;
		}
		&--gauge.push-left{
			@include respond-to(min-small-screen){
				width: 360px;
			}
		}
		&--trend{
			.module-heading-links{
				right: 0;
			}
			&.push-left{
				float: none;
				min-height: 155px;
				@extend %box-sizing-border-box;
				@include respond-to(min-small-screen){
					float: left;
					width: calc(100%/2 - #{$gap});
				}
				@include respond-to(min-medium-screen){
					width: calc(100%/3 - #{$box-padding});
					min-height: 165px;
				}
				@include respond-to(min-large-screen){
					width: calc(100%/4 - #{$box-padding});
					min-height: 170px;
				}
				@include respond-to(min-xlarge-screen){
					width: calc(100%/5 - #{$box-padding});
					min-height: 190px;
				}
				@include respond-to(min-xxlarge-screen){
					width: calc(100%/6 - #{$box-padding});
					min-height: 200px;
				}
				@include respond-to(min-xxxlarge-screen){
					width: calc(100%/8 - #{$box-padding});
				}
				#easy_grid_sidebar &{
					margin-bottom: $box-margin;
					border-top: none;
					padding: 0 $box-padding;
					min-height: 155px;
					.module-heading{
						&-links{
							background: none;
						}
					}
				}
			}
			&[class*=palette]{
				.expander{
					$expander__color: rgba($color-text,.5);
					$expander__color--hover: rgba($color-text,1);

					&:before{
						border-top-color: $expander__color;
						border-bottom-color: $expander__color;
						&:hover{
							border-top-color: $expander__color--hover;
							border-bottom-color: $expander__color--hover;
						}
					}
					&:after{
						border-left-color: $expander__color;
						border-right-color: $expander__color;
						&:hover{
							border-left-color: $expander__color--hover;
							border-right-color: $expander__color--hover;
						}
					}
					&:hover{
						&:before{
							border-top-color: $expander__color--hover;
							border-bottom-color: $expander__color--hover;
						}
						&:after{
							border-left-color: $expander__color--hover;
							border-right-color: $expander__color--hover;
						}
					}
				}
			}
			@extend %palette-background;
		}
  }
  &-module{
	  margin-right: $gap;
	  @include respond-to(min-medium-screen){
		  margin-right: $box-padding;
	  }
	  &-form{
			@extend %form-box;
	  }
  }
}
#easy_page_tabs {
	//@extend %tab-parent;

	order: 1;

	&:first-child{
		background: mix($color-background, $color-foreground);
	}
	margin-bottom: 0;

  .ps-scrollbar-x-rail{
	  display: none !important; //TODO: nahredit za funkcni
  }
}
#easy-page-layout-service-box-bottom{
  padding-top: $box-margin;
  //text-align: center;
	z-index: 2;
}

.add-module-edit-content{
  & ~ div{
		margin-top: $box-margin;
		margin-bottom: 0;
  }
}