/********** IMAGES ********* */
/********** GRID ********* */
/********** INLINE ICONS ********* */
/********** FONT ********* */
/********** DIRECTIONS ********* */
/********** TEXT ********* */
/*** MEASUREMENT ** */
/*** COLOR CODES ** */
/*** COLOR USAGE ** */
/*** DEFAULT STYLES ** */
/*** TRIBES ** */
/*** BUILDINGS ** */
/*** RESOURCES ** */
/* ------------------- Activate ------------------- */
/* ------------------------------------------------ */
div.activate hr {
    height: 1px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px dotted #D3D3D3;
    margin-bottom: 20px;
}

div.activate div.btn {
    text-align: center;
}

div.activate div.notice {
    margin-bottom: 15px;
}

div.activate .activation {
    margin-bottom: 20px;
}

div.activate .activation.boxes {
    float: right;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

div.activate .activation.boxes .boxes-contents {
    padding: 5px 15px;
}

div.activate .startsIn {
    text-align: center;
    margin-bottom: 20px;
}

div.activate .startsIn .activation_time {
    color: #FF8000;
    font-size: 20px;
    text-align: center;
    margin: 5px 0;
}

.rtl div.activate .startsIn .activation_time {
    font-size: 21px;
}

div.activate .activation .code {
    font-weight: bold;
}

div.activate div.email {
    margin-bottom: 20px;
}

div.activate div.email div.boxes-contents {
    padding: 7px 0;
}

div.activate div.email table td.label {
    padding-right: 175px;
}

div.activate div.email table td.input {
    width: 56%;
}

div.activate .error2 {
    color: #FF8000;
}

div.activate .unavailable {
    font-size: 24px;
}

.rtl div.activate .unavailable {
    font-size: 25px;
}

div.activate .container .kind {
    float: right;
    width: 90px;
    position: relative;
}

div.activate .container .description-container {
    width: 400px;
    height: 220px;
    float: right;
    background-image: url('../img_rtl/activate/volkBackground-rtl.jpg');
    padding: 15px 18px;
    position: relative;
}

div.activate .container .headline {
    font-size: 120%;
    font-weight: bold;
    margin-bottom: 10px;
}

div.activate .container .description {
    display: none;
    height: 200px;
}

div.activate #sector .sectorDescription {
    padding-bottom: 20px;
}

div.activate #sector div.sectorSelect {
    position: relative;
    width: 513px;
    height: 198px;
}

div.activate #sector .map {
    margin-left: 10px;
    padding: 6px 7px 7px 6px;
    float: right;
    height: 185px;
    width: 185px;
    background-image: url('../img_rtl/activate/map-rtl.png');
    position: relative;
}

div.activate #sector .map.aeu {
    background-image: url('../img_rtl/activate/map-aeu.png');
}

div.activate #sector .map.territorial {
    background-image: url('../img_rtl/activate/map-territorial.png');
}

div.activate #sector .map .sector {
    width: 92px;
    height: 92px;
    float: left;
}

div.activate #sector .map #no {
    margin-left: 1px;
}

div.activate #sector .map #sw {
    margin-top: 1px;
}

div.activate #sector .map #so {
    margin-top: 1px;
    margin-left: 1px;
}

div.activate #sector .map .sector .active, div.activate #sector .map .sector .hover, div.activate #sector .map .sector .disabled {
    background-image: url('../img_rtl/activate/mapActive.png');
}

div.activate #sector .map .sector .highlight {
    width: 92px;
    height: 92px;
}

div.activate #sector .map .sector .hover {
    background-position: right -100px;
}

div.activate #sector .map .sector .disabled {
    background-position: right -200px;
}

div.activate div.vidDescription {
    padding: 0 20px 20px;
}

div.activate .container div.vidSelect {
    position: relative;
    width: 541px;
    height: 252px;
}

div.activate .container .kind .vid {
    background-image: url('../img_rtl/activate/volkIcon-rtl.png');
    width: 80px;
    height: 72px;
    cursor: pointer;
    padding: 6px 0;
}

