body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
}
.ms-simulation {
    position: absolute;
    left: 110px;
    top: 140px;
    width: 600px;
    height: 300px;
    background-color: #eee;
}
.point {
    position: absolute;
    border-radius: 100%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    z-index: 1;
}
.blendeOben {
    top: 0;
}
.blendeOben,
.blendeUnten {
    position: absolute;
    right: 0;
    background-color: #000;
    width: 3px;
    height: 145px;
}
.blendeUnten {
    bottom: 0;
}
.kondensator {
    position: absolute;
    height: 10px;
    width: 99%;
    border: 1px solid;
}
.kondensatorOben {
    top: -12px;
}
.kondensatorUnten {
    bottom: -12px;
}
.ionenQuelle {
    width: 40px;
    height: 30px;
    position: absolute;
    top: 135px;
    left: -80px;
    background: grey;
}
.ionenQuelle .ladung {
    position: relative;
    top: 20px;
    left: -6px;
}
.ionenQuelle .quelle {
    position: relative;
    top: -24px;
    left: -3px;
}
.blendeAnalysatorUnten {
    right: -50px;
    height: 275px;
    top: 155px;
}
.schirm {
    top: -130px;
    background-color: black;
    width: 3px;
    height: 275px;
}
.schirm,
.skala,
.skala2 {
    right: -50px;
    position: absolute;
	}
.skala {
    top: -130px;
	width:50px;
}
.skala2 {
    top: 172px;
	width:50px;
}
.magnetfeldZeichen {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.magnetfeldZeichen div {
    background-image: url(../i/Magnetfeld_filter.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    width: 17px;
    height: 17px;
}
.magnetfeldZeichen2 {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.magnetfeldZeichen2 div {
    background-image: url(../i//Magnetfeld_filter2.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    width: 17px;
    height: 17px;
}
.magnetfeldFilter {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.magnetfeldFilter div {
    background-image: url(../i/Magnetfeld_analyse.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    width: 17px;
    height: 17px;
}
.magnetfeldFilter2 {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.magnetfeldFilter2 div {
    background-image: url(../i/Magnetfeld_analyse2.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    width: 17px;
    height: 17px;
}
.efeldZeichen {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.efeldZeichen div,
.efeldZeichen img {
    height: 100%;
    display: block;
    float: left;
}
.efeldZeichen2 {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.efeldZeichen2 div,
.efeldZeichen2 img {
    height: 100%;
    display: block;
    float: left;
}
.analysator {
    position: absolute;
    background-color: #eee;
    width: 270px;
    height: 560px;
    right: -320px;
    top: -130px;
    z-index: -1;
}
.controls {
    padding-left: 100px;
    position: absolute;
    width: 600px;
    text-align: left;
	top:-5px;t
}
.controls select {
	left:-10px;}
.controls input,
.controls select {
    font-size: 120%;
    margin: 5px 10px;
    padding: 5px 15px;
    position: relative;
    top: -5px;
    cursor: pointer;
}
h1 {
    margin: 5px 0;
    font-size: 150%;
}
.settingFilter {
    position: absolute;
    top: 470px;
    left: 270px;
    text-align: left;
    width: 300px;
}
.settingAnalysator {
    position: absolute;
    top: 575px;
    left: 760px;
    text-align: left;
    width: 269px;
}
.settingFilter input {
    margin: 10px;
	width:160px;
}
.settingAnalysator input {
    margin: 10px;
	width:145px;
}
.anweisungen {
    position: absolute;
    top: 70px;
    margin: 10px 0;
    font-size: 110%;
}
.constants {
    position: absolute;
    top: 580px;
    padding: 25px 35px;
    text-align: left;
}
.ladung {
	position: absolute;
    top: 237px;
    left: -80px;
}
ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 0.3em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
#footer{position:absolute;top:625px;width:800px;line-height:1em;z-index:1}
/*Style der Schieberegler */
input[type=range] {
  margin: 18px 10px;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: #707070;
  border: 0;
  border-radius: 4px;
  width: 100%;
  height: 4px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -13px;
  width: 20px;
  height: 30px;
  background: #00baff;
  border: 1px solid #000000;
  border-radius: 3px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #8f8f8f;
}
input[type=range]::-moz-range-track {
  background: #707070;
  border: 0;
  border-radius: 4px;
  width: 100%;
  height: 4px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 30px;
  background: #00baff;
  border: 1px solid #000000;
  border-radius: 3px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 14px 0;
  color: transparent;
  width: 100%;
  height: 4px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: #515151;
  border: 0;
  border-radius: 8px;
}
input[type=range]::-ms-fill-upper {
  background: #707070;
  border: 0;
  border-radius: 8px;
}
input[type=range]::-ms-thumb {
  width: 20px;
  height: 30px;
  background: #00baff;
  border: 1px solid #000000;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
  background: #707070;
}
input[type=range]:focus::-ms-fill-upper {
  background: #8f8f8f;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range] {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }