/* Make the Airtable ID field non-interactive */

.flex-fields [data-attribute*="airtable"] .input,
.flex-fields #fields-airtableID-field + #title-field .input {
    opacity: 0.9;
}

.flex-fields [data-attribute*="airtable"] .input,
.flex-fields #fields-airtableID-field + #title-field .input {
    cursor: not-allowed !important;
}

.flex-fields [data-attribute*="airtable"] .input *,
.flex-fields #fields-airtableID-field + #title-field .input * {
    pointer-events: none !important;
}

.flex-fields [data-attribute*="airtable"] .input input,
.flex-fields [data-attribute*="airtable"] .input textarea,
.flex-fields [data-attribute*="airtable"] .input td,
.flex-fields #fields-airtableID-field + #title-field .input input {
    background-color: rgb(243, 247, 252);
}

/* Display an Airtable icon in the label */
.flex-fields label[id*="airtable"]:not(.matrix *):not(.ni_blocks *):before,
.flex-fields legend[id*="airtable"]:not(.matrix *):not(.ni_blocks *):before,
.flex-fields #fields-airtableID-field + #title-field label#title-label:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 12px;
    margin-right: 5px;
    vertical-align: middle;
    background: url(../images/airtableIcon.svg) no-repeat center center /
        contain;
    transform: translateY(-1px);
    /* filter: grayscale(100%); */
}