/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.1.0
build: 2026
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.1.0
build: 2026
*/
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;  }select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:"Courier New", Courier, monospace;*font-size:108%;line-height:100%;}
#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%;
}
* {
  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___________________________________*/


.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;
}
.attack-point {
  color: #b43d02;
}
.def-point {
  color: #0065ac;
}
.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 !important;
  line-height: 25px;
}
.enough {
  font-weight: bold;
  color: #5f8c00 !important;
  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;
  }
}

* {
  padding: 0px;
  margin: 0px;
}
#menu-bar {
  width: 100%;
  height: 45px;
  position: fixed;
  top: 0px;
  background-image: url(../Res/border/menu_bar.jpg);
  background-size: contain;
  z-index: 100;
}

#menu-bar .content-wrapper {
  justify-content: space-between;
  align-items: flex-start;
}

#menu-bar .left {
  width: 200px;
  justify-content: space-between;
  align-items: center;
  height: 45px;
}

#menu-bar .left .left-half,
#menu-bar .left .right-half {
  height: 100%;
  width: 50%;
  justify-content: space-between;
}

#menu-bar .right-content {
  height: 85px;
}
#server-bing {
  width: 100px;
  font-size: 16px;
  color: white;
  text-align: center;
  line-height: 45px;
}
#menu-bar .right-content ul li {
  display: block;
  transition: all linear 0.1s;
  position: relative;
}
#menu-bar .right-content ul li:hover {
  transform: scale(1.09);
}
#menu-bar .right-content ul li .image {
  margin-top: 15px;
  width: 56px;
  height: 76px;
}
#menu-bar .right-content ul li:nth-child(1):hover .image {
  background-image: url(../Res/icon-menu/1_h.png) !important;
}
#menu-bar .right-content ul li:nth-child(1):active .image {
  background-image: url(../Res/icon-menu/1_n.png) !important;
}
#menu-bar .right-content ul li:nth-child(2):hover .image {
  background-image: url(../Res/icon-menu/2_h.png) !important;
}
#menu-bar .right-content ul li:nth-child(2):active .image {
  background-image: url(../Res/icon-menu/2_n.png) !important;
}
#menu-bar .right-content ul li:nth-child(3):hover .image {
  background-image: url(../Res/icon-menu/3_h.png) !important;
}
#menu-bar .right-content ul li:nth-child(3):active .image {
  background-image: url(../Res/icon-menu/3_n.png) !important;
}
#menu-bar .right-content ul li:nth-child(4):hover .image {
  background-image: url(../Res/icon-menu/4_h.png) !important;
}
#menu-bar .right-content ul li:nth-child(4):active .image {
  background-image: url(../Res/icon-menu/4_n.png) !important;
}
#menu-bar .right-content ul li:nth-child(5):hover .image {
  background-image: url(../Res/icon-menu/5_h.png) !important;
}
#menu-bar .right-content ul li:nth-child(5):active .image {
  background-image: url(../Res/icon-menu/5_n.png) !important;
}
#menu-bar .right-content ul li:nth-child(6):hover .image {
  background-image: url(../Res/icon-menu/6_h.png) !important;
}
#menu-bar .right-content ul li:nth-child(6):active .image {
  background-image: url(../Res/icon-menu/6_n.png) !important;
}
#menu-bar .right-content ul li:nth-child(7):hover .image {
  background-image: url(../Res/icon-menu/7_h.png) !important;
}
#menu-bar .right-content ul li:nth-child(7):active .image {
  background-image: url(../Res/icon-menu/7_n.png) !important;
}
#menu-bar .right-content ul li:nth-child(8):hover .image {
  background-image: url(../Res/icon-menu/9_h.png) !important;
}
#menu-bar .right-content ul li:nth-child(8):active .image {
  background-image: url(../Res/icon-menu/9_a.png) !important;
}
#menu-bar .right-content ul li .text {
  margin-top: -23px;
  color: white;
}

#server-name {
  background-image: url(../Res/icon-menu/server-name-bg.png);
  width: 300px;
  height: 60px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#server-name .name {
  color: white;
  font-size: 22px;
  line-height: 24px;
  text-align: center;
  font-weight: bold;
}
#server-name .time {
  text-align: center;
  color: #d0b617;
  font-size: 14px;
}

.right-content ul li .image img {
  display: block;
  margin: auto;
  width: 100%;
}
.union-img img {
  width: 72px !important;
  margin-top: 34px !important;
}
.union-img {
  margin-left: -14px;
  margin-top: 20px !important;
}
#menu-bar .right-content ul {
  margin-top: -5px;
  flex-flow: row-reverse;
}
.right-content ul li h1 {
  font-size: 12px;
  text-align: center;
}
#dialg_box,
#dialg_box_two {
  width: 894px;
  height: 503px;
  background-image:
    url("../Res/background/U.png"), url("../Res/background/B.png"),
    url("../Res/background/L.png"), url("../Res/background/R.png"),
    url(../Res/background/paperCenter.jpg);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y, repeat;
  background-position: top, bottom, left, right, center;
  position: fixed;
  left: 50%;
  margin-left: -447px;
  top: 125px;
  z-index: 11;
}
#dialg_box::before,
#dialg_box_two::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image:
    url("../Res/background/UL.png"), url("../Res/background/UR2.png"),
    url("../Res/background/BL.png"), url("../Res/background/BR.png");
  background-repeat: no-repeat;
  background-position:
    top left,
    top right,
    bottom left,
    bottom right;
  position: absolute;
  z-index: -10;
}
#select_from {
  width: 57%;
  height: 477px;
  background-image:
    url("../Res/background/U.png"), url("../Res/background/B.png"),
    url("../Res/background/L.png"), url("../Res/background/R.png");
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: top, bottom, left, right;
  position: fixed;
  left: 22.5%;
  top: 135px;
  z-index: 11;
}
#select_from::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image:
    url("../Res/background/UL.png"), url("../Res/background/UR2.png"),
    url("../Res/background/BL.png"), url("../Res/background/BR.png");
  background-repeat: no-repeat;
  background-position:
    top left,
    top right,
    bottom left,
    bottom right;
  position: absolute;
  z-index: -10;
}
#dialg_box .head_bar,
#dialg_box_two .head_bar {
  pointer-events: none;
}
#dialg_box .head_bar,
#dialg_box_two .head_bar,
#select_from .head_bar {
  width: 100%;
  height: 63px;
  margin-top: -63px;
  direction: rtl;
}
#dialg_box .head_bar .title,
#dialg_box_two .head_bar .title,
#select_from .head_bar .title {
  text-align: center;
  margin-top: -27px;
  font-size: 16px;
  color: white;
}
#dialg_box .head_bar img,
#dialg_box_two .head_bar img,
#select_from .head_bar .banner {
  height: 90px;
  display: block;
  margin: auto;
}

#dialg_box .nav_bar,
#dialg_box_two .nav_bar {
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: space-between;
}
#dialg_box.world .nav_bar {
  flex-flow: row-reverse;
}
.for_building .nav_bar {
  width: 100%;
  height: 45px !important;
}
.nav_bar .nav_icon {
  height: 100%;
  float: right;
  margin-top: 5px;
  display: flex;
  align-items: center;
  direction: rtl;
}
.nav_bar .nav_icon img {
  height: 22px;
  margin-top: 8px;
  margin-left: 13px;
  float: left;
  /*cursor: pointer;*/
}
.nav_bar .nav_icon h1 {
  display: inline-table;
  font-size: 16px;
  margin-left: 15px;
  margin-top: 10px;
  float: left;
}
.nav_bar .left-nav {
  /*min-width: 80%;*/
}
.nav_bar .right-nav {
  display: flex;
}
.nav_bar .left-nav ul {
  margin-left: 30px;
  margin-top: 25px;
  float: left;
}
.for_building .nav_bar .left-nav ul {
  margin-left: 30px;
  margin-top: 10px;
  float: left;
}
.selected {
  background: red;
}
.nav_bar .left-nav li {
  float: left;
  font-size: 13px;
  /*cursor: pointer;*/
  color: rgb(54, 13, 0);
  height: 30px;
  padding: 5px 7px 0px 7px;
  border-radius: 7px 7px 0 0;
  text-align: center;
  min-width: 47px;
  /*background: linear-gradient( rgb(245,231,190) ,rgb(240 , 226,171) , rgb(219 ,192 ,127));*/
  background-image:
    url(../Res/btns/big_button_corner.png), url(../Res/btns/barCorner.png),
    url(../Res/btns/disabledTile.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: contain;
  background-position: left, right, center;
  line-height: 24px;
  margin-left: 2px;
  color: white;
  position: relative;
}
.nav_bar .left-nav .selected {
  background-image:
    url(../Res/btns/big_button_corner.png), url(../Res/btns/barCorner.png),
    url(../Res/btns/selectedTile.jpg) !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-size: contain !important;
  background-position: left, right, center !important;
}
.button-link:active {
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
  border: solid 1px #203e5f;
}
.box_content {
  height: 416px;
  width: 833px;
  margin: auto;
  border: 12.5px solid transparent;
  border-image: url(../Res/background/border_a.png);
  border-image-slice: 30;
  border-image-repeat: round;
  box-sizing: border-box;
}
.box_content .left-content {
  width: 225px;
  height: 100%;
  background: url(../Res/icons/bg_patern.png);
  float: left;
}
.for_building_box .left-content {
  background: url(../Res/icons/left-content.png);
  background-size: 98% 100%;
}
.for_building_box .full {
  background: url(../Res/skins/desc-rect.png);
  background-size: 110% 110%;
  background-position-x: -15px;
  background-position-y: -15px;
}
.box_content .right-content {
  width: 582px;
  float: right;
  height: 100%;
}
.for_building .right-content {
  background-image: url(../Res/icons/bg_patern.png);
}
.box_content .right-content .total_mat {
  width: 100%;
  height: 100%;
  background: url(../Res/skins/desc-rect.png);
  background-position-y: -18px;
  background-size: 100% 106%;
}

.show-item-list {
  height: 353px !important;
}

.for_mat_trade .right-content .total {
  height: 352.8px;
  background-position-y: 0%;
  background-position-y: -3px;
  background-size: 100% 356px;
}

.for_mat_trade .left-content {
  background-image: url(../Res/icons/left-content.png);
  background-size: 100% 100%;
}

.for_mat_trade .right-content ul .matrial_unit {
  width: 31%;
}
#mall-matrial .right-content ul {
  width: 100%;
  height: 100%;
}
.matrial_unit,
.equi_preveiw ul li {
  height: 109px;
  width: 192px;
  float: left;
  margin: 5px;

  /*cursor: pointer;*/
}
.exchange-item .req-list .pic {
  background-image: url(../Res/background/icon-bg.png);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  width: 20px;
}
.exchange-item .req-list .req-unit-image {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 15px;
  width: 100%;
  margin-top: 6px;
}

.matrial_unit .border_up {
  position: absolute;
  width: 94px;
  margin-left: 51px;
}
.matrial_unit .img-inside-box .big-img {
  width: 126px;
  height: 56px;
  display: block;
  margin: auto;
  margin-top: 15px;
  border-radius: 10px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 5px;
}
.matrial_unit .matrial .sell-matrial {
  display: none;
  width: 60%;
  line-height: 20px;
  margin: auto;
  background-color: transparent;
  margin-top: 5px;
}
.matrial_unit .img-inside-box:hover .sell-matrial {
  display: block;
}

.matrial_unit .img-inside-box .wrapper .image {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
.txt-inside-box h2 {
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  font-weight: bold;
}
.img-inside-box .matrial {
  height: 28px;
  margin: auto;
  margin-top: -33px;
  position: absolute;
  width: 140px;
  margin-left: 26px;
}
.for_mat_trade .img-inside-box .matrial {
  height: 28px;
  margin: auto;
  margin-top: -30px;
  position: absolute;
  width: 140px;
  margin-left: 26px;
}
#mall-matrial .img-inside-box .matrial ul {
  height: auto;
  background-color: rgba(0, 0, 0, 0.7);
  width: 90%;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 28px;
  margin: auto;
}
.img-inside-box .matrial ul li {
  height: 28px;
  width: 45%;
  margin: 0px;
  background-color: transparent;
}
.for_mat_trade .img-inside-box .matrial ul li {
  width: 33.3%;
}
.for_mat_trade .img-inside-box .matrial ul li img {
  width: 18px;
  height: 18px;
  padding: 1px;
  background-image: url(../Res/background/icon-bg.png);
  background-size: 100% 100%;
  margin-top: 4px;
}
.for_mat_trade .img-inside-box .matrial ul li .num {
  width: 22px;
  line-height: 28px;
}
.for_mat_trade .img-inside-box .matrial ul {
  background-color: rgba(0, 0, 0, 0.5);
  width: 94%;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 28px;
}
#mall-matrial .img-inside-box .matrial ul .buy_mat_btn button {
  width: 80%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  margin-top: 4px;
}
#mall-matrial .img-inside-box .matrial ul li .pic {
  width: 40%;
  height: 20px;
  float: left;
  margin-top: 5px;
}
#mall-matrial .img-inside-box .matrial ul li .pic img {
  margin-right: 4px;
  margin-left: 4px;
}
#mall-matrial .matrial ul li .num {
  width: 60%;
  height: 28px;
  float: left;
  font-size: 12px;
  line-height: 28px;
  color: white;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fa3lia-img img {
  display: block;
  margin: auto;
  margin-top: -5px;
  max-width: 180px;
  border: 6px solid transparent;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-image: url(../Res/border/sml_btn.jpg);

  border-image-slice: 7;
  border-image-repeat: round;
  box-sizing: content-box;
}
.for_mat_trade .banner-red {
  margin-top: 35px;
  color: white;
  line-height: 30px;
  text-align: center;
  font-size: 15px;
}

.fa3lia-p {
  color: #81511c;
  font-size: 16px;
  direction: rtl;
  margin: 15px;
}
.right-content-footer {
  width: 100%;
  height: 39px;
  overflow: auto;
  background-image: url("../Res/background/sitenav-bar-bg.jpg");
  background-size: 100% 100%;
}
.box_content .right-content-footer ul li {
  color: white;
}

.budget {
  width: 180px;

  color: white;
}
.txt-inside-box {
  width: 85%;
  margin: auto;
  border-radius: 5px;
}
/*444444444444444444444444444444444444444444444444444444444444444444*/
.budget div {
  float: left;
}
.budget div img {
  height: 18px;
  margin-top: 7px;
}
.budget .txt {
  line-height: 26px;
  font-size: 16px;
  direction: rtl;
  margin: 5px 9px;
}
.box_content .full {
  width: 100%;
}
#player-profile {
  position: fixed;
  bottom: -3px;
  background-image: url(../Res/skins/palace.png);
  background-size: 100% 100%;
  width: 380px;
  height: 200px;
  z-index: 10;
  padding: 10px;
  left: 0px;
  transition: all 0.8s ease-in-out;
  padding-top: 22px;
  pointer-events: none;
}
#player-profile .left {
  height: 100%;
  width: 57%;
  float: left;
  position: relative;
}
#player-profile_::after {
  content: " ";
  width: 100%;
  height: 30px;
  background-image: url(../Res/border/roof.png);
  position: absolute;
  left: 0px;
  margin-top: -38px;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}
.avatar {
  width: 90%;
  height: 142px;
  float: left;
  margin-top: 18px;
  margin-left: 5px;
}

.avatar-img {
  width: 100%;
  height: 168px;
  background: url(../Res/background/top_left_resources_panel.png) no-repeat
    center;
  background-size: 100% 100%;
}
.avatar-img img {
  margin-top: 13px;
  margin-left: 26px;
  width: 112px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  border-radius: 8px;
  padding: 4px;
  pointer-events: initial;
}
.profile .list_of_data {
  float: right;
  height: 100%;
  width: 43%;
}
#player-profile .list_of_data ul li img {
  width: 13%;
  float: left;
  margin-left: 5%;
  margin-top: 4px;
}
#player-profile .list_of_data ul {
  margin-top: 13px;
  width: 100%;
}
#player-profile .list_of_data ul li {
  height: 27px;
  width: 94%;
  background-image: url("../Res/background/profile_data.png");
  margin-top: 3px;
  background-size: 100% 100%;
}
#player-profile .list_of_data ul li span {
  font-size: 13px;
  line-height: 27px;
  color: white;
  display: block;
  width: 75%;
  float: right;
  height: 26px;
  overflow: hidden;
}

/*ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/
#player-profile .avatar-name h1 {
  width: 100%;
  font-size: 16px;
  height: 40px;
  font-weight: bold;
  background-image: url("../Res/background/p_name_n.png");
  background-size: 100% 100%;
  color: white;
  text-align: center;
  line-height: 31px;
  pointer-events: initial;
}
#player-profile .avatar-name {
  float: none;
  clear: both;
}
.avatar-name h1:hover {
  background-image: url("../Res/background/p_name_a.png");
}
.avatar-name h1:active {
  background-image: url("../Res/background/p_name_n.png");
}
#matrial-box {
  width: 45px;
  height: 45px;
  background-image: url(../Res/icons/icon_bg_l.png);
  position: absolute;
  background-size: 100% 100%;
  margin-top: 7px;
  margin-left: 2px;
}
#matrial-box button {
  width: 30px;
  height: 30px;
  background-image: url(../Res/btns/matrialBox.png);
  background-size: 100% auto;
  background-color: transparent;
  pointer-events: initial;
}

#matrial-box button:hover {
  background-position-y: -30.5px;
}
#matrial-box button:active {
  background-position-y: -61px;
}

.for_report .left-content {
  width: 48%;
  background-color: #fcf7e5;
  direction: rtl;
}
.for_report .right-content {
  width: 52%;
  direction: rtl;
  background: url(../Res/skins/desc-rect.png);
  background-position-y: 0%;
  background-size: auto;
  background-position-y: -18px;
  background-size: 100% 94%;
}
.th {
  height: 21px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  line-height: 21px;

  background-image:
    url("../Res/background/bar_L.png"), url("../Res/background/bar_R.png"),
    url("../Res/background/bar_center.png");
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: left, right, center;
  background-size: auto 100%;
  color: white;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr {
  width: 100%;
  height: 24.6px;
  line-height: 22px;
  display: flex;
  align-items: center;
  background-color: #fcf7e5;
}

.for_quest .right-content-footer {
  height: 10%;
  overflow: hidden;
  margin-top: 4px;
}
.tr:nth-child(even) {
  background-color: #d2c498;
}
.rest-time h6 {
  color: #660000;
  display: inline-block;
  line-height: 27px;
  margin-right: 15px;
  font-size: 15px;
}
.report_state .attack-side,
.report_state .defense-side {
  display: inline-block;
}
.report_state img {
  width: 207px;
}
.report_state .full-btn {
  height: 27px;
  width: 89%;
  margin: auto;
  margin-top: 15px;
}
.down_report {
  width: 100%;
  height: 45px;
  background-image: url("../Res/background/sitenav-bar-bg.jpg");
  background-size: 100% 100%;
  margin-top: 64.5px;
}
.banner-red {
  height: 40px;
  background-image:
    url(../Res/panner/h_title_l.png), url(../Res/panner/h_title_r.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left, right;
  background-size: 50% 100%;
  text-align: center;
  line-height: 30px;
  color: white;
  font-size: 14px;
}
.attack-side,
.defense-side {
  width: 200px;
}
.attack-side .big-img,
.defense-side .big-img {
  width: 150px !important;
  display: block;
  margin: auto;
}
.attack-side .bg-image,
.defense-side .bg-image {
  background-size: 150px 148px;
  background-repeat: no-repeat;
  height: 148px;
  background-position: center;
}
.joined-num {
  width: 35px;
  height: 35px;
  margin-right: 26px;
  float: right;
  border-radius: 50%;
  position: relative;
  z-index: 10;
  margin-top: -35.5px;
  background-image: url(../Res/icons/num_container.png);
  background-size: contain;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  color: white;
}

.reload .full-btn {
  width: 45%;
  display: inline-block;
  margin-top: 10px;
  margin-right: 5px;
}
.reload {
  width: 241px;
  display: inline-block;
}
.time_start {
  display: inline-block;
  float: left;
  line-height: 27px;
  font-size: 16px;
  color: red;
  font-weight: bold;
  margin-top: 7px;
  margin-left: 7px;
}
.time_start span {
  font-weight: normal;
  color: black;
}
.deactive {
  color: #fcf7e5;
  cursor: not-allowed;
}
.full {
  width: 100% !important;
}

.tr div,
.th div {
  width: 16.6666%;
  height: 100%;
  text-align: center;
}
.theater {
  position: static;
}
.theater::before {
  display: none;
}
.theater .tr div,
.theater .th div {
  float: left;
  width: 10%;
  height: 100%;
  text-align: center;
}
.theater .tr {
  height: 9.2%;
  line-height: 27.5px;
}
.theater .th {
  height: 8%;
  line-height: 24px;
}
.theater .tr div:first-child,
.theater .th div:first-child {
  float: left;
  width: 20%;
  height: 100%;
}
.top-left,
.bottom-left {
  background-color: #fcf7e5;
  /*border: solid 11px transparent;*/
  padding: 10px;
  background-image: url(../Res/icons/left-content.png);
  background-size: 100% 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.bottom-left {
  margin-top: 5px;
  overflow-y: scroll;
  height: 144px;
}
.bottom-left .tr,
.top-left .tr {
  line-height: 24.5px;
  text-align: center;
  font-size: 15px;
  /*cursor: pointer;*/
}
.for_quest .left-content {
  width: 28%;
}
.for_quest .right-content {
  width: 72%;
  background: url(../Res/skins/desc-rect.png);
  background-position-y: 0%;
  background-size: auto;
  background-position-y: -18px;
  background-size: 100% 95.6%;
}
.for_quest .quest {
  direction: rtl;
}
.for_quest .right-content {
}
.quest-header {
  width: 330px;
  margin: auto;
  height: 40px;
  font-size: 20px;
  text-align: center;
  line-height: 34px;
  margin-top: -2px;
}
.quest-desc {
  width: 92%;
  color: rgb(17, 96, 96);
  font-size: 18px;
}
.quest-desc p {
  margin-right: 18px;
}
.box_content .right-content .quset-req ol .done_all {
  font-weight: bold;
}
.box_content .right-content .quset-req ol li .done {
  font-weight: bold;
  color: greenyellow;
}
.box_content .right-content .quset-req ol li {
  height: 28px;
  width: 500px;
  margin-right: 18px;
  float: none;
  font-size: 16px;
  padding-right: 7px;
  line-height: 28px;
  list-style-type: circle;
}
.quest {
  overflow: auto;
  margin-bottom: 1%;
}
.quset-req ol li .state {
  margin-right: 18px;
}
.quset-req ol li .don {
  color: chartreuse;
}
.quset-req ol li:before {
  color: #660000;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.quset-req ol li .required {
  color: #660000;
}
.quest-expl {
  margin-top: 10px;
}
.quest-expl p,
.quest-reward p {
  padding-right: 50px;
  font-size: 14px;
  width: 80%;
  margin-bottom: 10px;
}
.quest-expl-head img {
  height: 36px;
  vertical-align: bottom;
}
.quest-expl-head span {
  display: inline-block;
  width: 150px;
  height: 36px;
  line-height: 40px;
  font-size: 24px;
  padding-right: 10px;
}
.quest-desc,
.quest-expl,
.quest-reward,
.quset-req {
  margin-right: 30px;
}
.quest hr {
  width: 95%;
  margin: auto;
  margin-bottom: 5px;
  margin-top: 5px;
  color: #81511c;
}
/*_______________________________________-jghgjhgjhgjhgjhgggggggggggggggggggggj*/
.for_msg .td_3 {
  width: 33.3%;
  text-align: center;
  overflow: hidden;
}
.for_building .left-content {
  direction: rtl;
  position: relative;
}
.for_building .left-content h1 {
  margin: 5px 13px;
  font-size: 15px;
}
.for_building .left-content p {
  margin-right: 9px;
  font-size: 12px;
  line-height: 14px;
  margin: auto;
  margin-bottom: 13.5px;
  width: 90%;
}
.for_building .left-content .btn_2 {
  width: 70%;
  margin: auto;
}
.worker .being_upgrade img {
  height: 52px;
  display: block;
  margin: auto;
  margin-top: 10px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 4px;
  border-radius: 8px;
}
.worker {
  width: 90%;
  margin: auto;
  height: 82px;
  direction: rtl;
  clear: both;
  margin-top: 20px;
  background: url(../Res/icons/bg_patern.png);
  border-radius: 7px;
}
.worker .being_upgrade {
  float: left;
  width: 30%;
  height: 100%;
}
.worker .building-data {
  height: 100%;
  float: left;
  width: 40%;
}
.building-data h2 {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  line-height: 36px;
}
.building-data h3 {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: #5f8c00;
  line-height: 18px;
}
.worker h4 {
  display: inline-block;
}
.worker .right-all {
  float: left;
  width: 30%;
  font-size: 14px;
  height: 45px;
  margin-top: 18px;
}
.worker .btn-wrapper .speed-up-btn {
  width: 70px;
  height: 20px;
}
.worker .btn-wrapper {
  width: 95px;
  margin: auto;
}
.worker .btn-wrapper .cancel-btn {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.right-all img {
  width: 22px;
  height: 22px;
  float: right;
}
.time-rest {
  line-height: 22px;
  margin-right: 23px;
}
.acce-btn button {
  display: inline-block;
  height: 22px;
  color: white;
  width: 63px;
  padding: 2px;
  text-align: center;
  border-radius: 12px;
  float: left;
}
.box_header .close_dialog img {
  width: 27px;
  vertical-align: text-bottom;
  margin-top: 13px;
}
.box_header .close_dialog {
  float: right;
  height: 90px;
}
.left-content .li {
  margin: 9px 14px;
  overflow: auto;
}
.left-content .li h5 {
  display: inline-block;
  margin-left: 23px;
  font-weight: bold;
}
.left-content .li .number-arrow-wrapper {
  margin-left: -27px;
  margin-top: 5px;
}
.left-content .li input {
  width: 18px;
  margin: 5px;
  margin-left: 20%;
  direction: ltr;
}
.for_building .right-content .header-1 {
  direction: rtl;
  font-size: 22px;
  margin-top: 15px;
  margin-right: 24px;
}
.for_building .right-content p {
  direction: rtl;
  font-size: 15px;
  margin-right: 23px;
}
.req_table {
  background-color: transparent;
  margin: auto;
  width: 100%;
  height: 162px;
  color: #5e341b;
}
.req_table_container {
  background-image: url(../Res/background/alert_box.png);
  background-size: 100% 100%;
  width: 50%;
  margin: auto;
  padding: 35px 11px 20px 11px;
}
.req_table .thead {
  min-height: 25%;
  background-color: green;
  width: 100%;
}
.req_table thead ol li {
  float: right;
  margin-right: 9px;
}
.req_table tr td img {
  height: 25px;
  display: block;
  float: left;
  margin-left: 7px;
}
.req_table tr td .amount {
  float: left;
  margin-left: 15px;
  line-height: 30px;
  direction: rtl;
}
.req_table td {
  border: 1px solid #dddddd;
}
.matrial_unit {
  background-image:
    url(../Res/style/Corner-down-l.png), url(../Res/style/Corner-down-r.png),
    url(../Res/style/Corner-up-l.png), url(../Res/style/Corner-up-r.png),
    url(../Res/style/matrail_bg.png);
  background-position:
    left bottom,
    right bottom,
    left top,
    right top,
    center;
  background-repeat: no-repeat;
  background-size:
    49px 50px,
    49px 50px,
    35px 50px,
    35px 50px,
    100% 100%;
}
.uni_tech ul li:first-child,
.acad_tech ul li:first-child,
.empty_place ul li:first-child,
.uni_tech ul li:nth-child(6),
.acad_tech ul li:nth-child(6),
.empty_place ul li:nth-child(6),
.uni_tech ul li:nth-child(11),
.acad_tech ul li:nth-child(11),
.empty_place ul li:nth-child(11) {
  margin-left: 1.5%;
}
.uni_tech ul .study_unite,
.acad_tech ul .study_unite,
.empty_place ul li {
  display: inline-table;
  width: 19%;
  background-image:
    url(../Res/style/Corner-up-l.png), url(../Res/style/Corner-up-r.png),
    url(../Res/style/Border-up.png), url(../Res/style/matrail_bg.png);
  background-size:
    35px 50px,
    35px 50px,
    auto 20px,
    100% 85%;
  background-position:
    top left,
    top right,
    top center,
    top center;
  background-repeat: no-repeat;
  margin-top: 8px;
}
.uni_tech ul li .big-img,
.acad_tech ul li .big-img,
.empty_place ul li .big-img {
  width: 90px;
  display: block;
  margin: auto;
  margin-top: 16px;
  margin-bottom: 2px;
  border-radius: 5px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 4px;
}
.study_unite .full-btn {
  width: 100%;
}
.uni_tech ul,
.acad_tech ul,
.empty_place ul {
  margin-top: 4px;
  direction: ltr;
}
.uni_tech ul .full-btn,
.acad_tech ul .full-btn,
.empty_place ul .full-btn {
  width: 90%;
  margin: auto;
}
.uni_tech ul li .txt-inside-box h2,
.acad_tech ul li .txt-inside-box h2,
.empty_place ul li .txt-inside-box h2 {
  font-size: 14px;
  color: #7f0000;
}
.mili_building .middle-content {
  width: 15%;
  height: 100%;
  float: left;
  background-image: url(../Res/background/column.png);
  background-position: center;
  position: relative;
  background-size: 92% 100%;
}
.mili_building .left-content {
  width: 28%;
  position: relative;
}
.mili_building .right-content {
  width: 57%;
}
.mili_building .leftOfRight .army_req_table {
  background: url(../Res/skins/palace.png);
  background-size: 100% 100%;
  padding: 25px 0px 10px 0px;
  margin-left: 5px;
}
.mili_building .leftOfRight .army_req_table .req_table {
  height: auto;
}
.soldier {
  padding: 10px 0px;
}
.soldier img {
  display: block;
  width: 68%;
  margin: auto;
  border-radius: 5px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 4px;
}
.current-working .soldier img {
  width: 80%;
}
.soldier .amount {
  direction: rtl;
  font-size: 14px;
  color: white;
  font-weight: bold;
  margin: auto;
  margin-top: -20px;
  width: 79px;
  height: 18px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.6);
  padding-right: 5px;
  border-radius: 0 0 5px 5px;
}
.soldier .title {
  text-align: center;
  font-size: 14px;
  margin-top: 5px;
}

