*{
    margin: 0px;
    padding: 0px;
}
body{
    cursor: url('../images/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 */
    
}

button{
    outline: none;
    background: none;
}
.input{
    border: solid 5px transparent !important; 
    border-image: url(../images/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(../images/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(../images/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(../images/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(../images/icons/pluse-h.png);
}
#city-profile .page_content table tr td .pluse:active{
    background-image: url(../images/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;
}
/*#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(../images/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(../images/back-shape/rect.png);
    background-size: 100% 100%;
    display: block;
    margin: auto;
}
.army_type .army_img .wrapper {
    background-image: url(../images/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(../images/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,.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(../images/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(../images/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(../images/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(../images/btns/building/upgrade.png);
    background-size: 100% 100%;
}
.big-btn .full-btn:hover{
    background-image: url(../images/btns/building/upgrade-h.png);
}
.big-btn .full-btn:active{
    background-image: url(../images/btns/building/upgrade-a.png);
}
.big-btn .full-btn:disabled{
    background-image: url(../images/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(../images/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(../images/icons/bg_patern.png);
    float: left;
    border: 4px solid transparent;
    border-image: url(../images/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(../images/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("../images/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(../images/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("../images/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(../images/icons/pluse.png);
    background-position: center;
    background-repeat: no-repeat;
}
.part-3 table td .pluse:hover{
    background-image: url(../images/icons/pluse-h.png);
}
.part-3 table td .pluse:active{
    background-image: url(../images/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(../images/background/dialog_bg.jpg);
}
.row-2{
    height: 90px;
     background-image: url(../images/background/bg_equip.jpg);
   
}
.row-3{
    height: 27px;
    background-image: url("../images/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(../images/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(../images/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(../images/icons/pluse.png);
    background-position: center;
    background-repeat: no-repeat;
}
.row-3 .col-3 .pluse:hover{
    background-image: url(../images/icons/pluse-h.png);
}
.row-3 .col-3 .pluse:active{
    background-image: url(../images/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(../images/background/dialog_bg.jpg);
}

.hero_dial .row-4::after{
    
    content: "";
    height: 50px;
    position: absolute;
    display: block;
    width: 347px;
    background-image: url(../images/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(../images/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(../images/icons/bg_patern.png);
    border: 4px solid transparent;
    border-image: url(../images/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(../images/background/colonna.png) ,url(../images/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(../images/icons/bg_patern.png);
    border: 4px solid transparent;
    border-image: url(../images/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(../images/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(../images/background/colonna.png),url(../images/background/colonna.png) , url(../images/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(../images/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(../images/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(../images/ribbon/cloth_top.png) , url(../images/ribbon/roupe.png) ,  url(../images/ribbon/drapirovka.png) ,  url(../images/ribbon/cloth_btm_left.png) ,  url(../images/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(../images/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(../images/icons/bg_patern.png)  ;
   
}
#eq-part-select ul{
    overflow: auto;
    height: 100%;
}
#eq-part-select ul .selected{
    background-color: transparent;
    background-image: url(../images/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(../images/icons/hero/eq-part-selected-h.png);
}
#eq-part-select ul li:hover{
   background-image: url(../images/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(../images/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(../images/back-shape/rect.png);
    background-size: 100% 100%;
    padding: 3px;
    border-radius: 5px;
}





/*_______________________________Alert box___________________________________*/

#over_lay , #over_lay_alert{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    position: fixed;
    z-index: 2001;
    top: 0px;
}
#alert_container{
    width:360px;
    margin: auto;
    position: relative;
    top: 30%;
    background-image: url(../images/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;
    
} 
#alert_box .row-2{
    font-size: 15px;
    height: 120px;
    width: 85%;
    margin: auto;
    margin-top: 19px;
    background: none;
}
#alert_box .row-2 input{
    width: 86px;
    margin: 4px 9px;
}
#alert_box .row-2 .chat-forbid-duration{
    width: 60%;
}
#alert_box .row-1 input[type=range]{
    display: inline-block;
    height: 29px;
}
#alert_box .row-3{
    padding-bottom: 13px;
    width: 84%;
    margin: auto;
    
}
.matrial-alert .row-3{
    width: 84%;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    margin-top: 0 !important;
    overflow: auto;
}
.confim-btn{
    width: 81px;
}
#alert_box .row-3 .confim-btn{
    margin: auto;
    overflow: auto;
}
.confim-btn .full-btn{
    width: 100%;
    margin-top: 6px;
}
.row-4 .col-1 ol li .permit-layer{
    width: 78px;
    height: 41px;
    position: absolute;
    margin-top: 6px;
    z-index: 10;
    background-color: rgba(255,255,255,0.6);
    cursor: no-drop;
    display: none;
    border-radius: 6px;
}
#alert_container .for_battel .row-2{
    height: 119px;
    text-align: center;
    direction: rtl;
    
 
}
#alert_container .for_battel .confim-btn{
    width: 240px;
    height: 40px;
}
#alert_container .for_battel .confim-btn .full-btn{
    width: 40%;
}
.matrial-show .row-2{
    height: 100px !important;
    overflow: auto;
    width: 85%;
    margin: auto;
    border-radius: 7px 7px 0px 0px;
}
.matrial-show .full-btn{
    width: 25%;
    height: 25px;
}
.matrial-show .confim-btn{
    width: 80%;
    height: 40px;
    margin-top: 5px !important
}
.matrial-show .left img{
    display: block;
    margin-top: 16px;
    border-radius: 10px;
    width: 85%;
    margin: auto;
    padding: 5px;
    background-image: url(../images/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(../images/back-shape/rect.png);
    background-size: 100% 100%;
    padding: 2px 1px;
    border-radius: 1px;
}
.matrial-show .left .num{
    display: inline-block;
    vertical-align: top;
    line-height: 28px;
}
.matrial-show .right .name{
    
    text-align: center;
    background-image: url(../images/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(../images/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(../images/background/icon-bg.png);
    background-size: 100% 100%;
    overflow: auto;
}
.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(../images/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(../images/icons/left-content.png), url(../images/icons/left-content.png), url(../images/icons/left-content.png), url(../images/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(../images/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(../images/icons/left-content.png) , url(../images/icons/left-content.png),url(../images/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(../images/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(../images/arrow/go-left-n.png);
    background-size: auto 66%;
    background-position: center;
    background-repeat: no-repeat
}
.left-btn:hover{
    background-image: url(../images/arrow/go-left-h.png);
}
.left-btn:active{
    background-image: url(../images/arrow/go-left-a.png);
}
.right-btn{
    width: 30px;
    height: 30px;
    background-image: url(../images/arrow/go-right-n.png);
    background-size: auto 66%;
    background-position: center;
    background-repeat: no-repeat
}
.right-btn:hover{
    background-image: url(../images/arrow/go-right-h.png);
}
.right-btn:active{
    background-image: url(../images/arrow/go-right-a.png);
}
.most-left-btn{
    width: 30px;
    height: 30px;
    background-image: url(../images/arrow/m_l_n.png);
    background-size: auto 66%;
    background-position: center;
    background-repeat: no-repeat
}
.most-left-btn:hover{
    background-image: url(../images/arrow/m_l_h.png);
}
.most-left-btn:active{
    background-image: url(../images/arrow/m_l_a.png);
}
.most-right-btn{
    width: 30px;
    height: 30px;
    background-image: url(../images/arrow/m_r_n.png);
    background-size: auto 66%;
    background-position: center;
    background-repeat: no-repeat
}
.most-right-btn:hover{
    background-image: url(../images/arrow/m_r_h.png);
}
.most-right-btn:active{
    background-image: url(../images/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(../images/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(../images/btns/building/upgrade.png);
    background-size: 100% 100% ;
}
.full-btn-3x:hover{
    background-image: url(../images/btns/building/upgrade-h.png);
}
.full-btn-3x:active{
    background-image: url(../images/btns/building/upgrade-a.png);
}
.full-btn-3x:disabled{
    background-image: url(../images/btns/building/upgrade-h.png);
    opacity: 0.8
}

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

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

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

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

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

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


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





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

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

.iso_right{
    
    -webkit-transform: skewY(28deg);
    -moz-transform: skewY(28deg);
    -o-transform: skewY(28deg);
    -ms-transform: skewY(28deg);
    transform: skewY(28deg);
    
}
#army-condtions .not-enough{
    font-weight: bold;
    color: red;
    line-height: 25px
}
#army-condtions .enough{
    font-weight: bold;
    color: #5f8c00;
    line-height: 25px
}
.not-enough{
    font-weight: bold;
    color: red;
    line-height: 25px
}
.enough{
    font-weight: bold;
    color: #5f8c00;
    line-height: 25px
}
.build_army{
    width: 90px;
    margin: auto;
}
.sysetm-chat-notif{ color: red;}
/*#cr-stage{
    background-image: url(../images/world/bacground.png) ,  url(../images/world/bacground.png) ,  url(../images/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(../images/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(../images/btns/hero/armyTrade_h.png);
}
#swap_army:active{
    background-image: url(../images/btns/hero/armyTrade_a.png);
}
#swap_army:disabled{
    background-image: url(../images/btns/hero/armyTrade_d.png);
}

#left-down , #right-down{
    background-image: url(../images/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(../images/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(../images/btns/hero/hero-up-n.png);}
.order-up:hover{background-image: url(../images/btns/hero/hero-up-h.png);}
.order-up:active{background-image: url(../images/btns/hero/hero-up-a.png);}
.order-up:disabled{background-image: url(../images/btns/hero/hero-up-d.png);}

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

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

.close{
    background-image: url(../images/btns/global/close-n.png);
    background-position: 100% 100%;
    background-position: center;
    background-color: transparent
}
.close:hover{background-image: url(../images/btns/global/close-h.png);}
.close:active{background-image: url(../images/btns/global/close-a.png);}
.close:disabled{background-image: url(../images/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(../images/btns/btn-red-2x.png);
    background-size: 100% auto;
    background-position: 0px 0px;
}
.btn-red-2x:hover{
    background-image: url(../images/btns/btn-red-2x.png);
    background-size: 100% auto;
    background-position-y:  33.3%;
}
.btn-red-2x:active{
    background-image: url(../images/btns/btn-red-2x.png);
    background-size: 100% auto;
    background-position-y:  66.6%;
}
.btn-red-2x:disabled{
    background-image: url(../images/btns/btn-red-2x.png);
    background-size: 100% auto;
    background-position-y: 100%;
}
.btn-green-2x{
    background-image: url(../images/btns/btn-green-2x.png);
    background-size: 100% auto;
    background-position: 0px 0px;
}

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

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

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

.golden-border{
    background-image: url(../images/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(../images/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(../images/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(../images/btns/global/closeWide.png);
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
}
.close-wide:hover{
    background-image: url(../images/btns/global/closeWide.png);
    background-repeat: no-repeat;
    background-position-y: -20px;
}
.close-wide:active{
    background-image: url(../images/btns/global/closeWide.png);
    background-repeat: no-repeat;
    background-position-y: -40px;
}
.close-wide:disabled{
    background-image: url(../images/btns/global/closeWide.png);
    background-repeat: no-repeat;
    background-position-y: -60px;
}

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