: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: 0.15s 0.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: 0.25rem;
  box-shadow: 1px 1px 3px #222;
  opacity: 0;
  border: 1px solid #111;
  border-radius: 0.5rem;
  cursor: help;
}
[data-title] {
  position: relative;
  cursor: help;
  cursor: alias;
}

:root {  
  --bgimg-png:url(/img/shell-v2.2.png);
  --bgimg-legend0:#1c81ac;
  --bgimg-legend1:#23afea;
  --bgimg-legend2:#a450ef;
  --bgimg-epic0: #860a96;
  --bgimg-epic1: #d736eb;
  --bgimg-epic2:#691774;
  --bgimg-rare0:#cf6107;
  --bgimg-rare1:#fbbd8a;
  --bgimg-rare2:#826146;
  --bgimg-common0:#6e757b;
  --bgimg-common1:#a6b3be;
  --bgimg-common2:#5e646a;
  --bgimg-wolf0:#194d89;
  --bgimg-wolf1:#2d88f1;
  --bgimg-wolf2:#1c4069;
  --bgimg-png:url(/img/shell-v2.6.png);
  --btn-bg01:#777;
  --btn-bg02:#bbb;
  --cont-mt:-8px auto 0;
  --cont-width:394px;
  --cont-height:130px;
}
* {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 0.9rem;
}
body {
  background: #055;
}
.content {
  max-width: 400%;
  width: 100%;
  margin: 0 auto;
}
.header {
  font-size: 1.2rem;
}

.group,
.type {
  font-size: 1.2rem;
}
.active {
  background: #555;
  color: #d0c0e5;
}

.driver {
  background: #0076a3;
  color: #fff;
}
.wood {
  background: #273a81;
  color: #fff;
}
.iron {
  background: #0c8990;
  color: #fff;
}
.wedge {
  background: #016162;
  color: #fff;
}
.sandwedge {
  background: #948771;
  color: #fff;
}
.club {
  font-size: 1.5rem;
  background: #654789;
  color: white;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
}

.legendary2 {
  background: #b7effd;
  background:linear-gradient(180deg, var(--bgimg-legend1), var(--bgimg-legend2));
  color: #b7effd;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
}
.legendary {
  background: #b7effd;
  background:linear-gradient(180deg, var(--bgimg-legend2), var(--bgimg-legend1));
  color: #b7effd;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
}
.epic2 {
  background: #fb02fb;
  background:linear-gradient(180deg, var(--bgimg-epic1), var(--bgimg-epic2));
  color: #fff;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
}
.epic {
  background: #fb02fb;
  background:linear-gradient(180deg, var(--bgimg-epic2), var(--bgimg-epic1));
  color: #fff;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
}
.rare2 {
  background: #f7b169;
  background:linear-gradient(180deg, var(--bgimg-rare1), var(--bgimg-rare2));
  color: #fff;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
}
.rare {
  background: #f7b169;
  background:linear-gradient(180deg, var(--bgimg-rare2), var(--bgimg-rare1));
  color: #fff;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
}
.common2 {
  background: #9a9a9a;
  background:linear-gradient(180deg, var(--bgimg-common1), var(--bgimg-common2));
  color: #fff;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
}
.common {
  background: #9a9a9a;
  background:linear-gradient(180deg, var(--bgimg-common2), var(--bgimg-common1));
  color: #fff;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
}
.wolf2 {
  background: #b7effd;
  background:linear-gradient(180deg, var(--bgimg-wolf1), var(--bgimg-wolf2));
  color: #b7effd;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
}
.wolf {
  background: #b7effd;
  background:linear-gradient(180deg, var(--bgimg-wolf2), var(--bgimg-wolf1));
  color: #b7effd;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
}
#clubs {
  max-width: 500px;
  /* width: 100vw; */
  width: 100%;
  margin: 0.5rem auto;
  height: 600px;
  text-align: center;
  border-radius: 0.5rem;
}

