.metadata {
  padding: 1.25rem;
  background-color: #e5f2fb;
  border: 1px solid #6ca3e1;
  box-shadow: inset 0.5rem 0 0 0 #6ca3e1;
}

.metadata dt {
  flex: 0 0 25%;
  max-width: 25%;
}

.metadata dd {
  flex: 0 0 75%;
  max-width: 75%;
}

body.hxVertical main {
  display: flex;
  flex-direction: column;
  /*
     * +----------------+
     * | header         | auto
     * +------+---------+
     * | body | [aside] | 1fr
     * +------+---------+
     *   1fr    auto
     */
}

body.hxVertical main > * {
  order: 10;
  padding: 2rem;
  grid-area: body;
}

body.hxVertical main > header {
  background-color: #f5f5f5;
  border-color: #eeeeee;
  border-style: solid;
  border-width: 0 0 1px;
  grid-area: header;
  order: 1;
}

body.hxVertical main > header > * + * {
  margin-top: 0.75rem;
}

body.hxVertical main > aside {
  background-color: #ffffff;
  border-color: #eeeeee;
  border-style: solid;
  border-width: 0 0 1px;
  grid-area: aside;
  order: 3;
  width: 100%;
}

@supports (display: grid) {
  body.hxVertical main {
    display: grid;
    grid-template-areas: "header header" "body   aside";
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    overflow: visible !important;
  }
  body.hxVertical main > aside {
    border-width: 0 0 0 1px;
    min-width: 15rem;
    width: 25vw;
  }
}

body.hxVertical main > div > * + *,
body.hxVertical main > div > * + section {
  margin-top: 4.5rem;
}

body.hxVertical main > div > section > * + section {
  margin-top: 2rem;
}

body.hxVertical main > div > section > section > * + section {
  margin-top: 0.75rem;
}

body.hxVertical main > aside > * + * {
  margin-top: 2rem;
}

body.hxVertical.hxForm.beta main#content > header,
body.hxHorizontal.hxForm.beta main#content > header {
  background-color: 1px solid #f5f5f5;
  border-color: #eeeeee;
  border-style: solid;
  border-width: 0 0 1px;
  padding: 2rem;
}

/* ----- Test Page Styling ----- */
.test-content {
  border: 0.5rem solid #b37c00;
}

.test-content section > section {
  margin-bottom: 2rem;
  margin-left: 2rem;
}

.test-content section > table {
  border: 1px solid #d8d8d8;
}

.test-content section > table td, .test-content section > table th {
  padding: 1em;
}

.banner {
  -ms-grid-columns: auto 1fr;
  -ms-grid-row-align: baseline;
  align-items: baseline;
  background-color: #ffffff;
  border: 2px solid currentColor;
  color: #333333;
  display: -ms-grid;
  display: grid;
  grid-template-areas: 'icon content';
  grid-template-columns: auto 1fr;
  padding: 1rem;
}

.banner > * {
  margin: 0;
}

.banner.warning {
  background-color: #ffc749;
  border: 2px solid #b37c00;
}

.banner__icon {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  grid-area: icon;
  margin-right: 1rem;
}

.banner__body {
  -ms-grid-column: 2;
  -ms-grid-row: 1;
  grid-area: content;
}

@supports (display: grid) {
  .banner {
    grid-gap: 1rem;
  }
  .banner__icon {
    margin: 0;
  }
}

.example {
  border: 1px solid #e0e0e0;
}

.example > header {
  background-color: #eeeeee;
  border-color: #e0e0e0;
  border-style: solid;
  border-width: 0 0 1px;
  margin: 0 !important;
  padding: 1.25rem;
}

.example > div {
  background-color: #ffffff;
  background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.02) 25%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0.02) 75%, rgba(0, 0, 0, 0.02)), linear-gradient(-45deg, rgba(0, 0, 0, 0.02) 25%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0.02) 75%, rgba(0, 0, 0, 0.02));
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  padding: 2rem;
}

.example > footer {
  overflow: hidden;
}

.example > footer pre {
  border-radius: 0;
  border-width: 1px 0 0;
}

.example.resizable > div {
  overflow: hidden;
  resize: vertical;
}

@media (min-width: 75em) {
  .example {
    -ms-grid-columns: auto 1fr;
    -ms-grid-rows: 1fr auto;
    display: -ms-grid;
    display: grid;
    grid-template-areas: 'config demo' 'config code';
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
  }
  .example > header {
    -ms-grid-column: 1;
    -ms-grid-row-span: 2;
    -ms-grid-row: 1;
    border-width: 0 1px 0 0;
    grid-area: config;
    width: 20rem;
  }
  .example > div {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    border-width: 0 0 1px 0;
    grid-area: demo;
  }
  .example > footer {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    grid-area: code;
  }
}

.toc {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  position: -webkit-sticky;
  position: sticky;
  top: 1rem;
}

.toc > a {
  font-weight: 500;
  margin-bottom: 0.5rem;
  text-decoration: none;
}

.toc .top-link {
  font-size: 0.875rem;
  font-weight: 300;
  display: none;
}

@supports (display: grid) {
  .toc .top-link {
    display: block;
  }
}

.box-demo .hxBox,
.box-demo hx-div {
  border: 1px dashed #9e9e9e;
}

.box-demo p {
  margin: 0;
}

.box-demo .hxXs {
  box-shadow: inset 0 0 0 0.5rem #f9e4f8;
}

.box-demo .hxSm {
  box-shadow: inset 0 0 0 0.75rem #f9e4f8;
}

