/* Defaults */
div.bar {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  height: 2em;
  background-color: red;
  color: white;
  font-weight: bold;
  font-size: smaller;
}

div.bar.slim {
  height: 1em;
}

/* When displaying a pct., make sure there's room for 4 chars. at least */
div.bar[class^=bar-display], div.bar[class*=" bar-display"] {
  min-width: 4ch !important;
}

/* Size */
div.bar.bar-pct-0 {
  min-width: 0%;
  width: 0%;
  max-width: 0%;
}

div.bar.bar-pct-1 {
  min-width: 1%;
  width: 1%;
  max-width: 1%;
}

div.bar.bar-pct-2 {
  min-width: 2%;
  width: 2%;
  max-width: 2%;
}

div.bar.bar-pct-3 {
  min-width: 3%;
  width: 3%;
  max-width: 3%;
}

div.bar.bar-pct-4 {
  min-width: 4%;
  width: 4%;
  max-width: 4%;
}

div.bar.bar-pct-5 {
  min-width: 5%;
  width: 5%;
  max-width: 5%;
}

div.bar.bar-pct-6 {
  min-width: 6%;
  width: 6%;
  max-width: 6%;
}

div.bar.bar-pct-7 {
  min-width: 7%;
  width: 7%;
  max-width: 7%;
}

div.bar.bar-pct-8 {
  min-width: 8%;
  width: 8%;
  max-width: 8%;
}

div.bar.bar-pct-9 {
  min-width: 9%;
  width: 9%;
  max-width: 9%;
}

div.bar.bar-pct-10 {
  min-width: 10%;
  width: 10%;
  max-width: 10%;
}

div.bar.bar-pct-11 {
  min-width: 11%;
  width: 11%;
  max-width: 11%;
}

div.bar.bar-pct-12 {
  min-width: 12%;
  width: 12%;
  max-width: 12%;
}

div.bar.bar-pct-13 {
  min-width: 13%;
  width: 13%;
  max-width: 13%;
}

div.bar.bar-pct-14 {
  min-width: 14%;
  width: 14%;
  max-width: 14%;
}

div.bar.bar-pct-15 {
  min-width: 15%;
  width: 15%;
  max-width: 15%;
}

div.bar.bar-pct-16 {
  min-width: 16%;
  width: 16%;
  max-width: 16%;
}

div.bar.bar-pct-17 {
  min-width: 17%;
  width: 17%;
  max-width: 17%;
}

div.bar.bar-pct-18 {
  min-width: 18%;
  width: 18%;
  max-width: 18%;
}

div.bar.bar-pct-19 {
  min-width: 19%;
  width: 19%;
  max-width: 19%;
}

div.bar.bar-pct-20 {
  min-width: 20%;
  width: 20%;
  max-width: 20%;
}

div.bar.bar-pct-21 {
  min-width: 21%;
  width: 21%;
  max-width: 21%;
}

div.bar.bar-pct-22 {
  min-width: 22%;
  width: 22%;
  max-width: 22%;
}

div.bar.bar-pct-23 {
  min-width: 23%;
  width: 23%;
  max-width: 23%;
}

div.bar.bar-pct-24 {
  min-width: 24%;
  width: 24%;
  max-width: 24%;
}

div.bar.bar-pct-25 {
  min-width: 25%;
  width: 25%;
  max-width: 25%;
}

div.bar.bar-pct-26 {
  min-width: 26%;
  width: 26%;
  max-width: 26%;
}

div.bar.bar-pct-27 {
  min-width: 27%;
  width: 27%;
  max-width: 27%;
}

div.bar.bar-pct-28 {
  min-width: 28%;
  width: 28%;
  max-width: 28%;
}

div.bar.bar-pct-29 {
  min-width: 29%;
  width: 29%;
  max-width: 29%;
}

div.bar.bar-pct-30 {
  min-width: 30%;
  width: 30%;
  max-width: 30%;
}

