*{
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
}

:root{
	--color-fondo: #EEE;
	--color_fondo-2:#CCFF99;
}

body{
	background-color: var(--color-fondo);
}
#fondo {
	color: #666;
	width: 90%;
	height: 100%;
	border-radius: 27px 27px 27px 27px;
	-moz-border-radius: 27px 27px 27px 27px;
	-webkit-border-radius: 27px 27px 27px 27px;
	
	margin: 0 auto;
	margin-top: 1%;
	margin-bottom: 3%;
	padding: 1%;
	padding-bottom: 2%;
	background-color: var(--color-fondo);
}

#box {
	margin-top: 1%;
	background-color: var(--color-fondo);
	width: 100%;
	height: auto;
	max-height: 580px;
	padding: 2%;
	box-sizing: border-box;
}

#buscar{
	border: none;
	padding: 6px;
	text-decoration: none;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	font-size: .9em;
	color:#fff;
	background: linear-gradient(to bottom, rgb(153, 204, 51), #88AA25);
	margin-left: 4%;
	border:solid 1px #77bb66;
	text-shadow: 0px -1px 1px #77bb66;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
}
#buscar:hover {
	cursor: pointer;
	background: rgb(153, 204, 51);
}

#buscar:focus {
	outline: none;
}
select:focus{
	outline:none;
}

option:hover{
	background-color: var(--color_fondo-2);
	color: red;
}

input[type="text"]:focus{
	outline:none;
	border: #88AA25 solid;
}

#consulta_grad{
	width: 100%;
	/*líneas de código que hacen el formulario de filtro para la consulta -RESPONSIVE-*/
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
#consulta_grad input[type="text"], #consulta_grad select {
	font-size: 100%;
	width: 100%;
	border: none;
	background-color: transparent;
}
#consulta_grad select:hover {
	cursor: pointer;
}
#consulta_grad input[type="text"] {
	border-bottom: solid;
	border-width: thin;
}

#consulta_grad input[type="text"]:hover{
	outline: none;
	transition: 0.5s;
}
.elemento {
	margin: 10px;
	width: 160px;
	text-align: center;
}


/******		ESTILO DE CARGA 	******/
*, *::before, *::after {
  	box-sizing: border-box;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
#carga{
	position: relative;
	height: 60%;
	margin-top: 0px;
	text-align: center;
	padding-top: 0px;
}
#mensaje{
	border-top:solid #fff0;
}
#carga p{
	margin-top: 8%;
}
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 5px solid #fff0;
  border-radius: 100%;
}

.first {  
  margin: -30px 0 0 -30px;
  height: 60px;
  width: 60px;
  border-top-color: rgb(102,255,102);
  animation: loading 3s infinite linear;
}

.second {  
  margin: -20px 0 0 -20px;
  height: 40px;
  width: 40px;
  border-top-color: rgb(51,204,51);
  animation: loading 2s infinite linear;
}

.third {  
  margin: -10px 0 0 -10px;
  height: 20px;
  width: 20px;
  border-top-color: rgb(0,153,0);
  animation: loading 1s infinite linear;
}
#resultado{
	overflow: auto;
	margin-top: 10px;
	width: 100%;
	max-height: 500px;
}