.mili_building .middle-content .selected_sol {
  color: white;
  background-image: url(../Res/background/selected-squer.png);
  background-size: 90% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.right-content .inner_nav {
  height: 35px;
}
.right-content .rightOfRight {
  width: 40%;
  float: right;
  height: 255px;
}
.right-content .leftOfRight {
  width: 60%;
  float: right;
  height: 255px;
}
.x-2 {
  width: 90%;
}
.header-2 {
  margin: 9px;
  font-size: 14px;
  direction: rtl;
  overflow: hidden;
}
.nl-b {
  display: inline-block;
}
.btn_2 {
  width: 135px;
  margin: auto;
}
.current-working .soldier {
  width: 48%;
  float: left;
  height: 100%;
}
.current-working .soldier .amount {
  width: 76%;
  margin: auto;
  margin-top: -20px;
}

.current-working {
  height: 76px;
  width: 93%;
  margin-left: 3px;
  margin-top: 7px;
  float: left;
  padding-right: 3px;
  border-radius: 5px;
  background-image: url(../Res/icons/bg_patern.png);
}
.acce-btn img {
  width: 22px;
  height: 22px;
  vertical-align: bottom;
}
.current-unite {
  float: right;
  width: 52%;
  height: 100%;
}
.total-work {
  height: 234px;
}
.roof-decor {
  content: " ";

  background-image: url(../Res/border/roof.png);
  display: block;

  background-position: center;
  background-size: 100% 100%;
}
.mili_building .roof-decor {
  width: 220px;
  height: 30px;
  margin-right: 6px;
  margin-top: -15px;
}

#WorldCity {
  color: white;
  font-size: 30px;
  line-height: 56px;
  text-align: center;
}
.stroke {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

#palace_content .right-content {
  background: url(../Res/skins/desc-rect.png);
  background-position-y: -18px;
  background-size: 100% 106%;
}
#palace_content .left-content {
  background: url(../Res/icons/left-content.png);
  background-size: auto;
  background-size: 98% 100%;
}

.production-report .tr {
  height: 31px;
}

#palace_content #req-table-wrapper {
  width: 60%;
  margin: auto;
  background-image: url(../Res/skins/palace.png);
  background-size: 100% 100%;
  padding-top: 25px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
}

#palace_content #req-table-wrapper .req_table {
  border: solid 2px transparent;
}

#dialg_box .right-nav .wrapper {
  margin-right: 45px;
}

.right-nav .nav-building {
  font-size: 14px;
}
.right-nav .nav-building:nth-child(2) {
  line-height: 50px;
  margin: 0px 7px;
}
.right-nav .nav-building button {
  height: 20px;
  width: 25px;
  background-color: transparent;
}

.right-nav .time-to-refresh {
  font-size: 14px;
  line-height: 45px;
  margin-right: 35px;
}
.right-nav .time-to-refresh label:first-child {
  margin-left: 15px;
}
#scroll-production-report {
  height: 93%;
  overflow: hidden;
}

body {
  overflow: hidden;
}
.map-tooltip {
  width: 270px;
  height: 180px;
  border-radius: 7px;
  direction: rtl;
  background-image: url(../Res/background/unitTT.png);
  color: white;
  overflow: auto;
}
.city-unit-tooltip {
  background-image:
    url(../Res/icons/left-content.png), url(../Res/icons/left-content.png);
  background-size: 100% 100%;
  background-color: transparent;
  border-radius: initial;
  height: auto;
  padding: 15px 10px;
}
.city-unit-tooltip .tt-title {
  height: auto;
}
.city-unit-tooltip .tt-desc .friend {
  color: #6c9936;
}

.map-tooltip .tt-header {
  width: 100%;
  font-size: 18px;
  margin-top: 28px;
}
.map-tooltip .tt-desc table {
  width: 100%;
  font-size: 13px;
  border-spacing: 5px;
  border-collapse: separate;
}
.map-tooltip .tt-desc table tr td:first-child {
  color: #81511c;
}

.map-tooltip .tt-desc table tr:nth-child(3) td:nth-child(2) {
  color: #5e341b;
}
.map-tooltip .tt-header .coords {
  margin: 0px 15px;
  padding: 8px 0px;
}
.map-tooltip .tt-header .distance {
  color: #5e341b;
  font-size: 13px;
  display: inline-block;
  margin-right: 30px;
}
.map-tooltip .tt-title {
  margin-right: 15px;
  font-size: 20px;
  height: 50px;
}
.map-tooltip .tt-desc {
  margin-right: 15px;
}
.city-unit-tooltip .tt-title {
  height: auto;
  margin-bottom: 10px;
}

#unit_review {
  width: 522px;
  height: 348px;
  position: fixed;
  left: 50%;
  margin-left: -261px;
  top: 130px;
  z-index: 2;
}
#unit_review .header {
  width: 100%;
  height: 40px;
  margin-bottom: -7px;
}
#unit_review .header .title {
  width: 45%;
  float: left;
  height: 100%;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
  color: white;
  margin-left: 150px;
}
#unit_review .header .close_RB {
  float: right;
  width: 20%;
  height: 100%;
}
#unit_review .header .close_RB img {
  height: 20px;
  margin-top: 5px;
  margin-right: 20px;
  float: right;
}
#unit_review .content {
  height: 220px;
  width: 87%;
  margin: auto;
  border: 12.5px solid transparent;
  border-image: url(../Res/background/border_a.png);
  border-image-slice: 30;
  border-image-repeat: round;
  border-bottom: none;
  background: url(../Res/skins/palace.png);
  border-radius: 12px;
  background-position: -50px;
}
#unit_review .footer {
  width: 87%;
  margin: auto;
  border: 12.5px solid transparent;
  border-image: url(../Res/background/border_a.png);
  border-image-slice: 30;
  border-image-repeat: round;
  border-top: none;
}
#unit_review .left_cont {
  width: 40%;
  height: 100%;
  float: left;
}
#unit_review .left_cont .unite_image {
  background-image: url(../Res/background/frame.png);
  background-position: 5% center;
  background-repeat: no-repeat;
  background-size: 80% auto;
  height: 150px;
  width: 100%;
  overflow: auto;
}
#unit_review .left_cont .unite_image div {
  width: 64%;
  margin-left: 9%;
  border-radius: 50%;
  margin-top: 9%;
  height: 115px;
  background-size: contain;
  background-position: center;
}
.left_cont .battel-field {
  width: 80%;
  height: 30px;
  line-height: 30px;
  color: white;
  background-image: url(../Res/btns/ui_timer.png);
  background-size: 100% 100%;
  margin: auto;
  margin-top: 4px;
  border-radius: 5px;

  text-align: center;
  font-size: 16px;
  font-weight: bold;
  background-color: transparent;
}
#unit_review .right_cont {
  width: 60%;
  float: right;
  height: 100%;
  overflow: hidden;
}
#unit_review .right_cont .dist {
  width: 95%;
  height: 40px;
  margin: auto;
  background-image: url(../Res/panner/sector_name.png);
  background-size: 100% 100%;
}
#unit_review .right_cont .dist div {
  float: right;
  margin-right: 10px;
  font-size: 16px;
  line-height: 24px;
  direction: rtl;
}
#unit_review .right_cont .copy-coord-icon {
  width: 20px;
  float: left;
  height: 28px;
}
.copy-coord {
  width: 100%;
  height: 100%;
  background-image: url(../Res/icons/copy-coord.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  display: block;
  cursor: pointer;
}
#unit_review .right_cont .dist div img {
  width: 15px;
}
#unit_review .right_cont .desc .province {
  text-align: center;
}
#unit_review .new-city-req-table .province {
  text-align: center;
  line-height: 35px;
}
#unit_review .right_cont .desc p {
  font-size: 16px;
  text-align: center;
}
#unit_review .footer ul {
  width: 100%;
  background: url(../Res/btns/selectedTile.jpg);

  background-size: contain;
  height: 60px;
}
#unit_review .footer ul li {
  float: left;
  margin-left: 15px;
  margin-top: 12px;
}
#footer_bar img {
  height: 40px;
}

#unit_review .right_cont .desc .name {
  width: 78%;
  height: 35px;
  background-color: white;
  margin: auto;
}
#unit_review .right_cont .desc .name h1 {
  float: left;
  height: 35px;
  width: 70%;
  text-align: center;
  line-height: 35px;
  font-size: 18px;
  font-weight: bold;
  color: white;
}
#unit_review .right_cont .desc .name div {
  float: right;
  height: 100%;
  width: 30%;
}
#unit_review .right_cont .desc .name img {
  height: 20px;
  margin-top: 7px;
  float: left;
}
#unit_review .right_cont .desc table {
  width: 70%;
  margin: auto;
  margin-top: 25px;
}
#unit_review .right_cont .desc table tr td:nth-child(2) {
  font-size: 16px;
  text-align: right;
}
#unit_review .right_cont .desc table tr td:first-child {
  font-size: 14px;
  text-align: right;
}

#unit_review .right_cont .prize-list {
  width: 96%;
  overflow: hidden;
  margin-top: 10px;
}

.prize-list ul li {
  width: 25%;
  float: left;
  height: 32px;
}

.quest-reward .prize-list ul {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 25px;
  width: 75%;
  margin-right: 50px;
}

.quest-reward .prize-list ul li {
  width: 16%;
  height: 34px;
}

.prize-list ul li .golden-border .amount {
  line-height: 32px;
  font-size: 12px;
}

.world {
  height: auto;
}

.world .box_content .left-content {
  width: 40%;
  height: 353px;
}
.world .box_content .right-content {
  width: 59%;
  background: url(../Res/icons/bg_patern.png);
  height: 353px;
}
.world .box_content .right-content::before {
  content: "";
  width: 10px;
  margin: auto;
  background-color: red;
  position: absolute;
  right: 58%;
  height: inherit;
  background-image: url(../Res/border/sprite_v.png);
  background-size: contain;
}
.world .camps .camp_review {
  width: 97%;
  text-align: center;
  background-color: white;
  line-height: 25px;
  margin: auto;
  margin-top: 5px;
}
.world .camps .camp_review .coord-txt,
.world .camps .camp_review .copy-coord-icon {
  display: block;
  float: right;
}
.world .camps .camp_review .coord-txt {
  margin-right: 40px;
  width: 55px;
}
.world .camps .camp_review .copy-coord-icon {
  width: 20px;
  height: 20px;
  margin-right: 15px;
  margin-top: 3px;
}
.world .camps .left-content .battel_req {
  height: 54px;
  overflow: auto;
  background-size: 100% auto;
  background-position: bottom;
}
.world .camps .left-content {
  background-image: url(../Res/skins/desc-rect.png);
  background-size: 100% 105%;
  background-position: bottom;
}
.world .camps .camp_review tr:first-child td:first-child {
  width: 135px;
}

.attakBtns {
  width: 100%;
  height: 70px;
}
.four-btn-camp {
  height: 81px;
  overflow: hidden;
}
.attakBtns .container {
  width: 74%;
  margin: auto;
  height: 100%;
}
.attck_start,
.attack_join {
  width: 100px;
  height: 45px;
  margin-top: 10px;
}
.attakBtns .full-btn {
  line-height: 45px;
  width: 100%;
  text-align: center;
}
.four-btn-camp .full-btn {
  line-height: 35px;
}

.four-btn-camp .request-order,
.four-btn-camp .plunde-prize,
.four-btn-camp .attck_start,
.four-btn-camp .attack_join {
  width: 100px;
  height: 35px;
  margin-top: 5px;
}
.battel_req ul {
  margin-right: 10px;
}
.battel_req ul li {
  text-align: right;
  font-size: 14px;
  line-height: 20px;
}
.camps .header {
  background: linear-gradient(rgb(245, 231, 190), rgb(219, 192, 127));
  text-align: right;
  font-size: 15px;
  font-weight: bold;
  line-height: 25px;
  padding-right: 25px;
}

.overview {
  direction: rtl;
  height: 116px;
  background-image: url(../Res/skins/desc-rect.png);
  background-size: 100% 100%;
}
.overview p {
  line-height: 15px;
  font-size: 14px;
  text-align: right;
  width: 50%;
  direction: rtl;
  margin-right: 5px;
  padding: 10px 15px 10px 10px;
  height: 70px;
  float: right;
}
#camp-prize {
  width: 203px;
  margin-top: 2px;
}
#camp-prize .amount {
  color: #08ff07;
  line-height: 24px;
  font-size: 12px;
  text-align: center;
}

#camp-prize li {
  width: 25%;
  float: left;
  height: 24px;
}
#camp-prize img {
  width: 90%;
  margin: auto;
  padding: 2px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  border-radius: 2px;
}
.camp-data {
  width: 100%;
  height: 215px;
  background-color: transparent;
  background-image: url(../Res/skins/desc-rect.png);
  background-size: 100% 106%;
  background-position-y: -10px;
}
.camp-data .right {
  width: 45%;
  height: 100%;
  background-image:
    url(../Res/border/roof.png), url(../Res/background/colonna.png),
    url(../Res/background/colonna.png);
  background-size:
    103% 35px,
    16px 83%,
    16px 83%;
  background-position:
    top,
    right 35px,
    left 35px;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.camp-data .left {
  width: 55%;
  height: 100%;
}
.camp-data .blue-ribbon {
  background: none;
}
.camp-data .refresh_time {
  width: 82%;
  height: 74px;
  background-color: white;
  margin: auto;
  margin-top: 41px;
  background: url(../Res/icons/left-content.png);
  background-size: 100% 100%;
}
.refresh_time div:first-child {
  width: 60%;
}
.refresh_time div:nth-child(2) {
  width: 40%;
}
.refresh_time div {
  width: 50%;
  height: 100%;
}
.refresh_time div h1 {
  text-align: center;
  font-size: 14px;
  margin: 10px 0px;
}
.refresh_time div h2 {
  text-align: center;
}
.refresh_time div h3 {
  text-align: center;
  font-size: 20px;
}
.refresh_time div h3 span {
  color: red;
}
.camp-data .right table {
  background-color: white;
  width: 85%;
  margin: auto;
  margin-top: 20px;
}
.camp-data .right table tr td {
  text-align: right;
  line-height: 20px;
  font-size: 14px;
  padding-right: 15px;
}
.camp-data .left table {
  width: 100%;
  width: 90%;
  margin: auto;
  text-align: center;

  margin-top: 30px;
}
.camp-data .left table tr td img {
  border-radius: 50%;
  object-fit: cover;
}
.camp-data .army_count {
  color: white;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: -3px;
}
.world .camps .footer {
  width: 100%;
  background-image: url("../Res/background/sitenav-bar-bg.jpg");
  background-size: 100% 100%;
  height: 55px;
  clear: both;
}
.world .box_content {
  height: 432px;
}
.world .nav_bar {
  margin-top: -15px;
}
.camp-equip ul li {
  width: 70px;
  height: 34px;
}

#camp-panal-equip-row {
  height: 55px;
  width: 100%;
}
#camp-panal-equip-row ul {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  width: 100%;
}

#camp-panal-equip-row ul li .image-wrapper {
  background-image: url(../Res/back-shape/rect.png);
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
#camp-panal-equip-row ul li .image-wrapper .equip {
  height: 100%;
  background-position: center;
  background-size: 88% 83%;
  background-repeat: no-repeat;
}
#camp-panal-equip-row ul li .icon {
  height: 25px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  margin-top: -33px;
}

.overMap {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 25px;
  left: 25px;
}
.overMap lable {
  position: absolute;
  margin-left: -5px;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  background-size: 100% 100%;
}
#smallMap {
  position: fixed;
  z-index: 1111111;
  top: 50px;
  left: 50%;
  margin-left: -275px;
}
#smallMap-icon {
  position: absolute;
  background-image: url(../Res/icons/icon_bg.png);
  background-size: 100% 100%;
  right: 40px;
  margin-top: 7px;
  width: 45px;
  height: 45px;
  display: none;
}
#smallMap-icon img {
  height: 26px;
  margin-left: 18px;
  margin-top: 1.5px;
  pointer-events: initial;
}

.overMap .map-tooltip {
  position: absolute;
}

#smallMap_close {
  width: 550px;
  position: absolute;

  height: 25px;
  top: 0px;
}
#smallMap_close img {
  height: 25px;
  float: right;
  margin-right: 5px;
  cursor: pointer;
}

/*__________________________________CHAT BOX __________________________________*/

#chat-box {
  width: 608px;
  position: fixed;
  bottom: 0px;
  z-index: 8;
  left: 50%;
  margin-left: -320px;
  transition: all 0.8s;
}
#navigator-bar {
  width: 87%;
  height: 40px;
  float: right;
  margin-right: 50px;
  margin-top: -40px;
}
#chat-area {
  width: 100%;
  height: 160px;
}
#input-area {
  width: 100%;
  height: 40px;
  background-color: #203e5f;
  background: url("../Res/background/sitenav-bar-bg.jpg");
  justify-content: space-around;
  position: relative;
}
#input-area .quote-wrapper {
  position: absolute;
  top: -24px;
  height: 24px;
  width: 72%;
  pointer-events: none;
}
#input-area .msg-to-reply {
  background-color: white;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  direction: rtl;
  padding: 0px 8px;
  line-height: 24px;
  background: url(../Res/background/paperCenter.jpg);
  box-shadow: 0px -3px 5px 4px rgba(0, 0, 0, 0.12);
  width: 0%;
  transition: all 0.3s linear;
  margin: auto;
  position: relative;
}
#input-area .quote-wrapper .close-btn {
  width: 20px;
  height: 20px;
  position: absolute;
  right: -25px;
  top: -10px;
  z-index: 2;
  background-color: transparent;
  background-image: url(../Res/btns/close_b.png);
  background-size: 100% 100%;
  cursor: pointer;
  pointer-events: initial;
}
#input-area .msg-to-reply bold {
  font-weight: bold;
}

#navigator-bar div {
  height: 100%;
  float: right;
  margin-right: 10px;
}
#UPDOWN-chat {
  width: 40px;
  height: 50px;
  margin-right: -50px !important;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: url("../Res/background/sitenav-bar-bg.jpg");
}
#UPDOWN-chat img {
  height: 40px;
  transform: rotateZ(180deg);
  transition: all 0.8s ease-in-out;
}
#navigator-bar div button {
  width: 64px;
  height: 30px;
  margin-top: 5px;
}
#navigator-bar label {
  line-height: 40px;
  width: 20px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}
.coords-input {
  width: 46px;
}
.coords-input input {
  width: 40px;
  height: 23px;
  margin-top: 9px;
  padding-left: 5px;
}

#input-area #msg-for {
  float: right;
  height: 30px;
  width: 85px;
}
#input-area #msg-for .full-btn {
  width: 100%;
  height: 100%;
  justify-content: space-around;
}
#input-chat {
  width: 65%;
  height: 30px;
}
#input-chat .emjoi-icon button {
  padding: 5px;
  background-color: transparent;
  margin-left: 5px;
}
#input-chat .emjoi-icon button img {
  width: 20px;
}
#input-chat .input-warpper {
  width: 100%;
}
#input-chat .chat-input {
  width: 100%;
  height: 29px;
  font-size: 14px;
  direction: rtl;
  border-radius: 5px;
  border: none;
  padding-right: 7px;
  background-color: white;
  -moz-appearance: textfield-multiline;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  overflow: auto;
}
#expand-chat {
}
#expand-chat .full-btn {
  width: 35px;
  height: 30px;
  border-radius: 2px;
}
#expand-chat .full-btn i {
  width: 25px;
  height: 4px;
  display: block;
  margin-top: 3px;
  background-color: rgb(54, 13, 0);
  margin-left: 5px;
  border-radius: 2px;
}
#expand-chat .full-btn i:first-child {
  margin-top: 1px;
}
#chat-icons {
  height: 100%;
  float: right;
  width: 5%;
  position: relative;
}
#chat-icons ul {
  position: absolute;
  bottom: 28px;
  width: 100%;
}
#chat-icons ul li {
  text-align: center;
}

#chat-icons ul li {
  opacity: 0.6;
}
#chat-icons ul .active {
  opacity: 1;
}
#chat-icons ul li:hover {
  opacity: 1;
}
#msg-area {
  width: 88%;
  height: inherit;
  float: right;
  direction: rtl;
  overflow-y: auto;
  padding: 0px 7px;
  background: url(../Res/background/paperCenter.jpg);
  border-top-right-radius: 36px;
  border-top-left-radius: 15px;
  -webkit-touch-callout: text; /* iOS Safari */
  -webkit-user-select: text; /* Safari */
  -khtml-user-select: text; /* Konqueror HTML */
  -moz-user-select: text; /* Firefox */
  -ms-user-select: text; /* Internet Explorer/Edge */
  user-select: text; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#msg-area .safe-url {
  color: #074b6c;
}
#msg-area .not-safe-url {
  color: #e30c0c;
}

.msg-unit {
  margin-right: 10px;
  height: auto;
  display: flex;
  overflow: hidden;
}
.msg-from {
  font-size: 13px;
  font-weight: bold;
  margin-left: 3px;
  display: flex;
  height: 17px;
}
.msg-body {
  float: none;
}
.msg-body p {
  display: block;
  word-wrap: break-word;
  font-size: 15px;
}
.msg-rank {
  display: block;
  width: 26px;
  background-size: auto 17px;
  background-repeat: no-repeat;
  background-position: center;
}
.msg-body .translated {
  color: #666;
  padding: 0px 5px;
  cursor: pointer;
}
.msg-body .translated:hover {
  text-decoration: underline;
}
.guild_msg {
  color: #074206;
}
.msg-time {
  font-size: 10px;
  color: #666;
  margin-right: 15px;
  display: flex;
  align-items: end;
}
#footer_bar li {
  /*cursor: pointer;*/
}

/* تسيق شكل السرائل*/

.for_Br .td_3 {
  width: 50%;
}
.msg-action {
  height: 100%;
}

.for_msg .td_6 .full-btn {
  width: 60px;
  float: none;
  margin: auto;
  height: 25px;
  margin-top: 4.5px;
  line-height: 25px;
}
.for_msg .left-content {
  height: 90%;
}
#p-provile-slider {
  float: right;
  width: 40px;
  height: 40px;
  margin-right: -44px;
  margin-top: 90px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background: url("../Res/background/sitenav-bar-bg.jpg");
}
#p-provile-slider img {
  width: 40px;
  height: 40px;
  transform: rotateZ(-90deg);
  transition: all 0.8s;
  pointer-events: initial;
}
#player_title {
  pointer-events: initial;
}
#player_guild {
  pointer-events: initial;
}
#city-profile-slider {
  width: 40px;
  height: 40px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: red;
  float: left;
  margin-left: -40px;
  position: absolute;
  margin-top: 85px;
  background: url("../Res/background/sitenav-bar-bg.jpg");
}
#city-profile-slider img {
  width: 40px;
  height: 40px;
  transform: rotateZ(90deg);
  transition: all 0.8s;
}
.close_BF_dialog_box {
  float: right !important;
  margin-right: 15px !important;
}
.camp_snap_shot {
  background-repeat: no-repeat !important;
  background-position: center !important;
  text-align: center;
  height: 160px;
}
.camp_snap_shot img {
  border-radius: 50%;
  width: 72%;
  margin-top: 6px;
}

#chat-to img {
  vertical-align: middle;
  margin-right: 15px;
}

.new-city-req-table {
  width: 100%;
  height: 78%;
  background-image: url(../Res/skins/palace.png);
  background-size: 100% 100%;
  overflow: auto;
}
.new-city-req-table .req_table {
  width: 86%;
  margin: auto;
  height: 98px;
  margin-top: 35px;
}

.new-city-footer .inputs {
  height: 100%;
}
.new-city-footer .inputs .input-wrapper {
  width: 60%;
  height: 100%;
}
.new-city-footer .inputs .input-wrapper input {
  padding: 4px;
  height: 20px;
  margin-top: 15px;
  display: block;
  float: right;
  text-align: center;
  width: 80%;
}
#unit_review .required-prom {
  width: 80%;
  margin: auto;
  margin-top: 5px;
}
#unit_review .required-prom label {
  font-size: 14px;
  margin-left: 15px;
}
#unit_review .required-prom span {
  font-size: 13px;
}

.new-city-footer .inputs button {
  line-height: 28px;
  width: 80px;
  background-color: transparent;
  display: block;
  margin: auto;
  margin-top: 15px;
}
.new-city-footer .inputs #new-city-confirm {
  width: 40%;
  height: 100%;
}
#player-city-list {
  width: 100%;
  margin-bottom: 5px;
}
#player-city-list ul {
  direction: rtl;
}
#player-city-list ul li {
  width: 110px;
  height: 36px;
  background-image: url(../Res/world/city-list/no-select.png);
  background-size: 75% 100%;
  overflow: auto;
  background-position: right;
  background-repeat: no-repeat;
}

#player-city-list ul .console {
  width: 65px;
  height: 27px;
  margin-top: 4.25px;
  display: block;
  margin-right: 6px;
  line-height: 27px;
  text-align: center;
  color: white;
  border-radius: 1px;
  background-image: url(../Res/world/city-list/no-console.png);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
#player-city-list ul .selected {
  background-image: url(../Res/world/city-list/selected.png);
  background-color: transparent;
  margin-right: 5px;
}

#player-city-list ul .console label {
  display: block;
  width: 80%;
  overflow: hidden;
  margin: auto;
  font-size: 13px;
  font-weight: bold;
}

#player-city-list ul li .nav-to-city {
  width: 30px;
  height: 22px;
  background-image: url(../Res/icons/navigate/nav-to-city.png);
  background-position: center;
  margin-top: 7px;
  background-repeat: no-repeat;
  background-color: transparent;
  display: none;
}

#unit_review .under-desc ul {
  direction: rtl;
  width: 80%;
  margin: auto;
  margin-top: 15px;
}

#unit_review .under-desc ul li label {
  color: #81511c;
  font-size: 14px;
  width: 80px;
  text-align: left;
  display: inline-block;
  margin-left: 5px;
}
#unit_review .under-desc ul li span {
  color: #370d00;
}

#unit_review .player-table-data td:first-child {
  color: #370d00;
  font-size: 14px;
}
#unit_review .player-table-data td:last-child {
  color: #81511c;
}
.hero_garrison_list .small {
  width: 40%;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  margin-top: 2px;
}
.spy_task_list .td_6 .full-btn {
  display: block;
  width: 60%;
  height: 20px;
  line-height: 20px;
  margin: auto;
  margin-top: 2px;
}

.emjoi {
  width: 18px;
  height: 18px;
  display: inline-block;
  background-size: 100% 100%;
  vertical-align: bottom;
}

.clickable-coords {
  color: #1943a5;
  cursor: pointer;
}
#dialg_box .camps .unit-with-rank {
  overflow: auto;
  height: 216px;
}

#dialg_box .camps .unit-with-rank .rank-list {
  background-image: url(../Res/icons/bg_patern.png);
  height: 100%;
}

#dialg_box .camps .unit-with-rank .rank-list .inner_nav {
  margin-left: 0px !important;
}

#dialg_box .camps .unit-with-rank .rank-list .inner_nav div {
  float: left;
  line-height: 35px;
  text-align: center;
  color: #766025;
  font-size: 14px;
}

#dialg_box .camps .unit-with-rank .rank-list .tr {
  height: 36px;
}
#dialg_box .camps .unit-with-rank .rank-list .tr div {
  line-height: 36px;
  font-size: 14px;
  font-weight: normal;
}
#dialg_box .camps .unit-with-rank .rank-list .tr .rank-image {
  height: 100%;
  width: 60px;
  margin: auto;
  background-size: auto 81%;
  background-position: center;
  background-repeat: no-repeat;
  float: none;
}

#WORLD_UNIT_DOMINANT .tr {
  height: 36.5px;
  line-height: 36.5px;
  font-size: 16px;
}

#province-border-small-map {
  position: absolute;
  display: block;
  top: 10px;
  left: 10px;
  width: 530px;
  height: 530px;
}

.for_msg .header{
    width: 100%;
    height: 30px;
}
.for_msg .header div{
    
    margin-left: 15px;
    font-size: 14px;
    line-height: 30px;
}
.for_msg .result-icon img{
    height: 60px;
    margin: auto;
    display: block;
}
.for_msg .result-icon{
    position: absolute;
    width: 25%;
    margin-top: -31px;
    left: 37.5%;
    height: 40px;
    background-image: url(../Res/panner/h_title_l.png) ,  url(../Res/panner/h_title_r.png) ;
    background-repeat: no-repeat , no-repeat;
    background-position: left , right;
    background-size: 50% 100%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
}
.for_msg .result-icon .win{
    color: white;
}
.for_msg .result-icon .def{
    color: #707070;
}
.for_Br .header .th{
    height: 30px;
    padding: 0px 12px;
}
.for_msg .battel-desc{
    direction: rtl;
    font-size: 14px;
    line-height: 30px;
    padding-right: 15px;
}
#battel_r_upper .resource-row{
    height: 30px;
    background-image: url(../Res/background/progresbar_up_l.png) , url(../Res/background/progresbar_up_r.png) , url(../Res/background/center_1.jpg);
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position: left , right , center;
    box-shadow: 2px 0px 4px 2px black;
    width: 98%;
    margin: auto;
}
#battel_r_upper .resource-row ul{
    overflow: auto;
}
 #battel_r_upper .resource-row li{
    float: left;
    width: 20%;
    text-align: center;
    color: greenyellow;
    font-size: 14px;
}
#battel_r_upper .resource-row li span{
        line-height: 27px;
}
#battel_r_upper .resource-row li img{
    height: 25px;
    vertical-align: middle;
}
#battel_r_upper{
    background-image: url(../Res/border/roof.png);
    background-position-x: center;
    background-size:99% 50%;
    background-repeat: no-repeat;
    height: 34%;
}
.battel-desc{
    height: 30px;
}
.prize-row ul{
    overflow: hidden;
    margin-top: 4px;
    float: left;
}
.prize-row{
    height: 28px;
    margin-top: 2px;
    padding-bottom: 4px;
    background-image:url(../Res/back-shape/freg-top-left.png),
        url(../Res/back-shape/freg-top-right.png),
        url(../Res/back-shape/freg-btm-left.png),
        url(../Res/back-shape/freg-btm-right.png),
        url(../Res/back-shape/top.png),
        url(../Res/back-shape/bottom.png), 
        url(../Res/back-shape/center.png) ;
    background-repeat: no-repeat , no-repeat ,no-repeat,no-repeat,repeat-x , repeat-x , repeat;
    background-position: left top ,top right , bottom left , bottom right, top center , bottom center , center;
    width: 98%;
    margin: auto;
    justify-content: space-between;
    
    
}
.prize-row p{
    height: 30px;
    line-height: 35px;
    float: right;
    margin-right: 10px;
    color: #81511c;
    font-size: 14px;
}
.prize-row li{
    float: left;
    margin-left: 5px;
    text-align: center;
    color: greenyellow;
    font-size: 14px;
}
.prize-row li .amount{
    margin-top: -15px;
    height: 15px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
    margin-right: 15px;
    width: 85%;
}
.prize-row li img{
    height: 25px;
    vertical-align: middle;
    padding: 2.5px;
    background-image: url(../Res/back-shape/rect.png);
    background-size: 100% 100%;
    box-sizing: border-box;
}
#battel-detail{
    width: 100%;
    height: 64%;
    overflow: auto;
    position: relative;
}
#battel-detail::after{
    
    content: "";
    width: 10px;
    margin: auto;
    background-color: red;
    position: absolute;
    right: 50%;
    margin-right: -5px;
    height: 100%;
    background-image: url(../Res/border/sprite_v.png);
    background-size: contain;
    
}
#battel-detail .your_side , #battel-detail .enemy_side{
    width: 50%;
    height: inherit;
    float: left ;
}
#battel-detail .enemy_side{
    background-repeat: no-repeat ;
    background-position: center;
    border-left: solid 5px transparent;
    box-sizing:border-box;
}
.for_Br .nicescroll-rails-vr{
    
    left: 50% !important;
    margin-left: -5px;
    opacity: 1;
    
}
.pre-amount{
    color: white;
}
.post-amount{
    color: #ff0d0c;
    font-weight: bold;
}
#battel-detail .your_side{
    background-repeat: no-repeat ;
    background-position: center;
    border-right: solid 5px white;
    box-sizing:border-box;
}
#battel-detail .hero{
    width: 30%;
    float: left;
    height: 100%;
}
#battel-detail .army{
    width: 70%;
    float: right;
    height: 100%;
}
#battel-detail .army ol li img{
    display: block;
    margin: auto;
    margin-top: 11px;
    max-width: 40px;
}
#battel-detail .army ol{
    height: 100%;
}
#battel-detail .army ol li {
    float: left ;
    width: 45px;
    text-align: center;
}
#battel-detail ul li{
    height: 80px;
}

#battel-detail ul .name{
    margin: 5px 10px;
    font-size: 13px;
    font-weight: bold;
}
#battel-detail ul li .image img{
    width: 91px;
    margin-left: 10px;
    background-image: url(../Res/back-shape/rect.png);
    background-size: 100% 100%;
    border-radius: 6px;
    padding: 4px
}
#battel-detail ul li .image .xp{
    font-size: 14px;
    font-weight: bolder;
    text-align: center;
    width: 110px;
    color: greenyellow;
    margin-top: -24px;
    width: 85%;
    text-align: right;
}

/*
  الاستيل  بتاع القايمة الى بختار منها موارد
*/
#select_from{
    width: 400px;
   /* background: url(../Res/style/paper-background.jpg);*/
    min-height: 450px;
    position: fixed;
    left: 50%;
    margin-left: -200px;
    top: 120px;
    z-index: 1000;
}
#select_from .close{
    width: 25px;
    margin-right: 10px;
    margin-top: -12px;
}
.select_item {
    width: 80%;
    margin: auto;
    height: 83%;
    margin-top: 29px;
    overflow: auto;
    max-height: 89%;
    padding-top: 10px;
    border: solid 12.5px transparent;
    background: url(../Res/style/paper-background.jpg);
    background-position:center;
    border-image: url(../Res/background/border_a.png);
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-slice: 30;
    border-image-repeat: round;
    box-sizing: border-box;
    border-radius: 28px;
    
}
.select_item li{
    min-height: 84px;
    background: url(../Res/icons/bg_patern.png);
    border-radius: 5px;
    margin: 4px 10px;
    height: auto;
    overflow: auto;
}
.select_item li .left{
    width: 44%;
    height: 100%;
    margin-left: 2%;
}
.select_item li .left .image img{
    width: 109px;
}
.select_item li .right{
    width: 54%;
    height: 100%;
    direction: rtl;
    
}
.select_item li .left .quant{
    background: url(../Res/icons/shopQuantityBG.png);
    width: 70px;
    height: 30px;
    position: relative;
    margin-left: 50px;
    color: white;
    font-weight: bold;
    line-height: 25px;
    text-align: center;
    background-size: 70px 30px;
    margin-bottom: -28px;
}
.select_item li .left .ar_title {
    font-size: 16px;
    color: rgb(54 , 13 , 0);
    margin-top: 5px;
    width: 150%;
}

.select_item .desc{
    
    text-align: right;
    margin: 5px 15px;
    font-size: 13px;
    margin-left: 0px;
    
}
.select_item .right .header .full-btn{
    width: 60px;
    margin: 5px 15px;
    margin-top: 15px;
}
/*______________________________HERO SELECT_______________________________*/
#select_hero{
    height: 350px;
    z-index: 10;
    width: 300px;
    right: 41px;
    display: none;
    overflow: auto;
}
.select_option{
    position: absolute;
    background-image: url(../Res/background/column.png) !important;
    padding: 5px;
    background-size: 100% 100%;
    display: none;
    overflow: auto;
    box-sizing: content-box;
}

#select_hero ol li{
    margin: 5px;
}
#select_hero ol li .part-1 {
    height: 65px;
    background-image: url("../Res/background/sitenav-bar-bg.jpg");
    background-size: 100% 100%;
    border-radius: 4px;
}
#select_hero ol li .part-1 .hero-data{
    height: 100%;
    width: 57%;
}
#select_hero ol li .part-1 .hero-data  .upper{
    height: 60px;
    line-height: 60px;
}
#select_hero ol li .part-1 .hero-data  .upper div:nth-child(2){
    line-height: 60px;
    background: transparent;
}
#select_hero ol li .part-1 .hero_lvl-box{
    font-size: 13px;    
}
#select_hero ol li .part-1 .hero_img{
    margin-top: 5px;  
}
#select_hero ol li .part-1 .hero-data{
    background: transparent; 
}

#selected_hero{
    /*cursor: pointer;*/
    background-color: green;
    border-radius: 3px;
    background-image: url("../Res/background/sitenav-bar-bg.jpg");
    background-size: 100% 100%;
    color: white
}


/*******************************************************************************/
.player_amount{
    position: absolute;
    margin-left: 15px;
}

.player_amount img{
    height: 30px;
    width: 60px;
}

.player_amount p{
    color: white;
    font-weight: bold;
    text-align: center;
    width: 80%;
    margin: auto;
    margin-top: -30px;
}


/*   tool  tip */
.tooltip-container{
    width: 300px;
    padding-bottom: 1px;
    background-color:rgba(0,0,0,0.9);
    border-radius: 10px;
    margin-left: 40px;
    margin-top: -25px;
    position: absolute;
    z-index: 20;
    color: white;
    pointer-events: none
}
.tooltip-container .header{
    height: 35px;
    padding-top: 5px;
   
}
.tooltip-container .header .mat_name{
    width: 50%;
    line-height: 35px;
    font-size: 20px;
    direction: rtl;
    margin-right: 15px;
    width: 64%;
    text-align: center;
}
.tooltip-container .header img {
    height: 18px;
    margin-top: 6px;
    margin-left: 5px;
}
.tooltip-container .header p{
    font-size: 16px;
    line-height: 35px;
    font-weight: bold;
    color: white;
    margin-left: 10px;
 
}

.tooltip-container .desc{
    direction: rtl;
    margin-bottom: 19px;
    margin-right: 15px;
    margin-left: 15px;
    font-size: 14px;
    text-align: right
}

#player_stat_bar {
    position: fixed;    
    z-index: 1000;
    top: 55px;
}
#player_stat_bar ul{
    height: 30px;
}
#player_stat_bar ul li {
    float: left;
    margin-left: 10px;
}
#player_stat_bar ul li .duration {
    direction: ltr;
    width: 30px;
    overflow: hidden;
    height: 15px;
    color: white;
}
#player_stat_bar ul li img{
    height: 30px;
    width: 30px;
    border-radius: 5px;
}
.for_Ranks .left-content{
    height: 90%;
}
.right-content-footer .nav_icon img{
    float: left;
    height: 22px;
    margin-left: 5px;
    margin-top: 3px;
}
.right-content-footer .nav_icon h1{
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    min-width: 72px;
   
}

.right-content-footer .full-btn{
    padding: 0px 5px;
}
.right-content-footer .full-btn-2x{
    padding: 0px 12px;
}
.right-content-footer input{
    height: 22px;
}
#nav_input  input{
    width: 50px;
}
#nav_search .full-btn{
    padding: 0px 10px;
}
#nav_search input{
    height: 22px;
    width: 100px;
}
#search_select select{
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 20px;
}
.for_Ranks .tr{
    height: 33.6px;
    font-size: 16px;
    line-height: 33.6px;
}
.for_Ranks .tr .name{
    line-height: 18px;
    text-align: left;
    width: 100%;
    height: 18px;
    font-size: 14px;
}
.RankRows .tr .rank-title, a.for_Ranks .tr .rank-title{
    height: 20px;
    float: right;
    margin-top: -5px;
    position: relative;
    transition: all 0.6s linear;
    text-overflow: clip;
}
.RankRows .tr .rank-title:hover, .for_Ranks .tr .rank-title:hover{
    z-index: 2;
    transform: scale(1.2);
}
.RankRows .tr .rank-title:first-child, .for_Ranks .tr .rank-title:first-child{
    margin-right: 0px !important;
}
#select_from .container{
    
    width: 85%;
    margin: auto;
    border: 12.5px solid transparent;
    border-image: url(../Res/background/border_a.png);
    border-image-slice: 30;
    border-image-repeat: round;
    margin-top: 35px;
    padding-bottom: 10px;

}
#select_from .container::before{
    width: 85%;
    height: 82%;
    content: "";
    position: absolute;
    background: url(../Res/style/paper-background.jpg);
    z-index: -1;
}
#two_buttons{
    width: 100%;
    height: 50px;
    background-color: red;
    margin: auto;
    margin-top: 10px;
    width: 80%;
    padding: 10px 20px;
    background: url(../Res/icons/bg_patern.png);
    border-radius: 7px;
    
}
#two_buttons .full-btn{
    height: 100%;
    width: 45%;
}
#sent_to , #sent_from{
    
    width: 80%;
    margin: auto;
    background: url(../Res/icons/bg_patern.png);
    padding: 10px 20px;
    margin-top: 7px;
    border-radius: 7px;
}
#sent_from .tr:nth-child(2n+1){
    background-color: #fcf7e5;
}
#sent_to .td_1  ,#sent_from .td_1{
    width: 20%;
}
#sent_to .td_2  ,#sent_from .td_2{
    width: 80%;
}
#sent_to .tr , #sent_from .tr{
    height: 30px;
    line-height: 30px;
}

.guild_creat .row-one{
    overflow: auto;
    height: 150px ; 
    width: 80%;
    margin: auto;
    border: 12.5px solid transparent;
    
    border-image: url(../Res/background/border_a.png);
    border-bottom-width: 0px;
    border-image-slice: 30;
    border-image-repeat: round;
    border-image-outset: 10px;
    background: url(../Res/style/paper-background.jpg);
  
    padding-bottom: 5px;
}

.guild_creat .row-one .left , .guild_creat .row-one .right{
    width: 48%;
    height: 100%;
    background: url(../Res/icons/bg_patern.png);
}
.guild_creat .row-three{
    padding: 10px 0px;
}
.guild_creat .row-three .confim-btn{
    width: 140px;
    margin: auto;
}
.guild_slogan{
    width: 100px;
    height: 100px;
}

.guild_creat .row-one .left .guild_slogan{
    margin: auto;
    margin-top: 25px;
}
.guild_creat .row-one .right img{
    height: 30px;
}
.guild_creat .row-one .right .nav_icon{
    width: 60%;
    margin: auto;
    margin-top: 14px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
}

.guild_slogan img{
    position: absolute;
}
.guild_creat .row-one .right h1{
    display: inline-table
}
.guild_creat .row-two{
    width: 80%;
    height: 35px;
    background-color: white;
    margin: auto;
    padding-top: 10px;
    border-radius: 5px;
    
    border: 12.5px solid transparent;
    
    border-image: url(../Res/background/border_a.png);
    border-top-width: 0px;
    border-image-slice: 30;
    border-image-repeat: round;
    border-image-outset: 10px
}
.guild_creat .row-two input{
    width: 50%;
    height: 25px;
    text-align: center;
    padding: 5px;
    display: block;
    margin: auto;
    font-size: 18px;
    
}


/*    dialog box for guild */


#guild-guild_data .left-content .upper .table , #guild-guild_data .left-content .upper{
    overflow: auto;
}

 #guild-guild_data .left-content .upper{
     height: 52%;
}
#guild-guild_data .left-content .upper .table .t-row:first-child{
    width: 46%;
    float: left;
    position: relative;
    margin-top: 13px;
    height: 130px
}
#guild-guild_data .left-content .upper .table .t-row:first-child .t-d{
    overflow: auto;
    height: 100px;
    width: 100px;
    margin: auto;
    margin-top: 15px;
}
#guild-guild_data .left-content .upper .table .t-row:nth-child(2){
    width: 54%;
    float: right;
    margin-top: 5px
}
#guild-guild_data .left-content .upper .table .t-row:nth-child(2) .t-d{
    font-size: 16px;
    line-height: 25px;
    border-bottom: 2px solid rgba(0,0,0,0.3);
}

#guild-guild_data .left-content .upper .table .t-row:nth-child(4) h1{
    width: 80%;
    font-size: 16px;
    line-height: 35px;
    background-image: url("../Res/background/profile_name.png");
    clear: both;
    height: 35px;
    margin: auto;
    background-size: 100% 100%;
    color: white;
    text-align: center;
    margin-top: 6px;
}
#guild-guild_data .left-content .upper .table .t-row .t-r{
    background-image: url("../Res/background/profile_name.png");
    background-size: 100% 100%;
    overflow: auto;
    color: white;
    margin-bottom: 3px;
}
#guild-guild_data .left-content .upper .table .t-row:nth-child(2) .t-d:nth-child(2n+1){
    margin-right: 8px;
    float: right;
}
#guild-guild_data .left-content .upper .table .t-row:nth-child(2) .t-d:nth-child(2n){
    text-align: center; 
    overflow: hidden;
    width: auto;
}
.guild .nav_bar .nav_icon img{
    float: right;
    margin-right: 15px;
}
.for_guild .left-content{
    width: 35%;
    margin-bottom: -40px;
}
.for_guild .right-content{
    width: 65%;
    margin-bottom: -40px;
}
.for_guild .right-content .full{
    border-left: 7px solid;

    box-sizing: border-box;
    -webkit-border-image: -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; 
    -webkit-border-image: -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image: -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; 
    -o-border-image: -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; 
    border-image: linear-gradient(to right, #fbf7e5 , rgb(219 ,192 ,127) , #fbf7e5) 1 100%; 
}
.for_guild .right-content #leftofright{
    width: 60%;
    height: 100%;
}
.for_guild .right-content #rightofright{
    width: 40%;
    height: 100%;
    background: url(../Res/icons/bg_patern.png);
}
#leftofright #guild_domain img{
    width: 100%;
}
#leftofright #guild_domain{
      height: 100%;
}
.for_guild .upper table{
    background: url(../Res/icons/bg_patern.png);
}

.for_guild .upper table tr td{
    padding: 5px 1px;
    font-size: 16px;
    border-bottom: 2px solid rgba(0 ,0 ,0 ,0.3);
}
.for_guild .upper table tr td:first-child{
    width: 15%;
}
.for_guild .upper table tr td:nth-child{
    width: 15%;
}
.for_guild .upper table tr:last-child td{
    text-align: center;
    line-height: 34px;
}
.for_guild .upper table tr:last-child td h1{
    background-image: url("../Res/background/profile_name.png");
    background-size: 75% 100%;
    background-repeat: no-repeat;
    background-position:center;
    color: white;
    text-shadow: 2px 4px 2px #000;
}
.for_guild .down{
    height: 48%;
    background-image: url(../Res/icons/left-content.png);
    background-size: 100% 100%;
}
.for_guild .upper ul{
    height: 151px;
}
.for_guild .down .th  .td_1 , .for_guild .upper .th  .td_1{
    width: 100%;
    text-align: center
}
.for_guild .down p{
    height: 168px;
    background-image: url(../Res/icons/left-content.png);
    background-size: 100% 100%;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    
}
#rightofright .td{
    width: 50%;
    text-align: center
}
#rightofright .selected{
    background-image: url(../Res/btns/seleced-inner-nav.png);
    background-repeat: no-repeat;
    background-color: transparent;
    color: black;
    background-size: 100% 96%;
}
#rightofright .th{
    height: 30px;
    line-height: 30px;
}
#rightofright .tr{
    height: 27.7px;
    line-height: 27px;
}
#rightofright button{
    height: 25px;
    margin-top: 1px;
    line-height: 25px;
    width: 63px;
    float: right;
    margin-right: 10px;
}
#guild_enemy .enemy{
    color: #ef4416;
}
#guild_allaies .friend{
    color: #1751b5;
}

#guild_lead{
    display: inline-table;
    width: 115px;
    margin-top: 25px;
}
#TeamAdmins{
    display: inline-table;
    width: 115px;
    margin-top: 12px;
}
.for_guild .right-content-footer{
    clear: both;
    z-index: 10000;
    position: relative;
    height: 40px;
}
.for_guild .right-content .left-content .tr{
    height: 33px;
    line-height: 32px;
    font-size: 14px;
    
}
.up_guild{
    
    background: url(../Res/skins/desc-rect.png);
        background-position-y: 0%;
        background-size: auto;
    background-position-y: -18px;
    background-size: 100% 106%;
}

.up_guild .left-content , .up_guild .right-content{
    height: 55%;
}
.up_guild .left-content {
    height: 55%;
    margin-bottom: 0px;
    background: none;
}
.up_guild .right-content-footer{
    height: 45%;
    overflow: auto;
    background: none;
    display: flex;
    justify-content: space-around
    
}
.up_guild .right-content-footer .right, .up_guild .right-content-footer .left{
    height: 100%;
    overflow: hidden;
    background: none;
    
}
.up_guild .right-content-footer  .right{
    display: flex;
    align-items: center;
}
.up_guild .right-content-footer  .left{
}

.up_guild .upper .header-2{
    text-align: center;
    font-size: 16px;
}
.up_guild .upper{
    text-align: center;
}
.up_guild .upper img{
    width: 120px;
    text-align: center;
}
#upgrade_guild{
    width: 70%;
    margin: auto;
    height: 45px;
    line-height: 45px;
    background-image: url("../Res/background/profile_name.png");
    background-size: 100% 100%;
    color: white;
    text-shadow: 0px 1px 1px black;
}
.for_guild .right-content .left table th{
    display: block
}
.for_guild .right-content .left{
    width: 70%;
}
.for_guild .right-content .right .header-2{
    margin-top: 30px;
}
.for_guild .right-content .right p{
    text-align: right;
    margin-right: 15px;
}
.for_guild .right-content .right{
    width: 30%;
}
.for_guild .right-content .left table ,.for_guild .right-content-footer  .table{
    background-color: white;
    width: 350px;
    height: 100px;
    margin-top: 30px;
    margin-left: 10px;
    line-height: 30px;
    font-size: 16px;
}
.for_guild .right-content-footer  .table{
    background: url(../Res/icons/header_resources4.png);
    width: 600px;
    background-size: 100% 100%;
    height: 86px;
    color: white;
}
.for_guild .right-content .left table img ,.for_guild .right-content-footer  table img{
    height: 25px;
    width: 30px;
    display: block;
    margin-left: 5.5px;
}
.for_guild .right-content-footer  .table .td {
    text-align: center;
    vertical-align: bottom;
    padding-bottom: 6px;
    text-shadow: 0 0 1px #000;
    float: left;
    margin-top: 44px;
    
}
.for_guild .right-content .left table td:nth-child(2n+1) {
    width: 40px;
}
.up_with_mat .full-btn img{
    height: 20px;
    vertical-align: text-bottom;
}
.up_with_mat .full-btn{
    width: 80px;
    background: url("../Res/background/btn.png");
    background-size: 100% 100%;
    background-size: 100% 100%;
    line-height: 46px;
    width: 100px;
    color: white;
    text-shadow: 0 0 1px #000;
}
.up_with_mat  h1{
    font-size: 16px;
    text-align: center;
    line-height: 30px;
}
.up_with_mat {
    height: 30px;
    margin-top: 30px;
}
.right-content-footer ol{
    margin-left: 90px;
    margin-top: 11px;
    overflow: hidden;
    width: 77%;
}
.right-content-footer ol li{
    width: 72.6px;
    float: left;
    height: 34px;
    
}
.right-content-footer ol li input{
    width: 80%;
    border: none;
    margin: auto;
    display: block;
    margin: 5px 0px
}
.right-content-footer .right , .right-content-footer .left{
    height: 30px;
    background-color: transparent
}
.right-content-footer .right .full-btn{
    padding: 10px 7px;
    
}
#rightofright .th{
    /*cursor: pointer;*/
}
.for_guild .left-content .tr  .td_7 button{
    
    width: 45%;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
    margin-top: 3.5px;
    margin-right: 2.5%;
    
}
.for_msg .tr{
    height: 33.1px;
    line-height: 33.1px;
}
.for_msg .upper{
    width: 100%;
    height: 40px;
    background-size: cover;
    background-position: center;
}
#msg_income_detail .left-content , 
#battel-report-msg .left-content , 
#msg_diff_detail .left-content , 
#msg_income_detail .left-content {
    
   background: url(../Res/skins/desc-rect.png);
    background-position-y: -18px;
    background-size: 100% 106%;
    
}
.for_msg .msg_body{
    width: 100%;
    height: 311px;
    background-size: cover;
    background-position: center;
    overflow-y: auto
}
.for_msg .left-content .upper ol li{
    width: 25%;
    background-image: url("../Res/background/bar_L.png") ,url("../Res/background/bar_R.png") , url("../Res/background/bar_center.png");
    background-repeat: no-repeat ,no-repeat , repeat-x;
    background-position: left , right , center;
    background-size: auto 100%;
    height: 100%;
    float: right;
    margin-right: 14px;
    margin-top: 5px;
}
.for_msg .left-content .upper ol li span{
    height: 30px;
    display: inline-block;
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    float: right;
    color: white;
    overflow: hidden;
}
.for_msg .left-content .upper ol li span:first-child{
    width: 72px;
    font-size: 18px;
    margin-left: 10px;
    color: black;
    font-weight: bold
}
.for_msg .left-content .upper ol li:nth-child(2){
    width: 350px;
}
.msg_body p{
    padding-top: 10px;
    margin: 0px 20px;
    text-align: right;
}
.for_msg .left-content .upper ol{
    overflow: auto;
}
.for_msg .left-content .upper ol li input{
    height: 24px;
    border: none;
    text-align: right;
    padding-right: 10px;
    box-sizing: border-box;
    font-size: 14px;
    direction: rtl;
    margin-top: 4px;
}

