/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 21/09/2018, 12:45:54
    Author     : Aldana
*/

.cuenta-menu-izquierdo{
    
}
.cuenta-menu-izquierdo ul{
    list-style: none;
    letter-spacing: -0.3px;
    color: #666666;
    
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
    border: solid 1px #eaeaea;
    
    padding: 1em 0 1em 3em;
}

.cuenta-menu-izquierdo ul li{
    border-bottom: solid 1px #eaeaea;
    padding: 1em;
}

.cuenta-menu-izquierdo ul li:first-of-type{
    border-top: solid 1px #eaeaea;
}

.cuenta-menu-izquierdo ul li:hover{
    color: #ff0000;
    text-decoration: none;
    cursor: pointer;
}

.cuenta-menu-izquierdo ul li img{
    margin-right: 1em;
}

.cuenta-menu-izquierdo ul li.activo{
    font-family: Nunito;
    background-image: url('../img/flecha-r_g.svg');
    background-repeat: no-repeat;/* Do not repeat the image */
    background-color: transparent;
    background-position: right;
    background-position-x: 85%; /* Center the image */
}

.cuenta-menu-izquierdo ul li.activo{
    color: #000000;
}

.cuenta-menu-izquierdo ul li span{
  border-radius: 9px;
  background-color: #000000;
  
  font-family: Nunito;
  font-size: 0.85em;
  color: #ffffff;
  padding: 0.2em 1em;
}

.cuenta-contenido {
    margin-bottom: 1em;
}

.cuenta-contenido > div {
    display: none;
    
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
    border: solid 1px #eaeaea;
    padding: 0;
}

