body {
  padding: 0; 
  margin: 0; 
  overflow: hidden;
}

div.transbox p
{
/*  margin: 30px 40px;*/
  font-weight: bold;
  color: #ffffff;
}
.language_area{
  position: absolute;
  top: 0;
  width: 100%;
}
.msgmodetextbox{
  border-radius: 5px;
  width: 200px;
}
.message_command_area{
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 20px 0;
}
#final_span, #interim_span{
  display: none;
}
.control-holder{
  margin: 0 auto;
  width: 400px;
}
#startrecognition, #results{
  float: left;
}
#text2speechdiv{
  overflow-y:auto;
  overflow-y: auto;
  /*width: 70%;*/
  width: 50%;
  /*margin: 0 auto;*/
  margin-top: 66px;
  margin-left: 250px;
  height: 77%;

}
#text2speechdiv textarea{
  color: #000;
}
#playhal{
  position: absolute;
  margin-left: 500px;
  width: 30px;
  height: 40px;
}
#startrecognition{
  position: absolute;
  margin-left: 490px;
}
.micon{
  background:url('chrome-extension://__MSG_@@extension_id__/widgets/Speechtexttranslator/img/micOn.png') no-repeat center;
}
.micoff{
  background:url('chrome-extension://__MSG_@@extension_id__/widgets/Speechtexttranslator/img/micOff.png') no-repeat center;
}
/*.message_logs_area{
  background-color: rgba(0,0,0,.8);
  border: solid 1px #fff;
  height: 95%;
  margin : 20px 20px 0px -5px ;
  border-radius: 10px;
}*/
.message_logs_area{
  background-color: rgba(196, 191, 191, 0.8);
  border-radius: 10px;
  border: solid 1px #c2c2c2;
  height: 95%;
  margin : 20px 20px 0px -5px ;
}
.messageHistoryOther{
/*	background-color: transparent;
	background: transparent;*/
  width:73%;
  height:10%;
  background-color: #D4D45A;
  border: 1px solid black;
  opacity:0.9;
  filter:alpha(opacity=60);
	font-size:16px;
	color: white;
  outline: none;
  resize: none;
  outline-color: transparent;
  outline-style: none;
  padding: 14px;
  border-radius: 10px;
}
.messageHistorySelf{
  width:73%;
  height:10%;
  background-color: #ACD4D4;
  border: 1px solid black;
  opacity:0.9;
  filter:alpha(opacity=60);
  font-size:16px;
  color: white;
  outline: none;
  resize: none;
  outline-color: transparent;
  outline-style: none;
  padding: 14px;
  border-radius: 10px;

}
.message-self{
  margin-bottom: 10px;
  text-align: right;

  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;

}
.message-other{
  text-align: left;
  margin-bottom: 10px ;

  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.videofilter{  
  width: 100%;
  height: 90%;
}

.textboxstyle{
  font-size:16px;
  color: blue;
  outline: blue dotted thick;
}

.startrecognition {
    font-size:16px;
    color: green;
}

.actionarea{
  padding-left: 20px;
  
}

.final{
  font-size:16px;
  color: white;
}

.wrapper-1 {
  color: white;
  width:40%;
  background:rgba(0,0,0,1);
  border-radius:5px;
  margin: 0 auto;
  margin-top: 21px;
  padding: 20px 20px 20px 30px;
  font-size: 15px;
}



.readaloud{
  margin-top: -4px;
  margin-left: 10px;
}
.floatRight{
  float: right;
}

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}
input.cmn-toggle-round + label {
  padding: 2px;
  width: 50px;
  height: 25px;
  background-color: #dddddd;
  border-radius: 30px;
}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  /*background-color: #CF2323;*/
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
  width: 30px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 22px;
}

.message-holder{
  margin-left: -200px;
  width: 750px;
  /*width: 450px;*/
  background-color: #fff;
  border-radius: 5px;
}
.message-holder span{
 /* margin-left: 250px;*/
  display: inline-block;
  vertical-align: middle;
}
.msgmodetextbox{
  padding: 10px;
  border:transparent;
  background: transparent;
  width: 670px;
  height: 40px;
}
.msgmodetextbox:focus{
  border:transparent;
  background: transparent;
  box-shadow: none;
  outline: none;
}

.roboto {
    font-family: "Roboto";
    font-size: 16px;
}