.row { display: flex; flex-direction: row;    gap: 4px; }
.col { display: flex; flex-direction: column; gap: 5px; }

.va-fill { display: flex; align-items: normal; }
.va-center { display: flex; align-items: center; }
.va-top { display: flex; align-items: flex-start; }
.va-bottom { display: flex; align-items: flex-end; }

.ha-fill { display: flex; justify-content: normal; }
.ha-center { display: flex; justify-content: center; }
.ha-right { display: flex; justify-content: flex-start;}
.ha-left { display: flex; justify-content: flex-end; }

.center { display: flex; align-items: center; justify-content: center; }

.j-center { justify-content: center; }
.a-center { align-items: center; }

.grow  { flex-grow: 1; }
.grow2 { flex-grow: 2; }
.grow3 { flex-grow: 3; }

.wrap { flex-wrap: wrap; }
.nowrap { flex-wrap: nowrap; }

.gap0  { gap:  0px; }
.gap1  { gap:  1px; }
.gap2  { gap:  2px; }
.gap3  { gap:  3px; }
.gap4  { gap:  4px; }
.gap5  { gap:  5px; }
.gap6  { gap:  6px; }
.gap8  { gap:  8px; }
.gap10 { gap: 10px; }
.gap12 { gap: 12px; }
.gap15 { gap: 15px; }
.gap16 { gap: 16px; }
.gap18 { gap: 18px; }
.gap20 { gap: 20px; }
.gap24 { gap: 24px; }
.gap25 { gap: 25px; }
.gap30 { gap: 30px; }
.gap32 { gap: 32px; }

.right   { margin-left:   auto !important; }
.left    { margin-right:  auto !important; }
.top     { margin-bottom: auto !important; }
.bottom  { margin-top:    auto !important; }