style.css

*{
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-family: 'Source Sans Pro', sans-serif;
    text-decoration: none;
}

/*------Centering the content------*/
.middle{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
}


/*------Styling the Container------*/
.wrapper{
    width: 260px;
    overflow: hidden;
    border-radius: 5px;
}


/*------Styling the main Links------*/
.main_link_container{
    display: flex;
    background-color:#2ecc71;          /*Main Menu Background Color*/
    padding: 15px 30px;
    border-bottom: 1px dotted #228B22;
    cursor:pointer;

}

.icon_container{
    margin-left: auto;
}

.icon_container .fas{
    color:white;
    font-size:14px;
}

.main_link_container p{
    color:white;
    font-size:18px;
}

/* ------Styling the Sub Menu------*/
.sub_menu{
    background-color: #333333;         /*Sub Menu Background Color*/
    overflow: hidden;
    transition: max-height 0.3s;
}

.sub_item_link{
    display: block;
    color: white;
    padding: 14px 30px;
    cursor: pointer;
    border-bottom: 1px dotted #222222;
    position: relative;
}


/* Line which appears on hover over the sub menu links*/
.sub_item_link:before{
    content: "";
    position: absolute;
    background-color: #2ecc71;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    height: 85%;
    width: 5px;
    color:white;
    display: block;
    opacity: 0;
}

.sub_item_link:hover:before{
    opacity: 1;
}


/*------Removing the border from the last Items------*/
.last{
    border-bottom: 0px !important;
}


/*------Styling the Font Awesome Icons------*/
.fas{
    margin-right: 10px;
    font-size: 20px;
}

/*------Class for displaying Icons to none------*/
/*This class is added and removed from the font Awesome icons using js*/
.hide_icon{
    display: none !important;
}