@CHARSET "UTF-8";
@import "default_compressed0.css";
@import "default_compressed1.css";
@import "default_compressed2.css?v=551.1.1";
@import "default_compressed3.css";
@import "default_compressed4.css";
@import "questmaster.css?v=551.1.2";
@import "construct_building_551_1.css";
@import "unit_assets_551_1.css";

div#build.gid16 div.filterWrapper img.sortOrder {
    background-position: 0 -144px;
}

div#footer {
    background-image: radial-gradient(50% 100% ellipse at 50% 0, rgba(46, 62, 36, .7), rgba(46, 62, 36, 0));
    background-position: center top;
}

#footer .centuriaTagline {
    width: min(1003px, calc(100% - 80px));
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0 auto;
    color: #f0d99b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .015em;
    line-height: 22px;
    text-shadow: 0 1px 2px rgba(24, 18, 8, .72);
    white-space: nowrap;
}

#footer .centuriaTagline::before,
#footer .centuriaTagline::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, transparent, rgba(185, 133, 54, .9));
}

#footer .centuriaTagline::after {
    transform: rotate(180deg);
}

#footer .centuriaRelease {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 2px auto 0;
    color: rgba(220, 224, 214, .52);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 14px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(24, 18, 8, .55);
}

/* Keep nested icon glyph SVGs in their parent icon instead of applying the button's centering transform twice. */
.buttonFramed.withIcon > svg {
    position: absolute;
    inset: 50% auto auto 50%;
    overflow: visible;
    transform: translateX(-50%) translateY(-50%);
}

/* Match the live Hero V2 portrait crop in the top bar. */
#topBarHeroWrapper #topBarHero .heroImageButton .heroImageHover .heroImage,
#topBarHeroWrapper #topBarHero .heroImageButton .heroImageHover .heroImage.heroImageFemale,
#topBarHeroWrapper #topBarHero .heroImageButton .heroImageHover .heroImage.heroImageMale {
    position: absolute;
    top: -7px;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translateX(-50%);
}

.rtl #topBarHeroWrapper #topBarHero .heroImageButton .heroImageHover .heroImage {
    transform: translateX(-50%) scaleX(-1);
}

.sidebar #sidebarBoxActiveVillage .header .layoutButton svg.fastBuilder {
    width: 21px;
    height: 21px;
}

.sidebar #sidebarBoxActiveVillage .header .layoutButton.fastBuilder.fastBuilderOff:before {
    background-color: #747a6a;
    box-shadow: inset 0 -1px 1px 1px #90b65e, inset 0 1px 1px 1px #b3c19d;
}

.sidebar #sidebarBoxActiveVillage .header .layoutButton.fastBuilder.fastBuilderOff:hover:before {
    background-color: #747a6a;
    box-shadow: inset 0 -1px 1px 1px #90b65e, inset 0 1px 1px 1px #b3c19d;
}

.sidebar #sidebarBoxActiveVillage .header .layoutButton.fastBuilder.fastBuilderOff svg {
    opacity: .6;
}

#sidebarBoxActiveVillage .content {
    display: grid;
    grid-template-columns: auto auto;
}

#sidebarBoxActiveVillage .content > div {
    grid-column: 1 / 3;
}

.sidebar #sidebarBoxActiveVillage .content .population,
#sidebarBoxActiveVillage .content .loyalty {
    font-size: 11px;
}

.sidebar #sidebarBoxActiveVillage .content .population span,
#sidebarBoxActiveVillage .content .loyalty span {
    font-family: Arial, Helvetica, Verdana, sans-serif;
}

#sidebarBoxActiveVillage .content .population {
    color: #666;
    grid-column: 1 / 2;
}

.sidebar #sidebarBoxActiveVillage .content .loyalty {
    grid-column: 2 / 3;
    justify-self: end;
    text-align: left;
}

.sidebar.rtl #sidebarBoxActiveVillage .header .layoutButton svg.fastBuilder,
.rtl .sidebar #sidebarBoxActiveVillage .header .layoutButton svg.fastBuilder {
    transform: translateX(-50%) translateY(-50%) scaleX(-1);
}

.buttonFramed.withIcon > svg > g > svg {
    position: static;
    inset: auto;
    transform: none !important;
    opacity: 1 !important;
}

.rtl .buttonFramed.withIcon > svg,
.buttonFramed.withIcon .rtl > svg {
    transform: translateX(50%) translateY(-50%) scaleX(-1);
}

.rtl.ie .buttonFramed.withIcon > svg,
.buttonFramed.withIcon .rtl.ie > svg {
    transform: translateX(-50%) translateY(-50%) scaleX(-1);
}

/* Keep the World Wonder artwork centered in the building view. */
.buildingsV3 .buildingSlot.ww.g40 {
    width: 299px;
    height: 440px;
    z-index: 41;
    left: 501px;
    top: 147px;
}

/* Keep desktop village overlay panels aligned with the official map coordinate system. */
@media screen and (min-width: 621px) {
    div.village1 .villageInfoWrapper {
        inset-inline-start: 15px;
        inset-block-start: -1px;
    }
}

/* Match the live legacy 3x contribution modal artwork and layout. */
.bonus-donation-gold img.res_big {
    width: 247px;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25));
}

.bonus-donation-gold-container {
    margin-left: 235px;
}