@CHARSET "UTF-8";

body {
	background-color: rgb(241, 242, 246);
	overflow-y: scroll;
}

h4.customspeechdata2{
	margin: 0px 0px 5px 0px;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 2px 0px 2px 10px;
	box-shadow: 0px 0px 5px #333;
	border-radius: 5px;
	text-align: center;
}

h4.customspeechdata1{
	margin: 0px 0px 5px 0px;
	background-color: rgba(228, 223, 223, 0.5);
	padding: 2px 0px 2px 10px;
	box-shadow: 0px 0px 5px #333;
	border-radius: 5px;
	text-align: center;
}

.options{
	color: rgb(38, 12, 158);
}

.options:hover{
	text-decoration: underline;
	cursor: pointer;
}

.uanswer{
	text-decoration: underline;
	background-color: rgba(255,255,255,0.2);
	box-shadow: inset 0px 0px 10px #fff;
	border-radius: 5px;
	padding: 4px;
	display: inline-block;
	height: 25px;
	text-align: center;
	min-width: 100px;
	line-height: normal;
	color: #000;
}

#forhint {
	position: absolute;
	top: 300px;
    left: 450px; 
}

.popover {
	max-width: 400px !important;
}

#stage { 
	margin: 0px auto; 
	padding: 10px; 
	overflow-y: auto;
	border: 1px solid; 
	border-radius: 5px;
	max-width: 900px;
	/*-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtmluser-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; */
}

#subheading{
	margin: -15px auto 0px auto;
	width: 750px;
	text-align: center;
	padding: 0px 5px;
	font-weight: bold;
	font-size: 18px;
	border: 1px solid #fff;
	border-radius: 50px;
}

.person1 {
}

.person2 {
	text-align: right;
}

.person1, .person2 {
	margin: 3px auto;
    max-width: 500px;
}

#feedbackdata {
	list-style-type: none;
}

.personclip1 {
	display: inline-block;
	vertical-align: middle;
	height: 50px;
	width: 30px;
	background-image: url(../../images/reportedSpeechActivityImages/a.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.userinput {
	border-radius: 5px;
	background-color: #fff;
	border: 1px solid;
}

.personclip2 {
	display: inline-block;
	vertical-align: middle;
	height: 50px;
	width: 30px;
	background-image: url(../../images/reportedSpeechActivityImages/b.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.personmsg1 {
	display: inline-block;
	vertical-align: middle;
	background-color: rgb(61, 174, 255);
	border: 0px solid orange;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 5px 15px 5px 10px;
	text-align: left;
	color: #fff;
	font-weight: bold;
	/* max-width: 620px; */
	box-shadow: 2px 2px 5px #333;
	margin-left: 20px;
}

.personmsg2 {
	display: inline-block;
	vertical-align: middle;
	background-color: rgb(255, 55, 55);
	border: 0px solid orange;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	padding: 5px 10px 5px 15px;
	text-align: right;
	color: #fff;
	font-weight: bold;
	/* max-width: 620px; */
	box-shadow: 2px 2px 5px #333;
	margin-right: 20px;
}

.conv tr td  {
	padding: 0px;
}

#indirect {
	margin: 50px auto 5px auto;
	max-width: 900px;
	background: rgb(255, 180, 94);/* rgba(242,215,184,1);
	background: -moz-linear-gradient(top, rgba(242,215,184,1) 0%, rgba(241,211,177,1) 0%, rgba(255,146,10,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(242,215,184,1)), color-stop(0%, rgba(241,211,177,1)), color-stop(100%, rgba(255,146,10,1)));
	background: -webkit-linear-gradient(top, rgba(242,215,184,1) 0%, rgba(241,211,177,1) 0%, rgba(255,146,10,1) 100%);
	background: -o-linear-gradient(top, rgba(242,215,184,1) 0%, rgba(241,211,177,1) 0%, rgba(255,146,10,1) 100%);
	background: -ms-linear-gradient(top, rgba(242,215,184,1) 0%, rgba(241,211,177,1) 0%, rgba(255,146,10,1) 100%);
	background: linear-gradient(to bottom, rgba(242,215,184,1) 0%, rgba(241,211,177,1) 0%, rgba(255,146,10,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2d7b8', endColorstr='#ff920a', GradientType=0 ); */
	padding: 10px;
	border-radius: 8px;
	box-shadow: 2px 2px 3px #333;
	font-weight: bold;
	text-align: justify;
	line-height: 30px;
}

.workareaholder {
	margin: 0px auto;
	display: table;
}

.workarea {
	background-color: #F9C600;
	box-shadow: 2px 2px 5px #333;
	border-radius: 3px;
	padding: 7px;
	max-width: 600px;
	font-weight: bold;
}

.sentdirect, .sentindirect {
	background-color: #fff;
	padding: 2px;
	margin: 2px;
	box-shadow: inset 1px 1px 1px #333;
	border-radius: 3px;
}

select {
	color: #000;
}

input{
	margin: 0px 5px 0px 5px;
	border: 3px solid rgba(255,255,255,0);
}

input[type=text] {
	width: 80px;
	border-radius: 5px 5px 5px 5px;
	padding: 2px;
	margin-top: 2px;
}

.cross-button {
	border: 1px solid; background-color: #3bafda; border-radius: 5px; color: #fff; cursor: pointer; margin: 0px 5px 0px 2px; padding: 0px 5px 0px 5px; 
}

.cross-button:hover {
	background-color: #fff;
	color: #3bafda
}

.dismiss{
	background-color:rgb(192,202,68); 
	border-radius: 10px; 
	box-shadow: 1px 1px 2px #000; 
	margin-top: 40px;
	color: #000;
	cursor: pointer;
}

#notify {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtmluser-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.notifno {
	display: inline-block; 
	background-color: rgb(74, 76, 239); 
	padding: 2px; 
	height: 18px; 
	font-size: 10px; 
	box-shadow: 1px 1px 2px #333; 
	border-radius: 5px; 
	line-height: normal; 
	vertical-align: top; 
	margin-left: -28px;
	margin-top: -5px;
	margin-right: 20px; 
	color: #fff; 
	font-weight: bold;
	text-shadow: 1px 1px 1px #000;
}

.notifnomarginzero{
	margin-left: 0px;
	margin-top: 0px;
}

.notifnoextended{
	margin-top : 0px;
}

.highlightEffect {
    -webkit-animation: myEffect 1s infinite;
    animation: myEffect 1s infinite;
}

@-webkit-keyframes myEffect {
    0%   {box-shadow: 0px 0px 0px #00f;}
    50%  {box-shadow: 0px 0px 10px #00f;}
    100% {box-shadow: 0px 0px 0px #00f;}
}

@keyframes myEffect {
   	0%   {box-shadow: 0px 0px 0px #00f;}
    50%  {box-shadow: 0px 0px 10px #00f;}
    100% {box-shadow: 0px 0px 0px #00f;}
}

.scrollToTop{
	padding:10px; 
	text-align:center; 
	background: rgba(0,0,0, 0.4);
	font-weight: bold;
	color: #444;
	text-decoration: none;
	position:fixed;
	bottom:50px;
	right:40px;
	display:none;
	color: #fff;
	border-radius: 5px;
}
.scrollToTop:hover{
	text-decoration:none;
}
.custom-btn{
	margin-top: 4px;
}
#hider{
	width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgb(255, 255, 255);
}
.custom-welcome{
	border:0px solid;
	border-radius: 50px;
	background-color: #C25800;
	max-width: 600px;
	min-width: 240px;
	box-shadow: 2px 2px 5px #000;
	color: #fff;
}