diff --git a/core/.stylelintignore b/core/.stylelintignore
index d70b0031c4..708e1d5e7d 100644
--- a/core/.stylelintignore
+++ b/core/.stylelintignore
@@ -1,2 +1,6 @@
 themes/claro/**/*.css
 !themes/claro/**/*.pcss.css
+misc/dialog/off-canvas.reset.css
+misc/dialog/off-canvas.base.css
+themes/stable/css/core/dialog/off-canvas.reset.css
+themes/stable/css/core/dialog/off-canvas.base.css
diff --git a/core/misc/dialog/off-canvas.base.css b/core/misc/dialog/off-canvas.base.css
index a0948c0ade..996ae6a9a6 100644
--- a/core/misc/dialog/off-canvas.base.css
+++ b/core/misc/dialog/off-canvas.base.css
@@ -1,19 +1,126 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
 /**
  * @file
  * Set base styles for the off-canvas dialog.
  */
 
 /* Set some global attributes. */
-#drupal-off-canvas *,
-#drupal-off-canvas *:not(div) {
+
+#drupal-off-canvas {
   color: #ddd;
   background: #444;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+}
+
+/**
+ * All HTML elements that could be used in off-canvas except div, bdo, bdi,
+ * data, svg, map and math.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+ */
+
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & button,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & main,
+  & menu,
+  & meter,
+  & nav,
+  & output,
+  & progress,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & select,
+  & textarea {
+    color: inherit;
+    background: inherit;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  }
 }
 
 /* Generic elements. */
+
 #drupal-off-canvas a,
 #drupal-off-canvas .link {
+  cursor: pointer;
   transition: color 0.5s ease;
   text-decoration: none;
   color: #85bef4;
@@ -29,14 +136,17 @@
 #drupal-off-canvas .link:hover {
   text-decoration: underline;
 }
+
 #drupal-off-canvas hr {
   height: 1px;
   background: #ccc;
 }
+
 #drupal-off-canvas summary,
 #drupal-off-canvas .fieldgroup:not(.form-composite) > legend {
   font-weight: bold;
 }
+
 #drupal-off-canvas h1,
 #drupal-off-canvas .heading-a {
   display: block;
@@ -44,6 +154,7 @@
   font-weight: bold;
   line-height: 1.875em;
 }
+
 #drupal-off-canvas h2,
 #drupal-off-canvas .heading-b {
   display: block;
@@ -51,6 +162,7 @@
   font-size: 1.385em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h3,
 #drupal-off-canvas .heading-c {
   display: block;
@@ -58,6 +170,7 @@
   font-size: 1.231em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h4,
 #drupal-off-canvas .heading-d {
   display: block;
@@ -65,6 +178,7 @@
   font-size: 1.154em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h5,
 #drupal-off-canvas .heading-e {
   display: block;
@@ -72,6 +186,7 @@
   font-size: 1.077em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h6,
 #drupal-off-canvas .heading-f {
   display: block;
@@ -79,52 +194,65 @@
   font-size: 1.077em;
   font-weight: bold;
 }
+
 #drupal-off-canvas p {
   margin: 1em 0;
 }
+
 #drupal-off-canvas dl {
   margin: 0 0 20px;
 }
+
 #drupal-off-canvas dl dd,
 #drupal-off-canvas dl dl {
   margin-bottom: 10px;
   margin-left: 20px; /* LTR */
 }
+
 [dir="rtl"] #drupal-off-canvas dl dd,
 [dir="rtl"] #drupal-off-canvas dl dl {
   margin-right: 20px;
 }
+
 #drupal-off-canvas blockquote {
   margin: 1em 40px;
 }
+
 #drupal-off-canvas address {
   font-style: italic;
 }
+
 #drupal-off-canvas u,
 #drupal-off-canvas ins {
   text-decoration: underline;
 }
+
 #drupal-off-canvas s,
 #drupal-off-canvas strike,
 #drupal-off-canvas del {
   text-decoration: line-through;
 }
+
 #drupal-off-canvas big {
   font-size: larger;
 }
+
 #drupal-off-canvas small {
   font-size: smaller;
 }
+
 #drupal-off-canvas sub {
   vertical-align: sub;
   font-size: smaller;
   line-height: normal;
 }
+
 #drupal-off-canvas sup {
   vertical-align: super;
   font-size: smaller;
   line-height: normal;
 }
+
 #drupal-off-canvas abbr,
 #drupal-off-canvas acronym {
   border-bottom: dotted 1px;
@@ -135,29 +263,48 @@
   list-style-type: disc;
   list-style-image: none;
 }
+
 [dir="rtl"] #drupal-off-canvas .messages__list {
   margin-right: 0;
 }
+
 #drupal-off-canvas ol {
   list-style-type: decimal;
 }
+
 #drupal-off-canvas ul li,
 #drupal-off-canvas ol li {
   display: block;
 }
+
 #drupal-off-canvas blockquote,
 #drupal-off-canvas code {
   margin: 20px 0;
 }
+
 #drupal-off-canvas pre {
   margin: 20px 0;
   white-space: pre-wrap;
 }
 
+#drupal-off-canvas details {
+  display: block;
+}
+
+#drupal-off-canvas summary {
+  display: list-item;
+}
+
+#drupal-off-canvas select::-ms-expand {
+  display: block;
+}
+
 /* Classes for hidden and visually hidden elements. See hidden.module.css. */
+
 #drupal-off-canvas .hidden {
   display: none;
 }
+
 #drupal-off-canvas .visually-hidden {
   position: absolute !important;
   overflow: hidden;
@@ -166,6 +313,7 @@
   height: 1px;
   word-wrap: normal;
 }
+
 #drupal-off-canvas .visually-hidden.focusable:active,
 #drupal-off-canvas .visually-hidden.focusable:focus {
   position: static !important;
@@ -174,48 +322,60 @@
   width: auto;
   height: auto;
 }
+
 #drupal-off-canvas .invisible {
   visibility: hidden;
 }
 
 /* Some system classes. See system.admin.css. */
+
 #drupal-off-canvas .panel {
   padding: 5px 5px 15px;
 }
+
 #drupal-off-canvas .panel__description {
   margin: 0 0 3px;
   padding: 2px 0 3px 0;
 }
+
 #drupal-off-canvas .compact-link {
   margin: 0 0 10px 0;
 }
+
 #drupal-off-canvas small .admin-link:before {
   content: " [";
 }
+
 #drupal-off-canvas small .admin-link:after {
   content: "]";
 }
 
 /* Override jQuery UI */
+
 #drupal-off-canvas .ui-widget-content a {
   color: #85bef4 !important;
 }
 
 /* Message styles */
+
 #drupal-off-canvas .messages {
   background: no-repeat 10px 17px;
 }
+
 [dir="rtl"] #drupal-off-canvas .messages {
   background-position: right 10px top 17px;
 }
+
 #drupal-off-canvas .messages abbr {
   color: #444;
 }
+
 #drupal-off-canvas .messages--status {
   color: #325e1c;
   background-color: #f3faef;
   background-image: url(../icons/73b355/check.svg);
 }
+
 #drupal-off-canvas .messages--warning {
   color: #734c00;
   background-color: #fdf8ed;
