@charset "UTF-8";
@import url("../../css_rtl/travianLayout.css");
@import url("../../css_rtl/travianA2B.css");
@import url("../../css_rtl/travianActivate.css");
@import url("../../css_rtl/travianAlliance.css");
@import url("../../css_rtl/travianBannedCn.css");
@import url("../../css_rtl/travianBuildings.css");
@import url("../../css_rtl/buildings/buildingsConfig.css");
@import url("../../css_rtl/travianVillage.css");
@import url("../../css_rtl/travianVillage1.css");
@import url("../../css_rtl/travianVillage2.css");
@import url("../../css_rtl/travianVillage3.css");
@import url("../../css_rtl/travianHero.css");
@import url("../../css_rtl/travianRaidList.css");
@import url("../../css_rtl/travianPayment.css");
@import url("../../css_rtl/hacks.css");
@import url("../../css_rtl/highlight.css");
@import url("../../css_rtl/travianGeneral.css");
@import url("../../css_rtl/travianLinklist.css");
@import url("../../css_rtl/travianSupport.css");
@import "fontiran.css";
@import "compact1.css";
@import "compact2.css";
@import "compact3.css";
@import url("../../css_rtl/imports_compressed.css");
#oneTimeOfferNotification.firstTimeAnimation .costsWrapper div.forOnly {
    animation-delay: 1600ms
}

#oneTimeOfferNotification.firstTimeAnimation .costsWrapper div.price {
    animation-delay: 1800ms
}

#oneTimeOfferNotification:not(.firstTimeAnimation) .notificationPackage .content:before {
    animation: otoShine 30000ms 30000ms ease-in-out infinite
}

#oneTimeOfferNotification.dismissed {
    animation: otoDismiss 250ms 250ms ease-in forwards;
    transform-origin: center right;
    pointer-events: none
}

@media screen and (max-width:1380px) {
    #oneTimeOfferNotification.dismissed {
        animation-name: otoDismissSmallVersion
    }
}

#oneTimeOfferNotification.dismissed .notificationPackage .content:before {
    animation: none
}

#oneTimeOfferNotification.dismissed .notificationTimer {
    transition-duration: 250ms;
    transform: translateX(100%)
}

#oneTimeOfferNotification.dismissed .closeAnnouncement {
    transition-duration: 150ms;
    transform: scale(0)
}

@keyframes otoDismiss {
    0% {
        opacity: 1;
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        transform: translateX(50px)
    }
}

@keyframes otoDismissSmallVersion {
    0% {
        opacity: 1;
        transform: translateX(0) scale(0.82)
    }
    100% {
        opacity: 0;
        transform: translateX(50px) scale(0.82)
    }
}

@keyframes otoAppear {
    0% {
        transform: translateX(-100px);
        opacity: 0
    }
    50% {
        opacity: 1
    }
    70% {
        transform: translateX(10px)
    }
    100% {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes otoAppearSmallVersion {
    0% {
        transform: translateX(-100px) scale(0.82);
        opacity: 0
    }
    50% {
        opacity: 1
    }
    70% {
        transform: translateX(10px) scale(0.82)
    }
    100% {
        transform: translateX(0) scale(0.82);
        opacity: 1
    }
}

@keyframes otoZoomIn {
    0% {
        opacity: 0;
        transform: scale(1.2)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes otoShine {
    0% {
        transform: translateX(-300px) skew(-33deg, 0)
    }
    2.5% {
        transform: translateX(100px) skew(-33deg, 0)
    }
    2.6% {
        transform: translateX(100px) skew(33deg, 0)
    }
    5%,
    100% {
        transform: translateX(-300px) skew(33deg, 0)
    }
}

.ie #oneTimeOfferNotification .gradientFrameShape {
    background-image: linear-gradient(to bottom, #cba467 5%, #f3e2ae 13%, #efbf7b 32%, #aa8050 48%, #835e35 72%, #ad8a54 93%, #d7b672 100%);
    border: 1px solid #34220d
}

.ie #oneTimeOfferNotification .gradientFrameShape:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    bottom: 4px;
    right: 4px;
    border: solid 1px #44321d
}

.ie #oneTimeOfferNotification .gradientFrameShape .content {
    position: absolute;
    top: 5px;
    left: 5px;
    bottom: 5px;
    right: 5px
}

#oneTimeOfferNotification .gradientFrameShape .gradientFrame {
    overflow: visible
}

.ie #oneTimeOfferNotification .gradientFrameShape .gradientFrame {
    display: none
}

#oneTimeOfferNotification .gradientFrameShape .gradientFrame .innerFrameShape {
    stroke-width: 2
}

#oneTimeOfferNotification .notificationPackage {
    -ms-grid-column: 1;
    grid-column-start: 1
}

#oneTimeOfferNotification .notificationPackage .content {
    background-image: linear-gradient(to bottom, #3f2b50, #68486c);
    overflow: hidden
}

#oneTimeOfferNotification .notificationPackage .content:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    width: 30%;
    height: 100%;
    z-index: 5;
    opacity: .5;
    transform: translateX(-300px) skew(-33deg, 0);
    pointer-events: none
}

#oneTimeOfferNotification .notificationPackage .content:hover {
    cursor: pointer;
    filter: brightness(1.4)
}

.ie #oneTimeOfferNotification .notificationPackage .content:hover {
    background-image: linear-gradient(to bottom, #64447e, #916597)
}

#oneTimeOfferNotification .notificationPackage .packageImage {
    height: 100%;
    width: 124px;
    position: relative;
    background-image: url('../../img_rtl/views/shop/glareSpecial.png');
    background-size: contain
}

#oneTimeOfferNotification .notificationPackage .packageImage img {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 17px;
    right: 25px
}

#oneTimeOfferNotification .notificationPackage .badge {
    position: absolute;
    bottom: 15px;
    right: 65px;
    z-index: 3;
    text-align: center;
    text-shadow: 0 1px 0 #3c140e;
    border-radius: 2px;
    background-image: linear-gradient(to bottom, #b23625, #95291b);
    border: 1px solid #6c1c13;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    padding: 5px
}

.colorBlind #oneTimeOfferNotification .notificationPackage .badge {
    text-shadow: 0 1px 0 #040932;
    background-image: linear-gradient(to bottom, #3e69b3, #0022af);
    border: 1px solid #09156e
}

#oneTimeOfferNotification .notificationPackage .badge .value {
    line-height: 1.2em;
    font-size: 14px;
    font-weight: bold
}

#oneTimeOfferNotification .notificationPackage .badge .text {
    line-height: 1.2em;
    font-size: 8px;
    text-transform: uppercase
}

#oneTimeOfferNotification .notificationPackage .costsWrapper {
    position: absolute;
    top: 20px;
    left: 20px;
    text-align: left
}

#oneTimeOfferNotification .notificationPackage .costsWrapper .amount,
#oneTimeOfferNotification .notificationPackage .costsWrapper .price {
    font-size: 18px;
    line-height: 1em;
    font-weight: bold;
    text-shadow: 1px 0 0 #190000, 1px 1px 0 #190000, 0 1px 0 #190000, -1px 1px 0 #190000, -1px 0 0 #190000, -1px -1px 0 #190000, 0 -1px 0 #190000, 1px -1px 0 #190000
}

#oneTimeOfferNotification .notificationPackage .costsWrapper .forOnly {
    padding: 3px 0 5px
}

#oneTimeOfferNotification .notificationPackage .costsWrapper .goldCoin {
    width: 24px;
    height: 24px
}

#oneTimeOfferNotification .notificationTimer {
    -ms-grid-column: 2;
    grid-column-start: 2
}

#oneTimeOfferNotification .notificationTimer .content {
    background-color: #b47b35
}

#oneTimeOfferNotification .notificationTimer .remainingTime {
    text-align: center;
    padding-top: 40px
}

#oneTimeOfferNotification .notificationTimer .remainingTime i {
    background-image: url('../../img_rtl/views/shop/hourGlass_medium.png');
    width: 18px;
    height: 24px;
    margin-bottom: 5px
}

#oneTimeOfferNotification .notificationTimer .remainingTime .timer {
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 0 0 #64441c, 1px 1px 0 #64441c, 0 1px 0 #64441c, -1px 1px 0 #64441c, -1px 0 0 #64441c, -1px -1px 0 #64441c, 0 -1px 0 #64441c, 1px -1px 0 #64441c;
    display: block
}

#oneTimeOfferNotification .closeAnnouncement {
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: -7px;
    left: -7px;
    z-index: 3
}

.colorBlind #oneTimeOfferNotification .closeAnnouncement:before {
    background-color: #0022af;
    box-shadow: none
}

.colorBlind #oneTimeOfferNotification .closeAnnouncement:hover:before {
    background-color: #3e69b3;
    box-shadow: none
}

.colorBlind #oneTimeOfferNotification .closeAnnouncement:active:before {
    background-color: #09156e;
    box-shadow: none
}

#oneTimeOfferNotification .closeAnnouncement svg {
    width: 15px;
    height: 15px
}

#finishNowDialog ul {
    list-style: none;
    padding: 0;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 10px
}

#finishNowDialog ul li.notPossibleToFinishNow {
    color: #888
}

#finishNowDialog p {
    margin: 0 0 10px
}

#finishNowDialog span.lvl {
    font-size: 13px;
    color: #f88c1f;
    font-weight: bold
}

#finishNowDialog .buttonWrapper {
    text-align: center
}

#tileDetails {
    width: 552px
}

.dialog #tileDetails {
    overflow: hidden;
    position: relative;
    color: #5e5e5e;
}

#tileDetails .detailImage {
    background-position: 0 0;
    width: 319px;
    min-height: 0;
    padding-top: 218px;
    color: #5e5e5e;
}

#tileDetails.landscape .detailImage {
    width: 552px;
    padding-top: 336px;
    color: #5e5e5e;
}

.buildingsV3 .village-1 .detailImage {
    position: relative;
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/f1.png')
}

.buildingsV3 .village-1 .detailImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center top;
    background-repeat: no-repeat
}

.buildingsV3 .village-1 .detailImage .option {
    position: relative;
    z-index: 1
}

.buildingsV3 .village-1 .detailImage.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid1.png')
}

.buildingsV3 .village-1 .detailImage.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid2.png')
}

.buildingsV3 .village-1 .detailImage.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid3.png')
}

.buildingsV3 .village-1 .detailImage.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid6.png')
}

.buildingsV3 .village-1 .detailImage.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid7.png')
}

.buildingsV3 .village-1 .detailImage.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid8.png')
}

.buildingsV3 .village-1 .detailImage.desert {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/d1.png')
}

.buildingsV3 .village-1 .detailImage.desert.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid1.png')
}

.buildingsV3 .village-1 .detailImage.desert.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid2.png')
}

.buildingsV3 .village-1 .detailImage.desert.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid3.png')
}

.buildingsV3 .village-1 .detailImage.desert.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid6.png')
}

.buildingsV3 .village-1 .detailImage.desert.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid7.png')
}

.buildingsV3 .village-1 .detailImage.desert.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid8.png')
}

.buildingsV3 .village-2 .detailImage {
    position: relative;
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/f2.png')
}

.buildingsV3 .village-2 .detailImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center top;
    background-repeat: no-repeat
}

.buildingsV3 .village-2 .detailImage .option {
    position: relative;
    z-index: 1
}

.buildingsV3 .village-2 .detailImage.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid1.png')
}

.buildingsV3 .village-2 .detailImage.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid2.png')
}

.buildingsV3 .village-2 .detailImage.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid3.png')
}

.buildingsV3 .village-2 .detailImage.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid6.png')
}

.buildingsV3 .village-2 .detailImage.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid7.png')
}

.buildingsV3 .village-2 .detailImage.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid8.png')
}

.buildingsV3 .village-2 .detailImage.desert {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/d2.png')
}

.buildingsV3 .village-2 .detailImage.desert.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid1.png')
}

.buildingsV3 .village-2 .detailImage.desert.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid2.png')
}

.buildingsV3 .village-2 .detailImage.desert.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid3.png')
}

.buildingsV3 .village-2 .detailImage.desert.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid6.png')
}

.buildingsV3 .village-2 .detailImage.desert.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid7.png')
}

.buildingsV3 .village-2 .detailImage.desert.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid8.png')
}

.buildingsV3 .village-3 .detailImage {
    position: relative;
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/f3.png')
}

.buildingsV3 .village-3 .detailImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center top;
    background-repeat: no-repeat
}

.buildingsV3 .village-3 .detailImage .option {
    position: relative;
    z-index: 1
}

.buildingsV3 .village-3 .detailImage.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid1.png')
}

.buildingsV3 .village-3 .detailImage.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid2.png')
}

.buildingsV3 .village-3 .detailImage.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid3.png')
}

.buildingsV3 .village-3 .detailImage.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid6.png')
}

.buildingsV3 .village-3 .detailImage.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid7.png')
}

.buildingsV3 .village-3 .detailImage.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid8.png')
}

.buildingsV3 .village-3 .detailImage.desert {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/d3.png')
}

.buildingsV3 .village-3 .detailImage.desert.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid1.png')
}

.buildingsV3 .village-3 .detailImage.desert.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid2.png')
}

.buildingsV3 .village-3 .detailImage.desert.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid3.png')
}

.buildingsV3 .village-3 .detailImage.desert.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid6.png')
}

.buildingsV3 .village-3 .detailImage.desert.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid7.png')
}

.buildingsV3 .village-3 .detailImage.desert.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid8.png')
}

.buildingsV3 .village-4 .detailImage {
    position: relative;
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/f4.png')
}

.buildingsV3 .village-4 .detailImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center top;
    background-repeat: no-repeat
}

.buildingsV3 .village-4 .detailImage .option {
    position: relative;
    z-index: 1
}

.buildingsV3 .village-4 .detailImage.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid1.png')
}

.buildingsV3 .village-4 .detailImage.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid2.png')
}

.buildingsV3 .village-4 .detailImage.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid3.png')
}

.buildingsV3 .village-4 .detailImage.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid6.png')
}

.buildingsV3 .village-4 .detailImage.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid7.png')
}

.buildingsV3 .village-4 .detailImage.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid8.png')
}

.buildingsV3 .village-4 .detailImage.desert {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/d4.png')
}

.buildingsV3 .village-4 .detailImage.desert.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid1.png')
}

.buildingsV3 .village-4 .detailImage.desert.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid2.png')
}

.buildingsV3 .village-4 .detailImage.desert.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid3.png')
}

.buildingsV3 .village-4 .detailImage.desert.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid6.png')
}

.buildingsV3 .village-4 .detailImage.desert.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid7.png')
}

.buildingsV3 .village-4 .detailImage.desert.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid8.png')
}

.buildingsV3 .village-5 .detailImage {
    position: relative;
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/f5.png')
}

.buildingsV3 .village-5 .detailImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center top;
    background-repeat: no-repeat
}

.buildingsV3 .village-5 .detailImage .option {
    position: relative;
    z-index: 1
}

.buildingsV3 .village-5 .detailImage.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid1.png')
}

.buildingsV3 .village-5 .detailImage.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid2.png')
}

.buildingsV3 .village-5 .detailImage.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid3.png')
}

.buildingsV3 .village-5 .detailImage.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid6.png')
}

.buildingsV3 .village-5 .detailImage.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid7.png')
}

.buildingsV3 .village-5 .detailImage.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid8.png')
}

.buildingsV3 .village-5 .detailImage.desert {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/d5.png')
}

.buildingsV3 .village-5 .detailImage.desert.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid1.png')
}

.buildingsV3 .village-5 .detailImage.desert.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid2.png')
}

.buildingsV3 .village-5 .detailImage.desert.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid3.png')
}

.buildingsV3 .village-5 .detailImage.desert.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid6.png')
}

.buildingsV3 .village-5 .detailImage.desert.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid7.png')
}

.buildingsV3 .village-5 .detailImage.desert.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid8.png')
}

.buildingsV3 .village-6 .detailImage {
    position: relative;
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/f6.png')
}

.buildingsV3 .village-6 .detailImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center top;
    background-repeat: no-repeat
}

.buildingsV3 .village-6 .detailImage .option {
    position: relative;
    z-index: 1
}

.buildingsV3 .village-6 .detailImage.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid1.png')
}

.buildingsV3 .village-6 .detailImage.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid2.png')
}

.buildingsV3 .village-6 .detailImage.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid3.png')
}

.buildingsV3 .village-6 .detailImage.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid6.png')
}

.buildingsV3 .village-6 .detailImage.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid7.png')
}

.buildingsV3 .village-6 .detailImage.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid8.png')
}

.buildingsV3 .village-6 .detailImage.desert {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/d6.png')
}

.buildingsV3 .village-6 .detailImage.desert.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid1.png')
}

.buildingsV3 .village-6 .detailImage.desert.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid2.png')
}

.buildingsV3 .village-6 .detailImage.desert.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid3.png')
}

.buildingsV3 .village-6 .detailImage.desert.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid6.png')
}

.buildingsV3 .village-6 .detailImage.desert.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid7.png')
}

.buildingsV3 .village-6 .detailImage.desert.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid8.png')
}

.buildingsV3 .village-7 .detailImage {
    position: relative;
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/f7.png')
}

.buildingsV3 .village-7 .detailImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center top;
    background-repeat: no-repeat
}

.buildingsV3 .village-7 .detailImage .option {
    position: relative;
    z-index: 1
}

.buildingsV3 .village-7 .detailImage.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid1.png')
}

.buildingsV3 .village-7 .detailImage.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid2.png')
}

.buildingsV3 .village-7 .detailImage.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid3.png')
}

.buildingsV3 .village-7 .detailImage.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid6.png')
}

.buildingsV3 .village-7 .detailImage.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid7.png')
}

.buildingsV3 .village-7 .detailImage.desert {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/d7.png')
}

.buildingsV3 .village-7 .detailImage.desert.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid1.png')
}

.buildingsV3 .village-7 .detailImage.desert.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid2.png')
}

.buildingsV3 .village-7 .detailImage.desert.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid3.png')
}

.buildingsV3 .village-7 .detailImage.desert.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid6.png')
}

.buildingsV3 .village-7 .detailImage.desert.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid7.png')
}

.buildingsV3 .village-7 .detailImage.desert.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid8.png')
}

.buildingsV3 .village-8 .detailImage {
    position: relative;
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/f8.png')
}

.buildingsV3 .village-8 .detailImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center top;
    background-repeat: no-repeat
}

.buildingsV3 .village-8 .detailImage .option {
    position: relative;
    z-index: 1
}

.buildingsV3 .village-8 .detailImage.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid1.png')
}

.buildingsV3 .village-8 .detailImage.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid2.png')
}

.buildingsV3 .village-8 .detailImage.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid3.png')
}

.buildingsV3 .village-8 .detailImage.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid6.png')
}

.buildingsV3 .village-8 .detailImage.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid7.png')
}

.buildingsV3 .village-8 .detailImage.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid8.png')
}

.buildingsV3 .village-8 .detailImage.desert {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/d8.png')
}

.buildingsV3 .village-8 .detailImage.desert.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid1.png')
}

.buildingsV3 .village-8 .detailImage.desert.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid2.png')
}

.buildingsV3 .village-8 .detailImage.desert.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid3.png')
}

.buildingsV3 .village-8 .detailImage.desert.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid6.png')
}

.buildingsV3 .village-8 .detailImage.desert.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid7.png')
}

.buildingsV3 .village-8 .detailImage.desert.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid8.png')
}

.buildingsV3 .village-9 .detailImage {
    position: relative;
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/f9.png')
}

.buildingsV3 .village-9 .detailImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center top;
    background-repeat: no-repeat
}

.buildingsV3 .village-9 .detailImage .option {
    position: relative;
    z-index: 1
}

.buildingsV3 .village-9 .detailImage.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid1.png')
}

.buildingsV3 .village-9 .detailImage.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid2.png')
}

.buildingsV3 .village-9 .detailImage.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid3.png')
}

.buildingsV3 .village-9 .detailImage.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid6.png')
}

.buildingsV3 .village-9 .detailImage.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid7.png')
}

.buildingsV3 .village-9 .detailImage.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid8.png')
}

.buildingsV3 .village-9 .detailImage.desert {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/d9.png')
}

.buildingsV3 .village-9 .detailImage.desert.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid1.png')
}

.buildingsV3 .village-9 .detailImage.desert.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid2.png')
}

.buildingsV3 .village-9 .detailImage.desert.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid3.png')
}

.buildingsV3 .village-9 .detailImage.desert.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid6.png')
}

.buildingsV3 .village-9 .detailImage.desert.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid7.png')
}

.buildingsV3 .village-9 .detailImage.desert.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid8.png')
}

.buildingsV3 .village-10 .detailImage {
    position: relative;
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/f10.png')
}

.buildingsV3 .village-10 .detailImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center top;
    background-repeat: no-repeat
}

.buildingsV3 .village-10 .detailImage .option {
    position: relative;
    z-index: 1
}

.buildingsV3 .village-10 .detailImage.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid1.png')
}

.buildingsV3 .village-10 .detailImage.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid2.png')
}

.buildingsV3 .village-10 .detailImage.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid3.png')
}

.buildingsV3 .village-10 .detailImage.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid6.png')
}

.buildingsV3 .village-10 .detailImage.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid7.png')
}

.buildingsV3 .village-10 .detailImage.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid8.png')
}

.buildingsV3 .village-10 .detailImage.desert {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/d10.png')
}

.buildingsV3 .village-10 .detailImage.desert.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid1.png')
}

.buildingsV3 .village-10 .detailImage.desert.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid2.png')
}

.buildingsV3 .village-10 .detailImage.desert.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid3.png')
}

.buildingsV3 .village-10 .detailImage.desert.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid6.png')
}

.buildingsV3 .village-10 .detailImage.desert.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid7.png')
}

.buildingsV3 .village-10 .detailImage.desert.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid8.png')
}

.buildingsV3 .village-11 .detailImage {
    position: relative;
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/f11.png')
}

.buildingsV3 .village-11 .detailImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center top;
    background-repeat: no-repeat
}

.buildingsV3 .village-11 .detailImage .option {
    position: relative;
    z-index: 1
}

.buildingsV3 .village-11 .detailImage.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid1.png')
}

.buildingsV3 .village-11 .detailImage.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid2.png')
}

.buildingsV3 .village-11 .detailImage.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid3.png')
}

.buildingsV3 .village-11 .detailImage.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid6.png')
}

.buildingsV3 .village-11 .detailImage.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid7.png')
}

.buildingsV3 .village-11 .detailImage.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid8.png')
}

.buildingsV3 .village-11 .detailImage.desert {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/d11.png')
}

.buildingsV3 .village-11 .detailImage.desert.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid1.png')
}

.buildingsV3 .village-11 .detailImage.desert.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid2.png')
}

.buildingsV3 .village-11 .detailImage.desert.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid3.png')
}

.buildingsV3 .village-11 .detailImage.desert.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid6.png')
}

.buildingsV3 .village-11 .detailImage.desert.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid7.png')
}

.buildingsV3 .village-11 .detailImage.desert.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid8.png')
}

.buildingsV3 .village-12 .detailImage {
    position: relative;
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/f12.png')
}

.buildingsV3 .village-12 .detailImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center top;
    background-repeat: no-repeat
}

.buildingsV3 .village-12 .detailImage .option {
    position: relative;
    z-index: 1
}

.buildingsV3 .village-12 .detailImage.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid1.png')
}

.buildingsV3 .village-12 .detailImage.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid2.png')
}

.buildingsV3 .village-12 .detailImage.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid3.png')
}

.buildingsV3 .village-12 .detailImage.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid6.png')
}

.buildingsV3 .village-12 .detailImage.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid7.png')
}

.buildingsV3 .village-12 .detailImage.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid8.png')
}

.buildingsV3 .village-12 .detailImage.desert {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/d12.png')
}

.buildingsV3 .village-12 .detailImage.desert.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid1.png')
}

.buildingsV3 .village-12 .detailImage.desert.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid2.png')
}

.buildingsV3 .village-12 .detailImage.desert.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid3.png')
}

.buildingsV3 .village-12 .detailImage.desert.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid6.png')
}

.buildingsV3 .village-12 .detailImage.desert.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid7.png')
}

.buildingsV3 .village-12 .detailImage.desert.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid8.png')
}

.buildingsV3 .village-13 .detailImage {
    position: relative;
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/f13.png')
}

.buildingsV3 .village-13 .detailImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-position: center top;
    background-repeat: no-repeat
}

.buildingsV3 .village-13 .detailImage .option {
    position: relative;
    z-index: 1
}

.buildingsV3 .village-13 .detailImage.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid1.png')
}

.buildingsV3 .village-13 .detailImage.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid2.png')
}

.buildingsV3 .village-13 .detailImage.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid3.png')
}

.buildingsV3 .village-13 .detailImage.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid6.png')
}

.buildingsV3 .village-13 .detailImage.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid7.png')
}

.buildingsV3 .village-13 .detailImage.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/fc-vid8.png')
}

.buildingsV3 .village-13 .detailImage.desert {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/d12.png')
}

.buildingsV3 .village-13 .detailImage.desert.vid1:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid1.png')
}

.buildingsV3 .village-13 .detailImage.desert.vid2:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid2.png')
}

.buildingsV3 .village-12 .detailImage.desert.vid3:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid3.png')
}

.buildingsV3 .village-13 .detailImage.desert.vid6:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid6.png')
}

.buildingsV3 .village-13 .detailImage.desert.vid7:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid7.png')
}

.buildingsV3 .village-13 .detailImage.desert.vid8:after {
    background-image: url('../../img_rtl/layout/background2019/resourceFields/detail/village/tribeSpecificCenter/dc-vid8.png')
}

#tileDetails.oasis-2 .detailImage,
#tileDetails.oasis-4 .detailImage {
    background-image: url('../../img_rtl/g/detail/oasis/wood.jpg')
}

#tileDetails.oasis-3 .detailImage {
    background-image: url('../../img_rtl/g/detail/oasis/woodCrop.jpg')
}

#tileDetails.oasis-6 .detailImage,
#tileDetails.oasis-8 .detailImage {
    background-image: url('../../img_rtl/g/detail/oasis/clay.jpg')
}

#tileDetails.oasis-7 .detailImage {
    background-image: url('../../img_rtl/g/detail/oasis/clayCrop.jpg')
}

#tileDetails.oasis-10 .detailImage,
#tileDetails.oasis-12 .detailImage {
    background-image: url('../../img_rtl/g/detail/oasis/iron.jpg')
}

#tileDetails.oasis-11 .detailImage {
    background-image: url('../../img_rtl/g/detail/oasis/ironCrop.jpg')
}

#tileDetails.oasis-14 .detailImage {
    background-image: url('../../img_rtl/g/detail/oasis/crop.jpg')
}

#tileDetails.oasis-15 .detailImage {
    background-image: url('../../img_rtl/g/detail/oasis/cropCrop.jpg')
}

#tileDetails.landscape-village-normal .detailImage {
    background-image: url('../../img_rtl/g/detail.popup/landscape/villagePlayer.jpg')
}

#tileDetails.landscape-village-natars .detailImage {
    background-image: url('../../img_rtl/g/detail.popup/landscape/villageNatar.jpg')
}

#tileDetails.landscape-grassland .detailImage {
    background-image: url('../../img_rtl/g/detail.popup/landscape/grassland.jpg')
}

#tileDetails.landscape-clay .detailImage {
    background-image: url('../../img_rtl/g/detail/landscape/clay.jpg')
}

#tileDetails.landscape-forest .detailImage {
    background-image: url('../../img_rtl/g/detail/landscape/forest.jpg')
}

#tileDetails.landscape-hill .detailImage {
    background-image: url('../../img_rtl/g/detail/landscape/hill.jpg')
}

#tileDetails.landscape-lake .detailImage {
    background-image: url('../../img_rtl/g/detail/landscape/lake.jpg')
}

#tileDetails.landscape-vulcano .detailImage {
    background-image: url('../../img_rtl/g/detail/landscape/vulcano.jpg')
}

#tileDetails.landscape-desert_w .detailImage,
#tileDetails.landscape-desert .detailImage {
    background-image: url('../../img_rtl/g/detail/landscape/desert.jpg')
}

#tileDetails.landscape-sea .detailImage {
    background-image: url('../../img_rtl/g/detail/landscape/sea.jpg')
}

.adventureTimers {
    padding-top: 10px;
    padding-bottom: 10px
}

.adventureTimers table {
    background: 0;
    margin-top: 5px;
    margin-bottom: 5px
}

.adventureTimers table td {
    padding-top: 0;
    padding-bottom: 0
}

.adventureTimers .adventureArrival {
    width: 100%
}

.adventureTimers .adventureReturn {
    width: 100%
}

.adventureTimers .adventureText {
    width: 30%;
    vertical-align: top
}

.adventureTimers .adventureDuration {
    width: 15%;
    vertical-align: top
}

.adventureTimers .adventureTimeAt {
    width: 54%;
    vertical-align: top
}

.adventureInfo {
    margin-top: 18px;
    margin-bottom: 18px
}

.adventureSend {
    width: 100%;
    position: relative;
    text-align: center
}

.adventureBackButton {
    position: absolute;
    left: 0;
    top: 5px
}

#tileDetails th,
#tileDetails td {
    padding-right: 0;
    padding-left: 0
}

#dialogContent #tileDetails h1 {
    font-size: 14px;
    margin-bottom: 8px
}

#tileDetails h4 {
    font-size: 14px;
    margin-bottom: 5px
}

#tileDetails h1 span.mainVillage,
.positionDetails h1 span.mainVillage {
    font-size: 12px;
    font-weight: normal;
    margin-right: 3px
}

.dialog #tileDetails h1 span.mainVillage {
    color: silver
}

#tileDetails .detailImage {
    float: right;
    margin-left: 16px
}

#tileDetails .detailImage .options {
    margin-top: 16px
}

#tileDetails .detailImage .option {
    margin-top: 2px;
    padding-right: 10px;
    padding-top: 4px;
    white-space: normal
}

#tileDetails .detailImage .option .option,
#tileDetails .detailImage .option .a.arrow .farmListDetails,
#tileDetails .detailImage .a.arrow .option .farmListDetails,
#tileDetails .detailImage .option table#village_info .player,
#tileDetails table#village_info .detailImage .option .player,
#tileDetails .detailImage .option table#village_info .alliance,
#tileDetails table#village_info .detailImage .option .alliance {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    direction: rtl
}

#tileDetails .detailImage .a.arrow {
    display: inline-block;
    font-size: 14px;
    width: 100%;
    white-space: normal
}

#tileDetails .detailImage .a.arrow .farmListDetails {
    width: 100%
}

#tileDetails .detailImage .a.arrow .farmListDetails .option,
#tileDetails .detailImage .a.arrow .farmListDetails .farmListDetails,
#tileDetails .detailImage .a.arrow .farmListDetails table#village_info .player,
#tileDetails table#village_info .detailImage .a.arrow .farmListDetails .player,
#tileDetails .detailImage .a.arrow .farmListDetails table#village_info .alliance,
#tileDetails table#village_info .detailImage .a.arrow .farmListDetails .alliance {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    direction: rtl
}

#tileDetails div#map_details {
    float: left;
    width: 217px
}

#tileDetails table#village_info,
#tileDetails table#distribution,
#tileDetails table#troop_info,
#tileDetails table#surrounding_info {
    margin-bottom: 20px
}

#tileDetails table tr.first th,
#tileDetails table tr.first td {
    padding-top: 0
}

#tileDetails table#village_info tbody th {
    width: 35%
}

#tileDetails table#village_info tbody td {
    font-weight: bold
}

#tileDetails table#village_info tbody th,
#tileDetails table#village_info tbody td {
    padding-top: 3px;
    color: black;
}

#tileDetails table#village_info tbody tr.first th,
#tileDetails table#village_info tbody tr.first td {
    padding-top: 0
}

#tileDetails table#village_info .player,
#tileDetails table#village_info .alliance {
    max-width: 1px
}

#tileDetails table#village_info .player .detailImage .option,
#tileDetails .detailImage table#village_info .player .option,
#tileDetails table#village_info .player .detailImage .a.arrow .farmListDetails,
#tileDetails .detailImage .a.arrow table#village_info .player .farmListDetails,
#tileDetails table#village_info .player .player,
#tileDetails table#village_info .player .alliance,
#tileDetails table#village_info .alliance .detailImage .option,
#tileDetails .detailImage table#village_info .alliance .option,
#tileDetails table#village_info .alliance .detailImage .a.arrow .farmListDetails,
#tileDetails .detailImage .a.arrow table#village_info .alliance .farmListDetails,
#tileDetails table#village_info .alliance .player,
#tileDetails table#village_info .alliance .alliance {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    direction: rtl
}

#tileDetails table#troop_info .ico {
    width: 10%
}

#tileDetails table#troop_info .val {
    width: 10%;
    text-align: left;
    padding-left: 5px
}

#tileDetails table#troop_info .val {
    font-weight: bold
}

#tileDetails table#troop_info ul {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 2px;
    padding-right: 12px
}

#tileDetails table#troop_info.rep tbody {
    line-height: 16px
}

#tileDetails table#troop_info.rep img {
    float: right;
    margin-left: 5px
}

#tileDetails table#troop_info.rep img.carry {
    float: left;
    margin-left: 55px
}

#tileDetails table#distribution {
    width: 100%
}

#tileDetails table#distribution .ico {
    width: 10%
}

#tileDetails table#distribution .val {
    width: 19%;
    text-align: left;
    padding-left: 5px
}

#tileDetails table#distribution .val {
    font-weight: bold
}

#heroInVillageInfo .duration {
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto
}

#heroInVillageInfo .duration i,
#heroInVillageInfo .duration svg {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row: 1;
    grid-row-start: 1;
    margin-left: 5px;
    -ms-grid-row-align: center;
    align-self: center
}

#heroInVillageInfo .duration span {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-align: center;
    align-self: center;
    display: inline-block
}

.headerAdventures {
    line-height: 20px;
    height: 25px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-weight: bold
}

div.durationCalculationsContainer img.openedClosedSwitch {
    width: 18px;
    height: 18px;
    float: right;
    padding: 0;
    margin-left: 5px
}

.hero_adventure .adventureStatusMessage,
.hero_adventure .durationCalculationsContainer {
    background-color: #e7e7e7;
    border-radius: 5px
}

.adventureStatusMessage {
    padding: 5px 10px;
    margin-bottom: 10px
}

.adventureStatusMessage .subMessage,
.attribute .subMessage {
    padding-right: 20px;
    font-style: italic
}

.durationCalculationsContainer {
    padding: 5px
}

#chooseOtherVillageLink {
    color: #333
}

.durationCalculations {
    margin: 10px 30px 0 30px
}

.durationCalculationsContainer .close {
    margin-top: -4px
}

#infoMoveHero {
    padding: 10px 5px 0 5px;
    text-align: justify
}

.durationCalculations select {
    min-width: 150px
}

.slower {
    color: #fc9511
}

.faster {
    color: #498843
}

#adventureListForm a.disabled {
    color: #d2d2d2;
    cursor: default
}

div#rallyPointNeeded {
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px
}

#heroInVillageInfo {
    padding: 5px;
    padding-top: 10px
}

#heroInVillageInfo .moveHeroLink {
    float: left
}

div#build.exchangeResources {
    width: 500px;
    max-width: 100%
}

div#build.exchangeResources p#submitText,
div#build.exchangeResources p#submitButton {
    margin-top: 5px;
    text-align: left
}

div#build.exchangeResources p#submitButton {
    display: none
}

div#build.exchangeResources span.corr {
    color: #ff4000
}

div#build.exchangeResources p.npc_desc {
    font-size: 14px;
    margin-top: -2px
}

div#build.exchangeResources table#npc {
    line-height: 25px;
    margin-bottom: 4px
}

div#build.exchangeResources table#npc th,
div#build.exchangeResources table#npc td {
    padding: 2px 7px;
    text-align: center
}

div#build.exchangeResources table#npc thead td {
    background-color: #e7e7e7
}

div#build.exchangeResources table#npc thead td i {
    vertical-align: middle
}

div#build.exchangeResources table#npc thead td a+span {
    vertical-align: middle
}

div#build.exchangeResources table#npc td {
    text-align: center
}

div#build.exchangeResources table#npc td.deco {
    padding: 0;
    width: 1px
}

div#build.exchangeResources table#npc td.sel input.text {
    width: 90%
}

div#build.exchangeResources table#npc td.all {
    width: 18%
}

div#build.exchangeResources table#npc td.sum {
    text-align: right;
    padding-right: 20px
}

.he-IL div#build.exchangeResources table#npc .rem,
.he-IL div#build.exchangeResources table#npc #remain {
    direction: ltr;
    unicode-bidi: embed
}

#build.gid17 .whereAreMyMerchants {
    line-height: 20px;
    float: right;
    width: 48%
}

#build.gid17 .npcMerchant {
    float: left;
    width: 48%
}

#build.gid17 .npcMerchant button {
    margin-top: 3px
}

table#send_select hr {
    margin: 0
}

div#build.gid17 div.carry {
    padding-bottom: 15px
}

.merchantCapacityVisualization {
    float: right
}

.merchantCapacity {
    float: left
}

.invisibleButton {
    display: none
}

div#build.gid17 form#marketSend div#button {
    height: 35px
}

div#build.gid17 #merchantsOnTheWay div.filtered {
    display: none
}

div#build.gid17 #merchantsOnTheWay div.filter {
    text-align: left
}

div#build.gid17 #merchantsOnTheWay div.filter .filterContainer {
    background-color: #e7e7e7;
    border-radius: 5px;
    padding: 3px 5px;
    display: inline-block
}

div#build.gid17 #merchantsOnTheWay div.filter img.filterCategory {
    background-image: url('../../img_rtl/a/gid16Filter.png');
    width: 16px;
    height: 16px
}

div#build.gid17 #merchantsOnTheWay div.filter img.filterCategory.filterCategory1 {
    background-position: 0 0
}

div#build.gid17 #merchantsOnTheWay div.filter img.filterCategory.filterCategory2 {
    background-position: 0 -16px
}

