* {
  margin: 0px;
  padding: 0px;
}
body {
  cursor: url("../Res/arrow.png"), auto;
  height: 100%;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                               supported by Chrome and Opera */
}

.nicescroll-rails.nicescroll-rails-vr {
  display: none !important;
}

button {
  outline: none;
  background: none;
}
.input {
  border: solid 5px transparent !important;
  border-image: url(../Res/border/input.png) 15% round !important;
  border-image-outset: 4px !important;
  box-sizing: border-box !important;
}
.selectable {
  -webkit-touch-callout: all; /* iOS Safari */
  -webkit-user-select: all; /* Safari */
  -khtml-user-select: all; /* Konqueror HTML */
  -moz-user-select: all; /* Firefox */
  -ms-user-select: all; /* Internet Explorer/Edge */
  user-select: all; /* Non-prefixed version, currently
                               supported by Chrome and Opera */
}

.gray-filter {
  -webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
  filter: grayscale(80%);
}
#wait {
  cursor: wait;
}
html {
  height: 100%;
}
canvas {
  margin: 0px !important;
  padding: 0px !important;
}

.not_enough {
  color: red;
}

#city-profile {
  position: fixed;
  bottom: 0px;
  right: 4px;
  background-image: url(../Res/background/player_profile_banner.png);
  background-size: 100% 100%;
  width: 412px;
  height: 210px;
  z-index: 10;
  padding: 0px 10px;
  transition: all 0.8s;
}
#city-profile .upper_nave_bar {
  width: 100%;
  margin-top: -25px;
  margin-bottom: 25px;
}
#city-profile .upper_nave_bar ul {
  height: 22px;
  margin: auto;
  width: 182px;
}
#city-profile .upper_nave_bar ul li {
  float: left;
  margin-left: 4.5px;
}

#city-profile .upper_nave_bar ul li:hover {
  transform: scale(1.1);
}
#city-profile .upper_nave_bar ul li img {
  width: 40px;
  background-image: url(../Res/btns/resourceFrame.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
#city-profile .page_content {
  clear: both;
  height: 83.5%;
}
#city-profile .page_content table tr td img {
  height: 25px;
  margin-top: 2px;
  margin-left: 7px;
  float: left;
}
#city-profile .page_content table tr td .img {
  height: 25px;
  margin-top: 2px;
  margin-left: 7px;
  float: left;
  width: 25px;
}
#city-profile .page_content table tr td .pluse {
  height: 25px;
  width: 25px;
  margin-left: 7px;
  float: left;
  background-image: url(../Res/icons/pluse.png);
  background-position: center;
  background-size: 22px 22px;
  background-repeat: no-repeat;
}
#city-profile .page_content table tr td .pluse:hover {
  background-image: url(../Res/icons/pluse-h.png);
}
#city-profile .page_content table tr td .pluse:active {
  background-image: url(../Res/icons/pluse-a.png);
}
#city-taxs-in-cp:hover {
  background: linear-gradient(rgb(245, 231, 190), rgb(219, 192, 127));
}
#city-taxs-in-cp span {
  margin-right: 5px;
}
#city-profile .page_content table tr td span {
  line-height: 25px;
  font-size: 12px;
  display: block;
  float: left;
}
#city-profile .page_content table tr td .count {
  font-weight: bold;
  color: #81511c;
}
#city-profile .page_content table tr td .over-rate {
  font-weight: bold;
  color: #ea700d;
}

#city-profile .page_content table tr td {
  width: 50%;
  padding: 5px 0px;
  border-bottom: solid 1px darkgoldenrod;
}
#city-profile .page_content table tr:last-child td {
  border: none;
}
#city-profile .page_content table tr td .buy_button {
  width: 80%;
  height: 18px;
  margin: auto;
}
#city-profile .page_content table tr td .full-btn {
  line-height: 18px;
  font-size: 16px;
}
#city-profile .page_content table {
  width: 100%;
  width: 95%;
  margin: auto;
  height: 99%;
}
#city-profile .page_content table tr td .left {
  float: left;
  height: 27px;
}
#city-profile .page_content table tr td .right {
  float: right;
  height: 27px;
  margin-right: 5px;
}
#city-profile .page_content table tr td .rate {
  line-height: 34px;
  font-size: 11px;
  color: #5f8c00;
}
#city-profile .page_content table tr td .rate-neg {
  line-height: 34px;
  font-size: 11px;
  color: #fc1c12;
  font-family: cursive;
}
/*#city-profile .page_content ul li .hero_img ,#city-profile .page_content ul li .hero_lvl , #city-profile .page_content ul li .hero_state {
    position: absolute;
}*/
#city-profile .page_content ul li .hero_img img {
  width: 90px;
}
#city-profile .page_content ul li {
  float: left;
  width: 92px;
  height: 45px;
  margin: 5px 2px;
  background-size: 92% 86%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  border-radius: 14px;
}
#city-profile .page_content ul li::before {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
}
#city-profile .page_content ul li .hero_lvl img {
  height: 20px;
}
#city-profile .page_content ul li .hero_state img {
  height: 20px;
  margin-left: 3px;
}
#city-profile .page_content ul {
  height: 100%;
  width: 94%;
  margin: auto;
}
#city-profile .page_content ul li .hero_lvl {
  width: 85px;
  height: 18px;
  padding-left: 3px;
}
.page_content .army {
  height: 166px;
  width: 90%;
  margin: auto;
  margin-top: 15px;
  padding-top: 7px;
}
.page_content .wild {
  height: 166px;
  width: 90%;
  margin: auto;
  margin-top: 10px;
  padding-top: 2px;
}
.page_content .army .left_army {
  width: 75%;
  height: 100%;
  float: left;
}
.page_content .army .army_type,
.page_content .wild_type {
  width: 33%;
  float: left;
  position: relative;
}
.page_content .wild_type {
  width: 25%;
  float: left;
}
.army_type .army_img img {
  width: 77px;
  padding: 4px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  display: block;
  margin: auto;
}
.army_type .army_img .wrapper {
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 4px;
  width: 77px;
  margin: auto;
}
.army_type .army_img .img {
  height: 36px;
  background-size: 100% 100%;
  display: block;
}
.wild_type {
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
}
.wild_type .wild_img {
  width: 92%;
  height: 45px;
  margin-top: 5px;
  background-size: cover;
  background-position: center;
  margin: 4px;
  border-radius: 5px;
}
.army .army_count {
  position: absolute;
  width: 100%;

  margin-top: -18px;
}
.army .army_count h6 {
  width: 85%;
  background-color: rgba(0, 0, 0, 0.5);
  margin: auto;
  color: white;
  direction: rtl;
  text-indent: 10px;
}
.page_content .army .right_army {
  float: right;
  width: 25%;
  height: 100%;
}
/*______________________________for _buildoing________________________________*/
.for_building {
  height: 495px !important;
}
.box_header {
  width: 100%;
  height: 90px;
}
.upgrade-btn,
.big-btn {
  width: 135px;
  height: 63px;
  margin-top: 27.5px;
  margin-right: 22px;
  float: right;
}

