.card-content-style-blue {
    border-left: 10px solid turquoise; /* Cambia el color y el grosor del borde según sea necesario */
    border-radius: 10px; /* Cambia el radio de borde según sea necesario */
    background-color: #eeeeee;
    color: black;
    margin-top: 20px;
}

.card-content-style-yellow {
    border-left: 10px solid yellow; /* Cambia el color y el grosor del borde según sea necesario */
    border-radius: 10px; /* Cambia el radio de borde según sea necesario */
    background-color: #eeeeee;
    color: black;
    margin-top: 20px;
}

.card-content-style-red {
    border-left: 10px solid red; /* Cambia el color y el grosor del borde según sea necesario */
    border-radius: 10px; /* Cambia el radio de borde según sea necesario */
    background-color: #eeeeee;
    color: black;
    margin-top: 20px;
}

.card-content-style-orange {
    border-left: 10px solid orange; /* Cambia el color y el grosor del borde según sea necesario */
    border-radius: 10px; /* Cambia el radio de borde según sea necesario */
    background-color: #eeeeee;
    color: black;
    margin-top: 20px;
}

.card-content-style-purple {
    border-left: 10px solid purple; /* Cambia el color y el grosor del borde según sea necesario */
    border-radius: 10px; /* Cambia el radio de borde según sea necesario */
    background-color: #eeeeee;
    color: black;
    margin-top: 20px;
}

/* .mud-tab-slider {
                    background-color: #AD744C;
                } */

.container-report-card {
    display: flex;
    width: 100%;
}


/* Mostrar contenido solo en pantallas menores a 921px */
@media (max-width: 920px) {
    .screen-less-than-720-px {
        display: block;
        width: 100%;
    }

    .screen-more-than-720-px {
        display: none;
    }

    .last-div {
        width: 100%;
    }
}

/* Mostrar contenido solo en pantallas mayores o iguales a 921px */
@media (min-width: 921px) {
    .container-report-card {
        display: flex;
    }

    .screen-less-than-720-px {
        display: none;
    }

    .screen-more-than-720-px {
        display: block;
        width: 300px;
    }

    .last-div {
        flex: 1; /* Toma el ancho restante */
    }

    /* Estilos de tarjetas con ancho fijo de 300px */
    .card-content-style-yellow,
    .card-content-style-blue,
    .card-content-style-orange,
    .card-content-style-purple,
    .card-content-style-red {
        width: 300px;
    }
}