/* City of Madison starter template styles. */

/* CSS custom properties. */
:root {
  --color-white: #fff;
  --color-black: #000;
  --ui-gray: #202020;
  --ui-accent: #121212;

  --color-dark-gray: #333333;
  --color-normal-gray: #595959;
  --color-medium-gray: #949494;
  --color-light-gray: #cccccc;
  --color-pale-gray: #eeeeee;

  --color-dark-blue: #043d5b;
  --color-normal-blue: #065d8c;
  --color-medium-blue: #5d9cb8;
  --color-light-blue: #95d0e1;
  --color-paleblue: #e2f1f6;

  --color-dark-teal: #004d54;
  --color-normal-teal: #03626b;
  --color-medium-teal: #539fa8;
  --color-light-teal: #aadbde;
  --color-pale-teal: #e0f1f2;

  --color-dark-green: #00431c;
  --color-normal-green: #00662f;
  --color-medium-green: #53a36b;
  --color-light-green: #aedcc0;
  --color-pale-green: #e3f2e8;

  --color-medium-yellow: #d47f1d;
  --color-light-yellow: #eca120;
  --color-pale-yellow: #fdf4e4;

  --color-dark-orange: #7d2509;
  --color-normal-orange: #a2300c;
  --color-medium-orange: #d05319;
  --color-pale-orange: #fcefe4;

  --color-dark-red: #8d031e;
  --color-normal-red: #ac1d2c;
  --color-medium-red: #e17472;
  --color-light-red: #fcc3c2;
  --color-pale-red: #fbeaec;

  --color-dark-purple: #580648;
  --color-normal-purple: #84036c;
  --color-medium-purple: #cc77b3;
  --color-light-purple: #eec6e1;
  --color-pale-purple: #f9edf7;

  /* Primary colors. */
  --color-primary: var(--color-normal-teal);
  --color-primary--dark: var(--color-dark-teal);
  --color-primary--medium: var(--color-medium-teal);
  --color-primary--light: var(--color-light-teal);
  --color-primary--pale: var(--color-pale-teal);

  /* Secondary colors. */
  --color-secondary: var(--color-normal-blue);
  --color-secondary--dark: var(--color-dark-blue);
  --color-secondary--medium: var(--color-medium-blue);
  --color-secondary--light: var(--color-light-blue);
  --color-secondary--pale: var(--color-pale-blue);

  /* UI colors: page backgrounds, components, etc. */
  @media (prefers-color-scheme: light) {
    --ui-site-background: white;
    --ui-site-text: black;
		--ui-site-text-reverse: white;
    --ui-prefooter-background: var(--color-dark-gray);
    --ui-component-background: var(--color-pale-gray);
    --ui-component-accent: var(--color-primary);
    --ui-component-accent-dark: var(--color-primary--dark);
    --ui-component-accent-light: var(--color-primary--light);
    --ui-rule-border-color: var(--color-pale-gray);
  }
  @media (prefers-color-scheme: dark) {
    --ui-site-background: var(--ui-gray);
    --ui-site-text: white;
		--ui-site-text-reverse: black;
    --ui-prefooter-background: var(--ui-accent);
    --ui-component-background: var(--color-dark-gray);
    --ui-component-accent: var(--color-primary--medium);
    --ui-component-accent-dark: var(--color-primary--dark);
    --ui-component-accent-light: var(--color-primary--light);
    --ui-rule-border-color: var(--color-normal-gray);
  }

  /* Link colors. */
  @media (prefers-color-scheme: light) {
    --color-link: var(--color-normal-blue);
    --color-link-hover: var(--color-dark-blue);
    --color-link-visited: var(--color-dark-purple);
    --color-link-dark-bg: var(--color-white);
    --color-link-dark-bg-hover: var(--color-light-gray);
    --color-link-dark-bg-visited: var(--color-pale-gray);
    --color-link-aaa: var(--color-dark-blue);
    --color-link-aaa-hover: var(--color-dark-gray);
    /* Footer link colors. */
    .com-footer {
      --color-link: var(--color-link-dark-bg);
      --color-link-hover: var(--color-link-dark-bg-hover);
      --color-link-visited: var(--color-link-dark-bg-visited);
    } 
  }
  @media (prefers-color-scheme: dark) {
    --color-link: var(--color-light-blue);
    --color-link-hover: var(--color-pale-blue);
    --color-link-visited: var(--color-light-purple);
    --color-link-dark-bg: var(--color-white);
    --color-link-dark-bg-hover: var(--color-light-gray);
    --color-link-dark-bg-visited: var(--color-pale-gray);
    --color-link-aaa: var(--color-dark-blue);
    --color-link-aaa-hover: var(--color-dark-gray);
  }

  /* Navigation colors. */
  @media (prefers-color-scheme: light) {
    --main-nav-link: var(--color-black);
    --main-nav-link--hover: var(--color-normal-gray);
    --main-nav-link--bg: var(--color-pale-gray);
  }
  @media(prefers-color-scheme: dark) {
    --main-nav-link: var(--color-white);
    --main-nav-link--hover: var(--color-normal-gray);
    --main-nav-link--bg: var(--ui-accent);
  }

  /* General sizing properties. */
  --browser-size: 16;
  --size-xx-small: calc(1rem * (2/var(--browser-size))); /* 2px */
  --size-x-small: calc(1rem * (5/var(--browser-size))); /* 4px */
  --size-small: calc(1rem * (9/var(--browser-size))); /* 9px */
  --size-medium: calc(1rem * (15/var(--browser-size))); /* 15px */
  --size-large: calc(1rem * (18/var(--browser-size))); /* 18px */
  --size-x-large: calc(1rem * (27/var(--browser-size))); /* 27px */
  --size-xx-large: calc(1rem * (36/var(--browser-size))); /* 36px */
  --size-xxx-large: calc(1rem * (45/var(--browser-size))); /* 45px */

  /* Fonts & typography*/
  --font-base: "Source Sans Pro", sans-serif;
  --font-alt: "Montserrat", sans-serif;
  --font-gin: ginter, inter, "Helvetica Neue", blinkmacsystemfont, -apple-system, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, sans-serif;
  
  /* Base font is 16px set by the browser and used for calculating font sizes. */
  --font-size--base: var(--size-large); /* 18px */
  --font-size--small: calc(1rem * (14.4/var(--browser-size))); /* 14.4px */
  --font-size--medium: calc(1rem *(22.5/var(--browser-size))); /* 22.5px */
  --font-size--large: calc(1rem * (20.25/var(--browser-size))); /* 20.25px */
  --font-size--x-large: var(--size-x-large); /* 27px */
  --font-size--xx-large: var(--size-xx-large); /* 36px */
  --font-size--xxx-large: var(--size-xxx-large); /* 45px */
  --font-size--h1: var(--font-size--xxx-large);
  --font-size--h2: var(--font-size--xx-large);
  --font-size--h3: var(--font-size--x-large);
  --font-size--h4: var(--font-size--large);
  --font-size--h5: calc(1rem * (15.75/var(--browser-size))); /* 15.75px */
  --font-size--h6: calc(1rem * (13.5/var(--browser-size))); /* 13.5px */

  /* Font weights. */
  --font-weight--regular: 400;
  --font-weight--medium: 500;
  --font-weight--semi: 600;
  --font-weight--heavy: 700;

  /* Forms. */
  @media (prefers-color-scheme: light) {
    --form--color-background: field;
    --form--color-input-text: fieldtext;
    --form--color-border: var(--color-medium-gray);
    --form--color-description: var(--color-dark-gray);
    --form--color-description--fieldset: inherit;
    --form--color-required: var(--color-dark-red);
    --form--color-error--text: var(--color-normal-red);
    --form--color-error--border: var(--color-normal-red);
    --form--color-error--icon: var(--color-normal-red);
    --form--color-error--icon-ext: var(--color-normal-red);
    --form--color-warning--text: var(--color-normal0orange);
    --form--color-warning--border: var(--color-light-yellow);
    --form--color-warning--icon: var(--color-medium-yellow);
    --form--color-warning--icon-ext: var(--color-medium-yellow);
    --form--color-prefix-suffix--text: black;
    --form--color-prefix-suffix--border: transparent;
    --form--color-prefix-suffix--background: var(--color-pale-gray);
    --form--color-prefix-suffix--background--error: var(--color-normal-red);
    --form--color-prefix-suffix--border--error: var(--form--color-border);
    --form--color-prefix-suffix--background--warning: var(--color-light-yellow);
    --form--color-prefix-suffix--border--warning: var(--form--color-border);
    --form--color-prefix-suffix--text--error: white;
    --form--color-prefix-suffix--text--warning: black;
    --form--color-readonly-background: var(--color-pale-gray);
    --form--color-readonly-text: var(--color-dark-gray);
    --form--color-placeholder-text: black;
  }
  @media (prefers-color-scheme: dark) {
    --form--color-background: var(--color-dark-gray);
    --form--color-input-text: white;
    --form--color-border: var(--color-medium-gray);
    --form--color-description: white;
    --form--color-description--fieldset: white;
    --form--color-required: var(--color-light-red);
    --form--color-error--text: var(--color-light-red);
    --form--color-error--border: var(--color-medium-red);
    --form--color-error--icon: var(--color-medium-red);
    --form--color-error--icon-ext: var(--color-medium-red);
    --form--color-warning--text: var(--color-pale-yellow);
    --form--color-warning--border: var(--color-medium-yellow);
    --form--color-warning--icon: var(--color-medium-yellow);
    --form--color-warning--icon-ext: var(--color-medium-yellow);
    --form--color-prefix-suffix--text: var(--form--color-input-text);
    --form--color-prefix-suffix--border: var(--form--color-border);
    --form--color-prefix-suffix--background: var(--ui-site-background);
    --form--color-prefix-suffix--background--error: var(--ui-site-background);
    --form--color-prefix-suffix--border--error: var(--form--color-error--border);
    --form--color-prefix-suffix--text--error: white;
    --form--color-prefix-suffix--background--warning: var(--ui-site-background);
    --form--color-prefix-suffix--border--warning: var(--form--color-warning--border);
    --form--color-prefix-suffix--text--warning: white;
    --form--color-readonly-background: var(--form--color-background);
    --form--color-readonly-text: var(--color-medium-gray);
    --form--color-placeholder-text: var(--color-light-gray);
  }

  /* Buttons. */
  @media (prefers-color-scheme: light) {
    --ui-button--bg: var(--color-normal-teal);
    --ui-button--border: var(--color-normal-teal);
    --ui-button--text: white;
    --ui-button--bg-hover: var(--color-dark-teal);
    --ui-button--border-hover: var(--color-dark-teal);
    --ui-button--text-hover: white;
    .button--outline {
      --ui-button--bg: white;
      --ui-button--border: var(--color-normal-teal);
      --ui-button--text: var(--color-normal-teal);
      --ui-button--bg-hover: var(--color-dark-teal);
      --ui-button--border-hover: var(--color-dark-teal);
      --ui-button--text-hover: white;
    }
  }
  @media (prefers-color-scheme: dark) {
    --ui-button--bg: var(--color-light-teal);
    --ui-button--border: var(--color-light-teal);
    --ui-button--text: black;
    --ui-button--bg-hover: var(--color-pale-teal);
    --ui-button--border-hover: var(--color-pale-teal);
    --ui-button--text-hover: black;
    .button--outline {
      --ui-button--bg: transparent;
      --ui-button--border: var(--color-medium-teal);
      --ui-button--text: var(--color-light-teal);
      --ui-button--bg-hover: var(--color-pale-teal);
      --ui-button--border-hover: var(--color-pale-teal);
      --ui-button--text-hover: var(--color-dark-teal);
    }
  }
}

