.app-content {
  overflow: visible;
}

#main-container {
  width:100%;
  height:100%;
  background-color:#2A547C;
}

#experiment-container {
  background-image: url(../content/img/bg.png);
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  border: 0.09em solid white;
  position: absolute;
  top: 0.5em;
  left: 0.4em;
  width: 79%;
  height: 56%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#dood {
  background-image: url(../content/img/dud_01.png);
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  width:23%;
  height:50%;
  position:absolute;
  left:40%;
  top:15%;
}

.solarPanel {
  background-image: url(../content/img/kolet0_0.png);
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  width:19%;
  height:43%;
  position:absolute;
  top:45.5%;
}

#solar-panel-1 {
  left:26.2%;
}

#solar-panel-2 {
  left:9.7%;
  display:none;
}

#solar-panel-2.active {
  display:inline-block;
}


#experiment-table {
  width: 79%;
  height: 39.1%;
  position: absolute;
  bottom: 0.5em;
  left: 0.4em;
  background-color: white;
  border-collapse: separate;
  border-spacing: 0.12em;
  direction: rtl;
  font-size: 0.9em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.en #experiment-table, .zh #experiment-table , .vi #experiment-table {
  direction:ltr;
}

#experiment-table th {
  background-color:#5789BA;
  color:white;
  font-family:arial;
  font-weight:bold;
  text-align:center;
}

#experiment-table tr {
height: 1.52em;
}

#experiment-table td {
  color:black;
  font-family:arial;
  text-align:center;
  font-weight:bold;
}

.light {
  background-color:#C8D3E6;
}

.dark {
  background-color:#99AFD0;
}

.optionWindow {
  position:absolute;
  right:0.2em;
  width:19%;
  border: 0.09em solid white;
  height: 27.8%;
}

#op1 {
  height: 31.8%;
  top:0.5em;
}

#op2 {
  top: 38.5%;
}

.vi #op2 {
  top: 37.9%;
}


#op3 {
  bottom: 1.3%;
}

.optionTitle {
  background-color:#99AFD0;
  color:#2C547E;
  border-bottom: 0.09em solid white;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  text-align:center;
  padding:0.3em 0 0.3em 0;
}

.optionTitle span {
  font-size: 1.1em;
  font-weight:bold;
}

.vi .optionTitle span {
  font-size: 0.9em;
  font-weight:bold;
}


.optionTable {
  width:74%;
  direction:rtl;
  position:absolute;
  top: 2.4em;
  left:9%;
}

body.en .optionTable{
  top:3.2em;
}

 body.vi .optionTable {
  top:3.3em;
  left:9%;

}

.optionTable tr {
  height: 2.6em;
}

#op2 tr, #op3 tr {
  height: 3.3em !important;
}

.vi #op2 tr,.vi #op3 tr {
  height: 3em !important;

}

#op1 .optionTable {
  top:3.2em;
}

.optionText {
  color:white;
  text-align:right;
}

body.en .optionText, body.zh .optionText {
  text-align:left;
  padding-left: 0.9em;
}

body.vi .optionText {
  text-align:left;
  padding-left: 0.9em;
}

.optionRadio {
  text-align:left;
}

.dood-radio {
  border: 0.09em solid white;
  border-radius:50%;
  padding:0.2em;
  display:inline-block;
  position:relative;
  top:0.1em;
  cursor:pointer;
}

.inactive .dood-radio {
  border-color:gray;
}

.dood-radio-inner {
  background-color:white;
  width:0.6em;
  height:0.6em;
  border-radius:50%;
  opacity:0;
}

.inactive .dood-radio-inner {
  background-color:gray;
}

.active .dood-radio-inner {
  opacity:1;
}

.active .dood-radio {
  pointer-events:none;
}

.inactive {
  pointer-events:none;
}

#start-button.inactive {
  background-color:gray !important;
}

#start-button.inactive:hover {
  background-color:gray !important;
}

#experiment-container canvas {
  position: absolute;
  top: 37.6%;
  left: 82.6%;
  width: 17.9%;
  height:60%;
  pointer-events:none;
  display:none;
}

#vapor-canvas.active {
  display:inline-block !important;
}

#liters {
  color:black;
  font-size:1em;
  position:absolute;
  top: 17%;
  left: 56.6%;
}

.btn:focus {
  outline: 0;
}

body.en #th1, body.zh #th1, body.vi #th1 {
  width:6.7em;
}