/******************************************
1. Import font and styles]
******************************************/
@import url('https://fonts.googleapis.com/css?family=Great+Vibes|Montserrat|Roboto|Anton|Archivo+Black|Passion+One');


/******************************************
3. General
******************************************/
html{
	overflow: hidden;
}
body {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	background: #fff;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
a {
	color: #333;
	transition: all .4s ease;
}
a:hover, :hover {
	text-decoration: none;
	transition: all .4s ease;
}
small {
	font-size: 85%;
	font-weight: normal;
	text-transform: lowercase;
	color: #999999;
}
img {
	max-width: 100%;
}
:focus {
	outline: none;
	border: none;
}
div{
	/* border:1px solid red; */
}
label{
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
}
.titulo{
	font-family: 'Montserrat';
	font-size: 18px;
	font-weight: bold;
}
.titulo_panel{
	font-family: 'Montserrat';
	font-size: 30px;
	font-weight: bold;
	color: white;
}

.caja{
	margin-left:20%;margin-right:20%;width: 60%;border:1px solid #000066;border-radius:25px;padding:20px;
}

input{
	width:100%;
	border:0px solid gray;
	background-color: #FFF;
	height:30px;
	font-size:14px;	
}
input:hover{
	width:100%;
	border:0px solid gray;
	background-color: #FFF;
	height:30px;
	font-size:14px;
	color:black;	
}

input[type=submit]{
	width:100%;
	border:none;
	height:35px;
	color:white;
	display: inline-block;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 0.375rem 0.75rem;
	font-size: 18;
	line-height: 1.5;
	border-radius: 0.25rem;
	background-color: #1e4371;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type=submit] :hover{
	width:100%;
	border:none;
	height:35px;
	color:white;
	display: inline-block;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 0.375rem 0.75rem;
	font-size: 18;
	line-height: 1.5;
	border-radius: 0.25rem;
	background-color: #0f2239;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.logo{
	margin-top: 40px;
	margin-bottom: 35px;
	height:150px;
}
.logo_panel{
	height:60px;
}

.mensaje{
	font-family: 'Montserrat';
	font-size: 24px;
	color: darkred;
	text-align: center;
}
.ico{
	font-size: 32px;
	color: #000066;
}
.cliente{
	font-family: 'Montserrat';
	font-size: 18px;
	font-weight: bold;
	text-align:left;
	background-color: #363636;
	height:30px;
	padding-top:5px;
	padding-left:25px;
	color:white;
}
#contenedor{
	overflow: hidden;
	height: 100%;
	/* border: 1px solid green;*/
	position: absolute;
	width: 100%;
}

#contenedor_panel{
	overflow: auto;
	height: calc( 100% - 127px);
	/* border: 1px solid green;*/
	position: absolute;
	top: 110px;
	left: 3%;
	width: 94%;
	z-index: 100;
}
#ventana_panel{
	overflow: hidden;
	height: calc( 100% - 127px);
	/* border: 1px solid green;*/
	position: absolute;
	top: 110px;
	left: 30000px;
	width: 100%;
	z-index: 500;
	background-color: rgba(0,0,0,0.5);
	display: block;
}

#subventana_panel{
	overflow: auto;
	height: auto;
	width: auto;
	min-width: 350px;
	min-height: 250px;
	padding: 5px 10px 5px 10px;
	max-height: 90%;
	max-width: 90%;
	display:block;
	position: absolute;
	z-index: 800;
	background-color: white;
	border-radius: 10px;
	-webkit-box-shadow: 6px 4px 5px 0px rgba(189,179,189,1);
	-moz-box-shadow: 6px 4px 5px 0px rgba(189,179,189,1);
	box-shadow: 6px 4px 5px 0px rgba(189,179,189,1);
}
.cabecera{
	text-align: left;
	font-size: 12px;
	color: black;
	background-color: #dcdcdc;
	height:50px;
	padding-top:16px;
	padding-left: 0px;
}
.lineas_0{
	background-color: white;
	border-bottom: 1px solid #ccc;
	clear: both;
	padding-top: 10px;
	margin: 0px;
	padding-left: 0px;	
	margin-bottom: 2px;
}
.lineas{
	text-align: left;
	padding-left: 4px;
	font-size: 12px;
	color: black;
	background-color: white;
	min-height:30px;
	padding-top:6px;
}
.lineas_f{
	padding-right: 20px;
	text-align: right;
	padding-left: 4px;
	font-size: 12px;
	color: black;
	background-color: white;
	min-height:30px;
	padding-top:6px;
}

