/*****
Browser scrollbar styles *****/
div.welcome-eq-launcher-container {
    position: absolute;
    top: -38px !important;
    right: 0px;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    
    background-color: rgba(var(--scrollbar-color), 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar:hover {
    background-color: rgba(var(--scrollbar-color), 0.1);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(var(--scrollbar-accent), 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:vertical:active,
::-webkit-scrollbar-thumb:horizontal:active {
    background-color: rgba(var(--scrollbar-accent), 0.2);
}

/* For Firefox, maybe? */
html {
    scrollbar-color: dark;
}


/* edits */
select.squig-select {
    border: 1px solid var(--background-color-contrast) !important;
}
div.db-site-header a, div.fauxn-item a {
    color: var(--font-color-secondary) !important;
}
div.fauxn-item a:before {
    background-color: var(--background-color-contrast) !important;
}
section.db-site-container[data-delta-ready="true"] div.db-site-header:after, div.fauxn-item[data-delta-ready="true"] a:after {
    background: var(--accent-color) !important; /* linear-gradient(135deg, var(--accent-color) 40%, var(--background-color-contrast-more), var(--accent-color) 50%) !important; */
}
section.db-site-container, div.db-site-header {
    background-color: var(--background-color-contrast-more) !important;
}
div.db-site-header a span.db-site-tag {
    color: var(--background-color-contrast) !important;
}
/* end edits */
/*****
Icons *****/

/***** https://yoksel.github.io/url-encoder/ *****/

:root {
    --icon-remove: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000000;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M95.36,24.64h0a5,5,0,0,0-7.08,0L60,52.93,31.72,24.64a5,5,0,0,0-7.08,0h0a5,5,0,0,0,0,7.08L52.93,60,24.64,88.28a5,5,0,0,0,0,7.08h0a5,5,0,0,0,7.08,0L60,67.07,88.28,95.36a5,5,0,0,0,7.08,0h0a5,5,0,0,0,0-7.08L67.07,60,95.36,31.72A5,5,0,0,0,95.36,24.64Z'/%3E%3C/svg%3E");
    --icon-baseline: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect x='10' y='55' width='100' height='10' rx='5'/%3E%3C/svg%3E");
    --icon-squiggle: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000000;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M80.37,85c-12.63,0-18.92-6.89-22-12.67A30.8,30.8,0,0,1,55,60.18V60a20.12,20.12,0,0,0-2.1-8c-2.46-4.7-6.68-7-12.9-7s-10.44,2.28-12.9,7A20.1,20.1,0,0,0,25,60a5,5,0,0,1-5,5h0a5,5,0,0,1-5-5c0-8.65,5.22-25,25-25S65,51.2,65,59.87C65.1,61.67,66.3,75,80.37,75c6,0,10.16-2.27,12.56-7A20.49,20.49,0,0,0,95,60a5,5,0,0,1,5-5h0a5,5,0,0,1,5,5,30,30,0,0,1-3,12.2C98,80.46,90.29,85,80.37,85Z'/%3E%3C/svg%3E");
    --icon-download: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 14L11.2929 14.7071L12 15.4142L12.7071 14.7071L12 14ZM13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44771 11 5L13 5ZM6.29289 9.70711L11.2929 14.7071L12.7071 13.2929L7.70711 8.29289L6.29289 9.70711ZM12.7071 14.7071L17.7071 9.70711L16.2929 8.29289L11.2929 13.2929L12.7071 14.7071ZM13 14L13 5L11 5L11 14L13 14Z' fill='%23CCD2E3'/%3E%3Cpath d='M5 16L5 17C5 18.1046 5.89543 19 7 19L17 19C18.1046 19 19 18.1046 19 17V16' stroke='%23CCD2E3' stroke-width='2'/%3E%3C/svg%3E%0A");
    --icon-hide: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000000;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M60,30C32.39,30,10,43.43,10,60S32.39,90,60,90s50-13.43,50-30S87.61,30,60,30ZM90.21,72.64C82.41,77.32,71.4,80,60,80,37.11,80,20,69.44,20,60c0-4.3,3.57-8.91,9.79-12.64C37.59,42.68,48.6,40,60,40c22.89,0,40,10.56,40,20C100,64.3,96.43,68.91,90.21,72.64Z'/%3E%3Ccircle class='cls-1' cx='60' cy='60' r='10'/%3E%3C/svg%3E");
    --icon-pin: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000000;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M78.07,30.48A28.68,28.68,0,0,1,89.52,41.93l-2.33-.64L83.49,45,69.05,59.43l-4.78,4.78,3.27,5.93c2.61,4.74,2.9,7.76,2.79,8.93a3,3,0,0,1-.45,0c-2.64,0-7.89-1.7-14-6.48l-4.75-3.74-3.74-4.75c-5.55-7.09-6.65-12.6-6.48-14.45l.46,0c1,0,3.89.28,8.49,2.81l5.93,3.27L60.57,51,75,36.51l3.71-3.7-.64-2.33M74.41,20.27A6.34,6.34,0,0,0,69.77,22c-1.79,1.79-2.08,4.76-1.13,8.2L54.21,44.58C49.57,42,45.1,40.65,41.37,40.65a9.54,9.54,0,0,0-7,2.51c-5,5-2.27,16.09,5.9,26.51L23,95.58a1,1,0,0,0,.83,1.55,1,1,0,0,0,.55-.17L50.33,79.69c6.87,5.38,14,8.4,19.55,8.4a9.52,9.52,0,0,0,7-2.5c3.93-3.93,3.08-11.62-1.42-19.8L89.85,51.36a13.62,13.62,0,0,0,3.58.53,6.32,6.32,0,0,0,4.62-1.66C102,46.32,98.79,36.83,91,29c-5.54-5.54-11.93-8.75-16.57-8.75Z'/%3E%3C/svg%3E");
    --icon-plus: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000000;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M110,60h0a5,5,0,0,0-5-5H65V15a5,5,0,0,0-5-5h0a5,5,0,0,0-5,5V55H15a5,5,0,0,0-5,5h0a5,5,0,0,0,5,5H55v40a5,5,0,0,0,5,5h0a5,5,0,0,0,5-5V65h40A5,5,0,0,0,110,60Z'/%3E%3C/svg%3E");
    
    --icon-expand: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23252627;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M24.64,95.36l24.75-3.54-7.07-7.07,3.54-3.54a5,5,0,0,0,0-7.07h0a5,5,0,0,0-7.07,0l-3.54,3.54-7.07-7.07Z'/%3E%3Cpath class='cls-1' d='M95.36,24.64,70.61,28.18l7.07,7.07-3.54,3.54a5,5,0,0,0,0,7.07h0a5,5,0,0,0,7.07,0l3.54-3.54,7.07,7.07Z'/%3E%3Cpath class='cls-1' d='M42.32,35.25l7.07-7.07L24.64,24.64l3.54,24.75,7.07-7.07,3.54,3.54a5,5,0,0,0,7.07,0h0a5,5,0,0,0,0-7.07Z'/%3E%3Cpath class='cls-1' d='M95.36,95.36,91.82,70.61l-7.07,7.07-3.54-3.54a5,5,0,0,0-7.07,0h0a5,5,0,0,0,0,7.07l3.54,3.54-7.07,7.07Z'/%3E%3C/svg%3E");
    --icon-collapse: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23252627;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M52.93,67.07,28.18,70.61l7.07,7.07-3.53,3.53a5,5,0,0,0,0,7.07h0a5,5,0,0,0,7.07,0l3.53-3.53,7.07,7.07Z'/%3E%3Cpath class='cls-1' d='M67.07,52.93l24.75-3.54-7.07-7.07,3.53-3.53a5,5,0,0,0,0-7.07h0a5,5,0,0,0-7.07,0l-3.53,3.53-7.07-7.07Z'/%3E%3C/svg%3E");
    
    --icon-expand: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23252627;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M45,105h0a5,5,0,0,1-5,5H10V80a5,5,0,0,1,5-5h0a5,5,0,0,1,5,5v20H40A5,5,0,0,1,45,105Z'/%3E%3Cpath class='cls-1' d='M110,80v30H80a5,5,0,0,1-5-5h0a5,5,0,0,1,5-5h20V80a5,5,0,0,1,5-5h0A5,5,0,0,1,110,80Z'/%3E%3Cpath class='cls-1' d='M110,10V40a5,5,0,0,1-5,5h0a5,5,0,0,1-5-5V20H80a5,5,0,0,1-5-5h0a5,5,0,0,1,5-5Z'/%3E%3Cpath class='cls-1' d='M45,15h0a5,5,0,0,1-5,5H20V40a5,5,0,0,1-5,5h0a5,5,0,0,1-5-5V10H40A5,5,0,0,1,45,15Z'/%3E%3C/svg%3E");
    --icon-collapse: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23252627;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M10,80h0a5,5,0,0,1,5-5H45v30a5,5,0,0,1-5,5h0a5,5,0,0,1-5-5V85H15A5,5,0,0,1,10,80Z'/%3E%3Cpath class='cls-1' d='M75,105V75h30a5,5,0,0,1,5,5h0a5,5,0,0,1-5,5H85v20a5,5,0,0,1-5,5h0A5,5,0,0,1,75,105Z'/%3E%3Cpath class='cls-1' d='M75,45V15a5,5,0,0,1,5-5h0a5,5,0,0,1,5,5V35h20a5,5,0,0,1,5,5h0a5,5,0,0,1-5,5Z'/%3E%3Cpath class='cls-1' d='M10,40h0a5,5,0,0,1,5-5H35V15a5,5,0,0,1,5-5h0a5,5,0,0,1,5,5V45H15A5,5,0,0,1,10,40Z'/%3E%3C/svg%3E");
    
    --icon-hamburger: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 120 120' style='enable-background:new 0 0 120 120;' xml:space='preserve'%3E%3Cpath class='st0' d='M105,65H15c-2.76,0-5-2.24-5-5v0c0-2.76,2.24-5,5-5h90c2.76,0,5,2.24,5,5v0C110,62.76,107.76,65,105,65z'/%3E%3Cpath class='st0' d='M105,20H15c-2.76,0-5-2.24-5-5v0c0-2.76,2.24-5,5-5h90c2.76,0,5,2.24,5,5v0C110,17.76,107.76,20,105,20z'/%3E%3Cpath class='st0' d='M105,110H15c-2.76,0-5-2.24-5-5v0c0-2.76,2.24-5,5-5h90c2.76,0,5,2.24,5,5v0C110,107.76,107.76,110,105,110z'/%3E%3C/svg%3E%0A");
}

/*****
Base page styles *****/

html {
    width: 100vw;
    height: 100vh;
    max-height: -webkit-fill-available;
    overflow: hidden;
    
    font-family: var(--font-primary);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    
    user-select: none;
    scroll-behavior: smooth;
    overscroll-behavior-y: none;
}

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    max-height: -webkit-fill-available;
    overflow: hidden;
    
    background-color: var(--background-color);
    
    color: var(--font-color-primary);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 1em;
    
    opacity: 1.0;
}

input {
    -webkit-appearance: none;
}



/*****
Graph colors *****/
.logo-title {
    fill: var(--font-color-primary);
}
svg text {
    color: var(--background-color-contrast-more);
    color: var(--font-color-primary);
    font-family: var(--font-secondary);
}

svg text.graph-name {
    fill: var(--font-color-primary);
    
    font-family: var(--font-primary);
    font-weight: 700;
}

svg line {
    stroke: var(--background-color-contrast-more);
}

g.lineLabel rect {
    fill: var(--background-color-graph);
    filter: blur(2px);
    opacity: 0.9;
}

g.lineLabel text {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
}

svg#fr-graph {
    position: relative;
    
    background-color: var(--background-color-graph);
    
    pointer-events: none;
}

rect.graphBackground {
    opacity: 0.0;
}

g.dBScaler {
    fill: var(--background-color-contrast-more);
    pointer-events: all;
}

g.dBScaler rect[fill="#bbb"] {
    fill: var(--background-color-graph);
}

svg#fr-graph > g > image {
    filter: var(--svg-filter);
}

svg#fr-graph rect {
    pointer-events: all;
}

g.inspector rect {
    pointer-events: none !important;
}

text.insp_dB {
    fill: var(--background-color-contrast-more);
}

/* Animating graph stroke */

div.graphBox[data-animated="true"] g[mask="url(#graphFade)"] path:not(.target) {
    stroke-dasharray: 2000px;
    
    animation-name: graph-draw;
    animation-duration: 1.0s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes graph-draw {
    0% {
        stroke-dashoffset: 2000px;
    }
    
    100% {
        stroke-dashoffset: 0px;
    }
}

/*****
Graph labels *****/

/* Rig */

svg text.rig-description {
    filter: var(--svg-filter)
}

/* top-left */
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel:nth-last-child(1),
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel:nth-last-child(1) {
    transform: translate(40px, 8px);
}

svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(2),
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(2),
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel:nth-last-child(2),
svg#fr-graph[data-labels-position="top-left"] rect + g.lineLabel:nth-last-child(2) {
    transform: translate(40px, 30px);
}

svg#fr-graph[data-labels-position="top-left"] rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(3),
svg#fr-graph[data-labels-position="top-left"] rect + g.lineLabel + g.lineLabel:nth-last-child(3),
svg#fr-graph[data-labels-position="top-left"] rect + g.lineLabel:nth-last-child(3) {
    transform: translate(40px, 52px);
}

svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel + g.lineLabel:nth-last-child(4),
svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel:nth-last-child(4) {
    transform: translate(40px, 74px);
}

svg#fr-graph[data-labels-position="top-left"] > rect + g.lineLabel:nth-last-child(5) {
    transform: translate(40px, 96px);
}

/* bottom-left */
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel:nth-last-child(1),
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel:nth-last-child(1) {
    transform: translate(40px, 296px);
}

svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(2),
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(2),
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel:nth-last-child(2),
svg#fr-graph[data-labels-position="bottom-left"] rect + g.lineLabel:nth-last-child(2) {
    transform: translate(40px, 274px);
}

svg#fr-graph[data-labels-position="bottom-left"] rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(3),
svg#fr-graph[data-labels-position="bottom-left"] rect + g.lineLabel + g.lineLabel:nth-last-child(3),
svg#fr-graph[data-labels-position="bottom-left"] rect + g.lineLabel:nth-last-child(3) {
    transform: translate(40px, 252px);
}

svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel + g.lineLabel:nth-last-child(4),
svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel:nth-last-child(4) {
    transform: translate(40px, 230px);
}

svg#fr-graph[data-labels-position="bottom-left"] > rect + g.lineLabel:nth-last-child(5) {
    transform: translate(40px, 208px);
}

/* bottom-right */
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(1),
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel:nth-last-child(1),
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel:nth-last-child(1) {
    transform: translate(500px, 296px);
}

svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(2),
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(2),
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel:nth-last-child(2),
svg#fr-graph[data-labels-position="bottom-right"] rect + g.lineLabel:nth-last-child(2) {
    transform: translate(500px, 274px);
}

svg#fr-graph[data-labels-position="bottom-right"] rect + g.lineLabel + g.lineLabel + g.lineLabel:nth-last-child(3),
svg#fr-graph[data-labels-position="bottom-right"] rect + g.lineLabel + g.lineLabel:nth-last-child(3),
svg#fr-graph[data-labels-position="bottom-right"] rect + g.lineLabel:nth-last-child(3) {
    transform: translate(500px, 252px);
}

svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel + g.lineLabel:nth-last-child(4),
svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel:nth-last-child(4) {
    transform: translate(500px, 230px);
}

svg#fr-graph[data-labels-position="bottom-right"] > rect + g.lineLabel:nth-last-child(5) {
    transform: translate(500px, 208px);
}

/*****
Framing *****/

div.graphtool {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    max-height: -webkit-fill-available;
}

main.main {
    display: flex;
    flex: 100% 1 1;
    overflow: hidden;
}

section.parts-primary {
    position: relative;
    z-index: 1;
    
    flex: auto 1 1;
    order: 2;
        
    box-sizing: border-box;
    height: 100%;
    
    background-color: var(--background-color);
    
    overflow-y: auto;
}

section.parts-secondary {
    flex: 350px 0 0;
    order: 1;
    
    box-sizing: border-box;
    height: 100%;
    
    border-right: 1px solid var(--background-color);
}

/*****
Alt header *****/

header.header {
    display: flex;
    align-items: flex-start;
    
    box-sizing: border-box;
    
    background-color: var(--header-color);
}

button.header-button {
    display: none;
}

div.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    
    box-sizing: border-box;
    flex: 350px 0 0;
    height: 48px;
    padding: 12px 0;
    overflow: hidden;
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
}

div.logo a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

div.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    
    filter: var(--logo-filter);
}

div.logo span {
    margin: 0 1em;
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
    
    color: var(--header-links-color);
}

ul.header-links {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0 32px;
    
    box-sizing: border-box;
    flex: 100% 0 1;
    height: 100%;
    margin: auto;
    padding: 0 16px;
    
    overflow-x: hidden;
}

ul.header-links::-webkit-scrollbar {
    width: 0;
    height: 0;
}

ul.header-links li {
    display: flex;
    align-items: center;
    
    box-sizing: border-box;
    height: 42px;
    padding: 6px 0 0 0;
    margin: 0;
    
    list-style: none;
    white-space: nowrap;
    margin-bottom: 8px;
}

ul.header-links a {
    display: flex;
    align-items: center;
    
    color: var(--header-links-color);
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 14px;
    line-height: 1em;
    text-decoration-color: var(--background-color-contrast-more);
    text-decoration: none;
}

@media (min-width: 1470px) {
    ul.header-links {
        justify-content: flex-end !important;
    }
}

