.vis-hidden,
.a11y-hidden,
.sr-only,
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.hidden {
  visibility: hidden;
  display: none;
}



@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.home {
  background-color: #1b2a4a;
  
  color: #fff;
}

@media screen and (min-width: 75em) {
  body {
    display: grid;
  }
}

h1 {
  font-size: 1.7em;
  font-family: "Open Sans", sans-serif;
  line-height: 1em;
  font-weight: 700;
  margin-bottom: 1em;
  margin-top: 1.5em;
  padding: 0;
  text-align: left;
}

h2,
h3,
h4,
h5,
h6 {
  padding: 0.5em 0;
  margin: 0 0 0.5em;
}

h2 {
  font-size: 1.6em;
  line-height: 1.4em;
  font-weight: 700;
}

h3,
.h3 {
  font-size: 1.3em;
  line-height: 1.4em;
}

h3.hed_sub {
  font-size: 1.8em;
  font-weight: 900;
  margin: 1em 0 0;
  font-style: normal;
  line-height: 1.4;
  text-transform: none;
  color: #2a3d64;
}

.hed_sub em,
.result-summary .results_header .hed_sub + p {
  font-size: 0.45em;
  font-style: normal;
  text-transform: none;
  color: #555;
  font-weight: 500;
  background: #f6f6f6;
  padding: 0.5em 1em;
  vertical-align: middle;
  border-radius: 0.6em;
  margin-left: 1em;
  z-index: 10;
  position: relative;
}
.result-impact .hed_sub em {
  background: none;
  padding: 0;
  margin: 0;
}

.hed_sub em details {
  display: inline-block;
  position: relative;
  z-index: 20;
  margin: 0 0 0 1.2em;
}

.hed_sub em details summary {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: #aaa;
  list-style-position: outside;
  list-style-type: disclosure-open;
}
.hed_sub em a {
  color: inherit;
}

.hed_sub em details ul {
  position: absolute;
  background: #fff;
  border-radius: 0.6em;
  border: 1px solid #eee;
  padding: 0.2em 0.6em;
  top: 2em;
  min-width: 100%;
  width: 15em;
  left: 0;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.hed_sub em details li {
  padding: 0.4em;
}
@media (max-width: 80em) {
  .hed_sub em {
    display: block;
    margin: 1em 0 0;
  }
}
@media (max-width: 50em) {
  .hed_sub {
    font-size: 1em;
    margin: 0.5em 0 0;
  }

  .hed_sub em details ul {
    left: auto;
    right: 0;
  }

  h2 {
    font-size: 1.2em;
  }
  h3,
  .h3 {
    font-size: 1.1em;
  }
  h3.hed_sub {
    font-size: 1.6em;
  }
  .hed_sub em,
  .results_header .hed_sub + p {
    display: block;
    font-size: 0.6em;
    margin: 0.5em 0;
  }
}

.results_header .hed_sub {
  font-size: 1.3rem;
  margin: 1em 0 0;
  padding: 0;
}

.results_header .hed_sub em,
.results_header .hed_sub + p {
  font-size: 0.7em;
}

.results_header .hed_sub + p {
  font-size: 1rem;
}

details.metrics_shown {
  position: absolute;
  top: 4rem;
  right: 3rem;
  list-style: none;
  z-index: 9;
}

details.metrics_shown p {
  position: absolute;
  background: #4381e5;
  padding: 1em;
  color: #fff;
  width: 25rem;
  right: 0;
  margin-top: 1em;
  font-size: 0.9rem;
  box-shadow: 0 0 5px #3333333b;
  border-radius: 0.5rem;
  max-width: 80vw;
}

details.metrics_shown p:after {
  border-bottom: 0.6em solid #4381e5;
  border-right: 0.6em solid transparent;
  border-left: 0.6em solid transparent;
  content: "";
  width: 0;
  height: 0;
  right: 2em;
  position: absolute;
  top: -0.6em;
  background-repeat: no-repeat;
}

details.metrics_shown summary {
  cursor: pointer;
  list-style: none;
  color: #333;
  padding-left: 1.4em;
  font-size: 0.9em;
  text-decoration: dotted underline #888;
  background: url(/assets/images/src/icon_info_circle.svg) left 50% no-repeat;
  background-size: 1.2em auto;
}

details.metrics_shown summary::-webkit-details-marker {
  display: none;
}

.compare-experiment .results_header .scrollableTable {
  margin-bottom: 1.5rem;
}

.compare-experiment p.ttfb_experiment_warning {
  font-size: 0.9rem;
  padding: 1em;
  border: 1px solid #e6b57e;
  background: #fff6df;
  max-width: none;
  border-radius: 0.5em;
}

.opportunities_summary .extended {
  white-space: break-spaces;
}

.compare-experiment .extended {
  display: none;
}

h4,
.h4,
h2.accordion_opener {
  font-size: 1em;
  line-height: 1.4em;
  font-weight: 700;
}

#tables h4 {
  background: #2a3b64;
  color: #fff;
  padding: 0.5em 1em;
  position: sticky;
  left: 0;
  border-radius: 5px;
  font-size: 1.1em;
  font-weight: 700;
  margin: 1em 0;
}

h4 a,
h4 a:not([href]),
.h4 a {
  color: inherit;
}

h5 {
  font-size: 1.2em;
  line-height: 1.4em;
  color: #2a3c64;
  margin-top: 1.2em;
  margin-bottom: 0;
}

h6 {
  font-size: 0.83em;
  line-height: 1.4em;
}

.test_results-content h4,
.test_results-content details.values summary {
  color: #2a3b64;
  font-weight: 500;
  font-size: 1.4em;
}

.content_header h2,
.test_results-content h2 {
  font-size: 2.375rem;
  color: #2e2e2e;
  font-weight: 300;
  margin: 0.8em 0 0;
  display: flex;
  line-height: 1;
}

.test_results-content h2 em.flag,
.summary_opps em.flag,
span.lh-flag,
.metric_descs em.flag {
  font-size: 0.3em;
  font-weight: 500;
  text-transform: uppercase;
  background: #1072ba;
  color: #fff;
  padding: 0.5em;
  border-radius: 0.4em;
  line-height: 0.8;
  align-self: flex-start;
  font-style: normal;
  margin: 0 1em;
}
.metric_descs em.flag {
  font-size: 0.7em;
  display: inline-block;
  position: relative;
  margin: 0;
  vertical-align: middle;
}

.summary_opps em.flag {
  font-size: 0.4em;
  font-size: 0.5em;
  top: -1em;
  display: inline-block;
  position: relative;
  margin: 0 0.5em;
}

.pro-flag {
  border-radius: 0.6em;
  font-weight: 900;
  align-self: center;
  padding: 0.8em;
}

h1 .pro-flag {
  font-size: 0.5em;
  padding: 0.4em;
  border-radius: 0.4em;
  margin: 0 0 0 0.4em;
  font-weight: 900;
}

.experiment_meta,
.experiment_opportunities {
  display: flex;
  gap: 3rem;
  margin: 0.5rem 0;
  padding: 0 0 0.5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.experiment_opportunities {
  border-top: 1px solid #eee;
  padding: 0.5rem 0 0;
}

.experiment_opportunities-resolved {
  flex: 1 1 25%;
}

.experiment_opportunities p {
  margin: 0.3em 0 1rem;
}

.experiment_opportunities-resolved ol {
  padding: 0;
  list-style: none;
  gap: 1rem;
  justify-content: flex-start;
  display: flex;
  overflow: auto;
  flex-flow: row nowrap;
  max-width: 100%;
  scroll-snap-type: x;
}

.experiment_opportunities-resolved li {
  flex: 0 1 40%;
  background: url("/assets/images/src/icon_award.svg") top center no-repeat;
  padding-top: 3.2rem;
  margin: 0;
  box-sizing: border-box;
  background-size: auto 3rem;
  text-align: center;
  font-size: 0.8em;
  line-height: 1.3;
  min-height: 3rem;
  font-weight: 900;
  color: #2a3c64;
  max-width: 15em;
  min-width: 36%;
  scroll-snap-align: start;
}

.experiment_opportunities-remaining {
  flex: 1 1 70%;
  align-self: flex-start;
}

.experiment_meta_urls,
.experiment_meta_included {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex: 1 1 50%;
}

.experiment_meta_urls > p,
.experiment_meta_included > p {
  margin: 0 0 0.5em;
  font-size: 0.9rem !important;
  text-transform: uppercase;
  font-weight: 500 !important;
  color: #222;
  padding: 0.3rem 0;
}

.experiment_meta_urls > ul,
.experiment_meta_included > ul {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  flex-flow: row wrap;
}

.experiment_meta details {
  position: relative;
  z-index: 10;
}

.experiment_meta details[open] {
  z-index: 11;
}

.experiment_meta_urls a,
a.experiment_meta-more,
.experiment_meta summary {
  list-style: none;
  padding: 0.2em 1.3rem 0.2em 0.7em;
  background-image: url(/assets/images/src/icon_triangledown.svg);
  background-repeat: no-repeat;
  background-position: right 0.5em top 50%;
  background-color: #fafafa;
  cursor: pointer;
  border-radius: 1rem;
  font-size: 0.9em;
  font-weight: 900;
  color: #1071ba;
  border: 1px solid #ddd;
}

.experiment_meta summary::-webkit-details-marker {
  display: none;
}

.experiment_meta_urls a,
a.experiment_meta-more {
  display: block;
  text-decoration: none;
  background-image: none;
  padding-right: 0.7em;
}

.experiment_meta details a,
.experiment_meta details a:hover,
.experiment_meta details a:focus {
  background: none;
  color: #fff;
  border: none;
  font-size: 1em;
  font-weight: normal;
  text-decoration: underline;
  box-shadow: none;
}

a.experiment_meta-more {
  font-weight: 500;
  background: #1071ba;
  border-color: #1071ba;
  color: #fff;
}

.experiment_meta details:hover summary,
.experiment_meta details:focus summary {
  background-color: #fff;
  box-shadow: 0 0 5px #eee;
}

.experiment_meta_urls a:hover,
.experiment_meta_urls a:focus {
  background-color: #fff;
  box-shadow: 0 0 5px #eee;
}

a.experiment_meta-more:hover,
a.experiment_meta-more:focus {
  background: #248cdb;
  border-color: #1071ba;
  color: #fff;
}

.experiment_meta details[open] summary {
  background-color: #2a3c64;
  color: #fff;
  border-color: #2a3c64;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.experiment_meta details > div,
.experiment_meta details > ul {
  position: absolute;
  background: #2a3c64;
  padding: 2em 2em;
  font-size: 0.9em;
  color: #fff;
  border-radius: 0.5rem;
  margin: 0;
  border-top-left-radius: 0;
  max-width: 50vw;
  min-width: 20em;
  width: 30rem;
  overflow: auto;
  word-break: break-word;
  line-height: 1.3;
  list-style: disc;
}

.experiment_meta_urls details > div,
.experiment_meta_urls details > ul {
  right: 0;
  left: auto;
  max-width: 20rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0;
}

.experiment_meta details div p {
  font-size: 1em;
  font-weight: 300;
  text-transform: none;
}

.experiment_meta details div h3 {
  font-size: 1em;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
}

.experiment_meta details pre {
  background: #fff;
  color: #0e0e0e;
  padding: 1em;
  overflow: auto;
}

.experiment_meta details ul {
  margin: 0;
}

.experiment_meta details li {
  padding-bottom: 0.5em;
  list-style: none;
}

.compare-experiment.compare-loading .scrollableTable {
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
  border: 0;
  margin: 0;
}

span.lh-flag {
  font-size: 0.8em;
  font-weight: 700;
  color: #222;
  border: 1px solid #ddd;
  background-color: #fff;
}

span.lh-flag.good {
  border-color: #9bce54;
}

span.lh-flag.ok {
  border-color: #f1c52e;
}

span.lh-flag.poor {
  border-color: #e33535;
}

.results_body {
  padding: 0 3em;
  border-radius: 1rem;
  box-shadow: 0 0 4px #ddd;
  margin: 1em -3rem !important;
  background-clip: padding-box;
  position: relative;
}

.results_body:before {
  content: "";
  display: block;
  height: 1px;
}

@media (max-width: 87.5em) {
  .results_body {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 !important;
  }
}

.form_clip .grade_header:first-of-type {
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
}

.form_clip > .experiments_foot {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.compare-loading .results_body {
  padding: 3em 1em;
}

.compare-loading .experiment_meta_included {
  padding: 0 0 1.5rem;
  border-bottom: 1px solid #ddd;
  margin: 0 2rem 2.5rem;
}

.compare-loading #statusTable th {
  text-decoration: none;
  font-weight: 900;
}

.grade_header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid #ddd;
  margin-top: 0;
  margin-left: -3em;
  margin-right: -3em;
  padding: 0.6em 3em;
  background: #fafafa;
  border-right: 0;
  border-left: aliceblue;
  min-height: 4rem;
}

summary.grade_header {
  cursor: pointer;
}

h3.grade_heading {
  color: #2a3d64;
  font-size: 1.875rem;
  font-weight: 900;
  margin: 0;
  flex: 0 1 23rem;
  padding: 0;
  text-align: left;
}

#Custom h3.grade_heading:before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  display: inline-block;
  margin-right: 0.8rem;
  background: url("/assets/images/src/icon_triangledown.svg") left center
    no-repeat;
  background-size: 0.6em auto;
  transform: rotate(-90deg);
}
summary.grade_header::-webkit-details-marker {
  display: none;
}

details[open] #Custom h3.grade_heading:before {
  transform: rotate(0deg);
}

p.grade_summary {
  font-size: 1.1rem;
  color: #2e2e2e;
  max-width: 49em;
  line-height: 1.4;
  margin: 0.5em 0;
  font-weight: 500;
  min-height: none;
  padding-left: 2.5rem;
}
.experiments_grades p.grade_summary {
  font-size: 1rem;
}

.grade_heading span {
  font-weight: 500;
}

.experiments_grades .grade_heading.grade-a + p {
  background: url(/assets/images/src/icon_grading_check.svg) left 50% no-repeat;
}

.experiments_grades .grade_heading.grade-a + p strong {
  color: #43892a;
}

.experiments_grades .grade_heading.grade-c + p {
  background: url(/assets/images/src/icon_grading_warn.svg) left 50% no-repeat;
}

#Custom .grade_heading + p {
  background: url(/assets/images/src/icon_science_bubbling.svg) left 50%
    no-repeat;
  background-size: auto 1.5rem !important;
  background-position: left top !important;
}

.experiments_grades .grade_heading + p strong {
  white-space: nowrap;
  margin-right: 0.3em;
}

.experiments_grades .grade_heading.grade-c + p strong {
  color: #d27a04;
}

.experiments_grades .grade_heading.grade-f + p {
  background: url(/assets/images/src/icon_grading_alert.svg) left 50% no-repeat;
}

.experiments_grades .grade_heading + p {
  background-size: 1.6rem auto !important;
  background-position: top left !important;
}

.experiments_grades .grade_heading.grade-f + p strong {
  color: #dd5000;
}

.experiments_bottlenecks {
  margin: 1em 0 2rem 0rem;
}

.experiments_bottlenecks > ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.experiments_bottlenecks > ol > li > details > summary {
  font-size: 1.1875rem;
  font-weight: 900;
  cursor: pointer;
  margin: 0;
}

.experiments_bottlenecks > ol > li > details > summary:focus {
  outline: none;
  text-decoration: dotted underline #4e8e37;
}

.experiments_bottlenecks img {
  max-width: 150px;
  height: auto;
  border: 5px solid #ddd;
  margin: 0 1em 1em 0;
  display: block;
}

.experiments_details_body {
  padding: 1em 0 1rem 4.5em;
}

.experiments_details_desc > ul {
  width: 100%;
  overflow: auto;
}

.experiments_details_desc > ul li {
  list-style: disc;
  margin-left: 1em;
  white-space: nowrap;
}

.experiments_details_desc p {
  flex: 1 1 40%;
}

.experiments_details_body ol {
  margin: 0.5em 0;
  padding: 0 1rem;
}

.experiments_bottlenecks > ol > li {
  border-bottom: 1px solid #eee;
  padding: 1em 0;
  margin: 0;
}

.experiments_bottlenecks > ol > li:last-child {
  border-bottom: none;
}

.experiments_bottlenecks > p {
  font-size: 0.9em;
  margin: 0.5em 0 0;
  max-width: 40em;
  line-height: 1.4;
}

.experiments_bottlenecks > p {
  font-size: 1rem;
  margin: 1.5em 0;
}

.experiments_bottlenecks > ol > li > details > summary:before {
  content: "";
  background: #6ca71a url(/assets/images/src/icon_grading_check.svg) left 50%
    no-repeat;
  color: #fff;
  border-radius: 100%;
  font-weight: 900;
  width: 1.4em;
  height: 1.4em;
  display: inline-block;
  margin: 0 0.7em 0 0.5em;
  text-align: center;
  line-height: 1.5;
  background-size: contain;
  vertical-align: middle;
}

.experiments_bottlenecks
  > ol
  > li.experiments_details-bad
  > details
  > summary:before {
  background: #d26122 url(/assets/images/src/icon_grading_alert.svg) left 50%
    no-repeat;
  background-size: contain;
}

.experiments_bottlenecks
  > ol
  > li.experiments_details-neutral
  > details
  > summary:before {
  background: #2f80ed url(/assets/images/src/icon_gear.svg) 50% 50% no-repeat;
  background-size: 0.9em auto;
}

h4.experiments_list_hed {
  font-weight: 300;
  margin: 1.3em 0 0;
  color: #4e8f37;
  font-size: 1.3em;
  background: url(/assets/images/src/icon_science_bubbling.svg) left bottom
    no-repeat;
  background-size: 1.6em;
  min-height: em;
  padding: 0em 0 0 1.7em;
  text-transform: capitalize;
}

h4.experiments_list_hed-recs {
  background-image: url(/assets/images/src/icon_code_rec.svg);
  background-position: left 0 bottom -3px;
}

.experiments_list {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
}

.experiments_list > li {
  border: 1px solid #eee;
  padding: 1rem 1.5rem;
  margin: 0.8rem 0;
  border-radius: 0.3em;
  display: flex;
  background: #fafafa;
  gap: 2rem;
}
.experiments_list > li:target {
  background: #f8f7e0;
  scroll-padding-top: 4rem;
}

.experiment_description code {
  font-size: 1.2em;
  word-break: break-word;
  padding: 0.2em 0.4em;
  font-weight: 500;
}

.experiment_description_text h5 {
  font-size: 1rem;
  color: #2a3c64;
  padding: 0;
  font-weight: 900;
  margin: 0 0 1em;
}

.experiment_description_text {
  flex: 1 0 45%;
}

.experiment_description_text h6 {
  font-size: 0.95em;
  font-weight: 900;
  color: #444;
  margin: 1em 0 0;
  text-transform: capitalize;
}

.experiment_description_text h6 a,
.experiment_description_text li a.external {
  font-weight: 500;
  padding-right: 1.6em;
  margin-left: 0.5em;
  background: url(/assets/images/icon-external.svg) right center no-repeat;
}

.experiment_description_text span,
.experiment_description_text .selectbutton {
  font-size: 0.7em;
  padding: 0.2em 0.4em;
  border: 1px solid #666;
  border-radius: 0.2rem;
  text-transform: uppercase;
  font-weight: 500;
  min-width: 10em;
}

.experiment_description_text .recommendation_level-critical span,
.experiment_description_text .recommendation_level-high span {
  border-color: #e33535;
}

.experiment_description_text .recommendation_level-serious span,
.experiment_description_text .recommendation_level-medium span {
  border-color: #e37f35;
}

.experiment_description_text .recommendation_level-moderate span,
.experiment_description_text .recommendation_level-low span {
  border-color: #f1c92e;
}

.experiment_description_text .recommendation_level-minor span {
  border-color: #2a3d64;
}

.experiment_description_text li,
.experiment_description_text p {
  font-size: 0.9em;
  line-height: 1.5;
  color: #444;
  margin: 0 0 1em;
  max-width: 74em;
}

.experiment_description_text li {
  list-style: disc;
  margin: 0.5em 0 0 2em;
}

.experiment_assets {
  margin: 0.5em 0 0;
  color: #555;
}

.experiment_assets-hide {
  display: none;
}

.experiment_assets summary {
  font-weight: 900;
  margin: 0;
  font-size: 0.9em;
  cursor: pointer;
}

.experiment_assets li {
  font-size: 0.8rem;
  word-break: break-all;
}

.experiment_description_text p {
  color: #555;
  margin: 0.5em 0 0;
}

.experiment_description_go {
  flex: 1 0 30%;
  text-align: right;
  align-self: center;
}

.experiment_description_go > label,
.experiment_description_go > a {
  padding: 0.9em 1.5em 0.9em 1.1em;
  background: #fff;
  box-shadow: 0 0 3px rgb(0 0 0 / 10%);
  color: #4e8f37;
  font-weight: 900;
  min-width: 13em;
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 2rem;
  vertical-align: middle;
  text-decoration: none;
}

.experiment_description_go > label.experiment_pair_check {
  min-width: auto;
}

.experiment_description_go > a {
  font-size: 1rem;
  line-height: 1.6;
  color: #0e70b9;
  border-color: #0e70b9;
  font-weight: 700;
  text-align: center;
  box-shadow: none;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  padding-left: 1.5em;
  background: transparent url(/assets/images/src/icon_lock.svg) left 0.8rem top
    50% no-repeat;
  background-size: 1.5rem auto;
}

.experiment_description_go > a .pro_upgrade {
  margin: 0;
  border: none;
  display: inline-block;
  vertical-align: middle;
  width: 8em;
}

.experiment_description_go > a span {
  display: block;
}

.experiment_description_go > a span:last-child {
  display: block;
  font-size: 0.7em;
  font-weight: 500;
  text-transform: uppercase;
  color: #222;
}

.experiment_description_go > label:hover,
.experiment_description_go > a:hover {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.experiment_description_go > label > input {
  margin-right: 1em;
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
}

.experiment_description_go {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: flex-start;
}

.experiment_description_go-multi {
  display: block;
}

.experiment_description_go.experiment_description_go-multi {
  border: 1px solid #ddd;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 0 3px rgb(0 0 0 / 10%);
  background: #fff;
}

.experiment_description_go.experiment_description_go-multi > label {
  display: block;
  border-radius: 0;
  text-align: left;
  border: 0;
  box-shadow: none;
}

.experiment_description_go > label.experiment_pair_check {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
  margin: 0;
}

.experiment_description_go-multi
  label.experiment_pair_check:not(:has(input:checked))
  + label:not(.experiment_pair_value-add) {
  height: 3em;
  overflow: hidden;
}

.experiment_description_go > label.experiment_pair_value {
  border-left: 0;
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.experiment_description_go > label.experiment_pair_value span {
  overflow: hidden;
  text-indent: -999px;
  display: inline-block;
  position: absolute;
}

.experiment_pair_value_addbtn {
  margin: 0 2rem 1rem;
  cursor: pointer;
  display: block;
  float: right;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 2rem;
  padding: 0.3em 1em;
  font-size: 0.9em;
  font-weight: 500;
  color: #4e8e37;
}

.experiment_pair_value_addbtn:hover,
.experiment_pair_value_addbtn:focus {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.experiment_description_go > label.experiment_pair_value-visible {
  padding: 0.1em 1em 0.5em 3.3em;
  display: flex;
  gap: 0.5em;
  align-items: center;
}

.experiment_description_go > label.experiment_pair_value-visible span {
  font-weight: 500;
  text-transform: initial;
  position: relative;
  max-width: 50%;
}

.experiment_description_go > label.experiment_pair_value-visible span em {
  font-size: 0.8em;
  color: #222;
  display: block;
}

.experiment_description_go
  > label.experiment_pair_value-visible
  input[type="text"] {
  border: 1px solid #ddd;
  flex: 1 1 auto;
}


.has-js
  .experiment_description_go:not(.experiment_description_go-checked)
  label:first-child
  ~ * {
  display: none;
}

.experiment_description_go > label.experiment_pair_value input,
.experiment_description_go > label.experiment_pair_value textarea {
  width: 14em;
  margin: 0;
  padding: 1.45em;
  border: 0;
  font-size: 1em;
  font-family: monospace;
  line-height: 1;
}

.experiment_description_go > label.experiment_pair_value textarea {
  width: calc(100% - 4em);
  display: block;
  box-sizing: border-box;
  margin: 0 1em 1em 3em;
  padding: 1em;
  height: 10em;
  border: 1px solid #eee;
  max-width: none;
  line-height: 1.6;
  white-space: nowrap;
  overflow: auto;
}

.experiment_description_go > label.experiment_pair_value textarea:focus {
  outline: none;
  background: #fafafa;
  border: 1px solid #ccc;
}

.experiments_foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4rem;
  border-bottom: 1px solid #ddd;
  margin-top: 10rem;
  margin-left: -3em;
  margin-right: -3em;
  padding: 1.4em 3em 1.4em;
  background: #2a3c64;
  border-right: 0;
  border-left: 0;
}
@media (max-width: 60em) {
  .experiments_foot {
    display: block;
  }
}

.experiments_foot-stick {
  position: sticky;
  bottom: 0;
}

.experiments_foot details {
  position: relative;
  display: inline-block;
}

.experiments_foot details summary {
  cursor: pointer;
  list-style: none;
  padding-left: 1.5em;
  text-decoration: dotted underline #888;
  background: url(/assets/images/src/icon_info_circle_white.svg) left 50%
    no-repeat;
  background-size: 1.2em auto;
}

.experiments_foot details summary::-webkit-details-marker {
  display: none;
}

.experiments_foot details summary:focus {
  outline: none;
}

.experiments_foot details > div {
  position: absolute;
  bottom: 3em;
  color: #333;
  background: #fafafa;
  padding: 1rem;
  border-radius: 1rem;
  font-size: 1rem;
  width: 23em;
  max-width: 90vw;
  box-shadow: 0 0 5px rgb(0 0 0 / 40%);
}

.experiments_foot details div p.experiments_jump {
  color: #333;
  font-size: 1rem;
  margin-bottom: 0.5em;
}
.experiments_foot details div p.experiments_jump i {
  display: block;
  font-weight: 300;
  font-size: 0.8em;
}
.experiments_foot details ol {
  max-height: 70vh;
  overflow: auto;
  list-style: decimal;
  margin: 0;
  padding: 0;
}

.experiments_foot details ol li {
  padding: 0.6em 0;
  font-size: 0.8em;
  border-bottom: 1px solid #eee;
  list-style-position: inside;
}
.experiments_foot details ol li:last-child {
  border: 0;
}
.experiments_foot details ol:after {
  border-top: 0.6em solid rgb(250 250 250);
  border-right: 0.6em solid transparent;
  border-left: 0.6em solid transparent;
  content: "";
  width: 0;
  height: 0;
  left: 50%;
  position: absolute;
  bottom: -0.6em;
  margin-left: -0.6em;
  background-repeat: no-repeat;
}

.experiments_foot details ol button,
.experiments_foot details ol button:focus,
.experiments_foot details ol button:hover {
  background: none;
  box-shadow: none;
  text-decoration: underline;
  border: none;
  color: #409023;
  cursor: pointer;
  display: inline-block;
  width: auto;
  min-width: auto;
  text-align: left;
  font-size: 1em;
  max-width: 70%;
}
.experiments_foot details ol button.experiment_sort {
  border: 1px solid #ccc;
  background: #ddd;
  border-radius: 2em;
  padding: 0.3em 1em 0.3em 0.6em;
  text-decoration: none;
  color: #2a3b64;
  display: inline-flex;
  align-items: center;
  font-size: 0.9em;
  margin-left: 0.5em;
  font-weight: 700;
  float: right;
}
.experiments_foot details ol button.experiment_sort:hover,
.experiments_foot details ol button.experiment_sort:focus {
  background: #fff;
}
.experiments_foot details ol button.experiment_sort:before {
  content: "";
  border-bottom: 6px solid #2a3b64;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  vertical-align: middle;
  margin-right: 0.3rem;
  display: inline-block;
}
.experiments_foot details ol li:first-child button.experiment_sort {
  display: none;
}

.experiments_create {
  margin-bottom: -8rem;
  
}

.experiments_foot > div {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.experiments_foot p:first-child {
  font-size: 1.3rem;
  font-weight: 900;
  margin: 0;
  color: #fff;
}

.experiments_foot p:last-child {
  font-size: 0.9rem;
  font-weight: 900;
  margin: 0 0;
  color: #fff;
  line-height: 1.3;
}

.experiments_foot p:last-child label {
  font-weight: 700;
  text-align: right;
}

.experiments_foot p:last-child label small {
  font-weight: 500;
  text-align: left;
}

.experiments_foot p:last-child input {
  width: 2em;
  height: 1em;
  margin-left: 0.5em;
  padding: 0.4em;
}

.experiments_foot p span {
  font-weight: 500;
}

.experiments_foot input[type="submit"] {
  padding: 0.9em 2em 0.9em 2em;
  color: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  background: #4e8f37;
  font-weight: 900;
  border: 2px solid #fff;
  cursor: pointer;
  border-radius: 2rem;
}

.experiments_foot input[type="submit"]:focus,
.experiments_foot button:focus,
.experiments_foot input[type="submit"]:hover,
.experiments_foot button:hover {
  background: #58a03d;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.experiments_foot input[type="submit"][aria-disabled],
.experiments_foot button[aria-disabled] {
  opacity: 0.9;
  pointer-events: none;
}

.util_overflow_more:not(.util_overflow_more-expanded) {
  overflow: auto;
  max-height: 10em;
  border-bottom: 1px solid #545f50;
  position: relative;
}

.util_overflow_more button {
  position: sticky;
  bottom: 0;
  left: calc(50% - 3em);
  background: #4e8e37;
  border: 1px solid #545f50;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom: 0;
  padding: 0.3em 1em;
  cursor: pointer;
  color: #fff;
}

.util_overflow_more-expanded button {
  display: none;
}

p {
  margin: 0 0 1em 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: #1071ba;
}

a:not([href]) {
  color: #111;
}

a.pill,
input.pill {
  background: #1151bb;
  border-radius: 6.25em;
  padding: 0.6875em 1.4375em;
  line-height: 1em;
  text-decoration: none;
  color: #fff;
}

img {
  border: none;
}

input.checkbox,
input.radio {
  margin: 0 10px 0 0;
  transform: scale(1.3);
}

textarea {
  font-size: 1em;
  overflow-x: hidden;
  height: 8em;
  width: 35em;
  padding: 3px;
  max-width: 99%;
}

#advanced_settings-container textarea {
  width: 100%;
}

#advanced_settings-container textarea.large {
  height: 30em;
}

select,
input[type="text"],
input[type="number"] {
  font-size: 1em;
  padding: 0.6875em 1.3125em;
  border-radius: 4px;
  border: 0px;
  max-width: 90%;
}

select {
  line-height: 1.3em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg width='16' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.7 1.7 8 8 14.3 1.7' stroke='%23000' fill='none' stroke-width='2'/%3e%3c/svg%3e");
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 0.65em auto, 100%;
  background-color: #fff;
}

input[type="number"] {
  padding-left: 0.5em;
  padding-right: 0.3em;
  margin-right: 0.3em;
}

input[type="checkbox"] {
  padding: 0.3em;
}

h2 .small {
  font-weight: normal;
  font-size: 12px;
}

h2 .medium {
  font-weight: normal;
  line-height: 18px;
  font-size: 18px;
}

.hidden,
.input_fields .hidden {
  display: none;
}

.feature-callouts {
  text-align: center;
  max-width: none;
  display: block;
  margin: auto auto 3em;
  background: #182437;
  padding: 3em;
  border-radius: 2rem;
}

.feature-callouts p {
  color: #b2bacb;
  line-height: 1.625em;
}

@media screen and (max-width: 50em) {
  .feature-callouts {
    padding: 1.5rem;
  }
}

@media screen and (min-width: 55em) {
  .tri-col {
    display: flex;
    margin-bottom: 4rem;
  }

  .tri-col > div {
    width: 33%;
    flex-grow: 1;
    margin-right: 1.5em;
    align-self: stretch;
  }

  .tri-col > div:nth-child(3n) {
    margin-right: 0;
  }

  .feature-callouts {
    max-width: none;
  }

  .feature-callouts > div {
    margin-right: 4.375em;
  }

  .feature-callouts > div:last-child {
    margin-right: 0;
  }
}

body.compare footer {
  margin-top: 5em;
}

footer {
  display: block;
  grid-column: 2 / 12;
  margin-top: 4rem;
  padding: 2rem 0;
  color: #333;
  max-width: 1400px;
}

@media (max-width: 87.5em) {
  footer {
    max-width: 94vw;
  }
}

footer ul {
  gap: 1rem;
  font-size: 0.8em;
  color: inherit;
}

footer a {
  color: inherit;
}

footer .logo {
  margin: 0;
  padding: 0;
  width: 200px;
}

footer .footer_social {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #666;
  gap: 0.5em;
  text-align: right;
  justify-content: flex-end;
}

footer .footer_social a {
  border-radius: 100%;
  width: 1.5em;
  height: 1.5em;
  background-color: rgb(20 31 54);
  display: flex;
  padding: 0.2em;
}

footer .footer_social a:hover,
footer .footer_social a:focus {
  background-color: rgb(36 52 86);
}

.home footer .footer_social {
  color: #fff;
}

footer .footer_social img {
  filter: invert(100%);
  width: 80%;
  margin: auto;
}

footer .logo img {
  display: block;
  width: 12em;
  margin: 0;
}

body:not(.home) footer .logo path {
  fill: #142036;
}

body:not(.home) footer .logo img {
  opacity: 0;
}

body.result footer,
footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #fff;
  padding: 3rem 3em;
  width: auto;
  align-items: flex-start;
}

.home footer {
  color: #fff;
}

footer ul li {
  margin-bottom: 1em;
}

footer ul {
  justify-content: center;
  text-align: right;
  font-size: 0.9em;
}

@media (min-width: 85em) {
  footer {
    align-items: center;
    padding-right: 0;
  }

  footer ul {
    display: flex;
    font-size: 1em;
    gap: 2em;
    align-items: center;
  }
}

@media (max-width: 50em) {
  body.result footer,
  footer {
    flex-flow: column;
    padding: 2rem 1.5rem;
  }

  footer ul {
    text-align: left;
    margin: 2rem 0;
  }

  footer ul .footer_social {
    justify-content: flex-start;
  }
}

#header_data {
  flex: 1 1 50%;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  min-width: 60%;
}

.header_data_urltime {
  display: flex;
  gap: 2rem;
  flex-flow: row wrap;
  color: #fff;
}

.header_data_urltime li {
  font-size: 0.9em;
  white-space: pre-wrap;
  font-weight: 300;
  max-width: 30%;
  overflow: hidden;
}

.header_data_urltime li:first-child {
  max-width: 70%;
}

.header_data_urltime li strong {
  font-size: 0.9em;
  font-weight: 500;
  text-transform: uppercase;
  color: #fbe076;
}

.header_data_urltime li a {
  color: inherit;
}

#header_data h1 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5em;
  margin: 0.8rem 0 1.6rem;
  padding-bottom: 0.7em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#header_data h1 img {
  flex: 0 1 8.5em;
  display: block;
  margin-right: 0.4em;
  position: relative;
  bottom: -0.1em;
}

@media (max-width: 50em) {
  #header_data {
    padding-bottom: 2rem;
  }

  #header_data h1 {
    font-size: 1.2em;
  }
}

@media (max-width: 40em) {
  .header_data_urltime {
    flex-flow: column;
    gap: 1em;
  }

  .header_data_urltime li {
    max-width: none;
  }
}

@media (min-width: 30em) {
  #header_data h2 {
    font-size: 1.3em;
  }
}

#header_data .page-tested {
  font-weight: 500;
  color: #2f80ed;
}

#header_data .url {
  word-break: break-all;
  font-weight: 500;
}

.heading_details {
  font-size: 0.875em;
  display: none;
}

.results_nav_contain {
  z-index: 1000;
  border-bottom: 1px solid #ddd;
  background: #fff;
  box-shadow: 0 0 8px #6e6e6e36;
}

.results_and_command {
  display: flex;
  gap: 3em;
  justify-content: space-between;
  margin: 1rem 0 0;
  flex-flow: row wrap;
}

.testinfo_command-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 1em;
  padding: 0;
  grid-column-gap: 1em;
  gap: 1em;
  margin-top: 6.3125em;
  border-bottom: 1px solid #eee;
  flex: 1 0 30%;
  background: transparent;
  border: none;
  text-align: center;
  align-self: flex-start;
  max-width: 25em;
}

.opportunities_summary {
  display: flex;
  border: 1px solid #eee;
  border: 0;
  padding: 0 0 1rem;
  gap: 1rem;
  margin-bottom: 1rem;
}

.results_body .opportunities_summary {
  margin: 1rem 0 0;
}

.result .opportunities_summary {
  margin: 0 0 1rem;
  gap: 3rem;
}

.compare-experiment .opportunities_summary {
  max-width: none;
  margin: 2rem 0 1.5rem;
  gap: 0;
}

.opportunities_summary a {
  border-right: 0;
}

.opportunities_summary a:last-child {
  border-left-width: 0;
}

.opportunities_summary_hed {
  font-weight: 900;
  color: #3c3c3c;
}

.opportunities_summary > p,
.results_header .opportunities_summary > p {
  font-size: 0.9rem;
  margin: 0;
  padding-bottom: 0;
  font-weight: 900;
  color: #111111;
  text-align: right;
  flex: 1 1 15%;
}

.results_header .opportunities_summary > p {
  display: none;
}

.opportunities_summary .grade_heading {
  background: none !important;
  font-size: 1.1rem;
  margin: 0;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding-top: 0;
}

.opportunities_summary a:hover .grade_heading strong,
.opportunities_summary a:focus .grade_heading strong {
  text-decoration: underline;
}

.opportunities_summary p > strong {
  display: inline-block;
  margin-bottom: 1rem;
  color: #2a3c64;
  font-weight: 900;
}
.summary_opps .opportunities_summary h4 {
  display: inline;
}
.summary_opps .opportunities_summary h4 strong {
  display: block;
  margin-bottom: 0.4em;
  font-size: 1.2em;
}
.summary_opps .opportunities_summary h4 span {
  display: inline;
}
.summary_opps .opportunities_summary .grade_anchor p {
  display: inline;
  font-size: 0.9em;
  margin: 0 0 0.4em;
  line-height: 1.4;
}
.opportunities_summary .grade_heading.grade-a > span {
  background: url(/assets/images/src/icon_grading_check.svg) left 50% no-repeat;
}

.opportunities_summary .grade_heading.grade-c > span {
  background: url(/assets/images/src/icon_grading_warn.svg) left 50% no-repeat;
}

.opportunities_summary .grade_heading.grade-f > span {
  background: url(/assets/images/src/icon_grading_alert.svg) left 50% no-repeat;
}

.opportunities_summary .grade_heading span {
  font-weight: 500;
  text-transform: none;
}

.opportunities_summary .grade_heading.grade-a span {
  color: #43892a;
}

.opportunities_summary .grade_heading.grade-c span {
  color: #d27a04;
}

.opportunities_summary .grade_heading.grade-f span {
  color: #dd5000;
}

.opportunities_summary .grade_heading > span {
  padding-left: 1.5em;
  background-position: 50% left !important;
  background-size: auto 1.2em !important;
  min-height: none;
}

.opportunities_summary a {
  padding: 0;
  display: flex;
  gap: 0;
  flex-flow: column;
  justify-content: space-between;
  flex: 1 1 33%;
  text-decoration: none;
  margin: 0;
}

.opportunities_summary .grade_heading > span {
  color: #444;
  font-size: 0.9em;
  display: block;
  line-height: 1.3;
}

.opportunities_summary .opportunities_summary_body {
  color: #222;
  font-size: 0.9em;
  justify-self: flex-start;
  margin: 0em 0.5em 1rem 0;
}

.compare-experiment .opportunities_summary .opportunities_summary_body,
.result-opportunities .opportunities_summary .opportunities_summary_body {
  display: none;
}

.opportunities_summary ul {
  display: flex;
  gap: 0.8em;
  align-items: center;

  justify-content: flex-start;
}
.summary_opps .opportunities_summary ul {
  background: #f6f6f6; 
  border-radius: 0.5em;
  margin: 0.8em 0 0;
  padding: 0.3em 0.8em;
}

.opportunities_summary_opps,
.opportunities_summary_recs,
.opportunities_summary_exps {
  font-size: 0.85em !important;
  font-weight: 500;
  padding: 0 1.8em 0 0;
  color: #111;
  display: flex;
  border-radius: 0.5em;
  align-items: center;
  margin: 0;
  min-height: 2em;
  position: relative;
}

.experiment_summary_label {
  text-indent: -9999px;
}
.summary_opps .experiment_summary_label {
  text-indent: 0;
  font-size: 0.9em;
}
.summary_opps .experiment_summary_label {
  color: #444;
}

.opportunities_summary_opps {
  background: url(/assets/images/src/icon_opportunities.svg) left 0 bottom 50%
    no-repeat;
  background-size: auto 1.4rem;
  padding-left: 2em;
  height: 1em;
}

.opportunities_summary_recs {
  background: url(/assets/images/src/icon_code_rec.svg) left 0 bottom 50%
    no-repeat;
  background-size: auto 2rem;
  padding-left: 2.2em;
  height: 1em;
}

.opportunities_summary_exps {
  background: url(/assets/images/src/icon_science_bubbling.svg) left -0.4em bottom
    0.2em no-repeat;
  background-size: auto 1.8rem;
  padding-left: 2.2em;
  height: 1em;
}

.experiment_summary_count {
  border: 1px solid #aaa;
  display: inline-block;
  border-radius: 100%;
  width: 1.3em;
  height: 1.3em;
  text-align: center;
  font-weight: 900;
  line-height: 1.3;
  text-indent: 0;
  background: #fff;
  color: #333;
}

.experiment_summary_count {
  border: 1px solid #ddd;
  color: #333;
  width: 1.7em;
  height: 1.7em;
  line-height: 1.7;
  text-align: center;
  font-weight: 900;
  font-size: 0.8em;
  position: absolute;
  right: 0;
  margin: 0;
}

.experiments_bottlenecks > ol > li > details > summary {
  padding-left: 2.7em;
  list-style-position: outside;
  margin-left: 1.4em;
  position: relative;
  font-size: 1.1rem;
}

.experiments_bottlenecks > ol > li > details > summary::marker,
.experiments_bottlenecks > ol > li > details > summary::-webkit-details-marker {
  position: absolute;
  left: 0;
  display: block;
  margin: 0;
}
.experiments_bottlenecks > ol > li > details > summary::-webkit-details-marker {
  left: -0.8em;
  top: 0.4em;
}
.experiments_bottlenecks > ol > li > details > summary:before {
  position: absolute;
  left: 0;
}

@media (max-width: 90em) {
  .opportunities_summary {
    display: block;
  }

  .result .opportunities_summary {
    margin-bottom: 0;
  }

  .result-opportunities .opportunities_summary {
    margin-bottom: 3rem;
  }

  .result .opportunities_summary > p {
    text-align: left;
    margin: 0 0 1em;
  }

  .opportunities_summary a {
    flex: 1 0 50%;
    display: block;
    margin: 0 0 1.5em;
  }

  .opportunities_summary a:last-child {
    margin-bottom: 0;
  }

  .opportunities_summary a div p.opportunities_summary_body {
    margin: 0 0 0.5em;
  }

  .experiment_meta {
    display: block;
  }

  .experiment_meta > *:first-child {
    
  }

  .experiments_foot-stick {
    position: relative;
    display: block;
  }

  .experiments_list > li {
    display: block;
  }

  .experiment_description_go {
    justify-content: flex-start;
    margin: 1em 0;
  }

  .experiments_foot > div {
    display: block;
  }

  .experiments_foot p:last-child {
    margin: 1.5em 0;
  }

  .experiments_foot p:last-child label small {
    text-align: left;
  }

  .experiments_foot p input {
    font-size: 1rem;
  }
}

@media (max-width: 50em) {
  .grade_header {
    display: block;
    padding-top: 1rem;
    min-height: auto;
    padding-left: 1.5rem;
  }

  .grade_header .grade_heading {
    font-size: 1.3em;
  }

  .experiments_grades .grade_heading + p {
    background-size: 1.2em auto !important;
    padding: 0;
  }

  .experiments_grades .grade_heading + p strong {
    padding-left: 1.8em;
  }

  .experiments_details_body {
    padding-left: 2rem;
  }
  .opportunities_summary .experiment_summary_label {
    text-indent: -9999px;
  }
}

.experiment_description_go
  > label.experiment_pair_value
  textarea[data-fullscreenfocus="true"]:focus {
  position: fixed;
  top: 10vh;
  left: 10vw;
  right: 10vw;
  bottom: 10vh;
  z-index: 999999;
  box-shadow: 0 0 0 20vw rgb(0 0 0 / 30%);
  height: 80vh;
  width: 80vw;
  margin: 0;
}

@media (max-width: 50em) {
  .grade_header,
  .experiments_foot {
    margin-right: -1.5rem;
    margin-left: -1.5rem;
  }
  .form_clip > .experiments_foot {
    border-radius: 0;
  }
}

.testinfo_meta {
  border-right: 1px solid #e9e9e9;
}

.testinfo_meta,
.testinfo_forms,
.testinfo_artifacts {
  padding: 0;
  border-right: 1px solid #e9e9e9;
}

.testinfo_artifacts {
  justify-self: center;
  font-size: 0.8em;
  position: relative;
  border: 0;
  z-index: 200000;
  cursor: pointer;
  flex: 1 1 30%;
}

.testinfo_forms {
  text-align: left;
}

.testinfo_forms summary {
  font-weight: normal;
  cursor: pointer;
}

.testinfo_forms summary strong {
  font-weight: bold;
  color: #e33535;
  background: url(/assets/images/src/icon_grading_warn.svg) left center
    no-repeat;
  background-size: 1em 1em;
  padding-left: 1.6em;
}

.testinfo_forms summary span {
  display: block;
}

.testinfo_forms details {
  position: relative;
  text-align: left;
}

.testinfo_forms details > div {
  color: #222;
  position: absolute;
  background: #fff;
  padding: 1rem;
  font-size: 0.9em;
  border-radius: 0.5rem;
  top: 1.5em;
  right: 0;
  width: 20rem;
  z-index: 9999;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.testinfo_forms details {
  margin-bottom: 1rem;
}

details.details_custommetrics summary {
  margin: 1em 0;
  cursor: pointer;
}

.testinfo_artifacts-list {
  padding: 0.2em 0;
  background: #fff;
  min-width: 100%;
  text-align: left;
}

.testinfo_artifacts-list li {
  white-space: nowrap;
}

.testinfo_artifacts-list a {
  text-decoration: none;
  color: #333333;
  display: block;
  padding: 0.5em 0;
}

.testinfo_artifacts-list a:hover,
.testinfo_artifacts-list a:focus {
  text-decoration: underline;
  background: #f9f9f9;
}

.testinfo_artifacts-list [data-artifact-json="download"] {
  border-top: 1px solid #e9e9e9;
}

.testinfo_artifacts h3 {
  font-weight: normal;
  border: 1px solid #999;
  font-size: 1rem;
  padding: 0.5em 1em;
  border-radius: 0.5rem;
  margin: 0;
}

.has-js .testinfo_artifacts h3:after {
  background-image: url("data:image/svg+xml,%3csvg width='16' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.7 1.7 8 8 14.3 1.7' stroke='%23000' fill='none' stroke-width='2'/%3e%3c/svg%3e");
  background-repeat: no-repeat, repeat;
  background-size: contain;
  background-color: #fff;
  margin-left: 0.5em;
  top: 0.3em;
  position: relative;
  content: " ";
  display: inline-block;
  height: 0.8em;
  width: 0.8em;
}

.has-js .testinfo_artifacts:hover h3:after,
.has-js .testinfo_artifacts:hover h3:focus {
  transform: rotate(180deg);
  top: -0.1em;
}

.has-js .testinfo_artifacts .testinfo_artifacts-list {
  position: absolute;
  box-shadow: 0px 6.4px 14.4px rgba(0, 0, 0, 0.13),
    0px 1.2px 3.6px rgba(0, 0, 0, 0.11);
  display: none;
  right: 0;
  left: auto;
}

.has-js .testinfo_artifacts:hover .testinfo_artifacts-list,
.has-js .testinfo_artifacts:focus .testinfo_artifacts-list {
  display: block;
}

@media (max-width: 80em) {
  .results_and_command {
    justify-content: flex-start;
  }

  .testinfo_command-bar {
    padding: 0;
    justify-content: flex-start;
    flex: 0 1 auto;
  }
}

@media (max-width: 60em) {
  .results_and_command {
    gap: 0;
    flex-flow: column;
  }

  .testinfo_command-bar {
    margin-top: 0;
  }
}

.test_results-content #headers div,
.test_results-content div.details {
  text-align: left;
}

.test_results-content .link-external {
  font-size: 14px;
}

.test_results-content .link-external::after {
  position: relative;
  top: -4px;
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  background: url(/assets/images/external_header.svg) center center no-repeat;
  background-size: 12px;
}

.test_results-content #headers {
  overflow-wrap: anywhere;
}

.results_header {
  min-height: 6rem;
  padding-bottom: 0.5rem;
  flex: 1 1 60%;
  max-width: 100%;
}

.compare-experiment.compare-loading .results_header {
  padding: 2rem 0 0 6rem;
  background: url(/assets/images/src/icon_science_bubbling.svg) left center
    no-repeat;
  background-size: 6rem auto;
  margin: 6rem 0 0 0;
}

.compare-experiment.compare-loading .results_header h1 {
  margin: 0 0 0.5rem;
}

.results_header p {
  font-size: 1.25rem;
  max-width: 45em;
  line-height: 1.5;
  font-weight: 300;
}

.summary_opps > p,
.result-impact p.try-exps {
  line-height: 1.5;
  font-weight: 500;
  margin: 0;
  max-width: none;
  padding: 0;
  display: flex;
  color: #555;
  justify-content: flex-end;
  font-size: 1em;
  position: relative;
  align-items: center;
  
}
.result-impact p.try-exps {
  margin: 0 0 1em 0;
  width: 100%;
  justify-content: center;
  font-size: 1.1em;
}
.summary_opps > p span,
.result-impact p.try-exps span {
  position: relative;
  background-color: #fff;
  padding: 0.5em 0.4em 0.5em 2.8em;
  font-weight: 700;
  color: #498706;
  border: 1px solid #ddd;
  border-radius: 2rem;
  background-position: left 0.4em top 0.1em;
}
.result-impact p.try-exps span {
  align-items: center;
  display: flex;
  background-position: left 0.4em top 0.4em;
}
.summary_opps > p:before,
.result-impact p.try-exps:before {
  content: "";
  border-top: 1px solid #ddd;
  position: absolute;
  width: 100%;
  top: 50%;
}

.summary_opps > p a,
.result-impact p.try-exps a {
  font-weight: 700;
  font-size: 0.9em;
  padding: 0.5em 1.3em;
  border-radius: 2em;
  background: #1072bb;
  text-decoration: none;
  display: inline-block;
  margin-left: 1em;
  vertical-align: middle;
  color: #fff;
  border: 1px solid #1072bb;
}

.summary_opps > p a:hover,
.summary_opps > p a:focus,
.result-impact p.try-exps a:hover,
.result-impact p.try-exps a:focus {
  background-color: #fff;
  border-color: #448204;
  color: #5c9811;
}

@media (max-width: 60em) {
  .summary_opps > p,
  .summary_opps > p span,
  .result-impact p.try-exps,
  .result-impact p.try-exps span {
    flex-flow: row wrap;
    height: auto;
    border: 0;
    justify-content: flex-start;
    gap: 2em;
    width: 100%;
  }
  .result-impact p.try-exps {
    margin: 2em 0 0;
    max-width: 25em;
  }
  .summary_opps > p span,
  .result-impact p.try-exps span {
    display: block;
    padding-bottom: 0.5em;
    background-position: 0.3em 0.3em;
  }
  .summary_opps > p:before,
  .result-impact p.try-exps:before {
    display: none;
  }
  .summary_opps > p a,
  .result-impact p.try-exps a {
    display: inline-block;
    margin: 0 0.5em;
    flex: 0 0 8em;
    max-width: 8em;
    text-align: center;
  }
  .results_header h2 {
    margin-top: 0.3em;
    font-size: 2.3em;
  }

  .results_header p {
    font-size: 1.1em;
  }
}

@media (max-width: 40em) {
  .results_header h2 {
    margin-top: 0.1em;
    font-size: 1.7em;
  }

  .results_header p {
    font-size: 1em;
  }
  .summary_opps > p a {
    display: block;
    margin: 0.5em 0;
  }
}

.script-block {
  text-align: left;
}

.result_screenshot {
  max-width: 100%;
}

.header_screenshots {
  z-index: 1001;
  order: 2;
  position: relative;
  flex: 0 1 33%;
  margin-top: 0;
  max-height: 350px;
  margin-bottom: -150px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.compare-experiment .header_screenshots {
  flex: 1 1 45%;
}

.compare-experiment #header_data {
  min-width: 50%;
}

.header_screenshots .play {
  height: calc(3em);
  background: url("/assets/images/src/icon_play.svg") 50% no-repeat;
  overflow: hidden;
  text-indent: -999px;
  border-radius: 100%;
  -moz-appearance: none;
  position: absolute;
  bottom: 1em;
  left: 50%;
  cursor: pointer;
  width: 3em;
  background-size: 100%;
  border: 2px solid #2d3c60;
  margin-left: -1.5em;
}

.header_screenshots.playing .play,
.home.playing .play {
  background-image: url("/assets/images/src/icon_playpause.svg");
}

.home.playing .play {
  opacity: 0;
}

.home.playing .play:hover,
.home.playing .play:focus {
  opacity: 0;
}

.header_screenshots {
  position: relative;
  height: auto;
}

.header_screenshots:hover .play,
.header_screenshots video:focus + .play {
  opacity: 1 !important;
  outline: none;
}

video:focus {
  outline: none;
}

.header_screenshots img,
.header_screenshots video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0.7rem;
  border: 5px solid #fff;
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
  display: block;
  height: auto;
}

@media (max-width: 80em) {
  .header_screenshots {
    max-height: 220px !important;
    flex: 1 0 23%;
    justify-content: flex-end;
  }
}

@media (max-width: 60em) {
  .header_screenshots {
    max-height: 220px !important;
  }
}

@media (max-width: 50em) {
  .header_screenshots {
    margin: 0;
    margin-bottom: 1em;
    max-height: 150px !important;
    justify-content: flex-start;
  }

  .header_screenshots img,
  .header_screenshots video {
    max-width: auto;
    max-height: 150px !important;
    box-shadow: none;
    border-radius: 0.5rem;
  }
}

#script_in_results-container {
  clear: both;
  border: 1px solid black;
  padding: 5px;
  margin: 0 0 5px 0;
}

#script_in_results {
  color: #003b5a !important;
  text-decoration: none;
  font-weight: bold;
}

#script_in_results .arrow:after {
  content: "\1433";
  font-size: 0.9em;
  font-weight: normal;
}

#script_in_results.extended .arrow:after {
  content: "\142F";
}

.images {
  overflow-wrap: anywhere;
  width: 100%;
  table-layout: fixed;
}

.images td {
  overflow-x: auto;
  text-align: left;
}

.images td:first-child {
  width: 3em;
}

#average {
  text-align: left;
}

#main {
  padding: 6em 0 1.5rem;
}

.home #main {
  margin: auto;
  width: 100%;
  padding: 0;
}

@media screen and (min-width: 75em) {
  body.result #main {
    display: contents;
    padding-top: 2em;
  }

  body.result .history #main {
    grid-column: 2 / 12;
    min-width: auto;
    width: auto;
    padding-left: 5%;
    padding-right: 5%;
  }
}

body.home #main,
body.result #main {
  grid-column: none;
  display: contents;
}

.home_feature,
.home_content_contain,
.results_header_contain,
.results_nav_contain,
#test_results-container,
#test_results_running-container,
.result footer {
  margin: auto;
  width: 100%;
  grid-column: 1 / 13;
  border: 0;
  align-items: center;
}

.results_header_contain {
  background: #141e33;
  color: #fff;
  width: 100%;
  padding-top: 6rem;
}

.results_grades_contain,
.results_main_contain {
  grid-column: 1 / 13;
  padding: 1em 0;
}

.results_main_contain {
  padding: 0;
}

.home_feature {
  background: transparent;
  padding: 0 0;
  margin-top: 0;
}

.home_feature_hed_contain {
  background-color: #6b25cf;
  background-image: url(/assets/images/wpt_home_swoop.svg),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%237D0688'/%3E%3Cstop offset='1' stop-color='%23150033'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23D617C5' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23D617C5' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.49'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
  background-position: bottom -12px left 50%, bottom 0 left 50%;
  background-repeat: no-repeat, no-repeat;
  background-size: 100%, cover;
}

.home_feature_containslides {
  position: relative;
  margin: 0 auto;
  max-width: 1400px;
}

@media (min-width: 70em) {
  .home_feature_hed_contain {
    background-position: bottom -32px left 50%, bottom -15px left 50%;
  }
}

@media (min-width: 125em) {
  .home_feature_hed_contain {
    background-position: bottom -2.7vw left 50%, bottom -50px left 50%;
  }
}

@media (min-width: 195em) {
  .home_feature_hed_contain {
    background-position: bottom -200px left 50%, bottom -50px left 50%;
  }
}

.home_feature_hed {
  gap: 2rem;
}

.home .play {
  padding: 25% 0 0 0;
  background: #000 url("/assets/images/src/icon_play.svg") 50% no-repeat;
  overflow: hidden;
  text-indent: -999px;
  border-radius: 100%;
  -moz-appearance: none;
  position: absolute;
  bottom: 32.5%;
  left: 50%;
  cursor: pointer;
  width: 25%;
  background-size: 100%;
  border: 0;
  margin-left: -12.5%;
  opacity: 0.9;
  transition: opacity 0.3s;
  box-shadow: 0 0 5px #2a3c64;
  height: 0;
}

@media (min-width: 40em) {
  .home .play {
    width: 100px;
    height: 100px;
    padding: 0;
    margin-left: -50px;
    bottom: calc(50% - 50px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .home_feature_hed,
  .home_feature_hed-pro,
  .home_feature_hed-cc,
  .home_feature_hed-sonar {
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
  }
}

.home_feature_hed-main,
.home_feature_hed-lfwp,
.home_feature_hed-sonar,
.home_feature_hed-cc {
  position: absolute;
  top: 0;
}

.home_feature_hed-cc span.flag {
  background: #66a865;
  color: #fff;
  font-size: 0.9rem;
  vertical-align: top;
  margin-left: 0;
  text-transform: uppercase;
  font-weight: 300;
  padding: 0.2em 0.4em;
  display: inline-block;
  border-radius: 0.4em;
}

.home.feature-cc .home_test_select {
  color: #39702c;
  border-color: #39702c;
}
.home.feature-cc .simpleadvancedfields_contain > input + label:before {
  background-color: #255d24;
}
.home.feature-cc .test_preset_profile span.test_presets_tag {
  background: #255d24;
}
.home.feature-cc #advanced_settings-container {
  background: rgba(0, 0, 0, 0.3);
}

.home_feature_hed-pro {
  position: relative;
}

.home_feature_hed {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
}

.home:not(.feature-pro) .home_feature_hed-pro,
.home:not(.feature-sonar) .home_feature_hed-sonar,
.home:not(.feature-cc) .home_feature_hed-cc,
.home:not(.feature-lfwp) .home_feature_hed-lfwp,
.home.feature-sonar .home_feature_hed-main,
.home.feature-lfwp .home_feature_hed-main,
.home.feature-pro .home_feature_hed-main,
.home.feature-cc .home_feature_hed-main {
  transform: scale(0.8);
  opacity: 0;
  pointer-events: none;
}

.home_feature_hed_contain {
  overflow: hidden;
}


.home.feature-lfwp .home_feature_hed_contain {
  background-color: #352a20;
  background-image: url(/assets/images/wpt_home_swoop.svg),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23776340'/%3E%3Cstop offset='1' stop-color='%2317150C'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23CCB77F' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23CCB77F' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
}

.home.feature-pro .home_feature_hed_contain {
  background-color: #0a234f;
  background-image: url(/assets/images/wpt_home_swoop.svg),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23123D80'/%3E%3Cstop offset='1' stop-color='%23050D26'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23307CD1' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23307CD1' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
}

.home.feature-cc .home_feature_hed_contain {
  background: url(/assets/images/src/energyimpact-clouds.svg),
    url(/assets/images/wpt_home_swoop-cc.svg);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto auto, 104% auto;
  background-position: right 0rem top 9rem, bottom -11px left 50%;
  background-color: #e0f3ff;
}

.home.feature-cc {
  background-color: #559154;
}
.home.feature-cc .home_feature_hed-cc {
  color: #154281;
}

.home_feature_hed_visual {
  box-shadow: 0px 0px 5px 3px #85e0ff45;
}

.pro-flag {
  font-weight: 900;
  background: linear-gradient(302deg, #6ca71a, #3c7b00);
  color: #fff;
  padding: 0.5em;
  line-height: 0.8;
  font-style: normal;
  text-shadow: none;
  -webkit-text-stroke: 0;
  text-transform: capitalize;
  font-size: 0.5em;
  border-radius: 0.5em;
  margin: 0 1em 0 0.4em;
  border: 3px solid #fff;
}

header .pro-flag {
  border-width: 2px;
  align-self: center;
  display: inline-block;
  font-size: 0.8em;
  padding: 0.4em;
}

.result .results_header_contain .pro-flag {
  border-width: 2px;
  margin-right: 1em;
}

.result .opportunities_summary .pro-flag {
  font-size: 0.7em;
  font-weight: 900;
  border-width: 0;
  border-radius: 0.5em;
  margin: 0 0.3em 0 0;
  border: none;
}

.home_feature_hed_text_leadin {
  font-weight: 300;
  margin-right: 0.2em;
}

.home_feature_hed_text_line {
  display: block;
}

.home_feature_hed_contain .pill {
  background: #1151bb;
  border-radius: 6.25em;
  line-height: 1em;
  text-decoration: none;
  color: #fff;
  margin: 1.5rem 0 3em 0em;
  display: inline-block;
  background-color: #00000026;
  font-weight: 700;
  border: 1px solid #fff;
  padding: 0.9em 1.5em;
}

.home_feature_hed_text_logo {
  display: inline-block;
  flex: 1 1 50%;
  width: 100%;
  background-size: contain;
  background-position: left bottom;
  height: auto;
}

.result .home_feature_hed_text_logo {
  width: 8em;
}

.home_feature_hed,
.home_feature_hed-pro,
.home_feature_hed-cc,
.home_feature_hed-sonar,
.home_feature_main {
  display: flex;
  margin: 0 auto;
  max-width: 1400px;
  padding: 3rem 0 5rem;
  justify-content: space-between;
  align-items: flex-start;
}

@media (max-width: 60em) {
  .home_feature_hed,
  .home_feature_hed-pro,
  .home_feature_hed-cc,
  .home_feature_hed-sonar,
  .home_feature_main {
    padding-bottom: 11rem;
  }
}
@media (min-width: 60em) {
  .home_feature_hed,
  .home_feature_hed-pro,
  .home_feature_hed-cc,
  .home_feature_hed-sonar,
  .home_feature_main {
    padding-bottom: 11rem;
  }
}

.home_feature_hed {
  width: 100%;
}

@media (max-width: 87.5em) {
  .home_feature_hed,
  .home_feature_main {
    max-width: 90vw;
  }
}

.home_content,
.results_grades,
.results_main,
.results_nav {
  margin: 0 auto;
  max-width: 1400px;
  padding: 0 3rem;
}

@media (max-width: 50em) {
  .home_content,
  .results_grades,
  .results_main,
  .results_nav {
    padding: 0 1.5rem;
  }
  .home_feature_hed-cc span.flag {
    font-size: 0.7rem;
    vertical-align: middle;
  }
}

@media (max-width: 87.5em) {
  .home_content,
  .results_grades,
  .results_main,
  .results_nav {
    max-width: auto;
  }
}

@media (max-width: 95em) {
  .result .results_nav {
    display: block;
  }

  .result .results_nav .test_meta_commands {
    margin-top: 1rem;
    position: relative;
    z-index: 10000;
  }

  .header_data_urltime {
    display: block;
  }

  .header_data_urltime li {
    max-width: none;
  }
}

@media (max-width: 60em) {
  details.metrics_shown {
    position: relative;
    top: 0;
    right: 0;
  }

  details.metrics_shown p:after {
    right: auto;
    left: 1em;
  }
}

.results_grades h3 {
  font-weight: 500;
  font-size: 1.4rem;
  color: #15264b;
  margin: 0.5em 0 0;
  padding: 0;
}

.results_grades p.results_grades_foot {
  font-size: 0.9rem;
  color: #494949;
}

.results_nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5em 1.5rem;
}

.results_nav_hed {
  padding: 0.6em 0.5em 0.6em 0;
  font-size: 0.9rem;
  margin: 0 0;
  font-weight: 900;
  color: #202d47;
}

@media (min-width: 50em) {
  .results_nav {
    padding-left: 3em;
    padding-right: 3em;
    gap: 2rem;
  }

  .results_nav_hed {
    font-size: 1.1em;
  }
}

.results_nav_pair {
  display: flex;
  align-items: center;
}

.results_nav .test_meta_commands {
  flex: 1 1 30em;
  display: flex;
  gap: 0.5rem;
  position: relative;
  z-index: 999999;
}

.results_nav .test_meta_commands details {
  position: relative;
}

.results_nav .test_meta_commands summary,
.results_nav .test_meta_commands > form > input[type="submit"] {
  list-style: none;
  font-size: 0.9rem;
  display: inline-block;
  padding: 0.8em 2em 0.8em 1em;
  color: #2a3c64;
  border-color: #eee;
  position: relative;
  z-index: 999999;
  border: 1px solid #eee;
  border-radius: 0.4em;
  background-color: #fafafa;
  background-image: url(/assets/images/src/icon_triangledown.svg);
  max-width: 70vw;
  background-repeat: no-repeat;
  background-position: right 0.8em top 50%;
  cursor: pointer;
  font-weight: 900;
}

.results_nav .test_meta_commands > form > input[type="submit"] {
  background-image: none;
  padding-right: 1em;
}

.results_nav .test_meta_commands .test_meta_rerun summary,
.results_nav .test_meta_commands .test_meta_rerun_form input[type="submit"] {
  background-color: #fbe076;
  border-color: #e2d088;
  color: #333;
}

.results_nav .test_meta_commands .test_meta_rerun_form p {
  font-size: 0.9em;
}

.results_nav .test_meta_commands details > form,
.results_nav .test_meta_commands details > ul {
  position: absolute;
  background: #fff;
  padding: 1em;
  border: 1px solid #eee;
  min-width: 20rem;
  margin-top: -1px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.home_feature_hed .attention {
  text-align: left;
  font-weight: 900;
  font-size: 3.3125rem;
  padding: 0;
  margin: 0em 0 0px;
  display: flex;
  line-height: 1.2;
}

.home_feature_hed p {
  font-size: 1.55rem;
  line-height: 1.5;
  margin: 0.5em 0 0;
  max-width: 31em;
}
.home_feature_hed p .home_feature_hed_highlighter {
  color: #ffc763;
}

.home_feature_hed a {
  margin: 1.5rem 0 3em;
  display: inline-block;
  padding: 1em 2em;
  background-color: #fff;
  font-weight: 700;
  color: #1151ba;
  border: 1px solid #222;
  box-shadow: 0 0 5px #fff;
}

.home_feature_hed_visual {
  flex: 0 1 35%;
  border: 6px solid #fff;
  box-shadow: 0px 0px 5px 3px #fe89ff7a;
  background: #fff;
  overflow: hidden;
  position: relative;
  object-fit: contain;
  height: auto;
}

.home_feature_hed-sonar .home_feature_hed_visual {
  border: 0px;
  background: #000;
}

.home_feature_hed-cc .home_feature_hed_visual {
  box-shadow: 0px 0px 5px 3px #d3dfef;
}

.home_feature_hed_visual img,
.home_feature_hed_visual video,
.home_feature_hed_visual iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 65em) {
  .home_feature_hed .attention {
    margin-top: 0.5em;
  }
}

.home_feature_hed_contain {
  padding: 6rem 1.5rem 0;
}

@media (min-width: 50em) {
  .home_feature_hed_contain {
    padding: 6rem 3rem 0;
  }
}

@media (max-width: 90em) {
  .home_content_contain {
    padding: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 60em) {
  .home_content_contain {
    padding-top: 2rem;
  }

  .home_feature_hed_visual {
    margin-bottom: -30px;
  }
}

@media (max-width: 90em) {
  .home_feature_hed_text_line {
    display: inline;
  }
}

@media (max-width: 40em) {
  .home_feature .home_feature_hed .home_feature_hed_text_logo {
    margin: 0.3em 0;
    width: 100%;
    max-width: 300px;
    display: block;
    height: auto;
  }

  .home_feature_hed {
    display: block;
    padding: 2rem 0 5rem;
  }

  .home_feature .home_feature_hed .attention {
    display: block;
    font-size: 2em;
  }

  .home_feature_hed p {
    font-size: 1.4em;
  }
}

@media (max-width: 60em) {
  .home_feature_hed_text_leadin {
    font-size: 1em;
  }

  .home_feature_hed p {
    margin: 0.4em 0 0.8em;
  }

  .home_feature_hed_contain .pill {
    font-size: 0.85em;
    margin: 0;
  }

  .home_feature_hed_visual {
    margin: 2rem 0 -30px;
    display: block;
    max-width: 90vw;
  }
}

.home_feature_hed-lfwp .attention {
  display: block;
}

@media (max-width: 30em) {
  .home_feature_hed .attention {
    font-size: 1.8rem;
  }

  .home_feature_hed p {
    font-size: 1.15rem;
    margin: 0.5em 0 1.2em;
  }
}

@media (min-width: 30em) {
  .home_feature_hed-pro-loggedin {
    padding-bottom: 3rem;
  }
}

@media (min-width: 40em) {
  .home_feature_hed-pro-loggedin {
    padding-bottom: 8rem;
  }  
}

@media (min-width: 60em) {
  .home_feature_hed-pro-loggedin {
    padding-bottom: 13rem;
  }
}

@media (max-width: 70em) {
  .home_feature_hed-pro-loggedin .home_feature_hed_visual {
    display: none;
  }
}

.home_feature img {
  max-width: 100%;
  display: block;
  align-self: flex-end;
  position: relative;
  top: 0.05em;
}

.home_feature_main {
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;
  padding: 0;
  color: #222;
  display: flex;
  padding-bottom: 3rem;
}

@media (max-width: 70em) {
  .home_feature_hed,
  .home_feature_main {
    display: block;
  }
  .home_feature_hed p {
    margin-bottom: 1rem;
  }
}

@media (max-width: 50em) {
  .home_feature_main {
    display: block;
    padding: 0 1.5rem;
  }
}

.home_feature_main_free h2,
.home_feature_main h3 {
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0;
  color: #1072ba;
}

.home_feature_main_free p {
  font-size: 1.1rem;
}

.home_feature_main img {
  object-fit: cover;
  object-position: top;
}

.home_feature_main_pro h2 {
  border-bottom: 1px solid #1072ba;
  padding: 0 0 0.4em 0;
  color: #172a52;
  font-weight: 700;
  font-size: 1.625rem;
}

.home_feature_main_pro_sub {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.home_feature_main_pro_sub p {
  display: inline-block;
  max-width: 55%;
  margin-right: 1rem;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #2a3d64;
}

.home_feature_main_pro a.pill {
  font-size: 1rem;
  margin: 0 1rem;
  background: #330033;
  background-image: url("/assets/images/icon_navigation.svg"),
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='413' height='413' viewBox='0 0 800 800' fill='%23505'%3e%3cpath fill='none' stroke='%23404' stroke-width='2.7' d='m769 229 268 31.9M927 880 731 737l-211-77-211-122-269 61 255 165-168.5 115.5L40 599l-237-106 299-111-133-153L126.5 79.5-69-63m38 292 268 32 153 121 213 111-294.5 44.5-207-156M370 905l-75-141m225-104 58 182 153-105 109-138-237-106-83 167-225 104 14-226 81-156 149-113 230-40L577.5 41.5 370 105 295-36 126.5 79.5 237 261 102 382 40 599-69 737l196 143M520-140l58.5 182.5L731-63M603 493l-64-224-302-8 133-156m532 277L539 269M390 382H102M-222 42l348.5 37.5L370 105l169 164 38.5-227.5L927 80 769 229l133 153-299 111 128 244M295-36l282.5 77.5M578 842l-283-78M40-201l87 281m-25 302-363-113'/%3e%3ccircle cx='769' cy='229' r='6'/%3e%3ccircle cx='539' cy='269' r='6'/%3e%3ccircle cx='603' cy='493' r='6'/%3e%3ccircle cx='731' cy='737' r='6'/%3e%3ccircle cx='520' cy='660' r='6'/%3e%3ccircle cx='309' cy='538' r='6'/%3e%3ccircle cx='295' cy='764' r='6'/%3e%3ccircle cx='40' cy='599' r='6'/%3e%3ccircle cx='102' cy='382' r='6'/%3e%3ccircle cx='127' cy='80' r='6'/%3e%3ccircle cx='370' cy='105' r='6'/%3e%3ccircle cx='578' cy='42' r='6'/%3e%3ccircle cx='237' cy='261' r='6'/%3e%3ccircle cx='390' cy='382' r='6'/%3e%3c/svg%3e");
  background-position: left 0.7em top 50%, 50% 50%;
  background-repeat: no-repeat, repeat;
  background-size: 2rem, auto;
  color: #fff;
  font-weight: 700;
  justify-self: right;
  display: inline-block;
  vertical-align: center;
  align-self: center;
  padding: 1.2em 1.5em 1.2em 2.7em;
  border: 2px solid #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.33);
}

.home_feature_main_pro a.pill:focus,
.home_feature_main_pro a.pill:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
}

.feature_tag {
  font-size: 0.4em;
  background: #1072ba;
  border-radius: 0.3rem;
  padding: 0.3em 0.6em;
  display: inline-block;
  vertical-align: top;
  color: #fff;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  line-height: 1.2;
}

.home_feature_main_pro a.pill span {
  color: #ffc830;
}

.home_feature_main_pro a.pill span b {
  font-size: 1.5em;
  font-weight: 700;
}

.home_feature_main_free {
  flex: 1 1 30%;
}

.home_feature_main_pro {
  flex: 1 1 65%;
}

.home_feature_main_pro_content {
  display: flex;
  gap: 2rem;
}

.home_feature_main_pro_content > div {
  flex: 1 1 50%;
}

.home_feature_main_pro_content img {
  height: 23rem;
  border-radius: 20px;
}

@media (max-width: 85em) {
  .home_feature_hed .attention {
    font-size: 2.3rem;
  }

  .home_feature_hed_text_logo {
    width: 290px;
    flex: 0 1 auto;
    top: 0;
  }
}

.home_feature_hed-lfwp .attention .home_feature_hed_text_leadin {
  font-style: italic;
  margin-right: 0.2em;
}

.home_feature_hed-lfwp b.flag {
  background: #ffffff;
  padding: 0.1em 0.5em;
  font-size: 0.7em;
  display: inline-block;
  border-radius: 0.4em;
  color: #5b482f;
  margin-right: 0.5em;
  vertical-align: middle;
  font-weight: 700;
}

@media (min-width: 85em) {
  .home_feature_hed-lfwp .attention {
    font-size: 2.8rem;
  }
}

@media (min-width: 85em) {
  .home_feature_hed_text_logo {
    width: 400px;
    top: -0.08em;
  }
}

.home_responsive_test h2 {
  font-size: 2.5rem;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  gap: 0.5em;
}

.home_responsive_test fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.home_responsive_test .home_test_select,
nav.link_select {
  color: #1a2a4a;
  font-weight: 700;
  display: inline-block;
  position: relative;
  width: 13em;
  font-size: 0.8em;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #4a6699;
  appearance: none;
  padding: 0.1em 2em 0.1em 0.8em;
  margin: 0;
  background-image: url("data:image/svg+xml,%3csvg width='16' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.7 1.7 8 8 14.3 1.7' stroke='%231a2a4a' fill='none' stroke-width='2'/%3e%3c/svg%3e");
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%;
  background-size: 0.65em auto, 100%;
  background-color: #fff;
  cursor: pointer;
  border-radius: 0.5rem;
}

nav.link_select {
  font-size: 1.1rem;
  display: inline-block;
  padding: 0.8em 2em 0.8em 1em;
  color: #1072ba;
  border-color: #eee;
  position: relative;
  z-index: 999999;
  width: auto;
  min-width: 20rem;
  background-image: url("/assets/images/src/icon_triangledown.svg");
  max-width: 70vw;
}

@media (max-width: 60em) {
  .home_responsive_test h2 {
    font-size: 1.7em;
    line-height: 1.5;
  }

  .home_responsive_test .home_test_select {
    max-width: 75%;
    line-height: 1.5;
  }

  nav.link_select {
    min-width: 20em;
    max-width: 70%;
    font-size: 0.9em;
  }
}

.home_responsive_test .home_test_select ul,
nav.link_select ul {
  visibility: hidden;
  height: 0;
  position: absolute;
  overflow: hidden;
  z-index: 1000;
}

nav.link_select ul,
nav.link_select li {
  text-align: left;
  display: block;
}

.home_responsive_test .home_test_select ul a,
nav.link_select ul a {
  color: #222;
  display: block;
  text-decoration: none;
  font-weight: 500;
  padding: 0.2em 1em;
  font-size: 0.8em;
}

@media (max-width: 40em) {
  .home_responsive_test h2,
  .home_responsive_test h2 span:first-child {
    display: block;
  }
}

@media (max-width: 60em) {
  .home_responsive_test .home_test_select ul a {
    padding: 0.5em 1em;
  }
}

nav.link_select ul a {
  padding: 0.8em 1em;
  font-size: 1em;
  text-align: left;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav.link_select li.current a,
nav.link_select li.current a:hover,
nav.link_select li.current a:focus {
  border: 0;
  background: #2a3d64;
  pointer-events: none;
  cursor: default;
  color: #fff;
}

.home_responsive_test .home_test_select ul li:last-child a,
nav.link_select ul li:last-child a {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.home_responsive_test .home_test_select ul a:hover,
nav.link_select ul a:hover,
.home_responsive_test .home_test_select ul a:focus,
nav.link_select ul a:focus {
  background: #eee;
}

.home_responsive_test .home_test_select:focus,
.home_responsive_test .home_test_select:hover,
nav.link_select:focus,
nav.link_select:hover {
  background-color: #fff;
  color: #222;
  border-color: #4a6699;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 0 30px rgba(47, 128, 237, 0.5);
  background-image: url("data:image/svg+xml,%3csvg width='16' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.7 1.7 8 8 14.3 1.7' stroke='%23222' fill='none' stroke-width='2'/%3e%3c/svg%3e");
}

nav.link_select:focus,
nav.link_select:hover {
  color: #1072ba;
  box-shadow: 0 0 10px rgba(47, 128, 237, 0.5);
  background-image: url("/assets/images/src/icon_triangledown.svg");
}

.home_responsive_test .home_test_select:focus ul,
.home_responsive_test .home_test_select:focus-within ul,
.home_responsive_test .home_test_select:hover ul,
nav.link_select:focus ul,
nav.link_select:focus-within ul,
nav.link_select:hover ul {
  visibility: visible;
  left: -1px;
  height: auto;
  overflow: visible;
  border: 1px solid #4a6699;
  border-top: 0;
  top: 100%;
  background: #fff;
  padding: 0;
  margin: 0;
  width: 100%;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

nav.link_select:focus ul,
nav.link_select:focus-within ul,
nav.link_select:hover ul {
  top: 2.8em;
}

.test_main_config {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.test_presets {
  flex: 1 1 auto;
}

.test_presets_easy {
  display: flex;
  flex-flow: row wrap;
}

@media (max-width: 50em) {
  .test_presets,
  .test_presets_easy,
  .test_main_config {
    display: block;
    flex: none;
  }

  .home select#location {
    max-width: 85%;
  }

  #header_data .test_presets li strong,
  #header_data .test_presets li span {
    font-size: 0.85em;
  }
}

.test_presets_easy_checks {
  flex: 1 1 20em;
  max-width: none;
  width: auto;
  padding-bottom: 2rem;
}

.test_presets_easy .fieldrow:first-child {
  flex: 1 1 30em;
}

label small {
  display: block;
}

.test_presets_easy .profiles {
  padding: 0;
}

.test_presets_easy .profiles input {
  align-self: center;
}

.test_presets_easy_submit {
  align-self: flex-start;
  justify-self: flex-end;
  flex: 1 1 auto;
  text-align: right;
  padding-bottom: 2rem;
}

.test_presets_hed {
  font-size: 1em;
  margin: 0 0 1.5em;
  color: #fff;
  font-weight: 500;
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.test_presets_hed span {
  background-color: #1d2b48;
  margin-bottom: -0.6em;
  padding-right: 1em;
  display: inline-block;
}

.input_fields .test_presets ul,
.test_presets ul,
.test_presets .test_preset_profile {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  flex-flow: row wrap;
}

.input_fields .test_presets li,
.test_presets li,
.test_preset_profile span {
  margin: 0;
  padding: 0;
  width: auto;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.test_presets_more summary {
  list-style: none;
}

.test_presets_more .test_presets_tag {
  padding-right: 1.3rem;
  background-image: url(/assets/images/src/icon_triangledown.svg);
  background-repeat: no-repeat;
  background-position: right 0.5em top 50%;
  background-size: 0.7em auto;
  background-color: #1c3544;
  cursor: pointer;
}

.test_presets_more-share .test_presets_tag {
  background-image: url(/assets/images/src/icon_triangledown.svg),
    url(/assets/images/icon-send.svg);
  padding-left: 1.5rem;
  background-size: 0.7em auto, 0.9em auto;
  background-position: right 0.5em top 50%, left 0.5em top 50%;
}

.test_presets_more .details_contain {
  position: absolute;
  background: #1c3544;
  width: 30rem;
  padding: 1rem;
  z-index: 9999999;
  box-shadow: 0 0 5px #00000073;
  border-radius: 0.5rem;
  max-width: 80vw;
}

.test_presets_more .details_contain * {
  color: #fff;
}

.test_presets_more .details_contain ul {
  display: block;
}

.test_presets_more .details_contain li {
  display: block;
  padding: 0.5em 0;
}

.test_presets_more .details_contain li pre {
  background: #fff;
  color: #0e0e0e;
  padding: 1em;
  overflow: auto;
}

.meta_exp_applied_list li {
  padding: 0;
}

.meta_exp_applied_list summary::-webkit-details-marker {
  display: none;
}

.meta_exp_applied_hed {
  padding: 0;
  margin: 0.5em 0 0;
}

ul.meta_exp_applied_list {
  margin-bottom: 0.3em;
}

.meta_exp_applied_list li summary {
  list-style: none;
  padding: 0.2em 0rem;
  cursor: pointer;
  border-radius: 1rem;
  font-size: 0.9em;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.meta_exp_applied_list li summary:before {
  content: "";
  background: rgba(255, 255, 255, 0.8);
  border-radius: 100%;
  background-image: url(/assets/images/src/icon_triangledown.svg);
  background-repeat: no-repeat;
  background-position: left 50% bottom 50%;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.5em;
  display: inline-block;
}

.meta_exp_applied_list li summary + * {
  margin-left: 1.4em;
}

.meta_exp_applied_list li h3,
.meta_exp_applied_list li p {
  font-size: 0.9rem;
  margin: 0;
}

.meta_exp_applied_list li details ul {
  margin: 0;
  padding: 0 1em;
}

.meta_exp_applied_list li details li {
  padding: 0 !important;
  margin: 0;
  font-size: 0.9rem;
}

.input_fields.home_responsive_test_top li {
  margin: 0;
  padding: 0;
}

.input_fields .test_presets li strong,
.test_presets li b,
.test_presets li strong,
.test_preset_profile strong {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.875rem;
}

.test_presets li b {
  color: #fbe076;
}

.test_preset_profile strong {
  min-width: 5em;
}

.codeflask-container {
  display: contents;
}

.codeflask-container .codeflask {
  position: relative;
  height: 400px;
}

.result .test_presets li {
  flex-flow: row wrap;
}

@media (max-width: 50em) {
  .test_presets_more .details_contain {
    right: 1.5rem;
    margin-top: 0.5em;
    font-size: 0.9em;
  }
}

@media (max-width: 28em) {
  .test_presets_easy .profiles input {
    align-self: flex-start;
  }

  .test_preset_profile strong {
    min-width: 4em;
  }
}

.input_fields .test_presets li img,
.test_presets li img,
.input_fields .test_presets li span,
.test_presets li span,
.test_preset_profile span,
.test_preset_profile img {
  display: inline-block;
  margin: 0 0.1em;
  width: auto;
  max-height: 20px;
}

.input_fields .test_presets li span,
.test_presets li span,
.test_preset_profile span {
  background: #2a3d64;
  border-radius: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  padding: 0.2em 0.5em;
  line-height: 20px;
  display: flex;
  gap: 0.5em;
  flex-flow: row wrap;
}

span.test_presets_tag-label {
  display: inline-block !important;
  background: #fce075 !important;
  color: #333333 !important;
  max-width: 10em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

span.test_presets_tag-experiment {
  background: #5d9910 !important;
  color: #fff !important;
}

.test_presets .test_preset_profile {
  gap: 0;
  padding: 1em;
  border-bottom: 1px solid #2a3d64;
}

@media (max-width: 30em) {
  .test_presets .test_preset_profile {
    padding-left: 0;
    padding-right: 0;
  }
}

.test_presets .test_preset_profile:first-child {
  padding-top: 0;
}

.test_presets .test_preset_profile:last-child {
  border: 0;
}

.test_preset_profile > span {
  background-color: transparent;
  padding: 0;
  max-height: none;
}

.test_preset_profile > span.test_preset_profile_tt {
  position: absolute;
  background: rgb(255 255 255 / 93%);
  bottom: 110%;
  color: #1a2a4a;
  width: auto;
  min-width: 20em;
  left: 1.5em;
  padding: 1.5em;
  display: none;
  box-shadow: 0 0 5px #a90da5;
  font-size: 1rem;
  max-width: 80vw;
}

span.test_preset_profile_tt:after {
  border-top: 0.6em solid rgb(255 255 255 / 93%);
  border-right: 0.6em solid transparent;
  border-left: 0.6em solid transparent;
  content: "";
  width: 0;
  height: 0;
  left: 2em;
  position: absolute;
  bottom: -0.6em;
  background-repeat: no-repeat;
}

.home .test_preset_profile {
  position: relative;
}

.test_preset_profile:hover span.test_preset_profile_tt,
.test_preset_profile input:focus + span + span.test_preset_profile_tt {
  display: block;
}

.fieldrow .test_presets .test_preset_profile input[type="radio"] {
  align-self: center;
}

.test_presets + div {
  flex: 1 1 15%;
  justify-self: right;
  align-self: flex-end;
  text-align: right;
}



.test_runs {
  color: #fff;
  display: block;
  font-size: 0.9rem;
  margin: 0 0 0.8em;
  padding: 0 0.5em 0 0;
  white-space: nowrap;
}

.test_runs span,
.test_runs a {
  color: inherit;
  display: inline-block;
}

.test_runs-warn span {
  background: url(/assets/images/src/icon_grading_alert.svg) no-repeat;
  background-size: contain;
  background-position: left center;
  padding-left: 1.8em;
}

.test_runs-warn + input[aria-disabled] {
  opacity: 0.7;
  pointer-events: none;
}

#description:empty {
  display: none;
}

.compare #main {
  padding: 2em 0;
  max-width: none;
  width: auto;
}

.compare .test_results_header {
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.key {
  margin: 0;
  font-size: 0.8em;
  display: flex;
  gap: 1rem;
}

.key li {
  padding: 0.4em 0;
  display: flex;
  align-items: center;
}

@media (max-width: 80em) {
  .key {
    flex-flow: column;
    gap: 0.5em;
    margin-bottom: 1em;
  }
}

.key b {
  width: 0.8em;
  height: 0.8em;
  display: inline-block;
  margin-right: 0.5em;
}

.compare_key h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0;
}

.waterfall-sliders {
  padding: 0 0 1em;
  margin: 0;
  font-size: 0.9em;
  border-bottom: 1px solid #eee;
}

.waterfall-sliders summary {
  font-weight: 700;
  cursor: pointer;
}

.waterfall-sliders summary em {
  font-weight: 500;
  font-style: normal;
}

.waterfall-sliders label {
  font-weight: 500;
  display: flex;
  margin: 0.5em 0;
  gap: 1rem;
}

.waterfall-sliders label span,
.waterfall-sliders label input {
  display: block;
  flex: 0 1 50%;
}

.waterfall-sliders label span {
  flex: 0 0 30%;
  overflow: auto;
}

.compare_meta h2 {
  margin-top: 0;
}

.compare_video_form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding: 1rem 0;
  margin: 1rem 0;
}

@media screen and (min-width: 50em) {
  .compare .test_results_header {
    padding: 1em 0;
    display: flex;
    justify-content: space-between;
  }

  .compare_settings {
    padding-top: 0;
    border-left: 1px solid #ddd;
    padding-left: 3vw;
    margin-bottom: 1rem;
    flex: 0 1 20%;
    order: 3;
    min-height: 3.6rem;
  }

  .compare_key {
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .compare_key h3 {
    margin-top: 0;
    padding: 0;
  }
}

@media screen and (min-width: 80em) {
  .compare_key {
    align-items: center;
  }
}

h1.attention {
  font-weight: 700;
  font-size: 2.125em;
  text-align: center;
  margin: 0.4em auto 1.1em;
  line-height: 1.4;
  padding: 0 1rem;
}

@media (min-width: 40em) {
  h1.attention {
    font-size: 3.125em;
  }
}

h2.alt {
  font-weight: 500;
  color: #fff;
  font-size: 1.675em;
  display: block;
  margin: 0 0 0.5em;
}

h2.light {
  text-align: center;
  margin: auto;
  font-weight: 700;
  font-size: 1.875em;
  color: #fff;
  margin-bottom: 1.233333333em;
}

@media (max-width: 60em) {
  .home_content h2.light {
    font-size: 1.5em;
    text-align: left;
  }
}



.history_hed {
  padding: 0 2rem;
}

table.history,
table.checklist {
  font-size: 0.875em;
  margin: 0;
}

table.history.pretty,
table.checklist.pretty {
  margin: 0;
  min-width: 100%;
}

table.history tbody tr th {
  width: 1%;
}

table.history thead th.pin {
  border-left: 0;
}

table.history tbody td {
  padding: 1em;
}

table.history tbody th {
  text-align: center;
}

.history table {
  text-align: left;
}

.history thead {
  text-align: left;
}

.history th,
.history td,
table.checklist th,
table.checklist td {
  white-space: nowrap;
  border: 1px solid #ddd;
  padding: 0.4rem 1rem;
}

.history th,
.history td {
  text-align: left;
  padding: 1rem;
}

.history th.date,
.history td.date {
  white-space: nowrap;
  text-align: left !important;
}

.history td.location {
  white-space: nowrap;
  max-width: 500px;
  overflow: auto;
}

.history td.url {
  white-space: nowrap;
  max-width: 30vw;
  overflow: auto;
}

.history td.ip {
  white-space: nowrap;
}

.history td.uid {
  white-space: nowrap;
}

table.history .label b:not(:empty) {
  font-weight: normal;
  background: #1151bb;
  border-radius: 20px;
  color: #fff;
  display: inline-block;
  padding: 0.25em 1em;
}

table.history .date {
  text-align: right;
}

form[name="filterLog"] input[type="text"] {
  border: 1px solid #999;
  width: 12%;
}

form[name="filterLog"] {
  margin-bottom: 1.3em;
}

form[name="filterLog"] select {
  border: 1px solid #999;
  display: inline-block;
  width: auto;
  margin-bottom: 2em;
}

form[name="filterLog"] select[name="days"] {
  margin-bottom: 0;
  padding-right: 30px;
  display: block;
}

.history_filter {
  margin: 1em 0;
  border-top: 1px solid #eee;
  padding: 1em 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

form[name="filterLog"] .history_filter input[type="text"] {
  width: auto;
}

.history tbody th input {
  text-align: center;
  display: inline-block;
  margin: 0 auto;
}

.history-controls {
  border-bottom: 1px solid #ddd;
  padding-left: 0;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

#CompareBtn,
#runningHeader #CompareBtn {
  position: relative;
  background: #fff url("/assets/images/icon-compare.svg") 1em center no-repeat;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 0.6em 1.5em 0.6em 1.8em;
  margin: 0.5em 0;
  text-indent: 1em;
  display: inline-block;
  cursor: pointer;
}

#CompareBtn:hover {
  background-color: #eee;
  border-color: #ccc;
}



.chart_node {
  text-align: center;
  vertical-align: middle;
  font-family: arial, helvetica, sans-serif;
  cursor: default;
  border: 2px solid #b5d9ea;
  background-color: #edf7ff;
  white-space: nowrap;
}





#page-images .images td {
  vertical-align: top;
  padding-bottom: 1em;
}





#test_box-container {
  grid-column: 3 / 10;
  margin-bottom: 4em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.home #test_box-container {
  border-bottom: 0;
  margin-bottom: 0;
}

#test_box-container .test_subbox {
  position: relative;
}

.test_subbox .input_fields li,
.input_fields .fieldrow {
  align-items: flex-start;
}

#test_box-container .notification-container {
  background: #f9d856;
  color: #111;
  border-radius: 10px;
  padding: 1.875em;
  margin-top: 1em;
}

.notification .message a {
  color: #093b80;
}

.ui-tabs-nav {
  width: 100%;
}



@media screen and (min-width: 35em) {
  .ui-tabs-nav:not(.ui-tabs-nav-advanced) {
    display: flex;
    align-items: stretch;
  }
}



@media screen and (min-width: 50em) {
  .ui-tabs-nav {
    display: flex;
    align-items: stretch;
  }

  .ui-tabs-nav svg {
    height: 2em;
  }
}

.ui-tabs-nav li {
  flex-grow: 1;
  text-align: left;
  display: flex;
  font-size: 1em;
  line-height: 1.3em;
}

.ui-tabs-nav svg {
  width: 2em;
  height: 2em;
  display: block;
  margin: auto auto 1em auto;
}

.ui-tabs-nav a {
  text-decoration: none;
  background: #395583;
  display: block;
  font-weight: 700;
  width: 100%;
  padding: 1.1875em 1em 1.4875em;
  border-bottom: 1px solid #121d35;
  transition: background 0.1s ease-in-out;
}

@media screen and (min-width: 50em) {
  .ui-tabs-nav svg {
    margin-right: 0.375em;
    position: relative;
    top: 0.3em;
    height: 1.375em;
    width: auto;
    display: inline-block;
    margin-bottom: 0;
  }

  .ui-tabs-nav a {
    padding: 1.1875em 0 1.4875em;
  }

  .ui-tabs-nav li {
    font-size: 1em;
    text-align: center;
  }
}

@media (min-width: 35em) {
  .ui-tabs-nav a {
    border-bottom: 0;
    border-left: 1px solid #121d35;
  }

  .ui-tabs-nav li:last-child {
    border-right: 1px solid #2f80ed;
    border-top-right-radius: 10px;
  }

  .ui-tabs-nav li:first-child a {
    border-left: 0px;
    border-top-left-radius: 10px;
  }

  .ui-tabs-nav li:last-child a {
    margin-right: 1px;
    border-top-right-radius: 10px;
  }
}

.ui-tabs-nav li.ui-tabs-selected a {
  background: #1151bb;
}

.ui-tabs-nav li:hover a {
  background: #4f6890;
}

.ui-tabs-nav li.ui-tabs-selected a:hover {
  background: #1151bb;
}

#advanced_settings-container .ui-tabs-hide {
  display: none;
}

.test_box {
  padding: 2em 0 5em;
}

.test_box a {
  color: #fff;
}

#advanced_settings {
  color: #f9d856;
  font-size: 1.15em;
  text-decoration: none;
  margin: 1.5em 0 0;
  font-weight: 700;
  display: block;
}

#advanced_settings::after {
  content: "";
  border-left: 0.3em solid #f9d856;
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  width: 0;
  height: 0;
  padding: 0;
  line-height: 0;
  position: absolute;
  margin: 0.4em 0.6em;
}

#advanced_settings.extended::after {
  transform: rotate(90deg);
}

#advanced_settings-container {
  background: #24334f;
  border-radius: 10px;
  margin-top: 2rem;
}

#test_subbox-container > div {
  padding: 1em 1.875em 2.25em;
}

#advanced_settings-container .ui-tabs-nav {
  border-bottom: 1px solid #111e36;
}

#advanced_settings-container .ui-tabs-nav li a,
#advanced_settings-container .ui-tabs-nav li:last-child {
  border-width: 0;
  background: transparent;
}

#advanced_settings-container .ui-tabs-nav a {
  color: #ccc;
  transition: color 0.1s ease-in-out;
}

#advanced_settings-container .ui-tabs-nav a:hover {
  color: #c0c0c0;
}

#advanced_settings-container .ui-tabs-nav li.ui-tabs-selected a {
  color: #fff;
  font-weight: bold;
  border-bottom: 2px solid #f9d856;
}

.simpleadvancedfields .chromium-hide:before {
  content: "These features are disabled because a non-Chromium browser is selected.";
}

.input_fields li,
.input_fields .fieldrow {
  width: 100%;
  padding-bottom: 1em;
  align-items: center;
  margin-bottom: 1em;
}

.input_fields .fieldrow-profiles {
  align-items: flex-start;
}

.input_fields #description {
  margin-bottom: 2em;
}

.input_fields li input[type="checkbox"],
.input_fields li input[type="radio"],
.input_fields .fieldrow input[type="radio"],
.input_fields .fieldrow input[type="checkbox"] {
  margin-top: 0.2em;
}

.input_fields li input[type="radio"],
.input_fields .fieldrow input[type="radio"] {
  margin-left: 0;
}

.input_fields label input[type="radio"],
.input_fields label input[type="checkbox"] {
  display: inline-block;
  margin-right: 0.5rem;
}

.input_fields select,
.input_fields .inputpair {
  max-width: 100%;
  width: 100%;
}

.input_fields fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex: 1;
  flex-flow: row wrap;
}

.input_fields legend {
  padding: 0;
  margin-bottom: 0.5em;
}

.input_fields fieldset label {
  flex: 1 1 auto;
}

@media screen and (min-width: 50em) {
  .input_fields li,
  .input_fields .fieldrow {
    display: flex;
    flex-wrap: wrap;
  }

  .test_presets_easy_checks .fieldrow {
    display: block;
  }

  div .input_fields label,
  div .input_fields .label {
    width: 28%;
  }
  [for="simple"] + div .input_fields label,
  [for="simple"] + div .input_fields .label {
    width: 100%;
  }

  .input_fields .label {
    padding: 0;
  }

  .input_fields label.full {
    width: 100%;
  }

  .input_fields select {
    width: 50%;
  }

  .input_fields #description {
    padding-left: 28%;
    width: auto;
  }

  .input_fields legend {
    float: left;
    width: 28%;
  }

  .input_fields .configuration {
    margin-left: 28%;
    margin-top: 1.5em;
  }

  .input_fields .configuration td {
    padding-right: 1em;
  }
}

#test_box-container label.full_width {
  float: none;
  width: auto;
  display: block;
}

#test_box-container label.auto_width {
  float: none;
  width: auto;
  display: block;
}

#test_box-container label small {
  opacity: 0.8;
}

.pending_tests {
  padding-left: 1em;
}

#url {
  width: 100%;
  max-width: 100%;
  margin-bottom: 2em;
  border: 0px;
  box-sizing: border-box;
  border-radius: 2rem;
  margin-top: 0;
}

@media screen and (min-width: 60em) {
  #url {
    font-size: 1.25em;
    padding: 0.9em 1.5em;
  }
}

input[type="submit"],
button.start_test,
a.btn-primary {
  border: 0;
  border-radius: 4px;
  padding: 0.6875em 1em;
  background: #f9d856;
  font-size: 1em;
  cursor: pointer;
  color: #111;
  text-decoration: none;
}

input[type="submit"].start_test,
button.start_test,
a.btn-primary {
  border-radius: 4px;
  height: 100%;
  font-size: 1.25em;
  padding: 0.9em 1.5em;
  align-self: flex-start;
  margin-left: 0;
  cursor: pointer;
  -webkit-appearance: none;
  justify-self: flex-end;
}

input[type="submit"]:hover,
button.start_test:hover,
a.btn-primary {
  background: #fbe076;
}

a.btn-primary:hover {
  background: #fbe076;
}

a.btn-primary-compact {
  font-size: 1em;
  padding: 0.3125em 1.1em;
  display: inline-block;
  margin: 0;
  border-radius: 1em;
}

@media screen and (min-width: 50em) {
  input + input[type="submit"].start_test,
  input + div + input[type="submit"].start_test,
  input + div + button.start_test,
  input + button.start_test {
    border-radius: 0 4px 4px 0;
  }
}

@media (max-width: 40em) {
  input[type="submit"].start_test,
  button.start_test {
    font-size: 1em;
  }
}

.history .logged-out-history .btn-primary {
  height: auto;
  font-size: 1em;
  text-align: center;
  margin: 1em 0;
  display: inline-block;
}

@media (min-width: 60em) {
  .history .logged-out-history {
    display: grid;
    grid-template-columns: 4fr 12em;
    grid-column-gap: 4em;
    align-items: center;
  }

  .history .logged-out-history p {
    margin-bottom: 0;
  }

  .history .logged-out-history .btn-primary {
    margin: 0;
  }
}

label.test_preset_profile {
  display: flex;
  width: auto;
  padding: 0.5rem 0;
}

#change-location-btn {
  border: 1px solid #fff;
  color: #fff;
  padding: 0.7em 1em 0.7em 1.5em;
  font-size: 1em;
  border-radius: 4px;
  margin-top: 1em;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
  background: url("/assets/images/icon-map.svg") 50% 50% no-repeat transparent;
  width: 1em;
  text-indent: -999px;
  overflow: hidden;
}

#change-location-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

@media screen and (min-width: 50em) {
  #change-location-btn {
    margin-left: 0.25em;
    margin-top: 0;
  }
}

#simplemodal-overlay {
  background-color: #000;
  z-index: 9999999 !important;
}

#simplemodal-container {
  background-color: #fff !important;
  padding: 5vh 5vw;
  position: fixed;
  z-index: 99999999 !important;
  height: 80vh !important;
  width: 80vw !important;
  left: 5vw !important;
  top: 5vh !important;
  border: 0;
  overflow: auto !important;
  bottom: 5vh !important;
  border-radius: 1em;
}

#new-portal-dialog-container {
  height: 312px !important;
  max-height: 600px;
  min-width: 400px; 
  width: 50vw !important;
  max-width: 600px;
  background-color: #fff !important;
  padding: 20px;
  position: fixed;
  z-index: 99999999 !important;
  overflow: auto !important;
  border-radius: 10px;
}

#new-portal-dialog {
  display: flex;
  flex-direction: column;
  gap: 2em;
  height: 100%;
}

#new-portal-dialog .dialog-title {
  color: #111;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}

#new-portal-dialog .dialog-body {
  color: #111;
  display: flex;
  flex-direction: column;
  flex: 1;
} 

#new-portal-dialog .dialog-footer {
  display: flex;
  justify-content: flex-end;
}

#new-portal-dialog .dialog-close-btn {
  font-size: 1.4rem;
  width: 1.4em;
  height: 1.4em;
  line-height: 1;
  position: relative;
  border: none;
}

#new-portal-dialog .simplemodal-close {
  border: none;
  cursor: pointer;
  background: transparent;
  margin: 0;
  font-size: 1.4rem;
  width: 1.4em;
  height: 1.4em;
  line-height: 1;
  text-indent: -999px;
}

#new-portal-dialog .simplemodal-close:before,
#new-portal-dialog .simplemodal-close:after {
  content: "";
  height: 1em;
  width: 0.1em;
  top: 0.2em;
  left: 0.65em;
  background: #777;
  position: absolute;
  transform: rotate(-45deg);
}

#new-portal-dialog .simplemodal-close:after {
  transform: rotate(45deg);
}

#simplemodal-container #advanced {
  background-color: #fff !important;
  color: #111 !important;
}

#simplemodal-container #advanced table {
  margin: 1rem 0;
}

#simplemodal-container #advanced li {
  line-height: 1.4;
  margin-bottom: 0.5em;
}

#simplemodal-container #advanced .pill {
  border: 0;
  cursor: pointer;
}

#location-dialog {
  width: 970px;
  height: 590px;
  background-color: #fff;
  text-align: center;
  color: #111;
}

#location-dialog h3 {
  margin-bottom: 5px;
  font-weight: 300;
  text-align: left;
  font-size: 1.6em;
  color: #1b2a4a;
}

#location-dialog p {
  display: flex;
}

#location-dialog select {
  border: 1px solid #111;
  flex: 1 1 50%;
  max-width: 50vw;
}

#location-dialog input {
  border-radius: 0.5rem;
  border: 0;
  padding: 0.5em 1.5em;
  font-weight: 700;
  color: #fff;
  background: #1b2a4a;
}

#map {
  height: 100%;
  margin: 0px 0px 10px;
  border: 1px solid black;
  background-image: url("/assets/images/progress.gif");
  background-repeat: no-repeat;
  background-position: center;
  max-width: 100% !important;
}

#location-ok {
  margin: 0px 10px;
}



.test-box-lede {
  margin-bottom: 2.5em;
}

@media screen and (min-width: 50em) {
  .test-box-lede {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

#visual_comparison .urldiv {
  margin-bottom: 1em;
  align-items: center;
  gap: 0.5em;
  padding: 1em 0 0;
}

#visual_comparison .urldiv label {
  display: block;
  margin-top: 1em;
}

#visual_comparison .urldiv a {
  color: #fff;
  display: block;
  margin: 1.2em 0 2.5em;
}

@media (max-width: 40em) {
  #visual_comparison .urldiv {
    margin: 0.5em 0;
    align-items: center;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  #visual_comparison .test_presets li {
    display: block;
  }

  #visual_comparison label {
    display: block;
    margin-bottom: 0.3em;
  }

  #visual_comparison p {
    font-size: 1.1em;
  }
}

@media screen and (min-width: 50em) {
  #visual_comparison .urldiv {
    display: flex;
    max-width: 90vw;
  }

  #visual_comparison .urldiv label {
    display: flex;
    margin-top: 0;
  }

  #visual_comparison .urldiv a {
    margin: 0;
  }
}

#visual_comparison .urldiv input:first-of-type,
#visual_comparison .urldiv input:last-of-type {
  margin-top: 0.3em;
}

#visual_comparison .urldiv input:last-of-type {
  width: 80%;
  max-width: 26.9375em;
}

@media (min-width: 50em) {
  #visual_comparison .urldiv input:first-of-type {
    margin-right: 2.5em;
    margin-left: 0.3em;
    margin-top: 0;
  }

  #visual_comparison .urldiv input:last-of-type {
    width: 26.9375em;
    margin-right: 0.5em;
    margin-left: 0.3em;
  }
}

#visual_comparison .urldiv a {
  background: url("/assets/images/icon-close.svg") left no-repeat transparent;
  padding-left: 1.3em;
  text-decoration: none;
}

#visual_comparison .urldiv a:hover {
  text-decoration: underline;
}

#visual_comparison .footnote {
  background: #24334f;
  border-radius: 10px;
  padding: 1.875em;
}

#visual_comparison .addBtn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.33) url("/assets/images/icon-add.svg") top 50%
    left 0.8rem no-repeat;
  background-size: 0.9rem 0.9rem;
  color: #fff;
  padding: 0.8em 0.8em 0.8em 2.5em;
  border-radius: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  margin: 1em 0;
}

#visual_comparison .addBtn:hover {
  background-color: rgba(0, 0, 0, 0.63);
}

.box {
  background: #fff;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
  padding: 1em 1em;
  margin: 1em 0;
  padding-bottom: 2em;
}

.about h1,
.common h1 {
  margin-left: 3rem;
}

#custom-waterfall .box:not(.details_panel),
.about .box,
.common .box,
.video .box {
  padding: 3rem;
}

@media (max-width: 60em) {
  .about h1,
  .common h1 {
    margin-left: 1.5rem;
  }
  #custom-waterfall .box:not(.details_panel),
  .about .box,
  .common .box,
  .video .box,
  #page-images .box {
    padding: 1em 1.5em;
  }
}



.testerror {
  text-align: left;
  max-width: 34rem;
  margin: 0 auto;
  padding: 3rem;
  margin-top: 3rem;
}

.testerror h1 {
  color: #dc9739;
  margin: 1em 0;
  border-bottom: 1px solid #ddd;
}

.testerror h1 em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 0.8em;
  color: #333;
  margin: 0.1em 0.3em;
  padding-bottom: 1em;
}

.testerror_loginperks {
  list-style: disc;
  padding: 0 0 0 3em;
}

.testerror p,
.testerror_loginperks {
  line-height: 1.4;
  margin: 0 0 1.5em;
}

.testerror_loginperks li {
  margin-bottom: 0.5em;
}

.testerror_login {
  margin: 3rem 0 0;
  justify-content: center;
  display: flex;
  gap: 2em;
  background: #f6f6f6;
  padding: 1.5em;
  border-radius: 8px;
}



.video_runlabel {
  text-align: left;
}

.video_runlabel th {
  border-top: 1px solid #666;
  padding-top: 0.5em;
}

#videoContainer thead th {
  padding-bottom: 0.5em;
}

.video_runlabel_text {
  position: sticky;
  font-weight: 700;
  padding: 0.5rem;
  display: inline-block;
  left: 1rem;
}

.video_runlabel a {
  font-weight: 500;
  font-size: 0.9em;
  border: 1px solid #ddd;
  background: #fff;
  padding: 0.2em 1em;
  color: #333;
  border-radius: 2em;
  margin: 0 0 0 0.5em;
  text-decoration: none;
}

.video_runlabel a:hover,
.video_runlabel a:focus {
  background: #eee;
}

.video_runlabel input {
  border: 1px solid #ddd;
  padding: 0.2em 0.5em;
  margin-right: 0.5em;
  font-size: 0.9em;
}

.video_runlabel input + a {
  background: #1071ba;
  color: #fff;
  border-color: #1071ba;
}

.video_runlabel input + a:hover,
.video_runlabel input + a:focus {
  background: #074677;
}

#header_container {
  display: flex;
  flex-flow: column;
  padding: 3em 1.5em 0;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 60em) {
  #header_container {
    max-width: 94vw;
    padding-top: 1em;
    padding-bottom: 1em;
  }
}

.cta-banner {
  text-align: center;
  font-size: 0.9em;
  padding: 0.3em 0 0.8em;
  position: relative;
  background: #1f2c47;
  color: #fff;
  border-radius: 0.6em;
  display: block;
  margin: 0 auto 0.5rem auto;
  max-width: 40em;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.cta-banner p {
  margin: 0;
}

.cta-banner a {
  margin: 0 0 0 0.3em;
}

@media (max-width: 50em) {
  .cta-banner {
    margin: 0 auto;
  }

  .cta-banner p {
    font-size: 0.9em;
  }

  .cta-banner a {
    display: block;
    max-width: 14em;
    margin: 0.5em auto 0;
    font-size: 0.9em;
  }
}

.results_body + .cta-banner {
  margin: 2rem auto 0;
  padding: 1em 0 2em;
  width: 100%;
  max-width: none;
  background: #fff;
  border-bottom: 1px solid #eee;
  border-radius: 0;
  color: #222;
}

@media screen and (min-width: 50em) {
  #header_container {
    display: flex;
    flex-flow: row wrap;
    padding: 2em 3em 1em;
  }
}

.test_results-content .pretty {
  width: 100%;
  font-size: 1em;
  line-height: 1;
  overflow-x: auto;
  vertical-align: top;
}

.result-details tr.metric_descs td {
  display: none;
}

.test_results-content {
  padding: 1em 0;
}

.test_menu + .test_results-content {
  padding-top: 0;
}

@media (min-width: 50em) {
  .test_results-content {
    padding: 0;
  }

  .test_menu + .test_results-content {
    padding-top: 0;
  }
}



td.nowrap {
  white-space: nowrap;
}

th.nowrap {
  white-space: nowrap;
}

tr.blank {
  height: 2ex;
}

#opt {
  margin-bottom: 2em;
}

#opt_table {
  border: 1px solid black;
  border-collapse: collapse;
}

#opt_table th {
  padding: 5px;
  border: 1px solid black;
  font-weight: normal;
}

#opt_table td {
  padding: 5px;
  border: 1px solid black;
  font-weight: bold;
}

#optimization_summary {
  float: none;
  display: inline-table;
}

#optimization_summary td {
  min-height: 30px;
  font-weight: bold;
  font-size: 2.5em;
  max-width: 100px;
  border: 5px white solid;
}

#optimization_summary td a {
  text-align: center;
  display: block;
  height: 100%;
  padding: 0.5em;
}

#optimization_summary td.checklist {
  font-size: 1em;
  font-weight: normal;
  text-decoration: underline;
}

#optimization_summary .step {
  font-size: 1.5em;
  max-width: none;
}

#optimization_summary th {
  padding: 0.5em;
  font-weight: bold;
  font-size: 1.2em;
  max-width: 100px;
}

.snippet_container .details {
  padding: 1em;
  overflow-x: auto;
}

.snippet_container .details h2 {
  text-align: center;
}



.values {
  text-align: left;
}

.values li {
  padding-left: 4em;
}

figure {
  display: inline-block;
  margin: 5px;
}

.metric {
  padding-bottom: 2em;
}

.metric h2 + small {
  margin-top: -1.3em;
  margin-bottom: 1.5em;
  display: block;
}

li.even {
  background-color: #f2f2f2;
}



.scrollableTable table tr.runview {
  margin: 0;
}

.scrollableTable table.pretty#tableResults tr.runview th {
  background: #fff;
  padding: 0;
  color: #666;
  font-weight: 500;
  font-size: 0.8em;
  position: sticky;
  left: 0;
}
@media (max-width: 60em) {
  .scrollableTable table.pretty#tableResults tr.runview th {
    padding-top: 1em;
  }
}
div.results-filmstrip-container {
  position: relative;
  left: 0;
  top: 0;
  clear: both;
  text-align: left;
  width: 100% !important;
  margin: auto;
  overflow: hidden;
  overflow-x: auto;
  padding: 0 0 1em;
}

div.results-filmstrip-container img {
  display: block;
  width: auto;
  min-width: 100%;
}

table.pretty td {
  text-align: left;
  vertical-align: top;
  width: 1%;
}

.pretty-autowidth.pretty-autowidth td {
  width: auto;
}

img.autohide:hover {
  opacity: 0;
}

svg {
  max-width: 100%;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

table.details {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  font-size: larger;
}

table.details th,
table.details td {
  border: 1px silver solid;
  padding: 0.2em;
  text-align: left;
}

table.details th {
  background: gainsboro;
  padding-left: 2em;
  padding-right: 2em;
}

table.details caption {
  padding: 0.5em;
  margin-left: inherit;
  margin-right: inherit;
}

table.details td.domain {
  text-align: right;
  max-width: 30em;
  word-wrap: break-word;
}

table.details th.reqMime,
table.details td.reqMime {
  max-width: 10em;
  word-wrap: break-word;
  overflow: hidden;
}

.lcp-image {
  overflow-x: scroll;
  max-width: 100%;
  text-align: left;
  margin-top: 1em;
}

.summary-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin: 1rem 0 1rem 0;
  padding: 0;
  gap: 3rem;
  text-align: center;
}

.summary-container p {
  margin-bottom: 0;
  line-height: 1;
}

.summary-metric {
  font-size: 1em;
  overflow: hidden;
  margin-bottom: 1rem;
  flex: 1 1 auto;
}

.metric-value {
  padding: 0.3rem 0;
  display: inline-block;
  font-size: 3.7rem;
  font-weight: 700;
  margin: 0;
  -webkit-text-stroke: 0.04em currentColor;
}

@media (max-width: 50em) {
  .summary-container {
    flex-flow: column;
    gap: 2rem;
  }

  .metric-value {
    font-size: 3em;
    display: block;
  }
}

.summary-container .summary-metric.good .metric-value {
  color: #6ca71a;
}

.summary-container .summary-metric.ok .metric-value {
  color: #d48e08;
}

.summary-container .summary-metric.poor .metric-value {
  color: #d02424;
}

.summary-container > a {
  flex: 1;
  text-align: left;
}

.summary-container a:link,
.summary-container a:visited {
  text-decoration: none;
  color: black;
}

.summary-container {
  position: relative;
}

.summary-container a:first-child .crux_legends {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
}

.summary-container a:not(:first-child) .crux_legends {
  display: none;
}

.summary-metric .fvarrow {
  height: 0.5em;
  display: inline-block;
  width: 0.5em;
  font-size: 0.8em;
}

.summary-metric h4 {
  margin: 0;
  background: none;
  border: 0px solid #fff;
  font-weight: 500;
  color: #686868;
  padding: 0;
  font-size: 1.1em;
}

.crux .cruxlabel {
  font-size: 0.7em;
  margin: 0;
  z-index: 99;
}

.cruxlabel + .cruxbars {
  margin-top: -15px !important;
}

.cruxbars {
  display: flex;
  gap: 2rem;
  flex-flow: row wrap;
  justify-content: space-between;
}
.cruxbars div.crux_metric {
  flex: 1 0 30%;
  margin: 0;
}
@media (max-width: 80em) {
  .cruxbars div.crux_metric {
    flex: 1 0 40%;
  }
}
.crux_subhed {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.5em;
  margin-bottom: 1.5em;
  border-bottom: 1px solid #eee;
  gap: 2em;
}

.crux_subhed p {
  font-size: 0.9em;
  margin: 0;
  line-height: 1.4;
  color: #444;
}
.crux_subhed p.crux_subhed_cite {
  font-size: 0.9em;
  color: #8b8b8b;
  font-style: normal;
}
@media (max-width: 50em) {
  .cruxbars div.crux_metric {
    flex: 1 0 100%;
  }
  .crux_subhed {
    display: block;
  }
  .crux_subhed p {
    margin: 0.5em 0;
  }
}
h4.crux_metric_title {
  font-size: 0.9em;
  font-weight: 900;
  color: #686868;
  white-space: nowrap;
  margin: 0;
}

.crux_metric_value {
  border: 0 solid #fff;
  display: block;
  padding: 0 0 0;
  margin: 0;
  font-size: 2.2em;
  font-weight: 900;
  border-top-width: 0;
  color: #2a3c64;
  -webkit-text-stroke: 0.04em currentColor;
  line-height: 1;
}
.crux_metric_value-good {
  color: #6ca71a;
}
.crux_metric_value-fair {
  color: #d48e08;
}
.crux_metric_value-poor {
  color: #d02424;
}
.crux_metric_value em {
  font-size: 0.5em;
  font-weight: 200;
  text-transform: capitalize;
  font-style: normal;
}
.crux_metric_desc {
  font-size: 0.75em;
  margin: 0 0 0.8em;
  color: #666;
}
.crux_bars {
  display: flex;
  position: relative;
}
.crux_bars:before,
.crux_bars:after {
  content: "";
  width: 0;
  height: 0;
  border-top: 10px solid #fff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  margin-top: -4px;
  position: absolute;
  left: calc(75% - 5px);
}
.crux_bars:after {
  border-top: 8px solid #2a3b64;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  left: calc(75% - 3px);
  margin-top: -5px;
}
.crux_bars li {
  flex: 0 0 0;
  color: #fff;
  padding: 0.2em 0em;
  box-sizing: border-box;
  font-size: 0.8em;
  overflow: hidden;
  text-indent: 1em;
}
.crux_bars li.crux_bars-hidelabel {
  text-indent: -999px;
}
.crux_bars-good {
  background: #6ca71a;
}
.crux_bars-fair {
  background: #d48e08;
}
.crux_bars-poor {
  background: #d02424;
}
.crux details.metrics_shown {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  display: inline-block;
  margin: 0.5em 0 0;
}
.crux details.metrics_shown span.units {
  color: inherit;
}
.crux_diff {
  font-size: 0.9em;
  font-style: normal;
  margin: 0.5em 0 0;
  color: #666;
}

.crux_diff span.units {
  font-weight: 500;
  padding-left: 0;
}
.crux details.metrics_shown {
  margin: 2em 0 0;
}





div.table {
  margin-left: auto;
  margin-right: auto;
}

div.table table {
  max-width: 300px;
  vertical-align: top;
}

div.table td {
  max-width: 250px;
  text-align: left;
  vertical-align: top;
  padding: 1em;
}

td.legend {
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
  padding: 0;
}

th.header {
  font-weight: normal;
}





.browsers td {
  text-align: left !important;
  padding-right: 20px !important;
}

.browsers {
  margin-left: 0 !important;
}





#videoContainer {
  background: #222;
  color: #fff;
  margin: 0;
  padding: 10px 1rem 0;
  border: 2px solid #222;
  border-radius: 10px;
  margin-bottom: 1rem;
}

#videoContainer:before,
.compare_contain_wrap .waterfall_marker:before {
  content: "";
  border: 1px solid #f00;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  left: auto;
  top: auto;
  position: absolute;
  z-index: 999;
  margin: -4px;
  background: #fff;
}

#videoContainer thead th {
  font-weight: 700;
}

.waterfall_marker:before {
  margin: -5px;
}

#createForm #image {
  margin-top: 2.5em;
  margin-bottom: 1em;
}

#runningHeader .runningDetails {
  font-size: 1.25em;
  line-height: 1.3em;
  color: #111;
}

#runningHeader .urlLinkWrap {
    display: block;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.scriptedTestContent {
    overflow: hidden;
}

#runningHeader ul:first-of-type {
  padding: 1em;
  line-height: 1.4;
  background: #fafafa;
  clear: both;
}

#runningHeader form {
  float: right;
  margin-bottom: 1em;
}

#runningHeader.runningHeaderBatch form[name="compare"] {
  float: none;
}

#runningHeader input[type="submit"] {
  background: none;
  color: #2f80ed;
  border: 1px solid #2f80ed;
  cursor: pointer;
}

#runningHeader p {
  color: #484646;
}

.runningStatusIndicator {
  display: flex;
  flex-flow: row wrap;
}

@media (min-width: 40em) {
  .runningStatusIndicator {
    max-width: 40%;
  }
}

.runningStatusIndicator li {
  color: #484646;
  background: #f4f4f4;
  padding: 0.625em 1.875em 0.625em 2.875em;
  position: relative;
  margin-right: 1.25em;
  flex-grow: 1;
  margin-bottom: 1.125em;
}

.runningStatusIndicator li.is-active {
  background: #1151bb;
  color: #fff;
}

.runningStatusIndicator li::after {
  content: " ";
  position: absolute;
  border-top: 1.3em solid #fff;
  border-right: none;
  border-left: 1.3em solid #f4f4f4;
  border-bottom: 1.3em solid #fff;
  top: 0;
  bottom: 0;
  right: -1.2em;
}

.compare_contain_wrap {
  background: #fff;
  padding: 1rem;
}

.runningStatusIndicator li.is-active::after {
  border-left-color: #1151bb;
}

.runningStatusIndicator li::before {
  content: " ";
  position: absolute;
  border-top: 1.3em solid #f4f4f4;
  border-right: none;
  border-left: 1.3em solid #fff;
  border-bottom: 1.3em solid #f4f4f4;
  top: 0;
  bottom: 0;
  left: 0em;
}

.runningStatusIndicator li.is-active::before {
  border-top: 1.3em solid #1151bb;
  border-bottom: 1.3em solid #1151bb;
}

.runningStatusIndicator li:first-child::before {
  display: none;
}

.runningStatusIndicator li:first-child {
  padding-left: 1.875em;
}

.runningStatusText {
  margin-bottom: 1em;
}

.tip {
  overflow: hidden;
}

.tip a {
  text-decoration: none;
}

.tip a:hover {
  text-decoration: underline;
}

.tip h2 {
  font-size: 1em;
  margin-top: 0;
  color: #111;
}

.tip .tipHead {
  border-bottom: 1px solid #e9e9e9;
  margin-left: -1.875em;
  margin-right: -1.875em;
  margin-top: -1.875em;
  padding: 0.75em 1.875em;
  margin-bottom: 1.5em;
}

.tip .tipHead .tip_note {
  text-align: right;
  float: right;
  margin-top: -1.6em;
}

.tip img {
  margin-right: 1em !important;
}

.backlogWarn {
  color: #f1c52e;
  font-weight: bold;
}

.backlogHigh {
  color: red;
  font-weight: bold;
}



#visual_comparison .industry {
  margin-right: 20px;
  float: left;
  padding-bottom: 10px;
  width: 140px;
  min-height: 140px;
  font-size: 10px;
}

#visual_comparison .indHead {
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: black;
  color: #f1c52e;
  font-weight: bold;
  width: 100%;
}

#visual_comparison .indBody {
  padding-left: 5px;
  width: 100%;
}



.grades {
  line-height: 1.2em;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
  padding: 0 0 1rem;
  font-size: 0.625em;
  text-align: center;
  display: grid;
}

.grades li {
  text-align: left;
  justify-content: space-between;
}

.grades p {
  font-size: 1.4em;
  max-width: 20em;
  margin: 1em 0;
  font-weight: 300;
}

.grades .grade_heading {
  font-size: 1.5625rem;
  padding-left: 3rem;
}

.grades li {
  font-weight: 700;
  font-size: 0.9rem;
  color: #666;
  white-space: nowrap;
}

.grades li a h2 {
  margin: 0 0.5em 0 0;
  font-size: 1.5em;
  padding: 0.5em;
  min-width: 1em;
  font-weight: 700;
  border-radius: 0.5rem;
  text-align: center !important;
  display: inline-block;
}

@media (max-width: 60em) {
  .grades {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  }

  .grades li {
    align-items: flex-start;
    gap: 4rem;
    text-align: left;
  }
}

.grades .A {
  background-color: #9bce54;
}

.grades .B {
  background-color: #9bce54;
}

.grades .C {
  background-color: #f1c52e;
}

.grades .D {
  background-color: #e33535;
}

.grades .F {
  background-color: #e33535;
}

.grades a {
  text-decoration: none;
  color: #111;
}

#tooltip {
  position: absolute;
  z-index: 3000;
  border: 1px solid #111;
  background-color: #eee;
  padding: 5px;
}

.alert-banner {
  font-size: 0.875em;
  max-width: 100%;
  background-color: #111a2a;
  color: #fff;
  text-align: center;
}

.alert-banner div {
  padding: 0.8em 1em 1.2em;
}

.alert-banner .alert-service-note {
  background: #ffffff;
  color: #aa0000;
  padding: 1em;
  border-bottom: 1px solid #fff;
  font-size: 1rem;
}

.alert-banner p {
  margin: 0 auto;
  font-size: 0.9em;
}

.alert-banner-twitch {
  background: #0d1424;
  background: #111a2a;
  border-bottom: 1px solid #010102;
}

.alert-banner img,
.alert-banner-twitch img {
  max-height: 2em;
  display: inline-block;
  max-width: 5em;
  margin-right: 0.7em;
  position: relative;
  top: 0.8em;
  margin-top: -1em;
}

.alert-banner-promo img {
  margin: unset;
  top: 0.5em;
}

.alert-banner a,
.alert-banner-twitch a {
  display: block;
}

.alert-banner a {
  color: #fff;
}

.alert-banner-promo {
  font-size: 1.0em;
  padding: 1em;
  color: #154281;
  background: #79cdfb;
}

.alert-banner-promo a {
  color: #154281;
}

@media screen and (min-width: 35em) {
  .alert-banner {
    grid-column: 1 / 13;
  }

  .alert-banner a,
  .alert-banner-twitch a {
    display: inline-block;
  }
}

.runningHeaderBatch form[name="compare"] {
  width: 100%;
}

.batchResults {
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border-collapse: collapse;
  border: 0px white solid;
  width: 100%;
}

.batchResults th,
.batchResults td {
  border: 1px silver solid;
  padding: 5px 15px;
}

.batchResults th {
  background: gainsboro;
}

.batchResults .good {
  color: green;
  font-weight: bold;
}

.batchResults .bad {
  color: red;
  font-weight: bold;
}

.batchResults th.empty {
  background: #fff;
  border-top: 1px white solid;
  border-left: 1px white solid;
}



.scrollableTable {
  overflow: auto;
  scroll-snap-type: both mandatory;
  width: 100%;
  max-width: 100%;
  padding-bottom: 0.8em;
}



.scrollableTable,
.results-filmstrip-container,
div.waterfall-container,
div.overflow-container,
.breakdownFrame_item > div,
#videoDiv,
.experiment_opportunities-resolved ol,
.experiments_details_desc > ul {
  background: linear-gradient(90deg, #fff 33%, rgba(255, 255, 255, 0)),
    linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 66%) 0 100%,
    radial-gradient(farthest-side at 0 50%, rgb(106 106 106 / 40%), transparent),
    radial-gradient(
        farthest-side at 100% 50%,
        rgba(106 106 106 / 40%),
        transparent
      )
      0 100%;
  background-repeat: no-repeat;
  background-size: 50px 100%, 50px 100%, 10px 100%, 10px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
  transform: translateZ(0);
}

.scrollableTable table,
.results-filmstrip-container img,
div:not(.compare_contain_wrap) > div.waterfall-container img,
div.overflow-container > *,
.breakdownFrame_item > div > *,
.experiment_opportunities-resolved ol > *,
.experiments_details_desc > ul li {
  mix-blend-mode: multiply;
}

.scrollableTable th,
.scrollableTable td {
  min-width: 3.5rem;
  position: relative;
  z-index: 10;
  font-size: 1em;
  background: #fff;
}

.scrollableTable thead {
  z-index: 1000;
  position: relative;
}

.scrollableTable th.pin {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100011;
  background: #fff;
}

.scrollableTable thead tr {
  position: sticky;
  top: 0;
}

.scrollableTable tbody th {
  background-clip: padding-box;
  border-left: 0;
  position: sticky;
  left: 0;
  z-index: 1000;
  max-width: 40vw;
  overflow-x: auto;
  overflow-y: hidden;
}

.scrollableTable #tableResults tbody th {
  position: relative;
}

#tables .scrollableTable tbody th {
  font-weight: 500;
  line-height: 1.3;
  border-left: 1px solid #eee;
  vertical-align: top;
}

.scrollableTable tbody {
  z-index: 10;
  position: relative;
}

span.units {
  font-size: 0.5em;
  font-weight: 300;
  padding-left: 0.2em;
}

span.units.comparator {
  font-size: 0.8em;
  padding: 0;
}

table.pretty {
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border: 0;
}

table#tableResults.pretty th,
table#tableResults.pretty td {
  padding: 0;
  text-align: left;
  vertical-align: middle;
  border: 29px solid #fff;
}

.result-details #tableResults.pretty tr:not(.metric_groups) th {
  padding-right: 1rem;
  font-size: 0.8em;
}

.result-details table#tableResults.pretty td {
  font-size: 2rem;
  padding-right: 1rem;
}
.result-details thead th {
  text-align: left;
}
#custom-metrics table.pretty td,
#custom-metrics table.pretty th {
  overflow: hidden;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
}

table.pretty th a {
  color: inherit;
  text-decoration: none;
}
table.pretty th a:hover,
table.pretty th a:focus {
  text-decoration: underline;
}

table.pretty .runview a {
  color: #1071ba;
}

table.pretty a:hover,
table.pretty a:focus {
  text-decoration: underline;
}

table.pretty .metric_groups th:not(.empty) {
  padding: 0;
  border: 1px solid #ddd;
  background: #ddd;
  border-bottom: 21px solid #fff;
}

table.pretty .metric_groups th span {
  display: block;
  padding: 10px 0 0;
  text-align: center;
  background: #fff;
  border-top: 1px solid #ddd;
}

table.pretty .metric_groups th a {
  color: inherit;
}

table.pretty .metric_groups th {
  color: #222;
}

#tableResults.pretty tr:not(.metric_groups) th,
.results-filmstrip-container h4 {
  background: none;
  border: 0px solid #fff;
  font-weight: 700;
  padding: 1rem 1rem 0 0;
  font-size: 0.85em;
  vertical-align: top;
  white-space: nowrap;
  color: #2a3b64;
  overflow: visible;
  width: 20%;
}

.results-filmstrip-container h4 {
  position: sticky;
  left: 0;
  margin: 0.5em 0 1em;
  padding: 0;
}

.results-filmstrip-container h4 span {
  font-weight: 300;
}

.metric_change {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0.3;
}

.metric_change em {
  font-size: 0.4em;
  font-weight: 900;
  -webkit-text-stroke: 0;
  font-style: normal;
  text-transform: uppercase;
  padding: 0rem 0.5rem;
  display: inline;
  width: auto;
  margin: 0;
  line-height: 1;
}

.metric_experiment,
.metric_control {
  font-size: 0.85rem;
  font-weight: 300;
  -webkit-text-stroke: 0;
  padding: 0;
  margin: 0.5em 0 0;
  display: flex;
  gap: 0.3em;
}

.metric_experiment {
  margin-top: 0.8em;
}

.metric_experiment span:last-child,
.metric_control span:last-child {
  font-weight: 700;
}

.metric_experiment .units,
.metric_control .units {
  font-size: 0.8rem;
  padding-left: 0.1em;
}

.results-filmstrip-container h4 a {
  font-weight: 500;
  color: #1071ba;
  display: inline-block;
  padding: 0 0.1em;
}

table#tableResults.pretty td {
  border: 0 solid #fff;
  padding: 5px 1.5rem 0.5rem 0;
  font-size: 2.55em;
  font-weight: 900;
  border-top-width: 0;
  vertical-align: baseline;
  color: #2a3c64;
  -webkit-text-stroke: 0.04em currentColor;
}

table#tableResults.pretty td:last-child {
  padding-right: 0;
}

table#tableResults.pretty th.empty {
  background: #fff;
  border-color: #fff;
}

table.pretty#tableResults thead tr:first-child th {
  border-top: 0 !important;
}

table.pretty th.border,
table.pretty td.border {
  border-left: 5px #fff solid;
}

table.pretty td.good,
table#tableResults td.good {
  color: #6ca71a;
}

.results_header table#tableResults td.good,
.results_header table#tableResults td.poor {
  color: #2a3c64;
}

.results_header table#tableResults td.good em {
  background: #6ca71a;
  color: #fff;
}

.results_header table#tableResults td.poor em {
  background: #d02424;
  color: #fff;
}

table.pretty td.ok,
table#tableResults td.ok {
  color: #d48e08;
}

table.pretty td.poor,
table#tableResults td.poor {
  color: #d02424;
}

table#tableResults tr.metric_descs td {
  font-size: 0.8rem;
  white-space: pre-wrap;
  font-weight: 300;
  color: #666;
  line-height: 1.3;
  padding: 0 2em 0 0;
  font-style: italic;
}

a.result_plot {
  margin: 1em 0 1em;
  display: inline-block;
  font-size: 0.8em;
  border-radius: 1.5em;
  border: 1px solid #eee;
  padding: 0.6em 1.2em;
  text-decoration: none;
  font-weight: 700;
  margin-right: 1rem;
}

a.result_plot:hover,
a.result_plot:focus {
  box-shadow: 0 0 3px #ddd;
}

table.details {
  max-width: 100%;
  font-size: 0.75em;
  line-height: 1.3em;
}



div.tableBytes table {
  max-width: 300px;
  vertical-align: top;
}

div.tableRequests td {
  max-width: 250px;
  text-align: left;
}

div.tableBytes td {
  max-width: 250px;
  text-align: left;
}

table.legend td {
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
  padding: 0;
}

.breakdownFrame {
  display: flex;
  flex-flow: row wrap;
}

.breakdownFrame_item {
  width: 100%;
  flex: 0 1 50%;
}

.breakdownFrame_item > div {
  width: 100%;
  overflow: auto;
}

#quicklinks_table {
  margin: 0;
  line-height: 1.5em;
  border-collapse: collapse;
}

#quicklinks_table tr.even {
  background: whitesmoke;
}

#quicklinks_table td,
#quicklinks_table th {
  border: 1px silver solid;
  padding: 0.5em;
}

#quicklinks_table th {
  font-weight: bold;
  background: gainsboro;
}

#back_to_top {
  background: white;
  position: fixed;
  bottom: 1em;
  left: 50%;
  margin-left: 510px; 
  padding: 1em;
  display: none;
}

.snippet_container {
  display: none;
  margin: 1em 0;
}

.snippet_container_requestHeaders {
  text-align: left;
  overflow: auto;
  padding: 0 1em;
}

h4.accordion_opener {
  cursor: pointer;
  display: block;
  padding: 0.2em 0 0em 0;
  background: no-repeat 10px 50% transparent;
  margin: 0 0 1em;
  background-size: 0.6rem 0.6rem;
}

h4.accordion_opener:before {
  content: " ";
  display: inline-block;
  width: 1em;
  height: 0.8em;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(/assets/images/src/icon_triangledown.svg);
}

h4.accordion_closed:before {
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

h4.accordion_loading:before {
  background-image: url(/assets/images/activity_indicator.gif);
}



.indented1 {
  padding: 0;
  list-style-position: inside;
  border-bottom: 0;
}

.indented1 li {
  padding: 1em 0;
  border-bottom: 1px solid #ddd;
}

.indented1 li:last-child {
  border-bottom: 0;
}

.indented2 {
  padding-left: 2rem;
}

td {
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
}

td.center {
  text-align: center;
}

table.details {
  margin-left: auto;
  margin-right: auto;
  background: whitesmoke;
  border-collapse: collapse;
}

table.details th,
table.details td {
  border: 1px silver solid;
  padding: 0.8em;
  font-size: smaller;
}

table.details caption {
  background: whitesmoke;
}

table.details th.reqUrl,
table.details td.reqUrl {
  text-align: left;
  width: 30em;
  word-wrap: break-word;
}

table.details td.even {
  background: gainsboro;
}

table.details td.odd {
  background: whitesmoke;
}

table.details td.evenRender {
  background: #dfffdf;
}

table.details td.oddRender {
  background: #ecffec;
}

table.details td.evenDoc {
  background: #dfdfff;
}

table.details td.oddDoc {
  background: #ececff;
}

table.details td.warning {
  background: #ffff88;
}

table.details td.error {
  background: #ff8888;
}

.header_details {
  display: none;
  font-size: 0.9em;
  word-break: break-all !important;
}

.headers_list h4 {
  font-weight: 500;
  font-size: 0.8em;
  border-top: 1px solid #eee;
  padding: 0.8rem 0;
  line-height: 1.3;
  word-break: break-all;
}

.headers_list h4 strong {
  display: block;
  font-weight: 700;
  padding: 0.5rem 0;
  font-size: 1.1em;
}

.headers_list h4 strong:before {
  content: "+";
  width: 1em;
  display: inline-block;
}

.headers_list h4 span[data-expanded] strong:before {
  content: "-";
}

.a_request {
  cursor: pointer;
}

.resource-block {
  background: #182641;
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 0.875em;
  max-width: 30rem;
  margin: auto 0 5em;
}

.resource-block img {
  width: 100%;
}

.resource-block h3,
.resource-block p {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.resource-block h3 {
  font-weight: 700;
  font-size: 1.3em;
  line-height: 1.3em;
  margin: 1em 0 0;
}

.resource-block p {
  color: #a9c8f1;
  line-height: 1.5em;
}

.resource-block a {
  text-decoration: none;
  color: #fff;
}

@media screen and (min-width: 55em) {
  .resource-block {
    max-width: none;
    margin: 0;
  }
}

div.tableRequests table {
  max-width: 450px;
  vertical-align: top;
}

td {
  text-align: center;
  vertical-align: middle;
}

.testimonial {
  display: block;
  text-align: center;
  border-radius: 1rem;
  max-width: 50em;
  margin: 0 auto;
}

.testimonial blockquote {
  font-size: 1.375em;
  line-height: 1.454545455em;
  padding-bottom: 3rem;
  font-weight: 300;
  background: url(/assets/images/test_icons/comment.svg) bottom center no-repeat;
  background-size: 3rem;
  margin-bottom: 0.5rem;
  font-style: italic;
}

.testimonial blockquote a {
  color: inherit;
}

@media (max-width: 50em) {
  .testimonial {
    font-size: 0.8em;
    margin: 0;
    padding: 0;
  }
}

.testimonial cite {
  font-style: normal;
  margin-bottom: 4.125em;
  display: block;
  font-size: 1.3em;
  font-weight: 700;
  color: #fff;
}

.testimonial cite span {
  font-weight: 500;
  display: block;
  font-size: 0.9em;
  color: #d580ff;
  padding-top: 0.4em;
}

#vitals-content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: block;
  background: #182437;
  border-radius: 2rem;
  padding: 2rem;
}

@media (max-width: 87.5em) {
  #vitals-content {
    max-width: 80%;
  }
}

#test_box-container {
  margin-bottom: 2em;
  border-radius: 2rem;
}

.feedcontain {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-flow: row wrap;
}

.feed {
  overflow: hidden;
  padding-bottom: 0.875em;
  flex: 1 1 auto;
}

.feed ul {
  background: #fff;
  border-radius: 0.5em;
  margin: 1em 0;
  padding: 1.25rem;
}

.feed h2 {
  font-weight: 700;
  font-size: 1.6em;
  line-height: 1.25em;
  margin-bottom: 1em;
}

.feed li {
  border-radius: 3px;
  padding: 0.5em;
}

.feed a {
  text-decoration: none;
}

.feed a:hover {
  text-decoration: underline;
}

#filmstripOptions {
  display: flex;
}

#filmstripOptions fieldset {
  border: 0;
  float: left;
  flex: 1 1 auto;
}

#filmstripOptions legend {
  font-weight: bold;
  margin-bottom: 0.3em;
}



.chart {
  margin-bottom: 2.5em;
}



.test_results-content .google-visualization-table-table,
.visualization_table {
  border-collapse: collapse;
  width: 100%;
  font-size: inherit;
  font-size: 1em !important;
}

.test_results-content .google-visualization-table,
.visualization_table {
  display: block;
  margin-top: 1em;
  font-size: 0.75em;
}

.test_results-content .google-visualization-table-th,
.visualization_table th {
  background: gainsboro;
}

.test_results-content .google-visualization-table-th,
.test_results-content .google-visualization-table-td,
.visualization_table th,
.visualization_table td {
  border: 1px solid silver;
  padding: 0.4em;
  line-height: 1.4em;
}

.test_results-content .google-visualization-table-table td,
.visualization_table td {
  border: 1px solid silver;
}

.test_results-content .google-visualization-table .gradient {
  background: gainsboro;
}

.test_results-content .google-visualization-table-sortind {
  color: unset;
}

[name="simpleadvanced"] + label + .simpleadvancedfields {
  display: none;
}

[name="simpleadvanced"]:checked + label + .simpleadvancedfields {
  display: block;
}

.simpleadvancedfields_contain {
  position: relative;
}

.simpleadvancedfields_contain > input + label {
  font-size: 1em;
  font-weight: 700;
  padding: 0 0 1.4em 2.4em;
  cursor: pointer;
  display: block;
  margin-bottom: 1em;
  position: relative;
}

.simpleadvancedfields_contain:last-child {
  border-bottom: 1px solid #ddd;
}

.simpleadvancedfields_contain > input + label:before {
  content: "";
  background: url("data:image/svg+xml,%3csvg width='16' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.7 1.7 8 8 14.3 1.7' stroke='%23fff' fill='none' stroke-width='2'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center center;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 0.7em 0 0;
  background-color: #980e99;
  border-radius: 100%;
  float: left;
  border: 1px solid #fff;
  padding: 0;
  position: absolute;
  left: 0;
}

.simpleadvancedfields_contain > input:checked + label {
  cursor: default;
}

.simpleadvancedfields_contain > input:not(:checked) + label:before {
  transform: rotate(-90deg);
}

.simpleadvancedfields_contain > input + label em {
  font-weight: 300;
  font-size: 0.9em;
  font-style: normal;
}

.simpleadvancedfields_contain > input {
  position: absolute;
  width: 100%;
  height: 2.5rem;
  opacity: 0.0001;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  pointer-events: none;
  border-radius: 2rem;
}

@media (max-width: 40em) {
  .simpleadvancedfields_contain > input + label em {
    display: block;
  }

  .simpleadvancedfields_contain > input {
    height: 4em;
  }
}

.simpleadvancedfields_contain > input:focus-visible {
  opacity: 1;
  background: none;
  appearance: none;
  outline: 1px solid #6078a7;
}

.simpleadvancedfields {
  flex: 1;
  display: flex;
  padding: 1rem 0 0 0;
}



.simple_form {
  margin-bottom: 1.5em;
  word-break: break-word;
}

.simple_form fieldset {
  border: 0;
  padding: 0;
  margin-bottom: 1.5em;
}

.simple_form legend {
  font-weight: bold;
  padding-bottom: 0.5em;
}

.simple_form select {
  width: auto;
}

.simple_form p {
  margin: 1.5em auto;
}

.vitals-diagnostics .frames {
  margin: 2em 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-flow: row wrap;
}

.vitals-diagnostics .vitals-waterfall {
  margin-top: 4em;
  position: relative;
  text-align: center !important;
}

.vitals-diagnostics .vitals-waterfall .waterfall-legend {
  margin: 0 auto 1rem;
  text-align: center;
}

.vitals-diagnostics .waterfall-label {
  display: none;
}

.vitals-diagnostics .waterfall-label abbr {
  border: 0;
  text-decoration: none;
}

.vitals-diagnostics .waterfall-label-lcp {
  background: #008000;
  color: #fff;
}

.vitals-diagnostics .values {
  margin-top: 1.5em;
  word-break: break-all;
}

.vitals-diagnostics .values li li {
  padding-left: 2em;
}

.vitals-diagnostics .pretty caption {
  font-size: 1.4em;
  font-weight: bold;
  margin: 1em 0;
  text-align: left;
}

.vitals-diagnostics .pretty th,
.vitals-diagnostics .pretty td,
.vitals-diagnostics .values li {
  border: 1px solid #ddd;
  padding: 0.8em;
}

.vitals-diagnostics .values li {
  padding: 0.8em;
  border-bottom: 0;
}

.vitals-diagnostics .values li:last-child {
  border: 1px solid #ddd;
}

.vitals-diagnostics .values li li {
  border-left: 0;
  border-right: 0;
}

.vitals-diagnostics .values li ul {
  margin: 0.8em;
  border-left: 0.8em solid #ddd;
  padding: 0;
}

.vitals-diagnostics code {
  display: block;
  text-align: left;
  padding: 0.3em 0.5em;
  font-size: 1.1em;
}

.waterfall-legend {
  font-size: 0.6875em;
  margin: 1em auto;
}

.waterfall-legend,
.waterfall-legend td {
  border: 1px solid silver;
  border-collapse: collapse;
  vertical-align: middle;
}

.waterfall-legend .bar,
.waterfall-legend img,
.waterfall-legend .arrow-down {
  float: left;
  margin-right: 0.5em;
}

.waterfall-legend td {
  padding: 2px 5px;
}

.waterfall-legend img {
  position: relative;
  top: 0.2em;
}

.waterfall-legend .arrow-down {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 10px solid #69009e;
  position: relative;
  top: 0.5em;
}

.waterfall-legend tbody td {
  padding: 0.7em 1.5em;
  background: #fff;
  border: 5px solid #fff;
  border-radius: 3em;
  box-shadow: inset 0 0 0 1px #cdcdcd;
  background-clip: padding-box;
}

@media (max-width: 1012px) {
  .waterfall-legend {
    margin: 0;
    border: 0;
  }

  .waterfall-legend tbody tr {
    display: flex;
    flex-flow: row wrap;
  }

  div.waterfall-container,
  div.overflow-container {
    position: relative;
    left: 0;
    top: 0;
    clear: both;
    text-align: left;
    width: 100% !important;
    margin: auto;
    overflow: hidden;
    overflow-x: auto;
  }

  div.waterfall-container img.waterfall-image {
    width: 1012px;
  }
}



div.waterfall-container {
  position: relative;
  left: 0;
  top: 0;
  clear: both;
  text-align: left;
  width: 1012px;
  margin: auto;
}

img.waterfall-image {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
}

div.request-overlay {
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 1010px;
  left: 1px;
  background-color: #fff;
  overflow: hidden;
  opacity: 0.9;
}

div.request-overlay.selected {
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-color: #1151bb;
}

div.request-overlay.lcp-request {
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-color: #008000;
}

div.transparent {
  opacity: 0;
}

div.dialog-title {
  display: inline-block;
}

div.dialog-title a {
  color: #fff;
}

div.request-dialog-radio {
  display: inline;
  padding-left: 20px;
  font-weight: normal;
}

.request-headers,
.response-headers,
.response-body,
.request-raw-details,
.request-blocking {
  display: none;
}

.request-details a {
  word-break: break-all;
}

.request-details h3 {
  margin-bottom: 0;
  margin-top: 0.5em;
  text-decoration: underline;
  font-size: 1em;
}

.request-details ul.hints {
  list-style-type: disc;
  margin-left: 2em;
}

.jqmWindow {
  display: none;
  position: fixed;
  top: 17%;
  left: 50%;
  margin-left: -300px;
  width: 600px;
  background-color: #dfdfdf;
  color: #333;
  border: 1px solid black;
  padding: 12px;
}

.jqmOverlay {
  background-color: #000;
}

div.jqDrag {
  cursor: move;
}

.jqResize {
  width: 100%;
  height: 3px;
  background: #dfdfdf;
  border-top: 1px solid #a3a3a3;
  border-bottom: 1px solid #a3a3a3;
  cursor: ns-resize;
}

div.jqmDialog {
  display: none;
  position: absolute;
  top: 17%;
  right: 20px;
  width: 800px;
  height: 500px;
  font-size: smaller;
  line-height: 1.5em;
  overflow: hidden;
  font-family: verdana, tahoma, helvetica, sans-serif;
  color: #000;
  background: #fff;
  border: 1px solid #aaa;
  text-align: left;
  box-shadow: 0 0 5px rgb(0 0 0 / 50%);
  border-radius: 5px;
}

@media (max-width: 1019px) {
  div.jqmDialog {
    left: 5% !important;
    max-width: 90% !important;
    max-height: 80% !important;
  }
}

div.jqmDialog pre,
.jqmDialog .response-body {
  font-size: medium;
  line-height: 1.25em;
}

.jqmDialog .response-body {
  font-family: monospace;
  white-space: pre;
}

div.jqmdTC {
  background: #303030;
  color: #000;
  padding: 0.5rem 1rem;
  font-family: verdana, tahoma, helvetica, sans-serif;
  font-weight: bold;
  zoom: 1;
  cursor: move;
}

div.jqmdBC {
  height: 450px;
  padding: 0.5rem 1rem;
  overflow: auto;
}

div.jqmdX {
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
  padding: 0 0 0 16px;
  height: 16px;
  width: 0px;
  background: url(/assets/images/dialog-close.png) no-repeat 0px -16px;
  overflow: hidden;
}

div.jqmdX:hover {
  background-position: 0px 0px;
}

div.jqmdBC button {
  margin: 8px 10px 4px 10px;
  color: #777;
  background-color: #fff;
  cursor: pointer;
}



.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
}

