/* Mobile view tabele ↓ */

th {
    cursor: pointer;
}

table tbody tr:hover td {
    background-color: rgba(0, 0, 0, 0.1);
    transition: 0.5s;
}

.table tbody tr td {
    font-size: .7rem;
    font-weight: 400;
    vertical-align: middle !important;
}

@media only screen and (max-width: 991px) {
    #pgprinc.container-fluid {
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    #pgprinc div.flex-center {
        margin-left: 3px !important;
        margin-right: 3px !important;
    }

    .dataTables_paginate {
        max-width: 90vw;
        overflow: hidden;
    }

    /* Force table to not be like tables anymore */
    .table table,
    .table thead,
    .table tbody,
    .table th,
    .table td,
    .table tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table-bordered {
        border: 0px;
    }

    .table tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }

    .table td {
        /* Behave  like a "row" */
        border: 1px solid #ddd;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: center;
        background: linear-gradient(to right, rgba(40, 167, 69, 0.8) 48%, rgba(255, 255, 255, 0.2) 0%);
        min-height: 1rem;
        padding-top: 0.1rem !important;
        padding-bottom: 0.1rem !important;
        /* word-wrap: break-word;
        word-break: break-all;
        white-space: normal; */
    }

    .table td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 15%;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: center;
        font-weight: 400;
        color: white;
        font-size: .7rem;
        text-overflow: ellipsis;
        overflow: hidden;
        content: attr(placeholder);
    }
}

/* Mobile view tabele ↑ */

/* Colorare row-uri datatables */
/* RED ROW */
tr.even:has(div.redRow) {
    --mdb-table-bg: rgba(255, 0, 0, .3) !important;
    transition: .5s;
}

tr.odd:has(div.redRow) {
    --mdb-table-bg: rgba(255, 0, 0, .35) !important;
    transition: .5s;
}

tr:has(div.redRow):hover {
    --mdb-table-bg: rgba(255, 0, 0, .4) !important;
    background-color: rgba(255, 0, 0, .4) !important;
    transition: .5s;
}

/* GREEN ROW */
tr.odd:has(div.greenRow) {
    --mdb-table-bg: rgba(0, 255, 0, .3) !important;
    transition: .5s;
}

tr.even:has(div.greenRow) {
    --mdb-table-bg: rgba(0, 255, 0, .35) !important;
    transition: .5s;
}

tr:has(div.greenRow):hover {
    --mdb-table-bg: rgba(0, 255, 0, .4) !important;
    background-color: rgba(0, 255, 0, .4) !important;
    transition: .5s;
}

/* YELLOW ROW */
tr.even:has(div.yellowRow) {
    --mdb-table-bg: rgba(255, 255, 0, .3) !important;
    transition: .5s;
}

tr.odd:has(div.yellowRow) {
    --mdb-table-bg: rgba(255, 255, 0, .35) !important;
    transition: .5s;
}

tr:has(div.yellowRow):hover {
    --mdb-table-bg: rgba(255, 255, 0, .4) !important;
    background-color: rgba(255, 255, 0, .4) !important;
    transition: .5s;
}

/* BLUE ROW */
tr.even:has(div.blueRow) {
    --mdb-table-bg: rgba(51, 51, 255, .3) !important;
    transition: .5s;
}

tr.odd:has(div.blueRow) {
    --mdb-table-bg: rgba(51, 51, 255, .35) !important;
    transition: .5s;
}

tr:has(div.blueRow):hover {
    --mdb-table-bg: rgba(51, 51, 255, .4) !important;
    background-color: rgba(51, 51, 255, .4) !important;
    transition: .5s;
}

/* ORANGE ROW */
tr.even:has(div.orangeRow) {
    --mdb-table-bg: rgba(255, 102, 0, .3) !important;
    transition: .5s;
}

tr.odd:has(div.orangeRow) {
    --mdb-table-bg: rgba(255, 102, 0, .35) !important;
    transition: .5s;
}

tr:has(div.orangeRow):hover {
    --mdb-table-bg: rgba(255, 102, 0, .4) !important;
    background-color: rgba(255, 102, 0, .4) !important;
    transition: .5s;
}

/* PURLE ROW */
tr.even:has(div.purpleRow) {
    --mdb-table-bg: rgba(102, 0, 255, .3) !important;
    transition: .5s;
}

tr.odd:has(div.purpleRow) {
    --mdb-table-bg: rgba(102, 0, 255, .35) !important;
    transition: .5s;
}

tr:has(div.purpleRow):hover {
    --mdb-table-bg: rgba(102, 0, 255, .4) !important;
    background-color: rgba(102, 0, 255, .4) !important;
    transition: .5s;
}

/* GREY ROW */
tr.even:has(div.greyRow) {
    --mdb-table-bg: rgba(115, 115, 115, 0.3) !important;
    transition: .5s;
}

tr.odd:has(div.greyRow) {
    --mdb-table-bg: rgba(115, 115, 115, .35) !important;
    transition: .5s;
}

tr:has(div.greyRow):hover {
    --mdb-table-bg: rgba(115, 115, 115, .4) !important;
    background-color: rgba(115, 115, 115, .4) !important;
    transition: .5s;
}