.card-scroll {
    display: flex;
    overflow:hidden;
    overflow-x: auto;
    position: relative;
    padding:1.5vh;
    margin-bottom:2vh;
}

.card-coppia {
    position: relative;
    display: block;
    color: white;
    border: 2px solid black;
    background-color: #6C757D;

    overflow: hidden; /* Hides the overflow content */
    overflow-y: auto; /* Shows vertical scrollbar only when needed */
    overflow-x: auto;
    border-radius: 5px;
    flex-shrink: 0;
    cursor: default;
}

.card-coppia-row {
    display: flex;
    gap: 1rem;
}

.card-coppia-delete {
    color: #FED97C;
    position: absolute;
    right: 3%;
    bottom: 5%;
    cursor: pointer;
    font-size: 1.5vh;
    transition: all 0.3s;
}

.card-coppia-delete:hover {
    font-size: 2vh;
    color: #FECB4B;
}



.fade-in {
    animation: fadeIn 0.3s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform:scale(0);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.fade-out {
    animation: fadeOut 0.3s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {

    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform:scale(0);
    }
}


.opacity-in {
    animation: opacityIn 0.3s;
    animation-fill-mode: forwards;
}

@keyframes opacityIn {


    100% {
        opacity: 1;
    }
}


.opacity-out {
    animation: opacityOut 0.3s;
    animation-fill-mode: forwards;
}

@keyframes opacityOut {



    100% {
        opacity: 0.5;
    }
}

.slide-sx {
    animation: slideSx 0.5s;
}

@keyframes slideSx {

    100% {
        transform: translateX(-17vw);
    }
}

.slide-dx {
    animation: slideDx 0.5s;
}

@keyframes slideDx {

    100% {
        transform: translateX(17vw);
    }
}

@keyframes flashRed {
    0% {
        color: white;
    }

    50% {
        color: #a21818;
    }

    100% {
        color: white;
    }
}

.blinking-text {
    animation: flashRed 1s infinite;
}

@keyframes flashRedBack {
    0% {
        background-color: #5C636A;
    }

    50% {
        background-color: #a21818;
    }

    100% {
        background-color: #5C636A;
    }
}

.blinking-back {
    animation: flashRedBack 1s infinite;
}

@keyframes flashRedBorder {

    0% {
        box-shadow: none;
    }
    50% {
        box-shadow: 0 0 0 2px #a21818;
    }
    100% {
        box-shadow: none;
    }
}

.blinking-border {
    animation: flashRedBorder 1s infinite;
}

.date-picker {
    color: white;
    background-color: #5C636A;
    cursor: pointer;

}
.pointer-events-none {
    pointer-events: none;
}

.dropdown-item:hover{
    cursor:pointer;
}