/*
 * Drevion public theme — components
Menus, content boxes, forms, tables, notices, cards and page-level UI.
 * Generated from the approved public baseline; one canonical rule per selector/context.
 */

#LeftArtwork {
    display: none;
}

#LeftArtwork a {
    position: relative;
    display: block;
    width: min(500px, 72vw);
    height: 88px;
}

#LeftArtwork #TibiaLogoArtworkTop {
    position: static;
    display: block;
    width: auto;
    height: 88px;
    max-width: min(500px, 72vw);
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .85));
}

#LeftArtwork #LogoLink {
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: auto;
    height: auto;
    color: #b7332b;
    font-family: "Trebuchet MS", Tahoma, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 1px 2px #250604, 0 0 7px #000;
    transform: translateX(-50%);
}

#MenuTop {
    order: 0;
}

#account {
    order: 1;
}

#community {
    order: 2;
}

#library {
    order: 3;
}

#shops {
    order: 4;
}

#news {
    order: 5;
}

#wiki {
    order: 6;
}

#team {
    order: 7;
}

#bazaar {
    order: 8;
}

#MenuColumn .MenuButton {
    height: 39px;
    width: 100%;
    border-top: 1px solid rgba(180, 123, 49, .24);
    border-bottom: 1px solid rgba(0, 0, 0, .62);
    box-sizing: border-box;
    background-color: #191714 !important;
    background-image: linear-gradient(90deg, #1b1915, #292217 50%, #161512) !important;
}

#MenuColumn .MenuButton > div:first-child {
    height: 100%;
}

#MenuColumn .MenuButton .Button {
    height: 100%;
    width: 100%;
    background-color: transparent !important;
    background-image: linear-gradient(90deg, rgba(180, 123, 49, .14), rgba(224, 170, 85, .2), rgba(180, 123, 49, .14)) !important;
}

#MenuColumn .MenuButton .Label {
    display: none;
}

#Content {
    position: static;
    box-sizing: border-box;
    width: 100%;
    padding-right: 0;
}

#Themeboxes {
    display: flex;
    flex-direction: column;
    gap: var(--drevion-panel-gap);
}

/*
 * Blade component contracts. Legacy classes remain in the rendered markup so
 * pages can migrate incrementally without changing the approved visual skin.
 */
.drevion-panel,
.drevion-caption,
.drevion-button,
.drevion-input,
.drevion-select,
.drevion-textarea {
    box-sizing: border-box;
}

.drevion-form {
    margin: 0;
    padding: 0;
}

.drevion-caption__text--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Shared composition utilities used while legacy views become components. */
.drevion-public .Content .drevion-u-full-width { width: 100%; }
.drevion-public .Content .drevion-u-no-max-width { max-width: unset; }
.drevion-public .Content .drevion-u-auto-width { width: unset; }
.drevion-public .Content .drevion-u-table-border { border: 1px solid #faf0d7; }
.drevion-public .Content .drevion-u-text-center { text-align: center; }
.drevion-public .Content .drevion-u-text-right { text-align: right; }
.drevion-public .Content .drevion-u-text-left { text-align: left; }
.drevion-public .Content .drevion-u-width-15 { width: 15%; }
.drevion-public .Content .drevion-u-width-10 { width: 10%; }
.drevion-public .Content .drevion-u-width-20 { width: 20%; }
.drevion-public .Content .drevion-u-width-25 { width: 25%; }
.drevion-public .Content .drevion-u-width-30 { width: 30%; }
.drevion-public .Content .drevion-u-width-40 { width: 40%; }
.drevion-public .Content .drevion-u-width-48 { width: 48%; }
.drevion-public .Content .drevion-u-width-50 { width: 50%; }
.drevion-public .Content .drevion-u-width-70 { width: 70%; }
.drevion-public .Content .drevion-u-width-75 { width: 75%; }
.drevion-public .Content .drevion-u-width-90 { width: 90%; }
.drevion-public .Content .drevion-u-width-99 { width: 99%; }
.drevion-public .Content .drevion-u-width-20px { width: 20px; }
.drevion-public .Content .drevion-u-width-50px { width: 50px; }
.drevion-public .Content .drevion-u-width-60px { width: 60px; }
.drevion-public .Content .drevion-u-width-100px { width: 100px; }
.drevion-public .Content .drevion-u-width-150px { width: 150px; }
.drevion-public .Content .drevion-u-width-165px { width: 165px; }
.drevion-public .Content .drevion-u-width-200px { width: 200px; }
.drevion-public .Content .drevion-u-borderless { border: 0; }
.drevion-public .Content .drevion-u-hidden { display: none; }
.drevion-public .Content .drevion-u-bold { font-weight: 700; }
.drevion-public .Content .drevion-u-normal-weight { font-weight: 400; }
.drevion-public .Content .drevion-u-align-middle { vertical-align: middle; }
.drevion-public .Content .drevion-u-align-top { vertical-align: top; }
.drevion-public .Content .drevion-u-float-left { float: left; }
.drevion-public .Content .drevion-u-float-right { float: right; }
.drevion-public .Content .drevion-u-reset-spacing { margin: 0; padding: 0; }
.drevion-public .Content .drevion-u-margin-0 { margin: 0; }
.drevion-public .Content .drevion-u-margin-auto { margin: auto; }
.drevion-public .Content .drevion-u-margin-left-5 { margin-left: 5px; }
.drevion-public .Content .drevion-u-margin-left-10 { margin-left: 10px; }
.drevion-public .Content .drevion-u-margin-right-10 { margin-right: 10px; }
.drevion-public .Content .drevion-u-pad-2 { padding: 2px; }
.drevion-public .Content .drevion-u-pad-4 { padding: 4px; }
.drevion-public .Content .drevion-u-pad-5 { padding: 5px; }
.drevion-public .Content .drevion-u-pad-8 { padding: 8px; }
.drevion-public .Content .drevion-u-pad-10 { padding: 10px; }
.drevion-public .Content .drevion-u-text-10 { font-size: 10px; }
.drevion-public .Content .drevion-u-danger-text { color: red; }
.drevion-public .Content .drevion-u-success-text { color: green; }
.drevion-public .Content .drevion-u-size-20px { width: 20px; height: 20px; }
.drevion-public .Content .drevion-u-icon-20 { width: 20px; margin-right: 8px; }
.drevion-public .Content .drevion-u-flex { display: flex; }
.drevion-public .Content .drevion-u-align-items-center { align-items: center; }
.drevion-public .Content .drevion-u-justify-center { justify-content: center; }
.drevion-public .Content .drevion-u-gap-10 { gap: 10px; }
.drevion-public .Content .drevion-u-inline-icon { position: relative; top: 3px; margin-left: 5px; }
.drevion-public .Content .drevion-u-button-spacer { height: 4px; font-size: 1px; }
.drevion-public .Content .drevion-u-reserved-message { min-height: 20px; display: inline-block; visibility: hidden; }
.drevion-public .Content .drevion-u-stonebar { background-image: url("/assets/tibiarl/images/content/stonebar-center.gif"); }
.drevion-public .Content .drevion-payment-icon--normal { background-image: url("/assets/tibiarl/images/payment/pmcid_icon_normal.png"); }
.drevion-public .Content .drevion-payment-icon--disabled { background-image: url("/assets/tibiarl/images/payment/pmcid_deactivated.png"); }
.drevion-public .Content .drevion-service-icon--normal { background-image: url("/assets/tibiarl/images/payment/serviceid_icon_normal.png"); }
.drevion-public .Content .NewsTickerExtend { background-image: url("/assets/tibiarl/images/general/plus.gif"); }
.drevion-public .Content .drevion-download-icon { width: 72px; height: 72px; border: 0; border-radius: 5px; }

.drevion-public .Content .AttentionSign { background-image: url("/assets/tibiarl/images/content/attentionsign.gif"); }
.drevion-public .Content .drevion-character-row--selected { font-weight: 700; }
.drevion-public .Content .drevion-character-name { font-size: 10pt; }
.drevion-public .Content .drevion-character-name--selected { font-size: 13pt; }
.drevion-public .Content .drevion-character-options { display: none; }
.drevion-public .Content .drevion-character-options--visible { display: block; }
.drevion-public .Content .drevion-ban-expiration { color: #5a2800; }
.drevion-public .Content .drevion-bullet-list { list-style-image: url("/assets/tibiarl/images/content/bullet.gif"); }
.drevion-public .Content .drevion-news-headline--info { background-image: url("/assets/tibiarl/images/content/info-background.gif"); }
.drevion-public .Content .drevion-news-headline--article { background-image: url("/assets/tibiarl/images/news/newsheadline_background.gif"); }
.drevion-public .Content .drevion-service-icon--extra { background-image: url("/assets/tibiarl/images/payment/serviceid_200.png"); }
.drevion-public .Content .drevion-service-icon--selected { background-image: url("/assets/tibiarl/images/payment/serviceid_icon_selected.png"); }
.drevion-public .Content .drevion-service-product-image { position: relative; left: -12px; }

.drevion-public .Content [class*="drevion-sprite--"] { position: absolute; }
.drevion-public .Content .drevion-sprite--left-23 { top: 0; left: 23px; }
.drevion-public .Content .drevion-sprite--left-28 { top: 2px; left: 28px; }
.drevion-public .Content .drevion-sprite--left-38 { top: 5px; left: 38px; }
.drevion-public .Content .drevion-sprite--left-30-high { top: -10px; left: 30px; }
.drevion-public .Content .drevion-sprite--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.drevion-public .Content .drevion-sprite--center-full { top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); }
.drevion-public .Content .drevion-sprite--large { top: 30%; left: 40%; width: 90px; transform: translate(-50%, -50%); }
.drevion-public .Content .drevion-sprite--center-high { top: 35%; left: 50%; transform: translate(-50%, -50%); }
.drevion-public .Content .drevion-sprite--flipped-item { position: static; margin-left: 13px; transform: rotate(180deg); }
.drevion-public .Content .drevion-sprite--item { position: static; margin-left: 13px; }

.drevion-public .Content .drevion-progress {
    width: 100%;
    height: 10px;
    border: 1px solid #080704;
    background: #12100d;
    appearance: none;
    -webkit-appearance: none;
    image-rendering: pixelated;
}

.drevion-public .Content .drevion-progress::-webkit-progress-bar { background: #12100d; }
.drevion-public .Content .drevion-progress::-webkit-progress-value { background: #779b50; }
.drevion-public .Content .drevion-progress::-moz-progress-bar { background: #779b50; }

.drevion-public .Content .drevion-progress--vital {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: linear-gradient(
        to bottom,
        var(--drevion-progress-track-bright, #211b14),
        var(--drevion-progress-track-dark, #090806)
    );
}

.drevion-public .Content .drevion-progress--vital::-webkit-progress-bar {
    background: linear-gradient(
        to bottom,
        var(--drevion-progress-track-bright, #211b14),
        var(--drevion-progress-track-dark, #090806)
    );
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), inset 0 -1px rgba(0, 0, 0, .5);
}

.drevion-public .Content .drevion-progress--life {
    --drevion-progress-bright: var(--drevion-life-bright);
    --drevion-progress-dark: var(--drevion-life-dark);
    --drevion-progress-track-bright: var(--drevion-life-track-bright);
    --drevion-progress-track-dark: var(--drevion-life-track-dark);
}

.drevion-public .Content .drevion-progress--mana {
    --drevion-progress-bright: var(--drevion-mana-bright);
    --drevion-progress-dark: var(--drevion-mana-dark);
    --drevion-progress-track-bright: var(--drevion-mana-track-bright);
    --drevion-progress-track-dark: var(--drevion-mana-track-dark);
}

.drevion-public .Content .drevion-progress--vital::-webkit-progress-value {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, .34) 0, rgba(255, 255, 255, .08) 38%, rgba(0, 0, 0, .3) 62%, rgba(0, 0, 0, .5) 100%),
        linear-gradient(to right, var(--drevion-progress-bright), var(--drevion-progress-dark));
    box-shadow: inset 0 1px rgba(255, 255, 255, .22), inset 0 -1px rgba(0, 0, 0, .55);
}

.drevion-public .Content .drevion-progress--vital::-moz-progress-bar {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, .34) 0, rgba(255, 255, 255, .08) 38%, rgba(0, 0, 0, .3) 62%, rgba(0, 0, 0, .5) 100%),
        linear-gradient(to right, var(--drevion-progress-bright), var(--drevion-progress-dark));
    box-shadow: inset 0 1px rgba(255, 255, 255, .22), inset 0 -1px rgba(0, 0, 0, .55);
}

.Content a {
    color: var(--drevion-gold-bright);
}

.Themeboxes a {
    color: var(--drevion-gold-bright);
}

.Content a:hover {
    color: #f3d68d;
}

.Themeboxes a:hover {
    color: #f3d68d;
}

.Content th {
    color: #ead8ad;
    background: #2d2419;
}

.Content .TableContent {
    background-color: #1b1812 !important;
}

.Content .TableContent tbody {
    background-color: #1b1812 !important;
}

.Content .TableContent tr {
    background-color: #1b1812 !important;
}

.Content .TableContent td {
    background-color: #1b1812 !important;
}

.Content .TableContent tr:nth-child(even) td {
    background-color: #262117 !important;
}

.Content .TableContainer .TableContent td a {
    color: #e4d3a6 !important;
}

.Content .TableContainer .TableContent tr:hover td {
    background-color: rgba(180, 123, 49, .16);
}

#Content input:not([type="image"]):not(.BigButtonText) {
    max-width: 100%;
    color: var(--drevion-parchment);
    border: 1px solid #8b6132;
    border-radius: 2px;
    background: #12110e;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .72), 0 1px rgba(255, 216, 140, .1);
}

#Content select {
    max-width: 100%;
    color: var(--drevion-parchment);
    border: 1px solid #8b6132;
    border-radius: 2px;
    background: #12110e;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .72), 0 1px rgba(255, 216, 140, .1);
}

#Content textarea {
    max-width: 100%;
    color: var(--drevion-parchment);
    border: 1px solid #8b6132;
    border-radius: 2px;
    background: #12110e;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .72), 0 1px rgba(255, 216, 140, .1);
}

#Content input:not([type="image"]):not(.BigButtonText):focus {
    border-color: var(--drevion-gold-bright);
    outline: 1px solid rgba(224, 170, 85, .52);
    outline-offset: 1px;
}

#Content select:focus {
    border-color: var(--drevion-gold-bright);
    outline: 1px solid rgba(224, 170, 85, .52);
    outline-offset: 1px;
}

#Content textarea:focus {
    border-color: var(--drevion-gold-bright);
    outline: 1px solid rgba(224, 170, 85, .52);
    outline-offset: 1px;
}

#Themeboxes img {
    image-rendering: crisp-edges;
}

#Content img {
    image-rendering: crisp-edges;
}

#MenuColumn > #Menu .menuitem {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--pixel-black);
    background-color: var(--pixel-charcoal);
    background-image: repeating-linear-gradient(126deg, transparent 0 36px, rgba(255,255,255,.018) 37px 38px, transparent 39px 78px),
    linear-gradient(#1b1a17, #10100e 48%, #171612);
    box-shadow: 0 0 0 1px var(--pixel-gold), 0 0 0 3px #24170b, 0 3px 6px var(--pixel-shadow), inset 0 0 0 2px #372517, inset 0 1px rgba(248,191,88,.2);
}

#MenuColumn > #Menu .MenuButton {
    position: relative;
    height: 45px;
    border: 0;
    border-bottom: 1px solid #060605;
    background-color: #171512 !important;
    background-image: linear-gradient(90deg, #171512, #2b2116 50%, #171512) !important;
    box-shadow: inset 0 -1px rgba(159,104,44,.42), 0 2px 5px rgba(0,0,0,.62);
}

