/*=========================================================================================
	File Name: vertical-overlay-menu.scss
	Description: A overlay style vertical menu with show and hide support. It support 
	light & dark version, filpped layout, right side icons, native scroll and borders menu 
	item seperation.
	----------------------------------------------------------------------------------------
	Item Name: Chameleon Admin - Modern Bootstrap 4 WebApp & Dashboard HTML Template + UI Kit
	Version: 1.0
	Author: ThemeSelection
	Author URL: https://themeselection.com/
==========================================================================================*/
.vertical-overlay-menu .content
{
    margin-left: 0;
}

.vertical-overlay-menu .navbar .navbar-header
{
    z-index: 999; 

    width: 260px;
}

.vertical-overlay-menu .navbar.navbar-brand-center .navbar-container
{
    margin-left: 0;
}

.vertical-overlay-menu .navbar.navbar-brand-center .navbar-header
{
    z-index: 999; 

    width: auto;
}

.vertical-overlay-menu .main-menu,
.vertical-overlay-menu.menu-hide .main-menu
{
    left: -260px; 

    width: 260px;

    -webkit-transition: width .25s,opacity .25s,-webkit-transform .25s;
       -moz-transition: width .25s,opacity .25s,transform .25s,-moz-transform .25s;
         -o-transition: width .25s,opacity .25s,-o-transform .25s;
            transition: width .25s,opacity .25s,-webkit-transform .25s;
            transition: width .25s,opacity .25s,transform .25s;
            transition: width .25s,opacity .25s,transform .25s,-webkit-transform .25s,-moz-transform .25s,-o-transform .25s;
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

    opacity: 0;
}
.vertical-overlay-menu .main-menu .navigation .navigation-header .ft-minus
{
    display: none;
}
.vertical-overlay-menu .main-menu .navigation > li > a > i
{
    font-size: 1.5rem;

    float: left; 

    margin-right: 12px;
}
.vertical-overlay-menu .main-menu .navigation > li > a > i:before
{
    -webkit-transition: 200ms ease all;
       -moz-transition: 200ms ease all;
         -o-transition: 200ms ease all;
            transition: 200ms ease all;
}
.vertical-overlay-menu .main-menu .navigation li.has-sub > a:not(.mm-next):after
{
    font-family: 'LineAwesome';
    font-size: .85rem;

    position: absolute;
    top: 14px;
    right: 20px;

    display: inline-block;

    content: '\f112';
    transition: -webkit-transform .2s ease-in-out; 
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
}
.vertical-overlay-menu .main-menu .navigation li.has-sub .has-sub > a:not(.mm-next):after
{
    top: 8px;
}
.vertical-overlay-menu .main-menu .navigation li.open > a:not(.mm-next):after
{
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}
.vertical-overlay-menu .main-menu .main-menu-footer
{
    bottom: 55px;
}
.vertical-overlay-menu .main-menu .main-menu-footer
{
    width: 260px;
}

.vertical-overlay-menu.menu-open .main-menu
{
    -webkit-transition: width .25s,opacity .25s,-webkit-transform .25s;
       -moz-transition: width .25s,opacity .25s,transform .25s,-moz-transform .25s;
         -o-transition: width .25s,opacity .25s,-o-transform .25s;
            transition: width .25s,opacity .25s,-webkit-transform .25s;
            transition: width .25s,opacity .25s,transform .25s;
            transition: width .25s,opacity .25s,transform .25s,-webkit-transform .25s,-moz-transform .25s,-o-transform .25s; 
    -webkit-transform: translate3d(260px, 0, 0);
       -moz-transform: translate3d(260px, 0, 0);
            transform: translate3d(260px, 0, 0);

    opacity: 1;
}
.vertical-overlay-menu.menu-open .main-menu.menu-light .navigation > li > a > i
{
    line-height: 40px;

    display: inline-block;

    width: 40px;
    height: 40px;
    margin-right: 20px;

    text-align: center;
    vertical-align: middle;

    border-radius: 12%;
    background: #fff;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
            box-shadow: 0 0 10px rgba(0, 0, 0, .12);
}
.vertical-overlay-menu.menu-open .main-menu.menu-light .navigation .hover > a > i,
.vertical-overlay-menu.menu-open .main-menu.menu-light .navigation:hover > a > i,
.vertical-overlay-menu.menu-open .main-menu.menu-light .navigation .open > a > i
{
    -webkit-box-shadow: 0 0 20px rgba(253, 99, 107, .3);
            box-shadow: 0 0 20px rgba(253, 99, 107, .3);
}
.vertical-overlay-menu.menu-open .main-menu.menu-dark .navigation > li > a > i
{
    line-height: 40px;

    display: inline-block;

    width: 40px;
    height: 40px;
    margin-right: 20px;

    text-align: center;
    vertical-align: middle;

    border-radius: 12%;
    background: #2c303b;
    -webkit-box-shadow: 0 0 10px black;
            box-shadow: 0 0 10px black;
}
.vertical-overlay-menu.menu-open .main-menu.menu-dark .navigation .hover > a > i,
.vertical-overlay-menu.menu-open .main-menu.menu-dark .navigation:hover > a > i,
.vertical-overlay-menu.menu-open .main-menu.menu-dark .navigation .open > a > i
{
    -webkit-box-shadow: 0 0 20px rgba(253, 99, 107, .3);
            box-shadow: 0 0 20px rgba(253, 99, 107, .3);
}

.vertical-overlay-menu.menu-flipped .main-menu
{
    right: -260px;
    left: inherit;
}

.vertical-overlay-menu.menu-flipped .navbar .navbar-container
{
    margin: 0;
    margin-right: 260px;
}

.vertical-overlay-menu.menu-flipped .navbar .navbar-header
{
    float: right;
}

.vertical-overlay-menu.menu-flipped.menu-open .main-menu
{
    -webkit-transform: translate3d(-260px, 0, 0);
       -moz-transform: translate3d(-260px, 0, 0);
            transform: translate3d(-260px, 0, 0);
}

@media (max-width: 991.98px)
{
    .vertical-overlay-menu .main-menu .main-menu-footer
    {
        bottom: 0;
    }
}
