.quiz-big-container {

    background-image: url("/assets/img/bg_quiz.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: auto;

}

.quiz-container {

    max-width: 100%;
    backdrop-filter: blur(5px);

}

.quiz-question {
    border-radius: 10px;
}

.enable-question {display: initial !important;}

.disable-question {display: none !important;}


.answer-input {
    display: none;
}

.answer {

    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: 0.25s;
    border : 2px solid #ffffff
    
}

.answer img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    object-position: center;
}


.answer:hover {
    background: #f1b7c5;
}


.answer-input:checked + .answer {
    background: #f1b7c5;
    border : 2px solid #ffffff
}


.quiz-bouttons {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
}


.btn-quiz {
    padding: 12px 28px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.25s;
    font-weight: bold;
}


.btn-quiz.prev {
    background: #ffffff;
    color: rgba(0, 0, 0, 0.733);
    border: 1px solid #ffffff;
}

.btn-quiz.prev:hover {
    background: #ecebeb;
}


.btn-quiz.next {
    background: #ffffff;
    color: rgba(0, 0, 0, 0.733);
    border: 1px solid #ffffff;
}

.btn-quiz.next:hover {
    background: #ecebeb;
}

.btn-quiz:disabled {
    background: #bfbfbf;
    color: #777;
    cursor: not-allowed;
    opacity: 0.7;
}


.product-card:hover:not(.card-static) {
    border-color: initial !important;
    box-shadow: none !important;
    z-index: auto !important;
}

.product-card:hover:not(.card-static) .product-card-actions .btn-action {
    opacity: 0 !important;
    visibility: hidden !important;
}

.product-card:hover:not(.card-static) .card-body-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    box-shadow: none !important;
}


@keyframes productQuizShow {
    
    from {opacity: 0;}
    to {opacity: 1;}

}

.productShow {

    animation : productQuizShow 1.2s ease-in both

}