:root {
	--background: #C9C9C9;
	--first: #0D3F36;
	--first_text: #FFFFFF;
	--second: #40404F;
	--second_text: #FFFFFF;

	--font: Montserrat, Open Sans, sans-serif;

	--separator: #CCCCCC;
}

* {
	margin: 0px;
	padding: 0px;
	border: none;
	font-family: var(--font);
}

/********************************************************************
	CONTENIDO
*********************************************************************/
#container {
	background: var(--background);
	overflow: hidden;
}

/******** CABECERA ********/
#container_header {
	background: var(--first);
	height: 109px;
	overflow:hidden;
	text-align:left;
	width: 100%;
}

#container_header_title {
	font-size: 28px;
	height: auto;
	margin: 5px 30px 5px 30px;
	padding: 10px;
	text-align: center;
	z-index: 2;
}

.container_header_title_text {
	background: var(--first_text);
	border-radius: 0.5em;
	color: var(--first);
	font-size: 36px;
	margin: 8px 25%;
	padding: 10px 0px;
	text-align: center;
}

.logo {
	background: url("../../img/impulsa.png") no-repeat scroll 0 0 transparent;
	float: left;
	height: 84px;
	margin-top: 18px;
	width: 25%;
}

/******** BARRA SUPERIOR ********/
#container_subheader {
	background-color: var(--first);
	color: var(--first_text);
	float: right;
	font-size: 0.8em;
	height: 20px;
	margin-top: -109px;
	padding: 3px 20px 0px 5px;
	width: 100%;
}

/******** BARRA DE MENU *******/
.container_menuheader {
	background-color: var(--second);
	clear: both;
	height: 30px;
}
.container_menuheader a {
	color: var(--second_text);
}
.container_menuheader .element {
	color: var(--second_text);
	float: right;
	font-size: 14px;
	padding: 3px 10px;
}
.container_menuheader .left_elements .element {
	background: url(../../img/separacion.png) no-repeat right;
	float: left;
	margin-top: 5px;
}
.container_menuheader .left_elements .element.first {
	padding-left: 18% !important;
}
.container_menuheader .left_elements .element.home {
	background: url("../../img/home.png") no-repeat left !important;
	float: left;
	margin: 5px 0px 0px 10px;
	padding-left: 29px;
}
.container_menuheader .left_elements .element.menu {
	background: url("../../img/menu.png") no-repeat left !important;
	float: left;
	margin: 5px 0px 0px 10px;
	padding-left: 29px;
}
.container_menuheader .right_elements .element {
	float: right;
	margin-top: 3px;
}

/******** CUERPO ********/
#container_body { 
	text-align: left;
	font-size: 13px;
}

@media only screen and (max-device-width : 480px) {
	#container_body { 
		font-size: 30px;
	}
}

/* MENU */
#container_body_leftcolumn {
	float: left;
	padding: 5px 0px 0px 5px;
	width: calc(18% - 5px);

	/*Chrome, Safari*/
    -webkit-transition: width 0.4s ease;
    /*Firefox*/
    -moz-transition: width 0.4s ease;
    /*Opera*/
    -o-transition: width 0.4s ease;
    /*Standard*/
    transition: width 0.4s ease;
}

@media only screen and (max-device-width : 480px) {
	#container_body_leftcolumn {
		float: none;
		padding: 0px;
		width: calc(100% - 5px);
	}
}

.container_body_leftcolumn_hide {
	position: fixed;
	top: 140px;
	left: 0px;
	width: 38px !important;
	z-index: 90;
}

@media only screen and (max-device-width : 480px) {
	.container_body_leftcolumn_hide {
		display: none;
	}
}

.container_body_leftcolumn_hide:hover {
	width: 18% !important;
}
.container_body_leftcolumn_hide .dTreeSon {
	display: none;
}
.container_body_leftcolumn_hide .dTreeSonSel {
	display: none;
}
.container_body_leftcolumn_hide:hover .dTreeSon {
	display: block;
}
.container_body_leftcolumn_hide:hover .dTreeSonSel {
	display: block;
}

.container_body_leftcolumn_hide .dTreeNodeName {
	display: none;
}
.container_body_leftcolumn_hide:hover .dTreeNodeName {
	display: inline;
}


/* PRINCIPAL */
#container_body_rightcolumn {
	padding: 0px 0px 20px 38px;
	width: calc(100% - 38px);
}

@media only screen and (max-device-width : 480px) {
	.container_body_rightcolumn {
		padding: 0px;
		width: 100%;
	}
}

.container_body_rightcolumn_menu {
	float: left;
	padding: 0px 0px 20px 0px !important;
	width: calc(82% - 38px) !important;
}

