{% apply inline_css %}
{% apply inky_to_html %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Tijd voor de test{% endblock %}</title>
    <style>
        body, table, td { font-family: Arial, Helvetica, sans-serif; }
        body {
            margin: 0;
            padding: 0;
            width: 100% !important;
            background-color: #f2f4f1;
            color: #22281f;
        }
        table { border-collapse: collapse; }
        img { border: 0; }
        a { color: #2d7a1f; }

        .body-table { width: 100%; background-color: #f2f4f1; }

        .container { width: 100%; max-width: 580px; }

        .header > tbody > tr > th { padding: 28px 24px 20px 24px; text-align: center; }

        .brand-table { margin: 0 auto; }
        .square-cell { width: 18px; }
        .square {
            width: 18px !important;
            height: 18px !important;
            max-width: 18px;
            min-width: 18px;
            max-height: 18px;
            min-height: 18px;
            font-size: 0;
            line-height: 1px;
            border-radius: 4px;
            background-color: #6abf4b;
        }
        .square-gap { width: 10px; font-size: 0; line-height: 1px; }
        .brand {
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 0.5px;
            color: #17321a;
            white-space: nowrap;
        }

        .content-wrapper { background-color: #f2f4f1; }
        .content-wrapper > tbody > tr > th { padding: 24px 28px; }

        .card {
            background-color: #ffffff;
            border-radius: 8px;
            border: 1px solid #e1e6dd;
        }
        .card td.card-inner { padding: 32px; }

        h1.heading {
            margin: 0 0 16px 0;
            font-size: 21px;
            line-height: 1.3;
            color: #17321a;
        }

        p.text {
            margin: 0 0 16px 0;
            font-size: 15px;
            line-height: 1.6;
            color: #3a4239;
        }
        p.text:last-child { margin-bottom: 0; }

        .button { margin: 8px auto 12px auto; width: auto !important; }
        .button table { width: auto; margin: 0 auto; }
        .button td { border-radius: 5px; background: #2d7a1f; }
        .button a {
            background: #2d7a1f;
            color: #ffffff !important;
            border-radius: 5px;
            display: inline-block;
            padding: 12px 26px;
            font-size: 15px;
            font-weight: bold;
            text-decoration: none;
            border: 1px solid #2d7a1f;
        }

        .h-line th { border-bottom: 1px solid #e1e6dd; height: 1px; font-size: 0; line-height: 0; }

        .footer > tbody > tr > th { padding: 24px 28px 32px 28px; text-align: center; }
        .footer p {
            margin: 0;
            font-size: 12px;
            line-height: 1.6;
            color: #8b9186;
        }

        .preheader {
            display: none !important;
            visibility: hidden;
            opacity: 0;
            color: transparent;
            height: 0;
            width: 0;
            font-size: 1px;
            line-height: 1px;
            max-height: 0;
            max-width: 0;
            overflow: hidden;
            mso-hide: all;
        }
    </style>
</head>
<body>
<span class="preheader">{% block preheader %}{% endblock %}</span>
<table class="body-table" role="presentation">
    <tr>
        <td align="center">
            <container>
                <row class="header">
                    <columns small="12" large="12" no-expander="true">
                        <table class="brand-table" role="presentation" align="center">
                            <tr>
                                <td class="square-cell" valign="middle">
                                    <table role="presentation" width="18" height="18" style="width: 18px !important; height: 18px !important; max-width: 18px; min-width: 18px;">
                                        <tr style="height: 18px !important;">
                                            <td class="square" width="18" height="18" style="width: 18px !important; height: 18px !important; max-width: 18px; min-width: 18px; max-height: 18px; min-height: 18px;">&nbsp;</td>
                                        </tr>
                                    </table>
                                </td>
                                <td class="square-gap">&nbsp;</td>
                                <td class="brand" valign="middle">Tijd voor de test</td>
                            </tr>
                        </table>
                    </columns>
                </row>

                <row class="content-wrapper">
                    <columns small="12" large="12" class="content" no-expander="true">
                        <table class="card" role="presentation" width="100%">
                            <tr>
                                <td class="card-inner">
                                    <h1 class="heading">{% block heading %}{% endblock %}</h1>
                                    {% block body %}{% endblock %}
                                </td>
                            </tr>
                        </table>
                    </columns>
                </row>

                <row class="footer">
                    <columns small="12" large="12" no-expander="true">
                        <h-line></h-line>
                        <spacer size="16"></spacer>
                        {% block footer_extra %}{% endblock %}
                    </columns>
                </row>
            </container>
        </td>
    </tr>
</table>
</body>
</html>
{% endapply %}
{% endapply %}
