@font-face {
  font-family: 'Fira Sans';
  src: url(fonts/FiraSans-Regular.ttf);
}
@font-face {
  font-family: 'Fira Sans';
  src: url(fonts/FiraSans-Bold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: 'Fira Sans';
  src: url(fonts/FiraSans-Medium.ttf);
 font-weight:bolder;
}
@font-face {
  font-family: 'Fira Sans';
  src: url(fonts/FiraSans-Light.ttf);
 font-weight:light;
}

@font-face {
  font-family: 'Open Sans';
  src: url(fonts/OpenSans-Regular.ttf);
}
@font-face {
  font-family: 'Open Sans';
  src: url(fonts/OpenSans-Bold.ttf);
  font-weight: bold;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url(fonts/helveticaneue.ttf);
}




:root {
  --titular: #1b75bb;
  --secundario: #3E77B6;
  --formas: #ddd;
  --verde:#17A2B8;
  --bordeclaro:#BCCEDC;
  --caja:#FAF7F5;
  --liga:#1b75bb;
  --activo:#1c60ac;
}




html{

  font-size:14px;	
  width: 100%;
  height:100%;
}

body{
	font-family: 'Fira Sans',Arial, sans-serif;
	background:#fff;
	color:#3E77B6;
	padding:0px;
	margin:0px;
	background-size:100% 100%;
	width: 100%;
	height:100%;
	border-radius:5px;
	
}

html.fontG{
	font-size:16px;	
}
html.fontEG{
	font-size:20px;	
}

h1{
	text-align:center;
	font-size:clamp(2rem,1em,3rem);
	color:#5e3a11;
	padding:1pt 0px .5em 0px;
	margin:0px;
}


input{
	color:#1C60AC;
	padding:.1rem .6rem;	
	line-height:1;
	font-size:1.1rem;
	border-radius:5px;
	border:#ccc 1px solid;
	font-family:'Open Sans', Arial, sans-serif;
	background-color:#fff;
	margin:0;
}
input::placeholder{
	font-style:italic;
	color:#1C60AC;
}
input[type='text'], input[type='password']{
	padding:.25rem .6rem;	
	color:#1C60AC;
	background-color:#fff;
	font-family:Open Sans,Arial,sans-serif;
	font-size:.9rem;
}

select{
	max-width:92vw;
	padding:.1rem .3rem;
	color:#1B75BB;
	font-size:1rem;
	font-family:Open Sans,Arial,sans-serif;
	background-color:#fff;
	border:#ccc 1px solid;
	margin:0;
	vertical-align:baseline;
}
select option{
	color:#333333;
	font-size:1rem;
}
textarea{
	color:#1C60AC;
	font-family:Open Sans,Arial,sans-serif;
	font-size:1rem;	
}

.boton{
	display:inline-block;
	background:white;
	color:val(--titular);
	position:relative;
	z-index:0;
	border:#aaa 1px solid;	
	box-shadow:#666 0px 0px 0px;
	padding:.3rem 1rem;
	transform:scale(1);
	transition:transform 300ms ease-in-out, box-shadow 300ms ease-in-out;
	text-decoration:none;
	cursor:pointer;
	font-size:1rem;
}
.boton:hover,.boton:focus{
	transform:scale(1.1);
	box-shadow:#666 2px 2px 2px;
}


.FormaColumnas{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: space-around;
	align-items: flex-start; 
}
.FormaColumnas span{
	display:inline-block;
	padding:.2em 1em;
}

.ColumnasParejo{
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-content: flex-start;
	align-items: flex-start; 	
	gap:2em;
}
.ColumnasParejo .Col{
	margin:2rem;
 flex-grow: 1;	
 background:#ddffcc;
 border:#888 1px solid;
}


.right{
	text-align:right;
}
.left{
	text-align:left;
}
.center{
	text-align:center;
}
.hidden{
	display:none;
}



.Tabla{
width:100%;
font-size:.9rem;
border:none;
background-color:#FAF7F5;
border-spacing:1px;
font-family:Open Sans, Arial;
}
.Tabla th{
font-size:1rem;
padding:.2em .8rem;
background:#1B75BB;
color:white;
border-left:#fff 1px solid;
}
.Tabla td{
padding:.2em .4em;
border:none;
color:#1C60AC;
font-weight:normal;
font-size:.9rem;
vertical-align:middle;

}
.Tabla tbody tr:nth-child(even):hover{
	background:#fff;
}
.Tabla tbody tr:hover,.Tabla tbody tr:focus{
	background-color:#fff;
} 
.Tabla th input{
	width:6rem;
}
.Tabla tbody tr:nth-child(even){
	background:#E2E6EA;
}
.Tabla td.center{
	text-align:center;
	justify-content:center;
}

.Tabla td a.edit{
		display:block;
	width:22px;
	height:22px;
	background-size:90% 90%;
	cursor:pointer;
	transition:200ms transform;	
	background:url(img/Icon-awesome-edit.png) top right no-repeat;
	margin:0 auto;
	text-align:center;
}
.Tabla td a.delete{
		display:block;
	width:22px;
	height:22px;
	background-size:90% 90%;
	cursor:pointer;
	transition:200ms transform;	
	background:url(img/np_delete.png) top right no-repeat;
	margin:0 auto;
	text-align:center;
}

.Tabla .thumbdiv{
	position:relative;
	height:40px;
	width:90px;

}
.Tabla .thumb{
	position:absolute;
	top:0;
	left:0;
	max-height:40px;
	max-width:90px;
	z-index:10;
	transition:all 200ms ease-in-out;
}
.Tabla .thumb:hover{
	max-height:120px;
	max-width:270px;
	top:-30px;
	left:-30px;
	z-index:50;
}

.Caja{
		display:block;
	padding:1em 1rem 1em 1rem;
	margin:1rem 2rem;
	background:#FAF7F5;
	min-width:auto !important;
		box-shadow:#aaa 0px 3px 6px;
		border-radius:5px;
		color:#1B75BB;
		position:relative;
}
.Caja h1{
		padding:1rem 2rem 0 2rem;

}



.botchico, a.botchico{
background: #007BFF;
border-radius: 4px;
padding:.2rem .6rem;
border:none;
color:#f6f6f6;
font-size:.7rem;
text-decoration:none;
font-size:.9rem;
font-family:Helvetica Neue,Arial,sans-serif;
font-weight:normal;
}
.botchico:hover, .botchico:focus{
box-shadow:#666 1px 1px 2px;
color:#fff;
}
.ui-widget-content a.botchico{
	color:#f6f6f6;
}

.botmedio, a.botmedio{
background-color: #007BFF;
border-radius: 4px;
padding:.4rem 1rem;
border:none;
color:#f6f6f6;
text-decoration:none;
font-size:1.1rem;
font-family:Helvetica Neue,Arial,sans-serif;
font-weight:normal;
cursor:pointer;
box-shadow:transparent 1px 1px 2px;
transition:ease-in-out box-shadow 300ms;
transition:ease-in-out color 300ms;
}

.botmedio:hover, .botmedio:focus{
box-shadow:#666 1px 1px 2px;
color:#fff;
}
 .ui-widget-content a.botmedio{
 color:#f6f6f6;
 }

.botmedio.ver{
padding:.6rem 3rem .6rem 1rem;
background:#007BFF url(img/view.png) top right no-repeat;
background-position: right 6px top .6rem;
}
.botmedio.sent{
padding:.6rem 3.4rem .6rem 1rem;
background:#007BFF url(img/add-comment.png) top right no-repeat;
background-position: right .8rem top .6rem;
}
.botmedio.comment{
padding:.6rem 3.4rem .6rem 1rem;
background:#007BFF url(img/add-comment.png) top right no-repeat;
background-position: right .8rem top .6rem;
}
.botmedio.users{
padding:.6rem 3.2rem .6rem 1rem;
background:#007BFF url(img/add-user.png) top right no-repeat;
background-position: right .8rem top .5rem;
}






.botmedio.finalizar{
padding:.6rem 3.2rem .6rem 1rem;
background:#007BFF url(img/checkmark-outline.png) top right no-repeat;
background-position: right .8rem top .5rem;	
}
.botmedio.cancelar{
padding:.6rem 3.2rem .6rem 1rem;
background:#007BFF url(img/cancelar.png) top right no-repeat;
background-position: right .4rem top .2rem;	
background-size: 24px 24px;
}
.botmedio.archivar{
padding:.6rem 3.2rem .6rem 1rem;
background:#007BFF url(img/archivar.png) top right no-repeat;
background-position: right .4rem top .2rem;	
}
.botmedio.guardar{
padding:.6rem 3.2rem .6rem 1rem;
background:#007BFF url(img/guardar.png) top right no-repeat;
background-position: right .8rem top .2rem;	
background-size: 24px 24px;
}

.right{
	text-align:right;
}



.icono{
	display:inline-block;
	width:22px;
	height:22px;
	background-size:90% 90%;
	cursor:pointer;
	transition:200ms transform;	
}
.icono:hover,.icono:focus{
	transform:scale(1.1);

}
.icono.goto{
background:url(img/Icon-awesome-share-square.png) top right no-repeat;
}
.icono.search{
background:url(img/Icon-awesome-search.png) top right no-repeat;
}
.icono.edit{
background:url(img/Icon-awesome-edit.png) top right no-repeat;
}
.icono.delete{
background:url(img/np_delete.png) top right no-repeat;
}


.monitor{
font-style:italic;
font-size:1.1rem;
color:#888;
}

#dialogo.ui-dialog-content.ui-widget-content{
	background-color:#FAF7F5;
}

.thumbnail{
	cursor:pointer;
	height:24px;
	vertical-align:bottom;
}
.thumbnailModal{
padding:.5rem;
background:#fff;
border-radius:5px;
box-shadow:#888 1px 1px 6px;	
z-index:102;
position:absolute;
}
.thumbnailModal .head{
	text-align:right;
}
.thumbnailModal .head .close{
	display:block;
	padding:.2rem .3rem;
	color:#aaa;
	font-size:1.1rem;
	font-family:Helvetica;
	cursor:pointer;
}








footer{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	
	background:#00548E;
	color:#fff;
	padding:1.1rem 3rem;
	margin:1rem 0 0 0;
	font-size:.9rem;
	font-family:Open Sans,Arial;
}
footer a{
	display:inline-block;
	padding:.2rem .8rem;
	font-size:.8rem;
	color:#eee;
	text-decoration:none;
	cursor:pointer;
}
footer a:hover,footer a:focus{
	color:#fff;
}