/*!
 * Propeller v1.3.2 (http://propeller.in): sidebar.css
 * Copyright 2016-2019 Digicorp, Inc.
 * Licensed under MIT (http://propeller.in/LICENSE)
 */

.constructor, 
.pmd-content {
	position:relative;
	margin:0;
	padding-top: $content-padding-top;
	padding-left: $content-padding-x;
	padding-right: $content-padding-x;
	@include transition($sidebar-transition);
	@media (max-width: 767px) {
		padding-left: $content-padding-x-sm;
		padding-right: $content-padding-x-sm;
		transition: none;
	}
}
@media (max-width: 767px) {
	body.pmd-body-open {
		overflow: hidden;
	}
}

.pmd-sidebar, 
.wrapper, 
.pmd-content {
	vertical-align: top;
}

// Sidebar Overlay 
.pmd-sidebar-overlay {
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	background:$sidebar-overlay-bg;
	z-index: 998;
	@include transition($sidebar-transition);
	@include transform-translateZ(0);
	// Overlay Active
	&.pmd-sidebar-overlay-active {
		opacity:$sidebar-overlay-opacity;
		visibility:visible;
		transition-delay:0;
	}
}

// Sidebar 
.pmd-sidebar {
	position: relative;
	display: block;
	min-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	border: none;
	@include transition($sidebar-transition);
	padding-top: $sidebar-padding-top;
	background: $sidebar-bg;
	width: $sidebar-width;
	@media ( max-width: 767px ) {
		padding-top: 0;
		transform: translate3d(-$sidebar-width, 0, 0);
	}
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
	&::-webkit-scrollbar-track {
		border-radius: 2px;
	}
	&::-webkit-scrollbar-track {
		border-radius: 2px;
	}
	&::-webkit-scrollbar {
		width: 5px;
		background-color: #F7F7F7;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		background-color: #BFBFBF;
	}
	// Sidebar My account 
	.pmd-user-info {
		> a {
			background-color: $sidebar-user-info-bg;
			background-size: cover;
			color: $sidebar-user-info-color;
			@include hover-focus {
				background-color: $sidebar-user-info-bg;
			}
		}
	}
	// Sidebar show/hide
	&.pmd-sidebar-open {
		min-width: $sidebar-width;
		width: $sidebar-width;
		@include transform-translate3d(0, 0, 0);
		@media (max-width: 767px) {
			min-width: $sidebar-width;
			width: $sidebar-width;
			
			
		}
	}
}

// Sidebar Stacked 
.pmd-sidebar-slide-push {
	left: 0;
	@include transform-translate3d(-$sidebar-width, 0, 0);
	@media (max-width: 767px) {
		left: 0;
	}
	&.pmd-sidebar-open {
		~ .pmd-content,
		~ .wrapper .constructor {
			margin-left: $sidebar-width;
			@media (max-width: 767px) {
				margin-left: 0;
			}
		}
	}
	
}

// Left and Right Sidebar
.pmd-sidebar-left-fixed, 
.pmd-sidebar-right-fixed, 
.pmd-sidebar-slide-push {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 999;
}
.pmd-sidebar-left-fixed {
	left: 0;
	@include box-shadow-depth(1);
	@include transform-translate3d(-$sidebar-width, 0, 0);
}
.pmd-sidebar-right-fixed {
	right: 0;
	@include transform-translate3d($sidebar-width, 0, 0);
	&.pmd-sidebar-open {
		@include transform-translate3d(0, 0, 0);
	}
}

// Sidebar nav 
.pmd-sidebar {
	.pmd-sidebar-nav {
		li {
			position: relative;
			a {
				position: relative;
				cursor: pointer;
				clear: both;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				@include transition($transition-base);
			}
		}
	}
	.dropdown-menu {
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
		li a {
			padding-left: $sidebar-menu-padding-left;
			@media ( max-width: 767px ) {
				padding-left: $sidebar-menu-padding-left-sm;
			}
		}
	}
}

/* -- Topbar --*/
.topbar-fixed {
	@include transform-translate3d(0, 0, 0);
	@include transition($sidebar-transition);
	position: fixed;
	z-index: 1030;
	overflow: hidden;
	width: 100%;
	height: 0px;
	right: 0;
	top: 0;
	&.pmd-sidebar-open {
		@include transform-translate3d(0, 0, 0);
		width: 100%;
		height: 200%;
		&::before {
			border-radius: 50%;
			display: block;
			height: 3000px;
			width: 3000px;
			@include transform-scale(1);
			opacity: 1;
			left: 50%;
			bottom: 50%;
			margin-left: -1500px;
			margin-bottom: -1500px;
		}
		.topbar-container {
			opacity: 1;
			transition-delay: 1s;
		}
	}
	&::before {
		background: white none repeat scroll 0 0;
		border-radius: 50%;
		bottom: 100%;
		color: #fff;
		content: "";
		left: 100%;
		position: absolute;
		@include transform-origin(top right);
		@include transform-scale(0);
		@include transition($sidebar-transition);
		opacity: 0;
		height: 3000px;
		width: 3000px;
	}
	.topbar-container {
		opacity: 0;
		@include transition($sidebar-transition);
		transition-delay: 0s;
	}
}
.topbar-close {
	margin-top: 12px;
}