/*
 * DO NOT EDIT THIS FILE.
 * Edit .pcss.css file instead and recompile.
*/
/**
 * @file
 * Visual styles for tabs.
 */
/*
  Custom CSS properties and mixins.
  These are "compiled" by postcss/postcss-custom-properties for IE11 compatibility.
  CSS variables (those that start with --) are included in the generated CSS. Sass style variables (those that start with $) are for internal processing.
*/
/* Internal variables */
/*1px */
/*16px */
/*4px */
/*5.33333333px */
/*8px */
/*24px */
/*32px */
/*48px */
/*max-width + 32px; */
/* Mixins */
/* */
/* Hide elements visually, but keep them available for screen-readers. */
/* */
/* Used for information required for screen-reader users to understand and use */
/* the site where visual display is undesirable. Information provided in this */
/* manner should be kept concise, to avoid unnecessary burden on the user. */
/* "!important" is used to prevent unintentional overrides. */
/* */
/* stable9 styles */
div.tabs {
  margin: 1em 0;
}
ul.tabs {
  margin: 0 0 0.5em;
  padding: 0;
  list-style: none;
}
.tabs > li {
  display: inline-block;
  margin-right: 0.3em; /* LTR */
}
[dir="rtl"] .tabs > li {
  margin-right: 0;
  margin-left: 0.3em;
}
.tabs a {
  display: block;
  padding: 0.2em 1em;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.tabs a:before {
    display: none;
  }
.tabs a a:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
  }
.tabs a.is-active {
  background-color: #eee;
}
.tabs a:focus,
.tabs a:hover {
  background-color: #f5f5f5;
}
/*charza styles */
ul.tabs.primary {
  list-style: none;
  margin: 0 0 0.5em;
  padding: 0;
  text-transform: none;
  text-transform: initial;
  display: inline-block;
  width: 100%;
  border: 1px solid var(--c-gray);
  border-radius: var(--base-border-radius);
  overflow:hidden;
  background-color: rgba(255,255,255,0.5);
}
@media (min-width: 569px) {
ul.tabs.primary {
  border: none;
  border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
  display: flex;
  justify-content: space-between;
  background-color: rgba(255,255,255,0.5);
/* border-bottom: 3px solid rgba(var(--c-gray-rgb),0.5); */
  align-items: stretch;
  box-shadow: 0px -3px 0px 0px rgba(var(--c-gray-rgb),0.5) inset
}
}
ul.tabs.primary > li {
    display: block;
    margin-right: 0;
    border-bottom: 1px solid var(--c-light-gray);
  }
@media (min-width: 569px) {
ul.tabs.primary > li {
    flex-grow: 1;
    border-bottom: 0;
    display: inline-block;
    margin: 0
  }
  }
ul.tabs.primary > li:last-child {
      border-bottom: 0;
    }
ul.tabs.primary > li a {
      /*--bg-h: 0; */
      cursor: pointer;
      line-height: 1.15;
      transition: all var(--base-duration) var(--base-timing);
      padding: var(--half-space) var(--space);
    }
@media (min-width: 569px) {
ul.tabs.primary > li a {
      border-bottom: 3px solid transparent;
      text-align: center;
      height: 100%;
      display: flex;
      align-items: flex-end;
      padding: var(--half-space);
      justify-content: center;
      background-color: transparent
    }

    }
ul.tabs.primary > li a:focus, ul.tabs.primary > li a:hover, ul.tabs.primary > li a:active {
        background-color: white;
      }
@media (min-width: 569px) {
ul.tabs.primary > li a:focus, ul.tabs.primary > li a:hover, ul.tabs.primary > li a:active {
        border-bottom: 3px solid var(--c-dark-gray);
        -webkit-text-decoration: none;
        text-decoration: none
      }
      }
ul.tabs.primary > li a:focus:focus, ul.tabs.primary > li a:hover:focus, ul.tabs.primary > li a:active:focus {
        }
@media (min-width: 569px) {
ul.tabs.primary > li.is-active {
        box-shadow: rgba(0,0,0,0.1) 0px 2px 6px
    }
      }
ul.tabs.primary > li.is-active a {
        color: white;
        background-color: var(--c-dark-gray);
      }
@media (min-width: 569px) {
ul.tabs.primary > li.is-active a {
          background-color: white;
          cursor: default;
          color: black;
          border-bottom: 3px solid var(--c-light-blue)
      }
        }
@media (max-width: 567px) {
ul.tabs.primary > li.is-active a:hover {
             background-color: var(--c-dark-gray);
        }
           }
ul.tabs.primary > li.is-active a:hover {
          -webkit-text-decoration: none;
          text-decoration: none;
}
ul.tabs.secondary {
  background-color: white;
  box-shadow: inset rgba(var(--c-dark-gray-rgb),.3) 0px 0px 5px 1px;
  margin-top: var(--space);
}
ul.tabs.secondary li {
    margin-right: 0;
  }
ul.tabs.secondary li a {
      /*--bg-h: 0; */
      padding: var(--half-space) var(--space) 0.5rem;
      display: inline-block;
      color: var(--c-link);
      font-size: var(--fs-small);
      line-height: 1;
    }
ul.tabs.secondary li a:hover {
        background-color: inherit;
        -webkit-text-decoration: none;
        text-decoration: none;
      }
ul.tabs.secondary li.is-active a {
      background-color: var(--c-dark-gray);
      color: white;
    }