#productListContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Espaciado entre tarjetas */
}

.product-info {
    position: relative; /* Para que la posición absoluta funcione correctamente */
    flex: 1 1 calc(33.3333% - 1rem); /* Ajusta este valor para que se alineen en una fila */
    box-sizing: border-box;
    max-width: calc(
        33.3333% - 1rem
    ); /* Ajusta el valor para considerar el gap */
}

/* Mantener el estilo de los botones */
.product-info .remove-product {
    position: absolute;
    top: 10px;
    right: 10px;
}

.product-attributes {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

/* Ocultar tabla en dispositivos móviles */
@media (max-width: 768px) {
    .table-container {
        display: none;
    }
    .card-container {
        display: block;
    }
}

/* Ocultar tarjetas en dispositivos de escritorio */
@media (min-width: 769px) {
    .table-container {
        display: block;
    }
    .card-container {
        display: none;
    }
}

/* Estilos para las filas de la tabla de videos */
#videoListBodyTable tr {
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Evitar que el contenido de la celda se envuelva */
}

/* #videoListBodyTable tr:hover {
    background-color: #f1f1f1;
} */

/* Estilos para las celdas de la tabla para asegurarse de que no se desborden */
#videoListBodyTable td {
    max-width: 200px; /* Ajusta esto según sea necesario */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Estilos para los íconos */
.ti-video {
    color: #007bff;
}

.ti-circle-minus {
    color: #dc3545;
}

/* Estilos específicos para pantallas pequeñas */
@media (max-width: 768px) {
    #videoListBodyTable td {
        max-width: 100px; /* Ajusta esto según sea necesario */
    }
}