body {
  background: linear-gradient(180deg, #f6fcff 0, rgba(255, 255, 255, 0) 300px);
  font-family: "Roboto", 'arial', sans-serif;
  padding-top: 50px;
  font-weight: 300;
  background: white;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body.iframe {
  padding-top: 20px;
}

.w-100 {
  width: 100% !important;
}

/*narrow*/

#narrow-wrapper {
  max-width: 350px !important;
  abox-shadow: none;
  border-radius: 5px;
  margin-top: 50px;
  margin-bottom: 50px;
  abackground: #fffffffe;
}

#narrow-wrapper h1 {
  text-align: center;
  padding: 0;
  margin: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  font-size: 24px;
}

#narrow-wrapper div.input {
  margin-top: 10px;
}

#narrow-wrapper div.input label {
  color: #4B6276;
  atext-transform: uppercase;
  font-weight: 500;
}

#narrow-wrapper input[type=text],
#narrow-wrapper input[type=password] {
  background: #e2eaf1;
  padding: 5px !important;
  border: none;
  outline: none;
  font-weight: 600;
}

#narrow-wrapper {
  padding: 0;
}



@media(min-width:1081px) {
  body {
    background: rgb(33, 43, 52);
    background: linear-gradient(0deg, rgba(33, 43, 52, 1) 0%, rgba(29, 57, 82, 1) 38%, rgba(26, 26, 30, 1) 100%);
  }

  #narrow-wrapper {
    overflow: auto;
    padding: 20px 20px;
    margin: 30px auto;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}


@media(max-width:767px) {
  body {
    padding-top: 50px;
  }

  .navbar-inverse[role=navigation] {
    margin-top: 0 !important;
    background: #12181D;
  }

  #content {
    margin-top: -13px;
  }


}

.table.table-ultracondensed td,
.table.table-ultracondensed th,
.table-ultracondensed td,
.table-ultracondensed tr {
  padding: 2px 10px !important;
  margin: 0 !important;
}


.facepalmed {
  text-align: center;
  font-size: 22px;
  color: white;
  background: #3e98d7;
  padding: 15px 10px;
  height: 100%;
  overflow: hidden;
}

.facepalmed b {
  color: white;
}

.facepalmed img {
  margin: 0 auto;
  max-height: 150px;
}

#menuToggle {
  display: block;
  position: absolute;
  right: 10px;
  bottom: 50px;

  z-index: 999999;

  -webkit-user-select: none;
  user-select: none;
  position: fixed;
  background: #a0afb6;
  color: white;
  padding: 7px 7px 2px 7px;

}

#menuToggle.open {
  background: transparent;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */

  -webkit-touch-callout: none;

}

/*
 * Just a quick hamburger
 */
#menuToggle span {
  display: block;
  width: 28px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;

  background: white;

  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked~span {
  opacity: 1;
  transform: rotate(-45deg) translate(1px, -1px);
  background: white;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked~span:nth-last-child(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked~span:nth-last-child(3) {
  transform: rotate(45deg) translate(4px, 0px);
  background: white;
}


/*
 * And let's fade it in from the left
 */
#menuToggle input:checked~ul {
  transform: scale(1.0, 1.0);
  opacity: 1;
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */

#menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99998;
  height: 100%;
  position: fixed;
  background: #212B34;
  color: white;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  /*transform-origin: 0% 0%;
  transform: translate(100%, 0);*/
  transform: translate(9999px);
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -ms-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

#menu.open {

  transform: translate(0);
  opacity: .98;
}

#menu ul {
  margin: 0 auto;
  padding: 0;
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
  list-style: none;
  text-align: center;
  display: block;
  width: 100%;

}

#menu li a {
  color: white;
  text-transform: uppercase;
}



#alert-area .alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999999999;
}

.alert {
  border: none;
}

.alert-default {
  background: #e4e5e666;
}


mark,
ins {
  abackground-color: #D5E0E5;
  text-decoration: none;
}


b {
  color: #4A5156;
  afont-weight: 500;
}

label {
  font-weight: 500;
  clear: both;
  display: block;
  margin-bottom: 0px;
  margin-top: 5px;
}

.small-icon {
  font-size: 6px;
}


/*ads*/

/* menos de 500 */
.responsiveAd {
  width: 300px;
  height: 250px;
  margin: 0 auto;
  margin-bottom: 20px;
  display: block;
}

/* más de 500 */
@media(min-width: 450px) {
  .responsiveAd {
    width: 336px;
    height: 280px;
  }
}

/* más de 800 px */
@media(min-width: 800px) {
  .responsiveAd {
    width: 728px;
    max-width: 100%;
    height: 90px;
  }

  .responsiveAd.square,
  .responsiveAd.box {
    width: 336px;
    height: 280px;
  }

  .responsiveAd.vertical {
    width: 300px;
    height: 600px;
  }

  .responsiveAd.formats {
    width: 168px;
  }

  .responsiveAd.formats.affix {
    margin-top: -265px;
    width: 168px;
  }

  .responsiveAd.formats.affix-bottom,
  .responsiveAd.affixedad.affix-bottom {
    position: absolute;
    ;
  }
}

.adContainer {
  max-width: 336px;
  margin: 0 auto;
}



.linker {
  cursor: hand;
  color: #428bca;
  font-weight: normal;
}

.navbar .linker {
  color: white;
  font-weight: normal;
}

.navbar .linker:hover {
  color: white;
}

.linker:hover {
  color: #2A6496;
}

.linker.btn {
  color: white;
}

.letterize {
  padding: 2px;
  display: block;
  font-size: 11px;
  text-align: center;
  border-radius: 0px;
  color: white;
  font-weight: 300;
  opacity: 0.7;
  border: 1px solid white;
  font-weight: bold;
  text-transform: uppercase;
  min-width: 80px;
}

@media(max-width:768px) {
  .letterize {
    min-width: 30px;
  }
}

