html {
  scroll-behavior: smooth;
}
<style type="text/css">
	body{
		background:url('images/bg.gif') repeat-x top #fff;
		padding:0;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:10px;
		margin:0px auto auto auto;
		color:#514c48;
	}
	table thead th.titulo, table thead td.titulo{
		font-size:20px;
	}
	table{
		padding:10px;
		max-width:100%;
	}
	table td, th{
		table-layout: fixed;
		height:25px;
	}
	select{
		background-color:white;
		border:1px solid grey;
		border-radius:5px;
		color:black;
		font-size:14px;
		height:30px;
		min-height:30px;
		margin:5px 0px 0px 5px;
	}
	input[type=date]{
		height:30px;
		min-height:30px;
		background-color:white;
		color:black;
		border-color:lightgrey;
		font-size:14px;
		border-radius:5px;
		display:inline-block;
		margin-left:5px;
		padding-left:5px;
		vertical-align:middle;
	}
	input[type=date]:disabled{
		background:lightgrey;
	}
	div{
		overflow-x:auto;
		max-width:100%;
	}
	div#busqueda label{
		font-size:12px;
	}
	div.img-prod figure{
		display:inline-block;
	}
	div.img-prod figcaption{
		padding:10px;
	}
	div.img-prod figure{
		display:inline-block;
		width:400px;
		height:auto;
	}
	div.img-prod img{
		border: 2px solid lightblue;
		cursor:pointer;
		width:380px;
		height:285px;
	}
	div.img-prod img.icono15{
		width:15px;
		height:15px;
		margin-left:5px;
	}
	div.img-inv figure{
		display:inline-block;
		border: 2px solid lightblue;
		width:300px;
		height:auto;
		max-width:80%;
	}	
	div.img-inv img{
		border: 2px solid lightblue;
		cursor:pointer;
		width:250px;
		height:200px;
		margin:10px 10px 0px 10px;		
	}

	div.img-inv figcaption{
		padding:10px;
	}
	div.img-inv img.icono15{
		width:15px;
		height:15px;
		margin-left:5px;
		display:inline-block;
	}
	div.img-inv input[type=text]{
		display:inblock; 
		border:0;
		background-color:transparent;
		color:black;
	}
	div.img-inv input[type=checkbox]{
		display:inline-block;'
	}
	div.img-inv textarea{
		text-align:justify; 
		display:inblock; 
		margin-bottom:10px; 
		resize:none; 
		word-wrap: break-word; 
		border:0; 
		background-color:transparent;
		width:100%;
		color:black;
	}
	.tabla-dir{
		margin:auto; 
		margin-bottom:150px;
		width:60%
	}
	.titulo{
		font-size:36px;
	}
	.input-captcha{
		padding: 10px 10px;
		display: inline-block;
		border: 1px solid black;
		border-radius: 10px;
		box-sizing: border-box;
		width:120px;
		font-size:25px;
		text-align:center;
		vertical-align:top;
		margin-left:5px;
		margin-right:5px;
	}
	.button-captcha{
		background-color: lightblue;
		color: black;
		padding: 14px 10px;
		border-radius:10px; 
		text-decoration: none;
		cursor: pointer;
		display: inline-block;
		vertical-align:top;
		margin-left:10px;
	}
	.button-captcha:hover {
		background-color: darkblue;
		color:white;
	}
	.tabla-admin{
		width:60%;
		border-radius:20px;
		background-color:#F2F2F2;
		border-spacing:10px;
		margin:auto;
		border: 2 black solid;
	}
	.tabla-admin td{
		border:0; background-color
	}
	.tabla-admin td input[type=text], 
	.tabla-admin td input[type=password],
	.tabla-admin td input[type=number],
	.tabla-admin td input[type=date]{
		width:90%;
		background-color:lightblue;
		height:30px;
		font-size:16px;
		border-radius:5px;
	}		
	.tabla-admin td select{
		width:90%;
		background-color:lightblue;
		height:30px;
		font-size:16px;
		border-radius:5px;
	}		
	.tabla-admin td input[type=reset],
	.tabla-admin td input[type=submit]{	
		margin: 5px;
		cursor: pointer;
	}
	.tabla-admin td label{	
		font-size:16px;
	}
	.divmsg{
		padding:60px 0px 70px 0px; 
		width:90%; 
		margin:50px 5% 50px 5%; 
		border-spacing:5px; 
		border-radius:20px; 
		background-color:#F2F2F2;
		text-align:center;
	}
	.divmsg img{
		width:700px;
		max-width:90%;
		margin-left: auto;
		margin-right: auto;
		display:block;
		border-radius:15px;
	}
	.divmsg button{
		margin-left: auto;
		margin-right: auto;
		display:block;
	}
	.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: 0.8;
	}
	.bton{    /* index.php*/
		width:90px;
		height:40px; 
		background-color:lightblue;
		margin:5px; padding:5px; 
		display:inline; 
		border-radius:10px; 
		cursor: pointer;
	}
	#ocultarthead{
		float:left;
		margin-left:-10px;
		width:20px; 
		cursor:pointer;
	}
	#mostrarthead{
		float:left;
		margin-left:5px;
		width:20px;
		cursor:pointer;
		display:none;
	}
	.bton-form{ /* index.php*/
		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;
	}
	.tbl{
		border: 1px solid black !important;
		width:70% !important;
	}
	.tbl tbody td{
		font-size:18px !important;
	}	 
	.tabla-doc thead th, thead td {
		font-size:16px;	
		border:0;
	}
	.tabla-doc tbody th{
		background-color:#E6E6E6;
		font-size:16px; 
		border:0;
		font-weight:bold;
	}
	.tabla-doc tbody td{
		font-size:16px;	
		border:0;
	}
	.tabla-doc tfoot th{
		font-size:14px;	
		background-color:#E6E6E6; 
		border:0;
	}
	.tabla-doc tfood td{
		font-size:14px;	
		border:0;
	}
	.tabla-doc tbody td:hover {
      background-color: lightgrey!important;
	}	
	.tabla-doc tbody tr:nth-child(odd) {
		background-color:#DAEDF6;
	}
	.tabla-doc tbody tr:nth-child(even){
		background-color:lightyellow; /*#EEF7F6; */
	}
	.tabla-datos thead th, .tabla-datos-edit thead th{
		 background-color:#E6E6E6;
		 font-size:14px;
	}
	.tabla-datos thead td, .tabla-datos-edit thead td{
		font-size:16px;
		background-color:#E6E6E6;
		text-align:center;
		font-weight:bold;
	}	
	.tabla-datos tbody th, .tabla-datos-edit tbody th{
		 background-color:#E6E6E6;
		 cursor:pointer;
		 font-size:14px;
		 border:0;
	}	 
	.tabla-datos tbody td, .tabla-datos-edit tbody td, .tabla-dir tbody td{
		font-size:14px;
		border:0;
		padding:10px;
	}	
	.tabla-datos tbody td:hover, .tabla-datos-edit tbody td:hover, .tabla-dir tbody td:hover {
      background-color: lightgrey!important;
	}	
	.tabla-datos tbody tr:nth-child(odd), .tabla-datos-edit tbody tr:nth-child(odd), .tabla-dir tbody tr:nth-child(odd) {
		background-color:#DAEDF6;
	}
	.tabla-datos tbody tr:nth-child(even), .tabla-datos-edit tbody tr:nth-child(even), .tabla-dir tbody tr:nth-child(even){
		background-color:lightyellow; /*#EEF7F6; */
	}
	.tabla-datos tfoot th, .tabla-datos-edit tfoot th{
		 background-color:#E6E6E6;
		 font-size:14px;
	}
	.tabla-datos tfoot td, .tabla-datos-edit tfoot td{
		 font-size:14px;
	}
	.tabla-menu tbody{
		 font-size:18px; 
		 color:darkblue;
	}
	 .tabla-menu th{
		height:40px;
	}
	 .tabla-menu td{
		height:50px;
		cursor:pointer;
		text-align:center;
	}	 
	.tabla-menu tbody td:hover {
      background-color: lightblue!important;
	}	  	  
	.tabla-edit, .tabla-doc, .tabla-datos{
		width:90%;
	}
	.tabla-datos-edit{
		width:60%;
	}
	.tabla-edit th, td{
		height:30px;
	}
	 .tabla-edit thead th{
		font-size:14px;
		border:0
	}	
	.tabla-edit input{
		height:30px;
	}		
	.tabla-edit thead td{
		font-size:14px;
		border:0;
	}		
	.tabla-edit tbody th{
		background-color:#E6E6E6;
		font-size:16px;
	}	
	.tabla-edit tbody td{
		font-size:14px;
		border:0;
	}		
	.tabla-edit tbody td input{
		height:25px;
		border:0;
		width:100%;
	}	
	.tabla-edit tfoot th{
		font-size:14px;
	}		
	.tabla-edit tfood td{
		font-size:14px;
	} 
	.tabla-edit tbody tr:nth-child(odd) td input {
		background-color:lightyellow;
	}
	.tabla-edit tbody tr:nth-child(even) td input {
		background-color:#DAEDF6; /*#EEF7F6; */
	}		
	.tmenu td{
		padding:5px;
	}
	.icono{
		border-radius: 4px;
		cursor:pointer;
		vertical-align:top;
		margin:5px 0px 0px 1px;
	}
	.ulcolum{
		width:auto;
		left:850px;
		position:absolute;
		background-color:lightgrey;
		border-radius:15px; 
		padding:10px; 
		list-style-type:none;
		z-index=8;
	}
	#campos, #tipofiltro, #tablas, #texto_busqueda, #tipopago, #tipoimp, #selordenar, #seldoc{
		height:30px;
		margin:5px 0px 0px 5px;
	}
	#todas{
		margin:5px 0px 0px 5px;
	}
	#canvas{
		cursor:crosshair;
	}	  		  
	#content7m{	
		padding-top:10px;
		content:url("images/piepag.png");
		width: 80%; 
		margin: auto;
	} 
	.formmodal{
		max-width:70%; 
		position:fixed; 
		top:25%; left:25%;
	}
	.divcorreo{
		width:60%;
		margin:0;
	}
	.divcorreo #correo, .divcorreo #nombre{
		width:84%;
	}
	.divmenu div{
		width:80%;
	}
	.divmenu img{
		width:20%;
		cursor:pointer; 
		padding:10px;
	}
	#dpopup{
		position:fixed;
		background-color:white;
		top:20%;
		width:40%;
		left:20%;
		margin:auto;
		display:none;
		border: 15px darkblue solid;
	}
	#captcha{
		max-width:90%;
	}
	#menu{
		display:block;
		position:absolute;
		top:0;
		left:0;
		padding:10px;
		cursor:pointer;
	}
	table.verfoto{
		width:50%;
		border-radius:20px;
		border-spacing:15px;
		background-color:#F2F2F2
	}
	h1{
		color:darkblue;
	}
	a{
		text-decoration:underline;
		color:#D86200;
	}
	a,
	a:active,
	a.active {
		outline: 0;
		color: #0D1077; /*#CCF0F7;*/
		font-style: bold;
	}
	#main_container{
		width:900px;
		height:auto;
		margin:auto;
		padding:0px;
		position:relative;
		max-width:100%;
	}
	#header{
		width:677px;
		height:62px;
		margin:auto;
	}
	.logo{
		padding:15px 0 0 70px;
	}
	.btn-submit {
		color: #ffffff;
		background-color: #3A44A9;
		border-color: #3A44A9;
		cursor: pointer;
		border-radius:5px;
		padding:5px 10px 5px 10px;
	}
	.btn-submit:hover,
	.btn-submit:focus,
	.btn-submit.focus,
	.btn-submit:active,
	.btn-submit.active,
	.open > .dropdown-toggle.btn-submit {
		color: #ffffff;
		background-color: #48ACCA;
		border-color: #4B4DA6;
	}
	/*---------------- menu tab----------------------*/
	#menu_tab{
		width:auto;
		height:53px;
		font-family:Arial, Helvetica, sans-serif;
		color:darkblue;
		padding:0px;
		background:url(images/menu_bg.gif) no-repeat center;
		max-width:100%;
	}
	#menu_tab h1{
		color:darkblue; 
		font-size:36px;
		font-family:Arial, Helvetica, sans-serif;
		font-weight:bold;
		padding-top:5px;
		margin:0px;
	}
	#menu_tab2{
		width:auto; 
		height:53px;
		font-family:Arial, Helvetica, sans-serif;
		padding:0px;
		color:darkblue;
		background:url(images/menu_bg2.gif) no-repeat center;
	}
	ul.menu {
		list-style-type:none; 
		display:block;
		width:780px; 
		margin: auto; 
		padding:0px;
		background:none;
	}
	ul.menu li {
		display:inline;
		font-size:13px;
		font-weight:bold;
		line-height:52px;
	}
	ul.menu li.divider {
		display:block;
		float:left;
		width:1px;
		height:53px;
		padding:0px ;
		margin:0px;
		background:url(images/divider.gif) no-repeat center;
	}
	a.nav:link, a.nav:visited {
		display:block; 
		float:left; 
		padding:0px; 
		margin:0;
		width: auto; 
		margin:0px 14px 0px 14px; 
		text-align:center;
		text-decoration:none; 
		background:none; 
		color:#534848;
	}
	a.nav_selected:link, a.nav_selected:visited {
		display:block; 
		float:left; 
		padding:0px; 
		margin:0;
		width: auto;
		margin:0px 14px 0px 14px;
		text-align:center;
		text-decoration:none; 
		color: #FF6600;
	}
	a.nav:hover {
		color: #FF6600; 
		text-decoration:none;
	}
	/*----------------main_content----------------*/
	#main_content{
		width:auto;
		clear:both;
		height:auto;
		background:url('images/bgbody.jpg') no-repeat center;
		background-size:cover;
	}
	.left_nav a{
		float:left;
		background:url(images/left_arrow.gif) no-repeat left;
		padding:0 0 0 30px;
		font-size:14px;
		color:#3e2510;
		text-decoration:none;
	}
	.right_nav a{
		float:right;
		background:url(images/right_arrow.gif) no-repeat right;
		padding:0 30px 0 0;
		font-size:14px;
		color:#3e2510;
		text-decoration:none;
	}
	#footer{
		width:auto;
		clear:both;
		padding:15px 0 10px 0;
		text-align:center;
		color:#999999;
		font-size: 11px;
	}
	.icono30{
		vertical-align:top; 
		margin-left:5px; 
		cursor:pointer; 
		width:30px;
	}
	.inputchk{
		width:79% !important;
	}
	.pub02 ul{
		list-style-type:none;
		padding:20px 0px 50px 0px;
	}
	.pub02 li{
		display:inline-block; 
		padding:10px 10px 0px 0px;
	}	
	img.grp-pwd{
		width:28px;
		height:28px;
		display:inline-block;
		cursor:pointer;
		vertical-align:middle;
		margin-left:3px; 
	}
	@media(max-width:767px){
		/*telefonos*/
		.solopc{
			display:none;
		}
		.inputchk{
			width:70% !important;
		}
		#main_container{
			width:100%;
			height:auto;
			margin:auto;
			padding:0px;
			position:relative;
			max-width:100%;
		}
		.tabla-admin{
			width:95%;
			border-radius:20px;
			background-color:#F2F2F2;
			border-spacing:10px;
			margin:auto;
			border: 2 black solid;
		}
		table.tabla-admin td h1{
			font-size:24px;
		}
		#menu_tab h1{
			color:darkblue; 
			font-size:22px;
			font-family:Arial, Helvetica, sans-serif;
			font-weight:bold;
			padding-top:5px;
			margin:0px;
		}
		table thead th.titulo, table thead td.titulo{
			font-size:15px;
		}
		.titulo{
			font-size:24px;
		}
		.tabla-dir{
			margin:auto; 
			margin-bottom:150px;
			width:95%
		}
		table{
			max-width:none !important;
		}
		#btnborrar{
			display:none;
		}
		#menu{
			display:block;
			position:absolute;
			top:0;
			left:0;
			padding:10px 0px 0px 10px;
		}
		#captcha{
			max-width:70%;
		}
		.formmodal{
			max-width:90%; 
			position:fixed; 
			top:10%; left:5%;
		}
		.divmenu div{
			width:100%;			
		}
		.divmenu img{
			cursor:pointer;
			padding:5px 2px 5px 2px; 			
			width:30%;		
		}
		.divcorreo{
			width:100%;
		}
		.divcorreo h3{
			font-size:14px;
		}
		.divcorreo #correo, .divcorreo #nombre{
			width:77%;
		} 
		.iconop{
			width:30px;
			margin-left:5px;
			vertical-align:middle;
		}
		.tabla-datos, .tabla-edit, .tabla-doc, .tabla-datos-edit{
			width:100%;
		}
		#dpopup{
			position:fixed;
			background-color:white;
			top:5%;
			width:70%;
			left:5%;
			margin:auto;
			display:none;
			border: 15px darkblue solid;
		}
		#dpopup h2{
			font-size:16px;
		}
		[name='boton'], #ocultarcol{
			display:none;
		}
		#busqueda{
			display:none !important;
		}
		table.verfoto{
			width:90%;
			border-radius:20px;
			border-spacing:15px;
			background-color:#F2F2F2
		}
		div.img-prod figure{
			width:90%;
			margin:10px;
		}
		div.img-prod img{
			border: 2px solid lightblue;
			width:90%;
		}
		div.img-prod figcaption{
			padding:0px;
		}		
		div.img-inv figure{
			display:inblock;
			border: 2px solid lightblue;
			width:100%;
			margin:10px;
			height:auto;
			
		}		
		div.img-inv figcaption{
			display:inblock;
			padding-left:5px;
		}	
		div.img-inv img{
			border: 2px solid lightblue;
			cursor:pointer;
			width:90%;
			height:auto;
			margin:10px 5px 5px 5px;		
		}
		div.img-inv input[type=text]{
			display:inblock; 
			border:0;
			width:60%;
			padding:0px;
			margin:0px;
			background-color:transparent;
			color:black
		}
	}
	@media print{
		table {
			page-break-inside: avoid;
		}
	}
</style>