div.bar.bar-pct-31 {
  min-width: 31%;
  width: 31%;
  max-width: 31%;
}

div.bar.bar-pct-32 {
  min-width: 32%;
  width: 32%;
  max-width: 32%;
}

div.bar.bar-pct-33 {
  min-width: 33%;
  width: 33%;
  max-width: 33%;
}

div.bar.bar-pct-34 {
  min-width: 34%;
  width: 34%;
  max-width: 34%;
}

div.bar.bar-pct-35 {
  min-width: 35%;
  width: 35%;
  max-width: 35%;
}

div.bar.bar-pct-36 {
  min-width: 36%;
  width: 36%;
  max-width: 36%;
}

div.bar.bar-pct-37 {
  min-width: 37%;
  width: 37%;
  max-width: 37%;
}

div.bar.bar-pct-38 {
  min-width: 38%;
  width: 38%;
  max-width: 38%;
}

div.bar.bar-pct-39 {
  min-width: 39%;
  width: 39%;
  max-width: 39%;
}

div.bar.bar-pct-40 {
  min-width: 40%;
  width: 40%;
  max-width: 40%;
}

div.bar.bar-pct-41 {
  min-width: 41%;
  width: 41%;
  max-width: 41%;
}

div.bar.bar-pct-42 {
  min-width: 42%;
  width: 42%;
  max-width: 42%;
}

div.bar.bar-pct-43 {
  min-width: 43%;
  width: 43%;
  max-width: 43%;
}

div.bar.bar-pct-44 {
  min-width: 44%;
  width: 44%;
  max-width: 44%;
}

div.bar.bar-pct-45 {
  min-width: 45%;
  width: 45%;
  max-width: 45%;
}

div.bar.bar-pct-46 {
  min-width: 46%;
  width: 46%;
  max-width: 46%;
}

div.bar.bar-pct-47 {
  min-width: 47%;
  width: 47%;
  max-width: 47%;
}

div.bar.bar-pct-48 {
  min-width: 48%;
  width: 48%;
  max-width: 48%;
}

div.bar.bar-pct-49 {
  min-width: 49%;
  width: 49%;
  max-width: 49%;
}

div.bar.bar-pct-50 {
  min-width: 50%;
  width: 50%;
  max-width: 50%;
}

div.bar.bar-pct-51 {
  min-width: 51%;
  width: 51%;
  max-width: 51%;
}

div.bar.bar-pct-52 {
  min-width: 52%;
  width: 52%;
  max-width: 52%;
}

div.bar.bar-pct-53 {
  min-width: 53%;
  width: 53%;
  max-width: 53%;
}

div.bar.bar-pct-54 {
  min-width: 54%;
  width: 54%;
  max-width: 54%;
}

div.bar.bar-pct-55 {
  min-width: 55%;
  width: 55%;
  max-width: 55%;
}

div.bar.bar-pct-56 {
  min-width: 56%;
  width: 56%;
  max-width: 56%;
}

div.bar.bar-pct-57 {
  min-width: 57%;
  width: 57%;
  max-width: 57%;
}

div.bar.bar-pct-58 {
  min-width: 58%;
  width: 58%;
  max-width: 58%;
}

div.bar.bar-pct-59 {
  min-width: 59%;
  width: 59%;
  max-width: 59%;
}

div.bar.bar-pct-60 {
  min-width: 60%;
  width: 60%;
  max-width: 60%;
}

div.bar.bar-pct-61 {
  min-width: 61%;
  width: 61%;
  max-width: 61%;
}

div.bar.bar-pct-62 {
  min-width: 62%;
  width: 62%;
  max-width: 62%;
}

div.bar.bar-pct-63 {
  min-width: 63%;
  width: 63%;
  max-width: 63%;
}

div.bar.bar-pct-64 {
  min-width: 64%;
  width: 64%;
  max-width: 64%;
}

