$headercolor: #dfdfdf;
$bordercolor: #d3d3d3;

.w1 {
  width: 10%;
  display: flex;
}
.w2 {
  width: 20%;
  display: flex;
}
.w3 {
  width: 30%;
  display: flex;
}
.w4 {
  width: 40%;
  display: flex;
}
.w5 {
  width: 50%;
  display: flex;
}
.w6 {
  width: 60%;
  display: flex;
}
.w7 {
  width: 70%;
  display: flex;
}
.w8 {
  width: 80%;
  display: flex;
}
.w9 {
  width: 90%;
  display: flex;
}
.w10 {
  width: 100%;
  display: flex;
}

.h1 {
  height: 10%;
  display: flex;
}
.h2 {
  height: 20%;
  display: flex;
}
.h3 {
  height: 30%;
  display: flex;
}
.h4 {
  height: 40%;
  display: flex;
}
.h5 {
  height: 50%;
  display: flex;
}
.h6 {
  height: 60%;
  display: flex;
}
.h7 {
  height: 70%;
  display: flex;
}
.h8 {
  height: 80%;
  display: flex;
}
.h9 {
  height: 90%;
  display: flex;
}
.h10 {
  height: 100%;
  display: flex;
}