@import url("NavigationMenu.css");
@import url("Containers.css"    );
@import url("Controls.css"      );

*
{ box-sizing: border-box;
  margin:     0px;
  padding:    0px;                               }

body
{ font-family: "Lucida Sans Unicode", Arial;
  font-size:    12px;                            }

header
{ width:      100%;
  color:   #3399cc;
  font-size: 1.2em;                              }

    header #logo
    { padding-top:   5px;
      text-align: center;                        }

    header #userName
    { margin: 5px 20px 0px 5px;
      text-align: right;                         }

    header #navMenu
    { background: #3399cc;                       }

    #logo img
    { margin-top:  20px;
      padding: 0px 10px;
          width:   100%;
      max-width:  400px;                         }

footer
{ border-top: solid #3399cc 2px;
  position:    fixed;
  bottom:        0px;
  width:        100%;
  min-height:   30px;
  text-align: center;
  font-size:   0.9em;
  background: rgba(255, 255, 255, 0.9);
}

    footer p
    { padding: 5px;                              }

h1, h2, h3
{ padding:      15px;
  width:        100%;
  text-align: center;
  font-size:   1.4em;
  font-weight:  bold;
  background: rgba(255, 255, 255, 0.9);          }

h2, h3
{ padding:        1px;
  font-size:    1.2em;
  font-weight: normal;                           }

h2
{ background: #3399cc;
  color:      #ffffff;                           }

    h2 a
    { padding: 0px 15px;
      cursor:   pointer;                         }

h3
{ text-align:    left;
  background: #ebf5fa;
  color:      #3399cc;                           }

    h3 a
    { padding: 0px 15px;
      cursor:   pointer;                         }

/* main layout
----------------------------------------------------------*/

.float-left  { float: left; }
.float-right { float: right; }

/* page elements
----------------------------------------------------------*/

.content-wrapper { width: 100%; }

.featured hgroup.title h1, .featured hgroup.title h2
{
    color: #000000;
    font-size: 2.5em;
    margin-right: 10px;
    vertical-align: bottom;
}

.featured
{
    margin-top: 15px;
    height: 50px;
    vertical-align: bottom;
}

.featured p
{
    font-size: 0.9em; 
    margin: 0px;
}

/* page titles */

hgroup.title { margin-bottom: 0px; }

    hgroup.title h1, hgroup.title h2 { display: inline; }

    hgroup.title h2
    {
        font-weight: normal;
        margin-left: 3px;
    }

.label { font-weight: 700; }

/* login page */

#loginForm
{
    border-right: solid 2px #c8c8c8;
    float: left;
    width: 55%;
}

    #loginForm .validation-error
    {
        display: block;
        margin-left: 15px;
    }

    #loginForm .validation-summary-errors ul
    {
        margin: 0;
        padding: 0;
    }

    #loginForm .validation-summary-errors li
    {
        display: inline;
        list-style: none;
        margin: 0;
    }

    #loginForm input
    {
        width: 250px;
    }

#socialLoginForm
{
    margin-left: 40px;
    float: left;
    width: 40%;
}

    #socialLoginForm h2 { margin-bottom: 5px; }

#socialLoginList button { margin-bottom: 12px; }

#logoutForm { display: inline; }

/* info and errors */

.message-info
{
    border: 1px solid;
    padding: 10px 20px;
}

.message-error
{
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success
{
    color: #71C69D;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error { color: #e80c4d; }

/* styles for validation helpers */

.field-validation-error
{
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid { display: none; }

input.input-validation-error { border: 1px solid #e80c4d; }

input[type="checkbox"].input-validation-error { border: 0 none; }

.validation-summary-errors
{
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid { display: none; }

/* tables
----------------------------------------------------------*/

table
{
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0;
    border: 0 none;
}

th
{
    font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding: 0;
}

    th a
    {
        display: block;
        position: relative;
    }

        th a:link, th a:visited, th a:active, th a:hover
        {
            color: #333;
            font-weight: 600;
            text-decoration: none;
            padding: 0;
        }

        th a:hover { color: #000; }

    th.asc a, th.desc a { margin-right: .75em; }

        th.asc a:after, th.desc a:after
        {
            display: block;
            position: absolute;
            right: 0em;
            top: 0;
            font-size: 0.75em;
        }

        th.asc a:after  { content: '▲'; }
        th.desc a:after { content: '▼'; }

td
{
    padding: 0;
    border: 0 none;
    border-left: 0;
}

tr.pager td { padding: 0 0.25em 0 0; }

#menu
{
    margin-top: 70px;
    text-align: center;
    width: auto;
}

    #menu img { height: 80px; }

ul#opcion
{
    font-size: 1.3em;
    font-weight: 600;
    margin: 0px 0px 0px auto!important;
    text-align: center;
}

    ul#opcion li
    {
        display: inline;
        list-style: none;
        padding-left: 50px;
        width: 200px;
        float: left;
    }

        ul#opcion li a
        {
            color: #606060;
            text-decoration: none;
            font-size: small;
            /*Para hacer redondeado y estilo*/
            border: solid 1px #b7b7b7;
            background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dbdbdb));
            background: -moz-linear-gradient(top, #fff, #dbdbdb);
            background: -ms-linear-gradient(top, #fff 0%, #dbdbdb 100%);
            zoom: 1;
            vertical-align: baseline;
            margin: 4px 2px;
            padding: 4px 4px;
            -webkit-border-radius: 1em;
            -moz-border-radius: 1em;
            border-radius: 1em;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            box-shadow: 0 1px 2px rgba(0,0,0,.2);
        }

            ul#opcion li a:hover
            {
                color: #333;
                text-decoration: none;
            }
    
    .itemOpcion:hover 
    {
        cursor: pointer;
        background: -webkit-gradient( linear, left top, left bottom, from(#dbdbdb), to(#fff));
        background: -moz-linear-gradient(top, #dbdbdb, #fff);
        background: -ms-linear-gradient(bottom, #fff 0%, #dbdbdb 100%);
    }
    
    .botonMenuInicio
    {
        display: block;
        width: 120px;
    }
    
    .divBotonInicio
    {
        padding-left: 35px;
        padding-top: 20px;
    }

.editorPequeño, .editor, .editorIntermedio, .editorAmplio
{
    display: inline-block;
    vertical-align: top;
    padding-top: 5px;
    padding-left: 5px;
}

.editorPequeño    { width: 300px; }
.editor           { width: 400px; }
.editorIntermedio { width: 610px; }
.editorAmplio     { width: 810px; }

.editorPequeño label, .editor label, .editorIntermedio label, .editorAmplio label
{
    float: left;
    width: 100px;
    text-align: left;
    margin-top: 2px;
}

.editor a:hover, .editor a:link, .editor a:visited, .editor a, .editor a:active 
{
    width: 200px;
    padding: 2px 2px;
    margin: 0 0 0 0px;
}


.editorPequeño input[type=text], .editor input[type=text], .editorIntermedio input[type=text], .editorAmplio input[type=text]
{
    width: 200px;
    padding:2px 2px;
    margin-bottom: 3px;
}

.editor select, .filtersColumn select, .editorIntermedio select, .editorAmplio select
{
    margin-bottom: 3px;
    border-color: #e2e2e2;
    border-width: 1px;
}
    
.editor select:focus, .filtersColumn select:focus, .editorIntermedio select:focus, .editorAmplio select:focus,
.editor select:hover, .filtersColumn select:hover, .editorIntermedio select:hover, .editorAmplio select:hover
{
    border: 1px solid #70b8db;
}
 
.gridContainer
{
    width:   100%;
    margin:  0 auto;
    display: inline-block;
}

.botonAccion
{    
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dbdbdb));
    background: -moz-linear-gradient(top, #fff, #dbdbdb);
    background: -ms-linear-gradient(top, #fff 0%, #dbdbdb 100%);
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: #03172E !important;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    margin: 4px 2px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    text-decoration: none;
    vertical-align: baseline;
}
.botonAccionMediano { width: 120px !important; }
.botonAccionGrande  { width: 165px !important; }
    
    .botonAccion:hover
    {
        cursor: pointer;
        background: -webkit-gradient( linear, left top, left bottom, from(#dbdbdb), to(#fff));
        background: -moz-linear-gradient(top, #dbdbdb, #fff);
        background: -ms-linear-gradient(bottom, #fff 0%, #dbdbdb 100%);
    }
    
.botoneraFormularioDer
{
    padding-top: 1em;
    border-top-style: solid;
    border-top-color: #3399cc;
    border-top-width: 2px;
    text-align: right;
    width: 100%;
    float: right;
    font-family: "Lucida Sans Unicode", Arial;
}

.botoneraFormularioDer2
{
    padding-top: 1em;
    text-align: right;
    width: 100%;
    font-family: "Lucida Sans Unicode", Arial;
}

.botoneraFormularioIzq
{
    margin-bottom: 1em;
    border-top-style: solid;
    border-top-color: #3399cc;
    border-top-width: 2px;
    text-align: left;
    width: 20%;
    float: left;
    font-family: "Lucida Sans Unicode", Arial;
}

.botoneraFormularioCentrado
{
    padding-top: 1em;
    text-align: center;
    width: 100%;
    font-family: "Lucida Sans Unicode", Arial;
}

.contenidoFormulario
{
    width: 500px;
    margin: 0px auto;
    text-align: left;
    padding: 0px;
}

.controlExtraChico, .controlChico,  .controlMediano, .controlMediano2,
.controlGrande, .controlGrande2, .controlGrande3, .controlExtraGrande,
.controlPantallaCompleta, .controlMedianoLabel, .controlGrandeLabel,
.contenidoFormulario label
{
    font-family: "Lucida Sans Unicode", Arial;
    font-size:   12px;
}

.controlExtraChico       { width: 50px  !important; }
.controlChico            { width: 75px  !important; }
.controlMediano          { width: 150px !important; }
.controlMediano2         { width: 250px !important; }
.controlGrande           { width: 300px !important; }
.controlGrande2          { width: 660px !important; }
.controlGrande3          { width: 460px !important; }
.controlExtraGrande      { width: 600px !important; }
.controlPantallaCompleta { width: 700px !important; }

.controlMedianoLabel, .controlGrandeLabel
{
    height: 18px;
    color: #3399cc;
    border: 0px solid #000000;
}

.controlMedianoLabel { width: 250px !important; }
.controlGrandeLabel  { width: 660px !important; }

.controlPwd
{
    width: 154px !important;
    font-family: "Lucida Sans Unicode", Arial;
    font-size:15px;
}
    .contenidoFormulario label
    {
        margin-right: 0.5em;
        text-align: right;
        font-weight: normal;
    }

.filtersColumn
{
    display: inline-block;
    padding-left: 0.6em;
    padding-top: 5px;
}

.filtersRow { padding: 0.25em; }

.filtersRow .botonAccion
{    
    margin-top: 0px;
    margin-bottom: 0px;
}

.alineadoDerecha
{
    text-align: right;
}

.panelFiltros
{
    background-color: #e2e2e2;
    margin-bottom: 0.5em;
    padding: 1em 1em 1em 1em;
}

.readOnly { background-color: #e2e2e2; }

.fichaIzquierda, .fichaDerecha, .ficha3columnas
{
    float: left;
}

.fichaIzquierda
{
    padding-right: 12px;
    width: 49%;
}

.ficha3columnas
{
    padding-left: 1%;
    width: 32%;
}

.fichaDerecha
{
    padding-left: 12px;
    width: 49%;
}

.centrarLogin { padding-left: 30px; }


    
.ui-datepicker-trigger
{
    cursor: pointer;
    vertical-align: middle !important;
}
    
.EtiquetaDatos
{    
    padding-right: 0px;
    font-size: smaller;
}

.LoadingDiv
{
    text-align: center;
    z-index: 100;
    top: 100px;
    width: auto;
}

.unaLinea, .unaLinea input { display: inline-block !important; }

.unaLinea label
{
    padding-left: 10px !important;
    display: inline-block;
}

.paddingBottom { padding-bottom: 2px !important; }

.sinPaddingTop { padding-top: 0px !important; }

th.ui-th-column div{ height:auto !important; }

.TituloFinSesion
{    
    color: #3399cc;
    text-align: center;    
    font-size: 18px;    
    padding-left: .75em;
}

/*Para el botón SALIR usar esto, pero no queda bien....*/

#header input[type="submit"],
#header input[type="button"]
{
    padding: 7px 4px 4px 4px;        
    text-align: center;    
    list-style: none;
    margin: 0px;
    width: auto;
    z-index: 1000; 
    border: 2px #ffffff solid;
    background-color:  #3399cc;
    color: #EFFAF4;
    display: inline-block;
    font-size: 1em !important;
    font:  14px "Lucida Sans Unicode", Arial;
    line-height: 1.05em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
    z-index: 1000;
}



.reporteNoDatos
{
    color: #3399cc;
    text-align: center;    
    font-size: 18px;    
    font-weight: bold;
    padding-left: .75em;
    height: 2em;
    width: 500px;
    display: block;
}

.cuestionario label
{
    width: 100%;
    text-align: left;
    margin-top: 0px;
}

.cuestionario input[type=text]
{
    width: 400px !important;
    padding: 0px 0px;
    margin-bottom: 0px;
    display: none;
}

.cuestionario input[type="checkbox"]
{
    margin-top: 1px; 
    display: none;
}

.cuestionario input:focus[type="checkbox"]
{
   outline: 2px solid #71C69D;
}

.cuestionario div label
{
    text-align:left;
    display:none; 
    width: 400px !important;
}

textarea
{
    resize: none;
}

/**Dashboards**/

.dashboardpanel
{
    height: 400px;
    width: 350px;
    float: left;
    position: relative;
    cursor: pointer;
    margin-left: 10px;   
    text-align: center;
}

#panel1 {  }
#panel2 {  }
#panel3 {  }
#panel4 { margin-top: 30px; }
#panel5 { margin-top: 30px; }
#panel6
{
	margin-top: 30px;
	background: #6C0;
}

.uploadInput { visibility:hidden; }

.divArchivosAdjuntos
{
    float: left;
    padding: 2px 0px 2px 0px;
    margin: 2px 4px 4px 0px;
    height: 25px;
    width: 500px;
    border: 1px solid #A4A4A4;
    overflow-y: scroll;
}

.divAdjunto
{
    height: 15px;
    float: left;
    border: 1px solid #D8D8D8;
    margin: 0px 2px 2px 0px;
    padding: 0px 2px 2px 0px;
    font-size: .65em;
}

.datosUsuario
{
    display: inline-block !important;
    overflow: hidden;
    padding-top: 9px;
    margin: 0px;
}

.checkboxlist { width: 340px; }

.checkboxlist td 
{
    width: 240px !important;
    display: inline !important;
    height: 20px;
    
}

.checkboxlist tr:hover { background-color: #dbdbdb; }

.radiobuttonlist label, .checkboxlist label
{
    float: none !important;
    margin-right: 20px;
}

.fichaOculta    { visibility: hidden; }

.fichaInvisible { display: none; }

.listadoOpciones
{
    overflow-y: scroll;
    overflow-x: hidden;
    width:250px;
    height:60px;
    border: 1px solid #dbdbdb;
    padding-left:2px;
}

.left { float: left; }
.right { float: right; }

.divfileinputs
{
	position: relative;
	border: 0px solid red;
}

.divfakefile
{
    position: absolute;
    top: 0px;
    z-index: 1;
    border: 0px solid #0000FF;
}

input.file
{

	position: relative;	
	text-align: right;
	-moz-opacity: 0;
	filter: alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
	width: 392px !important;
	height: 35px;
    font-family: "Lucida Sans Unicode", Arial;
    font-size: 12px;
}

.error_page
{
    color: black;
    background-color: #ffffff;
    margin: 7% auto;
    padding-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    text-align: center;
    text-transform: uppercase;
}

.subtitulo
{
    display: block;
    width: 100%;
    background-color: #3399cc;
    color: #000000;
    text-align: center;
    padding: 1px;
    margin-bottom: 10px;
    font-size: 0.95em;
}