.bb-form {
    --color-error: red;
    
    fieldset {
        padding: 0;
    }
    
    .row-fluid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--spacing);
        margin-bottom: 21px;
    }
    
    .col-md-6 {
        grid-column: span 6;
    }
    
    .col-md-12 {
        grid-column: span 12;
    }
    
    .umbraco-forms-field-wrapper {
        display: flex;
        flex-direction: column;
    }
    
    .umbraco-forms-container {
        display: flex;
        flex-direction: column;
        gap: var(--spacing);
    }
    
    label {
        font-size: var(--size-12px);
        margin-bottom: calc(var(--spacing)/3);
        display: inline-block;
    }
    
    textarea,
    select,
    input {
        width: 100%;
        border: 1px solid var(--color-black);
        padding: 7.5px 15px;
        
        &:focus {
            outline: 1px solid var(--color-black);
        }
    }
    
    textarea {
        min-height: 120px;
    }
    
    .umbraco-forms-hidden,
    input[type="hidden"] {
        display: none !important;
    }
    
    .field-validation-error {
        color: var(--color-error);
        font-size: 14px;
        bottom: 0;
        white-space: nowrap;
        
    }
    
    .input-validation-error {
        --color-border: var(--color-error);
        border: 1px solid var(--color-error);
        
        
        &:focus {
            outline: 1px solid var(--color-error) !important;
        }
    }
    
    /* Chrome, Safari, Edge, Opera */
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }
}

@media screen and (max-width: 519px) {
    .bb-form {
        .col-md-6 {
            grid-column: span 12;
        }
    }
}