/* ================================== */
/*              Filters               */
/* ================================== */

.filter_box {
    padding: var(--padding-1);
}

.filter_box .filter {
    padding: var(--margin) 0;
}

.filter_box p.filter_label {
    display: inline-block;
    min-width: 70px;    
    opacity: var(--opacity);
    /* border-right: 1px solid var(--color-2); */
    margin-right: var(--margin)
}

.filter button {
    color: var(--color);
    background-color: transparent;
    border: 1px solid #333;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    opacity: var(--opacity);
    transition: var(--transition);
}

.filter button.clear_filter {
    border: none;
}

.filter button.active {
    opacity: 1.0;
    color: #fff;
    background-color: #444;
}

.filter button span {
    vertical-align: middle;
    font-size: 1.2em;
}

/* ================================== */
/*               Table                */
/* ================================== */

.table_box {
    margin: 0 var(--padding-1);
    border: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

table {
    width: 100%;
    /* margin: 0 auto; */
    border-collapse: collapse;

}

table tr.data_row {
    cursor: pointer;
}

table tr.data_row:hover td {
    color: var(--table-bg-0);
    background-color: var(--table-color);
}

table td {
    line-height: inherit;
    padding: var(--table-padding);
    white-space: nowrap;
    max-width: 300px;
    overflow: hidden;
    background-color: var(--table-bg-0);
}

table tr.odd_row td {
    background-color: var(--table-bg-1);
}

table tr.data_headers td {
    color: var(--table-headers-color);
    background-color: var(--table-headers-bg);
}

table tr.data_headers td.active {
    color: var(--color);
}

table tr.data_headers td .label {
    padding-right: var(--margin);
}

table td.label_cell {
    position: relative;
    cursor: pointer;
}

table td.key__categories,
table td.key__phase,
table td.key_text,
table td.key_date {
    display: none;
}

table td.key_id {
    padding-left: calc(var(--table-padding) * 2.0);
}
table td.key_addres {
    padding-right: calc(var(--table-padding) * 2.0);
}

table td.key_area {
    text-align: right;
}

table .sort_toggle {
    color: var(--color-accent);
}

table .sort_toggle.hidden {
    color: var(--bg-2);
}