/************************************************************
 *  Faceclick styles. You are encouraged to modify this to
 *  match your page. :-)
 *  
 *   #fc_popup:
 *     +-----------------+
 *     | A B C D [search]|<-- #fc_filters
 *     +-----------------+
 *     |+---------------+|
 *     || X Y Z ...     |<--- #fc_list_scrollbox
 *     ||               ||
 *     |+---------------+|
 *     +-----------------+
 *   
 ************************************************************/
#fc_popup {
    position: absolute;
    width: 420px;
    height: 250px;
    padding: 0;
    border: 2px solid #6c71c4;
    border-radius: 10px;
    background: #002b36;
    filter: drop-shadow(10px 10px 10px #000);
}
#fc_filters {
    background: #6c71c4;
    display: flex;
    gap: 5px;
    border-radius: 6px 6px 0 0;
    height: 45px;
}
#fc_filters a {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 6px 6px 0 0;
}
#fc_filters a:hover {
    background: #9298f0;
}
#fc_filters a.selected {
    background: #002b36;
}
#fc_filters input { /* search box */
    width: 180px;
    flex: 2;
    background: #303255;
    color: inherit;
    padding: 5px;
    border: 1px solid #6c71c4;
    border-radius: 5px;
    font-family: inherit;
    font-size: inherit;
    margin: 4px;
}
#fc_filters input:focus {
    outline: none;
}
#fc_list_scrollbox {
    height: 205px;
    overflow-y: scroll;
#fc_emoji_list, #fc_emoji_list li {
    margin: 0; padding: 0;
}
#fc_emoji_list li {
    list-style: none;
    display: inline-block;
}
#fc_emoji_list a {
    width: 50px;
    height: 50px;
    font-size: 30px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
#fc_emoji_list a:hover {
    background-color: #17738a;
}