/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
any
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, f
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tfoot,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: 'Roboto', sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}


ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

/*table {
    border-collapse: collapse;
    border-spacing: 0;
}*/

a img {
    border: none;
}

a.imagem {
    text-decoration: none;
}

button {
    white-space: nowrap; /* Impede a quebra de linha */
    overflow: hidden; /* Esconde o texto que transborda */
    text-overflow: ellipsis; /* Adiciona "..." no final do texto cortado */
}


h1, h2, h3, h4, h5, h6, p, input, textarea, select, label, span, button {
    font-family: Roboto, sans-serif;
}

input, select, textarea {
    font-size: 16px;
    height: 35px;
    width: 100%;
    /* margin-left: 10px;*/
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid #42a5f5 !important;
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap; /* Impede a quebra de linha */
    overflow: hidden; /* Esconde o texto que transborda */
    text-overflow: ellipsis; /* Adiciona "..." no final do texto cortado */
}



    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        /* display: none; <- Crashes Chrome on hover */
        -webkit-appearance: none;
        margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    }



h1, h2, h3, h4, h6 {
    font-size: 14px;
    /* margin-left: 10px;*/
    margin-top: 5px;
}

label {
    font-size: 14px;
    /* margin-left: 10px;*/
    margin-top: 5px;
    /* Propriedades para o ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Outras propriedades importantes para que funcione */
    display: block; /* Ou 'inline-block' */
    max-width: 100%;
}

button {
    width: 100%;
    height: 30px;
    border-radius: 5px;
    border: 1px solid;
    margin-top: 5px;
    cursor: pointer;
}



/*@media (max-width: 600px) {

      
    
    
    table, thead, tbody, th, td, tr {
        display: block;
    }

        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    td {*/
        /* Define o alinhamento do texto para a célula em telas pequenas */
        /*text-align: right;*/
        /* Outros estilos para o layout de cartão */
        /*border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;*/ /* Espaço para o rótulo */
    /*}

        td:before {*/
            /* Rótulo com o nome da coluna */
            /*content: attr(data-label);
            position: absolute;
            left: 6px;
            font-weight: bold;*/
            /* Alinha o texto do rótulo à esquerda */
            /*text-align: left;
            width: 45%;*/ /* Garante que o rótulo não ocupe todo o espaço */
        /*}

   
}*/




hr.separation {
    height: 1px;
    border: none;
    border-top: 1px solid;
    color: #7e8dd7;
    margin-bottom: 10px !important
}
hr.separation-dre {
    height: 1px;
    border: none;
    border-top: 1px solid;
    color: black;
    margin-bottom: 10px;
}


/*tr td {
    line-height: 1px;
    width: 98%;
}*/

label {
    color: black;
}

a:link {
    text-decoration: none;
}

::-webkit-scrollbar {
    width: .8rem;
}


.error-span {
    color: red !important;
}

.cor-fundo-Azure {
    background-color: azure !important;
}



.container-record {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-gap: 0rem 1rem;
    grid-template-areas: "container-record-description container-record-description container-record-description container-record-description" "container-record-button-first container-record-button-second container-record-button-third container-record-button-four";
    width: 1fr;
    height: 70px;
    border-radius: 5px;
    border: 1px solid;
    color: #7e8dd7;
    margin: 0px;
    padding: 5px;
}


.pointer {
    cursor: pointer;
}


.container-record-new {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-gap: 0rem 1rem;
    grid-template-areas: "container-record-description container-record-description container-record-description" "container-record-button-first container-record-button-second container-record-button-third";
    width: 1fr;
    height: 70px;
    border-radius: 5px;
    border: 1px solid;
    color: #7e8dd7;
    margin: 0px;
    padding: 5px;
}





.container-navegation-record {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-gap: 0rem 1rem;
    grid-template-areas: "container-navegation-description container-navegation-description container-navegation-description container-navegation-description" "container-button-recordFirst container-button-previos container-button-next container-button-last";
    width: 1fr;
    height: 70px;
    border-radius: 5px;
    border: 1px solid;
    color: #7e8dd7;
    margin-bottom: 10px;
    padding: 5px;
}

.container-button-recordFirst {
    grid-area: container-button-recordFirst;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
    background-color: #42a5f5;
    display: block;
}

.container-record-one-button {
    display: grid;
    grid-template-columns: 220px;
    grid-template-rows: auto auto;
    grid-gap: 0rem;
    grid-template-areas: "container-record-description" "container-record-button-first";
    width: 235px;
    height: 70px;
    border-radius: 5px;
    border: 2px solid;
    color: #bbdefb;
    margin: 0px;
    padding: 5px;
}

.container-record-two-button {
    display: grid;
    grid-template-columns: 120px 120px;
    grid-template-rows: auto auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "container-record-description container-record-description" "container-record-button-first container-record-button-second";
    width: 262px;
    height: 70px;
    border-radius: 5px;
    border: 2px solid;
    color: #bbdefb;
    margin: 0px;
    padding: 5px;
}

.container-record-description {
    grid-area: container-record-description;
    margin-left: 5px;
    font-size: 11px;
    color: black;
    margin-top: 0px;
    padding-top: 0px;
    font-size: 12px;
}

.container-record-button-first {
    grid-area: container-record-button-first;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
}

.container-record-button-second {
    grid-area: container-record-button-second;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
}

.container-record-button-third {
    grid-area: container-record-button-third;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
}

.container-record-button-four {
    grid-area: container-record-button-four;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
}


.container-one-buttons {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 0rem 1rem;
    grid-template-areas: "container-description" "container-button-first";
    width: 1fr;
    height: 70px;
    border-radius: 5px;
    border: 1px solid;
    color: #7e8dd7;
    margin-bottom: 10px;
    padding: 5px;
}



.container-two-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 0rem 1rem;
    grid-template-areas: "container-description container-description" "container-button-first container-button-second";
    width: 1fr;
    height: 70px;
    border-radius: 5px;
    border: 2px solid;
    color: #bbdefb;
    margin-bottom: 10px;
    padding: 5px;
}



.container-four-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-gap: 0rem 1rem;
    grid-template-areas: "container-description container-description container-description container-description" "container-button-first container-button-second container-button-third container-button-four";
    width: 1fr;
    height: 70px;
    border-radius: 5px;
    border: 1px solid;
    color: #7e8dd7;
    margin-bottom: 10px;
    padding: 5px;
}




.container-cbx-servicos {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    grid-gap: 0rem .5rem;
    grid-template-areas: "container-description" "cbx-servicos";
    width: auto;
    height: 70px;
    border-radius: 5px;
    border: 1px solid;
    color: #7e8dd7;
    margin-bottom: 10px;
    padding: 5px;
}

    .container-cbx-servicos.preco {
        border: none;
        padding: 0;
        height: 63px;
    }






.cbx-servicos {
    grid-area: cbx-servicos;
}

.controls-grup {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto;
    grid-gap: 0rem;
    grid-template-areas: "controls-grup-elements controls-grup-button";
    width: 100%;
}

.controls-grup-label {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 0rem;
    grid-template-areas: "container-description" "controls-grup-elements" "controls-grup-button";
    width: 100%;
}

    .controls-grup-label.controls-grup-button {
        /* background-color: blue;*/
        grid-area: controls-grup-button;
        width: auto;
        height: 36px;
        border-left: none;
    }

.controls-grup-button-duplo-label {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr 1fr;
    grid-gap: 0rem;
    grid-template-areas: "container-description container-description" "controls-grup-elements controls-grup-elements" "controls-grup-button1 controls-grup-button2";
    width: 100%;
}


    .controls-grup-button-duplo-label.controls-grup-input {
        border-radius: 5px;
        height: 25px;
        width: 100%;
    }


.controls-grup-three {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-gap: 0rem;
    grid-template-areas: "controls-grup-elements" "controls-grup-button" "controls-grup-input";
    width: 100%;
}


.controls-grup-button1 {
    /* background-color: blue;*/
    grid-area: controls-grup-button1;
    width: auto;
    margin-left: 0px;
    border-radius: 5px;
    height: 30px;
}




@media(min-width: 768px) {
    .controls-grup-three {
        display: grid;
        grid-template-columns: .3fr .5fr 3fr;
        grid-template-rows: auto;
        grid-gap: 0rem;
        grid-template-areas: "controls-grup-elements controls-grup-button controls-grup-input";
        width: 100%;
    }

    .controls-grup-label {
        display: grid;
        grid-template-columns: 5fr 1fr;
        grid-template-rows: auto auto;
        grid-gap: 0rem;
        grid-template-areas: "container-description container-description" "controls-grup-elements controls-grup-button";
        width: 100%;
    }

    .controls-grup-button-duplo-label {
        display: grid;
        grid-template-columns: 5fr 1fr 1fr;
        grid-template-rows: auto 1fr;
        grid-gap: 0rem;
        grid-template-areas: "container-description container-description container-description" "controls-grup-elements controls-grup-button1 controls-grup-button2";
        width: 100%;
    }

        .controls-grup-button-duplo-label.controls-grup-input {
            border-radius: 5px;
            height: 30px;
            width: 100%;
        }


    .controls-grup-button1 {
        /* background-color: blue;*/
        grid-area: controls-grup-button1;
        width: auto;
        margin-left: 5px;
        border-radius: 5px;
        height: 30px;
    }
}


.controls-grup-button2 {
    /* background-color: blue;*/
    grid-area: controls-grup-button2;
    width: auto;
    width: auto;
    margin-left: 5px;
    border-radius: 5px;
    height: 30px;
}



.controls-grup-elements {
    /* background-color: blue;*/
    grid-area: controls-grup-elements;
    width: auto;
    margin-right: 0px;
}

.controls-grup-button {
    /* background-color: blue;*/
    grid-area: controls-grup-button;
    width: auto;
    margin-left: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    margin-top: 25px;
    height: 36px;
    border-left: none;
}

    .controls-grup-button.preco {
        /* background-color: blue;*/
        grid-area: controls-grup-button;
        width: auto;
        margin-left: 0px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        margin-top: 2px;
        height: 27px;
        border-left: none;
    }



.container-three-buttons {
    display: grid;
    grid-template-columns: 133px 133px 133px;
    grid-template-rows: auto auto;
    grid-gap: 0rem 1rem;
    grid-template-areas: "container-description container-description container-description container-description" "container-button-first container-button-second container-button-third container-button-four";
    width: 446px;
    height: 70px;
    border-radius: 5px;
    border: 2px solid;
    color: #bbdefb;
    margin-bottom: 10px;
    padding: 5px;
}

.container-description {
    grid-area: container-description;
    margin-left: 5px;
    color: black;
    margin-top: 0px;
    padding-top: 0px;
    font-size: 12px;
}

    .container-description.preco {
        font-size: 14px;
        margin: 0;
        height: 10px;
    }

.container-button-first {
    grid-area: container-button-first;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
}



.container-button-second {
    grid-area: container-button-second;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
}

.container-button-third {
    grid-area: container-button-third;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
}

.container-button-four {
    grid-area: container-button-four;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
}

.container-button-five {
    grid-area: container-button-five;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
}

.footer-layout {
    margin: 10px;
}

.header {
    margin: 0;
    width: 100%;
    height: 25px;
    border: 1px solid;
}

.menu {
    margin-top: 0;
    padding-top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid;
}

.container-navegation-record {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-gap: 0rem 1rem;
    grid-template-areas: "container-navegation-description container-navegation-description container-navegation-description container-navegation-description" "container-button-recordFirst container-button-previos container-button-next container-button-last";
    width: 1fr;
    height: 70px;
    border-radius: 5px;
    border: 1px solid;
    color: #7e8dd7;
    margin-bottom: 10px;
    padding: 5px;
}


.container-navegation-description {
    grid-area: container-navegation-description;
    margin-left: 5px;
    font-size: 11px;
    color: black;
    margin-top: 0px;
    padding-top: 0px;
    font-size: 12px;
}

.container-button-previos {
    grid-area: container-button-previos;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
    background-color: #42a5f5;
}

.container-button-next {
    grid-area: container-button-next;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
    background-color: #42a5f5;
}

.container-button-last {
    grid-area: container-button-last;
    width: 100%;
    margin-top: 0px;
    padding-top: 0px;
    background-color: #42a5f5;
}

[data-tooltip] {
    position: relative;
    font-weight: bold;
}

    [data-tooltip]:after {
        display: none;
        position: absolute;
        top: -5px;
        padding: 5px;
        border-radius: 3px;
        left: calc(100% + 2px);
        content: attr(data-tooltip);
        white-space: nowrap;
        color: White;
    }

    [data-tooltip]:hover:after {
        display: block;
    }

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

/* junta o input select com o botão;*/
.controls-grup {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto;
    grid-gap: 0rem;
    grid-template-areas: "controls-grup-elements controls-grup-button";
    width: 100%;
}

.controls-grup-elements {
    /* background-color: blue;*/
    grid-area: controls-grup-elements;
    width: auto;
    margin-right: 0px;
}

.controls-grup-button {
    /* background-color: blue;*/
    grid-area: controls-grup-button;
    width: auto;
    margin-left: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    margin-top: 4px;
    height: 32px;
    border-left: none;
}


/* junta botão ok e cancelar;*/
.controls-grup-button-ok-cancel {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto;
    grid-gap: 0rem;
    grid-template-areas: "controls-grup-button-warning controls-grup-button-warning controls-grup-button-warning controls-grup-button-warning" ". controls-grup-button-btn-ok controls-grup-button-btn-cancel .";
    width: 100%;
}

.controls-grup-button-warning {
    grid-area: controls-grup-button-warning;
    margin-top: 5px;
    margin-bottom: 5px;
}


.controls-grup-button-btn-ok {
    /* background-color: blue;*/
    grid-area: controls-grup-button-btn-ok;
    width: auto;
    margin: 5px;
    height: 36px;
}

.controls-grup-button-btn-ok1 {
    /* background-color: blue;*/
    grid-area: controls-grup-button-btn-ok1;
    width: auto;
    margin-top: 25px;
    height: 36px;
}

.controls-grup-button-btn-cancel {
    /* background-color: blue;*/
    grid-area: controls-grup-button-btn-cancel;
    width: auto;
    margin: 5px;
    height: 36px;
}

/* botão ok */
.controls-grup-button-ok {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    grid-gap: 0rem;
    grid-template-areas: ". controls-grup-button-btn-ok1  .";
    width: 100%;
}

.controls-grup-input {
    border-right: none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    height: 30px;
    width: 100%;
}

    .controls-grup-input.preco {
        padding: 0;
        height: 27px;
        margin-top: 2px;
        width: 100%;
    }



.controls-grup-input1 {
    border-radius: 5px;
    height: 30px;
    width: 100%;
}


/*table, tr, th, td.dataGrid-border {
    border: solid 1px;
    border-color: #42a5f5;
}



    tr.header-coloring {
        background-color: #e3f2fd;
    }*/


button.button-consulta {
   
    background-color: #a5d6a7;
    border-color: #a5d6a7;
}


button.button-procurar {
    background-color: #42a5f5;
    margin-top: 22px;
    padding-right: 50px;
    width: 40px;
    height: 32px;
}

button.button-execultar {
   
    background-color: #42a5f5;
    color: black;
}

button.button-consulta-produto {
    margin-top: 11px !important;
    background-color: #42a5f5;
    height: 25px;
    color: black;
}

button.button-execultar-monitor {
    background-color: #42a5f5;
    color: black;
    margin-top: 23px;
}

button.button-servicos {
    background-color: #bbdefb;
    border-color: #bbdefb;
}

button.button-gravar {
    
    background-color: #00c853;
    border-color: #00c853;
    margin-right: 3px;
    font-family: 'Roboto', sans-serif;
}

button.button-atualizar {
    background-color: #cec02c;
    border-color: #cec02c;
    margin-right: 3px;
}

button.button-gravar-mini {
    background-color: #00c853;
    border-color: #00c853;
    height: 20px;
    margin: 3px;
}

button.button-add-query {
    background-color: #90CAF9;
    border-color: #90CAF9;
}

button.button-editar {
    background-color: #bbdefb;
    border-color: #bbdefb;
}

button.button-novo {
    background-color: #a9cce8;
    border-color: #a9cce8;
}

button.button-localizar-mini {
    background-color: #64b5f6;
    border-color: #64b5f6;
    height: 20px;
    margin: 3px;
}


button.button-duplicar {
    background-color: #06e060;
    border-color: #06e060;
}

button.button-remover {
    background-color: #ef9a9a;
    border-color: #ef9a9a;
}

button.button-margim-direita {
    margin-right: 5px;
}

button.button-remover-mini {
    background-color: #ef9a9a;
    border-color: #ef9a9a;
    height: 20px;
    margin: 3px;
}

button.button-cancelar {
    background-color: #ffab40;
    border-color: #ffab40;
}

button.button-selecionar {
    width: 100%;
    height: auto;
    border-radius: 5px;
    border: 1px solid;
    background-color: #64b5f6;
    font-family: 'Roboto', sans-serif;
    margin: 5px;
}

button.button-gravar1 {
    width: 100%;
    height: 30px;
    border-radius: 5px;
    border: 1px solid;
    background-color: #00c853;
}


button.button-retornar-cadastro {
    background-color: #6a94f7;
    border-color: #6a94f7;
}

button.button-retornar {
    background-color: #FFB74D;
    border-color: #FFB74D;
}

button.button-medio {
    width: 150px;
}

button.button-gravar-medio {
    width: 150px;
    background-color: #00c853;
    border-color: #00c853;

}

button.button-remover-medio {
    background-color: #ef9a9a;
    border-color: #ef9a9a;
    width: 150px;
}

button.button-grande {
    width: 200px;
}

button.button-center {
    align-content: center
}

button.button-disable {
    background-color: #D3D3D3;
    border-color: #D3D3D3;
    color: #A9A9A9;
}


.borderBlue {
    border-color: #42a5f5 !important;
}



image {
    background-image: url(../../../images/iconi-svg/lupasvg.svg)
}

.link-pequeno {
    font-size: 14px;
    cursor: pointer;
}

.alinhar-texto-direita {
    text-align: right;
}

.alinhar-texto-esquerda {
    text-align: left;
}

.textRed {
    color: red;
}

.alinhar-texto-centro {
    text-align: center;
}

.visible {
    display: block;
}

.invisible {
    display: none;
}

.error {
    border-color: red !important;
}


/* The Modal (background) */
.loading {
    display: block;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background-color: transparent;
    background-size: 100px 100px;
    background-image: url(../images/loading.gif);
    background-position: center;
    background-repeat: no-repeat;
}

.text-wait {
    margin-top: 3px;
    margin-left: 450px;
    margin-right: 450px;
    text-align: center;
    border-radius: 5px;
    background-color: #64b5f6;
    padding: 5px;
}

.modal {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    /*overflow: auto;*/ /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-question {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    /*overflow: auto;*/ /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


/* Modal Content/Box */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    top: 70px;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.modal-content-imagem {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    top: 100px;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.center-imagem {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

/*placeholder pequeno*/
#MiniPlace::-webkit-input-placeholder {
    font-size: 11px;
}



/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}
/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.modal-header {
    padding: 2px 16px;
    background-color: red;
    color: white;
    height: 60px;
}

.modal-body {
    padding: 5px;
}

.modal-body-imagem {
    padding: 5px;
}

.modal-footer {
    padding: 7px;
    background-color: red;
    color: white;
    height: 70px;
}

.modal-footer-imagem {
    padding: 7px;
    background-color: #42a5f5;
    color: white;
    height: 70px;
}


.wrapper {
    display: grid;
    grid-template-columns: 10px, auto 10px;
    grid-template-rows: auto, auto;
    row-gap: .5rem;
    column-gap: .5rem;
    margin-left: 0px;
    grid-template-areas: "footer-warning footer-warning footer-warning" ". btn-modal .";
    width: 100%;
}

.btn-modal {
    grid-area: btn-modal;
}

.footer-warning {
    grid-area: footer-warning;
}

.btn-modal-conteudo {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "codigo codigo" "nome-completo nome-completo" "nome nome" "nome-identificacao nome-identificacao" "telefone telefone-celular" "email email" "email-particular email-particular" "email-confirmacao email-confirmacao" "cep cep" "logradouro logradouro" "numero numero" "complemento complemento" "bairro bairro" "uf uf" "cidade cidade";
    width: 100%;
}

/*.titulo {
    font-weight: 900;*/
/*font-variant: small-caps;*/
/* font-stretch: expanded;*/
/*color: #757575;
}

.contener-titulo-form{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "titulo-form close-form"

}

.titulo-form {
    grid-area: titulo-form;
    font-size: 30px;
    color: #3f51b5;
    text-align: left;
}

.close-form {
    grid-area: close-form;
    text-align: right;
    font-size: 22px;
    margin-right: 10px;
}

.close-form:hover,
.close-form:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}*/




.titulo-form-sub {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 10px;
    color: #3f51b5
}

.titulo-modal {
    padding-top: 10px;
    font-size: 25px;
}



.titulo-modal-sub {
    font-size: 18px;
    margin-bottom: 10px;
    color: #3f51b5;
}

.titulo-modal-footer {
    font-size: 18px;
    margin-top: 10px;
}

.titulo-container-information {
    font-size: 15px;
    color: #3f51b5;
    margin-left: 10px;
}

.titulo-fieldset {
    font-size: 15px;
    color: black;
    margin-left: 10px;
}
/*Inicio-layout*/

*, *:before, *:after {
    box-sizing: inherit
}


img {
    border: none;
}

.navbar-layout {
    grid-area: navbar-layout;
    background-color: rgb(41,127,184);
    overflow: hidden;
    height: 63px;
    position: relative;
    width: 100%;
    padding-bottom: 50px;
}

.body-content {
    grid-area: body-content;
    margin: 0;
    padding: 0;
}

.navbar-layout a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.navbar-layout ul {
    margin: 5px 0 0 0;
    list-style: none;
}

.navbar-nav-layout a:hover {
    background-color: #ddd;
    color: #000;
}

.side-nav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #444040;
    opacity: 1;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}

    .side-nav a {
        padding: 10px 10px 10px 30px;
        text-decoration: none;
        font-size: 22px;
        color: #ccc;
        display: block;
        transition: 0,3s;
    }

        .side-nav a:hover {
            color: #fff;
        }

    .side-nav .btn-close {
        position: absolute;
        top: 0;
        right: 22px;
        font-size: 36px;
        margin-left: 50px;
    }


.side-nav-permissoes {
    height: 80vh;
    width: 0;
    position: fixed;
    background-color: #444040;
    opacity: 1;
    overflow-x: hidden;
    padding-top: 0px;
    transition: 0.5s;
}

    .side-nav-permissoes a {
        padding: 10px 10px 10px 30px;
        text-decoration: none;
        font-size: 22px;
        color: #ccc;
        display: block;
        transition: 0,3s;
    }

        .side-nav-permissoes a:hover {
            color: #fff;
        }

    .side-nav-permissoes .btn-close {
        position: absolute;
        top: 0;
        right: 22px;
        font-size: 36px;
        margin-left: 50px;
    }






.logo {
    margin-top: 0;
    padding-top: 0;
}

#main {
    transition: margin-left 0.5s;
    padding: 5px;
    overflow: auto;
    width: 100%;
}

@media(max-width: 768px) {

    .navbar-nav-layout {
        display: none
    }
}

.body-layout {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 63px auto;
    grid-gap: 0.5rem;
    margin-left: 0px;
    grid-template-areas: "navbar-layout" "body-content";
    width: 100%;
}

.usuario-layout {
    display: grid;
    grid-template-columns: 57px 120px 210px;
    grid-template-rows: 10px 10px 15px;
    grid-gap: 0.5rem;
    margin-left: 5px;
    margin-right: 10px;
    grid-template-areas: "usuario-layout-foto usuario-layout-bem-vindo  processos-servidor"
        "usuario-layout-foto usuario-layout-nome  processos-servidor"
        "usuario-layout-foto usuario-layout-empresa usuario-layout-empresa";
    width: 450px;
    height: 60px;
    float: right;
}

.usuario-layout-foto {
    border-radius: 100%;
    overflow: hidden;
    height: 55px;
    width: 55px;
    background: black;
}

#imgUsuario {
    width: 100%;
}


hr {
    border-top: 1px solid;
}


.usuario-layout-bem-vindo {
    grid-area: usuario-layout-bem-vindo;
    white-space: nowrap;
    color: #ddd;
    font-size: 15px
}

.usuario-layout-nome {
    grid-area: usuario-layout-nome;
    white-space: nowrap;
    color: #ddd;
    font-size: 16px;
}

.usuario-layout-nome-btn {
    grid-area: usuario-layout-nome-btn;
    color: #ddd;
    padding: 0;
}


.usuario-layout-empresa {
    grid-area: usuario-layout-empresa;
    white-space: nowrap;
    overflow: hidden;
    color: #ddd;
    font-size: 15px
}

.processos-servidor {

    grid-area: processos-servidor;
    cursor: pointer;
   
  
}

.close-menu {
    grid-template-columns: 1fr .3fr;
    grid-template-rows: 1fr;
    color: #ccc;
    text-align: left;
    padding-left: 35px;
    border-bottom: 1px solid;
    height: 5px;
    padding-top: 10px;
    padding-bottom: 0;
}

.menu-permissoes-usuario {
    color: #fefefe;
    background-color: #2962ff;
    text-align: center;
    border-bottom: 1px solid;
    height: 55px;
    padding-top: 10px;
    padding-bottom: 0;
    grid-template-columns: 5fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 4rem;
    grid-template-areas: "a b";
}

.menu-permissoes-usuario-nome {
    grid-area: a;
}

.menu-permissoes-usuario-simbolo {
    grid-area: b;
}


.item-menu {
    display: grid;
    grid-template-columns: 1fr .3fr;
    grid-template-rows: 1fr;
    color: #ccc;
    text-align: left;
    padding-left: 35px;
    border-bottom: 1px solid;
    margin: 0;
    min-height: 45px;
    height: auto;
    padding-top: 10px;
    grid-template-areas: "item-menu-texto item-menu-sinal";
}

.item-menu-permissoes {
    display: grid;
    grid-template-columns: 1fr .3fr;
    grid-template-rows: 1fr;
    color: #a49d9d;
    text-align: left;
    padding-left: 35px;
    border-bottom: 1px solid;
    margin: 0;
    min-height: 45px;
    height: auto;
    padding-top: 10px;
    grid-template-areas: "item-menu-texto item-menu-sinal";
}


.item-menu1 {
    grid-template-rows: 1fr;
    color: #ccc;
    text-align: left;
    padding-left: 60px;
    border-bottom: 1px solid;
    margin: 0;
    min-height: 35px;
    height: auto;
    padding-top: 5px;
    background-color: #686565;
}

.item-menu2 {
    display: grid;
    grid-template-columns: 1fr .3fr;
    grid-template-rows: 1fr;
    color: #ccc;
    text-align: left;
    padding-left: 60px;
    border-bottom: 1px solid;
    margin: 0;
    min-height: 40px;
    height: auto;
    padding-top: 7px;
    grid-template-areas: "item-menu-texto item-menu-sinal";
    background-color: #686565;
}

.item-menu3 {
    grid-template-rows: 1fr;
    color: #ccc;
    text-align: left;
    padding-left: 80px;
    border-bottom: 1px solid;
    margin: 0;
    min-height: 35px;
    height: auto;
    padding-top: 5px;
    background-color: #827e7e;
}


.item-menu-texto:hover {
    color: white;
}

.item-menu:hover .item-menu-sinal {
    color: white;
}



.item-menu:hover .item-menu-texto {
    color: white;
}




.item-menu:hover {
    color: white;
    border-bottom: 2px solid;
    border-top: 1px solid;
    background-color: #686565;
}



.item-menu1:hover {
    color: white;
    border-bottom: 2px solid;
    border-top: 1px solid;
    background-color: #8f8b8b;
}

    .item-menu1:hover item-menu-texto {
        color: white;
    }

.item-menu-texto {
    grid-area: item-menu-texto;
    color: #ccc;
    text-align: left;
}




.item-menu-sinal {
    grid-area: item-menu-sinal;
    color: #ccc;
    text-align: right;
    margin-right: 15px
}

.invisible {
    display: none;
}
/*Fim-Layout*/
/*Menu Inicio */
.menu-itens {
    grid-area: menu-itens;
    background-color: #42a5f5;
    border: 1px solid;
    font-family: arial, helvetica;
}

.menu-width {
    width: 30%;
    transition: 0,7s;
}

.scroll-subMenu {
    overflow-y: auto;
    height: 427px;
}

.item-cabecalho {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "item-cabecalho-icone item-cabecalho-name";
    grid-gap: 2rem;
    height: 53px;
    border-bottom: 1px solid;
    color: white;
    font-size: 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background-color: #1565c0;
    width: 100%;
}

.item-menu-opcoes {
    border-bottom: 1px solid;
    background-color: #42a5f5;
    color: white;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    cursor: pointer;
    display: none !important;
}

.sub-item-menu-opcoes {
    border-bottom: 1px solid;
    background-color: #59606b;
    color: white;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    cursor: pointer;
    display: none !important;
}


.item-menu-opcoes-block {
    display: block !important;
    display: -webkit-flex !important;
    display: flex !important;
    transition: 0,7s;
}

@media (min-width: 768px) { /* 768px */
    .menu-itens {
        grid-area: menu-itens;
        margin-left: 5px;
        border: 1px solid;
        font-family: arial, helvetica;
        height: auto;
    }

    .menu-width {
        width: 100%;
    }


    .item-cabecalho {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "item-cabecalho-icone item-cabecalho-name";
        grid-gap: 2rem;
        height: 53px;
        border-bottom: 1px solid;
        color: white;
        font-size: 20px;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        background-color: #1565c0;
        width: 100%;
    }

    .item-menu-opcoes {
        display: block !important;
        background-color: #42a5f5;
        border-bottom: 1px solid;
        color: white;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        cursor: pointer;
    }

    .sub-item-menu-opcoes {
        display: block !important;
        background-color: #59606b;
        border-bottom: 1px solid;
        color: white;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        cursor: pointer;
    }
}

.item-cabecalho-icone {
    grid-area: item-cabecalho-icone;
    margin-right: 5px;
}

.item-cabecalho-name {
    grid-area: item-cabecalho-name;
}

.item-menu-opcoes-layout {
    display: grid;
    grid-template-columns: .3fr 1fr .3fr;
    grid-gap: .3rem;
    grid-template-areas: "item-menu-opcoes-icone item-menu-opcoes-name item-menu-opcoes-select";
    width: 100%;
}

.sub-item-menu-opcoes-layout {
    display: grid;
    grid-template-columns: 1fr .3fr;
    grid-gap: .3rem;
    grid-template-areas: "item-menu-opcoes-name item-menu-opcoes-select";
    width: 100%;
}



.item-menu-opcoes-name {
    grid-area: item-menu-opcoes-name;
    text-align: left;
    font-size: 14px;
    margin-left: 5px;
}

.item-menu-opcoes-icone {
    grid-area: item-menu-opcoes-icone;
    margin-left: 15px;
    font-size: 18px;
}

.item-menu-opcoes-select {
    grid-area: item-menu-opcoes-select;
    margin-right: 15px;
    font-size: 20px;
    text-align: right
}

.item-menu-opcoes:hover {
    color: white;
    border-bottom: 1px solid;
    background-color: #2962ff;
}

.sub-item-menu-opcoes:hover {
    color: white;
    border-bottom: 1px solid;
    background-color: #4e5259;
}

.item-menu-opcoes1:hover {
    color: white;
    background-color: #2962ff;
}
/*Menu Fim*/
/*Esqueleto Forms inicio*/

html, body, app {
    height: 100%;
}


body {
    font-family: Roboto, sans-serif;
    background-color: white;
}


*, *:before, *:after {
    box-sizing: inherit
}


.pagina {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1px auto 1px auto 1px;
    grid-gap: .2rem;
    grid-template-areas: "header-pagina" "separation" "register" "separation1" "buttons" "separation2";
}

.pagina1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1px auto 1px auto 1px auto 1px;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "header-pagina" "separation" "register" "separation1" "buttons" "separation2" "outros" "separation3";
    width: 100%;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 0px;
}

.pagina2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1px auto 1px auto 1px;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "register" "separation1" "buttons" "separation2" "outros" "separation3";
    width: 100%;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 0px;
}

.pagina3 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 30px 1px auto 1px;
    row-gap: .5rem;
    grid-template-areas: "header-pagina" "separation" "register" "separation1";
    width: 100%;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}



.pagina-consulta {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1px auto;
    grid-gap: .2rem;
    grid-template-areas: "header-pagina" "separation" "register";
}


@media (min-width: 768px) { /* 768px */
    .pagina {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 30px 1px auto 1px auto 1px;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "header-pagina" "separation" "register" "separation1" "buttons" "separation2";
        width: 100%;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .pagina1 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1px auto 1px auto 1px auto 1px;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "header-pagina" "separation" "register" "separation1" "buttons" "separation2" "outros" "separation3";
        width: 100%;
        margin-top: 5px;
        margin-left: 5px;
        margin-right: 5px;
        padding: 0px;
    }

    .pagina3 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 30px 1px auto 1px;
        row-gap: .5rem;
        grid-template-areas: "header-pagina" "separation" "register" "separation1";
        width: 100%;
    }
}



.header-pagina {
    grid-area: header-pagina;
}

.separation {
    grid-area: separation;
    width: 100%;
    margin: 0;
    padding: 0px;
}

.separation-dre {
    grid-area: separation;
    width: 100%;
    margin: 0;
    padding: 0px;
}

.separation-form {
    grid-area: separation-form;
    width: 100%;
    margin: 0;
    padding: 0px;
}

.register {
    grid-area: register;
    margin-left: 5px;
    margin-right: 5px;
    height: auto;
}

.separation1 {
    grid-area: separation1;
    width: 100%;
    margin-left: 0px;
    padding-top: 0px;
    margin-top: 10px;
    margin-bottom: 20px !important;
    margin-right: 5px;
    padding: 0px;
}

.buttons {
    grid-area: buttons;
    margin: 0;
    padding: 0;
    margin-top: 15px !important;
}

.buttons-center {
    margin: auto;
}

.separation2 {
    grid-area: separation2;
    width: 100%;
    margin-left: 0px;
    padding: 0;
    margin-top: 0px;
    margin-right: 15px;
}

.separation3 {
    grid-area: separation3;
    width: 100%;
    margin-left: 0px;
    padding-top: 0px;
    margin-top: 0px;
    margin-right: 5px;
    padding: 5px;
}



.outros {
    grid-area: outros;
    margin-left: 5px;
    margin-right: 5px;
    height: auto;
}

.outros-height {
    text-align: right;
    margin-right: 10px;
}


.buttons-conteudo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "services" "navegation" "record" "other-services";
    width: 100%;
}

.buttons-conteudo1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "services" "navegation" "record";
    width: 100%;
}

.buttons-conteudo2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "navegation" "record";
    width: 100%;
}

.buttons-conteudo3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: ".  record .";
    width: 100%;
}

.record {
    grid-area: record;
}

.record1 {
    grid-area: record;
    margin: 0 auto;
    width: 50%; /* Valor da Largura */
}

.navegation {
    grid-area: navegation;
}

.services {
    grid-area: services;
}

.other-services {
    grid-area: other-services;
}


@media (min-width: 768px) { /* 768px */
    .buttons-conteudo {
        display: grid;
        grid-template-columns: 1fr .3fr 1fr 1fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "other-services services navegation record";
        width: 100%;
    }

    .buttons-conteudo1 {
        display: grid;
        grid-template-columns: .5fr 1fr 1fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "services navegation record";
        width: 100%;
    }

    .buttons-conteudo2 {
        display: grid;
        grid-template-columns: .5fr 1fr 1fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: " . navegation record";
        width: 100%;
    }
}
/*Esqueleto Forms Fim*/
/*Inico - Campos comum*/
.fornecedor-area {
    grid-area: fornecedor-area;
}

.codigo {
    grid-area: codigo;
}

.inscricao-federal {
    grid-area: inscricao-federal;
}

.inscricao-estadual {
    grid-area: inscricao-estadual;
}

.inscricao-municipal {
    grid-area: inscricao-municipal;
}

.inscricao-suframa {
    grid-area: inscricao-suframa;
}

.cnae {
    grid-area: cnae;
    text-overflow: ellipsis;
}

.regime-tributario {
    grid-area: regime-tributario;
}

.nome {
    grid-area: nome;
    text-overflow: ellipsis;
}

.razao-social {
    grid-area: razao-social;
    text-overflow: ellipsis;
}

.email {
    grid-area: email;
    text-overflow: ellipsis;
}

.email-particular {
    grid-area: email-particular;
    text-overflow: ellipsis;
}

.email-confirmacao {
    grid-area: email-confirmacao;
}

.site {
    grid-area: site;
}

.telefone {
    grid-area: telefone;
}

.telefone-celular {
    grid-area: telefone-celular;
}

.cep {
    grid-area: cep;
}

.logradouro {
    grid-area: logradouro;
    text-overflow: ellipsis;
}

.numero {
    grid-area: numero;
}

.complemento {
    grid-area: complemento;
    text-overflow: ellipsis;
}

.bairro {
    grid-area: bairro;
    text-overflow: ellipsis;
}

.uf {
    grid-area: uf;
}