div.activate .container .kind .vid1 {
    background-position: -11px -388px;
}

div.activate .container .kind .vid2 {
    background-position: -11px -688px;
}

div.activate .container .kind .vid3 {
    background-position: -11px -88px;
}

div.activate .container .kind .vid1Highlight {
    background-position: -11px -482px;
}

div.activate .container .kind .vid2Highlight {
    background-position: -11px -782px;
}

div.activate .container .kind .vid3Highlight {
    background-position: -11px -182px;
}

div.activate .container .kind .vid1Active {
    background-position: -11px -582px;
}

div.activate .container .kind .vid2Active {
    background-position: -11px -882px;
}

div.activate .container .kind .vid3Active {
    background-position: -11px -282px;
}

div.activate .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;
}

div.activate .container .description-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

div.activate .container .description-container .text {
    width: 285px;
}

div.activate .container .description-container .special {
    margin-bottom: 10px;
}

div.activate .container .description-container .bubble {
    background-image: url('../img_rtl/activate/bubble-rtl.png');
    height: 30px;
    right: -10px;
    position: absolute;
    width: 38px;
}

div.activate .container .description-container .vid1 .bubble {
    top: 115px;
}

div.activate .container .description-container .vid2 .bubble {
    top: 200px;
}

div.activate .container .description-container .vid3 .bubble {
    top: 30px;
}

div.activate .submitButton {
    text-align: center;
    margin-top: 15px;
}

div.activate .boxGrey .boxTop, div.activate .boxGrey .boxBottom, div.activate .boxGrey .boxMiddle {
    width: 551px;
}

div.activate .boxGrey .content {
    position: relative;
    padding: 15px 5px;
}

div.activate div.ffBug {
    display: none;
}

div.activate .boxVidInfo {
    margin-bottom: 25px;
}

div.activate .boxVidInfo .greenbox-content {
    padding: 0px 20px;
    width: 515px;
    color: #228B22;
    font-weight: bold;
}

div.activate .avatar {
    background-image: url('../../images/activation/avatars-rtl.png');
    height: 180px;
    width: 190px;
    position: absolute;
    left: -35px;
}

div.activate #vid .avatar {
    bottom: -72px;
}

div.activate .avatar.vid1 {
    background-position: 0 -416px;
}

div.activate .avatar.vid2 {
    background-position: 0 -216px;
}

div.activate .avatar.vid3 {
    background-position: 0 -16px;
}

div.activate .changeVid a {
    color: #333333;
    background-image: url('../img_rtl/activate/arrow-rtl.png');
    display: block;
    height: 20px;
    padding-right: 30px;
    line-height: 20px;
    margin-top: 10px;
}

div.activate .start {
    background-image: url('../img_rtl/activate/bubbleSector-rtl.jpg');
    float: left;
    height: 25px;
    padding: 26px 30px 25px 20px;
    width: 254px;
}

div.activate .start select {
    width: 100%;
}

div.activate #sector .buttonContainer {
    float: left;
    padding-right: 5px;
    padding-top: 20px;
    width: 299px;
    height: 25px;
}

div.activate #sector .boxGrey .content {
    padding: 15px 19px;
    position: relative;
}

div.activate #sector .avatar {
    bottom: -16px;
}

/* new activation screen UI */
.activate div#contentOuterContainer {
    margin-bottom: 50px;
}

.activate .activationScreen {
    width: 100%;
}

.activate .activationScreen .activationIntro {
    text-align: center;
    font-size: 15px;
    line-height: 20px;
}

.activate .activationScreen * {
    box-sizing: border-box;
}

.activate .activationScreen #presentation {
    padding: 7px 7px 10px;
    min-height: 330px;
    position: relative;
    width: 100%;
    border-radius: 4px;
    margin-top: 15px;
}

.activate .activationScreen #presentation.sectors {
    background-color: transparent;
}

.activate .activationScreen #presentation.confirmation {
    width: 100%;
    height: 100%;
    background-color: rgba(144, 120, 92, 0.5);
}

