/*Devhub stuff*/
.qvwrapper {
  z-index: 100000 !important;
  top: 5px !important;
  right: 5px !important;
  left: auto !important;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  line-height: unset;
}
/*Bootstrap layout*/
.row {
  /* margin-bottom: 30px; */
  margin-bottom: 12px;
}
.col-xs-12 {
  margin-bottom: 10px;
}

/* LUI */
.lui-popover-container {
  z-index: 10004;
}

/*Qlik objects*/
.qvplaceholder,
.qvobject {
  width: 100%;
  height: 100%;
}

.qv-object {
  padding: 0 15px 15px;
  background-color: transparent;
}
.qv-object-kpi {
  padding: 0px;
}
.qv-object * {
  font-family: 'Source Sans Pro', sans-serif;
}

.listbox-wrapper .qv-object {
  padding: 0px;
}

/*KPIs*/
.kpi {
  height: 5.5vw; /*padrão 6vw, alterado pois em telas maiores estava muito vazio*/
  max-height: 180px;
  min-height: 80px;
  /*background: #fff;*/
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
    0 1px 3px 0 rgba(0, 0, 0, 0.12);
  /* border-radius: 2px; */
  border-radius: 14px; /* Mudando os cantos */
  color: #fff;
  margin-bottom: 8px; /* padrão 15px*/
}

/* Para trocar o rotulo dos KPIs dos Cards (ex: cor, negrito...)*/
.kpi .sn-kpi-data .sn-kpi-measure-wrapper.sn-kpi-center {
  opacity: 0.8;
  color: #fff !important;
  /* font-size: 1.5vw !important; */ /*TODO: ver se precisa ajustar isso aqui para resoluções distintas */
  /* font-weight: bold; */
}

.kpi .sn-kpi-data .sn-kpi-value-wrapper.sn-kpi-center {
  /* font-size: 0.9vw !important; */ /*TODO: ver se precisa ajustar isso aqui para resoluções distintas*/
}

.kpi article {
  width: 80%;
}
.kpi-row {
  /* margin-bottom: 15px; */
  margin-bottom: 4px;
}

.kpi-side {
  position: absolute;
  right: 20px;
  top: 60%; /* 50% */
  margin-top: -40px; /* -25px */
  width: 50px; /* 40px */
  height: 50px; /* 40px */
}
.kpi-side i {
  font-size: 55px; /* 40px */
  opacity: 0.2;
  color: #fff;
}
.qv-object-kpi .kpi-data {
  align-items: flex-start;
  padding-left: 15px;
}

#KPI-01 .kpi-value {
  color: #fff !important;
}
#KPI-02 .kpi-value {
  color: #fff !important;
}
#KPI-03 .kpi-value {
  color: #fff !important;
}
#KPI-04 .kpi-value {
  color: #fff !important;
}

/*Get rid of rounded borders on qliksense objects*/
/*.qv-object, .sel-toolbar-card, .qv-object.qv-selections-active {
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
}
*/
/*adjusting active chart borders*/
.sel-toolbar-card {
  border: 1px solid #ccc;
  border-bottom: 1px solid #d9d9d9;
}
.qv-object.qv-selections-active {
  border: 1px solid #ccc;
  border-top: 1px solid #d9d9d9;
}

/*Qlik Contextual */
.qui-immidiateContextual {
  z-index: 10004;
}

/*Selection toolbar */
#CurrentSelections {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 35px;
}
.buttons-end.borderbox {
  width: 45px;
  display: none; /*Tirei a "Ferramenta de Seleções" pois quando clicava nela bugava o mashup*/
}

.buttons-end.borderbox button:nth-child(2) {
  display: none;
}
.qv-panel-current-selections .qv-selections-pager {
  padding-right: 45px;
}
.current-selections-placeholder {
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(84, 83, 82);
  color: rgba(255, 255, 255, 0.6);
}
.current-selections-placeholder span {
  display: none;
}

.qv-panel-current-selections .qv-selections-pager {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 767px) {
  .buttons.borderbox {
    width: 45px;
  }
  .buttons.borderbox button:nth-child(1),
  .buttons.borderbox button:nth-child(2) {
    display: none;
  }
  .qv-panel-current-selections .qv-selections-pager {
    padding-left: 45px;
  }
  .col-xs-12 {
    margin-bottom: 15px;
  }
  .drawer-title {
    height: 56px !important;
  }
  .kpi-row {
    margin-bottom: 0px;
  }
  .row {
    margin-bottom: 0;
  }

  /*Adicionado para manter o icone no meio do card quando resolução muito pequena menor que 767 (max-width: 767px)*/
  /* .kpi-side {
    top: 50%;
  } */
}