diff --git a/core/misc/dialog/off-canvas.base.pcss.css b/core/misc/dialog/off-canvas.base.pcss.css
new file mode 100644
index 0000000000..4899574a50
--- /dev/null
+++ b/core/misc/dialog/off-canvas.base.pcss.css
@@ -0,0 +1,340 @@
+/**
+ * @file
+ * Set base styles for the off-canvas dialog.
+ */
+
+/* Set some global attributes. */
+#drupal-off-canvas {
+  color: #ddd;
+  background: #444;
+}
+/**
+ * All HTML elements that could be used in off-canvas except div, bdo, bdi,
+ * data, svg, map and math.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+ */
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & button,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & main,
+  & menu,
+  & meter,
+  & nav,
+  & output,
+  & progress,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & select,
+  & textarea {
+    color: inherit;
+    background: inherit;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  }
+}
+
+/* Generic elements. */
+#drupal-off-canvas a,
+#drupal-off-canvas .link {
+  cursor: pointer;
+  transition: color 0.5s ease;
+  text-decoration: none;
+  color: #85bef4;
+  border-bottom: none;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  font-size: inherit;
+  font-weight: normal;
+}
+
+#drupal-off-canvas a:focus,
+#drupal-off-canvas .link:focus,
+#drupal-off-canvas a:hover,
+#drupal-off-canvas .link:hover {
+  text-decoration: underline;
+}
+#drupal-off-canvas hr {
+  height: 1px;
+  background: #ccc;
+}
+#drupal-off-canvas summary,
+#drupal-off-canvas .fieldgroup:not(.form-composite) > legend {
+  font-weight: bold;
+}
+#drupal-off-canvas h1,
+#drupal-off-canvas .heading-a {
+  display: block;
+  font-size: 1.625em;
+  font-weight: bold;
+  line-height: 1.875em;
+}
+#drupal-off-canvas h2,
+#drupal-off-canvas .heading-b {
+  display: block;
+  margin: 10px 0;
+  font-size: 1.385em;
+  font-weight: bold;
+}
+#drupal-off-canvas h3,
+#drupal-off-canvas .heading-c {
+  display: block;
+  margin: 10px 0;
+  font-size: 1.231em;
+  font-weight: bold;
+}
+#drupal-off-canvas h4,
+#drupal-off-canvas .heading-d {
+  display: block;
+  margin: 10px 0;
+  font-size: 1.154em;
+  font-weight: bold;
+}
+#drupal-off-canvas h5,
+#drupal-off-canvas .heading-e {
+  display: block;
+  margin: 10px 0;
+  font-size: 1.077em;
+  font-weight: bold;
+}
+#drupal-off-canvas h6,
+#drupal-off-canvas .heading-f {
+  display: block;
+  margin: 10px 0;
+  font-size: 1.077em;
+  font-weight: bold;
+}
+#drupal-off-canvas p {
+  margin: 1em 0;
+}
+#drupal-off-canvas dl {
+  margin: 0 0 20px;
+}
+#drupal-off-canvas dl dd,
+#drupal-off-canvas dl dl {
+  margin-bottom: 10px;
+  margin-left: 20px; /* LTR */
+}
+[dir="rtl"] #drupal-off-canvas dl dd,
+[dir="rtl"] #drupal-off-canvas dl dl {
+  margin-right: 20px;
+}
+#drupal-off-canvas blockquote {
+  margin: 1em 40px;
+}
+#drupal-off-canvas address {
+  font-style: italic;
+}
+#drupal-off-canvas u,
+#drupal-off-canvas ins {
+  text-decoration: underline;
+}
+#drupal-off-canvas s,
+#drupal-off-canvas strike,
+#drupal-off-canvas del {
+  text-decoration: line-through;
+}
+#drupal-off-canvas big {
+  font-size: larger;
+}
+#drupal-off-canvas small {
+  font-size: smaller;
+}
+#drupal-off-canvas sub {
+  vertical-align: sub;
+  font-size: smaller;
+  line-height: normal;
+}
+#drupal-off-canvas sup {
+  vertical-align: super;
+  font-size: smaller;
+  line-height: normal;
+}
+#drupal-off-canvas abbr,
+#drupal-off-canvas acronym {
+  border-bottom: dotted 1px;
+  background: transparent;
+}
+
+#drupal-off-canvas ul {
+  list-style-type: disc;
+  list-style-image: none;
+}
+[dir="rtl"] #drupal-off-canvas .messages__list {
+  margin-right: 0;
+}
+#drupal-off-canvas ol {
+  list-style-type: decimal;
+}
+#drupal-off-canvas ul li,
+#drupal-off-canvas ol li {
+  display: block;
+}
+#drupal-off-canvas blockquote,
+#drupal-off-canvas code {
+  margin: 20px 0;
+}
+#drupal-off-canvas pre {
+  margin: 20px 0;
+  white-space: pre-wrap;
+}
+#drupal-off-canvas details {
+  display: block;
+}
+#drupal-off-canvas summary {
+  display: list-item;
+}
+
+#drupal-off-canvas select::-ms-expand {
+  display: block;
+}
+
+/* Classes for hidden and visually hidden elements. See hidden.module.css. */
+#drupal-off-canvas .hidden {
+  display: none;
+}
+#drupal-off-canvas .visually-hidden {
+  position: absolute !important;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  width: 1px;
+  height: 1px;
+  word-wrap: normal;
+}
+#drupal-off-canvas .visually-hidden.focusable:active,
+#drupal-off-canvas .visually-hidden.focusable:focus {
+  position: static !important;
+  overflow: visible;
+  clip: auto;
+  width: auto;
+  height: auto;
+}
+#drupal-off-canvas .invisible {
+  visibility: hidden;
+}
+
+/* Some system classes. See system.admin.css. */
+#drupal-off-canvas .panel {
+  padding: 5px 5px 15px;
+}
+#drupal-off-canvas .panel__description {
+  margin: 0 0 3px;
+  padding: 2px 0 3px 0;
+}
+#drupal-off-canvas .compact-link {
+  margin: 0 0 10px 0;
+}
+#drupal-off-canvas small .admin-link:before {
+  content: " [";
+}
+#drupal-off-canvas small .admin-link:after {
+  content: "]";
+}
+
+/* Override jQuery UI */
+#drupal-off-canvas .ui-widget-content a {
+  color: #85bef4 !important;
+}
+
+/* Message styles */
+#drupal-off-canvas .messages {
+  background: no-repeat 10px 17px;
+}
+[dir="rtl"] #drupal-off-canvas .messages {
+  background-position: right 10px top 17px;
+}
+#drupal-off-canvas .messages abbr {
+  color: #444;
+}
+#drupal-off-canvas .messages--status {
+  color: #325e1c;
+  background-color: #f3faef;
+  background-image: url(../icons/73b355/check.svg);
+}
+#drupal-off-canvas .messages--warning {
+  color: #734c00;
+  background-color: #fdf8ed;
+  background-image: url(../icons/e29700/warning.svg);
+}
+
+#drupal-off-canvas .messages--error {
+  color: #a51b00;
+  background-color: #fcf4f2;
+  background-image: url(../icons/e32700/error.svg);
+}
+
+#drupal-off-canvas .messages--error div[role="alert"] {
+  color: inherit;
+  background: transparent;
+}
diff --git a/core/misc/dialog/off-canvas.reset.css b/core/misc/dialog/off-canvas.reset.css
index 6c16f3ddd6..a5f528a317 100644
--- a/core/misc/dialog/off-canvas.reset.css
+++ b/core/misc/dialog/off-canvas.reset.css
@@ -1,3 +1,10 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
 /**
  * @file
  * Reset most HTML elements styles for the off-canvas dialog.
@@ -6,21 +13,117 @@
  */
 
 /**
- * Do not include div in then initial overrides because including div will
- * cause the need for many more overrides in this file.
+ * All HTML elements that could be used in off-canvas except div, bdo, bdi,
+ * data, svg, map and math.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
  */
-#drupal-off-canvas *:not(div),
-#drupal-off-canvas *:not(svg *),
-#drupal-off-canvas *:after,
-#drupal-off-canvas *:before {
-  all: initial;
-  box-sizing: border-box;
-  text-shadow: none;
-  -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: initial;
+
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & button,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & main,
+  & menu,
+  & meter,
+  & nav,
+  & output,
+  & progress,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & select,
+  & textarea {
+    all: initial;
+    box-sizing: border-box;
+    text-shadow: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: initial;
+
+    &:after,
+    &:before {
+      all: initial;
+      box-sizing: border-box;
+      text-shadow: none;
+      -webkit-font-smoothing: antialiased;
+      -webkit-tap-highlight-color: initial;
+    }
+  }
 }
 
 /* Reset size and position on elements. */
+
 #drupal-off-canvas a,
 #drupal-off-canvas abbr,
 #drupal-off-canvas acronym,
@@ -115,6 +218,7 @@
  * Override the default (display: inline) for browsers that do not recognize HTML5 tags.
  * IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
  */
+
 #drupal-off-canvas article,
 #drupal-off-canvas aside,
 #drupal-off-canvas figcaption,
@@ -136,6 +240,7 @@
  * IE + Opera = font-weight: bold.
  * Gecko + WebKit = font-weight: bolder.
  */
+
 #drupal-off-canvas b,
 #drupal-off-canvas strong {
   font-weight: bold;
@@ -158,10 +263,12 @@
 }
 
 /* reset table styling. */
+
 #drupal-off-canvas table {
   border-spacing: 0;
   border-collapse: collapse;
 }
+
 #drupal-off-canvas table thead,
 #drupal-off-canvas table tbody,
 #drupal-off-canvas table tbody tr:nth-child(even),
@@ -170,32 +277,39 @@
   border: 0;
   background: transparent none;
 }
+
 #drupal-off-canvas th,
 #drupal-off-canvas td,
 #drupal-off-canvas caption {
   font-weight: normal;
 }
+
 #drupal-off-canvas q {
   quotes: none;
 }
+
 #drupal-off-canvas q:before,
 #drupal-off-canvas q:after {
   content: none;
 }
+
 #drupal-off-canvas sub,
 #drupal-off-canvas sup,
 #drupal-off-canvas small {
   font-size: 75%;
 }
+
 #drupal-off-canvas sub,
 #drupal-off-canvas sup {
   position: relative;
   vertical-align: baseline;
   line-height: 0;
 }
+
 #drupal-off-canvas sub {
   bottom: -0.25em;
 }
+
 #drupal-off-canvas sup {
   top: -0.5em;
 }
@@ -204,23 +318,28 @@
  * For IE9. Without, occasionally draws shapes
  * outside the boundaries of <svg> rectangle.
  */
+
 #drupal-off-canvas svg {
   overflow: hidden;
 }
 
 /* Specific resets for inputs. */
+
 #drupal-off-canvas input[type="search"]::-webkit-search-decoration {
   display: none;
 }
+
 #drupal-off-canvas input {
   margin: 0;
   padding: 0;
 }
+
 #drupal-off-canvas input[type="checkbox"],
 #drupal-off-canvas input[type="radio"] {
   position: static;
   margin: 0;
 }
+
 #drupal-off-canvas input:invalid,
 #drupal-off-canvas button:invalid,
 #drupal-off-canvas select:invalid,
@@ -238,9 +357,11 @@
   z-index: 1;
   box-shadow: none;
 }
+
 #drupal-off-canvas input[role="button"] {
   cursor: pointer;
 }
+
 #drupal-off-canvas button,
 #drupal-off-canvas input[type="reset"],
 #drupal-off-canvas input[type="submit"],
@@ -257,6 +378,7 @@
   -webkit-appearance: none;
   -moz-appearance: none;
 }
+
 #drupal-off-canvas button:hover,
 #drupal-off-canvas input[type="reset"]:hover,
 #drupal-off-canvas input[type="submit"]:hover,
@@ -264,6 +386,7 @@
   text-decoration: none;
   background-image: none;
 }
+
 #drupal-off-canvas button:active,
 #drupal-off-canvas input[type="reset"]:active,
 #drupal-off-canvas input[type="submit"]:active,
@@ -272,6 +395,7 @@
   background-image: none;
   box-shadow: none;
 }
+
 #drupal-off-canvas button::-moz-focus-inner,
 #drupal-off-canvas input[type="reset"]::-moz-focus-inner,
 #drupal-off-canvas input[type="submit"]::-moz-focus-inner,
@@ -279,6 +403,7 @@
   padding: 0;
   border: 0;
 }
+
 #drupal-off-canvas textarea,
 #drupal-off-canvas select,
 #drupal-off-canvas input[type="date"],
@@ -298,6 +423,7 @@
   vertical-align: middle;
   border-radius: 0;
 }
+
 #drupal-off-canvas textarea[disabled],
 #drupal-off-canvas select[disabled],
 #drupal-off-canvas input[type="date"][disabled],
@@ -315,9 +441,11 @@
 #drupal-off-canvas input[type="week"][disabled] {
   background-color: grey;
 }
+
 #drupal-off-canvas input[type="hidden"] {
   visibility: hidden;
 }
+
 #drupal-off-canvas button[disabled],
 #drupal-off-canvas input[disabled],
 #drupal-off-canvas select[disabled],
@@ -331,34 +459,41 @@
   user-select: none;
   box-shadow: none;
 }
+
 #drupal-off-canvas input:placeholder,
 #drupal-off-canvas textarea:placeholder {
   color: grey;
 }
+
 #drupal-off-canvas textarea,
 #drupal-off-canvas select[size],
 #drupal-off-canvas select[multiple] {
   height: auto;
 }
+
 #drupal-off-canvas select[size="0"],
 #drupal-off-canvas select[size="1"] {
   height: auto;
 }
+
 #drupal-off-canvas textarea {
   overflow: auto;
   width: 100%;
   min-height: 40px;
   resize: vertical;
 }
+
 #drupal-off-canvas optgroup {
   color: black;
   font-weight: normal;
   font-style: normal;
 }
+
 #drupal-off-canvas optgroup::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
+
 #drupal-off-canvas * button {
   overflow: visible;
   width: auto;
@@ -369,6 +504,7 @@
   border: 1px solid grey;
   background: none;
 }
+
 #drupal-off-canvas * textarea,
 #drupal-off-canvas * select,
 #drupal-off-canvas *:not(div) textarea,
@@ -381,6 +517,7 @@
 }
 
 /* To standardize off-canvas selection color. */
+
 #drupal-off-canvas ::-moz-selection,
 #drupal-off-canvas ::selection {
   color: inherit;
diff --git a/core/misc/dialog/off-canvas.reset.pcss.css b/core/misc/dialog/off-canvas.reset.pcss.css
new file mode 100644
index 0000000000..12222cafd3
--- /dev/null
+++ b/core/misc/dialog/off-canvas.reset.pcss.css
@@ -0,0 +1,482 @@
+/**
+ * @file
+ * Reset most HTML elements styles for the off-canvas dialog.
+ *
+ * This is a generic reset. Drupal-specific classes are reset in components.
+ */
+
+/**
+ * All HTML elements that could be used in off-canvas except div, bdo, bdi,
+ * data, svg, map and math.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+ */
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & button,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & main,
+  & menu,
+  & meter,
+  & nav,
+  & output,
+  & progress,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & select,
+  & textarea {
+    all: initial;
+    box-sizing: border-box;
+    text-shadow: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: initial;
+
+    &:after,
+    &:before {
+      all: initial;
+      box-sizing: border-box;
+      text-shadow: none;
+      -webkit-font-smoothing: antialiased;
+      -webkit-tap-highlight-color: initial;
+    }
+  }
+}
+
+/* Reset size and position on elements. */
+#drupal-off-canvas a,
+#drupal-off-canvas abbr,
+#drupal-off-canvas acronym,
+#drupal-off-canvas address,
+#drupal-off-canvas applet,
+#drupal-off-canvas article,
+#drupal-off-canvas aside,
+#drupal-off-canvas audio,
+#drupal-off-canvas b,
+#drupal-off-canvas big,
+#drupal-off-canvas blockquote,
+#drupal-off-canvas body,
+#drupal-off-canvas canvas,
+#drupal-off-canvas caption,
+#drupal-off-canvas cite,
+#drupal-off-canvas code,
+#drupal-off-canvas dd,
+#drupal-off-canvas del,
+#drupal-off-canvas dfn,
+#drupal-off-canvas dialog,
+#drupal-off-canvas dl,
+#drupal-off-canvas dt,
+#drupal-off-canvas em,
+#drupal-off-canvas embed,
+#drupal-off-canvas fieldset,
+#drupal-off-canvas figcaption,
+#drupal-off-canvas figure,
+#drupal-off-canvas footer,
+#drupal-off-canvas form,
+#drupal-off-canvas h1,
+#drupal-off-canvas h2,
+#drupal-off-canvas h3,
+#drupal-off-canvas h4,
+#drupal-off-canvas h5,
+#drupal-off-canvas h6,
+#drupal-off-canvas header,
+#drupal-off-canvas hgroup,
+#drupal-off-canvas hr,
+#drupal-off-canvas html,
+#drupal-off-canvas i,
+#drupal-off-canvas iframe,
+#drupal-off-canvas img,
+#drupal-off-canvas ins,
+#drupal-off-canvas kbd,
+#drupal-off-canvas label,
+#drupal-off-canvas legend,
+#drupal-off-canvas li,
+#drupal-off-canvas main,
+#drupal-off-canvas mark,
+#drupal-off-canvas menu,
+#drupal-off-canvas meter,
+#drupal-off-canvas nav,
+#drupal-off-canvas object,
+#drupal-off-canvas ol,
+#drupal-off-canvas output,
+#drupal-off-canvas p,
+#drupal-off-canvas pre,
+#drupal-off-canvas progress,
+#drupal-off-canvas q,
+#drupal-off-canvas rp,
+#drupal-off-canvas rt,
+#drupal-off-canvas s,
+#drupal-off-canvas samp,
+#drupal-off-canvas section,
+#drupal-off-canvas small,
+#drupal-off-canvas span,
+#drupal-off-canvas strike,
+#drupal-off-canvas strong,
+#drupal-off-canvas sub,
+#drupal-off-canvas sup,
+#drupal-off-canvas table,
+#drupal-off-canvas tbody,
+#drupal-off-canvas td,
+#drupal-off-canvas tfoot,
+#drupal-off-canvas th,
+#drupal-off-canvas thead,
+#drupal-off-canvas time,
+#drupal-off-canvas tr,
+#drupal-off-canvas tt,
+#drupal-off-canvas u,
+#drupal-off-canvas ul,
+#drupal-off-canvas var,
+#drupal-off-canvas video,
+#drupal-off-canvas xmp {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+}
+
+/*
+ * Override the default (display: inline) for browsers that do not recognize HTML5 tags.
+ * IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
+ */
+#drupal-off-canvas article,
+#drupal-off-canvas aside,
+#drupal-off-canvas figcaption,
+#drupal-off-canvas figure,
+#drupal-off-canvas footer,
+#drupal-off-canvas header,
+#drupal-off-canvas hgroup,
+#drupal-off-canvas main,
+#drupal-off-canvas menu,
+#drupal-off-canvas nav,
+#drupal-off-canvas section {
+  display: block;
+  border-radius: 0;
+  line-height: normal;
+}
+
+/*
+ * Makes browsers agree.
+ * IE + Opera = font-weight: bold.
+ * Gecko + WebKit = font-weight: bolder.
+ */
+#drupal-off-canvas b,
+#drupal-off-canvas strong {
+  font-weight: bold;
+}
+
+#drupal-off-canvas em,
+#drupal-off-canvas i {
+  font-style: italic;
+}
+
+#drupal-off-canvas img {
+  vertical-align: middle;
+  color: transparent;
+  font-size: 0;
+}
+
+#drupal-off-canvas ul,
+#drupal-off-canvas ol {
+  list-style: none;
+}
+
+/* reset table styling. */
+#drupal-off-canvas table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+#drupal-off-canvas table thead,
+#drupal-off-canvas table tbody,
+#drupal-off-canvas table tbody tr:nth-child(even),
+#drupal-off-canvas table tbody tr:nth-child(odd),
+#drupal-off-canvas table tfoot {
+  border: 0;
+  background: transparent none;
+}
+#drupal-off-canvas th,
+#drupal-off-canvas td,
+#drupal-off-canvas caption {
+  font-weight: normal;
+}
+#drupal-off-canvas q {
+  quotes: none;
+}
+#drupal-off-canvas q:before,
+#drupal-off-canvas q:after {
+  content: none;
+}
+#drupal-off-canvas sub,
+#drupal-off-canvas sup,
+#drupal-off-canvas small {
+  font-size: 75%;
+}
+#drupal-off-canvas sub,
+#drupal-off-canvas sup {
+  position: relative;
+  vertical-align: baseline;
+  line-height: 0;
+}
+#drupal-off-canvas sub {
+  bottom: -0.25em;
+}
+#drupal-off-canvas sup {
+  top: -0.5em;
+}
+
+/*
+ * For IE9. Without, occasionally draws shapes
+ * outside the boundaries of <svg> rectangle.
+ */
+#drupal-off-canvas svg {
+  overflow: hidden;
+}
+
+/* Specific resets for inputs. */
+#drupal-off-canvas input[type="search"]::-webkit-search-decoration {
+  display: none;
+}
+#drupal-off-canvas input {
+  margin: 0;
+  padding: 0;
+}
+#drupal-off-canvas input[type="checkbox"],
+#drupal-off-canvas input[type="radio"] {
+  position: static;
+  margin: 0;
+}
+#drupal-off-canvas input:invalid,
+#drupal-off-canvas button:invalid,
+#drupal-off-canvas select:invalid,
+#drupal-off-canvas textarea:invalid,
+#drupal-off-canvas input:focus,
+#drupal-off-canvas button:focus,
+#drupal-off-canvas select:focus,
+#drupal-off-canvas textarea:focus,
+#drupal-off-canvas input[type="file"]:focus,
+#drupal-off-canvas input[type="file"]:active,
+#drupal-off-canvas input[type="radio"]:focus,
+#drupal-off-canvas input[type="radio"]:active,
+#drupal-off-canvas input[type="checkbox"]:focus,
+#drupal-off-canvas input[type="checkbox"]:active {
+  z-index: 1;
+  box-shadow: none;
+}
+#drupal-off-canvas input[role="button"] {
+  cursor: pointer;
+}
+#drupal-off-canvas button,
+#drupal-off-canvas input[type="reset"],
+#drupal-off-canvas input[type="submit"],
+#drupal-off-canvas input[type="button"] {
+  display: inline-block;
+  overflow: visible;
+  cursor: pointer;
+  vertical-align: middle;
+  text-decoration: none;
+  border: 0;
+  outline: 0;
+  background-image: none;
+  text-shadow: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+#drupal-off-canvas button:hover,
+#drupal-off-canvas input[type="reset"]:hover,
+#drupal-off-canvas input[type="submit"]:hover,
+#drupal-off-canvas input[type="button"]:hover {
+  text-decoration: none;
+  background-image: none;
+}
+#drupal-off-canvas button:active,
+#drupal-off-canvas input[type="reset"]:active,
+#drupal-off-canvas input[type="submit"]:active,
+#drupal-off-canvas input[type="button"]:active {
+  border-color: grey;
+  background-image: none;
+  box-shadow: none;
+}
+#drupal-off-canvas button::-moz-focus-inner,
+#drupal-off-canvas input[type="reset"]::-moz-focus-inner,
+#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
+#drupal-off-canvas input[type="button"]::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+#drupal-off-canvas textarea,
+#drupal-off-canvas select,
+#drupal-off-canvas input[type="date"],
+#drupal-off-canvas input[type="datetime"],
+#drupal-off-canvas input[type="datetime-local"],
+#drupal-off-canvas input[type="email"],
+#drupal-off-canvas input[type="month"],
+#drupal-off-canvas input[type="number"],
+#drupal-off-canvas input[type="password"],
+#drupal-off-canvas input[type="search"],
+#drupal-off-canvas input[type="tel"],
+#drupal-off-canvas input[type="text"],
+#drupal-off-canvas input[type="time"],
+#drupal-off-canvas input[type="url"],
+#drupal-off-canvas input[type="week"] {
+  height: auto;
+  vertical-align: middle;
+  border-radius: 0;
+}
+#drupal-off-canvas textarea[disabled],
+#drupal-off-canvas select[disabled],
+#drupal-off-canvas input[type="date"][disabled],
+#drupal-off-canvas input[type="datetime"][disabled],
+#drupal-off-canvas input[type="datetime-local"][disabled],
+#drupal-off-canvas input[type="email"][disabled],
+#drupal-off-canvas input[type="month"][disabled],
+#drupal-off-canvas input[type="number"][disabled],
+#drupal-off-canvas input[type="password"][disabled],
+#drupal-off-canvas input[type="search"][disabled],
+#drupal-off-canvas input[type="tel"][disabled],
+#drupal-off-canvas input[type="text"][disabled],
+#drupal-off-canvas input[type="time"][disabled],
+#drupal-off-canvas input[type="url"][disabled],
+#drupal-off-canvas input[type="week"][disabled] {
+  background-color: grey;
+}
+#drupal-off-canvas input[type="hidden"] {
+  visibility: hidden;
+}
+#drupal-off-canvas button[disabled],
+#drupal-off-canvas input[disabled],
+#drupal-off-canvas select[disabled],
+#drupal-off-canvas select[disabled] option,
+#drupal-off-canvas select[disabled] optgroup,
+#drupal-off-canvas textarea[disabled] {
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  box-shadow: none;
+}
+#drupal-off-canvas input:placeholder,
+#drupal-off-canvas textarea:placeholder {
+  color: grey;
+}
+#drupal-off-canvas textarea,
+#drupal-off-canvas select[size],
+#drupal-off-canvas select[multiple] {
+  height: auto;
+}
+#drupal-off-canvas select[size="0"],
+#drupal-off-canvas select[size="1"] {
+  height: auto;
+}
+#drupal-off-canvas textarea {
+  overflow: auto;
+  width: 100%;
+  min-height: 40px;
+  resize: vertical;
+}
+#drupal-off-canvas optgroup {
+  color: black;
+  font-weight: normal;
+  font-style: normal;
+}
+#drupal-off-canvas optgroup::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+#drupal-off-canvas * button {
+  overflow: visible;
+  width: auto;
+  padding: 0;
+  vertical-align: middle;
+  text-decoration: none;
+  color: black;
+  border: 1px solid grey;
+  background: none;
+}
+#drupal-off-canvas * textarea,
+#drupal-off-canvas * select,
+#drupal-off-canvas *:not(div) textarea,
+#drupal-off-canvas *:not(div) select {
+  padding: 0;
+  vertical-align: top;
+  color: black;
+  border: 1px solid grey;
+  background: white;
+}
+
+/* To standardize off-canvas selection color. */
+#drupal-off-canvas ::-moz-selection,
+#drupal-off-canvas ::selection {
+  color: inherit;
+  background-color: rgba(175, 175, 175, 0.5);
+}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.base.css b/core/themes/stable/css/core/dialog/off-canvas.base.css
index b6de67a2f7..996ae6a9a6 100644
--- a/core/themes/stable/css/core/dialog/off-canvas.base.css
+++ b/core/themes/stable/css/core/dialog/off-canvas.base.css
@@ -1,19 +1,126 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
 /**
  * @file
  * Set base styles for the off-canvas dialog.
  */
 
 /* Set some global attributes. */
-#drupal-off-canvas *,
-#drupal-off-canvas *:not(div) {
+
+#drupal-off-canvas {
   color: #ddd;
   background: #444;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+}
+
+/**
+ * All HTML elements that could be used in off-canvas except div, bdo, bdi,
+ * data, svg, map and math.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+ */
+
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & button,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & main,
+  & menu,
+  & meter,
+  & nav,
+  & output,
+  & progress,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & select,
+  & textarea {
+    color: inherit;
+    background: inherit;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  }
 }
 
 /* Generic elements. */
+
 #drupal-off-canvas a,
 #drupal-off-canvas .link {
+  cursor: pointer;
   transition: color 0.5s ease;
   text-decoration: none;
   color: #85bef4;
@@ -29,14 +136,17 @@
 #drupal-off-canvas .link:hover {
   text-decoration: underline;
 }
+
 #drupal-off-canvas hr {
   height: 1px;
   background: #ccc;
 }
+
 #drupal-off-canvas summary,
 #drupal-off-canvas .fieldgroup:not(.form-composite) > legend {
   font-weight: bold;
 }
+
 #drupal-off-canvas h1,
 #drupal-off-canvas .heading-a {
   display: block;
@@ -44,6 +154,7 @@
   font-weight: bold;
   line-height: 1.875em;
 }
+
 #drupal-off-canvas h2,
 #drupal-off-canvas .heading-b {
   display: block;
@@ -51,6 +162,7 @@
   font-size: 1.385em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h3,
 #drupal-off-canvas .heading-c {
   display: block;
@@ -58,6 +170,7 @@
   font-size: 1.231em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h4,
 #drupal-off-canvas .heading-d {
   display: block;
@@ -65,6 +178,7 @@
   font-size: 1.154em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h5,
 #drupal-off-canvas .heading-e {
   display: block;
@@ -72,6 +186,7 @@
   font-size: 1.077em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h6,
 #drupal-off-canvas .heading-f {
   display: block;
@@ -79,52 +194,65 @@
   font-size: 1.077em;
   font-weight: bold;
 }
+
 #drupal-off-canvas p {
   margin: 1em 0;
 }
+
 #drupal-off-canvas dl {
   margin: 0 0 20px;
 }
+
 #drupal-off-canvas dl dd,
 #drupal-off-canvas dl dl {
   margin-bottom: 10px;
   margin-left: 20px; /* LTR */
 }
+
 [dir="rtl"] #drupal-off-canvas dl dd,
 [dir="rtl"] #drupal-off-canvas dl dl {
   margin-right: 20px;
 }
+
 #drupal-off-canvas blockquote {
   margin: 1em 40px;
 }
+
 #drupal-off-canvas address {
   font-style: italic;
 }
+
 #drupal-off-canvas u,
 #drupal-off-canvas ins {
   text-decoration: underline;
 }
+
 #drupal-off-canvas s,
 #drupal-off-canvas strike,
 #drupal-off-canvas del {
   text-decoration: line-through;
 }
+
 #drupal-off-canvas big {
   font-size: larger;
 }
+
 #drupal-off-canvas small {
   font-size: smaller;
 }
+
 #drupal-off-canvas sub {
   vertical-align: sub;
   font-size: smaller;
   line-height: normal;
 }
+
 #drupal-off-canvas sup {
   vertical-align: super;
   font-size: smaller;
   line-height: normal;
 }
+
 #drupal-off-canvas abbr,
 #drupal-off-canvas acronym {
   border-bottom: dotted 1px;
@@ -135,29 +263,48 @@
   list-style-type: disc;
   list-style-image: none;
 }
+
 [dir="rtl"] #drupal-off-canvas .messages__list {
   margin-right: 0;
 }
+
 #drupal-off-canvas ol {
   list-style-type: decimal;
 }
+
 #drupal-off-canvas ul li,
 #drupal-off-canvas ol li {
   display: block;
 }
+
 #drupal-off-canvas blockquote,
 #drupal-off-canvas code {
   margin: 20px 0;
 }
+
 #drupal-off-canvas pre {
   margin: 20px 0;
   white-space: pre-wrap;
 }
 
+#drupal-off-canvas details {
+  display: block;
+}
+
+#drupal-off-canvas summary {
+  display: list-item;
+}
+
+#drupal-off-canvas select::-ms-expand {
+  display: block;
+}
+
 /* Classes for hidden and visually hidden elements. See hidden.module.css. */
+
 #drupal-off-canvas .hidden {
   display: none;
 }
+
 #drupal-off-canvas .visually-hidden {
   position: absolute !important;
   overflow: hidden;
@@ -166,6 +313,7 @@
   height: 1px;
   word-wrap: normal;
 }
+
 #drupal-off-canvas .visually-hidden.focusable:active,
 #drupal-off-canvas .visually-hidden.focusable:focus {
   position: static !important;
@@ -174,58 +322,70 @@
   width: auto;
   height: auto;
 }
+
 #drupal-off-canvas .invisible {
   visibility: hidden;
 }
 
 /* Some system classes. See system.admin.css. */
+
 #drupal-off-canvas .panel {
   padding: 5px 5px 15px;
 }
+
 #drupal-off-canvas .panel__description {
   margin: 0 0 3px;
   padding: 2px 0 3px 0;
 }
+
 #drupal-off-canvas .compact-link {
   margin: 0 0 10px 0;
 }
+
 #drupal-off-canvas small .admin-link:before {
   content: " [";
 }
+
 #drupal-off-canvas small .admin-link:after {
   content: "]";
 }
 
 /* Override jQuery UI */
+
 #drupal-off-canvas .ui-widget-content a {
   color: #85bef4 !important;
 }
 
 /* Message styles */
+
 #drupal-off-canvas .messages {
   background: no-repeat 10px 17px;
 }
+
 [dir="rtl"] #drupal-off-canvas .messages {
   background-position: right 10px top 17px;
 }
+
 #drupal-off-canvas .messages abbr {
   color: #444;
 }
+
 #drupal-off-canvas .messages--status {
   color: #325e1c;
   background-color: #f3faef;
-  background-image: url(../../../images/core/icons/73b355/check.svg);
+  background-image: url(../icons/73b355/check.svg);
 }
+
 #drupal-off-canvas .messages--warning {
   color: #734c00;
   background-color: #fdf8ed;
-  background-image: url(../../../images/core/icons/e29700/warning.svg);
+  background-image: url(../icons/e29700/warning.svg);
 }
 
 #drupal-off-canvas .messages--error {
   color: #a51b00;
   background-color: #fcf4f2;
-  background-image: url(../../../images/core/icons/e32700/error.svg);
+  background-image: url(../icons/e32700/error.svg);
 }
 
 #drupal-off-canvas .messages--error div[role="alert"] {
