.tb-form {
    width: 100%;
    max-width: var(--tb-breakpoint-medium);
    margin: 0 var(--tb-spacing-60);
}

.tb-form select,
.tb-form textarea,
.tb-form input[type="date"],
.tb-form input[type="datetime-local"],
.tb-form input[type="email"],
.tb-form input[type="month"],
.tb-form input[type="number"],
.tb-form input[type="password"],
.tb-form input[type="search"],
.tb-form input[type="tel"],
.tb-form input[type="text"],
.tb-form input[type="time"],
.tb-form input[type="url"],
.tb-form input[type="week"] {
    width: 100%;
    background-color: var(--tb-color-blue-100);
}

:where(.tb-form) input[type="submit"] {
    background-color: var(--tb-color-blue-100);
}

.tb-form .umbraco-forms-page {
    display: flex;
    flex-direction: column;
    gap: var(--tb-spacing-40);
}

.tb-form .umbraco-forms-fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--tb-spacing-40);
}

.tb-form .row-fluid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: var(--tb-spacing-40);
}

.tb-form .umbraco-forms-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--tb-spacing-40);
}

.tb-form .umbraco-forms-container.col-md-4 {
    max-width: calc((100% - (var(--tb-spacing-40) * 2)) / 3);
}

.tb-form .umbraco-forms-container.col-md-6 {
    max-width: calc((100% - var(--tb-spacing-40)) / 2);
}

.tb-form .umbraco-forms-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--tb-spacing-20);
}

.tb-form .umbraco-forms-field.checkbox {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tb-spacing-10);
}

.tb-form .checkboxlist-vertical,
.tb-form .radiobuttonlist-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--tb-spacing-10);
}

.tb-form .checkboxlist-vertical > div,
.tb-form .radiobuttonlist-vertical > div {
    display: flex;
    align-items: center;
    gap: var(--tb-spacing-10);
}

.tb-form legend {
    margin-bottom: var(--tb-spacing-20);
}

.tb-form .field-validation-error {
    display: block;
    color: var(--tb-color-red-500);
    font-size: 0.8em;
}

.tb-form .umbraco-forms-hidden {
    display: none;
}

.tb-form .umbraco-forms-container:empty,
.tb-form .umbraco-forms-container:not(:has(*)) {
    display: none;
}

@media (max-width: 1024px) {
    .tb-form {
        margin: 0 var(--tb-spacing-50);
    }

    .tb-form .umbraco-forms-container.col-md-4,
    .tb-form .umbraco-forms-container.col-md-6 {
        max-width: calc((100% - var(--tb-spacing-40)) / 2);
    }
}

@media (max-width: 500px) {
    .tb-form {
        margin: 0 var(--tb-spacing-20);
    }

    .tb-form .umbraco-forms-container.col-md-4,
    .tb-form .umbraco-forms-container.col-md-6 {
        max-width: 100%;
    }

    .tb-form .umbraco-forms-page {
        gap: var(--tb-spacing-20);
    }

    .tb-form .umbraco-forms-fieldset {
        gap: var(--tb-spacing-20);
    }

    .tb-form .row-fluid {
        gap: var(--tb-spacing-20);
    }

    .tb-form .umbraco-forms-container {
        gap: var(--tb-spacing-20);
    }
}
