#toolbar{ position: relative; }
#toolbar > div{ position: absolute; top: -23.5px; right: 0; }
.hinfoWrapper {
    width: 32px;
    height: 1px;
    display: inline-block;
    position: relative;
}
.hinfoWrapper > .hinfo{
    font-size: 22px;
    position: absolute;
    top: -6px;
    left: -5px;
}
#save{ position: absolute; right: 35px; top: -6px; }

#gkMainMenu{ text-align: center; margin-bottom: 10px; }
#autoSetupMenu{ width: 135px; float: left; margin-right: 2px; border-radius: 3px 0 0 3px; }
#autoSetupMenu select{ border-radius: 3px 0 0 3px; }
#autoSetup{ height: 31px; }
#armorSelectorMenu{ /*position: absolute; top: 5px; left: 600px; width: auto; height: 34px; */ display: inline-block; border: 1px solid #ccc; text-align: center; padding: 0 !important; border-radius: 4px; }
#armorSelectorMenu label{ height: 32px; line-height: 32px; /*width: 40px;*/ display: inline-block; float: left; margin: 0 !important; padding: 0 6px; border-right: 1px solid #f1f1f1; vertical-align: unset !important; cursor: pointer; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
#armorSelectorMenu label:last-child{ border-right: none; }
#armorSelectorMenu input:NOT(:checked) + label:hover{ -webkit-box-shadow:inset 0 0 1px 1px #D9D9D9; box-shadow:inset 0 0 1px 1px #D9D9D9; }
#armorSelectorMenu input:checked + label{ font-weight: bold; cursor: default; -webkit-box-shadow:inset 0 0 3px 2px #D9D9D9; box-shadow:inset 0 0 3px 2px #D9D9D9; border-color: #D9D9D9; }
#all{ float: left; height: 32px; margin: 0; border-radius: 0 3px 3px 0; }

