label { 
    display:inline-block; 
    font-size: 12px;
}



.tamaño_de_letra {

    font-size: 13px;

}

.inline-block-child {
    display: inline-block;
  }

input[type=date],  input[type=time] {

    width: 120px;
    border:0.2px solid black;


}

.form-control{
    padding: 0px 2px !important;
}



input[type=text]{

    width: 120px;
    border:0.2px solid black;



}



 input[type=email], input[type=number]{

    width: 160px;
    border:0.2px solid black;

}


@media only screen and (max-width:450px){
    input[type=email]{

        width: 130px;
    }

    input[type=number]{

        width: 130px;
    
    }
    
}


a:hover, a:active {
    background-color: rgb(185, 203,252);
}




 /* ACTIVIDAD_LIST.HTML  AND OPERACION_LIST.HTML AND PROSPECTO_LIST.HTML*/

.container-infromacion{
    display: grid;
    height: 100vh;
    width: 100%;
    grid-template-columns: 0.8fr 4.4fr 0.8fr;
    grid-template-rows: 0.4fr 3fr;
    grid-template-areas: 
    "filtro_izquierda Titulo_modelos filtro_seleccionado"
    "Tiempo Modelos filtros"
  
}



#filtro_izquierda{

    grid-area: filtro_izquierda;
    font-size: 13px;
    margin-left: 10px;

    
}

#Titulo_modelos{

    grid-area: Titulo_modelos;
    margin-left: 3%;
    font-size: 22px;
}


#filtro_seleccionado{

    grid-area: filtro_seleccionado;
    font-size: 13px;

}


#Tiempo{

    grid-area: Tiempo;
    padding:5%;
    text-align: center;

}
#Modelos{
    grid-area: Modelos;
}

#filtros{

    grid-area: filtros;
    padding:5%;
}

.tamaño_de_letra_modelos{

    font-size: 13px;

}

.nombre-titulo{
    font-size: 19px;
}

.cantidad_modelos{

    font-size: 22px;
    margin-bottom: 3%;
}

.scroll_users{
    overflow-y:auto;
    overflow-x:hidden;
    height: 240px;
    border: 1px solid black;
    padding: 3%;
    padding-left: 15%;
}


.scroll_agencias{
    overflow-y:auto;
    overflow-x:hidden;
    height: 120px;
    border: 1px solid black;
    padding: 3%;
}


.titulos_filtros_columna_izquierda{

    font-size: 15px;
    text-align: center;

}

.titulos_filtros{

    font-size: 16px;
    text-align: center;

}

.comentarios_modelos{
    overflow-y:auto;
    overflow-x:hidden;
    height: 40px;
    width:200px;
    border: 1px solid black;

}


.coaches{

    margin-bottom:3px ;
}

.filtrar_por_prospecto_o_vehiculo{

    margin-left:10%;
    text-align: center;
}


.busqueda_inexistente{

    text-align: center;
    margin: 20%;
}


.li_modelos{
    list-style-type: none ;
}

.li_prospecto_list{
    list-style-type: none ;

}

.x_filtros{

    color: rgba(255, 68, 0, 0.87);
    font-weight: bold;
    font-size: 14px;


}



@media only screen and (min-width:1100px){


    .resultado_modelos{

        height: 600px; 
        width: 90%;
        display: flex; 
        flex-direction: column; 
        flex-wrap: wrap;
    }
    
    #Tiempo {

        border-width: 1px;
        border-style: solid;
        border-color: black;
    }

    #filtros{

        border-width: 1px;
        border-style: solid;
        border-color: black;
    }


    .espacio_filtros{
        margin-bottom: 20px;
    }

    .espacio_filtros_top{
        margin-top: 15px;
        margin-bottom: 20px;


    }

    .container_años{

        margin-left: 8%;
    }


    .filtro_en_uso{

        margin-top: 30px;
    }


    /* sugerencias */

    .sin_las_dos{

        margin-top:40px;
    }
    
    .con_una{
        margin-top:20px;
        
    }
    
    .con_la_otra{
    
        margin-top:20px;
    }

    .con_las_dos{

        margin-top:10px;
    }

    .sugerencia_v{

        width: 430px;
    }

    


}

 /* ipad y telefonos */
