.visual-table {
    border: 1px solid black;
    border-collapse: collapse;
}

.visual-table tr {
    padding: 0 60px;
}

.visual-table tr.red {
    background-color: var(--color-red) !important;
    color: white;
}

.visual-table tr.yellow {
    background-color: var(--color-yellow) !important;
}

.visual-table:not(.plain) tr:nth-child(odd) {
    background-color: var(--color-gray-1);
}

.visual-table caption {
    font-weight: bold;
    padding: 2px 5px;
    border: 1px solid black;
    border-bottom: none;
}

.visual-table th,
.visual-table td {
    padding: 2px 5px;
    border-right: 1px solid black;
    border-left: 1px solid black;
}

.visual-table.plain th,
.visual-table.plain td {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.visual-table caption,
.visual-table th {
    background-color: var(--color-theme-2);
}

.visual-table th:has(> .button),
.visual-table td:has(> .button) {
    text-align: center;
}

.visual-table th .button,
.visual-table td .button {
    margin: 3px;
}

/* Tabulator */

.tabulator {
    border: 0px;
}

.tabulator .tabulator-header:has(.tabulator-header-filter input) .tabulator-header-filter .edit-record-buttons-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.tabulator .tabulator-header a.edit-record:hover {
    background-color: var(--color-gray-2);
}

.tabulator .tabulator-row-header {
}

.tabulator-header-filter input:focus-within {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15) inset;
}

.tabulator .tabulator-header .tabulator-col {
    background-color: var(--color-theme-2) !important;
    border: 1px solid var(--color-gray-3);
    border-right: 0px;
    border-bottom: 0px
}

.tabulator .tabulator-header .tabulator-col:last-of-type {
    border-right: 1px solid var(--color-gray-3);
}

.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-row .tabulator-cell {
    padding: 10px;
}

.tabulator .tabulator-row .tabulator-cell {
    border-right: 0px;
}

/* rimuove bordo duplicato in fondo a tabella */
/* .tabulator .tabulator-header .tabulator-col:last-of-type, */
.tabulator .tabulator-row .tabulator-cell:last-of-type,
.tabulator .tabulator-header .tabulator-col[tabulator-field="locked"],
.tabulator .tabulator-row .tabulator-cell[tabulator-field="locked"] {
    border-right: 0px;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter {
    color: var(--color-gray-2);
}

/* .tabulator .tabulator-header .tabulator-col.tabulator-sortable:not([aria-sort=none]) .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    color: black;
} */

/* .tabulator .tabulator-row {
    cursor: default;
} */

.tabulator-col:has(img) .tabulator-col-title {
    display: none;
}

.tabulator-row.tabulator-row-even {
    background-color: var(--color-gray-1);
}

.tabulator.plain .tabulator-row.tabulator-row-even {
    background-color: white;
}

.tabulator .tabulator-row.red {
    color: white;
    background-color: var(--color-red) !important;
}

.tabulator .tabulator-row.yellow {
    background-color: var(--color-yellow) !important;
}

.tabulator .tabulator-row.gray {
    background-color: var(--color-gray-3) !important;
    color: white;
}

.tabulator .tabulator-row:hover {
    background-color: var(--color-gray-2) !important;
    color: black;
}

.tabulator .data-tree-control {
    --size: 6px;
    --color: var(--color-gray-2);

    font-size: 0;
    float: left;
    width: 0;
    height: 0;
    line-height: 0;
    margin-right: 5px;
}

.tabulator .tabulator-row:hover .data-tree-control {
    --color: black;
}

.tabulator .data-tree-control-expand {
    border: var(--size) solid transparent;
    border-left: var(--size) solid var(--color);
}

.tabulator .data-tree-control-collapse {
    margin-top: 5px;
    border: var(--size) solid transparent;
    border-top: var(--size) solid var(--color);
}

/* .tabulator-data-tree-branch {
    margin-right: 30px;
} */

.tabulator-tree-level-1 + .tabulator-tree-level-0 {
    border-top: 1px solid var(--color-gray-2);
}

.tabulator .tabulator-footer .tabulator-calcs-holder {
    /* font-weight: normal; */
    color: #333 !important;
}

.tabulator .tabulator-footer .tabulator-calcs-holder *:hover {
    color: #333 !important;
}

/* cellulare in verticale */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
}