:root {
  --phonenamedivh: black;
  --phonenamedivh_bg: white;
  --variantname: black;
  --variantnameh: #333;
  --td: black;
  --html_bg: #e5e5e5;
  --graphtool_fg: black;
  --graphtool_bg: white;
  --graphtitle: black;
  --remove: #44292a;
  --remove_hover: #813;
  --add_buttons: #75758a;
  --add_buttons_hover: #371;
  --help_text: #75758a;
  --helptip: #f0f5f2;
  --helptip_bg: #1f2120;
  --add_phone_lock_bd: #371;
  --phone_name: #a61;
  --button: #34170b;
  --button_bg: #d0d0d0;
  --button_hover: #124;
  --bhba_bd: #9ac;
  --bhba: #124;
  --bs_bg: #dd9;
  --dbutton: #333;
  --dbuttonh: #000; 
  --dbutton_bd: #e5e5e5;
  --dbuttons: #f33;
  --dbutton_hideh: #359;
  --download: #3d130b;
  --expand_tools: #382d28;
  --dvariants: #3d332a;
  --dvariantsh: #124;
  --inspector: #266149;
  --ranktools_bg: #ffdead;
  --modcopy_bg: #d6f5d6;
  --eqtools_bg: #ade1ff;
  --toolsdiv: #170b08;
  --targetlabel: #5f5853;
  --target_tu: #736960;
  --target_t: #1c1307;
  --targeth_bg: none;
  --target_tdc: #665f1e;
  --target_bg: #e3dfe0;
  --modal_bg: white;
  --modalb: #ddd;
  --modalbh: #ccc;
  --modal_border: black;
  --progbar_bg: #ddd;
  --managetable_bbc: #191b1f;
  --toolsb: #34170b;
  --toolsb_bg: #e0ded1;
  --dtools_bg: #dce3df;
  --addphone_sel: black;
  --addlock: #75758a;
  --addlock_hover: #160;
  --expandtools_span_bg: #333;
  --tr_bg: #d7e0e0;
  --key_bg: #d7e0e0;
  --search_bg: #e3e2e1;
  --pinmark: #726d63;
  --scrolldiv_blc: #101112;
  --dselect_bbc: #101112;
  --chevron: #101112;
  --input_bg: #fff;
  --input: #333;
  --bg_png: url('eggshell.png');
  --dbscaler: #404c50;
  --keyonly: #555049;
  --keyonlyh: #124;
  --scrolldiva: #5ce;
  --scrolldivh: #fd0;
  --scrolldivh_bg: #cccaad;
  --phonename: black;
  --phonename_div: rgba(238,238,238,0.7);  /* ?? */
} 

noscript { position:absolute; left:0; right:0; font-size:6em; text-align:center; }
/* html { background: var(--html_bg); } */
.graphtool  { font-size:initial; color: var(--graphtool_fg); background: var(--graphtool_bg); transition: background-color .4s ease-in-out;}
.graphBackground { fill: var(--graphtool_bg); transition: fill .4s ease-in-out; }
.main { min-height:100vh; display:flex; flex-direction:column; }
.graphBox { width:-webkit-fill-available; }
#fr-graph { width:auto; max-width:100%; user-select:none; -moz-user-select: none; -webkit-user-select:none; -ms-user-select:none;}
svg text { cursor:default; user-select:none;}
.controls { max-height: 882px;
            flex:auto; 
            display:flex;   
            flex-flow:row-reverse wrap;
            background-image: var(--bg_png); } 
/*min-height:50vh; */
.controls>div { margin:2px; font-size:inherit; }
.manage,.select { flex:1; }
.select { display:flex; flex-direction:column; border-bottom:2px solid; border-bottom-color: var(--dselect_bbc); }
.select>div { flex:auto; display:flex; position:relative; }
.tools {
    display:flow-root; flex-wrap:wrap; justify-content:space-around;
    align-items:center; padding:0.2em 0.2em; margin:-0.5em 1vw 0;
    border-radius:8px; background: var(--dtools_bg); font-size: smaller;
    border:1px solid #aca;
    position:relative;
}

