@font-face {
	font-family: "Nexa";
	src: url('font/Nexa_Bold.otf') format('otf'),
	url('font/Nexa_Bold.oft') format('otf');
}

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px  #a18262; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px  #ffc107;
}

.excelente{background-color: #00f100;}
.bueno{background-color: #f3ff00;}
.regular{background-color: #ffa300;}
.malo{background-color: #ff0000;}

.fondo-login{
	background-color: #F8E3A4;
}

.img-fluid{
	height: 30px;
}

.fondo-login img{margin-top: 5%;}

.login{
	width: 30%; 
	margin-left: 35%;
	margin-right: 35%
}

.login input{
	color: #6F4534;
}

#pass img{
	/*background-color: #F8E3A4;*/
	height: 30px;
}


.login input[type=submit]{
	background-color: #6F4534;
	color: white;
}



.borde{
	border: 5px solid #6F4534; 
	border-radius: 50px;
}
/* apatir de aqui se modifica */
.nav-suerior{
	background-color: #F5C943;
	height: 20%;
}

.nav-suerior img{
	width: 60%; 
	margin-top: -2%;
}

.us-sa{
	align-content: center;
	height: 100%;
	width: 25%;

}

.us-sa input#iduser{
	background-color: #EDAB11;
	border: none;
	color: #6F4534;
	margin-top: 15%;
	float: right
}

.us-sa input#salir{
	background-color: #6F4534;
	border: none;
	color: white;
	margin-top: 15%;
	float: right
}

.jobzone{
	height: 80%;
}

.show-bar{
	display: none;
}

.bar{
	background-color: #6F4534;
	padding: 0;
	width: 15%;
	height: 100%;
}

.nav-link {
	color: white;
	font-weight: 700;
	font-family: Nexa, sans-serif;
}

.nav-link:hover {
	background-color: #a18262;
	color: white;
	font-weight: 700;
	font-family: Nexa, sans-serif;
}

.bar2{
	background-color: #6F4534;
	color: white;
	font-weight: 700;
	font-family: Nexa, sans-serif;
}

.bar2:hover{
	background-color: #a18262;
	color: white;
	font-weight: 700;
	font-family: Nexa, sans-serif;
}

.activ{
	background-color: #EDAB11;
	color: black;
	border: 1px solid #a18262;
}

.activ:hover{
	background-color: #EDAB11;
	color: white;

}

a .activ{
	background:url(../img/grafica.png)
}

.activ a:hover{
	background:url(../img/grafica_over.png)

}

.banner{ /*hacer responsivo*/
	height: 5%; 
	border-left: 1px solid #a18262;
	font-weight: 700;
	font-family: Nexa, sans-serif;
}

.content{
	width: 85%; height: 100%;
	overflow-y: scroll; 
	padding: 5%;
}


.encabezado{
	border-bottom: 3px solid #ffc107;

}

.form{
	width: 50%; 
	margin-left: 25%;
	margin-right: 25%;
	margin-top: 10%;
}

.buscar{
	background-color: #F5C943;
	color: white;
	border: 1px #F5C943;;
}

@media only screen and (max-device-width: 576px) {
	.fondo-login img{width: 100%;}
	.login{width: 70%; margin-left: 15%; margin-right: 15%; margin-top: 15%;}
	.login input{height: 5%; border-radius: 10px; font-size: 50px}
	.login input[type=submit]{height: 5%; width: 50%; border-radius: 10px; font-size: 50px;}
	.nav-suerior{height: 5%;}
	.nav-suerior img{width: 50%; }
	.us-sa input{height: 10%;}
	.show-bar{width: 10%; height: 10%; display: flex; background-color:#6F4534; }
	.bar{width: 100%; height: 50%; text-align: center; font-size: 50px; display: none;}
	.content{width: 100%; height: 100%;overflow-y: scroll; padding: 5%;}
}


@media only screen and (max-device-width: 450px) {
	.fondo-login img{width: 80%;}
	.login{width: 70%; margin-left: 15%; margin-right: 15%; margin-top: 15%;}
	.login input{height: 5%; border-radius: 10px; font-size: 50px}
	.login input[type=submit]{height: 5%; width: 50%; border-radius: 10px; font-size: 50px;}
	.nav-suerior{height: 10%;}
	.nav-suerior img{width: 70%; }
	.us-sa input{width: 50%; height: 30%; font-size: 20px;}
	.show-bar{width: 10%; height: 5%; display: flex; background-color:#6F4534; }
	.show-bar img{width: 100%; height: 90%;}
	.bar{width: 100%; height: 50%; text-align: center; font-size: 50px; z-index: 99999; position: absolute; display: none;}
	.content{width: 100%; height: 100%;overflow-y: scroll; padding: 5%;}
}