* {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14pt;
}

html {
  padding: 10px;
  margin: 0;
}

body {
  width: 100%;
  max-width: 600px; /* started with 800px */
  margin: auto;
  padding: 0;
  background: #f5f5f5;
}

fieldset {
   border:0 none;
}

h1 {
  font-size: 24pt;
  text-align: center;
  color: #8B008B;   /* dark magenta  */
}

h6 {
  font-size: 24pt;
  text-align: center;
  color: #8B008B;   /* dark magenta  */
}

h2 {
  font-style: italic;
  line-height: normal;
  font-size: normal;
  text-align: center;
}

label {
  display: block;
  margin-top: 10px;
}

input,
textarea {
  padding: 6px 12px;
  color: #555555;
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 10px;
  box-sizing: border-box;
  width: 100%;
  resize: none;
}

.output_0{
  color: black;
  padding: 6px 12px;
  border: 1px solid #999;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #AAFFD3;
  width: 100%;
  resize: none;
}

.output_1{
  color: black;
  padding: 6px 12px;
  border: 1px solid #999;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #fdd355;
  width: 100%;
  resize: none;
}

.output_1A {
  color: black;
  font-weight: normal;
  padding: 6px 12px;
  border: 1px solid #999;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #87CEEB;
  width: 100%;
  resize: none;
}

.output_2,
.output_3,
.output_4 {
  color: black;
  padding: 6px 12px;
  border: 3px solid #999;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: transparent;
  width: 100%;
  resize: none;
}

select {
  width: 100%;
}

.hidden {
  display: none;
}


#circle {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

#circle:hover {
  background-color: red;
  color: white;
}

.previous {
  background-color: #c0c0c0;
  color: black;
}

.next {
  background-color: #4CAF50;
  color: white;
}

.round {
  border-radius: 50%;
}

.switch{
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  margin: 0 5px;
}

.slider{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .432s;
  border-radius: 14px;
}

.switch input {display: none}

.slider::before{
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .432s;
  border-radius: 24px;
}

input:checked + .slider{
  background-color: #fdd355; /* #ff278c; */
}

input:checked + .slider::before{
  transform: translateX(30px);
}

.text_position{
  position:relative;
  top:-8px;
  left:0px;
  margin-left:0px;
  margin-right:0px;
}

.version_text {
  font-size: 8px
}