{% 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;
}
.positioning1{
    float: left; width: 15%; margin-right: 15%; margin-bottom: 0.5em



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



}

.positioning7{
     float: left; text-align: center; width: 15%;margin-left: 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: 40%;
        position: absolute;
        bottom: 0;


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


    }
.positioning3{
    float: left; width: 15%; margin-left: 15%; margin-bottom: 0.5em



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



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



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


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

<div class="title">
    Stage 3
</div>

<br>
<div class="text">
    There was no match in your Group.

</div>

<br>
<div class="text">
    We request you to choose the other member of your group to work with in Stage 4.

</div>
<br>
<img class="positioning1" src="{{imgColl1}}">


    <img class="positioning1" src="{{imgColl2}}">
<p style="clear: both;">
{{ if helpV == "P2"}}

    {{ for choice in form.helpV2 }}
    <div class="positioning7">
        {{ choice }}
    </div>
    {{ endfor }}

{{endif}}
{{if helpV == "P3"}}

        {{ for choice in form.helpV2 }}
    <div class="positioning2">
        {{ choice }}
    </div>
    {{ endfor }}
{{endif}}


<p style="clear: both;">

<div class="positioning2">{{part1}}</div>
<div class="positioning2">
    {{part2}}
</div>
    <p style="clear: both;">

<img class="positioning3" src="{{ava_pic}}">
        <p style="clear: both;">
<div class="positioning4">
    You (P{{number_in_group}})
</div>

<p style="clear: both;">


    {{ next_button }}


{{ endblock }}