@media (prefers-color-scheme: dark) {

  img {
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}

@media only screen and (max-width:70em) {
    @media (max-aspect-ratio:5/3) {
        .controls { flex-flow:column; }
        .manage { flex:0; }
        .controls>div.manage { margin-bottom:0.2em; }
    }
    @media not (max-aspect-ratio:5/3) , (max-width:40em) {
        #fr-graph { margin:0 auto; }
        .controls>div { margin:0; }
    }
}
@media only screen and (min-aspect-ratio:9/4) {
    .main { flex-direction:column; }
    .graphBox { margin:auto; }
    #fr-graph { width:auto; max-width:100%; }
.controls { min-height:50vh; flex:auto; display:flex; flex-flow:row-reverse wrap; }
.controls>div { margin:1px; font-size:inherit; }
}

path.sample { stroke-width:1.9px; opacity:0.8; }
path.highlight { stroke-width:3.3px; }
tr.highlight { box-shadow:inset 0 0 1.5em 0.2em; }
td { color: var(--td); vertical-align:middle; }

.dBScaler { opacity:0.4; fill: var(--dbscaler); }
.dBScaler circle,.dBScaler rect { cursor:move; }
.dBScaler:hover,.dBScaler.active { opacity:1; }

body { margin:0px; height:20px; }
table { border-collapse: collapse; }
tr,td { padding:0px; }
.manageTable { width:100%; position:relative; z-index:1; }
.manageTable tr:not(.addPhone) { font-size:0.90em; border-bottom: 2px solid; border-bottom-color: var(--managetable_bbc); }

.remove {
    cursor:pointer; text-align:center; color: var(--remove); position:relative;
    background-size:contain; background-repeat:no-repeat;
}
.remove:hover { color: var(--remove_hover); }
span.remove { float:right; font-size:95%; width:1em; }
.remove svg { width:0.7em; position:absolute; left:0; bottom:0; user-select:none; }
.remove svg:hover circle { fill:#fc0; }

.addButton,
td.remove       { width:1.4em; font-size:120%; padding-left:0.08em; }
/*.phoneId*/
.key            { width:16%; }
.calibrate      { width:2.5em; }
.baselineButton { width:2.5em; }
.hideButton     { width:2em; }
.lastColumn     { width:2.2em; }

.addPhone { height:1.8em; }
.addPhone:after {
  border:2px dashed #99a; content:''; box-sizing:border-box;
  position:absolute; left:0; right:0; bottom:0; height:calc(1.8em - 2px);
  pointer-events:none;
}
.addButton,.addLock { cursor:pointer; text-align:center; color: var(--add_buttons); }
.addButton:hover { color: var(--add_buttons_hover); }
.helpText { color: var(--help_text); font-style:italic; font-size:0.7em; padding:0.1em 0.3em 0 0; }
.addPhone.selected { background: var(--addphone_sel); }
.addLock { font-size:0.8em; color: var(--addlock); padding-right:0.3em; }
.addLock:hover,.addPhone.locked .addLock { color: var(--addlock_hover); }
.addPhone.locked:after { border-color: var(--add_phone_lock_bd); }

/* For headphone as opposed to brand in current headphone table */
.phonename {font-weight:bold; display:inline; position:relative; color: var(--phonename);}
.phonename div {
    position:absolute; top:0; white-space:nowrap;
    z-index:2; cursor:pointer; height:1.3em;
    background: var(--phonename_div);
}
.variantName { 
left:-3px; padding-left:1px; border-left:2px solid black; color: black;
}
.variantPopout { opacity:0.9; color: black;}

.variants {
    float:right; width:0.95em; margin-right:0.3em;
    color: var(--dvariants); cursor:pointer; outline:none;
}
.variants:hover { color: var(--dvariantsh); }

.phonename div:hover { background: var(--phonenamedivh_bg); color: var(--phonenamedivh); }

.keyLine { max-height:2.3em; display:block; vertical-align:center; }
.keyLine path {
    stroke-width:0.3vw; vector-effect:non-scaling-stroke;
    fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.keySel rect,.keySelBoth { cursor:pointer; color: white;}

.pinMark { float:right; width:80%; margin-right:-8.6%; margin-bottom:0.6em; }
.pinMark path { stroke: var(--pinmark); }

tr { background: var(--tr_bg); }
.keyBackground { stroke: var(--key_bg); }
.scrollOuter { flex:1; position:relative; }
.scroll { overflow:auto;
    position:absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0;
    display:flex; 
    flex-direction:column;
}
.scroll div { background:content-box; border-left-color: var(--scrolldiv_blc); border-left:0.3em; padding-left:0.2em; cursor:pointer; }
.scroll div:hover,.scroll div.active { background: var(--scrolldivh_bg); }
.scroll div.active { border-left:0.3em solid var(--scrolldiva); }
.scroll div:hover  { border-left:0.3em solid var(--scrolldivh); }

.search {
    flex:none;
    padding:2px; padding-left:1.2em; height:1.5em; line-height:1.3em;
    border:1px solid #bbb;
    background: var(--search_bg);
}
.search,input[type=number] { box-shadow:inset 0 0.1em 0.3em #ccefff; background-color: var(--input_bg); color: var(--input); }
select { background-color: var(--input_bg); color: var(--input); }
.chevron { height:1.3em; width:0.9em; position:absolute; top:-1.3em; fill: var(--chevron); }
.stop { height:0.35em; position:absolute; right:0; bottom:0; fill:#1c2126; }

button {
    border:none; background: var(--button_bg); position:relative;
    height:1.5em;
    color: var(--button);
    font-size: smaller;
}
#download { font-weight:bold; color: var(--download); }
#expandTools { color: var(--expand_tools); }
button:hover,#expandTools:hover,#download:hover { color: var(--button_hover); }
button:hover:before,button:hover:after { border-color: var(--bhba_bd); color: var(--bhba); }
button:before,button:after {
  border:1px groove #e1e8a3; content:'';
  position:absolute; top:0; bottom:0; width:0.3em;
}
button:before { border-right:0; left:0; }
button:after { border-left:0; right:0; }
button.selected { background-color: var(--bs_bg); }

.button {
    cursor:default;
    text-decoration: none;
    color: var(--dbutton); text-align:center; line-height:1.15;
    border-left:2px solid; color var(--dbutton_bd);
}
.button:hover { color: var(--dbuttonh); }
.button.selected { background-color: var(--dbuttons); }
/*
.button:active { color: var(--dbuttons); }
.button:visited { color: var(--dbutton); }
*/

.button svg { display:block; margin:auto 0em; }

.button.hideIcon.selected { background:none; background-color: var(--dbuttons); } 
.button.hideIcon:hover { color: var(--dbuttonh); } 

.button.pinIcon.selected { background:none; background-color: var(--dbuttons); } 
.button.pinIcon:hover { color: var(--dbuttonh); } 

.keyOnly { fill: var(--keyonly); }
.keyOnly:hover { fill: var(--keyonlyh); }
.keyCLabel { fill: var(--keyonly); }
.keyCLabel:hover { fill: var(--keyonlyh); }
.imbalance { fill:#e11; font-weight:bold; pointer-events:none; }

input[type=number] { width:auto; border:1px solid #899174; height:1.5em; }
.curves input[type=number] { display:block; margin-left:auto; margin-right:auto; }

.lineLabel { pointer-events:none; }
.lineLabel rect { fill:rgba(255,255,255,0.6); }

.inspector { pointer-events:none; }
.inspector line { stroke-width:0.8px; stroke: var(--inspector); }

.tools * { display:inline-block;
           transition: 400ms ease-in-out; }
.tools button { color: var(--toolsb); background: var(--toolsb_bg); }
#.zoom button { min-width:4em; }
.rankTools {
    background-color: var(--ranktools_bg); font-weight:normal; border-radius:7px; padding: inherit;
}
.modCopy {
    background-color: var(--modcopy_bg); font-weight:normal; border-radius:7px; padding: inherit;
}
.eqTools {
    background-color: var(--eqtools_bg); font-weight:normal; border-radius:7px; padding: inherit;
}
.tools div { color: var(--toolsdiv); }
.normalize span:not(.helptip) { padding-right:0.3em; }
#norm-phon { width:2.8em; }
#norm-fr { width:4em; }
.tools input:invalid { background:#fbb; }
/*
.normalize div.selected { margin-bottom:-3px; border-bottom:3px solid #261811; background:#cde4aa; }
.normalize div span { cursor:pointer; }
*/
#expandTools { display:none; height:1.5em; }

@media only screen and (max-width:60em) {
    .tools { padding-right:3em; }
    #expandTools { display:inline-block; position:absolute; right:0.2em; top:0.1em; }
    .tools.collapseTools .normalize,
    .tools.collapseTools .smooth,
    .tools.collapseTools .rankTools,
    .tools.collapseTools .modCopy,
    .tools.collapseTools .eqTools,
    .tools.collapseTools .zout,
    .tools.collapseTools .miscTools { display:none; }
/*    .tools.collapseTools .miscTools button:not(#download) { display:none; } */
    @media screen and (max-width:30em) {
        .tools.collapseTools .zoom { display:none; }
    }
    .targets.collapseTools { display:none; }
}

.helptip {
    position:relative; margin-left:-0.15em;
    width:1em; height:1em; border-radius:50%;
    background:#b3bfba; border:0.15em solid #b3bfba;
    text-align:center; font-weight:bold; cursor:default;
    color: var(--helptip);
}
.helptip span {
    visibility:hidden;
    position:absolute; left:70%; bottom:70%; z-index:8;
    width:16rem; max-width:100vw; padding:0.5em;
    border-radius:0.6em; border-bottom-left-radius:0;
    background-color: var(--helptip_bg); font-weight:normal;
}
.helptip:hover span,.helptip.active span { visibility:visible; }
@media only screen and (max-width:40em) {
    .helptip { position:static; }
    .helptip span {
        left:0; bottom:0; width:calc(100% - 1.25em);
        border-bottom-left-radius:0.6em;
    }
}
.targetClass {
    display:flex; flex-grow:1; flex-wrap:wrap; position:relative;
    padding:0.1em 0 0.4em; justify-content:space-around;
    background:#f6f2f3; border-radius:7px; margin:0 2px;
    border:1px solid #bab;
}
.UL {
    text-decoration: underline; cursor: pointer;
}
.targets {
    display:flex; flex-wrap:none; position:relative;
    width:100%; font-size:smaller; margin-bottom:6px;
    padding-bottom:1em;
}
.targetLabel {
    position:absolute; bottom:0; left:0; right:0; text-align:center;
    font-size:0.8em; color: var(--targetlabel);
    z-index:1;
}
.targetClass .targetLabel span { background: var(--target_bg); border-radius:2px; }
.targetClass,.targetClass .targetLabel span { background: var(--target_bg); }
.targetClass .targetLabel { bottom:-0.7em; }
.target span { font-size:1.1em; }
.target { cursor:pointer; z-index:1; text-decoration:underline var(--target_tu); color: var(--target_t); border-radius:2px; }
.target:hover { background: var(--targeth_bg); text-decoration-color: var(--target_tdc); }

*, *::after, *::before {
  box-sizing: border-box;
}

.modal {
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translate(-50%, 0%) scale(0);
  transition: 400ms ease-in-out;
  border: 1px solid;
  border-color: var(--modal_border);
  border-radius: 10px;
  z-index: 10;
  background: var(--modal_bg);
  max-width: 90%;
  width: 90%;
  padding: 3px 3px;
  overflow:auto;
}

.modal.active {
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  padding: 8px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid  var(--modal_border);;
}

.modal-header .title{
  font-size: 1.25rem;
  font-weight: bold;
  padding: 8px 5px;
}

.modal-header .close-button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 1.25rem;
  font-weight: bold;
}

.dapmodal-body {
  padding: 5px;
  height: 300px;
/*  background: white; */
  background-color: var(--modal_bg); */
  transition: 400ms ease-in-out;
  overflow: auto;
/*  background-image: var(--bg_png); */
  cursor: pointer;
}

.dapmodal-body div:hover {
/*  background-color: var(--modalb); */
}

.dapmodal-body div:active {
/*  background-color: var(--modalbh); */
}

.modal-body {
  font-size: 1.10rem;
  color: var(--graphtool_fg);
  padding: 5px;
  padding-bottom: 2em;
  width: 100%;
  height: 100%;
  transition: 400ms ease-in-out;
  overflow: auto;
  background-image: var(--bg_png);
  cursor: pointer;
  display: block;
}

.modal-body div:hover {
/*  background-color: var(--modalb);  */
}

.modal-body div:active {
/*  background-color: var(--modalbh);  */
}

.slidepanel  {
  width: 100%;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 0px;
  transition: 400ms ease-in-out;
  border: 1px solid;
  border-color: var(--modal_border);
  border-radius: 10px;
  background: var(--modal_bg);
  padding: 3px 3px;
  opacity: 100%;
  height: 0%;
  overflow: hidden;
}

.slidepanel div { color: var(--graphtool_fg);}

.image-center {
  text-align:center;
  width:100%;
  display:block;
  margin:auto;
}

#progBar {
  width: 100%;
  background-color: var(--progbar_bg);
}

#myBar {
  width: 0%;
  height: 4px;
  background-color: #ff0000;
}

.header {
 background-color: rgba(0, 0, 0, 1.0);
 padding: 1px;
 padding-left: 20px;
}

.footer {
 background-color: rgba(0, 0, 0, 1.0);
 font-family: Arial;
 font-size: 12px;
 padding: 10px;
 padding-left: 100px;
 color: white;
}


#expandTools {
  width: 20px;
  height: 15px;
  margin: 3px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#expandTools span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 3px;
  opacity: 1;
  left: 0;
  background: var(--expandtools_span_bg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#expandTools span:nth-child(1) {
  top: 0px;
}

#expandTools span:nth-child(2),#expandTools span:nth-child(3) {
  top: 6px;
}

#expandTools span:nth-child(4) {
  top: 12px;
}

#expandTools.open span:nth-child(1) {
  top: 6px;
  width: 0%;
  left: 50%;
}

#expandTools.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#expandTools.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#expandTools.open span:nth-child(4) {
  top: 6px;
  width: 0%;
  left: 50%;
}

.mode { margin: 3px auto; }

.scrollcurves {
    max-height: 400px;
    overflow:auto;
}

/*For stand-alone-headed page?... */
.graphTitle { fill: var(--graphtitle); }

.darkmode {
  --phonenamedivh: black;
  --phonenamedivh_bg: green;
  --variantname: white;
  --variantnameh: #ccc;
  --td: white;
  --html_bg: #595959;
  --graphtool_fg: white;
  --graphtool_fg: white;
  --graphtool_bg: black;
  --graphtitle: white;
  --bg_png: url('darkshell.png');
  --remove: #ecdfe0;
  --remove_hover: #bc8f93;
  --add_buttons: #b8b8c6;
  --add_buttons_hover: #bff2a6;
  --help_text: #babac4;
  --helptip: #334d3d;
  --helptip_bg: #cacecc;
  --add_phone_lock_bd: #cff5bc;
  --phone_name: #fae8d1;
  --button: #f6dfd5;
  --button_bg: #111004;
  --button_hover: #d6e0f5;
  --bhba_bd: #3c4f77;
  --bhba: #d6e0f5;
  --bs_bg: #4d4d19;
  --dbutton: #ccc;
  --dbuttonh: #fff;
  --dbutton_bd: #333;
  --dbuttons: #e60000;
  --dbutton_hideh: #359;
  --download: #f3c7be;
  --expand_tools: #e0d6d2;
  --dvariants: #e0d8d2;
  --dvariantsh: #d6e0f5;
  --inspector: #daf1e8;
  --ranktools_bg: #663d00;
  --modcopy_bg: #145214;
  --eqtools_bg: #003554;
  --toolsdiv: #f2ded9;
  --targetlabel: #e7e5e4;
  --target_tu: #dcd9d5;
  --target_t: #faf3eb;
  --targeth_bg: none;
  --target_tdc: #e8e2b0;
  --target_bg: #222;
  --modal_bg: black;
  --modalb: #333;
  --modalbh: #222;
  --modal_border: white;
  --progbar_bg: #333;
  --managetable_bbc: #d5d7dd;
  --toolsb: #f2cfc0;
  --toolsb_bg: #2e2c1f;
  --dtools_bg: #222a26;
  --addphone_sel: black;
  --addlock: #778;
  --addlock_hover: #bfffb3;
  --expandtools_span_bg: #ccc;
  --tr_bg: #212b2b;
  --key_bg: #212b2b;
  --search_bg: #1a1a19;
  --pinmark: #b8b4ad;
  --scrolldiv_blc: #e4e6e7;
  --dselect_bbc: #e4e6e7;
  --chevron: #e4e6e7;
  --input_bg: #000;
  --input: #ddd;
  --dbscaler: #c6cfd2;
  --keyonly: #c4c0ba;
  --keyonlyh: #adc2eb;
  --scrolldiva: #0b5e75;
  --scrolldivh: #998500;
  --scrolldivh_bg: #2f2e1d;
  --phonename: white;
}