.ui-state-disabled {
  cursor: default !important;
}

.ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

.ui-widget-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background-color: none;
}

div.request-dialog-radio .ui-state-default {
  color: #ffffff;
  border: 0;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
  color: #ffffff;
  text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hovers {
  border: none;
}

div.request-dialog-radio .ui-state-hover {
  background-color: #555;
}

div.request-dialog-radio .ui-state-active,
div.request-dialog-radio .ui-widget-header .ui-state-active {
  background-color: #ffffff;
  font-weight: bold;
  color: #c00;
  border-radius: 20px;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #fff;
  text-decoration: none;
}

.ui-state-hover a,
.ui-state-hover a:hover {
  color: inherit;
  text-decoration: none;
}

.ui-widget :active {
  outline: none;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #cd0a0a;
  background: #b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50%
    50% repeat;
  color: #ffffff;
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
  color: #ffffff;
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #ffffff;
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold;
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  font-weight: normal;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  background-image: none;
}

.ui-icon {
  width: 16px;
  height: 16px;
  background-image: url(/assets/images/ui-icons_222222_256x240.png);
}

.ui-widget-content .ui-icon {
  background-image: url(/assets/images/ui-icons_222222_256x240.png);
}

.ui-widget-header .ui-icon {
  background-image: url(/assets/images/ui-icons_ffffff_256x240.png);
}

.ui-state-default .ui-icon {
  background-image: url(/assets/images/ui-icons_ef8c08_256x240.png);
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
  background-image: url(/assets/images/ui-icons_ef8c08_256x240.png);
}

.ui-state-active .ui-icon {
  background-image: url(/assets/images/ui-icons_ef8c08_256x240.png);
}

.ui-state-highlight .ui-icon {
  background-image: url(/assets/images/ui-icons_228ef1_256x240.png);
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
  background-image: url(/assets/images/ui-icons_ffd27a_256x240.png);
}



.ui-button {
  display: inline-block;
  position: relative;
  padding: 0.3em 0.4em;
  margin-right: 0.1em;
  text-decoration: none !important;
  cursor: pointer;
  text-align: center;
  border-radius: 20px;
  zoom: 1;
  overflow: visible;
}



.ui-button-icon-only {
  width: 2.2em;
}



button.ui-button-icon-only {
  width: 2.4em;
}



.ui-button-icons-only {
  width: 3.4em;
}

button.ui-button-icons-only {
  width: 3.7em;
}

.ui-button .ui-button-text {
  display: block;
  line-height: 1.1;
}

.ui-button-text-only .ui-button-text {
  padding: 2px 5px;
}

.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
  padding: 0.4em;
  text-indent: -9999999px;
}

.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
  padding: 0.4em 1em 0.4em 2.1em;
}

.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
  padding: 0.4em 2.1em 0.4em 1em;
}

.ui-button-text-icons .ui-button-text {
  padding-left: 2.1em;
  padding-right: 2.1em;
}

input.ui-button {
  padding: 0.4em 1em;
}

.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
  position: absolute;
  top: 50%;
  margin-top: -8px;
}

.ui-button-icon-only .ui-icon {
  left: 50%;
  margin-left: -8px;
}

.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
  left: 0.5em;
}

.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
  right: 0.5em;
}

.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
  right: 0.5em;
}

.ui-buttonset {
  margin-right: 7px;
}

.ui-buttonset .ui-button {
  margin-left: 0;
}

button.ui-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}



.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

.ui-slider-horizontal {
  height: 0.8em;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  margin-left: -0.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}

div.bar {
  display: inline-block;
  height: 20px;
  margin-top: auto;
  margin-bottom: auto;
}

#requestBlockingSettings {
  position: fixed;
  bottom: 1.5em;
  left: 1.5em;
  background: #121d35;
  max-width: 25em;
  color: #fff;
  padding: 1em;
  border-radius: 3px;
  font-size: 0.9em;
  box-shadow: 0px 6.4px 14.4px rgb(0 0 0 / 13%),
    0px 1.2px 3.6px rgb(0 0 0 / 11%);
}

#requestBlockingSettings.inactive {
  display: none;
}

#requestBlockingSettings h2 {
  font-size: 1em;
}

#requestBlockingSettings ul + h2 {
  margin-top: 2em;
}

#requestBlockingSettings li {
  word-break: break-word;
  font-size: 0.9em;
}

#requestBlockingSettings button {
  border: 0;
  border-radius: 4px;
  padding: 0.6875em 2.625em;
  background: #f9d856;
  font-size: 1em;
  cursor: pointer;
  color: #111;
  text-decoration: none;
}

#requestBlockingForm {
  margin-top: 2em;
}

#requestBlockingSettings a[data-remove-field] {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  margin-right: 1em;
  display: inline-block;
}

#requestBlockingSettings .remove-block:hover {
  text-decoration: underline;
}

.experiments {
  margin-bottom: 2em;
}

#requestBlockingSettings label {
  display: block;
  font-weight: bold;
}

#requestBlockingSettings input[type="text"] {
  margin-bottom: 1em;
}



.details_panel {
  padding: 0;
  border: 0;
  box-shadow: none;
  margin: 0;
  border-radius: 10px;
}

.details_panel summary::-webkit-details-marker,
.testinfo_forms summary::-webkit-details-marker,
.test_presets_more summary::-webkit-details-marker {
  display: none;
}

.details_panel:not([open]) {
  display: inline-block;
}

.details_panel_hed {
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  list-style-type: none;
  padding: 1rem 1.5rem;
  transition: all 0.5s ease-out;
  box-shadow: none;
}

.details_panel:not([open]) .details_panel_hed {
  border: 1px solid #ddd;
  border-radius: 10px;
}

.details_panel[open] .details_panel_hed {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0;
}

.details_panel_hed::-webkit-details-marker {
  display: none;
}

.details_panel_hed > span {
  display: flex;
  gap: 0.5rem;
}

.details_panel:not([open]):hover .details_panel_hed,
.details_panel:not([open]):focus-within .details_panel_hed {
  border: 1px solid #aaa;
  outline: none;
}

.details_panel:focus-within summary:focus {
  outline: none;
}

.details_panel_hed .icon_plus {
  background: rgb(233 233 233);
  border-radius: 100%;
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  position: relative;
  font-size: 1rem;
}

.details_panel_hed .icon_plus:before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -0.1rem;
  left: 25%;
  right: 25%;
  height: 0.2em;
  background: #555;
}

.details_panel_hed .icon_plus:after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -0.1rem;
  top: 25%;
  bottom: 25%;
  width: 0.2em;
  background: #555;
}

.details_panel[open] > .details_panel_hed .icon_plus {
  transform: rotate(45deg);
  position: absolute;
  right: 1rem;
}

.details_panel_content {
  padding: 1.5rem;
}

.customwaterfall_download {
  margin: 3rem 0;
}

.details_panel fieldset {
  border: 0;
  padding: 0.3rem 0 0;
  margin: 0 0 1rem;
}

.details_panel legend {
  font-weight: bold;
  margin: 0;
  display: block;
  padding: 0;
}

.details_panel label,
.details_panel label input[type="text"] {
  display: block;
  margin-bottom: 0.5rem;
}

.details_panel label input[type="text"] {
  margin: 0.2rem 0 1rem;
}

.details_panel label em {
  font-size: 0.8em;
}

.details_panel label {
  margin: 0.3rem 0 0.5rem;
  line-height: 1.2;
}

.details_panel a {
  color: inherit;
  display: block;
  margin: 1rem 0;
}

.customwaterfall_hed {
  padding: 0 1.5rem;
}



@media (min-width: 50em) {
  .customwaterfall_hed {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 3rem;
  }

  .details_panel[open] {
    border: 1px solid #2f80ed;
    box-shadow: 0 0 30px rgb(47 128 237 / 50%);
    background: rgba(18, 29, 53, 0.95);
    color: #fff;
    min-height: 20rem;
    position: fixed;
    z-index: 999999;
    right: 2vw;
    top: auto;
    width: 50vw;
    bottom: 2rem;
    max-width: 20rem;
  }

  .details_panel_content {
    overflow: auto;
    max-height: 75vh;
    min-height: 20rem;
  }
}

.terms-of-service ul {
  list-style-type: disc;
  margin-left: 1em;
  padding-left: 1em;
  margin-bottom: 1.5em;
}

.logout-form button[type="submit"] {
  appearance: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1em;
  cursor: pointer;
}

.logout-form button[type="submit"]:hover {
  text-decoration: underline;
}

.error-banner {
  font-size: 0.875em;
  max-width: 100%;
  background-color: #fce8e6;
  color: #0e1e38;
  text-align: center;
}

.error-banner div {
  padding: 0.8em 1em 1.2em;
}

.error-banner p {
  margin: 0 auto;
  font-size: 0.9em;
}

.error-banner img {
  max-height: 2em;
  display: inline-block;
  max-width: 5em;
  margin-right: 0.7em;
  position: relative;
  top: 0.8em;
  margin-top: -1em;
}

.error-banner a {
  display: block;
  color: #0e1e38;
}

@media screen and (min-width: 35em) {
  .error-banner {
    grid-column: 1 / 13;
  }

  .error-banner a,
  .error-banner-twitch a {
    display: inline-block;
  }
}

.a11y-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}



body.screenshot a {
  text-decoration: none !important;
}

body.screenshot:not(.result-impact) .results_header h2 {
  opacity: 0;
  margin: 0;
  padding: 0;
  height: 1rem;
}
body.screenshot.result-impact .results_header h2 {
  margin: 1rem 0 0;
}
body.screenshot.result-impact .results_header h2 + p {
  display: none;
}

body.screenshot wpt-header,
body.screenshot .alert-banner,
body.screenshot .cta-banner,
body.screenshot .experiment_meta-more,
body.screenshot .results_nav_contain,
body.screenshot .test_presets_more,
body.screenshot .experiment_meta_urls,
body.screenshot header ul,
body.screenshot .experiment_opportunities + .hed_sub,
body.screenshot.result:not(.compare-experiment):not(.result-impact)
  .results_header,
body.screenshot .metrics_shown,
body.screenshot.result-summary .cruxembed,
body.screenshot.result-summary #tables,
body.screenshot.compare-experiment:not(.result-impact) .results_body,
body.screenshot.result-summary .results_body .hed_sub,
body.screenshot .results-filmstrip-container span,
body.screenshot .compare_contain_wrap,
body.screenshot.compare:not(.compare-experiment) .test_results_header,
body.screenshot .result_plot,
body.screenshot.result-opportunities .results_body,
body.screenshot.result-opportunities
  .opportunities_summary
  .experiment_summary_label,
body.screenshot footer li,
body.screenshot header details,
body.screenshot .play,
body.screenshot .metric_experiment,
body.screenshot .metric_control,
body.screenshot footer img,
body.screenshot .opps_note,
body.screenshot .experiment_opportunities,
body.screenshot .grade_header-lighthouse,
body.screenshot .hed_sub-lighthouse,
body.screenshot .results_main-lh .grade_header-lighthouse:not(:first-of-type),
body.screenshot .results_main-lh .experiments_bottlenecks ~ *,
body.screenshot .results_main-lh .scrollableTable ~ *,
body.screenshot.result:not(.compare-experiment)
  .results_main-lh
  .results_header
  p {
  display: none !important;
}
body.screenshot .results_header_contain {
  padding-top: 2rem;
}
body.screenshot.result:not(.compare-experiment)
  .results_main-lh
  .results_header {
  display: block !important;
  padding: 0;
  margin: 0;
  min-height: 0;
}

body.screenshot.result:not(.compare-experiment)
  .results_main-lh
  .results_header
  h2 {
  display: flex !important;
  opacity: 1;
  height: auto;
  padding: 0 0 0.5rem;
  margin: 0 0;
  font-size: 1.8em;
}

body.screenshot header {
  border: 0;
  margin: 0;
}

body.screenshot #header_container {
  padding-top: 1rem !important;
}

body.screenshot .header_data_urltime {
  display: block;
  margin: 0;
  padding: 0;
}

body.screenshot .header_data_urltime li {
  width: 100%;
  max-width: 100%;
  margin: 0 0 0.5em;
}

body.screenshot.result .results_body {
  box-shadow: none;
}

body.screenshot.result-opportunities .opportunities_summary {
  margin: 1rem 0;
}

body.screenshot.result-opportunities .opportunities_summary_body {
  display: block;
}

body.screenshot footer {
  padding: 1em !important;
  margin-top: 0 !important;
}

body.screenshot footer li:last-child {
  display: block !important;
}

body.screenshot .header_screenshots {
  margin-top: -10rem;
  z-index: 99999999;
  align-self: center;
  justify-content: center;
}

body.screenshot #videoContainer img {
  height: 50px !important;
  width: auto !important;
}

body.screenshot #video * {
  font-size: 14px;
}

body.screenshot .header_data_urltime *,
body.screenshot .experiment_meta_included p,
body.screenshot .experiment_meta_included summary {
  font-size: 1rem !important;
}

body.screenshot .experiment_meta_included p,
body.screenshot .experiment_meta_included summary {
  font-size: 1.1rem !important;
  margin: 0;
  padding: 0 0 0 0;
  background: inherit;
  border: 0;
}

body.screenshot .experiment_meta_included * {
  display: inline-block;
}

body.screenshot .experiment_meta_included {
  display: block;
  max-width: 50%;
}

body.screenshot .experiment_meta_included ul {
  display: contents;
}

body.screenshot .experiment_meta_included li:not(li:last-child):after {
  content: ", ";
  margin-right: 0.5em;
  font-weight: 700;
}

body.screenshot #header_data {
  min-width: 50%;
}

body.screenshot .header_screenshots {
  flex: 0 1 40%;
}

body.screenshot .header_screenshots img {
  max-height: 220px !important;
  max-width: 100% !important;
  width: auto !important;
}

body.screenshot .results_main-lh .opportunities_summary {
  padding: 0;
}

body.screenshot .results_main-lh nav.results_lh_nav {
  margin: 1rem 0 0;
}
body.screenshot .results_main-lh nav.results_lh_nav a {
  justify-content: flex-start;
  flex: 1 1 auto;
  border: 0;
  padding: 0;
}
body.screenshot .results_main-lh .scrollableTable {
  border-top: 1px solid #ddd;
}
body.screenshot .results_main-lh .experiments_bottlenecks {
  margin-bottom: 0;
}

.linklike {
  cursor: pointer;
  text-decoration: underline;
}



.banner_lfwp,
wpt-header .wptheader_nav_menu_section a.banner_lfwp {
  color: white;
  background-color: #352a20;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23776340'/%3E%3Cstop offset='1' stop-color='%2317150C'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23CCB77F' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23CCB77F' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
  background-position: bottom 30% left 40%;
  background-repeat: no-repeat;
  background-size: 300% 300%;
  border-radius: 0.8em;
  border: 1px solid #352a20;
  display: block;
  padding: 1.5em;
  margin: 1em 0;
}

.banner_lfwp:hover,
wpt-header .wptheader_nav_menu_section a.banner_lfwp:hover {
  box-shadow: 0 0 5px #352a20;
}

.banner_lfwp_line {
  display: block;
}

.banner_lfwp_line:first-child {
  border-bottom: 1px solid #fff;
  padding-bottom: 0.5em;
  font-size: 1.3em;
  gap: 0.5em;
  justify-content: flex-start;
  font-style: italic;
}

.banner_lfwp_line:first-child b {
  display: block;
  font-weight: 800;
  font-style: normal;
}

.banner_lfwp_line:last-child {
  display: flex;
  align-items: baseline;
}

.banner_lfwp_flag {
  background: #ffffff;
  padding: 0.6875em 1.4375em;
  font-size: 0.8em;
  display: inline-block;
  border-radius: 0.4em;
  color: #5b482f;
  margin-right: 0.5em;
  vertical-align: middle;
  font-weight: 700;
}

.banner_lfwp_pill {
  background: #efd36e;
  border-radius: 6.25em;
  line-height: 1em;
  text-decoration: none;
  margin: 1rem 0 0 0em;
  font-weight: 700;
  border: 1px solid #fff;
  padding: 1em 1.3em;
  display: block;
  max-width: 9em;
  color: #111;
  font-size: 0.8em;
  text-align: center;
}


.notification-banner {
  padding: 30px;
  box-shadow: rgb(0 0 0 / 10%) 1px 1px 4px 0px;
  border-radius: 10px;
  margin-bottom: 15px;
}
.notification-banner p {
  display: flex;
  align-items: center;
  margin: 0;
}

.notification-banner__success {
  background-color: rgb(244, 255, 241);
}
.notification-banner__success p::before {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM4M2M5OWM7fS5jbHMtMntmaWxsOm5vbmU7c3Ryb2tlOiNmZmY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkljb25zX1JlZGVzaWduPC90aXRsZT48ZyBpZD0iQ29weSI+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI4IiBjeT0iOCIgcj0iOCIvPjxwb2x5bGluZSBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNCA4IDYuNSAxMC41IDExLjUgNS41Ii8+PC9nPjwvc3ZnPg==)
    center center / contain no-repeat;
  display: block;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  content: "";
}
.notification-banner__error {
  background-color: #fce8e6;
}
.notification-banner__error p::before {
  background: url(/images/src/icon_grading_alert.svg) left 50% no-repeat;
  display: block;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  content: "";
  background-size: auto 1.2em !important;
}
.notification-banner__info {
  background-color: #d0f5ff;
}

.notification-banner__info p::before {
  background: url(/images/src/icon_opportunities.svg) left 0 bottom 50%
    no-repeat;
  display: block;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  content: "";
  background-size: auto 1.2em !important;
}

.notification-banner__warning {
  background-color: #feffd0;
}
.notification-banner__warning p::before {
  background: url(/images/src/icon_grading_warn.svg) left 50% no-repeat;
  background-size: auto 1.2em !important;
  display: block;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  content: "";
}


.notification-banner {
  padding: 30px;
  box-shadow: rgb(0 0 0 / 10%) 1px 1px 4px 0px;
  border-radius: 10px;
  margin-bottom: 15px;
}
.notification-banner p {
  display: flex;
  align-items: center;
}

.notification-banner__success {
  background-color: rgb(244, 255, 241);
}
.notification-banner__success p::before {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM4M2M5OWM7fS5jbHMtMntmaWxsOm5vbmU7c3Ryb2tlOiNmZmY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkljb25zX1JlZGVzaWduPC90aXRsZT48ZyBpZD0iQ29weSI+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI4IiBjeT0iOCIgcj0iOCIvPjxwb2x5bGluZSBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNCA4IDYuNSAxMC41IDExLjUgNS41Ii8+PC9nPjwvc3ZnPg==)
    center center / contain no-repeat;
  display: block;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  content: "";
}
.notification-banner__error {
  background-color: #fce8e6;
}
.notification-banner__error p::before {
  background: url(/images/src/icon_grading_alert.svg) left 50% no-repeat;
  display: block;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  content: "";
  background-size: auto 1.2em !important;
}
.notification-banner__info {
  background-color: #d0f5ff;
}

.notification-banner__info p::before {
  background: url(/images/src/icon_opportunities.svg) left 0 bottom 50%
    no-repeat;
  display: block;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  content: "";
  background-size: auto 1.2em !important;
}

.notification-banner__warning {
  background-color: #feffd0;
}
.notification-banner__warning p::before {
  background: url(/images/src/icon_grading_warn.svg) left 50% no-repeat;
  background-size: auto 1.2em !important;
  display: block;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  content: "";
}

.glossary dt {
  padding: 10px 0;
  font-weight: 300;
  font-size: 0.8em;
  text-transform: uppercase;
}

.glossary dd {
  margin-left: 0;
}

.glossary li {
  padding: 3px 0;
}

.table-cell-even {
  background: whitesmoke;
}

.table-cell-warning {
  background: yellow;
}

.table-cell-error {
  background: red;
}

.scrollableLine {
  overflow: auto;
  white-space: nowrap;
}


pre[class*="language-"] {
  background: none !important;
}


.lh-logo {
  display: flex;
  align-items: center;
}

.lh-logo svg {
  flex: 0 0 1.2em;
}

.lh_score .lh_score_number {
  font-weight: normal;
  font-family: "Roboto Mono", "Menlo", "dejavu sans mono", "Consolas",
    "Lucida Console", monospace;
  width: 1.1em;
  height: 1.1em;
  line-height: 1.1em;
  display: inline-flex;
  text-align: center;
  font-size: 1em;
  border-radius: 100%;
  padding: 0.6em;
  align-content: center;
  justify-content: center;
  position: relative;
}

.lh_score_number svg {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform;
  transform: rotate(0deg);
  width: 100%;
}

.lh-gauge {
  stroke-linecap: round;
}

.lh-gauge-arc {
  fill: none;
  transform-origin: 50% 50%;
  animation: load-gauge 1s ease forwards;
  animation-delay: 250ms;
}

.lh-gauge-base {
  opacity: 0.1;
}



:root {
  
  --color-amber-50: #fff8e1;
  --color-blue-200: #90caf9;
  --color-blue-900: #0d47a1;
  --color-blue-A700: #2962ff;
  --color-blue-primary: #06f;
  --color-cyan-500: #00bcd4;
  --color-gray-100: #f5f5f5;
  --color-gray-300: #cfcfcf;
  --color-gray-200: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-50: #fafafa;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;
  --color-gray: #000000;
  --color-green-700: #080;
  --color-green: #0c6;
  --color-lime-400: #d3e156;
  --color-orange-50: #fff3e0;
  --color-orange-700: #c33300;
  --color-orange: #fa3;
  --color-red-700: #c00;
  --color-red: #f33;
  --color-teal-600: #00897b;
  --color-white: #ffffff;
  --color-average-secondary: var(--color-orange-700);
  --color-average: var(--color-orange);
  --color-fail-secondary: var(--color-red-700);
  --color-fail: var(--color-red);
  --color-hover: var(--color-gray-50);
  --color-informative: var(--color-blue-900);
  --color-pass-secondary: var(--color-green-700);
  --color-pass: var(--color-green);
  --color-not-applicable: var(--color-gray-600);
}

