/* Thunder colors on prosilver's layout, type, spacing and rounded panels. */
:root {
    color-scheme: dark;
    --th-bg: #101820;
    --th-panel: #202e3b;
    --th-panel-alt: #253645;
    --th-line: #415b70;
    --th-blue: #8fc7e8;
    --th-green: #7dda44;
    --th-text: #e3eaf0;
    --th-muted: #b0c2cf;
}
html, body { background-color: var(--th-bg); color: var(--th-text); }
.wrap { background-color: #18232d; border-color: #364c5d; }
.headerbar {
    color: var(--th-text);
    background: linear-gradient(to bottom, #537895 0, #2c4a63 2px, #233b50 100%);
}
.headerbar, .navbar, .forabg, .forumbg, .panel, .post { border-radius: 7px; }
.site_logo { background-image: url('logo.png'); background-size: contain; width: 66px; height: 66px; }
.logo { padding: 10px 13px; }
.site-description h1 { margin-top: 17px; }
.navbar, .bg3 { background-color: #2a3d4f; }
.panel, .post.bg1, .bg1 { background-color: var(--th-panel); color: var(--th-text); }
.post.bg2, .bg2 { background-color: var(--th-panel-alt); }
.forabg, .forumbg {
    background: linear-gradient(to bottom, #7899ae 0, #426c88 2px, #294a62 100%);
    padding: 5px;
}
ul.topiclist li.row { background-color: var(--th-panel); border-top-color: #344c5e; border-bottom-color: #172631; }
ul.topiclist li.row:nth-child(even) { background-color: var(--th-panel-alt); }
li.row:hover { background-color: #30475a !important; }
ul.topiclist dd { border-left-color: #41596a; }
ul.topiclist dt, ul.topiclist dd, ul.topiclist li, .content, .content h2,
h1, h2, h3, p, label, .postprofile, .postprofile strong { color: var(--th-text); }
h3, .panel h2, .content h2, .postprofile { border-color: var(--th-line); }
.forabg .header a, .forumbg .header a, li.header dt, li.header dd { color: #fff; }
a, a:visited, a.forumtitle, a.topictitle { color: var(--th-blue); }
a:hover, a.forumtitle:hover, a.topictitle:hover { color: var(--th-green); }
.button, input.button1, input.button2 {
    background: linear-gradient(to bottom, #465e71, #293e50);
    border-color: #60798b;
    color: var(--th-text);
    text-shadow: none;
    box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.button:hover, .button:focus, input.button1:hover, input.button1:focus, input.button2:hover, input.button2:focus { background: linear-gradient(to bottom, #536e83, #344e62); border-color: var(--th-blue); color: #fff; text-shadow: none; }
.thunder-primary { border-color: #7aaa58; color: #dcf5cb !important; }
input.inputbox, textarea.inputbox, .inputbox, select, .thunder-form input:not([type=checkbox]), .thunder-form textarea {
    background-color: #14212b;
    color: var(--th-text);
    border-color: #587084;
}
input::placeholder, textarea::placeholder { color: var(--th-muted); opacity: 1; }
.inputbox:hover, .inputbox:focus { border-color: var(--th-blue); }
.dropdown .dropdown-contents, .dropdown-extended .header, .dropdown-extended .footer,
.dropdown-extended ul li, .cp-main .panel, .panel-container .panel { background: var(--th-panel); color: var(--th-text); border-color: var(--th-line); }
blockquote, .codebox { background-color: #172630; border-color: var(--th-line); color: var(--th-text); }
.copyright, .copyright a, .thunder-muted { color: var(--th-muted); }

/* Extension pages use the same density and panel conventions as the board. */
.thunder-support { font-size: 12px; }
.thunder-nav { display: flex; flex-wrap: wrap; gap: 18px; margin: 8px 0 12px; }
.thunder-nav a { padding: 3px 0; }
.thunder-support h1 { font-size: 2em; margin: 12px 0; overflow-wrap: anywhere; }
.thunder-support .panel h2 { color: var(--th-text); }
.thunder-welcome { margin-bottom: 12px; }
.thunder-welcome h1 { margin: 5px 0 8px; }
.thunder-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.thunder-actions .button { white-space: normal; }
.thunder-support .forabg { margin-bottom: 12px; }
.thunder-home-forums .list-inner { padding-top: 8px; padding-bottom: 8px; }
.thunder-home-forums dd.lastpost { padding-top: 12px; }
.thunder-home-forums .forumtitle { font-size: 1.2em; }
.thunder-home-forums .forum-icon { color: var(--th-muted); font-size: 24px; float: left; margin: 9px 13px 0 0; }
.thunder-home-forums dt .list-inner { margin-left: 0; padding-left: 8px; }
.thunder-support .topiclist:not(.thunder-home-forums) dt { width: 100%; }
.thunder-kicker { color: var(--th-muted); font-weight: bold; font-size: 11px; }
.thunder-form { margin-top: 12px; }
.thunder-form form { display: grid; gap: 12px; max-width: 780px; padding: 6px 0; }
.thunder-form label { display: grid; gap: 5px; }
.thunder-form input:not([type=checkbox]), .thunder-form textarea, .thunder-form select, .thunder-filter select {
    box-sizing: border-box; width: 100%; border: 1px solid #587084; border-radius: 3px; padding: 7px; font: inherit;
}
.thunder-form input[type=checkbox] { justify-self: start; }
.thunder-form button { justify-self: start; padding: 5px 12px; }
.thunder-filter { display: flex; gap: 10px; align-items: end; margin: 12px 0; }
.thunder-empty { padding: 12px; }
.thunder-status { font-weight: bold; color: var(--th-green); }
.thunder-message { background-color: var(--th-panel); padding: 10px; margin: 8px 0; }
.thunder-message:nth-of-type(even) { background-color: var(--th-panel-alt); }
.thunder-note { border-left: 3px solid var(--th-green); }
.thunder-message .inner { overflow-wrap: anywhere; }
.thunder-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0; }
.thunder-screenshot { width: auto; height: auto; max-width: min(100%,480px); max-height: 340px; object-fit: contain; border: 1px solid var(--th-line); border-radius: 4px; }
.thunder-support pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 400px; overflow: auto; }
.thunder-support :focus-visible { outline: 2px solid var(--th-green); outline-offset: 3px; }
@media (max-width: 700px) {
    .wrap { border-radius: 8px; }
    .headerbar, .navbar, .forabg, .forumbg, .panel, .post { border-radius: 7px; }
    .headerbar #logo { display: block; }
    .site_logo { width: 46px; height: 46px; }
    .site-description { display: block; width: auto; }
    .site-description h1 { margin: 12px 0; font-size: 1.8em; }
    .thunder-filter { align-items: stretch; flex-direction: column; }
    .thunder-actions .button { padding: 8px 10px; }
    .thunder-form button { min-height: 40px; }
    .thunder-home-forums dt { width: 100%; }
    .thunder-home-forums dd.lastpost { display: none; }
}