div.bar.bar-pct-65 {
  min-width: 65%;
  width: 65%;
  max-width: 65%;
}

div.bar.bar-pct-66 {
  min-width: 66%;
  width: 66%;
  max-width: 66%;
}

div.bar.bar-pct-67 {
  min-width: 67%;
  width: 67%;
  max-width: 67%;
}

div.bar.bar-pct-68 {
  min-width: 68%;
  width: 68%;
  max-width: 68%;
}

div.bar.bar-pct-69 {
  min-width: 69%;
  width: 69%;
  max-width: 69%;
}

div.bar.bar-pct-70 {
  min-width: 70%;
  width: 70%;
  max-width: 70%;
}

div.bar.bar-pct-71 {
  min-width: 71%;
  width: 71%;
  max-width: 71%;
}

div.bar.bar-pct-72 {
  min-width: 72%;
  width: 72%;
  max-width: 72%;
}

div.bar.bar-pct-73 {
  min-width: 73%;
  width: 73%;
  max-width: 73%;
}

div.bar.bar-pct-74 {
  min-width: 74%;
  width: 74%;
  max-width: 74%;
}

div.bar.bar-pct-75 {
  min-width: 75%;
  width: 75%;
  max-width: 75%;
}

div.bar.bar-pct-76 {
  min-width: 76%;
  width: 76%;
  max-width: 76%;
}

div.bar.bar-pct-77 {
  min-width: 77%;
  width: 77%;
  max-width: 77%;
}

div.bar.bar-pct-78 {
  min-width: 78%;
  width: 78%;
  max-width: 78%;
}

div.bar.bar-pct-79 {
  min-width: 79%;
  width: 79%;
  max-width: 79%;
}

div.bar.bar-pct-80 {
  min-width: 80%;
  width: 80%;
  max-width: 80%;
}

div.bar.bar-pct-81 {
  min-width: 81%;
  width: 81%;
  max-width: 81%;
}

div.bar.bar-pct-82 {
  min-width: 82%;
  width: 82%;
  max-width: 82%;
}

div.bar.bar-pct-83 {
  min-width: 83%;
  width: 83%;
  max-width: 83%;
}

div.bar.bar-pct-84 {
  min-width: 84%;
  width: 84%;
  max-width: 84%;
}

div.bar.bar-pct-85 {
  min-width: 85%;
  width: 85%;
  max-width: 85%;
}

div.bar.bar-pct-86 {
  min-width: 86%;
  width: 86%;
  max-width: 86%;
}

div.bar.bar-pct-87 {
  min-width: 87%;
  width: 87%;
  max-width: 87%;
}

div.bar.bar-pct-88 {
  min-width: 88%;
  width: 88%;
  max-width: 88%;
}

div.bar.bar-pct-89 {
  min-width: 89%;
  width: 89%;
  max-width: 89%;
}

div.bar.bar-pct-90 {
  min-width: 90%;
  width: 90%;
  max-width: 90%;
}

div.bar.bar-pct-91 {
  min-width: 91%;
  width: 91%;
  max-width: 91%;
}

div.bar.bar-pct-92 {
  min-width: 92%;
  width: 92%;
  max-width: 92%;
}

div.bar.bar-pct-93 {
  min-width: 93%;
  width: 93%;
  max-width: 93%;
}

div.bar.bar-pct-94 {
  min-width: 94%;
  width: 94%;
  max-width: 94%;
}

div.bar.bar-pct-95 {
  min-width: 95%;
  width: 95%;
  max-width: 95%;
}

div.bar.bar-pct-96 {
  min-width: 96%;
  width: 96%;
  max-width: 96%;
}

div.bar.bar-pct-97 {
  min-width: 97%;
  width: 97%;
  max-width: 97%;
}

div.bar.bar-pct-98 {
  min-width: 98%;
  width: 98%;
  max-width: 98%;
}

