/* Inner pages drawn with the classic portal's own pieces (27/09; assets/layout/moldura.js, scripts/site_kit.py). The
   layout's sheets draw the pieces; this file only adds what the portal does with its own scripts (the button that
   lights under the pointer) and the few things of ours that the portal has no piece for. A page on these pieces loads
   the layout's sheets, ravora.css and this file, and none of the site's older sheets. */

/* the page's text flows as on the portal: the parchment's own size and spacing, no line height of ours */
#RavoraPage .cl-main.pg-moldura { line-height: normal; }
/* the big stone button lights under the pointer and with the keyboard (the portal does it with a script) */
#RavoraPage .BigButton > div:hover > .BigButtonOver, #RavoraPage .BigButton:focus-within .BigButtonOver { visibility: visible; }
#RavoraPage .BigButton .BigButtonText:focus-visible { outline: 1px dotted #ffd18c; outline-offset: -4px; }
/* a button that cannot act now: the portal's grey */
#RavoraPage .BigButton.is-disabled { pointer-events: none; filter: grayscale(0.8); }
/* a line that waits for the world or tells a failure, inside a box, in the parchment's text */
#RavoraPage .pg-moldura .RavoraAviso { padding: 5px; }
#RavoraPage .pg-moldura .RavoraAviso.is-erro { color: #EF0000; font-weight: bold; }
/* the strip of the section's pages: on a computer the side menu carries the navigation; on a phone, where the side
   menu leaves, the strip stays at the top of the page (owner's trial of 21/09), as a line of the portal's links */
#RavoraPage .pg-moldura > .portal-nav { display: none; }
@media (max-width: 768.01px) {
  #RavoraPage .pg-moldura > .portal-nav { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; font-size: 9pt; }
  #RavoraPage .pg-moldura > .portal-nav a[aria-current] { color: #5A2800; text-decoration: none; }
}
/* the account's panels of a page (guilds, applications): the portal's boxes, 30 px apart as its two line breaks */
#RavoraPage .pg-moldura .RavoraPainel { margin-top: 30px; }
#RavoraPage .pg-moldura .RavoraPainel .field table td { vertical-align: top; }
#RavoraPage .pg-moldura .RavoraPainel .field + .field, #RavoraPage .pg-moldura .RavoraPainel .field + .BigButton { margin-top: 4px; }
#RavoraPage .pg-moldura .RavoraPainel form > .BigButton, #RavoraPage .pg-moldura .RavoraPainel > .BigButton { margin: 6px 0 4px; }
#RavoraPage .pg-moldura .RavoraPainel input[type="text"], #RavoraPage .pg-moldura .RavoraPainel input[type="password"], #RavoraPage .pg-moldura .RavoraPainel select,
#RavoraPage .pg-moldura .RavoraPainel textarea { max-width: 100%; }
#RavoraPage .pg-moldura .RavoraPainel textarea { width: 100%; box-sizing: border-box; }
/* a label longer than its 150 px column wraps inside it, so every field of a panel starts at the same place */
#RavoraPage .pg-moldura .RavoraPainel .field td.LabelV150 { white-space: normal; }
/* a part inside a panel (the guild's logo, the names of its ranks): the same subheading as the support boxes */
#RavoraPage .pg-moldura .RavoraPainel h3 { margin: 12px 0 4px; font-size: 10pt; }
/* an applicant's message keeps its lines */
#RavoraPage .pg-moldura .guild-message { white-space: pre-line; overflow-wrap: anywhere; }
#RavoraPage .pg-moldura .RavoraLista { margin: 4px 0 8px; }
/* a message of the account's part: the portal's text, green when done, red when refused */
#RavoraPage .pg-moldura .RavoraAviso.is-ok { color: #007000; font-weight: bold; }
/* an action inside a row of a list: written as the portal's links */
#RavoraPage .pg-moldura .RavoraLinkButton { padding: 0; border: 0; background: none; cursor: pointer; font: bold 10pt Verdana, Arial, "Times New Roman", sans-serif; color: #004294; }
#RavoraPage .pg-moldura .RavoraLinkButton:hover { color: #0063DC; text-decoration: underline; }
#RavoraPage .pg-moldura .RavoraLinkButton:disabled { color: grey; cursor: default; text-decoration: none; }
#RavoraPage .pg-moldura .row-actions { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
#RavoraPage .pg-moldura .actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0; }
#RavoraPage .pg-moldura details.account-operation { margin: 8px 0; }
#RavoraPage .pg-moldura details.account-operation > summary { cursor: pointer; font-weight: bold; color: #004294; }
#RavoraPage .pg-moldura .guild-rules { margin: 4px 0 8px; padding-left: 20px; }
/* a row of stone buttons inside a box (hub boxes), and a button whose link is still hidden (the Discord invitation) */
#RavoraPage .pg-moldura .RavoraBotoes { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; }
#RavoraPage .BigButton:has(> div > a.BigButtonText[hidden]) { display: none; }
/* Changelog: the releases 30 px apart (the portal's two line breaks) while the search hides some of them */
#RavoraPage .pg-moldura .nt-release:not([hidden]) ~ .nt-release:not([hidden]) { margin-top: 30px; }
/* the "» ..." links that close a news item, apart from one another */
#RavoraPage .pg-moldura .cl-links a + a { margin-left: 12px; }
/* the Wiki's guides: wiki.js stripes the rows it shows (wk-row light, wk-alt dark), as the portal's lists */
#RavoraPage .pg-moldura tr.wk-row { background-color: #F1E0C6; }
#RavoraPage .pg-moldura tr.wk-alt { background-color: #D4C0A1; }
/* a cell of the portal's grid of pictures (library, catalogue shelves): the picture over the name, centred */
#RavoraPage .pg-moldura .RavoraCelula { text-align: center; }
#RavoraPage .pg-moldura .RavoraCelula .shelf-picture { display: flex; align-items: flex-end; justify-content: center; height: 70px; }
/* Tools: the experience table's rows come from wiki-tools.js; striped and right-aligned as the portal's lists */
#RavoraPage .pg-moldura #experience-table-body tr:nth-child(odd) { background-color: #F1E0C6; }
#RavoraPage .pg-moldura #experience-table-body tr:nth-child(even) { background-color: #D4C0A1; }
#RavoraPage .pg-moldura #experience-table-body td.numeric { text-align: right; }