/* gear box */
#gearWrapper{ /* height: 423px; */ overflow-y: hidden; overflow-x: auto; white-space: nowrap; }
#gearWrapper article:not(.helper){ display: none; margin: 0 2.5px; }
#gearWrapper article.helper{ display: inline-block; width: 60px; }
/*#gearWrapper > div{ margin: 0 60px; padding-right: 60px; }*/
.gear{
    display: inline-block;
    position: relative;
    height: 397px;
    width: 162px;
}
.gear .bg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 162px;
}
.gear .bgh{ position: absolute; z-index: 2; background: #2f2f2f; bottom: -9px; left: 0; width: 100%; height: 235px; }
.gear .setName{ position: absolute; z-index: 3; top: 132px; left: 0; width: 100%; font-size: 18px; color: #ffe290; text-shadow: 1px 2px 3px #ffe290; text-align: center; }
.gear .item{ visibility: hidden; }
.gear .item[data-inuse]:after{ content: "#" attr(data-inuse) !important; text-align: center; line-height: 63px; font-size: 26px; color: #fff; font-weight: bold; text-shadow: 2px 2px 2px #000; } /*  position: absolute; left: 20px; top: 12px; */
.item[data-color]:after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* zeige nur die items passend zum aktiven Auswahlmodus */
#gearWrapper[data-show="all"] .item{ visibility: visible; }
#gearWrapper[data-show="1"] .item[data-st="1"],
#gearWrapper[data-show="2"] .item[data-st="2"],
#gearWrapper[data-show="3"] .item[data-st="3"],
#gearWrapper[data-show="4"] .item[data-st="4"],
#gearWrapper[data-show="5"] .item[data-st="5"],
#gearWrapper[data-show="6"] .item[data-st="6"]{ visibility: visible; }

/* positioniere ein item oben bei den Sets an der richtigen Stelle */
.gear .item[data-id="1"]{ top: 181px; left: 7px; }
.gear .item[data-id="2"]{ top: 181px; left: 89px; }
.gear .item[data-id="3"]{ top: 257px; left: 7px; }
.gear .item[data-id="4"]{ top: 257px; left: 89px; }
.gear .item[data-id="5"]{ top: 332px; left: 7px; }
.gear .item[data-id="6"]{ top: 332px; left: 89px; }


/* item element 67x67px positioniere das Bild an der richtigen Stelle um innerhalb des quadrats das richtige Bild anzuzeigen */
.item{ position: absolute; z-index: 4; width: 67px; height: 67px; cursor: pointer; overflow: hidden; }
.item > img{ position: absolute; width: 162px; max-width: unset; }
.item[data-id="1"] > img{ top: -182px; left: -6px; }
.item[data-id="2"] > img{ top: -182px; left: -90px; }
.item[data-id="3"] > img{ top: -258px; left: -6px; }
.item[data-id="4"] > img{ top: -258px; left: -90px; }
.item[data-id="5"] > img{ top: -333px; left: -6px; }
.item[data-id="6"] > img{ top: -333px; left: -90px; }


/* own tooltip */
.tooltip-wrapper{ visibility: hidden; position: fixed; z-index: 99; }
.tooltip-wrapper .tooltip, .values{ position: absolute; z-index: 10; height: auto; top: 0; width: 226px; margin-left: -113px; padding: 6px; border-radius: 10px; background: #000000e6; color: #ffe290; text-shadow: 1px 2px 3px #ffe290; cursor: default; }
.tooltip:after {
  content: '';
  position: absolute;
    bottom: -8px;
    left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
.tooltip div > span:first-child, .values div > span:first-child{ float: left; }
.tooltip div > span:last-child, .values div > span:last-child{ float: right; display: inline-block; text-align: right; }
.tooltip div > span:last-child:after, .values div > span:last-child:after{ content: '%'; margin-left: 2px; }

/* colors */
.item[data-color="gray"]:after{ background: #f1f1f15e; }
.item[data-color="green"]:after{ background: #25bf2a38; }
.item[data-color="blue"]:after{ background: #258dbf38; }
.item[data-color="purple"]:after{ background: #b532c526; }
.item[data-color="gold"]:after{ background: #f3ad1136; }
.colorPicker.gray{ color: #f1f1f1; }
.colorPicker.green{ color: #25bf2a; }
.colorPicker.blue{ color: #258dbf; }
.colorPicker.purple{ color: #b532c5; }
.colorPicker.gold{ color: #f3ad11; }

#colorMenu{ position: absolute; z-index: 11; width: 174px; left: 50%; margin-left: -87px; padding: 8px 6px 6px 6px; background: #000000c7; border-radius: 5px; }
#colorMenu i{ font-size: 29.5px; cursor: pointer; }


/* show armor */
#armorSec{ position: relative; left: 50%; width: 1528px; margin-left: -764px; text-align: center; }
@media (max-width: 1560px){ #armorSec{ width: 1012px; margin-left: -506px; } }
@media (max-width: 1044px){ #armorSec{ left: 0; right: 0; width: unset; margin-left: 0; } }
#armor{ height: 477px; overflow-y: hidden; overflow-x: auto; white-space: nowrap; }
#armor > article:first-child{ margin-left: 0; }
#armor > article:last-child{ margin-right: 0; }

.armorWrapper{ display: inline-block; margin: 0 10px; width: 494px; height: 477px; }
.armorWrapper h2{ font-size: 18px; margin: 0; padding: 10px 15px; }
.armorWrapper .head{ border: 1px solid #ccc; background: #fff; border-bottom: none; -webkit-border-radius: 15px 15px 0 0; border-radius: 35px 35px 0 0; cursor: pointer; }
.armorWrapper.active .head{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */
background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top,  #fefcea 0%, #f1da36 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fefcea 0%,#f1da36 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
}

.armor{ position: relative; }
.ph{ position: absolute; z-index: 1; width: 67px; height: 67px; cursor: pointer; /* background: #cccccc80; */ }

.armor .ph[data-st="1"], .armor .item[data-st="1"]{top: 18px;left: 10px;}
.armor .ph[data-st="2"]{width: 102px;height: 137px;top: 102px;left: 9px;}
.armor .item[data-st="2"]{top: 137px;left: 24px;}
.armor .ph[data-st="3"], .armor .item[data-st="3"]{top: 257px;left: 10px;}
.armor .ph[data-st="4"], .armor .item[data-st="4"]{top: 338px;left: 10px;}
.armor .ph[data-st="6"]{width: 102px;height: 137px;top: 102px;left: 382px;}
.armor .item[data-st="6"]{top: 137px;left: 400px;}
.armor *[data-st="5"]{ left: 416px; }
.armor *[data-sub="1"]{ top: 18px; }
.armor *[data-sub="2"]{ top: 258px; }
.armor *[data-sub="3"]{ top: 338px; }

/* armor big items */
.armor .item[data-st="2"], .armor .item[data-st="6"]{ width: 126px; height: 137px; top: 102px; }
.armor .item[data-st="2"]{ left: 8px; }
.armor .item[data-st="6"]{ left: 360px; }
.armor .item[data-st="2"] > img{ width: 310px; top: -343px; left: -14px; }
.armor .item[data-st="6"] > img{ width: 310px; top: -488px; left: -14px; }

/* armor values */
.values:empty{ visibility: hidden; }
.values{ left: 50%; background: #000000ad; }

/* new armor */
.addArmorSetup{ display: inline-block; cursor: pointer; }