.cidade {
    grid-area: cidade;
}
/*Fim  - Campo comum*/
/*Inicio - Fornecedor Forms*/
.register-conteudo-fornecedor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "menu-itens" "fornecedor-area";
    width: 100%;
}

.fornecedor-area {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(21, 1fr);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "codigo" "inscricao-federal" "inscricao-estadual" "inscricao-municipal" "inscricao-suframa" "cnae" "regime-tributario" "razao-social" "nome" "telefone" "telefone-celular" "email" "email-particular" "site" "cep" "logradouro" "numero" "complemento" "bairro" "uf" "cidade";
    width: 100%;
}

@media (min-width: 768px) { /* 768px */
    .User-Registration {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 30px 1px 310px 5px 90px 1px;
        row-gap: .5rem;
        column-gap: .5rem;
        margin-left: 0px;
        margin-top: 0px;
        padding: 0;
        grid-template-areas: "header-fornecedor header-fornecedor header-fornecedor header-fornecedor" " separation separation separation separation" "register register register register" "separation1 separation1 separation1 separation1" "buttons buttons buttons buttons" "separation2 separation2 separation2 separation2";
    }

    .register-conteudo-fornecedor {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "menu-itens fornecedor-area",
    }

    .fornecedor-area {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(6, auto);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "codigo inscricao-federal inscricao-estadual inscricao-municipal inscricao-suframa" "cnae cnae cnae regime-tributario regime-tributario" "razao-social razao-social razao-social nome nome" "telefone telefone-celular email  email-particular site" "cep logradouro logradouro numero complemento" "bairro bairro  uf cidade cidade";
        width: 100%;
    }
}

/*Fim - Fornecedor Forms*/
/*Incio Consulta*/

.consulta {
    padding-bottom: 5px;
    margin-right: 5px;
    height: 100%;
}


headerConsultation {
    grid-area: headerConsultation;
    margin-left: 5px;
    vertical-align: central;
}

separation4 {
    grid-area: separation4;
    width: 100%;
    margin-left: 0px;
}

query {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "parameter" "parameter1" "parameter2";
    width: 100%;
}
query2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "parameter4";
    width: 100%;
}


query1 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: ". . . . . . retornar1";
    width: 100%;
}



queryData {
    grid-area: queryData;
    margin-left: 5px;
}

.queryData {
    position: absolute;
    margin-left: 5px;
    height: 95%
}


parameter {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "consult" "operador" "parametro" "button-consulta-query" "button-voltar-cadastro" "retornar" "button-add-query";
    width: 100%;
}

parameter1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "consult" "operador" "parametro" "button-consulta" "button-voltar-cadastro1";
    width: 100%;
}

parameter2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "consult" "operador" "parametro" "button-consulta" "button-voltar-cadastro";
    width: 100%;
}

.parametro-consulta-servicos-select {
    height: 30px;
    font-size: 14px;
    text-align: center;
    background-color: #6a94f7;
    border-color: #6a94f7;
}

@media (min-width: 768px) { /* 768px */
    .parameter {
        display: grid;
        grid-template-columns: 350px 170px 1fr .2fr .5fr .5fr .5fr .5fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "consult operador  parametro parametro button-consulta-query button-voltar-cadastro retornar button-add-query";
        width: 100%;
    }

    .parameter3 {
        display: grid;
        grid-template-columns: 350px 170px 1fr .2fr .5fr 2fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "consult operador  parametro parametro button-consulta-query button-voltar-cadastro";
        width: 100%;
    }

    .parameter4 {
        display: grid;
        grid-template-columns: 1fr 3fr 2fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "consult   parametro   cbx-plano-contas-servicos";
        width: 100%;
    }

    .parameter5 {
        display: grid;
        grid-template-columns: 1fr 3fr 2fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "consult   parametro   parametro";
        width: 100%;
    }

    .parameter1 {
        display: grid;
        grid-template-columns: 350px 170px 1fr 1fr .3fr .5fr .5fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "consult operador  parametro parametro button-add-query . .";
        width: 100%;
    }

    .parameter2 {
        display: grid;
        grid-template-columns: 350px 170px 1fr 1fr .3fr .5fr .5fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "consult operador  parametro parametro button-add-query . .";
        width: 100%;
    }
}

.parameter {
    grid-area: parameter;
}

.parameter1 {
    grid-area: parameter1;
}

.parameter2 {
    grid-area: parameter2;
}

.parameter3 {
    grid-area: parameter3;
}

.parameter4 {
    grid-area: parameter4;
}


.consult {
    grid-area: consult;
}

.operador {
    grid-area: operador;
}

.parametro {
    grid-area: parametro;
}

.button-add-query {
    grid-area: button-add-query;
    margin-top: 21px;
}

.button-consulta-query {
    grid-area: button-consulta-query;
    margin-top: 21px
}

.button-voltar-cadastro {
    grid-area: button-voltar-cadastro;
    margin-top: 21px
}

.cbx-plano-contas-servicos
{

    grid-area: cbx-plano-contas-servicos;
    
}

.retornar {
    grid-area: retornar;
    margin-top: 21px
}

.retornar1 {
    grid-area: retornar1;
    margin-bottom: 5px;
}

.consult1 {
    grid-area: consult1;
}

.operador1 {
    grid-area: operador1;
}

.parametro1 {
    grid-area: parametro1;
}

.button-add-query1 {
    grid-area: button-add-query1;
}

.consult2 {
    grid-area: consult2;
}

.operador2 {
    grid-area: operador2;
}

.parametro1 {
    grid-area: parametro2;
}

.button-add-query2 {
    grid-area: button-add-query2;
}



ul.collection {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

* {
    box-sizing: border-box;
}





/* 2 Column Card Layout */
@media screen and (max-width: 736px) {




    .collection-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

    .item {
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
        border-color: #42a5f5;
    }

    /* Don't display the first item, since it is used to display the header for tabular layouts*/
    .collection-container > li:first-child {
        display: none;
    }

    .attribute::before {
        content: attr(data-name);
    }

    /* Attribute name for first column, and attribute value for second column. */
    .attribute {
        display: grid;
        grid-template-columns: minmax(9em, 30%) 1fr;
    }

    .attribute-center::before {
        content: attr(data-name);
    }

    /* Attribute name for first column, and attribute value for second column. */
    .attribute-center {
        display: grid;
        grid-template-columns: minmax(9em, 30%) 1fr;
    }

    .attribute-right::before {
        content: attr(data-name);
    }

    /* Attribute name for first column, and attribute value for second column. */
    .attribute-right {
        display: grid;
        grid-template-columns: minmax(9em, 30%) 1fr;
    }


    #myHeader {
        display: none;
        color: black;
    }
}




/* 1 Column Card Layout */
@media screen and (max-width:580px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr;
    }

    #myHeader {
        display: none;
        color: black;
    }

    #myItens {
        background-color: white;
    }
}

/* Tabular Layout */
@media screen and (min-width: 737px) {

    #myHeader {
        color: black;
    }


    /* The maximum column width, that can wrap */
    .item-container {
        display: grid;
        grid-template-columns: 3fr 5fr .3fr 5em;
    }

    .item-container-fornecedor {
        display: grid;
        grid-template-columns: 3.7fr 2.2fr 1fr 5em;
    }

        .item-container-fornecedor:hover {
            background-color: #2962ff;
        }

    .item-container-documento {
        display: grid;
        grid-template-columns: 1fr 3fr 5em;
    }

        .item-container-documento:hover {
            background-color: #2962ff;
        }

    .item-container-contato {
        display: grid;
        grid-template-columns: .5fr .3fr .3fr .6fr .6fr .4fr 5em;
    }

        .item-container-contato:hover {
            background-color: #2962ff;
        }

    .item-container-usuario {
        display: grid;
        grid-template-columns: 1fr .5fr 1fr 1fr 5em;
    }

        .item-container-usuario:hover {
            background-color: #2962ff;
        }

    .item-container-tipoProduto {
        display: grid;
        grid-template-columns: .3fr 4fr 5em;
    }

        .item-container-tipoProduto:hover {
            background-color: #2962ff;
        }

    .item-container-grupoProduto {
        display: grid;
        grid-template-columns: .2fr 1fr 3fr 5em;
    }

        .item-container-grupoProduto:hover {
            background-color: #2962ff;
        }

    .item-container-produto {
        display: grid;
        grid-template-columns: .8fr 1.5fr 2.8fr 5em;
    }

        .item-container-produto:hover {
            background-color: #2962ff;
        }

    .item-container-produto-entradas {
        display: grid;
        grid-template-columns: 3fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr ;
    }

        .item-container-produto-entradas:hover {
            background-color: #2962ff;
        }


    .item-container-cte-entradas {
        display: grid;
        grid-template-columns: 3fr .5fr .2fr .5fr .5fr .5fr .2fr .5fr .5fr .2fr .5fr .5fr 5em;
    }

        .item-container-cte-entradas:hover {
            background-color: #2962ff;
        }

    .item-container-produto-composicao {
        display: grid;
        grid-template-columns: .3fr 1.7fr .4fr 1.7fr .3fr 5em;
    }

        .item-container-produto-composicao:hover {
            background-color: #2962ff;
        }

    .item-container-consulta-simples {
        display: grid;
        grid-template-columns: 1fr 6fr 5em;
    }

        .item-container-consulta-simples:hover {
            background-color: #2962ff;
        }

    .item-container-entradas-parametro-gerencial {
        display: grid;
        grid-template-columns: 4fr 1fr 1fr 1fr 5em;
    }

        .item-container-entradas-parametro-gerencial:hover {
            background-color: #2962ff;
        }


    .item-container-entradas-parametro-gerencial-contabil {
        display: grid;
        grid-template-columns: .5fr 7fr 5em;
    }

        .item-container-entradas-parametro-gerencial-contabil:hover {
            background-color: #2962ff;
        }

    .item-container-entradas-parametro-icms {
        display: grid;
        grid-template-columns: 4fr 1.3fr 1fr .8fr 1.2fr 1.3fr 5em;
    }

        .item-container-entradas-parametro-icms:hover {
            background-color: #2962ff;
        }

    .item-container-entradas-parametro-ipi {
        display: grid;
        grid-template-columns: 5fr 1.5fr 1.5fr 5em;
    }

        .item-container-entradas-parametro-ipi:hover {
            background-color: #2962ff;
        }

    .item-container-entradas-parametro-pis {
        display: grid;
        grid-template-columns: 6.5fr 1.5fr 5em;
    }

        .item-container-entradas-parametro-pis:hover {
            background-color: #2962ff;
        }


    .item-container-planocontas {
        display: grid;
        grid-template-columns: .5fr 1fr 6fr 5em;
    }

        .item-container-planocontas :hover {
            background-color: #2962ff;
        }


    .item-container-list-itens {
        display: grid;
        grid-template-columns: .5fr 7fr 5em;
    }

        .item-container-list-itens:hover {
            background-color: #2962ff;
        }


    .planocontas-nivel5 {
        background-color: #B3E5FC;
    }

    .item-container-lancamento-contabil {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr 5fr 1fr;
    }

        .item-container-lancamento-contabil :hover {
            background-color: #2962ff;
        }

    .item-container-registro-contabil {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 6fr 1fr;
    }

        .item-container-registro-contabil :hover {
            background-color: #2962ff;
        }

    .itens {
        width: 100%;
        height: 100%;
    }

    .item-container-conta-pagar {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 5em;
    }

        .item-container-conta-pagar:hover {
            background-color: #2962ff;
        }


    .item-container-contabilidade {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 7fr 5em;
    }

        .item-container-contabilidade:hover {
            background-color: #2962ff;
        }

    .item-container-entrada-cfop {
        display: grid;
        grid-template-columns: 1fr 1fr 4fr 2fr 1fr .5fr .5fr .7fr;
    }

        .item-container-entrada-cfop:hover {
            background-color: #2962ff;
        }

    .item-container-entrada-nao-cfop {
        display: grid;
        grid-template-columns: 1fr 1fr 4fr 2fr 1fr .5fr .7fr;
    }

        .item-container-entrada-nao-cfop:hover {
            background-color: #2962ff;
        }

    .item-container-login-empresas {
        display: grid;
        grid-template-columns: 2.5fr 2fr 1.3fr 1fr;
        border-left: 1px solid #42a5f5;
    }

        .item-container-login-empresas :hover {
            background-color: #2962ff;
        }


    .item-container-login-empresas-padrao {
        display: grid;
        grid-template-columns: 2.5fr 2fr 1.3fr 1fr 1fr;
        border-left: 1px solid #42a5f5;
    }

        .item-container-login-empresas-padrao :hover {
            background-color: #2962ff;
        }


    .item-container-nota-titulo {
        display: grid;
        grid-template-columns: .2fr .6fr 1.6fr .4fr .75fr .75fr .5fr .3fr .2fr .4fr .2fr .4fr .4fr .4fr .8rem;
    }

    .item-container-nota {
        display: grid;
        grid-template-columns: .2fr .6fr 1.6fr .4fr .75fr .75fr .5fr .3fr .2fr .4fr .2fr .4fr .4fr .4fr;
    }

        .item-container-nota :hover {
            background-color: #2962ff;
        }


    .item-container-anexar-documento {
        display: grid;
        grid-template-columns: 6fr 1fr 1fr 4fr;
    }

    .item-container-enviar-documento {
        display: grid;
        grid-template-columns: 1fr .5fr .5fr 3fr 4fr;
    }
    .item-container-enviar-documento-servico {
        display: grid;
        grid-template-columns: 1fr .5fr 3fr 1fr 4fr;
    }


    .item-container-parametro-fiscal-saida {
        display: grid;
        grid-template-columns: 2.5fr .5fr .6fr 1fr .4fr .5fr .5fr .4fr .5fr .5fr .5fr .5fr .6fr 5em;
    }

        .item-container-parametro-fiscal-saida:hover {
            background-color: #2962ff;
        }

    .item-container-parametro-fiscal-icms {
        display: grid;
        grid-template-columns: 2.5fr 2.5fr 1fr 1fr 2.5fr 5em;
    }

        .item-container-parametro-fiscal-icms:hover {
            background-color: #2962ff;
        }


    .item-container-parametro-fiscal-icms-st {
        display: grid;
        grid-template-columns: 2.5fr 2.5fr 1fr 1fr 1fr 1fr 5em;
    }

        .item-container-parametro-fiscal-icms-st:hover {
            background-color: #2962ff;
        }

    .item-container-beneficio-icms {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr 1fr 5em;
    }

        .item-container-beneficio-icms:hover {
            background-color: #2962ff;
        }

    .item-container-parametro-contabil-saida {
        display: grid;
        grid-template-columns: 1fr;
    }

        .item-container-parametro-contabil-saida:hover {
            background-color: #2962ff;
        }






    .item-container-parametro-fiscal-entrada {
        display: grid;
        grid-template-columns: 2.5fr .5fr .6fr 1fr .4fr .5fr .4fr .5fr .5fr .5fr .5fr .6fr 5em;
    }

        .item-container-parametro-fiscal-entrada:hover {
            background-color: #2962ff;
        }

    .item-container-operacoes {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr 1fr 5em;
    }

        .item-container-operacoes:hover {
            background-color: #2962ff;
        }


    .item-container-pessoas {
        display: grid;
        grid-template-columns: .3fr 3fr 1fr .5fr .5fr;
    }

    .item-container-produto-conciliacao {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr 2fr 3fr .5fr;
    }

    .item-container-produto-conciliacao-empresa {
        display: grid;
        grid-template-columns: .3fr 3fr .5fr;
    }


    .item-container-parametro-produto {
        display: grid;
        grid-template-columns: .3fr 1fr 3fr .5fr .5fr .5fr 4fr .5fr;
    }

    .item-container-lancamento-produto {
        display: grid;
        grid-row: auto auto;
        grid-template-columns: .25fr 1fr 2.5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr
    }

    .item-container-contas-pagar-list {
        display: grid;
        grid-template-columns: 1.7fr .3fr .8fr .9fr .5fr .5fr .4fr .4fr .4fr;
    }

    .item-container-contas-pagar-list-total {
        display: grid;
        grid-template-columns: 4.2fr .5fr .4fr .4fr .4fr;
    }


    .item-container-tributo-pagar {
        display: grid;
        grid-template-columns: 1.5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr 5em;
        border-left: 1px solid #42a5f5;
    }

        .item-container-tributo-pagar:hover {
            background-color: #2962ff;
        }

    .item-container-acrescimo {
        display: grid;
        grid-template-columns: .7fr .7fr .7fr .7fr .7fr .7fr .7fr 1.5fr 5em;
        border-left: 1px solid #42a5f5;
    }

        .item-container-acrescimo:hover {
            background-color: #2962ff;
        }

    .item-container-baixa-pagamentos {
        display: grid;
        grid-template-columns: .7fr .52fr .52fr .35fr 1.7fr .6fr .5fr 1.2fr .6fr .45fr .45fr .6fr .6fr .6fr .15fr .9fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-baixa-pagamentos-totais {
        display: grid;
        grid-template-columns: 6.09fr .6fr .45fr .45fr .6fr .6fr .6fr .15fr .9fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-entrada-analitico {
        display: grid;
        grid-template-columns: .2fr .52fr .40fr .52fr .40fr .52fr 1.5fr 1.5fr .4fr .52fr .5fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .2fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-entrada-analitico-totais {
        display: grid;
        grid-template-columns: 6.98fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .2fr;
        border-left: 1px solid #42a5f5;
    }





    .item-container-saida-analitico {
        display: grid;
        grid-template-columns: .2fr .52fr .52fr 1.9fr .7fr 1.5fr .3fr .5fr .2fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .2fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-saida-analitico-totais {
        display: grid;
        grid-template-columns: 6.34fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .2fr;
        ;
        border-left: 1px solid #42a5f5;
    }

    .item-container-saida-sintetico {
        display: grid;
        grid-template-columns: .2fr .52fr .52fr 1.9fr .7fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .2fr;
      
        border-left: 1px solid #42a5f5;
    }

    .item-container-saida-sitentico-totais {
        display: grid;
        grid-template-columns: 3.84fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .45fr .2fr;
        
        border-left: 1px solid #42a5f5;
    }



    .item-container-entrada-analitico-contabilidade {
        display: grid;
        grid-template-columns: .2fr .52fr .3fr .4fr 1.7fr .52fr 1.7fr 1.5fr .4fr .5fr 1.5fr 1.5fr .6fr .52fr .3fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-entrada-analitico-contabilidade-totais {
        display: grid;
        grid-template-columns: 10.74fr .6fr .52fr .3fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-razao-contabilidade {
        display: grid;
        grid-template-columns: .2fr .5fr 1.5fr 1.5fr 2fr .5fr 1fr 1fr .5fr .5fr .3fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-razao-contabilidade-totais {
        display: grid;
        grid-template-columns: 8.7fr .5fr .3fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-razao-contabilidade-1 {
        display: grid;
        grid-template-columns: .5fr 2fr 4fr .8fr .8fr .8fr .2fr .2fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-razao-contabilidade-1-totais {
        display: grid;
        grid-template-columns: 6.5fr .8fr .8fr 1.2fr;
        border-left: 1px solid #42a5f5;
    }


    .item-container-importacao-contabilidade {
        display: grid;
        grid-template-columns: .5fr 1fr 4fr 1fr 1fr .3fr;
        border-left: 1px solid #42a5f5;
    }



    .item-container-baixa-recebimentos {
        display: grid;
        grid-template-columns: .4fr .4fr .3fr .52fr .52fr .35fr 1.7fr .6fr .5fr 1.2fr .6fr .45fr .45fr .6fr .6fr .6fr .15fr .9fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-baixa-recebimentos-totais {
        display: grid;
        grid-template-columns: 6.49fr .6fr .45fr .45fr .6fr .6fr .6fr .15fr .9fr;
        border-left: 1px solid #42a5f5;
    }



    .item-container-cheque-emitido {
        display: grid;
        grid-template-columns: 1fr 1.5fr 1.5fr 4fr 1.5fr 1.5fr 5em;
        border-left: 1px solid #42a5f5;
    }



    .item-container-baixa-cheque-terceiro-titulo {
        display: grid;
        grid-template-columns: .8fr .6fr .6fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr .2fr .8rem;
        border-left: 1px solid #42a5f5;
    }

    .item-container-baixa-cheque-terceiro {
        display: grid;
        grid-template-columns: .8fr .6fr .6fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr .2fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-baixa-cheque-terceiro-total {
        display: grid;
        grid-template-columns: 8fr 1fr 1fr .2fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-adiantamento-fornecedor-titulo {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr 1fr 4fr 1fr .8fr .8rem;
        border-left: 1px solid #42a5f5;
    }

    .item-container-adiantamento-fornecedor {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr 1fr 4fr 1fr .8fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-transferencia-numerario-titulo {
        display: grid;
        grid-template-columns: 1fr 2fr 2fr 4fr 3fr 1fr .8fr .8rem;
        border-left: 1px solid #42a5f5;
    }

    .item-container-transferencia-numerario {
        display: grid;
        grid-template-columns: 1fr 2fr 2fr 4fr 3fr 1fr .8fr;
        border-left: 1px solid #42a5f5;
    }


    .item-container-extrato-bancario-titulo {
        display: grid;
        grid-template-columns: .5fr 2fr .5fr .5fr .5fr .5fr 1.5fr .5fr .2fr .8rem;
        border-left: 1px solid #42a5f5;
    }

    .item-container-extrato-bancario {
        display: grid;
        grid-template-columns: .5fr 2fr .5fr .5fr .5fr .5fr 1.5fr .5fr .2fr;
        border-left: 1px solid #42a5f5;
    }

    .item-container-extrato-bancario-total {
        display: grid;
        grid-template-columns: 3fr .5fr .5fr .5fr 2.2fr;
        border-left: 1px solid #42a5f5;
    }


    .item-container-cadastro-produto-processo-titulo {
        display: grid;
        grid-template-columns: 1fr 2fr 2.8fr 2.1fr 1.7fr .75fr .75fr .75fr .75fr 1fr .3fr .77rem;
    }

    .item-container-cadastro-produto-processo {
        display: grid;
        grid-template-columns: 1fr 2fr 2.8fr 2.1fr 1.7fr .75fr .75fr .75fr .75fr 1fr .3fr;
    }

    .item-container-cadastro-produto-selecionar-titulo {
        display: grid;
        grid-template-columns: 1fr 2fr 2.8fr 2.1fr 1.7fr .75fr .75fr .75fr 1fr .3fr .77rem;
    }

    .item-container-cadastro-produto-selecionar {
        display: grid;
        grid-template-columns: 1fr 2fr 2.8fr 2.1fr 1.7fr .75fr .75fr .75fr 1fr .3fr;
    }




    .item-container-cadastro-familia-produto-titulo {
        display: grid;
        grid-template-columns: 2fr 2.5fr 2fr 1.5fr 2fr .75fr .75fr .3fr .77rem;
    }

    .item-container-cadastro-familia-produto {
        display: grid;
        grid-template-columns: 2fr 2.5fr 2fr 1.5fr 2fr .75fr .75fr .3fr;
    }


    .item-container-consulta-modal-titulo {
        display: grid;
        grid-template-columns: 2fr 2fr 4fr .77rem;
    }

    .item-container-consulta-modal {
        display: grid;
        grid-template-columns: 2fr 2fr 4fr;
    }

    .item-container-cadastro-inutilizacao-titulo {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 2fr 6fr .3fr .77rem;
    }

    .item-container-cadastro-inutilizacao {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 2fr 6fr .3fr;
    }





    .item-container-acoes-modal-titulo {
        display: grid;
        grid-template-columns: 5fr 1fr .77rem;
    }

    .item-container-acoes-modal {
        display: grid;
        grid-template-columns: 5fr 1fr;
    }

    .item-container-consulta-documento-titulo {
        display: grid;
        grid-template-columns: 1fr 5fr 1fr 1fr.77rem;
    }

    .item-container-consulta-documento {
        display: grid;
        grid-template-columns: 1fr 5fr 1fr 1fr;
    }


    .item-container-consulta-cliente-titulo {
        display: grid;
        grid-template-columns: 1fr 1fr 4fr 2fr .5fr .77rem;
    }

    .item-container-consulta-cliente {
        display: grid;
        grid-template-columns: 1fr 1fr 4fr 2fr .5fr;
    }

    .item-container-cliente-tipo-titulo {
        display: grid;
        grid-template-columns: 1fr 2.5fr 3.5fr 2.5fr .7fr .7fr 1fr .77rem;
    }

    .item-container-cliente-tipo {
        display: grid;
        grid-template-columns: 1fr 2.5fr 3.5fr 2.5fr .7fr .7fr 1fr;
    }

    .item-container-desconto-titulo {
        display: grid;
        grid-template-columns: .5fr .5fr 2.4fr .4fr .4fr .7fr 1fr .77rem;
    }

    .item-container-desconto {
        display: grid;
        grid-template-columns: .5fr .5fr 2.4fr .4fr .4fr .7fr 1fr;
    }

    .item-container-antecipacao-titulo {
        display: grid;
        grid-template-columns: .6fr .5fr .5fr 2.6fr .4fr .3fr .6fr .4fr .4fr .5fr .6fr .6fr .77rem;
    }

    .item-container-antecipacao {
        display: grid;
        grid-template-columns: .6fr .5fr .5fr 2.6fr .4fr .3fr .6fr .4fr .4fr .5fr .6fr .6fr;
    }

    .item-container-antecipacao-totais {
        display: grid;
        grid-template-columns: 4.9fr .6fr .4fr .4fr .5fr .6fr .6fr;
    }

    .item-container-antecipacao-consulta-titulo {
        display: grid;
        grid-template-columns: .5fr 1fr 1fr 1fr .7fr .7fr .7fr 5rem .77rem;
    }

    .item-container-antecipacao-consulta {
        display: grid;
        grid-template-columns: .5fr 1fr 1fr 1fr .7fr .7fr .7fr 5rem;
    }

    .item-container-antecipacao-consulta-totais {
        display: grid;
        grid-template-columns: 3.5fr .7fr .7fr .7fr 5rem;
    }


    .item-container-relatorio-modal-titulo {
        display: grid;
        grid-template-columns: 5fr 2fr 1fr .77rem;
    }

    .item-container-relatorio-modal {
        display: grid;
        grid-template-columns: 5fr 2fr 1fr;
    }







    #myHeader {
        background-color: rgb(200, 227, 252);
    }

    #myItens {
        background-color: white;
    }

    #Aberto {
        background-color: white;
    }

    #parcial {
        background-color: #f3df64;
    }

    #parcial1 {
        background-color: #f5ec4f;
    }

    #ok {
        background-color: #9bfc60;
    }

    #analisado {
        background-color: #d4fc60;
    }


    #atencao {
        background-color: #feaa40;
    }

    #en_analise {
        background-color: #feaa40;
    }

    #erro {
        background-color: #fb5d5d;
    }

    #cancelado {
        background-color: #f4dada;
    }

    #nao_autorizado {
        background-color: #febbbb;
    }

    #financeiro {
        background-color: #c160fc;
    }

    #financeiro1 {
        background-color: #60a6fc;
    }


    #Ajuste {
        background-color: #feaa40;
    }

    #Gravar {
        background-color: white;
    }


    #Baixado {
        background-color: #adefc8;
    }

    #Gravado {
        background-color: #cff5fa;
    }

    #gravado {
        background-color: #bbdefb;
    }

    #alterado {
        background-color: #e3f2fd;
    }

    #removido {
        background-color: #f4dada;
    }

    #faturado_removido {
        background-color: #f5c1c1;
    }


    #faturado {
        background-color: #9bfc60;
    }

    #Conciliado {
        background-color: #9bfc60;
    }

    #nao-conciliado {
        background-color: #feaa40;
    }


    #Devolvido {
        background-color: #f7d29f;
    }

    #Verificar {
        background-color: #f7d29f;
    }

    #my-totais {
        background-color: rgb(226, 239, 251);
        font-size: 14px;
    }

    #my-totais1 {
        background-color: rgb(226, 239, 251);
    }

    #my-inicio {
        background-color: rgb(190, 191, 191);
        font-size: 14px;
    }

    .selecionado {
        cursor: pointer;
    }


        .selecionado:hover {
            background-color: #2962ff;
        }

    .attribute-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
    }

    /* Definition of wrapping column width for attribute groups. */

    .border {
        border-left: 1px solid;
        border-color: #42a5f5;
    }

    .collection {
        border-top: 1px solid;
        border-color: #42a5f5;
    }

    /* In order to maximize row lines, only display one line for a cell */
    .attribute {
        border-right: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        padding-left: 2px;
        padding-right: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 11px;
    }

    .attribute-13px {
        border-right: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        padding-left: 2px;
        padding-right: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 13px;
    }




    .attribute-border-left {
        border-right: 1px solid #42a5f5;
        border-left: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        padding-left: 2px;
        padding-right: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 11px;
    }

    .attribute-none {
        background-color: white;
        padding: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 11px;
    }

    .item-container:hover {
        background-color: rgb(200, 227, 252);
    }


    /* Center header labels */
    .attribute {
        display: flex;
        align-items: center;
        justify-content: left;
        text-overflow: initial;
        overflow: auto;
        white-space: normal;
    }

    .attribute-center-titulo {
        display: flex;
        align-items: center;
        border-right: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        border-top: 1px solid #42a5f5;
        text-overflow: ellipsis;
        justify-content: center;
        text-align: center;
        font-size: 11px;
    }






    .attribute-center {
        display: flex;
        align-items: center;
        border-right: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-overflow: initial;
        justify-content: center;
        text-align: center;
        font-size: 11px;
    }

    .attribute-right {
        display: flex;
        align-items: center;
        border-right: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-overflow: initial;
        justify-content: right;
        text-align: center;
        font-size: 11px;
        padding-right: 2px;
    }


    .attribute-center10px {
        display: flex;
        align-items: center;
        border-right: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-overflow: initial;
        text-align: center;
        font-size: 13px;
        padding-left: 10px;
    }

    .attribute-center15px {
        display: flex;
        align-items: center;
        border-right: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-overflow: initial;
        text-align: center;
        font-size: 13px;
        padding-left: 15px;
    }

    .attribute-center20px {
        display: flex;
        align-items: center;
        border-right: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-overflow: initial;
        text-align: center;
        font-size: 13px;
        padding-left: 20px;
    }

    .attribute-center25px {
        display: flex;
        align-items: center;
        border-right: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-overflow: initial;
        text-align: center;
        font-size: 13px;
        padding-left: 25px;
    }

    .attribute-center30px {
        display: flex;
        align-items: center;
        border-right: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-overflow: initial;
        text-align: center;
        font-size: 13px;
        padding-left: 30px;
    }
}

