.filter-table {
    width: 100%;
}

.filter-table-scrollable {
    max-width: 100%;
    overflow-x: auto;
}

.filter-table tr {

}

.filter-table td, .filter-table th {
    font-size: 0.9em;
    text-align: center;
    vertical-align: middle;
    border-radius: 0.75em;
    padding: 15px 13px;
}

.filter-table th {
    white-space: nowrap;
    background-color: #ee9ddc;
    border: 1px solid #ffffff;
    color: #2e2836b2;
    cursor: pointer;
}

.filter-table td {
    background-color: #ffffff;
    border: 1px solid #ee9ddc;
}

.filter-table th.order-asc, .filter-table th.order-desc {
    padding: 15px 5px;
    color: var(--text-color);
}

.filter-table th.order-asc:after {
    content: "↑";
    display: inline-block;
    width: 16px;
}

.filter-table th.order-desc:after {
    content: "↓";
    display: inline-block;
    width: 16px;
}

.filter-table .filter-table-left {
    text-align: left;
}

.filter-table .filter-table-center {
    text-align: right;
}

.filter-table-no-wrap {
    white-space: nowrap;
}

.filter-table-buttons {
    margin-top: 1em;
}

.filter-table-show-btn, .filter-table-collapse-btn {
    cursor: pointer;
    display: inline-grid;
    grid-template-columns: 1.5em 1fr;
    align-items: center;
}

.filter-table-collapse-btn {
    margin-right: 1em;
}

.filter-table-btn-icon {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: #ee9ddc80;
    border-radius: 100%;
    position: relative;
}

.filter-table-btn-icon:before, .filter-table-btn-icon:after {
    content: "";
    display: block;
    background-color: #c239a3;
    width: 2px;
    height: 30%;
    position: absolute;
}

.filter-table-btn-icon:before {
    left: calc(28% + 2px);
}

.filter-table-btn-icon:after {
    right: calc(28% + 2px);
}

.filter-table-show-btn .filter-table-btn-icon:before {
    top: 35%;
    transform: rotate(-45deg);
}

.filter-table-show-btn .filter-table-btn-icon:after {
    top: 35%;
    transform: rotate(45deg);
}

.filter-table-collapse-btn .filter-table-btn-icon:before {
    bottom: 35%;
    transform: rotate(45deg);
}

.filter-table-collapse-btn .filter-table-btn-icon:after {
    bottom: 35%;
    transform: rotate(-45deg);
}

@media (max-width: 767px) {
    .filter-table td, .filter-table th {
        font-size: 0.75em;
    }
}