.side-menu {
    background-color: #36353a;
    background-color: var(--ohio-black);
    height: 100%;
    position: fixed;
    top: 0;
    transition: width 0.5s ease-in-out;
    width: 4.6em;
    z-index: 1000;
}

.side-menu-header {
    align-items: center;
    display: flex;
    height: 5em;
    height: var(--ohio-navbar-height);
    justify-content: flex-start;
    padding-left: 1.5em;
}

.side-menu-profile {
    border-bottom: 1px solid #58575d;
    border-bottom: 1px solid var(--ohio-sidemenu-border);
    display: flex;
    height: 4em;
    justify-content: flex-start;
    align-items: center;
}

    .side-menu-profile > a {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        height: 100%;
        justify-content: flex-start;
        padding-left: 0.8em;
        width: 100%;
        text-decoration: none;
    }

.profile-avatar {
    align-items: center;
    background-color: #1073ba;
    background-color: var(--ohio-brand-blue);
    border-radius: 50%;
    display: flex;
    height: 3em;
    justify-content: center;
    min-width: 3em;
}

    .profile-avatar > .image {
        max-height: 100%;
        max-width: 100%;
        border-radius: 50%;
    }

    .profile-avatar > .initials {
        color: #f9f9f9; /*IE*/
        color: var(--ohio-lightshades);
        font-family: OpenSans-Bold;
        font-size: 18px;
    }

.profile-info {
    align-items: flex-start;
    color: #f9f9f9; /*IE*/
    color: var(--ohio-lightshades);
    display: flex;
    flex-direction: column;
    font-size: 12px;
    margin-left: 1em;
    opacity: 0;
    transition: opacity 0.2s ease-in-out, width 1s ease-in;
    width: 0%;
}

    .profile-info > .name {
        font-family: OpenSans-Bold;
        pointer-events: none;
    }

    .profile-info > .email {
        pointer-events: none;
    }

.side-menu-list {
    list-style-type: none;
}

    .side-menu-list > li {
        border-bottom: 1px solid #58575d;
        border-bottom: 1px solid var(--ohio-sidemenu-border);
        min-height: 3.1em;
        min-height: var(--ohio-sidemenu-item-height);
    }

        .side-menu-list > li:hover {
            background-color: #404548;
            background-color: var(--ohio-black-hover);
        }

        .side-menu-list > li > a {
            align-items: center;
            display: flex;
            height: 100%;
            justify-content: flex-start;
            text-decoration: none;
            width: 100%;
            height: 3.1em;
            height: var(--ohio-sidemenu-item-height);
        }

            .side-menu-list > li > a > .item-active-indicator {
                background-color: #36353a;
                background-color: var(--ohio-black);
                height: 100%;
                min-width: 0.3em;
            }

            .side-menu-list > li > a > img {
                height: 100%;
                margin: 0 1em;
                max-width: 100%;
                min-width: 2em;
                width: 2em;
            }

            .side-menu-list > li > a > div > .side-menu-item-header {
                color: #e3e3e3;
                color: var(--ohio-background-grey);
                font-family: OpenSans-Regular;
                font-size: 14px;
                width: 100%;
                pointer-events: none;
            }

            .side-menu-list > li > a > div {
                pointer-events: none;
            }

        .side-menu-list > li > ul {
            list-style-type: none;
        }

            .side-menu-list > li > ul > li {
                box-sizing: border-box;
                height: 0;
                opacity: 0;
                transition: opacity 0.1s ease-in-out, height 0.5s ease-in-out;
                background-color: #3a3f42;
                background-color: var(--ohio-menu-child);
            }

                .side-menu-list > li > ul > li:hover {
                    background-color: #404548;
                    background-color: var(--ohio-black-hover);
                }

                .side-menu-list > li > ul > li > a {
                    align-items: center;
                    box-sizing: border-box;
                    display: flex;
                    height: 100%;
                    justify-content: flex-start;
                    text-decoration: none;
                    width: 100%;
                    height: 100%;
                    padding-left: 1em;
                }

                    .side-menu-list > li > ul > li > a > p {
                        color: #e3e3e3;
                        color: var(--ohio-background-grey);
                        font-family: OpenSans-Regular;
                        font-size: 12px;
                        width: 100%;
                        pointer-events: none;
                    }


/* Togglers */
.toggle-menu {
    width: 15em;
    transition: width 0.5s ease-in-out;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.show-title {
    opacity: 1 !important;
    width: 100% !important;
    transition: opacity 2s ease-in !important;
    -moz-transition-delay: 0.4s !important;
    -o-transition-delay: 0.4s !important;
    -webkit-transition-delay: 0.4s !important;
    transition-delay: 0.4s !important;
}

.active {
    background-color: #1073ba !important;
    background-color: var(--ohio-brand-blue) !important;
}

.menu-title-container {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding-right: 0.4em;
    opacity: 0;
    transition: opacity 0.1s ease-in-out, width 0.6s ease-in;
    width: 0%;
}

.expand-child {
    box-sizing: border-box;
    height: 3em !important;
    height: var(--ohio-sidemenu-childitem-height) !important;
    opacity: 1 !important;
    transition: opacity 2.0s ease-in-out, height 0.5s ease-in-out !important;
    -moz-transition-delay: 1.2s !important;
    -o-transition-delay: 1.2s !important;
    -webkit-transition-delay: 1.2s !important;
    transition-delay: 1.2s !important;
}



/* HAMBURGER TOGGLE */
.navbar-toggler {
    margin-right: 1em;
    padding: 0;
    background-color: #36353a;
    background-color: var(--ohio-black);
    border: none;
}

.animated-icon {
    width: 1.6em;
    height: 1.6em;
    position: relative;
    margin: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

    .animated-icon span {
        display: block;
        position: absolute;
        height: 0.12em;
        width: 100%;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 0.25s ease-in-out;
        -moz-transition: 0.25s ease-in-out;
        -o-transition: 0.25s ease-in-out;
        transition: 0.25s ease-in-out;
    }

    .animated-icon span {
        background: #e3e3e3;
        background: var(--ohio-background-grey);
    }

        .animated-icon span:nth-child(1) {
            top: 0px;
        }

        .animated-icon span:nth-child(2) {
            top: 8px;
        }

        .animated-icon span:nth-child(3) {
            top: 16px;
        }

    .animated-icon.open span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
        -moz-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .animated-icon.open span:nth-child(2) {
        opacity: 0;
        left: -60px;
        -moz-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .animated-icon.open span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
        -moz-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }


/* Chevron */
.rotate {
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 0.5s ease-in-out;
}

.down {
    -ms-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    transition: transform 0.5s ease-in-out;
    -moz-transition-delay: 1.2s;
    -o-transition-delay: 1.2s;
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
}