.activate .activationScreen #presentation svg {
    width: 100%;
    min-height: 250px;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
}

.activate .activationScreen #presentation svg .outer {
    stroke: #e4cd98;
    stroke-width: 5;
    fill: #bb8050;
}

.activate .activationScreen #presentation svg .inner {
    fill: #fdeaa7;
}

.activate .activationScreen #presentation svg .arrowFirst {
    position: absolute;
    top: 0;
}

.activate .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;
}

.activate .activationScreen #presentation #descriptions {
    position: relative;
    min-height: 220px;
}

.activate .activationScreen #presentation #tribeSelectors {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}

.activate .activationScreen #presentation #tribeSelectors input {
    display: none;
    /* mirror tribe 6 + 7 */
}

.activate .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;
    z-index: 3;
}

.activate .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;
}

.activate .activationScreen #presentation #tribeSelectors input + .selector:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: 0 80px;
}

.activate .activationScreen #presentation #tribeSelectors input + .selector:hover:after {
    background-position: 0 0;
}

.activate .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;
    pointer-events: none;
}

.activate .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%;
}

.activate .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;
}

.activate .activationScreen #presentation #tribeSelectors input + .selector + .tribeDescription ul li {
    max-width: calc(100% - 180px);
    padding-right: 25px;
    line-height: 16px;
    margin-bottom: 10px;
}

.activate .activationScreen #presentation #tribeSelectors input + .selector + .tribeDescription ul li:before {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    margin-right: -25px;
}

.activate .activationScreen #presentation #tribeSelectors input + .selector + .tribeDescription ul:after {
    content: "";
    position: absolute;
    width: 188px;
    height: 176px;
    bottom: -1px;
    left: 0;
    background-image: url('../../images/activation/avatars-rtl.png');
    background-position: 0 0;
    z-index: -1;
    opacity: 0;
}

.activate .activationScreen #presentation #tribeSelectors input:not(:checked):active + .selector {
    box-shadow: none;
}

.activate .activationScreen #presentation #tribeSelectors input:checked + .selector {
    border: solid 2px #f8d483;
    box-shadow: 2px 2px 30px #ba7e4d inset, -2px -2px 30px #ba7e4d inset;
    cursor: default;
}

.activate .activationScreen #presentation #tribeSelectors input:checked + .selector:after {
    background-position: 0 0;
}

.activate .activationScreen #presentation #tribeSelectors input:checked + .selector + .tribeDescription {
    z-index: 2;
    opacity: 1;
    color: #555555;
}

.activate .activationScreen #presentation #tribeSelectors input:checked + .selector + .tribeDescription ul:after {
    opacity: 1;
}

.activate .activationScreen #presentation #tribeSelectors input[value="1"] + .selector:after {
    background-image: url('../../images/activation/tribe1.png');
}

.activate .activationScreen #presentation #tribeSelectors input[value="1"] + .selector + .tribeDescription ul li:before {
    background-image: url('../../images/army/romans/unit_icons.gif?v=73ac57a6c1');
}

.activate .activationScreen #presentation #tribeSelectors input[value="1"] + .selector + .tribeDescription ul:after {
    background-position: 0 -433px;
    height: 202px;
}

.activate .activationScreen #presentation #tribeSelectors input[value="2"] + .selector:after {
    background-image: url('../../images/activation/tribe2.png');
}

.activate .activationScreen #presentation #tribeSelectors input[value="2"] + .selector + .tribeDescription ul li:before {
    background-image: url('../../images/army/teutons/unit_icons.gif?v=0567d77c7c');
}

.activate .activationScreen #presentation #tribeSelectors input[value="2"] + .selector + .tribeDescription ul:after {
    background-position: 0 -217px;
    height: 202px;
}

.activate .activationScreen #presentation #tribeSelectors input[value="3"] + .selector:after {
    background-image: url('../../images/activation/tribe3.png');
    background-position-x: -8px;
}

.activate .activationScreen #presentation #tribeSelectors input[value="3"] + .selector + .tribeDescription ul li:before {
    background-image: url('../../images/army/greeks/unit_icons.gif?v=503eb94948');
}