html {
  font-size: 100%;
}

body {
  width: 100%;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: var(--ui-site-text);
  background-color: var(--ui-site-background);
  font-size: var(--font-size--base);
  font-family: var(--font-base);
  line-height: 1.5;
}

body * {
  box-sizing: border-box;
}

/**
 * Header region.
 * 
 * Styling for com branding, navigation, and section branding.
 */
.region--header {
  height: auto;
}
.com-branding {
  display: flex;
  padding: var(--size-x-small) 0;
}
.com-branding a {
  display: inline-block;
  padding: var(--size-medium) 0;
}
.com-branding img {
  display: block;
  max-width: 100%;
  height: calc(1rem * (20/16));
  margin-right: calc(1rem * (4/16));
}
@media (prefers-color-scheme: dark) {
  .com-branding img {
    filter: invert(1) contrast(200%);
  }
}
.region--site-section {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/_WJC7395_mobile.jpg");
  background-size: cover;
  background-position: 50% 44.5%;
}
/* Site Section branding. */
.site-section--brand {
  flex: 1;
  padding: var(--size-medium);
  height: 100%;
  background-color: rgba(0,0,0,.5); 
}
.site-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  grid-area: var(--size-large);
  color: var(--color-white);
  text-decoration: none;
}
.site-section--brand img {
  max-width: none;
  height: calc(1rem * (80/16));
  max-height: calc(1rem * (80/16));
  min-height: var(--size-xxx-large);
  width: auto;
}
.section--title {
  margin-left: calc(1rem * (20/16));
  font-size: var(--size-xxx-large);
  font-family: var(--font-alt);
  font-weight: var(--font-weight--semi);
  line-height: normal;
  text-shadow: 0 0 calc(1rem * (3/16)) var(--color-black);
}
/* Media queries for header region items. */
@media screen and (min-width: 960px) {
  /* Desktop background image.  */
  .region--site-section {
    background-image: url("../assets/images/_WJC7395.jpg");
  }
}
@media screen and (max-width: 991px) {
  .com-branding {
    margin-left: var(--size-medium);
  }
  .section--title {
      font-size:calc(18px + 27*(100vw - 100px)/891)
  }
}
@media screen and (min-width: 992px) {
  /* Desktop layout for header items. */
  .region--header {
    display: grid;
    grid-template-rows: [branding-start] 100px [branding-end banner-image-start] 110px [banner-image-end];
    grid-template-columns: calc(1rem * (300/16)) auto;
    grid-template-areas: 
      "logo nav"
      "banner banner";
  }
  .com-branding {
    grid-column-start: logo;
    grid-column-end: logo;
    grid-row-start: branding-start;
    grid-row-end: branding-end;
    align-self: center;
    margin-left: var(--size-medium);
  }
  .com-menu-wrapper {
    grid-column-start: nav;
    grid-column-end: end;
    grid-row-start: branding-start;
    grid-row-end: branding-end;
    align-self: center;
    margin-right: var(--size-medium);
  }
  .region--site-section {
    grid-column-start: logo;
    grid-column-end: end;
    grid-row-start: banner-image-start;
    grid-row-end: banner-imate-end;    
  }
  .site-section--brand {
    padding-right: var(--size-medium);
    padding-left: var(--size-medium);
  }
}
@media screen and (min-width: 1185px) {
  /* Set left and right spacing for site section brand. */
  .site-section--brand {
    --side-padding: calc(1rem * (7/16));
    padding-right: calc((100vw - 1140px)/2 - var(--side-padding));
    padding-left: calc((100vw - 1140px)/2 - var(--side-padding));
  }
}
@media screen and (min-width: 1200px) {
  /* XL desktop background image.  */
  .region--site-section {
    background-image: url("../assets/images/_WJC7395_xl.jpg");
  }
}
@media screen and (min-width: 1400px) {
  /* Adjust left and right margins for large displays.  */
  .com-branding {
    margin-left: var(--size-xxx-large);
  }
  .com-menu-wrapper {
    margin-right: var(--size-xxx-large);
  }
}

