html:NOT(.winFrame) #page{ margin: unset !important; margin-bottom: 0 !important; }
.container{ width: unset !important; }
#loaderwrapper{ display: flex; align-items: center; justify-content: center; }
#loader{ width: 1098px; height: 759px; }
#lineup{ position: relative; width: 1098px; height: 759px; overflow-y: hidden; overflow-x: auto; background-position: top; background-repeat: no-repeat; }
#commiMenu{ position: absolute; top: 594px; left: 0; overflow-x: visible; white-space: nowrap; padding-left: 0; }
.comimg { float: unset !important; cursor: pointer; }
.fa-times:hover{ color: red; }
#favBtn{ position: absolute; right: 8px; bottom: -47px; font-size: 24px; padding: 4px 13px !important; }
#favBtn:hover, #favBtn.active{ color: gold; }
.playername{ display: inline-block; min-width: 70px; max-width: 70px; overflow: hidden; white-space: nowrap; }
.viewCat.ui-state-highlight{ color: #000 !important; }

#shareblock{ position: absolute; left: 60px; top: 56px; width: 313px; height: 30px; }
#shareblock span{ position: absolute; z-index: 2; left: 0; top: 0; padding: 0 5px; line-height: 30px; background: #f1f1f1; font-weight: bold; color: #000; }
#shareblock input{ position: absolute; z-index: 1; padding-left: 58px; width: 315px; cursor: pointer; }
#shareblock input:focus + span{ left: 1px; top: 1px; padding: 0 5px 0 4px; line-height: 28px; }

#viewBlock.plc #resetLineup{ display: none !important; }
#viewBlock{ position: relative; }
#viewBlock.active{ margin-left: -79px; }
#startSearch{ position: absolute; left: -410px; top: -47px; margin-top: 0 !important; width: 400px; height: 142px; padding: 10px; border: 1px solid #f6f6f6; border-radius: 20px; color: #8fcd2f; text-shadow: 2px 2px 1px #000000; }
#startSearch > .multiBG{ border-radius: 20px; }
#startSearch > .infoTxt{ position: relative; z-index: 10; }
#startSearch > .fas{ color: #f6f6f6; font-size: 50px; position: absolute; right: -20px; top: 50%; margin-top: -25px; }

#startSearch{ color: #8fcd2f; text-shadow: 2px 2px 1px #000000; }

#optionsContainer{ display: inline-block; position: relative; z-index: 100; top: 2px; }
#optionsContainer > div{ display: inline-block; color: #454545; border: 1px solid #c5c5c5; background: #f6f6f6; font-weight: normal; border-radius: 3px; }
#optionsContainer > div:first-child{ text-align: center; width: 174px; padding: 3px 4px; font-weight: bold; }
html.dark #optionsContainer > div:first-child:NOT(:hover){ opacity: .7;}
#optionsContainer > div:last-child{ position: absolute; top: 31px; left: 0; text-align: left; }
#optionsContainer > label, #optionsContainer span{ width: 100%; text-align: left; }
#optionsContainer .filterbox{ position: relative; }
#optionsContainer .filterbox > label{ width: 100%; position: relative; z-index: 2; }
#optionsContainer .filterbox > input{ position: absolute; z-index: 5; top: 10px; left: 5px; }
#optionsContainer:NOT(:hover) > div:last-child{ display: none; }
#optionsContainer:hover > div:first-child{ border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background: #eaeaea; }
#optionsContainer:hover > div:last-child{ border-top-left-radius: 0px; border-top-right-radius: 0px; }
#optionsContainer .viewCat{ padding-left: 3px !important; padding-right: 6px !important; }
#optionsContainer .tit{ padding-right: 15px; }
#optionsContainer .fas{ margin-right: 5px; position: absolute; right: 5px; }
#optionsContainer .fa-bars{ top: 8px; }
#optionsContainer .fa-caret-down{ top: 8px; right: 7px; }
#optionsContainer:hover .fa-bars{ display: none; }
#optionsContainer:NOT(:hover) .fa-caret-down{ display: none; }
#optionsContainer .cat{ text-align: center; font-weight: bold; padding: 8px 0; background: #ccc; }

#multi{ display: inline-block; position: relative; z-index: 2; width: 512px; height: 562px; margin-top: 47px; margin-left: 46px; }
.multiBG{
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    background-color: #261d16;
     /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

  /* IE 5-7 */
  filter: alpha(opacity=90);

  /* Netscape */
  -moz-opacity: 0.9;

  /* Safari 1.x */
  -khtml-opacity: 0.9;

  /* Good browsers */
  opacity: 0.9;
}
#multiLineup{ position: relative; z-index: 4; left: 50% !important; margin-left: -240px !important; height: 562px; overflow-x: auto; }
#multiLineup, #multiLineup ul{ display: inline-block; list-style: none; margin: 0; padding: 0; }
#multiLineup > li{ margin: 10px 0; line-height: 46px; }
#multiLineup > li > span:first-child{ display: inline-block; width: 120px; white-space: nowrap; overflow: hidden; }
#multiLineup ul{ width: 330px; }
#multiLineup > li > *, #multiLineup ul > li{ float: left !important; }
#multiLineup ul > li{ position: relative; margin: 0 2px; width: 51px; height: 51px; border: 2px solid; }
#multiLineup ul > li[data-color="1"]{ border-color: silver; }
#multiLineup ul > li[data-color="2"]{ border-color: green; }
#multiLineup ul > li[data-color="3"]{ border-color: blue; }
#multiLineup ul > li[data-color="4"]{ border-color: purple; }
#multiLineup ul > li[data-color="5"]{ border-color: gold; }
#multiLineup .name{ display: none; }
#multiLineup .starMenu{ height: 28px; font-size: 8px; }
#multiLineup .dmg{ color: red; font-weight: bold; }


.armyTierWrapper.filter{ position: fixed; top: 556px; }
.armyTierWrapper > *:first-child{ padding: 5px 0px 0px 0px !important; }
.commanderFilter > *{ float: left; margin-right: 0; padding: 5px 0px 0px 5px !important; height: 53px; }
.commanderFilter img { margin: 0 !important; max-width: 40px; }
#commiMenu > li{ margin: 41px 0 0 0; }
.comimg .colSel{ position: absolute; }
.comimg .name{ margin-top: -24px; }

.comimg.ui-draggable-dragging{ cursor: grabbing !important; }
.comimg.ui-draggable-dragging .colSel{ display: none; }

.comSlot{ position: fixed; width: 91px; height: 146px; list-style: none; margin: 0; padding: 0; }
.comSlot > .comimg{ margin: 0; height: 122px; position: relative; top: 24px; }
.comSlot > .comimg > div{ position: absolute; }
.comSlot > .comimg > .name{ top: 0; left: 0; right: 0; text-align: center; color: #000; font-weight: bold; font-size: 12px; line-height: 24px; }
.comSlot > .comimg > .colSel{ top: -36px; }
.comSlot > .comimg > .starMenu{ bottom: 0; left: 9px; }

.comSlot:NOT(:hover) .comRemove, #commiMenu .comRemove{ display: none; }
.colRem{ top: 2px; right: 2px; }
.comRemove{ font-size: 28px; color: red; }

/*overlay fa-check-circle*/
.comimg:NOT(.active) .overlay,
.comimg:NOT(.active) .fa-check-circle{ display: none; }
.comimg .overlay{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, .5); }
.comimg .fa-check-circle{ position: absolute; z-index: 52; color: green; font-size: 56px; left: 50%; top: 50%; margin-left: -28px; margin-top: -36px; }

.slot-1, .slot-2, .slot-3{ left: 206px; }
.slot-4, .slot-5, .slot-6{ left: 95px; }
.slot-2, .slot-4{ top: 99px; }
.slot-1, .slot-5{ top: 256px; }
.slot-3, .slot-6{ top: 414px; }
.comSlot.ui-state-error{
    /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

  /* IE 5-7 */
  filter: alpha(opacity=30);

  /* Netscape */
  -moz-opacity: 0.3;

  /* Safari 1.x */
  -khtml-opacity: 0.3;

  /* Good browsers */
  opacity: 0.3;
}
#enemyIcon{ position: fixed; top: 298px; left: 407px; }
#enemyIcon > img:not(.active){ display: none; }
#enemyIcon > img.active{ height: 72px; }

#clearBtn{ position: fixed; top: 55px; left: 137px; }
#clearBtn > i{  margin: 0 5px; }

#menu{
    position: fixed;
    top: 50px;
    left: 552px;
    width: 500px;
    padding: 5px;
}
#menu legend{ color: #fff; text-align: center; text-shadow: 2px 2px 1px #000000; }
#rlname{ width: 212px; margin-left: -3px; }
.descEn { width: 55px; display: inline-block; }
.descEn.type{ line-height: 40px; }
#enemyLevel > *{ float: left; }
.enLv{ margin: 0 !important; }
.text-center{ text-align: center !important; }
#damage{ width: 45px; margin: 0 2px 0 15px; }
#damage + span{ margin-right: 10px; }
.viewCat.f2p, .viewCat.own{ float: none; }
.viewList:NOT(.active){ display: none; }
.viewList .name{ display: inline-block; width: 230px; }
.deleteSetup{ margin: 0 10px; }
.deleteSetup:hover{ color: red; }

