.gfp-header{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    border: 1px solid #454545;
}

.gfp-header > div{
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
}

.gfp-header > div:hover{
    background: #f8f8f8;
}


.gfp-list{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 250px;
    overflow: auto;
    border-bottom: 1px solid #efefef;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;

}

.gfp-list li{
    list-style: none;
    display: inline-block;
    vertical-align: middle;
    min-width: 160px;
    flex-basis: 50%;
    flex-grow: 1;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #efefef;
}

.gfp-list li:hover{
    background: #f8f8f8;
}

.gfp-active, .gfp-active:hover{
    background: #454545 !important;
    color: #fff !important;
}

.gfp-font-variants{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;

    border: 1px solid #454545;
}

.gfp-variant{
    padding: 10px;
    cursor: pointer;
}

.gfp-variant:hover{
    background: #f8f8f8;
}