@media only screen and (max-width:1099px){


    .container-infromacion{
        display: grid;
        height: 95vh;
        width: 100%;
        grid-template-columns: 0.8fr 1fr 0.8fr;
        grid-template-rows: 0.4fr 0.5fr 1fr 1fr 2fr;
        grid-template-areas: 
        "filtro_izquierda  Titulo_modelos filtro_seleccionado"
        "Tiempo  Modelos filtros"
        "Tiempo  Modelos filtros"
        "Tiempo  Modelos filtros"
        "Tiempo  Modelos filtros"
    }


    .container_años {

        margin-top: 51px;
    }

    .resultado_modelos{
        overflow:scroll;
        height:570px;
        width: 500px;
        border: 1px solid black;
    
    }

    .cantidad_modelos{

        font-size: 14px;
    }

    /* sugerencias */
    .sin_las_dos, .con_una, .con_la_otra, .con_las_dos{

        margin-top:20px;
    }

 


    .sugerencia_v{

        width: 250px;
    }

    

  

    
    
}

 /* ipad pro */

@media only screen and (min-width:1020px)  and (max-width:1030px) and (min-height:1350px) and (max-height:1370px){
    .resultado_modelos{
        height:700px;
    
    }


}
 /* ipad */
@media only screen and (max-width:1099px) and (min-height:750px){


    .años-columna{

        margin-right: 3%;
        margin-left: 2%;

    }

    .titulos_filtros_columna_izquierda{

        font-size: 14px;
    }

    .titulos_filtros{

        font-size: 15px;
    }

    .filtros_extras{

        text-align: center;
    }
    

    .nombre-titulo{
        font-size: 14px;
    }
    


    .scroll_users{
        
        text-align: center;
        height: 180px;

    }

    
    .espacio_filtros_top{
        margin-top: 15px;
        margin-bottom: 20px;


    }

    .espacio_filtros{
        margin-bottom: 20px;
    }






}





@media only screen and  (min-width:750px) and (max-width:1100px) and (min-height:850px) and (max-height:1100px){

    .resultado_modelos{
        height:700px;
        width: 400px;
    
    }

}






 /* iphonex phone6 , samsung galaxy */
@media only screen and (max-width:900px) and (max-height:850px){

    .tamaño_de_letra_modelos {

        font-size: 11px;
    
    }
    
    .cantidad_modelos{
        
        font-size: 12px;
        margin-bottom: 1%;

    }

   
    #filtro_seleccionado{

        font-size: 10px;
        padding:0%;
        margin-left: 50px;

    }
    #filtro_izquierda{
        font-size: 10px;
        padding:0%;
        margin-left: 20px;

    }


    #Titulo_modelos{

        margin-left: 0%;
        font-size: 14px;
    }

    .nombre-titulo{
        font-size: 11px;
    }
    
    
    .scroll_users{
       
        height: 72px;
        width: 167px;
        margin-left: 13%;
        font-size: 11px;
        text-align: center;

    }

    .scroll_agencias{
        height: 72px;
        width: 130px;
        font-size: 11px;
        text-align: center;
    }
    

   


    .resultado_modelos{
        overflow:scroll;
        height:240px;
        width: 335px;
        border: 1px solid black;
        font-size: 11px;
    
    }

    .container_años{

        height:280px;
        width: 325px;


        margin-top: 10px;
        

    }

    .años-columna{

        margin-right: 3%;
        margin-left: 2%;

    }

    .titulos_filtros_columna_izquierda{

        font-size: 12px;
    }

    .titulos_filtros{

        font-size: 12px;
    }


    .x_filtros{

        font-size: 13px;
    }

    .filtros_extras{

        text-align: center;
    }
    

}





@media only screen and (max-width:750px){


    #filtro_seleccionado{

        font-size: 10px;
        padding:0%;
        margin-left: 1px;

    }

}






 /* PROSPECTO-SITE.HTML */
.div_scroll{
    overflow:scroll;
    height:250px;
    border-style: double;
    border:1px solid black;
    padding-left:10%;
}


.container-prospecto {
    display: grid;
    height: 95vh;
    width: 100%;
    grid-template-columns: 0.5fr 1.0fr 1.0fr 1.2fr;
    grid-template-rows: 0.3fr 4.1fr 4.1fr;
    grid-template-areas: 
    "prospecto prospecto Operacion_numero asesor"
    "datos_principales datos_extras agendar_actividad proxima_actividad"
    "historial_operaciones historial_operaciones Registrar_actividad Ultima_actividad";
    grid-gap: 0.5rem;
}





.comentarios_prospecto_site{
    overflow-y:auto;
    overflow-x:hidden;
    height: 40px;
    border: 1px solid black;

}



.comentarios_operacion_prospecto_site{
    overflow-y:auto;
    overflow-x:hidden;
    height: 40px;
    border: 1px solid black;

}



@media only screen and  (max-width:1100px){

    .comentarios{

        width : 180px;
    }
}