:root {
  --color-Standard: red;
  --color-Legacy: #7C438D;
  --color-Vintage: #04A1AF;
  --color-Modern: #008000;
  --color-Peasant: #64837F;
  --color-Commander: #9C600A;
  --color-Frontier: #E07900;
  --color-Pauper: #80949E;
  --color-Highlander: #4CD4C6;
  --color-Block: #FF27E8;
  --color-Extended: #8F9468;
  --color-Pioneer: #0080ff;
  --color-Brawl: #6f1616;
  --color-Historic: #8F9468;
  --color-Timeless: #a280bb;
  --color-Timeless-inverted: #5b4868;
  --color-Alchemy: #00b4d8;
  --color-Duel-Commander: #c9a227;
  --color-Historic-Brawl: #2d9f9f;
  --color-Premodern: #888888;
  --color-Old-school: #b8960c;
}

.letterize:hover {
  text-decoration: none;
  opacity: 1 !important;
}

.letterize.Standard {
  border: 1px solid var(--color-Standard);
  color: var(--color-Standard);
}

.letterize.Legacy {
  border: 1px solid var(--color-Legacy);
  color: var(--color-Legacy);
}

.letterize.Vintage {
  border: 1px solid var(--color-Vintage);
  color: var(--color-Vintage);
}

.letterize.Modern {
  border: 1px solid var(--color-Modern);
  color: var(--color-Modern);
}

.letterize.Peasant {
  border: 1px solid var(--color-Peasant);
  color: var(--color-Peasant);
}

.letterize.Commander {
  border: 1px solid var(--color-Commander);
  color: var(--color-Commander);
}

.letterize.Frontier {
  border: 1px solid var(--color-Frontier);
  color: var(--color-Frontier);
}

.letterize.Pauper {
  border: 1px solid var(--color-Pauper);
  color: var(--color-Pauper);
}

.letterize.Highlander {
  border: 1px solid var(--color-Highlander);
  color: var(--color-Highlander);
}

.letterize.Block {
  border: 1px solid var(--color-Block);
  color: var(--color-Block);
}

.letterize.Extended {
  border: 1px solid var(--color-Extended);
  color: var(--color-Extended);
}

.letterize.Pioneer {
  border: 1px solid var(--color-Pioneer);
  color: var(--color-Pioneer);
}

.letterize.Brawl {
  border: 1px solid var(--color-Brawl);
  color: var(--color-Brawl);
}

.letterize.Historic {
  border: 1px solid var(--color-Historic);
  color: var(--color-Historic);
}

.letterize.Timeless {
  border: 1px solid var(--color-Timeless);
  color: var(--color-Timeless);
}


.letterize.inverted {
  border-radius: 0;
  border: none;
  opacity: 0.75;
}

.letterize.inverted.Standard {
  color: white;
  background-color: var(--color-Standard);
}

.letterize.inverted.Legacy {
  color: white;
  background-color: var(--color-Legacy);
}

.letterize.inverted.Vintage {
  color: white;
  background-color: var(--color-Vintage);
}

.letterize.inverted.Modern {
  color: white;
  background-color: var(--color-Modern);
}

.letterize.inverted.Peasant {
  color: white;
  background-color: var(--color-Peasant);
}

.letterize.inverted.Commander {
  color: white;
  background-color: var(--color-Commander);
}

.letterize.inverted.Frontier {
  color: white;
  background-color: var(--color-Frontier);
}

.letterize.inverted.Pauper {
  color: white;
  background-color: var(--color-Pauper);
}

.letterize.inverted.Highlander {
  color: white;
  background-color: var(--color-Highlander);
}

.letterize.inverted.Block {
  color: white;
  background-color: var(--color-Block);
}

.letterize.inverted.Extended {
  color: white;
  background-color: var(--color-Extended);
}

.letterize.inverted.Pioneer {
  color: white;
  background-color: var(--color-Pioneer);
}

.letterize.inverted.Brawl {
  color: white;
  background-color: var(--color-Brawl);
}

.letterize.inverted.Historic {
  color: white;
  background-color: var(--color-Historic);
}

.letterize.inverted.Timeless {
  color: white;
  background-color: var(--color-Timeless-inverted);
}






.letterize a {
  color: white !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.letterize a:hover {
  opacity: 1;
  text-decoration: none;
}

.typeahead.tt-input {
  float: none !important;
  /*FIxed omnisearch cuando se pasa a html5 https://github.com/twitter/typeahead.js/issues/847#issuecomment-51594195 */
}

.buyButton {
  font-weight: bold;
  text-align: left;
  font-weight: normal !important;
  font-size: 10px;
  margin-bottom: 15px !important;
  width: 100%;
}

.buyButton .price {
  font-size: 18px;
  font-weight: bold;
}

.buyButton img {
  max-height: 35px;
  max-width: 35px;
  float: right;
}

.buyButton .call {
  font-size: 32px;
  float: right;
  display: block;
  font-weight: 300 !important;
}

.buyButton .brand {
  font-size: 10px;
  margin-top: -5px;
  display: block;
}

.buyInfo h3 {
  background: none;
  color: #565d67;
  border: none;
  margin: 0;
  padding: 0;
  font-weight: normal !important;
  padding-top: 20px !important;
  display: block;
}

.jumbotron {
  padding: 10px 0px !important;
  background: #eff2f5;
  border-radius: 0 !important;
  font-size: 16px;
  font-weight: 300;
  color: #000000ee;
  background: white;
}


@media(max-width:450px) {
  .jumbotron {
    padding: 10px !important;
  }
}


.jumbotron a {
  font-weight: 500;
}

.jumbotron a,
.jumbotron b,
.jumbotron strong {
  font-weight: 500;
}

#sidebar {

  aackground: whitesmoke;
  abackground: #e9e9e9;
  height: auto;
  width: 220px;
  position: fixed;
  /*height: 400px;
    -webkit-box-shadow: 0 0 5px rgb(224,224,224);
  -moz-box-shadow: 0 0 5px rgb(224,224,224);
  box-shadow: 0 0 5px rgb(224,224,224);*/

}

#sidebar .list-group {
  margin-top: 30px;
  width: 100%;
}

#sidebar a {
  border-left: none;
  border-right: none;
  apadding: 5px;
  text-transform: uppercase;
  font-size: 11px;
  border: none;

}

#sidebar a.active {
  background: #0084BB;
}

#sidebar .list-group-item.active,
#sidebar .list-group-item.active:hover,
#sidebar.list-group-item.active:focus {
  border-color: inherit;
}


#sidebar a.active {
  abackground: #212B34;
  color: white;
}

#sidebar .header {
  background: #212B34;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  padding: 5px;
}

.nopadding {
  padding: 0;
}

