@font-face {
    font-family: "Titillium Web";
    font-weight: normal;
    src: url("../../../fonts/TitilliumWeb-Regular.woff") format("woff"),
         url("../../../fonts/TitilliumWeb-Regular.woff2") format("woff2"),
         url("../../../fonts/TitilliumWeb-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Titillium Web";
    font-weight: bold;
    src: url("../../../fonts/TitilliumWeb-Bold.woff") format("woff"),
         url("../../../fonts/TitilliumWeb-Bold.woff2") format("woff2"),
         url("../../../fonts/TitilliumWeb-Bold.ttf") format("truetype");
}

html, body{
    margin: 0;
    padding: 0;
    min-width: 280px;
    font-family: "Titillium Web", Verdana, sans-serif;
}

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #212529;
    overflow-y: scroll;
}

*:focus, *:focus-visible{
    outline: none !important;
}

*:not(.home-icon):focus, *:not(.home-icon):focus-visible{
    box-shadow: none !important;
}

a, a:hover, a:visited{
    color: #b4161b;
    text-decoration: none;
}

a.btn {
    color: #fff;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}

h5{
    font-weight: bold;
    margin-left: 15px;
}

header{
    background-color: #212529;
    width: 100%;
    /* display: flex; */
    display: none;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: fixed;
    z-index: 700;
}

header #go-back{
    position: absolute;
    left: 15px;
    cursor: pointer;
    display: none;
}

main{
    margin-top: 80px;
    margin-bottom: 80px;
    padding: 5px;
    width: 100%;
    max-width: 650px;
    display: none;
}

main > div{
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

section#other-overlays{
    display: none;
}

nav{
    /* display: flex; */
    display: none;
    align-items: center;
    justify-content: center;
    border-top: 1px solid black;
    width: 100%;
    background-color: #212529;
    position: fixed;
    bottom: 0;
}

nav > div{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 450px;
}

nav button{
    margin: 0 0;
    width: 100%;
    font-size: 10px !important;
    color: #e9ecef !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

nav button img{
    margin-bottom: 5px;
}

#overlay{
    display: block;
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: #212529;
}

#overlay > div{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#overlay .overlay-logo img{
    width: 175px;
    display: none;
}

#overlay .overlay-msg{
    font-size: 13px;
    margin-top: 45px;
    color: #fff;
}

#overlay-btn-tentar-novamente{
    display: none;
    color: #fff;
    border: 1px solid #fff;
    margin-top: 45px;
}

#overlay-nome .overlay-nome-logo{
    margin-bottom: 25px;
}

#overlay-nome{
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 800;
    width: 100%;
    min-width: 280px;
    height: 100%;
    color: #e9ecef;
    font-size: 12px;
    background-color: rgba(255, 255, 255, 0.7);
    overflow: scroll;
}

#overlay-nome > div{
    width: 400px;
    max-width: 90%;
    height: 750px;
    min-height: 500px;
    max-height: 75%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #212529;
    box-shadow: 0 0 8px 0px rgb(0 0 0 / 25%);
    position: relative;
}

@media (max-height: 450px){
    #overlay-nome{
        zoom: 0.8;
        align-items: flex-start;
    }

    #overlay-nome > div{
        height: 100vh;
    }
}

#overlay-nome .overlay-nome-body{
    width: 90%;
}

#overlay-nome .form-group{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#overlay-nome .overlay-nome-body > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 15px;
}

#overlay-nome input{
    width: 250px;
    max-width: 100%;
    text-align: center;
}

#overlay-nome button{
    max-width: 200px;
    font-size: 12px;
    color: #e9ecef !important;
    margin-top: 15px;
}

#overlay-nome #btn-entrar{
    max-width: 200px;
    font-weight: bold;
    font-size: 15px;
    border: 1px solid #e9ecef;
}

#overlay-nome #btn-entrar-sem-nome{
    margin: 25px 0;
}

#overlay-nome #info-politica-login a{
    color: #868686 !important;
}

.modal-backdrop {
    width: 100% !important;
    height: 100% !important;
}

.modal-content div {
    width: 100%;
    align-items: center;
}

#btn-close-overlay-nome{
    position: absolute;
    top: 15px;
    left: 12px;
    width: 15px;
}

#home{
    zoom: 1;
}

#home a.home-icon{
    color: #000;
}

@media (min-width: 450px){
    #home{
        zoom: 1.1;
    }
}

#home .btn-home-hidden{
    display: none;
}

.home-icon{
    display: flex;
    padding: 15px 15px;
    margin: 13px 0;
    border-radius: 15px;
    width: 270px;
    box-shadow: 0 0 8px 0px rgb(0 0 0 / 25%);
    font-weight: bold;
    background-image: url('../img/logos/rowa-180-180.png');
    background-repeat: no-repeat;
    background-position: right -13px top -15px;
    background-size: 100px;
}

.home-icon img{
    margin-right: 10px;
}

.msg-bar{
    color: #212529;
    font-size: 10px;
    text-align: center;
}

#saudacao{
    text-align: center;
    margin: 10px 0 10px 10px;
    font-size: 20px;
    font-weight: bold;
}

#edit-name{
    margin: -3px 0 0 5px;
}

