/*
 * ************** Generales ***************
 */

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

html { 
	width: 100%; 
	height: 100%; 
	margin: 0px; 
	padding: 0px;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
}

body {
	font-size: 13px;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
}

#page {
	position: relative;
    min-width: 320px;
    max-width: 100%;
    min-height: 100vh;
    background-color: #ecf0f5;
}

#page-header {
	top: 0px;
	position: sticky;
	width: 100%;
	height: 55px;
	color: #ffffff;
	margin-bottom: 2px;
	background-color: #333333;
	z-index: 10;
}

#page-content {
	padding: 5px 15px 5px 15px;
    background-color: #ecf0f5;
}

#page-footer {
	color: #999999;
	font-weight: 300;
	font-size: 11px;
	position: fixed;
    bottom: 0px;
    width: 100%;
    height: 20px;
    border-top: 1px solid #cccccc;
	background-color: #ffffff;
	padding-top: 10px;
}

#page-logo {
	display: inline;
}

#page-logo img {
	margin: 2px 0px 0px 5px;
}

#show-menu {
    float: left;
    cursor: pointer;
    margin: 3px 5px 3px 10px;
    padding: 7px 15px 6px 15px;
    font-size: 32px;
    font-weight: bold;
    color: #fffffff;
}

#page-menu {
	
}

#page-menu i {
	font-size: 16px;
	color: #ffffff;
	margin-right: 10px;
}

#page-menu .mm-listitem {
	cursor: pointer;
}

#page-user { 
	float: right;
	width: 150px;
	color: #ffffff; 
	text-align: right; 
	white-space: nowrap;
	padding: 20px 5px 0px 0px;
}

#page-user a {
	color: #ffffff;
}

body .mm-slideout {
	--mm-sidebar-collapsed-size: 45px;
}


/*
 * ************** Formulario ***************
 */

form {
  max-width: 100%;
  display: block;
}

input {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  border: 1px solid #cccccc;
  padding: 4px 7px;
  color: #777777;
  font-size: 1em;
}

input[type="text"] {
  min-height: 16px;
  font-size: 1em;
  line-height: 1.15;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  border-radius: 5px;
}

input[id$="_id"], input[id$="_codigo"], input[id$="_fnacimiento"], input[id$="_fhora"], input[id$="_fecha"] {
  width: 150px;
}

button,
input[type="button"],
input[type="submit"] {
  color: #ffffff;
  text-decoration: none;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  padding: .4em 1em;
  display: inline-block;
  position: relative;
  line-height: normal;
  margin-right: .1em;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #2e6da4;
  background: #3baae3;
  font-weight: normal;
  border-radius: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

select {
  min-height: 26px;
  padding: 1px;
  text-align: left;
  color: #333333;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  line-height: normal;
  margin-right: .1em;
  vertical-align: middle;
  border: 1px solid #cccccc;
  background: #ffffff;
  font-weight: bold;
  border-radius: 5px;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
}

select:hover {
  border: 1px solid #74b2e2;
  font-weight: bold;
  color: #0070a3;
}

input[type="button"]:hover,
input[type="submit"]:hover {
  border: 1px solid #2e6da4;
  background: #2e6da4;
  font-weight: normal;
  color: #ffffff;
}

button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
  border: 1px solid #2694e8;
  background: #3baae3;
  font-weight: normal;
  color: #ffffff;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
  border: 1px solid #2694e8;
  background: #697e92;
  font-weight: normal;
  color: #dddddd;
}

input[type="radio"] {
  width:15px;
  height:15px;
  margin: 5px 0px 5px 5px;
}

input[type="checkbox"] {
  width:15px;
  height:15px;
  margin: 0px;
  cursor: pointer;
  vertical-align: middle;
}

textarea {
  border: 1px solid #cccccc;
  padding: 6px 10px;
  color: #777777;
  min-width: 180px;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  border-radius: 5px;
}

select {
  font-weight: normal;
}

select:hover,
select:focus {
  font-weight: normal;
}

select option {
  color: #000000;
  font-weight: normal;
  background-color: #ffffff;
}

select option:hover {
  background: #fdffb9;
}

