#decks #listDecks {
   margin: 60px 30px 20px 0;
   padding: 0 25px 20px 25px;
   max-height: calc(100% - 60px);
   overflow-y: scroll;
}

#decks .row {
   display: grid;
   grid-template-columns: 20% 60% 20%;
   margin: 12px auto;
   gap: 10px;
   border-radius: 20px;
   border: 1px solid rgba(200, 255, 255, 0.5);
   background: rgba(0, 0, 0, 0.5);
   opacity: 0.75;
}



#decks .row > div {
   height: 85px;
}

#decks .row > div:first-child {
   font-size: 250%;
   font-weight: bold;
   line-height: 85px;
   text-align: center;
   text-shadow: 0px 0px 1px black;
   color: rgba(220, 240, 250, 0.7);
   justify-content: center;
   align-self: center;
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
   transition: font-size 0.25s, opacity 0.25s;
   background-size: cover;
   background-position: center;
}

#decks .row.selected {
   opacity: 1;
   border: 4px solid #f89f19;
}


#decks .row.selected > div:first-child, #decks .row.priceBorder > div:first-child {
   border-top-left-radius: 16px!important;
   border-bottom-left-radius: 16px!important;
}

#decks .row.selected > div:first-child {
   font-size: 350%;
   text-shadow: 0px 0px 1px black, 0px 0px 2px black, 0px 0px 4px #cff, 0px 0px 11px #cff, 0px 0px 19px #eee;
   color: white;
}

.deckPreviewImage {
   background-size: 100%;
   background-position: center;

}

#decks .row > div:last-child {
   padding-left: 15px;
}

#decks .row > div {
   box-sizing: border-box;
}

#decks .row h3 {
   
   margin: 0;
   color: white;
   text-shadow: 0 0 3px #cff;
}

#decks .label, #decks .deckVal {
   font-size: 75%;
   display: inline-block;
   padding: 0px 10px;
   line-height: 25px;
   height: 25px;
}

#decks .label {font-weight: bold}

#decks .deckVal {
   margin-right: 10px;
}

.btnEditDeckName {
   width: 26px;
   border: none;
   margin: 0  0 -5px 12px;
}

#decks .rowNewDeck * {
   text-shadow: none!important;
}

.boxDeckAttributes {
   margin: 0.4em 0;
   color: white;
   line-height: 1em;
}
.boxDeckAttributes > span {
      display: inline-block;
      padding: 3px 10px;
      vertical-align: middle; /* Aligns text vertically within its line */
}

.boxDeckButtons {
   background-image: url(../images/icons/icon-cards.png);
   background-size: 60px;
   background-repeat: no-repeat;
   background-position: center;
   animation: flickerIcon 1s infinite;
}

@keyframes flickerIcon {
   0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.9;
    }
    75% {
      opacity: 0.7;
    }
}


.colorPower .label {
   background: #f89f19;
   border: 1px solid #f89f19;
}
.colorPower .deckVal {
   border: 1px solid #f89f19;
}

.colorFocus .label {
   background: #56aead;
   border: 1px solid #56aead;
}

.colorFocus .deckVal {
   border: 1px solid #56aead;
}

.colorSize .label {
   background: #677;
   border: 1px solid #677;
}
.colorSize .deckVal {
   border: 1px solid #677;
}

.boxDeckslot {
   background-image: url(../images/buttons/decks-deckslot.jpg);
   background-size: cover;

}





/* ------------ deck / deckbuilder ---------------------------------------------*/
/* ------------ deck / deckbuilder ---------------------------------------------*/
/* ------------ deck / deckbuilder ---------------------------------------------*/

#boxFilterEnergy .energy {
   width: 30px;
   height: 30px;
   text-shadow: none;
   font-size: 14px;
   line-height: 28px;
   box-shadow: none;
   border: 2px solid rgba(156, 200, 200, 0.7);
   color: rgba(156, 200, 200, 0.7);
}

#boxFilterEnergy .energy.active {
   box-shadow: none;
   box-shadow: 0 0 3px #2df8fd, 0 0 3px #2df8fd, 0 0 5px #2df8fd, 0 0 5px #2df8fd, 0 0 10px #2df8fd;
   border: 2px solid #2df8fd;
   color: #2df8fd;
}

/* ------------ decks ---------------------------------------------*/

#deck,
#decks {
   background-image: url("../images/bg/deckbuilder2.jpg");
   background-size: 120%;
}

#deck .deckCount {
   position: absolute;
   right: 20.5%;
   top: 5px;
   color: white;
   text-shadow: 0 0 10px white, 0 0 20px #c8b4c6;
   margin: 0;
}

#wrapperDecks {
}

#gridDeck {
   display: grid;
   grid-template-columns: 20% 60% 1fr;
   grid-template-rows: 100vh;
   grid-gap: 5px;
}

#deck .col-1 {
   height: 9 0%;
   margin-top: 32%;
   padding-bottom: 10px;
   overflow-y: scroll;
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
}
#deck .col-1::-webkit-scrollbar {
   display: none; /* Chrome, Safari, and Opera */
}

