﻿#online-form #form-title {
    display: flex;
    align-items: center;
}

#online-form #form-title h1 {
    font-size: 2.8rem;
}

.d-inline-block {
    display: inline-block;
}

.d-inline {
    display: inline;
}

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-33 {
    width: 33.3333%;
}

.w-50 {
    width: 50%;
}

.w-100 {
    width: 100%;
}

.form-section-list {
    position: relative;
    margin-bottom: 1rem;
    padding: 1rem 1rem 5rem 1rem;
    border: 2px solid rgb(240, 240, 240);
}

.form-section-list .add-item {
    position:absolute;
    top: 1rem;
    right: 9rem;
}

.form-section-list .remove-item {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.form-section-list > .row {
    margin-left: 0;
    margin-right: 0;
}

.form-section-list .form-section.row {
    margin-left: 0;
    margin-right: 0;
}

    .form-section-list > .form-section {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid rgb(240, 240, 240);
    }

.form-section h3 {
    margin: 0 0 5px 0;
    padding: 0 !important;
    font-family: "Fira Sans", sans-serif;
    font-size: 16px;
    color: #1D1D1D;
    font-weight: 500;
}

.field-group-inline {
    display: flex;
    flex-flow: row;
}

.field-group-inline > * {
    margin-right: 1rem;
}

.form-line {
    margin-bottom: 1rem;
}

.info-table th,
.info-table td {
    padding: .5rem 2rem;
}

span.form-control,
p.form-control {
    line-height: 2;
    height: auto;
    min-height: 4rem;
}

.form-table td {
    border: 1px solid black;
    padding: 0 .5rem;
}

.form-table tr.document-disabled td:nth-child(2) {
    background-color: #ccc;
}

.form-table tr.disabled td:nth-child(2),
.form-table tr.disabled td:nth-child(3),
.form-table tr.disabled td:nth-child(4) {
    background-color: #ccc;
}

.form-table tr.disabled td {
    padding: 1rem .5rem;
}

/*.grow-wrap {*/
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    /*display: grid;
}

    .grow-wrap::after {*/
        /* Note the weird space! Needed to preventy jumpy behavior */
        /*content: attr(data-replicated-value) " ";*/
        /* This is how textarea text behaves */
        /*white-space: pre-wrap;*/
        /* Hidden from view, clicks, and screen readers */
        /*visibility: hidden;
    }

    .grow-wrap > textarea {*/
        /* You could leave this, but after a user resizes, then it ruins the auto sizing */
        /*resize: none;*/
        /* Firefox shows scrollbar on growth, you can hide like this. */
        /*overflow: hidden;
    }

    .grow-wrap > textarea,
    .grow-wrap::after {*/
        /* Identical styling required!! */

        /*padding: 0.5rem;
        font: inherit;*/
        /* Place on top of each other */
        /*grid-area: 1 / 1 / 2 / 2;
    }*/
