.quiz-block {

    div.form-part {
        display: none;

        &[data-form-part-status="active"] {
            display: block;
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.5s ease, transform 0.5s ease;

            @starting-style {
                opacity: 0;
                transform: translateY(10px);
            }
        }

        .custom-control.custom-radio {
            position: relative;
            display: block;
            margin-bottom: 10px;

            .custom-control-input {
                position: absolute;
                opacity: 0;
                width: 0;
                height: 0;
            }

            .custom-control-label {
                position: relative;
                display: block;
                padding-left: 40px;
                cursor: pointer;
                font-size: 16px;
                font-weight: 400;
                line-height: 1.4;
                color: #333;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 20px;
                    height: 20px;
                    border: 2px solid #ccc;
                    border-radius: 50%;
                    background-color: #fff;
                    transition: all 0.3s ease;
                }
            }

            .custom-control-input:checked+.custom-control-label::before {
                background: radial-gradient(circle at center, var(--spryg--preset--color--yellow) 0%, var(--spryg--preset--color--yellow) 50%, rgba(255, 193, 7, 0.3) 60%, transparent 100%);
                border-color: var(--spryg--preset--color--yellow);
            }

        }
    }

    .btn-outline-success {
        cursor: pointer;
        padding: .65em 1em .65em 1em;
        background: transparent;
        color: var(--spryg--preset--color--green);
        border: 2px solid var(--spryg--preset--color--green);
        font-size: 16px;
        font-weight: 700;
        text-transform: none;
        text-decoration: none;
        display: flex;
        gap: .51rem;
        margin-bottom: 1rem;
        &.disabled {
            opacity: 0.5;
            filter: grayscale(100%);
            cursor: not-allowed;
        }
    }

    .text-secondary{
        font-size: 14px;
        display: flex;
        gap: .51rem;
        cursor: pointer;
        color: var(--spryg--preset--color--grey);
    }

    .error-message{
        display: none !important
    }
}