/*Estilos para la ventana INGRESO*/

#header{
background-color: #000;
width:100%;
background-image:url(../png/dv7chat.png);
background-position:20px center;
height:70px;
background-repeat:no-repeat;
//margin-left:2%;
//padding:2%;
}

#header2{
background-color: #000;
width:100%;
background-image:url(../png/dv7chat.png);
background-position:20px center;
height:70px;
background-repeat:no-repeat;
//margin-left:2%;
//padding:2%;
}

#contain-ingreso{
width:100%;
/*margin-left:2%;*/
background-color:#ededed;
float:left;
text-align:left;
position:static;
/*position:relative;*/
}

#chateando-con{
width:calc(28% - 40px);
float:right;
height:40px;
margin-top:15px;
background-color:#666;
margin-right:40px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

#chateando-con-cliente{
width:calc(28% - 40px);
float:right;
height:40px;
margin-top:15px;
background-color:#666;
margin-right:40px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

#chateando-con img{
height:40px;
width:auto;
float:left;
clear:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

#chateando-nombre{
color:#CCC;
font-size:13px;
line-height:16px;
vertical-align:middle;
text-align:left;
padding-top:5px;
margin-left:10px;
float:left;
}

#boton-buscador{
margin-right:10px;
background-color:#333;
color:#FFF;
text-align:right;
height:40px;
border-radius:10px;
float:right;
line-height:40px;
font-size:13px;
cursor:pointer;
padding-right:10px;
padding-left:30px;
background-image:url(../png/vendedor-buscador.png);
background-position:left center;
background-repeat:no-repeat;
//font-family: 'Source Sans Pro', sans-serif;
font-family: 'PT Sans', sans-serif;
margin-top:15px;
}

#boton-terminarsesion{
margin-right:10px;
background-color:#333;
color:#FFF;
text-align:right;
height:40px;
border-radius:10px;
float:right;
line-height:40px;
font-size:13px;
cursor:pointer;
padding-right:10px;
padding-left:30px;
background-image:url(../png/vendedor-cerrar.png);
background-position:1px center;
background-repeat:no-repeat;
//font-family: 'Source Sans Pro', sans-serif;
font-family: 'PT Sans', sans-serif;
margin-top:15px;
}


#boton-reset-charla{
margin-right:10px;
background-color:#333;
color:#FFF;
text-align:right;
height:40px;
border-radius:10px;
float:right;
line-height:40px;
font-size:13px;
cursor:pointer;
padding-right:10px;
padding-left:30px;
background-image:url(../png/reset-charla.png);
background-position:1px center;
background-repeat:no-repeat;
//font-family: 'Source Sans Pro', sans-serif;
font-family: 'PT Sans', sans-serif;
margin-top:15px;
}

#boton-reset-descuento{
margin-right:10px;
background-color:#333;
color:#FFF;
text-align:right;
height:40px;
border-radius:10px;
float:right;
line-height:40px;
font-size:13px;
cursor:pointer;
padding-right:10px;
padding-left:30px;
background-image:url(../png/reset-descuento.png);
background-position:1px center;
background-repeat:no-repeat;
//font-family: 'Source Sans Pro', sans-serif;
font-family: 'PT Sans', sans-serif;
margin-top:15px;
}

#boton-reset-pedido{
margin-right:10px;
background-color:#333;
color:#FFF;
text-align:right;
height:40px;
border-radius:10px;
float:right;
line-height:40px;
font-size:13px;
cursor:pointer;
padding-right:10px;
padding-left:30px;
background-image:url(../png/reset-pedidos.png);
background-position:1px center;
background-repeat:no-repeat;
//font-family: 'Source Sans Pro', sans-serif;
font-family: 'PT Sans', sans-serif;
margin-top:15px;
}