@media ( max-width: 1470px ) {
    ul.header-links li.squig-select-li {
        order: 1 !important;

        width: 100% !important;
        height: auto !important;
        padding-top: 16px !important;
        margin: 36px 0 0 0 !important;

        border-top: 1px solid var(--font-color-primary) !important;

        color: var(--font-color-primary) !important;
    }

    select.squig-select {
        width: 100% !important;
    }

    li.squig-select-li:after {
        top: 32px !important;
    }
}

/*****
Primary parts *****/

section.parts-primary {
}

div.graphBox {
    position: relative;
    top: 0;
    z-index: 1;
    
    display: flex;
    flex-direction: column;
    height: auto;
    padding-bottom: 16px;
    
    background-color: var(--background-color-graph);
    border-bottom: 1px solid var(--background-color-contrast);
}

div.graphBox[data-sticky-graph="true"] {
    position: sticky;
}

div.graph-sizer {
    position: relative;
    
    order: 2;
    
    flex: auto 0;
    width: 100%;
    max-width: calc(50vh * 2.2);
    max-width: calc( (100vh - 300px) * 2.2 );
    margin: 16px auto 0 auto;
}



/*****
Tools styles *****/

div.tools {
    order: 1;
    
    display: flex;
    align-items: flex-start;
    
    box-sizing: border-box;
    flex: auto 0 0;
    max-height: 69px;
    padding: 16px 0;
    
    overflow-x: auto;
    
    background-color: var(--background-color);
    border-bottom: 1px solid var(--background-color-contrast);

    overflow-y: hidden;
}

/* Expand / Collapse */

div.expand-collapse {
    position: sticky;
    right: 0;
    order: 10;
    
    display: none;
    
    padding: 0 16px;
    margin-left: auto;
    
    background-color: var(--background-color);
    border-left: 1px solid var(--background-color-contrast-more);
}

body[data-expandable="true"] div.expand-collapse,
body[data-expandable="only"] div.expand-collapse {
    display: inherit;
}

button#expand-collapse {
    position: relative;
    
    display: block;
    width: 36px;
    height: 36px;
    padding: 0;
    
    background-color: var(--background-color);
    border: 1px solid var(--background-color-contrast);
    border-radius: 4px;
    outline: none;
    
    cursor: pointer;
}

button#expand-collapse:before {
    position: absolute;
    top: 0;
    left: 0;
    
    content: '';
    
    box-sizing: border-box;
    display: block;
    width: 34px;
    height: 34px;
    background-color: var(--background-color-contrast-more);
    
    mask: var(--icon-expand);
    -webkit-mask: var(--icon-expand);
    mask-size: 20px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 20px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    
    pointer-events: none;
}

body[data-graph-frame="expanded"] button#expand-collapse {
/*    background-color: var(--background-color);*/
}

body[data-graph-frame="expanded"] button#expand-collapse:before {
/*    background-color: var(--font-color-primary);*/

    mask: var(--icon-collapse);
    -webkit-mask: var(--icon-collapse);
    mask-size: 20px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 20px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Copy URL */
div.copy-url {
    display: flex;
    
    padding: 0 0 0 16px;
    margin: 0 16px 0 0;
}

button#copy-url,
button#download-faux {
    position: relative;
    
    box-sizing: border-box;
    padding: 11px 16px;
    margin: 0;
    overflow: hidden;
    
    background-color: var(--background-color);
    border: 1px solid var(--background-color-contrast-more) !important;
    border: none;
    border-radius: 6px;
    
    color: var(--accent-color-contrast);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 12px;
    line-height: 1em;
    
    white-space: nowrap;
    cursor: pointer;
    outline: none;
}

button#copy-url:active,
button#download-faux:active {
    box-sizing: border-box;
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    
    color: var(--font-color-secondary);
}

button#copy-url:before {
    position: absolute;
    top: 0;
    left: 0;
    
    content: '👍';
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    height: 100%;
    
    background-color: var(--accent-color);
    
    color: var(--font-color-secondary);
    
    opacity: 0;
    
    transition: opacity 0.2s ease-out;
}

button#copy-url.clicked:before {
    opacity: 1.0;
    transition: opacity 0.0s linear;
}

button#download-faux {
    margin-left: 6px;
}

/* Zoom */
div.zoom {
    order: 4;
    
    display: flex;
    align-items: center;
    
    padding: 0 16px;
    margin-left: 16px;
    border-left: 1px solid var(--background-color-contrast-more);
}

div.zoom > span {
    margin-right: 10px;

    color: var(--background-color-contrast-more);
    font-family: var(--font-secondary);
    font-size: 11px;
    line-height: 1em;
    text-transform: uppercase;
}

div.zoom button {
    order: 1;
    
    padding: 11px 16px;
    margin: 0;
    
    background-color: var(--background-color);
    border: 1px solid var(--background-color-contrast-more);
    outline: none;
    
    color: var(--accent-color-contrast);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 12px;
    line-height: 1em;
    
    white-space: nowrap;
    cursor: pointer;
}

div.zoom button.selected {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    
    color: var(--font-color-secondary);
}

div.zoom button:nth-of-type(1) {
    border-right: none;
    border-radius: 6px 0 0 6px;
}

div.zoom button:nth-of-type(2) {
    border-left: none;
    border-right: none;
}

div.zoom button:nth-last-of-type(1) {
    border-left: none;
    border-radius: 0 6px 6px 0;
}

/* Normalize */
div.normalize {
    order: 2;
    
    display: flex;
    align-items: center;
    
    padding: 0 0 0 16px;
    
    border-left: 1px solid var(--background-color-contrast-more);
}

div.normalize > span {
    margin-right: 10px;

    color: var(--background-color-contrast-more);
    font-family: var(--font-secondary);
    font-size: 11px;
    line-height: 1em;
    text-transform: uppercase;
}

div.normalize .helptip {
    display: none;
}

div.normalize > div {
    display: flex;
    align-items: center;
}

div.normalize > div + div {
    margin-left: 6px;
}

div.normalize > div > input {
    order: 2;
    
    box-sizing: border-box;
    width: 70px;
    height: 36px;
    padding: 10px 0;
    
    background-color: var(--background-color-inputs);
    border: 1px solid var(--background-color-contrast-more);
    border-right: none;
    border-left: none;
    border-radius: 0px;
    outline: none;
    
    color: var(--font-color-inputs);
    font-family: var(--font-secondary);
    font-size: 11px;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
}

div.normalize > div:after {
    order: 3;
    content: '';
    
    box-sizing: border-box;
    display: block;
    width: 6px;
    height: 36px;
    
    background-color: var(--background-color-inputs);
    border: 1px solid var(--background-color-contrast-more);
    border-left: none;
    border-radius: 0 6px 6px 0;
}

div.normalize > div > span {
    order: 1;
    
    padding: 11px 16px;
    
    background-color: var(--background-color) !important;
    border: 1px solid var(--background-color-contrast-more);
    border-right: none;
    border-radius: 6px 0 0 6px;
    
    color: var(--accent-color-contrast);
    font-weight: 400;
    font-size: 12px;
    line-height: 1em;
    
    white-space: nowrap;
    cursor: pointer;
}

div.normalize > div.selected > span {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color);
    
    color: var(--font-color-secondary);
}

/* Adjust */
.adjustable.selected {
    background: rgb(214, 218, 209);
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--font-color-secondary);
}
.spinner {
    display: none;
}
@media only screen and (max-width: 1000px) {
    /*.spinners {
        display: block;
        position: absolute;
        right: 7px;
        top: 50%;
        display: flex;
        flex-direction: column;
        width: fit-content;
        margin: 1px;
        transform: translateY(-50%);
    }
      
    .spinner {
        font-size: 8px;
        border: none;
        padding: 2px;
    }
    
    .spinner:hover {
        background: lightgrey;
    }*/
    .spinner {
        display: block;
        border: solid 1px lightgrey;
        padding: 9px 5px;
      }
      
      .spinner:hover {
        background: lightgrey;
      }
      
      .spinner.increment {
        margin-left: 3px;
        border-radius: 3px 0 0 3px;
      }
      
      .spinner.decrement {
        border-radius: 0 3px 3px 0;
        margin-right: 7px;
      }

}
div.adjust {
    display: flex;
    align-items: flex-start;
    
    box-sizing: border-box;
    padding: 16px;
    padding-left: 5px;
    max-height: 68px;
    
    overflow-x: auto;
    overflow-y: hidden;
}


div.adjust > span {
    margin-right: 10px;
    padding-left: 10px;
    padding-top: 12px;
    color: var(--background-color-contrast-more);
    font-family: var(--font-secondary);
    font-size: 11px;
    line-height: 1em;
    text-transform: uppercase;
    white-space: nowrap;
}

div.adjust .helptip {
    display: none;
}

div.adjust > div {
    position: relative;
    display: flex;
    align-items: center;
}

div.adjust > button + div {
    margin-left: 6px;
}

div.adjust > div > input {
    order: 2;
    
    box-sizing: border-box;
    width: 70px;
    height: 36px;
    padding: 10px 0;
    
    background-color: var(--background-color-inputs);
    border: 1px solid var(--background-color-contrast-more);
    border-right: none;
    border-left: none;
    border-radius: 0px;
    outline: none;
    
    color: var(--font-color-inputs);
    font-family: var(--font-secondary);
    font-size: 11px;
    line-height: 1em;
    text-transform: uppercase;
    text-align: left;
    padding-left: 11px;
}

