/* Estilos gerais da aplicação */
/*
 * Definições de tamanhos de fonte utilizados pela aplicação.
 */
/*
  * Fonte padrão da aplicação. Foi selecionada a partir de um banco de fontes
  * gratuitas para se assemelhar ao máximo à fonte "Proxima Nova Light", definida
  * pelo designer como a fonte de referência para a marca RCI. Notar que os
  * caracteres numéricos não estão incluídos no range desta definição de fonte.
  * Isso foi feito por que os numéricos desta definição eram bem diferentes da
  * fonte de referência. A definição abaixo foi incluída para contornar o problema.
  */
@font-face {
  font-family: 'rci-font';
  unicode-range: U+0040-203A;
  src: url("../font/raleway/Raleway-Regular.eot");
  src: url("../font/raleway/Raleway-Regular.otf");
  src: url("../font/raleway/Raleway-Regular.svg");
  src: url("../font/raleway/Raleway-Regular.woff");
  src: url("../font/raleway/Raleway-Regular.woff2");
}
/*
 * Fonte padrão da aplicação, quando se trata de caracteres numéricos.
 * Notar que, apesar de se tratar de uma definição de fonte regular,
 * foi escolhido o arquivo referente a fonte bold. Isso foi feito pois
 * a fonte regular original era fina demais.
 */
@font-face {
  font-family: 'rci-font';
  unicode-range: U+003?;
  src: url("../font/aspergit/Aspergit-Bold.eot");
  src: url("../font/aspergit/Aspergit-Bold.otf");
  src: url("../font/aspergit/Aspergit-Bold.svg");
  src: url("../font/aspergit/Aspergit-Bold.woff");
  src: url("../font/aspergit/Aspergit-Bold.woff2");
}
/*
 * A fonte de referência para títulos era a "Proxima Nova Black". A versão
 * gratuita semelhante foi também a fonte Raleway, mas na sua versão ExtraBold. 
 */
@font-face {
  font-family: 'rci-font';
  font-weight: bold;
  src: url("../font/raleway/Raleway-ExtraBold.eot");
  src: url("../font/raleway/Raleway-ExtraBold.otf");
  src: url("../font/raleway/Raleway-ExtraBold.svg");
  src: url("../font/raleway/Raleway-ExtraBold.woff");
  src: url("../font/raleway/Raleway-ExtraBold.woff2");
}
@font-face {
  font-family: 'rcicons';
  src: url("../font/rcicons/rcicons.otf");
  src: url("../font/rcicons/rcicons.eot");
  src: url("../font/rcicons/rcicons.svg");
  src: url("../font/rcicons/rcicons.woff");
  src: url("../font/rcicons/rcicons.woff2");
}
/*
 * Fonte com ícones especialmente preparados para a aplicação RCI.
 */
.rcicon {
  font-family: 'rcicons';
}
/* Logo RCI com corrente */
.rcicon-chain:before {
  content: "a";
}
/* Logo RCI com marcador */
.rcicon-marker:before {
  content: "b";
}
/* Logo RCI vertical na esquerda */
.rcicon-rci-vertical-left:before {
  content: "c";
}
/* Logo RCI com sinal de mais na direita inferior */
.rcicon-rbplus:before {
  content: "d";
}
/* Sinal de avançar na direita inferior */
.rcicon-rbforward:before {
  content: "e";
}
/* Sinal de sincronizar na direita inferior */
.rcicon-rbsync:before {
  content: "f";
}
.c3 text {
  font-family: rci-font;
  font-size: 12px;
}
/*
 * Cores básicas da aplicação
 */
/*
 * Estilo dos elementos básicos da aplicação
 */
/* Inicialmente estávamos aplicando a fonte ao elemento body, de forma que toda a aplicação
   automaticamente herdasse esta definição. Porém, percebemos que no Firefox, a alteração da
   fonte no elemento externo aos botões estava alterando a margem entre eles. O problema foi
   evidenciado na barra horizontal de botões que fica sobre a tabela de clientes. Quando a
   fonte era ajustado no body, surgia um espaço maior do que o desejado entre os botões.
   Para evitar este problema passamos a aplicar a fonte nos elementos mais específicos. */
/* body{ */
/* 	font-family: "rci-font"; */
/* } */
p,
h1,
h2,
h3,
h4,
a,
input,
table,
button,
textarea {
  font-family: "rci-font";
}
a {
  color: #ee3538;
}
a:hover {
  color: #ee3538;
  text-decoration: underline;
}
a.disabled {
  color: rgba(238, 53, 56, 0.5);
}
a.disabled:hover {
  color: rgba(238, 53, 56, 0.5);
  text-decoration: none;
}
a.unauthorized {
  cursor: default;
  pointer-events: none;
  text-decoration: none;
  color: inherit;
}
/* Disabled link */
a[disabled=disabled],
a[disabled=disabled]:visited,
a[disabled=disabled]:active,
a[disabled=disabled]:hover {
  cursor: default;
  pointer-events: none;
}
table {
  width: 100%;
  max-width: 100%;
}
td {
  vertical-align: middle;
}
/**
 * Checkbox da aplicação:
 */
.rci-chkbox {
  display: inline-table;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}
