{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
   <b style="color:grey"> Summary of Instructions </b>
{% endblock %}

{% block app_styles %}
<style type="text/css">
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slidecontainer2 {
  width: 100%;
}

.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2:hover {
  opacity: 1;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.center {
border: 5px solid #FFFF00;
text-align: center;
}

.display {
    border: 10px solid red;
}

.important {
        font-size: 14pt;
        font-weight: bold;
    }

th {
    border: 1px solid black;
    font-size: 16pt;
    width: 650px;
    text-align: right;
    font-weight:normal;
    }

td {
    font-size: 14pt;
    border: 1px solid black;
    text-align: center;
    }

table {
    table-layout: fixed;
    width: 800px;
    }

.history td {
    font-size: 16pt;
    }

.history th {
    font-size: 12pt;
    width: 100px;
    text-align: center;
    }
     .frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;
}
.frac > span {
    display: block;
    padding: 0.1em;
}
.frac span.bottom {
    border-top: thin solid black;
}
.frac span.symbol {
    display: none;
}

</style>
{% endblock %}

{% block content %}
<p></p>
  <h4>  Welcome to this experiment in decision-making.</h4>
<p></p>
<ul>
    <li>
        <b>General Information:</b>
    </li><ul>
        <li>You will participate in <b style="color:gray">{{ practice_num_rounds }} Practice Rounds</b> and then
            <b style="color:gray">{{ num_rounds }} independent Paying Rounds</b> with {{num_other_participants}} other participants.</li>
        <p></p>
        <li>
            <b class="important">At the beginning of the Experiment you'll be randomly assign to be either a   <b><span class="important" style="color:green">Seller</span></b> or a  <b><span class="important" style="color:green">
                Buyer</span></b> for the entire session. </b>
        </li>
        <p></p>
        <li><b class="important"> Instructions will remain the same for every round throughout the entire experiment</b>, the only thing changing will be interest rate at which money can be borrowed. </li>
        <p> </p>
        <li>At the start of each round, each <b><span class="important" style="color:green">Seller</span></b> will be paired with one <b><span class="important" style="color:green">Buyer</span></b> for that round.
        <p></p>
           <li>
            Chances of being paired with the exact same participant in 2 or more consecutive rounds are extremely low.
            </li>

        <p></p>
               <li>
             In each round, each Seller-Buyer pair will bargain over the amount of <b style="color:blue">Output</b> the Seller provides (at a cost to them)  and the <b>Payment</b> the Buyer makes for it (out of their money holdings).
            </li>

        <p></p>
        <li>The bargaining takes the following form: both participants can make as many offers as they like regarding <b style="color:blue">Output</b> and <b>Payment</b> until one of them accepts an offer or 2 minutes go by. Once it is made, an offer can not be withdrawn, so there will be a list and any previous offer can always be latter accepted.
            </li>

        <p></p>
    </ul>

    <li>
        <b>Paying Rounds:</b>
    </li><ul>
        <li>
            After the <b style="color:gray">Practice Rounds</b>, you'll enter the <b style="color:gray">Paying Rounds</b>.
        </li>
        <p></p>
        <li>
            At the end of the experiment, your earnings from one randomly selected round will be paid to you.
            <b style="color:gray">Paying Round</b>.

            <!--,
            transformed to US dollars (US$) at a rate of <em> 1 US$ per {{us_exchange_rate}} L$</em>,
            will be paid to you. -->
        </li>


    </ul>
<p></p>
    <br>
 {# <div style="border: thin solid lightgray; padding:5px"> #}
<center>
    <small><b style="color:red">Please notice</b>: Throughout the experiment, payoffs, costs and payments will always be
        expressed in <em> US Dollars, &dollar;</em>.</small>
</center>
{# </div> #}

    </ul>

<p></p><br>
{% next_button %}



{% endblock%}