.cpanel {
    margin: 20px 0;
}

.cpanel .cpanel-top {
    background: #9aacb6;
    cursor: pointer;
    position: relative;
    height: 1px;
    display: flex;
    align-items: center;

}

.cpanel-top::before,
.cpanel-top::after {
    font-family: 'Font Awesome 6 Pro';
    content: "\f078";
    border-radius: 40px;
    position: absolute;
    left: calc(50% - 20px);
    top: -20px;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #0f4880;
    color: white;
    opacity: 0.6;
}

.cpanel-top.active::after{
    content: "\f077";
}

.cpanel-filter .cpanel-top::before,
.cpanel-filter .cpanel-top::after {
    content: "\e0ad";
}


.cpanel-top::before{
    background: white;
    color: white;
    opacity: 1;
}

.cpanel-top:hover::after{
    opacity: 1;
}

.cpanel-top.active{
    border-bottom: transparent;
}



.cpanel .cpanel-content {
    border: none;
    display: none;
}