@font-face {
    font-family: 'Sofia Pro';
    src: url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-Black.woff2') format('woff2'),
        url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face { 
    font-family: 'Sofia Pro';
    src: url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-BlackItalic.woff2') format('woff2'),
        url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-Bold.woff2') format('woff2'),
        url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-ExtraLight.woff2') format('woff2'),
        url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Pro';
    src: url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-Medium.woff2') format('woff2'),
        url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-SemiBold.woff2') format('woff2'),
        url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Pro';
    src: url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-UltraLight.woff2') format('woff2'),
        url('https://wilate.com/wp-content/uploads/2026/06/SofiaPro-UltraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #ecf4fc;
    --ink: #3a5766;
    --bgn: #2c4d5a;
  --grid: rgba(151, 174, 185, 0.28);
  --axis: #a9b6cc;
  --base: rgba(145, 164, 179, 0.62);
  --bar: #aab5cc;
  --box: #365a69;
  --box-dark: #294b59;
  --inks: #ffffff;
  --soft-text: #b9c7dd;
  --orange: #ff7044;
  --red: #ff4b59;
  --gold: #ff9638;
  --green: #27bf68;
    --left-bar: #a8b5cc;
  --left-bar-dark: #95a4be;
    --wilate-bg: #eaf2f8;
  --wilate-ink: #344f60;
  --wilate-left-bar: #a8b5cc;
  --wilate-left-dark: #94a3bd;
  --wilate-orange: #ff7b2c;
  --wilate-axis: #92989d;
  --wilate-zero: #9da5ad;
  --wilate-red: #ee534d;
  --wilate-shadow: rgba(87, 103, 114, 0.24);
}



.page-id-12413 section#ch-wrapper {
    background: transparent !important;
}

.page-id-12413 section#ch-wrapper a {
    color: #242D39 !important;
}
.page-id-12509 section#ch-wrapper {
    background: transparent !important;
}
.page-id-12509 section#ch-wrapper a {
    color: #242D39 !important;
}

.text_saddow{
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 8px 18px rgba(233,92,134,.25),
        0 4px 8px rgba(233,92,134,.15);
}




