/*
 * The forms of the v4 look (Reloaded). The markup comes from templates/common/form/theme.html.twig, or from a
 * hand-written form with the same classes. The panel is #sendContainer of style1.css, the rows are .cssform of
 * forms.css, and the button is the green stripe of fajlovi/slike/but_login1.gif, stretched by border-image.
 * body[data-skin] names the skin: default, 2013, black (style2) or blue (style3, a dark skin with a blue accent).
 */
.gf { margin: 10px 0 15px; padding: 10px 14px; background: #F8F9F2; border: 1px solid #E8EBD6; color: #444; font: 12px/1.5 Arial, Helvetica, sans-serif; }
.gf-inline { display: inline; margin: 0; padding: 0; background: none; border: 0; }
.gf .gf-panel-head { margin: -10px -14px 10px; padding: 7px 14px; border-bottom: 1px solid #E8EBD6; background: #EEF1DF; color: #555; font: bold 13px Arial, Helvetica, sans-serif; }
.gf .gf-body { padding: 4px 0; }
/* The guestbook form stands in the white box of the profile, so on the default skin it keeps that white. */
body[data-skin="default"] .gbforma .gf { background: #FFFFFF; }
.gf .gf-intro { margin: 0 0 8px; color: #666; }
.gf .password-sent-way p { margin: 0 0 6px; }

.gf .gf-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 8px 0; border-top: 1px solid #EEF0E2; }
.gf .gf-row:first-child, .gf .gf-panel-head + .gf-row, .gf .gf-alert + .gf-row, .gf .gf-intro + .gf-row { border-top: 0; }
.gf .gf-label { padding-top: 4px; color: #444; font-weight: bold; font-size: 12px; line-height: 1.3; }
.gf .gf-required { margin-left: 2px; border: 0; color: #C54E15; text-decoration: none; cursor: help; }
.gf .gf-field { min-width: 0; }
.gf .gf-help { display: block; margin-top: 3px; color: #777; font-size: 11px; 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: 280px; max-width: 100%; padding: 4px 6px; border: 1px solid #B7D7DF; border-radius: 0;
  background: #FFFFFF; color: #333; font: 12px Arial, Helvetica, sans-serif; }
.gf select { padding: 3px 4px; }
.gf textarea { width: 100%; min-height: 120px; line-height: 1.45; resize: vertical; }
.gf input[type="file"] { max-width: 100%; font: 11px Arial, Helvetica, sans-serif; }
.gf .gf-wide, .gf input.gf-wide, .gf select.gf-wide { width: 100%; }
.gf .gf-short, .gf input.gf-short { width: 90px; }
.gf .totp-qr { display: block; max-width: 100%; height: auto; }
.gf input:focus, .gf select:focus, .gf textarea:focus { outline: none; border-color: #8AAB1B; background-color: #FBFDF6; box-shadow: 0 0 0 2px rgba(138, 171, 27, 0.18); }

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

.gf .gf-errors { margin: 4px 0 0; padding: 0; list-style: none; color: #C54E15; font-size: 11px; font-weight: bold; }
.gf .gf-errors li::before { content: "\25B2  "; font-size: 8px; vertical-align: 1px; }
.gf .gf-row--error .gf-label { color: #C54E15; }
.gf .gf-row--error input, .gf .gf-row--error select, .gf .gf-row--error textarea { border-color: #E4A184; background-color: #FFF8F4; }
.gf-alert, .gf-notice, .gf-saved { margin: 0 0 10px; padding: 7px 10px; list-style: none; font-size: 12px; }
.gf-alert { border: 1px solid #F0C3AE; border-left-width: 4px; background: #FDF1EB; color: #A8400F; font-weight: bold; }
.gf-notice { border: 1px solid #E8EBD6; border-left: 4px solid #B5DA1F; background: #FFFFFF; color: #555; }
.gf-saved { border: 1px solid #D4E5A0; border-left-width: 4px; background: #F3F9E3; color: #5B7412; font-weight: bold; }

.gf .gf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0 2px 162px; border-top: 1px solid #EEF0E2; }
.gf .gf-actions--left { padding-left: 0; }
.gf .gf-actions a { color: #888; font-size: 11px; }

.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: 69px; height: 22px; margin: 0;
  padding: 0 10px; border-style: solid; border-width: 0 8px; border-image: url("fajlovi/forme/zeleno.gif") 0 8 fill / 0 8px stretch;
  background: none; color: #FFFFFF; font: bold 11px/22px Arial, Helvetica, sans-serif; text-shadow: 0 1px 0 rgba(60, 80, 0, 0.45);
  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 { filter: brightness(1.08); color: #FFFFFF; }
.gf-button:active, .gf button[type="submit"]:not(.gf-plain):active { filter: brightness(0.94); }
.gf-button:focus-visible, .gf button[type="submit"]:focus-visible { outline: 2px solid #173A62; outline-offset: 2px; }
.gf-button[disabled], .gf button[type="submit"][disabled] { filter: grayscale(1); opacity: 0.6; cursor: default; }
.gf-button--danger, .gf button.gf-button--danger[type] { border-image-source: url("fajlovi/forme/narandzasto.jpg"); text-shadow: 0 1px 0 rgba(120, 40, 0, 0.45); }
.gf-button--quiet, .gf button.gf-button--quiet[type] { border: 1px solid #D6D9C4; border-image: none; background: #FFFFFF; color: #555; text-shadow: none; }
.gf-button--quiet:hover, .gf button.gf-button--quiet[type]:hover { border-color: #8AAB1B; filter: none; color: #333; }
/* A single action outside a form panel (a POST button in a list): the button without the panel. */
form.gf-inline .gf-button, form.gf-inline button[type="submit"] { vertical-align: middle; }

.gf fieldset { margin: 6px 0; padding: 4px 10px 8px; border: 1px solid #E8EBD6; background: #FFFFFF; }
.gf legend { padding: 0 6px; color: #91AA2B; font-weight: bold; font-size: 12px; }

/* forms.css floats the fields of .cssform and fixes their sizes; a gf panel that keeps the class (tests read it) takes neither. */
.gf.cssform label, .gf.cssform input, .gf.cssform select, .gf.cssform textarea { float: none; clear: none; margin-bottom: 0; }
.gf.cssform label, .gf.cssform input[type="submit"] { width: auto; }
.gf.cssform textarea { height: auto; }

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

/* 2013: the teal accent of style2013.css. */
body[data-skin="2013"] .gf input:focus, body[data-skin="2013"] .gf select:focus, body[data-skin="2013"] .gf textarea:focus { border-color: #1784A3; box-shadow: 0 0 0 2px rgba(23, 132, 163, 0.18); }
body[data-skin="2013"] .gf legend { color: #1784A3; }

/* The dark skins: black (style2) and blue (style3). */
body[data-skin="black"] .gf, body[data-skin="blue"] .gf { background: #1B1B1B; border-color: #333333; color: #CCCCCC; }
body[data-skin="black"] .gf-inline, body[data-skin="blue"] .gf-inline { background: none; border: 0; }
body[data-skin="black"] .gf .gf-panel-head, body[data-skin="blue"] .gf .gf-panel-head { background: #242424; border-color: #333333; color: #EEEEEE; }
body[data-skin="black"] .gf .gf-row, body[data-skin="blue"] .gf .gf-row, body[data-skin="black"] .gf .gf-actions, body[data-skin="blue"] .gf .gf-actions { border-color: #2A2A2A; }
body[data-skin="black"] .gf .gf-label, body[data-skin="blue"] .gf .gf-label { color: #DDDDDD; }
body[data-skin="black"] .gf .gf-help, body[data-skin="blue"] .gf .gf-help, body[data-skin="black"] .gf .gf-intro, body[data-skin="blue"] .gf .gf-intro { color: #999999; }
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,
body[data-skin="blue"] .gf input[type="text"], body[data-skin="blue"] .gf input[type="password"], body[data-skin="blue"] .gf input[type="email"],
body[data-skin="blue"] .gf input[type="number"], body[data-skin="blue"] .gf input[type="url"], body[data-skin="blue"] .gf input[type="search"],
body[data-skin="blue"] .gf input[type="date"], body[data-skin="blue"] .gf input[type="datetime-local"], body[data-skin="blue"] .gf select, body[data-skin="blue"] .gf textarea {
  border-color: #444444; background: #2B2B2B; 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: #8AAB1B; background-color: #111111; }
body[data-skin="blue"] .gf input:focus, body[data-skin="blue"] .gf select:focus, body[data-skin="blue"] .gf textarea:focus { border-color: #08A2FC; background-color: #111111; box-shadow: 0 0 0 2px rgba(8, 162, 252, 0.2); }
body[data-skin="black"] .gf fieldset, body[data-skin="blue"] .gf fieldset { border-color: #333333; background: #141414; }
body[data-skin="blue"] .gf legend, body[data-skin="blue"] .gf .gf-required { color: #08A2FC; }
body[data-skin="black"] .gf-alert, body[data-skin="blue"] .gf-alert { border-color: #7A3514; background: #2A1810; color: #FF9A66; }
body[data-skin="black"] .gf-notice, body[data-skin="blue"] .gf-notice { border-color: #333333; background: #111111; color: #CCCCCC; }
body[data-skin="black"] .gf-saved, body[data-skin="blue"] .gf-saved { border-color: #4E6313; background: #1E2610; color: #B5DA1F; }
body[data-skin="black"] .gf .gf-errors, body[data-skin="blue"] .gf .gf-errors, body[data-skin="black"] .gf .gf-row--error .gf-label, body[data-skin="blue"] .gf .gf-row--error .gf-label { color: #FF8A50; }
body[data-skin="black"] .gf .gf-row--error input, body[data-skin="blue"] .gf .gf-row--error input, body[data-skin="black"] .gf .gf-row--error textarea, body[data-skin="blue"] .gf .gf-row--error textarea { border-color: #A04A20; background-color: #2A1810; }
body[data-skin="black"] .gf-button--quiet, body[data-skin="blue"] .gf-button--quiet, body[data-skin="black"] .gf button.gf-button--quiet[type], body[data-skin="blue"] .gf button.gf-button--quiet[type] { border-color: #444444; background: #2B2B2B; color: #DDDDDD; }

/* content: news, reviews, pictures, galleries, games, downloads, shop, premium. */
.pretraga .gf .gf-row { grid-template-columns: minmax(0, 1fr); row-gap: 3px; }
.pretraga .gf .gf-actions { padding-left: 0; }
/* The toggles of the game page keep the boxes of ul.juzermenu li a (style1.css). */
ul.juzermenu form.igram { margin: 0; }
ul.juzermenu form.igram button { display: block; box-sizing: border-box; width: 100%; padding: 10px 5px; border: 1px solid; border-color: #DEDEDE #BBBBBB #BFBFBF #DEDEDE;
  background: #F4F4F4; color: #173A62; font: bold 12px Tahoma, sans-serif; text-align: center; cursor: pointer; }
ul.juzermenu form.igram button:hover { border-color: #CCCCCC; background: #EEEEEE; }
ul.juzermenu form.igram button img { margin: 0 3px -3px 0; }
body[data-skin="black"] ul.juzermenu form.igram button, body[data-skin="blue"] ul.juzermenu form.igram button { border-color: #333333 #252525 #353535 #333333; background: #444444; color: inherit; }

/* forum, posting: the BBCode bar of _editor, the kind fieldsets and the poll options of a new topic. */
.gf .editor { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; padding: 4px 6px; border: 1px solid #B7D7DF; border-bottom: 0; background: #EEF1DF; }
.gf .editor-tags, .gf .editor-smileys { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.gf .editor-label { margin-right: 4px; color: #91AA2B; font-weight: bold; }
.gf .editor .gf-button { min-width: 28px; height: 20px; padding: 0 6px; }
.gf .editor-smileys button { padding: 1px; border: 1px solid transparent; background: none; cursor: pointer; }
.gf .editor-smileys button:hover { border-color: #8AAB1B; }
.gf .editor-smileys img { display: block; }
.gf .post-extra { margin: 8px -11px; }
.gf .post-poll-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.gf .post-poll-options input { width: 100%; }
body[data-skin="black"] .gf .editor, body[data-skin="blue"] .gf .editor { border-color: #444444; background: #242424; }
/* 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); row-gap: 3px; } .gf .gf-label { padding-top: 0; } .gf .gf-actions { padding-left: 0; } }

/* 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; align-items: center; gap: 4px 6px; }
.mark-bar { justify-content: flex-end; }
.mod-bar { margin: 8px 0; }
/* topic: the moderator links of 2009 (genericBut2) in the header of the opening post; Brisi and Igra open a small form. */
.mod-bar--links { justify-content: flex-end; }
.post-gore-menu form.gf-inline, .mod-bar--links form.gf-inline { display: inline; margin: 0; }
button.genericBut2, summary.genericBut2 { display: inline-block; font-family: inherit; cursor: pointer; list-style: none; }
summary.genericBut2::-webkit-details-marker { display: none; }
.mod-more { position: relative; display: inline-block; }
.mod-more[open] > form { position: absolute; top: 22px; right: 10px; z-index: 5; display: flex; gap: 4px; padding: 6px; border: 1px solid #D8E9ED; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); white-space: nowrap; }
.mod-more input[type="text"] { box-sizing: border-box; width: 160px; height: 20px; padding: 1px 5px; border: 1px solid #B7D7DF; font: 11px Arial, Helvetica, sans-serif; }
body[data-skin="black"] .mod-more[open] > form, body[data-skin="blue"] .mod-more[open] > form { border-color: #444444; background: #2B2B2B; }
body[data-skin="black"] .mod-more input[type="text"], body[data-skin="blue"] .mod-more input[type="text"] { border-color: #444444; background: #1E1E1E; color: #FFFFFF; }
/* topic: the poll of 2009 (#anketaglasaj, .anketarez of style1.css); the reader's option in bold. */
.anketa .anketa-opcija { margin: 2px 0; }
.anketa .anketa-opcija img { vertical-align: middle; }
.anketa .anketa-opcija--moja { font-weight: bold; }
.anketa .anketa-povuci, .anketa .anketa-glas .genericBut2 { margin-top: 4px; }
.anketa .gf-help { color: #888; }
.mod-bar input[type="text"] { box-sizing: border-box; width: 150px; height: 22px; padding: 2px 6px; border: 1px solid #B7D7DF; background: #FFFFFF; color: #333; font: 12px Arial, Helvetica, sans-serif; }
.mod-bar input[type="text"]:focus { outline: none; border-color: #8AAB1B; }
.game-link-message { flex-basis: 100%; }
/* topic: the thumbs of a post, a small quiet button each with the icon and the count; the thumb of the reader colours its icon. */
.post-thumbs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px; margin: 8px 0 0; font-size: 11px; color: #6D6D6D; }
.post-thumbs .thumb-button, .post-thumbs .thumb-static { display: inline-flex; align-items: center; gap: 4px; }
.post-thumbs .thumb-button { min-width: 0; height: 22px; padding: 0 8px; font-size: 11px; font-weight: bold; }
.post-thumbs .thumb-static { padding: 0 4px; }
.post-thumbs .thumb-dolje .thumb-icon { transform: rotate(180deg); }
.post-thumbs .thumb-gore .thumb--mine .thumb-icon { color: #5A9E0F; }
.post-thumbs .thumb-dolje .thumb--mine .thumb-icon { color: #D0321E; }
.post-thumb-names { margin: 3px 0 0; text-align: right; color: #8A8A8A; font-size: 11px; }
/* topic: who gave the thumbs, a line each, up above down. */
.post-thumb-names .thumb-names { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.post-thumb-names .thumb-dolje .thumb-icon { transform: rotate(180deg); }
/* topic: the tomato of a post (paradajz), the button next to the thumbs, and who threw it. */
.tomato-box { margin: 4px 0 0; text-align: right; font-size: 11px; color: #6D6D6D; }
.tomato-box .tomato-button, .tomato-box .tomato-static { display: inline-flex; align-items: center; gap: 4px; }
.tomato-box .tomato-button { min-width: 0; height: 22px; padding: 0 8px; font-size: 11px; font-weight: bold; }
.tomato-box .tomato-icon { display: block; }
.tomato-names { margin: 3px 0 0; color: #8A8A8A; font-size: 11px; }
/* profile: who stood the member a beer today (pivo). */
.pivo-lista { margin: 4px 0 0; font-size: 11px; color: #6D6D6D; }
body[data-skin="black"] .pivo-lista, body[data-skin="blue"] .pivo-lista { color: #C8C8C8; }
/* 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-size: 11px; color: #6D6D6D; }
details.report > summary::-webkit-details-marker { display: none; }
details.report > summary:hover { text-decoration: underline; }
details.report[open] > summary { font-weight: bold; }
details.report .gf { max-width: 340px; margin: 6px 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: 3px 0; list-style: none; border: 1px solid #B7D7DF; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); font: 12px Arial, Helvetica, sans-serif; }
.mention-menu li { display: flex; align-items: center; gap: 6px; padding: 3px 8px; color: #333333; cursor: pointer; }
.mention-menu li small { color: #888888; }
.mention-menu li.mention-active { background: #E8EBD6; }
body[data-skin="black"] .mention-menu, body[data-skin="blue"] .mention-menu { border-color: #444444; background: #242424; }
body[data-skin="black"] .mention-menu li, body[data-skin="blue"] .mention-menu li { color: #DDDDDD; }
body[data-skin="black"] .mention-menu li.mention-active, body[data-skin="blue"] .mention-menu li.mention-active { background: #3A3A3A; }
body[data-skin="black"] .mod-bar input[type="text"], body[data-skin="blue"] .mod-bar input[type="text"] { border-color: #444444; background: #2B2B2B; 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 style2-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: inherit; text-decoration: underline; }
body[data-skin] button.gf-link:focus-visible { outline: 1px dotted #8AAB1B; outline-offset: 1px; }
.gf.gf--stacked { padding: 8px 10px; }
.gf.gf--stacked .gf-panel-head { margin: -8px -10px 8px; padding: 6px 10px; font-size: 12px; }
.gf.gf--stacked .gf-row { grid-template-columns: minmax(0, 1fr); row-gap: 3px; padding: 5px 0; }
.gf.gf--stacked .gf-label { padding-top: 0; }
.gf.gf--stacked .gf-actions { padding: 8px 0 0; }
/* friend requests: one answer on each line of the card. */
.friend-request form.gf-inline { display: block; margin: 5px 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: flex-end; gap: 6px 12px; padding: 8px 10px; }
.gf.gf--bar .gf-panel-head { flex-basis: 100%; margin: -8px -10px 2px; padding: 6px 10px; font-size: 12px; }
.gf.gf--bar .gf-row { display: block; padding: 0; border: 0; }
.gf.gf--bar .gf-label { display: block; padding: 0 0 2px; font-size: 11px; }
.gf.gf--bar input[type="text"], .gf.gf--bar input[type="search"], .gf.gf--bar select { width: auto; min-width: 120px; }
.gf.gf--bar .gf-actions { padding: 0; border: 0; }

/* 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: 90px; padding: 3px 4px; border: 1px solid #B7D7DF; background: #FFFFFF; color: #333; font: 12px Arial, Helvetica, sans-serif; }
.gf .gf-actions a.gf-button { color: #FFFFFF; font-size: 11px; }
body[data-skin="black"] .gf input[type="time"], body[data-skin="blue"] .gf input[type="time"] { border-color: #444444; background: #2B2B2B; color: #FFFFFF; }
.gf .clan-forum-new { margin-left: auto; }
.gf .clan-applicants { margin: 0; padding-left: 0; list-style: none; }
.gf .clan-applicants li { padding: 2px 0; }
.clan-membership { margin: 0 0 8px; }
.gf.clan-forum-filter .gf-actions { flex: 1; }

/* 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: 12px/1.4 Arial, Helvetica, 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 12px Arial, Helvetica, 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 picture of a post keeps within the column, so a big screenshot cannot push the page wider (v5 caps it too). */
.poruka-dole img { max-width: 100%; height: auto; }
/* a video of a post ([video]): its still with a round play mark, 560 px wide at most; assets/site/video.js opens the player. */
.post-video { display: inline-block; position: relative; max-width: 560px; width: 100%; margin: 6px 0; overflow: hidden; border: 1px solid #2B2B2B; border-radius: 4px; background: #000000; vertical-align: top; }
.post-video-open { display: block; min-height: 140px; text-decoration: none; }
.post-video-poster { display: block; width: 100%; height: auto; border: 0; transition: opacity .15s; }
.post-video-open:hover .post-video-poster { opacity: .85; }
.post-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 14px 6px 12px; border-radius: 16px; background: rgba(0, 0, 0, .75); color: #FFFFFF; font-size: 12px; font-weight: bold; white-space: nowrap; }
.post-video-play::before { content: "\25B6\00A0"; color: #8CC63F; }
.post-video--bare .post-video-open { height: 200px; }
/* a YouTube link of the Youtube item: a small button that opens the viewer. */
.youtube a { display: inline-block; margin: 6px 0; padding: 4px 10px; border-radius: 3px; background: #CC0000; color: #FFFFFF; font-size: 11px; font-weight: bold; text-decoration: none; }
.youtube a::before { content: "\25B6\00A0"; }
.youtube a:hover { background: #E60000; color: #FFFFFF; }
/* The two hours of the quiet hours (Notifikacije) stand on one line. */
.gf .gf-row--quiet select { width: auto; min-width: 0; }