.vis-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

body {
    margin: 0 0 40px;
    color: #111;
    font: 100%/1.4em 'Open Sans', sans-serif;
    background-color: #F4F4F4;
    grid-column-gap: 1.25em;
    grid-template-columns: [gutter-start] calc(50vw - 45em) repeat( 10, minmax(0, 1fr)) calc(50vw - 45em) [gutter-end];
    width: 100%;
}

body:not(.home) {
    background: #fff;
}

body,
input,
button,
select {
    font-family: 'Open Sans', sans-serif;
}

.home {
    background-color: #1b2a4a;
    /* slight value variation in blues here from nav to body */
    color: #fff;
}

header {
    grid-column-gap: 1.25em;
    border-bottom: 5px solid #1E2B47;
    background-color: #121D35;
    padding-top: 1px;
    padding: 0.5em 0 0;
}

.home header {
    border-bottom: 5px solid #6c0977;
}

@media screen and (min-width: 50em) {
    header {
        display: grid;
        grid-template-columns: 1vw repeat(4, 1fr) 1vw;
        align-items: center;
    }
}

@media screen and (min-width:75em) {
    body {
        display: grid;
    }
    header {
        grid-column: gutter-start / gutter-end;
        grid-template-columns: 1vw repeat( 10, 1fr) 1vw;
    }
}

@media (min-width: 87.5em) {
    header {
        grid-template-columns: calc(50vw - 45em) repeat( 10, 1fr) calc(50vw - 45em);
    }
}

header .logo {
    line-height: 0;
    margin: 1em 0;
    display: block;
    text-align: center;
}

header .logo img {
    width: 12em;
    max-width: 50vw;
}

@media screen and (min-width:40em) {
    header .logo {
        grid-column: 1 / 7;
        border-bottom: 1px solid rgba(255, 255, 255, .3);
        padding-bottom: 1.5rem;
        margin-bottom: 0;
        margin-top: 1.3em;
    }
}

@media screen and (min-width:75em) {
    header .logo {
        grid-column: 2/4;
        align-self: center;
        justify-self: left;
        padding-bottom: 0;
        margin: 1em 0 1.3em;
        border: 0;
    }
    header .logo img {
        width: 12rem;
    }
}

header a {
    color: #fff;
}

a[aria-current=page] {
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    cursor: default;
}

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 .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 {
    font-size: .5em;
    font-style: normal;
    text-transform: none;
    color: #555;
    /* display: block; */
    font-weight: 500;
}

@media (max-width: 50em) {
    .hed_sub {
        font-size: 1em;
        margin: .5em 0 0;
    }
    h2 {
        font-size: 1.2em;
    }
    h3,
    .h3 {
        font-size: 1.1em;
    }
    h3.hed_sub {
        font-size: 1.6em;
    }
    .hed_sub em {
        display: block;
        font-size: .6em;
        margin: .5em 0;
    }
}

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

#tables h4 {
    background: #2a3b64;
    color: #fff;
    padding: .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 {
    /* background: #fff; */
    padding: 1.5em 0 0 0;
    font-weight: 300;
    color: #2a3b64;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.4em;
}

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

.test_results-content h2 em.flag,
span.lh-flag {
    font-size: .3em;
    font-weight: 500;
    text-transform: uppercase;
    background: #1072BA;
    color: #fff;
    padding: .5em;
    border-radius: .4em;
    line-height: .8;
    align-self: flex-start;
    font-style: normal;
    margin: 0 1em;
}

span.lh-flag {
    font-size: .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: 1rem 3em;
    border-radius: 1rem;
    box-shadow: 0 0 4px #ddd;
    margin: 1em -3rem !important;
}

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


/* body.compact h2,
body.compact h3,
body.compact h4,
body.compact h5,
body.compact h6 {
    padding: 0.4em 0;
} */

p {
    margin: 0 0 1em 0;
}


/* body.compact p {
    margin: 0 0 0.25em;
} */

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;
}

.home a {}

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;utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.354%202.354a.5.5%200%2001-.708%200l.708.708v-.708zM8%208l-.354.354L8%208zm5.646-6.354l-6%206%20.708.708%206-6-.708-.708zm-5.292%206l-6-6-.708.708%206%206%20.708-.708z%22%20fill%3D%22%23111%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
    background-color: #fff;
}

input[type="number"] {
    padding-left: .5em;
    padding-right: .3em;
    margin-right: .3em;
}

input[type="checkbox"] {
    padding: .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;
        justify-self: space-between;
        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;
    /* border-top: 1px solid #eee; */
    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: .8em;
    color: inherit;
}

footer a {
    color: inherit;
}

footer .logo {
    margin: 0;
    padding: 0;
    width: 200px;
    /* background: #111e35; */
    /* border-radius: .5em; */
}

footer .footer_social {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #666;
    gap: .5em;
    /* margin-right: 2em; */
    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: .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();
    width: 80%;
    margin: auto;
}

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

body:not(.home) footer .logo {
    background: url(/images/wpt-logo-dark.svg) no-repeat;
    background-size: contain;
}

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

body.result footer,
footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #fff;
    padding-top: 3rem;
    align-items: flex-start;
    /* background: #111e35; */
    /* margin: 2rem 0 0; */
    /* color: #fff; */
    padding: 3rem 3em;
    /* box-sizing: border-box; */
    width: auto;
    align-items: flex-start;
}

.home footer {
    color: #fff;
}

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

footer ul {
    /* margin: auto; */
    justify-content: center;
    text-align: right;
    font-size: .9em;
}

@media (min-width: 75em) {
    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_screenshots {
    order: 2;
    flex: 0 1 33%;
    margin-top: 1em;
}

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

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

.header_data_urltime li strong {
    font-size: .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: .8rem 0 1.6rem;
    padding-bottom: .7em;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

@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;
    /* TODO TODO */
}


/* Header */

#wptAuthBar {
    list-style-type: none;
}

@media (max-width:60em) {
    #wptAuthBar {
        margin: 1em 0;
        padding: .6em 1.5rem 0;
        justify-content: center;
    }
}

#wptAuthBar li {
    color: #fff;
}

#wptAuthBar a {
    text-decoration: none;
    margin: 1.5em 1.3em;
    display: inline-block;
    white-space: nowrap;
}

#wptAuthBar li {
    display: flex;
    margin-bottom: 0;
    font-size: .9em;
}

#wptAuthBar {
    grid-column: 5/6;
    align-self: center;
    justify-self: end;
    display: flex;
    align-items: center;
    grid-row: 2;
    margin-top: 0;
}

#wptAuthBar a {
    margin: auto;
}

#wptAuthBar .pill {
    margin-left: 1.75em;
    margin-top: 0;
}

@media screen and (min-width:75em) {
    #wptAuthBar {
        grid-column: 10/12;
        grid-row: auto;
    }
    #wptAuthBar li {
        font-size: 1em;
    }
}

#wptAuthBar a:hover {
    text-decoration: underline;
}

#wptAuthBar svg {
    padding-left: .5em;
}

.results_nav_contain {
    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;
    text-align: left;
    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;
}

.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: .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(/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 {
    padding: .4em 1.3em 0;
    color: #222;
    position: absolute;
    background: #fff;
    padding: 1rem;
    font-size: .9em;
    border-radius: .5rem;
    top: 1.5em;
    right: 0;
    width: 20rem;
    z-index: 9999;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

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

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

.testinfo_artifacts-list {
    padding: .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: .75em 1em;
}

.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-radius: 2px;
    border: 1px solid #999;
    font-size: 1rem;
    padding: .5em 1em;
    border-radius: .5rem;
    margin: 0;
}

.has-js .testinfo_artifacts h3:after {
    background-image: url('data:image/svg+xml;utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.354%202.354a.5.5%200%2001-.708%200l.708.708v-.708zM8%208l-.354.354L8%208zm5.646-6.354l-6%206%20.708.708%206-6-.708-.708zm-5.292%206l-6-6-.708.708%206%206%20.708-.708z%22%20fill%3D%22%23111%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-size: contain;
    background-color: #fff;
    margin-left: .5em;
    top: .3em;
    position: relative;
    content: " ";
    display: inline-block;
    height: .8em;
    width: .8em;
}

.has-js .testinfo_artifacts:hover h3:after,
.has-js .testinfo_artifacts:hover h3:focus {
    transform: rotate(180deg);
    top: -.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 {
        /* margin-top: 0; */
        padding: 0;
        justify-content: flex-start;
        /* text-align: left; */
        flex: 0 1 auto;
    }
}

@media (max-width: 60em) {
    .results_and_command {
        gap: 0;
        flex-flow: column;
        /* padding: 0; */
    }
    .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(/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: .5rem;
    flex: 1 1 60%;
    /* padding: ; */
}

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

@media (max-width: 60em) {
    .results_header h2 {
        margin-top: .3em;
        font-size: 2.3em;
    }
    .results_header p {
        font-size: 1.1em;
    }
}

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

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

.result_screenshot {
    max-width: 100%;
}

.header_screenshots {
    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;
}

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

@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;
    }
    .header_screenshots img {}
}

@media (max-width: 50em) {
    .header_screenshots {
        margin: 0;
        margin-bottom: 1em;
        max-height: 150px !important;
        justify-content: flex-start;
    }
    .header_screenshots img {
        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: .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;
}

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

#average {
    text-align: left;
}


/* Nav */


/* @media screen and (min-width:60em) { */

nav {
    grid-row: 2;
    grid-column: 2 / 5;
    justify-self: flex-start;
}

@media (max-width:50em) {
    nav {
        grid-row: 2;
        grid-column: 2 / 5;
        justify-self: flex-start;
        padding: .8em 1.3em;
        border-top: 1px solid rgba(255, 255, 255, .3);
        border-bottom: 1px solid rgba(255, 255, 255, .3);
    }
    nav li {
        font-size: 1em;
        text-align: left;
    }
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    justify-content: center;
}

nav li {
    display: flex;
}


/* } */

@media screen and (min-width:75em) {
    nav {
        grid-column: 4 / 10;
        justify-self: center;
        grid-row: auto;
    }
}

nav a {
    padding: .5em .2em;
    margin: 0 .5em;
    display: flex;
    font-size: .9em;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}

nav li.current a {
    font-weight: 700;
    border-bottom: 3px solid #F9D856;
}

nav a:hover {
    text-decoration: underline;
}

@media screen and (min-width:50em) {
    nav a {
        padding: 1.5em .2em;
    }
}

@media screen and (min-width:60em) {
    nav a {
        padding: 1em .2em 1.3em;
        margin: 0 1.3em;
        font-size: 1em;
    }
}

#main {
    padding: 1.5em 0;
}

.home #main {
    /* max-width: 1083px; */
    margin: auto;
    width: 100%;
    padding: 0;
}


/* body.compact #main {
    padding: 0.5em 0;
} */

@media screen and (min-width: 75em) {
    #main {
        grid-column: 2 / 12;
        padding-top: 2em;
    }
    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%;
}

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

.results_main_contain {
    padding: 0;
}

.home_feature {
    background: #fff;
}

.home_feature_hed_contain {
    background-color: #6b25cf;
    background-image: url(/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 -2px left 50%, bottom 0 left 50%;
    background-repeat: no-repeat, no-repeat;
    background-size: 100%, cover;
}

@media (min-width:70em) {
    .home_feature_hed_contain {
        background-position: bottom -2px left 50%, bottom -50px 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_feature_hed,
.home_feature_main {
    display: flex;
    margin: 0 auto;
    max-width: 1400px;
    padding: 3rem 0 3rem;
    justify-content: space-between;
    align-items: flex-start;
}

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

.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;
    }
}

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

.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: .9rem;
    color: #494949;
}

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

.results_nav_hed {
    padding: .6em 1em .6em 0;
    margin-right: 3em;
    font-size: .9rem;
    margin: 0 0;
    font-weight: 900;
    color: #202d47;
}

@media (min-width: 50em) {
    .results_nav {
        padding-left: 3em;
        padding-right: 3em;
    }
    .results_nav_hed {
        font-size: 1.1em;
    }
}

.home_feature_hed_text {
    /* text-align: center; */
}

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

.home_feature_hed p {
    font-size: 1.75rem;
    line-height: 1.5;
    margin: 0;
    max-width: 26em;
}

.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 40%;
    border: 6px solid #fff;
    box-shadow: 0px 0px 5px 3px #fe89ff7a;
    /* margin-left: 2em; */
    background: #fff;
    /* max-height: 200px; */
    overflow: hidden;
    /* object-fit: contain; */
}

.home_feature_hed_visual img {
    max-width: 100%;
    height: auto;
}

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

.home_feature_hed_contain {
    padding: 0 1.5rem;
}

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

@media (max-width: 90em) {
    .home_content_contain {
        /* width: auto; */
        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: 80em) {
    .home_feature_hed .attention {
        font-size: 2.3rem;
    }
    .home_feature_hed p {
        font-size: 1.35rem;
        margin: .3em 0 1.2em;
    }
    .home_feature_hed a {
        font-size: .8rem;
    }
}

@media (max-width: 30em) {
    .home_feature_hed .attention {
        font-size: 1.8rem;
    }
    .home_feature_hed p {
        font-size: 1.15rem;
        margin: .5em 0 1.2em;
    }
}

.home_feature img {
    max-width: 100%;
    display: block;
}

.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: 45em) {
    .home_feature_hed,
    .home_feature_main {
        display: block;
    }
}

@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 .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("/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'%3E%3Cg fill='none' stroke='%23404' stroke-width='2.7'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23505'%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/g%3E%3C/svg%3E");
    background-position: left .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: .4em;
    background: #1072BA;
    border-radius: .3rem;
    padding: 0.3em .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;
}

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

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

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.home_responsive_test .home_test_select,
nav.link_select {
    color: #1a2a4a;
    font-weight: 700;
    max-width: 100%;
    display: inline-block;
    position: relative;
    width: 13em;
    /* line-height: 2; */
    font-size: .8em;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #4A6699;
    appearance: none;
    padding: .1em 2em .1em .8em;
    margin: 0;
    background-image: url('data:image/svg+xml;utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.354%202.354a.5.5%200%2001-.708%200l.708.708v-.708zM8%208l-.354.354L8%208zm5.646-6.354l-6%206%20.708.708%206-6-.708-.708zm-5.292%206l-6-6-.708.708%206%206%20.708-.708z%22%20fill%3D%22%23111%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%231a2a4a%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%;
    background-size: .65em auto, 100%;
    background-color: #fff;
    cursor: pointer;
    border-radius: .5rem;
}

nav.link_select {
    font-size: 1.1rem;
    display: inline-block;
    padding: .8em 2em .8em 1em;
    color: #1072BA;
    border-color: #eee;
    position: relative;
    z-index: 999999;
    width: auto;
    min-width: 20rem;
    background-image: url('/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: .9em;
        /* width: 100%; */
    }
}

.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: .2em 1em;
    font-size: .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: .5em 1em;
    }
}

nav.link_select ul a {
    padding: .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: .5rem;
    border-bottom-right-radius: .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, .5);
    background-image: url('data:image/svg+xml;utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.354%202.354a.5.5%200%2001-.708%200l.708.708v-.708zM8%208l-.354.354L8%208zm5.646-6.354l-6%206%20.708.708%206-6-.708-.708zm-5.292%206l-6-6-.708.708%206%206%20.708-.708z%22%20fill%3D%22%23111%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%23222%22%2F%3E%3C%2Fsvg%3E');
}

nav.link_select:focus,
nav.link_select:hover {
    color: #1072ba;
    box-shadow: 0 0 10px rgba(47, 128, 237, .5);
    background-image: url('/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: .5rem;
    border-bottom-right-radius: .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: .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;
    /* max-width: 40%; */
}

label small {
    display: block;
    max-width: 80%;
}

.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, .3);
}

.test_presets_hed span {
    background-color: #1D2B48;
    margin-bottom: -.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: .4rem;
    align-items: center;
}

.test_presets_more summary {
    list-style: none;
}

.test_presets_more .test_presets_tag {
    padding-right: 1.3rem;
    background-image: url(/images/src/icon_triangledown.svg);
    background-repeat: no-repeat;
    background-position: right .5em top 50%;
    background-color: transparent;
    cursor: pointer;
}

.test_presets_more .details_contain {
    position: absolute;
    background: #2a3c64;
    width: 30rem;
    padding: 1rem;
    z-index: 9999999;
    box-shadow: 0 0 5px #00000073;
    border-radius: .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: .5em 0;
}

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

.test_presets_more .details_contain br {}

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

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

.test_preset_profile strong {
    min-width: 5em;
    /* flex: 1 1 10em; */
}

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

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

@media (max-width: 28em) {
    .test_presets_easy .profiles input {
        align-self: flex-start
    }
    .test_preset_profile strong {
        min-width: 4em;
        /* flex: 1 1 10em; */
    }
    .test_preset_profile strong {
        /* width: 90%; */
        /* display: block; */
    }
}

.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 .1em;
    width: auto;
    max-height: 20px;
}

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

.test_presets .test_preset_profile {
    gap: 0;
    /* align-items: flex-end; */
    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%;
    display: block;
    color: #1a2a4a;
    width: auto;
    min-width: 20em;
    left: 1.5em;
    padding: 1.5em;
    display: none;
    box-shadow: 0 0 5px #a90da5;
    border: 1px solid a90da5;
    font-size: 1rem;
    max-width: 80vw;
}

span.test_preset_profile_tt:after {
    border-top: .6em solid rgb(255 255 255 / 93%);
    border-right: .6em solid transparent;
    border-left: .6em solid transparent;
    content: "";
    width: 0;
    height: 0;
    left: 2em;
    position: absolute;
    bottom: -.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;
}

#description:empty {
    display: none;
}

.compare {
    /* background: #000; */
    /* color: #fff; */
}

.compare #main {
    /* grid-column: 2 / 12;
    /* background: #000; */
    padding: 2em 0;
    max-width: none;
    width: auto;
    /* min-width: 1083px; */
}

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

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

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

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

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

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

.waterfall-sliders {
    padding: 0 0 1em;
    margin: 0;
    font-size: .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 div {
    /* display: flex;
    display: flex;
    flex-flow: row;
    justify-content: space-between; */
}

.waterfall-sliders label {
    font-weight: 500;
    display: flex;
    margin: .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, .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;
        /* align-items: flex-start; */
    }
    .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 {
        /* border-left: 1px solid #ddd; */
        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 {
    text-align: center;
    font-weight: 700;
    font-size: 2.125em;
    text-align: center;
    margin: .4em auto 1.1em;
    line-height: 1.4;
    padding: 0 1rem;
}


/* body.compact h1.attention {
    font-size: 2.5em;
    margin: .4em auto 1em;
} */

@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 .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;
    }
}


/* Test log */

.history_hed {
    padding: 0 2rem;
}

table.history {
    border-collapse: collapse;
    font-size: 0.875em;
    margin: 0;
    /* border: none !important; */
}

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

table.history th {
    /* text-decoration: none; */
    /* font-weight: normal; */
}

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 {
    white-space: nowrap;
    /* text-decoration: underline; */
    text-align: left;
    padding: 1rem;
    border: 1px solid #ddd;
}

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

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

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

.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;
}

.history_filter {
    margin: 1em 0;
    border-top: 1px solid #eee;
    padding: 1em 0;
    display: flex;
    align-items: center;
    gap: .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: 1.875em;
    padding-top: .5em;
    padding-bottom: .5em;
}

#CompareBtn {
    position: relative;
    background: #fff url('/images/icon-compare.svg') 1em center no-repeat;
    border-radius: 2em;
    border: 1px solid #ddd;
    padding: .6em 1.5em .6em 1.8em;
    margin: .5em 0;
    text-indent: 1em;
    display: inline-block;
    cursor: pointer;
}

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


/* h2 deps page */

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


/* end h2 deps page */


/* page images page */

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


/* end page images page */


/* Test Box */

#test_box-container {
    grid-column: 3 / 10;
    /* border: 1px solid #2F80ED;
    border-right-width: 0;
    border-left-width: 0;
    box-shadow: 0 0 30px rgba(47, 128, 237, .5); */
    margin-bottom: 4em;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

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


/* body.compact #test_box-container {
    box-shadow: none;
} */

@media (min-width: 35em) {
    /* #test_box-container {
        border-radius: 10px;
        border-right-width: 1px;
        border-left-width: 1px;
        margin-right: 1rem;
        margin-left: 1rem;
    } */
}

@media (min-width: 75em) {
    /* #test_box-container {
        margin-right: 0;
        margin-left: 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;
    padding: 1em;
    color: #111;
    border-radius: 10px;
    padding: 1.875em;
    margin-top: 1em;
}

.notification a {
    color: #093b80;
}

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


/* for the main homepage interior tabs, they can leave the stack early */

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


/* the advanced tabs below them need a later breakdpoint */

@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 .1s ease-in-out;
}

@media screen and (min-width: 50em) {
    .ui-tabs-nav svg {
        margin-right: 0.375em;
        position: relative;
        top: .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;
}

#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: .3em solid #F9D856;
    border-top: .3em solid transparent;
    border-bottom: .3em solid transparent;
    width: 0;
    height: 0;
    padding: 0;
    line-height: 0;
    position: absolute;
    margin: .4em .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 .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;
}

.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"] {
    /* align-self: flex-start; */
    margin-top: .2em;
}

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

.input_fields li input[type="radio"]:nth-of-type(2n) {
    /* margin-left: 2em; */
}

.input_fields label input[type="radio"],
.input_fields label input[type="checkbox"] {
    display: inline-block;
    margin-right: .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: .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;
    }
    .input_fields label,
    .input_fields .label {
        width: 28%;
    }
    .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: .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;
}


/* body.compact #url {
    margin-bottom: 0em;
} */

@media screen and (min-width: 60em) {
    #url {
        font-size: 1.25em;
        padding: .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: .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;
    /* font-weight: 700; */
}

@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: .5rem 0;
}


/* label.test_preset_profile.test_preset_profile-Mobile span:after {
    background: url(/images/test_icons/chrome.svg) left center no-repeat;
    width: 100%;
    display: inline-block;
    background-size: contain, contain, contain;
    content: "";
    width: 35rem;
    height: 100%;
} */

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

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

@media screen and (min-width: 50em) {
    #change-location-btn {
        margin-left: .25em;
        margin-top: 0;
        /* width: 1em; */
        /* text-indent: -999px; */
        /* overflow: hidden; */
    }
}

#simplemodal-overlay {
    background-color: #000;
}

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

#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: .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: .5rem;
    border: 0;
    padding: .5em 1.5em;
    font-weight: 700;
    color: #fff;
    background: #1b2a4a;
}

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

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


/* Visual comparison tab */

.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;
    margin-bottom: 1em;
    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, .3);
    }
    #visual_comparison .test_presets li {
        display: block;
    }
    #visual_comparison label {
        display: block;
        margin-bottom: .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: .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: .3em;
        margin-top: 0;
    }
    #visual_comparison .urldiv input:last-of-type {
        width: 26.9375em;
        margin-right: .5em;
        margin-left: .3em;
    }
}

#visual_comparison .urldiv a {
    background: url('/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, .1);
    font-size: .9em;
    background: rgba(0, 0, 0, 0.33) url('/images/icon-add.svg') top 50% left .8rem no-repeat;
    background-size: .9rem .9rem;
    color: #fff;
    padding: .8em .8em .8em 2.5em;
    border-radius: .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;
}


/* body.compact .box {
    margin-bottom: 0.5em;
} */

.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;
    }
}


/* error page styles */

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

.testerror h1 {
    color: #dc9739;
    text-align: left;
    margin: 1em 0;
}

.testerror h1 em {
    display: block;
    font-style: normal;
    font-weight: 500;
    font-size: .8em;
    color: #333;
    margin: .3em 0 .5em;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1em;
}

.testerror_login {
    margin: 0 auto;
    justify-content: center;
}

.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;
}


/* compare page styles */

.video_runlabel {
    text-align: left;
}

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

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

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

.video_runlabel a {
    font-weight: 500;
    font-size: .9em;
    border: 1px solid transparent;
    padding: .2em .7em;
    font-weight: 500;
    font-size: .9em;
    border: 1px solid #ddd;
    background: #fff;
    padding: .2em 1em;
    color: #333;
    border-radius: 2em;
    margin: 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: .2em .5em;
    margin-right: .5em;
    font-size: .9em;
}

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

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


/* body.compact #header_container {
    padding: 0 1.5em;
} */

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

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

.cta-banner {
    text-align: center;
    /* transform-origin: top center; */
    font-size: .9em;
    padding: .3em 0 .8em;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.11); */
    margin: 0;
    position: relative;
    background: #1f2c47;
    color: #fff;
    border-radius: 0.6em;
    display: block;
    margin: 0 auto .5rem auto;
    max-width: 40em;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.cta-banner p {
    margin: 0;
}

.cta-banner a {
    /* display: block; */
    margin: 0 0 0 .3em;
}

@media (max-width: 50em) {
    .cta-banner {
        margin: 0 auto;
    }
    .cta-banner p {
        font-size: .9em
    }
    .cta-banner a {
        display: block;
        max-width: 7em;
        margin: .5em auto 0;
        font-size: .9emem
    }
}

.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) {
    .box {
        border-radius: 10px;
    }
}

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

.box form input[type="text"],
.box form select {
    border: 1px solid #999;
}

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

.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;
    }
}


/* perf optimization styles */

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;
}


/* vitals page styles */

.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;
}


/* results table rows */

.scrollableTable table tr.runview {
    /* border-top: 1px solid #eee; */
    margin-top: 1em;
}

.scrollableTable table.pretty#tableResults tr.runview th {
    background: #fff;
    padding: 1.5em 0 0 0;
    font-weight: 300;
    color: #2a3b64;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1em;
    /* border-top: 1px solid; */
    position: sticky;
    left: 0;
}

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;
}

img.autohide:hover {
    opacity: 0;
}

.cruxbars {
    margin-bottom: 1.5em;
}

svg {
    max-width: 100%;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

td.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;
}

.a_request {
    cursor: pointer;
}

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

.vitals-diagnostics {
    /* text-align: center; */
}

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

.summary-container p {
    margin-bottom: 0;
    line-height: 1;
    /* font-size: .7em; */
}

.summary-metric {
    /* min-width: 300px; */
    /* border: 1px solid black; */
    font-size: 1em;
    overflow: hidden;
    margin-bottom: 1rem;
    flex: 1 1 auto;
}

.metric-value {
    padding: .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: .5em;
    font-size: .8em;
}

.summary-metric h4 {
    margin: 0;
    padding: 0;
    background: none;
    border: 0px solid #fff;
    font-weight: 500;
    color: #686868;
    padding: 0;
    /* display: block; */
    /* padding-top: 24px; */
    font-size: 1.1em;
    /* text-align: center; */
}

.summary-metric h3 {
    /* display: none; */
}

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

.crux_legends:before {
    content: "Key: ";
    font-weight: 700;
    color: #666;
}

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

.cruxbars {
    margin: 0;
    z-index: 1;
    padding: inherit;
    text-align: left;
    display: flex;
    justify-content: flex-start;
}

.cruxlabel .legend {
    font-size: smaller;
    font-weight: normal;
}

.cruxlabel .fvarrow {
    color: #1a1a1a;
}


/* these are for crux embeds */

.cruxembed .cruxbars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 30em) {
    .cruxembed .cruxbars {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 60em) {
    .cruxembed .cruxbars {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.summary-container .crux h3 {
    font-size: 1.2rem;
    color: #2a3c64;
    margin: 2em 0 0;
}

.summary-container .crux h3 em {
    display: block;
    font-size: .7em;
    margin: .4em 0;
    line-height: 1.5;
}

.cruxembed .crux h3 {
    /* padding-top: 1.5em;
    font-size: 1em; */
    margin-top: 2rem;
}

.crux_legends {
    display: inline-flex;
    gap: 0.5rem;
    border: 1px solid #eee;
    padding: 0.7em 1.5em 0;
    border-radius: 1rem;
    margin: 1em 0;
}

.crux_legends strong {
    background: none;
    border: 0px solid #fff;
    font-weight: 700;
    color: #686868;
    /* display: block; */
    font-size: .9em;
    min-height: 2em;
}

.summary-container .crux_legends {
    display: inline-block;
    padding: 0.3em 1em;
    margin: 0;
}

.cruxembed .crux .legend {
    font-size: smaller;
    font-weight: normal;
    font-weight: normal;
    margin: 0 0 1em;
    display: block;
    text-align: right;
}

.cruxembed .crux .fvarrow {
    color: #1a1a1a;
}

.cruxembed .crux .rvarrow {
    color: #737373;
}


/* end vitals page styles */


/* processing breakdown styles */

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

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

div.table td {
    max-width: 250px;
}

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

div.bar {
    height: 20px;
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
}

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

th.header {
    font-weight: normal;
}


/* end processing breakdown styles */


/* custom browsers inc */

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

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


/* end custom browsers inc */


/* perf optimization page styles */

#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 ul:first-of-type {
    padding: 1em;
    line-height: 1.4;
    background: #fafafa;
}

#runningHeader form {
    float: right;
}

#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: .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 page */

#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%;
}


/* Test Results Pages */

.grades {
    /* float: right; */
    line-height: 1.2em;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2rem;
    padding: 0 0 1rem;
    /* max-width: 55%; */
    font-size: 0.625em;
    /* 10px */
    text-align: center;
    display: grid;
    /* flex-flow: row wrap; */
}

.grades li {
    /* align-items: flex-start; */
    /* gap: 4rem; */
    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: .9rem;
    color: #666;
    white-space: nowrap;
}

.grades li a h2 {
    margin: 0 .5em .0 0;
    font-size: 1.5em;
    padding: .5em;
    min-width: 1em;
    font-weight: 700;
    border-radius: .5rem;
    text-align: center !important;
    display: inline-block;
    /* width: 1em; */
}

@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: .8em 1em 1.2em;
}

.alert-banner p {
    margin: 0 auto;
    font-size: .9em;
}

.alert-banner-twitch {
    background: #0d1424;
    background: #111a2a;
    border-bottom: 1px solid #010102;
    /* border-bottom: 1px solid ; */
}

.alert-banner img,
.alert-banner-twitch img {
    max-height: 2em;
    display: inline-block;
    max-width: 5em;
    margin-right: .7em;
    position: relative;
    top: .8em;
    margin-top: -1em;
}

.alert-banner a,
.alert-banner-twitch a {
    display: block;
}

.alert-banner a {
    color: #fff;
}

@media screen and (min-width:35em) {
    .alert-banner {
        grid-column: 1 / 13;
    }
    .alert-banner a,
    .alert-banner-twitch a {
        display: inline-block;
    }
}

.batchResults {
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    border-collapse: collapse;
    border: 0px white solid;
}

.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;
}


/* shared table themes */

.scrollableTable {
    overflow: auto;
    scroll-snap-type: both mandatory;
    width: 100%;
    max-width: 100%;
    padding-bottom: .8em;
}
/* overflow shadows */
.scrollableTable, 
.results-filmstrip-container,
div.waterfall-container,
div.overflow-container,
.breakdownFrame_item > div,
#videoDiv {
    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;
}
.scrollableTable table, 
.results-filmstrip-container img,
div:not(.compare_contain_wrap) > div.waterfall-container img,
div.overflow-container > *,
.breakdownFrame_item > div > *,
#videoDiv > * {
    mix-blend-mode: multiply
}

.scrollableTable th,
.scrollableTable td {
    /* scroll-snap-align: start; */
    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;
    /* border-bottom: 1px solid #ddd; */
}

.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: .5em;
    font-weight: 300;
    padding-left: .2em;
}

span.units.comparator {
    font-size: .8em;
    padding: 0;
}

table.pretty {
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    border-collapse: collapse;
    border: 0;
    /* border-radius: 10px; */
}

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: .8em;
}

.result-details table#tableResults.pretty td {
    font-size: 2rem;
    padding-right: 1rem;
}

#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;
}

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:last-child span {}

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;
    color: #686868;
    padding: 0 2rem 4px 0;
    /* display: block; */
    padding-top: 24px;
    font-size: .9em;
}

.results-filmstrip-container h4 {
    position: sticky;
    left: 0;
    margin: .5em 0 1em;
    padding: 0;
}

.results-filmstrip-container h4 span {
    font-weight: 300;
}

.results-filmstrip-container h4 a {
    font-weight: 500;
    color: #1071ba;
    display: inline-block;
    padding: 0 .1em;
}

table#tableResults.pretty td {
    border: 0 solid #fff;
    padding: 5px 2rem .5rem 0;
    font-size: 3em;
    font-weight: 900;
    border-top-width: 0;
    vertical-align: baseline;
    color: #2a3c64;
    /* display: block; */
    -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;
}

table.pretty td.ok,
table#tableResults td.ok {
    color: #d48e08;
}

table.pretty td.poor,
table#tableResults td.poor {
    color: #d02424;
}

a.result_plot {
    display: block;
    margin: 1em 0 1em;
    /* text-align: right; */
    /* width: 100%; */
    display: inline-block;
    font-size: .8em;
    border-radius: 1.5em;
    border: 1px solid #eee;
    padding: .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: .75em;
    line-height: 1.3em;
}

table.glossary {
    text-align: left;
    border-collapse: collapse;
}

table.glossary td,
table.glossary th {
    border: 1px solid #999;
    padding: .5em 1em;
    text-align: left;
    border-collapse: collapse;
}

table.glossary th {
    text-align: center;
}


/* from breakdown php */

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

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;
}

td {
    /* text-align: center;
    vertical-align: middle; */
    /* padding: 1em; */
}

div.bar {
    height: 20px;
    margin-top: auto;
    margin-bottom: auto;
}

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

.breakdownFramePies td {
    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;
    /* 980px/2+20 */
    padding: 1em;
    display: none;
}

.snippet_container {
    display: none;
    margin: 1em 0;
}

.snippet_container_requestHeaders {
    text-align: left;
    overflow: auto;
    padding: 0 1em;
}

.accordion_block {
    /* border: 1px solid #aaa; */
    /* border-radius: 5px; */
    /* width: 930px; */
}

h4.accordion_opener {
    /* text-align: center; */
    cursor: pointer;
    display: block;
    padding: 0.2em 0 0em 0;
    background: no-repeat 10px 50% transparent;
    /* font-size: 1.5em; */
    /* line-height: 1em; */
    margin: 0 0 1em;
    background-size: .6rem .6rem;
}

.accordion_opener.jkActive {
    /* background-color: whitesmoke; */
}

h4.accordion_opener:before {
    content: " ";
    display: inline-block;
    width: 1em;
    height: .8em;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url(/images/src/icon_triangledown.svg);
}

h4.accordion_closed:before {
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

h4.accordion_opened:before {}

h4.accordion_loading:before {
    background-image: url(/images/activity_indicator.gif);
}


/* end from breakdown php */

div.bar {
    height: 20px;
    margin-top: auto;
    margin-bottom: auto;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.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 th {
    background: gainsboro;
}

table.details caption {
    margin-left: inherit;
    margin-right: inherit;
    background: whitesmoke;
}

table.details th.reqUrl,
table.details td.reqUrl {
    text-align: left;
    width: 30em;
    word-wrap: break-word;
}

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

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: .9em;
    word-break: break-all !important;
}

.headers_list h4 {
    font-weight: 500;
    font-size: .8em;
    border-top: 1px solid #eee;
    padding: .8rem 0;
    line-height: 1.3;
    word-break: break-all;
}

.headers_list h4 strong {
    display: block;
    font-weight: 700;
    padding: .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: .875em;
    max-width: 30rem;
    margin: auto 0 5em;
    /* word-break: break-all; */
}

.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:last-of-type {
    /* margin-bottom: 7.125em; */
}

.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;
}

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

td {
    text-align: center;
    vertical-align: middle;
    /* padding: 1em; */
}

div.tableRequests td {
    max-width: 250px;
    text-align: left;
}

div.tableBytes td {
    max-width: 250px;
    text-align: left;
}

div.bar {
    height: 20px;
    margin-top: auto;
    margin-bottom: auto;
}

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

.breakdownFramePies td {
    padding: 0;
}

.testimonial {
    display: block;
    /* border: 1px solid #ffffff; */
    /* background: #35044e; */
    text-align: center;
    /* box-shadow: 1px 1px 70px rgb(0 0 0 / 50%); */
    border-radius: 1rem;
    margin-bottom: 6em;
    max-width: 50em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6rem;
}

.testimonial blockquote {
    font-size: 1.375em;
    line-height: 1.454545455em;
    /* margin-top: 3rem; */
    padding-bottom: 3rem;
    font-weight: 300;
    background: url(/images/test_icons/comment.svg) bottom center no-repeat;
    background-size: 3rem;
    margin-bottom: 0.5rem;
    font-style: italic;
}

@media (max-width: 50em) {
    .testimonial {
        font-size: .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: .9em;
    color: #d580ff;
    padding-top: .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: .875em;
    /* width: 100%; */
    flex: 1 1 auto;
}

.feed ul {
    /* border: 1px solid #2F80ED;
    box-shadow: 0 0 15px rgb(47 128 237 / 50%); */
    background: #fff;
    border-radius: .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 li:nth-child(odd) {}

.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: .3em;
}


/* Graph page data */

.chart {
    margin-bottom: 2.5em;
}


/* Overriding classes from https://www.gstatic.com/charts/50/css/table/table.css */

.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: .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-image: none;
    background: gainsboro;
}

[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;
    display: inline-block;
    cursor: pointer;
    border-bottom: 1px solid rgb(255 255 255 / 20%);
    display: block;
    margin-bottom: 1em;
    position: relative;
}

.simpleadvancedfields_contain>input+label:before {
    content: "";
    background: url(data:image/svg+xml;utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.354%202.354a.5.5%200%2001-.708%200l.708.708v-.708zM8%208l-.354.354L8%208zm5.646-6.354l-6%206%20.708.708%206-6-.708-.708zm-5.292%206l-6-6-.708.708%206%206%20.708-.708z%22%20fill%3D%22%23111%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%23fff%22%2F%3E%3C%2Fsvg%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%;
    padding: 0;
    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: .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_contain>input {}

.simpleadvancedfields_contain>input+label {}

.simpleadvancedfields {
    flex: 1;
    display: flex;
    padding: 1rem 0 0 0;
}


/* simple forms */

.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: .5em;
}

.simple_form select {
    width: auto;
}

.simple_form p {
    margin: 1.5em auto;
}

.vitals-diagnostics .frames {
    margin-bottom: 2em;
    margin: 2em 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-flow: row wrap;
}

.vitals-diagnostics .vitals-waterfall {
    margin-top: 4em;
    position: relative;
    /* margin: 4em auto 0;
    max-width: 1012px; */
    text-align: center !important;
}

.vitals-diagnostics .vitals-waterfall .waterfall-legend {
    margin: 0 auto 1rem;
    text-align: center;
}


/* .vitals-diagnostics .vitals-waterfall .waterfall-container :after {
    content: "";
    position: absolute;
    right: 3px;
    top: 0;
    bottom: 0;
    border-right: 2px dashed #008000;
} */

.vitals-diagnostics .waterfall-label {
    /* padding: .3em;
    text-align: right;
    top: 0;
    float: right;
    margin-bottom: 0;
    position: relative;
    margin-bottom: 2em; */
    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;
}

#result.vitals-diagnostics .pretty {
    /* font-size: .9em; */
    /* margin-bottom: 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 {
    /* text-align: left; */
    /* word-break: keep-all; */
    /* white-space: nowrap; */
    border: 1px solid #ddd;
    padding: .8em;
}

.vitals-diagnostics .values li {
    padding: .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: .8em;
    border-left: .8em solid #ddd;
    padding: 0;
}

.vitals-diagnostics code {
    display: block;
    text-align: left;
    padding: .3em .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: .5em;
}

.waterfall-legend td {
    padding: 2px 5px;
}

.waterfall-legend img {
    position: relative;
    top: .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: .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;
        /* grid-template-columns: 1fr 1fr 1fr; */
    }
    .waterfall-legend tbody td {
        /* padding: .5rem .5rem .5rem 0;
        border: 0; */
    }
    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;
        padding-top: 1em;
    }
    div.waterfall-container img.waterfall-image {
        width: 1012px;
    }
}


/* waterfall.css styles here */

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;
    filter: alpha(opacity=90);
}

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.0;
    filter: alpha(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,
.experiment {
    display: none;
}

.request-details a {
    word-break: break-all;
}

.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;
    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 {
    font-size: medium;
    line-height: 1.25em;
}

div.jqmdTC {
    background: #303030;
    color: #000;
    padding: .5rem 1rem;
    font-family: "sans serif", verdana, tahoma, helvetica;
    font-weight: bold;
    zoom: 1;
    cursor: move;
}

div.jqmdBC {
    height: 450px;
    padding: .5rem 1rem;
    overflow: auto;
}

div.jqmdX {
    position: absolute;
    right: .8rem;
    top: .8rem;
    padding: 0 0 0 16px;
    height: 16px;
    width: 0px;
    background: url(/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;
}


/* Jquery UI */

.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-reset {
    /* margin: 0; */
    /* padding: 0; */
    /* border: 0; */
    /* outline: 0; */
    /* line-height: 1.3; */
    /* text-decoration: none; */
    /* font-size: 100%; */
    /* list-style: none; */
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
    content: "";
    display: table;
}

.ui-helper-clearfix:after {
    clear: both;
}

.ui-helper-clearfix {
    /* zoom: 1; */
}

.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter: Alpha(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-widget {
    /* font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; */
    /* font-size: 1.1em; */
}

.ui-widget .ui-widget {
    /* font-size: 1em; */
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    /* font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
    font-size: 1em; */
}

.ui-widget-content {
    /* border: 1px solid #dddddd; */
    /* background-color: #eeeeee; */
    /* color: #333333; */
}

.ui-widget-content a {
    /* color: #333333; */
}

.ui-widget-header {
    /* border: 1px solid #e78f08; */
    /* background-color: #f6a828; */
    /* color: #ffffff; */
    /* font-weight: bold; */
    /* padding: .5em 10vw; */
}

.ui-widget-header a {
    /* color: #ffffff; */
}

.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;
    /* background-color: #777; */
}

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-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    /* border: none;
    background: #ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
    color: #363636; */
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
    /* color: #363636; */
}

.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: .7;
    filter: Alpha(Opacity=70);
    font-weight: normal;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    background-image: none;
}