/* ---- the account (conta.html) and the other signed-in pages on the kit ---------------------------------------- */
#RavoraPage .CaptionContainer h2.Text { margin: 0; }
/* a stone button whose own button or link is hidden or waiting */
#RavoraPage .BigButton:has(> div > .BigButtonText[hidden]) { display: none; }
#RavoraPage .BigButton:has(> div > .BigButtonText:disabled) { filter: grayscale(0.8); }
#RavoraPage .BigButton:has(> div > .BigButtonText:disabled) .BigButtonOver { visibility: hidden !important; }
#RavoraPage button.BigButtonText:disabled { cursor: default; }
/* the rows of a box: a field as the portal's create account (label at 150 px, the control), text and buttons across */
#RavoraPage .pg-moldura .RavoraCaixa .InnerTableContainer > table > tbody > tr > td { vertical-align: top; padding-top: 2px; padding-bottom: 2px; }
#RavoraPage .pg-moldura .RavoraCaixa small { font-size: 8pt; }
#RavoraPage .pg-moldura .RavoraCaixa h3 { margin: 12px 0 4px; font-size: 10pt; }
#RavoraPage .pg-moldura .RavoraCaixa p { margin: 4px 0; }
#RavoraPage .pg-moldura .RavoraCaixa .BigButton { margin: 4px 0; }
/* a field that stays a block (inside a folded operation): the label on the left at the same 150 px */
#RavoraPage .pg-moldura div.field { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 4px 0; }
#RavoraPage .pg-moldura div.field > label { flex: 0 0 150px; font-weight: bold; }
#RavoraPage .pg-moldura div.field > small { flex-basis: 100%; padding-left: 160px; }
/* the password's eye (ui.js writes .password-wrap and .password-toggle), as the portal's */
#RavoraPage .pg-moldura .password-wrap { position: relative; display: inline-block; }
/* the field keeps the width of the others (owner, 27/09: E-mail and Senha of different sizes): the eye sits over its
   right end, as the portal's own password field, which adds no room for it */
#RavoraPage .pg-moldura .password-toggle { position: absolute; right: 5px; top: 0; transform: translateY(15%); width: 24px; height: 16px; padding: 0; border: none;
  background: transparent url("images/global/general/icon_password_show.svg") no-repeat; background-size: contain; font-size: 0; color: transparent; cursor: pointer; }