#MenuColumn > #Menu .MenuButton .Button {
    background-color: transparent !important;
    background-image: none !important;
}

#Themeboxes .Themebox {
    box-sizing: border-box;
    width: 100%;
    border: 2px solid #080706;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #9a682d,
    0 0 0 3px #21160d,
    0 3px 10px rgba(0, 0, 0, .68),
    inset 0 0 0 2px #382719;
    min-height: 0;
    overflow: hidden;
}

.Content .Box {
    box-sizing: border-box;
    margin: 0 0 var(--drevion-panel-gap);
    border: 2px solid var(--pixel-black) !important;
    border-radius: 0 !important;
    background-color: var(--pixel-charcoal) !important;
    background-image: repeating-linear-gradient(126deg, transparent 0 36px, rgba(255,255,255,.018) 37px 38px, transparent 39px 78px),
    linear-gradient(#1b1a17, #10100e 48%, #171612) !important;
    box-shadow: 0 0 0 1px var(--pixel-gold),
    0 0 0 3px #24170b,
    0 4px 0 var(--pixel-black),
    0 7px 12px var(--pixel-shadow),
    inset 0 0 0 2px #372517,
    inset 0 0 0 3px rgba(0, 0, 0, .78),
    inset 0 1px 0 rgba(248, 191, 88, .28) !important;
    overflow: hidden;
}

.Content .Box .BoxTitleText {
    color: var(--pixel-gold-light) !important;
    font-family: "Drevion Livingstone", Georgia, serif !important;
    text-shadow: 1px 2px #000 !important;
}

.Content .BoxContent > table:first-child > tbody > tr:first-child > td:first-child[style*="background"] {
    color: var(--pixel-gold-light) !important;
    font-family: "Drevion Livingstone", Georgia, serif !important;
    text-shadow: 1px 2px #000 !important;
}

.Content .BorderTitleText {
    height: 43px !important;
    border-bottom: 1px solid #060605;
    background-color: #171512 !important;
    background-image: linear-gradient(90deg, #171512, #2b2116 50%, #171512) !important;
    box-shadow: inset 0 -1px rgba(159,104,44,.42), 0 2px 5px rgba(0,0,0,.62);
    color: var(--pixel-gold-light) !important;
    font-family: "Drevion Livingstone", Georgia, serif !important;
    text-shadow: 1px 2px #000 !important;
}

.Content .BoxContent {
    box-sizing: border-box;
    min-width: 0;
    padding: 18px !important;
    color: var(--pixel-parchment) !important;
    background-color: #151411 !important;
    background-image: repeating-linear-gradient(126deg, transparent 0 37px, rgba(255,255,255,.012) 38px 39px, transparent 40px 79px),
    linear-gradient(#1b1a17, #11110f 48%, #171612) !important;
    font-family: "Trebuchet MS", Tahoma, sans-serif;
}

.Content .BoxContent p {
    color: var(--pixel-parchment) !important;
    line-height: 1.45;
    text-shadow: 1px 1px #090806;
}

.Content .BoxContent li {
    color: var(--pixel-parchment) !important;
    line-height: 1.45;
    text-shadow: 1px 1px #090806;
}

.Content .BoxContent td {
    color: var(--pixel-parchment) !important;
    font-family: "Trebuchet MS", Tahoma, sans-serif;
    line-height: 1.45;
    text-shadow: 1px 1px #090806;
}

.Content .BoxContent label {
    color: var(--pixel-parchment) !important;
    line-height: 1.45;
    text-shadow: 1px 1px #090806;
}

.Content .TableContainer {
    border-color: #6a4a29 !important;
    background-color: #171512;
    background: #100f0d !important;
    box-shadow: 0 0 0 1px #090806, inset 0 0 11px #000;
}

.Content .TableContainer .Table3 {
    border-color: #6a4a29 !important;
    background-color: #171512;
    background: #100f0d !important;
    box-shadow: 0 0 0 1px #090806, inset 0 0 11px #000;
}

.Content table[style*="border-collapse"] {
    border-color: #6a4a29 !important;
    background: #100f0d !important;
    box-shadow: 0 0 0 1px #090806, inset 0 0 11px #000;
}

.Content .TableContainer .CaptionContainer {
    height: auto;
    color: var(--pixel-gold-light) !important;
    border-color: #6a4a29 !important;
    background: #211b14 !important;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 1px 1px #000;
    text-transform: uppercase;
}

.Content .TableContainer .CaptionInnerContainer {
    height: auto;
    color: var(--pixel-gold-light) !important;
    border-color: #6a4a29 !important;
    background: #211b14 !important;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 1px 1px #000;
    text-transform: uppercase;
}

.Content .TableContainer .TableContent tr:first-child td {
    color: var(--pixel-gold-light) !important;
    border-color: #6a4a29 !important;
    background: #211b14 !important;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 1px 1px #000;
    text-transform: uppercase;
}

#Content table[style*="border-collapse"] th {
    color: var(--pixel-gold-light) !important;
    border-color: #6a4a29 !important;
    background: #211b14 !important;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 1px 1px #000;
    text-transform: uppercase;
}

.Content .TableContainer .Odd {
    background-color: #242019;
    background: #1c1914 !important;
}

.Content .TableContainer .TableContent tr:nth-child(odd) td {
    background: #1c1914 !important;
}

#Content table[style*="border-collapse"] tbody tr:nth-child(odd) td {
    background: #1c1914 !important;
}

.Content .TableContainer .Even {
    background-color: #1c1914;
    background: #262117 !important;
}

.Content .TableContainer .TableContent tr:nth-child(even) td {
    background: #262117 !important;
}

#Content table[style*="border-collapse"] tbody tr:nth-child(even) td {
    background: #262117 !important;
}

.Content .TableContainer .TableContent td {
    border-color: rgba(180,123,49,.32) !important;
    color: #e4d3a6 !important;
}

#Content table[style*="border-collapse"] td {
    color: #e4d3a6 !important;
    border-color: rgba(180,123,49,.32) !important;
    background: #1b1812 !important;
}

.Content input:not([type="image"]):not(.BigButtonText) {
    color: var(--pixel-parchment) !important;
    border: 1px solid #8b6132 !important;
    border-radius: 0 !important;
    background: #12110e !important;
    box-shadow: inset 2px 2px 4px #000, 0 1px rgba(255,216,140,.1) !important;
}

.Content select {
    color: var(--pixel-parchment) !important;
    border: 1px solid #8b6132 !important;
    border-radius: 0 !important;
    background: #12110e !important;
    box-shadow: inset 2px 2px 4px #000, 0 1px rgba(255,216,140,.1) !important;
}

.Content textarea {
    color: var(--pixel-parchment) !important;
    border: 1px solid #8b6132 !important;
    border-radius: 0 !important;
    background: #12110e !important;
    box-shadow: inset 2px 2px 4px #000, 0 1px rgba(255,216,140,.1) !important;
}

.Content input:not([type="image"]):not(.BigButtonText):focus {
    border-color: var(--pixel-gold-light) !important;
    outline: 1px solid rgba(224,170,85,.52);
    outline-offset: 1px;
}

.Content select:focus {
    border-color: var(--pixel-gold-light) !important;
    outline: 1px solid rgba(224,170,85,.52);
    outline-offset: 1px;
}

.Content textarea:focus {
    border-color: var(--pixel-gold-light) !important;
    outline: 1px solid rgba(224,170,85,.52);
    outline-offset: 1px;
}

.Content .BigButton {
    filter: contrast(1.15) saturate(.9);
    image-rendering: pixelated;
}

#Themeboxes .Themebox[style*="serverSave1.png"] {
    background-color: transparent !important;
    background-image: url("/assets/tibiarl/images/themeboxes/newcomer/serverSave1.png") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

#Themeboxes .Themebox[style*="newcomerbox.gif"] {
    background-color: transparent !important;
    background-image: url("/assets/tibiarl/images/themeboxes/newcomer/newcomerbox.gif") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

#Themeboxes .Themebox[style*="boxdiscord.png"] {
    background-color: transparent !important;
    background-image: url("/assets/tibiarl/images/themeboxes/networks/boxdiscord.png") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

#Themeboxes .Themebox .ThemeboxButton {
    border-radius: 0 !important;
    image-rendering: pixelated;
    z-index: 2;
}

#Themeboxes .Themebox .Bottom {
    z-index: 2;
}

#siteLanguages {
    position: absolute !important;
    z-index: 8 !important;
    top: 62px !important;
    left: 240px !important;
    margin: 0 !important;
}

.drevion-public {
    box-sizing: border-box;
}

.drevion-public * {
    box-sizing: border-box;
}

.drevion-public a {
    color: #dccb9c;
}

.drevion-public a:link {
    color: #dccb9c;
}

.drevion-public a:visited {
    color: #dccb9c;
}

.drevion-public a:hover {
    color: #f0c66c;
}

.drevion-public a:focus-visible {
    color: #f0c66c;
}

.drevion-public img {
    image-rendering: crisp-edges;
}

.drevion-public #LeftArtwork {
    display: none !important;
}

.drevion-public #Content {
    position: static;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
}

.drevion-public #Content > .Box:first-of-type {
    display: none !important;
}

.drevion-public #siteLanguages {
    position: fixed !important;
    z-index: 1000 !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    display: flex;
    width: auto;
    height: auto;
    margin: 0 !important;
    padding: 4px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #1b1007;
    background: rgba(8, 7, 5, .88);
    box-shadow: 0 0 0 1px #765027, 0 2px 5px #000, inset 0 0 0 1px #302116;
    opacity: .82;
    transition: opacity 100ms linear;
}

.drevion-public #siteLanguages:hover {
    opacity: 1;
}

.drevion-public #siteLanguages:focus-within {
    opacity: 1;
}

.drevion-public #siteLanguages .languageFlag {
    width: 23px;
    height: 18px;
    margin: 0;
    padding: 2px;
    border: 1px solid #6a4927;
    background: #0a0907 !important;
}

.drevion-public #siteLanguages .languageFlag img {
    width: 17px;
    height: 11px;
}

.drevion-public .Content .BoxContent div {
    color: inherit;
    font-family: inherit;
}

.drevion-public .Content h1 {
    color: #dda64f !important;
    font-family: "Lucida Console", "Courier New", monospace !important;
    text-shadow: 1px 2px #000;
}

.drevion-public .Content h2 {
    color: #dda64f !important;
    font-family: "Lucida Console", "Courier New", monospace !important;
    text-shadow: 1px 2px #000;
}

.drevion-public .Content h3 {
    color: #dda64f !important;
    font-family: "Lucida Console", "Courier New", monospace !important;
    text-shadow: 1px 2px #000;
}

.drevion-public .Content h4 {
    color: #dda64f !important;
    font-family: "Lucida Console", "Courier New", monospace !important;
    text-shadow: 1px 2px #000;
}

.drevion-public .Content .CaptionContainer > * {
    box-sizing: border-box;
}

.drevion-public .Content .CaptionInnerContainer > * {
    box-sizing: border-box;
}

.drevion-public .Content .CaptionInnerContainer > span {
    display: none !important;
}

.drevion-public .Content .CaptionInnerContainer .RightArea {
    margin-left: auto;
    color: #aa9871 !important;
    font-size: 9px;
    font-weight: 400;
    text-transform: none;
}

.drevion-public .Content .TableContainer > table {
    width: 100% !important;
    border: 0 !important;
    border-collapse: collapse;
    background: #11100e !important;
    box-shadow: none !important;
}

.drevion-public .Content .TableContainer .Table1 {
    width: 100% !important;
    border: 0 !important;
    border-collapse: collapse;
    background: #11100e !important;
    box-shadow: none !important;
}

.drevion-public .Content .TableContainer .Table2 {
    width: 100% !important;
    border: 0 !important;
    border-collapse: collapse;
    background: #11100e !important;
    box-shadow: none !important;
}

.drevion-public .Content .TableContainer .Table3 {
    width: 100% !important;
    border: 0 !important;
    border-collapse: collapse;
    background: #11100e !important;
    box-shadow: none !important;
}

.drevion-public .Content .TableContainer .Table4 {
    width: 100% !important;
    border: 0 !important;
    border-collapse: collapse;
    background: #11100e !important;
    box-shadow: none !important;
}

.drevion-public .Content .TableContainer .Table5 {
    width: 100% !important;
    border: 0 !important;
    border-collapse: collapse;
    background: #11100e !important;
    box-shadow: none !important;
}

.drevion-public .Content .drevion-rules-page .Table3 .TableContentContainer table {
    background: #11100e !important;
}

.drevion-public .Content .drevion-rules-page .Table3 tr[bgcolor] {
    color: #e4d3a6 !important;
    background: #11100e !important;
}

.drevion-public .Content .drevion-rules-page .Table3 tr[bgcolor] > td {
    color: #e4d3a6 !important;
    background: #11100e !important;
}

.drevion-public .Content .TableScrollbarWrapper {
    display: none !important;
}

.drevion-public .Content .TableScrollbarContainer {
    display: none !important;
}

.drevion-public .Content .TableContentContainer {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto;
    background: transparent !important;
    box-shadow: none !important;
}

.drevion-public .Content .InnerTableContainer {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow-x: auto;
    background: transparent !important;
    box-shadow: none !important;
}

.drevion-public .Content .TableContent tr {
    height: auto;
    min-height: 31px;
}

.drevion-public .Content .TableContent th {
    height: auto;
    min-height: 31px;
}

.drevion-public .Content .TableContent tr:nth-child(even) td {
    background: rgba(101,71,35,.09) !important;
}

.drevion-public .Content .Even td {
    background: rgba(101,71,35,.09) !important;
}

.drevion-public .Content .TableContent tr:hover td {
    background: rgba(171,112,45,.1) !important;
}

.drevion-public .Content .TableContent .LabelH td {
    height: 31px;
    color: #d9953f !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: #1b1915 !important;
}

.drevion-public .Content .TableContent tr:first-child.LabelH td {
    height: 31px;
    color: #d9953f !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: #1b1915 !important;
}

.drevion-public .Content table[style*="border-collapse"] th {
    height: 31px;
    color: #d9953f !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: #1b1915 !important;
}

.drevion-public .Content .LabelV {
    color: #d6a04b !important;
    font-weight: 700;
}

.drevion-public .Content [class^="LabelV"] {
    color: #d6a04b !important;
    font-weight: 700;
}

.drevion-public .Content .PageNavigation {
    padding: 8px !important;
    color: #bbaa7f !important;
    text-align: center;
}

.drevion-public .Content input::placeholder {
    color: #8f846b !important;
    opacity: 1;
}

.drevion-public .Content textarea::placeholder {
    color: #8f846b !important;
    opacity: 1;
}

.drevion-public .Content .BigButton > div {
    width: 100%;
    height: 100%;
}

.drevion-public .Content .BigButtonOver {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255,255,255,.06) !important;
    opacity: 0;
}

.drevion-public .Content .BigButton:hover .BigButtonOver {
    opacity: 1;
}

.drevion-public .Content .SmallBox {
    border-color: #6a4927 !important;
    color: #d8c89a !important;
    background: #171511 !important;
}

.drevion-public .Content .MessageContainer {
    border-color: #6a4927 !important;
    color: #d8c89a !important;
    background: #171511 !important;
}

.drevion-public .Content .Message {
    border-color: #6a4927 !important;
    color: #d8c89a !important;
    background: #171511 !important;
}

.drevion-public .Content .ErrorMessage {
    border-color: #6a4927 !important;
    color: #e3b095 !important;
    background: #171511 !important;
    padding: 17px 18px 17px 64px !important;
}

.drevion-public .Content .NewsHeadline {
    min-height: 43px;
    margin: 0 0 12px;
}