/* 2 Column Card Layout */
@media screen and (max-width: 736px) {
    .collection-container-reader {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

    .item-reader {
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
        border-color: #42a5f5;
    }

    /* Don't display the first item, since it is used to display the header for tabular layouts*/
    .collection-container-reader > li:first-child {
        display: none;
    }

    .attribute-reader::before {
        content: attr(data-name);
    }

    /* Attribute name for first column, and attribute value for second column. */
    .attribute-reader {
        display: grid;
        grid-template-columns: minmax(9em, 30%) 1fr;
    }
}

/* 1 Column Card Layout */
@media screen and (max-width:580px) {
    .collection-container-reader {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/*fim Consulta*/
/*Inicio paginador*/

.paginador {
    display: grid;
    grid-template-columns: 10fr;
    grid-template-rows: 1fr;
    grid-gap: 0;
    grid-template-areas: "paginador-button-anterior paginador-button-primeiro paginador-button-segundo paginador-button-terceiro paginador-button-quarto paginador-button-quinto paginador-button-sexto paginador-button-ultimo paginador-button-proximo paginador-registros";
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.paginador-button-anterior {
    grid-area: paginador-button-anterior;
    margin-right: 6px;
}

.paginador-button-primeiro {
    grid-area: paginador-button-primeiro;
    margin-right: 6px;
}

.paginador-button-segundo {
    grid-area: paginador-button-segundo;
    margin-right: 2px;
    margin-left: 2px;
}

.paginador-button-terceiro {
    grid-area: paginador-button-terceiro;
    margin-right: 2px;
}

.paginador-button-quarto {
    grid-area: paginador-button-quarto;
    margin-right: 2px;
}

.paginador-button-quinto {
    grid-area: paginador-button-quinto;
    margin-right: 2px;
}

.paginador-button-sexto {
    grid-area: paginador-button-sexto;
    margin-right: 4px;
}

.paginador-button-ultimo {
    grid-area: paginador-button-ultimo;
    margin-right: 2px;
    margin-left: 2px;
}

.paginador-button-proximo {
    grid-area: paginador-button-proximo;
    margin-left: 6px;
}

.paginador-registros {
    grid-area: paginador-registros;
    margin-left: 15px;
}

.paginador-button {
    border: 1px solid;
    border-color: blue;
    height: 45px;
    width: 35px;
    text-align: center;
    line-height: 20px;
    padding-top: 13px;
    color: #3f51b5;
    background-color: #ddd
}

.paginador-button1 {
    width: 35px;
}

.paginador-button-quatro {
    width: 42px;
}

.paginador-button-cinco {
    width: 49px;
}

.paginador-button-seis {
    width: 58px;
}

.paginador-button:hover {
    color: white;
    background-color: #42a5f5
}

.paginador-button-select {
    color: White;
    background-color: #1739f6
}

.select-pagina-registros {
    display: grid;
    grid-template-columns: .4fr 1fr;
    grid-template-rows: 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "paginador-registros label-pagina-registros";
}

.label-pagina-registros {
    grid-area: label-pagina-registros;
    padding-top: 10px;
}

.paginador-registros {
    grid-area: paginador-registros;
}

/*Fim paginador*/
/*Inicio Anexar Documento Fornecedor*/
.documento-fornecedor {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "razao-social" "nome" "nome-documento" "descricao-documento" "anexar-documento" "download-documento";
    width: 100%;
}

.nome {
    grid-area: nome;
    text-overflow: ellipsis;
}


.razao-social {
    grid-area: razao-social;
    text-overflow: ellipsis;
}

.nome-documento {
    grid-area: nome-documento;
    text-overflow: ellipsis;
}

.descricao-documento {
    grid-area: descricao-documento;
    text-overflow: ellipsis;
}

.anexar-documento {
    grid-area: anexar-documento;
    text-overflow: ellipsis;
}

.download-documento {
    grid-area: download-documento;
}

.inpult-anexar {
    height: 40px;
    padding-top: 5px;
    background-color: white;
    color: white;
    border-color: none;
}

.name-arquivo {
    grid-area: name-arquivo;
    margin-top: 5px;
}

consulta-documentos-itens {
    overflow-y: auto;
}

.consulta-documentos-itens ul {
    overflow-y: scroll;
    height: 73vh;
}

.consulta-documentos-itens ::-webkit-scrollbar {
    background-color: azure !important;
}



@media (min-width: 768px) { /* 768px */

    .documento-fornecedor {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(5, 1fr);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "razao-social razao-social razao-social nome" "nome-documento nome-documento . ." "descricao-documento descricao-documento descricao-documento descricao-documento" "anexar-documento  . . ." "anexar-documento  . . ." ". download-documento download-documento .";
        width: 100%;
    }


    .consulta-documentos-itens {
        overflow-y: auto;
    }

        .consulta-documentos-itens ul {
            overflow-y: scroll;
            height: 55vh;
        }

        .consulta-documentos-itens ::-webkit-scrollbar {
            background-color: azure !important;
        }
}



/*Fim Anexar Documento fornecedor*/
/*Inicio Consulta fixa*/

.consulta-fixa-grupo-subtitulo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "consulta-fixa-subtitulo" "consulta-fixa-btn";
    width: 100%;
}

.consulta-fixa-subtitulo {
    grid-area: consulta-fixa-subtitulo;
}

.consulta-fixa-btn {
    grid-area: consulta-fixa-btn;
}

@media (min-width: 768px) { /* 768px */

    .consulta-fixa-grupo-subtitulo {
        display: grid;
        grid-template-columns: .7fr 1fr 1fr 1fr .5fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: ". . consulta-fixa-subtitulo . consulta-fixa-btn";
        width: 100%;
    }

    .consulta-fixa-subtitulo {
        grid-area: consulta-fixa-subtitulo;
        margin-top: 5px;
    }
}

/*Fim consulta fixa*/

/*Inicio consulta base parametro fixa*/

.consulta-base-parametro {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "parametro" "button-consulta-query" "button-voltar-cadastro";
    width: 100%;
}


@media (min-width: 768px) { /* 768px */

    .consulta-base-parametro {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "parametro parametro parametro button-consulta-query  button-voltar-cadastro";
        width: 100%;
    }
}



/*Fim consulta base parametro*/




/*Inicio Login*/
.body-layout-login {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    
    margin: 0;
    padding: 0;
    grid-template-areas: ". wrapper-login .";
    position: relative;
    width: auto;
    height: 100vh;
    position: relative;
    overflow-y:auto;
    /*background-color: #40c4ff*/
    /* background-image: url("../images/nuvemLogin1.jpeg");*/
    /*background-image: url("../images/nuvemLogin.jpeg");*/
    background-image: url("../images/azulLogin.jpeg");
    background-size: cover;
}



.logo-login {
    height: 25px;
    padding-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wrapper-login {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: .3fr 1fr .3fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "header-login header-login header-login" ". login login-empresa" "footer-login footer-login footer-login";
    grid-area: wrapper-login;
    width: auto;
    height: 100vh;
    margin: 0;
}





.header-login {
    grid-area: header-login;
}


.login {
    grid-area: login;
    background-color: white;
    width: 330px;
    height: 400px;
    padding: 10px;
}


.login-empresa {
    grid-area: login-empresa;
    background-color: white;
    width: auto;
    height: auto;
    margin:0;
    padding: 10px;
  
}

.login-esqueceu-senha {
    grid-area: login-empresa;
    background-color: white;
    width: 330px;
    height: 390px;
    padding: 10px;
}

.login-redefinir-senha {
    grid-area: login-empresa;
    background-color: white;
    width: 330px;
    height: 390px;
    padding: 10px;
}


@media (min-width: 768px) { /* 768px */


    .login-empresa {
        grid-area: login-empresa;
        background-color: white;
        width: 800px;
        height: auto;
        padding: 10px;
    }

    .login-esqueceu-senha {
        grid-area: login-empresa;
        background-color: white;
        width: 550px;
        height: 310px;
        padding: 10px;
    }

    .login-redefinir-senha {
        grid-area: login-empresa;
        background-color: white;
        width: 550px;
        height: 450px;
        padding: 10px;
    }


    .relacao-empresas-login {
        overflow: auto
    }
}


.inicial {
    display: grid;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100vw;
    height: 100vh;
    position: relative;
    /*background-color: #40c4ff*/
    /* background-image: url("../images/nuvemLogin1.jpeg");*/
    /*background-image: url("../images/nuvemLogin.jpeg");*/
    background-image: url("../images/azulLogin.jpeg");
    background-size: cover;
}


.button-login {
    background-color: rgb(41,127,184);
}




.footer-login {
    grid-area: footer-login;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: white;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 100%;
}

.titulo-Login {
    padding-top: 10px;
    margin-left: 15px;
}

.controles-login {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 90%;
    font-size: 14px;
}

.error-texto-login {
    color: red;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
}

/*Fim Login*/


.body-layout-empty {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    height: 100vh;
    position: relative;
    background-size: cover;
}






/*esqueceu senha*/

.register-esqueceu-senha {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "esqueceu-senha" "btn-esqueceu-senha" "esqueceu-senha-mensagem";
    height: 100%;
}

@media (min-width: 768px) {

    .register-esqueceu-senha {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: .5fr 1fr 1fr 1fr;
        grid-gap: 2rem;
        grid-template-areas: " . " "esqueceu-senha" "btn-esqueceu-senha" "esqueceu-senha-mensagem";
        height: 100%;
    }
}


.esqueceu-senha {
    grid-area: esqueceu-senha;
}

.btn-esqueceu-senha {
    grid-area: btn-esqueceu-senha;
}

.esqueceu-senha-mensagem {
    grid-area: esqueceu-senha-mensagem;
}

/*Inicio CadastroUsuarios*/
header-usuario {
    grid-area: header-usuario;
    margin-left: 5px;
    vertical-align: central;
}

.nome-usuario {
    grid-area: nome-usuario;
    text-overflow: ellipsis;
}

.status-usuario {
    grid-area: status-usuario;
    text-overflow: ellipsis;
}

.nome-identificacao {
    grid-area: nome-identificacao;
    text-overflow: ellipsis;
}


.usuario {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 30px 1px 310px 1px 90px 1px;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "header-usuario" "separation" "register-usuario" "separation1" "buttons" "separation2";
    width: 100%;
}



.register-usuario-conteudo {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: repeat(14, auto);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "status-usuario status-usuario" "nome-usuario nome-usuario" "nome-identificacao nome-identificacao" "telefone telefone-celular" "email email" "email-particular email-particular" "email-confirmacao email-confirmacao" "cep cep" "logradouro logradouro" "numero numero" "complemento complemento" "bairro bairro" "uf uf" "cidade cidade";
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}


@media (min-width: 768px) { /* 768px */


    .register-usuario-conteudo {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: repeat(4, 1fr);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "status-usuario nome-usuario nome-usuario nome-identificacao nome-identificacao" "telefone telefone-celular email email-particular email-confirmacao" "cep logradouro logradouro numero complemento" "bairro bairro uf cidade cidade";
        width: 100%;
    }

    .buttons-conteudo-usuarios {
        display: grid;
        grid-template-columns: 2fr 4fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "servicos-usuarios buttons-conteudo";
        width: 100%;
    }

    .servicos-usuarios {
        grid-area: servicos-usuarios;
    }
}

/*Fim CadastroUsuarios*/

/*Inicio Cadastro permissões*/
.titulo-formulario-permissao {
    grid-area: titulo-formulario-permissao;
}

/*.register-conteudo-permissoes {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
     row-gap: .5rem;  column-gap: .5rem;
    grid-template-areas: "menu-itens" "nome-usuario" "titulo-formulario-permissao" "permissoes-area";
    width: 100%;
    margin-top: 15px;
    margin-right: 5px;
    margin-left: 5px;
}*/

.permissoes-area {
    grid-area: permissoes-area;
}





/*  
@media (min-width: 768px) { 
    .register-conteudo-permissoes {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: 30px 5px auto auto;
         row-gap: .5rem;  column-gap: .5rem;
        grid-template-areas: "menu-itens nome-usuario" "menu-itens separation-form" "menu-itens permissoes-area" "menu-itens button-permissoes-area";
        width: 100%;
    }

    .permissoes-usuario {
        display: grid;
        padding: 15px;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr 1fr  ;
         row-gap: .5rem;  column-gap: .5rem;
        grid-template-areas: "cad-usuario-entrar cad-usuario-gravar cad-usuario-alterar cad-usuario-remover cad-usuario-consultar" "cad-usuario-bloquear cad-usuario-desbloquear . . .";
        width: 100%;
    }
    .permissoesAdd {
        display: grid;
        padding: 15px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
         row-gap: .5rem;  column-gap: .5rem;
        grid-template-areas: "cad-permissoes-entrar cad-permissoes-gravar";
        width: 100%;
    }
    .permissoes-fornecedor {
        display: grid;
        padding: 15px;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr;
         row-gap: .5rem;  column-gap: .5rem;
        grid-template-areas: "cad-fornecedor-entrar cad-fornecedor-gravar cad-fornecedor-alterar cad-fornecedor-remover cad-fornecedor-consultar";
        width: 100%;
    }
    .button-permissoes-area {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 50px 100px 50px;
         row-gap: .5rem;  column-gap: .5rem;
        grid-template-areas: " . button-permissoes ." ". informacoes-permissoes ." " . button-permissoes-retornar .";
        width: 100%;
    }

}
*/

.register-conteudo-permissoes1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 30px 5px auto auto auto auto auto auto auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "nome-usuario" "separation-form" "permissao-empresa" "perfil-usuario" "button-pefis-usuario " "perfis-atribuidos" "button-permissoes-gravar" "informacoes-permissoes" "permissoes-retornar";
    width: 100%;
}


@media (min-width: 768px) { /* 768px */
    .register-conteudo-permissoes1 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 30px 5px auto auto auto auto auto auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: ". nome-usuario ." "separation-form separation-form separation-form" ". permissao-empresa ." ". perfil-usuario ." " . button-pefis-usuario ." ". perfis-atribuidos ." " . button-permissoes-gravar ." " . informacoes-permissoes ." " . permissoes-retornar .";
        width: 100%;
    }
}

.permissao-empresa {
    grid-area: permissao-empresa;
}

.perfil-usuario {
    grid-area: perfil-usuario;
}


.button-pefis-usuario {
    grid-area: button-pefis-usuario;
}

.button-permissoes-gravar {
    grid-area: button-permissoes-gravar;
}

.informacoes-permissoes {
    grid-area: informacoes-permissoes;
}

.permissoes-retornar {
    grid-area: permissoes-retornar;
}

.perfis-atribuidos {
    grid-area: perfis-atribuidos;
}

.box-perfis {
    border: 1px solid #42a5f5;
    width: 100%;
    height: 120px;
    margin-top: 7px;
    padding-right: 5px;
    overflow: auto;
}

.permissoes-fornecedor {
    display: grid;
    padding: 15px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "cad-fornecedor-entrar cad-fornecedor-gravar cad-fornecedor-alterar cad-fornecedor-remover cad-fornecedor-consultar";
    width: 100%;
}

.button-permissoes-area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 50px 100px 50px;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: " . button-permissoes ." ". informacoes-permissoes ." " . button-permissoes-retornar .";
    width: 100%;
}


.button-permissoes {
    grid-area: button-permissoes;
    border-radius: 5px;
    background-color: #00c853;
}

.button-permissoes-retornar {
    margin-top: 15px;
    grid-area: button-permissoes-retornar;
    border-radius: 5px;
    background-color: #42a5f5;
}

.informacoes-permissoes {
    grid-area: informacoes-permissoes;
}

.button-permissoes-area {
    grid-area: button-permissoes-area;
}

.cad-usuario-entrar {
    grid-area: cad-usuario-entrar;
}

.cad-usuario-gravar {
    grid-area: cad-usuario-gravar;
}

.cad-usuario-alterar {
    grid-area: cad-usuario-alterar;
}

.cad-usuario-remover {
    grid-area: cad-usuario-remover;
}

.cad-usuario-consultar {
    grid-area: cad-usuario-consultar;
}

.cad-usuario-bloquear {
    grid-area: cad-usuario-bloquear;
}

.cad-usuario-desbloquear {
    grid-area: cad-usuario-desbloquear;
}

.cad-permissoes-entrar {
    grid-area: cad-permissoes-entrar;
}

.cad-permissoes-gravar {
    grid-area: cad-permissoes-gravar;
}

.cad-fornecedor-entrar {
    grid-area: cad-fornecedor-entrar;
}

.cad-fornecedor-gravar {
    grid-area: cad-fornecedor-gravar;
}

.cad-fornecedor-alterar {
    grid-area: cad-fornecedor-alterar;
}

.cad-fornecedor-remover {
    grid-area: cad-fornecedor-remover;
}

.cad-fornecedor-consultar {
    grid-area: cad-fornecedor-consultar;
}

.permissao-empresa {
    grid-area: permissao-empresa;
}

.permissoes-empresa-area {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "permissao-empresa" "button-permissoes " "informacoes-permissoes" "button-permissoes-retornar";
    width: 100%;
}



@media (min-width: 768px) { /* 768px */


    .permissoes-empresa-area {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: ". permissao-empresa ." ". button-permissoes ." " . informacoes-permissoes . " " . button-permissoes-retornar . ";
        width: 100%;
    }
}

/*Fim Cadastro permissões*/

/*Inicio tipo de produto*/

.tipo-produto-conteudo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "tipo-produto-id " "tipo-produto-descricao";
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

@media(min-width: 768px) {
    .tipo-produto-conteudo {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: repeat(2, auto);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "tipo-produto-id . . ." "tipo-produto-descricao tipo-produto-descricao tipo-produto-descricao tipo-produto-descricao";
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
    }
}

.tipo-produto-id {
    grid-area: tipo-produto-id;
}

.tipo-produto-descricao {
    grid-area: tipo-produto-descricao;
}


/*Fim tipo de produto*/

/*Inicio grupo de produto*/

.textarea-descricao {
    height: 100px !important;
}

.grupo-produto-conteudo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "grupo-produto-id" "grupo-tipo-produto" "grupo-produto-nome" "grupo-produto-descricao";
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

@media(min-width: 768px) {
    .textarea-descricao {
        height: 35px !important;
    }

    .grupo-produto-conteudo {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: repeat(3, auto);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "grupo-produto-id . . ." "grupo-tipo-produto grupo-tipo-produto grupo-produto-nome grupo-produto-nome" "grupo-produto-descricao grupo-produto-descricao grupo-produto-descricao grupo-produto-descricao";
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
    }
}

.grupo-produto-id {
    grid-area: grupo-produto-id;
}

.grupo-tipo-produto {
    grid-area: grupo-tipo-produto;
}

.grupo-produto-nome {
    grid-area: grupo-produto-nome;
}

.grupo-produto-descricao {
    grid-area: grupo-produto-descricao;
}

/*Fim grupo de produto*/


/*Inicio Familia do produto*/

.textarea-descricao {
    height: 100px !important;
}

.familia-produto-conteudo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, auto);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "grupo-produto-id" "grupo-tipo-produto" "grupo-produto-nome" "grupo-produto-descricao" "familia-ncm" "familia-ExNcm" "familia-Cest";
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

@media(min-width: 768px) {
    .textarea-descricao {
        height: 35px !important;
    }

    .familia-produto-conteudo {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: repeat(3, auto);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "grupo-produto-id grupo-tipo-produto grupo-tipo-produto grupo-produto-nome grupo-produto-nome grupo-produto-nome" "grupo-produto-descricao grupo-produto-descricao grupo-produto-descricao grupo-produto-descricao grupo-produto-descricao grupo-produto-descricao" "familia-ncm familia-ncm familia-ExNcm familia-ExNcm familia-Cest familia-Cest";
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
    }
}

.familia-ncm {
    grid-area: familia-ncm;
}

.familia-ExNcm {
    grid-area: familia-ExNcm;
}

.grupo-produto-nome {
    grid-area: grupo-produto-nome;
}

.familia-Cest {
    grid-area: familia-Cest;
}

/*Fim grupo de produto*/

/*Inicio produto*/
.register-conteudo-produto {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "menu-itens" "pagina-produto";
    width: 100%;
}

.pagina-produto {
    grid-area: pagina-produto;
}

.produto-conteudo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(11, 1fr);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "codigo" "codigo-cliente" "codigo-barras" "familia" "descricao-fiscal" "descricao-comercial" "unidade-medida" "peso-bruto" "peso-liquido" "ncm" "cest";
    width: 100%;
}

@media(min-width: 768px) {




    .register-conteudo-produto {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        /* grid-template-areas: "menu-itens pagina-produto" "menu-itens pagina-produto" "menu-itens pagina-produto" "menu-itens pagina-produto" "menu-itens pagina-produto";*/
        grid-template-areas: "menu-itens pagina-produto";
        width: 98%;
    }

    .produto-conteudo {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: repeat(4, 1fr);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "codigo codigo-cliente codigo-barras familia familia familia" "descricao-fiscal descricao-fiscal descricao-fiscal descricao-fiscal descricao-fiscal descricao-fiscal" "descricao-comercial descricao-comercial descricao-comercial descricao-comercial descricao-comercial descricao-comercial" "unidade-medida unidade-medida peso-bruto peso-liquido ncm cest";
        width: 100%;
    }
}



.codigo-cliente {
    grid-area: codigo-cliente;
}

.codigo-barras {
    grid-area: codigo-barras;
}

.familia {
    grid-area: familia;
}

.unidade-medida {
    grid-area: unidade-medida;
}



.descricao-fiscal {
    grid-area: descricao-fiscal;
    text-overflow: ellipsis;
}


.descricao-comercial {
    grid-area: descricao-comercial;
    text-overflow: ellipsis;
}




.peso-bruto {
    grid-area: peso-bruto;
}

.peso-liquido {
    grid-area: peso-liquido;
}

.ncm {
    grid-area: ncm;
}

.cest {
    grid-area: cest;
}

/*Fim produto*/
/*Inicio produto conversão*/


.produto-conversao-conteudo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, 1fr);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "codigo-conversao" "codigo-cliente-conversao" "descricao-comercial-conversao" "text-informativo-conversao" "identificacao-informacao" "unidade-medida-recebida" "fator" "unidade-medida-estoque";
    width: 100%;
}

@media(min-width: 768px) {

    .produto-conversao-conteudo {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: repeat(4, 1fr);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "codigo-conversao codigo-cliente-conversao descricao-comercial-conversao descricao-comercial-conversao descricao-comercial-conversao descricao-comercial-conversao descricao-comercial-conversao" ". text-informativo text-informativo text-informativo text-informativo text-informativo  ." "identificacao-informacao identificacao-informacao identificacao-informacao identificacao-informacao . . ." "unidade-medida-recebida unidade-medida-recebida unidade-medida-recebida fator unidade-medida-estoque unidade-medida-estoque unidade-medida-estoque";
        width: 100%;
    }
}

.codigo-conversao {
    grid-area: codigo-conversao;
}

codigo-cliente-conversao {
    grid-area: codigo-cliente-conversao;
}

.descricao-comercial-conversao {
    grid-area: descricao-comercial-conversao;
}

.text-informativo {
    grid-area: text-informativo;
    font-size: 22px;
    margin: 5px;
    color: #3f51b5;
}

.identificacao-informacao {
    grid-area: identificacao-informacao;
    text-overflow: ellipsis;
}

.unidade-medida-recebida {
    grid-area: unidade-medida-recebida;
    text-overflow: ellipsis;
}

.fator {
    grid-area: fator;
    text-overflow: ellipsis;
}

.unidade-medida-estoque {
    grid-area: unidade-medida-estoque;
    text-overflow: ellipsis;
}

/*Fim produto conversão*/

/*Inicio produto composicao*/
.produto-composicao-conteudo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(12, 1fr);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "codigo" "codigo-cliente" "descricao-comercial" "text-informativo" "btn-get-produto" "codigo-cliente1" "descricao-comercial1" "unidade-medida" "quantidade" "tipo" "codigo-produto-substituido" "prioridade";
    width: 100%;
}

@media(min-width: 768px) {

    .produto-composicao-conteudo {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(4, 1fr);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "codigo codigo-cliente codigo-cliente descricao-comercial descricao-comercial descricao-comercial descricao-comercial descricao-comercial" " . text-informativo text-informativo text-informativo text-informativo text-informativo . ." "btn-get-produto  codigo-cliente1 codigo-cliente1 descricao-comercial1 descricao-comercial1 descricao-comercial1 descricao-comercial1 descricao-comercial1" "unidade-medida unidade-medida quantidade tipo codigo-produto-substituido codigo-produto-substituido codigo-produto-substituido prioridade";
        width: 100%;
    }
}

.codigo-cliente1 {
    grid-area: codigo-cliente1;
}



.descricao-comercial1 {
    grid-area: descricao-comercial1;
    text-overflow: ellipsis;
}


.codigo-cliente {
    grid-area: codigo-cliente;
}

.codigo-cliente1 {
    grid-area: codigo-cliente1;
}

.quantidade {
    grid-area: quantidade;
}

.unidade-medida {
    grid-area: unidade-medida;
    text-overflow: ellipsis;
}



.descricao-comercial {
    grid-area: descricao-comercial;
    text-overflow: ellipsis;
}

.descricao-comercial1 {
    grid-area: descricao-comercial1;
    text-overflow: ellipsis;
}

.btn-get-produto {
    grid-area: btn-get-produto;
    margin-top: 23px
}

.tipo {
    grid-area: tipo;
}

.codigo-produto-substituido {
    grid-area: codigo-produto-substituido;
}

.prioridade {
    grid-area: prioridade;
}

/*Fim produto composicao*/

/*Inicio produto informacoes*/
.produto-informacoes-conteudo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "codigo" "codigo-cliente" "descricao-comercial" "text-informativo" "identificacao-informacao" "descricao-informacao";
    width: 100%;
}

@media(min-width: 768px) {

    .produto-informacoes-conteudo {
        display: grid;
        grid-template-columns: .6fr .9fr .9fr 1fr .7fr 1.4fr .3fr;
        grid-template-rows: repeat(4, 1fr);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "codigo codigo-cliente descricao-comercial descricao-comercial descricao-comercial descricao-comercial descricao-comercial" " . text-informativo text-informativo text-informativo text-informativo text-informativo  ." "identificacao-informacao identificacao-informacao identificacao-informacao . . . ." "descricao-informacao descricao-informacao descricao-informacao descricao-informacao descricao-informacao descricao-informacao descricao-informacao";
        width: 100%;
    }
}




.identificacao-informacao {
    grid-area: identificacao-informacao;
}

.descricao-informacao {
    grid-area: descricao-informacao;
}
/*Fim produto informacoes*/

.composicao-consulta {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "composicao-consulta-tipo" "composicao-consulta-substitui" "button-voltar-cadastro";
    width: 100%;
}

@media(min-width: 768px) {
    .composicao-consulta {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "composicao-consulta-tipo composicao-consulta-substitui composicao-consulta-substitui composicao-consulta-substitui  button-voltar-cadastro";
        width: 100%;
    }
}

.composicao-consulta-tipo {
    grid-area: composicao-consulta-tipo;
}

.composicao-consulta-substitui {
    grid-area: composicao-consulta-substitui;
}

.produto-imagem-conteudo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, auto);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "codigo" "codigo-cliente" "descricao-comercial" "text-informativo" "nome-documento" "descricao-documento" "anexar-documento" "download-documento";
    width: 100%;
}

@media(min-width: 768px) {

    .produto-imagem-conteudo {
        display: grid;
        grid-template-columns: .6fr .9fr .9fr 1fr .7fr 1.4fr .3fr;
        grid-template-rows: repeat(6, auto);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "codigo codigo-cliente descricao-comercial descricao-comercial descricao-comercial descricao-comercial descricao-comercial" " . text-informativo text-informativo text-informativo text-informativo text-informativo  ." "nome-documento nome-documento nome-documento . . . ." "descricao-documento descricao-documento descricao-documento descricao-documento descricao-documento descricao-documento descricao-documento" "anexar-documento anexar-documento anexar-documento anexar-documento anexar-documento anexar-documento anexar-documento" ". . download-documento download-documento download-documento . .";
        width: 100%;
    }
}

/*Inicio parametro de entrada*/

.entrada-parametro {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "parametro-id" "parametro-titulo";
    width: 100%;
}

@media(min-width: 768px) {
    .entrada-parametro {
        display: grid;
        grid-template-columns: .7fr .7fr .7fr .7fr 3fr .7fr;
        grid-template-rows: auto auto auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "parametro-id  parametro-descricao parametro-descricao parametro-descricao parametro-descricao parametro-descricao" "parametro-cfop parametro-cfop-button parametro-cfop-button-list parametro-gerencial parametro-gerencial-descricao parametro-gerencial-button" "parametros-itens parametros-itens parametros-itens parametros-itens parametros-itens  parametros-itens";
        width: 100%;
    }




    .parametros-itens {
        grid-area: parametros-itens;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "parametros-itens-fiscais" "parametros-itens-contabeis";
    }

    .parametros-fiscais {
        display: grid;
        grid-template-columns: .7fr 3fr .7fr;
        grid-template-rows: repeat(4, 45px);
        grid-gap: .2rem;
        grid-template-areas: "parametro-icms parametro-icms-descricao parametro-icms-button" "parametro-ipi parametro-ipi-descricao parametro-ipi-button" "parametro-pis parametro-pis-descricao parametro-pis-button" "parametro-cofins parametro-cofins-descricao parametro-cofins-button";
        border: 1px solid #42a5f5;
        width: 100%;
        height: 200px;
        margin-top: 5px;
        padding-right: 5px;
        overflow: auto;
        background-color: #B3E5FC;
    }

    .parametros-contabeis {
        display: grid;
        grid-template-columns: .7fr 3fr .7fr;
        grid-template-rows: repeat(4, 45px);
        grid-gap: .2rem;
        grid-template-areas: "parametro-contabil-gerencial parametro-contabil-gerencial-descricao parametro-contabil-gerencial-button" "parametro-contabil-icms parametro-contabil-icms-descricao parametro-contabil-icms-button" "parametro-contabil-ipi parametro-contabil-ipi-descricao parametro-contabil-ipi-button" "parametro-contabil-piscofins parametro-contabil-piscofins-descricao parametro-contabil-piscofins-button";
        border: 1px solid #42a5f5;
        width: 100%;
        height: 200px;
        margin-top: 5px;
        padding-right: 5px;
        overflow: auto;
        background-color: #B3E5FC;
    }
}

.parametro-cfop-grup {
    display: grid;
    grid-template-columns: .5fr .2fr;
    grid-template-rows: auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "parametro-cfop parametro-cfop-button";
    width: 100%;
}

.parametro-cfop {
    grid-area: parametro-cfop;
}

.parametro-cfop-button {
    grid-area: parametro-cfop-button;
    margin-top: 18px;
}

.parametro-gerencial-button {
    grid-area: parametro-gerencial-button;
    margin-top: 18px;
}


.parametro-cfop-button-list {
    grid-area: parametro-cfop-button-list;
    margin-top: 18px;
}

.parametro-id {
    grid-area: parametro-id;
}



.parametro-descricao {
    grid-area: parametro-descricao;
}

.parametro-cfop {
    grid-area: parametro-cfop;
}

.parametro-list-cfop-label {
    grid-area: parametro-list-cfop-label;
}

.parametro-list-cfop {
    grid-area: parametro-list-cfop;
    border: 1px solid #42a5f5;
    width: 30%;
    height: 100px;
    margin-top: 0px;
    padding-right: 5px;
    overflow: auto;
}



.entrada-parametro-contabilidade {
    grid-area: entrada-parametro-contabilidade;
}

.parametro-gerencial {
    grid-area: parametro-gerencial;
}

.parametro-gerencial-descricao {
    grid-area: parametro-gerencial-descricao;
}


.parametro-tributos {
    grid-area: parametro-tributos;
}

.entrada-parametro-separation {
    grid-area: entrada-parametro-separation;
}

.entrada-parametro-separation1 {
    grid-area: entrada-parametro-separation1;
}

.parametro-fiscais {
    grid-area: parametro-fiscais;
    padding: 0 !important;
    margin: 0 !important
}


.parametro-icms {
    grid-area: parametro-icms;
    margin-left: 5px;
    margin-bottom: 0;
    padding-bottom: 0;
    height: 20px;
}

.parametro-label {
    font-size: 12px !important;
    margin-left: 5px !important;
    color: black;
}

