@import url('https://fonts.googleapis.com/css2?family=Laila:wght@300;400;500;600;700&family=Cinzel:wght@600;700&family=Cinzel+Decorative:wght@700&display=swap');
.ImgPesquisarPersonagembarrinha {
  background: url(/images/lupa.gif) no-repeat;
  border: 0;
  margin-left: 173px;
  margin-top: -38px;
  position: absolute;
  z-index: 1081;
}
.inputbk {
  margin-top: -35px;
  width: 201px;
  height: 24px;
  z-index: 1080;
  position: absolute;
  border-radius: 7px;
  border: 1px solid rgb(255 255 255);
  background-image: linear-gradient(to right, #008cab, #003e4c);
  color: #fff;
  text-align: center;
  box-shadow: 0 0 3px #00242c;
  outline: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 11px;
}
.ImgPesquisarPersonagem {
  background: url(/images/imgbuscapersonagem/procurar.png) no-repeat;
  width: 94px;
  height: 30px;
  border: 0;
  margin-left: 200px;
  margin-top: -38px;
  position: absolute;
  z-index: 10;
}
.SmallMenuBox {
  z-index: 100;
}
#LeftArtwork #TibiaLogoArtworkTop {
  position: relative;
  top: -5px;
  left: -7px;
  height: 145px;
  width: auto;
  z-index: 101;
  cursor: pointer;
  border: 0;
}
.SubmenuitemLabel {
    margin: 0;
    border-top: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 23px;
    border-bottom: 1px solid #505050;
    overflow: hidden;
    font-family: 'Laila', serif;
}
#BannerModal .modal-open .modal {
    z-index: 2060;
    --bs-backdrop-zindex: 2060;
}
.MobileTibiaLogo {
    position: relative;
    top: 0px;
    width: 90px;
    height: 110px;
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
    background-image: url(../zinx-logo-artwork-top.png);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 999;
}
.main-site-container {
    margin: 75px auto;
}

.Content #FeaturedArticle #TeaserText {
	height: 100% !important;
}

.potions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding-top: 6px;
}