.box_header .desc {
  width: 55%;
  float: right;
  margin: auto;
  height: 63px;
  margin-top: 26px;
  margin-right: 14px;
  background-image: url(../Res/skins/desc-rect.png);
  background-size: 110% auto;
  background-position: -25px -25px;
  color: #5e341b;
  border: solid 7px transparent;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  direction: rtl;
  border-image: url(../Res/border/sml_btn.jpg);
  border-image-slice: 7;
  border-image-repeat: round;
}
.building-img {
  width: 135px;
  height: 63px;
  margin-top: 27px;
  margin-right: 22px;
  float: right;
}

.for_building .box_content {
  height: 325px;
  margin-top: -2px;
}

.for_building .box_content .left-content::before {
  content: "";
  width: 10px;
  margin: auto;
  background-color: red;
  position: absolute;
  right: -5px;
  height: 301px;
  background-image: url(../Res/border/sprite_v.png);
  background-size: contain;
  z-index: 1;
}

.big-btn .full-btn {
  height: 100%;
  font-size: 26px;
  line-height: 50px;
  width: 100%;
  background-image: url(../Res/btns/building/upgrade.png);
  background-size: 100% 100%;
}
.big-btn .full-btn:hover {
  background-image: url(../Res/btns/building/upgrade-h.png);
}
.big-btn .full-btn:active {
  background-image: url(../Res/btns/building/upgrade-a.png);
}
.big-btn .full-btn:disabled {
  background-image: url(../Res/btns/building/upgrade-h.png);
}
.box_header .desc {
  justify-content: space-around;
}
.box_header .desc p {
  padding-top: 15px;
  font-size: 14px;
  margin-right: 18px;
  width: 80%;
  float: right;
}
.box_header .desc .functionDesc {
  padding: 0px;
  float: none;
  margin: 0px;
  height: 36px;
}
#upgrade-action {
  width: 10%;
  height: 100%;
  float: left;
  line-height: 75px;
  text-align: center;
}
#upgrade-action img {
  text-align: center;
}
.building-img img {
  height: 52px;
  margin: auto;
  display: block;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 4.5px;
  border-radius: 8px;
}

/*____________________________________________________________________________*/
/*______________----_____________________-HERO _______________________________*/
.hero_dial .left-content {
  width: 22% !important;
  overflow: hidden;
}
.hero_dial .middle-content {
  width: 35% !important;
  height: 100%;
  background: url(../Res/icons/bg_patern.png);
  float: left;
  border: 4px solid transparent;
  border-image: url(../Res/border/border_red.png);
  border-image-slice: 7;
  border-image-repeat: round;
  box-sizing: border-box;
  border-top: none;
  border-bottom: none;
}
.hero_dial .right-content {
  width: 43% !important;
}
#city-hero-list {
  background-color: #fcf7e5;
  height: 86%;
}
#city-hero-list .tr div {
  width: auto;
  margin-left: 7px;
}
#city-hero-list .hero_lvl-box {
  margin: 0px;
}

#city-hero-list .hero-state img {
  margin-top: 3.5px;
}
#city-hero-list .hero-name {
  width: 57% !important;
  text-align: center;
  font-size: 14px;
  /*cursor: pointer;*/
}
#city-hero-list .tr {
  height: 7.66%;
}
#city-hero-list .selected {
  background-image: url(../Res/selelct/select-row.png);
  background-size: 100% 100%;
  color: white;
  background-color: transparent;
}
.hero_lvl-box {
  width: 30px !important;
  border-radius: 3px;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 18px;
  height: 18px !important;
  margin-top: 2px;
  background-image: url("../Res/hero/icon_Lv.png");
  background-size: 30px 18px;
}
.hero_img .hero_lvl-box {
  position: absolute;
  margin-left: 5px;
  margin-top: -45px;
}
.middle-content .hero_img,
.for_trade .right-content .hero_img {
  margin-top: 10px;
  margin-left: 10px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 4px;
  height: 47.5px;
  padding-bottom: 0px;
}
.middle-content .hero_img img,
.for_trade .right-content .hero_img img {
  border-radius: 5px;
}
.hero-data .upper {
  height: 25px;
  width: 150px;
  margin-top: 5px;
}
.hero-data .upper div:nth-child(2) {
  width: 120px;
  text-align: center;
  font-size: 16px;
  line-height: 20px;
  background-image: url("../Res/background/sitenav-bar-bg.jpg");
  background-size: 100% 100%;
  color: white;
  border-radius: 3px;
}
#change-hero-name {
  width: auto;
  margin-left: 5px;
}
/******************************************************************************/
.state-hero img {
  display: block;
}
.bottom .train {
  margin-top: 3px;
}
.bottom .header-2 {
  width: 70px;
  display: block;
  float: right;
  height: 23px;
  line-height: 23px;
  margin: 0px;
}
.part-2 table {
  width: 95%;
  display: block;
  margin: auto;
  background-color: white;
  clear: both;
}
.part-2 table tr {
  width: 100%;
}
.part-2 table tr td:first-child {
  width: 59px;
  font-size: 14px;
  text-align: center;
  color: #81511c;
}
.part-2 table tr td:nth-child(2) {
  width: 167px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  padding: 2px;
}
.part-2 table tr td:nth-child(3) {
  width: 41px;
}
.part-3 {
  margin-top: 3px;
}
.part-3 table td {
  text-align: center;
}
.part-3 table td .pluse {
  width: 100%;
  height: 100%;
  background-image: url(../Res/icons/pluse.png);
  background-position: center;
  background-repeat: no-repeat;
}
.part-3 table td .pluse:hover {
  background-image: url(../Res/icons/pluse-h.png);
}
.part-3 table td .pluse:active {
  background-image: url(../Res/icons/pluse-a.png);
}
td .colored-bar {
  height: 20px;
  margin-top: -18px;
}
.part-4 {
  margin-top: 3px;
}

