@charset "utf-8";

#produtos { float: left; width: 100%; margin: 11px 0;}
#produtos .tab .lado1 { float: left; width: 40%;}
#produtos .tab .lado2 { float: right; width: 58%;}
#produtos .tab .grafico { float: left; width: 100%; padding: 12px; margin: 11px 0; background-color: rgb(250 250 250 / 80%);}
#produtos .tab .indisponivel { float: left; width: 100%; text-align: center; color: rgb(90 90 90);}
#produtos .tab .nome { float: left; width: 100%; padding: 11px 0; border-bottom: 1px solid rgb(90 90 90 / 20%); text-transform: uppercase; font-weight: bold; font-size: 1.3em; line-height: 1;}
#produtos .tab .nome.mobi { display: none;}
#produtos .tab .nome.desk { display: block;}
#produtos .tab .resumo { float: left; width: 100%; padding: 8px 0; border-bottom: 1px solid rgb(90 90 90 / 30%); font-size: 1em;}
#produtos .tab .detalhes { float: left; width: 100%;}

#produtos .tab .botao { float: left; margin: 10px 0 0; padding: 8px 10px; text-transform: uppercase; font-weight: bold; color: rgb(250 250 250) !important;}
#produtos .tab .botao.s-contratar { background-color: #a17945;}
#produtos .tab .botao.s-contratar:hover { background-color: #82643D;}
#produtos .tab .botao.s-renovar { background-color: rgb(199 122 8 / 90%);}
#produtos .tab .botao.s-renovar:hover { background-color: rgb(199 122 8);}
#produtos .tab .botao.s-detalhes { background-color: rgb(175 75 79 / 90%);}
#produtos .tab .botao.s-detalhes:hover { background-color: rgb(175 75 79);}
#produtos .tab .botao.s-continuar { background-color: rgb(8 113 199 / 90%);}
#produtos .tab .botao.s-continuar:hover { background-color: rgb(8 113 199);}
#produtos .tab .botao.s-entrar { background-color: #02323f;}
#produtos .tab .botao.s-entrar:hover { background-color: #024759;}

#contratar { float: left; width: 100%; margin: 11px 0;}
#contratar .produto { float: left; width: 90%; padding: 12px 5% 10px; margin: 0 0 21px; outline: 1px solid rgb(7 168 204 / 30%); background-color: rgb(7 168 204 / 10%); text-align: center;}
#contratar .produto h2 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; font-size: 1em;}
#contratar .produto h3 { float: left; width: 100%; font-size: 0.9em; opacity: 0.8;}
#contratar .informacao { float: left; width: 100%; margin: 21px 0 0; text-align: center;}
#contratar .informacao h2 { float: left; width: 100%; font-weight: bold; font-size: 1.3em;}
#contratar .balao { float: left; width: 100%; padding: 15px 10px 13px; margin: 5px 0 0; outline: 1px solid rgb(90 90 90 / 30%); background-color: rgb(90 90 90 / 10%);}
#contratar .form { float: left; width: 100%;}
#contratar .form .c1 { float: left; width: 100%; margin: 11px 0 0;}
#contratar .form .nomecampo { float: left; width: 100%; margin: 0 0 2px;}
#contratar .form .nomecampo em { font-style: normal; color: rgb(200 0 0);}
#contratar .form .campo { float: left; width: 100%; height: 50px; padding: 0 10px; outline: 1px solid rgb(90 90 90 / 50%); color: rgb(5 5 5);}
#contratar .form .campo:focus { outline: 1px solid rgb(120 163 219); -webkit-box-shadow: 0 0 15px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 0 15px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 15px 0 rgb(0 0 0 / 20%);}
#contratar .form .marque { display: flex; flex-wrap: wrap; justify-content: center; margin: 21px 0 0;}
#contratar .form .marque .opcao { float: left; margin: 5px;}
#contratar .form .marque .opcao .radio { display: none;}