.btn {
  afont-size: 12px;
}

.full-width {
  width: 100%;
}

.margened {
  margin: 5px 0;
}

.btn-default {
  border: 1px solid silver !important;
}

.label {
  display: inline-block;
  margin: 1px 0;
}



.article {
  afont-size: 16px !important;
}

.article h1 {
  box-shadow: none;
}

.article h2 {
  text-transform: none !important;
  font-size: 32px;
  box-shadow: none !important;
}

.article li {
  list-style-position: outside;
}

.article .featured-intro {
  font-size: 28px;
  line-height: 1.25;
  font-weight: 100;
  padding: 20px 25px;

}

@media(max-width:450px) {
  .article .featured-intro {
    padding: 10px;
    font-size: 18px;
    background: #2f3845;
  }
}

.article_thumbnail h3 {
  afont-size: 24px !important;
  color: black;
  color: #4A5156;
  atext-transform: none;
}

.article_thumbnail h3 a {
  color: black;
  color: #4A5156;
}

.article_thumbnail .text {
  font-size: 16px;
}

img.grayscale {
  -webkit-filter: grayscale(50%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(50%);
}

img.grayscale:hover {
  -webkit-filter: grayscale(0%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}


img.whitened {
  filter: brightness(0) invert(1);
}

.nav-pills li a:hover img.whitened {
  filter: brightness(0) invert(0);
}

.nav-pills li.active:hover a img.whitened {
  filter: brightness(0) invert(1);
}


.article .framed {
  margin: 20px 0;
  /*overflow: auto;*/
}

/* card lisitings */

table td.up {
  color: green;
}

table td.down {
  color: red;

}

.truncate {
  display: table;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}

.truncate>* {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate a,
.truncate .linker {
  line-height: 45px;
}

.format .btn-info {
  background-color: #0098B4;
}

.format .btn-info:hover {
  background-color: #01BBDD;
}

.format h2 {
  /*background: #212b34;
  color: rgb(255, 254, 254);
  padding: 5px 10px;
  afont-size: 11px;
  margin-bottom: 30px;
  aopacity: 0.8;
  display: block;*/

  /*background: #212B34;
  color: white;
  display: block;
  aborder-bottom: 1px solid silver;
  padding: 8px 10px 5px 10px;
  margin-top: 20px;
  color:#D2D3D5;
  background: #202A33;
  margin-top:40px!important;*/

  margin-top: 40px !important;
  font-size: 16px;



}

.format tr .rank {
  font-size: 18px;
  font-weight: bold;
}

.format tr .rank::after {
  content: "#";
  color: #000000;
}


.format tr .glyphicon.hover {
  color: #E4E4E4;
}

.format tr:hover .glyphicon.hover {
  color: #5082B1;
}


.format table tr th {
  font-size: 9px;
  padding: 7px 10px;
  background: #E9E9E9;
  abackground: white;
  border: none;
  border-bottom: 1px solid #535658;
  color: #535658;
  margin-bottom: 10px !important;
}

.format table tr {
  background: white;
  padding: 5px;
  border-bottom: 1px solid #E3E3E3;
}

.big {
  afont-size: 150%;
}

.price-up {
  color: #C8E0C1;
}

.price-down {
  color: #E0C1C1;
}

.conceal {
  position: relative;
  height: 570px;
  overflow: hidden;

}

.conceal .mask {
  background: transparent url("../img/css/concealer.png") bottom repeat-x;
  height: 100px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.conceal .revealer {
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.capitalize {
  text-transform: capitalize;
}

table.table-compressed tr td {
  padding: 1px;
}

.table.table-condensed .progress {
  margin-bottom: 0
}

.table.table-condensed td,
.table.table-condensed th {
  padding: 10px !important;
}

@media(max-width:450px) {

  .table.table-condensed td,
  .table.table-condensed th {
    padding: 5px !important;
  }
}

.cake-debug {
  z-index: 99999999;

}

@media(max-width:768px) {
  .navbar-form {
    margin: 0;
  }
}

.cake-debug {
  z-index: 999999 !important;
  display: block;
}

.container {
  position: relative;
}

/* typeahead for omnisearch */

.typeahead {
  background-color: #565d67;
  amax-width: 150px;
  width: 100%;
  border: none;
  color: #D4D4D4;
}

.typeahead:focus {
  border: 2px solid #0097cf;
  border: none;
  outline: white;
  box-shadow: none;
}



.navbar .input-group-addon {
  background-color: #565d67;
  border: none;
  color: #CDCDCD;
}

.tt-query {}

.tt-hint {
  color: #999
}

.tt-menu {
  min-width: 200px;
  width: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.tt-suggestion {
  padding: 3px 10px;
  /*afont-size: 18px;*/
  line-height: 24px;
  display: block;
}

p.tt-suggestion {
  margin: 0;
  white-space: nowrap;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
  display: block;
}


/* `Basic HTML
----------------------------------------------------------------------------------------------------*/

ol {
  list-style: decimal;
}

ul {
  list-style: disc;
}

ul li {
  list-style-position: inside;
}

hr {
  border: 1px solid silver;
  margin: 10px 0;
}


/* `Spacing
----------------------------------------------------------------------------------------------------*/


svg {
  font-size: 12px !important;
}

p,
dl,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset {
  border: 0;
  margin: 0;

  margin-bottom: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  border-bottom: 1px solid whitesmoke;
  padding-left: 10px;
  padding-bottom: 5px;
  padding: 0px 0px 5px 0px;
}

.subtitle {
  padding-left: 10px;
}




input,
select {
  padding: 0px 2px;

}

input,
textarea {
  width: 100%;
}

input[type=checkbox] {
  width: auto;
  height: auto;
}

.toggle .btn {
  height: inherit;
}

.nowrap {
  white-space: nowrap;
  word-wrap: nowrap;
}


input.watermark {
  font-style: italic;
  color: #9FA392;
}

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  margin-left: 0;
}

/*
.modal-dialog {
  width: 100%;
  height: 100%;
  padding: 0;
  margin:0;
}

.modal-content {
  height: 100%;
  border-radius: 0;
  margin:0;
}
*/

.modal {
  color: black;
}

/* `Headings
----------------------------------------------------------------------------------------------------*/

h1 {
  font-size: 32px;
  font-weight: 200;
  afont-weight: normal;
  apadding: 0;
  margin: 20px 0;
  text-transform: uppercase;

}

@media(max-width:1080px) {
  h1 {
    font-size: 20px;
    font-weight: bold;
    padding: 10px 10px;
  }
}

h2 {
  font-size: 14px;

  display: block;
  clear: both;
}


h2 a {
  color: black;
  font-weight: bold;
}

h2,
.latest_decks h2 {
  font-size: 14px;
  padding: 7px;
  background: #565d67;
  color: white;
  display: block;
  clear: both;
  padding: 7px;
  border: none;
  box-shadow: 12px 0px 27px 0px rgba(0, 0, 0, 0.2);
}

@media(max-width:1080px) {
  .mobile-padding {
    padding-left: 10px;
    padding-right: 10px;
  }
}

h2 a,
.latest_decks h2 a {
  color: white;
  font-weight: bold;
  font-weight: 200 !important;
}

.container h2 {
  text-transform: uppercase;
  font-weight: bold;
  margin: 20px 0 10px 0;
}

.container .deck h2 {
  margin: 0px;
  text-transform: capitalize;
}

.container .deck h2 .small {
  color: whitesmoke;
}

h3 {
  margin: 15px 0;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  color: #4A5156;
}

h3 a {
  color: #4A5156;
}

h4 {
  color: black;
}

h5 {
  afont-size: 12px;
}

h6 {
  afont-size: 11px;
}


.col-padded {
  padding: 10px;
}

.container {
  width: 100%;
}

@media (min-width: 1081px) {
  .container {
    max-width: 1028px !important;
    width: auto !important;
  }
}

@media (min-width: 1445px) {
  .container {
    max-width: 1200px !important;
    width: auto !important;
  }
}




.small-container {
  max-width: 890px !important;
}

.heading {
  overflow: hidden;
  border-bottom: 5px solid #565D67;
  border-bottom: 1px solid #e7e8ea;
  color: #565D67;
  padding: 20px 0;
  margin: 0;
  margin-bottom: 20px;


  overflow: hidden;
  border-bottom: 5px solid #565D67;
  border-bottom: 1px solid #e7e8ea;
  color: #ffffff;
  padding: 20px 0;
  margin: 0;
  margin-bottom: 20px;
  background: #212b34;
  padding: 10px 10px;
  border-top: 1px solid white;
  border-bottom: 10px solid #303e4a;
  border-top: none;
  border-bottom: none;
  margin-top: 10px;
  margin-top: -1px;
  margin-bottom: 0;

}

@media (max-width: 768px) {
  .heading {
    margin-top: 10px;
  }

}

.heading .breadcrumbs,
.heading .breadcrumbs a {
  color: #428BCA;
  color: #5bc0de;  
}

.heading .small {
  color: #9B9B9B;
}

.subtitle {
  margin-top: -20px;
  display: block;
}

.subheader {
  border: none;
  font-size: 12px !important;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1rem !important;
  ;
  color: #8599b5 !important;
  color: #434e60 !important;
}

#app.container {
  /*
    -webkit-box-shadow: 0 0 5px rgb(224,224,224);
  -moz-box-shadow: 0 0 5px rgb(224,224,224);
  box-shadow: 0 0 5px rgb(224,224,224);
  */
}

.boxed {
  border: 1px solid silver;
  margin-top: 20px;
  overflow: auto;
  -webkit-box-shadow: 0 0 5px rgb(224, 224, 224);
  -moz-box-shadow: 0 0 5px rgb(224, 224, 224);
  box-shadow: 0 0 5px rgb(224, 224, 224);
}


.shadow {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  atext-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.cardshadow {
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  padding: 10px 30px 30px;
  margin: 20px 0;
}

.btn {
  afont-size: 10px;
  font-weight: bold;

  margin-bottom: 0;
  border: 2px solid transparent;
  border: none;
  border-radius: 0px;
  abox-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);


  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;

  background-image: none;
  height: auto;
}

.btn-sm {
  font-size: 10px;
}

.btn-outline {
  background: none !important;
}

.breadcrumbs,
.breadcrumbs a {
  font-size: 11px;
  color: #428bca;
  text-transform: uppercase;
}

.table {
  font-size: 14px;
  font-weight: 300;
  abox-shadow: 0px 0px 27px -5px rgba(0, 0, 0, 0.1);
}

table strong {
  afont-weight: normal;
  ;
}

.table th a {
  font-weight: bold;
}

.table th {
  border-bottom: 2px solid #555;
}

.table.sortable th {
  cursor: pointer;
}


.table tr td {

  vertical-align: middle !important;
  text-align: left;
  border: none !important;
  padding: 10px 10px !ipmortant;
}

/* más de 500 */
@media(max-width: 450px) {
  .table tr td {
    padding: 5px 5px !important;
  }
}

.table tr td:first-child,
.table tr td:first-child strong {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11px;
}

.table tr td .linker,
.table tr td a {
  atext-decoration: underline;
  font-weight: 500;
  afont-weight: normal;
}

.table .glyphicon.transparent {
  opacity: 1;
}

.table tr:hover .glyphicon.transparent {
  opacity: 1;
  color: #3A6BA3;
}

.table-striped>tbody>tr:nth-child(odd) {
  background: #EFF2F5;
}


.table-striped>tbody>tr:nth-child(even) {
  background: white;
}


/* homepage */

.rank {
  color: #30312B;
}

.date {
  color: #464646;
}

/*
.latest_decks .header{
  color:#D2D3D5;
  background: #202A33;
  display: block;
  border-bottom: 1px solid silver;
  padding:5px 10px 5px 10px;
  margin-top:20px;
}


.latest_decks .header h2{
  font-size: 16px;
  text-transform: uppercase;
  margin:0;
  padding:0;
  line-height: 16px;
  afont-weight: 200;
  afont-weight: normal;
}

.latest_decks .header .small{
  text-transform: capitalize;
}*/



.latest_decks table {
  table-layout: fixed;
  word-wrap: break-word;
  white-space: nowrap;
  margin-bottom: 10px;
}

.latest_decks table a,
.latest_decks table .linker {
  line-height: 45px;
  /*las centra y hace que al pasar el raton se marque completa*/
  font-weight: bold;
}

.latest_decks .list-group {

  border-left: none;
  border-right: none;
}

.latest_decks .list-group-item {
  padding: 0px 5px;
  border-left: none;
  border-right: none;
}

.latest_decks .list-group-item h3 {
  color: #008DD6;
  font-weight: normal;
  apadding: 10px 0 !important;
  margin: 0;

}



.latest_decks .events {
  border-top: 1px dotted silver;
  border-bottom: 1px dotted silver;
  padding-top: 10px;
}


.latest_decks .events a {
  color: #272822;
}



.latest_decks hr {
  border: 2px solid #dedede;
}

.latest_decks .extraTitles {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  writing-mode: tb-rl;
  background: #272822;
  color: white;
  afont-size: 8px;
  height: 100%;
  width: 10px;
}

.latest_decks h3 {
  font-size: 13px;
  padding: 5px 0;
}



/*omni swith*/

.omniSwitch {
  font-size: 12px !important;
  padding-top: 5px;
  padding-right: 5px;
  color: white;

}

.omniSwitch .btn {
  font-weight: normal !important;
}

.omniSwitch .btn-default {
  /*background-color: #565d67;
  color:whitesmoke;*/
  background: #3e4756;
  color: #ffffff;

}

/* navbar */

.navbar-inverse,
.menus-inverse {
  background: #212B34;
  border: none !important;
  min-height: auto;
  z-index: 9999;
}

.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: none;
}

.navbar-inverse .navbar-toggle {
  border: none;
}

.navbar-inverse .navbar-form {
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.navbar-inverse .form-control {
  height: 25px;
}

.navbar-inverse .form-control.typeahead {
  border-radius: 2px;
}

.navbar-inverse .navbar-brand {
  padding: 0 !important;
  height: 30px;
}

.navbar-inverse .navbar-nav>li>a:hover {
  background: #565D67;
}

.navbar-nav>li>a {
  acolor: white;
  atext-transform: uppercase;
  padding: 15px 11px;
  afont-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;

}

.priceSwitcher .btn {
  border: none !important;
}

@media(min-width:768px) {
  .navbar-header {
    margin-top: 4px;
  }

}

.navbar-brand {
  padding: 15px 0 !important;
}

.navbar-brand .omniSwitch {
  margin-top: -20px;

}


.nav .btn {
  font-weight: normal;
}


.menus .dropdown-header {
  padding: 3px 0;
}

#menu {
  margin-bottom: 0;

}



.fbLogin {
  padding: 12px 0px 0px 0px;
  width: 95px;
  overflow: hidden;
}

.formatItem:hover {
  color: black;
  background: silver;
}


#submenu {
  margin: 0;
  top: 0px;
  z-index: 1020;
  background-color: rgb(247, 247, 247);
  border-bottom: 1px solid #E1E1E1;
  padding: 0px 0px 0px 0px;
  min-height: 20px !important;
  max-height: 20px !important;
  afont-size: 11px;
  overflow: hidden;

  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#submenu ul {
  padding: 0;
  margin: 0;
}

#submenu li {
  margin: 0;
}

#submenu a {
  padding: 0px;
  color: black;
  afont-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
}

