/**************/
/* DATA TABLE */
/**************/

/* title-hidden */

/* THINGS INSIDE OF A DATATABLE IN MODE REFLOW (<= 640PX) (XS) (PRECISA SER 640, 640.99  NÃO FUNCIONA) */
/* INSIDE OF REFLOW MODE */
@media only screen and (max-width: 640px) {
    /* title de cada coluna dentro do reflow */
    body .ui-widget.ui-datatable.ui-datatable-reflow .ui-datatable-data td[role="gridcell"].reflow-title-hidden > .ui-column-title,
    body .ui-widget.ui-datatable.ui-datatable-reflow .ui-datatable-data td[role="gridcell"].xs-title-hidden > .ui-column-title {
        display: none !important;
    }
}

/* OUTSIDE OF REFLOW MODE (SM and UP) */
@media only screen and (min-width: 641px) {
    /* title da coluna fora do reflow (da coluna de fato, nao de cada linha) */
    body .ui-widget.ui-datatable > .ui-datatable-tablewrapper > table > thead > tr > th.title-hidden > .ui-column-title {
        display: none !important;
    }
}

/* Small devices (portrait tablets and large phones, 641px and up) */
/* SM */
@media only screen and (min-width: 641px) {
    /* title da coluna fora do reflow (da coluna de fato, nao de cada linha) */
    body .ui-widget.ui-datatable > .ui-datatable-tablewrapper > table > thead > tr > th.sm-title-hidden > .ui-column-title {
        display: none !important;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
/* MD */
@media only screen and (min-width: 768px) {
    /* title da coluna fora do reflow (da coluna de fato, nao de cada linha) */
    body .ui-widget.ui-datatable > .ui-datatable-tablewrapper > table > thead > tr > th.md-title-hidden > .ui-column-title {
        display: none !important;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
/* LG */
@media only screen and (min-width: 992px) {
    /* title da coluna fora do reflow (da coluna de fato, nao de cada linha) */
    body .ui-widget.ui-datatable > .ui-datatable-tablewrapper > table > thead > tr > th.lg-title-hidden > .ui-column-title {
        display: none !important;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* XL */
@media only screen and (min-width: 1200px) {
    /* title da coluna fora do reflow (da coluna de fato, nao de cada linha) */
    body .ui-widget.ui-datatable > .ui-datatable-tablewrapper > table > thead > tr > th.xl-title-hidden > .ui-column-title {
        display: none !important;
    }
}

/* cores */

/* sobrescreve: "body .ui-datatable .ui-datatable-data>tr.ui-state-highlight" */
body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-odd:hover,
body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-odd.ui-state-hover,
body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-even:hover,
body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-even.ui-state-hover {
    background: #293641 !important;
}
/* sobrescreve: "body .ui-datatable .ui-datatable-data>tr.ui-state-hover" */
body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-odd:hover,
body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-odd.ui-state-hover,
body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-even:hover,
body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-even.ui-state-hover {
    background: #252525;
}
/* sobrescreve: "body .ui-datatable .ui-datatable-data>tr.ui-state-highlight" */
body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight:hover,
body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-state-hover {
    background: #293641;
}
/* sobrescreve: "body .ui-datatable .ui-datatable-data>tr.ui-state-hover" */
body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight):hover,
body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-state-hover {
    background: #252525;
}

/* outros */

body .ui-widget.ui-datatable.wrapper-border .ui-datatable-header {
    border: 0 !important;
}
body .ui-widget.ui-datatable.wrapper-border .ui-paginator.ui-paginator-bottom {
    border: 0 !important;
}
body .ui-widget.ui-datatable.wrapper-border .ui-datatable-data > tr:last-child > td {
    border: none !important;
}
body .ui-widget.ui-datatable.border-rounded {
    overflow: auto;
}

body .ui-widget.ui-datatable.without-header thead {
    display: none;
}

/* THINGS INSIDE OF A DATATABLE IN MODE REFLOW (<= 640PX) (XS) (PRECISA SER 640, 640.99  NÃO FUNCIONA) */
/* INSIDE OF REFLOW MODE */
@media only screen and (max-width: 640px) {

    body .ui-widget.ui-datatable.ui-datatable-reflow .ui-datatable-data > tr.ui-widget-content {
        display: flex;
        flex-wrap: wrap;
    }

    body .ui-widget.ui-datatable.ui-datatable-reflow .ui-datatable-data > tr.ui-widget-content td[role="gridcell"]:not(.ui-helper-hidden) {
        display: flex !important;
        flex-direction: column !important;
    }

    body .ui-widget.ui-datatable.ui-datatable-reflow td.ui-helper-hidden,
    body .ui-widget.ui-datatable.ui-datatable-reflow td.ui-helper-hidden {
        /*display: none !important;*/
    }

    body .ui-widget.ui-datatable.ui-datatable-reflow .ui-datatable-data > tr.ui-widget-content td[role="gridcell"] .ui-column-title {
        margin: 0 !important;
        padding: 0 !important;
        min-width: auto !important;
        font-weight: bold;
    }

}

/* OUTSIDE OF REFLOW MODE (SM and UP) */
@media only screen and (min-width: 641px) {

    body .ui-widget.ui-datatable th.ui-helper-hidden,
    body .ui-widget.ui-datatable td.ui-helper-hidden {
        display: table-cell !important; /* faz com que a coluna exista e seja exibida para dar o espaçamento correto */
    }

}

/* THINGS INSIDE OF A DATATABLE IN MODE REFLOW (<= 640PX) (XS) (PRECISA SER 640, 640.99  NÃO FUNCIONA) */
/* INSIDE OF REFLOW MODE */
@media only screen and (max-width: 640px) {

    body .ui-widget.ui-datatable th.ui-helper-hidden,
    body .ui-widget.ui-datatable td.ui-helper-hidden {
        display: none !important;
    }

    body .ui-widget.ui-datatable.ui-datatable-reflow .ui-datatable-data td[role="gridcell"].empty {
        display: none !important;
        padding: 0 !important;
    }

}

/****************************/
/* DATA TABLE ACTION COLUMN */
/****************************/

body .ui-widget.ui-datatable .ui-datatable-data > tr > td.action-column > .action-column-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--gap-size-2);
}

/* THINGS INSIDE OF A DATATABLE IN MODE REFLOW (<= 640PX) (XS) (PRECISA SER 640, 640.99  NÃO FUNCIONA) */
/* INSIDE OF REFLOW MODE */
@media only screen and (max-width: 640px) {

    body .ui-widget.ui-datatable .ui-datatable-data > tr > td.action-column > .action-column-wrapper {
        flex-wrap: wrap;
    }

}
/* OUTSIDE OF REFLOW MODE */
@media only screen and (min-width: 641px) {

    body .ui-widget.ui-datatable .ui-datatable-data > tr > td.action-column {
        transition: right .2s cubic-bezier(.51,0,.18,1), background-color .2s, color .2s;
        right: -2rem;
    }

    body .ui-widget.ui-datatable .ui-datatable-data > tr:hover > td.action-column {
        position: sticky;
        right: 0;
    }

    body .ui-widget.ui-datatable .ui-datatable-data > tr > td.action-column > .action-column-wrapper {
        justify-content: end;
    }

    /* CORES */

    /* 1 */
    /* LIGHT STRIPPED PAR/IMPAR SELECIONAVEL SELECIONADO */
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-odd:hover > td.action-column,
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-odd.ui-state-hover > td.action-column,
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-even:hover > td.action-column,
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-even.ui-state-hover > td.action-column {
        background: #e3f2fd !important;
    }
    /* 2 */
    /* LIGHT STRIPPED PAR/IMPAR SELECIONAVEL NAO-SELECIONADO */
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-odd:hover > td.action-column,
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-odd.ui-state-hover > td.action-column,
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-even:hover > td.action-column,
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-even.ui-state-hover > td.action-column {
        background: #e3f2fd !important;
    }
    /* 3 */
    /* LIGHT STRIPPED PAR NAO-SELECIONAVEL */
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-datatable-even:hover > td.action-column,
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-datatable-even.ui-state-hover > td.action-column {
        background: #fff !important;
    }
    /* 4 */
    /* LIGHT STRIPPED IMPAR NAO-SELECIONAVEL */
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-datatable-odd:hover > td.action-column,
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-datatable-odd.ui-state-hover > td.action-column {
        background: #fbfcfc !important;
    }
    /* 5 */
    /* LIGHT NAO-STRIPPED SELECIONAVEL SELECIONADO */
    body.light .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight:hover > td.action-column,
    body.light .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-state-hover > td.action-column {
        background: #e3f2fd !important;
    }
    /* 6 */
    /* LIGHT NAO-STRIPPED SELECIONAVEL NAO-SELECIONADO */
    body.light .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight):hover > td.action-column,
    body.light .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-state-hover > td.action-column {
        background: #e9ecef !important;
    }
    /* 7 */
    /* LIGHT NAO-STRIPPED NAO-SELECIONAVEL */
    body.light .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr:not(.ui-datatable-selectable):hover > td.action-column,
    body.light .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-state-hover > td.action-column {
        background: #fff !important;
    }

    /* 1 */
    /* DARK STRIPPED PAR/IMPAR SELECIONAVEL SELECIONADO */
    /* TODO: substituir em "body .ui-datatable .ui-datatable-data>tr.ui-state-highlight" */
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-odd:hover > td.action-column,
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-odd.ui-state-hover > td.action-column,
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-even:hover > td.action-column,
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-even.ui-state-hover > td.action-column {
        background: #293641 !important;
    }
    /* 2 */
    /* DARK STRIPPED PAR/IMPAR SELECIONAVEL NAO-SELECIONADO */
    /* TODO: substituir em "body .ui-datatable .ui-datatable-data>tr.ui-state-hover" */
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-odd:hover > td.action-column,
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-odd.ui-state-hover > td.action-column,
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-even:hover > td.action-column,
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-even.ui-state-hover > td.action-column {
        background: #252525 !important;
    }
    /* 3 */
    /* DARK STRIPPED PAR NAO-SELECIONAVEL */
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-datatable-even:hover > td.action-column,
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-datatable-even.ui-state-hover > td.action-column {
        background: #1e1e1e !important;
    }
    /* 4 */
    /* DARK STRIPPED IMPAR NAO-SELECIONAVEL */
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-datatable-odd:hover > td.action-column,
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-datatable-odd.ui-state-hover > td.action-column {
        background: #2b2b2b !important;
    }
    /* 5 */
    /* DARK NAO-STRIPPED SELECIONAVEL SELECIONADO */
    body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight:hover > td.action-column,
    body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-state-hover > td.action-column {
        background: #293641 !important;
    }
    /* 6 */
    /* DARK NAO-STRIPPED SELECIONAVEL NAO-SELECIONADO */
    body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight):hover > td.action-column,
    body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-state-hover > td.action-column {
        background: #252525 !important;
    }
    /* 7 */
    /* DARK NAO-STRIPPED NAO-SELECIONAVEL */
    body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr:not(.ui-datatable-selectable):hover > td.action-column,
    body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-state-hover > td.action-column {
        background: #1e1e1e !important;
    }

}

/***************************/
/* DATA TABLE FIXED-COLUMN */
/***************************/

body .ui-widget.ui-datatable .ui-datatable-data > tr > td.fixed-column {
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s;
}

/* OUTSIDE OF REFLOW MODE */
@media only screen and (min-width: 641px) {

    body .ui-widget.ui-datatable .ui-datatable-data > tr > td.fixed-column,
    body .ui-widget.ui-datatable thead > tr > th.fixed-column {
        position: sticky !important;
    }
    body .ui-widget.ui-datatable .ui-datatable-data > tr > td.fixed-column.fixed-left,
    body .ui-widget.ui-datatable thead > tr > th.fixed-column.fixed-left {
        left: 0 !important;
    }
    body .ui-widget.ui-datatable .ui-datatable-data > tr > td.fixed-column.fixed-right,
    body .ui-widget.ui-datatable thead > tr > th.fixed-column.fixed-right {
        right: 0 !important;
    }

    /* LIGHT STRIPPED PAR/IMPAR SELECIONAVEL SELECIONADO HOVER/NAO-HOVER */
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-odd > td.fixed-column,
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-even > td.fixed-column {
        background: #e3f2fd !important;
    }
    /* LIGHT STRIPPED PAR/IMPAR SELECIONAVEL NAO-SELECIONADO HOVER */
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-odd:hover > td.fixed-column,
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-odd.ui-state-hover > td.fixed-column,
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-even:hover > td.fixed-column,
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-even.ui-state-hover > td.fixed-column {
        background: #e9ecef !important;
    }
    /* LIGHT STRIPPED IMPAR SELECIONAVEL NAO-SELECIONADO NAO-HOVER */
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-odd > td.fixed-column {
        background: #fbfcfc !important;
    }
    /* LIGHT STRIPPED PAR SELECIONAVEL NAO-SELECIONADO NAO-HOVER */
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-even > td.fixed-column {
        background: #fff !important;
    }
    /* LIGHT STRIPPED PAR NAO-SELECIONAVEL */
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-datatable-even > td.fixed-column {
        background: #fff !important;
    }
    /* LIGHT STRIPPED IMPAR NAO-SELECIONAVEL */
    body.light .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-datatable-odd > td.fixed-column {
        background: #fbfcfc !important;
    }
    /* LIGHT NAO-STRIPPED SELECIONAVEL SELECIONADO HOVER/NAO-HOVER */
    body.light .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight > td.fixed-column {
        background: #e3f2fd !important;
    }
    /* LIGHT NAO-STRIPPED SELECIONAVEL NAO-SELECIONADO HOVER */
    body.light .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight):hover > td.fixed-column,
    body.light .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-state-hover > td.fixed-column {
        background: #e9ecef !important;
    }
    /* LIGHT NAO-STRIPPED SELECIONAVEL NAO-SELECIONADO NAO-HOVER */
    body.light .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight) > td.fixed-column {
        background: #fff !important;
    }
    /* LIGHT NAO-STRIPPED NAO-SELECIONAVEL HOVER/NAO-HOVER */
    body.light .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr:not(.ui-datatable-selectable) > td.fixed-column {
        background: #fff !important;
    }

    /* DARK STRIPPED PAR/IMPAR SELECIONAVEL SELECIONADO HOVER/NAO-HOVER */
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-odd > td.fixed-column,
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight.ui-datatable-even > td.fixed-column {
        background: #293641 !important;
    }
    /* DARK STRIPPED PAR/IMPAR SELECIONAVEL NAO-SELECIONADO HOVER */
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-odd:hover > td.fixed-column,
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-odd.ui-state-hover > td.fixed-column,
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-even:hover > td.fixed-column,
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-even.ui-state-hover > td.fixed-column {
        background: #252525 !important;
    }
    /* DARK STRIPPED IMPAR SELECIONAVEL NAO-SELECIONADO NAO-HOVER */
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-odd > td.fixed-column {
        background: #2b2b2b !important;
    }
    /* DARK STRIPPED PAR SELECIONAVEL NAO-SELECIONADO NAO-HOVER */
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-datatable-even > td.fixed-column {
        background: #1e1e1e !important;
    }
    /* DARK STRIPPED PAR NAO-SELECIONAVEL */
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-datatable-even > td.fixed-column {
        background: #1e1e1e !important;
    }
    /* DARK STRIPPED IMPAR NAO-SELECIONAVEL */
    body.dark .ui-widget.ui-datatable.ui-datatable-striped .ui-datatable-data > tr:not(.ui-datatable-selectable).ui-datatable-odd > td.fixed-column {
        background: #2b2b2b !important;
    }
    /* DARK NAO-STRIPPED SELECIONAVEL SELECIONADO HOVER/NAO-HOVER */
    body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable.ui-state-highlight > td.fixed-column {
        background: #293641 !important;
    }
    /* DARK NAO-STRIPPED SELECIONAVEL NAO-SELECIONADO HOVER */
    body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight):hover > td.fixed-column,
    body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight).ui-state-hover > td.fixed-column {
        background: #252525 !important;
    }
    /* DARK NAO-STRIPPED SELECIONAVEL NAO-SELECIONADO NAO-HOVER */
    body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr.ui-datatable-selectable:not(.ui-state-highlight) > td.fixed-column {
        background: #1e1e1e !important;
    }
    /* DARK NAO-STRIPPED NAO-SELECIONAVEL */
    body.dark .ui-widget.ui-datatable:not(.ui-datatable-striped) .ui-datatable-data > tr:not(.ui-datatable-selectable) > td.fixed-column {
        background: #1e1e1e !important;
    }

}

