.esp_opc
{
    display: none;
}



.formulario-imagen
{
    background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)), url('../images/medics3.jpg')center no-repeat;
    background-size: cover;
    height: 100vh;
}

.titulo-imagen
{
    margin-top: 20vh;
    text-align: center;
    font-family: 'Roboto Condensed';
    font-weight: 900;
    font-size: 70px;
    color: #FFF;
    padding: 25px 60px 0px;
    margin-bottom: -5px;
}

.subtitulo-imagen
{
    text-align: center;
    font-size: 40px;
    color: #62928e;
    font-weight: 400;
}


.formulario__input_error_validacion
{
    font-size: 12px;
    margin-bottom: 0;
    color: #bb2929;
}

.mostrar
{
    display: block;
}

.ocultar
{
    display: block;
}

.direccion_horario,
.precios_servicios,
.forma_pago,
.formacion_usuario,
.redes_sociales
{
    display: block;
}

#recuadro,
#recuadro-horario,
#recuadro-enfermedad,
#recuadro-formacion,
#recuadro-servicios
{
    text-align: center;
    margin-left: 0px;
    margin-right: 0px;
    
}

#cuadro-div,
#cuadro-div-horario,
#cuadro-div-enfermedad,
#cuadro-div-formacion,
#cuadro-div-servicios
{
    height: 10em;
    line-height: 1em;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    border: 1px solid;
    background-color: white;
}




.span__especialidad
{
    color: #FFF;
    background-color: #000;
    line-height: 2;
    padding: 4px;
    border-radius: 10px;
}

.btn__modificar
{
    text-decoration: none;
    line-height: 60px;
    padding: 15px;
    background: #000;
    color: #FFF;
    font-weight: bold;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

*
{
    box-sizing: border-box;
}
.titulo-registro
{
    font-family: 'Roboto Condensed';
    font-weight: 600;
    color: #4d4d4d;
    font-size: 40px;
    margin-bottom: 0px;
}



main
{
    background-color: rgba(198, 198, 198, 0.9);
    width: 100%;
    margin: auto;
    padding: 0px;
}

.division-row
{
    padding: 0px;
    margin: 0px;
}

.form-segunda-division
{
    height: 100vh;
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 30px;
    padding-bottom: 80px;
    overflow: scroll;
    scrollbar-width: thin;
    scrollbar-color: #cbcbcb #cbcbcb;
}

.formulario
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}

.formulario__label
{
    display: block;
    font-weight: 600;
    padding: 5px;
    cursor: pointer;
    font-family: 'Roboto-Condensed', sans-serif;
    font-size: 14px;
}


.formulario__grupo_input,
.formulario__grupo_textarea
{
    position: relative;
}

.formulario__input
{
    width: 100%;
    background: #fff;
    border: 3px solid transparent;
    border-radius: 3px;
    height: 35px;
    line-height: 22px;
    padding: 0 40px 0 10px;
    transition: .3s ease all;
    font-family: 'Roboto-Condensed', sans-serif;
    font-size: 14px;
}

.formulario__select
{
    width: 100%;
    width: 100%;
    background: #fff;
    border: 3px solid transparent;
    border-radius: 3px;
    height: 35px;
    line-height: 22px;
    padding: 0 40px 0 10px;
    transition: .3s ease all;
    font-family: 'Roboto-Condensed', sans-serif;
    font-size: 14px;
}

.formulario__avatar
{
    width: 100%;
    background: #fff;
    border: 3px solid transparent;
    border-radius: 3px;
    height: 35px;
    line-height: 22px;
    padding: 0 40px 0 10px;
    transition: .3s ease all;
}

.formulario__textarea
{
    width: 100%;
    background: #fff;
    border: 3px solid transparent;
    border-radius: 3px;
    height: 150px;
    padding: 0 40px 0 10px;
    transition: .3s ease all;
}

.formulario__input:focus,
.formulario__select:focus,
.formulario__avatar:focus,
.formulario__textarea:focus
{
    border: 3px solid #0075ff;
    outline: none;
    box-shadow: 3px 0px 30px rgba(163,163,163, 0.4);
}

.formulario__input_error
{
    font-size: 12px;
    margin-bottom: 0;
    display: none;
}

.formulario__input_error_activo
{
    display: block;
    color: #bb2929;
}

.formulario__validacion_estado
{
    position: absolute;
    right: 20px;
    bottom: 15px;
    z-index: 100;
    font-size: 16px;
    opacity: 0;
}

.formulario__mensaje,
.text__area,
.area__doble,
.formulario__grupo_btn_enviar
{
    grid-column: span 4;
}


.area__unica
{
    grid-column: span 2;
}

.formulario__mensaje
{
    height: 45px;
    line-height: 45px;
    background: #F66060;
    padding: 0 15px;
    border-radius: 3px;
    display: none;
}