#boton-clientes-espera{
margin-right:10px;
background-color:#333;
color:#FFF;
text-align:right;
height:40px;
border-radius:10px;
float:right;
line-height:40px;
font-size:13px;
cursor:pointer;
padding-right:10px;
padding-left:30px;
background-image:url(../png/en-espera.png);
background-position:1px center;
background-repeat:no-repeat;
//font-family: 'Source Sans Pro', sans-serif;
font-family: 'PT Sans', sans-serif;
margin-top:15px;
}


#boton-terminarsesion br{
display:none;
visibility:hidden;
}

#boton-buscador:hover, #boton-terminarsesion:hover, #boton-reset-pedido:hover, #boton-reset-charla:hover, #boton-reset-descuento, boton-clientes-espera:hover{
background-color:#666;
}

#paso1 h1{
font-family: 'Cuprum', sans-serif;
font-size:20px;
margin:0 auto;
color:#000;
padding-bottom:15px;
margin-top:30px;
float:left;
}

.mensaje{
background-color:#C00;
color:#FFF;
float:left;
margin-top:30px;
margin-left:30px;
border-radius:5px;
line-height:16px;
padding:3px;
font-size:13px;
visibility:hidden;
}

#paso2 h1{
width:100%;
font-family: 'Cuprum', sans-serif;
font-size:20px;
margin:0 auto;
color:#000;
margin-top:30px;
}

#paso1{
width:80%;
border-bottom:2px;
border-bottom-color:#000;
border-bottom-style:solid;
float:left;
margin-left:10%;
padding-bottom:20px;
}

#paso2{
width:80%;
float:left;
margin-left:10%;
padding-bottom:60px;
}

#celdas-vendedores{
margin:0 auto;
width:100%;
}

#contain-ingreso p{
width:50%;
font-size:13px;
color:#666;
font-weight:400;
font-family: 'Cuprum', sans-serif;
float:right;
padding:0;
margin-top:-58px;
line-height:16px;
}

#contain-ingreso #msg-al-vendedor{
width:50%;
float:right;
padding:0;
margin-top:20px;
}

#contain-ingreso #msg-al-vendedor textarea{
width:90%;
outline:none;
padding:5px;
font-size:13px;
line-height:16px;
font-family: 'PT Sans', sans-serif;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:2px;
border-color:#cacacb;
border-style:solid;
min-height:50px;
}

#datos-ingreso{
width:50%;
float:left;
clear:left;
}

#datos-ingreso2{
width:50%;
float:left;
clear:left;
margin-top:20px;
}

#datos-ingreso2 #verifique{
color:#000;
width:calc(80% - 20px);
float:left;
font-family: 'Cuprum', sans-serif;
font-size:14px;
background-color:transparent;
border:0px;
border-color:#cacacb;
border-style:solid;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
text-align:left;
padding-left:0px;
padding-top:5px;
padding-right:10px;
}

#datos-ingreso #lblnombre, #datos-ingreso2 #lblemail{
color:#999;
float:left;
font-family: 'Cuprum', sans-serif;
font-size:15px;
margin-bottom:5px;
width:80%;
}

#nombre{
float:left;
clear:left;
width:calc(80% - 10px);
height:20px;
margin:0;
outline:none;
padding:5px;
font-size:14px;
font-family: 'PT Sans', sans-serif;
border:2px;
border-color:#b2b3b5;
border-style:solid;
background-color:#FFF;
border-radius:5px;
opacity:0.6;
}

#datos-ingreso a{
text-decoration:none;
}

#email{
float:left;
clear:left;
width:calc(80% - 10px);
height:20px;
margin:0;
outline:none;
padding:5px;
font-size:14px;
font-family: 'PT Sans', sans-serif;
border:2px;
border-color:#b2b3b5;
border-style:solid;
background-color:#FFF;
border-top-left-radius:5px;
border-top-right-radius:5px;
opacity:0.6;
}

#nombre:focus, #email:focus{
opacity:100;
}

#vendedor{
width:150px;
float:left;
margin-right:30px;
margin-top:30px;
}