#tblDeck {
   font-family: "BarlowCondensed", "Arial Narrow", Arial, sans-serif, sans-serif;

   width: 100%;
}

#tblDeck .tdEnergy {
   text-align: center;
   font-size: 65%;
   width: 18px;
   height: 18px;
   line-height: 18px;
   font-weight: bold;
   border-radius: 30px;
   border: 1px solid #8ff;
   background: black;
   color: #8ff;
}

#tblDeck tr:nth-child(odd) td {
   background-color: rgba(0, 0, 0, 0.15);
}

#tblDeck tr:last-child td {
   border: none;
}

#deck .col-2 {
   height: 100%;
   margin-top: 6.4%;
   overflow-y: scroll;
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
   padding-left: 12px;
}
#deck .col-2::-webkit-scrollbar {
   display: none; /* Chrome, Safari, and Opera */
}

#library {
   width: 96%;
   margin: 10px auto;
   padding-bottom: 15px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 10px;
}

#library .cardMid {
   position: relative;
   transform: none;
   opacity: 0.5;
   filter: grayscale(0.9) blur(3px);
}

#library .cardMid .energy {
   left: -7px;
   top: -7px;
}

#library .cardMid.owned {
   opacity: 1;
   filter: grayscale(0);
}

#library .attack {
   left: 0cm;
}

/* #library .cardMid.selected .attack {
   background-image: url(../images/card/widgetAttackActive.png);
} */

#library .hp {
   right: 0px;
}

/* #library .cardMid.selected .hp {
   background-image: url(../images/card/widgetHpActive.png);
} */

#deck .col-3 {
   height: 100%;
   padding: 3%;
}

#deck .deckFilter {
   font-weight: normal;
   font-size: 95%;
   padding: 3%;
   border: 1px solid rgba(200, 255, 255, 0.4);
   border-radius: 6px;
   margin-bottom: 6px;
}

/* #deck .deckFilter.active, #deck .btnFilter.active {
    border: 1px solid #41cfc1;
    color: #2df8fd;
 } */

#deck .col-3 h4 {
   color: white;
   display: block;
   text-align: center;
   font-weight: bold;
   margin: 2px 0;
   text-shadow: 0 0 4px #fff, 0 0 11px #cff;
}

/*------------------ CARDMID: mid sized - in deckbuilder ------------------------*/

.cardMid {
   display: inline-block;
   width: 100%;
   background: #111;
   border-radius: 2px;
   border-bottom: 3px solid #111;
   aspect-ratio: 1/1;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center top;
   zoom: 1 !important;
}

#library .cardMid .cardPowers,
#library .cardMid .cardAmount {
   top: auto;
   bottom: 47px;
}

#library .cardAmount {
   display: block;
   left: 50%;
   bottom: 1px !important;
   aspect-ratio: 1/1;
   transform: translateX(-50%);
   border-radius: 50px;
   padding: 5px 10px;
   font-size: 85%;
   font-weight: bold;
   text-align: center;
   color: #ccc;
   background: rgba(0, 0, 0, 0.8);
   border: 1px solid black;
}

#library .selected .cardAmount {
   color: #333;
   background: rgba(255, 255, 255, 0.8);
   box-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
   border: 1px solid white;
}

.cardMid .cardPowers,
.cardMid .energy {
   zoom: 0.6;
}

.cardMid .energy {
   color: rgba(255, 255, 255, 0.8);
   box-shadow: none;
}

.cardMid.selected .energy {
   /* run animation once */
   animation: selectMidCard 0.5s 1 forwards;
}

/* .cardMid .attack,
.boxCardsPlayed .attack {
   left: -9px; 
}
.cardMid .hp,
.boxCardsPlayed .hp {
   right: -9px;
} */

.cardMid.selected {
   border: 4px solid;
   outline: 1px solid rgba(200, 240, 255, 1);
   box-shadow: 0 0 4px #8ff, 0 0 10px #8ff, 0 0 16px #6ab;
   animation: zoomBackground 0.5s 1 forwards;
}

.cardMid.selected .name {
   top: auto;
   bottom: 0;
   height: auto;
   color: rgba(255, 255, 255, 0.9);
}

.cardMid div {
   position: absolute;
}

.cardMid .name {
   font-family: "Barlow", Arial, sans-serif;
   font-weight: normal;
   color: white;
   left: 0;
   right: 0;
   bottom: 0;
   background: #111;
   font-size: 16px;
   text-align: center;
   padding: 4px;
}

.cardMid.selected .name {
}

.cardMid .cardVals {
   left: 0;
   right: 0;
   height: 25px;
}

#boxFilterRarity .btnFilterRarity.active {
   box-shadow: 0 0 4px rgba(220, 240, 250, 0.7);
}