/***************/
/* ROW TOGGLER */
/***************/

/* THINGS INSIDE OF A DATATABLE IN MODE REFLOW (<= 640PX) (XS) (PRECISA SER 640, 640.99  NÃO FUNCIONA) */
/* INSIDE OF REFLOW MODE */
@media only screen and (max-width: 640px) {

    body .ui-widget.ui-datatable .ui-datatable-data tr.ui-widget-content .ui-row-toggler.ui-icon.ui-icon-circle-triangle-s,
    body .ui-widget.ui-datatable .ui-datatable-data tr.ui-widget-content .ui-row-toggler.ui-icon.ui-icon-circle-triangle-e {
        width: auto !important;
        background: var(--primary-color) !important;
        color: var(--primary-color-text) !important;
        border-radius: var(--border-radius) !important;
    }

    body .ui-widget.ui-datatable .ui-datatable-data tr.ui-widget-content .ui-row-toggler.ui-icon.ui-icon-circle-triangle-s::before,
    body .ui-widget.ui-datatable .ui-datatable-data tr.ui-widget-content .ui-row-toggler.ui-icon.ui-icon-circle-triangle-e::before {
        font-family: var(--font-family) !important;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem !important;
    }

    /* ABERTO */
    body .ui-widget.ui-datatable .ui-datatable-data tr.ui-widget-content .ui-row-toggler.ui-icon.ui-icon-circle-triangle-s::before {
        content: "Fechar" !important;
    }
    /* FECHADO */
    body .ui-widget.ui-datatable .ui-datatable-data tr.ui-widget-content .ui-row-toggler.ui-icon.ui-icon-circle-triangle-e::before {
        content: "Expandir" !important;
    }

}