.pups-text-with-img-content-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -80px;
}
.circle-box-animate {
    overflow: visible;
}
.circle-box-animate svg {
    width: 450px;
    height: auto;
    transform: rotate(180deg);
    transform-origin: center;
    filter: drop-shadow(0px -3px 35px rgb(19 30 35 / 53%));
}
.circle-box-animate svg path {
    fill: none;
    stroke: url(#gradientStroke);
    stroke-width: 120;
    stroke-dasharray: 2240;
    stroke-dashoffset: 2240;
    animation: drawCircle 4s ease-out forwards;
}
.zoom-animate-circle {
    position: absolute;
    z-index: 2;
}
.zoom-animate-circle img {
    animation: zoomIn 4s ease forwards;
    object-fit: cover;
    transform: scale(1.6);
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

.zoomIn {
    animation-name: zoomIn
}



/* new */

 .abr-final-section {
  width: 100%;
  overflow: hidden;
}

.abr-final-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* initial */
.abr-anim-card,
.abr-pop,
.abr-axis-line,
.abr-zero-line,
.abr-dash-line,
.abr-bar-left,
.abr-bar-right {
  opacity: 0;
}

.abr-bar-left {
  transform-box: fill-box;
  transform-origin: right center;
  transform: scaleX(0);
}

.abr-bar-right {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
}

.abr-zero-line {
  transform-box: fill-box;
  transform-origin: top center;
  transform: scaleY(0);
}

/* active animations */
.abr-final-section.is-active .abr-anim-card {
  animation: abrCardIn .55s ease forwards;
}

.abr-final-section.is-active .abr-axis-line {
  animation: abrFade .45s ease forwards .35s;
}

.abr-final-section.is-active .abr-zero-line {
  animation: abrZeroIn .75s ease forwards .45s;
}

.abr-final-section.is-active .abr-bar-left,
.abr-final-section.is-active .abr-bar-right {
  animation: abrBarIn .75s ease forwards .7s;
}

.abr-final-section.is-active .abr-pop {
  animation: abrPopIn .55s ease forwards 1.35s;
}

.abr-final-section.is-active .abr-dash-line {
  animation: abrFade .45s ease forwards 1.55s;
}

@keyframes abrCardIn {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes abrFade {
  to {
    opacity: 1;
  }
}

@keyframes abrZeroIn {
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes abrBarIn {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes abrPopIn {
  from {
    opacity: 0;
    transform: scale(.75);
    transform-origin: center;
  }
  to {
    opacity: 1;
    transform: scale(1);
    transform-origin: center;
  }
}

/* mobile: fit without overlap */
@media (max-width: 767px) {

  .abr-final-wrap {
    min-width: 900px;
  }

  .abr-final-section {
    overflow-x: auto;
  }
}
/*  */


.clinical_wrap_section img {
       transform: scale(1.2);
    transform-box: border-box;
    transform-origin: center;
    margin-left: 0;
}
body .image_wraper img {
    transform: scale(0.6);
}
.clinical_wrap_section .pups-text-with-img-content-right {
    margin-top: 0;
}


/*meanabr-section  */

.meanabr-section {
  width: 100%;
  overflow: hidden;

}

.meanabr-chart {
  position: relative;
    font-family: 'Sofia Pro';
  height: 502px;
  transform-origin: top center;
}

/* titles */
.meanabr-title {
  position: absolute;
  top: 8px;
  font-size: 24px;
  line-height: 1;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateY(-12px);
}

.title-left {
  left: 303px;
}

.title-right {
  left: 531px;
  color: #ff8435;
}

.meanabr-title sup {
  position: relative;
  top: -0.65em;
  font-size: 45%;
}

/* left labels */
.meanabr-labels span {
  position: absolute;
  left: 0;
  width: 185px;
  text-align: right;
  font-size: 19px;
  line-height: 1;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateX(-14px);
}

.meanabr-labels span:nth-child(1) { top: 76px; }
.meanabr-labels span:nth-child(2) { top: 113px; }
.meanabr-labels span:nth-child(3) { top: 151px; }
.meanabr-labels span:nth-child(4) { top: 189px; }
.meanabr-labels span:nth-child(5) { top: 227px; }
.meanabr-labels span:nth-child(6) { top: 265px; }
.meanabr-labels span:nth-child(7) { top: 303px; }
.meanabr-labels span:nth-child(8) { top: 341px; }
.meanabr-labels span:nth-child(9) { top: 379px; }

/* graph */
.meanabr-graph {
    position: absolute;
    left: 188px;
    top: 58px;
    width: 605px;
    height: 354px;
    border-bottom: 3px solid #8d9296;
}

.meanabr-zero {
  position: absolute;
  left: 301px;
  top: 0;
  width: 3px;
  height: 351px;
  background: #8d9296;
}

.meanabr-row {
  position: relative;
  height: 31px;
  margin-bottom: 8px;
}

.meanabr-row i {
  position: absolute;
  top: 5px;
  height: 31px;
  display: block;
  opacity: 0;
  transform: scaleX(0);
}

.meanabr-row .left {
  right: 304px;
  width: var(--w);
  background: #a8b4c8;
  transform-origin: right center;
}

.meanabr-row .right {
  left: 304px;
  width: var(--w);
  background: linear-gradient(90deg, #ef4966 0%, #ff9135 100%);
  transform-origin: left center;
}

.meanabr-row .glow {
  box-shadow: 20px 20px 28px rgba(255, 145, 53, 0.28);
}

/* axis */
.meanabr-axis {
  position: absolute;
  left: 176px;
  top: 429px;
  width: 630px;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  line-height: 1;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateY(8px);
}

.meanabr-axis-title {
  position: absolute;
  left: 432px;
  top: 466px;
  font-size: 22px;
  line-height: 1;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateY(8px);
}

/* percentage */
.meanabr-percent {
  position: absolute;
  left: 722px;
  top: 72px;
  width: 55px;
  display: grid;
  row-gap: 18px;
  text-align: right;
  font-size: 18px;
  line-height: 1;
  font-weight: 700 !important;
}

.meanabr-percent span {
  opacity: 0;
  transform: translateX(14px);
}

.meanabr-percent sup {
  position: relative;
  top: -0.5em;
  font-size: 60%;
}

/* orange separator */
.meanabr-separator {
  position: absolute;
  left: 789px;
  top: 79px;
  width: 2px;
  height: 315px;
  background: #ff9135;
}

/* arrows */
.meanabr-arrow {
  position: absolute;
  width: 68px;
  height: 2px;
  background: #ff9135;
  transform: scaleX(0);
  transform-origin: right center;
  opacity: 0;
}

.meanabr-arrow::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -5px;
  border-right: 11px solid #ff9135;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  opacity: 0;
}

.arrow-1 { left: 812px; top: 120px; }
.arrow-2 { left: 812px; top: 352px; }
.arrow-3 { left: 812px; top: 392px; }

/* notes */
.meanabr-note {
  position: absolute;
  left: 900px;
  margin: 0;
  font-size: 16px !important;
  line-height: 1.25;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateX(18px);
}

.note-1 { top: 96px; }
.note-2 { top: 316px; }
.note-3 { top: 378px; }

.meanabr-main-note {
  position: absolute;
  left: 815px;
  top: 188px;
  font-size: 25px !important;
  line-height: 1.05;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateX(18px);
}

/* animations */
.meanabr-chart.is-animated .meanabr-title {
  animation: fadeDown .55s ease forwards;
}

.meanabr-chart.is-animated .meanabr-labels span {
  animation: labelIn .45s ease forwards;
}

.meanabr-chart.is-animated .meanabr-labels span:nth-child(1) { animation-delay: .10s; }
.meanabr-chart.is-animated .meanabr-labels span:nth-child(2) { animation-delay: .16s; }
.meanabr-chart.is-animated .meanabr-labels span:nth-child(3) { animation-delay: .22s; }
.meanabr-chart.is-animated .meanabr-labels span:nth-child(4) { animation-delay: .28s; }
.meanabr-chart.is-animated .meanabr-labels span:nth-child(5) { animation-delay: .34s; }
.meanabr-chart.is-animated .meanabr-labels span:nth-child(6) { animation-delay: .40s; }
.meanabr-chart.is-animated .meanabr-labels span:nth-child(7) { animation-delay: .46s; }
.meanabr-chart.is-animated .meanabr-labels span:nth-child(8) { animation-delay: .52s; }
.meanabr-chart.is-animated .meanabr-labels span:nth-child(9) { animation-delay: .58s; }

.meanabr-chart.is-animated .meanabr-row i {
  animation: barGrow .8s cubic-bezier(.2,.8,.2,1) forwards;
}

.meanabr-chart.is-animated .meanabr-row:nth-child(1) i { animation-delay: .35s; }
.meanabr-chart.is-animated .meanabr-row:nth-child(2) i { animation-delay: .43s; }
.meanabr-chart.is-animated .meanabr-row:nth-child(3) i { animation-delay: .51s; }
.meanabr-chart.is-animated .meanabr-row:nth-child(4) i { animation-delay: .59s; }
.meanabr-chart.is-animated .meanabr-row:nth-child(5) i { animation-delay: .67s; }
.meanabr-chart.is-animated .meanabr-row:nth-child(6) i { animation-delay: .75s; }
.meanabr-chart.is-animated .meanabr-row:nth-child(7) i { animation-delay: .83s; }
.meanabr-chart.is-animated .meanabr-row:nth-child(8) i { animation-delay: .91s; }
.meanabr-chart.is-animated .meanabr-row:nth-child(9) i { animation-delay: .99s; }

.meanabr-chart.is-animated .meanabr-axis,
.meanabr-chart.is-animated .meanabr-axis-title {
  animation: fadeUp .45s ease forwards 1.08s;
}

.meanabr-chart.is-animated .meanabr-percent span {
  animation: percentIn .45s ease forwards;
}

.meanabr-chart.is-animated .meanabr-percent span:nth-child(1) { animation-delay: 1.05s; }
.meanabr-chart.is-animated .meanabr-percent span:nth-child(2) { animation-delay: 1.12s; }
.meanabr-chart.is-animated .meanabr-percent span:nth-child(3) { animation-delay: 1.19s; }
.meanabr-chart.is-animated .meanabr-percent span:nth-child(4) { animation-delay: 1.26s; }
.meanabr-chart.is-animated .meanabr-percent span:nth-child(5) { animation-delay: 1.33s; }
.meanabr-chart.is-animated .meanabr-percent span:nth-child(6) { animation-delay: 1.40s; }
.meanabr-chart.is-animated .meanabr-percent span:nth-child(7) { animation-delay: 1.47s; }
.meanabr-chart.is-animated .meanabr-percent span:nth-child(8) { animation-delay: 1.54s; }
.meanabr-chart.is-animated .meanabr-percent span:nth-child(9) { animation-delay: 1.61s; }

.meanabr-chart.is-animated .meanabr-arrow {
  animation: arrowDraw .5s ease forwards;
}

.meanabr-chart.is-animated .arrow-1 { animation-delay: 1.3s; }
.meanabr-chart.is-animated .arrow-2 { animation-delay: 1.48s; }
.meanabr-chart.is-animated .arrow-3 { animation-delay: 1.62s; }

.meanabr-chart.is-animated .meanabr-arrow::before {
  animation: fadeOnly .2s ease forwards;
  animation-delay: inherit;
}

.meanabr-chart.is-animated .meanabr-note,
.meanabr-chart.is-animated .meanabr-main-note {
  animation: noteIn .5s ease forwards;
}

.meanabr-chart.is-animated .note-1 { animation-delay: 1.55s; }
.meanabr-chart.is-animated .meanabr-main-note { animation-delay: 1.65s; }
.meanabr-chart.is-animated .note-2 { animation-delay: 1.75s; }
.meanabr-chart.is-animated .note-3 { animation-delay: 1.85s; }

@keyframes fadeDown {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes labelIn {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes barGrow {
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes percentIn {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes arrowDraw {
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes fadeOnly {
  to { opacity: 1; }
}

@keyframes noteIn {
  to { opacity: 1; transform: translateX(0); }
}

/* responsive */
@media (max-width: 1247px) {
  .meanabr-section {
    height: calc(502px * (100vw / 1247));
  }

  .meanabr-chart {
    transform: scale(calc(100vw / 1247));
  }
}

@media (max-width: 767px) {
  .meanabr-section {
    height: 502px;
    overflow-x: auto;
  }

  .meanabr-chart {
    transform: none;
  }
}

/*  ivr-svg-section */

.ivr-svg-section {
  width: 100%;
  overflow: hidden;
}

.ivr-svg-chart {
  width: 100%;
  height: auto;
  display: block;
}

.ivr-grid line {
  stroke: #c9d3dc;
  stroke-width: 1;
  opacity: 0;
}

.ivr-axis {
  stroke: #c2cdd6;
  stroke-width: 1.2;
  opacity: 0;
}

.ivr-labels,
.ivr-bottom-title,
.ivr-y-title,
.ivr-legend {
  fill: #304f60;
  font-weight: 700 !important;
  opacity: 0;
}

.ivr-labels {
  font-size: 12px;
    font-weight: 700 !important;
}

.ivr-x-labels {
  font-size: 10px;
    font-weight: 700 !important;
}

.ivr-bottom-title,
.ivr-y-title {
  font-size: 12px;
    font-weight: 700 !important;
}

.ivr-legend {
  font-size: 12px;
  font-weight: 700 !important;
}

.legend-teal {
  stroke: #2bb3c1;
  stroke-width: 2;
}

.legend-orange {
  stroke: #ff8b34;
  stroke-width: 2;
}

.ivr-wave {
  fill: none;
  stroke: rgba(80, 86, 92, 0.22);
  stroke-width: 11;
  filter: url(#softWave);
  opacity: 0;
}

.ivr-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}

.ivr-line-teal {
  stroke: #2bb3c1;
}

.ivr-line-orange {
  stroke: #ff8b34;
}

.ivr-markers rect,
.ivr-markers circle {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.teal-markers rect {
  fill: #2bb3c1;
}

.orange-markers circle {
  fill: #ff8b34;
}

.ivr-badges {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.7);
}

.ivr-badges text {
  fill: #fff;
  font-size: 13px;
  font-weight: 700 !important;
}

/* ACTIVE ANIMATION */
.ivr-svg-section.is-active .ivr-grid line,
.ivr-svg-section.is-active .ivr-axis,
.ivr-svg-section.is-active .ivr-wave,
.ivr-svg-section.is-active .ivr-labels,
.ivr-svg-section.is-active .ivr-bottom-title,
.ivr-svg-section.is-active .ivr-y-title,
.ivr-svg-section.is-active .ivr-legend {
  animation: ivrFade .8s ease forwards;
}

.ivr-svg-section.is-active .ivr-line {
  animation: ivrDraw 3.2s cubic-bezier(.22,.61,.36,1) forwards .4s;
}

.ivr-svg-section.is-active .ivr-markers rect,
.ivr-svg-section.is-active .ivr-markers circle {
  animation: ivrPop .38s ease forwards;
}

.ivr-svg-section.is-active .ivr-markers *:nth-child(1) { animation-delay: 1.10s; }
.ivr-svg-section.is-active .ivr-markers *:nth-child(2) { animation-delay: 1.45s; }
.ivr-svg-section.is-active .ivr-markers *:nth-child(3) { animation-delay: 1.80s; }
.ivr-svg-section.is-active .ivr-markers *:nth-child(4) { animation-delay: 2.15s; }
.ivr-svg-section.is-active .ivr-markers *:nth-child(5) { animation-delay: 2.50s; }
.ivr-svg-section.is-active .ivr-markers *:nth-child(6) { animation-delay: 2.85s; }
.ivr-svg-section.is-active .ivr-markers *:nth-child(7) { animation-delay: 3.20s; }

.ivr-svg-section.is-active .ivr-badges {
  animation: ivrBadge .75s ease forwards 2.8s;
}

@keyframes ivrFade {
  to {
    opacity: 1;
  }
}

@keyframes ivrDraw {
  from {
    stroke-dashoffset: 600;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ivrPop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ivrBadge {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 600px) {
  .ivr-svg-wrap {
    min-width: 520px;
  }

  .ivr-svg-section {
    overflow-x: auto;
  }
}


/* snbc-section css */
.nbc-section {
  width: 100%;
  overflow: hidden;
 font-family: 'Sofia Pro';
}

.nbc-wrap {
  width: 100%;
}

.nbc-svg {
  width: 100%;
  height: auto;
  display: block;
}

.nbc-grid line {
  stroke: rgba(255,255,255,.13);
  stroke-width: 1;
  opacity: 0;
}

.nbc-axis line {
  stroke: rgba(255,255,255,.25);
  stroke-width: 2;
  opacity: 0;
}

.nbc-y-labels {
  fill: #fff;
  font-size: 14px;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateX(-18px);
  filter: blur(4px);
}

.cat {
  fill: #fff;
  font-size: 16px;
  font-weight: 700 !important;
}

.value {
  font-size: 20px;
  font-weight: 900;
}

.teal { fill: #24B6C7; }
.orange { fill: #FF7145; }
.lavender { fill: #A9B8D6; }

.n {
  fill: #fff;
  font-size: 13px;
  font-weight: 700 !important;
}

.nbc-label {
  opacity: 0;
  transform: translateX(24px) scale(.9);
  filter: blur(7px);
}

.nbc-trauma {
  transform: translateX(-24px) scale(.9);
}

.nbc-bar-clip {
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  filter: blur(3px);
}

.seg {
  opacity: 0;
  filter: blur(5px);
}

/* Premium slow animation */
.nbc-section.is-active .nbc-grid line,
.nbc-section.is-active .nbc-axis line {
  animation: nbcFade 1.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nbc-section.is-active .nbc-y-labels {
  animation: nbcSlideIn 2s cubic-bezier(0.22, 1, 0.36, 1) forwards .35s;
}

.nbc-section.is-active .nbc-bar-clip {
  animation: nbcBarGrow 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards .65s;
}

.nbc-section.is-active .seg-bottom {
  animation: nbcSegmentReveal 1.9s cubic-bezier(0.22, 1, 0.36, 1) forwards .85s;
}

.nbc-section.is-active .seg-mid {
  animation: nbcSegmentReveal 1.9s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.25s;
}

.nbc-section.is-active .seg-top {
  animation: nbcSegmentReveal 1.9s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.55s;
}

.nbc-section.is-active .nbc-label {
  animation: nbcLabelPremium 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nbc-section.is-active .nbc-trauma {
  animation-delay: 1.55s;
}

.nbc-section.is-active .nbc-allergic {
  animation-delay: 1.85s;
}

.nbc-section.is-active .nbc-spont {
  animation-delay: 2.05s;
}

@keyframes nbcFade {
  from {
    opacity: 0;
    filter: blur(2px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes nbcSlideIn {
  from {
    opacity: 0;
    transform: translateX(-18px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes nbcBarGrow {
  from {
    transform: scaleY(0);
    filter: blur(3px);
  }
  to {
    transform: scaleY(1);
    filter: blur(0);
  }
}

@keyframes nbcSegmentReveal {
  from {
    opacity: 0;
    filter: blur(5px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes nbcLabelPremium {
  from {
    opacity: 0;
    transform: translateX(24px) scale(.9);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 480px) {
  .nbc-wrap {
    min-width: 424px;
  }

  .nbc-section {
    overflow-x: auto;
  }
}


/* noseabr-section */


 .noseabr-section {
  width: 100%;
  overflow: hidden;
   font-family: 'Sofia Pro';
}
.noseabr-wrap {
  width: 100%;
  max-width: 775px;
  margin: 0 auto;
}

.noseabr-svg {
  width: 100%;
  height: auto;
  display: block;
}

.nose-bg {
  opacity: 0;
}

.nose-head {
  fill: #365262;
  font-size: 22px;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateY(-12px);
}

.nose-orange-text {
  fill: #ff8436;
}

.nose-row-labels {
  fill: #365262;
  font-size: 17px;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateX(-16px);
}

.nose-zero {
  stroke: #9ea4a9;
  stroke-width: 3;
  opacity: 0;
  stroke-dasharray: 330;
  stroke-dashoffset: 330;
}

.nose-axis {
  stroke: #9b9b9b;
  stroke-width: 3;
  opacity: 0;
  stroke-dasharray: 540;
  stroke-dashoffset: 540;
}

.bar-left {
  fill: #A8B4CB;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: right center;
  transform: scaleX(0);
}

.bar-right {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
}

.glow {
  filter: url(#orangeGlow);
}

.nose-values-left,
.nose-values-right,
.nose-reduction,
.nose-axis-labels,
.mean-title,
.vertical-title,
.orange-rule {
  opacity: 0;
}

.nose-values-left,
.nose-values-right,
.nose-reduction {
  fill: #365262;
  font-size: 16px;
  font-weight: 700 !important;
}

.nose-values-left {
  transform: translateY(10px);
}

.nose-values-right {
  transform: translateY(10px);
}

.nose-reduction {
  font-size: 17px;
  transform: translateX(16px);
}

.orange-rule {
  stroke: #ff8436;
  stroke-width: 2;
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
}

.vertical-title {
  fill: #365262;
  font-size: 22px;
  font-weight: 700 !important;
  letter-spacing: .2px;

}

.nose-axis-labels {
  fill: #365262;
  font-size: 18px;
  font-weight: 700 !important;
  transform: translateY(8px);
}

.mean-title {
  fill: #365262;
  font-size: 20px;
  font-weight: 700 !important;
  transform: translateY(8px);
}

.nose-badge {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.75);
}

.nose-badge text {
  fill: #fff;
  font-size: 13px;
  font-weight: 700 !important;
}

/* active animations */
.noseabr-section.is-active .nose-bg {
  animation: noseFade 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.noseabr-section.is-active .nose-zero {
  animation: noseLineDraw 2s cubic-bezier(0.22, 1, 0.36, 1) forwards .25s;
}

.noseabr-section.is-active .nose-axis {
  animation: noseLineDraw 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards .35s;
}

.noseabr-section.is-active .nose-head,
.noseabr-section.is-active .nose-row-labels {
  animation: noseSlideFade 1.9s cubic-bezier(0.22, 1, 0.36, 1) forwards .45s;
}

.noseabr-section.is-active .bar-left {
  animation: noseBarGrow 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards .7s;
}

.noseabr-section.is-active .bar-right {
  animation: noseBarGrow 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards .95s;
}

.noseabr-section.is-active .nose-values-left,
.noseabr-section.is-active .nose-values-right {
  animation: noseValueIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.35s;
}

.noseabr-section.is-active .nose-reduction {
  animation: noseReductionIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.55s;
}

.noseabr-section.is-active .orange-rule {
  animation: noseLineDraw 2s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.65s;
}

.noseabr-section.is-active .vertical-title {
  animation: noseFade 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.85s;
}

.noseabr-section.is-active .nose-axis-labels,
.noseabr-section.is-active .mean-title {
  animation: noseValueIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.25s;
}

.noseabr-section.is-active .nose-badge {
  animation: noseBadgeIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.noseabr-section.is-active .badge-row-2 {
  animation-delay: 1.65s;
}

.noseabr-section.is-active .badge-row-3 {
  animation-delay: 1.85s;
}

@keyframes noseFade {
  to {
    opacity: 1;
  }
}

@keyframes noseSlideFade {
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}

@keyframes noseLineDraw {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes noseBarGrow {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes noseValueIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes noseReductionIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes noseBadgeIn {
  from {
    opacity: 0;
    transform: scale(.75);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@media (max-width: 768px) {
  .noseabr-wrap {
    min-width: 720px;
  }

  .noseabr-section {
    overflow-x: auto;
  }
}


/* Premium animation */

.abrtype-section {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Sofia Pro', Arial, sans-serif;
  background: #edf2f5;
}

.abrtype-svg {
  width: 810px;
  display: block;
}

/* initial */
.abrtype-bg {
  opacity: 0;
}

.abrtype-head {
  fill: #365262;
  font-size: 13px;
    font-weight: 700 !important;
  opacity: 0;
  transform: translateY(-10px);
}

.abrtype-orange-text {
  fill: #ff8436;
}

.abrtype-row-labels {
  fill: #365262;
  font-size: 12px;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateX(-14px);
}

.abrtype-zero {
  stroke: #9ea4a9;
  stroke-width: 2.5;
  opacity: 0;
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
}

.abrtype-axis {
  stroke: #9b9b9b;
  stroke-width: 2.5;
  opacity: 0;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

.abrtype-left-bar {
  fill: #a8b4cb;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: right center;
  transform: scaleX(0);
}

.abrtype-right-bar {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
}

.abrtype-glow {
  filter: url(#abrtypeGlow);
}

.abrtype-left-values,
.abrtype-right-values,
.abrtype-reduction,
.abrtype-axis-labels,
.abrtype-mean-title,
.abrtype-vertical-title,
.abrtype-orange-rule {
  opacity: 0;
}

.abrtype-left-values,
.abrtype-right-values,
.abrtype-reduction {
  fill: #365262;
  font-size: 11px;
  font-weight: 700 !important;
}

.abrtype-left-values,
.abrtype-right-values,
.abrtype-axis-labels,
.abrtype-mean-title {
  transform: translateY(8px);
}

.abrtype-reduction {
  font-size: 11px;
  transform: translateX(12px);
    font-weight: 700 !important;
}

.abrtype-orange-rule {
  stroke: #ff8436;
  stroke-width: 1.5;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
}

.abrtype-vertical-title {
  fill: #365262;
  font-size: 15px;
  font-weight: 700 !important;
}

.abrtype-axis-labels {
  fill: #365262;
  font-size: 13px;
  font-weight: 700 !important;
  line-height: 1.2;
}

.abrtype-mean-title {
  fill: #365262;
  font-size: 14px;
  font-weight: 700 !important;
}

.abrtype-badge {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.7);
}

.abrtype-badge text {
  fill: #fff;
  font-size: 11px;
  font-weight: 700 !important;
}

/* Premium animation */
.abrtype-section.is-active .abrtype-bg {
  animation: abrtypeFade 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.abrtype-section.is-active .abrtype-zero {
  animation: abrtypeLineDraw 2s cubic-bezier(0.22, 1, 0.36, 1) forwards .25s;
}

.abrtype-section.is-active .abrtype-axis {
  animation: abrtypeLineDraw 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards .35s;
}

.abrtype-section.is-active .abrtype-head,
.abrtype-section.is-active .abrtype-row-labels {
  animation: abrtypeSlideFade 1.9s cubic-bezier(0.22, 1, 0.36, 1) forwards .45s;
}

.abrtype-section.is-active .abrtype-left-bar {
  animation: abrtypeBarGrow 2.25s cubic-bezier(0.22, 1, 0.36, 1) forwards .7s;
}

.abrtype-section.is-active .abrtype-right-bar {
  animation: abrtypeBarGrow 2.25s cubic-bezier(0.22, 1, 0.36, 1) forwards .95s;
}

.abrtype-section.is-active .abrtype-left-values,
.abrtype-section.is-active .abrtype-right-values {
  animation: abrtypeValueIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.35s;
}

.abrtype-section.is-active .abrtype-reduction {
  animation: abrtypeReductionIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.55s;
}

.abrtype-section.is-active .abrtype-orange-rule {
  animation: abrtypeLineDraw 2s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.65s;
}

.abrtype-section.is-active .abrtype-vertical-title {
  animation: abrtypeFade 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.85s;
}

.abrtype-section.is-active .abrtype-axis-labels,
.abrtype-section.is-active .abrtype-mean-title {
  animation: abrtypeValueIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.25s;
}

.abrtype-section.is-active .abrtype-badge {
  animation: abrtypeBadgeIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.abrtype-section.is-active .abrtype-badge-1 { animation-delay: 1.65s; }
.abrtype-section.is-active .abrtype-badge-2 { animation-delay: 1.85s; }
.abrtype-section.is-active .abrtype-badge-3 { animation-delay: 1.55s; }

@keyframes abrtypeFade {
  to { opacity: 1; }
}

@keyframes abrtypeSlideFade {
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}

@keyframes abrtypeLineDraw {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes abrtypeBarGrow {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes abrtypeValueIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes abrtypeReductionIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes abrtypeBadgeIn {
  from {
    opacity: 0;
    transform: scale(.7);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@media (max-width: 600px) {
  .abrtype-wrap {
    min-width: 526px;
  }

  .abrtype-section {
    overflow-x: auto;
  }
}

@media (max-width: 600px) {
  .noseabr-wrap {
    min-width: 526px;
  }

  .noseabr-section {
    overflow-x: auto;
  }
}

/* end of CSS */
/* nose-abr-section */

.nose-abr-section {
  width: 100%;
  overflow: hidden;
 font-family: 'Sofia Pro';
}

.nose-abr-container {
  width: 100%;
  max-width: 775px;
  margin: 0 auto;
}

.nose-abr-svg {
  width: 100%;
  height: auto;
  display: block;
}

.nose-abr-background {
  fill: #edf2f5;
  opacity: 0;
}

.nose-abr-heading {
  fill: #365262;
  font-size: 13px;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateY(-10px);
}

.nose-abr-heading-prophylaxis {
  fill: #ff8436;
}

.nose-abr-row-labels {
  fill: #365262;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-14px);
}

.nose-abr-axis-center {
  stroke: #9ea4a9;
  stroke-width: 2.5;
  opacity: 0;
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
}

.nose-abr-axis-bottom {
  stroke: #9b9b9b;
  stroke-width: 2.5;
  opacity: 0;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

.nose-abr-bar-left {
  fill: #a8b4cb;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: right center;
  transform: scaleX(0);
}

.nose-abr-bar-right {
  fill: url("#nose-abr-gradient-prophylaxis");
  opacity: 0;
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
}

.nose-abr-bar-glow {
  filter: url("#nose-abr-orange-glow");
}

.nose-abr-value-left,
.nose-abr-value-right,
.nose-abr-value-reduction,
.nose-abr-axis-labels,
.nose-abr-axis-title,
.nose-abr-reduction-title,
.nose-abr-reduction-line {
  opacity: 0;
}

.nose-abr-value-left,
.nose-abr-value-right,
.nose-abr-value-reduction {
  fill: #365262;
  font-size: 11px;
  font-weight: 700;
}

.nose-abr-value-left,
.nose-abr-value-right,
.nose-abr-axis-labels,
.nose-abr-axis-title {
  transform: translateY(8px);
}

.nose-abr-value-reduction {
  font-size: 11px;
  transform: translateX(12px);
}

.nose-abr-reduction-line {
  stroke: #ff8436;
  stroke-width: 1.5;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
}

.nose-abr-reduction-title {
  fill: #365262;
  font-size: 15px;
  font-weight: 700 !important;
}

.nose-abr-axis-labels {
  fill: #365262;
  font-size: 13px;
  font-weight: 700;
}

.nose-abr-axis-title {
  fill: #365262;
  font-size: 14px;
  font-weight: 700 !important;
}

/* Animation */
.nose-abr-section.nose-abr-visible .nose-abr-background {
  animation: noseAbrFade 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nose-abr-section.nose-abr-visible .nose-abr-axis-center {
  animation: noseAbrLineDraw 2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.25s;
}

.nose-abr-section.nose-abr-visible .nose-abr-axis-bottom {
  animation: noseAbrLineDraw 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.35s;
}

.nose-abr-section.nose-abr-visible .nose-abr-heading,
.nose-abr-section.nose-abr-visible .nose-abr-row-labels {
  animation: noseAbrSlideFade 1.9s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.45s;
}

.nose-abr-section.nose-abr-visible .nose-abr-bar-left {
  animation: noseAbrBarGrow 2.25s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.7s;
}

.nose-abr-section.nose-abr-visible .nose-abr-bar-right {
  animation: noseAbrBarGrow 2.25s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.95s;
}

.nose-abr-section.nose-abr-visible .nose-abr-value-left,
.nose-abr-section.nose-abr-visible .nose-abr-value-right {
  animation: noseAbrValueIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.35s;
}

.nose-abr-section.nose-abr-visible .nose-abr-value-reduction {
  animation: noseAbrReductionIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.55s;
}

.nose-abr-section.nose-abr-visible .nose-abr-reduction-line {
  animation: noseAbrLineDraw 2s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.65s;
}

.nose-abr-section.nose-abr-visible .nose-abr-reduction-title {
  animation: noseAbrFade 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.85s;
}

.nose-abr-section.nose-abr-visible .nose-abr-axis-labels,
.nose-abr-section.nose-abr-visible .nose-abr-axis-title {
  animation: noseAbrValueIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.25s;
}

@keyframes noseAbrFade {
  to {
    opacity: 1;
  }
}

@keyframes noseAbrSlideFade {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes noseAbrLineDraw {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes noseAbrBarGrow {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes noseAbrValueIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes noseAbrReductionIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 600px) {
  .nose-abr-container {
    min-width: 526px;
  }

  .nose-abr-section {
    overflow-x: auto;
  }
}

/* wilate-abr-section */
.wilate-abr-section {
  width: 100%;
  overflow: hidden;
 font-family: 'Sofia Pro';
}

.wilate-abr-container {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
}

.wilate-abr-svg {
  width: 100%;
  height: auto;
  display: block;
}

.wilate-abr-chart-background {
  fill: #edf2f5;
  opacity: 0;
}

.wilate-abr-header {
  fill: #365262;
  font-size: 22px;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateY(-12px);
}

.wilate-abr-heading-prophylaxis {
  fill: #ff8436;
}

.wilate-abr-row {
  fill: #365262;
  font-size: 18px;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateX(-18px);
}

.wilate-abr-axis-center {
  stroke: #9da3a8;
  stroke-width: 3;
  opacity: 0;
  stroke-dasharray: 370;
  stroke-dashoffset: 370;
}

.wilate-abr-axis-bottom {
  stroke: #9b9b9b;
  stroke-width: 3;
  opacity: 0;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}

.wilate-abr-bar-demand {
  fill: #a8b4cb;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: right center;
  transform: scaleX(0);
}

.wilate-abr-bar-prophylaxis {
  fill: url("#wilate-abr-gradient-fill");
  opacity: 0;
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
}

.wilate-abr-bar-glow {
  filter: url("#wilate-abr-bar-shadow");
}

.wilate-abr-value-demand,
.wilate-abr-value-prophylaxis,
.wilate-abr-value-reduction,
.wilate-abr-axis-label,
.wilate-abr-axis-title,
.wilate-abr-reduction-title,
.wilate-abr-reduction-line {
  opacity: 0;
}

.wilate-abr-value-demand,
.wilate-abr-value-prophylaxis,
.wilate-abr-value-reduction {
  fill: #365262;
  font-size: 17px;
  font-weight: 700 !important;
}

.wilate-abr-value-demand,
.wilate-abr-value-prophylaxis,
.wilate-abr-axis-label,
.wilate-abr-axis-title {
  transform: translateY(10px);
}

.wilate-abr-value-reduction {
  font-size: 17px;
  transform: translateX(16px);
}

.wilate-abr-reduction-line {
  stroke: #ff8436;
  stroke-width: 2;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

.wilate-abr-reduction-title {
  fill: #365262;
  font-size: 22px;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
}

.wilate-abr-axis-label {
  fill: #365262;
  font-size: 19px;
  font-weight: 700 !important;
}

.wilate-abr-axis-title {
  fill: #365262;
  font-size: 21px;
  font-weight: 700 !important;
}

/* Animation */
.wilate-abr-section.wilate-abr-visible .wilate-abr-chart-background {
  animation: wilateAbrFade 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.wilate-abr-section.wilate-abr-visible .wilate-abr-axis-center {
  animation: wilateAbrLineDraw 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.25s;
}

.wilate-abr-section.wilate-abr-visible .wilate-abr-axis-bottom {
  animation: wilateAbrLineDraw 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.35s;
}

.wilate-abr-section.wilate-abr-visible .wilate-abr-header,
.wilate-abr-section.wilate-abr-visible .wilate-abr-row {
  animation: wilateAbrSlideFade 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.45s;
}

.wilate-abr-section.wilate-abr-visible .wilate-abr-bar-demand {
  animation: wilateAbrBarGrow 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.75s;
}

.wilate-abr-section.wilate-abr-visible .wilate-abr-bar-prophylaxis {
  animation: wilateAbrBarGrow 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards 1s;
}

.wilate-abr-section.wilate-abr-visible .wilate-abr-value-demand,
.wilate-abr-section.wilate-abr-visible .wilate-abr-value-prophylaxis {
  animation: wilateAbrValueIn 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.45s;
}

.wilate-abr-section.wilate-abr-visible .wilate-abr-value-reduction {
  animation: wilateAbrReductionIn 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.65s;
}

.wilate-abr-section.wilate-abr-visible .wilate-abr-reduction-line {
  animation: wilateAbrLineDraw 2.3s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.75s;
}

.wilate-abr-section.wilate-abr-visible .wilate-abr-reduction-title {
  animation: wilateAbrFade 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.95s;
}

.wilate-abr-section.wilate-abr-visible .wilate-abr-axis-label,
.wilate-abr-section.wilate-abr-visible .wilate-abr-axis-title {
  animation: wilateAbrValueIn 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.35s;
}

@keyframes wilateAbrFade {
  to {
    opacity: 1;
  }
}

@keyframes wilateAbrSlideFade {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes wilateAbrLineDraw {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes wilateAbrBarGrow {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes wilateAbrValueIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wilateAbrReductionIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 780px) {
  .wilate-abr-container {
    min-width: 780px;
  }

  .wilate-abr-section {
    overflow-x: auto;
  }
}

/*   */
.abr-outcome-section {
  width: 100%;
  overflow: hidden;
}

.abr-outcome-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.abr-outcome-svg {
  width: 100%;
  height: auto;
  display: block;
}

.abr-outcome-chart-background,
.abr-outcome-grid-line,
.abr-outcome-axis-line,
.abr-outcome-axis-label,
.abr-outcome-axis-title,
.abr-outcome-legend,
.abr-outcome-category-title,
.abr-outcome-bar-range {
  opacity: 0;
}

.abr-outcome-grid-line {
  stroke: #cbd5de;
  stroke-width: 1;
}

.abr-outcome-axis-line {
  stroke: #cbd5de;
  stroke-width: 1.5;
}

.abr-outcome-axis-label,
.abr-outcome-axis-title,
.abr-outcome-legend,
.abr-outcome-category-title,
.abr-outcome-bar-range {
  fill: #304f60;
  font-weight: 700 !important;
}

.abr-outcome-axis-label { font-size: 11px; }
.abr-outcome-axis-title { font-size: 11px; }
.abr-outcome-legend { font-size: 8px; }
.abr-outcome-category-title { font-size: 11px; }
.abr-outcome-bar-range { font-size: 11px; }

.abr-outcome-legend-demand {
  fill: #a9b5cc;
}

.abr-outcome-legend-prophylaxis {
  fill: #ff6749;
}

.abr-outcome-bar-demand {
  fill: #a8b4cc;
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
}

.abr-outcome-bar-prophylaxis {
  fill: url("#abr-outcome-prophylaxis-gradient");
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  filter: url("#abr-outcome-soft-shadow");
}

.abr-outcome-card {
  fill: #f4fbff;
  filter: url("#abr-outcome-soft-shadow");
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(12px);
}

.abr-outcome-card-value {
  fill: #a8b4cc;
  font-size: 15px;
  font-weight: 700 !important;
  opacity: 0;
}

.abr-outcome-card-value-prophylaxis {
  fill: #ff6749;
}

.abr-outcome-badge-circle {
  fill: url("#abr-outcome-badge-gradient");
  stroke: #ffffff;
  stroke-width: 5;
  filter: url("#abr-outcome-badge-shadow");
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.72);
}

.abr-outcome-badge-text {
  fill: #fff;
  font-size: 16px;
  font-weight: 900;
  opacity: 0;
}

.abr-outcome-connector-path {
  fill: none;
  stroke: #a8b4cc;
  stroke-width: 2;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  opacity: 0;
}

/* active animation */
.abr-outcome-section.abr-outcome-visible .abr-outcome-chart-background {
  animation: abrOutcomeFade 2s cubic-bezier(.22,1,.36,1) forwards;
}

.abr-outcome-section.abr-outcome-visible .abr-outcome-grid-line,
.abr-outcome-section.abr-outcome-visible .abr-outcome-axis-line,
.abr-outcome-section.abr-outcome-visible .abr-outcome-axis-label,
.abr-outcome-section.abr-outcome-visible .abr-outcome-axis-title,
.abr-outcome-section.abr-outcome-visible .abr-outcome-legend,
.abr-outcome-section.abr-outcome-visible .abr-outcome-category-title,
.abr-outcome-section.abr-outcome-visible .abr-outcome-bar-range {
  animation: abrOutcomeFade 2s cubic-bezier(.22,1,.36,1) forwards .3s;
}

.abr-outcome-section.abr-outcome-visible .abr-outcome-bar-demand {
  animation: abrOutcomeBarGrow 2.4s cubic-bezier(.22,1,.36,1) forwards .55s;
}

.abr-outcome-section.abr-outcome-visible .abr-outcome-bar-prophylaxis {
  animation: abrOutcomeBarGrow 2.4s cubic-bezier(.22,1,.36,1) forwards .85s;
}

.abr-outcome-section.abr-outcome-visible .abr-outcome-card {
  animation: abrOutcomeCardIn 2s cubic-bezier(.22,1,.36,1) forwards 1.15s;
}

.abr-outcome-section.abr-outcome-visible .abr-outcome-card-value {
  animation: abrOutcomeFade 1.8s cubic-bezier(.22,1,.36,1) forwards 1.35s;
}

.abr-outcome-section.abr-outcome-visible .abr-outcome-connector-path {
  animation: abrOutcomeArrowDraw 2.3s cubic-bezier(.22,1,.36,1) forwards 1.2s;
}

.abr-outcome-section.abr-outcome-visible .abr-outcome-badge-circle {
  animation: abrOutcomeBadgeIn 1.8s cubic-bezier(.22,1,.36,1) forwards 1.55s;
}

.abr-outcome-section.abr-outcome-visible .abr-outcome-badge-text {
  animation: abrOutcomeFade 1.4s cubic-bezier(.22,1,.36,1) forwards 1.8s;
}

@keyframes abrOutcomeFade {
  to { opacity: 1; }
}

@keyframes abrOutcomeBarGrow {
  to { transform: scaleY(1); }
}

@keyframes abrOutcomeCardIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes abrOutcomeArrowDraw {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes abrOutcomeBadgeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 631px) {
  .abr-outcome-container {
    min-width: 631px;
  }

  .abr-outcome-section {
    overflow-x: auto;
  }
}
/*  abr-outcome-section */

/*  bleed-reduction-section */
.bleed-reduction-section {
  width: 100%;
  overflow: hidden;
}

.bleed-reduction-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.bleed-reduction-svg {
  width: 100%;
  height: auto;
  display: block;
}

.bleed-reduction-header {
  fill: #365262;
  font-size: 17px;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateY(-12px);
}

.bleed-reduction-heading-prophylaxis {
  fill: #ff8436;
}

.bleed-reduction-center-line {
  stroke: #9da3a8;
  stroke-width: 3;
  opacity: 0;
  stroke-dasharray: 345;
  stroke-dashoffset: 345;
}

.bleed-reduction-axis {
  stroke: #9b9b9b;
  stroke-width: 2.5;
  opacity: 0;
  stroke-dasharray: 465;
  stroke-dashoffset: 465;
}

.bleed-reduction-divider-line {
  stroke: #ff8436;
  stroke-width: 1.5;
  opacity: 0;
  stroke-dasharray: 330;
  stroke-dashoffset: 330;
}

.bleed-reduction-group-title {
  fill: #365262;
  font-size: 17px;
  font-weight: 700 !important;
  opacity: 0;
  transform: translateX(-16px);
}

.bleed-reduction-bar-demand {
  fill: #a8b4cb;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: right center;
  transform: scaleX(0);
}

.bleed-reduction-bar-prophylaxis {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
}

.bleed-reduction-gradient-fill {
  fill: url("#bleed-reduction-gradient-fill");
}

.bleed-reduction-bar-shadow {
  filter: url("#bleed-reduction-bar-shadow");
}

.bleed-reduction-value-demand,
.bleed-reduction-value-prophylaxis,
.bleed-reduction-percent,
.bleed-reduction-axis-label,
.bleed-reduction-axis-title,
.bleed-reduction-summary-title {
  fill: #365262;
  font-weight: 700 !important;
  opacity: 0;
}

.bleed-reduction-value-demand,
.bleed-reduction-value-prophylaxis,
.bleed-reduction-percent {
  font-size: 13px;
}

.bleed-reduction-axis-label {
  font-size: 16px;
  transform: translateY(10px);
}

.bleed-reduction-axis-title {
  font-size: 16px;
  transform: translateY(10px);
}

.bleed-reduction-summary-title {
  font-size: 16px;
}

/* animation */
.bleed-reduction-section.bleed-reduction-visible .bleed-reduction-header,
.bleed-reduction-section.bleed-reduction-visible .bleed-reduction-group-title {
  animation: bleedReductionSlideFade 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
}

.bleed-reduction-section.bleed-reduction-visible .bleed-reduction-center-line,
.bleed-reduction-section.bleed-reduction-visible .bleed-reduction-axis,
.bleed-reduction-section.bleed-reduction-visible .bleed-reduction-divider-line {
  animation: bleedReductionLineDraw 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.35s;
}

.bleed-reduction-section.bleed-reduction-visible .bleed-reduction-bar-demand {
  animation: bleedReductionBarGrow 2.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.65s;
}

.bleed-reduction-section.bleed-reduction-visible .bleed-reduction-bar-prophylaxis {
  animation: bleedReductionBarGrow 2.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.95s;
}

.bleed-reduction-section.bleed-reduction-visible .bleed-reduction-value-demand,
.bleed-reduction-section.bleed-reduction-visible .bleed-reduction-value-prophylaxis {
  animation: bleedReductionFade 2s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.35s;
}

.bleed-reduction-section.bleed-reduction-visible .bleed-reduction-percent {
  animation: bleedReductionFade 2s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.6s;
}

.bleed-reduction-section.bleed-reduction-visible .bleed-reduction-axis-label,
.bleed-reduction-section.bleed-reduction-visible .bleed-reduction-axis-title,
.bleed-reduction-section.bleed-reduction-visible .bleed-reduction-summary-title {
  animation: bleedReductionFadeUp 2s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.45s;
}

@keyframes bleedReductionFade {
  to {
    opacity: 1;
  }
}

@keyframes bleedReductionSlideFade {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes bleedReductionLineDraw {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes bleedReductionBarGrow {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes bleedReductionFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .bleed-reduction-container {
    min-width: 760px;
  }

  .bleed-reduction-section {
    overflow-x: auto;
  }
}
/*  abr-outcome-section  */

/*  score-comparison-section  */
.score-comparison-section {
  width: 100%;
  overflow: hidden;
}

.score-comparison-container {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.score-comparison-svg {
  width: 100%;
  height: auto;
  display: block;
}

.score-comparison-chart-background,
.score-comparison-grid-line,
.score-comparison-axis-line,
.score-comparison-axis-label,
.score-comparison-axis-title,
.score-comparison-deviation,
.score-comparison-legend {
  opacity: 0;
}

.score-comparison-grid-line {
  stroke: #c8d2dc;
  stroke-width: 1.3;
}

.score-comparison-axis-line {
  stroke: #9d9b98;
  stroke-width: 3;
}

.score-comparison-axis-label,
.score-comparison-axis-title,
.score-comparison-deviation,
.score-comparison-legend {
  fill: #304f60;
  font-weight: 700 !important;
}

.score-comparison-axis-label {
  font-size: 19px;
}

.score-comparison-axis-title {
  font-size: 18px;
}

.score-comparison-deviation {
  font-size: 18px;
}

.score-comparison-legend {
  font-size: 17px;
}

.score-comparison-bar-demand {
  fill: #a8b4cc;
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.score-comparison-bar-prophylaxis {
  fill: url("#score-comparison-gradient-fill");
  filter: url("#score-comparison-bar-shadow");
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.score-comparison-value-card {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(14px) scale(.94);
}

.score-comparison-value-card rect {
  fill: #f4fbff;
  filter: url("#score-comparison-card-shadow");
}

.score-comparison-value {
  font-size: 28px;
  font-weight: 900;
}

.score-comparison-demand-label {
  fill: #a8b4cc;
}

.score-comparison-prophylaxis-label {
  fill: #ff6749;
}

/* animation */
.score-comparison-section.score-comparison-visible .score-comparison-chart-background {
  animation: scoreComparisonFade 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.score-comparison-section.score-comparison-visible .score-comparison-grid-line,
.score-comparison-section.score-comparison-visible .score-comparison-axis-line,
.score-comparison-section.score-comparison-visible .score-comparison-axis-label,
.score-comparison-section.score-comparison-visible .score-comparison-axis-title,
.score-comparison-section.score-comparison-visible .score-comparison-legend {
  animation: scoreComparisonFade 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards .35s;
}

.score-comparison-section.score-comparison-visible .score-comparison-bar-demand {
  animation: scoreComparisonBarGrow 2.8s cubic-bezier(0.22, 1, 0.36, 1) forwards .65s;
}

.score-comparison-section.score-comparison-visible .score-comparison-bar-prophylaxis {
  animation: scoreComparisonBarGrow 2.8s cubic-bezier(0.22, 1, 0.36, 1) forwards .95s;
}

.score-comparison-section.score-comparison-visible .score-comparison-value-card {
  animation: scoreComparisonValueCardIn 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.35s;
}

.score-comparison-section.score-comparison-visible .score-comparison-deviation {
  animation: scoreComparisonFadeUp 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.55s;
}

@keyframes scoreComparisonFade {
  to {
    opacity: 1;
  }
}

@keyframes scoreComparisonBarGrow {
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes scoreComparisonValueCardIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes scoreComparisonFadeUp {
  from {
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 486px) {
  .score-comparison-container {
    min-width: 486px;
  }

  .score-comparison-section {
    overflow-x: auto;
  }
}
/*  score-comparison-section  */

/*  pediatric-outcome-section */

.pediatric-outcome-section {
  width: 100%;
  overflow: hidden;
}

.pediatric-outcome-container {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

.pediatric-outcome-svg {
  width: 100%;
  height: auto;
  display: block;
}

.pediatric-outcome-grid-line {
  stroke: rgba(255,255,255,.12);
  stroke-width: 1;
  opacity: 0;
}

.pediatric-outcome-axis-line {
  stroke: rgba(255,255,255,.33);
  stroke-width: 2.5;
  opacity: 0;
}

.pediatric-outcome-axis-label,
.pediatric-outcome-axis-title,
.pediatric-outcome-group-title,
.pediatric-outcome-range {
  fill: #ffffff;
  font-weight: 700 !important;
  opacity: 0;
}

.pediatric-outcome-axis-label,
.pediatric-outcome-axis-title,
.pediatric-outcome-group-title,
.pediatric-outcome-range {
  font-size: 15px;
}

.pediatric-outcome-bar-demand {
  fill: #a8b4cc;
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.pediatric-outcome-bar-prophylaxis {
  fill: url("#pediatric-outcome-gradient-fill");
  filter: url("#pediatric-outcome-bar-shadow");
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.pediatric-outcome-value-card {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(14px) scale(.92);
}

.pediatric-outcome-value-card rect {
  fill: #3c6270;
  filter: url("#pediatric-outcome-card-shadow");
}

.pediatric-outcome-value {
  font-size: 24px;
  font-weight: 900;
}

.pediatric-outcome-value-demand {
  fill: #a8b4cc;
}

.pediatric-outcome-value-prophylaxis {
  fill: #ff6749;
}

.pediatric-outcome-connector-line {
  fill: none;
  stroke: #a8b4cc;
  stroke-width: 2.5;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  opacity: 0;
}

.pediatric-outcome-connector-arrow {
  fill: #a8b4cc;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.7);
}

.pediatric-outcome-reduction-badge {
  fill: url("#pediatric-outcome-gradient-fill");
  stroke: #345662;
  stroke-width: 7;
  filter: url("#pediatric-outcome-card-shadow");
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.72);
}

.pediatric-outcome-reduction-percent {
  fill: #fff;
  font-size: 24px;
  font-weight: 900;
  opacity: 0;
}

.pediatric-outcome-section.pediatric-outcome-visible .pediatric-outcome-grid-line,
.pediatric-outcome-section.pediatric-outcome-visible .pediatric-outcome-axis-line,
.pediatric-outcome-section.pediatric-outcome-visible .pediatric-outcome-axis-label,
.pediatric-outcome-section.pediatric-outcome-visible .pediatric-outcome-axis-title,
.pediatric-outcome-section.pediatric-outcome-visible .pediatric-outcome-group-title,
.pediatric-outcome-section.pediatric-outcome-visible .pediatric-outcome-range {
  animation: pediatricOutcomeFade 2.1s cubic-bezier(.22,1,.36,1) forwards .3s;
}

.pediatric-outcome-section.pediatric-outcome-visible .pediatric-outcome-bar-demand {
  animation: pediatricOutcomeBarGrow 2.9s cubic-bezier(.22,1,.36,1) forwards .55s;
}

.pediatric-outcome-section.pediatric-outcome-visible .pediatric-outcome-bar-prophylaxis {
  animation: pediatricOutcomeBarGrow 2.9s cubic-bezier(.22,1,.36,1) forwards .85s;
}

.pediatric-outcome-section.pediatric-outcome-visible .pediatric-outcome-value-card {
  animation: pediatricOutcomeCardIn 2.2s cubic-bezier(.22,1,.36,1) forwards 1.2s;
}

.pediatric-outcome-section.pediatric-outcome-visible .pediatric-outcome-connector-line {
  animation: pediatricOutcomeConnectorDraw 2.8s cubic-bezier(.22,1,.36,1) forwards 1.05s;
}

.pediatric-outcome-section.pediatric-outcome-visible .pediatric-outcome-connector-arrow {
  animation: pediatricOutcomeArrowIn 1.4s cubic-bezier(.22,1,.36,1) forwards 2.1s;
}

.pediatric-outcome-section.pediatric-outcome-visible .pediatric-outcome-reduction-badge {
  animation: pediatricOutcomeBadgeIn 2s cubic-bezier(.22,1,.36,1) forwards 1.55s;
}

.pediatric-outcome-section.pediatric-outcome-visible .pediatric-outcome-reduction-percent {
  animation: pediatricOutcomeFade 1.8s cubic-bezier(.22,1,.36,1) forwards 1.8s;
}

@keyframes pediatricOutcomeFade {
  to { opacity: 1; }
}

@keyframes pediatricOutcomeBarGrow {
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes pediatricOutcomeCardIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pediatricOutcomeConnectorDraw {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes pediatricOutcomeArrowIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pediatricOutcomeBadgeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 650px) {
  .pediatric-outcome-container {
    min-width: 650px;
  }

  .pediatric-outcome-section {
    overflow-x: auto;
  }
}
/*    */

/* treatment-response-section   */

.treatment-response-section {
  width: 100%;
  overflow: hidden;
}

.treatment-response-container {
  width: 100%;
  max-width: 758px;
  margin: 0 auto;
}

.treatment-response-svg {
  width: 100%;
  height: auto;
  display: block;
}

.treatment-response-grid-line {
  stroke: rgba(255, 255, 255, .12);
  stroke-width: 1;
  opacity: 0;
}

.treatment-response-axis-line {
  stroke: rgba(255, 255, 255, .34);
  stroke-width: 3;
  opacity: 0;
}

.treatment-response-axis-label,
.treatment-response-group-title,
.treatment-response-range {
  fill: #ffffff;
  font-weight: 700 !important;
  opacity: 0;
}

.treatment-response-axis-label {
  font-size: 18px;
}

.treatment-response-group-title {
  font-size: 18px;
}

.treatment-response-range {
  font-size: 18px;
}

.treatment-response-bar-demand {
  fill: #a8b4cc;
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.treatment-response-bar-prophylaxis {
  fill: url("#treatment-response-gradient-fill");
  filter: url("#treatment-response-bar-shadow");
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.treatment-response-value-card {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(18px) scale(.92);
}

.treatment-response-value-card rect {
  fill: #3c6270;
  filter: url("#treatment-response-card-shadow");
}

.treatment-response-value {
  font-size: 30px;
  font-weight: 900;
}

.treatment-response-value-demand {
  fill: #a8b4cc;
}

.treatment-response-value-prophylaxis {
  fill: #ff6749;
}

.treatment-response-connector-line {
  fill: none;
  stroke: #a8b4cc;
  stroke-width: 3;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  opacity: 0;
}

.treatment-response-connector-arrow {
  fill: #a8b4cc;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.7);
}

.treatment-response-reduction-badge {
  fill: url("#treatment-response-gradient-fill");
  stroke: #345662;
  stroke-width: 8;
  filter: url("#treatment-response-badge-shadow");
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.72);
}

.treatment-response-reduction-percent {
  fill: #fff;
  font-size: 28px;
  font-weight: 900;
  opacity: 0;
}

.treatment-response-section.treatment-response-visible .treatment-response-grid-line,
.treatment-response-section.treatment-response-visible .treatment-response-axis-line,
.treatment-response-section.treatment-response-visible .treatment-response-axis-label,
.treatment-response-section.treatment-response-visible .treatment-response-group-title,
.treatment-response-section.treatment-response-visible .treatment-response-range {
  animation: treatmentResponseFade 2.1s cubic-bezier(.22,1,.36,1) forwards .3s;
}

.treatment-response-section.treatment-response-visible .treatment-response-bar-demand {
  animation: treatmentResponseBarGrow 3s cubic-bezier(.22,1,.36,1) forwards .55s;
}

.treatment-response-section.treatment-response-visible .treatment-response-bar-prophylaxis {
  animation: treatmentResponseBarGrow 3s cubic-bezier(.22,1,.36,1) forwards .85s;
}

.treatment-response-section.treatment-response-visible .treatment-response-value-card {
  animation: treatmentResponseCardIn 2.3s cubic-bezier(.22,1,.36,1) forwards 1.2s;
}

.treatment-response-section.treatment-response-visible .treatment-response-connector-line {
  animation: treatmentResponseConnectorDraw 3s cubic-bezier(.22,1,.36,1) forwards 1.05s;
}

.treatment-response-section.treatment-response-visible .treatment-response-connector-arrow {
  animation: treatmentResponseArrowIn 1.6s cubic-bezier(.22,1,.36,1) forwards 2.15s;
}

.treatment-response-section.treatment-response-visible .treatment-response-reduction-badge {
  animation: treatmentResponseBadgeIn 2s cubic-bezier(.22,1,.36,1) forwards 1.55s;
}

.treatment-response-section.treatment-response-visible .treatment-response-reduction-percent {
  animation: treatmentResponseFade 1.8s cubic-bezier(.22,1,.36,1) forwards 1.8s;
}

@keyframes treatmentResponseFade {
  to {
    opacity: 1;
  }
}

@keyframes treatmentResponseBarGrow {
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes treatmentResponseCardIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes treatmentResponseConnectorDraw {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes treatmentResponseArrowIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes treatmentResponseBadgeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 758px) {
  .treatment-response-container {
    min-width: 758px;
  }

  .treatment-response-section {
    overflow-x: auto;
  }
}
/*   */


/* patient-proportion-section   */

.patient-proportion-section {
  width: 100%;
  overflow: hidden;
}

.patient-proportion-container {
    width: 100%;
    max-width: 555px;
    margin: 0 auto;
}

.patient-proportion-svg {
  width: 100%;
  height: auto;
  display: block;
}

.patient-proportion-grid-line {
  stroke: #c8d2dc;
  stroke-width: 1.2;
  opacity: 0;
}

.patient-proportion-axis-line {
  stroke: #9d9b98;
  stroke-width: 2.4;
  opacity: 0;
}

.patient-proportion-axis-label,
.patient-proportion-axis-title,
.patient-proportion-category-title,
.patient-proportion-category-count {
  fill: #304f60;
  font-weight: 700 !important;
  opacity: 0;
}

.patient-proportion-axis-label {
  font-size: 12px;
}

.patient-proportion-axis-title {
  font-size: 12px;
}

.patient-proportion-category-title,
.patient-proportion-category-count {
  font-size: 12px;
}

.patient-proportion-bar-children {
  fill: #a8b4cc;
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.patient-proportion-bar-adolescents {
  fill: url("#patient-proportion-gradient-fill");
  filter: url("#patient-proportion-bar-shadow");
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.patient-proportion-value-card {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(14px) scale(.92);
}

.patient-proportion-value-card rect {
  fill: #f4fbff;
  filter: url("#patient-proportion-card-shadow");
}

.patient-proportion-value {
  font-size: 28px;
  font-weight: 900;
}

.patient-proportion-value-children {
  fill: #a8b4cc;
}

.patient-proportion-value-adolescents {
  fill: #ff6749;
}

/* animation */
.patient-proportion-section.patient-proportion-visible .patient-proportion-grid-line,
.patient-proportion-section.patient-proportion-visible .patient-proportion-axis-line,
.patient-proportion-section.patient-proportion-visible .patient-proportion-axis-label,
.patient-proportion-section.patient-proportion-visible .patient-proportion-axis-title,
.patient-proportion-section.patient-proportion-visible .patient-proportion-category-title,
.patient-proportion-section.patient-proportion-visible .patient-proportion-category-count {
  animation: patientProportionFade 2.1s cubic-bezier(.22,1,.36,1) forwards .3s;
}

.patient-proportion-section.patient-proportion-visible .patient-proportion-bar-children {
  animation: patientProportionBarGrow 2.8s cubic-bezier(.22,1,.36,1) forwards .65s;
}

.patient-proportion-section.patient-proportion-visible .patient-proportion-bar-adolescents {
  animation: patientProportionBarGrow 2.8s cubic-bezier(.22,1,.36,1) forwards .9s;
}

.patient-proportion-section.patient-proportion-visible .patient-proportion-value-card {
  animation: patientProportionCardIn 2.2s cubic-bezier(.22,1,.36,1) forwards 1.3s;
}

@keyframes patientProportionFade {
  to {
    opacity: 1;
  }
}

@keyframes patientProportionBarGrow {
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes patientProportionCardIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 414px) {
  .patient-proportion-container {
    min-width: 414px;
  }

  .patient-proportion-section {
    overflow-x: auto;
  }
}

/*  abr-cohort-comparison-section   */
.abr-cohort-comparison-section {
  width: 100%;
  overflow: hidden;
} 

.abr-cohort-comparison-container {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

.abr-cohort-comparison-svg {
  width: 100%;
  height: auto;
  display: block;
}

.abr-cohort-comparison-grid-line {
  stroke: rgba(255,255,255,.12);
  stroke-width: 1;
  opacity: 0;
}

.abr-cohort-comparison-axis-line {
  stroke: rgba(255,255,255,.34);
  stroke-width: 2;
  opacity: 0;
}

.abr-cohort-comparison-axis-label,
.abr-cohort-comparison-axis-title,
.abr-cohort-comparison-legend {
  fill: #ffffff;
  font-weight: 700 !important;
  opacity: 0;
}

.abr-cohort-comparison-axis-label,
.abr-cohort-comparison-axis-title,
.abr-cohort-comparison-legend {
  font-size: 13px;
}

.abr-cohort-comparison-bar-fas {
  fill: #a8b4cc;
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.abr-cohort-comparison-bar-ppr {
  fill: url("#abr-cohort-comparison-gradient-fill");
  filter: url("#abr-cohort-comparison-bar-shadow");
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.abr-cohort-comparison-bar-fill-fas {
  fill: #a8b4cc;
}

.abr-cohort-comparison-bar-fill-ppr {
  fill: #ff6749;
}

.abr-cohort-comparison-value-card {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(14px) scale(.92);
}

.abr-cohort-comparison-value-card rect {
  fill: #3c6270;
  filter: url("#abr-cohort-comparison-card-shadow");
}

.abr-cohort-comparison-value {
  font-size: 20px;
  font-weight: 900;
}

.abr-cohort-comparison-value-fas {
  fill: #a8b4cc;
}

.abr-cohort-comparison-value-ppr {
  fill: #ff6749;
}

.abr-cohort-comparison-section.abr-cohort-comparison-visible .abr-cohort-comparison-grid-line,
.abr-cohort-comparison-section.abr-cohort-comparison-visible .abr-cohort-comparison-axis-line,
.abr-cohort-comparison-section.abr-cohort-comparison-visible .abr-cohort-comparison-axis-label,
.abr-cohort-comparison-section.abr-cohort-comparison-visible .abr-cohort-comparison-axis-title,
.abr-cohort-comparison-section.abr-cohort-comparison-visible .abr-cohort-comparison-legend {
  animation: abrCohortComparisonFade 2.1s cubic-bezier(.22,1,.36,1) forwards .3s;
}

.abr-cohort-comparison-section.abr-cohort-comparison-visible .abr-cohort-comparison-bar-fas {
  animation: abrCohortComparisonBarGrow 2.8s cubic-bezier(.22,1,.36,1) forwards .6s;
}

.abr-cohort-comparison-section.abr-cohort-comparison-visible .abr-cohort-comparison-bar-ppr {
  animation: abrCohortComparisonBarGrow 2.8s cubic-bezier(.22,1,.36,1) forwards .85s;
}

.abr-cohort-comparison-section.abr-cohort-comparison-visible .abr-cohort-comparison-value-card {
  animation: abrCohortComparisonValueCardIn 2.2s cubic-bezier(.22,1,.36,1) forwards 1.25s;
}

@keyframes abrCohortComparisonFade {
  to { opacity: 1; }
}

@keyframes abrCohortComparisonBarGrow {
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes abrCohortComparisonValueCardIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 560px) {
  .abr-cohort-comparison-container {
    min-width: 560px;
  }

  .abr-cohort-comparison-section {
    overflow-x: auto;
  }
}
/* abr-cohort-comparison-section  */


/*  period-outcome-section   */
.period-outcome-section {
  width: 100%;
  overflow: hidden;
}

.period-outcome-container {
  width: 100%;
  max-width: 590px;
  margin: 0 auto;
}

.period-outcome-svg {
  width: 100%;
  height: auto;
  display: block;
}

.period-outcome-grid-line {
  stroke: rgba(255,255,255,.12);
  stroke-width: 1;
  opacity: 0;
}

.period-outcome-axis-line {
  stroke: rgba(255,255,255,.34);
  stroke-width: 2;
  opacity: 0;
}

.period-outcome-axis-label,
.period-outcome-legend {
  fill: #fff;
  font-size: 12px;
  font-weight: 700 !important;
  opacity: 0;
}

.period-outcome-bar-first-period {
  fill: #a8b4cc;
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.period-outcome-bar-second-period {
  fill: url("#period-outcome-gradient-fill");
  filter: url("#period-outcome-bar-shadow");
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.period-outcome-bar-fill-first {
  fill: #a8b4cc;
}

.period-outcome-bar-fill-second {
  fill: #ff6749;
}

.period-outcome-value-card {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(14px) scale(.92);
}

.period-outcome-value-card rect {
  fill: #3c6270;
  filter: url("#period-outcome-card-shadow");
}

.period-outcome-value {
  font-size: 20px;
  font-weight: 900;
}

.period-outcome-value-first {
  fill: #a8b4cc;
}

.period-outcome-value-second {
  fill: #ff6749;
}

.period-outcome-connector-line {
  fill: none;
  stroke: #a8b4cc;
  stroke-width: 2.2;
  stroke-dasharray: 330;
  stroke-dashoffset: 330;
  opacity: 0;
}

.period-outcome-connector-arrow {
  fill: #a8b4cc;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.7);
}

.period-outcome-reduction-badge {
  fill: url("#period-outcome-gradient-fill");
  stroke: #345662;
  stroke-width: 6;
  filter: url("#period-outcome-card-shadow");
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.72);
}

.period-outcome-reduction-percent {
  fill: #fff;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
}

.period-outcome-section.period-outcome-visible .period-outcome-grid-line,
.period-outcome-section.period-outcome-visible .period-outcome-axis-line,
.period-outcome-section.period-outcome-visible .period-outcome-axis-label,
.period-outcome-section.period-outcome-visible .period-outcome-legend {
  animation: periodOutcomeFade 2.1s cubic-bezier(.22,1,.36,1) forwards .3s;
}

.period-outcome-section.period-outcome-visible .period-outcome-bar-first-period {
  animation: periodOutcomeBarGrow 2.9s cubic-bezier(.22,1,.36,1) forwards .55s;
}

.period-outcome-section.period-outcome-visible .period-outcome-bar-second-period {
  animation: periodOutcomeBarGrow 2.9s cubic-bezier(.22,1,.36,1) forwards .85s;
}

.period-outcome-section.period-outcome-visible .period-outcome-value-card {
  animation: periodOutcomeCardIn 2.2s cubic-bezier(.22,1,.36,1) forwards 1.2s;
}

.period-outcome-section.period-outcome-visible .period-outcome-connector-line {
  animation: periodOutcomeConnectorDraw 2.8s cubic-bezier(.22,1,.36,1) forwards 1.05s;
}

.period-outcome-section.period-outcome-visible .period-outcome-connector-arrow {
  animation: periodOutcomeArrowIn 1.4s cubic-bezier(.22,1,.36,1) forwards 2.1s;
}

.period-outcome-section.period-outcome-visible .period-outcome-reduction-badge {
  animation: periodOutcomeBadgeIn 2s cubic-bezier(.22,1,.36,1) forwards 1.55s;
}

.period-outcome-section.period-outcome-visible .period-outcome-reduction-percent {
  animation: periodOutcomeFade 1.8s cubic-bezier(.22,1,.36,1) forwards 1.8s;
}

@keyframes periodOutcomeFade {
  to { opacity: 1; }
}

@keyframes periodOutcomeBarGrow {
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes periodOutcomeCardIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes periodOutcomeConnectorDraw {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes periodOutcomeArrowIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes periodOutcomeBadgeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 487px) {
  .period-outcome-container {
    min-width: 487px;
  }

  .period-outcome-section {
    overflow-x: auto;
  }
}
/* period-outcome-section  */
/* bleed-site-section   */

.bleed-site-section {
  width: 100%;
  overflow: hidden;
}

.bleed-site-container {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.bleed-site-svg {
  width: 100%;
  height: auto;
  display: block;
}

.bleed-site-layout {
  opacity: 0;
}

.bleed-site-human {
  opacity: 0;
}

.bleed-site-human-reveal {
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
}

.bleed-site-marker,
.bleed-site-card,
.bleed-site-table-row {
  opacity: 0;
}

.bleed-site-marker {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.78);
}

.bleed-site-card {
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(20px);
}

.bleed-site-connector-line {
  fill: none;
  stroke-width: .85;
  stroke-dasharray: 74;
  stroke-dashoffset: 74;
  opacity: 0;
}

.bleed-site-figure-left .bleed-site-connector-line {
  stroke: #f26a48;
}

.bleed-site-figure-right .bleed-site-connector-line {
  stroke: #1295a7;
}

.bleed-site-card-title {
  fill: #ffffff;
  font-size: 8px;
  font-weight: 700 !important;
}

.bleed-site-label,
.bleed-site-percentage {
  fill: #304f60;
  font-size: 8px;
  font-weight: 700;
}

.bleed-site-section.bleed-site-visible .bleed-site-layout {
  animation: bleedSiteFade 1.4s cubic-bezier(.22,1,.36,1) forwards;
}

.bleed-site-section.bleed-site-visible .bleed-site-human {
  animation: bleedSiteFade 1.2s cubic-bezier(.22,1,.36,1) forwards .2s;
}

.bleed-site-section.bleed-site-visible .bleed-site-human-reveal {
  animation: bleedSiteHumanReveal 2.4s cubic-bezier(.22,1,.36,1) forwards .25s;
}

.bleed-site-section.bleed-site-visible .bleed-site-marker-nose {
  animation: bleedSiteMarkerIn 1.5s cubic-bezier(.22,1,.36,1) forwards 1.15s;
}

.bleed-site-section.bleed-site-visible .bleed-site-marker-oral {
  animation: bleedSiteMarkerIn 1.5s cubic-bezier(.22,1,.36,1) forwards 1.4s;
}

.bleed-site-section.bleed-site-visible .bleed-site-marker-joint {
  animation: bleedSiteMarkerIn 1.5s cubic-bezier(.22,1,.36,1) forwards 1.65s;
}

.bleed-site-section.bleed-site-visible .bleed-site-connector-line {
  animation: bleedSiteConnectorDraw 2.2s cubic-bezier(.22,1,.36,1) forwards 2s;
}

.bleed-site-section.bleed-site-visible .bleed-site-card {
  animation: bleedSiteCardIn 1.8s cubic-bezier(.22,1,.36,1) forwards 2.35s;
}

.bleed-site-section.bleed-site-visible .bleed-site-table-row:nth-child(1) {
  animation: bleedSiteRowIn 1.2s cubic-bezier(.22,1,.36,1) forwards 2.75s;
}

.bleed-site-section.bleed-site-visible .bleed-site-table-row:nth-child(2) {
  animation: bleedSiteRowIn 1.2s cubic-bezier(.22,1,.36,1) forwards 2.9s;
}

.bleed-site-section.bleed-site-visible .bleed-site-table-row:nth-child(3) {
  animation: bleedSiteRowIn 1.2s cubic-bezier(.22,1,.36,1) forwards 3.05s;
}

.bleed-site-section.bleed-site-visible .bleed-site-table-row:nth-child(4) {
  animation: bleedSiteRowIn 1.2s cubic-bezier(.22,1,.36,1) forwards 3.2s;
}

.bleed-site-section.bleed-site-visible .bleed-site-marker-core {
  animation: bleedSiteBreath 3s ease-in-out infinite 3.3s;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes bleedSiteFade {
  to {
    opacity: 1;
  }
}

@keyframes bleedSiteHumanReveal {
  to {
    transform: scaleY(1);
  }
}

@keyframes bleedSiteMarkerIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bleedSiteConnectorDraw {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes bleedSiteCardIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bleedSiteRowIn {
  from {
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bleedSiteBreath {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.22);
    opacity: .72;
  }
}

@media (max-width: 463px) {
  .bleed-site-container {
    min-width: 463px;
  }

  .bleed-site-section {
    overflow-x: auto;
  }
}

/* bleed-site-section  */

/* treated-tabr-section   */

.treated-tabr-section {
  width: 100%;
  overflow: hidden;
}

.treated-tabr-container {
  width: 100%;
  max-width: 819px;
  margin: 0 auto;
}

.treated-tabr-svg {
  width: 100%;
  height: auto;
  display: block;
}

.treated-tabr-grid-line,
.treated-tabr-group-divider,
.treated-tabr-axis-line,
.treated-tabr-axis-tick {
  stroke: #979797;
  stroke-width: 1;
  opacity: 0;
}

.treated-tabr-group-divider {
  stroke-dasharray: 1.5 2.5;
}

.treated-tabr-axis-tick {
  stroke: #c4ccd3;
  stroke-width: 3;
}

.treated-tabr-patient-label,
.treated-tabr-group-type3,
.treated-tabr-group-type2a,
.treated-tabr-group-type2b,
.treated-tabr-axis-label,
.treated-tabr-axis-title {
  fill: #365262;
  font-weight: 700 !important;
  opacity: 0;
}

.treated-tabr-patient-label {
  font-size: 16px;
}

.treated-tabr-group-type3,
.treated-tabr-group-type2a,
.treated-tabr-group-type2b {
  font-size: 16px;
}

.treated-tabr-axis-label {
  font-size: 15px;
}

.treated-tabr-axis-title {
  font-size: 16px;
  letter-spacing: .4px;
}

.treated-tabr-bar-primary,
.treated-tabr-bar-secondary,
.treated-tabr-bar-combined {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  filter: url("#treated-tabr-bar-shadow");
}

.treated-tabr-bar-fill-primary {
  fill: #31aeba;
}

.treated-tabr-bar-fill-secondary {
  fill: #ef4568;
}

.treated-tabr-bar-secondary:nth-of-type(2) {
  fill: #ff9136;
}

.treated-tabr-value {
  fill: #ffffff;
  font-size: 14px;
  font-weight: 900;
  opacity: 0;
}

.treated-tabr-section.treated-tabr-visible .treated-tabr-grid-line,
.treated-tabr-section.treated-tabr-visible .treated-tabr-group-divider,
.treated-tabr-section.treated-tabr-visible .treated-tabr-axis-line,
.treated-tabr-section.treated-tabr-visible .treated-tabr-axis-tick,
.treated-tabr-section.treated-tabr-visible .treated-tabr-patient-label,
.treated-tabr-section.treated-tabr-visible .treated-tabr-group-type3,
.treated-tabr-section.treated-tabr-visible .treated-tabr-group-type2a,
.treated-tabr-section.treated-tabr-visible .treated-tabr-group-type2b,
.treated-tabr-section.treated-tabr-visible .treated-tabr-axis-label,
.treated-tabr-section.treated-tabr-visible .treated-tabr-axis-title {
  animation: treatedTabrFade 2s cubic-bezier(.22,1,.36,1) forwards .25s;
}

.treated-tabr-section.treated-tabr-visible .treated-tabr-bar-primary,
.treated-tabr-section.treated-tabr-visible .treated-tabr-bar-secondary,
.treated-tabr-section.treated-tabr-visible .treated-tabr-bar-combined {
  animation: treatedTabrBarGrow 2.8s cubic-bezier(.22,1,.36,1) forwards .65s;
}

.treated-tabr-section.treated-tabr-visible .treated-tabr-value {
  animation: treatedTabrFade 1.8s cubic-bezier(.22,1,.36,1) forwards 1.55s;
}

@keyframes treatedTabrFade {
  to {
    opacity: 1;
  }
}

@keyframes treatedTabrBarGrow {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (max-width: 819px) {
  .treated-tabr-container {
    min-width: 819px;
  }

  .treated-tabr-section {
    overflow-x: auto;
  }
}

/* treated-tabr-section  */

/* untreated-tabr-section   */


.treated-outcome-section {
  width: 100%;
  overflow: hidden;
}

.treated-outcome-container {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.treated-outcome-svg {
  width: 100%;
  height: auto;
  display: block;
}

.treated-outcome-grid-line {
  stroke: rgba(255,255,255,.13);
  stroke-width: 1;
  opacity: 0;
}

.treated-outcome-axis-line {
  stroke: rgba(255,255,255,.32);
  stroke-width: 3;
  opacity: 0;
}

.treated-outcome-axis-label,
.treated-outcome-axis-title,
.treated-outcome-legend,
.treated-outcome-group-title,
.treated-outcome-range {
  fill: #ffffff;
  font-weight: 700 !important;
  opacity: 0;
}

.treated-outcome-axis-label {
  font-size: 16px;
}

.treated-outcome-axis-title {
  font-size: 19px;
}

.treated-outcome-legend {
  font-size: 15px;
}

.treated-outcome-group-title {
  font-size: 21px;
}

.treated-outcome-range {
  font-size: 17px;
}

.treated-outcome-bar-demand {
  fill: #a8b4cc;
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.treated-outcome-bar-prophylaxis {
  fill: url("#treated-outcome-gradient-fill");
  filter: url("#treated-outcome-bar-shadow");
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}

.treated-outcome-bar-fill-demand {
  fill: #a8b4cc;
}

.treated-outcome-bar-fill-prophylaxis {
  fill: #ff6749;
}

.treated-outcome-value-card {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(18px) scale(.92);
}

.treated-outcome-value-card rect {
  fill: #3c6270;
  filter: url("#treated-outcome-card-shadow");
}

.treated-outcome-value {
  font-size: 30px;
  font-weight: 900;
}

.treated-outcome-value-demand {
  fill: #a8b4cc;
}

.treated-outcome-value-prophylaxis {
  fill: #ff6749;
}

.treated-outcome-connector-line {
  fill: none;
  stroke: #a8b4cc;
  stroke-width: 3;
  stroke-dasharray: 430;
  stroke-dashoffset: 430;
  opacity: 0;
}

.treated-outcome-connector-arrow {
  fill: #a8b4cc;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.7);
}

.treated-outcome-reduction-badge {
  fill: url("#treated-outcome-gradient-fill");
  stroke: #345662;
  stroke-width: 8;
  filter: url("#treated-outcome-card-shadow");
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.72);
}

.treated-outcome-reduction-percent {
  fill: #ffffff;
  font-size: 30px;
  font-weight: 900;
  opacity: 0;
}

.treated-outcome-badge-group {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.7);
}

.treated-outcome-badge-c {
  fill: url("#treated-outcome-badge-c-fill");
  stroke: #263d3e;
  stroke-width: 4;
}

.treated-outcome-badge-j {
  fill: url("#treated-outcome-badge-j-fill");
  stroke: #263d3e;
  stroke-width: 4;
}

.treated-outcome-badge-group text {
  fill: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.treated-outcome-section.treated-outcome-visible .treated-outcome-grid-line,
.treated-outcome-section.treated-outcome-visible .treated-outcome-axis-line,
.treated-outcome-section.treated-outcome-visible .treated-outcome-axis-label,
.treated-outcome-section.treated-outcome-visible .treated-outcome-axis-title,
.treated-outcome-section.treated-outcome-visible .treated-outcome-legend,
.treated-outcome-section.treated-outcome-visible .treated-outcome-group-title,
.treated-outcome-section.treated-outcome-visible .treated-outcome-range {
  animation: treatedOutcomeFade 2.2s cubic-bezier(.22,1,.36,1) forwards .3s;
}

.treated-outcome-section.treated-outcome-visible .treated-outcome-bar-demand {
  animation: treatedOutcomeBarGrow 3.2s cubic-bezier(.22,1,.36,1) forwards .65s;
}

.treated-outcome-section.treated-outcome-visible .treated-outcome-bar-prophylaxis {
  animation: treatedOutcomeBarGrow 3.2s cubic-bezier(.22,1,.36,1) forwards .95s;
}

.treated-outcome-section.treated-outcome-visible .treated-outcome-connector-line {
  animation: treatedOutcomeConnectorDraw 3s cubic-bezier(.22,1,.36,1) forwards 1.15s;
}

.treated-outcome-section.treated-outcome-visible .treated-outcome-value-card {
  animation: treatedOutcomeCardIn 2.3s cubic-bezier(.22,1,.36,1) forwards 1.35s;
}

.treated-outcome-section.treated-outcome-visible .treated-outcome-connector-arrow {
  animation: treatedOutcomeArrowIn 1.5s cubic-bezier(.22,1,.36,1) forwards 2.25s;
}

.treated-outcome-section.treated-outcome-visible .treated-outcome-reduction-badge {
  animation: treatedOutcomeBadgeIn 2.1s cubic-bezier(.22,1,.36,1) forwards 1.7s;
}

.treated-outcome-section.treated-outcome-visible .treated-outcome-reduction-percent {
  animation: treatedOutcomeFade 1.8s cubic-bezier(.22,1,.36,1) forwards 1.95s;
}

.treated-outcome-section.treated-outcome-visible .treated-outcome-badge-group {
  animation: treatedOutcomeBadgeGroupIn 1.7s cubic-bezier(.22,1,.36,1) forwards 2.25s;
}

@keyframes treatedOutcomeFade {
  to { opacity: 1; }
}

@keyframes treatedOutcomeBarGrow {
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes treatedOutcomeConnectorDraw {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes treatedOutcomeCardIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes treatedOutcomeArrowIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes treatedOutcomeBadgeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes treatedOutcomeBadgeGroupIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 786px) {
  .treated-outcome-container {
    min-width: 786px;
  }

  .treated-outcome-section {
    overflow-x: auto;
  }
}
/* treated-outcome-section  */