@media only screen and  (min-width:1000px) and (max-height:1350px){

    .comentarios_prospecto_site{

        width : 270px;
    }

    .comentarios_operacion_prospecto_site{
        width : 310px;

    }

    input[type=email], input[type=number]{

        width: 150px;
    }
    
}



/* ipad mini (horizontal) ipad pro (10.5-inch) (12.9-inch) (vertical) (horizontal) */
@media only screen and  (min-width:800px) and (max-width:1113px){
    .container-prospecto{
        grid-template-columns: 0.8fr 0.4fr 0.8fr 1fr;
        grid-template-rows: 0.3fr 1fr 1fr 1fr;
        grid-template-areas:
        "prospecto prospecto Operacion_numero asesor" 
        "datos_principales datos_extras datos_extras historial_operaciones"
        "agendar_actividad agendar_actividad proxima_actividad proxima_actividad"
        "Registrar_actividad Registrar_actividad Ultima_actividad Ultima_actividad"
    }

  
    .comentarios_prospecto_site{

        width : 340px;
    }

    .comentarios_operacion_prospecto_site{
        width : 200px;

    }
    



    
}


 /* iphone XS, iphoneXS MAX (horizontal)*/


@media only screen and  (min-width:800px) and (max-width:900px) and (max-height:450px){


    .container-prospecto{
        grid-template-columns: 1fr 0.6fr 0.8fr 1fr;
        grid-template-rows: 0.3fr 1fr 1fr 1fr;
        grid-template-areas:
        "prospecto prospecto Operacion_numero asesor" 
        "datos_principales datos_extras datos_extras historial_operaciones"
        "agendar_actividad proxima_actividad proxima_actividad proxima_actividad"
        "Registrar_actividad Ultima_actividad Ultima_actividad Ultima_actividad"
    }

    .comentarios_prospecto_site{

        width : 300px;
    }
    
    .comentarios_operacion_prospecto_site{
        width : 160px;

    }
    input[type=email], input[type=number]{

        width: 140px;
    }
}


/* ipad mini (vertical), iphone 6/7/8 , iphone 6/7/8 plus (horizontal) */
@media only screen and  (min-width:651px) and (max-width:799px){
    .container-prospecto{
        grid-template-columns: 0.8fr 0.4fr 0.8fr;
        grid-template-rows: 0.3fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
        "prospecto Operacion_numero asesor" 
        "datos_principales datos_extras datos_extras "
        "agendar_actividad proxima_actividad proxima_actividad"
        "Registrar_actividad Ultima_actividad Ultima_actividad"
        "historial_operaciones historial_operaciones historial_operaciones"
    }


    .comentarios_prospecto_site{

        width : 280px;
    }

    .comentarios_operacion_prospecto_site{
        width : 350px;

    }
    

    


}

/* iphones (vertical) */
@media only screen and (max-width:650px){
    .container-prospecto{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.3fr 1fr 0.3fr 1fr 0.7fr 1fr 0.7fr 0.7fr ;
        grid-template-areas:
        "prospecto prospecto" 
        "datos_principales datos_extras"
        "Operacion_numero asesor"
        "agendar_actividad agendar_actividad"
        "proxima_actividad proxima_actividad"
        "Registrar_actividad Registrar_actividad"
        "Ultima_actividad Ultima_actividad"
        "historial_operaciones historial_operaciones";
    }


    .comentarios_prospecto_site{

        width : 190px;
    }

    .comentarios_operacion_prospecto_site{
        width : 190px;

    }

}

#prospecto{

    grid-area: prospecto;
    padding:5%;

    border-width: 1px;
    border-style: solid;
    border-color: black;

}

#Operacion_numero{

   
    grid-area: Operacion_numero;
    padding:4%;

    border-width: 1px;
    border-style: solid;
    border-color: black;


}



#asesor{

   
    grid-area: asesor;
    padding:4%;

    border-width: 1px;
    border-style: solid;
    border-color: black;


}

#datos_principales{

    grid-area: datos_principales;
    padding:5%;
    padding-top:13%;
    border-width: 1px;
    border-style: solid;
    border-color: black;


}

#datos_extras{

    grid-area: datos_extras;
    padding:3%;
    padding-left: 8%;

    border-width: 1px;
    border-style: solid;
    border-color: black;





}

#agendar_actividad{

    grid-area: agendar_actividad;
    padding:5%;
    padding-top:7%;

    border-width: 1px;
    border-style: solid;
    border-color: black;


}

#proxima_actividad{

    grid-area: proxima_actividad;
    padding:5%;
    padding-top:7%;

    border-width: 1px;
    border-style: solid;
    border-color: black;

}