/* OUTSIDE OF REFLOW MODE */
@media only screen and (min-width: 641px) {

    body .ui-widget.ui-datatable .ui-row-toggler.ui-icon.ui-icon-circle-triangle-s,
    body .ui-widget.ui-datatable .ui-row-toggler.ui-icon.ui-icon-circle-triangle-e {
        background: none !important;
        text-indent: 0;
    }
    /* SUBSTITUICAO DO ICONE DEFAULT PELO MDI */
    body .ui-widget.ui-datatable .ui-row-toggler.ui-icon.ui-icon-circle-triangle-s::before,
    body .ui-widget.ui-datatable .ui-row-toggler.ui-icon.ui-icon-circle-triangle-e::before {

        /* mesma coisa que a classe .mdi faz */
        display: inline-block;
        font: normal normal normal 24px/1 "Material Design Icons";
        font-size: 1rem;
        text-rendering: auto;
        line-height: inherit;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        /* mesma coisa que .mds-crevron-right faz */
        content: "\F0142" !important;

        transition: transform 0.6s ease-in-out;

    }

    /* fechado */
    body .ui-widget.ui-datatable .ui-row-toggler.ui-icon.ui-icon-circle-triangle-e {
    }
    body .ui-widget.ui-datatable .ui-row-toggler.ui-icon.ui-icon-circle-triangle-e::before {
        transform: rotate(0deg);
    }

    /* aberto */
    body .ui-widget.ui-datatable .ui-row-toggler.ui-icon.ui-icon-circle-triangle-s {
    }
    body .ui-widget.ui-datatable .ui-row-toggler.ui-icon.ui-icon-circle-triangle-s::before {
        transform: rotate(90deg);
    }

}