.box-demo .hxMd {
  box-shadow: inset 0 0 0 1.25rem #f9e4f8;
}

.box-demo .hxLg {
  box-shadow: inset 0 0 0 2rem #f9e4f8;
}

.box-demo .hxXl {
  box-shadow: inset 0 0 0 3rem #f9e4f8;
}

.box-demo .hx2x {
  box-shadow: inset 0 0 0 4.5rem #f9e4f8;
}

.example > div.scroll-box-demo {
  overflow: hidden;
  padding: 0;
}

.example > div.scroll-box-demo > hx-div {
  height: 15rem;
}

.example > div.scroll-box-demo > hx-div[scroll="both"], .example > div.scroll-box-demo > hx-div[scroll="horizontal"] {
  white-space: nowrap;
}

.grid-demo > .demo-container {
  border: 1px dashed #9e9e9e;
}

.grid-demo .example-styled-container {
  background-color: #6ca3e1;
  border-radius: 0;
  border: 1px solid #367ed4;
  height: 100%;
  padding: 1em 0.5em;
}

.grid-demo .hxCol {
  background-clip: content-box;
  background-color: rgba(250, 144, 0, 0.25);
  font-size: 0.75rem;
}

.grid-demo #querySize::before {
  display: block;
  font-variant: small-caps;
  font-weight: bold;
}

@media (min-width: 0em) {
  .grid-demo #querySize::before {
    content: "Size: xs";
  }
  .grid-demo .demoCol.hxSpan-1-xs::before, .grid-demo .demoCol.hxSpan-1::before {
    content: "1-xs";
  }
  .grid-demo .demoCol.hxSpan-2-xs::before, .grid-demo .demoCol.hxSpan-2::before {
    content: "2-xs";
  }
  .grid-demo .demoCol.hxSpan-3-xs::before, .grid-demo .demoCol.hxSpan-3::before {
    content: "3-xs";
  }
  .grid-demo .demoCol.hxSpan-4-xs::before, .grid-demo .demoCol.hxSpan-4::before {
    content: "4-xs";
  }
  .grid-demo .demoCol.hxSpan-5-xs::before, .grid-demo .demoCol.hxSpan-5::before {
    content: "5-xs";
  }
  .grid-demo .demoCol.hxSpan-6-xs::before, .grid-demo .demoCol.hxSpan-6::before {
    content: "6-xs";
  }
  .grid-demo .demoCol.hxSpan-7-xs::before, .grid-demo .demoCol.hxSpan-7::before {
    content: "7-xs";
  }
  .grid-demo .demoCol.hxSpan-8-xs::before, .grid-demo .demoCol.hxSpan-8::before {
    content: "8-xs";
  }
  .grid-demo .demoCol.hxSpan-9-xs::before, .grid-demo .demoCol.hxSpan-9::before {
    content: "9-xs";
  }
  .grid-demo .demoCol.hxSpan-10-xs::before, .grid-demo .demoCol.hxSpan-10::before {
    content: "10-xs";
  }
  .grid-demo .demoCol.hxSpan-11-xs::before, .grid-demo .demoCol.hxSpan-11::before {
    content: "11-xs";
  }
  .grid-demo .demoCol.hxSpan-12-xs::before, .grid-demo .demoCol.hxSpan-12::before {
    content: "12-xs";
  }
}

@media (min-width: 40em) {
  .grid-demo #querySize::before {
    content: "Size: sm";
  }
  .grid-demo .demoCol.hxSpan-1-sm::before {
    content: "1-sm";
  }
  .grid-demo .demoCol.hxSpan-2-sm::before {
    content: "2-sm";
  }
  .grid-demo .demoCol.hxSpan-3-sm::before {
    content: "3-sm";
  }
  .grid-demo .demoCol.hxSpan-4-sm::before {
    content: "4-sm";
  }
  .grid-demo .demoCol.hxSpan-5-sm::before {
    content: "5-sm";
  }
  .grid-demo .demoCol.hxSpan-6-sm::before {
    content: "6-sm";
  }
  .grid-demo .demoCol.hxSpan-7-sm::before {
    content: "7-sm";
  }
  .grid-demo .demoCol.hxSpan-8-sm::before {
    content: "8-sm";
  }
  .grid-demo .demoCol.hxSpan-9-sm::before {
    content: "9-sm";
  }
  .grid-demo .demoCol.hxSpan-10-sm::before {
    content: "10-sm";
  }
  .grid-demo .demoCol.hxSpan-11-sm::before {
    content: "11-sm";
  }
  .grid-demo .demoCol.hxSpan-12-sm::before {
    content: "12-sm";
  }
}

@media (min-width: 64em) {
  .grid-demo #querySize::before {
    content: "Size: md";
  }
  .grid-demo .demoCol.hxSpan-1-md::before {
    content: "1-md";
  }
  .grid-demo .demoCol.hxSpan-2-md::before {
    content: "2-md";
  }
  .grid-demo .demoCol.hxSpan-3-md::before {
    content: "3-md";
  }
  .grid-demo .demoCol.hxSpan-4-md::before {
    content: "4-md";
  }
  .grid-demo .demoCol.hxSpan-5-md::before {
    content: "5-md";
  }
  .grid-demo .demoCol.hxSpan-6-md::before {
    content: "6-md";
  }
  .grid-demo .demoCol.hxSpan-7-md::before {
    content: "7-md";
  }
  .grid-demo .demoCol.hxSpan-8-md::before {
    content: "8-md";
  }
  .grid-demo .demoCol.hxSpan-9-md::before {
    content: "9-md";
  }
  .grid-demo .demoCol.hxSpan-10-md::before {
    content: "10-md";
  }
  .grid-demo .demoCol.hxSpan-11-md::before {
    content: "11-md";
  }
  .grid-demo .demoCol.hxSpan-12-md::before {
    content: "12-md";
  }
}

