.locationsTable td {
    grid-template-columns: 1fr 1fr !important;
}

th.tableCounter,
.tableCounter:before {
    font-family: 'Font Awesome';
    font-weight: 600;
}

@media screen and (max-width: 736px) {
    table.responsiveTable td:before {
        content: attr(data-title);
        display: flex;
        align-items: center;
        justify-content: left;
    }
    table.responsiveTable tbody {
        display: grid;
        grid-gap: 20px;
    }
    table.responsiveTable tr {
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 10px;
        display: block;
    }
    /* Don't display the first item, since it is used to display the header for tabular layouts*/
    table.responsiveTable:not(.sortable) thead {
        display: none;
    }
     table.responsiveTable.sortable thead {
         display: block;
     }

     table.responsiveTable.sortable thead tr {
         display: flex;
         flex-direction: column;
     }
    /* Attribute name for first column, and attribute value for second column. */
    table.responsiveTable td {
        display: grid;
        grid-template-columns: minmax(0, 30%) 1fr;
        grid-gap: 0.5em;
        margin-block-start: 0.5em;
    }
    table.responsiveTable tr td:first-child {
        margin-block-start: 0;
    }
}

.locationsTable {
    border-block-start: solid 1px #ddd;
    border-inline-end: solid 1px #ddd;
}


/* 1 Column Card Layout */

@media screen and (max-width:580px) {
    table.responsiveTable {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* Tabular Layout */

@media screen and (min-width: 737px) {
    .tableCounter {
        text-align: center;
        width: 3em;
    }
    table.responsiveTable td[data-title="QTY"] {
        min-width: 5em;
    }
    table.responsiveTable td[data-title="Nume"],
    table.responsiveTable td[data-title="DENUMIRE"],
    table.responsiveTable td[data-title="COD"],
    table.responsiveTable td[data-title="Cod"] {
        word-break: break-all;
    }
    /* The maximum column width, that can wrap */
    table.responsiveTable tr {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        border-inline-start: solid 1px #ddd;
        border-block-end: solid 1px #ddd;
    }
    .locationsTable tr td:nth-child(2) {
        text-align: right;
    }
    /* In order to maximize row lines, only display one line for a cell */
    table.responsiveTable td {
        border-inline-start: 1px solid #ddd;
        padding: 0.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .locationsTable tr {
        display: table-row !important;
    }
    .locatiiTable tr {
        grid-template-columns: 0.2fr 1.5fr 1.2fr 1fr 0.5fr !important;
    }
    table.responsiveTable tr td.centered {
        vertical-align: middle;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    table.responsiveTable tr td:first-child {
        border: none;
    }
    table.responsiveTable th {
        background-color: #54b7ce;
        color: #fff;
        border: 1px solid #ddd;
        padding: 0.5rem 0;
    }
    table.responsiveTable {
        border-collapse: collapse;
    }
    table.responsiveTable tbody tr:hover {
        background-color: rgb(200, 227, 252);
    }
    /* Center header labels */
}

.full-width {
    width: 100%;
}

.half-width {
    width: 50%;
}