.part-4 table tr td:nth-child(2) {
  width: 207px !important;
}
.part-4 table tr td:nth-child(2) div {
  line-height: 22px;
}
.part-4 td .point {
  margin-left: 9px;
}
.part-4 .add_point {
  display: block;
  width: 15px;
  height: 15px;
  background-color: red;
  line-height: 16px;
  float: left;
  color: white;
  font-size: 16px;
  border-radius: 3px;
  margin: 0px 3px;
  margin-top: 3px;
  /*cursor: pointer;*/
  border: 1px solid #df0909;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-size: 12px;
  font-family: arial, helvetica, sans-serif;
  text-decoration: none;
  display: inline-block;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  font-weight: bold;
  color: #ffffff;
  background-color: #f62b2b;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#f62b2b),
    to(#d20202)
  );
  background-image: -webkit-linear-gradient(top, #f62b2b, #d20202);
  background-image: -moz-linear-gradient(top, #f62b2b, #d20202);
  background-image: -ms-linear-gradient(top, #f62b2b, #d20202);
  background-image: -o-linear-gradient(top, #f62b2b, #d20202);
  background-image: linear-gradient(to bottom, #f62b2b, #d20202);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f62b2b, endColorstr=#d20202);
}
.part-4 .add_point:hover {
  border: 1px solid #ff3434;
  background-color: #ff6767;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ff6767),
    to(#ff0d0d)
  );
  background-image: -webkit-linear-gradient(top, #ff6767, #ff0d0d);
  background-image: -moz-linear-gradient(top, #ff6767, #ff0d0d);
  background-image: -ms-linear-gradient(top, #ff6767, #ff0d0d);
  background-image: -o-linear-gradient(top, #ff6767, #ff0d0d);
  background-image: linear-gradient(to bottom, #ff6767, #ff0d0d);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff6767, endColorstr=#ff0d0d);
}
.part-4 .add_point[disabled="disabled"],
.part-4 .add_point[disabled="disabled"]:hover {
  color: gray;
  border: 1px solid #b7b7b7;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-size: 12px;
  font-family: arial, helvetica, sans-serif;
  text-decoration: none;
  display: inline-block;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  font-weight: bold;
  color: #ffffff;
  background-color: #d3d3d3;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#d3d3d3),
    to(#707070)
  );
  background-image: -webkit-linear-gradient(top, #d3d3d3, #707070);
  background-image: -moz-linear-gradient(top, #d3d3d3, #707070);
  background-image: -ms-linear-gradient(top, #d3d3d3, #707070);
  background-image: -o-linear-gradient(top, #d3d3d3, #707070);
  background-image: linear-gradient(to bottom, #d3d3d3, #707070);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d3d3d3, endColorstr=#707070);
  cursor: context-menu;
}
.part-5 .pull-L .full-btn {
  padding: 0px 5px;
  margin-left: 9px;
  height: 22px;
  line-height: 22px;
  margin-top: 9px;
}
.part-5 .pull-R .full-btn {
  padding: 0px 5px;
  margin-right: 6px;
  height: 22px;
  line-height: 22px;
  margin-top: 9px;
  margin-bottom: 9px;
  font-size: 13px;
  padding: 0px 8px;
}
.part-6 .full-btn {
  clear: both;
  width: 60%;
  margin: auto;
}
.row-1 {
  height: 136px;
  padding-top: 3px;
  background-image: url(../Res/background/dialog_bg.jpg);
}
.row-2 {
  height: 90px;
  background-image: url(../Res/background/bg_equip.jpg);
}
.row-3 {
  height: 27px;
  background-image: url("../Res/background/sitenav-bar-bg.jpg");

  background-size: 100% 100%;
}
.medal {
  height: 29px;
  margin-bottom: 3px;
  margin-left: 9px;
  margin-right: 25px;
}
.medal img {
  float: left;
  margin-left: 6px;
  margin-top: 3.5px;
}
.medal .header-2 {
  margin: 0px;
  margin-right: 5px;
  line-height: 29px;
}
.box_content .right-content .row-2 ul {
  height: 100%;
  width: 97%;
  margin: auto;
}
.box_content .right-content .row-2 ul li img {
  width: 90%;
  height: 90%;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 3px;
}
.box_content .right-content .row-2 ul li {
  width: 57px;
  height: 29px;
  margin-top: 9px;
}
.row-3 .col-1 {
  width: 72px;
  height: 100%;
  color: white;
  line-height: 27px;
  text-align: right;
  padding-right: 10px;
  font-size: 16px;
}
.row-3 .col-2 {
  width: 240px;
  background-color: white;
  line-height: 27px;
  font-size: 14px;
  text-align: center;
}
/*******************************************************************************/
.row-3 .col-2 .colored-bar {
  height: 24px;
  margin-top: -25px;
  width: 94%;
  margin-bottom: 2px;
  margin-left: 3%;
  background-image: url(../Res/bars/violet.jpg);
  background-size: contain;
  max-width: 94%;
}

.row-3 .col-3 .pluse {
  height: 18px;
  width: 18px;
  margin-left: 5px;
  margin-top: 4.5px;
  background-image: url(../Res/icons/pluse.png);
  background-position: center;
  background-repeat: no-repeat;
}
.row-3 .col-3 .pluse:hover {
  background-image: url(../Res/icons/pluse-h.png);
}
.row-3 .col-3 .pluse:active {
  background-image: url(../Res/icons/pluse-a.png);
}
#city-taxs-in-cp:hover {
  background: linear-gradient(rgb(245, 231, 190), rgb(219, 192, 127));
}
.hero_dial .row-4 {
  height: 143px;
  background-image: url(../Res/background/dialog_bg.jpg);
}

.hero_dial .row-4::after {
  content: "";
  height: 50px;
  position: absolute;
  display: block;
  width: 347px;
  background-image: url(../Res/border/top_panel_helmet_decor.png);
  background-repeat: no-repeat;
  background-position: center;
  margin-top: -14px;
  pointer-events: none;
}

.row-4 .col-1 {
  width: 79%;
  height: 125px;
  float: left;
}
.row-4 .col-1 ol {
  height: 100px;
  width: 100%;
  padding-top: 24px;
}
/********************************************************************************/
.row-4 .col-1 ol li {
  width: 72px;
  margin-left: 12px;
  margin-top: 14px;
  float: left;
  height: 36px;
}
.row-4 .col-1 ol li img {
  width: 100%;
  height: 100%;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 3.5px;
}
.row-4 .col-1 ol li div {
  position: absolute;
  margin: auto;
  margin-top: -18px;
  color: white;
  width: 80px;
  font-weight: bold;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 0px 0px 5px 5px;
}
.row-4 .col-2 {
  width: 21%;
  float: right;
  height: 100%;
}
.row-4 .col-2 button {
  width: 80%;
  margin: auto;
  margin-top: 50px;
  height: 47px;
} /**/ /*****************************/
select[name="target"],
select[name="tasks"] {
  height: 22px;
  font-size: 14px;
  text-align: right;
  width: 110px;
}

.hero-1 ol li .header-2,
.hero-2 ol li .header-2 {
  display: inline-block;
  margin: 2px 4px;
  width: 120px;
  overflow: hidden;
}
.for_trade .middle-content {
  height: 81%;
}
.for_trade .right-content {
  width: 35% !important;
  height: 81% !important;
  background: url(../Res/icons/bg_patern.png);
  border: 4px solid transparent;
  border-image: url(../Res/border/border_red.png);
  border-image-slice: 7;
  border-image-repeat: round;
  box-sizing: border-box;
  border-top: none;
  border-bottom: none;
}
.for_trade .right-content .hero_img {
  margin-top: 10px;
  margin-left: 10px;
}
.mid-of-mid {
  width: 8%;
  height: 391px;
  background-image:
    url(../Res/background/colonna.png), url(../Res/background/blue_rep.jpg);
  background-size:
    65px 318px,
    contain;
  background-repeat: no-repeat, repeat-y;
}

#hero-wrapper {
  height: 392px;
}
.down-trade {
  width: 78%;
  height: 75px;
  background-color: gray;
  clear: both;
  float: right;
  margin-top: -75px;
  background: url(../Res/icons/bg_patern.png);
  border: 4px solid transparent;
  border-image: url(../Res/border/border_red.png);
  border-image-slice: 7;
  border-image-repeat: round;
  box-sizing: border-box;
  border-bottom: none;
  border-top: none;
}
.down-trade::before {
  content: " ";
  display: block;
  height: 40px;
  margin-top: -16px;
  background-image: url(../Res/border/top_panel_helmet_decor.png);
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  width: 12%;
  left: 53%;
  margin-left: 9px;
  background-size: 100% 100%;
}
/**/
.down-trade ul {
  height: 74px;
}
.down-trade ul li {
  float: left;
  width: 14.6666%;
  padding: 1%;
  height: 63px;
  background-image:
    url(../Res/background/colonna.png), url(../Res/background/colonna.png),
    url(../Res/border/roof.png);

  background-size:
    10px 57px,
    10px 57px,
    104px 19px;

  background-repeat: no-repeat;

  background-position:
    left bottom,
    right bottom,
    top;
}
.down-trade ul li img {
  width: 80%;
  margin: auto;
  display: block;
  margin-top: 15px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 4px;
  border-radius: 6px;
}
.down-trade ul li .img {
  width: 80%;
  margin: auto;
  display: block;
  margin-top: 15px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 3px;
  height: 38px;
  background-color: transparent;
}
.down-trade ul li .img .img-bg {
  height: 31px;
  background-size: 100% 100%;
  border-radius: 3px;
}
.down-trade ul li .amount {
  color: white;
  text-align: center;
  font-weight: bold;
}
.down-trade ul li .permit-layer {
  width: 93px;
  height: 57px;
  position: absolute;
  margin-top: 12px;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: no-drop;
  display: none;
}
.mid-of-mid .trade-btns {
  width: 90%;
  margin: auto;
  height: 81px;
  position: relative;
  top: 200px;
}
.trade-btns .trade img {
  display: block;
  margin: auto;
  width: 75%;
}
.trade-btns .down {
  margin: auto;
  width: 45px;
  margin: auto;
}
.trade-btns img {
  width: 45%;
}
.hero-equip .equip {
  width: 100%;
  height: 210px;
  background-image:
    url(../Res/ribbon/cloth_top.png), url(../Res/ribbon/roupe.png),
    url(../Res/ribbon/drapirovka.png), url(../Res/ribbon/cloth_btm_left.png),
    url(../Res/background/bg_h_equip.jpg);
  background-size:
    100% 30px,
    auto 100px,
    auto,
    auto,
    100% 100%;
  background-repeat: no-repeat;
  background-position:
    center top,
    left 5px,
    top right,
    bottom left,
    center;
  overflow: auto;
}

.blue-ribbon {
  background-image: url(../Res/skins/SolidBg.png);
  background-size: 100% 100%;
  padding-top: 1px;
  padding-bottom: 1px;
}

.hero-equip .equip table {
  border-spacing: 7px;
  border-collapse: separate;
  margin-top: 28px;
}
.equip table td {
  width: 63px;
  height: 33px;
}
.eq-select-bar {
  width: 95%;
  margin: auto;
  height: 32px;
  margin-top: 20px;
  background-image: url(../Res/icons/bg_patern.png);
}
#eq-part-select ul {
  overflow: auto;
  height: 100%;
}
#eq-part-select ul .selected {
  background-color: transparent;
  background-image: url(../Res/icons/hero/eq-part-selected-a.png);
}
#eq-part-select ul li {
  width: 9%;
  float: left;
  height: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
}
#eq-part-select ul li:hover {
  background-image: url(../Res/icons/hero/eq-part-selected-h.png);
}
#eq-part-select ul li:hover {
  background-image: url(../Res/icons/hero/eq-part-selected-a.png);
}
#eq-part-select ul li button {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
}

#equip-list-heroDia {
  width: 95%;
  margin: auto;
  height: 288px;
}
#navigate-btn .wrapper {
  width: 120px;
  margin: auto;
  overflow: auto;
}
#navigate-btn .wrapper div {
  width: 33.3%;
  float: left;
  height: 25px;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
  margin-top: 10px;
}
#navigate-btn .wrapper button {
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.unite-eq {
  width: 70px;
  height: 32px;

  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 3px;
}
.unite-eq .avail_equip {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background-color: transparent;
}
.all-eq-table .unite-eq {
  float: left;
  margin: 5px 3.1px;
}
.equip table td img {
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 3px;
  border-radius: 5px;
}

/*_______________________________Alert box___________________________________*/

#over_lay,
#over_lay_alert {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  z-index: 2001;
  top: 0px;
}
#alert_container {
  width: 360px;
  margin: auto;
  position: relative;
  top: 30%;
  background-image: url(../Res/background/alert_box.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 242px;
}
#alert_head {
  width: 100%;
  height: 31px;
  direction: rtl;
}
#alert_head div {
  position: relative;
  top: -18px;
}
#alert_head div img {
  height: 66px;
  width: 174px;
  display: block;
  margin: auto;
}
#alert-title {
  width: 100%;
  height: 27px;
  color: white;
  font-weight: bold;
  text-align: center;
  margin-top: -36px;
}
#alert_head .img-sml {
  display: block;
  margin-right: 20px;
  position: absolute;
  margin-top: -37px;
}
#alert_box .row-1 {
  height: 32px;
}
#alert_box .row-1 label {
  display: inline-block;
  line-height: 29px;
  vertical-align: top;
  font-size: 14px;
  margin: 0px 15px;
  width: 50px;
}
#alert_box .row-2 {
  font-size: 15px;
  height: 120px;
  width: 85%;
  margin: auto;
  margin-top: 19px;
  background: none;
}
#alert_box .row-2 input {
  width: 86px;
  margin: 4px 9px;
}
#alert_box .row-2 .chat-forbid-duration {
  width: 60%;
}
#alert_box .row-1 input[type="range"] {
  display: inline-block;
  height: 29px;
}
#alert_box .row-3 {
  padding-bottom: 13px;
  width: 84%;
  margin: auto;
}
.matrial-alert .row-3 {
  width: 84%;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  margin-top: 0 !important;
  overflow: auto;
}
.confim-btn {
  width: 81px;
}
#alert_box .row-3 .confim-btn {
  margin: auto;
  overflow: auto;
}
.confim-btn .full-btn {
  width: 100%;
  margin-top: 6px;
}
.row-4 .col-1 ol li .permit-layer {
  width: 78px;
  height: 41px;
  position: absolute;
  margin-top: 6px;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: no-drop;
  display: none;
  border-radius: 6px;
}
#alert_container .for_battel .row-2 {
  height: 119px;
  text-align: center;
  direction: rtl;
}
#alert_container .for_battel .confim-btn {
  width: 240px;
  height: 40px;
}
#alert_container .for_battel .confim-btn .full-btn {
  width: 40%;
}
.matrial-show .row-2 {
  height: 100px !important;
  overflow: auto;
  width: 85%;
  margin: auto;
  border-radius: 7px 7px 0px 0px;
}
.matrial-show .full-btn {
  width: 25%;
  height: 25px;
}
.matrial-show .confim-btn {
  width: 80%;
  height: 40px;
  margin-top: 5px !important;
}
.matrial-show .left img {
  display: block;
  margin-top: 16px;
  border-radius: 10px;
  width: 85%;
  margin: auto;
  padding: 5px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
}
.matrial-show .right {
  width: 47%;
  margin-top: 15px;
}
.matrial-show .left {
  width: 53%;
}
.matrial-show .left ul {
  overflow: auto;
  height: 28px;
  background-color: rgba(0, 0, 0, 0.6);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 85%;
  margin: auto;
  margin-top: -33px;
  position: relative;
}
.matrial-show .left .pic {
  display: inline-block;
}
.matrial-show .left .pic img {
  background: none;
  width: auto;
}
.matrial-trade-show .row-2 {
  height: 62% !important;
}
.matrial-trade-show {
  height: 92%;
}

