.expanded .title h3:after {
    content: "\E15B";
}

.collapsed .title h3:after {
    content: "\E145";
}

.selected .title h3:after {
    content: "\E5CD";
}

.title {
    padding: 10px 0;
    cursor: pointer;
    position: relative;
}

.title h3 {
    color: #36b6b8;
    padding: 5px 0;
    margin: 0;
    font-size: 18px;
    font-weight: bolder;
}

.title h3:after {
    font-family: 'Material Icons';
    position: absolute;
    right: 0;
    font-size: 30px;
}

.collapsed .title,
.selected .title {
    border-bottom: 1px solid #e2e2e2;
}

.list {
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 10px;
    margin-top: -10px;
    position: relative;
    max-height: 300px;
    overflow-y: auto;
}

.list ul {
    margin: 0;
    padding: 5px 5px 5px 15px;
    list-style-type: none;
}

.list li {
    cursor: pointer;
    margin: 0;
    padding: 3px;
}

.list li:hover {
    color: #ffd841;
}

.showAll {
    text-align: right;
}