#button button.goBack {
    float: right
}

#button button.sendRessources,
#button button.prepare {
    float: left
}

div#build.gid17 span.pleaseConfirm {
    color: #a2a2a2;
    font-weight: normal;
    padding-right: 0
}

#notEnoughMerchantsError {
    padding-bottom: 10px
}

#prepareError {
    padding-right: 3px;
    float: right;
    width: 385px;
    position: relative
}

a.notClickable {
    cursor: default;
    color: #d2d2d2
}

div.options td.sel {
    width: 3%;
    text-align: center;
    padding-left: 0;
    padding-right: 15px
}

div.options table.set input.radio {
    position: relative
}

div.options table#links td.nr input.text {
    width: 20px
}

div.options table#links td.nam input.text {
    width: 175px
}

div.options table#links td.link input.text {
    width: 240px
}

div.options table.timeSettings tbody th,
div.options table#languageSettings tbody th {
    width: 20%
}

div.options table.timeSettings tbody th.timeFormat {
    vertical-align: top;
    padding-top: 11px
}

div.options table#entriesPerPage input.messageReport,
div.options table#entriesPerPage input.troopMovementsPerPage {
    width: 25px
}

div.options table.timeSettings select,
div.options table#languageSettings select {
    width: 185px
}

div.options table#advertisement tbody th {
    width: 25%
}

div.options table#advertisement span.note {
    margin-right: 10px;
    font-size: 11px
}

div.options .timeSettings label,
div.options #advertisement label {
    margin: 6px 0;
    display: block
}

div.options .timeSettings label input,
div.options #advertisement label input {
    vertical-align: text-top
}

div.options div.text {
    padding: 6px 9px 3px
}

div.options table.account tbody th {
    width: 20%;
    white-space: nowrap
}

div.options table#change_pass input.text,
div.options table#change_account_name input.text {
    width: 150px
}

div.options table#change_account_name tbody td {
    width: 40%
}

div.options table#change_mail tbody th {
    width: 20%;
    white-space: nowrap
}

div.options table#change_mail th.process {
    color: #d40000
}

.colorBlind div.options table#change_mail th.process {
    color: #0022af
}

div.options div.text p.maxSitters {
    font-size: 13px;
    margin-top: 0
}

div.options .sitters th {
    text-align: center;
    white-space: nowrap;
    color: #f2f2f2;
    padding: 0 6px;
    width: 5%
}

div.options .sitters th div {
    padding: 8px 25px;
    border-radius: 5px
}

div.options .sitters th div.lightGreen {
    background-color: #99c019
}

div.options .sitters th div.orange {
    background-color: #f78c1f
}

div.options table.sitters2 {
    margin-top: 5px
}

div.options table.sitters2 td {
    text-align: center
}

div.options tr.sitterHead td {
    padding: 2px 4px
}

div.options table.sitters2 td.name {
    white-space: nowrap;
    width: 20%
}

div.options table#sharedUsage th {
    width: 20%;
    white-space: nowrap
}

div.options table#del_acc td.del_selection {
    text-align: right
}

div.options table#del_acc td.del_selection label {
    margin-left: 20px
}

div.options div.submitButtonContainer {
    text-align: center;
    margin-top: 15px
}

div.options table#del_acc td.count {
    font-weight: bold
}

div.options table#del_acc td.count span {
    color: #ff8000
}

div.options table#del_acc input.radio {
    position: relative
}

div.options table#gpack td {
    text-align: right;
    height: 24px
}

div.options table#gpack td span.alert {
    color: red;
    font-weight: bold
}

div.options table#gpack td input.radio {
    position: relative;
    margin-right: 2px;
    margin-left: 2px
}

div.options table#gpack td input.text {
    margin-right: 15px;
    width: 220px
}

div.options table#gpack td div.example {
    margin-right: 22px;
    font-size: 12px
}

div.options table#gpack td div.example span.path {
    color: #ff8000
}

div.options table#download thead td {
    white-space: nowrap
}

table#seasonal_winter_snow_settings.disabled {
    color: silver
}

div.options table#gpack td.info {
    text-align: center;
    font-size: 12px
}

div.options table#download td.nam {
    text-align: right
}

div.options table#download td.size {
    width: 22%
}

div.options table#download td.act {
    width: 22%
}

div.options table#download td.down {
    width: 22%
}

div.options table#other td.noOptions {
    font-style: italic;
    color: #858585
}

div.options span.pleaseSaveYourChanges {
    float: left;
    color: #f88c1f
}

div.options span.pleaseSaveYourChanges.hidden {
    display: none
}

div.options div.vacationMode {
    text-align: center;
    padding: 10px
}

div.options div.vacationMode .daySetter {
    margin: 10px 0 10px 0
}

div.options div.vacationMode .daySetter a {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle
}

div.options div.vacationMode .daySetter.sub a {
    background-image: url('../../img_rtl/a/btnMinus-small.png')
}

div.options div.vacationMode .daySetter.add a {
    background-image: url('../../img_rtl/a/btnPlus-small.png')
}

div.options .conditionsWrapper {
    background-color: #e7e7e7;
    border-radius: 5px
}

div.options .conditionsWrapper .switchWrap {
    padding: 10px
}

div.options .conditionsWrapper ul {
    margin-bottom: 0;
    padding-bottom: 13px
}

div.options #vacationTimeWrapper {
    display: none
}

div.linklist div.recommendedLinks {
    background-color: #e7e7e7;
    border-radius: 5px
}

div.linklist div.recommendedLinks .switchWrap {
    padding: 10px
}

div.linklist div#linkRecommendations {
    padding: 0 10px 10px 10px
}

div.linklist div#hiddenRecommendedLinks {
    display: none
}

div.linklist td.sel {
    width: 3%;
    text-align: center;
    padding-left: 0;
    padding-right: 15px
}

div.linklist table#links thead td {
    font-weight: bold
}

div.linklist table#links td.nr input.text,
div.linklist table#recommendedLinks td.nr input.text {
    width: 25px
}

div.linklist table#links td.nam input.text,
div.linklist table#recommendedLinks td.nam input.text {
    width: 175px
}

div.linklist table#links td.link input.text,
div.linklist table#recommendedLinks td.link input.text {
    width: 240px
}

div.linklist table#links button,
div.linklist table#recommendedLinks button {
    width: 18px;
    height: 18px
}

div.linklist table#links button.addElement,
div.linklist table#recommendedLinks button.addElement {
    background-image: url('../../img_rtl/a/btnPlus-small.png')
}

div.linklist table#links button.removeElement {
    background-image: url('../../img_rtl/a/btnMinus-small.png')
}

div.linklist table#links button:hover,
div.linklist table#recommendedLinks button:hover {
    background-position: 0 -28px
}

div.linklist table#links button:active,
div.linklist table#recommendedLinks button:active {
    background-position: 0 -56px
}

div.linklist div.submitButtonContainer {
    text-align: left;
    margin-top: 15px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent .duration,
.dialogV1.dialogWrapper .manual.dialog #dialogContent .clocks {
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent .duration i,
.dialogV1.dialogWrapper .manual.dialog #dialogContent .clocks i,
.dialogV1.dialogWrapper .manual.dialog #dialogContent .duration svg,
.dialogV1.dialogWrapper .manual.dialog #dialogContent .clocks svg {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row: 1;
    grid-row-start: 1;
    margin-left: 5px;
    -ms-grid-row-align: center;
    align-self: center
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent .duration span,
.dialogV1.dialogWrapper .manual.dialog #dialogContent .clocks span {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-align: center;
    align-self: center;
    display: inline-block
}

.dialogV1.dialogWrapper .manual.dialog {
    font-size: 14px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent {
    width: 475px;
    min-height: 525px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent table {
    background-color: transparent;
    border: 0;
    color: #333;
    vertical-align: top
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent table tr {
    background-color: transparent;
    border: 0;
    color: #333;
    vertical-align: top
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent table td {
    background-color: transparent;
    border: 0;
    color: #333;
    vertical-align: top
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent table th {
    background-color: transparent;
    border: 0;
    color: #333;
    vertical-align: top
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent a.manualBack {
    font-weight: normal
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent h1 {
    color: #333;
    font-size: 14px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent h1 img {
    margin-left: 5px;
    vertical-align: middle
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent h3 {
    color: #333;
    margin: 10px 0 5px 0
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent #buildings {
    width: 474px;
    float: right;
    margin-top: 30px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent #buildings H3 {
    margin: 0 0 10px 0
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent #buildings H3 img {
    vertical-align: middle
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent #troops {
    width: 474px;
    float: right
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent #troops H3 {
    margin: 0 0 10px 0
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent #troops H3 img {
    vertical-align: middle
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent .troopInfoWrapper,
.dialogV1.dialogWrapper .manual.dialog #dialogContent .troopDataWrapper {
    float: right;
    margin-top: 6px;
    background-color: #e7e7e7;
    border-radius: 5px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent p {
    margin-top: 0
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent ul {
    margin: 0;
    padding: 0;
    padding-right: 12px;
    float: right
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent ul li {
    list-style-type: none;
    line-height: 23px;
    width: 221px;
    float: right;
    margin-left: 10px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent ul li img {
    vertical-align: middle
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent ul li a {
    margin-right: 13px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent p.description {
    float: right;
    width: 278px;
    min-height: 130px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent img.building {
    float: left;
    margin-top: -50px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent p.costsHeader {
    clear: both;
    margin-bottom: 5px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent .duration {
    margin-top: 5px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent div.bigUnitSection {
    float: left;
    margin-top: 6px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent div.bigUnitSection img {
    height: 205px;
    background-repeat: no-repeat;
    background-position: 0 center
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent table#troop_info {
    float: right;
    margin: 10px 25px 10px 7px;
    width: 288px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent table#troop_info td {
    width: 25%;
    text-align: right;
    padding-left: 3px;
    padding-right: 0;
    white-space: nowrap
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent table#troop_info td img {
    width: 18px;
    margin-left: 5px;
    vertical-align: middle
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent table#troop_details {
    width: 60%;
    background-color: #fff
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent table.troopData {
    float: right;
    margin: 10px 25px 10px 7px;
    width: 288px
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent table.troopData th {
    width: 50%;
    text-align: right;
    padding-left: 18px;
    padding-right: 0
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent table.troopData td {
    width: 50%;
    text-align: right;
    padding-left: 18px;
    padding-right: 0
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent table.troopData td img {
    width: 18px;
    margin-left: 5px;
    vertical-align: middle
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent div#t_desc {
    margin: 15px 0;
    float: right;
    width: 100%;
    clear: both
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent img#big_unit {
    float: left;
    width: 150px;
    height: 120px;
    margin: -30px 2px 0 0
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent div#prereqs {
    margin-top: 25px;
    width: 100%;
    line-height: 20px;
    clear: both
}

.dialogV1.dialogWrapper .manual.dialog #dialogContent .answers {
    margin-top: 15px
}

div.balanceCropBalancePart,
div.productionPerHourTotal,
div.productionPerHour {
    width: 304px;
    float: right
}

div.cropBalanceContainer,
div.productionContainer {
    position: relative;
    float: right;
    width: 100%
}

div.productionContainer h4 {
    margin-bottom: 10px
}

div.total.productionContainer {
    margin-top: 20px;
    clear: all
}

div.productionBoostSpeechBubble,
div.fluidSpeechBubble {
    float: left;
    width: 230px;
    margin-top: 2px
}

div.cropBalanceContainer div.productionBoostSpeechBubble {
    position: relative;
    height: 160px
}

div.fluidSpeechBubble {
    min-height: 55px
}

div.productionBoostSpeechBubble .speechArrowBack {
    bottom: auto;
    top: 26px
}

div.productionBoostSpeechBubble h5 {
    margin-bottom: 3px
}

div.productionBoostSpeechBubble td {
    padding: 3px 5px
}

div.productionContainer .productionBoostResourceSpeechBubble,
div.cropBalanceContainer .productionBoostResourceSpeechBubble {
    position: absolute;
    bottom: 0;
    left: 0
}

div.productionBoostResourceSpeechBubble .speechArrowBack {
    top: auto;
    bottom: 23px
}

div.cropBalanceContainer div.productionBoostResourceSpeechBubble .speechArrowBack {
    bottom: 10px
}

div.productionBoostResourceSpeechBubble .productionBoostSpeechBubbleFurtherInfo {
    font-style: italic;
    font-size: 12px
}

div.productionBoostResourceSpeechBubble p {
    margin: 5px
}

div.cropBalanceContainer .balanceCropBalancePart .subtotal td,
div.productionContainer .productionPerHourTotal .subtotal td {
    border-bottom: 1px solid black
}

div.cropBalanceContainer .balanceCropBalancePart .total td,
div.productionContainer .productionPerHourTotal .total td {
    white-space: nowrap;
    border-bottom: 3px double black
}

div.productionContainer .productionPerHour table,
div.productionContainer .productionPerHour tr,
div.productionContainer .productionPerHour td {
    border-collapse: collapse;
    border: 1px solid silver
}

div.productionPerHour table thead td {
    text-align: right;
    padding: 6px 9px 3px
}

div.productionPerHourTotal .row_table_data tr {
    line-height: 13px
}

div.productionPerHour table .productionSum td {
    font-weight: bold
}

div.cropBalanceContainer table .numberCell,
div.productionContainer table .numberCell {
    text-align: left;
    vertical-align: bottom;
    width: 5%;
    white-space: nowrap
}

div.productionContainer .productionBoostSpeechBubble .numberCell {
    white-space: nowrap
}

div.cropBalanceContainer .balanceCropBalancePart {
    margin-bottom: 10px
}

div.cropBalanceContainer .balanceTroops {
    background-color: #e7e7e7;
    border-radius: 5px
}

div.cropBalanceContainer .balanceTroops table,
div.cropBalanceContainer .balanceTroops tr,
div.cropBalanceContainer .balanceTroops td {
    border-collapse: collapse;
    background-color: #e4e4e4;
    padding: 4px 0 3px
}

div.cropBalanceContainer .balanceTroops .troopLabel {
    padding-right: 32px
}

div.cropBalanceContainer .emptyStorageSpeechBubble {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 205px
}

div.cropBalanceContainer .emptyStorageSpeechBubble p {
    margin: 2px
}

div.cropBalanceContainer .emptyStorageSpeechBubble .fluidSpeechBubble .speechArrowBack {
    top: auto;
    bottom: 12px
}

.questWrapper {
    font-size: 13px;
    width: 566px;
    padding-top: 10px;
    min-height: 375px
}

.questWrapper.achievements {
    width: 566px;
    display: block;
    padding-top: 0
}

div.dialog div.content hr.achievementLine {
    border-style: none none solid;
    border-color: #ddd9ce;
    margin-bottom: 10px;
    margin-top: 10px
}

.questWrapper .questImage {
    float: left;
    width: 130px;
    margin-right: 10px;
    margin-bottom: 10px
}

.questWrapper .questImage img {
    margin-bottom: 10px;
    width: 130px;
    height: 130px
}

.questWrapper .questImage .tipsWrapper {
    position: relative
}

.questWrapper .questImage .tipsWrapper .questTipsToggleDescription {
    position: absolute;
    top: 9px;
    right: 45px
}

.questWrapper .questText {
    float: right;
    width: 400px;
    margin-bottom: -10px
}

.questWrapper .questDescription,
.questWrapper .questTasks,
.questWrapper .questRewards {
    margin: 15px 10px 25px 0
}

.questWrapper.achievements .questDescription,
.questWrapper.achievements .questTasks,
.questWrapper.achievements .questRewards,
.questWrapper.achievements .questTextHighlight,
.questWrapper.achievements .questAchievementPoints,
.questWrapper.achievements .questDifficulty {
    margin: 0 10px 10px 0
}

.questWrapper.achievements .questImage .DailyQuestsReward_01 {
    background-image: url('../../img_rtl/quests/achievement/reward25.png')
}

.questWrapper.achievements .questImage .DailyQuestsReward_02 {
    background-image: url('../../img_rtl/quests/achievement/reward50.png')
}

.questWrapper.achievements .questImage .DailyQuestsReward_03 {
    background-image: url('../../img_rtl/quests/achievement/reward75.png')
}

.questWrapper.achievements .questImage .DailyQuestsReward_04 {
    background-image: url('../../img_rtl/quests/achievement/reward100.png')
}

.questWrapper .questTasks ul#questTodolist {
    padding: 0;
    list-style: none;
    margin: 0
}

.questWrapper .questTasks ul#questTodolist li {
    margin-bottom: 5px;
    padding-right: 15px;
    position: relative
}

.questWrapper .questTasks ul#questTodolist li img {
    position: absolute;
    width: 4px;
    height: 4px;
    right: 4px;
    top: 6px;
    background-image: url('../../img_rtl/activate/dot.png')
}

.questWrapper .questTasks ul#questTodolist li.finished,
.questWrapper .questTasks ul#questTodolist li.reward {
    color: #777
}

.questWrapper .questTasks ul#questTodolist li.finished img,
.questWrapper .questTasks ul#questTodolist li.reward img {
    right: 0;
    top: 0;
    width: 12px;
    height: 12px;
    background-image: url('../../img_rtl/a/check.png')
}

.questWrapper h4 {
    margin-bottom: 0
}

.questWrapper .questRewards {
    margin-top: 10px
}

.questWrapper .questRewards ul.questRewardsList {
    width: 470px
}

.questWrapper .questRewards ul.questRewardsList li {
    float: right;
    margin-left: 20px
}

.questWrapper .questRewards img {
    width: 16px;
    height: 16px
}

.questWrapper .questRewards img.questRewardTypeGold {
    background: url('../../img_rtl/round/button/content/goldInner-rtl.png');
    width: 14px;
    height: 14px
}

.questWrapper .questRewards img.questRewardTypeSilver {
    background: url('../../img_rtl/a/silver-rtl.gif');
    width: 10px;
    height: 10px
}

.questWrapper .questRewards img.questRewardTypeItem {
    background: url('../../img_rtl/hero/item.gif')
}

.questWrapper .questRewards img.questRewardTypeItem.item112 {
    background-position: 0 224px
}

.questWrapper .questRewards img.questRewardTypeItem.item106 {
    background-position: 0 120px
}

.questWrapper .questRewards img.questRewardTypeItem.item114 {
    background-position: 0 172px
}

.questWrapper .questRewards .resourceWrapper .resources {
    margin-left: 10px
}

.questWrapper .questRewards span.questRewardValue.stockFull {
    color: #d40000
}

.colorBlind .questWrapper .questRewards span.questRewardValue.stockFull {
    color: #0022af
}

.questWrapper .questButtons {
    position: relative;
    margin-top: 10px;
    height: 25px
}

.questWrapper .questButtons button {
    position: absolute
}

.questWrapper button.questButtonClose {
    left: 0
}

.questWrapper button.questButtonOverview {
    left: 0
}

.questWrapper button.questButtonGainReward {
    left: 0
}

.questWrapper .questTodoList {
    padding: 0
}

.questWrapper .questTodoList li {
    list-style: none
}

.questWrapper .questTodoList .questCategoryHeadline {
    background: lime;
    font-weight: bold
}

.questWrapper .questTodoList .questCategoryHeadline .questCategoryName {
    float: right
}

.questWrapper .questTodoList .questCategoryHeadline .questCategoryStats {
    float: left
}

.questWrapper .questTodoList .questName {
    margin-right: 20px
}

.questWrapper .categoryProgress {
    float: left
}

#questTodoListDialog ul li.questName img.reward {
    background-image: url('../../img_rtl/a/check.png');
    width: 12px;
    height: 12px
}

#questTodoListDialog ul {
    list-style: none
}

div.dialog div.content h1.questList {
    color: #7b624c;
    text-align: center
}

div.dialog div.questWrapper div.achievement div.nextReset {
    color: #7b624c;
    text-align: center;
    margin-bottom: 3px;
    font-size: 11px
}

div.dialog div.content div.birthdayRibbonContainer div.headline {
    color: #911d1d;
    font-family: IRANSans;
    text-shadow: 1px 0 1px rgba(251, 236, 201, 0.4), 1px 1px 1px rgba(251, 236, 201, 0.4), 0 1px 1px rgba(251, 236, 201, 0.4), -1px 1px 1px rgba(251, 236, 201, 0.4), -1px 0 1px rgba(251, 236, 201, 0.4), -1px -1px 1px rgba(251, 236, 201, 0.4), 0 -1px 1px rgba(251, 236, 201, 0.4), 1px -1px 1px rgba(251, 236, 201, 0.4);
    font-size: 23px;
    line-height: 3em;
    letter-spacing: .2em;
    display: none
}

div.dialog div.content div.pointsAndAchievements {
    margin-top: 40px
}

div.dialog div.content div.achievementPoints {
    background-image: url('../../img_rtl/quests/achievement/kranz.png');
    height: 109px;
    padding: 1px;
    text-align: center;
    width: 122px;
    float: right
}

div.dialog div.content div.achievementPoints div.points {
    font-size: 26px;
    margin-top: 42px;
    padding-left: 5px
}

div.dialog div.content div.achievementPoints div.pointstext {
    font-size: 15px;
    padding-left: 5px;
    padding-top: 16px
}

div.dialog div.content #achievementRewardList div.achievement {
    float: right;
    position: relative
}

div.dialog div.content #achievementRewardList div.achievement div.hook img {
    width: 30px;
    height: 30px;
    background-image: url('../../img_rtl/quests/achievement/haken_gruen.png');
    position: absolute
}

div.dialog div.content #achievementRewardList div.achievement div.hook.points_25 img {
    left: 57px;
    top: -2px
}

div.dialog div.content #achievementRewardList div.achievement div.hook.points_50 img {
    left: 49px;
    top: -2px
}

div.dialog div.content #achievementRewardList div.achievement div.hook.points_75 img {
    left: 45px;
    top: -2px
}

div.dialog div.content #achievementRewardList div.achievement div.hook.points_100 img {
    left: 45px;
    top: -2px
}

div#achievementRewardList div.achievement div.pointAmount {
    color: black;
    font-weight: normal
}

div#achievementRewardList div.achievement div.pointAmount.points_25 {
    font-size: 22px;
    left: 42px;
    position: absolute;
    top: 20px
}

div#achievementRewardList div.achievement div.pointAmount.points_50 {
    font-size: 22px;
    left: 32px;
    position: absolute;
    top: 20px
}

div#achievementRewardList div.achievement div.pointAmount.points_75 {
    font-size: 22px;
    left: 30px;
    position: absolute;
    top: 20px
}

div#achievementRewardList div.achievement div.pointAmount.points_100 {
    font-size: 22px;
    left: 24px;
    position: absolute;
    top: 20px
}

div.dialog div.content #achievementRewardList div.achievement .bigSpeechBubble.rewardReady img {
    background-image: url('../../img_rtl/layout/icons/exclamationMark-rtl.png')
}

div.dialog div.content #achievementRewardList div.achievement .bigSpeechBubble {
    position: absolute;
    right: -12px;
    top: 76px
}

div.dialog div.content #achievementRewardList div.achievementArrow {
    background: url('../../img_rtl/quests/achievement/pfeil-rtl.png') no-repeat center center;
    float: right;
    width: 9px;
    height: 112px;
    margin-right: 5px;
    margin-left: 3px
}

div.dialog div.content #achievementRewardList div.verticalLine {
    background-color: #ddd9ce;
    float: right;
    width: 1px;
    height: 112px;
    margin-right: 10px;
    margin-left: 3px
}

div.dialog div.content #achievementRewardList img.points_25 {
    width: 89px;
    height: 112px;
    background: url('../../img_rtl/quests/achievement/btn_brown_25.png') -18px center
}

div.dialog div.content #achievementRewardList img.points_50 {
    width: 89px;
    height: 112px;
    background: url('../../img_rtl/quests/achievement/btn_brown_50.png') -25px center
}

div.dialog div.content #achievementRewardList img.points_75 {
    width: 89px;
    height: 112px;
    background: url('../../img_rtl/quests/achievement/btn_brown_75.png') -28px center
}

div.dialog div.content #achievementRewardList img.points_100 {
    width: 89px;
    height: 112px;
    background: url('../../img_rtl/quests/achievement/btn_brown_100.png') -28px center
}

div.dialog div.content #achievementRewardList img.points_25.active {
    background: url('../../img_rtl/quests/achievement/btn_green_25.png') -4px center
}

div.dialog div.content #achievementRewardList img.points_50.active {
    background: url('../../img_rtl/quests/achievement/btn_green_50.png') -25px center
}

div.dialog div.content #achievementRewardList img.points_75.active {
    background: url('../../img_rtl/quests/achievement/btn_green_75.png') -28px center
}

div.dialog div.content #achievementRewardList img.points_100.active {
    background: url('../../img_rtl/quests/achievement/btn_green_100.png') -28px center
}

div.dialog div.content #achievementQuestList {
    border-top: 2px solid #ddd9ce;
    background-color: #f2f2f2;
    border-collapse: collapse
}

div.dialog div.content #achievementQuestList tr {
    height: 32px
}

div.dialog div.content #achievementQuestList td {
    background-color: transparent;
    border-bottom: 2px solid #fff
}

div.dialog div.content #achievementQuestList tr.zebra td {
    background-color: #efecdb
}

div.dialog div.content #achievementQuestList img.hook {
    width: 30px;
    height: 30px
}

div.dialog div.content #achievementQuestList img.hook.working {
    background-image: url('../../img_rtl/quests/achievement/haken_weiss.png')
}

div.dialog div.content #achievementQuestList img.hook.done {
    background-image: url('../../img_rtl/quests/achievement/haken_gruen.png')
}

div.dialog div.content #achievementQuestList tr {
    height: 41px
}

div.dialog div.content #achievementQuestList tr:nth-child(even) {
    background-color: #efecdb
}

div.dialog div.content #achievementQuestList tr:nth-child(odd) {
    background-color: #f2f2f2
}

div.dialog div.content #achievementQuestList td.hook {
    width: 35px
}

div.dialog div.content #achievementQuestList td.steps {
    width: 35px
}

div.dialog div.content #achievementQuestList td.points {
    width: 70px;
    color: #99c01a;
    font-weight: bold
}

.questWrapper.achievements h2.questTitle {
    text-align: center;
    margin-top: 10px
}

.questWrapper.achievements .difficulty.moderate {
    color: #006400
}

.questWrapper.achievements .difficulty.challenging {
    color: #ff8c00
}

.questWrapper.achievements .difficulty.hard {
    color: #8b0000
}

.questWrapper .questImage .natars {
    background-image: url('../../img_rtl/quests/natars.png')
}

.questWrapper .questImage .adventure3 {
    background-image: url('../../img_rtl/quests/adventure3.png')
}

.questWrapper .questImage .adventure5 {
    background-image: url('../../img_rtl/quests/adventure5.png')
}

.questWrapper .questImage .heroLevelUp {
    background-image: url('../../img_rtl/quests/heroLevelUp.png')
}

.questWrapper .questImage .hero {
    background-image: url('../../img_rtl/quests/hero.png')
}

.questWrapper .questImage .auction {
    background-image: url('../../img_rtl/quests/auction.png')
}

.questWrapper .questImage .inventoryResources {
    background-image: url('../../img_rtl/quests/inventoryResources.png')
}

.questWrapper .questImage .oasisFree {
    background-image: url('../../img_rtl/quests/oasisFree.png')
}

.questWrapper .questImage .resources {
    background-image: url('../../img_rtl/quests/resources.png')
}

.questWrapper .questImage .resourceTypes {
    background-image: url('../../img_rtl/quests/resourceTypes.png')
}

.questWrapper .questImage .resourceView {
    background-image: url('../../img_rtl/quests/resourceView.png')
}

.questWrapper .questImage .culturePoints {
    background-image: url('../../img_rtl/quests/culturePoints.png')
}

.questWrapper .questImage .trade {
    background-image: url('../../img_rtl/quests/trade.png')
}

.questWrapper .questImage .renameVillage {
    background-image: url('../../img_rtl/quests/renameVillage.png')
}

.questWrapper .questImage .shopButton {
    background-image: url('../../img_rtl/quests/shopButton.png')
}

.questWrapper .questImage .statistics {
    background-image: url('../../img_rtl/quests/statistics.png')
}

.questWrapper .questImage .map {
    background-image: url('../../img_rtl/quests/map.png')
}

.questWrapper .questImage .messages {
    background-image: url('../../img_rtl/quests/messages.png')
}

.questWrapper .questImage .reports {
    background-image: url('../../img_rtl/quests/reports.png')
}

.questWrapper .questImage .newVillage {
    background-image: url('../../img_rtl/quests/newVillage.png')
}

.questWrapper .questImage .upgrade_vid1 {
    background-image: url('../../img_rtl/quests/upgrade_vid1.png')
}

.questWrapper .questImage .upgrade_vid2 {
    background-image: url('../../img_rtl/quests/upgrade_vid2.png')
}

.questWrapper .questImage .upgrade_vid3 {
    background-image: url('../../img_rtl/quests/upgrade_vid3.png')
}

.questWrapper .questImage .upgrade_vid6 {
    background-image: url('../../img_rtl/quests/upgrade_vid6.png')
}

.questWrapper .questImage .upgrade_vid7 {
    background-image: url('../../img_rtl/quests/upgrade_vid7.png')
}

.questWrapper .questImage .warehouse_vid1 {
    background-image: url('../../img_rtl/quests/warehouse_vid1.png')
}

.questWrapper .questImage .warehouse_vid2 {
    background-image: url('../../img_rtl/quests/warehouse_vid2.png')
}

.questWrapper .questImage .warehouse_vid3 {
    background-image: url('../../img_rtl/quests/warehouse_vid3.png')
}

.questWrapper .questImage .warehouse_vid6 {
    background-image: url('../../img_rtl/quests/warehouse_vid6.png')
}

.questWrapper .questImage .warehouse_vid7 {
    background-image: url('../../img_rtl/quests/warehouse_vid7.png')
}

.questWrapper .questImage .granary_vid1 {
    background-image: url('../../img_rtl/quests/granary_vid1.png')
}

.questWrapper .questImage .granary_vid2 {
    background-image: url('../../img_rtl/quests/granary_vid2.png')
}

.questWrapper .questImage .granary_vid3 {
    background-image: url('../../img_rtl/quests/granary_vid3.png')
}

.questWrapper .questImage .granary_vid6 {
    background-image: url('../../img_rtl/quests/granary_vid6.png')
}

.questWrapper .questImage .granary_vid7 {
    background-image: url('../../img_rtl/quests/granary_vid7.png')
}

.questWrapper .questImage .cranny_vid1 {
    background-image: url('../../img_rtl/quests/cranny_vid1.png')
}

.questWrapper .questImage .cranny_vid2 {
    background-image: url('../../img_rtl/quests/cranny_vid2.png')
}

.questWrapper .questImage .cranny_vid3 {
    background-image: url('../../img_rtl/quests/cranny_vid3.png')
}

.questWrapper .questImage .cranny_vid6 {
    background-image: url('../../img_rtl/quests/cranny_vid6.png')
}

.questWrapper .questImage .cranny_vid7 {
    background-image: url('../../img_rtl/quests/cranny_vid7.png')
}

.questWrapper .questImage .barracks_vid1 {
    background-image: url('../../img_rtl/quests/barracks_vid1.png')
}

.questWrapper .questImage .barracks_vid2 {
    background-image: url('../../img_rtl/quests/barracks_vid2.png')
}

.questWrapper .questImage .barracks_vid3 {
    background-image: url('../../img_rtl/quests/barracks_vid3.png')
}

.questWrapper .questImage .barracks_vid6 {
    background-image: url('../../img_rtl/quests/barracks_vid6.png')
}

.questWrapper .questImage .barracks_vid7 {
    background-image: url('../../img_rtl/quests/barracks_vid7.png')
}

.questWrapper .questImage .marketplace_vid1 {
    background-image: url('../../img_rtl/quests/marketplace_vid1.png')
}

.questWrapper .questImage .marketplace_vid2 {
    background-image: url('../../img_rtl/quests/marketplace_vid2.png')
}

.questWrapper .questImage .marketplace_vid3 {
    background-image: url('../../img_rtl/quests/marketplace_vid3.png')
}

.questWrapper .questImage .marketplace_vid6 {
    background-image: url('../../img_rtl/quests/marketplace_vid6.png')
}

.questWrapper .questImage .marketplace_vid7 {
    background-image: url('../../img_rtl/quests/marketplace_vid7.png')
}

.questWrapper .questImage .wall_vid1 {
    background-image: url('../../img_rtl/quests/wall_vid1.png')
}

.questWrapper .questImage .wall_vid2 {
    background-image: url('../../img_rtl/quests/wall_vid2.png')
}

.questWrapper .questImage .wall_vid3 {
    background-image: url('../../img_rtl/quests/wall_vid3.png')
}

.questWrapper .questImage .wall_vid6 {
    background-image: url('../../img_rtl/quests/wall_vid6.png')
}

.questWrapper .questImage .wall_vid7 {
    background-image: url('../../img_rtl/quests/wall_vid7.png')
}

.questWrapper .questImage .academy_vid1 {
    background-image: url('../../img_rtl/quests/academy_vid1.png')
}

.questWrapper .questImage .academy_vid2 {
    background-image: url('../../img_rtl/quests/academy_vid2.png')
}

.questWrapper .questImage .academy_vid3 {
    background-image: url('../../img_rtl/quests/academy_vid3.png')
}

.questWrapper .questImage .academy_vid6 {
    background-image: url('../../img_rtl/quests/academy_vid6.png')
}

.questWrapper .questImage .academy_vid7 {
    background-image: url('../../img_rtl/quests/academy_vid7.png')
}

.questWrapper .questImage .mainBuilding_vid1 {
    background-image: url('../../img_rtl/quests/mainBuilding_vid1.png')
}

.questWrapper .questImage .mainBuilding_vid2 {
    background-image: url('../../img_rtl/quests/mainBuilding_vid2.png')
}

.questWrapper .questImage .mainBuilding_vid3 {
    background-image: url('../../img_rtl/quests/mainBuilding_vid3.png')
}

.questWrapper .questImage .mainBuilding_vid6 {
    background-image: url('../../img_rtl/quests/mainBuilding_vid6.png')
}

.questWrapper .questImage .mainBuilding_vid7 {
    background-image: url('../../img_rtl/quests/mainBuilding_vid7.png')
}

.questWrapper .questImage .grainMill_vid1 {
    background-image: url('../../img_rtl/quests/grainMill_vid1.png')
}

.questWrapper .questImage .grainMill_vid2 {
    background-image: url('../../img_rtl/quests/grainMill_vid2.png')
}

.questWrapper .questImage .grainMill_vid3 {
    background-image: url('../../img_rtl/quests/grainMill_vid3.png')
}

.questWrapper .questImage .grainMill_vid6 {
    background-image: url('../../img_rtl/quests/grainMill_vid6.png')
}

.questWrapper .questImage .grainMill_vid7 {
    background-image: url('../../img_rtl/quests/grainMill_vid7.png')
}

.questWrapper .questImage .smithy_vid1 {
    background-image: url('../../img_rtl/quests/smithy_vid1.png')
}

.questWrapper .questImage .smithy_vid2 {
    background-image: url('../../img_rtl/quests/smithy_vid2.png')
}

.questWrapper .questImage .smithy_vid3 {
    background-image: url('../../img_rtl/quests/smithy_vid3.png')
}

.questWrapper .questImage .smithy_vid6 {
    background-image: url('../../img_rtl/quests/smithy_vid6.png')
}

.questWrapper .questImage .smithy_vid7 {
    background-image: url('../../img_rtl/quests/smithy_vid7.png')
}

.questWrapper .questImage .smithyCloseup_vid1 {
    background-image: url('../../img_rtl/quests/smithyCloseup_vid1.png')
}

.questWrapper .questImage .smithyCloseup_vid2 {
    background-image: url('../../img_rtl/quests/smithyCloseup_vid2.png')
}

.questWrapper .questImage .smithyCloseup_vid3 {
    background-image: url('../../img_rtl/quests/smithyCloseup_vid3.png')
}

.questWrapper .questImage .smithyCloseup_vid6 {
    background-image: url('../../img_rtl/quests/smithyCloseup_vid6.png')
}

.questWrapper .questImage .smithyCloseup_vid7 {
    background-image: url('../../img_rtl/quests/smithyCloseup_vid7.png')
}

.questWrapper .questImage .government_vid1 {
    background-image: url('../../img_rtl/quests/government_vid1.png')
}

.questWrapper .questImage .government_vid2 {
    background-image: url('../../img_rtl/quests/government_vid2.png')
}

.questWrapper .questImage .government_vid3 {
    background-image: url('../../img_rtl/quests/government_vid3.png')
}

.questWrapper .questImage .government_vid6 {
    background-image: url('../../img_rtl/quests/government_vid6.png')
}

.questWrapper .questImage .government_vid7 {
    background-image: url('../../img_rtl/quests/government_vid7.png')
}

.questWrapper .questImage .embassy_vid1 {
    background-image: url('../../img_rtl/quests/embassy_vid1.png')
}

.questWrapper .questImage .embassy_vid2 {
    background-image: url('../../img_rtl/quests/embassy_vid2.png')
}

.questWrapper .questImage .embassy_vid3 {
    background-image: url('../../img_rtl/quests/embassy_vid3.png')
}

.questWrapper .questImage .embassy_vid6 {
    background-image: url('../../img_rtl/quests/embassy_vid6.png')
}

.questWrapper .questImage .embassy_vid7 {
    background-image: url('../../img_rtl/quests/embassy_vid7.png')
}

.questWrapper .questImage .stable_vid1 {
    background-image: url('../../img_rtl/quests/stable_vid1.png')
}

.questWrapper .questImage .stable_vid2 {
    background-image: url('../../img_rtl/quests/stable_vid2.png')
}

.questWrapper .questImage .stable_vid3 {
    background-image: url('../../img_rtl/quests/stable_vid3.png')
}

.questWrapper .questImage .stable_vid6 {
    background-image: url('../../img_rtl/quests/stable_vid6.png')
}