* {
  box-sizing: border-box;
  font-family: sans-serif;
}
body {
  background: #055;
}
.content {
  width: 400px;
  margin: 0 auto;
}
.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0.25rem;
  color: #444;
  margin: 0;
  z-index: 1;
}
.data:nth-of-type(odd) {
  background: #eee;
}
.data:nth-of-type(even) {
  background: #fff;
}

.header,
.header:hover {
  font-weight: bold;
  text-align: center;
  /* background: #327da0; */
  border-radius: 0.5rem;
  padding: 0.25rem;
  /* color: #66ff00; */
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
    0.06rem 0.06rem 0.06rem #333;
}
.data:hover {
  background: #a2aab3;
  color: #4a444b;
}
.data.active {
  color: yellow;
  background: #4a444b;
}
.row > .item {
  width: 12.5%;
  text-align: center;
}
.w50 {
  width: 50%;
}
.w50 img,
.w60 img,
.w40 img  {
  width: 100%;
}
.w60 {
  width: 60%;
  flex-grow:1;
}
.w40 {
  width: 40%;
  flex-grow:1;
}

.col {
  display: flex;
  flex-direction: column;
}
.col .col-row {
  /* height: 50%; */
  justify-content: center;
  align-items: center;
  padding: 10%;
  text-align: center;
  border: 0px solid #055;
  font-weight: bold;
  flex-grow:1;
}
.h10 {
  height:10%;
}
.h35 {
  height:30%;
}
.h65 {
  height:65%;
}


.driver {
  background: #0076a3;
  color: #fff;
}
.wood {
  background: #273a81;
  color: #fff;
}
.iron {
  background: #0c8990;
  color: #fff;
}
.wedge {
  background: #016162;
  color: #fff;
}
.sandwedge {
  background: #948771;
  color: #fff;
}
.bold {
  font-weight: bold;
}
.item {
  font-size: 1.1rem;
}
.wrapper {
  border-radius: 0.5rem;
}
.level {
  width: 50%;
  height:55px;
  font-size: 2.5rem;
}
.cards, .coins {
  width: 70%;
  height:30px;
  font-size: 1.2rem;
}
.spacer {
  height:8px;
}
.center {
  text-align: center;
}
.upgrade {
  width: 400px;
  height:150px;
  background-image:var(--bgimg-png);
  background-size:cover;
}
.club-container {
  display: flex;
  flex-wrap: wrap;
  margin:var(--cont-mt);
  border: 0 solid #000;
  background: transparent;
  border-radius: 0 0 20% 20%; 
  background-image:var(--bgimg-png),linear-gradient(to bottom right, #033, #066);;
  background-repeat: no-repeat, repeat;
  background-size:cover;
  width: var(--cont-width);
  height: var(--cont-height);
  z-index: 5;
}
.club-container.legendary {
  display: flex;
  flex-wrap: wrap;
  margin:var(--cont-mt);
  border: 0 solid #000;
  background: transparent;
  border-radius: 0 0 20% 20%; 
  background-image:var(--bgimg-png), linear-gradient(180deg, var(--bgimg-legend1), var(--bgimg-legend2));
  background-repeat: no-repeat, repeat;
  background-size:cover;
  width: var(--cont-width);
  height: var(--cont-height);
  z-index: 5;
}
.club-container.epic {
  display: flex;
  flex-wrap: wrap;
  margin:var(--cont-mt);
  border: 0 solid #000;
  background: transparent;
  border-radius: 0 0 20% 20%; 
  background-image:var(--bgimg-png), linear-gradient(180deg, var(--bgimg-epic1), var(--bgimg-epic2));
  background-repeat: no-repeat, repeat;
  background-size:cover;
  width: var(--cont-width);
  height: var(--cont-height);
  z-index: 5;
}
.club-container.rare {
  display: flex;
  flex-wrap: wrap;
  margin:var(--cont-mt);
  border: 0 solid #000;
  background: transparent;
  border-radius: 0 0 20% 20%; 
  background-image:var(--bgimg-png), linear-gradient(180deg, var(--bgimg-rare1), var(--bgimg-rare2));
  background-repeat: no-repeat, repeat;
  background-size:cover;
  width: var(--cont-width);
  height: var(--cont-height);
  z-index: 5;
}
.club-container.common {
  display: flex;
  flex-wrap: wrap;
  margin:var(--cont-mt);
  border: 0 solid #000;
  background: transparent;
  border-radius: 0 0 20% 20%; 
  background-image:var(--bgimg-png), linear-gradient(180deg, var(--bgimg-common1), var(--bgimg-common2));
  background-repeat: no-repeat, repeat;
  background-size:cover;
  width: var(--cont-width);
  height: var(--cont-height);
  z-index: 5;
}
.club-container.wolf {
  display: flex;
  flex-wrap: wrap;
  margin:var(--cont-mt);
  border: 0 solid #000;
  background: transparent;
  border-radius: 0 0 20% 20%; 
  background-image:var(--bgimg-png), linear-gradient(180deg, var(--bgimg-wolf1), var(--bgimg-wolf2));
  background-repeat: no-repeat, repeat;
  background-size:cover;
  width: var(--cont-width);
  height: var(--cont-height);
  z-index: 5;
}
.trans {
  background: transparent;
  text-align: center;
  outline: none;
  border: none;
}
.input-spacer {
  width: 1%;
}
#club_level {
  width: 28%;
  font-size: 3.4rem;
  color:#fff;
}
#unused_cards {
  width: 33%;
  font-size: 2.2rem;
  color:#fff;

}
#gold_cost_K {
  width: 33%;
  font-size: 2.2rem;
  color:yellow;

}

