.color-box{
  min-width:2em;
  width:2em;
  height:2em;
  float:left;
  border-radius:3px;
  margin-inline-end:0.5em;
}

.name{
  font-weight:700;
}

.name:before{
  content:"\f007";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:1.5em;
  margin-inline-end:0.5em;
  color:#e0e0e7;
}

.age{
  font-size:1.2em;
  justify-content:center;
}

.age .badge{
  font-size:0.9em;
  width:2.2em;
  height:2.2em;
  line-height:2.2em;
  background:#499ef0;
  color:white;
  border-radius:100%;
  text-align:center;
}

.color .b-grid-header-text{
  animation:cycle-color 5s ease infinite;
}

@keyframes cycle-color{
  0%{
    color:black;
  }
  25%{
    color:red;
  }
  50%{
    color:purple;
  }
  75%{
    color:teal;
  }
  100%{
    color:blue;
  }
}
[data-column=name] .b-grid-header-text-content{
  display:flex;
  align-items:center;
}
[data-column=name] .b-grid-header-text-content label{
  flex:1;
}

.b-theme-material .addnew{
  position:absolute;
  right:0;
}