/********** IMAGES ********* */
/********** GRID ********* */
/********** INLINE ICONS ********* */
/********** FONT ********* */
/********** DIRECTIONS ********* */
/********** TEXT ********* */
/*** MEASUREMENT ** */
/*** COLOR CODES ** */
/*** COLOR USAGE ** */
/*** DEFAULT STYLES ** */
/*** TRIBES ** */
/*** BUILDINGS ** */
/*** RESOURCES ** */
@import url("hero/propertyAttributes.css");
@import url("hero/statusMessage.css");

div.itemNotMoveable, span.itemNotMoveable {
    color: #F88C1F;
}

/* The level is part of the title, not a badge. Keep it identical to the title
   text on every layout. */
body.hero_inventory .heroSectionHeader .heroLevelBadge,
body.hero_inventory .heroSectionHeader .heroLevelBadge bdi {
    display: inline !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff4df !important;
    font: inherit !important;
    line-height: inherit !important;
    text-shadow: inherit !important;
    -webkit-text-fill-color: #fff4df !important;
    vertical-align: baseline !important;
}


/* Tablet Dorf 1 rail.  This is deliberately kept here, after every shared
   mobile stylesheet, so the active mobile layout has one final source of
   truth instead of competing side-panel rules. */
@media screen and (min-width: 761px) and (max-width: 1024px) {
    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details {
        top: 240px !important;
        width: 148px !important;
        max-width: 148px !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details > .movements,
    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList .boxes-contents {
        padding: 6px !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .trav47RailCardTitle {
        height: 18px !important;
        margin-bottom: 3px !important;
        font-size: 14px !important;
        line-height: 18px !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 13px !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#production td.num {
        font-size: 15px !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#production td.ico i {
        transform: scale(1.05) !important;
        transform-origin: center !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#troops tbody tr {
        min-height: 29px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#troops td.ico img {
        transform: scale(1.18) !important;
        transform-origin: center !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#troops td.num {
        font-size: 16px !important;
        line-height: 20px !important;
        padding-right: 3px !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details > .movements {
        margin-top: -6px !important;
        padding-top: 0 !important;
        max-height: none !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details > .movements > .villageList.movements {
        margin-top: -11px !important;
        padding-top: 0 !important;
        max-height: 117px !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList.movements .boxes-contents,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details .villageList.movements .boxes-contents {
        max-height: 117px !important;
        padding: 5px 4px 3px !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details .villageList.movements .trav47RailCardTitle,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details .villageList.movements .trav47RailCardTitle {
        position: relative !important;
        top: -5px !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements tbody tr,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements tbody tr {
        display: grid !important;
        grid-template-columns: max-content max-content !important;
        grid-template-rows: 30px !important;
        min-height: 30px !important;
        justify-content: center !important;
        column-gap: 3px !important;
        padding: 2px 0 !important;
        direction: rtl !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements tbody td.typ,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements tbody td.typ {
        display: flex !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: auto !important;
        padding: 0 !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements tbody td:not(.typ),
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements tbody td:not(.typ) {
        display: flex !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 13px !important;
        width: auto !important;
        min-width: 0 !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements .mov,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements .mov {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        padding-right: 0 !important;
        align-self: center !important;
        float: none !important;
        font-size: 13px !important;
        line-height: 30px !important;
        white-space: nowrap !important;
    }

    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements .dur_r,
    html[data-trav47-layout="mobile"] body.village1 div.village1 div#map_details table#movements .dur_l,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements .dur_r,
    html[data-trav47-layout="mobile"] body.village2 div.village2 div#map_details table#movements .dur_l {
        flex: 0 0 auto !important;
        align-self: center !important;
        width: auto !important;
        padding: 0 0 0 2px !important;
        float: none !important;
        font-size: 12px !important;
        line-height: 30px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }
}

/* Centre ordinary game windows in the usable tablet area.  Village scenes and
   the map keep their own layout; build, field, statistics and similar pages
   no longer start under the fixed top HUD or leave a needless empty tail. */
@media screen and (min-width: 761px) and (max-width: 1024px) {
 html[data-trav47-layout="desktop"] body.travianMobile:not(.village1):not(.village2):not(.map):not(.login):not(.logout):not(.activate):not(.error_site):not(.statistics) #center #contentOuterContainer {
     position: relative !important;
     top: calc(50vh - 30px) !important;
     float: none !important;
     margin: 0 auto !important;
     transform: translateY(-50%) !important;
     z-index: 1100 !important;
 }

 /* Building and field windows have ample tablet space.  Give their actual
    content room and a readable type scale, rather than surrounding a compact
    desktop panel with empty scenery. */
 html[data-trav47-layout="desktop"] body.travianMobile.build #center #contentOuterContainer {
     min-height: 455px !important;
 }

 html[data-trav47-layout="desktop"] body.travianMobile.build #center #contentOuterContainer .contentContainer,
 html[data-trav47-layout="desktop"] body.travianMobile.build #center #contentOuterContainer #content {
     min-height: 382px !important;
 }

 html[data-trav47-layout="desktop"] body.travianMobile.build #center #content #build {
     min-height: 365px !important;
     font-size: 15px !important;
     line-height: 1.5 !important;
 }

 html[data-trav47-layout="desktop"] body.travianMobile.build #center #content #build :is(p, li, td, th, label, .value, .text) {
     font-size: 15px !important;
     line-height: 1.5 !important;
 }

 html[data-trav47-layout="desktop"] body.travianMobile.build #center #content #build button,
 html[data-trav47-layout="desktop"] body.travianMobile.build #center #content #build .button {
     font-size: 14px !important;
     font-weight: 600 !important;
 }

 /* The DOM relocation is now invisible: no fade or transition between the
    original header location and the fixed tablet HUD. */
 html[data-trav47-layout="desktop"] body.travianMobile #stockBar {
     visibility: visible !important;
     opacity: 1 !important;
     animation: none !important;
     transition: none !important;
 }
}

/* On tablets the map uses the full playable width.  Its engine retains the
   native 543px coordinate system and enlarges through the responsive zoom,
   so the surrounding frame must follow the scaled map plus its rulers. */
@media screen and (min-width: 761px) and (max-width: 1024px) {
    body.map #center #contentOuterContainer {
        position: relative !important;
        top: calc(50vh - 30px) !important;
        width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;
        z-index: 1100 !important;
    }

    body.map #center #contentOuterContainer .contentContainer,
    body.map #center #contentOuterContainer #content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.map #center #contentOuterContainer #mapContainer {
        width: 543px !important;
        max-width: none !important;
        margin: 0 auto 12px !important;
    }

    /* Keep the vertical map ruler compact on tablets.  The map is enlarged
       with CSS zoom, so its native 25px width became an oversized 35px rail. */
    body.map #mapContainer .ruler.y {
        right: -18px !important;
        left: auto !important;
        width: 18px !important;
    }

    body.map #mapContainer .ruler.y .rulerContainer,
    body.map #mapContainer .ruler.y .coordinate {
        width: 18px !important;
    }
}

/* Hero consumable use window. It is a self-owned component and does not use
   the legacy nine-slice game dialog, so no old frame is rendered underneath. */
body.hero_inventory.trav47-hero-use-open {
    overflow: hidden !important;
}

body.hero_inventory .trav47HeroUseModal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: grid;
    place-items: center;
    padding: 18px;
    box-sizing: border-box;
    background: rgba(25, 29, 22, .58);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    direction: rtl;
}

#contentOuterContainer.trav47HeroWindow.trav47HeroTabLoading .trav47HeroContent {
    pointer-events: none;
}

.trav47HeroTabStatus {
    display: none;
    margin: 5px 7px;
    padding: 5px 8px;
    border: 1px solid #c9b98d;
    border-radius: 5px;
    background: #f7f1dc;
    color: #5c654f;
    font: 700 11px/17px Tahoma, Arial, sans-serif;
    text-align: center;
}

.trav47HeroTabStatus:not(:empty) {
    display: block;
}

.trav47HeroTabStatus.is-error {
    border-color: #d0a29b;
    background: #fff0ed;
    color: #9b3026;
}

body.hero_inventory .trav47HeroUsePanel {
    width: min(228px, calc(100vw - 42px));
    max-height: calc(100dvh - 36px);
    overflow: hidden auto;
    box-sizing: border-box;
    border: 1px solid #776746;
    border-radius: 7px;
    background: #f5f2e6;
    box-shadow: 0 14px 38px rgba(18, 21, 16, .56), inset 0 0 0 1px rgba(255, 250, 226, .7);
    color: #3e4737;
    font-family: Tahoma, Arial, sans-serif;
    animation: trav47HeroUseEnter 150ms ease-out both;
}

/* Equipment needs room for long item names and effect descriptions. Keep the
   compact consumable dialog unchanged. */
body.hero_inventory .trav47HeroUsePanel.trav47HeroEquipmentPanel {
    width: min(340px, calc(100vw - 24px));
}

body.hero_inventory .trav47HeroEquipmentPanel .trav47HeroUseBody {
    padding: 9px;
}

body.hero_inventory .trav47HeroEquipmentPanel .trav47HeroUseIntro {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    min-height: 66px;
    padding: 8px 9px;
}

body.hero_inventory .trav47HeroEquipmentPanel .trav47HeroUsePreview {
    width: 50px;
    height: 50px;
}

body.hero_inventory .trav47HeroEquipmentPanel .trav47HeroUseCopy {
    gap: 4px;
}

body.hero_inventory .trav47HeroEquipmentPanel .trav47HeroUseItemName {
    overflow: visible;
    font-size: 12px;
    line-height: 18px;
    text-overflow: clip;
    white-space: normal;
}

body.hero_inventory .trav47HeroEquipmentPanel .trav47HeroUseMessage {
    font-size: 11px;
    line-height: 17px;
}

body.hero_inventory .trav47HeroUseHeader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 3px 34px;
    box-sizing: border-box;
    border-bottom: 1px solid #57492f;
    background: linear-gradient(180deg, #5b6145 0%, #3c432f 100%);
    box-shadow: inset 0 1px rgba(255, 248, 211, .13);
    color: #fff8df;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    text-shadow: 0 1px rgba(24, 27, 19, .8);
}

body.hero_inventory .trav47HeroUseClose {
    position: absolute;
    top: 4px;
    left: 5px;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(222, 208, 154, .62);
    border-radius: 5px;
    background: rgba(32, 37, 26, .42);
    box-shadow: inset 0 1px rgba(255,255,255,.08);
    color: #fff4d4;
    font: 700 15px/21px Arial, sans-serif;
    text-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

body.hero_inventory .trav47HeroUsePanel button::before,
body.hero_inventory .trav47HeroUsePanel button::after {
    content: none !important;
    display: none !important;
}

body.hero_inventory .trav47HeroUseClose:hover,
body.hero_inventory .trav47HeroUseClose:focus-visible {
    background: rgba(99, 112, 65, .72);
}

body.hero_inventory .trav47HeroUseBody {
    padding: 7px;
    background: linear-gradient(180deg, #faf8ef 0%, #eee9da 100%);
}

body.hero_inventory .trav47HeroUseIntro {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 46px;
    padding: 5px 7px;
    box-sizing: border-box;
    border: 1px solid #d1c7a8;
    border-radius: 6px;
    background: rgba(255, 253, 244, .86);
}

body.hero_inventory .trav47HeroUsePreview {
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 1px solid #9c895e;
    border-radius: 5px;
    background-color: #444a35;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: inset 0 0 0 1px rgba(239, 220, 161, .14);
}

body.hero_inventory .trav47HeroUseCopy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
}

body.hero_inventory .trav47HeroUseItemName {
    display: block;
    overflow: hidden;
    color: #39482f;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hero_inventory .trav47HeroUseMessage {
    display: block;
    color: #46513e;
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    text-align: right;
}

body.hero_inventory .trav47HeroUseQuantity {
    display: grid;
    grid-template-columns: auto 58px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 5px 7px;
    border: 1px solid #d1c7a8;
    border-radius: 6px;
    background: rgba(255, 253, 244, .72);
}

body.hero_inventory .trav47HeroUseQuantity label {
    color: #4b5543;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

body.hero_inventory .trav47HeroUseQuantity input {
    width: 58px !important;
    height: 25px !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    box-sizing: border-box !important;
    border: 1px solid #9c895e !important;
    border-radius: 5px !important;
    outline: 0 !important;
    background: #fffef8 !important;
    box-shadow: inset 0 1px 2px rgba(58, 50, 32, .12) !important;
    color: #394132 !important;
    font: 700 12px/20px Tahoma, Arial, sans-serif !important;
    text-align: center !important;
}

body.hero_inventory .trav47HeroUseQuantity input:focus {
    border-color: #73993c !important;
    box-shadow: 0 0 0 2px rgba(115,153,60,.17), inset 0 1px 2px rgba(58,50,32,.1) !important;
}

body.hero_inventory .trav47HeroUseAvailable {
    color: #77806f;
    font-size: 10px;
    line-height: 15px;
    text-align: left;
    white-space: nowrap;
}

body.hero_inventory .trav47HeroUsePanel #heroInventoryDataDialog {
    width: 100%;
    margin: 6px 0 0;
    overflow: hidden;
    border: 1px solid #d1c7a8;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 6px;
    background: rgba(255, 253, 244, .78);
}

body.hero_inventory .trav47HeroUsePanel #heroInventoryDataDialog th,
body.hero_inventory .trav47HeroUsePanel #heroInventoryDataDialog td {
    padding: 4px 6px;
    border: 0;
    border-bottom: 1px solid #e0d8c0;
    color: #4a5442;
    font-size: 11px;
    line-height: 17px;
}

body.hero_inventory .trav47HeroUsePanel #heroInventoryDataDialog tr:last-child th,
body.hero_inventory .trav47HeroUsePanel #heroInventoryDataDialog tr:last-child td {
    border-bottom: 0;
}

body.hero_inventory .trav47HeroUsePanel #heroInventoryDataDialog th {
    text-align: right;
}

body.hero_inventory .trav47HeroUsePanel #heroInventoryDataDialog td {
    width: 76px;
    color: #394132;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

body.hero_inventory .trav47HeroUsePanel #heroInventoryDataDialog .rowAfterUse th,
body.hero_inventory .trav47HeroUsePanel #heroInventoryDataDialog .rowAfterUse td {
    color: #6d8f34;
    font-weight: 700;
}

body.hero_inventory .trav47HeroUseActions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 7px 7px;
    background: #eee9da;
}

body.hero_inventory .trav47HeroUseActions button {
    min-width: 76px;
    min-height: 27px;
    margin: 0;
    padding: 3px 11px;
    box-sizing: border-box;
    border-radius: 5px;
    font: 700 11px/18px Tahoma, Arial, sans-serif;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
}

body.hero_inventory .trav47HeroUsePanel button.trav47HeroUseSubmit {
    border: 1px solid #4f761e !important;
    background: linear-gradient(180deg, #8fbd46, #609225) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.36), 0 1px 2px rgba(52,75,26,.26) !important;
    color: #fff !important;
    text-shadow: 0 1px rgba(34,57,13,.6) !important;
}

body.hero_inventory .trav47HeroUsePanel button.trav47HeroUseSubmit:hover,
body.hero_inventory .trav47HeroUsePanel button.trav47HeroUseSubmit:focus-visible {
    background: linear-gradient(180deg, #9aca50, #6b9f2d) !important;
}

body.hero_inventory .trav47HeroUseCancel {
    border: 1px solid #aa9c78;
    background: linear-gradient(180deg, #fffdf5, #ded5be);
    box-shadow: inset 0 1px #fff;
    color: #555c4e;
    text-shadow: none;
}

body.hero_inventory .trav47HeroUseCancel:hover,
body.hero_inventory .trav47HeroUseCancel:focus-visible {
    background: linear-gradient(180deg, #fffef9, #e8dfc9);
}

@keyframes trav47HeroUseEnter {
    from { opacity: 0; transform: translateY(7px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

span.heroAttributeInformation {
    color: #5DCBFB;
}

div.hero_inventory .statusWrapper {
    margin-right: 10px;
    margin-left: 10px;
    max-width: 100%;
    padding: 0;
    width: auto;
}

div.hero_inventory #hero_level p {
    position: absolute;
    top: 2px;
    right: 10px;
}

div.hero_inventory .bar-bg {
    background-color: #ffffff;
    height: 8px;
    border: 1px solid #C6C6C6;
    padding: 1px;
    margin: 1px;
}

div.hero_inventory .bar {
    background-color: #006900;
    height: 100%;
    float: right;
}

div.hero_inventory h4 {
    width: 100%;
    right: 0;
    margin-bottom: 10px;
}

div.hero_inventory h4 img {
    margin-left: 8px;
}

div.hero_inventory #itemsToSale {
    margin: 0px 4px 0 2px;
}

div.hero_inventory .market .buy, div.hero_inventory .market .sell {
    margin-right: 15px;
}

div.hero_inventory #hero_body_container {
    position: relative;
    width: 300px;
    height: 422px;
}

div.hero_inventory #hero_body, div.hero_inventory #hero_body_content {
    position: absolute;
    right: 1px;
    top: 0;
    width: 300px;
    height: 422px;
}

div.hero_inventory #hero_body {
    overflow: hidden;
}

div.hero_inventory #hero_body .heroBodyImage {
    width: 330px;
    position: relative;
}

div.hero_inventory #hero_body .heroBodyImage-LTR {
    left: -30px;
}

div.hero_inventory #hero_body .heroBodyImage-RTL {
    right: 0;
}

div.hero_inventory #hero_body_content .content .draggable {
    background-image: url('../../images/hero/full/heroBodyItem.png');
}

div.hero_inventory #hero_body_content .content #bag.draggable {
    background-image: url('../../images/hero/full/heroBodyItemBag.png');
    width: 81px;
    height: 81px;
}

div.hero_inventory #hero_body_content .content .item {
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 50;
}

div.hero_inventory #hero_body_content #shoes .item.onHero .amount, div.hero_inventory #hero_body_content #horse .item.onHero .amount, div.hero_inventory #hero_body_content #rightHand .item.onHero .amount, div.hero_inventory #hero_body_content #leftHand .item.onHero .amount, div.hero_inventory #hero_body_content #helmet .item.onHero .amount, div.hero_inventory #hero_body_content #body .item.onHero .amount {
    display: none;
}

div.hero_inventory #hero_body_content .content #bag .item {
    width: 81px;
    height: 81px;
    display: none;
}

div.hero_inventory #hero_body_content .content #bag .item.onHero, div.hero_inventory #hero_body_content .content #bag .item.whileDragging {
    display: block;
}

div.hero_inventory #hero_body_content .content #bag .amount {
    display: block;
}

div.hero_inventory .heroHidden {
    float: right;
    margin-top: 15px;
    margin-right: 23px;
}

div.hero_inventory .heroHidden input.check {
    position: relative;
    top: 1px;
}

div.hero_inventory .market {
    display: flex;
    justify-content: center;
    gap: 7px;
    background: #ffffff;
    margin: 5px 2px 2px 4px;
    padding: 7px 5px;
    width: 246px;
    float: right;
}

div.hero_inventory .market > a.buy.arrow,
div.hero_inventory .market > a.sell.arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 27px;
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #9cabb2;
    border-radius: 5px;
    background: linear-gradient(#ffffff, #dbe6eb);
    box-shadow: inset 0 1px #ffffff, 0 1px 1px rgba(45, 68, 80, .25);
    color: #38505d;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
    text-shadow: 0 1px #ffffff;
}

div.hero_inventory .market > a.buy.arrow:hover,
div.hero_inventory .market > a.sell.arrow:hover {
    border-color: #718d9b;
    background: linear-gradient(#ffffff, #c9d9e1);
    color: #223d4c;
}

div.hero_inventory div.attribute.regenerate .element.resourceDemandCaption {
    margin-top: 0;
}

div.hero_inventory .regenerateCosts .showCosts {
    padding: 0;
    margin: 0;
    width: 100%;
}

div.hero_inventory .regenerateCosts .showCosts .resourceWrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto auto auto auto auto 1fr;
    grid-template-columns: auto auto auto auto auto 1fr;
    margin-bottom: 10px;
}

div.hero_inventory .regenerateCosts .showCosts .resourceWrapper .clocks {
    -ms-grid-row-align: center;
    align-self: center;
    -ms-grid-column-align: end;
    justify-self: end;
    display: inline-block;
    -ms-grid-column: 6;
    grid-column-start: 6;
    min-width: 70px;
}

div.hero_inventory #bodyOptions {
    float: right;
    width: 300px;
    margin-right: -23px;
}

div.hero_inventory #hero_body_content .content .draggable:hover, div.hero_inventory #hero_body_content .content .draggable.heroMarked {
    background-position: right bottom;
}

div.hero_inventory #hero_body_content .content .draggable.disabled:hover, div.hero_inventory #hero_body_content .content .draggable.disabled.heroMarked {
    background-position: right top;
}

div.hero_inventory #hero_body_content .content .draggable.disabled .item, div.hero_inventory #hero_body_content .content .item.disabled {
    cursor: not-allowed;
}

/* Held wird in RTL nicht gespiegelt */
div.hero_inventory #hero_body_content #helmet {
    position: absolute;
    left: 133px;
    top: 39px;
}

div.hero_inventory #hero_body_content .gender_female #helmet {
    position: absolute;
    left: 133px;
    top: 50px;
}

div.hero_inventory #hero_body_content #leftHand {
    position: absolute;
    left: 182px;
    top: 189px;
}

div.hero_inventory #hero_body_content #rightHand {
    position: absolute;
    left: 84px;
    top: 189px;
}

div.hero_inventory #hero_body_content #body {
    position: absolute;
    left: 133px;
    top: 116px;
}

div.hero_inventory #hero_body_content #horse {
    position: absolute;
    left: 30px;
    top: 300px;
}

div.hero_inventory #hero_body_content #shoes {
    position: absolute;
    left: 133px;
    top: 350px;
}

div.hero_inventory #hero_body_content #bag {
    position: absolute;
    left: 215px;
    top: 310px;
}

div.hero_inventory #hero_inventory {
    width: 269px;
    float: left;
}

div.hero_inventory #hero_inventory .boxes-contents {
    padding: 4px 0;
}

div.hero_inventory .pointsHeadline {
    float: left;
    font-weight: bold;
    width: 70px;
    text-align: center;
    margin-bottom: 8px;
}

div.hero_inventory .changeResourcesHeadline {
    margin-bottom: 6px;
    margin-top: 2ex;
    font-weight: bold;
}

div.hero_inventory .experience {
    margin-bottom: 2px;
}

div.hero_inventory .boxes .headline {
    padding-bottom: 3px;
    padding-top: 2ex;
}

div.hero_inventory #hero_body_content .content div.draggable {
    width: 60px;
    height: 60px;
}

div.hero_inventory #attributes .boxes {
    margin-bottom: 10px;
    padding: 1px;
}

div.hero_inventory #attributes .boxes .boxes-contents {
    padding-top: 10px;
}

div.hero_inventory #attributes {
    margin-bottom: 10px;
    width: 100%;
}

div.hero_inventory #attributes .roundedCornersBox:first-of-type {
    padding-top: 10px;
    margin-bottom: 10px;
}

div.hero_inventory #attributes .roundedCornersBox h4 {
    margin-bottom: 0;
    height: 24px;
    box-sizing: border-box;
}

div.hero_inventory #attributes .roundedCornersBox:last-of-type {
    margin-bottom: 10px;
}

div.hero_inventory #attributes .header {
    margin-bottom: 1px;
    font-weight: bold;
}

div.hero_inventory #attributes .resourcePick {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto auto auto auto auto auto;
    grid-template-columns: auto auto auto auto auto auto;
}

.ie div.hero_inventory #attributes .resourcePick {
    display: flex;
}

div.hero_inventory #attributes .resourcePick .resource {
    grid-column-start: auto;
}

div.hero_inventory #attributes .resourcePick .resource:nth-child(1) {
    -ms-grid-column: 1;
}

div.hero_inventory #attributes .resourcePick .resource:nth-child(2) {
    -ms-grid-column: 2;
}

div.hero_inventory #attributes .resourcePick .resource:nth-child(3) {
    -ms-grid-column: 3;
}

div.hero_inventory #attributes .resourcePick .resource:nth-child(4) {
    -ms-grid-column: 4;
}

div.hero_inventory #attributes .resourcePick .resource:nth-child(5) {
    -ms-grid-column: 5;
}

div.hero_inventory #attributes .resourcePick .resource:nth-child(6) {
    -ms-grid-column: 6;
}

div.hero_inventory #attributes .resourcePick .resource label {
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-columns: auto auto 1fr;
    grid-template-columns: auto auto 1fr;
    -ms-grid-row-align: center;
    align-self: center;
}

div.hero_inventory #attributes .resourcePick .resource label input, div.hero_inventory #attributes .resourcePick .resource label span, div.hero_inventory #attributes .resourcePick .resource label i {
    -ms-grid-row-align: center;
    align-self: center;
}

div.hero_inventory #attributes .resourcePick .resource label input, div.hero_inventory #attributes .resourcePick .resource label i {
    margin-left: 5px;
}

div.hero_inventory #attributes .resourcePick .resource label input {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row: 1;
    grid-row-start: 1;
}

div.hero_inventory #attributes .resourcePick .resource label i {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
}

div.hero_inventory #attributes .resourcePick .resource label span {
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-row: 1;
    grid-row-start: 1;
    display: inline-block;
}

