@import url('https://fonts.googleapis.com/css?family=Chicle|Indie+Flower|Lobster|Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i|Playfair+Display:400,400i,700,700i,900,900i|Quicksand:300,400,500,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Yatra+One&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese');

/*
* {
    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 {
/*    margin-top: 150px;*/
    width: 100%;
/*    background: #d8d8d8;*/
/*    border: 1px solid red;*/
    max-width: 1200px;
}

#div_imagen_contacto {
/*    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 {
    margin-top: 20px;
    width: 100%; 
/*    border: 1px solid red;*/
    text-align: center;
}

#div_titulo_frm_contacto h1 {
    color: #392e2e;
}

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: 500px;
/*    width: 100%;*/
/*    padding: 10px 40px 10px 10px;*/
    border-radius: 5px;
    background: white;
}

#varasunto {
    margin-top: 10px; 
    width: 450px;
    height: 100px;
    max-width: 450px;
    min-width: 450px;
    min-height: 50px;
    font-size: 15px;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #bfbfbf;
}

#div_contenedor_formulario {
    margin: 0 auto;
    padding-top: 20px;
    width: 90%;
/*    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 { 
    position: relative; 
    margin-bottom: 1.4em;
    z-index: 1;
/*    border: 2px solid red;*/
    display: flex;
}
   
/*#############################*/
/*INPUT TIPO TEXTO*/
.inputTxtRegistro {
    padding: 10px 10px 5px 10px;
    width: 100%;
    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;
      position: absolute;
      background: #4e94ab;
      transition: 0.2s ease all;
}

/*#############################*/
/*LABELS*/
.lblRegistro {
    color: #d2d2d2;
    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: #333333;
    font-size: 15px;
    font-weight: bold;
    font-family: sans-serif;
    margin-left: 10px;
    position: absolute;
    pointer-events: none;
    top: -15px;
    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;
}
*/


@media (max-width: 800px){
    #div_imagen_contacto {
        width: 600px;
        height: 200px;
    }
}

@media (max-width: 600px){
    #div_imagen_contacto {
        width: 420px;
        height: 130px;
    }
    
    #frm_mantenedor { 
        width: 440px;
    }
    
    #varasunto {
        width: 400px;
        max-width: 400px;
        min-width: 400px;
    }
}