:root { --scrollbar-bg: rgba(50,50,50,0.25);--thumb-bg: rgba(50,50,50,0.5);--scrollbar-width: 0.35rem; --scrollbar-width_hover: 0.5rem; --scrollbar-thumb-radius: 0.5rem;--scrollbar-thumb-border: 0.2rem;}
::-webkit-scrollbar{width: var(--scrollbar-width);height:var(--scrollbar-width);}::-webkit-scrollbar:hover{width: var(--scrollbar-width_hover);}
::-webkit-scrollbar-track{background-color: var(--scrollbar-bg);}::-webkit-scrollbar-thumb{background-color: var(--thumb-bg);border-radius: var(--scrollbar-thumb-radius);border: var(--scrollbar-thumb-border) solid var(--scrollbar-bg);}
*{scrollbar-width: var(--scrollbar-width);scrollbar-color: var(--thumb-bg) var(--scrollbar-bg);}
html { scroll-behavior: smooth;}/* smooth-scroll CSS */
#link { font-family: sans-serif;width: 800px;margin:0 auto;text-align:center;}
.link {background:#eee;padding:0.25rem;border-radius: 0.5rem;border: 1px solid #aaa;}
/*====================================================================================*/
[data-title]:hover:after{opacity:1;transition:.15s .75s;visibility:visible}[data-title]:after{content:attr(data-title);position:absolute;top:-1.75em;left:5%;z-index:99999;visibility:hidden;font-family:sans-serif;white-space:nowrap;
background-color:#0a6f75;color:#fff;font-size:1rem;padding:.25rem;box-shadow:1px 1px 3px #222;opacity:0;border:1px solid #111;border-radius:.5rem;cursor:help}[data-title]{position:relative;cursor:help;cursor:alias}
:root {
  --legend-bg: #58c6f9;
  --legend-fnt: #60696c;
  --legend-bg-hover: #30b7f8;
  --legend-fnt-hover: #90999c;
  --epic-bg: #f859ee;
  --epic-fnt: #33377f;
  --epic-bg-hover: #c609b8;font-size: 0.9rem;
  --epic-fnt-hover: #7175c6;
  --rare-bg: #fbbd8a;
  --rare-fnt: #8d4305;
  --rare-bg-hover: #ed9121;
  --rare-fnt-hover: #743603;
  --common-bg: #a6b3be;
  --common-fnt: #444;
  --common-bg-hover: #566876;
  --common-fnt-hover: #ccc;
  --wolf-bg: #2083de;
  --wolf-fnt: #dabef5;
  --wolf-bg-hover: #6093d1;
  --wolf-fnt-hover: #f2e9fc;
}

body {
  background: #055;
  font-family: sans-serif;
}
* {
  box-sizing: border-box;
}
.container {
  width:400px;
  background: #066;
  margin: 0 auto;
}
main {
  /* width: 265px; */
  width: 100%;
  background: transparent;
  margin: 0 auto;
  border-radius: 0.5rem;
}
.default {
  background: #444;
  color: #fff;
  text-align: center;
  height: 35px;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 0.25rem;
}
#dropdown {
  position: absolute;
  display: relative;
  width: 34px;
  height: 34px;
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  color: #33333350;
  background: transparent;
  margin-top: 1px;
  border-radius: 0.5rem;
  cursor: pointer;
  border: 0 solid #555;
  /* right: 5px; */
  text-align: right;
  z-index: 10;
  margin-right: -280px;
  -webkit-text-stroke: 1px #11111150;
}
#dropdown:hover {
  color: #77777750;
  background: transparent;
  -webkit-text-stroke: 1px #33333350;
}
.item .selected {
  border-radius: 0.5rem;
}
.item .selected .img-column img.img-club {
  border-radius: 0.5rem 0 0 0.5rem;
}
ul li {
  list-style: none;
}
li a {
  text-decoration: none;
  vertical-align: middle;
  height: 30px;
  height: 50px;
}
/* li:nth-of-type(even) {background: #eee;} */
.show {
  display: inline-block;
}
.dropdown {
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 1s;
  border: 0px solid #111;
  border-radius: 0.25rem;
}
.dropdown .legendary a {
  background: var(--legend-bg);
  color: var(--legend-fnt);
  height: 30px;
  height: 50px;
  margin: 0;
}
.dropdown .legendary a:hover {
  background: var(--legend-bg-hover);
  color: var(--legend-fnt-hover);
}
.dropdown .legendary a:hover {
  background: var(--legend-bg-hover);
  color: var(--legend-fnt-hover);
}
.dropdown .epic a {
  background: var(--epic-bg);
  color: var(--epic-fnt);
  height: 30px;
  height: 50px;
  padding: 0 0;
}
.dropdown .epic a:hover {
  background: var(--epic-bg-hover);
  color: var(--epic-fnt-hover);
}
.dropdown .rare a {
  background: var(--rare-bg);
  color: var(--rare-fnt);
  height: 30px;
  height: 50px;
  margin: 0;
}
.dropdown .rare a:hover {
  background: var(--rare-bg-hover);
  color: var(--rare-fnt-hover);
}
.dropdown .wolf a {
  background: var(--wolf-bg);
  color: var(--wolf-fnt);
  height: 30px;
  height: 50px;
  margin: 0;
}
.dropdown .wolf a:hover {
  background: var(--wolf-bg-hover);
  color: var(--wolf-fnt-hover);
}
.dropdown .common a {
  background: var(--common-bg);
  color: var(--common-fnt);
  height: 30px;
  height: 50px;
  margin: 0;
}
.dropdown .common a:hover {
  background: var(--common-bg-hover);
  color: var(--common-fnt-hover);
}
.select {
  vertical-align: middle;
}
a.select {
  width: 100%;
  /* width: 230px; */
  display: flex;
  font-size: 1.2rem;
  text-decoration: none;
}
a.select:hover .img-column img.img-club,
img.img-club:hover {
  filter: grayscale(100%);
}
.info {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 225px;
  margin: 0 auto;
  background: #fff;
}
.item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* width: 225px; */
  width: 100%;
}
.img-column {
  background-color: transparent;
  height: 30px;
  height: 50px;
  width: 50px;

  flex: 1;
}
.desc-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 30px;
  height: 50px;
  width: 180px;
  flex: 8;
}
img.img-club {
  width: 50px;
  height: 30px;
  height: 50px;
  padding: 0;
  margin: 0;
}
#getInfo {
  text-align: center;
}
.hide {
  display: none !important;
}
li.optgroup {
  background: #111;
  color: #eee;
  font-style: italic;
  font-weight: 700;
  text-align: left;
  height: 26px;
  height: 35px;
  padding: 0.3rem 0.2rem 0rem 2.5rem;
  width: 225px;
  width: 100%;
  margin-left: 2px;
}