.rci-chkbox:focus {
  outline: none !important;
}
.rci-chkbox .rci-chkbox-check-container {
  display: table-cell;
  width: 15px;
  vertical-align: middle;
}
.rci-chkbox .rci-chkbox-check-container .rci-chkbox-check {
  border-width: 1px;
  border-style: solid;
  border-color: #aaaaaa;
  border-radius: 4px;
  width: 15px;
  height: 15px;
  position: relative;
  background-color: white;
}
.rci-chkbox .rci-chkbox-check-container .rci-chkbox-check:hover {
  border-color: #aaaaaa;
}
.rci-chkbox.checked .rci-chkbox-check-container .rci-chkbox-check:after {
  content: '';
  position: absolute;
  width: 9px;
  height: 5px;
  background: transparent;
  top: 3px;
  left: 2px;
  border: 3px solid #777777;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}
.rci-chkbox.checked:focus .rci-chkbox-check-container .rci-chkbox-check:after {
  top: 2px;
  left: 1px;
}
.rci-chkbox .rci-chkbox-label {
  display: table-cell;
  padding-top: 1px;
  padding-left: 5px;
  font-family: rci-font;
}
.rci-chkbox.disabled {
  color: #dddddd;
  cursor: default;
}
.rci-chkbox.disabled .rci-chkbox-check-container .rci-chkbox-check {
  background-color: rgba(221, 221, 221, 0.2);
}
.rci-chkbox.disabled .rci-chkbox-check-container .rci-chkbox-check:hover {
  border-color: #dddddd;
}
.rci-chkbox.disabled .rci-chkbox-check-container .rci-chkbox-check:after {
  border-color: #dddddd;
}
.rci-chkbox:focus .rci-chkbox-check-container .rci-chkbox-check {
  border-color: rgba(238, 53, 56, 0.5);
  border-width: 2px;
  box-shadow: none;
}
/*
 * Evitando que o Firefox apresente uma decoração vermelha ao redor
 * dos radio buttons obrigatórios: 
 * https://github.com/angular/angular.js/issues/12102
 */
.ng-untouched.ng-invalid-required {
  box-shadow: none;
}
/*
 * Evitando que o Chrome apresente um brilho azul ao redor de componentes
 * que foram clicados pelo usuário: 
 * https://github.com/kenwheeler/slick/issues/1562
 * https://stackoverflow.com/questions/935559/remove-safari-chrome-textinput-textarea-glow
 */
.no-focus-decoration {
  outline: none;
  box-shadow: none;
}
.no-focus-decoration:focus {
  outline: none !important;
}
textarea,
select,
input,
button,
th {
  outline: none;
  box-shadow: none;
}
textarea:focus,
select:focus,
input:focus,
button:focus,
th:focus {
  outline: none !important;
}
/**
 * Quando construimos uma tag do tipo <a href="#" ng-click="listener()">something</a>,
 * o browser é direcionado para a rota default do Angular (#) após executar o código
 * do listener. Para evitar este problema optamos pela abordagem de eliminar o atributo
 * href. O efeito colateral é perder o ponteiro do mouse caracterísco dos links. Para
 * contornar este problema, adicionamos o ponteiro manualmente com o CSS. Maior
 * discussão sobre o assunto pode ser encontrada aqui:
 *
 * https://stackoverflow.com/questions/10931315/how-to-preventdefault-on-anchor-tags
 */
a[ng-click] {
  cursor: pointer;
}
/*
 * A opção break-word é a com o melhor funcionamento. Quebra a linha entre palavras quando é possível, entre
 * letras quando não outra alternativa. Infelizmente, o Firefox não trabalha com esta opção. Por este motivo,
 * foram especificadas as duas alternativas: break-all e break-word. O Firefox usará a break-all, que quebra
 * a linha em qualquer ponto, e o Chrome usará a última opção, break-word.
 */
.break-long-line {
  word-break: break-all;
  word-break: break-word;
}
.info-block {
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  background-color: #fcf7d0;
  color: #333333;
  font-family: rci-font;
  padding: 10px;
}
.info-block .info-block-icon {
  vertical-align: top;
  margin-right: 5px;
}
.info-block .info-block-text {
  font-size: 13px;
}
/* Definição de botão padrão da aplicação. */
.rci-btn {
  border: solid 1px #ccc;
  border-radius: 3px;
  background-color: white;
  /* É importante um padding de pelo menos 1px para "guardar lugar" para o aumento de largura da borda
	   quando o botão ganhar foco. */
  padding: 1px 8px;
  margin: 0;
  height: 30px;
  /* A altura da linha é 2px inferir para compensar o padding. */
  line-height: 28px;
  min-width: 20px;
  cursor: pointer;
  text-decoration: none;
  color: #333333;
  display: inline-block;
  outine: none;
  font-family: rci-font;
}
.rci-btn.slim {
  height: 24px;
  line-height: 20px;
  font-size: 13px;
}
.rci-btn:hover {
  color: #333333;
  text-decoration: none;
  border: solid 1px #777;
}
.rci-btn:focus {
  color: #333333;
  text-decoration: none;
  border-color: rgba(238, 53, 56, 0.5);
  border-width: 2px;
  box-shadow: none;
  /* Com o aumento da largura da borda, compensamos reduzindo o padding, para o conteúdo não se mover. */
  padding: 0px 7px;
  outline: none;
}
.rci-btn.disabled,
.rci-btn[disabled] {
  border-color: #dddddd;
  color: #dddddd;
}
.rci-btn.disabled:hover,
.rci-btn[disabled]:hover {
  cursor: default;
  color: #dddddd;
  border-color: #dddddd;
  text-decoration: none;
}
.rci-btn.disabled:focus,
.rci-btn[disabled]:focus {
  color: #dddddd;
  text-decoration: none;
  border-color: #dddddd;
  box-shadow: none;
  outline: none;
}
.rci-simple-btn {
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  color: #777777;
  display: inline-block;
  float: right;
  font-size: 10px;
  padding: 1px;
  min-width: 22px;
}
.rci-simple-btn:focus {
  outline: dotted 1px #ccc;
}
.rci-simple-btn.disabled,
.rci-simple-btn[disabled] {
  cursor: default;
  pointer-events: none;
  color: #dddddd;
}
.rci-simple-btn.disabled:hover,
.rci-simple-btn[disabled]:hover {
  outline: none;
}
.rci-simple-btn.disabled:focus,
.rci-simple-btn[disabled]:focus {
  outline: none;
}
[rci-cloak] {
  display: none !important;
}
/*
 * Ajustes em estilos do Bootstrap
 */
ul.dropdown-menu li a i,
ul.dropdown-menu li a span {
  margin-right: 15px;
  width: 15px;
  max-width: 15px;
}
ul.dropdown-menu li.disabled a {
  color: #aaaaaa;
}
ul.dropdown-menu li.disabled a:hover {
  color: #aaaaaa;
}
ul.dropdown-menu li form {
  margin-left: 15px;
}
.rci-focus-border {
  border-color: rgba(238, 53, 56, 0.5);
  border-width: 2px;
  box-shadow: none;
}
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
  border-color: rgba(238, 53, 56, 0.5);
  border-width: 2px;
  box-shadow: none;
}
/* Paginação de resultados de busca */
.pagination {
  margin: 0;
}
.pagination li.active a {
  background-color: #ee3538;
  border-color: #ee3538;
}
.pagination li.active:hover {
  background-color: #ee3538;
}
.pagination li a {
  color: #ee3538;
}
.pagination li a:hover {
  color: #ee3538;
}
.pagination .active a:hover {
  background-color: #ee3538;
  border-color: #ee3538;
}
/* Caixas de alerta (mensagens para o usuário)  da aplicação. */
.alert {
  border: none;
  border-radius: 0;
  font-family: rci-font;
  padding: 8px;
  margin-bottom: 10px;
  /* Alerta com mensagens de falha na aplicação */
  /* Alerta com mensagens de sucesso */
}
.alert ul {
  margin-bottom: 0;
}
.alert.alert-dismissable .close {
  top: -7px;
  right: 0;
}
.alert .rci-alert-title {
  font-size: 15px;
  margin-bottom: 3px;
}
.alert.alert-danger {
  color: #333333;
  background-color: #ffe6dc;
}
.alert.alert-danger .rci-alert-symbol {
  color: #ee3538;
}
.alert.alert-danger.alert-dismissable .close {
  color: #333333;
}
.alert.alert-success {
  color: #ee3538;
  background-color: inherit;
  border: 1px #ee3538 solid;
}
.alert.alert-success .rci-alert-symbol {
  color: #ee3538;
}
.alert.alert-success.alert-dismissable .close {
  color: #ee3538;
}
.rci-validation-error {
  padding: 5px;
  display: inline-block;
  color: #f57900;
  font-size: small;
  padding-top: 3px;
}
.rci-validation-error :before {
  content: '*';
}
/* Botões da aplicação. Em caso de alterações neste estilo, é importante sincronizar com as definições
   do arquivo material.less. Este outro arquivo, referente aos estilos do framework Angular Material,
   também possuem defnições de estilo de botões empregados na aplicação. */
.btn {
  background-color: white;
  color: #333333;
  border: solid 1px #dddddd;
  font-size: 15px;
}
.btn:hover {
  border: solid 1px #777777;
}
.btn.disabled,
.btn[disabled] {
  color: #aaaaaa;
}
.btn.disabled:hover,
.btn[disabled]:hover {
  border: solid 1px #dddddd;
}
.btn.rci-focusable:focus {
  border-color: #ee3538;
}
.btn.rci-focusable:focus:hover {
  border-color: #ee3538;
}
.btn.btn-toggled {
  border-color: #ee3538;
  background-color: #fcf7d0;
}
.btn-primary:hover,
.btn-primary:active {
  background-color: #777777 !important;
  border-color: white !important;
}
.btn-primary:focus {
  background-color: #aaaaaa !important;
  border-color: white !important;
}
/* 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;
}
/* Ajustes de cores das abas dos tabbed panes */
.nav-tabs {
  border-color: #b3b3b3;
}
.nav-tabs li a {
  font-size: 13px;
  border-radius: 8px 8px 0 0;
  background-color: #777777;
  color: white;
}
.nav-tabs li a:hover {
  background-color: #666 !important;
  color: white;
}
.nav-tabs li.active a {
  border-right-color: #b3b3b3 !important;
  border-top-color: #b3b3b3 !important;
  border-left-color: #b3b3b3 !important;
}
.nav-tabs li.active a:hover {
  background-color: white !important;
}
.nav-tabs li.disabled a {
  border-bottom-style: solid;
  border-bottom-color: #b3b3b3 !important;
  background-color: #f2f2f2 !important;
  color: #d0d0d0;
}
.tab-content {
  padding: 8px 2px;
}
/*
 * Ajustes em estilos do Angular Material
 */
/* Aplicando a identidade visual da aplicação na barra superior dos diálogos */
md-toolbar {
  font-size: 13px;
  min-height: 32px;
}
md-toolbar.md-default-theme:not(.md-menu-toolbar),
md-toolbar:not(.md-menu-toolbar) {
  font-family: rci-font;
  color: white;
  background-color: #ee3538;
}
.md-toolbar-tools {
  height: inherit;
}
/* Garantindo uma pequena margem entre os botões que são dispostos na barra de botões dos diálogos */
md-dialog-actions .btn {
  margin-left: 5px;
}
/* Botões da aplicação. Em caso de alterações neste estilo, é importante sincronizar com as definições
   do arquivo bootstrap.less. Este outro arquivo, referente aos estilos do framework Bootstrap,
   também possuem defnições de estilo de botões empregados na aplicação. */
.md-button:not(.md-icon-button) {
  background-color: white;
  color: #333333;
  border: solid 1px #dddddd;
  font-family: rci-font;
  font-size: 15px;
  text-transform: inherit;
  border-radius: 3px;
  letter-spacing: inherit;
}
.md-button:not(.md-icon-button):hover {
  border: solid 1px #777777;
}
.md-button:not(.md-icon-button).disabled,
.md-button:not(.md-icon-button)[disabled] {
  color: #aaaaaa;
}
.md-button:not(.md-icon-button).disabled:hover,
.md-button:not(.md-icon-button)[disabled]:hover {
  border: solid 1px #dddddd;
}
.md-button:not(.md-icon-button).md-default-theme.md-primary,
.md-button:not(.md-icon-button).md-primary {
  color: #333333;
}
.md-button:not(.md-icon-button).md-default-theme:not([disabled]):hover,
.md-button:not(.md-icon-button):not([disabled]):hover {
  background: inherit;
}
.md-button:not(.md-icon-button).md-default-theme:not([disabled]).md-focused,
.md-button:not(.md-icon-button):not([disabled]).md-focused {
  border-color: #ee3538;
  background-color: inherit;
}
.md-button:not(.md-icon-button).md-default-theme:not([disabled]).md-focused:hover,
.md-button:not(.md-icon-button):not([disabled]).md-focused:hover {
  border-color: #ee3538;
}
/*
 * Configurando as cores dos componentes checkbox.
 */
md-checkbox.md-checked .md-icon {
  background-color: black;
}
/*
 * Definimos que todas as tabelas da aplicação possuem largura 100%. Isso tem como efeito colateral
 * atrapalhar o layout do seletor de datas no calendário. Vamos corrigir isso aplicando largura
 * automática especificamente a tabela usada pelo seletor de datas.
 */