.parametro-textbox {
    height: 25px !important;
    font-size: 12px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.parametro-button {
    margin-top: 20px;
    height: 25px !important;
    font-size: 12px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


.parametro-icms-descricao {
    grid-area: parametro-icms-descricao;
    margin-bottom: 0;
    padding-bottom: 0;
}

.parametro-icms-button {
    grid-area: parametro-icms-button;
    margin-bottom: 0;
    padding-bottom: 0;
}



.parametro-ipi {
    grid-area: parametro-ipi;
    margin-left: 5px;
}

.parametro-ipi-descricao {
    grid-area: parametro-ipi-descricao;
}

.parametro-ipi-button {
    grid-area: parametro-ipi-button;
}

.parametro-pis {
    grid-area: parametro-pis;
    margin-left: 5px;
}

.parametro-pis-descricao {
    grid-area: parametro-pis-descricao;
}

.parametro-pis-button {
    grid-area: parametro-pis-button;
}

.parametro-cofins {
    grid-area: parametro-cofins;
    margin-left: 5px;
}

.parametro-cofins-descricao {
    grid-area: parametro-cofins-descricao;
}

.parametro-cofins-button {
    grid-area: parametro-cofins-button;
}



.entrada-parametro-contabilidade {
    grid-area: entrada-parametro-contabilidade;
}



.parametro-contabil-gerencial {
    grid-area: parametro-contabil-gerencial;
    margin-left: 5px;
}

.parametro-contabil-icms {
    grid-area: parametro-contabil-icms;
    margin-left: 5px;
}

.parametro-contabil-ipi {
    grid-area: parametro-contabil-ipi;
    margin-left: 5px;
}

.parametro-contabil-piscofins {
    grid-area: parametro-contabil-piscofins;
    margin-left: 5px;
}

parametro-contabil-gerencial-descricao {
    grid-area: parametro-contabil-gerencial-descricao;
}

.parametro-contabil-icms-descricao {
    grid-area: parametro-contabil-icms-descricao;
}

.parametro-contabil-ipi-descricao {
    grid-area: parametro-contabil-ipi-descricao;
}

.parametro-contabil-piscofins-descricao {
    grid-area: parametro-contabil-piscofins-descricao;
}

.parametro-contabil-gerencial-button {
    grid-area: parametro-contabil-gerencial-button;
}

.parametro-contabil-icms-button {
    grid-area: parametro-contabil-icms-button;
}

.parametro-contabil-ipi-button {
    grid-area: parametro-contabil-ipi-button;
}

.parametro-contabil-piscofins-button {
    grid-area: parametro-contabil-piscofins-button;
}


.parametros-contabeis-label {
    grid-area: parametros-contabeis-label;
}

/*Fim parametro de entrada*/

/*Inicio parametro Gerencial*/

.entrada-parametro-gerencial {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "entrada-parametro-gerencial-parametro-id" "entrada-parametro-gerencial-descricao" "entrada-paramentro-gerencial-itens";
    width: 100%;
}

.entrada-paramentro-gerencial-itens {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, 1fr);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "entrada-parametro-gerencial-itens-contas" "entrada-parametro-gerencial-itens-estoque" "entrada-parametro-Gerencial-itens-tipo" "entrada-parametro-Gerencial-itens-estorno" "entrada-parametro-Gerencial-itens-retorno" "entrada-parametro-Gerencial-itens-retorno-tipo" "entrada-parametro-Gerencial-itens-retorno-periodo" "entrada-parametro-Gerencial-itens-retorno-cfop";
    width: 100%;
}


@media(min-width: 768px) {
    .entrada-parametro-gerencial {
        display: grid;
        grid-template-columns: 1fr 7fr;
        grid-template-rows: auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "entrada-parametro-gerencial-parametro-id  entrada-parametro-gerencial-descricao" "entrada-paramentro-gerencial-itens entrada-paramentro-gerencial-itens";
        width: 100%;
    }

    .entrada-paramentro-gerencial-itens {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "entrada-parametro-gerencial-itens-contas  entrada-parametro-gerencial-itens-estoque entrada-parametro-Gerencial-itens-tipo entrada-parametro-Gerencial-itens-estorno" "entrada-parametro-Gerencial-itens-retorno entrada-parametro-Gerencial-itens-retorno-tipo entrada-parametro-Gerencial-itens-retorno-periodo entrada-parametro-Gerencial-itens-retorno-cfop";
        width: 100%;
    }
}

.entrada-parametro-gerencial-parametro-id {
    grid-area: entrada-parametro-gerencial-parametro-id;
}

.entrada-parametro-gerencial-descricao {
    grid-area: entrada-parametro-gerencial-descricao;
}

.entrada-paramentro-gerencial-itens {
    grid-area: entrada-paramentro-gerencial-itens;
}


.entrada-parametro-gerencial-itens-contas {
    grid-area: entrada-parametro-gerencial-itens-contas;
}

.entrada-parametro-gerencial-itens-estoque {
    grid-area: entrada-parametro-gerencial-itens-estoque;
}

.entrada-parametro-Gerencial-itens-tipo {
    grid-area: entrada-parametro-Gerencial-itens-tipo;
}

.entrada-parametro-Gerencial-itens-estorno {
    grid-area: entrada-parametro-Gerencial-itens-estorno;
}

.entrada-parametro-Gerencial-itens-retorno {
    grid-area: entrada-parametro-Gerencial-itens-retorno;
}

.entrada-parametro-Gerencial-itens-retorno-tipo {
    grid-area: entrada-parametro-Gerencial-itens-retorno-tipo;
}

.entrada-parametro-Gerencial-itens-retorno-periodo {
    grid-area: entrada-parametro-Gerencial-itens-retorno-periodo;
}

.entrada-parametro-Gerencial-itens-retorno-cfop {
    grid-area: entrada-parametro-Gerencial-itens-retorno-cfop;
}
/*Fim parametro gerencial*/
/*Inicio parametro entrada ICMS*/
.entrada-parametro-icms {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "entrada-parametro-icms-id" "entrada-parametro-icms-descricao" "entrada-paramentro-icms-itens";
    width: 100%;
}

.entrada-paramentro-icms-itens {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "entrada-parametro-icms-itens-regime" "entrada-parametro-icms-itens-origem" "entrada-parametro-icms-itens-csticms" "entrada-parametro-icms-itens-credito" "entrada-parametro-icms-itens-difal";
    width: 100%;
}


@media(min-width: 768px) {
    .entrada-parametro-icms {
        display: grid;
        grid-template-columns: 1fr 7fr;
        grid-template-rows: auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "entrada-parametro-icms-id  entrada-parametro-icms-descricao" "entrada-paramentro-icms-itens entrada-paramentro-icms-itens";
        width: 100%;
    }

    .entrada-paramentro-icms-itens {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "entrada-parametro-icms-itens-regime" "entrada-parametro-icms-itens-origem" "entrada-parametro-icms-itens-csticms" "entrada-parametro-icms-itens-credito" "entrada-parametro-icms-itens-difal";
        width: 100%;
    }
}

.entrada-parametro-icms-id {
    grid-area: entrada-parametro-icms-id;
}

.entrada-parametro-icms-descricao {
    grid-area: entrada-parametro-icms-descricao;
}

.entrada-paramentro-icms-itens {
    grid-area: entrada-paramentro-icms-itens;
}

.entrada-parametro-icms-itens-regime {
    grid-area: entrada-parametro-icms-itens-regime;
}

.entrada-parametro-icms-itens-origem {
    grid-area: entrada-parametro-icms-itens-origem;
}

.entrada-parametro-gerencial-itens-csticms {
    grid-area: entrada-parametro-icms-itens-cstIcms;
}

.entrada-parametro-gerencial-itens-credito {
    grid-area: entrada-parametro-icms-itens-credito;
}

.entrada-parametro-gerencial-itens-difal {
    grid-area: entrada-parametro-icms-itens-difal;
}


/*Fim parametro entrada ICMS*/

/*Inicio parametro entrada IPI*/

.entrada-parametro-ipi {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "entrada-parametro-ipi-id" "entrada-parametro-ipi-descricao" "entrada-paramentro-ipi-itens";
    width: 100%;
}

.entrada-paramentro-ipi-itens {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "entrada-parametro-ipi-itens-cstipi" "entrada-parametro-ipi-itens-credito";
    width: 100%;
}


@media(min-width: 768px) {
    .entrada-parametro-ipi {
        display: grid;
        grid-template-columns: 1fr 7fr;
        grid-template-rows: auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "entrada-parametro-ipi-id  entrada-parametro-ipi-descricao" "entrada-paramentro-ipi-itens entrada-paramentro-ipi-itens";
        width: 100%;
    }

    .entrada-paramentro-ipi-itens {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "entrada-parametro-ipi-itens-cstipi" "entrada-parametro-ipi-itens-credito";
        width: 100%;
    }
}

.entrada-parametro-ipi-id {
    grid-area: entrada-parametro-ipi-id;
}

.entrada-parametro-ipi-descricao {
    grid-area: entrada-parametro-ipi-descricao;
}

.entrada-paramentro-ipi-itens {
    grid-area: entrada-paramentro-ipi-itens;
}


.entrada-parametro-ipi-itens-cstipi {
    grid-area: entrada-parametro-gerencial-itens-cstipi;
}

.entrada-parametro-ipi-itens-credito {
    grid-area: entrada-parametro-ipi-itens-credito;
}


/*Fim parametro entrada IPI*/


/*Inicio parametro entrada PIS*/

.entrada-parametro-pis {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "entrada-parametro-pis-id" "entrada-parametro-pis-descricao" "entrada-paramentro-pis-itens";
    width: 100%;
}

.entrada-paramentro-pis-itens {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "entrada-parametro-pis-itens-cstpis";
    width: 100%;
}


@media(min-width: 768px) {
    .entrada-parametro-pis {
        display: grid;
        grid-template-columns: 1fr 7fr;
        grid-template-rows: 1fr 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "entrada-parametro-pis-id  entrada-parametro-pis-descricao" "entrada-paramentro-pis-itens entrada-paramentro-pis-itens";
        width: 100%;
    }

    .entrada-paramentro-pis-itens {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "entrada-parametro-pis-itens-cstpis";
        width: 100%;
    }
}

.entrada-parametro-pis-id {
    grid-area: entrada-parametro-pis-id;
}

.entrada-parametro-pis-descricao {
    grid-area: entrada-parametro-pis-descricao;
}

.entrada-paramentro-pis-itens {
    grid-area: entrada-paramentro-pis-itens;
}


.entrada-parametro-pis-itens-cstpis {
    grid-area: entrada-parametro-gerencial-itens-cstpis;
}

/*Fim parametro entrada PIS*/

/*Inicio Lancamento Contabil*/

.lancamento-contabil {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "lancamento-contabil-data" "lancamento-contabil-descricao" "lancamento-contabil-debito" "lancamento-contabil-debito-descricao" "lancamento-contabil-debito-button" "lancamento-contabil-credito" "lancamento-contabil-credito-descricao" "lancamento-contabil-credito-button" "lancamento-contabil-valor" "lancamento-contabil-historico";
    width: 100%;
}

@media(min-width: 768px) {
    .lancamento-contabil {
        display: grid;
        grid-template-columns: 1fr 7fr .7fr;
        grid-template-rows: 1fr 1fr 1fr 1fr auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "lancamento-contabil-descricao lancamento-contabil-descricao lancamento-contabil-descricao" "lancamento-contabil-debito lancamento-contabil-debito-descricao lancamento-contabil-debito-button" "lancamento-contabil-credito lancamento-contabil-credito-descricao lancamento-contabil-credito-button" "lancamento-contabil-valor . ." "lancamento-contabil-historico lancamento-contabil-historico lancamento-contabil-historico";
        width: 100%;
    }

    .lancamento-contabil-debito-button {
        grid-area: lancamento-contabil-debito-button;
        margin-top: 15px;
    }

    .lancamento-contabil-credito-button {
        grid-area: lancamento-contabil-credito-button;
        margin-top: 15px;
    }

    .lancamento-contabil-historico-textarea {
        height: 100px !important;
    }
}

.registro-contabil {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr  1fr auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "lancamento-contabil-data"  "lancamento-contabil-debito" "lancamento-contabil-debito-descricao" "lancamento-contabil-debito-button" "lancamento-contabil-credito" "lancamento-contabil-credito-descricao" "lancamento-contabil-credito-button" "lancamento-contabil-valor" "lancamento-contabil-historico";
    width: 100%;
}

@media(min-width: 768px) {
    .registro-contabil {
        display: grid;
        grid-template-columns: 1fr 7fr .7fr;
        grid-template-rows: 1fr 1fr 1fr 1fr auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "lancamento-contabil-data . ." "lancamento-contabil-debito lancamento-contabil-debito-descricao lancamento-contabil-debito-button" "lancamento-contabil-credito lancamento-contabil-credito-descricao lancamento-contabil-credito-button" "lancamento-contabil-valor . ." "lancamento-contabil-historico lancamento-contabil-historico lancamento-contabil-historico";
        width: 100%;
    }

    .lancamento-contabil-debito-button {
        grid-area: lancamento-contabil-debito-button;
        margin-top: 15px;
    }

    .registro-contabil-credito-button {
        grid-area: lancamento-contabil-credito-button;
        margin-top: 15px;
    }

    .registro-contabil-historico-textarea {
        height: 100px !important;
    }
}







.lancamento-contabil-data {
    grid-area: lancamento-contabil-data;
}
.lancamento-contabil-descricao {
    grid-area: lancamento-contabil-descricao;
}

.lancamento-contabil-debito {
    grid-area: lancamento-contabil-debito;
}

.lancamento-contabil-debito-descricao {
    grid-area: lancamento-contabil-debito-descricao;
    margin-top: 16px;
}

.lancamento-contabil-debito-button {
    grid-area: lancamento-contabil-debito-button;
}

.lancamento-contabil-credito {
    grid-area: lancamento-contabil-credito;
}

.lancamento-contabil-credito-descricao {
    grid-area: lancamento-contabil-credito-descricao;
    margin-top: 16px;
}

.lancamento-contabil-credito-button {
    grid-area: lancamento-contabil-credito-button;
}

.lancamento-contabil-valor {
    grid-area: lancamento-contabil-valor;
}



.lancamento-contabil-historico {
    grid-area: lancamento-contabil-historico;
}

.lancamento-contabil-historico-textarea {
    height: 140px !important;
}

/*Fim Lancamento Contabil*/


/* Inicio parametros contábeis*/

.parametros-contabeis-gerencial {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "parametros-contabeis-gerencial-id" "parametros-contabeis-gerencial-descricao" "parametros-contabeis-gerencial-lancamentos" "parametros-contabeis-gerencial-lancamento" "parametros-contabeis-gerencial-lancamento-button" "parametros-contabeis-gerencial-lancamento-relacao";
    width: 100%;
}

@media(min-width: 768px) {

    .parametros-contabeis-gerencial {
        display: grid;
        grid-template-columns: .7fr 1fr .2fr .7fr 1.5fr 1.5fr;
        grid-template-rows: 1fr 1fr auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "parametros-contabeis-gerencial-id parametros-contabeis-gerencial-descricao parametros-contabeis-gerencial-descricao parametros-contabeis-gerencial-descricao parametros-contabeis-gerencial-descricao parametros-contabeis-gerencial-descricao" "parametros-contabeis-gerencial-lancamentos parametros-contabeis-gerencial-lancamentos parametros-contabeis-gerencial-lancamento parametros-contabeis-gerencial-lancamento parametros-contabeis-gerencial-lancamento-button ." "parametros-contabeis-gerencial-lancamento-relacao parametros-contabeis-gerencial-lancamento-relacao parametros-contabeis-gerencial-lancamento-relacao parametros-contabeis-gerencial-lancamento-relacao parametros-contabeis-gerencial-lancamento-relacao parametros-contabeis-gerencial-lancamento-relacao";
        width: 100%;
    }

    .parametros-contabeis-gerencial-lancamento-button {
        grid-area: parametros-contabeis-gerencial-lancamento-button;
        margin-top: 18px;
    }
}


.parametros-contabeis-gerencial-id {
    grid-area: parametros-contabeis-gerencial-id;
}

.parametros-contabeis-gerencial-descricao {
    grid-area: parametros-contabeis-gerencial-descricao;
}

.parametros-contabeis-gerencial-lancamentos {
    grid-area: parametros-contabeis-gerencial-lancamentos;
}

.parametros-contabeis-gerencial-lancamento {
    grid-area: parametros-contabeis-gerencial-lancamento;
}

.parametros-contabeis-gerencial-lancamento-button {
    grid-area: parametros-contabeis-gerencial-lancamento-button;
}

.parametros-contabeis-gerencial-lancamento-relacao {
    grid-area: parametros-contabeis-gerencial-lancamento-relacao;
    margin-top: 20px;
    margin-bottom: 20px
}

.parametros-contabeis-gerencial-lancamento-relacao-itens {
    display: grid;
    grid-template-columns: 1.2fr .6fr .6fr .6fr 6fr;
}


/* Fim parametros contábeis

 /* Inicio Entrada */

.entrada {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr auto;
    grid-gap: .7rem;
    grid-template-areas: "titulo-registro" "identificacao-entrada" "titulo-resumo" "register-area-resumo";
    width: 100%;
}



@media (min-width: 768px) { /* 768px */

    .register-conteudo-entrada {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: 3px, auto 3px auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "menu-itens titulo-registro" "menu-itens entrada" "menu-itens titulo-resumo" "menu-itens resumo-itens";
        width: 100%;
    }


    .identificacao-entrada {
        display: grid;
        grid-template-columns: .2fr .1fr .4fr .7fr .5fr .2fr .9fr 1.5fr;
        grid-template-rows: repeat(2, 1fr);
        row-gap: .5rem;
        column-gap: .5rem;
        margin-left: 0px;
        padding: 3px;
        grid-template-areas: "cnpj button-procurar-fornecedor razao-social razao-social razao-social razao-social razao-social nome-fantasia" "data-emissao data-entrada  data-entrada hora-entrada numero-documento serie especie chave";
        margin-bottom: 2px;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        width: 100%;
    }

    .resumo-itens {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 10px 10px 10px 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        height: 200px;
        padding: 2px;
        grid-template-areas: "cfop-lancamento" "filtro-cfop" "filtro-ncm" "resumo-texto";
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
    }

    .container-resumo-documento {
        display: grid;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        height: 220px;
        width: 260px;
        padding-top: 5px;
        margin: 3px;
    }

    .container-resumo-icms {
        display: grid;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        height: 220px;
        width: 250px;
        padding-top: 10px;
        margin: 3px;
    }

    .container-resumo-ipi {
        display: grid;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        height: 115px;
        width: 220px;
        padding-top: 10px;
        margin: 3px;
    }

    .container-resumo-ipi-auxiliar {
        display: grid;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        height: 95px;
        width: 220px;
        padding-top: 5px
    }

    .container-resumo-pis {
        display: grid;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        height: 115px;
        width: 250px;
        padding-top: 5px
    }

    .container-resumo-cofins {
        display: grid;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        height: 95px;
        width: 250px;
        padding-top: 10px
    }

    .container-resumo-outros {
        display: grid;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        height: 190px;
        width: 240px;
        padding-top: 10px;
        margin: 3px;
    }
}

.cfop-lancamento {
    grid-area: cfop-lancamento;
    color: black
}

.filtro-cfop {
    grid-area: filtro-cfop;
    color: black;
}

.filtro-ncm {
    grid-area: filtro-ncm;
    color: black;
}

.resumo-texto {
    grid-area: resumo-texto;
    color: black;
    margin-top: 10px;
}

.titulo-registro {
    grid-area: titulo-registro;
    margin: 5px;
    padding: 0;
}

.container-mini {
    height: 50px !important;
    margin-bottom: 3px !important;
    margin-top: 5px !important;
}

.button-mini {
    height: 20px !important;
}

.inpult-mini {
    height: 27px !important;
}

.inpult-mini-sem-borda {
    height: 27px !important;
    border: White !important;
    font-size: 16px;
}

.inpult-mini-sem-borda-text-area {
    height: 70px !important;
    border: White !important;
    font-size: 14px;
    overflow-x: auto;
}




.input-mini-div {
    font-family: Roboto, sans-serif;
    height: 27px !important;
    font-size: 14px;
    color: black;
    width: 100%;
    /* margin-left: 10px;*/
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid #42a5f5 !important;
    padding-top: 4px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    white-space: nowrap; /* Impede a quebra de linha */
    overflow: hidden; /* Esconde o texto que transborda */
    text-overflow: ellipsis; /* Adiciona "..." no final do texto cortado */
}

.input-mini-div-pedido {
    font-family: Roboto, sans-serif;
    height: 27px !important;
    font-size: 14px;
    color: black;
    width: 100%;
    /* margin-left: 10px;*/
    margin-top: 0;
    border-radius: 5px;
    border: White !important;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    white-space: nowrap; /* Impede a quebra de linha */
    overflow: hidden; /* Esconde o texto que transborda */
    text-overflow: ellipsis; /* Adiciona "..." no final do texto cortado */
}



.fundo-branco {
    background-color: white
}

.inpult-mini-mini {
    height: 20px !important;
    font-size: 11px;
}

.input-text-area {
    height: 90px !important;
}

.label-mini {
    font-size: 11px;
}

.input-mini-font-size12 {
    height: 27px !important;
    font-size: 12px !important;
}

.resumo-itens {
    grid-area: resumo-itens;
}

.titulo-resumo {
    grid-area: titulo-resumo;
    margin: 0;
    padding: 0;
}

.register-resumo {
    grid-area: register-resumo;
}

.register-itens {
    grid-area: register-itens;
}

.register-area-resumo {
    grid-area: register-area-resumo;
}

.descricao-height {
    height: 80px;
}

/*Identificacao*/

.button-procurar-fornecedor {
    grid-area: button-procurar-fornecedor;
}

.data-emissao {
    grid-area: data-emissao;
}

.data-entrada {
    grid-area: data-entrada;
}

.hora-entrada {
    grid-area: hora-entrada;
}

.numero-documento {
    grid-area: numero-documento;
}

.serie {
    grid-area: serie;
}

.especie {
    grid-area: especie;
}

.modelo {
    grid-area: modelo;
}

.chave {
    grid-area: chave;
}

.cnpj {
    grid-area: cnpj;
}

.razao-social {
    grid-area: razao-social;
}

.nome-fantasia {
    grid-area: nome-fantasia;
}

.container-resumo-documento {
    grid-area: container-resumo-documento;
}

.container-resumo-icms {
    grid-area: container-resumo-icms;
}

.container-resumo-ipi {
    grid-area: container-resumo-ipi;
}

.container-resumo-ipi-auxiliar {
    grid-area: container-resumo-ipi-auxiliar;
}

.container-resumo-pis {
    grid-area: container-resumo-pis;
}

.container-resumo-cofins {
    grid-area: container-resumo-cofins;
}

.container-resumo-outros {
    grid-area: container-resumo-outros;
}

/*Fim*/


/*Entrada itens*/
.container-totais {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(16, 1fr);
    grid-gap: .2rem;
    grid-template-areas: "vlr-produto" "vlr-nota" "vlr-bc-icms" "vlr-icms" "vlr-bc-icms-st" "vlr-icms-st" "vlr-frete" "vlr-seguro" "vlr-desconto" "vlr-despesas-acessorias" "vlr-bc-ipi" "vlr-ipi" "vlr-bc-pis" "vlr-pis""vlr-bc-cofins" "vlr-cofins";
    width: 100%;
    padding: 5px;
    overflow-x: auto
}



@media (min-width: 768px) { /* 768px */
    .register-conteudo-entrada-item {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: 3px, auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "menu-itens titulo-registro" "menu-itens entrada-item" "menu-itens container-tributos";
        width: 100%;
    }

    .entrada-item {
        display: grid;
        grid-template-columns: .8fr .8fr .7fr .5fr .5fr .6fr .6fr .5fr .6fr .8fr;
        grid-template-rows: repeat(4, 1fr);
        grid-gap: .2rem;
        grid-template-areas: "codigo-parametro  codigo-parametro codigo-parametro codigo-parametro codigo-parametro codigo-parametro codigo-parametro codigo-parametro button-parametro button-parametro" "codigo codigo codigo button-codigo descricao  descricao descricao descricao descricao descricao" "unidade unidade unidade  ncm  movimentacao-fisica  origem-mercadoria button-origem cfop button-cfop compoe-nf" "quantidade  valor-produto valor-produto-total valor-produto-frete valor-produto-frete valor-produto-seguro valor-produto-acessoria valor-produto-acessoria valor-produto-desconto valor-contabil-produto";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 5px;
    }


    .container-tributos {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: .2fr auto auto auto auto auto auto auto;
        grid-gap: .2rem;
        grid-template-areas: "bottom-tributos" "container-icms" "container-icms-st" "container-icms-demais" "container-ipi" "container-pis" "container-pis";
        width: 100%;
        height: 150px;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
    }

    .bottom-tributos {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: .2fr;
        grid-gap: .2rem;
        grid-template-areas: "button-icms button-icms-st button-icms-demais button-icms-credito button-ipi button-pis button-cofins button-acumulados";
        width: 100%;
    }

    .container-tributos-icms-demais {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: .2fr 1fr;
        grid-gap: .2rem;
        grid-template-areas: "bottom-tributos" "container-icms-demais";
        width: 100%;
        height: 150px;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
    }

    .container-icms {
        display: grid;
        grid-template-columns: 1fr 1.1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: .2rem;
        grid-template-areas: "cst-icms cst-icms cst-icms cst-icms cst-icms beneficio-fiscal beneficio-fiscal button-beneficio" "base-icms base-icms icms-aliquota icms-aliquota icms icms icms-auxiliar icms-auxiliar";
        width: 100%;
        padding: 5px;
    }


    .container-icms-st {
        display: grid;
        grid-template-columns: .6fr .6fr 1.8fr .5fr;
        grid-template-rows: 20px 63px 63px;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "calcular-st limpa-st . ." "credito-icms-st credito-icms-st debito-icms-st apuracao-icms-st" "fcp-icms-st fcp-icms-st . . ";
        width: 100%;
        overflow: auto;
    }

    .container-credito-icms-st {
        display: grid;
        grid-template-columns: 1.2fr .5fr 1fr;
        grid-template-rows: 10px 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "label-container-credito label-container-credito label-container-credito" "base-icms-proprio icms-aliquota-interestadual icms-proprio";
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 2px;
        height: 70px
    }


    .container-debito-icms-st {
        display: grid;
        grid-template-columns: .9fr .5fr .9fr .5fr .9fr;
        grid-template-rows: 10px 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "label-container-debito label-container-debito label-container-debito label-container-debito label-container-debito" "base-icms-proprio1 mva base-icms-st icms-aliquota-interna icms-st-total";
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 2px;
        height: 70px
    }


    .container-apuracao-icms-st {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 10px 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "label-container-apuracao" "icms-st-recolher";
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 2px;
        height: 70px
    }

    .container-fcp-icms-st {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 10px 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "label-container-fcp label-container-fcp label-container-fcp" "base-icms-fct icms-aliquota-fct icms-fct";
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 2px;
    }


    .container-icms-demais {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr .7fr 1.3fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: .2rem;
        grid-template-areas: "cst-icms cst-icms base-icms icms-aliquota icms-aliquota icms" "base-icms-simples base-icms-simples icms-aliquota-simples icms-simples icms-simples .";
        width: 100%;
        padding: 5px;
    }



    .container-icms-credito {
        display: grid;
        grid-template-columns: 1fr .5fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: .2rem;
        grid-template-areas: "base-icms-simples  icms-aliquota-simples icms-simples" "base-icms-presumido  icms-aliquota-presumido icms-presumido";
        width: 100%;
        padding: 5px;
    }

    .container-ipi {
        display: grid;
        grid-template-columns: 1fr .7fr 1fr 1fr 1.3fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: .2rem;
        grid-template-areas: "cst-ipi cst-ipi cst-ipi cst-ipi cst-ipi cst-ipi  enquadramento-ipi" "base-ipi ipi-aliquota ipi ipi-auxiliar base-ipi-atacadista ipi-aliquota-atacadista ipi-atacadista";
        width: 100%;
        padding: 5px;
    }

    .container-pis {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: .2rem;
        grid-template-areas: "cst-pis cst-pis cst-pis cst-pis" "base-pis pis-aliquota  base-pis-quantidade pis";
        width: 100%;
        padding: 5px;
    }

    .container-totais {
        display: grid;
        grid-template-columns: 1fr 1fr 1.2fr 1fr .7fr .8fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: .2rem;
        grid-template-areas: "vlr-produto vlr-nota vlr-bc-icms vlr-icms vlr-bc-icms-st vlr-icms-st" "vlr-frete vlr-seguro vlr-desconto vlr-despesas-acessorias vlr-bc-ipi vlr-ipi" "vlr-bc-pis vlr-pis vlr-bc-cofins vlr-cofins . . ";
        width: 100%;
        padding: 5px;
        overflow-x: auto;
    }
}

.calcular-st {
    grid-area: calcular-st;
}

.limpa-st {
    grid-area: limpa-st;
}

.credito-icms-st {
    grid-area: credito-icms-st;
}

.debito-icms-st {
    grid-area: debito-icms-st;
}

.apuracao-icms-st {
    grid-area: apuracao-icms-st
}

.fcp-icms-st {
    grid-area: fcp-icms-st;
}

.button-calcular-st {
    font-size: 10px;
    height: 14px;
}


.titulo-label-container-icms {
    color: black
}

.label-container-credito {
    grid-area: label-container-credito;
}

.label-container-apuracao {
    grid-area: label-container-apuracao;
}

.label-container-debito {
    grid-area: label-container-debito;
}

.label-container-fcp {
    grid-area: label-container-fcp;
}

.codigo-parametro {
    grid-area: codigo-parametro;
}

.codigo {
    grid-area: codigo;
}

.button-codigo {
    margin-top: 15px;
    grid-area: button-codigo;
}

.button-origem {
    margin-top: 15px;
    grid-area: button-origem;
}

.button-cfop {
    margin-top: 15px;
    grid-area: button-cfop;
}

.button-localizar {
    font-size: 11px;
}

.descricao {
    grid-area: descricao;
}

.unidade {
    grid-area: unidade;
}


.button-parametro {
    margin-top: 19px;
    grid-area: button-parametro
}

.movimentacao-fisica {
    grid-area: movimentacao-fisica;
}

.cfop {
    grid-area: cfop;
}

.origem {
    grid-area: origem;
}

.compoe-nf {
    grid-area: compoe-nf;
}

.ncm {
    grid-area: ncm;
}

.quantidade {
    grid-area: quantidade;
}

.valor-produto {
    grid-area: valor-produto;
}

.valor-produto-total {
    grid-area: valor-produto-total;
}

.valor-produto-frete {
    grid-area: valor-produto-frete;
}

.valor-produto-seguro {
    grid-area: valor-produto-seguro;
}

.valor-produto-acessoria {
    grid-area: valor-produto-acessoria;
}

.valor-produto-desconto {
    grid-area: valor-produto-desconto;
}

.valor-contabil-produto {
    grid-area: valor-contabil-produto;
}
/*totais*/



.vlr-produto {
    grid-area: vlr-produto;
}

.vlr-nota {
    grid-area: vlr-nota;
}

.vlr-bc-icms {
    grid-area: vlr-bc-icms;
}

.vlr-icms {
    grid-area: vlr-icms;
}

.vlr-bc-icms-st {
    grid-area: vlr-bc-icms-st;
}

.vlr-icms-st {
    grid-area: vlr-icms-st;
}

.vlr-bc-ipi {
    grid-area: vlr-bc-ipi;
}

.vlr-ipi {
    grid-area: vlr-ipi;
}

.vlr-frete {
    grid-area: vlr-frete;
}

.vlr-seguro {
    grid-area: vlr-seguro;
}

.vlr-desconto {
    grid-area: vlr-desconto;
}

.vlr-despesas-acessorias {
    grid-area: vlr-despesas-acessorias;
}

.vlr-bc-pis {
    grid-area: vlr-bc-pis;
}

.vlr-pis {
    grid-area: vlr-pis;
}

.vlr-bc-cofins {
    grid-area: vlr-bc-cofins;
}

.vlr-cofins {
    grid-area: vlr-cofins;
}
/*item icms */
.cst-icms {
    grid-area: cst-icms;
}

.base-icms {
    grid-area: base-icms;
}

.base-icms-proprio {
    grid-area: base-icms-proprio;
}

.base-icms-proprio1 {
    grid-area: base-icms-proprio1;
}

.mva {
    grid-area: mva;
}

.base-icms-st {
    grid-area: base-icms-st;
}

.icms-aliquota {
    grid-area: icms-aliquota;
}

.icms-aliquota-interestadual {
    grid-area: icms-aliquota-interestadual;
}

.icms-st-total {
    grid-area: icms-st-total;
}


.icms-aliquota-interna {
    grid-area: icms-aliquota-interna;
}


.icms {
    grid-area: icms;
}

.icms-st-recolher {
    grid-area: icms-st-recolher;
}

.icms-proprio {
    grid-area: icms-proprio
}

.base-icms-fct {
    grid-area: base-icms-fct;
}

.icms-aliquota-fct {
    grid-area: icms-aliquota-fct;
}

.icms-fct {
    grid-area: icms-fct;
}

.como-calcular-st {
    grid-area: como-calcular-st
}

.input-credito {
    background-color: #87CEFF;
}

.input-debito {
    background-color: #FFC1C1;
}

.input-recolher {
    background-color: #FFDEAD;
}

.icms-icms-fct {
    grid-area: icms-icms-fct;
}

.base-icms-simples {
    grid-area: base-icms-simples;
}

.icms-aliquota-simples {
    grid-area: icms-aliquota-simples;
}

.icms-simples {
    grid-area: icms-simples;
}

.beneficio-fiscal {
    grid-area: beneficio-fiscal;
}

.button-beneficio {
    grid-area: button-beneficio;
    margin-top: 15px;
}

.beneficio-descricao {
    grid-area: beneficio-descricao;
}




/*item icms */

/*item ipi */
.cst-ipi {
    grid-area: cst-ipi;
}

.enquadramento-ipi {
    grid-area: enquadramento-ipi;
}

.base-ipi {
    grid-area: base-ipi;
}

.ipi-aliquota {
    grid-area: ipi-aliquota;
}

.ipi {
    grid-area: ipi;
}

.base-ipi-atacadista {
    grid-area: base-ipi-atacadista;
}

.ipi-aliquota-atacadista {
    grid-area: ipi-aliquota-atacadista;
}

.ipi-atacadista {
    grid-area: ipi-atacadista;
}
/*item ipi */
/*item pis */
.cst-pis {
    grid-area: cst-pis;
}

.base-pis {
    grid-area: base-pis;
}

.pis-aliquota {
    grid-area: pis-aliquota;
}

.pis {
    grid-area: pis;
}

.base-pis-quantidade {
    grid-area: base-pis-quantidade;
}

.button-icms {
    grid-area: button-icms;
    margin: 0 !important;
    padding: 0 !important;
}

.button-icms-st {
    grid-area: button-icms-st;
    margin: 0 !important;
    padding: 0 !important;
}

.button-icms-demais {
    grid-area: button-icms-demais;
    margin: 0 !important;
    padding: 0 !important;
}

.button-icms-credito {
    grid-area: button-icms-credito;
    margin: 0 !important;
    padding: 0 !important;
}




.button-ipi {
    grid-area: button-ipi;
    margin: 0 !important;
    padding: 0 !important;
}

.button-pis {
    grid-area: button-pis;
    margin: 0 !important;
    padding: 0 !important;
}

.button-cofins {
    grid-area: button-cofins;
    margin: 0 !important;
    padding: 0 !important;
}

.button-acumulados {
    grid-area: button-acumulados;
    margin: 0 !important;
    padding: 0 !important;
}

/*Entrada itens*/
/*Contas a pagar*/
@media (min-width: 768px) { /* 768px */

    .register-conteudo-entrada-pagar {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: 3px, auto auto auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "menu-itens titulo-registro" "menu-itens container-total-parcelas" "menu-itens container-parcelamento" "menu-itens container-parcelas" "menu-itens container-parcelas-conferencia";
        width: 100%;
    }

    .container-total-parcelas {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: 1rem;
        grid-template-areas: "valor-parcela . . . ";
        border-bottom: 1px solid;
        color: #7e8dd7;
        width: 100%;
        padding-bottom: 7px;
        margin-bottom: 5px;
    }


    .container-parcelamento {
        display: grid;
        grid-template-columns: .7fr 1fr 1fr 1fr .6fr .6fr;
        grid-template-rows: 3px 1fr;
        grid-gap: 1rem;
        grid-template-areas: "titulo-gerar-parcela . . . . ." "quantidade-parcela vencimento-primeira-parc vencimento-dias tipo-parcela-parc  gerar-parcela remover-parcela";
        border-bottom: 1px solid;
        color: #7e8dd7;
        width: 100%;
        padding-bottom: 7px;
        margin-bottom: 5px;
    }

    .container-parcelas {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 3px 1fr;
        grid-gap: 1rem;
        grid-template-areas: "titulo-parcela . . ." "valor-parcela vencimento-parcela tipo-parcela status-parcela";
        border-bottom: 1px solid;
        color: #7e8dd7;
        width: 100%;
        padding-bottom: 7px;
        margin-bottom: 5px;
    }

    .container-parcelas-conferencia {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-gap: 0rem;
        grid-template-areas: "collection";
        width: 100%;
        max-height: 150px;
        overflow-x: auto;
    }

    .titulo-conferencia {
        padding-top: 3px;
    }
}

.container-parcelamento {
    grid-area: container-parcelamento;
}

.container-parcelas {
    grid-area: container-parcelas;
}

.container-parcelas-conferencia {
    grid-area: container-parcelas-conferencia;
}

.container-total-parcelas {
    grid-area: container-total-parcelas
}

.valor-total-parcelas {
    grid-area: valor-total-parcelas
}

.titulo-gerar-parcela {
    grid-area: titulo-gerar-parcela
}

.quantidade-parcela {
    grid-area: quantidade-parcela
}

.vencimento-dias {
    grid-area: vencimento-dias
}

.vencimento-primeira-parc {
    grid-area: vencimento-primeira-parc
}

.tipo-parcela-parc {
    grid-area: tipo-parcela-parc;
}

.gerar-parcela {
    margin-top: 15px;
    grid-area: gerar-parcela
}

.remover-parcela {
    margin-top: 15px;
    grid-area: remover-parcela
}

.valor-parcela {
    grid-area: valor-parcela;
}

.vencimento-parcela {
    grid-area: vencimento-parcela;
}

.tipo-parcela {
    grid-area: tipo-parcela;
}

.status-parcela {
    grid-area: status-parcela;
}

.titulo-conferencia {
    grid-area: titulo-conferencia;
}

.valor-total-documento {
    grid-area: valor-total-documento;
}

.valor-total-gerado {
    grid-area: valor-total-gerado;
}

.saldo-gerado {
    grid-area: saldo-gerado;
}

/*Contabilidade Entrada*/

.lancamento-contabil-registro {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "lancamento-contabil-data" "lancamento-contabil-debito" "lancamento-contabil-debito-descricao" "lancamento-contabil-debito-button" "lancamento-contabil-credito" "lancamento-contabil-credito-descricao" "lancamento-contabil-credito-button" "lancamento-contabil-valor" "lancamento-contabil-historico";
    width: 100%;
}


@media (min-width: 768px) { /* 768px */

    .register-conteudo-contabilidade-registro {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 3px, auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "titulo-registro" "lancamento-contabil-registro" "container-lancamentos-conferencia";
        width: 100%;
    }

    .lancamento-contabil-registro {
        display: grid;
        grid-template-columns: 1fr 7fr .7fr;
        grid-template-rows: 1fr 1fr 1fr 1fr auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "lancamento-contabil-data . . " "lancamento-contabil-debito lancamento-contabil-debito-descricao lancamento-contabil-debito-button" "lancamento-contabil-credito lancamento-contabil-credito-descricao lancamento-contabil-credito-button" "lancamento-contabil-valor . . " "lancamento-contabil-historico lancamento-contabil-historico lancamento-contabil-historico";
        width: 100%;
    }




    .titulo-conferencia {
        padding-top: 3px;
    }


    .container-lancamentos-conferencia {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-gap: 0rem;
        grid-template-areas: "collection";
        width: 100%;
        max-height: 90px;
        overflow-x: auto;
    }


    .lancamento-contabil-registro {
        grid-area: lancamento-contabil-registro
    }

    .conferencia-contabil {
        margin-top: 10px;
    }

    .lancamento-contabil-valor {
        grid-area: lancamento-contabil-valor
    }
}

/*custo entrada*/

@media (min-width: 768px) { /* 768px */

    .register-conteudo-custo-entradas {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: 3px auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "menu-itens titulo-registro" "menu-itens custo-entradas";
        width: 100%;
    }

    .custo-entradas {
        grid-area: custo-entradas;
        max-height: 370px;
        overflow-x: auto;
        overflow-y: auto;
        margin-right: 5px;
    }

    .tabela-custo {
        display: grid;
        grid-template-columns: .2fr .7fr 2.4fr 2.2fr .5fr .5fr .5fr;
        grid-template-rows: 1fr;
        grid-gap: 0;
        grid-template-areas: "custo-item custo-codigo-produto gastos credito  custo-quantidade custo-total custo-unitario";
        width: 100%;
        border: 1px solid;
        height: 50px;
        margin-top: 10px;
        margin-left: 5px;
        padding: 0;
        font-size: 14px;
        line-height: 1.5;
    }

    .tabela-custo-item {
        display: grid;
        grid-template-columns: .2fr .7fr 2.4fr 2.2fr .5fr .5fr .5fr;
        grid-template-rows: 1fr;
        grid-gap: 0;
        grid-template-areas: "custo-item-item custo-codigo-produto-item gastos-item credito-item  custo-quantidade-item  custo-total-item custo-unitario-item";
        width: 100%;
        border-bottom: 1px solid;
        border-right: 1px solid;
        border-color: black;
        height: 25px;
        margin: 0;
        padding: 0;
        font-size: 14px;
        line-height: 1.5;
        margin-left: 5px;
    }

    .tabela-custo-total {
        display: grid;
        grid-template-columns: .2fr .7fr 2.4fr 2.2fr .5fr .5fr .5fr;
        grid-template-rows: 1fr;
        grid-gap: 0;
        grid-template-areas: ". . . . custo-total-label  custo-total-item custo-unitario-item";
        width: 100%;
        border-bottom: 1px solid;
        border-left: 1px solid;
        border-right: 1px solid;
        border-color: black;
        height: 25px;
        margin: 0;
        padding: 0;
        font-size: 14px;
        line-height: 1.5;
        margin-left: 5px;
        background-color: rgb(219,238,243);
        font-weight: bold;
    }

    .container-gastos {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr auto;
        grid-gap: 0;
        grid-template-areas: "gasto-cabecalho gasto-cabecalho gasto-cabecalho gasto-cabecalho" "gasto-valor gasto-frete gasto-despesas gasto-tributos";
        width: 100%;
        height: 50px;
        margin: 0;
        padding: 0;
    }

    .container-gastos-item {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: 0;
        grid-template-areas: "gasto-valor gasto-frete gasto-despesas gasto-tributos";
        width: 100%;
        height: 25px;
        margin: 0;
        padding: 0;
    }

    .container-credito {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr auto;
        grid-gap: 0;
        grid-template-areas: "credito-cabecalho credito-cabecalho credito-cabecalho credito-cabecalho credito-cabecalho" "credito-icms credito-ipi credito-pis credito-cofins credito-outros";
        width: 100%;
        height: 50px;
        margin: 0;
        padding: 0;
    }

    .container-credito-item {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: 0;
        grid-template-areas: "credito-icms credito-ipi credito-pis credito-cofins credito-outros";
        width: 100%;
        height: 25px;
        margin: 0;
        padding: 0;
    }
}








.tabela-custo-item:hover {
    background-color: #2962ff;
}



.custo-total-label {
    grid-area: custo-total-label;
    text-align: right;
    padding-right: 5px;
    font-size: 16px;
}

.custo-codigo-produto {
    grid-area: custo-codigo-produto;
    border-right: 1px solid;
    border-bottom: 1px solid;
    width: 100%;
    min-width: 90px;
    border-color: black;
    height: 50px;
    text-align: center;
    line-height: 1.5;
    background-color: rgb(197,217,241);
}

.custo-item {
    grid-area: custo-item;
    border-right: 1px solid;
    border-bottom: 1px solid;
    width: 100%;
    border-color: black;
    height: 50px;
    text-align: center;
    line-height: 3;
    background-color: rgb(229,224,236);
}

.custo-item-item {
    grid-area: custo-item-item;
    border-left: 1px solid;
    border-bottom: 1px solid;
    width: 100%;
    border-color: black;
    height: 25px;
    text-align: center;
}

.custo-codigo-produto-item {
    grid-area: custo-codigo-produto-item;
    border-left: 1px solid;
    border-bottom: 1px solid;
    width: 100%;
    min-width: 30px;
    border-color: black;
    height: 25px;
    text-align: center;
}

.container-gastos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr auto;
    grid-gap: 0;
    grid-template-areas: "gasto-cabecalho gasto-cabecalho gasto-cabecalho gasto-cabecalho" "gasto-valor gasto-frete gasto-despesas gasto-tributos";
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;
}



.gastos {
    grid-area: gastos;
    border-bottom: 1px solid;
    border-color: black;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: rgb(229,224,236);
}

.gastos-item {
    grid-area: gastos-item;
    border-left: 1px solid;
    border-color: black;
    width: 100%;
    height: 25px;
    margin: 0;
    padding: 0;
    text-align: center;
}

.gasto-cabecalho {
    grid-area: gasto-cabecalho;
    border-bottom: 1px solid;
    border-color: black;
    height: 25px;
    margin: 0;
    padding: 0;
}

.gasto-valor {
    grid-area: gasto-valor;
    height: 24px;
    margin: 0;
    padding: 0;
}

.gasto-frete {
    grid-area: gasto-frete;
    border-left: 1px solid;
    height: 24px;
    margin: 0;
    padding: 0;
}

.gasto-despesas {
    grid-area: gasto-despesas;
    border-left: 1px solid;
    border-color: black;
    height: 24px;
    margin: 0;
    padding: 0;
}

.gasto-tributos {
    grid-area: gasto-tributos;
    border-left: 1px solid;
    border-color: black;
    height: 24px;
    margin: 0;
    padding: 0;
}

.credito {
    grid-area: credito;
    border-left: 1px solid;
    border-bottom: 1px solid;
    width: 100%;
    border-color: black;
    height: 50px;
    text-align: center;
    background-color: rgb(197,217,241);
}

.credito-item {
    grid-area: credito-item;
    border-left: 1px solid;
    width: 100%;
    border-color: black;
    height: 25px;
    text-align: center;
}

.credito-cabecalho {
    grid-area: credito-cabecalho;
    border-bottom: 1px solid;
    border-color: black;
    height: 25px;
}

.credito-icms {
    grid-area: credito-icms;
    height: 25px;
}

.credito-ipi {
    grid-area: credito-ipi;
    border-left: 1px solid;
    border-color: black;
}

.credito-pis {
    grid-area: credito-pis;
    border-left: 1px solid;
    border-color: black;
    height: 25px;
}

.credito-cofins {
    grid-area: credito-cofins;
    border-left: 1px solid;
    border-color: black;
    height: 25px;
}

.credito-outros {
    grid-area: credito-outros;
    border-left: 1px solid;
    border-color: black;
    height: 25px;
}

.custo-total {
    grid-area: custo-total;
    border-left: 1px solid;
    border-bottom: 1px solid;
    width: 100%;
    border-color: black;
    height: 50px;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1.5;
    vertical-align: middle;
    background-color: rgb(197,217,241);
}

.custo-total-item {
    grid-area: custo-total-item;
    border-left: 1px solid;
    width: 100%;
    border-color: black;
    height: 25px;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.custo-quantidade {
    grid-area: custo-quantidade;
    border-left: 1px solid;
    border-bottom: 1px solid;
    width: 100%;
    border-color: black;
    height: 50px;
    text-align: center;
    background-color: rgb(229,224,236);
}

.custo-quantidade-item {
    grid-area: custo-quantidade-item;
    border-left: 1px solid;
    width: 100%;
    border-color: black;
    height: 25px;
    text-align: center
}

.custo-unitario {
    grid-area: custo-unitario;
    border-left: 1px solid;
    border-bottom: 1px solid;
    width: 100%;
    border-color: black;
    height: 50px;
    text-align: center;
    line-height: 1.5;
    background-color: rgb(255,255,0);
}

.custo-unitario-item {
    grid-area: custo-unitario-item;
    border-left: 1px solid;
    width: 100%;
    border-color: black;
    height: 25px;
    text-align: center;
}

/*Incio Formulario Contato*/

.conteudo-contato {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3px auto auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "menu-itens" "titulo-registro" "contato";
    width: 100%;
}


.contato-area {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, auto);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "nome-contato" "telefone" "telefone-celular" "email" "email-particular" "site" "observacao";
    width: 100%;
}