.ie div.hero_inventory #attributes .resourcePick .resource {
    width: 16.66%;
}

div.hero_inventory #attributes #setResource,
div.hero_inventory #attributes .attackBehaviour {
    margin-right: 15px;
}

div.hero_inventory #attributes .resource.last {
    margin-left: 0;
    width: auto;
}

.gecko div.hero_inventory #attributes .resource .baseCrop {
    margin-top: 2px;
}

div.hero_inventory .heroPropertiesContent .roundedCornersBox {
    max-width: 100%;
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
    padding: 0;
}

div.hero_inventory #itemsToSale .inventory {
    width: 81px;
    height: 81px;
    text-align: center;
    margin: 2px;
    background-color: #FFFFFF;
    float: right;
    border: 1px solid #b9b9b9;
}

div.hero_inventory .trav47HeroAnimalResources {
    box-sizing: border-box;
    width: 100%;
    margin: 8px 0 0;
    padding: 8px;
    border: 1px solid #9f8a59;
    border-radius: 4px;
    background: linear-gradient(180deg, #f3ead1, #d9c99f);
    color: #47391f;
}

div.hero_inventory .trav47HeroAnimalResourcesTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

div.hero_inventory .trav47HeroAnimalResourcesHeading {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: right;
}

div.hero_inventory .trav47HeroAnimalResourcesHeading strong {
    font-size: 14px;
}

div.hero_inventory .trav47HeroAnimalResourcesHeading span {
    color: #6e5c37;
    font-size: 11px;
}

div.hero_inventory .trav47HeroAnimalResourcesActions {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    width: 136px;
}

div.hero_inventory .trav47HeroAnimalResourcesActions button,
div.hero_inventory .trav47HeroResourceModalPanel footer button {
    box-sizing: border-box;
    width: 100%;
    min-height: 26px;
    margin: 0;
    padding: 2px 7px;
    border: 1px solid #587820;
    border-radius: 3px;
    background: linear-gradient(#8daf42, #638728);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    cursor: pointer;
}

div.hero_inventory .trav47HeroAnimalResourcesActions button:last-child,
div.hero_inventory .trav47HeroResourceModalPanel footer button:last-child {
    border-color: #8a742f;
    background: linear-gradient(#c4a548, #94752b);
}

div.hero_inventory .trav47HeroAnimalResourcesActions button:disabled,
div.hero_inventory .trav47HeroResourceModalPanel footer button:disabled {
    border-color: #8d8d86;
    background: linear-gradient(#b8b8b2, #92928c);
    color: #eeeeea;
    opacity: .82;
    cursor: default;
}

div.hero_inventory .trav47HeroAnimalResourceGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}

div.hero_inventory .trav47HeroAnimalResource {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-areas: "icon amount" "name name";
    align-items: center;
    gap: 2px 4px;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 7px 6px;
    border: 1px solid #b5a171;
    border-radius: 4px;
    background: rgba(255, 252, 237, .78);
    text-align: center;
}

div.hero_inventory .trav47HeroAnimalResourceIcon {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

div.hero_inventory .trav47HeroAnimalResourceAmount {
    grid-area: amount;
    min-width: 0;
    overflow: hidden;
    color: #3d331d;
    font-size: 12px;
    font-weight: 700;
    direction: ltr;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.hero_inventory .trav47HeroAnimalResourceName {
    grid-area: name;
    color: #6c5933;
    font-size: 10px;
}

body.trav47-hero-resource-modal-open {
    overflow: hidden;
}

div.hero_inventory .trav47HeroResourceModal[hidden] {
    display: none !important;
}

div.hero_inventory .trav47HeroResourceModal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 16px;
    direction: rtl;
}

div.hero_inventory .trav47HeroResourceModalBackdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(18, 20, 15, .68);
    cursor: default;
}

div.hero_inventory .trav47HeroResourceModalPanel {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(430px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    border: 1px solid #9b8248;
    border-radius: 7px;
    background: #eee3c7;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .42);
    color: #49391e;
}

div.hero_inventory .trav47HeroResourceModalPanel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #b9a16c;
    background: linear-gradient(#7f8950, #626d3c);
    color: #fffaf0;
}

div.hero_inventory .trav47HeroResourceModalPanel > header > div {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
}

div.hero_inventory .trav47HeroResourceModalPanel > header strong {
    font-size: 15px;
}

div.hero_inventory .trav47HeroResourceModalPanel > header span {
    color: #e4e7cf;
    font-size: 10px;
}

div.hero_inventory .trav47HeroResourceModalClose {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(43, 49, 28, .34);
    color: #fff;
    font: 700 20px/24px Arial, sans-serif;
    cursor: pointer;
}

div.hero_inventory .trav47HeroResourceTransferForm {
    margin: 0;
    padding: 12px;
}

div.hero_inventory .trav47HeroResourceTransferFields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

div.hero_inventory .trav47HeroResourceTransferFields label {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    color: #574522;
    font-size: 11px;
    font-weight: 700;
}

div.hero_inventory .trav47HeroResourceTransferFields label > span {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
}

div.hero_inventory .trav47HeroResourceTransferLabel > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

div.hero_inventory .trav47HeroResourceTransferLabel b {
    color: #745d28;
    font-size: 11px;
    direction: ltr;
    white-space: nowrap;
}

div.hero_inventory .trav47HeroResourceTransferFields input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 34px;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid #a99568;
    border-radius: 4px;
    background: #fffdf6;
    color: #392d19;
    font-size: 13px;
    font-weight: 700;
    direction: ltr;
    text-align: center;
}

div.hero_inventory .trav47HeroResourceModalStatus {
    min-height: 16px;
    margin: 8px 0 0;
    color: #426315;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

div.hero_inventory .trav47HeroResourceModalStatus.is-error {
    color: #9a3024;
}

div.hero_inventory .trav47HeroResourceModalPanel footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 2px;
}

div.hero_inventory .trav47HeroResourceNotice {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 7px;
    padding: 7px 9px;
    border: 1px solid #77933d;
    border-radius: 4px;
    background: #edf5dc;
    color: #385312;
    font-weight: 700;
    text-align: center;
}

div.hero_inventory .trav47HeroResourceNotice.is-error {
    border-color: #b2675a;
    background: #f8e4df;
    color: #7e281d;
}

div.hero_inventory #itemsToSale .inventory .item {
    width: 81px;
    height: 81px;
    text-align: center;
    padding: 0;
    cursor: pointer;
}

div.hero_inventory #itemsToSale .inventory .item.highlight {
    z-index: 2;
    background-color: #fce6c4;
    width: 81px;
    height: 81px;
}

div.hero_inventory #itemsToSale .inventory .item:hover {
    background-color: #eee;
}

div.hero_inventory #itemsToSale .inventory .item.disabled:hover {
    cursor: not-allowed;
    background-color: transparent;
}

div.hero_inventory #itemsToSale .inventory .item.whileDragging, div.hero_inventory #hero_body_content .content .item.whileDragging {
    background-color: #fce6c4;
    z-index: 51;
    width: 81px;
    height: 81px;
    border: 1px solid #b9b9b9;
}

img.itemCategory {
    background-image: url('../../images/hero/full/item.gif');
    width: 16px;
    height: 16px;
}

img.itemCategory_helmet {
    background-position: 0 0px;
}

img.itemCategory_body {
    background-position: 0 -26px;
}

img.itemCategory_leftHand {
    background-position: 0 -52px;
}

img.itemCategory_rightHand {
    background-position: 0 -78px;
}

img.itemCategory_shoes {
    background-position: 0 -104px;
}

img.itemCategory_horse {
    background-position: 0 -130px;
}

img.itemCategory_bandage25 {
    background-position: 0 -156px;
}

img.itemCategory_bandage33 {
    background-position: 0 -182px;
}

img.itemCategory_cage {
    background-position: 0 -208px;
}

img.itemCategory_scroll {
    background-position: 0 -234px;
}

img.itemCategory_ointment {
    background-position: 0 -260px;
}

img.itemCategory_bucketOfWater {
    background-position: 0 -286px;
}

img.itemCategory_bookOfWisdom {
    background-position: 0 -312px;
}

img.itemCategory_lawTables {
    background-position: 0 -338px;
}

img.itemCategory_artWork {
    background-position: 0 -364px;
}

/* Heldeneditor */
#heroEditor .image {
    position: relative;
    height: 330px;
    width: 254px;
    right: 4px;
    top: 6px;
    z-index: 1;
}

#heroEditor .head {
    position: relative;
    height: 340px;
    width: 261px;
    float: right;
}

#heroEditor .attributes {
    float: left;
    width: 269px;
}

#heroEditor .attributes .boxes-contents {
    padding: 4px 0;
}

#heroEditor .attributes .boxes.gender {
    margin-bottom: 10px;
}

#heroEditor .attributes .container,
#heroEditor .attributes .gender-container {
    background-color: #FFFFFF;
    margin: 2px 6px;
    border-bottom: 1px solid #C0C0C0;
}

#heroEditor .attributes .container .info,
#heroEditor .attributes .gender-container .info {
    border: 1px solid #C0C0C0;
    border-bottom: 0;
    width: 255px;
    /*height: 24px */
    float: right;
}

#heroEditor .attributes .container .infoOpen {
    background-color: #ececec;
}

#heroEditor.genderSwitch.female .attributes .container #beard {
    display: none;
}

#heroEditor .attributes #random {
    float: right;
}

#heroEditor .attributes #save {
    float: left;
}

#heroEditor .attributes .container .info .headline {
    background-position: left 4px;
    width: 246px;
    height: 24px;
    line-height: 24px;
}

#heroEditor .attributes .gender-container .info .headline {
    margin-top: 2px;
    line-height: 24px;
}

#heroEditor .attributes .container .info .title,
#heroEditor .attributes .gender-container .info .title {
    padding-right: 9px;
    display: block;
    color: #333333;
    font-weight: normal;
}

#heroEditor .attributes .container .info .title {
    cursor: pointer;
}

#heroEditor .attributes .boxes.gender .gender-container .info .title {
    width: 50%;
    float: right;
}

#heroEditor .attributes .boxes.gender .gender-container .info #genderButtons {
    float: left;
    margin-left: 10px;
    height: 26px;
}

#heroEditor .attributes .boxes.gender .gender-container .info #genderButtons img {
    position: absolute;
    background: url('../../images/hero/full/gender.png') transparent no-repeat;
    width: 18px;
    height: 18px;
    left: 4px;
    top: 3px;
}

#heroEditor .attributes .boxes.gender .gender-container .info #genderButtons img.heroEditorActivateFemale {
    background-position: right -28px;
}

#heroEditor .attributes .container .info .title:hover {
    color: #333333;
}

#heroEditor .attributes .container .info .headline .expander {
    position: absolute;
    right: 230px;
}

#heroEditor .attributes .container .info .details {
    border-top: 1px solid #C0C0C0;
    background: #ececec;
    padding: 2px 7px;
    /* height: 152px */
    width: 241px;
    display: none;
}

#heroEditor .attributes .container .info .details .attribute {
    background-color: #ffffff;
    border: 1px solid #C0C0C0;
    float: right;
    width: 50px;
    height: 50px;
    padding: 9px 11px;
    margin: 3px;
    cursor: pointer;
}

#heroEditor .attributes .container .info .details .attribute:hover {
    background-color: #C0C0C0;
}

#heroEditor .attributes .options {
    margin-top: 8px;
}

#heroEditor .head div.tl, div.hero_inventory div.tl {
    position: absolute;
    background-image: url('../../images/ui/buttons/roundCorner/tl.png');
    background-position: top left;
    height: 33px;
    top: 0;
    left: 0;
    width: 100%;
}

#heroEditor .head div.tr, div.hero_inventory div.tr {
    background-image: url('../../images/ui/buttons/roundCorner/tr.png');
    background-position: top right;
    right: 0;
    top: 0;
    height: 33px;
}

#heroEditor .head div.bl, div.hero_inventory div.bl {
    position: absolute;
    background-image: url('../../images/ui/buttons/roundCorner/bl.png');
    background-position: top left;
    height: 33px;
    bottom: 0;
    left: 0;
    width: 100%;
}

#heroEditor .head div.br, div.hero_inventory div.br {
    background-image: url('../../images/ui/buttons/roundCorner/br.png');
    background-position: top right;
    right: 0;
    height: 33px;
}

#heroEditor .head div.bl,
#heroEditor .head div.br {
    z-index: 2;
}

div.hero_inventory div.tl,
div.hero_inventory div.tr,
div.hero_inventory div.bl,
div.hero_inventory div.br {
    display: none;
}

div.hero_inventory .market a {
    white-space: nowrap;
}

/* heroitems */
.item {
    width: 60px;
    height: 60px;
    background-color: transparent;
}

.male_item_1 {
    background-image: url('../../images/hero/full/male/items/item1.png');
}

.male_item_2 {
    background-image: url('../../images/hero/full/male/items/item2.png');
}

.male_item_3 {
    background-image: url('../../images/hero/full/male/items/item3.png');
}

.male_item_4 {
    background-image: url('../../images/hero/full/male/items/item4.png');
}

.male_item_5 {
    background-image: url('../../images/hero/full/male/items/item5.png');
}

.male_item_6 {
    background-image: url('../../images/hero/full/male/items/item6.png');
}

.male_item_7 {
    background-image: url('../../images/hero/full/male/items/item7.png');
}

.male_item_8 {
    background-image: url('../../images/hero/full/male/items/item8.png');
}

.male_item_9 {
    background-image: url('../../images/hero/full/male/items/item9.png');
}

.male_item_10 {
    background-image: url('../../images/hero/full/male/items/item10.png');
}

.male_item_11 {
    background-image: url('../../images/hero/full/male/items/item11.png');
}

.male_item_12 {
    background-image: url('../../images/hero/full/male/items/item12.png');
}

.male_item_13 {
    background-image: url('../../images/hero/full/male/items/item13.png');
}

.male_item_14 {
    background-image: url('../../images/hero/full/male/items/item14.png');
}

.male_item_15 {
    background-image: url('../../images/hero/full/male/items/item15.png');
}

.male_item_16 {
    background-image: url('../../images/hero/full/male/items/item16.png');
}

.male_item_17 {
    background-image: url('../../images/hero/full/male/items/item17.png');
}

.male_item_18 {
    background-image: url('../../images/hero/full/male/items/item18.png');
}

.male_item_19 {
    background-image: url('../../images/hero/full/male/items/item19.png');
}

.male_item_20 {
    background-image: url('../../images/hero/full/male/items/item20.png');
}

.male_item_21 {
    background-image: url('../../images/hero/full/male/items/item21.png');
}

.male_item_22 {
    background-image: url('../../images/hero/full/male/items/item22.png');
}

.male_item_23 {
    background-image: url('../../images/hero/full/male/items/item23.png');
}

.male_item_24 {
    background-image: url('../../images/hero/full/male/items/item24.png');
}

.male_item_25 {
    background-image: url('../../images/hero/full/male/items/item25.png');
}

.male_item_26 {
    background-image: url('../../images/hero/full/male/items/item26.png');
}

.male_item_27 {
    background-image: url('../../images/hero/full/male/items/item27.png');
}

.male_item_28 {
    background-image: url('../../images/hero/full/male/items/item28.png');
}

.male_item_29 {
    background-image: url('../../images/hero/full/male/items/item29.png');
}

.male_item_30 {
    background-image: url('../../images/hero/full/male/items/item30.png');
}

.male_item_31 {
    background-image: url('../../images/hero/full/male/items/item31.png');
}

.male_item_32 {
    background-image: url('../../images/hero/full/male/items/item32.png');
}

.male_item_33 {
    background-image: url('../../images/hero/full/male/items/item33.png');
}

.male_item_34 {
    background-image: url('../../images/hero/full/male/items/item34.png');
}

.male_item_35 {
    background-image: url('../../images/hero/full/male/items/item35.png');
}

.male_item_36 {
    background-image: url('../../images/hero/full/male/items/item36.png');
}

.male_item_37 {
    background-image: url('../../images/hero/full/male/items/item37.png');
}

.male_item_38 {
    background-image: url('../../images/hero/full/male/items/item38.png');
}

.male_item_39 {
    background-image: url('../../images/hero/full/male/items/item39.png');
}

.male_item_40 {
    background-image: url('../../images/hero/full/male/items/item40.png');
}

.male_item_41 {
    background-image: url('../../images/hero/full/male/items/item41.png');
}

.male_item_42 {
    background-image: url('../../images/hero/full/male/items/item42.png');
}

.male_item_43 {
    background-image: url('../../images/hero/full/male/items/item43.png');
}

.male_item_44 {
    background-image: url('../../images/hero/full/male/items/item44.png');
}

.male_item_45 {
    background-image: url('../../images/hero/full/male/items/item45.png');
}

.male_item_46 {
    background-image: url('../../images/hero/full/male/items/item46.png');
}

.male_item_47 {
    background-image: url('../../images/hero/full/male/items/item47.png');
}

.male_item_48 {
    background-image: url('../../images/hero/full/male/items/item48.png');
}

.male_item_49 {
    background-image: url('../../images/hero/full/male/items/item49.png');
}

.male_item_50 {
    background-image: url('../../images/hero/full/male/items/item50.png');
}

.male_item_51 {
    background-image: url('../../images/hero/full/male/items/item51.png');
}

.male_item_52 {
    background-image: url('../../images/hero/full/male/items/item52.png');
}

.male_item_53 {
    background-image: url('../../images/hero/full/male/items/item53.png');
}

.male_item_54 {
    background-image: url('../../images/hero/full/male/items/item54.png');
}

.male_item_55 {
    background-image: url('../../images/hero/full/male/items/item55.png');
}

.male_item_56 {
    background-image: url('../../images/hero/full/male/items/item56.png');
}

.male_item_57 {
    background-image: url('../../images/hero/full/male/items/item57.png');
}

.male_item_58 {
    background-image: url('../../images/hero/full/male/items/item58.png');
}

.male_item_59 {
    background-image: url('../../images/hero/full/male/items/item59.png');
}

.male_item_60 {
    background-image: url('../../images/hero/full/male/items/item60.png');
}

.male_item_61 {
    background-image: url('../../images/hero/full/male/items/item61.png');
}

.male_item_62 {
    background-image: url('../../images/hero/full/male/items/item62.png');
}

.male_item_63 {
    background-image: url('../../images/hero/full/male/items/item63.png');
}

.male_item_64 {
    background-image: url('../../images/hero/full/male/items/item64.png');
}

.male_item_65 {
    background-image: url('../../images/hero/full/male/items/item65.png');
}

.male_item_66 {
    background-image: url('../../images/hero/full/male/items/item66.png');
}

.male_item_67 {
    background-image: url('../../images/hero/full/male/items/item67.png');
}

.male_item_68 {
    background-image: url('../../images/hero/full/male/items/item68.png');
}

.male_item_69 {
    background-image: url('../../images/hero/full/male/items/item69.png');
}

.male_item_73 {
    background-image: url('../../images/hero/full/male/items/item73.png');
}

.male_item_74 {
    background-image: url('../../images/hero/full/male/items/item74.png');
}

.male_item_75 {
    background-image: url('../../images/hero/full/male/items/item75.png');
}

.male_item_76 {
    background-image: url('../../images/hero/full/male/items/item76.png');
}

.male_item_77 {
    background-image: url('../../images/hero/full/male/items/item77.png');
}

.male_item_78 {
    background-image: url('../../images/hero/full/male/items/item78.png');
}

.male_item_79 {
    background-image: url('../../images/hero/full/male/items/item79.png');
}

.male_item_80 {
    background-image: url('../../images/hero/full/male/items/item80.png');
}

.male_item_81 {
    background-image: url('../../images/hero/full/male/items/item81.png');
}

.male_item_82 {
    background-image: url('../../images/hero/full/male/items/item82.png');
}

.male_item_83 {
    background-image: url('../../images/hero/full/male/items/item83.png');
}

.male_item_84 {
    background-image: url('../../images/hero/full/male/items/item84.png');
}

.male_item_85 {
    background-image: url('../../images/hero/full/male/items/item85.png');
}

.male_item_86 {
    background-image: url('../../images/hero/full/male/items/item86.png');
}

.male_item_87 {
    background-image: url('../../images/hero/full/male/items/item87.png');
}

.male_item_88 {
    background-image: url('../../images/hero/full/male/items/item88.png');
}

.male_item_89 {
    background-image: url('../../images/hero/full/male/items/item89.png');
}

.male_item_90 {
    background-image: url('../../images/hero/full/male/items/item90.png');
}

.male_item_91 {
    background-image: url('../../images/hero/full/male/items/item91.png');
}

.male_item_92 {
    background-image: url('../../images/hero/full/male/items/item92.png');
}

.male_item_93 {
    background-image: url('../../images/hero/full/male/items/item93.png');
}

.male_item_94 {
    background-image: url('../../images/hero/full/male/items/item94.png');
}

.male_item_95 {
    background-image: url('../../images/hero/full/male/items/item95.png');
}

.male_item_96 {
    background-image: url('../../images/hero/full/male/items/item96.png');
}

.male_item_97 {
    background-image: url('../../images/hero/full/male/items/item97.png');
}

.male_item_98 {
    background-image: url('../../images/hero/full/male/items/item98.png');
}

.male_item_99 {
    background-image: url('../../images/hero/full/male/items/item99.png');
}

.male_item_100 {
    background-image: url('../../images/hero/full/male/items/item100.png');
}

.male_item_101 {
    background-image: url('../../images/hero/full/male/items/item101.png');
}

.male_item_102 {
    background-image: url('../../images/hero/full/male/items/item102.png');
}

.male_item_103 {
    background-image: url('../../images/hero/full/male/items/item103.png');
}

.male_item_104 {
    background-image: url('../../images/hero/full/male/items/item104.png');
}

.male_item_105 {
    background-image: url('../../images/hero/full/male/items/item105.png');
}

.male_item_106 {
    background-image: url('../../images/hero/full/male/items/item106.png');
}

.male_item_107 {
    background-image: url('../../images/hero/full/male/items/item107.png');
}

.male_item_108 {
    background-image: url('../../images/hero/full/male/items/item108.png');
}

.male_item_109 {
    background-image: url('../../images/hero/full/male/items/item109.png');
}

.male_item_110 {
    background-image: url('../../images/hero/full/male/items/item110.png');
}

.male_item_111 {
    background-image: url('../../images/hero/full/male/items/item111.png');
}

.male_item_112 {
    background-image: url('../../images/hero/full/male/items/item112.png');
}

.male_item_113 {
    background-image: url('../../images/hero/full/male/items/item113.png');
}

.male_item_114 {
    background-image: url('../../images/hero/full/male/items/item114.png');
}

.male_item_115 {
    background-image: url('../../images/hero/full/male/items/item115.png');
}

.male_item_116 {
    background-image: url('../../images/hero/full/male/items/item116.png');
}

.male_item_117 {
    background-image: url('../../images/hero/full/male/items/item117.png');
}

.male_item_118 {
    background-image: url('../../images/hero/full/male/items/item118.png');
}

.male_item_119 {
    background-image: url('../../images/hero/full/male/items/item119.png');
}

.male_item_120 {
    background-image: url('../../images/hero/full/male/items/item120.png');
}

.male_item_121 {
    background-image: url('../../images/hero/full/male/items/item121.png');
}

.male_item_122 {
    background-image: url('../../images/hero/full/male/items/item122.png');
}

.male_item_123 {
    background-image: url('../../images/hero/full/male/items/item123.png');
}

.male_item_124 {
    background-image: url('../../images/hero/full/male/items/item124.png');
}

.male_item_125 {
    background-image: url('../../images/hero/full/male/items/item125.png');
}

.male_item_126 {
    background-image: url('../../images/hero/full/male/items/item126.png');
}

.male_item_127 {
    background-image: url('../../images/hero/full/male/items/item127.png');
}

.male_item_128 {
    background-image: url('../../images/hero/full/male/items/item128.png');
}

.male_item_129 {
    background-image: url('../../images/hero/full/male/items/item129.png');
}

.male_item_130 {
    background-image: url('../../images/hero/full/male/items/item130.png');
}

.male_item_131 {
    background-image: url('../../images/hero/full/male/items/item131.png');
}

.male_item_132 {
    background-image: url('../../images/hero/full/male/items/item132.png');
}

.male_item_133 {
    background-image: url('../../images/hero/full/male/items/item133.png');
}

.male_item_134 {
    background-image: url('../../images/hero/full/male/items/item134.png');
}

.male_item_135 {
    background-image: url('../../images/hero/full/male/items/item135.png');
}

.male_item_136 {
    background-image: url('../../images/hero/full/male/items/item136.png');
}

.male_item_137 {
    background-image: url('../../images/hero/full/male/items/item137.png');
}

.male_item_138 {
    background-image: url('../../images/hero/full/male/items/item138.png');
}

.male_item_139 {
    background-image: url('../../images/hero/full/male/items/item139.png');
}

.male_item_140 {
    background-image: url('../../images/hero/full/male/items/item140.png');
}

.male_item_141 {
    background-image: url('../../images/hero/full/male/items/item141.png');
}

.male_item_142 {
    background-image: url('../../images/hero/full/male/items/item142.png');
}

.male_item_143 {
    background-image: url('../../images/hero/full/male/items/item143.png');
}

.male_item_144 {
    background-image: url('../../images/hero/full/male/items/item144.png');
}

.female_item_1 {
    background-image: url('../../images/hero/full/female/items/item1.png');
}

.female_item_2 {
    background-image: url('../../images/hero/full/female/items/item2.png');
}

.female_item_3 {
    background-image: url('../../images/hero/full/female/items/item3.png');
}

.female_item_4 {
    background-image: url('../../images/hero/full/female/items/item4.png');
}

.female_item_5 {
    background-image: url('../../images/hero/full/female/items/item5.png');
}

.female_item_6 {
    background-image: url('../../images/hero/full/female/items/item6.png');
}

.female_item_7 {
    background-image: url('../../images/hero/full/female/items/item7.png');
}

.female_item_8 {
    background-image: url('../../images/hero/full/female/items/item8.png');
}

.female_item_9 {
    background-image: url('../../images/hero/full/female/items/item9.png');
}

.female_item_10 {
    background-image: url('../../images/hero/full/female/items/item10.png');
}

.female_item_11 {
    background-image: url('../../images/hero/full/female/items/item11.png');
}

.female_item_12 {
    background-image: url('../../images/hero/full/female/items/item12.png');
}

.female_item_13 {
    background-image: url('../../images/hero/full/female/items/item13.png');
}

.female_item_14 {
    background-image: url('../../images/hero/full/female/items/item14.png');
}

.female_item_15 {
    background-image: url('../../images/hero/full/female/items/item15.png');
}

.female_item_16 {
    background-image: url('../../images/hero/full/female/items/item16.png');
}

.female_item_17 {
    background-image: url('../../images/hero/full/female/items/item17.png');
}

.female_item_18 {
    background-image: url('../../images/hero/full/female/items/item18.png');
}

.female_item_19 {
    background-image: url('../../images/hero/full/female/items/item19.png');
}

.female_item_20 {
    background-image: url('../../images/hero/full/female/items/item20.png');
}

.female_item_21 {
    background-image: url('../../images/hero/full/female/items/item21.png');
}

.female_item_22 {
    background-image: url('../../images/hero/full/female/items/item22.png');
}

.female_item_23 {
    background-image: url('../../images/hero/full/female/items/item23.png');
}

.female_item_24 {
    background-image: url('../../images/hero/full/female/items/item24.png');
}

.female_item_25 {
    background-image: url('../../images/hero/full/female/items/item25.png');
}

.female_item_26 {
    background-image: url('../../images/hero/full/female/items/item26.png');
}

.female_item_27 {
    background-image: url('../../images/hero/full/female/items/item27.png');
}

.female_item_28 {
    background-image: url('../../images/hero/full/female/items/item28.png');
}

.female_item_29 {
    background-image: url('../../images/hero/full/female/items/item29.png');
}

.female_item_30 {
    background-image: url('../../images/hero/full/female/items/item30.png');
}

.female_item_31 {
    background-image: url('../../images/hero/full/female/items/item31.png');
}

.female_item_32 {
    background-image: url('../../images/hero/full/female/items/item32.png');
}

.female_item_33 {
    background-image: url('../../images/hero/full/female/items/item33.png');
}

.female_item_34 {
    background-image: url('../../images/hero/full/female/items/item34.png');
}

.female_item_35 {
    background-image: url('../../images/hero/full/female/items/item35.png');
}

.female_item_36 {
    background-image: url('../../images/hero/full/female/items/item36.png');
}

.female_item_37 {
    background-image: url('../../images/hero/full/female/items/item37.png');
}

.female_item_38 {
    background-image: url('../../images/hero/full/female/items/item38.png');
}

.female_item_39 {
    background-image: url('../../images/hero/full/female/items/item39.png');
}

.female_item_40 {
    background-image: url('../../images/hero/full/female/items/item40.png');
}

.female_item_41 {
    background-image: url('../../images/hero/full/female/items/item41.png');
}

.female_item_42 {
    background-image: url('../../images/hero/full/female/items/item42.png');
}

.female_item_43 {
    background-image: url('../../images/hero/full/female/items/item43.png');
}

.female_item_44 {
    background-image: url('../../images/hero/full/female/items/item44.png');
}

.female_item_45 {
    background-image: url('../../images/hero/full/female/items/item45.png');
}

.female_item_46 {
    background-image: url('../../images/hero/full/female/items/item46.png');
}

.female_item_47 {
    background-image: url('../../images/hero/full/female/items/item47.png');
}

.female_item_48 {
    background-image: url('../../images/hero/full/female/items/item48.png');
}

.female_item_49 {
    background-image: url('../../images/hero/full/female/items/item49.png');
}

.female_item_50 {
    background-image: url('../../images/hero/full/female/items/item50.png');
}

.female_item_51 {
    background-image: url('../../images/hero/full/female/items/item51.png');
}

.female_item_52 {
    background-image: url('../../images/hero/full/female/items/item52.png');
}

.female_item_53 {
    background-image: url('../../images/hero/full/female/items/item53.png');
}

.female_item_54 {
    background-image: url('../../images/hero/full/female/items/item54.png');
}

.female_item_55 {
    background-image: url('../../images/hero/full/female/items/item55.png');
}

.female_item_56 {
    background-image: url('../../images/hero/full/female/items/item56.png');
}

.female_item_57 {
    background-image: url('../../images/hero/full/female/items/item57.png');
}

.female_item_58 {
    background-image: url('../../images/hero/full/female/items/item58.png');
}

.female_item_59 {
    background-image: url('../../images/hero/full/female/items/item59.png');
}

.female_item_60 {
    background-image: url('../../images/hero/full/female/items/item60.png');
}

.female_item_61 {
    background-image: url('../../images/hero/full/female/items/item61.png');
}

.female_item_62 {
    background-image: url('../../images/hero/full/female/items/item62.png');
}

.female_item_63 {
    background-image: url('../../images/hero/full/female/items/item63.png');
}

.female_item_64 {
    background-image: url('../../images/hero/full/female/items/item64.png');
}

.female_item_65 {
    background-image: url('../../images/hero/full/female/items/item65.png');
}

.female_item_66 {
    background-image: url('../../images/hero/full/female/items/item66.png');
}

.female_item_67 {
    background-image: url('../../images/hero/full/female/items/item67.png');
}

.female_item_68 {
    background-image: url('../../images/hero/full/female/items/item68.png');
}

.female_item_69 {
    background-image: url('../../images/hero/full/female/items/item69.png');
}

.female_item_73 {
    background-image: url('../../images/hero/full/female/items/item73.png');
}

.female_item_74 {
    background-image: url('../../images/hero/full/female/items/item74.png');
}

.female_item_75 {
    background-image: url('../../images/hero/full/female/items/item75.png');
}

.female_item_76 {
    background-image: url('../../images/hero/full/female/items/item76.png');
}

.female_item_77 {
    background-image: url('../../images/hero/full/female/items/item77.png');
}

.female_item_78 {
    background-image: url('../../images/hero/full/female/items/item78.png');
}

.female_item_79 {
    background-image: url('../../images/hero/full/female/items/item79.png');
}

.female_item_80 {
    background-image: url('../../images/hero/full/female/items/item80.png');
}

.female_item_81 {
    background-image: url('../../images/hero/full/female/items/item81.png');
}

.female_item_82 {
    background-image: url('../../images/hero/full/female/items/item82.png');
}

.female_item_83 {
    background-image: url('../../images/hero/full/female/items/item83.png');
}

.female_item_84 {
    background-image: url('../../images/hero/full/female/items/item84.png');
}

.female_item_85 {
    background-image: url('../../images/hero/full/female/items/item85.png');
}

.female_item_86 {
    background-image: url('../../images/hero/full/female/items/item86.png');
}

.female_item_87 {
    background-image: url('../../images/hero/full/female/items/item87.png');
}

.female_item_88 {
    background-image: url('../../images/hero/full/female/items/item88.png');
}

.female_item_89 {
    background-image: url('../../images/hero/full/female/items/item89.png');
}

.female_item_90 {
    background-image: url('../../images/hero/full/female/items/item90.png');
}

.female_item_91 {
    background-image: url('../../images/hero/full/female/items/item91.png');
}

.female_item_92 {
    background-image: url('../../images/hero/full/female/items/item92.png');
}

.female_item_93 {
    background-image: url('../../images/hero/full/female/items/item93.png');
}

.female_item_94 {
    background-image: url('../../images/hero/full/female/items/item94.png');
}

.female_item_95 {
    background-image: url('../../images/hero/full/female/items/item95.png');
}

.female_item_96 {
    background-image: url('../../images/hero/full/female/items/item96.png');
}

.female_item_97 {
    background-image: url('../../images/hero/full/female/items/item97.png');
}

.female_item_98 {
    background-image: url('../../images/hero/full/female/items/item98.png');
}

.female_item_99 {
    background-image: url('../../images/hero/full/female/items/item99.png');
}

.female_item_100 {
    background-image: url('../../images/hero/full/female/items/item100.png');
}

.female_item_101 {
    background-image: url('../../images/hero/full/female/items/item101.png');
}

.female_item_102 {
    background-image: url('../../images/hero/full/female/items/item102.png');
}

.female_item_103 {
    background-image: url('../../images/hero/full/male/items/item103.png');
}

.female_item_104 {
    background-image: url('../../images/hero/full/male/items/item104.png');
}

.female_item_105 {
    background-image: url('../../images/hero/full/male/items/item105.png');
}

.female_item_106 {
    background-image: url('../../images/hero/full/male/items/item106.png');
}

.female_item_107 {
    background-image: url('../../images/hero/full/male/items/item107.png');
}

.female_item_108 {
    background-image: url('../../images/hero/full/male/items/item108.png');
}

.female_item_109 {
    background-image: url('../../images/hero/full/male/items/item109.png');
}

.female_item_110 {
    background-image: url('../../images/hero/full/male/items/item110.png');
}

.female_item_111 {
    background-image: url('../../images/hero/full/male/items/item111.png');
}

.female_item_112 {
    background-image: url('../../images/hero/full/male/items/item112.png');
}

.female_item_113 {
    background-image: url('../../images/hero/full/male/items/item113.png');
}

.female_item_114 {
    background-image: url('../../images/hero/full/male/items/item114.png');
}

.female_item_115 {
    background-image: url('../../images/hero/full/female/items/item115.png');
}

.female_item_116 {
    background-image: url('../../images/hero/full/female/items/item116.png');
}

.female_item_117 {
    background-image: url('../../images/hero/full/female/items/item117.png');
}

.female_item_118 {
    background-image: url('../../images/hero/full/female/items/item118.png');
}

.female_item_119 {
    background-image: url('../../images/hero/full/female/items/item119.png');
}

.female_item_120 {
    background-image: url('../../images/hero/full/female/items/item120.png');
}

.female_item_121 {
    background-image: url('../../images/hero/full/female/items/item121.png');
}

.female_item_122 {
    background-image: url('../../images/hero/full/female/items/item122.png');
}

.female_item_123 {
    background-image: url('../../images/hero/full/female/items/item123.png');
}

.female_item_124 {
    background-image: url('../../images/hero/full/female/items/item124.png');
}

.female_item_125 {
    background-image: url('../../images/hero/full/female/items/item125.png');
}

.female_item_126 {
    background-image: url('../../images/hero/full/female/items/item126.png');
}

.female_item_127 {
    background-image: url('../../images/hero/full/female/items/item127.png');
}

.female_item_128 {
    background-image: url('../../images/hero/full/female/items/item128.png');
}

.female_item_129 {
    background-image: url('../../images/hero/full/female/items/item129.png');
}

.female_item_130 {
    background-image: url('../../images/hero/full/female/items/item130.png');
}

.female_item_131 {
    background-image: url('../../images/hero/full/female/items/item131.png');
}

.female_item_132 {
    background-image: url('../../images/hero/full/female/items/item132.png');
}

.female_item_133 {
    background-image: url('../../images/hero/full/female/items/item133.png');
}

.female_item_134 {
    background-image: url('../../images/hero/full/female/items/item134.png');
}

.female_item_135 {
    background-image: url('../../images/hero/full/female/items/item135.png');
}

.female_item_136 {
    background-image: url('../../images/hero/full/female/items/item136.png');
}

.female_item_137 {
    background-image: url('../../images/hero/full/female/items/item137.png');
}

.female_item_138 {
    background-image: url('../../images/hero/full/female/items/item138.png');
}

.female_item_139 {
    background-image: url('../../images/hero/full/female/items/item139.png');
}

.female_item_140 {
    background-image: url('../../images/hero/full/female/items/item140.png');
}

.female_item_141 {
    background-image: url('../../images/hero/full/female/items/item141.png');
}

.female_item_142 {
    background-image: url('../../images/hero/full/female/items/item142.png');
}

.female_item_143 {
    background-image: url('../../images/hero/full/female/items/item143.png');
}

.female_item_144 {
    background-image: url('../../images/hero/full/female/items/item144.png');
}

/*---------- Hero - Horse Toggle ---------- */
/*--------------------------------------------- */
#horseToggleBox {
    width: 100%;
}

#horseToggleBox > div {
    float: right;
    border: solid 1px #e7e7e7;
    position: relative;
    border-radius: 5px;
    transition-duration: 500ms;
}

#horseToggleBox > div#horseToggleMounted {
    float: left;
}

#horseToggleBox > div.active {
    border: solid 1px #a3c840;
    cursor: default;
}

#horseToggleBox > div .background {
    width: 270px;
    height: 313px;
    z-index: 1;
    transition-duration: 500ms;
}

#horseToggleBox > div.active .background {
    opacity: 1;
}

#horseToggleBox > div#horseToggleUnmounted .background {
    background-image: url('../../images/hero/full/horseToggle/hero-background-1-rtl.png');
}

#horseToggleBox > div#horseToggleMounted .background {
    background-image: url('../../images/hero/full/horseToggle/hero-background-2-rtl.png');
}

#horseToggleBox > div .details {
    width: 92%;
    background-color: rgba(255, 255, 255, 0.6);
    height: 64px;
    position: absolute;
    bottom: 8px;
    right: 50%;
    margin-right: -46%;
    border-radius: 4px;
    z-index: 4;
    text-align: center;
}

#horseToggleBox > div .details span {
    display: inline-block;
    width: 100%;
    text-align: center;
}

#horseToggleBox > div .details .speed {
    padding: 5px;
    font-size: 110%;
    color: #333333;
    margin-top: 5px;
}

#horseToggleBox > div .details .state {
    padding: 5px;
    width: auto;
    background: rgba(158, 215, 87, 0.5);
    position: relative;
    font-size: 110%;
    font-weight: bold;
}

#horseToggleBox > div .details .button button {
    width: 82%;
    text-align: center;
}

#horseToggleBox > div .details .button button .button-content {
    font-size: 13px;
}

.rtl #horseToggleBox > div .details .button button .button-content {
    font-size: 14px;
}

#horseToggleBox > div .details .state:before {
    background: -webkit-linear-gradient(left, transparent, rgba(158, 215, 87, 0.5));
    background: -o-linear-gradient(left, transparent, rgba(158, 215, 87, 0.5));
    background: -moz-linear-gradient(left, transparent, rgba(158, 215, 87, 0.5));
    background: linear-gradient(to left, transparent, rgba(158, 215, 87, 0.5));
    content: "";
    width: 80px;
    height: 26px;
    position: absolute;
    right: -80px;
    top: 0px;
}

#horseToggleBox > div .details .state:after {
    background: -webkit-linear-gradient(left, rgba(158, 215, 87, 0.5), transparent);
    background: -o-linear-gradient(left, rgba(158, 215, 87, 0.5), transparent);
    background: -moz-linear-gradient(left, rgba(158, 215, 87, 0.5), transparent);
    background: linear-gradient(to left, rgba(158, 215, 87, 0.5), transparent);
    content: "";
    width: 80px;
    height: 26px;
    position: absolute;
    left: -80px;
    top: 0px;
}

#horseToggleBox > div.inactive .details .state,
#horseToggleBox > div.active .details .button {
    display: none;
}

#horseToggleBox > div .hero {
    width: 100%;
    position: absolute;
    z-index: 2;
}

#horseToggleBox > div#horseToggleMounted .hero {
    height: 98%;
    position: absolute;
    text-align: center;
}

#horseToggleBox > div#horseToggleUnmounted .hero {
    height: 98%;
    text-align: right;
}

#horseToggleBox .hero img {
    max-width: 220px;
    margin-top: 20px;
}

#horseToggleBox > div#horseToggleUnavailable {
    height: 90.5%;
    width: 552px;
    border: solid 1px #a3c840;
    cursor: default;
}

#horseToggleBox > div .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 3;
    transition-duration: 500ms;
}

#horseToggleBox > div.active .overlay {
    opacity: 0;
}

#horseToggleBox > div.inactive.hover .background {
    opacity: 0.4;
}

#horseToggleBox > div.inactive.hover .overlay {
    opacity: 0;
}

#horseToggleBox > div#horseToggleUnavailable > .overlay {
    opacity: 1;
    border-radius: 5px;
}

#horseToggleBox > div#horseToggleUnavailable > .background {
    width: 100%;
    margin-top: 1px;
    background: url('../../images/hero/full/horseToggle/heroNotInHomeVillageBackground-rtl.png') no-repeat bottom center;
}

#horseToggleBox > div#horseToggleUnavailable > .background.state3,
#horseToggleBox > div#horseToggleUnavailable > .background.state4,
#horseToggleBox > div#horseToggleUnavailable > .background.state5,
#horseToggleBox > div#horseToggleUnavailable > .background.state9,
#horseToggleBox > div#horseToggleUnavailable > .background.state40,
#horseToggleBox > div#horseToggleUnavailable > .background.state50 {
    background-image: url('../../images/hero/full/horseToggle/heroNotInHomeVillageOnthewayBackground-rtl.png');
}

#horseToggleBox > div#horseToggleUnavailable > .background.state103 {
    background-image: url('../../images/hero/full/horseToggle/heroNotInHomeVillageDefendingBackground-rtl.png');
}

#horseToggleBox > div#horseToggleUnavailable > .background.state102 {
    background-image: url('../../images/hero/full/horseToggle/heroNotInHomeVillageCapturedBackground-rtl.png');
}

#horseToggleBox > div#horseToggleUnavailable > .hero {
    width: 270px;
    height: 313px;
    z-index: 1;
    right: 0;
}

#horseToggleBox > div#horseToggleUnavailable > .hero.mounted {
    left: 0;
    right: auto;
}

#horseToggleBox > div#horseToggleUnavailable > .hero.state3,
#horseToggleBox > div#horseToggleUnavailable > .hero.state4,
#horseToggleBox > div#horseToggleUnavailable > .hero.state5,
#horseToggleBox > div#horseToggleUnavailable > .hero.state9,
#horseToggleBox > div#horseToggleUnavailable > .hero.state40,
#horseToggleBox > div#horseToggleUnavailable > .hero.state50,
#horseToggleBox > div#horseToggleUnavailable > .hero.state103,
#horseToggleBox > div#horseToggleUnavailable > .hero.state102 {
    display: none;
}

#horseToggleBox > div#horseToggleUnavailable > .hero.dead {
    height: 78.5%;
    background: url('../../images/hero/full/horseToggle/heroTombstone-rtl.png') no-repeat bottom center;
    margin-right: 25px;
    width: 527px;
}

#horseToggleBox > div#horseToggleUnavailable > .details .heroStatus,
#horseToggleBox > div#horseToggleUnavailable > .details .message {
    height: 16px;
    line-height: 16px;
    padding: 5px;
    font-size: 14px;
    color: #333333;
    margin-top: 5px;
    width: auto;
    display: block;
}

.rtl #horseToggleBox > div#horseToggleUnavailable > .details .heroStatus, .rtl
#horseToggleBox > div#horseToggleUnavailable > .details .message {
    font-size: 15px;
}

#horseToggleBox > div#horseToggleUnavailable > .details .heroStatus {
    font-weight: bold;
}

#horseToggleBox > div#horseToggleUnavailable > .details .message {
    font-size: 13px;
}

.rtl #horseToggleBox > div#horseToggleUnavailable > .details .message {
    font-size: 14px;
}

/* Match the saved open/closed state before the hero attributes markup is
   painted. The early classes are removed synchronously after DOM-ready has
   applied the same state to the real controls. */
html.trav47HeroAttributesPreclosed body.hero_inventory #attributes .heroPropertiesContent {
    display: none !important;
}

html.trav47HeroAttributesPreopened body.hero_inventory #attributes .heroPropertiesContent {
    display: block !important;
}

html.trav47HeroAttributesPreclosed body.hero_inventory #attributes .openCloseSwitchBar .openedClosedSwitch {
    background-image: url('../../images/icons/closed-rtl.png') !important;
}

html.trav47HeroAttributesPreopened body.hero_inventory #attributes .openCloseSwitchBar .openedClosedSwitch {
    background-image: url('../../images/icons/opened-rtl.png') !important;
}

/* Hero attribute presentation: visual layer only, kept separate from the game logic. */
div.hero_inventory #attributes .trav47HeroStatusPanel {
    border: 1px solid #c4d1d9;
    border-radius: 7px;
    background: #f7fafb;
    box-shadow: inset 0 0 0 1px #ffffff, 0 1px 2px rgba(48, 76, 94, .18);
    overflow: hidden;
}

div.hero_inventory #attributes .trav47HeroStatusPanel .boxes-contents {
    padding: 9px 12px 8px;
    background: linear-gradient(180deg, #ffffff 0%, #edf3f6 100%);
}

div.hero_inventory #attributes .trav47HeroStatusPanel .heroStatus {
    margin: 0 0 3px;
    color: #344b5a;
}

div.hero_inventory #attributes .trav47HeroStatusRows {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 4px;
}

div.hero_inventory #attributes .trav47HeroStatusRow {
    display: flex;
    align-items: center;
    min-width: 0;
}

div.hero_inventory #attributes .trav47HeroStatusName {
    width: 122px;
    min-width: 122px;
    max-width: 122px;
    padding: 0 0 0 8px;
    color: #314956;
    font-weight: bold;
    white-space: nowrap;
}

div.hero_inventory #attributes .trav47HeroStatIcon {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-left: 5px;
    vertical-align: -6px;
    background: center / contain no-repeat;
}

div.hero_inventory #attributes .health .trav47HeroStatIcon:before {
    content: none;
}

div.hero_inventory #attributes .health .trav47HeroStatIcon {
    background-image: url('../../images/attributeHealth.png');
}

div.hero_inventory #attributes .experience .trav47HeroStatIcon:before {
    content: none;
}

div.hero_inventory #attributes .experience .trav47HeroStatIcon {
    background-image: url('../../images/attributeExperience.png');
}

div.hero_inventory #attributes .trav47HeroStatusValue {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    padding: 0 5px 0 2px;
    text-align: left;
    direction: rtl;
}

div.hero_inventory #attributes .trav47HeroStatusValue .value {
    display: inline-block;
    min-width: 31px;
    padding: 2px 5px;
    border: 1px solid #b7c8d1;
    border-radius: 4px;
    background: linear-gradient(#ffffff, #e8f0f4);
    box-shadow: inset 0 1px #fff;
    color: #38505d;
    font-weight: bold;
    text-align: center;
}

div.hero_inventory #attributes .trav47HeroStatusProgress {
    width: auto;
    min-width: 150px;
    max-width: none;
    flex: 1 1 auto;
}

div.hero_inventory #attributes .trav47HeroStatusProgress .bar-bg {
    height: 11px;
    margin: 0;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #91aab8;
    border-radius: 8px;
    background: linear-gradient(#d6e2e8, #b7c9d3);
    box-shadow: inset 0 1px 2px rgba(48, 76, 94, .22), 0 1px #ffffff;
}

div.hero_inventory #attributes .trav47HeroStatusProgress .bar {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(#c7e75d, #5e9d1b);
    box-shadow: inset 0 1px rgba(255,255,255,.58);
}

div.hero_inventory #attributes .trav47HeroStatusRow.experience .bar {
    background: linear-gradient(#83c9f4, #287bb7);
}

@media screen and (min-width: 761px) {
    body.hero_inventory.rtl #attributes.hero-alive .trav47HeroStatusRow.health,
    body.hero_inventory.rtl #attributes.hero-alive .trav47HeroStatusRow.experience {
        flex-wrap: nowrap;
    }

    body.hero_inventory.rtl #attributes.hero-alive .trav47HeroStatusRow.health .trav47HeroStatusProgress,
    body.hero_inventory.rtl #attributes.hero-alive .trav47HeroStatusRow.experience .trav47HeroStatusProgress {
        order: 2;
        width: 195px;
        min-width: 195px;
        max-width: 195px;
        flex: 0 0 auto;
    }

    body.hero_inventory.rtl #attributes.hero-alive .trav47HeroStatusRow.health .trav47HeroStatusValue,
    body.hero_inventory.rtl #attributes.hero-alive .trav47HeroStatusRow.experience .trav47HeroStatusValue {
        order: 3;
        width: 54px;
        min-width: 54px;
        max-width: 54px;
        padding-right: 8px;
        padding-left: 0;
        text-align: left;
        direction: ltr;
    }
}

div.hero_inventory #attributes .trav47HeroQuickRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid #d3e0e6;
}

div.hero_inventory #attributes .trav47HeroQuickRow .speed {
    display: inline-flex;
    align-items: center;
    color: #38505d;
    font-weight: bold;
    white-space: nowrap;
}

div.hero_inventory #attributes .trav47HeroQuickIcon {
    display: inline-block;
    width: 21px;
    height: 21px;
    margin-left: 5px;
    vertical-align: middle;
    background: center / contain no-repeat;
}

div.hero_inventory #attributes .speedIcon:before {
    content: none;
}

