// Place all the styles related to the users controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@mixin border-right{
  padding-right: 2rem;
  border-right: 1px solid lightgray;
}
.show-pokemon-container{
  padding-left: 6rem;
  padding-top: 1rem;
}
#poke_iv, #poke_recent, #poke_health, #poke_atk, #poke_def, #poke_sta, #poke_name, #poke_num, #poke_attack, #poke_defend, #poke_height, #poke_weight{
  display: none;
}
.user-list{
  margin: 0 auto;
  width: 100%;
  margin-top: 5px;
  ul {
    font-size: 6rem;
    text-align: center;
    a {
      text-decoration: none;
    }
    li {
      border: 1px solid lightgray;
      img {
        max-height: 6rem;
      }
      table{
        width: 100%;
        .level {
          width: 20%;
        @include border-right;
        }
        .name {
          width: 60%;
        @include border-right;
        }
        .team {
          width: 20%;
        }
        td {
          font-size: 2.4rem;
        }
      }
    }
  }
}
data {
  display: none;
}
.loading{
  position: fixed;
  top: 50%;
  left: 50%;
}
.line {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: #4b9cdb;
}
.loading .line:nth-last-child(1) {animation: loadingA 1.5s 1s infinite;}
.loading .line:nth-last-child(2) {animation: loadingA 1.5s .5s infinite;}
.loading .line:nth-last-child(3) {animation: loadingA 1.5s 0s infinite;}
@keyframes loadingA {
    0% {height: 15px;}
    50% {height: 35px;}
    100% {height: 15px;}
}