.activate .activationScreen #presentation #tribeSelectors input[value="3"] + .selector + .tribeDescription ul:after {
    background-position: 0 0;
}

.activate .activationScreen #presentation #tribeSelectors input[value="6"] + .selector:after {
    background-image: url('../../images/activation/tribe6.png');
}

.activate .activationScreen #presentation #tribeSelectors input[value="6"] + .selector + .tribeDescription ul li:before {
    background-image: url('../../images/army/egyptians/unit_icons.gif?v=8f88642207');
}

.activate .activationScreen #presentation #tribeSelectors input[value="6"] + .selector + .tribeDescription ul:after {
    background-position: 0 -649px;
    height: 215px;
    bottom: -14px;
}

.activate .activationScreen #presentation #tribeSelectors input[value="7"] + .selector:after {
    background-image: url('../../images/activation/tribe7.png');
}

.activate .activationScreen #presentation #tribeSelectors input[value="7"] + .selector + .tribeDescription ul li:before {
    background-image: url('../../images/army/mongols/unit_icons.gif?v=282aeb6ae2');
}

.activate .activationScreen #presentation #tribeSelectors input[value="7"] + .selector + .tribeDescription ul:after {
    background-position: 0 -851px;
    height: 216px;
    bottom: -1px;
}

#center #contentOuterContainer #content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="6"] + .selector + .tribeDescription h2,
#center #contentOuterContainer #content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="7"] + .selector + .tribeDescription h2 {
    margin-right: 0 !important;
}

#center #contentOuterContainer #content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="6"] + .selector + .tribeDescription ul,
#center #contentOuterContainer #content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="7"] + .selector + .tribeDescription ul {
    width: 100% !important;
    right: 0 !important;
}

#center #contentOuterContainer #content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="6"] + .selector + .tribeDescription ul:after,
#center #contentOuterContainer #content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="7"] + .selector + .tribeDescription ul:after {
    right: auto !important;
    left: 0 !important;
}

#center #contentOuterContainer #content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="6"] + .selector + .tribeDescription ul li,
#center #contentOuterContainer #content.activate .activateWithSectors .activationScreen #presentation #tribeSelectors input[value="7"] + .selector + .tribeDescription ul li {
    max-width: calc(100% - 180px) !important;
}

.activate .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;
}

.activate .activationScreen #presentation #activationMapContainer:after {
    content: "";
    width: 317px;
    height: 297px;
    background-image: url('../../images/activation/sector-map-background-rtl.png');
    z-index: -1;
    position: absolute;
}

.activate .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;
}

.activate .activationScreen #presentation #activationMapContainer #map:after {
    content: "";
    width: 276px;
    height: 256px;
    background-image: url('../../images/activation/sector-map.png');
    background-repeat: no-repeat;
    position: absolute;
    box-sizing: content-box;
}

.activate .activationScreen #presentation #activationMapContainer #map:before {
    content: "";
    width: 276px;
    height: 256px;
    background: url('../../images/activation/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;
}

.activate .activationScreen #presentation #activationMapContainer #map.territorial:after {
    background-image: url('../../images/activation/sector-map-territorial.png');
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"] {
    display: none;
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"]:disabled + label {
    background-color: rgba(50, 50, 50, 0.5);
    cursor: auto;
}

.activate .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;
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"] + label:hover {
    background-color: rgba(116, 94, 60, 0.5);
    color: #fdefcc;
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"] + label:active {
    box-shadow: 0 0 40px #5e3f2a inset;
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"] + label[data-text]:before {
    content: attr(data-text);
    width: auto;
    position: absolute;
    bottom: 10px;
    background-color: #35700e;
    padding-right: 5px;
    padding-left: 5px;
    color: #F2F2F2;
    font-size: 90%;
    right: 50%;
    transform: translateX(-50%);
    opacity: 0.65;
}

