/* Flexbox containers and orientators */
.f {
    display: flex;
}

.f-col {
    display: flex;
    flex-direction: column;
}

.f-row {
    display: flex;
    flex-direction: row;
}

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

.f-left {
    justify-content: left;
}

.f-centered {
    justify-content: center;
}

.f-spread{
    justify-content: space-between;
}

.f-right {
    justify-content: right;
}

.g-centered {
    justify-self: center;
}

.g-right {
    justify-self: right;
}

.t-centered {
    text-align: center;
}

.f-max {
    flex-grow: 1;
}

.f-gap {
    column-gap: 0.5em;
    row-gap:  0.25em;
}

.f-gap-min {
    column-gap: 0.25em;
    row-gap:  0.25em;
}

.f-gap-wide {
    column-gap: 1.5em;
    row-gap:  0.5em;
}

.f-gap-tall {
    column-gap: 87.5em;
    row-gap: 0.25em;
}

.a-middle{
    align-items: center;
}

/* Spacers */
.horiz-padding{
    padding-left: 0.5em;
    padding-right: 0.5em;
}
.horiz-margin{
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.vert-spacer {
    margin-top: 0.5em;
}

.left-min-spacer {
    margin-left: 0.5em;
}

.left-margin-spacer{
    margin-left: 1em;
}

.left-margin-double-spacer{
    margin-left: 2em;
}

.right-min-spacer {
    margin-right: 0.5em;
}

.right-margin-spacer{
    margin-right: 1em;
}

.right-margin-double-spacer{
    margin-right: 2em;
}


.top-micro-spacer{
    margin-top: 0.25em;
}
.top-min-spacer{
    margin-top: 0.5em;
}
.top-margin-spacer{
    margin-top: 1em;
}
.top-margin-double-spacer{
    margin-top: 2em;
}

.bottom-min-spacer{
    margin-bottom: 0.5em;
}
.bottom-margin-spacer{
    margin-bottom: 1em;
}
.bottom-margin-double-spacer{
    margin-bottom: 2em;
}


/* Control */
.w-constrained {
    width: max-content;
}

.h-constrained {
    height: max-content;
}

.r-pin {
    margin-left: auto;
}
.l-pin {
    margin-right: auto;
}

.c-pin{
    margin-left: auto;
    margin-right: auto;
}
.b-pin {
    margin-top: auto;
}

.hide{
    display: none;
}

.max-width{
    width: 100%;
}

/* Layout */
.split-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.base-grid{
    display: grid;
    column-gap: 0.5em;
    row-gap:  0.25em;

}

/* two column input grid */
.properties-grid{
    grid-template-columns: 1fr minmax(6em, auto);

}
.properties-label{
    justify-self: start;
}
.properties-control{
    justify-self: end;
}