/*======================================================*/
/* Default */
/*======================================================*/
*,html,body,canvas,img,map,area,div,span,table{

}
body{
	border-collapse: collapse;
	font-family: Arial;
	margin: 0;
	padding: 0;
	font-size:11px;
	overflow-x: hidden;
}
img{
	border: 0px;
}
table,td{
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0;
	padding: 0;
}
a{
	text-decoration:none;
	color: #FFF
}
li{
	padding-bottom: 5px;
}
/*---------------------------------------------*/
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-button { width:0px; height:0px; background-color: #7B8084; }
::-webkit-scrollbar-track {  background-color: #999; }
::-webkit-scrollbar-track-piece { background-color: #99A0A5; }
::-webkit-scrollbar-corner { background-color: #999;}
::-webkit-resizer { background-color: #666;}
::-webkit-scrollbar-thumb{
	width: 8px; 
	height:50px; 
	background:#444;
	background:linear-gradient(to right, #444, #222);
	border:1px solid #000; 
	border-radius: 6px;
	box-shadow: 1px 1px 2px 0px #222, inset -1px -1px 0px 0px rgba(255,255,255,0.2);
}
/*======================================================*/
/* Login */
/*======================================================*/
.logincontenedor{
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	background:  url('../img/bgmain.jpg');
	background-size: 100% 100%;
}
.login{
	background:rgba(255,255,255,0.7);
	position:absolute;
	width:400px;
	height:auto; /*330px;*/
	top:50%;
	left:50%;
	margin-top:-200px;
	margin-left:-200px;	
	font-size: 14px;
	color:#FFF;
	text-align: center;
	overflow:hidden;
	border-radius:15px;
	box-shadow: -1px 1px 6px 2px #000, 1px 1px 0px 0px #000, -1px -1px 0px 0px #000, inset 1px -1px 2px 0px rgba(70, 68, 68, 0.7);
}
.login .logotipo{
	margin-top:45px;
	margin-bottom:10px;
}
.login input{
	width:280px;
	height:30px;
	font-size:14px;
	padding:5px;
	margin-top: 8px;
	text-align:center;
	color:#CCC;
	background:rgba(0,0,0,0.8);
	outline:none;
	border:1px solid #222;
	border-radius:5px;
	box-shadow:inset 1px 1px 5px 0px rgba(0,0,0,0.5),1px 1px 0px 0px rgba(70,70,70,0.6);
}
.login input::-webkit-input-placeholder {
   color:#555;
   font-size: 12px;
}
.login .name{
	width:200px;
	padding:8px;
	display:inline-block;
	font-size:12px;
	color: #CCC;
	text-shadow: 1px 1px #000;
}
.login .result{
	display:block;
	font-weight:normal;
	padding:11px;
	font-size:12px;
}
.login .boton{
	display:inline-block;
	line-height:30px;
	font-weight:bold;
	font-size:15px;	
	color:#BDD8E3;
	text-shadow: 1px 1px 0px #222;
	width:268px;
	height:30px;
	padding:12px;
	padding-top:5px;
	padding-bottom:5px;
	margin-top:10px;
	cursor:pointer;
	background:#1f5fa7;
	border:1px solid #222;
	border-radius:5px;
	box-shadow:1px 1px 5px 0px #222,inset 1px 1px 0px 0px rgba(255,255,255,0.40),inset -1px -1px 0px 0px rgba(255,255,255,0.10);
}
.login .boton:hover{
	color:#9EC5D6;
	text-shadow: -1px -1px 0px #222;
	box-shadow:inset 1px 1px 5px 0px rgba(0,0,0,0.5),1px 1px 0px 0px rgba(255,255,255,0.50);
}
.login .boton:active{
	background:linear-gradient(#2C6781,#2C6781);
}

/*======================================================*/
/* Menu */
/*======================================================*/
.Menu{
	display:inline-block;
	position: absolute;
	top: 0;
	left: 0px;
	height: 39px;
	width: 100%;
	background: #222;
	border-bottom: 1px solid #000;
	z-index: 11;
}
.Menu .logoMenu{
	height: 31px;
	padding: 4px;
	float: left;
	background: #000;
}
.Menu .menuBtnShow{ 
	position: relative;
	display: none;
	height: 28px;
	text-align: center;
	top: 4px;
	margin-left: 10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 2px;
	cursor: pointer;
	color: white;
	font-size: 22px;
	border: 1px solid #CCC;
	border-radius: 10px;
}
.Menu .btnMenuConte{
	display:inline-block;
	position: relative;
	width: calc(100% - 240px);
	height: 0px;
	vertical-align: top;
	background: #222;
}
.Menu .btnMenuConte .btnMenu{
	display:inline-block;
	position: relative;
	border-left: 1px solid #333;
	border-right: 1px solid #000;
	padding: 0px 15px;
	height: 40px;
	color: #fff;
	cursor: pointer;
	float: left;
	line-height: 41px;
}
.Menu .btnMenuConte .btnMenu:hover{
	background: #000;
}
.Menu .infoMenu{
	display: inline-block;
	position: absolute;
	text-align: right;
	right: 0px;
	top: 0px;
}
.Menu .infoMenu .sessionMenu{
	display:inline-block;
	position: relative;
	color: #FFF;
	vertical-align: 6px;
}
.Menu .infoMenu .logoutMenu{
	height: 30px;
	padding-top: 7px;
	margin-left: 5px;
	margin-right: 5px;
	cursor: pointer;
}
.Menu #toggleMenu[type="checkbox"]:checked ~ .btnMenuConte {
	display: inline-block;
	height: auto;
}
@media only screen and (max-width:1020px) 
{
	.Menu .menuBtnShow{ 
		display: inline-block;
	}
	.Menu .btnMenuConte{
		position: fixed;
		left: 0px;
		top: 41px;
		width: 100%;
		height: 0px;
		overflow: hidden;
		z-index: 5;
	}
	.Menu .btnMenuConte .btnMenu{
		width: 100%;
		text-align: left;
		border: none;
	}
}
/*======================================================*/
/* Sub-Menu */
/*======================================================*/
.SubMenu{
	display:inline-block;
	position: absolute;
	top: 40px;
	left: 0px;
	height: 34px;
	width: 100%;
	background: #444;
	border-bottom: 1px solid #000;
	overflow: hidden;
}
.SubMenu .btn1{
	display: inline-block;
	position: relative;
	padding: 6px 10px;
	margin-top: 4px;
	margin-left: 5px;
	border: 1px solid #000;
	border-radius: 4px;
	color: #000;
	background: #CCC;
	cursor: pointer;
}
.SubMenu .btn1:hover{
	background: #888;
}
.SubMenu .select1{
	display: inline-block;
	position: relative;
	padding: 5px 10px;
	margin-top: 4px;
	margin-left: 5px;
	border: 1px solid #000;
	border-radius: 4px;
	cursor: pointer;
	vertical-align:bottom;
	font-size:11px;
	background:#111;
	color:#FFF;
}

/*======================================================*/
/* Componente */
/*======================================================*/
.mainConte{
	display:inline-block;
	position: absolute;
	top: 75px;
	left: 0px;
	height: calc(100% - 75px);
	width: 100%;
	background: #111;
	overflow: hidden;
}
/*------------------------*/
.btnVerde{
	position: relative;
	display: inline-block;
	padding: 15px;
	margin-top: 4px;
	margin-left: 5px;
	border: 1px solid #000;
	border-radius: 4px;
	color: #000;
	background: #4dd18f;
	cursor: pointer;
}
.btnVerde:hover{
	background: #888;
}
/*------------------------*/
.btnRojo{
	position: relative;
	display: inline-block;
	padding: 15px;
	margin-top: 4px;
	margin-left: 5px;
	border: 1px solid #000;
	border-radius: 4px;
	color: #000;
	background: #d1724d;
	cursor: pointer;
}
.btnRojo:hover{
	background: #888;
}
/*------------------------*/
.btnAmarillo{
	position: relative;
	display: inline-block;
	padding: 15px;
	margin-top: 4px;
	margin-left: 5px;
	border: 1px solid #000;
	border-radius: 4px;
	color: #000;
	background: #d1ae4d;
	cursor: pointer;
}
.btnAmarillo:hover{
	background: #888;
}
/*------------------------*/
.btnAzul{
	position: relative;
	display: inline-block;
	padding: 15px;
	margin-top: 4px;
	margin-left: 5px;
	border: 1px solid #000;
	border-radius: 4px;
	color: #000;
	background: #7badeb;
	cursor: pointer;
}
.btnAzul:hover{
	background: #888;
}

/*======================================================*/
/* Notificacion */
/*======================================================*/
.notificacion{
	position: relative;
	display: inline-block;
	vertical-align:top;
}
.notificacion .imageAlarma{
	height: 20px;
	padding: 10px;
	padding-right:12px;
	cursor: pointer;
}
.notificacion .countNotificaion{
	position: absolute;
	display: inline-block;
	top: 25px;
	right: -4px;
	background: #F00;
	color: #FFF;
	padding: 2px 4px;
	border-radius: 7px;
	border: 1px solid #000;
}
.notificacion .conteNotificaion{
	position: fixed;
	display: inline-block;
	top: 46px;
	right: 18px;
	color: #000;
	max-height: calc(100% - 55px);
   overflow: auto;
}
.notificacion .popup{
	position: relative;
	width: 210px;
	padding: 8px 20px;
	padding-right: 25px;
	margin-bottom: 6px;
	margin-right: 10px;
	background: white;
	border: 1px solid #000;
	border-radius: 5px;
	cursor: pointer;
	font-family: monospace;
	text-align: left;
	box-shadow: 3px 3px 0px 0px #000;
}
.notificacion .popup .msg{
}
.notificacion .popup .close{
	position: absolute;
	top: 4px;
	right: 7px;
	font-weight: bold;
	float: right;
	cursor: pointer;
	font-size: 13px;
	padding: 3px 5px;
}
.notificacion .popup .close:hover{
	color: #F00;
}

/*======================================================*/
/* Ordenes */
/*======================================================*/
.Ordenes{
	display:inline-block;
	width: 50%;
	height: 100%;
	float:left;
	background: #AAA;
	font-family: Lucida Console;
}
.OrdenesBackground {
	display: none;
}
.Ordenes60{
	width: 60%;
}
.OrdenesLoader {
	display: inline-block;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 10;
	overflow: auto;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
}
.OrdenesLoader img{
	display: inline-block;
	position: absolute;
	height: 180px;
	top: 50%;
	top: 50%;
	margin-top: -90px;
	margin-left: -90px;
}
/*--------------------------------*/
/* Ordenes-Datos*/
/*--------------------------------*/
.OrdenesDatos{
	display: inline-block;
	width: calc(50% - 80px);
	height: calc(100% - 40px);
	float: left;
	background: #111;
	font-family: Lucida Console;
	padding: 40px;
	padding-top: 20px;
	overflow: auto;
}
.OrdenesDatos .title{
	color: #cf8b4f;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 10px;
	font-size: 13px;
	font-weight: bold;
}
.OrdenesDatos .panel{
	position: relative;
	display: inline-block;
	width: 100%;
	min-height: 80px;
	background: #000;
	border: 1px solid #767272;
	border-radius: 7px;
	overflow: hidden;
}
.OrdenesDatos .btn1{
	position: relative;
	display: inline-block;
	padding: 6px 10px;
	margin-top: 4px;
	margin-left: 5px;
	border: 1px solid #767272;
	border-radius: 4px;
	color: #fff;
	background: #4dd18f;
	background: #30373c;
	cursor: pointer;
}
.OrdenesDatos .btn1:hover{
	background: #888;
}
.OrdenesDatos40{
	width: calc(40% - 20px);
}
/*------------------*/
.OrdenesDatos2{
	display: inline-block;
	width: calc(50% - 20px);
	height: calc(100% - 19px);
	float: left;
	background: #111;
	font-family: Lucida Console;
	padding: 10px;
	overflow: auto;
}
.OrdenesDatos2 .title{
	color: #cf8b4f;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 10px;
	font-size: 13px;
	font-weight: bold;
}
.OrdenesDatos2 .panel{
	position: relative;
	display: inline-block;
	width: 100%;
	min-height: 80px;
	background: #000;
	border: 1px solid #767272;
	border-radius: 7px;
	overflow: hidden;
}
.OrdenesDatos2 .btn1{
	position: relative;
	display: inline-block;
	padding: 6px 10px;
	margin-top: 4px;
	margin-left: 5px;
	border: 1px solid #767272;
	border-radius: 4px;
	color: #fff;
	background: #4dd18f;
	background: #30373c;
	cursor: pointer;
}
.OrdenesDatos2 .btn1:hover{
	background: #888;
}
.OrdenesDatos240{
	width: calc(40% - 20px);
}
/*------------------*/
.file{
	position: relative;
	display: inline-block;
	width: 250px;
	margin: 5px;
	padding: 5px;
	background: #BBB;
	border-radius: 7px;
	vertical-align:top;
}
.file .preview{
	background: #a98211;
	border-radius: 4px;
	border: 1px solid #816411;
	text-align: center;
	margin-bottom: 7px;
	overflow: hidden;
	max-height: 70px;
}
.file .preview .ext{
	position: relative;
	display: inline-block;
	padding: 10px;
	color: #FFF;
	font-size: 15px;
	font-weight: bold;
	text-transform: uppercase;
}
.file .info{
	
}
.file .info .nombre{
	position: relative;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 4px;
	font-weight: bold;
}
.file .info .fecha{
	position: relative;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 4px;
	color: #a74c09;
}
.file .info .modulo{
	position: relative;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 4px;
	color: #0d4fcb;
}
.file .info .usuario{
	position: relative;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 4px;
	color: #205a2b;
}
.file .info .extencion{
	position: relative;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 4px;
	color: #9d30a9;
}
.file .info .btn2{
	position: relative;
	display: inline-block;
	width: calc(43% - 25px);
	padding: 6px 10px;
	margin-top: 4px;
	border: 1px solid #000;
	border-radius: 4px;
	text-align: center;
	color: #000;
	cursor: pointer;
}
.file .info .btn2:hover{
	background: #CCC;
}
.file .info .btn2:active{
	background: #888;
}

@media only screen and (max-width: 1300px) 
{
	.Ordenes, .Ordenes60{
		width: 100%;
	}
	.OrdenesBackground{
		display: inline-block;
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		z-index: 1;
		overflow: auto;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.3);
		background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 4px, rgba(0, 0, 0, 0.4) 4px, rgba(0, 0, 0, 0.4) 8px);
	}
	.OrdenesDatos, .OrdenesDatos40{
		position: fixed;
		top: 50px;
		left: 20px;
		width: calc(100% - 120px);
		height: calc(100% - 110px);
		z-index: 2;
		border: 3px solid #12a1c5;
		border-radius: 10px;
	}
}