@media (min-width: 768px) { /* 768px */

    .conteudo-contato {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: 3px auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "menu-itens titulo-registro" "menu-itens contato",
    }

    .contato-area {
        display: grid;
        grid-template-columns: .5fr .5fr 1fr 1fr;
        grid-template-rows: repeat(4, auto);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "nome-contato nome-contato nome-contato nome-contato" "telefone telefone-celular email  email-particular" "site site site site" "observacao observacao observacao observacao";
        width: 98%;
    }

    #contato {
        height: 350px;
    }
}

.nome-contato {
    grid-area: nome-contato;
}

.observacao {
    grid-area: observacao;
}

.contato {
    grid-area: contato;
}

.email {
    grid-area: email;
    text-overflow: ellipsis;
}

.email-particular {
    grid-area: email-particular;
    text-overflow: ellipsis;
}

.email-confirmacao {
    grid-area: email-confirmacao;
}

.site {
    grid-area: site;
}

.telefone {
    grid-area: telefone;
}

.telefone-celular {
    grid-area: telefone-celular;
}

/*Fim Formulario Contato*/

/*Incio Formulario Endereco*/

.conteudo-endereco {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3px auto auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "menu-itens" "titulo-registro" "endereco";
    width: 100%;
}


.endereco-area {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, auto);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "tipo-endereco" "cep" "logradouro" "numero" "complemento" "bairro" "uf" "cidade" "observacao-endereco";
    width: 100%;
}

@media (min-width: 768px) { /* 768px */

    .conteudo-endereco {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: 3px auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "menu-itens titulo-registro" "menu-itens endereco",
    }

    .endereco-area {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr .5fr 1fr 1fr;
        grid-template-rows: repeat(4, auto);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "tipo-endereco tipo-endereco tipo-endereco tipo-endereco tipo-endereco tipo-endereco tipo-endereco tipo-endereco" "cep logradouro logradouro logradouro logradouro numero complemento complemento" "bairro bairro uf uf uf cidade cidade cidade" "observacao-endereco observacao-endereco observacao-endereco observacao-endereco observacao-endereco observacao-endereco observacao-endereco observacao-endereco ";
        width: 98%;
    }

    #endereco {
        height: 350px;
    }
}


.tipo-endereco {
    grid-area: tipo-endereco
}

.observacao-endereco {
    grid-area: observacao-endereco
}

.endereco {
    grid-area: endereco;
}
/*Fim Formulario Endereco*/


/* CSS referente a pagina de monitoramento de notas */

.pagina-monitoramento-notas {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "periodo  tipo-dfe tipo-dfe   buscar-por  buscar-por  submit   submit" "servico  servico servico    servico     servico     servico  servico";
    width: 100%;
}

.periodo {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "title   title" "inicial final";
    width: 100%;
}

.tipo-dfe {
    grid-area: tipo-dfe;
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "title title" "tipo-dcm emitido";
    width: 100%;
}

.tipo-dcm {
    grid-area: tipo-dcm;
}

.emitido {
    grid-area: emitido;
}


.buscar-por {
    grid-area: buscar-por;
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "title       title           title" "busca-campo busca-parametro busca-parametro";
    width: 100%;
}

.busca-campo {
    grid-area: busca-campo;
}

.busca-parametro {
    grid-area: busca-parametro;
}

.submit {
    grid-area: submit;
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "title   title" "filtrar limpar";
    width: 100%;
}

.filtrar {
    grid-area: filtrar;
    min-width: 100px;
}

.limpar {
    grid-area: limpar;
    min-width: 100px;
}

.servico {
    grid-area: servico;
}

.container-service {
    padding: 10px;
    border: 1px solid #3f51b5;
    border-radius: 5px;
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "title    title   title    title     title title title" "servicos-munitor";
    width: 100%;
}

.container-service-description {
    grid-area: title;
    font-size: 12px;
    font-weight: bold;
}

.service-button {
    background-color: #42a5f5;
    font-size: 12px;
    font-weight: bold;
}

.container-monitoramento {
    grid-area: periodo;
    border: 1px solid #3f51b5;
    padding: 10px;
    border-radius: 5px;
}


.servicos-munitor {
    grid-area: servicos-munitor;
}

.periodo-inicial {
    grid-area: inicial;
}

.periodo-final {
    grid-area: final;
}

.checkbox-nota {
    width: 15px;
    margin: 0;
    padding: 0;
}

.checkbox-permissoes {
    width: 15px;
    margin: 17px;
    padding: 0;
}

.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 768px) { /* 768px */
    .pagina-monitoramento-notas {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: .2fr .43fr .6fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "periodo tipo-dfe buscar-por submit";
        width: 100%;
    }



    .periodo {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: .3fr auto auto;
        grid-template-areas: "title" "inicial" "final";
        width: 100%;
    }

    .periodo-area {
        grid-area: periodo;
        border: 1px solid #3f51b5;
        padding: 5px;
        border-radius: 5px;
    }

    .buscar-por {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: .3fr auto auto;
        grid-template-areas: "title" "busca-campo" "busca-parametro";
    }

    .buscar-por-area {
        grid-area: buscar-por;
        border: 1px solid #3f51b5;
        padding: 5px;
        border-radius: 5px;
    }

    .tipo-dfe {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: .3fr auto auto;
        grid-template-areas: "title" "tipo-dcm" "emitido";
    }

    .tipo-dfe-area {
        grid-area: tipo-dfe;
        border: 1px solid #3f51b5;
        padding: 5px;
        border-radius: 5px;
    }


    .submit {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: .3fr auto auto;
        grid-template-areas: "title ." "filtrar limpar" "servicos-munitor servicos-munitor";
    }

    .submit-area {
        grid-area: submit;
        border: 1px solid #3f51b5;
        padding: 5px;
        border-radius: 5px;
    }






    .checkbox-container {
        display: flex;
    }

    .checkbox-nota {
        width: 15px;
        margin: 0;
        padding: 0;
    }

    .container-dfe {
        border: 1px solid;
        border-color: #42a5f5;
        padding-left: 10px;
        padding-top: 5px;
        margin-top: 10px;
        height: 50vh;
        background-color: azure;
    }

    .container-dfe-itens ul {
        height: 42vh;
        overflow-y: scroll;
    }


    .container-dfe-itens ::-webkit-scrollbar {
        background-color: azure !important;
    }
}



.hidden {
    display: none;
}

.remove_header {
    grid-template-rows: none !important;
    background-color: white !important;
}


.modal-base40-30 {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    top: 100px;
    padding: 10px;
    border: 1px solid #888;
    width: 60%;
    height: 40%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}


.modal-base-permissoes {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    top: 20px;
    padding: 10px;
    border: 1px solid #888;
    width: 100%;
    height: 80vh;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.pagina-modal {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px 1px 1fr 1px auto; /* 1fr fará o corpo ocupar todo o espaço restante */
    grid-template-areas: "header-pagina-modal" "separation" "register-modal" "separation1" "footer-modal";
    width: auto !important;
    height: 100%;
}

.modal-consulta {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    top: 5px;
    padding: 10px;
    border: 1px solid #888;
    width: 95%;
    height: 100%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}
.modal-pdf {
    position: absolute; /* Mantenha como 'absolute' */

    background-color: #fefefe;
    padding: 2px;
    border: 1px solid #888;
    width: 80%;
    height: auto;
    max-height: 95vh;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza o modal com precisão */
    /* Outras propriedades de animação... */
}

/* A alça de arrastar */
.header-pagina-modal {
    cursor: move;
}

.modal-base {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    top: 80px;
    padding: 10px;
    border: 1px solid #888;
    width: 95%;
    height: 85%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    overflow: auto;
}

.modal-largura80 {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    top: 80px;
    padding: 10px;
    border: 1px solid #888;
    width: 95%;
    height: 85%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    overflow: auto;
}


@media (min-width: 768px) { /* 768px */


    /*.pagina-modal {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50px 1px auto 1px;
        grid-template-areas: "header-pagina-modal" "separation" "register-modal" "separation1";
        width: auto !important;
        height: auto;
    }*/

    .modal-base {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        top: 80px;
        padding: 10px;
        border: 1px solid #888;
        width: 95%;
        height: 85%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s;
        overflow: auto;
    }


    .modal-base50 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        top: 100px;
        padding: 10px;
        border: 1px solid #888;
        width: 42%;
        height: 42%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    .modal-base42-62 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        top: 100px;
        padding: 10px;
        border: 1px solid #888;
        width: 42%;
        height: 62%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    .modal-base30-40 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        top: 100px;
        padding: 10px;
        border: 1px solid #888;
        width: 30%;
        height: 40%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    .modal-base40-30 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        top: 100px;
        padding: 10px;
        border: 1px solid #888;
        width: 40%;
        height: 30%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }
    .modal-base70-30 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        top: 100px;
        padding: 10px;
        border: 1px solid #888;
        width: 70%;
        height: 30%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }


    .modal-base-permissoes {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        top: 0;
        padding: 10px;
        border: 1px solid #888;
        width: 30%;
        height: 80vh;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }



    .modal-consulta {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        top: 5px;
        padding: 10px;
        border: 1px solid #888;
        width: 95%;
        height: 100%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }


    .modal-largura80 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        top: 80px;
        padding: 10px;
        border: 1px solid #888;
        width: 80%;
        height: 80%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }



    .modal-base70 {
        top: 115px;
        width: 80%;
        height: 80%;
    }
}

.footer-modal {
    grid-area: footer-modal;
    margin-left: 5px;
    margin-right: 5px;
    height: auto;
    overflow-y: auto;
}



@media (min-width: 768px) { /* 768px */

    .modal-base60 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        top: 100px;
        padding: 10px;
        border: 1px solid #888;
        width: 51%;
        height: 51%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    .modal-consulta {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        top: 80px;
        padding: 10px;
        border: 1px solid #888;
        width: 60%;
        height: 80%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    .modal-largura80 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        top: 80px;
        padding: 10px;
        border: 1px solid #888;
        width: 80%;
        height: 80%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }



    .pagina-modal {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50px 1px auto 1px auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "header-pagina-modal" "separation" "register-modal" "separation1" "footer-modal";
        width: 100%;
        margin-top: 5px;
        margin-left: 5px;
        margin-right: 5px;
        padding: 5px;
    }




    .monitor-anexar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "anexar-documento anexar-documento" "monitor-enviar monitor-limpar";
        width: 100%;
        margin-top: 5px;
    }

    .monitor-enviar {
        margin-top: 5px;
        grid-area: monitor-enviar;
    }

    .monitor-limpar {
        margin-top: 5px;
        grid-area: monitor-limpar;
    }




    .modal-agrupamento-contas {
        position: relative;
        background-color: #fcf7f7;
        top: 100px;
        padding: 10px;
        border: 1px solid #888;
        height: 44vh;
        margin-left: 30%;
        margin-right: 30%;
    }



    .modal-base70 {
        top: 115px;
        width: 80%;
        height: 80%;
    }

    .register-modal {
        grid-area: register-modal;
        margin-left: 5px;
        margin-right: 5px;
        height: auto;
        overflow-y: auto;
    }
    .footer-modal {
        grid-area: footer-modal;
        margin-left: 5px;
        margin-right: 5px;
        height: auto;
        overflow-y: auto;
    }

}

.header-pagina-modal {
    grid-area: header-pagina-modal;
}

.register-modal iframe {
    width: 100%;
    height: 100%; 
}




.monitor-anexar {
    display: grid;
    grid-template-columns: 4fr 1fr 1fr;
    grid-template-rows: 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "anexar-documento monitor-enviar monitor-limpar";
    margin-top: 10px;
    margin-bottom: 10px;
}

.anexar-documento {
    grid-area: anexar-documento;
}

.monitor-enviar {
    margin-top: 23px;
    grid-area: monitor-enviar;
}

.monitor-limpar {
    margin-top: 23px;
    grid-area: monitor-limpar;
}




.parametro-saida-pfs {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(12, auto);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "a a" "n n" "o o" "b c" "d e" "f f" "g g" "h h" "i i" "j j" "k k" "l l" "m m";
}


.parametro-saida-reforma-tribuaria-pfs {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "p" "q" "r" "s";
    border-radius: 5px;
    border: 1px solid;
    color: #7e8dd7;
    margin: 0px;
    padding: 5px;
}




@media(min-width: 768px) {



    .parametro-saida-pfs {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(7, auto);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "a a a a a a" "n n n o o o" "b c d e f g" "h h h h h h" "i i i i i i" "j j j j k k" "l l l m m m";
    }

    .parametro-saida-reforma-tribuaria-pfs {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "q r s";
        /* Garante que fique colado no título acima */
        margin-top: 0px !important;
    }




}



.descricao-pfs {
    grid-area: a;
}



.tipo-pessoa-pfs {
    grid-area: b;
}

.contribuinte-pfs {
    grid-area: c;
}

.consumidor-pfs {
    grid-area: d;
}

.diferencial-pfs {
    grid-area: e;
}

.regime-pfs {
    grid-area: f;
}

.anexo-pfs {
    grid-area: g;
}

.cfop-pfs {
    grid-area: h;
}

.origem-pfs {
    grid-area: i;
}

.cst-icms-pfs {
    grid-area: j;
}

.cst-ipi-pfs {
    grid-area: k;
}

.cst-pis-pfs {
    grid-area: l;
}

.cst-cofins-pfs {
    grid-area: m;
}

.operacao-pfs {
    grid-area: n;
}

.natureza-pfs {
    grid-area: o;
}

.titulo-ibs-cbs-pfs {
    text-align: left;
    /* Topo: 30px (Desgruda de cima), Dir: 0, Baixo: 5px (Cola embaixo), Esq: 0 */
    margin: 30px 0 5px 0 !important;
    /* Opcional: Adicionar uma borda ou cor para destacar a seção */
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 5px;
    font-weight: bold;
    color: #495057;
}

.codigo-tributacao-ibs-cbs-pfs{
    grid-area: q;
}

.percentual-reducao-base-ibs-cbs-pfs {
    grid-area: r;
}

.percentual-diferimento-ibs-cbs-pfs {
    grid-area: s;
}

.parametro-icms-pi {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(12, auto);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "m" "o" "q" "p" "n";
}


@media(min-width: 768px) {



    .parametro-icms-pi {
        display: grid;
        grid-template-columns: 1fr 1fr .1fr 1fr 1fr .1fr 1fr 1fr .1fr;
        grid-template-rows: repeat(7, auto);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "a b b b b b b c c" "d d d d d d d e e" "m m m m m m m m m" "o o o o o o o o o" "q q q q q q q q q" "p p p p p p p p p" "n n n n n n n n n ";
        ;
    }

    .btn-produto-margim-pi {
        margin-top: 18px;
    }
}



.produto-pi {
    grid-area: a;
}



.descricao-pi {
    grid-area: b;
}

.btn-produto-pi {
    grid-area: c;
}




.paramentro-fiscal-pi {
    grid-area: d;
}

.uf-pi {
    grid-area: e;
}

.diferimento-pi {
    grid-area: f;
}

.reducao-pi {
    grid-area: g;
}


produto-list-pi {
    grid-area: l;
}

.beneficio-pi {
    grid-area: m;
}

.informacoes-pi {
    grid-area: n;
}

.informa-icms-desonerado {
    grid-area: o;
}

.deduz-icms-desonerado {
    grid-area: p;
}

.icms-integra-calculo-desonerado{
    grid-area: q;
}

.parametro-icms-st-pis {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(11, auto);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "n";
}


@media(min-width: 768px) {



    .parametro-icms-st-pis {
        display: grid;
        grid-template-columns: 1fr 1fr .1fr 1fr 1fr .1fr 1fr 1fr .1fr;
        grid-template-rows: repeat(4, auto);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "a b b b b b b c c" "d d d d d d d e e" "h h h i i i j j j" "n n n n n n n n n ";
    }

    .btn-produto-margim-pis {
        margin-top: 18px;
    }
}

.mva-original-pis {
    grid-area: h;
}

.mva-ajustada-pis {
    grid-area: i;
}

.mva-ajustada4-pis {
    grid-area: j;
}

.beneficio-icms-bf {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, auto);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "a" "h" "b" "c" "d" "e" "f" "g";
}


@media(min-width: 768px) {



    .beneficio-icms-bf {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: repeat(3, auto);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "a a h h b c" "d d d e e e" "f f f g g g";
    }
}

.descricao-bf {
    grid-area: a;
}

.codigo-bf {
    grid-area: b;
}

.uf-bf {
    grid-area: c;
}

.diferimento-bf {
    grid-area: d;
}

.reducao-bf {
    grid-area: e;
}

.validade-bf {
    grid-area: f;
}

.validade-final-bf {
    grid-area: g;
}

.motivo-bf {
    grid-area: h;
}


.parametro-contabeis-pcs {
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-rows: 50px 300px;
    row-gap: .5rem;
    column-gap: .5rem;
    
}


@media(max-width: 1700px) {



    .parametro-contabeis-pcs {
        max-height: 395px;
        overflow-x: auto;
    }
}

@media(min-width: 768px) {



    .btn-pcs {
        margin-top: 17px;
    }
}




/*
@media(max-width: 1700px) {



    .parametro-contabeis-pce {
        max-height: 395px;
        overflow-x: auto;
    }
}*/

@media(mini-width: 1500px) {


    .parametro-contabeis-pce {
        max-height: 300px;
        overflow-x: auto;
    }
}


@media(min-width: 768px) {



    .btn-pce {
        margin-top: 19px;
    }
}





@media(min-width: 768px) {
    .parametro-pfe {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(7, auto);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "a a a a a a" "n n n o o o" "b b c d e f " "h h h h h h" "i i i i i i" "j j j j k k" "l l l m m m";
    }
}



.descricao-pfe {
    grid-area: a;
}



.tipo-pessoa-pfe {
    grid-area: b;
}

.contribuinte-pfe {
    grid-area: c;
}

.consumidor-pfe {
    grid-area: d;
}

.diferencial-pfe {
    grid-area: e;
}

.regime-pfe {
    grid-area: f;
}


.cfop-pfe {
    grid-area: h;
}

.origem-pfe {
    grid-area: i;
}

.cst-icms-pfe {
    grid-area: j;
}

.cst-ipi-pfe {
    grid-area: k;
}

.cst-pis-pfe {
    grid-area: l;
}

.cst-cofins-pfe {
    grid-area: m;
}

.operacao-pfe {
    grid-area: n;
}

.natureza-pfe {
    grid-area: o;
}

.operacao-os {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, auto);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "a" "b" "c" "d" "i" "e" "f" "g" "o" "h";
}


@media(min-width: 768px) {



    .operacao-os {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, auto);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "a a a a" "b c d i" "e f g o" "h h h h";
    }
}





.descricao-os {
    grid-area: a;
}

.estoque-os {
    grid-area: b;
}

.tipo-conta-os {
    grid-area: c;
}

.comissoes-os {
    grid-area: d;
}

.retorno-os {
    grid-area: e;
}

.periodo-retorno-os {
    grid-area: f;
}

.periodo-tipo-os {
    grid-area: g;
}

.cfop-os {
    grid-area: h;
}

.faturamento-os {
    grid-area: i;
}

.tipo-produto-os {
    margin-top: 21px;
    grid-area: o;
}

/*NOTA FISCAL*/


/*common*/



@page {
    size: auto; /* auto is the initial value */
    /* this affects the margin in the printer settings */
    margin: 6mm 6mm 6mm 6mm;
    size: 29.7cm 21.0cm landscape; /* a4 paper. */
}

section {
    padding-top: 2px;
}

.border-all {
    border: 1px solid rgb(128, 128, 128) !important;
    border-style: solid;
    border-radius: 3px;
    white-space: normal;
    overflow: hidden;
    min-height: 25px;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 1px;
}

hr {
    border-top: 1px dashed rgb(0, 0, 0);
}




tr {
    border-bottom: 1px dashed #000 !important;
    text-align: center;
}


/* Section HEADER*/

.grid-template-header {
    grid-template-areas: "a a a a b b" "c d d d b b";
}

    .grid-template-header .grid-area-a {
        grid-area: a;
    }

    .grid-template-header .grid-area-b {
        grid-area: b;
        text-align: center;
        padding: 10px
    }


    .grid-template-header .grid-area-c {
        grid-area: c;
    }


    .grid-template-header .grid-area-d {
        grid-area: d;
    }

.barras {
    height: 65px;
}


/* Section DANFE*/
.grid-template-danfe {
    text-align: center;
    grid-template-areas: "a a a b b c c c" "a a a b b d d d" "a a a b b e e e" "f f f f f g g g" "h h h i i i j j";
}

    .grid-template-danfe .grid-area-a {
        grid-area: a;
        min-width: 530px;
    }


    .grid-template-danfe .grid-area-b {
        grid-area: b;
        text-align: center;
        padding-top: 10px;
        width: 100%;
    }


    .grid-template-danfe .grid-area-c {
        grid-area: c;
        min-height: 40px;
        margin-left: 2px
    }

    .grid-template-danfe .grid-area-d {
        grid-area: d;
        margin-left: 2px
    }

    .grid-template-danfe .grid-area-e {
        grid-area: e;
        margin-left: 2px
    }

    .grid-template-danfe .grid-area-f {
        grid-area: f;
    }

    .grid-template-danfe .grid-area-g {
        grid-area: g;
    }

    .grid-template-danfe .grid-area-h {
        grid-area: h;
    }

    .grid-template-danfe .grid-area-i {
        grid-area: i;
    }

    .grid-template-danfe .grid-area-j {
        grid-area: j;
        min-width: 350px
    }

.subtitle {
    font-size: 0.5rem;
    color: black;
}

.label-strong {
    color: black;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
    font-size: .7rem;
    padding: 2px !important;
}

.info {
    font-size: .7rem;
    color: black;
}

.canhoto {
    right: 25px;
}



/* Section SENDER INFO*/


.grid-template-sender {
    grid-template-areas: "a a a a a a a a b b c " "d d d d e e e e e f g" "h h h h h i j j k k  l"
}

    .grid-template-sender .grid-area-a {
        grid-area: a;
    }


    .grid-template-sender .grid-area-b {
        grid-area: b;
    }


    .grid-template-sender .grid-area-c {
        grid-area: c;
    }

    .grid-template-sender .grid-area-d {
        grid-area: d;
    }

    .grid-template-sender .grid-area-e {
        grid-area: e;
    }

    .grid-template-sender .grid-area-f {
        grid-area: f;
    }

    .grid-template-sender .grid-area-g {
        grid-area: g;
    }

    .grid-template-sender .grid-area-h {
        grid-area: h;
    }

    .grid-template-sender .grid-area-i {
        grid-area: i;
    }

    .grid-template-sender .grid-area-j {
        grid-area: j;
    }

    .grid-template-sender .grid-area-k {
        grid-area: k;
    }

    .grid-template-sender .grid-area-l {
        grid-area: l;
    }


/* session fature*/

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

.fature-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.font-fature {
    font-size: .5rem;
}



/* Session TAX CALCULATION*/

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



/* Session CONVENYOR*/


.grid-template-convenyor {
    grid-template-areas: "a a a a b b c c d d e f f f" "g g g g g g h h h h i j j j" "k k l l l m m m n n o o p p"
}

    .grid-template-convenyor .grid-area-a {
        grid-area: a;
    }


    .grid-template-convenyor .grid-area-b {
        grid-area: b;
    }


    .grid-template-convenyor .grid-area-c {
        grid-area: c;
    }

    .grid-template-convenyor .grid-area-d {
        grid-area: d;
    }

    .grid-template-convenyor .grid-area-e {
        grid-area: e;
    }

    .grid-template-convenyor .grid-area-f {
        grid-area: f;
    }

    .grid-template-convenyor .grid-area-g {
        grid-area: g;
    }

    .grid-template-convenyor .grid-area-h {
        grid-area: h;
    }

    .grid-template-convenyor .grid-area-i {
        grid-area: i;
    }

    .grid-template-convenyor .grid-area-j {
        grid-area: j;
    }

    .grid-template-convenyor .grid-area-k {
        grid-area: k;
    }

    .grid-template-convenyor .grid-area-l {
        grid-area: l;
    }

    .grid-template-convenyor .grid-area-m {
        grid-area: m;
    }

    .grid-template-convenyor .grid-area-n {
        grid-area: n;
    }

    .grid-template-convenyor .grid-area-o {
        grid-area: o;
    }

    .grid-template-convenyor .grid-area-p {
        grid-area: p;
    }

/* Session ADDITIONAL DATE*/

.dados-adicionais {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "complemetares fisco";
    grid-gap: 1px;
    min-height: 70px;
}

.complemetares {
    grid-area: complemetares;
    min-height: 120px;
    border: 0.2px solid rgb(128, 128, 128) !important;
    border-style: solid;
    border-radius: 3px;
    white-space: normal;
    overflow: hidden;
}

.fisco {
    grid-area: fisco;
    min-height: 110px;
    border: 0.2px solid rgb(128, 128, 128) !important;
    border-style: solid;
    border-radius: 3px;
    white-space: normal;
    overflow: hidden;
}


.barcode {
    width: 90%;
    height: 90%;
}

.produtos {
    min-height: 320px;
    border: 1px solid rgb(128, 128, 128) !important;
    border-radius: 3px;
}

.produtos-fatura-none {
    min-height: 380px;
    border: 1px solid rgb(128, 128, 128) !important;
    border-radius: 3px;
}

.produtos-max {
    min-height: 720px;
    border: 1px solid rgb(128, 128, 128) !important;
    border-radius: 3px;
}


/*.collection-danfe {
    border-top: 1px solid rgb(128, 128, 128) !important;
}*/

/* The maximum column width, that can wrap */
.item-label {
    display: grid;
    grid-template-columns: 1.2fr 3.6fr 0.8fr 0.5fr 0.5fr .7fr .9fr .9fr .9fr .9fr .8fr .8fr 0.5fr 0.5fr;
    max-height: 38px;
}

.item-danfe {
    display: grid;
    grid-template-columns: 1.2fr 3.6fr 0.8fr 0.5fr 0.5fr .7fr .9fr .9fr .9fr .9fr .8fr .8fr 0.5fr 0.5fr;
    min-height: 22px;
    border: none;
}



/* In order to maximize row lines, only display one line for a cell */
.attribute-danfe {
    border-right: 1px solid rgb(128, 128, 128) !important;
    border-bottom: 1px dotted;
    border-color: black;
    padding: 2px;
    font-size: .7rem;
    font-family: Andale Mono, monospace;
}

.atribute-danfe-center {
    text-align: center;
}

.atribute-danfe-right {
    text-align: right;
}

.attribute-danfe-last {
    padding: 2px;
    border-bottom: 1px dotted;
    font-size: .7rem;
    font-family: Andale Mono, monospace;
}

.attribute-danfe-none {
    padding: 2px;
    overflow: hidden;
    font-size: .7rem;
    border-bottom: none;
    border-right: 1px solid rgb(128, 128, 128) !important;
    font-family: Andale Mono, monospace;
}


.attribute-danfe-last-none {
    padding: 2px;
    overflow: hidden;
    white-space: nowrap;
    font-size: .7rem;
    border-bottom: none;
    font-family: Andale Mono, monospace;
}


.attribute-danfe-label {
    border-right: 1px solid rgb(128, 128, 128) !important;
    border-bottom: 1px solid;
    border-color: black;
    padding: 2px;
    text-align: center;
    font-family: Andale Mono, monospace;
    font-size: .7rem;
    font-weight: bold;
}

.attribute-danfe-label-last {
    border-bottom: 1px solid;
    border-color: black;
    padding: 2px;
    text-align: center;
    font-family: Andale Mono, monospace;
    font-size: .7rem;
    font-weight: bold;
}



.quebrar-texto {
    word-wrap: normal;
}

.dados-adicionais-texto {
    font-size: .5rem;
}

.nota-background {
    margin: 0;
    background-color: rgb(220, 220, 220);
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 20px;
    padding-bottom: 10px;
    font-size: 9px;
    font-family: Andale Mono, monospace;
    color: black;
}

.nota-padding-top {
    padding-top: 10px;
}


.nota {
    padding: 3mm;
    background-color: white;
}

.imprimir-fechar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: ". . . imprimir-nota fechar-nota . . .";
    gap: 5rem;
}


.imprimir {
    grid-area: imprimir-nota;
    margin: 10px;
    margin-left: 50%;
    margin-right: 50%
}

.fechar-nota {
    grid-area: fechar-nota;
    margin: 10px;
    margin-left: 50%;
    margin-right: 50%
}

.button-imprimir {
    height: 25px;
    width: 90px;
    background-color: #42a5f5;
}

.button-buscar {
    height: 45px;
    width: 90px;
    background-color: #42a5f5;
}

.button-cadastrar {
    height: 45px;
    width: 90px;
    background-color: #26920c;
}

fechar-nota {
    height: 25px;
    width: 90px;
    background-color: #42a5f5;
}

@media print {




    .nota-background {
        background-color: white;
        padding: 0;
        page-break-before: always;
        padding-top: 5px;
    }

    .nota-padding-top {
        margin-top: 3mm;
    }



    .nota {
        padding: 0;
    }

    .item-label {
        display: grid;
        grid-template-columns: 70px 185px 40px 30px 30px 40px 58px 58px 55px 55px 55px 45px 30px 30px;
        max-height: 38px;
    }

    .item-danfe {
        display: grid;
        grid-template-columns: 70px 185px 40px 30px 30px 40px 58px 58px 55px 55px 55px 45px 30px 30px;
        min-height: 22px;
        border: none;
    }

    .subtitle {
        font-size: 0.4rem;
    }


    .font-print {
        font-size: .5rem;
    }

    .info {
        font-size: .6rem;
    }

    .grid-template-danfe .grid-area-a {
        grid-area: a;
        min-width: 280px;
        margin-left: 1px;
    }


    .grid-template-danfe .grid-area-b {
        grid-area: b;
        text-align: center;
        padding-top: 10px;
        max-width: 160px;
    }

    .grid-template-danfe .grid-area-d {
        grid-area: d;
        margin-left: .5px
    }


    .grid-template-danfe .grid-area-j {
        grid-area: j;
        min-width: 250px
    }

    .grid-template-danfe .grid-area-c {
        grid-area: c;
        min-height: 40px;
        margin-left: .5px
    }

    .grid-template-danfe .grid-area-e {
        grid-area: e;
        margin-left: .5px
    }

    .imprimir-fechar {
        padding: 0 !important;
        margin: 0 !important;
        display: none;
    }

    .usuario-layout {
        display: none;
        margin: 0 !important;
        padding: 0 !important;
    }

    .noprint {
        display: none;
        margin: 0 !important;
        padding: 0 !important;
    }
}


.conciliacao-cp {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "a b" "a b" "a b" "a i";
    gap: .5rem;
    height: 60vh;
    margin-left: 5px;
    margin-right: 10px;
}


.empresas-pc {
    grid-area: c;
}

.opcao-pc {
    grid-area: d;
}

.conciliacao-produto-for {
    grid-area: a;
}

.quadro1 {
    display: grid;
    grid-template-columns: 1fr .3fr;
    grid-template-rows: .1fr auto;
    grid-template-areas: "c d" "e e";
    row-gap: .5rem;
    column-gap: .5rem;
}

.quadro2 {
    display: grid;
    grid-template-columns: 1fr .3fr;
    grid-template-rows: .1fr auto;
    grid-template-areas: "g n" "h h";
    row-gap: .5rem;
    column-gap: .5rem;
}

.quadro3 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "j" "l" "m" "o";
    row-gap: .5rem;
    column-gap: .5rem;
    padding: 5px;
}

.produtos-conciliados {
   
}

.conciliacao-produto-fornecedor {
    grid-area: e;
    border: 1px solid #42a5f5 !important;
    overflow-y: auto;
    background-color: azure;
}


.conciliacao-produto-emp {
    grid-area: b;
}

.operacoes-cp {
    grid-area: i;
    border: 1px solid #42a5f5 !important;
    background-color: azure;
}


.conciliacao-produto-empresa {
    grid-area: h;
    border: 1px solid #42a5f5 !important;
    overflow-y: auto;
    background-color: azure;
}





.titulo-conciliacao-fornecedor {
    background-color: #42a5f5;
    text-align: center;
    padding: 5px
}

.titulo-conciliacao {
    background-color: #42a5f5;
    text-align: center;
    padding: 5px
}

.consulta-conciliacao-cp {
    grid-area: g;
}

.conciliar-cp {
    grid-area: j;
}


.gravar-conciliacao-cp {
    grid-area: l;
}

.servicos-cp {
    grid-area: m;
}

.produto-cp {
    grid-area: o;
}

.button-consultar-cp {
    margin-top: 15px;
    grid-area: n;
}




.empresas-pp {
    grid-area: a;
}

.parametro-produto-list {
    grid-area: b;
    height: 43vh;
    overflow-y: auto;
    border: 1px solid #42a5f5 !important;
}

.titulo-parametro-produto {
    background-color: #42a5f5;
    text-align: center;
    padding: 5px
}

.input-list {
    width: 100%;
    margin: 0;
    font-size: 10px;
}

.input-grid {
    font-size: 14px;
    height: 100%;
    width: 100%;
    /* margin-left: 10px;*/
    margin: 0;
    border-radius: 0;
    border: White !important;
    padding-left: 2px;
    padding-right: 2px;
}

.input-grid-sucesso {
    font-size: 14px;
    height: 100%;
    width: 100%;
    /* margin-left: 10px;*/
    margin: 0;
    border-radius: 0;
    border-color: #9bfc60 !important;
    padding-left: 2px;
    padding-right: 2px;
    background-color: #9bfc60;
}

.input-grid-modificado {
    font-size: 14px;
    height: 100%;
    width: 100%;
    /* margin-left: 10px;*/
    margin: 0;
    border-radius: 0;
    border-color: #caf8fa !important;
    padding-left: 2px;
    padding-right: 2px;
    background-color: #caf8fa;
}

#modificado {
    background-color: #caf8fa;
}

.input-grid-error {
    font-size: 14px;
    height: 100%;
    width: 100%;
    /* margin-left: 10px;*/
    margin-top: 1px;
    border-radius: 0;
    border: 2px solid red !important;
    padding-left: 2px;
    padding-right: 2px;
}


.text-area-grid {
    font-size: 14px;
    height: 100%;
    width: 100%;
    /* margin-left: 10px;*/

    border-radius: 0;
    border: 1px solid White !important;
    padding-left: 2px;
    padding-right: 2px;
    height: auto;
}

.text-area-grid-error {
    font-size: 14px;
    height: 100%;
    width: 100%;
    /* margin-left: 10px;*/
    margin-top: 1px;
    border-radius: 0;
    border: 2px solid red !important;
    padding-left: 2px;
    padding-right: 2px;
    height: auto;
}

.input-list textarea {
    resize: none;
}


.margim-left {
    border-left: 1px solid #42a5f5 !important;
}

.margim-right {
    border-right: 1px solid #42a5f5 !important;
}


.margim-top {
    border-top: 1px solid #42a5f5 !important;
}

.margim-bottom {
    border-bottom: 1px solid #42a5f5 !important;
}

.btn-lancamento {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: " j d e f g h i";
    grid-gap: .2rem;
    width: 100%;
}



.btn-lancamento-area {
    grid-area: c;
}

.lancamento-documento {
    grid-area: j;
}

.lancamento-parametro {
    grid-area: d;
}

.lancamento-lancamento {
    grid-area: e;
}

.lancamento-pagar {
    grid-area: f;
}

.lancamento-tributos {
    grid-area: g;
}

.lancamento-custos {
    grid-area: h;
}

.lancamento-resumo {
    grid-area: i;
}

.btn-color-lg {
    background-color: #caf0f8;
    font-weight: bold;
}

.btn-color1-lg {
    background-color: #48cae4;
    font-weight: bold;
}


.btn-color-lg:hover {
    background-color: #90e0ef
}

.lancamento-produto {
    display: grid;
    grid-template-rows: .1fr auto 1fr;
    grid-template-areas: "a" "c" "e" "b";
    row-gap: .5rem;
    column-gap: .5rem;
    height: 60vh;
    margin-left: 5px;
    margin-right: 10px;
}

.filtro-lp-area {
    grid-area: e;
    margin-bottom: 5px;
}

.titulo-lancamento-produto {
    background-color: #42a5f5;
    text-align: center;
    padding: 5px
}

.lancamento-produto-list {
    grid-area: b;
    height: 38vh;
    border: 1px solid #42a5f5 !important;
}

.cadastro-documento-lp {
    grid-area: b;
    height: 38vh;
    border: 1px solid #42a5f5 !important;
}