#boxFilterRarity .btnFilterRarity.active[data-rarity="0"] {
   color: white;
   text-shadow: 0 0 5px #111;
   border: 2px solid #111;
   outline: 2px solid #38fcfd;
}

.cardMid.selected[data-rarity="0"] .name,
tr[data-rarity="0"] {
}

#boxFilterRarity .btnFilterRarity.active[data-rarity="1"] {
   color: white;
   text-shadow: 0 0 5px #111;
   border: 2px solid var(--rarity1);
   outline: 2px solid #38fcfd;
}

.cardMid[data-rarity="1"],
.borderCrate1 {
   border-color: var(--rarity1);
}

.cardMid.selected[data-rarity="1"] .name,
tr[data-rarity="1"] {
   background: var(--rarity1);
}

#boxFilterRarity .btnFilterRarity.active[data-rarity="2"] {
   color: #eee;
   text-shadow: 0 0 5px black;
   border: 2px solid var(--rarity2);
   outline: 2px solid #38fcfd;
}

.cardMid[data-rarity="2"],
.borderCrate2 {
   border-color: var(--rarity2);
}

.cardMid.selected[data-rarity="2"] .name,
tr[data-rarity="2"] {
   background: var(--rarity2);
}

#boxFilterRarity .btnFilterRarity.active[data-rarity="3"] {
   border-color: var(--rarity3);
}
.cardMid[data-rarity="3"],
.borderCrate3 {
   border-color: var(--rarity3);
}
.borderCrate3 {
   color: var(--rarity3);
}

.cardMid.selected[data-rarity="3"] .name,
tr[data-rarity="3"] {
   color: #186a6b;
   background: var(--rarity3);
}

#boxFilterRarity .btnFilterRarity.active[data-rarity="4"],
.cardMid[data-rarity="4"],
.borderCrate4 {
   color: var(--rarity4);
   border-color: var(--rarity4);
}

.cardMid.selected[data-rarity="4"] .name,
tr[data-rarity="4"] {
   color: rgba(255, 255, 255, 0.9);
   background: var(--rarity4);
}

.boxFilledCrates .borderCrate4 {
   box-shadow: 0 0 5px var(--rarity4), 0 0 3px var(--rarity4) inset;
   text-shadow: 0 0 2px var(--rarity4);
   background-color: rgba(220, 200, 150, 0.2);
}

/* filters */

#filterEnergyBg {
   width: 100%;
   aspect-ratio: 756/360;
   background-image: url("../images/deckbuilder/filter_energy.jpg");
   background-size: contain;
}

#boxFilterOwn {
   margin-top: 24%;
}

.filterInner {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 3px;
}

#boxFilterAttr .boxAttributeIcon,
#boxFilterEffect .boxEffectIcon {
   opacity: 0.7;
   width: auto;
   height: auto;
}

.cardMid .attributeIcons,
.cardMid .effectIcons {
   width: 26px;
   height: 26px;
   z-index: 3;
}

.cardMid .boxAttributeIcon,
.cardMid .boxEffectIcon,
.cardMid .icon_mod {
   width: 22px;
   height: 22px;
   border-width: 1.5px;
}

#boxFilterAttr .boxAttributeIcon.active {
   opacity: 1;
}

.boxBtnFilter {
   xfont-size: 110%;
   border: 2px solid rgba(255, 255, 255, 0.8);
   text-align: center;
   padding: 3px;
   border-radius: 2px;
   margin: 5px 0 3px 0;
   opacity: 0.7;
}

.filterInner .boxEffectIcon {
   opacity: 0.5;
}

.btnFilter {
   font-weight: bold;
   text-shadow: none;
   box-shadow: none;
   margin-top: 4px;
}

.filterInner .btnFilter.active,
.btnFilter.active {
   font-weight: bold;
   color: white;
   border: 2px solid #62e4e5;
   background: none;
   text-shadow: none; /* 0 0 5px rgba(98, 228, 228, 0.5), 0 0 10px rgba(98, 228, 228, 0.4); */
   opacity: 1;
}

.btnFilterOwned {
   opacity: 0.7;
   color: rgba(255, 255, 255, 0.8);
   border: 2px solid rgba(255, 255, 255, 0.8);
   background: none;
}

.btnFilterOwned.active {
   opacity: 1;
   box-shadow: inset 0 0 8px #62e4e5;
   color: #62e4e5;
   text-shadow: 0 0 3px #62e4e5;
}

.btnFilterRarity {
   color: rgba(255, 255, 255, 0.8);
   border: 2px solid rgba(255, 255, 255, 0.8);
   background: none;
}

@keyframes selectMidCard {
   0% {
      box-shadow: none;
   }
   100% {
      box-shadow: 0 0 5px #2df8fd, 0 0 5px #2df8fd, 0 0 10px #2df8fd, 0 0 10px #2df8fd, 0 0 10px #2df8fd;
   }
}

@keyframes zoomBackground {
   0% {
      background-size: 100%;
      background-position: center bottom;
   }
   100% {
      background-size: 110%;
   }
}