/* forms */
.form-group {
    border-top:1px solid #ccc;
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(2, 1fr);
    margin: 2em 0;
    padding: 2em 0;
    width: 100%;
}

.form-group .form-group {
    border:0;
    display: grid;
    margin: 0;
    padding: 0;
}

.group-title, .form-field.full-width {
    grid-column: 1 / span 2;
}

.group-title h2 {
    margin-bottom: 0.5rem;
}

.form-field {
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.form-field label,
.form-field .field-name,
.form-field .field-answer {
    display: block;
    width: 100%;
}

.form-field .multiple-answers {
    width:100%;
}

.form-field .conditional {
    display: flex;
    gap:0.5em;
    justify-content: flex-start;
}

.form-field .conditional label {
    width:auto;
}

.form-field p:only-child {
    margin:0;
}

.form-field .inline-flex {
    display: flex;
    gap: 0.5em;
    justify-content: flex-start;
}

.form-field .inline-flex span {
    display: flex;
}

.form-field .inline-flex span:last-child {
    flex: 1 1 auto;
}

.form-submit {
    text-align: center;
    width:100%;
}

/* EDITING */
.formEdit .group-title, .formEdit .form-field.full-width {
    flex-wrap: nowrap;
}

.formEdit .group-title, .formEdit .form-field {
    background: #eee;
    justify-content: space-between;
    padding: 1em;
}

.formEdit .form-field .form-field {
    padding: 0;
}

.formEdit .group-title h2 {
    margin:0;
}

.formEdit .form-field .field-name {
    order:1;
    width: calc(100% - 5rem);
}

.formEdit .form-field .manage-links {
    display: flex;
    flex-shrink: 0;
    gap: 0.125rem;
    order:2;
}

.formEdit .form-field .manage-links a {
    align-content: center;
    align-items: center;
    display: flex;
    height: 1.25rem;
    justify-content: center;
    width: 1.25rem;
}

.formEdit .form-field :is(input, select, textarea, .field-answer){
    order:3;
}

.formEdit .form-field p.full-width {
    margin:0;
}

.group-title, .form-field.full-width {
    display: flex;
    justify-content: space-between;
}

.group-title {
    align-items: center;
}

.form-field .flex-inline label,
.formEdit .form-field .flex-inline label {
    width: auto;
}

.formBuilder :is(input[type="text"], 
input[type="password"], 
input[type="tel"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
select,
textarea) {width:100%;}

/* Form Table */
.formBuilder table{width:100%;margin:2em 0; border-collapse:separate;border-spacing:0;border-top:1px solid rgba(0,0,0,.15)}
.formBuilder th{padding:.5em 0;text-align:left}
.formBuilder td{padding:.4em 0 .4em .5em; width: 50%}
.formBuilder td:first-child{padding-left:.0}
.formBuilder tr:first-child>*{padding-top:2rem}
.formBuilder tr:last-child>*{padding-bottom:2rem;border-bottom:1px solid rgba(0,0,0,.15)}

.formBuilder .formEdit tr:nth-child(2n) td{background-color:rgba(0,0,0,.05)}
.formBuilder .formEdit tr td{border-top:1px solid rgba(0,0,0,.1)}
.formBuilder .formEdit td:first-child{padding-left:.5em}
.formBuilder .formEdit td:last-child{padding-right:.5em}


/* nested table */
.formBuilder table table{margin:0;border-top:0}
.formBuilder tbody tbody{border-bottom:0}
.formBuilder tbody table td{padding:0 0 0 .5em;border-top:0}
.formBuilder table table td:first-child{padding-left:0}
.formBuilder tr tr:first-child>*{padding-top:0;}
.formBuilder tr tr:last-child>*{padding-bottom:0;border-bottom:0}

.formBuilder .formEdit tr tr:nth-child(2n) td{background-color:transparent}
.formBuilder .formEdit tr tr td{border-top:0}
.formBuilder .formEdit td td:first-child{padding-left:0}
.formBuilder .formEdit td td:last-child{padding-right:0}

.dependentRow { display:none; }


/* ?????? */
.formBuilder.formLoose,.formBuilder.formLoose td{width:auto}
.formBuilderGuide{font-size:.8em;line-height:1.1em}

@media screen and (max-width: 750px) {

    .form-group {
        grid-template-columns: repeat(1, 1fr);
    }

    .group-title, .form-field.full-width {
        grid-column: 1 / span 1;
    }

    .group-title {
        flex-direction: column;
        align-content: flex-start;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .group-title h2 + p{
        margin-top: 1em;
        text-align: center;
    }

    .form-field .inline-flex {
        display: block;
    }

    .form-field .inline-flex span {
        display: flex;
    }

    .formBuilder td {width: 100%; display: block; padding: 0.25em 0}
    .formBuilder td:first-child {padding-bottom: 0;}
    .formBuilder td+td {padding-top: 0;}
}