.subtitulo{
	color:white;
	text-align: center;
	font-size: 14px;	
}
.icono{
	font-size: 18px;color:#e10916;cursor:pointer;margin-right:20px;
}
.textoico{
	font-size: 12px;color:#e10916;cursor:pointer;font-family: 'Montserrat';
}
.cliente_crud{
	height:30px;color:white;background-color: darkred;clear:both;padding-top:5px;font-size:16px
}
.titulo_crud{
	height:20px;
	background-color: white;
	color:gray;
	text-align: left;
	padding-left: 10px;
	padding-top: 2px;
	font-size: 16px;
}
#mensajecrud{
	width:75%;color:white;padding:5px;font-size: 12px;float:left;visibility: hidden;text-align:center;transition: all 2s;
}
.conservers{
	text-align: center;
	color:black;
}
.bigico{
	font-size: 60px;
	color: #000000;
	cursor: pointer;
}
.bigicono{
	font-size: 60px;
	color: #cdcdcd;
	cursor: pointer;
}
.bigico:hover{
	font-size: 60px;
	color: #000000;
	cursor: pointer;
}
.cajaserver{
	height:150px;
	width:150px;
	border:1px solid #3366ff;
	border-radius:150px;
	margin: 10px;
    /* left: calc( ( 100% - 150px ) / 2); */
    float: left;
}
.cajaserver1{
	height:150px;
	width:150px;
	border:1px solid #3366ff;
	border-radius:150px;
	margin: 10px;
    float:left;
}
.cajaserver2{
	height:150px;
	width:150px;
	border:1px solid #3366ff;
	border-radius:150px;
	margin: 10px;
    left: calc( ( 100% - 150px ) / 2.5);
}
.cajaserver3{
	height:150px;
	width:150px;
	border:1px solid #3366ff;
	border-radius:150px;
	margin: 10px;
    left: calc( ( 100% - 150px ) / 3);
}
.cajaserver4{
	height:150px;
	width:150px;
	border:1px solid #3366ff;
	border-radius:150px;
	margin: 10px;
    left: calc( ( 100% - 150px ) / 3.5);
}

.cajaserver5{
	height:150px;
	width:150px;
	border:1px solid #3366ff;
	border-radius:150px;
	margin: 10px;
    left: calc( ( 100% - 150px ) / 5);
}
.cajaserver6{
	height:150px;
	width:150px;
	border:1px solid #3366ff;
	border-radius:150px;
	margin: 10px;
    left: calc( ( 100% - 150px ) / 8);
}
.cajaserver9{
	height:150px;
	width:150px;
	border:1px solid #3366ff;
	border-radius:150px;
	margin: 10px;
    float: left;
}
.cajass:hover{
	background-color: #BBCCFF;
	color:#3366ff;
	cursor: pointer;
}
.bott{
	color:#000;
	background-color: rgba(0, 102, 255, 0.5);
	border-radius: 10px;
	height: 45px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 16px;
	padding-top: 4px;
	border: 4px solid #FFF;
}
.bott:hover{
	color:#000;
	background-color: rgba(0, 102, 255, 1);
	border-radius: 10px;
	height: 45px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 16px;
	padding-top: 4px;
	border: 4px solid #FFF;
}

