body
{
	background-color: #ecebe9;
	font-family: "Red Hat Display", 'Open Sans', sans-serif;
	font-size: 16px;
	color: #000000;
	text-decoration: none;
	padding: 0px 1em 0px 1em;
}
a{
	cursor: pointer;
}
div{
	width: 100%;
}
div.seccion{
	float:left;
	min-height: 100%;
	width: 80%;
	padding: 15px;
	border: 2px solid #E8E8E8;
	border-radius: 4px;
	background-color: #FFFFFF;	
}
div.div_mitad{
	width: 40%;	
}
div.filtros{
	margin: 20px 0 20px 0;
}
a{
	text-decoration: none;
	color: #044691;
}
h1, h2, h3, h4, h5{
	color: #375672;
}
.border-bottom{
	border-bottom: 1px #044691 solid;
}
h1.negro, h2.negro, h3.negro, h4.negro, h5.negro{
	color: #636467;
}
h1.blanco, h2.blanco, h3.blanco, h4.blanco, h5.blanco{
	color: #FFFFFF;
}
p{
	color: #636467;
}
span{
	color: #636467;
}
span.blanco{
	color: #FFFFFF;
}
span.azul{
	color: #044691;
}

/*************** CABECERA ************/
header{
	margin-top: 1rem;
	margin-bottom: 1rem;
}
header .logo{
	width: 100%;
	max-height: 100px;
	display: flex;
	justify-content: center;
}

.topnav{
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.topnav ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.topnav li{
	display: inline-block;
}
.topnav a {
	float: left;
	display: block;
	color: #044691;
	text-align: center;
	padding: 1em 1em;
	text-decoration: none;
	font-size: 0.9em;
	font-weight: 700;
	text-transform: uppercase;
}
  
.topnav a:hover {
	background-color: #044691;
	color: white;
}
  
.topnav a.active {
	background-color: #04AA6D;
	color: white;
}
  
.topnav .icon {
	display: none;
}

@media screen and (max-width: 600px) {
	.topnav a {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
	}
}
  
@media screen and (max-width: 600px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive li {
		width: 100%;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
}

/**************** TABLAS ***********************/
table{
	width: 100%;
	margin-top: 20px;
}
th{
	color: #005BAA;
}
td{
	text-align: center;
	height: 1.2em;
	border: 1px #636467 solid ;
}

table.form{
	width: 50%;
	margin-left: 25%;
}
table.form td{
	border: none;
}
table.form input{
	width: 50%;
}

.section-title{
	display: grid;
	grid-template-columns: 11fr 1fr;
	margin-bottom: 1em;
}
.section-title > div:nth-child(1){
	border-bottom: 1px solid #044691;
}
.section-acciones{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.section-acciones > button, .section-acciones > a{
	max-height: 40px;
}
.section-data{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 1em;
	grid-auto-rows: 140px;
	margin-bottom: 1em;
}
.section-data-img{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 2em;
	grid-auto-rows: max-content;
	margin-bottom: 1em;
}
/**************** LIST ************/
a.btn-list{
	box-shadow: 0 0 3px 1px gray;
	background: transparent;  
	font-weight: 600;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	border: 1px #375672 solid;
	border-bottom: 10px #375672 solid;
	border-radius: 8px;
	padding: 1rem;
	row-gap: 1rem;
}
a.btn-list:hover{
	background-color: #375672;
	border: 1px #005BAA solid;
	border-bottom: 10px #005BAA solid;
	text-decoration: none;
}
a.btn-list p, a.btn-list .btn-title{
	color: #375672;
	margin: 0;
	width: 100%;
}
a.btn-list:hover p, a.btn-list:hover .btn-title{
	color: #FFFAE6;
}
/**************** CARD-LIST ************/
a.btn-list-card{
	background-color: #375672;
}
a.btn-list-card span{
	color: #FFFAE6;
}
a.btn-list-card:hover{
	background-color: #dde6ee;
	text-decoration: none;
}
a.btn-list-card:hover span{
	color: #375672;
}
/**************** FORMS ************/
form {
    margin: 0 auto;
    width: 100%;
}
input, textarea {
    height: 1.5em;
    padding: 1em;
}
input[type="file"]{
	border: none;
	padding: 0;
	margin-top: 0;
	height: 1.5em;
}
input:focus{
	border-color: #007bff !important;
}
textarea {
    height: 7em;
}

/**************** BOTONES ***********/
.btn{
	border-radius: 16px !important;
    padding: 0.4rem 1rem !important;
    color: white !important;
    border: none !important;
    font-weight: bold;
    font-size: 0.8em;
}
.btn-primary{
	background: #008FC4 !important;
}
.btn-primary:hover{
	background: #375672 !important;
}
.btn-info, .btn-danger, .btn-warning, .btn-success, .btn-secondary{
	background-image: none !important;
}
.border-primary{
	border-color: #044691 !important;
}
.bg-primary{
	background-color: #005BAA !important;
}
/**************** MENU ************/
#menu {
	float: left;
	height: 100%;
	width: 15%;
	padding: 15px 0 0 0;
	margin: 0 2% 0 0;
	border: 2px solid #E8E8E8;
	border-radius: 4px;
	background-color: #FFFFFF;
}
ul.menu {
	float: left;
	padding: 0;
	list-style:none;
}
ul.menu li {
	height: 1.5em;
	margin-left: 2px;
}
ul.menu a {
	text-decoration: none;
	padding: 0.25em;
}
ul.menu a.menu_activo, ul.menu a:hover {
	color: #FFFFFF;
	background-color: #005BAA;
	border-radius: 4px;
}
#img_menu{
	background-image: url("../images/menu.png");
	background-repeat: no-repeat;
	width: 32px; /*or your image's width*/
	height: 32px; /*or your image's height*/
	margin: 0;
	padding: 0;
	padding-top: 2em;
}
#menu select{
	max-width: 100%;	
}
#menu nav {
	max-width: 1000px;
}
.menu_bar {
	display:none;
}

@media screen and (max-width:800px ) {
	#menu{
		border: none;
		margin: 0;
	}
	#menu nav {
		width: 100%;
		height: 40px;
		left: -100%;
		margin: 0;
		position: absolute;
	}
	#menu nav ul{
		background-color: #001F0F;
		text-align: center;	
		float: none;
	}
	#menu nav ul li {
		display:block;
		float:none;
		border-bottom:1px solid rgba(255,255,255, .3);
	}
	.menu_bar {
		float: right;
		display: block;
		width: 20%;
	}
	.menu_bar .bt-menu {
		display: block;
		padding: 20px;	
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
	#menu ul li a {
		font-size: 20px;
		padding: 5px;
		color: #FFFAE6;
	}
	ul.menu a.menu_activo, ul.menu a:hover {
		background-color: transparent;
		border: none;
	}
}

@media screen and (max-width: 450px ) {
	.menu_bar {
		width: 10%;
	}
	#img_menu{
		background-image: url("../images/menu_2.png");
		height: 16px;
		width: 16px;
	}
}



.spinner {
	border: 4px solid rgba(0, 0, 0, 0.1);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border-left-color: #09f;
  
	animation: spin 1s ease infinite;
  }
  
  @keyframes spin {
	0% {
	  transform: rotate(0deg);
	}
  
	100% {
	  transform: rotate(360deg);
	}
  }
  
ul li a span, ul li button span{
    display: none;
}

ul li a:hover span, ul li button:hover span{
    display: initial;
	color: white;
}