{{ extends "otree/WaitPage.html" }}

{{ block title }}<br>
    {{ if player.id_in_group == 1 }}
        <div align="center" class="var_title"><h2>あなたの役割はAです</h2></div>
    {{ else }}
        <div align="center" class="var_title"><h2>あなたの役割はBです</h2></div>
    {{ endif}}
{{ endblock }}

{{ block styles }}
<style>
        .loader {
            position: relative;
            width: 80px;
            margin: 65px auto;
        }

        .duo {
            height: 20px;
            width: 50px;
            background: hsla(0, 0%, 0%, 0.0);
            position: absolute;

        }

        .duo,
        .dot {
            animation-duration: 2.5s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
        }

        .duo1 {
            left: 0;
        }

        .duo2 {
            left: 30px
        }


        .dot {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background: #333;
            position: absolute;
        }

        .dot-a {
            left: 0px;
        }

        .dot-b {
            right: 0px;
        }


        @keyframes spin {
            0% {
                transform: rotate(0deg)
            }

            50% {
                transform: rotate(180deg)
            }

            100% {
                transform: rotate(180deg)
            }
        }

        @keyframes onOff {
            0% {
                opacity: 0;
            }

            49% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 1;
            }
        }

        .duo1 {
            animation-name: spin;
        }

        .duo2 {
            animation-name: spin;
            animation-direction: reverse;
        }

        .duo2 .dot-b {
            animation-name: onOff;
        }

        .duo1 .dot-a {
            opacity: 0;
            animation-name: onOff;
            animation-direction: reverse;
        }



        .card {
            background: transparent;
            border: none;
            border-radius: 5px;
            box-shadow: 0 0 0;
            /*width: 940px; */
            margin: 22px auto;
        }

        .card-header {
            background: transparent;
            border: none;
        }

        .page-header {
            border: none;
        }

        .card-body {
            margin-top: 0px;
        }

        .progress {
            background-color: transparent;

        }

        .progress-bar {
            width: 0;
            background-color: transparent;
            border: transparent;
            color: transparent;
        }

        .otree-timer {
            background-color: transparent;
            border: none;
            position: absolute;
            top: 0;
            right: 0;
            padding-right: 30px;
        }

        body {
            background-color: #B6D7E0;
            font-family: "Roboto", sans-serif;

        }

        .yellow {
            background-color: #F2EF5C;
            padding-left: 5px;
            padding-right: 5px;
            font-weight: 700;
        }

        .blue {
            color: #4993EC;
        }

        .orange {
            color: #E66236;
        }

        .red {
            color: #D41876;
            font-weight: 600;
        }

        .red_em {
            color: #D41876;
            font-weight: 600;
            font-size: 1.3em;
        }

        .white {
            color: white;
        }

        .title_blue {
            color: #F7FEDC;
            font-weight: 900;
        }

        .form-check {
            padding: 10px;
        }

        ul {
            list-style-type: none;
        }

        li {
            padding: 25px;
        }

        .flex {
            display: flex;
            justify-content: center;
        }

        .tiny {
            font-size: medium;
            padding-top: 5px;
            font-weight: 400;
        }



        .btn_small {
            background-color: #BFD6E6;
            display: inline-block;
            border: none;
            box-shadow: 2px 2px 4px gray;
            border-radius: 6px;
            text-align: center;
            padding: 20px;
        }

        .var_btn_wo_hover {
            background-color: white;
            display: inline-block;
            border: none;
            box-shadow: 2px 2px 4px gray;
            border-radius: 6px;
            text-align: center;
            padding: 35px;
        }

        .var_headline {
            color: #4993EC;
        }

        .var_text {
            color: #e69436;
        }

        .var_title {
            color: #F8FDE8;
            font-weight: 900;
        }

        .var_btn {
            background-color: white;
            display: inline-block;
            border: none;
            box-shadow: 2px 2px 4px gray;
            border-radius: 6px;
            text-align: center;
            padding: 35px;
        }

        .var_btn:hover {
            background-color: #AAD4E9;
        }
</style>
{{ endblock }}








{{ block content }}
<div align="center">

    <div class="card bg-light instructions"
        style="height:220px;width:340px; overflow:auto; box-shadow: 2px 2px 4px gray;">
        <div class="loader">
            <div class="duo duo1">
                <div class="dot dot-a"></div>
                <div class="dot dot-b"></div>
            </div>
            <div class="duo duo2">
                <div class="dot dot-a"></div>
                <div class="dot dot-b"></div>
            </div>
        </div>
            <p>相手の選択が終わるまで<br>
            しばらくお待ちください</p>

    </div>
    <br>
</div>

{{ endblock }}