@media only screen and (max-device-width : 480px) {
	.container_body_rightcolumn_menu {
		float: none !important;
		padding: 0px !important;
		width: 100% !important;
	}
}

#container_body_rightcolumn h1,
#container_body_rightcolumn h2,
#container_body_rightcolumn h3,
#container_body_rightcolumn h4 {
	color: var(--first);
	font-weight: bold;
}

#container_body_rightcolumn h1 { font-size: 24px; }
#container_body_rightcolumn h2 { font-size: 17px; }
#container_body_rightcolumn h3 { font-size: 15px; }
#container_body_rightcolumn h4 { font-size: 13px; }

#container_body_rightcolumn h1 {
	padding: 20px 2% 10px;
	width: 96%;
}

#container_body_rightcolumn .h1Image {
	float: right;
	padding: 20px 2% 10px;
}

#container_body_rightcolumn_content {
	height: auto;
	width: 100%;
}

#container_body_rightcolumn_content_text {
	min-height: 300px;
	padding: 0px 1% 0px;
	width: 98%;
}

#container_body_rightcolumn_loggedout {
	border: 0px solid #000;
	float: right;
	margin: 0px;
	padding: 0px;
	padding-bottom: 20px;
	position: relative;
	width: 100%;
	z-index: 2;
}

/******** PIE ********/
#container_footer {
	clear: both;
	padding-right: 20px;
}
#container_footer_left {
	float: left;
	width: 25%
}
#container_footer_right {
	float: right;
	text-align: right;
	width: 75%
}
@media only screen and (max-device-width : 480px) {
	#container_footer_left {
		float: none;
		width: 100%
	}
	#container_footer_right {
		float: none;
		text-align: left;
		width: 100%
	}
}

/********************************************************************
	CONTENIDO SIN AUTENTICACION
/********************************************************************/
#container_init {
	background: var(--second);
}

/******** CABECERA ********/
#container_header_init {
	background-color: var(--first);
	height: 109px;
	overflow: hidden;
	text-align: left;
	width: 100%;
}

@media only screen and (max-device-width : 480px) {
	#container_header_init {
		display: none;
	}
}

/******** BARRA SUPERIOR ********/
#container_subheader_init {
	background-color: var(--first);
	color: var(--first_text);
	float: right;
	font-size: 0.8em;
	height: 20px;
	margin-top: -109px;
	padding: 3px 20px 0 5px;
	width: 100%;
}

@media only screen and (max-device-width : 480px) {
	#container_subheader_init {
		font-size: 4em;
		height: 75px;
		margin-top: 0px;
	}
}

/******** CUERPO ********/

/* PRINCIPAL */
.container_body_rightcolumn_menu_init {
	background-color: #2c2c2c;
	float: right;
	padding-left: 1%;
	padding-top: 2px;
	position: relative;
	width: 100%;
	z-index: 0;
}

#container_body_init {
	font-size: 12px;
}
@media only screen and (max-device-width : 480px) {
	#container_body_init {
		font-size: 30px;
	}
}

.emptyelement {
	float:right;
	height: 20px;
	width:200px;
}

/* CONTENIDO */
#container_body_rightcolumn_change,
#container_body_rightcolumn_csvvalidation,
#container_body_rightcolumn_login,
#container_body_rightcolumn_logincert,
#container_body_rightcolumn_logout,
#container_body_rightcolumn_message,
#container_body_rightcolumn_singup {
	background: #FFFFFF;
	border-radius: 0.5em;
	float: left;
	margin: 5% 25% 10% 25%;
	padding: 1%;
	width: 48%;
}

@media only screen and (max-device-width : 480px) {
	#container_body_rightcolumn_change,
	#container_body_rightcolumn_csvvalidation,
	#container_body_rightcolumn_login,
	#container_body_rightcolumn_logincert,
	#container_body_rightcolumn_logout,
	#container_body_rightcolumn_message,
	#container_body_rightcolumn_singup {
		margin: 5% 5% 10% 5%;
		width: 88%;
	}
}

/* REGISTRO */
.register_message {
	padding: 5px;
	width: 97%;
	background-color: #FFF;
}
.register_message ul {
	font-size: 14px;
	margin-left: 30px;
}

/* MENSAJE DE ERROR */
#container_body_rightcolumn_message h1 {
	font-size: 1.6em;
}

/* PIE */
#container_footer_init {
	clear: both;
	color: #FFFFFF;
	padding-right: 20px;
	text-align: right;
}
#container_footer_init a {
	color: #FFFFFF;
}

/* ERROR */
#container_error {
	color: red;
	font-size: 14px;
	font-weight: bold;
	padding: 0px 0px 0px 10px;
	margin: 10px 10px 5px 1px;
	width: 97%;
	z-index: 3;
}