/*
 * Estilos referentes ao layout geral da aplicação:
 */
/*
 * Layout do container principal da aplicação e o menu principal.
 */
.ceb-main-menu {
  max-width: 800px;
  padding: 0px;
  margin: auto;
}
.ceb-main-container {
  background-color: #ffffff;
  min-height: 100vh;
  max-width: 800px;
  margin: auto;
  /* Para poder posicionar o footer em absoluto: */
  position: relative;
}
/* Para monitores grandes */
@media all and (min-width: 770px) {
  .ceb-container-body {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 55px;
  }
}
/* Para monitores medianos */
@media all and (max-width: 770px) {
  .ceb-container-body {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 50px;
  }
}
/* Para monitores pequenos */
@media all and (max-width: 400px) {
  .ceb-container-body {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 50px;
  }
}
.ceb-container-footer {
  background-color: #085a2d;
  text-align: center;
  font-size: 90%;
  color: #DDDDDD;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35px;
  max-width: 800px;
  padding-top: 9px;
  margin: 0;
}
/*
 * Estilos da barra de menus da aplicação:
 */
/*
 * Barra de menus da aplicação
 */
.ceb-login-button {
  color: #EbFFD5;
  border-color: #AbC495;
  background-color: #9bb485;
}
.ceb-login-button:hover,
.ceb-login-button:focus {
  color: #EbFFD5;
  border-color: #BbD4A5;
  background-color: #AbC495;
}
@media all and (min-width: 768px) {
  .compact-menu {
    font-size: 85%;
  }
}
/*
 * Estilo para o nome do usuário logado
 */