.territorial label[data-text]:before {
    color: #655642 !important;
    background-color: #f1b900 !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.rtl .activate .activationScreen #presentation #activationMapContainer #map input[name="sector"] + label[data-text]:before {
    transform: translateX(50%);
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"][value="nw"] + label {
    left: 0;
    top: 0;
    padding-top: 10px;
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"][value="no"] + label {
    right: 0;
    top: 0;
    padding-top: 10px;
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"][value="sw"] + label {
    left: 0;
    bottom: 0;
    padding-top: 90px;
    height: 129px;
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"][value="so"] + label {
    right: 0;
    bottom: 0;
    padding-top: 90px;
    height: 129px;
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"][value="sw"] + label[data-text]:before, .activate .activationScreen #presentation #activationMapContainer #map input[name="sector"][value="so"] + label[data-text]:before {
    bottom: 40px;
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"]:checked + label {
    background-color: transparent;
    background: url('../../images/activation/sector-banner-rtl.png') no-repeat center;
    cursor: default;
    transition-timing-function: ease-in;
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"]:checked + label:hover {
    background-color: transparent;
    color: #655642;
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"]:checked + label:active {
    background-color: transparent;
    color: #655642;
    box-shadow: none;
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"]:checked + label[data-text]:before {
    opacity: 1;
}

.activate .activationScreen #presentation #activationMapContainer #map input[name="sector"]:checked[value="sw"] + label[data-text], .activate .activationScreen #presentation #activationMapContainer #map input[name="sector"]:checked[value="so"] + label[data-text] {
    background-position: center 10px;
}

.activate .activationScreen #presentation.confirmation #activationMapContainer {
    top: 10px;
    left: 0;
    transform: scale(0.78);
    background-color: transparent;
    position: absolute;
}

.activate .activationScreen #presentation.confirmation #activationMapContainer input[name="sector"] + label {
    cursor: default !important;
    pointer-events: none;
}

.activate .activationScreen #presentation.confirmation #selectedTribe {
    position: absolute;
    top: 55px;
    right: 55px;
}

.activate .activationScreen #presentation.confirmation #selectedTribe .character {
    width: 200px;
    height: 190px;
    margin-bottom: 10px;
    background-image: url('../../images/activation/avatars-rtl.png');
    background-position: 0 0;
}

.activate .activationScreen #presentation.confirmation #selectedTribe.tribe1 .character {
    background-position: 0 -433px;
}

.activate .activationScreen #presentation.confirmation #selectedTribe.tribe2 .character {
    background-position: 0 -217px;
}

.activate .activationScreen #presentation.confirmation #selectedTribe.tribe3 .character {
    background-position: 0 0;
}

.activate .activationScreen #presentation.confirmation #selectedTribe.tribe6 .character {
    height: 207px;
    background-position: 0 -648px;
    margin-top: -7px;
}

.activate .activationScreen #presentation.confirmation #selectedTribe.tribe7 .character {
    height: 215px;
    background-position: 0 -863px;
    margin-bottom: 0;
}

.activate .activationScreen #presentation.confirmation #selectedTribe .tribeName {
    position: absolute;
    right: 50%;
    transform: translateX(-50%);
}

.rtl .activate .activationScreen #presentation.confirmation #selectedTribe .tribeName {
    transform: translateX(50%);
}

.activate .activationScreen .acceptChallenge {
    width: 100%;
    text-align: center;
    position: relative;
    margin-top: 20px;
    z-index: 3;
    font-weight: bold;
    text-shadow: 1px 0 2px #000000, 1px 1px 2px #000000, 0 1px 2px #000000, -1px 1px 2px #000000, -1px 0 2px #000000, -1px -1px 2px #000000, 0 -1px 2px #000000, 1px -1px 2px #000000;
}

.activate .activationScreen .buttonContainer {
    width: 100%;
    height: 100px;
    position: relative;
    z-index: 2;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
}