.msg_body textarea{
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
    padding: 8px;
    box-sizing: border-box; 
    text-align: right;
    font-size: 15px;
    width: 97%;
    margin: auto;
    display: block;
}

.search_res {

    width: 285px;
    margin-left: 12px;
    min-height: 42px;
    position: absolute;
    margin-top: 5px;
    padding: 5px;
    border-radius: 5px;
    padding: 6px;
    display: none;
    border: solid 10px transparent;
   
    border-image: url(../Res/border/win_sprite.png) 20 round;
    background: url(../Res/icons/bg_patern.png);
    
}
.search_res ul li{
    border-radius: 3px;
    background: url(../Res/icons/bg_patern.png);
    height:45px;
    clear: both;
    background-image: url("../Res/background/profile_name.png");
    background-size: 90% 90%;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    /*cursor: pointer;*/
}
.search_res ul li:hover{
    
    background-image: url("../Res/background/profile_name.png") ,  url(../Res/background/dialog_bg.jpg);
    background-repeat: no-repeat , repeat;
    
    
}
.search_res ul li img {
    height: 21px;
    border-radius: 3px;
    margin: 10px 30px;
    padding: 2px;
    background-image: url(../Res/back-shape/rect.png);
    background-size: 100% 100%;
}
#g-search_result ul li img{
    position: absolute;
    margin: 0px;
    background: none;
}
.search_res ul li .image{
    margin: 10px 30px;
}
.search_res ul li h1{
    font-size: 16px;
    line-height: 45px;
    margin-right: 5px;
    max-width: 37%;
}
.search_res ul li h2{
    line-height: 45px;
}

#sub_quest .right_mark .img ,#quest_pack .right_mark .img{
    background-image: url(../Res/btns/done.png);
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
    display: block;
    height: 100%;
}
#quest_pack .tr span, #sub_quest .tr span{
    display: block;
}
#quest_pack .tr, #sub_quest .tr{
    justify-content: center;
}
#quest_pack .tr .right_mark, #sub_quest .tr .right_mark{
    display: block;
    text-align: center;
    height: 18px;
    width: 20%;
    border-radius: 3px;
    display: block;
}

#quest_pack .tr span:first-child, #sub_quest .tr span:first-child{
    min-width: 80%;
    height: 100%;
}
.for_report #reports_list .tr , #reports_list_BF .tr{
    text-align: center;
    font-size: 14px;
    height: 28.6px;
    line-height: 28.6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
}
.for_report #reports_list .selected , #reports_list_BF .selected{
    background-image: url(../Res/selelct/select-row-3x.png);
    background-size: 100% 100%;
    color: white;
    background-color: transparent;
    
}
.for_report #reports_list .has_battel , #reports_list_BF .has_battel{
    cursor: pointer
}

.hero-equip .hero-name .header-2{
   width: 80%;
    margin: auto;
    margin-bottom: -5px;
    text-align: center;
    color: white;
    line-height: 30px; 
    margin-top: -2px;
}
#confirm-player-new-img {
    
    width: 40px;
    background-image: url("../Res/background/sitenav-bar-bg.jpg");

    background-size: 100% 100%;
    border-radius: 5px;
    
    margin-top: 2px;
    margin-left: 69px;
    text-align: center
}
.hero_ultra_p {
    width: 132px;
    background-image: url("../Res/background/sitenav-bar-bg.jpg");

    background-size: 100% 100%;
    border-radius: 5px;
    color: white;
    line-height: 22px;
    font-size: 14px;
    margin-top: 4px;
    margin-left: 25px;
    text-align: center
}
.matrial-alert #alert-title{
    
    margin-top: -34px;
    
}
.matrial-alert #alert_head .close-alert_container{
    
    margin-top: -51px;
    
}
.right_army .army_type{
    width: 100% !important;
}

#city-spy-report .paragraph{
    font-size: 14px;
    width: 94%;
    margin: auto;
    text-align: right;
    margin-top: 15px;
}



#WORLD_UNIT_DOMINANT .open-world-unit{
    width: 50%;
    height: 26px;
    margin-top: 2px;
}

#WorldCity {
  width: 100%;
  height: 60px;
  /*cursor: pointer;*/
  background-color: transparent;
}
#WorldCity[data-view="city"] {
  background-image: url(../Res/icons/navigate/enter_world.png);
  background-size: 100px auto;
  background-repeat: no-repeat;
}
#WorldCity[data-view="city"]:hover {
  background-position-y: -60.5px;
}
#WorldCity[data-view="city"]:active {
  background-position-y: -121px;
}
#WorldCity[data-view="city"]:disabled {
  background-position-y: -181px;
}
#WorldCity[data-view="world"] {
  background-image: url(../Res/icons/navigate/enter_city.png);
  background-size: 100px auto;
  background-repeat: no-repeat;
}
#WorldCity[data-view="world"]:hover {
  background-position-y: -60.5px;
}
#WorldCity[data-view="world"]:active {
  background-position-y: -121px;
}
#WorldCity[data-view="world"]:disabled {
  background-position-y: -181px;
}
#city_col {
  position: fixed;
  z-index: 10;
  right: 5px;
  bottom: 250px;
  width: 100px;
}
#helper-choose {
  margin-top: 48.5px;
}
#helper-choose li {
  width: 90%;
  background: url(../Res/icons/bg_patern.png);
  height: 70px;
  border-radius: 5px;
  margin: 5px 5%;

  /*cursor: pointer;*/
}
#helper-choose .selected {
  background-image: url(../Res/skins/table-rect.png);
  background-size: 100% 100%;
}
#helper-choose li .image {
  width: 102px;
  float: left;
  padding: 12px 3px;
}
#helper-choose li .image img {
  border-radius: 5px;
  width: 80%;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 4px;
  display: block;
  margin: auto;
}
#helper-choose li h1 {
  float: right;
  width: 84px;
  line-height: 60px;
  margin: 5px;
  text-align: center;
}
#helper-desc {
  margin-top: 100px;
  font-size: 16px;
  text-align: center;
}
#confirmChoose,
#changeChoose {
  margin: auto;
  margin-top: 80px;
  width: 124px;
}

#confirmChoose button,
#changeChoose button {
  display: block;
  width: 100%;
}
#choosen-helper .header {
  margin-top: 30px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  text-align: center;
}
#choosen-helper .image img {
  display: block;
  margin: auto;
  margin-top: 15px;
  border-radius: 8px;
  padding: 4px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
}

#wounded_list {
  width: 398px;
  margin: auto;
  background: url(../Res/skins/desc-rect.png);
  background-size: 100% 100%;
  margin-top: 5px;
  padding-top: 24px;
  padding-bottom: 12px;
  border-radius: 7px;
}
#wounded_list li {
  height: 42px;
  width: 77%;
  margin: auto;
  border-bottom: solid 1px #b18f5f;
  border-radius: 5px;
}
#wounded_list li:hover {
  background-color: #b18f5f;
}
#wounded_list li:last-child {
  border: none;
}
#wounded_list li div {
  float: left;
  height: 100%;
  line-height: 42px;
}
#wounded_list li .image img {
  vertical-align: middle;
}
#wounded_list li .check_box {
  width: 40px;
  text-align: center;
}
#wounded_list li .image {
  width: 60px;
  text-align: center;
}
#wounded_list li .amount {
  width: 100px;
  text-align: center;
  color: #8b4513;
  font-weight: bold;
  font-size: 16px;
  line-height: 42px;
}
#wounded_list li .cure {
  width: 145px;
}
#wounded_list li .cure button {
  width: 70px;
  margin-top: 7px;
}
.tr .only_num {
  width: 50%;
  height: 100%;
  border: none;
  text-align: center;
}
#expan-city {
  width: 150px;
  margin: auto;
  margin-top: 12px;
}
#bar_list {
  clear: both;
  height: 275px;
}
#city-garrison-list {
  height: 235px;
}
#city-trade-center {
  background: url(../Res/skins/desc-rect.png);
  background-position-y: -18px;
  background-size: 100% 106%;
  background-repeat: no-repeat;
}

#bar_list li div,
#city-garrison-list li div,
#trade-list div {
  display: inline-block;
  width: 24%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
}
#trade-list .amount {
  margin: auto;
  float: none;
}
#bar_list li div .full-btn,
#city-garrison-list li div .full-btn,
#trade-list div .full-btn {
  width: 50px;
  margin: auto;
  height: 25px;
  line-height: 25px;
  margin-top: 2.5px;
}
#city-garrison-list .tr {
  width: auto;
}
#bar_list li,
#city-garrison-list li,
#trade-list li {
  margin: 5px 2%;
  background: url(../Res/icons/bg_patern.png);
  border-radius: 3px;
  height: 30px;
}
#city-garrison-list li,
#trade-list li {
  margin: 5px 2%;
  background: url(../Res/icons/bg_patern.png);
  border-radius: 3px;
  height: 29px;
  width: auto;
}
#city-garrison-list li:last-child,
#trade-list:last-child {
  margin-bottom: 0px;
}
#city-garrison-list li .image,
#trade-list .image {
  width: 54px;
  height: 27px;
  margin-top: 1.5px;
  float: left;
}
#city-garrison-list li .name,
#trade-list .name {
  width: 79px;
  height: 27px;
  margin-top: 1.5px;
  float: right;
  line-height: 27px;
}
#city-garrison-list li .image .wrapper,
#trade-list .image .wrapper {
  width: 54px;
  height: 27px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: auto 100%;
}
#city-garrison-list li .image .wrapper .hero-avatar,
#trade-list .image .wrapper .item-image {
  width: 50px;
  height: 23px;
  margin: 2px;
  background-size: auto 100%;
}
#city-garrison-list li .hero-lvl {
  width: 37px;
  height: 20px;
  margin: auto;
  margin-top: 5px;
  background-image: url("../Res/hero/icon_Lv.png");
  background-size: 100% 100%;
  line-height: 20px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  display: block;
  float: none;
}
#city-garrison-list .selected {
  background-image: url(../Res/selelct/select-row-4x.png);
  color: white;
  background-size: 100% 110%;
  background-position: center;
  margin: 2px 2%;
  padding-top: 2px;
  padding-bottom: 3px;
}
#city-garrison-list li .full-btn-3x,
#trade-list .full-btn-3x {
  width: 40%;
  height: 25px;
  margin: auto;
  margin-top: 2.5px;
  line-height: 25px;
  float: none;
  background-color: transparent;
  font-size: 13px;
}
#city-garrison-footer,
.cell-3-footer {
  height: 33.5px;
  width: 98%;
  margin: auto;
  margin-top: 3px;
}
#city-garrison-footer .right,
.cell-3-footer .right {
  float: right;
  height: 100%;
  width: 25%;
}
#city-garrison-footer .right .wrapper,
.cell-3-footer .right .wrapper {
  width: 55%;
  margin: auto;
  height: 100%;
}
#city-garrison-footer .middle .wrapper,
.cell-3-footer .middle .wrapper {
  width: 116px;
  margin: auto;
  height: 100%;
}
#city-garrison-footer .right .wrapper button,
.cell-3-footer .right .wrapper button {
  width: 35%;
  height: 80%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: 100% 100%;
  border-radius: 50%;
  margin-top: 3px;
}
#city-garrison-footer .middle,
.cell-3-footer .middle {
  float: right;
  height: 100%;
  width: 50%;
}

#city-garrison-footer .middle label,
.cell-3-footer .middle label {
  line-height: 33px;
  margin: 0px 8px;
  font-size: 13px;
  width: 50px;
  float: left;
  display: block;
  text-align: center;
  color: white;
  font-weight: bold;
}
#city-garrison-footer .middle button,
.cell-3-footer .middle button {
  height: 20px;
  width: 25px;
  vertical-align: middle;
  background-color: transparent;
  float: left;
  margin-top: 7px;
}
#city-garrison-footer .left,
.cell-3-footer .left {
  float: left;
  height: 100%;
  width: 25%;
}
#city-garrison-footer .left button,
.cell-3-footer .left button {
  width: 80px;
  height: 25px;
  background-color: transparent;
  display: block;
  margin: auto;
  margin-top: 4.5px;
}
#job-typs tr td img {
  width: 132px;
  border-radius: 5px;
}
.for_city_jop .left-content {
  width: 284px;
}
.for_city_jop .right-content {
  width: 521px;
  float: right;
}
.for_city_jop .right-content::before {
  right: 557px !important ;
}
#job-typs {
  margin-right: 13px;
  margin-top: 21px;
}

#job-typs tr td {
  text-align: center;
  background-image: url(../Res/icons/left-content.png);
  background-size: 100% 100%;
}
#job-typs tr .select-layer {
  padding: 16px 13px;
}
#job-typs tr .fram {
  background: url(../Res/skins/desc-rect.png);
  background-size: 100% 100%;
  padding-top: 4px;
  padding-bottom: 4px;
}
#job-typs tr .selected {
  background-image: url(../Res/background/selected-squer.png);
  background-size: 100% 100%;
}
#job-typs tr .over-text h2 {
  background-image: url("../Res/selelct/select-row.png");
  width: 60px;
  margin: auto;
  background-size: 60px 20px;
  font-size: 14px;
  line-height: 20px;
}
#job-typs tr .over-text {
  position: relative;
  height: 84px;
  color: white;
  cursor: pointer;
  background-size: auto 100%;
  background-position: center;
  margin: 0px 4px;
  border-radius: 3px;
}
#pay-for-jop {
  width: 254px;
  float: left;
  height: 100%;
}
#pay-for-jop .req_table {
  height: 93px;
  margin: inherit;
  margin-left: 15px;
  width: 224px;
}
#pay-for-jop #jop-title {
  margin: 10px 0 5px 15px;
  font-size: 16px;
  line-height: 25px;
  text-align: center;
}
#pay-for-jop .header-2 {
  text-align: center;
  margin-top: 47px;
  margin-bottom: 15px;
}

#jop_desc {
  width: 256px;
  float: right;
  height: 100%;
}
#jop-num-input {
  text-align: center;
  overflow: auto;
}
#jop-num-input .number-arrow-wrapper {
  margin-left: -26px;
  margin-top: 5px;
}

#jop-num-input span {
  font-size: 15px;
  line-height: 35px;
}
#jop-num-input input {
  width: 80px;
  height: 25px;
  padding-right: 15px;
  margin: 5px 5px 5px 50px;
}
#jop_desc p {
  margin-top: 15px;
  height: 185px;
  font-size: 14px;
  overflow: hidden;
}
#hire-btn {
  width: 100px;
  margin: auto;
  margin-top: 12px;
}
#hire-btn button {
  width: 100%;
}
#FIRE-EMPLOYEE button {
  width: 30%;
  margin: auto;
  margin-top: 10px;
}

#change-city-pro-rate {
  width: 45%;
  height: 26px;
  margin-top: 3.5px;
  background-color: transparent;
  font-size: 14px;
}

.notinf_green,
.notinf_red {
  width: 25px;
  border-radius: 50%;
  position: absolute;
  color: white;
  line-height: 25px;
  text-align: center;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.notinf_green {
  margin-top: -70px;
  background-image: url(../Res/background/notif_green.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.notinf_red {
  margin-top: -44px;
  background-image: url(../Res/background/notif_red.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.battel_hero_back,
.show_hero_back {
  margin: auto;
  width: 60%;
  line-height: 20px;
  font-size: 14px;
  margin-top: 2px;
}

#ToggelSound[data-state="on"] {
}
#ToggelSound[data-state="off"] {
}

.right-content-footer .budget,
.right-content-footer .buttons {
  height: 100%;
}
.right-content-footer .buttons ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: row-reverse;
  height: 100%;
}
#mall-matrial .right-content-footer .buttons ul,
#matrial-player .right-content-footer .buttons ul {
  height: 97% !important;
}
.close_dialog {
  margin-right: 15px;
  float: right !important;
}
#msg-navigator {
  height: 100%;
  width: 66px;
  line-height: 28px;
  text-align: center;
  font-size: 16px;
}
#loader-layer {
  background: url("../Res/style/log-in-bg.jpg");
  height: 100%;
  position: fixed;
  height: 100%;
  background-position: center;
  background-size: cover;
  z-index: 199;
  top: 0px;
  width: 100%;
  background-repeat: no-repeat;
  background-color: #342216;
}

#loader-layer .logo img {
  width: 320px;
}
#loader-layer .logo {
  width: 320px;
  margin: auto;
  margin-top: 200px;
}

#loader-grab {
  width: 85%;
  height: 100px;
  background-image:
    url(../Res/bars/prog_floor.png), url(../Res/bars/progresbar_bg.png);
  background-repeat: repeat-x, no-repeat;
  background-position: center, center;
  background-size:
    auto 30%,
    contain;
  margin: auto;
  margin-top: 192px;
}
#load-bar div {
  background-image: url(../Res/bars/green.png);
  background-position: center;
  background-size: auto 75%;
  background-repeat: repeat-x;
  width: 0px;
  height: 100%;
}
#load-bar {
  width: 86%;
  margin-left: 7%;
  margin-top: -67px;
  height: 34px;
  /*background-image:url(../Res/bars/prog_left.png),url(../Res/bars/prog_right.png);
    background-repeat:no-repeat , no-repeat;
    background-position:center left , center right;
    background-size: contain ;*/
}
#load-bar::after {
  content: " ";
  width: 100%;
  margin-top: -34px;
  height: 34px;
  background-image:
    url(../Res/bars/prog_left.png), url(../Res/bars/prog_right.png);
  background-repeat: no-repeat, no-repeat;
  background-position:
    center left,
    center right;
  background-size: contain;
  display: block;
}
#load-percent {
  width: 216px;
  color: white;
  margin: auto;
  text-align: center;
  margin-top: 40px;
  line-height: 50px;
  font-size: 62px;
  font-family: monospace;
}

#rank-review {
  height: 354px;
  width: 78%;
  margin: auto;
  margin-top: 40px;
  border: 12.5px solid transparent;
  border-image: url(../Res/background/border_a.png);
  border-image-slice: 30;
  border-image-repeat: round;
}
#rank-review .upper {
  background: url(../Res/icons/bg_patern.png);

  padding: 0px 10px;
}
#rank-review .down p {
  text-align: center;
  font-size: 16px;
  padding: 15px;
  margin-top: 10px;
  height: 78px;
  padding-bottom: 5px;
}
#rank-review .table {
  overflow: auto;
}
#rank-review .table .left {
  width: 40%;
  height: 100px;
}
#rank-review .table .right {
  width: 60%;
  float: right;
  height: 100%;
  color: white;
  line-height: 22px;
  font-size: 16px;
}
#rank-review .table .right label:first-child {
  display: inline-block;
  width: 60%;
  text-align: center;
}

#send-guild-req button {
  width: 40%;
  margin: auto;
  display: block;
}
#rank-review .down textarea {
  resize: none;
  display: block;
  width: 100%;
  height: 77px;
}
#rank-review .down {
  background: url(../Res/background/dialog_bg.jpg) 90% 90%;

  height: 170px;
}
#rank-review table {
  width: 90%;
  margin: auto;
  font-size: 15px;
  color: white;
  text-shadow: 0 0 1.3px #000;
}
.tr .td_7 button {
  margin: auto;
  width: 70%;
  line-height: 26px;
  margin-top: 3px;
}

.drop-list {
  position: absolute;
  width: 150px;
  height: auto;
  margin-left: -65px;
  margin-top: 5px;
  border: solid 10px transparent;
  border-image: url(../Res/border/win_sprite.png) 20 round;
  z-index: 100000;
  display: none;
}
.drop-list ul {
  background: url(../Res/background/dialog_bg.jpg) 90% 90%;
  height: 100%;
  direction: rtl;
  padding: 5px 0;
}
.drop-list ul li {
  color: white;
  padding-right: 10px;
  font-size: 16px;
  line-height: 25px;
  width: 85%;
  margin: auto;
}
.drop-list ul li:hover {
  background: url(../Res/icons/bg_patern.png);
}

#save-g-intro {
  width: 35%;
  margin: auto;
  margin-top: 7px;
}

#trigger_1,
#trigger_2,
#trigger_3,
#game-lang-list .choose-lang {
  display: none;
}

#use_golden_med,
#use_silver_med,
#use_coper_med {
  display: none;
}
#use_golden_med:checked + .checker,
#use_silver_med:checked + .checker,
#use_coper_med:checked + .checker {
  background-image: url(../Res/btns/checked.png);
}
.checker {
  background-image: url(../Res/btns/unchecked.png);
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  display: inline-block;
  background-size: 100% 100%;
  vertical-align: top;
  margin-top: 6px;
  float: left;
  margin-left: 15px;
}
#trigger_1:checked + .checker,
#trigger_2:checked + .checker,
#trigger_3:checked + .checker,
#trigger_4:checked + .checker,
#trigger_5:checked + .checker,
#trigger_6:checked + .checker {
  background-image: url(../Res/btns/checked.png);
}

#check_0:checked + .checker,
#check_1:checked + .checker,
#check_2:checked + .checker,
#check_3:checked + .checker,
#check_4:checked + .checker,
#check_5:checked + .checker,
#check_6:checked + .checker,
#check_7:checked + .checker,
#check_8:checked + .checker,
#check_9:checked + .checker,
#check_10:checked + .checker,
#check_11:checked + .checker {
  background-image: url(../Res/btns/checked.png);
}

.for_msg .checker {
  display: block;
  margin: auto;
  float: none;
  margin-top: 7.5px;
}

.F_E-list .row-1 {
  height: 45px !important;
  text-align: center;
  width: 90%;
  margin: auto;
  margin-top: 20px;
}
.F_E-list .row-1 input {
  padding: 4px;
  margin-top: 4px;
}
.F_E-list .row-1 .th {
  margin-top: 5px !important;
  width: 90px;
  height: 30px;
}
.F_E-list .row-2 ul li {
  width: 100px;
  background-image: url("../Res/background/profile_name.png");
  background-size: 100% 100%;
  color: white;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.F_E-list .row-2 ul li span {
  display: inline-block;
  float: right;
  margin-right: 20px;
}
.F_E-list .row-2 ul {
  width: 309px;
  margin: auto;
  margin-top: 5px;
}

#invited-list .search_res,
#join-req-list .search_res {
  width: 100%;
  position: static;
  margin: 0px;
  border: none;
  padding: 0px;
  background: none;
  height: 159px;
}
#invited-list .search_res ul,
#join-req-list .search_res ul {
  height: 100%;
}
#invited-list .search_res li img,
#join-req-list .search_res li img {
  margin: 10px 7px 10px 18px;
}
#invited-list .search_res li,
#join-req-list .search_res li {
  background-size: 98% 95%;
}
#invited-list .select-button,
#join-req-list .search_res .select-button {
  float: right;
  width: 82px;
  height: 100%;
  margin-right: 12px;
}
#invited-list .select-button .full-btn,
#join-req-list .search_res .full-btn {
  width: 37px;
  margin-top: 12.5px;
  height: 20px;
  line-height: 20px;
  font-size: 13px;
}

#rank-review .upper {
  height: 185px;
}
#rank-review .down .th {
  height: 30px;
}
#rank-review .down::after {
  content: " ";
  position: absolute;
  margin-top: 15px;
  width: 78.2%;
  background-image: url(../Res/border/top_panel_helmet_decor.png);
  background-repeat: no-repeat;
  background-position: center;
  height: 50px;
  top: 237px;
}
.player-review .upper {
  padding: 0px !important;
}
.player-review .upper .left {
  background: url(../Res/background/top_left_resources_panel.png) no-repeat
    center;
  height: 93%;
  width: 204px;
}
.player-review .player-avatar {
  text-align: center;
  padding-top: 16.5px;
  width: 177px;
}
.player-avatar img {
  border: 6px solid transparent;

  border-image: url(../Res/border/sml_btn.jpg);
  border-image-slice: 7;
  border-image-repeat: round;
  box-sizing: content-box;
  height: 41px;
}
.player-review .player-name {
  text-align: center;
  color: white;
  line-height: 34px;
  background-image: url(../Res/background/profile_name.png);
  background-size: 75% 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin: auto;
  width: 300px;
  margin-top: -25px;
  position: absolute;
  font-size: 16px;
}

.player-review .right {
  width: 105px;
}
.player-review .trow {
  color: white;
  line-height: 27px;
  text-align: center;
}
.bg-btn-blu {
  background-image: url("../Res/background/background.jpg");
  background-size: 100% 100%;
}
.bg-btn-red {
  background-image: url(../Res/background/profile_name.png);
  background-size: 100% 100%;
}
.player-review .down .li {
  width: 88%;
  margin: auto;
  height: 32px;
}
.player-review .down .li .image img {
  width: 25px;
  height: 25px;
}
.player-review .down .li .image {
  margin-left: 5px;
  margin-top: 2.5px;
}
.player-review .down .li .title {
  line-height: 30px;
  color: white;
  width: 90px;
  text-align: center;
  font-size: 14px;
}
.player-review .down .li .li-d {
  width: 125px;
}
.player-review .down .buttons .li-d {
  width: 95px;
  margin-left: 5px;
}
.player-review .down .buttons .li-d:first-child {
  margin-left: 0px;
}
.player-review .down .buttons .title {
  width: 65px;
}

/*
        scroll_bar css
*/
.nicescroll-cursors {
  background-image: url(../Res/bars/scrollBar/Track.png);
}
.bg-general {
  background-image:
    url("../Res/background/U.png"), url("../Res/background/B.png"),
    url("../Res/background/L.png"), url("../Res/background/R.png"),
    url(../Res/background/paperCenter.jpg) !important;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y, repeat !important;
  background-position: top, bottom, left, right;
  background-size: auto auto !important;
}
.bg-general::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image:
    url("../Res/background/UL.png"), url("../Res/background/UR2.png"),
    url("../Res/background/BL.png"), url("../Res/background/BR.png");
  background-repeat: no-repeat;
  background-position:
    top left,
    top right,
    bottom left,
    bottom right;
  position: absolute;
  z-index: -10;
}
#quest_pack .selected,
#sub_quest .selected,
.for_quest .top-left .selected {
  background-image: url(../Res/btns/selectedTile.jpg) !important;
  background-size: contain !important;
  color: white;

  border-left: solid 5px transparent;
  border-right: solid 5px transparent;
  border-image: url(../Res/border/border_red.png);
  border-image-slice: 7;
  border-image-repeat: round;
  box-sizing: border-box;
  border-radius: 4px;
}