.cebmenu-username {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/*
 * Quando o menu expandido está em uso (barra de menus tradicional, não "smartphone")
 * Precisamos limitar o tamanho do nome do usuário para evitar que nomes compridos
 * demais acabem comprometendo a disposição dos demais itens de menu. Este problema
 * não acontece no menu collapsed pois cada item fica em uma linha independente.
 */
@media all and (min-width: 768px) {
  /*
	 * Dependendo da quantidade de itens no menu, a limitação é mais ou menos severa:
	 */
  .cebmenu-username {
    max-width: 100px;
  }
  .cebmenu-username-compact {
    max-width: 58px;
  }
}
.cebmenu-brand {
  max-height: 100%;
  height: 32px;
  width: auto;
  margin-top: 4px;
}
@media all and (min-width: 768px) {
  .cebmenu-brand {
    height: 40px;
    margin-top: 1px;
  }
}
.cebmenu-brand-compact {
  max-height: 100%;
  height: 32px;
  width: auto;
  margin: 0px;
  padding: 0px;
}
/*
 * Estilos de diferentes seções da aplicação:
 */
/*
 * Histórico de atividades
 */
.ativhist-status-cancel {
  text-align: center;
  color: brown;
}
.ativhist-status-subs {
  font-weight: bold;
  text-align: center;
  color: #0e7d40;
}
.ativhist-status-present {
  text-align: center;
  color: #0e7d40;
}
.ativhist-status-absent {
  text-align: center;
}
.ativhist-status-undefined {
  text-align: center;
}
.ativhist-status-wait {
  text-align: center;
  color: orange;
}
.ativhist-status-lead {
  text-align: center;
}
/*
 * Página de resultado de buscas
 */
/*
 * Página de programação e bem-vindo:
 */
/*
 * Deveria ser resolvido compilando lincado com os arquivos do bootstrap, mas por simplificação está aqui:
 */
/*
 * Página de visualização de atividade
 */
.atividade-title {
  padding: 0px;
  margin: 0px;
  color: white;
  font-weight: bold;
  text-shadow: gray 2px 2px;
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* 
	 * This is the dangerous one in WebKit, as it breaks things wherever
	word-break: break-all;
	 */
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
@media all and (max-width: 700px) {
  .atividade-title {
    font-size: 170%;
  }
}
@media all and (max-width: 500px) {
  .atividade-title {
    font-size: 150%;
  }
}
@media all and (max-width: 350px) {
  .atividade-title {
    font-size: 130%;
  }
}
.atividade-title-compact {
  font-stretch: condensed;
}
.dataativpane {
  /* A borda não está visível por default, mas quando apresentada em algumas ocasiões, a cor já está ajustada: */
  border-color: #5b9658;
  border-radius: 9px;
  min-height: 60px;
  min-width: 60px;
  float: right;
  vertical-align: top;
  background-color: white;
}
@media all and (max-width: 700px) {
  .dataativpane {
    min-height: 60px;
    height: 60px;
  }
}
@media all and (max-width: 500px) {
  .dataativpane {
    min-height: 50px;
    height: 50px;
  }
}
@media all and (max-width: 350px) {
  .dataativpane {
    min-height: 45px;
    height: 45px;
  }
}
.dataativpane-diasemana {
  color: white;
  font-weight: bold;
  padding: 2px 8px 2px 8px;
  /*
	 * Para maior compatibilidade entre os navegadores, definimos tanto
	 * uma cor de fundo padrão quanto um degrade:
	 */
  background-color: #68ab65;
  background: linear-gradient(#5b9658, #68ab65);
  border-radius: 8px 8px 0 0;
  border-bottom-color: #5a9457;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  text-align: center;
}
@media all and (max-width: 700px) {
  .dataativpane-diasemana {
    font-size: 90%;
  }
}
@media all and (max-width: 500px) {
  .dataativpane-diasemana {
    font-size: 80%;
  }
}
@media all and (max-width: 350px) {
  .dataativpane-diasemana {
    font-size: 70%;
  }
}
.dataativpane-diames {
  padding: 3px;
  font-weight: bold;
  font-size: 170%;
  font-stretch: semi-condensed;
  height: 40px;
  text-align: center;
}
@media all and (max-width: 700px) {
  .dataativpane-diames {
    font-size: 150%;
    height: 35px;
  }
}
@media all and (max-width: 500px) {
  .dataativpane-diames {
    font-size: 120%;
    height: 30px;
  }
}
@media all and (max-width: 350px) {
  .dataativpane-diames {
    font-size: 110%;
    height: 25px;
  }
}
.dataativpane-ate {
  min-width: 40px;
  float: right;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 120%;
  position: relative;
  top: 20px;
}
@media all and (max-width: 700px) {
  .dataativpane-ate {
    font-size: 110%;
    min-width: 30px;
    top: 20px;
  }
}
@media all and (max-width: 500px) {
  .dataativpane-ate {
    font-size: 100%;
    min-width: 30px;
    top: 15px;
  }
}
@media all and (max-width: 350px) {
  .dataativpane-ate {
    font-size: 85%;
    min-width: 25px;
    position: relative;
    top: 15px;
  }
}
.atividade-location {
  padding: 5px 0 0 0;
  margin: 0px;
  color: white;
  font-weight: bold;
  text-shadow: gray 1px 1px;
}
@media all and (max-width: 700px) {
  .atividade-location {
    font-size: 120%;
  }
}
@media all and (max-width: 500px) {
  .atividade-location {
    font-size: 110%;
  }
}
@media all and (max-width: 350px) {
  .atividade-location {
    font-size: 100%;
  }
}
.atividade-level {
  padding: 5px 0 0 0;
  margin: 0 10px 0 0;
  color: white;
  font-weight: bold;
  text-shadow: gray 1px 1px;
  /* Para que o título não empurre os resumo para fora do quadro quando
	   o monitor é compactado. */
  position: absolute;
  top: 120px;
}
@media all and (max-width: 700px) {
  .atividade-level {
    font-size: 120%;
    top: 116px;
  }
}
@media all and (max-width: 500px) {
  .atividade-level {
    font-size: 110%;
    top: 118px;
  }
}
@media all and (max-width: 350px) {
  .atividade-level {
    font-size: 100%;
    top: 120px;
  }
}
@media all and (min-width: 670px) {
  .ativdesc-tablerow {
    display: inline-table;
  }
}
@media all and (min-width: 800px) {
  .ativdesc-tablerow {
    display: inline-table;
    min-width: 400px;
  }
}
.ativdesc-key {
  padding: 5px 0 5px 0;
  font-weight: bold;
}
.ativdesc-value {
  padding-bottom: 5px;
  color: #709165;
  /*
	 * Para evitar que o texto criado via TinyMCE fique com uma margem
	 * inferior maior do que a prevista graças as tags P que são utilizadas
	 * para encapsular o texto gerado pelo componente.
	 */
}
.ativdesc-value p:last-of-type {
  margin-bottom: 5px;
}
.ativdesc-inline {
  display: inline-block;
}
.ativdocstable td,
.ativdocstable th {
  font-size: 80%;
}
.ativdocsbtn {
  max-width: 20px;
  max-height: 20px;
  font-size: 8pt;
  padding: 1px 2px 1px 2px;
}
.userbox {
  min-height: 48px;
  min-width: 220px;
  width: 100%;
  display: inline-block;
  margin-bottom: 10px;
  vertical-align: top;
}
.userbox-selectable {
  padding: 2px;
  border-radius: 10px;
  border-width: 2px;
  border-color: transparent;
  border-style: solid;
}
.userbox-selectable:hover {
  cursor: pointer;
  border-color: #e5d6f0;
}
#inscritosPanel .userbox-selectable:hover {
  cursor: pointer;
  border-color: #b2dba1;
}
#listaEsperaPanel .userbox-selectable:hover {
  cursor: pointer;
  border-color: #f2f29c;
}
.userbox-selected {
  /*
	 * Para maior compatibilidade entre os navegadores, definimos tanto
	 * uma cor de fundo padrão quanto um degrade:
	 */
  background-color: #f4edf9;
  background: linear-gradient(#f9f6fc, #f4edf9);
  border-color: #f1e9f7;
}
#inscritosPanel .userbox-selected {
  /*
	 * Para maior compatibilidade entre os navegadores, definimos tanto
	 * uma cor de fundo padrão quanto um degrade:
	 */
  background-color: #ecf6e8;
  background: linear-gradient(#f2f9ef, #ecf6e8);
  border-color: #c1e2b3;
}
#listaEsperaPanel .userbox-selected {
  /*
	 * Para maior compatibilidade entre os navegadores, definimos tanto
	 * uma cor de fundo padrão quanto um degrade:
	 */
  background-color: #fbfbdf;
  background: linear-gradient(#fcfce9, #fbfbdf);
  border-color: #f5f5b2;
}
/* Quando o monitor é grande o suficiente, apresentamos os paineis de inscritos com largura
   limitada para que possam ser apresentados em várias colunas */
@media all and (min-width: 600px) {
  .userbox {
    width: 220px;
  }
  .userbox-guia {
    min-width: 320px;
  }
}
.userbox-photo {
  float: left;
  padding-right: 8px;
}
.userbox-name {
  color: #0e7d40;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#listaEsperaPanel .userbox-name,
#listaEsperaPanel .userbox-name a,
#listaEsperaPanel .panel-body {
  color: #8a6d3b;
}
#inscritosPanel .userbox-name,
#inscritosPanel .userbox-name a,
#inscritosPanel .panel-body {
  color: #3c763d;
}
.ativ-bardetail {
  float: right;
  margin-right: 15px;
  margin-top: 2px;
  font-size: 75%;
}
#listaEsperaHeading .ativ-bardetail {
  color: #a18a62;
}
#listaInscritosHeading .ativ-bardetail {
  color: #508450;
}
.userbox-category {
  font-size: 85%;
  color: #6e8268;
  padding-left: 5px;
}
#listaEsperaPanel .userbox-category {
  color: #ae894a;
}
.userbox-since,
.userbox-email,
.userbox-phone {
  font-size: 85%;
  color: #6e8268;
  padding-left: 5px;
}
#listaEsperaPanel .userbox-since {
  color: #ae894a;
}
.ativmap {
  height: 350px;
  width: 260px;
  float: right;
  margin: 0 0 20px 20px;
}
@media all and (max-width: 670px) {
  .ativmap {
    display: none;
  }
}
/*
 * Resultado da busca por atividades:
 */
