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

html {
   font-size: 15px;
   box-sizing: border-box; }

body, button, input, select, textarea {
   font-family: "Source Sans Pro", sans-serif;
   font-size: inherit;
   line-height: 1.333334; }

body {
   margin: 20px; }

H1 {
   font-size: 22px; }
H2 {
   font-size: 17px;
   font-weight: bold;
   margin-top: 15px;
   margin-bottom: 10px; }

a {
   color: #07C;
   text-decoration: none; }
a:hover {
   text-decoration: underline; }
.pseudoButton,
.miniPseudoButton {
   color: #07C;
   cursor: pointer; }
.miniPseudoButton {
   font-size: 12px; }

div.footer {
   margin-top: 15px;
   font-size: 13px; }

code,
.code {
   font-family: Consolas, monospace; }
code {
   background-color: #eff0f1; }

input[type="text"],
input[type="number"] {
   padding: 1px 2px; }

input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none; }
input[type="number"] {
   -moz-appearance: textfield; }
input[type="text"]:invalid:not(:focus),
input[type="number"]:invalid:not(:focus) {
   box-shadow: 0 0 1px 1px #f00; }

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
.canvasFrame:focus-within {
   outline: 1px auto #4D90FE; }
.canvasFrame:focus-within {
   outline-style: solid; }

.hidden {
   display: none !important; }

.parmBlock {
   margin: 15px 0; }

.parmLine {
   display: flex;
   align-items: baseline;
   margin-top: 8px; }

div.parmLine input[type="checkbox"] {
   margin-left: 0; }

#harmonicCheckboxes div {
   display: flex; }

label.harmonic {
   font-size: 13px;
   margin-left: 2px;
   align-self: center;
   width: 26px; }
input.harmonic {
   margin: 0;
   align-self: center; }
/* div.parmLine input.harmonic-gap {
   margin-left: 8px; } */

#enableAllHarmonicsButton {
   margin-left: 4px; }
#disableAllHarmonicsButton {
   margin-left: 7px; }

label.w,
label.wg {
   width: 140px; }
label.wg {
   margin-left: 20px; }
input.w,
select.w {
   width: 100px; }

label[title] {
   text-decoration: underline dotted #aaa;
   text-underline-position: under; }

div.actionButtons {
   display: flex;
   align-items: center;
   margin: 15px 0; }

div.actionButtons button {
   width: 110px;
   height: 32px;
   padding: 4px 0px;
   margin-right: 20px; }

.resultBlock {
   margin-top: 20px; }

.resultBlock .title {
   font-size: 13px; }

.progressInfoMsg {
   text-align: center;
   font-size: 17px; }

canvas.functionCurveViewer {
   display: block;
   width: 100%;
   height: 100%;
   touch-action: none; }

div.functionCurveViewerFrame,
div.functionCurveEditorFrame {
   width: 800px;
   height: 200px;
   margin-top: 8px;
   border: 1px solid #888;
   resize: both;
   overflow: hidden; }

div.miniButtonsBelowViewer {
   margin-top: 5px;
   display: flex; }

div.miniButtonsBelowViewer div {
   margin-right: 15px; }

.helpText {
   background-color: #FEFAE2;
   border: 1px solid #F3EED5;
   padding: 3px;
   margin-top: 8px;
   margin-bottom: 20px;
   width: 450px; }

table.functionCurveViewerHelp {
   border-collapse: collapse;
   width: 100%; }

table.functionCurveViewerHelp td {
   padding: 3px;
   vertical-align: top;
   border-bottom: 1px solid #eee; }
table.functionCurveViewerHelp tr:last-child td {
   border-bottom: none; }

.functionCurveViewerHelpCol1 {
   width: 50%; }