/* ZLO responsive improvements. Keep prosilver's templates and behaviour intact. */
html { height: auto; }
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    padding: 0;
    -webkit-text-size-adjust: 100%;
}
.wrap, #wrap.wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: clamp(8px, 1.25vw, 24px);
    border: 0;
    border-radius: 0;
}
h1, h2, h3, h4, a.forumtitle, a.topictitle { font-family: inherit; }
h1 { font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.3; }
h2 { font-size: 1.5rem; line-height: 1.35; }
p { line-height: 1.6; }
.headerbar {
    padding: 18px;
    margin-bottom: 12px;
}
.headerbar > .inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}
.site-description { float: none; width: auto; flex: 1 1 460px; min-width: 0; }
.site-description h1 { margin-top: 6px; }
.site-description p { margin-bottom: 0; font-size: 0.875rem; }
.logo { padding: 0 16px 0 0; }
.search-header { float: none; margin: 0; }
.search-box form, .search-box fieldset { width: 100%; min-width: 0; }
.search-box fieldset { display: flex; align-items: stretch; }
.search-box fieldset .inputbox { flex: 1 1 auto; }
.search-box fieldset .button { flex: 0 0 40px; }
.navbar { padding: 4px 10px; }
.navbar .linklist > li > a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 44px;
    padding: 4px 3px;
}
.navbar .linklist > li > a .icon { flex-shrink: 0; }
.navbar .header-avatar { display: inline-flex; align-items: center; min-height: 44px; }
.page-body { margin: 16px 0; }
.forabg, .forumbg { margin-bottom: 18px; padding: 6px; }
ul.topiclist { font-size: 1rem; }
ul.topiclist li.header { padding: 9px 6px; }
ul.topiclist li.header dt { font-weight: 700; }
ul.topiclist li.header dd { font-size: 0.75rem; }
ul.topiclist li.row dl { padding-top: 12px; padding-bottom: 12px; }
ul.topiclist li.row dt { line-height: 1.5; }
a.forumtitle, a.topictitle { font-size: 1.0625rem; line-height: 1.5; }
ul.topiclist dd.lastpost { font-size: 0.8125rem; line-height: 1.5; }
.row-item { background-position: 10px 24px; }
.row-item dt .list-inner { padding-right: 16px; }
.content { font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.post { padding: 18px; margin-bottom: 16px; }
.postbody .content { font-size: 1rem; line-height: 1.7; }
.postprofile { font-size: 0.875rem; }
.content img, .postimage { max-width: 100%; height: auto; }
.codebox code { overflow-x: auto; }
.panel { padding: 18px; margin-bottom: 16px; }
.stat-block { margin-top: 24px; }
.stat-block h3 { padding-bottom: 8px; margin-bottom: 8px; }
.stat-block p { font-size: 0.875rem; }
fieldset { min-width: 0; font-family: inherit; }
.inputbox, select, textarea {
    box-sizing: border-box;
    max-width: 100%;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 5px;
}
.inputbox:not(textarea), select { min-height: 44px; padding: 9px 11px; }
textarea.inputbox { padding: 12px; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; vertical-align: middle; }
.button, input.button1, input.button2, input.button3, a.button1, a.button2 {
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 22px;
    border-radius: 5px;
}
.button-icon-only { min-width: 44px; padding: 10px; }
.search-box .inputbox { height: 44px; min-width: 0; padding: 9px 10px; font-size: 1rem; }
.search-box .button { height: 44px; min-width: 40px; padding: 10px; }
.search-box .inputbox, .search-box .button { border-radius: 0; }
.search-box .inputbox { border-radius: 5px 0 0 5px; }
.search-box .button:last-child { border-radius: 0 5px 5px 0; }
.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0; }
.action-bar > .pagination { float: none; margin-left: auto; }
.action-bar .search-box { display: flex; float: none; margin: 0; }
.action-bar .search-box .inputbox { width: 180px; }
.pagination li a, .pagination li span { min-width: 30px; min-height: 30px; padding: 6px; line-height: 30px; }
.pagination li.page-jump a { min-height: 30px; }
.navbar .dropdown-container > .dropdown,
.dropdown-button-control:not(.dropdown-up) > .dropdown { top: 100%; }
.dropdown-button-control.dropdown-up > .dropdown { top: auto; bottom: 100%; }
.dropdown .dropdown-contents { max-width: calc(100vw - 40px); box-sizing: border-box; }
.dropdown-contents > li > a { padding-top: 10px; padding-bottom: 10px; }
.quick-login { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 18px; margin-top: 14px; }
.quick-login label { float: none; margin: 0; }
.quick-login label[for="username"], .quick-login label[for="password"] { flex: 1 1 200px; max-width: 300px; }
.quick-login label > span { display: block; margin-bottom: 5px; }
fieldset.quick-login input.inputbox { width: 100%; margin: 0; }
fieldset.quick-login input[type="checkbox"] { width: 18px; flex-shrink: 0; }
.quick-login > a, .quick-login label[for="autologin"] { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.quick-login > .responsive-hide { display: none; }
form#login .inputbox { width: 100% !important; max-width: 360px; }
#login fieldset dd { padding-top: 5px; padding-bottom: 5px; }
#login label[for="autologin"], #login label[for="viewonline"] { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; }
#message-box, #message-box textarea { box-sizing: border-box; max-width: 100%; }
#message-box textarea { font-family: inherit; font-size: 1rem; line-height: 1.7; }
fieldset.submit-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#format-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
#format-buttons .button2 { min-width: 40px; }
.copyright { font-size: 0.75rem; line-height: 1.7; padding: 18px 0 6px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #0079b5;
    outline-offset: 3px;
}
@media (max-width: 900px) {
    .headerbar > .inner { align-items: flex-start; }
    .site-description { flex-basis: 100%; }
    .action-bar .search-box { flex: 1 1 210px; max-width: 380px; }
    .action-bar .search-box .inputbox { flex: 1 1 auto; width: 100%; }
    .action-bar .search-box .button { flex: 0 0 44px; }
}
@media (max-width: 700px) {
    body { padding: 0; }
    .wrap, #wrap.wrap { width: 100%; margin: 0; padding: 12px; border: 0; border-radius: 0; }
    .headerbar, .navbar, .forabg, .forumbg, .post, .panel { margin-left: 0; margin-right: 0; border-radius: 8px; }
    .headerbar { padding: 20px 14px; margin-bottom: 10px; }
    .headerbar + .navbar { margin-top: 0; }
    .site-description { text-align: left; }
    .site-description h1 { margin: 0; font-size: 1.25rem; line-height: 1.4; overflow: visible; }
    .site-description p:not(.skiplink) { display: block; margin: 6px 0 0; font-size: 0.8125rem; }
    .navbar { padding: 3px 8px; }
    .navbar .linklist { font-size: 0.8125rem; }
    .navbar .linklist > li { margin-right: 5px; }
    .navbar .linklist > li > a { min-width: 44px; justify-content: center; padding-left: 2px; padding-right: 2px; }
    .page-body { margin-top: 12px; }
    .forabg, .forumbg { padding: 5px; margin-bottom: 16px; }
    ul.topiclist li.header dt { text-align: left; font-size: 1rem; line-height: 1.4; }
    ul.topiclist li.row dl { padding-top: 10px; padding-bottom: 12px; }
    ul.topiclist.forums dt, ul.topiclist.forums dt .list-inner { margin-right: 0; }
    .row-item { background-position: 8px 21px; }
    .row-item dt .list-inner { padding-left: 44px; padding-right: 8px; }
    ul.topiclist li.row dt { font-size: 0.9375rem; }
    a.forumtitle, a.topictitle { display: inline-block; font-size: 1.0625rem; padding: 5px 0; }
    .forum-description { font-size: 0.9375rem; }
    .content, .postbody .content { font-size: 1rem; line-height: 1.7; }
    .post, .panel { padding: 14px; }
    .postprofile { float: none; width: auto; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid #b7cbd8; }
    .postbody { float: none; width: 100%; min-width: 0; }
    .action-bar > .pagination { margin-left: 0; width: 100%; text-align: left; }
    .quick-login { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .quick-login label[for="username"], .quick-login label[for="password"] { max-width: none; }
    fieldset.quick-login label { display: block; width: 100%; padding: 0; }
    fieldset.quick-login input.inputbox { display: block; width: 100%; max-width: none; margin: 5px 0 0; }
    fieldset.quick-login label[for="autologin"] { display: flex; justify-content: flex-start; float: none; text-align: left; }
    fieldset.quick-login .button2 { width: 100% !important; }
    fieldset dt, fieldset.fields1 dt, fieldset.fields2 dt { margin-bottom: 5px; }
    fieldset dd, fieldset.fields1 dd, fieldset.fields2 dd { min-width: 0; }
    form#login .inputbox { max-width: none; }
    form#login input.button1 { width: 100% !important; }
    .jumpbox { float: none; max-width: 100%; }
    .jumpbox .button { max-width: 100%; white-space: normal; }
}
@media (max-width: 380px) {
    .wrap, #wrap.wrap { padding: 8px; }
    .navbar { padding-left: 6px; padding-right: 6px; }
    .navbar .linklist { font-size: 0.75rem; }
    .action-bar .search-box { flex-basis: 100%; }
}