:root {
  --color-teal: #00857c;
  --color-dark-teal: #0c5c55;
  --color-blue: #0c2340;
  --color-light-teal: #6eceb2;
  --color-lighter-teal: #e6f3f2;
  --color-off-white: #f7f7f7;
  --color-lime: #bfed33;
  --color-lemon: #fff063;
  --color-pastel: #69b8f7;
  --color-pastel-blue: #69b8f7;
  --color-vista: #688ce8;
  --color-rich: #5450e4;
  --color-light-gray: #cfd2d7;
  --color-gray-5: #ddd;
  --color-gray-10: #e6e6e6;
  --color-gray-20: #e7e8ea;
  --color-gray-30: #9ea7b3;
  --color-gray-40: #cac9c8;
  --color-gray-50: #d9d9d9;
  --color-gray-60: #949494;
  --color-gray-70: #dee2e6;
  --color-white: #fff;
  --color-muted-dark: #757575;
  --color-muted-darker: #707070;
  --color-muted-light: #e0e0e0;
  --color-danger: 234, 134, 143;
  --color-danger-5: #cc0100;
  --color-black: #000;
  --color-lime-alt: #F9FDEB;

  --invention: 'Invention', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --arial: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

@font-face {
  font-family: 'Invention';
  src:
    url('../fonts/Invention-Italic.woff2') format('woff2'),
 url('../fonts/Invention-Italic.woff') format('woff'),
    url('../fonts/Invention-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Invention';
  src:
    url('../fonts/Invention-Bold.woff2') format('woff2'),
    url('../fonts/Invention-Bold.woff') format('woff'),
    url('../fonts/Invention-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Invention';
  src:
    url('../fonts/Invention-BoldItalic.woff2') format('woff2'),
    url('../fonts/Invention-BoldItalic.woff') format('woff'),
    url('../fonts/Invention-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Invention';
  src:
    url('../fonts/Invention-LightItalic.woff2') format('woff2'),
    url('../fonts/Invention-LightItalic.woff') format('woff'),
    url('../fonts/Invention-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Invention';
  src:
    url('../fonts/Invention-Light.woff2') format('woff2'),
    url('../fonts/Invention-Light.woff') format('woff'),
    url('../fonts/Invention-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Invention';
  src:
    url('../fonts/Invention-Regular.woff2') format('woff2'),
    url('../fonts/Invention-Regular.woff') format('woff'),
    url('../fonts/Invention-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.font-24 {
  font-size: 1.5rem;
}

/* vue transitions */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* mcs spinner */
.mcs-spinner {
  animation: rotate 2s linear infinite;
  outline: transparent;

  .path {
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

body {
  font-family: var(--invention);
  font-weight: normal;
  color: var(--color-blue);
  background-color: #fff;
}

a {
  color: var(--color-teal);
  transition: color 0.2s ease-in-out;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.definitions ul > li::marker {
  content: '• ';
}

p, .wrap-pretty {
  text-wrap: pretty;
}

.wrap-balance {
  text-wrap: balance;
}

.wrap-default {
  text-wrap: initial;
}

.nowrap {
  text-wrap: nowrap;
}

.bg-teal {
  background: var(--color-teal);
}

.bg-navy-blue {
  background: var(--color-blue);
}

.body-text {
  font-size: 1rem;
}

.border-bottom-blue {
  border-bottom: 1px solid var(--color-blue);
}

.border-bottom-gray {
  border-bottom: 1px solid var(--color-gray-40);
}

.eyebrow {
  background-color: #0C2340;
  padding: 1rem 0;
  min-height: 3rem;
}

.eyebrow button#languages {
  background-color: var(--color-blue);
}

.eyebrow button#languages.btn.show {
  background-color: var(--color-muted-light);
  color: var(--color-blue);
}

.eyebrow .dropdown {
  text-align: right;
}

.eyebrow .dropdown .dropdown-item.selected {
  background-color: var(--color-gray-10);
}

.eyebrow .dropdown .dropdown-item.selected:hover {
  background-color: var(--color-lighter-teal);
}

.eyebrow .dropdown .dropdown-item:hover {
  color: var(--color-teal);
  background-color: var(--color-lighter-teal);
  text-decoration: none;
}

.eyebrow .dropdown img {
  width: 30px;
  padding-right: 0.5rem;
  position: relative;
  top: -2px;
}

.intro-block p {
  line-height: 2.188rem;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
}

h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

.definitions h4 {
  font-size: 1.25rem;
  font-style: italic;
}

.overview {
  background-color: var(--color-lime-alt);
}

.overview p {
  font-size: 1.5rem;
}

.dashboard-description-section,
.tables-section {
  line-height: 1.563rem;
}

table {
  width: 100%;
  font-family: var(--arial);
  text-align: center;
  table-layout: auto;
}


table thead tr {
  background-color: var(--color-gray-20);
}

table tbody tr {
  border-bottom: .75px solid var(--color-light-gray);
}

table th {
  font-size: 0.875rem;
  text-align: center;
  vertical-align: top;
  padding: 3px 0;
}

table th:first-child {
  padding-left: 6px;
  padding-right: 3px;
}

table th:last-child {
  padding-left: 3px;
  padding-right: 3px;
}

table td {
  font-size: 0.875rem;
  padding: 3px 0;
}

table tbody td:nth-child(5) {
  padding-right: 8px;
}

table tbody td:nth-child(3),
table tbody td:nth-child(5)
{
  /* text-wrap: nowrap; */
}

.table-notes {
  line-height: 1.25rem;
}

.references-items ol {
  padding-left: 16px;
}

.references-items ol li {
  padding-bottom: 1.5rem;
}

.references-items ol li div.indent-block {
  padding-left: 1rem;
}

 /* Start footer -------------------------------------- */
.mcs-footer {
  align-items: center;
  background-color: var(--color-teal);
  color: #fff;
  display: flex;
  font-size: 0.875rem;
  padding: 1rem 0;
  margin-top: auto;
}

.mcs-footer .btn-mcs {
  color: #fff;
}

.btn-mcs.ot-sdk-show-settings {
  padding: 0;
  border: 0;
}

.btn-mcs.ot-sdk-show-settings:hover {
  text-decoration: underline;
}

.mcs-footer-inner {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.mcs-footer-notice {
  font-style: italic;
  margin-bottom: 1.5rem;
}

.mcs-footer .mcs-nav-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.5rem;
  list-style: none;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
}

.mcs-footer .mcs-nav-links li {
  display: flex;
  margin-top: 0;
  width: auto;
}

.mcs-footer .mcs-nav-links .footer-links {
  color: #fff;
  font-size: 0.875rem;
  text-align: left;
}

.mcs-footer .mcs-nav-links a {
  text-decoration: none;
}

.mcs-footer .mcs-nav-links a:hover {
  text-decoration: underline;
}

.mcs-footer .mcs-nav-links .btn {
  font-weight: 400;
}

.footer-copy {
  margin-top: 1rem;
}

.footer-copy p {
  margin-bottom: 0;
}

.mcs-footer-accessibility {
  margin-left: auto;
}

.mcs-footer-accessibility svg {
  max-width: 4.6875rem;
}

.mcs-nav-links .ot-sdk-show-settings {
  padding: 0px !important;
  background: none !important;
  font-family: var(--invention);
  font-size: 14px !important;
  line-height: unset !important;
}

.mcs-nav-links .ot-sdk-show-settings:focus-visible {
  outline-offset: 1px;
  outline: -webkit-focus-ring-color auto 1px;
}

/* End footer   -------------------------------------- */

.black-border {
  border: 1px solid var(--color-black);
}

.powerbi-container {
  min-height: 37vh;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .powerbi-container {
    min-height: 32vh;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .powerbi-container {
    min-height: 40vh;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .powerbi-container {
    min-height: 52vh;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .powerbi-container {
    min-height: 70vh;
  }
}