/* general layout styles */
.nx-layout-fitbox {
    display: grid;
    grid-template-columns: repeat(4, minmax(0px, 1fr));
    grid-gap: 0.5rem;
}

.nx-layout-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}



.nx-layout-flexrow {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* slight spacing between children */
}

.nx-layout-flexcolumn {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* slight spacing between children */
    align-items: stretch; /* children stretch across the cross-axis (horizontal for column) */
    justify-content: flex-start;
}


.nx-layout-centeredbox {
    text-align: center;
    display: block;
}



.nx-layout-stretch {
    grid-column: -1/1;
    width: 100%;
}



/*override layout children (should be bottom of css) */
.nx-layout-fitbox > * {
    min-width: auto;
    width: auto;
    margin: 0;
}


.nx-layout-grid > * {
    min-width: auto;
    width: auto;
    margin: 0;
}

.nx-layout-flexrow > * {
    margin: 0px;
}



.nx-layout-flexcolumn > * {
    margin: 0px;
    min-width: 0; /* allow children to shrink without overflow */
    width: 100%; /* force children to fill the available width */
    box-sizing: border-box; /* include padding/border in width */
    margin-left: 0;
    margin-right: 0;
}