/*BUG*/
.button-bug{
    background-color:#59ff12;
    border-color:#4e8234;
}

.button-bug:hover{
    background:#3bc500;
}

.button-bug:active {
  background-color: #2f9b00;
  box-shadow: 0 3px #465f3c;
}

.bug{
    color: #59ff12 !important;
}

/*DARK*/
.button-dark{
    background-color:#525252;
    border-color:#393939;
}

.button-dark:hover{
    background:#454545;
}

.button-dark:active {
  background-color: #2c2c2c;
}

.dark{
    color: #202020;
}

/*DRAGON*/
.button-dragon{
    background-color:#5229b6;
    border-color:#2d1662;
}

.button-dragon:hover{
    background:#401f8c;
}

.button-dragon:active {
  background-color: #361b77;
}

.dragon{
    color: #2d1662;
}

/*ELECTRIC*/
.button-electric{
    background-color:#ffff00;
    border-color:#e6e600;
}

.button-electric:hover{
    background:#cccc00;
}

.button-electric:active {
  background-color: #cccc00;
}

.electric{
    color: #ffff00;
}

/*FAIRY*/
.button-fairy{
    background-color:#ff33ff;
    border-color:#e400e4;
}

.button-fairy:hover{
    background:#e400e4;
}

.button-fairy:active {
  background-color: #e400e4;
}

.fairy{
    color: #ff33ff;
}

/*FIGHTING*/
.button-fighting{
    background-color:#cc3636;
    border-color:#b92f2f;
}

.button-fighting:hover{
    background:#a52a2a;
}

.button-fighting:active {
  background-color: #a52a2a;
}

.fighting{
    color: #a52a2a;
}

/*FIRE*/
.button-fire{
    background-color:#ff5000;
    border-color:#ff3b00;
}

.button-fire:hover{
    background:#cc4000;
}

.button-fire:active {
  background-color: #cc4000;
}

.fire{
    color: #ff5000;
}

/*FLYING*/
.button-flying{
    background-color:#3dffff;
    border-color:#00b3b3;
}

.button-flying:hover{
    background:#00b3b3;
}

.button-flying:active {
  background-color: #00b3b3;
}

.flying{
    color: #3dffff;
}

/*GHOST*/
.button-ghost{
    background-color:#a292bc;
    border-color:#9582b2;
}

.button-ghost:hover{
    background:#8772a9;
}

.button-ghost:active {
  background-color: #8772a9;
}

.ghost{
    color: #a292bc;
}

/*GRASS*/
.button-grass{
    background-color:#09dd09;
    border-color:#08c408;
}

.button-grass:hover{
    background:#07ac07;
}

.button-grass:active {
  background-color: #07ac07;
}

.grass{
    color: #09dd09;
}

/*GROUND*/
.button-ground{
    background-color:#cc8236;
    border-color:#b9752f;
}

.button-ground:hover{
    background:#a5682a;
}

.button-ground:active {
  background-color: #a5682a;
}

.ground{
    color: #cc8236;
}

/*ICE*/
.button-ice{
    background-color:#0bffff;
    border-color:#32ffff;
}

.button-ice:hover{
    background:#00d7d7;
}

.button-ice:active {
  background-color: #00d7d7;
}

.ice{
    color: #0bffff;
}

/*NORMAL*/
.button-normal{
    background-color:#fffaf0;
    border-color:#fff2d7;
}

.button-normal:hover{
    background:#cecece;
}

.button-normal:active {
  background-color: #cecece;
}

.normal{
    color: #fffaf0;
}

/*POISON*/
.button-poison{
    background-color:#9a009a;
    border-color:#800080;
}

.button-poison:hover{
    background:#800080;
}

.button-poison:active {
  background-color: #800080;
}

.poison{
    color: #9a009a;
}

/*PSYCHIC*/
.button-psychic{
    background-color:#f700f7;
    border-color:#dd00dd;
}

.button-psychic:hover{
    background:#c400c4;
}

.button-psychic:active {
  background-color: #c400c4;
}

.psychic{
    color: #f700f7;
}

/*ROCK*/
.button-rock{
    background-color:#8b4513;
    border-color:#753a10;
}

.button-rock:hover{
    background:#5e2f0d;
}

.button-rock:active {
  background-color: #5e2f0d;
}

.rock{
    color: #8b4513;
}

/*STEEL*/
.button-steel{
    background-color:#adadad;
    border-color:#878787;
}

.button-steel:hover{
    background:#878787;
}

.button-steel:active {
  background-color: #878787;
}

.steel{
    color: #adadad;
}

/*WATER*/
.button-water{
    background-color:#0483ff;
    border-color:#006ad1;
}

.button-water:hover{
    background:#006ad1;
}

.button-water:active {
  background-color: #006ad1;
}

.water{
    color: #0483ff;
}

/*RESET*/
.button-reset{
    width: 9rem;
    background-color:#ff0000;
    border-color:#5c0000;
}

.button-reset:hover{
    background:#a80000;
}

.button-reset:active {
    background:#a80000;
}