.title{
    font-size: 25px;
    text-align: center;
}

.item-body{
    width: 100%;
    overflow-wrap: anywhere;
}

#db-version{
    color: #888;
    font-size: 10px;
}

#info-politica{
    color: #c8c8c8;
    font-size: 10px;
    margin-top: 5px;
}

#contato #contato-body{
    margin-top: 10px;
}

#produtos-body .nome-grupo{
    font-weight: bold;
    text-align: center;
}

#produtos-body .linhas{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 10px 0;
}

#produtos-body .linha{
    font-size: 10px;
    text-align: center;
    margin: 20px 8px;
}

#produtos-body .linha img{
    margin-bottom: 5px;
    height: 60px;
}

#produtos-body span{
    font-size: 9px;
}

#produtos-body .linhas-produtos{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    color: #b4161b;
}

#produtos-body .linhas-produto{
    text-align: center;
    margin: 15px 0;
    font-weight: bold;
}

#produtos-body .prod-linha{
    margin-bottom: 10px;
    text-align: center;
}

#produtos-body .prod-img{
    text-align: center;
}

#produtos-body .prod-downloads{
    margin-top: 15px;
}

#produtos-body .prod-download-item{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 15px 0;
}

#produtos-body .prod-download-item img{
    margin: -3px 5px 0 10px;
}

#produtos-body .prod-download-item > div{
    display: inline-block;
    font-size: 14px;
    color: #999;
    font-style: italic;
    margin-left: 5px;
}

#produtos-body .btn-falar,
#produtos-body .btn-ver-prod-site{
    text-align: center;
    margin: 20px 0 15px 0;
}

#produtos-body .btn-falar .btn,
#produtos-body .btn-ver-prod-site a,
#produtos-body .btn-voltar-linha > button{
    color: #fff !important;
    margin: 5px;
    background-color: #ed1c24;
}

#produtos-body .btn-voltar-linha{
    margin-top: 15px;
    text-align: center;
}

#produtos-body .prod-video{
    margin-top: 15px;
}

#produtos-body .prod-video > div{
    text-align: center;
}

#produtos-body .prod-descricao table{
    margin: 5px auto;
}

#produtos-body .prod-descricao table tr td:nth-child(1){
    text-align: right;
    font-weight: bold;
}

#produtos-body .prod-descricao table tr td{
    border-bottom: 1px solid #999;
    padding: 5px 10px 5px 20px;
}

#produtos-body .prod-descricao table tr:last-child td{
    border-bottom: none;
}

#dimensionamento-body .dim-uso{
    text-align: center;
}

#dimensionamento-body .dim-itens-geral{
    display: flex;
    justify-content: center;
}

#dimensionamento-body .dim-itens{
    text-align: center;
    display: inline-block;
}

#dimensionamento-body .dim-linha{
    display: flex;
    align-items: center;
    margin: 15px;
}

#dimensionamento-body .dim-descr{
    margin-left: 15px;
    line-height: 18px;
    text-align: left;
}

#dimensionamento-body .dim-descr span{
    font-size: 12px;
    color: #64676b;
}

#dimensionamento-body input[type='tel']{
    width: 70px;
    text-align: center;
}

#dimensionamento-body button#btn-dim-calcular{
    color: #fff !important;
    margin: 10px 0 25px 0;
    background-color: #ed1c24;
}

#dimensionamento-body .dim-res-titulo{
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

#dimensionamento-body .dim-res-msg{
    text-align: center;
}

#dimensionamento-body .dim-res-msg-superior{
    text-align: center;
    display: none;
}

#dimensionamento-body #dim-resultado{
    padding: 15px;
    background-color: #e9ecef;
    display: none;
}

#dimensionamento-body .dim-result{
    margin-top: 15px;
}

#dimensionamento-body .dim-result > div{
    margin: 15px;
}

#dimensionamento-body .dim-result-obs{
    margin-top: 15px;
}

#dimensionamento-body .card-resultado .titulo{
    font-weight: bold;
    font-size: 18px;
    border-bottom: 1px solid #ddd;
    padding: 5px 0 8px 0;
}

#dimensionamento-body .card-resultado .produtos > div{
    padding: 10px 0;
    font-weight: bolder;
    color: #b4161b;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

#dimensionamento-body .card-resultado .produtos > div:last-child{
    border-bottom: none;
}

#dimensionamento-body .card-resultado .produtos img{
    margin-bottom: 10px;
}

#dimensionamento-body .dim-result-btns{
    text-align: center;
}

#dimensionamento-body #alert-dim{
    text-align: center;
    display: none;
}

#modal .modal-header{
    color: #fff;
    background-color: #212529;
}

#modal input{
    text-align: center;
}

#modal .modal-spinner{
    display: none;
    justify-content: center;
    align-items: center;
    min-height: 150px;
}

#modal .modal-spinner > div{
    width: auto;
}

#modal .modal-spinner > div:first-child{
    width: 1rem;
}

#modal .modal-alert{
    display: none;
}

#modal .dim-label{
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 10px;
}

#modal .dim-label:first-child{
    margin-top: -5px;
}

#modal .dim-btns > button{
    margin: 15px 10px 0 10px;
}

.modal-content {
    border: none !important;
}

.modal-dialog {

}