/*******************************/
/* Sidebar animation           */
/*******************************/
#sidebar {
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}


/*******************************/
/* Sidebar item format         */
/*******************************/
.sidebar-item {
    transition: .18s;
    width: 100%;
}

    .sidebar-item .sidebar-item-heading {
        font-weight: bold;
        border-bottom: 1px solid #BFB37C;
    }

    .sidebar-item .sidebar-item-main {
        font-size: .9em;
    }


/*******************************/
/* Sidebar navigation pane     */
/*******************************/
#sidebar-nav {
    width: 100%; /*160px;*/
    max-width: 200px;
    min-height: auto !important;
}

    #sidebar-nav #sidebar-title {
        background-color: #F3F0E5;
        font-size: .8em;
        height: 20px;
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
        padding-left: 5px;
        font-weight: bold;
        color: #2D4961;
    }

    #sidebar-nav a,
    #sidebar-nav btn {
        font-size: .9em;
        color: #2D4961;
    }

        #sidebar-nav a:hover {
            color: #d23600;
        }

        #sidebar-nav a.selected {
            background-color: #2D4961;
            color: #fff;
        }


/*******************************/
/* Sidebar icon                */
/*******************************/
#sidebar-icon {
    top: 2px;
    left: -25px;
    width: 16px; /*60px;*/
    height: 18px; /*45px;*/
    position: relative;
    /*margin: 50px auto;*/
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

@media (max-width: 767px) {
    #sidebar-icon {
        left: -5px;
        margin-right: 5px;
    }

        #sidebar-icon.open {
            left: -25px;
        }
}

@media (max-width: 575px) {
    #sidebar-nav {
        width: 50px;
    }
}


#sidebar-icon span {
    display: block;
    position: absolute;
    height: 2px; /*9px;*/
    width: 50%;
    background: #777;
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

    #sidebar-icon span:nth-child(even) {
        left: 50%;
        /*border-radius: 0 9px 9px 0;*/
    }

    #sidebar-icon span:nth-child(odd) {
        left: 0px;
        /*border-radius: 9px 0 0 9px;*/
    }

    #sidebar-icon span:nth-child(1), #sidebar-icon span:nth-child(2) {
        top: 0px;
    }

    #sidebar-icon span:nth-child(3), #sidebar-icon span:nth-child(4) {
        top: 5px; /*18px;*/
    }

    #sidebar-icon span:nth-child(5), #sidebar-icon span:nth-child(6) {
        top: 10px; /*36px;*/
    }

#sidebar-icon.open span:nth-child(1), #sidebar-icon.open span:nth-child(6) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#sidebar-icon.open span:nth-child(2), #sidebar-icon.open span:nth-child(5) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#sidebar-icon.open span:nth-child(1) {
    left: 2px;
    top: 5px;
}

#sidebar-icon.open span:nth-child(2) {
    left: calc(50% - 2px);
    top: 5px;
}

#sidebar-icon.open span:nth-child(3) {
    left: -50%;
    opacity: 0;
}

#sidebar-icon.open span:nth-child(4) {
    left: 100%;
    opacity: 0;
}

#sidebar-icon.open span:nth-child(5) {
    left: 2px;
    top: 10px;
}

#sidebar-icon.open span:nth-child(6) {
    left: calc(50% - 2px);
    top: 10px;
}



/*******************************/
/* Sidebar icon                */
/*  >>  REMOVE TRANSITION <<   */
/*******************************/
#sidebar-icon.notransition,
#sidebar-icon span.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}