table.tonetable {
  border: 1px solid #ccc;
  border-collapse: collapse;
  font-size: .91em;
  margin: 0;
  padding: 0;
  width: 100%;
}

table.tonetable caption {
  font-size: 1.8em;
  margin: .5em 0 .75em;
  font-weight: bold;
}
table.tonetable tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table.tonetable th,
table.tonetable td {
  padding: .625em;
  text-align: center;
}

table.tonetable th {
  font-size: .85em;
  letter-spacing: .1em;
  text-align: start;
  vertical-align: top;
}
div.cfg_val {
  margin: .3em .61em .3em 0;
  padding-left: 1.3em;
}
div.cfg_val .val {
  margin: .31em;
}
div.cfg_val.line a {
	margin-left: .3em;
	font-size: 1em;
	font-weight: bold;
}

.cfg_val .btn button:hover, .cfg_val .btn button:focus, .cfg_val .btn button:focus-within {
	color: #e9ff7a;
	font-weight: bold;
}
.cfg_val select {
  font-size: 1.12em;
  padding-left: .42em;
  font-weight: bold;
  margin: 0 .32em;
  background-color: lightsteelblue;
  border-radius: .3em;
  padding-bottom: .2em;
  border: 1px solid black;
}
.cfg_val input {
  font-size: 1em;
  padding-left: .2em;
  margin-left: .2em;
  width: 6em;
  border-radius: .3em;
  border: 1px solid black;
}
.cfg_val input#steps {
  width: 3em;
}
.cfg_val span.btn a {
  font-size: 1em;
  padding-left: .2em;
  margin: 0 .22em;
  font-weight: bold;

}
.btn .cfg_btn {
  margin-left: .64em;
  font-size: 0.9em;
}
@media screen and (max-width: 1024px) {
	table.tonefrequency {
		font-size: 2.2vw;
	}
	table.overtone {
		font-size: 1.92vw;
	}
}


@media screen and (max-width: 680px) {
  table.tonetable {
    border: 0;
    table-layout: fixed;
  }
  table.overtone,
  table.tonefrequency {
    font-size: .91em;
  }
  table.tonetable caption {
    font-size: 1.3em;
  }

  table.tonetable thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table.tonetable tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }

 /*Here we are setting each td display to block*/
  table.tonetable td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table.overtone tr td:nth-child(3) {
  	font-size: .8em !important;
  }

/*
Now the other data-label we have added on each td comes into play.
*/

  table.tonetable td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
/*     text-transform: uppercase; */
  }

  table.tonetable td:last-child {
    border-bottom: 0;
  }
}

table.overtone tr td:nth-child(3) {
  font-size: 1.2em;
  font-weight: bold;
}
table.overtone tr td:nth-child(4) {
  font-size: .83em;
}
table.overtone tr td:nth-child(6) {
  font-size: .73em;
}
table.overtone tr td:nth-child(7),
table.overtone tr td:nth-child(8),
table.overtone tr td:nth-child(9) {
  font-size: .8em;
}

table.overtone td span {
  margin-left: .2em;
  font-size: .84em;
}

.frequenz_farbe {
  height: 42px;
  width: 20px;
  overflow: hidden;
  position: relative;
  display: inline-block;
}
.frequenz_farbe_img {
  height: 42px;
  position: relative;
  background-color: #ccc;
  padding-left: 33px !important;
}
.frequenz_farbe_div {
  height: 42px;
  position: relative;
  top: -46px;
  left: 20px;
  background-color: #fff;
  width: 120%;
}
.frequenz_farbe_div0 {
  height: 42px;
  width: 33px;
  position: relative;
  top: -88px;
  left: -33px;
  background-color: #fff;
}