.datos{
font-family: 'Cuprum', sans-serif;
font-size:15px;
font-weight:700;
text-align: right;
vertical-align: middle;
padding-right: 10px;
}

.motivo{
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
border-bottom-width: 1px;
border-bottom-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}

#vendedor-estado{
width:100%;
text-align:center;
background-color:#e4e4e4;
}

#vendedor-foto{
width:150px;
height:150px;
text-align:center;
background-color:#FFF;
line-height:147px;
padding:0;
display:block;
}

#vendedor-sinfoto{
width:150px;
height:150px;
text-align:center;
background-color:#FFF;
background-image:url(../png/sinfoto.png);
background-repeat:no-repeat;
background-position:center center;
}

#vendedor-foto img{
vertical-align: middle;
}

#vendedor-nombre {
width:150px;
height:30px;
display:table-cell;
vertical-align:middle;
font-family: 'Cuprum', sans-serif;
font-size:15px;
text-align:center;
color:#FFF;
background-color:#000;
/*border-bottom-left-radius:8px;
border-bottom-right-radius:8px;*/
vertical-align: middle;
}

.ingresar-chat{
text-align: center;
vertical-align: middle;
}

.obligatorio{
color: #fff;
font-family: 'Cuprum', sans-serif;
font-size:15px;
background-color:#000;
font-weight: 700;
border-radius:100%;
width:20px;
height:15px;
float:right;
text-align:center;
padding-top:5px;
}

.aclaracion{
font-family: 'Cuprum', sans-serif;
font-size:13px;
color:#000;
font-weight: 700;
}
	
/*Corresponde al espacio central del header*/

#vendedor-disponible{
font-family: 'Cuprum', sans-serif;
font-size:15px;
font-weight:700;
text-align: right;
vertical-align: middle;
border-top-left-radius:10px;
border-top-right-radius:10px;
background-color:#019160;
width:145px;
height:35px;
color:#fff;
display:table-cell;
padding-right:5px;
background-image:url(../png/conectado.png);
background-repeat:no-repeat;
background-position:5px center;
opacity:0.5;
}

#vendedor-inactivo{
font-family: 'Cuprum', sans-serif;
font-size:15px;
font-weight:700;
text-align: right;
vertical-align: middle;
border-top-left-radius:10px;
border-top-right-radius:10px;
background-color:#b80000;
width:145px;
height:35px;
color:#fff;
display:table-cell;
padding-right:5px;
background-image:url(../png/desconectado.png);
background-repeat:no-repeat;
background-position:5px center;
opacity:0.5;
}

#vendedor-ocupado{
font-family: 'Cuprum', sans-serif;
font-size:15px;
font-weight:700;
text-align: right;
vertical-align: middle;
border-top-left-radius:10px;
border-top-right-radius:10px;
background-color:#dead03;
width:145px;
height:35px;
color:#fff;
display:table-cell;
padding-right:5px;
background-image:url(../png/ocupado.png);
background-repeat:no-repeat;
background-position:5px center;
opacity:0.5;
}

#iniciar{
width:calc(100% - 4px);
height:26px;
float:left;
font-family: 'Cuprum', sans-serif;
font-size:15px;
text-align:center;
line-height:30px;
border:2px;
border-color:#000;
border-style:solid;
margin-top:5px;
cursor:pointer;
-webkit-transition:  all .5s ease;
-moz-transition:  all .5s ease;
-o-transition:  all .5s ease;
transition: all .5s ease;
}

#boton-vacio{
width:calc(100% - 4px);
height:26px;
float:left;
line-height:30px;
border:2px;
border-color:#ededed;
border-style:solid;
margin-top:5px;
}

#iniciar:hover{
background-color:#000;
color:#FFF;
-webkit-transition:  all .5s ease;
-moz-transition:  all .5s ease;
-o-transition:  all .5s ease;
transition: all .5s ease;
}