#submenu .icon-decks {
  background: url("../img/icons/mtgColors.png") 0 0 no-repeat;
  height: 16px;
  line-height: 16px;
  width: 16px;
  float: left;
}

#adminmenu {
  min-height: 10px !important;
  padding: 0;
  margin: 0
}

#adminmenu a {
  padding: 0;
}

.navbar-inverse[role=navigation] {
  amargin-top: 30px;
}

#usermenu {
  height: 30px !important;
  padding: 0px 0;
  margin: 0;
  background-color: #171f25;
  margin-bottom: 30px;
  box-shadow: 10px 10px 43px -20px rgba(0, 0, 0, 0.75);
}

#usermenu a {
  padding: 5px 5px;
  font-weight: normal;
}

#usermenu li:hover {
  background: #212B34;
}

#usermenu img {
  max-height: 15px;
  /*filter: grayscale(15%) brightness(100%);*/
}

#usermenu li:hover img {
  /*filter: grayscale(0%) brightness(100%); */
}

#usermenu li {
  margin-right: 10px;
}

#usermenu .container {
  padding: 0;
}

#navigation {
  box-shadow: 10px 10px 43px -20px rgba(0, 0, 0, 0.75);
}

#navigation h3 {
  color: #567692;
  font-size: 18px;
  border: none;
  font-weight: normal;
  padding: 0;
  margin: 0;
  text-transform: capitalize;
  padding: 5px 10px;
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 10px;
}

