/* Compact header favorite control shared by buildings and the main tabbed pages. */
@media screen and (max-width: 1024px) {
    html#mainLayout[data-trav47-layout] body #center #contentOuterContainer > .contentTitle > #tabFavorButton {
        position: absolute !important;
        top: 7px !important;
        right: auto !important;
        left: 40px !important;
        z-index: 7 !important;
        display: block !important;
        float: none !important;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #293a16 !important;
        border-radius: 3px !important;
        background-color: #4f7426 !important;
        background-image: linear-gradient(180deg, #7ea94a, #4f7426) !important;
        box-shadow: inset 0 1px rgba(255,255,255,.38), 0 1px 2px rgba(24,16,10,.5) !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* The statistics shell is deliberately hidden until its first responsive
       layout pass. Do not let the generic favorite-button visibility rule
       make this one control flash before the header and close button. */
    html#mainLayout[data-trav47-layout] body.trav47StatisticsPage.travianStatisticsPrelayout #center #contentOuterContainer > .contentTitle > #tabFavorButton {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html#mainLayout[data-trav47-layout] body #center #contentOuterContainer > .contentTitle > #tabFavorButton::before {
        background-image: none !important;
    }

    html#mainLayout[data-trav47-layout] body #center #contentOuterContainer > .contentTitle > #tabFavorButton::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        right: auto !important;
        left: 50% !important;
        z-index: 2 !important;
        display: block !important;
        width: 18px !important;
        height: 14px !important;
        background: url('../../images/ui/hud/content/favor_small.png') center / 18px 14px no-repeat !important;
        transform: translate(-50%, -50%) !important;
    }

    html#mainLayout[data-trav47-layout] body #center #contentOuterContainer > .contentTitle > #tabFavorButton.is-active {
        border-color: #d4a42e !important;
        box-shadow: inset 0 0 0 1px #f2c24e, inset 0 1px rgba(255,255,255,.38), 0 1px 2px rgba(24,16,10,.5) !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window > .contentTitle > #tabFavorButton {
        display: block !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window > .contentTitle > #tabFavorButton.is-active {
        border-color: #d4a42e !important;
        box-shadow: inset 0 0 0 1px #f2c24e, inset 0 1px 0 rgba(235,250,207,.48), 0 1px 2px rgba(24,15,9,.55) !important;
    }

    html#mainLayout[data-trav47-layout] body.build:not(.village1):not(.village2) #center #contentOuterContainer.trav47-phone-page-window.trav47-structured-building-window > .contentTitle > #tabFavorButton {
        display: block !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47MessagesPage #center #contentOuterContainer.trav47MessagesWindow > .trav47MessagesHeader > #tabFavorButton {
        display: block !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47ReportsPage #center #contentOuterContainer.trav47ReportsWindow > .trav47ReportsHeader > #tabFavorButton {
        left: 31px !important;
    }

    html#mainLayout[data-trav47-layout] body.build #center #contentOuterContainer.trav47-structured-building-window > .contentTitle .travian-mobile-build-title,
    html#mainLayout[data-trav47-layout] body.trav47MessagesPage .trav47MessagesPhoneTitle,
    html#mainLayout[data-trav47-layout] body.trav47StatisticsPage .trav47StatisticsPhoneTitle,
    html#mainLayout[data-trav47-layout] body.trav47ReportsPage .trav47ReportsPhoneTitle,
    html#mainLayout[data-trav47-layout] body.trav47HeroPage #center #contentOuterContainer.trav47HeroWindow > .trav47HeroHeader > .heroSectionHeader {
        left: 72px !important;
    }

    html#mainLayout[data-trav47-layout] body.trav47ReportsPage .trav47ReportsPhoneTitle {
        left: 63px !important;
    }

}