html,body { padding:0; margin:0; font-family:sans-serif; font-size:16px; color:#555; }
body { padding-top:5rem; }
a,a:link,a:visited { text-decoration:none; color:#359; }
a:hover { text-decoration:underline; color:#35c; }
header {
    display:flex;
    flex-direction:row;
    font-size:1.1rem;
    border-bottom:2px solid #eee;
    position:fixed;
    left:0;
    top:0;
    right:0;
    padding:.2rem;
    background:#fff;
    box-shadow:0 1rem 1rem #fff;
}
nav { display:flex; flex-direction:row; }
nav > * {
    display:block;
    padding:.6rem 2rem;
}
nav a:link,nav a:visited { color:#777; }
nav > * { color:#777; background:#fff; border-radius:.4rem; }
nav > *:hover {
    background:#def;
}
#page { min-height:40rem; }
#logo { padding:.6rem 2rem; font-weight:bold; }
#logo .charging { font-style:italic; color:#777; }
#search { flex:1; }
#account-links {
    padding:.2rem;
}
#account-links .button-link,#account-links .button-link:link,#account-links .button-link:visited {
    display:inline-block;
    padding:.4rem 1rem;
    border:1px solid #9ab;
    border-radius:.3rem;
    font-size:.9rem;
    color:#357;
}
#account-links .button-link:hover { background:#ffa; }
#account-links .button-link.blue,#account-links .button-link.blue:link,#account-links .button-link.blue:visited {
    background: #cde;
    color: #345;
    border: 1px solid #abc;
}
#account-links .button-link.blue:hover { background:#fafcff; }
footer {
    margin-top: 1rem;
    border-top: 1px solid #ddd;
    padding-top: 1rem;
}

h1,h2,h3,h4 {
    margin: 1rem 0;
    font-size: 1.4rem;
    padding: 0;
}
h1 { font-size:2.2rem; }
h4 { font-size:1rem; }
p { line-height:1.4em; }

.content {
    max-width:1100px;
    margin:0 auto;
}
.content img {
    max-width: 100%;
    border-radius: .6rem;
}

.rows,.columns {
    display:flex;
    flex-direction:column;
    gap:1rem;
    justify-content:center;
}
.columns { flex-direction:row; }
.rows > *, .columns > * { flex:1; flex-basis:2rem; }
.spaced { gap:1rem; flex-wrap:wrap; }
.gap-div { height:1rem; }
.no-grow-cols { display:flex; flex-direction:row; gap:.5rem; }

.page-item, .small-page-item {
    padding:1rem;
    border-radius:.6rem;
}
.bordered, .small-page-item { border:1px solid #ddd; }
.small-page-item { max-width:30rem; }

.banded {
    background: #ffd;
    padding: 0 0 2rem 0;
    margin: 1rem 0 0 0;
    border: 2px solid #dda;
    border-width: 2px 0;
}
.banded .page-item { background:#fff; }

.simple-card {
    padding:1rem;
    border:1px solid #ddd;
    border-radius:.6rem;
    background:#f0f9ff;
    box-sizing:border-box;
    max-width:calc(33% - .5rem);
    min-width:20rem;
}
.simple-card h3 { font-size:1rem; margin:0 0 .5rem 0; }
.simple-article {
    padding:1rem;
    border:1px solid #ddd;
    border-radius:.6rem;
    background:#fff;
    box-sizing:border-box;
    max-width:calc(50% - .5rem);
    min-width:30rem;
    display:flex;
    flex-direction:row;
    gap:.5rem;
}
.simple-article h3 { font-size:1rem; margin:1rem 0 .5rem 0; }
.simple-article > img { flex-shrink:0; margin-top:1rem; margin-right:.5rem; width:8rem; border-radius:.4rem; max-height:8rem; }

/* Form styles */
.row { display:flex; flex-direction:row; margin:.2rem; }
.row > * {
    flex:1;
    display:inline-block;
    padding:.5rem;
    box-sizing:border-box;
    border-radius:.4rem;
}
.row > *:first-child { max-width:15rem; text-align:right; font-style:italic; }
.row > *:last-child { max-width:none; text-align:left; font-style:normal; }
.row > textarea { flex:1; }
.row > input, .row > select { background:#eee; color:#555; border:none; }
input[type="submit"],input[type="button"],.row > input[type="submit"],.row > input[type="button"] {
    background:#cfd;
    cursor:pointer;
    border:1px solid #9ca;
    color:#375;
    text-align:center;
}

/* Notices */
.notice {
    padding: 1rem;
    margin: .2rem 0;
    background: #ff7;
    font-size: small;
    border-radius: .4rem;
    text-align: center;
}
.notice.errors { background:#fcc; }
.notice.success { background:#afa; }
.notice.info { text-align:left; background:#eee; margin:1rem; }

/* Cookie notice */
#cookie-notice {
    position:fixed;
    right:1rem;
    top:5rem;
    z-index:3;
    background:#eee;
    border-radius:.4rem;
    padding:1rem 2rem;
    box-shadow:0 0 1rem #000;
    font-size:small;
    font-style:italic;
    display:block;
}
#cookie-notice-close { cursor:pointer; color:#00a; font-weight:bold; }

/* Password strength */
.password-strength {
    background: #ffa;
    padding: .3rem;
    border-radius: .4rem;
    border: 1px solid #888;
}
.password-strength .summary { text-align:center; font-size:small; }
.password-strength .bar { border-radius:.4rem; height:1rem; border:2px solid #555; background:#fff; overflow:hidden; padding:0; margin:.3rem; }
.password-strength .bar .fill { width:0%; height:100%; background:#c00; overflow:hidden; border-radius:.4rem; border:1px solid #fff; box-sizing:border-box; }

/* @media overrides */

@media (max-width: 1000px) {
    html,body,table { font-size:16px; }
    .columns { flex-direction:column; }
    .columns > * { padding:.3rem; }
}

/* Table stylings */
table {
    border-collapse:collapse;
    width:calc(100% - 2rem);
    box-sizing:border-box;
    margin:1rem;
    border:1px solid #fff;
    box-shadow:0 0 1rem #999;
    font-size:90%;
}
td, th {
    padding:.5rem;
    text-align:left;
}
th {
    background: #444;
    color: #fff;
    font-weight:normal;
}
tbody tr { border-bottom:1px solid #ccc; }
tbody tr:last-child { border-bottom:none; }
tr:nth-child(odd) { background:#eee; }
tr:hover { background:#ffc; }

.connection-icon { display:inline-block; width:1rem; height:1rem; border-radius:50%; background:#a00; }
.online .connection-icon { background:#0a0; box-shadow:0 0 .5rem #0f0; }
tr.online { box-shadow:inset 0 0 .5rem 0 #0f0; background:#dfd; }
tr.online:nth-child(odd) { background:#efc; }

.article-image {
    display:flex;
    margin:1rem 0;
    max-height:20rem;
    justify-content:center;
    overflow:hidden;
}
.article-image img {
    max-height:20rem;
}
.green { color:#0a0; }
.red { color:#a00; }