/*
* {
    font-family: 'Muli', sans-serif;
}

html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid transparent;
}
*/

#div_contenedor_contacto {
    display: flex;
    flex-wrap: wrap;
/*    margin-top: 150px;*/
    width: 100%;
/*    background: #d8d8d8;*/
    max-width: 1200px;
/*    border: 5px solid red;*/
/*    overflow: hidden;*/
    padding: 0px 20px;
}

    #div_imagen_contacto {
        display: flex;
        width: 100%;
    /*    margin-top: 150px;*/
        margin: 0 auto;
    /*    width: 100%;*/
    /*    width: 800px;*/
    /*    border: 1px solid red;*/
    /*    background-image: url(../img/contactanos-hd.jpg);*/
    /*    background-repeat: no-repeat;*/
    /*    background-size: cover;*/
    /*    height: 250px;*/
    }

    #div_titulo_frm_contacto {
        display: flex;
        justify-content: center;
    /*    margin-top: 20px;*/
        width: 100%; 
        padding: 0px 5px;
    /*    border: 1px solid red;*/
/*        text-align: center;*/
    }

    #div_titulo_frm_contacto h1 {
        font-size: 25px;
        color: white;
    }

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    #div_contenedor_general_mantenedor {
        margin: 0 auto;
    /*    border: 5px solid black;*/
    /*    width: 800px;*/
    }

    #div_contenedor_titulo_mantenedor {
        margin: 0 auto;
        margin-top: 50px;
        /*    border: 2px solid green;*/
    /*    width: 800px;*/
        width: 100%;
        height: 50px;
        display: flex;
    }

    #h3_titulo_mantenedor {
        line-height: 40px;
        text-align: center;
        width: 100%;
        font-size: 25px;
        border: 5px solid #181d9a;
        color: #181d9a;
        text-shadow: 1px 1px 5px;
        box-shadow: 5px 5px 15px;

    }

    #div_grupo_menu_botones {
        margin: 0 auto;
    /*    margin-top: 20px;*/
        width: 100%;
    /*    width: 500px;*/
        display: flex;
        justify-content: center;
        padding: 5px 30px 5px 30px;

        text-shadow: 2px 2px 5px;
        box-shadow: 5px 5px 15px;
        background: white;
    }

    .clase_menu_boton {
        font-size: 42px;
        cursor: pointer;
        color: #2f2953;
        padding: 0px 15px 0px 15px;

    }



    .clase_menu_boton:hover {
        transition: all 0.2s;
        color: #1f960a;
    }

    .clase_menu_boton:active {
        transition: all 0.3s;
        text-shadow: 0px 0px 0px;
    }

    .icono_dehabilitado {
        font-size: 42px;
        cursor: pointer;
        color: #bfbaba;
        text-shadow: 0px 0px 0px;
        padding: 0px 15px 0px 15px;
    }


    #div_contenedor_informativo {
        margin: 0 auto;
        margin-top: 10px;
        width: 500px;
        height: 10px; 
    /*    border: 1px solid red;*/
        display: flex;
    }

    .div_contenedor_lbl_informativo {
        height: 10px;
    /*    border: 1px solid blue;*/
        width: 50%;
    }

    #div_contenedor_lbl_informativo_izq {
        height: 10px;
    /*    border: 1px solid blue;*/
        width: 60%;
        text-align: left;
    }

    #div_contenedor_lbl_informativo_der {
        height: 10px;
    /*    border: 1px solid blue;*/
        width: 40%;
        text-align: right;
    }

    #lbl_informativo_izq {
        color: #6f6f6f;
        opacity: 0;
    }

    #lbl_informativo_der {
        color: #b51a1a;
        font-weight: bold;
        opacity: 0;
    }

    /*#################################*/
    /*####### FORMULARIO ####*/
    /*#################################*/

    #frm_mantenedor { 
        margin: 0 auto;
        margin-top: 5px;