#RavoraPage .pg-moldura .password-toggle[aria-pressed="true"] { background-image: url("images/global/general/icon_password_hide.svg"); }
/* the password's requirements with the portal's marks */
#RavoraPage .pg-moldura .pw-rules { list-style: none; margin: 4px 0 0; padding: 0; font-size: 8pt; }
#RavoraPage .pg-moldura .pw-rules li { padding-left: 17px; background: url("images/global/general/nok.gif") no-repeat 0 2px; }
#RavoraPage .pg-moldura .pw-rules li[data-ok="true"] { background-image: url("images/global/general/ok.gif"); }
/* messages: the portal's red error and green success */
#RavoraPage .pg-moldura .msg { margin: 4px 0; font-size: 9pt; }
#RavoraPage .pg-moldura .msg.err { color: red; font-weight: bold; }
#RavoraPage .pg-moldura .msg.ok { color: green; font-weight: bold; }
/* the account's lists (account-page.js writes rows of two spans) inside the striped block */
#RavoraPage .pg-moldura .TableContentContainer > .kv { display: table; width: 100%; border-collapse: collapse; }
#RavoraPage .pg-moldura .kv > div { display: table-row; }
#RavoraPage .pg-moldura .kv > div:nth-child(odd) { background-color: #D4C0A1; }
#RavoraPage .pg-moldura .kv > div:nth-child(even) { background-color: #F1E0C6; }
#RavoraPage .pg-moldura .kv > div > span { display: table-cell; padding: 2px 5px; border: 1px solid #faf0d7; vertical-align: middle; font-size: 10pt; }
#RavoraPage .pg-moldura .kv > div > span:first-child { width: 175px; font-weight: bold; white-space: nowrap; }
#RavoraPage .pg-moldura .kv .BigButton { display: inline-block; vertical-align: middle; margin: 1px 4px 1px 0; }
/* ---- the account area as the portal's (conta.html, 27/09): the Overview, Manage Account, one page per action ---- */
/* the status box: its three buttons in a column; the benefits of Premium in one line, as the portal's own rule */
#RavoraPage .pg-moldura .RavoraStatusButtons { vertical-align: middle; }
#RavoraPage .pg-moldura .premiumbenefits { display: flex; margin: 0px auto; }
#RavoraPage .pg-moldura .premiumbenefits > div { display: flex; align-items: center; justify-content: flex-start; flex: 1; }
/* the characters: the portal's list, a row of 56 px; the chosen row in bold with the larger name and its options */
#RavoraPage .pg-moldura #pn-chars tr.CharacterList { cursor: pointer; }
#RavoraPage .pg-moldura #pn-chars tr.CharacterList.Odd:hover { background-color: #ffedd1; }
#RavoraPage .pg-moldura #pn-chars tr.CharacterList.Even:hover { background-color: #e7d1af; }
#RavoraPage .pg-moldura #pn-chars tr.RavoraSelecionado { font-weight: bold; cursor: default; }
#RavoraPage .pg-moldura #pn-chars tr.RavoraSelecionado .CharacterName { font-size: 13pt; }
#RavoraPage .pg-moldura #pn-chars tr:not(.RavoraSelecionado) .CharacterOptions > * { display: none; }
#RavoraPage .pg-moldura #pn-chars .RavoraPosicao { text-align: center; padding: 2px; padding-top: 4px; }
#RavoraPage .pg-moldura #pn-chars .CharacterOptions { text-align: center; }
#RavoraPage .pg-moldura #pn-chars tr:focus-visible { outline: 1px dotted #5A2800; outline-offset: -2px; }
#RavoraPage .pg-moldura .RavoraPersonagem { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
#RavoraPage .pg-moldura .RavoraPersonagemTexto { white-space: nowrap; line-height: 12px; }
#RavoraPage .pg-moldura .RavoraPersonagem .outfit-slot { display: inline-grid; place-items: end; flex: none; width: 64px; height: 64px; margin: -22px 0 -10px -6px; }
#RavoraPage .pg-moldura .RavoraPersonagem .outfit-slot .sprite { margin: 0; }
#RavoraPage .pg-moldura .character-pending .CharacterName { color: grey; }
#RavoraPage .pg-moldura .character-deadline, #RavoraPage .pg-moldura .character-deadline time { color: #EF0000; }
/* an option of a row, "[Editar]" and "[Apagar]": a button for the keyboard, drawn as the portal's link in brackets */
#RavoraPage .pg-moldura .RavoraOpcao { padding: 0; border: 0; background: none; cursor: pointer; font: bold 10pt Verdana, Arial, "Times New Roman", sans-serif; color: #004294; white-space: nowrap; }
#RavoraPage .pg-moldura .RavoraOpcao:hover { color: #0063DC; text-decoration: underline; }
#RavoraPage .pg-moldura .RavoraOpcao::before, #RavoraPage .pg-moldura .RavoraOpcao::after { display: inline-block; font-weight: normal; color: #5A2800; }
#RavoraPage .pg-moldura .RavoraOpcao::before { content: "["; }
#RavoraPage .pg-moldura .RavoraOpcao::after { content: "]"; }
/* Manage Account: the button of each entry on its right (135 px, the portal's), a form on one line, a list inside */
#RavoraPage .pg-moldura .RavoraItemButton { float: right; width: 135px; margin-left: 20px; }
#RavoraPage .pg-moldura .RavoraSublista { margin-top: 6px; }
#RavoraPage .pg-moldura .RavoraFormLinha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; padding: 0; margin: 0; }
#RavoraPage .pg-moldura .RavoraFormLinha select { min-width: 180px; }
#RavoraPage .pg-moldura .RavoraLinhaBotoes { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
#RavoraPage .pg-moldura .RavoraMostrar { padding: 0; border: 0; background: none; cursor: pointer; vertical-align: middle; }
#RavoraPage .pg-moldura .RavoraMostrar img { display: block; }
#RavoraPage .pg-moldura .RavoraOpcoes { margin: 0; padding: 0; border: 0; }
#RavoraPage .pg-moldura #tf-setup, #RavoraPage .pg-moldura #tf-recovery { display: grid; gap: 10px; }
#RavoraPage .pg-moldura #tf-secret { word-break: break-all; }
/* the account area on a phone (768 px or less, the layout's phone width): the labels wrap, the buttons of Informações
   gerais go in rows, the benefits one under the other, the names wrap; the Status column takes only its words;
   a section reached by a link stops under the layout's fixed bar */
