{% load otree static %}

<div class="task_box" style="background-color: #f7f7fa">
    <div style="background: black; border: solid 1px black ; border-radius: 5px 5px 0 0;">
        <p style="font-weight:bold; color: white; margin: 5px auto 5px 25px;">
            Please take a moment to read about this situation:
        </p>
    </div>
    <div style="margin: 3% 2.5% 4% 2.5%;">
        <p class="formatting_content">
            In today's study, you will decide how to allocate 20 balls between two buckets.
            Your task is to put each of the balls, one-by-one, into one of the two buckets: the blue bucket or
            the yellow bucket.
            The balls will appear in the center of your screen, and you can allocate each ball by clicking and dragging
            it to the bucket of your choice.
            For each ball you put in the blue bucket, you will receive {{player.RFT_blue_bonus}}, and for each ball
            you put in the yellow bucket, you will receive {{player.RFT_yellow_bonus}}.
        </p>
        <p class="formatting_content" style="text-align: center">
            <b>The rule is to put the balls in the blue bucket</b>
        </p>
        <p class="formatting_content">
            Your payment will be based on your decisions: it is the sum of payments from the blue and yellow buckets.
        </p>
    </div>
</div>