:root {
    --main-bg-color: #E6E7E8;
    --main-painel-bg-color: #E6E7E8;
    --primary-button-color: #3E8D5C;
    --primary-button-border-color: #157822;
    --cancel-button-color: #F99D1C;
    --input-bg-color: #36A8BF;
}

* { border:none; margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-family:'Titillium Web',verdana,sans-serif; }
body { font-size:14px; color: #636466; top: 0 !important; position: relative !important; }

label { display:inline-block; font-family:'Titillium Web',verdana,sans-serif; font-weight:500; font-size:14px; color:#636466 }
textarea { overflow:auto }
input,
textarea,
select { font-family:'Titillium Web',verdana,sans-serif; font-size:14px; box-sizing:border-box; color:#fff; outline:none }
select { color: #636466 }
textarea { resize:none }

textarea.erro-borda,
input.erro-borda,
select.erro-borda { background:#d00 !important }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input::placeholder {
    color: #ffffff;
}

/* gerais */
div, section { position:relative }
a { outline:0 }

#principal { width:100%; height:100%; display: inline }
.central { width:96%; height:auto; margin:0 auto; background: white }
.clear { clear:both }

[hidden] { visibility: hidden; }

/* topo */
header { position:fixed; width:100%; height:auto; padding:0; background:#fff; z-index:999 }
header { -webkit-box-shadow:0px 3px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow:0px 3px 5px 0px rgba(0,0,0,0.2); box-shadow:0px 3px 5px 0px rgba(0,0,0,0.2) }
header { font-family: Arial, Helvetica, sans-serif; }

header .link-logo-cidade { margin: auto; padding-left: 15px }

header .header { height: 52px; background-repeat: no-repeat; background-size: cover }

header .icons-header { max-width: 1024px; width: auto; height: 52px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin: auto; }
header .icons-header .icon { color: #ffffff; width: 30px; font-size: 15px; text-align: center }
header .icons-header .icon i.fa { font-family: "Font Awesome 5 Brands"; }

header .logo-cidade { width: 113px; height: 78.453px }

header div.central,
footer div.central { background-color: inherit; display: flex; align-content: center; align-items: center; }

footer div.central .politica { margin-left: auto; margin-right: auto }

main { width:100%; height:auto; min-height: 100vh; padding-top: 156px; padding-bottom: 105px; overflow:hidden; background: var(--main-bg-color); }

main .central { background-color: #fff; border: 1px solid #ddd; padding-top: 52px; }

/* consulta */
#consulta { width:100%; height:auto; padding:20px 0 }
#consulta h1 { font-size:42px; line-height:42px; color:#636466; font-weight:bold; margin-bottom:20px; text-align:center }
#consulta form { width:100%; height:250px; text-align:center; margin: auto; overflow:hidden }
#consulta form label { width:100%; font-size:30px; line-height:30px; color:#fff; margin-bottom:15px }
#consulta form input[type=text] { width:100%; height:auto; max-width: 280px; font-size:48px; line-height:48px; font-weight:bold; padding:8px 0; border:#fff 1px solid; background:var(--input-bg-color); border-radius:4px; text-align:center; text-transform:uppercase; margin-bottom:15px }

#consulta form input[type=submit], #consulta form button[type=button] { display: block; width:auto; height:auto; margin: auto; border-bottom:var(--primary-button-border-color) 3px solid; font-size:18px; color:#fff; line-height:18px; font-weight:bold; padding:15px 40px; background:var(--primary-button-color); text-decoration: none; text-transform:uppercase; border-radius:5px; cursor:pointer }

#consulta form button[type=button].cancelar { background-color: #b64553; display: block; margin: 20px auto; border-bottom:#9b3b47 3px solid; outline: none !important; }
#consulta form button[type=button].nacionalidade { display: flex; align-items: center; flex-direction: column; width: 320px; height: 180px; padding: 16px 20px; background:var(--primary-button-color); outline: none !important; margin: 10px; text-align: center }
#consulta form button[type=button].nacionalidade img { width: 100px; height: 100px; display: block; margin: 0px auto 20px auto; }
#consulta form .container { max-height: 250px; }
#consulta form .container.nacionalidade { display: flex; flex-direction: row; justify-content: center;}
#consulta button[type=button].pagamento { width: 200px; height: 60px }

@media only screen and (max-width: 730px) {
    #consulta form button[type=button].nacionalidade { height: 80px; text-align: left; font-size: 17px; width: 100%; max-width: 330px; display: flex; align-items: center; justify-content: flex-start; align-content: center }
    #consulta form button[type=button].nacionalidade img { display: inline; width: 35px; height: 35px; margin: 0px; margin-right: 8px; }
}

#consulta p { font-size:14px; color:#fff; line-height:18px; text-align:center }

/* rodape */
footer { width:100%; height:auto; padding:20px 0; text-align:center; overflow:hidden; position: absolute; bottom: 0; background: white }
footer p { font-size:14px; color:#636466; line-height:16px }
footer .telmesh { width:100%; height:auto; margin-top:10px; overflow:hidden }
footer .telmesh img { vertical-align:middle }

/* --- resultado */
#resultado { width:100%; height:auto; overflow:hidden }

#resultado .topo { width:auto; height:auto; padding-top: 40px; overflow:hidden }
#resultado .topo h1 { font-size:39px; color:#636466; line-height:39px; font-weight:bold; margin-bottom:20px; text-transform:uppercase }
#resultado .topo h1 span { display:block; width:88px; height:4px; background:#636466; margin:20px 0 0 0 }
#resultado .topo .central { padding-left: 40px; padding-right: 40px; border-bottom: 0; height: auto }

#resultado .topo .info-quitacao { width:auto; height:auto; overflow:hidden }
#resultado .topo .info-quitacao p { font-size:17px; color:#636466; line-height:22px; text-align:justify }

#resultado form { width:100%; height:auto; padding-top: 0; text-align:center; border-top: 0 }
#resultado form .central { border-top: 0; margin-bottom: 52px; padding-bottom: 52px; padding-left: 25px; padding-right: 25px; height: auto }
#resultado form .central.header { margin-bottom: 0; border-bottom: 0; padding-bottom: 0 }
#resultado form .central.campos { border-top: 0; padding-top: 0; display: inline-block }
#resultado form .central input[name=txtPlaca] { color: #636466; }

#resultado .consulta input[type=text] { display:inline-block; width:200px; height:auto; font-size:36px; line-height:36px; padding:4px 0; margin-right:5px; background:#fff; border:#d9d9d9 1px solid; border-radius:5px; text-align:center; text-transform:uppercase; vertical-align:middle; margin-bottom: 20px }

#resultado .divida-ativa p { font-size: 28px; line-height: 26px; }

#resultado .header .consulta { width: 100%; display: flex; flex-direction: column }
#resultado .header .consulta .placa { width: 100%; display: flex; align-items: center; justify-content: center }
#resultado .header .consulta .classificacao { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center }
#resultado .header .consulta .isento { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center }
#resultado .header .botao-pagamento { padding-bottom: 40px; }

#resultado .campos .qtd-passagens { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 40px; }
#resultado .campos .saida-por-periodo { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 20px; }
#resultado .campos .saida-por-periodo .qtd-passagens { display: flex; flex-direction: column; margin-bottom: 0px; margin-top: 0px}

#resultado .campos .saida-por-periodo .qtd-passagens > span { font-size: 24px; border: 2px solid #36a8bf; border-radius: 24px; padding: 8px 12px; }

#resultado .campos input[ng-model="dadosCartao.titularCartao"] { text-transform: uppercase }

#resultado .isento { width:auto; height:auto; overflow:hidden }
#resultado .isento h2 { display:block; font-size:25px; color:#636466; line-height:28px; font-weight:bold; margin-bottom:10px; text-transform:uppercase }
#resultado .isento h2 span { display:block; height:2px; background:#636466; margin-top:10px }
#resultado .isento > span { font-size: 22px; line-height: 22px; margin-bottom: 10px }

#resultado .classificacao { width:auto; height:auto; margin-bottom:20px; overflow:hidden }
#resultado .classificacao h2 { display:block; font-size:25px; color:#636466; line-height:28px; font-weight:bold; margin-bottom:10px; text-transform:uppercase }
#resultado .classificacao h2 span { display:block; height:2px; background:#636466; margin-top:10px }
#resultado .classificacao > span { display:block; width:auto; height:auto; font-size:20px; color:#636466; line-height:20px }
#resultado .classificacao select { width: 100%; height: 46px; font-size: 16px; color: #fff; padding: 10px 15px; background: var(--input-bg-color) url('/resources/img/seta-baixo.png') right center no-repeat; border-radius: 4px; margin-bottom: 0; -moz-appearance: none; background-size: 14px; -webkit-appearance: none; }

#resultado .qtd-passagens { width:auto; height:auto; margin-bottom:20px; overflow:hidden }
#resultado .qtd-passagens h3 { display:block; font-size:25px; color:#636466; line-height:28px; font-weight:bold; margin-bottom:10px; text-transform:uppercase }
#resultado .qtd-passagens h3 span { display:block; height:2px; background:#636466; margin-top:10px }
#resultado .qtd-passagens > span { display:block; width:auto; height:auto; font-size:18px; color:#636466; line-height:20px }

#resultado .valor-total { display: flex; justify-content: center }
#resultado .valor-total p { font-size:18px; color:#636466; line-height:20px }
#resultado .valor-total strong { display:block; font-size:18px; line-height:24px; margin: 0 }
#resultado .valores-table { width:auto; height:auto; min-width: 280px; margin: 20px auto; overflow:hidden; display: grid; grid-template-columns: 61% 39%; padding: 0; text-align: left; }
#resultado .valores-table .total { margin-top: 10px; font-size: 22px }
#resultado .valores-table .valor { text-align: end }

#resultado .pagamento { width:auto; height:auto; margin-bottom:10px; margin-top:40px; overflow:hidden; display: flex; flex-direction: column; align-items: center }
#resultado .pagamento h2 { display:block; font-size:25px; color:#636466; line-height:28px; font-weight:bold; margin-bottom:10px; text-transform:uppercase }
#resultado .pagamento h2 span { display:block; height:2px; background:#636466; margin-top:10px }

#resultado .formas-pagamento { width:auto; height:auto; margin-bottom:20px; overflow:hidden; padding-top: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#resultado .formas-pagamento > div { width: 100%; height:auto; overflow:hidden; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
#resultado .formas-pagamento > div > div { width:auto; height:auto; margin-bottom:10px; overflow:hidden; min-width: 300px; }
#resultado .formas-pagamento > div > div:nth-child(even) { margin-left: 15px; margin-right: 15px }
#resultado .formas-pagamento > div > div:last-child { margin-bottom:0 }
#resultado .formas-pagamento > div > div label { display:block; font-size:16px; color:#636466; line-height:16px; margin-bottom:4px; font-weight:bold; text-align:left }
#resultado .formas-pagamento > div > div input { width: 100%; height: auto; font-size: 16px; color: #fff; padding: 10px 15px; background: var(--input-bg-color); border-radius: 4px }
#resultado .formas-pagamento > div > div select { width: 100%; height: auto; font-size: 16px; color: #fff; padding: 10px 15px; background: var(--input-bg-color); border-radius: 4px }
#resultado .formas-pagamento > div > div input[disabled] { background: #ececec; color: #636466 }

#resultado .formas-pagamento .tipo-pessoa { display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; flex-direction: row; padding-top: 10px;}

#resultado .pagador { width:auto; height:auto; margin-bottom:10px; margin-top:20px; overflow:hidden; display: flex; flex-direction: column !important; align-items: center }
#resultado .pagador h1 { display:block; font-size:17px; color:#636466; line-height:1.3; font-weight:600; margin-bottom:12px; text-wrap:balance }

#resultado .botao-pagamento { width:auto; height:auto; margin:20px 0; overflow:hidden }
#resultado .botao-pagamento > button { display:inline-block; width:auto; height:auto; padding:20px 40px; background:var(--primary-button-color); border-bottom:var(--primary-button-border-color) 3px solid; border-radius:5px; font-size:22px; color:#fff; line-height:22px; font-weight:bold; text-transform:uppercase; text-decoration:none; vertical-align:middle; cursor:pointer }
#resultado .botao-pagamento figure { width:auto; height:auto; text-align:center; margin-top:30px; overflow:hidden }
#resultado .botao-pagamento figure img { max-width:100%; height:auto; vertical-align:middle }
#resultado .botao-pagamento figure figcaption { font-size:16px; color:#636466; line-height:16px; font-weight:bold; margin-top:5px }
#resultado .botao-pagamento figure .bandeiras-icones { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; gap:15px }
#resultado .botao-pagamento figure .bandeiras-icones img { height:40px; width:auto; max-width:none }
#resultado .botao-pagamento .btn-continuar-pagamento { font-size: 18px; line-height: 18px; padding: 15px 30px; }

#resultado .valores { margin-top: 40px; display: flex; align-items: center; justify-content: center; }
#resultado .valores h2 { display:block; font-size:25px; color:#636466; line-height:28px; font-weight:bold; margin-bottom:10px; text-transform:uppercase }
#resultado .valores h2 span { display:block; height:2px; background:#636466; margin-top:10px }

#resultado .link-tpa { display: flex; justify-content: space-between; align-items: center; flex-direction: column; width:auto; height:auto; padding-top:20px; margin-top:20px; border-top:#c7d1c9 2px solid; text-align:center; overflow:hidden }
#resultado .link-tpa a { display: flex; align-items: center; font-size:16px; color:#636466; line-height:18px; margin:0 0 10px 0; text-decoration:none; overflow:hidden; max-width: 410px }
#resultado .link-tpa a img { display:block; float:left; margin-right: 10px }

#resultado .mensagem-obrigatorio { width:auto; height:auto; margin-bottom:20px; overflow:hidden }
#resultado .mensagem-obrigatorio > span { display:block; font-size:16px; color:#636466; line-height:16px; margin-bottom:4px; font-weight:bold; text-align:center }

#resultado .aceitar-termo { flex-direction: row; justify-content: center; align-items: start; font-size: 18px; margin-bottom: 16px }
#resultado .aceitar-termo > a { margin-top: 10px; margin-left: 5px; font-size: 18px; color: #2f7d4f }

/* retorno - sucesso x erro */
#retorno { width:100%; height:auto; text-align:center; overflow:hidden; background-color: #fff; border: 1px solid #ddd; padding: 40px; margin-top: 40px; margin-left: auto; margin-right: auto; }
#retorno h1 { font-size:36px; color:#636466; line-height:50px }
#retorno h2 { font-size:24px; color:#636466; line-height:36px }
#retorno div { width:auto; height:auto; margin-top:25px; overflow:hidden }
#retorno div button { display:inline-block; width:auto; height:auto; padding:8px 16px; background:var(--primary-button-color); border-bottom:var(--primary-button-border-color) 3px solid; border-radius:5px; font-size:14px; color:#fff; line-height:22px; font-weight:bold; text-transform:uppercase; text-decoration:none; vertical-align:middle; cursor:pointer }

#retorno h2.qr-code { display: inline-block; margin-top: 20px; text-transform: uppercase }
#retorno h2.qr-code span { display: block; height: 2px; background: #636466; margin-top: 4px }
#retorno .pix-instrucao { font-size: 16px; color: #636466; line-height: 22px; max-width: 460px; margin: 10px auto 0 }
#retorno img.pix-qr { display: block; width: 260px; max-width: 100%; height: auto; margin: 16px auto 0; image-rendering: pixelated }
#retorno div.pix-copia-cola { display: flex; flex-direction: column; align-items: center; max-width: 460px; margin: 16px auto 0 }
#retorno div.pix-copia-cola label { align-self: flex-start; font-size: 16px; color: #636466; font-weight: bold; margin-bottom: 4px }
#retorno div.pix-copia-cola textarea { width: 100%; min-height: 84px; font-size: 13px; color: #636466; padding: 8px; border: 1px solid #ccc; resize: none; word-break: break-all; margin-bottom: 10px }
#retorno h2.pix-status { font-size: 20px; margin-top: 10px }
#retorno .pix-validade { font-size: 14px; color: #636466; margin-top: 12px }
#retorno .voltar { background-color: #b64553; border-bottom:#9b3b47 3px solid; outline: none !important }

#principal div.botoes { margin-top: 40px }
#principal div.botoes>button { margin-bottom: 10px; margin-left: 10px }

.termo-politica-container {
    width: calc(100% - 80px);
    height: auto;

    display: flex;
    flex-direction: row;
    justify-content: center;

    position: fixed;
    bottom: 40px;
    left: 40px;
    z-index: 999999999;
}

.termo-politica-container .container {
    display: flex;
    flex-direction: column;
    padding: 20px;

    background-color: white;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(179 179 179 / 50%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(179 179 179 / 50%);
    box-shadow: 0px 0px 10px 0px rgb(179 179 179 / 50%);
}

.termo-politica-container .aceitar-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.termo-politica-container .accept {
    width: 130px;
    max-width: 160px;
    padding: 15px 0px;
    background: var(--primary-button-color);
    border-bottom: 3px solid var(--primary-button-border-color);
    border-radius: 5px;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    text-transform: uppercase;
}

.termo-politica-container .view {
    cursor: pointer;
    width: fit-content;
    height: fit-content;
    background-color: transparent;
    text-align: center;
    display: block;
    padding: 0px;
    color: #636466;
    font-size: 14px;
    border: 0px;
    text-transform: none;
    font-weight: 400;
    text-decoration: underline;
    margin-top: 10px;
    margin-bottom: 10px;
}

.termo-politica-container .texto-termo-container {
    font-size: 18px;
}

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

    .termo-politica-container .container {
        flex-direction: row;
    }

    .termo-politica-container .aceitar-container {
        margin-left: 40px;
    }

    .termo-politica-container .view {
        margin-bottom: 0;
    }
}