{% block styles %}

<style>

        input[type="range"] {
    -webkit-appearance: none; /* Remove default styling */
    width: 100%;
    height: 10px;
    background: transparent; /* Default track background */
    outline: none;
    border-radius: 5px;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 10px;
    border-radius: 5px;
    background: transparent; /* Background is set dynamically in JS */
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #666; /* Thumb color */
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

input[type="range"]::-moz-range-track {
    background: transparent;
    height: 10px;
    border-radius: 5px;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #666;
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
    height: 10px;
}

input[type="range"]::-ms-fill-lower {
    background: transparent;
    border-radius: 5px;
}

input[type="range"]::-ms-fill-upper {
    background: transparent;
    border-radius: 5px;
}

        .grid-container {
  display: grid;
  grid-template-columns: 3ch 1fr;
  align-items:baseline;
}

.grid-container input {
  grid-column-start: 1;
}

.grid-container label {
  grid-column-start: 2;
}
            #selected_2 {
background-color: #efe341;
            }

        .selected {
background-color: #efe341;
         border: 1px solid grey;
width: 15em;
height: 4em;
            }

        .td1 {
        border: 1px solid grey;
width: 15em;
height: 4em;
}

            .wrong {
  border: 0.3em solid red;
  margin: 0.5em;
}
        .right {
  border: 0.3em solid green;
  margin: 0.5em;
}

    .next {
    float: right;
    margin: 40px auto;
    }

 .back{
    float: left;
    margin: 40px auto;
    }



    .page-header {
    margin: 0px 0 5px;
    padding: 0;
    border-bottom: none;
    text-align: center;
}

p{
    text-align: justify;
    text-justify: inter-word;
}


.nav {
    visibility: hidden;
}

</style>

{% endblock %}


{% block scripts %}


{% endblock %}



{{ block title }}

{{ endblock }}


{{ block content }}


<h1>Instructions </h1>

<p> In this experiment, you will be asked to make a number of choices between different options.
    We first explain the pairs of options. Then we explain the evaluation procedure.

</p>
{{ include_sibling 'Instructions_choice.html' }}

<br>
<br>
{{ include_sibling 'Instructions_evaluation.html' }}

    <br>
    {{ next_button }}
{{ endblock }}