/**********/
/* DIALOG */
/**********/

body .ui-dialog .ui-dialog-titlebar {
    border-bottom-color: var(--surface-border);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding: 1rem !important;
}

body .ui-dialog .ui-dialog-footer {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--surface-border);
    padding: 1rem !important;
}

/* THINGS INSIDE OF A DATATABLE IN MODE REFLOW (<= 640PX) (XS) (PRECISA SER 640, 640.99  NÃO FUNCIONA) */
/* REFLOW */
@media (max-width: 640px) {
    body .ui-widget.ui-datatable.ui-datatable-reflow.reflow-datatable-footer-visible > .ui-datatable-tablewrapper tfoot td {
        display: grid !important;
    }
}

/* DIALOG */
body .ui-widget.ui-dialog > .ui-dialog-footer {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

body .ui-widget.ui-dialog > .ui-dialog-footer > div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gap-size-4);
}

/* filho direto de <f:facet name="footer"> podendo ser ou div, ou span */
body .ui-widget.ui-dialog > .ui-dialog-footer > div > div,
body .ui-widget.ui-dialog > .ui-dialog-footer > div > span {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-size-4);
}
body .ui-widget.ui-dialog > .ui-dialog-footer > div > div:not(.right),
body .ui-widget.ui-dialog > .ui-dialog-footer > div > span:not(.right) {
    justify-content: start;
}
body .ui-widget.ui-dialog > .ui-dialog-footer > div > div.right,
body .ui-widget.ui-dialog > .ui-dialog-footer > div > span.right {
    justify-content: end;
}

