html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

input,
select,
file,
textarea{
    max-width: 400px;
}

.circular-progress {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#ec0c0c 0%, #ec0c0c var(--progress), #d9d7da var(--progress), #d9d7da 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 10px; /* Adiciona espaçamento entre os círculos */
}

.progress-value {
    position: absolute;
    font-size: 2em;
    font-weight: 700;
    color: #fff;
    background-color: #212020;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 768px) {
    .d-flex.flex-nowrap {
        flex-direction: column;
    }
}

.texto-colorido {
    animation: mudarCor 3s infinite alternate; /* 5 segundos de duração, repete infinitamente, alternando entre as cores */
}

@keyframes mudarCor {
    0% {
        color: red;
    }

    50% {
        color: blue;
    }

    100% {
        color: green;
    }
}

/* Força cor branca em todas as células da tabela customizada */
.tabela-moradores td,
.tabela-moradores th {
    color: white !important;
}

/* Hover: fundo escuro e texto ainda branco */
.tabela-moradores tbody tr:hover {
    background-color: #444 !important;
    color: white !important;
}

.tabela-texto-branco {
    color: white;
}

.col-larga-0 {
    min-width: 240px;
    white-space: nowrap;
}

.col-larga-1 {
    min-width: 180px;
    white-space: nowrap;
}


.col-larga-2 {
    min-width: 120px;
    white-space: nowrap;
}

.col-larga-3 {
    min-width: 90px;
    white-space: nowrap;
}