table.md-calendar-day-header {
  width: auto;
  max-width: auto;
}
/*
 * As margens do seletor de hora eram exageradas. Melhoramos isso abaixo:
 */
md-time-picker md-input-container {
  margin-bottom: 0;
  margin-top: 4px;
}
md-toast {
  position: fixed !important;
  right: 0;
}
body.md-toast-animating {
  overflow: auto !important;
}
.rci-select-list .items-list {
  max-height: 100px;
  width: 100%;
  overflow-y: auto;
  border-radius: 1px;
  border: solid 1px #cccccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  padding: 3px 3px;
}
.rci-select-list .items-list .select-list-item {
  min-height: 20px;
  width: 100%;
  padding: 2px;
}
.rci-select-list .items-list .select-list-item .item-del-btn {
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  color: #777777;
  display: inline-block;
  float: right;
  font-size: 10px;
  padding: 1px;
  min-width: 22px;
  padding: 3px 1px 1px 1px;
  margin-left: 5px;
}
.rci-select-list .items-list .select-list-item .item-del-btn:focus {
  outline: dotted 1px #ccc;
}
.rci-select-list .items-list .select-list-item .item-del-btn.disabled,
.rci-select-list .items-list .select-list-item .item-del-btn[disabled] {
  cursor: default;
  pointer-events: none;
  color: #dddddd;
}
.rci-select-list .items-list .select-list-item .item-del-btn.disabled:hover,
.rci-select-list .items-list .select-list-item .item-del-btn[disabled]:hover {
  outline: none;
}
.rci-select-list .items-list .select-list-item .item-del-btn.disabled:focus,
.rci-select-list .items-list .select-list-item .item-del-btn[disabled]:focus {
  outline: none;
}
.rci-select-list .select-list-item:nth-child(even) {
  background-color: #f5f5f5;
}
.rci-select-list .select-add-panel {
  width: 100%;
}
.rci-select-list .select-add-panel .ui-select-container {
  display: inline-block;
}
.rci-select-list .select-add-panel .ui-select-placeholder {
  display: inline-block;
}
.rci-select-list .select-add-panel .item-add-btn {
  float: right;
  margin-top: 4px;
}
.mini-photo {
  padding-bottom: 4px;
  padding-right: 4px;
  max-width: 28px;
  max-height: 28px;
}
.mini-photo.adminPhoto {
  max-width: 34px;
  max-height: 34px;
}
/* Estilo para a página de login da aplicação */
/*
 * Página de login
 */
#login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('../img/login/loginBackground.jpg');
  background-repeat: repeat;
  background-position: top;
  background-size: cover;
  background-color: black;
}
#login-error-panel {
  position: absolute;
  margin: auto;
  width: auto;
  height: auto;
  bottom: 10%;
  left: 0px;
  padding: 22px;
  background-color: rgba(255, 255, 255, 0.6);
  /**color: rgb(188, 21, 21);**/
  color: rgba(0, 0, 0, 0.7);
  font-family: rci-font;
  font-size: 16px;
  font-weight: bold;
  max-width: 600px;
}
#login-error-panel i {
  color: #ee3538;
  vertical-align: -2%;
}
#login-panel {
  position: absolute;
  margin: auto;
  width: 400px;
  height: 300px;
  bottom: 10%;
  right: 5%;
  margin-top: -200px;
  margin-left: -200px;
  padding: 40px;
  background-color: rgba(0, 0, 0, 0.7);
  color: rgba(200, 200, 200, 0.8);
  font-family: rci-font;
}
#login-panel input {
  font-family: rci-font;
  font-weight: bold;
  border-width: 0;
}
#login-panel input:focus {
  border-color: rgba(238, 53, 56, 0.5);
  border-width: 1px;
  box-shadow: 0 0 4px rgba(238, 53, 56, 0.85);
}
#login-panel input[type='submit'] {
  background-color: #ee3538;
  color: white;
  border-width: 1px;
  border-color: #ee3538;
  box-shadow: none;
}
#login-panel input[type='submit']:focus,
#login-panel input[type='submit']:hover:not([disabled]) {
  border-color: white;
}
.rci-login-error {
  color: white;
}
#login-logo-rci {
  position: absolute;
  top: 2%;
  left: 0;
}
/* Estilo para o menu superior principal da aplicação */
/*
 * Estilos para o menu superior do sistema.
 */
.rci-topmenu {
  position: relative;
  z-index: 40;
  background-color: #F0F0F0;
  background-image: url("../img/topmenu/menuBackgroundCorner.png"), url("../img/topmenu/menuBackgroundPattern.png");
  background-position: top left, top left;
  background-repeat: no-repeat, repeat;
  background-size: contain, contain;
  height: 50px;
  width: 100%;
  border-width: 1px;
  border-style: none none solid none;
  border-color: #E2E2E2;
  vertical-align: middle;
}
#menu-logo {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-top: 3px;
  margin-left: 10px;
  vertical-align: middle;
  text-align: center;
  font-size: large;
  display: inline-block;
}
#notifications-btn {
  position: relative;
  width: 36px;
  height: 36px;
  margin-top: 7px;
  margin-right: 10px;
  display: inline-block;
  float: right;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  line-height: 34px;
  color: rgba(255, 255, 255, 0.7);
  font-family: "rci-font";
  font-weight: bold;
  font-size: 10px;
  background-image: url('../img/topmenu/notificationsBtn.png');
  background-repeat: no-repeat;
  background-size: contain;
}
#notifications-btn.active {
  background-image: url('../img/topmenu/newNotifications.png');
}
#notifications-btn:focus {
  outline: none;
}
#user-thumbnail {
  position: relative;
  width: 40px;
  height: 40px;
  margin-top: 7px;
  margin-right: 20px;
  display: inline-block;
  float: right;
  cursor: pointer;
}
#user-thumbnail:focus {
  outline: none;
}
#user-thumbnail-photo-decoration {
  position: relative;
  top: 0;
  left: 0;
}
#user-thumbnail-photo-content {
  position: absolute;
  top: 2px;
  left: 2px;
}
/* Estilo para o menu suspenso com dados do usuário corrente */
/*
 * Definição de estilos para o menu superior suspenso, contendo a foto do usuário e acesso a funcionalidades
 * relacionadas ao seu perfil. Conhecido também como o "cartão de visitas". 
 */
#user-menu {
  position: fixed;
  right: 20px;
  width: 400px;
  height: 180px;
  z-index: 30;
  background-color: white;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
  display: table;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#user-menu-photo-cell {
  width: 134px;
  height: 100%;
  padding: 12px;
  background-color: #ee3538;
  background-image: url('../img/usermenu/photoCellBackground.png');
  vertical-align: top;
}
#user-menu-photo {
  position: relative;
  top: 0;
  left: 0;
}
#user-menu-photo-decoration {
  position: relative;
  top: 0;
  left: 0;
}
#user-menu-photo-content {
  position: absolute;
  top: 6px;
  left: 6px;
}
#user-menu-data-cell {
  width: 100%;
  vertical-align: top;
  padding: 15px 20px 15px 12px;
  font-family: rci-font;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#user-menu-data-cell h1 {
  color: #ee3538;
  font-weight: bold;
  font-size: 24px;
  margin-top: 0px;
}
#user-menu-data-cell h2 {
  color: #666;
  font-weight: bold;
  font-size: 14px;
  margin-top: 0px;
  margin-bottom: 15px;
}
#user-menu-data-cell i {
  color: #ee3538;
}
#user-menu-data-cell a {
  color: #ee3538;
  font-style: italic;
}
.user-menu-electronic-address {
  white-space: nowrap;
}
#user-menu-btn-area {
  text-align: right;
  padding-right: 9px;
  padding-bottom: 8px;
  padding-top: 3px;
  padding-left: auto;
  font-size: 18px;
  background-image: url('../img/usermenu/powerButtonDecoration.png');
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 0;
  margin-left: auto;
  height: 30px;
}
#user-menu-btn-area > table {
  margin-right: 0;
  margin-left: auto;
  margin-top: 0;
  margin-bottom: auto;
  height: auto;
  width: auto;
}
.user-menu-btn {
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  cursor: pointer;
  color: #ee3538;
}
.user-menu-btn:hover {
  font-size: 20px;
}
.user-menu-btn:focus {
  outline: none;
}
.rci-user-menu-hidden {
  /*
	 * Inicialmente utilizamos a estratégia de margem negativa para ocultar o menu.
	 * Mas assim que o conteúdo do menu se tornou dinâmico, esta estratégia falhou
	 * pois não era possível prever o tamanho necessário da margem para ocultar
	 * o menu por completo. A estratégia de translate funciona para qualquer tamanho
	 * de menu. Observar que aplicamos uma margem de segurança de 5% para que a sombra
	 * do menu também seja ocultada durante o procedimento de retração.
	 */
  -ms-transform: translate(0, -105%);
  /* IE 9 */
  -webkit-transform: translate(0, -105%);
  /* Safari */
  transform: translate(0, -105%);
}
.rci-user-menu-visible {
  -ms-transform: translate(0, 0);
  /* IE 9 */
  -webkit-transform: translate(0, 0);
  /* Safari */
  transform: translate(0, 0);
}
/* Estilo para a página com a listagem de clientes */
/*
 * Estilos para página contendo a lista de clientes.
 */