.atvsearchtable {
  width: 100%;
}
.atvsearchtable-date {
  text-align: center;
  padding-left: 10px;
  padding-right: 25px;
  width: 120px;
}
@media all and (max-width: 700px) {
  .atvsearchtable-date {
    padding-left: 10px;
    padding-right: 25px;
    width: 110px;
  }
}
@media all and (max-width: 500px) {
  .atvsearchtable-date {
    padding-left: 0;
    padding-right: 15px;
    width: 90px;
  }
}
@media all and (max-width: 350px) {
  .atvsearchtable-date {
    padding-left: 0;
    padding-right: 10px;
    width: 70px;
  }
}
.atvsearchtable-date-month {
  color: #094f29;
  font-weight: bold;
  font-size: 120%;
}
.atvsearchtable-date-week {
  color: #094f29;
}
.atvsearchtable-name {
  color: #0e7d40;
  font-weight: bold;
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* 
	 * This is the dangerous one in WebKit, as it breaks things wherever
	word-break: break-all;
	 */
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.atvsearchtable-level {
  font-size: 85%;
  color: #6e8268;
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* 
	 * This is the dangerous one in WebKit, as it breaks things wherever
	word-break: break-all;
	 */
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.atvsearchtable-local {
  font-size: 85%;
  color: #6e8268;
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* 
	 * This is the dangerous one in WebKit, as it breaks things wherever
	word-break: break-all;
	 */
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.atvsearchtable-lead {
  text-align: right;
}
/*
 * Lista de presença
 */
.atvpresent-presente,
.atvpresent-inscrito {
  text-align: center;
  vertical-align: middle;
}
@media all and (max-width: 700px) {
  .atvpresent-presente,
  .atvpresent-inscrito {
    font-size: 90%;
  }
}
@media all and (max-width: 500px) {
  .atvpresent-presente,
  .atvpresent-inscrito {
    font-size: 80%;
    font-stretch: condensed;
  }
}
@media all and (max-width: 350px) {
  .atvpresent-presente,
  .atvpresent-inscrito {
    font-size: 70%;
    font-stretch: condensed;
    padding: 0;
    margin: 0;
  }
}
/*
 * Página de resulta de busca por usuários:
 */
.tabelaDadosUsuario {
  width: 100%;
}
.tabelaDadosUsuario td {
  padding-right: 5px;
}
.linhausuario {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.linhausuario:hover {
  border-width: 1px;
  border-style: solid;
  border-color: #cdb1e3;
}
.linhausuario-selected {
  /*
	 * Para maior compatibilidade entre os navegadores, definimos tanto
	 * uma cor de fundo padrão quanto um degrade:
	 */
  background-color: #e7daf2;
  background: linear-gradient(#f1e9f7, #e7daf2);
  border-width: 1px;
  border-style: solid;
  border-color: #cdb1e3;
}
.nomeUsuario {
  color: #0e7d40;
  font-size: 95%;
  font-weight: bold;
}
.detalheUsuario {
  font-size: 85%;
  color: #6e8268;
}
/*
 * Etiquetas de endereços:
 */
@media screen {
  table.etiqueta,
  table.etiqueta td,
  table.etiqueta th {
    border-width: 1px;
    border-color: #BBBBBB;
    border-style: dashed;
  }
}
@media all {
  table.etiqueta {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  table.tr {
    height: 1in;
    min-height: 1in;
    max-height: 1in;
    padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  table.etiqueta td,
  table.etiqueta th {
    table-layout: fixed;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    vertical-align: top;
    width: 73mm;
    min-width: 73mm;
    max-width: 73mm;
    height: 1in;
    min-height: 1in;
    max-height: 1in;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 8pt;
    line-height: 1.3;
  }
  /*
	 * Enquanto que o Chrome respeitava a largura definida para as etiquetas e aplicava o padding lateral
	 * restringindo a largura total disponível para o texto, o Firefox insistia em somar a largura das
	 * etiquetas com o padding aplicado, resultando em etiquetas maiores do que o desejado. O problema
	 * continuou a se manifestar mesmo depois da adição da propriedade box-sizing.
	 *
	 * A solução de contorno utilizada para compatibilidade entre os dois browsers foi eliminar o padding
	 * lateral das células da tabela e acrescentar um container (um div a mais) intermediário para manter
	 * o texto da etiqueta. Neste container, acrescentamos o padding lateral desejado. Por prevenção,
	 * mantivemos os atributos box-sizing e transferimos os paddings superior e inferior também para
	 * dentro do container intermediário.
	 */
  .etiqueta-conteudo {
    padding-right: 4mm;
    padding-left: 4mm;
    padding-top: 3mm;
    padding-bottom: 2mm;
  }
}
/*
 * Impressão de relatório e ficha de campo de atividades
 */
@page {
  margin-top: 2cm;
  margin-bottom: 2cm;
  margin-left: 3cm;
  margin-right: 3cm;
  width: 210mm;
}
.impressativ {
  width: 100%;
  font-size: 10pt;
}
.impressativ td,
th {
  padding-bottom: 2px;
}
@media screen {
  .relatorio {
    width: 225mm;
    margin-top: 2cm;
    margin-bottom: 2cm;
    margin-left: auto;
    margin-right: auto;
  }
}
@media print {
  .impressativ tr {
    page-break-inside: auto;
  }
}
.impressativ-header {
  text-align: center;
  padding-right: 15mm;
}
.impressativ-logo {
  text-align: center;
  padding-right: 10px;
}
.impressativ-title {
  font-family: Calibri, Arial, Sans Serif;
  font-weight: bold;
  font-size: 130%;
}
.impressativ-subtitle {
  font-family: Calibri, Arial, Sans Serif;
  font-weight: bold;
  text-align: center;
}
.impressativ-key {
  width: 130px;
  vertical-align: top;
}
.impressativ-name {
  font-weight: bold;
}
.impressativ-date {
  font-weight: bold;
}
/*
 * Para garantir que tabelas eventualmente utilizadas dentro da descrição da atividade
 * sejam apresentadas com a fonte formatada corretamente, é importante explicitar o
 * elemento TD e utilizar o tamanho da fonte em unidade absoluta.
 */
.impressativ-description,
.impressativ-description td {
  font-style: italic;
  font-size: 9pt;
  overflow: hidden;
}
.impressativ-report {
  overflow: hidden;
}
.impressativ-usertable td,
th {
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
  padding: 2px;
}
.impressativ-usertable thead tr th {
  text-align: center;
}
.impressativ-usertable thead tr:first-of-type th {
  text-align: left;
}
.impressativ-usertable tfoot {
  font-size: 75%;
  text-align: right;
}
.impressativ-userdata-name {
  text-align: left;
}
.impressativ-userdata-cel,
.impressativ-userdata-phone {
  text-align: right;
  font-size: 85%;
}
.impressativ-userdata-inscrito,
.impressativ-userdata-presente {
  text-align: center;
  font-size: 85%;
}
/*
 * Tabela de mensalidades:
 */
.mensalidade-table th {
  border: 0;
}
.mensalidade-table tbody tr td {
  vertical-align: middle;
}
.mensalidade-table tbody tr td label {
  margin-bottom: 0;
}
.mensalidade-table tbody tr td.data-pagamento {
  text-align: center;
}
.mensalidade-table tbody tr:has(input:checked) {
  background: linear-gradient(#f9f6fc, #f4edf9);
}
.cobranca-panel {
  overflow: auto;
}
.cobranca-index {
  font-weight: bold;
  text-align: center;
  margin: 0;
}
.cobranca-table {
  margin-bottom: 0;
}
.cobranca-table tbody tr td:first-child {
  font-weight: bold;
  text-align: right;
  width: 30%;
}
.cobranca-table tbody tr td.cobranca-status {
  text-transform: uppercase;
}
.cobranca-table tbody tr td.cobranca-status button.canceling {
  cursor: wait;
}
.cobranca-pager {
  margin: 10px 0 10px 0;
}
/*
 * Quadro de programação de atividades
 */
.programacao-banner {
  height: 160px;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  /* Para que o posicionamento absoluto do resumo de vagas totais
	   e disponiveis funcione corretamente. */
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
}
.programacao-banner-link {
  position: absolute;
  bottom: 6px;
  left: 610px;
  width: 80px;
  height: 14px;
  background-color: transparent;
}
.programacao-title {
  padding: 0px;
  margin: 0px;
  color: white;
  font-weight: bold;
  text-shadow: gray 2px 2px;
}
.programacao-summary {
  color: white;
  text-shadow: gray 1px 1px;
  /* Para que o título não empurre os resumo para fora do quadro quando
	   o monitor é compactado. */
  position: absolute;
  top: 110px;
}
.programacao-detail {
  color: #777777;
}
.programacao-instrucao {
  margin-bottom: 15px;
}
.programacao-instrucao-header {
  background-color: #3d5a4a;
  background: linear-gradient(#6f5427, #5c4620);
  color: white;
  font-weight: bold;
  text-shadow: gray 1px 1px;
  height: 30px;
  padding: 3px 12px 0 12px;
  border-width: 1px;
  border-color: #49371a;
  border-style: solid;
  border-radius: 6px;
  font-size: 105%;
  margin-top: 10px;
  text-align: center;
  display: block;
}
.programacao-instrucao-header:hover,
.programacao-instrucao-header:active,
.programacao-instrucao-header:visited,
.programacao-instrucao-header:link {
  text-decoration: none;
  color: white;
}
.programacao-instrucao-header-conhecer {
  background-color: #e0e0e8;
  background: linear-gradient(#8b5353, #7b4949);
  border-color: #6b4040;
  color: white;
}
.programacao-instrucao-header-associar {
  background-color: #e0e0e8;
  background: linear-gradient(#6f547d, #614a6e);
  border-color: #54405e;
  color: white;
}
.programacao-instrucao-body {
  padding: 4px 8px 4px 8px;
  color: #3b2323;
  background-image: url("../img/subtle_dots.png");
  background-repeat: repeat;
}
.programacao-instrucao-body > a:hover,
.programacao-instrucao-body > a:active,
.programacao-instrucao-body > a:visited,
.programacao-instrucao-body > a:link {
  color: inherit;
  text-decoration: underline;
}
.programacao-section {
  /*
	 * Para maior compatibilidade entre os navegadores, definimos tanto
	 * uma cor de fundo padrão quanto um degrade:
	 */
  background-color: #3d5a4a;
  background: linear-gradient(#476956, #334b3e);
  color: white;
  font-weight: bold;
  text-shadow: gray 1px 1px;
  padding: 3px 14px 3px 14px;
  border-width: 1px;
  border-color: gray;
  border-style: solid;
  border-radius: 8px;
  font-size: 115%;
  margin-top: 10px;
  overflow: hidden;
}
.programacao-section > a {
  padding-top: 3px;
  float: right;
  font-size: 75%;
  color: inherit;
  text-decoration: none;
  font-stretch: condensed;
  display: inline-block;
}
.ativpane {
  border-width: 1px;
  border-color: #a1c69f;
  border-radius: 10px;
  border-style: outset;
  min-height: 120px;
  min-width: 340px;
  width: 100%;
  display: inline-block;
  margin-bottom: 10px;
  vertical-align: top;
}
.ativpane-clickable {
  cursor: pointer;
}
/* Quando o monitor é grande o suficiente, apresentamos os paineis de atividades com largura
   limitada para que possam ser apresentados em duas colunas */
@media all and (min-width: 800px) {
  .ativpane {
    width: 340px;
  }
}
.ativpane-full {
  border-color: #c8cbc9;
}
.ativpane-header {
  color: white;
  font-weight: bold;
  padding: 3px;
  /*
	 * Para maior compatibilidade entre os navegadores, definimos tanto
	 * uma cor de fundo padrão quanto um degrade:
	 */
  background-color: #68ab65;
  background: linear-gradient(#5b9658, #68ab65);
  border-radius: 9px 9px 0 0;
  border-bottom-color: #5a9457;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  text-align: left;
}
.ativpane-header-full {
  /*
	 * Para maior compatibilidade entre os navegadores, definimos tanto
	 * uma cor de fundo padrão quanto um degrade:
	 */
  background-color: #a1ab90;
  background: linear-gradient(#909980, #a1ab90);
  border-bottom-color: #b6bcad;
}
.ativpane-header-canceled {
  text-decoration: line-through;
  /*
	 * Para maior compatibilidade entre os navegadores, definimos tanto
	 * uma cor de fundo padrão quanto um degrade:
	 */
  background-color: #dbb5b5;
  background: linear-gradient(#dbb5b5, #dbb5b5);
  border-bottom-color: #e2e4de;
}
.ativpane-subheader {
  color: white;
  background-color: #97b8a6;
  padding-left: 5px;
  padding-right: 5px;
  text-align: left;
}
.ativpane-subheader-full {
  color: #EEEEEE;
  background-color: #b1b8b4;
}
.ativpane-subheader-canceled {
  color: #EEEEEE;
  background-color: #e0e3e1;
}
.ativpane-daymonth {
  color: white;
  text-align: center;
  vertical-align: middle;
  font-size: 135%;
  width: 90px;
  display: table-cell;
}
.ativpane-name {
  font-size: 130%;
  font-stretch: condensed;
  vertical-align: middle;
  display: table-cell;
}
.ativpane-name-compact {
  font-size: 100%;
}
.ativpane-dayweek {
  font-weight: bold;
  color: white;
  text-align: center;
  width: 90px;
  display: table-cell;
}
.ativpane-location {
  font-stretch: condensed;
  display: table-cell;
}
.ativpane-body {
  min-height: 64px;
  border-radius: 0 0 9px 9px;
  display: block;
  overflow: hidden;
  background-color: white;
  background-image: url("../img/subtle_dots.png");
  background-repeat: repeat;
}
.ativpane-canceled .ativpane-body {
  background-image: none;
  background-color: #fafafa;
}
.ativpane-photo {
  width: 90px;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  height: 64px;
}
.ativpane-canceled .ativpane-photo {
  -webkit-filter: grayscale(100%) opacity(30%);
  /* Chrome, Safari, Opera */
  filter: grayscale(100%) opacity(30%);
}
.ativpane-description {
  padding: 5px;
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  height: 64px;
}
.ativpane-guide,
.ativpane-guide > a {
  color: #5d7d4c;
}
.ativpane-guide-full,
.ativpane-guide-full > a {
  color: #69705e;
}
.ativpane-guide-canceled,
.ativpane-guide-canceled > a {
  color: #bcbfb7;
}
.ativpane-level {
  color: #5d7d4c;
}
.ativpane-level-full {
  color: #69705e;
}
.ativpane-level-canceled {
  color: #bcbfb7;
}
.ativpane-status-available {
  color: green;
}
.ativpane-status-full {
  color: brown;
  font-weight: bold;
  font-size: 90%;
}
.ativpane-status-canceled {
  color: brown;
  font-weight: bold;
}
.ativpane-status-subscribed {
  color: #7d4e56;
}
.ativpane-status-waiting {
  color: #7d4e56;
}
.ativpane-clickable:hover {
  /*
	 * Para maior compatibilidade entre os navegadores, definimos tanto
	 * uma cor de fundo padrão quanto um degrade:
	 */
}
.ativpane-clickable:hover .ativpane-header {
  background-color: #518f4e;
  background: linear-gradient(#487645, #518f4e);
  border-bottom-color: #467444;
}
.ativpane-clickable:hover .ativpane-header-full {
  background-color: #889573;
  background: linear-gradient(#778066, #889573);
  border-bottom-color: #9da591;
}
.ativpane-clickable:hover .ativpane-header-canceled {
  background-color: #ca9393;
  background: linear-gradient(#ca9393, #ca9393);
  border-bottom-color: #c9cdc2;
}
.ativpane-clickable:hover .ativpane-subheader {
  background-color: #79a38c;
}
.ativpane-clickable:hover .ativpane-subheader-full {
  background-color: #96a09a;
}
.ativpane-clickable:hover .ativpane-subheader-canceled {
  background-color: #c5cac7;
}
.ativpane-clickable:hover .ativpane-body {
  background-image: none;
  background-color: #f2f2f2;
}
/*
 * Estilos da página de perfil de usuário.
 */
.tabelaPerfilUsuario {
  width: auto;
}
.tabelaPerfilUsuario td {
  padding-right: 10px;
}
.colunaChave {
  text-align: right;
  vertical-align: top;
}
.colunaValor {
  color: #709165;
}
.col-perfil {
  margin-bottom: 40px;
}
.colunaNomeContato {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
 * A relação de telefones do usuário é apresentada em uma única linha, separada por barras quando
 * a tela é larga e empilhada verticalmente sem separadores quando a tela é estreita.
 */
@media all and (min-width: 550px) {
  .usercel-separator {
    display: inline-block;
  }
  .usercel-separator:after {
    content: "/";
  }
}
.carteirinha {
  width: 700px;
  height: 454px;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.carteirinha .cart-field {
  position: absolute;
  color: #dfdfdf;
  font-family: sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  padding-left: 5px;
  padding-right: 5px;
}
.carteirinha .cart-field.nome {
  left: 52px;
  top: 214px;
  height: 75px;
  width: 310px;
  line-height: 40px;
  text-align: left;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 17px;
}
.carteirinha .cart-field.identidade {
  left: 57px;
  top: 316px;
  width: 248px;
  text-align: left;
  text-wrap: nowrap;
}
.carteirinha .cart-field.sangue {
  left: 336px;
  top: 316px;
  width: 109px;
}
.carteirinha .cart-field.tipo-socio {
  left: 57px;
  top: 366px;
  width: 109px;
}
.carteirinha .cart-field.matricula {
  top: 366px;
  left: 197px;
  width: 109px;
}
.carteirinha .cart-field.validade {
  left: 336px;
  top: 366px;
  width: 109px;
}
.carteirinha .cart-field.emergencia {
  left: 295px;
  top: 408px;
  width: 149px;
}
.carteirinha .cart-photo {
  position: absolute;
  left: 482px;
  top: 113px;
  width: 172px;
  height: 232px;
  object-fit: cover;
}
/*
 * Wizard
 */
.wizard-banner {
  /*
	 * Para maior compatibilidade entre os navegadores, definimos tanto
	 * uma cor de fundo padrão quanto um degrade:
	 */
  background-color: #085a2d;
  background: linear-gradient(#0a7139, #085a2d);
  height: 70px;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
}
.wizard-beneficios {
  padding-left: 15px;
}
.wizard-beneficios li {
  margin-bottom: 5px;
}
.wizard-title {
  color: white;
  font-size: 20pt;
  font-weight: bold;
  font-family: Calibri, Arial, sans-serif;
}
@media all and (max-width: 550px) {
  .wizard-title {
    font-size: 15pt;
  }
}
@media all and (max-width: 400px) {
  .wizard-title {
    font-size: 11pt;
  }
}
.wizard-subtitle {
  color: #EEEEEE;
  font-weight: bold;
  font-family: Calibri, Arial, sans-serif;
}
@media all and (max-width: 550px) {
  .wizard-subtitle {
    font-size: 80%;
  }
}
@media all and (max-width: 400px) {
  .wizard-subtitle {
    font-size: 70%;
  }
}
.wizard-bemvindo {
  font-family: Calibri, Arial, sans-serif;
  font-weight: bold;
  font-size: 120%;
  text-shadow: lightgray 1px 1px;
  color: #6f5427;
}
.conta-box {
  color: #444444;
  background-image: url("../img/subtle_dots.png");
}
.conta-beneficios {
  color: #6f547d;
}
.conta-box-associado a {
  color: #6f547d;
}
.conta-custos {
  font-size: 85%;
  color: #6f547d;
  text-align: right;
}
.wizard-nome-conta {
  font-family: Calibri, Arial, sans-serif;
  font-weight: bold;
  font-size: 140%;
  text-shadow: lightgray 1px 1px;
}
.wizard-nome-conta-convidado {
  color: #8b5353;
}
.wizard-nome-conta-associado {
  color: #6f547d;
}
.wizard-btn-convidado {
  background-color: #8b5353;
  border-color: #5b3636;
  color: white;
}
.wizard-btn-convidado:hover,
.wizard-btn-convidado:active,
.wizard-btn-convidado:visited,
.wizard-btn-convidado:link {
  background-color: #6b4040;
  color: white;
}
.wizard-btn-associar {
  background-color: #6f547d;
  border-color: #46354f;
  color: white;
}
.wizard-btn-associar:hover,
.wizard-btn-associar:focus {
  background-color: #54405e;
  border-color: #46354f;
  color: white;
}
/*
 * Estilos compartilhados por diferentes seções da aplicação:
 */
@media all and (max-width: 400px) {
  .suppressible400px {
    display: none;
  }
}
@media all and (max-width: 500px) {
  .suppressible500px {
    display: none;
  }
}
@media all and (max-width: 600px) {
  .suppressible600px {
    display: none;
  }
}
@media all and (max-width: 700px) {
  .suppressible700px {
    display: none;
  }
}
@media all and (max-width: 800px) {
  .suppressible800px {
    display: none;
  }
}
.debug {
  background-color: red;
}
.detalhe {
  color: #999999;
}
/*
 * Tabelas com linhas selecionáveis:
 */
.selectabletr {
  cursor: pointer;
}
.selectabletr:hover {
  background-color: #f8f4fb;
}
.selectabletr-selected {
  background-color: #e5d6f0;
}
.selectabletr-selected:hover {
  background-color: #eadef3;
}
/*************************************
 * Ajustes gerais de CSS
 *************************************/
table.center {
  margin-left: auto;
  margin-right: auto;
}
.grayscale {
  -webkit-filter: grayscale(100%);
  /* Chrome, Safari, Opera */
  filter: grayscale(100%);
}
/*
 * Evitando que palavras longas demais prejudiquem o layout:
 * https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 */
.break-long-word {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* 
	 * This is the dangerous one in WebKit, as it breaks things wherever
	word-break: break-all;
	 */
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/*
 * Ícones da aplicação:
 */
@font-face {
  font-family: 'cebfont';
  src: url("../font/cebfont.svg");
  src: url("../font/cebfont.woff");
}
.cebicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'cebfont';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cebicon-boot:before {
  content: "a";
}
.cebicon-calendar:before {
  content: "b";
}
.cebicon-car:before {
  content: "c";
}
.cebicon-bulbblack:before {
  content: "d";
}
.cebicon-bulbwhite:before {
  content: "e";
}
/*
 * Personalização de estilo de alguns componentes:
 */
/*************************************
 * Ajustes no TinyMCE
 *************************************/
.tinymce-body {
  padding: 5px;
}
.tinymce-img-floatleft {
  float: left;
  margin: 0 10px 0 0;
}
.tinymce-img-floatright {
  float: right;
  margin: 0 0 0 10px;
}
.tinymce-img-nofloat {
  display: block;
  margin: 10px 0 10px 0;
}
/*
 * Container dos labels
 */
.labelselect-container {
  height: 100%;
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 2px;
  line-height: 200%;
  min-height: 30px;
}
/*
 * Estilo para o botão apresentado ao lado dos labels do componente Label Select
 */
.labelselect-btn-close {
  padding: 0;
  border: none;
  background: none;
}
/*
 * Estilo para os labels.
 */
.labelselect-item {
  color: white;
  background-color: #9797b2;
  padding: 3px 6px 3px 6px;
  display: initial;
  font-size: 75%;
  font-weight: 700;
  border-radius: 2px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  vertical-align: middle;
  white-space: nowrap;
  height: 100%;
}
/*
 * Personalizações em cima do bootstrap:
 */
/* *******************************
 * Ajustes no Bootstrap.
 * *******************************
 */
/*
 * Deveria ser resolvido compilando lincado com os arquivos do bootstrap, mas por simplificação está aqui:
 */
/* Para que as tabs de navegação presentes no header do painel se acoplem corretamente ao corpo do painel. */
.panel.with-nav-tabs .panel-heading {
  padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs {
  border-bottom: none;
}
.panel.with-nav-tabs .nav-justified {
  margin-bottom: -1px;
}
/* Os inputs xs não estavam ficando menores do que os inputs sm: */
.input-xs {
  height: 24px;
  padding: 2px 5px;
  font-size: 10px;
  line-height: 1.5;
  border-radius: 3px;
}
/* Para melhorar a aparência dos links que são aplicados sobre o fundo colorido dos alertas: */
.alert-success a,
.alert-info a,
.alert-warning a,
.alert-danger a {
  color: inherit;
  text-decoration: underline;
}
/* Para melhorar a aparência dos tabelas que são aplicadas sobre o fundo colorido dos alertas: */
.alert-warning table tbody td {
  border-top-color: #e4e4b3;
}
.alert-warning table thead th {
  border-bottom-color: #e4e4b3;
}
/* Disabled link */
.dropdown-menu li a[disabled=disabled],
a[disabled=disabled],
a[disabled=disabled]:visited,
a[disabled=disabled]:active,
a[disabled=disabled]:hover {
  color: #999;
  cursor: default;
  pointer-events: none;
}
/*
 * Dentro dos dropdowns menu na barra de navegação do sistema, quando em modo compacto,
 * a mudança de cor para links desabilitados não estava funcionando. Por isso,
 * preferimos suprimir por completo estes links desabilitados neste tipo de menu.
 */
@media all and (max-width: 768px) {
  .navbar .dropdown-menu a[disabled=disabled] {
    display: none;
  }
}
/*
 * Acrescentamos uma margem adicional à esquerda para identificar melhor os
 * subitens de menu. Por default, a margem não garante uma clara identificação
 * entre quais são os subitens de um menu e o título do menu seguinte.
 */
@media all and (max-width: 768px) {
  .navbar .dropdown-menu a {
    margin-left: 30px;
  }
}