/* =========================================
   RESET / CONTAINER
========================================= */

html,
body{
    margin:0;
    padding:0;
    width:100%;
    overflow-x:hidden;
}

.corpo{
    width:96%;
    max-width:96%;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
}


/* =========================================
   TÍTULO
========================================= */

h1{
    margin:10px 0 15px !important;
}


/* =========================================
   FIELDSET
========================================= */

fieldset{
    width:100%;
    max-width:100%;

    margin:10px 0;
    padding:10px 15px 20px;

    border:1px solid #005d9f;
    border-radius:2px;

    font-weight:normal;

    box-sizing:border-box;
    overflow:hidden;
}

fieldset legend{
    margin-left:10px;
}

/* rádio decorativo */

fieldset .radio{
    display:block;
    float:left;

    width:26px;
    height:24px;

    padding:6px 3px 0 6px;

    background:#005d9f;
    border-radius:0 8px 8px 0;
}


/* =========================================
   BLOCOS INTERNOS
========================================= */

.fundoMiolo .block-01,
fieldset > .block-01{

    width:100%;
    margin:10px 0;

    padding:1em;

    background:#f0f6ff;
    border:1px solid #e1ecfe;

    font-size:13px;

    box-sizing:border-box;
}


/* =========================================
   INPUTS
========================================= */

input.inputG,
select.inputG,
select.selectGenerico{

    width:260px !important;
    height:30px;

    font-size:15px !important;
    font-weight:normal;

    box-sizing:border-box;
}

.selectGenerico{
    font-size:15px;
}


/* =========================================
   RADIO GROUP
========================================= */

.grupoRadio{
    margin:8px 0;
}

.grupoRadio .radioE,
.grupoRadio .radioD{
    display:inline-block;
    margin-right:25px;
}

.grupoRadio input[type="radio"]{
    display:inline-block;
    vertical-align:middle;
    margin-right:5px;
}

.grupoRadio label{
    display:inline !important;
    vertical-align:middle;
    margin-right:15px;
}


/* =========================================
   BOTÃO
========================================= */

#btPesquisar{
    display:inline-block;
}


/* =========================================
   TABELA DESKTOP
========================================= */

#caixaTabela{
    width:100%;
    max-width:100%;
    overflow:hidden;
    box-sizing:border-box;
}

#caixaTabela table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

#caixaTabela th,
#caixaTabela td{
    padding:6px 8px;
    font-size:13px;
    border-bottom:1px solid #ddd;
    box-sizing:border-box;
}

#caixaTabela td{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Nome */

#caixaTabela td:nth-child(1){
    white-space:normal;
    word-break:break-word;
}

/* Assunto */

#caixaTabela td:nth-child(5){
    white-space:normal;
    word-break:break-word;
}

/* Ações */

.td-opcoes{
    width:90px;
    text-align:center;
}


/* =========================================
   DATATABLES
========================================= */

#tabela{
    width:100% !important;
    border-collapse:collapse;
}

.dataTables_wrapper{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden;
    box-sizing:border-box;
}

.dataTables_scroll{
    width:100% !important;
}

.dataTables_scrollHeadInner{
    width:100% !important;
}

.dataTables_scrollBody{
    overflow:hidden !important;
}

.dataTables_scrollBody table{
    width:100% !important;
}

table.dataTable{
    width:100% !important;
    table-layout:fixed !important;
}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width:768px){

    .corpo{
        width:94%;
        max-width:94%;
        margin:0 auto;
    }

    fieldset{
        padding:10px;
    }

    input.inputG,
    select.inputG,
    select.selectGenerico{
        width:100% !important;
        max-width:100%;
    }

    #caixaTabela{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    #caixaTabela table,
    #caixaTabela thead,
    #caixaTabela tbody,
    #caixaTabela tr,
    #caixaTabela th,
    #caixaTabela td{
        display:block;
        box-sizing:border-box;
    }

    #caixaTabela table{
        width:100%;
    }

    #caixaTabela thead{
        display:none;
    }

    #caixaTabela tr{
        width:100%;
        margin-bottom:12px;
        padding:8px;

        border:1px solid #ddd;
        border-radius:6px;

        background:#fff;

        box-sizing:border-box;
    }

    #caixaTabela td{

        width:100%;

        padding:5px 6px;

        white-space:normal !important;
        word-break:break-word;
        overflow-wrap:break-word;

        border-bottom:1px solid #eee;

        box-sizing:border-box;
    }

    #caixaTabela td::before{

        content:attr(data-label);

        display:block;

        margin-bottom:2px;

        font-weight:bold;

        color:#555;
    }

    #caixaTabela td:last-child{
        border-bottom:none;
    }

    .td-opcoes{
        text-align:right;
        width:100%;
    }
}


/* =========================================
   DESKTOP GRANDE
========================================= */

@media screen and (min-width:1024px){

    .corpo{
        width:96%;
        max-width:96%;
    }

    fieldset{
        margin:10px 0;
    }
}