/*
 * Estrutura geral da página de clientes. 
 */
.rci-client-container {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  padding: 5px 5px 25px 5px;
}
.rci-client-container .rci-client-data-section {
  flex-basis: 0;
  flex-grow: 4;
  min-width: 750px;
  margin: 15px 10px 15px 15px;
}
.rci-client-container .rci-client-filter-section {
  flex-basis: 0;
  flex-grow: 1;
  min-width: 250px;
  margin: 15px 15px 15px 10px;
}
/* Quando o menu principal do sistema está fixado, existe menos espaço de exibição para a tabela, e consequentemente,
   o algoritmo de layout acaba dispobilizando menos colunas para exibição. Com a quantidade menor de colunas para
   exibição, a tabela pode ser menos exigente quanto a quantidade mínima de largura. */
.pinned-menu .rci-client-data-section {
  min-width: 600px;
}
/*
 * Tabela de clientes
 */
.rci-client-table {
  color: #333333;
  font-size: 13px;
  word-break: break-all;
  word-break: break-word;
  /* Coluna dos retratos */
}
.rci-client-table th {
  color: #777777;
  border-bottom: 2px solid #dddddd;
  padding: 8px;
  line-height: 1.4;
}
.rci-client-table th.rci-client-column-name {
  word-break: keep-all;
  white-space: nowrap;
}
.rci-client-table th.rci-client-column-name i {
  margin-right: 5px;
  visibility: hidden;
}
.rci-client-table th.rci-client-column-name i.active {
  visibility: visible;
}
.rci-client-table tr.selected {
  background-color: #fcf7d0;
}
.rci-client-table td.rci-client-clnimg {
  text-align: center;
  width: 45px;
}
.rci-client-table td.rci-client-clnimg img {
  max-width: 32px;
  max-height: 32px;
}
.rci-client-table td.rci-client-clneaddress span {
  font-size: 90%;
}
.rci-client-table td.rci-client-clnaction {
  font-size: 90%;
  max-width: 120px;
  vertical-align: top;
}
.rci-client-table > tbody > tr > td {
  padding: 8px;
  line-height: 1.4;
  border-top: 1px solid #dddddd;
}
/*
 * Menu superior com ações
 */
.rci-client-menubar {
  margin-bottom: 10px;
  height: 34px;
  position: relative;
}
.rci-client-menubar .rci-btn-group {
  display: inline-block;
}
.rci-client-menubar .btn {
  font-size: 13px;
  max-width: 34px;
  max-height: 34px;
  margin-right: 4px;
}
.rci-client-menubar .rci-client-menu-separator {
  display: inline-block;
  width: 10px;
}
.rci-client-menubar .rci-client-counter {
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: rci-font;
  font-size: 13px;
  color: #333333;
}
.rci-client-menubar .av-table-counter {
  margin: 7px 10px 0px 10px;
  font-family: rci-font;
  font-size: 13px;
  color: #333333;
}
/*
 * Filtro de clientes
 */
.rci-client-text-filter {
  margin-top: 5px;
}
.rci-client-advanced-box {
  width: 100%;
  text-align: right;
  font-size: 13px;
}
.rci-filter-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.rci-filter-panel {
  flex-grow: 1;
  flex-basis: auto;
  margin: 0 10px 0 10px;
  /* Barra de título de cada filtro */
  /* Corpo do filtro, onde ficam os botões */
  /* Quando o painel está contraído */
}
.rci-filter-panel .rci-filter-title {
  color: #ee3538;
  padding: 3px 0 0 0;
  height: 25px;
  vertical-align: middle;
  margin-top: 10px;
  font-family: rci-font;
  font-size: 13px;
  cursor: pointer;
  /* Ícone de expandir/contrair na barra de título */
}
.rci-filter-panel .rci-filter-title i {
  float: right;
  margin-top: 7px;
}
.rci-filter-panel .rci-filter-title-summary {
  display: none;
}
.rci-filter-panel .rci-filter-body {
  overflow-y: auto;
  max-height: 200px;
  /* approximate max height */
  transition-property: all;
  transition-duration: 0.5s;
  border-top: solid 1px #ee3538;
  padding-top: 7px;
  /* Botão dentro do painel de filtragem */
}
.rci-filter-panel .rci-filter-body.tall {
  max-height: 400px;
  /* approximate max height */
}
.rci-filter-panel .rci-filter-body.towering {
  max-height: 600px;
  /* approximate max height */
}
.rci-filter-panel .rci-filter-body .rci-filter-btn {
  background-color: white;
  color: #333333;
  border: solid 1px #dddddd;
  margin: 1px 4px 4px 1px;
  min-width: 100px;
  max-width: 300px;
  font-size: 13px;
  /* Quando o botão está selecionado */
}
.rci-filter-panel .rci-filter-body .rci-filter-btn.selected-filter {
  border: solid 2px #ee3538;
  margin: 0 4px 3px 1px;
  background-color: #fcf7d0;
  color: #ee3538;
}
.rci-filter-panel.collapsed .rci-filter-body {
  max-height: 0;
  border-top: solid 1px rgba(238, 53, 56, 0);
  transition-property: all;
  transition-duration: 0.5s;
}
.rci-filter-panel.collapsed .rci-filter-title-summary {
  display: inline-block;
}
.rci-filter-panel.at-transition .rci-filter-body {
  overflow-y: hidden;
}
.rci-filter-panel.unknown-height .rci-filter-body {
  max-height: unset;
}
.rci-filter-panel.unknown-height.collapsed .rci-filter-body {
  height: 0;
}
/*
 * Seção contendo o paginador de resultados.
 */
.rci-client-pagination-section {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}
/*
 * Tabela utilizada para estruturar o filtro de datas na página de leads.
 */
.lead-date-filter-table {
  max-width: 250px;
}
/*
 * Botão de limpar o filtro de datas.
 */
.rci-client-clear-filter-btn {
  text-align: center;
  vertical-align: middle;
  font-size: 10px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  padding: 0;
  margin-left: 10px;
}
.breadcumb-panel {
  padding-top: 5px;
}
.breadcumb-panel .breadcumb {
  font-family: rci-font;
  font-size: 12px;
  font-weight: bold;
  color: white;
  background-color: #dddddd;
  border-radius: 3px;
  padding: 5px 7px 4px 7px;
  text-transform: uppercase;
  display: inline-block;
}
.breadcumb-panel .breadcumb-arrow {
  color: #dddddd;
  font-weight: bold;
  padding-left: 2px;
}
/* Estilo para a página de perfil de clientes */
/*
 * Folha de estilos da página de visualização de clientes (perfil do cliente).
 */
/* 
 * Estrutura geral da página. Contém duas colunas Flex. A primeira, com dados básicos do cliente.
 * A segunda, com dados de parceria comercial e relacionamento. A primeira coluna ocupa a maior
 * parte da tela. Quando a tela é reduzida, a segunda coluna é jogada para baixo, gerando uma
 * nova linha.
 */
