/* this CSS is not part of the widget, it is here just as an example of the demo page styling.... Don't copy this one, roll your own. One
 * of the key things about the widget is that it allows you to do your own styling!
 */

#editor {
	max-height: 250px;
	height: 250px;
	background-color: white;
	border-collapse: separate; 
	border: 1px solid rgb(204, 204, 204); 
	padding: 4px; 
	box-sizing: content-box; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; 
	box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
	border-top-right-radius: 3px; border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px; border-top-left-radius: 3px;
	overflow: scroll;
	outline: none;
}
#voiceBtn {
  width: 20px;
  color: transparent;
  background-color: transparent;
  transform: scale(2.0, 2.0);
  -webkit-transform: scale(2.0, 2.0);
  -moz-transform: scale(2.0, 2.0);
  border: transparent;
  cursor: pointer;
  box-shadow: none;
  -webkit-box-shadow: none;
}

div[data-role="editor-toolbar"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.dropdown-menu a {
  cursor: pointer;
}


.progressImg{ height:6px;  line-height:3px;  background-color:#f1f1f1;box-shadow:inset 1px 1px 5px #999;border-radius:50px; overflow:hidden;
              position: absolute;top: 37px;width: 100%;
}
.progressImg .bar {
    height: 6px;
    line-height: 3px;
    background-color: #3dad00;
    background-image: -webkit-gradient(linear,left top,left bottom,from( #54ef00 ),to( #3dad00 ));
    background-image: -webkit-linear-gradient( #54ef00,#3dad00 );
    background-image: -moz-linear-gradient( #54ef00,#3dad00 );
    background-image: -ms-linear-gradient( #54ef00,#3dad00 );
    background-image: -o-linear-gradient( #54ef00,#3dad00 );
    background-image: linear-gradient( #54ef00,#3dad00 );
}