@charset "UTF-8";
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/* stylelint-disable indentation  */
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';
*/
@font-face {
  font-family: Bitter;
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Bitter-Regular.eot");
  src: url("../fonts/Bitter-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Bitter-Regular.woff2") format("woff2"), url("../fonts/Bitter-Regular.woff") format("woff"), url("../fonts/Bitter-Regular.ttf") format("truetype"); }
@font-face {
  font-family: Bitter;
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/Bitter-Bold.eot");
  src: url("../fonts/Bitter-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Bitter-Bold.woff2") format("woff2"), url("../fonts/Bitter-Bold.woff") format("woff"), url("../fonts/Bitter-Bold.ttf") format("truetype"); }
@font-face {
  font-family: Bitter;
  font-style: italic;
  font-weight: normal;
  src: url("../fonts/Bitter-Italic.eot");
  src: url("../fonts/Bitter-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/Bitter-Italic.woff2") format("woff2"), url("../fonts/Bitter-Italic.woff") format("woff"), url("../fonts/Bitter-Italic.ttf") format("truetype"); }
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/OpenSans-Regular-webfont.eot");
  src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"); }
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: normal;
  src: url("../fonts/OpenSans-Italic-webfont.eot");
  src: url("../fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Italic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Italic-webfont.woff") format("woff"), url("../fonts/OpenSans-Italic-webfont.ttf") format("truetype"); }
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/OpenSans-Semibold-webfont.eot");
  src: url("../fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Semibold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Semibold-webfont.woff") format("woff"), url("../fonts/OpenSans-Semibold-webfont.ttf") format("truetype"); }
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/OpenSans-Bold-webfont.eot");
  src: url("../fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype"); }
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/muli-regular-webfont.woff2") format("woff2"), url("../fonts/muli-regular-webfont.woff") format("woff"), url("../fonts/Muli-Regular.ttf") format("truetype"); }
@font-face {
  font-family: 'Muli-Light';
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/muli-light-webfont.woff2") format("woff2"), url("../fonts/muli-light-webfont.woff") format("woff"), url("../fonts/Muli-Light.ttf") format("truetype"); }
@font-face {
  font-family: 'Muli-XLight';
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/muli-extralight-webfont.woff2") format("woff2"), url("../fonts/muli-extralight-webfont.woff") format("woff"), url("../fonts/Muli-ExtraLight.ttf") format("truetype"); }
@font-face {
  font-family: 'Muli-Bold';
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/muli-bold-webfont.woff2") format("woff2"), url("../fonts/muli-bold-webfont.woff") format("woff"), url("../fonts/Muli-Bold.ttf") format("truetype"); }
@font-face {
  font-family: 'Muli-XBold';
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/muli-extrabold-webfont.woff2") format("woff2"), url("../fonts/muli-extrabold-webfont.woff") format("woff"), url("../fonts/Muli-ExtraBold.ttf") format("truetype"); }
@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/fa-light-300.eot");
  src: url("../fonts/fa-light-300.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-light-300.woff2") format("woff2"), url("../fonts/fa-light-300") format("woff"), url("../fonts/fa-light-300") format("truetype"); }
@font-face {
  font-family: "GeometriaExtraBold";
  src: url("../fonts/5274692/7df46830-cc76-49e2-9a31-9b5e66f6d2f0.eot?#iefix");
  src: url("../fonts/5274692/7df46830-cc76-49e2-9a31-9b5e66f6d2f0.eot?#iefix") format("eot"), url("../fonts/5274692/94b1cc1e-d807-42ca-aaf3-6bbf596ceb05.woff2") format("woff2"), url("../fonts/5274692/f2ea151a-abb2-4dac-8927-6a9f59f18544.woff") format("woff"), url("../fonts/5274692/48782685-d39e-4ac3-ae74-6a94efe87e2f.ttf") format("truetype"); }
@font-face {
  font-family: "GeometriaRegular";
  src: url("../fonts/5274347/dc7adbb7-0f16-4711-a968-cbbf5f21e4aa.eot?#iefix");
  src: url("../fonts/5274347/dc7adbb7-0f16-4711-a968-cbbf5f21e4aa.eot?#iefix") format("eot"), url("../fonts/5274347/01606bdd-ce1e-44fe-b967-3595b25e4287.woff2") format("woff2"), url("../fonts/5274347/23691adf-aef8-4117-a945-0b867dc6a56e.woff") format("woff"), url("../fonts/5274347/c6264b03-c0a6-4b84-a6fb-4ca3da81a5e7.ttf") format("truetype"); }
/* stylelint-disable selector-class-pattern */
/*THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Base

A base layer of styling can be applied to an area of your site by adding the `ds-base` class. If you're implementing the design system on a new site, you'd likely want to apply this class to the `<body>` element. On existing sites this might not be desirable. In which case, you could apply the `ds-base` class to an element which scopes the styling to itself and its children.

Specifically, the base styling sets the following properties:

- `color`
- `font-family`
- `font-size`
- `line-height`

.ds-base--inverse - Applies an inverse `color` and `background-color`

Markup:
<div class="ds-base {{modifier}} ds-u-padding--2">
  {{lorem-l}}
</div>

Style guide: style.base
*/
.ds-base, .ds-base--inverse {
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5; }

.ds-base {
  color: #212121; }

.ds-base--inverse {
  background-color: #112e51;
  color: #ffffff; }

/* stylelint-enable */
/* stylelint-disable selector-class-pattern */
/*THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Typography

The design system doesn't style base HTML typography elements (like `h1`, `h2`, `p`, etc) in order to avoid conflicting with any existing site styles. You should instead use one of the base typography classes below to apply styling:

- `ds-display`
- `ds-title`
- `ds-h{level}` where `level` is a number between `1` and `6`
- `ds-text` and `ds-text--lead`

Note: The only base HTML element the design system applies styling to is the `<a>` element. To prevent this, you can override the `$ds-include-base-html-rulesets` Sass variable and set it to `false`.

Markup:
<h1 class="ds-display">Display</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-title">Title</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-h1">Heading 1</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-h2">Heading 2</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-h3">Heading 3</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-h4">Heading 4</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-h5">Heading 5</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-h6">Heading 6</h1>
<p class="ds-text--lead ds-u-measure--wide">
  <strong>Lead text.</strong>  {{lorem-l}}
</p>
<p class="ds-text ds-u-measure--wide">
  <strong>Body text.</strong>  {{ lorem-l }}
</p>

Style guide: style.typography
*/
a {
  color: #0071bc; }
  a:hover, a:focus {
    color: #205493; }
  a:active {
    color: #112e51; }

.ds-display,
.ds-title,
.ds-h1,
.ds-h2,
.ds-h3,
.ds-h4,
.ds-h5,
.ds-h6 {
  line-height: 1.3;
  margin: 0; }

.ds-display,
.ds-h1,
.ds-h2,
.ds-h3,
.ds-h4 {
  font-weight: 700; }

.ds-h1,
.ds-h2,
.ds-h3,
.ds-h4,
.ds-h5,
.ds-h6 {
  margin-bottom: 0.5em;
  margin-top: 1.5em; }
  .ds-h1:first-child,
  .ds-h2:first-child,
  .ds-h3:first-child,
  .ds-h4:first-child,
  .ds-h5:first-child,
  .ds-h6:first-child {
    margin-top: 0; }
  .ds-h1:last-child,
  .ds-h2:last-child,
  .ds-h3:last-child,
  .ds-h4:last-child,
  .ds-h5:last-child,
  .ds-h6:last-child {
    margin-bottom: 0; }

.ds-display {
  font-size: 36px; }
  @media (min-width: 544px) {
    .ds-display {
      font-size: 48px; } }
  @media (min-width: 768px) {
    .ds-display {
      font-size: 60px; } }

.ds-title {
  font-size: 36px;
  font-weight: 400; }
  @media (min-width: 768px) {
    .ds-title {
      font-size: 48px; } }

.ds-h1 {
  font-size: 36px; }

.ds-h2 {
  font-size: 24px; }

.ds-h3 {
  font-size: 21px; }

.ds-h4 {
  font-size: 18px; }

.ds-h5 {
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase; }

.ds-h6 {
  color: #5b616b;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase; }

.ds-base--inverse .ds-h6 {
  color: #bac5cf; }

.ds-text,
.ds-text--lead {
  line-height: 1.5;
  margin-bottom: 1em;
  margin-top: 1em; }
  .ds-text:first-child,
  .ds-text--lead:first-child {
    margin-top: 0; }
  .ds-text:last-child,
  .ds-text--lead:last-child {
    margin-bottom: 0; }

.ds-text {
  font-size: 16px; }

.ds-text--lead {
  font-size: 18px; }

/*
Responsive typography

The `ds-display` and `ds-title` classes are responsive by default. To apply responsive typography elsewhere, use the [font size utility class](/utilites/font-size#responsive). Since the base typography margins and line height is measured in `em` units, they'll automatically adjust as you change the font size.

_Resize your browser to see each breakpoint in action:_

Markup:
<article class="ds-base--inverse ds-u-padding--2">
  <h1 class="ds-display">Responsive heading</h1>
  <p class="ds-text ds-u-font-size--small ds-u-md-font-size--base ds-u-lg-font-size--lead ds-u-measure--wide">
    <strong>Responsive body text.</strong>
    {{ lorem-l }}
  </p>
  <h2 class="ds-h2 ds-u-font-size--h4 ds-u-md-font-size--h3 ds-u-lg-font-size--h2">Responsive subheading</h2>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted-inverse">{{ lorem-l }}</p>
</div>

Style guide: style.typography.responsive
*/
/*
Customizing type sizes

The following Sass variables can be overridden to change the type sizes:

- `$small-font-size`
- `$base-font-size`
- `$lead-font-size`
- `$h6-font-size`
- `$h5-font-size`
- `$h4-font-size`
- `$h3-font-size`
- `$h2-font-size`
- `$h1-font-size`
- `$title-font-size`
- `$display-font-size`

Style guide: style.typography.variables
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Alert

@uswds https://standards.usa.gov/components/alerts

Alerts keep users informed of important and sometimes time-sensitive changes.

.ds-c-alert--error - Error message
.ds-c-alert--warn - Warning message
.ds-c-alert--success - Success message
.ds-c-alert--hide-icon - Hide icon

Markup:
<div class="ds-c-alert {{modifier}}">
  <div class="ds-c-alert__body">
    <h3 class="ds-c-alert__heading">Status heading</h3>
    <p class="ds-c-alert__text">Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing elit, sed do eiusmod.</p>
  </div>
</div>

Style guide: components.alert
*/
.ds-c-alert {
  background-color: #e1f3f8;
  background-image: url("../images/info.svg");
  background-position: 16px 16px;
  background-repeat: no-repeat;
  background-size: 40px;
  border-left: 8px solid #02bfe7;
  box-sizing: border-box;
  color: #212121;
  min-height: 56px;
  padding: 16px;
  position: relative; }
  .ds-c-alert.ds-c-alert--hide-icon {
    background-image: none; }
  .ds-c-alert a {
    color: #205493; }
    .ds-c-alert a:focus, .ds-c-alert a:hover {
      color: #112e51; }
  .ds-c-alert ul:last-child {
    margin-bottom: 0; }
  .ds-c-alert ul:first-child {
    margin-top: 0; }

.ds-c-alert__body {
  padding-left: 48px; }

.ds-c-alert--hide-icon .ds-c-alert__body {
  padding-left: 0; }

.ds-c-alert__heading {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  margin-top: 0; }

.ds-c-alert__text {
  margin-bottom: 0;
  margin-top: 0; }

.ds-c-alert--error {
  background-color: #f9dede;
  background-image: url("../images/error.svg");
  border-color: #e31c3d; }

.ds-c-alert--warn {
  background-color: #fff1d2;
  background-image: url("../images/warning.svg");
  border-color: #fdb81e; }

.ds-c-alert--success {
  background-color: #e7f4e4;
  background-image: url("../images/success.svg");
  border-color: #2e8540; }

/*
Additional examples

Alerts support various types and lengths of content, including lists and links. You can use the [measure utility]({{root}}/utilities/measure) to maintain a legible line length.

Markup:
<div class="ds-c-alert">
  <div class="ds-c-alert__body ds-u-measure--wide">
    <p class="ds-c-alert__text">{{lorem-s}}</p>
  </div>
</div>
<div class="ds-c-alert ds-u-margin-top--2">
  <div class="ds-c-alert__body ds-u-measure--wide">
    <p class="ds-c-alert__text">{{lorem-l}}</p>
  </div>
</div>
<div class="ds-c-alert ds-u-margin-top--2">
  <div class="ds-c-alert__body ds-u-measure--wide">
    <h3 class="ds-c-alert__heading">Status heading</h3>
    <p class="ds-c-alert__text">{{lorem-m}}</p>
    <ul class="ds-c-list">
      <li>Alert list item</li>
      <li>Alert list item</li>
    </ul>
    <a href="javascript:void(0);">Link text</a>
  </div>
</div>

Style guide: components.alert.variations
*/
/*
`<Alert>`

@react-component Alert

Style guide: components.alert.react
*/
/*
---

## When to use

- As a validation message that alerts someone that they just did something that needs to be corrected or as confirmation that a task was completed successfully.
- As a callout or notification for important or timely information. This includes errors, warnings, and general information.

## When to consider alternatives

- On long forms, always include in-line validation in addition to any error messages that appear at the top of the form. When possible, simplify forms by rewriting and where possible, splitting long forms across multiple pages
- If an action will result in destroying a user’s work (for example, deleting an application) use a more intrusive pattern, such as a confirmation modal dialogue, to allow the user to confirm that this is what they want.

## Guidance

- Don’t overdo it — too many notifications will either overwhelm or annoy the user and are likely to be ignored.
- Write the message in concise, human readable language; avoid jargon and computer code.
- Don’t include notifications that aren’t related to the user’s current goal.
- When the user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible.

**When the alert is for an error:**

- Be polite in error messages — don’t place blame on the user.
- Users generally won’t read documentation but will read a message that helps them resolve an error; include some educational material in your error message.
- If the error relates to specific text fields, give these fields an error state as well.

## Accessibility

- Use the ARIA `role="alert"` to inform assistive technologies of a time-sensitive and important message that is not interactive. If the message is interactive, use the `role="alertdialog"` instead.
- Consider putting the alert inside a div with `aria-live="polite"` and `aria-relevant="additions removals"`. These <abbr title="Accessible rich internet applications">ARIA</abbr> attributes ensure screen readers will announce alerts that have been added or updated dynamically.
- Do not visually hide alert messages on the page and then make them visible when they are needed. Users of older assistive technologies may still be able to perceive the alert messages even if they are not currently applicable.
- Alerts should give users adequate time to review and comprehend the provided information. Avoid hiding alerts using a timer.
- Include a mechanism like a button to dismiss alerts where appropriate.

## Learn more

- [18F Content Guide \- Active voice](https://content-guide.18f.gov/active-voice/)


Style guide: components.alert.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Autocomplete

@status beta

Autocompletes allow users to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted), and receive one or more suggested matches in a list below the input.

Style guide: components.autocomplete
*/
.ds-c-autocomplete {
  max-width: 460px;
  position: relative; }

.ds-c-autocomplete__list {
  background-color: #ffffff;
  box-sizing: border-box;
  max-height: 320px;
  overflow-y: auto;
  position: absolute;
  width: 100%;
  z-index: 1000; }

.ds-c-autocomplete__list-item {
  color: #0071bc;
  padding: 8px; }

.ds-c-autocomplete__list-item--active {
  background-color: #046b99;
  color: #ffffff; }

.ds-c-autocomplete__list-item--message {
  color: #5b616b;
  padding: 8px; }

/*
`<Autocomplete>`

@react-component Autocomplete

Style guide: components.autocomplete.react
*/
/*
---

## When to use

- If you are returning results from a known domain like a database of zip codes or a taxonomy of keywords
- If you have a list of options that would cause a [select menu]({{root}}/components/select) to be unusually long

## When to consider alternatives

- When users are choosing from a specific set of options. Consider [checkboxes, radio buttons]({{root}}/components/choice), or a [select menu]({{root}}/components/select) in these cases.

## Guidance

- `<Autocomplete>` makes use of the `<Downshift>` component from Paypal: https://github.com/paypal/downshift
- Don't use placeholder text in autocomplete fields. Try to write a descriptive label that identifies what the user is searching for. People who have cognitive or visual disabilities have additional problems with placeholder text.
- The length of the text field provides a hint to users as to how much text to write. Do not require users to write paragraphs of text into a single-line `input` box; use a `textarea` instead.

**[View the "Forms" guidelines for additional guidance and best practices.]({{root}}/guidelines/forms/)**

## Accessibility

- The `<Autocomplete>` component has taken special care to ensure accessibility for screenreader devices. It announces the number of results based on `items` matches with the `inputValue` string. The component also reads out the name of each list item when users arrow up or down.
- `<Autocomplete>` has visually hidden hint text nested in the `<label>` element. This hint `<span>` is being used to provide contextual instructions for the typeahead, and can be overriden by passing a custom `String` into the `labelHint` prop.
- `<Autocomplete>` has a link to clear the search, and refocus the `<input>` element. This resets the `selectedItem` prop to `null`, and will re-read the label and screenreader hint text.

Style guide: components.autocomplete-field.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*

Badge

Badges hold small amounts of information and draw attention to new or important content.

@status beta

@uswds https://standards.usa.gov/components/labels/

.ds-c-badge--info - Info badge
.ds-c-badge--success - Success badge
.ds-c-badge--warn - Warning badge
.ds-c-badge--alert - Alert or error badge

Markup:
<span class="ds-c-badge {{modifier}}">5</span>
<span class="ds-c-badge {{modifier}}">Badge label</span>
<span class="ds-c-badge {{modifier}} ds-u-font-size--base">Badge label</span>

Style guide: components.badge
*/
.ds-c-badge {
  background-color: #5b616b;
  border-radius: 9999px;
  color: #ffffff;
  display: inline-block;
  font-size: 14px;
  line-height: 1.3;
  margin-right: 4px;
  padding: 4px 8px; }
  .ds-c-badge:only-of-type {
    margin-right: 0; }

.ds-c-badge--info {
  background-color: #0071bc; }

.ds-c-badge--success {
  background-color: #2e8540; }

.ds-c-badge--warn {
  background-color: #fdb81e;
  color: #212121; }

.ds-c-badge--alert {
  background-color: #e31c3d; }

/*
---

## When to use

- To draw attention to new, important content on a page that might otherwise be missed.
- To filter results with one or more tags.
- To indicate the number of new or unread items within a container. For example, to indicate the number of unread messages within a person’s inbox.

## When to consider alternatives

- When users are likely to confuse a badge with a button. For example, when the badge appears in the same area of the page as buttons.
- To call attention to new or updated content, consider changing the background color of the object itself or experiment with changing the font weight.
- When users already expect content to be updated frequently. For example, on a site dedicated to breaking news. In this case placing the new content at the top may be enough.

## Guidance

- Don’t overdo it — if everything on a page is called out as important, nothing is important.
- Users may confuse badges as buttons. Always conduct usability testing to make sure your particular implementation is not causing frustration.
- Don’t mix interactive and static badges on your site. Once you establish a pattern for how badges behave, users will expect that behavior every time.

## Accessibility

- When badges are used to call out new content that is dynamically loaded onto a page, be sure to use [ARIA live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) to alert screen readers of the change.

## Future research

- Further usability testing should be done to ensure badges aren't being confused with buttons. Further iteration can be done with sizing and colors if there is confusion.

Style guide: components.badge.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Button

@uswds https://standards.usa.gov/components/buttons

Use buttons to signal actions.

.ds-c-button--primary - The primary call-to-action
.ds-c-button--transparent - A button closer to resembling an anchor element
.ds-c-button--danger - Indicates an action is destructive or dangerous
.ds-c-button--success - Indicates a positive or successful action

Markup:
<button type="button" class="ds-c-button ds-c-button--small {{modifier}}">Small</button>
<button type="button" class="ds-c-button {{modifier}}">Default</button>
<a class="ds-c-button  ds-c-button--big {{modifier}}" href="javascript:void(0);">Big</a>

Style guide: components.button
*/
.ds-c-button, .page-node-type-section-page .view-header a, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input, .page-node-type-section-page .view-filters #edit-actions input {
  appearance: none;
  background-color: transparent;
  border: 1px solid #0071bc;
  border-radius: 3px;
  color: #0071bc;
  cursor: pointer;
  display: inline-block;
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  padding: 8px 24px;
  text-align: center;
  text-decoration: none; }
  .ds-c-button:focus, .page-node-type-section-page .view-header a:focus, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:focus, .page-node-type-section-page .view-filters #edit-actions input:focus, .ds-c-button:hover, .page-node-type-section-page .view-header a:hover, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:hover, .page-node-type-section-page .view-filters #edit-actions input:hover {
    border-color: #205493;
    color: #205493; }
  .ds-c-button:active, .page-node-type-section-page .view-header a:active, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:active, .page-node-type-section-page .view-filters #edit-actions input:active {
    border-color: #112e51;
    color: #112e51; }

.ds-c-button--big {
  font-size: 21px;
  padding-bottom: 16px;
  padding-top: 16px; }

.ds-c-button--small, .page-node-type-section-page .view-header a, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input, .page-node-type-section-page .view-filters #edit-actions input {
  font-size: 14px;
  font-weight: 400;
  padding: 4px 8px; }

.ds-c-button--primary, .page-node-type-section-page .view-header a, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input, .page-node-type-section-page .view-filters #edit-actions input {
  background-color: #0071bc;
  border: 0;
  color: #ffffff; }
  .ds-c-button--primary:focus, .page-node-type-section-page .view-header a:focus, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:focus, .page-node-type-section-page .view-filters #edit-actions input:focus, .ds-c-button--primary:hover, .page-node-type-section-page .view-header a:hover, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:hover, .page-node-type-section-page .view-filters #edit-actions input:hover {
    color: #ffffff; }
  .ds-c-button--primary:focus, .page-node-type-section-page .view-header a:focus, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:focus, .page-node-type-section-page .view-filters #edit-actions input:focus {
    background-color: #205493; }
  .ds-c-button--primary:hover, .page-node-type-section-page .view-header a:hover, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:hover, .page-node-type-section-page .view-filters #edit-actions input:hover {
    background-color: #205493; }
  .ds-c-button--primary:active, .page-node-type-section-page .view-header a:active, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:active, .page-node-type-section-page .view-filters #edit-actions input:active {
    background-color: #112e51; }

.ds-c-button--transparent,
.ds-c-button--transparent-inverse {
  border-color: transparent; }
  .ds-c-button--transparent:focus, .ds-c-button--transparent:hover, .ds-c-button--transparent:active,
  .ds-c-button--transparent-inverse:focus,
  .ds-c-button--transparent-inverse:hover,
  .ds-c-button--transparent-inverse:active {
    border-color: transparent; }

.ds-c-button--danger {
  background-color: #e31c3d;
  border-color: #e31c3d;
  color: #ffffff; }
  .ds-c-button--danger:focus, .ds-c-button--danger:hover {
    background-color: #cd2026;
    border-color: #cd2026;
    color: #ffffff; }
  .ds-c-button--danger:active {
    background-color: #981b1e;
    border-color: #981b1e; }

.ds-c-button--success {
  background-color: #2e8540;
  border-color: #2e8540;
  color: #ffffff; }
  .ds-c-button--success:focus, .ds-c-button--success:hover {
    background-color: #2a7a3b;
    border-color: #2a7a3b;
    color: #ffffff; }
  .ds-c-button--success:active {
    background-color: #266e35;
    border-color: #266e35; }

/*
---

### Disabled button

Markup:
<a href="javascript:void(0);" class="ds-c-button ds-c-button--disabled">Link</a>
<button disabled class="ds-c-button">Button</button>
<input disabled type="submit" class="ds-c-button" />

Style guide: components.button.disabled
*/
.ds-c-button:disabled, .page-node-type-section-page .view-header a:disabled, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:disabled, .page-node-type-section-page .view-filters #edit-actions input:disabled,
.ds-c-button--disabled {
  background-color: #d6d7d9;
  border-color: #d6d7d9;
  color: #323a45;
  pointer-events: none; }
  .ds-c-button:disabled:hover, .page-node-type-section-page .view-header a:disabled:hover, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:disabled:hover, .page-node-type-section-page .view-filters #edit-actions input:disabled:hover, .ds-c-button:disabled:active, .page-node-type-section-page .view-header a:disabled:active, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:disabled:active, .page-node-type-section-page .view-filters #edit-actions input:disabled:active, .ds-c-button:disabled:focus, .page-node-type-section-page .view-header a:disabled:focus, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:disabled:focus, .page-node-type-section-page .view-filters #edit-actions input:disabled:focus,
  .ds-c-button--disabled:hover,
  .ds-c-button--disabled:active,
  .ds-c-button--disabled:focus {
    background-color: #d6d7d9;
    border-color: #d6d7d9;
    color: #323a45; }

/*
---

### Inverse theme

Markup:
<div class="ds-base--inverse ds-u-padding--2">
  <button class="ds-c-button ds-c-button--inverse">Button</button>
  <button class="ds-c-button ds-c-button--transparent-inverse">Button</button>
  <button class="ds-c-button ds-c-button--primary">Button</button>
  <button class="ds-c-button ds-c-button--danger">Button</button>
  <button class="ds-c-button ds-c-button--success">Button</button>
  <button disabled class="ds-c-button ds-c-button--disabled-inverse">Button</button>
</div>

Style guide: components.button.inverse
*/
.ds-c-button--inverse {
  border-color: #ffffff; }
  .ds-c-button--inverse:active, .ds-c-button--inverse:focus, .ds-c-button--inverse:hover {
    border-color: #ffffff; }

.ds-c-button--inverse,
.ds-c-button--transparent-inverse {
  color: #ffffff; }
  .ds-c-button--inverse:active, .ds-c-button--inverse:focus, .ds-c-button--inverse:hover,
  .ds-c-button--transparent-inverse:active,
  .ds-c-button--transparent-inverse:focus,
  .ds-c-button--transparent-inverse:hover {
    color: #ffffff;
    opacity: 0.8; }
  .ds-c-button--inverse:active,
  .ds-c-button--transparent-inverse:active {
    opacity: 0.6; }

.ds-c-button--disabled-inverse,
.ds-c-button--disabled-inverse:disabled {
  background-color: #081627;
  border-color: #081627;
  color: #bac5cf;
  pointer-events: none; }
  .ds-c-button--disabled-inverse:hover, .ds-c-button--disabled-inverse:active, .ds-c-button--disabled-inverse:focus,
  .ds-c-button--disabled-inverse:disabled:hover,
  .ds-c-button--disabled-inverse:disabled:active,
  .ds-c-button--disabled-inverse:disabled:focus {
    background-color: #112e51;
    border-color: #112e51;
    color: #bac5cf; }

/*
Button icons

- Add an inline SVG icon and it will become the same color as the button text. For the crispest icon rendering, ensure the icon has a square `viewBox` with values that are multiples of `8` (ie. `24x24`).
- Use the margin utility class to add spacing between the icon and button text.

Markup:
<button class="ds-c-button">
  <svg class="ds-u-margin-right--1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24">
    <use xlink:href="{{root}}/public/images/symbols.svg#download"></use>
  </svg>Left icon
</button>
<button class="ds-c-button ds-c-button--primary">
  Right icon<svg class="ds-u-margin-left--1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24">
    <use xlink:href="{{root}}/public/images/symbols.svg#arrow-right"></use>
  </svg>
</button>
<button class="ds-c-button ds-c-button--outline">
  No icon
</button>

Style guide: components.button.icons
*/
.ds-c-button > svg, .page-node-type-section-page .view-header a > svg, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input > svg, .page-node-type-section-page .view-filters #edit-actions input > svg {
  fill: currentColor;
  height: 1em;
  margin-bottom: -0.1em;
  margin-top: -0.1em;
  position: relative;
  top: -0.1em;
  vertical-align: middle;
  width: 1em; }

/*
Button inline with field

The button is the same height as a single-line text field.

Markup:
<input type="text" class="ds-c-field ds-u-display--inline-block" />
<button class="ds-c-button">Submit</button>

Style guide: components.button.inline-field
*/
/*
`<Button>`

@react-component Button

Style guide: components.button.react
*/
/*
---

## When to use

- Use buttons for the most important actions you want users to take on your site, such as "Download," "Sign up," or "Apply."

## When to consider alternatives

- Less popular or less important actions may be visually styled as links.
- Buttons are for performing actions, not making choices. If you need your users to make a choice, use something else like radio buttons. Alternatively, if one choice is much less important then try styling it as a link instead.

## Guidance

- Use the "primary" button variation for the button most users should click. This is your primary call-to-action.
- Avoid using too many buttons on a page. Aim to use only one button per page.
- Avoid similar styles elsewhere on the page that could be confused for buttons.
- Use buttons for the primary action and links for secondary actions.

**Label text**

- Use sentence case for button labels.
- Button labels should be as short as possible with “trigger words” that your users will recognize to clearly explain what will happen when the button is clicked (for example, “Save and continue,” “Download” or “Sign up”).
- Make the first word of the button’s label a verb. For example, instead of “Complaint Filing”, label the button “File a complaint.”
- If a button has an icon, it should still have accompanying text describing the action.

**Destructive buttons**

- Use the "danger" button variation for destructive buttons. For example, buttons that delete or reset a user's information.
- Confirm the user meant to trigger a destructive action before following through with the action.
- Provide a method for a user to undo a destructive action.

**Disabled buttons**

- Don’t disable buttons, unless there’s a good reason to.
- If you do disable a button, make sure it receives the disabled styling. A `button` element will automatically be styled as a disabled button when it has the `disabled` HTML attribute, but an `a` element will need to have the disabled modifier class applied to it.

## Accessibility

- Buttons should display a visible focus state when users tab to them.
- Create a button with a `button` or `a` element to retain the native click functionality. Avoid using `<div>` or `<img>` tags to create buttons. Screen readers don't automatically know either is a usable button.
- When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the `Space` key triggers a button, but pressing the `Enter` key triggers a link.
- Dimmed or unavailable buttons should have the `disabled` attribute applied. This removes native click and keypress events from the button. It also prevents automated scanners from logging a low contrast error. Finally, it announces the button as "dimmed" or "disabled" to screen readers, offering users additional context.

## Learn more

- [Beyond Blue Links: Making Clickable Elements Recognizable](https://www.nngroup.com/articles/clickable-elements/)
- [7 Basic Best Practices for Buttons](http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php)
- [The Grammar of Interactivity](http://www.uxbooth.com/articles/the-grammar-of-interactivity/)
- [GOV.UK navigation buttons discussion](https://paper.dropbox.com/doc/Navigation-buttons-continue-next-previous-ghLqL5a9Ostxxb3rvBhyO)

**Button alignment**
- [Buttons on forms and surveys: a look at some research](http://www.slideshare.net/cjforms/buttons-on-forms-and-surveys-a-look-at-some-research-2012)
- [Previous and Next Actions in Web Forms](https://www.lukew.com/ff/entry.asp?730=)

**ARIA**
- [Using the button role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role)
- [Building Accessible Buttons with ARIA](https://www.deque.com/blog/accessible-aria-buttons)

Style guide: components.button.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Fieldset

Markup:
<fieldset class="ds-c-fieldset">...</fieldset>
*/
.ds-c-fieldset {
  border: 0;
  margin: 24px 0 0;
  min-width: 0;
  padding: 0; }

/*
Checkbox & Radio

Checkboxes allow users to select one or more options from a visible list, whereas radio buttons allow a user to select only one option.

@uswds https://standards.usa.gov/components/form-controls

Markup:
<fieldset class="ds-c-fieldset ds-u-margin-top--0">
  <legend class="ds-c-label">Historical figures</legend>
  <span class="ds-c-field__hint">Select all that apply</span>
  <input class="ds-c-choice" id="truth-1" type="checkbox" name="historical-figures-1" value="truth" checked>
  <label for="truth-1">Sojourner Truth</label>
  <input class="ds-c-choice" id="douglass-1" type="checkbox" name="historical-figures-1" value="douglass">
  <label for="douglass-1">Frederick Douglass</label>
  <input class="ds-c-choice" id="washington-1" type="checkbox" name="historical-figures-1" value="washington">
  <label for="washington-1">Booker T. Washington</label>
  <input class="ds-c-choice" id="carver-1" type="checkbox" name="historical-figures-1" disabled>
  <label for="carver-1">George Washington Carver</label>
</fieldset>
<fieldset class="ds-c-fieldset">
  <legend class="ds-c-label">Select a historical figure</legend>
  <input class="ds-c-choice" id="truth-3" type="radio" name="historical-figures-3" value="truth" checked>
  <label for="truth-3">Sojourner Truth</label>
  <input class="ds-c-choice" id="douglass-3" type="radio" name="historical-figures-3" value="douglass">
  <label for="douglass-3">Frederick Douglass</label>
  <input class="ds-c-choice" id="washington-3" type="radio" name="historical-figures-3" value="washington">
  <label for="washington-3">Booker T. Washington</label>
</fieldset>

Style guide: components.choice
*/
/*
Inverse theme

Markup:
<div class="ds-base ds-base--inverse ds-u-padding--2 ds-u-margin-top--2">
  <fieldset class="ds-c-fieldset ds-u-margin-top--0">
    <legend class="ds-c-label">Historical figures</legend>
    <span class="ds-c-field__hint ds-c-field__hint--inverse">Select all that apply</span>
    <input class="ds-c-choice ds-c-choice--inverse" id="truth-2" type="checkbox" name="historical-figures-2" value="truth" checked>
    <label for="truth-2">Sojourner Truth</label>
    <input class="ds-c-choice ds-c-choice--inverse" id="douglass-2" type="checkbox" name="historical-figures-2" value="douglass">
    <label for="douglass-2">Frederick Douglass</label>
    <input class="ds-c-choice ds-c-choice--inverse" id="washington-2" type="checkbox" name="historical-figures-2" value="washington">
    <label for="washington-2">Booker T. Washington</label>
    <input class="ds-c-choice ds-c-choice--inverse" id="carver-2" type="checkbox" name="historical-figures-2" disabled>
    <label for="carver-2">George Washington Carver</label>
  </fieldset>
  <fieldset class="ds-c-fieldset">
    <legend class="ds-c-label">Select a historical figure</legend>
    <input class="ds-c-choice ds-c-choice--inverse" id="truth-4" type="radio" name="historical-figures-4" value="truth" checked>
    <label for="truth-4">Sojourner Truth</label>
    <input class="ds-c-choice ds-c-choice--inverse" id="douglass-4" type="radio" name="historical-figures-4" value="douglass">
    <label for="douglass-4">Frederick Douglass</label>
    <input class="ds-c-choice ds-c-choice--inverse" id="washington-4" type="radio" name="historical-figures-4" value="washington">
    <label for="washington-4">Booker T. Washington</label>
  </fieldset>
</div>

Style guide: components.choice.inversed
*/
.ds-c-choice {
  left: -999em;
  opacity: 0;
  position: absolute; }

.ds-c-choice + label {
  cursor: pointer;
  display: block;
  font-weight: 400;
  margin: 8px 0;
  max-width: 31em;
  min-height: 32px;
  padding-left: 40px;
  padding-top: 4px;
  position: relative; }

.ds-c-choice + label::before {
  background-color: #ffffff;
  border: 2px solid #212121;
  box-sizing: border-box;
  content: '\a0';
  height: 32px;
  left: 0;
  line-height: 32px;
  position: absolute;
  text-indent: 0.15em;
  top: 0;
  width: 32px; }

.ds-c-choice--inverse + label::before {
  background-color: #112e51;
  border-color: #ffffff; }

.ds-c-choice:focus + label::before {
  box-shadow: 0 0 0 2px #ffffff, 0 0 2px 4px #3e94cf; }

.ds-c-choice--inverse:focus + label::before {
  box-shadow: 0 0 0 2px #112e51, 0 0 2px 4px #59bcff; }

.ds-c-choice:checked + label::before {
  background-color: #0071bc;
  background-image: url("../images/checkmark-white.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 24px;
  border-color: #0071bc; }

.ds-c-choice:disabled + label {
  color: #5b616b; }
  .ds-c-choice:disabled + label::before {
    background-color: #d6d7d9;
    border: 1px solid #aeb0b5;
    cursor: not-allowed; }

.ds-c-choice--inverse:disabled + label {
  color: #bac5cf; }
  .ds-c-choice--inverse:disabled + label::before {
    background-color: rgba(186, 197, 207, 0.15);
    box-shadow: 0 0 0 1px #bac5cf; }

.ds-c-choice[type='radio'] + label::before {
  border-radius: 100%; }

/*
Right-to-Left

Markup:
<div class="ds-u-clearfix">
  <div class="ds-u-padding--2 ds-u-text-align--right ds-u-border--2 ds-u-float--left">
    <fieldset class="ds-c-fieldset ds-u-margin-top--0">
      <legend class="ds-c-label">Right to left</legend>
      <span class="ds-c-field__hint ds-u-margin-bottom--1">Select desired fruits</span>
      <input class="ds-c-choice ds-c-choice--right" id="apple-1" type="checkbox" name="fruit-1" value="apple" checked>
      <label for="apple-1">Apple</label>
      <input class="ds-c-choice ds-c-choice--right" id="banana-1" type="checkbox" name="fruit-1" value="banana">
      <label for="banana-1">Banana</label>
      <input class="ds-c-choice ds-c-choice--right" id="fig-1" type="checkbox" name="fruit-1" value="fig">
      <label for="fig-1">Fig</label>
      <input class="ds-c-choice ds-c-choice--right" id="plum-1" type="checkbox" name="fruit-1" disabled>
      <label for="plum-1">Plum</label>
    </fieldset>
  </div>
  <div class="ds-u-padding--2 ds-u-text-align--right ds-u-float--left ds-u-margin-left--2 ds-base--inverse">
    <fieldset class="ds-c-fieldset ds-u-margin-top--0">
      <legend class="ds-c-label">Right to left</legend>
      <span class="ds-c-field__hint ds-c-field__hint--inverse ds-u-margin-bottom--1">Select desired fruits</span>
      <input class="ds-c-choice ds-c-choice--right ds-c-choice--inverse" id="apple-2" type="radio" name="fruit-2" value="apple" checked>
      <label for="apple-2">Apple</label>
      <input class="ds-c-choice ds-c-choice--right ds-c-choice--inverse" id="banana-2" type="radio" name="fruit-2" value="banana">
      <label for="banana-2">Banana</label>
      <input class="ds-c-choice ds-c-choice--right ds-c-choice--inverse" id="fig-2" type="radio" name="fruit-2" value="fig">
      <label for="fig-2">Fig</label>
    </fieldset>
  </div>
</div>

Style guide: components.choice.rtl
*/
.ds-c-choice--right + label {
  padding-left: 0;
  padding-right: 40px; }
  .ds-c-choice--right + label::before {
    left: auto;
    right: 0; }

/*
Size variants

Markup:
<div class="ds-u-clearfix">
  <div class="ds-u-padding--2 ds-u-border--2 ds-u-float--left">
    <fieldset class="ds-c-fieldset ds-u-margin-top--0">
      <legend class="ds-c-label">Size variants</legend>
      <span class="ds-c-field__hint ds-u-margin-bottom--1">Select a size</span>
      <input class="ds-c-choice" id="normal-1" type="checkbox" name="size-1" value="normal" checked>
      <label for="normal-1">Normal</label>
      <input class="ds-c-choice ds-c-choice--small" id="small-1" type="checkbox" name="size-1" value="small">
      <label for="small-1">Small</label>
    </fieldset>
  </div>
  <div class="ds-u-padding--2 ds-u-border--2 ds-u-float--left ds-u-margin-left--2">
    <fieldset class="ds-c-fieldset ds-u-margin-top--0">
      <legend class="ds-c-label">Size variants</legend>
      <span class="ds-c-field__hint ds-u-margin-bottom--1">Select a size</span>
      <input class="ds-c-choice" id="normal-2" type="radio" name="size-2" value="normal" checked>
      <label for="normal-2">Normal</label>
      <input class="ds-c-choice ds-c-choice--small" id="small-2" type="radio" name="size-2" value="small">
      <label for="small-2">Small</label>
    </fieldset>
  </div>
</div>

Style guide: components.choice.size
*/
.ds-c-choice--small + label {
  min-height: 20px;
  padding-left: 28px;
  padding-top: 0; }
  .ds-c-choice--small + label::before {
    height: 20px;
    top: 2px;
    width: 20px; }
.ds-c-choice--small:checked + label::before {
  background-size: 20px; }
.ds-c-choice--small.ds-c-choice--right + label {
  padding-left: 0;
  padding-right: 28px; }

/*
`<ChoiceList>`

@react-component ChoiceList

Style guide: components.choice.choicelist
*/
/*
`<Choice>`

@react-component Choice

Style guide: components.choice.react
*/
/*
---

## When to use

**Checkboxes**

- When a user can select any number of choices from a set list.
- When a user needs to choose “yes” or “no” on only one option (use a stand-alone checkbox). For example, to toggle a setting on or off.
- When users need to see all the available options at a glance.
- When users should be able to select zero of the options.

**Radio buttons**

- When users need to select only one option out of a set of mutually exclusive choices.

## When to consider alternatives

- If there are too many options to display on a mobile screen. Consider a `select` menu if you don’t have enough space to list out all available options, and if the user can only select one of the options.
- Never use radio buttons for optional questions, since once a radio button is selected from a list, it or another choice will remain selected.

## Guidance

- Don't rely on the visual difference between radio buttons and checkboxes. Make it clear with words when users can select one or multiple options.
- Users should be able to tap on or click on either the text label or the checkbox to select or deselect an option.
- In general, list choices vertically; horizontal listings can make it difficult to tell which label pertains to which choice. An exception is where you have binary choices with short labels, like 'Yes / No'. The convention here is for horizontal alignment.
- Avoid using negative language in labels as they can be counterintuitive. For example, “I want to receive a promotional email” instead of “I don’t want to receive promotional email.”
- Use caution if you decide to set a default value. Setting a default value can discourage users from making conscious decisions, seem pushy, or alienate users who don’t fit into your assumptions. In addition, you'll never know if the user explicitly chose that option or just didn't notice the question. If you're unsure, leave nothing selected by default.

**[View the "Forms" guidelines for additional guidance and best practices.]({{root}}/guidelines/forms/)**

## Accessibility

- Surround a related set of choices with a `<fieldset>`. The `<legend>` provides context for the grouping. Do not use `fieldset` and `legend` for a single checkbox.
- Some screen readers read the `legend` text for each `fieldset`, so it should be brief and descriptive.
- Each input should have a semantic `id` attribute, and its corresponding `label` should have the same value in its `for` attribute.
- The custom checkboxes and radio buttons here are accessible to screen readers because the default fields are moved off-screen.

## Theming

The following Sass variables can be overridden to theme choice fields:

- `$choice-border-width`
- `$choice-border-color`
- `$choice-border-color-inverse`
- `$choice-checked-background-color`

## Related patterns

- [Select menu]({{root}}/components/select)

## Learn more

- [Form Guidelines]({{root}}/guidelines/forms/)
- [GOV.UK Checkbox/Radio buttons discussion](https://paper.dropbox.com/doc/Radio-buttons-oIwWoxwBKClt5IXvDbnpF)
- ["We've updated the radios and checkboxes on GOV.UK"](https://designnotes.blog.gov.uk/2016/11/30/weve-updated-the-radios-and-checkboxes-on-gov-uk/)
- [Four steps for choosing form elements on the Web (PDF)](http://www.formsthatwork.com/files/Articles/dropdown.pdf)

Style guide: components.choice.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Select

A select field allows users to select one option from a list.

@uswds https://standards.usa.gov/components/form-controls/#dropdown

Markup:
<label class="ds-c-label ds-u-margin-top--0" for="options">Field label</label>
<select class="ds-c-field" name="options" id="options">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
</select>
<div class="ds-base ds-base--inverse ds-u-padding--2 ds-u-margin-top--2">
  <label class="ds-c-label ds-u-margin-top--0" for="options-inverse">
    Field label
    <span class="ds-c-field__hint ds-c-field__hint--inverse">Helpful hint text</span>
  </label>
  <select class="ds-c-field ds-c-field--inverse" name="options-inverse" id="options-inverse">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
    <option value="7">Option 7</option>
  </select>
</div>

Style guide: components.select
*/
select.ds-c-field {
  appearance: none;
  background-color: #ffffff;
  background-image: url("../images/arrow-both.svg");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 14px;
  padding-right: 36px; }
  select.ds-c-field[multiple] {
    background-image: none; }

/*
`<ChoiceList>`

@react-component ChoiceList

Style guide: components.select.choicelist
*/
/*
`<Select>`

@react-component Select

Style guide: components.select.react
*/
/*
---

### When to use

- Use sparingly — only when a user needs to choose from about 7 to 15 possible options and you have limited space to display the options.

### When to consider alternatives

- If the list of options is short. Use [radio buttons or checkboxes]({{root}}/components/choice) instead.
- If the list of options is very long. Let users type the same information into a [text input]({{root}}/components/text-field) that suggests possible options instead. Long lists can sometimes be broken into multiple shorter lists by asking a few questions up-front to filter out options.
- If you need to allow users to select more than one option at once. Users often don’t understand how to select multiple items from dropdowns. Use checkboxes instead.
- If the data is highly familiar to users, such as the day, month, or year of their birth.

## Guidance

- Choose a sensible order for the options to enable visual scanning of the lists.
- Test dropdowns thoroughly with members of your target audience. Several usability experts suggest they should be the “UI of last resort.” Many users find them confusing and difficult to use.
- Avoid making options in one dropdown menu change based on the input to another. Users often don’t understand how selecting an item in one impacts another.
- When most users will (or should) pick a particular option, make it the default: `<option selected="selected">Default</option>`
- Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Offer a “submit” button at the end of the form instead. Users often change their choices multiple times. Auto-submission is also less accessible.

**[View the "Forms" guidelines for additional guidance and best practices.]({{root}}/guidelines/forms/)**

## Accessibility

- Make sure your dropdown has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the dropdown read “Select a state” by default).
- Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Auto-submission disrupts screen readers because they select each option as they read them.
- On some devices the list of options cannot be zoomed, which means that some people with visual impairments cannot use them.

## Related patterns

- [Checkbox and Radio]({{root}}/components/choice)
- [Text field]({{root}}/components/text-field)

## Learn more

- [Form Guidelines]({{root}}/guidelines/forms/)
- [Asking for a date of birth](https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/)
- [Four steps for choosing form elements on the Web (PDF)](http://www.formsthatwork.com/files/Articles/dropdown.pdf)
- [Dropdowns: Design Guidelines](https://www.nngroup.com/articles/drop-down-menus/)

Style guide: components.select.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Modal dialog

@status beta

The dialog component can be used to focus a user's attention on a single piece of content, without taking them to a new screen. Please use with caution; view our guidance for more details.

.ds-c-dialog--narrow - A dialog with a narrow measure
.ds-c-dialog--wide - A dialog with a wide measure
.ds-c-dialog--full - A dialog spanning a normal page width

Markup:
<div data-demo="This div is for demo purposes only" style="min-height: 450px;">
  <div class="ds-c-dialog-wrap" aria-labelledby="dialog-title" role="dialog">
    <div class="ds-c-dialog {{modifier}}" role="document">
      <header class="ds-c-dialog__header" role="banner">
        <h1 class="ds-h2" id="dialog-title">Dialog title</h1>
        <button class="ds-c-button ds-c-button--transparent ds-c-dialog__close" aria-label="Close modal dialog">Close</button>
      </header>
      <main role="main">
        <p class="ds-text"><strong>Dialog body text.</strong>  {{lorem-l}}</p>
      </main>
      <aside class="ds-c-dialog__actions" role="complementary">
        <button class="ds-c-button ds-c-button--danger">Dialog action</button>
        <button class="ds-c-button ds-c-button--transparent">Cancel</button>
      </aside>
    </div>
  </div>
</div>

Style guide: components.dialog
*/
.ds-c-dialog {
  background-color: #ffffff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  display: inline-block;
  font-size: 16px;
  max-width: 31em;
  padding: 32px;
  text-align: left;
  vertical-align: middle;
  width: 95%; }

.ds-c-dialog--narrow {
  max-width: 21em; }

.ds-c-dialog--wide {
  max-width: 42em; }

.ds-c-dialog--full {
  max-width: 1040px; }

.ds-c-dialog__header {
  align-items: start;
  display: flex;
  padding-bottom: 8px; }

.ds-c-dialog__actions {
  margin-top: 24px; }

.ds-c-dialog__close {
  background: url("../images/close--primary.svg") center left no-repeat;
  background-size: 12px 12px;
  margin-left: auto;
  padding: 0 0 0 20px; }
  .ds-c-dialog__close:active, .ds-c-dialog__close:focus, .ds-c-dialog__close:hover {
    background-image: url("../images/close--primary-darker.svg"); }

.ds-c-dialog-wrap {
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 48px 0;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 1000; }

/*
`<Dialog />`

@react-component Dialog

Style guide: components.dialog.react
*/
/*
---

## Related patterns

- [Alert]({{root}}/components/alert)

## Learn more

- [Making an accessible dialog box](https://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/)
- [GOV.UK modal dialog boxes discussion](https://paper.dropbox.com/doc/Modal-dialog-boxes-jbsTPoITg37IIc6ybjetM)
- [Overuse of Overlays: How to Avoid Misusing Lightboxes](https://www.nngroup.com/articles/overuse-of-overlays/)
- [Using ARIA role=dialog to implement a modal dialog box](https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box)

Style guide: components.dialog.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Form Label & Legend

Markup:
<label class="ds-c-label" for="number-field-id">
  Phone number
  <span class="ds-c-field__hint">
    Optional. We'll use this number as a backup if we need to contact you about your application.
  </span>
</label>

Style guide: components.form-label
*/
.ds-c-label {
  display: block;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
  margin-top: 24px;
  max-width: 460px;
  padding: 0; }

.ds-c-fieldset > .ds-c-label:first-child {
  margin-top: 0; }

/*
Hint text

(docs stolen from Gov.UK)

- don’t use placeholder text in form fields, as this will disappear once content is entered into the form field
- use hint text for supporting contextual help, this will always be shown
- hint text should sit above a form field
- ensure hint text can be read correctly by screen readers
*/
.ds-c-field__hint {
  color: #5b616b;
  display: block; }

.ds-c-field__hint--inverse {
  color: #bac5cf; }

/*
`<FormLabel>`

@react-component FormLabel

Style guide: components.form-label.react
*/
/*
---

## When to use

#### Labels

- Each form field should have a <label>. Never use a field's placeholder attribute as the primary way to label the field.

#### Legends

- Use a single legend for fieldset (this is required). One example of a common use of fieldset and legend is a question with radio button options for answers. The question text and radio buttons are wrapped in a fieldset, with the question itself being inside the legend tag.

## Guidance

#### Labels

- Apply the `ds-c-label` class to `<label>` elements.
- Each field should have a `<label>`. Never use a field's `placeholder` attribute as the primary way to label the field.
- Labels should have a `for` attribute, referencing the corresponding input's unique `id` attribute. Only one label can be associated to each unique form element.
- Labels should be placed above their fields.
- Label text should be short and in sentence case.
- Avoid colons at the end of labels.

#### Hint text

- Place hint text within the field's `<label>` element.
- Apply the `ds-c-field__hint` class to hint text.
- Use hint text for supporting contextual help, which will always be shown.
- Hint text should sit above a form field and below the label text.

#### Validation

- Place inline validation messages within the field's `<label>` element.
- Visually align inline validation messages with the input fields, so people using screen magnifiers can read them quickly.

## Learn More

- [Form Guidelines]({{root}}/guidelines/forms/)

Style guide: components.form-label.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
List

Lists organize written information for users.

@uswds https://standards.usa.gov/components/typography/#lists

Markup:
<h2 class="ds-h6" id="unordered-list-id">Unordered list title</h2>
<ul class="ds-c-list {{modifier}}" aria-labelledby="unordered-list-id">
  <li>List item 1</li>
  <li>List item 2</li>
</ul>
<h2 class="ds-h6" id="ordered-list-id">Ordered list title</h2>
<ol class="ds-c-list {{modifier}}" aria-labelledby="ordered-list-id">
  <li>List item 1</li>
  <li>List item 2</li>
</ol>

.ds-c-list--bare - Unstyled list (no `margin`, `padding` or `list-style`)

Style guide: components.list
*/
.ds-c-list {
  margin-bottom: 16px;
  margin-top: 16px;
  padding-left: 32px; }
  .ds-c-list li {
    line-height: 1.5;
    margin-bottom: 8px; }
    .ds-c-list li:last-child {
      margin-bottom: 0; }

.ds-c-list--bare {
  list-style: none;
  margin: 0;
  padding: 0; }

/*
---

## When to use

- Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.
- Use unordered lists to display text in no specific order.

## When to consider alternatives

- If you need to communicate long lists of narrative text.

## Guidance

- Use sentence case and begin lists with a capital letter.
- Use punctuation appropriate to the text. Do not leave sentences without periods.

## Accessibility
- When a list has a heading, consider adding an `id` attribute to the heading element, and an `aria-labelledby` attribute to the list element. Screen readers will then announce the heading text when users navigate to the list.

## Learn more

- [18F Content Guide \- Bulleted lists](https://content-guide.18f.gov/punctuation/#bulleted-lists)

Style guide: components.list.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Month Picker

Style guide: components.month-picker
*/
.ds-c-month-picker__months {
  max-width: 400px; }

.ds-c-month-picker__month {
  width: 100px; }

/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Review

The review pattern is used for listing a summary of information entered
by a user. Its content includes a heading, value, and edit link.

Markup:
<div class="ds-u-border-bottom--2 ds-u-padding-y--2 ds-u-justify-content--between ds-u-display--flex">
  <div class="ds-u-margin-right--2">
    <h3 class="ds-text ds-u-margin-bottom--0 ds-u-font-weight--bold ds-u-display--inline-block">
      Name
    </h3>
    <div>Jane Doe</div>
  </div>
  <div class="ds-u-margin--0">
    <a href="javascript:void(0);">Edit</a>
  </div>
</div>
<div class="ds-u-border-bottom--2 ds-u-padding-y--2 ds-u-justify-content--between ds-u-display--flex">
  <div class="ds-u-margin-right--2">
    <h3 class="ds-text ds-u-margin-bottom--0 ds-u-font-weight--bold ds-u-display--inline-block">
      Date of Birth
    </h3>
    <div>December 3, 1981</div>
  </div>
  <div class="ds-u-margin--0">
    <a href="javascript:void(0);">Edit</a>
  </div>
</div>
<div class="ds-u-border-bottom--2 ds-u-padding-y--2 ds-u-justify-content--between ds-u-display--flex">
  <div class="ds-u-margin-right--2">
    <h3 class="ds-text ds-u-margin-bottom--0 ds-u-font-weight--bold ds-u-display--inline-block">
      States Lived
    </h3>
    <div>
      <ul>
        <li>Ohio</li>
        <li>Idaho</li>
        <li>Iowa</li>
    </div>
  </div>
  <div class="ds-u-margin--0">
    <a href="javascript:void(0);">Edit</a>
  </div>
</div>

Style guide: patterns.review
*/
/*
`<Review>`

@react-component Review

Style guide: patterns.review.react
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Skip Nav

Skip navigation links allow users with screen readers to bypass long navigation lists. Make sure you include an `id` at the beginning of your main content and that it matches the skipnav link. Find more information here: [webaim.org/techniques/skipnav](http://webaim.org/techniques/skipnav/)

Markup:
<a class="ds-c-skip-nav" href="#main">Skip to main content</a>
<a href="javascript:void(0);">Navigation link</a>
<main id="main" class="ds-u-padding--4 ds-u-fill--gray-lightest" tabindex="0">
  Main content
</main>

Style guide: components.skip-nav
*/
.ds-c-skip-nav {
  left: 0;
  padding: 8px 16px;
  position: absolute;
  top: -96px;
  z-index: 100; }
  .ds-c-skip-nav:focus {
    background-color: #ffffff;
    left: 0;
    top: 0; }

/*
`<SkipNav>`

@hide-example

@react-component SkipNav

Style guide: components.skip-nav.react
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Spinner

Spinners signify that the application is waiting for an asynchronous operation to complete.

@status alpha

Markup:
<span class="ds-c-spinner ds-c-spinner--small" aria-valuetext="Loading" role="progressbar"></span>
<span class="ds-c-spinner" aria-valuetext="Loading" role="progressbar"></span>
<span class="ds-c-spinner ds-c-spinner--big" aria-valuetext="Loading" role="progressbar"></span>

Style guide: components.spinner
*/
.ds-c-spinner {
  height: 32px;
  width: 32px;
  box-sizing: border-box;
  display: inline-block;
  position: relative; }
  .ds-c-spinner::before, .ds-c-spinner::after {
    border-width: 4px;
    height: 32px;
    left: 0px;
    top: 0px;
    width: 32px; }
  .ds-c-spinner::before, .ds-c-spinner::after {
    border-radius: 50%;
    border-style: solid;
    box-sizing: border-box;
    content: '';
    display: block;
    left: 0;
    position: absolute;
    top: 0; }
  .ds-c-spinner::before {
    border-color: inherit;
    opacity: 0.2; }
  .ds-c-spinner::after {
    animation: spin 0.8s infinite linear;
    border-bottom-color: transparent;
    border-left-color: inherit;
    border-right-color: transparent;
    border-top-color: transparent;
    transform: translateZ(0); }
  .ds-c-button > .ds-c-spinner, .page-node-type-section-page .view-header a > .ds-c-spinner, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input > .ds-c-spinner, .page-node-type-section-page .view-filters #edit-actions input > .ds-c-spinner {
    fill: currentColor;
    height: 1em;
    margin-bottom: -0.1em;
    margin-top: -0.1em;
    position: relative;
    top: -0.1em;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    width: 1em; }
    .ds-c-button > .ds-c-spinner::before, .page-node-type-section-page .view-header a > .ds-c-spinner::before, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input > .ds-c-spinner::before, .page-node-type-section-page .view-filters #edit-actions input > .ds-c-spinner::before, .ds-c-button > .ds-c-spinner::after, .page-node-type-section-page .view-header a > .ds-c-spinner::after, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input > .ds-c-spinner::after, .page-node-type-section-page .view-filters #edit-actions input > .ds-c-spinner::after {
      border-width: 0.125em;
      height: 1em;
      left: 0em;
      top: 0em;
      width: 1em; }

.ds-c-spinner--filled {
  height: 48px;
  width: 48px;
  background-color: #ffffff;
  border-radius: 50%;
  color: #212121;
  height: 48px;
  width: 48px; }
  .ds-c-spinner--filled::before, .ds-c-spinner--filled::after {
    border-width: 4px;
    height: 32px;
    left: 8px;
    top: 8px;
    width: 32px; }

.ds-c-spinner--small {
  height: 16px;
  width: 16px; }
  .ds-c-spinner--small::before, .ds-c-spinner--small::after {
    border-width: 2px;
    height: 16px;
    left: 0px;
    top: 0px;
    width: 16px; }
  .ds-c-spinner--small.ds-c-spinner--filled {
    height: 24px;
    width: 24px; }
    .ds-c-spinner--small.ds-c-spinner--filled::before, .ds-c-spinner--small.ds-c-spinner--filled::after {
      border-width: 2px;
      height: 16px;
      left: 4px;
      top: 4px;
      width: 16px; }

.ds-c-spinner--big {
  height: 40px;
  width: 40px; }
  .ds-c-spinner--big::before, .ds-c-spinner--big::after {
    border-width: 5px;
    height: 40px;
    left: 0px;
    top: 0px;
    width: 40px; }
  .ds-c-spinner--big.ds-c-spinner--filled {
    height: 56px;
    width: 56px; }
    .ds-c-spinner--big.ds-c-spinner--filled::before, .ds-c-spinner--big.ds-c-spinner--filled::after {
      border-width: 5px;
      height: 40px;
      left: 8px;
      top: 8px;
      width: 40px; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
/*
Changing the spinner color

To change the color of the spinner, one only has to change the `color` property of the spinner element. This can be done with the standard Design System [utility classes]({{root}}/utilities/color). The color of the spinner also defaults to `inherit`, so it will take on the color of the text in its parent container.

Markup:
<span class="ds-c-spinner ds-u-color--primary" aria-valuetext="Loading" role="progressbar"></span>
<span class="ds-c-spinner ds-u-color--success" aria-valuetext="Loading" role="progressbar"></span>
<span class="ds-c-spinner ds-u-color--muted" aria-valuetext="Loading" role="progressbar"></span>

Style guide: components.spinner.colors
*/
/*
Use inside buttons

Markup:
<button class="ds-c-button">
  <span class="ds-c-spinner ds-c-spinner--small" aria-valuetext="Loading" role="progressbar"></span> Loading
</button>
<button class="ds-c-button ds-c-button--primary">
  <span class="ds-c-spinner ds-c-spinner--small ds-c-spinner--inverse" aria-valuetext="Loading" role="progressbar"></span> Loading
</button>
<button class="ds-c-button ds-c-button--outline ds-c-button--big">
  <span class="ds-c-spinner" aria-valuetext="Loading" role="progressbar"></span> Big button
</button>
<button class="ds-c-button ds-c-button--success ds-c-button--big">
  <span class="ds-c-spinner" aria-valuetext="Loading" role="progressbar"></span> Big green button
</button>

Style guide: components.spinner.buttons
*/
/*
"Filled" mode

To provide more contrast when being rendered over other content, the `ds-c-spinner--filled` class can be added to give it an appropriately shaped background with some padding.

Markup:
<div class="ds-u-fill--background-inverse ds-u-color--base-inverse ds-u-padding--2" style="position: relative">
  <p>{{lorem-l}}</p>
  <div class="ds-u-display--flex ds-u-justify-content--center ds-u-align-items--center" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0">
    <span class="ds-c-spinner ds-c-spinner--filled" aria-valuetext="Loading" role="progressbar"></span>
  </div>
</div>
<div class="ds-u-padding--2" style="position: relative">
  <p>{{lorem-l}}</p>
  <div class="ds-u-display--flex ds-u-justify-content--center ds-u-align-items--center" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0">
    <span class="ds-c-spinner ds-c-spinner--filled ds-u-fill--background-inverse ds-u-color--base-inverse" aria-valuetext="Loading" role="progressbar"></span>
  </div>
</div>

Style guide: components.spinner.background
*/
/*
`<Spinner>`

@react-component Spinner

Style guide: components.spinner.react
*/
/*
---

## When to use

- To indicate a loading state for quick asynchronous tasks

## When to consider alternatives

- When the process it is waiting for takes a long time. Spinners provide no feedback other than that _we're waiting_, so long processes can make users nervous that something went wrong. Consider adding descriptive text or another UX pattern entirely.
- When you are loading a whole page of content. If all you show the user is a spinner, the user may spend several seconds watching the spinner to be surprised with all the content all at once. Consider using a [_skeleton screen_](https://www.lukew.com/ff/entry.asp?1797) so the user knows what to expect.

## Guidance

- If the process takes a long time, use something else.

## Accessibility

- The Spinner element should have an [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) attribute with a value of `loading` to provide a human readable text alternative for screen readers.
- When placed within a parent container, the parent element should include several ARIA attributes: `aria-relevant`, `aria-live`, and optionally `aria-atomic`.
  - `aria-relevant` may include `additions`, `text`, and `removals`. If a section will have items added or removed, use `additions removals`. If there will be additions or text changes without explicit removals, use `additions text`.
  - `aria-live` should be set to `polite` for a screen reader to speak the changes whenever the user is idle. `aria-live="assertive"` should only be used in situations that require a user&rsquo;s immediate attention.
  - By default, a screen reader will only speak the contents of a changed node, and not the entire contents of the element. Set `aria-atomic="true"` for cases, such as an address, where a screen reader should read the contents of the entire element.

## Learn more

- [Response Times](https://www.nngroup.com/articles/response-times-3-important-limits/)
- [Progress Indicators](https://www.nngroup.com/articles/progress-indicators/)
- [GOV.UK Loading patterns discussion](https://paper.dropbox.com/doc/Loading-patterns-v0x8Xych1PbZQXOlbP3L6)
- [Avoid the Spinner](https://www.lukew.com/ff/entry.asp?1797)
- [ARIA Live Regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)

Style guide: components.spinner.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Step List

@responsive

@status beta

A step list represents a user's progression through an application or multi-page
form. It serves as a table of contents and a way to quickly see where they are
and what they should be working on next.

Markup:
<div style="max-width: 628px">
  <ol class="ds-c-step-list ds-u-margin-top--4">
    <li class="ds-c-step ds-c-step--completed">
      <div class="ds-c-step__content">
        <h2 class="ds-c-step__title">Choose a tax year</h2>
      </div>
      <div
        class="ds-c-step__actions"
        aria-label="Primary actions for Choose a tax year"
      >
        <div class="ds-c-step__completed-text">Completed</div>
        <a href="#step-1">
          Edit<span class="ds-u-visibility--screen-reader">
            {" "}
            "Choose a tax year"
          </span>
        </a>
      </div>
    </li>
    <li class="ds-c-step ds-c-step--current">
      <div class="ds-c-step__content ds-c-step__content--with-content">
        <h2 class="ds-c-step__title">Enter household details</h2>
        <div
          class="ds-c-step__description"
          aria-label="Description for Enter household details"
        >
          Answer questions about who in your household qualifies for a premium tax
          credit and information on each person, including date of birth,
          location(s) they lived in for the year, and months of marketplace
          coverage.
        </div>
        <ol
          class="ds-c-step__substeps"
          aria-label="Secondary actions for Enter household details"
        >
          <li class="ds-c-substep">
            <div class="ds-c-substep__title">Overall household</div>
            <a href="#step-2a" class="ds-c-substep__edit">
              Edit<span class="ds-u-visibility--screen-reader">
                {" "}
                "Overall household"
              </span>
            </a>
          </li>
          <li class="ds-c-substep">
            <div class="ds-c-substep__title">Bob's information</div>
          </li>
          <li class="ds-c-substep">
            <div class="ds-c-substep__title">Barb's information</div>
          </li>
        </ol>
      </div>
      <div
        class="ds-c-step__actions"
        aria-label="Primary actions for Enter household details"
      >
        <a href="#step-2" class="ds-c-button ds-c-button--primary">
          Resume<span class="ds-u-visibility--screen-reader">
            {" "}
            "Enter household details"
          </span>
        </a>
      </div>
    </li>
    <li class="ds-c-step">
      <div class="ds-c-step__content">
        <h2 class="ds-c-step__title">Review your information</h2>
      </div>
      <div
        class="ds-c-step__actions"
        aria-label="Primary actions for Review your information"
      />
    </li>
    <li class="ds-c-step">
      <div class="ds-c-step__content">
        <h2 class="ds-c-step__title">View premium results</h2>
      </div>
      <div
        class="ds-c-step__actions"
        aria-label="Primary actions for View premium results"
      />
    </li>
  </ol>
</div>

Style guide: patterns.step-list
*/
.ds-c-step-list {
  list-style-type: none;
  margin: 0;
  padding: 0 0;
  padding-left: 42px; }

.ds-c-step {
  color: #5b616b;
  counter-increment: step-counter;
  margin-bottom: 16px;
  padding-bottom: 16px;
  position: relative; }
  .ds-c-step::before {
    border: 2px solid #5b616b;
    border-radius: 50%;
    box-sizing: border-box;
    color: #5b616b;
    content: counter(step-counter);
    display: block;
    font-size: 14px;
    height: 24px;
    left: -34px;
    line-height: 20px;
    position: absolute;
    text-align: center;
    top: 7px;
    width: 24px; }
    @media (min-width: 768px) {
      .ds-c-step::before {
        font-size: 20px;
        height: 32px;
        left: -42px;
        line-height: 28px;
        padding-left: 1px;
        top: 3px;
        width: 32px; } }
  .ds-c-step::after {
    border-bottom: 1px solid #d6d7d9;
    bottom: 0;
    content: '';
    display: block;
    height: 1px;
    left: -42px;
    position: absolute;
    right: 0; }
  @media (min-width: 768px) {
    .ds-c-step {
      display: flex;
      justify-content: space-between; } }

.ds-c-step--current,
.ds-c-step--completed {
  padding-bottom: 16px; }
  .ds-c-step--current::before,
  .ds-c-step--completed::before {
    border: 0 none;
    color: #ffffff;
    line-height: 24px; }
    @media (min-width: 768px) {
      .ds-c-step--current::before,
      .ds-c-step--completed::before {
        line-height: 32px; } }

.ds-c-step--current .ds-c-step__title {
  color: #0071bc; }
.ds-c-step--current::before {
  background: #0071bc; }

.ds-c-step--completed .ds-c-step__title {
  color: #212121; }
.ds-c-step--completed .ds-c-step__substeps {
  color: #212121; }
.ds-c-step--completed::before {
  background: #212121; }

@media (min-width: 768px) {
  .ds-c-step__content {
    padding-right: 16px; } }

.ds-c-step__title {
  font-size: 16px;
  line-height: 38px;
  margin: 0; }
  @media (min-width: 768px) {
    .ds-c-step__title {
      font-size: 21px; } }

.ds-c-step__actions {
  font-size: 14px;
  margin-left: auto; }
  .ds-c-step__content--with-content + .ds-c-step__actions {
    margin-top: 16px; }
    @media (min-width: 768px) {
      .ds-c-step__content--with-content + .ds-c-step__actions {
        margin-top: 0; } }
  .ds-c-step--completed .ds-c-step__actions a {
    font-weight: 400; }
  @media (min-width: 768px) {
    .ds-c-step__actions {
      font-size: 16px;
      text-align: right; } }

.ds-c-step__completed-text {
  display: inline-block;
  line-height: 26px;
  margin-right: 16px; }
  .ds-c-step__completed-text::before {
    background-image: url("../images/checkmark-green.svg");
    background-size: contain;
    box-sizing: border-box;
    content: '';
    display: inline-block;
    height: 12px;
    margin-right: 8px;
    width: 16px; }
  @media (min-width: 768px) {
    .ds-c-step__completed-text {
      display: block;
      margin-right: 0;
      padding-top: 6px;
      white-space: nowrap; } }

.ds-c-step__description {
  font-size: 14px;
  margin-bottom: 8px; }
  .ds-c-step--current .ds-c-step__description, .ds-c-step--completed .ds-c-step__description {
    margin-top: 8px; }
  @media (min-width: 768px) {
    .ds-c-step__description {
      font-size: 16px; } }

.ds-c-step__substeps {
  list-style-type: none;
  margin: 0;
  padding-left: 40px; }

.ds-c-substep {
  display: block;
  font-size: 14px; }
  .ds-c-substep::before {
    content: '\2022';
    left: -24px;
    position: relative; }

.ds-c-substep__title {
  display: inline-block;
  margin-right: 8px; }

@media (min-width: 768px) {
  .ds-c-substep__edit {
    position: absolute;
    right: 0; } }

/*
Start, Resume, and Edit links

A user interacts with the steps through "Start", "Resume", and "Edit"
links.

In the React component, the links' `href` properties are determined by the
`step` object's `href` property. One can also optionally pass an
`onStepLinkClick` function that will cancel the default link behavior and call
`onStepLinkClick` with `href` as a parameter for apps that handle routing with
JavaScript.

When a step has substeps and is incomplete, the `href` property should be set to
match the `href` of the current substep—that is, the first incomplete substep.
The "Edit" button will only appear on substeps that have been completed.

Style guide: patterns.step-list.buttons
*/
/*
`<StepList>`

@react-component StepList

Style guide: patterns.step-list.react
*/
/*
Step object

A `step` object contains all information needed to render the step, including
text, progress, and routing information.

Step object properties:
- **id** (`string`) - Unique string representing the step. Will be passed to onStepLinkClick as second parameter
- **href** (`string`) - URL or partial URL that routes to the step. Will be passed to onStepLinkClick as first parameter
- **completed** (`bool`) - Whether the step has been completed
- **started** (`bool`) - Whether the step has been started
- **isNextStep** (`bool`) - Whether this is the next unstarted step
- **title** (`string`) - Text to display as the step title
- **description** (`string`) - Additional text to display under (only rendered for top-level steps)

Style guide: patterns.step-list.step-object
*/
/*
---

## Managing list state

### Substeps
The `<StepList>` component takes an array of step objects. From there steps can
be broken down infinitely into sub-steps. This allows us to have unique URLs for
each part of a step; however, by default we only display two levels of this tree
—the _step_ and _substep_. This default behavior should remain unchanged except
for special circumstances. It is better not to overwhelm the user with showing
all the substeps and giving them names.

We do, nonetheless, encourage the use of sub-substeps that are not visible where
these substeps span multiple pages and have their own unique URLs. If, for
example, the user completes the first page of the `household > overall` substep
where they list the household members but has not completed the second page
where they define those members' relationships to each other, we want the
"Resume" button to take them back to the relationships page and not the first
page where they entered their names. This, of course, requires an extra
steps-building process to update a top-level steps' `href` property by
traversing the substep tree to find the first incomplete step. See the
[Completed, started, and isNextStep](#completed-started-and-isnextstep) section
below for an example JavaScript function that can change the `href` of steps
based on their substeps.

### Completed, started, and isNextStep

The _state_ of a step object will be defined for these purposes as the values
of its `completed`, `started`, and `isNextStep` properties. These correspond to
different visual states when rendered by the `<StepList>`, showing "Completed",
"Resume", or "Start" respectively. For steps with substeps, the state should be
representative of the collective states of its substeps. For example, if a step
has substeps that have `completed: false`, that step should not have
`completed: true` because not all of its substeps have been completed. Similarly
a step can only be `started` if at least one of its substeps has been `started`.
This should be true for each of the substep's substeps and so on. Below is an
example function that can propagate this state information up from the smallest
substep to the largest step before passing the steps array to the `<StepList>`
component.

```js
function propagateSubstepState(step) {
  if (step.steps) {
    const steps = step.steps.map(propagateSubstepState);
    const newStep = {
      ...step,
      steps,
      started: steps.some(s => s.started),
      completed: steps.every(s => s.completed)
    };
    if (!newStep.completed) {
      const nextStep = steps.find(s => !s.completed);
      newStep.href = nextStep.href;
    }
    return newStep;
  }
  else {
    return step;
  }
}

// ...
//
// Render function:

const steps = rawSteps.map(propagateSubstepState);
return <StepList steps={steps} />;
```

Style guide: patterns.step-list.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Table

Tables show tabular data in columns and rows.

@uswds https://standards.usa.gov/components/tables/

Markup:
<table class="ds-c-table {{modifier}}">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th class="ds-u-text-align--right" scope="col">Rate</th>
      <th scope="col">Favorite fruit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Fred</td>
      <td class="ds-u-text-align--right">51.25%</td>
      <td>Apples</td>
    </tr>
    <tr>
      <td>Tamara</td>
      <td class="ds-u-text-align--right">98.70%</td>
      <td>Strawberries</td>
    </tr>
  </tbody>
</table>

.ds-c-table--borderless - Borderless table

Style guide: components.table
*/
.ds-c-table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  min-width: 100%; }
  .ds-c-table td {
    background-color: #ffffff; }
  .ds-c-table th,
  .ds-c-table thead td {
    background-color: #f1f1f1;
    text-align: left; }
  .ds-c-table tbody th {
    font-weight: 400; }
  .ds-c-table th,
  .ds-c-table td {
    border: 1px solid #5b616b;
    padding: 1.5rem; }

.ds-c-table--borderless thead tr {
  background-color: transparent; }
.ds-c-table--borderless thead th {
  border-top: 0; }
.ds-c-table--borderless th,
.ds-c-table--borderless td {
  border-left: 0;
  border-right: 0; }

.ds-c-table__caption {
  font-weight: 700;
  margin-bottom: 8px;
  text-align: left; }

/*
Table with two headers and a caption

Markup:
<table class="ds-c-table {{modifier}}">
  <caption class="ds-c-table__caption">Household members</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Street</th>
      <th scope="col">Employer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">John Doe</th>
      <td>123 Braavos Ave.</td>
      <td>Acme Co.</td>
    </tr>
    <tr>
      <th scope="row">Jane Doe</th>
      <td>456 King's Landing</td>
      <td>Acme Co.</td>
    </tr>
  </tbody>
</table>

Style guide: components.table.complex
*/
/*
---

## When to use

- When you need tabular information, such as statistical data.
- When users need to compare sets of information.

## When to consider alternatives

- Depending on the type of content, consider using other presentation formats such as definition lists or hierarchical lists.
- If you're writing out name / value pairs, there's often a more compact way compared to using a table.

## Guidance

- Right-align numerical data in tables. You can use a [text alignment utility class]({{root}}/utilities/text-align) for this. This makes it easier to scan and compare values.

## Accessibility

- Tables can have two levels of headers. Each header cell should have `scope="col"` or `scope="row"`. [Learn more about the "scope" attribute.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope)
- Complex tables are tables with more than two levels of headers. Each header should be given a unique `id` and each data cell should have a `headers` attribute with each related header cell’s `id` listed.
- When adding a title to a table, include it in a `<caption>` tag inside of the `<table>` element.

## Learn more

- [W3C Web Accessibility Tutorial \- Table Concepts](https://www.w3.org/WAI/tutorials/tables/)
- [Design Better Data Tables](https://medium.com/mission-log/design-better-data-tables-430a30a00d8c)

Style guide: components.table.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Tabs

Tabs are a secondary navigation pattern, allowing a user to view only the content they're interested in. They build upon a real world metaphor, and the selected state simulates a folder being physically in front of others in the group.

@status beta

Markup:
<div class="ds-c-tabs" role="tablist" aria-label="Settings">
  <a
    class="ds-c-tabs__item"
    href="#panel-profile"
    role="tab"
    aria-selected="true"
    aria-controls="panel-profile"
    id="tab-profile"
  >
    <svg class="ds-u-margin-right--1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24">
      <use xlink:href="{{root}}/public/images/symbols.svg#placeholder"></use>
    </svg>Profile
  </a>
  <a
    class="ds-c-tabs__item"
    href="#panel-comms"
    role="tab"
    aria-selected="false"
    aria-controls="panel-comms"
    id="tab-comms"
  >
    <svg class="ds-u-margin-right--1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24">
      <use xlink:href="{{root}}/public/images/symbols.svg#placeholder"></use>
    </svg>Communication preferences
  </a>
</div>
<div class="ds-c-tabs__panel" id="panel-profile" aria-labelledby="tab-profile" role="tabpanel">
  Note: This is just an example of the HTML markup. See the React example for
  a functioning example.
</div>
<div class="ds-c-tabs__panel" id="panel-comms" aria-hidden="true" aria-labelledby="tab-comms" aria-selected="false" role="tabpanel">
  Communication preferences content
</div>

Style guide: components.tabs
*/
/*
`<Tabs>`

@react-component Tabs

Style guide: components.tabs.react-tabs
*/
.ds-c-tabs {
  border-bottom: 1px solid #d6d7d9;
  display: flex; }

/*
`<TabPanel>`

@hide-example

@react-component TabPanel

Style guide: components.tabs.react-tabpanel
*/
.ds-c-tabs__panel {
  background-color: #ffffff;
  border-bottom: 1px solid #d6d7d9;
  border-left: 1px solid #d6d7d9;
  border-right: 1px solid #d6d7d9;
  padding: 24px; }
  .ds-c-tabs__panel[aria-hidden='true'] {
    /* stylelint-disable declaration-no-important */
    display: none !important; }

/*
`<Tab>`

@react-component Tab

Style guide: components.tabs.react-tab
*/
.ds-c-tabs__item {
  appearance: none;
  background-color: #ffffff;
  border-bottom: 1px solid #d6d7d9;
  border-left: 1px solid #d6d7d9;
  border-radius: 0;
  border-top: 1px solid #d6d7d9;
  color: #212121;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: -1px;
  padding: 16px 8px;
  position: relative;
  text-decoration: none;
  transition: border-bottom-color 0.3s cubic-bezier(1, 0, 0, 1); }
  @media (min-width: 544px) {
    .ds-c-tabs__item {
      padding-left: 16px;
      padding-right: 16px; } }
  @media (min-width: 768px) {
    .ds-c-tabs__item {
      font-size: 16px;
      padding-left: 24px;
      padding-right: 24px; } }
  .ds-c-tabs__item:last-child {
    border-right: 1px solid #d6d7d9; }
  .ds-c-tabs__item::after {
    background-color: #0071bc;
    content: '';
    height: 4px;
    left: -1px;
    opacity: 0;
    position: absolute;
    right: -1px;
    top: -1px;
    transform: scale3d(0, 1, 1);
    transition: opacity 0.3s cubic-bezier(1, 0, 0, 1), transform 0.3s cubic-bezier(1, 0, 0, 1); }
  .ds-c-tabs__item[aria-selected='true'] {
    border-bottom-color: #ffffff;
    color: #0071bc;
    pointer-events: none; }
    .ds-c-tabs__item[aria-selected='true']::after {
      opacity: 1;
      transform: scale3d(1, 1, 1); }
  .ds-c-tabs__item:focus, .ds-c-tabs__item:hover {
    color: #0071bc; }
  .ds-c-tabs__item:active {
    color: #205493; }
  .ds-c-tabs__item > svg {
    fill: currentColor;
    height: 1em;
    margin-bottom: -0.1em;
    margin-top: -0.1em;
    position: relative;
    top: -0.1em;
    vertical-align: middle;
    width: 1em; }

/*
---

## When to use

- If you have sub-sections of a page, and there's the need to only show one sub-section at a time.

## When to consider alternatives

- If you have more than four tabs. Consider using a different pattern if your content requires being split into more than four panels.
- If the panel contents can be displayed at once. This will improve the scanability of your page's content and it's more likely the user will be able to find what they're looking for. Typography, including clear section headers, should be enough to allow the user to navigate the page.

## Guidance

- Avoid overflowing tabs to new lines. If the tabs can't fit on one row on small screens, consider using utility classes to apply additional responsive styles or use a different pattern.
- Tab labels should be descriptive of their content and set the user's expectations.
- Tab labels should be short — aim for no more than two words.

## Accessibility

- Use an anchor link (`a`) to create the tabs. This allows you to link directly to a tab, and allows you to progressively enhance the page, retaining default browser behavior like opening links in a new window. _Note: You'll need to implement the logic for selecting the correct tab based on the current URL._
- Ensure the HTML markup includes the proper ARIA attributes:
  - For tabs: `role`, `aria-selected`, `aria-controls`
  - For the tabs list parent: `role`, `aria-label`
  - For a tab panel: `role`, `aria-labelledby`

## Related patterns

- [Vertical navigation]({{root}}/components/vertical-nav)

## Learn more

- [How Tabs Should Work](https://24ways.org/2015/how-tabs-should-work/)
- [Simple ARIA tab interface](http://heydonworks.com/practical_aria_examples/#tab-interface)

Style guide: components.tabs.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Text field

@uswds https://standards.usa.gov/components/form-controls/#text-input

Text fields allow users to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted). Text fields can span single or multiple lines.

Markup:
<label class="ds-c-label ds-u-margin-top--0" for="input-firstname">First name</label>
<input class="ds-c-field" id="input-firstname" name="firstname" type="text">
<label class="ds-c-label" for="input-lastname">
  <span class="ds-u-font-weight--bold">Last name</span>
  <span class="ds-c-field__hint ds-u-color--error" role="alert">
    Please enter your last name
  </span>
  <span class="ds-c-field__hint">Helpful hint text</span>
</label>
<input class="ds-c-field ds-c-field--error" id="input-lastname" name="lastname" type="text" />
<label class="ds-c-label" for="input-username">
  Username
  <span class="ds-c-field__hint">Example of a success field state</span>
</label>
<input class="ds-c-field ds-c-field--success" id="input-username" name="username" type="text" value="johnsnow">
<label class="ds-c-label" for="input-bio">Bio</label>
<textarea class="ds-c-field" id="input-bio" name="bio" rows="5"></textarea>
<label class="ds-c-label" for="input-id-num">
  ID Number
  <span class="ds-c-field__hint">
    Example of a disabled field
  </span>
</label>
<input class="ds-c-field ds-c-field--inverse" id="input-id-num" name="id-num" type="text" value="1234" disabled>

Style guide: components.text-field
*/
.ds-c-field {
  appearance: none;
  border: 1px solid #212121;
  border-radius: 3px;
  box-sizing: border-box;
  color: #212121;
  display: block;
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  margin: 4px 0;
  max-width: 460px;
  outline: none;
  padding: 8px;
  width: 100%; }
  .ds-c-field:disabled {
    background-color: #d6d7d9;
    border-width: 0; }
  .ds-c-field:focus {
    box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf; }

/*
---

Markup:
<div class="ds-base--inverse ds-u-padding--2">
  <label class="ds-c-label ds-u-margin-top--0" for="input-firstname-2">First name</label>
  <input class="ds-c-field ds-c-field--inverse" id="input-firstname-2" name="firstname" type="text">
  <label class="ds-c-label" for="input-lastname-2">
    <span class="ds-u-font-weight--bold">Last name</span>
    <span class="ds-c-field__hint ds-u-color--error-light" role="alert">
      Please enter your last name
    </span>
    <span class="ds-c-field__hint ds-c-field__hint--inverse">Helpful hint text</span>
  </label>
  <input class="ds-c-field ds-c-field--inverse ds-c-field--error" id="input-lastname-2" name="lastname" type="text">
  <label class="ds-c-label" for="input-username-2">Username</label>
  <input class="ds-c-field ds-c-field--inverse ds-c-field--success" id="input-username-2" name="username" type="text">
  <label class="ds-c-label" for="input-id-num-2">
    ID Number
    <span class="ds-c-field__hint ds-c-field__hint--inverse">
      Example of a disabled field
    </span>
  </label>
  <input class="ds-c-field ds-c-field--inverse" id="input-id-num-2" name="id-num-2" type="text" value="1234" disabled>
</div>

Style guide: components.text-field.inverse
*/
.ds-c-field--inverse {
  border-color: #000000; }
  .ds-c-field--inverse:focus {
    box-shadow: 0 0 3px #59bcff, 0 0 7px #59bcff; }

.ds-c-field--error {
  border: 3px solid #e31c3d; }

.ds-c-field--success {
  border: 3px solid #4aa564; }

/*
`<TextField>`

@react-component TextField

Style guide: components.text-field.react
*/
/*
---

## When to use

- If you can’t reasonably predict a user’s answer to a prompt and there might be wide variability in users’ answers.
- When using another type of input will make answering more difficult. For example, birthdays and other known dates are easier to type in than they are to select from a calendar picker.
- When users want to paste in a response.

## When to consider alternatives

- When users are choosing from a specific set of options. Consider [checkboxes, radio buttons]({{root}}/components/choice), or a [select menu]({{root}}/components/select) in these cases.

## Guidance

- Don't use placeholder text in form fields. Use hint text instead, if you need to provide contextual information. Placeholder text disappears after a user types a value, therefore users will no longer have that text available when they need to review their entries. People who have cognitive or visual disabilities have additional problems with placeholder text.
- The length of the text field provides a hint to users as to how much text to write. Do not require users to write paragraphs of text into a single-line `input` box; use a `textarea` instead.
- Text fields are among the easiest type of input for desktop users but are more difficult for mobile users.
- Only show error messages or styling after a user has interacted with a particular field.

**[View the "Forms" guidelines for additional guidance and best practices.]({{root}}/guidelines/forms/)**

## Accessibility

- Group each set of thematically related controls in a `fieldset` element. Use the `legend` element to offer a label within each `fieldset`. The `fieldset` and `legend` elements make it easier for screen reader users to navigate the form.
- Keep your form blocks in a vertical pattern. This approach is ideal, from an accessibility standpoint, because of limited vision that makes it hard to scan from left to right.

## Theming

The following Sass variables can be overridden to theme a field:

- `$color-focus`
- `$color-focus-inverse`
- `$focus-shadow`
- `$focus-shadow-inverse`
- `$input-border-color`
- `$input-border-color-inverse`
- `$input-border-radius`
- `$input-line-height`
- `$input-border-width`
- `$input-padding`

## Related patterns

- [Date field]({{root}}/patterns/date-field/)

## Learn more

- [Form Guidelines]({{root}}/guidelines/forms/)
- ["Placeholders in Form Fields Are Harmful"](https://www.nngroup.com/articles/form-design-placeholders/)
- [Asking for a date of birth](https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/)
- [GOV.UK text boxes discussion](https://paper.dropbox.com/doc/Text-boxes-8NLlgz9tjR8OzTz2N9wE3)
- [Four steps for choosing form elements on the Web (PDF)](http://www.formsthatwork.com/files/Articles/dropdown.pdf)

Style guide: components.text-field.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Date field

@uswds https://standards.usa.gov/components/form-controls/#date-input

Three text fields are the easiest way for users to enter most dates.

Markup:
<fieldset class="ds-c-fieldset">
  <legend class="ds-c-label">
    <span class="ds-u-font-weight--bold">Date of birth</span>
    <span class="ds-c-field__hint">For example: 4 28 1986</span>
  </legend>
  <div class="ds-l-form-row">
    <div class="ds-l-col--auto">
      <label class="ds-c-label ds-u-margin-top--1" for="month">Month</label>
      <input class="ds-c-field ds-c-field--month" type="number" min="1" max="12" id="month" name="birthdate[month]">
    </div>
    <div class="ds-l-col--auto">
      <label class="ds-c-label ds-u-margin-top--1" for="day">Day</label>
      <input class="ds-c-field ds-c-field--day" type="number" min="1" max="31" id="day" name="birthdate[day]">
    </div>
    <div class="ds-l-col--auto">
      <label class="ds-c-label ds-u-margin-top--1" for="year">Year</label>
      <input class="ds-c-field ds-c-field--year" type="number" min="1900" max="2000" id="year" name="birthdate[year]">
    </div>
  </div>
</fieldset>

Style guide: components.date-field
*/
.ds-c-field--month,
.ds-c-field--day,
.ds-c-field--year {
  box-sizing: content-box; }

.ds-c-field--month,
.ds-c-field--day {
  width: 4ch; }

.ds-c-field--year {
  width: 6ch; }

/*
`<DateField>`

@react-component DateField

Style guide: components.date-field.react
*/
/*
---

## When to use

- Use this format for most dates, particularly memorized dates.

## When to consider alternatives

- If users are trying to schedule something, a calendar picker might make more sense. Be sure to also provide an option for text entry as well.

## Guidance

- Ensure you've [installed both the Core package and Layout package]({{root}}/getting-started)
- Allow users to enter the date as flexibly as possible, for example, allowing `1` as well as `01` for a month input.
- Be sure each field is properly labeled — some countries enter dates in day, month, year order.
- It may be tempting to switch all or some of these text fields to drop downs, but these tend to be more difficult to use than text boxes.

## Accessibility

- These text fields should follow the [accessibility guidelines for all text inputs]({{root}}/components/text-field/#guidance).
- Do not use JavaScript to auto advance the focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.

## Related patterns

- [Text field]({{root}}/components/text-field/)
- [Grid]({{root}}/layout/grid/)

Style guide: components.date-field.guidance
*/
/* THIS IS A DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Vertical navigation

Hierarchical, vertical navigation.

@uswds https://standards.usa.gov/components/sidenav/

Markup:
<ul class="ds-c-vertical-nav">
  <li class="ds-c-vertical-nav__item">
    <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Parent link</a>
  </li>
  <li class="ds-c-vertical-nav__item">
    <a class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current" href="javascript:void(0);">Current page</a>
    <ul class="ds-c-vertical-nav__subnav">
      <li class="ds-c-vertical-nav__item">
        <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Child link</a>
      </li>
      <li class="ds-c-vertical-nav__item">
        <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Child link</a>
        <ul class="ds-c-vertical-nav__subnav">
          <li class="ds-c-vertical-nav__item">
            <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Grandchild link</a>
          </li>
          <li class="ds-c-vertical-nav__item">
            <a class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current" href="javascript:void(0);">Grandchild link</a>
          </li>
        </ul>
      </li>
      <li class="ds-c-vertical-nav__item">
        <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Child link</a>
      </li>
    </ul>
  </li>
  <li class="ds-c-vertical-nav__item">
    <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Parent link</a>
  </li>
</ul>

Style guide: components.vertical-nav
*/
.ds-c-vertical-nav {
  list-style: none;
  margin: 0;
  padding: 0; }
  .ds-c-vertical-nav > .ds-c-vertical-nav__item {
    background-color: transparent;
    border-top: 1px solid #5b616b; }
    .ds-c-vertical-nav > .ds-c-vertical-nav__item:first-child {
      border-top: 0; }

.ds-c-vertical-nav__item {
  position: relative; }

.ds-c-vertical-nav__label {
  border-left: 4px solid transparent;
  color: #212121;
  display: block;
  font-family: "Open Sans", Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  padding: 8px 16px;
  text-align: left;
  text-decoration: none; }

.ds-c-vertical-nav__label--current {
  border-left-color: #0071bc;
  color: #0071bc;
  font-weight: 700; }

.ds-c-vertical-nav__label--parent {
  appearance: none;
  background-color: transparent;
  background-image: url("../images/arrow-down.svg");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 14px;
  border-bottom: 0;
  border-radius: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
  padding-right: 40px;
  width: 100%; }
  .ds-c-vertical-nav__label--parent[aria-expanded='true'] {
    background-image: url("../images/arrow-up.svg"); }

/* stylelint-disable-next-line selector-no-qualifying-type */
a.ds-c-vertical-nav__label:hover,
.ds-c-vertical-nav__label--parent:hover {
  background-color: #f1f1f1;
  color: #0071bc;
  text-decoration: none; }

.ds-c-vertical-nav__subnav {
  list-style: none;
  margin: 0;
  padding: 0; }
  .ds-c-vertical-nav__subnav .ds-c-vertical-nav__label {
    font-size: 14px;
    line-height: 1.3;
    padding-left: 24px; }
  .ds-c-vertical-nav__subnav .ds-c-vertical-nav__label--current {
    border-color: transparent; }
  .ds-c-vertical-nav__subnav .ds-c-vertical-nav__subnav .ds-c-vertical-nav__label {
    padding-left: 32px; }

/*
`<VerticalNav>`

@react-component VerticalNav

Style guide: components.vertical-nav.VerticalNav
*/
/*
`<VerticalNavItem>`

@hide-example

@react-component VerticalNavItem

Style guide: components.vertical-nav.VerticalNavItem
*/
/*
---

## When to use

- To display a navigational hierarchy with one to three levels.
- To display the “sub-navigation” within a section of the website.

## When to consider alternatives

- If the site has fewer than five pages, consider organizing the page without a navigational hierarchy.
- If your page already has a horizontal and vertical navigation bar, consider ways to simplify your navigation system.
- If your content is within a frame or sub-area of a page, consider ways to simplify your navigation system.

## Guidance

- Indicate where a user is within the navigational hierarchy. Use the `ds-c-vertical-nav__label--current` modifier to show users which page they have navigated to.
- Keep the navigation links short and follow sentence case. They can be shorter derivatives of page titles themselves.
- If the navigation hierarchy is too long, users may miss items at the bottom. If it’s too deep, users may miss items that require too many clicks. Usability test to find the right balance between breadth and depth.

## Accessibility

- Users should be able to tab through each link.
- If you have nested menus that are collapsible, ensure the toggle button has its `aria-controls` and `aria-expanded` attributes set. This is done automatically for you
if you're using the React components.
- If your navigation list is longer than 3 items, consider using a skip navigation link. This allows screen reader and keyboard users to skip to the main content area(s).
- If a skip navigation link is not an option, consider using:
  * A valid, descriptive page header
  * Landmark regions like `<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>`
  * A `role` attribute like `<div role="navigation">`

## Related patterns

- [Tabs]({{root}}/components/tabs)

## Learn more

- [18F Content Guide \- Heading capitalization](https://content-guide.18f.gov/capitalization/#headings)
- [18F Content Guide \- Headings and titles](https://content-guide.18f.gov/headings-and-titles/)

Style guide: components.vertical-nav.guidance
*/
/*
Utilities

A utility class modifies a single trait, typically a single CSS property. To apply a trait, or a combination of traits to an element, add the corresponding utility class directly to the HTML element.

Together, they can form a variety of UI patterns. You won't always want to use combinations of utilities to generate more complicated patterns, but the option is there. Once you've identified a set of traits that seem to be reused a lot, it's a good time to consider turning those into a component.

**Format:** `ds-u-[NAME]`

Markup:
<div class="ds-u-fill--primary-alt ds-u-padding--3">
  <p class="ds-u-margin--0 ds-u-color--white ds-u-text-align--center">Hello world</p>
</div>

Weight: 20

Style guide: utilities
*/
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Background color

Use the background color utility to change the default background color of an element.

**Format**: `ds-u-fill--[COLOR NAME]-[SHADE]`

@hide-markup

Markup:
<% var groups = [
  ['primary', 'primary-darker', 'primary-darkest'],
  ['primary-alt', 'primary-alt-dark', 'primary-alt-darkest', 'primary-alt-light', 'primary-alt-lightest'],
  ['gray', 'gray-dark', 'gray-light', 'gray-lighter', 'gray-lightest'],
  ['gold', 'gold-light', 'gold-lighter', 'gold-lightest'],
  ['warn', 'warn-light', 'warn-lighter', 'warn-lightest'],
  ['green', 'green-light', 'green-lighter', 'green-lightest'],
  ['success', 'success-light', 'success-lighter', 'success-lightest'],
  ['secondary', 'secondary-dark', 'secondary-darkest', 'secondary-light', 'secondary-lightest'],
  ['error', 'error-dark', 'error-darkest', 'error-light', 'error-lighter', 'error-lightest'],
  ['base', 'white', 'background', 'background-inverse', 'transparent']
]; -%>
<% groups.forEach(group => { -%>
<div class="ds-l-row ds-u-margin-x--0 ds-u-margin-bottom--7">
<% group.forEach(color => { -%>
  <article class="c-swatch ds-l-col--12 ds-l-sm-col--6 ds-u-padding--0 ds-u-margin-bottom--3">
    <div class="c-swatch__preview c-swatch__preview--condensed ds-u-fill--<%= color %>"></div>
    <code class="c-swatch__label ds-u-font-size--base">
      .ds-u-fill--<%= color %>
    </code>
    <span class="ds-u-color--muted js-swatch-hex">#</span>
  </article>
<% }) -%>
</div>
<% }) %>

Style guide: utilities.background-color
*/
.ds-u-fill--primary {
  background-color: #0071bc !important; }

.ds-u-fill--primary-darker {
  background-color: #205493 !important; }

.ds-u-fill--primary-darkest {
  background-color: #112e51 !important; }

.ds-u-fill--primary-alt {
  background-color: #02bfe7 !important; }

.ds-u-fill--primary-alt-dark {
  background-color: #00a6d2 !important; }

.ds-u-fill--primary-alt-darkest {
  background-color: #046b99 !important; }

.ds-u-fill--primary-alt-light {
  background-color: #9bdaf1 !important; }

.ds-u-fill--primary-alt-lightest {
  background-color: #e1f3f8 !important; }

.ds-u-fill--secondary {
  background-color: #e31c3d !important; }

.ds-u-fill--secondary-dark {
  background-color: #cd2026 !important; }

.ds-u-fill--secondary-darkest {
  background-color: #981b1e !important; }

.ds-u-fill--secondary-light {
  background-color: #e59393 !important; }

.ds-u-fill--secondary-lightest {
  background-color: #f9dede !important; }

.ds-u-fill--gray {
  background-color: #5b616b !important; }

.ds-u-fill--gray-dark {
  background-color: #323a45 !important; }

.ds-u-fill--gray-light {
  background-color: #aeb0b5 !important; }

.ds-u-fill--gray-lighter {
  background-color: #d6d7d9 !important; }

.ds-u-fill--gray-lightest {
  background-color: #f1f1f1 !important; }

.ds-u-fill--gold {
  background-color: #fdb81e !important; }

.ds-u-fill--gold-light {
  background-color: #f9c642 !important; }

.ds-u-fill--gold-lighter {
  background-color: #fad980 !important; }

.ds-u-fill--gold-lightest {
  background-color: #fff1d2 !important; }

.ds-u-fill--green {
  background-color: #2e8540 !important; }

.ds-u-fill--green-light {
  background-color: #4aa564 !important; }

.ds-u-fill--green-lighter {
  background-color: #94bfa2 !important; }

.ds-u-fill--green-lightest {
  background-color: #e7f4e4 !important; }

.ds-u-fill--error {
  background-color: #e31c3d !important; }

.ds-u-fill--error-dark {
  background-color: #cd2026 !important; }

.ds-u-fill--error-darkest {
  background-color: #981b1e !important; }

.ds-u-fill--error-light {
  background-color: #e59393 !important; }

.ds-u-fill--error-lighter {
  background-color: #efb9b9 !important; }

.ds-u-fill--error-lightest {
  background-color: #f9dede !important; }

.ds-u-fill--warn {
  background-color: #fdb81e !important; }

.ds-u-fill--warn-light {
  background-color: #f9c642 !important; }

.ds-u-fill--warn-lighter {
  background-color: #fad980 !important; }

.ds-u-fill--warn-lightest {
  background-color: #fff1d2 !important; }

.ds-u-fill--success {
  background-color: #2e8540 !important; }

.ds-u-fill--success-light {
  background-color: #4aa564 !important; }

.ds-u-fill--success-lighter {
  background-color: #94bfa2 !important; }

.ds-u-fill--success-lightest {
  background-color: #e7f4e4 !important; }

.ds-u-fill--base {
  background-color: #212121 !important; }

.ds-u-fill--white {
  background-color: #ffffff !important; }

.ds-u-fill--background {
  background-color: #ffffff !important; }

.ds-u-fill--background-inverse {
  background-color: #112e51 !important; }

.ds-u-fill--transparent {
  background-color: transparent !important; }

/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/index';*/
/*
Border

Use the border utility classes to control the border size and color properties.

The border utility class sets the `border-color` and `border-size`, with support for the following sizes: `0`, `1px`, or `2px`.

**Format**: `ds-u-border-[x|y|bottom|left|right|top]--[SIZE]`

@hide-markup

Markup:
<% ['', '-x', '-y', '-bottom', '-left', '-right', '-top'].forEach(name => { -%>
<% for (var i = 0; i < 3; i++) { %>
<div class="ds-u-border<%= name %>--<%= i %> ds-u-margin-y--1 ds-u-padding--1">
  <code class="ds-u-fill--background">ds-u-border<%= name %>--<%= i %></code>
</div>
<% } -%>
<% }) -%>

Style guide: utilities.border
*/
.ds-u-border--1 {
  border: 1px solid #d6d7d9 !important; }

.ds-u-border-top--1 {
  border-top: 1px solid #d6d7d9 !important; }

.ds-u-border-right--1 {
  border-right: 1px solid #d6d7d9 !important; }

.ds-u-border-bottom--1 {
  border-bottom: 1px solid #d6d7d9 !important; }

.ds-u-border-left--1 {
  border-left: 1px solid #d6d7d9 !important; }

.ds-u-border-x--1 {
  border-left: 1px solid #d6d7d9 !important;
  border-right: 1px solid #d6d7d9 !important; }

.ds-u-border-y--1 {
  border-bottom: 1px solid #d6d7d9 !important;
  border-top: 1px solid #d6d7d9 !important; }

.ds-u-border--2 {
  border: 2px solid #d6d7d9 !important; }

.ds-u-border-top--2 {
  border-top: 2px solid #d6d7d9 !important; }

.ds-u-border-right--2 {
  border-right: 2px solid #d6d7d9 !important; }

.ds-u-border-bottom--2 {
  border-bottom: 2px solid #d6d7d9 !important; }

.ds-u-border-left--2 {
  border-left: 2px solid #d6d7d9 !important; }

.ds-u-border-x--2 {
  border-left: 2px solid #d6d7d9 !important;
  border-right: 2px solid #d6d7d9 !important; }

.ds-u-border-y--2 {
  border-bottom: 2px solid #d6d7d9 !important;
  border-top: 2px solid #d6d7d9 !important; }

.ds-u-border--0 {
  border: 0 !important; }

.ds-u-border-top--0 {
  border-top: 0 !important; }

.ds-u-border-right--0 {
  border-right: 0 !important; }

.ds-u-border-bottom--0 {
  border-bottom: 0 !important; }

.ds-u-border-left--0 {
  border-left: 0 !important; }

.ds-u-border-x--0 {
  border-left: 0 !important;
  border-right: 0 !important; }

.ds-u-border-y--0 {
  border-bottom: 0 !important;
  border-top: 0 !important; }

/*
Border color

**Format**: `ds-u-border--[COLOR NAME]`

@hide-markup

Markup:
<% ['dark',
    'inverse',
    'error', 'error-light', 'error-lighter',
    'warn', 'warn-light', 'warn-lighter',
    'success', 'success-light', 'success-lighter'].forEach(color => { -%>
<div <% if (color.match(/(lighte|inverse)/)) { -%>class="ds-u-fill--primary-darkest ds-u-padding--1"<% } -%>>
  <div class="ds-u-border--<%= color %> ds-u-border--2 ds-u-margin-y--1 ds-u-padding--1">
    <code class="ds-u-fill--background">ds-u-border--<%= color %></code>
  </div>
</div>
<% }) -%>

Style guide: utilities.border.color
*/
.ds-u-border--dark {
  border-color: #323a45 !important; }

.ds-u-border--inverse {
  border-color: #ffffff !important; }

.ds-u-border--error {
  border-color: #e31c3d !important; }

.ds-u-border--error-light {
  border-color: #e59393 !important; }

.ds-u-border--error-lighter {
  border-color: #efb9b9 !important; }

.ds-u-border--warn {
  border-color: #fdb81e !important; }

.ds-u-border--warn-light {
  border-color: #f9c642 !important; }

.ds-u-border--warn-lighter {
  border-color: #fad980 !important; }

.ds-u-border--success {
  border-color: #2e8540 !important; }

.ds-u-border--success-light {
  border-color: #4aa564 !important; }

.ds-u-border--success-lighter {
  border-color: #94bfa2 !important; }

/*
---

## Theming

The following Sass variables can be overridden to theme the border utility:

- `$border-color`
- `$border-color-dark`
- `$border-color-inverse`

Style guide: utilities.border.guidance
*/
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Border radius

Apply rounded corners to an element with the border radius utility.

- `ds-u-radius` applies the default radius (`3px`)
- `ds-u-radius--pill`
- `ds-u-radius--circle` can make a circle when combined with a fixed height and width.

Markup:
<code class="preview__label">ds-u-radius</code>
<div class="ds-u-radius ds-u-fill--primary-alt ds-u-padding--2"></div>
<code class="preview__label">ds-u-radius--pill</code>
<div class="ds-u-radius--pill ds-u-fill--primary-alt ds-u-padding--2"></div>
<code class="preview__label">ds-u-radius--circle</code>
<div class="ds-u-radius--circle ds-u-fill--primary-alt" style="width: 50px; height: 50px;"></div>

Style guide: utilities.border-radius
*/
.ds-u-radius {
  border-radius: 3px; }

.ds-u-radius--pill {
  border-radius: 9999px; }

.ds-u-radius--circle {
  border-radius: 100%; }

/*
---

## Theming

The following Sass variables can be overridden to theme the border radius utility:

- `$border-radius`

Style guide: utilities.border-radius.guidance
*/
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Color

Use the color utility to change an element's text color.

**Format**: `ds-u-color--[COLOR NAME]-[SHADE]`

The options below offer color palette combinations that fall within the range of Section 508 compliant foreground/background color contrast ratios. To ensure that text remains accessible, **use only these permitted color combinations**.

@hide-markup

Markup:
<% var groups = {
  'white': [
    'base',
    'black',
    'muted',
    'gray',
    'primary', 'primary-darker', 'primary-darkest',
    'error', 'error-dark',
    'success'
  ],
  'gray-lightest': ['muted', 'primary', 'error-dark'],
  'gray-lighter': ['base', 'primary-darker'],
  'gray-light': ['base', 'primary-darkest'],
  'background-inverse': ['base-inverse', 'muted-inverse', 'error-light'],
  'base': ['white'],
  'gray-dark': ['white'],
  'gray': ['white'],
  'primary-darkest': ['white'],
  'primary-darker': ['white'],
  'primary': ['white'],
  'primary-alt-darkest': ['white'],
  'primary-alt-dark': ['base'],
  'primary-alt': ['base'],
  'green': ['white'],
  'success': ['white'],
  'green-light': ['base'],
  'success-light': ['base'],
  'gold': ['base'],
  'warn': ['base'],
  'gold-light': ['base'],
  'warn-light': ['base'],
  'secondary-darkest': ['white'],
  'error-darkest': ['white'],
  'secondary-dark': ['white'],
  'error-dark': ['white'],
  'secondary': ['white'],
  'error': ['white'],
  'primary-alt-lightest': ['base'],
  'green-lighter': ['base'],
  'success-lighter': ['base'],
  'green-lightest': ['base'],
  'success-lightest': ['base'],
  'gold-lighter': ['base'],
  'warn-lighter': ['base'],
  'gold-lightest': ['base'],
  'warn-lightest': ['base'],
  'secondary-lightest': ['base'],
  'error-lightest': ['base'],
}; -%>
<% Object.keys(groups).forEach(fill => { -%>
<% groups[fill].forEach(color => { -%>
  <div class="ds-u-color--<%= color %> ds-u-fill--<%= fill %> ds-u-padding--1">
    <code class="ds-h3 ds-u-fill--transparent ds-u-color--<%= color %>">ds-u-color--<%= color %></code>
    <br />
    <span class="ds-u-font-size--small">on</span>
    <code class="ds-u-fill--transparent ds-u-color--<%= color %>">ds-u-fill--<%= fill %></code>
  </div>
<% }) -%>
<% }) %>

Style guide: utilities.color
*/
.ds-u-color--primary {
  color: #0071bc !important; }

.ds-u-color--primary-darker {
  color: #205493 !important; }

.ds-u-color--primary-darkest {
  color: #112e51 !important; }

.ds-u-color--gray {
  color: #5b616b !important; }

.ds-u-color--muted {
  color: #5b616b !important; }

.ds-u-color--error {
  color: #e31c3d !important; }

.ds-u-color--error-dark {
  color: #cd2026 !important; }

.ds-u-color--error-light {
  color: #e59393 !important; }

.ds-u-color--success {
  color: #2e8540 !important; }

.ds-u-color--base {
  color: #212121 !important; }

.ds-u-color--base-inverse {
  color: #ffffff !important; }

.ds-u-color--muted-inverse {
  color: #bac5cf !important; }

.ds-u-color--black {
  color: #000000 !important; }

.ds-u-color--white {
  color: #ffffff !important; }

/*
Inherit a color

Use the `ds-u-color--inherit` utility class to inherit the color of the parent element.

Markup:
<div class="ds-u-color--error">
  This is an example of <a href="#" class="ds-u-color--inherit">a link</a> with error styling.
</div>

Style guide: utilities.color.inherit
*/
.ds-u-color--inherit {
  color: inherit !important; }

/*
---

## Accessibility

WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of [at least 4.5:1](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text.

Style guide: utilities.color.guidance
*/
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Display/Visibility

Use the `display` and `visibility` utility classes to show and hide elements.

Style guide: utilities.display-visibility
*/
/*
Display

> The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)

**Format**: `ds-u-display--[VALUE]`

#### Available `display` utilities:

- `ds-u-display--block`
- `ds-u-display--inline-block`
- `ds-u-display--flex`
- `ds-u-display--none`

Markup:
<% ['ds-u-display--block',
  'ds-u-display--inline-block',
  'ds-u-display--flex',
  'ds-u-display--none'].forEach(util => { -%>
<p class="<%= util %> ds-base--inverse ds-u-padding--2"><%= util %></p>
<% }) %>

Style guide: utilities.display-visibility.display
*/
.ds-u-display--block {
  display: block !important; }

.ds-u-display--inline-block {
  display: inline-block !important; }

.ds-u-display--flex {
  display: flex !important; }

.ds-u-display--none {
  display: none !important; }

/*
Visibility

> The visibility property can be used to hide an element while leaving the space where it would have been. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)

**Format**: `ds-u-visibility--[VALUE]`

#### Available `visibility` utilities:

- `ds-u-visibility--hidden`
- `ds-u-visibility--visible`
- `ds-u-visibility--screen-reader`

#### Accessibility

There may be times when you want to hide an element, but still want its text to be read by a screen reader. The `ds-u-visibility--screen-reader` class will hide the content visually, but provide the content to screen readers.

Markup:
<span class="ds-u-visibility--hidden">I'm hidden</span>
<span class="ds-u-visibility--screen-reader">I'm visible to screen readers only</span>
<span class="ds-u-visibility--visible">I'm visible</span>

Style guide: utilities.display-visibility.visibility
*/
.ds-u-visibility--hidden {
  visibility: hidden !important; }

.ds-u-visibility--visible {
  visibility: visible !important; }

.ds-u-visibility--screen-reader {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal; }

/*
Toggling visibility by breakpoint

@responsive

Use a [breakpoint prefix]({{root}}/guidelines/responsive) to show/hide content at specific breakpoints.

A breakpoint prefix is supported on all of the utility classes mentioned above, except for `ds-u-visibility--screen-reader`.

Markup:
<% ['sm', 'md', 'lg', 'xl'].forEach(breakpoint => { %>
  <div class="ds-u-<%= breakpoint %>-display--none ds-u-color--muted">
    Hidden on <%= breakpoint %> screens and larger
  </div>
  <div class="ds-u-<%= breakpoint %>-display--block">
    Displayed as block on <%= breakpoint %> screens and larger
  </div>
  <div class="ds-u-<%= breakpoint %>-visibility--hidden ds-u-color--muted">
    Invisible on <%= breakpoint %> screens and larger
  </div>
  <div class="ds-u-<%= breakpoint %>-visibility--visible">
    Visible on <%= breakpoint %> screens and larger
  </div>
<% }) %>

Style guide: utilities.display-visibility.responsive
*/
@media (min-width: 544px) {
  .ds-u-sm-display--block {
    display: block !important; }

  .ds-u-sm-display--inline-block {
    display: inline-block !important; }

  .ds-u-sm-display--none {
    display: none !important; }

  .ds-u-sm-visibility--hidden {
    visibility: hidden !important; }

  .ds-u-sm-visibility--visible {
    visibility: visible !important; } }
@media (min-width: 768px) {
  .ds-u-md-display--block {
    display: block !important; }

  .ds-u-md-display--inline-block {
    display: inline-block !important; }

  .ds-u-md-display--none {
    display: none !important; }

  .ds-u-md-visibility--hidden {
    visibility: hidden !important; }

  .ds-u-md-visibility--visible {
    visibility: visible !important; } }
@media (min-width: 1024px) {
  .ds-u-lg-display--block {
    display: block !important; }

  .ds-u-lg-display--inline-block {
    display: inline-block !important; }

  .ds-u-lg-display--none {
    display: none !important; }

  .ds-u-lg-visibility--hidden {
    visibility: hidden !important; }

  .ds-u-lg-visibility--visible {
    visibility: visible !important; } }
@media (min-width: 1280px) {
  .ds-u-xl-display--block {
    display: block !important; }

  .ds-u-xl-display--inline-block {
    display: inline-block !important; }

  .ds-u-xl-display--none {
    display: none !important; }

  .ds-u-xl-visibility--hidden {
    visibility: hidden !important; }

  .ds-u-xl-visibility--visible {
    visibility: visible !important; } }
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/index';*/
/*
Flexbox

Use the [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) utility classes to control various flexbox properties. These are especially useful when combined with [flexbox grid]({{root}}/layout/grid#layout.grid.alignment) classes.

#### Usage

For these utility classes to work, first create a flex container &mdash; you can use the [`ds-u-display--flex`]({{root}}/utilities/display-visibility) utility class &mdash; then apply these  utility classes to the container's direct children elements.

Style guide: utilities.flexbox
*/
/*
Justify content

Use the `justify-content` utility class on a flexbox container to change the alignment of its child elements on the main axis (x-axis by default).

> The CSS `justify-content` property defines how the browser distributes space between and around content items along the main axis of their container. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)

The classes follow the format: `ds-u-justify-content--{value}` and `ds-u-{breakpoint}-justify-content--{value}` where `breakpoint` is one of the [breakpoint prefixes]({{root}}/guidelines/responsive), and `value` is one of:

- `start` (browser default)
- `end`
- `center`
- `between`
- `around`

Markup:
<section>
<% ['start','end','center','between','around'].forEach(value => { %>
  <code class="preview__label">ds-u-justify-content--<%= value %></code>
  <article class="ds-u-justify-content--<%= value %> ds-u-display--flex ds-u-fill--primary-darkest">
    <div class="ds-u-fill--white ds-u-margin--1"><%= value %></div>
    <div class="ds-u-fill--white ds-u-margin--1"><%= value %></div>
    <div class="ds-u-fill--white ds-u-margin--1"><%= value %></div>
  </article>
<% }) %>
</section>

Style guide: utilities.flexbox.justify-content
*/
.ds-u-justify-content--start {
  justify-content: flex-start !important; }

.ds-u-justify-content--end {
  justify-content: flex-end !important; }

.ds-u-justify-content--center {
  justify-content: center !important; }

.ds-u-justify-content--between {
  justify-content: space-between !important; }

.ds-u-justify-content--around {
  justify-content: space-around !important; }

@media (min-width: 544px) {
  .ds-u-sm-justify-content--start {
    justify-content: flex-start !important; }

  .ds-u-sm-justify-content--end {
    justify-content: flex-end !important; }

  .ds-u-sm-justify-content--center {
    justify-content: center !important; }

  .ds-u-sm-justify-content--between {
    justify-content: space-between !important; }

  .ds-u-sm-justify-content--around {
    justify-content: space-around !important; } }
@media (min-width: 768px) {
  .ds-u-md-justify-content--start {
    justify-content: flex-start !important; }

  .ds-u-md-justify-content--end {
    justify-content: flex-end !important; }

  .ds-u-md-justify-content--center {
    justify-content: center !important; }

  .ds-u-md-justify-content--between {
    justify-content: space-between !important; }

  .ds-u-md-justify-content--around {
    justify-content: space-around !important; } }
@media (min-width: 1024px) {
  .ds-u-lg-justify-content--start {
    justify-content: flex-start !important; }

  .ds-u-lg-justify-content--end {
    justify-content: flex-end !important; }

  .ds-u-lg-justify-content--center {
    justify-content: center !important; }

  .ds-u-lg-justify-content--between {
    justify-content: space-between !important; }

  .ds-u-lg-justify-content--around {
    justify-content: space-around !important; } }
@media (min-width: 1280px) {
  .ds-u-xl-justify-content--start {
    justify-content: flex-start !important; }

  .ds-u-xl-justify-content--end {
    justify-content: flex-end !important; }

  .ds-u-xl-justify-content--center {
    justify-content: center !important; }

  .ds-u-xl-justify-content--between {
    justify-content: space-between !important; }

  .ds-u-xl-justify-content--around {
    justify-content: space-around !important; } }
/*
Align items

Use the `align-items` utility class on a flexbox container to change the alignment of its child elements on the cross axis (y-axis by default).

> The CSS `align-items` property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like `justify-content` but in the perpendicular direction. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)

The classes follow the format: `ds-u-align-items--{value}` and `ds-u-{breakpoint}-align-items--{value}` where `breakpoint` is one of the [breakpoint prefixes]({{root}}/guidelines/responsive), and `value` is one of:

- `start`
- `end`
- `center`
- `baseline`
- `stretch` (browser default)

Markup:
<section>
<% ['start','end','center','baseline','stretch'].forEach(value => { %>
  <code class="preview__label">ds-u-align-items--<%= value %></code>
  <article class="ds-u-align-items--<%= value %> ds-u-display--flex ds-u-fill--primary-darkest" style="height: 75px">
    <div class="ds-u-fill--white ds-u-margin--1"><%= value %></div>
    <div class="ds-u-fill--white ds-u-margin--1"><%= value %></div>
    <div class="ds-u-fill--white ds-u-margin--1"><%= value %></div>
  </article>
<% }) %>
</section>

Style guide: utilities.flexbox.align-items
*/
.ds-u-align-items--start {
  align-items: flex-start !important; }

.ds-u-align-items--end {
  align-items: flex-end !important; }

.ds-u-align-items--center {
  align-items: center !important; }

.ds-u-align-items--baseline {
  align-items: baseline !important; }

.ds-u-align-items--stretch {
  align-items: stretch !important; }

@media (min-width: 544px) {
  .ds-u-sm-align-items--start {
    align-items: flex-start !important; }

  .ds-u-sm-align-items--end {
    align-items: flex-end !important; }

  .ds-u-sm-align-items--center {
    align-items: center !important; }

  .ds-u-sm-align-items--baseline {
    align-items: baseline !important; }

  .ds-u-sm-align-items--stretch {
    align-items: stretch !important; } }
@media (min-width: 768px) {
  .ds-u-md-align-items--start {
    align-items: flex-start !important; }

  .ds-u-md-align-items--end {
    align-items: flex-end !important; }

  .ds-u-md-align-items--center {
    align-items: center !important; }

  .ds-u-md-align-items--baseline {
    align-items: baseline !important; }

  .ds-u-md-align-items--stretch {
    align-items: stretch !important; } }
@media (min-width: 1024px) {
  .ds-u-lg-align-items--start {
    align-items: flex-start !important; }

  .ds-u-lg-align-items--end {
    align-items: flex-end !important; }

  .ds-u-lg-align-items--center {
    align-items: center !important; }

  .ds-u-lg-align-items--baseline {
    align-items: baseline !important; }

  .ds-u-lg-align-items--stretch {
    align-items: stretch !important; } }
@media (min-width: 1280px) {
  .ds-u-xl-align-items--start {
    align-items: flex-start !important; }

  .ds-u-xl-align-items--end {
    align-items: flex-end !important; }

  .ds-u-xl-align-items--center {
    align-items: center !important; }

  .ds-u-xl-align-items--baseline {
    align-items: baseline !important; }

  .ds-u-xl-align-items--stretch {
    align-items: stretch !important; } }
/*
Flex-wrap

Use the `flex-wrap` utility class on a flexbox container to change how its child elements wrap.

> The CSS `flex-wrap` property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)

The classes follow the format: `ds-u-flex-wrap--{value}` and `ds-u-{breakpoint}-flex-wrap--{value}` where `breakpoint` is one of the [breakpoint prefixes]({{root}}/guidelines/responsive), and `value` is one of:

- `nowrap` (browser default)
- `wrap`
- `reverse`

Markup:
<section>
<% ['nowrap','wrap','reverse'].forEach(value => { %>
  <code class="preview__label">ds-u-flex-wrap--<%= value %></code>
  <article class="ds-u-flex-wrap--<%= value %> ds-u-display--flex ds-u-fill--primary-darkest">
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%"><%= value %> element #1</div>
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%"><%= value %> element #2</div>
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%"><%= value %> element #3</div>
  </article>
<% }) %>
</section>

Style guide: utilities.flexbox.flex-wrap
*/
.ds-u-flex-wrap--nowrap {
  flex-wrap: nowrap !important; }

.ds-u-flex-wrap--wrap {
  flex-wrap: wrap !important; }

.ds-u-flex-wrap--reverse {
  flex-wrap: wrap-reverse !important; }

@media (min-width: 544px) {
  .ds-u-sm-flex-wrap--nowrap {
    flex-wrap: nowrap !important; }

  .ds-u-sm-flex-wrap--wrap {
    flex-wrap: wrap !important; }

  .ds-u-sm-flex-wrap--reverse {
    flex-wrap: wrap-reverse !important; } }
@media (min-width: 768px) {
  .ds-u-md-flex-wrap--nowrap {
    flex-wrap: nowrap !important; }

  .ds-u-md-flex-wrap--wrap {
    flex-wrap: wrap !important; }

  .ds-u-md-flex-wrap--reverse {
    flex-wrap: wrap-reverse !important; } }
@media (min-width: 1024px) {
  .ds-u-lg-flex-wrap--nowrap {
    flex-wrap: nowrap !important; }

  .ds-u-lg-flex-wrap--wrap {
    flex-wrap: wrap !important; }

  .ds-u-lg-flex-wrap--reverse {
    flex-wrap: wrap-reverse !important; } }
@media (min-width: 1280px) {
  .ds-u-xl-flex-wrap--nowrap {
    flex-wrap: nowrap !important; }

  .ds-u-xl-flex-wrap--wrap {
    flex-wrap: wrap !important; }

  .ds-u-xl-flex-wrap--reverse {
    flex-wrap: wrap-reverse !important; } }
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Float

Set an element's `float` property using the float utility.

You can use the [clearfix utility class]({{root}}/utilities/clearfix) to automatically clear your floats.

**Format**: `ds-u-float--[VALUE]`

Markup:
<% ['ds-u-float--left', 'ds-u-float--right', 'ds-u-float--none'].forEach(util => { -%>
<div class="ds-u-clearfix">
  <p class="<%= util %> ds-base--inverse ds-u-padding--2">
    <code><%= util %></code>
  </p>
</div>
<% }) %>

Style guide: utilities.float
*/
.ds-u-float--left {
  float: left !important; }

.ds-u-float--right {
  float: right !important; }

.ds-u-float--none {
  float: none !important; }

/*
Responsive

@responsive

Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change how an element is floated at specific breakpoints.

Markup:
<div class="ds-u-clearfix">
  <strong>Inline text</strong>
  <div class="ds-u-float--none ds-u-md-float--left ds-u-lg-float--right">
    <p class="ds-u-md-display--none ds-base--inverse ds-u-padding--2">
      float: none
    </p>
    <p class="ds-u-display--none ds-u-md-display--inline-block ds-u-lg-display--none ds-base--inverse ds-u-padding--2">
      float: left
    </p>
    <p class="ds-u-display--none ds-u-lg-display--inline-block ds-base--inverse ds-u-padding--2">
      float: right
    </p>
  </div>
</div>

Style guide: utilities.float.responsive
*/
@media (min-width: 544px) {
  .ds-u-sm-float--left {
    float: left !important; }

  .ds-u-sm-float--right {
    float: right !important; }

  .ds-u-sm-float--none {
    float: none !important; } }
@media (min-width: 768px) {
  .ds-u-md-float--left {
    float: left !important; }

  .ds-u-md-float--right {
    float: right !important; }

  .ds-u-md-float--none {
    float: none !important; } }
@media (min-width: 1024px) {
  .ds-u-lg-float--left {
    float: left !important; }

  .ds-u-lg-float--right {
    float: right !important; }

  .ds-u-lg-float--none {
    float: none !important; } }
@media (min-width: 1280px) {
  .ds-u-xl-float--left {
    float: left !important; }

  .ds-u-xl-float--right {
    float: right !important; }

  .ds-u-xl-float--none {
    float: none !important; } }
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Font familiy

Change an element's typeface to either the sans-serif (Open Sans) or serif (Bitter) family using the font family utility.

**Format**: `ds-u-[serif|sans]`

Markup:
<h2 class="preview__label">ds-u-sans (default)</h2>
<p class="ds-u-sans ds-title">Open Sans, Helvetica, sans-serif</p>
<h2 class="preview__label">ds-u-serif</h2>
<p class="ds-u-serif ds-title">Bitter, Georgia, serif</p>

Style guide: utilities.font-family
*/
.ds-u-sans {
  font-family: "Open Sans", Helvetica, sans-serif !important; }

.ds-u-serif {
  font-family: Bitter, Georgia, serif !important; }

/*
---

## Theming

The following Sass variables can be overridden to theme the font family utility:

- `$font-sans`
- `$font-serif`

Style guide: utilities.font-family.guidance
*/
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Font size

Use the font size utility to make the text larger or smaller.

**Format**: `ds-u-font-size--[SIZE]`

Markup:
<% ['display','title','h1','h2','h3', 'h4', 'lead','base','small'].forEach(size => { -%>
<article class="ds-u-font-size--<%= size %> ds-u-padding-y--3 ds-u-truncate ds-u-border-bottom--1">
  {{lorem-s}}
  <h2 class="preview__label ds-u-margin-y--0">
    <code class="ds-u-font-weight--bold">ds-u-font-size--<%= size %></code><br/>
    <code>$<%= size %>-font-size</code>
  </h2>
</article>
<% }) -%>

Style guide: utilities.font-size
*/
.ds-u-font-size--small {
  font-size: 14px !important; }

.ds-u-font-size--base {
  font-size: 16px !important; }

.ds-u-font-size--lead {
  font-size: 18px !important; }

.ds-u-font-size--display {
  font-size: 60px !important; }

.ds-u-font-size--title {
  font-size: 48px !important; }

.ds-u-font-size--h1 {
  font-size: 36px !important; }

.ds-u-font-size--h2 {
  font-size: 24px !important; }

.ds-u-font-size--h3 {
  font-size: 21px !important; }

.ds-u-font-size--h4 {
  font-size: 18px !important; }

/*
Responsive font sizes

Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the font size at specific breakpoints.

_Resize your browser to see each breakpoint in action:_

Markup:
<div class="ds-u-font-size--base ds-u-sm-font-size--h4 ds-u-md-font-size--h3 ds-u-lg-font-size--h2 ds-u-xl-font-size--h1">
  {{ lorem-m }}
</div>

Style guide: utilities.font-size.responsive
*/
@media (min-width: 544px) {
  .ds-u-sm-font-size--small {
    font-size: 14px !important; }

  .ds-u-sm-font-size--base {
    font-size: 16px !important; }

  .ds-u-sm-font-size--lead {
    font-size: 18px !important; }

  .ds-u-sm-font-size--display {
    font-size: 60px !important; }

  .ds-u-sm-font-size--title {
    font-size: 48px !important; }

  .ds-u-sm-font-size--h1 {
    font-size: 36px !important; }

  .ds-u-sm-font-size--h2 {
    font-size: 24px !important; }

  .ds-u-sm-font-size--h3 {
    font-size: 21px !important; }

  .ds-u-sm-font-size--h4 {
    font-size: 18px !important; } }
@media (min-width: 768px) {
  .ds-u-md-font-size--small {
    font-size: 14px !important; }

  .ds-u-md-font-size--base {
    font-size: 16px !important; }

  .ds-u-md-font-size--lead {
    font-size: 18px !important; }

  .ds-u-md-font-size--display {
    font-size: 60px !important; }

  .ds-u-md-font-size--title {
    font-size: 48px !important; }

  .ds-u-md-font-size--h1 {
    font-size: 36px !important; }

  .ds-u-md-font-size--h2 {
    font-size: 24px !important; }

  .ds-u-md-font-size--h3 {
    font-size: 21px !important; }

  .ds-u-md-font-size--h4 {
    font-size: 18px !important; } }
@media (min-width: 1024px) {
  .ds-u-lg-font-size--small {
    font-size: 14px !important; }

  .ds-u-lg-font-size--base {
    font-size: 16px !important; }

  .ds-u-lg-font-size--lead {
    font-size: 18px !important; }

  .ds-u-lg-font-size--display {
    font-size: 60px !important; }

  .ds-u-lg-font-size--title {
    font-size: 48px !important; }

  .ds-u-lg-font-size--h1 {
    font-size: 36px !important; }

  .ds-u-lg-font-size--h2 {
    font-size: 24px !important; }

  .ds-u-lg-font-size--h3 {
    font-size: 21px !important; }

  .ds-u-lg-font-size--h4 {
    font-size: 18px !important; } }
@media (min-width: 1280px) {
  .ds-u-xl-font-size--small {
    font-size: 14px !important; }

  .ds-u-xl-font-size--base {
    font-size: 16px !important; }

  .ds-u-xl-font-size--lead {
    font-size: 18px !important; }

  .ds-u-xl-font-size--display {
    font-size: 60px !important; }

  .ds-u-xl-font-size--title {
    font-size: 48px !important; }

  .ds-u-xl-font-size--h1 {
    font-size: 36px !important; }

  .ds-u-xl-font-size--h2 {
    font-size: 24px !important; }

  .ds-u-xl-font-size--h3 {
    font-size: 21px !important; }

  .ds-u-xl-font-size--h4 {
    font-size: 18px !important; } }
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Font style

Change an element's `font-style` property using the font style utility.

**Format**: `ds-u-font-style--[VALUE]`

Markup:
<h2 class="preview__label">ds-u-font-style--normal</h2>
<div class="ds-u-font-style--normal">{{ lorem-m }}</div>
<h2 class="preview__label">ds-u-font-style--italic</h2>
<div class="ds-u-font-style--italic">{{ lorem-m }}</div>

Style guide: utilities.font-style
*/
.ds-u-font-style--normal {
  font-style: normal !important; }

.ds-u-font-style--italic {
  font-style: italic !important; }

/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Font weight

Change an element's `font-weight` property using the font weight utility.

**Format**: `ds-u-font-weight--[VALUE]`

Markup:
<p class="ds-u-font-weight--normal">ds-u-font-weight--normal</p>
<p class="ds-u-font-weight--semibold">ds-u-font-weight--semibold</p>
<p class="ds-u-font-weight--bold">ds-u-font-weight--bold</p>

Style guide: utilities.font-weight
*/
.ds-u-font-weight--normal {
  font-weight: 400 !important; }

.ds-u-font-weight--semibold {
  font-weight: 600 !important; }

.ds-u-font-weight--bold {
  font-weight: 700 !important; }

/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Line height

In CSS, the `line-height` property controls the leading (`led-ing`). Leading refers to the vertical distance from the baseline of one line to the baseline of the next.

**Format**: `ds-u-leading--[NAME]`

Markup:
<h2 class="preview__label">ds-u-leading--lead</h2>
<div class="ds-u-leading--lead">{{lorem-l}}</div>
<h2 class="preview__label">ds-u-leading--base</h2>
<div class="ds-u-leading--base ds-u-font-size--base">{{lorem-l}}</div>
<h2 class="preview__label">ds-u-leading--heading</h2>
<div class="ds-u-leading--heading">{{lorem-l}}</div>
<h2 class="preview__label">ds-u-leading--reset</h2>
<div class="ds-u-leading--reset">{{lorem-l}}</div>

Style guide: utilities.line-height
*/
.ds-u-leading--base {
  line-height: 1.5 !important; }

.ds-u-leading--lead {
  line-height: 1.7 !important; }

.ds-u-leading--heading {
  line-height: 1.3 !important; }

.ds-u-leading--reset {
  line-height: 1 !important; }

/*
---

## Accessibility

> Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between `1.5` to `2` allows them to start a new line more easily once they have finished the previous one. &mdash; [WCAG 2.0 Compliance Techniques](https://www.w3.org/TR/WCAG20-TECHS/C21.html)

Style guide: utilities.line-height.guidance
*/
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/index';*/
/*
Margin

Use the margin utility to change an element's margin.

**Format**: `ds-u-margin-[x|y|bottom|left|right|top]--[MULTIPLE]`

[Read more about how the design system approaches spacing here.]({{root}}/layout/spacing)

@hide-markup

Markup:
<% var backgrounds = ['-cool-light', '-warm-light', '-lightest', '-lighter', '-light', '-medium', '', '-dark']; %>
<% ['', '-x', '-y', '-bottom', '-left', '-right', '-top'].forEach(name => { -%>
<% for (var i = 0; i < 8; i++) { %>
<div class="ds-u-fill--gray<%= backgrounds[i] %>">
  <div class="ds-u-margin<%= name %>--<%= i %> ds-u-display--inline-block">
    <code class="ds-u-fill--background ds-u-margin--0">ds-u-margin<%= name %>--<%= i %></code>
  </div>
</div>
<% } -%>
<div class="ds-u-fill--gray<%= backgrounds[i] %>">
  <div class="ds-u-margin<%= name %>--auto" style="width: 250px">
    <code class="ds-u-fill--background ds-u-margin--0 ds-u-display--block">ds-u-margin<%= name %>--auto</code>
  </div>
</div>
<% }) -%>

Style guide: utilities.margin
*/
.ds-u-margin--0 {
  margin: 0 !important; }

.ds-u-margin-top--0 {
  margin-top: 0 !important; }

.ds-u-margin-right--0 {
  margin-right: 0 !important; }

.ds-u-margin-bottom--0 {
  margin-bottom: 0 !important; }

.ds-u-margin-left--0 {
  margin-left: 0 !important; }

.ds-u-margin-x--0 {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.ds-u-margin-y--0 {
  margin-bottom: 0 !important;
  margin-top: 0 !important; }

.ds-u-margin--1 {
  margin: 8px !important; }

.ds-u-margin-top--1 {
  margin-top: 8px !important; }

.ds-u-margin-right--1 {
  margin-right: 8px !important; }

.ds-u-margin-bottom--1 {
  margin-bottom: 8px !important; }

.ds-u-margin-left--1 {
  margin-left: 8px !important; }

.ds-u-margin-x--1 {
  margin-left: 8px !important;
  margin-right: 8px !important; }

.ds-u-margin-y--1 {
  margin-bottom: 8px !important;
  margin-top: 8px !important; }

.ds-u-margin--2 {
  margin: 16px !important; }

.ds-u-margin-top--2 {
  margin-top: 16px !important; }

.ds-u-margin-right--2 {
  margin-right: 16px !important; }

.ds-u-margin-bottom--2 {
  margin-bottom: 16px !important; }

.ds-u-margin-left--2 {
  margin-left: 16px !important; }

.ds-u-margin-x--2 {
  margin-left: 16px !important;
  margin-right: 16px !important; }

.ds-u-margin-y--2 {
  margin-bottom: 16px !important;
  margin-top: 16px !important; }

.ds-u-margin--3 {
  margin: 24px !important; }

.ds-u-margin-top--3 {
  margin-top: 24px !important; }

.ds-u-margin-right--3 {
  margin-right: 24px !important; }

.ds-u-margin-bottom--3 {
  margin-bottom: 24px !important; }

.ds-u-margin-left--3 {
  margin-left: 24px !important; }

.ds-u-margin-x--3 {
  margin-left: 24px !important;
  margin-right: 24px !important; }

.ds-u-margin-y--3 {
  margin-bottom: 24px !important;
  margin-top: 24px !important; }

.ds-u-margin--4 {
  margin: 32px !important; }

.ds-u-margin-top--4 {
  margin-top: 32px !important; }

.ds-u-margin-right--4 {
  margin-right: 32px !important; }

.ds-u-margin-bottom--4 {
  margin-bottom: 32px !important; }

.ds-u-margin-left--4 {
  margin-left: 32px !important; }

.ds-u-margin-x--4 {
  margin-left: 32px !important;
  margin-right: 32px !important; }

.ds-u-margin-y--4 {
  margin-bottom: 32px !important;
  margin-top: 32px !important; }

.ds-u-margin--5 {
  margin: 40px !important; }

.ds-u-margin-top--5 {
  margin-top: 40px !important; }

.ds-u-margin-right--5 {
  margin-right: 40px !important; }

.ds-u-margin-bottom--5 {
  margin-bottom: 40px !important; }

.ds-u-margin-left--5 {
  margin-left: 40px !important; }

.ds-u-margin-x--5 {
  margin-left: 40px !important;
  margin-right: 40px !important; }

.ds-u-margin-y--5 {
  margin-bottom: 40px !important;
  margin-top: 40px !important; }

.ds-u-margin--6 {
  margin: 48px !important; }

.ds-u-margin-top--6 {
  margin-top: 48px !important; }

.ds-u-margin-right--6 {
  margin-right: 48px !important; }

.ds-u-margin-bottom--6 {
  margin-bottom: 48px !important; }

.ds-u-margin-left--6 {
  margin-left: 48px !important; }

.ds-u-margin-x--6 {
  margin-left: 48px !important;
  margin-right: 48px !important; }

.ds-u-margin-y--6 {
  margin-bottom: 48px !important;
  margin-top: 48px !important; }

.ds-u-margin--7 {
  margin: 56px !important; }

.ds-u-margin-top--7 {
  margin-top: 56px !important; }

.ds-u-margin-right--7 {
  margin-right: 56px !important; }

.ds-u-margin-bottom--7 {
  margin-bottom: 56px !important; }

.ds-u-margin-left--7 {
  margin-left: 56px !important; }

.ds-u-margin-x--7 {
  margin-left: 56px !important;
  margin-right: 56px !important; }

.ds-u-margin-y--7 {
  margin-bottom: 56px !important;
  margin-top: 56px !important; }

.ds-u-margin--auto {
  margin: auto !important; }

.ds-u-margin-top--auto {
  margin-top: auto !important; }

.ds-u-margin-right--auto {
  margin-right: auto !important; }

.ds-u-margin-bottom--auto {
  margin-bottom: auto !important; }

.ds-u-margin-left--auto {
  margin-left: auto !important; }

.ds-u-margin-x--auto {
  margin-left: auto !important;
  margin-right: auto !important; }

.ds-u-margin-y--auto {
  margin-bottom: auto !important;
  margin-top: auto !important; }

/*
Responsive margins

Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the margin at specific breakpoints.

_Resize your browser to see each breakpoint in action:_

Markup:
<div class="ds-u-fill--gray-dark">
  <div class="ds-u-margin--1 ds-u-sm-margin--2 ds-u-md-margin--3 ds-u-lg-margin--4 ds-u-xl-margin--5 ds-u-display--inline-block">
    <span class="ds-u-fill--background">Responsive margins</span>
  </div>
</div>

Style guide: utilities.margin.responsive
*/
@media (min-width: 544px) {
  .ds-u-sm-margin--0 {
    margin: 0 !important; }

  .ds-u-sm-margin-top--0 {
    margin-top: 0 !important; }

  .ds-u-sm-margin-right--0 {
    margin-right: 0 !important; }

  .ds-u-sm-margin-bottom--0 {
    margin-bottom: 0 !important; }

  .ds-u-sm-margin-left--0 {
    margin-left: 0 !important; }

  .ds-u-sm-margin-x--0 {
    margin-left: 0 !important;
    margin-right: 0 !important; }

  .ds-u-sm-margin-y--0 {
    margin-bottom: 0 !important;
    margin-top: 0 !important; }

  .ds-u-sm-margin--1 {
    margin: 8px !important; }

  .ds-u-sm-margin-top--1 {
    margin-top: 8px !important; }

  .ds-u-sm-margin-right--1 {
    margin-right: 8px !important; }

  .ds-u-sm-margin-bottom--1 {
    margin-bottom: 8px !important; }

  .ds-u-sm-margin-left--1 {
    margin-left: 8px !important; }

  .ds-u-sm-margin-x--1 {
    margin-left: 8px !important;
    margin-right: 8px !important; }

  .ds-u-sm-margin-y--1 {
    margin-bottom: 8px !important;
    margin-top: 8px !important; }

  .ds-u-sm-margin--2 {
    margin: 16px !important; }

  .ds-u-sm-margin-top--2 {
    margin-top: 16px !important; }

  .ds-u-sm-margin-right--2 {
    margin-right: 16px !important; }

  .ds-u-sm-margin-bottom--2 {
    margin-bottom: 16px !important; }

  .ds-u-sm-margin-left--2 {
    margin-left: 16px !important; }

  .ds-u-sm-margin-x--2 {
    margin-left: 16px !important;
    margin-right: 16px !important; }

  .ds-u-sm-margin-y--2 {
    margin-bottom: 16px !important;
    margin-top: 16px !important; }

  .ds-u-sm-margin--3 {
    margin: 24px !important; }

  .ds-u-sm-margin-top--3 {
    margin-top: 24px !important; }

  .ds-u-sm-margin-right--3 {
    margin-right: 24px !important; }

  .ds-u-sm-margin-bottom--3 {
    margin-bottom: 24px !important; }

  .ds-u-sm-margin-left--3 {
    margin-left: 24px !important; }

  .ds-u-sm-margin-x--3 {
    margin-left: 24px !important;
    margin-right: 24px !important; }

  .ds-u-sm-margin-y--3 {
    margin-bottom: 24px !important;
    margin-top: 24px !important; }

  .ds-u-sm-margin--4 {
    margin: 32px !important; }

  .ds-u-sm-margin-top--4 {
    margin-top: 32px !important; }

  .ds-u-sm-margin-right--4 {
    margin-right: 32px !important; }

  .ds-u-sm-margin-bottom--4 {
    margin-bottom: 32px !important; }

  .ds-u-sm-margin-left--4 {
    margin-left: 32px !important; }

  .ds-u-sm-margin-x--4 {
    margin-left: 32px !important;
    margin-right: 32px !important; }

  .ds-u-sm-margin-y--4 {
    margin-bottom: 32px !important;
    margin-top: 32px !important; }

  .ds-u-sm-margin--5 {
    margin: 40px !important; }

  .ds-u-sm-margin-top--5 {
    margin-top: 40px !important; }

  .ds-u-sm-margin-right--5 {
    margin-right: 40px !important; }

  .ds-u-sm-margin-bottom--5 {
    margin-bottom: 40px !important; }

  .ds-u-sm-margin-left--5 {
    margin-left: 40px !important; }

  .ds-u-sm-margin-x--5 {
    margin-left: 40px !important;
    margin-right: 40px !important; }

  .ds-u-sm-margin-y--5 {
    margin-bottom: 40px !important;
    margin-top: 40px !important; }

  .ds-u-sm-margin--6 {
    margin: 48px !important; }

  .ds-u-sm-margin-top--6 {
    margin-top: 48px !important; }

  .ds-u-sm-margin-right--6 {
    margin-right: 48px !important; }

  .ds-u-sm-margin-bottom--6 {
    margin-bottom: 48px !important; }

  .ds-u-sm-margin-left--6 {
    margin-left: 48px !important; }

  .ds-u-sm-margin-x--6 {
    margin-left: 48px !important;
    margin-right: 48px !important; }

  .ds-u-sm-margin-y--6 {
    margin-bottom: 48px !important;
    margin-top: 48px !important; }

  .ds-u-sm-margin--7 {
    margin: 56px !important; }

  .ds-u-sm-margin-top--7 {
    margin-top: 56px !important; }

  .ds-u-sm-margin-right--7 {
    margin-right: 56px !important; }

  .ds-u-sm-margin-bottom--7 {
    margin-bottom: 56px !important; }

  .ds-u-sm-margin-left--7 {
    margin-left: 56px !important; }

  .ds-u-sm-margin-x--7 {
    margin-left: 56px !important;
    margin-right: 56px !important; }

  .ds-u-sm-margin-y--7 {
    margin-bottom: 56px !important;
    margin-top: 56px !important; }

  .ds-u-sm-margin--auto {
    margin: auto !important; }

  .ds-u-sm-margin-top--auto {
    margin-top: auto !important; }

  .ds-u-sm-margin-right--auto {
    margin-right: auto !important; }

  .ds-u-sm-margin-bottom--auto {
    margin-bottom: auto !important; }

  .ds-u-sm-margin-left--auto {
    margin-left: auto !important; }

  .ds-u-sm-margin-x--auto {
    margin-left: auto !important;
    margin-right: auto !important; }

  .ds-u-sm-margin-y--auto {
    margin-bottom: auto !important;
    margin-top: auto !important; } }
@media (min-width: 768px) {
  .ds-u-md-margin--0 {
    margin: 0 !important; }

  .ds-u-md-margin-top--0 {
    margin-top: 0 !important; }

  .ds-u-md-margin-right--0 {
    margin-right: 0 !important; }

  .ds-u-md-margin-bottom--0 {
    margin-bottom: 0 !important; }

  .ds-u-md-margin-left--0 {
    margin-left: 0 !important; }

  .ds-u-md-margin-x--0 {
    margin-left: 0 !important;
    margin-right: 0 !important; }

  .ds-u-md-margin-y--0 {
    margin-bottom: 0 !important;
    margin-top: 0 !important; }

  .ds-u-md-margin--1 {
    margin: 8px !important; }

  .ds-u-md-margin-top--1 {
    margin-top: 8px !important; }

  .ds-u-md-margin-right--1 {
    margin-right: 8px !important; }

  .ds-u-md-margin-bottom--1 {
    margin-bottom: 8px !important; }

  .ds-u-md-margin-left--1 {
    margin-left: 8px !important; }

  .ds-u-md-margin-x--1 {
    margin-left: 8px !important;
    margin-right: 8px !important; }

  .ds-u-md-margin-y--1 {
    margin-bottom: 8px !important;
    margin-top: 8px !important; }

  .ds-u-md-margin--2 {
    margin: 16px !important; }

  .ds-u-md-margin-top--2 {
    margin-top: 16px !important; }

  .ds-u-md-margin-right--2 {
    margin-right: 16px !important; }

  .ds-u-md-margin-bottom--2 {
    margin-bottom: 16px !important; }

  .ds-u-md-margin-left--2 {
    margin-left: 16px !important; }

  .ds-u-md-margin-x--2 {
    margin-left: 16px !important;
    margin-right: 16px !important; }

  .ds-u-md-margin-y--2 {
    margin-bottom: 16px !important;
    margin-top: 16px !important; }

  .ds-u-md-margin--3 {
    margin: 24px !important; }

  .ds-u-md-margin-top--3 {
    margin-top: 24px !important; }

  .ds-u-md-margin-right--3 {
    margin-right: 24px !important; }

  .ds-u-md-margin-bottom--3 {
    margin-bottom: 24px !important; }

  .ds-u-md-margin-left--3 {
    margin-left: 24px !important; }

  .ds-u-md-margin-x--3 {
    margin-left: 24px !important;
    margin-right: 24px !important; }

  .ds-u-md-margin-y--3 {
    margin-bottom: 24px !important;
    margin-top: 24px !important; }

  .ds-u-md-margin--4 {
    margin: 32px !important; }

  .ds-u-md-margin-top--4 {
    margin-top: 32px !important; }

  .ds-u-md-margin-right--4 {
    margin-right: 32px !important; }

  .ds-u-md-margin-bottom--4 {
    margin-bottom: 32px !important; }

  .ds-u-md-margin-left--4 {
    margin-left: 32px !important; }

  .ds-u-md-margin-x--4 {
    margin-left: 32px !important;
    margin-right: 32px !important; }

  .ds-u-md-margin-y--4 {
    margin-bottom: 32px !important;
    margin-top: 32px !important; }

  .ds-u-md-margin--5 {
    margin: 40px !important; }

  .ds-u-md-margin-top--5 {
    margin-top: 40px !important; }

  .ds-u-md-margin-right--5 {
    margin-right: 40px !important; }

  .ds-u-md-margin-bottom--5 {
    margin-bottom: 40px !important; }

  .ds-u-md-margin-left--5 {
    margin-left: 40px !important; }

  .ds-u-md-margin-x--5 {
    margin-left: 40px !important;
    margin-right: 40px !important; }

  .ds-u-md-margin-y--5 {
    margin-bottom: 40px !important;
    margin-top: 40px !important; }

  .ds-u-md-margin--6 {
    margin: 48px !important; }

  .ds-u-md-margin-top--6 {
    margin-top: 48px !important; }

  .ds-u-md-margin-right--6 {
    margin-right: 48px !important; }

  .ds-u-md-margin-bottom--6 {
    margin-bottom: 48px !important; }

  .ds-u-md-margin-left--6 {
    margin-left: 48px !important; }

  .ds-u-md-margin-x--6 {
    margin-left: 48px !important;
    margin-right: 48px !important; }

  .ds-u-md-margin-y--6 {
    margin-bottom: 48px !important;
    margin-top: 48px !important; }

  .ds-u-md-margin--7 {
    margin: 56px !important; }

  .ds-u-md-margin-top--7 {
    margin-top: 56px !important; }

  .ds-u-md-margin-right--7 {
    margin-right: 56px !important; }

  .ds-u-md-margin-bottom--7 {
    margin-bottom: 56px !important; }

  .ds-u-md-margin-left--7 {
    margin-left: 56px !important; }

  .ds-u-md-margin-x--7 {
    margin-left: 56px !important;
    margin-right: 56px !important; }

  .ds-u-md-margin-y--7 {
    margin-bottom: 56px !important;
    margin-top: 56px !important; }

  .ds-u-md-margin--auto {
    margin: auto !important; }

  .ds-u-md-margin-top--auto {
    margin-top: auto !important; }

  .ds-u-md-margin-right--auto {
    margin-right: auto !important; }

  .ds-u-md-margin-bottom--auto {
    margin-bottom: auto !important; }

  .ds-u-md-margin-left--auto {
    margin-left: auto !important; }

  .ds-u-md-margin-x--auto {
    margin-left: auto !important;
    margin-right: auto !important; }

  .ds-u-md-margin-y--auto {
    margin-bottom: auto !important;
    margin-top: auto !important; } }
@media (min-width: 1024px) {
  .ds-u-lg-margin--0 {
    margin: 0 !important; }

  .ds-u-lg-margin-top--0 {
    margin-top: 0 !important; }

  .ds-u-lg-margin-right--0 {
    margin-right: 0 !important; }

  .ds-u-lg-margin-bottom--0 {
    margin-bottom: 0 !important; }

  .ds-u-lg-margin-left--0 {
    margin-left: 0 !important; }

  .ds-u-lg-margin-x--0 {
    margin-left: 0 !important;
    margin-right: 0 !important; }

  .ds-u-lg-margin-y--0 {
    margin-bottom: 0 !important;
    margin-top: 0 !important; }

  .ds-u-lg-margin--1 {
    margin: 8px !important; }

  .ds-u-lg-margin-top--1 {
    margin-top: 8px !important; }

  .ds-u-lg-margin-right--1 {
    margin-right: 8px !important; }

  .ds-u-lg-margin-bottom--1 {
    margin-bottom: 8px !important; }

  .ds-u-lg-margin-left--1 {
    margin-left: 8px !important; }

  .ds-u-lg-margin-x--1 {
    margin-left: 8px !important;
    margin-right: 8px !important; }

  .ds-u-lg-margin-y--1 {
    margin-bottom: 8px !important;
    margin-top: 8px !important; }

  .ds-u-lg-margin--2 {
    margin: 16px !important; }

  .ds-u-lg-margin-top--2 {
    margin-top: 16px !important; }

  .ds-u-lg-margin-right--2 {
    margin-right: 16px !important; }

  .ds-u-lg-margin-bottom--2 {
    margin-bottom: 16px !important; }

  .ds-u-lg-margin-left--2 {
    margin-left: 16px !important; }

  .ds-u-lg-margin-x--2 {
    margin-left: 16px !important;
    margin-right: 16px !important; }

  .ds-u-lg-margin-y--2 {
    margin-bottom: 16px !important;
    margin-top: 16px !important; }

  .ds-u-lg-margin--3 {
    margin: 24px !important; }

  .ds-u-lg-margin-top--3 {
    margin-top: 24px !important; }

  .ds-u-lg-margin-right--3 {
    margin-right: 24px !important; }

  .ds-u-lg-margin-bottom--3 {
    margin-bottom: 24px !important; }

  .ds-u-lg-margin-left--3 {
    margin-left: 24px !important; }

  .ds-u-lg-margin-x--3 {
    margin-left: 24px !important;
    margin-right: 24px !important; }

  .ds-u-lg-margin-y--3 {
    margin-bottom: 24px !important;
    margin-top: 24px !important; }

  .ds-u-lg-margin--4 {
    margin: 32px !important; }

  .ds-u-lg-margin-top--4 {
    margin-top: 32px !important; }

  .ds-u-lg-margin-right--4 {
    margin-right: 32px !important; }

  .ds-u-lg-margin-bottom--4 {
    margin-bottom: 32px !important; }

  .ds-u-lg-margin-left--4 {
    margin-left: 32px !important; }

  .ds-u-lg-margin-x--4 {
    margin-left: 32px !important;
    margin-right: 32px !important; }

  .ds-u-lg-margin-y--4 {
    margin-bottom: 32px !important;
    margin-top: 32px !important; }

  .ds-u-lg-margin--5 {
    margin: 40px !important; }

  .ds-u-lg-margin-top--5 {
    margin-top: 40px !important; }

  .ds-u-lg-margin-right--5 {
    margin-right: 40px !important; }

  .ds-u-lg-margin-bottom--5 {
    margin-bottom: 40px !important; }

  .ds-u-lg-margin-left--5 {
    margin-left: 40px !important; }

  .ds-u-lg-margin-x--5 {
    margin-left: 40px !important;
    margin-right: 40px !important; }

  .ds-u-lg-margin-y--5 {
    margin-bottom: 40px !important;
    margin-top: 40px !important; }

  .ds-u-lg-margin--6 {
    margin: 48px !important; }

  .ds-u-lg-margin-top--6 {
    margin-top: 48px !important; }

  .ds-u-lg-margin-right--6 {
    margin-right: 48px !important; }

  .ds-u-lg-margin-bottom--6 {
    margin-bottom: 48px !important; }

  .ds-u-lg-margin-left--6 {
    margin-left: 48px !important; }

  .ds-u-lg-margin-x--6 {
    margin-left: 48px !important;
    margin-right: 48px !important; }

  .ds-u-lg-margin-y--6 {
    margin-bottom: 48px !important;
    margin-top: 48px !important; }

  .ds-u-lg-margin--7 {
    margin: 56px !important; }

  .ds-u-lg-margin-top--7 {
    margin-top: 56px !important; }

  .ds-u-lg-margin-right--7 {
    margin-right: 56px !important; }

  .ds-u-lg-margin-bottom--7 {
    margin-bottom: 56px !important; }

  .ds-u-lg-margin-left--7 {
    margin-left: 56px !important; }

  .ds-u-lg-margin-x--7 {
    margin-left: 56px !important;
    margin-right: 56px !important; }

  .ds-u-lg-margin-y--7 {
    margin-bottom: 56px !important;
    margin-top: 56px !important; }

  .ds-u-lg-margin--auto {
    margin: auto !important; }

  .ds-u-lg-margin-top--auto {
    margin-top: auto !important; }

  .ds-u-lg-margin-right--auto {
    margin-right: auto !important; }

  .ds-u-lg-margin-bottom--auto {
    margin-bottom: auto !important; }

  .ds-u-lg-margin-left--auto {
    margin-left: auto !important; }

  .ds-u-lg-margin-x--auto {
    margin-left: auto !important;
    margin-right: auto !important; }

  .ds-u-lg-margin-y--auto {
    margin-bottom: auto !important;
    margin-top: auto !important; } }
@media (min-width: 1280px) {
  .ds-u-xl-margin--0 {
    margin: 0 !important; }

  .ds-u-xl-margin-top--0 {
    margin-top: 0 !important; }

  .ds-u-xl-margin-right--0 {
    margin-right: 0 !important; }

  .ds-u-xl-margin-bottom--0 {
    margin-bottom: 0 !important; }

  .ds-u-xl-margin-left--0 {
    margin-left: 0 !important; }

  .ds-u-xl-margin-x--0 {
    margin-left: 0 !important;
    margin-right: 0 !important; }

  .ds-u-xl-margin-y--0 {
    margin-bottom: 0 !important;
    margin-top: 0 !important; }

  .ds-u-xl-margin--1 {
    margin: 8px !important; }

  .ds-u-xl-margin-top--1 {
    margin-top: 8px !important; }

  .ds-u-xl-margin-right--1 {
    margin-right: 8px !important; }

  .ds-u-xl-margin-bottom--1 {
    margin-bottom: 8px !important; }

  .ds-u-xl-margin-left--1 {
    margin-left: 8px !important; }

  .ds-u-xl-margin-x--1 {
    margin-left: 8px !important;
    margin-right: 8px !important; }

  .ds-u-xl-margin-y--1 {
    margin-bottom: 8px !important;
    margin-top: 8px !important; }

  .ds-u-xl-margin--2 {
    margin: 16px !important; }

  .ds-u-xl-margin-top--2 {
    margin-top: 16px !important; }

  .ds-u-xl-margin-right--2 {
    margin-right: 16px !important; }

  .ds-u-xl-margin-bottom--2 {
    margin-bottom: 16px !important; }

  .ds-u-xl-margin-left--2 {
    margin-left: 16px !important; }

  .ds-u-xl-margin-x--2 {
    margin-left: 16px !important;
    margin-right: 16px !important; }

  .ds-u-xl-margin-y--2 {
    margin-bottom: 16px !important;
    margin-top: 16px !important; }

  .ds-u-xl-margin--3 {
    margin: 24px !important; }

  .ds-u-xl-margin-top--3 {
    margin-top: 24px !important; }

  .ds-u-xl-margin-right--3 {
    margin-right: 24px !important; }

  .ds-u-xl-margin-bottom--3 {
    margin-bottom: 24px !important; }

  .ds-u-xl-margin-left--3 {
    margin-left: 24px !important; }

  .ds-u-xl-margin-x--3 {
    margin-left: 24px !important;
    margin-right: 24px !important; }

  .ds-u-xl-margin-y--3 {
    margin-bottom: 24px !important;
    margin-top: 24px !important; }

  .ds-u-xl-margin--4 {
    margin: 32px !important; }

  .ds-u-xl-margin-top--4 {
    margin-top: 32px !important; }

  .ds-u-xl-margin-right--4 {
    margin-right: 32px !important; }

  .ds-u-xl-margin-bottom--4 {
    margin-bottom: 32px !important; }

  .ds-u-xl-margin-left--4 {
    margin-left: 32px !important; }

  .ds-u-xl-margin-x--4 {
    margin-left: 32px !important;
    margin-right: 32px !important; }

  .ds-u-xl-margin-y--4 {
    margin-bottom: 32px !important;
    margin-top: 32px !important; }

  .ds-u-xl-margin--5 {
    margin: 40px !important; }

  .ds-u-xl-margin-top--5 {
    margin-top: 40px !important; }

  .ds-u-xl-margin-right--5 {
    margin-right: 40px !important; }

  .ds-u-xl-margin-bottom--5 {
    margin-bottom: 40px !important; }

  .ds-u-xl-margin-left--5 {
    margin-left: 40px !important; }

  .ds-u-xl-margin-x--5 {
    margin-left: 40px !important;
    margin-right: 40px !important; }

  .ds-u-xl-margin-y--5 {
    margin-bottom: 40px !important;
    margin-top: 40px !important; }

  .ds-u-xl-margin--6 {
    margin: 48px !important; }

  .ds-u-xl-margin-top--6 {
    margin-top: 48px !important; }

  .ds-u-xl-margin-right--6 {
    margin-right: 48px !important; }

  .ds-u-xl-margin-bottom--6 {
    margin-bottom: 48px !important; }

  .ds-u-xl-margin-left--6 {
    margin-left: 48px !important; }

  .ds-u-xl-margin-x--6 {
    margin-left: 48px !important;
    margin-right: 48px !important; }

  .ds-u-xl-margin-y--6 {
    margin-bottom: 48px !important;
    margin-top: 48px !important; }

  .ds-u-xl-margin--7 {
    margin: 56px !important; }

  .ds-u-xl-margin-top--7 {
    margin-top: 56px !important; }

  .ds-u-xl-margin-right--7 {
    margin-right: 56px !important; }

  .ds-u-xl-margin-bottom--7 {
    margin-bottom: 56px !important; }

  .ds-u-xl-margin-left--7 {
    margin-left: 56px !important; }

  .ds-u-xl-margin-x--7 {
    margin-left: 56px !important;
    margin-right: 56px !important; }

  .ds-u-xl-margin-y--7 {
    margin-bottom: 56px !important;
    margin-top: 56px !important; }

  .ds-u-xl-margin--auto {
    margin: auto !important; }

  .ds-u-xl-margin-top--auto {
    margin-top: auto !important; }

  .ds-u-xl-margin-right--auto {
    margin-right: auto !important; }

  .ds-u-xl-margin-bottom--auto {
    margin-bottom: auto !important; }

  .ds-u-xl-margin-left--auto {
    margin-left: auto !important; }

  .ds-u-xl-margin-x--auto {
    margin-left: auto !important;
    margin-right: auto !important; }

  .ds-u-xl-margin-y--auto {
    margin-bottom: auto !important;
    margin-top: auto !important; } }
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Measure

Line length, also called "measure", is an important part of readability.

The design system includes 3 measure modifiers:

- **narrow** = line length ~45 characters
- **base** = line length ~65 characters
- **wide** = line length ~80 characters

**Format**: `ds-u-measure--[NAME]`

Markup:
<h2 class="preview__label">ds-u-measure--narrow</h2>
<div class="ds-u-measure--narrow">{{ lorem-l }}</div>
<h2 class="preview__label">ds-u-measure--base</h2>
<div class="ds-u-measure--base ds-u-font-size--small">{{ lorem-l }}</div>
<h2 class="preview__label">ds-u-measure--wide</h2>
<div class="ds-u-measure--wide ds-u-font-size--small">{{ lorem-l }}</div>

Style guide: utilities.measure
*/
.ds-u-measure--narrow {
  max-width: 21em !important; }

.ds-u-measure--base {
  max-width: 31em !important; }

.ds-u-measure--wide {
  max-width: 42em !important; }

/*
---

## Accessibility

> A line of text shouldn’t be longer than 80 characters. This helps users with certain reading or visual disabilities that have trouble keeping their place when reading long lines of text. If the width of the text container is resized, it should be allowed to scale in a way so 80 characters or less are shown...Another way to ensure good line-length is to use a fluid layout or apply responsive web design techniques that allow the user to resize the window to find a comfortable line length. &mdash; [W3C](https://www.w3.org/WAI/tutorials/page-structure/styling/#line-length)

Style guide: utilities.measure.guidance
*/
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/index';*/
/*
Overflow

Use the overflow utility to set the `overflow` property of an element.

> The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)

**Format**: `ds-u-overflow--[VALUE]`

Markup:
<% ['ds-u-overflow--hidden', 'ds-u-overflow--scroll', 'ds-u-overflow--auto'].forEach(util => { -%>
  <code class="preview__label"><%= util %></code>
  <div class="<%= util %> ds-base--inverse ds-u-padding--2" style="height: 100px">
    <div class="ds-u-measure--narrow">{{lorem-l }}</div>
  </div>
<% }) -%>

Style guide: utilities.overflow
*/
.ds-u-overflow--hidden {
  overflow: hidden !important; }

.ds-u-overflow--scroll {
  overflow: scroll !important; }

.ds-u-overflow--auto {
  overflow: auto !important; }

/*
Clearfix

The clearfix utility can be applied to an element to clear floats around the element.

**Format**: `ds-u-clearfix`

Markup:
<div class="ds-u-clearfix ds-u-fill--gray">
  <div class="ds-u-float--right ds-u-fill--primary-alt-lightest" style="width: 100px; height: 100px;">
    Floated right
  </div>
</div>

Style guide: utilities.clearfix
*/
.ds-u-clearfix::before {
  content: '';
  display: table; }
.ds-u-clearfix::after {
  clear: both;
  content: '';
  display: table; }

/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/index';*/
/*
Padding

Use the padding utility to change an element's padding.

**Format**: `ds-u-padding-[x|y|bottom|left|right|top]--[MULTIPLE]`

[Read more about how the design system approaches spacing here.]({{root}}/layout/spacing)

@hide-markup

Markup:
<% ['', '-x', '-y', '-bottom', '-left', '-right', '-top'].forEach(name => { -%>
<% for (var i = 0; i < 8; i++) { %>
<div class="ds-base--inverse ds-u-padding<%= name %>--<%= i %> ds-u-margin-bottom--2">
  <code>ds-u-padding<%= name %>--<%= i %></code>
</div>
<% } -%>
<% }) -%>

Style guide: utilities.padding
*/
.ds-u-padding--0 {
  padding: 0 !important; }

.ds-u-padding-top--0 {
  padding-top: 0 !important; }

.ds-u-padding-right--0 {
  padding-right: 0 !important; }

.ds-u-padding-bottom--0 {
  padding-bottom: 0 !important; }

.ds-u-padding-left--0 {
  padding-left: 0 !important; }

.ds-u-padding-x--0 {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.ds-u-padding-y--0 {
  padding-bottom: 0 !important;
  padding-top: 0 !important; }

.ds-u-padding--1 {
  padding: 8px !important; }

.ds-u-padding-top--1 {
  padding-top: 8px !important; }

.ds-u-padding-right--1 {
  padding-right: 8px !important; }

.ds-u-padding-bottom--1 {
  padding-bottom: 8px !important; }

.ds-u-padding-left--1 {
  padding-left: 8px !important; }

.ds-u-padding-x--1 {
  padding-left: 8px !important;
  padding-right: 8px !important; }

.ds-u-padding-y--1 {
  padding-bottom: 8px !important;
  padding-top: 8px !important; }

.ds-u-padding--2 {
  padding: 16px !important; }

.ds-u-padding-top--2 {
  padding-top: 16px !important; }

.ds-u-padding-right--2 {
  padding-right: 16px !important; }

.ds-u-padding-bottom--2 {
  padding-bottom: 16px !important; }

.ds-u-padding-left--2 {
  padding-left: 16px !important; }

.ds-u-padding-x--2 {
  padding-left: 16px !important;
  padding-right: 16px !important; }

.ds-u-padding-y--2 {
  padding-bottom: 16px !important;
  padding-top: 16px !important; }

.ds-u-padding--3 {
  padding: 24px !important; }

.ds-u-padding-top--3 {
  padding-top: 24px !important; }

.ds-u-padding-right--3 {
  padding-right: 24px !important; }

.ds-u-padding-bottom--3 {
  padding-bottom: 24px !important; }

.ds-u-padding-left--3 {
  padding-left: 24px !important; }

.ds-u-padding-x--3 {
  padding-left: 24px !important;
  padding-right: 24px !important; }

.ds-u-padding-y--3 {
  padding-bottom: 24px !important;
  padding-top: 24px !important; }

.ds-u-padding--4 {
  padding: 32px !important; }

.ds-u-padding-top--4 {
  padding-top: 32px !important; }

.ds-u-padding-right--4 {
  padding-right: 32px !important; }

.ds-u-padding-bottom--4 {
  padding-bottom: 32px !important; }

.ds-u-padding-left--4 {
  padding-left: 32px !important; }

.ds-u-padding-x--4 {
  padding-left: 32px !important;
  padding-right: 32px !important; }

.ds-u-padding-y--4 {
  padding-bottom: 32px !important;
  padding-top: 32px !important; }

.ds-u-padding--5 {
  padding: 40px !important; }

.ds-u-padding-top--5 {
  padding-top: 40px !important; }

.ds-u-padding-right--5 {
  padding-right: 40px !important; }

.ds-u-padding-bottom--5 {
  padding-bottom: 40px !important; }

.ds-u-padding-left--5 {
  padding-left: 40px !important; }

.ds-u-padding-x--5 {
  padding-left: 40px !important;
  padding-right: 40px !important; }

.ds-u-padding-y--5 {
  padding-bottom: 40px !important;
  padding-top: 40px !important; }

.ds-u-padding--6 {
  padding: 48px !important; }

.ds-u-padding-top--6 {
  padding-top: 48px !important; }

.ds-u-padding-right--6 {
  padding-right: 48px !important; }

.ds-u-padding-bottom--6 {
  padding-bottom: 48px !important; }

.ds-u-padding-left--6 {
  padding-left: 48px !important; }

.ds-u-padding-x--6 {
  padding-left: 48px !important;
  padding-right: 48px !important; }

.ds-u-padding-y--6 {
  padding-bottom: 48px !important;
  padding-top: 48px !important; }

.ds-u-padding--7 {
  padding: 56px !important; }

.ds-u-padding-top--7 {
  padding-top: 56px !important; }

.ds-u-padding-right--7 {
  padding-right: 56px !important; }

.ds-u-padding-bottom--7 {
  padding-bottom: 56px !important; }

.ds-u-padding-left--7 {
  padding-left: 56px !important; }

.ds-u-padding-x--7 {
  padding-left: 56px !important;
  padding-right: 56px !important; }

.ds-u-padding-y--7 {
  padding-bottom: 56px !important;
  padding-top: 56px !important; }

/*
Responsive padding

Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the padding at specific breakpoints.

_Resize your browser to see each breakpoint in action:_

Markup:
<div class="ds-base--inverse">
  <div class="ds-u-padding--1 ds-u-sm-padding--2 ds-u-md-padding--3 ds-u-lg-padding--4 ds-u-xl-padding--5">
    Responsive padding
  </div>
</div>

Style guide: utilities.padding.responsive
*/
@media (min-width: 544px) {
  .ds-u-sm-padding--0 {
    padding: 0 !important; }

  .ds-u-sm-padding-top--0 {
    padding-top: 0 !important; }

  .ds-u-sm-padding-right--0 {
    padding-right: 0 !important; }

  .ds-u-sm-padding-bottom--0 {
    padding-bottom: 0 !important; }

  .ds-u-sm-padding-left--0 {
    padding-left: 0 !important; }

  .ds-u-sm-padding-x--0 {
    padding-left: 0 !important;
    padding-right: 0 !important; }

  .ds-u-sm-padding-y--0 {
    padding-bottom: 0 !important;
    padding-top: 0 !important; }

  .ds-u-sm-padding--1 {
    padding: 8px !important; }

  .ds-u-sm-padding-top--1 {
    padding-top: 8px !important; }

  .ds-u-sm-padding-right--1 {
    padding-right: 8px !important; }

  .ds-u-sm-padding-bottom--1 {
    padding-bottom: 8px !important; }

  .ds-u-sm-padding-left--1 {
    padding-left: 8px !important; }

  .ds-u-sm-padding-x--1 {
    padding-left: 8px !important;
    padding-right: 8px !important; }

  .ds-u-sm-padding-y--1 {
    padding-bottom: 8px !important;
    padding-top: 8px !important; }

  .ds-u-sm-padding--2 {
    padding: 16px !important; }

  .ds-u-sm-padding-top--2 {
    padding-top: 16px !important; }

  .ds-u-sm-padding-right--2 {
    padding-right: 16px !important; }

  .ds-u-sm-padding-bottom--2 {
    padding-bottom: 16px !important; }

  .ds-u-sm-padding-left--2 {
    padding-left: 16px !important; }

  .ds-u-sm-padding-x--2 {
    padding-left: 16px !important;
    padding-right: 16px !important; }

  .ds-u-sm-padding-y--2 {
    padding-bottom: 16px !important;
    padding-top: 16px !important; }

  .ds-u-sm-padding--3 {
    padding: 24px !important; }

  .ds-u-sm-padding-top--3 {
    padding-top: 24px !important; }

  .ds-u-sm-padding-right--3 {
    padding-right: 24px !important; }

  .ds-u-sm-padding-bottom--3 {
    padding-bottom: 24px !important; }

  .ds-u-sm-padding-left--3 {
    padding-left: 24px !important; }

  .ds-u-sm-padding-x--3 {
    padding-left: 24px !important;
    padding-right: 24px !important; }

  .ds-u-sm-padding-y--3 {
    padding-bottom: 24px !important;
    padding-top: 24px !important; }

  .ds-u-sm-padding--4 {
    padding: 32px !important; }

  .ds-u-sm-padding-top--4 {
    padding-top: 32px !important; }

  .ds-u-sm-padding-right--4 {
    padding-right: 32px !important; }

  .ds-u-sm-padding-bottom--4 {
    padding-bottom: 32px !important; }

  .ds-u-sm-padding-left--4 {
    padding-left: 32px !important; }

  .ds-u-sm-padding-x--4 {
    padding-left: 32px !important;
    padding-right: 32px !important; }

  .ds-u-sm-padding-y--4 {
    padding-bottom: 32px !important;
    padding-top: 32px !important; }

  .ds-u-sm-padding--5 {
    padding: 40px !important; }

  .ds-u-sm-padding-top--5 {
    padding-top: 40px !important; }

  .ds-u-sm-padding-right--5 {
    padding-right: 40px !important; }

  .ds-u-sm-padding-bottom--5 {
    padding-bottom: 40px !important; }

  .ds-u-sm-padding-left--5 {
    padding-left: 40px !important; }

  .ds-u-sm-padding-x--5 {
    padding-left: 40px !important;
    padding-right: 40px !important; }

  .ds-u-sm-padding-y--5 {
    padding-bottom: 40px !important;
    padding-top: 40px !important; }

  .ds-u-sm-padding--6 {
    padding: 48px !important; }

  .ds-u-sm-padding-top--6 {
    padding-top: 48px !important; }

  .ds-u-sm-padding-right--6 {
    padding-right: 48px !important; }

  .ds-u-sm-padding-bottom--6 {
    padding-bottom: 48px !important; }

  .ds-u-sm-padding-left--6 {
    padding-left: 48px !important; }

  .ds-u-sm-padding-x--6 {
    padding-left: 48px !important;
    padding-right: 48px !important; }

  .ds-u-sm-padding-y--6 {
    padding-bottom: 48px !important;
    padding-top: 48px !important; }

  .ds-u-sm-padding--7 {
    padding: 56px !important; }

  .ds-u-sm-padding-top--7 {
    padding-top: 56px !important; }

  .ds-u-sm-padding-right--7 {
    padding-right: 56px !important; }

  .ds-u-sm-padding-bottom--7 {
    padding-bottom: 56px !important; }

  .ds-u-sm-padding-left--7 {
    padding-left: 56px !important; }

  .ds-u-sm-padding-x--7 {
    padding-left: 56px !important;
    padding-right: 56px !important; }

  .ds-u-sm-padding-y--7 {
    padding-bottom: 56px !important;
    padding-top: 56px !important; } }
@media (min-width: 768px) {
  .ds-u-md-padding--0 {
    padding: 0 !important; }

  .ds-u-md-padding-top--0 {
    padding-top: 0 !important; }

  .ds-u-md-padding-right--0 {
    padding-right: 0 !important; }

  .ds-u-md-padding-bottom--0 {
    padding-bottom: 0 !important; }

  .ds-u-md-padding-left--0 {
    padding-left: 0 !important; }

  .ds-u-md-padding-x--0 {
    padding-left: 0 !important;
    padding-right: 0 !important; }

  .ds-u-md-padding-y--0 {
    padding-bottom: 0 !important;
    padding-top: 0 !important; }

  .ds-u-md-padding--1 {
    padding: 8px !important; }

  .ds-u-md-padding-top--1 {
    padding-top: 8px !important; }

  .ds-u-md-padding-right--1 {
    padding-right: 8px !important; }

  .ds-u-md-padding-bottom--1 {
    padding-bottom: 8px !important; }

  .ds-u-md-padding-left--1 {
    padding-left: 8px !important; }

  .ds-u-md-padding-x--1 {
    padding-left: 8px !important;
    padding-right: 8px !important; }

  .ds-u-md-padding-y--1 {
    padding-bottom: 8px !important;
    padding-top: 8px !important; }

  .ds-u-md-padding--2 {
    padding: 16px !important; }

  .ds-u-md-padding-top--2 {
    padding-top: 16px !important; }

  .ds-u-md-padding-right--2 {
    padding-right: 16px !important; }

  .ds-u-md-padding-bottom--2 {
    padding-bottom: 16px !important; }

  .ds-u-md-padding-left--2 {
    padding-left: 16px !important; }

  .ds-u-md-padding-x--2 {
    padding-left: 16px !important;
    padding-right: 16px !important; }

  .ds-u-md-padding-y--2 {
    padding-bottom: 16px !important;
    padding-top: 16px !important; }

  .ds-u-md-padding--3 {
    padding: 24px !important; }

  .ds-u-md-padding-top--3 {
    padding-top: 24px !important; }

  .ds-u-md-padding-right--3 {
    padding-right: 24px !important; }

  .ds-u-md-padding-bottom--3 {
    padding-bottom: 24px !important; }

  .ds-u-md-padding-left--3 {
    padding-left: 24px !important; }

  .ds-u-md-padding-x--3 {
    padding-left: 24px !important;
    padding-right: 24px !important; }

  .ds-u-md-padding-y--3 {
    padding-bottom: 24px !important;
    padding-top: 24px !important; }

  .ds-u-md-padding--4 {
    padding: 32px !important; }

  .ds-u-md-padding-top--4 {
    padding-top: 32px !important; }

  .ds-u-md-padding-right--4 {
    padding-right: 32px !important; }

  .ds-u-md-padding-bottom--4 {
    padding-bottom: 32px !important; }

  .ds-u-md-padding-left--4 {
    padding-left: 32px !important; }

  .ds-u-md-padding-x--4 {
    padding-left: 32px !important;
    padding-right: 32px !important; }

  .ds-u-md-padding-y--4 {
    padding-bottom: 32px !important;
    padding-top: 32px !important; }

  .ds-u-md-padding--5 {
    padding: 40px !important; }

  .ds-u-md-padding-top--5 {
    padding-top: 40px !important; }

  .ds-u-md-padding-right--5 {
    padding-right: 40px !important; }

  .ds-u-md-padding-bottom--5 {
    padding-bottom: 40px !important; }

  .ds-u-md-padding-left--5 {
    padding-left: 40px !important; }

  .ds-u-md-padding-x--5 {
    padding-left: 40px !important;
    padding-right: 40px !important; }

  .ds-u-md-padding-y--5 {
    padding-bottom: 40px !important;
    padding-top: 40px !important; }

  .ds-u-md-padding--6 {
    padding: 48px !important; }

  .ds-u-md-padding-top--6 {
    padding-top: 48px !important; }

  .ds-u-md-padding-right--6 {
    padding-right: 48px !important; }

  .ds-u-md-padding-bottom--6 {
    padding-bottom: 48px !important; }

  .ds-u-md-padding-left--6 {
    padding-left: 48px !important; }

  .ds-u-md-padding-x--6 {
    padding-left: 48px !important;
    padding-right: 48px !important; }

  .ds-u-md-padding-y--6 {
    padding-bottom: 48px !important;
    padding-top: 48px !important; }

  .ds-u-md-padding--7 {
    padding: 56px !important; }

  .ds-u-md-padding-top--7 {
    padding-top: 56px !important; }

  .ds-u-md-padding-right--7 {
    padding-right: 56px !important; }

  .ds-u-md-padding-bottom--7 {
    padding-bottom: 56px !important; }

  .ds-u-md-padding-left--7 {
    padding-left: 56px !important; }

  .ds-u-md-padding-x--7 {
    padding-left: 56px !important;
    padding-right: 56px !important; }

  .ds-u-md-padding-y--7 {
    padding-bottom: 56px !important;
    padding-top: 56px !important; } }
@media (min-width: 1024px) {
  .ds-u-lg-padding--0 {
    padding: 0 !important; }

  .ds-u-lg-padding-top--0 {
    padding-top: 0 !important; }

  .ds-u-lg-padding-right--0 {
    padding-right: 0 !important; }

  .ds-u-lg-padding-bottom--0 {
    padding-bottom: 0 !important; }

  .ds-u-lg-padding-left--0 {
    padding-left: 0 !important; }

  .ds-u-lg-padding-x--0 {
    padding-left: 0 !important;
    padding-right: 0 !important; }

  .ds-u-lg-padding-y--0 {
    padding-bottom: 0 !important;
    padding-top: 0 !important; }

  .ds-u-lg-padding--1 {
    padding: 8px !important; }

  .ds-u-lg-padding-top--1 {
    padding-top: 8px !important; }

  .ds-u-lg-padding-right--1 {
    padding-right: 8px !important; }

  .ds-u-lg-padding-bottom--1 {
    padding-bottom: 8px !important; }

  .ds-u-lg-padding-left--1 {
    padding-left: 8px !important; }

  .ds-u-lg-padding-x--1 {
    padding-left: 8px !important;
    padding-right: 8px !important; }

  .ds-u-lg-padding-y--1 {
    padding-bottom: 8px !important;
    padding-top: 8px !important; }

  .ds-u-lg-padding--2 {
    padding: 16px !important; }

  .ds-u-lg-padding-top--2 {
    padding-top: 16px !important; }

  .ds-u-lg-padding-right--2 {
    padding-right: 16px !important; }

  .ds-u-lg-padding-bottom--2 {
    padding-bottom: 16px !important; }

  .ds-u-lg-padding-left--2 {
    padding-left: 16px !important; }

  .ds-u-lg-padding-x--2 {
    padding-left: 16px !important;
    padding-right: 16px !important; }

  .ds-u-lg-padding-y--2 {
    padding-bottom: 16px !important;
    padding-top: 16px !important; }

  .ds-u-lg-padding--3 {
    padding: 24px !important; }

  .ds-u-lg-padding-top--3 {
    padding-top: 24px !important; }

  .ds-u-lg-padding-right--3 {
    padding-right: 24px !important; }

  .ds-u-lg-padding-bottom--3 {
    padding-bottom: 24px !important; }

  .ds-u-lg-padding-left--3 {
    padding-left: 24px !important; }

  .ds-u-lg-padding-x--3 {
    padding-left: 24px !important;
    padding-right: 24px !important; }

  .ds-u-lg-padding-y--3 {
    padding-bottom: 24px !important;
    padding-top: 24px !important; }

  .ds-u-lg-padding--4 {
    padding: 32px !important; }

  .ds-u-lg-padding-top--4 {
    padding-top: 32px !important; }

  .ds-u-lg-padding-right--4 {
    padding-right: 32px !important; }

  .ds-u-lg-padding-bottom--4 {
    padding-bottom: 32px !important; }

  .ds-u-lg-padding-left--4 {
    padding-left: 32px !important; }

  .ds-u-lg-padding-x--4 {
    padding-left: 32px !important;
    padding-right: 32px !important; }

  .ds-u-lg-padding-y--4 {
    padding-bottom: 32px !important;
    padding-top: 32px !important; }

  .ds-u-lg-padding--5 {
    padding: 40px !important; }

  .ds-u-lg-padding-top--5 {
    padding-top: 40px !important; }

  .ds-u-lg-padding-right--5 {
    padding-right: 40px !important; }

  .ds-u-lg-padding-bottom--5 {
    padding-bottom: 40px !important; }

  .ds-u-lg-padding-left--5 {
    padding-left: 40px !important; }

  .ds-u-lg-padding-x--5 {
    padding-left: 40px !important;
    padding-right: 40px !important; }

  .ds-u-lg-padding-y--5 {
    padding-bottom: 40px !important;
    padding-top: 40px !important; }

  .ds-u-lg-padding--6 {
    padding: 48px !important; }

  .ds-u-lg-padding-top--6 {
    padding-top: 48px !important; }

  .ds-u-lg-padding-right--6 {
    padding-right: 48px !important; }

  .ds-u-lg-padding-bottom--6 {
    padding-bottom: 48px !important; }

  .ds-u-lg-padding-left--6 {
    padding-left: 48px !important; }

  .ds-u-lg-padding-x--6 {
    padding-left: 48px !important;
    padding-right: 48px !important; }

  .ds-u-lg-padding-y--6 {
    padding-bottom: 48px !important;
    padding-top: 48px !important; }

  .ds-u-lg-padding--7 {
    padding: 56px !important; }

  .ds-u-lg-padding-top--7 {
    padding-top: 56px !important; }

  .ds-u-lg-padding-right--7 {
    padding-right: 56px !important; }

  .ds-u-lg-padding-bottom--7 {
    padding-bottom: 56px !important; }

  .ds-u-lg-padding-left--7 {
    padding-left: 56px !important; }

  .ds-u-lg-padding-x--7 {
    padding-left: 56px !important;
    padding-right: 56px !important; }

  .ds-u-lg-padding-y--7 {
    padding-bottom: 56px !important;
    padding-top: 56px !important; } }
@media (min-width: 1280px) {
  .ds-u-xl-padding--0 {
    padding: 0 !important; }

  .ds-u-xl-padding-top--0 {
    padding-top: 0 !important; }

  .ds-u-xl-padding-right--0 {
    padding-right: 0 !important; }

  .ds-u-xl-padding-bottom--0 {
    padding-bottom: 0 !important; }

  .ds-u-xl-padding-left--0 {
    padding-left: 0 !important; }

  .ds-u-xl-padding-x--0 {
    padding-left: 0 !important;
    padding-right: 0 !important; }

  .ds-u-xl-padding-y--0 {
    padding-bottom: 0 !important;
    padding-top: 0 !important; }

  .ds-u-xl-padding--1 {
    padding: 8px !important; }

  .ds-u-xl-padding-top--1 {
    padding-top: 8px !important; }

  .ds-u-xl-padding-right--1 {
    padding-right: 8px !important; }

  .ds-u-xl-padding-bottom--1 {
    padding-bottom: 8px !important; }

  .ds-u-xl-padding-left--1 {
    padding-left: 8px !important; }

  .ds-u-xl-padding-x--1 {
    padding-left: 8px !important;
    padding-right: 8px !important; }

  .ds-u-xl-padding-y--1 {
    padding-bottom: 8px !important;
    padding-top: 8px !important; }

  .ds-u-xl-padding--2 {
    padding: 16px !important; }

  .ds-u-xl-padding-top--2 {
    padding-top: 16px !important; }

  .ds-u-xl-padding-right--2 {
    padding-right: 16px !important; }

  .ds-u-xl-padding-bottom--2 {
    padding-bottom: 16px !important; }

  .ds-u-xl-padding-left--2 {
    padding-left: 16px !important; }

  .ds-u-xl-padding-x--2 {
    padding-left: 16px !important;
    padding-right: 16px !important; }

  .ds-u-xl-padding-y--2 {
    padding-bottom: 16px !important;
    padding-top: 16px !important; }

  .ds-u-xl-padding--3 {
    padding: 24px !important; }

  .ds-u-xl-padding-top--3 {
    padding-top: 24px !important; }

  .ds-u-xl-padding-right--3 {
    padding-right: 24px !important; }

  .ds-u-xl-padding-bottom--3 {
    padding-bottom: 24px !important; }

  .ds-u-xl-padding-left--3 {
    padding-left: 24px !important; }

  .ds-u-xl-padding-x--3 {
    padding-left: 24px !important;
    padding-right: 24px !important; }

  .ds-u-xl-padding-y--3 {
    padding-bottom: 24px !important;
    padding-top: 24px !important; }

  .ds-u-xl-padding--4 {
    padding: 32px !important; }

  .ds-u-xl-padding-top--4 {
    padding-top: 32px !important; }

  .ds-u-xl-padding-right--4 {
    padding-right: 32px !important; }

  .ds-u-xl-padding-bottom--4 {
    padding-bottom: 32px !important; }

  .ds-u-xl-padding-left--4 {
    padding-left: 32px !important; }

  .ds-u-xl-padding-x--4 {
    padding-left: 32px !important;
    padding-right: 32px !important; }

  .ds-u-xl-padding-y--4 {
    padding-bottom: 32px !important;
    padding-top: 32px !important; }

  .ds-u-xl-padding--5 {
    padding: 40px !important; }

  .ds-u-xl-padding-top--5 {
    padding-top: 40px !important; }

  .ds-u-xl-padding-right--5 {
    padding-right: 40px !important; }

  .ds-u-xl-padding-bottom--5 {
    padding-bottom: 40px !important; }

  .ds-u-xl-padding-left--5 {
    padding-left: 40px !important; }

  .ds-u-xl-padding-x--5 {
    padding-left: 40px !important;
    padding-right: 40px !important; }

  .ds-u-xl-padding-y--5 {
    padding-bottom: 40px !important;
    padding-top: 40px !important; }

  .ds-u-xl-padding--6 {
    padding: 48px !important; }

  .ds-u-xl-padding-top--6 {
    padding-top: 48px !important; }

  .ds-u-xl-padding-right--6 {
    padding-right: 48px !important; }

  .ds-u-xl-padding-bottom--6 {
    padding-bottom: 48px !important; }

  .ds-u-xl-padding-left--6 {
    padding-left: 48px !important; }

  .ds-u-xl-padding-x--6 {
    padding-left: 48px !important;
    padding-right: 48px !important; }

  .ds-u-xl-padding-y--6 {
    padding-bottom: 48px !important;
    padding-top: 48px !important; }

  .ds-u-xl-padding--7 {
    padding: 56px !important; }

  .ds-u-xl-padding-top--7 {
    padding-top: 56px !important; }

  .ds-u-xl-padding-right--7 {
    padding-right: 56px !important; }

  .ds-u-xl-padding-bottom--7 {
    padding-bottom: 56px !important; }

  .ds-u-xl-padding-left--7 {
    padding-left: 56px !important; }

  .ds-u-xl-padding-x--7 {
    padding-left: 56px !important;
    padding-right: 56px !important; }

  .ds-u-xl-padding-y--7 {
    padding-bottom: 56px !important;
    padding-top: 56px !important; } }
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*

/*
Text alignment

Align text using the `text-align` utility.

**Format**: `ds-u-text-align--[VALUE]`

Markup:
<div class="ds-u-text-align--center">
  <code class="preview__label">ds-u-text-align--center</code>
  Center
</div>
<div class="ds-u-text-align--left">
  <code class="preview__label">ds-u-text-align--left</code>
  Left
</div>
<div class="ds-u-text-align--right">
  <code class="preview__label">ds-u-text-align--right</code>
  Right
</div>

Style guide: utilities.text-align
*/
.ds-u-text-align--center {
  text-align: center !important; }

.ds-u-text-align--left {
  text-align: left !important; }

.ds-u-text-align--right {
  text-align: right !important; }

/*
Responsive text alignment

@responsive

Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the text alignment at specific breakpoints.

Markup:
<div class="ds-u-sm-text-align--center ds-u-md-text-align--left ds-u-lg-text-align--right">
  {{lorem-s}}
</div>

Style guide: utilities.text-align.responsive
*/
@media (min-width: 544px) {
  .ds-u-sm-text-align--center {
    text-align: center !important; }

  .ds-u-sm-text-align--left {
    text-align: left !important; }

  .ds-u-sm-text-align--right {
    text-align: right !important; } }
@media (min-width: 768px) {
  .ds-u-md-text-align--center {
    text-align: center !important; }

  .ds-u-md-text-align--left {
    text-align: left !important; }

  .ds-u-md-text-align--right {
    text-align: right !important; } }
@media (min-width: 1024px) {
  .ds-u-lg-text-align--center {
    text-align: center !important; }

  .ds-u-lg-text-align--left {
    text-align: left !important; }

  .ds-u-lg-text-align--right {
    text-align: right !important; } }
@media (min-width: 1280px) {
  .ds-u-xl-text-align--center {
    text-align: center !important; }

  .ds-u-xl-text-align--left {
    text-align: left !important; }

  .ds-u-xl-text-align--right {
    text-align: right !important; } }
/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*

/*
Text decoration

Set whether text is underlined or not using the `text-decoration` utility.

**Format**: `ds-u-text-decoration--[VALUE]`

Markup:
<code class="preview__label">ds-u-text-decoration--underline</code>
<span class="ds-u-text-decoration--underline">Underlined text</span>
<code class="preview__label">ds-u-text-decoration--none</code>
<a class="ds-u-text-decoration--none" href="javascript:void(0);">Link text without underline</a>

Style guide: utilities.text-decoration
*/
.ds-u-text-decoration--underline {
  text-decoration: underline !important; }

.ds-u-text-decoration--none {
  text-decoration: none !important; }

/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Text transform

Set the capitalization of text using the text transform utility.

**Format**: `ds-u-text-transform--[VALUE]`

Markup:
<code class="preview__label">ds-u-text-transform--uppercase</code>
<div class="ds-u-text-transform--uppercase">{{lorem-m}}</div>
<code class="preview__label">ds-u-text-transform--lowercase</code>
<div class="ds-u-text-transform--lowercase">{{lorem-m}}</div>
<code class="preview__label">ds-u-text-transform--capitalize</code>
<div class="ds-u-text-transform--capitalize">{{lorem-m}}</div>

Style guide: utilities.text-transform
*/
.ds-u-text-transform--uppercase {
  text-transform: uppercase !important; }

.ds-u-text-transform--lowercase {
  text-transform: lowercase !important; }

.ds-u-text-transform--capitalize {
  text-transform: capitalize !important; }

/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Truncate

Use the truncate utility (`ds-u-truncate`) to limit a text string to one line.

### Accessibility

Place the full text in a `title` attribute so that it’s accessible on hover.

Markup:
<p class="ds-u-truncate" title="{{lorem-l}}">
  {{lorem-l}}
</p>

Style guide: utilities.truncate
*/
.ds-u-truncate {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important; }

/* stylelint-disable declaration-no-important */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/settings/index';*/
/*
Vertical align

Use the vertical align utility on inline-level elements (`inline` and `inline-block`) and on table cells.

**Format**: `ds-u-valign--[VALUE]`

Markup:
<table>
  <tbody>
    <tr>
      <td class="ds-u-font-size--display ds-u-leading--reset ds-u-padding--4 ds-u-fill--primary-alt-lightest">A</td>
      <td class="ds-u-valign--top">
        <code class="preview__label">ds-u-valign--top</code>
        Top alignment
      </td>
    </tr>
    <tr>
      <td class="ds-u-font-size--display ds-u-leading--reset ds-u-padding--4 ds-u-fill--primary-alt-lightest">B</td>
      <td class="ds-u-valign--middle">
        <code class="preview__label">ds-u-valign--middle</code>
        Middle alignment
      </td>
    </tr>
    <tr>
      <td class="ds-u-font-size--display ds-u-leading--reset ds-u-padding--4 ds-u-fill--primary-alt-lightest">C</td>
      <td class="ds-u-valign--bottom">
        <code class="preview__label">ds-u-valign--bottom</code>
        Bottom alignment
      </td>
    </tr>
  </tbody>
</table>

Style guide: utilities.vertical-align
*/
.ds-u-valign--top {
  vertical-align: top !important; }

.ds-u-valign--middle {
  vertical-align: middle !important; }

.ds-u-valign--bottom {
  vertical-align: bottom !important; }

/*! Design System - Layout v{{version}} */
/*DUPLICATE IMPORT @import '@cmsgov/design-system-support/src/index';
*/
/*
Use a container to center align your page and constrain its width so it doesn't
span too wide.
*/
.ds-l-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1040px;
  padding-left: 16px;
  padding-right: 16px; }
  @media (min-width: 544px) {
    .ds-l-container {
      padding-left: 32px;
      padding-right: 32px; } }

.ds-l-row,
.ds-l-form-row {
  display: flex;
  flex-wrap: wrap; }

.ds-l-row {
  margin-left: -16px;
  margin-right: -16px; }

.ds-l-form-row {
  margin-left: -8px;
  margin-right: -8px; }

.ds-l-col--1, .ds-l-col--2, .ds-l-col--3, .ds-l-col--4, .ds-l-col--5, .ds-l-col--6, .ds-l-col--7, .ds-l-col--8, .ds-l-col--9, .ds-l-col--10, .ds-l-col--11, .ds-l-col--12, .ds-l-col,
.ds-l-col--auto, .ds-l-sm-col--1, .ds-l-sm-col--2, .ds-l-sm-col--3, .ds-l-sm-col--4, .ds-l-sm-col--5, .ds-l-sm-col--6, .ds-l-sm-col--7, .ds-l-sm-col--8, .ds-l-sm-col--9, .ds-l-sm-col--10, .ds-l-sm-col--11, .ds-l-sm-col--12, .ds-l-sm-col--auto, .ds-l-sm-col, .ds-l-md-col--1, .ds-l-md-col--2, .ds-l-md-col--3, .ds-l-md-col--4, .ds-l-md-col--5, .ds-l-md-col--6, .ds-l-md-col--7, .ds-l-md-col--8, .ds-l-md-col--9, .ds-l-md-col--10, .ds-l-md-col--11, .ds-l-md-col--12, .ds-l-md-col--auto, .ds-l-md-col, .ds-l-lg-col--1, .ds-l-lg-col--2, .ds-l-lg-col--3, .ds-l-lg-col--4, .ds-l-lg-col--5, .ds-l-lg-col--6, .ds-l-lg-col--7, .ds-l-lg-col--8, .ds-l-lg-col--9, .ds-l-lg-col--10, .ds-l-lg-col--11, .ds-l-lg-col--12, .ds-l-lg-col--auto, .ds-l-lg-col, .ds-l-xl-col--1, .ds-l-xl-col--2, .ds-l-xl-col--3, .ds-l-xl-col--4, .ds-l-xl-col--5, .ds-l-xl-col--6, .ds-l-xl-col--7, .ds-l-xl-col--8, .ds-l-xl-col--9, .ds-l-xl-col--10, .ds-l-xl-col--11, .ds-l-xl-col--12, .ds-l-xl-col--auto, .ds-l-xl-col {
  box-sizing: border-box;
  min-height: 1px;
  min-width: 0;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%; }

.ds-l-col {
  flex-basis: 0%;
  flex-grow: 1;
  max-width: 100%; }

.ds-l-col--auto {
  flex: 0% 0% auto;
  max-width: none;
  width: auto; }

.ds-l-col--1 {
  flex: 0% 0% 8.3333333333%;
  max-width: 8.3333333333%; }

.ds-l-col--2 {
  flex: 0% 0% 16.6666666667%;
  max-width: 16.6666666667%; }

.ds-l-col--3 {
  flex: 0% 0% 25%;
  max-width: 25%; }

.ds-l-col--4 {
  flex: 0% 0% 33.3333333333%;
  max-width: 33.3333333333%; }

.ds-l-col--5 {
  flex: 0% 0% 41.6666666667%;
  max-width: 41.6666666667%; }

.ds-l-col--6 {
  flex: 0% 0% 50%;
  max-width: 50%; }

.ds-l-col--7 {
  flex: 0% 0% 58.3333333333%;
  max-width: 58.3333333333%; }

.ds-l-col--8 {
  flex: 0% 0% 66.6666666667%;
  max-width: 66.6666666667%; }

.ds-l-col--9 {
  flex: 0% 0% 75%;
  max-width: 75%; }

.ds-l-col--10 {
  flex: 0% 0% 83.3333333333%;
  max-width: 83.3333333333%; }

.ds-l-col--11 {
  flex: 0% 0% 91.6666666667%;
  max-width: 91.6666666667%; }

.ds-l-col--12 {
  flex: 0% 0% 100%;
  max-width: 100%; }

@media (min-width: 544px) {
  .ds-l-sm-col {
    flex-basis: 0%;
    flex-grow: 1;
    max-width: 100%; }

  .ds-l-sm-col--auto {
    flex: 0% 0% auto;
    max-width: none;
    width: auto; }

  .ds-l-sm-col--1 {
    flex: 0% 0% 8.3333333333%;
    max-width: 8.3333333333%; }

  .ds-l-sm-col--2 {
    flex: 0% 0% 16.6666666667%;
    max-width: 16.6666666667%; }

  .ds-l-sm-col--3 {
    flex: 0% 0% 25%;
    max-width: 25%; }

  .ds-l-sm-col--4 {
    flex: 0% 0% 33.3333333333%;
    max-width: 33.3333333333%; }

  .ds-l-sm-col--5 {
    flex: 0% 0% 41.6666666667%;
    max-width: 41.6666666667%; }

  .ds-l-sm-col--6 {
    flex: 0% 0% 50%;
    max-width: 50%; }

  .ds-l-sm-col--7 {
    flex: 0% 0% 58.3333333333%;
    max-width: 58.3333333333%; }

  .ds-l-sm-col--8 {
    flex: 0% 0% 66.6666666667%;
    max-width: 66.6666666667%; }

  .ds-l-sm-col--9 {
    flex: 0% 0% 75%;
    max-width: 75%; }

  .ds-l-sm-col--10 {
    flex: 0% 0% 83.3333333333%;
    max-width: 83.3333333333%; }

  .ds-l-sm-col--11 {
    flex: 0% 0% 91.6666666667%;
    max-width: 91.6666666667%; }

  .ds-l-sm-col--12 {
    flex: 0% 0% 100%;
    max-width: 100%; } }
@media (min-width: 768px) {
  .ds-l-md-col {
    flex-basis: 0%;
    flex-grow: 1;
    max-width: 100%; }

  .ds-l-md-col--auto {
    flex: 0% 0% auto;
    max-width: none;
    width: auto; }

  .ds-l-md-col--1 {
    flex: 0% 0% 8.3333333333%;
    max-width: 8.3333333333%; }

  .ds-l-md-col--2 {
    flex: 0% 0% 16.6666666667%;
    max-width: 16.6666666667%; }

  .ds-l-md-col--3 {
    flex: 0% 0% 25%;
    max-width: 25%; }

  .ds-l-md-col--4 {
    flex: 0% 0% 33.3333333333%;
    max-width: 33.3333333333%; }

  .ds-l-md-col--5 {
    flex: 0% 0% 41.6666666667%;
    max-width: 41.6666666667%; }

  .ds-l-md-col--6 {
    flex: 0% 0% 50%;
    max-width: 50%; }

  .ds-l-md-col--7 {
    flex: 0% 0% 58.3333333333%;
    max-width: 58.3333333333%; }

  .ds-l-md-col--8 {
    flex: 0% 0% 66.6666666667%;
    max-width: 66.6666666667%; }

  .ds-l-md-col--9 {
    flex: 0% 0% 75%;
    max-width: 75%; }

  .ds-l-md-col--10 {
    flex: 0% 0% 83.3333333333%;
    max-width: 83.3333333333%; }

  .ds-l-md-col--11 {
    flex: 0% 0% 91.6666666667%;
    max-width: 91.6666666667%; }

  .ds-l-md-col--12 {
    flex: 0% 0% 100%;
    max-width: 100%; } }
@media (min-width: 1024px) {
  .ds-l-lg-col {
    flex-basis: 0%;
    flex-grow: 1;
    max-width: 100%; }

  .ds-l-lg-col--auto {
    flex: 0% 0% auto;
    max-width: none;
    width: auto; }

  .ds-l-lg-col--1 {
    flex: 0% 0% 8.3333333333%;
    max-width: 8.3333333333%; }

  .ds-l-lg-col--2 {
    flex: 0% 0% 16.6666666667%;
    max-width: 16.6666666667%; }

  .ds-l-lg-col--3 {
    flex: 0% 0% 25%;
    max-width: 25%; }

  .ds-l-lg-col--4 {
    flex: 0% 0% 33.3333333333%;
    max-width: 33.3333333333%; }

  .ds-l-lg-col--5 {
    flex: 0% 0% 41.6666666667%;
    max-width: 41.6666666667%; }

  .ds-l-lg-col--6 {
    flex: 0% 0% 50%;
    max-width: 50%; }

  .ds-l-lg-col--7 {
    flex: 0% 0% 58.3333333333%;
    max-width: 58.3333333333%; }

  .ds-l-lg-col--8 {
    flex: 0% 0% 66.6666666667%;
    max-width: 66.6666666667%; }

  .ds-l-lg-col--9 {
    flex: 0% 0% 75%;
    max-width: 75%; }

  .ds-l-lg-col--10 {
    flex: 0% 0% 83.3333333333%;
    max-width: 83.3333333333%; }

  .ds-l-lg-col--11 {
    flex: 0% 0% 91.6666666667%;
    max-width: 91.6666666667%; }

  .ds-l-lg-col--12 {
    flex: 0% 0% 100%;
    max-width: 100%; } }
@media (min-width: 1280px) {
  .ds-l-xl-col {
    flex-basis: 0%;
    flex-grow: 1;
    max-width: 100%; }

  .ds-l-xl-col--auto {
    flex: 0% 0% auto;
    max-width: none;
    width: auto; }

  .ds-l-xl-col--1 {
    flex: 0% 0% 8.3333333333%;
    max-width: 8.3333333333%; }

  .ds-l-xl-col--2 {
    flex: 0% 0% 16.6666666667%;
    max-width: 16.6666666667%; }

  .ds-l-xl-col--3 {
    flex: 0% 0% 25%;
    max-width: 25%; }

  .ds-l-xl-col--4 {
    flex: 0% 0% 33.3333333333%;
    max-width: 33.3333333333%; }

  .ds-l-xl-col--5 {
    flex: 0% 0% 41.6666666667%;
    max-width: 41.6666666667%; }

  .ds-l-xl-col--6 {
    flex: 0% 0% 50%;
    max-width: 50%; }

  .ds-l-xl-col--7 {
    flex: 0% 0% 58.3333333333%;
    max-width: 58.3333333333%; }

  .ds-l-xl-col--8 {
    flex: 0% 0% 66.6666666667%;
    max-width: 66.6666666667%; }

  .ds-l-xl-col--9 {
    flex: 0% 0% 75%;
    max-width: 75%; }

  .ds-l-xl-col--10 {
    flex: 0% 0% 83.3333333333%;
    max-width: 83.3333333333%; }

  .ds-l-xl-col--11 {
    flex: 0% 0% 91.6666666667%;
    max-width: 91.6666666667%; }

  .ds-l-xl-col--12 {
    flex: 0% 0% 100%;
    max-width: 100%; } }
.ds-l-form-row > .ds-l-col,
.ds-l-form-row > [class*='-col-'] {
  padding-left: 8px;
  padding-right: 8px; }

/*
Grid

The design system provides a 12-column, responsive, flexbox grid to provide structure and align content.

The grid consists of three distinct pieces:

- A **container** adds a maximum width and centers the content
- A **row** enables the flexbox layout and holds between 1-12 **columns**

### Installation

The grid is opt-in and not distributed with the core design system package. Install the NPM package or [download the latest release](https://github.com/CMSgov/design-system/releases).

```
npm install @cmsgov/design-system-layout --save
```

[View the package's README for additional info.](https://github.com/CMSgov/design-system/blob/master/packages/layout/README.md)

### Browser support

Flexbox grid supports modern browsers and Internet Explorer 10+. In older versions of Internet Explorer the grid columns will be stacked.

Style guide: layout.grid
*/
/*
Default behavior

Columns without a set width will automatically layout with equal widths. For example, below are four instances of `.ds-l-col` which are each automatically 25% wide. The columns will automatically wrap when they don't fit a single row.

Column widths are set in percentages, so they’re always responsive and will be sized relative to their parent row.

Markup:
<section class="ds-l-container preview__grid">
  <div class="ds-l-row">
    <div class="ds-l-col">
      Equal
    </div>
    <div class="ds-l-col">
      Equal
    </div>
    <div class="ds-l-col">
      Equal
    </div>
    <div class="ds-l-col">
      Equal
    </div>
  </div>
</section>

Style guide: layout.grid.default
*/
/*
Specifying number of columns

Specify the number of columns (1-12) to span using `.ds-l-col--*` classes. These classes will span `*` columns. So, if you want two elements that each span half the row, you would use `.ds-l-col--6`

Markup:
<section class="ds-l-container preview__grid">
  <div class="ds-l-row">
    <div class="ds-l-col--6">
      6 columns
    </div>
    <div class="ds-l-col--6">
      6 columns
    </div>
  </div>
</section>

Style guide: layout.grid.columns
*/
/*
Natural width columns

Use a `.ds-l-col--auto` class to size a column to the natural width of its content.

Markup:
<section class="ds-l-container preview__grid">
  <div class="ds-l-row">
    <div class="ds-l-col--auto">
      1 of 3
    </div>
    <div class="ds-l-col--auto">
      A little bit longer text
    </div>
    <div class="ds-l-col--auto">
      3 of 3
    </div>
  </div>
</section>

Style guide: layout.grid.column-auto
*/
/*
Mobile, tablet, and desktop grids

@responsive

Each column class can include a [breakpoint "prefix"]({{root}}/guidelines/responsive) (`sm`, `md`, `lg`, `xl`), allowing you to change the column widths based on the viewport width.

An element with a `ds-l-{breakpoint}-col--*` class will span `*` columns at viewports matching `breakpoint` and larger.

In the example below, the cells span:

- 1/6 of the row on `xl` viewports, using `ds-l-xl-col--2`
- 1/4 of the row on `lg` viewports, using `ds-l-lg-col--3`
- 1/3 of the row on `md` viewports, using `ds-l-md-col--4`
- 1/2 of the row on `sm` viewports, using `ds-l-sm-col--6`
- The entire width of the row on viewports smaller than the `sm` breakpoint, using `ds-l-col--12`

Markup:
<section class="ds-l-container preview__grid">
  <div class="ds-l-row">
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      A
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      B
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      C
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      D
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      E
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      F
    </div>
  </div>
</section>

Style guide: layout.grid.responsive
*/
/*
Nested grids

Markup:
<section class="ds-l-container preview__grid">
  <div class="ds-l-row">
    <div class="ds-l-col--9">
      Level 1
      <div class="ds-l-row">
        <article class="ds-l-col--4">
          Level 2
        </article>
        <article class="ds-l-col--4">
          Level 2
        </article>
        <article class="ds-l-col--4">
          Level 2
        </article>
      </div>
    </div>
    <div class="ds-l-col--3">
      Level 1
    </div>
  </div>
</section>

Style guide: layout.grid.nested
*/
/*
Offsetting columns

Offset columns using the [margin auto utility class]({{root}}/utilities/margin):

Markup:
<section class="ds-l-container preview__grid">
  <div class="ds-l-row">
    <div class="ds-l-col--3">
      3 columns
    </div>
    <div class="ds-l-col--4 ds-u-margin-left--auto">
      4 columns, offset 5 columns
    </div>
  </div>
</section>

Style guide: layout.grid.offset
*/
/*
Alignment

Align columns horizontally or vertically using [flexbox utility classes]({{root}}/utilities/flexbox). To align columns horizontally, use the `justify-content` utility class. To align columns vertically, use the `align-items` utility class.

Markup:
<section class="ds-l-container preview__grid">
  <div class="ds-l-row ds-u-fill--gray">
    <div class="ds-l-col--3">Left</div>
  </div>
  <div class="ds-l-row ds-u-justify-content--center ds-u-fill--gray">
    <div class="ds-l-col--3">Center</div>
  </div>
  <div class="ds-l-row ds-u-justify-content--end ds-u-fill--gray">
    <div class="ds-l-col--3">Right</div>
  </div>
  <div class="ds-l-row ds-u-align-items--start ds-u-fill--gray ds-u-margin-y--2" style="height: 125px">
    <div class="ds-l-col--3">Top</div>
    <div class="ds-l-col--3">Top</div>
    <div class="ds-l-col--3">Top</div>
  </div>
  <div class="ds-l-row ds-u-align-items--center ds-u-fill--gray ds-u-margin-y--2" style="height: 125px">
    <div class="ds-l-col--3">Center</div>
    <div class="ds-l-col--3">Center</div>
    <div class="ds-l-col--3">Center</div>
  </div>
  <div class="ds-l-row ds-u-align-items--end ds-u-fill--gray ds-u-margin-y--2" style="height: 125px">
    <div class="ds-l-col--3">Bottom</div>
    <div class="ds-l-col--3">Bottom</div>
    <div class="ds-l-col--3">Bottom</div>
  </div>
</section>

Style guide: layout.grid.alignment
*/
/*
Forms

Use a `.ds-l-form-row` class to tighten the column spacing when laying out form fields in a grid.

Markup:
<section class="preview__grid">
  <div class="ds-l-form-row">
    <div class="ds-l-col--auto">
      <label class="ds-c-label ds-u-margin-top--0" for="city">City</label>
      <input class="ds-c-field" type="text" id="city" name="city">
    </div>
    <div class="ds-l-col--auto">
      <label class="ds-c-label ds-u-margin-top--0" for="state">State</label>
      <input class="ds-c-field" type="text" id="state" name="state">
    </div>
  </div>
</section>

Style guide: layout.grid.form-row
*/
/*
---

## When to use

- Almost always use a grid layout — visitors can read more quickly on pages that use grids. Choose a single grid system for your entire site.

## When to consider alternatives

- Avoid mixing this grid and other grid systems.

## Guidance

- Choose a 12-column grid with flexible column widths and fixed gutters.
- Avoid text lines longer than 75 characters. Place text in narrower columns to keep text lines from becoming too wide or use the [measure utility classes]({{root}}/utilities/measure).

## Accessibility

- Low-vision users should be able to increase the size of the text by up to 200 percent without breaking the layout.
- The DOM order and visual presentation of content should be consistent, in order to not break keyboard navigation. This means you should avoid changing the flexbox `order` property of the grid columns.

## Customization

The following Sass variables can be overridden to customize the grid:

- `$grid-columns`
- `$grid-gutter-width`

## Learn more

- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [Flexbox & the keyboard navigation disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)

Style guide: layout.grid.guidance
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*RESPONSIVE BREAKPOINTS*/
/*RESPONSIVE BREAKPOINTS CMS DESIGN*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*RESPONSIVE BREAKPOINTS*/
/*RESPONSIVE BREAKPOINTS CMS DESIGN*/
html body {
  font: 0.8em/1.5em Arial, Helvetica, sans-serif;
  color: black; }

input {
  font-family: Arial, Helvetica, sans-serif !important; }

@font-face {
  font-family: 'FontAwesomeSolid';
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/fa-solid-900.eot");
  src: url("../fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900") format("woff"), url("../fonts/fa-solid-900") format("truetype"); }
body {
  overflow-x: hidden;
  height: 100%;
  background-repeat: no-repeat; }
  body.path-user #main-wrapper, body.path-tfa #main-wrapper {
    padding: 40px; }
  body.path-user .cms-global-left, body.path-user .cms-global-right, body.path-tfa .cms-global-left, body.path-tfa .cms-global-right {
    display: none; }

@media (max-width: 1023px) {
  .ds-l-row {
    margin: 0;
    padding: 0; } }

.ds-l-col--3.cms-global-left {
  flex: 0 0 20%; }

.ds-l-col--6.cms-global-center {
  flex: 0 0 55%;
  max-width: 55%; }

.ds-l-col--12.cms-global-center .region-content {
  padding: 0 26px; }
@media (max-width: 1023px) {
  .ds-l-col--12.cms-global-center {
    padding: 0; } }

.dialog-off-canvas-main-canvas {
  background: #c9d3df;
  /* Old browsers */
  background: -moz-linear-gradient(top, #c9d3df 0%, white 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9d3df), color-stop(100%, white));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #c9d3df 0%, white 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #c9d3df 0%, white 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #c9d3df 0%, white 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #c9d3df 0%, white 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$colorTop', endColorstr='$colorBottom', GradientType=0 );
  /* IE6-9 */ }

a, a:link, a:active {
  color: #006699;
  border: none;
  text-decoration: underline; }

a:hover,
a:focus,
a:active {
  color: #C00000;
  text-decoration: underline;
  border: none; }

a:visited {
  color: #884488; }

h1 {
  background: url(/themes/custom/cms_drupal_global/images/bg-page-title.jpg) no-repeat left bottom;
  font-size: 1.5em !important;
  font-weight: bold;
  padding-bottom: 6px !important;
  line-height: 100%;
  margin: 17px 0 .5em; }

.region-cms-page-menu-block-header {
  position: relative; }

header#header {
  position: relative;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/$gradient-header-blue+0,ffffff+75 */
  background: #CED6E1;
  /* Old browsers */
  background: -moz-linear-gradient(top, #CED6E1 0%, #ffffff 60%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #CED6E1 0%, #ffffff 60%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #CED6E1 0%, #ffffff 60%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-header-blue', endColorstr='#ffffff',GradientType=0 );
  /* IE6-9 */
  /* Mobile View */
  /* Mobile Responsiveness Primary + Secondary Nav Buttons */
  /*Mobile responsiveness Primary + Secondary Menu */
  /* End Mobile Responsiveness */ }
  header#header ul {
    margin: 0;
    padding: 0; }
    header#header ul li {
      float: left; }
      header#header ul li a {
        text-decoration: none;
        color: black; }
        header#header ul li a:hover, header#header ul li a:focus {
          text-decoration: underline; }
  header#header #block-cmsglobalsecondarymenu {
    float: right;
    margin: 10px; }
    header#header #block-cmsglobalsecondarymenu li a {
      padding: 0 6px;
      border-left: 1px solid; }
      header#header #block-cmsglobalsecondarymenu li a[title="Share"] {
        padding-left: 16px; }
      header#header #block-cmsglobalsecondarymenu li a[title="Share"]::before, header#header #block-cmsglobalsecondarymenu li a[title="Help"]::before, header#header #block-cmsglobalsecondarymenu li a[title="Print"]::before {
        display: inline-block;
        font-family: "FontAwesomeSolid" !important;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\f055";
        margin-right: 5px;
        color: #d9534f;
        font-size: 1.2em; }
      header#header #block-cmsglobalsecondarymenu li a[title="Help"] {
        border: none; }
        header#header #block-cmsglobalsecondarymenu li a[title="Help"]::before {
          content: "\f059";
          color: #054e65; }
      header#header #block-cmsglobalsecondarymenu li a[title="Print"] {
        border: none; }
        header#header #block-cmsglobalsecondarymenu li a[title="Print"]::before {
          content: "\f02f";
          color: black; }
    header#header #block-cmsglobalsecondarymenu li:first-child a {
      border: none; }
    @media (max-width: 543px) {
      header#header #block-cmsglobalsecondarymenu {
        display: none; } }
  header#header #block-cmsglobalheaderlogo {
    margin: 45px 0 0 15px;
    float: left;
    /*Tablet View */
    /*Mobile View */ }
    @media (min-width: 544px) and (max-width: 768px) {
      header#header #block-cmsglobalheaderlogo {
        margin: 0; } }
    @media (max-width: 543px) {
      header#header #block-cmsglobalheaderlogo {
        float: none;
        margin: 0;
        padding-top: 10px; }
        header#header #block-cmsglobalheaderlogo .field--name-body {
          text-align: center; }
          header#header #block-cmsglobalheaderlogo .field--name-body img {
            width: 40%; } }
    header#header #block-cmsglobalheaderlogo p {
      margin: 0; }
    header#header #block-cmsglobalheaderlogo:after {
      clear: both;
      content: '';
      display: block; }
  header#header #block-cmsglobalprimarymenu {
    clear: both;
    /*Tablet View */ }
    header#header #block-cmsglobalprimarymenu ul {
      border-spacing: 5px;
      margin: 10px; }
      header#header #block-cmsglobalprimarymenu ul li {
        display: table-cell;
        float: none;
        background: #FBECB5;
        /* Old browsers */
        background: -moz-linear-gradient(top, #FBECB5 0%, #FED426 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FBECB5), color-stop(100%, #FED426));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #FBECB5 0%, #FED426 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #FBECB5 0%, #FED426 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #FBECB5 0%, #FED426 100%);
        /* IE10+ */
        background: linear-gradient(to bottom, #FBECB5 0%, #FED426 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$colorTop', endColorstr='$colorBottom', GradientType=0 );
        /* IE6-9 */
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
        vertical-align: middle;
        padding: 7px 10px;
        text-align: center;
        font-weight: bold;
        line-height: 16px;
        /* Tablet View */ }
        header#header #block-cmsglobalprimarymenu ul li:nth-child(7) {
          width: 18%; }
        @media (min-width: 543px) and (max-width: 1023px) {
          header#header #block-cmsglobalprimarymenu ul li {
            padding: 5px; } }
      header#header #block-cmsglobalprimarymenu ul:after {
        display: block; }
    @media (max-width: 543px) {
      header#header #block-cmsglobalprimarymenu {
        display: none; } }
    @media (min-width: 544px) and (max-width: 768px) {
      header#header #block-cmsglobalprimarymenu ul {
        margin: 10px 0; } }
  header#header .global-header-search {
    position: absolute;
    top: 20%;
    right: 5px;
    /*Tablet View */
    /* Mobile View */ }
    @media (min-width: 544px) and (max-width: 768px) {
      header#header .global-header-search {
        top: 75px; } }
    @media (max-width: 544px) {
      header#header .global-header-search {
        position: relative;
        right: 0;
        top: 0;
        width: 100%;
        text-align: center;
        display: inline-block; }
        header#header .global-header-search input[type="text"] {
          position: absolute;
          top: 25%;
          left: 5%;
          width: 90% !important;
          height: 70% !important; }
        header#header .global-header-search input[type="submit"] {
          position: absolute;
          top: 25%;
          right: 0;
          height: 70% !important; }
        header#header .global-header-search #views-exposed-form-cms-of-acquia-search-page {
          margin-bottom: 25px; }
        header#header .global-header-search .button {
          margin-top: 2px;
          margin-bottom: 2px; } }
    header#header .global-header-search label {
      display: none; }
    header#header .global-header-search .form--inline > div {
      display: inline-block;
      float: none;
      margin: 0;
      vertical-align: bottom;
      padding: 0; }
    header#header .global-header-search .form--inline .form-item-search {
      margin-right: -13px; }
    header#header .global-header-search input {
      padding: 5px;
      font-weight: bold;
      border-radius: 0 4px 4px 0;
      border: 1px solid #A2A6A9; }
      header#header .global-header-search input[type="text"] {
        margin-right: -9px;
        width: 247px;
        border-radius: 4px 0 0 4px;
        font-size: 11.5px;
        height: 26px; }
      header#header .global-header-search input[type="submit"] {
        width: 80px;
        text-align: center;
        margin-left: -10px;
        color: black;
        background: #EEF3EA;
        /* Old browsers */
        background: -moz-linear-gradient(top, #EEF3EA 0%, #CBD5E1 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEF3EA), color-stop(100%, #CBD5E1));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #EEF3EA 0%, #CBD5E1 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #EEF3EA 0%, #CBD5E1 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #EEF3EA 0%, #CBD5E1 100%);
        /* IE10+ */
        background: linear-gradient(to bottom, #EEF3EA 0%, #CBD5E1 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$colorTop', endColorstr='$colorBottom', GradientType=0 );
        /* IE6-9 */
        height: 26px; }
      header#header .global-header-search input::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #726E70;
        opacity: 1;
        /* Firefox */ }
      header#header .global-header-search input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #666;
        opacity: 1; }
  @media (max-width: 1023px) {
    header#header {
      padding: 16px 16px 0 16px; } }
  @media (max-width: 544px) {
    header#header {
      padding-bottom: 16px; } }
  header#header .navbar-toggle-primary-menu,
  header#header .navbar-toggle-secondary-menu {
    display: none; }
    @media (max-width: 544px) {
      header#header .navbar-toggle-primary-menu,
      header#header .navbar-toggle-secondary-menu {
        display: block;
        padding: 10px 15px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        border: 1px solid transparent;
        position: absolute;
        z-index: 1;
        background-color: unset;
        width: auto; }
        header#header .navbar-toggle-primary-menu svg,
        header#header .navbar-toggle-secondary-menu svg {
          color: #0c2499;
          font-size: 24px; } }
  @media (max-width: 544px) {
    header#header .navbar-toggle-primary-menu {
      left: 5%; }
    header#header .navbar-toggle-secondary-menu {
      right: 5%; } }
  header#header #mobile-primary-menu-container,
  header#header #mobile-secondary-menu-container {
    display: none;
    /* Mobile View */ }
    header#header #mobile-primary-menu-container :-moz-focusring,
    header#header #mobile-secondary-menu-container :-moz-focusring {
      outline: 2px dotted red; }
    @media (max-width: 544px) {
      header#header #mobile-primary-menu-container,
      header#header #mobile-secondary-menu-container {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0; }
        header#header #mobile-primary-menu-container .mobile-primary-menu-container-inner,
        header#header #mobile-primary-menu-container .mobile-secondary-menu-container-inner,
        header#header #mobile-secondary-menu-container .mobile-primary-menu-container-inner,
        header#header #mobile-secondary-menu-container .mobile-secondary-menu-container-inner {
          background-color: #323a45; }
          header#header #mobile-primary-menu-container .mobile-primary-menu-container-inner .header,
          header#header #mobile-primary-menu-container .mobile-secondary-menu-container-inner .header,
          header#header #mobile-secondary-menu-container .mobile-primary-menu-container-inner .header,
          header#header #mobile-secondary-menu-container .mobile-secondary-menu-container-inner .header {
            padding: 10px 0;
            position: relative;
            height: 35px; }
            header#header #mobile-primary-menu-container .mobile-primary-menu-container-inner .header button,
            header#header #mobile-primary-menu-container .mobile-secondary-menu-container-inner .header button,
            header#header #mobile-secondary-menu-container .mobile-primary-menu-container-inner .header button,
            header#header #mobile-secondary-menu-container .mobile-secondary-menu-container-inner .header button {
              border: 0;
              color: white;
              background: none;
              float: left;
              width: 15%;
              position: absolute;
              top: 50%;
              -ms-transform: translate(-50%, -50%);
              transform: translate(0%, -50%); }
              header#header #mobile-primary-menu-container .mobile-primary-menu-container-inner .header button svg,
              header#header #mobile-primary-menu-container .mobile-secondary-menu-container-inner .header button svg,
              header#header #mobile-secondary-menu-container .mobile-primary-menu-container-inner .header button svg,
              header#header #mobile-secondary-menu-container .mobile-secondary-menu-container-inner .header button svg {
                color: white;
                margin: 0; }
            header#header #mobile-primary-menu-container .mobile-primary-menu-container-inner .header img,
            header#header #mobile-primary-menu-container .mobile-secondary-menu-container-inner .header img,
            header#header #mobile-secondary-menu-container .mobile-primary-menu-container-inner .header img,
            header#header #mobile-secondary-menu-container .mobile-secondary-menu-container-inner .header img {
              height: 31px;
              width: 70%;
              position: absolute;
              top: 50%;
              left: 50%;
              margin-left: -35%;
              transform: translate(0%, -50%); }
            header#header #mobile-primary-menu-container .mobile-primary-menu-container-inner .header .primary-close,
            header#header #mobile-primary-menu-container .mobile-secondary-menu-container-inner .header .primary-close,
            header#header #mobile-secondary-menu-container .mobile-primary-menu-container-inner .header .primary-close,
            header#header #mobile-secondary-menu-container .mobile-secondary-menu-container-inner .header .primary-close {
              left: 5%; }
            header#header #mobile-primary-menu-container .mobile-primary-menu-container-inner .header .secondary-close,
            header#header #mobile-primary-menu-container .mobile-secondary-menu-container-inner .header .secondary-close,
            header#header #mobile-secondary-menu-container .mobile-primary-menu-container-inner .header .secondary-close,
            header#header #mobile-secondary-menu-container .mobile-secondary-menu-container-inner .header .secondary-close {
              right: 5%; }
          header#header #mobile-primary-menu-container .mobile-primary-menu-container-inner .content ul,
          header#header #mobile-primary-menu-container .mobile-secondary-menu-container-inner .content ul,
          header#header #mobile-secondary-menu-container .mobile-primary-menu-container-inner .content ul,
          header#header #mobile-secondary-menu-container .mobile-secondary-menu-container-inner .content ul {
            padding: 10px 15px;
            height: 100%; }
            header#header #mobile-primary-menu-container .mobile-primary-menu-container-inner .content ul li,
            header#header #mobile-primary-menu-container .mobile-secondary-menu-container-inner .content ul li,
            header#header #mobile-secondary-menu-container .mobile-primary-menu-container-inner .content ul li,
            header#header #mobile-secondary-menu-container .mobile-secondary-menu-container-inner .content ul li {
              float: none;
              padding: 15px;
              font-weight: bold; }
              header#header #mobile-primary-menu-container .mobile-primary-menu-container-inner .content ul li a,
              header#header #mobile-primary-menu-container .mobile-secondary-menu-container-inner .content ul li a,
              header#header #mobile-secondary-menu-container .mobile-primary-menu-container-inner .content ul li a,
              header#header #mobile-secondary-menu-container .mobile-secondary-menu-container-inner .content ul li a {
                color: white;
                font-family: GeometriaExtraBold;
                font-size: 18px;
                line-height: 1.17; } }

#main-wrapper {
  position: relative;
  clear: both;
  padding: 0 15px 15px 15px;
  /* Mobile View */ }
  @media (max-width: 543px) {
    #main-wrapper {
      margin-top: 0;
      padding: 0 16px;
      margin-bottom: 0; } }

footer {
  position: relative; }
  footer .region-cms-footer {
    background: #ccd5de;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ccd5de 0%, white 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccd5de), color-stop(100%, white));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ccd5de 0%, white 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ccd5de 0%, white 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ccd5de 0%, white 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #ccd5de 0%, white 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$colorTop', endColorstr='$colorBottom', GradientType=0 );
    /* IE6-9 */
    padding: 25px 0; }
    footer .region-cms-footer:after {
      clear: both;
      content: '';
      display: block; }
    footer .region-cms-footer div.block-menu {
      float: left;
      padding: 0 30px;
      border-right: 1px solid #d5d5d5;
      /*Tablet View */ }
      @media (min-width: 543px) {
        footer .region-cms-footer div.block-menu ul {
          padding: 0; } }
      footer .region-cms-footer div.block-menu ul li {
        margin: 4px 0; }
      footer .region-cms-footer div.block-menu:last-child {
        border: none; }
      footer .region-cms-footer div.block-menu a {
        text-decoration: none; }
        footer .region-cms-footer div.block-menu a:hover, footer .region-cms-footer div.block-menu a:focus {
          text-decoration: underline; }
      @media (min-width: 543px) and (max-width: 1023px) {
        footer .region-cms-footer div.block-menu {
          padding: 0 20px; } }
      @media (max-width: 543px) {
        footer .region-cms-footer div.block-menu {
          float: none;
          /* Mobile Accordion styling for footer */ }
          footer .region-cms-footer div.block-menu button.ui-state-default {
            border: 0;
            border-bottom: 1px solid #CCD5DE;
            background-color: transparent;
            color: black;
            margin: 5px 0 0 0;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            text-align: left;
            padding: .5em .5em .5em .7em; }
            footer .region-cms-footer div.block-menu button.ui-state-default span {
              float: right;
              margin: 0; }
          footer .region-cms-footer div.block-menu ul.ui-accordion-content li.menu-item {
            margin: 10px 0;
            border-bottom: 1px solid #CCD5DE; }
            footer .region-cms-footer div.block-menu ul.ui-accordion-content li.menu-item a {
              font-size: 16px; } }
  footer h2 {
    color: black;
    font-weight: bold;
    margin-bottom: 1em; }
  footer a:link, footer a:active {
    color: #006699; }
  footer a:visited {
    color: #002280; }
  footer a:hover,
  footer a:focus,
  footer a:active {
    color: #C00000; }
  footer .footer-header {
    background: #e6e1e1; }
    footer .footer-header .footer-hcol1, footer .footer-header .footer-hcol2 {
      padding: 25px 5px 40px;
      position: relative; }
    footer .footer-header .footer-hcol1 {
      white-space: nowrap; }
      footer .footer-header .footer-hcol1 .inner {
        margin-top: 10px; }
      footer .footer-header .footer-hcol1 .footer-cms-logo {
        margin-left: 20px;
        margin-bottom: -5px; }
    footer .footer-header .footer-hcol2 span {
      float: left;
      width: 75%;
      margin: 7px 0 0 35px; }
    footer .footer-header .footer-hcol2 .footer-hhs {
      float: right; }
    footer .footer-header a, footer .footer-header span, footer .footer-header button {
      display: inline-block;
      vertical-align: middle; }
  footer #email-widget {
    position: absolute;
    margin-top: 40px;
    text-align: center;
    width: 280px;
    top: 135px;
    right: 30px;
    /*Tablet View */
    /*Mobile View */ }
    footer #email-widget .email-icon {
      position: absolute;
      top: -28px;
      margin-left: -38px;
      left: 50%;
      z-index: 10; }
      @media (max-width: 767px) {
        footer #email-widget .email-icon {
          top: -10px; } }
    footer #email-widget #email-block {
      background: #BACAD2;
      border: 1px solid #CCCCCC;
      border-radius: 20px;
      padding: 10px;
      position: relative; }
    footer #email-widget h2 {
      color: #014F79;
      font-size: 23px;
      margin: 29px -10px 10px;
      font-weight: normal;
      background: unset;
      /*Tablet View */ }
      @media (min-width: 543px) and (max-width: 1023px) {
        footer #email-widget h2 {
          font-size: 18px; } }
    @media (min-width: 543px) and (max-width: 1023px) {
      footer #email-widget {
        width: unset;
        right: 15px;
        margin-top: 50px; } }
    @media (max-width: 767px) {
      footer #email-widget {
        width: 275px;
        position: relative;
        min-height: 1px;
        padding: 20px 15px;
        margin: 0 auto;
        top: 0;
        right: 0; } }
  footer #email-form {
    background-color: #027DBC;
    border-radius: 20px;
    padding: 10px; }
    footer #email-form input[type="text"] {
      border: 1px inset #BCD1DC;
      border-radius: 100px;
      font-size: 14px;
      padding: 5px;
      width: 72%;
      /*Tablet View */ }
      @media (min-width: 543px) and (max-width: 1023px) {
        footer #email-form input[type="text"] {
          font-size: unset; } }
    footer #email-form input[type="submit"] {
      background-color: #016498;
      border: medium none;
      border-radius: 6px;
      color: white;
      font-weight: bold;
      padding: 5px;
      margin: 0 0 0 5px;
      font-size: 1.02em;
      text-shadow: 0 0 0 rgba(0, 0, 0, 0.075);
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      /*Tablet View */ }
      @media (min-width: 543px) and (max-width: 1023px) {
        footer #email-form input[type="submit"] {
          display: inherit;
          margin-left: auto;
          margin-right: auto;
          margin-top: 5px; } }
  footer .footer-social h2 {
    color: black !important;
    font-weight: bold !important;
    font-size: 1.143em !important; }
  footer .footer-social ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center; }
    footer .footer-social ul li {
      display: inline-block; }
      footer .footer-social ul li a {
        color: #004f87;
        font-size: 1.5em;
        margin: 0 5px; }

.btn {
  font-weight: normal;
  font-size: 1em;
  padding: 6px 12px;
  font-size: 14px;
  border: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px; }
  .btn.btn-primary {
    color: white;
    background: #09539f;
    /* Old browsers */
    background: -moz-linear-gradient(top, #09539f 0%, #042c4f 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #09539f), color-stop(100%, #042c4f));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #09539f 0%, #042c4f 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #09539f 0%, #042c4f 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #09539f 0%, #042c4f 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #09539f 0%, #042c4f 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$colorTop', endColorstr='$colorBottom', GradientType=0 );
    /* IE6-9 */ }
    .btn.btn-primary:hover, .btn.btn-primary:focus {
      background: #042c4f;
      /* Old browsers */
      background: -moz-linear-gradient(top, #042c4f 0%, #09539f 100%);
      /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #042c4f), color-stop(100%, #09539f));
      /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #042c4f 0%, #09539f 100%);
      /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #042c4f 0%, #09539f 100%);
      /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #042c4f 0%, #09539f 100%);
      /* IE10+ */
      background: linear-gradient(to bottom, #042c4f 0%, #09539f 100%);
      /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$colorTop', endColorstr='$colorBottom', GradientType=0 );
      /* IE6-9 */ }

@media (max-width: 1023px) {
  #page-wrapper {
    margin: 0;
    padding: 0; } }

.block-views-blockcms-news-block-1 {
  position: relative;
  margin-top: 15px; }
  .block-views-blockcms-news-block-1 h2 {
    background: #037093 url(/themes/custom/cms_drupal_global/images/bg-sidebar-news.png) no-repeat right -5px;
    color: white;
    padding: 8px 8px 8px 15px;
    margin: 0;
    font: 1.8em Georgia, "Times New Roman", Times, serif;
    position: relative; }
    .block-views-blockcms-news-block-1 h2:before {
      content: url(/themes/custom/cms_drupal_global/images/bg-sidebar-left.jpg);
      position: absolute;
      top: 0;
      left: -9px; }
  .block-views-blockcms-news-block-1 ul {
    border: 1px solid #9dcbd9;
    border-top: none;
    margin-top: -12px !important;
    background: white;
    /* Old browsers */
    background: -moz-linear-gradient(top, white 0%, #def2fc 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #def2fc));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, white 0%, #def2fc 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, white 0%, #def2fc 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, white 0%, #def2fc 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, white 0%, #def2fc 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$colorTop', endColorstr='$colorBottom', GradientType=0 );
    /* IE6-9 */
    padding: 0 0 53px !important; }
    .block-views-blockcms-news-block-1 ul li {
      padding: 8px;
      border-bottom: 1px dotted #ccc;
      margin: 4px 6px; }
  .block-views-blockcms-news-block-1 .btn-cmsNews {
    background-color: #037ba0;
    border-radius: 10px;
    position: absolute;
    width: 89%;
    bottom: 10px;
    width: 90%;
    left: 15px; }
    .block-views-blockcms-news-block-1 .btn-cmsNews a {
      display: block;
      background: url("//assets.cms.gov/resources/cms/images/homepage/bg-blue-arrow.png") no-repeat scroll right center transparent;
      color: white;
      font-weight: bold;
      margin-right: 10px;
      padding: 10px 30px 10px 10px; }

/*Mobile leftNav accordion */
@media (max-width: 543px) {
  .region-cms-leftnav {
    float: none;
    /* Mobile Accordion styling for Left Navigation */ }
    .region-cms-leftnav button.cms-leftnav-accordion {
      background: #AEC3D6;
      /* Old browsers */
      background: -moz-linear-gradient(top, #AEC3D6 0%, #90A8CA 100%);
      /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #AEC3D6), color-stop(100%, #90A8CA));
      /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #AEC3D6 0%, #90A8CA 100%);
      /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #AEC3D6 0%, #90A8CA 100%);
      /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #AEC3D6 0%, #90A8CA 100%);
      /* IE10+ */
      background: linear-gradient(to bottom, #AEC3D6 0%, #90A8CA 100%);
      /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$colorTop', endColorstr='$colorBottom', GradientType=0 );
      /* IE6-9 */
      color: black;
      cursor: pointer;
      width: 100%;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      text-align: left;
      position: relative;
      font-size: 1.2em;
      margin: 0;
      padding: 6px 2px 4px 6px;
      font-weight: bold; }
      .region-cms-leftnav button.cms-leftnav-accordion svg {
        margin: 0;
        float: right;
        color: white;
        background-color: #042c4f;
        padding: 0 1em;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0; } }

.saml_content {
  width: 55%; }
  .saml_content.saml_login_box {
    background-color: #fff;
    border-radius: .25rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    padding: 2rem 2rem 1rem;
    position: relative;
    border: 1px solid #ddd;
    margin-left: 22%;
    margin-top: 40px; }
    .saml_content.saml_login_box h1 {
      background: none !important;
      font-size: 21px !important;
      font-weight: 700;
      line-height: 1.5rem;
      letter-spacing: 0px;
      text-align: center !important;
      margin: 0 0 0 0; }
  .saml_content .login_summary {
    display: block;
    margin-top: 16px;
    margin-bottom: 2%;
    margin-left: 22%;
    text-align: center; }
    .saml_content .login_summary p {
      font-size: 14px;
      font-family: Slack-Lato,appleLogo,sans-serif !important; }
  .saml_content a {
    text-decoration: none !important; }
    .saml_content a:hover, .saml_content a:focus, .saml_content a:active {
      background-color: #177ca7; }
  .saml_content .ds-c-button--primary, .saml_content .page-node-type-section-page .view-header a, .page-node-type-section-page .view-header .saml_content a, .saml_content .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] .saml_content input, .saml_content .page-node-type-section-page .view-filters #edit-actions input, .page-node-type-section-page .view-filters #edit-actions .saml_content input {
    background-color: #1d9bd1;
    padding: 12px 24px 12px 0;
    border-radius: 5px;
    margin-bottom: 1em;
    color: white; }
    .saml_content .ds-c-button--primary:before, .saml_content .page-node-type-section-page .view-header a:before, .page-node-type-section-page .view-header .saml_content a:before, .saml_content .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:before, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] .saml_content input:before, .saml_content .page-node-type-section-page .view-filters #edit-actions input:before, .page-node-type-section-page .view-filters #edit-actions .saml_content input:before {
      content: '\f084';
      font-family: FontAwesome !important;
      margin-right: 10px;
      border-right: 1px solid white;
      background-color: #177ca7;
      color: white;
      padding: 14px 10px;
      font-weight: bold;
      font-size: 20px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px; }

.page-node-type-cms-homepage main, .page-node-type-cms-homepage #main-wrapper {
  padding-top: 0; }
.page-node-type-cms-homepage h1 {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal; }
.page-node-type-cms-homepage .region-content {
  font: .96em/1.5em Arial, Helvetica, sans-serif; }
  .page-node-type-cms-homepage .region-content ul {
    padding: 0;
    margin: 0;
    list-style: none; }
.page-node-type-cms-homepage #home-hero {
  background-image: url("/themes/custom/cms_drupal_global/images/homepage-banner.jpg");
  background-size: cover;
  height: 300px;
  position: relative;
  margin: 0 -15px;
  overflow: hidden; }
  .page-node-type-cms-homepage #home-hero ul {
    position: absolute;
    bottom: 0;
    width: 101.4%;
    border-bottom: 15px solid #037093; }
    .page-node-type-cms-homepage #home-hero ul li {
      float: left;
      width: 33%;
      margin: 4px 0 0 0; }
      .page-node-type-cms-homepage #home-hero ul li a {
        color: white;
        text-decoration: none;
        font-size: 1.45em;
        display: block;
        text-align: center;
        padding: 20px 0;
        opacity: .75;
        margin-bottom: -3px;
        background: #7d7e7d;
        /* Old browsers */
        background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
        /* IE10+ */
        background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$colorTop', endColorstr='$colorBottom', GradientType=0 );
        /* IE6-9 */ }
        .page-node-type-cms-homepage #home-hero ul li a:hover {
          text-decoration: underline;
          background-image: none;
          background-color: #037093;
          opacity: 1; }
    @media (max-width: 1023px) {
      .page-node-type-cms-homepage #home-hero ul {
        padding-bottom: 45px; }
        .page-node-type-cms-homepage #home-hero ul li {
          float: none;
          width: 100%;
          margin: 7px 0; } }
    @media (max-width: 767px) {
      .page-node-type-cms-homepage #home-hero ul {
        padding-bottom: 0;
        border: none; } }
  @media (max-width: 1023px) {
    .page-node-type-cms-homepage #home-hero {
      margin: 0 -16px; } }
  @media (max-width: 767px) {
    .page-node-type-cms-homepage #home-hero {
      margin: 0 -16px;
      background: none;
      height: 190px; } }
  .page-node-type-cms-homepage #home-hero.covid19-hero {
    background-image: url("/themes/custom/cms_drupal_global/images/covid-image.png");
    background-position: 40px;
    background-color: #1A1A19;
    background-repeat: no-repeat;
    position: relative; }
    .page-node-type-cms-homepage #home-hero.covid19-hero .covid-screen {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      display: none; }
      @media (max-width: 767px) {
        .page-node-type-cms-homepage #home-hero.covid19-hero .covid-screen {
          display: block; } }
    .page-node-type-cms-homepage #home-hero.covid19-hero .covid-blurb {
      margin-left: 30px;
      position: relative; }
    .page-node-type-cms-homepage #home-hero.covid19-hero h2 {
      font-family: Bitter, Georgia, serif !important;
      color: white;
      font-weight: bold;
      font-size: 40px;
      line-height: 1.3em;
      margin-top: 40px; }
    .page-node-type-cms-homepage #home-hero.covid19-hero p {
      color: white;
      font-size: 14px;
      margin-top: -10px;
      line-height: 1.4em; }
    .page-node-type-cms-homepage #home-hero.covid19-hero a {
      display: inline-block;
      padding: 10px 32px;
      background: #0071BC;
      text-decoration: none;
      color: white;
      font-family: Open Sans, Helvetica, sans-serif !important;
      font-size: 14px;
      border-radius: 3px;
      font-weight: bold;
      transition: none 0s ease 0s; }
      .page-node-type-cms-homepage #home-hero.covid19-hero a:hover, .page-node-type-cms-homepage #home-hero.covid19-hero a:focus {
        text-decoration: underline; }
    .page-node-type-cms-homepage #home-hero.covid19-hero ul {
      border-width: 0; }
    @media (max-width: 767px) {
      .page-node-type-cms-homepage #home-hero.covid19-hero {
        height: 300px;
        background-position: -300px; } }
.page-node-type-cms-homepage .homepagebanner-container {
  background-color: #fff1d2;
  border-color: #fdb81e;
  background-image: url(https://design.cms.gov/public/images/warning.svg);
  background-repeat: no-repeat;
  background-size: 50px;
  border-left: 8px solid #02bfe7;
  box-sizing: border-box;
  color: #212121;
  font-family: Open Sans,Helvetica,sans-serif;
  font-size: 16px;
  border-color: #fdb81e;
  background-position: 10px 14px;
  margin: 20px -15px; }
  .page-node-type-cms-homepage .homepagebanner-container p {
    margin: 0;
    padding: 20px 0 20px 70px; }
  @media (max-width: 1023px) {
    .page-node-type-cms-homepage .homepagebanner-container {
      margin: 20px -16px; } }
.page-node-type-cms-homepage .homepage-news-resource-col {
  margin-left: 15px; }
  .page-node-type-cms-homepage .homepage-news-resource-col a {
    text-decoration: none; }
    .page-node-type-cms-homepage .homepage-news-resource-col a:hover, .page-node-type-cms-homepage .homepage-news-resource-col a:focus {
      text-decoration: underline; }
  .page-node-type-cms-homepage .homepage-news-resource-col.home-cms-news {
    margin-top: 20px; }
  @media (max-width: 1023px) {
    .page-node-type-cms-homepage .homepage-news-resource-col {
      margin: 20px -20px; } }
.page-node-type-cms-homepage .home-body-text h2 {
  margin-top: 0px;
  color: #000000;
  font: 2.5em Georgia, "Times New Roman", Times, serif;
  margin-bottom: 10px;
  padding-bottom: 10px;
  text-align: center; }
.page-node-type-cms-homepage .home-body-text p {
  font-size: 1.1em; }
@media (max-width: 1023px) {
  .page-node-type-cms-homepage .home-body-text {
    margin: 20px -20px; } }
.page-node-type-cms-homepage .home-spotlight-widget-container {
  text-align: left; }
  .page-node-type-cms-homepage .home-spotlight-widget-container a {
    text-decoration: none; }
    .page-node-type-cms-homepage .home-spotlight-widget-container a:hover, .page-node-type-cms-homepage .home-spotlight-widget-container a:focus {
      text-decoration: underline; }
  @media (max-width: 767px) {
    .page-node-type-cms-homepage .home-spotlight-widget-container {
      margin-left: -20px;
      margin-right: -20px; } }
.page-node-type-cms-homepage .home-spotlight-widget-col {
  display: inline-block;
  vertical-align: top; }
  .page-node-type-cms-homepage .home-spotlight-widget-col .spotlight-container {
    text-align: left;
    margin-top: 20px; }
    .page-node-type-cms-homepage .home-spotlight-widget-col .spotlight-container .spotlight-list-container {
      border: 1px solid #c9c9c9;
      border-top: none; }
    .page-node-type-cms-homepage .home-spotlight-widget-col .spotlight-container h2 {
      color: #FFF;
      background-image: none;
      background-color: #037093;
      padding: 5px 5px 5px 15px !important;
      font: 1.8em Georgia, "Times New Roman", Times, serif;
      margin: 0px; }
    .page-node-type-cms-homepage .home-spotlight-widget-col .spotlight-container ul {
      display: inline-block;
      width: 50%;
      padding-top: 15px;
      vertical-align: top; }
      .page-node-type-cms-homepage .home-spotlight-widget-col .spotlight-container ul:before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-left: 17px solid transparent;
        border-right: 17px solid transparent;
        border-top: 17px solid #037093;
        margin: -15px 3px 15px;
        margin-left: 20px; }
      .page-node-type-cms-homepage .home-spotlight-widget-col .spotlight-container ul li {
        background-color: #037093;
        padding: 10px;
        margin: 20px;
        margin-top: 15px;
        border-radius: 3px; }
        .page-node-type-cms-homepage .home-spotlight-widget-col .spotlight-container ul li a {
          color: white; }
      .page-node-type-cms-homepage .home-spotlight-widget-col .spotlight-container ul.spot-right-col {
        padding-top: 32px; }
        .page-node-type-cms-homepage .home-spotlight-widget-col .spotlight-container ul.spot-right-col:before {
          border: none; }
        @media (max-width: 767px) {
          .page-node-type-cms-homepage .home-spotlight-widget-col .spotlight-container ul.spot-right-col {
            padding-top: 1px; } }
      @media (max-width: 767px) {
        .page-node-type-cms-homepage .home-spotlight-widget-col .spotlight-container ul {
          text-align: center;
          display: block;
          width: 100%; } }
  .page-node-type-cms-homepage .home-spotlight-widget-col .homepage-widget {
    margin-top: 20px;
    text-align: left; }
    .page-node-type-cms-homepage .home-spotlight-widget-col .homepage-widget h2 {
      font: 1.5em Georgia, "Times New Roman", Times, serif; }
    .page-node-type-cms-homepage .home-spotlight-widget-col .homepage-widget a {
      color: black;
      display: inline-block;
      width: 29%;
      vertical-align: top;
      margin-right: 20px;
      margin-top: 10px; }
      .page-node-type-cms-homepage .home-spotlight-widget-col .homepage-widget a strong {
        color: #006699;
        display: block; }
      .page-node-type-cms-homepage .home-spotlight-widget-col .homepage-widget a:hover, .page-node-type-cms-homepage .home-spotlight-widget-col .homepage-widget a:focus {
        color: #c00000; }
        .page-node-type-cms-homepage .home-spotlight-widget-col .homepage-widget a:hover strong, .page-node-type-cms-homepage .home-spotlight-widget-col .homepage-widget a:focus strong {
          color: #c00000; }
      @media (max-width: 767px) {
        .page-node-type-cms-homepage .home-spotlight-widget-col .homepage-widget a {
          display: block;
          width: 95%;
          margin-bottom: 20px; } }
.page-node-type-cms-homepage .ds-l-col--12.cms-global-center .region-content {
  padding: 0; }

/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*RESPONSIVE BREAKPOINTS*/
/*RESPONSIVE BREAKPOINTS CMS DESIGN*/
:-moz-focusring {
  outline: 2px dotted black; }

/* Overriding default size of 1.071 */
.node__content {
  font-size: 1em; }

.cms-global-left {
  /*Tablet View */ }
  @media (min-width: 544px) and (max-width: 768px) {
    .cms-global-left {
      padding-left: 0; } }

/**
 * Styles for cms_global's breadcrumbs using Menu Breadcrumbs module.
 */
.block-system-breadcrumb-block {
  background: none repeat scroll 0 0 #EBEBEB;
  color: #000000;
  padding: 10px;
  margin: 0 15px;
  display: -ms-grid;
  /*Tablet View */
  /* Mobile View */ }
  @media (min-width: 544px) and (max-width: 768px) {
    .block-system-breadcrumb-block {
      margin: 0; } }
  @media (max-width: 544px) {
    .block-system-breadcrumb-block {
      display: none; } }
  .block-system-breadcrumb-block .breadcrumb {
    font-size: 0.89em;
    padding: 0; }
    .block-system-breadcrumb-block .breadcrumb ul {
      white-space: nowrap; }
      .block-system-breadcrumb-block .breadcrumb ul li {
        float: unset !important;
        white-space: normal; }
      .block-system-breadcrumb-block .breadcrumb ul li:before {
        content: " \003e ";
        padding: 4px; }
      .block-system-breadcrumb-block .breadcrumb ul li:first-child:before {
        content: none; }
    .block-system-breadcrumb-block .breadcrumb a {
      text-decoration: none; }
      .block-system-breadcrumb-block .breadcrumb a:visited {
        color: #884488 !important; }
      .block-system-breadcrumb-block .breadcrumb a:hover, .block-system-breadcrumb-block .breadcrumb a:focus {
        text-decoration: underline; }

[class*='rss-feed'] {
  float: right;
  bottom: 0;
  position: absolute;
  right: 25px; }
  [class*='rss-feed'] .feed-icon:hover {
    text-decoration: none;
    border: none; }

.region-cms-page-menu-block-footer {
  padding: 30px 0 16px 0;
  position: relative;
  /*Mobile View */ }
  @media only screen and (max-width: 543px) {
    .region-cms-page-menu-block-footer {
      padding: 0; } }

.page-node-type-story-page .region-cms-page-menu-block-footer {
  padding: 30px 16px 16px 16px; }

.cms-page-menu-block-footer {
  background: #1f3c67;
  padding: 15px 10px;
  margin-top: 15px; }
  .cms-page-menu-block-footer .link-container {
    text-align: right; }
  .cms-page-menu-block-footer a[role='button'] {
    color: white;
    text-decoration: none;
    padding: 10px;
    font-size: 14px; }

.orange-white-grad-box, #block-cmscciioupdaterightrail, #block-cmscciioresourcesrightrail {
  background-color: #F5E9B0;
  border: 1px solid #F0D7B5;
  clear: both;
  padding: 10px; }
  .orange-white-grad-box h2, #block-cmscciioupdaterightrail h2, #block-cmscciioresourcesrightrail h2 {
    font: 1.8em Georgia, "Times New Roman", Times, serif;
    margin: 0;
    color: #422806;
    background-color: white;
    padding: 10px; }
  .orange-white-grad-box ul, #block-cmscciioupdaterightrail ul, #block-cmscciioresourcesrightrail ul {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+60,f5e9b0+100 */
    background: #ffffff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 60%, #f5e9b0 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 60%, #f5e9b0 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 60%, #f5e9b0 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5e9b0',GradientType=0 );
    /* IE6-9 */
    padding: 0 10px 10px !important;
    margin-top: -15px;
    list-style: none;
    margin: 0; }
    .orange-white-grad-box ul li, #block-cmscciioupdaterightrail ul li, #block-cmscciioresourcesrightrail ul li {
      border-top: 1px dotted #ccc;
      padding: 0;
      margin: 4px 0; }
      .orange-white-grad-box ul li strong, .orange-white-grad-box ul li a, #block-cmscciioupdaterightrail ul li strong, #block-cmscciioupdaterightrail ul li a, #block-cmscciioresourcesrightrail ul li strong, #block-cmscciioresourcesrightrail ul li a {
        display: block;
        padding: 10px 5px 5px; }
      .orange-white-grad-box ul li strong, #block-cmscciioupdaterightrail ul li strong, #block-cmscciioresourcesrightrail ul li strong {
        margin-bottom: -10px; }
      .orange-white-grad-box ul li:first-child, #block-cmscciioupdaterightrail ul li:first-child, #block-cmscciioresourcesrightrail ul li:first-child {
        margin-top: 0;
        border-top: 1px solid #f0d7b5; }
  .orange-white-grad-box .content, #block-cmscciioupdaterightrail .content, #block-cmscciioresourcesrightrail .content {
    margin: 0; }

#block-cmscciioresourcesrightrail ul {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+60,f5e9b0+100 */
  background: #ffffff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 90%, #f5e9b0 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ffffff 90%, #f5e9b0 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ffffff 90%, #f5e9b0 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5e9b0',GradientType=0 );
  /* IE6-9 */ }

#block-cmscciioupdaterightrail a, #block-cmscciioresourcesrightrail a {
  text-decoration: underline; }
#block-cmscciioupdaterightrail ul li a, #block-cmscciioupdaterightrail ul li strong, #block-cmscciioresourcesrightrail ul li a, #block-cmscciioresourcesrightrail ul li strong {
  padding: 10px 0 5px; }

a.file-format-help {
  float: right; }

.changed-date,
.help-link {
  text-align: right; }

.changed-date {
  margin-top: 20px; }
  .changed-date .field__label,
  .changed-date .field__item {
    float: unset;
    display: inline-block; }
  .changed-date .field__item {
    padding: 0; }
  .changed-date .field__label {
    font-weight: unset;
    padding-right: .2em; }

/* CMS_gov Left nav styling */
body:not(cciio) .region-cms-leftnav .block-menu {
  padding-bottom: 10px; }
body:not(cciio) .region-cms-leftnav ul.clearfix {
  padding-left: 0;
  /* Mobile view */ }
  body:not(cciio) .region-cms-leftnav ul.clearfix h2 {
    background-color: transparent;
    background-position: 0 0;
    background: #AEC3D6;
    /* Old browsers */
    background: -moz-linear-gradient(top, #AEC3D6 0%, #90A8CA 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #AEC3D6), color-stop(100%, #90A8CA));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #AEC3D6 0%, #90A8CA 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #AEC3D6 0%, #90A8CA 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #AEC3D6 0%, #90A8CA 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #AEC3D6 0%, #90A8CA 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$colorTop', endColorstr='$colorBottom', GradientType=0 );
    /* IE6-9 */
    font-size: 1.2em;
    margin: 0;
    padding: 6px 2px 4px 6px;
    font-weight: bold; }
    body:not(cciio) .region-cms-leftnav ul.clearfix h2 a, body:not(cciio) .region-cms-leftnav ul.clearfix h2 a:visited {
      color: #000000;
      text-decoration: none; }
  body:not(cciio) .region-cms-leftnav ul.clearfix ul {
    background-color: #F2F3F5;
    border-right: solid 1px #CFE2EC;
    padding: 0; }
    body:not(cciio) .region-cms-leftnav ul.clearfix ul li {
      list-style: none;
      padding: 4px 6px;
      font-weight: bold;
      margin: 0; }
      body:not(cciio) .region-cms-leftnav ul.clearfix ul li a {
        font-size: .89em; }
    body:not(cciio) .region-cms-leftnav ul.clearfix ul li:not(:last-child) {
      border-bottom: 1px solid #cfe2ec; }
    body:not(cciio) .region-cms-leftnav ul.clearfix ul li.menu-item--active-trail {
      background-color: #CFE2EC;
      text-decoration: none; }
      body:not(cciio) .region-cms-leftnav ul.clearfix ul li.menu-item--active-trail a.is-active {
        text-decoration: none; }
  @media (max-width: 544px) {
    body:not(cciio) .region-cms-leftnav ul.clearfix {
      padding: 0; } }

/*
Sub-Site Menu (Superfish) styling
 */
.block-superfish {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 16px;
  background-color: #1f3c67;
  /* Tablet View */ }
  .block-superfish .content {
    margin: 0; }
  .block-superfish ul.sf-menu {
    display: flex;
    justify-content: center; }
    .block-superfish ul.sf-menu li:not(:last-child):after {
      content: "";
      position: absolute;
      right: 0;
      top: 35%;
      height: 35%;
      border-right: 1px solid white; }
    .block-superfish ul.sf-menu li {
      float: left; }
      .block-superfish ul.sf-menu li a {
        padding: 8px 12px;
        font-size: 14px;
        font-weight: normal;
        color: #fff;
        text-align: center;
        text-decoration: none;
        height: 45px;
        display: table-cell;
        vertical-align: middle;
        width: auto;
        min-width: 8em;
        border: 0; }
        .block-superfish ul.sf-menu li a.sf-depth-1 {
          color: #ffffff;
          text-decoration: none;
          width: auto; }
          .block-superfish ul.sf-menu li a.sf-depth-1:active, .block-superfish ul.sf-menu li a.sf-depth-1:focus, .block-superfish ul.sf-menu li a.sf-depth-1:hover {
            text-decoration: underline; }
          .block-superfish ul.sf-menu li a.sf-depth-1.sf-with-ul:after {
            content: '\f0d7';
            font-family: fontAwesomeSolid !important;
            padding-left: 5px;
            color: #fff;
            display: inline-block; }
          .block-superfish ul.sf-menu li a.sf-depth-1 .sf-sub-indicator {
            display: none; }
      .block-superfish ul.sf-menu li ul {
        top: 100% !important;
        background-color: #fff;
        margin: 0 auto !important;
        left: 0;
        right: 0;
        width: 100% !important;
        border: 1px solid #1f3c67; }
        .block-superfish ul.sf-menu li ul li {
          background-color: #fff;
          border-left: 1px solid #1f3c67;
          border-right: 1px solid #1f3c67; }
          .block-superfish ul.sf-menu li ul li a.sf-depth-2 {
            color: #000;
            margin: 0;
            padding: 12px 0;
            width: auto;
            display: block;
            height: auto; }
            .block-superfish ul.sf-menu li ul li a.sf-depth-2:active, .block-superfish ul.sf-menu li ul li a.sf-depth-2:focus, .block-superfish ul.sf-menu li ul li a.sf-depth-2:hover {
              background-color: #ebebeb;
              text-decoration: underline;
              color: #1f3c67;
              width: 100%; }
    .block-superfish ul.sf-menu li:not(:last-child):after {
      content: "";
      position: absolute;
      right: 0;
      top: 35%;
      height: 35%;
      border-right: 1px solid white; }
  @media (max-width: 768px) {
    .block-superfish .sf-accordion-toggle a {
      color: white;
      text-decoration: underline;
      height: auto;
      min-width: 0;
      white-space: nowrap;
      display: inline-block !important; }
      .block-superfish .sf-accordion-toggle a span {
        font-family: Arial;
        letter-spacing: -0.22px;
        padding: 5px 6px;
        display: block;
        height: 17px; }
    .block-superfish .sf-accordion-button,
    .block-superfish .sf-accordion-button-top-level {
      display: inline-block !important;
      height: 27px !important;
      float: right;
      width: 40%;
      border: 0;
      background-color: unset; }
      .block-superfish .sf-accordion-button svg,
      .block-superfish .sf-accordion-button-top-level svg {
        color: white;
        position: absolute;
        right: 0;
        top: 0;
        padding: 5px 6px 5px 5px; }
    .block-superfish ul.sf-accordion {
      background-color: #ebebeb;
      position: absolute !important;
      display: block; }
      .block-superfish ul.sf-accordion li:first-child {
        display: none; }
      .block-superfish ul.sf-accordion li {
        background-color: #006699;
        margin-top: 1px;
        width: 100%;
        /*Sub Menus */ }
        .block-superfish ul.sf-accordion li a.sf-depth-1 {
          font-size: 16px; }
        .block-superfish ul.sf-accordion li a.sf-depth-2 {
          font-size: 14px;
          display: table-cell !important; }
        .block-superfish ul.sf-accordion li a.sf-depth-1,
        .block-superfish ul.sf-accordion li a.sf-depth-2 {
          height: auto;
          min-width: 0;
          white-space: nowrap;
          padding: 5px 0 5px 6px !important;
          display: inline-block !important;
          text-decoration: underline; }
        .block-superfish ul.sf-accordion li ul {
          background: white;
          border: 0;
          position: relative; }
          .block-superfish ul.sf-accordion li ul li {
            border: 0; }
      .block-superfish ul.sf-accordion a {
        border: 0 !important;
        padding: 0 !important; }
        .block-superfish ul.sf-accordion a .sf-sub-indicator {
          right: 9em; }
    .block-superfish ul.sf-hidden {
      display: none; }
    .block-superfish ul.sf-menu li ul li a.sf-depth-2:active,
    .block-superfish ul.sf-menu li ul li a.sf-depth-2:focus,
    .block-superfish ul.sf-menu li ul li a.sf-depth-2:hover {
      width: auto !important;
      background-color: unset !important; }
    .block-superfish ul.sf-menu li a.sf-depth-1.sf-with-ul:after,
    .block-superfish ul.sf-menu li:not(:last-child):after,
    .block-superfish ul.sf-menu.sf-accordion.sf-accordion-with-buttons .sf-accordion-button:after {
      content: none; } }

/*
Left Nav hide-show styling
 */
#left-nav-btn {
  background-color: transparent;
  border: 0;
  padding: 0;
  margin-top: 5px;
  float: right; }
  #left-nav-btn.close-nav:before {
    content: '\f104';
    background-color: #006699;
    color: #fff;
    font-family: fontAwesome !important;
    padding: 5px 10px;
    font-size: 18px;
    font-weight: bold; }
  #left-nav-btn.open-nav:before {
    content: '\f105';
    background-color: #006699;
    color: #fff;
    font-family: fontAwesome !important;
    padding: 5px 10px;
    font-size: 18px;
    font-weight: bold; }

/*
Custom Ckeditor Styles (If not using design system).
*/
.indent-text {
  text-indent: 2em; }

.pdf-icon {
  background: transparent url(../images/application-pdf.png) no-repeat scroll right;
  padding-right: 20px;
  padding-top: 1px;
  padding-bottom: 1px; }

.zip-icon {
  background: transparent url(../images/zipgraphic.png) no-repeat scroll right;
  padding-right: 20px;
  padding-top: 1px;
  padding-bottom: 1px; }

/*global table styles*/
table {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em; }
  table.ds-c-table td, table.ds-c-table th {
    color: black;
    padding: 16px; }
    table.ds-c-table td a, table.ds-c-table td a:link, table.ds-c-table td a:active, table.ds-c-table th a, table.ds-c-table th a:link, table.ds-c-table th a:active {
      color: #006699;
      border: none;
      text-decoration: underline; }
    table.ds-c-table td a:hover,
    table.ds-c-table td a:focus,
    table.ds-c-table td a:active, table.ds-c-table th a:hover,
    table.ds-c-table th a:focus,
    table.ds-c-table th a:active {
      color: #C00000;
      text-decoration: underline;
      border: none; }
  table.ds-c-table th {
    font-weight: bold; }
  table.ds-c-table td {
    vertical-align: top; }
  table.ds-c-table p {
    margin: 0; }
  table.no-format-table {
    color: black;
    border: none !important; }
    table.no-format-table th, table.no-format-table td, table.no-format-table tr {
      background: none !important;
      color: black;
      vertical-align: top;
      border: none; }

.text-formatted ul, .text-formatted ol {
  padding-left: 40px; }
  .text-formatted ul li, .text-formatted ol li {
    margin: 4px 0; }
    .text-formatted ul li ul, .text-formatted ul li ol, .text-formatted ol li ul, .text-formatted ol li ol {
      padding-left: 20px;
      padding-bottom: 0;
      margin: 0; }
.text-formatted blockquote {
  background: none;
  border: none;
  margin: 0 0 1.2em 40px;
  padding: 0;
  font-style: normal; }
  .text-formatted blockquote:before, .text-formatted blockquote:after {
    content: '';
    margin: 0; }
.text-formatted h3 {
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0; }

/**************input************/
.node__content input[type="submit"] {
  width: 80px;
  text-align: center;
  margin-left: -10px;
  color: black;
  background: #EEF3EA;
  background: -moz-linear-gradient(top, #EEF3EA 0%, #CBD5E1 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEF3EA), color-stop(100%, #CBD5E1));
  background: -webkit-linear-gradient(top, #EEF3EA 0%, #CBD5E1 100%);
  background: -o-linear-gradient(top, #EEF3EA 0%, #CBD5E1 100%);
  background: -ms-linear-gradient(top, #EEF3EA 0%, #CBD5E1 100%);
  background: linear-gradient(to bottom, #EEF3EA 0%, #CBD5E1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$colorTop', endColorstr='$colorBottom', GradientType=0 );
  height: 26px;
  padding: 5px;
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid #A2A6A9; }

/* Added by Stephen for SHOW MORE buttoms */
.show-more-508 {
  display: none; }

/* Entity Embed */
.align-center.embedded-entity {
  text-align: center; }

.path-cms-search .ds-c-tabs__item {
  border-left: 1px solid #d6d7d9 !important;
  border-top: 1px solid #d6d7d9 !important;
  text-decoration: none !important; }
.path-cms-search .ds-c-tabs__item[aria-selected='false'] {
  border-bottom: 1px solid #d6d7d9 !important;
  color: #212121 !important; }
.path-cms-search .ds-base {
  font-family: Arial, Helvetica, sans-serif; }
.path-cms-search #page, .path-cms-search #main-wrapper {
  background-color: #fcfcfc; }
.path-cms-search .ds-l-lg-col--9 {
  flex: 0 0 66.66667%;
  max-width: 66.66667%; }
  @media (max-width: 1023px) {
    .path-cms-search .ds-l-lg-col--9 {
      flex: 0 0 100%;
      max-width: 100%; } }
.path-cms-search .ds-l-lg-col--3 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%; }
  @media (max-width: 1023px) {
    .path-cms-search .ds-l-lg-col--3 {
      flex: 0 0 100%;
      max-width: 100%; } }
.path-cms-search .sort-header {
  padding-top: 10px;
  padding-bottom: 20px; }
  @media (max-width: 1023px) {
    .path-cms-search .sort-header {
      padding-bottom: 5px; } }
@media (max-width: 1023px) {
  .path-cms-search .sort-text .sort-by {
    padding-left: 0; } }
.path-cms-search select {
  float: right;
  font: inherit;
  padding: 3px;
  background: transparent; }
  @media (max-width: 1023px) {
    .path-cms-search select {
      float: none;
      margin-left: -16px;
      margin-top: 15px; } }
.path-cms-search a.active-link {
  font-weight: bold; }
.path-cms-search .datetime {
  font-weight: bold;
  font-size: 12px; }
.path-cms-search h2.field-content a {
  font-weight: bold; }
  .path-cms-search h2.field-content a:active, .path-cms-search h2.field-content a:focus, .path-cms-search h2.field-content a:hover {
    color: #006699; }
.path-cms-search .views-row {
  padding-bottom: 30px;
  padding-top: 20px;
  border-bottom: 1px solid #D6D7D9; }
.path-cms-search .views-field-body {
  padding-bottom: 15px; }
.path-cms-search .pager {
  margin-top: 20px;
  margin-bottom: 0; }
  .path-cms-search .pager ul {
    padding-left: 0; }
    .path-cms-search .pager ul.pager__items {
      font-size: 12px; }
      @media (max-width: 767px) {
        .path-cms-search .pager ul.pager__items {
          padding-left: 0; } }
    .path-cms-search .pager ul li.pager__item {
      padding: 10px 0;
      border-bottom: 1px solid #D6D7D9;
      border-top: 1px solid #D6D7D9;
      border-right: 1px solid #D6D7D9; }
      .path-cms-search .pager ul li.pager__item.pager__item--first {
        border-left: 1px solid #D6D7D9; }
      .path-cms-search .pager ul li.pager__item.pager__item--ellipsis {
        margin-right: -4px;
        padding-left: 14px;
        padding-right: 14px; }
        @media (max-width: 479px) {
          .path-cms-search .pager ul li.pager__item.pager__item--ellipsis {
            padding-left: 7px;
            padding-right: 7px; } }
      .path-cms-search .pager ul li.pager__item a {
        padding: 8px 14px;
        color: #6F757C;
        font-weight: bold;
        border-bottom: none; }
        @media (max-width: 479px) {
          .path-cms-search .pager ul li.pager__item a {
            padding: 7px; } }
        .path-cms-search .pager ul li.pager__item a:hover, .path-cms-search .pager ul li.pager__item a:focus, .path-cms-search .pager ul li.pager__item a:active {
          text-decoration: underline; }
      .path-cms-search .pager ul li.pager__item.is-active {
        background-color: #006699;
        border: 1px solid #006699;
        color: white; }
        .path-cms-search .pager ul li.pager__item.is-active a {
          color: #fff; }

.related-searches {
  margin-top: 40px; }
  .related-searches h3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
    font-size: 17px; }
  .related-searches ul {
    list-style-type: none;
    padding-left: 0; }
    .related-searches ul li {
      margin-bottom: 8px; }
  .related-searches a {
    font-weight: bold;
    text-decoration: underline; }

#block-cms-topic-2 {
  background-color: #FFF;
  padding: 20px; }
  #block-cms-topic-2 li {
    list-style-image: none; }

.region-cms-rightnav {
  background-color: white;
  height: auto;
  padding-bottom: 30px; }
  @media (max-width: 1023px) {
    .region-cms-rightnav {
      margin-top: 20px; } }
  .region-cms-rightnav .filter-block-title {
    font-size: 18px;
    padding-bottom: 10px;
    padding-top: 15px; }
  .region-cms-rightnav h2 {
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    font-size: 18px; }
  .region-cms-rightnav fieldset {
    border: 0;
    margin: 0;
    padding: 0; }
  .region-cms-rightnav .date-picker {
    border-top: 1px solid #D6D7D9;
    margin-top: 10px;
    padding-top: 20px;
    margin-left: 15px;
    margin-right: 15px; }
    .region-cms-rightnav .date-picker input {
      padding: 6px 6px 6px 2px;
      border-radius: 2px;
      border: 1px solid #bfc1c4; }
    .region-cms-rightnav .date-picker input[type="text"] {
      font-size: 12px;
      color: #6F757C;
      width: 110px; }
    .region-cms-rightnav .date-picker .fa-calendar-alt {
      margin-left: -18px;
      color: #6F757C; }
    .region-cms-rightnav .date-picker .svg-inline--fa {
      vertical-align: -0.2em; }
    .region-cms-rightnav .date-picker #From-Date-Desc, .region-cms-rightnav .date-picker #To-Date-Desc {
      font-size: 12px; }
    .region-cms-rightnav .date-picker .ds-c-button, .region-cms-rightnav .date-picker .page-node-type-section-page .view-header a, .page-node-type-section-page .view-header .region-cms-rightnav .date-picker a, .region-cms-rightnav .date-picker .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] .region-cms-rightnav .date-picker input, .region-cms-rightnav .date-picker .page-node-type-section-page .view-filters #edit-actions input, .page-node-type-section-page .view-filters #edit-actions .region-cms-rightnav .date-picker input {
      font-weight: normal;
      border-radius: 3px;
      border: 1px solid #808080;
      margin-top: 10px;
      font-size: 12px;
      padding: 8px 18px; }
      .region-cms-rightnav .date-picker .ds-c-button.get-results, .region-cms-rightnav .date-picker .page-node-type-section-page .view-header a.get-results, .page-node-type-section-page .view-header .region-cms-rightnav .date-picker a.get-results, .region-cms-rightnav .date-picker .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input.get-results, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] .region-cms-rightnav .date-picker input.get-results, .region-cms-rightnav .date-picker .page-node-type-section-page .view-filters #edit-actions input.get-results, .page-node-type-section-page .view-filters #edit-actions .region-cms-rightnav .date-picker input.get-results {
        margin-right: 5px;
        background-color: #808080;
        color: #fff; }
      .region-cms-rightnav .date-picker .ds-c-button.clear-date, .region-cms-rightnav .date-picker .page-node-type-section-page .view-header a.clear-date, .page-node-type-section-page .view-header .region-cms-rightnav .date-picker a.clear-date, .region-cms-rightnav .date-picker .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input.clear-date, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] .region-cms-rightnav .date-picker input.clear-date, .region-cms-rightnav .date-picker .page-node-type-section-page .view-filters #edit-actions input.clear-date, .page-node-type-section-page .view-filters #edit-actions .region-cms-rightnav .date-picker input.clear-date {
        color: #808080; }
      .region-cms-rightnav .date-picker .ds-c-button:active, .region-cms-rightnav .date-picker .page-node-type-section-page .view-header a:active, .page-node-type-section-page .view-header .region-cms-rightnav .date-picker a:active, .region-cms-rightnav .date-picker .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:active, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] .region-cms-rightnav .date-picker input:active, .region-cms-rightnav .date-picker .page-node-type-section-page .view-filters #edit-actions input:active, .page-node-type-section-page .view-filters #edit-actions .region-cms-rightnav .date-picker input:active, .region-cms-rightnav .date-picker .ds-c-button:focus, .region-cms-rightnav .date-picker .page-node-type-section-page .view-header a:focus, .page-node-type-section-page .view-header .region-cms-rightnav .date-picker a:focus, .region-cms-rightnav .date-picker .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:focus, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] .region-cms-rightnav .date-picker input:focus, .region-cms-rightnav .date-picker .page-node-type-section-page .view-filters #edit-actions input:focus, .page-node-type-section-page .view-filters #edit-actions .region-cms-rightnav .date-picker input:focus, .region-cms-rightnav .date-picker .ds-c-button:hover, .region-cms-rightnav .date-picker .page-node-type-section-page .view-header a:hover, .page-node-type-section-page .view-header .region-cms-rightnav .date-picker a:hover, .region-cms-rightnav .date-picker .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input:hover, .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] .region-cms-rightnav .date-picker input:hover, .region-cms-rightnav .date-picker .page-node-type-section-page .view-filters #edit-actions input:hover, .page-node-type-section-page .view-filters #edit-actions .region-cms-rightnav .date-picker input:hover {
        outline: 2px solid #006699; }
    @media (max-width: 1023px) {
      .region-cms-rightnav .date-picker {
        padding: 14px 20px 50px; }
        .region-cms-rightnav .date-picker > .ds-l-row > span {
          width: 40%;
          padding: 0 0px 0 16px !important; }
          .region-cms-rightnav .date-picker > .ds-l-row > span input[type="text"] {
            width: 100%; }
          .region-cms-rightnav .date-picker > .ds-l-row > span.ds-l-lg-col--2 {
            width: 10%;
            margin-left: 15px; } }
  .region-cms-rightnav .block-facet--checkbox .facets-widget-checkbox {
    background: none;
    border: none;
    padding-right: 0px !important; }
    .region-cms-rightnav .block-facet--checkbox .facets-widget-checkbox ul {
      list-style: none;
      padding: 0 0 0.25em 0; }
    .region-cms-rightnav .block-facet--checkbox .facets-widget-checkbox input[type='checkbox'] {
      opacity: 0;
      position: absolute; }
      .region-cms-rightnav .block-facet--checkbox .facets-widget-checkbox input[type='checkbox'] + label {
        padding-left: 23px;
        font-weight: normal;
        position: relative;
        color: black;
        font-size: 14px; }
        .region-cms-rightnav .block-facet--checkbox .facets-widget-checkbox input[type='checkbox'] + label:before {
          height: 13px;
          width: 13px;
          background-color: transparent;
          border: 1px solid #bfc1c4;
          content: "";
          display: block;
          left: 0;
          position: absolute;
          top: 0;
          border-radius: 3px;
          padding-left: 2px;
          padding-top: 2px;
          margin-top: 2px; }
      .region-cms-rightnav .block-facet--checkbox .facets-widget-checkbox input[type='checkbox']:focus + label {
        outline-color: #006699;
        outline: 1px solid;
        outline-color: -webkit-focus-ring-color; }
    .region-cms-rightnav .block-facet--checkbox .facets-widget-checkbox input[type='checkbox'][checked='checked'] {
      opacity: 0;
      position: absolute; }
      .region-cms-rightnav .block-facet--checkbox .facets-widget-checkbox input[type='checkbox'][checked='checked'] + label {
        font-weight: normal; }
        .region-cms-rightnav .block-facet--checkbox .facets-widget-checkbox input[type='checkbox'][checked='checked'] + label:before {
          font-size: 12px;
          content: "\f00c";
          font-family: FontAwesome !important;
          font-weight: 200;
          background-color: transparent;
          color: white;
          line-height: 1;
          background-color: #006699;
          border-radius: 3px;
          font-weight: bold; }
  .region-cms-rightnav .block-facet--checkbox .facet-item {
    margin-bottom: 8px; }
    .region-cms-rightnav .block-facet--checkbox .facet-item label {
      display: inline-block; }
    .region-cms-rightnav .block-facet--checkbox .facet-item input {
      margin: 2px; }
    .region-cms-rightnav .block-facet--checkbox .facet-item a {
      color: gray;
      border: none; }
      .region-cms-rightnav .block-facet--checkbox .facet-item a:hover, .region-cms-rightnav .block-facet--checkbox .facet-item afocus, .region-cms-rightnav .block-facet--checkbox .facet-item aactive {
        border-bottom: 1px solid red;
        color: red; }

#views-exposed-form-cms-of-acquia-search-page #edit-sort-by,
#views-exposed-form-cms-of-acquia-search-page #edit-items-per-page-acquia-search,
#views-exposed-form-cms-of-acquia-search-page #edit-field-date-min,
#views-exposed-form-cms-of-acquia-search-page #edit-field-date-max {
  display: none; }

.page-node-type-section-page .field--name-field-dynamic-list-table {
  padding-top: 10px; }
.page-node-type-section-page .form--inline {
  float: right; }
  @media (max-width: 1023px) {
    .page-node-type-section-page .form--inline {
      float: none; } }
@media (max-width: 1023px) {
  .page-node-type-section-page .view-header {
    padding-left: 0; } }
.page-node-type-section-page .view-header a {
  font-family: Arial, Helvetica, sans-serif !important;
  margin-right: 10px;
  padding: 7px 15px; }
.page-node-type-section-page .view-filters {
  padding-left: 0; }
  @media (max-width: 1023px) {
    .page-node-type-section-page .view-filters {
      padding-right: 0; } }
  .page-node-type-section-page .view-filters [data-drupal-selector=edit-combine] {
    height: 32px;
    margin: 0; }
  .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions], .page-node-type-section-page .view-filters #edit-actions {
    display: inline-block;
    margin-top: -3px;
    margin-right: 0;
    padding-top: 0; }
    @media (max-width: 1023px) {
      .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions], .page-node-type-section-page .view-filters #edit-actions {
        display: block; } }
    .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input, .page-node-type-section-page .view-filters #edit-actions input {
      background-image: none;
      padding: 7px 20px;
      margin-right: 0;
      margin-left: 0;
      height: 32px; }
      @media (max-width: 1023px) {
        .page-node-type-section-page .view-filters div[data-drupal-selector=edit-actions] input, .page-node-type-section-page .view-filters #edit-actions input {
          margin-top: 0;
          padding: 15px; } }
.page-node-type-section-page .form-item-combine label {
  margin-top: -20px; }
  @media (max-width: 1023px) {
    .page-node-type-section-page .form-item-combine label {
      margin-top: 10px; } }
  @media (max-width: 479px) {
    .page-node-type-section-page .form-item-combine label {
      margin-top: 0; } }
.page-node-type-section-page .form-item-combine input {
  padding: 8px 2px; }
  @media (max-width: 1023px) {
    .page-node-type-section-page .form-item-combine input {
      padding: 7px 2px;
      margin-top: -1px; } }
.page-node-type-section-page .form-item-items-per-page label {
  margin-top: -20px; }
  @media (max-width: 1023px) {
    .page-node-type-section-page .form-item-items-per-page label {
      margin-top: 10px; } }
.page-node-type-section-page .views-exposed-form .js-form-item {
  margin-top: 0; }
.page-node-type-section-page .views-element-container table {
  margin-top: 0; }
  .page-node-type-section-page .views-element-container table.views-table {
    font-family: inherit;
    font-size: 1em; }
  .page-node-type-section-page .views-element-container table thead tr th {
    background-color: #ebebeb;
    color: black; }
    .page-node-type-section-page .views-element-container table thead tr th a {
      color: black;
      text-decoration: none; }
      .page-node-type-section-page .views-element-container table thead tr th a:after {
        font-family: 'FontAwesomeSolid' !important;
        content: "\f0dc";
        color: #006699;
        font-size: 16px;
        margin-top: -5px;
        margin-left: 5px;
        display: inline-block; }
      .page-node-type-section-page .views-element-container table thead tr th a.no-sort:after {
        content: none; }
      .page-node-type-section-page .views-element-container table thead tr th a .tablesort--desc:after {
        font-family: 'FontAwesomeSolid' !important;
        content: "\f0dd";
        color: #006699;
        float: right;
        font-size: 16px;
        margin-top: -5px; }
      .page-node-type-section-page .views-element-container table thead tr th a .tablesort--asc:after {
        font-family: 'FontAwesomeSolid' !important;
        content: "\f0de";
        color: #006699;
        float: right;
        font-size: 16px;
        margin-top: 2px; }
      .page-node-type-section-page .views-element-container table thead tr th a .fa-sort {
        color: #006699;
        font-size: 16px; }
  .page-node-type-section-page .views-element-container table tbody tr:nth-child(odd) {
    background: white; }
  .page-node-type-section-page .views-element-container table tbody tr:nth-child(even) {
    background: #f2f3f5; }
  .page-node-type-section-page .views-element-container table tbody a {
    color: #006699; }
    .page-node-type-section-page .views-element-container table tbody a:active, .page-node-type-section-page .views-element-container table tbody a:focus, .page-node-type-section-page .views-element-container table tbody a:hover {
      text-decoration: underline; }
    .page-node-type-section-page .views-element-container table tbody a:visited {
      color: #006699; }
  .page-node-type-section-page .views-element-container table tbody td {
    padding: 9px; }
    .page-node-type-section-page .views-element-container table tbody td.is-active {
      background-color: transparent; }
.page-node-type-section-page .pager {
  margin-top: 20px;
  margin-bottom: 0; }
  .page-node-type-section-page .pager ul {
    padding-left: 0; }
    .page-node-type-section-page .pager ul.pager__items {
      font-size: 12px; }
      @media (max-width: 767px) {
        .page-node-type-section-page .pager ul.pager__items {
          padding-left: 0; } }
    .page-node-type-section-page .pager ul li.pager__item {
      padding: 10px 0;
      border-bottom: 1px solid #D6D7D9;
      border-top: 1px solid #D6D7D9;
      border-right: 1px solid #D6D7D9; }
      .page-node-type-section-page .pager ul li.pager__item.pager__item--first {
        border-left: 1px solid #D6D7D9; }
      .page-node-type-section-page .pager ul li.pager__item.pager__item--ellipsis {
        margin-right: -4px;
        padding-left: 14px;
        padding-right: 14px; }
        @media (max-width: 479px) {
          .page-node-type-section-page .pager ul li.pager__item.pager__item--ellipsis {
            padding-left: 7px;
            padding-right: 7px; } }
      .page-node-type-section-page .pager ul li.pager__item a {
        padding: 8px 14px;
        color: #6F757C;
        font-weight: bold;
        border-bottom: none; }
        @media (max-width: 479px) {
          .page-node-type-section-page .pager ul li.pager__item a {
            padding: 7px; } }
        .page-node-type-section-page .pager ul li.pager__item a:hover, .page-node-type-section-page .pager ul li.pager__item a:focus, .page-node-type-section-page .pager ul li.pager__item a:active {
          text-decoration: underline; }
      .page-node-type-section-page .pager ul li.pager__item.is-active {
        background-color: #006699;
        border: 1px solid #006699;
        color: white; }
        .page-node-type-section-page .pager ul li.pager__item.is-active a {
          color: #fff; }

/********DL item styling*****/
[class*="page-node-type-dli-"] .node__meta {
  display: none; }
[class*="page-node-type-dli-"] .field--name-field-contentid,
[class*="page-node-type-dli-"] .field--name-body .field__label {
  display: none; }
[class*="page-node-type-dli-"] .field--type-entity-reference {
  margin: 0; }
[class*="page-node-type-dli-"] [class*="field--name-dlf-"] .field__label, [class*="page-node-type-dli-"] [class*="field--name-dlf-"] .field__item, [class*="page-node-type-dli-"] [class*="field--name-field-dlf-"] .field__label, [class*="page-node-type-dli-"] [class*="field--name-field-dlf-"] .field__item {
  float: left;
  margin: 10px 0; }
[class*="page-node-type-dli-"] [class*="field--name-dlf-"] .field__label, [class*="page-node-type-dli-"] [class*="field--name-field-dlf-"] .field__label {
  width: 35%;
  font-size: 1em;
  font-weight: bold;
  padding: 0; }
[class*="page-node-type-dli-"] [class*="field--name-dlf-"] .field__item, [class*="page-node-type-dli-"] [class*="field--name-field-dlf-"] .field__item {
  width: 65%; }
[class*="page-node-type-dli-"] [class*="field--name-dlf-"]:after, [class*="page-node-type-dli-"] [class*="field--name-field-dlf-"]:after {
  display: table;
  clear: both;
  content: ""; }
[class*="page-node-type-dli-"] .field--name-body {
  margin: 10px 0; }
[class*="page-node-type-dli-"] .field--name-field-downloads,
[class*="page-node-type-dli-"] .field--name-field-related-links {
  border: 2px solid #dedede;
  margin: 10px 0; }
  [class*="page-node-type-dli-"] .field--name-field-downloads .field__label,
  [class*="page-node-type-dli-"] .field--name-field-related-links .field__label {
    margin: 2px 0;
    background: #e4e5e5;
    font-size: 1.2em;
    padding: 2px 6px;
    font-weight: bold; }
  [class*="page-node-type-dli-"] .field--name-field-downloads .field__items,
  [class*="page-node-type-dli-"] .field--name-field-related-links .field__items {
    background-color: #f8f9fa;
    padding: 10px;
    border-top: 1px solid #dedede;
    margin-top: 1px;
    list-style: none; }
  [class*="page-node-type-dli-"] .field--name-field-downloads .field__item,
  [class*="page-node-type-dli-"] .field--name-field-related-links .field__item {
    margin: 4px 0; }

/*# sourceMappingURL=cms-global-style.css.map */