.viewcli-main-container {
  padding: 20px;
}
.contact-editing-tab,
.viewcli-dataset-data {
  font-size: 13px;
  /* Bootstrap checkbox class */
}
.contact-editing-tab .rci-viewcli-table,
.viewcli-dataset-data .rci-viewcli-table,
.contact-editing-tab .rci-contact-editor-table,
.viewcli-dataset-data .rci-contact-editor-table {
  width: auto;
}
.contact-editing-tab .rci-viewcli-table.edit-mode td:first-child,
.viewcli-dataset-data .rci-viewcli-table.edit-mode td:first-child,
.contact-editing-tab .rci-contact-editor-table.edit-mode td:first-child,
.viewcli-dataset-data .rci-contact-editor-table.edit-mode td:first-child {
  vertical-align: top;
  padding-top: 6px;
}
.contact-editing-tab .rci-viewcli-table td:first-child,
.viewcli-dataset-data .rci-viewcli-table td:first-child,
.contact-editing-tab .rci-contact-editor-table td:first-child,
.viewcli-dataset-data .rci-contact-editor-table td:first-child {
  text-align: right;
  padding-right: 15px;
  white-space: nowrap;
}
.contact-editing-tab .rci-viewcli-table td:first-child:after,
.viewcli-dataset-data .rci-viewcli-table td:first-child:after,
.contact-editing-tab .rci-contact-editor-table td:first-child:after,
.viewcli-dataset-data .rci-contact-editor-table td:first-child:after {
  content: ":";
}
.contact-editing-tab .rci-viewcli-table td:first-child:empty:after,
.viewcli-dataset-data .rci-viewcli-table td:first-child:empty:after,
.contact-editing-tab .rci-contact-editor-table td:first-child:empty:after,
.viewcli-dataset-data .rci-contact-editor-table td:first-child:empty:after {
  content: none;
}
.contact-editing-tab .rci-viewcli-table td:last-child,
.viewcli-dataset-data .rci-viewcli-table td:last-child,
.contact-editing-tab .rci-contact-editor-table td:last-child,
.viewcli-dataset-data .rci-contact-editor-table td:last-child {
  color: #777777;
}
.contact-editing-tab .rci-viewcli-table td .rci-validation-error,
.viewcli-dataset-data .rci-viewcli-table td .rci-validation-error,
.contact-editing-tab .rci-contact-editor-table td .rci-validation-error,
.viewcli-dataset-data .rci-contact-editor-table td .rci-validation-error {
  vertical-align: top;
  margin-top: 3px;
}
.contact-editing-tab input,
.viewcli-dataset-data input {
  font-size: 13px;
  margin: 2px 0;
  display: inline-block;
}
.contact-editing-tab input[type="text"],
.viewcli-dataset-data input[type="text"],
.contact-editing-tab input[type="number"],
.viewcli-dataset-data input[type="number"],
.contact-editing-tab input[type="password"],
.viewcli-dataset-data input[type="password"] {
  height: 24px;
  width: 250px;
  border-radius: 1px;
  border-style: solid;
  box-shadow: inset 0px 0px 0px 0px red;
  box-sizing: border-box;
  padding: 2px 2px 1px 2px;
}
.contact-editing-tab input[type="text"]:focus,
.viewcli-dataset-data input[type="text"]:focus,
.contact-editing-tab input[type="number"]:focus,
.viewcli-dataset-data input[type="number"]:focus,
.contact-editing-tab input[type="password"]:focus,
.viewcli-dataset-data input[type="password"]:focus {
  /* 					border-width: 1px; */
}
.contact-editing-tab input[type="radio"],
.viewcli-dataset-data input[type="radio"] {
  height: 15px;
}
.contact-editing-tab input[type="checkbox"],
.viewcli-dataset-data input[type="checkbox"] {
  padding: 5px 0;
}
.contact-editing-tab textarea,
.viewcli-dataset-data textarea {
  width: 250px;
  height: 100px;
  font-size: 13px;
  margin: 2px 0;
  padding: 2px 3px 2px 3px;
  display: inline-block;
}
.contact-editing-tab label.radio-inline,
.viewcli-dataset-data label.radio-inline {
  margin: 5px 10px 3px 0;
}
.contact-editing-tab label.checkbox-inline,
.viewcli-dataset-data label.checkbox-inline {
  margin: 4px 20px 4px 0;
}
.contact-editing-tab label.checkbox-inline.whatsapp,
.viewcli-dataset-data label.checkbox-inline.whatsapp {
  margin: 0px;
}
.contact-editing-tab label.checkbox-inline[disabled="disabled"],
.viewcli-dataset-data label.checkbox-inline[disabled="disabled"] {
  color: #dddddd;
  cursor: default;
}
.contact-editing-tab select,
.viewcli-dataset-data select {
  border-radius: 1px;
  width: 250px;
  height: 24px;
  font-size: 13px;
  margin: 2px 0;
  padding: 0;
  display: inline-block;
}
.contact-editing-tab .ui-select-container,
.viewcli-dataset-data .ui-select-container {
  width: 250px;
  height: 24px;
  margin: 2px 0;
  padding: 2px 0;
  display: inline-block;
}
.contact-editing-tab .ui-select-container span,
.viewcli-dataset-data .ui-select-container span {
  outline: none;
  box-shadow: none;
  font-size: 13px;
  height: 24px;
  border-radius: 1px;
}
.contact-editing-tab .ui-select-container span:focus,
.viewcli-dataset-data .ui-select-container span:focus {
  outline: none !important;
}
.contact-editing-tab .ui-select-container span .ui-select-match-text,
.viewcli-dataset-data .ui-select-container span .ui-select-match-text {
  margin: 0;
  padding: 0;
  border: none;
  height: 18px;
}
.contact-editing-tab .ui-select-container .btn,
.viewcli-dataset-data .ui-select-container .btn {
  padding: 2px 4px;
}
.contact-editing-tab .ui-select-container .btn .caret,
.viewcli-dataset-data .ui-select-container .btn .caret {
  outline: none;
}
.contact-editing-tab .ui-select-container input,
.viewcli-dataset-data .ui-select-container input {
  outline: none;
  box-shadow: none;
}
.contact-editing-tab .ui-select-container input:focus,
.viewcli-dataset-data .ui-select-container input:focus {
  outline: none !important;
}
.contact-editing-tab .ui-select-container .ui-select-match,
.viewcli-dataset-data .ui-select-container .ui-select-match {
  outline: none;
  box-shadow: none;
}
.contact-editing-tab .ui-select-container .ui-select-match:focus,
.viewcli-dataset-data .ui-select-container .ui-select-match:focus {
  outline: none !important;
}
.contact-editing-tab md-datepicker,
.viewcli-dataset-data md-datepicker {
  margin: 20px 0;
}
.contact-editing-tab md-datepicker input,
.viewcli-dataset-data md-datepicker input {
  width: 50px;
}
.contact-editing-tab md-datepicker .md-datepicker-input-container,
.viewcli-dataset-data md-datepicker .md-datepicker-input-container {
  width: 100px;
  border: none;
}
.contact-editing-tab .md-datepicker-input,
.viewcli-dataset-data .md-datepicker-input {
  margin: 2px 0;
  padding: 0;
  vertical-align: middle;
}
.contact-editing-tab .md-button,
.viewcli-dataset-data .md-button {
  min-height: 24px;
  height: 24px !important;
}
.contact-editing-tab .md-button.md-icon-button,
.viewcli-dataset-data .md-button.md-icon-button {
  padding: 0;
  margin: 0;
}
.contact-editing-tab .md-icon-button,
.viewcli-dataset-data .md-icon-button {
  margin: 0;
  padding: 0;
  width: 22px;
  border-radius: 0;
}
.contact-editing-tab .md-icon-button md-icon,
.viewcli-dataset-data .md-icon-button md-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  padding-left: 4px;
}
.contact-editing-tab .md-icon-button.md-datepicker-triangle-button,
.viewcli-dataset-data .md-icon-button.md-datepicker-triangle-button {
  height: 22px;
  bottom: 1px;
  right: 18px;
}
.contact-editing-tab tags-input,
.viewcli-dataset-data tags-input {
  margin: 2px 0;
  width: 250px;
}
.contact-editing-tab tags-input .host,
.viewcli-dataset-data tags-input .host {
  margin: 2px 0;
}
.contact-editing-tab tags-input .tags,
.viewcli-dataset-data tags-input .tags {
  padding: 0;
  margin: 0;
  border-radius: 1px;
  border-color: #cccccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  /* Não consegui identificar porque o borda vermelha indicadora de foco só
			   é apresentada corretamente se a configuração de cores for realizada
			   tanto dentro do estilo focused quando dentro pseudo :focus. */
}
.contact-editing-tab tags-input .tags.focused,
.viewcli-dataset-data tags-input .tags.focused {
  border-color: rgba(238, 53, 56, 0.5);
  border-width: 2px;
  box-shadow: none;
}
.contact-editing-tab tags-input .tags.focused:focus,
.viewcli-dataset-data tags-input .tags.focused:focus {
  border-color: rgba(238, 53, 56, 0.5);
  border-width: 2px;
  box-shadow: none;
}
.contact-editing-tab tags-input .tags .tag-item,
.viewcli-dataset-data tags-input .tags .tag-item {
  font-size: 13px;
  font-family: rci-font;
  background: #aaaaaa;
  background-color: #aaaaaa;
  color: white;
  border: none;
}
.contact-editing-tab tags-input .tags .tag-item:focus,
.viewcli-dataset-data tags-input .tags .tag-item:focus {
  outline: dotted 1px #bbbbbb;
}
.contact-editing-tab tags-input .tags .tag-item .remove-button:active,
.viewcli-dataset-data tags-input .tags .tag-item .remove-button:active {
  color: #dddddd;
}
.contact-editing-tab tags-input .input,
.viewcli-dataset-data tags-input .input {
  margin-top: 2px;
  font-family: rci-font;
  font-size: 13px;
}
.contact-editing-tab .checkbox-container,
.viewcli-dataset-data .checkbox-container {
  width: 250px;
  display: inline-block;
}
.contact-editing-tab .checkbox,
.viewcli-dataset-data .checkbox {
  margin: 0;
  width: 85px;
}
.contact-editing-tab .rci-select-list,
.viewcli-dataset-data .rci-select-list {
  min-width: 250px;
  max-width: 250px;
}
.contact-editing-tab .rci-chkbox,
.viewcli-dataset-data .rci-chkbox {
  margin-right: 10px;
  min-width: 90px;
}
/* Definição de estilo para o campo de busca do componente ui-select. Tentamos fazer esta definição de forma mais
   específica, colocando o estilo dentro do container do componente, sem sucesso. */
