From 150afb29e0d8680e73090f46e32769aeb34996c6 Mon Sep 17 00:00:00 2001
From: Angus McLeod <angus@mcleod.org.au>
Date: Wed, 27 Jul 2022 14:40:05 +0100
Subject: [PATCH] Namespace CSS and remove uneccessary site attributes

---
 app/controllers/custom_wizard/wizard.rb       |  55 +-
 .../custom_wizard/wizard_serializer.rb        |  23 -
 app/views/layouts/wizard.html.erb             |  62 --
 .../custom-wizard-composer-editor.js.es6      |   2 +-
 .../discourse/routes/custom-wizard.js.es6     |   9 +-
 .../custom-wizard-field-category.hbs          |   1 -
 .../components/custom-wizard-field-group.hbs  |   2 +-
 .../common/custom/autocomplete.scss           | 285 +++---
 assets/stylesheets/common/custom/badges.scss  | 216 +++--
 assets/stylesheets/common/custom/base.scss    | 145 ++-
 assets/stylesheets/common/custom/buttons.scss | 158 +--
 .../stylesheets/common/custom/composer.scss   | 488 +++++-----
 assets/stylesheets/common/custom/events.scss  | 910 +++++++++---------
 assets/stylesheets/common/custom/header.scss  |   5 +
 .../stylesheets/common/custom/locations.scss  | 312 +++---
 .../common/custom/mentionables.scss           |  52 +-
 .../stylesheets/common/custom/validators.scss |  70 +-
 assets/stylesheets/common/custom/wizard.scss  |  12 +-
 assets/stylesheets/common/wizard-custom.scss  |   1 +
 config/routes.rb                              |   7 +-
 lib/custom_wizard/builder.rb                  |  12 -
 lib/custom_wizard/wizard.rb                   |  12 -
 22 files changed, 1335 insertions(+), 1504 deletions(-)
 delete mode 100644 app/views/layouts/wizard.html.erb
 create mode 100644 assets/stylesheets/common/custom/header.scss

diff --git a/app/controllers/custom_wizard/wizard.rb b/app/controllers/custom_wizard/wizard.rb
index d6375f64..7aafdd3b 100644
--- a/app/controllers/custom_wizard/wizard.rb
+++ b/app/controllers/custom_wizard/wizard.rb
@@ -3,7 +3,7 @@ class CustomWizard::WizardController < ::ApplicationController
   before_action :ensure_plugin_enabled
   before_action :ensure_logged_in, only: [:skip]
 
-  def index
+  def show
     if wizard.present?
       render json: CustomWizard::WizardSerializer.new(wizard, scope: guardian, root: false).as_json, status: 200
     else
@@ -31,26 +31,8 @@ class CustomWizard::WizardController < ::ApplicationController
     render json: result
   end
 
-  def qunit
-    raise Discourse::InvalidAccess.new if Rails.env.production?
-
-    respond_to do |format|
-      format.html do
-        render "default/empty"
-      end
-    end
-  end
-
   protected
 
-  def ensure_logged_in
-    raise Discourse::NotLoggedIn.new unless current_user.present?
-  end
-
-  def guardian
-    @guardian ||= Guardian.new(current_user, request)
-  end
-
   def wizard
     @wizard ||= begin
       builder = CustomWizard::Builder.new(params[:wizard_id].underscore, current_user)
@@ -61,41 +43,6 @@ class CustomWizard::WizardController < ::ApplicationController
     end
   end
 
-  def wizard_page_title
-    wizard ? (wizard.name || wizard.id) : I18n.t('wizard.custom_title')
-  end
-
-  def wizard_theme_id
-    wizard ? wizard.theme_id : nil
-  end
-
-  def wizard_theme_lookup(name)
-    Theme.lookup_field(wizard_theme_id, view_context.mobile_view? ? :mobile : :desktop, name)
-  end
-
-  def wizard_theme_translations_lookup
-    Theme.lookup_field(wizard_theme_id, :translations, I18n.locale)
-  end
-
-  def preload_wizard_json
-    return if request.xhr? || request.format.json?
-    return if request.method != "GET"
-
-    store_preloaded("siteSettings", SiteSetting.client_settings_json)
-  end
-
-  def store_preloaded(key, json)
-    @preloaded ||= {}
-    @preloaded[key] = json.gsub("</", "<\\/")
-  end
-
-  ## Simplified version of with_resolved_locale in ApplicationController
-  def with_resolved_locale
-    locale = current_user ? current_user.effective_locale : SiteSetting.default_locale
-    I18n.ensure_all_loaded!
-    I18n.with_locale(locale) { yield }
-  end
-
   private
 
   def ensure_plugin_enabled
diff --git a/app/serializers/custom_wizard/wizard_serializer.rb b/app/serializers/custom_wizard/wizard_serializer.rb
index f23ff7e1..9741d7af 100644
--- a/app/serializers/custom_wizard/wizard_serializer.rb
+++ b/app/serializers/custom_wizard/wizard_serializer.rb
@@ -9,13 +9,10 @@ class CustomWizard::WizardSerializer < CustomWizard::BasicWizardSerializer
              :completed,
              :required,
              :permitted,
-             :uncategorized_category_id,
-             :categories,
              :resume_on_revisit
 
   has_many :steps, serializer: ::CustomWizard::StepSerializer, embed: :objects
   has_one :user, serializer: ::BasicUserSerializer, embed: :objects
-  has_many :groups, serializer: ::BasicGroupSerializer, embed: :objects
 
   def completed
     object.completed?
@@ -46,24 +43,4 @@ class CustomWizard::WizardSerializer < CustomWizard::BasicWizardSerializer
   def include_steps?
     !include_completed?
   end
-
-  def include_categories?
-    object.needs_categories
-  end
-
-  def include_groups?
-    object.needs_groups
-  end
-
-  def uncategorized_category_id
-    SiteSetting.uncategorized_category_id
-  end
-
-  def include_uncategorized_category_id?
-    object.needs_categories
-  end
-
-  def categories
-    object.categories.map { |c| c.to_h }
-  end
 end