#navigation .navbar-toggle.user {
  padding: 12px;
  margin: 0;
}

.label-prime:hover {
  background: #171f25;
}

#navigation .label-prime .box {
  outline: 1px solid #feb93a55;
  padding: 3px 5px 2px 5px !important;
  margin: 4px 0;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 400;
  color: #feb93a;
  letter-spacing: 1px;
  font-size: 11px;
  background: #1e262c;
  display: block;
}

@media(max-width:767px) {
  .label-prime {
    margin-top: 5px;
  }

}

#navigation .label-prime:hover .box {
  background: #273139;
}

#navigation .label-prime img {
  filter: grayscale(0%) brightness(100%);
  margin-top: -3px;
  height: 16px;
}


.primeButton {
  border: 1px solid #feb93a55;
  color: #feb93a !important;

  border: 1px solid #5bc0de55;
  color: #5bc0de !important;

  /*background: #ac8234;
  color:#ffffff;*/
  padding: 1px 10px !important;
  margin: 3px 5px 3px 5px;
  aborder-radius: 2px;
}


#usermenu .dropdown-menu {
  background: #171f25;
  opacity: 0.98;
}

#usermenu .dropdown-menu a {
  color: #ffffff99;
  text-transform: uppercase;
  font-size: 11px;
}

#usermenu .dropdown-menu a:hover {
  color: white;
  background: #1E2931;
}

#usermenu .dropdown-menu a .glyphicon,
#usermenu .dropdown-menu a img {
  display: none;
}

#hometabs {
  background: #91A7B7;
  padding: 0;
}

#hometabs ul {
  margin: 0;
}


/* general app */

#app {

  abackground: white;
}


/* nav pills */

.nav-pills {
  aborder-bottom: 1px solid silver;
  font-size: 12px;
  font-weight: bold;
  amargin-bottom: 30px;
  background: #565D67;
  margin-top: 0px;
}