/**
 * Main navigation.
 * 
 * Styling for mobile and desktop navigation and button.
 */
.com-menu-wrapper nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.com-menu-wrapper nav ul li a {
  padding: var(--size-medium) var(--size-large);
  font-size: calc(15.75px + (18 - 16) * ((100vw - 992px) / (1400 - 992)));
  color: var(--main-nav-link);
  text-decoration: none;
}
/* Media queries for main navigation. */
@media screen and (max-width: 991px) {
  /* Mobile display for navigation menu. */
  .com-menu-wrapper {
    display: none;
    border-bottom: .1rem solid #ccc;
    box-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
  }
  /* Mobile navigation styles. */
  .com-menu-wrapper nav ul li {
    border-bottom: 1px solid var(--color-light-gray);
  }
  .com-menu-wrapper nav ul li a {
    line-height: 1.15;
    display: block;
    background-color: var(--ui-site-background);
    font-size: var(--font-size--base);
  }
  .com-menu-wrapper nav ul li a:focus,
  .com-menu-wrapper nav ul li a:hover {
    background-color: var(--main-nav-link--bg)
  }
  .com-menu-wrapper nav ul li a.home .icon img {
    margin-right: var(--size-x-small);
    margin-bottom: calc(var(--size-x-small * -1))
  }
}
@media screen and (min-width: 992px) {
  /* Desktop display for navigation menu. */
  .com-menu-wrapper nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
  }
  .com-menu-wrapper nav ul li a:focus,
  .com-menu-wrapper nav ul li a:hover {
    background-color: var(--main-nav-link--bg);
  }
  .com-menu-wrapper nav ul li a.home {
    display: none;
  }
}

