<div id="flash-messages-container">
    <div id="flash-messages">
        <div class="row">
            <div class="large-8 medium-10 small-11 large-centered medium-centered small-centered columns" id="flash-messages-content">
                {% if app.session.flashbag.has('success_messages') %}
                    <div class="success callout flash-messages" data-closable>
                        <i class="fi-check fa fa-check"></i>
                        {% for successMessage in app.session.flashbag.get('success_messages') %}
                            <div>{{ successMessage|raw }}</div>
                        {% endfor %}
                        <button class="close-button flash-messages-close-button" type="button" data-close>
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                {% endif %}
                {% if app.session.flashbag.has('error_messages') %}
                    <div class="alert callout flash-messages" data-closable>
                        <i class="fi-x-circle fa fa-times"></i>
                        {% for errorMessage in app.session.flashbag.get('error_messages') %}
                            <div>{{ errorMessage|raw }}</div>
                        {% endfor %}
                        <button class="close-button flash-messages-close-button" type="button" data-close>
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<style>
    #flash-messages-container2{
        position: fixed;
        width: 100%;
        z-index: 9999;
        left: 0;
        top: 2em;
    }
    #flash-messages2{
        margin: 0 auto;
        width: 60%;
    }
</style>
<div id="flash-messages-container2">
    <div id="flash-messages2"></div>
</div>