td button,
td input[type="button"],
td input[type="submit"] {
  color: #dddddd;
  padding: .3em 1em;
  margin-top: 3px;
  margin-bottom: 3px;
  border: 1px solid #999999;
  background: #2e6da4;
  border-radius: 5px;
}

td button:focus,
td input[type="button"]:focus,
td input[type="submit"]:focus {
  border: 1px solid #2e6da4;
  background: #2e6da4;
  font-weight: normal;
  color: #ffffff;
}

td button:disabled,
td input[type="button"]:disabled,
td input[type="submit"]:disabled {
  border: 1px solid #2e6da4;
  background: #697e92;
  font-weight: normal;
  color: #dddddd;
}

.controlError {
  color: #FF0000;
  border: 1px solid #FF0000;
}

button.buttonEliminar,
input[type="button"].buttonEliminar,
input[type="submit"].buttonEliminar,
td button.buttonEliminar,
td input[type="button"].buttonEliminar,
td input[type="submit"].buttonEliminar {
  background-color: #e13636;
}


label {
  cursor: pointer;
  margin: 3px;
  color: #333333;
}


/*
 * ************** Contenido ***************
 */

.contenido {
  width: 100%;
  min-width: 500px;
  margin: 15px auto 0px;
  background-color: #ffffff;
}

