/* ================================================================================================================== */
/* ANIMACOES */
/* ================================================================================================================== */

#idstudies_talk2me,
#idstudies_talk2me *
{
	font-family: Arial, sans-serif;
	font-size: 14px;

	transition-property: all;
	-webkit-transition-property: all;
	-moz-transition-property: all;

	transition-duration: 400ms;
	-webkit-transition-duration: 400ms;
	-moz-transition-duration: 400ms;
}

#idstudies_talk2me .no-animation
{
	transition-property: none;
	-webkit-transition-property: none;
	-moz-transition-property: none;

	transition-duration: 0ms;
	-webkit-transition-duration: 0ms;
	-moz-transition-duration: 0ms;
}


/* ================================================================================================================== */
/* BLOCOS */
/* ================================================================================================================== */

#idstudies_talk2me .trick_align_middle { display: inline-block; position: relative; width: 0; height: 100%; vertical-align: middle; background-color: transparent; }

#idstudies_talk2me { display: block; position: fixed; bottom: 75px; right: 60px; margin: 0; background-color: #ffffff; width: auto; z-index: 100000; }
#idstudies_talk2me[data-operator] { display: block; position: relative; bottom: auto; right: auto; margin: 10px 0 0 0; }
#idstudies_talk2me[data-status="closed"] { width: 0; height: 0; border: 1px solid transparent; }
#idstudies_talk2me[data-status="open"] { width: 400px; height: 500px; border: 1px solid #1D75B8; border-radius: 10px; box-shadow: 3px 3px 5px #666666; }
#idstudies_talk2me[data-status="open"][data-operator] { width: 400px; height: 500px; border: 1px solid #1D75B8; border-radius: 10px; box-shadow: 0 0 0 transparent; }
#idstudies_talk2me[data-online="true"] { display: block; }
#idstudies_talk2me[data-online="false"] { display: none; }
	#idstudies_talk2me span.icon { display: block; position: absolute; bottom: -60px; right: -50px; background: transparent url(../src/img/button.png) no-repeat 0 0; border-radius: 100%; width: 50px; height: 50px; cursor: pointer; }
	#idstudies_talk2me[data-status="open"] span.icon,
	#idstudies_talk2me span.icon:hover { background-position: 0 -50px; }
	#idstudies_talk2me div.container { display: block; position: relative; width: 100%; height: 100%; overflow: auto; padding: 0; margin: 0; }


/* ================================================================================================================== */
/* ECRA INICIAL */
/* ================================================================================================================== */

#idstudies_talk2me div.container div.welcome { display: none; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
#idstudies_talk2me[data-screen="welcome"] div.container div.welcome { display: block; }
	#idstudies_talk2me div.container div.welcome div.header { display: block; position: relative; width: 100%; height: 25px; background-color: #F7F8F9; margin: 0; border-radius: 10px 10px 0 0; }
		#idstudies_talk2me div.container div.welcome div.header h3 { display: block; position: relative; width: 100%; text-align: center; font-size: 12px; color: #666666; line-height: 25px; }
	#idstudies_talk2me div.container div.welcome form { display: block; position: relative; width: 100%; height: 74px; font-size: 0; text-align: center; border-top: 1px solid #D1D5D7; margin: 0; }
		#idstudies_talk2me div.container div.welcome form label { display: block; position: relative; width: 300px; font-size: 12px; line-height: 20px; margin: 0 auto 15px auto; color: #666666; text-align: left; }
		#idstudies_talk2me div.container div.welcome form label:first-child { margin: 20px auto 15px auto; }
			#idstudies_talk2me div.container div.welcome form label select,
			#idstudies_talk2me div.container div.welcome form label select option,
			#idstudies_talk2me div.container div.welcome form label textarea,
			#idstudies_talk2me div.container div.welcome form label input[type="text"] { display: block; position: relative; width: auto; min-width: 278px; height: 45px; line-height: 45px; border: 1px solid #B1B1B1; vertical-align: middle; background-color: #FCFCFC; margin: 0 auto; font-size: 11px; color: #949494; padding: 0 10px; margin: 0 auto; }
			#idstudies_talk2me div.container div.welcome form label textarea { resize: none; line-height: 25px; height: 100px; }
			#idstudies_talk2me div.container div.welcome form label select,
			#idstudies_talk2me div.container div.welcome form label textarea,
			#idstudies_talk2me div.container div.welcome form label input[type="text"]
			{
				-webkit-box-sizing: content-box;
				   -moz-box-sizing: content-box;
				    -ms-box-sizing: content-box;
				        box-sizing: content-box;

				-webkit-box-shadow: inset 0 0 1px #B1B1B1;
			       -moz-box-shadow: inset 0 0 1px #B1B1B1;
			            box-shadow: inset 0 0 1px #B1B1B1;
			}
			#idstudies_talk2me div.container div.welcome form label select.error,
			#idstudies_talk2me div.container div.welcome form label textarea.error,
			#idstudies_talk2me div.container div.welcome form label input[type="text"].error
			{
				border: 1px solid #B81D1D;

				-webkit-box-shadow: inset 0 0 1px #B81D1D;
			       -moz-box-shadow: inset 0 0 1px #B81D1D;
			            box-shadow: inset 0 0 1px #B81D1D;
			}
			#idstudies_talk2me div.container div.welcome form input[type="submit"] { display: block; position: relative; width: 100px; height: 45px; line-height: 45px; border: none; background-color: #1D75B8; border-radius: 5px; vertical-align: middle; margin: 0 0 0 20px; font-weight: bold; color: #ffffff; cursor: pointer; margin: 0 auto; }
			#idstudies_talk2me div.container div.welcome form input[type="submit"]:hover { background-color: #398ECF; }