.drevion-public .Content .NewsHeadlineIcon {
    top: 5px !important;
    left: 8px !important;
    width: 32px;
    height: 32px;
}

.drevion-public .Content .NewsHeadlineDate {
    position: static !important;
    display: inline;
    color: #d9c898 !important;
    font-family: "Lucida Console", "Courier New", monospace;
    line-height: 27px;
}

.drevion-public .Content .NewsTable {
    width: 100%;
    color: #d8c89a !important;
    background: transparent !important;
}

.drevion-public .Content .NewsTableContainer {
    width: 100%;
    color: #d8c89a !important;
    background: transparent !important;
}

.drevion-public #Themeboxes {
    padding: 5px;
    gap: 10px;
}

.drevion-public .drevion-rail-cta:link {
    position: relative;
    z-index: 4;
    width: calc(100% - 22px);
    min-height: 32px;
    margin: 17px auto 0;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dfce97 !important;
    border: 1px solid #17200f;
    background: linear-gradient(#597a3c, #334f22 49%, #263c1a 51%, #45632d);
    box-shadow: 0 0 0 1px #090b06, 0 0 0 2px #647f45, inset 0 -2px #192410;
    font: 700 12px "Lucida Console", "Courier New", monospace;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 2px #111007;
}

.drevion-public .drevion-rail-cta:visited {
    position: relative;
    z-index: 4;
    width: calc(100% - 22px);
    min-height: 32px;
    margin: 17px auto 0;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dfce97 !important;
    border: 1px solid #17200f;
    background: linear-gradient(#597a3c, #334f22 49%, #263c1a 51%, #45632d);
    box-shadow: 0 0 0 1px #090b06, 0 0 0 2px #647f45, inset 0 -2px #192410;
    font: 700 12px "Lucida Console", "Courier New", monospace;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 2px #111007;
}

.drevion-public .drevion-rail-cta:hover {
    color: #fff0b5 !important;
    filter: brightness(1.08);
}

.drevion-public .drevion-rail-cta:focus-visible {
    color: #fff0b5 !important;
    filter: brightness(1.08);
}

.drevion-public #Themeboxes .drevion-rail-card p {
    margin: 9px 13px;
    color: #bbaa7f;
    font-size: 10px;
    line-height: 1.45;
    text-align: center;
}

.drevion-public #Themeboxes .drevion-rail-card dl {
    margin: 8px 12px 5px;
    text-align: center;
}

.drevion-public #Themeboxes .drevion-rail-card dl div {
    margin-bottom: 7px;
}

.drevion-public #Themeboxes .drevion-rail-card dt {
    color: #bbaa7f;
    font-size: 9px;
    text-transform: uppercase;
}

.drevion-public #Themeboxes .drevion-rail-card dd {
    margin: 2px 0 0;
    color: #d9953f;
    font-size: 15px;
    font-weight: 700;
}

.drevion-public #Themeboxes .drevion-rail-card ul {
    margin: 8px 13px 4px;
    padding: 0 0 0 14px;
    color: #d8c89a;
    font-size: 10px;
    line-height: 22px;
}

.drevion-public #Themeboxes .drevion-rail-card > a:not(.drevion-panel-button) {
    display: block;
    margin: 4px 12px 0;
    color: #d9953f !important;
    font-size: 10px;
    text-align: center;
}

.drevion-public .drevion-panel-button:link {
    width: calc(100% - 28px);
    min-height: 29px;
    margin: 8px auto 0;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e7d7a2 !important;
    border: 1px solid #17200f;
    background: linear-gradient(#597a3c, #334f22 49%, #263c1a 51%, #45632d);
    box-shadow: 0 0 0 1px #090b06, 0 0 0 2px #647f45, inset 0 -2px #192410;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.drevion-public .drevion-panel-button:visited {
    width: calc(100% - 28px);
    min-height: 29px;
    margin: 8px auto 0;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e7d7a2 !important;
    border: 1px solid #17200f;
    background: linear-gradient(#597a3c, #334f22 49%, #263c1a 51%, #45632d);
    box-shadow: 0 0 0 1px #090b06, 0 0 0 2px #647f45, inset 0 -2px #192410;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.drevion-public .drevion-notice {
    margin: 0 0 14px;
    padding: 11px 13px;
    border: 1px solid #6a4927;
    color: #d8c89a;
    background: #171511;
    box-shadow: inset 0 0 9px #050504;
}

.drevion-public .drevion-notice strong {
    display: block;
    margin-bottom: 5px;
    color: #d9953f;
    text-transform: uppercase;
}

.drevion-public .drevion-notice-error {
    border-color: #754436;
    color: #e3b095;
}

.drevion-public .drevion-notice-success {
    border-color: #4f6438;
}

.drevion-public .drevion-empty-state {
    height: 86px !important;
    color: #a99872 !important;
    text-align: center;
    vertical-align: middle;
}

.drevion-public .drevion-box-title {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 12px;
    left: 12px;
    height: 49px;
    margin: 0;
    display: grid;
    place-items: center;
    color: #d7933d !important;
    font-size: 16px !important;
    text-transform: uppercase;
}

.drevion-public .drevion-countdown .BoxContent {
    padding: 12px !important;
    color: #d8c89a;
    text-align: center;
}

.drevion-public #HelperDivContainer {
    position: absolute;
    z-index: 1000;
    width: min(320px, calc(100vw - 24px));
    padding: 12px;
    color: #d8c89a;
    border: 1px solid #090806;
    background: #171511;
    box-shadow: 0 0 0 1px #6a4927, 0 4px 12px #000, inset 0 0 9px #050504;
}

.drevion-public #HelperDivHeadline {
    margin-bottom: 6px;
    color: #d9953f;
    font-weight: 700;
    text-transform: uppercase;
}

.drevion-public .ThreeColumnsForm {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr) auto;
    align-items: center;
    gap: 8px;
}

.drevion-public .ThreeColumnsFormCell {
    min-width: 0;
}

.drevion-public .SubmitButtonRow {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.drevion-public .Steps {
    width: 100%;
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.drevion-public .SingleStepContainer {
    min-width: 0;
    flex: 1 1 120px;
}

.drevion-public .Content .BoxContent p {
    color: inherit;
    font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif !important;
}

.drevion-public .Content .BoxContent li {
    color: inherit;
    font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif !important;
}

.drevion-public .Content .BoxContent td {
    color: inherit;
    font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif !important;
}

.drevion-public .Content .BoxContent th {
    font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif !important;
}

.drevion-public .Content .BoxContent label {
    color: inherit;
    font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif !important;
}

.drevion-public .Content input:not([type="image"]) {
    font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif !important;
}

.drevion-public .Content button {
    font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif !important;
}

.drevion-public .Content .CaptionInnerContainer > .Text {
    position: static;
    width: 100%;
    height: 35px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    color: var(--raster-gold) !important;
    font-family: "Trebuchet MS", Tahoma, sans-serif !important;
    font-size: 11px;
    font-weight: 700 !important;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-shadow: -1px 0 #2a1708,
    1px 0 #2a1708,
    0 -1px #2a1708,
    0 1px #2a1708,
    2px 2px #000 !important;
}

.drevion-public .Content .Box {
    border: 1px solid #030302 !important;
    border-radius: 1px !important;
    background-color: #12100d !important;
    background-image: url("/assets/tibiarl/images/general/box-top.gif"),
    url("/assets/tibiarl/images/general/box-bottom.gif"),
    repeating-conic-gradient(from 45deg, rgba(205, 143, 57, .022) 0 25%, transparent 0 50%),
    repeating-linear-gradient(133deg, transparent 0 30px, rgba(155, 101, 39, .04) 31px, transparent 32px 63px),
    linear-gradient(90deg, #181510, #0e0d0b 48%, #17140f) !important;
    box-shadow: 0 0 0 1px #030201,
    0 0 0 3px #6e491f,
    0 0 0 4px #171008,
    0 4px 0 #050403,
    0 7px 10px rgba(0, 0, 0, .82),
    inset 0 0 0 2px #2f2113,
    inset 0 0 0 3px #090705,
    inset 0 0 18px #050403 !important;
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    isolation: isolate;
    border-width: 4px !important;
    border-color: #0a0805 !important;
    background-position: center top,
    center bottom,
    0 0,
    0 0,
    0 0 !important;
    background-size: 100% 12px,
    100% 12px,
    4px 4px,
    auto,
    auto !important;
    background-repeat: no-repeat,
    no-repeat,
    repeat,
    repeat,
    no-repeat !important;
}

.drevion-public #Themeboxes .Themebox {
    border: 1px solid #030302 !important;
    border-radius: 1px !important;
    background-color: #12100d !important;
    background-image: url("/assets/tibiarl/images/general/box-top.gif"),
    url("/assets/tibiarl/images/general/box-bottom.gif"),
    repeating-conic-gradient(from 45deg, rgba(205, 143, 57, .022) 0 25%, transparent 0 50%),
    repeating-linear-gradient(133deg, transparent 0 30px, rgba(155, 101, 39, .04) 31px, transparent 32px 63px),
    linear-gradient(90deg, #181510, #0e0d0b 48%, #17140f) !important;
    box-shadow: 0 0 0 1px #030201,
    0 0 0 3px #6e491f,
    0 0 0 4px #171008,
    0 4px 0 #050403,
    0 7px 10px rgba(0, 0, 0, .82),
    inset 0 0 0 2px #2f2113,
    inset 0 0 0 3px #090705,
    inset 0 0 18px #050403 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 234px;
    margin: 0;
    flex: 0 0 auto;
    isolation: isolate;
    border-width: 4px !important;
    border-color: #0a0805 !important;
    background-position: center top,
    center bottom,
    0 0,
    0 0,
    0 0 !important;
    background-size: 100% 12px,
    100% 12px,
    4px 4px,
    auto,
    auto !important;
    background-repeat: no-repeat,
    no-repeat,
    repeat,
    repeat,
    no-repeat !important;
}

.drevion-public .Content .BorderTitleText {
    position: relative;
    height: 49px !important;
    flex: 0 0 49px;
    border: 0;
    border-bottom: 2px solid #090604 !important;
    background: repeating-linear-gradient(90deg, rgba(159,101,39,.08) 0 1px, transparent 1px 17px),
    #171613 !important;
    box-shadow: inset 0 -2px #9a6628,
    inset 0 -4px #070503,
    inset 0 2px rgba(243, 184, 77, .16),
    0 3px 0 #080604 !important;
    background-color: #22180d !important;
    background-image: linear-gradient(rgba(74, 43, 16, .62), rgba(15, 12, 8, .72)),
    url("/assets/tibiarl/images/menu/button-background.gif") !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    image-rendering: crisp-edges;
}

.drevion-public .Content .CaptionContainer {
    position: relative;
    width: 100%;
    height: 35px !important;
    min-height: 35px;
    color: #d9953f !important;
    border: 0 !important;
    background: repeating-linear-gradient(90deg, rgba(159,101,39,.07) 0 1px, transparent 1px 17px),
    #1b1915 !important;
    box-shadow: inset 0 -2px #9a6628,
    inset 0 -4px #070503,
    inset 0 2px rgba(243, 184, 77, .16),
    0 3px 0 #080604 !important;
    border-bottom: 2px solid #090604 !important;
    background-color: #22180d !important;
    background-image: linear-gradient(rgba(74, 43, 16, .62), rgba(15, 12, 8, .72)),
    url("/assets/tibiarl/images/menu/button-background.gif") !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    image-rendering: crisp-edges;
}

.drevion-public .Content .NewsHeadlineBackground {
    min-height: 43px;
    padding: 7px 12px 7px 49px;
    color: #dfc98f !important;
    border: 1px solid #090806;
    background: repeating-linear-gradient(90deg, rgba(159,101,39,.06) 0 1px, transparent 1px 17px),
    #1b1915 !important;
    box-shadow: inset 0 -2px #9a6628,
    inset 0 -4px #070503,
    inset 0 2px rgba(243, 184, 77, .16),
    0 3px 0 #080604 !important;
    border-bottom: 2px solid #090604 !important;
    background-color: #22180d !important;
    background-image: linear-gradient(rgba(74, 43, 16, .62), rgba(15, 12, 8, .72)),
    url("/assets/tibiarl/images/menu/button-background.gif") !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    image-rendering: crisp-edges;
}

.drevion-public .Content .TableContainer {
    width: 100%;
    margin: 0 0 14px;
    overflow: hidden;
    border: 4px solid #0a0805 !important;
    border-radius: 0 !important;
    background: #12100c !important;
    box-shadow: 0 0 0 1px #765024,
    0 0 0 3px #171008,
    inset 0 0 0 2px #2d2012,
    inset 0 0 11px #000 !important;
    position: relative;
    isolation: isolate;
}

.drevion-public .Content .drevion-notice {
    position: relative;
    isolation: isolate;
    border: 4px solid #0a0805 !important;
    background: #12100c !important;
    box-shadow: 0 0 0 1px #765024,
    0 0 0 3px #171008,
    inset 0 0 0 2px #2d2012,
    inset 0 0 11px #000 !important;
}

.drevion-public .Content .TableContent {
    width: 100% !important;
    border: 0 !important;
    border-collapse: collapse !important;
    color: #ddcb98 !important;
    font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif !important;
    font-size: 13px !important;
    background: repeating-conic-gradient(from 45deg, rgba(202, 141, 57, .02) 0 25%, transparent 0 50%),
    #11100d !important;
    table-layout: auto;
    background-size: 4px 4px !important;
}

.drevion-public .Content table[style*="border-collapse"] {
    width: 100% !important;
    border: 0 !important;
    border-collapse: collapse !important;
    color: #ddcb98 !important;
    font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif !important;
    font-size: 13px !important;
    background: repeating-conic-gradient(from 45deg, rgba(202, 141, 57, .02) 0 25%, transparent 0 50%),
    #11100d !important;
    table-layout: auto;
    background-size: 4px 4px !important;
}

.drevion-public .Content .TableContent td {
    height: auto;
    min-height: 31px;
    padding: 7px 9px !important;
    border: 0 !important;
    border-right: 1px solid rgba(81,59,34,.23) !important;
    border-bottom: 1px solid rgba(118,80,39,.33) !important;
    color: #d8c89a !important;
    background: transparent !important;
    border-right-color: #3b2917 !important;
    border-bottom-color: #5f4120 !important;
}

.drevion-public .Content table[style*="border-collapse"] td {
    padding: 7px 9px !important;
    border: 0 !important;
    border-right: 1px solid rgba(81,59,34,.23) !important;
    border-bottom: 1px solid rgba(118,80,39,.33) !important;
    color: #d8c89a !important;
    background: transparent !important;
    border-right-color: #3b2917 !important;
    border-bottom-color: #5f4120 !important;
}

.drevion-public .Content input:not([type="image"]):not(.BigButtonText) {
    min-height: 31px;
    max-width: 100%;
    padding: 5px 8px !important;
    color: #e1cd98 !important;
    border: 2px solid transparent !important;
    border-radius: 0 !important;
    font: 12px "Lucida Console", "Courier New", monospace !important;
    background: repeating-conic-gradient(from 45deg, rgba(190, 130, 49, .03) 0 25%, transparent 0 50%),
    #0c0b09 !important;
    box-shadow: inset 2px 2px 0 #030302,
    inset -1px -1px 0 #332515 !important;
    font-size: 14px !important;
    background-size: 4px 4px !important;
}

.drevion-public .Content select {
    min-height: 31px;
    max-width: 100%;
    padding: 5px 8px !important;
    color: #e1cd98 !important;
    border: 2px solid transparent !important;
    border-radius: 0 !important;
    font: 12px "Lucida Console", "Courier New", monospace !important;
    background: repeating-conic-gradient(from 45deg, rgba(190, 130, 49, .03) 0 25%, transparent 0 50%),
    #0c0b09 !important;
    box-shadow: inset 2px 2px 0 #030302,
    inset -1px -1px 0 #332515 !important;
    font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif !important;
    font-size: 14px !important;
    background-size: 4px 4px !important;
}

.drevion-public .Content textarea {
    min-height: 31px;
    max-width: 100%;
    padding: 5px 8px !important;
    color: #e1cd98 !important;
    border: 2px solid transparent !important;
    border-radius: 0 !important;
    font: 12px "Lucida Console", "Courier New", monospace !important;
    background: repeating-conic-gradient(from 45deg, rgba(190, 130, 49, .03) 0 25%, transparent 0 50%),
    #0c0b09 !important;
    box-shadow: inset 2px 2px 0 #030302,
    inset -1px -1px 0 #332515 !important;
    font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif !important;
    font-size: 14px !important;
    background-size: 4px 4px !important;
}

.drevion-public .Content .form-control {
    min-height: 31px;
    max-width: 100%;
    padding: 5px 8px !important;
    color: #e1cd98 !important;
    border: 2px solid transparent !important;
    border-radius: 0 !important;
    font: 12px "Lucida Console", "Courier New", monospace !important;
    background: repeating-conic-gradient(from 45deg, rgba(190, 130, 49, .03) 0 25%, transparent 0 50%),
    #0c0b09 !important;
    box-shadow: inset 2px 2px 0 #030302,
    inset -1px -1px 0 #332515 !important;
    font-size: 14px !important;
    background-size: 4px 4px !important;
}

.drevion-public .Content input:not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.BigButtonText):focus:not(:hover),
.drevion-public .Content select:focus:not(:hover),
.drevion-public .Content textarea:focus:not(:hover),
.drevion-public .Content .form-control:focus:not(:hover) {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: inset 2px 2px 0 #030302,
    inset -1px -1px 0 #332515 !important;
}

.drevion-public .Content input:not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.BigButtonText):hover,
.drevion-public .Content select:hover,
.drevion-public .Content textarea:hover,
.drevion-public .Content .form-control:hover {
    border-color: #9a6b32 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #6d4b26,
    inset 2px 2px 0 #030302,
    inset -1px -1px 0 #332515 !important;
}

.drevion-public .Content .drevion-create-account-form .TableContainer {
    margin-bottom: 12px;
}

.drevion-public .Content .drevion-create-account-form .InnerTableContainer {
    padding: 12px !important;
    overflow: visible;
}

.drevion-public .Content .drevion-create-account-form .InnerTableContainer > table,
.drevion-public .Content .drevion-create-account-form .InnerTableContainer > table > tbody {
    width: 100% !important;
    display: block;
}

.drevion-public .Content .drevion-create-account-form .InnerTableContainer > table > tbody {
    display: grid;
    gap: 12px;
}

.drevion-public .Content .drevion-create-account-form .InnerTableContainer > table > tbody > tr,
.drevion-public .Content .drevion-create-account-form .InnerTableContainer > table > tbody > tr > td,
.drevion-public .Content .drevion-create-account-form .TableContentContainer {
    width: 100% !important;
    display: block;
}

.drevion-public .Content .drevion-create-account-form .TableContentContainer {
    padding: 3px !important;
    overflow: visible;
    border: 1px solid #7b5226 !important;
    background: #080705 !important;
    box-shadow: 0 0 0 2px #0b0805,
    0 0 0 3px #382512,
    inset 0 0 0 1px #2b1d10 !important;
}

.drevion-public .Content .drevion-create-account-form .TableContent {
    display: table;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: repeating-conic-gradient(from 45deg, rgba(202, 141, 57, .018) 0 25%, transparent 0 50%),
    linear-gradient(90deg, #12100d, #0c0b09 52%, #14110d) !important;
    background-size: 4px 4px, auto !important;
}

.drevion-public .Content .drevion-create-account-form .TableContent tr,
.drevion-public .Content .drevion-create-account-form .TableContent tr:nth-child(even),
.drevion-public .Content .drevion-create-account-form .TableContent tr:hover {
    background: transparent !important;
}

.drevion-public .Content .drevion-create-account-form .TableContent td,
.drevion-public .Content .drevion-create-account-form .TableContent tr:nth-child(even) td,
.drevion-public .Content .drevion-create-account-form .TableContent tr:hover td {
    padding: 8px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(115, 77, 37, .36) !important;
    color: #ddcb98 !important;
    background: transparent !important;
    vertical-align: middle !important;
}

.drevion-public .Content .drevion-create-account-form .TableContent tr:last-child > td {
    border-bottom: 0 !important;
}

.drevion-public .Content .drevion-create-account-form .TableContent [class^="LabelV"] {
    width: 168px !important;
    color: #d9953f !important;
    font-size: 11px !important;
    line-height: 1.25;
    letter-spacing: .25px;
    text-transform: uppercase;
    text-shadow: 1px 1px #000;
}

.drevion-public .Content .drevion-create-account-form .TableContent td:nth-child(2) {
    width: auto !important;
}

.drevion-public .Content .drevion-create-account-form .TableContent td > div[style*="display: flex"] {
    align-items: center;
    gap: 8px;
}

.drevion-public .Content .drevion-create-account-form input:not([type="image"]):not([type="checkbox"]):not([type="radio"]),
.drevion-public .Content .drevion-create-account-form select {
    width: min(100%, 258px) !important;
    min-height: 34px;
    color: #ead9aa !important;
    border: 2px solid transparent !important;
    outline: none;
    background: repeating-conic-gradient(from 45deg, rgba(204, 146, 61, .035) 0 25%, transparent 0 50%),
    #0b0a08 !important;
    box-shadow: inset 2px 2px 0 #020201,
    inset -1px -1px 0 #352516 !important;
    background-size: 4px 4px !important;
}

.drevion-public .Content .drevion-create-account-form input:not([type="image"]):not([type="checkbox"]):not([type="radio"]):hover,
.drevion-public .Content .drevion-create-account-form select:hover {
    outline: 1px solid #a06d31 !important;
    background-color: #11100c !important;
}

.drevion-public .Content .drevion-create-account-form input:not([type="image"]):not([type="checkbox"]):not([type="radio"]):focus:not(:hover),
.drevion-public .Content .drevion-create-account-form select:focus:not(:hover) {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: inset 2px 2px 0 #020201,
    inset -1px -1px 0 #352516 !important;
}

.drevion-public .Content .drevion-create-account-form .InputIndicator {
    flex: 0 0 14px;
    margin: 0 !important;
    position: static !important;
    background-position: center;
    background-repeat: no-repeat;
}

.drevion-public .Content .drevion-create-account-form small {
    display: inline-block;
    margin-top: 5px;
    color: #9f906c;
    font-size: 10px;
}

.drevion-public .Content .drevion-create-account-form small a {
    color: #d8a24c !important;
}

.drevion-public .Content .drevion-create-account-form .FormFieldError {
    min-height: 16px !important;
    color: #ef795d !important;
    font-size: 10px;
    line-height: 16px;
}

.drevion-public .Content .drevion-create-account-form .TableContent tr:has(.FormFieldError[style*="visibility: hidden"]) {
    display: none;
}

.drevion-public .Content .drevion-create-account-form .TableContent tr:has(.FormFieldError[style*="visibility: visible"]) {
    display: table-row;
}

.drevion-public .Content .drevion-create-account-form .TableContent tr:has(.FormFieldError[style*="visibility: visible"]) > td:first-child {
    display: table-cell;
}

.drevion-public .Content .drevion-create-account-form .TableContent tr:has(.FormFieldError[style*="visibility: visible"]) > td:last-child {
    width: auto !important;
    display: table-cell;
    padding: 0 12px 8px !important;
    border-bottom: 1px solid rgba(115, 77, 37, .36) !important;
}

.drevion-public .Content .drevion-create-account-form .TableContent tr:has(.FormFieldError[style*="visibility: visible"]) .FormFieldError {
    display: inline-block !important;
    overflow-wrap: anywhere;
}

.drevion-public .Content .drevion-create-account-form .PWStrengthIndicator {
    width: min(100%, 258px) !important;
    height: 18px;
    margin-top: 5px;
    border: 1px solid #090704;
    outline: 1px solid #60401f;
    color: #f1dfac;
    font: 700 10px/16px "Drevion Pixel Text", "Lucida Console", monospace;
    text-transform: uppercase;
    text-shadow: 1px 1px #000;
}

.drevion-public .Content .drevion-create-account-form .PWStrengthLevel1 {
    background: #71372b;
}

.drevion-public .Content .drevion-create-account-form .PWStrengthLevel2 {
    background: #81501f;
}

.drevion-public .Content .drevion-create-account-form .PWStrengthLevel3 {
    background: #6d6824;
}

.drevion-public .Content .drevion-create-account-form .PWStrengthLevel4 {
    background: #365f2d;
}

.drevion-public .Content .drevion-create-account-form #flagContainer {
    align-items: center;
    gap: 5px !important;
}

.drevion-public .Content .drevion-create-account-form #flagContainer img {
    padding: 1px;
    border: 1px solid #5f4120;
    background: #090806;
    image-rendering: pixelated;
}

