html{font-size:100%; font-family:Calibri;}
img {max-width: 100%; height: auto;}
body{margin:0; padding:0;}
.bodyLogin{
	background-color:#0a5da9;
}
.fade-in {
	animation: fadeIn ease 1s;
}
@keyframes fadeIn {
	0% {opacity:0; margin-top:-20%;}
	100% {opacity:1; margin-top:0%;}
}
.fade-out {
	animation: fadeOut ease 1s;
}
@keyframes fadeOut {
	0% {opacity:1; margin-top:0%;}
	100% {opacity:0; margin-top:-20%;}
}
.loginBlock {
	width:100%;
	margin-top:1.5rem;
	padding-top:1.5rem;
	display:flex;
}
.inputLogin{
	font-size:1.3rem;
	width:90%;
	padding:0.3rem 0.5rem;
	border:1px solid #ddd;
	border-radius:5px;
	transition:All .3s;
	margin-bottom:1rem;
}
.inputLogin:focus{
	box-shadow:0px 0px 0px 0.2rem rgba(0,123,255,0.25);
	border:1px solid rgba(0,123,255,0.25);
}
.botonLogin{
	cursor:pointer;
	font-size:1.3rem;
	width:50%;
	padding:0.3rem 0.5rem;
	border:1px solid #ddd;
	border-radius:5px;
	transition:All .3s;
	margin-bottom:1rem;
	background-color:white;
	color:#0a5da9;
}
.botonLogin:hover{
	background-color:#0a5da9;
	color:white;
	border:1px solid #0a5da9;
}
.modal{
	position:fixed;
	top:70px;
	z-index:100;
	width:100%;
	background-color:rgba(150, 240, 150, 0.95);
	margin:0px;
	padding:20px;
	display:none;
	text-align:center
}

.downloadImage{
	width:30px;
	height:30px;
	cursor:pointer;
	background:url("../img/download.svg") no-repeat;
}
.downloadImage:hover{
	background:url("../img/download-over.svg") no-repeat;
}
select{
	appearance: none;
	color:#777;
	font-size:1.3rem;
	padding:0.3rem 1rem;
	border:1px solid #ddd;
	border-radius:5px;
	transition:All .3s;
}
select:focus{
	box-shadow:0px 0px 0px 0.2rem rgba(0,123,255,0.25);
	border:1px solid rgba(0,123,255,0.25);
}
#botonAsignar{
	font-size:1.2rem;
	cursor:pointer;
	color:white;
	padding:0.3rem 0.6rem;
	background-color:lightgreen;
	border-radius:5px;
	transition:All .3s;
}
#botonAsignar:hover{
	box-shadow:0 0 3px 3px #lightgreen;
}
.navBarDiv{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:40px;
	color:white;
	background:linear-gradient(to bottom, rgba(82,132,224,1) 0%, rgba(82,132,224,1) 1%, rgba(38,91,181,1) 52%, rgba(27,72,154,1) 100%);
	padding:5px;
	vertical-align:middle;
	box-shadow:1px 2px 5px 1px #ddd;
	font-size:24px;
}
.navBarDiv img{
	vertical-align:middle;
	width:30px;
}
#sideMenu{
	height:100%;
	width:0;
	position:fixed;
	z-index:1;
	top:50px;
	left:0;
	background-color:#111;
	overflow-x:hidden;
	transition:0.5s;
	padding-top:10px;
	max-width:20rem;
}
#sideMenu img{
	width:80px;
}
#sideMenu a {
	padding: 4px 4px 4px 2rem;
	text-decoration: none;
	font-size: 1.2rem;
	color: #818181;
	display: block;
	transition: 0.3s;
}
#sideMenu a:hover {
	color: #f1f1f1;
}
#sideMenu .active {
	padding-left:2.2rem;
	color: #f1f1f1;
}
#sideMenu p {
	margin:0;
	padding: 4px 4px 4px 8px;
	text-decoration: none;
	font-size: 1.1rem;
	color: white;
	display: block;
}
#sideMenu .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}
.nueva{
	display:inline-block;
	color:white;
	cursor:pointer;
	margin-left:5rem;
	transition:all .5s;
}
.nueva:hover{
	color:red;;
}
.tabla{
	font-size:13px;
	border-collapse:collapse;
}
.tabla th{
	color:#aaa;
}
.tabla tr{
	transition:all .5s;
}
.tabla tr:not(:first-child):hover{
	background-color:#0a5da9;
	color:white;
}
.tabla td{
	padding:10px 5px;
	border-bottom:1px solid #ddd;
}
.tdPendiente{
	background-color:yellow;
	border:1px solid red;
	color:red;
	font-size:0.7rem;
	padding:0px !important;
	padding-left:10px !important;
	cursor:pointer;
}
.tdRechazado{
	background-color:red;
	border:1px solid red;
	color:white;
	font-size:0.7rem;
	padding:0px !important;
	padding-left:10px !important;
	cursor:pointer;
}
.tdAprobado{
	background-color:green;
	border:1px solid green;
	color:white;
	font-size:0.7rem;
	padding:0px !important;
	padding-left:10px !important;
	cursor:pointer;
}
@media screen and (max-width: 1024px) 
{
	.navBarDiv{
		font-size:14px;
	}
	#modal-content{
		top:35%;
	}
}
@media (min-width:0px) { html {font-size:0.6rem;} } 
@media (min-width:768px) { html {font-size:0.8rem;} } 
@media (min-width:960px) { html {font-size:1rem;} } 
@media (min-width:1100px) { html {font-size:1.2rem;} }

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 90%; padding:3%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) 
{
	[class*="col-"] 
	{
		width:90%;
		padding:5%;
	}
}