diff --git a/app/views/layouts/wizard.html.erb b/app/views/layouts/wizard.html.erb
deleted file mode 100644
index cab255c3..00000000
--- a/app/views/layouts/wizard.html.erb
+++ /dev/null
@@ -1,62 +0,0 @@
-<html>
-  <head>
-    <%= discourse_color_scheme_stylesheets %>
-
-    <%= discourse_stylesheet_link_tag :wizard, theme_id: nil %>
-    <%= discourse_stylesheet_link_tag :wizard_custom %>
-    <%- if wizard_theme_id.present? %>
-      <%= discourse_stylesheet_link_tag (mobile_view? ? :mobile_theme : :desktop_theme), theme_id: wizard_theme_id %>
-    <%- end %>
-
-    <%= preload_script "locales/#{I18n.locale}" %>
-    <%= preload_script "ember_jquery" %>
-    <%= preload_script "wizard-vendor" %>
-    <%= preload_script "wizard-custom" %>
-    <%= preload_script "wizard-raw-templates" %>
-    <%= preload_script "wizard-plugin" %>
-    <%= preload_script "pretty-text-bundle" %>
-    <%= preload_script_url ExtraLocalesController.url("wizard") %>
-    <%= csrf_meta_tags %>
-
-    <%- unless customization_disabled? %>
-      <%= wizard_theme_translations_lookup %>
-      <%= raw wizard_theme_lookup("head_tag") %>
-    <%- end %>
-
-    <%= server_plugin_outlet "custom_wizard" %>
-
-    <%= tag.meta id: 'data-discourse-setup', data: client_side_setup_data %>
-
-    <meta name="discourse_theme_id" content="<%= wizard_theme_id %>">
-    <meta name="discourse-base-uri" content="<%= Discourse.base_path %>">
-
-    <%= render partial: "layouts/head" %>
-    <title><%= wizard_page_title %></title>
-  </head>
-
-  <body class='custom-wizard wizard'>
-    <%- unless customization_disabled? %>
-      <%= raw wizard_theme_lookup("header") %>
-    <%- end %>
-
-    <div id='custom-wizard-main'></div>
-
-    <%- unless customization_disabled? %>
-      <%= raw wizard_theme_lookup("body_tag") %>
-    <%- end %>
-
-    <%- if current_user %>
-      <%= preload_script 'wizard-custom-start' %>
-    <%- else %>
-      <%= preload_script 'wizard-custom-guest' %>
-    <%- end %>
-
-    <div id="svg-sprites" style="display:none;">
-      <div class="fontawesome">
-        <%= raw SvgSprite.bundle %>
-      </div>
-    </div>
-
-    <div class="hidden" id="data-preloaded-wizard" data-preloaded-wizard="<%= preloaded_json %>"></div>
-  </body>
-</html>
diff --git a/assets/javascripts/discourse/components/custom-wizard-composer-editor.js.es6 b/assets/javascripts/discourse/components/custom-wizard-composer-editor.js.es6
index e41a03d8..e64ed9f6 100644
--- a/assets/javascripts/discourse/components/custom-wizard-composer-editor.js.es6
+++ b/assets/javascripts/discourse/components/custom-wizard-composer-editor.js.es6
@@ -34,7 +34,7 @@ export default ComposerEditor.extend({
     if (this.siteSettings.enable_mentions) {
       $input.autocomplete({
         template: findRawTemplate("user-selector-autocomplete"),
-        dataSource: (term) => this.userSearchTerm.call(this, term),
+        dataSource: (term) => this._userSearchTerm.call(this, term),
         key: "@",
         transformComplete: (v) => v.username || v.name,
         afterComplete: (value) => {
diff --git a/assets/javascripts/discourse/routes/custom-wizard.js.es6 b/assets/javascripts/discourse/routes/custom-wizard.js.es6
index 21c716ac..63b5f20e 100644
--- a/assets/javascripts/discourse/routes/custom-wizard.js.es6
+++ b/assets/javascripts/discourse/routes/custom-wizard.js.es6
@@ -1,8 +1,13 @@
 import { findCustomWizard, updateCachedWizard } from "../models/custom-wizard";
 import I18n from "I18n";
-import Route from "@ember/routing/route";
+import DiscourseRoute from "discourse/routes/discourse";
+
+export default DiscourseRoute.extend({
+  titleToken() {
+    const wizard = this.modelFor('custom-wizard');
+    return wizard ? (wizard.name || wizard.id) : I18n.t('wizard.custom_title');
+  },
 
-export default Route.extend({
   beforeModel(transition) {
     if (transition.intent.queryParams) {
       this.set("queryParams", transition.intent.queryParams);
diff --git a/assets/javascripts/discourse/templates/components/custom-wizard-field-category.hbs b/assets/javascripts/discourse/templates/components/custom-wizard-field-category.hbs
index 3a83b738..6cbc59e2 100644
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-category.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-category.hbs
@@ -4,4 +4,3 @@
   maximum=field.limit
   onChange=(action (mut categories))
   tabindex=field.tabindex}}
-
diff --git a/assets/javascripts/discourse/templates/components/custom-wizard-field-group.hbs b/assets/javascripts/discourse/templates/components/custom-wizard-field-group.hbs
index 480365fa..0895e3e1 100644
--- a/assets/javascripts/discourse/templates/components/custom-wizard-field-group.hbs
+++ b/assets/javascripts/discourse/templates/components/custom-wizard-field-group.hbs
@@ -1,5 +1,5 @@
 {{custom-wizard-group-selector
-  groups=wizard.groups
+  groups=site.groups
   field=field
   whitelist=field.content
   value=field.value
diff --git a/assets/stylesheets/common/custom/autocomplete.scss b/assets/stylesheets/common/custom/autocomplete.scss
index 28386e2d..60ca0180 100644
--- a/assets/stylesheets/common/custom/autocomplete.scss
+++ b/assets/stylesheets/common/custom/autocomplete.scss
@@ -1,175 +1,172 @@
-img.avatar {
-  border-radius: 50%;
-  vertical-align: middle;
-}
-
-div.ac-wrap {
-  box-sizing: border-box;
-  position: relative;
-  overflow: visible;
-  max-height: 150px;
-  min-height: 34px;
-  background-color: var(--secondary);
-  border: 1px solid var(--primary-medium);
-  padding: 5px;
-
-  div.item {
-    float: left;
-    margin-bottom: 4px;
-    margin-right: 10px;
-    line-height: 1.6;
-
-    span {
-      height: 24px;
-      display: inline-block;
-      line-height: 20px;
-    }
-  }
-
-  .ac-collapsed-button {
-    float: left;
-    border-radius: 20px;
+body.custom-wizard {
+  div.ac-wrap {
+    box-sizing: border-box;
     position: relative;
-    top: -2px;
-    margin-right: 10px;
-  }
-
-  input[type="text"] {
-    border: 0;
-  }
-
-  .remove-link {
-    margin-left: 4px;
-    font-size: $font-down-1;
-    line-height: $line-height-small;
-    padding: 1px 3.5px;
-    border-radius: 12px;
-    box-sizing: border-box;
-    border: 1px solid var(--primary-low);
-
-    &:hover {
-      background-color: var(--danger-low);
-      border: 1px solid var(--danger-medium);
-      text-decoration: none;
-      color: var(--danger);
-    }
-  }
-
-  .ac-loading {
-    position: absolute;
-    top: 7px;
-    right: 5px;
-  }
-
-  input {
-    margin-bottom: 0;
-  }
-
-  .autocomplete {
-    z-index: 999999;
-    position: absolute;
-    width: inherit;
-    max-width: 240px;
-    box-sizing: border-box;
+    overflow: visible;
+    max-height: 150px;
+    min-height: 34px;
     background-color: var(--secondary);
-    border: 1px solid var(--primary-low);
+    border: 1px solid var(--primary-medium);
+    padding: 5px;
 
-    li,
-    .no-results {
-      padding: 10px;
+    div.item {
+      float: left;
+      margin-bottom: 4px;
+      margin-right: 10px;
+      line-height: 1.6;
+
+      span {
+        height: 24px;
+        display: inline-block;
+        line-height: 20px;
+      }
     }
 
-    ul {
-      list-style: none;
-      padding: 0;
-      margin: 0;
+    .ac-collapsed-button {
+      float: left;
+      border-radius: 20px;
+      position: relative;
+      top: -2px;
+      margin-right: 10px;
+    }
 
-      li {
-        .d-users {
-          color: var(--primary-medium);
-          padding: 0 2px;
-        }
+    input[type="text"] {
+      border: 0;
+    }
 
-        border-bottom: 1px solid var(--primary-low);
+    .remove-link {
+      margin-left: 4px;
+      font-size: $font-down-1;
+      line-height: $line-height-small;
+      padding: 1px 3.5px;
+      border-radius: 12px;
+      box-sizing: border-box;
+      border: 1px solid var(--primary-low);
 
-        a {
-          padding: 5px;
-          display: block;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          font-size: 14px;
-          text-decoration: none;
-          color: var(--primary);
+      &:hover {
+        background-color: var(--danger-low);
+        border: 1px solid var(--danger-medium);
+        text-decoration: none;
+        color: var(--danger);
+      }
+    }
 
-          img {
-            margin-right: 5px;
+    .ac-loading {
+      position: absolute;
+      top: 7px;
+      right: 5px;
+    }
+
+    input {
+      margin-bottom: 0;
+    }
+
+    .autocomplete {
+      z-index: 999999;
+      position: absolute;
+      width: inherit;
+      max-width: 240px;
+      box-sizing: border-box;
+      background-color: var(--secondary);
+      border: 1px solid var(--primary-low);
+
+      li,
+      .no-results {
+        padding: 10px;
+      }
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+          .d-users {
+            color: var(--primary-medium);
+            padding: 0 2px;
           }
 
-          span.username {
+          border-bottom: 1px solid var(--primary-low);
+
+          a {
+            padding: 5px;
+            display: block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: 14px;
+            text-decoration: none;
             color: var(--primary);
-            vertical-align: middle;
-          }
 
-          span.name {
-            font-size: $font-down-1;
-            vertical-align: middle;
-            margin-left: 5px;
-            color: var(--primary);
-          }
+            img {
+              margin-right: 5px;
+            }
 
-          &.selected {
-            background-color: var(--tertiary);
+            span.username {
+              color: var(--primary);
+              vertical-align: middle;
+            }
 
-            span.username,
             span.name {
-              color: var(--secondary);
+              font-size: $font-down-1;
+              vertical-align: middle;
+              margin-left: 5px;
+              color: var(--primary);
+            }
+
+            &.selected {
+              background-color: var(--tertiary);
+
+              span.username,
+              span.name {
+                color: var(--secondary);
+              }
+            }
+
+            &:hover:not(.selected) {
+              background-color: var(--highlight-low);
+              text-decoration: none;
             }
           }
+        }
+      }
 
-          &:hover:not(.selected) {
-            background-color: var(--highlight-low);
-            text-decoration: none;
-          }
+      ul > label {
+        margin: 5px 0;
+        padding: 0 5px;
+        font-size: 80%;
+        line-height: 1.4em;
+
+        a {
+          text-decoration: underline;
         }
       }
     }
+  }
 
-    ul > label {
-      margin: 5px 0;
-      padding: 0 5px;
-      font-size: 80%;
-      line-height: 1.4em;
+  .ac-form-result {
+    cursor: pointer;
+    background-color: var(--secondary);
+    display: flex;
 
-      a {
-        text-decoration: underline;
+    &:hover,
+    &.selected {
+      background-color: var(--tertiary);
+      color: white;
+
+      label {
+        color: white;
       }
     }
-  }
-}
-
-.ac-form-result {
-  cursor: pointer;
-  background-color: var(--secondary);
-  display: flex;
-
-  &:hover,
-  &.selected {
-    background-color: var(--tertiary);
-    color: white;
 
     label {
-      color: white;
+      flex: 1 1 auto;
+      margin-bottom: 0;
+      cursor: pointer;
+    }
+
+    i {
+      margin-right: 5px;
     }
   }
-
-  label {
-    flex: 1 1 auto;
-    margin-bottom: 0;
-    cursor: pointer;
-  }
-
-  i {
-    margin-right: 5px;
-  }
 }
diff --git a/assets/stylesheets/common/custom/badges.scss b/assets/stylesheets/common/custom/badges.scss
index 53a869c0..4439346d 100644
--- a/assets/stylesheets/common/custom/badges.scss
+++ b/assets/stylesheets/common/custom/badges.scss
@@ -1,130 +1,132 @@
-.badge-wrapper {
-  font-size: $font-down-1;
-  font-weight: bold;
-  white-space: nowrap;
-  position: relative;
-  display: inline-flex;
-  align-items: baseline;
-
-  .badge-category {
+body.custom-wizard {
+  .badge-wrapper {
+    font-size: $font-down-1;
+    font-weight: bold;
+    white-space: nowrap;
+    position: relative;
     display: inline-flex;
     align-items: baseline;
 
-    .category-name {
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
+    .badge-category {
+      display: inline-flex;
+      align-items: baseline;
 
-    .d-icon {
-      margin-right: 3px;
-      width: 0.74em;
-      height: 0.74em;
-      color: inherit;
-    }
-  }
+      .category-name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
 
-  &.bullet {
-    margin-right: 8px;
-
-    span.badge-category {
-      color: var(--primary-high);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      .extra-info-wrapper & {
-        color: var(--header_primary);
+      .d-icon {
+        margin-right: 3px;
+        width: 0.74em;
+        height: 0.74em;
+        color: inherit;
       }
     }
 
-    .badge-category-parent-bg,
-    .badge-category-bg {
-      flex: 0 0 auto;
-      width: 9px;
-      height: 9px;
-      margin-right: 5px;
-      display: inline-block;
-    }
+    &.bullet {
+      margin-right: 8px;
 
-    .badge-category-parent-bg {
-      width: 5px;
-      margin-right: 0;
-      + .badge-category-bg {
-        width: 5px;
-      }
-    }
-
-    .d-icon {
-      color: var(--primary-medium);
-    }
-  }
-
-  &.box {
-    margin-right: 5px;
-    padding: 2px 4px 2px 4px;
-    display: inline-flex;
-
-    span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      &.badge-category-bg,
-      &.badge-category-parent-bg {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-      }
-
-      &.badge-category-parent-bg {
-        width: calc(100% - 5px);
-
-        & + .badge-category-bg {
-          left: 5px;
-          width: calc(100% - 5px);
-
-          & + .badge-category {
-            margin-left: 5px;
-          }
+      span.badge-category {
+        color: var(--primary-high);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        .extra-info-wrapper & {
+          color: var(--header_primary);
         }
       }
 
-      &.badge-category {
-        position: relative;
+      .badge-category-parent-bg,
+      .badge-category-bg {
+        flex: 0 0 auto;
+        width: 9px;
+        height: 9px;
+        margin-right: 5px;
+        display: inline-block;
+      }
+
+      .badge-category-parent-bg {
+        width: 5px;
+        margin-right: 0;
+        + .badge-category-bg {
+          width: 5px;
+        }
+      }
+
+      .d-icon {
+        color: var(--primary-medium);
       }
     }
 
-    + .topic-header-extra {
+    &.box {
+      margin-right: 5px;
       padding: 2px 4px 2px 4px;
+      display: inline-flex;
+
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.badge-category-bg,
+        &.badge-category-parent-bg {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+        }
+
+        &.badge-category-parent-bg {
+          width: calc(100% - 5px);
+
+          & + .badge-category-bg {
+            left: 5px;
+            width: calc(100% - 5px);
+
+            & + .badge-category {
+              margin-left: 5px;
+            }
+          }
+        }
+
+        &.badge-category {
+          position: relative;
+        }
+      }
+
+      + .topic-header-extra {
+        padding: 2px 4px 2px 4px;
+      }
     }
-  }
 
-  &.bar {
-    margin-right: 5px;
+    &.bar {
+      margin-right: 5px;
 
-    span.badge-category {
+      span.badge-category {
+        color: var(--primary-high);
+        padding: 1px 3px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        .extra-info-wrapper & {
+          color: var(--header_primary);
+        }
+      }
+
+      .badge-category-parent-bg,
+      .badge-category-bg {
+        display: inline-block;
+        padding: 0 1px;
+
+        &:before {
+          content: "\a0";
+        }
+      }
+    }
+
+    &.none {
       color: var(--primary-high);
-      padding: 1px 3px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      .extra-info-wrapper & {
-        color: var(--header_primary);
-      }
+      margin-right: 5px;
     }
-
-    .badge-category-parent-bg,
-    .badge-category-bg {
-      display: inline-block;
-      padding: 0 1px;
-
-      &:before {
-        content: "\a0";
-      }
-    }
-  }
-
-  &.none {
-    color: var(--primary-high);
-    margin-right: 5px;
   }
 }
diff --git a/assets/stylesheets/common/custom/base.scss b/assets/stylesheets/common/custom/base.scss
index 39ab061a..fc1f462f 100644
--- a/assets/stylesheets/common/custom/base.scss
+++ b/assets/stylesheets/common/custom/base.scss
@@ -1,90 +1,65 @@
-input {
-  display: inline-block;
-  padding: 4px 10px;
-  margin-bottom: 9px;
-  font-size: 1em;
-  line-height: 1;
-  color: var(--primary);
-  background-color: var(--secondary);
-  border: 1px solid var(--primary-medium);
-  border-radius: 0;
-  box-sizing: border-box;
-}
-
-textarea {
-  height: auto;
-  background-color: var(--secondary);
-  border: 1px solid var(--primary-medium);
-
-  &:focus {
-    border-color: var(--tertiary);
-    box-shadow: shadow("focus");
-    outline: 0;
-  }
-}
-
-input,
-select,
-textarea {
-  color: var(--primary);
-  caret-color: currentColor;
-
-  &[class*="span"] {
-    float: none;
-    margin-left: 0;
-  }
-
-  &[disabled],
-  &[readonly] {
-    cursor: not-allowed;
-    background-color: var(--primary-low);
-    border-color: var(--primary-low);
-  }
-
-  &:focus:required:invalid {
-    color: var(--danger);
-    border-color: var(--danger);
-  }
-
-  &:focus:required:invalid:focus {
-    border-color: var(--danger);
-    box-shadow: shadow("focus-danger");
-  }
-
-  &[type="checkbox"] {
-    margin-bottom: 0;
-    margin-right: 10px;
-  }
-}
-
-.spinner {
-  margin: 20px auto 20px auto;
-  position: relative;
-  -webkit-animation: rotate-forever 1s infinite linear;
-  animation: rotate-forever 1s infinite linear;
-  height: 30px;
-  width: 30px;
-  border: 4px solid var(--primary-low-mid);
-  border-right-color: transparent;
-  border-radius: 50%;
-
-  &.small {
-    width: 10px;
-    height: 10px;
-    margin: 0;
+body.custom-wizard {
+  input {
     display: inline-block;
+    padding: 4px 10px;
+    margin-bottom: 9px;
+    font-size: 1em;
+    line-height: 1;
+    color: var(--primary);
+    background-color: var(--secondary);
+    border: 1px solid var(--primary-medium);
+    border-radius: 0;
+    box-sizing: border-box;
   }
-}
 
-@keyframes rotate-forever {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
+  textarea {
+    height: auto;
+    background-color: var(--secondary);
+    border: 1px solid var(--primary-medium);
 
-.body-length {
-  text-align: right;
+    &:focus {
+      border-color: var(--tertiary);
+      box-shadow: shadow("focus");
+      outline: 0;
+    }
+  }
+
+  input,
+  select,
+  textarea {
+    color: var(--primary);
+    caret-color: currentColor;
+    width: 100%;
+
+    &[class*="span"] {
+      float: none;
+      margin-left: 0;
+    }
+
+    &[disabled],
+    &[readonly] {
+      cursor: not-allowed;
+      background-color: var(--primary-low);
+      border-color: var(--primary-low);
+    }
+
+    &:focus:required:invalid {
+      color: var(--danger);
+      border-color: var(--danger);
+    }
+
+    &:focus:required:invalid:focus {
+      border-color: var(--danger);
+      box-shadow: shadow("focus-danger");
+    }
+
+    &[type="checkbox"] {
+      margin-bottom: 0;
+      margin-right: 10px;
+    }
+  }
+
+  .body-length {
+    text-align: right;
+  }
 }
diff --git a/assets/stylesheets/common/custom/buttons.scss b/assets/stylesheets/common/custom/buttons.scss
index fde2691b..c0c43099 100644
--- a/assets/stylesheets/common/custom/buttons.scss
+++ b/assets/stylesheets/common/custom/buttons.scss
@@ -1,88 +1,90 @@
-.wizard-btn {
-  border-radius: 2px;
-  font-size: var(--font-0);
-  border: 0;
-  padding: 0.5em;
-  transition: background-color 0.3s;
-  margin-right: 0.5em;
-  text-decoration: none;
-  background-color: var(--secondary);
-  color: var(--primary-very-high);
-  box-shadow: 0 1px 4px rgba(var(--always-black-rgb), 0.4);
-  cursor: pointer;
+body.custom-wizard {
+  .wizard-btn {
+    border-radius: 2px;
+    font-size: var(--font-0);
+    border: 0;
+    padding: 0.5em;
+    transition: background-color 0.3s;
+    margin-right: 0.5em;
+    text-decoration: none;
+    background-color: var(--secondary);
+    color: var(--primary-very-high);
+    box-shadow: 0 1px 4px rgba(var(--always-black-rgb), 0.4);
+    cursor: pointer;
 
-  &.small {
-    padding: 0.25em 0.5em;
-    font-size: var(--font-down-1);
+    &.small {
+      padding: 0.25em 0.5em;
+      font-size: var(--font-down-1);
+    }
+
+    &:hover,
+    &:focus {
+      background-color: var(--primary-low);
+    }
+
+    &:active {
+      background-color: var(--primary-low-mid);
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: var(--primary-medium);
+    }
+
+    .d-icon-chevron-right {
+      margin-left: 0.25em;
+      font-size: 0.8em;
+    }
+    .d-icon-chevron-left {
+      margin-right: 0.25em;
+      font-size: 0.8em;
+    }
   }
 
-  &:hover,
-  &:focus {
-    background-color: var(--primary-low);
+  .wizard-btn.primary {
+    background-color: var(--tertiary);
+    color: var(--secondary);
+    box-shadow: 0 1px 4px rgba(var(--always-black-rgb), 0.6);
+
+    &:hover,
+    &:focus {
+      background-color: var(--tertiary-hover);
+    }
+
+    &:active {
+      background-color: var(--tertiary-high);
+    }
+
+    &:disabled {
+      background-color: var(--tertiary-low);
+    }
   }
 
-  &:active {
-    background-color: var(--primary-low-mid);
+  .wizard-btn.danger {
+    background-color: var(--danger);
+    color: var(--secondary);
+
+    &:hover,
+    &:focus {
+      background-color: var(--danger-hover);
+    }
+
+    &:active {
+      background-color: var(--danger-medium);
+    }
+
+    &:disabled {
+      background-color: var(--danger-low);
+    }
   }
 
-  &:disabled,
-  &.disabled {
-    background-color: var(--primary-medium);
-  }
+  .action-link {
+    margin-right: 1em;
+    text-decoration: none;
+    color: var(--tertiary);
 
-  .d-icon-chevron-right {
-    margin-left: 0.25em;
-    font-size: 0.8em;
-  }
-  .d-icon-chevron-left {
-    margin-right: 0.25em;
-    font-size: 0.8em;
-  }
-}
-
-.wizard-btn.primary {
-  background-color: var(--tertiary);
-  color: var(--secondary);
-  box-shadow: 0 1px 4px rgba(var(--always-black-rgb), 0.6);
-
-  &:hover,
-  &:focus {
-    background-color: var(--tertiary-hover);
-  }
-
-  &:active {
-    background-color: var(--tertiary-high);
-  }
-
-  &:disabled {
-    background-color: var(--tertiary-low);
-  }
-}
-
-.wizard-btn.danger {
-  background-color: var(--danger);
-  color: var(--secondary);
-
-  &:hover,
-  &:focus {
-    background-color: var(--danger-hover);
-  }
-
-  &:active {
-    background-color: var(--danger-medium);
-  }
-
-  &:disabled {
-    background-color: var(--danger-low);
-  }
-}
-
-.action-link {
-  margin-right: 1em;
-  text-decoration: none;
-  color: var(--tertiary);
-
-  &:hover {
-    color: var(--tertiary-hover);
+    &:hover {
+      color: var(--tertiary-hover);
+    }
   }
 }
diff --git a/assets/stylesheets/common/custom/composer.scss b/assets/stylesheets/common/custom/composer.scss
index aea17d63..aee47333 100644
--- a/assets/stylesheets/common/custom/composer.scss
+++ b/assets/stylesheets/common/custom/composer.scss
@@ -1,280 +1,282 @@
-.d-editor-container {
-  display: flex;
-  flex-grow: 1;
-  max-width: 100%;
-}
-
-.d-editor-overlay {
-  position: absolute;
-  background-color: black;
-  opacity: 0.8;
-  z-index: z("modal", "overlay");
-}
-
-.d-editor-modals {
-  position: absolute;
-  z-index: z("modal", "content");
-}
-
-.d-editor {
-  display: flex;
-  flex-grow: 1;
-  min-height: 0;
-}
-
-.d-editor .d-editor-modal {
-  min-width: 400px;
-  position: absolute;
-  background-color: var(--secondary);
-  border: 1px solid var(--primary);
-  padding: 1em;
-  top: 25px;
-
-  @media screen and (max-width: 424px) {
-    min-width: 300px;
+body.custom-wizard {
+  .d-editor-container {
+    display: flex;
+    flex-grow: 1;
+    max-width: 100%;
   }
 
-  input {
-    width: 95%;
-  }
-  h3 {
-    margin-bottom: 0.5em;
-  }
-}
-
-.wizard-field-composer .wmd-controls {
-  position: relative;
-}
-
-.wizard-field-composer.show-preview .d-editor-textarea-column {
-  display: none;
-}
-
-.d-editor-textarea-wrapper,
-.d-editor-preview-wrapper {
-  background-color: var(--secondary);
-  border: 1px solid var(--primary-medium);
-  flex: 1;
-  max-width: unset;
-}
-
-.d-editor-textarea-wrapper {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  textarea {
-    background: transparent;
-  }
-}
-
-.d-editor-preview-wrapper {
-  display: flex;
-  flex-direction: column;
-  margin-left: 0;
-  overflow: auto;
-  cursor: default;
-  margin-top: unset;
-  padding-top: unset;
-}
-
-.d-editor-button-bar {
-  display: flex;
-  align-items: center;
-  border-bottom: none;
-  min-height: 30px;
-  padding-left: 3px;
-  border-bottom: 1px solid var(--primary-low);
-
-  button {
-    background-color: transparent;
-    color: var(--primary);
+  .d-editor-overlay {
+    position: absolute;
+    background-color: black;
+    opacity: 0.8;
+    z-index: z("modal", "overlay");
   }
 
-  .btn:not(.no-text) {
-    font-size: 1.1487em;
+  .d-editor-modals {
+    position: absolute;
+    z-index: z("modal", "content");
   }
 
-  .btn.bold {
-    font-weight: bolder;
+  .d-editor {
+    display: flex;
+    flex-grow: 1;
+    min-height: 0;
   }
 
-  .btn.italic {
-    font-style: italic;
+  .d-editor .d-editor-modal {
+    min-width: 400px;
+    position: absolute;
+    background-color: var(--secondary);
+    border: 1px solid var(--primary);
+    padding: 1em;
+    top: 25px;
+
+    @media screen and (max-width: 424px) {
+      min-width: 300px;
+    }
+
+    input {
+      width: 95%;
+    }
+    h3 {
+      margin-bottom: 0.5em;
+    }
   }
-}
 
-.d-editor-spacer {
-  width: 1px;
-  height: 20px;
-  margin: 0 5px;
-  display: inline-block;
-}
-
-.d-editor-input,
-.d-editor-preview {
-  box-sizing: border-box;
-  flex: 1 1 100%;
-  width: 100%;
-  margin: 0;
-  min-height: auto;
-  word-wrap: break-word;
-  -webkit-appearance: none;
-  border-radius: 0;
-  &:focus {
-    box-shadow: none;
-    border: 0;
-    outline: 0;
+  .wizard-field-composer .wmd-controls {
+    position: relative;
   }
-}
 
-.d-editor-input {
-  border: 0;
-  padding: 10px;
-  height: unset; // overrides core css
-  overflow-x: hidden;
-  resize: none;
-}
+  .wizard-field-composer.show-preview .d-editor-textarea-column {
+    display: none;
+  }
 
-.d-editor-preview {
-  height: auto;
-  padding: 10px;
-}
+  .d-editor-textarea-wrapper,
+  .d-editor-preview-wrapper {
+    background-color: var(--secondary);
+    border: 1px solid var(--primary-medium);
+    flex: 1;
+    max-width: unset;
+  }
 
-.d-editor-plugin {
-  display: flex;
-  flex: 1 1;
-  overflow: auto;
-}
+  .d-editor-textarea-wrapper {
+    display: flex;
+    flex-direction: column;
+    position: relative;
 
-.composing-whisper .d-editor-preview {
-  font-style: italic;
-  color: var(--primary) !important;
-}
+    textarea {
+      background: transparent;
+    }
+  }
 
-.d-editor-preview > *:first-child {
-  margin-top: 0;
-}
+  .d-editor-preview-wrapper {
+    display: flex;
+    flex-direction: column;
+    margin-left: 0;
+    overflow: auto;
+    cursor: default;
+    margin-top: unset;
+    padding-top: unset;
+  }
 
-.hide-preview .d-editor-preview-wrapper {
-  display: none;
-  flex: 0;
-}
+  .d-editor-button-bar {
+    display: flex;
+    align-items: center;
+    border-bottom: none;
+    min-height: 30px;
+    padding-left: 3px;
+    border-bottom: 1px solid var(--primary-low);
 
-////
+    button {
+      background-color: transparent;
+      color: var(--primary);
+    }
 
-.d-editor {
-  min-height: 200px;
+    .btn:not(.no-text) {
+      font-size: 1.1487em;
+    }
+
+    .btn.bold {
+      font-weight: bolder;
+    }
+
+    .btn.italic {
+      font-style: italic;
+    }
+  }
+
+  .d-editor-spacer {
+    width: 1px;
+    height: 20px;
+    margin: 0 5px;
+    display: inline-block;
+  }
+
+  .d-editor-input,
+  .d-editor-preview {
+    box-sizing: border-box;
+    flex: 1 1 100%;
+    width: 100%;
+    margin: 0;
+    min-height: auto;
+    word-wrap: break-word;
+    -webkit-appearance: none;
+    border-radius: 0;
+    &:focus {
+      box-shadow: none;
+      border: 0;
+      outline: 0;
+    }
+  }
 
   .d-editor-input {
-    resize: vertical;
-    flex: initial;
+    border: 0;
+    padding: 10px;
+    height: unset; // overrides core css
+    overflow-x: hidden;
+    resize: none;
   }
 
-  textarea {
-    min-height: calc(200px - 32px);
+  .d-editor-preview {
+    height: auto;
+    padding: 10px;
   }
-}
 
-.d-editor-modal.hidden {
-  display: none;
-}
+  .d-editor-plugin {
+    display: flex;
+    flex: 1 1;
+    overflow: auto;
+  }
 
-.d-editor-button-bar .btn {
-  border: none;
-  font-size: 0.9em;
-}
+  .composing-whisper .d-editor-preview {
+    font-style: italic;
+    color: var(--primary) !important;
+  }
 
-.wizard-composer-upload {
-  display: none;
-}
-
-.wizard-composer-hyperlink {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(var(--primary-rgb), 0.8);
-}
-
-.wizard-composer-hyperlink-contents {
-  background-color: var(--secondary);
-  padding: 20px;
-
-  h3 {
+  .d-editor-preview > *:first-child {
     margin-top: 0;
   }
 
-  .composer-link-url,
-  .composer-link-name {
-    display: block;
-    min-width: 450px;
-  }
-}
-
-.hide-hyperlink-box,
-.add-link {
-  display: inline;
-}
-
-#file-uploading {
-  position: absolute;
-  bottom: 1px;
-  right: 1px;
-  padding: 10px;
-  background-color: var(--secondary);
-}
-
-.bottom-bar {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-  align-items: center;
-}
-
-// Markdown table styles for wizard composer preview
-
-.cooked,
-.d-editor-preview {
-  a.mention {
-    display: inline-block; // https://bugzilla.mozilla.org/show_bug.cgi?id=1656119
-    font-weight: bold;
-    font-size: 0.93em;
-    color: var(--primary-high-or-secondary-low);
-    padding: 0 4px 1px;
-    background: var(--primary-low);
-    border-radius: 8px;
+  .hide-preview .d-editor-preview-wrapper {
+    display: none;
+    flex: 0;
   }
 
-  table {
-    border-collapse: collapse;
+  ////
 
-    tr {
-      border-bottom: 1px solid var(--primary-low);
-      &.highlighted {
-        animation: background-fade-highlight 2.5s ease-out;
+  .d-editor {
+    min-height: 200px;
+
+    .d-editor-input {
+      resize: vertical;
+      flex: initial;
+    }
+
+    textarea {
+      min-height: calc(200px - 32px);
+    }
+  }
+
+  .d-editor-modal.hidden {
+    display: none;
+  }
+
+  .d-editor-button-bar .btn {
+    border: none;
+    font-size: 0.9em;
+  }
+
+  .wizard-composer-upload {
+    display: none;
+  }
+
+  .wizard-composer-hyperlink {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(var(--primary-rgb), 0.8);
+  }
+
+  .wizard-composer-hyperlink-contents {
+    background-color: var(--secondary);
+    padding: 20px;
+
+    h3 {
+      margin-top: 0;
+    }
+
+    .composer-link-url,
+    .composer-link-name {
+      display: block;
+      min-width: 450px;
+    }
+  }
+
+  .hide-hyperlink-box,
+  .add-link {
+    display: inline;
+  }
+
+  #file-uploading {
+    position: absolute;
+    bottom: 1px;
+    right: 1px;
+    padding: 10px;
+    background-color: var(--secondary);
+  }
+
+  .bottom-bar {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    align-items: center;
+  }
+
+  // Markdown table styles for wizard composer preview
+
+  .cooked,
+  .d-editor-preview {
+    a.mention {
+      display: inline-block; // https://bugzilla.mozilla.org/show_bug.cgi?id=1656119
+      font-weight: bold;
+      font-size: 0.93em;
+      color: var(--primary-high-or-secondary-low);
+      padding: 0 4px 1px;
+      background: var(--primary-low);
+      border-radius: 8px;
+    }
+
+    table {
+      border-collapse: collapse;
+
+      tr {
+        border-bottom: 1px solid var(--primary-low);
+        &.highlighted {
+          animation: background-fade-highlight 2.5s ease-out;
+        }
+      }
+
+      thead {
+        th {
+          text-align: left;
+          padding: 0.5em;
+          font-weight: bold;
+          color: var(--primary);
+        }
+      }
+
+      tbody {
+        border-top: 3px solid var(--primary-low);
+      }
+
+      td {
+        padding: 3px 3px 3px 0.5em;
       }
     }
-
-    thead {
-      th {
-        text-align: left;
-        padding: 0.5em;
-        font-weight: bold;
-        color: var(--primary);
-      }
-    }
-
-    tbody {
-      border-top: 3px solid var(--primary-low);
-    }
-
-    td {
-      padding: 3px 3px 3px 0.5em;
-    }
   }
 }
diff --git a/assets/stylesheets/common/custom/events.scss b/assets/stylesheets/common/custom/events.scss
index 747b68aa..c540661b 100644
--- a/assets/stylesheets/common/custom/events.scss
+++ b/assets/stylesheets/common/custom/events.scss
@@ -1,514 +1,514 @@
-// event form
+body.custom-wizard {
+  .event-form {
+    width: 585px;
+    max-width: 80vw;
 
-.event-form {
-  width: 585px;
-  max-width: 80vw;
+    .control {
+      display: inline-flex;
+      align-items: flex-start;
+      min-height: 30px;
+      margin-right: 20px;
 
-  .control {
-    display: inline-flex;
-    align-items: flex-start;
-    min-height: 30px;
-    margin-right: 20px;
+      > input:first-child {
+        margin-top: 10px !important;
+      }
 
-    > input:first-child {
-      margin-top: 10px !important;
-    }
+      > span:first-child {
+        margin-top: 5px !important;
+      }
 
-    > span:first-child {
-      margin-top: 5px !important;
-    }
+      > input + span {
+        margin-top: 5px;
+      }
 
-    > input + span {
-      margin-top: 5px;
-    }
+      &:last-of-type {
+        margin-right: 0;
+      }
 
-    &:last-of-type {
-      margin-right: 0;
-    }
+      input[type="checkbox"] {
+        margin: 0 10px 0 0;
+      }
 
-    input[type="checkbox"] {
-      margin: 0 10px 0 0;
-    }
+      input[type="number"] {
+        width: 50px;
+        margin: 0;
+        min-height: 34px;
+        border: 1px solid #e9e9e9;
+      }
 
-    input[type="number"] {
-      width: 50px;
-      margin: 0;
-      min-height: 34px;
-      border: 1px solid #e9e9e9;
-    }
+      &.full-width {
+        flex: 1;
+      }
 
-    &.full-width {
-      flex: 1;
-    }
+      .select-kit,
+      .ac-wrap {
+        width: 100% !important;
+        max-width: 330px;
+      }
 
-    .select-kit,
-    .ac-wrap {
-      width: 100% !important;
-      max-width: 330px;
-    }
-
-    .select-kit-body {
-      width: 100% !important;
-      max-width: 330px;
-    }
-  }
-
-  .event-controls {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .datetime-controls {
-    display: flex;
-    margin-bottom: 5px;
-
-    .date-time-card {
-      width: 270px;
-      display: inline-block;
-      text-align: left;
-    }
-
-    .start-card {
-      border-left: 1px solid transparent;
-      padding-right: 20px;
-    }
-
-    .end-card {
-      border-left: 1px solid #eee;
-      padding-left: 20px;
-
-      &.disabled {
-        span,
-        label,
-        .pika-label,
-        .pika-table th,
-        .pika-button,
-        .pika-prev,
-        .pika-next,
-        input,
-        .pika-lendar,
-        .is-selected .pika-button {
-          color: var(--primary-low);
-          background-image: initial;
-          background: initial;
-          box-shadow: initial;
-          cursor: default;
-          pointer-events: none;
-        }
-
-        input,
-        .pika-lendar {
-          border: 1px solid var(--primary-low) !important;
-        }
+      .select-kit-body {
+        width: 100% !important;
+        max-width: 330px;
       }
     }
 
-    .set-all-day {
-      font-size: 1.2em;
-      padding-bottom: 13px;
-    }
-
-    .sub-title {
-      font-size: 1.2em;
-      font-weight: bold;
-      padding-bottom: 2px;
-      padding-right: 10px;
-    }
-
-    .date-time-set {
-      padding-top: 10px;
+    .event-controls {
+      margin-bottom: 20px;
       display: flex;
-      flex-direction: row;
+      align-items: flex-start;
+    }
 
-      .date-area {
-        order: 1;
+    .datetime-controls {
+      display: flex;
+      margin-bottom: 5px;
+
+      .date-time-card {
+        width: 270px;
+        display: inline-block;
+        text-align: left;
       }
 
-      .time-area {
-        order: 2;
-        margin-left: 10px;
+      .start-card {
+        border-left: 1px solid transparent;
+        padding-right: 20px;
+      }
 
-        .modal-time {
-          width: 127px;
+      .end-card {
+        border-left: 1px solid #eee;
+        padding-left: 20px;
+
+        &.disabled {
+          span,
+          label,
+          .pika-label,
+          .pika-table th,
+          .pika-button,
+          .pika-prev,
+          .pika-next,
+          input,
+          .pika-lendar,
+          .is-selected .pika-button {
+            color: var(--primary-low);
+            background-image: initial;
+            background: initial;
+            box-shadow: initial;
+            cursor: default;
+            pointer-events: none;
+          }
+
+          input,
+          .pika-lendar {
+            border: 1px solid var(--primary-low) !important;
+          }
         }
       }
 
-      input {
-        padding: 4px 10px;
-        font-size: 1em;
-        line-height: 1;
-        color: var(--primary);
-        border: 1px solid var(--primary-medium);
-        min-height: 30px;
-        width: 130px;
-        margin: 10px 0;
+      .set-all-day {
+        font-size: 1.2em;
+        padding-bottom: 13px;
+      }
+
+      .sub-title {
+        font-size: 1.2em;
+        font-weight: bold;
+        padding-bottom: 2px;
+        padding-right: 10px;
+      }
+
+      .date-time-set {
+        padding-top: 10px;
+        display: flex;
+        flex-direction: row;
+
+        .date-area {
+          order: 1;
+        }
+
+        .time-area {
+          order: 2;
+          margin-left: 10px;
+
+          .modal-time {
+            width: 127px;
+          }
+        }
+
+        input {
+          padding: 4px 10px;
+          font-size: 1em;
+          line-height: 1;
+          color: var(--primary);
+          border: 1px solid var(--primary-medium);
+          min-height: 30px;
+          width: 130px;
+          margin: 10px 0;
+        }
+      }
+
+      #date-container-start,
+      #date-container-end {
+        height: 250px;
+      }
+
+      .ui-timepicker-input {
+        width: 105px;
+        text-align: center;
+      }
+
+      .pika-single {
+        position: relative !important;
+        border: none;
+        z-index: 100;
+
+        .pika-lendar {
+          border: 1px solid var(--primary-medium);
+          padding: 14px;
+          margin: 0;
+          float: none;
+          width: auto;
+        }
       }
     }
 
-    #date-container-start,
-    #date-container-end {
-      height: 250px;
+    .rsvp-controls {
+      .rsvp-container {
+        display: flex;
+        flex-flow: wrap;
+        margin-top: 10px;
+
+        .control span {
+          margin-right: 10px;
+        }
+
+        .full-width {
+          align-items: flex-start;
+        }
+      }
+    }
+  }
+
+  // datepicker
+
+  /*!
+   * Pikaday
+   * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
+   */
+
+  // Variables
+  // Declare any of these variables before importing this SCSS file to easily override defaults
+  // Variables are namespaced with the pd (pikaday) prefix
+
+  // Colours
+  $pd-text-color: var(--primary) !default;
+  $pd-title-color: var(--primary) !default;
+  $pd-title-bg: var(--secondary) !default;
+  $pd-picker-bg: var(--secondary) !default;
+  $pd-picker-border: var(--primary-low) !default;
+  $pd-picker-border-bottom: var(--primary-low) !default;
+  $pd-picker-shadow: rgba(0, 0, 0, 0.5) !default;
+  $pd-th-color: var(--primary) !default;
+  $pd-day-color: var(--primary) !default;
+  $pd-day-bg: var(--secondary) !default;
+  $pd-day-hover-color: var(--primary) !default;
+  $pd-day-hover-bg: var(--tertiary-low) !default;
+  $pd-day-today-color: var(--tertiary) !default;
+  $pd-day-selected-color: var(--secondary) !default;
+  $pd-day-selected-bg: var(--tertiary) !default;
+  $pd-day-selected-shadow: var(--tertiary-low) !default;
+  $pd-day-disabled-color: var(--primary) !default;
+  $pd-week-color: var(--primary) !default;
+
+  // Font
+  $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+
+  .pika-single {
+    z-index: 9999;
+    display: block;
+    position: relative;
+    color: $pd-text-color;
+    background: $pd-picker-bg;
+    border: 1px solid $pd-picker-border;
+    border-bottom-color: $pd-picker-border-bottom;
+    font-family: $pd-font-family;
+
+    &.is-hidden {
+      display: none;
     }
 
-    .ui-timepicker-input {
-      width: 105px;
+    &.is-bound {
+      position: absolute;
+      box-shadow: 0 5px 15px -5px $pd-picker-shadow;
+    }
+  }
+
+  // clear child float (pika-lendar), using the famous micro clearfix hack
+  // http://nicolasgallagher.com/micro-clearfix-hack/
+  .pika-single {
+    &:before,
+    &:after {
+      content: " ";
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+  }
+
+  .pika-lendar {
+    float: left;
+    width: 240px;
+    margin: 8px;
+  }
+
+  .pika-title {
+    position: relative;
+    text-align: center;
+
+    select {
+      cursor: pointer;
+      position: absolute;
+      z-index: 9998;
+      margin: 0;
+      left: 0;
+      top: 5px;
+      filter: alpha(opacity=0);
+      opacity: 0;
+    }
+  }
+
+  .pika-label {
+    display: inline-block;
+    position: relative;
+    z-index: 9999;
+    overflow: hidden;
+    margin: 0;
+    padding: 5px 3px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: bold;
+    color: $pd-title-color;
+    background-color: $pd-title-bg;
+  }
+
+  .pika-prev,
+  .pika-next {
+    display: block;
+    cursor: pointer;
+    position: relative;
+    outline: none;
+    border: 0;
+    padding: 0;
+    width: 20px;
+    height: 30px;
+    text-indent: 20px; // hide text using text-indent trick, using width value (it's enough)
+    white-space: nowrap;
+    overflow: hidden;
+    background-color: transparent;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 75% 75%;
+    opacity: 0.5;
+    @if (lightness($secondary) < 50) {
+      // invert the black png if the background is dark
+      filter: invert(1);
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.is-disabled {
+      cursor: default;
+      opacity: 0.2;
+    }
+  }
+
+  .pika-prev,
+  .is-rtl .pika-next {
+    float: left;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
+  }
+
+  .pika-next,
+  .is-rtl .pika-prev {
+    float: right;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
+  }
+
+  .pika-select {
+    display: inline-block;
+  }
+
+  .pika-table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: 0;
+
+    th,
+    td {
+      width: 14.285714285714286%;
+      padding: 0;
+    }
+
+    th {
+      color: $pd-th-color;
+      font-size: 12px;
+      line-height: 25px;
+      font-weight: bold;
       text-align: center;
     }
 
-    .pika-single {
-      position: relative !important;
-      border: none;
-      z-index: 100;
-
-      .pika-lendar {
-        border: 1px solid var(--primary-medium);
-        padding: 14px;
-        margin: 0;
-        float: none;
-        width: auto;
-      }
+    abbr {
+      border-bottom: none;
+      cursor: help;
     }
   }
 
-  .rsvp-controls {
-    .rsvp-container {
-      display: flex;
-      flex-flow: wrap;
-      margin-top: 10px;
-
-      .control span {
-        margin-right: 10px;
-      }
-
-      .full-width {
-        align-items: flex-start;
-      }
-    }
-  }
-}
-
-// datepicker
-
-/*!
- * Pikaday
- * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
- */
-
-// Variables
-// Declare any of these variables before importing this SCSS file to easily override defaults
-// Variables are namespaced with the pd (pikaday) prefix
-
-// Colours
-$pd-text-color: var(--primary) !default;
-$pd-title-color: var(--primary) !default;
-$pd-title-bg: var(--secondary) !default;
-$pd-picker-bg: var(--secondary) !default;
-$pd-picker-border: var(--primary-low) !default;
-$pd-picker-border-bottom: var(--primary-low) !default;
-$pd-picker-shadow: rgba(0, 0, 0, 0.5) !default;
-$pd-th-color: var(--primary) !default;
-$pd-day-color: var(--primary) !default;
-$pd-day-bg: var(--secondary) !default;
-$pd-day-hover-color: var(--primary) !default;
-$pd-day-hover-bg: var(--tertiary-low) !default;
-$pd-day-today-color: var(--tertiary) !default;
-$pd-day-selected-color: var(--secondary) !default;
-$pd-day-selected-bg: var(--tertiary) !default;
-$pd-day-selected-shadow: var(--tertiary-low) !default;
-$pd-day-disabled-color: var(--primary) !default;
-$pd-week-color: var(--primary) !default;
-
-// Font
-$pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
-
-.pika-single {
-  z-index: 9999;
-  display: block;
-  position: relative;
-  color: $pd-text-color;
-  background: $pd-picker-bg;
-  border: 1px solid $pd-picker-border;
-  border-bottom-color: $pd-picker-border-bottom;
-  font-family: $pd-font-family;
-
-  &.is-hidden {
-    display: none;
-  }
-
-  &.is-bound {
-    position: absolute;
-    box-shadow: 0 5px 15px -5px $pd-picker-shadow;
-  }
-}
-
-// clear child float (pika-lendar), using the famous micro clearfix hack
-// http://nicolasgallagher.com/micro-clearfix-hack/
-.pika-single {
-  &:before,
-  &:after {
-    content: " ";
-    display: table;
-  }
-
-  &:after {
-    clear: both;
-  }
-}
-
-.pika-lendar {
-  float: left;
-  width: 240px;
-  margin: 8px;
-}
-
-.pika-title {
-  position: relative;
-  text-align: center;
-
-  select {
+  .pika-button {
     cursor: pointer;
-    position: absolute;
-    z-index: 9998;
+    display: block;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    outline: none;
+    border: 0;
     margin: 0;
-    left: 0;
-    top: 5px;
-    filter: alpha(opacity=0);
-    opacity: 0;
-  }
-}
-
-.pika-label {
-  display: inline-block;
-  position: relative;
-  z-index: 9999;
-  overflow: hidden;
-  margin: 0;
-  padding: 5px 3px;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: bold;
-  color: $pd-title-color;
-  background-color: $pd-title-bg;
-}
-
-.pika-prev,
-.pika-next {
-  display: block;
-  cursor: pointer;
-  position: relative;
-  outline: none;
-  border: 0;
-  padding: 0;
-  width: 20px;
-  height: 30px;
-  text-indent: 20px; // hide text using text-indent trick, using width value (it's enough)
-  white-space: nowrap;
-  overflow: hidden;
-  background-color: transparent;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: 75% 75%;
-  opacity: 0.5;
-  @if (lightness($secondary) < 50) {
-    // invert the black png if the background is dark
-    filter: invert(1);
-  }
-
-  &:hover {
-    opacity: 1;
-  }
-
-  &.is-disabled {
-    cursor: default;
-    opacity: 0.2;
-  }
-}
-
-.pika-prev,
-.is-rtl .pika-next {
-  float: left;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
-}
-
-.pika-next,
-.is-rtl .pika-prev {
-  float: right;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
-}
-
-.pika-select {
-  display: inline-block;
-}
-
-.pika-table {
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  border: 0;
-
-  th,
-  td {
-    width: 14.285714285714286%;
-    padding: 0;
-  }
-
-  th {
-    color: $pd-th-color;
+    width: 100%;
+    padding: 5px;
+    color: $pd-day-color;
     font-size: 12px;
-    line-height: 25px;
-    font-weight: bold;
-    text-align: center;
+    line-height: 15px;
+    text-align: right;
+    background: $pd-day-bg;
+
+    .is-today & {
+      color: $pd-day-today-color;
+      font-weight: bold;
+    }
+
+    .is-selected & {
+      color: $pd-day-selected-color;
+      font-weight: bold;
+      background: $pd-day-selected-bg;
+      box-shadow: inset 0 1px 3px $pd-day-selected-shadow;
+      border-radius: 3px;
+    }
+
+    .is-disabled &,
+    .is-outside-current-month & {
+      pointer-events: none;
+      cursor: default;
+      color: $pd-day-disabled-color;
+      opacity: 0.3;
+    }
+
+    &:hover {
+      color: $pd-day-hover-color;
+      background: $pd-day-hover-bg;
+      box-shadow: none;
+      border-radius: 3px;
+    }
   }
 
-  abbr {
-    border-bottom: none;
-    cursor: help;
-  }
-}
-
-.pika-button {
-  cursor: pointer;
-  display: block;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  outline: none;
-  border: 0;
-  margin: 0;
-  width: 100%;
-  padding: 5px;
-  color: $pd-day-color;
-  font-size: 12px;
-  line-height: 15px;
-  text-align: right;
-  background: $pd-day-bg;
-
-  .is-today & {
-    color: $pd-day-today-color;
-    font-weight: bold;
+  .pika-week {
+    font-size: 11px;
+    color: $pd-week-color;
   }
 
-  .is-selected & {
-    color: $pd-day-selected-color;
-    font-weight: bold;
-    background: $pd-day-selected-bg;
-    box-shadow: inset 0 1px 3px $pd-day-selected-shadow;
-    border-radius: 3px;
+  .is-inrange .pika-button {
+    background: #d5e9f7;
   }
 
-  .is-disabled &,
-  .is-outside-current-month & {
-    pointer-events: none;
-    cursor: default;
-    color: $pd-day-disabled-color;
-    opacity: 0.3;
-  }
-
-  &:hover {
-    color: $pd-day-hover-color;
-    background: $pd-day-hover-bg;
+  .is-startrange .pika-button {
+    color: var(--secondary);
+    background: #6cb31d;
     box-shadow: none;
     border-radius: 3px;
   }
-}
 
-.pika-week {
-  font-size: 11px;
-  color: $pd-week-color;
-}
+  .is-endrange .pika-button {
+    color: var(--secondary);
+    background: var(--tertiary);
+    box-shadow: none;
+    border-radius: 3px;
+  }
 
-.is-inrange .pika-button {
-  background: #d5e9f7;
-}
+  // timepicker
 
-.is-startrange .pika-button {
-  color: var(--secondary);
-  background: #6cb31d;
-  box-shadow: none;
-  border-radius: 3px;
-}
+  .ui-timepicker-wrapper {
+    overflow-y: auto;
+    max-height: 150px;
+    width: 6.5em;
+    background: #fff;
+    border: 1px solid #ddd;
+    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    outline: none;
+    z-index: 10001;
+    margin: 0;
+  }
 
-.is-endrange .pika-button {
-  color: var(--secondary);
-  background: var(--tertiary);
-  box-shadow: none;
-  border-radius: 3px;
-}
+  .ui-timepicker-wrapper.ui-timepicker-with-duration {
+    width: 13em;
+  }
 
-// timepicker
+  .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
+  .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
+    width: 11em;
+  }
 
-.ui-timepicker-wrapper {
-  overflow-y: auto;
-  max-height: 150px;
-  width: 6.5em;
-  background: #fff;
-  border: 1px solid #ddd;
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  outline: none;
-  z-index: 10001;
-  margin: 0;
-}
+  .ui-timepicker-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
 
-.ui-timepicker-wrapper.ui-timepicker-with-duration {
-  width: 13em;
-}
+  .ui-timepicker-duration {
+    margin-left: 5px;
+    color: #888;
+  }
 
-.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
-.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
-  width: 11em;
-}
+  .ui-timepicker-list:hover .ui-timepicker-duration {
+    color: #888;
+  }
 
-.ui-timepicker-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
+  .ui-timepicker-list li {
+    padding: 3px 0 3px 5px;
+    cursor: pointer;
+    white-space: nowrap;
+    color: #000;
+    list-style: none;
+    margin: 0;
+  }
 
-.ui-timepicker-duration {
-  margin-left: 5px;
-  color: #888;
-}
+  .ui-timepicker-list:hover .ui-timepicker-selected {
+    background: #fff;
+    color: #000;
+  }
 
-.ui-timepicker-list:hover .ui-timepicker-duration {
-  color: #888;
-}
+  li.ui-timepicker-selected,
+  .ui-timepicker-list li:hover,
+  .ui-timepicker-list .ui-timepicker-selected:hover {
+    background: #1980ec;
+    color: #fff;
+  }
 
-.ui-timepicker-list li {
-  padding: 3px 0 3px 5px;
-  cursor: pointer;
-  white-space: nowrap;
-  color: #000;
-  list-style: none;
-  margin: 0;
-}
+  li.ui-timepicker-selected .ui-timepicker-duration,
+  .ui-timepicker-list li:hover .ui-timepicker-duration {
+    color: #ccc;
+  }
 
-.ui-timepicker-list:hover .ui-timepicker-selected {
-  background: #fff;
-  color: #000;
-}
+  .ui-timepicker-list li.ui-timepicker-disabled,
+  .ui-timepicker-list li.ui-timepicker-disabled:hover,
+  .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
+    color: #888;
+    cursor: default;
+  }
 
-li.ui-timepicker-selected,
-.ui-timepicker-list li:hover,
-.ui-timepicker-list .ui-timepicker-selected:hover {
-  background: #1980ec;
-  color: #fff;
-}
-
-li.ui-timepicker-selected .ui-timepicker-duration,
-.ui-timepicker-list li:hover .ui-timepicker-duration {
-  color: #ccc;
-}
-
-.ui-timepicker-list li.ui-timepicker-disabled,
-.ui-timepicker-list li.ui-timepicker-disabled:hover,
-.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
-  color: #888;
-  cursor: default;
-}
-
-.ui-timepicker-list li.ui-timepicker-disabled:hover,
-.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
-  background: #f2f2f2;
+  .ui-timepicker-list li.ui-timepicker-disabled:hover,
+  .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
+    background: #f2f2f2;
+  }
 }
diff --git a/assets/stylesheets/common/custom/header.scss b/assets/stylesheets/common/custom/header.scss
new file mode 100644
index 00000000..95d23141
--- /dev/null
+++ b/assets/stylesheets/common/custom/header.scss
@@ -0,0 +1,5 @@
+body.custom-wizard {
+  .d-header .panel {
+    display: none;
+  }
+}
diff --git a/assets/stylesheets/common/custom/locations.scss b/assets/stylesheets/common/custom/locations.scss
index 9a2f74ec..5a8b185c 100644
--- a/assets/stylesheets/common/custom/locations.scss
+++ b/assets/stylesheets/common/custom/locations.scss
@@ -1,191 +1,193 @@
-.location-form-instructions {
-  color: #919191;
-  margin: 5px 0;
-  font-size: 80%;
-  line-height: 1.4em;
+body.custom-wizard {
+  .location-form-instructions {
+    color: #919191;
+    margin: 5px 0;
+    font-size: 80%;
+    line-height: 1.4em;
 
-  a {
-    text-decoration: underline;
-  }
-}
-
-.location-form {
-  display: flex;
-  overflow: visible;
-
-  .title {
-    font-weight: 700;
+    a {
+      text-decoration: underline;
+    }
   }
 
-  .address {
-    padding-right: 20px;
-  }
+  .location-form {
+    display: flex;
+    overflow: visible;
 
-  .coordinates {
-    .control-group {
-      display: block;
+    .title {
+      font-weight: 700;
+    }
 
-      .controls {
-        display: flex;
-        width: 100%;
+    .address {
+      padding-right: 20px;
+    }
 
-        input {
-          width: 100px;
+    .coordinates {
+      .control-group {
+        display: block;
+
+        .controls {
+          display: flex;
+          width: 100%;
+
+          input {
+            width: 100px;
+          }
+        }
+
+        .icon {
+          margin-left: 10px;
+          display: inline-block;
         }
       }
 
-      .icon {
-        margin-left: 10px;
-        display: inline-block;
+      .icon img {
+        max-width: 30px;
       }
     }
 
-    .icon img {
-      max-width: 30px;
+    .address + .coordinates {
+      border-left: 1px solid var(--primary-low);
+      padding-left: 20px;
+    }
+
+    .control-group {
+      display: inline-block;
+      vertical-align: top;
+      margin-right: 20px;
+      margin-top: 10px;
+      width: auto;
+
+      .instructions {
+        @extend .location-form-instructions;
+      }
+    }
+
+    .location-search {
+      display: block;
+      margin: 15px 0;
+    }
+
+    .geo-map {
+      height: 400px;
     }
   }
 
-  .address + .coordinates {
-    border-left: 1px solid var(--primary-low);
-    padding-left: 20px;
-  }
-
-  .control-group {
-    display: inline-block;
-    vertical-align: top;
-    margin-right: 20px;
-    margin-top: 10px;
-    width: auto;
-
-    .instructions {
-      @extend .location-form-instructions;
-    }
-  }
-
-  .location-search {
-    display: block;
-    margin: 15px 0;
-  }
-
-  .geo-map {
-    height: 400px;
-  }
-}
-
-input.input-location,
-div.input-location {
-  max-height: 150px;
-  background-color: var(--secondary);
-  box-shadow: none;
-  box-sizing: border-box;
-  margin: 0;
-}
-
-.input-location .select2-choice {
-  padding: 2px 5px;
-}
-
-.input-location.input-small {
-  width: 100px;
-}
-
-.location-selector-container {
-  position: relative;
-
-  .ac-wrap {
+  input.input-location,
+  div.input-location {
+    max-height: 150px;
+    background-color: var(--secondary);
+    box-shadow: none;
     box-sizing: border-box;
+    margin: 0;
+  }
 
-    .ac-loading {
-      position: absolute;
-      top: 7px;
-      right: 5px;
-    }
+  .input-location .select2-choice {
+    padding: 2px 5px;
+  }
 
-    .item {
-      line-height: 1.6;
-    }
+  .input-location.input-small {
+    width: 100px;
+  }
 
-    .autocomplete {
-      width: inherit;
-      left: 0 !important;
-      width: 100%;
-      top: 30px !important;
+  .location-selector-container {
+    position: relative;
+
+    .ac-wrap {
       box-sizing: border-box;
 
-      li,
-      .no-results {
-        padding: 10px;
+      .ac-loading {
+        position: absolute;
+        top: 7px;
+        right: 5px;
       }
 
-      ul > label {
-        @extend .location-form-instructions;
-        padding: 0 5px;
+      .item {
+        line-height: 1.6;
+      }
+
+      .autocomplete {
+        width: inherit;
+        left: 0 !important;
+        width: 100%;
+        top: 30px !important;
+        box-sizing: border-box;
+
+        li,
+        .no-results {
+          padding: 10px;
+        }
+
+        ul > label {
+          @extend .location-form-instructions;
+          padding: 0 5px;
+        }
       }
     }
   }
-}
 
-.location-form-result {
-  cursor: pointer;
-  background-color: var(--secondary);
-  display: flex;
+  .location-form-result {
+    cursor: pointer;
+    background-color: var(--secondary);
+    display: flex;
 
-  &:hover,
-  &.selected {
-    background-color: var(--tertiary);
-    color: white;
+    &:hover,
+    &.selected {
+      background-color: var(--tertiary);
+      color: white;
+
+      label {
+        color: white;
+      }
+    }
 
     label {
-      color: white;
+      flex: 1 1 auto;
+      margin-bottom: 0;
+      cursor: pointer;
+    }
+
+    i {
+      margin-right: 5px;
     }
   }
 
-  label {
-    flex: 1 1 auto;
-    margin-bottom: 0;
-    cursor: pointer;
-  }
+  .location-results {
+    max-width: 550px;
+    position: relative;
 
-  i {
-    margin-right: 5px;
-  }
-}
-
-.location-results {
-  max-width: 550px;
-  position: relative;
-
-  .spinner {
-    position: absolute;
-    right: 50%;
-    top: 50%;
-  }
-
-  ul {
-    background-color: var(--primary-very-low);
-    border: 1px solid #e9e9e9;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    height: 95px;
-    overflow: scroll;
-  }
-
-  li {
-    padding: 6px 12px;
-  }
-
-  .no-results {
-    padding: 15px;
-  }
-
-  .default {
-    margin: 0 auto;
-    top: 50%;
-    transform: translateY(-50%);
-    position: absolute;
-    width: 100%;
-    text-align: center;
-    color: #919191;
+    .spinner {
+      position: absolute;
+      right: 50%;
+      top: 50%;
+    }
+
+    ul {
+      background-color: var(--primary-very-low);
+      border: 1px solid #e9e9e9;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      height: 95px;
+      overflow: scroll;
+    }
+
+    li {
+      padding: 6px 12px;
+    }
+
+    .no-results {
+      padding: 15px;
+    }
+
+    .default {
+      margin: 0 auto;
+      top: 50%;
+      transform: translateY(-50%);
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      color: #919191;
+    }
   }
 }
diff --git a/assets/stylesheets/common/custom/mentionables.scss b/assets/stylesheets/common/custom/mentionables.scss
index 6e60f4e7..9a49cfcf 100644
--- a/assets/stylesheets/common/custom/mentionables.scss
+++ b/assets/stylesheets/common/custom/mentionables.scss
@@ -1,32 +1,34 @@
-span.mentionable-item {
-  font-weight: bold;
-}
+body.custom-wizard {
+  span.mentionable-item {
+    font-weight: bold;
+  }
 
-a.mentionable-item span {
-  background-color: $primary-low;
-  padding: 3px;
-  border-radius: 3px;
-  color: $primary;
-}
+  a.mentionable-item span {
+    background-color: $primary-low;
+    padding: 3px;
+    border-radius: 3px;
+    color: $primary;
+  }
 
-.ac-mentionable-item ul li a {
-  display: flex;
-  align-items: center;
-}
+  .ac-mentionable-item ul li a {
+    display: flex;
+    align-items: center;
+  }
 
-.ac-mentionable-item-name {
-  padding-left: 0.5em;
-}
+  .ac-mentionable-item-name {
+    padding-left: 0.5em;
+  }
 
-.ac-mentionable-item-image {
-  width: 25px;
-  height: 25px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  .ac-mentionable-item-image {
+    width: 25px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-  img {
-    height: 100%;
-    object-fit: contain;
+    img {
+      height: 100%;
+      object-fit: contain;
+    }
   }
 }
diff --git a/assets/stylesheets/common/custom/validators.scss b/assets/stylesheets/common/custom/validators.scss
index 93368e70..3161fff3 100644
--- a/assets/stylesheets/common/custom/validators.scss
+++ b/assets/stylesheets/common/custom/validators.scss
@@ -1,40 +1,42 @@
-.similar-topics-validator {
-  position: relative;
-  display: flex;
+body.custom-wizard {
+  .similar-topics-validator {
+    position: relative;
+    display: flex;
 
-  label {
-    min-height: 20px;
-  }
-}
-
-.wizard-similar-topics {
-  margin-left: 3px;
-
-  ul {
-    background-color: var(--tertiary-low);
-    padding: 5px;
-    margin: 0;
-    list-style: none;
-    position: absolute;
-    left: 0;
-    top: 25px;
-    box-shadow: shadow("dropdown");
-    width: 100%;
-    box-sizing: border-box;
-    z-index: 100;
-
-    .title {
-      color: var(--primary);
-    }
-
-    .blurb {
-      margin-left: 0.5em;
-      color: var(--primary-high);
-      font-size: $font-down-1;
+    label {
+      min-height: 20px;
     }
   }
 
-  .show-topics {
-    cursor: pointer;
+  .wizard-similar-topics {
+    margin-left: 3px;
+
+    ul {
+      background-color: var(--tertiary-low);
+      padding: 5px;
+      margin: 0;
+      list-style: none;
+      position: absolute;
+      left: 0;
+      top: 25px;
+      box-shadow: shadow("dropdown");
+      width: 100%;
+      box-sizing: border-box;
+      z-index: 100;
+
+      .title {
+        color: var(--primary);
+      }
+
+      .blurb {
+        margin-left: 0.5em;
+        color: var(--primary-high);
+        font-size: $font-down-1;
+      }
+    }
+
+    .show-topics {
+      cursor: pointer;
+    }
   }
 }
diff --git a/assets/stylesheets/common/custom/wizard.scss b/assets/stylesheets/common/custom/wizard.scss
index 4f79491f..0155bbab 100644
--- a/assets/stylesheets/common/custom/wizard.scss
+++ b/assets/stylesheets/common/custom/wizard.scss
@@ -16,7 +16,7 @@ body.custom-wizard {
     width: 100%;
     border: 1px solid var(--primary-low-mid);
     border-radius: 5px;
-    margin: 0 auto;
+    margin: 0 auto 2.5em auto;
 
     .wizard-field .input-area {
       margin: 0.5em 0;
@@ -144,12 +144,12 @@ body.custom-wizard {
   .wizard-column .action-link {
     color: var(--tertiary);
   }
-}
 
-.no-access-gutter {
-  margin-top: 10px;
-  display: flex;
-  justify-content: flex-end;
+  .no-access-gutter {
+    margin-top: 10px;
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 
 /* IE11 hacks */
diff --git a/assets/stylesheets/common/wizard-custom.scss b/assets/stylesheets/common/wizard-custom.scss
index 9a820867..bcf05477 100644
--- a/assets/stylesheets/common/wizard-custom.scss
+++ b/assets/stylesheets/common/wizard-custom.scss
@@ -1,5 +1,6 @@
 @import "custom/base";
 @import "custom/wizard";
+@import "custom/header";
 @import "custom/step";
 @import "custom/badges";
 @import "custom/buttons";
diff --git a/config/routes.rb b/config/routes.rb
index 1948b799..ee721fad 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,10 +1,9 @@
 # frozen_string_literal: true
 CustomWizard::Engine.routes.draw do
-  get 'qunit' => 'wizard#qunit'
-  get ':wizard_id' => 'wizard#index'
+  get ':wizard_id' => 'wizard#show'
   put ':wizard_id/skip' => 'wizard#skip'
-  get ':wizard_id/steps' => 'wizard#index'
-  get ':wizard_id/steps/:step_id' => 'wizard#index'
+  get ':wizard_id/steps' => 'wizard#show'
+  get ':wizard_id/steps/:step_id' => 'wizard#show'
   put ':wizard_id/steps/:step_id' => 'steps#update'
 end
 
diff --git a/lib/custom_wizard/builder.rb b/lib/custom_wizard/builder.rb
index 8279d070..91f8671e 100644
--- a/lib/custom_wizard/builder.rb
+++ b/lib/custom_wizard/builder.rb
@@ -120,18 +120,6 @@ class CustomWizard::Builder
       params[:property] = field_template['property']
     end
 
-    if field_template['type'] === 'category' || (
-          field_template['validations'] &&
-          field_template['validations']['similar_topics'] &&
-          field_template['validations']['similar_topics']['categories'].present?
-        )
-      @wizard.needs_categories = true
-    end
-
-    if field_template['type'] === 'group'
-      @wizard.needs_groups = true
-    end
-
     if (content_inputs = field_template['content']).present?
       content = CustomWizard::Mapper.new(
         inputs: content_inputs,
diff --git a/lib/custom_wizard/wizard.rb b/lib/custom_wizard/wizard.rb
index 90177b82..4fb3dd97 100644
--- a/lib/custom_wizard/wizard.rb
+++ b/lib/custom_wizard/wizard.rb
@@ -23,8 +23,6 @@ class CustomWizard::Wizard
                 :restart_on_revisit,
                 :resume_on_revisit,
                 :permitted,
-                :needs_categories,
-                :needs_groups,
                 :steps,
                 :step_ids,
                 :field_ids,
@@ -54,8 +52,6 @@ class CustomWizard::Wizard
     @after_time_scheduled = attrs['after_time_scheduled']
     @required = cast_bool(attrs['required'])
     @permitted = attrs['permitted'] || nil
-    @needs_categories = false
-    @needs_groups = false
     @theme_id = attrs['theme_id']
 
     if attrs['theme'].present?
@@ -243,14 +239,6 @@ class CustomWizard::Wizard
     )
   end
 
-  def categories
-    @categories ||= ::Site.new(Guardian.new(user)).categories
-  end
-
-  def groups
-    @groups ||= ::Site.new(Guardian.new(user)).groups
-  end
-
   def update_step_ids
     @step_ids = steps.map(&:id)
   end