@media(max-width:991px) and ( min-width:768px ) {

}
@media(max-width:766px) and ( min-width:565px ) {
  body div.village2 div#village_map {
    transform: translate(-60%, -51%) scale(0.8) !important;
  }
}
@media(max-width:564px) and ( min-width:400px ) {
  body div.village2 div#village_map {
    transform: translate(-50%, -50%) scale(0.6) !important
  }
}
@media(max-width:399px) {
  body #map_details:not(:has(#village_info)) {
    display: flex;
    position: fixed !important;
    margin: 0 !important;
    left: -33% !important;
    top: -250px !important;
    width: 98% !important;
  }
  #rx {
    transform: scale(0.85);
    display: flex;
  }
  
  .logout input {
    max-width: 100px;
  }
  body div.village2 div#village_map {
    transform: translate(-42%, -49%) scale(0.5) !important;
  }
  body.buildingsV3.perspectiveBuildings div#background::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 109px;
    background: #45542f;
  }
}

@media(max-width:991px) {
  body div#worldStartInfo div.countdownContent {
    font-size: 12px;
    max-width: 50%;
  }
  body div#worldStartInfo {
    height: 125px;
    background-image: url('../../img_rtl/login/countdownInfoBox-rtl.jpg');
    background-repeat: round;
  }
  body.activate .activationScreen #presentation.confirmation #activationMapContainer {
    position: unset;
  }
  body.activate .activationScreen #presentation #tribeSelectors input + .selector + .tribeDescription ul {
    position: unset;
    padding: 10px;
    width: 100% !important;
  }
  body.activate .activationScreen #presentation #tribeSelectors input + .selector + .tribeDescription ul li {
    max-width: 100% !important;
  }
  body.activate .activationScreen #presentation #tribeSelectors input + .selector + .tribeDescription ul::after {
    position: unset;
    display: none;
  }
  body.activate .activationScreen #presentation #tribeSelectors {
    flex-wrap: wrap;
  }
  body div#paymentWizard .infoArea .contentBorder-contents {
    height: fit-content;
  }
  #dialogContent {
    overflow-x: auto;
  }
  body .buyGoldContainer {
    width: 100%;
    margin-right: 15px;
    margin-top: 20px;
  }
  body .dialog.white .dialog-contents .cancel {
    left: 0 !important;
  }
  body #mapContainer #toolbar .contents {
    height: fit-content;
  }
  .iconButton.viewFull , .iconButton.zoomOut , .iconButton.zoomIn , #mapContainer .toolbar .dropdown , #mapContainer #minimapContainer .headline {
    display: none;
  }
  body #content.heroV2Appearance .selectionWrapper .previewWrapper {
    padding: 0 !important;
  }
  body #heroEditor .head {
    width: 100%;
  }
  body div.village1 table#troops td.un {
    display: none;
  }
  .troop_details tr > * {
    width: 100% !important;
    display: block;
    min-height: 30px;
    border: 1px solid #eee;
    max-width: 100% !important;
  }
  .troop_details tbody {
    display: flex;
  }
  body .troop_details tr {
    display: flex;
    flex-direction: column;
    width: 50%;
  }
  body.village2  #center {
    display: flex;
    min-height: fit-content;
  }
  body.buildingsV3 .buildingSlot {
    min-width: 80px;
  }
  body div.village1 div#village_map {
    max-width: initial;
  }
  body .advn {
    right: 0; 
    margin: 10px;
  }
  body #paymentWizardContainer #paymentWizard #packageSlider .package, #smallestPackageData .package {
    min-width: 128px;
  }
  body #paymentWizardContainer #paymentWizard #packageSlider .productsPage {
    display: flex;
    overflow-x: auto;
  }
  body .paymentPopupDialogWrapper .featureContent {
    float: unset;
    padding-left: 60px;
    height: fit-content !important;
  }
  body .paymentPopupDialogWrapper .featureBooking .featureRemainingTime {
    position: unset;
  }
  body.rtl .buttonFramed.rectangle.withText > div {
    padding: 5px;
  }
  body .dialog.paymentShopV0 .content .featureCollection .feature .featureButton button div, body .dialog.paymentShopV4 .content .featureCollection .feature .featureButton button div {
    font-size: 0;
  }
  body .dialog.paymentShopV0 .content .featureCollection .feature .featureTitle, body .dialog.paymentShopV4 .content .featureCollection .feature .featureTitle {
    font-size: 9px;
    white-space: nowrap;
    margin-left: 5px;
    margin-right: 5px;
  }
  body .dialog.paymentShopV4 .content .featureCollection .feature .featureImage {
    width: 31px !important;
    height: 18px !important;
    background-repeat: round;
  }
  body .dialog.paymentShopV0 .content .featureCollection .feature .featureButton button, body .dialog.paymentShopV4 .content .featureCollection .feature .featureButton button {
    min-width: fit-content;
    margin: 0 5px;
  }
  body .dialog.paymentShopV0 .content .featureCollection .feature .featureContent, body .dialog.paymentShopV4 .content .featureCollection .feature .featureContent {
    display: flex;
    height: fit-content;
  }
  body div#paymentWizard .feature {
    left: 0;
    height: fit-content;
    margin-bottom: 11px !important;
  }
  body .dialog.paymentShopV0 .content .featureCollection, body .dialog.paymentShopV4 .content .featureCollection {
    display: flex;
    flex-direction: column;
  }
  body .dialog.paymentShopV4 .contentWrapper {
    display: flex;
    flex-direction: column;
  }
  body .dialog.brown .dialog-contents .cancel {
    left: 0 !important;
  }
  body #troops tr {
    display: flex;
    flex-wrap: wrap;
  }
  body #troops tr td {
    flex: 0 0 50%;
  }
  body #map_details:not(:has(#village_info)) {
    display: flex;
    position: fixed !important;
    margin: 0 !important;
    left: 1%;
    top: 42px;
    width: 98% !important;
  }
  body div.map2 , body #mapContainer{
    max-width: 100%;
  }
  body div.village1 div.production, div.village1 div.units {
    width: 130px;
  }
  body div.village1 table td.num {
    font-size: 10px;
    font-weight: bold;
  }
body #header #navigation > a.village, #header #navigation > label.village {
  width: 50px;
  height: 50px;
}
body:not(.village2) #center {
  display: block;
  margin-top: 200px;
}
body.login #header , body.activate #header{
  display: none !important;
}
body.statistics #center , body.reports #center , body.messages #center , body.login #center , body.cropfinder #center , body.hero_inventory #center , body.perspectiveBuildings #center , body.error_site #center , body.hero #center  {
  margin-top: 60px !important;
}
body.gidResources #center {
  margin-top: 60px !important;
}
body.village3 #center{
  margin-top: 0px !important;
}
 body.error_site #header , body div#background::before{
  display: none !important;
}
body #center #contentOuterContainer.contentPage h1.titleInHeader, body .dialogV2.dialogWrapper .dialogContents h1.titleInHeader {
  font-size: 13px;
  width: fit-content;
}
body div.statistics div.top10Wrapper {
  display: flex;
  flex-direction: column;
}
body div#sysmsg {
  max-width: 100%;
  text-align: justify;
}
body.map{
  overflow-y: hidden;
}
body div.village1 table#movements div.mov {
  white-space: wrap;
}
 body.map #center {
  margin-top: -70px !important;
}
body #content.statistics table td.pla {
  min-width: 55px;
    font-size: 8px;
    max-width: 55px;
}
body #content.statistics table td.pop {
  width: 20%;
  font-size: 8px;
  font-weight: bold;
}
#content.statistics table td.pop.flags:last-child , .statistics #player thead td:last-child {
  display: none;
}
.statistics #player td:nth-child(7), .statistics #player td:nth-child(8) {
  display: none;
}
body #center #contentOuterContainer.contentPage {
  left: 2%;
  width: 96%;
  right: 2%;
}
body.village2 div#center div#contentOuterContainer #content{
  margin-left: auto !important;
  margin-right: auto !important;
}
body div.village2 div.villageMapWrapper {
  width: 100%;
}
body div.village2 div#village_map {
  top: 40% !important;
  left: 68% !important;
  transform: translate(-50%, -50%);
}
body div.messages .paper , body .dialog-dragbar , body .questWrapper.achievements {
  max-width: 100%;
}
body div.messages .paperContent {
  padding: 30px 15px 20px;
  max-width: 100%;
  
}
body .dragWrapper {
  left: 2% !important;
  right: 3%;
}
body .pointsAndAchievements .achievement img , body div.dialog div.content div.achievementPoints {
  width: 60px !important;
  height: 70px !important;
  background-size: contain !important;
  background-repeat: round !important;
  background-position: unset !important;
}
body div.bigSpeechBubble {
  display: none;
}
body div#achievementRewardList div.achievement div.pointAmount {
  font-size: 15px !important;
  left: 18px !important;
}
body div.dialog div.content div.achievementPoints div.points {
  font-size: 23px;
  margin-top: 13px;
}
body.statistics #player i {
  width: 14px;
  height: 14px;
  background-repeat: round;
}
body table.borderGap tr td:first-child, table.borderGap tr th:first-child {
  padding-right: 5px;
}
body .subTabs .subTabs_tabs a {
  font-size: 11px;
}
body .contentNavi.subNavi .scrollingContainer .content a {
  font-size: 9px;
}
body div.village1 div.movements {
  width: 106px;
}
body .dialog .dialog-container {
  padding: 10px 15px 5px;
  width: 370px !important;
}
body #tileDetails {
  max-width: 100%;
}
body #tileDetails .detailImage {
  max-width: 100%;
    padding-top: 0;
    background-size: 120px;
}
body #options a {
  font-size: 10px !important;
}
body #tileDetails .detailImage .a.arrow {
  white-space: normal;
}
body > div {
  left: 0 !important;
}
body div#paymentWizard .contentWrapper {
  left: 0px;
  overflow-y: auto;
}
body div#paymentWizard .header .tabButton {
  min-width: fit-content;
}
body div#paymentWizard .header .tabButton .tabBtnBGPart.start {
  width: 100%;
  right: 0;
  height: fit-content;
}
body img.unitSection {
  width: 60px;
  height: 60px;
  background-repeat: round;
}
body div#build div.bigUnitSection {
  width: 60px;
  height: 60px;
}
body.rtl div#paymentWizard .header .tabButton .text {
  font-size: 8px;
  max-width: 90px;
}
body div#paymentWizard .header ul {
  display: flex;
  gap: 5px;
}
body div#paymentWizard .header {
  margin-left: 0;
}
.dialog.paymentShopV4 .contentNavi {
  max-width: 100%;
  width: 100% !important;
}
body .dialog.brown {
  max-width: 100vw;
  overflow-x: hidden;
}
body .dialog.paymentShopV4 , body .dialog.paymentShopV4 .dialogContents , body #paymentWizardContainer #paymentWizard , body div#paymentWizard {
  max-width: 100%;
}
body #paymentWizardContainer #paymentWizard #paymentMethodsSlider {
  max-width: 100%;
  margin-top: 20px !important;
  flex-direction: column;
  margin-bottom: 20px;
}
.smsPayment.available {
  display: flex;
  flex-direction: column;
  max-width: 370px;
  gap: 20px;
}
body #paymentWizardContainer #paymentWizard #overview .resultBox td {
  font-size: 100%;
}
body div#paymentWizard .infoArea {
  position: unset;
  height: fit-content !important;
    width: fit-content !important;
}
body div#paymentWizard .contentArea {
  left: 0 !important;
  max-width: 100%;
  width: 100% !important;
  right: 0 !important;
}
body div.hero_inventory #hero_body {
  max-width: 100%;
  right: 0;
  padding-right: 24%;
  height: auto;
}
body div.hero_inventory #hero_body_container{
  height: auto;
}
body .heroV2 .heroItem {
  width: 50px;
  height: 50px;
}
body .heroV2 .heroItem .item {
  width: 50px;
  height: 50px;
  background-repeat: round;
}
body div.hero_inventory #hero_body img {
  max-width: 100%;
}
body div.hero_inventory #hero_inventory {
  max-width: 100%;
}
body #content.heroV2Inventory .currentHeroEquipment {
  height: auto;
}
#hero_body_content {
  display: none;
}
#background {
  padding-bottom: 90px;
}
body.buildingsV3.perspectiveBuildings div#background {
  background-image: url('../rb_images/bgBuildings-mobile.webp') !important;
    background-size: 100%;
    background-position: center !important;
}
body.buildingsV3.perspectiveBuildings {
  background-color: #83a4b6;
  background-image: linear-gradient(-8.9deg,#8dafc8 2112px,#b6c9d8 2168px,#aac8e2),linear-gradient(8.9deg,#8dafc8 2084px,#b6c9d8 2102px,#aac8e2) !important
}

body div#build div.action div.details {
  max-width: 100%;
}
body .resourceWrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 0 !important;
  gap: 5px;
}
.map2 div {
  max-width: initial;
}
 body #contentOuterContainer .village1 .buildingList, body #contentOuterContainer .village2 .buildingList {
  max-width: 75%;
  right: 50px !important;
}
#heroAdventure .location, #heroAdventure .place ,#heroAdventure .duration , #heroAdventure .timeLeft {
  display: none !important;
}
body button.textButtonV1 {
  padding: 4px 5px;
  font-size: 11px;
  white-space: nowrap;
}
body #content.heroAdventure .walkingCalculationWrapper , body #content.heroAdventure .walkingCalculationWrapper .walkingCalculationVillage {
  display: flex;
  flex-direction: column;
}
body #content.heroV2Appearance .selectionWrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
body #heroEditor .image {
  transform: translateX(150px);
}
#content.heroV2Appearance .selectionWrapper .optionsWrapper {
  display: flex;
}
body #heroEditor .image, body #heroEditor .image img {
  width: 250px !important;
}
body button.green:not(.disabled):not(:disabled) {
  right: 0 !important;
}
 body #heroEditor .image img {
  left: 50% !important;
  transform: translateX(-50%);
}
body #center #contentOuterContainer .contentContainer #content.heroV2Attributes .contentV2 {
  max-width: 100%;
}
body #content.heroV2Attributes .attributeBox > div.stats .name {
  font-size: 11px;
}
body .contentV2 .progressBar .bar {
  width: 100px;
}
body #content.heroV2Attributes .attributeBox > div.stats .value {
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 8px;
}
body #content.heroV2Attributes .attributeBox > div.heroProduction .changeProduction {
  display: flex;
  flex-wrap: wrap;
}
body label {
  text-wrap: wrap;
  margin-bottom: 10px;
  display: inline-block;
}
body #content.heroV2Inventory .currentHeroEquipment {
  left: 0;
}
body #content.heroV2Inventory .inventoryWrapper .inventoryFilters .filterSlot {
  width: 25px;
}
body #content.heroV2Inventory .inventoryWrapper .tradeItems {
  font-size: 10px;
}
body #content.referAFriend .referAFriendInfo .infoGraphic {
  display: flex;
  flex-wrap: wrap;
}
body #content.referAFriend .referAFriendInfo .shareButtonsWrapper .fb-share-button {
  font-size: 10px;
}
body #content.referAFriend .referAFriendInfo .header {
  max-width: 100%;
}
body #content.referAFriend .referralOverview .villageSlots {
  display: flex;
  flex-wrap: wrap;
}
body div.village3 table tbody td {
  font-size: 10px;
}
body #raidListCreate .boxes {
  max-width: 100%;
}
body #raidListCreate input {
  max-width: 100%;
}
body div.outerLoginBox div.innerLoginBox {
  max-width: 100%;
}
body div.outerLoginBox::before {
  background-size: cover;
  max-width: 100%;
}
body div {
  max-width: 100%;
}
body.logout #center div#contentOuterContainer #content.logout {
  display: flex !important;
}

*{
  box-sizing: border-box;
}

}