.buttonAgendaProfissional {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 8px;
    position: relative !important;
    height: 56px;
    padding: 0 16px !important;
    background: #ffffff !important;
    border: 1px solid #abbed1 !important;
    border-radius: 4px 0 0 4px !important;
}

.spanLegendsTable {
    display: flex;
    margin: 0.2% 0 0 0.3%;
}

.text-area-table {
    height: 393px !important;
    border-radius: 16px;
    border: 1px solid #abbed1;
    background: #ffffff !important;
    font-family: inherit;
    border-top: 2px solid #abbed1;
    border-bottom: 2px solid #abbed1;
    border-left: 2px solid #abbed1;
    border-right: 2px solid #abbed1;
    width: 99%;
}

@media screen and (min-width: 769px) and (max-width: 1440px){
    .text-area-table{
        width: 98%;
    }
}

@media (max-width: 768px){
    .text-area-table{
        width: 95%;
    }
}


/* Estilo para .spanLegendsTable quando a largura da tela for abaixo de 1023 pixels */
@media (max-width: 1023px) {
    .spanLegendsTable {
        flex-direction: column;
    }
}

.spanTable {
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    text-align: left;
    margin: 0.4%;
    white-space: nowrap;
}

.legend-td {
    position: relative;
    /* Necessário para posicionamento absoluto do ponto */
    text-align: center;
    /* Centraliza o conteúdo de texto dentro do <td> */
    width: 12px;height: 12px;
    border-radius: 50%;
}

.atrasadoLegend {
    background-color: #f65b5b;
    color: white;

}

.proximoLegend {
    background-color: #ffd43b;
    color: white;
}

.distanteLegend {
    background-color: #80e220;
    color: white;
}

.vencidoLegend {
    background-color: #89939e;
    color: white;
}