.container2 {
  width: 400px;
  margin: 0 auto;
}
.flex-row {
  display:flex;
  width:100%;
}
.h20 {
  height: 20px;
}
.h80 {
  height: 70px;
}
.h25 {
  height:25px;
}
.h20 {
  height:20px;
  flex-grow:1;
}
.h40 {
  height:40px;
  flex-grow:3;
}
.wl1 {
  width:130px;
}
.btn {
  background: transparent;
  color:#fff;
  font-size: 1.05rem;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999, 0.06rem 0.06rem 0.06rem #333;
  border-radius: 0.25rem;
  border:1px solid rgba(250,250,250,0.5);
  width:auto;
}
.status {
  position:fixed;
  width: 400px;
  height:150px;
  top:440px;
  left:50%;
  margin-left: -200px;
  background: transparent;
  font-size: 2.2rem;
  text-align: center;
  color:blue;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999, 0.06rem 0.06rem 0.06rem #333;
  font-weight: bold;
}
.none {
  display: none;
}
.golf-rival {
  font-family: 'Passion One', cursive;
  font-weight: normal!important;
}
.fz24 {
  font-size: 24px;
  font-weight: normal!important;
}
.fz22 {
  font-size: 22px;
  font-weight: normal!important;
}
.fz20 {
  font-size: 30px;
  font-weight: normal!important;
}
.fz18 {
  font-size: 26px;
  font-weight: normal!important;
}
.fz16 {
  font-size: 26px;
  font-weight: normal!important;
}
h1 {
  font-size: 34px;
  width:400px;
  color:#fff;
  font-family: 'Passion One', cursive;
  margin: 0 auto;
}
.desc-column {
  font-size: 34px;
  font-family: 'Passion One', cursive;
}
a#open_preferences_center {
  width:240px;
  margin:0 auto;
  color:#555;
  text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999, 0.06rem 0.06rem 0.06rem #333;
  text-decoration:none;
  text-transform:capitalize;
  background:#ccc;
  border:1px solid #999;
  border-radius: 0.5rem;
  font-size:1.0rem;
  padding:0.25rem;
  position:fixed;
  bottom:5px;
  text-align:center;
  left:50%;
  margin-left:-120px;
  z-index:0;
  opacity:0.5;
  transition:1.5s;
}
a#open_preferences_center:hover {
  opacity:1;
  transition:0.5s;
}
ul.dropdown,
li.item {
  z-index:5;
}
.placeholder-left {
  width:280px;
  text-align:center;
  font-size:1.8rem;
  font-family: 'Passion One', cursive;
}
.placeholder-right {
  width:130px;
}
#reactions {
  width:400px;
  margin:0 auto;
  text-align:center;
  overflow:hidden;
}