.matrial-trade-show .left .pic img {
  width: 20px;
  max-height: 25px;
  min-height: 20px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 2px 1px;
  border-radius: 1px;
  object-fit: cover;
  object-position: center;
}
.matrial-show .left .num {
  display: inline-block;
  vertical-align: top;
  line-height: 28px;
}
.matrial-show .right .name {
  text-align: center;
  background-image: url(../Res/tools/title-red.png);
  line-height: 25px;
  background-size: 100% 100%;
  color: white;
  height: 30px;
}
.matrial-show .right .amount {
  margin-top: 8px;
  text-align: center;
}
.matrial-show .mat_desc {
  background-image: url(../Res/skins/desc-rect.png);
  background-size: 100% 100%;
  min-height: 50px;
  text-align: right;
  width: 81.5%;
  margin: auto;
  padding: 7px;
  color: #722;
}

.matrial-trade-show .mat_desc {
  height: 40%;
  margin-top: 10px;
  font-size: 13px;
  overflow: hidden;
}
.matrial-show .confim-btn input {
  display: block;
  width: 50px;
  height: 22px;
  margin-top: 10px;
  margin-left: 5px;
  padding-right: 15px;
}
.matrial-show .confim-btn .number-arrow-wrapper {
  margin-left: -20px;
  margin-top: 9px;
}
.matrial-show .left {
  height: 100%;
}