div.adjust > div:after {
    order: 3;
    content: '';
    
    box-sizing: border-box;
    display: block;
    width: 6px;
    height: 36px;
    
    background-color: var(--background-color-inputs);
    border: 1px solid var(--background-color-contrast-more);
    border-left: none;
    border-radius: 0 6px 6px 0;
}

div.adjust > div > span {
    order: 1;
    
    padding: 11px 16px;
    
    background-color: var(--background-color) !important;
    border: 1px solid var(--background-color-contrast-more);
    border-right: none;
    border-radius: 6px 0 0 6px;
    
    color: var(--accent-color-contrast);
    font-weight: 400;
    font-size: 12px;
    line-height: 1em;
    
    white-space: nowrap;
    /*cursor: pointer;*/
}

div.adjust > div.selected > span {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color);
    
    color: var(--font-color-secondary);
}


/* Smooth */
div.smooth {
    order: 3;
    
    display: flex;
    align-items: center;
    
    padding-left: 16px;
    margin-left: 16px;
    border-left: 1px solid var(--background-color-contrast-more);
}

div.smooth > span {
    margin-right: 10px;

    color: var(--background-color-contrast-more);
    font-family: var(--font-secondary);
    font-size: 11px;
    line-height: 1em;
    text-transform: uppercase;
}

div.smooth input {
    box-sizing: border-box;
    width: 70px;
    height: 36px;
    padding: 10px 0;
    
    background-color: var(--background-color-inputs);
    border: 1px solid var(--background-color-contrast-more);
    border-right: none;
    border-radius: 6px 0 0 6px;
    outline: none;
    
    color: var(--font-color-inputs);
    font-family: var(--font-secondary);
    font-size: 11px;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
}

div.smooth:after {
    order: 3;
    content: '';
    
    box-sizing: border-box;
    display: block;
    width: 6px;
    height: 36px;
    
    background-color: var(--background-color-inputs);
    border: 1px solid var(--background-color-contrast-more);
    border-left: none;
    border-radius: 0 6px 6px 0;
}

/* Download, Inspect, Label, Recolor */
div.miscTools {
    order: 4;
    
    display: flex;
    
    background-color: var(--background-color);
    border-left: 1px solid var(--background-color-contrast-more);
    
    padding: 0 16px;
}

div.miscTools button,
div.extra-panel button {
    order: 1;
    
    padding: 11px 8px;
    margin: 0;
    
    background-color: var(--background-color) !important;
    border: 1px solid var(--background-color-contrast-more);
    border-radius: 6px;
    
    color: var(--accent-color-contrast);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 12px;
    line-height: 1em;
    text-transform: capitalize;
    
    white-space: nowrap;
    cursor: pointer;
    outline: none;
}

div.miscTools button span {
    display: none;
}

div.miscTools button + button {
    margin-left: 6px;
}

div.miscTools button.selected {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color);
    
    color: var(--font-color-secondary);
}

div.miscTools button#recolor:active {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color);
    
    color: var(--font-color-secondary);
}

div.tools div.miscTools button:not(#download) {
    display: inherit;
}

div.miscTools button#download {
    display: none;
    
    order: 0;
    margin: 0 6px 0 0;
}

div.miscTools button#download:active {
    background-color: var(--accent-color) !important;
    
    color: var(--font-color-secondary);
}

svg#expandTools {
    display: none;
}

svg#expandTools path {
    display: none;
}

body.dark-mode div.miscTools button#theme,
div.miscTools button#theme:active {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color);

    color: var(--font-color-secondary);
}

/***** Targets styles *****/

div.targets, div.targetsadj {
    display: flex;
    align-items: flex-start;
    
    box-sizing: border-box;
    padding: 0 16px 16px 16px;
    padding: 16px;
    max-height: 68px;
    
    overflow-x: auto;
    overflow-y: hidden;
}
div.targetsadj {
    padding: 16px 0px 6px 16px;
}
div.targets > div.targetLabel, div.targetsadj > div.targetLabel {
    display: none;
}

.targetClass, .targetClassadj {
    flex: auto 0 0 !important;
}

.targetClass + .targetClass, .targetClassadj + .targetClassadj {
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 16px;
    border-left: 1px solid var(--background-color-contrast-more);
}

.targetClass div.targetLabel, .targetClassadj div.targetLabel {
    margin-right: 10px;

    color: var(--background-color-contrast-more);
    font-family: var(--font-secondary);
    font-size: 11px;
    line-height: 1em;
    text-transform: uppercase;
}

.targetClass div.targetLabel:after, .targetClassadj div.targetLabel:after {
    content: ' targets:';
    white-space: pre;
}

div.targets .targetClass, div.targetsadj .targetClassadj {
    display: flex;
}

div.targetLabel {
    display: flex;
    align-items: center;
}

div.target, div.targetadj {
    padding: 11px 16px;
    
    background-color: var(--background-color) !important;
    border: 1px solid var(--background-color-contrast-more);
    border-radius: 6px;
    
    color: var(--accent-color-contrast);
    font-weight: 400;
    font-size: 12px;
    line-height: 1em;
    
    white-space: nowrap;
    cursor: pointer;
}

div.target + .target, div.targetadj + .targetadj {
    margin-left: 6px;
}

div.target[style*="background"], div.targetadj[style*="background"] {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    
    color: var(--font-color-secondary);
}



/*****
Table styles *****/

table.manageTable {
    display: flex;
    flex-direction: column;
    width: 100%;
}

table.manageTable td {
    padding: 0;
}

tbody.curves:empty {
    display: flex;
    justify-content: center;
    align-items: center;
    
    min-height: 50px;
    
    border-top: 1px solid var(--background-color-contrast);
}

tbody.curves:empty:before {
    content: 'Select a model from the list to the left to graph its frequency response';
    
    padding: 14px 16px;
    
    font-size: 14px;
    line-height: 1.6em;
    text-align: center;
}

tbody.curves > tr {
    display: flex;
    align-items: flex-start;
    
    border-top: 1px solid var(--background-color-contrast);
}

tbody.curves > tr > td {
    position: relative;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    flex: 50px 0 0;
    box-sizing: border-box;
    min-height: 50px;
}

tbody.curves > tr > td.button,
tbody.curves > tr > td.button-pin,
tbody.curves > tr > td.remove {
    box-sizing: border-box;
    flex: 36px 0 0;
    margin-left: 6px;
    
    cursor: pointer;
}

/* Table buttons */
tbody.curves > tr > td.button:before,
tbody.curves > tr > td.button-pin:before,
tbody.curves > tr > td.remove:before {
    position: absolute;
    
    top: 6px;
    left: 0;
    
    content: '';
    box-sizing: border-box;
    display: block;
    width: 36px;
    height: 36px;
    
    background-color: var(--background-color);
    border: 1px solid var(--background-color-contrast);
    border-radius: 6px;
    
    pointer-events: none;
}

tbody.curves > tr > td.button:after,
tbody.curves > tr > td.button-pin:after,
tbody.curves > tr > td.remove:after {
    position: absolute;
    
    top: 6px;
    left: 0px;
    
    content: '';
    box-sizing: border-box;
    display: block;
    width: 36px;
    height: 36px;
    
    background-color: var(--background-color-contrast-more);
    
    pointer-events: none;
}

/* Remove item */
tbody.curves > tr > td.remove {
    order: 6;
    
    margin: 0 16px 0 6px;
    
    background: none !important;
}

