/* Div table core for laying things columnular div tables without needing to abuse html tables */

.fx-table {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 0.2em 0.8em;
}

.fx-table-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.2em 1.1em;
}

.fx-row {
    display: contents;
}

.fx-header {
    font-weight: bold;
}


/* some generic column order indicators */
.fx-col1{
    grid-column: 1;
}

.fx-col2{
    grid-column: 2;
}

/*Convience style if doing a two column layour and need left/right aligned content */
.fx-col2r{
    grid-column: 2;
    justify-self: flex-end;
}

.fx-col3{
    grid-column: 3;
}

.fx-col4{
    grid-column: 4;
}

.fx-col5{
    grid-column: 5;
}

.fx-col6{
    grid-column: 6;
}

.fx-col7{
    grid-column: 7;
}

.fx-col8{
    grid-column: 8;
}

.fx-align-r{
    justify-self: flex-end;
}

.fx-span-2{
    grid-column: 1 / 3;
}

.fx-span-3{
    grid-column: 1 / 4;
}

.fx-span-4{
    grid-column: 1 / 5;
}

/* Content in fx-tables will default to being on the left hand side, an invisble div that is 100% wide
can be used to host any cells where we need to override this behaviour (i.e. fill it 100% then use another
style to left/center/right with align content */
.input-host{
    display: flex;
    width: 100%;
}





/*Is this needed? developed as part of sys var display */
.var-table {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 0.2em 0.8em;
}


.var-new-reg {
    background-color: rgb(197, 255, 236);
}