{% block stylesheet %}
    <style scoped>
        .flash-thanks{
            background-color: var(--flashSuccessBg);
            color: var(--flashSuccessColor);
            text-align: center;
            width:100%;
            height: 100%;
            margin: auto;
            padding: 1.3em;
        }
        .flash-error{
            background-color: var(--flashErrorBg);
            color: var(--flashErrorColor);
            text-align: center;
            width:100%;
            height: 100%;
            margin: auto;
            padding: 1.3em;
        }
        h3{
            color: #f2f2f2;
        }
    </style>
{% endblock %}

{% if flashbag.label == 'warning' %}
<div class="flash-error">
    <h3><b>{{flashbag.title}}</b></h3>
    <p  style="font-size:1rem">{{flashbag.message|raw}}</p>
</div>

{% else %}
    <div class="flash-thanks">
        <h3><b>{{flashbag.title}} <i class="fas fa-check"></i></b></h3>
        <p style="font-size:1rem">{{flashbag.message|raw}}</p>
        <p style="font-size:1rem">{{flashbag.footer}} <i class="fas fa-smile-beam"></i></p>
    </div>
{% endif %}