@charset "utf-8";

#app { float: left; width: 100%; position: relative;}
#app .esquerda { position: absolute; width: 230px; height: 100%; top: 0; left: 0; background-color: rgb(25 25 25);}
#app .direita { float: left; width: 100%; height: 0; padding-left: 230px; overflow: auto;}
#app .conteudo { float: left; width: 96%; padding: 20px 2%;}

#app .pwa { padding: 12px 0 8px; margin: 0 0 -7px; background-color: rgb(149 181 213 / 43%); text-transform: uppercase; line-height: 1;}

#app .nomeacao { float: left; width: 100%;}
#app .nomeacao h2 { float: left; width: 100%; padding: 12px 0 8px; margin: 10px 0 0; background-color: rgb(90 90 90 / 20%); outline: 1px solid rgb(90 90 90 / 20%); outline-offset: -1px; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 1em; line-height: 1; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px;}
#app .nomeacao h3 { float: left; width: 100%; padding: 5px 0; font-weight: bold; font-size: 1.4em;}
#app .nomeacao h4 { float: left; width: 100%; padding: 12px 0 8px; margin: 20px 0 0; background-color: rgb(90 90 90 / 20%); outline: 1px solid rgb(90 90 90 / 20%); outline-offset: -1px; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 1em; line-height: 1; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px;}
#app .nomeacao h5 { float: left; width: 100%; padding: 5px 0 4px; margin: 10px 0 0; background-color: rgb(90 90 90 / 20%); outline: 1px solid rgb(90 90 90 / 20%); outline-offset: -1px; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 1em; line-height: 1; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px;}

#app .menu { float: left; width: 100%;}
#app .menu a { float: left; width: 100%; padding-top: 20px; padding-bottom: 20px; padding-left: 40px; border-bottom: 1px solid rgb(250 250 250 / 20%); background-position: 5px 50%; background-repeat: no-repeat; position: relative; text-transform: uppercase; font-weight: bold; font-size: 0.95em; color: rgb(200 200 200) !important; line-height: 0;}
#app .menu a:hover { background-color: rgb(90 90 90 / 40%);}
#app .menu a.ativo { background-color: rgb(90 90 90 / 40%);}
#app .menu a.dashboard { background-image: url('../imagens/menu-dashboard.png');}
#app .menu a.perfil { background-image: url('../imagens/menu-perfil.png');}
#app .menu a.servicos { background-image: url('../imagens/menu-servicos.png');}
#app .menu a.recompensa { background-image: url('../imagens/menu-recompensa.png');}
#app .menu a.atendimento { background-image: url('../imagens/menu-atendimento.png');}
#app .menu a.shop { background-image: url('../imagens/menu-shop.png');}
#app .menu a.seguranca { background-image: url('../imagens/menu-seguranca.png');}
#app .menu em.pontinho { position: absolute; width: 10px; height: 10px; top: 50%; right: 10px; margin: -5px 0 0; background-color: rgb(200 200 200);}

#app .navpags a { padding: 30px 0 28px; background-repeat: no-repeat; background-position: 8px 50%; background-repeat: no-repeat; font-size: 0.9em; line-height: 0;}
#app .navpags a.b_servicos { padding-left: 20px; margin: 0 5px; background-image: url('../imagens/neutro-dashboard-servicos.png?v7');}
#app .navpags a.b_portfolio { padding-left: 20px; background-image: url('../imagens/neutro-dashboard-portfolio.png?v5');}
#app .navpags a.b_mundi { padding-left: 20px; background-image: url('../imagens/neutro-dashboard-mundi.png?v5');}
#app .navpags a.b_mundi.ativo em { display: none;}
#app .navpags a.b_conquistas { margin: 0 5px;}
#app .navpags a.ativo em { position: absolute; width: 20px; height: 15px; bottom: -15px; left: 50%; margin: 0 -10px 0 0; background-position: 50%; background-repeat: no-repeat;}

#app .copyright { float: left; width: 100%; padding: 10px 0; border-top: 1px solid rgb(90 90 90 / 40%);}
#app .copyright h4 { float: left; width: 100%; text-align: center; opacity: 0.8;}

#app .nenhum { float: left; width: 100%;}
#app .nenhum h2 { float: left; width: 100%; margin: 21px 0; text-align: center; font-size: 1em;}
#app .nenhum h3 { float: left; width: 100%; margin: 11px 0; font-size: 1em;}
#app .nenhum a { color: rgb(18 162 199) !important;}
#app .nenhum a:hover { text-decoration: underline;}