/*Fix selection toolbar options placement*/
.qv-panel-current-selections .remove,
.qv-panel-current-selections .unlock,
.qv-panel-current-selections .lock {
  width: 20px;
}
.lui-clear-all {
  line-height: 36px;
}

/*Fix qv-filterpane*/
.qv-filterpane {
  overflow: visible;
}

/*Filter Drawer*/
.drawer-title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  /* background-color: #07488c;  background-color: #3949ab; */
  background-image: linear-gradient(to left, #066618, #07488c);
  color: #fff;
  height: 65px;
  font-size: 20px;
  font-family: 'Source Sans Pro', sans-serif;
  /*font-weight: bold;*/
}
.filter-container {
  position: relative;
  height: calc(100vh - 65px);
  margin-top: 10px;
}

.filter-container i {
  /* adicionei para ajustar o icone nos filtros */
  display: flex;
  justify-content: center;
  font-size: 20px;
}

@media (max-width: 767px) {
  .drawer-title {
    height: 56px !important;
  }
}

/*Main content area (paper-body)*/
.paper-body {
  padding: 30px 15px;
}
#main {
  /* background-color: #f3f4f5; */
  background-color: #06661810;

  background-image: url('img/sunglasses.png');
  /* height: auto;
  width: 100%; */
}

/*Main toolbar styles*/
.paper-toolbar-0 .toolbar-tools.paper-toolbar .title {
  font-family: 'Source Sans Pro', sans-serif;
}

.paper-toolbar-0 .toolbar-tools.paper-toolbar .title img {
  /* Adicionei para aumentar a imagem da topBar*/
  height: 4rem;
}

/* Imagem Vale Cultura do titulo diminui em tela menor */
@media (max-width: 374px) {
  .paper-toolbar-0 .toolbar-tools.paper-toolbar .title img {
    height: 3.4rem;
  }
}

/* Imagem Vale Cultura do titulo desaparece em tela muito pequena */
@media (max-width: 359px) {
  .paper-toolbar-0 .toolbar-tools.paper-toolbar .title img {
    display: none;
  }
}

/*Current selections restyling*/
.qv-panel-current-selections,
.qv-panel-current-selections .buttons-end .qv-subtoolbar-button,
.qv-panel-current-selections .buttons .qv-subtoolbar-button,
.qv-panel-current-selections .buttons-end .qv-subtoolbar-button {
  background-color: #e8eaec !important;
  /*background-color: #07488c !important;*/ /* Trocando a cor da barra de seleções */
}
.qv-panel-current-selections .buttons .qv-subtoolbar-button i,
.qv-panel-current-selections .buttons-end .qv-subtoolbar-button i {
  color: #838383;
  /*color: black;*/ /* Trocando a cor da fonte na barra de seleções */
}
.qv-panel-current-selections .no-selection {
  color: #838383;
  /* color: black !important;*/ /* Trocando a cor da fonte na barra de seleções */
}
.qv-panel-current-selections .buttons {
  background: unset;
  border: unset;
}
.qv-panel-current-selections .wrap,
.qv-panel-current-selections .buttons .qv-subtoolbar-button,
.qv-panel-current-selections .buttons-end .qv-subtoolbar-button {
  border: unset;
}
.qv-panel-current-selections {
  font-family: 'Source Sans Pro', sans-serif;
}
.qv-panel-current-selections .item {
  font-weight: 300;
  font-family: 'Source Sans Pro', sans-serif;
  color: #838383;
  font-size: 11px;
}
.qv-panel-current-selections .item:hover {
  color: #e8eaec;
}
.qv-panel-current-selections li {
}
.qv-panel-current-selections .remove {
  padding-right: 5px;
}
.qv-panel-current-selections .buttons-end {
  border-left: none;
  box-shadow: none;
}
.qv-global-search-container {
  z-index: 10003;
}
#dropShadow {
  z-index: 10002;
}
.qv-panel-current-selections .item .qv-state-count-bar {
  height: 4px;
}

/*Sidebar*/
paper-item {
  background-color: #fff; /* Cor dos botões menu lateral esquerdo */
  /* background-color: #cafad1;  */
  flex-direction: column !important;
  height: 80px;
  justify-content: center;
  align-items: center;
  color: #838383;
  /* color: #15aa31; */
  text-align: center;

  /* adicionei uma transição ao bg do paperitem */
  transition: background-color 0.25s;
  cursor: pointer;
}
.paper-menu-0 .selectable-content.paper-menu .iron-selected {
  font-weight: 300 !important;
  background-color: gray; /* Isso aqui tá sendo alterado via Dom dependendo da pagina que é selecionada, deixei essa cor para ser padrão caso não tenha definido a cor especifica da pagina */
  /* color: #3f51b5; */
  color: white;
}

.menu-option {
  font-family: 'Source Sans Pro', sans-serif;
}