.activate .activationScreen .buttonContainer button {
    transform: scale(1.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    position: relative;
    z-index: 1;
    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;
}

.ie .activate .activationScreen .buttonContainer button {
    margin-top: 40px;
}

body:not(.safari) .activate .activationScreen .buttonContainer button.green:disabled span {
    transition: padding 250ms;
}

body:not(.safari) .activate .activationScreen .buttonContainer button.green:disabled span:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    display: block;
    top: 3px;
    left: 15px;
    background-image: url('../img_rtl/application/views/activation/loading.png');
    background-size: contain;
    pointer-events: none;
    opacity: 0;
    transition: opacity 250ms;
}

body:not(.safari) .activate .activationScreen .buttonContainer button.green:disabled.loading span {
    padding-left: 20px;
}

body:not(.safari) .activate .activationScreen .buttonContainer button.green:disabled.loading span:before {
    opacity: 0.4;
    animation: loadingSpinner 2s linear infinite;
}

@keyframes loadingSpinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

.activate .activationScreen .buttonContainer button.green: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);
}

.activate .activationScreen .buttonContainer button.green:not(:hover):not(:focus):not(:active):disabled {
    text-shadow: none;
}

.activate .activationScreen .buttonContainer button.green:not(:hover):not(:focus):not(:active):not(:disabled) {
    animation: activationButtonGrow 6s ease-in-out infinite;
}

.ie .activate .activationScreen .buttonContainer button.green:not(:hover):not(:focus):not(:active):not(:disabled), .edge .activate .activationScreen .buttonContainer button.green:not(:hover):not(:focus):not(:active):not(:disabled) {
    animation: none;
}

.activate .activationScreen .buttonContainer button.green:not(:hover):not(:focus):not(:active):not(:disabled):before, .activate .activationScreen .buttonContainer button.green:not(:hover):not(:focus):not(:active):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;
}

.activate .activationScreen .buttonContainer button.green:not(:hover):not(:focus):not(:active):not(:disabled):before {
    background-image: url('../img_rtl/application/views/activation/buttonHighlight.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: -50px 0;
    animation: activationButtonFlash 6s linear infinite;
}

.activate .activationScreen .buttonContainer button.green:not(:hover):not(:focus):not(:active):not(:disabled):after {
    opacity: 0;
    background-color: #8ad220;
    animation: activationButtonGlow 6s ease-in-out infinite;
}

.ie .activate .activationScreen .buttonContainer button.green:not(:hover):not(:focus):not(:active):not(:disabled):after, .edge .activate .activationScreen .buttonContainer button.green:not(:hover):not(:focus):not(:active):not(:disabled):after {
    animation: none;
}

.activate .activationScreen .buttonContainer button.green:not(:hover):not(:focus):not(:active):not(:disabled) span {
    animation: activationButtonTextGlow 6s ease-in-out infinite;
    pointer-events: none;
    position: relative;
    z-index: 2;
}

.ie .activate .activationScreen .buttonContainer button.green:not(:hover):not(:focus):not(:active):not(:disabled) span, .edge .activate .activationScreen .buttonContainer button.green:not(:hover):not(:focus):not(:active):not(:disabled) span {
    animation: none;
}

@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: 0.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);
    }
}

.activate .contentContainer #content a.contentTitleButton {
    position: absolute;
    top: 0;
    right: 5px;
}

body.activate #header,
body.activate #footer,
body.activate #navigation,
body.activate #logo,
body.activate #sidebarAfterContent,
body.activate #sidebarBeforeContent,
body.activate #side_info,
body.activate .sidebar,
body.activate .sidebarBox,
body.activate .footer,
body.activate .footer-sticky,
body.activate .footerNav,
body.activate .header,
body.activate .logo,
body.activate .loginNavigation {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.activate #center {
    float: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.activate #contentOuterContainer.size1 {
    float: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.activate #center #contentOuterContainer.size1 > .contentTitle > h1.titleInHeader {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    text-align: center !important;
}

body.activate #center #contentOuterContainer.size1 > .contentTitle {
    position: relative !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

body.activate #center #contentOuterContainer.size1 > .contentTitle > a.contentTitleButton#backButton {
    position: absolute !important;
    top: 56% !important;
    right: 50px !important;
    left: auto !important;
    float: none !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
}