.nav-pills li a,
.nav-pills li .linker {
  padding: 10px;
  background: #565D67;
  color: white;
}

.nav-pills li a:hover,
.nav-pills li .linker:hover {
  color: black;
}

/* Tabs theming */
ul.nav-tabs {
  background: silver;
  padding: 0px;
  border: none;
  margin: 0;
  margin-bottom: 20px;
  background: #dee6eb;
  border-bottom: 1px solid #b7c1c9;

}

.nav-tabs>li {
  margin: 1px;
  margin-bottom: -1px;
  border: none;
}

.nav-tabs>li>a {
  padding: 6px;
  margin: 0;
  border: none !Important;
  text-transform: uppercase;
  font-size: 11px !Important;
  text-transform: uppercase;
  font-weight: bold;
  color: white;
  color: #535658;
  color: #2f4254;
}

.nav-tabs>li.active>a {
  color: black !important
}


/* archetypes */


#archetypes td {
  text-transform: capitalize;
  padding: 7px;
  vertical-align: middle;
  color: black;
  abox-shadow: inset 0px 0px 10px -10px rgba(239, 242, 245, 0.9);
}

#archetypes img {
  border: 2px solid #a0afb6;
}

#archetypes tr {
  abox-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #ffffff0d;
}

#archetypes td {
  border-bottom: 1px solid #e3e4e8 !important;

}

#archetypes .boxy {
  border: 2px solid #50D0FA;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-size: 40px;
  background-position: center -8px;
}

#archetypes a,
#archetypes .linker {
  color: #101F25;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 500;
  color: #171717;
}

#archetypes a:hover {}

#archetypes .archetype {
  margin: 5px 0;
}

#archetypes .badge {
  background: none;
  color: #769A79;
  font-weight: normal;
}

/* Clickable tables */
table.clickable td,
table.hoverable td {
  cursor: pointer;
}

table.clickable tr:hover td,
table.clickable tr:hover td a {
  background: #F1F4B9 !important;
}

.table th,
.th {
  background: #E5E5E5;
  color: #676767;
  border: none;
  font-size: 10px;
  apadding: 5px 10px !important;
  text-transform: uppercase;
  aline-height: 14px;

}

.table-striped>tbody>tr:nth-child(odd) {
  background: #f2f4f7;
  background: linear-gradient(90deg, rgba(239, 242, 245, 1) 0%, rgba(242, 244, 247, 0.8) 100%);
}



.table>thead>tr>th .th-inner {
  line-height: 14px;
}

.table th a,
.th a {
  color: white;
  color: #676767;
}



/* facebook like */
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
  width: 100% !important;
  min-width: 200px;
}

#footer {
  abackground: #212b34;
  margin-top: 20px;
  color: #7c8288;
  padding: 20px 0;
  overflow: visible;
}

@media(max-width:1080px) {

  #footer {
    background: #212b34;
  }
}

#footer a,
#footer .linker {
  font-weight: 200;
  color: #a4afbf;
}

#footer b {
  color: rgba(255, 255, 255, 0.751);
}


.footer-list {
  padding: 0 0 0 0;
  list-style: none;
}

.footer-list li:before {
  content: "- ";
  text-indent: -5px;
  color: #a4afbf;
}


/* decks view*/

.deck {
  background: #F9F9F9;

}


.deck table {
  margin: 10px 0 0 0;
  width: 100%;
  atable-layout: fixed;
  word-wrap: break-word;
  white-space: nowrap;

}

.deck table:first-child {
  margin: 0;
}

.deck table a {
  font-weight: 400;
  font-size: 14px;
}

.deck th {
  padding: 5px 0 5px 0;
}

.deck th .small {
  font-weight: normal;
  color: darkgray;
}


.deck td {
  list-style-type: none;
  font-size: 13px;
  font-weight: bold;
  padding: 1px 0 0 0;
}

.deck td.number {
  font-weight: normal;
}

.deck .price .option {
  color: black;
}

.deck .price.text-success .option {
  color: #258260 !important;
}

.deck .price.text-warning .option {
  color: #B97D0F !important;
}

.deck .price.text-danger .option {
  color: #941A1A !important;
}

@media(min-width:768px) {

  /*.deck .wholeDeck .cards,*/
  .columns-2 {
    -webkit-column-count: 2;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    /* Firefox */
    column-count: 2;
  }
}


.deck .manaCost {
  font-size: 9px !important;
  padding: 0 5px;
}

.deck .type {
  afont-size: 10px;
  color: #35362E;
  margin-bottom: 10px;
  afont-style: italic;
  font-size: 14px;
  font-weight: 500;
  font-size: 12px;
}

.deckHeader {
  aborder-bottom: 1px solid silver;
  display: block;
  overflow: hidden;
  padding: 10px;
  amargin: 10px 0;
  color: white;
  background: #498cca;
  font-size: 11px;
  apadding: 20px 10px;
}

.wholeDeck {
  overflow: hidden;
  padding: 10px 10px;
}

.wholeDeck .cardItem .number {
  width: 200px;
  overflow: hidden;
  display: inline-block;
}

@media (min-width: 360px) {

  .wholeDeck .cardItem .number {
    width: 230px;
    overflow: hidden;
    display: inline-block;
  }

}

@media (min-width: 450px) {

  .wholeDeck .cardItem .number {
    width: 250px;
    overflow: hidden;
    display: inline-block;
  }

}

@media (min-width: 1024px) {

  .wholeDeck .cardItem .number {
    width: 215px;
    overflow: hidden;
    display: inline-block;
  }

}



.deck .buttons {
  padding: 10px 0;
}

/*.deck .btn-group{
 width:100%;
 padding: 10px;
}*/


.deck .md,
.deck .sb {
  overflow: hidden;
  padding: 10px;

}


#prices a,
#prices .price {
  color: #008ab5;

  .deck .md {
    border-left: 1px solid white;
  }
}

#footer_prices table {
  background: whitesmoke;
}

#footer_prices table td {
  border: 1px solid white;
}

#footer_prices a {
  color: #008ab5;
}

#layer {
  aheight: 310px;
  margin: 0px 0;
}

#TCGPHiLoTable {
  background: white;
}

