[data-sidebar-style="overlay"] {
	&[data-layout="vertical"]{

		--dz-side-sub_nav-padding : .5rem .5rem .5rem 2.5rem;
		--dz-side-nav-padding : .85rem 1.5rem;

	}
    .ic-sidenav {
        #{$ic-pos-left}: -100%;
        @include transitionMedium;
		box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.2);
		.metismenu{
			@include respond ('phone-land'){
				.menu-title{
					padding-top: 16px;
					padding-bottom: 8px;
				}
			}
			& > li {
				padding: 0 0.5rem;
				
				& > a {
					color: #7f7184;
					border-radius: $radius;
					-webkit-transition: all 0.5s;
					-ms-transition: all 0.5s;
					transition: all 0.5s;
					i{
						line-height:1;
					}
				}
				&:hover > a{
					color:var(--primary);
					i{
						color:var(--primary);
					}
				}
				&.mm-active > a {
					color:var(--primary);
					background-color: var(--rgba-primary-1);
					i{
						color:var(--primary);
					}
				}
				
			}
			
		}
		
    }
    .content-body {
        margin-#{$ic-pos-left}: 0;
    }
    .nav-header {
        position: absolute;
        .hamburger.is-active {
            #{$ic-pos-left}: 0;
            .line {
                background-color: var(--primary);
            }
        }
    }
    .menu-toggle {
        .nav-header {
            position: absolute;
            #{$ic-pos-left}: auto;
        }
        .ic-sidenav {
            #{$ic-pos-left}: 0;
        }
    }
    .footer {
        padding-#{$ic-pos-left}: 0;
    }
}

[data-sidebar-style="overlay"][data-header-position="fixed"] {
    .nav-header {
        position: fixed;
    }
}


[data-container="wide-boxed"][data-sidebar-position="fixed"][data-sidebar-style="overlay"][data-layout="vertical"],
[data-container="boxed"][data-sidebar-position="fixed"][data-sidebar-style="overlay"][data-layout="vertical"]{ 
	.ic-sidenav {
        position: fixed;
		#{$ic-pos-left}: auto;
		width:0;
		overflow: hidden;
		transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0s;
		& > div{
			width: var(--dz-sidebar-width);
			min-width: var(--dz-sidebar-width);
			#{$ic-pos-right}: var(--dz-sidebar-width);
			transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0s;
		}
    }
	.menu-toggle{
		.ic-sidenav {
			width:var(--dz-sidebar-width);
			& > div{
				#{$ic-pos-right}: 0;
			}
		}
	}	
}