.drevion-public .Content .drevion-create-account-form .TableContent td > table,
.drevion-public .Content .drevion-create-account-form .TableContent td > table tbody,
.drevion-public .Content .drevion-create-account-form .TableContent td > table tr,
.drevion-public .Content .drevion-create-account-form .TableContent td > table td {
    width: auto !important;
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.drevion-public .Content .drevion-create-account-form .OptionContainer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 30px !important;
}

.drevion-public .Content .drevion-create-account-form input[type="checkbox"],
.drevion-public .Content .drevion-create-account-form input[type="radio"] {
    width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0 7px 0 0 !important;
    padding: 0 !important;
    appearance: none;
    border: 2px solid #090704 !important;
    border-radius: 0 !important;
    outline: 1px solid #765025;
    background: #0b0a08 !important;
    box-shadow: inset 1px 1px 0 #020201,
    inset -1px -1px 0 #3b2a18 !important;
    vertical-align: middle;
}

.drevion-public .Content input[type="checkbox"],
.drevion-public .Content input[type="radio"] {
    outline: none !important;
}

.drevion-public .Content .drevion-create-account-form input[type="checkbox"]:checked,
.drevion-public .Content .drevion-create-account-form input[type="radio"]:checked {
    background: #7e9a4b !important;
    box-shadow: inset 0 0 0 3px #17200f !important;
}

.drevion-public .Content .drevion-create-account-form .InnerTableContainer > table > tbody > tr:last-child .TableContent tr:first-child td {
    color: #d9953f !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .25px;
    background: rgba(97, 65, 31, .18) !important;
}

