#content .dataTable {
    max-width: 100% !important;
}

.dt-end {
    display: flex !important;
    flex-direction: row-reverse !important;
}

.table-ico {
    text-align: center !important;
    font-size: 20px !important;
    vertical-align: middle !important;
    width: 100%;
    display: block;
}

#content .dataTable thead tr th {
    text-align: center !important;
    vertical-align: middle;
    font-size: 12px;
    background: var(--info-color);
    border: 1px solid #fff;
    color: #fff;
    padding: 5px;
    word-break: normal;      /* Використовує стандартне правило перенесення */
    overflow-wrap: normal;   /* Забезпечує перенесення рядка за нормальних умов */
    hyphens: none;
}


#content .dataTable thead tr {
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 12px;
    background-color: var(--info-color);
    color: #fff;
    padding: 5px;
    border: 1px solid #fff;
}

#content .dataTable tbody tr {
    vertical-align: middle !important;
    font-size: 12px;
    padding: 5px !important;
    border: 1px dashed var(--grey-border-color);
}

#content .dataTable tbody tr td {
    vertical-align: middle !important;
    font-size: 14px;
    padding: 5px !important;
    border: 1px dashed var(--grey-border-color);
    line-height: 1.2;
    cursor: pointer;
    color: var(--text-color);
}

#content .dataTable tbody tr:hover {
    background-color: var(--info-bg-color) !important;
}
.modal-cel-type-bool {
    width: 68px !important;
}

.modal-cel-type-date {
    width: 90px !important;
}


.modal-row-status-Ready {
    background-color: var(--warning-bg-color) !important;
    color: var(--grey-color) !important;
}

.modal-row-status-inProduction {
    background-color: var(--warning-bg-color) !important;
    color: var(--succes-color) !important;
}

.modal-row-status-Planned {
    background-color: var(--success-bg-color) !important;
}

.modal-row-status-inBuffer {
    background-color: var(--danger-bg-color) !important;
}

.dt-button {
    padding: 0 14px!important;
}