/* What the forum's and the helpdesk's pages share, only where css.css has nothing that fits; dark counterparts at the end as css-dk.css does. Loaded before each app's own sheet */

/* The bar: where you are, then search and the account */
.f-bar {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1ex 3ex; margin:0 0 1ex;}
.f-crumbs {font-weight:bold;}
/* A list, so each separator stands between two links rather than inside one */
.f-crumbs ol {display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none;}
.f-crumbs li, .f-crumbs li a {margin:0; line-height:inherit;}
.f-crumbs li + li::before {content:"\203A"; padding:0 0.8ex; font-weight:normal; color:#888;}
.f-crumbs li[aria-current] {font-weight:normal;}
.f-user {display:flex; flex-wrap:wrap; align-items:center; gap:1ex 2ex; font-size:small;}
.f-user a {white-space:nowrap;}
.f-me {display:inline-flex; align-items:center; gap:0.8ex; font-weight:bold;}
.f-linkbutton {display:inline-flex; align-items:center; font:inherit; padding:0; border:0; background:none; color:#000; text-decoration:underline; cursor:pointer;}
.f-search {display:flex; flex-wrap:wrap; gap:0.5ex;}
.f-search input[type="search"] {width:24ex; padding-top:0.3ex; padding-bottom:0.3ex;}
.f-searchpage {margin:2ex 0 3ex;}
.f-searchpage input[type="search"] {width:40ex; max-width:100%;}

/* Under a heading, and the grey of every meta line ("3 hours ago by Andrew") */
.f-sub {color:#666; margin:-1ex 0 3ex;}
.f-meta, .f-meta a:link, .f-meta a:visited {color:#666;}

/* Buttons: blue (orange is the site's for buying); a page's main action is larger, shaped as the site's download button; each with a line icon before its text */
.f-btn {display:inline-flex; align-items:center; border:0; border-radius:6px; padding:0.2ex 1.5ex 0.4ex; font:inherit; font-size:small; color:#FFF;
	background-color:#00668E; text-decoration:none; cursor:pointer; box-shadow:0 1px 1px rgba(255, 255, 255, 0.6) inset, 0 -1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 1px rgba(0, 0, 0, 0.2);}
a.f-btn:link, a.f-btn:visited {color:#FFF;}
.f-btn:hover, .f-btn:focus-visible {filter:brightness(1.1);}
.f-btn:active {position:relative; top:1px; box-shadow:0 1px 1px rgba(0, 0, 0, 0.4) inset;}
.f-btn:disabled {opacity:0.6; cursor:default; filter:none;}
.f-btn.f-main {border-radius:10px; padding:0.6ex 2.5ex; font-size:medium; font-weight:bold;}
.f-btn .ic.line {width:1em; height:1em; margin-right:0.4em;}

/* Green adds to the thread */
.f-btn.f-green {background-color:#6AA800;}
.f-btn.f-red {background-color:#B00020;}

/* Lists, on .tablecoloured */
/* A header the view centres over its numbers stays centred */
.f-list th:not(.centered) {text-align:left;}
/* Rounded as the posts and forms are; the site's tables keep a gap between cells, so the corner cells round inside the frame */
.f-list {border-radius:6px;}
.f-list tr:first-child > :first-child {border-top-left-radius:4px;}
.f-list tr:first-child > :last-child {border-top-right-radius:4px;}
.f-list tr:last-child > :first-child {border-bottom-left-radius:4px;}
.f-list tr:last-child > :last-child {border-bottom-right-radius:4px;}
.f-list .f-meta {margin-top:0.5ex;}
.f-results p {margin-bottom:0;}

.f-paging {display:flex; flex-wrap:wrap; gap:0.6ex; align-items:center; font-size:small;}
.f-paging a, .f-paging span {min-width:3ex; text-align:center; padding:0.3ex 0.6ex; border:1px solid #BBB; border-radius:4px; text-decoration:none;}
.f-paging span.gap {border-color:transparent;}
.f-paging span.cur {background:#888; border-color:#888; color:#FFF; font-weight:bold;}

/* The round mark beside a name; staff's the company icon */
.f-av {width:44px; height:44px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; font-weight:bold; color:#FFF; overflow:hidden;}
.f-av.staff {background:#FFF url("/img/icon.svg") center/72% no-repeat; border:1px solid #BBB; box-sizing:border-box;}

.f-badge {display:inline-block; font-size:x-small; font-weight:bold; padding:0.2ex 0.8ex; border-radius:4px; vertical-align:middle;}
.f-badge.staff {color:#FFF; background:#6AA800;}
.f-badge.guest {color:#555; background:#E6E6E6;}
.f-badge.closed {color:#FFF; background:#888;}

/* Posts and ticket messages */
.f-post {margin:0 0 3ex; border:1px solid #AAA; border-radius:6px; overflow:hidden;}
.f-head {display:flex; align-items:center; gap:1.5ex; padding:1ex 1.5ex; background:#F6F6F6; border-bottom:1px solid #DDD;}
.f-who {flex:1; min-width:0;}
.f-head .f-meta a {text-decoration:none;}
/* SoftPerfect's replies, which readers look for, under a header in the staff badge's green */
.f-post.staff .f-head {background:#EEF6E4; border-bottom-color:#D2E5BB;}
.f-staffinfo {text-align:right; white-space:nowrap; line-height:1.6;}
/* A country's flag */
.f-staffinfo img, .h-details img {width:16px; height:auto; vertical-align:-2px; border:1px solid #BBB; margin-left:0.4ex;}
.f-body {padding:2ex 2ex 1ex; background:#FFF;}
.f-body p {line-height:1.5;}
/* ## and ### in a post: the site's h2 and h3, under the page's h1, spaced for a post rather than a page */
.f-body h2 {margin:2.5ex 0 1ex;}
.f-body h3 {margin:2ex 0 1ex;}
.f-body > h2:first-child, .f-body > h3:first-child {margin-top:0;}
.f-body blockquote {margin:1.5ex 0; padding:0.5ex 0 0.5ex 2ex; border-left:3px solid #CCC; color:#444;}
.f-body pre.code {padding:1.5ex 2ex; font-size:small; overflow-x:auto; border-radius:4px;}
.f-body img {max-width:100%; height:auto; border:1px solid #DDD; border-radius:4px;}

/* A message's other language under or above it */
.f-translation {margin:2ex 0 1ex; padding:1.5ex 2ex 0.5ex; background:#F4F8FB; border-left:3px solid #00668E; border-radius:0 6px 6px 0;}
.f-label {font-size:x-small; font-weight:bold; text-transform:uppercase; letter-spacing:0.05em; color:#00668E; margin-bottom:0.8ex;}

/* Attachments under a post: thumbnails for pictures, chips for other files */
.f-attach {display:flex; flex-wrap:wrap; gap:1.5ex; margin:2ex 0 1ex; padding-top:1.5ex; border-top:1px dashed #DDD;}
.f-thumb {width:160px; text-decoration:none; overflow-wrap:anywhere;}
/* The whole picture fitted in the box, so a tall dialog or a wide window is not cut; the rest of the box shows its grey */
.f-thumb img {display:block; width:160px; height:100px; object-fit:contain; margin-bottom:0.5ex; background:#EEE;}
/* The name in two lines at most, its whole in the link's title and the opened picture; the size under it */
.f-caption {display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;}
.f-file {display:inline-flex; align-items:center; padding:1ex 1.5ex; border:1px solid #CCC; border-radius:6px; align-self:flex-start; overflow-wrap:anywhere;}

/* A picture in a text opens over the page (pictures.js) */
.f-body img {cursor:zoom-in;}

/* A form that writes to a thread, on .infobox */
.f-form {margin:4ex 0 2ex;}
/* Opening its column beside the tips, level with them */
#centralleft > .f-form:first-child {margin-top:0;}
/* Off-screen rather than hidden, as some scripts skip fields that are hidden */
.f-hp {position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
.f-submit {display:flex; flex-wrap:wrap; align-items:center; gap:2ex; margin-top:2ex;}

/* A picture opened over the page (pictures.js), on a dark ground in either theme */
.f-lightbox {position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0, 0, 0, 0.85);
	cursor:zoom-out; animation:f-fadein 0.25s ease-out;}
.f-lightbox figure {display:flex; flex-direction:column; align-items:center; gap:1ex; max-width:100%; margin:0;}
.f-lightbox img {max-width:100%; max-height:calc(100vh - 32px - 4ex); object-fit:contain; background:#FFF; border-radius:4px;}
.f-lightbox figcaption {display:flex; flex-wrap:wrap; justify-content:center; gap:0.5ex 2ex; font-size:small; color:#EEE; overflow-wrap:anywhere;}
.f-lightbox figcaption a:link, .f-lightbox figcaption a:visited {color:#FFF;}
.f-close {position:absolute; top:10px; right:12px; padding:4px; border:0; background:none; color:#FFF; cursor:pointer;}
.f-close .ic.line {width:28px; height:28px; margin:0;}
.f-noscroll {overflow:hidden;}
.f-body a img {cursor:pointer;}
@media (prefers-reduced-motion: reduce) {
.f-lightbox {animation:none;}
}

/* A note above a form, on .colouredbox */
.f-note {margin:0 0 1.5ex; padding:1ex 1.5ex; font-size:small; border-radius:6px;}
.f-note .f-label {display:inline; margin-right:1ex;}

/* Every infobox on these pages is the app's (the site chrome has none): its header left, its corners rounded */
.infoboxheader {text-align:left; border-radius:6px 6px 0 0;}
.infoboxcontent {border-radius:0 0 6px 6px;}
/* A panel with nothing to head it: its content bordered all round */
.f-panel > .infoboxcontent:first-child {border-top-width:1px; border-radius:6px;}
/* Sign-in and account panels, on .infobox as the forms: the site's yellow .colouredbox is kept for notices that ask to be read */
.f-panel {max-width:62ex;}

/* Icons: Untitled UI line icons inline in the text colour */
.ic {display:inline-block; flex:none; vertical-align:-0.2em; margin-right:0.45em;}
.ic.line {width:1.15em; height:1.15em;}

@media screen and (max-width: 767px) {
.f-head {flex-wrap:wrap;}
.f-staffinfo {text-align:left; width:100%;}
.f-search input[type="search"] {width:18ex;}
.f-thumb, .f-thumb img {width:130px;}
/* Columns are hidden here, so the last one still shown carries the right-hand corners */
.f-list tr:first-child > :nth-last-child(1 of :not(.smallscreenhide)) {border-top-right-radius:4px;}
.f-list tr:last-child > :nth-last-child(1 of :not(.smallscreenhide)) {border-bottom-right-radius:4px;}
}

@media screen and (prefers-color-scheme: dark) {
.f-crumbs li + li::before {color:#999;}
.f-sub, .f-meta, .f-meta a:link, .f-meta a:visited {color:#AAA;}
.f-paging a, .f-paging span {border-color:#515151;}
.f-paging span.cur {background:#515151; border-color:#515151;}
.f-av.staff {background-color:#333; border-color:#515151;}
.f-badge.guest {color:#DDD; background:#444;}
.f-badge.closed {background:#666;}
.f-post {border-color:#515151;}
.f-head {background:#333; border-bottom-color:#3A3A3A;}
.f-post.staff .f-head {background:#2C3524; border-bottom-color:#3C4A2F;}
.f-staffinfo img, .h-details img {border-color:#666;}
.f-body {background:#222;}
.f-body blockquote {border-left-color:#555; color:#C8C8C8;}
.f-body img {border-color:#515151;}
.f-translation {background:#1E2A33; border-left-color:#00A8CC;}
.f-label {color:#5CC6E0;}
.f-attach {border-top-color:#3A3A3A;}
.f-thumb img {background:#333;}
.f-file {border-color:#515151;}
.f-results mark {background:#6B5D1E; color:#FFF;}
.f-linkbutton {color:#F7F7F7;}
.f-btn {background-color:#0092B2;}
.f-btn.f-red {background-color:#C8243F;}
}