.drevion-public .Content .drevion-create-account-form .InnerTableContainer > table > tbody > tr:last-child .TableContent tr:not(:first-child) td {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

.drevion-public .Content .drevion-create-account-form > center {
    display: flex;
    justify-content: center;
    padding: 5px 0 12px;
}

.drevion-public .Content .BigButton {
    position: relative;
    width: auto !important;
    min-width: var(--drevion-action-min-width);
    height: var(--drevion-action-height) !important;
    min-height: var(--drevion-action-height);
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    border: 2px solid #0a0b06 !important;
    border-radius: 0 !important;
    color: #e7d7a2 !important;
    background: repeating-conic-gradient(from 45deg, rgba(234, 255, 181, .035) 0 25%, transparent 0 50%),
    linear-gradient(#658b43 0 43%, #2e4a1e 44% 54%, #1c3013 55%, #47662d) !important;
    box-shadow: 0 0 0 1px #759351,
    0 0 0 3px #0a0805,
    inset 2px 2px 0 rgba(204, 232, 158, .2),
    inset -2px -3px 0 #17250f,
    0 3px 0 #030302 !important;
    background-size: 4px 4px, auto !important;
    image-rendering: pixelated;
    transition: border-color 90ms steps(2, end), box-shadow 90ms steps(2, end), transform 90ms steps(2, end);
}

.drevion-public .Content .BigButton:hover,
.drevion-public .Content .BigButton:focus-within {
    border-color: #90ad65 !important;
    background: repeating-conic-gradient(from 45deg, rgba(234, 255, 181, .055) 0 25%, transparent 0 50%),
    linear-gradient(#789d52 0 43%, #3b5928 44% 54%, #263b1b 55%, #58763b) !important;
    box-shadow: 0 0 0 1px #9bb873,
    0 0 0 3px #0a0805,
    inset 2px 2px 0 rgba(225, 245, 188, .26),
    inset -2px -3px 0 #1b2c12,
    0 3px 0 #030302,
    0 0 8px rgba(126, 161, 79, .22) !important;
    transform: translateY(-1px);
}

.drevion-public .Content .BigButton:active {
    transform: translateY(1px);
}

.drevion-public .Content .BigButton:has(.BigButtonText:disabled) {
    opacity: .55;
    pointer-events: none;
    filter: grayscale(.45);
    transform: none;
}

.drevion-public .Content .BigButtonText {
    position: relative !important;
    z-index: 3;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 29px;
    margin: 0 !important;
    padding: 4px var(--drevion-action-inline-padding) !important;
    color: #f1dfa8 !important;
    border: 0 !important;
    font: 700 11px "Lucida Console", "Courier New", monospace !important;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: -1px 0 #141006, 1px 0 #141006, 0 -1px #141006, 0 1px #141006, 2px 2px #000 !important;
    background: transparent !important;
    font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.drevion-public .Content .BigButtonText:focus-visible {
    outline: 1px solid #f3d68d;
    outline-offset: -4px;
}

.drevion-public .Content .btn {
    position: relative !important;
    width: 100% !important;
    min-width: 112px;
    height: 100% !important;
    min-height: 29px;
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #0a0b06 !important;
    border-radius: 0 !important;
    color: #f1dfa8 !important;
    background: repeating-conic-gradient(from 45deg, rgba(234, 255, 181, .035) 0 25%, transparent 0 50%),
    linear-gradient(#658b43 0 43%, #2e4a1e 44% 54%, #1c3013 55%, #47662d) !important;
    box-shadow: 0 0 0 1px #759351,
    0 0 0 3px #0a0805,
    inset 2px 2px 0 rgba(204, 232, 158, .2),
    inset -2px -3px 0 #17250f,
    0 3px 0 #030302 !important;
    z-index: 3;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 4px 12px !important;
    font: 700 11px "Lucida Console", "Courier New", monospace !important;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: -1px 0 #141006, 1px 0 #141006, 0 -1px #141006, 0 1px #141006, 2px 2px #000 !important;
    font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif !important;
    background-size: 4px 4px, auto !important;
    image-rendering: pixelated;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.drevion-public .languageFlag {
    border: 2px solid #080604 !important;
    background: #18130c !important;
    box-shadow: 0 0 0 1px #735028, inset 1px 1px #312416 !important;
}

body.drevion-public .Content .CaptionInnerContainer {
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    text-shadow: 1px 1px #000 !important;
}

body.drevion-public #Themeboxes .drevion-rail-card li {
    font-family: "Trebuchet MS", Tahoma, sans-serif !important;
    font-size: 13px !important;
    font-kerning: none;
    font-variant-ligatures: none;
    font-feature-settings: "kern" 0, "liga" 0;
    letter-spacing: 0 !important;
    text-rendering: optimizeSpeed;
    text-shadow: 1px 1px #000 !important;
}

body.drevion-public #Themeboxes .drevion-top-players-list li {
    font-family: "Trebuchet MS", Tahoma, sans-serif !important;
    font-size: 13px !important;
    font-kerning: none;
    font-variant-ligatures: none;
    font-feature-settings: "kern" 0, "liga" 0;
    letter-spacing: 0 !important;
    text-rendering: optimizeSpeed;
    text-shadow: 1px 1px #000 !important;
}

body.drevion-public #Themeboxes .drevion-top-players-list li strong {
    font-family: "Trebuchet MS", Tahoma, sans-serif !important;
    font-size: 13px !important;
    font-kerning: none;
    font-variant-ligatures: none;
    font-feature-settings: "kern" 0, "liga" 0;
    letter-spacing: 0 !important;
    text-rendering: optimizeSpeed;
    text-shadow: 1px 1px #000 !important;
}

.drevion-public #Themeboxes .drevion-rail-card h2 img {
    position: absolute;
    top: 6px;
    left: 12px;
    width: 30px;
    height: 30px;
    object-fit: contain;
    opacity: 0 !important;
}

body.drevion-public {
    min-width: 0 !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 6px 16px 5px !important;
    color: #d9c898 !important;
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: none;
    --raster-ink: #080705;
    --raster-deep: #100e0b;
    --raster-stone: #1b1813;
    --raster-bronze: #765024;
    --raster-gold: #c68a38;
    --raster-gold-lit: #f0bd63;
    --raster-paper: #e5d19b;
    font-smooth: never;
    font-kerning: none;
    font-synthesis: none;
    font-variant-ligatures: none;
    font-feature-settings: "kern" 0, "liga" 0;
    -moz-osx-font-smoothing: grayscale;
}

body.drevion-public *:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-kerning: none;
    font-synthesis: none;
    font-variant-ligatures: none;
    font-feature-settings: "kern" 0, "liga" 0;
    text-rendering: optimizeSpeed;
}

.drevion-public :where(
  a,
  p,
  li,
  span,
  strong,
  small,
  label,
  legend,
  dt,
  dd,
  th,
  td,
  caption,
  input,
  select,
  textarea,
  button
) {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-kerning: none;
    font-variant-ligatures: none;
    font-feature-settings: "kern" 0, "liga" 0;
}

.drevion-public .drevion-content-title {
    position: absolute;
    z-index: 12;
    top: 0;
    right: 112px;
    left: 112px;
    height: 49px;
    margin: 0;
    display: grid;
    place-items: center;
    color: var(--raster-gold) !important;
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1;
    letter-spacing: 1px !important;
    text-align: center;
    text-transform: uppercase;
    text-shadow: -1px 0 #281507,
    1px 0 #281507,
    0 -1px #281507,
    0 1px #281507,
    2px 2px #000 !important;
    pointer-events: none;
}

.drevion-public .Content .NewsHeadlineText {
    position: static !important;
    display: inline;
    color: #e0a44d !important;
    font-family: "Lucida Console", "Courier New", monospace !important;
    line-height: 27px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
    text-shadow: -1px 0 #281507,
    1px 0 #281507,
    0 -1px #281507,
    0 1px #281507,
    2px 2px #000 !important;
}

.drevion-public .Content {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 12px;
    letter-spacing: 0;
}

.drevion-public .Content .BoxContent {
    padding: 18px 20px !important;
    color: #dfcd9a !important;
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 14px !important;
    background-color: #100f0c !important;
    background-image: repeating-conic-gradient(from 45deg, rgba(203, 142, 56, .018) 0 25%, transparent 0 50%),
    repeating-linear-gradient(135deg, transparent 0 47px, rgba(147, 94, 35, .035) 48px, transparent 49px 97px),
    linear-gradient(90deg, #17140f, #0e0d0b 48%, #15120e) !important;
    line-height: 1.42;
    background-size: 4px 4px, auto, auto !important;
    letter-spacing: 0;
}

.drevion-public .Content table {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 12px;
    letter-spacing: 0;
}

.drevion-public .Content form {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 12px;
    letter-spacing: 0;
}

.drevion-public .Content th {
    font-size: 10px !important;
    letter-spacing: .5px !important;
    text-shadow: 1px 1px #000 !important;
}

.drevion-public .Content .CaptionInnerContainer {
    position: relative;
    width: 100%;
    height: 35px !important;
    min-height: 35px;
    color: #d9953f !important;
    border: 0 !important;
    background: repeating-linear-gradient(90deg, rgba(159,101,39,.07) 0 1px, transparent 1px 17px),
    #1b1915 !important;
    box-shadow: inset 0 -2px #9a6628,
    inset 0 -4px #070503,
    inset 0 2px rgba(243, 184, 77, .16),
    0 3px 0 #080604 !important;
    border-bottom: 2px solid #090604 !important;
    background-color: #22180d !important;
    background-image: linear-gradient(rgba(74, 43, 16, .62), rgba(15, 12, 8, .72)),
    url("/assets/tibiarl/images/menu/button-background.gif") !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    image-rendering: crisp-edges;
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase;
    text-shadow: 1px 1px #000 !important;
    font-size: 10px !important;
}

.drevion-public :where(input, select, textarea, button) {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    text-shadow: 1px 1px #111007 !important;
}

.drevion-public .drevion-panel-button {
    width: calc(100% - 28px);
    min-height: 29px;
    margin: 8px auto 0;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f1dfa8 !important;
    border: 2px solid #0a0b06 !important;
    background: repeating-conic-gradient(from 45deg, rgba(234, 255, 181, .035) 0 25%, transparent 0 50%),
    linear-gradient(#658b43 0 43%, #2e4a1e 44% 54%, #1c3013 55%, #47662d) !important;
    box-shadow: 0 0 0 1px #759351,
    0 0 0 3px #0a0805,
    inset 2px 2px 0 rgba(204, 232, 158, .2),
    inset -2px -3px 0 #17250f,
    0 3px 0 #030302 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    background-size: 4px 4px, auto !important;
    image-rendering: pixelated;
    font-family: "Lucida Console", "Courier New", monospace !important;
    text-shadow: 1px 1px #111007 !important;
    letter-spacing: 0 !important;
}

.drevion-public .drevion-rail-cta {
    position: relative;
    z-index: 4;
    width: calc(100% - 22px);
    min-height: 32px;
    margin: 17px auto 0;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f1dfa8 !important;
    border: 2px solid #0a0b06 !important;
    background: repeating-conic-gradient(from 45deg, rgba(234, 255, 181, .035) 0 25%, transparent 0 50%),
    linear-gradient(#658b43 0 43%, #2e4a1e 44% 54%, #1c3013 55%, #47662d) !important;
    box-shadow: 0 0 0 1px #759351,
    0 0 0 3px #0a0805,
    inset 2px 2px 0 rgba(204, 232, 158, .2),
    inset -2px -3px 0 #17250f,
    0 3px 0 #030302 !important;
    font: 700 12px "Lucida Console", "Courier New", monospace;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px #111007 !important;
    background-size: 4px 4px, auto !important;
    image-rendering: pixelated;
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.drevion-public .drevion-ranking-link {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    text-shadow: 1px 1px #111007 !important;
}

.drevion-public .BigButtonText {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    text-shadow: 1px 1px #111007 !important;
}

.drevion-public #MenuColumn > #Menu .MenuButton {
    height: 56px !important;
    border: 0;
    border-bottom: 1px solid #050403 !important;
    background: repeating-linear-gradient(90deg, rgba(159,101,39,.08) 0 1px, transparent 1px 17px),
    #171613 !important;
    box-shadow: inset 0 -1px #775129,
    inset 0 -2px #050403,
    inset 0 1px rgba(236, 177, 77, .1),
    0 2px 0 #090806 !important;
    background-color: #171613 !important;
    background-image: repeating-linear-gradient(90deg, rgba(159, 101, 39, .055) 0 1px, transparent 1px 17px),
    linear-gradient(90deg, #191815, #11110f 48%, #181714) !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    image-rendering: crisp-edges;
}

.drevion-public #MenuColumn > #Menu .menuitem {
    border: 1px solid #030302 !important;
    border-radius: 1px !important;
    background-color: #11110f !important;
    background-image: url("/assets/tibiarl/images/general/box-top.gif"),
    url("/assets/tibiarl/images/general/box-bottom.gif"),
    repeating-conic-gradient(from 45deg, rgba(205, 143, 57, .022) 0 25%, transparent 0 50%),
    repeating-linear-gradient(133deg, transparent 0 30px, rgba(155, 101, 39, .04) 31px, transparent 32px 63px),
    linear-gradient(90deg, #181510, #0e0d0b 48%, #17140f) !important;
    box-shadow: 0 0 0 1px #030201,
    0 0 0 3px #6e491f,
    0 0 0 4px #171008,
    0 4px 0 #050403,
    0 7px 10px rgba(0, 0, 0, .82),
    inset 0 0 0 2px #2f2113,
    inset 0 0 0 3px #090705,
    inset 0 0 18px #050403 !important;
    flex: 0 0 auto;
    margin: 0 !important;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    border-width: 4px !important;
    border-color: #0a0805 !important;
    background-position: center top,
    center bottom,
    0 0,
    0 0,
    0 0 !important;
    background-size: 100% 12px,
    100% 12px,
    4px 4px,
    auto,
    auto !important;
    background-repeat: no-repeat,
    no-repeat,
    repeat,
    repeat,
    no-repeat !important;
    color: #dfc98f !important;
}

.drevion-public #Themeboxes .drevion-rail-card {
    min-height: 0;
    padding-bottom: 10px;
    color: #dfc98f !important;
    background: repeating-linear-gradient(133deg, transparent 0 30px, rgba(118,77,32,.035) 31px, transparent 32px 63px),
    linear-gradient(90deg, #151412, #10100e 48%, #151411) !important;
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-shadow: 1px 1px #000 !important;
    background-color: #11110f !important;
}

.drevion-public #Themeboxes .drevion-rail-card h2 {
    min-height: 48px !important;
    margin: 0;
    padding: 5px 10px 4px 52px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d7933d !important;
    border-bottom: 1px solid #050403 !important;
    font: 700 17px "Lucida Console", "Courier New", monospace;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: -1px 0 #281507,
    1px 0 #281507,
    0 -1px #281507,
    0 1px #281507,
    2px 2px #000 !important;
    background: repeating-linear-gradient(90deg, rgba(159,101,39,.08) 0 1px, transparent 1px 17px),
    #171613;
    box-shadow: inset 0 -1px #775129,
    inset 0 -2px #050403,
    inset 0 1px rgba(236, 177, 77, .1),
    0 2px 0 #090806 !important;
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-weight: 700 !important;
    background-color: #171613 !important;
    background-image: repeating-linear-gradient(90deg, rgba(159, 101, 39, .055) 0 1px, transparent 1px 17px),
    linear-gradient(90deg, #191815, #11110f 48%, #181714) !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    image-rendering: crisp-edges;
    font-size: 18px !important;
    letter-spacing: .5px !important;
    position: relative;
    height: 48px !important;
}

.drevion-public #Themeboxes .drevion-rail-card a {
    color: #dfc98f !important;
}

.drevion-public #Themeboxes .drevion-rail-card a:hover {
    color: #f2d99a !important;
}

.drevion-public #Themeboxes .drevion-rail-card a:focus-visible {
    color: #f2d99a !important;
}

body.drevion-public .drevion-content-title {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
}

body.drevion-public #Themeboxes .drevion-rail-card h2 {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
}

body.drevion-public .Content {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
}

body.drevion-public .Content .BoxContent {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
}

body.drevion-public .Content .BoxContent p {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
}

body.drevion-public .Content .BoxContent li {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
}

/* Keep live content clear of the decorative frame on every public panel. */
.drevion-public .Content .TableContainer {
    box-sizing: border-box;
    padding: 8px 11px 11px;
}

.drevion-public .Content .drevion-notice {
    box-sizing: border-box;
    padding: 12px 14px;
}

/* Account login: remove table grid lines and keep both actions identical. */
.drevion-public .Content .drevion-login-panel .TableContent,
.drevion-public .Content .drevion-login-panel .TableContent tr,
.drevion-public .Content .drevion-login-panel .TableContent td,
.drevion-public .Content .drevion-login-panel .TableContent td > table,
.drevion-public .Content .drevion-login-panel .TableContent td > table tr,
.drevion-public .Content .drevion-login-panel .TableContent td > table td {
    border: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
}

.drevion-public .Content .drevion-login-panel .TableContent tr:hover,
.drevion-public .Content .drevion-login-panel .TableContent tr:hover td,
.drevion-public .Content .drevion-login-panel .TableContent td > table tr:hover,
.drevion-public .Content .drevion-login-panel .TableContent td > table tr:hover td,
.drevion-public .Content .drevion-new-player-panel .TableContent tr:hover,
.drevion-public .Content .drevion-new-player-panel .TableContent tr:hover td {
    background-color: transparent !important;
    background-image: none !important;
}

.drevion-public .Content .drevion-login-panel input[type="text"],
.drevion-public .Content .drevion-login-panel input[type="password"] {
    transition: border-color 90ms steps(2, end), box-shadow 90ms steps(2, end), background-color 90ms steps(2, end);
}

.drevion-public .Content .drevion-login-panel input[type="text"]:hover,
.drevion-public .Content .drevion-login-panel input[type="password"]:hover {
    border-color: #9a6b32 !important;
    background-color: #100e0b !important;
    box-shadow: 0 0 0 1px #a8793c,
    inset 2px 2px 0 #030302,
    inset -1px -1px 0 #40301b !important;
}

.drevion-public .Content .drevion-login-panel input[type="text"]:focus:not(:hover),
.drevion-public .Content .drevion-login-panel input[type="password"]:focus:not(:hover) {
    border-color: transparent !important;
    background-color: #100e0b !important;
    box-shadow: inset 2px 2px 0 #030302,
    inset -1px -1px 0 #332515 !important;
    outline: 0;
}

.drevion-public .Content .drevion-login-layout > tbody > tr > td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.drevion-public .Content .drevion-login-layout > tbody > tr > td > table {
    width: min(100%, 430px) !important;
    flex: 1 1 auto;
}

.drevion-public .Content .drevion-login-actions {
    width: 126px;
    margin: 0 !important;
    display: grid;
    flex: 0 0 126px;
    gap: 8px;
    float: none !important;
}

.drevion-public .Content .drevion-login-spacer {
    display: none;
}

/* New-player CTA: center it vertically and render its label in white. */
.drevion-public .Content .drevion-new-player-layout > tbody > tr > td {
    min-height: 130px;
    display: flex;
    align-items: stretch;
    gap: 24px;
}

.drevion-public .Content .drevion-new-player-panel .TableContentContainer,
.drevion-public .Content .drevion-new-player-panel .TableContent {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.drevion-public .Content .drevion-new-player-panel .TableContent {
    table-layout: fixed !important;
}

.drevion-public .Content .drevion-new-player-panel p {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.drevion-public .Content #LoginCreateAccountBox {
    min-width: 0;
    flex: 1 1 auto;
    order: 1;
}

.drevion-public .Content .drevion-new-player-copy {
    margin-left: 10px;
}

.drevion-public .Content .drevion-create-account-cta {
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 0 0 126px;
    float: none !important;
    order: 2;
    transform: translateY(.5px);
}

.drevion-public .Content .drevion-create-account-cta .BigButton {
    width: 126px !important;
    min-width: 126px;
}

body.drevion-public .Content table {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 10px !important;
    line-height: normal !important;
}

body.drevion-public .Content table th {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 10px !important;
    line-height: normal !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    text-shadow: 1px 1px #000 !important;
}

body.drevion-public .Content table td {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 10px !important;
    line-height: normal !important;
}

body.drevion-public #Themeboxes .drevion-panel-button {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: 0 !important;
}

body.drevion-public #Themeboxes .drevion-ranking-link {
    font-family: "Lucida Console", "Courier New", monospace !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: 0 !important;
}