#app .bloco { float: left; width: 100%; padding: 12px 10px; margin: 5px 0; outline: 1px solid rgb(90 90 90 / 20%); outline-offset: -1px; position: relative;}
#app .bloco.m500 { margin: 5px 0 0;}

#app .interacao { float: left; width: 100%; margin: 11px 0;}
#app .interacao .c1 { float: left; width: 100%; margin: 10px 0; padding: 0 10px;}
#app .interacao .c2 { float: left; width: 50%; margin: 10px 0; padding: 0 10px;}
#app .interacao .c3 { float: left; width: 33.3333%; margin: 10px 0; padding: 0 10px;}
#app .interacao .c100 { float: left; width: 98%; margin: 10px 1%;}
#app .interacao .c101 { float: left; width: 100%; padding: 0 10px;}
#app .interacao .nomecampo { float: left; width: 100%; margin: 0 0 2px;}
#app .interacao .nomecampo em { font-style: normal; color: rgb(215 60 60);}
#app .interacao .campo { float: left; width: 100%; height: 40px; padding: 0 10px; outline: 1px solid rgb(90 90 90 / 50%);}
#app .interacao .campo:focus { outline: 1px solid rgb(55 171 200 / 50%) !important; -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);}
#app .interacao .campo::placeholder { color: #d9d9d9;}
#app .interacao .submit { float: left; padding: 13px 15px 12px; background-color: #a6957b; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: #FFFFFF; cursor: pointer;}
#app .interacao .submit:hover { background-color: #937852;}
#app .interacao .btremo { padding: 8px 15px 7px; background-color: #5b6d78; font-size: 1.1em; color: #FFFFFF; cursor: pointer;}
#app .interacao .btremo:hover { background-color: #3C4951;}
#app .interacao .btdes { background-color: rgb(90 90 90 / 50%) !important; color: rgb(90 90 90) !important; cursor: default !important;}
#app .interacao .btdes:hover { background-color: rgb(90 90 90 / 50%) !important;}

#app .inteflex { display: flex; margin: 0;}
#app .inteflex .cf { float: left; width: 100%; margin: 0 2px;}
#app .inteflex .btqua { float: left; height: 40px; padding: 0 8px; margin: 0 0 0 5px; background-color: #937752; font-weight: bold; font-size: 1em; color: #FFFFFF; cursor: pointer;}
#app .inteflex .btqua:hover { background-color: #a6957b;}
#app .inteflex .btremo { height: 40px; padding: 0 8px; margin: 0 0 0 5px}

#app .pessoasja { float: left; width: 280px; padding: 0 0 0 45px; margin: 6px 0 0 15px;}
#app .pessoasja .foto { top: 2px; left: 0;}

#app .natural { float: left;}
#app .natural .campo { float: left; height: 30px; padding: 0 10px; background-color: transparent; outline: 1px solid rgb(90 90 90 / 80%); outline-offset: -1px; font-size: 1em;}
#app .natural .campo.t100 { width: 100px;}
#app .natural .campo.t150 { width: 150px;}
#app .natural .campo:focus { outline: 1px solid rgb(55 171 200 / 50%) !important; -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);}
#app .natural .ok { float: left; height: 30px; padding: 2px 5px 0; margin: 0 0 0 5px; background-color: #937852; font-weight: bold; font-size: 0.9em; color: #FFFFFF; line-height: 1; cursor: pointer;}
#app .natural .ok:hover { background-color: #a6957b;}

#app .alerta { float: left; width: 90%; padding: 11px 5%; margin: 0 0 11px; background-color: rgb(204 201 7 / 45%); text-align: center;}
#app .alerta h2 { float: left; width: 100%; font-weight: bold; font-size: 1.3em;}

#app .paginacao { float: left; width: 100%; margin: 3px 0; position: relative;}
#app .paginacao .nun { float: left; padding: 22px 15px; margin: 0 5px 5px 0; background-color: rgb(143 132 109); font-weight: bold; font-size: 1em; color: rgb(250 250 250); line-height: 0;}
#app .paginacao .nun.pointer:hover { background-color: rgb(126 109 74);}
#app .paginacao .nun.ativo { background-color: #3C4951;}
#app .paginacao .nun.pontos { background-color: rgb(90 90 90 / 50%); color: rgb(90 90 90);}