.matrial-trade-show .right {
  margin-top: 0px;
}
.matrial-trade-show .right .amount {
  margin-top: 0px;
}

.matrial-trade-show .right .req ul {
  height: 75px;
}
.matrial-trade-show .right .req ul li {
  height: 23px;
  margin-bottom: 2px;
}
.matrial-trade-show .right .req ul li .amount {
  height: 23px;
  line-height: 23px;
  margin-left: 15px;
}
.matrial-trade-show .right .item-left,
.matrial-trade-show .right .prom,
.matrial-trade-show .right .max-limit {
  margin-right: 10px;
  text-align: right;
  font-size: 13px;
}
.matrial-trade-show .right .req ul li img {
  height: 21px;
  width: 21px;
  padding: 2px;
  background-image: url(../Res/background/icon-bg.png);
  background-size: 100% 100%;
  overflow: auto;
  object-fit: cover;
  object-position: center;
}
.matrial-trade-show .right .req ul li .image {
  height: 23px;
}
.matrial-trade-show .row-2 {
  margin-top: 10px;
}
.matrial-trade-show .left ul li {
  width: 33.3%;
}
.matrial-trade-show .left ul li .pic {
  width: 40%;
}
.matrial-trade-show .left ul li .num {
  width: 60%;
}
/*___________________________________ الحته بتاعتة جدول المواعيد_________________*/
#current-tasks {
  width: 198px;

  height: auto;
  position: fixed;
  left: 5px;
  top: 108px;
  z-index: 10;
}

.task-unite {
  width: 100%;
  height: 45px;
  background-color: gray;
  margin: 5px 0px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 23px;
}
.task-unite .wrapper {
  position: relative;
  border-radius: 22.5px;
  width: 100%;
  height: 100%;
}
.task-unite .prog-bar {
  width: 0%;
  height: 100%;
  display: block;
  position: absolute;
  background-image: url(../Res/bars/grid-green-rc.png);
  background-size: 198px 100%;
}

.task-unite .over-prog-bar {
  position: absolute;
  width: 100%;
  height: 100%;
}

.icon {
  height: 100%;
  width: 36px;
}
.icon img {
  width: 36px;
  height: 32px;
  margin-top: 7px;
}
.task-time {
  width: 126px;
  height: 100%;
}
.task-time h1:first-child {
  font-weight: bold;
}
.task-time h1 {
  text-align: center;
  font-size: 12px;
  margin-top: 5px;
}
.downgrade-task .title {
  color: #db0000 !important;
}
.upgrade-task .title {
  color: #ffeba3 !important;
}
.reduce-time {
  width: 36px;
  height: 100%;
}
.reduce-time .img-sml {
  width: 27px;
  height: 27px;
  margin: auto;
  display: block;
  margin-top: 9px;
  margin-bottom: 9px;
}
#matral-box-use {
  position: fixed;
  z-index: 1020;
  left: 50%;
  margin-left: -200px;
  top: 50%;
  width: 400px;
  padding-bottom: 30px;
  margin-top: -220px;
}
/*__________________________________________upgrade building _____________________________*/