/* Library filters: retain the shared panel treatment without allowing fixed controls to escape it. */
.drevion-public .Content .drevion-spell-search .InnerTableContainer,
.drevion-public .Content .drevion-spell-search .TableContentContainer {
    overflow: hidden;
}

.drevion-public .Content .drevion-spell-search .TableContent {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.drevion-public .Content .drevion-spell-search .TableContent td {
    width: auto !important;
    min-width: 0;
    padding: 7px 8px !important;
    vertical-align: middle;
}

.drevion-public .Content .drevion-spell-search .TableContent tr:first-child td {
    color: #d9953f !important;
    font-size: 10px !important;
    text-transform: uppercase;
}

.drevion-public .Content .drevion-spell-search :is(input[type="text"], select) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0 !important;
}

.drevion-public .Content .drevion-spell-search #search_spell {
    min-height: 31px;
}

.drevion-public .Content .drevion-spell-search .TableContent td > div {
    max-width: 100%;
}

.drevion-public .Content .drevion-spell-search .TableContent td > div > div {
    width: 100%;
    max-width: 100%;
}

/* Item categories use the same dark, pixel-art cards as the rest of the public shell. */
.drevion-public .Content .drevion-item-category-body {
    width: 100%;
    max-width: 100%;
}

.drevion-public .Content .drevion-item-category-grid {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: separate !important;
    border-spacing: 5px !important;
}

.drevion-public .Content .drevion-item-category-grid td {
    width: 20%;
    min-width: 0;
    height: 106px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    vertical-align: top;
}

.drevion-public .Content .drevion-item-category-link {
    height: 100%;
    min-width: 0;
    display: block;
    color: #ead5a1 !important;
    text-decoration: none !important;
}

.drevion-public .Content .drevion-item-category-card {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 9px 6px 7px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    border: 1px solid #0a0805;
    outline: 1px solid #745026;
    background: repeating-conic-gradient(from 45deg, rgba(202, 141, 57, .025) 0 25%, transparent 0 50%),
        linear-gradient(145deg, #1b1812, #100f0c 55%, #17130e);
    background-size: 4px 4px, auto;
    box-shadow: inset 1px 1px 0 rgba(234, 199, 131, .08), inset -1px -1px 0 #030201, 0 2px 3px rgba(0, 0, 0, .55);
    transition: border-color 90ms steps(2, end), background-color 90ms steps(2, end), transform 90ms steps(2, end);
}

.drevion-public .Content .drevion-item-category-card img {
    max-width: 48px;
    max-height: 48px;
    image-rendering: pixelated;
}

.drevion-public .Content .drevion-item-category-label {
    width: 100%;
    overflow: hidden;
    color: #e1c780;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 1px 1px #000;
    white-space: nowrap;
}

.drevion-public .Content .drevion-item-category-link:hover .drevion-item-category-card,
.drevion-public .Content .drevion-item-category-link:focus-visible .drevion-item-category-card {
    border-color: #b5803c;
    background-color: #211b12;
    transform: translateY(-1px);
}

.drevion-public .Content .drevion-item-category-link:focus-visible {
    outline: 1px solid #d3a354;
    outline-offset: 2px;
}

/* Golden account: legacy panel markup, rendered with the shared public component language. */
.drevion-public .Content .drevion-golden-features {
    color: #dfcca0;
}

.drevion-public .Content .drevion-golden-features > h2 {
    margin: 0 0 12px;
    font-size: 16px;
    text-transform: uppercase;
}

.drevion-public .Content .drevion-golden-features > p {
    margin: 0;
    line-height: 1.6;
}

.drevion-public .Content .drevion-golden-features-panel {
    margin: 18px 0 !important;
    overflow: hidden;
    border: 1px solid #090704;
    outline: 1px solid #775126;
    background: #11100d;
    box-shadow: inset 0 0 0 1px #352516, inset 0 0 16px #050403, 0 2px 5px rgba(0, 0, 0, .72);
}

.drevion-public .Content .drevion-golden-features-panel-title {
    min-height: 35px;
    padding: 10px 12px;
    color: #dda64f;
    border-bottom: 1px solid #6c4822;
    background: repeating-linear-gradient(90deg, rgba(177, 114, 39, .06) 0 1px, transparent 1px 19px), linear-gradient(90deg, #2b2117, #16130f 52%, #2b2117);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .35px;
    text-shadow: 1px 1px #000;
    text-transform: uppercase;
}

.drevion-public .Content .drevion-golden-features-table {
    width: 100%;
    border-collapse: collapse;
}

.drevion-public .Content .drevion-golden-features-table td {
    padding: 11px 12px !important;
    color: #dfcca0;
    border: 0 !important;
    border-bottom: 1px solid rgba(115, 77, 37, .48) !important;
    background: transparent !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}

.drevion-public .Content .drevion-golden-features-table tr:nth-child(even) td {
    background: rgba(101, 71, 35, .09) !important;
}

.drevion-public .Content .drevion-golden-features-table tr:hover td {
    background: rgba(171, 112, 45, .10) !important;
}

.drevion-public .Content .drevion-golden-features-table td:first-child {
    color: #d9953f;
    font-weight: 700;
    text-transform: uppercase;
}

.drevion-public .Content .drevion-golden-features-table tr:last-child td {
    border-bottom: 0 !important;
    color: #e7d3a0;
}

.drevion-public .Content .drevion-golden-features-action {
    display: flex;
    justify-content: center;
}

.drevion-public .Content .drevion-golden-features-action .col-3 {
    width: auto;
}

.drevion-public .Content .drevion-golden-features-cta {
    width: 150px;
    min-height: 34px;
    display: grid;
    place-items: center;
    color: #fff !important;
    border: 1px solid #0a0805;
    outline: 1px solid #638142;
    background: linear-gradient(#769d50, #3c5b29 52%, #263b1b);
    box-shadow: inset 1px 1px rgba(225, 245, 188, .24), inset -1px -2px #1b2c12, 0 2px #030302;
    font-size: 11px !important;
    font-weight: 700;
    text-decoration: none !important;
    text-shadow: 1px 1px #000;
    text-transform: uppercase;
}

.drevion-public .Content .drevion-golden-features-cta:hover,
.drevion-public .Content .drevion-golden-features-cta:focus-visible {
    border-color: #a9c67d;
    outline-color: #a9c67d;
    background: linear-gradient(#8cb95e, #4f7434 52%, #304b20);
}

@media (max-width: 800px) {
    #LeftArtwork {
        position: relative;
        top: auto;
        left: auto;
        height: 102px;
        margin: 0 0 var(--drevion-panel-gap);
        border: 2px solid #080706;
        border-radius: 4px;
        background: linear-gradient(#1b1a17, #11110f 48%, #171612);
        box-shadow: 0 0 0 1px #9a682d,
      0 0 0 3px #21160d,
      inset 0 0 0 2px #382719;
    }

    #LeftArtwork #TibiaLogoArtworkTop {
        max-width: 88vw;
        height: 82px;
    }

    #Content {
        display: block;
        padding-right: 0;
    }

    #Themeboxes {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .Content .BoxContent {
        overflow-x: auto;
        padding: 12px !important;
    }

    #siteLanguages {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        margin: 0 !important;
    }

}

@media (max-width: 1120px) and (min-width: 901px) {
    .drevion-public #Themeboxes .Themebox {
        width: 212px;
    }

}

