/* Dashboard Monetary Values Visibility */

.dashboard-monetary-value.hidden-value {
    position: relative;
    color: transparent;
    user-select: none;
}

.dashboard-monetary-value.hidden-value::after {
    content: "••••••";
    position: absolute;
    left: 0;
    top: 0;
    color: #777676;
    letter-spacing: 2px;
    font-weight: inherit;
    white-space: nowrap;
}

/* Tipografia responsiva dos valores do dashboard.
   Substitui as classes `display-4`/`display-5` (3.5rem/3rem), que ficam
   enormes no celular e quebram a altura dos cards em uma coluna. Em <md
   usamos 1.5rem para caber em uma linha em 375 px; em ≥md aproximamos
   do visual anterior com um tamanho grande e peso leve. */
.dashboard-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
    display: inline-block;
}

@media (min-width: 768px) {
    .dashboard-value {
        font-size: 3rem;
        font-weight: 300;
    }
}