diff --git a/core/themes/stable/css/core/dialog/off-canvas.base.pcss.css b/core/themes/stable/css/core/dialog/off-canvas.base.pcss.css
new file mode 100644
index 0000000000..4899574a50
--- /dev/null
+++ b/core/themes/stable/css/core/dialog/off-canvas.base.pcss.css
@@ -0,0 +1,340 @@
+/**
+ * @file
+ * Set base styles for the off-canvas dialog.
+ */
+
+/* Set some global attributes. */
+#drupal-off-canvas {
+  color: #ddd;
+  background: #444;
+}
+/**
+ * All HTML elements that could be used in off-canvas except div, bdo, bdi,
+ * data, svg, map and math.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+ */
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & button,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & main,
+  & menu,
+  & meter,
+  & nav,
+  & output,
+  & progress,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & select,
+  & textarea {
+    color: inherit;
+    background: inherit;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  }
+}
+
+/* Generic elements. */
+#drupal-off-canvas a,
+#drupal-off-canvas .link {
+  cursor: pointer;
+  transition: color 0.5s ease;
+  text-decoration: none;
+  color: #85bef4;
+  border-bottom: none;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  font-size: inherit;
+  font-weight: normal;
+}
+
+#drupal-off-canvas a:focus,
+#drupal-off-canvas .link:focus,
+#drupal-off-canvas a:hover,
+#drupal-off-canvas .link:hover {
+  text-decoration: underline;
+}
+#drupal-off-canvas hr {
+  height: 1px;
+  background: #ccc;
+}
+#drupal-off-canvas summary,
+#drupal-off-canvas .fieldgroup:not(.form-composite) > legend {
+  font-weight: bold;
+}
+#drupal-off-canvas h1,
+#drupal-off-canvas .heading-a {
+  display: block;
+  font-size: 1.625em;
+  font-weight: bold;
+  line-height: 1.875em;
+}
+#drupal-off-canvas h2,
+#drupal-off-canvas .heading-b {
+  display: block;
+  margin: 10px 0;
+  font-size: 1.385em;
+  font-weight: bold;
+}
+#drupal-off-canvas h3,
+#drupal-off-canvas .heading-c {
+  display: block;
+  margin: 10px 0;
+  font-size: 1.231em;
+  font-weight: bold;
+}
+#drupal-off-canvas h4,
+#drupal-off-canvas .heading-d {
+  display: block;
+  margin: 10px 0;
+  font-size: 1.154em;
+  font-weight: bold;
+}
+#drupal-off-canvas h5,
+#drupal-off-canvas .heading-e {
+  display: block;
+  margin: 10px 0;
+  font-size: 1.077em;
+  font-weight: bold;
+}
+#drupal-off-canvas h6,
+#drupal-off-canvas .heading-f {
+  display: block;
+  margin: 10px 0;
+  font-size: 1.077em;
+  font-weight: bold;
+}
+#drupal-off-canvas p {
+  margin: 1em 0;
+}
+#drupal-off-canvas dl {
+  margin: 0 0 20px;
+}
+#drupal-off-canvas dl dd,
+#drupal-off-canvas dl dl {
+  margin-bottom: 10px;
+  margin-left: 20px; /* LTR */
+}
+[dir="rtl"] #drupal-off-canvas dl dd,
+[dir="rtl"] #drupal-off-canvas dl dl {
+  margin-right: 20px;
+}
+#drupal-off-canvas blockquote {
+  margin: 1em 40px;
+}
+#drupal-off-canvas address {
+  font-style: italic;
+}
+#drupal-off-canvas u,
+#drupal-off-canvas ins {
+  text-decoration: underline;
+}
+#drupal-off-canvas s,
+#drupal-off-canvas strike,
+#drupal-off-canvas del {
+  text-decoration: line-through;
+}
+#drupal-off-canvas big {
+  font-size: larger;
+}
+#drupal-off-canvas small {
+  font-size: smaller;
+}
+#drupal-off-canvas sub {
+  vertical-align: sub;
+  font-size: smaller;
+  line-height: normal;
+}
+#drupal-off-canvas sup {
+  vertical-align: super;
+  font-size: smaller;
+  line-height: normal;
+}
+#drupal-off-canvas abbr,
+#drupal-off-canvas acronym {
+  border-bottom: dotted 1px;
+  background: transparent;
+}
+
+#drupal-off-canvas ul {
+  list-style-type: disc;
+  list-style-image: none;
+}
+[dir="rtl"] #drupal-off-canvas .messages__list {
+  margin-right: 0;
+}
+#drupal-off-canvas ol {
+  list-style-type: decimal;
+}
+#drupal-off-canvas ul li,
+#drupal-off-canvas ol li {
+  display: block;
+}
+#drupal-off-canvas blockquote,
+#drupal-off-canvas code {
+  margin: 20px 0;
+}
+#drupal-off-canvas pre {
+  margin: 20px 0;
+  white-space: pre-wrap;
+}
+#drupal-off-canvas details {
+  display: block;
+}
+#drupal-off-canvas summary {
+  display: list-item;
+}
+
+#drupal-off-canvas select::-ms-expand {
+  display: block;
+}
+
+/* Classes for hidden and visually hidden elements. See hidden.module.css. */
+#drupal-off-canvas .hidden {
+  display: none;
+}
+#drupal-off-canvas .visually-hidden {
+  position: absolute !important;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  width: 1px;
+  height: 1px;
+  word-wrap: normal;
+}
+#drupal-off-canvas .visually-hidden.focusable:active,
+#drupal-off-canvas .visually-hidden.focusable:focus {
+  position: static !important;
+  overflow: visible;
+  clip: auto;
+  width: auto;
+  height: auto;
+}
+#drupal-off-canvas .invisible {
+  visibility: hidden;
+}
+
+/* Some system classes. See system.admin.css. */
+#drupal-off-canvas .panel {
+  padding: 5px 5px 15px;
+}
+#drupal-off-canvas .panel__description {
+  margin: 0 0 3px;
+  padding: 2px 0 3px 0;
+}
+#drupal-off-canvas .compact-link {
+  margin: 0 0 10px 0;
+}
+#drupal-off-canvas small .admin-link:before {
+  content: " [";
+}
+#drupal-off-canvas small .admin-link:after {
+  content: "]";
+}
+
+/* Override jQuery UI */
+#drupal-off-canvas .ui-widget-content a {
+  color: #85bef4 !important;
+}
+
+/* Message styles */
+#drupal-off-canvas .messages {
+  background: no-repeat 10px 17px;
+}
+[dir="rtl"] #drupal-off-canvas .messages {
+  background-position: right 10px top 17px;
+}
+#drupal-off-canvas .messages abbr {
+  color: #444;
+}
+#drupal-off-canvas .messages--status {
+  color: #325e1c;
+  background-color: #f3faef;
+  background-image: url(../icons/73b355/check.svg);
+}
+#drupal-off-canvas .messages--warning {
+  color: #734c00;
+  background-color: #fdf8ed;
+  background-image: url(../icons/e29700/warning.svg);
+}
+
+#drupal-off-canvas .messages--error {
+  color: #a51b00;
+  background-color: #fcf4f2;
+  background-image: url(../icons/e32700/error.svg);
+}
+
+#drupal-off-canvas .messages--error div[role="alert"] {
+  color: inherit;
+  background: transparent;
+}
diff --git a/core/themes/stable/css/core/dialog/off-canvas.reset.css b/core/themes/stable/css/core/dialog/off-canvas.reset.css
index 6c16f3ddd6..a5f528a317 100644
--- a/core/themes/stable/css/core/dialog/off-canvas.reset.css
+++ b/core/themes/stable/css/core/dialog/off-canvas.reset.css
@@ -1,3 +1,10 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/2815083
+ * @preserve
+ */
+
 /**
  * @file
  * Reset most HTML elements styles for the off-canvas dialog.
@@ -6,21 +13,117 @@
  */
 
 /**
- * Do not include div in then initial overrides because including div will
- * cause the need for many more overrides in this file.
+ * All HTML elements that could be used in off-canvas except div, bdo, bdi,
+ * data, svg, map and math.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
  */
-#drupal-off-canvas *:not(div),
-#drupal-off-canvas *:not(svg *),
-#drupal-off-canvas *:after,
-#drupal-off-canvas *:before {
-  all: initial;
-  box-sizing: border-box;
-  text-shadow: none;
-  -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: initial;
+
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & button,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & main,
+  & menu,
+  & meter,
+  & nav,
+  & output,
+  & progress,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & select,
+  & textarea {
+    all: initial;
+    box-sizing: border-box;
+    text-shadow: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: initial;
+
+    &:after,
+    &:before {
+      all: initial;
+      box-sizing: border-box;
+      text-shadow: none;
+      -webkit-font-smoothing: antialiased;
+      -webkit-tap-highlight-color: initial;
+    }
+  }
 }
 
 /* Reset size and position on elements. */
+
 #drupal-off-canvas a,
 #drupal-off-canvas abbr,
 #drupal-off-canvas acronym,
@@ -115,6 +218,7 @@
  * Override the default (display: inline) for browsers that do not recognize HTML5 tags.
  * IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
  */
+
 #drupal-off-canvas article,
 #drupal-off-canvas aside,
 #drupal-off-canvas figcaption,
@@ -136,6 +240,7 @@
  * IE + Opera = font-weight: bold.
  * Gecko + WebKit = font-weight: bolder.
  */
+
 #drupal-off-canvas b,
 #drupal-off-canvas strong {
   font-weight: bold;
@@ -158,10 +263,12 @@
 }
 
 /* reset table styling. */
+
 #drupal-off-canvas table {
   border-spacing: 0;
   border-collapse: collapse;
 }
+
 #drupal-off-canvas table thead,
 #drupal-off-canvas table tbody,
 #drupal-off-canvas table tbody tr:nth-child(even),
@@ -170,32 +277,39 @@
   border: 0;
   background: transparent none;
 }
+
 #drupal-off-canvas th,
 #drupal-off-canvas td,
 #drupal-off-canvas caption {
   font-weight: normal;
 }
+
 #drupal-off-canvas q {
   quotes: none;
 }
+
 #drupal-off-canvas q:before,
 #drupal-off-canvas q:after {
   content: none;
 }