body.activate #center #contentOuterContainer.size1 > .contentTitle > a.contentTitleButton#backButton:before,
body.activate #center #contentOuterContainer.size1 > .contentTitle > a.contentTitleButton#backButton:hover:before,
body.activate #center #contentOuterContainer.size1 > .contentTitle > a.contentTitleButton#backButton:active:before {
    background-size: 18px 18px !important;
}

body.activate #center #contentOuterContainer.size1 > .contentTitle > a.contentTitleButton#backButton svg {
    width: 18px !important;
    height: 18px !important;
}

body.activate .activationScreen .activationIntro.sectorIntro {
    font-size: 16px;
}

@media screen and (max-width: 760px) {
    html#mainLayout,
    body.activate {
        width: 100% !important;
        height: 100svh !important;
        min-width: 0 !important;
        min-height: 100svh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.activate #background,
    body.activate #bodyWrapper,
    body.activate #center {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100svh !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
    }

    body.activate #center #contentOuterContainer.size1 {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        width: 600px !important;
        max-width: none !important;
        min-width: 600px !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) scale(0.9) !important;
        transform-origin: center center !important;
        overflow: visible !important;
    }

    body.activate #center #contentOuterContainer.size1 .contentTitle {
        width: 600px !important;
        height: 67px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.activate #center #contentOuterContainer.size1 > .contentTitle > a.contentTitleButton#backButton {
        right: 112px !important;
    }

    body.activate #center #contentOuterContainer.size1 .contentContainer {
        width: 598px !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 0 10px !important;
        margin: 0 !important;
        box-sizing: content-box !important;
        overflow: visible !important;
    }

    body.activate #center #contentOuterContainer.size1 #content.activate {
        width: 564px !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 435px !important;
        padding: 9px 6px 10px !important;
        margin: 0 17px !important;
        box-sizing: content-box !important;
        overflow: visible !important;
    }

    body.activate #center #contentOuterContainer.size1 .activateWithSectors,
    body.activate .activationScreen {
        overflow: visible !important;
    }

    body.activate .activationScreen #presentation,
    body.activate .activationScreen #presentation > svg,
    body.activate .activationScreen #presentation #tribeSelectors,
    body.activate .activationScreen #presentation #activationMapContainer {
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.activate .activationScreen #presentation #tribeSelectors > label.selector,
    body.activate .activationScreen #presentation #tribeSelectors > div.tribeDescription {
        visibility: visible !important;
        opacity: inherit;
    }

    body.activate .activationScreen #presentation.sectors {
        min-height: 405px !important;
        padding-bottom: 64px !important;
    }

    body.activate .activationScreen #presentation.sectors #activationMapContainer {
        transform: scale(1.2);
        transform-origin: center top;
    }
}

@media screen and (max-width: 620px) {
    body.activate #center #contentOuterContainer.size1 {
        transform: translate(-50%, -50%) scale(0.8) !important;
    }
}

@media screen and (max-width: 520px) {
    body.activate #center #contentOuterContainer.size1 {
        transform: translate(-50%, -50%) scale(0.72) !important;
    }
}

@media screen and (max-width: 430px) {
    body.activate #center #contentOuterContainer.size1 {
        transform: translate(-50%, -50%) scale(0.67) !important;
    }
}

@media screen and (max-width: 390px) {
    body.activate #center #contentOuterContainer.size1 {
        transform: translate(-50%, -50%) scale(0.635) !important;
    }
}

@media screen and (max-width: 360px) {
    body.activate #center #contentOuterContainer.size1 {
        transform: translate(-50%, -50%) scale(0.59) !important;
    }
}

@media screen and (max-width: 345px) {
    body.activate #center #contentOuterContainer.size1 {
        transform: translate(-50%, -50%) scale(0.56) !important;
    }
}

@media screen and (max-width: 330px) {
    body.activate #center #contentOuterContainer.size1 {
        transform: translate(-50%, -50%) scale(0.52) !important;
    }
}