/* 
    Creado el : 6/03/2015, 02:16:44 PM
    Autor     : Ing. Maai Nolasco Sánchez
*/

* { margin: 0; }

body{
		/*Codigo para ajustar una imagen de fondo segun la resolución de la Pantalla*/
    /*background: url(../../imagenes/generales/fondo.jpg) no-repeat center center fixed;*/
    background-size: cover;
    color: rgb(13, 13, 13);
    font-family: helvetica, Arial;
    font-size: 16px;
}
                       /*..... index, logueo, main .....*/
#winPrincipal 
{
    height: 100%;
    margin-top: 5px;
    width: 100%;
    /*padding: 0 10px;*/
    /*border: 1px solid red;*/
}

input{
	margin: 0em 0em 0.2em 0em;
}
input:required{
	/*outline: 1px solid red;*/
}

.alinearHoriz
{
    display: inline-block;
    vertical-align: top;
}

.alinearVert
{
    display: block;
    vertical-align: middle;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++ PARA EL USO DEL SISTEMA ++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

fieldset{
	border-radius: 8px;
}

footer{
	width: 100%;
	border: 0px solid red;
}

.boton {
    transition: border-color 0.21799999475479s 0 cubic-bezier(0.25, 0.1, 0.25, 1);
    border-radius: 2px;
    background-color:#F1F1F1;
    border: 1px solid rgba(0, 0, 0, 0.0976563);
    color: #666;
    display: inline-block;
    font-weight: normal;
    height: 28px;
    margin: 0 5px;
    outline: 0px none #666;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    text-shadow: white 0px 1px 0px;
}
.boton:hover {
	-webkit-box-shadow: rgba(0, 0, 0, 0.0976563) 0px 1px 1px 0px; 
	-moz-box-shadow: rgba(0, 0, 0, 0.0976563) 0px 1px 1px 0px; 
	-o-box-shadow: rgba(0, 0, 0, 0.0976563) 0px 1px 1px 0px; 
	-ms-box-shadow: rgba(0, 0, 0, 0.0976563) 0px 1px 1px 0px; 
	-khtml-box-shadow: rgba(0, 0, 0, 0.0976563) 0px 1px 1px 0px; 
	border-color:#747474; 
	outline-color: #333;
}
.boton a { 
	color: #666; 
	text-decoration: none; 
	cursor: default;
	display: block; 
	padding: 7px 10px 7px 12px;
}
.boton:hover a {
	color: #333;
}

.estiloEncabezados{
	color: rgba(0,0,0,0.4);
		
	padding: 2px 0 2px 0;
	text-align: center;	
}

.divBtnRegresar
{
    display: block;
    position: relative;
    top: -23px;
    left: 24px;
    float: right;
}
.divBtnRegresar #ibtnRegresar
{
    font-size: 1.1em;
    color: white;
    cursor:pointer;
    padding: 4px;
    background-color: #c07807;
    border-radius: 18px;
}
.divBtnRegresar img
{
    height: 25px;
}

legend {
	border-left: solid 1px rgba(0,0,0,0.4);
	border-right: solid 1px rgba(0,0,0,0.4);
	border-radius: 8px;
	color: olive;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}
.legend {
	border-left: solid 1px rgba(0,0,0,0.4);
	border-right: solid 1px rgba(0,0,0,0.4);
	border-radius: 8px;
	color: olive;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	float: right;
}

/*=============================================================================*/
/*************************** PARA PONER EL LOADING *****************************/
/*=============================================================================*/
#loading{
    background: rgba(0,0,0,0.7);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#iconLoading{
    color: white;
    font-size: 2em;
    left: 50%;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 50%;
    width: auto;

    transition: 0.1s ease;
}
@keyframes iconLoading { /*ponemos un nombre al frame*/
   from {transform: rotate(0deg);}/*Empiesa la animacion*/
   to   {transform: rotate(360deg);}/*Termina la animacion*/
}
#iconLoading{
   /*Code para Chrome y Safari*/
   animation-timing-function: linear;
   animation-duration: 1s; /*tiempo de ejecucion*/
   animation-name: iconLoading; /*Indicamos el nombre de nuestro frame*/
   animation-iteration-count: infinite; /*duracion de la animacion*/
}

#blockWorkArea{
    background: rgba(0,0,0,0.1);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/*=============================================================================*/
