* {
    box-sizing: border-box;
}
.botaoAdd {
    background: url("add_row_icon.gif")  no-repeat;
    display: block;
    border:0;
    cursor: pointer;
    float:left;
    height: 30px;
    margin-left:1px;
    text-indent: -99999px;
    width: 33px;
}

.botaoDel {
    background: url("delete_row_icon.gif") no-repeat;
    display: block;
    border:0;
    cursor: pointer;
    float:right;
    height: 30px;
    margin-left:1px;
    text-indent: -99999px;
    width: 33px;
    }

.botaoHelp {
    background: url("help_icon.gif") no-repeat;
    display: block;
    border:0;
    cursor: pointer;
    float: right;
    height: 30px;
    margin-left:1px;
    text-indent: -99999px;
    width: 38px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: linear-gradient(68.15deg, #23272f 16.62%, #52808e 85.61%);
} 

#frontend {
    display: block;
    width: 100%;
    margin: 5%;  
}       

#backend {
    display: none;
    width: 100%;
    margin: 5%;
}


#descricao {
    position: relative;
    width: 100%;
}

.data {
    position: relative;
    width: 177px;
}

.percent {
    width: 60px;
}

.valor {
    position: relative;
    width: 20%;
    margin-left:1px;
}

.valorLinha {
    width: 90%;
    margin-left:1px;
}
.descr {
    position: relative;
    width: 100%;
    margin-left:1px;
}

.tab-ind {
    width: 80%;
}

.linha {
    position: relative;
    width: 100%;
}

.tabRes {
    border: 3px  #fafbfd solid;
    width: 100%;
    background-color: #70909B; 
}
.tabRes tr {
    border: 3px  #fafbfd solid;
    border-collapse: collapse;
    text-align: center;
    color: #fafbfd;
}
.tabRes td {
    border: 3px  #fafbfd solid;
    border-collapse: collapse;
    text-align: right;
    color: #fafbfd;
}
.tabRes th {
    border: 3px  #fafbfd solid;
    border-collapse: collapse;
    text-align: center;
    color: #fafbfd;
}
.tabInfo {
    border: 3px  #fafbfd solid;
    width: 100%;
    background-color: #70909B; 
}
.tabInfo tr {
    border: 3px  #fafbfd solid;
    border-collapse: collapse;
    text-align: center;
    color: #fafbfd;
}
.tabInfo td {
    border: 3px  #fafbfd solid;
    border-collapse: collapse;
    text-align: left;
    color: #fafbfd;
}
.tabInfo th {
    border: 3px  #fafbfd solid;
    border-collapse: collapse;
    text-align: center;
    color: #fafbfd;
}

a {
    font-size: 1.0em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #fafbfd;
}

p {
    font-size: 1.5em;
    text-align: justify;
    color: #fafbfd;
}

h1 {
    font-size: 2.5em;
    color: #fafbfd;
    width: 100%;
}

h2 {
    font-size: 2.0em;
    color: #fafbfd;
    width: 100%;
}


div#irParaBox {
    position: relative;
    align-content: center;
    margin: auto;
    margin-top: 50px;
    background-color: #70909B; 
    border:5px;
    color:white;
    font-size: 15pt;
    width: 100%;
    padding: 15px;
    border-radius: 30px;
}
div#irParaBox:hover {
    background-color: #5997ac;
}  


div#descricaoBox {
    position: relative;
    align-content: center;
    margin: auto;
    margin-top: 50px;
    background-color: #70909B; 
    border:5px;
    color:white;
    font-size: 15pt;
    width: 100%;
    padding: 15px;
    border-radius: 30px;
}
div#descricaoBox:hover {
    background-color: #5997ac;
}


div#dataFinalBox {
    position: relative;
    align-content: center;
    margin: auto;
    margin-top: 50px;
    background-color: #70909B; 
    border:5px;
    color:white;
    font-size: 15pt;
    width: 100%;
    padding: 15px;
    border-radius: 30px;
}
div#dataFinalBox:hover {
    background-color: #5997ac;
}


div#tabelaDeIndicesBox {
    position: relative;
    align-content: center;
    margin: auto;
    margin-top: 50px;
    background-color:  #70909B; 
    border:5px;
    color:white;
    font-size: 15pt;
    width: 100%;
    padding: 10px;
    border-radius: 30px;
}
div#tabelaDeIndicesBox:hover {
    background-color: #5997ac;
}


div#correcaoBox {
    position: relative;
    align-content: center;
    margin: auto;
    margin-top: 50px;
    background-color:  #70909B; 
    border:5px;
    color:white;
    font-size: 15pt;
    width: 100%;
    padding: 10px;
    border-radius: 30px;
}
div#correcaoBox:hover {
    background-color: #5997ac;
}


div#jurosBox {
    position: relative;
    align-content: center;
    margin: auto;
    margin-top: 50px;
    background-color:  #70909B; 
    border:5px;
    color:white;
    font-size: 15pt;
    width: 100%;
    padding: 10px;
    border-radius: 30px;
}
div#jurosBox:hover {
    background-color: #5997ac;
}


div#parcelasBox, div#custasDespesasBox {
    position: relative;
    align-content: center;
    margin: auto;
    margin-top: 50px;
    background-color:  #70909B; 
    border:5px;
    color:white;
    font-size: 15pt;
    width: 100%;
    padding: 10px;
    border-radius: 30px;
}
div#parcelasBox:hover {
    background-color: #5997ac;
}
div#custasDespesasBox:hover {
    background-color: #5997ac;
}

div#multaBox {
    position: relative;
    align-content: center;
    margin: auto;
    margin-top: 50px;
    background-color:  #70909B; 
    border:5px;
    color:white;
    font-size: 15pt;
    width: 100%;
    padding: 10px;
    border-radius: 30px;
}
div#multaBox:hover {
    background-color: #5997ac;
}


div#honorariosBox , div#honorariosCumprimentoBox, div#honorariosRecursaisBox {
    position: relative;
    align-content: center;
    margin: auto;
    margin-top: 50px;
    background-color:  #70909B; 
    border:5px;
    color:white;
    font-size: 15pt;
    width: 100%;
    padding: 10px;
    border-radius: 30px;
}
div#honorariosBox:hover {
    background-color: #5997ac;
}
div#honorariosCumprimentoBox:hover {
    background-color: #5997ac;
}
div#honorariosRecursaisBox:hover {
    background-color: #5997ac;
}


div#multaCumprimentoBox {
    position: relative;
    align-content: center;
    margin: auto;
    margin-top: 50px;
    background-color:  #70909B; 
    border:5px;
    color:white;
    font-size: 15pt;
    width: 100%;
    padding: 10px;
    border-radius: 30px;
}
div#multaCumprimentoBox:hover {
    background-color: #5997ac;
}

div#calculadoraCidadaoBCBBox {
    position: relative;
    align-content: center;
    margin: auto;
    margin-top: 50px;
    background-color:  #70909B; 
    border:5px;
    color:white;
    font-size: 15pt;
    width: 100%;
    padding: 10px;
    border-radius: 30px;
}
div#calculadoraCidadaoBCBBox:hover {
    background-color: #5997ac;
}

div.helpBox {
    background-color:  #70909B; ;
    color: white;
    position: relative;
    align-content: center;
    margin: auto;
    margin-top: 50px;
    font-size: 15pt;
    width: 80%;
    padding: 10px;
    border-radius: 30px;
}

.botaocalcular {
    border-radius: 20px;
    color: white;
    background-color: rgb(0, 110, 255);
    display: block;
    margin: 0 auto;
}


.botaocalcular:hover {
    background-color: rgb(0, 4, 255);
}