.questWrapper .questImage .stable_vid7 {
    background-image: url('../../img_rtl/quests/stable_vid7.png')
}

.questWrapper .questImage .townHall_vid1 {
    background-image: url('../../img_rtl/quests/townHall_vid1.png')
}

.questWrapper .questImage .townHall_vid2 {
    background-image: url('../../img_rtl/quests/townHall_vid2.png')
}

.questWrapper .questImage .townHall_vid3 {
    background-image: url('../../img_rtl/quests/townHall_vid3.png')
}

.questWrapper .questImage .townHall_vid6 {
    background-image: url('../../img_rtl/quests/townHall_vid6.png')
}

.questWrapper .questImage .townHall_vid7 {
    background-image: url('../../img_rtl/quests/townHall_vid7.png')
}

.questWrapper .questImage .ironMine {
    background-image: url('../../img_rtl/quests/ironMine.png')
}

.questWrapper .questImage .infantry1_vid1 {
    background-image: url('../../img_rtl/quests/infantry1_vid1.png')
}

.questWrapper .questImage .infantry1_vid2 {
    background-image: url('../../img_rtl/quests/infantry1_vid2.png')
}

.questWrapper .questImage .infantry1_vid3 {
    background-image: url('../../img_rtl/quests/infantry1_vid3.png')
}

.questWrapper .questImage .infantry1_vid6 {
    background-image: url('../../img_rtl/quests/infantry1_vid6.png')
}

.questWrapper .questImage .infantry1_vid7 {
    background-image: url('../../img_rtl/quests/infantry1_vid7.png')
}

.questWrapper .questImage .infantry2_vid1 {
    background-image: url('../../img_rtl/quests/infantry2_vid1.png')
}

.questWrapper .questImage .infantry2_vid2 {
    background-image: url('../../img_rtl/quests/infantry2_vid2.png')
}

.questWrapper .questImage .infantry2_vid3 {
    background-image: url('../../img_rtl/quests/infantry2_vid3.png')
}

.questWrapper .questImage .infantry2_vid6 {
    background-image: url('../../img_rtl/quests/infantry2_vid6.png')
}

.questWrapper .questImage .infantry2_vid7 {
    background-image: url('../../img_rtl/quests/infantry2_vid7.png')
}

.questWrapper .questImage .settler_vid1 {
    background-image: url('../../img_rtl/quests/settler_vid1.png')
}

.questWrapper .questImage .settler_vid2 {
    background-image: url('../../img_rtl/quests/settler_vid2.png')
}

.questWrapper .questImage .settler_vid3 {
    background-image: url('../../img_rtl/quests/settler_vid3.png')
}

.questWrapper .questImage .settler_vid6 {
    background-image: url('../../img_rtl/quests/settler_vid6.png')
}

.questWrapper .questImage .settler_vid7 {
    background-image: url('../../img_rtl/quests/settler_vid7.png')
}

div.bigSpeechBubble {
    background: url('../../img_rtl/round/speechBubble/speechBalloonLarge-rtl.png');
    width: 55px;
    height: 44px;
    margin-top: 60px;
    margin-right: -80px;
}

.bigSpeechBubble img {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 6px;
}

#regionContainer #regionNeighborDetailsWithMap {
    position: relative;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr auto;
    grid-template-columns: 1fr auto;
    margin-bottom: 10px
}

#regionContainer #regionNeighborDetailsWithMap div:first-of-type {
    padding-left: 10px;
    -ms-grid-column: 1;
    grid-column-start: 1
}

#regionContainer #regionNeighborDetailsWithMap div.regionMapContainer {
    position: relative;
    -ms-grid-column: 2;
    grid-column-start: 2
}

#regionContainer #regionNeighborDetailsWithMap div.regionMapContainer #regionMinimap {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    z-index: 1
}

#regionContainer #regionNeighborDetailsWithMap div.regionMapContainer.factionsOverlay {
    border: 1px solid #333;
    border-radius: 3px
}

#regionContainer #regionNeighborDetailsWithMap div.regionMapContainer.factionsOverlay img {
    border-radius: 3px
}

#regionContainer #regionNeighborDetailsWithMap div.regionMapContainer.factionsOverlay:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    background-image: url('../../img_rtl/region/regionDetailsMap_small.png');
    width: 185px;
    height: 185px
}

#regionContainer #regionNeighborDetailsWithMap div.regionMapContainer.factionsOverlay svg {
    background-color: transparent
}

#regionContainer svg.regionsInEurope {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    background-color: rgba(242, 242, 242, 0.55)
}

#regionContainer svg.regionsInEurope g {
    cursor: pointer;
    transition-duration: 150ms;
    stroke: transparent;
    stroke-width: 2px
}

#regionContainer svg.regionsInEurope g.active {
    fill: #991915;
    stroke: #f8c000
}

#regionContainer svg.regionsInEurope g:hover {
    stroke: #f2f2f2
}

#regionContainer svg.regionsInEurope g.highlight {
    stroke: #f2f2f2;
    filter: url("#regionBrightness")
}

#regionContainer svg.regionsInEurope g.copyFront {
    pointer-events: none
}

#regionContainer a svg.regionsInEurope g {
    pointer-events: none
}

#regionContainer #neighboringRegions tbody tr td {
    transition-duration: 150ms
}

#regionContainer #neighboringRegions tbody tr td:nth-child(1),
#regionContainer #neighboringRegions tbody tr td:nth-child(4) {
    text-align: center
}

#regionContainer #neighboringRegions tbody tr td:nth-child(2),
#regionContainer #neighboringRegions tbody tr td:nth-child(3) {
    text-align: left
}

#regionContainer #neighboringRegions tbody tr.highlight td {
    background-color: #e7f0ca
}

#regionContainer #regionDetailContent {
    position: relative;
    float: right
}

#regionContainer #regionDetailContent.inTreasury {
    width: 348px
}

#regionContainer #regionDetailContent .lTop {
    float: right;
    clear: right;
    padding-top: 10px;
    max-width: 50%
}

#regionContainer #regionDetailContent .rTop {
    float: left;
    clear: left;
    padding-top: 10px
}

#regionContainer #regionDetailContent .lTop.withIcon,
#regionContainer #regionDetailContent .rTop.withIcon {
    line-height: 22px
}

#regionContainer #regionDetailContent .lTop a.regionSettleIcon {
    width: 22px;
    height: 22px;
    background-image: url('../../img_rtl/region/icons/region_info_icon.png');
    position: relative;
    display: inline-block
}

#regionContainer #regionDetailContent .lBottom {
    float: right;
    clear: right;
    padding-top: 10px;
    padding-bottom: 10px;
    max-width: 50%
}

#regionContainer #regionDetailContent .rBottom {
    float: left;
    clear: left;
    padding-top: 10px;
    padding-bottom: 10px;
    max-width: 50%
}

#regionContainer #regionDetailContent table {
    width: 348px;
    margin-top: 10px
}

#regionContainer #regionDetailContent:not(.regionInfo) table td {
    text-align: center
}

#regionContainer #regionDetailContent table td.allianceTag {
    white-space: nowrap
}

#regionContainer #regionDetailContent table tr.none td {
    background-color: #efefef
}

#regionContainer #regionDetailContent table tr.allyNotInTop td,
#regionContainer #regionDetailContent table tr.allyNotInTop td a {
    color: silver
}

#regionContainer #regionMapContainer {
    position: absolute;
    left: 24px;
    top: 210px;
    z-index: 300
}

.victoryArtefactGatherBlock {
    height: 200px;
    display: table
}

.territoryStatistics .victoryArtefactGatherBlock:first-child {
    float: right
}

.territoryStatistics .victoryArtefactGatherBlock:not(:first-child) {
    padding-right: 15px
}

.victoryArtefactGatherBlock #ancientPowerStatus {
    display: table-cell;
    vertical-align: middle
}

.victoryArtefactGatherBlock #regionPieChart {
    text-align: center;
    display: table-cell;
    vertical-align: middle
}

.victoryArtefactGatherBlock #regionPieChartAgenda {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    background-color: #fff;
    padding: 0
}

.victoryArtefactGatherBlock #regionPieChartAgenda table {
    background-color: #fff
}

.victoryArtefactGatherBlock #regionPieChartAgenda table tbody td {
    line-height: 16px;
    padding: 0 7px 0 7px
}

#regionContainer #regionDetailContent.regionInfo table {
    width: 554px;
    text-align: center
}

#regionContainer #regionDetailContent.regionInfo table td {
    text-align: center
}

#regionDetailContent.regionInfo .territorialControl {
    width: 120px
}

.progressBarContainer .progressBar {
    background-color: #fff;
    height: 8px;
    border: 1px solid #c6c6c6;
    padding: 1px;
    margin: 1px
}

.progressBarContainer .bar {
    height: 100%;
    float: right
}

.progressBarContainer .bar.green {
    background-color: #006900
}

.progressBarContainer .progressBarText {
    position: relative;
    float: right;
    padding-bottom: 5px
}

.progressBarContainer .progressBarNumbers {
    position: relative;
    float: left
}

#statisticsV2 #resourceRank:after,
#statisticsV2 #resourceRank .resourceBarChartContainer:after,
#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart:after,
#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .positive:after,
#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .negative:after,
#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0
}

#combatSimulator .results .combatStatistics table .inlineIcon,
#statisticsV2 .inlineIcon {
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto
}

#combatSimulator .results .combatStatistics table .inlineIcon i,
#statisticsV2 .inlineIcon i,
#combatSimulator .results .combatStatistics table .inlineIcon svg,
#statisticsV2 .inlineIcon svg {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row: 1;
    grid-row-start: 1;
    margin-left: 5px;
    -ms-grid-row-align: center;
    align-self: center
}

#combatSimulator .results .combatStatistics table .inlineIcon span,
#statisticsV2 .inlineIcon span {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-align: center;
    align-self: center;
    display: inline-block
}

#tasks .task .progress button .collectedCheckmark {
    background-image: linear-gradient(to bottom, #cba467 5%, #f3e2ae 13%, #efbf7b 32%, #aa8050 48%, #835e35 72%, #ad8a54 93%, #d7b672 100%)
}

#tasks .task.achieved {
    background-image: linear-gradient(to bottom, #8fb74f 5%, #add076 13%, #add076 32%, #addd61 48%, #5b7a2a 72%, #618030 93%, #7fa246 100%)
}

#tasks .taskDetailview .taskDescription .imageFrame,
#tasks .task,
#tasks .task .progress .progressBar .bar,
#tasks .rewardBonus {
    background-image: linear-gradient(to bottom, #cba467 5%, #f3e2ae 13%, #efbf7b 32%, #aa8050 48%, #835e35 72%, #ad8a54 93%, #d7b672 100%);
    border: 1px solid #34220d;
    border-radius: 4px
}

#tasks .taskDetailview .taskDescription .imageFrame:before,
#tasks .task:before,
#tasks .task .progress .progressBar .bar:before,
#tasks .rewardBonus:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: #664e40;
    border: solid 1px #44321d;
    border-radius: 1px
}

.scene .iconButton {
    float: none;
    background-image: none
}

.scene * {
    box-sizing: border-box
}

.scene *:after,
.scene *:before {
    background-repeat: no-repeat;
    background-position: top right;
    box-sizing: border-box
}

.scene input[type="text"],
.scene input[type="number"] {
    background-position: initial
}

.scene i.artefact_buildingMaster {
    background-image: url('../../img_rtl/scenes/General/artefact/buildingMasterBonus-rtl.png');
    width: 16px;
    height: 16px
}

.scene i.artefact_spy {
    background-image: url('../../img_rtl/scenes/General/artefact/spyBonus-rtl.png');
    width: 16px;
    height: 16px
}

.scene i.hero_offBonus {
    background-image: url('../../img_rtl/scenes/General/hero/offBonus-rtl.png');
    width: 16px;
    height: 16px
}

.scene i.hero_defBonus {
    background-image: url('../../img_rtl/scenes/General/hero/defBonus-rtl.png');
    width: 16px;
    height: 16px
}

.scene i.hero_health {
    background-image: url('../../img_rtl/scenes/General/hero/health-rtl.png');
    width: 16px;
    height: 16px
}

.scene i.hero_strength {
    background-image: url('../../img_rtl/scenes/General/hero/strength-rtl.png');
    width: 16px;
    height: 16px
}

.scene i.hero_horse {
    background-image: url('../../img_rtl/scenes/General/hero/horse-rtl.png');
    width: 16px;
    height: 16px
}

.scene i.hero_bag {
    background-image: url('../../img_rtl/scenes/General/hero/bag-rtl.png');
    width: 16px;
    height: 16px
}

.scene i.hero_handL {
    background-image: url('../../img_rtl/scenes/General/hero/handL.png');
    width: 15px;
    height: 16px
}

.scene i.hero_handR {
    background-image: url('../../img_rtl/scenes/General/hero/handR.png');
    width: 15px;
    height: 16px
}

.scene i.hero_torso {
    background-image: url('../../img_rtl/scenes/General/hero/torso-rtl.png');
    width: 16px;
    height: 15px
}

.scene i.trap {
    background-image: url('../../img_rtl/scenes/General/troops/trap_small.png');
    width: 16px;
    height: 16px
}

.scene i.troopCount {
    background-image: url('../../img_rtl/scenes/General/troops/troopCount_small.png');
    width: 15px;
    height: 16px
}

.scene i.troopLevel {
    background-image: url('../../img_rtl/scenes/General/troops/troopLevel_small.png');
    width: 16px;
    height: 15px
}

.scene i.troopDead {
    background-image: url('../../img_rtl/scenes/General/troops/troopDead_small.png');
    width: 16px;
    height: 16px
}

.scene i.troopWounded {
    background-image: url('../../img_rtl/scenes/General/troops/troopWounded_small.png');
    width: 15px;
    height: 16px
}

.scene i.celebration_small {
    background-image: url('../../img_rtl/scenes/General/misc/celebration_small.png');
    width: 12px;
    height: 16px
}

.scene i.celebration_medium {
    background-image: url('../../img_rtl/scenes/General/misc/celebration_medium.png');
    width: 20px;
    height: 24px
}

.scene i.target {
    background-image: url('../../img_rtl/scenes/General/misc/target-rtl.png');
    width: 14px;
    height: 14px
}

.scene i.trade_small {
    background-image: url('../../img_rtl/scenes/General/misc/trade_small.png');
    width: 16px;
    height: 16px
}

.scene i.trade_medium {
    background-image: url('../../img_rtl/scenes/General/misc/trade_medium.png');
    width: 26px;
    height: 24px
}

.scene i.player_medium {
    background-image: url('../../img_rtl/scenes/General/misc/player_medium.png');
    width: 14px;
    height: 24px
}

.scene i.player_large {
    background-image: url('../../img_rtl/scenes/General/misc/player_large.png');
    width: 30px;
    height: 56px
}

.scene i.time_medium {
    background-image: url('../../img_rtl/scenes/General/misc/time_medium.png');
    width: 24px;
    height: 24px
}

.scene i.bounty_small {
    background-image: url('../../img_rtl/scenes/General/combat/bounty_small.png');
    width: 14px;
    height: 16px
}

.scene i.bounty_medium {
    background-image: url('../../img_rtl/scenes/General/combat/bounty_medium.png');
    width: 24px;
    height: 24px
}

.scene i.defenseCavalry_small {
    background-image: url('../../img_rtl/scenes/General/combat/defenseCavalry_small.png');
    width: 14px;
    height: 16px
}

.scene i.defenseInfantry_small {
    background-image: url('../../img_rtl/scenes/General/combat/defenseInfantry_small.png');
    width: 14px;
    height: 16px
}

.scene .tabContainer .tabHeader {
    display: -ms-grid;
    display: grid;
    justify-content: start
}

.scene .tabContainer .tabHeader .tab {
    -ms-grid-row: 1;
    grid-row-start: 1;
    grid-column-start: auto;
    -ms-grid-row-align: end;
    align-self: end;
    border: 1px solid #ddc6a2;
    border-bottom: 0;
    display: -ms-grid;
    display: grid;
    cursor: pointer;
    transition: padding .2s
}

.scene .tabContainer .tabHeader .tab:nth-child(1) {
    -ms-grid-column: 1
}

.scene .tabContainer .tabHeader .tab:nth-child(2) {
    -ms-grid-column: 2
}

.scene .tabContainer .tabHeader .tab:nth-child(3) {
    -ms-grid-column: 3
}

.scene .tabContainer .tabHeader .tab:nth-child(4) {
    -ms-grid-column: 4
}

.scene .tabContainer .tabHeader .tab:nth-child(5) {
    -ms-grid-column: 5
}

.scene .tabContainer .tabHeader .tab i,
.scene .tabContainer .tabHeader .tab span {
    -ms-grid-row: 1;
    grid-row-start: 1;
    grid-column-start: auto;
    -ms-grid-row-align: center;
    align-self: center;
    display: inline-block
}

.scene .tabContainer .tabHeader .tab i:nth-child(1),
.scene .tabContainer .tabHeader .tab span:nth-child(1) {
    -ms-grid-column: 1
}

.scene .tabContainer .tabHeader .tab i:nth-child(2),
.scene .tabContainer .tabHeader .tab span:nth-child(2) {
    -ms-grid-column: 2
}

.scene .tabContainer .tabHeader .tab i:nth-child(3),
.scene .tabContainer .tabHeader .tab span:nth-child(3) {
    -ms-grid-column: 3
}

.scene .tabContainer .tabHeader .tab i:nth-child(4),
.scene .tabContainer .tabHeader .tab span:nth-child(4) {
    -ms-grid-column: 4
}

.scene .tabContainer .tabHeader .tab i:nth-child(5),
.scene .tabContainer .tabHeader .tab span:nth-child(5) {
    -ms-grid-column: 5
}

.scene .tabContainer .tabHeader .tab i {
    margin-right: 5px
}

.scene .tabContainer .tabHeader .tab:nth-child(n+2) {
    margin-right: 3px
}

.scene .tabContainer .tabHeader .tab.selected {
    position: relative;
    z-index: 3;
    padding: 7px 10px;
    background-color: #fcf2da
}

.scene .tabContainer .tabHeader .tab:not(.selected) {
    padding: 7px 10px 2px;
    background-color: #f2e5c6
}

.scene .tabContainer .tabHeader .tab:hover:not(.selected) {
    padding-bottom: 7px
}

.scene .tabContainer .tabContent {
    position: relative;
    z-index: 2;
    margin-top: -1px;
    border: 1px solid #ddc6a2
}

.scene .tabContainer .tabContent .header {
    background-color: #fcf2da;
    padding: 5px
}

.scene .tabContainer .tabContent .body {
    background-color: #fff9eb;
    padding: 5px
}

.scene .iconButton {
    display: inline-block;
    position: relative;
    width: 26px;
    height: 26px;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid #cfcfcf;
    border-bottom-color: #b6b6b6;
    text-align: center
}

.scene .iconButton span {
    position: relative;
    z-index: 2;
    color: #333;
    font-weight: normal;
    line-height: 26px
}

.scene .iconButton i {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    background-position: center
}

.scene .iconButton:not(.disabled) {
    background-color: #fafafa
}

.scene .iconButton:not(.disabled) svg {
    position: relative;
    z-index: 3
}

.scene .iconButton:not(.disabled) svg path {
    fill: #5f5f64
}

.scene .iconButton:not(.disabled):before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 1px;
    border: 1px solid #e2e2e2;
    background-color: #fafafa
}

.scene .iconButton:not(.disabled):after {
    opacity: .5;
    transform: rotate(-10deg);
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    bottom: -5px;
    right: -5px;
    background-image: linear-gradient(to bottom, rgba(223, 223, 223, 0) 45%, #dfdfdf 55%, #e6e6e6)
}

.scene .iconButton:not(.disabled):active,
.scene .iconButton:not(.disabled).active {
    background-color: #add966;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5)
}

.scene .iconButton:not(.disabled):active:before,
.scene .iconButton:not(.disabled):active:after,
.scene .iconButton:not(.disabled).active:before,
.scene .iconButton:not(.disabled).active:after {
    display: none
}

.scene .iconButton:not(.disabled):active:hover,
.scene .iconButton:not(.disabled).active:hover {
    background-color: #add966
}

.scene .iconButton.round {
    border-radius: 50%
}

.scene .iconButton.round:not(.disabled):before {
    border-radius: 50%
}

.scene .iconButton:hover:not(.disabled) {
    background-color: #7cb029
}

.scene .iconButton.disabled {
    background: #919191;
    cursor: not-allowed;
    pointer-events: none
}

.scene .iconButton.disabled svg path {
    fill: #fff
}

#combatSimulator i.bigTribe1:not(.inactive) {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/roman.png');
    width: 55px;
    height: 63px
}

#combatSimulator i.bigTribe1.inactive {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/roman_inactive.png');
    width: 36px;
    height: 43px
}

#combatSimulator i.smallTribe1 {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/roman_small.png');
    width: 37px;
    height: 37px
}

#combatSimulator i.bigTribe2:not(.inactive) {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/teuton.png');
    width: 57px;
    height: 59px
}

#combatSimulator i.bigTribe2.inactive {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/teuton_inactive.png');
    width: 47px;
    height: 41px
}

#combatSimulator i.smallTribe2 {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/teuton_small.png');
    width: 37px;
    height: 37px
}

#combatSimulator i.bigTribe3:not(.inactive) {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/gaul.png');
    width: 57px;
    height: 62px
}

#combatSimulator i.bigTribe3.inactive {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/gaul_inactive.png');
    width: 43px;
    height: 45px
}

#combatSimulator i.smallTribe3 {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/gaul_small.png');
    width: 37px;
    height: 37px
}

#combatSimulator i.bigTribe4:not(.inactive) {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/nature.png');
    width: 57px;
    height: 52px
}

#combatSimulator i.bigTribe4.inactive {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/nature_inactive.png');
    width: 44px;
    height: 37px
}

#combatSimulator i.smallTribe4 {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/nature_small.png');
    width: 37px;
    height: 37px
}

#combatSimulator i.bigTribe5:not(.inactive) {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/natar.png');
    width: 57px;
    height: 51px
}

#combatSimulator i.bigTribe5.inactive {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/natar_inactive.png');
    width: 43px;
    height: 35px
}

#combatSimulator i.bigTribe6:not(.inactive) {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/egyptian.png');
    width: 57px;
    height: 58px
}

#combatSimulator i.bigTribe6.inactive {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/egyptian_inactive.png');
    width: 47px;
    height: 40px
}

#combatSimulator i.smallTribe6 {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/egyptian_small.png');
    width: 37px;
    height: 37px
}

#combatSimulator i.bigTribe7:not(.inactive) {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/hun.png');
    width: 57px;
    height: 60px
}

#combatSimulator i.bigTribe7.inactive {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/hun_inactive.png');
    width: 49px;
    height: 45px
}

#combatSimulator i.smallTribe7 {
    background-image: url('../../img_rtl/scenes/CombatSimulator/tribes/hun_small.png');
    width: 37px;
    height: 37px
}

#combatSimulator i.allyBonus {
    background-image: url('../../img_rtl/scenes/CombatSimulator/general/allyBonus-rtl.png');
    width: 13px;
    height: 16px
}

#combatSimulator i.shield {
    background-image: url('../../img_rtl/scenes/CombatSimulator/heroEquipment/shield-rtl.png');
    width: 14px;
    height: 16px
}

#combatSimulator i.horn {
    background-image: url('../../img_rtl/scenes/CombatSimulator/heroEquipment/horn-rtl.png');
    width: 16px;
    height: 15px
}

#combatSimulator i.scaleArmour {
    background-image: url('../../img_rtl/scenes/CombatSimulator/heroEquipment/scaleArmour-rtl.png');
    width: 16px;
    height: 15px
}

#combatSimulator i.breastPlate {
    background-image: url('../../img_rtl/scenes/CombatSimulator/heroEquipment/breastPlate-rtl.png');
    width: 16px;
    height: 15px
}

#combatSimulator i.segmentedArmour {
    background-image: url('../../img_rtl/scenes/CombatSimulator/heroEquipment/segmentedArmour-rtl.png');
    width: 16px;
    height: 15px
}

#combatSimulator i.armourOfHealth {
    background-image: url('../../img_rtl/scenes/CombatSimulator/heroEquipment/armourOfHealth-rtl.png');
    width: 16px;
    height: 15px
}

#combatSimulator i.bandage {
    background-image: url('../../img_rtl/scenes/CombatSimulator/heroEquipment/bandage-rtl.png');
    width: 16px;
    height: 16px
}

#combatSimulator i.smallBandage {
    background-image: url('../../img_rtl/scenes/CombatSimulator/heroEquipment/smallBandage-rtl.png');
    width: 16px;
    height: 16px
}

.rtl #combatSimulator svg.icon {
    transform: scale(-1, 1)
}

#combatSimulator .description {
    margin-top: 0;
    text-align: center
}

#combatSimulator .switchRoleWrapper {
    text-align: left;
    margin-bottom: 10px
}

#combatSimulator .switchRoleWrapper .switch {
    color: #f2f2f2
}

#combatSimulator .switchRoleWrapper .switch.defender {
    padding: 4px 20px;
    border: 1px solid #213745;
    background-image: linear-gradient(to bottom, #75a1bd, #4f84a6);
    box-shadow: inset 2px 0 1px -1px #477794, inset -2px 0 1px -1px #477794, inset 0 3px 1px -1px #d6e3eb, inset 0 -3px 1px -1px rgba(48, 80, 100, 0.6);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5)
}

#combatSimulator .switchRoleWrapper .switch.defender:hover:not(.disabled):not(:disabled) {
    background-color: #86adc5;
    border-color: #3d6680;
    box-shadow: inset 2px 0 1px -1px #477794, inset -2px 0 1px -1px #477794, inset 0 3px 1px -1px #d6e3eb, inset 0 -3px 1px -1px rgba(48, 80, 100, 0.6), inset 0 20px 25px -10px rgba(255, 255, 255, 0.7)
}

#combatSimulator .switchRoleWrapper .switch.defender:active:not(.disabled):not(:disabled) {
    background-image: linear-gradient(to top, #86adc5, #4f84a6);
    box-shadow: inset 2px 0 1px -1px #477794, inset -2px 0 1px -1px #477794;
    color: #294556
}

#combatSimulator .switchRoleWrapper .switch.attacker {
    padding: 4px 20px;
    border: 1px solid #4a1c1d;
    background-image: linear-gradient(to bottom, #c66c6e, #b14446);
    box-shadow: inset 2px 0 1px -1px #9e3d3f, inset -2px 0 1px -1px #9e3d3f, inset 0 3px 1px -1px #eed3d3, inset 0 -3px 1px -1px rgba(107, 41, 43, 0.6);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5)
}

#combatSimulator .switchRoleWrapper .switch.attacker:hover:not(.disabled):not(:disabled) {
    background-color: #cd7e80;
    border-color: #883536;
    box-shadow: inset 2px 0 1px -1px #9e3d3f, inset -2px 0 1px -1px #9e3d3f, inset 0 3px 1px -1px #eed3d3, inset 0 -3px 1px -1px rgba(107, 41, 43, 0.6), inset 0 20px 25px -10px rgba(255, 255, 255, 0.7)
}

#combatSimulator .switchRoleWrapper .switch.attacker:active:not(.disabled):not(:disabled) {
    background-image: linear-gradient(to top, #cd7e80, #b14446);
    box-shadow: inset 2px 0 1px -1px #9e3d3f, inset -2px 0 1px -1px #9e3d3f;
    color: #5c2425
}

#combatSimulator #simulatePin {
    position: relative;
    margin-top: 100px;
    text-align: center
}

#combatSimulator #simulatePin .simulateWrapper {
    position: fixed;
    z-index: 5;
    bottom: 0;
    padding: 10px 0;
    width: 564px;
    margin-right: -6px;
    border-top: 2px solid #9b9999;
    border-bottom: 2px solid #9b9999;
    background-image: linear-gradient(to top, #e7e7e7, white)
}

@media screen and (max-width:620px) {
    .mobileOptimized #combatSimulator #simulatePin .simulateWrapper {
        bottom: 130px
    }
}

#combatSimulator #simulatePin .simulateWrapper.pinned {
    position: absolute;
    bottom: 0
}

#combatSimulator #simulatePin .simulate {
    display: inline-block;
    min-width: 40%;
    font-size: 1.5rem;
    text-transform: uppercase;
    pointer-events: auto;
    padding: 8px 20px;
    text-align: center;
    height: auto;
    line-height: 24px
}

#combatSimulator .bonus {
    padding: 0 5px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr auto;
    grid-template-columns: 1fr auto;
    -ms-grid-rows: 39px;
    grid-template-rows: 39px;
    align-items: center
}

#combatSimulator .bonus.hidden {
    visibility: hidden
}

#combatSimulator .bonus .buildings {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-align: start;
    justify-self: start;
    -ms-grid-row-align: center;
    align-self: center
}

#combatSimulator .bonus .buildings label {
    margin-left: 10px
}

#combatSimulator .bonus .artefacts {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-align: end;
    justify-self: end;
    -ms-grid-row-align: center;
    align-self: center;
    position: relative;
    z-index: 3
}

#combatSimulator .bonus .artefacts label {
    margin-right: 10px
}

#combatSimulator .bonus i {
    margin-left: 5px
}

#combatSimulator .bonus input {
    width: 20px;
    font-size: 12px
}

.ie #combatSimulator .bonus input {
    width: 24px
}

#combatSimulator .bonus select {
    width: 60px
}

#combatSimulator .attacker .bonus .buildings {
    -ms-grid-column-align: end;
    justify-self: end
}

#combatSimulator .heroAttributes {
    border-top: 1px solid #e8e4dc;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr auto;
    grid-template-columns: 1fr auto;
    -ms-grid-rows: 33px;
    grid-template-rows: 33px;
    align-items: center;
    padding: 8px 5px
}

#combatSimulator .heroAttributes.hidden * {
    visibility: hidden
}

#combatSimulator .heroAttributes label {
    padding-right: 10px;
    line-height: 100%
}

#combatSimulator .heroAttributes input {
    vertical-align: middle
}

#combatSimulator .heroAttributes input[type=text] {
    width: 33px
}

#combatSimulator .heroAttributes .calculated {
    vertical-align: middle;
    margin-right: 5px
}

#combatSimulator .heroAttributes .stats,
#combatSimulator .heroAttributes .equipment {
    -ms-grid-row: 1;
    grid-row-start: 1
}

#combatSimulator .heroAttributes .stats>span,
#combatSimulator .heroAttributes .equipment>span {
    vertical-align: middle
}

#combatSimulator .heroAttributes .stats {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-align: start;
    justify-self: start
}

#combatSimulator .heroAttributes .stats i {
    margin-left: 3px;
    vertical-align: middle
}

#combatSimulator .heroAttributes .equipment {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-align: end;
    justify-self: end
}

#combatSimulator .heroAttributes .equipment .title {
    margin-left: 5px
}

#combatSimulator .heroAttributes .equipment .slot {
    padding: 3px;
    cursor: pointer;
    width: 22px;
    height: 22px;
    text-align: center
}

#combatSimulator .heroAttributes .equipment .slot i {
    vertical-align: middle
}

#combatSimulator .heroAttributes .equipment .slot:hover {
    box-shadow: 0 0 1px 1px #b09674;
    background-color: rgba(223, 196, 149, 0.2);
    border-radius: 5px
}

#combatSimulator .heroAttributes .equipment .equipContainer {
    display: inline-block;
    position: relative
}

#combatSimulator .heroAttributes .equipment .equipContainer .overlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 6
}

#combatSimulator .heroAttributes .equipment .equipContainer>span {
    cursor: pointer
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown.opened {
    position: absolute;
    top: 25px;
    left: 0;
    z-index: 37;
    padding: 10px 0;
    background-color: #fcf2da;
    border: 1px solid #ddc6a2;
    white-space: nowrap
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown.opened.dropUp {
    top: auto;
    bottom: 25px
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown.closed {
    display: none
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group {
    color: #61332b;
    line-height: 1.4em
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group~.group {
    margin-top: 10px
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group .title {
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.9em;
    padding: 0 10px 0 15px
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group .title i {
    margin-left: 5px;
    vertical-align: text-bottom
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group .entry {
    padding: 2px 20px
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group .entry input {
    vertical-align: text-bottom;
    margin-top: 2px;
    margin-left: 5px
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group .entry .checkmark {
    width: 1em;
    height: 1em;
    margin-left: 3px;
    vertical-align: text-top;
    fill: transparent;
    stroke: #61332b;
    stroke-width: 4;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    transition: stroke-dashoffset .3s ease-out
}

.rtl #combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group .entry .checkmark {
    transform: none
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group .entry.selected {
    background-color: #b09674
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group .entry.selected .checkmark {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .2s ease-in
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group .entry.selected:not(:hover) {
    color: white
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group .entry.selected:not(:hover) .checkmark {
    stroke: white
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group .entry:not(.owned):not(:hover):not(.selected) {
    color: rgba(97, 51, 43, 0.4)
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown .group .entry:hover {
    background-color: #f2e5c6;
    cursor: pointer
}

#combatSimulator .heroAttributes .equipment .equipContainer .dropdown.bag .entry i {
    margin-left: 5px;
    vertical-align: text-bottom
}

#combatSimulator .movement {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2
}

#combatSimulator .movement label {
    margin-left: 15px
}

#combatSimulator .movement label input {
    margin-left: 5px
}

#combatSimulator .role {
    position: relative;
    border: 1px solid #ddc6a2
}

#combatSimulator .role label i {
    vertical-align: text-top
}

#combatSimulator .role .header {
    position: relative;
    z-index: 2;
    padding: 0 5px;
    display: -ms-grid;
    display: grid;
    align-items: center;
    justify-content: space-between
}

#combatSimulator .role .header h2,
#combatSimulator .role .header h3 {
    color: #f2f2f2
}

#combatSimulator .role .header h2 {
    font-size: 1.5em;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row-align: center;
    align-self: center
}

#combatSimulator .role .header .iconButton.clear {
    -ms-grid-column-align: end;
    justify-self: end;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-align: center;
    align-self: center
}

#combatSimulator .role .header .iconButton.clear svg {
    width: 18px;
    height: 18px;
    margin: 3px
}

#combatSimulator .role:not(.reinforcement) h2 {
    text-transform: uppercase
}

#combatSimulator .role .content {
    position: relative;
    background-color: #fff9eb;
    padding: 0 5px
}

#combatSimulator .role.attacker,
#combatSimulator .role.defender {
    padding: 0 5px 5px;
    background-color: #fcf2da
}

#combatSimulator .role.attacker .header,
#combatSimulator .role.defender .header {
    -ms-grid-rows: 36px;
    grid-template-rows: 36px;
    -ms-grid-columns: 60px 1fr 80px 60px;
    grid-template-columns: 60px 1fr 80px 60px;
    margin: -1px -6px 5px
}

#combatSimulator .role.attacker .header .roleIcon,
#combatSimulator .role.defender .header .roleIcon {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row-align: center;
    align-self: center
}

#combatSimulator .role.attacker .header .roleIcon.svgAttack,
#combatSimulator .role.defender .header .roleIcon.svgAttack {
    width: 45px;
    height: 51px
}

#combatSimulator .role.attacker .header .roleIcon.svgDefend,
#combatSimulator .role.defender .header .roleIcon.svgDefend {
    width: 43px;
    height: 48px
}

#combatSimulator .role.attacker .header .villageSelection,
#combatSimulator .role.defender .header .villageSelection {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-row-align: center;
    align-self: center;
    margin-right: 20px
}

#combatSimulator .role.attacker .header .villageSelection>*,
#combatSimulator .role.defender .header .villageSelection>* {
    display: inline-block;
    vertical-align: middle
}

#combatSimulator .role.attacker .header .villageSelection select,
#combatSimulator .role.defender .header .villageSelection select {
    margin-left: 10px;
    max-width: 200px
}

#combatSimulator .role.attacker .header .villageSelection select .empty.hidden,
#combatSimulator .role.defender .header .villageSelection select .empty.hidden {
    display: none
}

#combatSimulator .role.attacker .header .villageSelection .reload svg,
#combatSimulator .role.defender .header .villageSelection .reload svg {
    width: 17px;
    height: 17px;
    margin: 3px
}

#combatSimulator .role.attacker .header .rolePopulation,
#combatSimulator .role.defender .header .rolePopulation {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-row-align: center;
    align-self: center;
    display: inline-block
}

#combatSimulator .role.attacker .header .rolePopulation>*,
#combatSimulator .role.defender .header .rolePopulation>* {
    display: inline-block;
    vertical-align: middle
}

#combatSimulator .role.attacker .header .rolePopulation i,
#combatSimulator .role.defender .header .rolePopulation i {
    margin-left: 5px
}

#combatSimulator .role.attacker .header .rolePopulation input,
#combatSimulator .role.defender .header .rolePopulation input {
    width: 45px;
    font-size: 12px
}

#combatSimulator .role.attacker .header .iconButton.clear,
#combatSimulator .role.defender .header .iconButton.clear {
    -ms-grid-column: 4;
    grid-column-start: 4
}

#combatSimulator .role.attacker .header.you,
#combatSimulator .role.defender .header.you {
    -ms-grid-columns: 65px auto 1fr 80px 60px;
    grid-template-columns: 65px auto 1fr 80px 60px
}

#combatSimulator .role.attacker .header.you .rolePopulation,
#combatSimulator .role.defender .header.you .rolePopulation {
    -ms-grid-column: 4;
    grid-column-start: 4
}

#combatSimulator .role.attacker .header.you .iconButton.clear,
#combatSimulator .role.defender .header.you .iconButton.clear {
    -ms-grid-column: 5;
    grid-column-start: 5
}

#combatSimulator .role.attacker .header.you~.content .troopIcons i.unit,
#combatSimulator .role.defender .header.you~.content .troopIcons i.unit {
    cursor: pointer
}

#combatSimulator .role.attacker .content,
#combatSimulator .role.defender .content {
    border: 1px solid #dfc495;
    box-shadow: 0 0 10px 2px #dfc495
}

#combatSimulator .role.attacker .header {
    background-color: #a33f41
}

