.sidebar {
    width: 95%;
    list-style: none;
    margin-left: 5px;
}

@media (min-width:668px) {
    .sidebar {
        width: 320px;
    }

    .Descriptionbox {
        margin-left: 330px;
    }
}

.main-title {
    font-size: 24px;
    margin: 0px 0px 15px;
    font-weight: 600;
    color: #004494;
}

    .main-title::after {
        content: "";
        display: block;
        border-bottom: 2px solid #004494;
        width: 7%;
        position: relative;
        bottom: -6px; /* your padding + border-width */
        transition: width 0.3s linear;
    }

    .main-title:hover::after {
        width: 10%;
    }


.sidebar li {
    overflow: hidden;
}

.sidebar li, {
    display: inline-block;
}

.sidebar__content {
    float: left;
}

.sidebar-title:hover {
    color: #174873;
}


.sidebar li:hover .sidebar__title, .sidebar li:hover i, .sidebar__img-area i, .sidebar__title {
    color: #ffffff;
}


.sidebar-title:before, .sidebar li {
    background-color: #174873;
}

    .sidebar li:hover, .sidebar li.active:hover {
        background-color: #438eb9;
    }

.sidebar-title:hover:before {
    background-color: #000000;
}

.sidebar-title, .sidebar li, .sidebar li a, .sidebar__img-area, .sidebar__img-area i {
    position: relative;
}

    .sidebar li:after {
        position: absolute;
    }


    .sidebar li:after {
        top: 50% !important;
        transform: translate(0%, -50%);
    }



.sidebar-title {
    font-size: 22px;
    padding-left: 10px;
}

    .sidebar-title span {
        font-size: 19px;
        position: relative;
        top: 1px;
    }

    .sidebar-title img {
        width: 30px;
    }

    .sidebar-title:before {
        content: "";
        left: 0px;
        width: 3px;
        height: 100%;
    }

.sidebar {
    padding: 0px !important;
}

    .sidebar li {
        width: 100%;
        border-bottom: 2px solid #06131e;
        border-radius: 0px 0px 0px 0px;
        transition: width .3s ease;
        line-height: initial !important;
        margin: 5px 0px;
    }


        .sidebar li:before {
            content: "";
            background-color: #f39422;
            left: 0px;
            height: 100%;
            width: 4%;
            top: 0;
            transition: width .3s ease;
        }

        .sidebar li:after {
            content: "";
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-left: 12px solid #0f2d49;
            border-bottom: 9px solid transparent;
            right: -12px;
        }

        .sidebar li:hover:before {
            width: 100%;
        }

        .sidebar li:hover i {
            /*transform: scale(3) rotate(46deg);
            left: 0;
            opacity: 0.5;*/
            transform: scale(2);
            left: 15px;
            opacity: 0.5;
        }

        .sidebar li.active {
            background-color: #0f2d49;
            overflow: unset;
        }

        .sidebar li a {
            display: block;
            padding: 14px 0 35px !important;
        }

.sidebar--big li a {
    padding: 13px 0;
}

.sidebar__img-area {
    width: 50px;
    float: left;
}

    .sidebar__img-area i {
        font-size: 19px;
        left: 22px;
        top: 2px;
        transition: .3s linear;
    }

.sidebar__content {
    width: calc(100% - 50px);
}

.sidebar__title {
    font-size: 14.5px;
}