@media (min-width: 75em) {
  .grid-demo #querySize::before {
    content: "Size: lg";
  }
  .grid-demo .demoCol.hxSpan-1-lg::before {
    content: "1-lg";
  }
  .grid-demo .demoCol.hxSpan-2-lg::before {
    content: "2-lg";
  }
  .grid-demo .demoCol.hxSpan-3-lg::before {
    content: "3-lg";
  }
  .grid-demo .demoCol.hxSpan-4-lg::before {
    content: "4-lg";
  }
  .grid-demo .demoCol.hxSpan-5-lg::before {
    content: "5-lg";
  }
  .grid-demo .demoCol.hxSpan-6-lg::before {
    content: "6-lg";
  }
  .grid-demo .demoCol.hxSpan-7-lg::before {
    content: "7-lg";
  }
  .grid-demo .demoCol.hxSpan-8-lg::before {
    content: "8-lg";
  }
  .grid-demo .demoCol.hxSpan-9-lg::before {
    content: "9-lg";
  }
  .grid-demo .demoCol.hxSpan-10-lg::before {
    content: "10-lg";
  }
  .grid-demo .demoCol.hxSpan-11-lg::before {
    content: "11-lg";
  }
  .grid-demo .demoCol.hxSpan-12-lg::before {
    content: "12-lg";
  }
}

@media (min-width: 90em) {
  .grid-demo #querySize::before {
    content: "Size: xl";
  }
  .grid-demo .demoCol.hxSpan-1-xl::before {
    content: "1-xl";
  }
  .grid-demo .demoCol.hxSpan-2-xl::before {
    content: "2-xl";
  }
  .grid-demo .demoCol.hxSpan-3-xl::before {
    content: "3-xl";
  }
  .grid-demo .demoCol.hxSpan-4-xl::before {
    content: "4-xl";
  }
  .grid-demo .demoCol.hxSpan-5-xl::before {
    content: "5-xl";
  }
  .grid-demo .demoCol.hxSpan-6-xl::before {
    content: "6-xl";
  }
  .grid-demo .demoCol.hxSpan-7-xl::before {
    content: "7-xl";
  }
  .grid-demo .demoCol.hxSpan-8-xl::before {
    content: "8-xl";
  }
  .grid-demo .demoCol.hxSpan-9-xl::before {
    content: "9-xl";
  }
  .grid-demo .demoCol.hxSpan-10-xl::before {
    content: "10-xl";
  }
  .grid-demo .demoCol.hxSpan-11-xl::before {
    content: "11-xl";
  }
  .grid-demo .demoCol.hxSpan-12-xl::before {
    content: "12-xl";
  }
}

.icon-media {
  background-color: #ffffff;
  border: 1px solid #d8d8d8;
  height: 100%;
  padding: 1.25rem;
}

.icon-media .media__icon {
  color: #000000;
  display: flex;
  font-size: 2em;
  line-height: 1;
}

.icon-media .media__body {
  margin-left: 1.25rem;
}

hx-icon.size-2x {
  height: 2em;
  width: 2em;
}

hx-icon.size-3x {
  height: 3em;
  width: 3em;
}

hx-icon.danger {
  color: #d6251f;
}

.nav-demo .hxNav {
  width: 15rem;
}

.docs-panel #demo-basic {
  height: 15rem;
  max-height: 20rem;
  min-height: 10rem;
}

.docs-panel #demo-basic .hxPanel {
  border: 1px dashed #9e9e9e;
}

.docs-panel #demo-basic .hxPanel > header {
  border-bottom: 1px dashed #9e9e9e;
}

.docs-panel #demo-basic .hxPanel > footer {
  border-top: 1px dashed #9e9e9e;
}

.docs-panel #demo-tabbed {
  height: 20rem;
  max-height: 30rem;
  min-height: 20rem;
}

.docs-tabset #demo-basic {
  height: 22rem;
  max-height: 40rem;
  min-height: 22rem;
}

.tooltip-appearance {
  display: flex;
  flex-wrap: wrap;
  z-index: 0;
}

.tooltip-appearance > hx-tooltip {
  margin: 1.25rem;
  position: relative;
}

a[href] {
  background-color: transparent;
  color: #0051b7;
  text-decoration: none;
}

a[href]:hover, a[href]:active, a.pseudo-active {
  color: #367ed4;
  cursor: pointer;
  text-decoration: none;
}

.demo-typography .font-open-sans {
  font-family: "Open Sans", "Roboto", sans-serif;
}

.demo-typography .font-open-sans-condensed {
  font-family: "Open Sans Condensed", "Roboto Mono", monospace;
}

.demo-typography .weight-thin {
  font-weight: 100;
}

.demo-typography .weight-light {
  font-weight: 300;
}

.demo-typography .weight-regular {
  font-weight: 400;
}

.demo-typography .weight-medium {
  font-weight: 500;
}

.demo-typography .weight-bold {
  font-weight: 700;
}

.checkbox-spec hx-checkbox-control > label > hx-checkbox {
  display: none;
}

.checkbox-spec hx-checkbox-control > input[type="checkbox"].mock-focus {
  box-shadow: 0 0 4px rgba(0, 81, 183, 0.5);
}

