.HomePage {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 2dvh;
}

.TitleAndInvite {
  width: 90dvw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #5c5c5c;
  align-items: center;
}

.InviteNewInst {
  background-color: #64BCBB;
  padding: 1.3dvh 2.5dvw;
  color: #fff;
  border-radius: 0.3dvh;
  cursor: pointer;

  &:hover {
    background-color: #4e9392;
  }
}

.modal-novainst-header h2 {
  text-align: center;
}

.TituloAdicionarFranquia {
  text-align: center;
  font-size: 2dvh;
  font-weight: 500;
}

.InputNovaFranquia input[type="text"] {
  display: flex;
  width: 90%;
  margin: 0 auto !important;
}

.CardsInstituicoes {
  width: 90dvw;
  margin: 0 auto;
  display: flex;
  margin-top: 3dvh;
  gap: 6dvh;
  justify-content: flex-start; 
  overflow-x: auto; 
  overflow-y: hidden;
  white-space: nowrap;
  padding-bottom: 1dvh;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.CardsInstituicoes::-webkit-scrollbar {
  display: none;
}

.CardsInstituicoes:hover {
  scrollbar-width: thin;
}
.CardsInstituicoes:hover::-webkit-scrollbar {
  display: block;
  height: 4px;
}

.CardsInstituicoes:hover::-webkit-scrollbar-thumb {
  background: #64BCBB;
  border-radius: 2px;
}

.CardsInstituicoes:hover::-webkit-scrollbar-track {
  background: #e3eded;
}

.HeaderPaginacao {
  margin-top: 2dvh;
}

.botoespaginacaoFranquia {
  max-width: 90%;
  text-align: center;
  color: #595959;
  font-size: 12px;
  margin: 0;
  display: flex;
  align-items: center;
}

.cardInstituocao {
  display: inline-flex; 
  align-items: center;
  width: 30dvw;
  min-width: 30dvw;
  height: 20vh !important;
  background-color: #fcfcfc;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.1);
  border-radius: 1vh;
  overflow: hidden;
  cursor: pointer;
}

.LogoInstituicao img {
  max-width: 10vw;
  height: 100%;
  border-radius: 1vh 0 0 1vh;
  object-fit: contain;
  background-color: #ffffff;
  border-right: 0.5px thin #c6c6c6;
}

.DadosDaInst {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5vh;
  width: 100%;
  max-height: 16vh !important;
  box-sizing: border-box;
}

.codigoInst {
  background-color: #4e9392;
  max-width: fit-content;
  padding: 0.5vh 1vh;
  border-radius: 0.3vh;
  color: #fff;
  font-size: 10px;
  margin-bottom: 0.5vh;
}

.conteudoGeralInst {
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
}

.TituloCardInstituicao {
  font-size: 2.5vh;
  font-weight: bold;
  margin: 0;
}

.endereco p {
  font-size: 1.2vh;
  margin: 0;
  color: #666;
}

.profissionaisEvolucao {
  max-width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.3vh;
  gap: 1vw;
}

.profissionaisHold,
.evolucaoHold {
  display: flex;
  align-items: center;
  gap: 0.5vh;
}

.profissionaisEvolucao img {
  width: 15px;
  height: 14px;
}

.indicadores-instituicao{
  width: 90dvw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 4dvh; 
}

.indicador-franquia{
  background-color: #fcfcfc;
  width: 10dvw;
  padding: 1dvh;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  border-radius: 2dvh;
  display: flex;
  flex-direction: column;
  gap: -1dvh;
}

.IndicadorValorComun{
  font-size: 40px;
  font-weight: bold;
}

.IndicadorContasReceber{
  color: #4fae48;
  font-size: 40px;
  font-weight: bold;
}

.IndicadorContasPagar{
  color: #a72929;
  font-size: 40px;
  font-weight: bold;
}

.monetario{
  display: flex;
  align-items: baseline;
  justify-content: center;
  position: relative;
  left: -0.6dvh;
}

.monetario-cifra{
  font-size: 14px !important;
}

.Clicado{
  background-color: #daebea !important;
  box-shadow: 0px 0px 5px rgba(25, 99, 90, 0.1), 0px 0px 1px rgba(16, 134, 124, 0.1) !important;
  border: 2px solid #23504f;
}

.Clicado .TituloCardInstituicao{
  color: #23504f;
}

.Clicado .endereco p{
  color: #23504f;
}

.Clicado .profissionaisEvolucao{
  color: #23504f !important;
}

.tabelas{
  width: 90dvw;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  margin-top: 4dvh;
}

.titulo-pequeno {
  font-size: 1.7vh !important; 
  line-height: 0.7dvh;
  line-height: 2.2vh;
  text-wrap: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}