/* Small devices (portrait tablets and large phones, 641px and up) */
/* XS */
@media only screen and (max-width: 640.99px) {

    /*    body .ui-widget.ui-dialog > .ui-dialog-footer [class^="button-container-"] {
            width: 100%;
        }
    
        body .ui-widget.ui-dialog > .ui-dialog-footer [class^="button-container-"] .ui-widget.ui-button {
        }*/

    /* 1 ITENS */
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-1 .ui-widget.ui-button {
        --flex-items: 1;
        width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--gap-size-4)));
    }

    /* 2 ITENS */
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-2 .ui-widget.ui-button {
        --flex-items: 2;
        width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--gap-size-4)));
    }

    /* 3 ITENS */
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-3 .ui-widget.ui-button {
        --flex-items: 3;
        width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--gap-size-4)));
    }

    /* 4 ITENS */
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-4 .ui-widget.ui-button {
        --flex-items: 2;
        width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--gap-size-4)));
    }

    /* 5 ITENS */
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-5 .ui-widget.ui-button:nth-child(1),
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-5 .ui-widget.ui-button:nth-child(2) {
        --flex-items: 2;
        width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--gap-size-4)));
    }
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-5 .ui-widget.ui-button:nth-child(3),
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-5 .ui-widget.ui-button:nth-child(4),
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-5 .ui-widget.ui-button:nth-child(5) {
        --flex-items: 3;
        width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--gap-size-4)));
    }

    /* 6 ITENS */
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-6 .ui-widget.ui-button {
        --flex-items: 3;
        width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--gap-size-4)));
    }

    /* 7 ITENS */
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-7 .ui-widget.ui-button:nth-child(1),
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-7 .ui-widget.ui-button:nth-child(2),
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-7 .ui-widget.ui-button:nth-child(3),
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-7 .ui-widget.ui-button:nth-child(4) {
        --flex-items: 2;
        width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--gap-size-4)));
    }
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-7 .ui-widget.ui-button:nth-child(5),
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-7 .ui-widget.ui-button:nth-child(6),
    body .ui-widget.ui-dialog > .ui-dialog-footer .button-container-7 .ui-widget.ui-button:nth-child(7) {
        --flex-items: 3;
        width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--gap-size-4)));
    }

}