/* Menu button. */
.section-menu--toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(1rem * (60/16));
  height: calc(1rem * (60/16));
  margin: 0;
  padding: calc(1rem * (10/16)) calc(1rem * (8/16));
  border: none;
  border-radius: 0;
  background-color: var(--color-normal-teal);
  box-shadow: none;
  color: white;
  font-family: var(--font-alt);
  font-size: calc(1rem * (11.7/16));
  font-weight: var(--font-weight--heavy);
  z-index: 99;
}
.section-menu--toggle:focus,
.section-menu--toggle:hover {
  color: white;
  background-color: var(--color-dark-teal);
  box-shadow: var(--color-dark-teal);
}
.section-menu--toggle .menu-bar {
  display: block;
  margin: 0 auto;
  width: calc(1rem * (30/16));
  height: calc(1rem * (2/16));
  background-color: #fff;
  opacity: 1;
  transition: all .3s ease-in-out
}
.section-menu--toggle .menu-bar {
  margin-top: var(--size-x-small);
}
.section-menu--toggle[aria-expanded=true] .menu-bar:nth-child(1) {
  top: calc(1rem * (1/16));
  transform: translate(0,250%) rotate(-45deg)
}
.section-menu--toggle[aria-expanded=true] .menu-bar:nth-child(2) {
  opacity: 0;
  bottom: 0;
  transform: translate(0,250%)
}
.section-menu--toggle[aria-expanded=true] .menu-bar:nth-child(3) {
  bottom: var(--size-small);
  transform: translate(0,-450%) rotate(45deg)
}
.section-menu--toggle span:not(.menu-bar) {
  display: block;
  margin-top: calc(1rem * (6/16));
  line-height: 1;
  text-transform: uppercase
}
/* Media query for menu toggle button. */
@media screen and (min-width: 992px) {
  .section-menu--toggle {
      display:none
  }
}