#historial_operaciones{


    grid-area: historial_operaciones;
    padding:5%;
    border-width: 1px;
    border-style: solid;
    border-color: black;


}

#Registrar_actividad{

    grid-area: Registrar_actividad;
    padding:5%;
    border-width: 1px;
    border-style: solid;
    border-color: black;


}

#Ultima_actividad{

    grid-area: Ultima_actividad;
    padding:5%;
    border-width: 1px;
    border-style: solid;
    border-color: black;

}




.container_datos_extras{
    display: grid;
    width: 100%;
    padding-left: 5%;
    grid-template-columns: 0.2fr 0.2fr;
    grid-template-rows: 0.1fr 0.4fr 0.4fr 0.1fr;
    grid-template-areas: 
    "titulo_datos_extras titulo_datos_extras"
    "datos_extras_1 datos_extras_2"
    "vehiculo_por_vender vehiculo_por_comprar"
    "editar_datos_extras editar_datos_extras";

}

#titulo_datos_extras{

    grid-area: titulo_datos_extras;
    padding-top:5%;

}

#datos_extras_1{

    grid-area: datos_extras_1;
    padding:5%;

}

#datos_extras_2{

    grid-area: datos_extras_2;
    padding:5%;
    margin-left:15%

}

#vehiculo_por_vender{

    grid-area: vehiculo_por_vender;
    padding:5%;

}

#vehiculo_por_comprar{

    grid-area: vehiculo_por_comprar;
    padding:5%;
    margin-left:15%


}

#editar_datos_extras{

    grid-area: editar_datos_extras;
    margin-left:10%


}






 /* ANIMACION BOTONES */



  .button ,.button_eliminar_pros {
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 1px;
    position: relative;
    background-color: #16a085;
    border: none;
    color: #fff;
    padding: 6px;
    width: 73px;
    text-align: center;
    transition-duration: 0.4s;
    overflow: hidden;
    box-shadow: 0 5px 15px #346697;
    border-radius: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .button:hover {
    background: #fff;
    box-shadow: 0px 2px 10px 5px #1abc9c;
    color: #000;
  }
  
  .button:after {
    content: "";
    background: #ff0f43;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 2s
  }
  
  .button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
  }
  
  .button:focus { outline:0; }
  






/* ACTIVIDAD_UPDATE.HTML AND OPERACION_UPDATED.HTML */


.container-editar {
    display: grid;
    height: 95vh;
    width: 100%;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 4fr;
    grid-template-areas: 
    "formulario_editar  datos_prospecto ";
    grid-gap: 0.5rem;
}


#formulario_editar{

    grid-area: formulario_editar;
    padding:5%;
    margin-left: 10%;

    border-width: 1px;
    border-style: solid;
    border-color: black;
    font-size: 14px;

}


#datos_prospecto{

    grid-area: datos_prospecto;
    padding:5%;

    border-width: 1px;
   
    font-size: 14px;

    margin-left: 15%;

}


#titulo_formulario{

    font-size: 24px;
    margin-bottom: 15px;
}

#input_formulario{

    margin-top: 20px;


    
}

#titulo_datos_prospecto{
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;

}


@media only screen and (max-width:850px) and (max-height:850px){


    #formulario_editar{

        font-size: 10px;
    }

    #datos_prospecto{

        font-size: 10px;
    }

    #titulo_formulario{

        font-size: 16px;
        margin-bottom: 10px;
    }

  

    #titulo_datos_prospecto{

        font-size: 14px;

  

    }

    #input_formulario{

        margin-top: 2px;
    
    
      
        
    }

}



/* CREAR_PROSPECTO.HTML  */


.container_crear_prospecto{


    display: grid;
    height: 95vh;
    width: 100%;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 4fr;
    grid-template-areas: 
    "columna_en_blanco_1  formulario_crear_prospecto  columna_en_blanco_2";
    grid-gap: 0.5rem;

   
}


#columna_en_blanco_1{

    grid-area: columna_en_blanco_1;

}


#formulario_crear_prospecto{

    grid-area: formulario_crear_prospecto;
    padding:5%;   

    border-width: 1px;
    border-style: solid;
    border-color: black;
    font-size: 18px;
    margin-bottom: 40px;

}

#columna_en_blanco_2{

    grid-area: columna_en_blanco_2;

}


#guardar_prospecto{

    font-size: 12px;
}

.letra_ingresada{

    font-size: 12px;
}

@media only screen and (max-width:850px) and (max-height:850px){


    #formulario_crear_prospecto{

        font-size: 10px;
    
    }

    #guardar_prospecto{

        font-size: 10px;
    }
    

}