/*========================*/
/* ======== PANEL ======= */
/*========================*/

body .ui-widget.ui-panel {
    display: flex;
    flex-direction: column;
}

body .ui-widget.ui-panel > .ui-panel-titlebar {
    flex-grow: 0 !important;
}

body .ui-widget.ui-panel > .ui-panel-content {
    flex-grow: 1 !important;
}

/*==================================*/
/* ======== INPUT TEXT AREA ======= */
/*==================================*/

body .ui-widget.ui-inputtextarea {
    min-height: 150px;
}

/*==============================*/
/* ======= NEGATE UPPER ======= */
/*==============================*/

input[type="text"]:not(.fn-negate-upper) {
    text-transform: uppercase;
}
/* exceções */
body .ui-widget.ui-chips.fn-negate-upper .ui-chips-input-token > input {
    text-transform: none !important;
}
body .ui-widget.ui-autocomplete-input.fn-negate-upper {
    text-transform: none !important;
}

/*==================================*/
/* ======== SELECTONEBUTTON ======= */
/*==================================*/

body .ui-widget.ui-selectonebutton {
    padding: 0 !important;
}

/* Extra small devices (phones, 640.99px and down) */
/* XS */
@media only screen and (max-width: 640.99px) {
    body .ui-widget.ui-selectonebutton {
        display: flex;
        flex-direction: column;
    }
}

