* { font-family: "Computer Modern Serif", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; }
@media (prefers-color-scheme: dark) {
    body, table {  color: lightgray; background:black; }
    td.firstcolumn { background-color:black; !important; }
    
    input[input=range] {
          appearance:none;
          -webkit-appearance: none;
    }
    
    input[input=range]::-webkit-slider-runnable-track { 
        background:white;
        height:10px;
        outline:none;
    }
 }

td.firstcolumn { background-color:white; !important; }
    
select { font-size:7pt; font-family:Arial Narrow;}


.dbSlider {  -webkit-appearance: none;
    height: 200px;
    border-radius: 5px;
    background: #ccc;
    
    touch-action: none;
    writing-mode: bt-lr; /* IE */
   // position:relative; left:-40px;
    -webkit-appearance: slider-vertical; /* WebKit */
    position:relative; left:-15px;
    }
    
td[name="db"] { cursor:pointer; }

::-moz-range-track {
    background: #ccc;
    border: 0;
}

input::-moz-focus-inner { 
  border: 0; 
}

input[type=range]:focus {
    outline:1px solid blue;
    outline-offset:4px;
    border-radius:10px;
}



table[name^=channelStrip] {  }
table[name^=channelStrip] td { align:center; padding:7px; margin:0px; max-width:110px; }
table:first-child[name^=channelStrip] tr td:first-child { max-width:150px;  }
.headcol { font-size:80%; }
table[name^=channelStrip] { border-spacing:0px; 
  vertical-align:top;
  display:inline-block;
}

.examples { justify-content: space-around; width:100%; display:flex; flex-wrap: wrap; }
.examples img { width:180px; height:180px; border:1px solid gray; border-radius:20px; }
.examples figcaption { width:180px; margin-top:5px; margin-left:0px; font-size:80%;   }

figcaption { font-size:80%;   }

*[id^=textoutput] { width:300px; height:6em; display:block; }

#reverseInput input[type=range] { width:300px; }
#mixer table td { height:1.5em; }
#mixer table {  }

.ampllink { position:relative; top:-120px; left:25px;}

figcaption { line-height:120%; word-wrap: hyphens: auto;}

.link { -webkit-appearance: none;  }
.link:checked:after { background:green; color:white; border:1px solid gray; border-radius:10px; padding:3px; content:"link";  }
.link:after { background:transparent; border:1px solid gray; border-radius:10px; padding:3px; color:gray; content:"link"; }


.invertphasebox { -webkit-appearance: none;  }
.invertphasebox:checked:after { background:green; color:white; border:1px solid gray; border-radius:10px; padding:3px; content:"Phase";  }
.invertphasebox:after { background:transparent; border:1px solid gray; border-radius:10px; padding:3px; color:gray; content:"Phase"; }

#monocheckbox { -webkit-appearance: none; cursor:pointer; }
#monocheckbox:checked:after { background:green; color:white; border:1px solid gray; border-radius:10px; padding:3px; content:"mono";  }
#monocheckbox:after { background:transparent; border:1px solid gray; border-radius:10px; padding:3px; color:gray; content:"mono"; }

#runautocirclingcheckbox { -webkit-appearance: none; cursor:pointer; }
#runautocirclingcheckbox:checked:after { background:green; color:white; border:1px solid gray; border-radius:10px; padding:3px; content:"run";  }
#runautocirclingcheckbox:after { background:transparent; border:1px solid gray; border-radius:10px; padding:3px; color:gray; content:"run"; }


#outputpanel { display:inline-block; }
#powersum { display:inline-block; }
power-sum, phase-monitor { border:1px solid; border-radius:10px !important; vertical-align:top; padding:5px; }
stereo-image { border-radius:10px !important; }
stereo-image:not([id="stereoB"]) { display:block; border:none !important; }
#stereo360 { border:none !important; display:inline-block !important; }

#stereo360container { display:block; }

div[id^=powersumcontainer] { display:none; text-align:center; }
div[id^=monocompatibilitycontainer] { text-align:center; }
*[id^=monocompatibility_] { padding:5px; }


#extrabuttons { font-size:80%; vertical-align:top; color:inherit; display:inline-block; position:relative; top:50px;margin-left:0px; }
#extrabuttons a { 
    text-decoration:none; 
    color:inherit; 
    display:block; width:3.5em; text-align:center; border:1px solid; border-radius:10px; padding:10px; margin:5px; 
    transition:background-color 0.3s;
    background-color:transparent; 
}
#extrabuttons a:hover {
    background-color:lightgrey;
}   


select[name=pattern] { width:50px; text-overflow: ellipsis; }
select[name=panning] { width:50px; text-overflow: ellipsis; }

option[value^="ref"] { color:blue; }

.graphcontainer {
	text-align:center;
	vertical-align:top;
}

#products {
	margin-top:10px;
}

#products a {
	display:inline-block;
	width:120px; height:120px;
	border:1px solid black;
	border-radius:15px;
	text-decoration:none;
	vertical-align:top;
	padding:5px;
	color:black;
	background-color:#DDDDDD;
	transition:background-color 0.3s;
	margin:5px;
	line-height: normal;
	text-align:left;
}

#products a:hover {
	background-color:#AAAAAA;
}

#invalidsetup {
	font-weight:bold; color:red;
	display:none;
}

#customsetupinfo {
	display:none;
	color:red;
}

.help, *[help] {
	font-family:Helvetica;
	display:inline-block;
	border:1px solid gray;
	color:gray;
	border-radius:10px;
	margin-left:5px;
	width:2ch; height:2ch;
	text-align:center;
	font-size:70%;
	cursor:pointer;
	position:relative; 
	top:-1px;
	line-height:120%;
	transition:background,color 0.3s;
}

.help:hover, *[help]:hover {
    color:white;
    background:red;
}

.button {
	cursor:pointer;
	border:1px solid;
	font-size:13px;
	display:inline-block;
	padding:4px;
	border-radius:8px;
	transition: background-color 0.3s;
	font-weight:normal;
	text-align:center;
	background-color:transparent;
	color:inherit;
	line-height:100% !important;
	text-align:center;
	appearance:none;
	overflow:clip;
} 

.button:hover {
    background-color:lightgrey;
}