.upgrade_req_tooltip {
  width: 360px;
  height: auto;
  background-image:
    url(../Res/icons/left-content.png), url(../Res/icons/left-content.png),
    url(../Res/icons/left-content.png), url(../Res/icons/left-content.png);
  background-size: 100% 100%;
  position: absolute;
  display: none;
  right: 20px;
  padding-bottom: 15px;
  margin-top: -10px;
  z-index: 2;
}
.upgrade_req_tooltip .req_table_container {
  background: url(../Res/skins/palace.png);
  background-size: 100% 100%;
  width: 90%;
  margin: auto;
  padding: 24px 0px 8px 0px;
}
.study_req_tooltip {
  width: 340px;
  height: auto;
  background-image:
    url(../Res/icons/left-content.png), url(../Res/icons/left-content.png),
    url(../Res/icons/left-content.png);
  background-size: 100% 100%;
  position: absolute;
  padding-bottom: 15px;
  z-index: 2;
}
.study_req_tooltip .upgrade-info {
  text-align: right;
}
.study_req_tooltip .req_table,
.upgrade_req_tooltip .req_table {
  width: 90%;
  height: auto;
}
.study_req_tooltip .header-1,
.upgrade_req_tooltip .header-1 {
  direction: rtl;
  font-size: 16px;
  margin: 14px 21px 0px 0px;
  color: #372b00;
}
.study_req_tooltip .header-1 h1 {
  margin-right: 8px;
}
.study_req_tooltip .req_table ol li {
}
.study_req_tooltip .header-2,
.upgrade_req_tooltip .header-2 {
  font-size: 14px;
  color: #5f8c00;
  width: 87%;
  margin: auto;
}
.study_req_tooltip .req_table {
  border: 5px solid transparent;
  border-top: 22px solid transparent;
  background-image: url(../Res/skins/desc-rect.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.soldier {
  cursor: pointer;
}

.OVER_ZERO {
  color: #a7e328;
}
.BELOW_ZERO {
  color: #d60000 !important;
}

.pull-L {
  float: left;
}
.pull-R {
  float: right;
}
.img-sml {
  width: 18px;
  height: 18px;
}
.img-mid {
  width: 95px;
}
.btn-sml {
  width: 40px;
  height: 22px;
  line-height: 22px !important;
}
.btn-sml .full-btn {
  height: 22px;
  font-size: 14px;
  line-height: 22px;
  padding: 0px 5px;
}
button {
  border: none;
}
button:disabled {
  color: gray !important;
  cursor: auto;
}
.exp {
  background-color: #8efd22;
}
.loy {
  background-color: #ffb621;
}
.power {
  background-color: #20d5ff;
}
.domain-point {
  color: #008c10;
  font-weight: bold;
}
.attack-point {
  color: #b43d02;
  font-weight: bold;
}
.def-point {
  color: #0065ac;
  font-weight: bold;
}
.rtl {
  direction: rtl;
}
.ltr {
  direction: ltr !important;
}
.full-img {
  width: 92%;
  height: 81%;
}
.disabled {
  color: rgb(225, 199, 130) !important ;
  cursor: not-allowed !important;
}
#confirm_battel {
  display: none;
}
.left-btn {
  width: 30px;
  height: 30px;
  background-image: url(../Res/arrow/go-left-n.png);
  background-size: auto 66%;
  background-position: center;
  background-repeat: no-repeat;
}
.left-btn:hover {
  background-image: url(../Res/arrow/go-left-h.png);
}
.left-btn:active {
  background-image: url(../Res/arrow/go-left-a.png);
}
.right-btn {
  width: 30px;
  height: 30px;
  background-image: url(../Res/arrow/go-right-n.png);
  background-size: auto 66%;
  background-position: center;
  background-repeat: no-repeat;
}
.right-btn:hover {
  background-image: url(../Res/arrow/go-right-h.png);
}
.right-btn:active {
  background-image: url(../Res/arrow/go-right-a.png);
}
.most-left-btn {
  width: 30px;
  height: 30px;
  background-image: url(../Res/arrow/m_l_n.png);
  background-size: auto 66%;
  background-position: center;
  background-repeat: no-repeat;
}
.most-left-btn:hover {
  background-image: url(../Res/arrow/m_l_h.png);
}
.most-left-btn:active {
  background-image: url(../Res/arrow/m_l_a.png);
}
.most-right-btn {
  width: 30px;
  height: 30px;
  background-image: url(../Res/arrow/m_r_n.png);
  background-size: auto 66%;
  background-position: center;
  background-repeat: no-repeat;
}
.most-right-btn:hover {
  background-image: url(../Res/arrow/m_r_h.png);
}
.most-right-btn:active {
  background-image: url(../Res/arrow/m_r_a.png);
}

.for_trade .army_container::after {
  width: 276px;
}
.hero-equip .row-4::after {
  width: 275px;
}
#cr-stage {
  z-index: 1;
}
#cr-stage canvas {
  /*background-image: url(../Res/background/world_bg.png)*/
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.txt-shadow {
  text-shadow: 1px 1px 1px #222;
  color: white;
}

.army-over-1k {
  color: #a7e328 !important;
}
.army-over-10k {
  color: #00ffff !important;
}
.army-over-100k {
  color: #aa00aa !important;
}

.full-btn {
  background-image: linear-gradient(rgb(245, 231, 190), rgb(219, 192, 127));
  display: block;
  line-height: 28px;
  text-align: center;
  color: rgb(54, 13, 0);
  font-size: 16px;
  text-shadow: 0 0 1px #000;
  text-shadow: 0px 1px 1px rgb(245, 231, 190);
  background-color: transparent;

  /*cursor: pointer;*/
}

.full-btn-3x {
  background-image: url(../Res/btns/building/upgrade.png);
  background-size: 100% 100%;
}
.full-btn-3x:hover {
  background-image: url(../Res/btns/building/upgrade-h.png);
}
.full-btn-3x:active {
  background-image: url(../Res/btns/building/upgrade-a.png);
}
.full-btn-3x:disabled {
  background-image: url(../Res/btns/building/upgrade-h.png);
  opacity: 0.8;
}

