@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700,800');
* {
    padding: 0;
    margin: 0;
}

body {
    background: #F2F6FB;
    text-align: center; 
}

header div.nav-content {
    background: #FFFFFF;
    height: 70px;
}

header div.nav-bottom {
    background: #FFFFFF;
    height: 20px;
    border-radius: 0px 0px 100% 100%;
    box-shadow: 0 5px 5px 0px #33333315;
}

.header-box {
    margin: auto;
    max-width: 998px;
    display: flex;
    justify-content: space-between;
}

.header-box img {
    margin-top: 10px;
    margin-left: 30px;
    margin-right: 30px;
}

.mithra-logo {
    width: 200px;
}

.cliente-logo {
    height: 60px;
}

h1 {
    position: relative;
    margin: 20px auto;
    width: 50%;
    text-align: center;
    color: #176C93;
    font-family: Roboto !important;
    font-size: 40px;
}

div.cotacao {
    text-align: left;
    background-color: #FFFFFF;
    font-family: Roboto !important;
    font-size: 14px;
    width: 120px;
    border-radius: 15px 15px 0px 0px;
    padding: 15px 15px 20px;
    color: #CECECE;

}
div.header {
    display: flex;
    justify-content: space-between;
    z-index: 0;
}
div.fornecedor {
    text-align: right;
    background-color: #9BDFF2;
    font-family: Roboto !important;
    font-size: 14px;
    border-radius: 15px 15px 0px 0px;
    padding: 15px 15px 20px;
    color: #004461;
    font-weight: bold;
}

div.fornecedor span {
    border: solid 1px;
    border-radius: 5px;
    border-color: #D5F6FF;
    padding: 5px;
    font-weight: normal;
}

#content {
    margin: auto;
    width: 998px;
}
#tabela {
    position: relative;
    margin: auto;
    margin-top: -10px;
    width: 998px;
    min-height: 100px;
    background: #FBFCFF;
    border-radius: 15px;
    padding-bottom: 30px;
}

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

#tabela table tr > * {
    padding: 20px;
    border-bottom: solid 1px;
    border-color: rgba(0,0,0,0.2);
}

#tabela table thead {
    font-family: Roboto !important;
    font-weight: bold;
    color: #004461;
    text-align: left;
}

#tabela table tbody {
    font-family: Roboto !important;
    color: #616161;
    text-align: left;
}

#tabela table tbody tr td.produto {
    max-width: 300px;
}

#tabela table thead tr th.preco, #tabela table tbody tr td.preco {
    background: white;
    max-width: 100px;
    color: #59AF8F;
}

#tabela table tbody tr td.ncm > * {
    max-width: 65px;
    border: solid 1px;
    border-color: #91919130;
    border-radius: 5px;
    font-size: 14px;
    padding: 5px;
}

#tabela table tbody tr td.preco > * {
    max-width: 100px;
    border: solid 1px;
    border-color: #91919130;
    border-radius: 5px;
    font-size: 14px;
    padding: 5px;
}

#tabela table tbody tr td.total {
    font-weight: bold;
    color: #004461;
}

#tabela table tbody tr td.imagem {
    max-width: 5px;
}

#totais {
    display: block;
    background: #59AF8F;
    margin: auto;
    width: 547px;
    min-height: 100px;
    border-radius: 0px 0px 15px 15px;
    padding-bottom: 50px;
}

#totais table {
    padding-top: 20px;
    margin: auto;
    font-size: 18px;
    font-family: Roboto !important;
    color: white;
}

#totais table td {
    min-width: 200px;
}

#totais table td tr {
    text-align: left;
}

input[type="image"] {
    margin: -50px auto;
}

div.line {
  height:0.5px;
  margin-top: 5px;
  border-top: dotted 1px;
  border-color: #7EC9AD;
}

.table-1 tbody tr td {
    text-align: left;
}

.table-2 tbody tr.liquido td {
    font-size: 22px;
    font-weight: bold;
    text-align: left;
}

.table-2 tbody tr:not(.liquido) td {
    color: #FFDD84;
    text-align: left;
}

#totais td {
    height: 27px;
}
#totais input {
    background-color: #59AF8F;
    border: solid 1px;
    border-color: #FFDD84;
    border-radius: 5px;
    font-size: 18px;
    width: 170px;
    height: 27px;
    padding: 5px;
    font-weight: bold;
    color: #FFDD84;
}

#totais input::placeholder {
    color: rgb(65, 126, 103);
    font-size: 14px;
    padding: 5px;
}