body {
  font-family: 'Segoe UI'; }

.abas {
  list-style-type: none;
  display: flex;
  margin-bottom: 0px; }
  .abas li {
    position: relative;
    padding: 20px;
    cursor: pointer;
    color: #666666;
    font-size: 16px; }
  .abas li::before {
    display: none;
    content: '';
    position: absolute;
    height: 2px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #1bb9eb;
    transition: 0.5s; }
  .abas .li-selecionada::before {
    display: block;
    content: '';
    position: absolute;
    height: 2px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #1284ff;
    transition: 0.5s; }
  .abas li:hover {
    color: #a1a1a1; }
  .abas li:hover::before {
    display: block; }

.linha-abas {
  width: 100%;
  height: 2px;
  background-color: #f1f1f2;
  margin-bottom: 10px; }

#contadores {
  display: flex;
  width: 100%;
  overflow: auto;
  flex-wrap: wrap; }

.contador {
  width: calc(14.44% - 10px);
  height: 112px;
  padding: 20px;
  border: 1px solid #ececec;
  background-color: white;
  border-radius: 8px;
  box-shadow: 1px 3px 12px 0px #e6e6e8;
  position: relative;
  margin: 5px; }

.contador-titulo {
  font-size: 21px;
  color: #666666; }

.contador-quantidade {
  font-size: 60px;
  color: #666666;
  position: absolute;
  bottom: 15px; }

.contador:hover {
  cursor: pointer; }
  .contador:hover .contador-quantidade {
    color: #1bb9eb; }

.add-contador {
  width: 100px; }

.contador-mais {
  font-size: 75px;
  color: #666666;
  text-align: center; }

.add-contador:hover .contador-mais {
  color: #1bb9eb; }

.grafico-tabela {
  display: flex; }

#projetos {
  width: calc(50% - 10px);
  height: 580px;
  background-color: white;
  border: 1px solid #ececec;
  border-radius: 8px;
  box-shadow: 1px 3px 12px 0 #e6e6e8;
  margin: 5px;
  padding: 20px;
  overflow-y: auto;
  overflow-x: auto; }

.cabecalho-tabela th {
  padding: 10px;
  font-size: 17px;
  color: #000;
  text-align: left;
  font-weight: 100; }

.tabela-projetos {
  width: 100%;
  border-spacing: 0;
  background-color: white; }
  .tabela-projetos tr {
    margin-bottom: 5px;
    margin-top: 5px; }

.projetos-carregados {
  color: #666666;
  font-size: 16px;
  text-align: left; }
  .projetos-carregados td {
    padding: 10px;
    font-weight: 100; }

.tarefas-percent {
  text-align: center;
  font-size: 14px; }

.tarefas-barra {
  width: 100%;
  height: 6px;
  background: #dcdcde; }

.barra-tarefas-concluida {
  height: 6px;
  background: #1bb9eb; }

.projetos-carregados:nth-child(even) {
  background-color: #fbfbfb; }

#grafico-container {
  width: calc(50% - 10px);
  height: 580px;
  border: 1px solid #ececec;
  border-radius: 8px;
  background-color: white;
  box-shadow: 1px 3px 12px 0 #e6e6e8;
  margin: 5px;
  padding: 20px;
  overflow-y: auto;
  overflow-x: auto; }

#grafico {
  display: flex;
  justify-content: center;
  height: 100%;
  width: 1700px; }

#grafico-overflow {
  overflow-x: auto;
  height: 80%;
  width: calc(100% -30px);
  margin: 15px; }

.grafico {
  height: 100%; }

.grafico-titulo {
  font-size: 19px;
  color: #666666; }

.grafico-dados {
  width: 60px;
  margin-left: calc(50% - 30px);
  color: white; }

.graficos {
  margin: 20px;
  font-size: 16px;
  color: #666666;
  height: 78%; }

.grafico-concluidas {
  background-color: #34a937;
  height: 0px;
  transition: 0.6s; }

.grafico-andamento {
  background-color: #0b92b1;
  height: 0px;
  transition: 0.6s; }

.grafico-aguardo {
  background-color: #808080;
  height: 0px;
  transition: 0.6s; }

.grafico-vencidas {
  background-color: #e22929;
  height: 0px;
  transition: 0.6s; }

.grafico-projeto {
  border-top: 1px solid #e1e1e4; }

.legenda-grafico {
  width: 100%;
  display: flex;
  justify-content: center; }

.legenda-cor {
  border: 1px solid #f1f1f2;
  width: 15px;
  height: 15px;
  margin: 2px; }

.legenda {
  margin: 10px;
  color: #666666;
  font-size: 15px;
  display: flex; }

.legenda-concluidas .legenda-cor {
  background-color: #34a937; }

.legenda-andamento .legenda-cor {
  background-color: #0b92b1; }

.legenda-aguardo .legenda-cor {
  background-color: #808080; }

.legenda-vencidas .legenda-cor {
  background-color: #e22929; }

.aba-conteudo {
  transition: 0.6s; }

.aba-selecionada {
  display: block; }

.aba-nao-selecionada {
  display: none; }

#clientes-tabela {
  width: calc(98% - 10px);
  height: 740px;
  border: 1px solid #ececec;
  border-radius: 8px;
  background-color: white;
  box-shadow: 1px 3px 12px 0 #e6e6e8;
  margin: 5px;
  padding: 20px;
  overflow-y: auto;
  overflow-x: auto; }

.tabela-clientes {
  width: 100%;
  border-spacing: 0; }
  .tabela-clientes tr {
    margin-bottom: 5px;
    margin-top: 5px; }

.clientes-carregados {
  color: #666666;
  font-size: 16px;
  text-align: left; }
  .clientes-carregados td {
    padding: 10px;
    font-weight: 100; }

.clientes-percent {
  text-align: center;
  font-size: 14px; }

.clientes-barra {
  width: 100%;
  height: 6px;
  background: #dcdcde; }

.barra-clientes-concluida {
  height: 6px;
  background: #1bb9eb; }

.clientes-carregados:nth-child(even) {
  background-color: #fbfbfb; }

#projeto-aba-tabela {
  width: calc(98% - 10px);
  height: 740px;
  border: 1px solid #ececec;
  border-radius: 8px;
  background-color: white;
  box-shadow: 1px 3px 12px 0 #e6e6e8;
  margin: 5px;
  padding: 20px;
  overflow-y: auto;
  overflow-x: auto; }

.tabela-projeto-aba {
  width: 100%;
  border-spacing: 0; }
  .tabela-projeto-aba tr {
    margin-bottom: 5px;
    margin-top: 5px; }

.projeto-aba-carregados {
  color: #666666;
  font-size: 16px;
  text-align: left; }
  .projeto-aba-carregados td {
    padding: 10px;
    font-weight: 100; }

.projeto-aba-percent {
  text-align: center;
  font-size: 14px; }

.projeto-aba-barra {
  width: 100%;
  height: 6px;
  background: #dcdcde; }

.barra-projeto-aba-concluida {
  height: 6px;
  background: #1bb9eb; }

.projeto-aba-carregados:nth-child(even) {
  background-color: #fbfbfb; }

[data-tooltip] {
  position: relative; }

[data-tooltip]::before {
  border-bottom: 10px solid rgba(0, 0, 0, 0.8);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 0;
  content: "";
  left: calc(50% - 5px);
  opacity: 0;
  position: absolute;
  top: -10000px;
  transition: opacity 0.3s ease-in; }

[data-tooltip]::after {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  color: #fff;
  min-width: 30px;
  text-align: center;
  content: attr(data-tooltip);
  left: 0;
  opacity: 0;
  padding: 10px;
  position: absolute;
  top: -10000px;
  transform: translateY(10px);
  transition: opacity 0.3s ease-in; }

[data-tooltip]:hover::after, [data-tooltip]:hover::before {
  top: 100%;
  opacity: 1;
  z-index: 1; }

#popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5); }
  #popup .popup-front {
    width: 60%;
    position: absolute;
    left: 20%;
    background-color: #fff;
    top: 15%;
    border-radius: 10px;
    padding: 20px; }
  #popup .popup-title {
    font-size: 20px;
    font-size: 24px;
    padding-left: 20px; }
  #popup .popup-message {
    font-size: 18px; }
  #popup .popup-ok, #popup .popup-cancelar {
    width: 80px;
    position: absolute;
    text-align: center;
    padding: 5px;
    border: 1px solid #dadade;
    cursor: pointer; }
  #popup .popup-ok {
    bottom: 20px;
    right: 20px; }
  #popup .popup-cancelar {
    bottom: 20px;
    right: 120px; }
  #popup .popup-ok:hover, #popup .popup-cancelar:hover {
    background-color: #f1f1f2; }

.popup-body {
  display: flex;
  height: 200px; }

.campo {
  padding: 10px; }
  .campo input, .campo select {
    width: 100%;
    font-size: 15px;
    border: 0px;
    border-bottom: 1px solid #dadade; }
  .campo select:disabled {
    background-color: #f1f1f2;
    cursor: not-allowed; }
  .campo select {
    height: 30px; }
  .campo input {
    height: 26px; }

.comparacao {
  display: flex;
  width: 70%; }
  .comparacao .campo {
    width: 33%; }

.popup-separacao {
  width: 2px;
  height: 80%;
  background-color: #dadade; }

.campos {
  margin: 10px; }

.alert {
  color: red;
  margin-left: 20px; }

::-webkit-scrollbar {
  width: 10px; }

::-webkit-scrollbar-track {
  background: #f1f1f1; }

::-webkit-scrollbar-thumb {
  background: #888; }

::-webkit-scrollbar-thumb:hover {
  background: #555; }

.ui-widget-content {
  background-color: white; }

.ui-widget-header {
  border: 1px solid white;
  background: white url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
  color: #a0a0a0; }

.ui-state-hover {
  border-color: white;
  background-color: white; }

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  background-color: white;
  cursor: pointer; }

.ui-datepicker-prev::before {
  content: '<';
  font-family: 'Segoe UI';
  width: 20px;
  color: #bebebf;
  height: 20px;
  position: absolute;
  bottom: 18px;
  right: 10px;
  font-size: 30px;
  display: block; }

.ui-datepicker-next::before {
  content: '>';
  font-family: 'Segoe UI';
  width: 20px;
  color: #bebebf;
  height: 20px;
  position: absolute;
  bottom: 18px;
  right: 10px;
  font-size: 30px;
  display: block; }

.ui-button:focus, .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight, .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
  border: 0px;
  color: #f1f1f2;
  background-color: #ccc;
  color: white; }

.ui-state-default, .ui-widget-content .ui-state-default {
  border: 0px;
  font-weight: bold;
  color: #828282; }

@media screen and (max-width: 860px) {
  .grafico-tabela {
    flex-wrap: wrap; }
    .grafico-tabela #projetos {
      width: 100%; }
    .grafico-tabela #grafico-container {
      width: 100%; } }