.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;
        
        &:not([type="checkbox"]):not([type="radio"]):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);
        
        
        &:not([type="checkbox"]):not([type="radio"]):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;
    }


    .checkboxlist {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .checkboxlist div {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        position: relative;
        align-items: center;
    }

    .checkboxlist label {
        margin: 0;
        padding: 0;
    }
    .checkboxlist label,
    .checkboxlist input {
        cursor: pointer !important;
    }

    .checkboxlist input {
        all: unset;
        border: 1px solid var(--color-dark-grey);
        height: var(--spacing);
        flex: 0 0 var(--spacing);

        &:checked {
            background-color: var(--color-primary-1);
            border-color: var(--color-primary-1);
        }
    }

    .checkboxlist div:has(input:checked):after {
        content: '';
        color: var(--color-white);
        left: 5px;
        position: absolute;
        top: 5px;
        filter: invert(1) brightness(100);
        display: inline-block;
        mask-image: url(/assets/images/icon-sprite.svg);
        mask-size: calc(var(--numberOfIcons) * var(--iconSize, 1em) * 2) var(--iconSize, 1em);
        mask-position: calc(-1 * var(--iconPosition) * var(--iconSize, 1em) * 2) 50%;
        mask-repeat: no-repeat;
        min-width: var(--iconSize, 1em);
        min-height: var(--iconSize, 1em);
        background-color: var(--color-icon);
        vertical-align: text-top;
        pointer-events: none;
    }
}

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