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


{% endblock %}
{% block of styles %}
<style>
.text {
    font-family: Calibri;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;

}
.otree-btn-next{
    background-color: red;
    position: absolute;
    right: 20%;
}
.title {
    font-size: xx-large;
    font-weight: bold;
    font-family: Serif;
}
.text_b {
    font-family: Serif;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;
    font-weight: bold;
}

.positioningava{
    width: 5%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.positioningava1{
    width: 15%;
    position: relative;



}
.positioning1{
    float: left; width: 15%; margin-right: 35%; margin-bottom: 0.5em



}
.positioning2{
     float: left; text-align: center; width: 15%; margin-right: 35%;  margin-bottom: 0.5em;
    font-family: Serif;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;
    font-weight: bold;



}

.large-options {
        height: 250px;
        width: 150px;
        margin-top: 1%;
        margin-bottom: 1%;
    background-color: transparent;
    border: none;
        cursor: pointer;
    }

    .container .answer:hover {
        background-color: #e9e9e9;
        opacity: 0.3;
        border-radius: 5px;
    }

  #large-options-container {
        width: 25%;
        height: 70%;
        position: absolute;
        bottom: 0;


    }
   #large-options-container2 {
        width: 25%;
        height: 70%;
        position: absolute;
        bottom: 0;
       margin-left: 31%;


    }
   .positioning5{
    float: left; margin-bottom: 0.5em; margin-left: 5%;



}
</style>
{% endblock %}
{{ block content }}
<br>

<div class="text">
<img class="positioningava" src="{{ava_pic}}">
</div>







<div class="title">
    Stage 6
</div>
<br>
<div class="text">
Please select which of the two participants below you’d like to chat with for the next two minutes

</div>
<br>

    <img class="positioning1" src="{{par1}}">

    <img class="positioning1" src="{{par2}}">
<p style="clear: both;">


    <div class="positioning5">

        <input class="form-check-input" type="radio" id="id_selection-0" name="selection" required="" value="1">

    </div>
<div class="positioning5" style="margin-left: 45%">
    <input class="form-check-input" type="radio" id="id_selection-1" name="selection" required="" value="2">

    </div>




<p style="clear: both;">

{{ next_button }}

{{ endblock }}