a:active  { text-decoration : none; color : #330066; }
a:link    { text-decoration : none; color : #330066; }
a:visited { text-decoration : none; color : #330066; }
a:hover   { text-decoration : underline; color : #660099; }

h1 {
  color: #333333;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  margin: 10px 0px 10px 0px;
  text-align: center;
  text-transform: uppercase;
}

h2 {
  color: #333333;
  font-family: "Roboto", Helvetica, Arial, sans-serif; 
  font-weight: 400;
  margin: 0px;
}

h3 {
  color: #333333;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin: 0px;
}

small {
  color: #333333;
  margin: 0 0 0 0.5em;
}

span[onclick] { 
	cursor: pointer; 
}

hr { height: 2px; border: 1px #660000 solid; }

img { border: 0; vertical-align: middle; }

img[onclick] { cursor: pointer; }

.barraInfo { 
  position: fixed;
  bottom: 2px;
  width: 99%;
  color: #777777; 
  border-top: 1px solid #cccccc;
  background-color: #E8ECEE; 
  padding: 4px;
}

.barraInfoUsuario { float: left; width: 45%; color: #777777; }

.barraInfoHora { float: right; width: 45%; color: #777777; text-align: right; }

.barraTitulo {
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	background-color: #E8ECEE;
	padding: 2px;
	padding-left: 3px;
	padding-right: 3px;
	font-weight: bold;
	color: #777777;
}

.bloque_scroll { 
  margin: 0px; 
  padding: 0px; 
  border: 1px solid #cccccc; 
  width: 99%; 
  height: inherit; 
  overflow: auto; 
}
.bloque_scroll table { border-collapse: collapse; }
.bloque_scroll td { font-size: 11px; }
.bloque_scroll th { font-size: 11px; }
.bloque_scroll span { font-size: 11px; }

/*Inicio Destaca filas con foco del mouse*/
.bloque_scroll tr:hover td {
	background: #e9ffdb  !important;
}

.bloque_scroll tr:hover input[type="text"] {
	background: #e9ffdb  !important;
}

.bloque_scroll tr:hover select {
	background: #e9ffdb  !important;
}

.bloque_scroll tr:hover .selectric-wrapper .selectric {
	background: #e9ffdb  !important;
}

.bloque_scroll tr:hover .selectric-wrapper .button {
	background: #e9ffdb  !important;
}
/*Fin Destaca filas con foco del mouse*/


.paginador {
	padding: 2px;
	color: #000000;
	font-weight: bold;
	background-color: #ececec;
}

.paginador a {
	color: #000000;
}

.paginador .seleccionado {
    color: #757575;
	text-decoration: none;
}

.borderExterior { border: 1px solid #AAAAAA; }

.recuadroFondo { border: 1px solid #CCCCCC; background-color: #ffffff; }

.filaTitulo {
	color: #333333;
	padding: 2px 2px 0px 2px;
	background-color: #ececec;
	border-bottom: #cccccc 1px solid;
	white-space: nowrap;
}

.tablaPequena {
	padding: 2px;
	border: #cccccc 1px solid;
	width: 500px;
	border-collapse: collapse;
}

.tablaPequena th {
	padding: 2px;
	color: #333333;
	font-weight: bold;
	background-color: #c3c3c3;
	border-bottom: #cccccc 1px solid;
}

.tablaPequena td {
	border-bottom: #cccccc 1px solid;
}

.tablaPequena .filaTitulo {
	color: #333333;
	padding: 2px 2px 0px 2px;
	background-color: #ececec;
	border-bottom: #cccccc 1px solid;
	white-space: nowrap;
}

.tablaMediana {
	padding: 2px;
	border: #cccccc 1px solid;
	width: 700px;
	border-collapse: collapse;
}

.tablaMediana th {
	padding: 2px;
	color: #333333;
	font-weight: bold;
	background-color: #c3c3c3;
	border-bottom: #cccccc 1px solid;
}

.tablaMediana td {
	border-bottom: #cccccc 1px solid;
}

.tablaMediana .filaTitulo {
	color: #333333;
	padding: 2px 2px 0px 2px;
	background-color: #ececec;
	border-bottom: #cccccc 1px solid;
	white-space: nowrap;
}

.tablaGrande {
	padding: 2px;
	border: #cccccc 1px solid;
	width: 90%;
	border-collapse: collapse;
}

.tablaGrande th {
	padding: 2px;
	color: #333333;
	font-weight: bold;
	background-color: #c3c3c3;
	border-bottom: #cccccc 1px solid;
}

.tablaGrande td {
	border-bottom: #cccccc 1px solid;
}

.tablaGrande .filaTitulo {
	color: #333333;
	padding: 2px 2px 0px 2px;
	background-color: #ececec;
	border-bottom: #cccccc 1px solid;
	white-space: nowrap;
}

.tablaFull {
	padding: 2px;
	border: #cccccc 1px solid;
	width: 100%;
	border-collapse: collapse;
}

.tablaFull th {
	padding: 2px;
	color: #333333;
	font-weight: bold;
	background-color: #c3c3c3;
	border-bottom: #cccccc 1px solid;
}

.tablaFull td {
	border-bottom: #cccccc 1px solid;
}

.tablaFull .filaTitulo {
	color: #333333;
	padding: 2px 2px 0px 2px;
	background-color: #ececec;
	border-bottom: #cccccc 1px solid;
	white-space: nowrap;
}

.tablaPequena tr:nth-of-type(odd),
.tablaMediana tr:nth-of-type(odd),
.tablaGrande tr:nth-of-type(odd),
.tablaFull tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.tablaPequena tr:nth-of-type(even),
.tablaMediana tr:nth-of-type(even),
.tablaGrande tr:nth-of-type(even),
.tablaFull tr:nth-of-type(even) {
    background-color: #ffffff;
}

.botonesAccionTop {
	margin: 10px 100px 10px 0px;
	float: right;
}

.botonesAccionBottom {
	margin: 10px 100px 10px 0px;
	text-align: center;
}

.ui-tabs-nav.ui-widget-header {
	border: 0px;
}

.ui-tabs .ui-tabs-nav li {
	border: 0px;
}

.ui-tabs .ui-tabs-panel {
    margin-top: 5px;
    border-top: 2px solid #3c8dbc;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	border-top: 2px solid #3c8dbc;
}


/*
 * ************** Loading Bar para Ajax y otras opciones ***************
 */
 
#loadingbar {
    position: fixed;
    z-index: 9999;
    display: none;
    opacity: .75;
    filter: alpha(opacity=75);
    width: 100%;
    height: 100%;
	background-color: #ffffff;
}

#loadingbar img {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: #ffffff;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
}


/*
 * Formatos adicionales
 */

@-webkit-keyframes blinker {
	from {opacity: 2.0;}
	to {opacity: 0.2;}
}

.blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: alternate;
}