/*        margin-bottom: 150px;*/
/*        border: 1px solid #a0a0a0;*/
        width: 100%;
        max-width: 600px;
        padding: 20px;
    /*    width: 100%;*/
    /*    padding: 10px 40px 10px 10px;*/
        border-radius: 5px;
        background: white;
    }

    #varasunto {
        margin-top: 10px; 
        width: 100%;
        font-size: 15px;
        border-radius: 5px;
        padding: 10px;
        border: 1px solid #bfbfbf;
    }

    #div_contenedor_formulario {
        margin: 0 auto;
        padding-top: 20px 20px;
        width: 100%;
    /*    border: 5px solid black;*/

    }

    #div_btn_enviar_contacto {
        width: 100%;
        height: 40px;
    /*    border: 2px solid red;*/
        display: flex;
    }

    #btn_enviar_contacto {
        height: 40px;
        width: 110px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
        text-align: center;
        border-radius: 5px;
        background: #848484;
        color: white;
        font-size: 18px;
        transition: all 0.4s;
    /*    border: 1px solid blue;*/
    }

    #btn_enviar_contacto:hover {
        cursor: pointer;
        background: #454545;
    }



    select {
        -webkit-appearance:none;
        -moz-appearance:none;
        -ms-appearance:none;
        background: url(fonts/dropdown22x10.png) no-repeat right;
    }

    .grupo_campo_formulario { 
        display: flex;
        position: relative; 
/*        padding: 10px;*/
    /*    margin-bottom: 1.4em;*/
        z-index: 1;
/*        border: 1px solid red;*/
        margin: 15px 0px;
    }

    

    /*#############################*/
    /*INPUT TIPO TEXTO*/
    .inputTxtRegistro {
        display: flex;
        position: relative;
        padding: 0px 0px 0px 0px;
/*        margin: 5px 5px;*/
        width: 100%;
        height: 35px;
        font-size: 14px;
        outline: none;
        transition: all 0.15s ease-in-out;
        border: none;
        border-bottom: 2px solid rgba(0,0,0,0.2);
    }	

    .inputTxtRegistro:hover {
    /*
        box-shadow: 0 0 5px rgb(237, 228, 229);
        border:1px solid rgba(252, 168, 183, 0.8);
        background-color: #fff9fb;
    */
    } 

    .inputTxtRegistro:valid { 
    /*    border-bottom: 1px solid #9d1554; */
    }

    .inputTxtRegistro:valid ~ .bar:before, .inputTxtRegistro:valid ~ .bar:after {
        background: #9f103c !important;
    }

    .inputTxtRegistro:focus ~ .lblRegistro, .inputTxtRegistro.used ~ .lblRegistro {
        top: -10px;
        font-size: 15px;
/*        color: #333333;*/
        font-weight: bold;
    }

    .inputTxtRegistro:valid ~ .lblRegistro, .inputTxtRegistro:valid.used ~ .lblRegistro {
        top: -10px;
        font-size: 15px;
/*        color: #333333;*/
        font-weight: bold;
    }

    .inputTxtRegistro:focus ~ .bar:before, .inputTxtRegistro:focus ~ .bar:after {
        width: 100%;
    }

    /*#############################*/
    /*BARRA INFERIOR CAMPO*/
    .bar:before, .bar:after {
        content: "";
        height: 2px;
        width: 0;
        bottom: 0px;
        left: 0;
        position: absolute;
        background: #4e94ab;
        transition: 0.2s ease all;
    }

    /*#############################*/
    /*LABELS*/
    .lblRegistro {
        color: #227bad;
        font-size: 15px;
        font-weight: normal;
        font-family: sans-serif;
/*        margin-left: 5px;*/
        position: absolute;
        pointer-events: none;
        top: 15px;
        transition: 0.2s ease all;
    }

    .lblRegistroFijo {
        color: #227bad;
        font-size: 15px;
        font-weight: bold;
        font-family: sans-serif;
/*        margin-left: 10px;*/
        position: absolute;
        pointer-events: none;
        top: -10px;
        transition: 0.2s ease all;
    }

    /*#############################*/
    /*INPUT TIPO FECHA*/
    .inputDateRegistro {
        display: block;
        margin: 0 auto;
        height: 40px;
        width: 280px;
        color: #909090;
        font-size: 15px;
        border: 1px solid;
        border-radius: 3px;
    }

    .inputDateRegistro:hover {
        box-shadow: 0 0 5px rgb(227, 58, 90);
        border:1px solid rgba(227, 28, 97, 0.8);
    } 

    .inputDateRegistro:hover {
        background-color: #fdeef2
    }

    /*#############################*/
    /*INPUT TIPO RADIO*/
    .inputBtnRegistro.radio {
        border-radius: 3px;
    }

    /*#############################*/
    /*INPUT TIPO COMBO*/
    .inputCmbRegistro {
        display: block;
        margin: 0 auto;
        height: 40px;
        width: 100%;
        padding-left: 10px;
        font-size: 15px;
        border: none;
        border-bottom: 2px solid rgba(0,0,0,0.2);
        border-radius: 0px;
    }

    .inputCmbRegistro:hover {
    /*
        box-shadow: 0 0 5px rgb(237, 228, 229);
        border:1px solid rgba(252, 168, 183, 0.8);
    */
    } 

    .inputCmbRegistro:hover {
    /*    background-color: #fff9fb;*/
    }


    /*##############################*/
    /*FILTRO*/
    /*##############################*/

    #div_contenedor_filtro {
        margin-top: 20px;
        width: 100%;
        border-top: 1px solid #181d9a;
        text-align: center;
        padding: 5px 0px 0px 0px;
        display: flex;
        justify-content: center;
    }

    #vartextofiltro {
        width: 200px;
        height: 25px;
        font-size: 12px;
    }

    #lbl_texto_filtro {
        padding-right: 5px;
        font-size: 13px;
        padding: 5px 5px 5px 0px;
    }

    #varregistrosxpagina {
        width: 50px;
        height: 25px;
        font-size: 12px;
        text-align: right;
    }

    #lbl_registros_x_pagina {
        padding: 5px 5px 5px 30px;
        font-size: 13px;
    /*    height: 20px;*/
    }


    .btn_refresh_chico {
        font-size: 22px;
        cursor: pointer;
        color: #2f2953;
        width: 10px;
        padding: 0px 15px 0px 10px;
        text-shadow: 2px 2px 5px;   
    }

    .btn_refresh_chico:active {
        transition: all 0.2s;
        text-shadow: 0px 0px 0px;
    }

    /*##############################*/
    /*TABLA*/
    /*##############################*/
    #div_contenedor_grilla {
        margin-top: 10px;

    }

    #tabla_mantenedor {
        margin-top: 20px;
    /*    width: 400px;*/
        margin: 0 auto;
        min-width: 500px;
        width: 100%;
        font: 'Muli', sans-serif;
        font-size: 11px;
    /*    border: 3px solid red;*/
    }

    #tabla_mantenedor td {
        padding: 11px;
    }

    .tabla_fila_titulo {
        text-align: center;
        z-index: 200;
        font-size: 12px;
        box-shadow: 3px 3px 10px;
    }

    .tabla_fila_titulo td {
        box-shadow: 0px 1px 3px rgba(0,0,0,.6);
        background: #181d9a;
        color: white;
    }

    .tabla_fila_contenido:hover {
        transition: all 0.3s;
        background: #92a0bf;
        cursor: pointer;
        color: white;
    }

    .tabla_fila_contenido td {
        border: 1px solid white;
    }
    /*

    tr:nth-child(odd) {
        background-color:#f2f2f2;
    }

    tr:nth-child(even) {
        background-color:rgb(255, 255, 255);
    }
    */

    .tabla_fila_pie {
    /*    border: 1px solid white;*/
    }

    .tabla_fila_pie td {
        background: rgba(183, 183, 183, 0.91);
        color: black;
    }

    #tabla_col1 { /* Id */
    /*    width: 3%;*/
         text-align: center;
    }
    #tabla_col2 { /* Rut */
    /*    width: 30%;*/
         text-align: center;
    }

    #p_pie_3 {
        font-style: italic;
    }

    #div_contenedor_pie_tabla {
        display: flex;
        font-size: 12px;
    }

    .div_pie_tabla {
        width: 50%;

    }

    #div_pie_tabla_izq {
        text-align: left;
        font-weight: bold;
    }

    #div_pie_tabla_der {
        text-align: right;
    }

    #div_paginador {
        margin: 0 auto;
        padding: 5px 0px 5px 0px;
        width: 100%;
    /*    width: 800px;*/
        border-bottom: 1px solid #6a5555;
    }

    .clase_pagina {
        text-decoration: none;
    /*    border: 1px solid rgba(0,110,46,1);*/
        padding: 2px;
        width: 25px;
        height: 35px;
        margin-top: 5px;
        color: black;
    }

    .clase_pagina:hover {
        background-color: #6062ea;
        cursor: pointer;
    }

    .pagina_seleccionada {
        background: #0f0f93;
        color: white;
    }

    /*
    #id_pagina_seleccionada {
        background: green;
        color: white;
    }
    */

        #div_imagen_contacto {
            width: 100%;
            max-width: 600px;
    /*        height: 200px;*/
        }

    @media (min-width: 768px) {
        #div_imagen_contacto {

        }
    }

    @media (max-width: 600px){
        #div_imagen_contacto {
    /*        width: 420px;*/
    /*        height: 130px;*/
        }

        #frm_mantenedor { 
            width: 100%;
            max-width: 440px;
        }

        #varasunto {
            width: 100%;
            max-width: 400px;
        }
    }