#combatSimulator .role.defender .header,
#combatSimulator .role.reinforcement .header {
    background-color: #8cb1c8
}

#combatSimulator .role.reinforcement {
    margin: -1px 5px 0
}

#combatSimulator .role.reinforcement .header {
    -ms-grid-rows: 28px;
    grid-template-rows: 28px;
    -ms-grid-columns: 45px auto 30px 1fr;
    grid-template-columns: 45px auto 30px 1fr;
    margin: -1px 0 0
}

#combatSimulator .role.reinforcement .header .iconButton.delete {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 3;
    grid-column-start: 3;
    margin-right: 20px
}

#combatSimulator .role.reinforcement .header .iconButton.delete svg {
    width: 16px;
    height: 16px;
    margin: 4px
}

#combatSimulator .role.reinforcement .header .iconButton.clear {
    -ms-grid-column: 4;
    grid-column-start: 4
}

#combatSimulator .tribeSelection {
    position: relative;
    z-index: 1;
    top: 1px
}

#combatSimulator .tribeSelection .tribeWrapper {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end
}

#combatSimulator .tribeSelection .tribeWrapper div {
    position: relative;
    text-align: center;
    display: inline-block
}

#combatSimulator .tribeSelection .tribeWrapper div:hover {
    cursor: pointer
}

#combatSimulator .tribeSelection.attack .tribeWrapper,
#combatSimulator .tribeSelection.defense .tribeWrapper {
    height: 63px
}

#combatSimulator .tribeSelection.attack .tribeWrapper svg,
#combatSimulator .tribeSelection.defense .tribeWrapper svg {
    display: none
}

#combatSimulator .tribeSelection.attack .tribeWrapper div,
#combatSimulator .tribeSelection.defense .tribeWrapper div {
    width: 77px;
    padding: 0 10px
}

#combatSimulator .tribeSelection.attack .tribeWrapper div:before,
#combatSimulator .tribeSelection.defense .tribeWrapper div:before {
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    right: 0;
    height: 0;
    background-image: linear-gradient(to top, rgba(223, 196, 149, 0.8), rgba(223, 196, 149, 0));
    transition: all .3s ease-out
}

#combatSimulator .tribeSelection.attack .tribeWrapper div i,
#combatSimulator .tribeSelection.defense .tribeWrapper div i {
    position: relative
}

#combatSimulator .tribeSelection.attack .tribeWrapper div.active,
#combatSimulator .tribeSelection.defense .tribeWrapper div.active {
    cursor: default
}

#combatSimulator .tribeSelection.attack .tribeWrapper div.inactive,
#combatSimulator .tribeSelection.defense .tribeWrapper div.inactive {
    cursor: pointer
}

#combatSimulator .tribeSelection.attack .tribeWrapper div.inactive:hover:before,
#combatSimulator .tribeSelection.defense .tribeWrapper div.inactive:hover:before {
    height: 63px
}

#combatSimulator .tribeSelection.reinforcement {
    position: relative;
    margin: -1px 5px 0;
    border: 1px solid #dfc495;
    border-top-color: #e8e4dc;
    background-color: #fcf2da
}

.roleReinforcement~#combatSimulator .tribeSelection.reinforcement {
    margin-top: -2px
}

#combatSimulator .tribeSelection.reinforcement .tribeWrapper {
    width: 95%;
    margin: 0 auto
}

#combatSimulator .tribeSelection.reinforcement .tribeWrapper div {
    padding: 0 10px;
    color: #9b9999
}

#combatSimulator .tribeSelection.reinforcement .tribeWrapper div svg {
    position: absolute;
    top: 1px;
    right: 11px;
    opacity: 1;
    width: 35px;
    height: 35px;
    transition: all .1s
}

#combatSimulator .tribeSelection.reinforcement .tribeWrapper div svg circle {
    fill: #c3dff0
}

#combatSimulator .tribeSelection.reinforcement .tribeWrapper div svg line {
    stroke-width: 1;
    stroke: #fff
}

#combatSimulator .tribeSelection.reinforcement .tribeWrapper div:not(:hover) svg {
    opacity: 0
}

#combatSimulator .bonus~.troops,
#combatSimulator .movement~.troops {
    border-top: 1px solid #e8e4dc
}

#combatSimulator .troops {
    width: 100%;
    padding: 5px 0 10px
}

#combatSimulator .troops table th,
#combatSimulator .troops table td {
    padding: 3px 2px
}

#combatSimulator .troops table th {
    text-align: right
}

#combatSimulator .troops table td {
    text-align: center
}

#combatSimulator .troops input {
    vertical-align: middle
}

#combatSimulator .troops input[type=text] {
    width: 100%
}

#combatSimulator .troops input.unit9,
#combatSimulator .troops input.unit10 {
    width: 25px
}

#combatSimulator .troops .hero.hidden {
    visibility: hidden
}

#combatSimulator .troops td.celebration {
    text-align: right
}

#combatSimulator .troops td.celebration i {
    vertical-align: middle;
    margin-left: 3px
}

#combatSimulator .troops .cataLevels {
    position: relative;
    width: 100%;
    height: 0
}

#combatSimulator .troops .cataLevels.hidden {
    visibility: hidden
}

#combatSimulator .troops .cataLevels:before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(50% - 1px);
    width: 1px;
    background-color: #e8e4dc;
    height: 15px
}

#combatSimulator .troops .cataLevels .cata1,
#combatSimulator .troops .cataLevels .cata2 {
    position: absolute;
    top: 4px;
    background-color: #fff9eb
}

#combatSimulator .troops .cataLevels .cata1 {
    right: -23px
}

#combatSimulator .troops .cataLevels .cata1 input {
    margin-right: 2px
}

#combatSimulator .troops .cataLevels .cata2 {
    left: -23px
}

#combatSimulator .troops .cataLevels .cata2 input {
    margin-left: 2px
}

#combatSimulator .troops .cataLevels i.target {
    width: 14px;
    height: 14px;
    position: relative;
    top: 4px
}

#combatSimulator .troops .cataLevels input {
    width: 23px
}

#combatSimulator .troops .cataLevels input:disabled {
    cursor: not-allowed
}

#combatSimulator .results {
    padding-top: 35px;
    position: relative
}

#combatSimulator .results #applyLosses {
    float: left;
    margin-top: 15px;
    padding-left: 36px
}

#combatSimulator .results #applyLosses svg.svgArrowShort {
    width: 16px;
    height: 12px;
    fill: #544e44;
    display: inline-block;
    position: absolute;
    top: 6px;
    left: 17px
}

#combatSimulator .results .separator {
    position: relative;
    text-align: center;
    margin-bottom: 35px;
    color: #9b9999
}

#combatSimulator .results .separator:before {
    content: "";
    position: absolute;
    right: 0;
    top: 7px;
    border-bottom: 1px solid #9b9999
}

#combatSimulator .results .separator.long:before {
    left: 0
}

#combatSimulator .results .separator.short:before {
    left: 35px
}

#combatSimulator .results .separator .title {
    position: relative;
    display: inline-block;
    background-color: #fff;
    padding: 0 5px;
    font-size: 1.2rem
}

#combatSimulator .results .separator .iconButton {
    position: absolute;
    left: 0;
    top: -6px
}

#combatSimulator .results .separator .iconButton svg {
    width: 15px;
    height: 15px;
    fill: #fff;
    margin: 5px
}

#combatSimulator .results .separator .iconButton svg.collapse {
    transform: scaleX(-1)
}

.rtl #combatSimulator .results .separator .iconButton svg.collapse {
    transform: scaleX(1)
}

#combatSimulator .results .separator .iconButton:after {
    content: "";
    position: absolute;
    right: -6px;
    width: 5px;
    height: 100%;
    background-color: #fff
}

#combatSimulator .results .result {
    background-color: #fff9eb;
    border: 1px solid #dfc495
}

#combatSimulator .results .result .header {
    position: relative;
    z-index: 3;
    display: -ms-grid;
    display: grid;
    align-items: center;
    justify-content: space-between
}

#combatSimulator .results .result .header h2 {
    color: #f2f2f2
}

#combatSimulator .results .result .content {
    min-width: 100%;
    position: relative;
    display: inline-block
}

#combatSimulator .results .result .content table {
    width: 100%;
    border-collapse: collapse
}

#combatSimulator .results .result .content table th,
#combatSimulator .results .result .content table td {
    box-sizing: content-box;
    font-size: 14px;
    padding: 5px 3px;
    white-space: nowrap
}

#combatSimulator .results .result .content table th {
    width: 16px
}

#combatSimulator .results .result .content table td {
    text-align: left;
    width: 42px
}

#combatSimulator .results .result .content table td.u9,
#combatSimulator .results .result .content table td.u10 {
    width: 35px
}

#combatSimulator .results .result .content table td.uhero {
    width: auto
}

#combatSimulator .results .result .content table .troopsLoss td,
#combatSimulator .results .result .content table .troopsCaptured td,
#combatSimulator .results .result .content table .troopsWounded td {
    color: #d40000
}

#combatSimulator .results .result .content table .troopsResult {
    background-color: #fcf2da;
    color: #228b22
}

#combatSimulator .results .result .content table .troopsRevived {
    color: #228b22
}

#combatSimulator .results .result .content table .combatReportLine td {
    text-align: right
}

#combatSimulator .results .result .content table .combatReportLine td span {
    white-space: normal;
    display: inline-block;
    max-width: 95%;
    margin-right: 4px
}

#combatSimulator .results .result .content table .combatReportLine i {
    margin-left: 5px
}

#combatSimulator .results .result .content table .combatReportLine i.manual {
    cursor: pointer
}

#combatSimulator .results .result .content table .combatReportLine .negative {
    color: #d40000
}

#combatSimulator .results .result .content table .additionalInfo td {
    text-align: right
}

#combatSimulator .results .result .content table .additionalInfo td i {
    vertical-align: text-bottom;
    margin-left: 5px
}

#combatSimulator .results .result .content table .additionalInfo td span {
    font-weight: bold
}

#combatSimulator .results .result .content table .additionalInfo td span.negative {
    color: #d40000
}

#combatSimulator .results .result .content.extended {
    position: relative;
    min-width: 650px;
    background-color: #fff9eb;
    border: 1px solid #9b9999;
    z-index: 36;
    right: 50%;
    transform: translateX(50%)
}

@media screen and (max-width:620px) {
    .mobileOptimized #combatSimulator .results .result .content.extended {
        right: 0;
        transform: none;
        min-width: 0;
        max-width: 100%;
        overflow: auto;
        border: 0
    }
}

#combatSimulator .results .result .content.extended table td {
    width: 63px
}

#combatSimulator .results .result .content.extended table td.u9,
#combatSimulator .results .result .content.extended table td.u10 {
    width: 45px
}

#combatSimulator .results .result.attack .header,
#combatSimulator .results .result.defense .header {
    -ms-grid-columns: 100px 1fr 165px;
    grid-template-columns: 100px 1fr 165px;
    -ms-grid-rows: 36px;
    grid-template-rows: 36px;
    z-index: 35
}

#combatSimulator .results .result.attack .header .tribeIcon,
#combatSimulator .results .result.defense .header .tribeIcon {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 1;
    grid-column-start: 1;
    position: absolute;
    right: 0;
    bottom: 0
}

#combatSimulator .results .result.attack .header .roleIcon,
#combatSimulator .results .result.defense .header .roleIcon {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 1;
    grid-column-start: 1;
    position: absolute;
    bottom: -4px;
    right: 45px
}

#combatSimulator .results .result.attack .header .roleIcon.svgAttack,
#combatSimulator .results .result.defense .header .roleIcon.svgAttack {
    width: 40px;
    height: 46px
}

#combatSimulator .results .result.attack .header .roleIcon.svgDefend,
#combatSimulator .results .result.defense .header .roleIcon.svgDefend {
    width: 40px;
    height: 45px
}

#combatSimulator .results .result.attack .header h2,
#combatSimulator .results .result.defense .header h2 {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row-align: center;
    align-self: center;
    text-transform: uppercase
}

#combatSimulator .results .result.attack .header .outcome,
#combatSimulator .results .result.defense .header .outcome {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-row-align: center;
    align-self: center
}

#combatSimulator .results .result.attack .header .outcome .arrowWrapper,
#combatSimulator .results .result.defense .header .outcome .arrowWrapper {
    position: relative;
    width: 39px;
    height: 36px;
    overflow: hidden
}

#combatSimulator .results .result.attack .header .outcome .arrowWrapper .outcomeArrow,
#combatSimulator .results .result.defense .header .outcome .arrowWrapper .outcomeArrow {
    width: 40px;
    height: 38px;
    position: relative;
    top: -1px;
    right: -2px;
    stroke: rgba(0, 0, 0, 0.2);
    stroke-width: .75
}

.rtl #combatSimulator .results .result.attack .header .outcome .arrowWrapper .outcomeArrow,
.rtl #combatSimulator .results .result.defense .header .outcome .arrowWrapper .outcomeArrow {
    transform: scale(-1, 1)
}

#combatSimulator .results .result.attack .header .outcome .outcomeIcons,
#combatSimulator .results .result.defense .header .outcome .outcomeIcons {
    position: absolute;
    left: 10px;
    bottom: -6px
}

#combatSimulator .results .result.attack .header .outcome .outcomeIcons svg,
#combatSimulator .results .result.defense .header .outcome .outcomeIcons svg {
    position: absolute;
    bottom: 0
}

#combatSimulator .results .result.attack .header .outcome .outcomeIcons .svgAttack,
#combatSimulator .results .result.attack .header .outcome .outcomeIcons .svgAttackLost,
#combatSimulator .results .result.defense .header .outcome .outcomeIcons .svgAttack,
#combatSimulator .results .result.defense .header .outcome .outcomeIcons .svgAttackLost {
    left: 0;
    width: 50px;
    height: 60px
}

#combatSimulator .results .result.attack .header .outcome .outcomeIcons .svgDefend,
#combatSimulator .results .result.attack .header .outcome .outcomeIcons .svgDefendLost,
#combatSimulator .results .result.defense .header .outcome .outcomeIcons .svgDefend,
#combatSimulator .results .result.defense .header .outcome .outcomeIcons .svgDefendLost {
    left: 0;
    width: 48px;
    height: 60px
}

#combatSimulator .results .result.attack .header .outcome .outcomeIcons .svgSkull,
#combatSimulator .results .result.defense .header .outcome .outcomeIcons .svgSkull {
    left: -7px;
    width: 28px;
    height: 35px
}

#combatSimulator .results .result.attack .content,
#combatSimulator .results .result.defense .content {
    padding: 5px 10px
}

#combatSimulator .results .result.attack .header {
    background-color: #a33f41
}

#combatSimulator .results .result.attack .header .outcome {
    background-color: #7e3132
}

#combatSimulator .results .result.attack .header .outcome svg {
    fill: #a33f41
}

#combatSimulator .results .result.defense {
    margin-top: 25px
}

#combatSimulator .results .result.defense .header,
#combatSimulator .results .result.reinforcement .header {
    background-color: #8cb1c8
}

#combatSimulator .results .result.defense .header .outcome,
#combatSimulator .results .result.reinforcement .header .outcome {
    background-color: #6a9ab8
}

#combatSimulator .results .result.defense .header .outcome svg,
#combatSimulator .results .result.reinforcement .header .outcome svg {
    fill: #8cb1c8
}

#combatSimulator .results .result.reinforcement {
    width: calc(100% - 10px);
    margin: -1px 5px 0
}

#combatSimulator .results .result.reinforcement .header {
    -ms-grid-columns: 70px 1fr;
    grid-template-columns: 70px 1fr;
    -ms-grid-rows: 26px;
    grid-template-rows: 26px
}

#combatSimulator .results .result.reinforcement .header i.tribeIcon {
    position: absolute;
    bottom: -5px;
    right: 5px
}

#combatSimulator .results .result.reinforcement .header .extendView {
    position: absolute;
    left: -25px;
    top: 8px
}

#combatSimulator .results .result.reinforcement .content {
    padding: 5px
}

#combatSimulator .results .result.reinforcement .content.tribe4 .content td.uhero,
#combatSimulator .results .result.reinforcement .content.tribe5 .content td.uhero {
    visibility: hidden
}

#combatSimulator .results .combatStatistics {
    margin-top: 25px;
    border: 1px solid #ddc6a2
}

#combatSimulator .results .combatStatistics .header {
    height: 36px;
    line-height: 36px;
    background-color: #778243;
    border-bottom: 1px solid #ddc6a2
}

#combatSimulator .results .combatStatistics .header h2 {
    color: #f2f2f2;
    text-transform: uppercase;
    font-size: 1.5em;
    margin: 0 10px
}

#combatSimulator .results .combatStatistics table {
    border-collapse: collapse;
    background-color: #fff9eb
}

#combatSimulator .results .combatStatistics table th,
#combatSimulator .results .combatStatistics table td {
    line-height: 24px;
    padding: 2px 5px
}

#combatSimulator .results .combatStatistics table th:nth-child(2),
#combatSimulator .results .combatStatistics table td:nth-child(2) {
    border-left: 1px solid #ddc6a2;
    border-right: 1px solid #ddc6a2
}

#combatSimulator .results .combatStatistics table th {
    text-align: right
}

#combatSimulator .results .combatStatistics table thead th {
    font-weight: bold;
    background-color: #fcf2da
}

#combatSimulator .results .combatStatistics table tbody tr:nth-child(even) th,
#combatSimulator .results .combatStatistics table tbody tr:nth-child(even) td {
    background-color: #fcf2da
}

#combatSimulator .results .combatStatistics table tbody td {
    width: 30%
}

#reactDialogWrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 500;
    pointer-events: none
}

#reactDialogWrapper .reactDialog {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    visibility: hidden;
    opacity: 0;
    transition-duration: 500ms;
    text-align: center;
    overflow: auto;
    pointer-events: auto
}

#reactDialogWrapper .reactDialog.visible {
    opacity: 1;
    visibility: visible
}

#reactDialogWrapper .reactDialog:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

#reactDialogWrapper .reactDialog .dialogBody {
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    width: auto;
    min-width: 600px;
    max-width: 95%;
    background-color: #e8e4dc;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    border-radius: 3px;
    position: relative;
    transition-duration: 500ms;
    transform: scale(0.5);
    opacity: 0;
    margin: 2.5% auto;
    padding: 20px
}

#reactDialogWrapper .reactDialog .dialogBody .loading {
    width: 16px;
    height: 16px;
    background-image: url('../../img_rtl/map/loading.gif');
    margin: 0 auto
}

#reactDialogWrapper .reactDialog.visible .dialogBody {
    transform: scale(1);
    opacity: 1
}

#statisticsV2 i.gameworld_large {
    background-image: url('../../img_rtl/scenes/Statistics/general/gameworld_large.png');
    width: 64px;
    height: 64px
}

#statisticsV2 i.alliance_medium {
    background-image: url('../../img_rtl/scenes/Statistics/general/alliance_medium.png');
    width: 20px;
    height: 24px
}

#statisticsV2 i.alliance_large {
    background-image: url('../../img_rtl/scenes/Statistics/general/alliance_large.png');
    width: 52px;
    height: 64px
}

#statisticsV2 table td {
    text-align: right
}

#statisticsV2 h4 {
    padding: 0 46px 0 0;
    background-color: #c4e18a;
    border: solid 1px #587c1e;
    height: 30px;
    line-height: 28px;
    margin-bottom: 30px;
    position: relative
}

#statisticsV2 h4 i {
    position: absolute;
    top: -15px;
    right: -15px
}

#statisticsV2 .openedClosedSwitch {
    width: 17px;
    height: 17px;
    position: absolute;
    z-index: 1;
    padding: 0;
    left: 8px;
    margin-top: 6px
}

#statisticsV2 .chartWithLegend {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 43% 57%;
    grid-template-columns: 43% 57%
}

#statisticsV2 .chartWithLegend .legendContainer {
    margin-bottom: 30px;
    -ms-grid-column: 1;
    grid-column-start: 1
}

#statisticsV2 .chartWithLegend .legendContainer .legendTabs {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
    width: 98%
}

#statisticsV2 .chartWithLegend .legendContainer .legendTabs .tab {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 1;
    grid-column-start: 1;
    position: relative;
    top: 1px;
    z-index: 2;
    border: 1px solid #d8d7d8;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    padding: 10px;
    color: #333;
    font-weight: normal
}

#statisticsV2 .chartWithLegend .legendContainer .legendTabs .tab:last-of-type {
    margin-right: 5px;
    -ms-grid-column: 2;
    grid-column-start: 2
}

#statisticsV2 .chartWithLegend .legendContainer .legendTabs .tab.active {
    background-color: #fbfafb;
    z-index: 3
}

#statisticsV2 .chartWithLegend .legendContainer .legendTabs .tab:not(.active) {
    background-color: #d2d2d1;
    z-index: 1;
    cursor: pointer;
    transition-duration: 250ms
}

#statisticsV2 .chartWithLegend .legendContainer .legendTabs .tab:not(.active):hover {
    background-color: #e7e7e7
}

#statisticsV2 .chartWithLegend .legendContainer .legendTabs .tab:not(.active):active {
    background-color: #f2f2f2
}

#statisticsV2 .chartWithLegend .legendContainer .legendTabs .tab i {
    vertical-align: bottom
}

#statisticsV2 .chartWithLegend .legendContainer .simpleLegend {
    position: relative;
    z-index: 2;
    width: 98%;
    min-height: 190px;
    background-color: #fbfafb;
    border: solid 1px #d8d7d8;
    border-radius: 4px;
    padding: 10px 5px
}

#statisticsV2 .chartWithLegend .legendContainer .simpleLegend table thead th {
    text-align: right;
    padding-right: 10px
}

#statisticsV2 .chartWithLegend .legendContainer .legendTabs~.simpleLegend {
    border-radius: 0 0 4px 4px
}

#statisticsV2 .chartWithLegend.chartIncluded {
    -ms-grid-columns: 100%;
    grid-template-columns: 100%
}

#statisticsV2 .chartWithLegend.chartIncluded .legendTabs {
    display: flex
}

#statisticsV2 .chartWithLegend.chartIncluded .legendTabs .tab {
    display: inline-block;
    flex-grow: 0;
    flex-basis: 23%
}

#statisticsV2 .chartWithLegend .chartContainer {
    -ms-grid-column: 2;
    grid-column-start: 2
}

#statisticsV2 .chartWithLegend .chartContainer .chartTitle {
    position: absolute;
    width: 100%;
    text-align: center;
    padding-top: 6px
}

#statisticsV2 .chartWithLegend .chartContainer div {
    position: relative
}

#statisticsV2 .chartWithLegend .chartContainer p {
    margin: 5px 0
}

#statisticsV2 .recharts-wrapper svg {
    overflow: visible
}

.ie #statisticsV2 .recharts-wrapper svg {
    overflow: hidden
}

#statisticsV2 .recharts-wrapper .recharts-tooltip-wrapper {
    z-index: 205 !important
}

#statisticsV2 .recharts-wrapper .recharts-tooltip-wrapper .recharts-default-tooltip {
    background-color: rgba(0, 0, 0, 0.8) !important;
    border: none !important;
    border-radius: 4px;
    padding: 4px 9px 4px 9px !important
}

#statisticsV2 .recharts-wrapper .recharts-tooltip-wrapper .recharts-default-tooltip li {
    color: #ddd !important;
    padding: 0 !important;
    font-size: 12px
}

#statisticsV2 .recharts-wrapper .recharts-tooltip-wrapper .recharts-default-tooltip .recharts-tooltip-item-name,
#statisticsV2 .recharts-wrapper .recharts-tooltip-wrapper .recharts-default-tooltip .recharts-tooltip-item-separator {
    display: none
}

.rtl #statisticsV2 .recharts-wrapper .recharts-tooltip-wrapper {
    right: 300px
}

.rtl #statisticsV2 .raidChart .recharts-wrapper .recharts-tooltip-wrapper,
.rtl #statisticsV2 .tradeChart .recharts-wrapper .recharts-tooltip-wrapper {
    right: 200px
}

#statisticsV2 #serverProgression {
    margin-bottom: 30px
}

#statisticsV2 #serverProgression h4 {
    margin: 0;
    z-index: 2
}