@media (min-width: 768px) { /* 768px */


    .parametro-produto {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: .1fr auto 1fr;
        grid-template-areas: "a" "c" "b";
        row-gap: .5rem;
        column-gap: .5rem;
        height: 60vh;
        margin-left: 5px;
        margin-right: 10px;
    }



    .lancamento-produto-list-height {
        height: 38vh;
    }


    .container-lancamento-produto {
        display: grid;
        grid-template-columns: .2fr 1fr 2.5fr .3fr .2fr .5fr.5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr;
        grid-template-rows: 1fr;
        grid-gap: 0;
        width: 100%;
        padding: 0;
        font-size: 14px;
    }

    .container-lancamento-produto-totais {
        display: grid;
        grid-template-columns: 5.2fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr;
        grid-template-rows: 1fr;
        grid-gap: 0;
        width: 100%;
        padding: 0;
        font-size: 14px;
    }


    .container-lancamento-produto-icms {
        display: grid;
        grid-template-columns: .12fr 1fr 2fr .3fr .2fr .5fr .5fr.5fr .5fr;
        grid-template-rows: 1fr;
        grid-gap: 0;
        width: 100%;
        padding: 0;
        font-size: 14px;
    }


    .container-lancamento-produto-icms-totais {
        display: grid;
        grid-template-columns: 3.62fr .5fr .5fr.5fr .5fr;
        grid-template-rows: 1fr;
        grid-gap: 0;
        width: 100%;
        padding: 0;
        font-size: 14px;
    }


    .container-lancamento-produto-icms-st {
        display: grid;
        grid-template-columns: .2fr 1.2fr .2fr .2fr 1.7fr 2.2fr .5fr;
        grid-template-areas: "a b c d e f g";
        grid-template-rows: 1fr;
        grid-gap: 0;
        width: 100%;
        padding: 0;
        font-size: 13px;
    }

    .container-lancamento-produto-icms-st-totais {
        display: grid;
        grid-template-columns: 3.6fr 1.7fr 2.2fr .5fr;
        grid-template-areas: "a b c d e f g";
        grid-template-rows: 1fr;
        grid-gap: 0;
        width: 100%;
        padding: 0;
        font-size: 13px;
    }


    .item-lp {
        grid-area: a;
    }

    .descricao-lp {
        grid-area: b;
        text-align: center;
        border-bottom: 1px solid #42a5f5;
        border-right: 1px solid #42a5f5;
    }


    .cfop-lp {
        grid-area: c;
        text-align: center;
        border-bottom: 1px solid #42a5f5;
        border-right: 1px solid #42a5f5;
    }

    .cst-lp {
        grid-area: d;
        text-align: center;
        border-bottom: 1px solid #42a5f5;
        border-right: 1px solid #42a5f5;
    }


    .credito-icms-st-lp {
        display: grid;
        grid-template-columns: 1fr .4fr 1fr;
        grid-template-areas: ". a ." "b c d";
        grid-template-rows: auto auto;
        grid-gap: 0;
        width: 100%;
        padding: 0;
        border-right: 1px solid #42a5f5;
    }

    #credito-st {
        background-color: #a2d2ff
    }


    .credito-icms-st-lp-area {
        grid-area: e;
    }


    .credito-lb {
        grid-area: a;
        text-align: center;
    }

    .base-icms-proprio-lp {
        grid-area: b;
        border-right: 1px solid #42a5f5;
        border-top: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-align: center;
    }

    .aliq-icms-proprio-lp {
        grid-area: c;
        border-right: 1px solid #42a5f5;
        border-top: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-align: center;
    }

    .icms-proprio-lp {
        grid-area: d;
        border-top: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-align: center;
    }

    .debito-icms-st-lp {
        display: grid;
        grid-template-columns: 1fr .5fr 1fr .5fr 1fr;
        grid-template-areas: ". . a . ." "b c d e f";
        grid-template-rows: auto auto;
        grid-gap: 0;
        width: 100%;
        padding: 0;
        border-right: 1px solid #42a5f5;
    }

    #debito-st {
        background-color: #e29578
    }

    .debito-icms-st-lp-area {
        grid-area: f;
    }


    .debito-lb {
        grid-area: a;
        text-align: center;
    }

    .valor-produto-st-lp {
        grid-area: b;
        border-right: 1px solid #42a5f5;
        border-top: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-align: center;
    }

    .mva-lp {
        grid-area: c;
        border-right: 1px solid #42a5f5;
        border-top: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-align: center;
    }

    .base-icms-st {
        grid-area: d;
        border-right: 1px solid #42a5f5;
        border-top: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-align: center;
    }

    .aliquota-st-lp {
        grid-area: e;
        border-top: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-align: center;
        border-right: 1px solid #42a5f5;
    }

    .icms-st-lp {
        grid-area: f;
        border-top: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-align: center;
    }


    .icms-st-pagar-lp {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "a" "b";
        grid-template-rows: auto auto;
        grid-gap: 0;
        width: 100%;
        padding: 0;
        font-size: 13px;
        border-right: 1px solid #42a5f5;
    }

    #recolher-st {
        background-color: #e9c46a
    }

    .icms-st-pagar-lp-area {
        grid-area: g;
    }

    .st-lp {
        grid-area: a;
        border-top: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-align: center;
    }

    .st-valor-lp {
        grid-area: b;
        border-top: 1px solid #42a5f5;
        border-bottom: 1px solid #42a5f5;
        text-align: center;
    }

    .container-lancamento-produto-icms-demais-valores {
        display: grid;
        grid-template-columns: .2fr 1fr 2.1fr .4fr .3fr .6fr .6fr .6fr .6fr .6fr;
        grid-template-rows: 1fr;
        grid-gap: 0;
        width: 100%;
        padding: 0;
        font-size: 13px;
    }

    .container-lancamento-produto-icms-demais-valores-totais {
        display: grid;
        grid-template-columns: 4fr .6fr .6fr .6fr .6fr .6fr;
        grid-template-rows: 1fr;
        grid-gap: 0;
        width: 100%;
        padding: 0;
        font-size: 13px;
    }
}

@media(min-width: 1700px) {
    .lancamento-produto-list-height {
        height: 42vh;
    }
}

.item-container-cadastro-documento {
    display: grid;
    grid-template-columns: .5fr 1.5fr 1.1fr .3fr .2fr .3fr .7fr .7fr .5fr .5fr .4fr .2fr;
    grid-template-rows: 1fr;
    grid-gap: 0;
    width: 100%;
    padding: 0;
    font-size: 13px;
    overflow-y: auto;
}

.paramentro-fiscal-pp {
    display: grid;
    grid-template-columns: 5fr 1fr;
    grid-template-areas: "a b";
    row-gap: .5rem;
    column-gap: .5rem;
    margin: 0 3px 5px 3px;
}

.paramentro-entrada-pp {
    grid-area: a;
}

.button-parametro-pp {
    grid-area: b;
}

.btn-pp {
    margin-top: 21px;
}


@media (min-width: 768px) { /* 768px */
    .register-conteudo-cte-item {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: 3px, auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "menu-itens titulo-registro" "menu-itens entrada-cte";
        width: 100%;
    }

    .entrada-cte {
        display: grid;
        grid-template-columns: .5fr .5fr .5fr .5fr .5fr .5fr;
        grid-template-rows: repeat(7, 1fr);
        grid-gap: .2rem;
        grid-template-areas:
            "parametro-cte parametro-cte parametro-cte parametro-cte parametro-cte parametro-cte"
            "codigo-cte  codigo-cte codigo-cte  codigo-cte codigo-cte codigo-cte"
            "cst-icms-cte button-cst-cte natureza-cte button-natureza-cte cfop-cte button-cfop-cte"
            "valor-contabil-cte base-icms-cte aliquota-icms-cte valor-icms-cte valor-nao-tributado-cte ."
            "cst-pis-cte  button-cst-pis-cte  base-pis-cte aliquota-pis-cte valor-pis-cte ."
            "cst-cofins-cte button-cst-cofins-cte  base-cofins-cte aliquota-cofins-cte valor-cofins-cte ."
            "cidade-origem-cte cidade-origem-cte cidade-origem-cte cidade-destino-cte cidade-destino-cte cidade-destino-cte";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 5px;
    }
}


.button-cst-cte {
    margin-top: 19px;
    grid-area: button-cst-cte;
}

.button-cst-pis-cte {
    margin-top: 19px;
    grid-area: button-cst-pis-cte;
}

.button-cst-cofins-cte {
    margin-top: 19px;
    grid-area: button-cst-cofins-cte;
}

.button-natureza-cte {
    margin-top: 19px;
    grid-area: button-natureza-cte;
}

.button-cfop-cte {
    margin-top: 19px;
    grid-area: button-cfop-cte;
}

.parametro-cte {
    grid-area: parametro-cte;
}

.codigo-cte {
    grid-area: codigo-cte;
}

.button-codigo-cte {
    margin-top: 19px;
    grid-area: button-codigo-cte;
}

.descricao-cte {
    grid-area: descricao-cte;
}

.cst-icms-cte {
    grid-area: cst-icms-cte;
}

.natureza-cte {
    grid-area: natureza-cte;
}

.cfop-cte {
    grid-area: cfop-cte;
}

.valor-contabil-cte {
    grid-area: valor-contabil-cte;
}

.base-icms-cte {
    grid-area: base-icms-cte;
}

.aliquota-icms-cte {
    grid-area: aliquota-icms-cte;
}

.valor-icms-cte {
    grid-area: valor-icms-cte;
}

.valor-nao-tributado-cte {
    grid-area: valor-nao-tributado-cte;
}

.cst-pis-cte {
    grid-area: cst-pis-cte;
}

.base-pis-cte {
    grid-area: base-pis-cte;
}

.aliquota-pis-cte {
    grid-area: aliquota-pis-cte;
}

.valor-pis-cte {
    grid-area: valor-pis-cte;
}

.cst-cofins-cte {
    grid-area: cst-cofins-cte;
}

.base-cofins-cte {
    grid-area: base-cofins-cte;
}

.aliquota-cofins-cte {
    grid-area: aliquota-cofins-cte;
}

.valor-cofins-cte {
    grid-area: valor-cofins-cte;
}

.estado-origem-cte {
    grid-area: estado-origem-cte;
}

.estado-destino-cte {
    grid-area: estado-destino-cte;
}

.cidade-origem-cte {
    grid-area: cidade-origem-cte;
}

.cidade-destino-cte {
    grid-area: cidade-destino-cte;
}

.cidade-list-cte {
    position: absolute;
    margin-top: 1px;
    width: auto;
    min-width: 250px;
    height: auto;
    min-height: 25px;
    border: 1px solid;
    background-color: white
}

/*Contas a pagar*/

.register-conteudo-conta-pagar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "menu-itens" "titulo-registro" "conta-pagar-area";
    width: 100%;
}

.register-conteudo-conta-pagar-1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "conta-pagar-area";
    width: 100%;
}

.conta-pagar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-gap: .2rem;
    grid-template-areas:
        "parametro-conta-pagar-area"
        "titulo-conta-pagar-area"
        "conta-pagar-list";
    width: 100%;
    border-radius: 5px;
    border: 1px solid;
    color: #7e8dd7;
    padding: 5px;
}

.paramentro-conta-pagar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b";
    grid-gap: 0rem;
}

.titulo-conta-pagar {
    background-color: #42a5f5;
    text-align: center;
    padding: 5px
}

.button-conta-pagar-execult {
    margin-top: 2px;
}

@media (min-width: 768px) { /* 768px */



    .register-conteudo-conta-pagar {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: 3px, auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "menu-itens titulo-registro" "menu-itens conta-pagar-area";
        width: 100%;
    }

    .register-conteudo-conta-pagar-1 {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "conta-pagar-area";
        width: 95%;
        height: 40vh;
    }


    .conta-pagar {
        display: grid;
        grid-template-columns: 7fr 1fr;
        grid-template-rows: 1fr .2fr 280px;
        grid-gap: .2rem;
        grid-template-areas:
            "parametro-conta-pagar-area parametro-conta-pagar-area"
            "titulo-conta-pagar-area  titulo-conta-pagar-area"
            "conta-pagar-list conta-pagar-list";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 5px;
        height: 40
    }

    .paramentro-conta-pagar {
        display: grid;
        grid-template-columns: 5fr 1fr;
        grid-template-areas: "a b";
        row-gap: .5rem;
        column-gap: .5rem;
        margin: 0 3px 5px 3px;
    }

    .button-conta-pagar-execult {
        margin-top: 11px;
    }

    .buttons-contas-pagar-grid {
        display: grid;
        grid-template-columns: 200px 1fr 1fr 1fr;
        grid-template-areas: " . .  . a ";
        row-gap: .5rem;
        column-gap: .5rem;
        margin-bottom: 10px;
    }


    .button-gravar-contas-pagar-area {
        grid-area: a;
    }

    .acao-conta-pagar {
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-gap: .2rem;
    }
}

.conta-pagar-area {
    grid-area: conta-pagar-area;
}

.parametro-conta-pagar-area {
    grid-area: parametro-conta-pagar-area;
}

.titulo-conta-pagar-area {
    grid-area: titulo-conta-pagar-area;
    color: black;
}

.conta-pagar-list {
    grid-area: conta-pagar-list;
    overflow: auto
}


/*Serviços tomados*/

@media (min-width: 768px) { /* 768px */
    .register-conteudo-servicos-tomados-item {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: 15px auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "menu-itens titulo-registro" "menu-itens servicos-tomados";
        width: 100%;
    }

    .servicos-tomados {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: .9fr .5fr .2fr 120px 50px;
        grid-gap: .2rem;
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 5px;
    }

    .servicos-tomados-area-codigos {
        display: grid;
        grid-template-columns: .5fr 1fr .1fr .5fr .1fr;
        grid-template-rows: 1fr 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "a aa aa aa aa"
            "b b c d e";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        padding: 5px;
    }

    .servicos-tomados-area-principal {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr .5fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: .1rem;
        grid-template-areas: "a b c d e f";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        padding: 5px;
    }

    .botton-servicos-tomados {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: .1rem;
        grid-template-areas: "a b c . .";
        width: 100%;
    }




    .servicos-tomados-area-pis-cofins {
        display: grid;
        grid-template-columns: .3fr .3fr 1fr .5fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: .1rem;
        grid-template-areas: "a b c d e"
            "f g h i j";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        padding: 5px;
    }

    .servicos-tomados-area-retido {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: .1rem;
        grid-template-areas: "a . . . ."
            "b c . . ."
            "d e . . ."
            "f g . . ."
            "h i . . ."
            "j l . . .";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        padding: 5px;
        overflow: auto;
    }

    .servicos-tomados-obras {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: .1rem;
        grid-template-areas: "a b . . .";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        padding: 5px;
    }

    .servicos-tomados-outros {
        display: grid;
        grid-template-columns: .5fr .9fr .5fr .9fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "a b c d";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        padding: 5px;
    }
}


.button-credito-pis-cofins {
    grid-area: a;
}

.button-retidos {
    grid-area: b;
}

.button-obra {
    grid-area: c;
}

.parametro-servicos-tomados {
    grid-area: a;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.parametro-servicos-tomados-descricao {
    grid-area: aa;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.produto-servicos-tomados {
    grid-area: b;
}

.button-produto-servicos-tomados {
    margin-top: 19px;
    grid-area: c
}

.codigo-servico-tomados {
    grid-area: d;
}

.button-codigo-servicos-tomados {
    margin-top: 19px;
    grid-area: e;
}


.valor-contabil-servicos-tomados {
    grid-area: a;
}

.deducoes-servicos-tomados {
    grid-area: b;
}

.base-calculo-servicos-tomados {
    grid-area: c;
}

.aliquota-servicos-tomados {
    grid-area: d;
}

.iss-servicos-tomados {
    grid-area: e;
}

.responsavel-servicos-tomados {
    grid-area: f;
}

.cst-pis-servicos-tomados {
    grid-area: a;
}

.button-cst-pis-servicos-tomados {
    margin-top: 19px;
    grid-area: b;
}

.base-pis-servicos-tomados {
    grid-area: c;
}

.aliquota-pis-servicos-tomados {
    grid-area: d;
}

.valor-pis-servicos-tomados {
    grid-area: e;
}

.cst-cofins-servicos-tomados {
    grid-area: f;
}

.button-cst-cofins-servicos-tomados {
    margin-top: 19px;
    grid-area: g;
}

.base-cofins-servicos-tomados {
    grid-area: h;
}

.aliquota-cofins-servicos-tomados {
    grid-area: i;
}

.valor-cofins-servicos-tomados {
    grid-area: j;
}

.rentencoes-servicos-tomados {
    grid-area: a;
}

.aliquota-irrf-servicos-tomados {
    grid-area: b;
}

.irrf-servicos-tomados {
    grid-area: c;
}

.aliquota-pis-retido-servicos-tomados {
    grid-area: d;
}

.pis-retido-servicos-tomados {
    grid-area: e;
}

.aliquota-cofins-retido-servicos-tomados {
    grid-area: f;
}

.cofins-retido-servicos-tomados {
    grid-area: g;
}

.aliquota-cssl-retido-servicos-tomados {
    grid-area: h;
}

.cssl-retido-servicos-tomados {
    grid-area: i;
}

.aliquota-Inss-retido-servicos-tomados {
    grid-area: j;
}

.inss-retido-servicos-tomados {
    grid-area: l;
}

.codigo-obra-servicos-tomados {
    grid-area: a;
}

.codigo-art-obra-servicos-tomados {
    grid-area: b;
}

.label-cidade-obra {
    margin-top: 8px;
    text-align: right;
    grid-area: a;
}

.cidade-realizacao-servicos-tomados {
    grid-area: b;
}

.label-cidade-iss-devido {
    margin-top: 8px;
    text-align: right;
    grid-area: c;
}

.cidade-iss-devido-servicos-tomados {
    grid-area: d;
}

.cidade-list-servidos-tomados {
    position: absolute;
    /* margin-top: 378px;*/
    margin-top: 1px;
    width: auto;
    min-width: 250px;
    height: auto;
    min-height: 25px;
    border: 1px solid;
    background-color: white;
    cursor: pointer;
}

.item-list {
    position: absolute;
    /* margin-top: 378px;*/
    margin-top: 1px;
    width: auto;
    min-width: 450px;
    height: auto;
    min-height: 25px;
    border: 1px solid;
    background-color: white;
    cursor: pointer;
}

/*cadastro de despesas*/

@media (min-width: 768px) { /* 768px */
    .register-conteudo-despesas-item {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: 15px auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "menu-itens titulo-registro" "menu-itens despesas";
        width: 100%;
    }

    .despesas {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: .9fr .5fr .2fr 160px;
        grid-gap: .2rem;
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 5px;
    }

    .despesas-area-codigos {
        display: grid;
        grid-template-columns: 1fr 1fr .1fr .5fr .1fr;
        grid-template-rows: 1fr 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "a aa aa aa aa"
            "b b c d e";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        padding: 5px;
    }

    .despesas-area-principal {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr .5fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: .1rem;
        grid-template-areas: "a b c d e f";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        padding: 5px;
    }

    .botton-despesas {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: .1rem;
        grid-template-areas: "a b c . .";
        width: 100%;
    }




    .despesas-area-pis-cofins {
        display: grid;
        grid-template-columns: .3fr .3fr 1fr .5fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: .1rem;
        grid-template-areas: "a b c d e"
            "f g h i j";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        padding: 5px;
    }

    .despesas-area-retido {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: .1rem;
        grid-template-areas: "a . . . ."
            "b c . . ."
            "d e . . ."
            "f g . . ."
            "h i . . ."
            "j l . . .";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        padding: 5px;
        overflow: auto;
    }

    .despesas-obras {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: .1rem;
        grid-template-areas: "a b . . .";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        padding: 5px;
    }

    .despesas-outros {
        display: grid;
        grid-template-columns: .5fr .9fr .5fr .9fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "a b c d";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        padding: 5px;
    }
}


.button-credito-pis-cofins-despesas {
    grid-area: a;
}

.button-retidos-despesas {
    grid-area: b;
}



.parametro-despesas {
    grid-area: a;
}

.parametro-descricao-gasto {
    grid-area: aa;
}

.produto-despesas {
    grid-area: b;
}

.button-produto-despesas {
    margin-top: 19px;
    grid-area: c
}

.codigo-servico-tomados {
    grid-area: d;
}

.button-codigo-despesas {
    margin-top: 19px;
    grid-area: e;
}


.valor-contabil-despesas {
    grid-area: a;
}



.cst-pis-despesas {
    grid-area: a;
}

.button-cst-pis-despesas {
    margin-top: 19px;
    grid-area: b;
}

.base-pis-despesas {
    grid-area: c;
}

.aliquota-pis-despesas {
    grid-area: d;
}

.valor-pis-despesas {
    grid-area: e;
}

.cst-cofins-despesas {
    grid-area: f;
}

.button-cst-cofins-despesas {
    margin-top: 19px;
    grid-area: g;
}

.base-cofins-despesas {
    grid-area: h;
}

.aliquota-cofins-despesas {
    grid-area: i;
}

.valor-cofins-despesas {
    grid-area: j;
}

.rentencoes-despesas {
    grid-area: a;
}

.aliquota-irrf-despesas {
    grid-area: b;
}

.irrf-despesas {
    grid-area: c;
}

.aliquota-pis-retido-despesas {
    grid-area: d;
}

.pis-retido-despesas {
    grid-area: e;
}

.aliquota-cofins-retido-despesas {
    grid-area: f;
}

.cofins-retido-despesas {
    grid-area: g;
}

.aliquota-cssl-retido-despesas {
    grid-area: h;
}

.cssl-retido-despesas {
    grid-area: i;
}

.aliquota-Inss-retido-despesas {
    grid-area: j;
}

.inss-retido-despesas {
    grid-area: l;
}

.codigo-obra-despesas {
    grid-area: a;
}

.codigo-art-obra-despesas {
    grid-area: b;
}

/*Tributos a pagar*/

.tributo-pagar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-template-areas: "a a" "b b" " c c " " d d " "e f" "g h" "i i" "j j";
    grid-gap: .2rem;
    width: 100%;
    border-radius: 5px;
    border: 1px solid;
    color: #7e8dd7;
    padding: 5px;
}


@media (min-width: 768px) { /* 768px */

    .register-conteudo-tributo-pagar {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "menu-itens tributo-pagar";
        width: 100%;
    }

    .tributo-pagar {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-template-areas: "a a a a a a a" "b b b b b b b" "c d e f g h i" "j j j j j j j";
        grid-gap: .2rem;
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 5px;
    }
}




.parametro-tributo-pagar {
    grid-area: a;
}

.tributo-relacao-tributo-pagar {
    grid-area: b;
}

.apuracao-tributo-pagar {
    grid-area: c;
}

.valor-tributo-pagar {
    grid-area: d;
}

.multa-tributo-pagar {
    grid-area: e;
}

.juros-tributo-pagar {
    grid-area: f;
}

.despesas-tributo-pagar {
    grid-area: g;
}

.desconto-tributo-pagar {
    grid-area: h;
}

.total-tributo-pagar {
    grid-area: i;
    font-size: 15px;
}


.descricao-tributo-pagar {
    grid-area: j;
}

/*Cadastro de Multa juros e descontos*/

.register-conteudo-acrescimos-descontos {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 25px auto auto;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "titulo-registro" "acrescimos-descontos" "acrescimos-descontos-lancamento";
    width: 100%;
    border-radius: 5px;
}

.acrescimos-descontos {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, 1fr);
    grid-template-areas: "a" "b" "c" "d" "e" "f" "g";
    grid-gap: .2rem;
    width: 100%;
    border-radius: 5px;
    border: 1px solid;
    color: #7e8dd7;
    padding: 5px;
}

.acrescimos-descontos-lancamento {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas: "a1" "b1" "c1" "d1" "e1" "f1";
    grid-gap: .2rem;
    width: 100%;
    border-radius: 5px;
    border: 1px solid;
    color: #7e8dd7;
    padding: 5px;
}



@media (min-width: 768px) { /* 768px */
    .register-conteudo-acrescimos-descontos {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 25px auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "titulo-registro" "acrescimos-descontos" "acrescimos-descontos-lancamento";
        width: 100%;
        border-radius: 5px;
    }


    .acrescimos-descontos {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: 1fr;
        grid-template-areas: "a b c d e f g";
        grid-gap: .2rem;
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 5px;
    }

    .acrescimos-descontos-lancamento {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "a1 b1 c1 d1 e1 " "f1 f1 f1 f1 f1";
        grid-gap: .2rem;
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 5px;
    }
}





.data-vencimento-acrescimos-descontos {
    grid-area: a;
}

.valor-parcela-acrescimos-descontos {
    grid-area: b;
}

.total-multa-acrescimos-descontos {
    grid-area: c;
}

.total-juros-acrescimos-descontos {
    grid-area: d;
}

.total-despesas-acrescimos-descontos {
    grid-area: e;
}

.total-descontos-acrescimos-descontos {
    grid-area: f;
}

.total-pagar-acrescimos-descontos {
    grid-area: g;
}

.data-acrescimos-descontos {
    grid-area: a1;
}

.multa-acrescimos-descontos {
    grid-area: b1;
}

.juros-acrescimos-descontos {
    grid-area: c1;
}



.despesas-acrescimos-descontos {
    grid-area: d1;
}

.desconto-acrescimos-descontos {
    grid-area: e1;
}



.observacao-acrescimos-descontos {
    grid-area: f1;
}

/*Filtro*/

.filtro {
    border: 1px solid;
    border-radius: 2px;
    padding: 10px;
    border-color: #42a5f5;
    padding: 5px;
    background-color: azure;
    margin-bottom: 5px;
}


@media (max-width: 767px) {
    .filtro-label {
        font-size: 12px;
        font-family: Roboto, sans-serif;
    }
}

@media (min-width: 768px) /* 768px */
{


    .filtro {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr .5fr;
        grid-template-rows: auto auto;
        grid-template-areas: "a b c d " "aa bb cc dd";
        grid-gap: .2rem;
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
        border-color: #42a5f5;
        padding: 5px;
        background-color: azure;
        margin-bottom: 5px;
    }

    .filtro-label {
        font-size: 13px;
        font-family: Roboto, sans-serif;
    }

    .filtro-label-parametro1 {
        grid-area: a;
        font-size: 13px;
    }

    .filtro-label-parametro2 {
        grid-area: b;
        font-size: 13px;
    }

    .filtro-label-parametro3 {
        grid-area: c;
        font-size: 13px;
    }

    .filtro-label-execultar {
        grid-area: d;
        font-size: 13px;
    }

    .filtro-campo1 {
        grid-area: a;
    }

    .filtro-criterio1 {
        grid-area: b;
    }

    .filtro-texto1 {
        grid-area: c;
    }

    .filtro-parametro1 {
        grid-area: aa;
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
        border-color: #42a5f5;
        padding: 5px;
        background-color: white;
    }

    .filtro-template-parametro {
        display: grid;
        grid-template-columns: 1fr .5fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "a b c";
        grid-gap: .2rem;
    }

    .filtro-parametro2 {
        grid-area: bb;
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
        border-color: #42a5f5;
        padding: 5px;
        background-color: white;
    }

    .filtro-parametro3 {
        grid-area: cc;
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
        border-color: #42a5f5;
        padding: 5px;
        background-color: white;
    }

    .filtro-acoes {
        grid-area: dd;
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
        border-color: #42a5f5;
        padding: 5px;
        background-color: white;
    }
}








/*Baixa de titulos*/


.execultar-baixa-Titulo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr, 1fr;
    grid-gap: .2rem;
}

.select-baixa {
    font-size: 12px;
}

.button-baixa {
    font-size: 12px;
    margin-top: 6px !important;
    height: 25px !important;
}

.execucao-label {
    font-size: 13px;
}

.execucao-baixa {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    row-gap: .5rem;
    column-gap: .5rem;
    border: 1px solid;
    border-radius: 2px;
    padding: 10px;
    border-color: #42a5f5;
    padding: 5px;
    margin-top: 0;
    height: auto;
    background-color: #d0e8fb;
}

.button-gravar-baixa {
    margin-top: 22px !important;
}





@media (max-width: 1920px) {

    .itens-baixa {
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
        border-color: #42a5f5;
        padding: 5px;
        height: 65vh;
        overflow-x: auto;
        background-color: azure
    }
}


@media (max-width: 1540px) {

    .itens-baixa {
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
        border-color: #42a5f5;
        padding: 5px;
        height: 48vh;
        overflow-x: auto;
        background-color: azure
    }
}


@media (max-width: 400px) {
    .itens-baixa {
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
        border-color: #42a5f5;
        padding: 5px;
        height: 74vh;
        overflow-x: auto;
        background-color: azure
    }
}

