form {
        background: #fff;
        width: 100%;
        margin: auto;
        padding: 30px;
        min-width: 320px;
        max-width: 540px;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        border-radius: 3px;
    }

    .responstable {
        margin: 1em 0;
        width: 100%;
        overflow: hidden;
        background: #FFF;

        border-radius: 10px;
        border: 1px solid #167F92;
    }
    .responstable tr {
        border: 1px solid #D9E4E6;
    }
    .responstable tr:nth-child(odd) {
        background-color: #EAF3F3;
    }
    .responstable th {
        display: none;
        border: 1px solid #FFF;
        background-color: #3c769a;
        color: #FFF;
        padding: 1em;
    }
    .responstable th:first-child {
        display: table-cell;
        text-align: center;
    }
    .responstable th:nth-child(2) {
        display: table-cell;
    }
    .responstable th:nth-child(2) span {
        display: none;
    }
    .responstable th:nth-child(2):after {
        content: attr(data-th);
    }
    @media (min-width: 480px) {
        .responstable th:nth-child(2) span {
            display: block;
        }
        .responstable th:nth-child(2):after {
            display: none;
        }
    }
    .responstable td {
        display: block;
        word-wrap: break-word;
        max-width: 7em;
    }
    .responstable td:first-child {
        display: table-cell;

        border-right: 1px solid #D9E4E6;
    }
    @media (min-width: 480px) {
        .responstable td {
            border: 1px solid #D9E4E6;
        }
    }
    .responstable th, .responstable td {
        text-align: left;
        margin: .5em 1em;
    }
    @media (min-width: 480px) {
        .responstable th, .responstable td {
            display: table-cell;
            padding: 1em;
        }
    }