.formulario__mensaje_activo
{
display: block;
}

.formulario__mensaje p
{
    margin: 0;
}

.formulario__grupo_btn_enviar
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.formulario__btn
{
    height: 45px;
    line-height: 40px;
    width: 30%;
    background: #000;
    color: #FFF;
    font-weight: bold;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: .1 ease all;
    font-family: 'Roboto-Condensed', sans-serif;
    font-weight: 500;
    font-size: 15px;
}

.formulario__btn:hover
{
    box-shadow: 3px 0px 30px rgba(163,163,163,1);
}

.formulario__mensaje_exito
{
  font-size: 14px;
  color: #119200;
  display: none; 
}

.formulario__mensaje_exito_activo
{
    display: block;
}


/** Estilo de validacion **/

.formulario_grupo_incorrecto input
{
color: #bb2929;
border: 3px solid #bb2929;

}

.formulario__grupo_correcto .formulario__validacion_estado
{
    color: #1ed12d;
    opacity: 1;
    line-height: 5px;
}

.formulario__grupo_incorrecto .formulario__label {
	color: #bb2929;
}

.formulario__grupo-incorrecto .formulario__validacion_estado {
	color: #bb2929;
	opacity: 1;
}   

.formulario__grupo_incorrecto .formulario__label
{
    color: #bb2929;
}

.formulario__grupo_incorrecto .formulario__validacion_estado
{
    color: #bb2929;
    opacity: 1;
    line-height: 5px;
}


.formulario__grupo_incorrecto .formulario__input,  .formulario__grupo_incorrecto .formulario__select
{
    border: 3px solid #bb2929;
}

.terminos__politicas
{
    font-family: 'Roboto Condensed';
    font-weight: 500;
    font-size: 14px;
}

.terminos__politicas p
{
    font-weight: 400;
}

.terminos__politicas a 
{
    color: rgb(0, 146, 101);
}






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

 

.form-segunda-division
{
    height: 100vh;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 20px;
    padding-bottom: 80px;
    overflow: scroll;
    scrollbar-width: thin;
    scrollbar-color: #cbcbcb #cbcbcb;
}

.titulo-imagen {
    margin-top: 30vh;
    text-align: center;
    font-family: 'Roboto Condensed';
    font-weight: 900;
    font-size: 45px;
    color: #FFF;
    padding: 15px 10px 0px;
    margin-bottom: -5px;
}

.subtitulo-imagen {
    text-align: center;
    font-size: 30px;
    color: #62928e;
    font-weight: 400;
}

.titulo-registro {
    font-family: 'Roboto Condensed';
    font-weight: 600;
    color: #4d4d4d;
    font-size: 35px;
    margin-bottom: 0px;
}

.img-foto
{
   width: 100%;
   text-align: center;
}    

.editar-foto
{
    width: 200px;
    height: 200px;
    border: 3px solid rgb(177 177 177);
    object-fit: contain;
    background-color: white;
}    

.formulario
{
    grid-template-columns: 100%;

}

.formulario__mensaje,
.text__area,
.text__area,
.area__doble,
.formulario__grupo_btn_enviar
{
    grid-column: 1;
}

.area__unica
{
    grid-column: 1;
}

main {
    width: 100%;
    margin: auto;
    padding: 0px;
}

#recuadro {
    text-align: center;
    margin-left: 0px;
    margin-right: 0px;
}


.formulario__btn
{
    width: 100%;
}

    
}

@media only screen and (max-width: 767px) {
    .formulario-imagen
    {
        display: none;
    }


    .form-segunda-division
    {
        height: 100vh;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 0px;
        overflow: scroll;
        scrollbar-width: thin;
        scrollbar-color: #cbcbcb #cbcbcb;
    }
    
    .titulo-registro {
        font-family: 'Roboto Condensed';
        font-weight: 600;
        color: #4d4d4d;
        font-size: 30px;
        margin-bottom: 0px;
    }
    
    .img-foto
    {
       width: 100%;
       text-align: center;
    }    
    
    .editar-foto
    {
        width: 200px;
        height: 200px;
        border: 3px solid rgb(177 177 177);
        object-fit: contain;
        background-color: white;
    }    
    
    .formulario
    {
        grid-template-columns: 100%;
    
    }
    
    .formulario__mensaje,
    .text__area,
    .text__area,
    .area__doble,
    .formulario__grupo_btn_enviar
    {
        grid-column: 1;
    }
    
    .area__unica
    {
        grid-column: 1;
    }
    
    main {
        width: 100%;
        margin: auto;
        padding: 30px;
    }
    
    #recuadro {
        text-align: center;
        margin-left: 0px;
        margin-right: 0px;
    }
    
    
    .formulario__btn
    {
        width: 100%;
    }

    
}