@media (max-width: 900px) {
    body.drevion-public {
        padding: 8px 10px 5px !important;
        background-attachment: scroll !important;
    }

    .drevion-public #Themeboxes {
        padding: 5px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .drevion-public #Themeboxes .Themebox {
        width: 100%;
    }

    .drevion-public #siteLanguages {
        top: 12px !important;
        right: 12px !important;
    }

    .drevion-public .Content .BoxContent {
        padding: 14px !important;
    }

    .drevion-public .drevion-content-title {
        right: 104px;
        left: 16px;
        justify-items: start;
        font-size: 16px;
    }

    .drevion-public .Content .InnerTableContainer {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .drevion-public .Content .TableContentContainer {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .drevion-public .Content .TableContainer > table > tbody {
        width: 100% !important;
        max-width: 100% !important;
    }

    .drevion-public .Content .TableContainer > table > tbody > tr {
        width: 100% !important;
        max-width: 100% !important;
    }

    .drevion-public .Content .TableContainer > table > tbody > tr > td {
        width: 100% !important;
        max-width: 100% !important;
    }

    .drevion-public .Content .InnerTableContainer > table > tbody {
        width: 100% !important;
        max-width: 100% !important;
    }

    .drevion-public .Content .InnerTableContainer > table > tbody > tr {
        width: 100% !important;
        max-width: 100% !important;
    }

    .drevion-public .Content .InnerTableContainer > table > tbody > tr > td {
        width: 100% !important;
        max-width: 100% !important;
    }

    .drevion-public .Content .TableContainer > table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .drevion-public .Content .InnerTableContainer > table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .drevion-public .Content .TableContent {
        min-width: 520px;
    }

    .drevion-public .Content form .TableContent {
        min-width: 0;
        table-layout: fixed !important;
    }

    .drevion-public .Content .drevion-login-layout > tbody > tr > td,
    .drevion-public .Content .drevion-new-player-layout > tbody > tr > td {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .drevion-public .Content .drevion-login-actions,
    .drevion-public .Content .drevion-create-account-cta {
        width: 100%;
        align-self: center;
        flex-basis: auto;
    }

    .drevion-public .Content .drevion-login-actions .BigButton,
    .drevion-public .Content .drevion-create-account-cta .BigButton {
        margin-right: auto;
        margin-left: auto;
    }

    .drevion-public .Content form .TableContent td > table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .drevion-public .Content form .TableContentContainer {
        overflow-x: hidden;
    }

    .drevion-public .Content form .TableContent td > div[style*="display: flex"] {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .drevion-public .Content form .PWStrengthIndicator {
        width: 100% !important;
        max-width: 100% !important;
    }

    .drevion-public .Content form #flagContainer {
        width: 100%;
        margin-top: 4px;
        flex-wrap: wrap;
    }

    .drevion-public .Content .TableContent:has(.drevion-empty-state) {
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    .drevion-public .Content .TableContentContainer:has(.drevion-empty-state) {
        overflow-x: hidden;
    }

    .drevion-public .Content .drevion-empty-state {
        width: 100%;
        padding: 32px 12px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .drevion-public .Content .drevion-spell-search .InnerTableContainer,
    .drevion-public .Content .drevion-spell-search .TableContentContainer {
        overflow: hidden;
    }

    .drevion-public .Content .drevion-spell-search .TableContent,
    .drevion-public .Content .drevion-spell-search .TableContent tbody {
        width: 100% !important;
        min-width: 0 !important;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr {
        display: contents;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:first-child td,
    .drevion-public .Content .drevion-spell-search .TableContent tr:nth-child(2) td {
        grid-column: auto;
        grid-row: auto;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:first-child td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:nth-child(2) td:nth-child(1) {
        grid-column: 1;
        grid-row: 2;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:first-child td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:nth-child(2) td:nth-child(2) {
        grid-column: 2;
        grid-row: 2;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:first-child td:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:nth-child(2) td:nth-child(3) {
        grid-column: 1;
        grid-row: 4;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:first-child td:nth-child(4) {
        grid-column: 2;
        grid-row: 3;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:nth-child(2) td:nth-child(4) {
        grid-column: 2;
        grid-row: 4;
    }

    .drevion-public .Content .drevion-item-category-grid {
        border-spacing: 4px !important;
    }

    .drevion-public .Content .drevion-item-category-grid td {
        height: 98px;
    }

    .drevion-public #MenuColumn > #Menu .MenuButton {
        height: 52px !important;
    }

}

@media (max-width: 520px) {
    .drevion-public #siteLanguages {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        width: auto;
        margin: 0 !important;
        justify-content: center;
        opacity: .88;
    }

    .drevion-public .drevion-content-title {
        right: 12px;
    }

    .drevion-public .Content .CaptionInnerContainer .RightArea {
        display: none;
    }

    .drevion-public .Content form .InnerTableContainer > table > tbody > tr:has(> td + td) {
        display: grid;
        grid-template-columns: minmax(94px, .72fr) minmax(0, 1.28fr);
        align-items: center;
    }

    .drevion-public .Content form .InnerTableContainer > table > tbody > tr:has(> td + td) > td {
        width: auto !important;
        min-width: 0;
    }

    .drevion-public .Content form .InnerTableContainer > table > tbody > tr:has(> td + td) > td:nth-child(n+3) {
        grid-column: 2;
        margin-top: 6px;
    }

    .drevion-public .Content .drevion-spell-search .TableContent,
    .drevion-public .Content .drevion-spell-search .TableContent tbody {
        grid-template-columns: minmax(0, 1fr);
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:first-child td:nth-child(n),
    .drevion-public .Content .drevion-spell-search .TableContent tr:nth-child(2) td:nth-child(n) {
        grid-column: 1;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:first-child td:nth-child(1) {
        grid-row: 1;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:nth-child(2) td:nth-child(1) {
        grid-row: 2;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:first-child td:nth-child(2) {
        grid-row: 3;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:nth-child(2) td:nth-child(2) {
        grid-row: 4;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:first-child td:nth-child(3) {
        grid-row: 5;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:nth-child(2) td:nth-child(3) {
        grid-row: 6;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:first-child td:nth-child(4) {
        grid-row: 7;
    }

    .drevion-public .Content .drevion-spell-search .TableContent tr:nth-child(2) td:nth-child(4) {
        grid-row: 8;
    }

    .drevion-public .ThreeColumnsForm {
        grid-template-columns: 1fr;
    }

    .drevion-public #Themeboxes .drevion-rail-card h2 {
        justify-content: flex-start;
    }

}

@media (max-width: 600px) {
    .drevion-public .Content {
        font-size: 11px !important;
    }

    .drevion-public .Content .BoxContent {
        font-size: 11px !important;
    }

    body.drevion-public .Content {
        font-size: 12px !important;
    }

    body.drevion-public .Content .BoxContent {
        font-size: 12px !important;
    }

    body.drevion-public .Content .BoxContent p {
        font-size: 12px !important;
    }

    body.drevion-public .Content .BoxContent li {
        font-size: 12px !important;
    }

    .drevion-public .Content .drevion-create-account-form .InnerTableContainer {
        padding: 9px !important;
    }

    .drevion-public .Content .drevion-create-account-form .TableContent tr {
        display: grid;
        grid-template-columns: 1fr;
    }

    .drevion-public .Content .drevion-create-account-form .TableContent [class^="LabelV"] {
        width: auto !important;
        padding-bottom: 2px !important;
        border-bottom: 0 !important;
    }

    .drevion-public .Content .drevion-create-account-form .TableContent td:nth-child(2) {
        padding-top: 3px !important;
    }

    .drevion-public .Content .drevion-create-account-form input:not([type="image"]):not([type="checkbox"]):not([type="radio"]),
    .drevion-public .Content .drevion-create-account-form select,
    .drevion-public .Content .drevion-create-account-form .PWStrengthIndicator {
        width: 100% !important;
    }

    .drevion-public .Content .drevion-create-account-form .OptionContainer {
        margin-right: 18px !important;
    }

    .drevion-public .Content .drevion-item-category-grid {
        width: 100% !important;
        display: block;
        border-spacing: 0 !important;
    }

    .drevion-public .Content .drevion-item-category-grid tbody {
        width: 100% !important;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .drevion-public .Content .drevion-item-category-grid tr {
        display: contents;
    }

    .drevion-public .Content .drevion-item-category-grid td {
        width: auto !important;
        height: 104px;
    }

    .drevion-public .Content .drevion-item-category-grid td:empty {
        display: none;
    }

}

@media (min-width: 901px) {
    body.drevion-public {
        padding: 20px 16px 4px !important;
    }

    .drevion-public #MenuColumn > #Menu .menuitem {
        border: 2px solid #080706 !important;
        background-color: #11100d !important;
        background-image: repeating-conic-gradient(from 45deg, rgba(205, 143, 57, .018) 0 25%, transparent 0 50%),
      repeating-linear-gradient(133deg, transparent 0 30px, rgba(132, 85, 31, .035) 31px, transparent 32px 63px),
      linear-gradient(90deg, #17140f, #0d0c0a 48%, #15120e) !important;
        background-position: 0 0 !important;
        background-size: 4px 4px, auto, auto !important;
        background-repeat: repeat, repeat, no-repeat !important;
        box-shadow: 0 0 0 1px #65431e,
      0 0 0 3px #120d08,
      0 3px 7px rgba(0, 0, 0, .78),
      inset 0 0 0 1px #352515,
      inset 0 0 13px #040403 !important;
    }

    .drevion-public .Content .Box {
        border: 2px solid #080706 !important;
        background-color: #11100d !important;
        background-image: repeating-conic-gradient(from 45deg, rgba(205, 143, 57, .018) 0 25%, transparent 0 50%),
      repeating-linear-gradient(133deg, transparent 0 30px, rgba(132, 85, 31, .035) 31px, transparent 32px 63px),
      linear-gradient(90deg, #17140f, #0d0c0a 48%, #15120e) !important;
        background-position: 0 0 !important;
        background-size: 4px 4px, auto, auto !important;
        background-repeat: repeat, repeat, no-repeat !important;
        box-shadow: 0 0 0 1px #65431e,
      0 0 0 3px #120d08,
      0 3px 7px rgba(0, 0, 0, .78),
      inset 0 0 0 1px #352515,
      inset 0 0 13px #040403 !important;
    }

    .drevion-public #Themeboxes .Themebox {
        border: 2px solid #080706 !important;
        background-color: #11100d !important;
        background-image: repeating-conic-gradient(from 45deg, rgba(205, 143, 57, .018) 0 25%, transparent 0 50%),
      repeating-linear-gradient(133deg, transparent 0 30px, rgba(132, 85, 31, .035) 31px, transparent 32px 63px),
      linear-gradient(90deg, #17140f, #0d0c0a 48%, #15120e) !important;
        background-position: 0 0 !important;
        background-size: 4px 4px, auto, auto !important;
        background-repeat: repeat, repeat, no-repeat !important;
        box-shadow: 0 0 0 1px #65431e,
      0 0 0 3px #120d08,
      0 3px 7px rgba(0, 0, 0, .78),
      inset 0 0 0 1px #352515,
      inset 0 0 13px #040403 !important;
    }

    .drevion-public #Themeboxes .drevion-statistics-card {
        min-height: 177px;
    }

    .drevion-public #Themeboxes .drevion-top-players-card {
        min-height: 198px;
    }

    .drevion-public .drevion-top-players-list {
        margin: 7px 8px 4px;
        padding: 0;
        list-style: none;
    }

    .drevion-public .drevion-top-players-list li {
        min-height: 20px;
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px;
        color: #d8c89a;
        font-family: "Drevion Pixel Text", "Trebuchet MS", sans-serif;
        font-size: 12px;
        line-height: 20px;
    }

    .drevion-public .drevion-top-players-list a {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .drevion-public .drevion-top-players-list strong {
        min-width: 58px;
        color: #e4b25f;
        font-family: "Lucida Console", Monaco, monospace;
        font-size: 11px;
        font-weight: 400;
        text-align: right;
        white-space: nowrap;
    }

    .drevion-public .drevion-ranking-link {
        width: 142px;
        height: 25px;
        margin: 3px auto 7px;
        display: grid !important;
        place-items: center;
        color: #e3c77f !important;
        border: 1px solid #080706;
        background: linear-gradient(#302d28, #171512 52%, #27241f);
        box-shadow: 0 0 0 1px #654725, inset 1px 1px rgba(255, 255, 255, .08);
        text-align: center;
    }

    .drevion-public .Content .BoxContent p {
        font-family: "Lucida Console", "Courier New", monospace !important;
    }

    .drevion-public .Content .BoxContent li {
        font-family: "Lucida Console", "Courier New", monospace !important;
    }

    .drevion-public .Content .BoxContent td {
        font-family: "Lucida Console", "Courier New", monospace !important;
    }

    .drevion-public .Content .BoxContent th {
        font-family: "Lucida Console", "Courier New", monospace !important;
    }

    .drevion-public .Content .BoxContent label {
        font-family: "Lucida Console", "Courier New", monospace !important;
    }

    .drevion-public .Content .CaptionInnerContainer > .Text {
        font-family: "Lucida Console", "Courier New", monospace !important;
    }

    .drevion-public .Content input:not([type="image"]) {
        font-family: "Lucida Console", "Courier New", monospace !important;
    }

    .drevion-public .Content select {
        font-family: "Lucida Console", "Courier New", monospace !important;
    }

    .drevion-public .Content textarea {
        font-family: "Lucida Console", "Courier New", monospace !important;
    }

    .drevion-public .Content button {
        font-family: "Lucida Console", "Courier New", monospace !important;
    }

    .drevion-public .Content .btn {
        font-family: "Lucida Console", "Courier New", monospace !important;
    }

    .drevion-public .Content .BoxContent {
        font-family: "Lucida Console", "Courier New", monospace !important;
        font-size: 11px !important;
        line-height: 1.35;
    }

    .drevion-public .Content .TableContent {
        font-family: "Lucida Console", "Courier New", monospace !important;
        font-size: 10px !important;
    }

    .drevion-public .Content form[action*="/community/highscores"] .TableContainer > .CaptionContainer {
        display: none;
    }

    .drevion-public .Content form[action*="/community/highscores"] .TableContainer {
        padding: 13px;
    }

    .drevion-public .Content form[action*="/community/highscores"] .InnerTableContainer {
        padding: 0 !important;
    }

    .drevion-public .Content form[action*="/community/highscores"] .InnerTableContainer > table {
        width: 100% !important;
        display: block;
    }

    .drevion-public .Content form[action*="/community/highscores"] .InnerTableContainer > table > tbody {
        width: 100% !important;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--drevion-action-min-width);
        grid-template-rows: 14px 31px;
        gap: 5px 10px;
        align-items: stretch;
    }

    .drevion-public .Content form[action*="/community/highscores"] .InnerTableContainer > table > tbody > tr {
        display: contents;
    }

    .drevion-public .Content form[action*="/community/highscores"] .InnerTableContainer > table > tbody > tr > td {
        width: auto !important;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .drevion-public .Content form[action*="/community/highscores"] .InnerTableContainer > table > tbody > tr > td:first-child {
        color: #cf8d39 !important;
        font-size: 9px;
        line-height: 14px;
        text-transform: uppercase;
    }

    .drevion-public .Content form[action*="/community/highscores"] .InnerTableContainer > table > tbody > tr:nth-last-child(2) > td:first-child {
        grid-column: 2;
        grid-row: 1;
    }

    .drevion-public .Content form[action*="/community/highscores"] .InnerTableContainer > table > tbody > tr:nth-last-child(2) > td:nth-child(2) {
        grid-column: 2;
        grid-row: 2;
    }

    .drevion-public .Content form[action*="/community/highscores"] .InnerTableContainer > table > tbody > tr:nth-last-child(2) > td:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .drevion-public .Content form[action*="/community/highscores"] .InnerTableContainer > table > tbody > tr:last-child > td:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .drevion-public .Content form[action*="/community/highscores"] .InnerTableContainer > table > tbody > tr:last-child > td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .drevion-public .Content form[action*="/community/highscores"] .InnerTableContainer > table > tbody > tr:last-child > td:nth-child(3) {
        grid-column: 3;
        grid-row: 2;
    }

    .drevion-public .Content form[action*="/community/highscores"] select {
        width: 100% !important;
        height: 31px;
    }

    .drevion-public .Content .drevion-button--link {
        min-width: 0;
        height: 14px !important;
        min-height: 14px !important;
        max-height: 14px;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        display: block !important;
        overflow: hidden;
    }

    .drevion-public .Content .drevion-button--link > div {
        height: 14px !important;
        min-height: 14px !important;
        max-height: 14px;
    }

    .drevion-public .Content .drevion-button--link .BigButtonOver {
        display: none !important;
    }

    .drevion-public .Content .drevion-button--link .BigButtonText {
        height: 14px !important;
        min-height: 14px;
        max-height: 14px;
        padding: 0 3px !important;
        color: #b9a77b !important;
        font-size: 9px !important;
        line-height: 14px;
        text-align: right;
        text-decoration: underline;
        display: block;
    }

}


/* Page composition migrated from Blade views. */
/* View: about\wiki\creatures.blade.php; bloco 1 */
body.drevion-public.drevion-page--about-wiki-creatures .Content :is(.item_search_input) {
            transition: box-shadow 0.3s ease;
        }

        body.drevion-public.drevion-page--about-wiki-creatures .Content :is(.item_search_input:hover) {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        body.drevion-public.drevion-page--about-wiki-creatures .Content :is(.creatureListBox) {
            height: 90px;
            width: 50px;
            text-align: center;
            font: bold 12px Arial;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            margin: 0 auto;
        }

        body.drevion-public.drevion-page--about-wiki-creatures .Content :is(.outfitImg) {
            background-position: center center;
            background-repeat: no-repeat;
            width: 64px;
            height: 64px;
            padding: 5px;
            position: relative;
            overflow: hidden;

        }

        body.drevion-public.drevion-page--about-wiki-creatures .Content :is(input[type="text"], input[type="number"], select) {
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            height: 25px;
            width: 200px;
            margin: 0 auto;
        }

        body.drevion-public.drevion-page--about-wiki-creatures .Content :is(input[type="text"]:focus, input[type="number"]:focus, select:focus) {
            border-color: #007bff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

/* View: about\wiki\creaturesView.blade.php; bloco 1 */
body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(.creatureListBoxNew) {
            height: 90px;
            width: 150px;
            text-align: center;
            font: bold 12px Arial;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;

        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(.outfitImg) {
            background-position: center center;
            background-repeat: no-repeat;
            width: 64px;
            height: 64px;
            padding: 5px;
            position: relative;
            overflow: hidden;

        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(input[type="text"], input[type="number"], select) {
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            height: 25px;
            width: 200px;
            margin: 0 auto;
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(input[type="text"]:focus, input[type="number"]:focus, select:focus) {
            border-color: #007bff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(.item_search_input) {
            transition: box-shadow 0.3s ease;
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(.item_search_input:hover) {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

/* View: about\wiki\creaturesView.blade.php; bloco 2 */
body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(#monsterSearch) {
            overflow: hidden;
            width: 100%;
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(#monsterScroller) {
            display: flex;
            white-space: nowrap;
            animation: marquee 10s linear infinite;
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(#monsterScroller .monster) {
            flex: 0 0 auto;
            margin-right: 10px;
        }

        @keyframes marquee {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(#monsterSearch) {
            width: 750px;
            overflow: hidden;
            margin: 0 auto;
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(#monsterTicker) {
            display: flex;
            flex-wrap: nowrap;
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(.monster-wrapper) {
            width: 150px;
            margin-right: -40px;
            border: 2px solid rgba(121, 61, 3, 0.65);
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.46);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            flex-shrink: 0;
            scale: 0.7
        }

/* View: about\wiki\creaturesView.blade.php; bloco 3 */
body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(#HelperDivContainer) {
            display: none;
            position: absolute;
            width: 225px;
            z-index: 1000;
            color: #5a2800;
            font-family: Verdana,Arial,Times New Roman,sans-serif;
            font-size: 9pt;
            text-align: left;
            padding: 10px;
            border: 1px double #5a2800;
            margin-left: 8px;
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(#HelperDivContainer .HelperDivArrow) {
            position: absolute;
            top: -1px;
            left: -8px;
            width: 8px;
            height: 13px;
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(#HelperDivContainer) {
            color: #5a2800;
            font-family: Verdana,Arial,Times New Roman,sans-serif;
            font-size: 9pt;
            text-align: left;
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(#HelperDivContainer #HelperDivHeadline) {
            position: relative;
            white-space: normal;
            margin-top: 0;
            margin-bottom: 15px;
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(#HelperDivContainer #HelperDivHeadline) {
            font-size: 12pt;
            font-weight: 700;
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(#HelperDivContainer) {
            color: #5a2800;
            font-family: Verdana,Arial,Times New Roman,sans-serif;
            font-size: 9pt;
            text-align: left;
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(#HelperDivContainer) {
            color: #5a2800;
            font-family: Verdana,Arial,Times New Roman,sans-serif;
            font-size: 9pt;
            text-align: left;
        }

        body.drevion-public.drevion-page--about-wiki-creaturesview .Content :is(.itemImg) {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            text-align: center;
        }

/* View: about\wiki\itemPage.blade.php; bloco 1 */
body.drevion-public.drevion-page--about-wiki-itempage .Content :is(.LabelV176) {

        padding: 2;
        font-weight: bold;
        width: 200px;
    }

    body.drevion-public.drevion-page--about-wiki-itempage .Content :is(.beaut_border) {
        background-color: hsla(0,0%,100%,.46);
        box-shadow: 0 0 10px rgba(0,0,0,.5);
    }

    body.drevion-public.drevion-page--about-wiki-itempage .Content :is(.description) {
        color: #00F000;
        font-family: Verdana,Tahoma;
        font-size: 8pt;
        font-weight: bold;
        text-shadow: 0.1em 0.1em 0.08em #000,-0.1em -0.1em 0.08em #000,0.1em -0.1em 0.08em #000,-0.1em 0.1em 0.08em #000,-0.1em 0 0.08em #000,0.1em 0 0.08em #000;
        text-decoration: none;
        line-height: normal;
        display: inline-block; width: 40%;
    }

/* View: about\wiki\itemPage.blade.php; bloco 2 */
body.drevion-public.drevion-page--about-wiki-itempage .Content :is(.creatureListBoxNew) {
        height: 90px;
        width: 150px;
        text-align: center;
        font: bold 12px Arial;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;

    }

    body.drevion-public.drevion-page--about-wiki-itempage .Content :is(.outfitImg) {
        background-position: center center;
        background-repeat: no-repeat;
        width: 64px;
        height: 64px;
        padding: 5px;
        position: relative;
        overflow: hidden;

    }

    body.drevion-public.drevion-page--about-wiki-itempage .Content :is(input[type="text"], input[type="number"], select) {
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        height: 25px;
        width: 200px;
        margin: 0 auto;
    }

    body.drevion-public.drevion-page--about-wiki-itempage .Content :is(input[type="text"]:focus, input[type="number"]:focus, select:focus) {
        border-color: #007bff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    body.drevion-public.drevion-page--about-wiki-itempage .Content :is(.item_search_input) {
        transition: box-shadow 0.3s ease;
    }

    body.drevion-public.drevion-page--about-wiki-itempage .Content :is(.item_search_input:hover) {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

/* View: about\wiki\itemsView.blade.php; bloco 1 */
body.drevion-public.drevion-page--about-wiki-itemsview .Content :is(.creatureListBox) {
            height: 90px;
            width: 80px;
            text-align: center;
            vertical-align: middle;
            font: bold 12px arial;
            display: inline-table;
            margin-left: 18px;
        }

        body.drevion-public.drevion-page--about-wiki-itemsview .Content :is(.outfitImg) {
            background-position: center center;
            background-repeat: no-repeat;
            width: 64px;
            height: 64px;
            padding: 5px;
            position: relative;
            overflow: hidden;
            border: 2px solid rgba(121, 61, 3, 0.65);
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.46);
        }

        body.drevion-public.drevion-page--about-wiki-itemsview .Content :is(.itemImg) {
            background-position: center center;
            background-repeat: no-repeat;
            width: 30px;
            height: 30px;
            padding: 5px;
            position: relative;
            overflow: hidden;
            border: 2px solid rgba(121, 61, 3, 0.65);
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.46);
        }

        @font-face {
            font-family: 'Martel';
            src: url('https://drevion.com.br/martel.ttf') format('truetype');
        }

        body.drevion-public.drevion-page--about-wiki-itemsview .Content :is(td) {

            border: 2px solid rgba(121, 61, 3, 0.65);
            background-color: rgba(255, 255, 255, 0.46);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        body.drevion-public.drevion-page--about-wiki-itemsview .Content :is(.LabelV175) {

            padding: 10px;
        }

/* View: about\wiki\npcs.blade.php; bloco 1 */
body.drevion-public.drevion-page--about-wiki-npcs .Content :is(.creatureListBox) {
        height: 90px;
        width: 150px;
        text-align: center;
        font: bold 12px Arial;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;

    }

    body.drevion-public.drevion-page--about-wiki-npcs .Content :is(.outfitImg) {
        background-position: center center;
        background-repeat: no-repeat;
        width: 64px;
        height: 64px;
        padding: 5px;
        position: relative;
        overflow: hidden;

    }

    body.drevion-public.drevion-page--about-wiki-npcs .Content :is(input[type="text"], input[type="number"], select) {
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        height: 25px;
        width: 200px;
        margin: 0 auto;
    }

    body.drevion-public.drevion-page--about-wiki-npcs .Content :is(input[type="text"]:focus, input[type="number"]:focus, select:focus) {
        border-color: #007bff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    body.drevion-public.drevion-page--about-wiki-npcs .Content :is(select) {
        background-color: white;
    }

/* View: about\wiki\npcs.blade.php; bloco 2 */
body.drevion-public.drevion-page--about-wiki-npcs .Content :is(.item_search_input) {
        transition: box-shadow 0.3s ease;
    }

    body.drevion-public.drevion-page--about-wiki-npcs .Content :is(.item_search_input:hover) {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

/* View: about\wiki\spellView.blade.php; bloco 1 */
body.drevion-public.drevion-page--about-wiki-spellview .Content :is(.sellerRow) {
            border: 1px solid #faf0d7;
            background-color: hsla(0,0%,100%,.46);
            box-shadow: 0 0 10px rgba(0,0,0,.5);
            padding-left: 5px;
            padding-top: 2px;
            padding-right: 5px;
            padding-bottom: 2px;
        }

        body.drevion-public.drevion-page--about-wiki-spellview .Content :is(.LabelV175) {

            width: 100px;
        }

/* View: about\wiki\statGuide.blade.php; bloco 1 */
body.drevion-public.drevion-page--about-wiki-statguide .Content :is([id="attribute-table"] th,
        [id="attribute-table"] td) {
            border: 1px solid #faf0d7;
        }

/* View: account\manage\index.blade.php; bloco 1 */
body.drevion-public.drevion-page--account-manage-index .Content :is(.custom-select) {
            width: 150px;
            font-size: 14px;
            color: #333;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        body.drevion-public.drevion-page--account-manage-index .Content :is(.custom-select:focus) {
            outline: none;
            border-color: #007bff;
        }

/* View: account\manage\purchase-history.blade.php; bloco 1 */
body.drevion-public.drevion-page--account-manage-purchase-history .Content :is(input[type="text"], input[type="number"], select) {
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            height: 25px;
            width: 200px;
            margin: 0 auto;
            padding-left: 4px;
        }

        body.drevion-public.drevion-page--account-manage-purchase-history .Content :is(input[type="text"]:focus, input[type="number"]:focus, select:focus) {
            border-color: #007bff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        body.drevion-public.drevion-page--account-manage-purchase-history .Content :is(select) {
            background-color: white;
        }

/* View: account\manage\googleAuth\index.blade.php; bloco 1 */
body.drevion-public.drevion-page--account-manage-googleauth-index .Content :is(.container) {
        margin: 0 auto;
        padding: 20px;
        border-radius: 8px;
    }
    body.drevion-public.drevion-page--account-manage-googleauth-index .Content :is(.qr-code) {
        margin: 20px 0;
    }
    body.drevion-public.drevion-page--account-manage-googleauth-index .Content :is(a.button) {
        display: inline-block;
        padding: 10px 20px;
        background-color: #007BFF;
        color: #fff;
        text-decoration: none;
        border-radius: 4px;
        margin-top: 20px;
    }
    body.drevion-public.drevion-page--account-manage-googleauth-index .Content :is(a.button:hover) {
        background-color: #0056b3;
    }
    body.drevion-public.drevion-page--account-manage-googleauth-index .Content :is(.input-field) {
        margin: 20px 0;
        display: inline-block;
        padding: 2px;
        width: 200px;
        text-align: center;
    }
    body.drevion-public.drevion-page--account-manage-googleauth-index .Content :is(.button-container) {
        text-align: center;
        margin-top: 20px;
    }

/* View: account\manage\security-questions\index.blade.php; bloco 1 */
body.drevion-public.drevion-page--account-manage-security-questions-index .Content :is(.custom-select) {
            width: 325px;
            font-size: 14px;
            padding-left: 2px;
            font-family: Arial, sans-serif;
            color: #333;
            background-color: #fff;
            border: 1.5px solid #ccc;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 14px 14px;
            transition: border-color 0.3s ease;
        }

        body.drevion-public.drevion-page--account-manage-security-questions-index .Content :is(.custom-select:focus) {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 6px rgba(0, 123, 255, 0.5);
        }

        body.drevion-public.drevion-page--account-manage-security-questions-index .Content :is(.custom-input) {
            font-size: 14px;
            font-family: Arial, sans-serif;
            color: #333;
            background-color: #fff;
            border: 1.5px solid #ccc;
            box-sizing: border-box;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        body.drevion-public.drevion-page--account-manage-security-questions-index .Content :is(.custom-input:focus) {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 6px rgba(0, 123, 255, 0.5);
        }

/* View: account\manage\tell-a-friend\index.blade.php; bloco 1 */
body.drevion-public.drevion-page--account-manage-tell-a-friend-index .Content :is(.requirements tr, .requirements td) {
            border: 1px solid #faf0d7;
        }

/* View: account\overview\email\change\index.blade.php; bloco 1 */
body.drevion-public.drevion-page--account-overview-email-change-index .Content :is(.inputBoxRk) {
                                    width: 60px
                                }

/* View: bazaar\buy\index.blade.php; bloco 1 */
body.drevion-public.drevion-page--bazaar-buy-index .Content :is(.AuctionOutfit) {
                                                            position: relative;
                                                            width: 100px;
                                                            margin: 0 auto;
                                                            margin-top: -26px;
                                                        }
                                                        body.drevion-public.drevion-page--bazaar-buy-index .Content :is(.AuctionOutfitImage) {
                                                            width: 100;
                                                            height: 100;
                                                        }


                                                        body.drevion-public.drevion-page--bazaar-buy-index .Content :is(.slick-prev,
                                                        .slick-next) {
                                                            line-height: 1;
                                                            background-color: #3498db;
                                                            color: #fff;
                                                            border-radius: 50%;
                                                            z-index: 1;
                                                            transition: background-color 0.3s ease;
                                                        }

                                                        body.drevion-public.drevion-page--bazaar-buy-index .Content :is(.slick-prev) {

                                                            left: 0;
                                                            top: 70%;
                                                        }


                                                        body.drevion-public.drevion-page--bazaar-buy-index .Content :is(.slick-next) {

                                                            right: 0;
                                                            top: 70%
                                                        }


                                                        body.drevion-public.drevion-page--bazaar-buy-index .Content :is(.slick-prev::before,
                                                        .slick-next::before) {
                                                            color: #3498db;
                                                            background-color: #ffffff;
                                                            border-radius: 100%
                                                        }

                                                        body.drevion-public.drevion-page--bazaar-buy-index .Content :is(.slick-prev:hover,
                                                        .slick-next:hover) {
                                                            background-color: #ff0000;
                                                        }

                                                        body.drevion-public.drevion-page--bazaar-buy-index .Content :is(.slick-dots li) {
                                                            font-size: 10px;
                                                            margin: 0 2px;
                                                            width: 10px;
                                                        }

/* View: bazaar\buy\status.blade.php; bloco 1 */
body.drevion-public.drevion-page--bazaar-buy-status .Content :is(.PercentageBarSpacer) {

                    width: 100%;
                    border: 2px solid #5A2800;
                }

/* View: bazaar\sell\auction.blade.php; bloco 1 */
body.drevion-public.drevion-page--bazaar-sell-auction .Content :is(.toggle-switch) {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 20px;
        }

        body.drevion-public.drevion-page--bazaar-sell-auction .Content :is(.toggle-switch input) {
            opacity: 0;
            width: 0;
            height: 0;
        }

        body.drevion-public.drevion-page--bazaar-sell-auction .Content :is(.toggle-slider) {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 20px;
        }

        body.drevion-public.drevion-page--bazaar-sell-auction .Content :is(.toggle-slider:before) {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        body.drevion-public.drevion-page--bazaar-sell-auction .Content :is(input:checked + .toggle-slider) {
            background-color: #2196F3;
        }

        body.drevion-public.drevion-page--bazaar-sell-auction .Content :is(input:checked + .toggle-slider:before) {
            transform: translateX(20px);
        }

/* View: community\powergamers\index.blade.php; bloco 1 */
body.drevion-public.drevion-page--community-powergamers-index .Content :is(input[type="text"], input[type="number"], select) {
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            height: 25px;
            width: 160px;
            margin: 0 auto;
        }

        body.drevion-public.drevion-page--community-powergamers-index .Content :is(input[type="text"]:focus, input[type="number"]:focus, select:focus) {
            border-color: #007bff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        body.drevion-public.drevion-page--community-powergamers-index .Content :is(select) {
            background-color: white;
        }

/* View: community\streamers\index.blade.php; bloco 1 */
body.drevion-public.drevion-page--community-streamers-index .Content :is(.progress-bar) {
        width: 100%;
        height: 30px;
        background-color: #000000;
        border-radius: 5px;
        overflow: hidden;
        border: 2px solid #5A2800;
    }

    body.drevion-public.drevion-page--community-streamers-index .Content :is(.progress) {
        position: relative;
        width: 0%;
        height: 100%;
        background-color: rgb(212, 192, 161);
        transition: width 0.5s ease-in-out;
        text-align: center;
    }

    body.drevion-public.drevion-page--community-streamers-index .Content :is(#progressPercentage) {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }

    @keyframes loadingAnimation {
        0% { opacity: 0; }
        50% { opacity: 1; }
        100% { opacity: 0; }
    }

    body.drevion-public.drevion-page--community-streamers-index .Content :is(.loading-dots) {
        animation: loadingAnimation 1.5s infinite;
    }

/* View: community\view\house\index.blade.php; bloco 1 */
body.drevion-public.drevion-page--community-view-house-index .Content :is(.leaflet-control-layers-toggle) {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

/* View: lost-account\twoAuth\questionsCheck.blade.php; bloco 1 */
body.drevion-public.drevion-page--lost-account-twoauth-questionscheck .Content :is(.custom-input) {
            font-size: 14px;
            font-family: Arial, sans-serif;
            color: #333;
            background-color: #fff;
            border: 1.5px solid #ccc;
            box-sizing: border-box;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        body.drevion-public.drevion-page--lost-account-twoauth-questionscheck .Content :is(.custom-input:focus) {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 6px rgba(0, 123, 255, 0.5);
        }

/* View: news\index.blade.php; bloco 1 */
body.drevion-public.drevion-page--news-index .Content :is(.promo-overlay) {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s, opacity 0.3s linear;
        }

        body.drevion-public.drevion-page--news-index .Content :is(.promo-overlay.active) {
            visibility: visible;
            opacity: 1;
        }

        body.drevion-public.drevion-page--news-index .Content :is(.promo-content) {
            position: relative;
            background-color: white;
            border-radius: 5px;
            border: 2px solid white;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
            max-width: 80%;
            max-height: 80%;
            overflow: hidden;
        }

        body.drevion-public.drevion-page--news-index .Content :is(.promo-image) {
            width: 100%;
            height: auto;
            object-fit: cover;
            max-width: 100%;
            max-height: 70vh;
        }

        body.drevion-public.drevion-page--news-index .Content :is(.promo-close) {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            color: #333;
            text-decoration: none;
            background: transparent;
            border: none;
        }

        body.drevion-public.drevion-page--news-index .Content :is(.promo-close:hover) {
            opacity: 0.5;
        }

        body.drevion-public.drevion-page--news-index .Content :is(.promo-close img) {
            width: 30px;
            height: auto;
        }

/* View: news\index.blade.php; bloco 2 */
body.drevion-public.drevion-page--news-index .Content :is(.countdown-card) {
            background-color: #141b46;
            border-radius: 5px;
            padding: 10px 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
        }

        body.drevion-public.drevion-page--news-index .Content :is(.countdown) {
            font-weight: bold;
            display: flex;
            justify-content: center;
            gap: 10px;
            padding: 40px 0;
            padding-top: 10px;
        }

        body.drevion-public.drevion-page--news-index .Content :is(.countdownH) {
            text-align: center;
            display: block;
            font-size: 3em;
            margin-bottom: 10px;
        }

        body.drevion-public.drevion-page--news-index .Content :is(.countdown-title) {
            font-family: 'Martel', serif;
            color: #8B4513; /* brown */
            font-size: 2.5em;
            text-align: center;
            margin-top: 20px;
            font-weight: bold;
        }

/* View: store\packages\select_packages.blade.php; bloco 1 */
body.drevion-public.drevion-page--store-packages-select-packages .Content :is(.image-container) {
                display: flex;
                justify-content: space-around;
                gap: 20px;
                margin-left: 30px;
            }

            body.drevion-public.drevion-page--store-packages-select-packages .Content :is(.image-wrapper) {
                position: relative;
                text-align: center;
            }

            body.drevion-public.drevion-page--store-packages-select-packages .Content :is(.option-image) {
                width: 200px;
                height: 400px;
                transition: transform 0.3s, box-shadow 0.3s;
                border: 4px solid transparent;
                border-radius: 10px;
            }

            body.drevion-public.drevion-page--store-packages-select-packages .Content :is(.option-image:hover) {
                transform: scale(1.05);
                /* box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); */
            }

            /* Product hover border variants remain intentionally disabled. */

            body.drevion-public.drevion-page--store-packages-select-packages .Content :is(.custom-input-container) {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 10px;
            }

            body.drevion-public.drevion-page--store-packages-select-packages .Content :is(.quantity-input) {
                width: 50px;
                height: 30px;
                text-align: center;
                font-size: 16px;
                border: 1px solid #ddd;
                margin: 0 5px;
                background-color: #f9f9f9;
                pointer-events: none;
            }

            body.drevion-public.drevion-page--store-packages-select-packages .Content :is(.custom-input-container button) {
                background-color: #003366;
                color: white;
                border: none;
                padding: 5px 10px;
                font-size: 18px;
                transition: background-color 0.3s;
            }

            body.drevion-public.drevion-page--store-packages-select-packages .Content :is(.custom-input-container button:hover) {
                background-color: #002244;
            }

            body.drevion-public.drevion-page--store-packages-select-packages .Content :is(.custom-input-container button:disabled) {
                background-color: #ccc;
            }

/* View: support\rules\index.blade.php; bloco 1 */
body.drevion-public.drevion-page--support-rules-index .Content :is(table) {
            border-collapse: collapse;
        }