#TCGPHiLoTable td {
  padding: 5px;
  text-align: center;
}

#TCGPHiLoTable a {
  font-weight: bold;
  font-size: 11px;
}

#TCGPHiLoTable a .letter {
  color: black;
}

#TCGPHiLoTable .TCGPHiLoHigh {
  background-color: #D9FCD1;
}

#TCGPHiLoTable .TCGPHiLoMid {
  background-color: #E6F4FF;
}

#TCGPHiLoTable .TCGPHiLoLow {
  background-color: #FFE6E6;
}

/** buybar **/

#buyBar {
  border-top: 2px solid silver;
  -webkit-box-shadow: 0px -4px 10px 0px rgba(50, 50, 50, 0.46);
  -moz-box-shadow: 0px -4px 10px 0px rgba(50, 50, 50, 0.46);
  box-shadow: 0px -4px 10px 0px rgba(50, 50, 50, 0.46);
  padding: 10px 0px;
}

/* custom buttons*/
.btn-light {
  color: #565d67 !important;
  background-color: #ffffff;
  border-color: #dee6eb;
  text-align: left;
  text-shadow: none;
  padding: 10px;
  border: 1px solid #dee6eb;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
  background: #C1C6C8;
  color: black !important;
}

.btn-light img {
  float: right;
  max-width: 16px;
  max-height: 16px;
}

.btn-dark {
  color: #303B3F;
  background-color: #b2b5b9;
  border-color: #FFFFFF;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
  color: #ffffff;
  background-color: #A6A6A6;
  border-color: #ADADAD;
}

.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
  background-image: none;
}

.btn-dark.disabled,
.btn-dark[disabled],
fieldset[disabled] .btn-dark,
.btn-dark.disabled:hover,
.btn-dark[disabled]:hover,
fieldset[disabled] .btn-dark:hover,
.btn-dark.disabled:focus,
.btn-dark[disabled]:focus,
fieldset[disabled] .btn-dark:focus,
.btn-dark.disabled:active,
.btn-dark[disabled]:active,
fieldset[disabled] .btn-dark:active,
.btn-dark.disabled.active,
.btn-dark[disabled].active,
fieldset[disabled] .btn-dark.active {
  background-color: #7A7A7A;
  border-color: #ADADAD;
}


.btn-dark .badge {
  color: #7A7A7A;
  background-color: #ffffff;
}




/** visual view **/

.visualView.ajax {
  padding: 10px;
}

.visualView h3 {
  width: 100%;
  clear: both;
}

.visualView .md,
.visualView .sb {
  width: 100%;
  clear: both;
  background: #f5f5f5;
  overflow: hidden;
  padding: 10px;
}

.visualView .cardGroup {
  position: relative;
  float: left;
  min-height: 320px;
}

.visualView .cardGroup .number {
  position: absolute;
  bottom: 30px;
  left: 10px;
  font-size: 26px;
  color: white;
  background: black;
  width: 40px;
  height: 40px;
  text-align: center;
  z-index: 999;
  overflow: hidden;
  background: #00000099;
  color: white;
  border: 1px solid #ffffff44;
}

.visualView .visualCard {
  position: absolute;
  top: 0;
}

.visualView .visualCard img {
  width: 150px;
}



.dropdown-menu>li>a,
.dropdown-menu li .linker {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}


.dropdown-menu {
  width: 100%;
}


.dropdown-large {
  position: static !important;
  aposition: absolute !important;
}


.dropdown-menu-large {
  amargin-left: 16px;
  amargin-right: 16px;
  apadding: 20px 0px;
  background: #212B34 !important;
  opacity: 0.99;
  filter: alpha(opacity=99);
  /* For IE8 and earlier */
  awidth: 765px;
  left: 0;
  right: 0;
  position: absolute;


}

.dropdown-menu-large>li>ul {
  padding: 0;
  margin: 0;

}

.dropdown-menu-large>li>ul>li {
  list-style: none;
}

.dropdown-menu-large>li>ul>li>a,
.dropdown-menu-large>li>ul>li .linker {
  display: block;
  padding: 3px 0px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
  color: white;
  padding: 5px;
}

.dropdown-menu-large>li ul>li>a:hover,
.dropdown-menu-large>li ul>li>a:focus,
.dropdown-menu-large>li ul>li .linker:hover {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}

.dropdown-menu-large .disabled>a,
.dropdown-menu-large .disabled>a:hover,
.dropdown-menu-large .disabled>a:focus {
  color: silver;
}

.dropdown-menu-large .disabled>a:hover,
.dropdown-menu-large .disabled>a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  cursor: not-allowed;
}

.dropdown-menu-large .dropdown-header {
  color: #428bca;
  font-size: 18px;
}

@media (max-width: 1023px) {
  #footer {
    background: #212B34;
  }
}

@media (max-width: 768px) {
  .dropdown-menu-large {
    margin-left: 0;
    margin-right: 0;
  }

  .dropdown-menu-large>li {
    margin-bottom: 30px;
  }

  .dropdown-menu-large>li:last-child {
    margin-bottom: 0;
  }

  .dropdown-menu-large .dropdown-header {
    padding: 3px 15px !important;
  }

  .dropdown-menu-large {
    left: inherit
  }
}
}
}

@media screen {
  .collapse {
    overflow-y: scroll;
  }
}








.input .error-message {
  color: red;
  font-size: 10px;
  margin-top: 2px;
}

.well {
  background: #ffffff22;
  border: none;
}

#TCGPHiLoTable,
#footer_prices table {
  background: none;
}

#footer_prices table td {
  border: none;
}

#footer_prices table a {
  color: white;
}


/* table sort icons */

.sortable th:not(:empty) {
  padding-right: 18px;
  position: relative;
}

table.table th a[href*=sort] {
  padding-right: 18px;
  position: relative;
  display: block;
  border-right: 1px solid #33373d;
}

table.table th a[href*=sort]:before,
table.table th a[href*=sort]:after,
.sortable th:before,
.sortable th:after {
  border: 4px solid transparent;
  content: "";
  display: block;
  height: 0;
  right: 5px;
  top: 50%;
  position: absolute;
  width: 0;
}

table.table th a[href*=sort]:before,
.sortable th:before {
  border-bottom-color: #666;
  margin-top: -9px;
}