#statisticsV2 #serverProgression h4 i.serverProgression {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/serverProgressionTitle_large.png');
    width: 54px;
    height: 54px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine {
    margin-bottom: 100px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine {
    position: relative;
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/timelineBackground.png');
    width: 554px;
    height: 136px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .serverNumbers {
    position: absolute;
    top: 5px;
    left: 5px;
    text-align: right
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .serverNumbers .counter {
    position: relative;
    text-align: center;
    display: inline-block
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .serverNumbers .counter i {
    position: absolute
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .serverNumbers .counter.activatedPlayers {
    min-width: 30px;
    margin-left: 10px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .serverNumbers .counter.activatedPlayers i {
    right: calc(50% - (30px / 2))
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .serverNumbers .counter.serverTime {
    min-width: 53px;
    margin-left: 15px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .serverNumbers .counter.serverTime i {
    right: calc(50% - (53px / 2));
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/serverAge_large.png');
    width: 53px;
    height: 54px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .serverNumbers .counter span {
    position: relative;
    z-index: 2;
    line-height: 64px;
    font-weight: bold;
    font-size: 25px;
    color: #f2f2f2;
    text-shadow: 1px 0 3px #000, 1px 1px 3px #000, 0 1px 3px #000, -1px 1px 3px #000, -1px 0 3px #000, -1px -1px 3px #000, 0 -1px 3px #000, 1px -1px 3px #000
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine {
    position: absolute;
    bottom: -65px;
    left: -1px;
    right: -1px;
    display: -ms-grid;
    display: grid
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine:before,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine:after {
    content: "";
    background-size: auto 14px;
    height: 16px;
    position: absolute;
    top: 44px;
    right: 2px;
    left: 2px;
    background-repeat: repeat-x;
    border: 1px solid #333
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine:before {
    z-index: 1;
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/timelineBarLocked.png')
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine:after {
    z-index: 2;
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/timelineBarUnlocked.png')
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine.itemCount3 {
    -ms-grid-columns: 64px 1fr 64px 1fr 64px;
    grid-template-columns: 64px 1fr 64px 1fr 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine.itemCount3.unlocked1:after {
    display: none
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine.itemCount3.unlocked2:after {
    left: 50%
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine.itemCount6 {
    -ms-grid-columns: 64px 1fr 64px 1fr 64px 1fr 64px 1fr 64px 1fr 64px;
    grid-template-columns: 64px 1fr 64px 1fr 64px 1fr 64px 1fr 64px 1fr 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine.itemCount6.unlocked1:after {
    display: none
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine.itemCount6.unlocked2:after {
    left: 80%
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine.itemCount6.unlocked3:after {
    left: 60%
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine.itemCount6.unlocked4:after {
    left: 40%
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine.itemCount6.unlocked5:after {
    left: 20%
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step {
    position: relative;
    z-index: 3;
    text-align: center;
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-columns: 64px;
    grid-template-columns: 64px;
    -ms-grid-rows: 95px 20px;
    grid-template-rows: 95px 20px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:nth-of-type(1) {
    -ms-grid-column: 1;
    grid-column-start: 1
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:nth-of-type(2) {
    -ms-grid-column: 3;
    grid-column-start: 3
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:nth-of-type(3) {
    -ms-grid-column: 5;
    grid-column-start: 5
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:nth-of-type(4) {
    -ms-grid-column: 7;
    grid-column-start: 7
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:nth-of-type(5) {
    -ms-grid-column: 9;
    grid-column-start: 9
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:nth-of-type(6) {
    -ms-grid-column: 11;
    grid-column-start: 11
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i {
    -ms-grid-row: 1;
    grid-row-start: 1;
    position: relative
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step .description {
    -ms-grid-row: 2;
    grid-row-start: 2;
    width: 80px;
    -ms-grid-row-align: self-end;
    align-self: self-end;
    -ms-grid-column-align: center;
    justify-self: center
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step .description .description,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step .description #militaryStrengthRank .villageList .name,
#statisticsV2 #militaryStrengthRank .villageList #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step .description .name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    direction: rtl
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.secondVillage,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.fourthVillage {
    right: -2px;
    top: 19px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.secondVillage .tribe1,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.secondVillage .tribe6,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.fourthVillage .tribe1,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.fourthVillage .tribe6 {
    right: 0
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.artifacts {
    top: 19px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.constructionPlans {
    top: 19px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.firstWWLevelOne {
    top: 18px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.firstWWLevelOne.tribe1 {
    top: -1px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.firstWWLevelOne.tribe2 {
    top: 12px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.firstWWLevelOne.tribe3 {
    top: 8px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.firstWWLevelOne.tribe6,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.firstWWLevelOne.tribe7 {
    top: 10px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step i.serverEnd {
    right: -2px;
    top: 19px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.achieved) i.start,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.unlocked) i.start {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/serverStartLocked_large.png');
    width: 87px;
    height: 95px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.achieved) i.secondVillage,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.achieved) i.fourthVillage,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.unlocked) i.secondVillage,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.unlocked) i.fourthVillage {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/secondVillageLocked_large.png');
    width: 69px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.achieved) i.artifacts,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.unlocked) i.artifacts {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/artifactsLocked_large.png');
    width: 64px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.achieved) i.constructionPlans,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.unlocked) i.constructionPlans {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/constructionPlansLocked_large.png');
    width: 64px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.achieved) i.firstWWLevelOne,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.unlocked) i.firstWWLevelOne {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/firstWWLocked_large.png');
    width: 64px;
    height: 65px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.achieved) i.serverEnd,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step:not(.unlocked) i.serverEnd {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/serverEndLocked_large.png');
    width: 78px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.start,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.start {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/serverStart_large.png');
    width: 87px;
    height: 95px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.secondVillage,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.fourthVillage,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.secondVillage,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.fourthVillage {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/secondVillage_large.png');
    width: 69px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.secondVillage.tribe1,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.fourthVillage.tribe1,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.secondVillage.tribe1,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.fourthVillage.tribe1 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/secondVillage_tribe1_large.png');
    width: 64px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.secondVillage.tribe2,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.fourthVillage.tribe2,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.secondVillage.tribe2,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.fourthVillage.tribe2 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/secondVillage_tribe2_large.png');
    width: 67px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.secondVillage.tribe3,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.fourthVillage.tribe3,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.secondVillage.tribe3,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.fourthVillage.tribe3 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/secondVillage_tribe3_large.png');
    width: 68px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.secondVillage.tribe6,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.fourthVillage.tribe6,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.secondVillage.tribe6,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.fourthVillage.tribe6 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/secondVillage_tribe6_large.png');
    width: 65px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.secondVillage.tribe7,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.fourthVillage.tribe7,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.secondVillage.tribe7,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.fourthVillage.tribe7 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/secondVillage_tribe7_large.png');
    width: 68px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.artifacts,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.artifacts {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/artifacts_large.png');
    width: 64px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.artifacts.tribe1,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.artifacts.tribe1 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/artifacts_tribe1_large.png');
    width: 64px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.artifacts.tribe2,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.artifacts.tribe2 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/artifacts_tribe2_large.png');
    width: 64px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.artifacts.tribe3,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.artifacts.tribe3 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/artifacts_tribe3_large.png');
    width: 64px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.artifacts.tribe6,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.artifacts.tribe6 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/artifacts_tribe6_large.png');
    width: 64px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.artifacts.tribe7,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.artifacts.tribe7 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/artifacts_tribe7_large.png');
    width: 64px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.constructionPlans,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.constructionPlans {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/constructionPlans_large.png');
    width: 64px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.firstWWLevelOne,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.firstWWLevelOne {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/firstWW_large.png');
    width: 64px;
    height: 65px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.firstWWLevelOne.tribe1,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.firstWWLevelOne.tribe1 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/firstWW_tribe1_large.png');
    width: 64px;
    height: 84px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.firstWWLevelOne.tribe2,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.firstWWLevelOne.tribe2 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/firstWW_tribe2_large.png');
    width: 64px;
    height: 71px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.firstWWLevelOne.tribe3,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.firstWWLevelOne.tribe3 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/firstWW_tribe3_large.png');
    width: 64px;
    height: 75px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.firstWWLevelOne.tribe6,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.firstWWLevelOne.tribe6 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/firstWW_tribe6_large.png');
    width: 64px;
    height: 73px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.firstWWLevelOne.tribe7,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.firstWWLevelOne.tribe7 {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/firstWW_tribe7_large.png');
    width: 64px;
    height: 73px
}

#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.achieved i.serverEnd,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step.unlocked i.serverEnd {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/timeline/serverEnd_large.png');
    width: 78px;
    height: 64px
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution .chartContainer {
    margin-top: -40px
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution i.distribution {
    background-image: url('../../img_rtl/scenes/Statistics/serverProgression/tribeDistribution_medium.png');
    width: 21px;
    height: 22px;
    vertical-align: middle
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution .simpleLegend table {
    margin: 0 auto;
    width: calc(100% - 5px)
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution .simpleLegend table thead td {
    padding-bottom: 15px;
    padding-right: 0
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution .simpleLegend table tbody tr td {
    padding: 0
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution .simpleLegend table tbody tr td:first-of-type img {
    float: none
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution .simpleLegend table tbody tr td:last-of-type {
    text-align: left;
    vertical-align: bottom
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution .simpleLegend table tbody tr td:last-of-type span {
    display: inline-block;
    position: relative;
    padding-left: 15px
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution .simpleLegend table tbody tr td:last-of-type span:after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    left: 0;
    bottom: calc(50% - 5px);
    position: absolute
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution .simpleLegend table tbody tr td:last-of-type span.v1:after {
    background-color: #96323d
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution .simpleLegend table tbody tr td:last-of-type span.v2:after {
    background-color: #428291
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution .simpleLegend table tbody tr td:last-of-type span.v3:after {
    background-color: #de7e1b
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution .simpleLegend table tbody tr td:last-of-type span.v6:after {
    background-color: #3e559a
}

#statisticsV2 #serverProgression #serverProgressionTribeDistribution .simpleLegend table tbody tr td:last-of-type span.v7:after {
    background-color: #674876
}

#statisticsV2 #populationRank {
    margin-bottom: 30px;
    position: relative
}

#statisticsV2 #populationRank h4 i.populationRank {
    background-image: url('../../img_rtl/scenes/Statistics/populationRank/populationRankTitle_large.png');
    width: 54px;
    height: 54px
}

#statisticsV2 #populationRank .ServerAllianceRank {
    margin-top: 24px
}

#statisticsV2 #populationRank .recharts-wrapper {
    margin-top: -4px
}

.ltr #statisticsV2 #populationRank .recharts-wrapper {
    margin-right: -28px
}

.rtl #statisticsV2 #populationRank .recharts-wrapper {
    margin-right: 10px
}

#statisticsV2 .ServerAllianceRank {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
    height: 100px
}

#statisticsV2 .ServerAllianceRank .typeWrapper {
    position: relative;
    self-align: end
}

#statisticsV2 .ServerAllianceRank .typeWrapper:first-of-type {
    -ms-grid-column: 1;
    grid-column-start: 1
}

#statisticsV2 .ServerAllianceRank .typeWrapper:last-of-type {
    -ms-grid-column: 2;
    grid-column-start: 2
}

#statisticsV2 .ServerAllianceRank .buttonWrapper {
    text-align: center;
    position: relative;
    z-index: 1
}

#statisticsV2 .ServerAllianceRank .buttonWrapper>div {
    margin-bottom: 10px;
    height: 2em
}

#statisticsV2 .ServerAllianceRank .rankDisplay {
    width: 100%;
    height: 64px;
    line-height: 64px;
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    position: absolute;
    bottom: 0;
    z-index: 2;
    color: #f2f2f2;
    text-shadow: 1px 0 3px #000, 1px 1px 3px #000, 0 1px 3px #000, -1px 1px 3px #000, -1px 0 3px #000, -1px -1px 3px #000, 0 -1px 3px #000, 1px -1px 3px #000
}

#statisticsV2 .ServerAllianceRank .disabled {
    opacity: .5
}

#statisticsV2 .ServerAllianceRank i {
    position: relative;
    z-index: 2
}

#statisticsV2 #militaryStrengthRank {
    position: relative
}

#statisticsV2 #militaryStrengthRank h4 i.militaryStrengthRank {
    background-image: url('../../img_rtl/scenes/Statistics/militaryStrengthRank/militaryStrengthRankTitle_large.png');
    width: 54px;
    height: 54px
}

#statisticsV2 #militaryStrengthRank .ServerAllianceRank {
    border-bottom: 1px solid #d8d7d8;
    padding-bottom: 20px;
    margin-bottom: 30px;
    margin-top: 14px;
    height: calc(100px + 20px)
}

#statisticsV2 #militaryStrengthRank .villageList td {
    padding: 1px 3px;
    line-height: 26px
}

#statisticsV2 #militaryStrengthRank .villageList .rank {
    width: 1%
}

#statisticsV2 #militaryStrengthRank .villageList .name {
    max-width: 1px
}

#statisticsV2 #militaryStrengthRank .villageList .name #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step .description,
#statisticsV2 #serverProgression #serverProgressionTimeLine #timeLine .timeLine .step #militaryStrengthRank .villageList .name .description,
#statisticsV2 #militaryStrengthRank .villageList .name .name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    direction: rtl
}

#statisticsV2 #militaryStrengthRank .villageList .strength {
    text-align: left;
    width: 1%
}

#statisticsV2 #militaryStrengthRank .chartWithLegend .chartContainer .strengthRankChart .worse,
#statisticsV2 #militaryStrengthRank .chartWithLegend .chartContainer .strengthRankChart .better {
    width: 75px;
    min-height: 100%;
    position: absolute;
    padding-top: 115px;
    z-index: 202
}

#statisticsV2 #militaryStrengthRank .chartWithLegend .chartContainer .strengthRankChart .worse.better,
#statisticsV2 #militaryStrengthRank .chartWithLegend .chartContainer .strengthRankChart .better.better {
    left: 12px
}

#statisticsV2 #militaryStrengthRank .chartWithLegend .chartContainer .strengthRankChart .worse.worse,
#statisticsV2 #militaryStrengthRank .chartWithLegend .chartContainer .strengthRankChart .better.worse {
    right: 0
}

#statisticsV2 #militaryStrengthRank .chartWithLegend .chartContainer .chartDetails {
    top: -20px;
    border-radius: 4px;
    padding: 0 10px;
    text-align: center
}

#statisticsV2 #militaryStrengthRank .chartWithLegend .chartContainer .chartDetails div:not(.inlineIcon) {
    margin: 10px 0
}

#statisticsV2 #militaryStrengthRank .chartWithLegend .chartContainer .chartDetails .strength {
    font-size: 2em
}

#statisticsV2 #militaryStrengthRank .chartWithLegend .chartContainer .chartDetails .strength i {
    margin-left: 5px;
    vertical-align: middle
}

#statisticsV2 #militaryStrengthRank .chartWithLegend .chartContainer .chartDetails .strength i+span {
    line-height: 24px;
    vertical-align: middle
}

#statisticsV2 #militaryStrengthRank .chartWithLegend .chartContainer .chartDetails .name {
    font-weight: bold
}

#statisticsV2 #militaryStrengthRank .chartWithLegend .chartContainer .chartDetails .rankDisplay {
    position: absolute;
    top: -158px;
    right: calc(50% - 26px);
    background-image: url('../../img_rtl/scenes/Statistics/general/rank_large.png');
    width: 55px;
    height: 47px;
    line-height: 47px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    font-size: 15px;
    z-index: 201
}

#statisticsV2 #resourceRank {
    position: relative
}

#statisticsV2 #resourceRank h4 i.resourceRank {
    background-image: url('../../img_rtl/scenes/Statistics/resourceRank/resourceRankTitle_large.png');
    width: 54px;
    height: 54px
}

#statisticsV2 #resourceRank .resourceBarChartContainer {
    margin-right: 3px;
    margin-bottom: 30px
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart {
    width: 41.5%;
    float: right
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .balance {
    height: 99px;
    width: 30.5%;
    line-height: 33px;
    padding-right: 7px;
    padding-left: 4px;
    float: left
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .balance div {
    height: 33px;
    font-size: 135%;
    text-align: right;
    opacity: 0;
    transition-duration: 250ms;
    white-space: nowrap;
    overflow: visible
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .balance div.positive {
    color: #eda932;
    transition-delay: 1000ms;
    padding-right: 5px
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .balance div.positive.total {
    color: #afe375
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .balance div.negative {
    color: #c35742;
    transition-delay: 2000ms;
    padding-right: 5px
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .balance div.negative>span {
    display: inline-block;
    position: absolute;
    margin-right: -10px
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .balance div.negative.total {
    color: red
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .balance div.total {
    position: relative;
    transition-delay: 2500ms
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .positive .raid {
    background-color: #eda932
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .positive .trade {
    background-color: #f4c97e
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .positive .production {
    background-color: #fbebd0
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .negative {
    margin-top: 5px
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .negative .raid {
    background-color: #c35742
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .negative .trade {
    background-color: #d48879
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer {
    width: 67%;
    float: right
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .positive,
#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .negative {
    transform: scaleX(0) translateZ(0);
    transform-origin: right;
    transition-duration: 1000ms;
    transition-timing-function: ease-out
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .positive span,
#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .negative span {
    display: inline-block;
    float: right;
    height: 33px
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .positive.negative,
#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .negative.negative {
    transform-origin: left;
    transition-delay: 1000ms
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .positive.negative span.raid,
#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .negative.negative span.raid {
    float: left;
    position: relative
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .positive.negative span.raid:before,
#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .negative.negative span.raid:before {
    display: block;
    content: "";
    height: 71px;
    width: 0;
    border-right: solid 2px #333;
    position: absolute;
    bottom: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-backface-visibility: hidden
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .positive.negative span.trade,
#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart .barContainer .negative.negative span.trade {
    float: left
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart.animated .balance div {
    opacity: 1
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart.animated .barContainer .positive,
#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChart.animated .barContainer .negative {
    transform: scaleX(1) translateZ(0)
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend {
    width: 56.5%;
    margin-right: 2%;
    float: right;
    padding-right: 25px;
    border-collapse: collapse
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend td {
    font-size: 12px;
    text-align: left;
    line-height: 12px;
    padding: 0;
    white-space: nowrap
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend td.value {
    width: 1%;
    padding-right: 5px
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend td.indicators {
    width: 30px
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend td.indicators span.resourceIndicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    position: relative;
    top: -1px
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend td.indicators svg.checkmark {
    display: inline-block;
    margin-right: 3px;
    width: 1em;
    height: 1em;
    fill: transparent;
    stroke-width: 4px;
    stroke-dasharray: 40;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .3s ease-out
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend td.indicators svg.checkmark.invisible {
    stroke-dashoffset: 40px
}

.rtl #statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend td.indicators svg.checkmark {
    transform: none
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend tr.positive.raid span.resourceIndicator {
    background-color: #eda932
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend tr.positive.raid svg.checkmark {
    stroke: #eda932
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend tr.positive.trade span.resourceIndicator {
    background-color: #f4c97e
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend tr.positive.trade svg.checkmark {
    stroke: #f4c97e
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend tr.positive.production span.resourceIndicator {
    background-color: #fbebd0
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend tr.positive.production svg.checkmark {
    stroke: #fbebd0
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend tr.negative.raid td {
    padding-top: 10px
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend tr.negative.raid td span.resourceIndicator {
    background-color: #c35742
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend tr.negative.raid td svg.checkmark {
    stroke: #c35742
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend tr.negative.trade span.resourceIndicator {
    background-color: #d48879
}

#statisticsV2 #resourceRank .resourceBarChartContainer .resourceBarChartLegend tr.negative.trade svg.checkmark {
    stroke: #d48879
}

#statisticsV2 #resourceRank .chartWithLegend {
    margin-bottom: 20px
}

#statisticsV2 #resourceRank .chartWithLegend .legendContainer {
    margin-top: 15px
}

#statisticsV2 #resourceRank .chartWithLegend .legendContainer .simpleLegend .ServerAllianceRank {
    margin-top: 24px
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer {
    position: relative
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .dataSwitchButtons {
    width: auto;
    position: absolute;
    z-index: 2;
    left: 0
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .dataSwitchButtons .iconButton {
    margin-right: 5px;
    padding: 4px
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .chartTitle~.recharts-wrapper {
    top: 30px;
    margin-bottom: 30px
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart {
    z-index: 1
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .lost,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .won,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .lost,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .won {
    width: 75px;
    min-height: 100%;
    position: absolute;
    padding-top: 143px;
    z-index: 202
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .lost p,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .won p,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .lost p,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .won p {
    position: relative;
    z-index: 202;
    margin: 3px 0
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .lost .svgArrow,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .won .svgArrow,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .lost .svgArrow,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .won .svgArrow {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: -1;
    top: -3px
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .lost .svgArrow+span,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .won .svgArrow+span,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .lost .svgArrow+span,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .won .svgArrow+span {
    display: inline-block;
    vertical-align: middle
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .lost i.bounty,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .lost i.trade,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .won i.bounty,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .won i.trade,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .lost i.bounty,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .lost i.trade,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .won i.bounty,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .won i.trade {
    width: 16px;
    height: 16px;
    vertical-align: middle
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .lost.lost,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .won.lost,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .lost.lost,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .won.lost {
    right: 5px
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .lost.won,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .won.won,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .lost.won,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart .won.won {
    left: 0
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart.raidChart .lost .svgArrow,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart.raidChart .lost .svgArrow {
    fill: #c35742
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart.raidChart .lost .svgArrow.disabled,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart.raidChart .lost .svgArrow.disabled {
    fill: #f2f2f2
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart.raidChart .won .svgArrow,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart.raidChart .won .svgArrow {
    fill: #eda932;
    transform: rotate(180deg)
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart.raidChart .won .svgArrow.disabled,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart.raidChart .won .svgArrow.disabled {
    fill: #f2f2f2
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart.tradeChart .lost .svgArrow,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart.tradeChart .lost .svgArrow {
    fill: #d48879
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart.tradeChart .lost .svgArrow.disabled,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart.tradeChart .lost .svgArrow.disabled {
    fill: #f2f2f2
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart.tradeChart .won .svgArrow,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart.tradeChart .won .svgArrow {
    fill: #f4c97e;
    transform: rotate(180deg)
}

#statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart.tradeChart .won .svgArrow.disabled,
#statisticsV2 #resourceRank .chartWithLegend .chartContainer .tradeChart.tradeChart .won .svgArrow.disabled {
    fill: #f2f2f2
}

.rtl #statisticsV2 #resourceRank .chartWithLegend .chartContainer .raidChart .lost.lost {
    right: 0
}

#statisticsV2 #culturePointsRank {
    position: relative
}

#statisticsV2 #culturePointsRank i.helmet_medium {
    background-image: url('../../img_rtl/scenes/Statistics/culturePointsRank/helmet_medium.png');
    width: 22px;
    height: 24px
}

#statisticsV2 #culturePointsRank i.reward_medium {
    background-image: url('../../img_rtl/scenes/Statistics/culturePointsRank/reward_medium.png');
    width: 26px;
    height: 22px
}

#statisticsV2 #culturePointsRank h4 i.culturePointsRank {
    background-image: url('../../img_rtl/scenes/Statistics/culturePointsRank/culturePointsRankTitle_large.png');
    width: 54px;
    height: 54px
}

#statisticsV2 #culturePointsRank .ServerAllianceRank {
    margin-bottom: 30px;
    margin-top: 14px
}

#statisticsV2 #culturePointsRank .culturePointsHeader {
    position: relative
}

#statisticsV2 #culturePointsRank .culturePointsHeader .openedClosedSwitch {
    left: 9px
}

#statisticsV2 #culturePointsRank .culturePointsHeader .dataSwitchButtons {
    display: flex;
    position: absolute;
    left: 40px;
    top: 3px;
    margin-top: -1px
}

#statisticsV2 #culturePointsRank .culturePointsHeader .dataSwitchButtons a.iconButton {
    align-content: center;
    padding: 4px
}

#statisticsV2 #culturePointsRank .culturePointsHeader .dataSwitchButtons a.iconButton:not(:last-child) {
    margin: 0 0 0 8px
}

#statisticsV2 #culturePointsRank .culturePointsHeader .dataSwitchButtons a.iconButton i.distribution {
    background-image: url('../../img_rtl/scenes/Statistics/culturePointsRank/distribution_small.png');
    width: 16px;
    height: 16px
}

#statisticsV2 #culturePointsRank .culturePointsHeader .dataSwitchButtons a.iconButton i.progression {
    background-image: url('../../img_rtl/scenes/Statistics/culturePointsRank/progression_small.png');
    width: 16px;
    height: 16px
}

#statisticsV2 #culturePointsRank .cpProduction {
    margin-top: 35px;
    padding-top: 15px;
    border-top: solid 1px #d2d2d1;
    text-align: center
}

#statisticsV2 #culturePointsRank .chartWithLegend .chartContainer .culturePointsRankChart .worse,
#statisticsV2 #culturePointsRank .chartWithLegend .chartContainer .culturePointsRankChart .better {
    width: 75px;
    min-height: 100%;
    position: absolute;
    padding-top: 115px;
    z-index: 202
}

#statisticsV2 #culturePointsRank .chartWithLegend .chartContainer .culturePointsRankChart .worse.better,
#statisticsV2 #culturePointsRank .chartWithLegend .chartContainer .culturePointsRankChart .better.better {
    right: 5px
}

#statisticsV2 #culturePointsRank .chartWithLegend .chartContainer .culturePointsRankChart .worse.worse,
#statisticsV2 #culturePointsRank .chartWithLegend .chartContainer .culturePointsRankChart .better.worse {
    left: 0
}

#statisticsV2 #cpProgressionChart {
    position: relative
}

#statisticsV2 #cpProgressionChart .chartTitle {
    position: absolute;
    left: 32px;
    top: 15px
}

.ltr #statisticsV2 #cpProgressionChart .recharts-wrapper {
    margin-right: -15px;
    margin-top: 15px
}

#statisticsV2 #cpDistributionChart .chartTitle~.recharts-wrapper {
    top: 30px;
    margin-bottom: 30px
}

#statisticsV2 #cpDistributionChart .simpleLegend table tr td:first-of-type {
    text-align: center;
    padding: 4px 5px 4px 4px
}

#statisticsV2 #cpDistributionChart .simpleLegend table tr td:last-of-type {
    text-align: left
}

#statisticsV2 #cpDistributionChart .simpleLegend table tr td:last-of-type span {
    display: inline-block
}

#statisticsV2 #cpDistributionChart .simpleLegend table tr:last-of-type td {
    font-size: 16px
}

#statisticsV2 #cpDistributionChart .simpleLegend table tr:last-of-type td:first-of-type {
    text-align: left
}

#statisticsV2 #cpDistributionChart .simpleLegend table tr:last-of-type td:last-of-type {
    font-weight: bold
}

#statisticsV2 #cpDistributionChart .simpleLegend table span {
    position: relative;
    padding-left: 15px
}

#statisticsV2 #cpDistributionChart .simpleLegend table span:after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    left: 0;
    bottom: calc(50% - 5px);
    position: absolute
}

#statisticsV2 #cpDistributionChart .simpleLegend table span.buildings:after {
    background-color: #ffd667
}

#statisticsV2 #cpDistributionChart .simpleLegend table span.celebrations:after {
    background-color: #dd2e45
}

#statisticsV2 #cpDistributionChart .simpleLegend table span.helmet:after {
    background-color: #31a1ed
}

#statisticsV2 #cpDistributionChart .simpleLegend table span.items:after {
    background-color: #31a1ed
}

#statisticsV2 #cpDistributionChart .simpleLegend table span.rewards:after {
    background-color: #a9d18e
}

#statisticsV2 #cpDistributionChart .simpleLegend table span.allianceBonus:after {
    background-color: #8ea3d1
}

#statisticsV2 #cpRankComparison .legendContainer {
    margin-bottom: 0
}

#statisticsV2 #cpRankComparison .chartContainer {
    position: relative
}

#statisticsV2 #cpRankComparison .chartContainer .rankDisplay {
    position: absolute;
    top: calc(50% - 23px);
    right: calc(50% - 26px);
    background-image: url('../../img_rtl/scenes/Statistics/general/rank_large.png');
    width: 55px;
    height: 47px;
    line-height: 47px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    font-size: 15px;
    z-index: 2
}

#center #contentOuterContainer .contentContainer #content.tasks {
    background-color: #f4efe4
}

#tasks {
    color: #5e463a
}

#tasks .divider {
    background-image: url('../../img_rtl/scenes/Tasks/divider.png');
    width: 220px;
    height: 10px;
    width: auto;
    background-position: center
}

#tasks .taskDetailview .taskDescription {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 200px 1fr;
    grid-template-columns: 200px 1fr;
    margin-bottom: 20px
}

#tasks .taskDetailview .taskDescription .imageFrame {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row: 1;
    grid-row-start: 1;
    width: 161px;
    height: 161px;
    margin-right: 10px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 3px 6px rgba(52, 34, 13, 0.3)
}

#tasks .taskDetailview .taskDescription .imageFrame:before {
    position: absolute;
    top: 7px;
    left: 7px;
    bottom: 7px;
    right: 7px;
    border-radius: 50%
}

#tasks .taskDetailview .taskDescription .imageFrame .taskImage {
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 8px;
    bottom: 8px;
    right: 8px;
    width: auto;
    height: auto
}

#tasks .taskDetailview .taskDescription .description {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-align: center;
    align-self: center
}

#tasks .taskDetailview .taskDescription .description .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px
}

#tasks .taskDetailview .buttonWrapper {
    text-align: center;
    margin: 20px 0 10px
}

#tasks .task {
    position: relative;
    z-index: 36;
    margin-bottom: 10px;
    padding: 3px;
    display: -ms-grid;
    display: grid;
    transition: opacity 333.33333ms 2200ms
}

#tasks .task:before {
    background-image: url('../../img_rtl/scenes/Tasks/taskBackground.jpg');
    background-position: center
}

#tasks .task>div {
    position: relative
}

#tasks .task .taskImage {
    -ms-grid-column: 1;
    grid-column-start: 1;
    border-left: 1px solid #afa38d
}

#tasks .task .title {
    font-size: 16px;
    font-weight: bold;
    margin: 0 10px
}

#tasks .task .rewards {
    margin-right: 10px
}

#tasks .task .rewards>div {
    display: inline-block
}

#tasks .task .rewards .reward {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    height: 23px;
    border: 1px solid #a2947b;
    background-color: #b7ad97;
    border-radius: 8px;
    line-height: 21px;
    padding: 0 34px 0 5px
}

#tasks .task .rewards .reward i {
    position: absolute;
    top: 50%;
    transform-origin: top;
    transform: translateY(-50%)
}

#tasks .task .rewards .reward+.animationObject {
    height: 23px;
    line-height: 21px;
    padding: 0 34px 0 5px;
    margin: -28px 16px;
    pointer-events: none;
    position: absolute
}

#tasks .task .rewards .reward+.animationObject .reward {
    position: absolute;
    z-index: 37;
    right: 0;
    margin: 0;
    border: 1px solid #fff9eb;
    filter: drop-shadow(0 0 5px #000)
}

#tasks .task .rewards .reward.resources {
    margin: 5px 16px 5px 5px
}

#tasks .task .rewards .reward.resources i {
    right: -16px
}

#tasks .task .rewards .reward.resources+.animationObject .reward {
    transform: scale(0)
}

#tasks .task .rewards .reward.resources.animated {
    animation: splitResources 100ms ease-out forwards;
    z-index: 36
}

@keyframes splitResources {
    0% {
        transform: scale(1)
    }
    50%,
    61% {
        transform: scale(0.5);
        opacity: 1
    }
    100% {
        transform: scale(1);
        opacity: 0
    }
}

#tasks .task .rewards .reward.experience {
    margin: 5px 9px 5px 5px;
    opacity: 1;
    transition: opacity 250ms ease-out
}

#tasks .task .rewards .reward.experience i {
    right: -9px
}

#tasks .task .rewards .reward.experience+.animationObject .reward {
    right: -8px;
    opacity: 0;
    transition: opacity 250ms ease-out
}

#tasks .task .rewards .reward.experience.animated {
    opacity: 0
}

#tasks .task .rewards .reward.experience.animated+.animationObject .reward {
    opacity: 1
}

#tasks .task .progress {
    -ms-grid-row-align: center;
    align-self: center
}

#tasks .task .progress button {
    width: 130px;
    transition: width 333.33333ms, margin 333.33333ms
}

#tasks .task .progress button>div {
    transition-duration: 333.33333ms
}

#tasks .task .progress button .collectedCheckmark {
    width: 38px;
    height: 38px;
    position: absolute;
    z-index: 3;
    right: calc(50% - 19px);
    bottom: -2px;
    border-radius: 50%;
    border: solid 1px #34220d;
    opacity: 0;
    transform: scale(0) rotate(180deg);
    pointer-events: none
}

#tasks .task .progress button .collectedCheckmark:before {
    content: "";
    position: absolute;
    right: -2px;
    bottom: 2px;
    z-index: 3;
    background-image: url('../../img_rtl/scenes/Tasks/collected.png');
    width: 45px;
    height: 43px;
    transform: scale(0);
    transform-origin: center bottom
}

#tasks .task .progress button .collectedCheckmark:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    right: 3px;
    background-color: #765a4a;
    border-radius: 50%;
    box-shadow: inset 0 0 1px #34220d
}

#tasks .task .progress button.collected {
    pointer-events: none;
    user-select: none;
    overflow: visible
}

#tasks .task .progress button.collected:after {
    content: attr(data-text-collected);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    box-sizing: border-box;
    background-color: #b6ac96;
    padding: 11px 10px 8px;
    color: transparent;
    font-weight: bold;
    transform: scaleX(0);
    transform-origin: center;
    animation: collectedAnimation 2000ms ease-out forwards
}

@keyframes collectedAnimation {
    0% {
        transform: scaleX(0);
        color: transparent
    }
    15%,
    75% {
        transform: scaleX(1);
        color: transparent
    }
    80%,
    100% {
        transform: scaleX(1);
        color: #402b13
    }
}

#tasks .task .progress button.collected>div {
    color: transparent;
    padding: 9px 20px 0
}

#tasks .task .progress button.collected .collectedCheckmark {
    animation: checkmarkAnimationContainer 2000ms ease-out forwards
}

@keyframes checkmarkAnimationContainer {
    0% {
        transform: scale(0) rotate(180deg);
        opacity: 0
    }
    10% {
        transform: scale(1) rotate(-30deg);
        opacity: 1
    }
    20% {
        transform: scale(1) rotate(10deg)
    }
    35%,
    55% {
        transform: scale(1) rotate(0);
        opacity: 1
    }
    65% {
        transform: scale(1.3) rotate(0);
        opacity: 1
    }
    80% {
        transform: scale(0) rotate(0);
        opacity: 1
    }
}

#tasks .task .progress button.collected .collectedCheckmark:before {
    animation: checkmarkAnimationIcon 666.66667ms ease-out forwards;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5))
}

@keyframes checkmarkAnimationIcon {
    0%,
    45% {
        transform: scale(0) translateY(25px);
        filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5))
    }
    75% {
        transform: scale(1.15);
        filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5))
    }
    100% {
        transform: scale(1);
        filter: none
    }
}

#tasks .task .progress button.preventAnimation:after {
    animation: none;
    transform: scaleX(1);
    color: #402b13
}

#tasks .task .progress button.preventAnimation .collectedCheckmark,
#tasks .task .progress button.preventAnimation .collectedCheckmark:before {
    animation: none
}

#tasks .task .progress .progressBar {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    height: 73px
}

#tasks .task .progress .progressBar .bar {
    -ms-grid-row: 2;
    grid-row-start: 2;
    position: relative;
    -ms-grid-row-align: center;
    align-self: center;
    box-sizing: border-box;
    width: 130px;
    height: 18px;
    padding: 3px;
    border-radius: 10px
}

#tasks .task .progress .progressBar .bar:before {
    border-radius: 7px
}

#tasks .task .progress .progressBar .bar .decoration {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2
}

#tasks .task .progress .progressBar .bar .decoration:before,
#tasks .task .progress .progressBar .bar .decoration:after {
    content: "";
    position: absolute;
    background-image: url('../../img_rtl/scenes/Tasks/progressBarDecoration.png');
    width: 10px;
    height: 18px;
    top: -1px
}

#tasks .task .progress .progressBar .bar .decoration:before {
    right: 1px
}

#tasks .task .progress .progressBar .bar .decoration:after {
    left: 1px;
    transform: scaleX(-1)
}

#tasks .task .progress .progressBar .bar .filling {
    position: relative;
    background-image: linear-gradient(to top, #5c831e 0, #5d8f0d 45.26%, #7f9f32 72.08%, #a0ae56 100%);
    border: 1px solid #6cb708;
    border-top-color: #f5f8ef;
    height: 8px
}

#tasks .task .progress .progressBar .label {
    -ms-grid-row: 3;
    grid-row-start: 3;
    width: 130px;
    -ms-grid-row-align: start;
    align-self: start;
    padding-top: 3px;
    text-align: center
}

#tasks .task.group {
    height: 73px;
    -ms-grid-columns: 74px 110px 1fr 140px;
    grid-template-columns: 74px 110px 1fr 140px;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    cursor: pointer;
    transition: opacity 333.33333ms 2200ms, box-shadow .4s .15s
}

#tasks .task.group>div {
    -ms-grid-row: 1;
    grid-row-start: 1
}

#tasks .task.group .taskImage {
    -ms-grid-row: 1;
    grid-row-start: 1
}

#tasks .task.group .title {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row-align: center;
    align-self: center;
    position: relative
}

#tasks .task.group .titleDecoration {
    -ms-grid-column: 2;
    grid-column-start: 2;
    position: relative
}

#tasks .task.group .titleDecoration:before,
#tasks .task.group .titleDecoration:after {
    content: "";
    background-color: #f7f1db;
    transition-property: left;
    transition-duration: .4s;
    transition-timing-function: ease-out;
    transition-delay: .15s
}

#tasks .task.group .titleDecoration:before {
    position: absolute;
    top: 0;
    left: 5px;
    bottom: 0;
    right: 0
}

#tasks .task.group .titleDecoration:after {
    width: 52px;
    height: 52px;
    position: absolute;
    left: -47px;
    transform: rotate(-45deg);
    transform-origin: top right
}

#tasks .task.group .rewards {
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-row-align: center;
    align-self: center
}

#tasks .task.group .progress {
    -ms-grid-column: 4;
    grid-column-start: 4
}

#tasks .task.group:hover,
#tasks .task.group.collected {
    box-shadow: 0 0 5px 3px #beae9a
}

#tasks .task.group:hover .titleDecoration:before,
#tasks .task.group.collected .titleDecoration:before {
    left: -323px
}

#tasks .task.group:hover .titleDecoration:after,
#tasks .task.group.collected .titleDecoration:after {
    left: -375px
}

#tasks .task.group.populationProgress .progress .label span:first-child,
#tasks .task.group.populationProgressInVillage .progress .label span:first-child,
#tasks .task.group.culturePointsProductionProgress .progress .label span:first-child,
#tasks .task.group.culturePointsProductionProgressInVillage .progress .label span:first-child {
    display: none
}

#tasks .task.level {
    height: 107px;
    -ms-grid-columns: 107px 1fr 140px;
    grid-template-columns: 107px 1fr 140px;
    -ms-grid-rows: 1fr 1fr;
    grid-template-rows: 1fr 1fr
}

#tasks .task.level .taskImage {
    grid-row: 1 / 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2
}

#tasks .task.level .title {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-align: center;
    align-self: center
}

#tasks .task.level .titleDecoration {
    display: none
}

#tasks .task.level .rewards {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 2;
    grid-row-start: 2
}

#tasks .task.level .progress {
    -ms-grid-column: 3;
    grid-column-start: 3;
    grid-row: 1 / 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2
}

#tasks .task.open .progress button {
    display: none
}

#tasks .task.achieved .progress .progressBar {
    display: none
}

#tasks .task.collected {
    opacity: .5
}

#tasks .task.collected .progress .progressBar {
    display: none
}

#tasks .taskImage {
    position: relative;
    overflow: hidden
}

#tasks .taskImage:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background-image: url('../../img_rtl/scenes/Tasks/type/background.jpg');
    background-size: cover
}

#tasks .taskImage img {
    position: absolute;
    z-index: 2
}

#tasks .taskImage.group {
    width: 73px;
    height: 73px
}

#tasks .taskImage.group img.resourceBuildingsLevelOfOneOfTheBuildings {
    background-image: url('../../img_rtl/scenes/Tasks/type/oneEachResource_group.jpg');
    width: 73px;
    height: 73px
}

#tasks .taskImage.group img.resourceBuildingsAllLevels {
    background-image: url('../../img_rtl/scenes/Tasks/type/allResources_group.jpg');
    width: 73px;
    height: 73px
}

#tasks .taskImage.group img.populationProgress,
#tasks .taskImage.group img.populationProgressInVillage {
    background-image: url('../../img_rtl/scenes/Tasks/type/population_group.jpg');
    width: 73px;
    height: 73px
}

#tasks .taskImage.group img.culturePointsProductionProgress,
#tasks .taskImage.group img.culturePointsProductionProgressInVillage {
    background-image: url('../../img_rtl/scenes/Tasks/type/culture_group.jpg');
    width: 73px;
    height: 73px
}

#tasks .taskImage.group img.loyalty {
    background-image: url('../../img_rtl/scenes/Tasks/type/loyalty_group.jpg');
    width: 73px;
    height: 73px
}

#tasks .taskImage.group img.building {
    bottom: -5px;
    right: -20px
}

#tasks .taskImage.group img.building.g1 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g1_group.jpg');
    width: 73px;
    height: 73px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.group img.building.g2 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g2_group.jpg');
    width: 73px;
    height: 73px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.group img.building.g3 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g3_group.jpg');
    width: 73px;
    height: 73px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.group img.building.g4 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g4_group.jpg');
    width: 73px;
    height: 73px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.group img.building.g31 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g31_group.png');
    width: 73px;
    height: 73px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.group img.building.g32 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g32_group.png');
    width: 73px;
    height: 73px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.group img.building.g33 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g33_group.png');
    width: 73px;
    height: 73px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.group img.building.g42 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g42_group.png');
    width: 73px;
    height: 73px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.group img.building.g43 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g43_group.png');
    width: 73px;
    height: 73px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.group img.building.g5 {
    right: -15px
}

#tasks .taskImage.group img.building.g6 {
    right: -26px
}

#tasks .taskImage.group img.building.g8 {
    bottom: -26px;
    right: -25px
}

#tasks .taskImage.group img.building.g9 {
    right: -26px
}

#tasks .taskImage.group img.building.g10 {
    right: -18px
}

#tasks .taskImage.group img.building.g11 {
    bottom: -15px
}

#tasks .taskImage.group img.building.g15 {
    right: -30px
}

#tasks .taskImage.group img.building.g16 {
    bottom: -20px;
    right: -50px
}

#tasks .taskImage.group img.building.g18 {
    right: -32px
}

#tasks .taskImage.group img.building.g19 {
    bottom: 0
}

#tasks .taskImage.group img.building.g20 {
    bottom: -10px;
    right: -25px
}

#tasks .taskImage.group img.building.g21 {
    bottom: 3px
}

#tasks .taskImage.group img.building.g22 {
    right: -26px
}

#tasks .taskImage.group img.building.g23 {
    bottom: 0
}

#tasks .taskImage.group img.building.g24 {
    right: -18px
}

#tasks .taskImage.group img.building.g26 {
    right: -15px;
    bottom: 0
}

#tasks .taskImage.level {
    width: 107px;
    height: 107px
}

#tasks .taskImage.level img.resourceBuildingsLevelOfOneOfTheBuildings {
    background-image: url('../../img_rtl/scenes/Tasks/type/oneEachResource_level.jpg');
    width: 107px;
    height: 107px
}

#tasks .taskImage.level img.resourceBuildingsAllLevels {
    background-image: url('../../img_rtl/scenes/Tasks/type/allResources_level.jpg');
    width: 107px;
    height: 107px
}

#tasks .taskImage.level img.populationProgress,
#tasks .taskImage.level img.populationProgressInVillage {
    background-image: url('../../img_rtl/scenes/Tasks/type/population_level.jpg');
    width: 107px;
    height: 107px
}

#tasks .taskImage.level img.culturePointsProductionProgress,
#tasks .taskImage.level img.culturePointsProductionProgressInVillage {
    background-image: url('../../img_rtl/scenes/Tasks/type/culture_level.jpg');
    width: 107px;
    height: 107px
}

#tasks .taskImage.level img.loyalty {
    background-image: url('../../img_rtl/scenes/Tasks/type/loyalty_level.jpg');
    width: 107px;
    height: 107px
}

#tasks .taskImage.level img.building {
    bottom: -10px;
    right: -25px
}

#tasks .taskImage.level img.building.g1 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g1_level.jpg');
    width: 107px;
    height: 107px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.level img.building.g2 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g2_level.jpg');
    width: 107px;
    height: 107px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.level img.building.g3 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g3_level.jpg');
    width: 107px;
    height: 107px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.level img.building.g4 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g4_level.jpg');
    width: 107px;
    height: 107px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.level img.building.g31 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g31_level.png');
    width: 107px;
    height: 107px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.level img.building.g32 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g32_level.png');
    width: 107px;
    height: 107px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.level img.building.g33 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g33_level.png');
    width: 107px;
    height: 107px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.level img.building.g42 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g42_level.png');
    width: 107px;
    height: 107px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.level img.building.g43 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g43_level.png');
    width: 107px;
    height: 107px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.level img.building.g6 {
    bottom: -11px;
    right: -35px
}

#tasks .taskImage.level img.building.g7 {
    bottom: -6px;
    right: -33px
}

#tasks .taskImage.level img.building.g8 {
    bottom: -38px;
    right: -42px
}

#tasks .taskImage.level img.building.g9 {
    bottom: -9px;
    right: -36px
}

#tasks .taskImage.level img.building.g10 {
    right: -31px
}

#tasks .taskImage.level img.building.g11 {
    bottom: -24px;
    right: -33px
}

#tasks .taskImage.level img.building.g15 {
    bottom: -7px;
    right: -51px
}

#tasks .taskImage.level img.building.g16 {
    bottom: -1px;
    right: -54px
}

#tasks .taskImage.level img.building.g17 {
    bottom: -8px
}

#tasks .taskImage.level img.building.g18 {
    bottom: -11px;
    right: -48px
}

#tasks .taskImage.level img.building.g19 {
    bottom: -4px;
    right: -44px
}

#tasks .taskImage.level img.building.g20 {
    bottom: -15px;
    right: -32px
}

#tasks .taskImage.level img.building.g21 {
    bottom: -2px
}

#tasks .taskImage.level img.building.g22 {
    bottom: -3px;
    right: -38px
}

#tasks .taskImage.level img.building.g23 {
    bottom: 0;
    right: -35px
}

#tasks .taskImage.level img.building.g25 {
    bottom: -7px;
    right: -35px
}

#tasks .taskImage.level img.building.g26 {
    bottom: -1px;
    right: -25px
}

#tasks .taskImage.description img.resourceBuildingsLevelOfOneOfTheBuildings {
    background-image: url('../../img_rtl/scenes/Tasks/type/oneEachResource_description.jpg');
    width: 145px;
    height: 145px
}

#tasks .taskImage.description img.resourceBuildingsAllLevels {
    background-image: url('../../img_rtl/scenes/Tasks/type/allResources_description.jpg');
    width: 145px;
    height: 145px
}

#tasks .taskImage.description img.populationProgress,
#tasks .taskImage.description img.populationProgressInVillage {
    background-image: url('../../img_rtl/scenes/Tasks/type/population_description.jpg');
    width: 145px;
    height: 145px
}

#tasks .taskImage.description img.culturePointsProductionProgress,
#tasks .taskImage.description img.culturePointsProductionProgressInVillage {
    background-image: url('../../img_rtl/scenes/Tasks/type/culture_description.jpg');
    width: 145px;
    height: 145px
}

#tasks .taskImage.description img.loyalty {
    background-image: url('../../img_rtl/scenes/Tasks/type/loyalty_description.jpg');
    width: 145px;
    height: 145px
}

#tasks .taskImage.description img.building {
    bottom: 15px;
    right: -15px
}

#tasks .taskImage.description img.building.g1 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g1_description.jpg');
    width: 145px;
    height: 145px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.description img.building.g2 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g2_description.jpg');
    width: 145px;
    height: 145px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.description img.building.g3 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g3_description.jpg');
    width: 145px;
    height: 145px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.description img.building.g4 {
    background-image: url('../../img_rtl/scenes/Tasks/type/g4_description.jpg');
    width: 145px;
    height: 145px;
    bottom: 0;
    right: 0
}

#tasks .taskImage.description img.building.g31 {
    background-image: url('../../img_rtl/g/upgradeView2019/buildingIllustrations/roman/g31.png');
    width: 241px;
    height: 160px
}

#tasks .taskImage.description img.building.g32 {
    background-image: url('../../img_rtl/g/upgradeView2019/buildingIllustrations/teuton/g32.png');
    width: 241px;
    height: 160px
}

#tasks .taskImage.description img.building.g33 {
    background-image: url('../../img_rtl/g/upgradeView2019/buildingIllustrations/gaul/g33.png');
    width: 241px;
    height: 160px
}

#tasks .taskImage.description img.building.g42 {
    background-image: url('../../img_rtl/g/upgradeView2019/buildingIllustrations/egyptian/g42.png');
    width: 241px;
    height: 160px
}

#tasks .taskImage.description img.building.g43 {
    background-image: url('../../img_rtl/g/upgradeView2019/buildingIllustrations/hun/g43.png');
    width: 241px;
    height: 160px
}

#tasks .taskImage.description img.building.g6 {
    bottom: -1px;
    right: -18px
}

#tasks .taskImage.description img.building.g7 {
    bottom: 8px;
    right: -9px
}

#tasks .taskImage.description img.building.g8 {
    bottom: -5px;
    right: -18px
}

#tasks .taskImage.description img.building.g11 {
    bottom: 5px;
    right: -9px
}

#tasks .taskImage.description img.building.g15 {
    right: -23px
}

#tasks .taskImage.description img.building.g16 {
    bottom: 4px;
    right: -20px
}

#tasks .taskImage.description img.building.g20 {
    bottom: 6px;
    right: -13px
}

#tasks .taskImage.description img.building.g24 {
    bottom: 8px;
    right: -12px
}

#tasks .taskImage.description img.building.g31 {
    bottom: -7px;
    right: -67px
}

#tasks .taskImage.description img.building.g32 {
    bottom: -13px;
    right: -59px
}

#tasks .taskImage.description img.building.g33 {
    bottom: -7px;
    right: -58px
}

#tasks .taskImage.description img.building.g42 {
    bottom: -19px;
    right: -58px
}

#tasks .taskImage.description img.building.g43 {
    bottom: -7px;
    right: -67px
}

#tasks .rewardBonus {
    position: relative;
    margin-top: 10px;
    padding: 3px;
    display: flex
}

#tasks .rewardBonus:before {
    background-image: url('../../img_rtl/scenes/Tasks/bonusBackground.jpg')
}

#tasks .rewardBonus>div {
    position: relative
}

#tasks .rewardBonus .heroLevel,
#tasks .rewardBonus .nextLevel {
    font-weight: bold;
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-rows: 1fr 25px;
    grid-template-rows: 1fr 25px
}

#tasks .rewardBonus .heroLevel .level,
#tasks .rewardBonus .nextLevel .level {
    text-align: center;
    color: #f2f2f2;
    text-shadow: 1px 0 0 #9a2d02, 1px 1px 0 #9a2d02, 0 1px 0 #9a2d02, -1px 1px 0 #9a2d02, -1px 0 0 #9a2d02, -1px -1px 0 #9a2d02, 0 -1px 0 #9a2d02, 1px -1px 0 #9a2d02;
    -ms-grid-row-align: center;
    align-self: center;
    -ms-grid-column-align: center;
    justify-self: center;
    -ms-grid-row: 1;
    grid-row-start: 1
}