@media (max-width: 768.01px) {
  #RavoraPage .pg-moldura #pn-account td.LabelV, #RavoraPage .pg-moldura .RavoraSecao td.LabelV { white-space: normal; }
  #RavoraPage .pg-moldura #pn-account td { overflow-wrap: anywhere; }
  #RavoraPage .pg-moldura .AccountShowButtons, #RavoraPage .pg-moldura .AccountShowButtons tbody { display: block; }
  #RavoraPage .pg-moldura .AccountShowButtons tr { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  #RavoraPage .pg-moldura .AccountShowButtons td { display: block; padding: 0; }
  #RavoraPage .pg-moldura .premiumbenefits { flex-direction: column; align-items: flex-start; gap: 4px; }
  #RavoraPage .pg-moldura #pn-chars .RavoraPersonagemTexto { white-space: normal; }
  #RavoraPage .pg-moldura .RavoraColunaStatus, #RavoraPage .pg-moldura #pn-chars .RavoraStatus { width: auto !important; }
  #RavoraPage .pg-moldura .RavoraSublista .kv > div > span:first-child { width: auto; white-space: normal; }
  #RavoraPage .pg-moldura .RavoraSecao { scroll-margin-top: 80px; }
}
/* the packs of Ravora Coins: one stone each, the coins over the price */
#RavoraPage .pg-moldura .coins-packs { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.Content #RavoraPage .pg-moldura .coins-packs .btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: auto; min-width: 140px; padding: 9px 16px; line-height: 1.25; }
.Content #RavoraPage .pg-moldura .coins-packs .btn strong { font-size: 13px; font-weight: bold; }
.Content #RavoraPage .pg-moldura .coins-packs .btn small { font-size: 11px; color: #fff; }
/* the download page (27/09): a card for each client side by side, as the portal's blocks (frame and shadow), the
   same rows in each; the requirements in two columns; the features in two columns; one column on a phone */
#RavoraPage .pg-moldura .dl-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 8px; }
#RavoraPage .pg-moldura .dl-card { flex: 1 1 300px; min-width: 0; padding: 10px; background-color: #F1E0C6; border: 1px solid #5f4d41;
  box-shadow: 3px 3px 2px #875f3e; text-align: center; }