/* ================================================================================================================== */
/* CHAT */
/* ================================================================================================================== */

#idstudies_talk2me div.container div.chat { display: none; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
#idstudies_talk2me[data-screen="chat"] div.container div.chat { display: block; }
	#idstudies_talk2me div.container div.chat div.header { display: block; position: relative; width: 100%; height: 25px; background-color: #F7F8F9; margin: 0; border-radius: 10px 10px 0 0; }
		#idstudies_talk2me div.container div.chat div.header h3 { display: block; position: relative; width: 100%; text-align: center; font-size: 12px; color: #666666; line-height: 25px; }
		#idstudies_talk2me div.container div.chat div.header span.close { display: block; position: absolute; top: 7px; right: 13px; width: 12px; height: 12px; background: transparent url(../src/img/close.png) no-repeat; cursor: pointer; }
		#idstudies_talk2me div.container div.chat div.header span.close:hover { background-position: 0 -12px; }
	#idstudies_talk2me div.container div.chat div.body { display: block; position: relative; width: 100%; height: 399px; margin: 0; border-top: 1px solid #D1D5D7; padding: 0; }
		#idstudies_talk2me div.container div.chat div.body div.messages { display: block; position: relative; width: 100%; height: 369px; overflow-y: auto; padding: 5px 0; }
		#idstudies_talk2me div.container div.chat div.body span.status { display: block; position: relative; bottom: 0; left: 0; font-size: 9px; line-height: 20px; background-color: #F7F8F9; text-align: center; width: 100%; color: #666666; overflow: hidden; height: 20px; border-top: 1px solid #D1D5D7; }
		#idstudies_talk2me div.container div.chat div.body span.status[data-status="true"] { height: 20px; }
		#idstudies_talk2me div.container div.chat div.body span.status[data-status="false"] { height: 0; }
		#idstudies_talk2me div.container div.chat div.body div.message { display: block; position: relative; width: auto; font-size: 0; padding: 0 15px; margin: 10px 0; }
		#idstudies_talk2me div.container div.chat div.body div.message.costumer { text-align: left; }
		#idstudies_talk2me div.container div.chat div.body div.message.operator { text-align: right; }
			#idstudies_talk2me div.container div.chat div.body div.message div { display: inline-block; position: relative; font-size: 12px; line-height: 25px; border: 1px solid #E6E6E6; max-width: 220px; border-radius: 5px; padding: 5px 10px; }
			#idstudies_talk2me div.container div.chat div.body div.message.costumer div { background-color: #ffffff; }
			#idstudies_talk2me div.container div.chat div.body div.message.operator div { background-color: #FAFAFA; }
				#idstudies_talk2me div.container div.chat div.body div.message div p { display: block; position: relative; }
				#idstudies_talk2me div.container div.chat div.body div.message div p.author { font-size: 8px; line-height: 15px; color: #666666; }
				#idstudies_talk2me div.container div.chat div.body div.message div p.text { font-size: 10px; line-height: 20px; color: #232323; white-space: normal; }
	#idstudies_talk2me div.container div.chat form { display: block; position: relative; width: 100%; height: 74px; font-size: 0; text-align: center; border-top: 1px solid #D1D5D7; margin: 0; }
		#idstudies_talk2me div.container div.chat form input[type="text"] { display: inline-block; position: relative; width: 238px; height: 45px; line-height: 45px; border: 1px solid #B1B1B1; vertical-align: middle; background-color: #FCFCFC; margin: 0 auto; font-size: 11px; color: #949494; padding: 0 10px; }
		#idstudies_talk2me div.container div.chat form input[type="text"]
		{
			-webkit-box-sizing: content-box;
			   -moz-box-sizing: content-box;
			    -ms-box-sizing: content-box;
			        box-sizing: content-box;

			-webkit-box-shadow: inset 0 0 1px #B1B1B1;
		       -moz-box-shadow: inset 0 0 1px #B1B1B1;
		            box-shadow: inset 0 0 1px #B1B1B1;
		}
		#idstudies_talk2me div.container div.chat form input[type="text"].error
		{
			border: 1px solid #B81D1D;

			-webkit-box-shadow: inset 0 0 1px #B81D1D;
		       -moz-box-shadow: inset 0 0 1px #B81D1D;
		            box-shadow: inset 0 0 1px #B81D1D;
		}
		#idstudies_talk2me div.container div.chat form input[type="submit"] { display: inline-block; position: relative; width: 100px; height: 45px; line-height: 45px; border: none; background-color: #1D75B8; border-radius: 5px; vertical-align: middle; margin: 0 0 0 10px; font-weight: bold; color: #ffffff; cursor: pointer; }
			#idstudies_talk2me div.container div.chat form input[type="submit"]:hover { background-color: #398ECF; }