.potion-card {
    width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.potion-top {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    margin-bottom: 3px;
}

.potion-top img {
    width: 32px;
    height: 32px;
}

.potion-value {
    font-weight: bold;
    font-size: 11px;
}

.potion-bar {
    width: 100%;
    height: 8px;
    border: 1px solid #000;
    background: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
}

.potion-bar-fill {
    height: 100%;
    background: #007bff;
}

.potions-group-header{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.potions-group-title{font-weight:bold;font-size:12px;white-space:nowrap;min-width:160px}
.potions-group-total{flex:1;display:flex;align-items:center;gap:10px}
.potions-total-bar{border-radius:999px;flex:1;height:10px;border:1px solid #000;background:#f3e5c9;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.potions-total-fill{border-radius:999px;height:100%;width:0%;background:linear-gradient(to right,#2a7f2a,#4fc14f);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.potions-total-text{font-weight:bold;font-size:12px;min-width:44px;text-align:right;color:#000;text-shadow:1px 1px 0 rgba(255,255,255,.5)}

.quests-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.quests-title{font-weight:bold;font-size:12px;white-space:nowrap;min-width:160px}
.quests-total{flex:1;display:flex;align-items:center;gap:10px}
.quests-total-bar{flex:1;height:12px;border:1px solid #000;background:#f3e5c9;border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.quests-total-fill{height:100%;background:linear-gradient(to right,#9b7a23,#f0d060);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.quests-total-text{font-weight:bold;font-size:12px;min-width:44px;text-align:right;color:#000;text-shadow:1px 1px 0 rgba(255,255,255,.5)}

.quest-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.quest-name{flex:1;font-size:12px}
.quest-right{display:flex;align-items:center;gap:8px;min-width:140px;justify-content:flex-end}
.quest-mini-bar{width:110px;height:8px;border:1px solid #000;background:#e9ecef;border-radius:999px;overflow:hidden}
.quest-mini-fill{height:100%;background:linear-gradient(to right,#2a7f2a,#4fc14f);border-radius:999px}
.quest-mini-fill.off{background:linear-gradient(to right,#8a1b1b,#ff4b4b)}

.exp-missing{color:#b30000;font-weight:bold;text-shadow:1px 1px 0 rgba(255,255,255,.4)}
.exp-ok{color:#1b6b1b;font-weight:bold;text-shadow:1px 1px 0 rgba(255,255,255,.4)}

.exp-ready-badge{display:inline-block;margin-left:8px;padding:2px 6px;border-radius:999px;font-size:10px;font-weight:bold;line-height:1;border:1px solid #0a4b0a;background:linear-gradient(to bottom,#2bbd2b,#168a16);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.25)}
/* layout lobo/gelo (2026-10-17): letra do menu igual aos titulos novos */
.MenuFont, .Label.MenuFont {
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #e8eef2 !important;
    letter-spacing: 0;
    white-space: nowrap;
    text-shadow: 1px 1px 0 #000, 0 0 2px #000 !important;
}
.SubmenuitemLabel { font-family: 'Cinzel', serif; }
/* campo de busca no padrao do layout (2026-10-17) */
input.inputbk {
    background: linear-gradient(to bottom, #0f2744, #061428) !important;
    border: 1px solid #c9a24e !important;
    box-shadow: inset 0 0 0 1px #1f5a94, 0 0 5px rgba(80, 160, 255, 0.35) !important;
    color: #e6f6ff !important;
    border-radius: 4px !important;
}
input.inputbk::placeholder { color: #9cc7e8 !important; }
/* ===== miolo escuro no padrao das molduras (2026-10-17) ===== */
.BoxContent, .BoxContent td, .BoxContent th, .BoxContent p, .BoxContent li { color: #d9e6f2; }
.BoxContent a, .BoxContent a:visited { color: #7cc4ff; }
.BoxContent a:hover { color: #c4e8ff; }
.TableContainer .Odd, .Content .BoxContent .Odd { background-color: #0d1f37 !important; }
.TableContainer .Even, .Content .BoxContent .Even { background-color: #132a48 !important; }
.TableContainer .TableContent, .TableContainer .TableContentContainer { border-color: #2a5d8f !important; }
.TableContainer td, .TableContainer th { border-color: #1f4a75 !important; }
.BoxContent [style*="background-color: #d4c0a1"], .BoxContent [style*="background-color:#d4c0a1"],
.BoxContent [style*="background-color: #D4C0A1"], .BoxContent [style*="background-color: #f1e0c6"], .BoxContent [style*="background-color: #F1E0C6"] {
    background-color: #10243f !important;
    border-color: #2a5d8f !important;
}
.BoxContent input[type=text], .BoxContent input[type=password], .BoxContent input[type=email], .BoxContent input[type=number], .BoxContent select, .BoxContent textarea {
    background: #08182c; color: #e6f6ff; border: 1px solid #2a5d8f;
}
.BoxContent .LabelV, .BoxContent .LabelH { color: #f6d27a; }
/* textos escuros que sumiam no fundo novo */
.BoxContent td:not([style*="color"]), .BoxContent p:not([style*="color"]), .BoxContent li:not([style*="color"]), .BoxContent span:not([style*="color"]):not([class]) { color: #d9e6f2 !important; }
.BoxContent font[color="black"], .BoxContent font[color="#000000"], .BoxContent font[color="#000"] { color: #d9e6f2 !important; }
.BoxContent h1, .BoxContent h2, .BoxContent h3, .BoxContent h4 { color: #e8f3ff !important; text-shadow: 0 1px 2px #000; }
.BoxContent b, .BoxContent strong { color: inherit; }
.BoxContent .LabelV, .BoxContent .LabelH { color: #f6d27a !important; }
/* ===== tabelas do site no tema escuro (highscores, personagem, conta, loja...) ===== */
.TableContainer { border-color: #050f1d !important; }
.TableContainer .CaptionContainer, .CaptionContainer .CaptionInnerContainer {
    background: #0b1c33 url('../images/global/content/title-background-blue.gif') center / auto 100% repeat-x !important;
}
.CaptionContainer .Text { color: #f6d27a !important; text-shadow: 0 1px 2px #000; }
.TableContentContainer { background-color: #0b1c33 !important; border-color: #2a5d8f !important; }
.InnerTableContainer .TableContentContainer { box-shadow: 2px 2px 3px rgba(0, 0, 0, .7) !important; }
.TableContainer .Table1, .TableContainer .Table2, .TableContainer .Table3, .TableContainer .Table4, .TableContainer .Table5 {
    background-color: #0d1f37 !important; border-color: #1f4a75 !important;
}
.TableContainer .Table2 .InnerTableContainer td, .TableContainer .Table3 .TableContent td, .TableContainer .RowInnerTableDataBorders td { border-color: #1f4a75 !important; }
.BoxContent [bgcolor="#D4C0A1" i], .BoxContent [style*="background-color:#D4C0A1" i], .BoxContent [style*="background-color: #D4C0A1" i] { background-color: #132a48 !important; }
.BoxContent [bgcolor="#F1E0C6" i], .BoxContent [style*="background-color:#F1E0C6" i], .BoxContent [style*="background-color: #F1E0C6" i] { background-color: #0d1f37 !important; }
.BoxContent [bgcolor="#505050" i] { background-color: #081527 !important; }
.BoxContent [style*="background-color: #5f4d41" i], .BoxContent [style*="background-color:#5f4d41" i] { background-color: #0b2340 !important; }
.BoxContent input[type=text], .BoxContent input[type=password], .BoxContent input[type=email], .BoxContent input[type=number], .BoxContent input:not([type]), .BoxContent select, .BoxContent textarea {
    background: #08182c !important; color: #e6f6ff !important; border: 1px solid #2a5d8f !important;
}
.BoxContent .TableContent td a:not([style*="color"]) { color: #7cc4ff; }
/* cabecalhos e verdes no tema escuro */
.Content .BoxContent { color: #d9e6f2 !important; }
.BoxContent tr.LabelH, .BoxContent tr.LabelH td, .BoxContent td.LabelH {
    background: #0b1c33 url('../images/global/content/title-background-blue.gif') center / auto 100% repeat-x !important;
    color: #f6d27a !important; text-shadow: 0 1px 2px #000;
}
.BoxContent font[color="green"], .BoxContent font[color="#008000"], .BoxContent font[color="darkgreen"],
.BoxContent [style*="color: green"], .BoxContent [style*="color:green"], .BoxContent [style*="color: #008000"], .BoxContent [style*="color:#008000"] { color: #5ee07a !important; }
.BoxContent font[color="red"], .BoxContent [style*="color: red"], .BoxContent [style*="color:red"] { color: #ff6b6b !important; }

/* ===== Moldura padrao da coluna da esquerda (Login, Download, Menu) - 2026-10-18 =====
   As 3 caixas usam a mesma moldura: barra pintada em cima (box-top), correntes dos dois lados
   de cima a baixo e barra embaixo (box-bottom). Conteudo sempre dentro: 170px uteis. */
#MenuColumn .SmallMenuBox,
#MenuColumn #Menu {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: 180px !important;
  box-sizing: border-box;
  padding: 12px 5px 12px 5px !important;
  margin: 0 0 10px 0 !important;
  background:
    url(../images/global/general/box-bottom.gif) no-repeat center top,
    url(../images/global/general/box-bottom.gif) no-repeat center bottom,
    url(../images/global/general/chain.gif) repeat-y 0 0,
    url(../images/global/general/chain.gif) repeat-y 173px 0,
    linear-gradient(#08131f, #08131f) no-repeat center / 166px 100% !important;
}
#MenuColumn .SmallBoxTop,
#MenuColumn .SmallBoxBorder,
#MenuColumn .SmallBoxBottom,
#MenuColumn #MenuTop,
#MenuColumn #MenuBottom,
#MenuColumn .Submenu .LeftChain,
#MenuColumn .Submenu .RightChain {
  display: none !important;
}

/* Login / Download: botao centralizado nos 170px e a faixa "Create Account/Logout" logo abaixo */
#MenuColumn .SmallMenuBox .SmallBoxButtonContainer {
  position: relative !important;
  left: 0 !important;
  width: 170px !important;
  height: 39px !important;
  background: none !important;
}
#MenuColumn .SmallMenuBox #PlayNowContainer {
  left: 10px !important;
  top: 1px !important;
}
#MenuColumn .SmallMenuBox .Loginstatus {
  left: 5px !important;
  width: 160px !important;
  margin-bottom: 1px;
}

/* Menu: botao ocupa os 170px; icone cabe dentro; "+" dentro da moldura */
#MenuColumn #Menu .menuitem { position: relative; }
#MenuColumn #Menu .MenuButton,
#MenuColumn #Menu .Button { width: 170px !important; }
#MenuColumn #Menu .Icon {
  width: 30px !important;
  height: 30px !important;
  top: 1px !important;
  left: 7px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
#MenuColumn #Menu .Extend {
  top: 10px !important;
  right: 7px !important;
}
#MenuColumn #Menu .Submenu {
  margin: 0 !important;
  width: 170px !important;
  background-color: #0b1626 !important;
}
#MenuColumn #Menu .SubmenuitemLabel { border-bottom: 1px solid #1d3a5a !important; }

/* ===== Barra de informacoes (Cast / redes sociais / Players Online) - 2026-10-18 =====
   No lugar das linhas finas (border-1) e losangos: a placa pintada dos botoes do menu,
   pontas fixas + meio repetido (nao estica). */
.Content .Box:has(.InfoBar) {
  background: transparent !important;
}
.Content .Box:has(.InfoBar) > .Border_1,
.Content .Box:has(.InfoBar) > .Corner-tl,
.Content .Box:has(.InfoBar) > .Corner-tr,
.Content .Box:has(.InfoBar) > .CornerWrapper-b {
  display: none !important;
}
.Content .Box:has(.InfoBar) > .BorderTitleText {
  /* 24/10: mesma moldura pintada das caixas My Account / Download (leftframe.png) */
  height: 34px !important;
  padding: 0 34px;
  box-sizing: border-box;
  background: #070f1c !important;
  border: 0 solid transparent !important;
  border-image-source: url(../images/global/general/leftframe.png?v=2) !important;
  border-image-slice: 36 34 36 34 fill !important;
  border-image-width: 30px 28px !important;
  border-image-outset: 22px 22px !important;
  border-image-repeat: round round !important;
  margin: 22px 22px 22px 22px !important;
}
.Content .Box:has(.InfoBar) .InfoBar {
  top: 7px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===== Caixa de conteudo (todas as paginas) - 2026-10-18 =====
   Titulo sobre a placa pintada (igual a barra de cima e aos botoes do menu) e fecho de baixo
   com o trilho fino pintado; sai a linha fina com losangos (border-1 + corners). */
.Content .Box:not(:has(.InfoBar)) > .Border_1,
.Content .Box:not(:has(.InfoBar)) > .Corner-tl,
.Content .Box:not(:has(.InfoBar)) > .Corner-tr,
.Content .Box:not(:has(.InfoBar)) > .CornerWrapper-b {
  display: none !important;
}
.Content .Box:not(:has(.InfoBar)) > .BorderTitleText {
  height: 34px !important;
  padding: 0 24px;
  box-sizing: border-box;
  background-image:
    url(../images/global/content/boxtitle-l.png),
    url(../images/global/content/boxtitle-r.png),
    url(../images/global/content/boxtitle-m.png) !important;
  background-repeat: no-repeat, no-repeat, repeat-x !important;
  background-position: left top, right top, left top !important;
  background-origin: border-box, border-box, content-box !important;
  background-clip: border-box, border-box, content-box !important;
}
.Content .Box:not(:has(.InfoBar)) > .Title {
  top: 6px !important;
  left: 26px !important;
}
.Content .Box:not(:has(.InfoBar)) {
  padding-bottom: 12px !important;
}
.Content .Box:not(:has(.InfoBar))::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  padding: 0 22px;
  box-sizing: border-box;
  background-image:
    url(../images/global/content/boxrail-l.png),
    url(../images/global/content/boxrail-r.png),
    url(../images/global/content/boxrail-m.png);
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: left top, right top, left top;
  background-origin: border-box, border-box, content-box;
  background-clip: border-box, border-box, content-box;
}