#contratar .form .marque .opcao .radio + label { float: left; width: 320px; max-width: 100%; padding: 17px 50px 15px 12px; outline: 1px solid rgb(90 90 90 / 30%); background-color: rgb(90 90 90 / 2%); background-image: url('../imagens/marque-vazio.png'); background-position: 98% 10px; background-repeat: no-repeat; cursor: pointer;}
#contratar .form .marque .opcao .radio + label h2 { float: left; width: 100%; font-size: 1em;}
#contratar .form .marque .opcao .radio + label h3 { float: left; width: 100%; margin: 5px 0; text-transform: uppercase; font-weight: bold; font-size: 1.2em;}
#contratar .form .marque .opcao .radio + label h4 { float: left; width: 100%; font-size: 1em; opacity: 0.8;}
#contratar .form .marque .opcao .radio + label h5 { float: left; width: 100%; padding: 5px; margin: 5px 0 0; outline: 1px solid #937752; background-color: #a6957b; font-size: 1em; color: rgb(255 255 255) !important;}
#contratar .form .marque .opcao .radio:checked + label { outline: 1px solid #a6957b; background-color: #a6957ba3; background-image: url('../imagens/marque-ok.png');}

#contratar .form .file { float: left; width: 100%;}
#contratar .form .enviar { float: left; width: 100%;}
#contratar .form .enviar .submit { padding: 8px 18px; background-color: rgb(37 131 79); text-transform: uppercase; font-weight: bold; font-size: 1em; color: rgb(250 250 250); cursor: pointer;}
#contratar .form .enviar .submit:hover { background-color: rgb(28 105 63);}
#contratar .form .avancar { float: left; width: 100%; margin: 21px 0; text-align: center;}
#contratar .form .avancar .submit { padding: 12px 35px; background-color: #a6957b; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: rgb(250 250 250); cursor: pointer;}
#contratar .form .avancar .submit:hover { background-color: #937852;}
#contratar .instrucoes { float: left; width: 100%; margin: 11px 0 0;}
#contratar .instrucoes .tab { float: left; width: 100%; margin: 11px 0 0; outline: 1px solid rgb(90 90 90 / 30%); position: relative; overflow: hidden;}
#contratar .instrucoes .tab .nun { position: absolute; width: 40px; top: 20px; left: 10px; padding: 20px 0; outline: 1px solid rgb(90 90 90 / 30%); background-color: rgb(90 90 90 / 20%); text-align: center; font-weight: bold; font-style: normal; opacity: 0.8; line-height: 0;}
#contratar .instrucoes .tab .inf { float: left; width: 100%; padding: 17px 10px 17px 60px;}
#contratar .instrucoes .tab .leia { float: left; width: 100%; padding: 2px 0; font-weight: normal;}
#contratar .instrucoes .tab .leia i { font-style: normal; opacity: 0.8;}
#contratar .instrucoes .tab .imprimir { float: left; padding: 5px 20px; margin: 5px 0 0; background-color: rgb(90 90 90 / 20%);}
#contratar .instrucoes .tab .imprimir:hover { background-color: rgb(90 90 90 / 40%);}
#contratar .instrucoes .tab .como { float: left; width: 100%; margin: 21px 0;}
#contratar .instrucoes .tab .como .co1 { float: left; width: 100%; color: rgb(11 142 175);}
#contratar .instrucoes .tab .como .co1:hover { text-decoration: underline;}
#contratar .instrucoes .tab .como .co2 { float: left; width: 100%; margin: 2px 0 0; background-color: rgb(90 90 90 / 10%); outline: 1px solid rgb(90 90 90 / 20%); outline-offset: -1px;}
#contratar .instrucoes .tab .como .co2 b { float: left; width: 100%; font-weight: normal; font-size: 1.1em;}
#contratar .instrucoes .tab .como .co2 cor { padding: 2px 8px 0; background-color: rgb(233 255 91); font-weight: bold; color: rgb(5 5 5);}
#contratar .instrucoes .tab .como .co2 em { float: left; width: 100%; padding: 2px 10px;}
#contratar .instrucoes .tab .como .co2 i { float: left; width: 100%; padding: 15px; text-align: center; font-style: normal; font-size: 0.9em;}
#contratar .instrucoes .tab .como .agrupa { float: left; width: 100%; padding: 15px; border-bottom: 1px solid rgb(90 90 90 / 40%);}
#contratar .instrucoes .tab .formas { float: left; width: 100%; padding: 10px; outline: 1px solid rgb(90 90 90); font-size: 1em; color: rgb(5 5 5);}
#contratar .instrucoes .tab .ativos { display: flex; justify-content: space-between; float: left; width: 100%; margin: 5px 0 0;}
#contratar .instrucoes .tab .ativos .atv { width: 100%; padding: 10px 0; margin: 0 1px; background-color: rgb(250 250 250); text-align: center; font-weight: bold; color: rgb(5 5 5);}
#contratar .instrucoes .tab .ativos .atv.ativo { background-color: rgb(113 131 212) !important; color: rgb(250 250 250);}
#contratar .instrucoes .tab .ativos .atv:hover { background-color: rgb(90 90 90); color: rgb(250 250 250);}
#contratar .instrucoes .tab .valor { float: left; width: 100%; padding: 11px 0; margin: 21px 0 11px; background-color: rgb(90 90 90 / 10%); outline: 1px solid rgb(90 90 90 / 20%); outline-offset: -1px;}
#contratar .instrucoes .tab .valor em { float: left; width: 100%; text-align: center; font-style: normal; font-size: 0.9em;}
#contratar .instrucoes .tab .valor b { float: left; width: 100%; margin: 5px 0 0; text-align: center; font-size: 1.1em;}
#contratar .instrucoes .tab .valor b i { font-weight: normal; font-style: normal; font-size: 0.9em;}
#contratar .instrucoes .tab .copiaecola { float: left; width: 100%;}
#contratar .instrucoes .tab .copiaecola .etr { float: left; width: 100%;}
#contratar .instrucoes .tab .copiaecola .cntd { float: left; width: 100%; height: 40px; outline: 1px solid rgb(90 90 90 / 20%); text-align: center; font-weight: bold; font-size: 1.2em;}
#contratar .instrucoes .tab .copiaecola .copiar { float: left; width: 100%; margin: 11px 0 0; text-align: center;}
#contratar .instrucoes .tab .copiaecola .copiar:hover { color: rgb(11 142 175);}
#contratar .expirado { float: left; width: 100%;}
#contratar .expirado .olhaso { float: left; width: 100%; margin: 11px 0 15px;}
#contratar .expirado .olhaso h2 { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 1.2em;}
#contratar .expirado .olhaso h3 { float: left; width: 100%; text-align: center; font-size: 1em;}
#contratar .expirado .renovar { float: left; width: 49%; margin: 0 0 5px; padding: 30px 20px 28px; background-color: darkolivegreen; text-transform: uppercase; text-align: center; font-weight: bold; color: rgb(250 250 250) !important; line-height: 0;}
#contratar .expirado .renovar:hover { background-color: rgb(68 87 35);}
#contratar .expirado .cancelar { float: right; width: 49%;}
#contratar .expirado .cancelar .submit { float: left; width: 100%; margin: 0 0 5px; padding: 30px 20px 28px; background-color: brown; text-transform: uppercase; font-weight: bold; font-size: 1em; color: rgb(250 250 250); line-height: 0; cursor: pointer;}
#contratar .expirado .cancelar .submit:hover { background-color: rgb(134 31 31);}

@media only screen and (max-width: 1000px){
  #produtos .tab .lado1 { width: 100%;}
  #produtos .tab .lado2 { width: 100%;}

  #produtos .tab .nome.mobi { display: block;}
  #produtos .tab .nome.desk { display: none;}
}
@media only screen and (max-width: 800px){
  #contratar .expirado .renovar { width: 100%;}
  #contratar .expirado .cancelar {  width: 100%;}
}