@castlabs/ui 6.0.3 → 7.0.1

package/src/styles/abstracts/spacing.scss

@@ -10,8 +10,8 @@ $spacing-micro: px(4);
 $spacing-tiny: px(8);
 $spacing-small: px(16);
 $spacing-medium: px(24);
-$spacing-large: px(48);
-$spacing-huge: px(64);
+$spacing-large: px(32);
+$spacing-huge: px(48);
 
 $header-nav-height: px(40);
 $header-headline-height: px(80);

package/src/styles/abstracts/tools.scss

@@ -33,85 +33,3 @@
     #{$property}: $new-value;
   }
 }
-
-/// Add a fontawesome icon via codepoint.
-///
-/// @example scss
-///   @include cl-fontawesome('\f2bd');
-///
-/// @param {value} $content UTF8 codepoint.
-/// @output Property clause.
-@mixin cl-fontawesome($codepoint) {
-  content: $codepoint;
-  display: inline-block;
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 900;
-  line-height: 1;
-  position: relative;
-  top: 0.1em;
-}
-
-/// Add a fontawesome icon ::after an element.
-///
-/// @example scss
-///   @include cl-fontawesome-after('\f2bd', 0, .5em, .25em);
-///
-/// @param {value} $codepoint UTF8 codepoint.
-/// @param {value} $offset Optional horizontal offset (em). Defaults to 0.
-/// @param {value} $scale Optinal icon scale (font-size) of the icon. Defaults to 1.
-/// @param {value} $top Optional vertical offset (em). Defaults to 0.
-/// @output ::after element.
-@mixin cl-fontawesome-after($codepoint, $offset: 0, $scale: 1em, $top: 0) {
-  $cl-fontawesome-box: 1em;
-
-  margin-right: $cl-fontawesome-box;
-  white-space: nowrap;
-
-  &::after {
-    @include cl-fontawesome($codepoint);
-
-    & {
-      @include set-property-if-not(font-size, 1em, $scale);
-
-      font-weight: 400;
-      left: $offset;
-      opacity: 0.5;
-      position: relative;
-      top: $top;
-      width: 0;
-    }
-  }
-}
-
-/// Add a fontawesome icon ::before an element.
-///
-/// @example scss
-///   @include cl-fontawesome-before('\f2bd', 0, .5em, .25em);
-///
-/// @param {value} $codepoint UTF8 codepoint.
-/// @param {value} $offset Optional horizontal offset (em). Defaults to 0.
-/// @param {value} $scale Optinal icon scale (font-size) of the icon. Defaults to 1.
-/// @param {value} $top Optional vertical offset (em). Defaults to 0.
-/// @output ::before element.
-@mixin cl-fontawesome-before($codepoint, $offset: 0, $scale: 1em, $top: 0) {
-  $cl-fontawesome-box: 1em;
-
-  margin-left: $cl-fontawesome-box;
-  white-space: nowrap;
-
-  &::before {
-    @include cl-fontawesome($codepoint);
-
-    & {
-      @include set-property-if-not(font-size, 1em, $scale);
-
-      font-weight: 400;
-      opacity: 0.5;
-      position: relative;
-      right: $cl-fontawesome-box - $offset;
-      text-align: right;
-      top: $top;
-      width: 0;
-    }
-  }
-}

package/src/styles/assets/fontawesome.scss

@@ -0,0 +1,2 @@
+@import '../../fonts/FontAwesome5/FontAwesome5';
+@import './fontawesome.variables';

package/src/styles/assets/fontawesome.variables.scss

@@ -0,0 +1,88 @@
+/// Add a fontawesome icon via codepoint.
+///
+/// @example scss
+///   @include cl-fontawesome('\f2bd');
+///
+/// @param {value} $content UTF8 codepoint.
+/// @output Property clause.
+@mixin cl-fontawesome($codepoint) {
+  content: $codepoint;
+  display: inline-block;
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+  line-height: 1;
+}
+
+/// Add a fontawesome icon ::after an element.
+///
+/// @example scss
+///   @include cl-fontawesome-after('\f2bd', 0, .5em, .25em);
+///
+/// @param {value} $codepoint UTF8 codepoint.
+/// @param {value} $offset Optional horizontal offset (em). Defaults to 0.
+/// @param {value} $scale Optinal icon scale (font-size) of the icon. Defaults to 1.
+/// @param {value} $top Optional vertical offset (em). Defaults to 0.
+/// @output ::after element.
+@mixin cl-fontawesome-after($codepoint, $offset: 0, $scale: 1em, $top: 0) {
+  $cl-fontawesome-box: 1em;
+
+  margin-right: $cl-fontawesome-box;
+  white-space: nowrap;
+
+  &::after {
+    @include cl-fontawesome($codepoint);
+
+    @include set-property-if-not(font-size, 1em, $scale);
+
+    font-weight: 400;
+    left: $offset;
+    position: relative;
+    top: $top;
+    width: 0;
+  }
+}
+
+/// Add a fontawesome icon ::before an element.
+///
+/// @example scss
+///   @include cl-fontawesome-before('\f2bd', 0, .5em, .25em);
+///
+/// @param {value} $codepoint UTF8 codepoint.
+/// @param {value} $offset Optional horizontal offset (em). Defaults to 0.
+/// @param {value} $scale Optinal icon scale (font-size) of the icon. Defaults to 1.
+/// @param {value} $top Optional vertical offset (em). Defaults to 0.
+/// @output ::before element.
+@mixin cl-fontawesome-before($codepoint, $offset: 0, $scale: 1em, $top: 0) {
+  $cl-fontawesome-box: 1em;
+
+  margin-left: $cl-fontawesome-box;
+  white-space: nowrap;
+
+  &::before {
+    @include cl-fontawesome($codepoint);
+
+    @include set-property-if-not(font-size, 1em, $scale);
+
+    font-weight: 400;
+    position: relative;
+    right: $cl-fontawesome-box - $offset;
+    text-align: right;
+    top: $top;
+    width: 0;
+  }
+}
+
+@mixin cl-fontawesome-postfix($codepoint) {
+  margin-right: 1em;
+
+  &::after {
+    @include cl-fontawesome($codepoint);
+
+    color: $color-ci-clay;
+    font-weight: 400;
+    left: 0.2em;
+    position: relative;
+    top: 0;
+    width: 0;
+  }
+}

package/src/styles/assets/logo.scss