+
 #drupal-off-canvas sub,
 #drupal-off-canvas sup,
 #drupal-off-canvas small {
   font-size: 75%;
 }
+
 #drupal-off-canvas sub,
 #drupal-off-canvas sup {
   position: relative;
   vertical-align: baseline;
   line-height: 0;
 }
+
 #drupal-off-canvas sub {
   bottom: -0.25em;
 }
+
 #drupal-off-canvas sup {
   top: -0.5em;
 }
@@ -204,23 +318,28 @@
  * For IE9. Without, occasionally draws shapes
  * outside the boundaries of <svg> rectangle.
  */
+
 #drupal-off-canvas svg {
   overflow: hidden;
 }
 
 /* Specific resets for inputs. */
+
 #drupal-off-canvas input[type="search"]::-webkit-search-decoration {
   display: none;
 }
+
 #drupal-off-canvas input {
   margin: 0;
   padding: 0;
 }
+
 #drupal-off-canvas input[type="checkbox"],
 #drupal-off-canvas input[type="radio"] {
   position: static;
   margin: 0;
 }
+
 #drupal-off-canvas input:invalid,
 #drupal-off-canvas button:invalid,
 #drupal-off-canvas select:invalid,
@@ -238,9 +357,11 @@
   z-index: 1;
   box-shadow: none;
 }
+
 #drupal-off-canvas input[role="button"] {
   cursor: pointer;
 }
+
 #drupal-off-canvas button,
 #drupal-off-canvas input[type="reset"],
 #drupal-off-canvas input[type="submit"],
@@ -257,6 +378,7 @@
   -webkit-appearance: none;
   -moz-appearance: none;
 }
+
 #drupal-off-canvas button:hover,
 #drupal-off-canvas input[type="reset"]:hover,
 #drupal-off-canvas input[type="submit"]:hover,
@@ -264,6 +386,7 @@
   text-decoration: none;
   background-image: none;
 }
+
 #drupal-off-canvas button:active,
 #drupal-off-canvas input[type="reset"]:active,
 #drupal-off-canvas input[type="submit"]:active,
@@ -272,6 +395,7 @@
   background-image: none;
   box-shadow: none;
 }
+
 #drupal-off-canvas button::-moz-focus-inner,
 #drupal-off-canvas input[type="reset"]::-moz-focus-inner,
 #drupal-off-canvas input[type="submit"]::-moz-focus-inner,
@@ -279,6 +403,7 @@
   padding: 0;
   border: 0;
 }
+
 #drupal-off-canvas textarea,
 #drupal-off-canvas select,
 #drupal-off-canvas input[type="date"],
@@ -298,6 +423,7 @@
   vertical-align: middle;
   border-radius: 0;
 }
+
 #drupal-off-canvas textarea[disabled],
 #drupal-off-canvas select[disabled],
 #drupal-off-canvas input[type="date"][disabled],
@@ -315,9 +441,11 @@
 #drupal-off-canvas input[type="week"][disabled] {
   background-color: grey;
 }
+
 #drupal-off-canvas input[type="hidden"] {
   visibility: hidden;
 }
+
 #drupal-off-canvas button[disabled],
 #drupal-off-canvas input[disabled],
 #drupal-off-canvas select[disabled],
@@ -331,34 +459,41 @@
   user-select: none;
   box-shadow: none;
 }
+
 #drupal-off-canvas input:placeholder,
 #drupal-off-canvas textarea:placeholder {
   color: grey;
 }
+
 #drupal-off-canvas textarea,
 #drupal-off-canvas select[size],
 #drupal-off-canvas select[multiple] {
   height: auto;
 }
+
 #drupal-off-canvas select[size="0"],
 #drupal-off-canvas select[size="1"] {
   height: auto;
 }
+
 #drupal-off-canvas textarea {
   overflow: auto;
   width: 100%;
   min-height: 40px;
   resize: vertical;
 }
+
 #drupal-off-canvas optgroup {
   color: black;
   font-weight: normal;
   font-style: normal;
 }
+
 #drupal-off-canvas optgroup::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
+
 #drupal-off-canvas * button {
   overflow: visible;
   width: auto;
@@ -369,6 +504,7 @@
   border: 1px solid grey;
   background: none;
 }
+
 #drupal-off-canvas * textarea,
 #drupal-off-canvas * select,
 #drupal-off-canvas *:not(div) textarea,
@@ -381,6 +517,7 @@
 }
 
 /* To standardize off-canvas selection color. */
+
 #drupal-off-canvas ::-moz-selection,
 #drupal-off-canvas ::selection {
   color: inherit;
