/*
 *  side-push-panel.less
 * -----------------------------------------------
*/
.side-push-panel {
	overflow-x: hidden;
}
.side-push-panel.fullwidth-page {
	#wrapper {
		right: 0;
		position: relative;
	}
	header {
		.header-nav-wrapper.scroll-to-fixed-fixed {
			.container {
				right: 0;
			}
		}
	}
}
.side-push-panel.fullwidth-page.side-panel-left {
	#wrapper {
		left: 0;
		right: auto;
	}
	header {
		.header-nav-wrapper.scroll-to-fixed-fixed {
			.container {
				left: 0;
				right: auto;
			}
		}
	}
}
.side-push-panel.fullwidth-page.side-panel-open {
	#wrapper {
		right: 350px;
	}
	header {
		.header-nav-wrapper.scroll-to-fixed-fixed {
			.container {
				right: 350px;
			}
		}
	}
}
.side-push-panel.fullwidth-page.side-panel-left.side-panel-open {
	#wrapper {
		left: 350px;
		right: auto;
	}
	header {
		.header-nav-wrapper.scroll-to-fixed-fixed {
			.container {
				left: 350px;
				right: auto;
			}
		}
	}
}

/* -------- Has Side Panel ---------- */
.side-push-panel.has-side-panel .menuzord .showhide {
	float: left;
}



/* -------- Body Overlay ---------- */
.has-side-panel {
	.body-overlay {
		.transition(opacity .3s ease);
		background-color: fade(@black, 60%);;
		height: 100%;
		left: 0;
		opacity: 0;
		pointer-events: none;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: @zindex-side-push-panel-body-overlay;
	}
}
.has-side-panel.side-panel-open {
	.body-overlay {
		opacity: 1;
		pointer-events: auto;
		z-index: @zindex-side-push-panel-side-panel-open-body-overlay;
	}
}

.side-panel-open:not(.device-xxs):not(.device-xs):not(.device-sm) .body-overlay:hover { 
	cursor: url('../images/close.png') 15 15, default;
}

/* -------- Side Panel ---------- */
#side-panel {
	-webkit-backface-visibility: hidden;
	background-color: @white-f3;
	height: 100%;
	overflow: hidden;
	position: fixed;
	right: -350px;
	top: 0;
	width: 350px;
	z-index: @zindex-side-panel;
	.transition(all .4s ease);
	@media only screen and (max-width: 900px) {
		width: 300px;
	}

	.side-panel-wrap {
		bottom: 0;
		height: 100%;
		left: 0;
		overflow: auto;
		padding: 40px;
		position: absolute;
		top: 0;
		width: 100%;
	}
	.widget {
		margin-bottom: 10px;
		padding-bottom: 10px;
		width: 100%;
	}
}
.side-panel-open #side-panel { right: 0; }
.side-panel-left #side-panel {
	left: -350px;
	right: auto;
}
.side-panel-left.side-panel-open #side-panel {
	left: 0;
	right: auto;
}
.device-touch #side-panel .side-panel-wrap { overflow-y: scroll; }

/* -------- Side-Panel-Nav ---------- */
#side-panel {
	.side-panel-nav,
	.side-panel-widget {
		.nav {
			li {
				a {
					padding: 3px 0;
					&:hover {
						background-color: transparent;
						color: @gray-darkgray;
					}
				}
			}
			ul.tree {
				display: none;
				margin-left: 15px;
			}
		}
	}
}

/* -------- Side-Panel-Trigger And Close ---------- */
#side-panel-trigger {
    cursor: pointer;
    display: block;
    float: right;
    margin-left: 10px;    
    margin-right: 5px;
    margin-top: 22px;
    z-index: @zindex-side-panel-trigger;
	@media only screen and (max-width: 900px) {
		margin-top: 13px;
	}
}
#side-panel-trigger-close {
  left: 0;
  margin: 10px;
  position: absolute;
  top: 0;
}

/* -------- Transition ---------- */
.side-push-panel.fullwidth-page #wrapper,
.side-push-panel.fullwidth-page header .header-nav-wrapper.scroll-to-fixed-fixed .container {
	.transition(all .4s ease);
}