div.hero_inventory #attributes .speedIcon {
    background-image: url('../../images/attributeSpeed.png');
}

div.hero_inventory #attributes .productionIcon:before {
    content: none;
}

div.hero_inventory #attributes .trav47HeroQuickProduction .production {
    display: inline-flex;
    float: none;
    align-items: center;
    gap: 0;
    direction: rtl;
    color: #38505d;
    white-space: nowrap;
}

div.hero_inventory #attributes .trav47HeroQuickProductionLabel,
div.hero_inventory #attributes .trav47HeroQuickProductionMain,
div.hero_inventory #attributes .trav47HeroQuickCropBonus {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

div.hero_inventory #attributes .trav47HeroQuickProductionLabel {
    margin-right: 2px;
}

div.hero_inventory #attributes .trav47HeroQuickProductionMain,
div.hero_inventory #attributes .trav47HeroQuickCropBonus {
    gap: 2px;
    direction: rtl;
    font-variant-numeric: tabular-nums;
}

div.hero_inventory #attributes .trav47HeroQuickProductionMain {
    margin-right: 3px;
}

div.hero_inventory #attributes .trav47HeroQuickCropBonus {
    margin-right: 4px;
}

div.hero_inventory #attributes .trav47HeroQuickProductionMain strong,
div.hero_inventory #attributes .trav47HeroQuickCropBonus strong {
    color: #3f5c36;
    font-size: 11px;
}

div.hero_inventory #attributes .trav47HeroQuickRow .production img {
    margin: 0 2px;
    vertical-align: middle;
}

div.hero_inventory #attributes .heroPropertiesContent {
    border: 1px solid #c4d1d9;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(180deg, #ffffff, #f0f5f7);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}

div.hero_inventory #attributes .heroPropertiesContent.hide {
    display: none !important;
}

div.hero_inventory #attributes .trav47HeroSelectedResourceSummary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 9px;
    color: #657661;
    font-size: 11px;
    font-weight: normal;
    white-space: nowrap;
}

div.hero_inventory #attributes .trav47HeroSelectedResourceSummary strong {
    color: #4f732f;
    font-weight: bold;
}

div.hero_inventory #attributes .trav47HeroSelectedResourceSummary i {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    background-position: center;
    background-repeat: no-repeat;
}

div.hero_inventory #attributes .heroPropertiesContent .changeResourcesHeadline,
div.hero_inventory #attributes .trav47HeroAttackPanel .changeResourcesHeadline {
    color: #38505d;
    font-weight: 800 !important;
    font-size: 16px !important;
}

div.hero_inventory #attributes .heroPropertiesContent #setResource,
div.hero_inventory #attributes .trav47HeroAttackPanel .attackBehaviour {
    margin: 9px 12px;
}

div.hero_inventory #attributes .heroPropertiesContent .resourcePick .resource label {
    padding: 4px 5px;
    border: 1px solid transparent;
    border-radius: 4px;
}

div.hero_inventory #attributes .heroPropertiesContent .resourcePick .resource label:hover {
    border-color: #9db7c5;
    background: #f1f7fa;
}

div.hero_inventory #attributes .trav47HeroBenefits {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 0 8px;
    border: 0;
    border-top: 1px solid #aebca7;
    border-radius: 0;
    overflow: hidden;
    background: #f5f4ed;
    box-sizing: border-box;
}

div.hero_inventory #attributes .trav47HeroBenefitsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid #bdcbb6;
    background: linear-gradient(#eaf2e5, #dce8d6);
}

div.hero_inventory #attributes .trav47HeroBenefitsTitle h3,
div.hero_inventory #attributes .trav47HeroBenefitsTitle p {
    margin: 0;
}

div.hero_inventory #attributes .trav47HeroBenefitsTitle h3 {
    color: #344e30;
    font-size: 14px;
}

div.hero_inventory #attributes .trav47HeroBenefitsTitle p {
    color: #687363;
    font-size: 11px;
}

div.hero_inventory #attributes .trav47HeroAvailablePoints {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 7px;
    border: 1px solid #9eb28f;
    border-radius: 14px;
    background: rgba(255,255,255,.7);
    color: #52634c;
    font-weight: bold;
    white-space: nowrap;
}

div.hero_inventory #attributes .trav47HeroAvailablePoints strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 22px;
    border-radius: 11px;
    background: #648d34;
    color: #fff;
}

div.hero_inventory #attributes .trav47HeroBenefitHeaderTools {
    display: flex;
    align-items: center;
    gap: 5px;
    direction: rtl;
    flex: 0 0 auto;
}

div.hero_inventory #attributes .trav47HeroWisdomButton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    min-width: 32px;
    margin: 0;
    padding: 2px;
    border: 1px solid #8ea17f;
    border-radius: 7px;
    background: linear-gradient(#fffef8, #e3eadb);
    box-shadow: inset 0 1px rgba(255,255,255,.95), 0 1px 2px rgba(55,72,45,.18);
    cursor: pointer;
    box-sizing: border-box;
}

div.hero_inventory #attributes .trav47HeroWisdomButton:hover,
div.hero_inventory #attributes .trav47HeroWisdomButton:focus-visible {
    border-color: #66883c;
    background: linear-gradient(#fff, #dce9d0);
    box-shadow: 0 0 0 2px rgba(112,151,64,.18);
}

div.hero_inventory #attributes .trav47HeroWisdomIcon {
    display: block;
    width: 24px;
    height: 24px;
    background-position: center !important;
    background-size: contain !important;
}

div.hero_inventory #attributes .trav47HeroWisdomCount {
    position: absolute;
    left: -4px;
    bottom: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border: 1px solid #fff;
    border-radius: 8px;
    background: #567f2e;
    color: #fff;
    font: 700 10px/15px Tahoma, Arial, sans-serif;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    box-sizing: border-box;
}

.trav47HeroUsePreview.trav47HeroWisdomPreview {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.trav47HeroWisdomStatus {
    min-height: 16px;
    margin-top: 5px;
    color: #60705a;
    font-size: 11px;
    text-align: center;
}

.trav47HeroWisdomStatus.is-error {
    color: #a12d24;
}

div.hero_inventory #attributes .trav47HeroBenefitList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 9px;
}

div.hero_inventory #attributes .trav47HeroBenefitCard {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 8px;
    border: 1px solid #c5cec0;
    border-radius: 5px;
    background: linear-gradient(#fffef8, #edeee6);
    box-sizing: border-box;
}

div.hero_inventory #attributes .trav47HeroBenefitHeading,
div.hero_inventory #attributes .trav47HeroBenefitControls {
    display: flex;
    align-items: center;
    gap: 6px;
}

div.hero_inventory #attributes .trav47HeroBenefitHeading {
    justify-content: space-between;
}

div.hero_inventory #attributes .trav47HeroBenefitName {
    color: #354a32;
    font-weight: bold;
}

div.hero_inventory #attributes .trav47HeroBenefitEffect {
    min-width: 58px;
    padding: 2px 6px;
    border: 1px solid #afbea7;
    border-radius: 12px;
    background: #eef5e9;
    color: #466332;
    font-weight: bold;
    text-align: center;
}

div.hero_inventory #attributes .trav47HeroBenefitDescription {
    margin: 0;
    overflow: hidden;
    color: #6b7367;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.hero_inventory #attributes .trav47HeroBenefitProgress {
    position: relative;
    flex: 1 1 auto;
    height: 9px;
    overflow: hidden;
    border: 1px solid #aeb9a9;
    border-radius: 5px;
    background: #dbe1d7;
}

div.hero_inventory #attributes .trav47HeroBenefitBase,
div.hero_inventory #attributes .trav47HeroBenefitPending {
    position: absolute;
    top: 0;
    bottom: 0;
}

div.hero_inventory #attributes .trav47HeroBenefitBase {
    right: 0;
    background: linear-gradient(90deg, #709b3c, #96bd61);
}

div.hero_inventory #attributes .trav47HeroBenefitPending {
    background: linear-gradient(90deg, #cf982c, #efbf50);
}

div.hero_inventory #attributes .trav47HeroPointButton,
div.hero_inventory #attributes .trav47HeroBenefitPoints {
    width: 29px;
    height: 29px;
    margin: 0;
    padding: 0;
    border: 1px solid #789b50;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
}

div.hero_inventory #attributes .trav47HeroPointButton {
    background: linear-gradient(#91bd56, #5f8d2d);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}

div.hero_inventory #attributes .trav47HeroPointSubtract {
    border-color: #9ea897;
    background: linear-gradient(#f8f7f0, #dadfd5);
    color: #4f5e4a;
}

div.hero_inventory #attributes .trav47HeroBenefitPoints {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border-color: #bdc9b8;
    border-radius: 14px;
    background: #e8eee4;
    color: #344b30;
    font-weight: bold;
}

div.hero_inventory #attributes .trav47HeroBenefitInput {
    display: none;
}

div.hero_inventory #attributes .trav47HeroBenefits:not(.has-available-points) .trav47HeroPointButton {
    display: none;
}

div.hero_inventory #attributes .trav47HeroBenefits:not(.has-available-points) .trav47HeroBenefitsSave,
div.hero_inventory #attributes .trav47HeroBenefits:not(.has-available-points) .trav47HeroBenefitsReset {
    display: none;
}

div.hero_inventory #attributes .trav47HeroBenefitsActions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 9px;
}

div.hero_inventory #attributes .trav47HeroBenefitsReset {
    min-width: 84px;
    min-height: 29px;
    border: 1px solid #a5aea0;
    border-radius: 5px;
    background: linear-gradient(#fffef8, #dfe3da);
    color: #4c5b47;
    font-weight: bold;
}

div.hero_inventory #attributes .trav47HeroBenefitsSaveStatus {
    flex-basis: 100%;
    min-height: 17px;
    color: #687264;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
}

div.hero_inventory #attributes .trav47HeroBenefitsSaveStatus.is-success { color: #4b7f24; }
div.hero_inventory #attributes .trav47HeroBenefitsSaveStatus.is-error { color: #b04432; }

div.hero_inventory #attributes .trav47HeroBenefits thead th {
    height: 25px;
    padding: 0 8px;
    border-bottom: 1px solid #bfd0d9;
    background: linear-gradient(#f9fcfd, #e3eef3);
    color: #345064;
    text-shadow: 0 1px #ffffff;
}

div.hero_inventory #attributes .trav47HeroBenefits .headline {
    width: auto;
    font-size: 13px;
}

div.hero_inventory #attributes .trav47HeroBenefits tbody tr:nth-child(even) td {
    background: #f3f7f9;
}

div.hero_inventory #attributes .trav47HeroBenefits tbody td {
    height: 30px;
    padding: 4px 6px;
    border-bottom: 1px solid #deeaef;
    vertical-align: middle;
}

div.hero_inventory #attributes .trav47HeroBenefits tbody tr:last-child td {
    border-bottom: 0;
}

div.hero_inventory #attributes .trav47HeroBenefits .attribName {
    width: 155px;
    min-width: 155px;
    max-width: 155px;
    padding-right: 6px;
    color: #344d5c;
    font-weight: bold;
}

div.hero_inventory #attributes .trav47HeroBenefits .attribName:before {
    display: inline-block;
    width: 24px;
    height: 25px;
    margin-left: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-align: center;
    vertical-align: -8px;
}

div.hero_inventory #attributes .trav47HeroBenefits .power .attribName:before { content: ""; background-image: url('../../images/attributeStrength.png'); }
div.hero_inventory #attributes .trav47HeroBenefits .offBonus .attribName:before { content: ""; background-image: url('../../images/attributeOffBonus.png'); }
div.hero_inventory #attributes .trav47HeroBenefits .defBonus .attribName:before { content: ""; background-image: url('../../images/attributeDefBonus.png'); }
div.hero_inventory #attributes .trav47HeroBenefits .productionPoints .attribName:before { content: ""; background-image: url('../../images/attributeRessourceBonus.png'); }

div.hero_inventory #attributes .trav47HeroBenefits .powervalue {
    width: 62px;
    min-width: 62px;
    max-width: 62px;
    padding: 3px 4px;
    position: relative;
    text-align: center;
    direction: ltr;
}

div.hero_inventory #attributes .trav47HeroBenefits .powervalue .percentage {
    position: absolute;
    top: 50%;
    right: calc(100% + 3px);
    display: block;
    margin: 0;
    color: #38505d;
    font-weight: bold;
    line-height: 1;
    transform: translateY(-50%);
    white-space: nowrap;
}

div.hero_inventory #attributes .trav47HeroBenefits .powervalue .value {
    position: relative;
    transform: translateX(12px);
}

div.hero_inventory #attributes .trav47HeroBenefits .points {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    text-align: center;
}

div.hero_inventory #attributes .trav47HeroBenefits .progress {
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    padding-left: 8px;
}

div.hero_inventory #attributes .trav47HeroBenefits .bar {
    background: linear-gradient(#8ccdf0, #2d78ae);
}

div.hero_inventory #attributes .trav47HeroBenefits .bar.setted {
    background: linear-gradient(#d8ed73, #7baa22);
}

/* Keep the point-distribution columns inside the desktop content frame.
   The original fixed widths did not include cell padding, so the table grew
   past its container as soon as the +/- controls were rendered. */
@media screen and (min-width: 761px) {
    div.hero_inventory #attributes,
    div.hero_inventory #attributes .heroPropertiesContent {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    div.hero_inventory #attributes .trav47HeroBenefits {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    div.hero_inventory #attributes .trav47HeroBenefits th,
    div.hero_inventory #attributes .trav47HeroBenefits td {
        box-sizing: border-box;
    }

    div.hero_inventory #attributes .trav47HeroBenefits .attribName {
        width: 145px;
        min-width: 145px;
        max-width: 145px;
    }

    div.hero_inventory #attributes .trav47HeroBenefits .progress {
        width: 180px;
        min-width: 180px;
        max-width: 180px;
    }

    div.hero_inventory #attributes .trav47HeroBenefits .points {
        width: 54px;
        min-width: 54px;
        max-width: 54px;
        padding-right: 3px;
        padding-left: 3px;
    }

    div.hero_inventory #attributes .trav47HeroBenefits .pointsValueSetter {
        width: 26px;
        min-width: 26px;
        max-width: 26px;
        padding-right: 4px;
        padding-left: 4px;
    }

    div.hero_inventory #attributes .trav47HeroBenefits .powervalue {
        width: 62px;
        min-width: 62px;
        max-width: 62px;
    }
}

div.hero_inventory #attributes #saveHeroAttributes {
    min-width: 116px;
    min-height: 29px;
    padding: 0 12px;
    border: 1px solid #4a8b55;
    border-radius: 5px;
    background: linear-gradient(#86c96d, #4d9a53);
    box-shadow: inset 0 1px rgba(255,255,255,.65), 0 1px 1px rgba(42,82,49,.24);
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 1px rgba(34, 79, 40, .55);
}

div.hero_inventory #attributes #saveHeroAttributes .button-background {
    display: none;
}

div.hero_inventory #attributes #saveHeroAttributes .button-container,
div.hero_inventory #attributes #saveHeroAttributes .button-content {
    position: static;
    height: auto;
    margin: 0;
    padding: 0;
    color: inherit;
    line-height: 27px;
}

div.hero_inventory #attributes #saveHeroAttributes.disabled,
div.hero_inventory #attributes #saveHeroAttributes:disabled {
    border-color: #b8c6cd;
    background: linear-gradient(#edf3f5, #d7e2e7);
    box-shadow: inset 0 1px #ffffff;
    color: #758994;
    text-shadow: none;
    opacity: 1;
}

div.hero_inventory #attributes.hero-dead > .roundedCornersBox.lightRed {
    border: 1px solid #c4d1d9;
    border-radius: 7px;
    background: #f7fafb;
    box-shadow: inset 0 0 0 1px #ffffff, 0 1px 2px rgba(48, 76, 94, .18);
    overflow: hidden;
}

div.hero_inventory #attributes.hero-dead > .roundedCornersBox.lightRed .boxes-contents {
    padding: 11px 13px;
    background: linear-gradient(180deg, #ffffff 0%, #edf3f6 100%);
}

div.hero_inventory #attributes.hero-dead .heroStatusMessage.header.error {
    padding: 5px 0 2px;
    color: #9c3b20;
    font-size: 14px;
    font-weight: bold;
}

div.hero_inventory #attributes.hero-dead .heroHome {
    margin: 0;
    color: #38505d;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.45;
}

div.hero_inventory #attributes.hero-dead .resourceWrapper,
div.hero_inventory #attributes.hero-dead .lineWrapper {
    padding: 7px 0;
    border-bottom: 1px solid #deeaef;
}

div.hero_inventory #attributes.hero-dead .lineWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    direction: rtl;
}

div.hero_inventory #attributes.hero-dead .lineWrapper .duration,
div.hero_inventory #attributes.hero-dead .lineWrapper button,
div.hero_inventory #attributes.hero-dead .lineWrapper .startTraining {
    float: none;
    margin: 0;
}

div.hero_inventory #attributes.hero-dead .reviveHeroForm {
    position: relative;
    z-index: 20;
    display: block;
    margin: 0;
    padding: 0;
    pointer-events: auto !important;
}

div.hero_inventory #attributes.hero-dead #reviveHero {
    position: relative;
    z-index: 21;
    display: block;
    pointer-events: auto !important;
    touch-action: manipulation;
    cursor: pointer;
}

div.hero_inventory #attributes.hero-dead #reviveHero .button-container,
div.hero_inventory #attributes.hero-dead #reviveHero .button-background,
div.hero_inventory #attributes.hero-dead #reviveHero .button-content {
    pointer-events: none;
}

div.hero_inventory #attributes.hero-dead .startTraining.disabled,
div.hero_inventory #attributes.hero-dead .startTraining:disabled {
    cursor: not-allowed;
}

div.hero_inventory #attributes.hero-dead .startTraining.disabled .button-background,
div.hero_inventory #attributes.hero-dead .startTraining:disabled .button-background {
    filter: grayscale(1);
    opacity: .58;
}

div.hero_inventory #attributes.hero-dead .startTraining.disabled .button-content,
div.hero_inventory #attributes.hero-dead .startTraining:disabled .button-content {
    color: #354b58;
    font-weight: bold;
    text-shadow: none;
}

div.hero_inventory #attributes.hero-dead .resourceWrapper .value,
div.hero_inventory #attributes.hero-dead .lineWrapper .duration .value {
    font-size: 13px;
    font-weight: bold;
}

