@import url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css');

/*********************
#ffffff; blanco 
#f1940a; naranja 
#0da6db; azul claro
#1c5ea5; azul oscuro
#8fbd24; verde
#f8e91f; amarillo
#1872a2; azul botones
**********************/

@media screen, print {

	html {
	scroll-behavior : smooth; 
	}	
	
	body, table, td, select, input, i {
		font-size: 14px; 
		font-family: "Roboto Condensed", roboto, sans-serif, Helvetica, Tahoma, Verdana;
	}

	body {
		background-color: #f6f6f6;
		background-repeat: no-repeat;
		background-attachment: fixed;
		overflow-y:auto;
	}
	
	@keyframes animacion {
		from {
			width:0;
		}
		to {
			width:100%;
		}
	}
	
		
	.tenue {
		background-color: black;
		background-color:rgba(55, 55, 55, .2);
		transition: opacity 0.2s 0s ease-inout;	
		cursor: wait;
		position: fixed;
		content:'loading ';
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		backdrop-filter: blur(2px);
		z-index:992;
		cursor: wait;
	}
	
	.animado {
		cursor:wait;
		left:-10px !important;
		z-index:992;
	}

	.animado::before {
		content:"";
		text-align:center;
		display:block;
		position:fixed;
		height:14px;
		width:100%;
		top:52px;
		border:1px solid #333;
		padding:2px;
		border-radius:3px;
		background-color:linear-gradient(to right, #cc6666 30%, #ffd400 50%, #35A834);
		background:linear-gradient(to right, #cc6666 30%, #ffd400 50%, #35A834);
		animation: animacion ease-out 15s;	
		box-shadow:rgba(0,0,0,.5) 0 3px 4px 2px;
		z-index:992;
	}	
	


  @keyframes rotationBack {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(-360deg);
	}
  }  		



	header {
		position:fixed;
		top:0px;
		left:0px;
		z-index:993;
		width:100%;
		height:50px;
		color:#333333;
		background:#f3f3f3;
		display:block;
		box-shadow:rgba(0,0,0,.5) 0 2px 3px 1px;
	}
		
	.headerb {
		position:relative;
	}
		
	header h1 {
		margin:0;
		padding:0 15px;
		height:50px;
		line-height:50px;
		font-weight:400;
		font-size:18px;
		float:left;
	}

	header h2 {
		margin:0;
		padding:1 35px;
		height:50px;
		line-height:50px;
		font-weight:300;
		font-size:15px;
		float:right;
		position:relative;
		left:-50%;
		text-align:left;
	}
	

	header h3 {
		margin:0;
		padding:1px;
		height:50px;
		line-height:50px;
		font-weight:300;
		font-size:14px;
		float:right;
		display:fixed;
		position:absolute;
		text-align:right;
	}


	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		font-size:12px;
		background-color: #f5f5f5;
		text-align: center;
		padding: 5 10 5 10px;
		z-index:1056;
	}

	
	seleccion {
		font-size:14px;
		left:0px;
		float:left;
		position:fixed;
		top:50px;
		z-index:987;
		width:100%;
		height:50px;
		color:#000000;
		background-color:#ffffff;
		background-color:#f3f3f3;
		padding-top:12px;
		padding-left:0px;
		padding-right:11px;
		display:block;
		box-shadow:rgba(0,0,0,.20) 0 1px 1px 1px;
/*		box-shadow:rgba(0,0,0,.30) 0 3px 3px 1px;*/
	}
	
	seleccion h4 {
		margin-top:4px;
		font-weight:300;
		font-size:14px;
		float:right;
	}
	
	
	.parent {
		font-size:14px;
		position:relative;
		top:80px;
		width:100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content:center; 
		align-items:start;	
	}
	
	
	
	.parentb {
		top:65px;
		display: flex;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width:100%;
	}
		

	.boxsel {
		height:30px;
		box-shadow:rgba(0,0,0,.30) 0 2px 3px 1px;
		border-radius:2px;
		width:auto; 
		font-size:14px; 
		margin:0px; 
		padding:0 10 0 10; 
		text-align:left; 
		color:#fff;	
		opacity:0.9;
		margin-bottom:10px;
	}

	.boxsel:hover {
		opacity:1;
		box-shadow:rgba(0,0,0,.30) 0 7px 12px 6px;
		cursor: pointer;
	}
	
	.box {
		flex: 1 1 120px; /*  Stretching: */
		flex: 0 1 120px; /*  No stretching: */
		margin: 0 5 20 5;
		display: flex;
		flex-wrap: wrap;
		align-items:center;
		justify-content: center;
		color:white;
		height:60px;
		font-size:16px;
		box-shadow:rgba(0,0,0,.30) 0 2px 3px 1px;
		opacity:0.9;
		border-radius:2px;
	}

	
	.box:hover {
		opacity:1;
		box-shadow:rgba(0,0,0,.30) 0 6px 10px 5px;
		cursor: pointer;
		font-weight:600;
	}


	.boxp {
		flex: 1 1 120px; /*  Stretching: */
		flex: 0 1 120px; /*  No stretching: */
		margin: 0 5 10 5px;
		display: flex;
		flex-wrap: wrap;
		align-items:center;
		justify-content: center;
		color:white;
		height:30px;
		font-size:16px;
		box-shadow:rgba(0,0,0,.30) 0 2px 3px 1px;
		opacity:0.9;
		border-radius:2px;
	}

	
	.boxp:hover {
		opacity:1;
		box-shadow:rgba(0,0,0,.30) 0 6px 10px 5px;
		cursor: pointer;
		font-weight:600;
	}


	.titulotop {
		min-height:40px; 
		height:40px; 
		padding:10 10 10 15px !important;
		vertical-align:middle; 
		text-align:left; 
//		min-width:230px; 
		background-color:#eeeeee !important;
	}

	.titulo {
		min-height:40px; 
		height:40px; 
		vertical-align:middle; 
		padding:10 10 10 15px !important;
		text-align:left; 
//		min-width:230px; 
		width:230px; 
		background-color:#f3f3f3 !important;
		font-weight: 400;
		color: #000000;
	}

	.titulocab {
		min-height:40px; 
		height:40px; 
		vertical-align:middle; 
		padding:10 10 10 15px !important;
		text-align:left; 
//		min-width:180px; 
		background-color:#f8f8f8 !important;
		color: #000000;
#		font-weight: 600;
#		text-transform: uppercase;
	}

	.titulodet {
		min-height:40px; 
		height:40px; 
		vertical-align:middle; 
		text-align:left; 
//		min-width:160px; 
		padding:10px;
	}
	
	.entrada {
		#display:block;
		vertical-align:middle; 
		text-align:left; 
		padding:10px;
		width:100%; 
		min-height:40px; 
		height:40px; 
		color: #000000;
		#border-right:0px solid silver!important;
	}

	.entrada:hover {
#		background-color:#f3f3f3 !important;
	}

	table.size {
		top:0;
		width:100%: 
	}
	

	.fa-flag:{
		color:#888888 !important;
	}


	.fa-flag:hover{
		color:#ffffff;
	}


	.izq{
		font-size:16px;
		margin-right:auto;
		padding-left:10px;
	}

	.der{
		font-size:30px;
		padding-right:10px;
		margin-left:auto;
	}

	.cen{
		font-size:16px;
		margin:auto auto;
	}

  
	.jovertable {
		height:25px;
		vertical-align:middle;
		background-color:white;
		color:#333;	
		z-index:1;
		overflow:hidden;
	}
	
	.jovertable:hover td:not(.this) {
		z-index:10;
		background-color:#1c5ea5;
		background-image:linear-gradient(#1c5ea5,#1c56a4);
		color:#fff;	
		cursor:pointer;
		-moz-transition:all .1s ease-in-out;
		-webkit-transition:all .1s ease-in-out;
		transition:all .1s ease-in-out;		
	}
  
  
	.readonly {
		color:#888888;
		cursor: default !important;
	}
  

/*	
	.line {
		flex: 1 1 90%; 
		flex: 0 1 90%; 
		display: flex;
		flex-wrap: wrap;
		align-items:center;
		justify-content: center;
		color:white;
		height:20px;
		font-size:16px;
		box-shadow:rgba(0,0,0,.30) 0 2px 3px 1px;
		opacity:0.9;
	}
*/

	botonera {
		position:fixed;
		top:100px;
		z-index:980;
		width:100%;
		height:50px;
		color:#000000;
		background:#eeeeee;
		padding-top:14px;
		padding-left:17px;
		padding-right:10px;
		display:block;
		box-shadow:rgba(0,0,0,.3) 0 4px 3px 3px;
	}


	#wrapeo {
		float:left;
		position:absolute;
		z-index:986;
		left: 0px;
		top:110px;
		width:100%;
		background-color: #ffffff;

		}
		
	#wrapeo2 {
		float:left;
		position:relative;
		z-index:986;
		left: 0px;
		top:0px;
		width:100%;
		background-color: #f3f3f3;

		}
		


	#zero {
		position:relative;
		float:top;
		margin:20px 15px;
		width:auto;
		overflow:auto;
	}
	
	#zero1 {
		left:0px;
		float:left;
		position:fixed;
		width:100%;
		overflow:auto;
		z-index:989;
		top:101px;
		border-radius:3px;
		box-shadow:rgba(0,0,0,.4)0px 2px 4px 3px;	
	}



	fieldset {
		border:1px solid gray;
		background-color:#0da6db;
		margin:4px;
		display:block;
		overflow:hidden;
		box-shadow:rgba(0,0,0,.1) 0px 0px 10px 4px;
		border-radius: 5px;
		
	}

