diff --git a/availability/condition/grade/styles.css b/availability/condition/grade/styles.css
deleted file mode 100644
index 5112690d8bf..00000000000
--- a/availability/condition/grade/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-#fitem_id_availabilityconditionsjson .availability_grade input[type=text] {
-    width: 3em;
-}
diff --git a/availability/upgrade.txt b/availability/upgrade.txt
index 92d3b8d4eee..a509b0253c7 100644
--- a/availability/upgrade.txt
+++ b/availability/upgrade.txt
@@ -2,6 +2,11 @@ This files describes API changes in /availability/*.
 
 The information here is intended only for developers.
 
+=== 3.2 ===
+
+* Condition plugins must replace the CSS selector "#fitem_id_availabilityconditionsjson" with ".availability-field".
+  This selector is often used in your plugin's yui/src/form/js/form.js file.
+
 === 2.9 ===
 
 * Condition plugins can now implement a new include_after_restore function to
diff --git a/theme/bootstrapbase/less/moodle/forms.less b/theme/bootstrapbase/less/moodle/forms.less
index 299592d7b80..5422263acdb 100644
--- a/theme/bootstrapbase/less/moodle/forms.less
+++ b/theme/bootstrapbase/less/moodle/forms.less
@@ -341,88 +341,6 @@ fieldset.coursesearchbox label {
     }
 }
 
-/* Section and module editing forms contain special JS components for the
-   availability system (if enabled). */
-#fitem_id_availabilityconditionsjson {
-    *[aria-hidden=true] {
-        display: none;
-    }
-    select,
-    input[type=text] {
-        position: relative;
-        top: 4px;
-    }
-    label {
-        display: inline;
-    }
-    br + .availability-group {
-        display: inline-block;
-        margin-top: 8px;
-        margin-bottom: 8px;
-    }
-    .availability-group {
-        margin-right: 8px;
-    }
-    .availability-item {
-        margin-bottom: 6px;
-    }
-    .availability-none {
-        margin-left: 20px;
-        margin-bottom: 4px;
-    }
-    .availability-plugincontrols {
-        min-height: 40px;
-        padding: 2px 0 0 4px;
-        background: none repeat scroll 0% 0% @wellBackground;
-        border: 1px solid @grayLighter;
-        border-radius: 4px;
-        display: inline-block;
-        margin-right: 8px;
-        select {
-            width: auto;
-            max-width: 200px;
-        }
-    }
-    /* Eye icon in front of an item and delete icon after it. */
-    .availability-eye,
-    .availability-delete {
-        margin-right: 8px;
-    }
-    /* Hidden eye icon still takes up space. */
-    .availability-eye[aria-hidden=true] {
-        display: inline;
-        visibility: hidden;
-    }
-    /* Eye icons in front of child lists are aligned specially. */
-    .availability-list > .availability-eye img {
-        vertical-align: top;
-        margin-top: 12px;
-    }
-    /* Add button lines up with child elements. */
-    .availability-button {
-        margin-left: 15px;
-    }
-    /* Nested section is grey. */
-    .availability-childlist > .availability-inner {
-        display: inline-block;
-        background: @wellBackground;
-        border: 1px solid @grayLighter;
-        border-radius: 4px;
-        padding: 6px;
-        margin-bottom: 6px;
-    }
-    /* Second (and more) levels of nested sections are white. */
-    .availability-childlist .availability-childlist > .availability-inner {
-        background: white;
-    }
-    /* Connecting text needs to be indented. */
-    .availability-connector {
-        margin-left: 20px;
-        margin-bottom: 6px;
-    }
-}
-
-
 /* Default form styling colours all text red. With availability conditions
    this looks excessive as we show 'Invalid' markers in specific places. */
 .mform .error .availability-field {
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 7a89d03b93d..e43514045ff 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -14113,86 +14113,6 @@ fieldset.coursesearchbox label {
     padding: 6px;
   }
 }
-/* Section and module editing forms contain special JS components for the
-   availability system (if enabled). */
-#fitem_id_availabilityconditionsjson {
-  /* Eye icon in front of an item and delete icon after it. */
-  /* Hidden eye icon still takes up space. */
-  /* Eye icons in front of child lists are aligned specially. */
-  /* Add button lines up with child elements. */
-  /* Nested section is grey. */
-  /* Second (and more) levels of nested sections are white. */
-  /* Connecting text needs to be indented. */
-}
-#fitem_id_availabilityconditionsjson *[aria-hidden=true] {
-  display: none;
-}
-#fitem_id_availabilityconditionsjson select,
-#fitem_id_availabilityconditionsjson input[type=text] {
-  position: relative;
-  top: 4px;
-}
-#fitem_id_availabilityconditionsjson label {
-  display: inline;
-}
-#fitem_id_availabilityconditionsjson br + .availability-group {
-  display: inline-block;
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-#fitem_id_availabilityconditionsjson .availability-group {
-  margin-right: 8px;
-}
-#fitem_id_availabilityconditionsjson .availability-item {
-  margin-bottom: 6px;
-}
-#fitem_id_availabilityconditionsjson .availability-none {
-  margin-left: 20px;
-  margin-bottom: 4px;
-}
-#fitem_id_availabilityconditionsjson .availability-plugincontrols {
-  min-height: 40px;
-  padding: 2px 0 0 4px;
-  background: none repeat scroll 0% 0% #f5f5f5;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  display: inline-block;
-  margin-right: 8px;
-}
-#fitem_id_availabilityconditionsjson .availability-plugincontrols select {
-  width: auto;
-  max-width: 200px;
-}
-#fitem_id_availabilityconditionsjson .availability-eye,
-#fitem_id_availabilityconditionsjson .availability-delete {
-  margin-right: 8px;
-}
-#fitem_id_availabilityconditionsjson .availability-eye[aria-hidden=true] {
-  display: inline;
-  visibility: hidden;
-}
-#fitem_id_availabilityconditionsjson .availability-list > .availability-eye img {
-  vertical-align: top;
-  margin-top: 12px;
-}
-#fitem_id_availabilityconditionsjson .availability-button {
-  margin-left: 15px;
-}
-#fitem_id_availabilityconditionsjson .availability-childlist > .availability-inner {
-  display: inline-block;
-  background: #f5f5f5;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  padding: 6px;
-  margin-bottom: 6px;
-}
-#fitem_id_availabilityconditionsjson .availability-childlist .availability-childlist > .availability-inner {
-  background: white;
-}
-#fitem_id_availabilityconditionsjson .availability-connector {
-  margin-left: 20px;
-  margin-bottom: 6px;
-}
 /* Default form styling colours all text red. With availability conditions
    this looks excessive as we show 'Invalid' markers in specific places. */
 .mform .error .availability-field {