diff --git a/core/themes/stable/css/core/dialog/off-canvas.reset.pcss.css b/core/themes/stable/css/core/dialog/off-canvas.reset.pcss.css
new file mode 100644
index 0000000000..12222cafd3
--- /dev/null
+++ b/core/themes/stable/css/core/dialog/off-canvas.reset.pcss.css
@@ -0,0 +1,482 @@
+/**
+ * @file
+ * Reset most HTML elements styles for the off-canvas dialog.
+ *
+ * This is a generic reset. Drupal-specific classes are reset in components.
+ */
+
+/**
+ * All HTML elements that could be used in off-canvas except div, bdo, bdi,
+ * data, svg, map and math.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+ */
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & button,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & main,
+  & menu,
+  & meter,
+  & nav,
+  & output,
+  & progress,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & select,
+  & textarea {
+    all: initial;
+    box-sizing: border-box;
+    text-shadow: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: initial;
+
+    &:after,
+    &:before {
+      all: initial;
+      box-sizing: border-box;
+      text-shadow: none;
+      -webkit-font-smoothing: antialiased;
+      -webkit-tap-highlight-color: initial;
+    }
+  }
+}
+
+/* Reset size and position on elements. */
+#drupal-off-canvas a,
+#drupal-off-canvas abbr,
+#drupal-off-canvas acronym,
+#drupal-off-canvas address,
+#drupal-off-canvas applet,
+#drupal-off-canvas article,
+#drupal-off-canvas aside,
+#drupal-off-canvas audio,
+#drupal-off-canvas b,
+#drupal-off-canvas big,
+#drupal-off-canvas blockquote,
+#drupal-off-canvas body,
+#drupal-off-canvas canvas,
+#drupal-off-canvas caption,
+#drupal-off-canvas cite,
+#drupal-off-canvas code,
+#drupal-off-canvas dd,
+#drupal-off-canvas del,
+#drupal-off-canvas dfn,
+#drupal-off-canvas dialog,
+#drupal-off-canvas dl,
+#drupal-off-canvas dt,
+#drupal-off-canvas em,
+#drupal-off-canvas embed,
+#drupal-off-canvas fieldset,
+#drupal-off-canvas figcaption,
+#drupal-off-canvas figure,
+#drupal-off-canvas footer,
+#drupal-off-canvas form,
+#drupal-off-canvas h1,
+#drupal-off-canvas h2,
+#drupal-off-canvas h3,
+#drupal-off-canvas h4,
+#drupal-off-canvas h5,
+#drupal-off-canvas h6,
+#drupal-off-canvas header,
+#drupal-off-canvas hgroup,
+#drupal-off-canvas hr,
+#drupal-off-canvas html,
+#drupal-off-canvas i,
+#drupal-off-canvas iframe,
+#drupal-off-canvas img,
+#drupal-off-canvas ins,
+#drupal-off-canvas kbd,
+#drupal-off-canvas label,
+#drupal-off-canvas legend,
+#drupal-off-canvas li,
+#drupal-off-canvas main,
+#drupal-off-canvas mark,
+#drupal-off-canvas menu,
+#drupal-off-canvas meter,
+#drupal-off-canvas nav,
+#drupal-off-canvas object,
+#drupal-off-canvas ol,
+#drupal-off-canvas output,
+#drupal-off-canvas p,
+#drupal-off-canvas pre,
+#drupal-off-canvas progress,
+#drupal-off-canvas q,
+#drupal-off-canvas rp,
+#drupal-off-canvas rt,
+#drupal-off-canvas s,
+#drupal-off-canvas samp,
+#drupal-off-canvas section,
+#drupal-off-canvas small,
+#drupal-off-canvas span,
+#drupal-off-canvas strike,
+#drupal-off-canvas strong,
+#drupal-off-canvas sub,
+#drupal-off-canvas sup,
+#drupal-off-canvas table,
+#drupal-off-canvas tbody,
+#drupal-off-canvas td,
+#drupal-off-canvas tfoot,
+#drupal-off-canvas th,
+#drupal-off-canvas thead,
+#drupal-off-canvas time,
+#drupal-off-canvas tr,
+#drupal-off-canvas tt,
+#drupal-off-canvas u,
+#drupal-off-canvas ul,
+#drupal-off-canvas var,
+#drupal-off-canvas video,
+#drupal-off-canvas xmp {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+}
+
+/*
+ * Override the default (display: inline) for browsers that do not recognize HTML5 tags.
+ * IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
+ */
+#drupal-off-canvas article,
+#drupal-off-canvas aside,
+#drupal-off-canvas figcaption,
+#drupal-off-canvas figure,
+#drupal-off-canvas footer,
+#drupal-off-canvas header,
+#drupal-off-canvas hgroup,
+#drupal-off-canvas main,
+#drupal-off-canvas menu,
+#drupal-off-canvas nav,
+#drupal-off-canvas section {
+  display: block;
+  border-radius: 0;
+  line-height: normal;
+}
+
+/*
+ * Makes browsers agree.
+ * IE + Opera = font-weight: bold.
+ * Gecko + WebKit = font-weight: bolder.
+ */
+#drupal-off-canvas b,
+#drupal-off-canvas strong {
+  font-weight: bold;
+}
+
+#drupal-off-canvas em,
+#drupal-off-canvas i {
+  font-style: italic;
+}
+
+#drupal-off-canvas img {
+  vertical-align: middle;
+  color: transparent;
+  font-size: 0;
+}
+
+#drupal-off-canvas ul,
+#drupal-off-canvas ol {
+  list-style: none;
+}
+
+/* reset table styling. */
+#drupal-off-canvas table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+#drupal-off-canvas table thead,
+#drupal-off-canvas table tbody,
+#drupal-off-canvas table tbody tr:nth-child(even),
+#drupal-off-canvas table tbody tr:nth-child(odd),
+#drupal-off-canvas table tfoot {
+  border: 0;
+  background: transparent none;
+}
+#drupal-off-canvas th,
+#drupal-off-canvas td,
+#drupal-off-canvas caption {
+  font-weight: normal;
+}
+#drupal-off-canvas q {
+  quotes: none;
+}
+#drupal-off-canvas q:before,
+#drupal-off-canvas q:after {
+  content: none;
+}
+#drupal-off-canvas sub,
+#drupal-off-canvas sup,
+#drupal-off-canvas small {
+  font-size: 75%;
+}
+#drupal-off-canvas sub,
+#drupal-off-canvas sup {
+  position: relative;
+  vertical-align: baseline;
+  line-height: 0;
+}
+#drupal-off-canvas sub {
+  bottom: -0.25em;
+}
+#drupal-off-canvas sup {
+  top: -0.5em;
+}
+
+/*
+ * For IE9. Without, occasionally draws shapes
+ * outside the boundaries of <svg> rectangle.
+ */
+#drupal-off-canvas svg {
+  overflow: hidden;
+}
+
+/* Specific resets for inputs. */
+#drupal-off-canvas input[type="search"]::-webkit-search-decoration {
+  display: none;
+}
+#drupal-off-canvas input {
+  margin: 0;
+  padding: 0;
+}
+#drupal-off-canvas input[type="checkbox"],
+#drupal-off-canvas input[type="radio"] {
+  position: static;
+  margin: 0;
+}
+#drupal-off-canvas input:invalid,
+#drupal-off-canvas button:invalid,
+#drupal-off-canvas select:invalid,
+#drupal-off-canvas textarea:invalid,
+#drupal-off-canvas input:focus,
+#drupal-off-canvas button:focus,
+#drupal-off-canvas select:focus,
+#drupal-off-canvas textarea:focus,
+#drupal-off-canvas input[type="file"]:focus,
+#drupal-off-canvas input[type="file"]:active,
+#drupal-off-canvas input[type="radio"]:focus,
+#drupal-off-canvas input[type="radio"]:active,
+#drupal-off-canvas input[type="checkbox"]:focus,
+#drupal-off-canvas input[type="checkbox"]:active {
+  z-index: 1;
+  box-shadow: none;
+}
+#drupal-off-canvas input[role="button"] {
+  cursor: pointer;
+}
+#drupal-off-canvas button,
+#drupal-off-canvas input[type="reset"],
+#drupal-off-canvas input[type="submit"],
+#drupal-off-canvas input[type="button"] {
+  display: inline-block;
+  overflow: visible;
+  cursor: pointer;
+  vertical-align: middle;
+  text-decoration: none;
+  border: 0;
+  outline: 0;
+  background-image: none;
+  text-shadow: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+#drupal-off-canvas button:hover,
+#drupal-off-canvas input[type="reset"]:hover,
+#drupal-off-canvas input[type="submit"]:hover,
+#drupal-off-canvas input[type="button"]:hover {
+  text-decoration: none;
+  background-image: none;
+}
+#drupal-off-canvas button:active,
+#drupal-off-canvas input[type="reset"]:active,
+#drupal-off-canvas input[type="submit"]:active,
+#drupal-off-canvas input[type="button"]:active {
+  border-color: grey;
+  background-image: none;
+  box-shadow: none;
+}
+#drupal-off-canvas button::-moz-focus-inner,
+#drupal-off-canvas input[type="reset"]::-moz-focus-inner,
+#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
+#drupal-off-canvas input[type="button"]::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+#drupal-off-canvas textarea,
+#drupal-off-canvas select,
+#drupal-off-canvas input[type="date"],
+#drupal-off-canvas input[type="datetime"],
+#drupal-off-canvas input[type="datetime-local"],
+#drupal-off-canvas input[type="email"],
+#drupal-off-canvas input[type="month"],
+#drupal-off-canvas input[type="number"],
+#drupal-off-canvas input[type="password"],
+#drupal-off-canvas input[type="search"],
+#drupal-off-canvas input[type="tel"],
+#drupal-off-canvas input[type="text"],
+#drupal-off-canvas input[type="time"],
+#drupal-off-canvas input[type="url"],
+#drupal-off-canvas input[type="week"] {
+  height: auto;
+  vertical-align: middle;
+  border-radius: 0;
+}
+#drupal-off-canvas textarea[disabled],
+#drupal-off-canvas select[disabled],
+#drupal-off-canvas input[type="date"][disabled],
+#drupal-off-canvas input[type="datetime"][disabled],
+#drupal-off-canvas input[type="datetime-local"][disabled],
+#drupal-off-canvas input[type="email"][disabled],
+#drupal-off-canvas input[type="month"][disabled],
+#drupal-off-canvas input[type="number"][disabled],
+#drupal-off-canvas input[type="password"][disabled],
+#drupal-off-canvas input[type="search"][disabled],
+#drupal-off-canvas input[type="tel"][disabled],
+#drupal-off-canvas input[type="text"][disabled],
+#drupal-off-canvas input[type="time"][disabled],
+#drupal-off-canvas input[type="url"][disabled],
+#drupal-off-canvas input[type="week"][disabled] {
+  background-color: grey;
+}
+#drupal-off-canvas input[type="hidden"] {
+  visibility: hidden;
+}
+#drupal-off-canvas button[disabled],
+#drupal-off-canvas input[disabled],
+#drupal-off-canvas select[disabled],
+#drupal-off-canvas select[disabled] option,
+#drupal-off-canvas select[disabled] optgroup,
+#drupal-off-canvas textarea[disabled] {
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  box-shadow: none;
+}
+#drupal-off-canvas input:placeholder,
+#drupal-off-canvas textarea:placeholder {
+  color: grey;
+}
+#drupal-off-canvas textarea,
+#drupal-off-canvas select[size],
+#drupal-off-canvas select[multiple] {
+  height: auto;
+}
+#drupal-off-canvas select[size="0"],
+#drupal-off-canvas select[size="1"] {
+  height: auto;
+}
+#drupal-off-canvas textarea {
+  overflow: auto;
+  width: 100%;
+  min-height: 40px;
+  resize: vertical;
+}
+#drupal-off-canvas optgroup {
+  color: black;
+  font-weight: normal;
+  font-style: normal;
+}
+#drupal-off-canvas optgroup::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+#drupal-off-canvas * button {
+  overflow: visible;
+  width: auto;
+  padding: 0;
+  vertical-align: middle;
+  text-decoration: none;
+  color: black;
+  border: 1px solid grey;
+  background: none;
+}
+#drupal-off-canvas * textarea,
+#drupal-off-canvas * select,
+#drupal-off-canvas *:not(div) textarea,
+#drupal-off-canvas *:not(div) select {
+  padding: 0;
+  vertical-align: top;
+  color: black;
+  border: 1px solid grey;
+  background: white;
+}
+
+/* To standardize off-canvas selection color. */
+#drupal-off-canvas ::-moz-selection,
+#drupal-off-canvas ::selection {
+  color: inherit;
+  background-color: rgba(175, 175, 175, 0.5);
+}