*{font-family:sans-serif;}

body{
	width:100%; 
	border-style:none; 
	min-width:500px;
	border-width:0; 
	background-color:rgba(0,0,0,0.1);  
	margin:0px 0px 0px 0px; 
	padding:0;
	}


.div_header_class{
	position:relative;
	display:block;	
	width:100%;
	min-width:400px;
		
	background-color:rgba(100,200,200,0.5);
	
	border-style:double;	
	border-width:0px;
	border-color:rgba(0,55,0,0.9);
	margin:0px 0px 10px 0px; 
	padding: 0px 0px 0px 0px;
}



.div_logo_class{
	position:relative;
	display:block;	
	width:100%;
	min-width:400px;
		
	border-style:double;	
	border-width:0px;
	border-color:rgba(0,255,0,0.9);
	margin:0px 0px 0px 0px;
	padding: 1px 1px 1px 1px;
	background-color:rgba(0,40,60,0.90);

}


.div_icon_class{
	
	position:relative;
	display: inline-block;	
	width:70px;
	height:50px;
		
	border-style:double;	
	border-width:0px;
	border-color:rgba(0,255,0,0.9);
	margin:1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;

	vertical-align: middle;
	
}



.div_nombre_aplicacion_class{

	position:relative;

	display:inline-block;	

	width:30%;

	min-width:200px;

	min-height:50px;

		

	border-style:double;	

	border-width:0px;

	border-color:rgba(0,255,0,0.9);

	margin:1px 1px 1px 1px;

	padding: 1px 1px 1px 1px;

	

	vertical-align: middle;

}



.div_nombre_class{

	position:relative;

	display:inline-block;	

	width:30%;

	min-width:200px;

	min-height:50px;

		

	border-style:double;	

	border-width:0px;

	border-color:rgba(0,255,0,0.9);

	margin:1px 1px 1px 1px;

	padding: 1px 1px 1px 1px;

	

	vertical-align: middle;

}



@media only screen and (max-width:640px){

	.div_header_class{

	 width:100%;

	}	

	.div_icon_class{

		width:50px;

	}	

	.div_nombre_aplicacion_class{

		width:50%;

		min-width:200px;

		font-size:small;

	}

	.div_nombre_class{

		width:100%;

		display:none;

		font-size:small;

	}	

}



.div_tracking_registro_class {

	position:relative;

	display:block;	

	width:100%;

	min-width:200px;

		

	background-color:rgba(105,255,0,0.0);

	

	border-style:double;	

	border-width:0px;

	border-color:rgba(0,255,0,0.9);

	margin:20px 0px 10px 0px;

	padding: 0px 0px 0px 0px;

}





.form_iniciar_sesion_class{

	position:relative;

	display:block;	

	width:50%;

	min-width:400px;



	background-color:rgba(0,0,0,0.7);	

	box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.5);

	border-style:solid;

	border-width:0px;

	border-color:rgba(20,200,20,0.5);

	color:white;

	

	margin:0px 0px 0px 0px;

	padding: 0px 0px 10px 0px;

}



.form_registro_class{

	position:relative;

	display:block;	

	width:50%;

	min-width:400px;



	background-color:rgba(0,0,0,0.7);	

	box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.5);

	border-style:solid;

	border-width:0px;

	border-color:rgba(20,200,20,0.5);

	color:white;	

	margin:20px 0px 0px 0px;

	padding: 0px 0px 10px 0px;



}







.div_items_form {

	position:relative;

	display:inline-block;

	width:46%;

	min-width:300px;

	background-color:rgba(0,255,220,0.0);

	

}



.textoInformacion{

	position:relative;

	display:inline-block;

	width:70%;

	min-width:200px;

	text-align:center;

	top:0px;

	left:0px;

	margin:20px 2px 0px 2px;

	padding-bottom:0px;

	padding:0px;

	background-color:rgba(220,220,220,0.0); 

	color:rgba(0,200,255,0.90); 

	font-size:16px;

}



.entradaTexto_IniciarSesion{

	position:relative;

	display:inline-block;

	width:100%;

	height:25px;

	min-width:200px;

	vertical-align:top;

	margin:0px;	



	border-style:none; 

	border-width:1px; 

	background-color:rgba(0,0,0,0.5); 

	color:rgba(180,250,180,0.9);	

}



