/*
 * DO NOT EDIT THIS FILE.
 * Edit .pcss.css file instead and recompile.
*/

/**
 * @file
 * Styles for keys and legends.
 */

/*
  Custom CSS properties and mixins.
  These are "compiled" by postcss/postcss-custom-properties for IE11 compatibility.
  CSS variables (those that start with --) are included in the generated CSS. Sass style variables (those that start with $) are for internal processing.
*/

/* Internal variables */

/*1px */

/*16px */

/*4px */

/*5.33333333px */

/*8px */

/*12px */

/*20px */

/*24px, */

/*32px */

/*44px (named after omicron variant BS.2.75.2) */

/*48px */

/*desktop + 32px; */

/*max-width + 64px; */

/* RGB colors, useful for when you need to include a color in an RGBA set. */

/* Mixins */

/* */

/* Hide elements visually, but keep them available for screen-readers. */

/* */

/* Used for information required for screen-reader users to understand and use */

/* the site where visual display is undesirable. Information provided in this */

/* manner should be kept concise, to avoid unnecessary burden on the user. */

/* "!important" is used to prevent unintentional overrides. */

/* */

/*.key {*/

/*  padding: var(--half-space) var(--double-space);*/

/*  display: flex;*/

/*  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='1' stroke-dasharray='1%2c3' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");*/

/*  gap: var(--half-space) var(--space);*/

/*  flex-wrap: wrap;*/

/*  &__title {*/

/*      @include bold-label;*/

/*      width: 100%;*/

/*   }*/

/*}*/

.key {
  padding: 0.5em!important;
}

.key {
  border-top: none;
  margin: 0;
  background: url(../../images/dotted-vertical.png) repeat-y, url(../../images/dotted-vertical.png) repeat-y right;
}

.key .key__title {
  text-transform: uppercase;
  font-family: var(--sans-serif);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 600;
    display: flex;
    margin: -10px -0.5rem 0;
  }

.key .key__title > span {
    flex-shrink: 0;
    margin-top: -10px;
    padding-left: 2px;
    padding-right: 5px;
  }

.key .key__title:before {
    content: ' ';
    height: 1px;
    background-image: url(../../images/dotted.png);
    background-repeat: repeat-x;
    width: var(--space);
  }

.key .key__title:after {
    content: ' ';
    height: 1px;
    width: 100%;
    background-image: url(../../images/dotted.png);
    background-repeat: repeat-x;
    display: block;
  }

.key .key__rows {
    margin-left: var(--half-space);
    margin-right: var(--half-space);
  }

.key .key__row {
    display: inline-block;
    margin-right: var(--space);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }

.key--simple  {
  padding-left: 0!important;
  padding-right: 0!important;
}

.key--simple  {
  margin-bottom: var(--space);
}

.key--simple .key__row {
     font-size: var(--fs-small);
     line-height: var(--lh-small);
   }