/* https://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen/58118316#58118316 */
.gui-input-container {
    display: flex;
    flex-wrap: wrap;
    --margin: 0rem;
    --breakpoint: 0;
    --multiplier: calc(var(--breakpoint) - 100%);
    margin: calc(var(--margin) * -1);
}

.gui-input-container > * {
    max-width: 100%;
    /*flex-grow: 0.5;*/
    flex-basis: calc(var(--multiplier) * 999);
    margin: var(--margin);
}

.gui-input-container-single {
    --breakpoint: 40rem;
}

.gui-input-container-multiple {
    --breakpoint: 14rem;
}

.gui-label-single {
    min-width: calc(11% - (var(--margin) * 2));
}

.gui-label-multiple {
    min-width: calc(22.45% - (var(--margin) * 2));
}

.gui-pad {
    /*border: 1px solid red;*/
    /*margin: 4px 0;*/
    /*padding: 10px;*/
}

.gui-input-control {
    min-height: 32px;
}

/* From ant design css */
.gui-label {
    padding: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    height: 32px;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
}

.gui-label > label {
    width: 90%;
}

.gui-outer-row {
    /*background-color: lightsalmon;*/
}

.gui-group-col {
    /*border: 1px solid lightseagreen;*/
}

.gui-wrapper {
    /*border: 1px solid rebeccapurple;*/
}

/* Make element fit with the border */
.gui-root-view .outer {
    padding: 3px 0;
    /*box-shadow: inset #E8E8E8 0.5px 0.5px 0px 0.5px, #E8E8E8 0.5px 0.5px 0px 0.5px;*/
    border-radius: 4px;
    box-sizing: content-box;
}


/* Column Span (GuiBuilder) */

.gui-root-view {
    margin: 0 16px;
    /*--width-default: 35px;*/
}

.gui-root-view .gui-inner, 
.gui-root-view .gui-inner-multiple {
    margin: 10px 0;
}

.outer-no-border .outer {
    box-shadow: none !important;
}

.outer.gui-col-1 {
    flex: 0 0 calc(1 / 24 * 100%);
    max-width: calc(1 / 24 * 100%);
}

.outer.gui-col-2 {
    flex: 0 0 calc(2 / 24 * 100%);
    max-width: calc(2 / 24 * 100%);
}

.outer.gui-col-3 {
    flex: 0 0 calc(3 / 24 * 100%);
    max-width: calc(3 / 24 * 100%);
}

.outer.gui-col-4 {
    flex: 0 0 calc(4 / 24 * 100%);
    max-width: calc(4 / 24 * 100%);
}

.outer.gui-col-5 {
    flex: 0 0 calc(5 / 24 * 100%);
    max-width: calc(5 / 24 * 100%);
}

.outer.gui-col-6 {
    flex: 0 0 calc(6 / 24 * 100%);
    max-width: calc(6 / 24 * 100%);
}

.outer.gui-col-7 {
    flex: 0 0 calc(7 / 24 * 100%);
    max-width: calc(7 / 24 * 100%);
}

.outer.gui-col-8 {
    flex: 0 0 calc(8 / 24 * 100%);
    max-width: calc(8 / 24 * 100%);
}

.outer.gui-col-9 {
    flex: 0 0 calc(9 / 24 * 100%);
    max-width: calc(9 / 24 * 100%);
}

.outer.gui-col-10 {
    flex: 0 0 calc(10 / 24 * 100%);
    max-width: calc(10 / 24 * 100%);
}

.outer.gui-col-11 {
    flex: 0 0 calc(11 / 24 * 100%);
    max-width: calc(11 / 24 * 100%);
}

.outer.gui-col-12 {
    flex: 0 0 calc(12 / 24 * 100%);
    max-width: calc(12 / 24 * 100%);
}

.outer.gui-col-13 {
    flex: 0 0 calc(13 / 24 * 100%);
    max-width: calc(13 / 24 * 100%);
}

.outer.gui-col-14 {
    flex: 0 0 calc(14 / 24 * 100%);
    max-width: calc(14 / 24 * 100%);
}

.outer.gui-col-15 {
    flex: 0 0 calc(15 / 24 * 100%);
    max-width: calc(15 / 24 * 100%);
}

.outer.gui-col-16 {
    flex: 0 0 calc(16 / 24 * 100%);
    max-width: calc(16 / 24 * 100%);
}

.outer.gui-col-17 {
    flex: 0 0 calc(17 / 24 * 100%);
    max-width: calc(17 / 24 * 100%);
}

.outer.gui-col-18 {
    flex: 0 0 calc(18 / 24 * 100%);
    max-width: calc(18 / 24 * 100%);
}

.outer.gui-col-19 {
    flex: 0 0 calc(19 / 24 * 100%);
    max-width: calc(19 / 24 * 100%);
}

.outer.gui-col-20 {
    flex: 0 0 calc(20 / 24 * 100%);
    max-width: calc(20 / 24 * 100%);
}

.outer.gui-col-21 {
    flex: 0 0 calc(21 / 24 * 100%);
    max-width: calc(21 / 24 * 100%);
}

.outer.gui-col-22 {
    flex: 0 0 calc(22 / 24 * 100%);
    max-width: calc(22 / 24 * 100%);
}

.outer.gui-col-23 {
    flex: 0 0 calc(23 / 24 * 100%);
    max-width: calc(23 / 24 * 100%);
}

.outer.gui-col-24 {
    flex: 0 0 calc(24 / 24 * 100%);
    max-width: calc(24 / 24 * 100%);
}

.component {
    /* px per grid: 35, see GUIBuilderJsInterop.js */
    min-width: 35px;
}

.component.gui-col-1 {
    flex: 0 0 calc(1 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(1 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-2 {
    flex: 0 0 calc(2 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(2 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-3 {
    flex: 0 0 calc(3 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(3 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-4 {
    flex: 0 0 calc(4 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(4 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-5 {
    flex: 0 0 calc(5 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(5 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-6 {
    flex: 0 0 calc(6 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(6 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-7 {
    flex: 0 0 calc(7 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(7 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-8 {
    flex: 0 0 calc(8 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(8 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-9 {
    flex: 0 0 calc(9 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(9 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-10 {
    flex: 0 0 calc(10 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(10 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-11 {
    flex: 0 0 calc(11 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(11 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-12 {
    flex: 0 0 calc(12 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(12 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-13 {
    flex: 0 0 calc(13 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(13 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-14 {
    flex: 0 0 calc(14 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(14 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-15 {
    flex: 0 0 calc(15 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(15 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-16 {
    flex: 0 0 calc(16 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(16 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-17 {
    flex: 0 0 calc(17 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(17 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-18 {
    flex: 0 0 calc(18 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(18 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-19 {
    flex: 0 0 calc(19 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(19 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-20 {
    flex: 0 0 calc(20 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(20 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-21 {
    flex: 0 0 calc(21 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(21 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-22 {
    flex: 0 0 calc(22 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(22 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-23 {
    flex: 0 0 calc(23 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(23 * (24 / var(--colSpan)) / 24 * 100%);
}

.component.gui-col-24 {
    flex: 0 0 calc(24 * (24 / var(--colSpan)) / 24 * 100%);
    max-width: calc(24 * (24 / var(--colSpan)) / 24 * 100%);
}