/*modal styling*/
.modal {
  z-index: 10050;
}
.modal-backdrop {
  z-index: 10040;
}

/*color library*/
.blue {
  background-color: #3598dc;
}
.blue-1 {
  background-color: #2c3e50;
}
.blue-2 {
  background-color: #5e738b;
}
.blue-3 {
  background-color: #22313f;
}
.blue-4 {
  background-color: #67809f;
}
.blue-5 {
  background-color: #578ebe;
}
.blue-6 {
  background-color: #94a0b2;
}
.blue-7 {
  background-color: #5c9bd1;
}
.blue-8 {
  background-color: #4c87b9;
}
.blue-9 {
  background-color: #4b77be;
}
.green {
  background-color: #32c5d2;
}
.green-1 {
  background-color: #4db3a2;
}
.green-2 {
  background-color: #44b6ae;
}
.green-3 {
  background-color: #26c281;
}
.green-4 {
  background-color: #1bbc9b;
}
.green-5 {
  background-color: #1ba39c;
}
.green-6 {
  background-color: #2ab4c0;
}
.green-7 {
  background-color: #3faba4;
}
.green-8 {
  background-color: #29b4b6;
}
.green-9 {
  background-color: #36d7b7;
}
.grey {
  background-color: #e5e5e5;
}
.grey-1 {
  background-color: #fafafa;
}
.grey-2 {
  background-color: #95a5a6;
}
.grey-3 {
  background-color: #555555;
}
.grey-4 {
  background-color: #525e64;
}
.grey-5 {
  background-color: #acb5c3;
}
.grey-6 {
  background-color: #bfcad1;
}
.grey-7 {
  background-color: #bfbfbf;
}
.grey-8 {
  background-color: #e9edef;
}
.purple {
  background-color: #8e44ad;
}
.purple-1 {
  background-color: #8775a7;
}
.purple-2 {
  background-color: #bf55ec;
}
.purple-3 {
  background-color: #8775a7;
}
.purple-4 {
  background-color: #9a12b3;
}
.purple-5 {
  background-color: #796799;
}
.purple-6 {
  background-color: #8877a9;
}
.purple-7 {
  background-color: #8e44ad;
}
.purple-8 {
  background-color: #9b59b6;
}
.red {
  background-color: #e7505a;
}
.red-1 {
  background-color: #ef4836;
}
.red-2 {
  background-color: #f36a5a;
}
.red-3 {
  background-color: #e35b5a;
}
.red-4 {
  background-color: #e43a45;
}
.red-5 {
  background-color: #e08283;
}
.red-6 {
  background-color: #d05454;
}
.red-7 {
  background-color: #e26a6a;
}
.red-8 {
  background-color: #d91e18;
}
.white {
  background-color: #ffffff;
}
.yellow {
  background-color: #c49f47;
}
.yellow-1 {
  background-color: #f2784b;
}
.yellow-2 {
  background-color: #f3c200;
}
.yellow-3 {
  background-color: #e87e04;
}
.yellow-4 {
  background-color: #c5bf66;
}
.yellow-5 {
  background-color: #f7ca18;
}
.yellow-6 {
  background-color: #c5b96b;
}
.yellow-7 {
  background-color: #f4d03f;
}
.yellow-8 {
  background-color: #c8d046;
}

/* --- Cores MTur --- */
/* -> Extraídas da pallete do Tema MTur Cards*/
.mtur-verde-claro {
  background-color: #15aa31;
}
.mtur-verde-escuro {
  background-color: #066618;
}
.mtur-azu-claro {
  background-color: #009fe3 !important;
}
.mtur-azul-escuro {
  background-color: #07488c;
}
.mtur-amarelo-claro {
  background-color: #fbb601;
}
.mtur-amarelo-escuro {
  background-color: #de9101;
}

/* -> Outras utilizadas em KPIs (fora do pallete) */
.mtur-cor-recebedora {
  background-color: #3c9f9d;
}

.mtur-cor-credito {
  /* cor do indicador na visão geral */ /* não foi utilizada essa cor por estava chamando muita atenção, trocamos pelo .verde-claro */
  background-color: #46c646;
}

.mtur-cor-consumo {
  /* cor do indicador na visão geral */ /* update: esse vermelho ficou mais escuro para não chamar tanta atenção */
  background-color: #b01a00;
}

.mtur-cor-geral {
  /* cor do indicador na visão geral */ /* update: esse vermelho ficou mais escuro para não chamar tanta atenção */
  background-color: gray;
}

/* Filtros do menu lateral direito */
.filtrosQlik {
  height: 45px;
  width: 100%;
  margin-top: 0.2rem !important;
  /* margin-bottom: 6px; */
}

.filtrosQlikTipo {
  /* adicionei para incluir um separador nos filtros ToDo: validar isso aqui*/
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  padding: 6px 0 2px;
}