div.bar.bar-pct-99 {
  min-width: 99%;
  width: 99%;
  max-width: 99%;
}

div.bar.bar-pct-100 {
  min-width: 100%;
  width: 100%;
  max-width: 100%;
}

/* Inner-text */
div.bar.bar-display-0:before {
  content: "0%";
}

div.bar.bar-display-1:before {
  content: "1%";
}

div.bar.bar-display-2:before {
  content: "2%";
}

div.bar.bar-display-3:before {
  content: "3%";
}

div.bar.bar-display-4:before {
  content: "4%";
}

div.bar.bar-display-5:before {
  content: "5%";
}

div.bar.bar-display-6:before {
  content: "6%";
}

div.bar.bar-display-7:before {
  content: "7%";
}

div.bar.bar-display-8:before {
  content: "8%";
}

div.bar.bar-display-9:before {
  content: "9%";
}

div.bar.bar-display-10:before {
  content: "10%";
}

div.bar.bar-display-11:before {
  content: "11%";
}

div.bar.bar-display-12:before {
  content: "12%";
}

div.bar.bar-display-13:before {
  content: "13%";
}

div.bar.bar-display-14:before {
  content: "14%";
}

div.bar.bar-display-15:before {
  content: "15%";
}

div.bar.bar-display-16:before {
  content: "16%";
}

div.bar.bar-display-17:before {
  content: "17%";
}

div.bar.bar-display-18:before {
  content: "18%";
}

div.bar.bar-display-19:before {
  content: "19%";
}

div.bar.bar-display-20:before {
  content: "20%";
}

div.bar.bar-display-21:before {
  content: "21%";
}

div.bar.bar-display-22:before {
  content: "22%";
}

div.bar.bar-display-23:before {
  content: "23%";
}

div.bar.bar-display-24:before {
  content: "24%";
}

div.bar.bar-display-25:before {
  content: "25%";
}

div.bar.bar-display-26:before {
  content: "26%";
}

div.bar.bar-display-27:before {
  content: "27%";
}

div.bar.bar-display-28:before {
  content: "28%";
}

div.bar.bar-display-29:before {
  content: "29%";
}

div.bar.bar-display-30:before {
  content: "30%";
}

div.bar.bar-display-31:before {
  content: "31%";
}

div.bar.bar-display-32:before {
  content: "32%";
}

div.bar.bar-display-33:before {
  content: "33%";
}

div.bar.bar-display-34:before {
  content: "34%";
}

div.bar.bar-display-35:before {
  content: "35%";
}

div.bar.bar-display-36:before {
  content: "36%";
}

div.bar.bar-display-37:before {
  content: "37%";
}

div.bar.bar-display-38:before {
  content: "38%";
}

div.bar.bar-display-39:before {
  content: "39%";
}

div.bar.bar-display-40:before {
  content: "40%";
}

div.bar.bar-display-41:before {
  content: "41%";
}

div.bar.bar-display-42:before {
  content: "42%";
}

div.bar.bar-display-43:before {
  content: "43%";
}

div.bar.bar-display-44:before {
  content: "44%";
}

div.bar.bar-display-45:before {
  content: "45%";
}

div.bar.bar-display-46:before {
  content: "46%";
}

div.bar.bar-display-47:before {
  content: "47%";
}

div.bar.bar-display-48:before {
  content: "48%";
}

div.bar.bar-display-49:before {
  content: "49%";
}

div.bar.bar-display-50:before {
  content: "50%";
}

div.bar.bar-display-51:before {
  content: "51%";
}

div.bar.bar-display-52:before {
  content: "52%";
}

div.bar.bar-display-53:before {
  content: "53%";
}

div.bar.bar-display-54:before {
  content: "54%";
}

div.bar.bar-display-55:before {
  content: "55%";
}

div.bar.bar-display-56:before {
  content: "56%";
}

div.bar.bar-display-57:before {
  content: "57%";
}

