ihtml {
  scroll-behavior: smooth;
}
<style type="text/css"> 
	body {
		margin:0px;
		width:100%;
		height:100%;
		overflow:hidden;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
	}
	textarea{
		resize:vertical;
	}
	table{
		border-collapse: separate;
		border-spacing: 5px;
		border-radius:20px;  
		background-color:#F2F2F2;
	}
	table td, th{
		table-layout: fixed;
		height:30px;
		padding:5px;
	}
	table td input#Id{
		min-width:120px; 
		text-align:center;
	}
	div{
		overflow-x:auto;
		max-width:100%;
	}
	#mibuscar {
		background-image: url('images/serching.png');
		background-position: 10px 50%;
		background-repeat: no-repeat;
		width: 70%;
		font-size: 14px;
		padding: 12px 20px 12px 40px;
		border: 1px solid #ccc;
		margin: 12px auto;
	}
	#verresp input[type='checkbox']{
		-ms-transform: scale(1.5); /* IE */
		-moz-transform: scale(1.5); /* FF */
		-webkit-transform: scale(1.5); /* Safari y Chrome */
		margin:10px;
	}
	.loader {
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background: url('images/pageloader.gif') 50% 50% no-repeat rgb(249,249,249);
		opacity: .8;
	}
	.tabla-correo{
		width:100%;
		border-radius:20px; 
		border-spacing:5px; 
		background-color:#F2F2F2;
	}
	.tabla-correo td, th{
		table-layout: fixed;
		height:20px;
		padding:0px;
	}
	.tabla-atrib{
		width:60%;
	}
	.tabla-atrib thead th{
		background-color:#E6E6E6;
		font-size:16px;
		text-align:center;
		font-weight:bold;	
		height:16px;
	}
	.tabla-atrib thead td{
		background-color:#E6E6E6;
		font-size:16px;
		text-align:center;
		font-weight:bold;
		height:16px;		
	}
	.tabla-atrib tfoot th{
		 background-color:#E6E6E6;
		 font-size:12px;
		 height:16px;
	}
	.tabla-atrib tbody th{
		 background-color:#E6E6E6;
		 cursor:pointer;
		 font-size:12px;
		 height:16px;
	}	 
	.tabla-atrib tbody td{
		font-size:16px;
		height:16px;
	}	
	.tabla-atrib tbody tr:nth-child(odd) {
		background-color:#DAEDF6;  /*lightblue; #DAEDF6;*/
	}
	.tabla-atrib tbody tr:nth-child(even) {
		background-color:lightyellow; /*#E6E6E6; lightyellow*/
	}
	.tabla-atrib tbody td:hover {
      background-color: lightgrey!important;
	}		  	  
	.tabla-atrib-edit{
		width:80%;
		border-collapse: separate;
		border-spacing: 5px;
		border-radius:20px;
		/*border: black 1px solid;*/
		padding:15px;
	}
	.tabla-atrib-edit td{
		border: 0.5px solid;
		background-color:white;
	}
	.tabla-atrib-edit th{
		background-color:#F2F2F2;
		height:20px;
	}
	.tabla-datos{
		width:80%;
		border: 1px solid darkblue;
		padding:5px;
	}
	.tabla-datos thead th{
		background-color:#E6E6E6;
		font-size:16px;
		text-align:center;
		font-weight:bold;	
	}
	.tabla-datos thead td{
		background-color:#E6E6E6;
		font-size:16px;
		text-align:center;
		font-weight:bold;	
	}
	.tabla-datos tfoot th{
		 background-color:#E6E6E6;
		 font-size:12px;
	}
	.tabla-datos tbody th{
		 background-color:#E6E6E6;
		 cursor:pointer;
		 font-size:12px;
	}	 
	.tabla-datos tbody td{
		font-size:16px;
	}	
	.tabla-datos tbody tr:nth-child(odd) {
		background-color:#DAEDF6;  /*lightblue; #DAEDF6;*/
	}
	.tabla-datos tbody tr:nth-child(even) {
		background-color:lightyellow; /*#E6E6E6; lightyellow*/
	}
	.tabla-datos tbody td:hover {
      background-color: lightgrey!important;
	}		  	  
	.tabla-edit{
		width:80%;
		border: 1px solid darkblue;
		padding:5px;
	}
	.tabla-edit td input{
		height:30px;
		vertical-align:middle;
		font-size:16px;
		width:calc(100% - 30px);
	}
	.tabla-edit td select{
		height:35px;
		vertical-align:middle;
		font-size:16px;
		width:calc(100% - 10px);
	}	
	.tabla-edit td input[type=date].nvodoc{
		width:220px;
		height:35px;
	}		
	.tabla-edit input:disabled{
		text-align:center;
	}
	#busqueda span label{
		font-size:16px;
	}
	select, input{
		height:30px;
		vertical-align:middle;
		font-size:16px;
		border-radius:5px;
		background-color:white;
		border:1px solid grey;
		color:black;
		padding-left:10px;
	}

	.tabla-datos textarea, .tabla-edit textarea{
		font-size:18px;
		width:calc(100% - 20px);
		padding-left:10px;
	}
	.tabla-edit td{
		font-size:18px;
	}
	.bar {
		height: 35px; 
		position:relative;
	}	 
	.bar label { 
		margin-right:4px;
		margin-left:10px;
		position: inherit;
		top:25%; 
	}		
	.btn-submit {
	  color: #ffffff;
	  border-radius:5px; 
	  /*background-color: #48ACCA;*/
	  background-color: #3A44A9;
	  border-color: #3A44A9;
	  cursor: pointer;
	}
	.btn-submit:hover,
	.btn-submit:focus{
	  color: #ffffff;
	  /*background-color: #3A44A9; */
	  background-color: #48ACCA;
	  border-color: #4B4DA6;
	}
	table img{
		border-radius: 4px;
		cursor:pointer;
		margin-left:10px;
		vertical-align:middle;
	}
	.icono{
		border-radius: 4px;
		cursor:pointer;
		margin-left:10px;
		margin-top:5px;
		vertical-align:middle;
		width:50px; 
	}
	.icono28{
		margin:5px 1px 0px 0px;
		width:28px;
		height:28px;
		cursor:pointer;
		vertical-align:middle;
		border-radius:5px;
	}
	.icono15{
		margin:5px 5px 0px 0px;
		width:20px;
		height:20px;
		cursor:pointer;
		vertical-align:middle;
		border-radius:5px;
	}
	.icono50{
		display:inline; 
		margin:5px;
		width:50px;
		height:50px;
		cursor:pointer;
		vertical-align:middle;
		border-radius:5px;
	}
	.iconop{ /* icono pequeno se coloca en la parte suerior */
		border-radius: 4px;
		cursor:pointer;
		margin-left:10px;
		margin-top:5px;
		vertical-align:middle;
		width:40px; 
	}
	.bton{
		width:90px;
		height:40px; 
		background-color:lightblue;
		margin:5px; 
		padding:5px; 
		display:inline; 
		border-radius:10px; 
		cursor: pointer;
	}
	.bton-form{
		width:70px;
		height:40px;
		background-color:darkblue;
		margin:5px; 
		padding:5px; 
		display:inline; 
		border-radius:5px; 
		cursor: pointer;
		color:white;
		font-size:16px;
	}
	.bton-form:hover,
	.bton-form:focus{
	  color: #ffffff;
	  background-color: #48ACCA;
	  border-color: #4B4DA6;
	}
	/******Se agrego para crear la barra de menu superior********/
	.barra-titulo{
		color:white;
		padding:10px;
		width:calc(100% - 20px);
		z-index:9900; 
		position:fixed;
		background:#2c3e50;
		border-radius:5px;
		left:0; 
		top:0;
	}
	.barra-titulo .titulo{
		font-size:36px;
	}
	.barra-titulo .subtitulo{
		font-size:20px;
	}
	.barra-titulo a{
		text-decoration:none;
		padding:0px 5px; 
		color:white; 
		font-family:Arial, Helvetica, sans-serif;
		font-size:16px;
		text-transform:uppercase;
	}
	.barra-titulo img{
		border-radius:5px; 
		float:left; 
		margin-right:10px;
	}
	.barra-titulo .menu a:hover, .barra-titulo .menu a:focus, .barra-titulo .menu a:active{
		color:red;
		font-weight:bold;
	}
	.menutel{
		display:none;
	}
	.div-menu-nav{
		float:right; 
		margin-right:20px;
		padding:0px 0px;
	}
	.div-menu-nav .menu{
		font-size:20px;
		text-align:right;
		vertical-align:middle;
		padding:30px 20px 0px 0px;
	}
	/**********************/
	[name='boton']{
		visibility:visible;
	}
	#profile{
		width:60%;
	}
	#formpag p{
		font-weight:bold;
		font-size:18px;
	}
	#perpag, #pagina{
		margin:0px 5px;
		height:25px;
	}
	#campos, #tipofiltro, #selordenar, #tablas, #todas{
		height:28px;
		vertical-align:middle;
		margin-top:5px;
		margin-left:5px;
	}
	input#texto_busqueda{
		height:23px;
		vertical-align:middle;
		margin-top:5px;
		margin-left:5px;
	}
	#fecha1, #fecha2{
		height:28px;
		vertical-align:middle;
		margin-top:5px;
		margin-left:5px;
		margin-right:5px;
	}
	/*#boton_borrar{
		height:28px;
		width:28px;
		vertical-align:middle;
		margin-top:5px;		
		padding:0px;
	}*/
	div	.img-doc1{
		width:300px;
		height:435px;
		max-width:25%;
		margin:10px;
		padding:20px 10px 0px 10px;
		display:inline-block;
		border: 2px solid lightblue;
		border-radius:10px;
	}
	div.img-doc figure{
		display:inline-block;
		width:350px;
		height:450px;
		margin:10px;
		padding:20px 10px 0px 10px;
		max-width:95%;
		border: 2px solid lightblue;
		vertical-align:top;
		border-radius:10px;
		overflow:auto;
	}	
	div.img-doc img{
		cursor:pointer;
		width:100%;
		max-width:100%;
		height:auto;
		margin:auto;
		border-radius:5px;
	}
	div.img-doc figcaption{
		padding:10px;
	}
	div.img-doc img.icono-fig{
		width:35px;
		height:35px;
		margin:5px 4px 10px 4px;
		display:inline-block;
		border-radius:0px;
	}
	div.img-doc input[type=text]{
		display:inline-block; 
		border:0;
		background-color:transparent;
		color:black;
		outline:none;
		width:50%;
	}
	div.img-doc input[type=checkbox]{
		display:inline-block;
	}
	div.img-doc textarea{
		text-align:left;
		display:inline-block; 
		resize:none; 
		word-wrap: break-word; 
		border:0; 
		background-color:transparent;
		width:100%;
		color:black;
		outline:none;
	} 
	#canvas{
		cursor:crosshair;
	}	  
	.palette-case {
		float: left;
		width:50px;
	}
	 .palette-box {
		padding:2px 6px 2px 6px;
	}
	.palette {
		border:2px solid #777;
		height:36px;
		width:36px;
		cursor: pointer;
	}
	.red{
	  background-color:#c22;
	}
	.blue{
		background-color:#22c;
		border:2px dashed #fff;
	}
	.green{
		background-color:#2c2;
	}
	.white{
		background-color: #2E9AFE;
	}
    .black{
		background-color:#000;
	}
	.linea-case {
		float: left;
		width:50px;
	}
	.linea-box {
		padding:2px 6px 32px 6px;
	}		
	.linea {
		border:2px solid;
		width:36px;
		background-color:#D4CACA;
		border:2px;
		cursor: pointer;
	}		  
	/*#content7i{
	  	content:url("images/inicio.png");
		width: 60%; 
		margin: auto;
	}*/
	#content7{
	  	content:url("images/encpag1.png");
		width: 30%; 
		margin: auto;
		padding:10px;
		display:inline-block;
	}
	#content7t{	
		content:url("ConfigSad/captcha.png");
		width:25%; 
		margin: auto;
		padding:10px;
		display:inline-block;
	}
	footer{
	  	content:url("images/piepag.png");
		width: 60%; 
		margin: 0 auto;
		padding:20px;
	}
    #etchHelp {
        display: none;
        position: absolute;
        top: 40px;
        right: 4px;
        width: 160px;
        background-color: #000;
        color: #222;
        font-size: 14px;
        line-height: 20px;
        border-radius: 4px;
        padding: 6px;
        box-shadow:  0 0 3px 1px #888;
    }
	.bground-idx{
		padding:75px 0px 75px 0px; 
		background-image:url(images/bground.jpg); 
		background-size:100% 100%;
	}
	.bground-idx img{
		border-radius:30px;
	}
	.res-foto-img{
		width:125px;
		height:auto;
	}
	.div-hist{
		position:fixed;
		top:100px;
		left:3%;
		width:95%;
		height:80%;
		border:5px darkblue solid;
		background-color:#DAEDF6;
		z-index:10;
	}
	.div-hist textarea{
		width:95%;
		height:70%;
		margin:0px 1% 10px 1%;
		border:3px darkblue solid;
		font-size:18px;
		padding:10px;
	}
	.label-hist{
		cursor:pointer;
		font-size:20px;
		color:darkblue;
	}