.class_submit_registrarse{

	position:relative;

	display:block;

	border-radius:3px; 

	box-shadow:0 0 1px 1px #007020; 

	border-color:rgba(100,180,0,0.9); 

	background-color:rgba(100,180,0,0.0); 

	margin: 0px;

	color:rgba(130,250,0,0.9); 

	width:200px; 

	height:40px;

	font-size:14px;

}



.class_submit_registrarse:hover{

	background-color:rgba(100,180,100,0.1);

}





.div_item_submit_form_class{

	position:relative;

	display:block;	

	background-color:rgba(100,100,130,0.0);

	margin: 20px 10px 10px 10px;

}







/* Clases para el pied de pagina */

.div_class_footer {

	position: relative;

	display:block;

	background:linear-gradient(#507060,#305030); 

	background:rgba(0,50,80,0.6);

	color:black;

	padding:0px;

	margin: 0px;

	bottom: 0;

}



.div_class_subfooter {

	position:relative;

	display:inline-block;

	width:25%;

	vertical-align:top;

	min-width:200px;

	margin: 0px;

	padding:0px;

}

.div_class_subfooter_1 {

	position:relative;

	display:inline-block;

	width:45%;

	vertical-align:top;

	top:0px;

	color:white;

	font-size:small;

	padding:0px;

}



/*Clases para Menu Tracking */



.div_container_menu_tracking_class{

	position:fixed;

	display:block;	

	width:230px;

	height:50px;

		

	background-color:rgba(100,250,40,0.7);

	

	border-style:double;	

	border-width:0px;

	border-color:rgba(0,55,0,0.9);

	bottom: 0px;

	left:0px;

	z-index:2;

	color:rgba(0,50,40,1);

	padding:0px 5px 0px 5px;

}

.div_container_cerrar_sesion_tracking_class{

	position:fixed;

	display:block;	

	width:150px;

	height:50px;

		

	background-color:rgba(100,250,40,0.7);

	

	border-style:double;	

	border-width:0px;

	border-color:rgba(0,55,0,0.9);

	bottom: 0px;

	right:0px;

	z-index:2;

	color:rgba(0,50,40,1);

	padding:0px 5px 0px 5px;

}





.div_container_menu_tracking_class:hover {

	height:500px;

	border-width:0px;

}



.div_container_menu_tracking_class:hover  .div_items_menu_tracking_class{

	display:inline-block;

}





.div_nombre_menu_tracking_class{
	position:relative;
	display:block;
	width:100%;
	vertical-align:middle;
	margin:0px;
	text-align: center;
	font-size:small;
	font-weight:bold;
	font-style: normal;
	padding:1px;
}



.div_nombre_menu_tracking_class:hover{
	background-color:rgba(150,250,0,0.90);
	cursor:pointer;
}



.div_items_menu_tracking_class{
	position:relative;
	display:none;
	width:32%;
	vertical-align:middle;
	margin:0px;
	text-align: center;
	font-size:small;
	padding:5px 0px 0px 0px;	
	background-color:rgba(100,240,50,0.0);
	color:rgba(0,20,40,1);
}



.div_items_menu_tracking_class:hover{
	background-color:rgba(150,250,0,0.0);
	display:block;
	cursor:pointer;
	color:red;
}



.texto_items_menu_tracking_class{

	font-weight:bold;

	font-size:small;

	margin:0px;

	padding:4px 1px 4px 1px;

}





.div_cerrar_sesion_class{

	position:absolute;

	display:block;

	width:93%;

	height:40px;

	vertical-align:middle;



	text-align: center;

	font-size:14px;

	padding:0px 0px 0px 0px;

	margin: 5px 0px 0px 0px;

	color:red;

}



.div_cerrar_sesion_class:hover{

	background-color:rgba(0,190,190,0.9);

	border-style:double;	

	border-width:1px;

	border-color:rgba(0,255,0,0.9);

	height:50px;	

	margin: 0px 0px 0px 0px;

}



.div_form_asociar_dispositivo_class{

	position: absolute;

	display:none;

	background-color:rgba(250,250,250,0.8);

	color:black;

	height:110px;

	padding:2px;

	margin: 18px 100px 0px 300px ;

	bottom:0px;

	box-shadow: 0px 0px 20px 5px rgba(0,250,0,0.5);

	border-style:solid;	

	border-width:1px;

	border-color:rgba(0,255,0,0.9);

	text-align:center;

	

	z-index:2;

}



.div_cerrar_menu_asociar_class{

	position:absolute;

	display:block;

	cursor:pointer; 

	width:50px;

	margin:0px;

	box-shadow: 0px 0px 20px 5px rgba(250,0,0,0.0);

	background:linear-gradient(#FF0000,#FF7777); 

	border-style:dotted;	

	border-width:1px;

	border-color:rgba(255,0,0,0.9);

	text-align:center;



	right:2px;

}





.form_asociar_dispositivo_class{

	position:relative;

	display:block;	

	width:98%;

	min-width:400px;



	background-color:rgba(0,0,0,0.70);	

	box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.0);

	border-style:solid;

	border-width:0px;

	border-color:rgba(20,200,20,0.5);

	color:white;

	margin:25px 0px 0px 15px;

	padding: 0px 0px 10px 0px;

}

.div_items_form_asociar_dispositivo{

	position:relative;

	display:inline-block;

	width:18%;

	min-width:100px;

	background-color:rgba(0,255,220,0.0);

	color:rgba(0,200,255,0.90); 

}



.asociar_textoInformacion_class{

	position:relative;

	display:inline-block;

	width:90%;

	min-width:100px;

	text-align:center;

	top:0px;

	left:0px;

	margin:2px 2px 0px 2px;

	padding-bottom:0px;

	padding:0px;

	background-color:rgba(220,220,220,0.0); 

	color:rgba(0,200,255,0.90); 

	font-size:16px;

}



.div_item_submit_form_asociar_class{

	position:relative;

	display:inline-block;

	width:18%;

	background-color:rgba(100,100,130,0.0);

	margin: 20px 10px 10px 10px;

	

}



.div_regresar_class{

	position:relative;

	display:block;	

	width:50%;

	min-width:300px;



	background-color:rgba(255,255,255,0.7);	

	box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.5);

	border-style:solid;

	border-width:0px;

	border-color:rgba(20,200,20,0.5);

	color:white;	

	margin:20px 0px 0px 0px;

	padding: 10px 0px 10px 0px;

}



