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

{% block app_styles %}
    <!-- THis file is the CSS stylesheet for the different pages -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
    p {
        text-align: center;
    }

    .otree-timer {
        margin-top: 100px;
    }

    .left-aligned {
        text-align: left;
    }

    .space {
        margin-bottom: 1cm;
    }

    .small_space {
        margin-bottom: 0.3cm;
    }

    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .raven_formfield {
        transform: scale(1.3);
    }


    .nav>li>a {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    h4 {
        text-align: center;
    }

    /* back and forth button */
    .next {
        float: right;
        margin: 40px auto;
    }

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

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

    /* tabs */
    .tab_header {
        display: inline-block;
        vertical-align: top;
        position:relative;
        text-align: center;
    }

    .tab_element {
        display: block;
    }

    .final-payoff {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
    }
    </style>

{% endblock %}