/**
* @author  Rolan Benavent
* @version 1.0
*/
@CHARSET "UTF-8";

:root{
	--shadow-color: #050505;

	/*menu*/
	--fontawesome: "Font Awesome 5 Free";

	/*general*/
	--font-family: 'Catamaran', sans-serif;
	--background-color: #333;
	--background-header: #fff;
	--background-content-color: #f4f4f4;
	--text-color: #333;
	--text-color-hover: #fff;
	--background-color-hover: #333;
	--background-title: #023368;

	--disabled-color: #888;
}

* {
	font-family: var(--font-family);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


body, html{
	margin: 0; padding: 0; width: 100%; height: 100%;
	background-color: var(--background-content-color);
}

.login_container{
	margin: 0; padding: 0; width: 100%; height: 100%;
	background-color: var(--background-color); display: table;
}
div.login{
	display: block; width: 400px; margin: 100px auto 200px auto;
	background-color: var(--background-content-color); padding: 10px 20px;
	border-radius: 10px; box-shadow: 5px 0px 10px 0px var(--shadow-color);
}
div.login img{
	display: block; margin: 10px auto 30px auto;
}
div.login form fieldset{
	border: none; width: 100%;
}
div.login form label{
	color: var(--text-color); display: block; width: 110px; float: left; text-transform: uppercase;
	line-height: 30px; font-size: 0.8em;
}
div.login form input{
	color: #000; display: block; width: calc(100% - 110px); float: left;
	padding: 5px 10px; border: 1px solid #2c55a2; border-radius: 5px;
	background-color: var(--background-content-color);
}
div.login form button{
	color: var(--background-content-color); display: block; width: calc(100% - 110px);
	margin: 10px auto; cursor: pointer;
	padding: 10px 10px; border: 1px solid #2c55a2; border-radius: 5px;
	box-shadow: 5px 0px 10px 0px var(--shadow-color); background-color: #2c55a2;
}
div.login form button:hover{
	background-color: #61c5e7; color: #2c55a2; border: 1px solid #61c5e7;
}

.general_container{
	margin: 0; padding: 0; width: 100%; height: 100%;
	background-color: var(--background-content-color); display: table;
}

.general_container header{
	display: -webkit-box; width: 100%; margin: 0;
	background-color: var(--background-header); padding: 0;
}

.general_container header .header{
	display: -webkit-box; width: 80%; margin: 0 auto; padding: 10px 20px;
}

.general_container header > img{
	display: block; float: left;
}

.general_container header > div.menu{
	display: block; float: right; margin-top: 10px;
}

div.menu ul{
	list-style: none;
}
div.menu ul li{
	cursor: pointer; display: inline-block; float: left;
}
div.menu ul li a{
	display: inline-block; padding: 10px 30px;
	text-decoration: none; color: var(--text-color);
}
div.menu ul li a:hover,
div.menu ul li a.active{
	color: var(--text-color-hover); background-color: var(--background-color-hover);
}
.general_container div.content{
	width: 80%; margin: 0 auto 20px auto; min-height: 100%;
	background-color: var(--background-content-color); padding: 10px 20px;
}
div.content table{
	padding: 0; margin: 0; width: 100%; font-size: 12px;
}
div.content tr:hover{
	color: var(--text-color-hover); background-color: var(--background-color-hover);
}
div.content tr td{
	padding: 5px;
}
div.content tr td i{
	cursor: pointer; font-size: 1.2em;
}
div.content tr td.numeric,
div.content tr td.bool{
	text-align: center;
}
i.fas.fa-times{
	color: #f00;
}
i.fas.fa-check-circle{
	color: #0a0;
}
i.fas.fa-link{
	color: #ccc; margin-left: 20px;
}
i.fas.fa-link:hover{
	color: #fff;
}

div.title{
	margin: 0 auto; line-height: 100px; font-weight: bold; font-family: 'Oswald', sans-serif;
	background-color: var(--background-title); height: 100px; display: table; width: 100%;
	text-align: center; text-transform: uppercase; color: var(--text-color-hover); vertical-align: middle;
	font-size: 2em;
}
div.title.h50{
	height: 50px; line-height: 50px; font-size: 1.2em;
}

form fieldset{
	border: none; text-align: center; font-size: 1.2em;
}
form fieldset.button button{
	padding: 5px 30px; font-size: 1.2em; background-color: var(--background-title); color: var(--text-color-hover); cursor: pointer;
	border: 1px solid var(--background-title); border-radius: 5px; display: inline-block;
}
form fieldset.button button:disabled{
	background-color: var(--disabled-color); border: 1px solid var(--disabled-color);
}

p.center{
	font-size: 1.2em; text-align: center;
}

@media only screen and (max-width:700px){
	div.title{
		line-height: 50px; height: 50px; font-size: 1.2em;
	}
	.general_container div.content{
		width: 100%; padding: 5px 8px; font-size: 0.9em;
	}
}