/*
**side header
*/

$sideHeaderWidth: 270px;
/////////////
//left layout
body {
	position: relative;
	left: 0;
	&:after {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.5);
		z-index: 1001;
		visibility: hidden;
		opacity: 0;
	}
}
body, 
body:after, 
.page_header_side {
	transition: all 0.8s ease-in-out;
}
body {

	-webkit-transition-property: left, right;
	-moz-transition-property: left, right;
	-ms-transition-property: left, right;
	-o-transition-property: left, right;
	transition-property: left, right;
}
//push side header
body.active-side-header {

	left: $sideHeaderWidth;

	.page_header_side {
		left: 0;
	}
	&:after {
		visibility: visible;
		opacity: 1;
	}
}
.page_header_side {
	z-index: 1002;
	position: fixed;
	width: $sideHeaderWidth;
	left: -$sideHeaderWidth;
	top: 0;
	bottom: 0;

	&.active-slide-side-header {
		box-shadow: 0px 0px 3px 3px rgba(50, 50, 50, 0.15);
	}
  &.page_header_side_special{
    z-index: 5555;
    .close-wrapper{
      position: absolute;
      top: 3%;
      right: 10%;
      a{
        font-size: 24px;
        color: $lightColor;
      }
    }
    .header-side-menu{
      ul.sf-menu-side{
        li{
          list-style: none;
          padding: 5px 0;
          a{
            color: $lightColor;
            font-weight: 500;
          }
        }
      }
    }
  }
}

.side_header_inner {
	padding: 60px 30px;
}

.toggle_menu_side {
	position:absolute;
	top: 15px;
	right: -65px;
	background-color: #fff;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	box-shadow: 0 0 4px 0 rgba(50, 50, 50, 0.5);
	&:before {
		font-family: 'FontAwesome';
		content: "\f0c9";
	}
	.active-slide-side-header &:before,
	.active-side-header &:before {
		content: "\f00d";
	}
	.ds & {
		background-color: $darkgreyColor;
		color: $lightColor;
	}
	@media (max-width: 350px) {
		& {
			top: 5px;
			right: -55px;
		}
	}
}

.page_header_side.active-slide-side-header {
	left: 0;
}

//right layout
.page_header_side.header_side_right {
	left: auto;
	right: -$sideHeaderWidth;
	&.active-slide-side-header {
		right: 0;
	}
	.toggle_menu_side {
		right: auto;
		left: -65px;
		@media (max-width: 350px) {
			& {
				left: -50px;
			}
		}
	}

}


body.active-side-header.slide-right {
	left: -$sideHeaderWidth;
	.page_header_side {
		left: auto;
		right: 0;
	}
}


//side menu styles
.mainmenu_side_wrapper {
	ul ul, .mega-menu {
		height: 0;
		overflow: hidden;
	}
	ul li.sfHover > .mega-menu ul {
		display: block;
		height: 100%;
	}
	.mega-menu > ul {
		height: auto;
	}
}

.menu-side-click {
	padding: 0;

	li {
		position: relative;
		list-style: none;
		a {
			margin-right: 25px;
		}
		.activate_submenu {
			cursor: pointer;
			position: absolute;
			right: 0;
			top: 11px;
			font-size: 16px;
			color: $mainColor;
			text-align: center;
			width: 25px;
			&:before {
				content: '+';
			}

		}
	}
	li.active-submenu > .activate_submenu:before {
		content: '-';
	}
	ul {
		//TODO maybe make submenus appear to the right from side header ?
		padding-left: 20px;
		opacity: 0;
		height: 0;
		overflow: hidden;
		transition: opacity 0.05s, height 0.05s ease;
	}
	.active-submenu > div {
		height: auto;
	}
	.active-submenu > ul,
	.active-submenu > div > ul{
		display: block;
		opacity: 1;
		height: auto;
		transition: opacity 0.6s, height 0.6s ease;
	}
}

/* sidebar scroll plugin */
.scroll-wrapper {
	overflow: hidden;
	padding: 0;
	position: relative;
	height: 100%;

	& > .scroll-content {
		border: none;
		box-sizing: content-box;
		height: auto;
		left: 0;
		margin: 0;
		max-height: none;
		max-width: none;
		overflow: scroll;
		padding: 0;
		position: relative;
		top: 0;
		width: auto;

		&::-webkit-scrollbar {
			height: 0;
			width: 0;
		}
	}
	&.scroll--rtl {
		direction: rtl;
	}
}

.scroll-element {
	box-sizing: content-box;
	display: none;

	div {
		box-sizing: content-box;
	}
	.scroll-bar,
	.scroll-arrow {
		cursor: default;
	}

	&.scroll-x.scroll-scrollx_visible,
	&.scroll-y.scroll-scrolly_visible {
		display: block;
	}
}

.scrollbar-macosx > .scroll-element,
.scrollbar-macosx > .scroll-element div
{
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 10;
}

.scrollbar-macosx > .scroll-element div {
	display: block;
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
}

.scrollbar-macosx > .scroll-element .scroll-element_track { display: none; }
.scrollbar-macosx > .scroll-element .scroll-bar {
	background-color: rgba(127,127,127,0.4);
	display: block;

	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;

	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;

	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}
.scrollbar-macosx:hover > .scroll-element .scroll-bar,
.scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity: 0.7;
}


.scrollbar-macosx > .scroll-element.scroll-x {
	bottom: 0px;
	height: 0px;
	left: 0;
	min-width: 100%;
	overflow: visible;
	width: 100%;
}

.scrollbar-macosx > .scroll-element.scroll-y {
	height: 100%;
	min-height: 100%;
	right: 0px;
	top: 0;
	width: 0px;
}

/* scrollbar height/width & offset from container borders */
.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; }

.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; }
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; }

.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; }

/* update scrollbar offset if both scrolls are visible */
.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }