/*
 * Copyright (C) 2015-2018 Apple Inc. All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
 * THE POSSIBILITY OF SUCH DAMAGE.
 */
body {
    font-size: initial;
}

body.showing-intro,
body.showing-results,
body.showing-test-graph {
    background-color: rgb(96, 96, 96);
    background-image: initial;
    background-repeat: initial;
    background-size: initial;
    animation: initial;
    will-change: initial;

    color: rgb(235, 235, 235);
}

section .body {
    margin-left: 0;
    max-width: initial;
    transform: none;
}

header {
    margin: 3em 0 1em;
    text-align: center;
}

header h1, header h2 {
    font-size: 3em;
    margin: 0;
}

button {
    transform: none !important;
    min-width: initial;
    transition: none;
    animation: none;
    will-change: initial;

    display: block;
    font-size: 1.5em;
    border: 2px solid rgb(235, 235, 235);
    color: rgb(235, 235, 235);
    background: transparent;
    border-radius: 10px;
    padding: .5em 2em;
}

button:hover {
    background-color: rgba(255, 255, 255, .1);
    cursor: pointer;
}

button:active {
    color: inherit;
    background-color: rgba(255, 255, 255, .2);
}

button:disabled {
    border-color: rgba(235, 235, 235, .5);
    color: rgba(235, 235, 235, .5);
}

@media screen and (max-device-width: 414px),
    screen and (max-device-height: 414px) and (orientation: landscape) {
    header h1 {
        font-size: 2em;
    }

    section {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 0 5px;
    }
}

/* -------------------------------------------------------------------------- */
/*                               Tree                                         */
/* -------------------------------------------------------------------------- */

.tree {
    padding: 0;
    list-style-type: none;
}

.tree .expand-button {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.tree .expand-button ~ ul {
    display: none;
}

.tree .expand-button:checked ~ ul {
    display: block;
}

.tree ul {
    list-style-type:none;
}

.tree li {
    position: relative;
    padding: 0 0 1em 1em;
}

.tree ul li {
    list-style:none;
    padding: 1em 0 0 0em;
}

.tree > li:last-child {
    padding-bottom: 0;
}

.tree-label {
  position: relative;
  display: inline-block;
}

label.tree-label {
    cursor: pointer;
}

.tree > li > label.tree-label:before {
    position: relative;
    z-index: 1;
    float: left;
    margin: 0 0 0 -2em;
    width: 1em;
    height: 1em;
    content: '\25BA';
    text-align: center;
    line-height: 2.5em;
    font-size: .5em;
}

.tree > li > :checked ~ label.tree-label:before {
    content: '\25BC';
}

.tree .link {
    cursor: pointer;
    color: #999;
    font-style: italic;
    margin-left: 2em;
}

@media screen and (max-device-width: 414px),
    screen and (max-device-height: 414px) and (orientation: landscape) {
    .tree {
        padding-left: 1em;
    }
    .tree > li > label.tree-label:before {
        font-size: 1em;
        margin-left: -1.75em;
        line-height: 1em;
    }
}

/* -------------------------------------------------------------------------- */
/*                                 Intro Section                              */
/* -------------------------------------------------------------------------- */

#intro {
    padding: 0;
    opacity: initial;
    transition: none;
}

#intro .body > p {
    padding: 1em 0;
    margin: 0 auto;
    text-align: center;
}

#intro .start-benchmark {
    padding: 10vh 0;
    text-align: center;
}

#intro .start-benchmark p {
    color: hsl(11, 72%, 50%);
    margin-bottom: 1em;
    -apple-trailing-word: -apple-partially-balanced;
}

#intro .start-benchmark button {
    margin: 0 auto;
}


@media screen and (max-device-width: 414px),
    screen and (max-device-height: 414px) and (orientation: landscape) {
    #intro.selected {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-flow: column;
    }

    #intro p {
        padding-left: 20px;
        padding-right: 20px;
        font-size: 1.5em;
    }
}

#intro h2 {
    font-size: 1.2em;
}

#intro .body > div:first-of-type {
    width: 100%;
    margin: 2em 0 0;
    flex-direction: row;
    display: flex;
    align-content: flex-start;
}

#suites {
    padding-left: 15vw;
    padding-right: 3em;
    flex: 1 1 30%;
}

#options {
    flex: 10 1 auto;
}

#intro input[type="number"] {
    width: 50px;
}

#suites input[type="number"] {
    display: none;
    float: right;
}

#suites input[type="number"].selected {
    display: inline;
    margin: 0;
}

#suites ul ul {
    font-size: .8em;
    margin: 0;
    padding: 0 0 0 1em;
}

#suites > div {
    margin: 3em 0;
}

#drop-target {
    font-size: 1em;
    border-radius: 10px;
    padding: .5em 2em;
    border: 2px solid rgb(235, 235, 235);
    color: rgb(235, 235, 235);
}

#drop-target.drag-over {
    background-color: rgba(255, 255, 255, .1);
}

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

#options h3 {
    font-size: 1em;
    font-weight: inherit;
    margin: 0 0 .3em 0;
    padding: 0;
}

#options > form > ul > li {
    padding: 0 0 1em 0;
}

#options ul ul {
    padding: 0;
}

#options li {
    padding: .1em 0;
}

#intro > p {
    padding: 0 5px 1em;
    font-size: 1em;
}

#intro .start-benchmark {
    padding: 0 0 10vh;
    margin-top: 0;
}

#intro .start-benchmark p {
    color: hsl(11, 100%, 66%);
}

#frame-rate-detection span {
    color: red;
}

@media screen and (max-device-width: 414px),
    screen and (max-device-height: 414px) and (orientation: landscape) {
    #intro .body > div:first-of-type {
        flex-direction: column;
    }

    #suites,
    #options {
        padding: 0 5px;
        margin: 0;
        flex: 0 0 auto;
    }
}

/* -------------------------------------------------------------------------- */
/*                           Running Section                                  */
/* -------------------------------------------------------------------------- */

#running-test {
    display: flex;
    align-items: center;
    justify-content: center;
}

#progress {
    display: none;
}

.display-progress-bar #progress {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 6px;
    width: 100%;
    background-color: rgb(128, 128, 128);
}

.display-progress-bar #progress-completed {
    position: absolute;
    top: 0;
    left: 0;
    height: 6px;
    width: 0;
    background-color: rgb(235, 96, 32);
}

body.showing-test-container.tiles-big {
    overflow: hidden;
}

body.showing-test-container.tiles-classic {
    width: 3000px;
    height: 3000px;
    overflow: scroll;
}

/* -------------------------------------------------------------------------- */
/*                           Results Section                                  */
/* -------------------------------------------------------------------------- */

#results {
    text-align: center;
}

#results h1, #test-graph h1 {
    font-size: 2em;
}

#results button.small-button {
    border: 1px solid rgba(235, 235, 235, .9);
    color: rgba(235, 235, 235, .9);
    border-radius: 2px;
    padding: 1px 4px;
    margin: 0 0 0 1em;
    font-size: 9px;
}

#results button.small-button:active {
    background-color: rgba(235, 235, 235, .2);
    color: inherit;
}

#results .score,
#test-graph .score {
    font-size: 3em;
    font-weight: bold;
    margin: 0;
}

#results .confidence,
#test-graph .confidence {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 1.5em;
    font-weight: 400;
    text-indent: inherit;
    color: inherit;
}

#results-tables {
    direction: rtl;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 3em 0;
}

#results .table-container > div {
    margin-left: 0;
}

#results #results-score {
    float: initial;
}

#results #results-header {
    width: initial;
    position: initial;
}

#results table {
    direction: ltr;
    min-width: initial;
}

#results table td.suites-separator {
    padding: .5em 0;
}

#results table tr:nth-child(even) {
    background-color: transparent;
}

#results th {
    padding: .5em 0;
}

#results tr td {
    padding: .25em 0;
}

#results-header td, #results-header th {
    text-align: left;
}
#results-header tr td {
    padding-right: 1em;
}
#results-score td, #results-score th {
    text-align: right;
}
#results .body > button {
    margin: 1.5em auto .5em;
}
#results footer {
    padding-bottom: 10vh;
}

@media screen and (max-device-width: 414px),
    screen and (max-device-height: 414px) and (orientation: landscape) {
    #results.selected {
        padding: 0 20px;
    }
}

#overlay {
    background: rgba(0, 0, 10, .8);
}

@supports (-webkit-backdrop-filter: blur(10px)) {
    #overlay {
        background: rgba(0, 0, 10, .4);
    }
}

#overlay > div div {
    border: 1px solid rgb(241, 241, 241);
}

#overlay button {
    border-color: rgb(241, 241, 241);
    color: rgb(241, 241, 241);
}

#overlay button:hover {
    background-color: rgba(255, 255, 255, .1);
}

#overlay button:active {
    background-color: rgba(255, 255, 255, .2);
}

#results-data .average {
    padding-left: 1em;
    text-align: right;
}

#results-data .stdev {
    text-align: left;
    padding-left: .25em;
}

#results-data .left {
    text-align: left;
}

#results-data .right {
    text-align: right;
}

#results-data .pad-left {
    padding-left: 1em;
}

#results-data .pad-right {
    padding-right: .25em;
}

#results-data .small {
    font-size: .8em;
}

#results-tables td.noisy-results {
    color: rgb(255, 104, 104);
}

#results-tables div {
    direction: ltr;
    display: flex;
    flex-direction: row;
}

#test-graph h1 {
    margin-bottom: 0;
}

#test-graph header {
    position: relative;
    text-align:center;
}

#test-graph header button {
    position: absolute;
    top: 0;
    left: 0;
    border-width: 1px;
    font-size: 1em;
    padding: .5em 1em;
}

#test-graph .score, #test-graph .confidence {
    margin: 0;
}

#test-graph nav {
    position: absolute;
    top: 1.5em;
    right: 0;
    font-size: .7em;
    width: 28em;
}

#test-graph nav ul {
    margin: 0 30px 1em 0;
    padding: 0;
    list-style: none;
}

#test-graph nav li {
    padding: .1em 0;
}

#test-graph nav li > span {
    float: right;
}

#test-graph nav.hide-data span {
    display: none;
}

/* -------------------------------------------------------------------------- */
/*                           Graph Section                                    */
/* -------------------------------------------------------------------------- */

body.showing-test-graph {
    height: 100vh;
}

body.showing-test-graph main, #test-graph {
    height: 100%;
}

body.showing-test-graph header, body.showing-test-graph nav {
    flex-basis: auto;
}

#test-graph .body {
    display: flex;
    flex-direction: column;
    margin-trim: block-start;
    margin: 1em;
    height: calc(100% - 2em);
}

#test-graph-data {
    flex-grow: 1;
    min-height: 0;
    z-index: 1;
    font: 10px sans-serif;
    color: rgb(235, 235, 235);
}

#test-graph-data > svg {
    fill: none;
/*    overflow: hidden;*/
}

.axis path,
.axis line {
    fill: none;
    stroke: #999999;
    shape-rendering: crispEdges;
}

.axis text {
    fill: #999;
}

.yLeft.axis text {
    fill: #7add49;
}
.yLeft.axis path,
.yLeft.axis line {
    stroke: #7add49;
}
.yRight.axis text {
    fill: #fa4925;
}
.yRight.axis path,
.yRight.axis line {
    stroke: #fa4925;
}

.axis.complexity .tick line {
    stroke: rgba(200, 200, 200, .6);
    stroke-width: 2px;
}

.axis.complexity .domain,
.axis.complexity text {
    stroke: transparent;
    fill: transparent;
}

.marker line {
    stroke: #5493D6;
}

.marker text {
    fill: #999;
}

.mean.complexity line {
    stroke: hsla(100, 69%, 58%, .8);
    stroke-width: 2px;
}

.mean.complexity polygon {
    fill: hsla(100, 69%, 58%, .05);
}

.target-fps {
    stroke: rgba(250, 73, 37, .4);
    stroke-width: 1px;
    stroke-dasharray: 10, 10;
}

.mean.fps line {
    stroke: hsla(10, 96%, 56%, .8);
    stroke-width: 2px;
}

.mean.fps polygon {
    fill: hsla(10, 96%, 56%, .1);
}

#regressions line {
    stroke: rgba(200, 200, 200, .8);
    stroke-width: 2px;
}

#regressions line.association {
    stroke-width: 1px;
}

#regressions circle {
    fill: rgba(200, 200, 200, .8);
}

.cursor line {
    stroke: rgb(250, 250, 250);
    stroke-width: 1px;
}

.cursor circle,
.cursor text {
    fill: rgb(250, 250, 250);
}

#complexity path {
    stroke: rgba(122, 221, 73, .7);
    stroke-width: 2px;
}

#complexity circle {
    fill: rgb(122, 221, 73);
}

#filteredFPS path {
    stroke: hsla(30, 96%, 56%, .7);
    stroke-width: 1px;
}

#filteredFPS circle {
    fill: hsl(30, 96%, 56%);
}

#rawFPS path {
    stroke: rgba(250, 73, 37, .7);
    stroke-width: 1px;
}

#rawFPS circle {
    fill: rgb(250, 73, 37);
}

.cursor .mutFPS {
    fill: rgb(73, 122, 221);
}

#mutFPS path {
    stroke: rgba(73, 122, 221, .7);
    stroke-width: 1px;
}

#mutFPS circle {
    fill: rgb(73, 122, 221);
}

#complexity-graph .regression line {
    stroke: rgba(253, 253, 253, .8);
    stroke-width: 2px;
}

#complexity-graph .regression circle {
    fill: rgba(253, 253, 253, .8);
}

#complexity-graph .regression polygon {
    fill: rgba(253, 253, 253, .2);
}

#complexity-graph .raw.series line {
    stroke: hsla(30, 96%, 56%, .3);
    stroke-width: 1px;
}

#complexity-graph .raw.series line.mutation {
    stroke: rgba(255, 255, 255, .15);
}

#complexity-graph .raw.regression line {
    stroke: rgba(30, 96%, 86%, .6);
}

#complexity-graph .raw.regression polygon {
    stroke: rgba(30, 96%, 86%, .05);
}

#complexity-graph .bootstrap .bar {
    fill: hsla(260, 56%, 66%, .4);
}

#complexity-graph .bootstrap .median line {
    stroke: hsla(300, 56%, 66%, .8);
    stroke-width: 2px;
}

#complexity-graph .bootstrap .median circle {
    fill: hsla(300, 56%, 66%, .8);
}

#complexity-graph .bootstrap .median polygon {
    fill: hsla(240, 56%, 66%, .4);
}

/* -------------------------------------------------------------------------- */
/*                        Comparison & Panel Controls                         */
/* -------------------------------------------------------------------------- */

.control-panel-container {
    background: rgba(45, 45, 45, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.2em;
    margin: 2.5em 0;
    max-width: 580px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

.mode-toggles {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.2em;
    gap: 0.5em;
}

.mode-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 1.05em;
    padding: 0.6em 1.2em;
    border-radius: 0;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.25s ease;
    display: inline-block !important;
    min-width: initial !important;
}

.mode-tab:hover {
    color: white !important;
    background: transparent;
}

.mode-tab.active {
    color: white !important;
    border-bottom-color: hsl(20, 95%, 52%) !important;
    background: transparent;
}

.control-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.control-panel.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.drop-zone {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 1.5em;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s ease;
    margin-bottom: 1em;
}

.drop-zone.drag-over {
    border-color: hsl(20, 95%, 52%);
    background: rgba(250, 73, 37, 0.08);
    color: white;
}

.compare-zones-row {
    display: flex;
    gap: 1.2em;
    margin-bottom: 1.5em;
}

.compare-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1em;
}

.compare-col h4 {
    margin: 0 0 0.8em 0;
    font-size: 1.05em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.compare-drop {
    width: 100%;
    box-sizing: border-box;
    padding: 1.2em 0.5em;
    font-size: 0.9em;
    margin-bottom: 0.8em;
}

.panel-btn {
    border: 1.5px solid white !important;
    color: white !important;
    background: transparent !important;
    padding: 0.5em 1.5em !important;
    font-size: 1.1em !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: block !important;
}

.panel-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.panel-btn-small {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
    padding: 0.4em 1em !important;
    font-size: 0.85em !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    margin-bottom: 0.6em !important;
    display: block !important;
}

.panel-btn-small:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.loaded-file-indicator {
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    word-break: break-all;
    max-width: 100%;
}

.loaded-file-indicator.loaded {
    color: hsl(122, 60%, 65%);
    font-weight: 500;
}

.compare-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5em;
}

.compare-run-btn {
    border: none !important;
    background: linear-gradient(135deg, hsl(20, 95%, 52%) 0%, hsl(10, 96%, 56%) 100%) !important;
    color: white !important;
    padding: 0.6em 2.2em !important;
    font-size: 1.25em !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(250, 73, 37, 0.3) !important;
    transition: all 0.25s ease !important;
    display: block !important;
}

.compare-run-btn:hover:not(.disabled) {
    box-shadow: 0 6px 20px rgba(250, 73, 37, 0.5) !important;
    transform: translateY(-1px) !important;
}

.compare-run-btn.disabled, .compare-run-btn:disabled {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.panel-btn-text {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 1em !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    padding: 0.2em !important;
    display: inline-block !important;
    min-width: initial !important;
}

.panel-btn-text:hover {
    color: white !important;
}

/* Overall Comparison Results Styling */
.comparison-badge {
    padding: 0.15em 0.45em;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.comp-badge-better {
    background: hsla(122, 55%, 42%, 0.2) !important;
    border: 1.5px solid hsl(122, 55%, 45%) !important;
    color: hsl(122, 60%, 65%) !important;
}

.comp-badge-worse {
    background: hsla(11, 72%, 45%, 0.2) !important;
    border: 1.5px solid hsl(11, 72%, 48%) !important;
    color: hsl(11, 75%, 65%) !important;
}

.comparison-details-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5em;
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.85);
}

.comparison-details-row .separator {
    color: rgba(255, 255, 255, 0.15);
}

/* Delta cells in result tables */
.diff-better {
    color: hsl(122, 60%, 65%) !important;
    font-weight: bold;
}

.diff-worse {
    color: hsl(11, 75%, 65%) !important;
    font-weight: bold;
}

.font-bold {
    font-weight: bold;
}

.sub-stdev {
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.38);
    margin-left: 0.25em;
}

.inline-badge {
    font-size: 0.7em !important;
    vertical-align: middle;
    margin-left: 0.6em;
}

.comp-nav-legend, .comp-nav-values {
    float: right;
    font-weight: bold;
}

.comp-teal {
    color: hsl(180, 70%, 48%) !important;
}

.comp-orange {
    color: hsl(15, 90%, 58%) !important;
}

.comp-nav-legend-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    float: right;
    margin-top: -0.8em;
}

/* Dynamic Graph Comparison Overlays HSL Rules */

/* Baseline (A) HSL Teal */
.comp-run-a-complexity path {
    stroke: hsla(180, 70%, 48%, 0.7) !important;
    stroke-width: 2px !important;
    stroke-dasharray: 4, 4 !important;
}
.comp-run-a-complexity circle {
    fill: hsl(180, 70%, 48%) !important;
}
.comp-run-a-rawfps path {
    stroke: hsla(200, 70%, 50%, 0.4) !important;
    stroke-width: 1px !important;
}
.comp-run-a-rawfps circle {
    fill: hsl(200, 70%, 50%) !important;
}
.comp-run-a-filteredfps path {
    stroke: hsla(190, 80%, 48%, 0.8) !important;
    stroke-width: 2px !important;
}
.comp-run-a-filteredfps circle {
    fill: hsl(190, 80%, 48%) !important;
}
.mean.comp-run-a line {
    stroke: hsla(180, 70%, 45%, 0.8) !important;
    stroke-width: 2px !important;
}
.mean.comp-run-a polygon {
    fill: hsla(180, 70%, 45%, 0.05) !important;
}