#enlista{
width:calc(100% - 4px);
height:26px;
float:left;
font-family: 'Cuprum', sans-serif;
font-size:15px;
text-align:center;
line-height:30px;
border:2px;
border-color:#999;
border-style:solid;
margin-top:5px;
color:#999;
cursor:pointer;
-webkit-transition:  all .5s ease;
-moz-transition:  all .5s ease;
-o-transition:  all .5s ease;
transition: all .5s ease;
}

#enlista:hover{
background-color:#999;
color:#FFF;
-webkit-transition:  all .5s ease;
-moz-transition:  all .5s ease;
-o-transition:  all .5s ease;
transition: all .5s ease;
}

@media (max-width:1200px){
.mensaje{
clear:left;
margin-top:0px;
margin-bottom:20px;
margin-left:0px;
border-radius:5px;
}

}
@media (max-width:1150px){
#chateando-con, #chateando-con-cliente{
width:calc(40% - 40px);
}

}
@media only screen and (max-width:1000px){
#iniciar{
width:90%;
margin-left:4%;
}

#boton-vacio{
width:100%;
}

#enlista{
width:90%;	
margin-left:4%;
}



#boton-reset-charla{	
line-height:15px;
font-size:13px;
padding-top:4px;
height:36px;
}

#boton-reset-charla br{
display:block;
visibility:visible;
}	

#boton-reset-descuento{	
line-height:15px;
font-size:13px;
padding-top:4px;
height:36px;
}

#boton-reset-descuento br{
display:block;
visibility:visible;
}

#boton-reset-pedido{	
line-height:15px;
font-size:13px;
padding-top:4px;
height:36px;
}

#boton-clientes-espera{	
line-height:15px;
font-size:13px;
padding-top:4px;
height:36px;
}


#boton-reset-pedido br{
display:block;
visibility:visible;
}	




#boton-terminarsesion{	
line-height:15px;
font-size:13px;
padding-top:4px;
height:36px;
}

#boton-terminarsesion br{
display:block;
visibility:visible;
}

}
@media (max-width:900px){

#contain-ingreso p{
width:100%;
float:left;
clear:left;
margin-top:20px;	
}

#contain-ingreso #msg-al-vendedor{
width:100%;
float:left;
clear:left;
padding:0;
margin-top:20px;
}

#contain-ingreso #msg-al-vendedor textarea{
width:90%;
min-height:70px;
}

#datos-ingreso{
width:50%;
float:left;
clear:left;
}

#datos-ingreso2{
clear:none;
margin-top:0px;
}	

#datos-ingreso label, #datos-ingreso2 label{
color:#999;
float:left;
font-family: 'Cuprum', sans-serif;
font-size:15px;
margin-bottom:5px;
width:90%;
}

#nombre, #email{
float:left;
clear:left;
width:89%;
height:20px;
margin:0;
outline:none;
padding:5px;
font-size:14px;
font-family: 'PT Sans', sans-serif;
border:2px;
border-color:#b2b3b5;
border-style:solid;
background-color:#FFF;
opacity:0.6;
text-transform:lowercase;
}

#datos-ingreso2 #verifique{
width:89%;
}

#paso1{	
padding-bottom:10px;
}

#paso2{
width:80%;
float:left;
margin-left:10%;
padding-bottom:50px;
}

#chateando-con{
width:39%;
}

#chateando-con-cliente{
width:35%;
margin-right:20px;
}

}

@media (max-width:850px){

#chateando-con-cliente{
width:98%;
margin-left:20px;
clear:right;
float:left;
text-align:center;
height:25px;
line-height:25px;
margin-top:25px;
}

#chateando-nombre{
padding-top:5px;
margin-left:10px;
}

#chateando-con-cliente br{
display:none;
visibility:hidden;
}

#chateando-con br{
display:block;
visibility:visible;
}

#nombre-cliente{
padding-left:5px;
}

#header2{	
background-image:url(../png/dv7chat2.png);
background-position:20px 20px;
height:95px;
}