#RavoraPage .pg-moldura .dl-card[hidden] { display: none; }
#RavoraPage .pg-moldura .dl-icon { display: block; margin: 0 auto 4px; }
#RavoraPage .pg-moldura .dl-name { margin: 0; font-size: 11pt; font-weight: bold; }
#RavoraPage .pg-moldura .dl-sub { margin: 2px 0 8px; font-size: 9pt; }
#RavoraPage .pg-moldura .dl-button .BigButton { display: inline-block; }
#RavoraPage .pg-moldura .dl-below { min-height: 1.4em; margin: 6px 0 8px; font-size: 9pt; }
#RavoraPage .pg-moldura .dl-card .TableContentContainer { height: auto; text-align: left; }  /* the portal's height: 100% would run out of the card */
#RavoraPage .pg-moldura .dl-req td:nth-child(2), #RavoraPage .pg-moldura .dl-req td:nth-child(3) { width: 40%; }
#RavoraPage .pg-moldura .dl-features { columns: 2; column-gap: 24px; }
#RavoraPage .pg-moldura .dl-features li { break-inside: avoid; }
@media (max-width: 768.01px) { #RavoraPage .pg-moldura .dl-features { columns: 1; } }
/* a poll's page (27/09): the question as the first line of its box, the link to comment on the right, as the portal's */
#RavoraPage .pg-moldura .poll-question { margin: 0 0 4px; font-weight: bold; }
#RavoraPage .pg-moldura .poll-comment { margin: 0 0 6px; text-align: right; font-weight: bold; }
/* the steps of "Como funciona" and the lost-account paths: the portal's plain lists */
#RavoraPage .pg-moldura .steps { margin: 6px 0 0; padding-left: 20px; }
#RavoraPage .pg-moldura .steps li { margin-bottom: 6px; }
#RavoraPage .pg-moldura .steps p { margin: 2px 0 0; }
#RavoraPage .pg-moldura .lost-path { display: block; margin: 4px 0; padding: 5px; background-color: #F1E0C6; border: 1px solid #faf0d7; }
#RavoraPage .pg-moldura label.check { display: block; margin: 4px 0; }
/* deleting a character: the warning as the portal's attention box, the conditions as a plain list */
#RavoraPage .pg-moldura .dc-warning { position: relative; margin: 4px 0 8px; padding: 8px 10px 8px 43px; background-color: #d4c0a1; border: 1px solid #5f4d41; color: red; }
#RavoraPage .pg-moldura .dc-warning::before { content: ""; position: absolute; top: 6px; left: 8px; width: 30px; height: 26px; background: url("images/global/content/attentionsign.gif") no-repeat; }
#RavoraPage .pg-moldura .dc-warning b { font-weight: bold; }
#RavoraPage .pg-moldura .dc-warning p { margin: 2px 0 0; color: #5A2800; }
#RavoraPage .pg-moldura .dc-conditions { margin: 4px 0; padding-left: 20px; color: #5A2800; }
#RavoraPage .pg-moldura input[aria-invalid="true"] { outline: 1px solid red; }
/* boxes that follow one another (support pages, account views): 30 px apart, as the portal's two line breaks */
#RavoraPage .pg-moldura .RavoraCaixa:not([hidden]) ~ .RavoraCaixa:not([hidden]) { margin-top: 30px; }
/* the support pages' text inside a box */
#RavoraPage .pg-moldura .RavoraCaixa ul, #RavoraPage .pg-moldura .RavoraCaixa ol { margin: 4px 0; padding-left: 20px; }
#RavoraPage .pg-moldura .RavoraCaixa li { margin-bottom: 2px; }
#RavoraPage .pg-moldura .RavoraCaixa .sp-note { font-style: italic; }
#RavoraPage .pg-moldura .RavoraCaixa .sp-cards { display: flex; flex-wrap: wrap; gap: 10px 20px; }
#RavoraPage .pg-moldura .RavoraCaixa .sp-card { flex: 1 1 360px; min-width: 0; }
#RavoraPage .pg-moldura .RavoraCaixa .sp-card h3 { margin: 6px 0 4px; }
/* the portal gives its content container "height: 100%" (there it always sits in a table cell, where that does
   nothing); in a card of a flex row it would take the card's whole height and run out of the box, so it keeps its own */
#RavoraPage .pg-moldura .RavoraCaixa .sp-card .TableContentContainer { height: auto; }
#RavoraPage .pg-moldura .RavoraCaixa details > summary { cursor: pointer; }
/* documents (terms, privacy, rules, purchases and their frozen copies): the version line, the contents, the
   numbered sections as the portal's bold headings, the note that a copy was replaced */
#RavoraPage .pg-moldura .RavoraCaixa h2:not(.Text), #RavoraPage .pg-moldura .RavoraCaixa h1:not(.Text) { margin: 14px 0 4px; font-size: 10pt; font-weight: bold; }
#RavoraPage .pg-moldura .sp-docmeta, #RavoraPage .pg-moldura .RavoraCaixa > .TableContainer .meta { font-size: 8pt; }
#RavoraPage .pg-moldura .sp-docmeta { margin: 0 0 8px; }
#RavoraPage .pg-moldura .sp-toc { margin: 4px 0 10px; padding: 5px 10px; background-color: #F1E0C6; border: 1px solid #faf0d7; box-shadow: 3px 3px 2px #875f3e; }
#RavoraPage .pg-moldura .sp-toc > p { margin: 0 0 4px; font-weight: bold; }
#RavoraPage .pg-moldura .sp-toc ul { columns: 2; margin: 0; padding: 0; list-style: none; }
#RavoraPage .pg-moldura .archive-note { margin: 0 0 8px; padding: 5px 8px; background-color: #d4c0a1; border: 1px solid #5f4d41; }
#RavoraPage .pg-moldura .sp-prev { margin-top: 14px; }
@media (max-width: 768.01px) { #RavoraPage .pg-moldura .sp-toc ul { columns: 1; } }
/* a line under a name in a list (the documents' description) */
#RavoraPage .pg-moldura .sp-sub-text { display: block; font-size: 9pt; }
#RavoraPage .pg-moldura td.sp-num { white-space: nowrap; }

/* ---- what the support scripts draw (support.js, team.js) with their own classes, in the portal's pieces ------ */
/* a table: the striped block (the frame with its shadow, rows of the portal's two colours, header as LabelH) */
#RavoraPage .pg-moldura .sp-scroll { position: relative; margin: 0 7px 5px 0; background-color: #d4c0a1; border: 1px solid #5F4D41; box-shadow: 3px 3px 2px #875f3e; overflow-x: auto; }
#RavoraPage .pg-moldura table.sp-table { width: 100%; border-collapse: collapse; border: 1px solid #faf0d7; }
#RavoraPage .pg-moldura table.sp-table th, #RavoraPage .pg-moldura table.sp-table td { padding: 2px 5px; border: 1px solid #faf0d7; font-size: 10pt; color: #5A2800; text-align: left; vertical-align: top; }
#RavoraPage .pg-moldura table.sp-table thead th { background-color: #d5c0a1; font-weight: bold; white-space: nowrap; }
#RavoraPage .pg-moldura table.sp-table tbody tr:nth-child(odd) { background-color: #F1E0C6; }
#RavoraPage .pg-moldura table.sp-table tbody tr:nth-child(even) { background-color: #D4C0A1; }
#RavoraPage .pg-moldura table.sp-kv tbody tr:nth-child(odd) { background-color: #D4C0A1; }
#RavoraPage .pg-moldura table.sp-kv tbody tr:nth-child(even) { background-color: #F1E0C6; }
#RavoraPage .pg-moldura table.sp-kv th { width: 175px; font-weight: bold; white-space: nowrap; }
#RavoraPage .pg-moldura .sp-num { white-space: nowrap; }
#RavoraPage .pg-moldura .sp-state[data-state="open"] { color: #0063DC; font-weight: bold; }
#RavoraPage .pg-moldura .sp-state[data-state="answered"] { color: green; font-weight: bold; }
#RavoraPage .pg-moldura .sp-state[data-state="closed"] { color: grey; }
@media (max-width: 640px) { #RavoraPage .pg-moldura .sp-hide-narrow { display: none; } }
/* a message of a conversation: its bar as a caption (who and when), the text on the parchment */
#RavoraPage .pg-moldura .sp-msg { margin: 8px 7px 8px 0; background-color: #F1E0C6; border: 1px solid #5F4D41; box-shadow: 3px 3px 2px #875f3e; }
#RavoraPage .pg-moldura .sp-msg[data-author="staff"] { background-color: #D4C0A1; }
#RavoraPage .pg-moldura .sp-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 3px 6px; background-color: #5f4d41; color: #fff; }
#RavoraPage .pg-moldura .sp-msg-head h2 { margin: 0; font-size: 10pt; font-weight: bold; color: #fff; }
#RavoraPage .pg-moldura .sp-tag { padding: 0 4px; background-color: #d4c0a1; font-size: 7pt; font-weight: bold; color: #5A2800; }
#RavoraPage .pg-moldura .sp-when { margin-left: auto; font-size: 8pt; }
#RavoraPage .pg-moldura .sp-msg-text { margin: 0; padding: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* pictures of a conversation: thumbnails that open to the full width on a click; the ones chosen before sending */
#RavoraPage .pg-moldura .sp-msg-images { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 6px; }
#RavoraPage .pg-moldura .sp-img { display: block; max-width: 220px; max-height: 160px; border: 1px solid #5F4D41; background: #fff; cursor: zoom-in; }
#RavoraPage .pg-moldura .sp-img.sp-img-full { max-width: 100%; max-height: none; cursor: zoom-out; }
#RavoraPage .pg-moldura .sp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
/* the file field itself stays reachable by keyboard and screen readers; its button is the label */
#RavoraPage .pg-moldura .sp-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#RavoraPage .pg-moldura .sp-file-btn { display: inline-block; padding: 2px 10px; border: 1px solid #5F4D41; background: #F1E0C6; color: #004294; font-weight: bold; cursor: pointer; }
#RavoraPage .pg-moldura .sp-file-btn:hover { background: #D4C0A1; }
#RavoraPage .pg-moldura .sp-file:focus-visible + .sp-file-btn { outline: 2px solid #004294; outline-offset: 2px; }
#RavoraPage .pg-moldura .sp-thumb { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 8pt; }
#RavoraPage .pg-moldura .sp-thumb img { max-width: 120px; max-height: 90px; border: 1px solid #5F4D41; background: #fff; }
/* a button the scripts write as .sp-btn: the portal's blue stone; an action written as a link */
#RavoraPage .pg-moldura a.sp-btn, #RavoraPage .pg-moldura button.sp-btn { display: inline-block; width: 135px; height: 25px; padding: 0; border: 0; vertical-align: middle;
  background: url("images/global/buttons/button_blue.gif") no-repeat; font: 12px/25px Verdana, Arial, "Times New Roman", sans-serif; color: #ffd18c; text-align: center;
  text-decoration: none; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; cursor: pointer; }
#RavoraPage .pg-moldura a.sp-btn:hover, #RavoraPage .pg-moldura button.sp-btn:hover { background-image: url("images/global/buttons/button_blue_over.gif"); color: #ffd18c; text-decoration: none; }
#RavoraPage .pg-moldura .sp-linkbtn { padding: 0; border: 0; background: none; cursor: pointer; font: bold 10pt Verdana, Arial, sans-serif; color: #004294; }
#RavoraPage .pg-moldura .sp-linkbtn:disabled { color: grey; cursor: default; }
/* the ticket page's lines: filters, counts, page numbers, actions */
#RavoraPage .pg-moldura .sp-bar, #RavoraPage .pg-moldura .sp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 4px 0; }
#RavoraPage .pg-moldura .sp-actions { justify-content: flex-start; }
#RavoraPage .pg-moldura .sp-center { justify-content: center; text-align: center; }
#RavoraPage .pg-moldura .sp-pager { display: flex; gap: 8px; font-size: 9pt; font-weight: bold; }
/* the new ticket's form: label at 150 px as the portal's forms, the subjects as a list of choices */
#RavoraPage .pg-moldura .sp-row { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0; }
#RavoraPage .pg-moldura .sp-label { flex: 0 0 150px; font-weight: bold; }
#RavoraPage .pg-moldura .sp-field { flex: 1 1 300px; min-width: 0; }
#RavoraPage .pg-moldura .sp-field input, #RavoraPage .pg-moldura .sp-field textarea, #RavoraPage .pg-moldura .sp-field select { max-width: 100%; }
#RavoraPage .pg-moldura .sp-field textarea { width: 100%; box-sizing: border-box; }
#RavoraPage .pg-moldura .sp-cats { flex: 1 1 300px; display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
#RavoraPage .pg-moldura .sp-cat { display: block; padding: 4px 6px; background-color: #F1E0C6; border: 1px solid #faf0d7; cursor: pointer; }
#RavoraPage .pg-moldura .sp-cat small { display: block; margin-left: 20px; font-size: 8pt; }
#RavoraPage .pg-moldura .sp-count { font-size: 8pt; }
/* the portal paints every th grey with white text; a label of a support table is the portal's LabelV on its row */
#RavoraPage .pg-moldura table.sp-kv th { background-color: transparent; color: #5A2800; }
/* polls: the options and the results inside the poll's box, the results with the portal's percentage bars */
#RavoraPage .pg-moldura .poll > .portal-updated { margin: 0 0 6px; font-size: 8pt; }
#RavoraPage .pg-moldura .poll-options, #RavoraPage .pg-moldura .poll-results { margin: 4px 0; padding: 0; list-style: none; }
#RavoraPage .pg-moldura .poll-options li { padding: 2px 5px; }
#RavoraPage .pg-moldura .poll-options li:nth-child(odd), #RavoraPage .pg-moldura .poll-results li:nth-child(odd) { background-color: #F1E0C6; }
#RavoraPage .pg-moldura .poll-options li:nth-child(even), #RavoraPage .pg-moldura .poll-results li:nth-child(even) { background-color: #D4C0A1; }
#RavoraPage .pg-moldura .poll-results li { display: grid; grid-template-columns: minmax(0, 1fr) auto 200px; gap: 4px 10px; align-items: center; padding: 2px 5px; }
#RavoraPage .pg-moldura .poll-count { font-size: 9pt; white-space: nowrap; }
#RavoraPage .pg-moldura .poll-bar { display: block; height: 10px; background-color: #FFF2DB; border: 1px solid #5f4d41; }
#RavoraPage .pg-moldura .poll-bar > span { display: block; height: 100%; background-color: #5f4d41; }
#RavoraPage .pg-moldura .poll-form fieldset { margin: 4px 0; padding: 0; border: 0; }
#RavoraPage .pg-moldura .poll-form legend { padding: 0; font-weight: bold; }
#RavoraPage .pg-moldura .poll-form label { display: block; padding: 2px 5px; }
#RavoraPage .pg-moldura .poll-form label:nth-of-type(odd) { background-color: #F1E0C6; }
#RavoraPage .pg-moldura .poll-form label:nth-of-type(even) { background-color: #D4C0A1; }
@media (max-width: 640px) { #RavoraPage .pg-moldura .poll-results li { grid-template-columns: minmax(0, 1fr) auto; } #RavoraPage .pg-moldura .poll-bar { grid-column: 1 / -1; } }
/* phones: a table wider than the screen scrolls inside its own box (the box keeps the screen's width, 30 px apart),
   with a second scroll bar above it (moldura.js), as the portal does on phones; pictures never pass the screen */
@media (max-width: 768.01px) {
  #RavoraPage .TableContainer .InnerTableContainer { max-width: calc(100vw - 30px); }
  #RavoraPage .TableContainer .TableScrollbarWrapper { width: calc(100vw - 30px); }
  #RavoraPage .BoxContent img { max-width: calc(100vw - 20px); }
}

/* Ajuda as the portal's FAQ (suporte.html, support-faq.js, 28/09): the search line, six topics with their emblem, the two
   columns of questions, and the answer shown with its path */
#RavoraPage .pg-moldura [data-faq-hub][hidden], #RavoraPage .pg-moldura [data-faq-all][hidden], #RavoraPage .pg-moldura [data-faq-view][hidden] { display: none; }
#RavoraPage .pg-moldura .rv-faq-search { margin: 2px 0 8px; }
#RavoraPage .pg-moldura .rv-faq-search input[type=search] { width: 100%; box-sizing: border-box; }
#RavoraPage .pg-moldura .rv-faq-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; margin: 10px 0 16px; }
#RavoraPage .pg-moldura .rv-faq-topic { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px; color: #5A2800; font-size: 10pt; font-weight: bold; text-align: center; text-decoration: none; }
#RavoraPage .pg-moldura .rv-faq-topic:hover span:last-child { text-decoration: underline; }
#RavoraPage .pg-moldura .rv-faq-emblem { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3d95a6, #155567 62%, #0d3440);
  border: 3px solid #b8863b; box-shadow: 0 0 0 2px #5f4d41, 2px 3px 4px rgba(0, 0, 0, .45), inset 0 2px 3px rgba(255, 255, 255, .25); }
#RavoraPage .pg-moldura .rv-faq-emblem svg { fill: none; stroke: #f6e8c8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#RavoraPage .pg-moldura .rv-faq-topic:hover .rv-faq-emblem { border-color: #e2b25a; filter: brightness(1.12); }
#RavoraPage .pg-moldura .rv-faq-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 6px; }
#RavoraPage .pg-moldura .rv-faq-block { border: 2px solid #5f4d41; box-shadow: 2px 2px 3px rgba(0, 0, 0, .35); background: #F1E0C6; }
#RavoraPage .pg-moldura .rv-faq-block-head { padding: 7px 8px; background: #D4C0A1; border-bottom: 2px solid #5f4d41; color: #5A2800; font-size: 12pt; font-weight: bold; text-align: center; }
#RavoraPage .pg-moldura .rv-faq-block ul { margin: 0; padding: 0; list-style: none; }
#RavoraPage .pg-moldura .rv-faq-block li { padding: 9px 10px; text-align: center; font-weight: bold; border-top: 1px solid #faf0d7; }
#RavoraPage .pg-moldura .rv-faq-block li:nth-child(even) { background: #D4C0A1; }
#RavoraPage .pg-moldura .rv-faq-block li:first-child { border-top: 0; }
#RavoraPage .pg-moldura .rv-faq-crumbs { margin: 4px 0 10px; font-weight: bold; }
#RavoraPage .pg-moldura .rv-faq-title { margin: 6px 0 10px; padding: 0 0 6px; font-size: 12pt; border-bottom: 1px solid #5f4d41; }
#RavoraPage .pg-moldura .rv-faq-answer p, #RavoraPage .pg-moldura .rv-faq-entry p { margin: 0 0 8px; }
#RavoraPage .pg-moldura .rv-faq-list { margin: 0 0 10px; padding-left: 20px; }
#RavoraPage .pg-moldura .rv-faq-list li { margin: 0 0 5px; font-weight: bold; }
#RavoraPage .pg-moldura .rv-faq-more { margin: 14px 0 2px; padding: 6px 0 0; border-top: 1px dotted #5f4d41; }
#RavoraPage .pg-moldura .rv-faq-group > h2 { margin: 8px 0 6px; font-size: 11pt; }
#RavoraPage .pg-moldura .rv-faq-entry { margin: 0 0 10px; padding: 6px 8px; background: #F1E0C6; border: 1px solid #faf0d7; }
#RavoraPage .pg-moldura .rv-faq-entry > h3 { margin: 0 0 4px; font-size: 10pt; }
@media (max-width: 768.01px) {
  #RavoraPage .pg-moldura .rv-faq-topics { grid-template-columns: repeat(2, 1fr); }
  #RavoraPage .pg-moldura .rv-faq-blocks { grid-template-columns: 1fr; }
}