/* Comparison (B) HSL Coral Orange */
.comp-run-b-complexity path {
    stroke: hsla(15, 90%, 58%, 0.85) !important;
    stroke-width: 2.5px !important;
}
.comp-run-b-complexity circle {
    fill: hsl(15, 90%, 58%) !important;
}
.comp-run-b-rawfps path {
    stroke: hsla(35, 90%, 50%, 0.45) !important;
    stroke-width: 1px !important;
}
.comp-run-b-rawfps circle {
    fill: hsl(35, 90%, 50%) !important;
}
.comp-run-b-filteredfps path {
    stroke: hsla(20, 95%, 54%, 0.85) !important;
    stroke-width: 2.5px !important;
}
.comp-run-b-filteredfps circle {
    fill: hsl(20, 95%, 54%) !important;
}
.mean.comp-run-b line {
    stroke: hsla(15, 90%, 50%, 0.8) !important;
    stroke-width: 2px !important;
}
.mean.comp-run-b polygon {
    fill: hsla(15, 90%, 50%, 0.05) !important;
}

/* Complexity Graph Comparisons */
#complexity-graph .regression.comp-run-a line {
    stroke: hsla(180, 70%, 45%, 0.85) !important;
    stroke-width: 2px !important;
}
#complexity-graph .regression.comp-run-a polygon {
    fill: hsla(180, 70%, 45%, 0.15) !important;
}
#complexity-graph .regression.comp-run-b line {
    stroke: hsla(15, 90%, 58%, 0.85) !important;
    stroke-width: 2.5px !important;
}
#complexity-graph .regression.comp-run-b polygon {
    fill: hsla(15, 90%, 58%, 0.2) !important;
}

#complexity-graph .bootstrap.comp-run-a .bar {
    fill: hsla(180, 70%, 45%, 0.25) !important;
}
#complexity-graph .bootstrap.comp-run-a .median line {
    stroke: hsla(180, 70%, 40%, 0.8) !important;
    stroke-width: 2px !important;
}
#complexity-graph .bootstrap.comp-run-a .median circle {
    fill: hsla(180, 70%, 40%) !important;
}
#complexity-graph .bootstrap.comp-run-b .bar {
    fill: hsla(15, 90%, 58%, 0.25) !important;
}
#complexity-graph .bootstrap.comp-run-b .median line {
    stroke: hsla(15, 90%, 50%, 0.8) !important;
    stroke-width: 2.5px !important;
}
#complexity-graph .bootstrap.comp-run-b .median circle {
    fill: hsla(15, 90%, 50%) !important;
}

#complexity-graph .series.raw.comp-run-a line {
    stroke: hsla(180, 70%, 48%, 0.25) !important;
}
#complexity-graph .series.raw.comp-run-b line {
    stroke: hsla(15, 90%, 58%, 0.3) !important;
}
#complexity-graph .comp-run-a-rawfps circle {
    fill: hsl(180, 70%, 45%) !important;
}
#complexity-graph .comp-run-b-rawfps circle {
    fill: hsl(15, 90%, 58%) !important;
}

.target-fps.comp-run-a {
    stroke: hsla(180, 70%, 45%, 0.45) !important;
}
.target-fps.comp-run-b {
    stroke: hsla(15, 90%, 58%, 0.5) !important;
}
#time-graph .cursor .comp-teal {
    fill: hsl(180, 70%, 48%) !important;
}
#time-graph .cursor .comp-orange {
    fill: hsl(15, 90%, 58%) !important;
}
#results .score-profile {
    margin-bottom: 0.5em;
}
#results .confidence {
    text-indent: 0 !important;
}

.compare-col.drag-over {
    background: rgba(250, 73, 37, 0.08) !important;
    border-color: hsl(20, 95%, 52%) !important;
    border-style: solid !important;
}

.compare-col.drag-over .drop-zone {
    border-color: hsl(20, 95%, 52%) !important;
    color: white !important;
}