.drop-down-li {
  width: 80px;
  background-color: rgba(0, 0, 0, 0.85);
  position: relative;
  margin-top: 34px;
  border-radius: 6px;
  display: none;
  padding: 5px 0px;
}
.drop-down-li div {
  height: 25px;
  line-height: 25px;
  width: 80%;
  margin: auto;
  border-radius: 5px;
  text-align: center;
}
.drop-down-li div:hover {
  background-color: #eee;
  color: black;
}

.for_guild .left-content .tr .drop-down-li {
  width: 130px !important;
  color: white;
  height: auto !important;
  margin-top: 30px;
  position: absolute;
  z-index: 10001;
}
.for_guild .left-content .tr .drop-down-li div {
  float: none !important;
}

/*_____________________________________________________PRIVARE _ CHAT BOX ______________________*/

.chat-room {
  width: 600px;
  height: 400px;
  background-image:
    url("../Res/background/U.png"), url("../Res/background/B.png"),
    url("../Res/background/L.png"), url("../Res/background/R.png");
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: top, bottom, left, right;
  position: fixed;
  left: 50%;
  top: 135px;
  margin-left: -300px;
  z-index: 11;
}
.chat-room::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image:
    url("../Res/background/UL.png"), url("../Res/background/UR2.png"),
    url("../Res/background/BL.png"), url("../Res/background/BR.png");
  background-repeat: no-repeat;
  background-position:
    top left,
    top right,
    bottom left,
    bottom right;
  position: absolute;
  z-index: -10;
}
.chat-room .head_bar {
  height: 90px;
  width: 250px;
  margin: auto;
  margin-top: -50px;
}
.chat-room .head_bar .banner {
  height: inherit;
  width: 100%;
  display: block;
}
.chat-room .head_bar .banner img {
  height: 100%;
  width: 100%;
  display: block;
}
.chat-room .head_bar .title {
  font-size: 16px;
  line-height: 30px;
  text-align: center;
  color: white;
  margin-top: -52px;
}
.chat-room .window-icon img {
  float: right;
  margin-right: 6px;
  width: 25px;
}
.chat-room .window-icon {
  position: absolute;
  width: 150px;
  right: 10px;
  margin-top: -12px;
}
.chat-room .container {
  height: inherit;
  margin: auto;
  margin-top: -40px;
  width: 90%;
  overflow: hidden;
}

.chat-room .container .upper {
  background: url(../Res/background/dialog_bg.jpg) 90% 90%;
  border-top-right-radius: 15px;
  height: 55%;
  margin-top: 6%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.chat-room .container .bottom {
  background: url(../Res/background/dialog_bg.jpg) 90% 90%;
  height: 30%;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.chat-room .container .upper .body {
  height: 100%;
  width: 75%;
  float: left;

  border-top-left-radius: 15px;
}

.chat-room .container .upper .recieve-avatar {
  height: 100%;
  width: 25%;
  float: right;
  border-top-right-radius: 15px;
  background:
    url(../Res/border/roof.png) no-repeat bottom,
    url(../Res/border/roof.png) no-repeat top;
  background-size: contain;
}

.chat-room .container .upper .recieve-avatar .image {
  margin: auto;
  padding-top: 15px;
  margin-top: 16px;
  background-image: url(../Res/background/ribbon.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding-bottom: 25px;
}
.chat-room .container .your-avatar .image {
  margin: auto;
  padding-top: 15px;
  background-image: url(../Res/background/ribbon.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding-bottom: 25px;
}

.chat-room .container .upper .recieve-avatar .image img,
.chat-room .container .your-avatar .image img {
  width: 60%;
  margin: auto;
  display: block;
}

.chat-room .container .upper .recieve-avatar .name {
  background-image: url("../Res/background/background.jpg");
  background-size: 100% 100%;
  color: white;
  text-align: center;
  line-height: 30px;
  width: 85%;
  margin: auto;
}
.chat-room .container .upper .recieve-avatar .btns {
  height: 30px;
  margin-top: 15px;
}
.chat-room .container .upper .recieve-avatar .btns .full-btn {
  width: 50%;
  margin: auto;
}

.sender-msg span {
  font-weight: bold;
}

.scrollable-msg-body {
  margin: 10px;
  height: 90.5%;
  background: url(../Res/icons/bg_patern.png);
  border-radius: 5px;
}
.scrollable-msg-body .sender-msg {
  margin-left: 15px;
  padding: 2px 0px;
  width: 90%;
}

.scrollable-msg-body .sender-msg::after {
  content: "";
  clear: both;
  display: block;
}

.scrollable-msg-body .reciever-msg {
  margin-left: 15px;
  padding: 2px 0px;
  margin-right: 15px;
  text-align: right;
}

.chat-room .bottom .msg-input {
  width: 75%;
  float: left;
  height: 70%;
}

.chat-room .bottom .msg-input textarea {
  resize: none;
  display: block;
  margin: auto;
  width: 95%;
  margin-top: 8px;
  height: 80%;
  text-align: right;
  background: url(../Res/icons/bg_patern.png);
  border-radius: 5px;
  border: 2px solid wheat;
}

.chat-room .bottom .your-avatar {
  width: 25%;
  float: right;
  height: 70%;
}
.chat-room .bottom .btns .full-btn {
  width: 80px;
  margin-top: 3.5px;
  border-radius: 3px;
}

.chat-room .bottom .btns .pull-L {
  margin-left: 15px;
}
.chat-room .bottom .btns .pull-R {
  margin-right: 15px;
}
#expand-chat .send {
  width: 40px;
  margin-left: 7px;
  line-height: 30px;
}
#expand-chat .send img {
  height: 25px;
  margin-top: 2.5px;
}
#drop-down-list-wrapper {
  position: relative;
}

#drop-down-list-wrapper .drop-down-li {
  width: 150px;
  color: white;
  position: absolute;
  right: -94px;
  bottom: 0px;
  z-index: 10;
  display: block;
}
#drop-down-list-wrapper .drop-down-li .user-group-0 {
  color: white;
}
#drop-down-list-wrapper .drop-down-li lable {
  font-weight: bold;
  font-size: 16px;
  display: block;
  text-align: center;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}
#drop-down-list-wrapper .drop-down-li button {
  width: 20px;
  height: 20px;
  background-image: url(../Res/btns/close_b.png);
  background-size: 100% 100%;
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: transparent;
}
#active-chat-rooms {
  height: 100%;
  width: 270px;
  float: left !important;
}
#active-chat-rooms ul {
  height: 100%;
  overflow: auto;
}
.unit-chat-icon {
  width: 45px;
  height: 80%;
  margin-top: 4px;
  background-size: auto 100%;
  background-position: center;
  border-radius: 5px;
  margin-right: 5px;
}

.promote-guild-member {
  position: absolute;
  margin-left: 130px !important;
  margin-top: -25px !important;
}

.guild-banner {
  margin: auto;
  height: 105px;
  position: relative;
  padding-top: 15px;
}
.guild-banner img {
  position: absolute;
  height: 100px;
  width: auto !important;
  display: block;
  left: 50%;
  margin-left: -50px;
}
#guild-lvl {
  background-image: url(../Res/background/bg_lvl.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 50px;
  height: 50px;
  position: absolute;
  right: 84px;
  z-index: 3;
  top: 4px;
  color: white;
  text-align: center;
  line-height: 55px;
  font-size: 16px;
}
.not-seen {
  font-weight: bold;
  font-size: 14px;
}
.not-seen .full-btn {
  font-weight: normal;
}
.sys-msg {
  color: #770101;
}
.g-msg {
  color: #419322;
}

#select-production select {
  width: 80%;
  margin: auto;
  line-height: 30px;
  display: block;
  height: 30px;
  margin-bottom: 15px;
}

#dialogBox3 {
  width: 820px;
  height: 410px;
  background-image: url(../Res/skins/palace.png);
  position: fixed;
  z-index: 15;
  top: 150px;
  left: 50%;
  margin-left: -410px;
}

#dialogBox3 .box-haeder {
  height: 52px;
}
#dialogBox3 .box-haeder .box-title {
  height: 40px;
  justify-content: center;
  align-items: flex-end;
}
#dialogBox3 .box-haeder .box-title .title-txt {
  color: white;
  font-weight: bold;
  font-size: 16px;
}
#dialogBox3 .box-haeder .close-btn {
  margin-top: -10px;
}
#dialogBox3 .box-haeder .close-btn .close-wide {
  width: 52px;
  height: 20px;
}
#dialogBox3 .box-content {
  height: 338px;
}

#dialogBox3 .box-content .box-content-wrapper {
  width: 91%;
  margin: auto;
  height: 100%;
}

#player-profile-box {
  width: 100%;
  height: 100%;
}

#player-profile-box .player-avatar {
  width: 60%;
  margin: auto;
}

#player-profile-box .player-avatar .image {
  width: 140px;
  height: 140px;
}

#player-profile-box .player-avatar .image .bg {
  width: 100%;
  height: 100%;
  background-image: url(../Res/background/frame.png);
  background-size: 100% auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#player-profile-box .player-avatar .image .bg .avatar {
  width: 82%;
  height: 82%;
  background-size: 100% auto;
  float: none;
  margin: 10px;
  border-radius: 50%;
}

#game-lang-list {
  justify-content: space-around;
  flex-wrap: wrap;
}
#game-lang-list li {
  height: 30px;
  width: 140px;
  color: white;
  margin: 7px 0px;
}
#game-lang-list li .content-wrapper {
  width: 80%;
  margin: auto;
  justify-content: space-around;
}
#game-lang-list li .flag {
  width: 30px;
  height: 30px;
}
#game-lang-list li .flag label {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 70%;
}
#game-lang-list li .checker {
  margin: 0px;
  cursor: pointer;
}

#SelectContributeList {
  height: 300px;
  display: flex;
  padding: 0px 10px;
  flex-flow: wrap;
  align-items: center;
  align-content: baseline;
}

#SelectContributeList .unitCont {
  background-size: 100% 100%;
}
#SelectContributeList .title {
  text-align: center;
  font-size: 12px;
  color: #994b2c;
}

#SelectContributeList .unit-contribute {
  background-image: url(../Res/icons/left-content.png);
  width: 24%;
  display: flex;
  flex-flow: column;
  align-items: center;
  height: 70px;
  padding-top: 5px;
  background-size: 100% 100%;
  margin: 2px 0.5%;
}

.learn_hero .row-1 {
  height: 96px;
}
.learn_hero .row-1 p {
  width: 63%;
  float: right;
  text-align: right;
  margin-right: 15px;
  margin-top: 10px;
  font-size: 14px;
}
.learn_hero .row-1 ul {
  width: 30%;
  float: left;
}
.learn_hero .row-1 ul li,
.learn_hero .row-4 ul li {
  height: 30px;
  line-height: 30px;
  color: white;
  font-size: 14px;
  background-image: url("../Res/background/profile_name.png");
  background-size: 100% 100%;
}
.learn_hero .row-1 ul li span {
  margin-left: 6px;
}
.learn_hero .row-2 .max-point {
  line-height: 20px;
  color: white;
  font-size: 1.1em;
  text-align: right;
  margin-right: 15px;
  float: right;
  width: 55%;
  margin-top: 15px;
}
.learn_hero .row-2 .promotion {
  width: 35%;
  float: left;
  margin-left: 5px;
  margin-top: 3px;
}
.learn_hero .row-2 .promotion .th {
  box-shadow: none;
}
.learn_hero .row-2 .promotion .bg-btn-blu {
  color: white;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
}
.learn_hero .row-4 .img-inside-box .big-img {
  width: 100px;
  height: auto;
  margin-top: 21px;
}
.learn_hero .row-4 .matrial_unit {
  width: 140px;
  height: 102px;
  margin-top: 32px;
}
.learn_hero .row-4 .matrial_unit .border_up {
  margin-left: 25px;
}
.learn_hero .row-4 .matrial_unit .player_amount {
  margin-left: 10px;
  margin-top: -8px;
}
.learn_hero .row-4 .col-2 {
  width: 53%;
}
.learn_hero .row-4 ul {
  margin-top: 25px;
}
.learn_hero .row-4 ul li {
  margin-bottom: 3px;
}
.learn_hero .row-4 ul li span {
  margin-left: 10px;
}
.learn_hero .row-5 {
  height: 33px;
  background-image: url("../Res/background/sitenav-bar-bg.jpg");
  background-size: 100% 100%;
  overflow: auto;
}

.learn_hero .row-5 .full-btn {
  height: 23px;
  line-height: 23px;
  width: 100px;
  margin: auto;
  margin-top: 5px;
}
#fade-msg {
  width: 350px;
  font-size: 18px;
  position: fixed;
  z-index: 100000;
  left: 50%;
  margin-left: -175px;
  top: 50%;
  opacity: 1.5;
  pointer-events: none;
}
#fade-msg p {
  text-align: center;
}
#fade-msg .success {
  color: #08ff07;
}
#fade-msg .fail {
  color: #c70039;
}
.coming-soon-building {
  background-image: url(../Res/log-in-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.coming-soon-building .time_counter {
  color: white;
  font-size: 18px;
  text-align: center;
}

.coming-soon-building .text {
  color: white;
  font-size: 24px;
  text-align: center;
}
.coming-soon-building .logo {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
}
.coming-soon-building hr {
  width: 150px;
  color: white;
  font-size: 14px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
.iso_text_left {
  background-color: rgba(0, 0, 0, 0.8);
  color: rgba(255, 255, 255, 1);
  -webkit-transform: skewY(-28deg);
  -moz-transform: skewY(-28deg);
  -o-transform: skewY(-28deg);
  -ms-transform: skewY(-28deg);
  transform: skewY(-28deg);
  text-align: center;
  line-height: 20px;
  border-radius: 3px;
}
.iso_text_right {
  color: #08ff07;
  -webkit-transform: skewY(28deg);
  -moz-transform: skewY(28deg);
  -o-transform: skewY(28deg);
  -ms-transform: skewY(28deg);
  transform: skewY(28deg);
  text-align: center;
  line-height: 20px;
  border-radius: 3px;
}
.building_lvl_lable_3 {
  background-image: url(../Res/background/lvl_lable/lable_3.png);
  background-position: center;
  background-size: 82% 100%;
  background-repeat: no-repeat;
  line-height: 28px !important;
}
.building_lvl_lable_2 {
  background-image: url(../Res/background/lvl_lable/lable_2.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  line-height: 27px !important;
}
.building_lvl_lable_1 {
  background-image: url(../Res/background/lvl_lable/lable_1.png);
  background-position: center;
  background-size: 90%;
  background-repeat: no-repeat;
  line-height: 27px !important;
}
.building_lvl_lable_4 {
  background-image: url(../Res/background/lvl_lable/lable_4.png);
  background-position: center;
  line-height: 26px !important;
  background-size: 90%;
}

.building_lvl_lable_5 {
  background-image: url(../Res/background/lvl_lable/lable_5.png);
  background-position: center;
  background-size: 93%;
  line-height: 33px !important;
}
.empty_place {
  margin-top: -40px !important;
  height: 405px !important;
}
.empty_place .left-content {
  background: url(../Res/skins/desc-rect.png);
  background-position-y: -18px;
  background-size: 100% 106%;
  overflow-y: auto;
}

.mili_building .middle-content::before {
  content: "";
  width: 10px;
  margin: auto;
  background-color: red;
  position: absolute;
  height: 301px;
  background-image: url(../Res/border/sprite_v.png);
  background-size: contain;
  right: -5px;
}
.mili_building .right-content .rightOfRight .sol-2-build-amount {
  margin: auto;
  display: block;
  height: 20px;
  border-radius: 3px;
  width: 80%;
  margin: 5px 5px 5px 19px;
  padding-right: 15px;
  direction: ltr;
}
.mili_building .right-content .rightOfRight .number-arrow-wrapper {
  margin-left: -26px;
  margin-top: 2px;
}

.theater .tr .td_9 .full-btn {
  height: 20px;

  line-height: 20px;
  width: 70%;
  margin: auto;
  margin-top: 3.5px;
  display: block;
}
#rank-review .down .table .th {
  height: 21px;
  margin-top: 25px;
}
#rank-review .down .table {
  width: 85%;
  margin: auto;
  background-image: url(../Res/icons/bg_patern.png);
}
#rank-review .down .table .th div,
#rank-review .down .table .tr div {
  width: 33%;
}
.current_lvl_study {
  width: 27px;
  height: 29px;
  position: absolute;
  left: 18px;
  top: -8px;
  background-image: url(../Res/panner/study_lvl_h.png);
  text-align: center;
  line-height: 25px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  z-index: 1;
}
.city_lvl_study {
  width: 20px;
  height: 29px;
  position: absolute;
  background-image: url(../Res/panner/study_lvl_l.png);
  background-size: contain;
  right: 22px;
  top: -5px;
  text-align: center;
  line-height: 26px;
  font-size: 12px;
  font-weight: bold;
  z-index: 1;
}
.study_unite {
  position: relative;
}
.study_unite .img-inside-box {
  position: relative;
}
.study_unite .permit-layer {
  height: 45.5px;
  background: rgba(0, 0, 0, 0.5);
  width: 90px;
  margin: auto;
  border-radius: 5px;
  position: absolute;
  top: 0px;
  z-index: 0;
  left: 31.5px;
}
.box_content .full::before {
  display: none;
}

#cansel-building-upgrade {
  background-image: url(../Res/btns/building/cancel_up.png);
  width: 35px;
  height: 35px;
  background-size: contain;
  margin-top: 7px;
}
#cansel-building-upgrade:hover {
  background-image: url(../Res/btns/building/cancel_up-h.png);
}
#cansel-building-upgrade:active {
  background-image: url(../Res/btns/building/cancel_up-a.png);
}
#cansel-building-upgrade:disabled {
  background-image: url(../Res/btns/building/cancel_up-d.png);
}
#building-lvl-down {
  background-image: url(../Res/btns/down.png);
  width: 35px;
  height: 35px;
  background-size: contain;
  margin-top: 7px;
}
#building-lvl-down:active {
  background-image: url(../Res/btns/down_h.png);
}
#building-lvl-inheader {
  position: absolute;
  background-image: url(../Res/panner/study_lvl_h.png);
  background-size: contain;
  width: 33px;
  height: 35px;
  margin-top: -2px;
  margin-left: -7px;
  color: white;
  font-weight: bold;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
}
#city-data {
  position: fixed;
  top: 120px;
  right: 10px;
  font-size: 20px;
  color: white;
  z-index: 5;
  text-align: center;
  font-weight: bold;
  pointer-events: none;
  direction: rtl;
}
.extra_html {
  width: 80%;
  margin: auto;
  font-size: 18px;
  direction: rtl;
  margin-top: 5px;
}
.extra_html #new-city-x-coord,
#new-city-y-coord {
  width: 50px;
  font-size: 16px;
}
.alert_for_hero_trade .row-1 {
  width: 85%;
  margin: auto;
  margin-top: 35px;
}
.alert_for_hero_trade .row-2 {
  height: 40px !important;
}
#CURRENT_CURSOR_COORDS {
  position: absolute;
}

.building_store .stat-table {
  height: 100%;
}
.building_store .stat-table ul li div {
  width: 25%;
  float: left;
  text-align: center;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
}
.building_store .stat-table ul li .stor-percent input {
}
.building_store .stat-table ul li .stor-percent .number-arrow-wrapper {
  margin-left: -22px;
  margin-top: 10px;
  height: 24px;
}
.building_store .stat-table ul li .resource-icon img {
  height: 35px;
  margin-top: 5px;
}
.building_store .stat-table ul li {
  height: 45px;
}
.building_store .stat-table ul li:nth-child(2n) {
  background-color: #f5e7bd;
}
.building_store .stat-table ul li:nth-child(2n + 1) {
  background: url(../Res/icons/bg_patern.png);
}
.building_store .stat-table ul .stor-percent input {
  width: 70px;
  display: block;
  margin: auto;
  margin-top: 10px;
  line-height: 16px;
  margin-left: 35px;
}
.font-2 {
  font-family: "Courier New", Courier, monospace;
  font-weight: 800;
}

#accept-store-new-val {
  height: 45px;
  margin-top: 11px;
}
.total-storage {
  line-height: 45px;
  text-align: center;
}
#accept-store-new-val button {
  line-height: 35px;
  width: 150px;
  margin: auto;
  margin-top: 5px;
  font-size: 1.5em;
}

/*          LUCKY WHEEL          */
#luck-wheel-over-lay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10;
}
#luck-wheel {
  width: 540px;
  height: 540px;
  margin: auto;
  position: relative;
  top: 100%;
  background-image: url(../Res/tools/luck_wheel.png);
}
#luck-wheel .holes {
  height: 100%;
}
#luck-wheel ul {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
#luck-wheel ul .cell {
  width: 51px;
  height: 51px;
  border-radius: 50%;
  position: absolute;
  background-position: center;
  background-size: auto 100%;
}
#luck-wheel ul .corner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: absolute;
}
#luck-wheel ul li .left-gate {
  height: 100%;
  width: 50%;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
  background-image: url(../Res/tools/gete-left.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
#luck-wheel ul li .right-gate {
  height: 100%;
  width: 50%;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px;
  background-image: url(../Res/tools/gate-right.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
#luck-wheel ul .corner .left-gate {
  border-bottom-left-radius: 32px;
  border-top-left-radius: 32px;
  background-image: url(../Res/tools/gate-left-lion.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
#luck-wheel ul li h1 {
  position: absolute;
  width: 100%;
  margin-top: 8px;
  margin-left: 8px;
  font-size: 15px;
  color: #08ff07;
  display: none;
  -webkit-text-stroke: 1px black;
  font-weight: bold;
}
#luck-wheel ul .corner .right-gate {
  border-bottom-right-radius: 32px;
  border-top-right-radius: 32px;
  background-image: url(../Res/tools/gate-right-lion.png);
  background-size: 100%;
}

#luck-wheel ul .cell .pulse {
  height: 52px;
  width: 52px;
  background-image: url(../Res/tools/luck-wheel-pulse.png);
  background-size: 100%;
  position: absolute;
  opacity: 0;
}
#luck-wheel ul .corner .pulse {
  height: 64px;
  width: 64px;
  background-image: url(../Res/tools/luck-wheel-pulse.png);
  background-size: 100%;
}

#luck-wheel .control {
  width: 60%;
  margin: auto;
  height: 60%;
  top: 18%;
  left: 20%;
  position: absolute;
}
#hide-luck-wheel {
  width: 60px;
  height: 26px;
  margin: auto;
  display: block;
  background-color: transparent;
}

#luck-wheel .control .title {
  width: 98%;
  margin: auto;
  height: 50px;
  background-image:
    url(../Res/tools/title-red.png), url(../Res/tools/title-background.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto, 100%;
  text-align: center;
  font-weight: bold;
  color: white;
  line-height: 44px;
  font-size: 16px;
}
#luck-wheel .control h1 {
  height: 25px;
  text-align: center;
  font-weight: bold;
  color: white;
  line-height: 25px;
  font-size: 16px;
}
#luck-wheel .control .image-frame {
  height: 114px;
  width: 196px;
  margin: auto;
  background-image: url(../Res/tools/image-frame.png);
  text-align: center;
  overflow: auto;
}
#luck-wheel .control .image-frame img {
  margin-top: 23px;
}
#luck-wheel .control .input-number input {
  padding: 0px 5px;
  font-size: 14px;
  width: 100px;
  margin: auto;
  display: block;
  margin-top: 10px;
}
#start-wheel button {
  height: 42px;
  width: 134px;
  margin: auto;
  background-color: transparent;
  background-image: url(../Res/tools/start-wheel.png);
  color: white;
  display: block;
  margin-top: 15px;
}
#luck-wheel-btn {
  width: 84px;
  height: 36px;
  position: fixed;
  bottom: 213px;
  left: 310px;
  background-image:
    url(../Res/tools/luck-wheel-track.png), url(../Res/tools/luck-wheel-btn.png);
  background-repeat: no-repeat;
  background-position:
    center 6px,
    center;
  z-index: 9;
  transition: all 0.8s ease-in-out;
}
#luck-wheel-btn .track {
  background-image: url(../Res/tools/luck-wheel-ani.png);
  background-repeat: no-repeat;
  width: 70px;
  margin: auto;
  height: 62px;
  margin-top: 6px;
  background-position: top left;
  -webkit-animation: rotation 2.5s infinite linear; /* Safari 4.0 - 8.0 */
  animation: rotation 2.5s infinite linear;
}

/*    MARKET   */

.for_market .left-content {
  width: 45%;
}
.for_market .right-content {
  width: 55%;
}

.for_market .resource-list {
  width: 20%;
  height: 90%;
  float: right;
  background-image: url(../Res/background/column.png);
  background-size: 100% 100%;
}
.for_market .resource-list ul li {
  height: 20%;
  text-align: center;
  background-image: url(../Res/icons/left-content.png);
  width: 90%;
  margin: auto;
  background-size: 100% 100%;
  margin-top: 5px;
  padding-bottom: 5px;
  font-weight: bold;
}
.for_market .resource-list ul .selected {
  background-image: url(../Res/background/selected-squer.png);
  background-size: 100% 100%;
  color: white;
  font-weight: bolder;
}
.for_market .resource-list ul li img {
  padding: 3px 10px;
  margin-top: 5px;
  background-image: url(../Res/background/icon-bg.png);
  background-size: 100% 100%;
}
.for_market .auction-list {
  height: 100%;
  width: 80%;
  float: right;
  position: relative;
}
.for_market .auction-list .br {
  height: 3px;
  background: url(../Res/border/border-h.png);
  background-size: 100%;
  background-repeat: repeat-y;
  clear: both;
  width: 100%;
}
.for_market .buy,
.for_market .sell {
  height: 42%;
}
.for_market .buy .tr:nth-child(2n + 1),
.for_market .sell .tr:nth-child(2n + 1) {
  background: url(../Res/icons/bg_patern.png);
}
#auction-buy-btn button,
#auction-sell-btn button {
  height: 18px;
  line-height: 24px;
  float: left;
  margin-left: 5px;
  width: 45px;
  line-height: 18px;
}

#auction-buy-btn,
#auction-sell-btn {
  margin-top: -24px;
  position: absolute;
  width: 100%;
}

.auction-list .th {
  height: 7.5%;
}
.auction-list .td_1 {
  width: 25%;
}
.auction-list .td_2 {
  width: 50%;
}
.auction-list .td_3 {
  width: 25%;
}

.inner_nav {
  background-image: url(../Res/border/border-h_.png);
  background-size: 100% 100%;
  margin-left: 3px;
}
.inner_nav .nav-title:first-child {
  margin-left: 15px;
}
.inner_nav .nav-title {
  float: left;
  line-height: 35px;
  padding: 0px 12px;
  font-size: 13px;
}
.inner_nav .selected {
  background-image: url(../Res/btns/seleced-inner-nav.png);
  background-repeat: no-repeat;
  background-position-y: 5px;
  background-size: 100% 28px;
  font-size: 14px;
  background-color: transparent;
}
.for_market .right-content {
  background-image: url(../Res/icons/bg_patern.png);
}
.for_market .right-content .u-have,
.for_market .right-content .sell-or-buy {
  width: 60%;
  margin: auto;
  margin-top: 5px;
  height: 25px;
}
.for_market .right-content .u-have div,
.for_market .right-content .sell-or-buy div {
  width: 50%;
  float: left;
}
.for_market .right-content .u-have div .res {
  font-size: 14px;
}
.for_market .right-content .sell-or-buy div {
  height: 20px;
}
.for_market .right-content .sell-or-buy div label {
  margin: 0px;
  margin-right: 10px;
}
.for_market .right-content .sell-or-buy div span {
  font-size: 14px;
}
.for_market .right-content .quantity,
.for_market .right-content .unite-price {
  width: 65%;
  margin: auto;
  margin-bottom: 7px;
  direction: rtl;
}
.for_market .right-content .quantity label,
.for_market .right-content .unite-price label {
  line-height: 20px;
  font-size: 14px;
  display: inline-block;
  width: 70px;
}
.for_market .right-content .quantity input,
.for_market .right-content .unite-price input {
  width: 80px;
}
.for_market .right-content .quantity .full-btn {
  display: inline-block;
  width: 80px;
  height: 22px;
  line-height: 20px;
  margin-right: 7px;
}