.comMenu{ position: fixed !important; z-index: 500; height: 24px; width: 92px; background-color: rgba(0, 0, 0, .5); }
.comMenu.comMenu{ bottom: 100px; }
.comMenu.starMenu{ bottom: 18px; direction: rtl; }
.comimg .starMenu{ bottom: 3px !important; }

#catGroup{ display: inline-block; min-height: 32px !important; }
#catGroup .preloader{ height: 32px !important; padding-top: 2px !important; }
#viewListWrap{ overflow-y: auto; max-height: 240px; }
#viewList{ margin: 0; padding: 0; margin-top: 15px; list-style: none; }
/*#viewList.single-col{ overflow-y: auto; height: 225px; }*/
#viewList:NOT(.own){ columns: 2; -webkit-columns: 2; -moz-columns: 2; }
#viewList{ margin: 0; }
#viewList > li > *{ float: left; }
#viewList > li{ cursor: pointer; }
#viewList > li:hover{ background: rgba(163, 240, 19, 0.5); color: #fff; }

.dmgTxt{ display: inline-block; text-align: center; color: #000; text-shadow: -1px 0px 2px #fff; font-size: 17px; min-width: 50px; }

.listVote{ min-width: 60px; text-align: center; }
.listVote span{ font-weight: bold; }
.listVote.down, .lineupVote.down{ color: red; }
.listVote.up, .lineupVote.up{ color: green; }

#voteCol{ position: fixed; top: 304px; left: 10px; width: 370px; }
#voteCol .lineupVote{ display: inline-block; width: 74px; text-align: center; position: absolute; cursor: pointer; }
#voteCol i{ font-size: 48px; }
.voteCnt{ padding-left: unset !important; padding-right: unset !important; width: 74px; margin: 5px 0; display: inline-block; max-height: 31.5px; }
.lineupVote > i{ transition: all 0.5s; }
.lineupVote:hover > i{ font-size: 86px !important; animation: tilt-shaking 0.15s infinite; margin-top: -38px; }
.lineupVote.down{ right: 0; top: 91px; }
.lineupVote.up{ right: 0; top: -126px; }
.lineupVote.up:hover > i{ margin-top: 0px; }
#lineupDmg{ position: absolute; top: 59px; left: 397px; color: red; font-weight: bold; font-size: 22px; width: 61px; text-align: center; }
#voteCol{ display: none; }
#resetLineup{ position: absolute; left: 402px; top: 8px; display: none; }

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}