.full-btn-2x {
  background-image: url(../Res/btns/global/full-btn-2x.png);
  background-size: 100% 100%;
}
.full-btn-2x:hover {
  background-image: url(../Res/btns/global/full-btn-h-2x.png);
}
.full-btn-2x:active {
  background-image: url(../Res/btns/global/full-btn-a-2x.png);
}
.full-btn-2x:disabled {
  background-image: url(../Res/btns/global/full-btn-h-2x.png);
  opacity: 0.6;
}

.full-btn-1x {
  background-image: url(../Res/btns/global/full-btn-1x.png);
  background-size: 100% 100%;
}
.full-btn-1x:hover {
  background-image: url(../Res/btns/global/full-btn-1x-h.png);
}
.full-btn-1x:active {
  background-image: url(../Res/btns/global/full-btn-1x-a.png);
}
.full-btn-1x:disabled {
  background-image: url(../Res/btns/global/full-btn-1x-h.png);
}

.speed-up-btn {
  background-image: url(../Res/btn-small/speed-up.png);
  background-size: 100% 100%;
  color: white;
  background-color: transparent;
}
.GO_L_1 {
  background-image: url(../Res/arrow/go-left-n.png);
  background-position: center;
  background-repeat: no-repeat;
}
.GO_L_1:hover {
  background-image: url(../Res/arrow/go-left-h.png);
  background-position: center;
  background-repeat: no-repeat;
}
.GO_L_1:active {
  background-image: url(../Res/arrow/go-left-a.png);
  background-position: center;
  background-repeat: no-repeat;
}
.GO_R_1 {
  background-image: url(../Res/arrow/go-right-n.png);
  background-position: center;
  background-repeat: no-repeat;
}
.GO_R_1:hover {
  background-image: url(../Res/arrow/go-right-h.png);
  background-position: center;
  background-repeat: no-repeat;
}
.GO_R_1:active {
  background-image: url(../Res/arrow/go-right-a.png);
  background-position: center;
  background-repeat: no-repeat;
}

.speed-up-btn:hover {
  background-image: url(../Res/btn-small/speed-up-hover.png);
}
.speed-up-btn:active {
  background-image: url(../Res/btn-small/speed-up-active.png);
}
.speed-up-btn:disabled {
  background-image: url(../Res/btn-small/speed-up-hover.png);
}

.cancel-btn {
  background-image: url(../Res/btns/building/cancel_up.png);
  background-size: 100% 100%;
  color: white;
  background-color: transparent;
}
.cancel-btn:hover {
  background-image: url(../Res/btns/building/cancel_up-h.png);
}
.cancel-btn:active {
  background-image: url(../Res/btns/building/cancel_up-a.png);
}
.cancel-btn:disabled {
  background-image: url(../Res/btns/building/cancel_up-d.png);
}

#chat-box .user-group-0 {
  color: black;
}
#chat-box .user-group-1 {
  color: #8b4513;
}
#chat-box .user-group-2 {
  color: #8b4513;
}
#chat-box .user-group-3 {
  color: #8b4513;
}
#chat-box .user-group-4 {
  color: #000080;
}
#chat-box .user-group-5 {
  color: #800080;
}
#chat-box .user-group-6 {
  color: #880000;
}

#chat-box .server-announce-0 {
  font-size: 14px;
  font-weight: bold;
  color: #e30c0c;
}
#chat-box .server-announce-1 {
  font-size: 14px;
  font-weight: bold;
  color: #8b4513;
}
#chat-box .server-announce-2 {
  font-size: 14px;
  font-weight: bold;
  color: #8b4513;
}
#chat-box .server-announce-3 {
  font-size: 14px;
  font-weight: bold;
  color: #8b4513;
}
#chat-box .server-announce-4 {
  font-size: 14px;
  font-weight: bold;
  color: #000080;
}
#chat-box .server-announce-5 {
  font-size: 14px;
  font-weight: bold;
  color: #800080;
}
#chat-box .server-announce-6 {
  font-size: 14px;
  font-weight: bold;
  color: #880000;
}

#chat-box .d-msg-replacement {
  color: #ec2727;
}
#chat-box .panne-msg {
  color: #e30c0c;
}
#chat-box .announce {
  font-size: 14px;
  font-weight: bold;
}

#chat-box .ann-red {
  color: #e30c0c;
}
#chat-box .battel-f-ann {
  color: #994b2c;
  font-size: 14px;
}

.iso_right {
  -webkit-transform: skewY(28deg);
  -moz-transform: skewY(28deg);
  -o-transform: skewY(28deg);
  -ms-transform: skewY(28deg);
  transform: skewY(28deg);
}
#army-condtions .not-enough {
  font-weight: bold;
  color: red;
  line-height: 25px;
}
#army-condtions .enough {
  font-weight: bold;
  color: #5f8c00;
  line-height: 25px;
}
.not-enough {
  font-weight: bold;
  color: red;
  line-height: 25px;
}
.enough {
  font-weight: bold;
  color: #5f8c00;
  line-height: 25px;
}
.build_army {
  width: 90px;
  margin: auto;
}
.sysetm-chat-notif {
  color: red;
}
/*#cr-stage{
    background-image: url(../Res/world/bacground.png) ,  url(../Res/world/bacground.png) ,  url(../Res/world/bacground.png);
    background-repeat: repeat-y , repeat-y;
    background-position-x: 0px ,  640px  , 1280px ;
    background-position-y: 0px , 320px , 0px;
}*/

.POT-HERO {
  color: #0082cd !important ;
  font-weight: bold;
}

#swap_army {
  background-image: url(../Res/btns/hero/armyTrade_n.png);
  background-color: transparent;
  width: 40px;
  height: 40px;
  background-size: 100% 100%;
  display: block;
  margin: auto;
}
#swap_army:hover {
  background-image: url(../Res/btns/hero/armyTrade_h.png);
}
#swap_army:active {
  background-image: url(../Res/btns/hero/armyTrade_a.png);
}
#swap_army:disabled {
  background-image: url(../Res/btns/hero/armyTrade_d.png);
}

#left-down,
#right-down {
  background-image: url(../Res/btns/army_down.png);
  height: 25px;
  width: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
}
#left-down:disabled,
#right-down:disabled {
  opacity: 0.5;
}
#order-hero {
  height: 53px;
  background: url(../Res/skins/desc-rect.png);
  background-size: 100% 105%;
  background-position: center -3px;
  overflow: auto;
}
#order-hero button {
  display: inline-block;
  width: 40px;
  height: 30px;
  background-color: transparent;
}
#order-hero button[data-order="up"] {
  float: right;
  background-repeat: no-repeat;
}