/*=============================*/
/* ======== DATEPICKER ======= */
/*=============================*/

body.light .ui-widget.ui-datepicker > .ui-datepicker-buttonpane button.ui-button,
body.light .ui-widget.ui-datepicker > .ui-datepicker-buttonbar button.ui-button {
    /* mesmos atributos do .ui-button-outlined */
    background-color: rgba(0, 0, 0, 0);
    color: #2196f3;
    border: 1px solid;
}
body.light .ui-widget.ui-datepicker > .ui-datepicker-buttonpane button.ui-button:hover,
body.light .ui-widget.ui-datepicker > .ui-datepicker-buttonbar button.ui-button:hover {
    /* mesmos atributos do .ui-state-hover */
    background: rgba(33, 150, 243, .04);
    color: #2196f3;
    border: 1px solid;
}
body.light .ui-widget.ui-datepicker > .ui-datepicker-buttonpane button.ui-button:focus,
body.light .ui-widget.ui-datepicker > .ui-datepicker-buttonbar button.ui-button:focus {
    /* mesmos atributos do .ui-state-focus */
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 .2em #a6d5fa;
}
body.light .ui-widget.ui-datepicker > .ui-datepicker-buttonpane button.ui-button:active,
body.light .ui-widget.ui-datepicker > .ui-datepicker-buttonbar button.ui-button:active {
    /* mesmos atributos do .ui-state-active */
    background: rgba(33, 150, 243, .16);
    color: #2196f3;
    border: 1px solid;
}

body.dark .ui-widget.ui-datepicker > .ui-datepicker-buttonpane button.ui-button,
body.dark .ui-widget.ui-datepicker > .ui-datepicker-buttonbar button.ui-button {
    /* mesmos atributos do .ui-button-outlined */
    background-color: rgba(0, 0, 0, 0);
    color: #90caf9;
    border: 1px solid;
}
body.dark .ui-widget.ui-datepicker > .ui-datepicker-buttonpane button.ui-button:hover,
body.dark .ui-widget.ui-datepicker > .ui-datepicker-buttonbar button.ui-button:hover {
    /* mesmos atributos do .ui-state-hover */
    background: rgba(144, 202, 249, .04);
    color: #90caf9;
    border: 1px solid;
}
body.dark .ui-widget.ui-datepicker > .ui-datepicker-buttonpane button.ui-button:focus,
body.dark .ui-widget.ui-datepicker > .ui-datepicker-buttonbar button.ui-button:focus {
    /* mesmos atributos do .ui-state-focus */
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 1px #b1dafb;
}
body.dark .ui-widget.ui-datepicker > .ui-datepicker-buttonpane button.ui-button:active,
body.dark .ui-widget.ui-datepicker > .ui-datepicker-buttonbar button.ui-button:active {
    /* mesmos atributos do .ui-state-active */
    background: rgba(144, 202, 249, .16);
    color: #90caf9;
    border: 1px solid;
}

body .ui-widget.ui-datepicker .ui-datepicker-buttonpane .ui-g-6:first-child,
body .ui-widget.ui-datepicker .ui-datepicker-buttonbar .ui-g-6:first-child {
    padding-left: 0;
    padding-bottom: 0;
}

body .ui-widget.ui-datepicker .ui-datepicker-buttonpane .ui-g-6:last-child,
body .ui-widget.ui-datepicker .ui-datepicker-buttonbar .ui-g-6:last-child {
    padding-right: 0;
    padding-bottom: 0;
}

body .ui-widget.ui-datepicker .ui-datepicker-buttonpane,
body .ui-widget.ui-datepicker .ui-datepicker-buttonbar {
    border-top-width: 1px;
}

/*=============================*/
/* ======== ALEATORIOS ======= */
/*=============================*/

body textarea.ui-widget.ui-inputtextarea {
    resize: vertical;
}

/*==========================*/
/* ======== COUNTER ======= */
/*==========================*/

.input-counter {
    font-size: 0.75rem;
    opacity: 0.7;
}

/*==========================*/
/* ======== OVERLAY ======= */
/*==========================*/

body .ui-widget-overlay {
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(2px);
}