table.table th a[href*=sort]:after,
.sortable th:after {
  border-top-color: #666;
  margin-top: 1px;
}

.required label::after {
  content: "*";
  color: rgb(152, 0, 0);
  margin-left: 3px;
  font-size: 11px;
}

.error .error-message {
  color: red;
  font-size: 10px;
}

.vertical-bar {
  cursor: pointer;
  margin-right: 1px;
  display: inline-block;
  background-color: #28daf8;
  amax-width: 10px;
}

.vertical-bar:hover {
  background-color: white;
}

@media only screen and (max-width: 980px) {
  .scroll-group {
    overflow-x: auto;
    white-space: nowrap;
  }

  .scroll-group .item {
    display: inline-block;
    float: none;
  }

  .scroll-group .visible-xs {
    display: inline-block !important;
  }

}

/* =========================
   TABLER BG UTILITIES (FULL)
   ========================= */

/* 🎨 Variables */
:root {
  --tblr-blue: #206bc4;
  --tblr-azure: #4299e1;
  --tblr-indigo: #4263eb;
  --tblr-purple: #ae3ec9;
  --tblr-pink: #d63384;
  --tblr-red: #d63939;
  --tblr-orange: #f76707;
  --tblr-yellow: #f59f00;
  --tblr-lime: #74b816;
  --tblr-green: #2fb344;
  --tblr-teal: #0ca678;
  --tblr-cyan: #17a2b8;

  /* ✅ Gray scale centered on #3e4756 */
  --tblr-gray-50: #f4f6f8;
  --tblr-gray-100: #e6e9ee;
  --tblr-gray-200: #d1d6de;
  --tblr-gray-300: #b0b7c3;
  --tblr-gray-400: #8a94a3;
  --tblr-gray-500: #667085;
  --tblr-gray-600: #3e4756;
  /* 👈 base gray */
  --tblr-gray-700: #343c49;
  --tblr-gray-800: #2a313c;
  --tblr-gray-900: #1f252e;

  --tblr-white: #ffffff;
  --tblr-black: #000000;
  --tblr-light: var(--tblr-gray-100);
  --tblr-dark: var(--tblr-gray-800);
  --tblr-muted: var(--tblr-gray-600);

  /* 🧩 Semantic */
  --tblr-primary: var(--tblr-blue);
  --tblr-secondary: var(--tblr-gray-600);
  --tblr-success: var(--tblr-green);
  --tblr-info: var(--tblr-cyan);
  --tblr-warning: var(--tblr-yellow);
  --tblr-danger: var(--tblr-red);
}

/* 🧱 Base colors */
.bg-blue {
  background-color: var(--tblr-blue) !important;
}

.bg-azure {
  background-color: var(--tblr-azure) !important;
}

.bg-indigo {
  background-color: var(--tblr-indigo) !important;
}

.bg-purple {
  background-color: var(--tblr-purple) !important;
}

.bg-pink {
  background-color: var(--tblr-pink) !important;
}

.bg-red {
  background-color: var(--tblr-red) !important;
}

.bg-orange {
  background-color: var(--tblr-orange) !important;
}

.bg-yellow {
  background-color: var(--tblr-yellow) !important;
}

.bg-lime {
  background-color: var(--tblr-lime) !important;
}

.bg-green {
  background-color: var(--tblr-green) !important;
}

.bg-teal {
  background-color: var(--tblr-teal) !important;
}

.bg-cyan {
  background-color: var(--tblr-cyan) !important;
}

/* ⚪ Gray scale */
.bg-gray-50 {
  background-color: var(--tblr-gray-50) !important;
}

.bg-gray-100 {
  background-color: var(--tblr-gray-100) !important;
}

.bg-gray-200 {
  background-color: var(--tblr-gray-200) !important;
}

.bg-gray-300 {
  background-color: var(--tblr-gray-300) !important;
}

.bg-gray-400 {
  background-color: var(--tblr-gray-400) !important;
}

.bg-gray-500 {
  background-color: var(--tblr-gray-500) !important;
}

.bg-gray-600 {
  background-color: var(--tblr-gray-600) !important;
}

.bg-gray-700 {
  background-color: var(--tblr-gray-700) !important;
}

.bg-gray-800 {
  background-color: var(--tblr-gray-800) !important;
}

.bg-gray-900 {
  background-color: var(--tblr-gray-900) !important;
}

/* ⚪ Neutral */
.bg-white {
  background-color: var(--tblr-white) !important;
}

.bg-black {
  background-color: var(--tblr-black) !important;
}

.bg-light {
  background-color: var(--tblr-light) !important;
}

.bg-dark {
  background-color: var(--tblr-dark) !important;
}

.bg-muted {
  background-color: var(--tblr-muted) !important;
}

/* 🧩 Semantic */
.bg-primary {
  background-color: var(--tblr-primary) !important;
}

.bg-secondary {
  background-color: var(--tblr-secondary) !important;
}

.bg-success {
  background-color: var(--tblr-success) !important;
}

.bg-info {
  background-color: var(--tblr-info) !important;
}

.bg-warning {
  background-color: var(--tblr-warning) !important;
}

.bg-danger {
  background-color: var(--tblr-danger) !important;
}

/* 🌫 Light variants */
.bg-primary-lt {
  background-color: rgba(32, 107, 196, 0.1) !important;
}

.bg-secondary-lt {
  background-color: rgba(62, 71, 86, 0.1) !important;
}

.bg-success-lt {
  background-color: rgba(47, 179, 68, 0.1) !important;
}

.bg-info-lt {
  background-color: rgba(23, 162, 184, 0.1) !important;
}

.bg-warning-lt {
  background-color: rgba(245, 159, 0, 0.1) !important;
}

.bg-danger-lt {
  background-color: rgba(214, 57, 57, 0.1) !important;
}

/* 🔍 Extras */
.bg-transparent {
  background-color: transparent !important;
}

.bg-opacity-0 {
  opacity: 0;
}

.bg-opacity-25 {
  opacity: 0.25;
}

.bg-opacity-50 {
  opacity: 0.5;
}

.bg-opacity-75 {
  opacity: 0.75;
}

.bg-opacity-100 {
  opacity: 1;
}

.bg-gradient {
  background-image: linear-gradient(180deg,
      rgba(255, 255, 255, 0.15),
      rgba(0, 0, 0, 0.15));
}