#contrapop { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; background-color: rgb(0 0 0 / 80%);}
#contrapop .centro { margin: 0 auto; width: 1000px; max-width: 96%;}
#contrapop .epco { float: left; width: 100%; margin: 65px 0 0; position: relative;}
#contrapop .rolagem { float: left; width: 100%; padding: 0 5px; overflow: auto;}
#contrapop .pfechar { position: absolute; width: 30px; top: 7px; right: 7px; z-index: 5; padding: 15px 0; background-color: rgb(200 0 0); text-align: center; font-weight: bold; color: rgb(250 250 250); line-height: 0;}
#contrapop .pfechar:hover { background-color: rgb(170 0 0);}

#app .operacao { float: left; width: 100%;}
#app .operacao .filtro { float: left; width: 100%; margin: 4px 0; position: relative; text-align: center;}
#app .operacao .filtro .campo { padding: 0 2px; margin: 1px 0; border: 1px solid rgb(90 90 90); font-size: 1em;}
#app .operacao .listar { float: left; width: 100%; position: relative;}
#app .operacao .ajax { float: left; width: 100%; position: relative;}
#app .operacao .sinal { float: left; width: 100%; margin: 4px 0; outline: 1px solid rgb(90 90 90 / 50%);}
#app .operacao .sinal.aguardando .chave { background-color: rgb(90 90 90 / 10%);}
#app .operacao .sinal.andamento .chave { background-color: rgb(0 89 255 / 20%);}
#app .operacao .sinal.concluída .chave { background-color: rgb(0 255 42 / 20%);}
#app .operacao .sinal.stopada .chave { background-color: rgb(255 0 0 / 20%);}
#app .operacao .sinal.encerrada .chave { background-color: rgb(234 0 255 / 20%);}
#app .operacao .chave { float: left; width: 100%; padding: 10px; background-color: rgb(90 90 90 / 10%); -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px;}
#app .operacao .chave strong { color: #005281;}
#app .operacao .chave em { font-style: normal;}
#app .operacao .porta { float: left; width: 100%;}
#app .operacao .item { float: left; width: 100%;}
#app .operacao .item .lado { float: left; padding: 10px;}
#app .operacao .item .lado.l100 { width: 100%;}
#app .operacao .item .lado.l75 { width: 75%;}
#app .operacao .item .lado.l25 { width: 25%;}
#app .operacao .item .infor { float: left; width: 100%; padding: 8px; margin: 1px 0; outline: 1px solid rgb(90 90 90 / 30%); outline-offset: -1px;}
#app .operacao .item .infor em { float: left; margin: 0 5px 0 0; font-style: normal;}
#app .operacao .item .infor b { float: left;}
#app .operacao .item .infor b .subin { float: left; padding: 0 5px; margin: 0 2px 2px 0; background-color: rgb(77 129 255 / 25%);}
#app .operacao .item .infor b .subin bn { font-weight: normal;}
#app .operacao .item .imagens { float: left; width: 100%; padding: 10px; outline: 1px solid rgb(90 90 90 / 30%); outline-offset: -1px;}
#app .operacao .item .imagens .itg { float: left; margin: 1%;}
#app .operacao .item .imagens .unico { width: 98%;}
#app .operacao .item .imagens .multi { width: 48%;}
#app .operacao .item .imagens .img { float: left; width: 100%;}
#app .operacao .item .imagens .tudo { float: left; width: 100%; padding: 10px 0; margin: 10px 0 0; text-align: center;}
#app .operacao .item .imagens .tudo:hover { text-decoration: underline;}
#app .operacao .item .imagens .divisao { float: left; width: 100%; height: 1px;}

@media only screen and (min-width: 1000px){
  #app .pwa { display: none !important;}
}
@media only screen and (max-width: 1000px){
  #app .operacao .item .lado.l75 { width: 100%;}
  #app .operacao .item .lado.l25 { width: 100%;}
}
@media only screen and (max-width: 800px){
  #app .interacao .c2 { width: 100%;}
  #app .interacao .c3 { width: 100%;}
}
@media only screen and (max-width: 600px){
  #app .bloco { padding: 8px;}
  #app .inteflex { display: block;}
  #app .inteflex .cf { margin: 1px 0;}
  #app .inteflex .btqua { margin: 1px 0 0;}
}
@media only screen and (max-width: 600px){
  #app .navpags a { background-position: 3px 50%;}
  #app .navpags a.b_servicos { background-size: 20px;}
  #app .navpags a.b_resumo { background-size: 20px;}
  #app .navpags a.b_portfolio { background-size: 20px;}
}