@charset "utf-8";

#painel { float: left; width: 100%;}
#painel .baliza { float: left; width: 96%; min-height: 400px; padding: 21px 2%; margin: 0 0 200px;}
#painel .carregando { position: fixed; left: auto; right: 0;}

#painel .cadastrar { float: left; width: 100%; position: relative;}
#painel .listar { float: left; width: 100%; position: relative;}
#painel .gerenciar { float: left; width: 100%; position: relative;}

#painel .esquerda { display: none; position: absolute; top: 0; left: 0; z-index: 10; overflow: auto;}
#painel .direita { display: none; float: right; position: relative; z-index: 5; overflow: auto;}

#painel .menu { float: left; width: 100%;}
#painel .menu .link { float: left; width: 100%; padding: 25px 0; border-bottom: 1px solid rgb(90 90 90 / 30%); text-transform: uppercase; font-weight: bold; color: rgb(204 204 204); line-height: 0; position: relative;}
#painel .menu .link em { position: absolute; width: 30px; height: 30px; top: 50%; left: 10px; margin: -15px 0 0; background-position: 50%; background-repeat: no-repeat;}
#painel .menu .link b { float: left; margin: 0 0 0 50px;}
#painel .menu .link:hover { background-color: rgb(90 90 90 / 30%);}
#painel .menu .link.ativo { background-color: rgb(90 90 90 / 30%);}

#painel .referente { float: left; width: 100%;}
#painel .referente h2 { float: left; width: 100%; padding: 15px 10px 13px; background-color: rgb(90 90 90 / 20%); font-size: 1.2em; line-height: 0;}
#painel .referente h3 { float: left; width: 100%; padding: 15px 10px 13px; background-color: rgb(90 90 90 / 20%); font-size: 1em; line-height: 0;}
#painel .referente h4 { float: left; width: 100%; padding: 15px 10px 13px; background-color: rgb(90 90 90 / 20%); text-align: center; font-size: 1em; line-height: 0;}
#painel .referente h5 { float: left; width: 100%; padding: 15px 10px 13px; text-align: center; font-size: 1em; line-height: 0;}
#painel .referente button { color: rgb(30 120 180);}
#painel .referente button:hover { text-decoration: underline;}

#painel .novo { float: left; width: 100%; padding: 16px 0 14px; margin: 5px 0 0; background-color: rgb(0 150 130); background-image: url('../../../imagens/painel/geral/preto-novo.png'); background-position: 10px 50%; background-repeat: no-repeat; text-transform: uppercase; font-weight: bold; font-size: 1.1em; text-align: center; color: rgb(250 250 250) !important; line-height: 0;}
#painel .novo:hover { background-color: rgb(0 170 100);}

#painel .mapa { float: left; width: 100%; padding: 5px 0; margin: 5px 0 0; outline: 1px solid rgb(90 90 90 / 30%); outline-offset: -1px;}
#painel .mapa *::-webkit-scrollbar { width: 0; height: 0;}
#painel .mapa .box { float: left; width: 100%; overflow: auto; font-size: 0.9em; line-height: 1.1; display: -webkit-box;}
#painel .mapa .box a { float: left;}
#painel .mapa .box a:hover { text-decoration: underline;}
#painel .mapa .box em { float: left; padding: 0 7px; font-style: normal;}
#painel .mapa .box button { float: left;}
#painel .mapa .box button:hover { text-decoration: underline;}
#painel .mapa .mar { margin: 0 0 0 10px;}

#painel .chamadas { float: left; width: 100%; margin: 5px 0 0; text-align: center;}
#painel .chamadas .button { padding: 18px 8px 16px; margin: 2px; background-color: rgb(55 75 100); text-transform: uppercase; text-align: center; font-weight: bold; font-size: 0.9em; color: rgb(250 250 250);}
#painel .chamadas .button:hover { background-color: rgb(30 120 180);}
#painel .chamadas .button.ativo { background-color: rgb(30 120 180);}

#painel .count { float: left; width: 100%; padding: 12px 0; margin: 5px 0; outline: 1px solid rgb(90 90 90 / 20%); outline-offset: -1px; background-color: rgb(90 90 90 / 10%); text-align: center; font-size: 1em; line-height: 0;}
#painel .count b { font-weight: normal;}

