/***************** 
	El estilo oscuro aplicado en este CSS está implementado en las líneas con la etiqueta: 	///TEMA OSCURO///
******************/


.header_tablas {
/**/	
	width: 50%; 
	margin: 20px auto 0px;
	color: white;
	background: #FE5722;
	text-align: center;
/*
	border: 1px solid #B0C4DE;
*/	
	border: 1px solid #B0C4DE;   /*** Borde header tabla ***/	/* ///TEMA OSCURO/// */
	
	
	border-bottom: none;
	border-radius: 10px 10px 0px 0px;
	padding: 20px;
	float:left;
}
.form_tablas, .form_tablas_variables_entorno {
	width: 50%;
	margin: 0px auto 20px auto;
	padding: 20px;
	
/*
	border: 1px solid #B0C4DE;
	background: white;
*/	
	border: 1px solid #B0C4DE;   /*** Borde tablas ***/	/* ///TEMA OSCURO/// */
	background:#2A3942;  /*** Fondo tablas ***/	/* ///TEMA OSCURO/// */
	
	
	border-radius: 0px 0px 10px 10px;
	float:left;
}

.form_lista_backups {
	width: 20%;
	margin: 0px auto 20px auto;
	padding: 20px;
/*
	border: 1px solid #B0C4DE;
	background: white;
*/	
	border: 1px solid #B0C4DE;   /*** Borde tablas ***/	/* ///TEMA OSCURO/// */

	border-radius: 0px 0px 10px 10px;
	float:left;
}


.form_terminos {
	width: 25%;
	margin: 0px auto 20px auto;
	padding: 20px;
	border: 1px solid #B0C4DE;
	background: white;
	border-radius: 10px 10px 10px 10px;
	float:left;
}


/* Si el ancho de la pantalla disminuye por debajo de 468px, cambiar las propiedades del header, form y .content...*/
/* -------------------------------------------------------- */
@media (max-width: 1000px) {

	.header_tablas {
		width: 101.2% !important;
		margin: 0px auto 0px -25px !important;
	}
	.form_tablas {
		padding: 1px;
		width: 112.8% !important;
		margin: 0px auto 20px -25px !important;
	}


	.form_lista_backups {
		padding: 1px;
		width: 112.5% !important;

		margin: 0px auto 20px -25px !important;

/*		margin: 0 auto !important;*/
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
	}


	.form_tablas_variables_entorno {
		padding: 1px;
		width: 114% !important;
		margin: 0px auto 20px -25px !important;
	}




	.form_terminos {
		padding: 5px;
		width: 94% !important;

		margin: 20px !important;

/*		margin: 0 auto !important;*/
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
	}

}
/* -------------------------------------------------------- */


	
	









.menu_programas{
	text-align:left !important;
}


body {
/*	font-size: 120%; 
	background: #F8F8FF;

*/
	background:#2A3942;  /*** Fondo páginas ***/
}



.header {
/**/	width: 50%; 
	margin: 20px auto 0px;
	color: white;
	background: #FE5722;
	text-align: center;
	border: 1px solid #B0C4DE;
	border-bottom: none;
	border-radius: 10px 10px 0px 0px;
	padding: 20px;
	float:left;
}
form, .content {
	width: 50%;
	margin: 0px auto 20px auto;
	padding: 20px;
	border: 1px solid #B0C4DE;
/*
	background: white;
*/	
	background:#2A3942;  /*** Fondo tablas internas (Edición de datos) ***/
	border-radius: 0px 0px 10px 10px;
	float:left;
}




/* Si el ancho de la pantalla disminuye por debajo de 468px, cambiar las propiedades del header, form y .content...*/
/* -------------------------------------------------------- */
@media (max-width: 1000px) {

	.header {
		width: 85% !important;
		margin: 0px auto 0px !important;
	}
	form, .content {
		width: 85% !important;
		margin: 0px auto 20px 0px !important;
	}
}
/* -------------------------------------------------------- */

/*
@media (orientation: landscape) {
	.header {
		width: 85% !important;
		margin: 0px auto 0px !important;
	}
	form, .content {
		width: 85% !important;
		margin: 0px auto 20px 0px !important;
	}
}
*/



.input-group {
	margin: 10px 0px 10px 0px;
}

.input-group label {
	display: block;
	text-align: left;
	margin: 3px;
	color:#CCC;  /*** Letras etiquetas tablas ***/
}
.input-group input {
	height: 30px;
	width: 93%;
	padding: 5px 10px;
	font-size: 16px;
	border-radius: 5px;
	border: 1px solid gray;
}

#textarea_comentarios {
	height: 100px;
	width: 93%;
	padding: 5px 10px;
	background: white;
	font-size: 16px;
	border-radius: 5px;
	border: 1px solid gray;
}
#menu_medio_pago, #menu_moneda, #pais, #medio_pago, #estado, #input_menu_nombre_cliente, #video {
	height: 40px;
	width: 96%;
	padding: 5px 10px;
	background: white;
	font-size: 16px;
	border-radius: 5px;
	border: 1px solid gray;
}



#input_menu_nombre_cliente_susc {
	height: 25px;
	width: 97.2%;
	padding: 5px 10px;
	background: white;
	font-size: 14px;
	border-radius: 5px;
	border: 1px solid gray;
}




/* Si el ancho de la pantalla disminuye por debajo de 468px, cambiar las propiedades del header, form y .content...*/
/* -------------------------------------------------------- */
@media (max-width: 468px) {

	#input_menu_nombre_cliente_susc {
		width: 94%;
	}

}
/* -------------------------------------------------------- */










.btn {
	text-align:center;
	margin:30px auto;
	display:flex;
	
	
	padding: 10px;
	font-size: 15px;
	color: white;
	background: #FE5722;
	border: none;
	border-radius: 5px;
}
.error {
	width: 92%; 
	margin: 0px auto; 
	padding: 10px; 
	border: 1px solid #a94442; 
	color: #a94442; 
	background: #f2dede; 
	border-radius: 5px; 
	text-align: left;
}
.success {
	color: #3c763d; 
	background: #dff0d8; 
	border: 1px solid #3c763d;
	margin-bottom: 20px;
}

.profile_info img {
	display: inline-block; 
	width: 50px; 
	height: 50px; 
	margin: 5px;
	float: left;
}

.profile_info div {
	display: inline-block; 
	margin: 5px;
}

.profile_info:after {
	content: "";
	display: block;
	clear: both;
}