@media screen and (max-width: 760px) {
    body.hero_inventory #attributes.hero-alive .trav47HeroStatusRow {
        direction: rtl;
        gap: 4px;
    }

    body.hero_inventory #attributes.hero-alive .trav47HeroStatusName {
        order: 1;
        width: 72px;
        min-width: 72px;
        max-width: 72px;
        padding: 0;
        direction: rtl;
        text-align: right;
    }

    body.hero_inventory #attributes.hero-alive .trav47HeroStatusValue {
        order: 3;
        width: auto;
        min-width: 44px;
        max-width: none;
        flex: 0 0 auto;
        padding: 0;
        text-align: center;
        white-space: nowrap;
    }

    body.hero_inventory #attributes.hero-alive .trav47HeroStatusProgress {
        order: 2;
        min-width: 0;
    }

    /* Keep the active-revival status as one compact line and use the unused
       horizontal space inside the mobile hero panel. */
    body.hero_inventory #attributes.hero-dead .heroStatusMessage.header.warning {
        width: calc(100% + 16px) !important;
        margin: 0 -8px !important;
        padding: 4px 0 !important;
        box-sizing: border-box;
        font-size: 11px !important;
        line-height: 16px !important;
        text-align: center;
        white-space: nowrap !important;
    }

    body.hero_inventory #attributes.hero-dead .heroStatusMessage.header.warning a,
    body.hero_inventory #attributes.hero-dead .heroStatusMessage.header.warning .timer {
        white-space: nowrap !important;
    }

    body.hero_inventory #attributes.hero-dead > .roundedCornersBox.lightRed {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.hero_inventory #attributes.hero-dead > .roundedCornersBox.lightRed .boxes-contents {
        height: auto !important;
        min-height: 0 !important;
        padding: 9px 10px !important;
        overflow: visible !important;
    }

    body.hero_inventory #attributes.hero-dead .regenerate,
    body.hero_inventory #attributes.hero-dead .roundedCornersBox.white,
    body.hero_inventory #attributes.hero-dead .resourceWrapper,
    body.hero_inventory #attributes.hero-dead .lineWrapper {
        display: flex !important;
        height: auto !important;
        min-height: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.hero_inventory #attributes.hero-dead .regenerate {
        flex-direction: column;
        margin: 0 !important;
    }

    body.hero_inventory #attributes.hero-dead .regenerate .attributesHeadline {
        float: none !important;
        width: auto !important;
        margin: 0 0 6px !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
        text-align: center;
    }

    body.hero_inventory #attributes.hero-dead .roundedCornersBox.white {
        width: 100% !important;
        margin: 0 !important;
        padding: 7px 5px !important;
        flex-direction: column;
        box-sizing: border-box;
    }

    body.hero_inventory #attributes.hero-dead .resourceDemandCaption {
        float: none !important;
        margin: 0 0 5px !important;
        font-size: 13px !important;
        font-weight: bold;
        text-align: center;
    }

    body.hero_inventory #attributes.hero-dead .resourceWrapper {
        width: 100% !important;
        padding: 4px 0 7px !important;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        gap: 4px 8px;
        box-sizing: border-box;
    }

    body.hero_inventory #attributes.hero-dead .resourceWrapper .resource {
        float: none !important;
        margin: 0 !important;
    }

    body.hero_inventory #attributes.hero-dead .lineWrapper {
        width: 100% !important;
        margin: 0 !important;
        padding: 7px 0 0 !important;
        align-items: center;
        justify-content: center;
        gap: 12px;
        box-sizing: border-box;
    }

    body.hero_inventory #attributes .heroPropertiesContent #setResource {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 8px 6px !important;
        box-sizing: border-box;
    }

    body.hero_inventory #attributes .heroPropertiesContent .changeResourcesHeadline,
    body.hero_inventory #attributes .trav47HeroAttackPanel .changeResourcesHeadline {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 7px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        box-sizing: border-box;
    }

    body.hero_inventory #attributes .heroPropertiesContent {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        overflow: visible !important;
    }

    body.hero_inventory #attributes .heroPropertiesContent .resourcePick {
        display: flex !important;
        flex-flow: row nowrap;
        justify-content: stretch;
        gap: 3px;
        max-width: 100%;
    }

    body.hero_inventory #attributes .heroPropertiesContent .resourcePick .resource {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    body.hero_inventory #attributes .heroPropertiesContent .resourcePick .resource label {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: 14px minmax(0, 1fr) 17px;
        padding: 2px;
        white-space: nowrap;
    }

    body.hero_inventory #attributes .heroPropertiesContent .resourcePick .resource label input {
        grid-column: 1;
        margin-left: 2px;
    }

    body.hero_inventory #attributes .heroPropertiesContent .resourcePick .resource label span {
        grid-column: 2;
        min-width: 0;
        font-size: 11px;
        text-align: center;
    }

    body.hero_inventory #attributes .heroPropertiesContent .resourcePick .resource label i {
        grid-column: 3;
        margin: 0;
        background-position: center;
        background-size: contain;
    }

    body.hero_inventory #attributes .heroPropertiesContent .resourcePick .resource label i.r0 {
        width: 17px;
        height: 11px;
    }

    body.hero_inventory #attributes .heroPropertiesContent .resourcePick .resource label i.r1,
    body.hero_inventory #attributes .heroPropertiesContent .resourcePick .resource label i.r2,
    body.hero_inventory #attributes .heroPropertiesContent .resourcePick .resource label i.r3 {
        width: 15px;
        height: 11px;
    }

    body.hero_inventory #attributes .heroPropertiesContent .resourcePick .resource label i.r4 {
        width: 15px;
        height: 15px;
    }

    body.hero_inventory #attributes .trav47HeroAttackPanel .attackBehaviour {
        margin: 8px 6px !important;
        font-size: 13px !important;
    }

    body.hero_inventory #attributes .trav47HeroAttackPanel .attackBehaviour input[type="radio"] {
        width: 16px;
        height: 16px;
        margin-left: 6px;
        vertical-align: -3px;
    }

    body.hero_inventory #attributes .trav47HeroBenefits {
        width: calc(100% - 8px) !important;
        margin: 4px !important;
        table-layout: auto;
        box-sizing: border-box;
    }

    body.hero_inventory #attributes .trav47HeroBenefits thead th {
        height: 23px;
        padding: 0 5px;
        font-size: 12px;
    }

    body.hero_inventory #attributes .trav47HeroBenefits tbody td {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 27px;
        padding: 2px 1px !important;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .attribName {
        width: 108px;
        min-width: 108px;
        max-width: 108px;
        padding-right: 2px;
        font-size: 11px;
        white-space: nowrap;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .attribName:before {
        width: 20px;
        height: 20px;
        margin-left: 2px;
        vertical-align: -6px;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .progress {
        width: 82px;
        min-width: 82px;
        max-width: 82px;
        padding-left: 2px;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .bar-bg {
        height: 9px;
        padding: 1px;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .points {
        width: 38px;
        min-width: 38px;
        max-width: 38px;
        font-size: 11px;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .points input {
        width: 32px;
        padding: 1px;
        font-size: 11px;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .pointsValueSetter {
        width: 16px;
        min-width: 16px;
        max-width: 16px;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .pointsValueSetter a {
        width: 16px;
        height: 16px;
        background-size: 16px auto;
        background-position: 0 0;
        background-repeat: no-repeat;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .pointsValueSetter a:hover {
        background-position: 0 -25px;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .pointsValueSetter a.click {
        background-position: 0 -50px;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .pointsValueSetter a.disabled,
    body.hero_inventory #attributes .trav47HeroBenefits .pointsValueSetter a.disabled:hover,
    body.hero_inventory #attributes .trav47HeroBenefits .pointsValueSetter a.disabled.click {
        background-position: 0 -75px;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .powervalue {
        width: 54px;
        min-width: 54px;
        max-width: 54px;
        padding: 2px 1px;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .powervalue .value {
        transform: none;
        white-space: nowrap;
    }

    body.hero_inventory #attributes .trav47HeroBenefits .powervalue .percentage {
        position: static;
        display: inline;
        margin: 0 1px 0 0;
        transform: none;
    }

    body.hero_inventory #attributes .saveHeroAttributes {
        margin: 7px 5px !important;
        text-align: center;
    }
}
/* Keep the hero attributes switch visually neutral on touch devices. */
div.hero_inventory #attributes .openCloseSwitchBar {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
}

div.hero_inventory .trav47HeroHealthValue {
    direction: ltr;
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

/* Live server progression on the general statistics page. */
body.statistics #trav47ServerProgress {
    margin: 0 0 22px;
    direction: rtl;
}

body.statistics #trav47ServerProgress > h4 {
    margin-bottom: 0;
}

body.statistics .trav47ServerTimeline {
    position: relative;
    min-height: 213px;
    overflow: hidden;
    border: 1px solid #aebfc8;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: #f5f8fa url('../../images/timelineBackground.jpg') center top / cover no-repeat;
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 1px 2px rgba(32,54,66,.12);
}

body.statistics .trav47ServerNumbers {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    min-height: 66px;
    padding: 4px 9px 0;
}

body.statistics .trav47ServerCounter {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    min-width: 54px;
    height: 62px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px #1b2830, 0 0 3px #1b2830;
}

body.statistics .trav47ServerCounter img {
    position: absolute;
    z-index: -1;
    top: 0;
    width: auto;
    height: 54px;
    object-fit: contain;
}

body.statistics .trav47ServerCounter:nth-child(2) img {
    height: 56px;
}

body.statistics .trav47ServerCounter strong {
    padding-top: 11px;
    font-size: 20px;
    line-height: 22px;
}

body.statistics .trav47ServerCounter span {
    font-size: 10px;
    line-height: 13px;
}

body.statistics .trav47ServerSteps {
    position: absolute;
    right: 5px;
    bottom: 6px;
    left: 5px;
    display: grid;
    grid-template-columns: repeat(6, minmax(52px, 1fr));
    align-items: end;
    min-height: 124px;
}

body.statistics .trav47ServerSteps::before,
body.statistics .trav47ServerSteps::after {
    position: absolute;
    top: 72px;
    right: 5%;
    left: 5%;
    height: 8px;
    content: '';
    border: 1px solid rgba(49,65,71,.72);
    border-radius: 5px;
    background: rgba(55,70,74,.52);
    box-shadow: inset 0 1px rgba(255,255,255,.3);
}

body.statistics .trav47ServerSteps::after {
    z-index: 1;
    left: auto;
    width: calc(var(--trav47-server-progress) * .9);
    border-color: #568417;
    background: linear-gradient(#a3cb53, #668f20);
}

body.statistics .trav47ServerStep {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    color: #243942;
    text-align: center;
}

body.statistics .trav47ServerStep > img {
    width: 56px;
    height: 64px;
    margin-bottom: 2px;
    object-fit: contain;
}

body.statistics .trav47ServerStep:first-child > img {
    width: 64px;
    height: 70px;
}

body.statistics .trav47ServerStep.is-locked > img {
    opacity: .62;
}

body.statistics .trav47ServerStep strong,
body.statistics .trav47ServerStep span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.statistics .trav47ServerStep span a {
    color: inherit;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.statistics .trav47ServerStep strong {
    font-size: 11px;
    line-height: 15px;
}

body.statistics .trav47ServerStep span {
    color: #52666e;
    font-size: 10px;
    line-height: 13px;
}

@media screen and (max-width: 620px) {
    body.statistics .trav47ServerTimeline {
        min-height: 153px;
    }

    body.statistics .trav47ServerNumbers {
        gap: 6px;
        min-height: 57px;
        padding: 2px 5px 0;
    }

    body.statistics .trav47ServerCounter {
        transform: scale(.87);
        transform-origin: top center;
    }

    body.statistics .trav47ServerSteps {
        right: 1px;
        bottom: 4px;
        left: 1px;
        min-height: 112px;
        grid-template-columns: repeat(6, minmax(44px, 1fr));
    }

    body.statistics .trav47ServerSteps::before,
    body.statistics .trav47ServerSteps::after {
        top: 62px;
        height: 6px;
    }

    body.statistics .trav47ServerStep > img {
        width: 45px;
        height: 55px;
    }

    body.statistics .trav47ServerStep:first-child > img {
        width: 51px;
        height: 58px;
    }

    body.statistics .trav47ServerStep strong {
        font-size: 9px;
        line-height: 12px;
    }

    body.statistics .trav47ServerStep span {
        font-size: 8px;
        line-height: 10px;
    }
}

/* Match the original progression structure: scenery above, dates below. */
body.statistics #trav47ServerProgress > h4 {
    position: relative;
    z-index: 4;
    height: 29px;
    padding: 0 12px !important;
    border: 1px solid #668d19;
    border-radius: 4px 4px 0 0;
    background: #c7e88e;
    color: #56391c;
    font-size: 16px;
    font-weight: bold;
    line-height: 29px;
    text-align: right;
}

body.statistics #trav47ServerProgress > h4::before {
    position: absolute;
    top: -7px;
    right: 7px;
    width: 47px;
    height: 47px;
    z-index: 2;
    content: '';
    background: url('../../images/statistics/serverProgression/serverProgressionTitle_large.png') center / contain no-repeat;
}

body.statistics #trav47ServerProgress > h4 {
    padding-right: 62px !important;
}

body.statistics .trav47ServerTimeline {
    min-height: 220px;
    position: relative;
    right: -5px;
    width: calc(100% + 3px);
    z-index: 0;
    isolation: isolate;
    --trav47-server-scene-height: 128px;
    border-color: #b4c4ca;
    border-top: 0;
    border-radius: 0;
    background-color: #fff;
    background-image: linear-gradient(to bottom, transparent 0, transparent var(--trav47-server-scene-height), #fff var(--trav47-server-scene-height), #fff 100%), url('../../images/timelineBackground.jpg');
    background-position: center top, center top;
    background-size: 100% 100%, 100% var(--trav47-server-scene-height);
    background-repeat: no-repeat;
    box-shadow: none;
}

body.statistics .trav47ServerTimeline::before {
    display: none;
}

body.statistics .trav47ServerNumbers {
    z-index: 3;
    justify-content: flex-end;
    min-height: 64px;
    padding: 3px 10px 0;
}

body.statistics .trav47ServerCounter span {
    display: none;
}

body.statistics .trav47ServerCounter strong {
    padding-top: 14px;
    font-size: 22px;
    line-height: 25px;
}

body.statistics .trav47ServerSteps {
    top: 74px;
    right: 0;
    bottom: auto;
    left: 0;
    min-height: 139px;
    grid-template-columns: repeat(6, minmax(58px, 1fr));
    align-items: start;
}

body.statistics .trav47ServerSteps::before,
body.statistics .trav47ServerSteps::after {
    top: 53px;
    right: 0;
    left: 0;
    height: 16px;
    border-color: #686a68;
    background: linear-gradient(to bottom, #fdfdfd 0%, #d9dcd9 22%, #8c928f 50%, #dce0dd 78%, #fafafa 100%);
    box-shadow: inset 0 2px rgba(255,255,255,.9), inset 0 -2px rgba(44,52,50,.35), 0 1px 2px rgba(30,38,35,.4);
}

body.statistics .trav47ServerSteps::after {
    left: auto;
    width: var(--trav47-server-progress);
    border-color: #568417;
    background: linear-gradient(#b7de67, #6f9825);
}

body.statistics .trav47ServerStep > img {
    width: 62px;
    height: 72px;
    margin: 0;
    transform: translateY(8px);
    transition: transform .25s ease, opacity .25s ease;
}

body.statistics .trav47ServerStep {
    align-self: start;
}

body.statistics .trav47ServerStep:first-child > img {
    width: 76px;
    height: 82px;
}

body.statistics .trav47ServerStep.is-locked > img {
    opacity: .55;
    transform: translateY(8px);
}

body.statistics .trav47ServerStep.is-achieved > img {
    opacity: 1;
    transform: translateY(22px);
}

body.statistics .trav47ServerStep strong {
    display: none;
}

body.statistics .trav47ServerStep span {
    position: relative;
    top: auto;
    margin-top: 4px;
    transform: translateY(22px);
    width: 100%;
    overflow: visible;
    color: #1d1d1d;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    text-overflow: clip;
    text-shadow: none;
    white-space: nowrap;
}

@media screen and (max-width: 620px) {
    body.statistics #trav47ServerProgress > h4 {
        height: 26px;
        padding-right: 51px !important;
        font-size: 14px;
        line-height: 26px;
    }

    body.statistics #trav47ServerProgress > h4::before {
        top: -5px;
        right: 5px;
        width: 40px;
        height: 40px;
    }

    body.statistics .trav47ServerTimeline {
        min-height: 153px;
        --trav47-server-scene-height: 108px;
    }

    body.statistics .trav47ServerTimeline::before {
        height: 108px;
    }

    body.statistics .trav47ServerNumbers {
        min-height: 55px;
        padding: 0 5px;
    }

    body.statistics .trav47ServerCounter {
        transform: scale(.8);
    }

    body.statistics .trav47ServerSteps {
        top: 44px;
        right: 0;
        left: 0;
        min-height: 124px;
        grid-template-columns: repeat(6, minmax(44px, 1fr));
    }

    body.statistics .trav47ServerSteps::before,
    body.statistics .trav47ServerSteps::after {
        top: 44px;
        right: 0;
        left: 0;
        height: 13px;
    }

    body.statistics .trav47ServerStep > img {
        width: 38.4px;
        height: 46.4px;
        transform: translateY(6px);
    }

    body.statistics .trav47ServerStep:first-child > img {
        width: 47.2px;
        height: 53.6px;
    }

    body.statistics .trav47ServerStep span {
        top: auto;
        margin-top: 4px;
        transform: translateY(26px);
        overflow: hidden;
        color: #111;
        font-size: 11px;
        font-weight: 700;
        line-height: 16px;
        text-overflow: ellipsis;
    }

    body.statistics .trav47ServerStep.is-achieved > img {
        transform: translateY(14px);
    }
}

/* Server progression: live tribe distribution. */
body.statistics #trav47TribeDistribution {
    clear: both;
    margin: 8px 0 0;
    overflow: hidden;
    border-top: 1px solid #c6d5db;
    background: linear-gradient(#fbfdfe, #edf4f6);
}

/* Live population ranking: server and alliance rank with current population progress. */
body.statistics #trav47PopulationRank {
    clear: both;
    margin: 11px 0 12px;
    overflow: visible;
    border: 1px solid #c6d5db;
    border-radius: 5px;
    background: linear-gradient(#fcfdfe, #edf4f6);
    box-shadow: 0 1px 2px rgba(41, 57, 61, .15);
}

body.statistics #trav47PopulationRank > h4 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 29px;
    margin: 0 !important;
    padding: 0 61px 0 10px !important;
    border: 0;
    border-bottom: 1px solid #8eae40;
    border-radius: 0;
    background: #c7e88e;
    color: #334328;
    font-size: 14px;
    font-weight: 700;
    line-height: 29px;
}

body.statistics #trav47PopulationRank > h4 img {
    position: absolute;
    top: -9px;
    right: 6px;
    width: 54px;
    height: 54px;
}

body.statistics .trav47PopulationRankContent {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 150px;
    padding: 11px 12px;
    direction: rtl;
}

body.statistics .trav47PopulationRanks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

body.statistics .trav47PopulationRankItem {
    display: grid;
    grid-template-columns: 1fr 64px;
    grid-template-rows: 20px 50px 13px;
    align-items: center;
    min-height: 87px;
    padding: 4px 6px;
    border: 1px solid #d3dfe4;
    border-radius: 4px;
    background: rgba(255, 255, 255, .72);
    text-align: center;
}

body.statistics .trav47PopulationRankItem .trav47PopulationRankLabel {
    grid-column: 1 / -1;
    color: #495a5f;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

body.statistics .trav47PopulationRankItem img {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 55px;
    max-height: 50px;
    place-self: center;
    margin: 0;
    object-fit: contain;
}

body.statistics .trav47PopulationRankItem strong {
    grid-row: 2;
    grid-column: 1 / -1;
    z-index: 1;
    align-self: center;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    direction: ltr;
    text-align: center;
    text-shadow: 0 1px 2px #26373c, 1px 0 1px #26373c, -1px 0 1px #26373c;
}

body.statistics .trav47PopulationRankItem small {
    grid-column: 1 / -1;
    grid-row: 3;
    color: #6e7c80;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

body.statistics .trav47PopulationRankItem .trav47PopulationRankTotal {
    grid-column: 1 / -1;
    align-self: start;
    margin-top: -2px;
    text-align: center;
}

body.statistics .trav47PopulationRankItem.is-disabled {
    opacity: .52;
    filter: grayscale(1);
}

body.statistics .trav47PopulationRankItem.is-leader {
    border-color: #cfab45;
    background: linear-gradient(135deg, #fff9dc, #f6df92);
    box-shadow: inset 0 1px rgba(255, 255, 255, .85), 0 1px 2px rgba(122, 86, 23, .2);
}

body.statistics .trav47PopulationRankItem.is-top-ten {
    border-color: #aebdc8;
    background: linear-gradient(135deg, #fbfdff, #dbe5ec);
    box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 1px 2px rgba(51, 75, 91, .16);
}

body.statistics .trav47PopulationRankItem.is-top-twenty {
    border-color: #4d83b3;
    background: linear-gradient(135deg, #f0f8ff, #bad8f1);
    box-shadow: inset 0 1px rgba(255, 255, 255, .85), 0 1px 2px rgba(31, 81, 122, .2);
}

body.statistics .trav47PopulationRankItem.is-standard {
    border-color: #97b87b;
    background: linear-gradient(135deg, #fbfff8, #dcefd0);
}

body.statistics .trav47PopulationIndicator {
    position: relative;
    min-height: 122px;
    padding: 10px 12px 8px;
    border: 1px solid #d2dde2;
    border-radius: 4px;
    background: rgba(255, 255, 255, .65);
}

body.statistics .trav47PopulationIndicatorHead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 5px;
    color: #40555d;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

body.statistics .trav47PopulationIndicatorHead > span {
    min-width: 0;
    font-size: 12px;
    letter-spacing: -.15px;
    white-space: nowrap;
}

body.statistics .trav47PopulationIndicatorHead strong {
    color: #9c513e;
    font-size: 13px;
    flex: 0 0 auto;
    white-space: nowrap;
}

body.statistics .trav47PopulationIndicator.is-first-place {
    min-height: 50px;
}

/* Resource Rank: cumulative event ledger + live per-hour production. */
body.statistics #trav47ResourceRank {
    clear: both;
    margin: 11px 0 12px;
    overflow: visible;
    border: 1px solid #c6d5db;
    border-radius: 5px;
    background: linear-gradient(#fcfdfe, #edf4f6);
    box-shadow: 0 1px 2px rgba(41, 57, 61, .15);
}

body.statistics #trav47ResourceRank > h4 {
    position: relative;
    display: flex;
    align-items: center;
    height: 29px;
    margin: 0 !important;
    padding: 0 61px 0 10px !important;
    border: 0;
    border-bottom: 1px solid #8eae40;
    border-radius: 0;
    background: #c7e88e;
    color: #334328;
    font-size: 14px;
    font-weight: 700;
    line-height: 29px;
}

body.statistics #trav47ResourceRank > h4 img {
    position: absolute;
    top: -9px;
    right: 6px;
    width: 54px;
    height: 54px;
    object-fit: contain;
}

body.statistics .trav47ResourceSummary {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid #d6e0e4;
    direction: rtl;
}

body.statistics .trav47ResourceTotals {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}

body.statistics .trav47ResourceTotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 7px;
    min-height: 24px;
    padding: 2px 7px;
    border: 1px solid #d2dde2;
    border-radius: 4px;
    background: rgba(255,255,255,.8);
    white-space: nowrap;
}

body.statistics .trav47ResourceTotal strong { font-size: 14px; direction: ltr; }
body.statistics .trav47ResourceTotal span { color: #52666d; font-size: 11px; font-weight: 700; }
body.statistics .trav47ResourceTotal.is-gained strong { color: #4f861c; }
body.statistics .trav47ResourceTotal.is-lost strong { color: #ba5140; }
body.statistics .trav47ResourceTotal.is-net strong { color: #35657e; }

body.statistics .trav47ResourceLegend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.statistics .trav47ResourceLegend li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px;
    min-height: 25px;
    padding: 1px 3px;
    border-bottom: 1px solid #e1e8eb;
    color: #4a5d64;
    font-size: 11px;
    white-space: nowrap;
}

body.statistics .trav47ResourceLegend li img { width: 20px; height: 20px; object-fit: contain; }
body.statistics .trav47ResourceLegend li span { overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
body.statistics .trav47ResourceLegend li strong { color: #35657e; direction: ltr; font-size: 12px; }
body.statistics .trav47ResourceLegend li.is-negative strong { color: #b75646; }

body.statistics .trav47ResourceRankContent {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 138px;
    padding: 10px 12px 12px;
    direction: rtl;
}

body.statistics .trav47ResourceRanks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

body.statistics .trav47ResourceRankItem {
    display: grid;
    grid-template-rows: 18px 50px 14px;
    align-items: center;
    min-height: 86px;
    padding: 4px 6px;
    border: 1px solid #d3dfe4;
    border-radius: 4px;
    background: rgba(255,255,255,.72);
    text-align: center;
}

body.statistics .trav47ResourceRankItem > span { color: #495a5f; font-size: 12px; font-weight: 700; text-align: right; }
body.statistics .trav47ResourceRankItem img { grid-row: 2; grid-column: 1; width: 55px; max-height: 50px; place-self: center; object-fit: contain; }
body.statistics .trav47ResourceRankItem strong { grid-row: 2; grid-column: 1; z-index: 1; color: #fff; font-size: 22px; direction: ltr; text-shadow: 0 1px 2px #26373c, 1px 0 1px #26373c, -1px 0 1px #26373c; }
body.statistics .trav47ResourceRankItem small { grid-row: 3; color: #6e7c80; font-size: 10px; font-weight: 700; white-space: nowrap; }
body.statistics .trav47ResourceRankItem.is-disabled { opacity: .52; filter: grayscale(1); }

body.statistics .trav47ResourceProduction {
    min-height: 108px;
    padding: 8px 10px;
    border: 1px solid #d2dde2;
    border-radius: 4px;
    background: rgba(255,255,255,.65);
}

body.statistics .trav47ResourceProductionHead { display: flex; align-items: baseline; justify-content: space-between; color: #40555d; font-size: 12px; }
body.statistics .trav47ResourceProductionHead strong { font-size: 12px; }
body.statistics .trav47ResourceProductionHead span { color: #4c7e23; font-size: 14px; font-weight: 700; direction: ltr; }
body.statistics .trav47ResourceProductionBody { display: grid; grid-template-columns: 93px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 4px; }
body.statistics .trav47ResourcePieWrap { display: grid; justify-items: center; gap: 1px; }
body.statistics .trav47ResourceAllVillages { color: #71858d; font-size: 10px; font-weight: 700; white-space: nowrap; }

body.statistics .trav47ResourcePie {
    position: relative;
    display: grid;
    place-content: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: var(--trav47-resource-pie);
    box-shadow: 0 1px 3px rgba(35,48,53,.28);
    text-align: center;
}

body.statistics .trav47ResourcePie::before { content: ''; position: absolute; inset: 18px; border-radius: 50%; background: #f9fcfd; box-shadow: inset 0 1px 2px rgba(37,60,68,.16); }
body.statistics .trav47ResourcePie span, body.statistics .trav47ResourcePie small { position: relative; z-index: 1; font-weight: 700; direction: ltr; }
body.statistics .trav47ResourcePie span { color: #35515c; font-size: 12px; }
body.statistics .trav47ResourcePie small { color: #71858d; font-size: 9px; }
body.statistics .trav47ResourceProduction ul { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0; padding: 0; list-style: none; }
body.statistics .trav47ResourceProduction li { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 2px; color: #53666d; font-size: 11px; white-space: nowrap; }
body.statistics .trav47ResourceProduction li img { width: 17px; height: 17px; object-fit: contain; }
body.statistics .trav47ResourceProduction li span { overflow: hidden; text-overflow: ellipsis; }
body.statistics .trav47ResourceProduction li strong { color: #3e6271; direction: ltr; font-size: 11px; }

/* Military Strength Rank: every score and rank belongs to one village. */
body.statistics #trav47MilitaryStrengthRank {
    clear: both;
    margin: 11px 0 12px;
    overflow: visible;
    border: 1px solid #c6d5db;
    border-radius: 5px;
    background: linear-gradient(#fcfdfe, #edf4f6);
    box-shadow: 0 1px 2px rgba(41, 57, 61, .15);
}

body.statistics #trav47MilitaryStrengthRank > h4 {
    position: relative;
    display: flex;
    align-items: center;
    height: 29px;
    margin: 0 !important;
    padding: 0 61px 0 10px !important;
    border: 0;
    border-bottom: 1px solid #8eae40;
    border-radius: 0;
    background: #c7e88e;
    color: #334328;
    font-size: 14px;
    font-weight: 700;
    line-height: 29px;
}

body.statistics #trav47MilitaryStrengthRank > h4 img {
    position: absolute;
    top: -9px;
    right: 6px;
    width: 54px;
    height: 54px;
    object-fit: contain;
}

body.statistics .trav47MilitaryTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 17px 10px 0;
}

body.statistics .trav47MilitaryTabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 29px;
    border: 1px solid #b8cbd3;
    border-radius: 4px;
    background: linear-gradient(#fafdff, #dce9ee);
    color: #465c65;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

body.statistics .trav47MilitaryTabs a.is-active {
    border-color: #779a35;
    background: linear-gradient(#dff2ac, #b7db72);
    color: #344b20;
    box-shadow: inset 0 1px rgba(255,255,255,.7);
}

body.statistics .trav47MilitaryTabs img { width: 22px; height: 24px; object-fit: contain; }

body.statistics .trav47MilitaryRankContent {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    padding: 9px 12px;
    direction: rtl;
}

body.statistics .trav47MilitaryRanks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

body.statistics .trav47MilitaryRankItem {
    display: grid;
    grid-template-rows: 18px 50px 14px;
    align-items: center;
    min-height: 86px;
    padding: 4px 6px;
    border: 1px solid #d3dfe4;
    border-radius: 4px;
    background: rgba(255,255,255,.72);
    text-align: center;
}

body.statistics .trav47MilitaryRankItem > span { color: #495a5f; font-size: 12px; font-weight: 700; text-align: right; }
body.statistics .trav47MilitaryRankItem img { grid-row: 2; grid-column: 1; width: 55px; max-height: 50px; place-self: center; object-fit: contain; }
body.statistics .trav47MilitaryRankItem strong { grid-row: 2; grid-column: 1; z-index: 1; color: #fff; font-size: 22px; direction: ltr; text-shadow: 0 1px 2px #26373c, 1px 0 1px #26373c, -1px 0 1px #26373c; }
body.statistics .trav47MilitaryRankItem small { grid-row: 3; color: #6e7c80; font-size: 10px; font-weight: 700; white-space: nowrap; }
body.statistics .trav47MilitaryRankItem.is-disabled { opacity: .52; filter: grayscale(1); }

body.statistics .trav47MilitaryCurrentVillage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    gap: 3px 9px;
    min-height: 86px;
    padding: 7px 10px;
    border: 1px solid #d2dde2;
    border-radius: 4px;
    background: rgba(255,255,255,.65);
}

body.statistics .trav47MilitaryCurrentHead { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-start; gap: 4px; color: #495f68; font-size: 12px; font-weight: 700; }
body.statistics .trav47MilitaryCurrentHead img { width: 22px; height: 24px; object-fit: contain; }
body.statistics .trav47MilitaryCurrentVillage > strong { align-self: center; color: #3d6f25; font-size: 24px; direction: ltr; }
body.statistics .trav47MilitaryCurrentVillage > a { display: flex; align-items: center; align-self: center; gap: 4px; color: #49616b; font-size: 12px; font-weight: 700; overflow: hidden; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
body.statistics .trav47MilitaryCurrentVillage > a img { width: 24px; height: 24px; flex: 0 0 auto; object-fit: contain; }
body.statistics .trav47MilitaryNoVillage { align-self: center; color: #71858d; font-size: 11px; }

body.statistics .trav47MilitaryVillageList { margin: 0 12px 10px; padding: 7px 9px 4px; border-top: 1px solid #d6e0e4; color: #475d66; }
body.statistics .trav47MilitaryVillageList > strong { display: block; margin-bottom: 3px; font-size: 12px; }
body.statistics .trav47MilitaryVillageList ol { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; }
body.statistics .trav47MilitaryVillageList li { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; gap: 2px; min-height: 28px; margin: 0 auto; padding: 2px 3px; border-bottom: 1px solid #dfe8eb; font-size: 10px; }
body.statistics .trav47MilitaryVillageList li.is-top { padding-right: 5px; padding-left: 5px; background: rgba(194,226,134,.3); }
body.statistics .trav47MilitaryVillageList li > b { color: #7891a0; direction: ltr; font-size: 11px; text-align: center; }
body.statistics .trav47MilitaryVillageList li > img { width: 22px; height: 22px; object-fit: contain; }
body.statistics .trav47MilitaryVillageList li > a { min-width: 0; overflow: hidden; color: #4a626c; font-size: 11px; font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
body.statistics .trav47MilitaryVillageList li > strong { flex: 0 0 auto; margin-right: 8px; color: #3c6d25; direction: ltr; font-size: 11px; white-space: nowrap; }
body.statistics .trav47MilitaryVillageList p { margin: 4px 0; color: #71858d; font-size: 11px; }

/* Culture Points Rank: account-wide daily output or accumulated balance. */
body.statistics #trav47CulturePointsRank {
    clear: both;
    margin: 11px 0 12px;
    overflow: visible;
    border: 1px solid #c6d5db;
    border-radius: 5px;
    background: linear-gradient(#fcfdfe, #edf4f6);
    box-shadow: 0 1px 2px rgba(41, 57, 61, .15);
}

body.statistics #trav47CulturePointsRank > h4 {
    position: relative;
    display: flex;
    align-items: center;
    height: 29px;
    margin: 0 !important;
    padding: 0 61px 0 10px !important;
    border: 0;
    border-bottom: 1px solid #8eae40;
    border-radius: 0;
    background: #c7e88e;
    color: #334328;
    font-size: 14px;
    font-weight: 700;
    line-height: 29px;
}

body.statistics #trav47CulturePointsRank > h4 img { position: absolute; top: -9px; right: 6px; width: 54px; height: 54px; object-fit: contain; }
body.statistics .trav47CultureTabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; padding: 17px 10px 0; }
body.statistics .trav47CultureTabs a { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 29px; border: 1px solid #b8cbd3; border-radius: 4px; background: linear-gradient(#fafdff,#dce9ee); color: #465c65; font-size: 12px; font-weight: 700; text-decoration: none; }
body.statistics .trav47CultureTabs a.is-active { border-color: #779a35; background: linear-gradient(#dff2ac,#b7db72); color: #344b20; box-shadow: inset 0 1px rgba(255,255,255,.7); }
body.statistics .trav47CultureTabs img { width: 22px; height: 24px; object-fit: contain; }

body.statistics .trav47CultureRankContent { display: grid; grid-template-columns: 238px minmax(0,1fr); gap: 12px; align-items: stretch; padding: 9px 12px; direction: rtl; }
body.statistics .trav47CultureRanks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
body.statistics .trav47CultureRankItem { display: grid; grid-template-rows: 18px 50px 14px; align-items: center; min-height: 86px; padding: 4px 6px; border: 1px solid #d3dfe4; border-radius: 4px; background: rgba(255,255,255,.72); text-align: center; }
body.statistics .trav47CultureRankItem > span { color: #495a5f; font-size: 12px; font-weight: 700; text-align: right; }
body.statistics .trav47CultureRankItem img { grid-row: 2; grid-column: 1; width: 55px; max-height: 50px; place-self: center; object-fit: contain; }
body.statistics .trav47CultureRankItem strong { grid-row: 2; grid-column: 1; z-index: 1; color: #fff; font-size: 22px; direction: ltr; text-shadow: 0 1px 2px #26373c,1px 0 1px #26373c,-1px 0 1px #26373c; }
body.statistics .trav47CultureRankItem small { grid-row: 3; color: #6e7c80; font-size: 10px; font-weight: 700; white-space: nowrap; }
body.statistics .trav47CultureRankItem.is-disabled { opacity: .52; filter: grayscale(1); }

body.statistics .trav47CultureProduction { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; align-items: center; gap: 3px; min-height: 96px; padding: 7px 10px; border: 1px solid #d2dde2; border-radius: 4px; background: rgba(255,255,255,.65); }
body.statistics .trav47CultureProduction > div { display: flex; grid-row: 1; min-width: 0; align-items: center; justify-self: stretch; gap: 4px; color: #495f68; font-size: 12px; font-weight: 700; white-space: nowrap; }
body.statistics .trav47CultureProduction > div img { width: 24px; height: 24px; object-fit: contain; }
body.statistics .trav47CultureProduction > strong { grid-row: 2; grid-column: 1; justify-self: center; color: #3d6f25; font-size: 24px; direction: ltr; }
body.statistics .trav47CultureProduction > small { grid-row: 3; grid-column: 1; justify-self: left; color: #71858d; font-size: 11px; font-weight: 700; }

body.statistics .trav47CultureComparison { margin: 0 12px 10px; padding: 7px 9px 9px; border-top: 1px solid #d6e0e4; }
body.statistics .trav47CultureComparisonTitle { color: #475d66; font-size: 12px; font-weight: 700; }
body.statistics .trav47CultureComparisonBody { display: grid; grid-template-columns: minmax(0,1fr) 90px minmax(0,1fr); align-items: center; gap: 9px; margin-top: 4px; }
body.statistics .trav47CultureLegend { display: grid; grid-template-columns: 24px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 3px; color: #53666d; }
body.statistics .trav47CultureLegend img { grid-row: 1 / -1; width: 24px; height: 24px; object-fit: contain; }
body.statistics .trav47CultureLegend strong { color: #3d6577; direction: ltr; font-size: 13px; }
body.statistics .trav47CultureLegend span { color: #71858d; font-size: 10px; font-weight: 700; }
body.statistics .trav47CultureLegend.is-worse { justify-self: end; text-align: left; }
body.statistics .trav47CultureLegend.is-worse img { grid-column: 2; }
body.statistics .trav47CultureLegend.is-worse strong, body.statistics .trav47CultureLegend.is-worse span { grid-column: 1; }
body.statistics .trav47CultureDonut { position: relative; display: grid; place-content: center; width: 82px; height: 82px; border-radius: 50%; background: conic-gradient(#6d9b42 0 var(--trav47-culture-share),#e98b75 var(--trav47-culture-share) 100%); box-shadow: 0 1px 3px rgba(35,48,53,.28); text-align: center; }
body.statistics .trav47CultureDonut::before { content: ''; position: absolute; inset: 17px; border-radius: 50%; background: #f9fcfd; box-shadow: inset 0 1px 2px rgba(37,60,68,.16); }
body.statistics .trav47CultureDonut strong, body.statistics .trav47CultureDonut small { position: relative; z-index: 1; direction: ltr; font-weight: 700; }
body.statistics .trav47CultureDonut strong { color: #35515c; font-size: 17px; }
body.statistics .trav47CultureDonut small { color: #71858d; font-size: 9px; }

@media screen and (max-width: 1024px) {
    body.statistics :is(
        #trav47PopulationRank,
        #trav47ResourceRank,
        #trav47MilitaryStrengthRank,
        #trav47CulturePointsRank
    ) {
        margin: 8px 0 10px;
    }

    body.statistics :is(
        #trav47PopulationRank,
        #trav47ResourceRank,
        #trav47MilitaryStrengthRank,
        #trav47CulturePointsRank
    ) > h4 {
        height: 28px;
        min-height: 28px;
        padding: 0 52px 0 28px !important;
        font-size: 13px;
        line-height: 28px;
    }

    body.statistics :is(
        #trav47PopulationRank,
        #trav47ResourceRank,
        #trav47MilitaryStrengthRank,
        #trav47CulturePointsRank
    ) > h4 img {
        top: -5px;
        right: 6px;
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    body.statistics :is(
        .trav47PopulationRankContent,
        .trav47ResourceRankContent,
        .trav47MilitaryRankContent,
        .trav47CultureRankContent
    ) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 6px;
        min-height: 0;
        padding: 7px;
        direction: rtl;
    }

    body.statistics :is(
        .trav47PopulationRanks,
        .trav47ResourceRanks,
        .trav47MilitaryRanks,
        .trav47CultureRanks
    ) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        width: 100%;
    }

    body.statistics :is(
        .trav47PopulationRankItem,
        .trav47ResourceRankItem,
        .trav47MilitaryRankItem,
        .trav47CultureRankItem
    ) {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "icon label rank"
            "icon meta rank";
        align-items: center;
        column-gap: 5px;
        row-gap: 1px;
        min-width: 0;
        min-height: 54px;
        padding: 5px 6px;
        border: 1px solid #bccab6;
        border-radius: 5px;
        background: linear-gradient(180deg, #fff, #edf3ea);
        box-shadow: inset 0 1px #fff, 0 1px 1px rgba(54, 72, 48, .1);
        text-align: right;
        box-sizing: border-box;
    }

    body.statistics .trav47PopulationRankItem .trav47PopulationRankLabel,
    body.statistics :is(
        .trav47ResourceRankItem,
        .trav47MilitaryRankItem,
        .trav47CultureRankItem
    ) > span {
        grid-area: label;
        min-width: 0;
        color: #4b5a47;
        font-size: 10px;
        font-weight: 700;
        line-height: 15px;
        text-align: right;
        white-space: nowrap;
    }

    body.statistics :is(
        .trav47PopulationRankItem,
        .trav47ResourceRankItem,
        .trav47MilitaryRankItem,
        .trav47CultureRankItem
    ) > img {
        grid-area: icon;
        place-self: center;
        width: 28px;
        height: 28px;
        max-height: 28px;
        margin: 0;
        object-fit: contain;
        opacity: .9;
    }

    body.statistics :is(
        .trav47PopulationRankItem,
        .trav47ResourceRankItem,
        .trav47MilitaryRankItem,
        .trav47CultureRankItem
    ) > strong {
        grid-area: rank;
        align-self: center;
        color: #557b2d;
        direction: ltr;
        font-size: clamp(16px, 4.7vw, 20px);
        font-weight: 700;
        line-height: 1;
        text-align: center;
        text-shadow: none;
        white-space: nowrap;
    }

    body.statistics :is(
        .trav47PopulationRankItem,
        .trav47ResourceRankItem,
        .trav47MilitaryRankItem,
        .trav47CultureRankItem
    ) > small {
        grid-area: meta;
        align-self: start;
        min-width: 0;
        margin: 0;
        overflow: hidden;
        color: #73806e;
        font-size: 8.5px;
        font-weight: 700;
        line-height: 13px;
        text-align: right;
        text-overflow: clip;
        white-space: nowrap;
    }

    body.statistics .trav47PopulationRankItem .trav47PopulationRankTotal {
        grid-area: meta;
        align-self: start;
        margin: 0;
        text-align: right;
    }

    body.statistics .trav47PopulationRankItem.is-leader {
        border-color: #c8a548;
        background: linear-gradient(180deg, #fffbe7, #f4e3a9);
    }

    body.statistics .trav47PopulationRankItem.is-top-ten,
    body.statistics .trav47PopulationRankItem.is-top-twenty {
        border-color: #a9bdc6;
        background: linear-gradient(180deg, #fff, #e8f0f3);
    }

    body.statistics .trav47PopulationRankItem.is-standard {
        border-color: #a9c694;
        background: linear-gradient(180deg, #fff, #eaf5e3);
    }

    body.statistics #trav47PopulationRank .trav47PopulationIndicator {
        min-height: 0;
        padding: 7px 8px;
        border-color: #c8d3c3;
        border-radius: 5px;
        background: linear-gradient(180deg, #fbfdf9, #eef3eb);
    }

    body.statistics #trav47PopulationRank .trav47PopulationIndicatorHead {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 7px;
        color: #4b5b47;
        font-size: 10px;
        line-height: 18px;
        white-space: nowrap;
    }

    body.statistics #trav47PopulationRank .trav47PopulationIndicatorHead > span {
        overflow: hidden;
        font-size: 10px;
        letter-spacing: 0;
        text-overflow: clip;
    }

    body.statistics #trav47PopulationRank .trav47PopulationIndicatorHead > strong {
        color: #6d842e;
        direction: ltr;
        font-size: 12px;
        white-space: nowrap;
    }

    body.statistics #trav47PopulationRank .trav47PopulationGoal {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        min-height: 34px;
        margin-top: 5px;
        padding: 4px 6px;
        border-color: #ddc1aa;
        border-radius: 4px;
        background: #fff8f1;
        font-size: 9px;
    }

    body.statistics #trav47PopulationRank .trav47PopulationNextRank {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: #765541;
        font-weight: 700;
        white-space: nowrap;
    }

    body.statistics #trav47PopulationRank .trav47PopulationNextRank b {
        display: grid;
        width: 23px;
        height: 23px;
        place-items: center;
        border-radius: 4px;
        background: #c46d4e;
        color: #fff;
        direction: ltr;
        font-size: 12px;
    }

    body.statistics #trav47PopulationRank .trav47PopulationGoal > strong {
        min-width: 0;
        overflow: visible;
        color: #a2573f;
        font-size: 10px;
        text-align: left;
        text-overflow: clip;
        white-space: nowrap;
    }

    body.statistics #trav47PopulationRank .trav47PopulationGoal.is-leading {
        display: flex;
        min-height: 32px;
        justify-content: center;
        border-color: #cfab45;
        background: linear-gradient(90deg, #fff8d2, #f5dc79, #fff8d2);
    }

    body.statistics #trav47PopulationRank .trav47PopulationGoal.is-leading strong {
        color: #815612;
        font-size: 10px;
        text-align: center;
    }

    body.statistics :is(.trav47MilitaryTabs, .trav47CultureTabs) {
        gap: 5px;
        padding: 8px 7px 0;
    }

    body.statistics :is(.trav47MilitaryTabs, .trav47CultureTabs) a {
        min-height: 27px;
        gap: 3px;
        font-size: 10px;
    }

    body.statistics :is(.trav47MilitaryTabs, .trav47CultureTabs) img {
        width: 18px;
        height: 19px;
    }

    body.statistics #trav47ResourceRank .trav47ResourceProduction {
        min-height: 0;
        padding: 6px 7px;
        border-color: #c8d3c3;
        background: linear-gradient(180deg, #fbfdf9, #eef3eb);
    }

    body.statistics #trav47ResourceRank .trav47ResourceProductionHead {
        font-size: 10px;
    }

    body.statistics #trav47ResourceRank .trav47ResourceProductionHead strong {
        font-size: 10px;
    }

    body.statistics #trav47ResourceRank .trav47ResourceProductionHead span {
        font-size: 12px;
    }

    body.statistics #trav47ResourceRank .trav47ResourceProductionBody {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 7px;
        margin-top: 3px;
    }

    body.statistics #trav47ResourceRank .trav47ResourcePie {
        width: 62px;
        height: 62px;
    }

    body.statistics #trav47ResourceRank .trav47ResourcePie::before {
        inset: 14px;
    }

    body.statistics #trav47ResourceRank .trav47ResourcePie span {
        font-size: 9px;
    }

    body.statistics #trav47ResourceRank .trav47ResourcePie small,
    body.statistics #trav47ResourceRank .trav47ResourceAllVillages {
        font-size: 8px;
    }

    body.statistics #trav47ResourceRank .trav47ResourceProduction ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 6px;
    }

    body.statistics #trav47ResourceRank .trav47ResourceProduction li {
        grid-template-columns: 16px minmax(0, 1fr) auto;
        min-width: 0;
        font-size: 9px;
    }

    body.statistics #trav47ResourceRank .trav47ResourceProduction li img {
        width: 15px;
        height: 15px;
    }

    body.statistics #trav47ResourceRank .trav47ResourceProduction li strong {
        font-size: 9px;
    }

    body.statistics #trav47ResourceRank .trav47ResourceSummary {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
        padding: 0 7px 7px;
        border: 0;
    }

    body.statistics #trav47ResourceRank .trav47ResourceTotals {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    body.statistics #trav47ResourceRank .trav47ResourceTotal {
        display: grid;
        justify-items: center;
        gap: 0;
        min-width: 0;
        min-height: 38px;
        padding: 3px 2px;
        text-align: center;
    }

    body.statistics #trav47ResourceRank .trav47ResourceTotal span {
        overflow: hidden;
        max-width: 100%;
        font-size: 8px;
        text-overflow: clip;
        white-space: nowrap;
    }

    body.statistics #trav47ResourceRank .trav47ResourceTotal strong {
        font-size: 10px;
        white-space: nowrap;
    }

    body.statistics #trav47ResourceRank .trav47ResourceLegend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px 6px;
    }

    body.statistics #trav47ResourceRank .trav47ResourceLegend li {
        grid-template-columns: 17px minmax(0, 1fr) auto;
        min-width: 0;
        min-height: 21px;
        padding: 0;
        font-size: 8.5px;
    }

    body.statistics #trav47ResourceRank .trav47ResourceLegend li img {
        width: 16px;
        height: 16px;
    }

    body.statistics #trav47ResourceRank .trav47ResourceLegend li strong {
        font-size: 9px;
    }

    body.statistics #trav47MilitaryStrengthRank .trav47MilitaryCurrentVillage {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        min-height: 58px;
        gap: 2px 7px;
        padding: 6px 7px;
        border-color: #c8d3c3;
        background: linear-gradient(180deg, #fbfdf9, #eef3eb);
    }

    body.statistics #trav47MilitaryStrengthRank .trav47MilitaryCurrentHead {
        gap: 3px;
        font-size: 10px;
    }

    body.statistics #trav47MilitaryStrengthRank .trav47MilitaryCurrentHead img {
        width: 18px;
        height: 19px;
    }

    body.statistics #trav47MilitaryStrengthRank .trav47MilitaryCurrentVillage > strong {
        font-size: 18px;
    }

    body.statistics #trav47MilitaryStrengthRank .trav47MilitaryCurrentVillage > a {
        gap: 2px;
        font-size: 10px;
    }

    body.statistics #trav47MilitaryStrengthRank .trav47MilitaryCurrentVillage > a img {
        width: 19px;
        height: 19px;
    }

    body.statistics #trav47MilitaryStrengthRank .trav47MilitaryVillageList {
        margin: 0 7px 7px;
        padding: 5px 4px 2px;
    }

    body.statistics #trav47MilitaryStrengthRank .trav47MilitaryVillageList > strong {
        margin-bottom: 2px;
        font-size: 10px;
    }

    body.statistics #trav47MilitaryStrengthRank .trav47MilitaryVillageList li {
        display: grid;
        grid-template-columns: 17px 20px minmax(0, 1fr) auto;
        align-items: center;
        width: 100%;
        min-height: 25px;
        margin: 0;
        padding: 1px 3px;
        font-size: 9px;
        box-sizing: border-box;
    }

    body.statistics #trav47MilitaryStrengthRank .trav47MilitaryVillageList li > img {
        width: 19px;
        height: 19px;
    }

    body.statistics #trav47MilitaryStrengthRank .trav47MilitaryVillageList li > :is(b, a, strong) {
        font-size: 10px;
        white-space: nowrap;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureProduction {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        min-height: 58px;
        gap: 2px 7px;
        padding: 6px 7px;
        border-color: #c8d3c3;
        background: linear-gradient(180deg, #fbfdf9, #eef3eb);
    }

    body.statistics #trav47CulturePointsRank .trav47CultureProduction > div {
        grid-row: 1;
        grid-column: 1 / -1;
        gap: 3px;
        font-size: 9px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureProduction > div img {
        width: 17px;
        height: 17px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureProduction > strong {
        grid-row: 2;
        grid-column: 1;
        justify-self: start;
        font-size: 18px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureProduction > small {
        grid-row: 2;
        grid-column: 2;
        align-self: center;
        justify-self: end;
        font-size: 9px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureComparison {
        margin: 0 7px 7px;
        padding: 5px 4px 6px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureComparisonTitle {
        font-size: 10px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureComparisonBody {
        grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
        gap: 5px;
        margin-top: 3px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureLegend {
        grid-template-columns: 20px minmax(0, 1fr);
        column-gap: 2px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureLegend img {
        width: 20px;
        height: 20px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureLegend strong {
        font-size: 10px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureLegend span {
        font-size: 8px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureDonut {
        width: 58px;
        height: 58px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureDonut::before {
        inset: 12px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureDonut strong {
        font-size: 12px;
    }

    body.statistics #trav47CulturePointsRank .trav47CultureDonut small {
        font-size: 7px;
    }
}

body.statistics .trav47PopulationGoal {
    display: grid;
    grid-template-columns: auto 28px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-height: 40px;
    margin-top: 12px;
    padding: 5px 7px;
    border: 1px solid #edc7b8;
    border-radius: 4px;
    background: linear-gradient(90deg, #fff7f3, #fffdfc);
    color: #8c513e;
    font-size: 11px;
    font-weight: 700;
}

body.statistics .trav47PopulationGoal b {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #d76d55;
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

body.statistics .trav47PopulationGoal strong {
    overflow: hidden;
    color: #a85741;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.statistics .trav47PopulationGoal.is-leading {
    display: flex;
    justify-content: center;
    border-color: #cfab45;
    background: linear-gradient(90deg, #fff8d2, #f5d970, #fff7cf);
    box-shadow: inset 0 1px rgba(255, 255, 255, .9);
}

body.statistics .trav47PopulationGoal.is-leading strong {
    color: #815612;
    font-size: 13px;
}

/* General statistics accordion: one live section at a time. */
body.statistics .trav47StatsAccordion > .trav47AccordionHeading {
    position: relative;
    min-height: 29px;
    padding-left: 30px !important;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body.statistics .trav47StatsAccordion > .trav47AccordionHeading.has-icon {
    padding-right: 63px !important;
}

body.statistics .trav47StatsAccordion > .trav47AccordionHeading::after {
    position: absolute;
    top: 50%;
    left: 7px;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    border: 1px solid #81a842;
    border-radius: 3px;
    background: linear-gradient(#f8fff0, #d2eaa5);
    color: #3d5e25;
    content: '▼';
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

body.statistics .trav47StatsAccordion[data-open="true"] > .trav47AccordionHeading::after {
    content: '▲';
}

body.statistics .trav47StatsAccordion[data-open="false"] > :not(.trav47AccordionHeading) {
    display: none !important;
}

body.statistics .trav47StatsAccordion[data-open="false"] {
    margin-bottom: 26px !important;
}

body.statistics .trav47StatsAccordion > .trav47AccordionHeading:focus-visible {
    outline: 2px solid #6eafc2;
    outline-offset: 2px;
}

body.statistics .trav47ServerStep span a {
    text-decoration: none;
}

@media screen and (max-width: 620px) {
    body.statistics .trav47StatsAccordion[data-open="false"] {
        margin-bottom: 18px !important;
    }

    body.statistics .trav47StatsAccordion > .trav47AccordionHeading.has-icon {
        padding-right: 53px !important;
    }

    body.statistics .trav47StatsAccordion > .trav47AccordionHeading::after {
        left: 5px;
        width: 15px;
        height: 15px;
        font-size: 8px;
        line-height: 14px;
    }
}



body.statistics #trav47TribeDistribution > h4 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    height: 27px;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0;
    border-bottom: 1px solid #c7d8bf;
    border-radius: 0;
    background: #eaf4e8;
    color: #314339;
    font-size: 13px;
    font-weight: 700;
    line-height: 27px;
}

body.statistics #trav47TribeDistribution > h4 img {
    width: 21px;
    height: 22px;
    margin: 0;
}

body.statistics .trav47TribeDistributionContent {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 124px;
    align-items: center;
    gap: 16px;
    min-height: 135px;
    padding: 9px 12px 10px;
    direction: rtl;
}

body.statistics .trav47TribeChart {
    position: relative;
    width: 112px;
    height: 112px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--trav47-tribe-chart);
    box-shadow: inset 0 0 0 1px rgba(31, 45, 50, .28), 0 1px 3px rgba(27, 39, 43, .25);
}

body.statistics .trav47TribeChart::before {
    position: absolute;
    inset: 22px;
    border: 1px solid #bdcbd1;
    border-radius: 50%;
    background: linear-gradient(#ffffff, #eff4f5);
    box-shadow: inset 0 1px 2px rgba(54, 73, 80, .12);
    content: '';
}

body.statistics .trav47TribeMarker {
    position: absolute;
    z-index: 2;
    top: var(--trav47-marker-top);
    left: var(--trav47-marker-left);
    width: 20px;
    height: 20px;
    object-fit: contain;
    outline: 1px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 1px 1px rgba(20, 29, 30, .55));
}

body.statistics .trav47TribeChart span,
body.statistics .trav47TribeChart small {
    position: absolute;
    z-index: 1;
    right: 0;
    left: 0;
    display: block;
    text-align: center;
}

body.statistics .trav47TribeChart span {
    top: 34px;
    color: #27383e;
    font-size: 20px;
    font-weight: 700;
    line-height: 23px;
}

body.statistics .trav47TribeChart small {
    top: 59px;
    color: #5d6c71;
    font-size: 11px;
    font-weight: 700;
}

body.statistics .trav47TribeLegend {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.statistics .trav47TribeLegend li {
    display: grid;
    grid-template-columns: 23px max-content max-content max-content;
    justify-content: start;
    align-items: center;
    min-height: 25px;
    column-gap: 3px;
    border-bottom: 1px solid #dbe5e8;
    color: #26373c;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Keep each icon at the side nearest to the percentage circle. */
body.statistics .trav47TribeLegend li {
    direction: rtl;
    grid-template-columns: 23px max-content max-content max-content;
    text-align: right;
}

body.statistics .trav47TribeLegend .trav47TribeName {
    text-align: right;
    direction: rtl;
}

body.statistics .trav47TribeLegend li img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

body.statistics .trav47TribeLegend .trav47TribeName {
    overflow: visible;
    text-overflow: clip;
}

body.statistics .trav47TribeLegend strong {
    direction: ltr;
    font-size: 12px;
    font-weight: 700;
}

body.statistics .trav47TribeLegend em {
    direction: ltr;
    margin-right: -2px;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

@media screen and (max-width: 620px) {
    body.statistics #trav47TribeDistribution {
        margin-top: 7px;
    }

    body.statistics #trav47TribeDistribution > h4 {
        height: 25px;
        font-size: 12px;
        line-height: 25px;
    }

    body.statistics .trav47TribeDistributionContent {
        grid-template-columns: minmax(0, 1fr) 98px;
        gap: 9px;
        min-height: 111px;
        padding: 7px 6px 8px;
    }

    body.statistics .trav47TribeChart {
        width: 92px;
        height: 92px;
    }

    body.statistics .trav47TribeChart::before {
        inset: 18px;
    }

    body.statistics .trav47TribeMarker {
        width: 16px;
        height: 16px;
    }

    body.statistics .trav47TribeChart span {
        top: 27px;
        font-size: 17px;
        line-height: 20px;
    }

    body.statistics .trav47TribeChart small {
        top: 49px;
        font-size: 10px;
    }

    body.statistics .trav47TribeLegend {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    body.statistics .trav47TribeLegend li {
        min-height: 19px;
        grid-template-columns: 20px max-content max-content max-content;
        column-gap: 3px;
        font-size: 11px;
    }

    body.statistics .trav47TribeLegend li img {
        width: 19px;
        height: 19px;
    }

    body.statistics .trav47TribeLegend li {
        grid-template-columns: 20px max-content max-content max-content;
    }

    body.statistics .trav47TribeLegend strong {
        font-size: 11px;
    }

    body.statistics .trav47TribeLegend em {
        font-size: 11px;
    }
}

/* Resource Rank details: compact two-column ledger beneath the rank panels. */
body.statistics #trav47ResourceRank .trav47ResourceSummary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    padding: 7px 12px 10px;
    border-top: 1px solid #d6e0e4;
    border-bottom: 0;
    background: transparent;
}

body.statistics #trav47ResourceRank .trav47ResourceTotals,
body.statistics #trav47ResourceRank .trav47ResourceLegend { display: contents; }

body.statistics #trav47ResourceRank .trav47ResourceTotal,
body.statistics #trav47ResourceRank .trav47ResourceLegend li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid #e1e8eb;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.statistics #trav47ResourceRank .trav47ResourceLegend li { grid-template-columns: 19px minmax(0, 1fr) auto; }
body.statistics #trav47ResourceRank .trav47ResourceTotal span,
body.statistics #trav47ResourceRank .trav47ResourceLegend li span {
    overflow: hidden;
    color: #52666d;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.statistics #trav47ResourceRank .trav47ResourceTotal strong,
body.statistics #trav47ResourceRank .trav47ResourceLegend li strong { direction: ltr; font-size: 12px; font-weight: 700; white-space: nowrap; }
body.statistics #trav47ResourceRank .trav47ResourceLegend li img { width: 18px; height: 18px; }
body.statistics #trav47ResourceRank .trav47CompactValue { display: inline-flex; direction: rtl; align-items: baseline; gap: 3px; }
body.statistics #trav47ResourceRank .trav47CompactValue bdi { direction: ltr; unicode-bidi: isolate; }
body.statistics #trav47ResourceRank .trav47CompactValue > span { direction: rtl; unicode-bidi: isolate; }

/* Give combat highlights the exact same section bar geometry as the other ranks. */
body.statistics #trav47CombatHighlights { margin: 8px 0 10px; }
body.statistics #trav47CombatHighlights > h4 {
    position: relative;
    display: flex;
    align-items: center;
    height: 29px;
    margin: 0 !important;
    padding: 0 61px 0 10px !important;
    border: 0;
    border-bottom: 1px solid #8eae40;
    border-radius: 0;
    background: #cbe991;
    color: #34461e;
    font-size: 14px;
    font-weight: 700;
    line-height: 29px;
}
body.statistics #trav47CombatHighlights > h4 img {
    position: absolute;
    top: -9px;
    right: 6px;
    width: 54px;
    height: 54px;
    box-sizing: border-box;
    border: 2px solid #d93931;
    border-radius: 50%;
    object-fit: contain;
    filter: none;
}

/* Combat highlights: five individual battles, with no fabricated aggregate values. */
body.statistics #trav47CombatHighlights .trav47CombatHighlightsTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 17px 9px 5px;
}

body.statistics #trav47CombatHighlights .trav47CombatHighlightsTabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 29px;
    padding: 0 6px;
    border: 1px solid #a8bdc8;
    border-radius: 4px;
    background: linear-gradient(#f9fcfd, #dbe8ee);
    color: #314b59;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

body.statistics #trav47CombatHighlights .trav47CombatHighlightsTabs a.is-active {
    border-color: #6f9d46;
    background: linear-gradient(#eaf7d8, #c8e795);
    color: #365723;
}

body.statistics #trav47CombatHighlights .trav47CombatHighlightsTabs img {
    width: 21px;
    height: 21px;
    object-fit: contain;
}

body.statistics #trav47CombatHighlights .trav47CombatHighlightsContent {
    padding: 2px 9px 9px;
}

body.statistics #trav47CombatHighlights .trav47CombatHighlightsList {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #d2e0e6;
    border-radius: 5px;
    overflow: hidden;
    background: #f8fbfc;
}

body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) max-content;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 3px 7px;
    border-bottom: 1px solid #dbe6ea;
}

body.statistics #trav47CombatHighlights .trav47CombatHighlightsList.is-defense li {
    grid-template-columns: 24px minmax(0, 1fr);
}

body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li:last-child { border-bottom: 0; }
body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li > b {
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 50%;
    background: #c7e492;
    color: #395622;
    font-size: 12px;
}
body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li > a,
body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li > span { display: block; min-width: 0; overflow: hidden; color: inherit; text-decoration: none !important; }
body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li > a:hover strong { color: #718d1f; text-decoration: none !important; }
body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li > a > span,
body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li strong { color: #365161; font-size: 12px; text-decoration: none !important; }
body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li strong::after { content: ': '; }
body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li i { color: #556a74; font-size: 11px; font-style: normal; }
body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li em { direction: ltr; color: #85551f; font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
body.statistics #trav47CombatHighlights .trav47CombatHighlightsEmpty { margin: 4px 0 0; padding: 12px 8px; border: 1px solid #d2e0e6; border-radius: 5px; background: #f8fbfc; color: #60737d; font-size: 12px; text-align: center; }

@media screen and (max-width: 620px) {
    body.statistics #trav47CombatHighlights { margin: 8px 0 10px; }
    body.statistics #trav47CombatHighlights > h4 { height: 26px; padding-right: 51px !important; font-size: 13px; line-height: 26px; }
    body.statistics #trav47CombatHighlights > h4 img { top: -5px; right: 5px; width: 40px; height: 40px; }

    body.statistics #trav47CombatHighlights .trav47CombatHighlightsTabs { gap: 4px; padding: 10px 6px 4px; }
    body.statistics #trav47CombatHighlights .trav47CombatHighlightsTabs a { min-height: 25px; padding: 0 3px; font-size: 10px; }
    body.statistics #trav47CombatHighlights .trav47CombatHighlightsTabs img { width: 18px; height: 18px; }
    body.statistics #trav47CombatHighlights .trav47CombatHighlightsContent { padding: 1px 6px 7px; }
    body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li { grid-template-columns: 18px minmax(0, 1fr) max-content; gap: 2px; min-height: 27px; padding: 2px 2px; }
    body.statistics #trav47CombatHighlights .trav47CombatHighlightsList.is-defense li { grid-template-columns: 18px minmax(0, 1fr); }
    body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li > b { width: 18px; height: 18px; font-size: 10px; }
    body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li strong { font-size: 10px; }
    body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li i { font-size: 9px; }
    body.statistics #trav47CombatHighlights .trav47CombatHighlightsList li em { font-size: 9px; }
    body.statistics #trav47CombatHighlights .trav47CombatHighlightsEmpty { padding: 9px 5px; font-size: 10px; }
}

/* The phone hero summary shares one short row.  Keep the speed compact so
   the full hero-production label and its values remain inside the card. */
@media screen and (max-width: 760px) {
    body.hero_inventory #attributes .trav47HeroQuickRow {
        gap: 4px;
    }

    body.hero_inventory #attributes .trav47HeroQuickSpeed,
    body.hero_inventory #attributes .trav47HeroQuickProduction {
        min-width: 0;
    }

    body.hero_inventory #attributes .trav47HeroQuickRow .speed {
        font-size: 10px;
        letter-spacing: -0.15px;
    }

    body.hero_inventory #attributes .trav47HeroQuickRow .speed strong {
        font-size: 11px;
    }

    body.hero_inventory #attributes .trav47HeroQuickRow .speed .speedIcon {
        width: 17px;
        height: 17px;
        margin-left: 3px;
    }

    body.hero_inventory #attributes .trav47HeroQuickProduction .production {
        font-size: 11px;
        letter-spacing: -0.1px;
    }

    body.hero_inventory #attributes .trav47HeroQuickProduction .production .trav47HeroQuickIcon {
        width: 17px;
        height: 17px;
        margin-left: 3px;
    }
}

/* Hero adventures: one maintained component for the list and the journey. */
body.trav47HeroPage .trav47AdventureContent {
    min-height: 0;
    padding-bottom: 12px;
    color: #31464e;
    background: #edf3f5;
    box-sizing: border-box;
}

/* Empty adventure state in the hero header: retain the original inactive
   round button and show its glyph instead of the number zero. */
#topBarHeroWrapper #topBarHero #buttonL5 > .trav47AdventureEmptyIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: block;
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    transform: translate(-50%, -50%) scaleX(-1);
    transform-origin: center;
    pointer-events: none;
}

#topBarHeroWrapper #topBarHero #buttonL5 > .trav47AdventureEmptyIcon .outline {
    fill: #1b120e;
    stroke: #1b120e;
    stroke-width: 2;
}

#topBarHeroWrapper #topBarHero #buttonL5 > .trav47AdventureEmptyIcon .icon {
    fill: #fff9eb;
}

body.trav47HeroPage .trav47AdventureHeroStatus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    margin: 9px 10px;
    padding: 7px 12px;
    border: 1px solid #b9cbd1;
    border-radius: 6px;
    background: linear-gradient(180deg, #fbfdfe 0%, #e2ecef 100%);
    box-shadow: inset 0 1px rgba(255,255,255,.9);
    font: 700 12px/20px Tahoma, Arial, sans-serif;
    text-align: center;
    box-sizing: border-box;
}

body.trav47HeroPage .trav47AdventureHeroStatusIcon,
body.trav47HeroPage .trav47AdventureJourneyStatusIcon {
    position: relative;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border: 1px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}

body.trav47HeroPage .trav47AdventureHeroStatusIcon::after,
body.trav47HeroPage .trav47AdventureJourneyStatusIcon::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

body.trav47HeroPage .trav47AdventureHeroStatus.is-ready {
    border-color: #aec48f;
    color: #456b25;
    background: linear-gradient(180deg, #f8fced 0%, #e4efd4 100%);
}

body.trav47HeroPage .trav47AdventureHeroStatus.is-busy {
    border-color: #d1bba0;
    color: #815b2d;
    background: linear-gradient(180deg, #fffaf0 0%, #f1e5cf 100%);
}

body.trav47HeroPage .trav47AdventureList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 0 10px 3px;
    box-sizing: border-box;
}

body.trav47HeroPage .trav47AdventureCard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 9px 9px;
    overflow: hidden;
    border: 1px solid #b8cbd2;
    border-radius: 7px;
    background: linear-gradient(180deg, #fbfdfe 0%, #e6eff2 100%);
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 1px 2px rgba(41,65,75,.13);
    box-sizing: border-box;
}

body.trav47HeroPage .trav47AdventureCardHeader {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 36px;
    margin: 0 -9px;
    padding: 6px 9px;
    border-bottom: 1px solid #cad8dd;
    background: linear-gradient(180deg, #f4f8f9 0%, #e2ebee 100%);
    box-sizing: border-box;
}

body.trav47HeroPage .trav47AdventureCardHeader > div {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

body.trav47HeroPage .trav47AdventureName {
    overflow: hidden;
    color: #2d4853;
    font: 700 12px/20px Tahoma, Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.trav47HeroPage .trav47AdventureCoords {
    flex: 0 0 auto;
    color: #588229;
    font: 700 10px/18px Tahoma, Arial, sans-serif;
    text-decoration: none;
    white-space: nowrap;
}

body.trav47HeroPage .trav47AdventureDifficulty {
    flex: 0 0 auto;
    min-width: 44px;
    padding: 2px 6px;
    border: 1px solid #afc48e;
    border-radius: 10px;
    color: #4c742b;
    background: #edf5df;
    font: 700 9px/14px Tahoma, Arial, sans-serif;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

body.trav47HeroPage .trav47AdventureDifficulty.is-hard {
    border-color: #d0a394;
    color: #984633;
    background: #fae8e3;
}

body.trav47HeroPage .trav47AdventureMeta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
}

body.trav47HeroPage .trav47AdventureMeta > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 4px 3px;
    border: 1px solid #d2dde1;
    border-radius: 4px;
    background: rgba(255,255,255,.66);
}

body.trav47HeroPage .trav47AdventureMeta small {
    color: #6d7d83;
    font: 400 9px/14px Tahoma, Arial, sans-serif;
    white-space: nowrap;
}

body.trav47HeroPage .trav47AdventureMeta strong {
    color: #334c55;
    font: 700 10px/16px Tahoma, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.trav47HeroPage .trav47AdventureSendForm {
    margin: 0;
}

body.trav47HeroPage .trav47AdventureSendButton,
body.trav47HeroPage .trav47AdventureBackButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    min-height: 29px;
    margin: 0;
    padding: 4px 12px;
    border: 1px solid #567f27;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(180deg, #8eb84e 0%, #5d8928 100%);
    box-shadow: inset 0 1px rgba(255,255,255,.43), 0 1px 1px rgba(37,59,24,.2);
    font: 700 11px/19px Tahoma, Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px #3d641c;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}

body.trav47HeroPage .trav47AdventureSendButton:hover,
body.trav47HeroPage .trav47AdventureBackButton:hover {
    background: linear-gradient(180deg, #9bc65a 0%, #699633 100%);
}

body.trav47HeroPage .trav47AdventureSendButton:disabled {
    border-color: #b7bfbd;
    color: #8a9698;
    background: #dfe5e6;
    box-shadow: none;
    text-shadow: none;
    cursor: default;
}

body.trav47HeroPage .trav47AdventureEmpty {
    grid-column: 1 / -1;
    min-height: 76px;
    padding: 25px 12px;
    border: 1px dashed #afc0c6;
    border-radius: 7px;
    color: #64777e;
    background: rgba(255,255,255,.55);
    font: 700 12px/24px Tahoma, Arial, sans-serif;
    text-align: center;
    box-sizing: border-box;
}

body.trav47HeroPage .trav47AdventureJourney {
    margin: 9px 10px 2px;
    padding: 0 0 10px;
    overflow: hidden;
    border: 1px solid #a9bec7;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfdfe 0%, #e6eff2 100%);
    box-shadow: inset 0 1px rgba(255,255,255,.95), 0 2px 5px rgba(37,61,72,.16);
    box-sizing: border-box;
}

body.trav47HeroPage .trav47AdventureScene {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-bottom: 1px solid #9fb5be;
}

body.trav47HeroPage .trav47AdventureSceneImage {
    width: 100%;
    height: 270px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body.trav47HeroPage .trav47AdventureScene figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 36px;
    padding: 7px 12px;
    color: #fff;
    background: linear-gradient(180deg, transparent 0%, rgba(24,39,45,.86) 100%);
    font: 700 12px/20px Tahoma, Arial, sans-serif;
    box-sizing: border-box;
}

body.trav47HeroPage .trav47AdventureScene figcaption a {
    color: #e3f4bc;
    text-decoration: none;
    white-space: nowrap;
}

body.trav47HeroPage .trav47AdventureJourneyStatus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    margin: 9px 10px 7px;
    padding: 6px 10px;
    border: 1px solid #afc48e;
    border-radius: 6px;
    color: #456b25;
    background: linear-gradient(180deg, #f7fcec 0%, #e3efd3 100%);
    box-sizing: border-box;
}

body.trav47HeroPage .trav47AdventureJourneyStatus > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.trav47HeroPage .trav47AdventureJourneyStatus strong {
    font: 700 12px/19px Tahoma, Arial, sans-serif;
}

body.trav47HeroPage .trav47AdventureJourneyStatus small {
    font: 400 10px/16px Tahoma, Arial, sans-serif;
}

body.trav47HeroPage .trav47AdventureJourneyStatus.is-arrived {
    border-color: #90b6c3;
    color: #376475;
    background: #e7f2f6;
}

body.trav47HeroPage .trav47AdventureJourneyInfo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0 10px;
}

body.trav47HeroPage .trav47AdventureJourneyInfo > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 33px;
    padding: 5px 8px;
    border: 1px solid #d0dce0;
    border-radius: 5px;
    background: rgba(255,255,255,.72);
    box-sizing: border-box;
}

body.trav47HeroPage .trav47AdventureJourneyInfo dt {
    flex: 0 0 auto;
    color: #738188;
    font: 400 10px/17px Tahoma, Arial, sans-serif;
}

body.trav47HeroPage .trav47AdventureJourneyInfo dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #314b54;
    font: 700 11px/17px Tahoma, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.trav47HeroPage .trav47AdventureJourneyInfo .trav47AdventureRemainingRow {
    grid-column: 1 / -1;
    justify-content: center;
    gap: 12px;
    border-color: #b6c995;
    background: #eff6e5;
}

body.trav47HeroPage .trav47AdventureJourneyInfo .trav47AdventureArrivalRow {
    grid-column: 1 / -1;
    justify-self: center;
    justify-content: center;
    width: min(220px, 100%);
    gap: 12px;
}

body.trav47HeroPage .trav47AdventureJourneyInfo .trav47AdventureRemainingRow dd {
    color: #4d762a;
    font-size: 13px;
}

body.trav47HeroPage .trav47AdventureJourneyActions {
    display: flex;
    justify-content: center;
    margin-top: 9px;
}

body.trav47HeroPage .trav47AdventureBackButton {
    min-width: 118px;
}

/* Auction market: one flat, maintainable surface. */
body.hero_auction .trav47HeroContent {
    box-sizing: border-box;
    background: #edf3f5;
}

body.hero_auction .trav47AuctionTabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid #78909a;
    background: #dce6e9;
    box-sizing: border-box;
}

body.hero_auction .trav47AuctionTabs .tabItem {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 34px;
    margin: 0;
    padding: 0 5px;
    overflow: hidden;
    border: 0;
    border-left: 1px solid #afc0c6;
    border-radius: 0;
    color: #40565e;
    background: linear-gradient(#f5f8f9, #dce6e9);
    box-shadow: none;
    box-sizing: border-box;
    font: 700 12px/34px Tahoma, Arial, sans-serif;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionTabs .tabItem:last-child {
    border-left: 0;
}

body.hero_auction .trav47AuctionTabs .tabItem.is-active {
    color: #fff;
    background: linear-gradient(#7fae42, #568524);
    text-shadow: 0 1px #385c18;
}

body.hero_auction .trav47AuctionMarket {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    transition: opacity .14s ease;
}

body.hero_auction .trav47AuctionMarket.is-loading {
    pointer-events: none;
    opacity: .5;
}

/* Auction bids: independent layout without the legacy nine-slice filter/footer skin. */
body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsFilters {
    touch-action: pan-x;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsSection {
    width: calc(100% - 8px);
    margin: 4px;
    overflow: hidden;
    border: 1px solid #bdcdd2;
    border-radius: 5px;
    background: #f8fbfc;
    box-shadow: 0 1px 1px rgba(45, 70, 79, .08);
    box-sizing: border-box;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable,
body.hero_auction #auction.trav47AuctionBidsPage table.currentBid {
    width: 100%;
    margin: 0;
    border: 0;
    border-spacing: 1px;
    table-layout: fixed;
    background: #d7e1e4;
    box-sizing: border-box;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable th,
body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable td {
    height: 27px;
    padding: 2px;
    overflow: hidden;
    box-sizing: border-box;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable th {
    color: #455c54;
    background: #e8f0e5;
    font-weight: 700;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable td {
    color: #3f5359;
    background: #fff;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable th.name,
body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable td.name {
    padding-inline: 3px;
    text-align: right;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable th.delete,
body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable td.delete {
    width: 24px;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable th.icon,
body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable td.icon {
    width: 29px;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable th.bids,
body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable td.bids {
    width: 29px;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable th.silver,
body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable td.silver {
    width: 50px;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable th.time,
body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable td.time {
    width: 48px;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable th.bid,
body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable td.bid {
    width: 39px;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsTable .win {
    color: #4d7f20;
    font-weight: 700;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsEmpty {
    height: 42px;
    color: #78898f;
    text-align: center;
}

body.hero_auction #auction.trav47AuctionBidsPage h4.auctionEnded {
    min-height: 29px;
    margin: 0;
    padding: 0 0 0 0;
    padding-right: 5px;
    border: 0;
    border-bottom: 1px solid #c8d5d8;
    color: #41594e;
    background: linear-gradient(#f4f8f1, #dfead9);
    box-sizing: border-box;
    font: 700 11px/28px Tahoma, Arial, sans-serif;
    text-align: right;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionHistoryCheck,
body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionHistorySelectAll {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #679337;
    vertical-align: middle;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionBidsPagination {
    border-top: 1px solid #cad7da;
    padding-bottom: 5px;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionHistoryToolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    min-height: 38px;
    padding: 4px 6px;
    border-top: 1px solid #cad7da;
    background: #eef4f5;
    box-sizing: border-box;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionMarkAll {
    display: inline-flex;
    grid-column: 1;
    align-items: center;
    justify-self: start;
    gap: 4px;
    color: #526970;
    font: 700 9px/18px Tahoma, Arial, sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionHistoryDelete {
    display: inline-flex;
    grid-column: 2;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 27px;
    margin: 0;
    padding: 2px 10px;
    border: 1px solid #4f7a22;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(#82b247, #59872a);
    box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 1px 1px rgba(49, 72, 28, .18);
    box-sizing: border-box;
    font: 700 10px/21px Tahoma, Arial, sans-serif;
    text-shadow: 0 1px #3a5a1b;
    cursor: pointer;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionHistoryDelete:disabled {
    border-color: #aab7ba;
    color: #f2f4f4;
    background: #b7c1c4;
    box-shadow: none;
    text-shadow: none;
    cursor: default;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionHistoryNotice {
    margin: 4px;
    padding: 5px 7px;
    border: 1px solid #abc28f;
    border-radius: 4px;
    color: #456624;
    background: #edf7df;
    font: 700 9px/16px Tahoma, Arial, sans-serif;
    text-align: center;
}

body.hero_auction #auction.trav47AuctionBidsPage .trav47AuctionHistoryNotice.is-error {
    border-color: #d5a9a0;
    color: #913f32;
    background: #fff0ed;
}

body.hero_auction .auctionBidError {
    margin: 0;
    padding: 7px 8px;
    border: 0;
    border-bottom: 1px solid #e0b4aa;
    color: #923c2d;
    background: #fff0ec;
    box-sizing: border-box;
    font: 700 10px/17px Tahoma, Arial, sans-serif;
    text-align: center;
}

body.hero_auction .trav47AuctionFilters {
    display: flex;
    gap: 4px;
    width: 100%;
    padding: 5px 5px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-bottom: 1px solid #c4d1d5;
    background: #e5edef;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #87986f #eee5c9;
}

body.hero_auction .trav47AuctionFilters::-webkit-scrollbar {
    height: 3px;
}

body.hero_auction .trav47AuctionFilters::-webkit-scrollbar-track {
    background: #eee5c9;
}

body.hero_auction .trav47AuctionFilters::-webkit-scrollbar-thumb {
    min-width: 26px;
    border: 0;
    border-radius: 0;
    background: #87986f;
    clip-path: polygon(0 50%, 5px 0, 100% 0, 100% 100%, 5px 100%);
}

body.hero_auction .trav47AuctionFilters::-webkit-scrollbar-thumb:hover {
    background: #71825b;
}

body.hero_auction .trav47AuctionFilters::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

body.hero_auction .trav47AuctionFilter {
    position: relative;
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #b4c6cc;
    border-radius: 5px;
    color: #50666e;
    background: #f8fbfc;
    box-sizing: border-box;
    text-decoration: none;
}

body.hero_auction .trav47AuctionFilter:hover,
body.hero_auction .trav47AuctionFilter:focus-visible {
    border-color: #7798a4;
    background: #fff;
}

body.hero_auction .trav47AuctionFilter.is-active {
    border-color: #668f35;
    background: #e9f3dc;
    box-shadow: inset 0 0 0 1px rgba(102, 143, 53, .18);
}

body.hero_auction .trav47AuctionFilterAll {
    color: #6d943d;
    font-size: 19px;
    line-height: 1;
}

body.hero_auction .trav47AuctionFilterLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Auction sell view: replaces the legacy tables, nine-slice boxes and dialog skin. */
body.hero_auction .trav47AuctionSellPage {
    width: 100%;
    margin: 0;
    padding: 5px;
    border: 0;
    background: #edf3f5;
    box-sizing: border-box;
    font-family: Tahoma, Arial, sans-serif;
}

body.hero_auction .trav47AuctionSellPage.is-loading {
    pointer-events: none;
}

body.hero_auction .trav47AuctionSellSection {
    width: 100%;
    margin: 0 0 6px;
    overflow: hidden;
    border: 1px solid #b8c9ce;
    border-radius: 6px;
    background: #f9fbfc;
    box-shadow: 0 1px 1px rgba(45, 70, 79, .07);
    box-sizing: border-box;
}

body.hero_auction .trav47AuctionSellSection:last-of-type {
    margin-bottom: 0;
}

body.hero_auction .trav47AuctionSellSectionHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 31px;
    padding: 4px 7px;
    border: 0;
    border-bottom: 1px solid #c3d2c0;
    background: #e8f0e4;
    box-sizing: border-box;
}

body.hero_auction .trav47AuctionSellSectionHeader h2 {
    margin: 0;
    color: #354d37;
    font: 700 12px/20px Tahoma, Arial, sans-serif;
}

body.hero_auction .trav47AuctionSellCapacity,
body.hero_auction .trav47AuctionSellLimit {
    min-width: 34px;
    padding: 1px 5px;
    border: 1px solid #b6c8b1;
    border-radius: 9px;
    color: #4e6a4e;
    background: rgba(255, 255, 255, .72);
    box-sizing: border-box;
    font: 700 10px/16px Tahoma, Arial, sans-serif;
    text-align: center;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionSellCapacity {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    direction: rtl;
}

body.hero_auction .trav47AuctionSellLimit {
    color: #8a4a37;
    border-color: #d2b4a8;
}

body.hero_auction .trav47AuctionSellNotice {
    margin: 0 0 5px;
    padding: 6px 8px;
    border: 1px solid #bbd0a9;
    border-radius: 5px;
    color: #456629;
    background: #f0f7e9;
    font: 700 10px/17px Tahoma, Arial, sans-serif;
    text-align: center;
}

body.hero_auction .trav47AuctionSellNotice.is-transient {
    margin: 5px 6px 0;
    transition: opacity .18s ease, transform .18s ease;
}

body.hero_auction .trav47AuctionSellNotice.is-error {
    border-color: #d5aaa0;
    color: #8a372b;
    background: #fff0ed;
}

body.hero_auction .trav47AuctionSellNotice.is-hiding {
    opacity: 0;
    transform: translateY(-3px);
}

body.hero_auction .trav47AuctionSellEmpty {
    margin: 0;
    padding: 13px 8px;
    color: #78878c;
    font: 400 10px/18px Tahoma, Arial, sans-serif;
    text-align: center;
}

body.hero_auction .trav47AuctionSellRows,
body.hero_auction .trav47AuctionSellHistoryRows {
    display: grid;
    width: 100%;
}

body.hero_auction .trav47AuctionSellRow,
body.hero_auction .trav47AuctionSellHistoryRow {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    grid-template-rows: minmax(25px, auto) minmax(22px, auto);
    align-items: center;
    column-gap: 5px;
    min-width: 0;
    padding: 4px 5px;
    border: 0;
    border-bottom: 1px solid #d7e0e3;
    background: #fbfcfc;
    box-sizing: border-box;
}

body.hero_auction .trav47AuctionSellRow:last-child,
body.hero_auction .trav47AuctionSellHistoryRow:last-child {
    border-bottom: 0;
}

body.hero_auction .trav47AuctionSellCurrent .trav47AuctionSellRow {
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    grid-template-rows: minmax(34px, auto);
}

body.hero_auction .trav47AuctionSellCurrent .trav47AuctionSellCategory {
    grid-row: auto;
}

body.hero_auction .trav47AuctionSellEndingSoon {
    color: #62843d;
    font: 700 9px/17px Tahoma, Arial, sans-serif;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionSellCategory {
    display: flex;
    grid-row: 1 / 3;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: 1px solid #c9d4d7;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}

body.hero_auction .trav47AuctionSellIdentity {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 4px;
}

body.hero_auction .trav47AuctionSellIdentity strong {
    min-width: 0;
    overflow: hidden;
    color: #314b54;
    font: 700 10px/17px Tahoma, Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionSellIdentity small {
    flex: 0 0 auto;
    color: #738489;
    font: 700 9px/15px Tahoma, Arial, sans-serif;
}

body.hero_auction .trav47AuctionSellMetric,
body.hero_auction .trav47AuctionSellTime {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #40575e;
    font: 700 9px/16px Tahoma, Arial, sans-serif;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionSellMetric img,
body.hero_auction .trav47AuctionSellTime img {
    flex: 0 0 auto;
}

body.hero_auction .trav47AuctionSellTime {
    grid-column: 2 / 4;
    justify-self: start;
    color: #527a2c;
}

body.hero_auction .trav47AuctionCancelForm,
body.hero_auction .trav47AuctionSellLocked {
    grid-column: 4;
    margin: 0;
    justify-self: end;
}

body.hero_auction .trav47AuctionSellCancel {
    min-width: 43px;
    height: 21px;
    margin: 0;
    padding: 0 6px;
    border: 1px solid #b87d68;
    border-radius: 4px;
    color: #844331;
    background: linear-gradient(#fff8f4, #edd5ca);
    box-shadow: none;
    box-sizing: border-box;
    font: 700 9px/19px Tahoma, Arial, sans-serif;
    cursor: pointer;
}

body.hero_auction .trav47AuctionSellLocked {
    color: #8b979a;
    font: 700 8.5px/17px Tahoma, Arial, sans-serif;
}

body.hero_auction .trav47AuctionSellItems {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    padding: 5px;
    background: #e8edef;
    box-sizing: border-box;
}

body.hero_auction .trav47AuctionSellItem {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 78px;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    margin: 0;
    padding: 1px 2px 4px;
    overflow: hidden;
    border: 1px solid #bdcbd0;
    border-radius: 5px;
    color: #40555d;
    background: #f9fbfc;
    background-image: none !important;
    box-shadow: 0 1px 1px rgba(44, 65, 72, .06);
    box-sizing: border-box;
    cursor: pointer;
    font-family: Tahoma, Arial, sans-serif;
}

body.hero_auction .trav47AuctionSellItem:hover,
body.hero_auction .trav47AuctionSellItem:focus-visible {
    border-color: #739843;
    background: #f2f8ec;
}

body.hero_auction .trav47AuctionSellItem.is-disabled {
    cursor: default;
    opacity: .55;
}

body.hero_auction #auction.trav47AuctionSellPage #itemsToSale .trav47AuctionSellItemSprite {
    display: block;
    position: relative !important;
    float: none !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 2px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    transform: none !important;
    box-sizing: border-box !important;
}

body.hero_auction .trav47AuctionSellItemAmount {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
    padding: 0 3px;
    border-radius: 3px;
    color: #fff;
    background: rgba(68, 83, 88, .78);
    font: 700 8px/13px Tahoma, Arial, sans-serif;
}

body.hero_auction .trav47AuctionSellItemName {
    display: block;
    width: 100%;
    overflow: hidden;
    font: 700 8px/15px Tahoma, Arial, sans-serif;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionSellHistoryRow {
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
}

body.hero_auction .trav47AuctionSellFinishedAt {
    grid-column: 2 / -1;
    justify-self: start;
    color: #738287;
    font: 400 8.5px/16px Tahoma, Arial, sans-serif;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionSellPagination {
    padding: 5px;
}

body.hero_auction .trav47AuctionSellFallbackForm {
    display: none;
}

.trav47AuctionSellDialogBackdrop {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(22, 34, 39, .52);
    box-sizing: border-box;
}

.trav47AuctionSellDialog {
    width: min(330px, 100%);
    overflow: hidden;
    border: 1px solid #71878d;
    border-radius: 8px;
    color: #314950;
    background: #f8fbfc;
    box-shadow: 0 8px 24px rgba(20, 33, 38, .32);
    box-sizing: border-box;
    font-family: Tahoma, Arial, sans-serif;
}

.trav47AuctionSellDialog > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 35px;
    padding: 4px 7px;
    border-bottom: 1px solid #b7c7cc;
    background: linear-gradient(#e9f0f2, #d4e0e3);
}

.trav47AuctionSellDialog > header h2 {
    margin: 0;
    font: 700 12px/20px Tahoma, Arial, sans-serif;
}

.trav47AuctionSellDialogClose {
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 1px solid #9aaeb4;
    border-radius: 4px;
    color: #536c74;
    background: #fff;
    box-shadow: none;
    font: 700 17px/21px Arial, sans-serif;
    cursor: pointer;
}

.trav47AuctionSellDialogBody {
    padding: 10px;
    text-align: center;
}

.trav47AuctionSellDialogBody strong {
    display: block;
    color: #38545d;
    font: 700 12px/20px Tahoma, Arial, sans-serif;
}

.trav47AuctionSellDialogBody p {
    margin: 3px 0 8px;
    color: #657a81;
    font: 400 9.5px/17px Tahoma, Arial, sans-serif;
}

.trav47AuctionSellDialogBody label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 700 10px/25px Tahoma, Arial, sans-serif;
}

.trav47AuctionSellDialogBody input {
    width: 82px;
    height: 27px;
    padding: 2px 6px;
    border: 1px solid #aebfc4;
    border-radius: 4px;
    color: #314950;
    background: #fff;
    box-sizing: border-box;
    font: 700 11px/21px Tahoma, Arial, sans-serif;
    text-align: center;
}

.trav47AuctionSellDialog > footer {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 0 8px 9px;
}

.trav47AuctionSellDialogConfirm,
.trav47AuctionSellDialogCancel {
    min-width: 88px;
    height: 29px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid #5d832e;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(#83ad47, #568225);
    box-shadow: 0 1px 1px rgba(45, 70, 27, .18);
    font: 700 10px/27px Tahoma, Arial, sans-serif;
    cursor: pointer;
}

.trav47AuctionSellDialogConfirm.is-submitting,
.trav47AuctionSellDialogConfirm:disabled {
    cursor: wait;
    filter: saturate(.7) brightness(.94);
    opacity: .82;
}

.trav47AuctionSellDialogError {
    margin: 7px 0 0;
    padding: 5px 7px;
    border: 1px solid #d8afa5;
    border-radius: 4px;
    color: #8b382d;
    background: #fff0ed;
    font: 700 9px/15px Tahoma, Arial, sans-serif;
}

.trav47AuctionSellDialogCancel {
    border-color: #9eaeb3;
    color: #50666e;
    background: linear-gradient(#fff, #e4ecee);
}

body.hero_auction .trav47AuctionList {
    display: grid;
    gap: 5px;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

body.hero_auction .trav47AuctionCard {
    width: 100%;
    overflow: hidden;
    border: 1px solid #b9cbd1;
    border-radius: 6px;
    background: #f9fbfc;
    box-shadow: 0 1px 1px rgba(45, 70, 79, .08);
    box-sizing: border-box;
}

body.hero_auction .trav47AuctionCard.is-open {
    border-color: #7ea04e;
    box-shadow: 0 0 0 1px rgba(126, 160, 78, .12);
}

body.hero_auction .trav47AuctionCardToggle {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 4px 5px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: #304a53;
    background: transparent;
    background-image: none !important;
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
    font-family: Tahoma, Arial, sans-serif;
    text-align: right;
}

body.hero_auction .trav47AuctionCardToggle:hover,
body.hero_auction .trav47AuctionCardToggle:focus-visible {
    background: #f1f7f8;
}

body.hero_auction .trav47AuctionItemIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-left: 1px solid #d4dfe2;
}

body.hero_auction .trav47AuctionItemIdentity {
    display: grid;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 1px;
    min-width: 0;
}

body.hero_auction .trav47AuctionItemTopline,
body.hero_auction .trav47AuctionItemSubline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(88px, auto);
    align-items: center;
    gap: 5px;
    min-width: 0;
    direction: rtl;
}

body.hero_auction .trav47AuctionItemCategory {
    min-width: 0;
    overflow: hidden;
    color: #7c8d92;
    font: 400 8.5px/14px Tahoma, Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionItemHeading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
    direction: rtl;
}

body.hero_auction .trav47AuctionItemHeading strong {
    overflow: hidden;
    min-width: 0;
    color: #304a53;
    font: 700 11px/18px Tahoma, Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionItemHeading small {
    flex: 0 0 auto;
    color: #6e7d82;
    font: 700 10px/16px Tahoma, Arial, sans-serif;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionItemMeta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
}

body.hero_auction .trav47AuctionItemTime {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    color: #4c7a28;
    font: 700 9px/15px Tahoma, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionCardStats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 4px;
    min-width: 88px;
    color: #52686f;
    font: 700 10px/16px Tahoma, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

body.hero_auction .trav47AuctionCardStats > span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionCardAction {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 23px;
    padding: 1px 6px;
    border: 1px solid #4e7b20;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(#83b843, #5e8d27);
    box-shadow: inset 0 1px rgba(255, 255, 255, .28);
    box-sizing: border-box;
    font: 700 9px/19px Tahoma, Arial, sans-serif;
    text-shadow: 0 1px #3a5d19;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionDetail {
    position: relative;
    padding: 7px;
    border-top: 1px solid #c7d5d9;
    background: #eef4f5;
    box-sizing: border-box;
}

body.hero_auction .trav47AuctionDetail.hide {
    display: none;
}

body.hero_auction .trav47AuctionDescription {
    padding: 0 1px 6px;
    color: #40575f;
    text-align: center;
}

body.hero_auction .trav47AuctionDescription p {
    margin: 0;
    color: #65767c;
    font: 400 10px/17px Tahoma, Arial, sans-serif;
    direction: rtl;
    unicode-bidi: plaintext;
}

body.hero_auction .trav47AuctionBidFacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 7px;
    border-top: 1px solid #d0dcdf;
    border-bottom: 1px solid #d0dcdf;
}

body.hero_auction .trav47AuctionBidFacts > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 5px 3px;
    border-left: 1px solid #d0dcdf;
    box-sizing: border-box;
}

body.hero_auction .trav47AuctionBidFacts > span:last-child {
    border-left: 0;
}

body.hero_auction .trav47AuctionBidFacts small {
    color: #718187;
    font: 400 9px/14px Tahoma, Arial, sans-serif;
}

body.hero_auction .trav47AuctionBidFacts strong {
    max-width: 100%;
    overflow: hidden;
    color: #344e57;
    font: 700 10px/17px Tahoma, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionBidForm {
    display: grid;
    grid-template-columns: auto 108px auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
}

body.hero_auction .trav47AuctionBidForm.is-submitting {
    pointer-events: none;
    opacity: .58;
}

body.hero_auction .trav47AuctionBidForm label {
    color: #435b63;
    font: 700 10px/28px Tahoma, Arial, sans-serif;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionBidInput {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 29px;
    padding: 2px 6px;
    border: 1px solid #aebfc5;
    border-radius: 5px;
    background: #fff;
    box-sizing: border-box;
}

body.hero_auction .trav47AuctionBidInput input {
    width: 100%;
    min-width: 0;
    height: 23px;
    padding: 0;
    border: 0;
    outline: 0;
    color: #314a53;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    font: 700 11px/23px Tahoma, Arial, sans-serif;
    text-align: center;
}

body.hero_auction .trav47AuctionBidForm button {
    min-width: 61px;
    min-height: 29px;
    padding: 3px 9px;
    border: 1px solid #4f7a22;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(#83b642, #5d8c27);
    box-shadow: inset 0 1px rgba(255, 255, 255, .28);
    font: 700 10px/21px Tahoma, Arial, sans-serif;
    text-shadow: 0 1px #3a5a1b;
}

body.hero_auction .trav47AuctionBidForm button:disabled {
    border-color: #aab4b7;
    color: #e9eeee;
    background: #aeb9bc;
    text-shadow: none;
}

body.hero_auction .trav47AuctionBidNotice,
body.hero_auction .trav47AuctionEmpty {
    padding: 8px;
    color: #7a572d;
    background: #fff8e8;
    font: 700 10px/17px Tahoma, Arial, sans-serif;
    text-align: center;
}

body.hero_auction .trav47AuctionBidNotice {
    margin-top: 6px;
    border-top: 1px solid #e6d9ba;
}

body.hero_auction .trav47AuctionCardToast {
    position: absolute;
    z-index: 4;
    right: 50%;
    bottom: 7px;
    max-width: calc(100% - 14px);
    padding: 4px 11px;
    border: 1px solid transparent;
    border-radius: 5px;
    opacity: 0;
    box-shadow: 0 2px 7px rgba(35, 53, 59, .2);
    box-sizing: border-box;
    font: 700 9px/17px Tahoma, Arial, sans-serif;
    text-align: center;
    transform: translate(50%, 4px);
    transition: opacity .16s ease, transform .16s ease;
    white-space: nowrap;
}

body.hero_auction .trav47AuctionCardToast.is-visible {
    opacity: 1;
    transform: translate(50%, 0);
}

body.hero_auction .trav47AuctionCardToast.is-success {
    border-color: #749b45;
    color: #fff;
    background: #628e33;
}

body.hero_auction .trav47AuctionCardToast.is-error {
    border-color: #b75c4d;
    color: #fff;
    background: #a94d3e;
}

body.hero_auction .trav47AuctionPagination {
    display: grid;
    grid-template-columns: 72px 1fr 72px;
    align-items: center;
    gap: 7px;
    padding: 4px 5px 9px;
}

body.hero_auction .trav47AuctionPageButton {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border: 1px solid #9eb2b9;
    border-radius: 5px;
    color: #3e5b65;
    background: #f8fbfc;
    font: 700 10px/26px Tahoma, Arial, sans-serif;
    text-decoration: none;
}

body.hero_auction .trav47AuctionPageButton.is-disabled {
    pointer-events: none;
    opacity: .42;
}

body.hero_auction .trav47AuctionPagination > span {
    color: #5d7077;
    font: 700 10px/18px Tahoma, Arial, sans-serif;
    text-align: center;
}

/* Standalone auction currency converter. It deliberately uses no legacy silver-exchange UI classes. */
body.hero_auction .trav47CurrencyConverter,
body.hero_auction .trav47CurrencyConverter * {
    box-sizing: border-box;
}

body.hero_auction .trav47CurrencyConverter {
    position: relative;
    display: block;
    width: calc(100% - 10px);
    max-width: calc(100% - 10px);
    min-width: 0;
    margin: 5px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #a8b99c;
    border-radius: 7px;
    background: #fffdf5;
    box-shadow: 0 1px 2px rgba(55, 70, 43, .14);
    color: #35472f;
    direction: rtl;
}

body.hero_auction .trav47CurrencyConverter button,
body.hero_auction .trav47CurrencyConverter input {
    appearance: none;
    -webkit-appearance: none;
    font-family: Tahoma, Arial, sans-serif !important;
}

body.hero_auction button.trav47CurrencyToggle {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 12px;
    align-items: center;
    gap: 7px;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 2px 9px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    color: #344b2f !important;
    background: linear-gradient(180deg, #f4f8ee, #e5eedc) !important;
    background-image: linear-gradient(180deg, #f4f8ee, #e5eedc) !important;
    box-shadow: none !important;
    font: 700 11px/20px Tahoma, Arial, sans-serif !important;
    text-align: right !important;
    text-shadow: none !important;
    cursor: pointer;
}

body.hero_auction .trav47CurrencyTitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hero_auction .trav47CurrencyBalance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    color: #52664a;
    font: 700 10px/18px Tahoma, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    white-space: nowrap;
}

body.hero_auction .trav47CurrencyChevron {
    width: 7px;
    height: 7px;
    margin: 0 1px;
    border-left: 2px solid #607554;
    border-bottom: 2px solid #607554;
    transform: rotate(-45deg);
    transition: transform .16s ease;
}

body.hero_auction .trav47CurrencyConverter.is-open .trav47CurrencyChevron {
    transform: rotate(135deg);
}

body.hero_auction .trav47CurrencyPanel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-top: 1px solid #bdcbb3;
    background: #fffdf7;
}

body.hero_auction .trav47CurrencyPanel[hidden],
body.hero_auction .trav47CurrencyForm[hidden] {
    display: none !important;
}

body.hero_auction .trav47CurrencyModes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #c8d2c0;
    background: #edf3e7;
}

body.hero_auction button.trav47CurrencyMode {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    border: 0 !important;
    border-left: 1px solid #c8d2c0 !important;
    border-radius: 0 !important;
    color: #66745e !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    font: 700 9px/18px Tahoma, Arial, sans-serif !important;
    text-shadow: none !important;
    cursor: pointer;
}

body.hero_auction button.trav47CurrencyMode:last-child {
    border-left: 0 !important;
}

body.hero_auction button.trav47CurrencyMode.is-active {
    color: #3f6824 !important;
    background: #fffdf7 !important;
    box-shadow: inset 0 -2px #729d43 !important;
}

body.hero_auction .trav47CurrencyModeIcons {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    color: #75816e;
    direction: rtl;
}

body.hero_auction .trav47CurrencyModeIcons b {
    font: 700 12px/1 Tahoma, Arial, sans-serif;
}

body.hero_auction .trav47CurrencyForm {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 8px;
    border: 0;
    background: #fffdf7;
}

body.hero_auction .trav47CurrencyFields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    align-items: end;
    gap: 5px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body.hero_auction .trav47CurrencyField {
    display: grid;
    grid-template-rows: 14px 30px;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #60705a;
}

body.hero_auction .trav47CurrencyFieldName {
    display: block;
    overflow: hidden;
    font: 400 8px/14px Tahoma, Arial, sans-serif;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hero_auction .trav47CurrencyInput,
body.hero_auction .trav47CurrencyResult strong {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 2px 6px;
    overflow: hidden;
    border: 1px solid #b3c1a9;
    border-radius: 5px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(55, 69, 44, .07);
    direction: ltr;
}

body.hero_auction .trav47CurrencyInput input {
    width: 100% !important;
    min-width: 0 !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    color: #344b2f !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    font: 700 11px/24px Tahoma, Arial, sans-serif !important;
    text-align: center !important;
}

body.hero_auction .trav47CurrencyResult strong {
    color: #405738;
    background: #f3f6ef;
    font: 700 11px/24px Tahoma, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}

body.hero_auction .trav47CurrencyArrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    color: #718467;
    font: 700 15px/30px Tahoma, Arial, sans-serif;
    direction: ltr;
}

body.hero_auction .trav47CurrencyActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid #d9e0d2;
}

body.hero_auction .trav47CurrencyRate {
    min-width: 0;
    overflow: hidden;
    color: #73806c;
    font: 400 8px/18px Tahoma, Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hero_auction button.trav47CurrencySubmit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 70px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 3px 10px !important;
    border: 1px solid #4d7920 !important;
    border-radius: 5px !important;
    color: #fff !important;
    background: linear-gradient(180deg, #83b642, #5d8c27) !important;
    background-image: linear-gradient(180deg, #83b642, #5d8c27) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .28) !important;
    font: 700 9px/20px Tahoma, Arial, sans-serif !important;
    text-shadow: 0 1px #385817 !important;
    cursor: pointer;
}

body.hero_auction button.trav47CurrencySubmit:disabled {
    opacity: .46;
    filter: grayscale(.2);
    cursor: default;
}

body.hero_auction button.trav47CurrencySubmit.is-loading {
    color: transparent !important;
    pointer-events: none;
}

body.hero_auction button.trav47CurrencySubmit.is-loading::after {
    content: '';
    position: absolute;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(255,255,255,.48);
    border-top-color: #fff;
    border-radius: 50%;
    animation: trav47CurrencySpin .7s linear infinite;
}

@keyframes trav47CurrencySpin {
    to { transform: rotate(360deg); }
}

body.hero_auction .trav47CurrencyMessage {
    display: none;
    width: 100%;
    margin: 0;
    padding: 6px 8px;
    border-top: 1px solid #d2dccb;
    font: 700 9px/17px Tahoma, Arial, sans-serif;
    text-align: center;
}

body.hero_auction .trav47CurrencyMessage.is-success,
body.hero_auction .trav47CurrencyMessage.is-error {
    display: block;
}

body.hero_auction .trav47CurrencyMessage.is-success {
    color: #426f29;
    background: #eff6e8;
}

body.hero_auction .trav47CurrencyMessage.is-error {
    color: #984535;
    background: #fff0ec;
}

body.hero_auction .trav47CurrencyMessage img {
    vertical-align: -2px;
}

body.hero_auction .trav47CurrencyMessageAmount {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    direction: rtl;
    white-space: nowrap;
}

@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body.hero_auction .trav47CurrencyConverter {
        width: calc(100% - 8px) !important;
        max-width: calc(100% - 8px) !important;
        margin: 4px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction button.trav47CurrencyToggle {
        min-height: 28px !important;
        padding: 2px 7px !important;
        font-size: 10px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47CurrencyForm {
        padding: 6px !important;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47CurrencyFields {
        grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
        gap: 4px;
    }
}

@media screen and (max-width: 350px) {
    html#mainLayout[data-trav47-layout] body.hero_auction .trav47CurrencyFieldName {
        display: none;
    }

    html#mainLayout[data-trav47-layout] body.hero_auction .trav47CurrencyField {
        grid-template-rows: 30px;
    }
}