@media (min-width:1080px){
    #tableEntity{
        display:table !important;
    }
}

@media (max-width:400px) {
    #diivCanva {
        justify-content: normal !important;
    }
}

@media  (max-width:450px) {
    #divtitulobu {
        width: 100% !important;
    }
} 

body {
    align-items: center;
    background: #E3E3E3;
    
    height: 100vh;
    justify-content: center;
}


.leyendaH {
    text-align: center;
}

.leyenda ul {
    list-style-type: none;
    padding: 0 10px;
}

.leyendaH ul {
    display: inline-block;
}

.leyenda ul > li {
    font-size: 14px;
}

.leyendaH ul > li {
    float: left;
    margin-right: 10px;
}

.leyenda ul > li > span {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 3px;
}




.alert-danger {
    color: black !important;
}

    @mixin white-gradient {
        background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    }

    $animationSpeed: 40s;
    // Animation 
    @keyframes scroll {
    0%

{
    transform: translateX(0);
}

100% {
    transform: translateX(calc(-250px * 7))
}

}


// Styling
.slider {
    background: white;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 960px;
    &::before, &::after

{
    @include white-gradient;
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
}

&::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

&::before {
    left: 0;
    top: 0;
}

.slide-track {
    animation: scroll $animationSpeed linear infinite;
    display: flex;
    width: calc(250px * 14);
}

.slide {
    height: 100px;
    width: 250px;
}
}