@media (min-width: 768px) { /* 768px */




    .execultar-baixa-Titulo {
        display: grid;
        grid-template-columns: 1.2fr .3fr;
        grid-gap: .2rem;
    }



    .button-baixa {
        font-size: 12px;
        margin-top: 6px !important;
        height: 25px !important;
    }

    .execucao-baixa {
        display: grid;
        grid-template-columns: .8fr .6fr .8fr .5fr 1.1fr .5fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
        border-color: #42a5f5;
        padding: 5px;
        margin-top: 5px;
        height: auto;
        background-color: #d0e8fb;
    }

    .button-gravar-baixa {
        margin-top: 22px !important;
        25
    }

    .button-consulta-baixa {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: 25px;
    }

    .contener-button-consulta-baixa {
        margin-bottom: 0;
    }

    .execultar-baixa-outros {
        display: grid;
        grid-template-columns: 1.2fr .3fr;
        grid-gap: .2rem;
        margin-top: 0;
    }

    .filtro-acoes {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .contener-button-consulta-baixa {
        margin-bottom: 0;
    }
}

/*Cadastro de cheques*/

.titulo-conta-pagar-cad-cheque {
    font-size: 14px;
    background-color: #83bfef;
    text-align: center;
    padding: 5px;
    margin-bottom: 10px;
}

.titulo-relacao-cheques {
    font-size: 14px;
    padding: 5px;
    text-align: center;
    margin-bottom: 5px;
}

@media (min-width: 768px) {
    .register-conteudo-cheque-emitido {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
    }

    .cheque-emitido {
        display: grid;
        grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "a b c d e " "f f f f g";
        row-gap: .5rem;
        column-gap: .5rem;
    }

    .cheque-emitido-contener-relacao {
        background-color: azure;
        padding: 5px;
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
        border-color: #42a5f5;
        height: 39vh;
        overflow-x: auto;
    }

    .register-conteudo-cheque-terceiro {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        row-gap: .5rem;
        column-gap: .5rem;
    }

    .cheque-terceiro {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: "b b h h h h" "i j a e c d " "f f f f f g";
        row-gap: .5rem;
        column-gap: .5rem;
    }

    .cheque-emitido-contener-relacao {
        background-color: azure;
        padding: 5px;
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
        border-color: #42a5f5;
        height: 39vh;
        overflow-x: auto;
    }
}

.numero-cheque-cad-cheque {
    grid-area: a;
}

.conta-bancaria-cad-cheque {
    grid-area: b;
}

.data-emissao-cad-cheque {
    grid-area: c;
}

.data-compesacao-cad-cheque {
    grid-area: d;
}

.valor-cad-cheque {
    grid-area: e;
}

.observacao-cad-cheque {
    grid-area: f;
}

.status-cheque-cad-cheque {
    grid-area: g;
}

.banco-cad-cheque {
    grid-area: h;
}

.agencia-cad-cheque {
    grid-area: i;
}

.conta-cad-cheque {
    grid-area: j;
}
/*Adiantamento fornecedor*/
.register-conteudo-adiantamento-fornecedor {
    display: grid;
    grid-template-columns: 1fr .1fr;
    grid-template-rows: repeat(11,1fr);
    grid-template-areas: "a aa" "b b" "c c" "d d" "e e" "f f" "g g" "h h" "i i" "j j" "l l";
    row-gap: .5rem;
    column-gap: .5rem;
}


@media (min-width: 768px) {

    .register-conteudo-adiantamento-fornecedor {
        display: grid;
        grid-template-columns: 1fr .1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: "a aa  b b b  c c" "d1 d1 d e f g h" "i i j l l l l ";
        row-gap: .5rem;
        column-gap: .5rem;
    }
}

.inscricao-adiantamento-for {
    grid-area: a;
}

.button-procurar-adiantamento-fornecedor {
    grid-area: aa;
}

.nome-adiantamento-fornecedor {
    grid-area: b;
}

.nome-fantasia-adiantamento-fornecedor {
    grid-area: c;
}

.dt-emissao-adiantamento-for {
    grid-area: d1;
}


.dt-pagamento-adiantamento-for {
    grid-area: d;
}

.valor-adiantamento-for {
    grid-area: e;
}

.moeda-adiantamento-for {
    grid-area: f;
}

.cotacao-adiantamento-for {
    grid-area: g;
}

.conversao-adiantamento-fornecedor {
    grid-area: h;
}

.especie-adiantamento-for {
    grid-area: i;
}

.numero-documento-adiantamento-for {
    grid-area: j;
}

.descricao-adiantamento-for {
    grid-area: l;
}

/*Consulta Adiantamento Fornecedor*/


@media (max-width: 1540px) {



    .itens-consulta-adiantamento-for {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 12px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 0;
        border-color: #42a5f5;
        height: 58vh;
        /* overflow-x: auto;*/
        background-color: azure
    }

        .itens-consulta-adiantamento-for ul {
            overflow-y: scroll;
            height: 52vh;
        }

    .itens-registros-adiantamento-for ::-webkit-scrollbar {
        background-color: azure !important;
    }
}

@media (max-width: 1700px) {

    .itens-consulta-adiantamento-for {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 12px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 0;
        border-color: #42a5f5;
        height: 58vh;
        /* overflow-x: auto;*/
        background-color: azure
    }

        .itens-consulta-adiantamento-for ul {
            overflow-y: scroll;
            height: 52vh;
        }

    .itens-registros-adiantamento-for ::-webkit-scrollbar {
        background-color: azure !important;
    }
}

@media (max-width: 2000px) {

    .itens-consulta-adiantamento-for {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 12px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 0;
        border-color: #42a5f5;
        height: 62vh;
        /* overflow-x: auto;*/
        background-color: azure
    }

        .itens-consulta-adiantamento-for ul {
            overflow-y: scroll;
            height: 58vh;
        }

    .itens-registros-adiantamento-for ::-webkit-scrollbar {
        background-color: azure !important;
    }
}

/*Baixa Cheque terceiros*/





/*@media (max-width: 1920px) {



    .itens-baixa-cheque {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 5px;
        padding-left: 5px;
        padding-bottom: 5px;
        padding-right: 0;

        border-color: #42a5f5;
        padding: 5px;
        height: 59vh;
        background-color: azure
    }

   

    .itens-cheques-terceiro ul {
        overflow-y: scroll;
        height: 53vh;
    }

    .itens-cheques-terceiro ::-webkit-scrollbar {
        background-color: azure !important;
    }

}
*/
@media (max-width: 1770px) {



    .itens-baixa-cheque {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 12px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 0;
        border-color: #42a5f5;
        height: 20vh;
        /* overflow-x: auto;*/
        background-color: azure
    }

    .itens-cheques-terceiro ul {
        overflow-y: scroll;
        height: 10vh;
    }

    .itens-cheques-terceiro ::-webkit-scrollbar {
        background-color: azure !important;
    }
}

@media (max-width: 1540px) {



    .itens-baixa-cheque {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 12px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 0;
        border-color: #42a5f5;
        height: 38vh;
        /* overflow-x: auto;*/
        background-color: azure
    }

    .itens-cheques-terceiro ul {
        overflow-y: scroll;
        height: 29vh;
    }

    .itens-cheques-terceiro ::-webkit-scrollbar {
        background-color: azure !important;
    }
}




@media (max-width: 400px) {



    .itens-baixa-cheque {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 5px;
        padding-left: 5px;
        padding-bottom: 5px;
        padding-right: 0;
        border-color: #42a5f5;
        padding: 5px;
        height: 74vh;
        /*overflow-x: auto;*/
        background-color: azure
    }

    .itens-cheques-terceiro ul {
        overflow-y: scroll;
        height: 68vh;
    }

    .itens-cheques-terceiro ::-webkit-scrollbar {
        background-color: azure !important;
    }
}

@media (max-width:768px) {


    .itens-baixa-cheque {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 5px;
        padding-left: 5px;
        padding-bottom: 5px;
        padding-right: 0;
        border-color: #42a5f5;
        padding: 5px;
        height: 50vh;
        /* overflow-x: auto;*/
        background-color: azure
    }

    .itens-cheques-terceiro ul {
        overflow-y: scroll;
        height: 44vh;
    }

    .itens-cheques-terceiro ::-webkit-scrollbar {
        background-color: azure !important;
    }
}

.execucao-baixa-cheque-Terceiro {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "a" "b" "c" "d";
    row-gap: .5rem;
    column-gap: .5rem;
    border: 1px solid;
    border-radius: 2px;
    border-color: #42a5f5;
    padding: 5px;
    background-color: #d0e8fb;
}

@media (min-width: 768px) { /* 768px */

    .execucao-baixa-cheque-Terceiro {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: ". a b c d .";
        row-gap: .5rem;
        column-gap: .5rem;
        border: 1px solid;
        border-radius: 2px;
        border-color: #42a5f5;
        padding: 5px;
        background-color: #d0e8fb;
    }



    .button-consulta-baixa {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: 25px;
    }

    .button-gravar-baixa-cheque-terceiro {
        margin-top: 23px;
    }

    .button-desfazer-baixa-cheque-terceiro {
        margin-top: 23px;
    }
}

.data-utilizacao-baixa-cheque-tereceiro {
    grid-area: b;
}

.valor-total-baixa-cheque-terceiro {
    grid-area: a;
}

.button-gravar-baixa-cheque-terceiro {
    grid-area: c;
}

.button-desfazer-baixa-cheque-terceiro {
    grid-area: d;
}

.button-consulta-baixa {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 25px;
}

/*Demonstrativo de compensações*/

.item-container-demonstrativo-adiantamento-titulo {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr 1fr 1fr;
    border-left: 1px solid #42a5f5;
}

.item-container-demonstrativo-adiantamento {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr 1fr 1fr;
    border-left: 1px solid #42a5f5;
}

.item-container-demonstrativo-adiantamento-total {
    display: grid;
    grid-template-columns: 4fr 1fr 1fr 1fr 1fr;
    border-left: 1px solid #42a5f5;
}

.nome-fornecedor-demonstrativo {
    margin-bottom: 10px;
}

.itens-adiantamentos-for {
    overflow-y: auto;
    height: 20vh;
}

/*Exclusao Baixas Realizadas*/

.descricao-baixas {
    margin-bottom: 10px !important
}

.item-container-exclusao-baixas {
    display: grid;
    grid-template-columns: .5fr 1.5fr 4fr .5fr .5fr;
    border-left: 1px solid #42a5f5;
}

.itens-exclusao-baixas {
    overflow-y: auto;
    height: 57vh;
}

/*Cadastro de transferência bancária*/

.register-conteudo-transferencia-numerario {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas: "a" "b" "c" "d" "e";
    row-gap: .5rem;
    column-gap: .5rem;
}


@media (min-width: 768px) {

    .register-conteudo-transferencia-numerario {
        display: grid;
        grid-template-columns: .5fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "a  b  c " "d e e";
        row-gap: .5rem;
        column-gap: .5rem;
    }
}

.dt-transferencia-numerario {
    grid-area: a;
}



.conta-saida-transferencia-numerario {
    grid-area: b;
}

.conta-entrada-transferencia-numerario {
    grid-area: c;
}


.valor-transferencia-numerario {
    grid-area: d;
}

.descricao-transferencia-numerario {
    grid-area: e;
}

/*Consulta transferência de numerarios */


@media (max-width: 1540px) {



    .itens-consulta-transferencia-numerario {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 12px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 0;
        border-color: #42a5f5;
        height: 58vh;
        /* overflow-x: auto;*/
        background-color: azure
    }

        .itens-consulta-transferencia-numerario ul {
            overflow-y: scroll;
            height: 52vh;
        }

    .itens-registros-transferencia-numerario ::-webkit-scrollbar {
        background-color: azure !important;
    }
}

@media (max-width: 1700px) {

    .itens-consulta-transferencia-numerario {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 12px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 0;
        border-color: #42a5f5;
        height: 58vh;
        /* overflow-x: auto;*/
        background-color: azure
    }

        .itens-consulta-transferencia-numerario ul {
            overflow-y: scroll;
            height: 52vh;
        }

    .itens-registros-transferencia-numerario ::-webkit-scrollbar {
        background-color: azure !important;
    }
}

@media (max-width: 2000px) {

    .itens-consulta-transferencia-numerario {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 12px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 0;
        border-color: #42a5f5;
        height: 62vh;
        /* overflow-x: auto;*/
        background-color: azure
    }

        .itens-consulta-transferencia-numerario ul {
            overflow-y: scroll;
            height: 58vh;
        }

    .itens-registros-transferencia-numerario ::-webkit-scrollbar {
        background-color: azure !important;
    }
}

/*Extrato bancário*/

@media (max-width: 1770px) {



    .itens-extrato-bancario {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 12px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 0;
        border-color: #42a5f5;
        height: 20vh;
        /* overflow-x: auto;*/
        background-color: azure
    }

    .itens-lancamento-extrato-bancario ul {
        overflow-y: scroll;
        height: 10vh;
    }

    .itens-lancamento-extrato-bancario ::-webkit-scrollbar {
        background-color: azure !important;
    }
}

@media (max-width: 1540px) {



    .itens-extrato-bancario {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 12px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 0;
        border-color: #42a5f5;
        height: 58vh;
        */
        /* overflow-x: auto;*/
        background-color: azure
    }

    .itens-lancamento-extrato-bancario ul {
        overflow-y: scroll;
        height: 49vh;
    }

    .itens-lancamento-extrato-bancario ::-webkit-scrollbar {
        background-color: azure !important;
    }
}

/*@media (max-width: 400px) {



    .itens-extrato-bancario {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 5px;
        padding-left: 5px;
        padding-bottom: 5px;
        padding-right: 0;
        border-color: #42a5f5;
        padding: 5px;
        height: 74vh;*/
/*overflow-x: auto;*/
/*background-color: azure
    }

    .itens-lancamento-extrato-bancario ul {
        overflow-y: scroll;
        height: 68vh;
    }

    .itens-lancamento-extrato-bancario ::-webkit-scrollbar {
        background-color: azure !important;
    }
}*/

/*@media (max-width: 1300px) {


    .itens-extrato-bancario {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 5px;
        padding-left: 5px;
        padding-bottom: 5px;
        padding-right: 0;
        border-color: #42a5f5;
        padding: 5px;
        height: 40vh;*/
/* overflow-x: auto;*/
/*background-color: azure
    }

    .itens-lancamento-extrato-bancario ul {
        overflow-y: scroll;
        height: 54vh;
    }

    .itens-lancamento-extrato-bancario ::-webkit-scrollbar {
        background-color: azure !important;
    }
}*/




@media (min-width: 768px) { /* 768px */

    .register-conteudo-extrato-bancario {
        display: grid;
        grid-template-columns: 1.5fr 1.5fr;
        grid-template-rows: 9px 1fr;
        grid-template-areas: "labe-filtro  label-acao" "filtro-extrato  acoes-extrato";
        row-gap: .5rem;
        column-gap: .5rem;
    }

    register-conteudo-folha-pagamento {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 9px 1fr;
        grid-template-areas: "label-acao" "acoes-extrato";
        row-gap: .5rem;
        column-gap: .5rem;
    }


    .filtro-extrato-bancario {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr .5fr;
        grid-template-rows: 1fr;
        grid-template-areas: "bf cf df ef";
        row-gap: .5rem;
        column-gap: .5rem;
    }

    .filtro-extrato-bancario-despesas-diretas {
        display: grid;
        grid-template-columns: 3fr 2fr;
        grid-template-rows: 1fr;
        grid-template-areas: "bf ef";
        row-gap: .5rem;
        column-gap: .5rem;
    }


    .acoes-extrato-bancario {
        display: grid;
        grid-template-columns: 2fr .5fr;
        grid-template-rows: 1fr;
        grid-template-areas: "ba ca";
        row-gap: .5rem;
        column-gap: .5rem;
        border: 1px solid;
        border-radius: 2px;
        padding-top: 5px;
        padding-left: 5px;
        padding-bottom: 5px;
        padding-right: 5px;
        border-color: #42a5f5;
        padding: 5px;
        margin-bottom: 5px;
    }

    .gravar-extrato-bancario {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: ". . button-gravar-extrato  button-remover-extrato . .";
        row-gap: .5rem;
        column-gap: .5rem;
    }
}

.register-conteudo-extrato-bancario {
    border: 1px solid;
    border-radius: 2px;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-right: 0;
    border-color: #42a5f5;
    padding: 5px;
    margin-bottom: 5px;
}

.filtro-extrato-bancario {
    grid-area: filtro-extrato;
    border: 1px solid;
    border-radius: 2px;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-right: 0;
    border-color: #42a5f5;
    padding: 5px;
    margin-bottom: 5px;
}

.filtro-extrato-bancario-despesas-diretas {
    grid-area: filtro-extrato;
    border: 1px solid;
    border-radius: 2px;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-right: 0;
    border-color: #42a5f5;
    padding: 5px;
    margin-bottom: 5px;
}


.acoes-extrato-bancario {
    grid-area: acoes-extrato;
    border: 1px solid;
    border-radius: 2px;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-right: 0;
    border-color: #42a5f5;
    padding: 5px;
    margin-bottom: 5px;
}


.label-filtro-extrato-bancario {
    grid-area: labe-filtro;
    margin-bottom: 5px;
    font-size: 13px;
}

.conta-extrato {
    grid-area: bf;
    z-index: 99;
}

.dt-inicial-extrato {
    grid-area: cf;
}

.dt-final-extrato {
    grid-area: df;
}

.button-consulta-extrato-bancario {
    grid-area: ef;
    margin-top: 24px;
    height: 27px;
}




.label-acao-extrato-bancario {
    grid-area: label-acao;
    margin-bottom: 5px;
    font-size: 13px;
}


.acoes-extrato {
    grid-area: ba;
}

.button-acao-extrato-bancario {
    grid-area: ca;
    margin-top: 24px;
    height: 27px;
}

.button-gravar-extrato {
    grid-area: button-gravar-extrato;
}


.button-remover-extrato {
    grid-area: button-remover-extrato;
}

/*ExtratoBancarioAjuste*/


@media (min-width: 768px) { /* 768px */
    .gravar-extrato-bancario-ajuste {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: ".  button-gravar-extrato-ajuste  .";
        row-gap: .5rem;
        column-gap: .5rem;
    }
}

.button-gravar-extrato-ajuste {
    grid-area: button-gravar-extrato-ajuste;
}

/*Contener*/
.container50 {
    border: 1px solid;
    border-color: #42a5f5;
    padding-left: 10px;
    padding-top: 5px;
    margin-top: 10px;
    height: 75vh;
    background-color: azure;
}

.container30 {
    border: 1px solid;
    border-color: #42a5f5;
    padding-left: 10px;
    padding-top: 5px;
    margin-top: 10px;
    height: 50vh;
    background-color: azure;
}


@media (min-width: 768px) { /* 768px */
    .contener44 {
        height: 44vh;
        overflow-y: auto;
    }

    .contenerBoder {
        border: 1px solid;
        border-color: #42a5f5;
    }

    .container50 {
        border: 1px solid;
        border-color: #42a5f5;
        padding-left: 10px;
        padding-top: 5px;
        margin-top: 10px;
        height: 55vh;
        background-color: azure;
    }

    .container40 {
        border: 1px solid;
        border-color: #42a5f5;
        padding-left: 10px;
        padding-top: 5px;
        margin-top: 10px;
        height: 40vh;
        background-color: azure;
    }

    .container30 {
        border: 1px solid;
        border-color: #42a5f5;
        padding-left: 10px;
        padding-top: 5px;
        margin-top: 10px;
        height: 30vh;
        background-color: azure;
    }

    .container60 {
        border: 1px solid;
        border-color: #42a5f5;
        padding-left: 10px;
        padding-top: 5px;
        margin-top: 10px;
        height: 60vh;
        background-color: azure;
    }
}



.contener-azure {
    background-color: azure;
}

/*Cadastro protudo processo e Selecionar produto*/



.container-produto-processo {
    border: 1px solid;
    border-color: #42a5f5;
    padding-left: 10px;
    padding-top: 5px;
    margin-top: 10px;
    height: 46vh;
    background-color: azure;
}

container-produto-selecionado {
    border: 1px solid;
    border-color: #42a5f5;
    padding-left: 10px;
    padding-top: 5px;
    margin-top: 10px;
    height: 46vh;
    background-color: azure;
}

.produtos-conciliados ul {
    overflow-y: scroll;
    height: 44vh;
}

.produtos-selecionados ul {
    overflow-y: scroll;
    height: 44vh;
}

.produtos-conciliados ::-webkit-scrollbar {
    background-color: azure !important;
}


@media (min-width: 768px) { /* 768px */

    .container-produto-processo {
        border: 1px solid;
        border-color: #42a5f5;
        padding-left: 10px;
        padding-top: 5px;
        margin-top: 10px;
        height: 50vh;
        background-color: azure;
    }

    .container-produto-selecionado {
        border: 1px solid;
        border-color: #42a5f5;
        padding-left: 10px;
        padding-top: 5px;
        margin-top: 10px;
        height: 62vh;
        background-color: azure;
    }

    .cad-prod-servicos {
        display: grid;
        grid-template-columns: 4fr 1fr 1fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
    }

    .button-add-produto-processo {
        margin-top: 17px;
    }

    .button-duplicar-produto-processo {
        margin-top: 17px;
    }

    .buttons-gravar-proximo {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr;
        grid-template-areas: ". .  consulta-produto-processo   gravar cancelar remover  proximo";
        row-gap: .5rem;
        column-gap: .5rem;
    }

    .produtos-conciliados ul {
        overflow-y: scroll;
        height: 41vh;
    }

    .produtos-selecionados ul {
        overflow-y: scroll;
        height: 55vh;
    }
}


.consulta-produto-processo {
    grid-area: consulta-produto-processo;
    text-align: right;
}


.remover {
    grid-area: remover;
    text-align: right;
}

.gravar {
    grid-area: gravar;
    text-align: right;
}

.cancelar {
    grid-area: cancelar;
    text-align: right;
}


.proximo {
    grid-area: proximo;
    text-align: right;
}

/*Modal consulta*/

.modal-consulta-itens {
    overflow-y: auto;
}

    .modal-consulta-itens ul {
        overflow-y: scroll;
        height: 73vh;
    }

    .modal-consulta-itens ::-webkit-scrollbar {
        background-color: azure !important;
    }



@media (min-width: 768px) { /* 768px */

    .modal-consulta-itens {
        overflow-y: auto;
    }

        .modal-consulta-itens ul {
            overflow-y: scroll;
            height: 46vh;
        }

        .modal-consulta-itens ::-webkit-scrollbar {
            background-color: azure !important;
        }

    .modal-consulta-button {
        display: grid;
        grid-template-columns: .5fr 1fr .5fr;
        grid-template-rows: 1fr;
        grid-template-areas: ". button-consultar-modal-consulta .";
        row-gap: .5rem;
        column-gap: .5rem;
    }
}

.button-consultar-modal-consulta {
    margin-top: 10px;
    grid-area: button-consultar-modal-consulta
}

/*Consulta*/


.button-consultar-select-check-box {
    margin-top: 3px;
    margin-bottom: 3px;
}


.buttons-consulta {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a" "b";
    row-gap: .5rem;
    column-gap: .5rem;
}

.buttons-consulta-one {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "a";
    row-gap: .5rem;
    column-gap: .5rem;
}

.buttons-consulta-double {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a" "c";
    row-gap: .5rem;
    column-gap: .5rem;
}


.buttons-consulta-triplo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "a" "b" "c";
    row-gap: .5rem;
    column-gap: .5rem;
}

.buttons-consulta-penta {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "a" "b" "c" "d" "e";
    row-gap: .5rem;
    column-gap: .5rem;
}


.buttons-consulta-six {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; 
    grid-template-areas: "a" "b" "c" "d" "e" "f";
    row-gap: .5rem;
    column-gap: .5rem;
}

.buttons-consulta-six {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "a" "b" "c" "d" "e" "f";
    row-gap: .5rem;
    column-gap: .5rem;
}
.buttons-consulta-seven {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "a" "b" "c" "d" "e" "f" "g";
    row-gap: .5rem;
    column-gap: .5rem;
}

.buttons-consulta-seven {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "a" "b" "c" "d" "e" "f";
    row-gap: .5rem;
    column-gap: .5rem;
}


.container-consulta {
    border: 1px solid;
    border-color: #42a5f5;
    padding-left: 10px;
    padding-top: 5px;
    margin-top: 10px;
    height: 62vh;
    background-color: azure;
}

.container-consulta-itens ul {
    overflow-y: scroll;
    height: 59.3vh;
}

.container-consulta-itens ::-webkit-scrollbar {
    background-color: azure !important;
}



.bingo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    margin-bottom: 5px;
}

.bingo-consulta {
}

.bingo-excel {
}

.bingo-saldo {
}

.bingo-gravar {
}

.bingo-devolvido {
}




@media (min-width: 768px) { /* 768px */


    .bingo {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr 1fr 1fr 1fr 2fr;
        grid-template-rows: 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        margin-bottom: 5px;
    }

    .bingo-consulta {
        padding-top: 19px;
    }

    .bingo-excel {
        padding-top: 19px;
    }

    .bingo-saldo {
        padding-top: 19px;
    }

    .bingo-gravar {
        padding-top: 19px;
    }

    .bingo-devolvido {
        padding-top: 19px;
    }




    .buttons-consulta {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: 1fr;
        grid-template-areas: ". . a b . .";
        row-gap: .5rem;
        column-gap: .5rem;
        margin-bottom: 5px;
    }

    .buttons-consulta-one {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr;
        grid-template-areas: ". . a . .";
        row-gap: .5rem;
        column-gap: .5rem;
        margin-bottom: 5px;
    }

    .buttons-consulta-double {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr;
        grid-template-areas: ". . a c . .";
        row-gap: .5rem;
        column-gap: .5rem;
        margin-bottom: 5px;
    }



    .buttons-consulta-triplo {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: 1fr;
        grid-template-areas: ". . a b c . .";
        row-gap: .5rem;
        column-gap: .5rem;
        margin-bottom: 5px;
    }

    .buttons-consulta-penta {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: 1fr;
        grid-template-areas: ". a b c d e .";
        row-gap: .5rem;
        column-gap: .5rem;
        margin-bottom: 5px;
    }




    .buttons-consulta-six {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr;
        grid-template-areas: "a b c d e f";
        row-gap: .5rem;
        column-gap: .5rem;
        margin-bottom: 5px;
    }

    .buttons-consulta-seven {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: 1fr;
        grid-template-areas: "a b c d e f g";
        row-gap: .5rem;
        column-gap: .5rem;
        margin-bottom: 5px;
    }

    .buttons-consulta-contabilidade {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: 1fr;
        grid-template-areas: ". a b c c c c";
        row-gap: .5rem;
        column-gap: .5rem;
        margin-bottom: 5px;
    }

    .container-consulta {
        border: 1px solid;
        border-color: #42a5f5;
        padding-left: 10px;
        padding-top: 5px;
        margin-top: 10px;
        height: 64vh;
        background-color: azure;
    }

    .container-consulta-itens ul {
        overflow-y: scroll;
        height: 59vh;
    }

    .container-consulta-itens ::-webkit-scrollbar {
        background-color: azure !important;
    }
}



button.button-bingo-excel {
    background-color: #a5d5d4;
    border-color: #a5d5d4;
}

button.button-bingo-saldo {
    background-color: #64b5f6;
    border-color: #64b5f6;
}

button.button-bingo-devolvido {
    background-color: #efc44d;
    border-color: #efc44d;
}




.button-consulta-parametro-area {
    grid-area: a;
}

.button-consulta-imprimir-area {
    grid-area: b;
}

.button-consulta-cadastro-area {
    grid-area: c;
}

.button-consulta-cadastro-contabilidade {
    grid-area: c;
}

.button-consulta-parametro-area {
    grid-area: a;
}

.button-consulta-a {
    grid-area: a;
}

.button-consulta-b {
    grid-area: b;
}

.button-consulta-c {
    grid-area: c;
}

.button-consulta-d {
    grid-area: d;
}

.button-consulta-e {
    grid-area: e;
}

.button-consulta-f {
    grid-area: f;
}

.button-consulta-g {
    grid-area: g;
}

/*Cliente*/

@media (min-width: 768px) { /* 768px */

    .buttons-consulta {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr;
        grid-template-areas: ". . a b . .";
        row-gap: .5rem;
        column-gap: .5rem;
    }

    .container-consulta {
        border: 1px solid;
        border-color: #42a5f5;
        padding-left: 10px;
        padding-top: 5px;
        margin-top: 10px;
        height: 64vh;
        background-color: azure;
    }

    .container-consulta-itens ul {
        overflow-y: scroll;
        height: 59vh;
    }

    .container-consulta-itens ::-webkit-scrollbar {
        background-color: azure !important;
    }
}

.cidade-cliente {
    position: absolute;
    margin-top: 1px;
    width: auto;
    min-width: 250px;
    height: auto;
    min-height: 25px;
    border: 1px solid;
    background-color: white
}

.cliente {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(16, 1fr);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "inscricao-federal" "inscricao-estadual" "inscricao-municipal" "inscricao-suframa" "razao-social" "nome" "telefone" "telefone-celular" "email" "email-particular" "cep" "logradouro" "numero" "complemento" "bairro" "cidade";
    width: 100%;
}

@media (min-width: 768px) { /* 768px */

    .cliente {
        display: grid;
        grid-template-columns: .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr;
        grid-template-rows: repeat(5, 1fr);
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "inscricao-federal inscricao-federal inscricao-estadual inscricao-estadual inscricao-municipal inscricao-municipal inscricao-suframa inscricao-suframa"
            "razao-social razao-social razao-social  razao-social  razao-social nome nome nome"
            "telefone  telefone-celular   email  email  email  email-particular email-particular email-particular"
            "cep logradouro logradouro logradouro  logradouro numero   complemento complemento"
            "bairro bairro bairro bairro cidade cidade cidade cidade";
        width: 100%;
    }
}

/*Cliente tipo*/

.cliente-tipo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1.5fr 1fr;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-areas: "inscricao-federal"
        "cliente-tipo-nome"
        "cliente-tipo-revendedor"
        "cliente-tipo-consumidor";
    width: 100%;
}

.container-cliente-tipo-produto {
    border: 1px solid;
    border-color: #42a5f5;
    padding-left: 10px;
    padding-top: 5px;
    margin-top: 5px;
    height: 32vh;
    background-color: azure;
}

.container-cliente-tipo-produto-itens ul {
    overflow-y: scroll;
    height: 29vh;
}

@media (min-width: 768px) { /* 768px */


    .cliente-tipo {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-areas: "inscricao-federal cliente-tipo-nome cliente-tipo-nome  cliente-tipo-nome cliente-tipo-nome cliente-tipo-nome"
            "cliente-tipo-revendedor cliente-tipo-revendedor cliente-tipo-revendedor cliente-tipo-consumidor cliente-tipo-consumidor cliente-tipo-consumidor";
        /*"cliente-tipo-consumidor cliente-tipo-consumidor cliente-tipo-consumidor cliente-tipo-consumidor cliente-tipo-consumidor cliente-tipo-consumidor";*/
        /* "cliente-tipo-consumidor-label cliente-tipo-consumidor-label cliente-tipo-consumidor-label cliente-tipo-consumidor-label cliente-tipo-consumidor-label cliente-tipo-consumidor-label";*/
        /*"container-cliente-tipo-produto container-cliente-tipo-produto container-cliente-tipo-produto container-cliente-tipo-produto container-cliente-tipo-produto container-cliente-tipo-produto";*/
        width: 100%;
    }

    .container-cliente-tipo-produto {
        border: 1px solid;
        border-color: #42a5f5;
        padding-left: 10px;
        padding-top: 5px;
        margin-top: 5px;
        height: 32vh;
        background-color: azure;
    }

    .container-cliente-tipo-produto-itens ul {
        overflow-y: scroll;
        height: 26.5vh;
    }

    .container-cliente-tipo-produto-itens ::-webkit-scrollbar {
        background-color: azure !important;
    }
}

.cliente-tipo-nome {
    grid-area: cliente-tipo-nome;
}


.cliente-tipo-revendedor {
    grid-area: cliente-tipo-revendedor;
}

.cliente-tipo-consumidor {
    grid-area: cliente-tipo-consumidor;
}

.cliente-tipo-produtos-consumidor {
    grid-area: cliente-tipo-produtos-consumidor;
}

.cliente-tipo-consumidor-label {
    margin-top: 10px;
}


.button-cadastro {
    border-radius: 5px;
    border: 1px solid;
    width: 100%;
    background-color: #42a5f5;
    margin-top: 5px;
    margin-bottom: 5px;
}

.button-cadastro-add {
    border-radius: 5px;
    border: 1px solid;
    width: 100%;
    background-color: #26920c;
    margin-top: 5px;
    margin-bottom: 5px;
}



/*Cadastro de gastos
*/
@media (min-width: 768px) {

    .register-conteudo-cadastro-gastos {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas: "descricao button-cadastro-produto-localizar  button-cadastro-produto  definicao definicao definicao"
            "inscricao periodicidade tipo  setor provisiona vencimento"
            "valor rateio irrf  pcc  inss iss"
            "contabil contabil-rateio contabil-irrf contabil-pcc contabil-inss contabil-iss ";
    }

    .button-cadastro {
        border-radius: 5px;
        border: 1px solid;
        width: 100%;
        background-color: #42a5f5;
        margin-top: 22px;
    }
    .button-cadastro-add {
        border-radius: 5px;
        border: 1px solid;
        width: 100%;
        background-color: #26920c;
        margin-top: 22px;
    }


    .itens-consulta-cadastro-gasto ul {
        overflow-y: scroll;
        height: 65vh;
    }

    .itens-registros-itens-registros-cadastro-gasto ::-webkit-scrollbar {
        background-color: azure !important;
    }


    .item-container-cadastro-gastos-titulo {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr.8fr .8rem;
        border-left: 1px solid #42a5f5;
    }

    .item-container-cadastro-gastos {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr.8fr;
        border-left: 1px solid #42a5f5;
    }
}

@media(min-width : 1800px) {

    .itens-consulta-cadastro-gasto ul {
        overflow-y: scroll;
        height: 72vh;
    }
}

.button-procurar-cadastro-gasto {
    grid-area: button-procurar;
    background-color: #42a5f5;
    margin-top: 22px;
    padding-right: 50px;
    width: 100%;
    height: 32px;
}

.juncao-input-button {
    display: grid;
    grid-template-columns: 1fr .5fr;
    grid-template-rows: 19px 27px;
    grid-template-areas: "a a" "b c";
}
.juncao-input-button-duplo {
    display: grid;
    grid-template-columns: .7fr .2fr .2fr;
    grid-template-rows: 19px 27px;
    grid-template-areas: "a a a" "b c d";
}



.button-juncao-input {
    grid-area: c;
    background-color: #42a5f5;
    height: 27px;
    border: #42a5f5;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.button-juncao-input-1 {
    grid-area: c;
    background-color: #42a5f5;
    height: 27px;
    border: #42a5f5;
    border-left: none;
    border-right: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.button-juncao-input-2 {
    grid-area: d;
    background-color: #26920c;
    height: 27px;
    border: #0f5b98;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}



.input-juncao-botton {
    grid-area: b;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.label-juncao-botton {
    grid-area: a;
}

.descricao-cadastro-gasto {
    grid-area: descricao;
}

.periodicidade-cadastro-gasto {
    grid-area: periodicidade;
}

.tipo-gasto-cadastro-gasto {
    grid-area: tipo;
}

.setor-cadastro-gasto {
    grid-area: setor;
}

.definicao-cadastro-gasto {
    grid-area: definicao;
}

.provisiona-cadastro-gasto {
    grid-area: provisiona;
}

.vencimento-cadastro-gasto {
    grid-area: vencimento;
}

.valor-cadastro-gasto {
    grid-area: valor;
}

.inscricao-cadastro-gasto {
    grid-area: inscricao;
}

.rateio-cadastro-gasto {
    grid-area: rateio;
}

.codigo-servico {
    grid-area: servico;
}

.irrf-cadastro-gasto {
    grid-area: irrf;
}

.pcc-cadastro-gasto {
    grid-area: pcc;
}

.inss-cadastro-gasto {
    grid-area: inss;
}

.iss-cadastro-gasto {
    grid-area: iss;
}

.contabil-cadastro-gasto {
    grid-area: contabil;
}

.contabil-rateio-cadastro-gasto {
    grid-area: contabil-rateio;
}

.contabil-inss-cadastro-gasto {
    grid-area: contabil-inss;
}

.contabil-iss-cadastro-gasto {
    grid-area: contabil-iss;
}

.contabil-irrf-cadastro-gasto {
    grid-area: contabil-irrf;
}

.contabil-pcc-cadastro-gasto {
    grid-area: contabil-pcc;
}

.contabil-cadastro-pis {
    grid-area: contabil-pis;
}

.contabil-cadastro-cofins {
    grid-area: contabil-cofins;
}


.button-cadastro-produto {
    grid-area: button-cadastro-produto;
}

.button-cadastro-produto-localizar {
    grid-area: button-cadastro-produto-localizar;
}



/*Parametro Servicos tomados
*/

.register-conteudo-parametro-servicos-tomados {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto 15px auto 15px auto 15px auto;
    grid-template-areas: "descricao" "label-gerencial" "gerencial" "label-fiscal" "fiscal" "label-contabil" "contabil";
}

.servicos-tomados-descricao-grid {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "definicao";
}

.servicos-tomados-gerencial-grid {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "periodicidade" "tipo" "setor" "provisiona" "rateio";
    border: 1px solid;
    border-color: #7e8dd7;
    border-radius: 5px;
    padding: 10px;
}

.servicos-tomados-fiscal-grid {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "servico" "l" "m" "irrf" "pcc" "inss" "iss";
    border: 1px solid;
    border-color: #7e8dd7;
    border-radius: 5px;
    padding: 10px;
}

.servicos-tomados-contabil-grid {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "contabil" "contabil-pis" "contabil-cofins" "contabil-irrf" "contabil-pcc" "contabil-inss" "contabil-iss" "contabil-rateio";
    border: 1px solid;
    border-color: #7e8dd7;
    border-radius: 5px;
    padding: 10px;
}











@media (min-width: 768px) {

    .register-conteudo-parametro-servicos-tomados {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr;
        grid-template-rows: auto 15px auto 15px auto 15px auto;
        grid-template-areas: "descricao" "label-gerencial" "gerencial" "label-fiscal" "fiscal" "label-contabil" "contabil";
    }

    .servicos-tomados-descricao-grid {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "definicao";
    }

    .servicos-tomados-gerencial-grid {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "periodicidade tipo setor provisiona rateio";
        border: 1px solid;
        border-color: #7e8dd7;
        border-radius: 5px;
        padding: 10px;
    }

    .servicos-tomados-fiscal-grid {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "servico l m irrf pcc  inss iss";
        border: 1px solid;
        border-color: #7e8dd7;
        border-radius: 5px;
        padding: 10px;
    }

    .servicos-tomados-contabil-grid {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "contabil contabil-pis contabil-cofins contabil-irrf" "contabil-pcc contabil-inss contabil-iss contabil-rateio";
        border: 1px solid;
        border-color: #7e8dd7;
        border-radius: 5px;
        padding: 10px;
    }


    .button-cadastro {
        border-radius: 5px;
        border: 1px solid;
        width: 100%;
        background-color: #42a5f5;
        margin-top: 22px;
    }

    .button-cadastro-add {
        border-radius: 5px;
        border: 1px solid;
        width: 100%;
        background-color: #26920c;
        margin-top: 22px;
    }

    .itens-consulta-cadastro-gasto ul {
        overflow-y: scroll;
        height: 65vh;
    }

    .itens-registros-itens-registros-cadastro-gasto ::-webkit-scrollbar {
        background-color: azure !important;
    }


    .item-container-cadastro-gastos-titulo {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr.8fr .8rem;
        border-left: 1px solid #42a5f5;
    }

    .item-container-cadastro-gastos {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr.8fr;
        border-left: 1px solid #42a5f5;
    }
}


.label-gerencial {
    grid-area: label-gerencial;
    font-size: 13px;
}

.label-fiscal {
    grid-area: label-fiscal;
    font-size: 13px;
}

.label-contabil {
    grid-area: label-contabil;
    font-size: 13px;
}


.servicos-tomados-descricao {
    grid-area: descricao;
}

.servicos-tomados-gerencial {
    grid-area: gerencial;
}

.servicos-tomados-fiscal {
    grid-area: fiscal;
}

.servicos-tomados-contabil {
    grid-area: contabil;
}


/*Parametro tributos
*/

.register-conteudo-parametro-tributo {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto 15px auto 15px auto 15px auto;
    grid-template-areas: "descricao" "label-gerencial" "gerencial" "label-fiscal" "fiscal" "label-contabil" "contabil";
}

.parametro-tributo-descricao-grid {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "definicao";
}

.parametro-tributo-gerencial-grid {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "periodicidade" "tipo" "setor" "provisiona";
    border: 1px solid;
    border-color: #7e8dd7;
    border-radius: 5px;
    padding: 10px;
}



.parametro-tributo-contabil-grid {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "contabil" "contabil-pis" "contabil-cofins" "contabil-irrf" "contabil-pcc" "contabil-inss" "contabil-iss" "contabil-rateio" "contabil-parametro-tributo-despesas";
    border: 1px solid;
    border-color: #7e8dd7;
    border-radius: 5px;
    padding: 10px;
}



.botao-dublo {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}







@media (min-width: 768px) {
    .register-conteudo-parametro-tributo {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr;
        grid-template-rows: auto 15px auto 15px auto 15px auto;
        grid-template-areas: "descricao" "label-gerencial" "gerencial" "label-fiscal" "fiscal" "label-contabil" "contabil";
    }

    .parametro-tributo-descricao-grid {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "definicao";
    }

    .parametro-tributo-gerencial-grid {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "periodicidade tipo setor provisiona";
        border: 1px solid;
        border-color: #7e8dd7;
        border-radius: 5px;
        padding: 10px;
    }



    .parametro-tributo-contabil-grid {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: "contabil contabil-pis contabil-cofins" "contabil-irrf contabil-pcc contabil-inss" "contabil-iss contabil-rateio contabil-parametro-tributo-despesas";
        border: 1px solid;
        border-color: #7e8dd7;
        border-radius: 5px;
        padding: 10px;
    }


    .button-cadastro {
        border-radius: 5px;
        border: 1px solid;
        width: 100%;
        background-color: #42a5f5;
        margin-top: 22px;
    }

    .button-cadastro-add {
        border-radius: 5px;
        border: 1px solid;
        width: 100%;
        background-color: #26920c;
        margin-top: 22px;
    }

    .itens-consulta-cadastro-gasto ul {
        overflow-y: scroll;
        height: 65vh;
    }

    .itens-registros-itens-registros-cadastro-gasto ::-webkit-scrollbar {
        background-color: azure !important;
    }


    .item-container-cadastro-gastos-titulo {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr.8fr .8rem;
        border-left: 1px solid #42a5f5;
    }

    .item-container-cadastro-gastos {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr.8fr;
        border-left: 1px solid #42a5f5;
    }

    .botao-dublo {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr;
    }
}


.contabil-parametro-tributo-despesas {
    grid-area: contabil-parametro-tributo-despesas
}


.label-gerencial {
    grid-area: label-gerencial;
    font-size: 13px;
}

.label-fiscal {
    grid-area: label-fiscal;
    font-size: 13px;
}

.label-contabil {
    grid-area: label-contabil;
    font-size: 13px;
}


.servicos-tomados-descricao {
    grid-area: descricao;
}

.servicos-tomados-gerencial {
    grid-area: gerencial;
}

.servicos-tomados-fiscal {
    grid-area: fiscal;
}

.servicos-tomados-contabil {
    grid-area: contabil;
}





/*Conciliacao Bancaria Razao*/
@media (min-width: 768px) {
    .itens-consulta-conciliacao-razao {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 12px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 0;
        border-color: #42a5f5;
        height: 67.2vh;
        /* overflow-x: auto;*/
        background-color: azure
    }

        .itens-consulta-conciliacao-razao ul {
            overflow-y: scroll;
            background-color: white;
            height: 59.2vh;
        }

    .itens-registros-conciliacao-razao ::-webkit-scrollbar {
        background-color: azure !important;
    }


    .item-container-conciliacao-razao-titulo {
        display: grid;
        grid-template-columns: .8fr 3fr .8fr .8fr .8fr 1fr 1fr 1fr 2fr .3fr .8rem;
        border-left: 1px solid #42a5f5;
    }

    .item-container-conciliacao-razao {
        display: grid;
        grid-template-columns: .8fr 3fr .8fr .8fr .8fr 1fr 1fr 1fr 2fr .3fr;
        border-left: 1px solid #42a5f5;
    }

    .modal-base-baixas-realizadas {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        top: 135px;
        padding: 10px;
        border: 1px solid #888;
        width: 65%;
        height: 65%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s;
        overflow: auto;
    }

    .itens-consulta-conciliacao-razao-baixas {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 12px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 0;
        border-color: #42a5f5;
        height: 50.2vh;
        /* overflow-x: auto;*/
        background-color: azure
    }

        .itens-consulta-conciliacao-razao-baixas ul {
            overflow-y: scroll;
            background-color: white;
            height: 41.2vh;
        }

    .itens-registros-conciliacao-razao-baixas ::-webkit-scrollbar {
        background-color: azure !important;
    }



    .item-container-conciliacao-razao-baixas-titulo {
        display: grid;
        grid-template-columns: 4fr 1fr 1fr .8rem;
        border-left: 1px solid #42a5f5;
    }

    .item-container-conciliacao-razao-baixas {
        display: grid;
        grid-template-columns: 4fr 1fr 1fr;
        border-left: 1px solid #42a5f5;
    }
}

@media(min-width : 1800px) {

    .itens-consulta-conciliacao-razao ul {
        overflow-y: scroll;
        height: 60.2vh;
    }

    .itens-consulta-conciliacao-razao-baixas {
        border: 1px solid;
        border-radius: 2px;
        padding-top: 12px;
        padding-left: 12px;
        padding-bottom: 12px;
        padding-right: 0;
        border-color: #42a5f5;
        height: 53.2vh;
        /* overflow-x: auto;*/
        background-color: azure
    }


        .itens-consulta-conciliacao-razao-baixas ul {
            overflow-y: scroll;
            height: 47.2vh;
        }
}

table {
    caption-side: bottom;
    border-collapse: collapse
}

caption {
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: #6c757d;
    text-align: left
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent
}

tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0
}








.tableFixHead {
    overflow-y: auto;
    height: 72vh;
}

    .tableFixHead thead th {
        position: sticky;
        top: 0;
        background-color: rgb(200, 227, 252);
    }

@media(min-width : 767px) {

    .tableFixHead-70vh {
        overflow-y: auto;
        height: 70vh;
    }

        .tableFixHead-70vh thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }



    .tableFixHead-60vh {
        overflow-x: auto !important;
        height: 60vh;
        border: 1px solid #ddd;
        width: 100%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

        .tableFixHead-60vh table {
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
            margin-bottom: 0;
        }



        .tableFixHead-60vh thead th {
            position: sticky !important;
            top: 0 !important;
            z-index: 100; /* Z-index alto para garantir */
            /* Cor de fundo sólida é OBRIGATÓRIA para não ficar transparente */
            background-color: rgb(200, 227, 252) !important;
            /* Cor do texto para contraste */
            color: #333;
            box-shadow: inset 0 1px 0 #dee2e6, inset 0 -1px 0 #dee2e6;
        }

       



    .tableFixHead-55vh {
        overflow-y: auto;
        height: 55vh;
    }

        .tableFixHead-55vh thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }

    tableFixHead-30vh {
        overflow-x: auto !important;
        height: 45vh;
        border: 1px solid #ddd;
        width: 100%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .tableFixHead-30vh table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        margin-bottom: 0;
    }



    .tableFixHead-30vh thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 100; /* Z-index alto para garantir */
        /* Cor de fundo sólida é OBRIGATÓRIA para não ficar transparente */
        background-color: rgb(200, 227, 252) !important;
        /* Cor do texto para contraste */
        color: #333;
        box-shadow: inset 0 1px 0 #dee2e6, inset 0 -1px 0 #dee2e6;
    }





}

