/* https://cssflex-generator.netlify.app/ */

.fw-variants {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    overflow: auto;
    flex-direction: row;
}

.fw-variants div, .fw-variants button {
    margin: 5px;
}

.fw-workbench-name {
    border-bottom: 1px solid;
}

/* Regular desktops */
.fw-workbench-io-grid {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: auto;
    gap: 0 0;
    grid-template-areas: ". . .";
}

/* Thin desktop */
@media only screen and (max-width: 992px) {
    .fw-workbench-io-grid {
        grid-template-columns: 50% 50%;
        grid-template-areas: ". .";
    }
}

/* Mobile */
@media only screen and (max-width: 768px) {
    .fw-workbench-io-grid {
        grid-template-columns: 100%;
        grid-template-areas: ".";
    }
}

/* Manually forcing the formula values' forms to size their columns properly */
.formula-value-input-form table td:first-child:not(:first-of-type) {
    white-space: nowrap;
}
.formula-value-input-form table td:last-child:not(:first-of-type) {
    width: 100%;
}