div.recruitmentBox {
  width: 100%;
  max-width: 360px;
  padding: 6px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

div.recruitmentBack {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72%;
  opacity: .32;
  pointer-events: none;
}

div.classType {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) repeat(4, 30px);
  align-items: center;
  gap: 2px;
  margin: 0 0 4px 0;
}

div.classIcon,
div.classSpec {
  border-style: solid;
  border-width: 1px;
  border-color: rgba(82,122,173,0.75);
  border-radius: 2px;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
}

div.classIcon {
  margin: 0;
}

div.classSpec {
  position: relative;
  z-index: 1;
  margin: 0;
}

div.classSpec img:hover {
  box-shadow: 0 0 5px 2px rgba(223,229,235,0.8);
}

div.className,
div.classSpecCounter,
div.specToolTipHead,
div.specToolTipDesc,
div.specToolTipSlots {
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

div.className {
  font-size: 14px;
  line-height: 1.1;
  text-shadow: #000 0 0 1px,#000 0 0 1px,#000 0 0 1px,#000 0 0 1px,#000 0 0 1px,#000 0 0 1px,#000 0 0 1px,#000 0 0 1px,#000 0 0 1px;
  margin: 0 6px 0 4px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.classSpecCounter {
  font-size: 12px;
  position: absolute;
  bottom: 0;
  right: 2px;
  text-align: right;
  background: transparent;
  color: #fff;
  text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

div.classSpecOverlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
}

div.classSpecOverlay.is-active {
  opacity: 0;
}

div.classSpecOverlay.is-inactive {
  opacity: .85;
}

div.specToolTip {
  position: absolute;
  z-index: 10000;
  display: none;
  clear: both;
  width: 260px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(82,122,173,0.75);
  background-color: #14171a;
  border-radius: 2px;
  padding: 5px;
}

div.specToolTipHead {
  position: relative;
  float: left;
  font-size: 16px;
}

div.specToolTipDesc {
  position: relative;
  clear: both;
  margin-top: 25px;
  font-size: 12px;
}

div.specToolTipSlots {
  position: relative;
  clear: both;
  margin-top: 8px;
  font-size: 12px;
}

div.specToolTipIcon {
  position: relative;
  float: right;
  margin-left: 2px;
  width: 20px;
  height: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(82,122,173,0.75);
  border-radius: 2px;
}

div.specToolTipIcon img {
  width: 20px;
  height: 20px;
}

.classImage,
.specImage {
  width: 30px !important;
  height: 30px !important;
}

.horde {
  border-color: rgba(173, 82, 82, 0.75) !important;
}

.alliance {
  border-color: rgba(82, 122, 173, 0.75) !important;
}

#demonhunter { color: #A330C9; }
#deathknight { color: #C41F3B; }
#druid { color: #FF7D0A; }
#hunter { color: #ABD473; }
#mage { color: #69CCF0; }
#monk { color: #00FF96; }
#paladin { color: #F58CBA; }
#priest { color: #FFFFFF; }
#rogue { color: #FFF569; }
#shaman { color: #0070DE; }
#warlock { color: #9482C9; }
#warrior { color: #C79C6E; }
#evoker { color: #33937F; }

.text-active { color: #DFE5EB; }
.text-inactive { color: #AAAEB3; }
.text-slots { color: #ffd105; }