/* Modal animations */
#updateChallengeModal {
    display: none;
}

    #updateChallengeModal.show {
        display: flex !important;
        animation: fadeIn 0.3s ease-out;
        z-index: 9000;
    }

        #updateChallengeModal.show > div {
            animation: slideUp 0.3s ease-out;
        }

#updateSuccessAnimationModal {
    display: none;
}

    #updateSuccessAnimationModal.show {
        display: flex !important;
        animation: fadeIn 0.3s ease-out;
    }

        #updateSuccessAnimationModal.show #updateSuccessAnimationContent {
            animation: scaleIn 0.5s ease-out forwards;
        }

@media (max-width: 768px) {
    #updateChallengeModal.show {
        display: block !important;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* Custom scrollbar for modal */
#updateChallengeModal > div::-webkit-scrollbar {
    width: 8px;
}

#updateChallengeModal > div::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#updateChallengeModal > div::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

    #updateChallengeModal > div::-webkit-scrollbar-thumb:hover {
        background: #555;
    }