.cuenta-contenido > .perfil{
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

.cuenta-contenido .perfil .superior > .datos{
  text-align: center;
}

.cuenta-contenido h1{
    font-family: Nunito;
    font-size: 2.3em;
    color: #000000;
    text-align: center;
}

.cuenta-contenido .perfil .superior > .datos h2{
  font-family: Nunito;
  font-size: 1.4em;
  color: #000000;
}

.cuenta-contenido .perfil .superior > .datos p{
  color: #666666;
}

.cuenta-contenido button.blanco{
  height: 44px;
  border-radius: 8px;
  border: solid 1px #000000;
  background-color: #ffffff;
  
  font-size: 0.85em;
  color: #000000;
  text-transform: uppercase;
}

.cuenta-contenido a.blanco{
  height: 44px;
  border-radius: 8px;
  border: solid 1px #000000;
  background-color: #ffffff;

  font-size: 0.85em;
  color: #000000;
  text-transform: uppercase;
}

.cuenta-contenido button.blanco-r{
  height: 44px;
  border-radius: 8px;
  border: solid 1px #ff0010;
  background-color: #ffffff;
  
  font-size: 0.85em;
  text-align: center;
  color: #ff0010;
  text-transform: uppercase;
}

.cuenta-contenido a.blanco-r{
  height: 44px;
  border-radius: 8px;
  border: solid 1px #ff0010;
  background-color: #ffffff;
  
  font-family: SFProText-Medium;
  font-size: 0.85em;
  text-align: center;
  color: #ff0010;
  text-transform: uppercase;
}

.cuenta-contenido .perfil .superior > .datos img {
  width: 100px;
  height: 100px;
  background-color: #fafafa;
  border: solid 1px #eaeaea;
}

.cuenta-contenido .perfil .superior > .datos .field-frontuser-foto{
    margin: 0 13%;
}

.cuenta-contenido .perfil .superior > .datos .fileinput-remove{
    position: relative;
}

.cuenta-contenido .perfil .superior > .datos .file-loading{
    width:100%;
}

.cuenta-contenido > .perfil > div{
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
    border: solid 1px #eaeaea;
    padding: 1em;
    margin-bottom: 1em;
}

.cuenta-contenido > .perfil > form > div{
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
    border: solid 1px #eaeaea;
    padding: 1em;
    margin-bottom: 1em;
}

.cuenta-contenido > .perfil > .superior form label{
    cursor: pointer;
}

.cuenta-contenido .formulario-1 > div label{
    font-family: Nunito;
    font-size: 0.85em;
    color: #000000;
    text-transform: uppercase;
}

.cuenta-contenido .formulario-1 > div input{
  font-size: 1em;
  color: #000000;
  
  height: 3.05em;
  border-radius: 8px;
  background-color: #ffffff;
  border: solid 1px #eaeaea;
}

.cuenta-contenido .formulario-1 > div button.guardar{
    font-family: Nunito;
    font-size: 1em;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 8px;
    background-color: #ff0010;
}



/*historial*/

.cuenta-contenido > .historial .un-pedido{
    border-bottom: solid 1px #eaeaea;
    margin: 1em 0;
    padding: 1em 2em;
}

.cuenta-contenido > .historial .un-pedido span.fecha {
  font-size: 0.85em;
  color: #ff0010;
  float: right;
}

.cuenta-contenido > .historial ul{
  font-size: 0.85em;
  color: #666666;
  list-style: none;
  padding-left: 0;
}

.cuenta-contenido > .historial ul span{
  font-size: 1em;
  color: #000000;
}

.cuenta-contenido > .historial a.blanco{
    width: 100%;
    margin-top: 1em;
  padding: 1em;
  border-radius: 8px;
  border: solid 1px #eaeaea;
  
    font-size: 0.85em;
    font-weight: 500;
    color: #000000;
    text-transform: uppercase;
}

.cuenta-contenido > .historial a.rojo{
    font-family: Nunito;
    font-size: 1em;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;

    width: 100%;
    height: 44px;
    border: none;
    border-radius: 8px;
    background-color: #ff0010;
    
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
}

/*monedas*/

.cuenta-contenido .monedas > p{
  color: #999999;
  text-align: center;
}

.cuenta-contenido .monedas p>span{
  color: #000000;
}

.cuenta-contenido .monedas a.rojo{
    background-color: #ff0000;
    font-family: Nunito;
    font-size: 0.85em;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1em;
    border: none;
    border-radius: 8px;
}

.cuenta-contenido .monedas a.rojo.hidden-xs{
    margin-bottom: -4em;
    margin-top: 1em;
    margin-right: 1em;
}

.cuenta-contenido .monedas a.rojo.hidden-md{
    width: 17em;
    margin-bottom: 1em;
    margin-top: 1em;
}

.cuenta-contenido .monedas > div:first-of-type{
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
}

.cuenta-contenido .monedas img{
  width: 45px;
  object-fit: contain;
}

.cuenta-contenido .monedas .botones{
  padding-top: 1em;
  margin-bottom: 2em;
}

.cuenta-contenido .monedas .botones button{
    width: 100%;
}

.cuenta-contenido .monedas .botones a{
    width: 100%;
    padding: 1em;
}
.cuenta-contenido .monedas .instrucciones{
    padding: 2em;
    border-top: solid 1px #eaeaea;
}

.cuenta-contenido .monedas .instrucciones p{
  color: #444444;
  text-align: justify;
  line-height: 2;
}

.cuenta-contenido .monedas .instrucciones h4{
  font-size: 1em;
  font-family: Nunito;
  line-height: 2;
  color: #000000;
  text-transform: uppercase;
}

.cuenta-contenido .monedas .instrucciones p span.negro{
    color: #000000;
    text-transform: uppercase;
}

.cuenta-contenido .monedas .instrucciones p span.rojo{
  color: #ff0000;
}

.cuenta-contenido .monedas .instrucciones p span.circulo{
    font-family: Nunito;
    font-size: 0.85em;
    color: #4a4a4a;

    background-image: url("../img/check-off.svg");
    background-repeat: no-repeat;/* Do not repeat the image */
    background-color: transparent;
    background-position: center; /* Center the image */
    background-size: 1.7em;
    padding: 1em;
}

/*invitar*/

.cuenta-contenido .invitar .superior > p{
  font-size: 1em;
  text-align: center;
  color: #444444;
  line-height: 1.7;
  padding: 1.3em;
}

.cuenta-contenido .invitar .superior p.instrucciones{
  font-size: 1.14em;
  line-height: 1.63;
  color: #000000;
}

.cuenta-contenido .invitar .superior p.tu-codigo{
  font-family: Nunito;
  font-size: 1em;
  color: #444444;
  text-transform: uppercase;
  text-align: center;
  
}

.cuenta-contenido .invitar .superior input.codigo{
  font-size: 2.3em;
  text-align: center;
  color: #000000;
  
  opacity: 0.8;
  border-radius: 8px;
  background-color: #fafafa;
  border: solid 1px #eaeaea;
  
  width:100%;
  padding: 0.5em;
  margin-bottom: 5%;
}

.cuenta-contenido .invitar .superior button.blanco{
    width: 100%;
}

.cuenta-contenido .invitar > .instrucciones{
  font-size: 0.85em;
  line-height: 1.67;
  letter-spacing: normal;
  text-align: center;
  color: #666666;
  
  padding: 1em;
    margin-top: 1em;
}

.cuenta-contenido .invitar .instrucciones:last-of-type{
  border-bottom: none;
}

.cuenta-contenido .invitar .compartilo>div{
    margin-top: 1em;
}

.cuenta-contenido .invitar .compartilo .facebook span{
    background-image: url('../img/f.png');
    background-repeat: no-repeat;/* Do not repeat the image */
    background-color: #3c5a99; 
    background-position: center; /* Center the image */
    
    border: none;
    border-right: solid 1px #ffffff;
    border-radius: 8px 0 0 8px;
    padding: 1.5em;
}

.cuenta-contenido .invitar .compartilo .facebook button{
   background-color: #3c5a99; 
   font-family: Nunito;
   font-size: 0.85em;
   color: #ffffff;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   
   height: 4em;
   
   border: none;
   border-radius: 0 8px 8px 0;
}

.cuenta-contenido .invitar .compartilo .twitter span{
    background-image: url('../img/t.png');
    background-repeat: no-repeat;/* Do not repeat the image */
    background-color: #1da1f2; 
    background-position: center; /* Center the image */
    
    border: none;
    border-right: solid 1px #ffffff;
    border-radius: 8px 0 0 8px;
    padding: 1.5em;
}

.cuenta-contenido .invitar .compartilo .twitter button{
   background-color: #1da1f2; 
   font-family: Nunito;
   font-size: 0.85em;
   color: #ffffff;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   
   height: 4em;
   
   border: none;
   border-radius: 0 8px 8px 0;
}

.cuenta-contenido .invitar .compartilo .correo a{
   background-color: #ff0000; 
   font-family: Nunito;
   font-size: 0.85em;
   color: #ffffff;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   
   width: 100%;
   height: 4em;
   padding: 1.2em;
   
   border: none;
   border-radius: 8px;
   
}

/* direcciones */

.cuenta-contenido ul.radios{
    font-size: 14px;
    color: #000000;
    list-style: none;
    margin: 3em 1em 0 -1.8em;
}

.cuenta-contenido ul.radios > li{
  border-bottom: solid 1px #eaeaea;
}

.cuenta-contenido ul.radios > li > .radio{
    margin-left: 0.1em;
}

.cuenta-contenido ul.radios span{
    font-size: 0.85em;
    text-align: right;
    color: #999999;
}

.cuenta-contenido ul.radios label input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.cuenta-contenido ul.radios label p{
    margin: 0.2em 0 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cuenta-contenido ul.radios label .checkmark{
    background-image: url('../img/check-off.svg');
    background-repeat: no-repeat;/* Do not repeat the image */
    background-color: transparent;
    background-position: center; /* Center the image */
    /*background-size: 1.5em;*/
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 2em;
}

.cuenta-contenido ul.radios input:checked ~ .checkmark{
    background-image: url('../img/check-on.svg');
}

.cuenta-contenido ul.radios button{
    font-size: 0.85em;
    color: #999999;
    
    background-color: transparent;
    border: none;
}

.cuenta-contenido ul.radios button:hover{
    color: #ff0000;
}

.cuenta-contenido ul ~ .agregar {
    margin-top: 4em;
    margin-bottom: 1em;
}

.cuenta-contenido ul ~ .agregar > button {
    font-size: 1em;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;

    width: 100%;
    height: 44px;
    border: none;
    border-radius: 8px;
    background-color: #ff0010;
    
    margin-top: 1em;
    margin-bottom: 1em;
}

.cuenta-contenido ul ~ .agregar > button.hidden-lg {
  font-size: 0.85em;
  text-align: center;
  color: #000000;
  text-transform: uppercase;
  
  border: none;
  background-color: transparent;
}

.cuenta-contenido ul ~ .agregar > button.hidden-lg:hover {
  color: #ff0000;
}

.cuenta-contenido .formulario{
    display: none;
    
    margin-top: 1em;
    margin-bottom: 1em;
}

.cuenta-contenido .formulario> .close > span{
    font-size: 2em;
}

/* contrasena */

.cuenta-contenido .contrasena > div{
    margin-top: 2em; 
    margin-bottom: 1em; 
}

.cuenta-contenido .contrasena form > .form-group > label {
    font-size: 0.75em;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cuenta-contenido .contrasena form > .form-group > label.activo {
    color: #ff0010;
}

.cuenta-contenido .contrasena form > .form-group > input {
    height: 44px;
    border-radius: 8px;
    background-color: #ffffff;
    border: solid 1px #eaeaea;
    
    font-size: 1em;
    color: #999999;
}

.cuenta-contenido .contrasena form > .form-group > input:focus {
    border: solid 1px #4a4a4a;
    color: #000000;
    
    background-image: url('../img/ojo_g.svg');
    background-repeat: no-repeat;/* Do not repeat the image */
    background-color: transparent;
    background-position: right; /* Center the image */
    background-origin: content-box;
}

.cuenta-contenido .contrasena form > button{
    font-size: 1em;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 8px;
    background-color: #ff0010;
}

.cuenta-contenido .contrasena form .input-group > input{
    height: 44px;
}
  

/* RECOMPENSA POP */
.acumulados .pop {
}

.acumulados .pop.mini {
}

.recompensa {
  border: 1px solid #e8e8e8; 
  overflow: hidden;
  padding: 10px 0;
}

.recompensa > div:first-of-type{
    border-right: 1px solid #e8e8e8;
}

.recompensa > div:last-of-type{
    border-left: 1px solid #e8e8e8;
}

.recompensa .juntaste
{
  max-width: 6.5em;
  width: 6.5em;
  height: 6.5em;
  display: inline-block;
}

.recompensa .juntaste .circulo-gris {
     width: 100%;
     height: 100%;
     padding: 15px;
     border: 5px solid #e8e8e8;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     margin-bottom: 5px;

     position: relative;
}

.recompensa .juntaste .cuarto-circulo-rojo {
     width: 100%;
     height: 100%;
     padding: 15px;
     border-top: 5px solid #ee2928;
     border-left: 5px solid #e8e8e8;
     border-right: 5px solid #e8e8e8;
     border-bottom: 5px solid #e8e8e8;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     margin-bottom: 5px;

    position: relative; 
    top: -135px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari 3-8 */
    transform: rotate(45deg);

}


.recompensa .juntaste .medio-circulo-rojo {
     width: 100%;
     height: 100%;
     padding: 15px;
     border-top: 5px solid #ee2928;
     border-left: 5px solid #e8e8e8;
     border-right: 5px solid #ee2928;
     border-bottom: 5px solid #e8e8e8;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     margin-bottom: 5px;

    position: relative; 
    top: -135px;     
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari 3-8 */
    transform: rotate(45deg);
}

.recompensa .juntaste .cuarto-circulo-gris {
     width: 100%;
     height: 100%;
     padding: 15px;
     border-top: 5px solid #ee2928;
     border-left: 5px solid #e8e8e8;
     border-right: 5px solid #ee2928;
     border-bottom: 5px solid #ee2928;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     margin-bottom: 5px;

    position: relative; 
    top: -135px; 
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari 3-8 */
    transform: rotate(45deg);

}

.recompensa .juntaste .circulo-rojo {
     width: 100%;
     height: 100%;
     padding: 15px;
     border: 5px solid #ee2928;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     margin-bottom: 5px;
}



/*.recompensa .juntaste .cuarto-circulo-rojo {
     width: 100%;
     height: 100%;
     padding: 15px;
     border: 5px solid #ee2928;
     border-left: none;
     border-bottom: none;
     -moz-border-radius: 0 100% 0 0;
     -webkit-border-radius: 0 100% 0 0;
     border-radius: 0 100% 0 0;
}
*/

/*.recompensa .juntaste .cuarto-circulo-gris {
     width: 100%;
     height: 100%;
     padding: 15px;
     border: 5px solid #e8e8e8;
     border-right: none;
     border-bottom: none;
     -moz-border-radius: 100% 0 0 0 ;
     -webkit-border-radius: 100% 0 0 0;
     border-radius: 100% 0 0 0;
}*/

.recompensa .vencen .circulo {
     width: 60%;
     height: 60%;
     margin: 0 auto;
     padding: 5px;
     border: 5px solid #e8e8e8;
     -moz-border-radius: 30%;
     -webkit-border-radius: 30%;
     border-radius: 30%;
    font-size: 14px;
}

.recompensa .vencen .circulo p {
  margin: 0;
}

.recompensa .vencen .vencimiento {
    color: #000000;
    font-size: 0.85em;
    text-align: center;
}


.recompensa .vencen .rojo {
     border: 5px solid #ee2928;
     background: none;
}

.recompensa .vencen .rojo p {
  color: #ee2928;
}

.recompensa .vencen .gris p {
  font-size: 12px;
}

.recompensa .ganaste
{
  padding-left: 10px;
  line-height: 14px;
}

.recompensa .ganaste .z1 {
  font-size: 70% 
}

.recompensa .ganaste .z2 {
  font-size: 80% 
}

.recompensa .ganaste .z3 {
  font-size: 90% 
}

.recompensa .ganaste .botones {
  margin: 10px 0 5px 0;
}

.recompensa.mini {
  border: 0px solid #e8e8e8; 
  border-bottom: 1px solid #111;
  min-height: 10px;
  padding-bottom: 5px;
  margin-bottom: 5px;

}

.recompensa.mini .ganaste
{
  padding-left: 0px;
  /*line-height: 14px;*/
}

.recompensa.mini .ganaste .botones {
  margin: 0;
}

.recompensa .ganaste .botones .btn-rojo {
    background: #ef3e3c;
    padding: 7px;
    border: none;
    text-align: center;
}
.recompensa .ganaste .botones .btn-rojo a {
    font-family: Gotham-Book;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    width: 100%;
}

#btn_popcoin_descuento_b{
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 8px;
    background-color: #ff0010;
    font-family: Nunito;
    font-size: 1em;
    color: #ffffff;
    text-transform: uppercase;
    margin-top: -0.4em;
}

#btn_popcoin_descuento_b.verde{
    background-color: #3CB54A;
}

.recompensa .ganaste .botones .btn-promo-code input {
    background: #e8e8e8;
    color: #ee2928;
    padding: 7px;
    border: none;
    text-align: center;
    width: 100%;
}