.class_referencia_regresar{

	position:relative;

	display:block;

	border-radius:3px; 

	box-shadow:0 0 1px 1px #007020; 

	border-color:rgba(100,180,0,0.9); 

	background-color:rgba(100,180,0,0.5); 

	margin: 5px;

	padding:25px 0px 0px 0px;

	color:rgba(10,50,0,0.9); 

	width:200px; 

	height:40px;

	font-size:16px;

	text-decoration:none;

}





.div_container_menu_user_interfase_class{

	position:relative;

	display:block;

	background-color:rgba(250,250,250,0.9); 

	border-radius:3px; 

	box-shadow:0 0 1px 1px #007020; 

	border-color:rgba(100,180,0,0.9); 

	padding:5px 0px 5px 0px;

	font-size:small;

	margin:5px;

}

.div_menu_opciones_graficas_class{



}



.div_checkbox_centrar_option_class{

	position:relative;

	display:inline-block;	

	width:45%;

	padding: 5px 0px 0px 0px;	

}



.div_input_zoom_value_class{

	position:relative;

	display:inline-block;	

	width:70%;

	font-size:small;	

	font-weight:bold;

	padding: 5px;	

}



.input_zoom_value_class{

	position:relative;

	display:inline-block;	

	width:40%;

	height:25px;

	text-align:center;

	font-weight:bold;

}



.div_config_UI_send_class{

	position:relative;

	display:inline-block;	

	width:70%;

	font-size:small;	

	font-weight:bold;

	padding: 5px;	

}



.config_UI_submit_class{

	position:relative;

	display:inline-block;	

	width:90%;

	font-size:small;	

	font-weight:bold;

	cursor:pointer;

}





.texto_operaciones_class{

	position:relative;

	display:inline-block;	

	width:90%;

	font-size:small;	

	font-weight:bold;

	cursor:pointer;	

}



.texto_operaciones_class:hover{

	color:green;

}





/**************************************************************************************************************************/

/******************************************************   IOT    **********************************************************/



