/*
  COLORES UTILIZADOS
    #BDBDBD     ->  Color del borde de las regiones y los tabs principales
    #E6E4E6     ->  Color de fondo de la app (gris claro)
    #003068     ->  Azul oscuro utilizado para ciertas regiones (anteriormente era TB y SB)
    #FFF        ->  Fondo del contenido central
    #CEE8FF     ->  Color de tabs desactivados
    #5A82A7     ->  Color utilizado para el header de las regiones centrales
    #09213D     ->  Color para la region del toolbar y estatus bar
*/


/*Se deja sin margen la app para que el toolbar y estatus bar se encuentren sin espacio*/
body {
  padding: 0px 0px !important;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/*Solo el área central tendrá el margen*/
body #outer-center {
  padding: 5px 20px !important;
}

/*Color gris en el exterior de la app*/
body.custom,
.custom #outer-center {
  background-color: #E6E4E6;
}

/*Toolbar y EstatusBar en Azul*/
.custom #outer-north,
.custom #outer-south {
  position: absolute;
  background-color: #09213D !important;
  padding:		.1em 1em;
  padding: 0px 0px 0px 2px;
}

/*TABS OUTER PRINCIPALES*/
.custom #tabbuttons LI {
  margin-left:	10px;
  padding: 5px !important;
  background: #FFF;
  border: 1px solid #BDBDBD;                  /*Se agrega un borde gris*/
  margin-bottom: 5px;
  border-top-right-radius: 0px !important;    /*Se elimina el redondeo de los tabs*/
  border-top-left-radius: 0px !important;     /*Se elimina el redondeo de los tabs*/
}

/*
.custom #tabbuttons LI#tab_principal4 {
  padding: 0px !important;
}
*/

.custom #tabbuttons LI.current { background: #5A82A7; }
.custom #tabbuttons LI:first-child { margin-left:	0px; }

/*Tab desactivado se vuelve a indicar ya que postitall.css lo sobreescribe y NO se muestra deshabilitado*/
.custom #tabbuttons LI.ui-state-disabled{
  opacity: .35;
  filter: Alpha(Opacity=35);
}

.custom #tabbuttons .tab1 a {
  background: #FFF;
  color: #003068;
  font-size: 11px !important;
}

.custom #tabbuttons .tab1.current a {
  background: #5A82A7;
  color: #FFF;
}

/*COLOR GRIS DE LAS REGIONES*/
.custom #tabpanels #tab1,
.custom #tabpanels #tab2,
.custom #tabpanels #tab3,
.custom #tab1 .ui-layout-resizer-sliding,
.custom #tab2 .ui-layout-resizer-sliding,
.custom #tab3 .ui-layout-resizer-sliding,
.custom #tab1 .ui-layout-west,
.custom #tab2 .ui-layout-west,
.custom #tab3 .ui-layout-west,
.custom #tab1 .ui-layout-east,
.custom #tab2 .ui-layout-east,
.custom #tab3 .ui-layout-east,
.custom #tabpanels #tab1, .custom #tab1 .ui-layout-resizer-sliding, .custom #tab1 .ui-layout-west,
.custom #tabpanels #tab2, .custom #tab2 .ui-layout-resizer-sliding, .custom #tab2 .ui-layout-west,
.custom #tabpanels #tab3, .custom #tab3 .ui-layout-resizer-sliding, .custom #tab3 .ui-layout-west,
.custom #tab1 .ui-layout-center, .custom #tab2 .ui-layout-center, .custom #tab3 .ui-layout-center {
  background: #E6E4E6;
  padding: 0px;
}

/*BORDE DE LAS REGIONES PRINCIPALES*/
.custom #tab1 .ui-layout-west .ui-layout-center,
.custom #tab1 .ui-layout-west .ui-layout-south,
.custom #tab1 .ui-layout-center .ui-layout-center,
.custom #tab1 .ui-layout-center .ui-layout-south,
.custom #tab2 .ui-layout-west .ui-layout-center,
.custom #tab2 .ui-layout-west .ui-layout-south,
.custom #tab2 .ui-layout-center .ui-layout-center,
.custom #tab2 .ui-layout-center .ui-layout-east,
.custom #tab2 .ui-layout-center .ui-layout-south,
.custom #tab3 .ui-layout-west .ui-layout-center,
.custom #tab3 .ui-layout-center .ui-layout-center{
  border: 1px solid #BDBDBD;
  padding: 0px;
}

.custom #tab1 .ui-layout-resizer-closed, .custom #tab2 .ui-layout-resizer-closed, .custom #tab3 .ui-layout-resizer-closed
{ border: 0px solid #000; }

.custom #tab1 .toolbar, .custom #tab2 .toolbar, .custom #tab3 .toolbar
{ border: 0px solid #000; }

.custom #tab1, .custom #tab2, .custom #tab3,
.custom #tab1 .ui-widget-header, .custom #tab2 .ui-widget-header, .custom #tab3 .ui-widget-header,
.custom #tab1 .ui-widget-footer, .custom #tab2 .ui-widget-footer, .custom #tab3 .ui-widget-footer	{
  background: #5A82A7;
  border-radius: 0px !important;
  border-top-right-radius: 0px !important;    /*Se elimina el redondeo de los tabs*/
  border-top-left-radius: 0px !important;     /*Se elimina el redondeo de los tabs*/
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.custom #tab2 .tabs.tab_principal_selected .ui-widget-header:not(.ui-widget-footer) { background: #5A82A7; }
.custom #tab2 .tabs.tab_principal_unselected .ui-widget-header:not(.ui-widget-footer)	{ background: #949494; }

/*Eliminar bordes redondeados*/
.custom .ui-layout-north > .toolbar,
.custom .ui-layout-south > .toolbar,
.tabs {
  border:			                    0;
  border-top-radius:				      0px;
  -moz-border-radius-topleft: 	  0px;
  -moz-border-radius-topright: 	  0px;
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius:0px;
  border-bottom-radius:				       0px;
  -moz-border-radius-bottomleft: 		 0px;
  -moz-border-radius-bottomright: 	 0px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius:0px;
}

/*Cambio en ancho de regiones*/

/* Espacio de las regiones west, center y east */
.tab-panel .ui-layout-west,
.tab-panel .ui-layout-center,
.tab-panel .ui-layout-east
{
   padding:	2px 2px 2px 2px;        /* same as west__spacing_closed */
   border: 0px solid white;
}

/*Se eliminó la región del footer*/
.ui-widget-footer {
  display: none;
  font-size:		.85em;
  font-weight:	normal !important;
}

/*Se muestran las imagenes togglers en algunos footers*/
#tab1 .ui-layout-center .ui-layout-center .ui-widget-footer,
#tab1 .ui-layout-west .ui-layout-center .ui-widget-footer,
#tab2 .ui-layout-center .ui-layout-center .ui-widget-footer,
#tab2 .ui-layout-west .ui-layout-center .ui-widget-footer,
#tab3 .ui-layout-west .ui-layout-center .ui-widget-footer {
  display: block;
  padding: 4px 1em;
  margin: 0px;
  background-color: #FFF;
  height: 16px;
}
/*
#tab3  > .ui-layout-center > .ui-widget-footer{
  display: block;
  padding: 0px 1em;
  height: 8px;
}
*/

/*Región del contenido de cada sección: west, south, center*/
.custom .ui-widget-content {
  padding: 0px 10px;
  border:			0;
  background: #FFF;
  color:			#000;
}

/*Toolbar principal de la aplicación*/
.w2ui-toolbar{ top: 0; height: 100%; }

.ui-widget-header .ui-corner-top{
  border-radius:			                0 !important;
  border-bottom-radius:               0 !important;
  border-top-radius:                  0 !important;
  border-top-right-radius:            0 !important;
  border-top-left-radius:             0 !important;
  border-bottom-right-radius:         0 !important;
  border-bottom-left-radius:          0 !important;
}

.tab-panel .ui-layout-west { border: 0px solid green; }
.ui-layout-west { border: 0px solid green; }
.custom .ui-widget-content {border: 0px solid green; }
.ui-layout-west .ui-layout-pane { border: 0px solid red; }

/*Región para cambiar el tamaño de las regiones (donde está la img de
la flecha para ocultar la región)*/
.ui-layout-resizer{
  background: #E6E4E6;
  height: 0.5em;
  min-height: 0.5em;
}

.custom .ui-widget-header {
  cursor: default;
}

.custom #tab2 #innerTabs .toolbar ,
.custom #tab2 #innerTabsComp .toolbar ,
.custom #tab2 #innerTabsCorr .toolbar ,
.custom #tab1 #innerTabsTools_tab1 .toolbar,
.custom #tab2 #innerTabsTools_tab2 .toolbar,
.custom #tab3 #innerTabsTools_tab3 .toolbar,
.custom #tab2 #innerTabsIndiceLey .toolbar
{
  background: #FFF;
  text-align: center;
  color: #505050 !important;
  font-size: 100%;
  border-bottom: 1px solid #0099FF;
}

#innerTabs.ui-layout-center,
#innerTabsCorr.ui-layout-center,
#innerTabsComp.ui-layout-center,
#innerTabsTools_tab1.ui-layout-center,
#innerTabsTools_tab2.ui-layout-center,
#innerTabsTools_tab3.ui-layout-center,
#innerTabsIndiceLey.ui-layout-center
{
  padding:	0;
}

.custom #innerTabs > DIV.w2ui-tabs UL,
.custom #innerTabsCorr > DIV.w2ui-tabs UL,
.custom #innerTabsComp > DIV.w2ui-tabs UL,
.custom #innerTabsTools_tab1 > DIV.w2ui-tabs UL,
.custom #innerTabsTools_tab2 > DIV.w2ui-tabs UL,
.custom #innerTabsTools_tab3 > DIV.w2ui-tabs UL,
.custom #innerTabsIndiceLey > DIV.w2ui-tabs UL {
  padding: 0px;
  margin: 0px;
}

.custom #innerTabs > DIV.w2ui-tabs UL LI:first-child,
.custom #innerTabsCorr > DIV.w2ui-tabs UL LI:first-child,
.custom #innerTabsComp > DIV.w2ui-tabs UL LI:first-child,
.custom #innerTabsTools_tab1 > DIV.w2ui-tabs UL LI:first-child,
.custom #innerTabsTools_tab2 > DIV.w2ui-tabs UL LI:first-child,
.custom #innerTabsTools_tab3 > DIV.w2ui-tabs UL LI:first-child,
.custom #innerTabsIndiceLey > DIV.w2ui-tabs UL LI:first-child
{ margin-left:	0px; }

#innerTabs > div.w2ui-tabs ul li,
#innerTabsComp > div.w2ui-tabs ul li,
#innerTabsCorr > div.w2ui-tabs ul li,         /*El tab de contenido de correlacion tiene una tabla por eso no se puede colocar " > ul "*/
#innerTabsTools_tab1 > ul li,
#innerTabsTools_tab2 > ul li,
#innerTabsTools_tab3 > ul li,
#innerTabsIndiceLey > ul li {
  border-radius:			       0;		/*Elimina lo redondeado de los tabs de leyes*/
  -moz-border-radius:	  	   0;
  -webkit-border-radius:	   0;
  top: 0;
  padding: 0;
  margin-right: 5px;
  padding-right: 5px;
  background-color: #CEE8FF;
  font-size: 12px;
  text-transform:	none;
}

#innerTabs > div.w2ui-tabs ul li.ui-tabs-active,
#innerTabsComp > div.w2ui-tabs ul li.ui-tabs-active,
#innerTabsCorr > div.w2ui-tabs ul li.ui-tabs-active,
#innerTabsTools_tab1 ul li.ui-tabs-active,
#innerTabsTools_tab2 ul li.ui-tabs-active,
#innerTabsTools_tab3 ul li.ui-tabs-active,
#innerTabsIndiceLey ul li.ui-tabs-active { background-color: #FFF;}

#innerTabs.tab_principal_selected > div.w2ui-tabs ul li.ui-tabs-active,
#innerTabsComp.tab_principal_selected > div.w2ui-tabs ul li.ui-tabs-active,
#innerTabsCorr.tab_principal_selected > div.w2ui-tabs ul li.ui-tabs-active,
#innerTabsTools_tab1.tab_principal_selected ul li.ui-tabs-active,
#innerTabsTools_tab2.tab_principal_selected ul li.ui-tabs-active,
#innerTabsTools_tab3.tab_principal_selected ul li.ui-tabs-active
{ background-color: #FFF;}

#innerTabs.tab_principal_unselected > div.w2ui-tabs ul li.ui-tabs-active,
#innerTabsComp.tab_principal_unselected > div.w2ui-tabs ul li.ui-tabs-active,
#innerTabsCorr.tab_principal_unselected > div.w2ui-tabs ul li.ui-tabs-active,
#innerTabsTools_tab1.tab_principal_unselected ul li.ui-tabs-active,
#innerTabsTools_tab2.tab_principal_unselected ul li.ui-tabs-active,
#innerTabsTools_tab3.tab_principal_unselected ul li.ui-tabs-active
{ background-color: #CEE8FF; }

.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
	background-image: url("../definidos/images/ui-icons_222222_256x240.png");
}

/*Color de la región entre los tabs principales y la región central de la app*/
.ui-layout-resizer-north{
  background-color:#E6E4E6 !important;
}

#innerTabs, #innerTabsComp, #innerTabsCorr, #innerTabsTools_tab1,
#innerTabsTools_tab2, #innerTabsTools_tab3, #innerTabsIndiceLey{
  background-color: #FFFFFF !important;
}

#innerTabs #footer_abrir_tabsCorr, #innerTabsComp #footer_abrir_tabsCorr_fromComp, #innerTabsCorr #footer_tabsCorr{
  background-color: #FFFFFF !important;
}

#ul_tabs_tools_tab1, #ul_tabs_indice_tematico, #ul_tabs_tools,
#ul_tabs_tools_tab3, #ul_tabs_tools_tab13{
  border-bottom: 0px solid #071EF2;
}

#ul_tabs_leyes, #ul_tabs_corr, #ul_tabs_leyesComp, #ul_tabs_sesion{
	border-bottom: 1px solid #071EF2;
  /*JESM-OCT2020*/
  margin-left: 15px !important;
  margin-right: 15px !important;
}

#ul_tabs_tools_tab1 li.ui-tabs-active, #ul_tabs_leyes li.ui-tabs-active,
#ul_tabs_corr li.ui-tabs-active, #ul_tabs_leyesComp li.ui-tabs-active,
#ul_tabs_indice_tematico li.ui-tabs-active, #ul_tabs_tools li.ui-tabs-active,
#ul_tabs_tools_tab3 li.ui-tabs-active, #ul_tabs_sesion li.ui-tabs-active,
#ul_tabs_tools_tab13 li.ui-tabs-active
{
	border-bottom: 1px solid #FFF !important;
}

li.ui-state-default.ui-state-hidden[role=tab]:not(.ui-tabs-active) {
    display: none;
}