* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #1a1a1a;
    background: #f4f6f8;
}

/* Nav */
nav.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #2c3e50;
    color: #fff;
    padding: 14px 24px;
}

nav.topnav .nav-title {
    font-size: 20px;
    font-weight: 600;
}

nav.topnav .nav-links a {
    color: #cfd8e3;
    text-decoration: none;
    margin-left: 20px;
    font-size: 14px;
    letter-spacing: 0.5px;
}

nav.topnav .nav-links a:hover {
    color: #fff;
}

/* Content */
.content {
    max-width: 820px;
    margin: 32px auto;
    padding: 0 20px;
}

.card {
    background: #fff;
    border-radius: 10px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card h1 {
    margin-top: 0;
}

.lead {
    color: #555;
}

.banner {
    background: #e6f7ec;
    border: 1px solid #9ad6b0;
    color: #1d7a45;
    padding: 12px 16px;
    border-radius: 6px;
    margin: 16px 0;
}

/* Form */
.feedback-form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.feedback-form label {
    font-weight: 600;
    margin: 14px 0 6px;
    font-size: 14px;
}

.feedback-form input,
.feedback-form textarea {
    padding: 10px 12px;
    border: 1px solid #cbd2d9;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
}

.feedback-form input:focus,
.feedback-form textarea:focus {
    outline: none;
    border-color: #2c3e50;
}

.feedback-form button {
    margin-top: 20px;
    align-self: flex-start;
    background: #2c3e50;
    color: #fff;
    border: none;
    padding: 11px 22px;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
}

.feedback-form button:hover {
    background: #1b2a38;
}

.fineprint {
    margin-top: 18px;
    font-size: 13px;
    color: #777;
}

.fineprint a,
.lead a {
    color: #3030f1;
}

/* Privacy policy page wrapper */
.policy {
    background: #fff;
    border-radius: 10px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow-wrap: break-word;
}

.policy table {
    border-collapse: collapse;
}

/* Admin tables */
.count {
    color: #888;
    font-weight: 400;
    font-size: 0.8em;
}

.table-wrap {
    overflow-x: auto;
    margin-bottom: 28px;
}

.admin-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
}

.admin-table th,
.admin-table td {
    border: 1px solid #e0e4e8;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    background: #f0f2f5;
    font-weight: 600;
}

.admin-table tbody tr:nth-child(even),
.admin-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.admin-table .msg {
    white-space: pre-wrap;
    max-width: 420px;
}

.admin-table .nowrap {
    white-space: nowrap;
    color: #666;
}

.empty {
    color: #888;
    font-style: italic;
}

footer {
    color: #888;
    font-size: 13px;
    padding: 30px 20px;
}