body{
  font-size: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  /* line-height: 20px; */
  -webkit-font-smoothing: antialiased;
}
:root{
  --blue: rgba(50,50,200,1);
  --red: rgba(200,50,50,1);
  --yellow: rgba(250, 250, 0, 1);
  --black: black;
  --grey: rgba(50,50,50,0.15);
}
@font-face {
    font-family: 'marvel-icons';
    src: url('./type/marvel-icons.eot?4fzpq9');
    src: url('./type/marvel-icons.eot?4fzpq9#iefix') format('embedded-opentype'), url('./type/marvel-icons.ttf?4fzpq9') format('truetype'), url('./type/marvel-icons.woff?4fzpq9') format('woff'), url('./type/marvel-icons.svg?4fzpq9#marvel-icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'body-text-font';
    src: url('./type/Avenir Next LT Pro Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'body-trait-font';
    src: url('./type/Komika Title Regular.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],[class*=" icon-"] {
    font-family: 'marvel-icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.custom-font{
  font-family: 'body-text-font';
}


.deck-symbol{
  width: 17px;
  height: 17px;
  min-height: 17px;
  object-fit: contain;
}

.quantity-deck{
  text-align: right;
}

.color-mental {
    color: #003961
}

.color-energy {
    color: #ff8f3f
}

.color-physical {
    color: #661e09
}

.color-wild {
    color: #00543a
}

.color-boost {
    color: #635120
}


.icon-crisis:before {
    content: "\e900"
}

.icon-amplify:before {
    content: "\e906"
}


.icon-acceleration:before {
    content: "\e901"
}


.icon-hazard:before {
    content: "\e902"
}

.icon-per_hero:before {
    content: "\e903"
}

.icon-unique:before {
    content: "\e904"
}

.icon-special:before {
    content: "\e905"
}

.icon-boost:before {
    content: "\e906"
}

.icon-cost:before {
    content: "\e907"
}

.icon-energy_fill:before {
    content: "\e908";
    color: #86671b
}

.icon-energy_outline:before {
    content: "\e909";
    color: #f6be33
}

.icon-energy:before {
    content: "\e90a"
}

.icon-mental_fill:before {
    content: "\e90b";
    color: #b7c9eb
}

.icon-mental_outline:before {
    content: "\e90c";
    color: #5c72c1
}

.icon-mental:before {
    content: "\e90d"
}

.icon-physical_fill:before {
    content: "\e90e";
    color: #ee9080
}

.icon-physical_outline:before {
    content: "\e90f";
    color: #aa3220
}

.icon-physical:before {
    content: "\e910"
}

.icon-wild_fill:before {
    content: "\e911";
    color: #45bc5c
}

.icon-wild_outline:before {
    content: "\e912";
    color: #247034
}

.icon-wild:before {
    content: "\e913"
}

.fg-leadership {
    text-shadow: 0px 0px 3px #3499eb !important
}

.fg-aggression {
    text-shadow: 0px 0px 3px #e01414 !important
}

.fg-protection {
    text-shadow: 0px 0px 3px #00ab41 !important
}

.fg-basic {
    text-shadow: 0px 0px 3px #606060 !important
}

.fg-justice {
    text-shadow: 0px 0px 3px #f2ca00 !important
}

.fg-pool {
    text-shadow: 0px 0px 3px hotpink !important
}

img{
  width: 300px;
  min-height: 100px;
}

.bg-yellow{
  background-color: yellow !important;
}

.table-image{
  width: 300px;
  min-height: 100px;
}

#card_list{
  height: calc(100vh - 33px);
  overflow-y: auto;
  width: max-content;
  overflow-x: hidden;
}
#card_details{
  font-size: 16px;
  white-space: normal !important;
  max-width: 315px;
  padding-left: 10px;
  min-width: 315px;
}
#table_body{
  white-space: nowrap;
}

th, td{
  padding: 5px;
  text-align: left;
}

tr:nth-child(odd) {
  background-color: var(--grey);
}

input{
  width: -webkit-fill-available;
}



.active{
  background-color: #22882288 !important;
}

.active-hero{
  outline: 1px solid black;
}

.inactive{

}

.clickable{
  cursor: pointer;
}

.error{
  background-color: #e0141488 !important;
}

.last{
  background-color: #3499eb88 !important;
}

tr:hover{
  color: black;
}

#textarea_result{
  width: 400px;
  height: calc(100vh - 50px);
}

#textarea_row{
  width: 20px;
  height: calc(100vh - 50px);
  margin-left:10px;
  border-color: white;
  resize: none;
}

.grau{
  background-color: #eeeeeee1 !important;
}

.orange{
  background-color: #eeeeeee1 !important;
}

.gruen{
  background-color: #00ab4188 !important;
}

.gelb{
  background-color: #f2ca0088 !important;
}

.blau{
  background-color: #3499eb88 !important;
}

.rot{
  background-color: #e0141488 !important;
}

.pink{
  background-color: #ff69b488 !important;
}


.card-traits,.card-text i {
    /*font-style: italic*/
}

.card-traits {
  font-family: 'body-trait-font';
  text-transform: uppercase;
  font-weight: normal;
}

p{

margin: 0;
}

.hp-ally{
  background-color: #00ab41;
    width: 50px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0px;
    height: 27px;
    padding-top: 5px;
}

.card-cut{
  height: 250px;
  overflow: hidden;
  object-fit: cover;
  object-position: top;
}