@charset "iso-8859-1";
/* CSS Document */

/* TELA INICIAL */
*                             { font-family:Verdana, Arial, sans-serif; }
body                          { padding:0px; border:0px; margin:0px; background:url('../imagens/background4.png'); font-size:14px; color:#3c3c3c; }
p                             { padding:0px; margin:0px; line-height:normal; }
.box                          { position: relative; width: 96%; height: 96%; background: #efefef; margin: 1% 2% 0 2%; border: 1px solid #c5c5c5; border-radius: 4px; box-shadow: 2px 2px 9px rgba(0,0,0,0.25); overflow: hidden; padding-bottom: 20px; }
.topo                         { background:url('../imagens/topo_foto.png') no-repeat top left; height:119px; width:100%; }
.logo-cliente                 { float: right; height: 70px; width: 145px; overflow: hidden; margin: 15px 15px 0 0; padding: 10px; border: 1px solid #d6d6d6; background: #fff; border-radius: 6px; box-shadow: inset 0px 0px 7px #c5c5c5;}
    .logo-cliente img         { }
.barra                        { height:37px; background:url('../imagens/back-barra.png'); text-indent:30px; color:#ffffff; }
    .barra p                  { padding:2px; }
    .barra p.bem-vindo        { padding:11px; text-align:center; }
.meio                         { height:324px; }
.rodape                       { position: absolute; width: 100%; height: 20px; bottom: 0px; background: #3a5f71; font-size: 9px; padding: 6px 0px 2px; }
.copyright					  { width:100%; margin:0px; background:none; font-size:9px; padding:5px 0px; color:#3a5f71; text-align:center; }
.rodape .status				  { width: 103px; padding-left: 47%; color:#ffffff;}
.rodape .status	p			  { width: 70px; float:left; color:#ffffff; padding:0px 8px 0px 0px; text-align:left;}
.rodape .status img			  { float:left; width:12px;}

/* FILA DE ESPERA */
.fila                         { text-align:center; float:left; width:100%; height:100%; }
    .fila p                   { display:block; padding:10px; margin:210px 50px; font-size:14px; color:#dfdfdf; background:#2b3e55; border-radius:3px; box-shadow:2px 2px 2px rgba(0,0,0,0.25); }

/* LOGIN */
.login                        { width:100%; padding:50px 0px; }
    .login .labels            { width:70px; text-align:right; line-height:33px; float:left; margin-left:80px; }
        .login .labels label  { width:70px; display:inline-block; }
    .login .inputs            { width:200px; float:left; margin-left:5px; line-height:33px; margin-bottom:20px; }
        .login .inputs input,
        .login .inputs select { width:200px; margin:0px; border:1px solid #d6d6d6; display:inline-block; background:#f2f2f2 url('../imagens/back-inputs.png') repeat-x top left; border-radius:3px; padding:4px 7px; }
        .login .inputs select { width:216px; }
	.login textarea            { border-radius:3px; padding:4px 7px; background:#f2f2f2; border:1px solid #a4a4a4; width:200px; height:26px; float:left; }
    .login .bt-entrar         { clear:both; display:block; margin:0 auto; width:157px; height:44px; border:0px; padding:0px; background:url('../imagens/iniciar-atendimento.png') no-repeat top left; font-size:10px; color:#ffffff; text-shadow:1px 1px #454545; text-indent:-10px; cursor:pointer; }
    .login .bt-entrar:hover   { background-position:top right; }

/* CHAT */
.falando                      { font-size:10px; }
.botoes                       { float:right; width:90px; margin-top:6px; }
    .botoes a                 { float:right; margin:0px; border:0px; padding:0px; text-indent:-999px; overflow:hidden; width:25px; height:25px; margin-right:5px; }
	    .botoes a.mail        { background:url('../imagens/mail.png') no-repeat top left; }
	    .botoes a.mail:hover  { background-position:top right; }
	    .botoes a.smile       { background:url('../imagens/smile.png') no-repeat top left; }
	    .botoes a.smile:hover { background-position:top right; }
	    .botoes a.close       { background:url('../imagens/xis.png') no-repeat top left; }
	    .botoes a.close:hover { background-position:top right; }
.chat                         { width:100%; height:324px; }
    .chat .conversa           { width:100%; overflow:auto; height:257px; margin-top:10px; background:#ffffff; }
	.chat .chatbox            { padding:5px; margin-left:10px; }
	.chat .nome-hora          { padding-bottom:7px; margin-right:10px; text-indent:10px; margin-top:8px; border-left:1px solid #ff0000; height:5px; border-bottom:1px solid #ff0000; line-height:0px; }
	.chat .nome               { font-weight:bold; font-size:11px; color:#ff0000; float:left; }
	.chat .hora               { float:right; color:#868686; margin-right:5px; font-size:10px; }
	.chat .texto              { color:#3c3c3c; border-radius:4px; padding:5px; border:1px solid #eaeaea; margin-top:5px; margin-right:10px; background:url('../imagens/back-chat.png') repeat-x top left; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; }
.atendente .nome-hora         { border-left-color:#227acc; border-bottom-color:#227acc; }
.atendente .nome              { color:#227acc;}
.cliente .nome-hora           { border-left-color:#ff7e00; border-bottom-color:#ff7e00; }
.cliente .nome                { color:#ff7e00; }

.cliente .nome-hora-alerta           { padding:8px 5px 10px 10px; margin:8px 10px 0 0; border:1px solid #ae0000; height:10px; }
.cliente .nome-alerta                { float:left; margin-right:5px; font-size:10px; color:#ae0000; font-weight:bold;  }
.cliente .hora-alerta                { float:right; color:#868686; margin-right:5px; font-size:10px; }

	.chat .digitar			  { text-align:center; }
	.chat .transformar-cliente 			{ display: inline-block; margin:7px 20px 0 0; width:167px; height:29px; padding:15px 0 0 20px; border:0px; background:url('../imagens/transformar-cliente.png') no-repeat top left; font-size:10px; color:#ffffff; text-shadow:1px 1px #454545; text-decoration:none; text-align:left; cursor:pointer;}
	.chat .transformar-cliente:hover 	{ background-position:top right;}
	.chat .enviar-transcricao 			{ display: inline-block; margin-top: 7px; width:137px; height:29px; padding:15px 0 0 20px; border:0px; background:url('../imagens/enviar-transcricao.png') no-repeat top left; font-size:10px; color:#ffffff; text-shadow:1px 1px #454545; text-decoration:none; text-align:left; cursor:pointer;}
	.chat .enviar-transcricao:hover 	{ background-position:top right;}	
	.chat textarea            { border-radius:4px; background:#ffffff; border:1px solid #a4a4a4; margin:8px; padding:7px; width:409px; height:26px; float:left; }
	.chat .send               { float:left; margin:0px; padding:0px; background:url('../imagens/send3.png') no-repeat top left; width:29px; height:41px; border:0px; cursor:pointer; margin-top:8px; }
	.chat .send:hover         { background-position:bottom left; }

/* FINALIZADO */
.finalizado                   { text-align:center; float:left; width:100%; height:100%; }
    .finalizado p             { display:block; padding:10px; margin:150px 50px; font-size:14px; color:#dfdfdf; background:#52763a; border-radius:3px; box-shadow:2px 2px 2px rgba(0,0,0,0.25); }

/* ALERT */
.alert                        { position:fixed; width:330px; margin-left:-175px; left:50%; top:430px; text-align:center; padding:10px; border-radius:4px; background-color:#f2f2f2; border:1px solid #e6e6e6; font-size:11px; z-index:999; }
    .alert.erro               { background-color:#e09696; border:1px solid #c88282; color:#710000; }
    .alert.sucesso            { background-color:#c1f4b9; border:1px solid #73b771; color:#255832; }

/* ESPERA */
.espera                       { float:left; width:418px; height:264px; padding:30px; overflow:auto; }
	.espera h1                { text-align:center; font-family:Calibri, sans-serif; padding:0px; margin:0px; line-height:normal; margin-top:-15px; margin-bottom:10px; }
	.espera a                 { background:url('../imagens/botoes-espera.png') no-repeat top left; width:419px; height:27px; float:left; margin-bottom:5px; font-size:11px; font-weight:bold; color:#ffffff; text-decoration:none; line-height:25px; text-indent:15px; text-shadow:1px 1px 0px #000000; }
	.espera a.urgente .tempo  { color:#8d0202; }
	.espera a.demorado        { background-position:0px -27px; }
	.espera a.demorado .tempo { color:#c66006; }
	.espera a.iniciado        { background-position:0px -54px; }
	.espera a.iniciado .tempo { color:#2c7a2c; }
	.espera a .tempo          { float:right; font-size:9px; text-shadow:none; margin-right:10px; line-height:27px; }
	
/*EMAIL*/