#tasks .rewardBonus .heroLevel .description,
#tasks .rewardBonus .nextLevel .description {
    white-space: nowrap;
    -ms-grid-column-align: center;
    justify-self: center;
    -ms-grid-row-align: center;
    align-self: center;
    -ms-grid-row: 2;
    grid-row-start: 2
}

#tasks .rewardBonus .heroLevel {
    padding: 5px 30px 5px 10px
}

#tasks .rewardBonus .heroLevel .level {
    background-image: url('../../img_rtl/scenes/Tasks/heroLevel.png');
    width: 78px;
    height: 79px;
    line-height: 79px;
    padding-top: 1px;
    font-size: 24px
}

#tasks .rewardBonus .rewardInfo {
    flex-grow: 1;
    padding: 5px 10px;
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-rows: 50px 1fr;
    grid-template-rows: 50px 1fr
}

#tasks .rewardBonus .rewardInfo h4 {
    color: #5e463a;
    -ms-grid-row-align: end;
    align-self: end;
    -ms-grid-row: 1;
    grid-row-start: 1
}

#tasks .rewardBonus .rewardInfo div {
    -ms-grid-row: 2;
    grid-row-start: 2
}

#tasks .rewardBonus .nextLevel {
    padding: +5px 10px 5px 30px
}

#tasks .rewardBonus .nextLevel .level {
    background-image: url('../../img_rtl/scenes/Tasks/heroNextLevel.png');
    width: 58px;
    height: 58px;
    line-height: 58px;
    font-size: 23px
}

#tasks .pagination {
    text-align: center
}

#tasks .pagination button {
    padding: 0;
    display: inline-block;
    vertical-align: top;
    box-sizing: content-box;
    background-clip: content-box;
    background-origin: content-box
}

#tasks .pagination button.back,
#tasks .pagination button.forward {
    width: 34px;
    height: 41px
}

#tasks .pagination button.back:not(.disabled):hover,
#tasks .pagination button.back:not(.disabled):focus,
#tasks .pagination button.forward:not(.disabled):hover,
#tasks .pagination button.forward:not(.disabled):focus {
    background-position: 0 50%
}

#tasks .pagination button.back:not(.disabled):active,
#tasks .pagination button.forward:not(.disabled):active {
    background-position: 0 100%
}

#tasks .pagination button.back.disabled,
#tasks .pagination button.forward.disabled {
    opacity: .5;
    pointer-events: none
}

#tasks .pagination button.back {
    background-image: url('../../img_rtl/hud/content/scrollFrom.png');
    padding-left: 10px
}

#tasks .pagination button.forward {
    background-image: url('../../img_rtl/hud/content/scrollTo.png');
    padding-right: 10px
}

#tasks .pagination button.page {
    width: 29px;
    height: 29px;
    padding: 10px 5px 0;
    background-image: url('../../img_rtl/scenes/Tasks/paginationPages_unselected.png')
}

#tasks .pagination button.page.selected {
    background-image: url('../../img_rtl/scenes/Tasks/paginationPages_selected.png');
    pointer-events: none
}

#tasks .pagination button.page:not(.selected):hover,
#tasks .pagination button.page:not(.selected):focus {
    background-position: 0 50%
}

#tasks .pagination button.page:not(.selected):active {
    background-position: 0 100%
}

#contextualHelp {
    position: absolute;
    width: 100%;
    min-width: 1280px;
    height: 100%;
    z-index: 6000;
    pointer-events: none
}

@media screen and (max-width:620px) {
    .mobileOptimized #contextualHelp {
        display: none
    }
}

#contextualHelp.overlay {
    z-index: 999999
}

#contextualHelp * {
    box-sizing: border-box
}

#contextualHelp .contextualHelp {
    display: -ms-inline-grid;
    display: inline-grid;
    position: absolute;
    z-index: 1;
    opacity: 1;
    transition: visibility 150ms, opacity 150ms
}

#contextualHelp .contextualHelp.teasing {
    position: fixed
}

#contextualHelp .contextualHelp.hide {
    visibility: hidden;
    opacity: 0;
    pointer-events: none
}

#contextualHelp .contextualHelp .arrowContainer {
    width: 40px;
    height: calc(100% - 54px);
    margin-top: 27px;
    position: relative
}

#contextualHelp .contextualHelp .arrowContainer svg.pointingArrow {
    width: 40px;
    height: 40px;
    fill: rgba(51, 51, 51, 0.9);
    position: absolute;
    z-index: 5;
    margin-top: -20px
}

#contextualHelp .contextualHelp .helpBody {
    width: 350px;
    min-height: 80px;
    word-break: break-word;
    display: inline-block;
    padding: 30px 25px 25px;
    background-color: rgba(51, 51, 51, 0.9);
    color: #f2f2f2;
    border-radius: 7px;
    position: relative;
    z-index: 2;
    border: solid 2px #caa46d;
    border-top-color: #ffe1aa;
    border-bottom-color: #907151;
    box-shadow: 0 0 0 1px #1b1a1a, 0 0 0 1px #1b1a1a inset;
    pointer-events: auto
}

#contextualHelp .contextualHelp .helpBody:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 6px;
    z-index: 3;
    box-shadow: 0 -1px 0 0 #a3835a
}

#contextualHelp .contextualHelp .helpBody:after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    border-radius: 6px;
    z-index: 3;
    box-shadow: 0 -1px 0 0 #a3835a inset
}

#contextualHelp .contextualHelp .helpBody .progress {
    width: calc(100% - 2px);
    height: 5px;
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: -1;
    display: flex
}

#contextualHelp .contextualHelp .helpBody .progress div {
    background-color: #c9b59a;
    flex: 1;
    transition-duration: 250ms
}

#contextualHelp .contextualHelp .helpBody .progress div:not(:last-of-type) {
    margin-left: 1px
}

#contextualHelp .contextualHelp .helpBody .progress div:first-of-type {
    border-top-right-radius: 5px
}

#contextualHelp .contextualHelp .helpBody .progress div:last-of-type {
    border-top-left-radius: 5px
}

#contextualHelp .contextualHelp .helpBody .progress div.active {
    background-color: #f0e1cc
}

#contextualHelp .contextualHelp .helpBody nav {
    z-index: 4;
    height: 35px;
    margin-top: 25px;
    position: relative
}

#contextualHelp .contextualHelp .helpBody nav.hide {
    display: none
}

#contextualHelp .contextualHelp .helpBody nav svg {
    width: 12px;
    height: 17px;
    margin-top: 7px;
    transform: translateX(0);
    transition-duration: 150ms;
    transition-timing-function: ease-out;
    cursor: pointer;
    position: absolute
}

#contextualHelp .contextualHelp .helpBody nav svg.chevronBack {
    top: 0;
    right: 0
}

#contextualHelp .contextualHelp .helpBody nav svg.chevronForward {
    top: 0;
    left: 0
}

.rtl #contextualHelp .contextualHelp .helpBody nav svg {
    transform: scale(-1, 1)
}

#contextualHelp .contextualHelp .helpBody nav svg path {
    fill: transparent;
    stroke: #d2bda1;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition-duration: 150ms
}

#contextualHelp .contextualHelp .helpBody nav svg:not(.disabled):hover path,
#contextualHelp .contextualHelp .helpBody nav svg:not(.disabled):focus path {
    stroke: #f0e1cc
}

#contextualHelp .contextualHelp .helpBody nav svg:not(.disabled):active path {
    stroke: #c9b59a
}

#contextualHelp .contextualHelp .helpBody nav button.textButtonV1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background-color: #d2bda1;
    transition-duration: 150ms
}

#contextualHelp .contextualHelp .helpBody nav button.textButtonV1:hover,
#contextualHelp .contextualHelp .helpBody nav button.textButtonV1:focus {
    background-color: #f0e1cc
}

#contextualHelp .contextualHelp .helpBody nav button.textButtonV1:active {
    background-color: #c9b59a
}

#contextualHelp .contextualHelp .helpBody .teaser:not(.hide)+nav {
    display: none
}

#contextualHelp .contextualHelp.above .arrowContainer,
#contextualHelp .contextualHelp.below .arrowContainer {
    width: calc(100% - 54px);
    height: 40px;
    margin-top: 0;
    margin-right: 27px
}

#contextualHelp .contextualHelp.above {
    -ms-grid-columns: auto;
    grid-template-columns: auto
}

#contextualHelp .contextualHelp.above .arrowContainer {
    order: 2;
    -ms-grid-row: 2;
    grid-row-start: 2;
    margin-top: -2px
}

#contextualHelp .contextualHelp.above .arrowContainer svg.pointingArrow {
    transform: rotate(-90deg);
    margin-right: -22px;
    margin-top: 0;
    top: -2px;
    stroke: #907151
}

.rtl.ie #contextualHelp .contextualHelp.above .arrowContainer svg.pointingArrow {
    transform: rotate(90deg)
}

#contextualHelp .contextualHelp.below {
    -ms-grid-columns: auto;
    grid-template-columns: auto
}

#contextualHelp .contextualHelp.below .helpBody {
    -ms-grid-row: 2;
    grid-row-start: 2
}

#contextualHelp .contextualHelp.below .arrowContainer {
    margin-bottom: -2px
}

#contextualHelp .contextualHelp.below .arrowContainer svg.pointingArrow {
    transform: rotate(90deg);
    margin-right: -20px;
    top: 2px;
    margin-top: 0;
    stroke: #ffe1aa
}

.rtl.ie #contextualHelp .contextualHelp.below .arrowContainer svg.pointingArrow {
    transform: rotate(-90deg)
}

#contextualHelp .contextualHelp.before {
    -ms-grid-columns: auto 40px;
    grid-template-columns: auto 40px
}

#contextualHelp .contextualHelp.before .helpBody {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 1;
    grid-column-start: 1
}

#contextualHelp .contextualHelp.before .arrowContainer {
    order: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 2;
    grid-column-start: 2;
    margin-right: -2px
}

#contextualHelp .contextualHelp.before .arrowContainer svg.pointingArrow {
    transform: scale(-1, -1);
    left: 2px;
    stroke: #caa46d
}

.rtl #contextualHelp .contextualHelp.before .arrowContainer svg.pointingArrow {
    transform: none
}

#contextualHelp .contextualHelp.after {
    -ms-grid-columns: 40px auto;
    grid-template-columns: 40px auto
}

#contextualHelp .contextualHelp.after .helpBody {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 2;
    grid-column-start: 2
}

#contextualHelp .contextualHelp.after .arrowContainer {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 1;
    grid-column-start: 1;
    margin-right: 2px
}

#contextualHelp .contextualHelp.after .arrowContainer svg.pointingArrow {
    stroke: #caa46d
}

.rtl #contextualHelp .contextualHelp.after .arrowContainer svg.pointingArrow {
    transform: scale(-1, -1)
}

#marketingBonusGoldPopup .bonusDisplayBox {
    width: 547px;
    background-color: #e1d2b2;
    position: relative;
    margin: 10px auto;
    border: solid 1px #998975;
    z-index: 1;
    text-align: center;
    font-weight: bold;
    font-size: 21px;
    padding-bottom: 100px;
    top: 50px;
    opacity: 0;
    transform: scale(0.8);
    animation: reveal 1000ms 500ms forwards
}

#marketingBonusGoldPopup .bonusDisplayBox:before,
#marketingBonusGoldPopup .bonusDisplayBox:after {
    content: "";
    display: block;
    position: absolute
}

#marketingBonusGoldPopup .bonusDisplayBox:before {
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    right: 3px;
    background-image: url('../../img_rtl/views/marketingBonusGoldPopup/illustration.png');
    background-repeat: no-repeat;
    background-position: bottom
}

#marketingBonusGoldPopup .bonusDisplayBox:after {
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    border: solid 1px #998975;
    background-color: #e1d2b2;
    z-index: -1
}

#marketingBonusGoldPopup .bonusDisplayBox p {
    opacity: 0
}

#marketingBonusGoldPopup .bonusDisplayBox p.intro {
    animation: reveal 1000ms 1500ms forwards
}

#marketingBonusGoldPopup .bonusDisplayBox p.goldAmount {
    margin-top: 25px;
    margin-bottom: 25px;
    animation: reveal 500ms 2500ms forwards, zoom 1000ms 3000ms forwards
}

#marketingBonusGoldPopup .bonusDisplayBox p.outro {
    animation: reveal 1000ms 4500ms forwards
}

#marketingBonusGoldPopup .bonusDisplayBox .centeredContainer {
    width: 330px;
    margin: 0 auto;
    font-size: 19px
}

#marketingBonusGoldPopup .buttonContainer {
    text-align: center
}

#marketingBonusGoldPopup .buttonContainer button#closeButton {
    margin-top: 20px;
    margin-bottom: 20px;
    opacity: 0;
    top: 25px;
    animation: reveal 1000ms 5500ms forwards
}

@keyframes reveal {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1;
        top: 0;
        transform: scale(1)
    }
}

@keyframes zoom {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.25)
    }
    100% {
        transform: scale(1)
    }
}

#vacationModeConfirmationDialog {
    width: 420px
}

#vacationModeConfirmationDialog .title {
    font-size: 12px;
    font-weight: bold
}

#vacationModeConfirmationDialog .text {
    margin-bottom: 15px;
    margin-top: 15px
}

#vacationModeConfirmationDialog .villages table td {
    font-size: 12px
}

#vacationModeConfirmationDialog .villages table th {
    font-size: 12px;
    background-color: #fce6c4
}

#waveBuilderDialog .featureContent {
    position: relative
}

#waveBuilderDialog .featureContent p {
    max-width: 65%;
    margin: 0
}

#waveBuilderDialog .featureContent h3 {
    margin-bottom: 5px
}

#waveBuilderDialog .featureContent:before {
    content: "";
    background-image: url('../../img_rtl/views/waveBuilderDialog/scroll.png');
    width: 170px;
    height: 96px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px
}

#waveBuilderDialog .goldAmount {
    font-size: 17px;
    font-weight: bold;
    text-align: left;
    margin-top: 10px
}

#waveBuilderDialog .benefits {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 220px 1fr;
    grid-template-columns: 220px 1fr
}

#waveBuilderDialog .benefits .illustration {
    background-image: url('../../img_rtl/views/waveBuilderDialog/roman.png');
    min-height: 437px;
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row-align: end;
    align-self: end
}

#waveBuilderDialog .benefits .benefitsList {
    -ms-grid-column: 2;
    grid-column-start: 2
}

#waveBuilderDialog .benefits .benefitsList h3 {
    margin-bottom: 5px
}

#waveBuilderDialog .benefits .benefitsList h3:not(:first-of-type) {
    margin-top: 40px
}

#waveBuilderDialog .benefits .benefitsList p {
    margin: 0
}

#waveBuilderDialog .benefits .benefitsList p:last-of-type {
    margin-bottom: 40px
}

#waveBuilderDialog .buttonWrapper {
    text-align: left
}

#waveBuilderDialog .buttonWrapper .notice,
#waveBuilderDialog .buttonWrapper .error {
    font-weight: bold
}

div#sysmsg {
    width: 550px;
    margin: auto;
    word-break: break-word
}

div#sysmsg .termsAcceptButton {
    float: left;
    margin-top: 10px
}

div#sysmsg button#cancel {
    float: right;
    margin-top: 10px
}

div#punishmentMsgButtons {
    margin: auto
}

div#punishmentMsgButtons button.continueButton {
    float: right;
    margin-top: 10px
}

div#punishmentMsgButtons button.contactSupportButton {
    float: left;
    margin-top: 10px
}

.truceImageAutumn,
.truceImageNeutral,
.truceImageSpring,
.truceImageSummer,
.truceImageWinter {
    width: 550px;
    height: 200px;
    padding: 0 0 25px 0;
    float: right
}

.truceImageAutumn {
    background-image: url('../../img_rtl/views/truce/truceAutumn.jpg')
}

.truceImageNeutral {
    background-image: url('../../img_rtl/views/truce/truceNeutral.jpg')
}

.truceImageSpring {
    background-image: url('../../img_rtl/views/truce/truceSpring.jpg')
}

.truceImageSummer {
    background-image: url('../../img_rtl/views/truce/truceSummer.jpg')
}

.truceImageWinter {
    background-image: url('../../img_rtl/views/truce/truceWinter.jpg')
}

#sysmsg.natar_end_factions {
    text-align: center;
    font-size: 16px;
    line-height: 1.35em;
    color: #5e463a;
    background-color: #f4efe4;
    margin: -9px -6px -10px;
    padding: 0 6px 10px;
    width: auto
}

#sysmsg.natar_end_factions .titleInHeader {
    text-align: right
}

#sysmsg.natar_end_factions #factionVictoryStatistics {
    border-top: 8px solid #d2bda1;
    margin: 0 -6px 35px
}

#sysmsg.natar_end_factions #factionVictoryStatistics:before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: -10px;
    right: 0
}

#sysmsg.natar_end_factions #factionVictoryStatistics .podium {
    transform: translateY(19px)
}

#sysmsg.natar_end_factions>.headline {
    font-weight: bold;
    font-size: 17px;
    font-family: IRANSans;
    margin-bottom: 20px
}

#sysmsg.natar_end_factions .description {
    text-align: right;
    margin-bottom: 20px
}

#sysmsg.natar_end_factions .factions,
#sysmsg.natar_end_factions .players {
    background-color: #efe3ca;
    border: 1px solid #beae9a;
    border-radius: 2px;
    margin-bottom: 15px;
    padding: 10px;
    text-align: right;
    border-bottom: 1px solid #dcb183
}

#sysmsg.natar_end_factions .factions>.headline {
    font-weight: bold;
    font-size: 19px;
    background-color: #dec264;
    margin: -10px -10px 20px;
    border-radius: 2px 2px 0 0;
    padding: 1em 92px 1em 0;
    position: relative
}

#sysmsg.natar_end_factions .factions>.headline:before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('../../img_rtl/views/systemMessage/endGameFactions/winner.png');
    width: 82px;
    height: 72px
}

#sysmsg.natar_end_factions .players>div {
    min-height: 56px;
    position: relative;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 66px 1fr;
    grid-template-columns: 66px 1fr
}

#sysmsg.natar_end_factions .players>div:not(:first-child) {
    margin-top: 10px
}

#sysmsg.natar_end_factions .players>div:before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

#sysmsg.natar_end_factions .players>div>span {
    -ms-grid-column: 2;
    grid-column-start: 2;
    display: inline-block;
    -ms-grid-row-align: center;
    align-self: center
}

.ie #sysmsg.natar_end_factions .players>div>span {
    padding: 5px 0
}

#sysmsg.natar_end_factions .players>div.population:before {
    background-image: url('../../img_rtl/views/systemMessage/endGameFactions/population.png');
    width: 56px;
    height: 56px
}

#sysmsg.natar_end_factions .players>div.off:before {
    background-image: url('../../img_rtl/views/systemMessage/endGameFactions/off.png');
    width: 56px;
    height: 60px
}

#sysmsg.natar_end_factions .players>div.def:before {
    background-image: url('../../img_rtl/views/systemMessage/endGameFactions/def.png');
    width: 56px;
    height: 56px
}

#sysmsg.natar_end_factions .f16 {
    display: none
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"]+label[data-text]:before,
#content.activate .activateWithSectors .activationScreen #presentation.confirmation #selectedTribe .tribeName {
    position: absolute;
    right: 50%;
    transform: translateX(50%)
}

#content.activate .activateWithSectors hr {
    height: 1px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px dotted #d3d3d3;
    margin-bottom: 20px
}

#content.activate .activateWithSectors div.btn {
    text-align: center
}

#content.activate .activateWithSectors div.notice {
    margin-bottom: 15px
}

#content.activate .activateWithSectors .activation {
    margin-bottom: 20px
}

#content.activate .activateWithSectors .startsIn {
    text-align: center;
    margin-bottom: 20px
}

#content.activate .activateWithSectors .startsIn .activation_time {
    color: #ff8000;
    font-size: 21px;
    text-align: center;
    margin: 5px 0
}

#content.activate .activateWithSectors .activation .code {
    font-weight: bold
}

#content.activate .activateWithSectors div.email {
    margin-bottom: 20px
}

#content.activate .activateWithSectors div.email table td.label {
    padding-right: 175px
}

#content.activate .activateWithSectors div.email table td.input {
    width: 56%
}

#content.activate .activateWithSectors .error2 {
    color: #ff8000
}

#content.activate .activateWithSectors .unavailable {
    font-size: 25px
}

#content.activate .activateWithSectors .container .kind {
    float: right;
    width: 90px;
    position: relative
}

#content.activate .activateWithSectors .container .description-container {
    width: 400px;
    height: 220px;
    float: right;
    background-image: url('../../img_rtl/activate/volkBackground-rtl.jpg');
    padding: 15px 18px;
    position: relative
}

#content.activate .activateWithSectors .container .headline {
    font-size: 120%;
    font-weight: bold;
    margin-bottom: 10px
}

#content.activate .activateWithSectors .container .description {
    display: none;
    height: 200px
}

#content.activate .activateWithSectors #sector .sectorDescription {
    padding-bottom: 20px
}

#content.activate .activateWithSectors #sector div.sectorSelect {
    position: relative;
    width: 513px;
    height: 198px
}

#content.activate .activateWithSectors #sector .map {
    margin-left: 10px;
    padding: 6px 7px 7px 6px;
    float: right;
    width: 185px;
    height: 185px;
    background-image: url('../../img_rtl/activate/map-rtl.png');
    position: relative
}

#content.activate .activateWithSectors #sector .map.aeu {
    background-image: url('../../img_rtl/activate/map-aeu.png')
}

#content.activate .activateWithSectors #sector .map.territorial {
    background-image: url('../../img_rtl/activate/map-territorial.png')
}

#content.activate .activateWithSectors #sector .map .sector {
    width: 92px;
    height: 92px;
    float: left
}

#content.activate .activateWithSectors #sector .map #no {
    margin-left: 1px
}

#content.activate .activateWithSectors #sector .map #sw {
    margin-top: 1px
}

#content.activate .activateWithSectors #sector .map #so {
    margin-top: 1px;
    margin-left: 1px
}

#content.activate .activateWithSectors #sector .map .sector .active,
#content.activate .activateWithSectors #sector .map .sector .hover,
#content.activate .activateWithSectors #sector .map .sector .disabled {
    background-image: url('../../img_rtl/activate/mapActive.png')
}

#content.activate .activateWithSectors #sector .map .sector .highlight {
    width: 92px;
    height: 92px
}

#content.activate .activateWithSectors #sector .map .sector .hover {
    background-position: right -100px
}

#content.activate .activateWithSectors #sector .map .sector .disabled {
    background-position: right -200px
}

#content.activate .activateWithSectors div.vidDescription {
    padding: 0 20px 20px
}

#content.activate .activateWithSectors .container div.vidSelect {
    position: relative;
    width: 541px;
    height: 252px
}

#content.activate .activateWithSectors .container .kind .vid {
    background-image: url('../../img_rtl/activate/volkIcon-rtl.png');
    width: 80px;
    height: 72px;
    cursor: pointer;
    padding: 6px 0
}

#content.activate .activateWithSectors .container .kind .vid1 {
    background-position: -11px -388px
}

#content.activate .activateWithSectors .container .kind .vid2 {
    background-position: -11px -688px
}

#content.activate .activateWithSectors .container .kind .vid3 {
    background-position: -11px -88px
}

#content.activate .activateWithSectors .container .kind .vid1Highlight {
    background-position: -11px -482px
}

#content.activate .activateWithSectors .container .kind .vid2Highlight {
    background-position: -11px -782px
}

#content.activate .activateWithSectors .container .kind .vid3Highlight {
    background-position: -11px -182px
}

#content.activate .activateWithSectors .container .kind .vid1Active {
    background-position: -11px -582px
}

#content.activate .activateWithSectors .container .kind .vid2Active {
    background-position: -11px -882px
}

#content.activate .activateWithSectors .container .kind .vid3Active {
    background-position: -11px -282px
}

#content.activate .activateWithSectors .container .description-container li {
    line-height: 140%;
    padding: 2px 0;
    background-image: url('../../img_rtl/activate/dot.png');
    padding-right: 16px;
    background-position: right 9px
}

#content.activate .activateWithSectors .container .description-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

#content.activate .activateWithSectors .container .description-container .text {
    width: 285px
}

#content.activate .activateWithSectors .container .description-container .special {
    margin-bottom: 10px
}

#content.activate .activateWithSectors .container .description-container .bubble {
    background-image: url('../../img_rtl/activate/bubble-rtl.png');
    height: 30px;
    right: -10px;
    position: absolute;
    width: 38px
}

#content.activate .activateWithSectors .container .container .description-container .vid1 .bubble {
    top: 115px
}

#content.activate .activateWithSectors .container .container .description-container .vid2 .bubble {
    top: 200px
}

#content.activate .activateWithSectors .container .container .description-container .vid3 .bubble {
    top: 30px
}

#content.activate .activateWithSectors .container .submitButton {
    text-align: center;
    margin-top: 15px
}

#content.activate .activateWithSectors .container .boxGrey .boxTop,
#content.activate .activateWithSectors .container .boxGrey .boxBottom,
#content.activate .activateWithSectors .container .boxGrey .boxMiddle {
    width: 551px
}

#content.activate .activateWithSectors .container .boxGrey .content {
    position: relative;
    padding: 15px 5px
}

#content.activate .activateWithSectors .container .boxVidInfo {
    margin-bottom: 25px
}

#content.activate .activateWithSectors .container .boxVidInfo .greenbox-content {
    padding: 0 20px;
    width: 515px;
    color: #228b22;
    font-weight: bold
}

#content.activate .activateWithSectors .container .avatar {
    background-image: url('../../img_rtl/activate/avatars-rtl.png');
    height: 180px;
    width: 190px;
    position: absolute;
    left: -35px
}

#content.activate .activateWithSectors #vid .avatar {
    bottom: -72px
}

#content.activate .activateWithSectors .avatar.vid1 {
    background-position: 0 -416px
}

#content.activate .activateWithSectors .avatar.vid2 {
    background-position: 0 -216px
}

#content.activate .activateWithSectors .avatar.vid3 {
    background-position: 0 -16px
}

#content.activate .activateWithSectors .changeVid a {
    color: #333;
    background-image: url('../../img_rtl/activate/arrow-rtl.png');
    display: block;
    height: 20px;
    padding-right: 30px;
    line-height: 20px;
    margin-top: 10px
}

#content.activate .activateWithSectors .start {
    background-image: url('../../img_rtl/activate/bubbleSector-rtl.jpg');
    float: left;
    height: 25px;
    padding: 26px 30px 25px 20px;
    width: 254px
}

#content.activate .activateWithSectors .start select {
    width: 100%
}

#content.activate .activateWithSectors #sector .buttonContainer {
    float: left;
    padding-right: 5px;
    padding-top: 20px;
    width: 299px;
    height: 25px
}

#content.activate .activateWithSectors #sector .boxGrey .content {
    padding: 15px 19px;
    position: relative
}

#content.activate .activateWithSectors #sector .avatar {
    bottom: -16px
}

#content.activate .activateWithSectors {
    font-size: 120%;
    line-height: 1.5rem;
    color: #f2f2f2;
    background-image: url('../../img_rtl/activate/troops-background.png');
    background-size: contain;
    background-position: bottom;
    margin: 0 -17px -20px;
    padding: 0 17px 0
}

#center #contentOuterContainer #content.activate .activateWithSectors h1.titleInHeader {
    text-align: center;
    right: 90px;
    left: 90px
}

#content.activate .activateWithSectors .activationScreen {
    width: 100%
}

#content.activate .activateWithSectors .activationScreen * {
    box-sizing: border-box
}

#content.activate .activateWithSectors .activationScreen #presentation {
    padding: 7px 7px 10px;
    min-height: 330px;
    position: relative;
    width: 100%;
    border-radius: 4px;
    margin-top: 15px
}

#content.activate .activateWithSectors .activationScreen #presentation.sectors {
    background-color: transparent
}

#content.activate .activateWithSectors .activationScreen #presentation.confirmation {
    width: 100%;
    height: 100%;
    background-color: rgba(144, 120, 92, 0.5)
}

#content.activate .activateWithSectors .activationScreen #presentation svg {
    width: 100%;
    min-height: 250px;
    box-sizing: border-box;
    overflow: visible;
    position: relative
}

#content.activate .activateWithSectors .activationScreen #presentation svg .outer {
    stroke: #e4cd98;
    stroke-width: 5;
    fill: #bb8050
}

#content.activate .activateWithSectors .activationScreen #presentation svg .inner {
    fill: #fdeaa7
}

#content.activate .activateWithSectors .activationScreen #presentation svg .arrowFirst {
    position: absolute;
    top: 0
}

#content.activate .activateWithSectors .activationScreen #presentation h2 {
    font-size: 200%;
    padding: 0;
    margin: 0;
    color: #7b2e00;
    text-shadow: 1px 0 1px rgba(85, 85, 85, 0.35), 1px 1px 1px rgba(85, 85, 85, 0.35), 0 1px 1px rgba(85, 85, 85, 0.35), -1px 1px 1px rgba(85, 85, 85, 0.35), -1px 0 1px rgba(85, 85, 85, 0.35), -1px -1px 1px rgba(85, 85, 85, 0.35), 0 -1px 1px rgba(85, 85, 85, 0.35), 1px -1px 1px rgba(85, 85, 85, 0.35);
    text-transform: uppercase
}

#content.activate .activateWithSectors .activationScreen #presentation #descriptions {
    position: relative;
    min-height: 220px
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-top: 10px
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input {
    display: none
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input+.selector {
    flex: 1;
    min-width: 80px;
    max-width: 80px;
    height: 80px;
    border: solid 2px #4f3d2d;
    border-radius: 3px;
    margin-right: 7px;
    margin-left: 7px;
    background-color: #fdeaa7;
    box-shadow: 2px 2px 30px #958371 inset, -2px -2px 30px #958371 inset;
    position: relative;
    cursor: pointer;
    display: block;
    transition-duration: 150ms
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input+.selector[data-text]:before {
    content: attr(data-text);
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 2px;
    background-color: #ed1c24;
    border-bottom: solid 1px #b3191d;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: -22px;
    left: -2px;
    z-index: 2;
    font-size: 70%;
    line-height: 150%;
    font-weight: bold
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input+.selector:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: 0 80px
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input+.selector:hover:after {
    background-position: 0 0
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input+.selector+.tribeDescription {
    width: calc(100% - 30px);
    padding: 25px;
    position: absolute;
    top: 15px;
    right: 15px;
    height: 200px;
    z-index: 1;
    color: transparent;
    transition-duration: 150ms;
    opacity: 0
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input+.selector+.tribeDescription[data-text]:before {
    content: attr(data-text);
    width: auto;
    background-color: #35700e;
    border-bottom: solid 2px #2f2919;
    color: #f2f2f2;
    left: 25px;
    top: 2px;
    padding: 7px;
    font-weight: bold;
    position: absolute;
    text-transform: uppercase;
    font-size: 80%
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input+.selector+.tribeDescription ul {
    top: -15px;
    right: 0;
    padding: 70px 25px 0 0;
    width: 100%;
    position: absolute;
    height: calc(100% + 20px);
    font-weight: bold;
    list-style: none
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input+.selector+.tribeDescription ul li {
    max-width: calc(100% - 180px);
    padding-right: 25px;
    line-height: 16px;
    margin-bottom: 10px
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input+.selector+.tribeDescription ul li:before {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    margin-right: -25px
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input+.selector+.tribeDescription ul:after {
    content: "";
    position: absolute;
    width: 188px;
    height: 176px;
    bottom: -1px;
    left: 0;
    background-image: url('../../img_rtl/activate/avatars-rtl.png');
    background-position: 0 0;
    z-index: -1;
    opacity: 0
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input:not(:checked):active+.selector {
    box-shadow: none
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input:checked+.selector {
    border: solid 2px #f8d483;
    box-shadow: 2px 2px 30px #ba7e4d inset, -2px -2px 30px #ba7e4d inset;
    cursor: default
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input:checked+.selector:after {
    background-position: 0 0
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input:checked+.selector+.tribeDescription {
    z-index: 2;
    opacity: 1;
    color: #555
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input:checked+.selector+.tribeDescription ul:after {
    opacity: 1
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="1"]+.selector:after {
    background-image: url('../../img_rtl/activate/tribeSelection/tribe1.png')
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="1"]+.selector+.tribeDescription ul li:before {
    background-image: url('../../img_rtl/units/roman/icon/roman.png')
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="1"]+.selector+.tribeDescription ul:after {
    background-position: 0 -433px;
    height: 202px
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="2"]+.selector:after {
    background-image: url('../../img_rtl/activate/tribeSelection/tribe2.png')
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="2"]+.selector+.tribeDescription ul li:before {
    background-image: url('../../img_rtl/units/teuton/icon/teuton.png')
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="2"]+.selector+.tribeDescription ul:after {
    background-position: 0 -217px;
    height: 202px
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="3"]+.selector:after {
    background-image: url('../../img_rtl/activate/tribeSelection/tribe3.png');
    background-position-x: -8px
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="3"]+.selector+.tribeDescription ul li:before {
    background-image: url('../../img_rtl/units/gaul/icon/gaul.png')
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="3"]+.selector+.tribeDescription ul:after {
    background-position: 0 0
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="6"]+.selector:after {
    background-image: url('../../img_rtl/activate/tribeSelection/tribe6.png')
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="6"]+.selector+.tribeDescription ul li:before {
    background-image: url('../../img_rtl/units/egyptian/icon/egyptian.png')
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="6"]+.selector+.tribeDescription ul:after {
    background-position: 0 -649px;
    height: 215px;
    bottom: -14px
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="7"]+.selector:after {
    background-image: url('../../img_rtl/activate/tribeSelection/tribe7.png')
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="7"]+.selector+.tribeDescription ul li:before {
    background-image: url('../../img_rtl/units/hun/icon/hun.png')
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="7"]+.selector+.tribeDescription ul:after {
    background-position: 0 -851px;
    height: 216px;
    bottom: -1px
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="6"]+.selector+.tribeDescription h2,
#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="7"]+.selector+.tribeDescription h2 {
    margin-right: 180px
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="6"]+.selector+.tribeDescription ul,
#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="7"]+.selector+.tribeDescription ul {
    width: calc(100% - 180px);
    right: 180px
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="6"]+.selector+.tribeDescription ul:after,
#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="7"]+.selector+.tribeDescription ul:after {
    right: -180px
}

#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="6"]+.selector+.tribeDescription ul li,
#content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="7"]+.selector+.tribeDescription ul li {
    max-width: 100%
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer {
    width: 317px;
    height: 297px;
    padding: 10px;
    box-sizing: content-box;
    background-color: rgba(144, 120, 92, 0.5);
    border-radius: 4px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer:after {
    content: "";
    width: 317px;
    height: 297px;
    background-image: url('../../img_rtl/activate/sectorSelection/map-background-rtl.png');
    z-index: -1;
    position: absolute
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map {
    border: solid 2px rgba(255, 255, 255, 0.4);
    box-sizing: content-box;
    width: 276px;
    height: 256px;
    right: 28px;
    top: 28px;
    position: absolute
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map:after {
    content: "";
    width: 276px;
    height: 256px;
    background-image: url('../../img_rtl/activate/sectorSelection/map.png');
    background-repeat: no-repeat;
    position: absolute;
    box-sizing: content-box
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map:before {
    content: "";
    width: 276px;
    height: 256px;
    background: url('../../img_rtl/activate/sectorSelection/sector-divider-rtl.png') center;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
    box-shadow: 2px 2px 40px #ceac76 inset, -2px -2px 40px #ceac76 inset, 2px -2px 40px #ceac76 inset, -2px 2px 40px #ceac76 inset;
    box-sizing: content-box
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map.territorial:after {
    background-image: url('../../img_rtl/activate/sectorSelection/map-territorial.png')
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"] {
    display: none
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"]:disabled+label {
    background-color: rgba(50, 50, 50, 0.5);
    cursor: auto
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"]+label {
    width: 138px;
    height: 127px;
    display: inline-block;
    position: absolute;
    z-index: 6;
    color: #655642;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    font-weight: bold;
    font-size: 80%;
    text-transform: uppercase;
    text-align: center;
    background-color: rgba(196, 158, 102, 0.5);
    background-position: top center;
    transition-duration: 250ms;
    cursor: pointer
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"]+label:hover {
    background-color: rgba(116, 94, 60, 0.5);
    color: #fdefcc
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"]+label:active {
    box-shadow: 0 0 40px #5e3f2a inset
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"]+label[data-text]:before {
    content: attr(data-text);
    width: auto;
    bottom: 10px;
    background-color: #35700e;
    padding-right: 5px;
    padding-left: 5px;
    color: #f2f2f2;
    font-size: 90%;
    opacity: .65
}

.territorial label[data-text]:before {
    color: #655642 !important;
    background-color: #f1b900 !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5)
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"][value="nw"]+label {
    left: 0;
    top: 0;
    padding-top: 10px
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"][value="no"]+label {
    right: 0;
    top: 0;
    padding-top: 10px
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"][value="sw"]+label {
    left: 0;
    bottom: 0;
    padding-top: 90px;
    height: 129px
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"][value="so"]+label {
    right: 0;
    bottom: 0;
    padding-top: 90px;
    height: 129px
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"][value="sw"]+label[data-text]:before,
#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"][value="so"]+label[data-text]:before {
    bottom: 40px
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"]:checked+label {
    background-color: transparent;
    background: url('../../img_rtl/activate/sectorSelection/banner-rtl.png') no-repeat center;
    cursor: default;
    transition-timing-function: ease-in
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"]:checked+label:hover {
    background-color: transparent;
    color: #655642
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"]:checked+label:active {
    background-color: transparent;
    color: #655642;
    box-shadow: none
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"]:checked+label[data-text]:before {
    opacity: 1
}

#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"]:checked[value="sw"]+label[data-text],
#content.activate .activateWithSectors .activationScreen #presentation #activationMapContainer #map input[name="sector"]:checked[value="so"]+label[data-text] {
    background-position: center 10px
}

#content.activate .activateWithSectors .activationScreen #presentation.confirmation #activationMapContainer {
    top: 10px;
    left: 0;
    transform: scale(0.78);
    background-color: transparent;
    position: absolute
}

#content.activate .activateWithSectors .activationScreen #presentation.confirmation #activationMapContainer input[name="sector"]+label {
    cursor: default !important;
    pointer-events: none
}

#content.activate .activateWithSectors .activationScreen #presentation.confirmation #selectedTribe {
    position: absolute;
    top: 55px;
    right: 55px
}

#content.activate .activateWithSectors .activationScreen #presentation.confirmation #selectedTribe .character {
    width: 200px;
    height: 190px;
    margin-bottom: 10px;
    background-image: url('../../img_rtl/activate/avatars-rtl.png');
    background-position: 0 0
}

#content.activate .activateWithSectors .activationScreen #presentation.confirmation #selectedTribe.tribe1 .character {
    background-position: 0 -433px
}

#content.activate .activateWithSectors .activationScreen #presentation.confirmation #selectedTribe.tribe2 .character {
    background-position: 0 -217px
}

#content.activate .activateWithSectors .activationScreen #presentation.confirmation #selectedTribe.tribe3 .character {
    background-position: 0 0
}

#content.activate .activateWithSectors .activationScreen #presentation.confirmation #selectedTribe.tribe6 .character {
    height: 207px;
    background-position: 0 -648px;
    margin-top: -7px
}

#content.activate .activateWithSectors .activationScreen #presentation.confirmation #selectedTribe.tribe7 .character {
    height: 215px;
    background-position: 0 -863px;
    margin-bottom: 0
}

#content.activate .activateWithSectors .activationScreen .acceptChallenge {
    width: 100%;
    text-align: center;
    position: relative;
    margin-top: 20px;
    z-index: 3;
    font-weight: bold;
    text-shadow: 1px 0 2px #000, 1px 1px 2px #000, 0 1px 2px #000, -1px 1px 2px #000, -1px 0 2px #000, -1px -1px 2px #000, 0 -1px 2px #000, 1px -1px 2px #000
}

#content.activate .activateWithSectors .activationScreen .gameVersionOption {
    display: none
}

#content.activate .activateWithSectors .activationScreen .buttonContainer {
    width: 100%;
    height: 100px;
    position: relative;
    z-index: 2;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1 {
    display: inline-block;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row-align: center;
    align-self: center;
    -ms-grid-column-align: center;
    justify-self: center
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.confirmation {
    position: relative;
    z-index: 1;
    height: 38px;
    line-height: 22px;
    padding: 6px 30px;
    font-size: 17px;
    font-weight: bold;
    text-align: right;
    border-radius: 7px;
    white-space: nowrap;
    color: #2c2c2c;
    background-image: linear-gradient(to bottom, #f8c000, #f0a600);
    background-color: #d8cfa7;
    border: 2px solid #332805;
    box-shadow: inset 2px 0 2px -1px #6f561a, inset -2px 0 2px -1px #6f4f1b, inset 0 3px 2px -1px #e2bb2e, inset 0 -3px 2px -1px rgba(75, 58, 10, 0.6)
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.confirmation:hover,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.confirmation:focus {
    color: #332805;
    background-image: none;
    background-color: #f8c000;
    border-color: #60542c;
    box-shadow: inset 0 20px 25px -10px rgba(255, 255, 255, 0.5)
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.confirmation:active {
    color: #60542c;
    background-image: linear-gradient(to top, #f8c000, #f0a600);
    box-shadow: inset 2px 0 2px -1px #6f561a, inset -2px 0 2px -1px #6f4f1b
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.confirmation.disabled,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.confirmation:disabled {
    background-image: none;
    color: #60542c;
    border-color: #60542c;
    background-color: #b39e86;
    text-shadow: none;
    box-shadow: none
}

.ie #content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.confirmation {
    margin-top: 40px
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow {
    transform: scale(1.5)
}

.ie #content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow {
    margin-top: 40px
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:disabled,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow.disabled {
    text-shadow: none
}

body:not(.safari) #content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:disabled span,
body:not(.safari) #content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow.disabled span {
    transition: padding 250ms
}

body:not(.safari) #content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:disabled span:before,
body:not(.safari) #content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow.disabled span:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    display: block;
    top: 3px;
    left: 15px;
    background-image: url('../../img_rtl/views/activation/withSectors/loading.png');
    background-size: contain;
    pointer-events: none;
    opacity: 0;
    transition: opacity 250ms
}

body:not(.safari) #content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:disabled.loading span,
body:not(.safari) #content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow.disabled.loading span {
    padding-left: 20px
}

body:not(.safari) #content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:disabled.loading span:before,
body:not(.safari) #content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow.disabled.loading span:before {
    opacity: .4;
    animation: loadingSpinner 2s linear infinite
}

@keyframes loadingSpinner {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(-360deg)
    }
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled) {
    animation: activationButtonGrow 6s ease-in-out infinite
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):not(:hover):not(:focus):not(:active) {
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8), 0 1px 0 rgba(0, 0, 0, 0.8), -1px 1px 0 rgba(0, 0, 0, 0.8), -1px 0 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8), 0 -1px 0 rgba(0, 0, 0, 0.8), 1px -1px 0 rgba(0, 0, 0, 0.8)
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):not(:hover):not(:focus):not(:active) span {
    animation: activationButtonTextGlow 6s ease-in-out infinite
}

.ie #content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled) {
    animation: none
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):before,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 5px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    pointer-events: none
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):before {
    background-image: url('../../img_rtl/views/activation/withSectors/buttonHighlight.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: -50px 0;
    animation: activationButtonFlash 6s linear infinite
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):after {
    opacity: 0;
    background-color: #8ad220;
    animation: activationButtonGlow 6s ease-in-out infinite
}

.ie #content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):after {
    animation: none
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled) span {
    pointer-events: none;
    position: relative;
    z-index: 2
}

.ie #content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled) span {
    animation: none
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):focus,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):hover,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):active {
    animation-play-state: paused
}

