:root {
    --main-bg-color: #E6E7E8;
    --main-painel-bg-color: #E6E7E8;
    --primary-button-color: #45b653;
    --primary-button-border-color: #3b9b47;
    --cancel-button-color: #b64553;
    --input-bg-color: #fff;
    --input-color: #636466;
}

* { 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 }

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

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

.fundo-erro { color:#d00 !important }
.fundo-sucesso { color:#060 !important }

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

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

[hidden] { visibility: hidden; }

/* topo */
header { position:fixed; width:100%; height:auto; padding:10px 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 figure { width:100%; height:auto; text-align:center }
header figure a { display:inline-block; width:46%; height:auto; margin:0 5px; vertical-align:middle }
header figure img { max-width:100%; height:auto; vertical-align:middle }

header nav { width:100%; height:auto; margin-top:10px; overflow:hidden }
header nav .desktop { display:none }
header nav .mobile { width:auto; height:auto; background:#636466; padding:6px }
header nav .mobile select { width:100%; padding:3px; text-transform:uppercase }

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; }

.loader { width: auto; height: auto; min-width: auto; min-height: auto; overflow: hidden; padding: 10px }

header .login { position: absolute; width: 64px; padding: 10px 0 10px 0; top: -10px; right: -10px; background-color: #45b553; }
header .login a { display: block; text-decoration: none; text-align: center; text-transform: uppercase; font-size: 16px; line-height: 11px; color: #ffffff; }
header .login a:hover { text-decoration: underline; }

/* consulta */
#consulta { width:100%; height:499px; padding:0; display:flex; align-content:center; justify-content:center; align-items:center; }
#consulta .central { padding: 0 }
#consulta h1 { font-size:42px; line-height:42px; color:#fff; font-weight:bold; margin-bottom:20px; text-align:center }
#consulta form { width:100%; 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:#fff; border-radius:4px; text-align:center; text-transform:uppercase; margin-bottom:15px }
#consulta form input[type=text].erro { background:#fff !important; border-bottom:#d00 1px solid !important }
#consulta form input[type=submit], #consulta form button[type=button] { display: block; width:auto; height:auto; margin: auto; border-bottom:#3b9b47 3px solid; font-size:18px; color:#fff; line-height:18px; font-weight:bold; padding:15px 40px; background:#45b653; text-decoration: none; text-transform:uppercase; border-radius:5px; cursor:pointer }
#consulta a.login-portal { width: 200px; height: 60px; border-bottom:#3b9b47 3px solid; font-size:18px; color:#fff; line-height:18px; font-weight:bold; background:#45b653; text-decoration: none; text-transform:uppercase; border-radius:5px; cursor:pointer; display: inline-block; margin: 10px; padding: 20px 40px }
#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:#45b653; 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; height: 180px }
#consulta form .container.nacionalidade { display: flex; flex-direction: row; justify-content: center;}
#consulta button[type=button].pagamento { width: 200px; height: 60px }

#consulta .central,
#sobre .central,
#como-funciona .central,
#tarifa .central,
#postos-pagamento .central,
#contato .central { background-color: transparent; border: none }

/* #consulta form label { width:auto; height:auto; font-size:18px; line-height:110px; font-weight:bold; padding:35px 90px; text-transform:uppercase; border-radius:5px; cursor:pointer } */

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

/* sobre */
#sobre { width:100%; height:auto; padding:20px 0 }
#sobre h1 { font-size:40px; color:#636466; line-height:40px; font-weight:bold; margin-bottom:20px; text-transform:uppercase }
#sobre h1 span { display:block; width:88px; height:4px; background:#636466; margin-top:20px }
#sobre p { font-size:18px; color:#636466; line-height:22px; margin-bottom:35px; white-space: pre-line }
#sobre a { display:inline-block; border-bottom:#3b9b47 3px solid; font-size:18px; color:#fff; line-height:18px; font-weight:bold; padding:20px 40px; background:#45b653; text-transform:uppercase; text-decoration:none; border-radius:5px; cursor:pointer }

/* como funciona */
#como-funciona { width:100%; height:auto; padding:20px 0; background:url(../img/fundo-como-funciona.jpg) center no-repeat; text-align:center }
#como-funciona h1 { font-size:40px; color:#fff; line-height:40px; font-weight:bold; margin-bottom:20px; text-transform:uppercase }
#como-funciona h1 span { display:block; width:88px; height:4px; background:#fff; margin:20px auto 0 auto }
#como-funciona .lista { width:auto; height:auto; overflow:hidden }
#como-funciona .lista > div { width:auto; height:auto; margin-bottom:20px }
#como-funciona .lista > div:last-child { margin-bottom:0 }
#como-funciona .lista > div h2 { font-size:24px; color:#fff; line-height:24px; text-transform:uppercase; font-weight:bold; margin-bottom:10px }
#como-funciona .lista > div p { font-size:16px; color:#fff; line-height:18px }
#como-funciona a { display:inline-block; border-bottom:#006aa5 3px solid; font-size:18px; color:#fff; line-height:20px; font-weight:bold; padding:20px 40px; background:#007cc2; text-transform:uppercase; text-decoration:none; border-radius:5px; margin-top:15px; cursor:pointer }
#como-funciona p { font-size:18px; color:#fff; line-height:22px; margin-bottom:35px }
#como-funciona>div>p { margin-bottom: 0 }

/* tarifa */
#tarifa { width:100%; height:auto; padding:20px 0; background:#e7f9fb; text-align:center }
#tarifa h1 { font-size:40px; color:#636466; line-height:40px; font-weight:bold; margin-bottom:20px; text-transform:uppercase }
#tarifa h1 span { display:block; width:88px; height:4px; background:#636466; margin:20px auto 0 auto }
#tarifa p { font-size:18px; color:#636466; line-height:22px }

#tarifa .valores { width:auto; height:auto; margin-top:20px; overflow:hidden }
#tarifa .valores .cabecalho { display:none }
#tarifa .valores .miolo { width:auto; height:auto; overflow:hidden }
#tarifa .valores .miolo > div { width:auto; height:auto; overflow:hidden; margin-bottom:1px }
#tarifa .valores .miolo > div:last-child { margin-bottom:0 }
#tarifa .valores .miolo > div span { display:block; width:auto; height:auto; padding:8px; background:#fff }
#tarifa .valores .miolo > div span.veiculo { font-size:18px; line-height:20px; font-weight:bold }
#tarifa .valores .miolo > div span.ufrm { font-size:18px; line-height:20px; padding:0 }
#tarifa .valores .miolo > div span.valor { font-size:18px; line-height:20px }
#tarifa .valores .miolo > div span.ufrm:before { content:'UFRM: ' }

/* postos de pagamento */
#postos-pagamento { width:100%; height:auto; padding:20px 0; background:#007cc2; text-align:center }
#postos-pagamento { -webkit-box-shadow:inset 0px 0px 100px 10px rgba(0,0,0,0.1); -moz-box-shadow:inset 0px 0px 100px 10px rgba(0,0,0,0.1); box-shadow:inset 0px 0px 100px 10px rgba(0,0,0,0.1) }
#postos-pagamento h1 { font-size:40px; color:#fff; line-height:40px; font-weight:bold; margin-bottom:20px; text-transform:uppercase }
#postos-pagamento h1 span { display:block; width:88px; height:4px; background:#fff; margin:20px auto 0 auto }
#postos-pagamento h2 { font-size:24px; color:#fff; line-height:24px; font-weight:bold; margin-top: 30px; text-transform:uppercase }
#postos-pagamento h2 span { display:block; width:88px; height:4px; background:#fff; margin:20px auto 0 auto }
#postos-pagamento nav { width:auto; height:auto; overflow:hidden }
#postos-pagamento nav a { display:inline-block; font-size:13.5px; color:#fff; line-height:13.5px; padding:8px; background:#007cc2; border:#fff 1px solid; border-radius:5px; text-decoration:none; text-transform:uppercase }
#postos-pagamento nav a:hover,
#postos-pagamento nav a.ativo { background:#fff; color:#007cc2; border:#fff 1px solid }

#postos-pagamento .lista { width:auto; height:auto; margin-top:20px; overflow:hidden }
#postos-pagamento .lista > p { font-size:14px; color:#fff; line-height:16px }
#postos-pagamento .lista > div { display:inline-block; width:100%; height:auto; margin-bottom:15px }
#postos-pagamento .lista > div:last-child { margin-bottom:0 }
#postos-pagamento .lista > div p.titulo { font-size:18px; line-height:18px; color:#fff; font-weight:bold; margin-bottom:2px }
#postos-pagamento .lista > div p.endereco { font-size:16px; line-height:20px; color:#fff }
#postos-pagamento .lista > div .pagamento { width:auto; height:auto; margin-top:5px; text-align:center }
#postos-pagamento .lista > div .pagamento img { margin:0 2px; vertical-align:middle }
#postos-pagamento .aplicativos { display: flex; justify-content: center; align-items: center; flex-direction: column }
#postos-pagamento .pagamentos-automatico { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 15px }
#postos-pagamento .pagamentos-automatico img { margin-left: 10px; margin-right: 10px }
#postos-pagamento .pagamentos-automatico .conect-car { margin-bottom: 20px; height: 38px }
#postos-pagamento .pagamentos-automatico .sem-parar { margin-bottom: 20px; height: 38px }
#postos-pagamento .pagamentos-automatico .veloe { margin-bottom: 20px; height: 50px }
#postos-pagamento .pagamentos-automatico .taggy { margin-bottom: 22px; height: 54px }

/* contato */
#contato { width:100%; height:auto; padding:20px 0; background:#e8f5e9; text-align:center }
#contato h1 { font-size:40px; color:#636466; line-height:40px; font-weight:bold; margin-bottom:20px; text-transform:uppercase }
#contato h1 span { display:block; width:88px; height:4px; background:#636466; margin:20px auto 0 auto }
#contato address { width:100%; height:auto; font-size:18px; /*color:#636466;*/ line-height:20px; font-style:normal }
#contato .telefone { width:100%; height:auto; font-size:24px; /*color:#636466;*/ font-weight:600; margin:10px 0 }
#contato .telefone a { color: #636466; text-decoration: solid; display: flex; align-items: center; justify-content: center; }
#contato p { font-size:16px; line-height:18px }
#contato img#contato-whats { width: 25px; height: auto; margin-right: 10px; margin-top: 4px }

#form-contato { width:auto; height:auto; margin-top:30px; overflow:hidden }
#form-contato input[type=text] { width:100%; height:auto; font-size:16px; color:#fff; padding:10px 15px; background:#007cc2; border-radius:4px; margin-bottom:10px }
#form-contato textarea { width:100%; height:150px; font-size:16px; color:#fff; padding:10px 15px; background:#007cc2; border-radius:4px }
#form-contato .retorno { width:100%; height:auto; font-size:16px; color:#636466; line-height:20px; margin:15px 0 }
#form-contato input[type=submit] { display:inline-block; border-bottom:#3b9b47 3px solid; font-size:18px; color:#fff; line-height:18px; font-weight:bold; padding:15px 40px; background:#45b653; text-transform:uppercase; text-decoration:none; border-radius:5px; cursor:pointer }

#form-contato ::-webkit-input-placeholder { color:#fff; opacity:1 }
#form-contato :-moz-placeholder { color:#fff; opacity:1 }
#form-contato ::-moz-placeholder { color:#fff; opacity:1 }
#form-contato :-ms-input-placeholder { color:#fff; opacity:1 }

/* 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 }

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

/* --- 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 .topo .taxas { background:#f00; padding:8px; border-radius:5px; margin-bottom:15px }
#resultado .topo .taxas p { font-size:15px; color:#fff; line-height:18px; font-weight:bold; text-align:center; text-transform:uppercase }
#resultado .topo .taxas p a { color:#fff }

#resultado .topo .veiculos-brasileiros { width:auto; height:auto; padding:8px; border:#dcdcdc 1px solid; border-radius:5px; text-align:center; margin-top:40px; }
#resultado .topo .veiculos-brasileiros p { font-size:16px; line-height:17px; font-weight:bold; margin-bottom:5px; }
#resultado .topo .veiculos-brasileiros p:first-child { font-size:17px; line-height:20px; font-weight: normal }

/*#resultado .boleto-valor-minimo { width:auto; height:auto; padding:8px; border:#dcdcdc 1px solid; border-radius:5px; text-align:center }*/
#resultado .boleto-valor-minimo { background:#f00; padding:8px; border-radius:5px; margin-bottom:25px }
#resultado .boleto-valor-minimo p { font-size:15px; color:#fff; line-height:18px; font-weight:bold; text-align:center; text-transform:uppercase }

#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:37px; line-height:37px; padding:9px 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 { display: flex; flex-direction: row; flex-wrap: wrap; }
#resultado .campos .qtd-passagens { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 40px; }
#resultado .campos .qtd-passagens { display: flex; flex-direction: column; margin-bottom: 0 }
#resultado .campos .qtd-passagens .circle { height: 30px; width: 30px; margin-bottom: 12px; margin-left: 20px; font-size: 18px }
#resultado .campos .qtd-passagens > span { font-size: 24px; border: 2px solid #36a8bf; border-radius: 24px; padding: 8px 12px; }
#resultado .campos .observacao-taxas { display: flex; flex-direction: column; text-align: center; padding-top: 10px; font-size: 18px;}

#resultado .carregando p { font-size: 21px; }

#resultado .campos .detalhes-taxas { font-size: 18px; text-align: left; max-width: 445px; margin-left: auto; margin-right: auto; width: 100% }
#resultado .campos .detalhes-taxas .veiculo-nao-encontrado { margin-top: 10px; color: #d04c4e; font-weight: bold }
#resultado .campos .renavam-title { text-align: left; padding-left: 0 }
#resultado .campos .renavam-container { padding-left: 0; font-size: 15px; text-align: center; margin-top: 10px }
#resultado .campos .renavam-container p { padding-left: 0; font-size: 15px; text-align: left }
#resultado .campos .renavam-container input { width:100%; height:auto; font-size:16px; padding:8px; border:#ccc 1px solid; background:var(--input-bg-color); color: var(--input-color); text-align:left }

#resultado .campos .renavam-container input::placeholder { color: #cbcbcb }
#resultado .campos .renavam-container button { display:inline-block; width:auto; height:auto; padding:8px 16px; background: #82bf5b; border-bottom: #6ea14d 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; margin-top: 10px }
#resultado .campos .renavam-container button[disabled] { background: #ececec; border-bottom: #bfbfbf 3px solid; color: #bbbbbb }
#resultado .campos .renavam-container.mensagem { display: none }

#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: var(--input-color); padding: 8px; background: var(--input-bg-color) url('/resources/img/seta-baixo-preta.png') right center no-repeat; margin-bottom: 0; -moz-appearance: none; background-size: 14px; -webkit-appearance: none; border:1px solid #ccc }

#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 .separador { width: 100%; display: flex; justify-content: center; margin-top: 30px; margin-bottom: 30px }
#resultado .separador > div { width: 80%; display: block; height: 2px; background: #a1a1a1 }

#resultado .tipo-selecao-taxas { width: 280px; display: inline-table }
#resultado .tipo-selecao-taxas strong { display:block; font-size:18px; line-height:24px; margin-bottom:5px }
#resultado .tipo-selecao-taxas md-radio-group { display: inline-flex }
#resultado .tipo-selecao-taxas md-radio-group md-radio-button { margin-bottom: 0 }
#resultado .tipo-selecao-taxas md-radio-group md-radio-button:first-child { margin-right: 10px }

#resultado .qtd-valor { width:100%; height:auto; overflow:hidden; margin-top: 40px; display: flex; flex-direction: column; align-items: center; }
#resultado .qtd-valor h3 { display:block; font-size:25px; color:#636466; line-height:28px; font-weight:bold; margin-bottom:10px; text-transform:uppercase }
#resultado .qtd-valor h3 span { display:block; height:2px; background:#636466; margin-top:10px }
#resultado .qtd-valor strong { display:block; font-size:18px; line-height:24px; margin-bottom:5px }
#resultado .qtd-valor p { font-size: 18px }
#resultado .qtd-valor p.subtitulo { font-size: 15px }
#resultado .qtd-valor input { width: 140px; height: auto; font-size: 16px; color: var(--input-color); padding: 8px; background: var(--input-bg-color); border: 1px solid #ccc; text-align: center }
#resultado .qtd-valor input[readonly="readonly"] { background-color: #e2e2e2; color: #636466 }
#resultado .qtd-valor .data-saida-picker { margin-left: 12px; margin-right: 12px; }
#resultado .qtd-valor .selecionar-todas-taxas { text-align: left; font-size: 16px }
#resultado .qtd-valor .creditos-adicionais md-radio-group { display: flex; flex-direction: column; font-size: 20px; justify-content: center; margin-top: 10px; align-items: center; }
#resultado .qtd-valor .creditos-adicionais md-radio-button { width: 155px; text-align: left; }
#resultado .qtd-valor .creditos-adicionais md-radio-button:first-child { margin-right: 0 }
#resultado .qtd-valor .creditos-adicionais md-radio-button:last-child { margin-left: 0 }
#resultado .qtd-valor .creditos-adicionais button { display:inline-block; border-bottom:var(--primary-button-border-color) 3px solid; font-size:18px; color:#fff; line-height:18px; font-weight:bold; padding:10px 30px; background:var(--primary-button-color); text-transform:uppercase; text-decoration:none; border-radius:5px; cursor:pointer; margin-top: 10px }
#resultado .qtd-valor .creditos-adicionais button.bt-nao { background-color: #b64553; border-bottom:#9b3b47 3px solid; outline: none !important; }
#resultado .qtd-valor .creditos-adicionais.voltar { display: flex; align-items: center; margin-bottom: 10px }
#resultado .qtd-valor .creditos-adicionais.voltar p { font-size: 16px }
#resultado .qtd-valor .creditos-adicionais.voltar button.bt-nao { font-size: 14px; padding: 6px 12px; margin-bottom: 0; margin-top: 0; margin-left: 10px }
#resultado .qtd-valor button { width: 70px; height: 45px; padding: 10px 20px }
#resultado .qtd-valor .incrementar-creditos { background:#45b653 !important;  border-bottom:3px solid #3b9b47; }
#resultado .qtd-valor .incrementar-creditos[disabled=disabled] { background-color: #757575 !important; border-color: #656565 !important }
#resultado .qtd-valor .diminuir { background-color: #b64553; border-bottom: #9b3b47 3px solid; }
#resultado .qtd-valor .diminuir[disabled=disabled] { background-color: #757575 !important; border-color: #656565 !important }
#resultado .qtd-valor .input-container { display: flex; flex-direction: column; justify-content: center }
#resultado .qtd-valor .input-container input { border-radius: 0 }
#resultado .qtd-valor .input-container button { font-size: 20px; display: flex; justify-content: center; align-items: center; align-content: center; color: white }
#resultado .qtd-valor .input-container button:first-child { border-radius: 5px 0 0 5px }
#resultado .qtd-valor .input-container button:last-child { border-radius: 0 5px 5px 0 }
#resultado .container-datas-creditos-adicionais { display: flex; flex-direction: column; align-items: center; }
#resultado .container-datas-creditos-adicionais .titulo { font-size: 18px; margin-bottom: 6px; text-align: center; max-width: 180px }
#resultado .container-datas-creditos-adicionais .titulo span { margin-top: 2px }
#resultado .container-datas-creditos-adicionais .scroll-datas-selecionadas-creditos-adicionais { max-height: 290px; overflow-y: auto }
#resultado .container-datas-creditos-adicionais .datas-selecionadas-creditos-adicionais { border-spacing: 0 6px; width: 100%; }
#resultado .container-datas-creditos-adicionais .datas-selecionadas-creditos-adicionais tbody tr { font-size: 15px }

#resultado .tabela-taxas { margin-top: 10px; max-width: 360px; display: flex; flex-direction: column; margin-left: auto; margin-right: auto }
#resultado .tabela-taxas strong { display:block; font-size:18px; line-height:24px; margin-bottom:5px }
#resultado .tabela-taxas p { font-size:18px; color:#636466; line-height:20px }
#resultado .tabela-taxas .veiculo-nao-encontrado { margin-top: 5px; color: #d04c4e }
#resultado .tabela-taxas .renavam-title { text-align: left; padding-left: 25px }
#resultado .tabela-taxas .renavam-container { text-align: left; padding-left: 25px }
#resultado .tabela-taxas .renavam-container input { font-size: 16px; color: #636466; text-transform: uppercase; padding: 8px; background: #fff; border: 1px solid #ccc; }
#resultado .tabela-taxas .renavam-container button { display:inline-block; width:auto; height:auto; padding:8px 16px; background:#45b653; border-bottom:#3b9b47 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; margin-top: -4px }
#resultado .tabela-taxas .content { max-height: 360px; overflow: auto; background-color: #cccccc40; border: 1px solid #ccc }
#resultado .tabela-taxas .content md-list-item:nth-child(even) { background-color: #cccccc40 }
#resultado .tabela-taxas input[readonly="readonly"] { background: #e2e2e2; }
#resultado .tabela-taxas button[disabled="disabled"] { background: #d0d0d0; border-bottom: #bfbfbf 3px solid; }

#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 .pagamento md-radio-group { display: flex; flex-direction: row; font-size: 20px; justify-content: center }
#resultado .pagamento md-radio-button { margin-bottom: 8px; }
#resultado .pagamento md-radio-button:last-child { margin-left: 50px; }

#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 { max-width:100%; min-width:100%; font-size:14px; color:#636466; padding:8px; background:#fff; border:1px solid #ccc }
#resultado .formas-pagamento > div > div select { max-width:100%; min-width:100%; font-size:14px; color:#636466; padding:8px; background:#fff; border:1px solid #ccc }
#resultado .formas-pagamento > div > div input[disabled] { background: #ececec; }
#resultado .formas-pagamento .info-transacao-assincrona { font-size: 18px; max-width: 535px; }
#resultado .formas-pagamento .info-transacao-assincrona > a { display: flex; flex-direction: column; align-items: center; align-content: center; width: 100% }
#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:20px; color:#636466; line-height:20px; font-weight:bold; margin-bottom:10px }
#resultado .pagador md-radio-group { display: flex; flex-direction: row; font-size: 20px; justify-content: center }
#resultado .pagador md-radio-button { margin-bottom: 8px; margin-left: 20px; }

#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:#45b653; border-bottom:#3b9b47 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 .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 .recaptcha { width:auto; height:auto; margin-bottom:20px; overflow:hidden; text-align:center; display:block;  }
#resultado .recaptcha > div { width:auto !important; height:auto !important; }

#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 }

#resultado #recaptcha { display: flex; justify-content: center; margin-bottom: 16px; }

/* 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:#45b653; border-bottom:#3b9b47 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.obrigado { background: white; margin-top: 40px; margin-left: auto; margin-right: auto; width: calc(100% - 12px); max-width: 740px; padding: 20px 0 }
#retorno.obrigado > * { margin-bottom: 20px }
#retorno.obrigado button { font-size: 18px; line-height: 18px; padding: 15px 30px; }

#retorno h2.linha-digitavel { display: inline-block; margin-top: 40px; margin-bottom: 10px; text-transform: uppercase }
#retorno h2.linha-digitavel span { display: block; height: 2px; background: #636466; margin-top: 4px }
#retorno input.linha-digitavel { max-width: 100%; min-width: 100%; font-size: 18px; color: #636466; padding: 8px; background: #fff; border: 1px solid #ccc; margin-bottom: 20px }
#retorno h3.linha-digitavel { font-size: 18px; border: 1px solid #ccc; padding: 4px 6px; width: fit-content; margin-left: auto; margin-right: auto; }
#retorno .voltar { background-color: #b64553; border-bottom:#9b3b47 3px solid; outline: none !important }

#principal .bloqueio-arquivo { margin-top: 20px }
#principal h2.enviar-email { display: inline-block; margin-top: 40px; text-transform: uppercase }
#principal h2.enviar-email span { display: block; height: 2px; background: #636466; margin-top: 4px }
#principal h3.enviar-email { margin-top: 14px; font-weight: 600; }
#principal div.enviar-email { margin-top: 0 }
#principal div.enviar-email { display: flex; flex-direction: column; align-items: center }
#principal div.enviar-email>div { width: 98%; height:auto; margin-bottom:10px; margin-top: 10px; overflow:hidden }
#principal div.enviar-email>div:last-child { margin-bottom:0 }
#principal div.enviar-email>div label { display:block; font-size:16px; color:#636466; line-height:16px; margin-bottom:4px; font-weight:bold; text-align:left }
#principal div.enviar-email>div input { max-width:100%; min-width:100%; font-size:14px; color:#636466; padding:8px; background:#fff; border:1px solid #ccc }
#principal div.botoes { margin-top: 40px }
#principal div.botoes>button { margin-bottom: 10px; margin-left: 10px }

md-radio-group.md-default-theme.md-focused:not(:empty) .md-checked .md-container:before, md-radio-group.md-focused:not(:empty) .md-checked .md-container:before { background-color: #45b65342 }
md-radio-group.md-default-theme .md-checked .md-ink-ripple, md-radio-group .md-checked .md-ink-ripple { color: #45b65342 }
md-radio-button.md-default-theme.md-checked .md-off, md-radio-button.md-checked .md-off { border-color: #45b653 }
md-radio-button.md-default-theme .md-on, md-radio-button .md-on { background-color: #45b653 }
md-radio-button .md-label span { font-size: 18px }

md-checkbox.md-default-theme.md-checked .md-ink-ripple, md-checkbox.md-checked .md-ink-ripple { color: #45b653 }
md-checkbox.md-default-theme.md-checked .md-icon, md-checkbox.md-checked .md-icon { background-color: #45b653 }

md-radio-button.md-default-theme[disabled] .md-container .md-on, md-radio-button[disabled] .md-container .md-on, md-radio-group.md-default-theme[disabled] .md-container .md-on, md-radio-group[disabled] .md-container .md-on { background-color: #868686 }


.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;
    }
}

.md-tooltip { font-size: 18px }

md-dialog { max-width: 400px }
md-dialog .md-title { font-size: 25px; color: #636466; font-weight: bold; text-transform: uppercase; border-bottom: 3px solid; display: inline; }
md-dialog .md-dialog-content { padding: 24px }
md-dialog .md-dialog-content-body { font-size: 18px; color: #636466; margin-top: 24px }
md-dialog md-dialog-actions { justify-content: center; padding-bottom: 24px }
md-dialog md-dialog-actions .md-button { display:inline-block; width:auto; height:auto; padding:10px 30px; background:#45b653; border-bottom:#3b9b47 3px solid; border-radius:5px; font-size:22px; color:#fff !important; line-height:22px; font-weight:bold; text-transform:uppercase; margin: 0 }
md-dialog .md-button.md-default-theme:not([disabled]):hover,
md-dialog .md-button:not([disabled]):hover,
md-dialog .md-button.md-default-theme:not([disabled]).md-focused,
md-dialog .md-button:not([disabled]).md-focused { background:#45b653 }

.datepicker-inline { width: 296px; }
.datepicker table tr td { height: 40px; width: 40px; min-height: 40px; min-width: 40px; text-align: center; padding: 0; border: none; color: rgba(0,0,0,0.87); transition: background-color,color .4s cubic-bezier(.25,.8,.25,1); border-radius: 50%; font-size: 15px; }
.datepicker table tr td.active,
.datepicker table tr td span.active.active { background-color: var(--primary-button-color) !important; border-color: var(--primary-button-color) !important; }
.datepicker table tr td.new { color: rgba(0,0,0,0.70) }
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { color: rgba(0,0,0,0.38) }
.datepicker.datepicker-inline td, .datepicker.datepicker-inline th, .datepicker.dropdown-menu td, .datepicker.dropdown-menu th { padding: 0 }