.relative { position: relative; }
.block { display: block; }
.flex { display: flex; }
.row { flex-direction: row; }
.column { flex-direction: column; }
.space-between { justify-content: space-between; }
.noMargin { margin: 0; }
.noPadding { padding: 0 }
.fullW { width: 100vw; }
.full100W { width: 100%; }
.mid50W { width: 50%; }
.fullH { height: 100vh; }
.full100H { height: 100%; }
.minW100 { min-width: 100%; }
.minH100 { min-height: 100%; }
.maxW100 { max-width: 100%; }
.maxH100 { max-height: 100%; }
.mincontentW { min-width: min-content; }
.mincontentH { min-height: min-content; }
.useMinContent { width: fit-content; height: fit-content; }

.singleRow { flex-wrap: nowrap; }

.grow { flex-grow: 1; }
.shrink { flex-shrink: 1; }

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hidden { display: none; }
.overflowYScroll { overflow-y: scroll; }
.overflowXScroll { overflow-x: scroll; }
.textCenter { text-align: center; }
.textRight { text-align: right; }
.justifyCenter { justify-content: center; }
.justifyStart { justify-content: flex-start; }
.justifyEnd { justify-content: flex-end; }
.alignCenter { align-items: center; }
.wrap { flex-wrap: wrap; }
.nowrap { flex-wrap: nowrap; }
.gapMd { gap: var(--space-md); }
.div2 { width: 50%; }
.gapSm { gap: var(--space-sm); }
/* childs will use the whole width space, divided between then */
.equalW > * {
  flex: 1;
}

[draggable="true"] {
  cursor: grab;
}

[draggable="true"]:active {
  cursor: grabbing;
}

.drag-over {
  border: 2px dashed var(--primary-color) !important;
  opacity: 0.7;
}