@charset "utf-8";

header { position: fixed; width: 96%; height: 55px; padding: 0 2%; background-color: #FFFFFF; z-index: 300; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);}
header .chave { float: left; width: 35px; height: 35px; margin: 10px 0 0; position: relative; cursor: pointer;}
header .chave .ico { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-repeat: no-repeat; background-color: #FFFFFF;}
header .chave .ico.abrir { background-image: url('../imagens/icoAbrir.png'); z-index: 0;}
header .chave .ico.fechar { background-image: url('../imagens/icoFechar.png'); z-index: 100;}

header .menu { float: left; margin: 18px 0 0 20px;}
header .menu a { float: left; margin: 0 0 0 8px; font-size: 0.9em; color: #555555;}
header .menu a:hover { text-decoration: underline; color: #000000;}


header .lado { float: right; margin: 5px 0 0;}
header .lado .notificacoes { float: left; width: 40px; height: 35px; margin: 8px 15px 0 0; position: relative;}
header .lado .notificacoes .sino { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url('../imagens/sino.png?'); 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 .listagem { position: absolute; width: 300px; top: 35px; right: 35px; padding: 10px 0 0; background-color: rgb(250 250 250); 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 .logo { float: left;}
header .lado .logo img { float: left; height: 45px;}


footer { float: right; width: 80%; border-top: 1px solid #EEEEEE; position: relative;}
footer.mobile { width: 100%;}
footer .copyright  { float: left; width: 90%; padding: 18px 5% 14px; text-align: center; font-size: 0.9em; color: #555555;}
footer .copyright a { color: #FFFFFF;}
footer .copyright a:hover { text-decoration: underline;}

@media only screen and (max-width: 1200px){
	body .center { width: 94%;}
}
@media only screen and (max-width: 1000px){
	header .chave .ico.fechar { background-image: url('../imagens/icoAbrir.png');}
	header .chave .ico.abrir { background-image: url('../imagens/icoFechar.png');}

	footer { width: 100%;}
	footer.mobile { width: 70%;}
}
@media only screen and (max-width: 700px){
	footer.mobile { width: 100%;}
}
@media only screen and (max-width: 600px){
  header .lado .notificacoes .listagem { top: 60px; right: -60px;}
}