#painel .table { float: left; width: 100%; margin: 21px 0 0; overflow: auto;}
#painel .table h2 { float: left; width: 100%; padding: 12px 0 11px; margin: 0 0 3px; background-color: rgb(90 90 90 / 30%); text-transform: uppercase; font-weight: bold; font-size: 1em; text-align: center; line-height: 0; -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;}
#painel .table table { width: 100%; border-collapse: collapse;}
#painel .table table th { min-width: 120px; padding: 5px 10px; position: relative; text-align: left;}
#painel .table table td { min-width: 120px; padding: 5px 10px; position: relative;}
#painel .table table td .form { float: left;}
#painel .table table td .form .campo { float: left; height: 27px; outline: 1px solid rgb(90 90 90 / 90%);}
#painel .table table td .form .campo.t100 { width: 100px; text-align: center;}
#painel .table table td .form .submit { float: left; padding: 5px; margin: 0 0 0 4px; background-color: rgb(0 150 130); text-transform: uppercase; font-weight: bold; font-size: 1em;}
#painel .table table td .form .submit:hover { background-color: rgb(0 170 100);}
#painel .table table td .form .enviar { float: left; margin: 5px 0 0 10px; color: rgb(0 170 100);}
#painel .table table td .form .enviar:hover { text-decoration: underline;}
#painel .table table td .form .x { float: left; padding: 5px 10px; background-color: rgb(200 40 40); font-weight: bold; font-size: 1em;}
#painel .table table td .form .x:hover { background-color: rgb(200 0 0);}
#painel .table table td .apagado { font-size: 0.9em; color: rgb(150 150 150);}
#painel .table table td .link { color: rgb(0 135 190);}
#painel .table table td .link:hover { text-decoration: underline;}
#painel .table table td .destaca { float: left; width: 100%; margin: 1px 0 0; text-align: center; font-weight: bold;}
#painel .table table td .destaca .link { text-transform: uppercase; font-weight: bold;}
#painel .table table td .verdinho { padding: 0 5px; background-color: rgb(0 170 100); font-weight: bold; font-style: normal; font-size: 0.9em; color: rgb(250 250 250);}
#painel .table table td .classico { text-transform: uppercase; font-weight: bold; color: rgb(210 105 30);}
#painel .table table td .preco { float: left; width: 100%; margin: 6px 0 4px; text-align: center;}
#painel .table table td .preco em { float: left; width: 100%; font-style: normal; font-size: 0.9em; line-height: 1;}
#painel .table table td .preco b { float: left; width: 100%; font-size: 1.1em;}
#painel .table table td .button { float: left; width: 100%; padding: 14px 0 13px; text-align: center; font-size: 1em; color: rgb(250 250 250); line-height: 0;}
#painel .table table td .button.b1 { background-color: rgb(60 170 180);}
#painel .table table td .button.b1:hover { background-color: rgb(60 140 180)}
#painel .table table td .button.b2 { background-color: rgb(0 150 130);}
#painel .table table td .button.b2:hover { background-color: rgb(0 170 100);}

#painel .video { float: left; width: 100%;}
#painel .video .iframe { position: relative; width: 100%; padding-bottom: 56%; overflow: hidden;}
#painel .video .iframe iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}


#painel .estrutura { float: left; width: 100%;}
#painel .estrutura .padrao { float: left; margin: 0 2%;}
#painel .estrutura .centralizado { margin: 0 auto;}
#painel .estrutura .es100 { width: 96%;}
#painel .estrutura .es75 { width: 71%;}
#painel .estrutura .es50 { width: 46%;}
#painel .estrutura .es33 { width: 29.333%;}
#painel .estrutura .es25 { width: 21%;}
#painel .estrutura .contes { float: left; width: 100%; margin: 15px 0 0;}
#painel .estrutura .chave { float: left; width: 100%; outline: 1px solid rgb(90 90 90 / 20%); text-align: center; -webkit-border-radius: 10px; -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius: 10px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; border-radius: 10px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px;}
#painel .estrutura .chave h2 { float: left; width: 100%; padding: 5px 0; background-color: rgb(90 90 90 / 20%); text-transform: uppercase; font-weight: bold; font-size: 1em; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
#painel .estrutura .chave h3 { float: left; width: 100%; padding: 3px 0; text-transform: uppercase; font-size: 0.9em; color: rgb(90 90 90);}
#painel .estrutura .porta { float: left; width: 100%; padding: 10px; outline: 1px solid rgb(90 90 90 / 20%);}
#painel .estrutura .linhaes { float: left; width: 100%; height: 1px;}

#painel .montagem { float: left; width: 96%; margin: 15px 2% 0;}
#painel .montagem .chave { float: left; width: 100%; outline: 1px solid rgb(90 90 90 / 20%); text-align: center; -webkit-border-radius: 10px; -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius: 10px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; border-radius: 10px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px;}
#painel .montagem .chave h2 { float: left; width: 100%; padding: 5px 0; background-color: rgb(90 90 90 / 20%); text-transform: uppercase; font-weight: bold; font-size: 1em; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
#painel .montagem .chave h3 { float: left; width: 100%; padding: 3px 0; text-transform: uppercase; font-size: 0.9em; color: rgb(90 90 90);}
#painel .montagem .porta { float: left; width: 100%; padding: 10px; outline: 1px solid rgb(90 90 90 / 20%);}