/**
 * Main content region.
 * 
 * Styling for mobile and desktop navigation and button.
 */

/* Content region. */
.region--content {
  padding-top: var(--size-xxx-large);
  padding-bottom: var(--size-xx-large);
}

/* Footer region. */
.com-footer {
  color: white;
  background-color: black;
}
.region--footer {
  padding-top: calc(var(--size-medium) * 2);
  padding-bottom: calc(var(--size-medium) * 2);
}
@media screen and (min-width: 480px) {
  .region--footer {
    display: flex;
    gap: var(--size-x-large);
  }
  .region--footer p.lead {
    margin-top: 0;
  }
  .region--footer p {
    margin: var(--size-small) 0;
  }
}

/**
 * Typography styling.
 * 
 * Basic styling for text, lists, and links.
 */
h1, h2, h3, h4, h5, h6 {
  margin: var(--size-x-large) 0 var(--size-large) 0;
  font-family: var(--font-base);
  font-feature-settings: "liga", "dlig";
  font-weight: var(--font-weight--semi);
  line-height: 1.33;
}

h1 { font-size: var(--font-size--h1); }
h2 { font-size: var(--font-size--h2); }
h3 { font-size: var(--font-size--h3); }
h4 { font-size: var(--font-size--h4); }
h5 { font-size: var(--font-size--h5); }
h6 { font-size: var(--font-size--h6); }