.div_container_canales_iot_class{

	position:relative;

	display:block;

	width:95%;

	background-color:rgba(250,250,250,0.9); 

	border-radius:3px; 

	box-shadow:0 0 1px 1px #007020; 

	border-color:rgba(100,180,0,0.9); 

	padding:5px 5px 5px 5px;

	font-size:small;

	margin:2.2%;

}

.div_container_canal_class{
	position:relative;
	display:inline-block;
	width:24%;
	height:250px;
	min-width:250px;
	background-color:rgba(255,255,255,0.9); 
	border-radius:3px; 
	box-shadow:0 0 1px 1px #007020; 
	border-color:rgba(100,220,0,0.9); 
	padding:5px 0px 5px 0px;
	font-size:small;
	margin:5px;
	vertical-align:middle;
}





.div_nombre_canal_class{

	position:relative;

	display:block;

	width:95%;

	background-color:rgba(250,250,250,0.9); 

	text-align:center;

}





.label_for_input_class{

	display:inline-block;

	width:120px;

	height:40px;

	background-color: #979797;

	border-radius:100px;

	cursor:pointer;

	position:relative;

}


.div_container_users_list_class{
	position:relative;
	display:inline-block;
	width:20%;
	min-height:150px;
	min-width:150px;
	background-color:rgba(255,255,255,0.9); 
	border-radius:3px; 
	box-shadow:0 0 1px 1px #007020; 
	border-color:rgba(100,220,0,0.9); 
	padding:5px 0px 5px 0px;
	font-size:small;
	margin:5px;
	vertical-align:middle;
	color:rgba(0,40,80,0.9);
}




@media only screen and (max-width:640px){

	.div_container_canal_class{

	 width:95%;

	}	
	
	.div_container_users_list_class{
		 width:95%;
	}

	

}



/*

.label_for_input_class::after{

	content:'';

	display:block;

	width:120px;

	height:25px;

	background-color: #AAAAAA;

	border-radius:100px;

	cursor:pointer;

	position:absolute;

	top:4px;

	left:4px;

}*/



.label_for_input_text_class{

	display:block;

	vertical-align:middle;

	font-size:16px;

	color:rgba(0,40,80);

}



.checkbox_class{

	display:none;

}

.div_joystick_container_class{

	

}



.div_joystick_left_class{

	display:inline-block;

	position:relative;

	width:30%;

	background-color: #DDDDDD;

	border-radius:100px;

	padding:5px;

	vertical-align:middle;

}



.div_joystick_center_class{

	display:inline-block;

	position:relative;

	width:30%;

	background-color: #DDDDDD;

	border-radius:20px;

	padding:5px;

	vertical-align:middle;

}



.div_joystick_right_class{
	display:inline-block;
	position:relative;
	width:30%;
	background-color: #DDDDDD;
	border-radius:100px;
	padding:5px;
	vertical-align:middle;
}



.button_joystick_class{
	display:inline-block;
	position:relative;
	width:90%;
	background-color: #DDDDDD;
	border-style:none;
	border-radius:50px;
	padding:5px;
	margin:10px 0px 10px 0px; 
	vertical-align:middle;
}





.button_joystick_class:hover{
	background-color: #EEEEEE;
	cursor:pointer;
	color:#002050;
	font-size:14pt;
}







/****************   SOPORTE PARA MANEJAR USUARIOS PROPIOS  *********************/


.input_misUsuario_iot_class{
	display: inline-block;
	position: absolute;
	width:50%;
	right:5px;
	
	
}

.label_misUsuario_iot_class{
	display: inline-block;
	position: absolute;
	width:50%;
	left:5px;
	
	
}

.div_input_misUsuario_iot_class{
	display: inline-block;
	position: relative;
	width:100%;	
	margin: 3px 3px 10px 1px;
	padding: 5px;	
	vertical-align:middle;
}


.input_time_class{
	display:inline-block; 
	width:150px; 
	height:30px;
	margin:10px; 
	padding:0px;
	text-align: center;
	font-size:13pt;
	color:gray;
}

.input_numeric_class{
	display:inline-block; 
	width:60px; 
	height:30px;
	margin:10px; 
	padding:0px;
	text-align: center;
	font-size:13pt;
	color:gray;
}
		
.switch {
	position: relative;
	display: inline-block;
	vertical-align:middle;
	width: 60px;
	height: 34px;
}

.switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,40,90,0.5);
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}


.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

input:checked + .slider {
	background-color: rgba(0,250,0,1);
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}