/*
 * The forms of the v3 look (GAMERS.ba 2005-2008). The markup comes from templates/common/form/theme.html.twig, or
 * from a hand-written form with the same classes. The panel follows the grey boxes of the 2007 pages (#B2B2B2 heads,
 * #E9E9E9 cells, Verdana 11px, slate #676C7A) and the button follows the slate pills of csbihslike/ (citiraj.gif).
 * A picture button of v1_button() keeps its own face. body[data-skin] names the skin: default or black.
 */
.gf { margin: 6px 0 12px; padding: 0; border: 1px solid #C9C9C9; background: #F4F4F4; color: #676C7A; font: 11px/1.5 Verdana, Tahoma, sans-serif; }
.gf-inline { display: inline; margin: 0; padding: 0; border: 0; background: none; }
.gf .gf-panel-head { margin: 0; padding: 5px 8px; background: #B2B2B2; color: #FFFFFF; font: bold 11px Verdana, Tahoma, sans-serif; letter-spacing: 0.5px; text-transform: uppercase; }
.gf .gf-body { padding: 6px 8px; }
.gf .gf-intro { margin: 0; padding: 6px 8px; border-bottom: 1px solid #E0E0E0; background: #FFFFFF; }
.gf .password-sent-way p { margin: 0 0 6px; }

.gf .gf-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: stretch; border-top: 1px solid #FFFFFF; }
.gf .gf-row:first-child { border-top: 0; }
.gf .gf-label { padding: 6px 8px; background: #E9E9E9; color: #555A66; font-weight: bold; line-height: 1.35; }
.gf .gf-required { margin-left: 2px; border: 0; color: #FF6600; text-decoration: none; cursor: help; }
.gf .gf-field { min-width: 0; padding: 5px 8px; background: #F7F7F7; }
.gf .gf-help { display: block; margin-top: 3px; color: #8A8F9C; font-size: 10px; line-height: 1.4; }

.gf input[type="text"], .gf input[type="password"], .gf input[type="email"], .gf input[type="number"], .gf input[type="url"],
.gf input[type="search"], .gf input[type="date"], .gf input[type="datetime-local"], .gf input[type="tel"], .gf select, .gf textarea {
  box-sizing: border-box; width: 250px; max-width: 100%; padding: 3px 4px; border: 1px solid #A9ADB8;
  background: #FFFFFF linear-gradient(#EFEFEF, #FFFFFF 5px); color: #3A3F4B; font: 11px Verdana, Tahoma, sans-serif; }
.gf select { padding: 2px 3px; background-image: none; }
.gf textarea { width: 100%; min-height: 110px; line-height: 1.45; resize: vertical; }
.gf input[type="file"] { max-width: 100%; font: 10px Verdana, Tahoma, sans-serif; }
.gf .gf-wide, .gf input.gf-wide, .gf select.gf-wide { width: 100%; }
.gf .gf-short, .gf input.gf-short { width: 80px; }
.gf .totp-qr { display: block; max-width: 100%; height: auto; }
.gf input:focus, .gf select:focus, .gf textarea:focus { outline: none; border-color: #FF9900; background: #FFFDF8; box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.2); }

.gf .gf-choices, .gf [data-gf-choices] { display: flex; flex-wrap: wrap; gap: 3px 14px; padding-top: 2px; }
.gf .gf-choice, .gf .gf-check { display: inline-flex; align-items: center; gap: 4px; font-weight: normal; cursor: pointer; }
.gf .gf-choice input, .gf .gf-check input { margin: 0; }

.gf .gf-errors { margin: 3px 0 0; padding: 0; list-style: none; color: #CC0000; font-size: 10px; font-weight: bold; }
.gf .gf-errors li::before { content: "\00BB  "; }
.gf .gf-row--error .gf-label { background: #F3DADA; color: #AA0000; }
.gf .gf-row--error input, .gf .gf-row--error select, .gf .gf-row--error textarea { border-color: #CC0000; background: #FFF6F6; }
.gf-alert, .gf-notice, .gf-saved { margin: 0 0 8px; padding: 5px 8px; list-style: none; font: 11px Verdana, Tahoma, sans-serif; }
.gf > .gf-alert, .gf > .gf-notice, .gf > .gf-saved { margin: 0; border-width: 0 0 1px; }
.gf-alert { border: 1px solid #CC0000; background: #FFF0F0; color: #AA0000; font-weight: bold; }
.gf-notice { border: 1px solid #C9C9C9; background: #FFFFFF; color: #676C7A; }
.gf-saved { border: 1px solid #83BB30; background: #F2F8E6; color: #4F7A12; font-weight: bold; }

.gf .gf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 8px 7px 148px; border-top: 1px solid #FFFFFF; background: #E9E9E9; }
.gf .gf-actions--left { padding-left: 8px; }
.gf .gf-actions a { font-size: 10px; }

.gf-button, .gf button[type="submit"]:not(.gf-plain), .gf input[type="submit"]:not(.gf-plain) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 17px; margin: 0;
  padding: 0 9px; border: 1px solid #8C909C; border-radius: 8px; background: linear-gradient(#FFFFFF, #E2E4E9 55%, #D2D5DC);
  color: #676C7A; font: bold 9px/15px Tahoma, Verdana, sans-serif; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
a.gf-button { text-decoration: none; }
.gf-button:hover, .gf button[type="submit"]:not(.gf-plain):hover, .gf input[type="submit"]:not(.gf-plain):hover { border-color: #FF9900; color: #3A3F4B; }
.gf-button:active, .gf button[type="submit"]:not(.gf-plain):active { background: linear-gradient(#D2D5DC, #E9EAEE); }
.gf-button:focus-visible, .gf button[type="submit"]:focus-visible { outline: 2px solid #FF9900; outline-offset: 1px; }
.gf-button[disabled], .gf button[type="submit"][disabled] { opacity: 0.55; cursor: default; }
.gf-button--danger, .gf button.gf-button--danger[type] { color: #B01E1E; }
.gf-button--quiet, .gf button.gf-button--quiet[type] { border-color: #BFC2CA; background: #FFFFFF; font-weight: normal; }
.gf input[type="image"] { padding: 0; border: 0; background: none; box-shadow: none; vertical-align: middle; }

.gf fieldset { margin: 0; padding: 0; border: 0; border-top: 1px solid #FFFFFF; }
.gf legend { display: block; width: 100%; box-sizing: border-box; padding: 3px 8px; background: #CFCFCF; color: #FFFFFF; font-weight: bold; text-transform: uppercase; }

@media (max-width: 640px) {
  .gf .gf-row { grid-template-columns: minmax(0, 1fr); }
  .gf .gf-label { padding-bottom: 2px; }
  .gf .gf-actions { padding-left: 8px; }
  .gf input[type="text"], .gf input[type="password"], .gf input[type="email"], .gf select { width: 100%; }
}

/* Black: white text on dark fields, as 3.css; the panel takes the dark grey of the black home headings. */
body[data-skin="black"] .gf { border-color: #3A3A3A; background: #101010; color: #C0C0C0; }
body[data-skin="black"] .gf .gf-panel-head, body[data-skin="black"] .gf legend { background: #2B2B2B; color: #FFB019; }
body[data-skin="black"] .gf .gf-label, body[data-skin="black"] .gf .gf-actions { background: #1D1D1D; color: #D8D8D8; }
body[data-skin="black"] .gf .gf-field { background: #141414; }
body[data-skin="black"] .gf .gf-row, body[data-skin="black"] .gf .gf-actions, body[data-skin="black"] .gf fieldset { border-color: #080808; }
body[data-skin="black"] .gf .gf-help, body[data-skin="black"] .gf .gf-intro { color: #8F8F8F; }
body[data-skin="black"] .gf .gf-intro { border-color: #2A2A2A; background: #141414; }
body[data-skin="black"] .gf input[type="text"], body[data-skin="black"] .gf input[type="password"], body[data-skin="black"] .gf input[type="email"],
body[data-skin="black"] .gf input[type="number"], body[data-skin="black"] .gf input[type="url"], body[data-skin="black"] .gf input[type="search"],
body[data-skin="black"] .gf input[type="date"], body[data-skin="black"] .gf input[type="datetime-local"], body[data-skin="black"] .gf select, body[data-skin="black"] .gf textarea {
  border: 1px solid #3A3A3A; background: linear-gradient(#1A1A1A, #000000 6px); color: #FFFFFF; }
body[data-skin="black"] .gf input:focus, body[data-skin="black"] .gf select:focus, body[data-skin="black"] .gf textarea:focus { border-color: #FFB019; box-shadow: 0 0 0 2px rgba(255, 176, 25, 0.2); }
body[data-skin="black"] .gf-button, body[data-skin="black"] .gf button[type="submit"]:not(.gf-plain) { border-color: #4A4A4A; background: linear-gradient(#3C3C3C, #1D1D1D); color: #FFFFFF; }
body[data-skin="black"] .gf-button:hover, body[data-skin="black"] .gf button[type="submit"]:not(.gf-plain):hover { border-color: #FFB019; color: #FFB019; }
body[data-skin="black"] .gf-button--quiet, body[data-skin="black"] .gf button.gf-button--quiet[type] { border-color: #444444; background: #2B2B2B; color: #DDDDDD; }
body[data-skin="black"] .gf-button--quiet:hover, body[data-skin="black"] .gf button.gf-button--quiet[type]:hover { border-color: #FFB019; color: #FFB019; }
body[data-skin="black"] .gf-alert { border-color: #7A1A1A; background: #2A0E0E; color: #FF6B6B; }
body[data-skin="black"] .gf-notice { border-color: #3A3A3A; background: #141414; color: #C0C0C0; }
body[data-skin="black"] .gf-saved { border-color: #4E6313; background: #16200A; color: #9ED04A; }
body[data-skin="black"] .gf .gf-errors, body[data-skin="black"] .gf .gf-row--error .gf-label { color: #FF6B6B; }
body[data-skin="black"] .gf .gf-row--error .gf-label { background: #2A0E0E; }

/* content: news, reviews, pictures, galleries, games, downloads, shop, premium. */
.gallery-actions, .potd-actions, .game-actions, .download-actions { padding: 4px 2px; }
.game-rate .gf-button { min-width: 0; padding: 0 6px; }

/* forum, posting: the BBCode bar of _editor and the poll options of a new topic. */
.gf .editor { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 3px 8px; padding: 3px 4px; border: 1px solid #A9ADB8; border-bottom: 0; background: #E9E9E9; }
.gf .editor-tags, .gf .editor-smileys { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.gf .editor-label { margin-right: 3px; font-weight: bold; }
.gf .editor .gf-button { min-width: 26px; padding: 0 6px; text-transform: none; }
.gf .editor-smileys button { padding: 1px; border: 1px solid transparent; background: none; cursor: pointer; }
.gf .editor-smileys button:hover { border-color: #FF9900; }
.gf .editor-smileys img { display: block; }
.gf .post-poll-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 6px; }
.gf .post-poll-options input { width: 100%; }
body[data-skin="blue"] .gf .editor { border-color: #9FB7D6; background: #DCE8F6; }
body[data-skin="black"] .gf .editor { border-color: #3A3A3A; background: #1D1D1D; }
/* A posting form in a narrow column (the guestbook of a profile) puts each label above its field. */
.gf.post-form { container-type: inline-size; }
@container (max-width: 480px) { .gf .gf-row { grid-template-columns: minmax(0, 1fr); } .gf .gf-label { padding-bottom: 2px; } .gf .gf-actions { padding-left: 8px; } }

/* forum, topic: the poll card and the bars of one-button forms (moderation, marks, game link). */
.gf .anketa-opcije { flex-direction: column; }
.mod-bar, .mark-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.mod-bar input[type="text"] { box-sizing: border-box; width: 130px; height: 17px; padding: 0 4px; border: 1px solid #8C909C; background: #FFFFFF; color: #3A3F4B; font: 10px Verdana, Tahoma, sans-serif; }
.mod-bar input[type="text"]:focus { outline: none; border-color: #FF9900; }
.gf-inline input[type="image"] { vertical-align: middle; }
.game-link-message { flex-basis: 100%; }
/* topic: the poll in the shape of 2009 (#anketaglasaj, .anketarez) with the bars of csbihslike/; the reader's option in bold. */
.anketa { margin: 5px 0; padding: 5px; border: 1px solid #E0E0E0; background: #F6F6F6; font: 11px Verdana, Tahoma, sans-serif; }
.anketa .anketa-opcija { margin: 2px 0; }
.anketa .anketa-opcija img { vertical-align: middle; }
.anketa .anketa-opcija--moja { font-weight: bold; }
.anketa button { margin-top: 4px; font: bold 10px Verdana, Tahoma, sans-serif; cursor: pointer; }
.anketa .gf-help { color: #888; }
body[data-skin="black"] .anketa { border-color: #2A2A2A; background: #141414; color: #CCCCCC; }
/* topic: the thumbs of a post, a picture each (palac_gore, palac_dolje) and its count; the thumb of the reader has a ring. */
.post-thumbs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; margin: 6px 0 0; font: bold 10px Verdana, Tahoma, sans-serif; }
.post-thumbs .thumb-count { margin-left: 2px; vertical-align: middle; }
.post-thumbs input.thumb--mine { outline: 1px solid #FF6600; outline-offset: 1px; border-radius: 3px; }
.post-thumb-names { margin: 3px 0 0; text-align: left; color: #8A8A8A; font: 10px Verdana, Tahoma, sans-serif; }
.post-thumb-names .thumb-names { margin: 1px 0; }
/* topic: the tomato of a post (paradajz), the pill next to the thumbs, and who threw it. */
.tomato-box { margin: 0; font: bold 10px Verdana, Tahoma, sans-serif; }
.tomato-box .tomato-form, .tomato-box .tomato-static { display: inline-flex; align-items: center; gap: 2px; }
.tomato-box .tomato-count { vertical-align: middle; }
.tomato-names { margin: 3px 0 0; color: #8A8A8A; font: 10px Verdana, Tahoma, sans-serif; }
/* profile: who stood the member a beer today (pivo). */
.pivo-lista { margin: 4px 0 0; color: #676C7A; font: 11px Verdana, Tahoma, sans-serif; }
body[data-skin="black"] .pivo-lista { color: #CCCCCC; }
/* The foot of a post: the thumbs (with the names of who gave them) and the tomato on the left, the marks on the right
   of one line; the mark notes go above it. */
.post-foot:not(:has(*)) { display: none; }
.post-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 14px; }
.post-foot > .thumbs-box:not(:has(*)), .post-foot > .tomato-box:not(:has(*)) { display: none; }
.post-foot > .thumbs-box .post-thumbs { margin: 0; justify-content: flex-start; }
.post-body .post-foot > .mark-bar { margin: 0 0 0 auto; }
.post-foot > :not(.thumbs-box):not(.tomato-box):not(.mark-bar) { flex-basis: 100%; order: -1; }
/* the report of a post, a comment or a profile: a details element whose summary is a small link. */
.post-report { margin: 4px 0 0; text-align: right; }
details.report > summary { display: inline; list-style: none; cursor: pointer; font: 10px Verdana, Tahoma, sans-serif; }
details.report > summary::-webkit-details-marker { display: none; }
details.report > summary:hover { color: #FF9900; }
details.report[open] > summary { font-weight: bold; }
details.report .gf { max-width: 320px; margin: 5px 0 0 auto; text-align: left; }
#prijava details.report .gf { margin-left: 0; }
/* forum editor: the @ menu of assets/site/mentions.js, under the textarea. */
.gf-row--editor .gf-field { position: relative; }
.mention-menu { position: absolute; z-index: 20; min-width: 200px; max-width: 320px; margin: 2px 0 0; padding: 2px 0; list-style: none; border: 1px solid #8C909C; background: #FFFFFF; font: 11px Verdana, Tahoma, sans-serif; }
.mention-menu li { display: flex; align-items: center; gap: 5px; padding: 2px 6px; color: #3A3F4B; cursor: pointer; }
.mention-menu li small { color: #8C909C; }
.mention-menu li.mention-active { background: #E9E9E9; color: #000000; }
body[data-skin="black"] .mention-menu { border-color: #4A4A4A; background: #000000; }
body[data-skin="black"] .mention-menu li { color: #E9E9E9; }
body[data-skin="black"] .mention-menu li.mention-active { background: #333333; color: #FFB019; }
body[data-skin="black"] .mod-bar input[type="text"] { border-color: #4A4A4A; background: #000000; color: #FFFFFF; }

/* profile: gf-link is a POST action drawn as the archived link next to plain links (the social actions, the block, the
 * staff pills). body[data-skin] outranks the button rules of 2-live.css and 3-live.css. gf--stacked puts the label
 * above the field, for a panel in a narrow profile column. */
body[data-skin] button.gf-link { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
body[data-skin] button.gf-link:hover { border: 0; background: none; color: #FF9900; }
body[data-skin] button.gf-link:focus-visible { outline: 1px dotted #FF9900; outline-offset: 1px; }
.gf.gf--stacked .gf-row { grid-template-columns: minmax(0, 1fr); }
.gf.gf--stacked .gf-label { padding: 4px 8px 3px; }
.gf.gf--stacked .gf-actions { padding-left: 8px; }
/* friend requests: one answer on each line of the card. */
.friend-request form.gf-inline { display: block; margin: 4px 0 0; }
/* esports: gf--bar is a filter bar. Its rows stand side by side and the button ends the line. */
.gf.gf--bar { display: flex; flex-wrap: wrap; align-items: stretch; }
.gf.gf--bar .gf-panel-head { flex-basis: 100%; }
.gf.gf--bar .gf-row { display: flex; flex-direction: column; border-top: 0; border-right: 1px solid #FFFFFF; }
.gf.gf--bar .gf-label { padding: 3px 8px; }
.gf.gf--bar .gf-field { flex: 1; }
.gf.gf--bar input[type="text"], .gf.gf--bar input[type="search"], .gf.gf--bar select { width: auto; min-width: 110px; }
.gf.gf--bar .gf-actions { flex: 1; align-items: flex-end; padding: 5px 8px; border-top: 0; }
body[data-skin="black"] .gf.gf--bar .gf-row { border-color: #080808; }

/* clans and matches: the time field of the challenge form, and a link button in an action row. */
.gf input[type="time"] { box-sizing: border-box; width: 80px; padding: 2px 4px; border: 1px solid #A9ADB8; background: #FFFFFF; color: #3A3F4B; font: 11px Verdana, Tahoma, sans-serif; }
.gf .gf-actions a.gf-button { font-size: 9px; }
body[data-skin="black"] .gf input[type="time"] { border-color: #3A3A3A; background: #000000; color: #FFFFFF; }
.gf .clan-forum-new { margin-left: auto; }
.gf .clan-applicants { margin: 0; list-style: none; }
.clan-membership { margin: 0 0 6px; }

/* The share panel above a topic its author has just opened (templates/v4/_topic_share.html.twig): white and quiet,
 * each network named with its logo. --brand is the network color, set on the link. */
.topic-share { position: relative; margin: 0 0 10px; padding: 7px 28px 8px 10px; border: 1px solid #E4E4E4; background: #FFFFFF; color: #777; font: 11px/1.4 Verdana, Tahoma, sans-serif; }
.topic-share [hidden] { display: none !important; }
.topic-share .topic-share-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.topic-share .topic-share-link { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 3px 9px 3px 6px; border: 1px solid #DDDDDD; border-radius: 3px; background: #FFFFFF; color: #444; font: bold 11px Verdana, Tahoma, sans-serif; text-decoration: none; cursor: pointer; }
.topic-share .topic-share-link:hover, .topic-share .topic-share-link:focus-visible { border-color: var(--brand, #999999); color: #222; }
.topic-share .share-logo { flex: none; }
.topic-share .topic-share-close { position: absolute; top: 3px; right: 5px; padding: 0 4px; border: 0; background: none; color: #AAAAAA; font: 16px/1 Arial, sans-serif; cursor: pointer; }
.topic-share .topic-share-close:hover { color: #444; }
body[data-skin="black"] .topic-share, body[data-skin="blue"] .topic-share { border-color: #333333; background: #111111; color: #AAAAAA; }
body[data-skin="black"] .topic-share .topic-share-link, body[data-skin="blue"] .topic-share .topic-share-link { border-color: #3A3A3A; background: #1A1A1A; color: #DDDDDD; }
/* The hidden replies of a topic, for the staff (templates/v*/_deleted_replies.html.twig). */
details.deleted-replies > summary { cursor: pointer; }
.deleted-reply { padding: 6px 0; border-top: 1px dashed #B2B2B2; }
.deleted-reply:first-child { border-top: 0; }
.deleted-reply .mod-reply-restore { float: right; margin-left: 8px; }
.deleted-reply-body { margin-top: 4px; opacity: .6; }
/* The uploads of a post, for the staff (templates/v*/_post_uploads.html.twig). */
details.post-uploads { margin: 4px 0 0; text-align: right; font-size: 11px; }
details.post-uploads > summary { cursor: pointer; list-style: none; }
details.post-uploads ul { margin: 4px 0 0; padding: 0; list-style: none; }
/* a video of a post ([video]): its still with a play mark, 480 px wide at most; assets/site/video.js opens the player. */
.post-video { display: inline-block; position: relative; max-width: 480px; width: 100%; margin: 4px 0; border: 1px solid #999999; background: #000000; vertical-align: top; }
.post-video-open { display: block; min-height: 120px; text-decoration: none; }
.post-video-poster { display: block; width: 100%; height: auto; border: 0; }
.post-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 4px 10px; border: 1px solid #FFFFFF; background: rgba(0, 0, 0, .7); color: #FFFFFF; font: bold 11px Verdana, Tahoma, sans-serif; white-space: nowrap; }
.post-video-play::before { content: "\25B6\00A0"; color: #FF6600; }
.post-video-open:hover .post-video-play { background: #FF6600; }
.post-video--bare .post-video-open { height: 180px; }
/* a YouTube link of the Youtube item: a small bar that opens the viewer. */
.youtube a { display: inline-block; margin: 4px 0; padding: 3px 8px; border: 1px solid #999999; background: #F2F2F2; color: #333333; font: bold 10px Verdana, Tahoma, sans-serif; text-decoration: none; }
.youtube a::before { content: "\25B6\00A0"; color: #CC0000; }
body[data-skin="black"] .youtube a { border-color: #444444; background: #1A1A1A; color: #CCCCCC; }
/* The two hours of the quiet hours (Notifikacije) stand on one line. */
.gf .gf-row--quiet select { width: auto; min-width: 0; }