@@ -6,23 +6,29 @@
 // This file contains inline css assets.
 
 .cl-asset-logo {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzI2IgogICB2ZXJzaW9uPSIxLjEiCiAgIHZpZXdCb3g9IjAgMCAyNTAgNTAiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTMyIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzAiIC8+CiAgPHN0eWxlCiAgICAgaWQ9InN0eWxlMiIKICAgICB0eXBlPSJ0ZXh0L2NzcyI+IC5zdDB7ZmlsbDojRDIyMzJBO30gLnN0MXtmaWxsOiNGRkZGRkY7fSA8L3N0eWxlPgogIDxnCiAgICAgc3R5bGU9ImZpbGw6IzI2MmEzNTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIKICAgICBpZD0iZzk4MyIKICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjI3NzI4NDgzLDAsMCwwLjI3NzI4NDgzLC0yOS42Njk0NzcsLTI3LjQ4ODM4OCkiPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiMyNjJhMzU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgICBpZD0icGF0aDk2NyIKICAgICAgIGQ9Im0gODE5LjksMTI1LjUgaCAyNy41IHYgMzkuNyBjIDcuOCwtNi4xIDE3LjQsLTkuOCAyOC42LC05LjggMjUuNywwIDQwLjUsMTUuNSA0MC41LDQ2LjkgMCwzMS40IC0xNS41LDQ4LjYgLTQzLjQsNDguNiAtMjcuOSwwIC0yMC43LC0zLjMgLTI4LjYsLTguMyBsIC0xLjcsNi41IGggLTIyLjkgeiBtIDQ2LjIsMTAyLjIgYyAxNC40LDAgMjEuOCwtNi43IDIxLjgsLTI0LjkgMCwtMTguMiAtNywtMjQgLTE5LjYsLTI0IC0xMi42LDAgLTE0LjQsMi42IC0yMC45LDYuNSB2IDM4LjMgYyA1LjcsMi44IDExLjgsNC4zIDE4LjcsNC4zIHoiCiAgICAgICBjbGFzcz0ic3QwIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiMyNjJhMzU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgICBpZD0icGF0aDk2OSIKICAgICAgIGQ9Im0gNDEwLDI0OS4yIGMgLTUsLTIuNSAtOC44LC02LjEgLTExLjUsLTEwLjYgLTIuNywtNC41IC00LjEsLTkuOCAtNC4xLC0xNS42IDAsLTUuOCAxLjMsLTExIDQsLTE1LjQgMi43LC00LjQgNi44LC03LjkgMTIuNCwtMTAuNCA1LjYsLTIuNSAxMi41LC0zLjcgMjEsLTMuNyA4LjUsMCAxMC4yLDAuMiAxNS44LDAuNSA1LjYsMC4zIDEwLjQsMC43IDE0LjQsMSBsIC0zLjYsMTUuMiBjIC01LjYsLTAuNyAtMTEuOSwtMS4xIC0xOC43LC0xLjEgLTYuOCwwIC0xMS4yLDEgLTE0LjIsMyAtMi45LDIgLTQuNCw0LjggLTQuNCw4LjQgMCwzLjYgMC42LDQuMSAxLjgsNS43IDEuMiwxLjYgMywyLjggNS4zLDMuNSAyLjMsMC44IDUuMSwxLjIgOC4zLDEuMiA0LjgsMCA4LjcsLTAuOSAxMiwtMi43IDMuMiwtMS44IDUuNiwtNC4zIDcuMiwtNy40IDEuNiwtMy4yIDIuNCwtNi44IDIuNCwtMTEgbCAyLjcsMjQuMSBjIC0xLjMsMy40IC0zLjQsNi41IC02LjQsOS40IC0zLDIuOSAtNi44LDUuMyAtMTEuNSw3LjEgLTQuNywxLjggLTkuOSwyLjcgLTE1LjgsMi43IC01LjksMCAtMTIuMywtMS4zIC0xNy4yLC0zLjggeiBNIDQ1Mi42LDE4MiBjIC0zLjcsLTIuNyAtOS4xLC00LjEgLTE2LjQsLTQuMSAtNy4zLDAgLTEwLjIsMC41IC0xNS4xLDEuNCAtNC45LDAuOSAtOS41LDIuMiAtMTMuNywzLjkgbCAtMi44LC0yMy4xIGMgNS41LC0xLjcgMTEuMiwtMi45IDE3LjEsLTMuOSA1LjksLTAuOSAxMS44LC0xLjQgMTcuOCwtMS40IDE1LjgsMCAyNy42LDMuNiAzNS4zLDEwLjggNy43LDcuMiAxMS41LDE3LjMgMTEuNSwzMC41IFYgMjUxIGggLTI4IGwgLTAuMiwtNTYuOSBjIDAsLTUuMyAtMS44LC05LjMgLTUuNSwtMTIgeiIKICAgICAgIGNsYXNzPSJzdDAiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6IzI2MmEzNTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIKICAgICAgIGlkPSJwYXRoOTcxIgogICAgICAgZD0ibSA1MTYuNywyNTAuOSBjIC02LjYsLTEuNCAtMTIuOSwtMy41IC0xOC45LC02LjQgbCA0LjEsLTIzIGMgNiwzIDEyLjMsNS4zIDE4LjksNi44IDYuNiwxLjUgMTMuMSwyLjMgMTkuNSwyLjMgNi40LDAgNS4zLC0wLjIgNy40LC0wLjYgMi4xLC0wLjQgMy44LC0xLjIgNS4xLC0yLjMgMS4zLC0xLjEgMiwtMi43IDIsLTQuNiAwLC0xLjkgLTAuNiwtMyAtMS43LC00LjEgLTEuMSwtMS4xIC0zLjEsLTIgLTUuOCwtMi44IC0yLjcsLTAuOCAtNi41LC0xLjYgLTExLjMsLTIuNCAtOS4xLC0xLjQgLTE2LjQsLTMuNCAtMjEuNywtNS44IC01LjMsLTIuNCAtOS4yLC01LjUgLTExLjYsLTkuMiAtMi40LC0zLjcgLTMuNSwtOC4zIC0zLjUsLTEzLjcgMC4xLC02LjYgMiwtMTIuMiA1LjcsLTE2LjggMy43LC00LjUgOC42LC03LjkgMTQuOCwtMTAuMSA2LjIsLTIuMiAxMy4xLC0zLjMgMjAuNywtMy4zIDcuNiwwIDEyLjQsMC42IDE4LjQsMS45IDYsMS4zIDExLjgsMi45IDE3LjUsNSBsIC0zLjYsMjIuOSBjIC01LC0yLjMgLTEwLjUsLTQuMiAtMTYuNSwtNS41IC01LjksLTEuMyAtMTEuOCwtMiAtMTcuNiwtMiAtNS44LDAgLTUuMSwwLjIgLTYuOSwwLjYgLTEuOCwwLjQgLTMuMSwxLjEgLTQuMSwyIC0xLDAuOSAtMS41LDIuMSAtMS42LDMuNyAwLDEuNCAwLjUsMi41IDEuNSwzLjQgMSwwLjkgMi43LDEuOCA1LjEsMi42IDIuNSwwLjggNi4xLDEuNiAxMC45LDIuNSA5LjQsMS43IDE2LjksMy45IDIyLjUsNi41IDUuNiwyLjYgOS42LDUuOSAxMiw5LjcgMi40LDMuOCAzLjcsOC41IDMuNywxNCAwLDYuOCAtMiwxMi40IC01LjgsMTcgLTMuOCw0LjYgLTguOSw4IC0xNS40LDEwLjMgLTYuNSwyLjMgLTEzLjcsMy40IC0yMS44LDMuNCAtOC4xLDAgLTE1LjUsLTAuNyAtMjIsLTIuMSB6IgogICAgICAgY2xhc3M9InN0MCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMjYyYTM1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgICAgaWQ9InBhdGg5NzMiCiAgICAgICBkPSJtIDYxNi42LDI0OS4zIGMgLTUsLTIuNSAtOC44LC02LjIgLTExLjUsLTExLjIgLTIuNiwtNC45IC0zLjksLTEwLjkgLTMuOSwtMTggdiAtNDAuMiBoIC0xMi40IHYgLTEyLjUgbCAxMC45LC0xMS4zIDE4LjUsLTE5LjggaCAxMC45IHYgMjAuNiBoIDI4LjggdiAyMyBoIC0yOC44IHYgMzYuMyBjIDAsMi42IDAuNCw0LjggMS4zLDYuNyAwLjksMS45IDIuMiwzLjMgMy45LDQuMiAxLjcsMSAzLjcsMS41IDYsMS41IDIuMywwIDUsLTAuMyA3LjcsLTAuOCAyLjYsLTAuNiA1LjIsLTEuNCA3LjgsLTIuNiBsIDUuMSwyMS4zIGMgLTMuOSwyLjEgLTguMiwzLjcgLTEyLjksNC45IC00LjcsMS4yIC05LjEsMS43IC0xMy40LDEuNyAtNy4xLDAgLTEzLjEsLTEuMyAtMTguMSwtMy44IHoiCiAgICAgICBjbGFzcz0ic3QwIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiMyNjJhMzU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgICBpZD0icGF0aDk3NSIKICAgICAgIGQ9Im0gNjcyLjQsMTI1LjUgaCAyOC4xIHYgMTI1LjQgaCAtMjguMSB6IgogICAgICAgY2xhc3M9InN0MCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMjYyYTM1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgICAgaWQ9InBhdGg5NzciCiAgICAgICBkPSJtIDcyOC4yLDI0OS4yIGMgLTUsLTIuNSAtOC44LC02LjEgLTExLjUsLTEwLjYgLTIuNywtNC41IC00LjEsLTkuOCAtNC4xLC0xNS42IDAsLTUuOCAxLjMsLTExIDQsLTE1LjQgMi43LC00LjQgNi44LC03LjkgMTIuNCwtMTAuNCA1LjYsLTIuNSAxMi41LC0zLjcgMjEsLTMuNyA4LjUsMCAxMC4yLDAuMiAxNS44LDAuNSA1LjYsMC4zIDEwLjQsMC43IDE0LjQsMSBsIC0zLjYsMTUuMiBjIC01LjYsLTAuNyAtMTEuOSwtMS4xIC0xOC43LC0xLjEgLTYuOCwwIC0xMS4yLDEgLTE0LjIsMyAtMi45LDIgLTQuNCw0LjggLTQuNCw4LjQgMCwzLjYgMC42LDQuMSAxLjgsNS43IDEuMiwxLjYgMywyLjggNS4zLDMuNSAyLjMsMC44IDUuMSwxLjIgOC4zLDEuMiA0LjgsMCA4LjcsLTAuOSAxMiwtMi43IDMuMiwtMS44IDUuNiwtNC4zIDcuMiwtNy40IDEuNiwtMy4yIDIuNCwtNi44IDIuNCwtMTEgbCAyLjcsMjQuMSBjIC0xLjMsMy40IC0zLjQsNi41IC02LjQsOS40IC0zLDIuOSAtNi44LDUuMyAtMTEuNSw3LjEgLTQuNywxLjggLTkuOSwyLjcgLTE1LjgsMi43IC01LjksMCAtMTIuMywtMS4zIC0xNy4yLC0zLjggeiBNIDc3MC45LDE4MiBjIC0zLjcsLTIuNyAtOS4xLC00LjEgLTE2LjQsLTQuMSAtNy4zLDAgLTEwLjIsMC41IC0xNS4xLDEuNCAtNC45LDAuOSAtOS41LDIuMiAtMTMuNywzLjkgbCAtMi44LC0yMy4xIGMgNS41LC0xLjcgMTEuMiwtMi45IDE3LjEsLTMuOSA1LjksLTAuOSAxMS44LC0xLjQgMTcuOCwtMS40IDE1LjgsMCAyNy42LDMuNiAzNS4zLDEwLjggNy43LDcuMiAxMS41LDE3LjMgMTEuNSwzMC41IFYgMjUxIGggLTI4IGwgLTAuMiwtNTYuOSBjIDAsLTUuMyAtMS44LC05LjMgLTUuNSwtMTIgeiIKICAgICAgIGNsYXNzPSJzdDAiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6IzI2MmEzNTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIKICAgICAgIGlkPSJwYXRoOTc5IgogICAgICAgZD0ibSA5NDMuNywyNTAuOSBjIC02LjYsLTEuNCAtMTIuOSwtMy41IC0xOC45LC02LjQgbCA0LjEsLTIzIGMgNiwzIDEyLjMsNS4zIDE4LjksNi44IDYuNiwxLjUgMTMuMSwyLjMgMTkuNSwyLjMgNi40LDAgNS4zLC0wLjIgNy40LC0wLjYgMi4xLC0wLjQgMy44LC0xLjIgNS4xLC0yLjMgMS4zLC0xLjEgMS45LC0yLjcgMS45LC00LjYgMCwtMS45IC0wLjYsLTMgLTEuNywtNC4xIC0xLjEsLTEuMSAtMy4xLC0yIC01LjgsLTIuOCAtMi43LC0wLjggLTYuNSwtMS42IC0xMS4zLC0yLjQgLTkuMSwtMS40IC0xNi40LC0zLjQgLTIxLjcsLTUuOCAtNS40LC0yLjQgLTkuMiwtNS41IC0xMS42LC05LjIgLTIuNCwtMy43IC0zLjUsLTguMyAtMy41LC0xMy43IDAuMSwtNi42IDIsLTEyLjIgNS43LC0xNi44IDMuNywtNC41IDguNiwtNy45IDE0LjgsLTEwLjEgNi4yLC0yLjIgMTMuMSwtMy4zIDIwLjcsLTMuMyA3LjYsMCAxMi40LDAuNiAxOC40LDEuOSA2LDEuMiAxMS44LDIuOSAxNy41LDUgbCAtMy42LDIyLjkgYyAtNSwtMi4zIC0xMC41LC00LjIgLTE2LjUsLTUuNSAtNiwtMS4zIC0xMS44LC0yIC0xNy42LC0yIC01LjgsMCAtNS4xLDAuMiAtNi45LDAuNiAtMS44LDAuNCAtMy4xLDEuMSAtNC4xLDIgLTAuOSwwLjkgLTEuNSwyLjEgLTEuNiwzLjcgMCwxLjQgMC41LDIuNSAxLjUsMy40IDEsMC45IDIuNywxLjggNS4xLDIuNiAyLjUsMC44IDYuMSwxLjYgMTAuOSwyLjUgOS40LDEuNyAxNi45LDMuOSAyMi41LDYuNSA1LjYsMi42IDkuNiw1LjkgMTIsOS43IDIuNCwzLjggMy43LDguNSAzLjcsMTQgMCw2LjggLTIsMTIuNCAtNS44LDE3IC0zLjgsNC42IC04LjksOCAtMTUuNCwxMC4zIC02LjQsMi4zIC0xMy43LDMuNCAtMjEuOCwzLjQgLTguMSwwIC0xNS41LC0wLjcgLTIyLC0yLjEgeiIKICAgICAgIGNsYXNzPSJzdDAiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6IzI2MmEzNTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIKICAgICAgIGlkPSJwYXRoOTgxIgogICAgICAgZD0ibSAzNjIuOCwyMjQuMiBjIC01LjQsMS45IC0xMC45LDIuOSAtMTYuNCwyLjkgLTUuNSwwIC0xMywtMS41IC0xOC40LC00LjQgLTUuNSwtMi45IC05LjgsLTcuMiAtMTMsLTEyLjcgLTMuMiwtNS41IC00LjcsLTEyLjEgLTQuNywtMTkuNyAwLC03LjYgMS41LC0xNC4xIDQuNiwtMTkuNyAzLjEsLTUuNSA3LjQsLTkuNyAxMi44LC0xMi43IDUuNCwtMi45IDExLjUsLTQuNCAxOC40LC00LjQgNi45LDAgNy4zLDAuNCAxMC45LDEuMyAzLjYsMC45IDcuMiwyLjIgMTAuOCwzLjkgMy42LDEuNyA3LjMsMy45IDExLDYuNiB2IDAgYyAwLDAgNy42LC0yNS41IDcuNiwtMjUuNSAtMy40LC0yLjEgLTYuOSwtMy45IC0xMC40LC01LjQgLTUuMSwtMi4yIC0xMC4zLC0zLjkgLTE1LjUsLTUgLTUuMiwtMS4xIC0xMC40LC0xLjYgLTE1LjgsLTEuNiAtMTIuMywwIC0yMy4zLDIuNSAtMzMuMSw3LjYgLTkuOCw1LjEgLTE3LjYsMTIuMyAtMjMuMiwyMS44IC01LjcsOS41IC04LjUsMjAuNSAtOC41LDMzLjIgMCwxMi43IDIuOSwyMy41IDguNywzMi45IDUuOCw5LjUgMTMuNywxNi44IDIzLjgsMjIgMTAuMSw1LjIgMjEuMiw3LjggMzMuNSw3LjggMTIuMywwIDE1LjcsLTEuMyAyMy40LC0zLjggNiwtMiAxMS45LC00LjggMTcuNiwtOC40IGwgLTcuNywtMjUuNiBjIC01LjYsMy45IC0xMS4xLDYuOSAtMTYuNSw4LjggeiIKICAgICAgIGNsYXNzPSJzdDAiIC8+CiAgPC9nPgogIDxjaXJjbGUKICAgICBzdHlsZT0iZmlsbDojMjYyYTM1O3N0cm9rZS13aWR0aDowLjI3NzI4NDgzO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgIGlkPSJjaXJjbGU5ODUiCiAgICAgcj0iMy44ODE5ODc2IgogICAgIGN5PSI0Ljk4MTY2NTYiCiAgICAgY3g9IjEzLjMzNzQwNSIKICAgICBjbGFzcz0ic3QwIiAvPgogIDxjaXJjbGUKICAgICBzdHlsZT0iZmlsbDojMjYyYTM1O3N0cm9rZS13aWR0aDowLjI3NzI4NDgzO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgIGlkPSJjaXJjbGU5ODciCiAgICAgcj0iNC4wNDgzNTg0IgogICAgIGN5PSI5LjAzMDAyMzYiCiAgICAgY3g9IjQuMDQ4MzU4OSIKICAgICBjbGFzcz0ic3QwIiAvPgogIDxjaXJjbGUKICAgICBzdHlsZT0iZmlsbDojMjYyYTM1O3N0cm9rZS13aWR0aDowLjI3NzI4NDgzO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgIGlkPSJjaXJjbGU5ODkiCiAgICAgcj0iMy4zODI4NzUiCiAgICAgY3k9IjEwLjk3MTAxOCIKICAgICBjeD0iMjAuNDA4MTY5IgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiMyNjJhMzU7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTk5MSIKICAgICByPSIzLjQzODMzMTgiCiAgICAgY3k9IjE0LjMyNjE2NiIKICAgICBjeD0iMTEuNzAxNDIyIgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiMyNjJhMzU7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTk5MyIKICAgICByPSIyLjg4Mzc2MjEiCiAgICAgY3k9IjE2LjgyMTczMiIKICAgICBjeD0iMjYuNzU3OTg4IgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiMyNjJhMzU7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTk5NSIKICAgICByPSIyLjk2Njk0NzYiCiAgICAgY3k9IjE5LjMxNzI5NSIKICAgICBjeD0iMTguODU1MzcxIgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiMyNjJhMzU7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTk5NyIKICAgICByPSIyLjQ2NzgzNDkiCiAgICAgY3k9IjIzLjE5OTI4MiIKICAgICBjeD0iMzIuMTkyNzcyIgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiMyNjJhMzU7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTk5OSIKICAgICByPSIyLjU1MTAyMDQiCiAgICAgY3k9IjI0LjM5MTYwNyIKICAgICBjeD0iMjQuNjIyODk2IgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiMyNjJhMzU7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTEwMDEiCiAgICAgcj0iMi4xMDczNjQ3IgogICAgIGN5PSIyOS41NzY4MyIKICAgICBjeD0iMzUuNTc1NjQ1IgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiMyNjJhMzU7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTEwMDMiCiAgICAgcj0iMi4xMDczNjQ3IgogICAgIGN5PSIyOS42MDQ1NTkiCiAgICAgY3g9IjI5LjI1MzU1MSIKICAgICBjbGFzcz0ic3QwIiAvPgogIDxjaXJjbGUKICAgICBzdHlsZT0iZmlsbDojMjYyYTM1O3N0cm9rZS13aWR0aDowLjI3NzI4NDgzO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgIGlkPSJjaXJjbGUxMDA1IgogICAgIHI9IjIuMDI0MTc5MiIKICAgICBjeT0iMzUuMDk0Nzk5IgogICAgIGN4PSIzMi40MTQ1OTMiCiAgICAgY2xhc3M9InN0MCIgLz4KICA8Y2lyY2xlCiAgICAgc3R5bGU9ImZpbGw6IzI2MmEzNTtzdHJva2Utd2lkdGg6MC4yNzcyODQ4MztmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIKICAgICBpZD0iY2lyY2xlMTAwNyIKICAgICByPSIxLjc0Njg5NDUiCiAgICAgY3k9IjM5LjI4MTgwMyIKICAgICBjeD0iMjguMjgzMDU2IgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiMyNjJhMzU7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTEwMDkiCiAgICAgcj0iMS42OTE0Mzc1IgogICAgIGN5PSI0Mi4xNjU1NjIiCiAgICAgY3g9IjIzLjczNTU4NiIKICAgICBjbGFzcz0ic3QwIiAvPgo8L3N2Zz4K');
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDExMTUuNiAzNzguNiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6ICMyNjJhMzU7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnPgogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTgxOS45LDEyNS41aDI3LjV2MzkuN2M3LjgtNi4xLDE3LjQtOS44LDI4LjYtOS44LDI1LjcsMCw0MC41LDE1LjUsNDAuNSw0Ni45cy0xNS41LDQ4LjYtNDMuNCw0OC42LTIwLjctMy4zLTI4LjYtOC4zbC0xLjcsNi41aC0yMi45di0xMjMuNlpNODY2LjEsMjI3LjdjMTQuNCwwLDIxLjgtNi43LDIxLjgtMjQuOXMtNy0yNC0xOS42LTI0LTE0LjQsMi42LTIwLjksNi41djM4LjNjNS43LDIuOCwxMS44LDQuMywxOC43LDQuM1oiLz4KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MTAsMjQ5LjJjLTUtMi41LTguOC02LjEtMTEuNS0xMC42cy00LjEtOS44LTQuMS0xNS42LDEuMy0xMSw0LTE1LjRjMi43LTQuNCw2LjgtNy45LDEyLjQtMTAuNCw1LjYtMi41LDEyLjUtMy43LDIxLTMuN3MxMC4yLjIsMTUuOC41YzUuNi4zLDEwLjQuNywxNC40LDFsLTMuNiwxNS4yYy01LjYtLjctMTEuOS0xLjEtMTguNy0xLjFzLTExLjIsMS0xNC4yLDNjLTIuOSwyLTQuNCw0LjgtNC40LDguNHMuNiw0LjEsMS44LDUuNywzLDIuOCw1LjMsMy41YzIuMy44LDUuMSwxLjIsOC4zLDEuMiw0LjgsMCw4LjctLjksMTItMi43LDMuMi0xLjgsNS42LTQuMyw3LjItNy40LDEuNi0zLjIsMi40LTYuOCwyLjQtMTFsMi43LDI0LjFjLTEuMywzLjQtMy40LDYuNS02LjQsOS40cy02LjgsNS4zLTExLjUsNy4xLTkuOSwyLjctMTUuOCwyLjctMTIuMy0xLjMtMTcuMi0zLjhaTTQ1Mi42LDE4MmMtMy43LTIuNy05LjEtNC4xLTE2LjQtNC4xcy0xMC4yLjUtMTUuMSwxLjQtOS41LDIuMi0xMy43LDMuOWwtMi44LTIzLjFjNS41LTEuNywxMS4yLTIuOSwxNy4xLTMuOSw1LjktLjksMTEuOC0xLjQsMTcuOC0xLjQsMTUuOCwwLDI3LjYsMy42LDM1LjMsMTAuOCw3LjcsNy4yLDExLjUsMTcuMywxMS41LDMwLjV2NTQuOWgtMjhsLS4yLTU2LjljMC01LjMtMS44LTkuMy01LjUtMTJaIi8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTE2LjcsMjUwLjljLTYuNi0xLjQtMTIuOS0zLjUtMTguOS02LjRsNC4xLTIzYzYsMywxMi4zLDUuMywxOC45LDYuOCw2LjYsMS41LDEzLjEsMi4zLDE5LjUsMi4zczUuMy0uMiw3LjQtLjYsMy44LTEuMiw1LjEtMi4zYzEuMy0xLjEsMi0yLjcsMi00LjZzLS42LTMtMS43LTQuMS0zLjEtMi01LjgtMi44Yy0yLjctLjgtNi41LTEuNi0xMS4zLTIuNC05LjEtMS40LTE2LjQtMy40LTIxLjctNS44cy05LjItNS41LTExLjYtOS4yYy0yLjQtMy43LTMuNS04LjMtMy41LTEzLjcuMS02LjYsMi0xMi4yLDUuNy0xNi44LDMuNy00LjUsOC42LTcuOSwxNC44LTEwLjEsNi4yLTIuMiwxMy4xLTMuMywyMC43LTMuM3MxMi40LjYsMTguNCwxLjksMTEuOCwyLjksMTcuNSw1bC0zLjYsMjIuOWMtNS0yLjMtMTAuNS00LjItMTYuNS01LjUtNS45LTEuMy0xMS44LTItMTcuNi0ycy01LjEuMi02LjkuNmMtMS44LjQtMy4xLDEuMS00LjEsMnMtMS41LDIuMS0xLjYsMy43YzAsMS40LjUsMi41LDEuNSwzLjRzMi43LDEuOCw1LjEsMi42YzIuNS44LDYuMSwxLjYsMTAuOSwyLjUsOS40LDEuNywxNi45LDMuOSwyMi41LDYuNSw1LjYsMi42LDkuNiw1LjksMTIsOS43LDIuNCwzLjgsMy43LDguNSwzLjcsMTQsMCw2LjgtMiwxMi40LTUuOCwxNy0zLjgsNC42LTguOSw4LTE1LjQsMTAuM3MtMTMuNywzLjQtMjEuOCwzLjQtMTUuNS0uNy0yMi0yLjFaIi8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjE2LjYsMjQ5LjNjLTUtMi41LTguOC02LjItMTEuNS0xMS4yLTIuNi00LjktMy45LTEwLjktMy45LTE4di00MC4yaC0xMi40di0xMi41bDEwLjktMTEuMywxOC41LTE5LjhoMTAuOXYyMC42aDI4Ljh2MjNoLTI4Ljh2MzYuM2MwLDIuNi40LDQuOCwxLjMsNi43LjksMS45LDIuMiwzLjMsMy45LDQuMiwxLjcsMSwzLjcsMS41LDYsMS41czUtLjMsNy43LS44YzIuNi0uNiw1LjItMS40LDcuOC0yLjZsNS4xLDIxLjNjLTMuOSwyLjEtOC4yLDMuNy0xMi45LDQuOXMtOS4xLDEuNy0xMy40LDEuN2MtNy4xLDAtMTMuMS0xLjMtMTguMS0zLjhaIi8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjcyLjQsMTI1LjVoMjguMXYxMjUuNGgtMjguMXYtMTI1LjRaIi8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNzI4LjIsMjQ5LjJjLTUtMi41LTguOC02LjEtMTEuNS0xMC42cy00LjEtOS44LTQuMS0xNS42LDEuMy0xMSw0LTE1LjRjMi43LTQuNCw2LjgtNy45LDEyLjQtMTAuNCw1LjYtMi41LDEyLjUtMy43LDIxLTMuN3MxMC4yLjIsMTUuOC41YzUuNi4zLDEwLjQuNywxNC40LDFsLTMuNiwxNS4yYy01LjYtLjctMTEuOS0xLjEtMTguNy0xLjFzLTExLjIsMS0xNC4yLDNjLTIuOSwyLTQuNCw0LjgtNC40LDguNHMuNiw0LjEsMS44LDUuNywzLDIuOCw1LjMsMy41YzIuMy44LDUuMSwxLjIsOC4zLDEuMiw0LjgsMCw4LjctLjksMTItMi43LDMuMi0xLjgsNS42LTQuMyw3LjItNy40LDEuNi0zLjIsMi40LTYuOCwyLjQtMTFsMi43LDI0LjFjLTEuMywzLjQtMy40LDYuNS02LjQsOS40cy02LjgsNS4zLTExLjUsNy4xLTkuOSwyLjctMTUuOCwyLjctMTIuMy0xLjMtMTcuMi0zLjhaTTc3MC45LDE4MmMtMy43LTIuNy05LjEtNC4xLTE2LjQtNC4xcy0xMC4yLjUtMTUuMSwxLjQtOS41LDIuMi0xMy43LDMuOWwtMi44LTIzLjFjNS41LTEuNywxMS4yLTIuOSwxNy4xLTMuOSw1LjktLjksMTEuOC0xLjQsMTcuOC0xLjQsMTUuOCwwLDI3LjYsMy42LDM1LjMsMTAuOCw3LjcsNy4yLDExLjUsMTcuMywxMS41LDMwLjV2NTQuOWgtMjhsLS4yLTU2LjljMC01LjMtMS44LTkuMy01LjUtMTJaIi8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOTQzLjcsMjUwLjljLTYuNi0xLjQtMTIuOS0zLjUtMTguOS02LjRsNC4xLTIzYzYsMywxMi4zLDUuMywxOC45LDYuOCw2LjYsMS41LDEzLjEsMi4zLDE5LjUsMi4zczUuMy0uMiw3LjQtLjZjMi4xLS40LDMuOC0xLjIsNS4xLTIuMywxLjMtMS4xLDEuOS0yLjcsMS45LTQuNnMtLjYtMy0xLjctNC4xLTMuMS0yLTUuOC0yLjhjLTIuNy0uOC02LjUtMS42LTExLjMtMi40LTkuMS0xLjQtMTYuNC0zLjQtMjEuNy01LjgtNS40LTIuNC05LjItNS41LTExLjYtOS4yLTIuNC0zLjctMy41LTguMy0zLjUtMTMuNy4xLTYuNiwyLTEyLjIsNS43LTE2LjgsMy43LTQuNSw4LjYtNy45LDE0LjgtMTAuMSw2LjItMi4yLDEzLjEtMy4zLDIwLjctMy4zczEyLjQuNiwxOC40LDEuOWM2LDEuMiwxMS44LDIuOSwxNy41LDVsLTMuNiwyMi45Yy01LTIuMy0xMC41LTQuMi0xNi41LTUuNS02LTEuMy0xMS44LTItMTcuNi0ycy01LjEuMi02LjkuNi0zLjEsMS4xLTQuMSwyYy0uOS45LTEuNSwyLjEtMS42LDMuNywwLDEuNC41LDIuNSwxLjUsMy40LDEsLjksMi43LDEuOCw1LjEsMi42LDIuNS44LDYuMSwxLjYsMTAuOSwyLjUsOS40LDEuNywxNi45LDMuOSwyMi41LDYuNSw1LjYsMi42LDkuNiw1LjksMTIsOS43czMuNyw4LjUsMy43LDE0YzAsNi44LTIsMTIuNC01LjgsMTctMy44LDQuNi04LjksOC0xNS40LDEwLjMtNi40LDIuMy0xMy43LDMuNC0yMS44LDMuNHMtMTUuNS0uNy0yMi0yLjFaIi8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzYyLjgsMjI0LjJjLTUuNCwxLjktMTAuOSwyLjktMTYuNCwyLjlzLTEzLTEuNS0xOC40LTQuNGMtNS41LTIuOS05LjgtNy4yLTEzLTEyLjctMy4yLTUuNS00LjctMTIuMS00LjctMTkuN3MxLjUtMTQuMSw0LjYtMTkuN2MzLjEtNS41LDcuNC05LjcsMTIuOC0xMi43LDUuNC0yLjksMTEuNS00LjQsMTguNC00LjRzNy4zLjQsMTAuOSwxLjNjMy42LjksNy4yLDIuMiwxMC44LDMuOSwzLjYsMS43LDcuMywzLjksMTEsNi42aDBzNy42LTI1LjUsNy42LTI1LjVjLTMuNC0yLjEtNi45LTMuOS0xMC40LTUuNC01LjEtMi4yLTEwLjMtMy45LTE1LjUtNS01LjItMS4xLTEwLjQtMS42LTE1LjgtMS42LTEyLjMsMC0yMy4zLDIuNS0zMy4xLDcuNi05LjgsNS4xLTE3LjYsMTIuMy0yMy4yLDIxLjgtNS43LDkuNS04LjUsMjAuNS04LjUsMzMuMnMyLjksMjMuNSw4LjcsMzIuOWM1LjgsOS41LDEzLjcsMTYuOCwyMy44LDIyLDEwLjEsNS4yLDIxLjIsNy44LDMzLjUsNy44czE1LjctMS4zLDIzLjQtMy44YzYtMiwxMS45LTQuOCwxNy42LTguNGwtNy43LTI1LjZjLTUuNiwzLjktMTEuMSw2LjktMTYuNSw4LjhaIi8+CiAgPC9nPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjE1NS4xIiBjeT0iMTE3LjEiIHI9IjE0Ii8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTIxLjYiIGN5PSIxMzEuNyIgcj0iMTQuNiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjE4MC42IiBjeT0iMTM4LjciIHI9IjEyLjIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxNDkuMiIgY3k9IjE1MC44IiByPSIxMi40Ii8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjAzLjUiIGN5PSIxNTkuOCIgcj0iMTAuNCIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjE3NSIgY3k9IjE2OC44IiByPSIxMC43Ii8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjIzLjEiIGN5PSIxODIuOCIgcj0iOC45Ii8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTk1LjgiIGN5PSIxODcuMSIgcj0iOS4yIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjM1LjMiIGN5PSIyMDUuOCIgcj0iNy42Ii8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjEyLjUiIGN5PSIyMDUuOSIgcj0iNy42Ii8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjIzLjkiIGN5PSIyMjUuNyIgcj0iNy4zIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjA5IiBjeT0iMjQwLjgiIHI9IjYuMyIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjE5Mi42IiBjeT0iMjUxLjIiIHI9IjYuMSIvPgo8L3N2Zz4K');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   display: inline-block;
-  height: 1em;
-  width: 5em;
+  height: 1em * 2;
+  margin-bottom: -1em;
+  position: relative;
+  top: -0.5em;
+  width: 2.95em * 2;
 }
 
 .cl-asset-logo-eggshell {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzI2IgogICB2ZXJzaW9uPSIxLjEiCiAgIHZpZXdCb3g9IjAgMCAyNTAgNTAiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTMyIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzAiIC8+CiAgPHN0eWxlCiAgICAgaWQ9InN0eWxlMiIKICAgICB0eXBlPSJ0ZXh0L2NzcyI+IC5zdDB7ZmlsbDojRDIyMzJBO30gLnN0MXtmaWxsOiNGRkZGRkY7fSA8L3N0eWxlPgogIDxnCiAgICAgc3R5bGU9ImZpbGw6I2ZiZjlmMjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIKICAgICBpZD0iZzk4MyIKICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjI3NzI4NDgzLDAsMCwwLjI3NzI4NDgzLC0yOS42Njk0NzcsLTI3LjQ4ODM4OCkiPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmYmY5ZjI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgICBpZD0icGF0aDk2NyIKICAgICAgIGQ9Im0gODE5LjksMTI1LjUgaCAyNy41IHYgMzkuNyBjIDcuOCwtNi4xIDE3LjQsLTkuOCAyOC42LC05LjggMjUuNywwIDQwLjUsMTUuNSA0MC41LDQ2LjkgMCwzMS40IC0xNS41LDQ4LjYgLTQzLjQsNDguNiAtMjcuOSwwIC0yMC43LC0zLjMgLTI4LjYsLTguMyBsIC0xLjcsNi41IGggLTIyLjkgeiBtIDQ2LjIsMTAyLjIgYyAxNC40LDAgMjEuOCwtNi43IDIxLjgsLTI0LjkgMCwtMTguMiAtNywtMjQgLTE5LjYsLTI0IC0xMi42LDAgLTE0LjQsMi42IC0yMC45LDYuNSB2IDM4LjMgYyA1LjcsMi44IDExLjgsNC4zIDE4LjcsNC4zIHoiCiAgICAgICBjbGFzcz0ic3QwIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmYmY5ZjI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgICBpZD0icGF0aDk2OSIKICAgICAgIGQ9Im0gNDEwLDI0OS4yIGMgLTUsLTIuNSAtOC44LC02LjEgLTExLjUsLTEwLjYgLTIuNywtNC41IC00LjEsLTkuOCAtNC4xLC0xNS42IDAsLTUuOCAxLjMsLTExIDQsLTE1LjQgMi43LC00LjQgNi44LC03LjkgMTIuNCwtMTAuNCA1LjYsLTIuNSAxMi41LC0zLjcgMjEsLTMuNyA4LjUsMCAxMC4yLDAuMiAxNS44LDAuNSA1LjYsMC4zIDEwLjQsMC43IDE0LjQsMSBsIC0zLjYsMTUuMiBjIC01LjYsLTAuNyAtMTEuOSwtMS4xIC0xOC43LC0xLjEgLTYuOCwwIC0xMS4yLDEgLTE0LjIsMyAtMi45LDIgLTQuNCw0LjggLTQuNCw4LjQgMCwzLjYgMC42LDQuMSAxLjgsNS43IDEuMiwxLjYgMywyLjggNS4zLDMuNSAyLjMsMC44IDUuMSwxLjIgOC4zLDEuMiA0LjgsMCA4LjcsLTAuOSAxMiwtMi43IDMuMiwtMS44IDUuNiwtNC4zIDcuMiwtNy40IDEuNiwtMy4yIDIuNCwtNi44IDIuNCwtMTEgbCAyLjcsMjQuMSBjIC0xLjMsMy40IC0zLjQsNi41IC02LjQsOS40IC0zLDIuOSAtNi44LDUuMyAtMTEuNSw3LjEgLTQuNywxLjggLTkuOSwyLjcgLTE1LjgsMi43IC01LjksMCAtMTIuMywtMS4zIC0xNy4yLC0zLjggeiBNIDQ1Mi42LDE4MiBjIC0zLjcsLTIuNyAtOS4xLC00LjEgLTE2LjQsLTQuMSAtNy4zLDAgLTEwLjIsMC41IC0xNS4xLDEuNCAtNC45LDAuOSAtOS41LDIuMiAtMTMuNywzLjkgbCAtMi44LC0yMy4xIGMgNS41LC0xLjcgMTEuMiwtMi45IDE3LjEsLTMuOSA1LjksLTAuOSAxMS44LC0xLjQgMTcuOCwtMS40IDE1LjgsMCAyNy42LDMuNiAzNS4zLDEwLjggNy43LDcuMiAxMS41LDE3LjMgMTEuNSwzMC41IFYgMjUxIGggLTI4IGwgLTAuMiwtNTYuOSBjIDAsLTUuMyAtMS44LC05LjMgLTUuNSwtMTIgeiIKICAgICAgIGNsYXNzPSJzdDAiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZiZjlmMjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIKICAgICAgIGlkPSJwYXRoOTcxIgogICAgICAgZD0ibSA1MTYuNywyNTAuOSBjIC02LjYsLTEuNCAtMTIuOSwtMy41IC0xOC45LC02LjQgbCA0LjEsLTIzIGMgNiwzIDEyLjMsNS4zIDE4LjksNi44IDYuNiwxLjUgMTMuMSwyLjMgMTkuNSwyLjMgNi40LDAgNS4zLC0wLjIgNy40LC0wLjYgMi4xLC0wLjQgMy44LC0xLjIgNS4xLC0yLjMgMS4zLC0xLjEgMiwtMi43IDIsLTQuNiAwLC0xLjkgLTAuNiwtMyAtMS43LC00LjEgLTEuMSwtMS4xIC0zLjEsLTIgLTUuOCwtMi44IC0yLjcsLTAuOCAtNi41LC0xLjYgLTExLjMsLTIuNCAtOS4xLC0xLjQgLTE2LjQsLTMuNCAtMjEuNywtNS44IC01LjMsLTIuNCAtOS4yLC01LjUgLTExLjYsLTkuMiAtMi40LC0zLjcgLTMuNSwtOC4zIC0zLjUsLTEzLjcgMC4xLC02LjYgMiwtMTIuMiA1LjcsLTE2LjggMy43LC00LjUgOC42LC03LjkgMTQuOCwtMTAuMSA2LjIsLTIuMiAxMy4xLC0zLjMgMjAuNywtMy4zIDcuNiwwIDEyLjQsMC42IDE4LjQsMS45IDYsMS4zIDExLjgsMi45IDE3LjUsNSBsIC0zLjYsMjIuOSBjIC01LC0yLjMgLTEwLjUsLTQuMiAtMTYuNSwtNS41IC01LjksLTEuMyAtMTEuOCwtMiAtMTcuNiwtMiAtNS44LDAgLTUuMSwwLjIgLTYuOSwwLjYgLTEuOCwwLjQgLTMuMSwxLjEgLTQuMSwyIC0xLDAuOSAtMS41LDIuMSAtMS42LDMuNyAwLDEuNCAwLjUsMi41IDEuNSwzLjQgMSwwLjkgMi43LDEuOCA1LjEsMi42IDIuNSwwLjggNi4xLDEuNiAxMC45LDIuNSA5LjQsMS43IDE2LjksMy45IDIyLjUsNi41IDUuNiwyLjYgOS42LDUuOSAxMiw5LjcgMi40LDMuOCAzLjcsOC41IDMuNywxNCAwLDYuOCAtMiwxMi40IC01LjgsMTcgLTMuOCw0LjYgLTguOSw4IC0xNS40LDEwLjMgLTYuNSwyLjMgLTEzLjcsMy40IC0yMS44LDMuNCAtOC4xLDAgLTE1LjUsLTAuNyAtMjIsLTIuMSB6IgogICAgICAgY2xhc3M9InN0MCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmJmOWYyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgICAgaWQ9InBhdGg5NzMiCiAgICAgICBkPSJtIDYxNi42LDI0OS4zIGMgLTUsLTIuNSAtOC44LC02LjIgLTExLjUsLTExLjIgLTIuNiwtNC45IC0zLjksLTEwLjkgLTMuOSwtMTggdiAtNDAuMiBoIC0xMi40IHYgLTEyLjUgbCAxMC45LC0xMS4zIDE4LjUsLTE5LjggaCAxMC45IHYgMjAuNiBoIDI4LjggdiAyMyBoIC0yOC44IHYgMzYuMyBjIDAsMi42IDAuNCw0LjggMS4zLDYuNyAwLjksMS45IDIuMiwzLjMgMy45LDQuMiAxLjcsMSAzLjcsMS41IDYsMS41IDIuMywwIDUsLTAuMyA3LjcsLTAuOCAyLjYsLTAuNiA1LjIsLTEuNCA3LjgsLTIuNiBsIDUuMSwyMS4zIGMgLTMuOSwyLjEgLTguMiwzLjcgLTEyLjksNC45IC00LjcsMS4yIC05LjEsMS43IC0xMy40LDEuNyAtNy4xLDAgLTEzLjEsLTEuMyAtMTguMSwtMy44IHoiCiAgICAgICBjbGFzcz0ic3QwIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmYmY5ZjI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgICBpZD0icGF0aDk3NSIKICAgICAgIGQ9Im0gNjcyLjQsMTI1LjUgaCAyOC4xIHYgMTI1LjQgaCAtMjguMSB6IgogICAgICAgY2xhc3M9InN0MCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmJmOWYyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgICAgaWQ9InBhdGg5NzciCiAgICAgICBkPSJtIDcyOC4yLDI0OS4yIGMgLTUsLTIuNSAtOC44LC02LjEgLTExLjUsLTEwLjYgLTIuNywtNC41IC00LjEsLTkuOCAtNC4xLC0xNS42IDAsLTUuOCAxLjMsLTExIDQsLTE1LjQgMi43LC00LjQgNi44LC03LjkgMTIuNCwtMTAuNCA1LjYsLTIuNSAxMi41LC0zLjcgMjEsLTMuNyA4LjUsMCAxMC4yLDAuMiAxNS44LDAuNSA1LjYsMC4zIDEwLjQsMC43IDE0LjQsMSBsIC0zLjYsMTUuMiBjIC01LjYsLTAuNyAtMTEuOSwtMS4xIC0xOC43LC0xLjEgLTYuOCwwIC0xMS4yLDEgLTE0LjIsMyAtMi45LDIgLTQuNCw0LjggLTQuNCw4LjQgMCwzLjYgMC42LDQuMSAxLjgsNS43IDEuMiwxLjYgMywyLjggNS4zLDMuNSAyLjMsMC44IDUuMSwxLjIgOC4zLDEuMiA0LjgsMCA4LjcsLTAuOSAxMiwtMi43IDMuMiwtMS44IDUuNiwtNC4zIDcuMiwtNy40IDEuNiwtMy4yIDIuNCwtNi44IDIuNCwtMTEgbCAyLjcsMjQuMSBjIC0xLjMsMy40IC0zLjQsNi41IC02LjQsOS40IC0zLDIuOSAtNi44LDUuMyAtMTEuNSw3LjEgLTQuNywxLjggLTkuOSwyLjcgLTE1LjgsMi43IC01LjksMCAtMTIuMywtMS4zIC0xNy4yLC0zLjggeiBNIDc3MC45LDE4MiBjIC0zLjcsLTIuNyAtOS4xLC00LjEgLTE2LjQsLTQuMSAtNy4zLDAgLTEwLjIsMC41IC0xNS4xLDEuNCAtNC45LDAuOSAtOS41LDIuMiAtMTMuNywzLjkgbCAtMi44LC0yMy4xIGMgNS41LC0xLjcgMTEuMiwtMi45IDE3LjEsLTMuOSA1LjksLTAuOSAxMS44LC0xLjQgMTcuOCwtMS40IDE1LjgsMCAyNy42LDMuNiAzNS4zLDEwLjggNy43LDcuMiAxMS41LDE3LjMgMTEuNSwzMC41IFYgMjUxIGggLTI4IGwgLTAuMiwtNTYuOSBjIDAsLTUuMyAtMS44LC05LjMgLTUuNSwtMTIgeiIKICAgICAgIGNsYXNzPSJzdDAiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZiZjlmMjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIKICAgICAgIGlkPSJwYXRoOTc5IgogICAgICAgZD0ibSA5NDMuNywyNTAuOSBjIC02LjYsLTEuNCAtMTIuOSwtMy41IC0xOC45LC02LjQgbCA0LjEsLTIzIGMgNiwzIDEyLjMsNS4zIDE4LjksNi44IDYuNiwxLjUgMTMuMSwyLjMgMTkuNSwyLjMgNi40LDAgNS4zLC0wLjIgNy40LC0wLjYgMi4xLC0wLjQgMy44LC0xLjIgNS4xLC0yLjMgMS4zLC0xLjEgMS45LC0yLjcgMS45LC00LjYgMCwtMS45IC0wLjYsLTMgLTEuNywtNC4xIC0xLjEsLTEuMSAtMy4xLC0yIC01LjgsLTIuOCAtMi43LC0wLjggLTYuNSwtMS42IC0xMS4zLC0yLjQgLTkuMSwtMS40IC0xNi40LC0zLjQgLTIxLjcsLTUuOCAtNS40LC0yLjQgLTkuMiwtNS41IC0xMS42LC05LjIgLTIuNCwtMy43IC0zLjUsLTguMyAtMy41LC0xMy43IDAuMSwtNi42IDIsLTEyLjIgNS43LC0xNi44IDMuNywtNC41IDguNiwtNy45IDE0LjgsLTEwLjEgNi4yLC0yLjIgMTMuMSwtMy4zIDIwLjcsLTMuMyA3LjYsMCAxMi40LDAuNiAxOC40LDEuOSA2LDEuMiAxMS44LDIuOSAxNy41LDUgbCAtMy42LDIyLjkgYyAtNSwtMi4zIC0xMC41LC00LjIgLTE2LjUsLTUuNSAtNiwtMS4zIC0xMS44LC0yIC0xNy42LC0yIC01LjgsMCAtNS4xLDAuMiAtNi45LDAuNiAtMS44LDAuNCAtMy4xLDEuMSAtNC4xLDIgLTAuOSwwLjkgLTEuNSwyLjEgLTEuNiwzLjcgMCwxLjQgMC41LDIuNSAxLjUsMy40IDEsMC45IDIuNywxLjggNS4xLDIuNiAyLjUsMC44IDYuMSwxLjYgMTAuOSwyLjUgOS40LDEuNyAxNi45LDMuOSAyMi41LDYuNSA1LjYsMi42IDkuNiw1LjkgMTIsOS43IDIuNCwzLjggMy43LDguNSAzLjcsMTQgMCw2LjggLTIsMTIuNCAtNS44LDE3IC0zLjgsNC42IC04LjksOCAtMTUuNCwxMC4zIC02LjQsMi4zIC0xMy43LDMuNCAtMjEuOCwzLjQgLTguMSwwIC0xNS41LC0wLjcgLTIyLC0yLjEgeiIKICAgICAgIGNsYXNzPSJzdDAiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZiZjlmMjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIKICAgICAgIGlkPSJwYXRoOTgxIgogICAgICAgZD0ibSAzNjIuOCwyMjQuMiBjIC01LjQsMS45IC0xMC45LDIuOSAtMTYuNCwyLjkgLTUuNSwwIC0xMywtMS41IC0xOC40LC00LjQgLTUuNSwtMi45IC05LjgsLTcuMiAtMTMsLTEyLjcgLTMuMiwtNS41IC00LjcsLTEyLjEgLTQuNywtMTkuNyAwLC03LjYgMS41LC0xNC4xIDQuNiwtMTkuNyAzLjEsLTUuNSA3LjQsLTkuNyAxMi44LC0xMi43IDUuNCwtMi45IDExLjUsLTQuNCAxOC40LC00LjQgNi45LDAgNy4zLDAuNCAxMC45LDEuMyAzLjYsMC45IDcuMiwyLjIgMTAuOCwzLjkgMy42LDEuNyA3LjMsMy45IDExLDYuNiB2IDAgYyAwLDAgNy42LC0yNS41IDcuNiwtMjUuNSAtMy40LC0yLjEgLTYuOSwtMy45IC0xMC40LC01LjQgLTUuMSwtMi4yIC0xMC4zLC0zLjkgLTE1LjUsLTUgLTUuMiwtMS4xIC0xMC40LC0xLjYgLTE1LjgsLTEuNiAtMTIuMywwIC0yMy4zLDIuNSAtMzMuMSw3LjYgLTkuOCw1LjEgLTE3LjYsMTIuMyAtMjMuMiwyMS44IC01LjcsOS41IC04LjUsMjAuNSAtOC41LDMzLjIgMCwxMi43IDIuOSwyMy41IDguNywzMi45IDUuOCw5LjUgMTMuNywxNi44IDIzLjgsMjIgMTAuMSw1LjIgMjEuMiw3LjggMzMuNSw3LjggMTIuMywwIDE1LjcsLTEuMyAyMy40LC0zLjggNiwtMiAxMS45LC00LjggMTcuNiwtOC40IGwgLTcuNywtMjUuNiBjIC01LjYsMy45IC0xMS4xLDYuOSAtMTYuNSw4LjggeiIKICAgICAgIGNsYXNzPSJzdDAiIC8+CiAgPC9nPgogIDxjaXJjbGUKICAgICBzdHlsZT0iZmlsbDojZmJmOWYyO3N0cm9rZS13aWR0aDowLjI3NzI4NDgzO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgIGlkPSJjaXJjbGU5ODUiCiAgICAgcj0iMy44ODE5ODc2IgogICAgIGN5PSI0Ljk4MTY2NTYiCiAgICAgY3g9IjEzLjMzNzQwNSIKICAgICBjbGFzcz0ic3QwIiAvPgogIDxjaXJjbGUKICAgICBzdHlsZT0iZmlsbDojZmJmOWYyO3N0cm9rZS13aWR0aDowLjI3NzI4NDgzO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgIGlkPSJjaXJjbGU5ODciCiAgICAgcj0iNC4wNDgzNTg0IgogICAgIGN5PSI5LjAzMDAyMzYiCiAgICAgY3g9IjQuMDQ4MzU4OSIKICAgICBjbGFzcz0ic3QwIiAvPgogIDxjaXJjbGUKICAgICBzdHlsZT0iZmlsbDojZmJmOWYyO3N0cm9rZS13aWR0aDowLjI3NzI4NDgzO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgIGlkPSJjaXJjbGU5ODkiCiAgICAgcj0iMy4zODI4NzUiCiAgICAgY3k9IjEwLjk3MTAxOCIKICAgICBjeD0iMjAuNDA4MTY5IgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiNmYmY5ZjI7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTk5MSIKICAgICByPSIzLjQzODMzMTgiCiAgICAgY3k9IjE0LjMyNjE2NiIKICAgICBjeD0iMTEuNzAxNDIyIgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiNmYmY5ZjI7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTk5MyIKICAgICByPSIyLjg4Mzc2MjEiCiAgICAgY3k9IjE2LjgyMTczMiIKICAgICBjeD0iMjYuNzU3OTg4IgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiNmYmY5ZjI7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTk5NSIKICAgICByPSIyLjk2Njk0NzYiCiAgICAgY3k9IjE5LjMxNzI5NSIKICAgICBjeD0iMTguODU1MzcxIgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiNmYmY5ZjI7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTk5NyIKICAgICByPSIyLjQ2NzgzNDkiCiAgICAgY3k9IjIzLjE5OTI4MiIKICAgICBjeD0iMzIuMTkyNzcyIgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiNmYmY5ZjI7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTk5OSIKICAgICByPSIyLjU1MTAyMDQiCiAgICAgY3k9IjI0LjM5MTYwNyIKICAgICBjeD0iMjQuNjIyODk2IgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiNmYmY5ZjI7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTEwMDEiCiAgICAgcj0iMi4xMDczNjQ3IgogICAgIGN5PSIyOS41NzY4MyIKICAgICBjeD0iMzUuNTc1NjQ1IgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiNmYmY5ZjI7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTEwMDMiCiAgICAgcj0iMi4xMDczNjQ3IgogICAgIGN5PSIyOS42MDQ1NTkiCiAgICAgY3g9IjI5LjI1MzU1MSIKICAgICBjbGFzcz0ic3QwIiAvPgogIDxjaXJjbGUKICAgICBzdHlsZT0iZmlsbDojZmJmOWYyO3N0cm9rZS13aWR0aDowLjI3NzI4NDgzO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIgogICAgIGlkPSJjaXJjbGUxMDA1IgogICAgIHI9IjIuMDI0MTc5MiIKICAgICBjeT0iMzUuMDk0Nzk5IgogICAgIGN4PSIzMi40MTQ1OTMiCiAgICAgY2xhc3M9InN0MCIgLz4KICA8Y2lyY2xlCiAgICAgc3R5bGU9ImZpbGw6I2ZiZjlmMjtzdHJva2Utd2lkdGg6MC4yNzcyODQ4MztmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZSIKICAgICBpZD0iY2lyY2xlMTAwNyIKICAgICByPSIxLjc0Njg5NDUiCiAgICAgY3k9IjM5LjI4MTgwMyIKICAgICBjeD0iMjguMjgzMDU2IgogICAgIGNsYXNzPSJzdDAiIC8+CiAgPGNpcmNsZQogICAgIHN0eWxlPSJmaWxsOiNmYmY5ZjI7c3Ryb2tlLXdpZHRoOjAuMjc3Mjg0ODM7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgaWQ9ImNpcmNsZTEwMDkiCiAgICAgcj0iMS42OTE0Mzc1IgogICAgIGN5PSI0Mi4xNjU1NjIiCiAgICAgY3g9IjIzLjczNTU4NiIKICAgICBjbGFzcz0ic3QwIiAvPgo8L3N2Zz4K');
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDExMTUuNiAzNzguNiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6ICNmYmY5ZjI7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnPgogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTgxOS45LDEyNS41aDI3LjV2MzkuN2M3LjgtNi4xLDE3LjQtOS44LDI4LjYtOS44LDI1LjcsMCw0MC41LDE1LjUsNDAuNSw0Ni45cy0xNS41LDQ4LjYtNDMuNCw0OC42LTIwLjctMy4zLTI4LjYtOC4zbC0xLjcsNi41aC0yMi45di0xMjMuNlpNODY2LjEsMjI3LjdjMTQuNCwwLDIxLjgtNi43LDIxLjgtMjQuOXMtNy0yNC0xOS42LTI0LTE0LjQsMi42LTIwLjksNi41djM4LjNjNS43LDIuOCwxMS44LDQuMywxOC43LDQuM1oiLz4KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MTAsMjQ5LjJjLTUtMi41LTguOC02LjEtMTEuNS0xMC42cy00LjEtOS44LTQuMS0xNS42LDEuMy0xMSw0LTE1LjRjMi43LTQuNCw2LjgtNy45LDEyLjQtMTAuNCw1LjYtMi41LDEyLjUtMy43LDIxLTMuN3MxMC4yLjIsMTUuOC41YzUuNi4zLDEwLjQuNywxNC40LDFsLTMuNiwxNS4yYy01LjYtLjctMTEuOS0xLjEtMTguNy0xLjFzLTExLjIsMS0xNC4yLDNjLTIuOSwyLTQuNCw0LjgtNC40LDguNHMuNiw0LjEsMS44LDUuNywzLDIuOCw1LjMsMy41YzIuMy44LDUuMSwxLjIsOC4zLDEuMiw0LjgsMCw4LjctLjksMTItMi43LDMuMi0xLjgsNS42LTQuMyw3LjItNy40LDEuNi0zLjIsMi40LTYuOCwyLjQtMTFsMi43LDI0LjFjLTEuMywzLjQtMy40LDYuNS02LjQsOS40cy02LjgsNS4zLTExLjUsNy4xLTkuOSwyLjctMTUuOCwyLjctMTIuMy0xLjMtMTcuMi0zLjhaTTQ1Mi42LDE4MmMtMy43LTIuNy05LjEtNC4xLTE2LjQtNC4xcy0xMC4yLjUtMTUuMSwxLjQtOS41LDIuMi0xMy43LDMuOWwtMi44LTIzLjFjNS41LTEuNywxMS4yLTIuOSwxNy4xLTMuOSw1LjktLjksMTEuOC0xLjQsMTcuOC0xLjQsMTUuOCwwLDI3LjYsMy42LDM1LjMsMTAuOCw3LjcsNy4yLDExLjUsMTcuMywxMS41LDMwLjV2NTQuOWgtMjhsLS4yLTU2LjljMC01LjMtMS44LTkuMy01LjUtMTJaIi8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTE2LjcsMjUwLjljLTYuNi0xLjQtMTIuOS0zLjUtMTguOS02LjRsNC4xLTIzYzYsMywxMi4zLDUuMywxOC45LDYuOCw2LjYsMS41LDEzLjEsMi4zLDE5LjUsMi4zczUuMy0uMiw3LjQtLjYsMy44LTEuMiw1LjEtMi4zYzEuMy0xLjEsMi0yLjcsMi00LjZzLS42LTMtMS43LTQuMS0zLjEtMi01LjgtMi44Yy0yLjctLjgtNi41LTEuNi0xMS4zLTIuNC05LjEtMS40LTE2LjQtMy40LTIxLjctNS44cy05LjItNS41LTExLjYtOS4yYy0yLjQtMy43LTMuNS04LjMtMy41LTEzLjcuMS02LjYsMi0xMi4yLDUuNy0xNi44LDMuNy00LjUsOC42LTcuOSwxNC44LTEwLjEsNi4yLTIuMiwxMy4xLTMuMywyMC43LTMuM3MxMi40LjYsMTguNCwxLjksMTEuOCwyLjksMTcuNSw1bC0zLjYsMjIuOWMtNS0yLjMtMTAuNS00LjItMTYuNS01LjUtNS45LTEuMy0xMS44LTItMTcuNi0ycy01LjEuMi02LjkuNmMtMS44LjQtMy4xLDEuMS00LjEsMnMtMS41LDIuMS0xLjYsMy43YzAsMS40LjUsMi41LDEuNSwzLjRzMi43LDEuOCw1LjEsMi42YzIuNS44LDYuMSwxLjYsMTAuOSwyLjUsOS40LDEuNywxNi45LDMuOSwyMi41LDYuNSw1LjYsMi42LDkuNiw1LjksMTIsOS43LDIuNCwzLjgsMy43LDguNSwzLjcsMTQsMCw2LjgtMiwxMi40LTUuOCwxNy0zLjgsNC42LTguOSw4LTE1LjQsMTAuM3MtMTMuNywzLjQtMjEuOCwzLjQtMTUuNS0uNy0yMi0yLjFaIi8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjE2LjYsMjQ5LjNjLTUtMi41LTguOC02LjItMTEuNS0xMS4yLTIuNi00LjktMy45LTEwLjktMy45LTE4di00MC4yaC0xMi40di0xMi41bDEwLjktMTEuMywxOC41LTE5LjhoMTAuOXYyMC42aDI4Ljh2MjNoLTI4Ljh2MzYuM2MwLDIuNi40LDQuOCwxLjMsNi43LjksMS45LDIuMiwzLjMsMy45LDQuMiwxLjcsMSwzLjcsMS41LDYsMS41czUtLjMsNy43LS44YzIuNi0uNiw1LjItMS40LDcuOC0yLjZsNS4xLDIxLjNjLTMuOSwyLjEtOC4yLDMuNy0xMi45LDQuOXMtOS4xLDEuNy0xMy40LDEuN2MtNy4xLDAtMTMuMS0xLjMtMTguMS0zLjhaIi8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjcyLjQsMTI1LjVoMjguMXYxMjUuNGgtMjguMXYtMTI1LjRaIi8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNzI4LjIsMjQ5LjJjLTUtMi41LTguOC02LjEtMTEuNS0xMC42cy00LjEtOS44LTQuMS0xNS42LDEuMy0xMSw0LTE1LjRjMi43LTQuNCw2LjgtNy45LDEyLjQtMTAuNCw1LjYtMi41LDEyLjUtMy43LDIxLTMuN3MxMC4yLjIsMTUuOC41YzUuNi4zLDEwLjQuNywxNC40LDFsLTMuNiwxNS4yYy01LjYtLjctMTEuOS0xLjEtMTguNy0xLjFzLTExLjIsMS0xNC4yLDNjLTIuOSwyLTQuNCw0LjgtNC40LDguNHMuNiw0LjEsMS44LDUuNywzLDIuOCw1LjMsMy41YzIuMy44LDUuMSwxLjIsOC4zLDEuMiw0LjgsMCw4LjctLjksMTItMi43LDMuMi0xLjgsNS42LTQuMyw3LjItNy40LDEuNi0zLjIsMi40LTYuOCwyLjQtMTFsMi43LDI0LjFjLTEuMywzLjQtMy40LDYuNS02LjQsOS40cy02LjgsNS4zLTExLjUsNy4xLTkuOSwyLjctMTUuOCwyLjctMTIuMy0xLjMtMTcuMi0zLjhaTTc3MC45LDE4MmMtMy43LTIuNy05LjEtNC4xLTE2LjQtNC4xcy0xMC4yLjUtMTUuMSwxLjQtOS41LDIuMi0xMy43LDMuOWwtMi44LTIzLjFjNS41LTEuNywxMS4yLTIuOSwxNy4xLTMuOSw1LjktLjksMTEuOC0xLjQsMTcuOC0xLjQsMTUuOCwwLDI3LjYsMy42LDM1LjMsMTAuOCw3LjcsNy4yLDExLjUsMTcuMywxMS41LDMwLjV2NTQuOWgtMjhsLS4yLTU2LjljMC01LjMtMS44LTkuMy01LjUtMTJaIi8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOTQzLjcsMjUwLjljLTYuNi0xLjQtMTIuOS0zLjUtMTguOS02LjRsNC4xLTIzYzYsMywxMi4zLDUuMywxOC45LDYuOCw2LjYsMS41LDEzLjEsMi4zLDE5LjUsMi4zczUuMy0uMiw3LjQtLjZjMi4xLS40LDMuOC0xLjIsNS4xLTIuMywxLjMtMS4xLDEuOS0yLjcsMS45LTQuNnMtLjYtMy0xLjctNC4xLTMuMS0yLTUuOC0yLjhjLTIuNy0uOC02LjUtMS42LTExLjMtMi40LTkuMS0xLjQtMTYuNC0zLjQtMjEuNy01LjgtNS40LTIuNC05LjItNS41LTExLjYtOS4yLTIuNC0zLjctMy41LTguMy0zLjUtMTMuNy4xLTYuNiwyLTEyLjIsNS43LTE2LjgsMy43LTQuNSw4LjYtNy45LDE0LjgtMTAuMSw2LjItMi4yLDEzLjEtMy4zLDIwLjctMy4zczEyLjQuNiwxOC40LDEuOWM2LDEuMiwxMS44LDIuOSwxNy41LDVsLTMuNiwyMi45Yy01LTIuMy0xMC41LTQuMi0xNi41LTUuNS02LTEuMy0xMS44LTItMTcuNi0ycy01LjEuMi02LjkuNi0zLjEsMS4xLTQuMSwyYy0uOS45LTEuNSwyLjEtMS42LDMuNywwLDEuNC41LDIuNSwxLjUsMy40LDEsLjksMi43LDEuOCw1LjEsMi42LDIuNS44LDYuMSwxLjYsMTAuOSwyLjUsOS40LDEuNywxNi45LDMuOSwyMi41LDYuNSw1LjYsMi42LDkuNiw1LjksMTIsOS43czMuNyw4LjUsMy43LDE0YzAsNi44LTIsMTIuNC01LjgsMTctMy44LDQuNi04LjksOC0xNS40LDEwLjMtNi40LDIuMy0xMy43LDMuNC0yMS44LDMuNHMtMTUuNS0uNy0yMi0yLjFaIi8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzYyLjgsMjI0LjJjLTUuNCwxLjktMTAuOSwyLjktMTYuNCwyLjlzLTEzLTEuNS0xOC40LTQuNGMtNS41LTIuOS05LjgtNy4yLTEzLTEyLjctMy4yLTUuNS00LjctMTIuMS00LjctMTkuN3MxLjUtMTQuMSw0LjYtMTkuN2MzLjEtNS41LDcuNC05LjcsMTIuOC0xMi43LDUuNC0yLjksMTEuNS00LjQsMTguNC00LjRzNy4zLjQsMTAuOSwxLjNjMy42LjksNy4yLDIuMiwxMC44LDMuOSwzLjYsMS43LDcuMywzLjksMTEsNi42aDBzNy42LTI1LjUsNy42LTI1LjVjLTMuNC0yLjEtNi45LTMuOS0xMC40LTUuNC01LjEtMi4yLTEwLjMtMy45LTE1LjUtNS01LjItMS4xLTEwLjQtMS42LTE1LjgtMS42LTEyLjMsMC0yMy4zLDIuNS0zMy4xLDcuNi05LjgsNS4xLTE3LjYsMTIuMy0yMy4yLDIxLjgtNS43LDkuNS04LjUsMjAuNS04LjUsMzMuMnMyLjksMjMuNSw4LjcsMzIuOWM1LjgsOS41LDEzLjcsMTYuOCwyMy44LDIyLDEwLjEsNS4yLDIxLjIsNy44LDMzLjUsNy44czE1LjctMS4zLDIzLjQtMy44YzYtMiwxMS45LTQuOCwxNy42LTguNGwtNy43LTI1LjZjLTUuNiwzLjktMTEuMSw2LjktMTYuNSw4LjhaIi8+CiAgPC9nPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjE1NS4xIiBjeT0iMTE3LjEiIHI9IjE0Ii8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTIxLjYiIGN5PSIxMzEuNyIgcj0iMTQuNiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjE4MC42IiBjeT0iMTM4LjciIHI9IjEyLjIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxNDkuMiIgY3k9IjE1MC44IiByPSIxMi40Ii8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjAzLjUiIGN5PSIxNTkuOCIgcj0iMTAuNCIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjE3NSIgY3k9IjE2OC44IiByPSIxMC43Ii8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjIzLjEiIGN5PSIxODIuOCIgcj0iOC45Ii8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTk1LjgiIGN5PSIxODcuMSIgcj0iOS4yIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjM1LjMiIGN5PSIyMDUuOCIgcj0iNy42Ii8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjEyLjUiIGN5PSIyMDUuOSIgcj0iNy42Ii8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjIzLjkiIGN5PSIyMjUuNyIgcj0iNy4zIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjA5IiBjeT0iMjQwLjgiIHI9IjYuMyIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjE5Mi42IiBjeT0iMjUxLjIiIHI9IjYuMSIvPgo8L3N2Zz4K');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   display: inline-block;
-  height: 1em;
-  width: 5em;
+  height: 1em * 2;
+  margin-bottom: -1em;
+  position: relative;
+  top: -0.5em;
+  width: 2.95em * 2;
 }
 
 a,