/********************** PARA DIBUJAR UNA VENTANA MODAL *************************/
/*=============================================================================*/
.mwfModal{
    background: rgba(0,0,0,0.4);
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

.mwfModal .mwfForm{
    background: #f0f0f0;
    box-shadow: 0 0px 20px 8px rgba(0,0,0,0.3);
    height: auto;                                                               /* <-- Para altura en porcentaje, ajustar en este atributo y el de .mwfForm dicho porcentaje. Tomar en cuenta que la altura da guerra*/
    margin-left: -35%;
    overflow: hidden;
    position: fixed;                                                            /*con position absolute, no se pone en el centro de la pantalla, sino que ocupa solo el lugar de siempre*/
    left: 50%;
    top: 50px;
    width: 70%;                                                                 /* <-- Para un ancho fijo poner el whith en pixeles y para que el formulario se mantenga centrado poner position en static y hacer "margin: 50px auto 0 auto;" */
}

.mwfModal .mwfForm-AnchoFijoCentrado                                            /*Le quitamos la elasticidad a la ventana modal y la centramos*/
{
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;                                                               /* <-- Definir el ancho necesitado */
}

.mwfModal .mwfTitBar{
    background: #ae6739;
    border-bottom: 1px solid gray;
    color: whitesmoke;
    height: 1.5em;
    padding-top: 0.3em;
    text-align: center;
    width: 100%;
}

.mwfModal .mwfTitBar .mwfButtonClose
{
    /*margin-right: 5px;
    float: right;*/
    position: absolute;
    top: 5px;
    right: 5px;
}
.mwfModal .mwfTitBar .mwfIconClose
{
    cursor: pointer;
    font-size: 1.3em;
}
.mwfModal .mwfTitBar .mwfIconClose:hover
{
    color: #F9D6D6;
}

.mwfModal .mwfTitBar .mwfTitle, .mwfModal .mwfTitBar .mwfButtonClose
{
    display: block;
}

.mwfModal .mwfTitBar .mwfTitle
{
    /*border: 1px solid violet;*/
}

.mwfModal .mwfPanelForm
{
    height: auto;                                                               /* <-- Ajustar atributo para un tamaño de altura fijo de la ventana */
    overflow: auto;
    padding-bottom: 10px;
    width: auto;                                                                /* <-- Ajustar atributo para un tamaño de ancho fijo del form poniendo los pixeles y estableciendo el whith de .mwfForm en auto */
}

@media screen and (max-width: 640px)
{
    .mwfModal .mwfTitle                                                         /*Hacemos que el texto de la barra de título no se encime al botón cerrar*/
    {
        display: block;
        margin-right: 30px;                                                     /* <-- Ajustar el ancho del botón cerrar según necesidad */
    }
    .mwfModal .mwfTitBar                                                        /*Hacemos que la barra de título se autoajuste a lo ancho según el contenido*/
    {
        height: auto;
        padding-bottom: 5px;
    }
}

@media screen and (max-width: 750px)
{
    .mwfModal .mwfForm-AnchoAutoajustable
    {
        margin-left: -45%;
        width: 90%;
    }
}

/*=============================================================================*/
/********************* ESTILOS PARA LOS BOTONES COMUNES ************************/
/*=============================================================================*/
.buttonBar
{
    list-style: none;
    padding: 0;
    text-align: center;
}
.buttonBar li
{
    display: inline-block;
}
.buttonBar li a
{
    background: #cdcdcd;
    border: 1px solid #8A8A8A;
    color: #222;
    display: inline-block;
    font-size: 0.8em;
    height: 20px;
    /*outline: #8A8A8A solid 1px;*/
    padding-top: 5px;               /*line-height: 25px;  height: 25px;*/
    text-decoration: none;
    width: 185px;
}
.buttonBar li a img
{
    float: left;
    /*left: -5px;*/
    margin-left: 7px;
    position: relative;
    /*right: 0px;*/
    top: 0px;
    width: 16px;
}
.buttonBar li span
{
    display: block;
    font-size: 3em;
    margin: 0.3em 0 0.5em 0;
}
.buttonBar li a:hover
{
    background: #bee6fd;
    cursor: pointer;
    /*outline: #8ab4ca solid 1px;*/
    border: 1px solid #8ab4ca;
}
.buttonBar li .imponer-hover:hover
{
    background: #bee6fd !important;
    cursor: pointer !important;
    /*outline: #8ab4ca solid 1px;*/
    border: 1px solid #8ab4ca !important;
}
.buttonBar li a:active
{
    background: #98d1ef;
    outline: #2c628b solid 1px;
}
.buttonBar li label:hover
{
    cursor: pointer;
}
.buttonBar li .middleHoriz
{
    display: inline-block;
    vertical-align: middle;
}

.buttonBar .btnDesactivado
{
    background: #d1d1d1 !important;
    outline: 0px solid #d1d1d1;
    border: 1px solid #d1d1d1;
    color: #5f5f5f !important ;
    cursor: default !important;
    text-shadow: #fbfbfb 1px 1px 0px !important;
}
.buttonBar .btnDesactivado:hover
{
    outline: #d1d1d1 solid 0px;
    border: 1px solid #d1d1d1;
}
.buttonBar .btnDesactivado label:hover
{
    cursor: default !important;
}


/* .......................................................................... */
.buttonDiv
{
    color: whitesmoke;
    display: inline-block;
    background-color: #35BC7A;
    padding: 10px;
}
.buttonDiv:hover 
{
    cursor: pointer;
    outline: #31d0b4 solid 3px;
}
.buttonDiv *:hover 
{
    cursor: pointer;
}


/* .......................................................................... */
.singleButton
{
    background: #cdcdcd;
    border: 1px solid #8A8A8A;
    margin: 0;
    /*font-size: 0.8em;*/
    height: 20px;
    /*outline: #8A8A8A solid 1px;*/
    padding: 3px 3px;
    text-align: center;
    width: 155px;
}
.singleButton a
{
    text-decoration: none;
    color: #222;
    font-size: 0.8em;
}
.singleButton .iconButton
{
    margin-right: 3px;
    vertical-align: middle;
    color: black;
}
.singleButton .vertMarginable                                                   /*Para poder midificar el margin, principalmente si en un label*/
{
    display: inline-block;
    margin-top: 4px;                                                            /*Modificar este parámetro desde el css particular del botón*/
}
.singleButton:hover
{
    background: #bee6fd;
    border: 1px solid #8ab4ca;
    cursor: pointer;
    /*outline: #8ab4ca solid 1px;*/
}
.singleButton *:hover
{
    cursor: pointer;
}
.singleButton:active
{
    background: #98d1ef;
    outline: #2c628b solid 1px;
}
.singleButtonDeactivate
{
    background: #d1d1d1 !important;
    color: #5f5f5f !important ;
    cursor: default !important;
    text-shadow: #fbfbfb 1px 1px 0px !important;
}
.singleButtonDeactivate:hover
{
    outline: #d1d1d1 solid 0px;
    border: 1px solid #d1d1d1;
}

/*=============================================================================*/
/******************************* PARA LAS TABLAS *******************************/
/*=============================================================================*/
.scrollTable {
    height: 100%;                                                                /*90% Por lo del scroll, 66px para un ancho fijo mínimo*/
    overflow: auto;
    position: relative;                                                         /*Para que no se desborde la tabla*/
    width: 100%;
}

.scrollTable table
{
    padding: 0;
    position: absolute;                                                         /*para que permita que el contenedor (scrollTable) se resizee*/
    margin: 0;
    width: 100%;
}

.scrollTable table th{
    background: #9b6d02;/*rgba(0,0,0,0.2);*/
    color: white;/*rgba(0,0,0,0.8);  rgba(25,25,112,1);*/
    font-size: 0.7em;
    height:15px;
    padding: 1px 3px 1px 3px;
    text-align: center;
}
.scrollTable table tr{
    height:15px;
}
.scrollTable table td{
    font-size: 0.7em;
    text-align: left;
    border-left: 1px dashed rgba(0,0,0,0.2);
    border-right: 1px dashed rgba(0,0,0,0.2);
}

/*..... Para el coloreado .....*/
.scrollTable table tbody tr:nth-child(odd) 
{
    background: #FFFFFF;
}
.scrollTable table tbody tr:nth-child(even) 
{
    background: #EBEBEB;
}
.scrollTable table tbody tr:hover td 
{ 
    /*background: rgba(193,213,224,0.8)!important; /*dodgerblue;*/
    /*color: #000000; /*#ffffff;*/
    /*cursor: pointer;*/
}

.filaSel 
{
    background: rgba(97,148,80,0.5) !important; /*70,130,180,0.5*/
    color: rgba(0,0,0,0.9);
}

/*=============================================================================*/
/**************************** ESTILOS PARA PANEL *******************************/
/*=============================================================================*/
.panel
{
    border: 1px solid #a9a9a9;
    box-shadow: 1px 1px 1px #fff;
    margin: 0 0 1em 0;
    padding: 0 0.5em 0.5em 0.5em;
}
.panel .tituloPanel
{
    /*background: #dfdedd;*/
    background: #898c51;
    color: #ffffff;
    display: inline-block; /* <-- antes comentado */
    font-size: 0.8em;
    margin: 0 0 0 0;
    line-height: 20px; /* <-- antes 16px */
    padding: 0px 6px 0px 5px;   /* <-- antes 0px 5px 4px 5px; */
    /*  Implementar esta área de código en lugar de padding de arriba
    padding: 0px 5px 4px 5px;
    line-height: 20px;
    display: block;
    */
    position: relative;
    top:-9px; /* <-- antes -10px */
}

/*=============================================================================*/
/***************************** GLOBOS DE AYUDA *********************************/
/*=============================================================================*/
.globoayuda:hover .globoayuda_pointdown                                         /* Si se desea usar como tooltip iniciar con esta clase */
{
   opacity: 0.9;
   bottom: -50px;
}

.globoayuda_pointdown, .globoayuda_pointup, .globoayuda_pointright, .globoayuda_pointleft
{
    position: absolute;
    left: 50%;
    bottom: -70px;                                                              /*<--- Mover aquí para la posición vertical del globo */
    
    background: #4285f4/*#f7ffa3/*rgba(255,255,255,0.3)*/;                               /*<--- Mover aquí para el color del globo */
    border: 2px solid #4285f4/*#a09e9e/*#fff*/;                                          /*<--- Mover aquí para el color de borde del globo */
    border-radius: 5px;
    height: auto;
    line-height: 20px;
    pointer-events: none;
    margin-left: -90px;
    padding: 10px;
    width: 150px;
    
    /*color: #5d5d5d;*/
    color: white/*#d84f4f*/;
    font-size: 13px;
    text-align: center;
    /*font-family: Georgia, serif;*/
    /*font-weight: 400;*/
    /*font-style: italic;*/
    /*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);*/
    
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    /*-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;*/
    
    /*opacity: 0;/**/
    display: none;
}

/* ......................... PARA TRIÁNGULO INFERIOR ......................... */
.globoayuda_pointdown:before,
.globoayuda_pointdown:after
{
    bottom: -12px;                                                              /*<--- Mover aquí para la posición vertical del triángulo */
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #4285f4/*#a09e9e/*rgba(0,0,0,0.1)*/;                          /*<--- Mover aquí para el color de contorno del triángulo*/
    content: '';
    height: 0;
    left: 50%;
    margin-left: -9px;                                                          /*<--- Mover aquí para la posición horizontal del triángulo*/
    position: absolute;
    width: 0;
}

.globoayuda_pointdown:after
{
    border-top: 12px solid #4285f4/*#f7ffa3*/;                                             /*<--- Mover aquí para el color de fondo del triángulo*/
    bottom: -10px;                                                              /*<--- Mover aquí para la posición vertical del triángulo */
    margin-left: -9px;                                                          /*<--- Mover aquí para la posición horizontal del triángulo*/
}

/* ......................... PARA TRIÁNGULO SUPERIOR ......................... */
.globoayuda_pointup:before,
.globoayuda_pointup:after
{
    border-bottom: 10px solid #4285f4/*#a09e9e/*rgba(0,0,0,0.1)*/;                       /*<--- Mover aquí para el color de contorno del triángulo*/
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    content: '';
    height: 0;
    left: 50%;
    margin-left: -9px;                                                          /*<--- Mover aquí para la posición horizontal del triángulo*/
    position: absolute;
    top: -12px;                                                                 /*<--- Mover aquí para la posición vertical del triángulo */
    width: 0;
}

.globoayuda_pointup:after
{
    border-bottom: 12px solid #4285f4/*#f7ffa3*/;                                          /*<--- Mover aquí para el color de fondo del triángulo*/
    margin-left: -9px;                                                          /*<--- Mover aquí para la posición horizontal del triángulo*/
    top: -10px;                                                                 /*<--- Mover aquí para la posición vertical del triángulo */
}

/* ......................... PARA TRIÁNGULO DERECHO ......................... */
.globoayuda_pointright:before,
.globoayuda_pointright:after
{
    top: 27px;                                                              /*<--- Mover aquí para la posición vertical del triángulo */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #4285f4/*#a09e9e/*rgba(0,0,0,0.1)*/;                          /*<--- Mover aquí para el color de contorno del triángulo*/
    content: '';
    height: 0;
    left: 50%;
    margin-left: 87px;                                                          /*<--- Mover aquí para la posición horizontal del triángulo*/
    position: absolute;
    width: 0;
}

.globoayuda_pointright:after
{
    /*border-left: 12px solid #4285f4/*#f7ffa3*//*;*/                                             /*<--- Mover aquí para el color de fondo del triángulo*/
    /*bottom: -10px;*/                                                              /*<--- Mover aquí para la posición vertical del triángulo */
    /*margin-left: 85px;                                                          /*<--- Mover aquí para la posición horizontal del triángulo*/
}

/* ......................... PARA TRIÁNGULO IZQUIERDO ......................... */
.globoayuda_pointleft:before,
.globoayuda_pointleft:after
{
    border-right: 10px solid #4285f4/*#a09e9e/*rgba(0,0,0,0.1)*/;                       /*<--- Mover aquí para el color de contorno del triángulo*/
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    content: '';
    height: 0;
    left: 50%;
    margin-left: -9px;                                                          /*<--- Mover aquí para la posición horizontal del triángulo*/
    position: absolute;
    top: -12px;                                                                 /*<--- Mover aquí para la posición vertical del triángulo */
    width: 0;
}

.globoayuda_pointleft:after
{
    border-right: 12px solid #4285f4/*#f7ffa3*/;                                          /*<--- Mover aquí para el color de fondo del triángulo*/
    margin-left: -9px;                                                          /*<--- Mover aquí para la posición horizontal del triángulo*/
    top: -10px;                                                                 /*<--- Mover aquí para la posición vertical del triángulo */
}

/* .......................... PARA EL BOTÓN CERRAR .......................... */
.globoayuda_pointdown .btnCerrarGlobo, .globoayuda_pointup .btnCerrarGlobo,
.globoayuda_pointright .btnCerrarGlobo, .globoayuda_pointleft .btnCerrarGlobo
{
    border: 1px solid #dc1020;
    color: #dc1020;
    display: none;
    font-size: 11px;
    font-weight: bold;
    height: 14px;
    line-height: 15px;                                                          /* Modifica la posición del texto con respecto a su posición interna */
    padding: 0px 2px 0px 2px;
    position: absolute;
    right: 4px;
    top: 2px;
}

.globoayuda_pointdown .btnCerrarGlobo label:hover,
.globoayuda_pointup .btnCerrarGlobo label:hover
.globoayuda_pointright .btnCerrarGlobo label:hover,
.globoayuda_pointleft .btnCerrarGlobo label:hover
{
    color: red;
    cursor: pointer;
}


/*=============================================================================*/
/************************** ESTILOS PARA COMBOBOX ******************************/
/*=============================================================================*/
.combobox {
   margin:10px auto 10px auto;                                                  /* <-- Configurar el margen de arriba y abajo */
   border:1px solid #d9d9d9;
   height:30px;                                                                 /* <-- Mover aquí para la altura del combo */
   overflow: hidden;
   width: 200px;                                                                /* <-- Mover aquí para el ancho del combo */
   position:relative;
}
.combobox select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 30px;                                                                /* <-- Establecer la misma altura del select según la clase .combobox */
   padding: 5px;
   width: 250px;                                                                /* <-- Establecer el mismo ancho del select según la clase .combobox */
}

.combobox select:focus{ outline: none;}

.combobox::after{
	content:"\025be";
	display:table-cell;
	padding-top:7px;
	text-align:center;
	width:30px;                                                             /* <-- Mover aquí para el ancho del recuadro de la flechita */
	height:30px;                                                            /* <-- Mover aquí el alto del recuadro de la flechita según la clase .combobox */            
	background-color:#d9d9d9;
	position:absolute;
	top:0;
	right:0px;	
	pointer-events: none;
}