:root {
    --roxo-agiliza: #A62A83;
    --roxo-agiliza1: #CE39AD;
    --verde-agiliza: #378656;
    --verde-agiliza1: #48D280;
    --verde-agiliza2: #93C12D;
    --cinza: #979797;
    --cinza-leve: #d9d9d9;
    --cinza-leve2: #f2f2f2;
}
.bg-roxo-agiliza {
    background-color: var(--roxo-agiliza);
}
.text-roxo-agiliza {
    color: var(--roxo-agiliza);
}
.text-cinza-leve {
    color: var(--cinza-leve);
}
.text-cinza {
    color: var(--cinza);
}
.text-cinza-leve2 {
    color: var(--cinza-leve2);
}
.color-green {
    color: var(--verde-agiliza2);
}
.bg-color-green {
    background-color: var(--verde-agiliza2);
}
.color-purple {
    color: var(--roxo-agiliza1);
}
.bg-color-purple {
    background-color: var(--roxo-agiliza1);
}
.placeholder-cinza-leve::placeholder {
    color: var(--cinza-leve);
}
.custom-scroll::-webkit-scrollbar {
    width: 6px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background: #a3a3a3;
    border-radius: 10px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #7d7d7d;
}
body {
    font-display: swap;
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    overflow:unset;
}
.menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}
.menu.show {
    transform: translateX(0);
}

.dot {
    height: 10px;
    width: 10px;
    background-color: #ccc;
    border-radius: 9999px;
    display: inline-block;
    margin: 0 4px;
    cursor: pointer;
}

.dot.active {
    background-color: var(--verde-agiliza);
}

#card .card-info {
  position: absolute;
  color: white;
  font-family: "JetBrains Mono", monospace;
  font-weight: bold;
}

#card .card-dados {
    top: 60%;
    left: 2%;
    position: relative;
}

#card .card-info.matricula {
  font-size: 0.75rem;
}

#card .card-info.cadastro {
  top: 85%;
  right: 9%;
  font-size: 0.75rem;
}

#card  .card-info.nome {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 86%;
}

#card  .card-info.empresa {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 86%;
}

/* Landscape mode */
@media (orientation: landscape) {
  #card  .card-info.matricula,
  .card-info.cadastro {
    font-size: 0.65rem;
  }
  #card  .card-info.nome {
    font-size: 0.9rem;
  }
}