html:not([data-scroll='0']) {
    #item-header {
        box-shadow: 0 0.5rem 0.5rem -0.5rem rgba(0, 0, 0, 0.2);
    }
}

.transition-width-15s {
    transition: width 1.5s ease;
}

.fade {
    transition: opacity .15s linear;
}

.fade:not(.show) {
    opacity: 0;
}

.modal-wrapper.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0,-50px);
}


/* Rotate infinitely */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotating {
    animation: spin 2s linear infinite;
    /* Optional: Set the transform origin */
    /*transform-origin: center;*/
}

/* Pulse infinitely */

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}

.pulsing {
    animation: pulse 2s ease-in-out infinite;
}

/* Rotate and pulse infinitely */

@keyframes spinAndPulse {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(90deg) scale(0.75);
    }
    50% {
        transform: rotate(180deg) scale(1);
    }
    75% {
        transform: rotate(270deg) scale(0.75);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.pulsing-rotating {
    animation: spinAndPulse 4s linear infinite;
    transform-origin: center;
}

/* Float vertical infinitely */

@keyframes float-y {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.5rem);
    }
}

.floating-y {
    animation: float-y 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        animation-duration: 1ms !important;
        animation-delay: -1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
    }
}