#painel .ajuda { float: left; width: 100%; margin: 21px 0;}
#painel .ajuda h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold;}
#painel .ajuda h3 { float: left; width: 100%; text-align: center;}
#painel .ajuda h4 { float: left; width: 90%; padding: 2px 5%; margin: 21px 0 16px; background-color: rgb(207 236 255); text-align: center;}
#painel .ajuda h5 { float: left; width: 100%; padding: 31px 0; text-align: center;}
#painel .ajuda h5 a { padding: 20px 20px 20px 70px; outline: 2px solid rgb(90 90 90); font-weight: bold; font-size: 2em; background-position: 12px 50%; background-repeat: no-repeat;}
#painel .ajuda h5 a.branco { background-image: url('../../../imagens/painel/geral/branco-painel-ajuda.png');}
#painel .ajuda h5 a.preto { background-image: url('../../../imagens/painel/geral/preto-painel-ajuda.png');}
#painel .ajuda h5 a:hover { background-color: rgb(90 90 90 / 10%);}

#painel .financeiro { float: left; width: 100%; margin: 11px 0;}
#painel .financeiro .opcoes { float: left; width: 100%;}
#painel .financeiro .opcoes button { width: 49%; padding: 20px 0; background-color: rgb(171 152 17 / 40%); text-transform: uppercase; font-weight: bold; text-align: center;}
#painel .financeiro .opcoes button.b1 { float: left;}
#painel .financeiro .opcoes button.b2 { float: right;}
#painel .financeiro .opcoes button:hover { background-color: rgb(171 152 17 / 25%);}
#painel .financeiro .opcoes button.ativo { background-color: rgb(171 152 17 / 25%);}
#painel .financeiro .dados { float: left; width: 100%; padding: 5px 0; outline: 1px solid rgb(90 90 90 / 30%); text-align: center;}
#painel .financeiro .dados:hover { color: rgb(55 171 200);}
#painel .financeiro .mensalidade { float: left; width: 100%; margin: 11px 0;}
#painel .financeiro .mensalidade .mes { float: left; width: 100%; position: relative;}
#painel .financeiro .mensalidade .mes .nome { float: left; width: 100%; padding: 20px 0; outline: 1px solid rgb(0 137 255 / 20%); outline-offset: -1px; background-color: rgb(0 137 255 / 5%); text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.1em; line-height: 0;}
#painel .financeiro .mensalidade .mes .seta { position: absolute; width: 40px; height: 100%; top: 0; background-position: 50%; background-repeat: no-repeat;}
#painel .financeiro .mensalidade .mes .seta.anterior { left: 0; background-image: url('../../../imagens/painel/geral/neutro-painel-anterior.png?c');}
#painel .financeiro .mensalidade .mes .seta.proximo { right: 0; background-image: url('../../../imagens/painel/geral/neutro-painel-proximo.png?c');}
#painel .financeiro .mensalidade .resumo { float: left; width: 100%; padding: 20px; margin: 21px 0;}
#painel .financeiro .mensalidade .resumo h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-size: 1em;}
#painel .financeiro .mensalidade .resumo h3 { float: left; width: 100%; padding: 5px 0; margin: 10px 0 0; border-top: 1px solid rgb(90 90 90 / 30%); position: relative; text-align: center; font-weight: bold; font-size: 3em;}
#painel .financeiro .mensalidade .resumo h3 em { position: absolute; height: 20px; top: 50%; left: 0; font-weight: normal; font-style: normal; font-size: 18px; line-height: 0;}
#painel .financeiro .mensalidade .resumo h4 { float: left; width: 100%; padding: 5px 0 4px; background-color: rgb(90 90 90 / 20%); text-align: center; font-size: 1em;}
#painel .financeiro .mensalidade .resumo button { float: left; width: 100%; padding: 20px 0; margin: 5px 0 0; background-color: rgb(0 150 130); text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: rgb(250 250 250);}
#painel .financeiro .mensalidade .resumo button:hover { background-color: rgb(0 170 100);}

#painel .popup { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#painel .popup .fundo { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background-color: rgb(0 0 0 / 80%);}
#painel .popup .conteudo { float: left; width: 100%; padding: 20px; margin: 21px 0; background-color: rgb(250 250 250); position: relative; z-index: 2;}
#painel .popup .conteudo .titulo { float: left; width: 100%; padding: 20px 10px 18px; background-color: rgb(90 90 90 / 20%); text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1em; line-height: 0;}
#painel .popup .conteudo .x { position: absolute; top: -15px; right: -15px; width: 30px; padding: 15px 0; outline: 5px solid rgb(250 250 250); background-color: rgb(200 40 40); text-align: center; font-weight: bold; font-size: 1.1em; color: rgb(250 250 250); line-height: 0;}
#painel .popup .conteudo .x:hover { background-color: rgb(200 0 0);}

@media only screen and (max-width: 1000px){
  #painel .estrutura .padrao { margin: 0 1% 21px;}
  #painel .estrutura .es100 { width: 98%;}
  #painel .estrutura .es75 { width: 98%;}
  #painel .estrutura .es50 { width: 48%;}
  #painel .estrutura .es33 { width: 98%;}
  #painel .estrutura .es25 { width: 48%;}
}
@media only screen and (max-width: 600px){
  #painel .estrutura .es50 { width: 98%;}
  #painel .estrutura .es25 { width: 98%;}
}