.ui-icon {
    width: 16px;
    height: 16px;
    background-image: url(/images/ui-icons_222222_256x240.png);
}

.ui-widget-content .ui-icon {
    background-image: url(/images/ui-icons_222222_256x240.png);
}

.ui-widget-header .ui-icon {
    background-image: url(/images/ui-icons_ffffff_256x240.png);
}

.ui-state-default .ui-icon {
    background-image: url(/images/ui-icons_ef8c08_256x240.png);
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
    background-image: url(/images/ui-icons_ef8c08_256x240.png);
}

.ui-state-active .ui-icon {
    background-image: url(/images/ui-icons_ef8c08_256x240.png);
}

.ui-state-highlight .ui-icon {
    background-image: url(/images/ui-icons_228ef1_256x240.png);
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url(/images/ui-icons_ffd27a_256x240.png);
}


/* jQuery UI Button 1.8.17
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Button#theming
 */

.ui-button {
    display: inline-block;
    position: relative;
    padding: .3em .4em;
    margin-right: .1em;
    text-decoration: none !important;
    cursor: pointer;
    text-align: center;
    border-radius: 20px;
    zoom: 1;
    overflow: visible;
}


/* the overflow property removes extra width in IE */

.ui-button-icon-only {
    width: 2.2em;
}


/* to make room for the icon, a width needs to be set here */

button.ui-button-icon-only {
    width: 2.4em;
}


/* button elements seem to need a little more width */

.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: .4em;
    text-indent: -9999999px;
}

.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
    padding: .4em 1em .4em 2.1em;
}

.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
    padding: .4em 2.1em .4em 1em;
}

.ui-button-text-icons .ui-button-text {
    padding-left: 2.1em;
    padding-right: 2.1em;
}

input.ui-button {
    padding: .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: .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: .5em;
}

.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
    right: .5em;
}

.ui-buttonset {
    margin-right: 7px;
}

.ui-buttonset .ui-button {
    margin-left: 0;
}

button.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}


/* reset extra padding in Firefox */

.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: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}

.ui-slider-horizontal {
    height: .8em;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.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: .8em;
    height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.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 {
    height: 20px;
    margin-top: auto;
    margin-bottom: auto;
}

#experimentSettings {
    position: fixed;
    bottom: 1.5em;
    left: 1.5em;
    background: #121D35;
    max-width: 25em;
    color: #fff;
    padding: 1em;
    border-radius: 3px;
    font-size: .9em;
    box-shadow: 0px 6.4px 14.4px rgb(0 0 0 / 13%), 0px 1.2px 3.6px rgb(0 0 0 / 11%);
}

#experimentSettings.inactive {
    display: none;
}

#experimentSettings h2 {
    font-size: 1em;
}

#experimentSettings ul+h2 {
    margin-top: 2em;
}

#experimentSettings li {
    word-break: break-word;
    font-size: .9em;
}

#experimentSettings button {
    border: 0;
    border-radius: 4px;
    padding: 0.6875em 2.625em;
    background: #F9D856;
    font-size: 1em;
    cursor: pointer;
    color: #111;
    text-decoration: none;
}

#experimentForm {
    margin-top: 2em;
}

#experimentSettings a[data-remove-field] {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    margin-right: 1em;
    display: inline-block;
}

#experimentSettings .remove-block:hover {
    text-decoration: underline;
}

.experiments {
    margin-bottom: 2em;
}

#experimentSettings label {
    display: block;
    font-weight: bold;
}

#experimentSettings input[type="text"] {
    margin-bottom: 1em;
}


/* custom waterfall settings */

.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: .8rem;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    list-style-type: none;
    padding: 1rem 1.5rem;
    transition: all .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, .2);
    margin: 0;
    /* padding: 0 0 .8em; */
}

.details_panel_hed::-webkit-details-marker {
    display: none;
}

.details_panel_hed>span {
    display: flex;
    gap: .5rem;
}

.details_panel:not([open]):hover .details_panel_hed,
.details_panel:not([open]):focus-within .details_panel_hed {
    border: 1px solid #aaa;
    outline: none;
    /* box-shadow: 0 0 30px rgb(47 128 237 / 50%); */
}

.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: -.1rem;
    left: 25%;
    right: 25%;
    height: .2em;
    background: #555;
}

.details_panel_hed .icon_plus:after {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -.1rem;
    top: 25%;
    bottom: 25%;
    width: .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: .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: .5rem;
}

.details_panel label input[type=text] {
    margin: .2rem 0 1rem;
}

.details_panel label em {
    font-size: .8em;
}

.details_panel label {
    margin: .3rem 0 .5rem;
    line-height: 1.2
}

.details_panel a {
    color: inherit;
    display: block;
    margin: 1rem 0;
}

.details_panel button {
    display: none;
    /* necessary button? does non-js work anyway? */
}

.customwaterfall_hed {
    padding: 0 1.5rem;
}


/* at 60em and up, the settings are displayed as a fixed panel */

@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, .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: 65vh;
        min-height: 20rem;
    }
}

.terms-of-service ul {
    list-style-type: disc;
    margin-left: 1em;
    padding-left: 1em;
    margin-bottom: 1.5em;
}