/* Esses tipos de filtros começam ocultos no painel, vão sendo ativados/desativados dependendo da aba que o usuario escolher (logica no html) */
/* #FIL_TIPO_TRABALHADOR,
#FIL_TIPO_BENEFICIARIA,
#FIL_TIPO_RECEBEDORA,
#FIL_TIPO_CREDCONSUMO {
  display: none;
} */

/* Loader Vale Cultura */
.loader-container {
  position: fixed;
  z-index: 999999999;
  background: white;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.loader {
  margin: 60px auto;
  position: relative;
  background: url(./img/loader_vale.gif) no-repeat;
  background-position: center center;
  background-size: 200px;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.hint {
  position: absolute;
  bottom: 2px;
  right: 2px;
  /* opacity: .4; */
  cursor: pointer;
  z-index: 9;
  font-size: 18px !important;
  /* color:red; */
}
/* 
i.hint  {
  min-width: 16px;
  min-height: 16px;
  text-align: center;
} */

/* Estilo Popover */
/* Referencia: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_popover_css&stacked=h */
/* Referencia: http://jsfiddle.net/qy9Az/2760/ */
.popover-title {
  /* background-color: #73AD21;  */
  color: #07488c;
  /* font-size: 28px; */
  font-weight: 500;
  /* text-align:center; */
}

/* Link do Vale Cultura no Paper-menu */
.fale-conosco-vale {
  position: absolute;
  bottom: 0;
  padding: 16px 16px 20px;
}

.fale-conosco-vale a,
/* .fale-conosco-vale a:link, */
.fale-conosco-vale a:visited,
.fale-conosco-vale a:hover
/* .fale-conosco-vale a:active */ {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #07488c;
  text-decoration: none;
  text-align: center;
  /* Atributos abaixo peguei do estilo dos cards no menu lateral esquerdo */
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.fale-conosco-vale i {
  font-size: 20px;
  padding-bottom: 3px;
}

/* Novos botões do menu superior */
paper-toolbar paper-button.novoBotao {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Source Sans Pro', sans-serif;
  padding: 8px;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.8;
}

@media (max-width: 767px) {
  paper-toolbar paper-button.novoBotao {
    padding: 5px;
  }
}

paper-toolbar paper-button.novoBotao i {
  font-size: 22px;
}

paper-toolbar paper-button.novoBotao:hover {
  /* color: red; */
  opacity: 1;
  transition: opacity 0.3s;
  /* -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2); */
}

.grupoNovoBotao {
  display: flex;
  flex-direction: row;
}

/* Icone do menu na versão mobile tava dando um margin-right 24px, com a mudança dos botões com texto precisei diminuir */
#nav-menu-button {
  margin-right: 6px;
}

.tituloVisãoGeral {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Source Sans Pro', sans-serif;

  transition: transform 2s;
  /* background-color: gray; */
  background-image: url('./img/vale_logo_vazio2.png');
  background-size: 100% 100%;
  border-radius: 8px;
  height: 6.5vw !important;
  padding-bottom: 5px;
}

.tituloVisãoGeral span {
  margin: 0px;
}

.tituloVisãoGeral span:first-of-type {
  font-size: 3.3vw;
  color: #ffd200;
  -webkit-text-stroke: 1px black;
}

.tituloVisãoGeral span:nth-of-type(2) {
  font-size: 1.3vw;
  color: white;
}

@media (max-width: 767px) {
  .tituloVisãoGeral span:first-of-type {
    font-size: 6.4vw;
  }

  .tituloVisãoGeral span:nth-of-type(2) {
    font-size: 2.4vw;
  }
}

.caixa-texto {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  color: #fff;
  background-image: url(./img/vale_logo_vazio2.png);
  background-size: 100% 100%;
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
    0 1px 3px 0 rgba(0, 0, 0, 0.12);
  border-radius: 14px; /* Mudando os cantos */
  padding: 0 30px 0;
}

.caixa-texto h2 {
  color: #ffd200;
  -webkit-text-stroke: 1px black;
}

@media (min-width: 767px) {
  .caixa-texto:nth-child(odd) {
    /* color: red; */
    max-width: 49%;
    margin-right: 1%;
  }

  .caixa-texto:nth-child(even) {
    /* color: blue; */
    max-width: 49%;
    margin-left: 1%;
  }
}

/* Colocando o ponteiro como pointer nos "botões KPI" */
div[id^='buttonKPI'] {
  cursor: pointer;
}

.centerCard {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  z-index: 9;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  text-align: center;
  padding: 10px;
  border: outset #009fe3;
  border-radius: 10px;
}

.centerCard i {
  font-size: 30px;
  color: #009fe3;
  margin-bottom: 8px;
}