@charset "utf-8";

header { position: fixed; width: 100%; top: 0; left: 0; z-index: 300; background-color: rgb(250 250 250);}
header.clear { background-color: rgb(255 255 255) !important;}
header.dark { background-color: rgb(40 40 40) !important;}

header .logo { float: left; width: 100%; height: 55px; background-position: 50%; background-repeat: no-repeat;}
header .logo.preto { background-image: url('../imagens/preto-logo.png?v3');}
header .logo.branco { background-image: url('../imagens/branco-logo.png?v3');}

header .chave { position: absolute; width: 40px; height: 40px; top: 50%; left: 1%; margin: -20px 0 0;}
header .chave .ico { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-position: 50%; background-repeat: no-repeat;}
header .chave .ico.abrir.branco { background-image: url('../imagens/branco-chave-abrir.png?');}
header .chave .ico.abrir.preto { background-image: url('../imagens/preto-chave-abrir.png?');}
header .chave .ico.fechar.branco { background-image: url('../imagens/branco-chave-fechar.png?');}
header .chave .ico.fechar.preto { background-image: url('../imagens/preto-chave-fechar.png?');}

header .lado { position: absolute; top: 50%; right: 2%; margin: -18px 0 0;}
header .lado .vip { float: left; padding: 18px 5px 15px; font-weight: bold; line-height: 0; font-size: 0.9em; outline: 1px solid; outline-offset: -1px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
header .lado .vip:hover { background-color: rgb(90 90 90 / 10%);}
header .lado .notificacoes { float: left; width: 38px; height: 35px; position: relative;}
header .lado .notificacoes .sino { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-position: 50%; background-repeat: no-repeat;}
header .lado .notificacoes .sino .nun { position: absolute; width: 18px; top: 0; right: 0; padding: 10px 0 8px; background-color: rgb(255 51 51); text-align: center; font-weight: bold; font-size: 0.8em; color: rgb(250 250 250); line-height: 0; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
header .lado .notificacoes .sino.branco { background-image: url('../imagens/branco-sino.png?');}
header .lado .notificacoes .sino.preto { background-image: url('../imagens/preto-sino.png?');}
header .lado .notificacoes .listagem { position: absolute; width: 300px; top: 35px; right: 35px; padding: 10px 0 0; overflow: auto; -webkit-box-shadow: 0 0 20px 0 rgb(0 0 0 / 30%); -moz-box-shadow: 0 0 20px 0 rgb(0 0 0 / 30%); box-shadow: 0 0 20px 0 rgb(0 0 0 / 30%);}
header .lado .notificacoes .listagem::-webkit-scrollbar { display: none;}
header .lado .notificacoes .oque { float: left; width: 100%; padding: 5px 15px; text-transform: uppercase; font-weight: bold; font-size: 0.9em;}
header .lado .notificacoes .filtro { float: left; width: 100%; padding: 0 15px; background-color: rgb(90 90 90);}
header .lado .notificacoes .filtro button { float: left; padding: 8px 0; margin: 1px 8px 1px 0; background-color: transparent; font-size: 0.9em; color: rgb(250 250 250); line-height: 1;}
header .lado .notificacoes .filtro button.ativo { color: rgb(0 204 255);}
header .lado .notificacoes .filtro button:hover { color: rgb(0 204 255);}
header .lado .notificacoes .ajax { float: left; width: 100%; max-height: 300px; min-height: 0;}
header .lado .notificacoes .item { position: relative; float: left; width: 100%; padding: 10px 15px; border-top: 1px solid rgb(0 0 0 / 30%);}
header .lado .notificacoes .item h2 { float: left; width: 100%; font-size: 1em;}
header .lado .notificacoes .item h3 { float: left; width: 100%; margin: 8px 0 0; font-size: 0.9em; opacity: 0.7;}
header .lado .notificacoes .item h3 em { font-weight: bold; font-style: normal;}
header .lado .notificacoes .item h3 em:hover { text-decoration: underline;}
header .lado .notificacoes .item .linkado { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;}
header .lado .notificacoes .item .marcar { position: relative; z-index: 2;}
header .lado .notificacoes .item:hover h2 a { text-decoration: underline;}
header .lado .notificacoes .item.nao { background-color: rgb(56 0 255 / 7%);}
header .lado .notificacoes .nenhum { float: left; width: 100%; padding: 10px 15px; font-size: 0.9em;}
header .lado .notificacoes .x { position: absolute; width: 20px; top: 10px; right: 10px; padding: 10px 0; background-color: rgb(90 90 90); text-align: center; font-weight: bold; font-size: 0.8em; color: rgb(250 250 250); line-height: 0;}

header .lado .tema { float: left; width: 38px; height: 35px; margin: 0 5px 0 0; position: relative;}
header .lado .tema .ico { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url('../imagens/neutro-tema.png'); background-position: 50%; background-repeat: no-repeat;}

header .lado .logado { float: left;}
header .lado .logado .foto { float: left; width: 35px; height: 35px; position: relative;}
header .lado .logado .foto img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;}
header .lado .logado .infor { float: left; margin: 4px 0 0 5px; line-height: 0.8;}
header .lado .logado .infor .nome { font-weight: normal; font-size: 0.9em;}
header .lado .logado .infor .sair { font-size: 0.85em; opacity: 0.7;}
header .lado .logado .infor .sair:hover { text-decoration: underline;}

@media only screen and (max-width: 1000px){
  header .lado .logado .infor { display: none;}
}
@media only screen and (max-width: 700px){
  header .logo { background-position: 20% 50%;}
  header .logo.preto { background-image: url('../imagens/preto-logo-mini.png?v1');}
  header .logo.branco { background-image: url('../imagens/branco-logo-mini.png?v1');}
}
@media only screen and (max-width: 600px){
  header .lado .notificacoes .listagem { top: 52px; right: -76px;}
}