/*
	.fieldset2 {
		border-style:groove; 
		border:1px solid #c5c7c9;
		background:#f9f9f9;
		margin:4px;
		margin-top:12px; 
		padding-top:4px;
		background-color:#f9f9f9;
		border-radius: 5px; 
	}
*/

	.cabecera {
		background-color: #dee7ec;
		border-width: 1px 0px 1px 0px;
		border-color: #c5c7c9;
		border-style: groove;
		border-bottom:1px solid #c5c7c9;
		width: 100%;
		text-align: left;
		padding-left:5px;
		padding-right:5px;
		height:42px;
	}



	foto {
		overflow: hidden; 
		width:100%;
		height:50px;
		position:absolute;
		z-index:999;
		top: 110px;
	}


	submit {
		color:#333333;
		background: #1872a2;
		border: 2px solid;
		font: inherit;
		line-height: 1;
		margin: 0.5em;
		padding: 1em 2em;
	}

	submit:hover {
		background-color: #b1b1b1;
		color:#ffffff;
	}


    .datalist-input {
    }

	datalist {
	  position: absolute;
	  max-height: 20em;
	  border: 0 none;
	  overflow-x: hidden;
	  overflow-y: auto;
	}

	datalist option {
	  font-size: 14px;
	  padding: 0.3em 1em;
	  background-color: #ccc;
	  cursor: pointer;
	}

	datalist option:hover, datalist option:focus {
	  color: #fff;
	  background-color: red;
	  outline: 0 none;
	}