#trans-fees,
#trans-total-price {
  width: 65%;
  margin: auto;
  direction: rtl;
  line-height: 25px;
}
#trans-fees span,
#trans-total-price span {
  display: inline-block;
  width: 70px;
  font-size: 14px;
}

#confirm-deal {
  direction: rtl;
  width: 75%;
  margin: auto;
  margin-top: 25px;
}
#confirm-deal .full-btn {
  display: inline-block;
  width: 70px;
  margin-right: 15px;
  line-height: 20px;
  font-size: 14px;
}

#under-inner-nav {
  margin-left: 5px;
}
#under-inner-nav .tr .td_6 .full-btn {
  width: 50px;
  height: 18px;
  line-height: 18px;
  margin: auto;
  margin-top: 3px;
}

.acce-arrving-dael {
  width: 30px;
  height: 100%;
  background-position: center;
  background-color: transparent;
  display: block;
  margin: auto;
}
.acce-small-btn {
  background-image: url(../Res/btn-small/acce-small.png);
  background-repeat: no-repeat;
}
.acce-small-btn:hover {
  background-image: url(../Res/btn-small/acce-small-hover.png);
}
.acce-small-btn:active {
  background-image: url(../Res/btn-small/acce-small-active.png);
}

/*  trsns resources*/
.for_market .left-content .leftOfLeft {
  width: 60%;
  float: left;
}
.for_market .left-content .rightOfLeft {
  width: 40%;
  float: right;
}

#transport-distin {
  direction: ltr;
  margin-top: 15px;
  text-align: center;
}
#transport-distin input {
  display: inline-block;
  width: 36px;
  padding: 0px;
  font-size: 14px;
  height: 22px;
}
#transport-distin span {
  display: inline-block;
  font-size: 14px;
}
#transport-distin label {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  margin-right: 5px;
}

.my-city-distin {
  margin-top: 15px;
}

.my-city-distin .select_option {
  right: 207px;
  height: 280px;
  width: 220px;
  text-align: center;
  padding: 10px 0px;
  display: none;
}
.my-city-distin .select_option ol li {
  margin: 0px 20px;
  padding: 7px 0px;
  border-radius: 4px;
}
.my-city-distin .select_option ol li:hover {
  background-image: url(../Res/selelct/select-row.png);
  background-size: 100% 100%;
  color: white;
  font-weight: bold;
}
.for_market .left-content .leftOfLeft p {
  margin-top: 20px;
}
.for_market .left-content .leftOfLeft .transit-time {
  margin-top: 10px;
  margin-right: 20px;
  font-size: 14px;
}
.for_market .left-content .leftOfLeft .transit-time span {
  font-size: 13px;
}
.my-city-distin label {
  margin-right: 5px;
  font-size: 14px;
  line-height: 25px;
  display: inline-block;
  vertical-align: top;
}
#select-city-trans-dis {
  height: 25px;
  line-height: 25px;
  width: 130px;
  display: inline-block;
  margin-right: 25px;
}

#resource-input-list {
  direction: ltr;
}
#resource-input-list .resource {
  height: 25px;
}
#resource-input-list ul {
  margin-top: 15px;
  margin-left: 15px;
}
#resource-input-list ul li span {
  vertical-align: top;
  display: inline-block;
  line-height: 25px;
  margin-left: 5px;
}
#resource-input-list ul li .input-warpper .number-arrow-wrapper {
  margin-left: -24px;
  margin-top: 1.8px;
}
#resource-input-list ul li .input-warpper {
  overflow: auto;
}
#resource-input-list ul li input {
  width: 100px;
  padding: 0px 5px;
  display: block;
  height: 22px;
  float: left;
  margin: 4px;
}

#statrt-transport-res {
  margin-top: 45px;
}
#statrt-transport-res button {
  margin: auto;
  padding: 0px 10px;
}

#under-inner-nav .unit-trans-table {
  margin-left: 5px;
  margin-right: 25px;
  height: 86px;
  background-image: url(../Res/skins/table-rect.png);
  background-size: 100% 100%;
  overflow: auto;
  margin-bottom: 3px;
}

#under-inner-nav .row:first-child {
  margin-top: 6px;
}
#under-inner-nav .row {
  width: 90%;
  height: 28px;
  margin: auto;
}
#under-inner-nav .unit-trans-table .td {
  width: 33.3%;
  float: left;
  height: 100%;
}
#under-inner-nav .unit-trans-table .td span {
  vertical-align: top;
}
#under-inner-nav .unit-trans-table .footer button {
  float: right;
  margin-right: 15px;
  width: 75px;
  height: 22px;
}
#under-inner-nav .unit-trans-table .footer button span {
  margin-top: -4px;
  display: block;
  font-size: 14px;
}
#under-inner-nav .unit-trans-table .footer label {
  float: left;
  margin-left: 15px;
}
#under-inner-nav .unit-trans-table .footer label:first-child {
  margin-left: 25px;
  width: 150px;
  height: 18px;
  margin-top: 3px;
}

#jop_req_table {
  background-image: url(../Res/skins/palace.png);
  background-size: 100% 100%;
  padding: 20px 0px 10px 0px;
}
#downdrade-box .paragraph {
  height: 90px;
  padding: 15px;
  background-image: url(../Res/icons/left-content.png);
  background-size: 100% 100%;
  width: 80%;
  margin: auto;
  margin-top: 15px;
}
#downdrade-box .full-width-btn .full-btn {
  width: 88%;
  margin: auto;
}
#downdrade-box .two-btn {
  width: 88%;
  margin: auto;
  margin-top: 15px;
}
#downdrade-box button {
  width: 30%;
  margin: auto;
}
#downdrade-box button:first-child {
  margin-left: 5%;
}
#downdrade-box button:last-child {
  margin-right: 5%;
}

.army-dismis p {
  width: 88%;
  margin: auto;
  margin-top: 100px;
  text-align: center;
  margin-bottom: 10px;
}
.army-dismis .full-btn {
  width: 100px;
  margin: auto;
}

#dismiss-army-box .table {
  width: 82%;
  margin: auto;
  margin-top: 18px;
  background: url(../Res/skins/desc-rect.png);
  background-position-y: -6px;
  background-size: 100% 106%;
  padding: 5px;
}
#dismiss-army-box .table .th {
  box-shadow: none;
}
#dismiss-army-box .table .td_1,
#dismiss-army-box .table .td_2 {
  width: 30%;
}
#dismiss-army-box .table .td_3 {
  width: 40%;
}
#dismiss-army-box .two-btn {
  width: 70%;
  margin: auto;
  margin-top: 8px;
}
#dismiss-army-box .two-btn .full-btn {
  width: 35%;
}

#dismiss-army-container {
  width: 370px;
  margin: auto;
  position: relative;
  top: 24%;
  height: 338px;
  z-index: 0;
}
#dismiss-army-container .dismiss-amount-input {
  height: 70px;
  background-image: url(../Res/background/row.png);
  background-size: 100% 100%;
  width: 76%;
  margin: auto;
  padding: 0px 15px;
  margin-top: 10px;
}
#dismiss-army-container .dismiss-amount-input .pull-L img {
  height: 40px;
  padding: 4px;
  margin-top: 10px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  border-radius: 5px;
}

#dismiss-army-container .dismiss-amount-input .pull-R .wrapper {
  margin-top: 12.5px;
  color: #81511c;
}
#dismiss-army-container .dismiss-amount-input .pull-R .wrapper .possess {
  margin: auto;
  line-height: 20px;
  text-align: center;
}

#number-to-dismiss {
  width: 80px;
  margin-left: 15px;
}

.study_unite .btn-wrapper .cancel-study {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
.study_unite .btn-wrapper .speed-up-btn {
  width: 50%;
  height: 25px;
  margin-left: 18%;
  margin-top: 3px;
}
.study_unite .btn-wrapper .speed-up-btn h6 {
  line-height: 25px;
}

#guild-alert-box {
  width: 400px;
  position: fixed;
  left: 50%;
  margin-left: -200px;
  top: 25%;
  background-image: url(../Res/skins/palace.png);
  background-size: 100% 100%;
  padding-bottom: 15px;
}
#guild-alert-box .row-2 {
  height: auto;
}
#guild-alert-box .row-3 {
  margin-top: 15px;
}

#matrial-box-gift {
  height: 79%;
  width: 78%;
  margin: auto;
  margin-top: 40px;
  border: 12.5px solid transparent;
  border-image: url(../Res/background/border_a.png);
  border-image-slice: 30;
  border-image-repeat: round;
  background-image: url(../Res/skins/desc-rect.png);
  background-size: 100% 106%;
  background-repeat: no-repeat;
  background-position: center;
  background-position-y: -18px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#matrial-box-gift .matrial-list li {
  width: 33.3%;
  float: left;
  background-image: url(../Res/icons/left-content.png);
  background-size: 100% 100%;
  padding-top: 10px;
  padding-bottom: 18px;
}
#matrial-box-gift .matrial-list li .image {
  width: 76%;
  margin: auto;
  padding: 3.5px;
  padding-bottom: 0px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  border-radius: 5px;
}
#matrial-box-gift .matrial-list {
  width: 97%;
  margin: auto;
  margin-top: 10px;
  display: flex;
  flex-flow: wrap;
}
#matrial-box-gift .matrial-list li .image img {
  width: 100%;
}
#matrial-box-gift .matrial-list li .amount {
  color: #08ff07;
  font-weight: bold;
  width: 100%;
  margin-top: -25px;
  text-align: center;
}

#spy-report .spy-report {
  background-image: url(../Res/skins/desc-rect.png);
  background-size: 100% 105%;
  background-position: center bottom;
  height: 100%;
  overflow: auto;
}
#spy-report .spy-report .report {
  height: 97%;
  width: 98%;
  margin: auto;
  overflow: auto;
}

#spy-report-city-floor {
  background-image:
    url(../Res/style/Corner-down-l.png), url(../Res/style/Corner-down-r.png),
    url(../Res/style/Corner-up-l.png), url(../Res/style/Corner-up-r.png),
    url(../Res/city/city_floor.jpg);
  width: 740px;
  height: 320px;
  margin: auto;
  background-position:
    left bottom,
    right bottom,
    left top,
    right top,
    center;
  background-repeat: no-repeat;
  background-size:
    49px 50px,
    49px 50px,
    35px 50px,
    35px 50px,
    740px 320px;
  background-repeat: no-repeat;
  padding: 8px;
  position: relative;
}
#spy-report-city-floor .building-unit {
  position: absolute;
}
#spy-report-city-floor .building-unit .lvl {
  color: white;
  margin-top: -27px;
  margin-left: 15px;
  width: 16px;
  height: 19px;
  text-align: center;
  background-image: url(../Res/background/bg_lvl.png);
  background-size: 100% 100%;
  font-size: 8px;
  line-height: 21px;
  z-index: 15;
  position: absolute;
}
#city-resource {
  overflow: auto;
}
#city-resource ul {
  width: 60%;
  margin: auto;
  overflow: auto;
  border: solid 1px gray;
  margin-top: 15px;
  padding: 8px;
  background-color: white;
}
#city-resource ul li:nth-child(1),
#city-resource ul li:nth-child(3),
#city-resource ul li:nth-child(2) {
  border-bottom: solid #aaa 1px;
}
#city-resource ul li:nth-child(2) {
  border-right: 1px solid #aaa;
  border-left: 1px solid #aaa;
  box-sizing: border-box;
}
#city-resource ul li:nth-child(5) {
  border-left: 1px solid #aaa;
  box-sizing: border-box;
}
#city-resource ul li {
  width: 33.333%;
  float: left;
}
#spy-report hr {
  margin: auto;
  border: 1px solid #665615;
  opacity: 0.6;
}
#city-resource ul li img {
  vertical-align: middle;
  margin-right: 8px;
}
#city-resource .title {
  width: 40%;
  margin: auto;
}
#city-spy-report .city-army ul li {
  width: 16.66%;
  float: left;
}
#city-spy-report .city-army ul {
  overflow: auto;
}
#city-spy-report .city-army ul li .wrapper {
  width: 80%;
  margin: auto;
}
#city-spy-report .city-army ul li .wrapper img {
  width: 80%;
  margin: auto;
  display: block;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 3px;
  border-radius: 5px;
}
#city-spy-report .city-army ul li .wrapper .amount {
  color: white;
  text-align: center;
}
#city-spy-report .desc {
  text-align: right;
  width: 96%;
  margin: auto;
  margin-top: 15px;
  font-size: 14px;
  color: #81511c;
  margin-bottom: 15px;
}

.for_SR .td_3 {
  color: #2a2aa5;
}

#under-inner-nav {
  height: 265px;
}

.req_table_msg {
  width: 50%;
  margin: auto;
  margin-top: 10px;
  background-image: url(../Res/skins/palace.png);
  background-size: 100% 100%;
  padding: 30px 10px 15px 10px;
}
.req_table_msg .req_table {
  height: 107px;
}
.desc-in-msg {
  width: 90%;
  margin: auto;
  text-align: right;
  margin-top: 15px;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
    -ms-transform: rotate(359deg);
  }
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
    -ms-transform: rotate(359deg);
  }
}
@-webkit-keyframes pulse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.1;
  }
}

@keyframes pulse {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes UP_FADE {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.1;
  }
}

#alert-with-input .row-3 {
  width: 80%;
  margin: auto;
  padding: 0px 15px 12px 15px;
}
#alert-with-input .row-3 .confim-btn {
  width: 100%;
  overflow: auto;
}
#alert-with-input .full-btn {
  width: 35%;
}
#alert-with-input .wrapper {
  height: 143px;
  overflow: auto;
}
#alert-with-input .paragraph {
  text-align: center;
  width: 80%;
  margin: auto;
  margin-top: 20px;
  font-size: 14px;
}
#alert-with-input .spy-wrapper {
  height: 70px;
  background-image: url(../Res/background/row.png);
  background-size: 100% 100%;
  width: 76%;
  margin: auto;
  padding: 0px 15px;
  margin-top: 10px;
}
#alert-with-input .spy-wrapper .image {
  height: 40px;
  padding: 4px;
  margin-top: 10px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  border-radius: 5px;
}
#alert-with-input .spy-wrapper .input {
  line-height: 24px;
  width: 60px;
  margin-top: 22px;
}
#alert-with-input .spy-wrapper .left {
  margin-right: 15px;
  margin-top: 18px;
}

.nav-notif {
  width: 25px;
  border-radius: 50%;
  position: absolute;
  color: white;
  line-height: 25px;
  text-align: center;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(../Res/background/notif_green.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  top: -5px;
  left: -5px;
  font-weight: normal;
}
#change-pass-input-group input:first-child {
  margin-top: 0px !important;
}
#change-pass-input-group input {
  display: block;
  width: 70% !important;
  margin: 5px auto !important;
  padding: 4px 8px !important;
  border: 2px solid #ccc;
  border-radius: 5px;
}

#Box-mid {
  width: 790px;
  position: fixed;
  z-index: 20;
  height: 563px;
  background-image: url(../Res/godGate/rank/bg.png);
  background-size: 100% 100%;
  background-position: center;
  left: 50%;
  margin-left: -390px;
  top: 50px;
}

#Box-mid .title {
  text-align: center;
  line-height: 80px;
  font-size: 18px;
  color: white;
  margin-top: 10px;
}
#Box-mid .nav-bar {
  width: 100%;
  height: 30px;
}
#Box-mid .nav-bar ul {
  height: 100%;
  width: 88%;
  margin: auto;
}
#Box-mid .nav-bar ul li {
  width: 15%;
  margin-left: 1%;
  height: 100%;
  background-image: url(../Res/godGate/rank/nav-nor.png);
  background-size: 100% 100%;
  float: left;
  text-align: center;
  line-height: 30px;
  color: white;
}

#Box-mid .nav-bar ul li:hover {
  background-image: url(../Res/godGate/rank/nav-sel.png);
  opacity: 0.9;
  transform: scale(1.01);
  transition: linear 0.2s all;
}
#Box-mid .nav-bar ul .selected {
  background-image: url(../Res/godGate/rank/nav-sel.png);
}

#Box-mid .content-wrapper {
  border: 12.5px solid transparent;
  border-image: url(../Res/background/border_a.png);
  border-image-slice: 30;
  border-image-repeat: round;
  box-sizing: border-box;
  width: 93%;
  margin: auto;
  height: 410px;
}

#Box-mid .content-wrapper .rank-list {
  height: 346px;
  background: url(../Res/icons/bg_patern.png);
}
#Box-mid .content-wrapper .rank-list .tr {
  height: 32.5px;
}
#Box-mid .content-wrapper .footer {
  width: 100%;
  height: 40px;
  overflow: auto;
  background-image: url("../Res/background/sitenav-bar-bg.jpg");
  background-size: 100% 100%;
}

#Box-mid .footer .li .nav_icon {
  overflow: auto;
  margin-top: 6px;
}
#Box-mid .footer .li .nav_icon h1 {
  text-align: center;
  font-size: 14px;
  color: white;
  line-height: 30px;
  width: 51px;
}
#Box-mid .footer .li {
  width: 25%;
  float: left;
  height: 100%;
}

#Box-mid .footer .show-my-rank {
  color: white;
  display: block;
  margin: auto;
  height: 28px;
  width: 97px;
  margin-top: 7px;
}

#Box-mid .box-close {
  height: 25px;
  margin-top: -15px;
}
#Box-mid .box-close button {
  height: 20px;
  width: 20px;
  display: block;
  float: right;
  background-image: url(../Res/btns/close_b.png);
  background-color: transparent;
  background-size: 100% 100%;
  margin-right: 10px;
  background-color: transparent;
}

#test-in:after {
}
.number-arrow {
  width: 21px;
  height: 12px;
  display: block;
  background-repeat: no-repeat;
}
.number-arrow-wrapper {
  display: inline-block;
  margin-left: -21px;
}
.numiric {
  padding-right: 15px;
}

.number-arrow-wrapper .up {
  background-image: url(../Res/btn-small/numberStepUp.png);
}
.number-arrow-wrapper .down {
  background-image: url(../Res/btn-small/numberStepDown.png);
}
.number-arrow-wrapper .number-arrow:hover {
  background-position-y: -12px;
}
.number-arrow-wrapper .number-arrow:active {
  background-position-y: -24px;
}
.number-arrow-wrapper .number-arrow:disabled {
  background-position-y: -36px;
}

#city-profile-tooltipe {
  background-image:
    url(../Res/back-shape/right.png), url(../Res/back-shape/left.png),
    url(../Res/back-shape/top.png), url(../Res/back-shape/bottom.png),
    url(../Res/back-shape/center.png), url(../Res/back-shape/left-content.png);
  background-repeat: repeat-y, repeat-y, repeat-x, repeat-x, repeat, no-repeat;
  background-position: right, left, top, bottom, center, center;
  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    100% 100%;
  position: absolute;
  bottom: 235px;
  right: 15px;
}
.tooltip-hero-cont {
  background-image:
    url(../Res/back-shape/right.png), url(../Res/back-shape/left.png),
    url(../Res/back-shape/top.png), url(../Res/back-shape/bottom.png),
    url(../Res/back-shape/center.png), url(../Res/back-shape/left-content.png);
  background-repeat: repeat-y, repeat-y, repeat-x, repeat-x, repeat, no-repeat;
  background-position: right, left, top, bottom, center, center;
  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    100% 100%;
  position: absolute;
  z-index: 100;
  width: 350px !important;
  height: 400px !important;
}

.tooltip-army {
  width: 300px;
  margin: 15px;
  padding-bottom: 15px;
}
.tooltip-army .top {
  width: 100%;
  overflow: auto;
}
.tooltip-army .top .left {
  width: 45%;
  float: left;
  height: 100%;
  color: #81511c;
}
.tooltip-army .top .title {
  text-align: center;
  font-size: 14px;
}
.tooltip-army .top .left .image img {
  display: block;
  width: 80%;
  margin: auto;
  margin-top: 8px;
  padding: 4px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  border-radius: 5px;
}
.tooltip-army .top .right {
  width: 55%;
  float: right;
  height: 100%;
  color: #81511c;
}
.tooltip-army .bottom ul li {
  float: left;
  width: 25%;
  overflow: auto;
  height: 32px;
}
.tooltip-army .bottom ul .image {
  float: left;
  width: 50%;
  padding-top: 2.5px;
  text-align: center;
}

.tooltip-army .bottom ul .value {
  float: right;
  width: 50%;
  height: 25px;
  line-height: 25px;
  text-align: center;
}
.tooltip-army .bottom {
  width: 100%;
  clear: both;
  height: 55px;
  margin-top: 10px;
}

.tooltip-hero {
  height: auto;
  width: 340px;
  overflow: auto;
  padding-bottom: 15px;
}
.tooltip-hero .name-lvl-point,
.tooltip-hero .crop-intake {
  margin: auto;
  margin-top: 10px;
  direction: rtl;
}
.tooltip-hero .name-lvl-point label {
  margin-left: 10px;
}
.tooltip-hero .name-lvl-point .lvl {
  display: inline-block;
}
.tooltip-hero .bottom ol {
  width: 80%;
  margin: auto;
  overflow: auto;
}
.tooltip-hero .bottom ol li {
  width: 33.3%;
  float: left;
  margin-top: 8px;
}
.tooltip-hero .bottom ol li .wrapper {
  width: 80%;
  margin: auto;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% 100%;
  padding: 3px;
}
.tooltip-hero .bottom .equip-row li .wrapper {
  padding: 2px;
}

.tooltip-hero .bottom ol li img {
  width: 72px;
  height: 32px;
  margin: auto;
  border-radius: 3px;
  display: block;
  margin: auto;
}
.tooltip-hero .bottom .equip-row li img {
  width: 47px;
  height: 25px;
  margin: auto;
  border-radius: 2px;
  display: block;
}
.tooltip-hero .bottom ol li .amount {
  color: white;
  margin-top: -16px;
  line-height: 16px;
  text-align: center;
}
.tooltip-hero .top .state {
  margin: auto;
  direction: rtl;
  margin-top: 5px;
  margin-bottom: 5px;
}
.tooltip-hero .top {
  width: 90%;
  margin: auto;
}
.tooltip-hero .top .state label {
  margin-right: 10px;
}
.tooltip-hero .top ul li {
  width: 25%;
  float: left;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.tooltip-hero .top ul li img {
  vertical-align: top;
}
.tooltip-hero .bottom .equip-row {
  width: 92%;
  margin-top: 15px;
}
.tooltip-hero .bottom .equip-row li {
  width: 20%;
  float: left;
}
.tooltip-equip {
  width: 250px;
  height: auto;
  padding: 15px 10px;
  direction: rtl;
  background-image:
    url(../Res/back-shape/left-content.png),
    url(../Res/back-shape/left-content.png);
  background-size: 100% 100%;
  position: absolute;
  z-index: 1500;
  opacity: 1 !important;
}

.tooltip-equip .top .title {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  color: #5e341b;
}

.tooltip-equip .top ul li {
  color: #5f8c00;
  margin-bottom: 5px;
  font-size: 14px;
  direction: rtl;
  text-align: right;
}
.tooltip-equip .top ul li img {
  vertical-align: middle;
}
.tooltip-equip .bottom .desc,
.tooltip-equip .bottom .long-desc {
  color: #9b4b1a;
  margin-top: 10px;
  text-align: right;
}
.tooltip-equip .bottom .requir {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
}

#hero-select-list {
  margin-top: 45px;
  height: 372px;
}
#hero-select-list ol {
  width: 82%;
  height: 100%;
  margin: auto;
  border: solid 12.5px transparent;
  border-image: url(../Res/background/border_a.png);
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-slice: 30;
  border-image-repeat: round;
  box-sizing: border-box;
  border-radius: 10px;
  background-image: url(../Res/skins/desc-rect.png);
  background-size: 110% 120%;
  background-position: 10% 40%;
  overflow-x: hidden;
}
#hero-select-list .tr,
.hero-select-list .tr,
.arena-hero-list .tr {
  width: auto;
  height: 30px;
  border-radius: 3px;
  line-height: 30px;
  overflow: hidden;
}
#hero-select-list .tr:hover,
.hero-select-list .tr:hover,
.hero-select-list .selected,
.arena-hero-list .tr:hover,
.arena-hero-list .tr:hover,
.arena-hero-list .selected {
  background: url(../Res/selelct/select-row-3x.png);
  background-size: 100% 110%;
  background-position-y: -1px;
  color: white;
  transition: all linear 0.15s;
  transform: scale(1.01);
}
#hero-select-list ol li .wrapper,
.hero-select-list ol li .wrapper,
.arena-hero-list ol li .wrapper {
  height: 25px;
  margin: auto;
  float: none;
  margin-top: 2.5px;
  width: 50px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: auto 100%;
}
#hero-select-list ol li .wrapper .image,
.hero-select-list ol li .wrapper .image,
.arena-hero-list ol li .wrapper .image {
  height: 22px;
  width: auto;
  margin: 1.5px;
  width: 47px;
  background-size: auto 100%;
}
.hero-select-list ol li .wrapper .image,
.arena-hero-list ol li .wrapper .image {
  margin-top: 2px;
  margin-left: 3px;
  width: 45px;
}
#hero-select-list ol li .lvl,
.hero-select-list ol li .lvl,
.arena-hero-list ol li .lvl {
  width: 37px;
  height: 20px;
  margin: auto;
  margin-top: 5px;
  background-image: url("../Res/hero/icon_Lv.png");
  background-size: 100% 100%;
  line-height: 20px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  display: block;
  float: none;
}

#hero-select-list ol li .heroState,
.hero-select-list ol li .heroState,
.arena-hero-list ol li .heroState {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

#hero-select-list ol li button,
.arena-hero-list ol li button {
  width: 60px;
  margin: auto;
  line-height: 22px;
  margin-top: 4px;
  background-color: transparent;
}

#overview-palace-bg {
  width: 680px;
  height: 350px;
  background-image: url(../Res/skins/palace.png);
  background-size: 100% 100%;
  margin: auto;
  margin-top: 120px;
}
#overview-palace-bg .header {
  height: 40px;
}
#overview-palace-bg .header .right {
  width: 25%;
  float: right;
  height: 100%;
}
#overview-palace-bg .header .middel {
  width: 50%;
  float: right;
  height: 100%;
}
#overview-palace-bg .header .left {
  width: 25%;
  float: right;
  height: 100%;
}
#overview-palace-bg .header .middel .title {
  height: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  color: white;
}
#overview-palace-bg .content {
  width: 90%;
  margin: auto;
  margin-top: 10px;
  height: 285px;
  border: 12.5px solid transparent;

  border-image: url(../Res/background/border_a.png);

  border-image-slice: 30;
  border-image-repeat: round;
  box-sizing: border-box;
}

#hero-over-view {
  width: 100%;
  height: 100%;
  position: relative;
}