package/src/styles/components/button.variables.scss

@@ -3,16 +3,89 @@
 /// @access public
 ////
 
-$button-hover-opacity: $color-hover-opacity;
-$button-disabled-opacity: 0.33;
+@mixin cl-button {
+  background-image: none;
+  border-radius: $brand-border-radius;
+  border-width: px(1);
+  display: inline-block;
+  font-size: px(18);
+  font-weight: 700; // repeat as @include overrides
+  line-height: 1em; // repeat as @include overrides
+  opacity: 1;
+  overflow: hidden;
+  padding: typography-sans-baselineshift($spacing-tiny, px(18)) $spacing-large
+    typography-sans-baselineunshift($spacing-tiny, px(18));
+  text-align: center;
+  text-decoration: none;
+  transition: opacity 0.15s;
+  white-space: nowrap;
 
-@mixin button-focus-outline($color) {
+  i {
+    font-size: 0.8em;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    position: relative;
+    top: -0.075em;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+// custom colors for bootstrap buttons
+@mixin cl-button-color() {
+  background-color: var(--cl-color-background);
+  border: $brand-line-width solid var(--cl-color-border);
+  color: var(--cl-color-text);
+
+  // our hover buttons look no different
+  &.a:hover,
+  &:hover {
+    background-color: var(--cl-color-background);
+    border-color: var(--cl-color-border);
+    color: var(--cl-color-text);
+  }
+
+  // our focus (tab'ed) buttons look the same but are outlined
   .btn-check:focus + &,
   &:focus {
-    @include color-focus-outline($color, 1px);
+    background-color: var(--cl-color-background);
+    border-color: var(--cl-color-border);
+    color: var(--cl-color-text);
+  }
+
+  // our active (mouse-down) buttons invert background & text color
+  &:active,
+  &.active,
+  .show > &.dropdown-toggle {
+    // .dropdown-toggle is for topnav
+    background-color: var(--cl-color-text);
+    border-color: var(--cl-color-background);
+    color: var(--cl-color-background);
 
-    & {
-      box-shadow: none;
+    &.cl-color-transparent {
+      background-color: $color-ci-eggshell;
+      border-color: $color-ci-eggshell;
+      color: $color-ci-night;
     }
   }
+
+  &:active,
+  &:active:focus {
+    outline: 0 !important;
+  }
+}
+
+@mixin cl-button-focus-outline($color) {
+  .btn-check:focus + &,
+  &:focus {
+    @include cl-color-focus-outline($color, -3px);
+
+    box-shadow: none;
+  }
 }

package/src/styles/components/form.variables.scss

@@ -5,21 +5,18 @@
 
 // This file defines form/input field variables
 
-$form-field-border-radius: 0;
-$form-field-border-width: px(2);
-$form-field-border-color: $color-ci-smoke;
-$form-field-border: $form-field-border-width solid $form-field-border-color;
-
-$form-color-disabled: $color-ci-silver;
+$form-field-border-color: $color-ci-ash;
+$form-field-border: $brand-line-width solid $form-field-border-color;
+$form-spacing-label-input: px(2);
 
 %form-field-box {
-  @extend %p-medium;
+  @extend %cl-p-medium;
 
   background-color: $color-ci-white;
   border: $form-field-border;
-  border-radius: $form-field-border-radius;
+  border-radius: $brand-border-radius;
   color: $color-text;
-  padding: $spacing-tiny - 0.125rem $spacing-tiny; // remove 2px border each
+  padding: $spacing-micro - 0.0625rem $spacing-tiny + $spacing-micro; // remove .0625rem=1px border each
   width: 100%;
 
   &:disabled,
@@ -28,24 +25,26 @@ $form-color-disabled: $color-ci-silver;
   }
 }
 
-%form-field-typography {
-  @include typography-font($typography-font-list-sans, 400, px(16), 1.5em);
+%form-field-typography-sans {
+  @include typography-font($typography-sans-font-list, 400, px(16), 1.5em);
 }
 
 %form-field-typography-monospace {
-  @include typography-font($typography-font-list-monospace, 400, px(17), 1.59em, 0.025em, 80%);
+  @include typography-font($typography-monospace-font-list, 400, px(17), 1.59em, 0.025em, 80%);
 }
 
-@mixin form-focus-border-embed($color) {
-  border-color: $color;
+@mixin form-focus-embed {
+  background-color: var(--cl-color-highlight);
+  border-color: $color-focus;
   box-shadow: none;
+  color: $color-focus;
   outline: 0;
 }
 
-@mixin form-focus-border($color) {
+@mixin form-focus {
   &:focus,
   &:focus:first-child,
   &:focus:last-child {
-    @include form-focus-border-embed($color);
+    @include form-focus-embed;
   }
 }

package/src/styles/layout/app.scss

@@ -0,0 +1,29 @@
+////
+/// @group layout
+/// @access public
+////
+
+// This file defines classes most of our app will need for landing page handling
+
+.cl-app {
+  height: 100%;
+}
+
+.cl-app-fullscreen {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+}
+
+.cl-app-loading {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  justify-content: space-around;
+
+  .cl-spinner {
+    margin: 0;
+  }
+}

package/src/styles/layout/color.scss

@@ -0,0 +1,115 @@
+////
+/// @group layout
+/// @access public
+////
+
+// Basic/generic color classes.
+
+// note: order of selectors in this file are important. do not move colors around or
+// .cl-color-* overrides might not work
+
+:root {
+  @extend %cl-color-root;
+}
+
+.cl-color-outline-text, // legacy name
+.cl-color-night-outline {
+  @extend %cl-color-night-outline;
+}
+
+.cl-color-red {
+  @extend %cl-color-red;
+}
+
+.cl-color-red-outline {
+  @extend %cl-color-red-outline;
+}
+
+.cl-color-sky {
+  @extend %cl-color-sky;
+}
+
+.cl-color-black,
+.cl-color-text, // legacy name
+.cl-color-dark, // legacy name
+.cl-color-night {
+  @extend %cl-color-night;
+}
+
+.cl-color-eggshell,
+.cl-color-white {
+  @extend %cl-color-eggshell;
+}
+
+.cl-color-light, // legacy name
+.cl-color-clay {
+  @extend %cl-color-clay;
+}
+
+.cl-color-ash {
+  @extend %cl-color-ash;
+}
+
+.cl-color-petrol {
+  @extend %cl-color-petrol;
+}
+
+.cl-color-berry {
+  @extend %cl-color-berry;
+}
+
+.cl-color-transparent {
+  @extend %cl-color-transparent;
+}
+
+.cl-color-disabled {
+  @extend %cl-color-disabled;
+}
+
+.cl-color-faded {
+  @extend %cl-color-faded;
+}
+
+.cl-color-none {
+  @extend %cl-color-none;
+}
+
+// ----------------------------------------------
+
+.cl-color-text-red {
+  #{'--cl-color-text'}: $color-ci-red;
+}
+
+.cl-color-text-sky {
+  #{'--cl-color-text'}: $color-ci-sky;
+}
+
+.cl-color-text-night {
+  #{'--cl-color-text'}: $color-ci-night;
+  #{'--cl-color-link'}: $color-ci-night;
+}
+
+.cl-color-text-eggshell {
+  #{'--cl-color-text'}: $color-ci-eggshell;
+  #{'--cl-color-link'}: $color-ci-eggshell;
+}
+
+.cl-color-text-clay {
+  #{'--cl-color-text'}: $color-ci-clay;
+}
+
+.cl-color-text-ash {
+  #{'--cl-color-text'}: $color-ci-ash;
+}
+
+.cl-color-text-petrol {
+  #{'--cl-color-text'}: $color-ci-petrol;
+}
+
+.cl-color-text-berry {
+  #{'--cl-color-text'}: $color-ci-berry;
+}
+
+.cl-color-text-none {
+  #{'--cl-color-text'}: transparent;
+}

package/src/styles/layout/grid.scss

@@ -106,9 +106,10 @@ img {
 html,
 body,
 .cl-app {
-  @include typography-font($typography-font-list-sans, 400, px(18), px(27), 0, 100, true);
+  @extend %cl-p-medium;
 
   background-color: $color-ci-white;
+  color: $color-text;
   height: 100%;
 }
 

package/src/styles/layout/helper.scss

@@ -9,6 +9,10 @@
   text-wrap: nowrap;
 }
 
+.cl-rounded {
+  border-radius: $brand-border-radius;
+}
+
 .cl-faded {
   opacity: 0.5;
 }
@@ -34,12 +38,23 @@ h6.cl-faded,
   }
 }
 
-@for $i from 0 through 512 {
+@for $i from 0 through 64 {
   .cl-width-#{$i * 32} {
     width: px($i * 32);
   }
 }
 
+@for $i from 0 through 10 {
+  .cl-w-#{$i * 10} {
+    width: $i * 10;
+  }
+}
+
+.cl-w-auto,
+.cl-width-auto {
+  width: auto;
+}
+
 .cl-text-start,
 .text-start {
   text-align: left;
@@ -55,10 +70,18 @@ h6.cl-faded,
   text-align: right;
 }
 
-.cl-flex-center-center {
+.cl-flex-center-center, // deprecated v5 class
+.cl-align-center-center {
   align-items: center;
   display: flex;
   height: 100%;
   justify-content: center;
   width: 100%;
 }
+
+.cl-flex-bottom, // deprecated v5 class
+.cl-align-bottom {
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+}