.form-group {
    display: flex;
    justify-content: space-between;
}

.form-group.is-column {
  flex-direction: column;
}

.form-set .form-item:not(first-child) {
    margin: 8px 0 0 0;
}

.form-item {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 24px 0 0;
}

.form-item.is-error input,
.form-item.is-error select {
    border: 1px solid var(--error);
}

.form-item.is-error label {
    color: var(--error);
}

/*.form-item.is-error .form-error {*/
/*   display: block;*/
/*}*/

.form-item.is-error .form-hint {
    color: var(--error);
}

.form-item.is-error select:after {
    border-right: 2px solid var(--error);
    border-bottom: 2px solid var(--error);
}

.form-info-text {
    margin-top: 32px;
}

.form-item-row {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--text-label);
    margin-top: 24px;
}

.form-item-row.is-single-checkbox input[type=checkbox] {
    margin-left: 0;
}

.form-item-row label {
    top: 0;
    text-align: left;
}

.form-item-row .radio-options {
    width: auto;
}

.form-item-row .form-input-radio {
    margin-left: 0;
    margin-right: 0.5rem;
}

.radio-options label {
    display: inline;
}

.radio-label {
    text-align: left;
    top: inherit;
}

.radio-label.is-secondary {
    color: var(--grey-03);
}

.radio.is-secondary + label {
    color: var(--grey-03);
}

.form-item.is-20 {
    width: calc(20% - 18px);
}

.form-item.is-25 {
    width: calc(25% - 18px);
}

.form-item.is-30 {
    width: calc(30% - 18px);
}

.form-item.is-50 {
    width: calc(50% - 18px);
}

.form-item.is-55 {
    width: calc(55% - 18px);
}

.form-item.is-70 {
    width: calc(70% - 18px);
}

.form-label {
    width: 100%;
    margin-bottom: 3px;
    top: 0;
    text-align: left;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    color: var(--text-label);
}

.form-label.is-secondary {
    color: var(--grey-03);
}

.form-input,
.form-file-label,
.form-item select {
    padding: 12px 16px;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--grey-4);
}

textarea {
    font-size: 18px;
}