/*
	.papelera:after {
		content:"\f1f8";
		display:block;
		clear:both;
	}	
*/

	.reborde {	
		margin:3px;
/*		box-shadow:rgba(0,0,0,.3) 0px 2px 3px 1px;  */
	}

	.nonaranja:hover {
		left:0;
		color:#eee;
		box-shadow:none;
#		background:transparent !important;
		transition:all .01s ease-in-out width 5s linear 5s;
		-moz-transition:all .01s ease-in-out width 5s linear 5s;
		-webkit-transition:all .01s ease-in-out width 5s linear 5s;
	}	


	.toggle_menu {
		display:block;
		float:left;
		width:40px;
		height:50px;
		line-height:50px;
		padding:0;
		margin-left:5px;
		background:0 0;
		border:0;
		text-align:center;
		cursor:pointer;
		color:#dddddd !important;
	}
	
	.toggle_menu i{
#		display:block;
		font-size:20px;
	}


	.toggle_menu:hover {
		color:orange;
		box-shadow:rgba(0,0,0,.3) 0 3 1 1;
	}


	.fa-bars {
		content: '\f0c9';
		color:#ffffff;
	}


	.fa-bars:hover {
		color:orange;
		box-shadow:rgba(0,0,0,.3) 0 3 1 1;
	}


	.notes {
		line-height: 30px;
		font-family: roboto, Helvetica, Sans-serif;
		padding: 8px;
		width:200px;
		height:174px;
	}

	.notes2 {
		line-height: 18px;
		font-family: roboto, Helvetica, Sans-serif;
		padding: 8px;
	}

	.notes:focus {
		outline: none;
	}	


	.classpan {
		width:100%;
		display:flex; 
		border-bottom:1px solid gray;
		box-shadow:rgba(0,0,0,.1)0px 0 2px 2px;
	}
		

	.clascabdoc {
		width:100%;
		top:0;
		text-align:left;
		position:relative; 
		background-color:#f3f3f3;		
		box-shadow:none;
		border: 1px solid rgba(0, 0, 0, 0.125);
		border-radius:0;

		vertical-align:middle;
		line-height:45px;
		height:45px;
		color:#333333;
		z-index:986;
		overflow:hidden !important;
	}

	.clascab {
		display:inline-block;
		-webkit-appearance: none;
		height:42px;
		width:100%;
		vertical-align:middle;
		line-height:42px;
		color:#333333 !important;
		z-index:986; /*899; /*986;*/
		border-radius:0px;
		box-shadow:rgba(0,0,0,.4)0px 2px 4px 3px;
		border:1px solid gray;
		overflow:hidden !important;
	}
	
	.clasdet {
		width:100%;
		vertical-align:left;
		height:35px;
		line-height:35px;
		color:#333333;
		overflow:hidden !important;
		display:inline-block;
	}

	.clasdet:hover {
		cursor:pointer;
		background-image:linear-gradient(#d1d1d1,#b1b1b1);
		color:blue;

		color:#eeeeee !important;
		background-color: #0da6db;
		background-image:linear-gradient(#4ca3d3,#186fa0);
		background-image:linear-gradient(#5499C7,#1F618D);

		box-shadow:rgba(0,0,0,.2)0px 0 2px 2px;
		-moz-transition:all .2s ease-in-out;
		-webkit-transition:all .2s ease-in-out;
		transition:all .2s ease-in-out;		

		box-shadow:rgba(0,0,0,.4)0px 2px 4px 3px;
		border:1px solid #eeeeee;
		overflow:hidden;
	}


	.clasdetdoc {
		overflow-x:clip;
		text-align:left;
		width:100%;
		vertical-align:middle;
		box-shadow:rgba(0,0,0,.1)0px 0 2px 2px; 
		border-radius:0;		
		
		height:40px;
		line-height:40px;
		color:#333333;
		overflow:hidden !important;
		display:inline-block;
		padding:0 5 2 20px;
	}

	.clasdetdoc:hover {
		cursor:pointer;
		background-image:linear-gradient(#d1d1d1,#b1b1b1);
		color:white !important;
	}
	

      a.tooltips {
        text-decoration: none;
		color:#333;
      }
      a.tooltips:hover {
        cursor: default;
        position: relative;
		color:#007bff;
      }
      a.tooltips span {
        display: none;
      }
      a.tooltips:hover span {
        padding: 20px;
        display: block;
        z-index: 100;
        background: #e3e3e3;
		color:#333;
        left: 0px;
        margin: 15px;
		margin-bottom:100px;
        width: 600px;
        position: absolute;
        top: 15px;
        text-decoration: none;
		text-align:left;

		border: 1px outset silver !important; 
		border-radius:5px;
		-moz-transition:all 3s ease-in-out;
		-webkit-transition:all 3s ease-in-out;
		transition:all 3s ease-in-out;
		box-shadow:rgba(0,0,0,.35)1px 1px 5px 3px;

      }

	

	.controles {
		-webkit-appearance: none;
		vertical-align:middle;
		text-align:center;
		line-height:30px !important;
		height:30px !important;
		padding:0 5 0 5px !important;
		
		background-color:#1872a2;
		background-image:linear-gradient(#4ca3d3,#186fa0);
		background-image:linear-gradient(#5499C7,#1F618D);
		box-shadow:rgba(0,0,0,.1)1px 1px 2px 1px;
		
		color:#ffffff !important;
		border-radius:3px;		
		border: 1px solid #777777 !important;

	}

	.controles:hover {
		border: 1px outside silver !important; 
		-moz-transition:all .3s ease-in-out;
		-webkit-transition:all .3s ease-in-out;
		transition:all .3s ease-in-out;
		box-shadow:rgba(0,0,0,.35)1px 1px 5px 3px;
	}


/* use for any tag on your page */
[data-title]:hover:after {
    opacity: 1;
    transition: all 0.3s ease 0.5s;
    visibility: visible;
}
/* box for title text */
[data-title]:after {
    content: attr(data-title);
  	position: absolute;
    left: 30%;
	top:25;
    z-index: 999;
    visibility: hidden;
    white-space: wrap;
	width:500px;
    font-size: 100%;
    padding: 20px;
    opacity: 0;
	
	background-image:linear-gradient(#1c5ea5,#1c56a4);
	color:#ffffff;
	border-radius:3px;
	box-shadow:rgba(0,0,0,.4)0px 2px 4px 3px;
	border:1px solid gray;
}

[data-title] {
    position: relative;
}

[data-title1]:hover:after {
    opacity: 1;
    transition: all 0.3s ease 0.5s;
    visibility: visible;
}

[data-title1]:after {    
	content: attr(data-title1);
  	position: absolute;
    right: 30%;
	top:25;
    z-index: 999;
    visibility: hidden;
    white-space: nowrap;
    font-size: 100%;
    padding: 20px;
    opacity: 0;
	
	background-image:linear-gradient(#444444,#000000);
	color:#ffffff;
	border-radius:3px;
	box-shadow:rgba(0,0,0,.4)0px 2px 4px 3px;
	border:1px solid gray;
}
[data-title1] {
    position: relative;
}



/* The Magic Float Center Code */
.float_center {
	margin:0;
	height:50px;
	line-height:50px;
	font-weight:300;
	font-size:15px;
	float: right;
	position: relative;
	left: -50%; /* or right 50% */
	text-align: left;
	vertical-align:middle;
}
.float_center > .child {
	position: relative;
	left: 50%;
}	

/*-------------------*/
/* ENTRADAS DE DATOS */
/*-------------------*/

	select, input, textarea { 
		background-color:#fefefe;
		background-color:#ffffff;
		border:0px solid #d1d3d7;
		border:0px solid silver !important;
		border-radius:5px;
		color:#000000;
	}

	option {
		border:0px;
	}
	
	
	
	select { 
		color:#000000;
		background-repeat: no-repeat;
		background-position: right center;
		-webkit-appearance: none;
		-moz-appearance: none;
		-o-appearance: none;
		appearance: none;
		height: 27px;
		margin-left: 5px;
		padding-left: 6px;
		padding-right: 16px;
		padding-top:  0px;
		line-height:24;
#		border: 1px solid silver !important;  
		border-radius: 5px; 
	}		
	
	select:focus, textarea:focus, input:focus, select:hover, textarea:hover, input:hover{
		color: #000000; 
		background-color: #ffffff; 
		border:0px solid #e1e1e1;
		border:1px solid black !important;
		border-radius:5px;
		cursor:pointer;
		outline:none !important;
	}

	.select {
		color:#000000;
		overflow: hidden; 
		background-color: #ffffff; 
		height: 27px;
		max-width: 200px;
		position: relative; left:5px; bottom:0px;
		display: block;
		outline:none !important;
		border:1px solid #555555 !important;
	}	

	.select:after {
		content:"\f0d7";
		font-family:FontAwesome;
		color: #000;
		padding: 3px 3px;
		position: relative; right: 19px; bottom:1px;
		z-index: 1;
		text-align: left;
		pointer-events: none;
	}
	
	
	.fondotd:hover {
		background-color:#ffffff !important;
	}


	textarea {
		font-family: roboto, "Courier New", roboto, sans-serif, Helvetica, Tahoma, Verdana;
		background-color:#fefefe;
	}


	input {
		height:27px;
		background-color:#fefefe;
		border-radius: 5px; 
		border: 0px;
#		#border:1px solid silver;
		outline:none !important;
	}

	input[disabled], select[disabled] {
		background-color:#dddddd;
		border-color:0 solid #dddddd;
#		border:1px solid silver;
	}
	
	select:disabled {
		background-color:#cccccc;
		cursor:pointer;
	}

	input[type=textO] {
		-webkit-appearance: none;
		width:100%;
		margin-left: 0px;
		padding-left: 0px;
		cursor:pointer;
	}
	
	input[type=text] {
		-webkit-appearance: none;
		height: 27px;
		margin-left: 5px;
		margin-right: 5px;
		padding-left: 8px;
		padding-top:  1px;
		border: 0px solid silver !important; 
#		border: 1px solid silver !important;
		cursor:pointer;
		border-radius: 5px; 
	}

	input[type=text]:disabled  {
		background-color:#dddddd;
		border-color:0 solid #dddddd;
#		border: 1px solid silver !important;
	}

	input[type=date]:disabled  {
		background-color:#dddddd;
		border-color:0 solid #dddddd;
#		border: 1px solid silver !important;
		cursor:pointer;
	}

	
	input[type=list]  {
		background-color:#ff0000;
		line-height:15px;
		height:15px;
	}

	input[type=date] {
		-webkit-appearance: none;
		height: 27px;
		width: 120px;
		min-width: 120px;
		margin-left: 5px;
		padding-left: 8px;
		padding-top:  1px;
		border: 0px solid silver !important; 
#		border: 1px solid silver !important;
		cursor:pointer;
	}

	input[type=data] {
		-webkit-appearance: none;
		height: 47px;
		width: 140px;
		min-width: 140px;
		margin-left: 5px;
		padding-left: 8px;
		padding-top:  19px;
		font-size: 16px;
		border: 0px solid silver !important; 
#		border: 1px solid silver !important;
		cursor:pointer;
	}



	input[type=password] {
		-webkit-appearance: none;
		height: 27px;
		width: 120px;
		min-width: 120px;
		margin-left: 5px;
		padding-left: 8px;
		padding-top:  1px;
		border: 0px solid silver !important; 
#		border: 1px solid silver !important;
		border-radius: 5px; 
	}

	input[type=password]:hover {
		border-radius: 5px; 
		cursor:pointer;
	}

	input[type=checkbox]{
		width: 40px;
		margin: 3px;
		transform:scale(1); 
		vertical-align:middle;
		text-align:left;
		height:27px;
	}

	input[type=radio] {
		width: 40px;
		margin: 3px;
		transform:scale(1); 
		vertical-align:middle;
		text-align:left;
		height:27px;
	}

	input[type=submit] {
		-webkit-appearance: none;
		vertical-align:middle;
		height: 26px;
		padding-left: 8px;
		padding-right: 8px;
		background-color:#1872a2;
		background-image:linear-gradient(#4ca3d3,#186fa0);
		background-image:linear-gradient(#5499C7,#1F618D);
		background-image:linear-gradient(#ffffff,#bbbbbb);
		box-shadow:rgba(0,0,0,.1)1px 1px 2px 1px;
		color:#333333;
		border-radius:3px;
		border: 1px solid #999999 !important; 
		border: 1px solid silver !important;
	}

	input[type=button] {
		-webkit-appearance: none;
		vertical-align:middle;
		height: 26px;
		padding-left: 8px;
		padding-right: 8px;
		background-color:#1872a2;
		background-image:linear-gradient(#4ca3d3,#186fa0);
		background-image:linear-gradient(#5499C7,#1F618D);
		background-image:linear-gradient(#ffffff,#bbbbbb);
		box-shadow:rgba(0,0,0,.1)1px 1px 2px 1px;
		color:#ffffff;
		color:#333333;
		border-radius:3px;
		font-size: 14px; 
		border: 1px solid #999999 !important; 
		border: 1px solid silver !important;
	}

	input[type=button]:hover {
		color:#ffffff;
		color:#333333;
		border-radius:3px;
		border: 1px solid #555555 !important; 
	}


	input[list]:focus {
		outline: none;
	}
	

	input[list] + div[list] {
		display: none;
		position: absolute;
		width: 100%;
		max-height: auto; /*		max-height: 554px;*/
		overflow-y: auto;
		max-width: 330px;
		background: #FFF;
		border: var(--border);
		border-right: 1px inset #ddd;
		border-top: none;
		border-radius: 0 0 5px 5px;
		/*box-shadow: 0 4px 3px -3px #666666;*/
		z-index: 900;
	}

	input[list] + div[list] span {
		display: inline-block;
		padding: 5px 5px 5px 20px;
		color: #000;
		text-decoration: none;
		border:1px solid #eeeeee;
		cursor: pointer;
		vertical-align:middle;
	}


	input[list] + div[list] span:not(:last-child) {
	  border-bottom: 1px solid #dddddd;
	}

	input[list] + div[list] span:hover {
		color:#eeeeee !important;
		background-color: #0da6db;
		background-image:linear-gradient(#4ca3d3,#186fa0);
		background-image:linear-gradient(#5499C7,#1F618D);
		background-image:linear-gradient(#1c5ea5,#1c56a4);

		box-shadow:rgba(0,0,0,.2)0px 0 2px 2px;
		-moz-transition:all .2s ease-in-out;
		-webkit-transition:all .2s ease-in-out;
		transition:all .2s ease-in-out;		

		box-shadow:rgba(0,0,0,.4)0px 2px 4px 3px;
		border:1px solid #eeeeee;
		overflow:hidden;
	}


	input[type=range] {
	  width: 100%;
	  -webkit-appearance: none;
	  -moz-appearance:none;
	  margin: 0;
	}
	input[type=range]:focus {
	  outline: 2px;
	}
	input[type=range]::-webkit-slider-runnable-track {
	  width: 100%;
	  height: 12px;
	  /*cursor: pointer;*/
	  box-shadow: 0px 0px 1px 1px #000000, 0 0px 1px 1px #0d0d0d;
	  background: linear-gradient(to right, #cc6666 30%, #ffd400 50%, #35A834);
	  background-image: -moz-linear-gradient(to right, #cc6666 30%, #ffd400 50%, #35A834);
	  border-radius: 3px;
	  border: 1px solid #dddddd;
	  -webkit-appearance: none;
	  -moz-appearance:none;
	  opacity:.85;
	}
	input[type=range]::-webkit-slider-thumb {
	  box-shadow: 0px 0px 1px 2px #000000, 0 1px 1px 1px #0d0d0d;
	  border: 0px solid #666666;
	  height: 11px;
	  width: 11px;
	  border-radius: 25px;
	  background: #f3f3f3;
	  /*cursor: pointer;*/
	  -webkit-appearance: none;
	  -moz-appearance:none;
	  margin-top: -.5px;
	}
	input[type=range]::-moz-range-track {
	  width: 100%;
	  height: 12px;
	  /*cursor: pointer;*/
	  box-shadow: 0px 0px 1px 1px #000000, 0 0px 1px 1px #0d0d0d;
	  background: linear-gradient(to right, #cc6666 30%, #ffd400 50%, #35A834);
	  border-radius: 2px;
	  border: 1px solid #dddddd;
	  -moz-appearance:none;
	  opacity:.85;
	}
	input[type=range]::-moz-range-progress {
	  box-shadow: 0px 0px 1px 2px #000000, 0 1px 1px 1px #0d0d0d;
	  border: 0px solid #666666;
	  height: 11px;
	  width: 11px;
	  border-radius: 25px;
	  background: #f3f3f3;
	  /*cursor: pointer;*/
	  -webkit-appearance: none;
	  -moz-appearance:none;
	  margin-top: -.5px;
	}



	input[type=text]:active {
		background-color:#ffffff;
		border: 1px solid red !important;
		border-radius: 5px; 
		outline:none !important;
	}

	input[type=text]:focus {
		background-color:#f1f1f1;
		background-color:#ffffff;
		border-radius: 5px; 
		border: 1px solid black !important;
	}	

	input:active {
		background-color:#f1f1f1;
		background-color:#ffffff;
		border-radius: 5px; 
		border: 1px solid #cccccc !important;
		outline:none !important;
	}	



	::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	  color: black;
	  opacity: .7; /* Firefox */
	}

	:-ms-input-placeholder { /* Internet Explorer 10-11 */
	  color: black;
	}

	::-ms-input-placeholder { /* Microsoft Edge */
	  color: black;
	}


	.circulo {
		-webkit-appearance: none;
		vertical-align:middle;
		height: 10px;
		width: 10px;
		padding: 2px;
		margin:0 0 2 0px;
		background-color:#1872a2;
		background-image:linear-gradient(#ffffff,#bbbbbb);
		box-shadow:rgba(0,0,0,.1)1px 1px 2px 1px;
		color:#eeeeee;
		color:#eeeeee;
		font-weight:bold;
		border-radius:5px;		
		border: 1px solid #999999 !important;
	}

	
	
	.botoon {
		-webkit-appearance: none;
		vertical-align:middle;
		height: 26px;
		padding-left: 8px;
		padding-right: 8px;
		background-color:#1872a2;
		background-image:linear-gradient(#ffffff,#bbbbbb);
		box-shadow:rgba(0,0,0,.1)1px 1px 2px 1px;
		color:#eeeeee;
		color:#333333;
		border-radius:3px;
		font-size: 14px; 
		border: 1px solid #999999 !important;
	}


	.botoon:hover {
		border: 1px outside silver !important; 
		-moz-transition:all .1s ease-in-out;
		-webkit-transition:all .1s ease-in-out;
		transition:all .1s ease-in-out;
		box-shadow:rgba(0,0,0,.35)1px 1px 5px 3px;
		text-decoration:none;
		background-image:linear-gradient(#5499C7,#1F618D);
		border: 1px solid #555555 !important;
		color:#ffffff;
	}


	.classp {
		height:35px;
		line-height:35px;
		display: inline-block;
		margin:0px;
		padding: 0px 5px 7px 20px;
		color: #000;
		text-decoration: none;
		border:1px solid #dddddd;
		cursor: pointer;
		vertical-align:middle;
	}


	.classp:not(:last-child) {
	  border-bottom: 1px inset #dddddd;
	  box-shadow: 0 1px 1px -5px #333333;
	}

	.classp:hover {
		color:#eeeeee;
		background-color: #b1b1b1;
		background-image:linear-gradient(#c1c1c1,#a1a1a1);

		box-shadow:rgba(0,0,0,.2)0px 0 2px 2px;
		-moz-transition:all .2s ease-in-out;
		-webkit-transition:all .2s ease-in-out;
		transition:all .2s ease-in-out;		

		box-shadow:rgba(0,0,0,.4)0px 2px 4px 3px;
		border:1px solid #999999;
		overflow:hidden;
	}




	div[list] {
		float:top;
		top:96px;
		line-height:25px;
		z-index:997;
	}

	button:hover, submit:hover, input[type=button]:hover, input[type=submit]:hover {
		color:#FFF;
		background-color:#1872a2;
		background-image:linear-gradient(#4ca3d3,#186fa0);
		background-image:linear-gradient(#5499C7,#1F618D);
		background-image:linear-gradient(#1c5ea5,#1c56a4);
		-moz-transition:all .2s ease-in-out;
		-webkit-transition:all .2s ease-in-out;
		transition:all .2s ease-in-out;
		box-shadow:rgba(0,0,0,.35)1px 1px 5px 3px;
	}
	
	td textarea {
	 width:100%;
	 height:100%;
	}


/*********************
#ffffff; blanco 
#f1940a; naranja 
#0da6db; azul claro		13,166,219
#1c5ea5; azul oscuro
#8fbd24; verde			143,189,36
#f8e91f; amarillo
**********************/

.bred 		{	background-color: red;				background-image:linear-gradient(#dd6666,#996666);					}
.bgreen 	{	background-color: green;			background-image:linear-gradient(#66dd66,#669966);					}
.bgray 		{	background-color: #b1b1b1;			background-image:linear-gradient(#e1e1e1,#c1c1c1);	color:#333333;	}
.bgray2 	{	background-color: #b1b1b1;			background-image:linear-gradient(#c1c1c1,#717171);					}
.bblue 		{	background-color: #1872a2; 			background-image:linear-gradient(#5499C7,#1F618D);					}
.borange 	{	background-color: orange;			background-image:linear-gradient(#FFA500,#994500);					}
.bwhite 	{	background-color: #b1b1b1;			background-image:linear-gradient(#ffffff,#dddddd);	color:#996666;  }
.yellowb	{	background-color: yellow;			background-image:linear-gradient(#cccc00,#999900);					}

.fred 		{	color: linear-gradient(#dd6666,#996666);					}
.fgreen 	{	color: linear-gradient(#66dd66,#669966);					}
.fgray 		{	color: linear-gradient(#e1e1e1,#c1c1c1);	color:#333333;	}
.fgray2 	{	color: linear-gradient(#c1c1c1,#717171);					}
.fblue 		{	color: linear-gradient(#5499C7,#1F618D);					}
.forange 	{	color: linear-gradient(#FFA500,#994500);					}




.textnotes {
    background-attachment: local;
    background-image:
        linear-gradient(to right, white 10px, transparent 10px),
        linear-gradient(to left, white 10px, transparent 10px),
        repeating-linear-gradient(white, white 20px, #ccc 21px, #ccc 20px, #ccc 21px);
    line-height: 21px;
	background-position-y: 5px;
    padding: 0px 10px 0px 10px;
}

.wrap {
  padding: 10px;
}
.progbar {
  height: 48px;
  border-radius: 1px;
  background-color: #2F2F2F;
  background: linear-gradient(to right, rgba(153,204,255,1), rgba(13,166,219,1));
  background-color: transparent;
  width: 0%;
  float:left;

  animation-name: slide;
  animation-duration: 1s;
  -webkit-animation-name: slide;
  -webkit-animation-duration: 1s;
  -moz-animation-name: slide;
  -moz-animation-duration: 1s;
  -o-animation-name: slide;
  -o-animation-duration: 1s;
}


/* Keyframes *****************/

@keyframes 			slide { 0%{width:0%;} 100%{width:100%;}}
@-mox-keyframes 	slide { 0%{width:0%;} 100%{width:100%;}}
@-o-keyframes 		slide { 0%{width:0%;} 100%{width:100%;}}
@-webkit-keyframes 	slide { 0%{width:0%;} 100%{width:100%;}}


	@keyframes animatehtml{
		0%{
			width:0;
		}
		0%{
			width:0%;
		}
	}

 
	a, a:hover * { text-decoration: none;}

	* {
		font-family: "Roboto Condensed", Roboto, sans-serif, Helvetica, Tahoma, Verdana;
	}
	
	
/********************************************/




.tgl {
  display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
    -webkit-box-shadow: inset 0 0 5px #666;
    -moz-box-shadow: inset 0 0 5px #666;
    border:0.5px solid #666;
    box-shadow: inset 0 0 5px #666;	
	outline: 3;
	display: inline-block;
	width: 3em;
	height: 1.5em;
	cursor: pointer;
	  -webkit-user-select: none;
		 -moz-user-select: none;
		  -ms-user-select: none;
			  user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  border:0.5px solid #555;
  box-shadow:rgba(0,0,0,.3) 0 1px 1px 1px;  
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}

.tgl-light + .tgl-btn {
  background: #f0f0f0;
  background-image:linear-gradient(#dd6666,#996666);
  border-radius: 2em;
  padding: 2px;
  transition: all 0.4s ease;
}
.tgl-light + .tgl-btn:after {
  border-radius: 50%;
  background: #fff;
  transition: all 0.4s ease;
}
.tgl-light:checked + .tgl-btn {
  background: #9FD6AE;
  background-image:linear-gradient(#66dd66,#669966);
}




.scale-up-ver-top {
	-webkit-animation: scale-up-ver-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-ver-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-2-23 23:10:57
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-ver-top
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-ver-top {
  0% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
}
@keyframes scale-up-ver-top {
  0% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
}



.test {
    -webkit-animation: fadein 0.1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.1s; /* Firefox < 16 */
        -ms-animation: fadein 0.1s; /* Internet Explorer */
         -o-animation: fadein 0.1s; /* Opera < 12.1 */
            animation: fadein 0.1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/*



.modal-backdrop {
	z-index:1986 !important;
}

.modal {
    z-index:1990 !important;
}


.modal-dialog{
    margin-right: 0;
    margin-left: 0;
}


.modeless{
    margin-top:20%;
    left:auto;
    bottom:auto;
    right:auto ;
}


.top10 {
    top:10%;
}

.modal-header {
	height:30px;
	padding: 20px;
	background-color:#eeeeee;
	color:black;
}

.modal-header:hover {
	cursor			: move;
}


.avis{
	height:80vh !important;
	width:60vw !important;
    margin:30 30;
    top:100;
	left:0;
	right:0;
	bottom:0;
	z-index:1990 !important;
	overflow:scroll;
}

.avis{
	height:80vh;
	width:80vw;
    margin:auto auto;
    top:0;
	z-index:2070 !important;
	overflow:auto;
}




.modal-body h3 {
	text-align: center;
}


.modal-body p {
	padding-top:10px;
	font-size: 1.1em;
}

*/




.modeless{
	height:15vh;
	width:50vh;
    margin:auto;
	z-index:10000!important;
}

.avis{
	height:80vh !important;
	width:32vw;
	min-width:32vw!important;
	max-width:1000px;
    margin: auto;
	z-index:1990 !important;
	resize:both !important;
	overflow:auto;
}

.modal-header {
	height:30px;
	padding: 20px;
	background-color:#eeeeee;
	color:black;
}


.modal-header:hover {
	cursor:move;
}

.modal-body {
	font-family: "Roboto Condensed", roboto, sans-serif, Helvetica, Tahoma, Verdana;
	font-size:15px;
	color:#888;
	padding: 18px 15px 20px;
	overflow:auto;
}

.modal-title {
	font-family: "Roboto Condensed", roboto, sans-serif, Helvetica, Tahoma, Verdana;
	font-size:16px;
	margin-top:5px;
	font-weight:600;
}


.modal-header .close {
	content:"X";
	margin-top:-10px;
	color:red;
}




.main-section{
	margin:0 auto;
	padding: 20px;
	margin-top: 100px;
	background-color: #fff;
	box-shadow: 0px 0px 20px #c1c1c1;
}
.fileinput-remove, .fileinput-upload{
	display: none;
}

.input-group>.form-control, .input-group>.form-select {
    height: auto;
}

.file-drop-zone-title {
    font-size: 1.3em !important;
}

.file-preview-image {
	font-size:1em !important;
	font-family:'Roboto Condensed', Roboto, Arial, Sans-serif !important;
	color:#bb6666 !important;	
}

.btn-group-sm>.btn, .btn-sm {
    --bs-btn-padding-y: 0.35rem !important;
}

.table-bordered {
	border-radius:5px;
}



	.space {
		height: 5px;
	}


	.cards1 {
		justify-content: left;
		margin:				10px 3px 0px 3px;
		padding:			 8px 0px 0px 1px;
		background-color: 	#fdfdfd;
		box-sizing: 		border-box;
		border-width: 		0px 0px 1px 0px;
		border-color: 		#c5c7c9;
		border-style: 		groove;
		border:				1px solid #c5c7c9;	
		box-shadow: 		0px 3px 3px 1px rgba(0, 0, 0, 0.35);
	}

/*
	.cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
		margin:				1px 3px 0px 3px;
		padding:			 1px 0px 0px 1px;
		background-color: transparent;
	}
*/
	
	.card {
		display: flex;
		flex-wrap: wrap;
		min-width:200px;
		width:200px;
		justify-content: left;	
		margin:0px 20px 20px 20px;
		padding:0px 0px 0px 0px;
	}

	.car {
		flex: 0 1 10%;
		justify-content: left;	
		padding-right:5px;
		flex-wrap: wrap;
		margin: 6px 6px 6px 4px;
		padding:3px 6px 3px 1px;
		box-sizing: 		border-box;
		border-width: 		0px 0px 1px 0px;
		border-color: 		#c5c7c9;
		border-style: 		groove;
		border:				1px solid #c5c7c9;	
		box-shadow: 		0px 3px 3px 1px rgba(0, 0, 0, 0.35);
		border-radius: 4px; 
	}

	.titneg {
		min-width:0px;
		width:100%;
		position: relative;
		top: 4px;
		left:4px;
		font-size: 13px;
		background: #0da6db;
		padding: 0px 7px 3px 7px;
		pointer-events: none;
		color: #fff;
		margin-right:10px;
		border: 0px solid #aaa !important;
		height: 30px !important;
		line-height:30px !important;
		vertical-align:middle;
		border-radius: 3px; 
		box-shadow:rgba(0,0,0,.3) 0 2px 3px 3px;
	}
	
	.titneg.green { background-color:#8fbd24; }
	.titneg.orang { background-color:#f1940a; }
	.titneg.azulo { background-color:#1c5ea5; }
	.titneg.amari { background-color:#c0c000; }
	.titneg.azulc { background-color:#0da6db; }

	
	.campo {
		text-decoration:none;
		min-width:100%;
		width:100%;
		position: relative;
#		top: 4px;
#		left:4px;
		font-size: 13x;
		background: white;
		padding: 3px 7px 3px 7px;
		color: #777;
#		margin-right:10px;
#		margin-bottom:3px;
#		border: 1px solid #ccc !important;
		word-break: break-word;
#		border-radius: 3px; 
		heigh:25px;
		
	}	
	
	.campo:hover { background-color:#f1940a; }
	.campo:hover { background-color:#1c5ea5; }

	
	.campo:hover a {
		text-decoration:none;
		color:white;
		display:block;
	}


	.clearfix:after {
		content:"";
		display:block;
		clear:both;
	}


	.vertical_nav {
		position:fixed;
		z-index:992;
		left:-279px;
		top:42px;
		bottom:0;
		width:280px;
#		background:#0da6db;
	 	background:#f3f3f3;
		color:#333333;
	}
	

	* {
		font-family: "Roboto Condensed", Roboto, sans-serif, Helvetica, Tahoma, Verdana;
	}

}