div.bar.bar-display-58:before {
  content: "58%";
}

div.bar.bar-display-59:before {
  content: "59%";
}

div.bar.bar-display-60:before {
  content: "60%";
}

div.bar.bar-display-61:before {
  content: "61%";
}

div.bar.bar-display-62:before {
  content: "62%";
}

div.bar.bar-display-63:before {
  content: "63%";
}

div.bar.bar-display-64:before {
  content: "64%";
}

div.bar.bar-display-65:before {
  content: "65%";
}

div.bar.bar-display-66:before {
  content: "66%";
}

div.bar.bar-display-67:before {
  content: "67%";
}

div.bar.bar-display-68:before {
  content: "68%";
}

div.bar.bar-display-69:before {
  content: "69%";
}

div.bar.bar-display-70:before {
  content: "70%";
}

div.bar.bar-display-71:before {
  content: "71%";
}

div.bar.bar-display-72:before {
  content: "72%";
}

div.bar.bar-display-73:before {
  content: "73%";
}

div.bar.bar-display-74:before {
  content: "74%";
}

div.bar.bar-display-75:before {
  content: "75%";
}

div.bar.bar-display-76:before {
  content: "76%";
}

div.bar.bar-display-77:before {
  content: "77%";
}

div.bar.bar-display-78:before {
  content: "78%";
}

div.bar.bar-display-79:before {
  content: "79%";
}

div.bar.bar-display-80:before {
  content: "80%";
}

div.bar.bar-display-81:before {
  content: "81%";
}

div.bar.bar-display-82:before {
  content: "82%";
}

div.bar.bar-display-83:before {
  content: "83%";
}

div.bar.bar-display-84:before {
  content: "84%";
}

div.bar.bar-display-85:before {
  content: "85%";
}

div.bar.bar-display-86:before {
  content: "86%";
}

div.bar.bar-display-87:before {
  content: "87%";
}

div.bar.bar-display-88:before {
  content: "88%";
}

div.bar.bar-display-89:before {
  content: "89%";
}

div.bar.bar-display-90:before {
  content: "90%";
}

div.bar.bar-display-91:before {
  content: "91%";
}

div.bar.bar-display-92:before {
  content: "92%";
}

div.bar.bar-display-93:before {
  content: "93%";
}

div.bar.bar-display-94:before {
  content: "94%";
}

div.bar.bar-display-95:before {
  content: "95%";
}

div.bar.bar-display-96:before {
  content: "96%";
}

div.bar.bar-display-97:before {
  content: "97%";
}

div.bar.bar-display-98:before {
  content: "98%";
}

div.bar.bar-display-99:before {
  content: "99%";
}

div.bar.bar-display-100:before {
  content: "100%";
}

/* Colors */
div.bar.bar-color-red {
  background-color: red;
}

div.bar.bar-color-green {
  background-color: green;
}

div.bar.bar-color-blue {
  background-color: blue;
}

/* TODO Explain */
.bar-wrapper {
  display: flex;
  align-items: center;
  gap: 0.33em;
  /*
  background: repeating-linear-gradient(
    45deg,
    #b792ff,
    #b792ff 10px,
    #c9adff 10px,
    #c9adff 20px
  );*/
  /*background-color: #8B51FF;*/
  /*border: 1px solid var(--line-color);*/
  border-radius: 2px;
}

.bar-wrapper.left {
  justify-content: flex-end;
}

.bar-wrapper > .bar {
  border-radius: 3px;
}

.bar-wrapper > .number {
  font-size: smaller;
}

/* TODO Explain */
.stacked-bar {
  display: flex;
  flex-direction: row;
}

.stacked-bar > .bar {
  height: 3em;
}

.stacked-bar.slim > .bar {
  height: 1.5em;
}

.stacked-bar > .bar.left {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.stacked-bar > .bar.right {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/*# sourceMappingURL=bars.css.map */