/* ================================================================================================================== */
/* AVALIACAO */
/* ================================================================================================================== */

#idstudies_talk2me div.container div.evaluation { display: none; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
#idstudies_talk2me[data-screen="evaluation"] div.container div.evaluation { display: block; }
	#idstudies_talk2me div.container div.evaluation div.header { display: block; position: relative; width: 100%; height: 25px; background-color: #F7F8F9; margin: 0; border-radius: 10px 10px 0 0; }
		#idstudies_talk2me div.container div.evaluation div.header h3 { display: block; position: relative; width: 100%; text-align: center; font-size: 12px; color: #666666; line-height: 25px; }
	#idstudies_talk2me div.container div.evaluation form { display: block; position: relative; width: 100%; font-size: 0; height: 394px; text-align: center; border-top: 1px solid #D1D5D7; margin: 0; padding: 40px 0; }
		#idstudies_talk2me div.container div.evaluation form label { display: block; position: relative; width: 300px; font-size: 12px; line-height: 20px; margin: 0 auto 15px auto; color: #666666; text-align: left; }
		#idstudies_talk2me div.container div.evaluation form div.classification { display: block; position: relative; width: 300px; font-size: 0; height: 23px; margin: 0 auto 40px auto; text-align: left; }
			#idstudies_talk2me div.container div.evaluation form div.classification span.star { display: inline-block; position: relative; width: 24px; height: 23px; background: transparent url(../src/img/classification.png) no-repeat; cursor: pointer; margin: -10px 10px 0 0; }
			#idstudies_talk2me div.container div.evaluation form div.classification span.star[data-selected="false"] { background-position: 0 0; }
			#idstudies_talk2me div.container div.evaluation form div.classification span.star[data-selected="true"] { background-position: 0 -23px; }
			#idstudies_talk2me div.container div.evaluation form label textarea { display: block; position: relative; width: auto; min-width: 278px; height: 45px; line-height: 45px; border: 1px solid #B1B1B1; vertical-align: middle; background-color: #FCFCFC; margin: 0 auto; font-size: 11px; color: #949494; padding: 0 10px; margin: 0 auto; resize: none; line-height: 25px; height: 100px; }
			#idstudies_talk2me div.container div.evaluation form input[type="submit"] { display: block; position: relative; width: 100px; height: 45px; line-height: 45px; border: none; background-color: #1D75B8; border-radius: 5px; vertical-align: middle; margin: 45px auto 0 auto; font-weight: bold; color: #ffffff; cursor: pointer; }
			#idstudies_talk2me div.container div.evaluation form input[type="submit"]:hover { background-color: #398ECF; }