#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):focus:before,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):focus:after,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):focus span,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):hover:before,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):hover:after,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):hover span,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):active:before,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):active:after,
#content.activate .activateWithSectors .activationScreen .buttonContainer button.textButtonV1.playNow:not(:disabled):active span {
    animation-play-state: paused
}

@keyframes activationButtonFlash {
    0% {
        background-position: 150% 0
    }
    92% {
        background-position: 150% 0
    }
    100% {
        background-position: -50px 0
    }
}

@keyframes activationButtonGrow {
    0% {
        transform: scale(1.5)
    }
    10% {
        transform: scale(1.5)
    }
    35% {
        transform: scale(1.65)
    }
    60% {
        transform: scale(1.5)
    }
    100% {
        transform: scale(1.5)
    }
}

@keyframes activationButtonGlow {
    0% {
        opacity: 0
    }
    10% {
        opacity: 0
    }
    35% {
        opacity: .9
    }
    60% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

@keyframes activationButtonTextGlow {
    0% {
        text-shadow: 1px 0 0 rgba(0, 0, 0, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8), 0 1px 0 rgba(0, 0, 0, 0.8), -1px 1px 0 rgba(0, 0, 0, 0.8), -1px 0 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8), 0 -1px 0 rgba(0, 0, 0, 0.8), 1px -1px 0 rgba(0, 0, 0, 0.8)
    }
    10% {
        text-shadow: 1px 0 0 rgba(0, 0, 0, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8), 0 1px 0 rgba(0, 0, 0, 0.8), -1px 1px 0 rgba(0, 0, 0, 0.8), -1px 0 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8), 0 -1px 0 rgba(0, 0, 0, 0.8), 1px -1px 0 rgba(0, 0, 0, 0.8)
    }
    35% {
        text-shadow: 1px 0 0 rgba(91, 91, 91, 0.8), 1px 1px 0 rgba(91, 91, 91, 0.8), 0 1px 0 rgba(91, 91, 91, 0.8), -1px 1px 0 rgba(91, 91, 91, 0.8), -1px 0 0 rgba(91, 91, 91, 0.8), -1px -1px 0 rgba(91, 91, 91, 0.8), 0 -1px 0 rgba(91, 91, 91, 0.8), 1px -1px 0 rgba(91, 91, 91, 0.8)
    }
    60% {
        text-shadow: 1px 0 0 rgba(0, 0, 0, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8), 0 1px 0 rgba(0, 0, 0, 0.8), -1px 1px 0 rgba(0, 0, 0, 0.8), -1px 0 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8), 0 -1px 0 rgba(0, 0, 0, 0.8), 1px -1px 0 rgba(0, 0, 0, 0.8)
    }
}

#content.activate .activateWithFactions .selection label:after {
    background-image: linear-gradient(to bottom, #8fb74f 5%, #add076 13%, #add076 32%, #addd61 48%, #5b7a2a 72%, #618030 93%, #7fa246 100%)
}

#content.activate .activateWithFactions .selection label {
    background-image: linear-gradient(to bottom, #cba467 5%, #f3e2ae 13%, #efbf7b 32%, #aa8050 48%, #835e35 72%, #ad8a54 93%, #d7b672 100%);
    border: 1px solid #34220d;
    border-radius: 4px
}

#content.activate .activateWithFactions .selection label:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: #664e40;
    border: solid 1px #44321d;
    border-radius: 1px
}

#content.activate .activateWithFactions .selection .description {
    background-color: #efe3ca;
    border: 2px solid #beae9a;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.5)
}

#content.activate .mobileCover {
    display: none
}

@media screen and (max-width:620px) {
    .mobileOptimized #content.activate .mobileCover {
        display: block;
        position: absolute;
        top: 67px;
        left: 10px;
        bottom: 10px;
        right: 10px;
        background-position: bottom;
        background-color: #f4efe4;
        background-image: url('../../img_rtl/views/activation/withFactions/activateBackground.png')
    }
}

#content.activate .activateWithFactions {
    box-sizing: border-box;
    color: #5e463a;
    margin: -9px -14px -20px;
    padding: 15px 14px;
    position: relative;
    overflow: hidden;
    background-color: #f4efe4;
    background-image: url('../../img_rtl/views/activation/withFactions/activateBackground.png');
    background-position: bottom
}

@media screen and (max-width:620px) {
    .mobileOptimized #content.activate .activateWithFactions {
        background: 0
    }
}

#content.activate .activateWithFactions .steps {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 552px 552px 552px;
    grid-template-columns: 552px 552px 552px;
    grid-column-gap: 30px;
    -ms-grid-rows: auto 400px 180px;
    grid-template-rows: auto 400px 180px;
    transition: transform 1000ms ease-in-out
}

.ie #content.activate .activateWithFactions .steps {
    -ms-grid-columns: 582px 582px 582px;
    grid-template-columns: 582px 582px 582px
}

#content.activate .activateWithFactions.selectTribe .steps {
    transform: translateX(0)
}

#content.activate .activateWithFactions.selectFaction .steps {
    transform: translateX(582px)
}

#content.activate .activateWithFactions.confirm .steps {
    transform: translateX(1164px)
}

#content.activate .activateWithFactions .gameVersionOption {
    display: none
}

#content.activate .activateWithFactions h2 {
    font-size: 29px;
    line-height: 1em;
    color: #61332b;
    text-shadow: 1px 0 1px rgba(94, 70, 58, 0.1), 1px 1px 1px rgba(94, 70, 58, 0.1), 0 1px 1px rgba(94, 70, 58, 0.1), -1px 1px 1px rgba(94, 70, 58, 0.1), -1px 0 1px rgba(94, 70, 58, 0.1), -1px -1px 1px rgba(94, 70, 58, 0.1), 0 -1px 1px rgba(94, 70, 58, 0.1), 1px -1px 1px rgba(94, 70, 58, 0.1);
    text-transform: uppercase
}

#content.activate .activateWithFactions .stepDescription {
    font-weight: bold;
    font-size: 15px;
    line-height: 1.2rem;
    margin-bottom: 10px
}

.ie #content.activate .activateWithFactions .stepDescription {
    margin-left: 30px
}

#content.activate .activateWithFactions .selection {
    position: relative;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 105px 105px 105px 105px 105px;
    grid-template-columns: 105px 105px 105px 105px 105px;
    -ms-grid-rows: 130px 1fr;
    grid-template-rows: 130px 1fr;
    justify-content: space-between
}

.ie #content.activate .activateWithFactions .selection {
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-left: 30px
}

#content.activate .activateWithFactions .selection input {
    display: none
}

#content.activate .activateWithFactions .selection label {
    display: inline-block;
    -ms-grid-row: 1;
    grid-row-start: 1;
    grid-column-start: auto;
    position: relative;
    transition: filter 150ms
}

#content.activate .activateWithFactions .selection label:nth-of-type(1) {
    -ms-grid-column: 1
}

#content.activate .activateWithFactions .selection label:nth-of-type(2) {
    -ms-grid-column: 2
}

#content.activate .activateWithFactions .selection label:nth-of-type(3) {
    -ms-grid-column: 3
}

#content.activate .activateWithFactions .selection label:nth-of-type(4) {
    -ms-grid-column: 4
}

#content.activate .activateWithFactions .selection label:nth-of-type(5) {
    -ms-grid-column: 5
}

.ie #content.activate .activateWithFactions .selection label {
    width: 103px;
    -ms-grid-column-align: center;
    justify-self: center
}

#content.activate .activateWithFactions .selection label:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    transform: scaleY(0);
    transform-origin: bottom;
    transition-duration: 500ms;
    transition-timing-function: ease-in
}

#content.activate .activateWithFactions .selection label:before {
    z-index: 2;
    transition-duration: 150ms
}

#content.activate .activateWithFactions .selection label:hover {
    cursor: pointer;
    filter: brightness(1.2)
}

#content.activate .activateWithFactions .selection label:active {
    filter: brightness(1.1)
}

#content.activate .activateWithFactions .selection label:active:before {
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset, -1px -1px 5px rgba(0, 0, 0, 0.2) inset
}

#content.activate .activateWithFactions .selection .description {
    -ms-grid-row: 2;
    grid-row-start: 2;
    grid-column: 1 / 6;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    position: relative;
    height: 220px;
    margin-top: 25px
}

#content.activate .activateWithFactions .selection .description .optionDescription {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 20px;
    opacity: 0;
    transition: opacity 400ms ease-out
}

#content.activate .activateWithFactions .selection #selectionIndicator {
    position: absolute;
    top: 150px;
    width: 34px;
    height: 41px;
    background-image: url('../../img_rtl/hud/content/scrollTo.png');
    z-index: 99;
    transform: rotate(90deg);
    transform-origin: right;
    transition: right 500ms ease-in-out
}

#content.activate .activateWithFactions .selection input:checked+label:after {
    transform: scaleY(1)
}

#content.activate .activateWithFactions .selection input:checked+label:hover {
    filter: none;
    cursor: default
}

#content.activate .activateWithFactions .selection input:checked.option0~#selectionIndicator {
    right: 54px
}

#content.activate .activateWithFactions .selection input:checked.option0~.description .option0 {
    opacity: 1
}

#content.activate .activateWithFactions .selection input:checked.option0~.description .option0:before {
    transform: scale(1)
}

#content.activate .activateWithFactions .selection input:checked.option1~#selectionIndicator {
    right: 165px
}

#content.activate .activateWithFactions .selection input:checked.option1~.description .option1 {
    opacity: 1
}

#content.activate .activateWithFactions .selection input:checked.option1~.description .option1:before {
    transform: scale(1)
}

#content.activate .activateWithFactions .selection input:checked.option2~#selectionIndicator {
    right: 276px
}

#content.activate .activateWithFactions .selection input:checked.option2~.description .option2 {
    opacity: 1
}

#content.activate .activateWithFactions .selection input:checked.option2~.description .option2:before {
    transform: scale(1)
}

#content.activate .activateWithFactions .selection input:checked.option3~#selectionIndicator {
    right: 387px
}

#content.activate .activateWithFactions .selection input:checked.option3~.description .option3 {
    opacity: 1
}

#content.activate .activateWithFactions .selection input:checked.option3~.description .option3:before {
    transform: scale(1)
}

#content.activate .activateWithFactions .selection input:checked.option4~#selectionIndicator {
    right: 498px
}

#content.activate .activateWithFactions .selection input:checked.option4~.description .option4 {
    opacity: 1
}

#content.activate .activateWithFactions .selection input:checked.option4~.description .option4:before {
    transform: scale(1)
}

#content.activate .activateWithFactions .buttonWrapper {
    padding: 75px 0 55px;
    text-align: center;
    position: relative
}

.ie #content.activate .activateWithFactions .buttonWrapper {
    margin-left: 30px
}

#content.activate .activateWithFactions .buttonWrapper button {
    height: 50px;
    min-width: 50%;
    font-size: 19px;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    transition-duration: 1000ms;
    transition-timing-function: ease-in-out
}

#content.activate .activateWithFactions .buttonWrapper.selectTribe button:not(.update),
#content.activate .activateWithFactions .buttonWrapper.selectFaction button:not(.update) {
    opacity: 1;
    pointer-events: auto
}

#content.activate .activateWithFactions .buttonWrapper.selectTribe button.update,
#content.activate .activateWithFactions .buttonWrapper.selectFaction button.update {
    opacity: 0;
    pointer-events: none
}

#content.activate .activateWithFactions.isEditing .buttonWrapper.selectTribe button:not(.update),
#content.activate .activateWithFactions.isEditing .buttonWrapper.selectFaction button:not(.update) {
    opacity: 0;
    pointer-events: none
}

#content.activate .activateWithFactions.isEditing .buttonWrapper.selectTribe button.update,
#content.activate .activateWithFactions.isEditing .buttonWrapper.selectFaction button.update {
    opacity: 1;
    pointer-events: auto
}

#center #contentOuterContainer #content.activate .dynamicTitles {
    height: 62px;
    width: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0
}

#center #contentOuterContainer #content.activate .dynamicTitles>div {
    opacity: 0;
    pointer-events: none;
    transform: translateY(50px);
    transition: opacity 500ms ease-in-out, transform 1000ms ease-in-out;
    position: absolute
}

#center #contentOuterContainer #content.activate .dynamicTitles>div.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)
}

#center #contentOuterContainer #content.activate .dynamicTitles>div h1.titleInHeader {
    position: relative
}

#content.activate .activateWithFactions .stepDescription.selectTribe {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row: 1;
    grid-row-start: 1
}

#content.activate .activateWithFactions .selection.selectTribe {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row: 2;
    grid-row-start: 2
}

#content.activate .activateWithFactions .selection.selectTribe label.tribe1:before {
    background-image: url('../../img_rtl/views/activation/withFactions/selection/tribe/roman.jpg');
    width: 97px;
    height: 122px
}

#content.activate .activateWithFactions .selection.selectTribe label.tribe2:before {
    background-image: url('../../img_rtl/views/activation/withFactions/selection/tribe/teuton.jpg');
    width: 97px;
    height: 122px
}

#content.activate .activateWithFactions .selection.selectTribe label.tribe3:before {
    background-image: url('../../img_rtl/views/activation/withFactions/selection/tribe/gaul.jpg');
    width: 97px;
    height: 122px
}

#content.activate .activateWithFactions .selection.selectTribe label.tribe6:before {
    background-image: url('../../img_rtl/views/activation/withFactions/selection/tribe/egyptian.jpg');
    width: 97px;
    height: 122px
}

#content.activate .activateWithFactions .selection.selectTribe label.tribe7:before {
    background-image: url('../../img_rtl/views/activation/withFactions/selection/tribe/hun.jpg');
    width: 97px;
    height: 122px
}

#content.activate .activateWithFactions .selection.selectTribe .description ul {
    margin-top: 20px;
    padding-right: 30px;
    font-weight: bold;
    list-style: none;
    width: 50%
}

#content.activate .activateWithFactions .selection.selectTribe .description ul li {
    position: relative;
    height: 2em;
    margin-bottom: 15px
}

#content.activate .activateWithFactions .selection.selectTribe .description ul li:before {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    right: -25px;
    transform: scaleX(-1)
}

#content.activate .activateWithFactions .selection.selectTribe .description .recommended {
    position: absolute;
    top: -6px;
    left: 160px;
    background-image: url('../../img_rtl/views/activation/withFactions/recommended.png');
    width: 160px;
    height: 71px;
    text-align: center;
    display: table;
    box-sizing: border-box;
    padding: 23px 12px 18px
}

#content.activate .activateWithFactions .selection.selectTribe .description .recommended .text {
    display: table-cell;
    vertical-align: middle;
    font-size: 12px;
    line-height: 1em;
    text-transform: uppercase;
    color: #efd27e;
    text-shadow: 1px 0 1px #572121, 1px 1px 1px #572121, 0 1px 1px #572121, -1px 1px 1px #572121, -1px 0 1px #572121, -1px -1px 1px #572121, 0 -1px 1px #572121, 1px -1px 1px #572121
}

#content.activate .activateWithFactions .selection.selectTribe .description .optionDescription:before,
#content.activate .activateWithFactions .selection.selectTribe .description .optionDescription:after {
    background-position: bottom left;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat
}

#content.activate .activateWithFactions .selection.selectTribe .description .optionDescription:before {
    z-index: 1;
    transition-duration: 250ms;
    transition-delay: 250ms;
    transition-timing-function: ease-in-out;
    transform: scale(0.2);
    transform-origin: bottom left
}

#content.activate .activateWithFactions .selection.selectTribe .description .optionDescription:after {
    z-index: 2
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe1:before {
    background-image: linear-gradient(45deg, #6e0000, rgba(110, 0, 0, 0) 40%, rgba(110, 0, 0, 0))
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe1:after {
    background-image: url('../../img_rtl/views/activation/withFactions/preview/tribe/roman.png');
    border-radius: +0 0 3px 3px
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe1 ul li:before {
    background-image: url('../../img_rtl/units/roman/icon/roman.png')
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe2:before {
    background-image: linear-gradient(45deg, #023945, rgba(2, 57, 69, 0) 40%, rgba(2, 57, 69, 0))
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe2:after {
    background-image: url('../../img_rtl/views/activation/withFactions/preview/tribe/teuton.png');
    border-radius: +0 0 3px 3px
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe2 ul li:before {
    background-image: url('../../img_rtl/units/teuton/icon/teuton.png')
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe3:before {
    background-image: linear-gradient(45deg, #b14b0d, rgba(177, 75, 13, 0) 40%, rgba(177, 75, 13, 0))
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe3:after {
    background-image: url('../../img_rtl/views/activation/withFactions/preview/tribe/gaul.png');
    border-radius: +0 0 3px 3px
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe3 ul li:before {
    background-image: url('../../img_rtl/units/gaul/icon/gaul.png')
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe6:before {
    background-image: linear-gradient(45deg, #132f84, rgba(19, 47, 132, 0) 40%, rgba(19, 47, 132, 0))
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe6:after {
    background-image: url('../../img_rtl/views/activation/withFactions/preview/tribe/egyptian.png');
    border-radius: +0 0 3px 3px
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe6 ul li:before {
    background-image: url('../../img_rtl/units/egyptian/icon/egyptian.png')
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe7:before {
    background-image: linear-gradient(45deg, #1d001c, rgba(29, 0, 28, 0) 40%, rgba(29, 0, 28, 0))
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe7:after {
    background-image: url('../../img_rtl/views/activation/withFactions/preview/tribe/hun.png');
    border-radius: +0 0 3px 3px
}

#content.activate .activateWithFactions .selection.selectTribe .description .tribe7 ul li:before {
    background-image: url('../../img_rtl/units/hun/icon/hun.png')
}

#content.activate .activateWithFactions .buttonWrapper.selectTribe {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row: 3;
    grid-row-start: 3
}

#content.activate .activateWithFactions .stepDescription.selectFaction {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 1;
    grid-row-start: 1
}

#content.activate .activateWithFactions .selection.selectFaction {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 2;
    grid-row-start: 2
}

#content.activate .activateWithFactions .selection.selectFaction label.empire:before {
    background-image: url('../../img_rtl/factions/80x112/empire.png'), linear-gradient(to bottom, #dad3c3, #a39b87);
    background-size: 80px 122px, 100%;
    background-position: center;
    background-repeat: no-repeat
}

#content.activate .activateWithFactions .selection.selectFaction label.marauders:before {
    background-image: url('../../img_rtl/factions/80x112/marauders.png'), linear-gradient(to bottom, #dad3c3, #a39b87);
    background-size: 80px 122px, 100%;
    background-position: center;
    background-repeat: no-repeat
}

#content.activate .activateWithFactions .selection.selectFaction label.rebels:before {
    background-image: url('../../img_rtl/factions/80x112/rebels.png'), linear-gradient(to bottom, #dad3c3, #a39b87);
    background-size: 80px 122px, 100%;
    background-position: center;
    background-repeat: no-repeat
}

#content.activate .activateWithFactions .selection.selectFaction label.dynasty:before {
    background-image: url('../../img_rtl/factions/80x112/dynasty.png'), linear-gradient(to bottom, #dad3c3, #a39b87);
    background-size: 80px 122px, 100%;
    background-position: center;
    background-repeat: no-repeat
}

#content.activate .activateWithFactions .selection.selectFaction label.horde:before {
    background-image: url('../../img_rtl/factions/80x112/horde.png'), linear-gradient(to bottom, #dad3c3, #a39b87);
    background-size: 80px 122px, 100%;
    background-position: center;
    background-repeat: no-repeat
}

#content.activate .activateWithFactions .selection.selectFaction .description .optionDescription {
    padding-left: 265px
}

#content.activate .activateWithFactions .selection.selectFaction .description .optionDescription:before,
#content.activate .activateWithFactions .selection.selectFaction .description .optionDescription:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    border-radius: +0 0 3px 3px
}

#content.activate .activateWithFactions .selection.selectFaction .description .optionDescription:before {
    background-image: url('../../img_rtl/views/activation/withFactions/preview/faction/base.jpg');
    width: 240px;
    height: 240px
}

#content.activate .activateWithFactions .selection.selectFaction .description .optionDescription.empire:after {
    background-image: url('../../img_rtl/views/activation/withFactions/preview/faction/empire.png');
    width: 240px;
    height: 240px;
    animation: spawnAnimation 400ms steps(6) forwards 250ms
}

#content.activate .activateWithFactions .selection.selectFaction .description .optionDescription.marauders:after {
    background-image: url('../../img_rtl/views/activation/withFactions/preview/faction/marauders.png');
    width: 240px;
    height: 240px;
    animation: spawnAnimation 400ms steps(6) forwards 250ms
}

#content.activate .activateWithFactions .selection.selectFaction .description .optionDescription.rebels:after {
    background-image: url('../../img_rtl/views/activation/withFactions/preview/faction/rebels.png');
    width: 240px;
    height: 240px;
    animation: spawnAnimation 400ms steps(6) forwards 250ms
}

#content.activate .activateWithFactions .selection.selectFaction .description .optionDescription.dynasty:after {
    background-image: url('../../img_rtl/views/activation/withFactions/preview/faction/dynasty.png');
    width: 240px;
    height: 240px;
    animation: spawnAnimation 400ms steps(6) forwards 250ms
}

#content.activate .activateWithFactions .selection.selectFaction .description .optionDescription.horde:after {
    background-image: url('../../img_rtl/views/activation/withFactions/preview/faction/horde.png');
    width: 240px;
    height: 240px;
    animation: spawnAnimation 400ms steps(6) forwards 250ms
}

@keyframes spawnAnimation {
    100% {
        background-position: 0 -1440px
    }
}

#content.activate .activateWithFactions .selection.selectFaction input:not(:checked).option0~.description .option0:after {
    animation: none
}

#content.activate .activateWithFactions .selection.selectFaction input:not(:checked).option1~.description .option1:after {
    animation: none
}

#content.activate .activateWithFactions .selection.selectFaction input:not(:checked).option2~.description .option2:after {
    animation: none
}

#content.activate .activateWithFactions .selection.selectFaction input:not(:checked).option3~.description .option3:after {
    animation: none
}

#content.activate .activateWithFactions .selection.selectFaction input:not(:checked).option4~.description .option4:after {
    animation: none
}

#content.activate .activateWithFactions .buttonWrapper.selectFaction {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 3;
    grid-row-start: 3
}

#content.activate .activateWithFactions .stepDescription.confirm {
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-row: 1;
    grid-row-start: 1
}

#content.activate .activateWithFactions .selection.confirm {
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-row: 2;
    grid-row-start: 2;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr
}

#content.activate .activateWithFactions .selection.confirm .confirmTribe,
#content.activate .activateWithFactions .selection.confirm .confirmFaction {
    display: none;
    border: 2px solid #beae9a;
    border-radius: 4px;
    background-color: #efe3ca;
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.5);
    position: relative;
    text-align: center;
    width: 220px;
    height: 374px
}

#content.activate .activateWithFactions .selection.confirm .confirmTribe h2,
#content.activate .activateWithFactions .selection.confirm .confirmFaction h2 {
    padding: 10px 5px 0;
    text-shadow: 1px 0 1px rgba(94, 70, 58, 0.1), 1px 1px 1px rgba(94, 70, 58, 0.1), 0 1px 1px rgba(94, 70, 58, 0.1), -1px 1px 1px rgba(94, 70, 58, 0.1), -1px 0 1px rgba(94, 70, 58, 0.1), -1px -1px 1px rgba(94, 70, 58, 0.1), 0 -1px 1px rgba(94, 70, 58, 0.1), 1px -1px 1px rgba(94, 70, 58, 0.1), 2px 0 5px #efe3ca, 2px 2px 5px #efe3ca, 0 2px 5px #efe3ca, -2px 2px 5px #efe3ca, -2px 0 5px #efe3ca, -2px -2px 5px #efe3ca, 0 -2px 5px #efe3ca, 2px -2px 5px #efe3ca
}

#content.activate .activateWithFactions .selection.confirm .confirmTribe a,
#content.activate .activateWithFactions .selection.confirm .confirmFaction a {
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 10px 0;
    text-shadow: 2px 0 5px #efe3ca, 2px 2px 5px #efe3ca, 0 2px 5px #efe3ca, -2px 2px 5px #efe3ca, -2px 0 5px #efe3ca, -2px -2px 5px #efe3ca, 0 -2px 5px #efe3ca, 2px -2px 5px #efe3ca
}

#content.activate .activateWithFactions .selection.confirm .confirmTribe.selected,
#content.activate .activateWithFactions .selection.confirm .confirmFaction.selected {
    display: block
}

#content.activate .activateWithFactions .selection.confirm .confirmTribe {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-align: center;
    justify-self: center
}

#content.activate .activateWithFactions .selection.confirm .confirmTribe.tribe1 {
    background-image: url('../../img_rtl/views/activation/withFactions/summary/tribe/roman.png');
    background-size: 220px 374px;
    background-position: bottom
}

#content.activate .activateWithFactions .selection.confirm .confirmTribe.tribe2 {
    background-image: url('../../img_rtl/views/activation/withFactions/summary/tribe/teuton.png');
    background-size: 220px 374px;
    background-position: bottom
}

#content.activate .activateWithFactions .selection.confirm .confirmTribe.tribe3 {
    background-image: url('../../img_rtl/views/activation/withFactions/summary/tribe/gaul.png');
    background-size: 220px 374px;
    background-position: bottom
}

#content.activate .activateWithFactions .selection.confirm .confirmTribe.tribe6 {
    background-image: url('../../img_rtl/views/activation/withFactions/summary/tribe/egyptian.png');
    background-size: 220px 374px;
    background-position: bottom
}

#content.activate .activateWithFactions .selection.confirm .confirmTribe.tribe7 {
    background-image: url('../../img_rtl/views/activation/withFactions/summary/tribe/hun.png');
    background-size: 220px 374px;
    background-position: bottom
}

#content.activate .activateWithFactions .selection.confirm .confirmFaction {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-align: center;
    justify-self: center
}

#content.activate .activateWithFactions .selection.confirm .confirmFaction.empire {
    background-position: center 65px;
    background-repeat: no-repeat;
    background-image: url('../../img_rtl/factions/193x270/empire.png');
    background-size: 193px 270px
}

#content.activate .activateWithFactions .selection.confirm .confirmFaction.marauders {
    background-position: center 65px;
    background-repeat: no-repeat;
    background-image: url('../../img_rtl/factions/193x270/marauders.png');
    background-size: 193px 270px
}

#content.activate .activateWithFactions .selection.confirm .confirmFaction.rebels {
    background-position: center 65px;
    background-repeat: no-repeat;
    background-image: url('../../img_rtl/factions/193x270/rebels.png');
    background-size: 193px 270px
}

#content.activate .activateWithFactions .selection.confirm .confirmFaction.dynasty {
    background-position: center 65px;
    background-repeat: no-repeat;
    background-image: url('../../img_rtl/factions/193x270/dynasty.png');
    background-size: 193px 270px
}

#content.activate .activateWithFactions .selection.confirm .confirmFaction.horde {
    background-position: center 65px;
    background-repeat: no-repeat;
    background-image: url('../../img_rtl/factions/193x270/horde.png');
    background-size: 193px 270px
}

#content.activate .activateWithFactions .buttonWrapper.confirm {
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-row: 3;
    grid-row-start: 3
}

#regionalOverviewWithFactions .regionalOverviewWrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    -ms-grid-columns: 1fr 20px 187px;
    grid-template-columns: 1fr 20px 187px
}

#regionalOverviewWithFactions .regionalOverviewWrapper table.regionDetails {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column: 1;
    grid-column-start: 1
}

#regionalOverviewWithFactions .regionalOverviewWrapper table.regionDetails tbody th,
#regionalOverviewWithFactions .regionalOverviewWrapper table.regionDetails tbody td {
    vertical-align: top;
    width: 50%
}

#regionalOverviewWithFactions .regionalOverviewWrapper table.regionDetails tbody td {
    font-weight: bold
}

#regionalOverviewWithFactions .regionalOverviewWrapper table.regionDetails th.villageSettled {
    padding-left: 31px
}

#regionalOverviewWithFactions .regionalOverviewWrapper table.regionDetails a.regionSettleIcon {
    display: inline-block;
    background-image: url('../../img_rtl/region/icons/region_info_icon.png');
    width: 22px;
    height: 22px;
    vertical-align: middle
}

#regionalOverviewWithFactions .regionalOverviewWrapper .progressBarContainer {
    -ms-grid-row: 2;
    grid-row-start: 2;
    -ms-grid-column: 1;
    grid-column-start: 1;
    margin: 10px 0 0 9px
}

#regionalOverviewWithFactions .regionalOverviewWrapper .regionMapContainer {
    grid-row: 1 / 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 3;
    grid-column-start: 3;
    display: block;
    float: left;
    border: 1px solid #333;
    border-radius: 3px;
    position: relative;
    width: 185px;
    height: 185px
}

#regionalOverviewWithFactions .regionalOverviewWrapper .regionMapContainer:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    border-radius: 3px;
    background-image: url('../../img_rtl/region/regionDetailsMap_small.png');
    width: 185px;
    height: 185px
}

#regionalOverviewWithFactions .regionalOverviewWrapper .regionMapContainer img {
    border-radius: 3px
}

#regionalOverviewWithFactions .regionalOverviewWrapper .regionMapContainer svg.regionsInEurope {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 3
}

#regionalOverviewWithFactions .ancientPowerStatus {
    margin: 10px 0 15px;
    padding: 10px;
    background-color: #f9fbf4;
    border: 1px solid #a1bc79;
    border-radius: 5px
}

#regionalOverviewWithFactions .controllingFactionEmblems {
    margin: 20px 0 10px;
    display: -ms-grid;
    display: grid;
    justify-content: space-between
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-column-align: end;
    justify-self: end;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #333;
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.6)
}

.ie #regionalOverviewWithFactions .controllingFactionEmblems .faction:nth-child(1) {
    -ms-grid-column: 1
}

.ie #regionalOverviewWithFactions .controllingFactionEmblems .faction:nth-child(3) {
    -ms-grid-column: 2
}

.ie #regionalOverviewWithFactions .controllingFactionEmblems .faction:nth-child(5) {
    -ms-grid-column: 3
}

.ie #regionalOverviewWithFactions .controllingFactionEmblems .faction:nth-child(7) {
    -ms-grid-column: 4
}

.ie #regionalOverviewWithFactions .controllingFactionEmblems .faction:nth-child(9) {
    -ms-grid-column: 5
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    z-index: 1;
    background-image: linear-gradient(to bottom, #dad3c3, #a39b87)
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction .emblem {
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    z-index: 2;
    background-position: center;
    background-repeat: no-repeat
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction .proportionalInfluence {
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: auto;
    right: 2px;
    z-index: 3;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.7)
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction .rankIndicator {
    position: absolute;
    z-index: 4;
    right: 50%;
    transform: translate(50%, -50%);
    font-family: IRANSans;
    font-size: 16px;
    color: #5e463a;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #333;
    border-radius: 50%;
    text-align: center
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction.rank1 {
    background-image: linear-gradient(to bottom, #d7b672 0, #835e35 30.73%, #aa8050 48.96%, #efbf7b 67.71%, #f3e2ae 82.81%, #cba467 100%)
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction.rank1 .rankIndicator {
    background-image: linear-gradient(-142deg, #f3e2ae 18%, #d7b672 81%)
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction.rank2 {
    background-image: linear-gradient(to bottom, #e9e7e4 0, #696969 30.73%, #ababab 48.96%, #eaeaea 67.71%, #f6f6f6 82.81%, #cdcdcd 100%)
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction.rank2 .rankIndicator {
    background-image: linear-gradient(-142deg, #f4f4f4 18%, #c6c6c6 81%)
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction.rank3 {
    background-image: linear-gradient(to bottom, #ffc58f 0, #8c5a2b 30.73%, #d18946 48.96%, #f0b37b 67.71%, #fbac63 82.81%, #cf9158 100%)
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction.rank3 .rankIndicator {
    background-image: linear-gradient(-142deg, #efc7a2 18%, #d18641 81%)
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction.rank4 {
    background-image: linear-gradient(to bottom, #d3dde5 0, #5e6b75 30.73%, #8999a4 48.96%, #919da5 67.71%, #b3bfc8 82.81%, #596b78 100%)
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction.rank4 .rankIndicator {
    background-image: linear-gradient(-142deg, #d2dde4 18%, #8a959d 81%)
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction.rank5 {
    background-image: linear-gradient(to bottom, #e3c7be 0, #96827c 30.73%, #b49d96 48.96%, #ebd3cc 67.71%, #d1c0bb 82.81%, #6b5d59 100%)
}

#regionalOverviewWithFactions .controllingFactionEmblems .faction.rank5 .rankIndicator {
    background-image: linear-gradient(-142deg, #e4c8bf 18%, #927268 81%)
}

.ie #regionalOverviewWithFactions .controllingFactionEmblems .faction {
    -ms-grid-column-align: center;
    justify-self: center
}

#regionalOverviewWithFactions .controllingFactionEmblems .influence {
    -ms-grid-row: 2;
    grid-row-start: 2;
    -ms-grid-column-align: center;
    justify-self: center;
    font-size: 17px;
    font-weight: bold;
    padding-top: 20px
}

.ie #regionalOverviewWithFactions .controllingFactionEmblems .influence:nth-child(2) {
    -ms-grid-column: 1
}

.ie #regionalOverviewWithFactions .controllingFactionEmblems .influence:nth-child(4) {
    -ms-grid-column: 2
}

.ie #regionalOverviewWithFactions .controllingFactionEmblems .influence:nth-child(6) {
    -ms-grid-column: 3
}

.ie #regionalOverviewWithFactions .controllingFactionEmblems .influence:nth-child(8) {
    -ms-grid-column: 4
}

.ie #regionalOverviewWithFactions .controllingFactionEmblems .influence:nth-child(10) {
    -ms-grid-column: 5
}

#regionalOverviewWithFactions .controllingFactionEmblems.count1 {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 175px);
    -ms-grid-rows: 245px 1fr;
    grid-template-rows: 245px 1fr
}

#regionalOverviewWithFactions .controllingFactionEmblems.count1 .faction {
    width: 175px;
    height: 245px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count2 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 175px);
    -ms-grid-rows: 245px 1fr;
    grid-template-rows: 245px 1fr
}

#regionalOverviewWithFactions .controllingFactionEmblems.count2 .faction {
    width: 175px;
    height: 245px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count3 {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 175px);
    -ms-grid-rows: 245px 1fr;
    grid-template-rows: 245px 1fr
}

#regionalOverviewWithFactions .controllingFactionEmblems.count3 .faction {
    width: 175px;
    height: 245px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count4 {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 132px);
    -ms-grid-rows: 185px 1fr;
    grid-template-rows: 185px 1fr
}

#regionalOverviewWithFactions .controllingFactionEmblems.count4 .faction {
    width: 132px;
    height: 185px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count5 {
    -ms-grid-columns: (1fr)[5];
    grid-template-columns: repeat(5, 106px);
    -ms-grid-rows: 148px 1fr;
    grid-template-rows: 148px 1fr
}

#regionalOverviewWithFactions .controllingFactionEmblems.count5 .faction {
    width: 106px;
    height: 148px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count1 {
    margin-top: 30px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count1 .faction:before {
    content: "";
    position: absolute;
    top: -23px;
    left: -189px;
    bottom: -10px;
    right: -189px;
    z-index: 1;
    border-style: solid;
    border-width: 22px 188px 9px 188px;
    border-image: url('../../img_rtl/views/regionOverview/monopolDecoration.png') 22 188 9 188 space
}

.ie #regionalOverviewWithFactions .controllingFactionEmblems.count1 .faction:before {
    direction: ltr
}

#regionalOverviewWithFactions .controllingFactionEmblems.count1,
#regionalOverviewWithFactions .controllingFactionEmblems.count2 {
    justify-content: center
}

#regionalOverviewWithFactions .controllingFactionEmblems.count2 {
    grid-column-gap: 20px
}

.ie #regionalOverviewWithFactions .controllingFactionEmblems.count2 {
    margin: 0 75px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count1 .faction.empire .emblem,
#regionalOverviewWithFactions .controllingFactionEmblems.count2 .faction.empire .emblem,
#regionalOverviewWithFactions .controllingFactionEmblems.count3 .faction.empire .emblem {
    background-image: url('../../img_rtl/factions/135x189/empire.png');
    background-size: 135px 189px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count1 .faction.marauders .emblem,
#regionalOverviewWithFactions .controllingFactionEmblems.count2 .faction.marauders .emblem,
#regionalOverviewWithFactions .controllingFactionEmblems.count3 .faction.marauders .emblem {
    background-image: url('../../img_rtl/factions/135x189/marauders.png');
    background-size: 135px 189px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count1 .faction.rebels .emblem,
#regionalOverviewWithFactions .controllingFactionEmblems.count2 .faction.rebels .emblem,
#regionalOverviewWithFactions .controllingFactionEmblems.count3 .faction.rebels .emblem {
    background-image: url('../../img_rtl/factions/135x189/rebels.png');
    background-size: 135px 189px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count1 .faction.dynasty .emblem,
#regionalOverviewWithFactions .controllingFactionEmblems.count2 .faction.dynasty .emblem,
#regionalOverviewWithFactions .controllingFactionEmblems.count3 .faction.dynasty .emblem {
    background-image: url('../../img_rtl/factions/135x189/dynasty.png');
    background-size: 135px 189px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count1 .faction.horde .emblem,
#regionalOverviewWithFactions .controllingFactionEmblems.count2 .faction.horde .emblem,
#regionalOverviewWithFactions .controllingFactionEmblems.count3 .faction.horde .emblem {
    background-image: url('../../img_rtl/factions/135x189/horde.png');
    background-size: 135px 189px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count4 .faction.empire .emblem {
    background-image: url('../../img_rtl/factions/100x140/empire.png');
    background-size: 100px 140px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count4 .faction.marauders .emblem {
    background-image: url('../../img_rtl/factions/100x140/marauders.png');
    background-size: 100px 140px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count4 .faction.rebels .emblem {
    background-image: url('../../img_rtl/factions/100x140/rebels.png');
    background-size: 100px 140px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count4 .faction.dynasty .emblem {
    background-image: url('../../img_rtl/factions/100x140/dynasty.png');
    background-size: 100px 140px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count4 .faction.horde .emblem {
    background-image: url('../../img_rtl/factions/100x140/horde.png');
    background-size: 100px 140px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count5 .faction.empire .emblem {
    background-image: url('../../img_rtl/factions/80x112/empire.png');
    background-size: 80px 122px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count5 .faction.marauders .emblem {
    background-image: url('../../img_rtl/factions/80x112/marauders.png');
    background-size: 80px 122px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count5 .faction.rebels .emblem {
    background-image: url('../../img_rtl/factions/80x112/rebels.png');
    background-size: 80px 122px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count5 .faction.dynasty .emblem {
    background-image: url('../../img_rtl/factions/80x112/dynasty.png');
    background-size: 80px 122px
}

#regionalOverviewWithFactions .controllingFactionEmblems.count5 .faction.horde .emblem {
    background-image: url('../../img_rtl/factions/80x112/horde.png');
    background-size: 80px 122px
}

#regionalOverviewWithFactions .controllingFactionAlliances {
    font-size: 14px
}

#regionalOverviewWithFactions .controllingFactionAlliances:before {
    border-radius: 3px;
    border-color: #beae9a
}

#regionalOverviewWithFactions .controllingFactionAlliances th.population,
#regionalOverviewWithFactions .controllingFactionAlliances th.villages,
#regionalOverviewWithFactions .controllingFactionAlliances th.territorialControl,
#regionalOverviewWithFactions .controllingFactionAlliances td.population,
#regionalOverviewWithFactions .controllingFactionAlliances td.villages,
#regionalOverviewWithFactions .controllingFactionAlliances td.territorialControl {
    text-align: left;
    width: 15%
}

#regionalOverviewWithFactions .controllingFactionAlliances thead th {
    white-space: nowrap
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th,
#regionalOverviewWithFactions .controllingFactionAlliances tbody td {
    padding: 0 10px;
    line-height: 1em
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th {
    font-size: 21px;
    text-align: right;
    border-bottom: 0;
    position: relative;
    height: calc(2.6em + 1px)
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th .faction {
    position: absolute;
    top: 1px;
    left: -9px;
    bottom: 0;
    right: -9px;
    height: 2.6em;
    background-color: #f3f1ee;
    border-top: 1px solid #beae9a;
    border-bottom: 1px solid #beae9a;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    -ms-grid-columns: 3em 1.5fr .5fr;
    grid-template-columns: 3em 1.5fr .5fr
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th .faction>div {
    -ms-grid-row-align: center;
    align-self: center;
    padding: .8em 18px;
    height: 1em
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th .faction .rankIndicator {
    -ms-grid-column: 1;
    grid-column-start: 1;
    text-align: center;
    font-family: IRANSans;
    border-left: 1px solid #beae9a
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th .faction .rankIndicator.rank1 {
    background-image: linear-gradient(-142deg, #f3e2ae 18%, #d7b672 81%)
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th .faction .rankIndicator.rank2 {
    background-image: linear-gradient(-142deg, #f4f4f4 18%, #c6c6c6 81%)
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th .faction .rankIndicator.rank3 {
    background-image: linear-gradient(-142deg, #efc7a2 18%, #d18641 81%)
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th .faction .rankIndicator.rank4 {
    background-image: linear-gradient(-142deg, #d2dde4 18%, #8a959d 81%)
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th .faction .rankIndicator.rank5 {
    background-image: linear-gradient(-142deg, #e4c8bf 18%, #927268 81%)
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th .faction .proportionalInfluence {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 3em;
    height: auto;
    z-index: 1
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th .faction .proportionalInfluence .bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #efe2cc
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th .faction .factionName {
    -ms-grid-column: 2;
    grid-column-start: 2;
    font-weight: bold;
    position: relative;
    z-index: 2
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody th .faction .influence {
    -ms-grid-column: 3;
    grid-column-start: 3;
    font-weight: bold;
    text-align: left;
    position: relative;
    z-index: 2
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody:first-of-type th .faction {
    border-radius: 3px 3px 0 0;
    border-top: 0
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody td.alliance {
    max-width: 1px
}

#regionalOverviewWithFactions .controllingFactionAlliances tbody td.alliance td.alliance {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    direction: rtl
}

#factionProfile .factionHeader {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 20px 258px;
    grid-template-columns: 1fr 20px 258px
}

#factionProfile .factionHeader table {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-align: start;
    align-self: start
}

#factionProfile .factionHeader .factionEmblem {
    width: 256px;
    height: 256px;
    position: relative;
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-row: 1;
    grid-row-start: 1;
    border: 1px solid #333;
    justify-self: end;
    border-radius: 3px;
    background-image: linear-gradient(to bottom, #dad3c3, #a39b87)
}

#factionProfile .factionHeader .factionEmblem:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat
}

#factionProfile .factionHeader .factionEmblem.empire:after {
    background-image: url('../../img_rtl/factions/164x230/empire.png');
    background-size: 164px 230px
}

#factionProfile .factionHeader .factionEmblem.marauders:after {
    background-image: url('../../img_rtl/factions/164x230/marauders.png');
    background-size: 164px 230px
}

#factionProfile .factionHeader .factionEmblem.rebels:after {
    background-image: url('../../img_rtl/factions/164x230/rebels.png');
    background-size: 164px 230px
}

#factionProfile .factionHeader .factionEmblem.dynasty:after {
    background-image: url('../../img_rtl/factions/164x230/dynasty.png');
    background-size: 164px 230px
}

#factionProfile .factionHeader .factionEmblem.horde:after {
    background-image: url('../../img_rtl/factions/164x230/horde.png');
    background-size: 164px 230px
}

#factionProfile .factionHeader #regionMapContainer {
    width: 256px;
    height: 256px;
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-row: 1;
    grid-row-start: 1;
    border: 1px solid #333;
    border-radius: 3px;
    position: relative
}

#factionProfile .factionHeader #regionMapContainer:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    border-radius: 3px;
    background-image: url('../../img_rtl/region/regionDetailsMap_big.png');
    width: 256px;
    height: 256px
}

#factionProfile .factionHeader #regionMapContainer img {
    position: absolute;
    border-radius: 3px;
    z-index: 1
}

#factionProfile .factionHeader #regionMapContainer svg {
    width: 256px;
    height: 256px;
    position: absolute;
    z-index: 3
}

#factionProfile .factionHeader #regionMapContainer svg g {
    cursor: pointer;
    transition-duration: 150ms;
    stroke: transparent;
    stroke-width: 2px
}

#factionProfile .factionHeader #regionMapContainer svg g.active {
    fill: #991915;
    stroke: #f8c000
}

#factionProfile .factionHeader #regionMapContainer svg g:hover {
    stroke: #f2f2f2
}

#factionProfile .factionHeader #regionMapContainer svg g.highlight {
    stroke: #f2f2f2;
    filter: url("#regionBrightness")
}

#factionProfile .factionHeader #regionMapContainer svg g.copyFront {
    pointer-events: none
}

#factionProfile .tabNavi {
    margin-top: 20px
}

#factionProfile .paginator {
    text-align: left;
    margin-top: 10px
}

#factionProfile #alliancesInFaction .alliance {
    text-align: right
}

#factionProfile #alliancesInFaction .victoryPoints,
#factionProfile #alliancesInFaction .members {
    text-align: left
}

#factionProfile #alliancesInFaction th,
#factionProfile #alliancesInFaction td {
    padding: 6px 9px 3px
}

#factionVictoryStatistics {
    position: relative
}

#factionVictoryStatistics:before {
    content: "";
    position: absolute;
    top: -19px;
    left: -6px;
    bottom: -10px;
    right: -6px;
    background-color: #768483;
    background-image: url('../../img_rtl/views/statistics/factionVictory/podium.jpg');
    background-repeat: no-repeat
}

#factionVictoryStatistics .podium {
    height: 420px
}

#factionVictoryStatistics .podium .emblem {
    position: absolute
}

#factionVictoryStatistics .podium .emblem.empire {
    background-image: url('../../img_rtl/factions/193x270/empire.png');
    width: 193px;
    height: 270px
}

#factionVictoryStatistics .podium .emblem.marauders {
    background-image: url('../../img_rtl/factions/193x270/marauders.png');
    width: 193px;
    height: 270px
}

#factionVictoryStatistics .podium .emblem.rebels {
    background-image: url('../../img_rtl/factions/193x270/rebels.png');
    width: 193px;
    height: 270px
}

#factionVictoryStatistics .podium .emblem.dynasty {
    background-image: url('../../img_rtl/factions/193x270/dynasty.png');
    width: 193px;
    height: 270px
}

#factionVictoryStatistics .podium .emblem.horde {
    background-image: url('../../img_rtl/factions/193x270/horde.png');
    width: 193px;
    height: 270px
}

#factionVictoryStatistics .podium .emblem.rank1 {
    top: -28px;
    right: 181px
}

#factionVictoryStatistics .podium .emblem.rank2 {
    top: 15px;
    right: 7px
}

#factionVictoryStatistics .podium .emblem.rank3 {
    top: 40px;
    right: 357px
}

#factionVictoryStatistics .factionList .rank,
#factionVictoryStatistics .factionList .alliances,
#factionVictoryStatistics .factionList .victoryPoints,
#factionVictoryStatistics .factionList .victoryPointsProduction {
    text-align: left
}

#factionVictoryStatistics .factionList .faction {
    text-align: right
}

#raidListUpdate:after,
#raidListSlot:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0
}

#raidList .deleteList .inlineIcon,
#raidList .deleteSlot .inlineIcon,
#raidListCreate .deleteList .inlineIcon,
#raidListCreate .deleteSlot .inlineIcon,
#raidListUpdate .deleteList .inlineIcon,
#raidListUpdate .deleteSlot .inlineIcon,
#raidListSlot .deleteList .inlineIcon,
#raidListSlot .deleteSlot .inlineIcon,
#raidList .inlineIcon {
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto
}

#raidList .deleteList .inlineIcon i,
#raidList .deleteSlot .inlineIcon i,
#raidListCreate .deleteList .inlineIcon i,
#raidListCreate .deleteSlot .inlineIcon i,
#raidListUpdate .deleteList .inlineIcon i,
#raidListUpdate .deleteSlot .inlineIcon i,
#raidListSlot .deleteList .inlineIcon i,
#raidListSlot .deleteSlot .inlineIcon i,
#raidList .inlineIcon i,
#raidList .deleteList .inlineIcon svg,
#raidList .deleteSlot .inlineIcon svg,
#raidListCreate .deleteList .inlineIcon svg,
#raidListCreate .deleteSlot .inlineIcon svg,
#raidListUpdate .deleteList .inlineIcon svg,
#raidListUpdate .deleteSlot .inlineIcon svg,
#raidListSlot .deleteList .inlineIcon svg,
#raidListSlot .deleteSlot .inlineIcon svg,
#raidList .inlineIcon svg {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row: 1;
    grid-row-start: 1;
    margin-left: 5px;
    -ms-grid-row-align: center;
    align-self: center
}

#raidList .deleteList .inlineIcon span,
#raidList .deleteSlot .inlineIcon span,
#raidListCreate .deleteList .inlineIcon span,
#raidListCreate .deleteSlot .inlineIcon span,
#raidListUpdate .deleteList .inlineIcon span,
#raidListUpdate .deleteSlot .inlineIcon span,
#raidListSlot .deleteList .inlineIcon span,
#raidListSlot .deleteSlot .inlineIcon span,
#raidList .inlineIcon span {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-align: center;
    align-self: center;
    display: inline-block
}

#raidListSlot .inlineIcon {
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto
}

#raidListSlot .inlineIcon i,
#raidListSlot .inlineIcon svg {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
    margin-right: 5px;
    -ms-grid-row-align: center;
    align-self: center
}

#raidListSlot .inlineIcon span {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-align: center;
    align-self: center;
    display: inline-block
}

#raidList a,
#raidListCreate a,
#raidListUpdate a,
#raidListSlot a {
    display: inline-block
}

#raidList a svg,
#raidListCreate a svg,
#raidListUpdate a svg,
#raidListSlot a svg {
    fill: #99c01a
}

#raidList a:hover svg,
#raidListCreate a:hover svg,
#raidListUpdate a:hover svg,
#raidListSlot a:hover svg {
    fill: #00bc00
}

#raidList a.disabled svg,
#raidListCreate a.disabled svg,
#raidListUpdate a.disabled svg,
#raidListSlot a.disabled svg {
    fill: #777
}

#raidList button.save,
#raidListCreate button.save,
#raidListUpdate button.save,
#raidListSlot button.save {
    float: right
}

#raidList .deleteList,
#raidList .deleteSlot,
#raidListCreate .deleteList,
#raidListCreate .deleteSlot,
#raidListUpdate .deleteList,
#raidListUpdate .deleteSlot,
#raidListSlot .deleteList,
#raidListSlot .deleteSlot {
    float: left;
    margin-top: 3px;
    display: inline-block
}

#raidList .deleteList svg,
#raidList .deleteSlot svg,
#raidListCreate .deleteList svg,
#raidListCreate .deleteSlot svg,
#raidListUpdate .deleteList svg,
#raidListUpdate .deleteSlot svg,
#raidListSlot .deleteList svg,
#raidListSlot .deleteSlot svg {
    height: 16px;
    width: 14px
}

#raidList .deleteList svg path,
#raidList .deleteSlot svg path,
#raidListCreate .deleteList svg path,
#raidListCreate .deleteSlot svg path,
#raidListUpdate .deleteList svg path,
#raidListUpdate .deleteSlot svg path,
#raidListSlot .deleteList svg path,
#raidListSlot .deleteSlot svg path {
    fill: #d40000
}

#raidList .deleteList:hover svg path,
#raidList .deleteSlot:hover svg path,
#raidListCreate .deleteList:hover svg path,
#raidListCreate .deleteSlot:hover svg path,
#raidListUpdate .deleteList:hover svg path,
#raidListUpdate .deleteSlot:hover svg path,
#raidListSlot .deleteList:hover svg path,
#raidListSlot .deleteSlot:hover svg path {
    fill: red
}

#raidList {
    color: #5e463a
}

#raidList .noobProtectionInfo {
    color: #333;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #a1bc79;
    background-color: #f9fbf4
}

#raidList .villageWrapper:not(:last-child) {
    margin-bottom: 25px
}

#raidList .villageWrapper.inactive {
    opacity: .5;
    pointer-events: none
}

#raidList .villageWrapper .villageHeadline {
    border: 1px solid silver;
    margin-bottom: 5px;
    line-height: 34px;
    padding: 0 15px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr
}

#raidList .villageWrapper .villageHeadline .villageName {
    -ms-grid-row: 1;
    grid-row-start: 1
}

#raidList .villageWrapper .villageHeadline .createNew {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-column-align: end;
    justify-self: end
}

#raidList .villageWrapper .villageHeadline .createNew.hidden {
    display: none
}

#raidList .villageWrapper .villageHeadline .createNew svg {
    width: 20px;
    height: 16px
}

#raidList .villageWrapper .dropContainer {
    position: relative
}

#raidList .villageWrapper .dropContainer:before,
#raidList .villageWrapper .dropContainer:after {
    content: "";
    display: block;
    position: absolute;
    background-color: #7043ee;
    opacity: 0;
    transition-timing-function: ease-in
}

#raidList .villageWrapper .dropContainer:before {
    height: 2px;
    top: -4px;
    right: -1px;
    left: -4px;
    transition-duration: 400ms;
    transition-delay: 0;
    transform: rotateY(90deg);
    transform-origin: right
}

#raidList .villageWrapper .dropContainer:after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    top: -5px;
    right: -5px;
    transition-duration: 100ms;
    transition-delay: 400ms
}

#raidList .villageWrapper .dropContainer.highlightDropSection:before,
#raidList .villageWrapper .dropContainer.highlightDropSection:after {
    opacity: 1
}

#raidList .villageWrapper .dropContainer.highlightDropSection:before {
    transform: rotateY(0);
    transition-delay: 100ms
}

#raidList .villageWrapper .dropContainer.highlightDropSection:after {
    transition-delay: 0
}

#raidList .villageWrapper .dropContainer.down:before,
#raidList .villageWrapper .dropContainer.down:after {
    top: auto
}

#raidList .villageWrapper .dropContainer.down:before {
    bottom: -4px
}

#raidList .villageWrapper .dropContainer.down:after {
    bottom: -5px
}

#raidList .villageWrapper .dropContainer .raidList {
    line-height: 45px;
    margin-bottom: 5px;
    box-sizing: border-box
}

#raidList .villageWrapper .dropContainer .raidList.dragged {
    opacity: .5
}

#raidList .villageWrapper .dropContainer .raidList.hidden {
    opacity: 0
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 35px 1fr 1fr auto 50px;
    grid-template-columns: 35px 1fr 1fr auto 50px;
    background-color: #efeee7;
    border: 1px solid silver
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .dragAndDrop {
    -ms-grid-column: 1;
    grid-column-start: 1;
    padding-right: 10px;
    cursor: move
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .dragAndDrop svg {
    fill: #787878;
    height: 25px;
    width: 4px;
    margin-top: 10px
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .listName {
    -ms-grid-column: 2;
    grid-column-start: 2;
    font-weight: bold
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .listName .value {
    -ms-grid-column: 1;
    grid-column-start: 1;
    max-width: 161px
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .listName .value .value,
#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .listName .value .raidListContent table td.target,
#raidList .villageWrapper .dropContainer .raidList .raidListContent table .raidListHeadline .listName .value td.target {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    direction: rtl
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .listName a {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-align: center;
    align-self: center;
    padding: 10px
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .listName a svg {
    width: 18px;
    height: 18px;
    margin: 0
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots {
    -ms-grid-column: 3;
    grid-column-start: 3;
    white-space: nowrap;
    padding-left: 10px
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots>div {
    display: -ms-inline-grid;
    display: inline-grid;
    -ms-grid-columns: auto auto auto auto;
    grid-template-columns: auto auto auto auto
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots>div>* {
    grid-column-start: auto;
    -ms-grid-row-align: center;
    align-self: center
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots>div>*:nth-child(1) {
    -ms-grid-column: 1
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots>div>*:nth-child(2) {
    -ms-grid-column: 2
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots>div>*:nth-child(3) {
    -ms-grid-column: 3
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots>div>*:nth-child(4) {
    -ms-grid-column: 4
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots>div svg {
    width: 16px;
    height: 16px;
    margin-left: 5px
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots>div svg.error {
    fill: #d40000
}

.colorBlind #raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots>div svg.error {
    fill: #0022af
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots>div svg.success {
    fill: #228b22
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots>div i.attack {
    width: 16px;
    height: 16px;
    background-image: url('../../img_rtl/a/att_all.gif');
    margin-left: 5px
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots>div .value {
    display: inline-block;
    -ms-grid-column: 4;
    grid-column-start: 4
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .slots>div .slotsCount {
    color: #94786a
}

#raidList .villageWrapper .dropContainer .raidList .raidListHeadline button {
    -ms-grid-column: 4;
    grid-column-start: 4;
    -ms-grid-row-align: center;
    align-self: center
}

#raidList .villageWrapper .dropContainer .raidList form {
    -ms-grid-column: 4;
    grid-column-start: 4;
    -ms-grid-row-align: center;
    align-self: center
}

#raidList .villageWrapper .dropContainer .raidList .expandCollapse {
    -ms-grid-column: 5;
    grid-column-start: 5;
    text-align: center;
    cursor: pointer
}

#raidList .villageWrapper .dropContainer .raidList .expandCollapse img.loading {
    display: none;
    margin-top: 15px
}

#raidList .villageWrapper .dropContainer .raidList .expandCollapse svg {
    fill: #5e463a;
    width: 18px;
    height: 11px;
    margin-top: 15px;
    position: relative;
    top: 0;
    transition: top .2s, fill .2s
}

#raidList .villageWrapper .dropContainer .raidList .expandCollapse.loading img.loading {
    display: inline-block
}

#raidList .villageWrapper .dropContainer .raidList .expandCollapse.loading svg {
    display: none
}

#raidList .villageWrapper .dropContainer .raidList .expandCollapse.expanded svg {
    transform: scaleY(-1)
}

#raidList .villageWrapper .dropContainer .raidList .expandCollapse:hover svg {
    fill: #94786a;
    top: 3px
}

#raidList .villageWrapper .dropContainer .raidList .expandCollapse:hover.expanded svg {
    top: -3px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent.hide {
    display: none
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table {
    background-color: transparent;
    border-collapse: collapse;
    border: 1px solid silver;
    border-top: 0;
    border-bottom: 0
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table thead th {
    background-color: #f3f2e7;
    border-top: 0;
    color: #5e463a
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table thead th.sortable {
    cursor: pointer;
    padding: 6px 0 3px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table thead th.sortable div {
    padding: 0 9px;
    position: relative
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table thead th.sortable div svg.arrow {
    position: absolute;
    left: 3px;
    top: calc(50% - 3px);
    width: 7px;
    height: 7px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table thead th.sortable div svg.arrow path {
    fill: #5e463a
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table thead th.sortable div svg.arrow.down {
    transform: scaleY(-1)
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table tbody td {
    background-color: #fefdf8
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table tbody .slotRow.slotInactive td {
    background-color: #f2f2ee;
    opacity: .4
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th,
#raidList .villageWrapper .dropContainer .raidList .raidListContent table td {
    border: 1px solid silver;
    padding: 6px 9px 3px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.checkbox,
#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.checkbox {
    border-left: 0;
    width: 1px;
    padding-right: 5px;
    padding-left: 0
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.target,
#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.target {
    border-right: 0
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.target {
    box-sizing: border-box;
    width: 130px;
    text-align: right;
    padding-right: 30px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.target.sortable div {
    padding-right: 30px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid {
    text-align: right;
    font-weight: bold;
    position: relative;
    background-clip: padding-box
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid svg.sorting {
    width: 12px;
    height: 16px;
    left: 3px;
    top: 10px;
    position: absolute;
    cursor: pointer
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid svg.sorting path {
    fill: #99c01a
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid svg:hover path {
    fill: #00bc00
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid nav.lastRaidSorting {
    min-width: 200px;
    position: absolute;
    right: -5px;
    top: 100%;
    background-color: #f3f2e7;
    border: 1px solid #333;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    z-index: 36;
    cursor: default;
    transition-duration: 250ms;
    opacity: 0;
    pointer-events: none
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid nav.lastRaidSorting.open {
    opacity: 1;
    pointer-events: auto
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid nav.lastRaidSorting:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: -1
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid nav.lastRaidSorting .description {
    padding: 3px 8px;
    color: #888;
    font-size: 12px;
    font-weight: normal
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid nav.lastRaidSorting .sortOption {
    padding: 5px 8px;
    min-height: 32px;
    border-top: 1px solid #b7b7b7;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 22px 10px 1fr;
    grid-template-columns: 22px 10px 1fr;
    box-sizing: border-box;
    position: relative
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid nav.lastRaidSorting .sortOption img,
#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid nav.lastRaidSorting .sortOption i {
    -ms-grid-row-align: center;
    align-self: center;
    -ms-grid-column-align: center;
    justify-self: center;
    -ms-grid-column: 1;
    grid-column-start: 1;
    display: inline-block
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid nav.lastRaidSorting .sortOption span {
    -ms-grid-row-align: center;
    align-self: center;
    -ms-grid-column: 3;
    grid-column-start: 3;
    display: inline-block
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid nav.lastRaidSorting .sortOption.active {
    background-color: #e1e0d2;
    -ms-grid-columns: 22px 10px 1fr 10px;
    grid-template-columns: 22px 10px 1fr 10px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid nav.lastRaidSorting .sortOption.active svg.arrow {
    position: relative;
    -ms-grid-column: 4;
    grid-column-start: 4;
    width: 7px;
    height: 7px;
    -ms-grid-row-align: center;
    align-self: center;
    -ms-grid-column-align: end;
    justify-self: end
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid nav.lastRaidSorting .sortOption.active svg.arrow path {
    fill: #5e463a
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.lastRaid nav.lastRaidSorting .sortOption.active svg.arrow.down {
    transform: scaleY(-1)
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table th.edit {
    width: 18px;
    padding-right: 5px;
    padding-left: 5px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.target {
    text-align: right;
    max-width: 1px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.target .raidListHeadline .listName .value,
#raidList .villageWrapper .dropContainer .raidList .raidListHeadline .listName .raidListContent table td.target .value,
#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.target td.target {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    direction: rtl
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.target i {
    vertical-align: top
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.target i.inactive {
    visibility: hidden
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.target a {
    display: inline
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.target svg.attackError {
    vertical-align: top;
    fill: #d40000;
    width: 16px;
    height: 16px
}

.colorBlind #raidList .villageWrapper .dropContainer .raidList .raidListContent table td.target svg.attackError {
    fill: #0022af
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.population,
#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.distance {
    text-align: left
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.troops {
    width: 60px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.troops .troopIcon {
    display: inline-block;
    white-space: nowrap
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.troops .troopIcon img {
    margin-left: 2px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.lastRaid>div {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 24px 1fr 18px;
    grid-template-columns: 24px 1fr 18px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.lastRaid>div>* {
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-align: center;
    align-self: center
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.lastRaid>div .iReport {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-column-align: start;
    justify-self: start
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.lastRaid>div a {
    -ms-grid-column: 2;
    grid-column-start: 2
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.lastRaid>div .carry {
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-column-align: end;
    justify-self: end;
    margin-top: -1px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.edit {
    padding-right: 5px;
    padding-left: 5px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table td.edit svg {
    width: 18px;
    height: 18px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table tfoot .newSlot {
    height: 23px;
    text-align: center;
    background-color: #fefdf8
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table tfoot .newSlot svg {
    vertical-align: top;
    margin-right: 5px;
    width: 14px;
    height: 14px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table tfoot .newSlot .slots {
    margin-right: 20px;
    color: #777
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table tfoot .newSlot .maxTargets {
    color: #777
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table tfoot .selectedTroops td {
    height: 23px;
    background-color: #f6f6f6;
    border: 0
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table tfoot .selectedTroops td.selectedCount {
    padding-right: 30px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table tfoot .selectedTroops td.equals {
    text-align: left;
    font-weight: bold;
    color: #d8d8d8;
    font-size: 18px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table tfoot .selectedTroops td.troopSelection {
    padding-right: 4px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table tfoot .selectedTroops td.troopSelection .troopSelectionUnit {
    white-space: nowrap;
    margin-right: 5px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table tfoot .feedback {
    display: none
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent table tfoot .feedback td {
    height: 23px;
    background-color: #f6f6f6;
    border: 0;
    text-align: center
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent .buttonWrapper {
    border: 1px solid silver;
    border-top: 0;
    background-color: #fefdf8;
    padding: 10px 9px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto auto 1fr auto;
    grid-template-columns: auto auto 1fr auto
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent .buttonWrapper .editButton {
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row: 1;
    grid-row-start: 1
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent .buttonWrapper .stateToggleButton {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
    margin-right: 10px
}

#raidList .villageWrapper .dropContainer .raidList .raidListContent .buttonWrapper .startButton {
    -ms-grid-column: 4;
    grid-column-start: 4;
    -ms-grid-row: 1;
    grid-row-start: 1
}

#raidList .villageWrapper .dropContainer .raidList#dragElement {
    position: fixed;
    opacity: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    z-index: 99
}

#raidList .villageWrapper .dropContainer .raidList#dragElement .raidListHeadline {
    border-color: #64a3c6
}

#raidListCreate {
    font-size: 14px
}

#raidListCreate input {
    width: 350px
}

#raidListCreate #error {
    padding: 10px 0
}

#raidListCreate .noteSmall {
    font-size: 13px;
    color: #777
}

#raidListUpdate {
    font-size: 14px
}

#raidListUpdate input {
    width: 430px
}

#raidListUpdate #error {
    padding: 10px 0
}

#raidListUpdate .noteSmall {
    font-size: 13px;
    color: #777
}

#raidListUpdate .sortContainer {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 35px 1fr;
    grid-template-columns: 35px 1fr;
    -ms-grid-rows: 2em .5em .5em 2em;
    grid-template-rows: 2em .5em .5em 2em;
    border: 1px solid #777;
    margin: 5px 0 10px
}

#raidListUpdate .sortContainer .moveUp,
#raidListUpdate .sortContainer .moveDown {
    -ms-grid-column: 1;
    grid-column-start: 1;
    user-select: none;
    text-align: center
}

#raidListUpdate .sortContainer .moveUp svg,
#raidListUpdate .sortContainer .moveDown svg {
    width: 25px;
    height: 15px;
    transition-duration: 250ms
}

#raidListUpdate .sortContainer .moveUp {
    grid-row: 1 / 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    padding-top: calc(2.5em - 15px - 5px)
}

#raidListUpdate .sortContainer .moveDown {
    grid-row: 3 / 5;
    -ms-grid-row: 3;
    -ms-grid-row-span: 2;
    padding-top: 5px
}

#raidListUpdate .sortContainer .moveDown svg {
    transform: scaleY(-1)
}

#raidListUpdate .sortContainer .listBefore,
#raidListUpdate .sortContainer .listCurrent,
#raidListUpdate .sortContainer .listAfter {
    -ms-grid-column: 2;
    grid-column-start: 2;
    -ms-grid-row-align: center;
    align-self: center
}

#raidListUpdate .sortContainer .listBefore,
#raidListUpdate .sortContainer .listAfter {
    color: #777
}

#raidListUpdate .sortContainer .listCurrent {
    font-weight: bold
}

#raidListUpdate .sortContainer .listBefore {
    -ms-grid-row: 1;
    grid-row-start: 1
}

#raidListUpdate .sortContainer .listCurrent {
    grid-row: 2 / 4;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2
}

#raidListUpdate .sortContainer .listAfter {
    -ms-grid-row: 4;
    grid-row-start: 4
}

#raidListUpdate .sortContainer .sortIndex {
    display: inline-block;
    text-align: left;
    width: 25px
}

#raidListUpdate .sortContainer .listName {
    padding-right: 5px
}

#raidListSlot {
    font-size: 14px;
    width: 476px;
    height: auto
}

#raidListSlot .raidListSlotInfos {
    padding: 10px 20px;
    margin-bottom: 20px;
    background-color: #e7e7e7;
    border-radius: 5px
}

#raidListSlot select {
    width: 100%
}

#raidListSlot option {
    width: 100%
}

#raidListSlot table th {
    width: 20%
}

#raidListSlot .troop {
    width: 40px;
    margin: 4px 10px
}

#raidListSlot .troop#t5,
#raidListSlot .troop#t10 {
    margin-left: 0
}

#raidListSlot .troops {
    margin-bottom: 10px
}

#raidListSlot .troopGroup {
    margin-right: 10px;
    float: right
}

#raidListSlot .deactivateTarget {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 1fr;
    grid-template-columns: auto 1fr;
    padding: 10px;
    margin: 10px 0;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 150ms
}

#raidListSlot .deactivateTarget:hover {
    background-color: #f2f2f2
}

#raidListSlot .deactivateTarget:active {
    background-color: #e7e7e7
}

#raidListSlot .deactivateTarget input {
    -ms-grid-column: 1;
    grid-column-start: 1;
    cursor: pointer
}

#raidListSlot .deactivateTarget .description {
    -ms-grid-column: 2;
    grid-column-start: 2;
    display: inline-block;
    padding-right: 10px;
    user-select: none
}

#raidListSlot .deactivateTarget .description span {
    display: block
}

#raidListSlot .deactivateTarget .description span:last-of-type {
    color: #777
}

#raidListTroopsSlots {
    margin: 10px 0 10px
}

#raidListTroopsSlots .troopGroup {
    float: right;
    margin-right: 10px
}

#raidListTroopsSlots .troopGroup label {
    position: relative;
    top: 2px
}

#raidListTroopsSlots .troopGroup .troop {
    width: 40px;
    margin: 4px 10px
}