.form-item select {
    position: relative;
    /* removes the native down arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select {
    position: relative;
}

.select:after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    margin-top: -1px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--dark-blue);
    border-bottom: 2px solid var(--dark-blue);
}

.form-item .is-secondary select {
    background: var(--grey);
    color: var(--grey-03);
}

.form-item .select.is-secondary:after {
    border-color: var(--grey-03);
}

.form-item textarea.is-secondary {
    background: var(--grey);
    color: var(--grey-03);
}

.form-item select[disabled] {
    opacity: 1;
}

.file-submit[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

.form-file-label {
    height: 47px;
    top: 0;
    line-height: 24px;
    cursor: pointer;
    vertical-align: middle;
    color: var(--grey-03);
    text-align: left;
}

.form-file::file-selector-button {
    visibility: hidden;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

.form-input::placeholder {
    color: var(--grey-03);
}

.form-input.is-secondary {
    background: var(--grey);
    color: var(--grey-03);
}

.form-hint {
    margin-top: 3px;
    font-size: 12px;
    line-height: 24px;
    color: var(--grey-03);
}

.form-error {
    display: none;
    margin-top: 3px;
    font-size: 12px;
    line-height: 24px;
    color: var(--error);
}

.help-inline {
    text-decoration: underline;
}

.help-inline:hover {
    text-decoration: none;
}

.help-inline-divider {
    color: var(--grey-03);
}

.form-hint .help-inline-divider:nth-child(1) {
    display: none;
}

.form-button {
    align-self: center;
}

.form-button.is-absolute {
    margin-bottom: 24px;
}

@media (min-width: 767px) {
    .form-button.is-absolute {
        position: absolute;
        right: 0;
        top: 0;
        margin-bottom: 0;
    }
}

.form-button.is-file {
    align-self: flex-end;
}

.form-button.is-left-aligned {
    margin-right: auto;
    margin-left: 24px;
}

.form-button.is-right-aligned {
    margin-left: auto;
}

.form-button input {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.form-submit {
    cursor: pointer;
}

.form-submit-auto-width {
    cursor: pointer;
    padding: 12px 56px;
    width: auto;
}

.form--body--actions {
    margin-top: 24px;
}

.form-required-star {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
}

.form-required:after {
    color: var(--error);
}

.required-star {
    color: var(--error);
}

.form-actions-left,
.form-actions-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.form-actions input {
    flex-basis: fit-content;
}

.form-actions-right input:last-of-type {
    margin-right: 0;
}

.form-buttons {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.form-buttons input[type=submit] {
    width: auto;
}

input[type=date] {
    text-transform: uppercase;
}

.form-item-row input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin: 0 8px 0 25px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.checkbox-group-full {
    display: flex;
    align-items: center;
    margin-left: -25px;
}

.form-group-text {
    width: 100%;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    text-align: left;
    color: var(--text-label);
}

.form-button-link {
    width: auto;
    background-color: transparent;
    border: 0;
    color: var(--dark-blue);
    cursor: pointer;
}

.form-button-link:hover {
    color: var(--light-blue);
}

.form-table {
    width: 100%;
}

/*.form-table th {*/
/*    background-color: var(--lighter-blue);*/
/*    font-weight: 700;*/
/*}*/

/*.form-table tbody tr:nth-child(odd) td {*/
/*    background-color: var(--grey);*/
/*}*/

/*.form-table tbody tr:nth-child(even) td {*/
/*    background-color: var(--white);*/
/*}*/

input[type="checkbox"] {
    width: fit-content;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    /*transform: scale(1.5);*/
}

input[type="radio"] {
    width: fit-content;
    margin-right: 1rem;
    /* margin-bottom: 0.5rem;*/
    /*transform: scale(1.5);*/
}

label.checkbox {
    width: fit-content;
    display: flex;
    align-items: baseline;
    text-align: left;
}

label.radio {
    width: fit-content;
    display: flex;
    align-items: baseline;
    text-align: left;
}

label.checkbox:after {
    display: none;
}

.my-2 {
    margin: 24px 0 24px 0;
}

.terms-of-use {
    background-color: var(--lighter-blue);
    padding: 16px;
    /*margin-inline:  -24px;*/
    /*padding-inline: 24px;*/

}

.is-openform svg {
    width: 24px;
    height: 24px;
}

.form--body--actions_flexbox {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}

.form--body--actions_flexbox .form--body--actions__send input {
    width: 100%;
}

.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: 12px 16px;
    width: auto;
    max-width: 100vw;
    background: var(--white);
    border: 1px solid var(--grey-4);
    font: inherit;

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
}

.white-space-nowrap {
    white-space: nowrap;
}

.with-label-spacing {
    padding-top: 22px;
}

.with-label-spacing-2 {
    padding-top: 20px;
}

.list-spacing li {
    padding: 0.25rem 0;
}

.is-min-50vw {
    min-width: 50vw;
}

/*Display none button and simulate click via input change*/
.js-update-button {
  display: none;
}

/* .error-log-input {
  border: none;
  color: var(--grey-03);
  padding: 12px 0;
  font-size: 16px;
}

.error-log-input:focus {
 outline: none;
}

.is-error-log-textarea textarea.is-secondary {
  border: none;
  color: var(--grey-03);
  padding: 12px 0;
  background-color: transparent;
  font-size: 16px;
}

.is-error-log-textarea textarea.is-secondary:focus {
  outline: none;
} */

.is-error-log-textarea textarea.is-secondary  {
    background: none;
}
.is-error-log-textarea label.is-secondary {
    color: var(--text-label);
}

@media (min-width: 767px) {
    .form-actions {
        display: grid;
        grid-template-columns: auto;
        grid-template-areas: "secondary primary";
    }

    .form-actions-left,
    .form-actions-right {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .form-actions-right {
        justify-content: flex-end;
    }
}