.btn{
	background-color: #ffc266;
	border-radius: 25px;
	height: 25px;
	width: 50px;
	padding-left: 10px;
	padding-right: 10px;
	float: right;
	padding-top: 3px;
}
.btn:hover{
	background-color: #e68a00;
	border-radius: 25px;
	height: 25px;
	width: 50px;
	padding-left: 10px;
	padding-right: 10px;
	float: right;
	padding-top: 3px;
}
.notificacion{
	text-align: center;color:#FFF;font-size:14px;height:30px;
}
@media screen and (min-width:1200px){
	
}
@media screen and (max-width:1024px){
.logo{
	margin-top: 100px;
	margin-bottom: 35px;
	height:150px;
}
input{
	width:100%;
	border:1px solid gray;
	background-color: #FFF;
	height:35px;
	font-size:18px;	
}
#contenedor_panel{
	overflow: auto;
    height: calc( 100% - 135px);
    /*border: 1px solid maroon;*/
    position: absolute;
    top: 111px;
    left: 3%;
    width: 94%;
    z-index: 100;
}
.titulo_crud{
	height:30px;
	background-color: white;
	color:gray;
	text-align: left;
	padding-left: 10px;
	padding-top: 2px;
	font-size: 13px;
}
}
@media screen and (max-width:980px){

}
@media screen and (max-width:768px){
.logo{
	margin-top: 150px;
	margin-bottom: 35px;
	height:150px;
}
input{
	width:100%;
	border:1px solid gray;
	background-color: #FFF;
	height:35px;
	font-size:18px;	
}
#contenedor_panel{
	overflow: auto;
    height: calc( 100% - 160px);
    /*border: 1px solid maroon;*/
    position: absolute;
    top: 114px;
    left: 3%;
    width: 94%;
    z-index: 100;
}
.cabecera{
	text-align: left;
	font-size: 12px;
	color: black;
	background-color: #dcdcdc;
	height:50px;
	padding-top:16px;
	padding-left: 20px;
}
.lineas_0{
	background-color: white;
	border-bottom: 1px solid #ccc;
	clear: both;
	padding-top: 16px;
	margin: 0px;
	padding-left: 20px;	
	margin-bottom: 2px;
}
.lineas{
	text-align: left;
	padding-left: 4px;
	font-size: 12px;
	color: black;
	background-color: white;
	min-height:50px;
	padding-top:16px;
	padding-left: 20px;
}
.lineas_f{
	padding-right: 20px;
	text-align: right;
	padding-left: 4px;
	font-size: 12px;
	color: black;
	background-color: white;
	min-height:30px;
	padding-top:16px;
}
.titulo_crud{
	height:35px;
	background-color: white;
	color:gray;
	text-align: left;
	padding-left: 10px;
	padding-top: 2px;
	font-size: 12px;
	margin-bottom: 10px;
}
}
@media screen and (max-width:414px){
#contenedor_panel{
	overflow: auto;
    height: calc( 100% - 165px);
   /* border: 1px solid maroon;*/
    position: absolute;
    top: 113px;
    left: 3%;
    width: 94%;
    z-index: 100;
}
}
@media screen and (max-width:360px){
	input{
		width:100%;
		border:none;
		background-color: #DDD;
		height:35px;
		font-size:14px;	
	}
	input[type=submit]{
		width:100%;
		border:none;
		height:35px;
		color:white;
		display: inline-block;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		padding: 0.375rem 0.75rem;
		font-size: 18;
		line-height: 1.5;
		border-radius: 0.25rem;
		background-color: #1e4371;
		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}

	input[type=submit] :hover{
		width:100%;
		border:none;
		height:35px;
		color:white;
		display: inline-block;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		padding: 0.375rem 0.75rem;
		font-size: 18;
		line-height: 1.5;
		border-radius: 0.25rem;
		background-color: #0f2239;
		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}
	.caja{
		margin-left:1%;margin-right:1%;width: 98%;border:1px solid #000066;border-radius:25px;padding:10px;
	}
	.logo{
		margin-top: 25px;margin-bottom: 25px;height:150px;
	}
	.titulo{
		font-size: 20px;
		margin-top: 0px;
		text-align: center;
	}
	.titulo_panel{
		font-family: 'Montserrat';
		font-size: 20px;
		font-weight: bold;
		color: white;
		margin-top: 0px;
		text-align: center;
	}
	.logo_panel{
		height:60px;
	}
	.cliente{
		font-family: 'Montserrat';
		font-size: 16px;
		font-weight: bold;
		text-align:center;
		background-color: #363636;
		height:25px;
		margin-top:-5px;
		color:white;
	}
	#contenedor_panel{
		overflow: auto;
	    height: calc( 100% - 160px);
	    /*border: 1px solid green;*/
	    position: absolute;
	    top: 113px;
	    left: 0px;
	    width: 100%;
	}
	.cabecera{
		text-align: left;
		font-size: 12px;
		color: black;
		background-color: rgba(0,0,0,0.3);
		height:30px;
		padding-top:6px;
		padding-left: 5px;
		border-bottom: 1px solid #FFF;
		margin-left: 6px;
	}
	.lineas_0{
		background-color: white;
		border-bottom: 1px solid #999;
		clear: both;
		padding-top: 10px;
		margin: 0px;
		padding-left: 0px;	
		margin-bottom: 2px;
	}
	.lineas{
		text-align: left;
		padding-left: 4px;
		font-size: 12px;
		color: black;
		background-color: rgba(0,0,0,0.15);
		min-height:30px;
		padding-top:6px;
		border-bottom: 1px solid #FFF;
		margin-right: -6px;
	}
	.lineas_f{
		padding-right: 20px;
		text-align: right;
		padding-left: 4px;
		font-size: 12px;
		color: black;
		background-color: #FFF;
		min-height:30px;
		padding-top:6px;
		border-bottom: 1px solid #FFF;
	}
	#subventana_panel{
		overflow: auto;
		height: auto;
		width: auto;
		min-width: 350px;
		min-height: 250px;
		padding: 5px 10px 5px 10px;
		/*max-height: 90%;*/
		/*max-width: 90%;*/
		display:block;
		position: absolute;
		z-index: 800;
		background-color: white;
		border-radius: 0px;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		top:0px;
		left:0px;
	}
	#ventana_panel{
		overflow: hidden;
		height: calc( 100% - 150px);
		/* border: 1px solid green;*/
		position: absolute;
		top: 110px;
		left: 30000px;
		width: 100%;
		z-index: 500;
		background-color: rgba(0,0,0,0);
		display: block;
	}
	.icono{
		font-size: 24px;color:#e10916;cursor:pointer;margin-right:20px;
	}
	.cliente_crud{
		height:30px;color:white;background-color: darkred;clear:both;padding-top:5px;font-size:16px
	}
	.titulo_crud{
		height:30px;
		background-color: white;
		color:gray;
		text-align: left;
		padding-left: 15px;
		padding-top: 5px;
		font-size: 16px;
	}
	.conservers{
		text-align: center;
		color:black;
		font-size: 20px;
	}
	.bigico{
		font-size: 78px;
	    color: #ff6600;
	    cursor: pointer;
	    padding-top: 40px;
	}
	.bigicono{
		font-size: 78px;
	    color: #cdcdcd;
	    cursor: pointer;
	    padding-top: 40px;
	}
	.cajaserver{
		height:250px;
		width:250px;
		border:1px solid #3366ff;
		border-radius:250px;
		margin:calc( ( 100% - 250px ) / 2);
	    left: 0px;
	    margin-bottom: 10px;
	    background-color: white;
	}
	.cajaserver:hover{
		height:250px;
		width:250px;
		border:1px solid #3366ff;
		border-radius:250px;
		margin:calc( ( 100% - 250px ) / 2);
	    left: 0px;
	    margin-bottom: 10px;
	    background-color: #BBCCFF;
	}	
}