.checkbox-spec hx-checkbox-control > input[type="checkbox"].mock-focus::-ms-check {
  border-color: #0051b7;
  border-color: var(--hxCheckbox-focus-bordercolor, #0051b7);
}

.checkbox-spec hx-checkbox-control > input[type="checkbox"].mock-focus ~ label > hx-checkbox {
  border-color: #003482;
  border-color: var(--hxCheckbox-bordercolor-focus, #003482);
  box-shadow: 0 0 4px rgba(0, 81, 183, 0.5);
}

.checkbox-spec hx-checkbox-control > input[type="checkbox"].mock-hover {
  color: #0051b7;
  color: var(--hxCheckbox-hover-color, #0051b7);
}

.checkbox-spec hx-checkbox-control > input[type="checkbox"].mock-hover::-ms-check {
  background-color: #ffffff;
  background-color: var(--hxCheckbox-pristine-hover-ie-bgcolor, #ffffff);
  border-color: #0051b7;
  border-color: var(--hxCheckbox-pristine-hover-ie-border-color, #0051b7);
  color: #0051b7;
  color: var(--hxCheckbox-pristine-checkbox-hover-ie-color, #0051b7);
}

.checkbox-spec hx-checkbox-control > input[type="checkbox"].mock-hover ~ label > hx-checkbox {
  border-color: #0051b7;
}

.checkbox-spec hx-checkbox-control > input[type="checkbox"]:disabled.mock-focus::-ms-check {
  border-color: #bdbdbd;
  border-color: var(--hxCheckbox-disabled-bordercolor, #bdbdbd);
  box-shadow: 0 0 4px rgba(0, 81, 183, 0.5);
}

.checkbox-spec hx-checkbox-control > input[type="checkbox"]:disabled.mock-focus ~ label > hx-checkbox {
  border-color: #bdbdbd;
  border-color: var(--hxCheckbox-disabled-bordercolor, #bdbdbd);
}

.checkbox-spec hx-checkbox-control > input[type="checkbox"]:disabled.mock-hover::-ms-check {
  background-color: #ffffff;
  background-color: var(--hxCheckbox-disabled-hover-bgcolor, #ffffff);
  border-color: #bdbdbd;
  border-color: var(--hxCheckbox-disabled-hover-border-color, #bdbdbd);
  color: #bdbdbd;
  color: var(--hxCheckbox-disabled-hover-color, #bdbdbd);
}

.checkbox-spec hx-checkbox-control > input[type="checkbox"]:disabled.mock-hover ~ label > hx-checkbox {
  border-width: 1px;
  cursor: not-allowed;
  border-color: #bdbdbd;
  border-color: var(--hxCheckbox-disabled-checked-label-bordercolor, #bdbdbd);
  color: #ffffff;
  color: var(--hxCheckbox-disabled-checked-label-color, #ffffff);
}

.checkbox-spec hx-checkbox-control[hx-dirty] > input[type="checkbox"]:invalid.mock-focus {
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.checkbox-spec hx-checkbox-control[hx-dirty] > input[type="checkbox"]:invalid.mock-focus::-ms-check {
  border-color: #d6251f;
  border-color: var(--hxCheckbox-invalid-bordercolor, #d6251f);
}

.checkbox-spec hx-checkbox-control[hx-dirty] > input[type="checkbox"]:invalid.mock-focus ~ label > hx-checkbox {
  border-color: #d6251f;
  border-color: var(--hxCheckbox-invalid-bordercolor, #d6251f);
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.checkbox-spec hx-checkbox-control[hx-dirty] > input[type="checkbox"]:invalid.mock-hover ~ label > hx-checkbox {
  border-color: #d6251f;
  border-color: var(--hxCheckbox-invalid-hover-bordercolor, #d6251f);
  color: #d6251f;
  color: var(--hxCheckbox-invalid-hover-color, #d6251f);
}

.checkbox-spec hx-checkbox-control.hxInvalid > input[type="checkbox"]:enabled.mock-focus {
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.checkbox-spec hx-checkbox-control.hxInvalid > input[type="checkbox"]:enabled.mock-focus::-ms-check {
  border-color: #d6251f;
  border-color: var(--hxCheckbox-invalid-bordercolor, #d6251f);
}

.checkbox-spec hx-checkbox-control.hxInvalid > input[type="checkbox"]:enabled.mock-focus ~ label > hx-checkbox {
  border-color: #d6251f;
  border-color: var(--hxCheckbox-invalid-bordercolor, #d6251f);
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.checkbox-spec hx-checkbox-control.hxInvalid > input[type="checkbox"]:enabled.mock-hover ~ label > hx-checkbox {
  border-color: #d6251f;
  border-color: var(--hxCheckbox-invalid-hover-bordercolor, #d6251f);
  color: #d6251f;
  color: var(--hxCheckbox-invalid-hover-color, #d6251f);
}

@supports (--modern: true) {
  .checkbox-spec hx-checkbox-control > label > hx-checkbox {
    display: inline-block;
  }
}

.choice-tile-spec label.hxChoice > input.pseudo-focus + hx-tile {
  box-shadow: 0 0 4px rgba(125, 5, 114, 0.5);
}

.choice-tile-spec label.hxChoice > input + hx-tile.pseudo-hover {
  background-color: #ffffff;
  background-color: var(--hxChoiceTile-hover-bgcolor, #ffffff);
  border: 1px solid #7d0572;
  border: 1px solid var(--hxChoiceTile-hover-bordercolor, #7d0572);
}

.choice-tile-spec label.hxChoice > input + hx-tile.pseudo-hover > header {
  color: #7d0572;
  color: var(--hxChoiceTile-hover-header-color, #7d0572);
}

.choice-tile-spec label.hxChoice > input + hx-tile.pseudo-hover > p {
  color: #333333;
  color: var(--hxChoiceTile-hover-paragraph-color, #333333);
}

.choice-tile-spec label.hxChoice > input + hx-tile.pseudo-hover .hx-tile-icon {
  color: #7d0572;
  color: var(--hxChoiceTile-hover-hxTileIcon-color, #7d0572);
}

.choice-tile-spec label.hxChoice > input + hx-tile.hxSubdued.pseudo-hover {
  opacity: 1;
}

.choice-tile-spec label.hxChoice > input[invalid].pseudo-focus + hx-tile {
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.choice-tile-spec label.hxChoice > input[invalid].pseudo-focus + hx-tile .hx-tile-icon {
  color: #d6251f;
  color: var(--hxChoiceTile-invalid-hxTileIcon-color, #d6251f);
}

.choice-tile-spec label.hxChoice > input[invalid] + hx-tile.pseudo-hover {
  background-color: #fddcdc;
  background-color: var(--hxChoiceTile-invalid-hover-bgcolor, #fddcdc);
  border-color: #d6251f;
  border-color: var(--hxChoiceTile-invalid-hover-borderColor, #d6251f);
  color: #424242;
  color: var(--hxChoiceTile-invalid-hover-color, #424242);
}

.choice-tile-spec label.hxChoice > input[invalid] + hx-tile.pseudo-hover > header {
  color: inherit;
}

.choice-tile-spec label.hxChoice > input[invalid] + hx-tile.pseudo-hover .hx-tile-icon {
  color: #d6251f;
  color: var(--hxChoiceTile-invalid-hxTileIcon-color, #d6251f);
}

.choice-tile-spec label.hxChoice > input:disabled + hx-tile.pseudo-hover {
  background-color: #ffffff;
  background-color: var(--hxChoiceTile-disabled-bgcolor, #ffffff);
  border-color: #d8d8d8;
  border-color: var(--hxChoiceTile-disabled-bordercolor, #d8d8d8);
  border-width: 1px;
  color: #bdbdbd;
  color: var(--hxChoiceTile-disabled-color, #bdbdbd);
  cursor: not-allowed;
}

.choice-tile-spec label.hxChoice > input:disabled + hx-tile.pseudo-hover > header {
  color: inherit;
}

.dropdown-select-spec hx-select-control {
  /* ----- Pristine --------------- */
  /* ----- Invalid ---------------*/
}

.dropdown-select-spec hx-select-control > select.mock-focus {
  outline: none;
  /* ----- Disabled --------------- */
}

.dropdown-select-spec hx-select-control > select.mock-focus:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #424242;
}

.dropdown-select-spec hx-select-control > select.mock-focus ~ hx-select {
  border: 1px solid var(--hxDropdown-hxSelect-focused-borderColor, #0051b7);
  box-shadow: 0 0 4px rgba(0, 81, 183, 0.5);
}

.dropdown-select-spec hx-select-control > select.mock-focus:disabled {
  outline: none;
}

.dropdown-select-spec hx-select-control > select.mock-focus:disabled:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #424242;
}

.dropdown-select-spec hx-select-control > select.mock-focus:disabled ~ hx-select {
  border: 1px solid var(--hxDropdown-hxSelect-disabled-focused-borderColor, #bdbdbd);
  box-shadow: 0 0 4px rgba(0, 81, 183, 0.5);
}

.dropdown-select-spec hx-select-control.hxInvalid > select.mock-focus:enabled,
.dropdown-select-spec hx-select-control[hx-dirty] > select.mock-focus:enabled:invalid {
  outline: none;
}

.dropdown-select-spec hx-select-control.hxInvalid > select.mock-focus:enabled:-moz-focusring,
.dropdown-select-spec hx-select-control[hx-dirty] > select.mock-focus:enabled:invalid:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #424242;
}

.dropdown-select-spec hx-select-control.hxInvalid > select.mock-focus:enabled ~ hx-select,
.dropdown-select-spec hx-select-control[hx-dirty] > select.mock-focus:enabled:invalid ~ hx-select {
  border: 2px solid var(--hxDropdown-hxSelect-invalid-focused-borderColor, #760300);
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.email-input-spec hx-email-control {
  /* ----- Pristine --------------- */
  /* ----- Disabled --------------- */
  /* ----- Changed / Touched --------------- */
  /* ----- Styled Invalid --------------- */
}

.email-input-spec hx-email-control > input[type="email"].mock-focus {
  border-bottom: 1px solid #0051b7;
  outline: 0;
}

.email-input-spec hx-email-control > input[type="email"]:disabled.mock-focus {
  border: 1px solid #bdbdbd;
}

.email-input-spec hx-email-control[hx-dirty] > input[type="email"]:invalid.mock-focus {
  border-bottom: 1px solid #d6251f;
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.email-input-spec hx-email-control.hxInvalid > input[type="email"]:enabled.mock-focus {
  border-bottom: 1px solid #d6251f;
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.file-input-spec hx-file-control input[type="file"].mock-focus ~ label > hx-file-input {
  box-shadow: 0 0 4px rgba(0, 81, 183, 0.5);
}

.file-input-spec hx-file-control input[type="file"].mock-active ~ label > hx-file-input.hxBtn {
  background-color: transparent;
  border-color: #003482;
  border-style: solid;
  border-width: 1px;
  color: #003482;
}

.file-input-spec hx-file-control input[type="file"].mock-active ~ label > hx-file-input.hxPrimary {
  background-color: #003482;
  color: #ffffff;
}

.file-input-spec hx-file-control input[type="file"].mock-active ~ label > hx-file-input.hxTertiary {
  background-color: transparent;
  border-color: transparent;
  color: #003482;
}

.file-input-spec hx-file-control hx-file-input.hxBtn.mock-hover {
  background-color: transparent;
  border: 1px solid #0051b7;
  color: #0051b7;
}

.file-input-spec hx-file-control hx-file-input.hxBtn.mock-hover.hxPrimary {
  background-color: #0051b7;
  border: none;
  color: #ffffff;
}

.file-input-spec hx-file-control hx-file-input.hxBtn.mock-hover.hxTertiary {
  background-color: transparent;
  border-color: transparent;
  color: #0051b7;
}

.menu-positioning-spec [id^="target"] {
  align-items: center;
  background-color: #e0e0e0;
  display: flex;
  height: 6rem;
  justify-content: center;
  position: fixed;
  width: 6rem;
}

.menu-positioning-spec [id$="quad1"],
.menu-positioning-spec [id$="quad4"] {
  top: 33%;
}

.menu-positioning-spec [id$="quad2"],
.menu-positioning-spec [id$="quad3"] {
  top: 67%;
}

.menu-positioning-spec [id$="quad1"],
.menu-positioning-spec [id$="quad2"] {
  left: 67%;
}

.menu-positioning-spec [id$="quad3"],
.menu-positioning-spec [id$="quad4"] {
  left: 33%;
}

.menu-positioning-spec #target-center,
.menu-positioning-spec #target-quad1,
.menu-positioning-spec #target-quad2,
.menu-positioning-spec #target-quad3,
.menu-positioning-spec #target-quad4 {
  transform: translate(-50%, -50%);
}

.menu-positioning-spec #target-center {
  height: 9rem;
  left: 50%;
  top: 50%;
  width: 9rem;
}

.menu-positioning-spec #target-topLeft {
  left: 0;
  top: 0;
}

.menu-positioning-spec #target-topRight {
  right: 0;
  top: 0;
}

.menu-positioning-spec #target-bottomLeft {
  bottom: 0;
  left: 0;
}

.menu-positioning-spec #target-bottomRight {
  bottom: 0;
  right: 0;
}

.specs-panel .spec.scroll {
  height: 20rem;
  overflow: hidden;
}

.specs-panel .spec.visible {
  /* Visualize Invisible Panel Boundaries */
}

.specs-panel .spec.visible hx-panel,
.specs-panel .spec.visible .hxPanel {
  border: 1px dashed #9e9e9e;
}

.specs-panel .spec.visible hx-panel > hx-panelhead,
.specs-panel .spec.visible hx-panel > header,
.specs-panel .spec.visible .hxPanel > hx-panelhead,
.specs-panel .spec.visible .hxPanel > header {
  border-bottom: 1px dashed #9e9e9e;
}

.specs-panel .spec.visible hx-panel > hx-panelfoot,
.specs-panel .spec.visible hx-panel > footer,
.specs-panel .spec.visible .hxPanel > hx-panelfoot,
.specs-panel .spec.visible .hxPanel > footer {
  border-top: 1px dashed #9e9e9e;
}

.popover-spec #popover-in-scrolling-container hx-div[scroll="vertical"] {
  border: 1px solid;
  height: 15rem;
  width: 30rem;
}

.popover-spec .popover-appearance {
  display: flex;
  flex-wrap: wrap;
  z-index: 0;
}

.popover-spec .popover-appearance hx-popover {
  display: block;
  margin: 20px;
  position: relative;
}

.radio-spec hx-radio-control > label > hx-radio {
  display: none;
}

.radio-spec hx-radio-control > input[type="radio"].mock-focus {
  box-shadow: 0 0 4px rgba(0, 81, 183, 0.5);
}

.radio-spec hx-radio-control > input[type="radio"].mock-focus ~ label > hx-radio {
  box-shadow: 0 0 4px rgba(0, 81, 183, 0.5);
}

.radio-spec hx-radio-control > input[type="radio"].mock-hover {
  color: #0051b7;
  color: var(--hxRadio-pristine-radio-hover-color, #0051b7);
}

.radio-spec hx-radio-control > input[type="radio"].mock-hover::-ms-check {
  background-color: #ffffff;
  background-color: var(--hxRadio-pristine-radio-hover-ie-bgcolor, #ffffff);
  color: #0051b7;
  color: var(--hxRadio-pristine-radio-hover-ie-color, #0051b7);
}

.radio-spec hx-radio-control > input[type="radio"].mock-hover ~ label > hx-radio {
  background-color: #ffffff;
  background-color: var(--hxRadio-pristine-radio-facade-bgcolor, #ffffff);
  border: 1px solid currentColor;
  color: #0051b7;
  color: var(--hxRadio-pristine-radio-facade-color, #0051b7);
}

.radio-spec hx-radio-control > input[type="radio"]:disabled.mock-focus {
  box-shadow: 0 0 4px rgba(0, 81, 183, 0.5);
}

.radio-spec hx-radio-control > input[type="radio"]:disabled.mock-focus ~ label > hx-radio {
  border: 1px solid currentColor;
  color: #bdbdbd;
  color: var(--hxRadio-disabled-radio-facade-color, #bdbdbd);
  cursor: not-allowed;
}

.radio-spec hx-radio-control > input[type="radio"]:disabled.mock-hover::-ms-check {
  background-color: #eeeeee;
  background-color: var(--hxRadio-disabled-radio-hover-ie-bgcolor, #eeeeee);
  border: 1px solid currentColor;
  color: #bdbdbd;
  color: var(--hxRadio-disabled-radio-hover-ie-color, #bdbdbd);
}

.radio-spec hx-radio-control > input[type="radio"]:disabled.mock-hover ~ label > hx-radio {
  border: 1px solid currentColor;
  color: #bdbdbd;
  color: var(--hxRadio-disabled-radio-facade-color, #bdbdbd);
  cursor: not-allowed;
}

.radio-spec hx-radio-set[hx-dirty] input[type="radio"]:enabled:invalid.mock-focus,
.radio-spec hx-radio-set.hxInvalid input[type="radio"]:enabled.mock-focus {
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.radio-spec hx-radio-set[hx-dirty] input[type="radio"]:enabled:invalid.mock-focus ~ label > hx-radio,
.radio-spec hx-radio-set.hxInvalid input[type="radio"]:enabled.mock-focus ~ label > hx-radio {
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.radio-spec hx-radio-set[hx-dirty] input[type="radio"]:enabled:invalid.mock-hover::-ms-check,
.radio-spec hx-radio-set.hxInvalid input[type="radio"]:enabled.mock-hover::-ms-check {
  background-color: #fddcdc;
  background-color: var(--hxRadio-invalid-radio-hover-ie-bgcolor, #fddcdc);
  border: 1px solid currentColor;
  color: #d6251f;
  color: var(--hxRadio-invalid-radio-hover-ie-color, #d6251f);
}

.radio-spec hx-radio-set[hx-dirty] input[type="radio"]:enabled:invalid.mock-hover ~ label > hx-radio,
.radio-spec hx-radio-set.hxInvalid input[type="radio"]:enabled.mock-hover ~ label > hx-radio {
  background-color: #fddcdc;
  background-color: var(--hxRadio-invalid-radio-facade-hover-bgcolor, #fddcdc);
  border: 1px solid currentColor;
  color: #d6251f;
  color: var(--hxRadio-invalid-radio-facade-hover-color, #d6251f);
}

@supports (--modern: true) {
  .radio-spec hx-radio-control > label > hx-radio {
    display: inline-block;
  }
}

.textarea-spec hx-textarea-control > textarea.mock-focus {
  border-bottom: 1px solid #0051b7;
  outline: 0;
}

.textarea-spec hx-textarea-control > textarea:disabled.mock-focus {
  border: 1px solid #bdbdbd;
}

.textarea-spec hx-textarea-control[hx-dirty] > textarea:invalid.mock-focus {
  border-bottom: 1px solid #d6251f;
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.textarea-spec hx-textarea-control.hxInvalid > textarea:enabled.mock-focus {
  border-bottom: 1px solid #d6251f;
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.text-input-spec hx-text-control {
  /* ----- Pristine --------------- */
  /* ----- Disabled --------------- */
  /* ----- Changed / Touched --------------- */
  /* ----- Styled Invalid --------------- */
}

.text-input-spec hx-text-control > input[type="text"].mock-focus {
  border-bottom: 1px solid #0051b7;
  outline: 0;
}

.text-input-spec hx-text-control > input[type="text"]:disabled.mock-focus {
  border: 1px solid #bdbdbd;
}

.text-input-spec hx-text-control[hx-dirty] > input[type="text"]:invalid.mock-focus {
  border-bottom: 1px solid #d6251f;
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.text-input-spec hx-text-control.hxInvalid > input[type="text"]:enabled.mock-focus {
  border-bottom: 1px solid #d6251f;
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.password-spec hx-password-control > input[type="password"].mock-focus {
  border-bottom: 1px solid #0051b7;
  outline: 0;
}

.password-spec hx-password-control > input[type="password"]:disabled.mock-focus {
  border: 1px solid #bdbdbd;
}

.password-spec hx-password-control[hx-dirty] > input[type="password"]:invalid.mock-focus {
  border-bottom: 1px solid #d6251f;
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.password-spec hx-password-control.hxInvalid > input[type="password"]:enabled.mock-focus {
  border-bottom: 1px solid #d6251f;
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.drawer-spec .dialog-helpers {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow-x: visible;
}

.drawer-spec .dialog-helpers > * {
  flex-shrink: 0;
}

.search-spec hx-search-control > input[type="search"].mock-focus ~ hx-search,
.search-spec hx-search-control > button.hxClear.mock-focus ~ hx-search {
  border: 1px solid #0051b7;
  box-shadow: 0 0 4px rgba(0, 81, 183, 0.5);
}

.search-spec hx-search-control > input[type="search"]:disabled ~ hx-search {
  background-color: #f5f5f5;
  border: 1px solid #bdbdbd;
  color: #d8d8d8;
}

.search-spec hx-search-control > input[type="search"]:disabled.mock-focus ~ hx-search {
  border: 1px solid #bdbdbd;
}

.search-spec hx-search-control[hx-dirty] > input[type="search"]:enabled.mock-focus ~ hx-search {
  border: 1px solid #0051b7;
  box-shadow: 0 0 4px rgba(0, 81, 183, 0.5);
}

.search-spec hx-search-control[hx-dirty] > input[type="search"]:invalid.mock-focus ~ hx-search {
  border: 2px solid #d6251f;
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.search-spec hx-search-control.hxInvalid > input[type="search"]:enabled.mock-focus ~ hx-search,
.search-spec hx-search-control.hxInvalid > button.hxClear.mock-focus ~ hx-search {
  border: 2px solid #d6251f;
  box-shadow: 0 0 4px rgba(214, 37, 31, 0.5);
}

.search-spec hx-search-control > input[type="search"] ~ button.mock-focus {
  outline: 1px dotted #757575;
  outline-offset: -6px;
}

.button-spec .hxBtn[class*="mock"] {
  pointer-events: none;
}

.button-spec .hxBtn.mock-hover {
  background-color: transparent;
  border: 1px solid #0051b7;
  color: #0051b7;
}

.button-spec .hxBtn.mock-active {
  background-color: transparent;
  border-color: #003482;
  border-style: solid;
  border-width: 1px;
  color: #003482;
}

.button-spec .hxBtn.mock-focus {
  background-color: transparent;
  border: 1px solid #0051b7;
  color: #0051b7;
}

.button-spec .hxBtn.hxPrimary.mock-hover {
  background-color: #0051b7;
  border: none;
  color: #ffffff;
}

.button-spec .hxBtn.hxPrimary.mock-active {
  background-color: #003482;
  color: #ffffff;
}

.button-spec .hxBtn.hxPrimary.mock-focus {
  background-color: #0051b7;
  color: #ffffff;
  outline: none;
}

.button-spec .hxBtn.hxTertiary.mock-hover {
  background-color: transparent;
  border-color: transparent;
  color: #0051b7;
}

.button-spec .hxBtn.hxTertiary.mock-active {
  background-color: transparent;
  border-color: transparent;
  color: #003482;
}

.button-spec .hxBtn.hxTertiary.mock-focus {
  background-color: transparent;
  border-color: transparent;
  color: #0051b7;
  outline: none;
}

.hxBtn.beta-hxDark,
a[href].hxBtn.beta-hxDark {
  border-color: #367ed4;
  color: #367ed4;
}

.hxBtn.beta-hxDark:hover,
a[href].hxBtn.beta-hxDark:hover {
  color: #ffffff;
}

.hxBtn.beta-hxDark:active,
a[href].hxBtn.beta-hxDark:active,
a.hxBtn.beta-hxDark.pseudo-active {
  border-color: transparent;
}

.hxBtn.beta-hxDark:focus,
a[href].hxBtn.beta-hxDark:focus {
  box-shadow: 0 0 4px 2px rgba(54, 126, 212, 0.6);
}

dl:not(.hxList) dd {
  margin-bottom: 0.5em;
  margin-left: 1em;
}

/* Beta Auto Grid Styles */
.hxRow.hxAuto > .hxCol {
  flex-grow: 0;
}

.hxRow .hxCol.hxAuto {
  flex: 0 0 auto;
}

p.comfortable,
header > p {
  max-width: 80ch;
}
/* ==================================================== *\
 * Styles below are NOT distributed with HelixUI assets *
\* ==================================================== */
/* ---------------------------------------- *\
 * CONFIG
\* ---------------------------------------- */
/* ---------------------------------------- *\
 * MIXINS
\* ---------------------------------------- */
/* ---------------------------------------- *\
 * RESETS
\* ---------------------------------------- */
/* ---------------------------------------- *\
 * BASE
\* ---------------------------------------- */
iframe[src*="codepen.io"] {
  border: 2px solid #424242;
  height: 25rem;
  width: 100%;
}
#head {
  display: flex;
  padding-right: 1rem;
}
#head > * {
  display: flex;
  align-items: center;
  align-content: center;
  flex-grow: 1;
}
#head > *:first-child {
  flex: 0 0 15rem;
}
#head > *:last-child {
  justify-content: flex-end;
}
#head > * > * + * {
  margin-left: 0.5rem;
}
#head .brand-logo {
  align-items: center;
  display: flex;
  height: 3.5rem;
  justify-content: center;
  width: 15rem;
}
#head .brand-logo:focus {
  box-shadow: none;
  outline: none;
}
#head .brand-logo:focus img {
  outline: 1px dotted #b6e3eb;
  outline-offset: 0.25rem;
}
#head .brand-logo img {
  height: 2rem;
}
/* ---------------------------------------- *\
 * COMPONENTS
\* ---------------------------------------- */
min-version {
  background-color: #ec407a;
  border-radius: 1em;
  color: #ffffff;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  padding: 0.25em 0.75em;
  vertical-align: middle;
}
[app-loading] {
  display: none;
  text-align: center;
}
[app-loading] hx-busy {
  font-size: 2rem;
}
[app-loading] hx-busy + * {
  margin-top: 0.5rem;
}
[v-cloak] {
  height: 0;
  opacity: 0;
}
[v-cloak] + [app-loading] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.media {
  display: flex;
  padding: 1rem;
}
.media__icon {
  flex-shrink: 0;
}
.media__body {
  flex-grow: 1;
  margin-left: 1rem;
}
/* ---------------------------------------- *\
 * PAGE / CATEGORY STYLING
\* ---------------------------------------- */
/* ----- Element Page Styling ----- */
.element-content dl.memberList {
  max-width: 80ch;
}
/* ----- Front Page Styling ----- */
.front-page {
  background-image: linear-gradient(0deg, #b6e3eb, #ffffff 20%);
}
/* ----- Guide Page Styline ----- */
.guide-content hx-icon.native-support {
  color: #4caf51;
}
.guide-content hx-icon.polyfill-needed {
  color: #d32f2f;
}