.lh_score.lh_score_grade-a {
  color: var(--color-pass-secondary);
  fill: var(--color-pass);
  stroke: var(--color-pass);
}

.lh_score.lh_score_grade-c {
  color: var(--color-average-secondary);
  fill: var(--color-average);
  stroke: var(--color-average);
}

.lh_score.lh_score_grade-f {
  color: var(--color-fail-secondary);
  fill: var(--color-fail);
  stroke: var(--color-fail);
}

.lh-gauge__wrapper--not-applicable {
  color: var(--color-not-applicable);
  fill: var(--color-not-applicable);
  stroke: var(--color-not-applicable);
}

.results_main-lh .opportunities_summary {
  min-width: 100%;
  margin-bottom: 1em;
  display: block;
}

.results_main-lh .results_and_command {
  gap: 3rem;
  display: flex;
}
.opps_note {
  flex: 1 0 25%;
  margin: 6rem 0 2rem;
  padding: 1rem 1.5rem 0.5rem;
  background: #eff8ff;
  border-radius: 0.7em;
}
.opps_note-links {
  margin: 1em 0;
  background: #fafafa;
  background-image: url(/assets/images/src/icon_science_bubbling.svg);
  background-size: auto 2rem;
  padding-left: 2.6em;
  background-position: left 0.5em top 45%;
  background-repeat: no-repeat;
}
.opps_note p {
  color: #2a3b64;
  line-height: 1.7;
  margin: 0 0 0.5em 0;
  font-size: 0.9em;
}
.opps_note:not(.opps_note-links) p a {
  background-color: #fbe076;
  border: 1px solid #e2d088;
  color: #333;
  border-radius: 1em;
  text-decoration: none;
  padding: 0.1em 0.7em 0.2em;
  font-size: 0.9em;
  display: inline-block;
  font-weight: bold;
  text-transform: capitalize;
}

@media (max-width: 60em) {
  .results_main-lh .results_and_command {
    width: auto;
    gap: 0;
  }
  .opps_note {
    margin: 0 -1.5rem 1rem;
  }
}

.results_header p span.lh_score_grade-fail {
  color: red;
  font-size: 0.8em;
}
.results_header p span.lh_score_grade-average {
  color: #ffab33;
  font-size: 0.8em;
}
.results_header p span.lh_score_grade-pass {
  color: #008f11;
  font-size: 0.8em;
}

.results_main-lh nav.results_lh_nav {
  display: flex;
  flex: 1 0 100%;
  gap: 0.5em;
  flex-flow: row wrap;
}

@media (min-width: 70em) {
  .results_main-lh nav.results_lh_nav {
    justify-content: flex-start;
    
  }
}

.results_lh_nav a {
  flex: 0 1 auto;
  display: flex;
  flex-flow: row;
  align-items: center;
  font-weight: 700;
  font-size: 1.1em;
  
  margin: 0;
  justify-content: center;
  gap: 0.5em;
  white-space: nowrap;
  border: 1px solid #eee;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  background: #fff;
}

.opportunities_summary .results_lh_nav a:last-child {
  border-width: 1px;
}

.results_lh_nav a:hover .lh_score_cat,
.results_lh_nav a:focus .lh_score_cat {
  text-decoration: underline;
}

.results_lh_nav a:hover .lh_score_number,
.results_lh_nav a:focus .lh_score_number {
  text-decoration: none;
  box-shadow: 0 0 3px #aaa;
}

.results_lh_nav span.lh_score_cat {
  color: #2a3b64;
}

.results_main-lh .experiments_bottlenecks {
  position: relative;
}

.results_main-lh .results_body {
  padding-bottom: 2rem;
}

.results_main-lh details.metrics_shown {
  top: 1em;
  right: 0;
}

.grade_heading.lh_score {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex: 1 1 auto;
}

.grade_heading.lh_score .lh_score_number {
  font-size: 0.7em;
}

.grade_heading.lh_score .lh_score_cat {
  flex: 1 1 calc(100% - 5rem);
  font-weight: 900;
  color: #2a3b64;
}

.results_main-lh span.units {
  text-transform: uppercase;
}

.results_main-lh h4 {
  margin: 1em 0 0;
  border-bottom: 1px solid #eee;
  font-size: 1.1em;
  color: #444;
}

.results_main-lh summary p {
  display: inline;
}
.summary_text {
  display: flex;
  justify-content: space-between;
}
.summary_text p {
  margin: 0;
}
.summary_text > p {
  font-weight: 300;
  font-size: 1rem;
}
.summary_text > div {
  display: flex;
  align-items: flex-start;
}
.summary_text > div {
  gap: 0.5em;
}

.lh_experimentlink {
  font-size: 0.7em;
  font-weight: 700;
  border-radius: 2em;
  padding: 0.3em 1em 0.3em 2.5em;
  background: #f9fff7 url(/assets/images/src/icon_science_bubbling.svg) left
    0.5em top 40% no-repeat;
  display: inline-block;
  text-decoration: none;
  color: #2c7014;
  border: 1px solid #4e8f37;
  background-size: 2em auto;
  margin-top: -0.3em;
}
.lh_experimentlink em {
  font-style: normal;
  color: #333;
  font-weight: 500;
}

.results_main-lh summary em p {
  font-weight: normal;
}

.results_main-lh p:empty {
  display: none;
}

.results_main-lh p p {
  display: inline;
}

.lh-relevantmetrics strong {
  color: #555;
  font-weight: 500;
}

.lh-relevantmetric {
  padding: 0.3em 0.5em;
  font-size: 0.7em;
  text-transform: uppercase;
  background-color: #555;
  color: #fff;
  font-weight: normal;
  display: inline-block;
  border-radius: 0.3em;
  align-self: center;
  margin-right: 0.5em;
  line-height: 1;
}

details.metrics_shown p a {
  color: #fff;
}

.lh_filmstrip {
  display: flex;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fit, 60px);
  padding: 1em 1em 1em 0;
  gap: 1em;
  overflow: auto;
}
.lh_filmstrip_item {
  text-align: right;
  position: relative;
  flex: 1 1 100px;
}
.lh_filmstrip_item img {
  max-height: 130px;
  width: auto;
  border-width: 1px;
  margin: 0;
}

.lh-filter_map {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 2em 0 0;
  align-items: center;
}

a.lh-maplink {
  display: inline-block;
  border-radius: 2em;
  padding: 0.5em 1em;

  border: 1px solid #2a3b64;
  color: #2a3b64;
  font-size: 0.8em;
  font-weight: 700;
  text-decoration: none;
}

a.lh-maplink:hover,
a.lh-maplink:focus {
  background-color: #2a3b64;
  color: #fff;
  border-color: transparent;
}

p.lh-filteraudits {
  display: flex;
  gap: 0.5em;
  margin: 0;
  align-items: center;
}

.lh-filteraudits a {
  text-transform: uppercase;
  border: 1px solid transparent;
  padding: 0.1em 0;
}
.lh-filteraudits a:not([aria-current]):hover,
.lh-filteraudits a:not([aria-current]):focus {
  color: #2a3b64;
}
.lh-filteraudits a[aria-current] {
  text-decoration-color: transparent;
  color: #2a3b64;
  border-radius: 0.4em;
  padding: 0.1em 0.6em;
  border-color: #2a3b64;
  font-weight: 700;
}
.experiments_bottlenecks > ol > li.lh_audit-pass > details > summary:before {
  background-image: url(/assets/images/src/icon_grading_check.svg);
}
.experiments_bottlenecks > ol > li.lh_audit-average > details > summary:before {
  background-image: url(/assets/images/src/icon_grading_warn.svg);
  background-color: transparent;
}
.experiments_bottlenecks > ol > li.lh_audit-fail > details > summary:before {
  background-image: url(/assets/images/src/icon_grading_alert.svg);
  background-color: #d26122;
}
.experiments_bottlenecks
  > ol
  > li.lh_audit-informative
  > details
  > summary:before {
  background-image: url(/assets/images/src/icon_info_circle.svg);
  background-color: transparent;
  border: 1px solid #396fc2;
}
.experiments_bottlenecks
  > ol
  > li.lh_audit-notApplicable
  > details
  > summary:before,
.experiments_bottlenecks > ol > li.lh_audit-manual > details > summary:before {
  background-image: none;
  background-color: #ccc;
}
.results_main-lh .experiments_details_body {
  padding-bottom: 0;
}

.results_main-lh table.lh-details {
  width: 100%;
  display: table;
  font-size: 0.9em;
  margin: 0 0 1em 0;
  border-radius: 0.4em;
  background: #eee;
}

.results_main-lh table.lh-details th,
.results_main-lh table.lh-details td {
  padding: 0.5em;
  text-align: left;
}

.results_main-lh table.lh-details td.numeric {
  text-align: right;
}

.results_main-lh table.lh-details th {
  padding: 1em 0.5em;
  white-space: nowrap;
}
.results_main-lh table.lh-details th:first-child {
  border-top-left-radius: 0.4em;
}
.results_main-lh table.lh-details th:last-child {
  border-top-right-radius: 0.4em;
}

.results_main-lh table.lh-details th:last-child,
.results_main-lh table.lh-details td:last-child {
  text-align: right;
}
.results_main-lh table.lh-details th:first-child,
.results_main-lh table.lh-details td:first-child {
  text-align: left;
}

.results_main-lh table.lh-details tr:nth-child(odd) td {
  background: #fafafa;
}
.results_main-lh table.lh-details td b {
  display: block;
}

.lh-chain,
.experiments_details_body ol.lh-chain {
  font-size: 0.9em;
  margin: 0 0 1em 0;
  border: 1px solid #eee;
  border-radius: 0.4em;
  background: #fafafa;
  padding: 2em 2em 0;
}
.lh-chain ol {
  padding: 0 0 0.5em 1rem;
  font-size: 1em;
}
.lh-chain li {
  position: relative;
  overflow: visible;
  padding-left: 1em;
  padding-bottom: 0.3em;
  list-style: none;
  padding-right: 0;
}
.lh-chain li > span {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dotted #ddd;
  overflow-wrap: anywhere;
  gap: 1em;
  padding-bottom: 0.5em;
}

.lh-chain li:before {
  content: "";
  position: absolute;
  height: 0.6em;
  width: 1em;
  left: -0.5em;
  border-left: 2px solid #aaa;
  border-bottom: 2px solid #aaa;
  top: 0;
}
.lh-chain li > span span:last-child {
  white-space: nowrap;
}
.lh-details-failure p {
  margin: 0;
}

@media (max-width: 50em) {
  .results_main-lh nav.results_lh_nav {
    display: block;
  }
  .results_lh_nav a {
    flex: 1;
    display: block;
    margin-bottom: 0.4em;
  }
  .results_main-lh details.metrics_shown {
    margin: 0 0 1em 0;
  }
  .opps_note-links {
    background-position: top 0.7em left 0.5em;
  }
  .lh-filter_map {
    display: block;
  }
  .results_main-lh .lh-filteraudits,
  .lh-filteraudits > span {
    display: block;
  }
  .results_main-lh .lh-filteraudits {
    margin-bottom: 1em;
  }
  .lh-filteraudits > span {
    width: 100%;
  }
  .lh-filteraudits a {
    display: inline-block;
  }
  .summary_text,
  .summary_text div,
  .summary_text div p {
    display: block;
  }
  .summary_text div p {
    margin: 0 0 0.2em;
  }
  .summary_text div a {
    margin: 0.5em 0;
  }
}


.ei_sky {
  display: none;
}
.result-impact .results_header p a {
  font-weight: 500;
  text-decoration: none;
}

.result-impact .results_header p a:hover,
.result-impact .results_header p a:focus {
  text-decoration: underline;
}
.results_header .ei_summary h3.hed_sub {
  border-bottom: 1px solid #cbcbcb;
  padding-bottom: 0.3em;
  color: #2a3c64;
  margin: 0;
}
.ei_summary_hosting li {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  padding-top: 1.6em;
}
.ei_summary_hosting li img {
  border: 3px solid #dedede;
  background: #eee;
  border-radius: 100%;
  padding: 0;
  max-width: 2rem;
}
.ei_summary_hosting li img[src*="alert"] {
  background: #d16122;
}
.ei_summary_hosting_info {
  order: 2;
  flex: 1 1 100%;
}
.ei_summary_hosting_info h4 {
  margin: 0;
  padding: 0;
  font-size: 1.1em;
  font-weight: 700;
}
.ei_summary_hosting_info p,
.ei_summary_hosting_info summary {
  font-size: 1em;
  margin: 0;
  color: #686868;
}
.result-impact .results_header p.ei_runrepeat {
  background: #f6f6f6;
  display: inline-block;
  margin: 5rem 0 0;
  font-size: 0.9em;
  padding: 0.3em 0.8em;
  border-radius: 0.5em;
}

.ei_summary_hosting_info summary::marker,
.ei_summary_hosting_info summary::-webkit-details-marker {
  display: none;
  content: "";
}
.ei_summary_hosting_info summary {
  list-style: none;
  padding: 0.2em 1.2em 0.2em 1.7em;
  cursor: pointer;
  background: url(/assets/images/src/icon_info_circle.svg),
    url("/assets/images/src/icon_triangledown.svg");
  background-size: 1.2em auto, 0.6em auto;
  border: 1px solid #eee;
  background-repeat: no-repeat;
  background-position: left 0.3em center, right 0.3em center;
  white-space: nowrap;
  border-radius: 3em;
  display: inline-block;
}
.ei_summary_hosting_info summary:hover,
.ei_summary_hosting_info summary:focus,
.ei_summary_hosting_info summary:active {
  background-color: #fff;
  outline: none;
  box-shadow: 0 0 8px #ddd;
  border-color: #ccc;
}
.ei_summary_hosting_info summary + div {
  position: absolute;
  width: 35em;
  max-width: 50vw;
  background: #fff;
  border-radius: 0.3em;
  border: 1px solid #ddd;
  padding: 1em 0;
  z-index: 100;
  overflow: auto;
  margin: 0.5em 0 0;
  max-height: 60vh;
  box-shadow: 0 0 5px #aaa;
}
.ei_summary_hosting_info summary + div table {
  font-size: 0.8rem;
  border-collapse: collapse;
  width: 100%;
}
.ei_summary_hosting_info summary + div table tr:nth-child(even) th,
.ei_summary_hosting_info summary + div table tr:nth-child(even) td {
  background: #f6f6f6;
}
.ei_summary_hosting_info summary + div table th,
.ei_summary_hosting_info summary + div table td {
  padding: 0.3em 1em;
  text-align: left;
}
.ei_summary_hosting_info summary + div table th {
  margin: 0;
  border: 0;
}
.ei_summary_hosting_info summary + div table th:first-child {
  width: 80%;
  overflow: auto;
}
.ei_summary_hosting_info summary + div tr:nth-child(n + 2) th {
  font-weight: 500;
}
.ei_summary_hosting_info summary + div img {
  width: 20px;
  border-width: 1px;
}
.ei_summary_metrics {
  margin-top: 2em;
}
.ei_summary_metrics td span.flag {
  text-align: left;
  font-size: 0.7rem;
  color: #222;
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  display: block;
  margin: 0.3em 0 0;
}
.result-impact .ei_summary_metrics th {
  white-space: nowrap;
}
.ei_summary_metrics .scrollableTable {
  margin: 0;
  padding: 0;
  overflow: auto;
  width: 100%;
}

.ei_diagnostics ul {
  display: flex;
  flex-flow: row wrap;
  gap: 2rem;
  margin: 1rem 0 2rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 2rem;
}
.ei_diagnostics-context ul {
  
  margin-top: 0;
}
.ei_diagnostics li {
  flex: 1 0 18em;
  padding: 0 0 0 4rem;
  position: relative;
  margin: 0;
}

.ei_diagnostics li h5 {
  margin: 0 0 0.1em;
  padding: 0;
  font-size: 1.1em;
}
.ei_diagnostics li p {
  margin: 0;
  font-size: 0.9em;
  padding: 0;
  line-height: 1.3;
}
.ei_diagnostics small {
  display: block;
  text-transform: uppercase;
  font-size: 0.7em;
  font-weight: 500;
  color: #0f71ba;
  margin-top: 0.6em;
}
.ei_diagnostics li:before {
  content: "";
  width: 3rem;
  height: 3rem;
  position: absolute;
  background: #dddddd;
  background-size: 50% auto;
  background-position: center center;
  background-repeat: no-repeat;
  left: 0;
  top: 0em;
  border-radius: 100%;
}

.ei_diagnostics-context li {
  font-size: 1.1em;
  color: #63522b;
  line-height: 1.4;
  justify-content: space-between;
  padding-top: 1em;
  padding-left: 1em;
  max-width: 30em;
}
.ei_diagnostics-context li:before {
  display: none;
}
.ei_diagnostics-context li img {
  height: 65px;
  margin: 0.5em auto 0;
  display: block;
  float: right;
}
.ei_diagnostics-context li:first-child {
  background: url(/assets/images/src/bg_envblobby2.svg) center top no-repeat;
  background-size: contain;
}
.ei_diagnostics-context li:nth-child(1) + li {
  background: url(/assets/images/src/bg_envblobby3.svg) center top no-repeat;
  background-size: contain;
}
.ei_diagnostics-context li:last-child {
  background: url(/assets/images/src/bg_envblobby4.svg) center top no-repeat;
  background-size: contain;
}

.ei_diagnostics li.ei_diagnostics_item-good:before {
  background-color: #7abc47;
}
.ei_diagnostics li.ei_diagnostics_item-avg:before {
  background-color: #f1af47;
}
.ei_diagnostics li.ei_diagnostics_item-bad:before {
  background-color: #d06023;
}

.ei_diagnostics li.ei_diagnostics_item-textcompression:before {
  background-image: url(/assets/images/src/icon-file-zipper.svg);
}
.ei_diagnostics li.ei_diagnostics_item-unusedpreloads:before {
  background-image: url(/assets/images/src/icon-file-wired.svg);
}
.ei_diagnostics li.ei_diagnostics_item-lazyloading:before {
  background-image: url(/assets/images/src/icon-file-bookmark-alt-1.svg);
}
.ei_diagnostics li.ei_diagnostics_item-memoryusage:before {
  background-image: url(/assets/images/src/icon-battery-bolt.svg);
}
.ei_diagnostics li.ei_diagnostics_item-imagecompression:before {
  background-image: url(/assets/images/src/icon-image-compression.svg);
}
.ei_diagnostics li.ei_diagnostics_item-caching:before {
  background-image: url(/assets/images/src/icon-caching.svg);
}
.ei_diagnostics li.ei_diagnostics_item-cdnusage:before {
  background-image: url(/assets/images/src/icon-globe-alt.svg);
}
.ei_diagnostics li.ei_diagnostics_item-cputime:before {
  background-image: url(/assets/images/src/icon-microchip.svg);
}
.ei_reduce {
  margin: 0;
}
.ei_reduce p,
.ei_reduce li,
.ei_reduce h4 {
  font-size: 1.1em;
  line-height: 1.5;
  max-width: 38em;
}
.ei_reduce h4 {
  font-weight: 700;
  font-size: 1.2em;
}
.ei_reduce li {
  list-style: disc;
  margin-left: 1em;
}
.ei_reduce ul {
  margin: 1em 0 2em 2em;
}
.ei_reduce img {
  vertical-align: middle;
  width: 8em;
  object-fit: contain;
  height: 1.8em;
}

.ei_diagnostics_item-experiments {
  display: inline-block;
  color: #4e8f37;
  padding-left: 1.6em;
  position: relative;
}
.result-impact .ei_diagnostics_item-experiments .experiment_summary_count {
  position: static;
  background: #fff;
  margin: 0;
}
.result-impact .opportunities_summary_exps {
  display: inline-block;
  margin: 0;
  padding: 0 0 0 1.8em;
  position: absolute;
  left: 0;
}

.pie {
  width: 100%;
  display: flex;
  margin: 1rem 0 3rem;
  justify-content: flex-start;
  gap: 3rem;
}
.pie_key {
  flex: 0 1 auto;
  display: block;
  order: 2;
}
.pie_key li {
  list-style: none;
  padding: 0.3em 0.8em;
  border-radius: 2em;
  margin: 0 0 0.4em;
  font-size: 0.9em;
  font-weight: 700;
  color: #fff;
}
.pie svg {
  flex: 0 1 60%;
  border-radius: 50%;
  transform: rotate(-90deg);
  order: 1;
  width: 100%;
  height: 100%;
}
@media (max-width: 40em) {
  .pie svg {
    flex: 0 1 50%;
  }
}
@media (max-width: 60em) {
  .ei_diagnostics-context li {
    padding-left: 0;
    background-position: bottom right !important;
    margin: 0;
  }
  .ei_diagnostics-context li img {
    height: 45px;
  }
  .result-impact .results_header p.ei_runrepeat {
    margin: 0.5rem 0 1rem;
  }
}
.pie circle {
  fill: transparent;
}

.ei_nodata {
  margin: 3rem 0;
  display: block;
  padding-bottom: 3rem;
}
.treecreds {
  text-align: right;
  padding-bottom: 2rem;
}

@media (min-width: 50em) {
  .result-impact .results_header p {
    max-width: 28em;
  }
}

@media (min-width: 70em) {
  .result-impact #test_results-container {
    position: relative;
    overflow: hidden;
  }

  .result-impact .results_main_contain {
    
    z-index: 1;
  }
  .result-impact .ei_sky {
    display: block;
    left: 0;
    width: 100%;
    top: -2.5rem;
    height: 16em;
    position: absolute;
    z-index: -1;
  }
  .result-impact .results_main {
    background: url(/assets/images/src/energyimpact-clouds.svg);
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: right 1rem top 2rem;
  }
  .result-impact .results_main {
    background: url(/assets/images/src/energyimpact-trees.svg),
      url(/assets/images/src/energyimpact-clouds.svg);
    background-repeat: no-repeat, no-repeat;
    background-size: auto auto, auto auto;
    background-position: right 13rem top 3rem, right 1rem top 2rem;
  }

  .ei_diagnostics ul {
    border-bottom: none;
  }

  .result-impact .results_header {
    padding: 0;
    margin: 0;
  }
  .ei_summary,
  .ei_summary_hosting ul {
    display: flex;
    justify-content: space-between;
    justify-content: flex-start;
  }
  .ei_summary_hosting ul {
    gap: 1rem;
  }
  .ei_summary {
    margin: 1em 0 1rem;
    gap: 3rem;
  }
  .ei_summary_hosting li {
    flex: 1 1 50%;
  }
  .ei_summary_hosting li img {
    max-width: 3rem;
  }

  .ei_summary_hosting,
  .ei_summary_metrics {
    margin-top: 0;
    flex: 1 1 50%;
  }

  .ei_supporting {
    display: flex;
    gap: 3rem;
  }
  .ei_supporting > div {
    flex: 1 1 50%;
  }
}

.result-impact .ei_sky {
  height: 25em;
}

@media (min-width: 90em) {
  .result-impact .results_header p {
    max-width: 38em;
  }
  .ei_diagnostics-context ul {
    gap: 8em;
  }
}

.ei_spread {
  border-top: 1px solid #eee;

  margin-bottom: 1em;
}
.ei_spread h3.hed_sub {
  margin-top: 0.5em;
}

.badge-info {
  display: flex;
  gap: 2rem;
  flex-flow: row wrap;
  justify-items: flex-start;
  padding-bottom: 2rem;
}
.badge-preview {
  flex: 0 1 15em;
  width: 15em;
}
.badge-preview img {
  display: block;
  width: 15em;
  height: auto;
  max-width: none;
  object-fit: unset;
}
.badge-snip {
  background: #1578c2;
  padding: 1em;
  flex: 1 1 50%;
  border-radius: 1em;
  align-self: center;
}
.badge-snip p,
.badge-snip p a {
  font-size: 0.8em;
  color: #fff;
}
.badge-snip p a {
  font-size: 1em;
}
.badge-snip pre {
  background: #fff;
  padding: 0.5em;
  overflow: auto;
  display: block;
  white-space: break-spaces;
  line-height: 1.2;
}

body.screenshot .ei_sky {
  top: -3em;
}
body.screenshot .ei_summary {
  margin: 3.5rem 0 0;
}

body.screenshot.result-impact .ei_sky {
  display: block;
  left: 0;
  width: 100%;
  top: -2.5rem;
  height: 16em;
  position: absolute;
  z-index: -1;
}
body.screenshot.result-impact .results_main {
  background: url(/assets/images/src/energyimpact-clouds.svg);
  background-repeat: no-repeat;
  background-size: auto auto;
  background-position: right 1rem top 2rem;
}
body.screenshot.result-impact .results_main {
  background: url(/assets/images/src/energyimpact-trees.svg),
    url(/assets/images/src/energyimpact-clouds.svg);
  background-repeat: no-repeat, no-repeat;
  background-size: 11em auto, auto auto;
  background-position: right 13rem top 0, right 1rem top -2rem;
}