input[type=search] {
  height: 20px;
  font-size: 13px;
  margin: 2px 0px 2px 0;
  padding: 0 2px;
  border-radius: 1px;
  width: 250px;
  max-width: 250px;
}
.rci-viewcli-phones {
  font-size: 13px;
  font-family: rci-font;
  color: #777777;
}
.rci-viewcli-phones i {
  color: #333333;
}
.rci-viewcli-eaddress {
  font-size: 13px;
  font-family: rci-font;
  word-break: break-all;
  word-break: break-word;
}
.rci-viewcli-eaddress .rci-viewcli-eaddress-icon {
  margin-right: 10px;
}
.rci-viewcli-eaddress .rci-viewcli-eaddress-address {
  color: #777777;
}
.rci-viewcli-address {
  font-family: rci-font;
  font-size: 13px;
  color: #777777;
}
.rci-viewcli-name {
  color: #ee3538;
  font-family: rci-font;
  font-weight: bold;
  font-size: 20px;
}
.rci-viewcli-category {
  color: #777777;
  font-family: rci-font;
  font-size: 14px;
  font-weight: bold;
  margin-top: 3px;
  margin-bottom: 20px;
}
.rci-viewcli-partner-section {
  border: 1px solid #dddddd;
  padding: 5px 5px 5px 10px;
  font-family: rci-font;
  font-size: 13px;
}
.rci-viewcli-partner-section .rci-viewcli-partner-due-date {
  font-size: 13px;
  font-family: rci-font;
  float: right;
}
.rci-viewcli-partner-table {
  margin: 12px 0 12px 0;
}
.rci-viewcli-partner-table td {
  font-family: rci-font;
  font-size: 13px;
  color: #777777;
}
.rci-viewcli-partner-table .rci-viewcli-partner-name {
  color: #ee3538;
  font-weight: bold;
}
.rci-viewcli-partner-table .rci-viewcli-partner-market-center {
  color: #777777;
  font-weight: bold;
}
.circle {
  background: #bbbbbb;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
/*
 * Está em uso tanto na página de visualização de dados de cliente quando na lista completa de leads.
 */
.pending-action {
  color: #ee3538;
}
.canceled-action {
  text-decoration: line-through;
}
.rci-viewcli-alert {
  background-color: #fcf7d0;
  color: #ed6c1b;
  padding: 7px;
  margin: 5px 10px 5px 0;
}
.rci-viewcli-status-bar {
  height: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.rci-viewcli-tag-status-box {
  margin-top: 20px;
  margin-bottom: 0;
}
.rci-viewcli-tag-status-box .rci-viewcli-tag {
  background-color: #dddddd;
  color: white;
  padding: 3px 7px 3px 7px;
  font-size: 13px;
  font-family: rci-font;
  display: inline-block;
  font-weight: bold;
  border-radius: 5px;
  margin-right: 5px;
  bottom: 30px;
  margin-bottom: 8px;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box {
  background-repeat: no-repeat;
  height: 42px;
  width: 80px;
  margin-top: 3px;
  margin-right: 15px;
  margin-bottom: 20px;
  position: relative;
  float: left;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box .rci-viewcli-phase-label {
  vertical-align: bottom;
  color: #ee3538;
  font-family: rci-font;
  font-size: 13px;
  position: absolute;
  white-space: nowrap;
  bottom: 0;
  left: 0;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-m6 {
  background-image: url('../img/client/lead-m6.png');
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-m6 .rci-viewcli-phase-label {
  left: 2px;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-m5 {
  background-image: url('../img/client/lead-m5.png');
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-m5 .rci-viewcli-phase-label {
  left: 2px;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-m4 {
  background-image: url('../img/client/lead-m4.png');
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-m4 .rci-viewcli-phase-label {
  left: 26px;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-m3 {
  background-image: url('../img/client/lead-m3.png');
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-m3 .rci-viewcli-phase-label {
  left: 26px;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-m2 {
  background-image: url('../img/client/lead-m2.png');
  width: 90px;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-m2 .rci-viewcli-phase-label {
  left: 40px;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-m1 {
  background-image: url('../img/client/lead-m1.png');
  width: 90px;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-m1 .rci-viewcli-phase-label {
  left: 40px;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-s2 {
  background-image: url('../img/client/lead-s2.png');
  width: 115px;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-s2 .rci-viewcli-phase-label {
  left: 55px;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-s1 {
  background-image: url('../img/client/lead-s1.png');
  width: 115px;
}
.rci-viewcli-tag-status-box .rci-viewcli-status-box.rci-viewcli-phase-s1 .rci-viewcli-phase-label {
  left: 55px;
}
/*
 * Label contendo o status comercial do cliente. Apresentado na parte superior da página com destaque.
 */
.rci-viewcli-status-label {
  color: #ee3538;
  font-weight: bold;
  display: block;
  clear: both;
}
.rci-viewcli-tabpane {
  margin: 20px;
  padding: 0;
}
/*
 * Anotações associadas ao cliente.
 */
.rci-viewcli-notes-table .rci-viewcli-note-row {
  border-bottom: solid 10px transparent;
}
.rci-viewcli-notes-table tr:nth-child(odd) .rci-viewcli-note-content {
  background-color: #fbf9f6;
}
.rci-viewcli-notes-table tr:nth-child(odd) .rci-viewcli-note-info {
  background-color: #fbfbfb;
}
.rci-viewcli-notes-table textarea {
  font-size: 13px;
}
.rci-viewcli-note-author {
  font-size: 13px;
  color: #ee3538;
  white-space: nowrap;
}
.rci-viewcli-note-info {
  font-family: rci-font;
  font-size: 12px;
  color: #777777;
  vertical-align: top;
  white-space: nowrap;
  padding: 2px 5px 10px 10px;
  max-width: 200px;
}
.rci-viewcli-note-info .rci-viewcli-note-photo {
  max-width: 50px;
}
.rci-viewcli-note-info .rci-viewcli-note-photo img {
  max-width: 50px;
  max-height: 50px;
}
.rci-viewcli-note-info .rci-viewcli-note-dates {
  padding: 2px 5px 0 10px;
  vertical-align: top;
  text-align: left;
}
.rci-viewcli-note-content {
  font-family: rci-font;
  font-size: 13px;
  color: #777777;
  vertical-align: top;
  padding: 8px 8px 30px 8px;
  position: relative;
}
.rci-viewcli-note-menu {
  margin-top: 5px;
  position: absolute;
  bottom: 5px;
  right: 10px;
}
.rci-viewcli-note-menu .btn {
  font-size: 11px;
}
.rci-viewcli-note-menu rci-checkbox {
  display: inline-flex;
  margin-right: 15px;
}
.viewcli-dataset {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: 20px;
}
.timeline {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap-reverse;
}
.timeline event-viewer {
  flex-grow: 3;
  flex-basis: 0;
  min-width: 200px;
  margin-right: 15px;
}
.timeline event-viewer-filter {
  flex-grow: 1;
  flex-basis: 0;
  margin-left: 15px;
}
.event-viewer .timeline-bg {
  background-image: url('../img/client/timeline.png');
  background-position: 50%;
  background-repeat: repeat-y;
}
.event-viewer .timeline-start-bg {
  background-image: url('../img/client/timeline.png');
  background-position: 50% 20px;
  background-repeat: no-repeat;
}
.event-viewer .timeline-stop-bg {
  background-image: url('../img/client/timelineStop.png');
  background-position: top center;
  background-repeat: no-repeat;
}
.event-viewer .timeline-end-bg {
  background-image: url('../img/client/timelineEnd.png');
  background-position: center top;
  background-repeat: no-repeat;
}
.event-viewer .event {
  font-family: rci-font;
  font-size: 13px;
  color: #777777;
  word-break: break-all;
  word-break: break-word;
  /* Nome do evento: Anotação, Telefonema, E-mail, etc */
  /* Tarja separadora de um novo dia */
  /* Indicações de data */
  /* Ícone que fica junto às indicações de data */
}
.event-viewer .event .event-icon-column {
  width: 15px;
  min-width: 15px;
  max-width: 15px;
  height: 15px;
  text-align: center;
  padding-top: 2px;
}
.event-viewer .event .event-timeline-column {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 15px;
  text-align: center;
}
.event-viewer .event .event-date-column {
  width: auto;
  padding-bottom: 8px;
  padding-top: 4px;
}
.event-viewer .event .event-type-column {
  width: auto;
  padding: 2px 10px 2px 5px;
  white-space: nowrap;
  color: #333333;
  background-color: #f0f0f0;
}
.event-viewer .event .event-type-column .event-type-icon {
  vertical-align: top;
  padding-top: 3px;
}
.event-viewer .event .event-type-column .event-type-icon.done-action {
  color: green;
}
.event-viewer .event .event-type-column .event-type-icon.pending-action {
  color: orange;
}
.event-viewer .event .event-type-column .event-type-icon.open-action {
  color: blue;
}
.event-viewer .event .event-type-column .event-type-icon.canceled-action {
  color: brown;
}
.event-viewer .event .event-type-column .event-btn {
  vertical-align: top;
  padding-top: 2px;
  width: 5px;
  color: #777777;
  outline: none;
  box-shadow: none;
}
.event-viewer .event .event-type-column .event-btn:focus {
  outline: none !important;
}
.event-viewer .event .event-type-column .event-btn.event-edit-btn {
  padding-top: 3px;
  padding-left: 15px;
}
.event-viewer .event .event-type-column .event-btn.event-delete-btn {
  padding-bottom: 2px;
  padding-left: 2px;
}
.event-viewer .event .event-type-column .event-btn:hover {
  color: #333333;
}
.event-viewer .event .event-type-column .event-time-type {
  display: inline-block;
  padding-right: 5px;
}
.event-viewer .event .event-type-column.event-type-CRMAction {
  color: #714f39;
  background-color: #f1e3da;
}
.event-viewer .event .event-type-column.event-type-CRMAction .event-btn {
  color: #987f70;
}
.event-viewer .event .event-type-column.event-type-CRMAction .event-btn:hover {
  color: #8e6a55;
}
.event-viewer .event .event-details-column {
  padding-top: 5px;
  padding-right: 30px;
}
.event-viewer .event .event-author-column {
  width: auto;
  padding-top: 5px;
  padding-bottom: 12px;
}
.event-viewer .event .event-date-header {
  /* 			background-color: #f0f0f0; */
}
.event-viewer .event .event-author-photo {
  max-width: 18px;
  max-height: 18px;
}
.event-viewer .event .event-date {
  color: #333333;
  font-weight: bold;
}
.event-viewer .event .event-date-icon {
  color: #333333;
  padding-bottom: 4px;
}
.rci-contact-editor {
  display: inline-block;
}
.rci-contact-editor .rci-contact-editor-table .country-code {
  display: inline-block;
  width: 100px;
}
.rci-contact-editor .rci-contact-editor-table .tel-number {
  display: inline-block;
  width: 147px !important;
}
.rci-contact-editor .rci-contact-editor-table .address-cell {
  display: inline-block;
}
.rci-contact-editor .rci-contact-editor-table .spacing-row {
  height: 10px;
}
.rci-contact-editor .rci-contact-editor-table .del-btn {
  display: inline-block;
  font-size: 10px;
  padding: 1px 1px 1px 1px;
  margin-left: 4px;
}
.rci-contact-editor .rci-contact-editor-table .del-btn:focus {
  outline: dotted 1px #ccc;
}
.rci-contact-editor .rci-contact-editor-table.compact td:first-child {
  width: 25px;
  text-align: center;
  vertical-align: middle;
  padding: 0px;
  white-space: nowrap;
}
.rci-contact-editor .rci-contact-editor-table.compact td:first-child:after {
  content: "";
}
.rci-contact-editor .rci-contact-editor-table.compact .tel-number {
  width: 122px !important;
}
.rci-contact-editor .rci-contact-editor-table.compact .eaddress-input {
  width: 225px;
}
.rci-contact-editor .btn-container {
  position: relative;
  margin: 0;
  padding: 0;
  height: 36px;
}
.rci-contact-editor .btn-container .add-btn {
  position: absolute;
  left: 166px;
  top: 0;
  margin-top: 4px;
  height: 24px;
  line-height: 24px;
  padding: 0px 12px;
  font-size: 13px;
}
.relatives-editor {
  display: inline-block;
}
.relatives-editor .add-btn {
  border: solid 1px #ccc;
  border-radius: 3px;
  background-color: white;
  /* É importante um padding de pelo menos 1px para "guardar lugar" para o aumento de largura da borda
	   quando o botão ganhar foco. */
  padding: 1px 8px;
  margin: 0;
  height: 30px;
  /* A altura da linha é 2px inferir para compensar o padding. */
  line-height: 28px;
  min-width: 20px;
  cursor: pointer;
  text-decoration: none;
  color: #333333;
  display: inline-block;
  outine: none;
  font-family: rci-font;
  height: 24px;
  line-height: 20px;
  font-size: 13px;
  float: right;
  margin-top: 10px;
}
.relatives-editor .add-btn.slim {
  height: 24px;
  line-height: 20px;
  font-size: 13px;
}
.relatives-editor .add-btn:hover {
  color: #333333;
  text-decoration: none;
  border: solid 1px #777;
}
.relatives-editor .add-btn:focus {
  color: #333333;
  text-decoration: none;
  border-color: rgba(238, 53, 56, 0.5);
  border-width: 2px;
  box-shadow: none;
  /* Com o aumento da largura da borda, compensamos reduzindo o padding, para o conteúdo não se mover. */
  padding: 0px 7px;
  outline: none;
}
.relatives-editor .add-btn.disabled,
.relatives-editor .add-btn[disabled] {
  border-color: #dddddd;
  color: #dddddd;
}
.relatives-editor .add-btn.disabled:hover,
.relatives-editor .add-btn[disabled]:hover {
  cursor: default;
  color: #dddddd;
  border-color: #dddddd;
  text-decoration: none;
}
.relatives-editor .add-btn.disabled:focus,
.relatives-editor .add-btn[disabled]:focus {
  color: #dddddd;
  text-decoration: none;
  border-color: #dddddd;
  box-shadow: none;
  outline: none;
}
.relatives-editor .add-relative-panel {
  display: inline-block;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-top: 10px;
  padding: 10px;
}
.relatives-editor .add-relative-panel .btn-panel {
  float: right;
  margin-top: 20px;
}
.rci-client-photo {
  position: relative;
  top: 0;
  left: 0;
}
.rci-client-photo.view-only {
  cursor: default;
  pointer-events: none;
}
.rci-client-photo-editor {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 165px;
  height: 170px;
  line-height: 170px;
  color: #777777;
  text-align: center;
  padding-top: 20px;
  padding-left: 10px;
  background: none;
}
.rci-client-photo-editor .photo-btn {
  display: inline-block;
  width: 50px;
  margin: 5px;
  line-height: 24px;
  cursor: pointer;
  visibility: hidden;
  outline: none;
}
.rci-client-photo-editor .photo-btn i {
  font-size: 35px;
}
.rci-client-photo-editor .photo-btn:hover {
  outline: 1px dotted;
}
.rci-client-photo-editor .photo-label {
  display: inline-block;
  line-height: 24px;
  visibility: hidden;
  padding-top: 25px;
  outline: none;
}
.rci-client-photo-editor .photo-label i {
  font-size: 35px;
}
.rci-client-photo-editor:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.rci-client-photo-editor:hover .photo-btn,
.rci-client-photo-editor:hover .photo-label {
  visibility: visible;
}
.rci-client-photo-decoration {
  position: relative;
  top: 0;
  left: 0;
}
.rci-client-photo-content {
  position: absolute;
  top: 6px;
  left: 6px;
}
/* Estilos de consultores */
.invite-btn-pane {
  text-align: center;
  padding-top: 5px;
}
.rci-select-list.team-member-list {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 500px;
}
.rci-select-list.team-member-list .items-list {
  max-height: 200px;
}
.rci-select-list.team-member-list .items-list .select-list-item {
  padding: 5px 0 5px 5px;
}
.rci-select-list.team-member-list .items-list .select-list-item .item-del-btn {
  padding-top: 6px;
}
.rci-select-list.team-member-list .items-list .select-list-item .member-detail-pane {
  margin-top: 5px;
}
.rci-select-list.team-member-list .select-add-panel {
  max-width: 250px;
}
/* Estilo para a página de revisão de notificações */
/*
 * Estilos para a página de revisão de notificações.
 */
.new-notification {
  opacity: 0;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
}
.hidden-notification {
  opacity: 0;
  display: none;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
}
.revealed-notification {
  opacity: 1;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
}
/* Estilo para a página de estatísticas CRM */
/* Container mais externo de centralização, apenas para garantir que o container mãe flutue dentro da janela com margens uniformes
   por todas as bordas. */
.crm-stats-center-container {
  display: flex;
  justify-content: center;
}
/* Container mãe, contendo o painel de filtragem do intervalo de interesse e o painel com os dados estatísticos propriamente. */
.crm-stats-container {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  font-family: rci-font;
}
/* Painel de filtragem do intervalo de interesse. */
.filter-panel {
  margin-top: 20px;
  background-color: #fafafa;
  padding: 10px;
  font-size: 90%;
}
.filter-panel .filter-title {
  margin-bottom: 15px;
}
.filter-panel .filter-columns {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}
.filter-panel .filter-columns .filter-fields-column {
  flex-basis: 0;
  flex-grow: 1;
}
.filter-panel .filter-columns .filter-fields-column .filter-fields-line {
  display: flex;
  align-items: baseline;
}
.filter-panel .filter-columns .filter-fields-column .filter-fields-line .filter-field-label {
  flex-basis: 90px;
}
.filter-panel .filter-columns .filter-fields-column .filter-fields-line md-checkbox {
  margin-left: 15px;
}
/* Painel com os dados estatísticos propriamente. */
.crm-stats-panel {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: rci-font;
  /* Colunas com diferentes dados estatísticos: divisão em categorias, fases dos leads, etc. */
  /* Coluna divisória entre colunas de dados. Contém o percentual de transição entre etapa na parte superior. */
}
.crm-stats-panel .stat-column {
  padding-top: 30px;
  min-width: 150px;
  flex-grow: 1;
  flex-basis: 0;
  /* Definição geral de estilos para as "caixinhas totalizadoras" que aparecem no painel. */
  /* Cabeçalho de uma das colunas de dados. */
  /* Agrupa as linhas com dados estatísticos de interesse daquela coluna. O agrupamento é importante para
		   podermos trabalhar com o pseudo CSS :first-child e aplicar estilo diferenciado na primeira linha. */
}
.crm-stats-panel .stat-column .count-box {
  flex-basis: 0;
  color: white;
  font-size: 11px;
  font-weight: bold;
  border-radius: 3px;
  padding: 1px 3px 2px 3px;
  min-width: 35px;
  text-align: center;
  margin-left: 3px;
}
.crm-stats-panel .stat-column .stat-column-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* Label com o nome da coluna de dados. */
  /* Caixa com a quantidade total de novos itens apresentada no cabeçalho de uma coluna de dados. */
  /* Caixa totalizadora de uma das colunas de dados. */
}
.crm-stats-panel .stat-column .stat-column-header .header-label {
  flex-grow: 1;
  flex-basis: 0;
  color: #ee3538;
  font-weight: bold;
}
.crm-stats-panel .stat-column .stat-column-header .total-box-diff {
  flex-basis: 0;
  color: white;
  font-size: 11px;
  font-weight: bold;
  border-radius: 3px;
  padding: 1px 3px 2px 3px;
  min-width: 35px;
  text-align: center;
  margin-left: 3px;
  color: #ee3538;
  border-color: #ee3538;
  border-width: 1px;
  border-style: solid;
  padding: 0px 3px 1px 3px;
}
.crm-stats-panel .stat-column .stat-column-header .total-box {
  background-color: #ee3538;
  flex-basis: 0;
  color: white;
  font-size: 11px;
  font-weight: bold;
  border-radius: 3px;
  padding: 1px 3px 2px 3px;
  min-width: 35px;
  text-align: center;
  margin-left: 3px;
}
.crm-stats-panel .stat-column .stat-lines-group {
  margin-top: 15px;
  margin-bottom: 10px;
  /* Linha com dados estatísticos de uma das categorias de interesse daquela coluna. */
}
.crm-stats-panel .stat-column .stat-lines-group .stat-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom-style: solid;
  border-bottom-color: #777777;
  border-bottom-width: 1px;
  background-color: appworkspace;
  padding-top: 5px;
  padding-bottom: 5px;
  min-height: 20px;
  /* Caixa com o label de uma das categorias. */
  /* Caixa com a diferença de itens de uma das categorias. */
  /* Caixa com o total de uma das categorias. */
  /* Caixa com o total acumulado de apresentações passadas (realizadas + canceladas) */
  /* Caixa com as apresentações passadas (realizadas + canceladas) dentro do intervalo de interesse */
  /* Definições de estilo especiais para o caso em que a linha de estatísticas está
				   sendo utilizada como container para a caixa com o total de apresentações passadas. */
}
.crm-stats-panel .stat-column .stat-lines-group .stat-line:first-child {
  border-top-style: solid;
  border-top-color: #777777;
  border-top-width: 1px;
}
.crm-stats-panel .stat-column .stat-lines-group .stat-line .category-label {
  flex-grow: 1;
  flex-basis: 0;
}
.crm-stats-panel .stat-column .stat-lines-group .stat-line .category-diff {
  flex-basis: 0;
  color: white;
  font-size: 11px;
  font-weight: bold;
  border-radius: 3px;
  padding: 1px 3px 2px 3px;
  min-width: 35px;
  text-align: center;
  margin-left: 3px;
  color: #777777;
  background-color: #dddddd;
}
.crm-stats-panel .stat-column .stat-lines-group .stat-line .category-total {
  flex-basis: 0;
  color: white;
  font-size: 11px;
  font-weight: bold;
  border-radius: 3px;
  padding: 1px 3px 2px 3px;
  min-width: 35px;
  text-align: center;
  margin-left: 3px;
  background-color: #333333;
}
.crm-stats-panel .stat-column .stat-lines-group .stat-line .past-presentation-total {
  flex-basis: 0;
  color: white;
  font-size: 11px;
  font-weight: bold;
  border-radius: 3px;
  padding: 1px 3px 2px 3px;
  min-width: 35px;
  text-align: center;
  margin-left: 3px;
  color: #333333;
  border-color: #333333;
  border-width: 1px;
  border-style: solid;
  padding: 0px 3px 1px 3px;
}
.crm-stats-panel .stat-column .stat-lines-group .stat-line .past-presentation-diff {
  flex-basis: 0;
  color: white;
  font-size: 11px;
  font-weight: bold;
  border-radius: 3px;
  padding: 1px 3px 2px 3px;
  min-width: 35px;
  text-align: center;
  margin-left: 3px;
  color: #777777;
  border-color: #aaaaaa;
  border-width: 1px;
  border-style: solid;
  padding: 0px 3px 1px 3px;
}
.crm-stats-panel .stat-column .stat-lines-group .stat-line.stat-line-p-total {
  justify-content: flex-end;
  border-bottom-style: none;
}
.crm-stats-panel .percent-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: stretch;
  /* Caixa de destaque para o dado percentual. */
  /* Linha divisória vertical apresentada no centro da coluna. */
}
.crm-stats-panel .percent-column .percent-box {
  border-color: #777777;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  color: #333333;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  padding: 2px 3px 2px 3px;
}
.crm-stats-panel .percent-column .divide {
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: #ee3538;
  width: 1px;
  min-width: 1px;
  max-width: 1px;
  min-height: 10px;
  flex-grow: 2;
}
/* Painel de sinalização de falta de datas para o período escolhido. */
.crm-stats-no-data-panel {
  margin-top: 20px;
  margin-bottom: 20px;
  font-style: italic;
}
/* Estilo para a página do dashboard */
/*
 * Estilos para o dashboard.
 */
/* Painel dashboard. */
.rci-dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 30px;
  font-family: rci-font;
  /* Definição geral de estilos para as "caixinhas totalizadoras" que aparecem no painel. */
  /* Um quadro de informações */
}
.rci-dashboard .dashboard-cell {
  width: auto;
  padding: 0px 10px 30px 10px;
  text-align: center;
}
.rci-dashboard .dashboard-cell.pipeline-chart {
  width: 500px;
}
.rci-dashboard .dashboard-cell.lead-category-chart {
  width: 500px;
}
.rci-dashboard .dashboard-cell .chart-title {
  width: 100%;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: #333333;
}
.rci-dashboard .dashboard-cell .chart-subtitle {
  padding-top: 5px;
  width: 100%;
  font-weight: bold;
  text-align: center;
  color: #777777;
  font-size: 90%;
}
.rci-dashboard .count-box {
  flex-basis: 0;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 3px;
  padding: 2px 3px 2px 3px;
  min-width: 50px;
  text-align: center;
  margin-left: 3px;
}
.rci-dashboard .dashboard-panel .dashboard-panel-header {
  display: flex;
  align-content: stretch;
  justify-content: space-between;
  background: #ee3538;
  color: white;
  font-weight: bold;
  width: 100%;
  padding: 6px;
}
.rci-dashboard .dashboard-panel .dashboard-panel-header .dph-total {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
  font-size: 180%;
  line-height: 35px;
  min-height: 35px;
}
.rci-dashboard .dashboard-panel .dashboard-panel-header .dph-details {
  font-size: 90%;
  flex-basis: 0;
  flex-grow: 3;
  text-align: right;
}
.rci-dashboard .dashboard-panel .dashboard-panel-body {
  padding-top: 10px;
  /* Agrupa as linhas com dados estatísticos de interesse daquela coluna. O agrupamento é importante para
			   podermos trabalhar com o pseudo CSS :first-child e aplicar estilo diferenciado na primeira linha. */
}
.rci-dashboard .dashboard-panel .dashboard-panel-body .dashboard-panel-footer {
  background: #aaaaaa;
  color: white;
  font-weight: bold;
  font-size: 90%;
  width: 100%;
  padding: 8px;
  text-align: center;
}
.rci-dashboard .dashboard-panel .dashboard-panel-body .stat-lines-group {
  padding: 10px;
  /* Linha com dados estatísticos de uma das categorias de interesse daquela coluna. */
}
.rci-dashboard .dashboard-panel .dashboard-panel-body .stat-lines-group .stat-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 5px;
  padding-bottom: 5px;
  min-height: 20px;
  font-size: 95%;
  /* Caixa com o label de uma das categorias. */
  /* Caixa com a fração de conversão de uma das categorias. */
  /* Caixa com o percentual de conversão de uma das categorias. */
}
.rci-dashboard .dashboard-panel .dashboard-panel-body .stat-lines-group .stat-line .category-label {
  flex-grow: 1;
  flex-basis: 0;
  text-align: right;
  padding-top: 2px;
  padding-right: 15px;
}
.rci-dashboard .dashboard-panel .dashboard-panel-body .stat-lines-group .stat-line .category-total {
  flex-basis: 0;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 3px;
  padding: 2px 3px 2px 3px;
  min-width: 50px;
  text-align: center;
  margin-left: 3px;
  min-width: 40px;
  background-color: #FF430A;
}
.rci-dashboard .dashboard-panel .dashboard-panel-body .stat-lines-group .stat-line .category-percent {
  flex-basis: 0;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 3px;
  padding: 2px 3px 2px 3px;
  min-width: 50px;
  text-align: center;
  margin-left: 3px;
  background-color: #b00000;
}
/* Estilo para market centers */
.mc-admin {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  outline: none;
  box-shadow: none;
}
.mc-admin:focus {
  outline: none !important;
}
.mc-admin mini-photo {
  margin: 3px 0 3px 5px;
}
.mc-admin .admin-name {
  color: #777777;
}