@media(min-width : 1500px) {


    .tableFixHead-70vh {
        overflow-y: auto;
        height: 70vh;
    }

        .tableFixHead-70vh thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }





    .tableFixHead-60vh {
        overflow-y: auto;
        height: 60vh;
    }

        .tableFixHead-60vh thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }

    .tableFixHead-55vh {
        overflow-y: auto;
        height: 53vh;
    }

        .tableFixHead-55vh thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }
}

@media(min-width : 1900px) {


    .tableFixHead-70vh {
        overflow-y: auto;
        height: 77vh;
    }

        .tableFixHead-70vh thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }





    .tableFixHead-60vh {
        overflow-y: auto;
        height: 67vh;
    }

        .tableFixHead-60vh thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }

    .tableFixHead-55vh {
        overflow-y: auto;
        height: 62vh;
    }

        .tableFixHead-55vh thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }
}






.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #212529;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: #212529;
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: #212529;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    vertical-align: top;
    border-color: #dee2e6
}

    .table > :not(caption) > * > * {
        padding: .5rem .5rem;
        background-color: var(--bs-table-bg);
        border-bottom-width: 1px;
        box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)
    }

    .table > tbody {
        vertical-align: inherit
    }

    .table > thead {
        vertical-align: bottom
    }

    .table > :not(:last-child) > :last-child > * {
        border-bottom-color: currentColor
    }

.caption-top {
    caption-side: top
}

.table-sm > :not(caption) > * > * {
    padding: .25rem .25rem
}

.table-bordered > :not(caption) > * {
    border-width: 1px 0
}

    .table-bordered > :not(caption) > * > * {
        border-width: 0 1px
    }

.table-borderless > :not(caption) > * > * {
    border-bottom-width: 0
}

.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color)
}

.table-active {
    --bs-table-accent-bg: var(--bs-table-active-bg);
    color: var(--bs-table-active-color)
}

.table-hover > tbody > tr:hover {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color)
}

.table-primary {
    --bs-table-bg: #cfe2ff;
    --bs-table-striped-bg: #c5d7f2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bacbe6;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #bfd1ec;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #bacbe6
}

.table-secondary {
    --bs-table-bg: #e2e3e5;
    --bs-table-striped-bg: #d7d8da;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #cbccce;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #d1d2d4;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #cbccce
}

.table-success {
    --bs-table-bg: #d1e7dd;
    --bs-table-striped-bg: #c7dbd2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bcd0c7;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #c1d6cc;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #bcd0c7
}

.table-info {
    --bs-table-bg: #cff4fc;
    --bs-table-striped-bg: #c5e8ef;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #badce3;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #bfe2e9;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #badce3
}

.table-warning {
    --bs-table-bg: #fff3cd;
    --bs-table-striped-bg: #f2e7c3;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #e6dbb9;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #ece1be;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #e6dbb9
}

.table-danger {
    --bs-table-bg: #f8d7da;
    --bs-table-striped-bg: #eccccf;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #dfc2c4;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e5c7ca;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #dfc2c4
}

.table-light {
    --bs-table-bg: #f8f9fa;
    --bs-table-striped-bg: #ecedee;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #dfe0e1;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e5e6e7;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #dfe0e1
}

.table-dark {
    --bs-table-bg: #212529;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: #fff;
    border-color: #373b3e
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

@media (max-width:575.98px) {
    .table-responsive-sm {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width:767.98px) {
    .table-responsive-md {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width:991.98px) {
    .table-responsive-lg {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width:1199.98px) {
    .table-responsive-xl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width:1399.98px) {
    .table-responsive-xxl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

/*Despesas diretas detalhes*/


.register-conteudo-despesas-diretas-detalhe {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "cbx-servicos";
    row-gap: .5rem;
    column-gap: .5rem;
    border: 1px solid;
    border-radius: 2px;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-right: 0;
    border-color: #42a5f5;
    padding: 5px;
    margin-bottom: 5px;
}

/*Baixa automatica*/

.register-conteudo-baixa-automatica {
    row-gap: .5rem;
    column-gap: .5rem;
    border: 1px solid;
    border-radius: 2px;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-right: 0;
    border-color: #42a5f5;
    padding: 5px;
    margin-bottom: 5px;
}

.button-baixa-automatica-gravar {
    text-align: right;
}


/*Importacao arquivo de contas a receber*/




.acoes-importacao-arquivos {
    border: 1px solid;
    border-radius: 2px;
    border-color: #42a5f5;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "ba" "ca" "da";
    row-gap: .5rem;
    column-gap: .5rem;
}


@media (min-width: 768px) { /* 768px */


    .register-conteudo-importacao-arquivos {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        border: 1px solid;
        border-radius: 2px;
        padding-top: 5px;
        padding-left: 5px;
        padding-bottom: 5px;
        padding-right: 0;
        border-color: #42a5f5;
        padding: 5px;
        margin-bottom: 5px;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 9px 1fr;
        grid-template-areas: "labe-filtro  label-acao" "c  d";
    }


    .filtro-extrato-bancario-importacao-arquivos {
        border: 1px solid;
        border-radius: 2px;
        border-color: #42a5f5;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "bf";
        row-gap: .5rem;
        column-gap: .5rem;
        padding: 5px;
    }

    .acoes-importacao-arquivos {
        border: 1px solid;
        border-radius: 2px;
        border-color: #42a5f5;
        display: grid;
        grid-template-columns: 2.5fr .5fr;
        grid-template-rows: 1fr;
        grid-template-areas: "ba ca";
        padding: 5px;
        row-gap: .5rem;
        column-gap: .5rem;
    }
}




.label-filtro-importacao-arquivo {
    grid-area: a;
}

.label-acoes-importacao-arquivo {
    grid-area: b;
}

.filtro-extrato-bancario-importacao-arquivos {
    grid-area: c;
}

.acoes-importacao-arquivos {
    grid-area: d;
}

/*Ajuste de crédito*/

.register-conteudo-ajuste-financeiro {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    border: 1px solid;
    border-radius: 2px;
    border-color: #42a5f5;
    padding: 5px;
    margin-bottom: 5px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "a" "b" "c" "d";
}

.button-ajuste-financeiro {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    padding: 5px;
    margin-bottom: 5px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.data-pagamento-ajuste-financeiro {
    grid-area: a;
}


.credito-ajuste-financeiro {
    grid-area: b;
}

.debito-ajuste-financeiro {
    grid-area: c;
}

.descricao-ajuste-financeiro {
    grid-area: d;
}

.button.button-gravar-ajuste {
    background-color: #00c853;
    border-color: #00c853;
    margin: 5px;
}

.button.button-remover-ajuste {
    background-color: #ef9a9a;
    border-color: #ef9a9a;
    margin: 5px 10px 5px 5px;
}


/*Recibo gastos*/

.register-conteudo-recibo-gastos {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j";
}

@media (min-width: 768px) { /* 768px */
    .register-conteudo-recibo-gastos {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: "a . . ." "b c c c" "d d d d" "e f f f" "g h i j";
    }
}


.recibo-pagamento {
    grid-area: a;
}

.recibo-codigo-despesa {
    grid-area: b;
}

.recibo-descricao-gasto {
    grid-area: c;
}

.recibo-complemento {
    grid-area: d;
}

.recibo-fornecedor {
    grid-area: e;
}

.recibo-fornecedor-descricao {
    grid-area: f;
}

.recibo-valor {
    grid-area: g;
}

.recibo-base-retido {
    grid-area: h;
}

.recibo-irrf {
    grid-area: i;
}

.recibo-inss {
    grid-area: j;
}


/*Colaborador*/

.register-conteudo-colaborador {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h" "i";
}

@media (min-width: 768px) { /* 768px */
    .register-conteudo-colaborador {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "a a b b c d d e" "f f f g g g h i";
    }
}


.cpf-colaborador {
    grid-area: a;
}

.rg-colaborador {
    grid-area: b;
}

.rg-estado-colaborador {
    grid-area: c;
}

.pis-colaborador {
    grid-area: d;
}

.data-nascimento-colaborador {
    grid-area: e;
}

.nome-colaborador {
    grid-area: f;
}



.email-colaborador {
    grid-area: g;
}

.telefone-celular-colaborador {
    grid-area: h;
}

.telefone-fixo-colaborador {
    grid-area: i;
}

/*Registro colaborador Colaborador*/

.register-conteudo-colaborador-registro {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "a" "f" "g" "h" "i" "j" "l" "m";
}

@media (min-width: 768px) { /* 768px */
    .register-conteudo-colaborador-registro {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "a  f f f f f" "g h i j l m";
    }
}

.matricula-colaborador {
    grid-area: g;
}

.data-admissao-colaborador {
    grid-area: h;
}

.data-demissao-colaborador {
    grid-area: i;
}

.funcao-colaborador {
    grid-area: j;
}

.alocamento-colaborador {
    grid-area: l;
}

.status-colaborador {
    grid-area: m;
}

/*folha liquida a pagar*/
@media (min-width: 768px) { /* 768px */

    .filtro-extrato-folha-liquida {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "ef";
        row-gap: .5rem;
        column-gap: .5rem;
        border-color: #42a5f5;
        border: 1px solid;
        border-radius: 2px;
    }
}


/*Folha extra oficial*/

.register-conteudo-folha-extra-oficial {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 15px auto 15px auto 15px auto;
    grid-template-areas: "label-base" "base" "label-provisao" "provisao" "label-alocamento" "alocamento";
}


.folha-extra-oficial-base {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "a" "f" "valor" "data-inicial" "data-final";
    color: #7e8dd7;
    border: 1px solid;
    border-radius: 2px;
    padding: 5px;
}

.folha-extra-oficial-provisao {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    color: #7e8dd7;
    border: 1px solid;
    border-radius: 2px;
    padding: 5px;
}

.folha-extra-oficial-alocamento {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "a" "b" "c" "d" "e" "f" "g";
    color: #7e8dd7;
    border: 1px solid;
    border-radius: 2px;
    padding: 10px;
}








@media (min-width: 768px) { /* 768px */
    .register-conteudo-folha-extra-oficial {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr;
        grid-template-rows: 15px auto 15px auto 15px auto;
        grid-template-areas: "label-base" "base" "label-provisao" "provisao" "label-alocamento" "alocamento";
    }

    .folha-extra-oficial-base {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: .5fr .5fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "a f f f" "valor valor data-inicial data-final";
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
    }

    .folha-extra-oficial-provisao {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
    }

    .folha-extra-oficial-alocamento {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "a b c d" "e f g .";
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 10px;
    }
}

.folha-extra-oficial-base {
    grid-area: base;
}

.folha-extra-oficial-provisao {
    grid-area: provisao;
}

.folha-extra-oficial-alocamento {
    grid-area: alocamento;
}

.folha-extra-oficial-label-base {
    grid-area: label-base;
}

.folha-extra-oficial-label-provisao {
    grid-area: label-provisao;
}

.folha-extra-oficial-label-alocamento {
    grid-area: label-alocamento;
}


.valor-folha-extra {
    grid-area: valor
}

.data-inicial-folha-extra {
    grid-area: data-inicial;
}

.data-final-folha-extra {
    grid-area: data-final;
}

.alocamento-colaborador-folha-extra {
    grid-area: a;
}

.alocamento-salario13-colaborador {
    grid-area: b;
}

.alocamento-ferias-colaborador {
    grid-area: c;
}

.alocamento-fgts-colaborador {
    grid-area: d;
}

.alocamento-fgts13-colaborador {
    grid-area: e;
}

.alocamento-fgts-ferias-colaborador {
    grid-area: f;
}

.alocamento-fgts-multa-colaborador {
    grid-area: g;
}


/*Compensação contas a pagar*/

@media (min-width: 768px) { /* 768px */

    .register-conteudo-compensacao-contas {
        display: grid;
        column-gap: .5rem;
        row-gap: .5rem;
        grid-template-columns: 1fr;
        grid-template-rows: 15px auto 15px auto;
        grid-template-areas: "a" "b" "c" "d";
    }

    .compensacao-contas-pagar {
        display: grid;
        column-gap: .5rem;
        row-gap: .5rem;
        grid-template-columns: 6fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
    }


    .compensacao-contas-receber {
        display: grid;
        column-gap: .5rem;
        row-gap: .5rem;
        grid-template-columns: 1fr;
        grid-template-rows: 15px auto;
        height: 57vh;
    }

    .compensacao-conta-button-gravar {
        margin-top: 17px;
    }

    .compensacao-conta-button-consultar {
        margin-top: 17px;
    }
}

@media (min-width: 1900px) { /* 1900px */


    .compensacao-contas-receber {
        display: grid;
        column-gap: .5rem;
        row-gap: .5rem;
        grid-template-columns: 1fr;
        grid-template-rows: 15px auto;
        height: 66vh;
    }
}

.compensacao-contas-pagar-label {
    grid-area: a;
}

.compensacao-contas-pagar {
    grid-area: b;
    color: #7e8dd7;
    border: 1px solid;
    border-radius: 2px;
    padding: 10px;
}

.compensacao-contas-receber-label {
    grid-area: c;
}

.compensacao-contas-receber {
    grid-area: d;
    color: #7e8dd7;
    border: 1px solid;
    border-radius: 2px;
    padding: 10px;
}

/*Pedido de venda*/

.register-conteudo-pedido-venda {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 20px auto auto auto;
    grid-template-areas: "label-base" "base" "abas" "dados";
}


.pedido-venda-abas {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    color: #7e8dd7;
    border: 1px solid;
    border-radius: 2px;
    padding: 5px;
}

.pedido-venda-dados {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    color: #7e8dd7;
    border: 1px solid;
    border-radius: 2px;
    padding: 10px;
    width: 100vw;
    overflow-y: auto;
}


@media(max-width: 768px) {
    .tableFixHead-pedido {
        overflow-y: auto;
        height: 33vh;
        width: 95%;
    }

        .tableFixHead-pedido thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }

        .tableFixHead-pedido b {
            font-size: 9px;
        }
}


@media (min-width: 768px) { /* 768px */
    .register-conteudo-pedido-venda {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr;
        grid-template-rows: 15px auto auto 250px;
        grid-template-areas: "label-base" "base" "abas" "dados";
    }

    .pedido-venda-base {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "a b c c c c c d d d d" "ee ee ee ee eee eee h e eh i j";
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
    }
    .pedido-servico-base {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "a b c c c c c d d d d" "ee ee ee ee ee ee dp h e i j";
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
    }

    .pedido-venda-abas {
        display: grid;
        row-gap: .1rem;
        column-gap: .1rem;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
    }




    .tableFixHead-pedido {
        overflow-y: auto;
        height: 33vh;
    }

        .tableFixHead-pedido thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }


    .tr-fonte-zise {
        font-size: 13px;
    }
}



@media (min-width: 1600px) { /* 768px */
    .register-conteudo-pedido-venda {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr;
        grid-template-rows: 15px auto auto 400px;
        grid-template-areas: "label-base" "base" "abas" "dados";
    }

    .tableFixHead-pedido {
        overflow-y: auto;
        height: 40vh;
    }

        .tableFixHead-pedido thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }
}






.pedido-venda-abas {
    grid-area: abas;
}

.pedido-venda-dados {
    grid-area: dados;
}

.pedido-venda-label-base {
    grid-area: label-base;
    height:20px;


}


.codigo-cliente-pedido {
    grid-area: a;
}

.inscricao-federal-pedido {
    grid-area: b;
}

.nome-pedido {
    grid-area: c;
}

.nome-fantasia-pedido {
    grid-area: d;
}

.operacao-saida {
    grid-area: ee;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.presenca {
    grid-area: eee;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.data-entrega-pedido {
    grid-area: e;
}

.hora-entrega-pedido {
    grid-area: eh;
}

.data-gravacao-pedido {
    grid-area: f;
}

.data-alteracao-pedido {
    grid-area: g;
}

.data-faturamento-pedido {
    grid-area: h;
}

.data-pedido {
    grid-area: dp;
}


.valor-total-pedido {
    grid-area: i;
}

.status-pedido {
    grid-area: j;
}

/*Aviso antecipações*/

.aviso-antecipacoes {
    display: grid;
    row-gap: .9rem;
    grid-template-columns: 1fr;
    grid-template-rows: 30px auto 30px;
}

.table-dados {
    width: 100%;
}



@media(min-width: 768px) {


    .transporte-pedido {
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
    }

    .transporte-pedido-volume {
        margin-top: 10px;
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
    }




    .transporte-pedido-a {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: "reponsavel-transporte reponsavel-transporte reponsavel-transporte cotacao"
            "codigo-fornecedor inscricao-federal-transporte inscricao-estadual-transporte inscricao-municipal-transporte"
            "nome-transporte nome-transporte nome-fantasia-transporte nome-fantasia-transporte";
    }


    .transporte-pedido-b {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: .5fr 1.1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "valor rateio veiculo-utilizado cidade-ini-transporte cidade-fim-transporte";
    }


    .transporte-pedido-volume-a {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "a b c d e f"
            "g g g h h h";
    }
}

.reponsavel-transporte {
    grid-area: reponsavel-transporte;
}

.cotacao {
    grid-area: cotacao;
}

.codigo-fornecedor {
    grid-area: codigo-fornecedor;
}

.inscricao-federal-transporte {
    grid-area: inscricao-federal-transporte;
}

.inscricao-estadual-transporte {
    grid-area: inscricao-estadual-transporte;
}

.inscricao-municipal-transporte {
    grid-area: inscricao-municipal-transporte;
}

.nome-transporte {
    grid-area: nome-transporte;
}

.nome-fantasia-transporte {
    grid-area: nome-fantasia-transporte;
}

.valor {
    grid-area: valor;
}

.rateio {
    grid-area: rateio;
}

.veiculo-utilizado {
    grid-area: veiculo-utilizado
}

.cidade-ini-transporte {
    grid-area: cidade-ini-transporte;
}

.cidade-fim-transporte {
    grid-area: cidade-fim-transporte;
}

.pedido-volume-peso-bruto {
    grid-area: a;
}

.pedido-volume-peso-liquido {
    grid-area: b;
}

.pedido-volume-atualizar-peso {
    grid-area: c;
    margin-top: 22px;
    background-color: #42a5f5;
}

.pedido-volume-quantidade {
    grid-area: d;
}

.pedido-volume-numero {
    grid-area: e;
}

.pedido-volume-especie {
    grid-area: f;
}

.pedido-volume-marca {
    grid-area: g;
}

.pedido-volume-lacre {
    grid-area: h;
}


/*Acordo comercial pós-venda*/
acordo-comercial {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "descricao-acordo" "aliquota-acordo" "inicial-acordo" "final-acordo" "cliente-acordo" "produto-acordo";
    padding: 5px;
    margin-bottom: 5px;
}


@media(min-width: 726px) {

    .acordo-comercial {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas: "descricao-acordo descricao-acordo"
            "aliquota-acordo aliquota-acordo"
            "inicial-acordo final-acordo"
            "cliente-acordo produto-acordo";
        padding: 5px;
        margin-bottom: 5px;
    }
}



@media(min-width: 1392px) {

    .acordo-comercial {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: .5fr 1fr 1fr .5fr .5fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "descricao-acordo descricao-acordo descricao-acordo descricao-acordo descricao-acordo"
            "aliquota-acordo inicial-acordo final-acordo cliente-acordo produto-acordo";
        padding: 5px;
        margin-bottom: 5px;
    }
}




.descricao-acordo {
    grid-area: descricao-acordo;
}

.aliquota-acordo {
    grid-area: aliquota-acordo;
}

.inicial-acordo {
    grid-area: inicial-acordo;
}

.final-acordo {
    grid-area: final-acordo;
}

.cliente-acordo {
    margin-top: 17px;
    grid-area: cliente-acordo;
}

.produto-acordo {
    margin-top: 17px;
    grid-area: produto-acordo;
}

/*Localizar pessoa
*/



.list-pessoas {
    color: #7e8dd7;
    border: 1px solid;
    border-radius: 2px;
    padding: 5px;
    height: 50vh;
}

.btn-gravar {
    margin-top: 5px;
}


@media(max-width: 420px) {
    .campos-pesquisa {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: 1fr 1fr 1fr;
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
        max-width: 390px;
    }

    .campos-pesquisa-1 {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: 1fr;
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
        max-width: 390px;
    }


    .list-pessoas {
        max-width: 390px;
    }
}

@media(max-width: 400px) {
    .campos-pesquisa {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: 1fr 1fr 1fr;
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
        max-width: 370px;
    }

    .campos-pesquisa-1 {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: 1fr;
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
        max-width: 370px;
    }


    .list-pessoas {
        max-width: 370px;
    }
}

@media(max-width: 376px) {

    .campos-pesquisa {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: 1fr 1fr 1fr;
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
        max-width: 360px;
    }

    .campos-pesquisa-1 {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: 1fr;
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
        max-width: 360px;
    }

    .list-pessoas {
        max-width: 360px;
    }
}


@media(max-width: 360px) {
    .campos-pesquisa {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: 1fr 1fr 1fr;
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
        max-width: 330px;
    }

    .campos-pesquisa-1 {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: 1fr;
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
        max-width: 330px;
    }



    .list-pessoas {
        max-width: 330px;
    }
}


.tableFixHead {
    overflow-y: auto;
    height: 48vh;
    width: 100%;
}

    .tableFixHead thead th {
        position: sticky;
        top: 0;
        background-color: rgb(200, 227, 252);
    }


@media (min-width: 1439px) { /* 768px */

    .campos-pesquisa {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: 1fr;
        grid-template-columns: .7fr .7fr .5fr;
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
    }

    .campos-pesquisa-1 {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-rows: 1fr;
        color: #7e8dd7;
        border: 1px solid;
        border-radius: 2px;
        padding: 5px;
    }


    .tableFixHead {
        overflow-y: auto;
        height: 47vh;
    }

        .tableFixHead thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }
}



@media (min-width: 1600px) { /* 768px */



    .tableFixHead {
        overflow-y: auto;
        height: 53vh;
    }

        .tableFixHead thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }
}

@media (min-width: 1439px) { /* 768px */


    .tableFixHead {
        overflow-y: auto;
        height: 47vh;
    }

        .tableFixHead thead th {
            position: sticky;
            top: 0;
            background-color: rgb(200, 227, 252);
        }
}

/*Financiamento*/


@media screen and (max-width: 736px) {

    .financiamento {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: .2rem;
        grid-template-areas: "fornecedor"
            "descricao"
            "contrato"
            "tipo"
            "tipo-parcela"
            "numero-parcela-pagar"
            "data-entrada"
            "vencimento-primeira-parcela"
            "concedido"
            "valor-parcela-fixa"
            "taxa-juros"
            "taxa-juros-mensal"
            "parcela";
        width: 100%;
    }

    .dados-fornecedor {
        display: grid;
        grid-template-columns: 1fr .1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: .2rem;
        grid-template-areas: "cnpj button-procurar-fornecedor" "razao-social razao-social" "nome-fantasia nome-fantasia";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 5px;
    }
}




@media (min-width: 737px) {

    .financiamento {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-gap: .2rem;
        grid-template-areas: "fornecedor fornecedor fornecedor fornecedor fornecedor"
            "descricao descricao descricao descricao contrato"
            "tipo tipo-parcela numero-parcela-pagar data-entrada vencimento-primeira-parcela"
            "concedido valor-parcela-fixa taxa-juros taxa-juros-mensal parcela";
        width: 100%;
    }

    .dados-fornecedor {
        display: grid;
        grid-template-columns: .5fr .1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: .2rem;
        grid-template-areas: "cnpj button-procurar-fornecedor razao-social nome-fantasia";
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        color: #7e8dd7;
        padding: 5px;
    }
}





.fornecedor {
    grid-area: fornecedor;
}

.cnpj {
    grid-area: cnpj;
}

.button-procurar-fornecedor {
    grid-area: button-procurar-fornecedor;
}

.razao-social {
    grid-area: razao-social;
}

.nome-fantasia {
    grid-area: nome-fantasia;
}

.descricao {
    grid-area: descricao;
}

.tipo {
    grid-area: tipo;
}

.tipo-parcela {
    grid-area: tipo-parcela;
}

.contrato {
    grid-area: contrato;
}

.concedido {
    grid-area: concedido;
}

.numero-parcela-pagar {
    grid-area: numero-parcela-pagar;
}

.vencimento-primeira-parcela {
    grid-area: vencimento-primeira-parcela;
}


.data-entrada {
    grid-area: data-entrada;
}

.taxa-juros {
    grid-area: taxa-juros;
}


.valor-parcela-fixa {
    grid-area: valor-parcela-fixa;
}

.taxa-juros-mensal {
    grid-area: taxa-juros-mensal;
}

.parcela {
    grid-area: parcela;
}

button.parcela {
    margin-top: 21px;
    background-color: #42a5f5;
    border-color: #42a5f5;
}

.register-conteudo-cadastro-parametro-contabeis-tributos {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
}



@media (min-width: 768px) {

    .register-conteudo-cadastro-parametro-contabeis-tributos {
        display: grid;
        row-gap: .5rem;
        column-gap: .5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

.floating-update {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    padding: 1rem 1.5rem;
    animation: fadein 2s ease-out;
    width: auto;
    background-color: rgb(23, 221, 15)
}





@keyframes fadein {
    from {
        right: -100%;
    }

    to {
        right: 2rem;
    }
}

.div-grup {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    grid-gap: 0rem .5rem;
    grid-template-areas: "label-grup" "select-grup" "button-grup";
    width: auto;
    height: 70px;
    border-radius: 5px;
    border: 1px solid;
    color: #7e8dd7;
    margin-bottom: 10px;
    padding: 5px;
}

.filtro-vinculacao {
    grid-area: filtro-vinculacao;
    height: 30px;
    font-family: 'Roboto', sans-serif;
}
.button-consulta-vinculacao {
    background-color: #a5d6a7;
    border-color: #a5d6a7;
    margin-top: 25px;
    font-family: 'Roboto', sans-serif;
    grid-area: button-consulta-vinculacao;
}
.button-gravar-vinculacao {
    margin-top: 25px;
    grid-area: button-gravar-vinculacao;
    background-color: #00c853;
    border-color: #00c853;
    font-family: 'Roboto', sans-serif;
}



@media (min-width: 768px) {
    .div-grup {
        display: grid;
        grid-template-columns: 4fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 0rem;
        grid-template-areas: "label-grup label-grup" "select-grup button-grup";
       
    }
    

    .filtro-gravar-opcoes {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: "filtro-vinculacao" "button-consulta-vinculacao" "button-gravar-vinculacao"; /* Centraliza os itens verticalmente */
        grid-gap: 1rem;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .filtro-gravar-conta-receber {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "filtro-vinculacao"  "button-gravar-vinculacao"; /* Centraliza os itens verticalmente */
        grid-gap: 1rem;
        margin-top: 5px;
        margin-bottom: 5px;
    }


}

.label-grup {
    grid-area: label-grup;
}

.select-grup {
    grid-area: select-grup;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.button-grup {
    grid-area: button-grup;
    width: auto;
    height: 27px;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.text-justifcativa-nf {
    margin-top: 10px;
    height: 80px;
}

.td-input {
    padding-top: 17px !important;
    font-size: 16px;
}

.input-cinza {
    background-color: #efefef;
}

.contabilidade-nivel-1 {
    font-size: 16px !important;
    font-weight: bold;
    margin-top: 5px;
}

.contabilidade-nivel-1-valor {
    font-size: 16px !important;
    font-weight: bold;
    text-align: right;
    margin-top: 5px;
}

.contabilidade-nivel-2 {
    font-size: 15px !important;
    margin-left: 12px !important;
    font-weight: bold;
}


.contabilidade-nivel-2-valor {
    font-size: 15px !important;
    text-align: right;
    font-weight: bold;
}


.contabilidade-nivel-3 {
    font-size: 14px !important;
    margin-left: 24px !important;
    font-weight: bold;
    
}


.contabilidade-nivel-3-valor {
    font-size: 14px !important;
    text-align: right;
    font-weight: bold;
    
}

.contabilidade-nivel-4 {
    font-size: 13px !important;
    margin-left: 36px !important;
}

.contabilidade-nivel-4-valor {
    font-size: 13px !important;
    text-align: right;
}

.contabilidade-nivel-5 {
    font-size: 13px !important;
    font-weight: bold;
    margin-left: 48px !important;
    margin-top: 5px;
}


.contabilidade-nivel-5-valor {
    font-size: 13px !important;
    text-align: right;
    font-weight: bold;
    margin-top: 5px;
}


.contabilidade-grid-nivel-1 {
    display: grid;
    margin-top: 10px;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 2fr 1fr;
}

.contabilidade-grid {
    display: grid;
    row-gap: .5rem;
    column-gap: .5rem;
    grid-template-columns: 2fr 1fr;
}

.contabilidade-contaner {
    display: grid;
    grid-template-columns: 4fr 8fr 4fr;
}

.contabilidade-ul {
    border: 1px solid;
    padding: 10px;
    background-color: white;
    margin: 5px;
}

.contabilidade-titulo {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 17px !important;
    text-align: center;
    font-weight: bold;
}

.contabilidade-periodo {
    margin-bottom: 20px;
    font-size: 14px !important;
    text-align: center;
    font-weight: bold;
}


.table td.fit,
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

.filtro-parametro-contabeis{
    margin-bottom: 10px;
}

.filtro-tipo-folha-liquida {
   
    width: 300px;
}

.footer-pdfmodal {
    
    margin-top: 5px;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

.buttons-conteudo-pdf-modal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    margin-top: 5px;
    grid-template-areas: "servico-pdf-modal navegacao-pdf-modal"; /* Centraliza os itens verticalmente */
}

.servico-pdf-modal {
    grid-area: servico-pdf-modal;
}

.navegacao-pdf-modal {
    grid-area: navegacao-pdf-modal;
}

.filtro-gravar-opcoes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "filtro-vinculacao button-consulta-vinculacao button-gravar-vinculacao"; /* Centraliza os itens verticalmente */
    grid-gap: 1rem;
    margin-top: 5px;
    margin-bottom: 5px;
}

.filtro-gravar-conta-receber {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "filtro-vinculacao  button-gravar-vinculacao"; /* Centraliza os itens verticalmente */
    grid-gap: 1rem;
    margin-top: 5px;
    margin-bottom: 5px;
}

.borda-erro {

    border-top: 2px solid red !important;
    border-right: 2px solid red !important;
    border-bottom: 2px solid red !important;
    border-left: 2px solid red !important;
}

.borda-sucesso {

    border-top: 2px solid green !important;
    border-right: 2px solid green !important;
    border-bottom: 2px solid green !important;
    border-left: 2px solid green !important;
}

.totais-pedido {
    display: flex;
    align-items: center; /* Centraliza verticalmente */
   
    height: 100%; /* Garante que o contêiner ocupa a altura total da célula */
}

.select-check-text-box {
    display: grid;
    grid-template-columns: 1fr .5fr;
    grid-template-rows: 1fr;
    grid-template-areas: "a a" "b c";
    margin-bottom: 3px;
}

.rateio-layout-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dois painéis de tamanho igual */
    grid-template-rows: 1fr;
    grid-gap: 1.5rem; /* Espaço entre os painéis */
    margin-top: 10px;
}

/* Painel individual */
.rateio-painel {
    padding: 0;
    margin: 0;
    border: 1px solid #ddd; /* Borda simples */
    
    background: #fff;
}

/* Cabeçalho do painel (como sua classe .label-acao-extrato-bancario) */
.rateio-painel-header {
    /* --- VISUAL (Cores e Bordas) --- */
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    /* --- LAYOUT (A Correção) --- */
    display: flex; /* Ativa o modo flexível */
    align-items: center; /* Centraliza verticalmente (alinha o texto com o botão) */
    justify-content: space-between; /* Joga o texto p/ esquerda e botão p/ direita */
    /* O SEGREDO: Proíbe o botão de cair para a linha de baixo */
    flex-wrap: nowrap !important;
    width: 100%; /* Garante que a div ocupe a largura toda */
    gap: 15px; /* Espaço mínimo entre texto e botão */
}

    /* --- COMPORTAMENTO DO TEXTO --- */
    .rateio-painel-header span {
        flex: 1; /* Tenta ocupar todo espaço sobrando */
        min-width: 0; /* OBRIGATÓRIO: Permite que o texto encolha se faltar espaço */
        /* Truncamento (Três pontinhos...) */
        white-space: nowrap; /* Texto em uma única linha */
        overflow: hidden; /* Corta o excesso */
        text-overflow: ellipsis; /* Adiciona "..." no final */
    }

    /* --- COMPORTAMENTO DO BOTÃO --- */
    .rateio-painel-header button,
    .rateio-painel-header .btn-buscar-header { /* Caso use classes diferentes */
        flex-shrink: 0; /* BLINDAGEM: Impede o botão de ser esmagado */
        white-space: nowrap; /* Texto do botão em uma linha */
        width: auto !important; /* Tamanho apenas do conteúdo */
        margin: 0; /* Remove margens externas que atrapalham */
    }

.btn-buscar-header {
    background-color: #007bff; /* Azul padrão ou sua cor de preferência */
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px; /* Espaço entre ícone e texto */
}

    .btn-buscar-header:hover {
        background-color: #0056b3;
    }




.rateio-painel-content {
    
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}
/* Rodapé do painel (para os totais) */
.rateio-painel-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: right;
}

/* Barra de Ação (como sua classe .acoes-extrato-bancario) */
.rateio-barra-acao {
    display: grid;
    grid-template-columns: 2fr auto auto auto; /* Coluna 1 cresce, botões com tamanho auto */
    grid-gap: 1rem;
    align-items: center; /* Alinha o Select e os botões */
    margin-top: 15px;
    padding: 10px;
    border-top: 1px solid #ddd;
}

/* Classes de Validação (baseado no seu .borda-erro) */
.total-ok {
    color: green;
}

.total-erro {
    color: red;
}
.layout-filtro-topo {
    display: grid;
    grid-template-columns: 3fr 1fr; /* Input maior, botão menor */
    gap: 10px;
    /* O SEGREDO 1: Alinha pela base. 
       Isso garante que o botão alinhe com o input, ignorando a label em cima. */
    align-items: end;
    margin-bottom: 15px;
}

.layout-filtro-topo .button-gravar {
    margin: 0;
    /* O SEGREDO 2: A Altura deve ser IGUAL à do input. 
       Se seu input for padrão Bootstrap, use 38px. 
       Se for 'small', use 31px. 
       27px geralmente é muito pequeno e causa o desalinhamento visual. */
    height: 38px; /* <--- Tente 35px ou 38px aqui */
    /* O SEGREDO 3: Flexbox INTERNO do botão.
       Garante que o texto fique no meio exato, independente da altura. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.tableFixHead-ajustavel {
    /* A LÓGICA:
       100vh = Altura total da tela
       - 280px = Espaço reservado para (Cabeçalho da Pagina + Título do Painel + Botões Embaixo + Margens)
    */
    height: calc(100vh - 280px);
    /* Habilita a rolagem interna SOMENTE aqui */
    overflow-y: auto;
    overflow-x: auto;
    /* Garante que a largura da tabela bata com o pai */
    width: 100%;
}

    /* Mantém o cabeçalho da tabela fixo quando rolar */
    .tableFixHead-ajustavel thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: rgb(200, 227, 252);
        box-shadow: inset 0 1px 0 #dee2e6, inset 0 -1px 0 #dee2e6;
    }