/*
    Fill Evenly - Evenly distributes space among elements of a flex container irrspective of element contents.
    From StackOverflow
    Question: https://stackoverflow.com/questions/51775461/why-is-flex-fill-not-creating-equal-width-in-bootstrap
    Answer: https://stackoverflow.com/a/51775832/258809
*/
.fie > * {
  flex: 1 1 0rem !important;
}

.fie-1 > * {
  flex: 1 1 3rem !important;
}

.fie-2 > * {
  flex: 1 1 6rem !important;
}

.fie-3 > * {
  flex: 1 1 9rem !important;
}

.fie-4 > * {
  flex: 1 1 12rem !important;
}

.fie-5 > * {
  flex: 1 1 15rem !important;
}

.fie-6 > * {
  flex: 1 1 18rem !important;
}

.fie-7 > * {
  flex: 1 1 21rem !important;
}

.fie-8 > * {
  flex: 1 1 24rem !important;
}

.fill-items-evenly > * {
  flex: 1 1 0rem !important;
}

.fill-items-evenly-1 > * {
  flex: 1 1 3rem !important;
}

.fill-items-evenly-2 > * {
  flex: 1 1 6rem !important;
}

.fill-items-evenly-3 > * {
  flex: 1 1 9rem !important;
}

.fill-items-evenly-4 > * {
  flex: 1 1 12rem !important;
}

.fill-items-evenly-5 > * {
  flex: 1 1 15rem !important;
}

.fill-items-evenly-6 > * {
  flex: 1 1 18rem !important;
}

.fill-items-evenly-7 > * {
  flex: 1 1 21rem !important;
}

.fill-items-evenly-8 > * {
  flex: 1 1 24rem !important;
}