/*input button*/
	.custom-input-file {
		overflow: hidden;
		position: relative;
		cursor: pointer;
		border: 1px solid #000;
		border-radius: 15px;
		background-color: #F3E2A9;
		color: #000;
		text-align: center;
		font-family: verdana;
		font-size: 12pt;
		min-height: 39px;
	}
	.custom-input-file:hover {
		background-color: #F7D358;
		color: #fff;
	}
	.custom-input-file .input-file {
		margin: 0;
		padding: 10px;
		outline:0;
		font-size: 10000px;
		border: 10000px solid transparent;
		opacity: 0;
		/*filter: alpha(opacity=0);*/
		position: absolute;
		right: -1000px;
		top: -1000px;
		cursor: pointer;
	}
	.custom-input-file .archivo {
		background-color: #000;
		color: #fff;
		font-size: 7pt;
		overflow: hidden;
	}
	.custom-input-file:hover .archivo {
		background-color: #fff;
		color: #FACC2E;   
	}
	
	.members_login{
		width:350px;
		height:200px;
		background:url(images/login_bg.gif) no-repeat;
	}
	.login_row{
		width:240px; 
		padding:7px 0px 4px 0px;
	}

	label.login{
		width:60px;
		float:left;
		padding:0 10px 0 0;
	}
	input.login_input{
		width:140px;
		height:20px;
		background-color:#FFFFFF;
		border:2px #CCCCCC solid;
		float:left;
	}
	a.login_submit{
		width:80px;
		height:22px;
		margin:10px;
		display:block;
		line-height:22px;
		color:#FFFFFF;
		text-decoration:none;
		text-align:center;
	}
	.formmodal{
		max-width:50%;
		position:fixed; 
		top:25%; left:25%;
		display:none;
		z-index:11;
	}
	#fondomodal{
		opacity:0.5;
		z-index:10;
		background-color:lightgrey;
		width:100%;
		height:100%;
		position:fixed;
		top:0;
		left:0;
		display:none;
	}
	#tabla label{
		vertical-align:middle;
		font-size:14px;
		font-family: verdana;
		margin-top:5px;
	}
	.divcorreo{
		width:60%;
	}
	.divmenu div{
		/*width:60%;*/
		width:60%;
	}
	.divmenu img{
		width:20%;
		cursor:pointer; 
		padding:10px;
	}
	#menu{
		display:block;
		position:absolute;
		top:0;
		left:0;
		padding:20px;
		cursor:pointer;
	}
	#formmail{
		border-radius:20px; 
		padding:15px; 
		background-color:#F2F2F2;
		border:1px solid grey;
	}
	#formmail input{
		width:calc(100% - 10px);
		height:30px; 
		font-size:16px;
		margin-bottom:20px;
	}
	#formmail select{
		width:calc(100% - 5px);
		height:40px; 
		font-size:16px;
		margin-bottom:20px;
	}
	#formmail textarea{
		width:calc(100% - 10px);
		font-size:18px;
		margin-bottom:20px;
	}
	#formmail input[type='file']{
		width:calc(100% - 10px);
		padding:10px 0px 5px 10px;
		border-radius:5px;
		font-weight:bold;
		margin-bottom:20px;
	}
	.ulcolum{
		width:auto;
		left:850px;
		position:absolute;
		background-color:lightgrey;
		border-radius:15px; 
		padding:10px; 
		list-style-type:none;
		z-index:8;
	}
	#divform{
		 display:none;
		 border:2px solid black;
		 padding:20px;
		 width:60%;
		 position:fixed;
		 top:95px; left:30px;
		 background-color:lightgrey; 
		 border-radius:15px;
		 z-index:12;
	}
	.newdiv, .newdivfig{
		width:350px;
		height:300px;
		max-width:25%;
		margin:20px 10px 10px 10px;
		padding:5px;
		overflow:hidden;
		display:inline-block;
		border:1px black solid;
	}
	.newdiv img, .newdivfig img{
		width:15px;
		margin:0px 10px 0px 0px;
		display:inline-block;
	}
	.newdiv iframe{
		width:95%;
		height:75%;
	}
	.newdivfig figure{
		padding:2px;
		margin:0px;
	}
	.newdivfig figure img{
		width:95%;
		height:70%;
		margin:0px auto;
		border:1px solid black;
		padding:0px;
	}
	.pub02{
		width:75%;
		margin:auto;
	}
	.pub02 ul{
		list-style-type:none;
		padding:20px 0px 50px 0px;
	}
	.pub02 li{
		display:inline-block; 
		padding:10px 10px 0px 0px;
	}
	.tab_ing{
		width:40%;
		border-spacing:20px; 
		background-color:#F2F2F2;
		border: 5px solid lightblue;
		margin:20px auto;
		padding-top:20px;
		border-radius:20px; 
	}
	.tab_ing input[type=text], 
	.tab_ing input[type=password],
	.tab_ing input[type=number]{
		width:90%;
		background-color:lightblue;
		height:38px;
		font-size:18px;
		border-radius:5px;
		display:inline-block;
		margin:5px 0px;
		padding-left:5px;
	}		
	.tab_ing input[type=date]{
		width:3000px;
		max-width:90%;
		background-color:lightblue;
		height:40px;
		font-size:18px;
		border-radius:5px;
		display:inline-block;
		margin:5px 0px;
		padding-left:5px;
	}		
	.tab_ing select{
		width:92%;
		background-color:lightblue;
		height:45px;
		font-size:18px;
		border-radius:5px;
		padding:0px 5px;
		margin:5px 0px;
	}		
	.tab_ing input[type=reset],
	.tab_ing input[type=button],
	.tab_ing input[type=submit]{	
		margin:5px;
		cursor: pointer;
		display:inline-block;
	}
	.tab_ing label{	
		font-size:20px;
		font-weight:bold;
		float:left;
		text-align:left;
		margin-left:30px;
	}
	.tab_ing textarea{
		font-size:18px;
		width:90%;
	}
	.tab_ing div.div-grp-pwd {
		border:1px solid black;
		background-color:lightblue;
		padding:5px;
		height:30px;
		width:90%;
		border-radius:5px;
	}
	.tab_ing div.div-grp-pwd input{
		border:0px;
		width:80%;
		position:relative;
		background-color:lightblue;
		outline:none;
		height:30px;
		padding:0px 5px;
		margin:0px 0px;
		float:left;
	}
	.tab_ing div.div-grp-pwd img{
		width:25px;
		max-width:10%;
		height:25px;
		border:0px;
		position:relative;
		top:2px;
		float:right;
		cursor:pointer;
		content:url('images/eye_icon.png');
	}
	input.input-captcha{
		padding: 10px 0px 10px 5px;
		display: inline-block;
		border: 1px solid black;
		border-radius: 10px;
		box-sizing: border-box;
		width:40% !important;
		font-size:22px;
		text-align:center;
		vertical-align:top;
		margin-left:10px;
		height:38px !important;
	}
	.button-captcha:hover, .button-btn:hover {
		background-color: darkblue;
		color:white;
	}
	.canvas-captcha{
		display: inline-block;
		border: 3px solid darkblue;
		border-radius: 10px;
		margin-left:10px;
		margin-top:5px;
		cursor:pointer;
		padding: 2px 12px 0px 10px;
		background-color: darkblue; 
	  /*prevent interaction with the canvas
	  pointer-events:none;*/
	}
	.canvas-captcha:hover {
		background-color: lightblue;
		color:white;
	}
	.solotlf{
		display:none;
	}
	.solopc{
		display:inline-block;
	}
	/****Se agrego para crear la barra de menu superior*****/
	@media(max-width:1115px){
		.menutel{
			display:block;
			cursor:pointer;
			font-size:40px;
			float:right;
			margin-right:15px;
			padding-top:10px;
		}		
		.barra-titulo .menu a{
			display:block;
			text-align:left;
			padding:10px 20px;
		}
		.barra-titulo .menu{
			display:none;
		}
	}
	@media(max-width:1024px){
		.barra-titulo .titulo{
			font-size:28px;
		}
		.barra-titulo .subtitulo{
			font-size:20px;
		}
	}
	/*****************************/
	@media(max-width:767px) {
		/*telefonos*/
		.bground-idx{
			padding:0px 0px 0px 0px; 
			background-image:none; 
		}
		.bground-idx img{
			border-radius:0px;
		}
		footer{
			width: 90%; 
			margin: auto;
			padding:8px;
		}
		#content7, #content7i, #content7t{
			width: 90%; 
			margin: auto;
			padding:8px;
		}
		.solotlf{
			display:inline-block;
		}
		.solopc{
			display:none !important;
		}
		.pub02{
			width:100%;
			margin:auto;
		}
		.newdiv, .newdivfig{
			width:95%;
			max-width:95%;
			height:75%;
			margin:5px 0px 0px 0px;
			padding:5px;
			overflow:hidden;
			display:inline-block;
			border:1px black solid;
		}
		.newdiv img, .newfigure img{
			width:20px;
			margin:0px 10px 0px 0px;
			display:inline-block;
		}
		.newdiv iframe{
			width:95%;
			height:80%;
		}
		div.img-doc figure{
			display:inline-block;
			border: 2px solid lightblue;
			width:100%;
			margin:10px;
			height:auto !important;	
		}		
		div.img-doc figcaption{
			display:inline-block;
			padding-left:5px;
		}	
		div.img-doc img{
			border: 2px solid lightblue;
			cursor:pointer;
			width:90%;
			height:auto !important;
			margin:10px 5px 5px 5px;		
		}
		div.img-doc input[type=text]{
			display:inline-block; 
			border:0;
			width:50%;
			padding:0px;
			margin:0px;
			background-color:transparent;
			color:black;
			outline:none;
		}
		#profile{
			width:90%;
		}
		/*#busqueda label, #busqueda input, #busqueda select, #boton_buscar, #busqueda [title~=Ordenar], #busqueda img[src*=borrarfila], #busqueda img[src*=columnas], #boton_borrar{
			display:none !important;
		}
		#busqueda{
			display:none;
		}*/		
		table{
			max-width:none !important;
		}
		#divform{
			 display:none;
			 border:2px solid black;
			 padding:20px;
			 top:90px; left:40px;
			 width:80%;
			 position:absolute;
			 background-color:lightgrey; 
			 border-radius:15px;
			 z-index:12;
		}
		.ulcolum{
			width:150px;
			left:50px;
			position:absolute;
			background-color:lightgrey;
			border-radius:15px; 
			padding:10px; 
			list-style-type:none; 
			z-index:8;
		}	
		.tabla-edit, .tabla-datos, .tabla-doc{
			width:100%;
		}
		.tabla-atrib{
			width:90%;
		}
		.divmenu div{
			width:100%;			
		}
		.divmenu img{
			padding:0px 3px 10px 3px; 			
			width:25%;	
		}
		.divcorreo{
			width:100%;
		}
		.divcorreo h3{
			font-size:12px;
		}
		.icono{
			width:40px;  /*30*/
			margin-left:5px;
		}
		.iconop{
			width:40px;  /*30*/
			margin-left:5px;
		}
		#tabla label{
			vertical-align:middle;
			font-size:10px;
			font-family: verdana;
			margin-top:5px;
		}
		.formmodal{
			max-width:90%; 
			position:fixed; 
			top:120px; left:5%;
		}
		/*[name='boton']{
			display:none; 
		}*/
		#menu{
			display:block;
			position:absolute;
			top:0;
			left:0;
			padding:15px 0px 0px 20px;
		}
		.tab_ing{
			width:95%;
		}
	}
	@media print{
		table {
			page-break-inside: avoid;
		}
	}
</style>