body{
    background-color:#181b1d;
    line-height: 1;
}

.card-title {
    margin-bottom: .25rem;
}

div.card
{
    min-width: 290px;
    max-width: 290px;
    height:380px;
}
div.card {    
    padding: 10px;
}

.list-inline.types > li{
    display: inline-block;
    min-height: 16px;
    max-height: 16px;
}

img.pokemon{
    height:128px;
    width:128px;
}

div.pokemon-types
{
    position: fixed;
    margin-top: -24px;
}

div.pokemon-types
{
    float:right;
    margin-top: -24px;
}

.capitalize{
    text-transform: capitalize;
}

.text-uppercase{
    text-transform: uppercase;
}

.search-icon{
    float: left;
    padding-left: 8px;
    z-index: 2;
    margin-bottom: -31px;
    padding-top: 12px;
}

.search-count{
    float: right; 
    margin-top: -32px;
}
.pokemon-htwt, .pokemon-stage
{
    font-weight: 400;;
    font-size: 70%;    
    color:rgb(95, 95, 95);
    background-color: rgb(184, 184, 184);
}

/***************************************************************************************** 
* TYPE COLOURS - https://bulbapedia.bulbagarden.net/wiki/Category:Type_color_templates
*****************************************************************************************/

img.type-badge{
    height:26px;
    min-height: 26px;
    width: 26px;
    min-width: 26px;
    padding-left: 0px;
    padding-top: 4px;
}

img.type-badge.small{
    height:16px;
    min-height: 16px;
    width: 16px;
    min-width: 16px;
    padding-left: 0px;
    padding-top: 4px;
}

.list-inline.types > li.badge-circle{    
    width:32px;
    max-width:32px;
    height:32px; 
    max-height:32px;
    text-align:center;
    line-height:0;
    border-radius:50%;
}
.list-inline.types > li.badge-circle.small{    
    width:20px;
    max-width:20px;
    height:20px; 
    max-height:20px;
    text-align:center;
    line-height:0;
    border-radius:50%;
}



.bg-bug-light{background:#C6D16E}
.bg-bug{background-color:#A8B820}
.bg-bug-dark{background-color:#6D7815}

.bg-dark-light{background-color:#A29288}
.bg-dark{background-color:#705848}
.bg-dark-dark{background-color:#49392F}

.bg-dragon-light{background-color:#A27DFA}
.bg-dragon{background-color:#7038F8}
.bg-dragon-dark{background-color:#4924A1}

.bg-electric-light{background-color:#FAE078}
.bg-electric{background-color:#F8D030}
.bg-electric-dark{background-color:#A1871F}

.bg-fairy-light{background-color:#F4BDC9}
.bg-fairy{background-color:#EE99AC}
.bg-fairy-dark{background-color:#9B6470}

.bg-fighting-light{background-color:#D67873}
.bg-fighting{background-color:#C03028}
.bg-fighting-dark{background-color:#7D1F1A}

.bg-fire-light{background-color:#F5AC78}
.bg-fire{background-color:#F08030}
.bg-fire-dark{background-color:#9C531F}

.bg-flying-light{background-color:#C6B7F5}
.bg-flying{background-color:#A890F0}
.bg-flying-dark{background-color:#6D5E9C}

.bg-ghost-light{background-color:#A292BC}
.bg-ghost{background-color:#705898}
.bg-ghost-dark{background-color:#493963}

.bg-grass-light{background-color:#A7DB8D}
.bg-grass{background-color:#78C850}
.bg-grass-dark{background-color:#4E8234}

.bg-ground-light{background-color:#EBD69D}
.bg-ground{background-color:#E0C068}
.bg-ground-dark{background-color:#927D44}

.bg-ice-light{background-color:#BCE6E6}
.bg-ice{background-color:#98D8D8}
.bg-ice-dark{background-color:#638D8D}

.bg-normal-light{background-color:#C6C6A7}
.bg-normal{background-color:#A8A878}
.bg-normal-dark{background-color:#6D6D4E}

.bg-poison-light{background-color:#C183C1}
.bg-poison{background-color:#A040A0}
.bg-poison-dark{background-color:#682A68}

.bg-psychic-light{background-color:#FA92B2}
.bg-psychic{background-color:#F85888}
.bg-psychic-dark{background-color:#A13959}

.bg-rock-light{background-color:#D1C17D}
.bg-rock{background-color:#B8A038}
.bg-rock-dark{background-color:#786824}

.bg-steel-light{background-color:#D1D1E0}
.bg-steel{background-color:#B8B8D0}
.bg-steel-dark{background-color:#787887}

.bg-water-light{background-color:#9DB7F5}
.bg-water{background-color:#6890F0}
.bg-water-dark{background-color:#445E9C}


.flip-div.flipped .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.flip-div.flipped .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-main{
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}

.front{
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
}
.back{
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);    
}

.front,.back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
}

div#header{
    position: sticky;
    top: 0px;
    z-index: 2;
    height: 38px;
    background: #181b1d;
}

td.col-stat-progress{
    width: 160px;
} 
td.stat-label{
    width: 50px;
}


/* HYPERLIST VIRTUAL SCROLL CLASS */
.vrow{
    left:calc(50% - 145px);
}