@media screen and (min-width: 570px) {
  h1, h2, h3, h4, h5, h6, small, p, .region--content ul li, .region--content ol li {
    max-width: 64ch;
  }
}

.page-title {
  margin-top: calc(var(--size-medium) * -1);
  border-bottom: var(--size-x-small) solid var(--ui-rule-border-color);
}

small { font-size: var(--font-size--small); }

.lead { font-size: var(--font-size--medium); }

/* Links. */
a {
  color: var(--color-link);
}
a:visited,
a.link--visited {
  color: var(--color-link-visited);
}
a:focus,
a:hover,
a.link--hovered {
  color: var(--color-link-hover);
}

/* Lists. */
main ul li,
main ol li {
  margin: var(--size-small) 0;
}
.list--inline {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list--inline > li {
  display: inline-block;
}
.list--inline > li:not(:last-child) {
  margin-right: calc(1rem * (24/var(--browser-size)));
}

/* Images. */
img {
  max-width: 100%;
  height: auto;
}

/**
 * Basic form styling.
 * 
 * Styling for labels and inputs.
 */
/* Temporarily commented out while working with the SSRS form/table styling. */
form label {
  margin-top: var(--size-medium);
  margin-bottom: var(--size-x-small);
  padding: 0;
  display: block;
  font-weight: var(--font-weight--semi);
}
form input[type=date], 
form input[type=email], 
form input[type=month], 
form input[type=number], 
form input[type=search], 
form input[type=tel], 
form input[type=text], 
form input[type=time], 
form input[type=url], 
form input[type=week], 
form select, 
form textarea {
  background-color: var(--form--color-background);
  color: var(--form--color-input-text);
  height: var(--size-xxx-large);
  padding: var(--size-xx-small) var(--size-small);
  border: 1px solid var(--form--color-border);
  border-radius: var(--size-x-small);
  font-family: var(--font-base);
  font-size: var(--size-large);
  box-shadow: 0px 1px 3px -1px rgba(0, 0, 0, .35);
  vertical-align: bottom;
}
form input[type="text"],
form input[type="email"] {
  width: calc(1rem * (360/16));
  max-width: 100%;
}
form textarea {
  padding: var(--size-small) var(--size-small);
  max-width: 100%;
  height: auto;
}
form input[type="submit"] {
  margin-top: var(--size-x-large);
}

/**
 * Component styling.
 * 
 * Styling for any components like buttons, etc.
 */
.button,
button,
input[type="submit"] {
  padding: calc(1rem * (10.5/16)) calc(1rem * (17.2/16));
  margin-right: var(--size-medium);
  margin-bottom: var(--size-medium);
  display: inline-block;
  width: auto;
  border: none;
  border-radius: var(--size-x-small);
  font-family: inherit;
  font-size: var(--font-size--base);
  font-weight: normal;
  line-height: normal;
  text-shadow: none;
  text-decoration: none;
  user-select: none;
  cursor: pointer;
  z-index: 0;
  appearance: none;
  background-color: var(--ui-button--bg);
  box-shadow:
    inset 0 0 0 calc(1rem * (2/16)) var(--ui-button--border),
    0 calc(1rem * (2/16)) calc(1rem * (4/16)) 0 rgba(0,0,0,.2);
  color: var(--ui-button--text);
}
.button:focus,
.button:hover,
button:focus,
button:hover,
input[type="submit"]:focus,
input[type="submit"]:hover {
  color: var(--ui-button--text);
  background-color: var(--ui-button--bg-hover);
  box-shadow:
    inset 0 0 0 .2rem var(--ui-button--border-hover),
    0 .2rem .4rem 0 rgba(0,0,0,.2);
  color: var(--ui-button--text-hover);
}

.button--outline {
  background-color: var(--ui-button--bg);
  color: var(--ui-button--text);
}

/**
 * Layout.
 * 
 * Styling for controlling page layout.
 */
.edge-to-edge,
.standard-container {
  padding: 0 var(--size-medium);
}
.standard-container > .layout {
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
}

/**
 * Helper classes.
 */
.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}
.visually-hidden:active,
.visually-hidden.focusable:focus {
  position: static !important;
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
}