#order-hero button[data-order="down"] {
  display: inline-block;
  float: left;

  background-repeat: no-repeat;
}
.order-up {
  background-image: url(../Res/btns/hero/hero-up-n.png);
}
.order-up:hover {
  background-image: url(../Res/btns/hero/hero-up-h.png);
}
.order-up:active {
  background-image: url(../Res/btns/hero/hero-up-a.png);
}
.order-up:disabled {
  background-image: url(../Res/btns/hero/hero-up-d.png);
}

.order-down {
  background-image: url(../Res/btns/hero/hero-down-n.png);
}
.order-down:hover {
  background-image: url(../Res/btns/hero/hero-down-h.png);
}
.order-down:active {
  background-image: url(../Res/btns/hero/hero-down-a.png);
}
.order-down:disabled {
  background-image: url(../Res/btns/hero/hero-down-d.png);
}

#order-hero .wrapper {
  width: 80px;
  height: 30px;
  margin: auto;
  margin-top: 12px;
}

.close {
  background-image: url(../Res/btns/global/close-n.png);
  background-position: 100% 100%;
  background-position: center;
  background-color: transparent;
}
.close:hover {
  background-image: url(../Res/btns/global/close-h.png);
}
.close:active {
  background-image: url(../Res/btns/global/close-a.png);
}
.close:disabled {
  background-image: url(../Res/btns/global/close-d.png);
}

#quest_pack {
  height: 240px;
}
#quest-page {
  height: 349px;
}

#JOIN_ATTACK_SIDE,
#JOIN_DEFENCE_SIDE {
  height: 53px;
}

.btn-red-2x {
  background-image: url(../Res/btns/btn-red-2x.png);
  background-size: 100% auto;
  background-position: 0px 0px;
}
.btn-red-2x:hover {
  background-image: url(../Res/btns/btn-red-2x.png);
  background-size: 100% auto;
  background-position-y: 33.3%;
}
.btn-red-2x:active {
  background-image: url(../Res/btns/btn-red-2x.png);
  background-size: 100% auto;
  background-position-y: 66.6%;
}
.btn-red-2x:disabled {
  background-image: url(../Res/btns/btn-red-2x.png);
  background-size: 100% auto;
  background-position-y: 100%;
}
.btn-green-2x {
  background-image: url(../Res/btns/btn-green-2x.png);
  background-size: 100% auto;
  background-position: 0px 0px;
}

.btn-green-2x:hover {
  background-image: url(../Res/btns/btn-green-2x.png);
  background-size: 100% auto;
  background-position-y: 33.3%;
}
.btn-green-2x:active {
  background-image: url(../Res/btns/btn-green-2x.png);
  background-size: 100% auto;
  background-position-y: 66.6%;
}
.btn-green-2x:disabled {
  background-image: url(../Res/btns/btn-green-2x.png);
  background-size: 100% auto;
  background-position-y: 100%;
}

.btn-yellow-2x {
  background-image: url(../Res/btns/btn-yellow-2x.png);
  background-size: 100% auto;
  background-position: 0px 0px;
}

.btn-yellow-2x:hover {
  background-image: url(../Res/btns/btn-yellow-2x.png);
  background-size: 100% auto;
  background-position-y: 33.3%;
}
.btn-yellow-2x:active {
  background-image: url(../Res/btns/btn-yellow-2x.png);
  background-size: 100% auto;
  background-position-y: 66.6%;
}
.btn-yellow-2x:disabled {
  background-image: url(../Res/btns/btn-yellow-2x.png);
  background-size: 100% auto;
  background-position-y: 100%;
}

.golden-border {
  background-image: url(../Res/back-shape/rect.png);
  background-size: 90% 90%;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

.golden-border .unit-image {
  width: 100%;
  height: 100%;
  background-size: 83% auto;
  background-position: center;
  background-repeat: no-repeat;
}

.golden-border .unit-image .amount {
  color: #08ff07;
  font-size: 12px;
  text-align: center;
}

#msg-area .round-announce {
  color: rgb(133, 68, 7);
}

#msg-area .red {
  color: red;
}

#msg-area .msg-from .rank-title {
  float: right;
  width: 10px;
  transition: all 0.8s ease-in-out;
  margin-right: -4px;
  overflow: hidden;
}

#msg-area .msg-from .name {
  margin-left: 8px;
  display: flex;
}
#msg-area .msg-from .reply {
  color: #0065ac;
  cursor: pointer;
  padding: 0px 3px;
  transition: all 0.2s linear;
}
#msg-area .msg-from .reply:hover {
  text-decoration: underline;
}
#msg-area .msg-from .rank-title:before {
  content: "";
  display: inline-block;
}
#msg-area .msg-from .rank-title .inner-txt {
  display: inline-block;
  white-space: nowrap;
}
.rank-title {
  background-image: url(../Res/bars/title-bg.png);
  width: 60px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: white;
  font-size: 11px;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  background-size: 100% 140px;
}
#msg-area .msg-from .rank-title:hover {
  width: 60px !important;
  margin-left: 5px !important;
}
.rank-title_1 {
  background-position-y: 0;
}
.rank-title_2 {
  background-position-y: -20px;
}
.rank-title_3 {
  background-position-y: -40px;
}
.rank-title_4 {
  background-position-y: -60px;
}
.rank-title_5 {
  background-position-y: -80px;
}
.rank-title_6 {
  background-position-y: -100px;
}
.rank-title_7 {
  background-position-y: -120px;
}

#global-announce {
  height: 50px;
  width: 640px;
  position: fixed;
  pointer-events: none;
  top: 150px;
  margin-left: -320px;
  left: 50%;
  background-image: url(../Res/bars/globalAnnounce.png);
  z-index: 5;
  transition: all 0.75s linear;
  transform: rotateX(90deg);
}
#global-announce .wrapper {
  position: relative;
  height: 50px;
  width: 80%;
  margin: auto;
  overflow: hidden;
}
#global-announce .text {
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  color: #c59844;
  position: absolute;
  width: 100%;
}
#global-announce .warning {
  color: yellow;
}

.flex {
  display: flex;
  align-items: center;
}

.close-wide {
  background-image: url(../Res/btns/global/closeWide.png);
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
}
.close-wide:hover {
  background-image: url(../Res/btns/global/closeWide.png);
  background-repeat: no-repeat;
  background-position-y: -20px;
}
.close-wide:active {
  background-image: url(../Res/btns/global/closeWide.png);
  background-repeat: no-repeat;
  background-position-y: -40px;
}
.close-wide:disabled {
  background-image: url(../Res/btns/global/closeWide.png);
  background-repeat: no-repeat;
  background-position-y: -60px;
}

.l-number {
  font-family: cursive;
  font-weight: bold;
}

@media only screen and (max-width: 1200px) {
  #server-name {
    display: none;
  }
}