tbody.curves > tr > td.remove:after {
    mask: var(--icon-remove);
    -webkit-mask: var(--icon-remove);
    
    mask-size: 20px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 20px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

tbody.curves > tr > td.remove svg {
    display: none;
}

tbody.curves > tr > td.button-pin:after {
    mask: var(--icon-pin);
    -webkit-mask: var(--icon-pin);
    
    mask-size: 20px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 20px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

tbody.curves > tr > td.button.hideIcon:after {
    mask: var(--icon-hide);
    -webkit-mask: var(--icon-hide);
    
    mask-size: 20px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 20px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

tbody.curves > tr > td.button.button-baseline:after {
    mask: var(--icon-squiggle);
    -webkit-mask: var(--icon-squiggle);
    
    mask-size: 20px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 20px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

tbody.curves > tr > td.button.button-baseline.selected:after {
    mask: var(--icon-baseline);
    -webkit-mask: var(--icon-baseline);
    
    mask-size: 20px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 20px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Baseline */
tbody.curves > tr > td.button-baseline {
    position: relative;
    
    order: 3;
}

tbody.curves > tr > td.button-baseline:before {
    background-color: var(--background-color);
    border-color: transparent;
}

tbody.curves > tr > td.button-baseline:after {
    background-color: var(--font-color-primary);
}

/* Hide */
tbody.curves > tr > td.hideIcon {
    position: relative;
    
    order: 4;
}

tbody.curves > tr > td.hideIcon svg {
    display: none;
}

tbody.curves > tr > td.hideIcon:before {
    background-color: var(--background-color);
    border-color: transparent;
}

tbody.curves > tr > td.hideIcon:after {
    background-color: var(--font-color-primary);
}

tbody.curves > tr > td.hideIcon.selected:before {
    border-color: var(--background-color-contrast);
}

tbody.curves > tr > td.hideIcon.selected:after {
    background-color: var(--background-color-contrast-more);
}

/* Pin */
tbody.curves > tr > td.button-pin {
    position: relative;
    
    order: 5;
}

tbody.curves > tr > td.button-pin[data-pinned="true"]:before {
    background-color: var(--background-color);
    border-color: transparent;
}

tbody.curves > tr > td.button-pin[data-pinned="true"]:after {
    background-color: var(--font-color-primary);
}

tbody.curves > tr > td.button-pin svg {
    display: none;
}

/* Curve color */
tbody.curves > tr > td.curve-color {
    order: 0;
    align-self: flex-start;
    
    display: flex;
    box-sizing: border-box;
    justify-content: flex-end;
    align-items: center;
    flex: 38px 0 0;
    min-height: 50px;
    
    cursor: pointer;
}

tbody.curves > tr > td.curve-color button {
    box-sizing: border-box;
    flex: 16px 0 0;
    height: 16px;
    padding: 0;
    margin: 0 6px 0 0;
    
    border: none;
    border-radius: 8px;
    outline: none;
    
    color: inherit;
    background-color: currentColor;
    
    cursor: pointer;
}

/* Model name item */
tbody.curves > tr > td.item-line {
    order: 1;
    
    box-sizing: border-box;
    flex: auto 1 1;
    justify-content: flex-start;
    align-items: center;
    
    display: flex;
    
    color: var(--background-color-contrast-more);
    font-weight: 700;
    cursor: inherit;
}

tbody.curves > tr > td.item-line > span {
    flex: auto 0 0;
}

tbody.curves > tr > td.item-line.item-target > span:after {
    content: ':';
}

tbody.curves > tr > td.item-line > span:nth-child(1),
tbody.curves > tr > td.item-line > span + div {
    align-self: flex-start;
    
    display: flex;
    align-items: center;
    min-height: 50px;
    
    color: var(--font-color-primary);
}

tbody.curves > tr > td.item-line span {
    order: 2;
}

tbody.curves > tr > td.item-line div.phonename {
    order: 4;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: auto 1 1;
    padding: 0 6px 0 6px;
}

tbody.curves > tr > td.item-line div.variantName {
    position: relative;
    top: auto !important;
    
    flex: calc(100% - 52px) 0 0;
    height: 50px;
    
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 0 16px 0 0;

    color: var(--font-color-primary) !important;
    font-weight: 400;
    
    cursor: pointer !important;
}

tbody.curves > tr > td.item-line div.variantName:hover {
    text-decoration: underline;
}

tbody.curves > tr > td.item-line div.variantName[style*="color"] {
    font-weight: 700;
}

tbody.curves > tr > td.item-line span.variantPopout {
    position: relative;
    top: auto !important;
    left: auto !important;
    
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 36px 0 0;
    height: 36px;
    
    background-color: var(--background-color);
    border-radius: 6px;
    
    font-size: 0px;
    font-weight: 400;
    line-height: 1em;
    
    cursor: pointer;
}

tbody.curves > tr > td.item-line span.variantPopout[style*="display"] {
    background-color: var(--background-color);
}

tbody.curves > tr > td.item-line span.variantPopout:after {
    position: absolute;
    
    top: 0;
    left: 0;
    
    content: '';
    box-sizing: border-box;
    display: block;
    width: 36px;
    height: 36px;
    
    background-color: var(--background-color-contrast-more);
    mask: var(--icon-plus);
    -webkit-mask: var(--icon-plus);
    
    mask-size: 16px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 16px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    
    pointer-events: none;
}

tbody.curves > tr > td.item-line span.variantPopout[style*="display"]:after {
    background-color: var(--font-color-primary);
    display: none;
}

/* Variant ordering; pretty verbose because of DOM ordering, works up to 10 variants */
tbody.curves > tr > td.item-line div.variantName:nth-of-type(1) {
    order: 1;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(2) {
    order: 3;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(3) {
    order: 5;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(4) {
    order: 7;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(5) {
    order: 9;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(6) {
    order: 11;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(7) {
    order: 13;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(8) {
    order: 15;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(9) {
    order: 17;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(10) {
    order: 19;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(11) {
    order: 21;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(12) {
    order: 23;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(13) {
    order: 25;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(14) {
    order: 27;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(15) {
    order: 29;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(16) {
    order: 31;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(17) {
    order: 33;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(18) {
    order: 35;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(19) {
    order: 37;
}

tbody.curves > tr > td.item-line div.variantName:nth-of-type(20) {
    order: 39;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(1) {
    order: 2;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(2) {
    order: 4;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(3) {
    order: 6;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(4) {
    order: 8;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(5) {
    order: 10;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(6) {
    order: 12;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(7) {
    order: 14;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(8) {
    order: 16;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(9) {
    order: 18;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(10) {
    order: 20;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(11) {
    order: 22;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(12) {
    order: 24;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(13) {
    order: 26;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(14) {
    order: 28;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(15) {
    order: 30;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(16) {
    order: 32;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(17) {
    order: 34;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(18) {
    order: 36;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(19) {
    order: 38;
}

tbody.curves > tr > td.item-line span.variantPopout:nth-of-type(20) {
    order: 40;
}

tbody.curves > tr > td.item-line div.variants {
    position: relative;
    
    order: 2;
    align-self: flex-start;
    
    display: flex;
    align-items: center;
    flex: 20px 0 0;
    height: 50px;
    margin: 0 0 0 6px;
    
    border-radius: 50%;
    
    cursor: pointer;
    outline: none;
}

tbody.curves > tr > td.item-line div.variants:before {
    content: '';
    
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 20px 0 0;
    height: 20px;
    
    border: 1px solid currentColor;
    border-radius: 50%;
    
    color: currentColor;
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: 11px;
    line-height: 1em;
    text-transform: uppercase;
}

tbody.curves > tr > td.item-line div.variants:after {
position: absolute;
    top: 6px;
    left: 3px;
    
    content: '';
    
    box-sizing: border-box;
    display: block;
    width: calc(100% - 6px);
    height: calc(100% - 12px);
    
    background-color: currentColor;
    
    mask: var(--icon-plus);
    -webkit-mask: var(--icon-plus);
    mask-size: 16px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 16px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    
    pointer-events: none;
}

tbody.curves > tr > td.item-line div.variants path {
    display: none;
}

/* L+R line w/ svg */
tbody.curves > tr > td.channels {
    order: 2;
    
    flex: 100px 0 0;
}

tbody.curves > tr > td.channels svg.keyLine {
    height: 100px;
    width: auto;
    max-height: 40px;
}

tbody.curves > tr > td.channels text {
    fill: var(--background-color-contrast-more) !important;
    color: var(--background-color-contrast-more) !important;
    font-family: var(--font-secondary);
    font-size: 8px !important;
    text-transform: uppercase;
}

/* Shift graph input / Levels */
tbody.curves > tr > td.levels {
    order: 2;
    
    padding: 0 0 0 16px;
}

tbody.curves > tr > td.levels input {
    box-sizing: border-box;
    width: 70px;
    height: 36px;
    padding: 11px 6px 11px 0;
    
    background-color: var(--background-color-inputs);
    border: 1px solid var(--background-color-contrast-more);
    border-radius: 6px;
    outline: none;
    
    color: var(--font-color-inputs);
    font-family: var(--font-secondary);
    font-size: 11px;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
}

/* List lock controls */
tr.addPhone {
    display: none;
}



/*****
Secondary parts *****/

div.controls,
div.select {
    width: 100%;
    height: 100%;
    overflow: hidden;
    
    background-color: var(--background-color);
    border-right: 1px solid var(--background-color-contrast-more);
}

div.select {
    display: flex;
    flex-direction: column;
}

div.select > div.selector-panel {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

input.search {
    position: sticky;
    top: 0;
    
    flex: auto 0 0;
    
    box-sizing: border-box;
    height: 36px;
    padding: 10px 16px;
    margin: 16px 16px 0 16px;
    
    background-color: var(--background-color-inputs);
    border: 1px solid var(--background-color-contrast-more);
    border-radius: 6px;
    outline: none;
    
    color: var(--font-color-inputs);
    font-family: var(--font-secondary);
    font-size: 11px;
    line-height: 1em;
    text-transform: uppercase;
}

div.select > div.selector-tabs {
    position: relative;
    
    flex: auto 0 0;
    
    display: flex;
    padding: 16px;
    border-bottom: 1px solid var(--background-color-contrast);
}

div.select > div.selector-tabs button {
    box-sizing: border-box;
    flex: 100% 1 1;
    padding: 11px 0;
    margin: 0;
    
    background-color: var(--background-color);
    border: 1px solid var(--background-color-contrast-more);
    
    color: var(--accent-color-contrast);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 12px;
    line-height: 1em;
    
    cursor: pointer;
    outline: none;
}

div.select > div.selector-tabs button:nth-of-type(1) {
    border-right: none;
    border-radius: 6px 0px 0px 6px;
}

div.select > div.selector-tabs button:nth-last-of-type(1) {
    border-left: none;
    border-radius: 0 6px 6px 0;
}

svg.chevron,
svg.stop {
    display: none;
}

div.select > div.selector-panel > div.scroll-container {
    position: relative;
    flex: auto 1 1;
}

div.select > div.extra-panel {
    padding: 16px 16px 0 16px;
}

div.scrollOuter {
    
}

div.scrollOuter {
    position: absolute;
    top: 0;
    z-index: 1;
    
    box-sizing: border-box;
    width: calc(100% - 60px);
    height: 100%;
    
    background-color: var(--background-color);
    border-width: 0px;
    border-style: solid;
    border-color: var(--background-color-contrast-more);
    
    overflow-y: hidden;
    overflow-x: hidden;
    transform: none;
    transition: transform 0.3s ease-out, right 0.3s ease-out;
}

div.scrollOuter:before {
    position: absolute;
    top: 0;
    z-index: 1;
    
    content: '';
    
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    
    background-color: var(--background-color);
    
    opacity: 0.0;
    transition: opacity 0.1s ease-out;
    
    pointer-events: none;
}

div.scrollOuter[data-list="brands"] {
    left: 0;
    padding: 0 16px;
    
    border-right: 1px solid inherit;
}

div.scrollOuter[data-list="models"] {
    right: 0;
    
    padding: 0 10px 0 16px;
    
    border-left-width: 1px;
}

div.scroll {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 16px 0;
    
    overflow-y: auto;
    overflow-x: hidden;
}

/* List selected styles */
/* Brands selected */
div.select[data-selected="brands"] > div.selector-tabs button.brands {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    
    color: var(--font-color-secondary);
}

div.select[data-selected="brands"] div.scrollOuter[data-list="models"] {
    transform: translateX(calc(100% - 60px));
}

div.select[data-selected="brands"] div.scrollOuter[data-list="models"]:before {
    opacity: 0.8;
    pointer-events: all;
    cursor: pointer;
}

/* Models selected */
div.select[data-selected="models"] > div.selector-tabs button.models {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    
    color: var(--font-color-secondary);
}

div.select[data-selected="models"] div.scrollOuter[data-list="brands"]:before {
    opacity: 0.8;
    pointer-events: all;
    cursor: pointer;
}

div.select[data-selected="extra"] > div.selector-tabs button.extra {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    
    color: var(--font-color-secondary);
}

/* List item */
div.scroll > div {
    position: relative;
    
    box-sizing: border-box;
    min-height: 36px;
    padding: 11px 12px;
    overflow: hidden;
    
    background-color: var(--background-color) !important;
    border: none;
    border-radius: 6px;
    
    color: var(--font-color-primary);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5em;
    
    cursor: pointer;
}

div.scroll > div + div {
    margin-top: 6px;
}

div.scroll > div:hover {
    text-decoration: underline;
}

div.scroll div.active,
div.scroll div[style*="border"] {
    background-color: var(--accent-color-contrast) !important;
    
    color: var(--font-color-secondary);
}

div.scroll div.active:before {
    position: absolute;
    
    top: 0;
    right: 0;
    
    content: '';
    box-sizing: border-box;
    display: block;
    width: 36px;
    height: 36px;
    
    border-radius: 6px;
    
    pointer-events: none;
}

div.scroll div.active:after {
    position: absolute;
    
    top: 0;
    right: 0;
    
    content: '';
    box-sizing: border-box;
    display: block;
    width: 36px;
    height: 36px;
    
    background-color: var(--font-color-secondary);
    
    pointer-events: none;
}

div.scroll div.active:after {
    mask: var(--icon-remove);
    -webkit-mask: var(--icon-remove);
    
    mask-size: 16px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 16px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

div.scroll > div.phone-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
    width: calc(350px - 94px);
    padding: 0;
    
    border-right: none;
}

div.scroll > div.phone-item span {
    padding: 11px 12px;
}

/* Plus button */
div.scroll > div.phone-item div.phone-item-add {
    position: relative;
    
    box-sizing: border-box;
    flex: 36px 0 0;
    height: 36px;
    margin: 0 0px 0 auto;
    overflow: hidden;
    
    background-color: var(--background-color) !important;
    border-radius: 6px;
}

div.scroll > div.phone-item div.phone-item-add:before {
    position: absolute;
    top: 0;
    left: 0;
    
    content: '';
    
    box-sizing: border-box;
    display: block;
    width: 36px;
    height: 36px;
    background-color: var(--background-color-contrast-more);
    
    mask: var(--icon-plus);
    -webkit-mask: var(--icon-plus);
    mask-size: 16px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 16px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    
    pointer-events: none;
}

div.scroll div[style*="border"] div.phone-item-add {
    border-color: transparent !important;
}

/* Remove button */
/* Currently hidden because of a bug that adds multiple remove buttons; want to unhide when fixed */
div.scroll > div.phone-item > span.remove {
    position: relative;
    
    display: none;
    box-sizing: border-box;
    flex: 44px 0 0;
    height: 38px;
    margin: 0 3px 0 auto;
    
    background-color: var(--background-color-contrast) !important;
    border-radius: 4px;
    
    font-size: 0px;
}

div.scroll > div.phone-item > span.remove:before {
    position: absolute;
    top: 6px;
    left: 3px;
    
    content: '';
    
    box-sizing: border-box;
    display: block;
    width: calc(100% - 6px);
    height: calc(100% - 12px);
    background-color: var(--background-color-contrast-more);
    
    mask: var(--icon-remove);
    -webkit-mask: var(--icon-remove);
    mask-size: 16px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 16px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    
    pointer-events: none;
}

/* Hack to display remove button that appears inside the add button */
div.scroll > div.phone-item[style*="border"] div.phone-item-add {
    display: inherit;
    
    background-color: transparent !important;
    pointer-events: none;
}

div.scroll div[style*="border"] div.phone-item-add:before {
    display: none;
    pointer-events: none;
}

div.scroll div[style*="border"] div.phone-item-add span.remove {
    box-sizing: border-box;
    flex: 36px 0 0;
    height: 36px;
    
    border-radius: 6px;
    
    font-size: 0px;
    pointer-events: all;
}

div.scroll div[style*="border"] div.phone-item-add span.remove:before {
    position: absolute;
    top: 0px;
    left: 0px;
    
    content: '';
    
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--background-color-contrast-more);
    background-color: var(--font-color-secondary);
    
    mask: var(--icon-remove);
    -webkit-mask: var(--icon-remove);
    mask-size: 16px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 16px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    
    pointer-events: none;
    
    animation-name: remove-spin;
    animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes remove-spin {
    0% {
        transform: rotate(115deg);
    }
    100% {
        transform: rotate(0deg);
    }
}



/*****
Tutorial *****/

div.tutorial-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 1% 1.8% 3.2% 1.9%;
    
    pointer-events: none;
}

div.overlay-segment {
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 0;
    height: 100%;
    
    background-color: var(--accent-color);
    
    opacity: 0.0;
    
    transition: opacity 0.1s ease;
}

div.tutorial-buttons {
    position: relative;
    
    display: flex;
    align-items: flex-start;
    
    box-sizing: border-box;
    width: 100%;
    height: 45px;
    padding: 6px 0 0 16px;
    
    background-color: var(--background-color-graph);
    
    overflow-x: auto;
}

div.tutorial-buttons:after {
    content: '';
    display: inline-block;
    flex: 1px 0 0;
    height: 100%;
    background-color: transparent;
}

button.button-segment {
    position: relative;
    
    flex: auto 1 0;
    padding: 10px 16px;
    margin: 0;
    
    background-color: var(--background-color);
    background-color: transparent;
    border: 0;
    outline: none;
    
    color: var(--font-color-primary);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 12px;
    line-height: 1em;
    
    cursor: pointer;
}

button.button-segment:last-child {
    margin-right: 15px;
}

div.tutorial-description {
    display: flex;
    
    max-height: 0px;
    overflow: hidden;
    
    background-color: var(--background-color-graph);
    border-bottom: 1px solid var(--background-color-contrast-more);
    
    transition: max-height 0.2s ease-in-out;
}

section.parts-primary[tutorial-active="true"] div.tutorial-description {
    max-height: 500px;
}

article.description-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    
    order: 1;
    flex: auto 0 0;
    width: 100%;
}

article.description-segment p {
    padding: 16px;
    margin: 0 16px 16px 16px;
    
    flex: auto 1 1;
    max-width: 800px;
    
    color: var(--font-color-primary);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6em;
    text-align: center;
}

div.overlay-segment[tutorial-hover="true"] {
    opacity: 0.05;
}

section.parts-primary[tutorial-active="true"] div.overlay-segment[tutorial-on="false"] {
    opacity: 0.0;
}

div.overlay-segment[tutorial-on="true"] {
    opacity: 0.1;
}

button.button-segment[tutorial-on="true"] {
}

button.button-segment[tutorial-on="true"]:before {
    position: absolute;
    top: 0;
    left: 0;
    
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    
    background-color: var(--accent-color);
    border-radius: 100px;
    
    opacity: 0.1;
}

article.description-segment[tutorial-on="true"] {
    order: 0;
}



/*****
External links *****/

div.external-links {
    display: flex;
    align-items: flex-start;
    
    box-sizing: border-box;
    width: 100%;
    max-height: 69px;
    padding: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    
    border-top: 1px solid var(--background-color-contrast-more);
}

div.external-links:empty {
    display: none;
}

div.external-links:after {
    content: '';
    display: inline-block;
    flex: 16px 0 0;
    height: 1px;
}

div.external-links span {
    flex: auto 0 0;
    margin: 0 10px 0 0;
    
    color: var(--background-color-contrast-more);
    font-family: var(--font-secondary);
    font-size: 11px;
    line-height: 1em;
    text-transform: uppercase;
    line-height: 36px;
    
    white-space: nowrap;
}

div.external-links a + span {
    padding-left: 16px;
    margin-left: 16px;
    border-left: 1px dotted var(--background-color-contrast-more);
}

div.external-links a {
    flex: auto 0 0;
    
    box-sizing: border-box;
    min-width: 100px;
    padding: 11px 16px;
    
    background-color: var(--background-color);
    border: 1px solid var(--background-color-contrast);
    border-radius: 6px;
    
    color: var(--background-color-contrast-more);
    font-weight: 400;
    font-size: 12px;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    
    white-space: nowrap;
    cursor: pointer;
    outline: none;
}

div.external-links a.active {    
    color: var(--background-color-contrast);
    background-color: var(--background-color-contrast-more);
    border-color: var(--background-color-contrast-more);
}

div.external-links a + a {
    margin-left: 6px;
}



/*****
Accessories *****/

div.accessories {
    box-sizing: border-box;
    padding: 16px 0;
    
    border-top: 1px solid var(--background-color-contrast-more);
    background-color: var(--background-color);
}

div.accessories:empty {
    display: none;
}

div.accessories h2 {
    width: calc(100% - 32px);
    max-width: 660px;
    margin: 32px auto 16px auto;
    
    border-radius: 4px;
    
    color: var(--background-color-contrast-more);
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6em;
    text-transform: uppercase;
}

div.accessories p {
    width: calc(100% - 32px);
    max-width: 660px;
    margin: 16px auto;
    
    border-radius: 4px;
    
    color: var(--font-color-primary);
    font-size: 14px;
    line-height: 1.6em;
}

div.accessories p.center {
    max-width: 800px;
    
    color: var(--background-color-contrast-more);
    text-align: center;
}

div.accessories a,
div.accessories a:hover,
div.accessories a:visited {
    color: var(--background-color-contrast-more);
}

div.accessories-widgets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    padding: 0 16px 16px 0;
}

div.accessories-widgets .widget {
    flex: auto 0 0;
    
    margin: 16px 0 0 16px;
}



/*****
Restricted mode / Cash message style *****/

div.cashMessage {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    height: 100%;
    
    pointer-events: none;
    
}

div.cashMessage h2 {
    flex: auto 0 1;
    
    box-sizing: border-box;
    max-width: 600px;
    margin: 32px 32px 16px 32px;;
    
    font-weight: 700;
    font-size: 18px;
    line-height: 1em;
    
    text-align: center;
    
    pointer-events: all;
}

div.cashMessage p {
    flex: auto 0 1;
    
    box-sizing: border-box;
    max-width: 600px;
    margin: 16px 32px;
    
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5em;
    
    text-align: center;
    
    pointer-events: all;
}

div.cashMessage p:empty {
    display: none;
}

div.cashMessage p a {
    font-weight: 700;
    color: var(--accent-color);
}

div.cashMessage button {
    flex: auto 0 1;
    
    box-sizing: border-box;
    width: 200px;
    padding: 12px 16px;
    margin: 16px 32px 32px 32px;

    background-color: var(--accent-color-contrast);
    border-radius: 50px;
    border: none;
    outline: none;
    
    color: var(--accent-color);
    font-weight: 700;
    font-size: 12px;
    line-height: 1em;
    text-align: center;

    
    white-space: nowrap;
    cursor: pointer;
    pointer-events: all;
    
    animation-name: cash-fine;
    animation-duration: 0.3s;
    animation-delay: 1.0s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    
    opacity: 0.0;
}

@keyframes cash-fine {
    0% {
        opacity: 0.0;
        transform: translateY(10px);
    }
    
    100% {
        opacity: 1.0;
        transform: translateY(0px);
    }
}

div.cashMessage button:active {
    background-color: var(--accent-color);
    color: var(--font-color-secondary);    
}

div.fadeAll {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    
    width: 100%;
    height: 100%;
    
    background-color: var(--background-color);
    
    opacity: 0.9;
    
    cursor: pointer;
    
    animation-name: cash-in;
    animation-duration: 0.1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes cash-in {
    0% {
        opacity: 0.0;
    }
    
    100% {
        opacity: 0.97;
    }
}

div.fadeAll:before {
    position: absolute;
    top: 12px;
    right: 22px;
    
    content: '';
    
    box-sizing: border-box;
    display: block;
    width: 44px;
    height: 38px;
    
    background-color: var(--background-color-contrast);
    border-radius: 4px;
    
    pointer-events: none;
}

div.fadeAll:after {
    position: absolute;
    top: 12px;
    right: 22px;
    
    content: '';
    
    box-sizing: border-box;
    display: block;
    width: 44px;
    height: 38px;
    
    background-color: var(--background-color-contrast-more);
    
    mask: var(--icon-remove);
    -webkit-mask: var(--icon-remove);
    mask-size: 20px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 20px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    
    pointer-events: none;
}

div.cash {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 100%;
    height: 100%;
    
    font-family: var(--font-secondary);
    font-size: 30vh;
    font-weight: 700;
    line-height: 1em;
    
    cursor: pointer;
}



/*****
Responsive styles *****/

@media ( max-width: 1000px ) {
    ::-webkit-scrollbar {
        width: 0px;
    }
    
    body {
        overflow: hidden;
    }
    
    
    main.main {
        position: relative;
        
        display: block;
        overflow: hidden;
    }
    
    section.parts-primary {
        position: relative;
        
        order: 1;
        height: 100%;
        overflow-y: auto;
    }
    
    section.parts-primary:after {
        content: '';
        
        display: block;
        height: 84px;
    }
    
    div.graphBox {
        top: 0;
        z-index: 2;
        padding-bottom: 8px;
    }
    
    div.graph-sizer {
        margin: 8px auto 0 auto;
    }
    
    div.targets {
        
    }
    
    div.manage {
        position: relative;
        /* background-color: var(--background-color-contrast); */
    }
    
    div.manage:before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        
        background-color: var(--background-color-contrast-more);
        pointer-events: none;
        
        opacity: 0.0;
        transition: opacity 0.2s ease-in 0.2s;
    }
    
    table.manageTable {
        min-height: calc( 100vh - ((100vw * 0.44) + 92px) );
    }
    
    tbody.curves > tr {
        border-top: 1px solid var(--background-color);
    }
/*
    
    tbody.curves > tr > td.button-baseline:before,
    tbody.curves > tr > td.hideIcon:before,
    tbody.curves > tr > td.button-pin[data-pinned="true"]:before,
    tbody.curves > tr > td.button:before,
    tbody.curves > tr > td.button-pin:before,
    tbody.curves > tr > td.remove:before,
    tbody.curves > tr > td.hideIcon.selected:before {
        border: 1px solid var(--background-color);
        background-color: var(--background-color-contrast);
    }
*/
    
    tbody.curves > tr > td.hideIcon.selected:before,
    tbody.curves > tr > td.button-pin:before,
    tbody.curves > tr > td.remove:before {
        border: 1px solid var(--background-color);
        background-color: var(--background-color-contrast);
    }
    
    tbody.curves > tr > td.button-baseline:before,
    tbody.curves > tr > td.hideIcon:before,
    tbody.curves > tr > td.button-pin[data-pinned="true"]:before {
        background-color: var(--background-color-contrast);
    }
    
    section.parts-secondary {
        position: absolute;
        top: 0;
        z-index: 1;
        
        order: 2;
        width: 100%;
        height: calc(100% - ((100vw * 0.44) + 92px));
        min-height: 200px;
        margin-top: 0px;
        
        border-right: none;
        border-top: 1px solid var(--background-color-contrast-more);
        border-radius: 16px 16px 0 0;
        
        transition: all 200ms ease-in;
        transform: translateY(calc( (100vw * 0.44) + 92px ));
    }
    
    div.controls {
        border-radius: 16px 16px 0 0;
    }
    
    div.controls:before {
        position: absolute;
        top: 6px;
        left: 0;
        right: 0;
        
        content: '';
        display: block;
        margin: auto;
        
        width: 60px;
        height: 4px;
        
        background-color: var(--background-color-contrast-more);
        border-radius: 6px;
        
        pointer-events: none;
    }
    
    div.scroll > div.phone-item {
        width: calc(100vw - 94px);
    }
    
    tbody.curves:empty:before {
        content: 'Select a model from the list below to graph its frequency response';
    }
    
    tr.mobile-helper {
        position: relative;
        
        display: block;
        padding: 16px;
    }
    
    tr.mobile-helper:before {
        z-index: 1;
        
        content: 'Browse all graphs';
        display: block;
        
        box-sizing: border-box;
        width: 100%;
        height: 36px;
        padding: 11px 16px;
        
        background-color: var(--background-color);
        border: 1px solid var(--background-color-contrast-more);
        border-radius: 6px;
        
        color: var(--font-color-primary);
        font-size: 12px;
        line-height: 1em;
        text-align: center;
        
        cursor: pointer;
    }
    
    tr.mobile-helper:after {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        
        content: '';
        display: block;
        
        box-sizing: border-box;
        width: 100%;
        height: 36px;
        margin-top: 16px;
        
        background-color: var(--background-color-contrast-more);

        mask: var(--icon-plus);
        -webkit-mask: var(--icon-plus);
        mask-size: 16px;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-size: 16px;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: right 26px center;
        
        cursor: pointer;
    }
    
    /* Primary panel focused */
    main.main[data-focused-panel="primary"] div.manage:before {
        opacity: 0.0;
    }
    
    main.main[data-focused-panel="primary"] section.parts-secondary {
        transform: translateY(calc( ((100vw * 0.44) + 92px) + 100% - 84px ));
        
        animation-name: graph-drawer-hide;
        animation-duration: 0.4s;
        animation-timing-function: ease-in;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }
    
    @keyframes graph-drawer-hide {
        0% {
            transform: translateY(calc( (100vw * 0.44) + 92px ));
        }
        75% {
            transform: translateY(calc( ((100vw * 0.44) + 92px) + 100% - 84px ));
        }
        85% {
            transform: translateY(calc( ((100vw * 0.44) + 92px) + 100% - 74px ));
        }
        100% {
            transform: translateY(calc( ((100vw * 0.44) + 92px) + 100% - 84px ));
        }
    }
    
    main.main[data-focused-panel="primary"] section.parts-secondary div.select:before {
        animation-name: all-graphs-bounce;
        animation-duration: 0.3s;
        animation-iteration-count: 1;
        animation-delay: 0.3s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
    
    @keyframes all-graphs-bounce {
        0% {
            margin: -36px 16px 0 16px;
        }
        100% {
            margin: 16px 16px 32px 16px;
        }
    }
    
    /* Secondary panel focused */
    main.main[data-focused-panel="secondary"] section.parts-primary {
        overflow: hidden;
    }
    
    main.main[data-focused-panel="secondary"] div.manage:before {
        opacity: 0.8;
        transition: opacity 0.2s ease-in 0.0s;
    }
    
    main.main[data-focused-panel="secondary"] section.parts-secondary {
        animation-name: graph-drawer-show;
        animation-duration: 0.4s;
        animation-timing-function: ease-in;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }
    
    @keyframes graph-drawer-show {
        0% {
            transform: translateY(calc( ((100vw * 0.44) + 92px) + 100% - 84px ));
        }
        75% {
            transform: translateY(calc( (100vw * 0.44) + 92px ));
        }
        85% {
            transform: translateY(calc( (100vw * 0.44) + 102px ));
        }
        100% {
            height: calc(100% - ((100vw * 0.44) + 92px));
            min-height: 200px;
            transform: translateY(calc( (100vw * 0.44) + 92px ));
        }
    }

}

@media ( max-width: 1470px ) {
        /*****
    Alt header mobile *****/

    button.header-button {
        box-sizing: border-box;
        display: block;
        flex: 36px 0 0;
        height: 36px;
        margin: 0 0 0 6px;

        background-color: var(--header-menu-icon-color);
        mask: var(--icon-hamburger);
        -webkit-mask: var(--icon-hamburger);
        mask-size: 20px;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-size: 20px;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;

        cursor: pointer;
    }

    div.logo {
        flex: auto;
        margin: 0 42px 0 0;
    }
    
    div.logo a {
        width: 80%;
    }

    ul.header-links {
        position: fixed;
        top: 49px;
        left: 0;
        z-index: 2;

        width: 100%;
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: center;

        box-sizing: border-box;
        height: calc(100vh - 49px);
        max-height: -webkit-fill-available;
        padding: 0 16px 16px 16px;

        background-color: var(--background-color);

        transform: translateX(-100vw);
        
        overflow-x: hidden;
        overflow-y: auto;
    }

    ul.header-links li {
        text-align: center;
        margin: 16px 0 0 0;
    }

    ul.header-links li + li {
        margin: 32px 0 0 0;
    }

    ul.header-links li a {
        display: block;
        padding: 16px;
        color: var(--font-color-primary);
    }

    header.header[data-links="collapsed"] ul.header-links {
        transform: translateX(-100vw);
        transition: transform 0.2s ease;
    }

    header.header[data-links="expanded"] ul.header-links {
        transform: translateX(0vw);
        transition: transform 0.2s ease;
    }
}

/* Move table items to two rows for narrow browsers */
@media ( max-width: 1200px ) {
    tbody.curves > tr {
        flex-wrap: wrap;
    }
    
    tbody.curves > tr > td.curve-color {
        order: 2 !important;
    }
    
    tbody.curves > tr > td.item-line {
        flex: 100% 0 0 !important;
        padding: 0 16px !important;
        
/*        border-bottom: 1px solid var(--background-color-contrast);*/
    }
    
    tbody.curves > tr > td.item-line div.phonename {
        padding-right: 0px !important;
    }
    
    tbody.curves > tr > td.channels {
        margin-right: auto;
    }
    
    tbody.curves > tr > td.levels {
        margin-left: auto;
    }
    
    tbody.curves > tr > td.button-baseline {
    }
    
    tbody.curves > tr > td.remove {
    }
}

/* Move phones list to two columns for wide browsers */
@media ( min-width: 1500px) and ( min-aspect-ratio: 2/1 ) {
    section.parts-secondary {
        flex: 600px 0 0;
    }
    
    div.select > div.selector-panel > div.scroll-container {
        display: flex;
        max-height: 100%;
    }
    
    div.scrollOuter {
        position: relative;
        
        display: flex;
        
        flex: 50% 1 1;
    }
    
    div.scroll {
        position: relative;
        
        flex: 50% 1 1;
    }
    
    div.scrollOuter[data-list="brands"]:before,
    div.scrollOuter[data-list="models"]:before {
        display: none;
    }
    
    div[data-selected="brands"] div.scroll#phones {
        transform: none;
        transition: none;
    }
}

/* Yeet table items for narrow screens */
@media ( max-width: 500px) {
    
    tbody.curves > tr:before {
        order: 5;
        
        content:'';
        display: block;
        flex: 100% 1 1;
        
        height: 0px;
    }

    tbody.curves > tr > td.item-line {
    }
    
    tbody.curves > tr > td.curve-color {
    }
    
    tbody.curves > tr > td.channels {
        order: 3;
    }
    
    tbody.curves > tr > td.levels {
        order: 4;
        
        margin-right: 16px;
    }
    
    tbody.curves > tr > td.button-baseline {
        margin-left: auto;
    }
    
    tbody.curves > tr > td.button-baseline,
    tbody.curves > tr > td.hideIcon,
    tbody.curves > tr > td.button-pin {
        order: 5;
    }
}

/*@media ( max-height: 500px ) and ( orientation: landscape ) {*/
@media ( max-height: 500px ) and ( min-aspect-ratio: 3 / 2 ) {
    header.header {
        display: none;
    }
    
    body:not([data-input-state="focus"]) section.parts-primary {
        z-index: 3;
        
        flex: 100vh 1 1 !important;
        max-height: -webkit-fill-available;
    }
    
    body:not([data-input-state="focus"]) section.parts-secondary {
        display: none;
    }
    
    body:not([data-input-state="focus"]) div.graph-sizer {
        position: fixed;
        z-index: 5;
        top: 0;
        left: 0;
        
        display: flex;
        justify-content: center;
        align-items: center;
        
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
        max-width: none;
        max-height: -webkit-fill-available;
        margin: 0;
        
        background-color: var(--background-color);
    }
    
    body:not([data-input-state="focus"]) svg#fr-graph {
        width: 100%;
        
        pointer-events: none;
    }
}

/*****
Embed mode *****/
body[embed-mode="true"] header.header {
    display: none;
}

body[embed-mode="true"] section.parts-primary {
    z-index: 3;

    flex: 100vh 1 1 !important;
    max-height: -webkit-fill-available;
}

body[embed-mode="true"] section.parts-secondary {
    display: none;
}

body[embed-mode="true"] div.graph-sizer {
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;

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

    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: -webkit-fill-available;
    margin: 0;

    background-color: var(--background-color);
}

body[embed-mode="true"] svg#fr-graph {
    width: 100%;

    pointer-events: none;
}