#boton-buscador{
margin-top:-70px;
margin-right:140px;
}

#boton-terminarsesion{
margin-top:-70px;
margin-right:45px;
}

#boton-reset-pedido{
margin-top:-70px;
margin-right:45px;
}

#boton-clientes-espera{
margin-top:-70px;
margin-right:45px;
}

#boton-reset-charla{
margin-top:-70px;
margin-right:45px;
}

#boton-reset-descuento{
margin-top:-70px;
margin-right:45px;
}

#chateando-con{
width:calc(60% - 20px);
margin-right:20px;
}

}
@media (max-width:768px){
#header {	
background-image:url(../png/dv7chat2.png);
}/*

#nombre:focus, #email:focus {
opacity:100;
position:relative;
}

#paso1:hover{
	position:relative;	
}*/

#paso1 h1{
font-family: 'Cuprum', sans-serif;
margin:0 auto;
padding-bottom:0px;
margin-top:20px;
float:left;
}

#paso2 h1{
font-family: 'Cuprum', sans-serif;
margin:0 auto;
padding-bottom:0px;
margin-top:20px;
float:left;
}
}

@media (max-width:600px){
#datos-ingreso{
width:100%;
float:left;
clear:left;
}

#datos-ingreso2{
clear:left;
width:100%;
margin-top:20px;
}

}
@media (max-width:450px){
#chateando-con{
width:calc(50% - 10px);
margin-right:10px;
}

#chateando-nombre{
font-size:11px;
line-height:15px;
float:left;
padding-top:5px;
margin-left:2px;
}

#boton-buscador{
font-size:12px;
height:25px;
line-height:25px;
margin-right:40px;
width:30%;
text-align:center;
margin-top:-85px;
}

#boton-terminarsesion{
font-size:12px;
height:25px;
line-height:25px;
padding-top:0px;
margin-top:-55px;
margin-right:40px;
width:30%;
}

#boton-reset-pedido{
font-size:12px;
height:25px;
line-height:25px;
padding-top:0px;
margin-top:-55px;
margin-right:40px;
width:30%;
}

#boton-reset-charla{
font-size:12px;
height:25px;
line-height:25px;
padding-top:0px;
margin-top:-55px;
margin-right:40px;
width:30%;
}

#boton-reset-descuento{
font-size:12px;
height:25px;
line-height:25px;
padding-top:0px;
margin-top:-55px;
margin-right:40px;
width:30%;
}

#boton-terminarsesion br{
display:none;
}

#boton-reset-pedido br{
display:none;
}

#boton-clientes-espera br{
display:none;
}

#boton-reset-charla br{
display:none;
}

#boton-reset-descuento br{
display:none;
}

#header2{	
background-image:url(../png/dv7chat2.png);
background-position:20px 20px;
height:105px;
}

#chateando-con-cliente{
width:calc(100% - 40px);
margin-left:20px;
clear:right;
float:left;
text-align:center;
height:25px;
line-height:25px;
margin-top:35px;
}
}

@media (max-width:370px){

#chateando-con img{
visibility:hidden;
display:none;
}

#chateando-nombre{
margin-left:5px;
}

}
@media (max-width:350px){

#header{	
background-image:url(../png/dv7chat3.png);
background-position:10px 20px;
}

#header2{	
background-image:url(../png/dv7chat3.png);
background-position:10px 20px;
}
}

@media (max-width:330px){
	
#boton-buscador{
width:32%;
font-size:11px;
padding-right:5px;
}

#boton-terminarsesion{	
width:32%;
font-size:11px;
padding-right:5px;
}

#boton-reset-pedido{	
width:32%;
font-size:11px;
padding-right:5px;
}

#boton-clientes-espera{	
width:32%;
font-size:11px;
padding-right:5px;
}

#boton-reset-charla{	
width:32%;
font-size:11px;
padding-right:5px;
}

#boton-reset-descuento{	
width:32%;
font-size:11px;
padding-right:5px;
}

}