#hero-over-view .left {
  width: 50%;
  float: left;
  height: 100%;
}
#hero-over-view .right {
  width: 50%;
  float: right;
  height: 100%;
  position: relative;
}
#hero-over-view .right .equip-review {
  width: 100%;
  height: 125px;
  background-image: url(../Res/background/bg_equip.jpg);
}
#hero-over-view .right .equip-review ul li {
  float: left;
  width: 25%;
  height: 38px;
}
#hero-over-view .right .equip-review ul li .wrapper {
  width: 85%;
  margin: auto;
  background-image: url(../Res/back-shape/rect.png);
  height: 100%;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}
#hero-over-view .right .equip-review ul li .wrapper .img {
  height: 100%;
  width: 90%;
  margin: auto;
  background-size: 100% 27px;
  background-position: center;
  background-repeat: no-repeat;
}
#hero-over-view .right .army-review {
  background-image: url(../Res/skins/desc-rect.png);
  background-size: 98.5% 104.5%;
  background-position-x: 4px;
  background-position-y: -5px;
  overflow: auto;
  width: 100%;
  height: 108px;
  overflow: auto;
}
#hero-over-view .right .army-review ul {
  width: 80%;
  margin: auto;
  margin-top: 28px;
  overflow: auto;
}
#hero-over-view .right .army-review ul li {
  float: left;
  width: 33.333%;
  height: 38px;
}
#hero-over-view .right .army-review ul li .wrapper {
  width: 85%;
  margin: auto;
  background-image: url(../Res/back-shape/rect.png);
  height: 100%;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}
#hero-over-view .right .army-review ul li .wrapper .img {
  height: 100%;
  width: 90%;
  margin: auto;
  background-size: 100% 28px;
  background-position: center;
  background-repeat: no-repeat;
  overflow: auto;
}
#hero-over-view .right .army-review .wrapper .amount {
  height: 16px;
  width: 100%;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.6);
  line-height: 16px;
  color: white;
  font-weight: bold;
  margin-top: 18.5px;
  border-radius: 0px 0px 5px 5px;
  text-indent: 5px;
}
#hero-over-view .right .row-3 .col-2 {
  width: 196px;
}

#hero-over-view .right .dicor {
  background-image: url(../Res/border/top_panel_helmet_decor.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 50px;
  pointer-events: none;
  margin-top: -14px;
  position: absolute;
}

#hero-over-view .left .hero-data {
  height: 75px;
  width: 100%;
  background-image: url(../Res/background/dialog_bg.jpg);
}

#hero-over-view .left .hero-data .name {
  float: right;
  width: 55%;
  height: 100%;
}
#hero-over-view .left .hero-data .image {
  float: left;
  width: 45%;
  height: 100%;
}

#hero-over-view .left .hero-data .image .wrapper {
  width: 95%;
  margin: auto;
  height: 100%;
  background-image: url(../Res/back-shape/rect.png);
  background-repeat: no-repeat;
  background-position: center;
}
#hero-over-view .left .hero-data .image .wrapper .avatar-hero {
  width: 100%;
  margin: auto;
  height: 100%;
  border-radius: 15px;
  background-image: url(../Res/back-shape/rect.png);
  background-repeat: no-repeat;
  background-position: center;
  overflow: auto;
}

#hero-over-view .left .hero-data .image .wrapper .avatar-hero .lvl {
  background-image: url("../Res/hero/icon_Lv.png");
  line-height: 24px;
  width: 33px;
  text-align: center;
  background-size: 100% 100%;
  color: white;
  font-weight: bold;
  margin: 5px 0px 0px 5px;
}

#hero-over-view .left .hero-data .name .wrapper {
  width: 70%;
  margin: auto;
  margin-top: 15px;
  height: 30px;
  background-image: url("../Res/background/sitenav-bar-bg.jpg");
  background-size: 100% 100%;
  color: white;
  line-height: 30px;
  text-align: center;
  border-radius: 3px;
}

#hero-over-view .hero-points {
  height: 185px;
  background-image: url(../Res/skins/desc-rect.png);
  background-size: 99% 106%;
  background-position-y: -10px;
  overflow: auto;
}
#hero-over-view .hero-points table {
  background-color: white;
  width: 80%;
  text-align: center;
  margin: auto;
  margin-top: 30px;
}
#hero-over-view .hero-points table td {
  padding: 5px 0px;
  color: #81511c;
  font-weight: bold;
}
#hero-over-view .middel {
  background-image: url(../Res/border/sprite_v.png);
  background-size: 100% 100%;
  width: 8px;
  position: absolute;
  height: 100%;
  left: 50%;
  margin-left: -4px;
}

#close-over-lay {
  width: 50px;
  height: 20px;
  float: right;
  margin-right: 5px;
  margin-top: 22px;
}

UPFADE {

  -webkit-animation-name: upfade;  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1.5s;  /* Safari 4.0 - 8.0 */ 
  -webkit-animation-fill-mode: backwards; /* Safari 4.0 - 8.0 */
  animation-name: upfade;
  animation-duration: 2s;  
  animation-delay: 1s;
  animation-fill-mode: backwards;
  animation-iteration-count : infinite;
  -webkit-animation-iteration-count : infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes upfade {
  from {margin-top: 35px; opacity: 1}
  to {margin-top: -20px; opacity: 0}
}

@keyframes upfade {
  from {margin-top: 35px; opacity: 1}
  to {margin-top: -20px; opacity: 0}
}

.army-review{
    width: 90%;
    margin: auto;
    overflow: auto;
}
.army-review li{
    width: 33.33%;
    margin: 0px;
    height: 50px;
    float: left;
    
}
.army-review li .wrapper{
    width: 95%;
    background-image: url(../Res/back-shape/rect.png);
    background-position: center;
    background-size: 100% auto;
    height: 100%;
    margin: auto;
    background-repeat: no-repeat;
}

.army-review li .wrapper .army-unit{
    width: 94%;
    margin: auto;
    background-size: 100% 34px;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    overflow: auto;
    border-radius: 5px;
   
}
.army-review li .wrapper .army-unit .amount{
    color: white;
    font-weight: bold;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 0px 0px 3px 3px;
    margin: auto;
    margin-top: 27px;

}

#hero-dial-over-view  .row-4{
    height: 136px;
}
#hero-dial-over-view #after-ajax-hero-army{
    height: 100%;
    overflow: auto;
}
#hero-dial-over-view #after-ajax-hero-army .army-review{
    margin-top: 30px;
}

#hero-dial-equip .row-4{
    height: 149px;
}
#hero-dial-equip #after-ajax-hero-army .army-review{
    margin-top: 30px;
}
#hero-dial-equip .equip table td .wrapper{
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    overflow: auto;
}
#hero-dial-equip .equip table td .EquiUnitWrapper{
    background-image: url(../Res/back-shape/rect.png);
}

#hero-dial-equip .equip table td .wrapper button{
    height: 87%;
    display: block;
    width: 93%;
    margin: auto;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border-radius: 0px;
    margin-top: 2px;
}
#equip-list-heroDia .unite-eq .avail_equip{
    background-size: 100% 100%;
}

#hero-dial-camp .row-4{
    height: 136px;
}

#hero-dial-camp #after-ajax-hero-army{
    height: 100%;
    overflow: auto;
}
#hero-dial-camp #after-ajax-hero-army .army-review{
    margin-top: 30px;
}
#dialg_box .box_content .right-content .equi_preveiw ul li{
    width: 20% ;
    margin: 0px;
    height: 36px;
    
}
.box_content .right-content .equi_preveiw ul li .wrapper{
    width: 92%;
    margin: auto;
    background-image: url(../Res/back-shape/rect.png);
    background-size: 100% auto;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.box_content .right-content .equi_preveiw ul li .wrapper .img{
    width: 94%;
    height: 100%;
    background-size: 100% 26px;
    background-position: center;
    margin: auto;
    background-repeat: no-repeat;
    
}
.box_content .right-content .equi_preveiw{
    overflow: auto;
}
.box_content .right-content .equi_preveiw ul{
    margin-top: 10px;
    height: auto;
}
#hero-left-ol li ,#hero-right-ol  li{
    width: 33.33% !important;
    margin: 0px !important;
    height: 52px !important;
  
}
#hero-left-ol  , #hero-right-ol {
    width: 90% !important;
    margin: auto;
}
#hero-left-ol .unit-wrapper,
#hero-right-ol .unit-wrapper{
    width: 95%;
    height: 100%;
    background-image: url(../Res/back-shape/rect.png);
    background-size: 100% 42px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    padding: 4px;
    margin: auto;
}

#hero-left-ol .unit-wrapper .img-bg,
#hero-right-ol .unit-wrapper .img-bg{
    height: 36px;
    background-size: 100% 100%;
    background-position: center;    
    width: auto;
    position: static;
    margin: auto;
}
#hero-left-ol .amount ,#hero-right-ol .amount{
    margin-top: -22px !important;
    width: 78px !important;
}

.hero_up_lvl , .FIRE_HERO{
    width: 70px;
    font-size: 14px;
}
#god-gate {
  height: 435px;
  margin-top: -20px;
}

#god-gate .content-wrapper {
  width: 100%;
  height: 100%;
  background-image: url(../Res/godGate/godGate-bg.jpg);
  background-size: 100% 100%;
  position: relative;
}

#god-gate .content-wrapper .god-container {
  width: 180px;
  height: 160px;
  position: absolute;
  background-repeat: no-repeat;
  transition: all linear 0.1s;
}

#god-gate .content-wrapper .god-container:hover {
  transform: scale(1.03);
}

#god-1 {
  background-image: url(../Res/godGate/god-1.png);
  background-position: center;
  background-size: contain;
}
#god-2 {
  background-image: url(../Res/godGate/god-2.png);
  background-position: center;
  background-size: contain;
}
#god-3 {
  background-image: url(../Res/godGate/god-3.png);
  background-position: center;
  background-size: contain;
}
#god-4 {
  background-image: url(../Res/godGate/god-4.png);
  background-position: center;
  background-size: contain;
}

#god-gate .content-wrapper .text-val {
  width: 90px;
  color: #e2952b;
  font-size: 16px;
  position: absolute;
  text-align: center;
  left: 50%;
}

#godGate-rank {
  width: 40px;
  height: 60px;
  left: 25px;
  top: 0px;
  position: absolute;
  background-image: url(../Res/icon-menu/6_n.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#godGate-rank:hover {
  background-image: url(../Res/icon-menu/6_h.png);
}
#godGate-rank:active {
  background-image: url(../Res/icon-menu/6_a.png);
}
#godGate-rank:disabled {
  background-image: url(../Res/icon-menu/6_d.png);
}
#godGate-rank .text {
  color: #e2952b;
  font-size: 12px;
  text-align: center;
  position: absolute;
  top: 40px;
  width: 100%;
  font-weight: bold;
}

#god-gate .content-wrapper .player-points {
  width: 160px;
  height: 35px;
  background-image: url(../Res/btns/ui_timer.png);
  position: absolute;
  left: 50%;
  margin-left: -80px;
  top: 50%;
  margin-top: -17.5px;
  background-size: 100% 100%;
  color: white;
}

#god-gate .content-wrapper .player-points label {
  display: block;
  float: left;
  width: 75%;
  height: 100%;
  text-align: center;
  line-height: 35px;
  font-size: 14px;
}
#god-gate .content-wrapper .player-points .wrapper {
  display: block;
  float: right;
  width: 25%;
  height: 100%;
  text-align: center;
  line-height: 35px;
  font-size: 14px;
}
#god-gate .content-wrapper .player-points .wrapper {
  background-position: left center;

  background-repeat: no-repeat;
}
#god-gate .content-wrapper .player-points .wrapper .pluse {
  width: 22px;
  height: 22px;
  display: block;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  margin-top: 6px;
}
.pluse {
  background-image: url(../Res/icons/pluse.png);
}
.pluse:hover {
  background-image: url(../Res/icons/pluse-h.png);
}
.pluse:active {
  background-image: url(../Res/icons/pluse-a.png);
}

#godGateBtnWrapper {
  width: 64px;
  height: 64px;
  position: fixed;
  left: 5px;
  bottom: 210px;
  z-index: 100;
  transition: all 0.8s ease-in-out;
}
#godGateBtnWrapper button {
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url(../Res/godGate/godGate.png);
}
#godGateBtnWrapper button:hover {
  transform: scale(1.03);
  transition: all linear 0.2s;
}

.gray-filter {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.score-1 {
  color: white;
}
.score-2 {
  color: #769c24;
}
.score-3 {
  color: #13acac;
}
.score-4 {
  color: #aa00aa;
}
.score-5 {
  color: #e2952b;
}

#godGateBox {
  width: 480px;
  height: 350px;
  position: absolute;
  top: 180px;
  left: 50%;
  margin-left: -240px;
  background-image: url(../Res/skins/palace.png);
  background-size: 100% 100%;
}

#godGateBox .content-wrapper {
  width: 87%;
  height: 65%;
  margin: auto;
  background-image: url(../Res/godGate/godGateBoxBg.png);
  background-size: 100% 100%;
  margin-top: 54px;
  overflow: auto;
}

#godGateBox .btn-wrapper {
  width: 87%;
  margin: auto;
  height: 55px;
  background-image: url("../Res/background/sitenav-bar-bg.jpg");
  background-size: auto 80%;
  background-position: center;
  background-repeat: repeat-x;
}
#godGateBox .btn-wrapper .btns-group {
  width: 40%;
  height: 100%;
  float: right;
}
#godGateBox .btn-wrapper .text-group {
  width: 55%;
  height: 100%;
  float: right;
}

#godGateBox .btn-wrapper .text-group label {
  width: 45%;
  display: inline-block;
  font-size: 14px;
  line-height: 55px;
  color: white;
}
#godGateBox .btn-wrapper .text-group label span {
  color: #4c7f47;
}

#change-gate-cell {
  display: block;
  float: right;
  margin-right: 15px;
  height: 32px;
  margin-top: 10px;
  width: 106px;
  background-color: transparent;
  color: white;
  line-height: 32px;
  text-align: center;
  font-size: 15px;
}
#godGateBox .btn-wrapper .pluse {
  width: 25px;
  height: 25px;
  display: block;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 25px 25px;
  margin-top: 15px;
  float: right;
  margin-right: 15px;
}

#godGateBox .content-wrapper .scoreBord {
  width: 70px;
  height: 73px;
  background-image: url(../Res/godGate/scoreBord.png);
  position: absolute;
  background-size: 100% 100%;
  top: 30px;
  left: 15px;
}
#godGateBox .content-wrapper .scoreBord {
  width: 70px;
  height: 73px;
  background-image: url(../Res/godGate/scoreBord.png);
  position: absolute;
  background-size: 100% 100%;
  top: 30px;
  left: 15px;
  color: #ac340f;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
}
#godGateBox .content-wrapper .scoreBord div {
  margin-top: 32px;
}

#godGateBox .content-wrapper .godName {
  height: 40px;
  width: 80%;
  margin: auto;
  margin-top: 12px;
}

#godGateBox .content-wrapper .godName .name {
  height: 100%;
  width: 45%;
  float: right;
  text-align: center;
  line-height: 40px;
  background-image: url(../Res/godGate/godName.png);
  background-position: center;
  background-repeat: no-repeat;
  color: #e2952b;
  font-weight: bold;
  font-size: 16px;
}

#godGateBox .content-wrapper ul {
  margin-top: 6px;
  overflow: auto;
}
#godGateBox .content-wrapper ul li {
  width: 80%;
  height: 32px;
  margin: auto;
  margin-top: 5px;
  background-image: url(../Res/godGate/listItem.png);
  background-size: 100% 100%;
}
#godGateBox .content-wrapper ul li .lock {
  height: 100%;
  width: 15%;
  float: right;
  margin-right: 1%;
}
#godGateBox .content-wrapper ul li .lock label {
  background-image: url(../Res/box/lock.png);
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 94%;
}
#godGateBox .content-wrapper ul li .effect {
  width: 55%;
  height: 100%;
  float: right;
}
#godGateBox .content-wrapper ul li .effect div {
  float: right;
  margin-left: 6px;
  line-height: 32px;
  font-size: 14px;
  width: 30%;
  text-align: center;
}
#godGateBox .content-wrapper ul li .checkBox {
  float: right;
  width: 8%;
  height: 100%;
  position: relative;
}
#godGateBox .content-wrapper ul li .checkBox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
#godGateBox .content-wrapper ul li .checkBox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(../Res/godGate/checkMark.png);
  background-size: 100% 100%;
  background-color: transparent;
}

#godGateBox .content-wrapper ul li .checkBox .chackable:hover {
  background-image: url(../Res/godGate/checkedMark.png);
}
#godGateBox .content-wrapper ul li .checkBox .checked {
  background-image: url(../Res/godGate/checkedMark.png);
}
#godGateBox .content-wrapper ul li .open-fourth-cell .pluse {
  width: 22px;
  height: 32px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  margin: auto;
}
#godGateBox .content-wrapper ul li .closeWord {
  color: #ac340f;
  width: 20%;
  float: right;
  text-align: center;
  font-size: 14px;
  line-height: 32px;
}

#godGateBox .content-wrapper .close-godGateBox {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 25px;
  right: 7px;
  background: url(../Res/btns/close_b.png) no-repeat transparent;
  background-position: center;
  background-size: 80%;
}

#helpGateBtnWrapper {
  width: 55px;
  height: 56px;
  position: fixed;
  left: 74px;
  bottom: 212px;
  z-index: 100;
  transition: all 0.8s ease-in-out;
}

#helpGateBtnWrapper button {
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url(../Res/btns/helpGate.png);
  border-radius: 50%;
  position: absolute;
}
#helpGateBtnWrapper button:hover {
  background-position-y: -56px;
}
#helpGateBtnWrapper button:active {
  background-position-y: -112px;
}

#ArenaChallangeBtnWrapper {
  width: 60px;
  height: 60px;
  position: fixed;
  left: 135px;
  bottom: 212px;
  z-index: 100;
  transition: all 0.8s ease-in-out;
}

#ArenaChallangeBtnWrapper button {
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url(../Res/btns/arenaChallange.png);
  position: absolute;
  background-size: 90% auto;
  background-repeat: no-repeat;
  background-position: center;
}
#ArenaChallangeBtnWrapper button:hover {
  transform: scale(1.02);
  transition: all linear 0.1s;
}
#godGateBtnWrapper button:hover {
  transform: scale(1.03);
  transition: all linear 0.2s;
}
#godGateBtnWrapper .fire {
  width: 64px;
  height: 54px;
  position: absolute;
  background-image: url(../Res/animation/fireBtn.png);
  position: absolute;
  top: 20px;
  left: 7px;
  z-index: -1;
}
#helpGateBtnWrapper .fire-tail {
  width: 100%;
  height: 100%;
  background-image: url(../Res/helpGate/fireTail.png);
  position: absolute;
  /*animation: antiClockwiseSpin 2.5s infinite linear;*/
  pointer-events: none;
  transition: all 0.8s ease-in-out;
}

#equip-blessing {
  background-image: url(../Res/skins/palace.png);
  background-size: 100% 100%;
  border: none;
  width: 96%;
  margin-top: -24px;
  height: 89.5%;
  position: relative;
}

#equip-blessing .full {
  width: 92% !important;
  float: none;
  position: absolute;
  margin-left: 4%;
  height: 85%;
  top: 49px;
}
#equip-blessing .up-wrapper .col-1 .up .section .title,
#equip-blessing .up-wrapper .col-3 .up .section .title {
  color: #5e341b;
  font-size: 18px;
  text-align: center;
  font-weight: bolder;
  margin-top: 22px;
}
#equip-blessing .up-wrapper .col-1 .up .section ul li,
#equip-blessing .up-wrapper .col-3 .up .section ul li {
  text-align: right;
  font-size: 14px;
  color: #5f8c00;
  width: 75%;
  margin: auto;
}
#equip-blessing .up-wrapper .col-1 .up .section,
#equip-blessing .up-wrapper .col-3 .up .section {
  height: 100%;
  width: 50%;
}
#equip-blessing .up-wrapper,
#equip-blessing .up-wrapper .col-1 .up,
#equip-blessing .up-wrapper .col-1 .down,
#equip-blessing .up-wrapper .col-3 .up,
#equip-blessing .up-wrapper .col-3 .down,
#equip-blessing .down-wrapper {
  width: 100%;
  height: 50%;
}

#equip-blessing .up-wrapper .col-1 .down .desc,
#equip-blessing .up-wrapper .col-3 .down .desc {
  font-size: 14px;
  color: #5f8c00;
  text-align: right;
  width: 90%;
  margin: auto;
  margin-top: 15px;
}

#equip-blessing .up-wrapper .col-1 .up .image-wrapper .image,
#equip-blessing .up-wrapper .col-3 .up .image-wrapper .image {
  height: 82%;
  width: 93%;
  margin: auto;
  margin-top: 5px;
  border-radius: 5px;
  background-size: 100% 100%;
}
#equip-blessing .up-wrapper .col-1 .up .image-wrapper,
#equip-blessing .up-wrapper .col-3 .up .image-wrapper {
  width: 90%;
  margin: auto;
  height: 71px;
  margin-top: 21px;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% auto;
  overflow: auto;
  background-repeat: no-repeat;
}

#equip-blessing .up-wrapper .col-1,
#equip-blessing .up-wrapper .col-3 {
  width: 38%;
  height: 100%;
  background-image: url(../Res/skins/desc-rect.png);
  background-size: 100% 100%;
}

#equip-blessing .up-wrapper .col-2 {
  width: 24%;
  height: 100%;
  background-image: url(../Res/skins/solidRect.png);
  background-size: 100% 100%;
}

#equip-blessing .up-wrapper .col-2 .arrow {
  width: 100%;
  height: 50px;
  margin-top: 30px;
}

#equip-blessing .up-wrapper .col-2 .arrow button {
  width: 80px;
  height: 30px;
  background-size: 100% auto;
  background-image: url(../Res/arrow/rightSolid.png);
  background-color: transparent;
  margin: auto;
  display: block;
}
#equip-blessing .up-wrapper .col-2 .arrow button:hover {
  background-position-y: -29px;
}
#equip-blessing .up-wrapper .col-2 .arrow button:active {
  background-position-y: -57.5px;
}
#equip-blessing .up-wrapper .col-2 .big-btn {
  float: none;
  margin: 15px auto;
}
#equip-blessing .down-wrapper .left {
  width: 38%;
  height: 96%;
  background-image: url(../Res/skins/solidSquare.png);
  background-size: 100% 100%;
}

#equip-blessing .down-wrapper .left ul {
  width: 90%;
  margin: auto;
  padding-top: 15px;
}
#equip-blessing .down-wrapper .left ul li button {
  width: 40%;
  height: 28px;
  font-size: 14px;
  color: #5e341b;
  margin: auto;
  margin-top: 10px;
  display: block;
}

#equip-blessing .left-content {
  background: none;
}

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

#menu-bar .left .wrapper-icon {
  width: 40px;
  height: 40px;
  background-image: url(../Res/btns/bg/round_button_normal.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#menu-bar .left .wrapper-icon .icon {
  width: 100%;
  height: 100%;
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
}

#menu-bar .left .wrapper-icon:hover {
  background-image: url(../Res/btns/bg/round_button_hover.png);
}

.red-btn-wide {
  background-image:
    url(../Res/btns/parts/red-n-l.jpg), url(../Res/btns/parts/red-n-r.jpg),
    url(../Res/btns/parts/red-n-m.jpg);
  background-position-y: center;
  background-position-x: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-size: auto 100%;
}

.red-btn-wide:hover {
  background-image:
    url(../Res/btns/parts/red-h-l.jpg), url(../Res/btns/parts/red-h-r.jpg),
    url(../Res/btns/parts/red-h-m.jpg);
}
.red-btn-wide:active {
  background-image:
    url(../Res/btns/parts/red-a-l.jpg), url(../Res/btns/parts/red-a-r.jpg),
    url(../Res/btns/parts/red-a-m.jpg);
}
.red-btn-wide:disabled {
  background-image:
    url(../Res/btns/parts/red-d-l.jpg), url(../Res/btns/parts/red-d-r.jpg),
    url(../Res/btns/parts/red-d-m.jpg);
}

.smallAcce {
  background-image: url(../Res/btns/smallAcce-n.png);
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

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

.select-input {
  background-image: url(../Res/input/select-btn.png);
  background-size: 100% 100%;
  background-position: center;
  min-height: 32px;
  min-width: 160px;
}

.select-input .value {
  width: 80%;
  float: left;
  text-align: center;
}

.select-input:hover {
  background-image: url(../Res/input/select-btn-h.png);
}
.select-input:active {
  background-image: url(../Res/input/select-btn-active.png);
}

#move-city-to {
  padding-top: 15px;
}

#move-city-to .header-wrapper .select-input .value {
  line-height: 28px;
}
#move-city-to .header-wrapper .wrapper {
  width: 84%;
  margin: auto;
  justify-content: space-between;
}

#move-city-to .header-wrapper .wrapper .con-btn .relocate {
  color: white;
  font-weight: bold;
  padding: 7px 5px;
}

#move-city-to .body-wrapper .content {
  width: 84%;
  height: 150px;
  background-image: url(../Res/skins/desc-rect.png);
  margin: auto;
  background-position-y: -10px;
  background-size: 100% 106%;
  margin-top: 5px;
}

.select-list .option {
  background-image: url(../Res/background/column.png);
  position: absolute;
  background-size: 100% 100%;
  z-index: 0;
  height: 0px;
}

.select-list .option ul {
  width: 85%;
  margin: auto;
  margin: 8px auto;
}
.select-list .option ul li {
  text-align: center;
  line-height: 25px;
  background-size: 100% 100%;
}

.select-list .option ul li.selected-op {
  color: white;
  font-weight: bold;
  background-image: url(../Res/selelct/select-row.png);

  text-align: center;
  line-height: 25px;
}
.select-list .option ul li:hover {
  background-image: url(../Res/selelct/select-rect.png);
  color: white;
}

#move-city-to .select-list .option {
  width: 160px;
  overflow: hidden;
  background-size: 100% 100%;
}

#dialg_box.guild_dialog_box .nav_icon {
  position: relative;
}
#dialg_box.guild_dialog_box .nav_icon .drop-list {
  top: 42px;
}

#msg-area .msg-body .quote::before {
  content: "\201C";
}

#msg-area .msg-body .quote::after {
  content: "\201D";
}

#msg-area .msg-body .quote {
  color: black;
  background-color: #9d6700;
  padding: 3px 5px;
  color: black;
  font-weight: bold;
  border-radius: 3px;
  max-width: 126px;
}
#msg-area .msg-body .q-r {
  margin-top: -8px;
  text-indent: 140px;
}

.solidBg {
  background-image: url(../Res/skins/SolidBg.png);
  background-size: 100% 100%;
}

#dialg_box .contributeBox .topBox {
  height: 50%;
}
#dialg_box .contributeBox .bottomBox {
  height: 50%;
}

#dialg_box .contributeBox .col-i {
  width: 25%;
  height: 100%;
  background-image: url(../Res/skins/solidRect.png);
  background-size: 100% 100%;
}
#dialg_box .contributeBox .col-ii {
  width: 38%;
  height: 100%;
  background-image: url(../Res/skins/solidSquare.png);
  background-size: 100% 100%;
}
#dialg_box .contributeBox .col-iii {
  width: 75%;
  height: 100%;
  background-image: url(../Res/skins/SolidBg.png);
  background-size: 100% 100%;
}
#dialg_box .contributeBox .buttonWrapper:first-child {
  margin-top: 15px;
}

#dialg_box .contributeBox .buttonWrapper {
  width: 50%;
  line-height: 25px;
  margin: auto;
  margin-top: 5px;
  text-align: center;
}

#dialg_box .contributeBox .col-iii .ReqList {
  width: 100%;
  height: 100%;
}

#dialg_box .contributeBox .col-iii .ReqList ul {
  height: 60%;
  width: 96%;
  margin: auto;
}
#dialg_box .contributeBox .col-iii .ReqList ul li {
  width: 20%;
  height: 100%;
}
#dialg_box .contributeBox .col-iii .ReqList ul .ReqUnit {
  margin: 0px 5px;
  height: 100%;
  overflow: hidden;
}

#dialg_box .contributeBox .col-iii .ReqList ul .ReqUnit .Reqimage {
  height: 60%;
}
#dialg_box .contributeBox .col-iii .ReqList ul .ReqUnit .Reqimg {
  height: 100%;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 5px;
  margin: 1px 3px;
}
#dialg_box .contributeBox .col-iii .ReqList ul .ReqUnit .ReqBg {
  height: 100%;
  width: 100%;
  background-image: url(../Res/back-shape/rect.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
}

.uiCheckedBox {
  background-image: url(../Res/BtnCover/BoxChecked.png);
  background-position: center;
  background-repeat: no-repeat;
}
.uiUnCheckBox {
  background-image: url(../Res/BtnCover/BoxUnChecked.png);
  background-position: center;
  background-repeat: no-repeat;
}

.uiCheckedRadio {
  background-image: url(../Res/BtnCover/RadioChecked.png);
  background-position: center;
  background-repeat: no-repeat;
}
.uiUnCheckRadio {
  background-image: url(../Res/BtnCover/RadioUnChecked.png);
  background-position: center;
  background-repeat: no-repeat;
}

.uiBtnCloseDown {
  background-image: url(../Res/BtnCover/closeDownN.png);
  background-position: center;
  background-repeat: no-repeat;
}

.uiBtnCloseDown:hover {
  background-image: url(../Res/BtnCover/closeDownH.png);
  background-position: center;
  background-repeat: no-repeat;
}
.uiBtnCloseDown:active {
  background-image: url(../Res/BtnCover/closeDownA.png);
  background-position: center;
  background-repeat: no-repeat;
}
.uiBtnCloseDown:disabled {
  background-image: url(../Res/BtnCover/closeDownD.png);
  background-position: center;
  background-repeat: no-repeat;
}

.rightMark {
  background-image: url(../Res/BtnCover/rightMark.png);
  background-position: center;
  background-repeat: no-repeat;
}

#dialg_box .contributeBox .col-iii .ReqList ul .ReqUnit .ReqAmount {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

#dialg_box .contributeBox .col-iii .ReqList ul .ReqUnit .ReqTitle {
  line-height: 25px;
  text-align: center;
}

#dialg_box .contributeBox .col-i .success-rate {
  font-size: 14px;
  margin-top: 15px;
  text-align: center;
}

#dialg_box .contributeBox .col-i .full-btn-3x {
  width: 60%;
  line-height: 50px;
  margin: auto;
  margin-top: 35px;
  font-size: 16px;
  text-align: center;
}

#dialg_box .contributeBox .wordsCol {
  font-size: 16px;
  text-align: right;
  margin-right: 15px;
  line-height: 20px;
  color: #008c00;
}

#dialg_box .contributeBox .wordsCol {
  width: 100%;
}

#dialg_box .contributeBox .ReqFixed {
  text-align: right;
  width: 90%;
  margin: auto;
  font-size: 16px;
}
#dialg_box .contributeBox .achieved {
  color: #008c10;
}
#dialg_box .contributeBox .ReqFixed {
  color: #a67939;
}
#dialg_box .contributeBox .not-achieved {
  color: #ef3b3a;
}

#ContSelectedReqConf button {
  line-height: 26px;
  font-size: 14px;
  width: 100px;
  margin: auto;
  display: block;
  margin-top: 5px;
  margin-bottom: -5px;
}
#ArenaChallangeHome {
  width: 100%;
  height: 100%;
}

#ArenaChallangeHome .col-i {
  width: 45%;
  height: 100%;
  background-size: 100% 100%;
}
#ArenaChallangeHome .col-ii {
  width: 55%;
  height: 100%;
  /*background-image: url(../Res/skins/solidSquare.png);*/
  background-size: 100% 100%;
}

#ArenaChallangeHome .col-ii .row-i {
  width: 100%;
  height: 40%;
  overflow: auto;
}
#ArenaChallangeHome .col-ii .row-ii {
  width: 100%;
  height: 60%;
  background-size: 100% 100%;
}

#ArenaChallangeHome .col-i .RankList {
  background: url(../Res/icons/bg_patern.png);
}

#ArenaChallangeHome .col-i .RankList .tr {
  height: 37.2px;
  display: flex;
}

#ArenaChallangeHome .col-i .RankList .tr div {
  line-height: 37px;
}

#ArenaChallangeHome .RankList .guildIcon {
  width: 30px;
  height: 30px;
}

#ArenaChallangeHome .RankList .guildIcon .image-slog {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

#ArenaChallangeHome .RankList .guildName {
  width: 60px;
}
#ArenaChallangeHome .RankList .tr .full-btn-3x {
  line-height: 24px;
  padding: 0px 5px;
}

#ArenaChallangeHome .col-ii .row-i .li {
  font-size: 16px;
  line-height: 20px;
  direction: rtl;
}

#ArenaChallangeHome .col-ii .arenaChallangePrief {
  width: 90%;
  margin: auto;
  margin-top: 15px;
  color: #79582e;
}

#ArenaChallangeHome .col-ii .arenaChallangePrief .red {
  color: #e30c0c;
}
#ArenaChallangeHome .col-ii .arenaChallangePrief .green {
  color: #76b852;
}

#ArenaChallangeHome .col-ii .arenaChallangePrief .buyBtn {
  line-height: 25px;
  padding: 0px 10px;
  margin: 0px 5px;
  color: #5e341b;
  font-weight: bold;
}
#ArenaChallangeHome .col-ii .prizeListWrapper {
  width: 50%;
  height: 100%;
  background-image: url(../Res/skins/solidRect.png);
  background-size: 100% 100%;
}

#ArenaChallangeHome .col-ii .prizeListWrapper ul {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: auto;
}
#ArenaChallangeHome .col-ii .prizeListWrapper li {
  width: 33%;
  height: 30px;
  line-height: 30px;
  margin-bottom: 3px;
}

#heroArenaSelectList {
  width: 27%;
  height: 100%;
  background: url(../Res/icons/bg_patern.png);
  background-size: 100% 100%;
}

#ArenaChallangeHome .heroControlBtns {
  width: 8%;
  height: 100%;
}

#ArenaChallangeHome .heroControlBtns .border {
  width: 7%;
  height: 100%;
  background-image: url(../Res/border/sprite_v.png);
  background-repeat: repeat-y;
  background-size: 100% auto;
}

#ArenaChallangeHome .heroControlBtns .content {
  width: 86%;
  height: 100%;
  background-image: url(../Res/skins/solidRect.png);
  background-size: auto 120%;
  background-position: -50px -50px;
}

#ArenaChallangeHome .arenaHeroList {
  width: 25%;
  height: 100%;
}
#ArenaChallangeHome .arenaChallangeReview {
  width: 40%;
  height: 100%;
  background-image: url(../Res/skins/solidRect.png);
  background-size: auto 150%;
  background-position: -50px -50px;
}

#ArenaChallangeHome .arenaChallangeReview .border {
  width: 2%;
  height: 100%;
  background-image: url(../Res/border/sprite_v.png);
  background-repeat: repeat-y;
  background-size: 100% auto;
}

#ArenaChallangeHome .prize-row {
  width: 100%;
  height: 40px;
  margin: 0px;
  display: flex;
  flex-direction: row-reverse;
}
#ArenaChallangeHome .prize-row li,
#ArenaChallangeHome .prize-row ul {
  float: none;
  color: inherit;
}

#ArenaChallangeHome #selectHeroCity {
  width: 40%;
  margin-top: 10px;
  margin-left: 10px;
}

#ArenaChallangeHome #selectHeroCity .select-list .option {
  width: 120px;
  background-size: 100% 100%;
  overflow: hidden;
  z-index: 10;
}

#ArenaChallangeHome #selectHeroCity .select-input {
  width: 74%;
  min-width: 100px;
  min-height: 26px;
  line-height: 23px;
}

#ArenaChallangeSlog {
  width: 120px;
  height: 80px;
  margin-left: 15px;
  margin-top: 5px;
}

#ArenaChallangeSlog .slog {
  width: 100%;
  height: 100%;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.goRight {
  background-image: url(../Res/arrow/go-right-n.png);
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.goRight:hover {
  background-image: url(../Res/arrow/go-right-h.png);
}
.goRight:active {
  background-image: url(../Res/arrow/go-right-a.png);
}
.goRight:disabled {
  background-image: url(../Res/arrow/go-right-d.png);
}

.goLeft {
  background-image: url(../Res/arrow/go-left-n.png);
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.goLeft:hover {
  background-image: url(../Res/arrow/go-left-h.png);
}
.goLeft:active {
  background-image: url(../Res/arrow/go-left-a.png);
}
.goLeft:disabled {
  background-image: url(../Res/arrow/go-left-d.png);
}

.goDown {
  background-image: url(../Res/arrow/go-right-n.png);
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(90deg);
}
.goDown:hover {
  background-image: url(../Res/arrow/go-right-h.png);
}
.goDown:active {
  background-image: url(../Res/arrow/go-right-a.png);
}
.goDown:disabled {
  background-image: url(../Res/arrow/go-right-d.png);
}

.goUp {
  background-image: url(../Res/arrow/go-left-n.png);
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(90deg);
}
.goUp:hover {
  background-image: url(../Res/arrow/go-left-h.png);
}
.goUp:active {
  background-image: url(../Res/arrow/go-left-a.png);
}
.goUp:disabled {
  background-image: url(../Res/arrow/go-left-d.png);
}

#ArenaChallangeHome .heroControlBtns .content .btnBlock {
  width: 100%;
  height: 50px;
  margin-top: 25px;
  margin-bottom: 40px;
}

#ArenaChallangeHome .heroControlBtns .content .btnBlock .full-btn-2x {
  width: 80%;
  height: 50%;
  margin: auto;
  display: block;
  display: flex;
  align-items: center;
}

#ArenaChallangeHome .heroControlBtns .content .btnBlock .cb {
  display: block;
  width: 100%;
  height: 60%;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}

#ArenaChallangeHome .arenaChallangeReview .content {
  width: 100%;
  height: 100%;
}

#ArenaChallangeHome .arenaChallangeReview .content .title {
  width: 45%;
  margin: auto;
}
#ArenaChallangeHome .arenaChallangeReview .content .playerProfileImage {
  width: 70%;
  display: flex;
  flex-flow: column;
}
#ArenaChallangeHome .arenaChallangeReview .content .playerProfile {
  margin-top: -20px;
}
#ArenaChallangeHome .arenaChallangeReview .content .arenaChallangeProfile {
  width: 40%;
  height: 100%;
}
#ArenaChallangeHome .arenaChallangeReview .content .avatar-img img {
  width: 90px;
}
#ArenaChallangeHome .arenaChallangeReview .content .avatar-img {
  height: 150px;
}
#ArenaChallangeHome .arenaChallangeReview .content .avatar-name {
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  background-image: url("../Res/background/p_name_n.png");
  background-position: center;
  background-repeat: no-repeat;
  height: 35px;
  color: white;
  margin-top: -20px;
}

#ArenaChallangeHome .arenaChallangeReview .arenaChallangeProfile {
  margin-top: 10px;
  margin-right: 15px;
  text-align: right;
  font-size: 14px;
  color: #79582e;
  line-height: 24px;
}
#ArenaChallangeHome .arenaChallangeReview .th::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: 42px;
  pointer-events: none;
}
#ArenaChallangeHome .arenaChallangeReview .arenaKingPrize {
  width: 100%;
  height: 170px;
}
#ArenaChallangeHome .arenaChallangeReview .arenaKingPrize .bg {
  width: 95%;
  height: 100%;
  margin: auto;
}

#ArenaChallangeHome .arenaChallangeReview .arenaKingPrize ul {
  display: flex;
  flex-flow: wrap;
  margin-top: 24px;
}
#ArenaChallangeHome .arenaChallangeReview .arenaKingPrize ul li {
  width: 25%;
  height: 36px;
  line-height: 36px;
}
#ArenaChallangeHome .arenaHeroList .banner-red {
  width: 80%;
  margin: auto;
}

#ArenaChallangeHome .tr {
  height: 31.5px;
}

#heroArenaSelectList .heroCityList .ol {
  height: 347px;
  overflow: hidden;
}

#ArenaChallangeRankList {
  width: 100%;
  height: 100%;
}
#ArenaChallangeRankList .tr {
  height: 33px;
  line-height: 33px;
  font-size: 16px;
}

#ArenaChallangeHome .right-content-footer {
  margin-top: -39px;
}

#ArenaChallangeRankList.RankList .cont {
  display: flex;
  margin: auto;
  width: 150px;
  flex-basis: content;
}

#useAttemptBox {
  height: 20px;
  width: 20px;
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: top;
  margin-bottom: 8px;
}

#useArenaExpBox {
  height: 20px;
  width: 20px;
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 10px;
}

.showCityHero {
  width: 80%;
  height: 60%;
  text-align: center;
}
.showCityHero img {
  margin: auto;
}

#NavSelectList {
  margin-top: 22px;
  line-height: 33px;
  font-size: 14px;
  font-weight: bold;
}

#guild-flags-owned .tr {
  height: 27px;
}

#guild-flag-list .tr .icon {
  width: 22px;
  height: 30px;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}

#guild-flag-list .tr .val {
  width: 40px;
  text-align: center;
  font-size: 12px;
}

#guild-flag-list .tr .show-flag-btn {
  width: 62px;
  height: 25px;
  margin-top: 5px;
}
#guild-flag-list .tr div {
  width: 73px;
}

#total-tax-resource {
  width: 500px;
}

#total-tax-resource ol li {
  width: 80px;
}

#total-tax-resource ol {
  width: 100%;
  margin-left: 0;
  margin-top: 0;
  overflow: hidden;
}

#total-tax-resource li {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
#PlayerTeamWrapper {
  width: 60px;
  height: 60px;
  position: fixed;
  left: 200px;
  bottom: 212px;
  z-index: 100;
  transition: all 0.8s ease-in-out;
}
#PlayerTeamWrapper .slog {
  width: 64px;
  height: 64px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.8s ease-in-out;
}
#PlayerTeamWrapper .NoTeamIcon {
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url(../Res/btns/PlayerTeamBtn-n.png);
  position: absolute;
  background-size: 90% auto;
  background-repeat: no-repeat;
  background-position: center;
}
#PlayerTeamWrapper .NoTeamIcon:hover {
  background-image: url(../Res/btns/PlayerTeamBtn-h.png);
}
#PlayerTeamWrapper .NoTeamIcon:active {
  background-image: url(../Res/btns/PlayerTeamBtn-a.png);
}

#TeamBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row;
}
#TeamBoxLeft {
  width: 35%;
  height: 100%;
  display: flex;
  flex-flow: column;
}

#TeamProfileBox {
  width: 100%;
  height: 50%;
  background-image: url(../Res/skins/solidSquare.png);
  background-size: 100% 100%;
}
#TeamProfileBox .ProfileData {
  height: 77%;
  background-size: 100% 100%;
  display: flex;
  flex-flow: row;
  width: 95%;
  margin: auto;
  margin-top: 5px;
}

#TeamProfileBox .TeamSlog {
  height: 100%;
  width: 45%;
}
#TeamProfileBox .SlogContainer {
  height: 100%;
  width: 100%;
  background-image: url(../Res/background/frame.png);
  background-position: center;
  background-repeat: no-repeat;
}
#TeamProfileBox .SlogContainer .slog {
  width: 100%;
  height: 150px;
  background-position: center;
  background-size: 80% auto;
  background-repeat: no-repeat;
}

#TeamProfileBox .TeamListData {
  width: 55%;
  height: 100%;
}

#TeamProfileBox .TeamListData ul {
  width: 100%;
}

#TeamProfileBox .TeamListData ul li {
  width: 90%;
  margin-left: 10px;
  margin-top: 5px;
  line-height: 32px;
  height: 32px;
  background-image: url(../Res/background/profile_data.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-flow: row;
}

#TeamProfileBox .TeamListData ul li .icon {
  width: 25%;
  height: 100%;
  background-position: center;
  background-size: 60% auto;
  background-repeat: no-repeat;
}

#TeamProfileBox .TeamListData ul li .title {
  font-size: 14px;
  margin-left: 5px;
  color: white;
}

#TeamProfileBox .TeamName .name {
  width: 60%;
  display: block;
  margin: auto;
  background-image: url(../Res/background/p_name_n.png);
  height: 32px;
  text-align: center;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
}

#TeamProfileBox .TeamName .name div {
  margin-top: -8px;
  font-size: 18px;
}

#TeamIntroBox {
  width: 100%;
  height: 50%;
  background-image: url(../Res/skins/solidSquare.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

#TeamIntroBox .Header {
  background-image: url(../Res/border/border-h_.png);
  background-size: 100% 100%;
  width: 94%;
  height: 24px;
  margin: auto;
  margin-top: 7px;
  text-align: center;
  line-height: 24px;
  font-size: 16px;
}
#TeamIntroBox .Body {
  width: 94%;
  margin: auto;
  text-align: center;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#TeamBoxRight {
  width: 65%;
  height: 100%;
  background-image: url(../Res/skins/desc-rect.png);
  background-size: 100% 107%;
  background-position-y: -25px;
}
#TeamBoxRight .PlayerList {
  width: 100%;
  height: 100%;
}
#TeamBoxRight .PlayerList .Header {
  background-image: url(../Res/border/border-h_.png);
  background-size: 100% 100%;
  width: 100%;
  height: 30px;
  margin: auto;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
}

#TeamBoxRight .PlayerList .Body .LeaderLi .LPlayerAvaterBg {
  width: 124px;
  height: 124px;
  margin: auto;
  background-image: url(../Res/background/frame.png);
  background-repeat: no-repeat;
  background-position: center;
  overflow: auto;
}

#TeamBoxRight .PlayerList .Body .LeaderLi .LPlayerAvater {
  width: 82%;
  height: 82%;
  border-radius: 50%;
  background-image: url(../Res/player/faceA10_.jpg);
  background-size: 100% 100%;
  margin: auto;
  margin-top: 10px;
}

#TeamBoxRight .PlayerList .Body .LeaderLi .LPlayerTitle {
  margin-top: -14px;
  background-image: url(../Res/bars/title-bg.png);
  background-size: 100% 700%;
  width: 80px;
  float: right;
  color: white;
  text-align: center;
  line-height: 24px;
  height: 24px;
}

#TeamBoxRight .PlayerList .Body .LeaderLi .LPlayerName {
  width: 150px;
  height: 36px;
  background-image: url(../Res/background/p_name_n.png);
  text-align: center;
  line-height: 24px;
  margin: auto;
}
#TeamBoxRight .PlayerList .Body .TeamMateLi {
  flex-flow: row;
  justify-content: center;
  margin-top: 30px;
}
#TeamBoxRight .PlayerList .Body .TeamMateLi li {
  margin: 0px 10px;
}
#TeamBoxRight .PlayerList .Body .TeamMateLi .PlayerAvaterBg {
  width: 124px;
  height: 62px;
  background-image: url(../Res/border/RectBorder_n.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

#TeamBoxRight .PlayerList .Body .TeamMateLi .PlayerAvater {
  width: 124px;
  height: 100%;
  border-radius: 5px;
  background-size: 100% 100%;
  margin: auto;
}

#TeamBoxRight .PlayerList .Body .TeamMateLi .PlayerTitle {
  margin-top: -22px;
  background-image: url(../Res/bars/title-bg.png);
  background-size: 100% 700%;
  width: 80px;
  float: right;
  color: white;
  text-align: center;
  line-height: 24px;
  height: 24px;
}

#TeamBoxRight .PlayerList .Body .TeamMateLi .PlayerName {
  width: 150px;
  height: 30px;
  background-image: url(../Res/btns/ui_timer.png);
  text-align: center;
  line-height: 30px;
  margin: auto;
  background-size: 100% 100%;
  margin-top: 10px;
}

#TeamBoxRight .TeamEneFrieList .tr {
  height: 40px !important;
}

#TeamBoxRight .tc-team {
  width: 25%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
#TeamBoxRight .team-name {
  width: 60%;
  height: 100%;
  line-height: 40px;
  font-size: 16px;
}

#TeamBoxRight .team-slog {
  height: 100%;
  width: 40%;
}
#TeamBoxRight .team-slog .slog {
  background-size: auto 90%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
#TeamBoxRight .tc-leader {
  width: 25%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
#TeamBoxRight .tc-leader .image {
  width: 35%;
  height: 100%;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}
#TeamBoxRight .tc-leader .image .border {
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../Res/border/RectBorder_a.png);
}
#TeamBoxRight .tc-leader .name {
  width: 65%;
  height: 100%;
  line-height: 40px;
  text-align: center;
}
#TeamBoxRight .tc-pres {
  width: 20%;
  height: 100%;
  text-align: center;
  justify-content: center;
}
#TeamBoxRight .tc-honor {
  width: 20%;
  height: 100%;
  text-align: center;
  justify-content: center;
}
#TeamBoxRight .tc-memNum {
  width: 10%;
  height: 100%;
  text-align: center;
  justify-content: center;
}
#TeamBoxRight .tc-show {
  width: 20%;
  height: 100%;
  display: block;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#TeamBoxRight .tc-show .btn {
  width: 40%;
  line-height: 25px;
}

#TeamBoxLeft .TeamInvJoinBox {
  width: 100%;
  height: 50%;
  background-image: url(../Res/skins/solidSquare.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

#TeamBoxLeft .TeamInvJoinBox .Header {
  background-image: url(../Res/border/border-h_.png);
  background-size: 100% 100%;
  width: 94%;
  height: 24px;
  margin: auto;
  margin-top: 7px;
  text-align: center;
  line-height: 24px;
  font-size: 16px;
}
#TeamBoxLeft .TeamInvJoinBox .Body {
  width: 94%;
  margin: auto;
  text-align: center;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: 158px;
}

#TeamBoxLeft .TeamInvJoinBox .Body .tr {
  height: 32px !important;
}

#TeamBoxLeft .TeamInvJoinBox .tc-player-avater {
  width: 20%;
  height: 100%;
  background-size: 90% auto;
  background-position: center;
  background-repeat: no-repeat;
}
#TeamBoxLeft .TeamInvJoinBox .tc-player-avater {
  width: 20%;
  height: 100%;
  background-size: 90% auto;
  background-position: center;
  background-repeat: no-repeat;
}

#TeamBoxLeft .TeamInvJoinBox .tc-player-name {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#TeamBoxLeft .TeamInvJoinBox .tc-edit-req {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#TeamBoxLeft .TeamInvJoinBox .tc-edit-req .btn {
  line-height: 24px;
  width: 30%;
}

#RankList {
  width: 100%;
  color: #372b00;
}

#RankList.RankPage .tc-team {
  width: 20%;
}

#RankList.RankPage .tr {
  height: 37px !important;
}
#RankList.RankPage .tc-rank,
#RankList.RankPage .tc-show {
  width: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#RankList.RankPage .tc-leader {
  width: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#RankList.RankPage .tc-pres,
#RankList.RankPage .tc-honor,
#RankList.RankPage .tc-memNum {
  width: 14%;
}

#RankList.RankPage .tc-leader .image {
  width: 30%;
  height: 80%;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 5px;
}

#RankList.RankPage .tc-show .btn {
  width: 80%;
  display: block;
}

#DialBoxHeader {
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: space-between;
}
#BesideNavBtns {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
#BesideNavBtns .NavContBtns {
  width: 780px;
  height: 34px;
  margin-top: -9px;
  background-image: url(../Res/background/sitenav-bar-bg.jpg);
  background-size: 100% 100%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#BesideNavBtns .NavContBtns .nav-arrows {
  align-items: center;
}

#goToBtnRankCo .btn {
  width: 60px;
  height: 28px;
}
#goToBtnRankCo .input {
  height: 22px;
  width: 44px;
}

#RankSearchSelect .select-input {
  height: 24px;
  min-height: 24px;
  line-height: 24px;
  min-width: 100px;
  width: 100px;
}

#RankList .Header {
  background-image: url(../Res/border/border-h_.png);
  background-size: 100% 100%;
  width: 100%;
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-size: 16px;
}

#RankList .tr {
  height: 37px !important;
}

#RankList .tc-team {
  width: 25%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
#RankList .team-name {
  width: 60%;
  height: 100%;
  line-height: 40px;
  font-size: 16px;
  overflow: hidden;
}

#RankList .team-slog {
  height: 100%;
  width: 40%;
}
#RankList .team-slog .slog {
  background-size: auto 90%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
#RankList .tc-leader {
  width: 25%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
#RankList .tc-leader .image {
  width: 35%;
  height: 100%;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}
#RankList .tc-leader .image .border {
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../Res/border/RectBorder_a.png);
}
#RankList .tc-leader .name {
  width: 65%;
  height: 100%;
  line-height: 40px;
  text-align: center;
}
#RankList .tc-pres {
  width: 20%;
  height: 100%;
  text-align: center;
  justify-content: center;
}
#RankList .tc-honor {
  width: 20%;
  height: 100%;
  text-align: center;
  justify-content: center;
}
#RankList .tc-memNum {
  width: 10%;
  height: 100%;
  text-align: center;
  justify-content: center;
}
#RankList .tc-show {
  width: 20%;
  height: 100%;
  display: block;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#RankList .tc-hero-lvl {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% auto;
}

.tr .tc-hero-lvl {
  color: white;
  font-weight: bold;
  background-image: url(../Res/hero/icon_Lv.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% auto;
}

#RankList .tc-hero-point_a {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #008c10;
  font-size: 14px;
  font-weight: bold;
}

#RankList .tc-hero-point_b {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #b43d02;
}

#RankList .tc-hero-point_c {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #0065ac;
}

#RankList .tc-show .btn {
  width: 40%;
  line-height: 25px;
}

#TeamNavBarList .drop-list {
  margin-top: 54px;
}
#TeamNavBarList .btn {
  margin-top: 25px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#save-t-intro {
  width: 100px;
  margin: auto;
}

#PlayerTeamInvList .btnList,
#PlayerTeamReqList .btnList {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 50%;
}
#PlayerTeamInvList .btn,
#PlayerTeamReqList .btn {
  height: 22px;
  width: 40px;
}

#send-team-req .full-btn {
  padding: 0px 15px;
}

.team-ann {
  color: #074206;
  font-size: 14px;
}

.PlayerAvater .playerSettingIcon {
  height: 30px;
  margin-bottom: -30px;
}
.PlayerAvater .playerSettingIcon .btn {
  height: 30px;
  width: 30px;
  background-image: url(../Res/btn-small/setting-n.png);
  background-repeat: no-repeat;
  background-position: center;
  float: right;
  margin-right: 3px;
  margin-top: 3px;
}
.PlayerAvater .playerSettingIcon .btn:hover {
  background-image: url(../Res/btn-small/setting-h.png);
}
.PlayerAvater .playerSettingIcon .btn:active {
  background-image: url(../Res/btn-small/setting-a.png);
}

.PlayerAvater .settingList {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
  margin-left: 90px;
  margin-top: 30px;
  display: none;
}