.characterlist {
        background: #f5f5f5;
        }

        .characterlistBody {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        }

        .characterlistOptions {
        width: 20%;
        }

        .characterlist_filterButton {
        cursor: pointer;
        padding: 2px;
        transition: 0.3s;
        }

        .characterlist_filterButton:hover {
        background-color: #ddd;
        }

        .characterlist_filterButton.characterlist_filterChecked {
        background-color: #ccc;
        }

        .characterlist_sortDirection {
        margin-top: 10px;
        }

        .characterlist_sortButton,
        .characterlist_sortDirButton{
        cursor: pointer;
        padding: 2px;
        transition: 0.3s;
        }

        .characterlist_sortButton:hover,
        .characterlist_sortDirButton:hover {
        background-color: #ddd;
        }

        .characterlist_sortButton.characterlist_sortChecked,
        .characterlist_sortDirButton.characterlist_sortChecked{
        background-color: #ccc;
        }

        .characterlist_characters {
        width: 80%;
        }

        .characterlistTable_legend {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 5px;
        font-weight: bold;
        }

        .characterlistTable_legend-div {
        width: 100%;
        }

        .characterlist_character {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 5px;
        padding: 5px;
        box-sizing: border-box;
        }

        .characterlist_characterBit {
        width: 100%;
        }

        .characterlist_character.visible {
        display: flex;
        }