.ws-body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-image: url('../images/bg1.png');
  /* background-repeat: no-repeat; */
  background-color: white;
  min-height: 100%;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;  
}

.login-pnl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50vh;
  height: 40vh;
  border-top-right-radius: 3vh;
  border-bottom-left-radius: 3vh;
  border-radius: 3vh;
  border-bottom: 1vh solid;
  background-color:rgb(167, 169, 172);
  border-bottom-color: rgb(102, 105, 110);
}

.txtCode {
  position: absolute;
  top: 16vh;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 28vh;
  height: 4vh;
  border-top-left-radius: 3vh;
  border-bottom-right-radius: 3vh;
  outline: none;
  text-align: center;
  font-weight: bolder;
  font-size: 2vh;
}

.btnActivate {
  position: absolute;
  top: 23.5vh;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 12vh;
  height: 3.2vh;
  border-top-left-radius: 3vh;
  border-bottom-right-radius: 3vh;
  outline: none;
  text-align: center;
  font-weight: bolder;
  font-size: 2vh;
}

.logo {
  position: absolute;
  top: -17vh;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 33vh;
  height: 29vh;
  background-image: url('/src/images/logo.png');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.logo2 {
  position: absolute;
  top: -27vh;
  left: 33vh;
  right: 0;
  transform: rotate(45deg);
  bottom: 0;
  margin: auto;
  width: 19vh;
  height: 19vh;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* background-color: #63BA55; */
  color: #bfd540;
  text-shadow: 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000;
  text-align: center;
  font-size: 6vh;
}

.content {
  position: absolute;
  float: left;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 120vh;
  height: 70vh;
  overflow: auto;
}

.audio {
  width: 33%;
  height: 25%;
  float: left;
  color: #bfd540;
  text-shadow: 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000;
  /* border: 1vh solid #63BA55;
  color: #bfd540;
  background-color: rgb(102, 105, 110); */
}

.orngButton {
  position: absolute;
  top: 68vh;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 45vh;
  height: 15vh;
  background-image: url('/src/images/button.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  text-align: center;
  line-height: 15vh;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 9vh;
  color: white;
}

.orngButtonLogin {
  position: absolute;
  top: 30vh;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 15vh;
  height: 5vh;
  /* background-image: url('/src/images/button.png'); */
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  text-align: center;
  line-height: 5vh;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 2.5vh;
  background-color: #63BA55;
  color: #bfd540;
  border-radius: 2vh;
  border-bottom: 0.5vh solid #bfd540;
}

.orngButton:hover, .orngButtonLogin:hover, .btnSaveAndExit:hover, .btnPlay:hover {
  transform: scale(1.1);
}

#vidContainer {
  color: white;
}

.pnlErr {
  position: absolute;
  top: 1vh;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 43vh;
  height: 33vh;
  border-top-right-radius: 3vh;
  border-bottom-left-radius: 3vh;
  border-radius: 3vh;
  border-bottom: 1vh solid;
  background-color:#63BA55;
  border-bottom-color: rgb(102, 105, 110);
}

.btnOkay {
  position: absolute;
  bottom: -2.8vh;
  left: 0;
  right: 0;
  width: 10vh;
  height: 5vh;
  margin: auto;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  text-align: center;
  line-height: 5vh;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 2.5vh;
  background-color: rgb(102, 105, 110);
  color: #bfd540;
  border-radius: 2vh;
  border-bottom: 0.5vh solid #bfd540;
}

.errMsg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 25vh;
  height: 15vh;
  font-size: 2vh;
  line-height: 15vh;
  text-align: center;
}

.rotation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  background-color: white;
  background-image: url('/src/images/rotate.gif');
  background-position: center;
  background-repeat: no-repeat;
}