/*-----------------------------------------------------------------------------
-------------------------------------------------------------------------------
INICIO: PROYECTO IMLINGUA -  SEPTIEMBRE 21
REPOSNBSALE: ENGINYTI - Ing. José A Ravizé P | Ing. Irving Esquivel M
-------------------------------------------------------------------------------
-----------------------------------------------------------------------------*/
/*-----------INICIA: FUENTES TIPOGRAFÍCAS--------------*/
@font-face {
	font-family:"NunitoBold";
	src:url("NunitoSans-Bold.ttf");
}

@font-face {
	font-family:"NunitoLight";
	src:url("NunitoSans-ExtraLight.ttf");
}

@font-face {
	font-family:"Nunito";
	src:url("NunitoSans-Regular.ttf");
}

/*-----------FINALIZA: FUENTES TIPOGRAFÍCAS--------------*/

/*-----------INICIA: COLORES--------------*/
.verde{color: #00BF76;}
.gris{color: #EDEDED;}
.sobra{color: #F8F7F7;}
.negro{color: #000000;}
.blanco{color:#ffffff;}
.pendiente{color: #EDB21D;}

/*-----------FINALIZA: COLORES--------------*/

body {
	margin:0 auto;
	font-family: "Nunito";
}

a img{border: none;}

.responsive {
    width: 100%;
    height: auto;
}

.responsive2 {
    width: 100%;
    height: 100%;
}

#clear{clear:both;}

.txt_titulos{font-family: "NunitoBold", san-serif;}
.txt_menu{font-family: "Nunito", san-serif;}
.txt_body{font-family: "NunitoLight", san-serif;}

/*-----------------INICIA: ENCABEZADO--------------------*/
header {
	
	height: auto;
	-webkit-box-shadow: 0px 2px 5px 0px rgba(171,162,171,1);
	-moz-box-shadow: 0px 2px 5px 0px rgba(171,162,171,1);
	box-shadow: 0px 2px 5px 0px rgba(171,162,171,1);
	margin-bottom: 15px;
	}	

	#titulo_head {
	width:90%;
	height:auto;
	margin:0 auto;	
	padding:10px 5px 5px;
	text-align: center;
	}
	
	#titulo_head h1 {
	font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
   	font-size:2.2em;
	text-transform:capitalize;
	color: #00BF76;
	}

	#usuario_head {
	width:68%;
	height:auto;
	margin:auto;	
	padding:20px 5px 5px;
	text-align: left;
	float: left;
	}

	#info_head{
		width: auto;
		height: auto;
		font-family: "NunitoBold", "sans-serif";
		font-size: 1em;
		color: #000;
		float: left;
		padding: 0px 50px 0px 0px;
	}

	#info_btn{
		width: auto;
		height: auto;
		font-family: "NunitoBold", "sans-serif";
		font-size: 1em;
		color: #000;
		float: left;
		padding: 10px 70px 0px 0px;
	}
/*-----------------FINALIZA: ENCABEZADO--------------------*/

/*-----------------INICIA PIE--------------------*/
footer{ 
	background: #00BF76;
	color: #fff;
	height: auto;
	margin-top: 7em;
	font-family: "Nunito", sans-serif;    
	/*position: absolute;
  bottom: 0;*/
	width: 100%;
}
#pieA{
	width: 90%;	
	padding:10px 10px 10px 20px;
	margin: 0 auto;
	height: auto;
	font-size: 1.2em;
	line-height: 2em;
}

	#pieA a:link {
		color: #FFF;
		text-decoration:none;
		padding: 0px;
	}
	#pieA a:active, #pieA a:visited {
		color: #FFF;
		text-decoration:none;
		padding: 0px;
	}
	#pieA a:hover {
		color: #FFF;
		font-style: italic;
		text-decoration:underline;
		padding:0px;
	}

#pieB{
	width: 90%;	
	padding:10px;
	margin: 0 auto;
	height: auto;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}

#pieC{
	width: 90%;	
	padding:10px;
	margin: 0 auto;
	height: auto;
	text-align: center;
	font-size: 14px;
}

	#pieC a:link {
		color: #FFF;
		text-decoration:underline;
		padding: 0px;
	}
	#pieC a:active, #pieC a:visited {
		color: #FFF;
		text-decoration:underline;
		padding: 0px;
	}
	#pieC a:hover {
		color: #FFF;
		font-weight: bold;
		text-decoration:underline;
		padding:0px;
	}
/*-----------------FINALIZA PIE--------------------*/

/*-----------------INICIA: MENU--------------------*/
menu {	
	height: auto;
	margin-bottom: 10px;
	background: #00BF76;
	}	
.bg-green{background: #00BF76;}

#menu_head{
	height: auto;
	margin: 5px;	
	float: left;
	display: inline-flex;
}

#menu_head a:link {
	font-family: "NunitoLight";
   	font-size:.9em;
	color: #FFF;
	text-decoration: none;
	line-height: 1em;
	padding: 2px 0px 3px 10px;
	display: block;
	font-weight: bolder;
	margin-right: 15px;
}
#menu_head a:active, #menu_head a:visited {
	font-family: "NunitoLight";
   	font-size:.9em;
	color: #FFF;
	text-decoration: none;
	line-height: 1em;
	padding: 2px 0px 3px 10px;
	display: block;
	font-weight: bolder;
	margin-right: 15px;
}
#menu_head a:hover {
	font-family: "NunitoLight";
   	font-size:.9em;
	color: #EDEDED;
	text-decoration:underline;
	line-height: 1em;
	font-weight: bolder;
	padding: 2px 0px 3px 10px;
	display: block;
	margin-right: 15px;
}
/*-----------------FINALIZA: MENU--------------------*/

/*-----------------INICIA: NAVEGACION--------------------*/
navegacion {	
	height: auto;
	margin-bottom: 10px;
	background: #4D4D4D;
	}	

#navegacion_links{
	height: auto;
	margin: 5px;
	font-family: "NunitoBold";
   	font-size:.9em;
	color: #000;
}

#navegacion_links a:link {	
	color: #000;
	text-decoration: none;
	line-height: 1em;
	padding: 2px 0px 3px 10px;
	font-weight: bolder;
}
#navegacion_links a:active, #navegacion_links a:visited {
	color: #000;
	text-decoration: none;
	line-height: 1em;
	padding: 2px 0px 3px 10px;
	font-weight: bolder;
}
#navegacion_links a:hover {
	color: #000;
	text-decoration:underline;
	line-height: 1em;
	font-weight: bolder;
	padding: 2px 0px 3px 10px;
}
/*-----------------FINALIZA: NAVEGACION--------------------*/

/*-----------------INICIA: VINCULOS--------------------*/
#link_actividades a:link {	
	color: #000;
	text-decoration: none;
	line-height: 1em;
	padding: 2px 0px 3px 10px;
	font-weight: bolder;
}
#link_actividades a:active, #link_actividades a:visited {
	color: #000;
	text-decoration: none;
	font-style: italic;
	line-height: 1em;
	padding: 2px 0px 3px 10px;
	font-weight: bolder;
}
#link_actividades a:hover {
	color: #00BF76;
	text-decoration:underline;
	line-height: 1em;
	font-weight: bolder;
	padding: 2px 0px 3px 10px;
}

#link_visualizar a:link {	
	color: #000;
	text-decoration: none;
	line-height: 1em;
	padding: 2px 0px 3px 10px;
	font-weight: bolder;
}
#link_visualizar a:active, #link_visualizar a:visited {
	color: #000;
	text-decoration: none;
	font-style: italic;
	line-height: 1em;
	padding: 2px 0px 3px 10px;
	font-weight: bolder;
}
#link_visualizar a:hover {
	color: #00BF76;
	text-decoration:underline;
	line-height: 1em;
	font-weight: bolder;
	padding: 2px 0px 3px 10px;
}
/*-----------------FINALIZA: VINCULOS--------------------*/

/*-----------------INICIA: SUBMENU_1--------------------*/
.bg-gray{background: #EDEDED;}

#submenu_1{
	height: auto;
	margin: 10px 2px 10px 2px;
	font-family: "NunitoBold";
   	font-size:1em;
	color: #FFF;
}

#submenu_1 a:link {
	font-family: "NunitoLight";
   	font-size:.9em;
	color: #FFF;
	text-decoration: none;
	line-height: 1em;
	padding: 5px 0px 5px 5px;
	display: block;
	font-weight: bolder;
}
#submenu_1 a:active, #submenu_1 a:visited {
	font-family: "NunitoLight";
   	font-size:.9em;
	color: #FFF;
	text-decoration: none;
	line-height: 1em;
	padding: 5px 0px 5px 5px;
	display: block;
	font-weight: bolder;
}
#submenu_1 a:hover {
	font-family: "NunitoLight";
   	font-size:.9em;
	color: #EDEDED;
	text-decoration:underline;
	line-height: 1em;
	font-weight: bolder;
	padding: 5px 0px 5px 5px;
	display: block;
}
/*-----------------FINALIZA: SUBMENU_1--------------------*/


/*-----------------INICIA: LOGIN----------------------*/
.form-signin #inputEmail,
.form-signin #inputPassword {
    direction: ltr;
    height: 44px;
	font-family: "Nunito";
   	font-size:1.2em;
}

.form-sigin h2{
	font-family: "NunitoBold";
	font-size: 2.6em;
	text-align: center;
	text-transform:	uppercase;
	margin: 20px;
	padding-top: 3rem;
	padding-bottom: 1rem;
}

.form-sigin h4{
	font-family: "Nunito";
	font-size: 1.2em;
	text-align: center;
	text-transform:	uppercase;
	margin: 10px;
}

.form-sigin a:link {
	font-weight: bold;
	color: #000;
	text-decoration: none;
		
}
.form-sigin a:active, .form-sigin a:visited {
	font-weight: bold;
	color: #000;
	text-decoration: none;
}
.form-sigin a:hover {
	font-weight: bold;
	color: #00BF76;
	text-decoration: underline;
	
}

.form-signin select,
.form-signin input[type=email],
.form-signin input[type=password],
.form-signin input[type=text],
.form-signin button {
    width: 80%;
	margin: 0 auto;
	font-family: "Nunito";
	font-size: 1.1em;
	height: 40px;
    display: block;
	padding-inline-start: 10%;
	margin-block-start: 2rem;
    margin-block-end: 2rem;
    z-index: 1;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	border: solid;
	border-color: #00BF76;
	border-radius: 25px;
}

.form-signin select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.form-signin select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
/*
.form-signin .form-control:focus {
    border-color: #00BF76;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px #00BF76;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px #00BF76;
}*/
/*-----------------FINALIZA: LOGIN--------------------*/

/*-----------------INICIA: ELEMENTOS FORMULARIO--------------------*/
.input-xs{ width: 5em;}
.input-sm{ width: 10em;}
.input-md{ width: 20em;}
.input-lg{ width: 40em;}

.tb-form1{
	font-family: "Nunito";
	font-size: 1em;
	margin: 10px;
	padding:10px;
	border-spacing: 5px;
	border-collapse: collapse;
}

.tb-form1 tr{
	border-bottom: 1px dotted #CCC;
}

.tb-form1 td { 
    padding: 5px;
}

.tb-form2{
	font-family: "Nunito";
	font-size: 1.1em;
	margin: 10px;
	padding:10px;
	border-spacing: 5px;
	border-collapse: collapse;
}

.tb-form2 tr{
	border-bottom: 1px dotted #CCC;
}

.tb-form2 hr{
	border: 1px dotted #CCC;
}

.tb-form2 td { 
    padding: 5px;
}

/*-----------------FINALIZA: ELEMENTOS FORMULARIO--------------------*/

/*-----------------INICIA: BOTONES--------------------*/
.btn-iml-green { 
  color: #000000; 
  background-color: #FFFFFF; 
  border-color: #00BF76;
	border-radius: 25px;	
} 
 
.btn-iml-green:hover, 
.btn-iml-green:focus, 
.btn-iml-green:active, 
.btn-iml-green.active, 
.open .dropdown-toggle.btn-iml-green { 
  color: #FFF; 
  background-color: #00BF76; 
  border-color: #00BF76;
	border-radius: 25px;
} 
 
.btn-iml-green:active, 
.btn-iml-green.active, 
.open .dropdown-toggle.btn-iml-green { 
  background-image: none; 
} 
 
.btn-iml-green.disabled, 
.btn-iml-green[disabled], 
fieldset[disabled] .btn-iml-green, 
.btn-iml-green.disabled:hover, 
.btn-iml-green[disabled]:hover, 
fieldset[disabled] .btn-iml-green:hover, 
.btn-iml-green.disabled:focus, 
.btn-iml-green[disabled]:focus, 
fieldset[disabled] .btn-iml-green:focus, 
.btn-iml-green.disabled:active, 
.btn-iml-green[disabled]:active, 
fieldset[disabled] .btn-iml-green:active, 
.btn-iml-green.disabled.active, 
.btn-iml-green[disabled].active, 
fieldset[disabled] .btn-iml-green.active { 
  background-color: #FFFFFF; 
  border-color: #00BF76; 
	border-radius: 25px;
} 
 
.btn-iml-green .badge { 
  color: #FFFFFF; 
  background-color: #000000; 	
}
/*BOTON PARA LOG IN*/
.btn-login-green { 
  color: #fff; 
  background-color: #00BF76; 
  border-color: #00BF76;
	border-radius: 25px;
	font-family: "Nunito";
	font-size: 1.2em;
	margin: 0 auto;
	margin-block-start: 1rem;
    margin-block-end: 1rem;
} 
 
.btn-login-green:hover, 
.btn-login-green:focus, 
.btn-login-green:active, 
.btn-login-green.active, 
.open .dropdown-toggle.btn-login-green { 
  color: #000; 
  background-color: #fff; 
  border-color: #00BF76;
	border-radius: 25px;
	font-family: "Nunito";
	font-size: 1.2em;
} 
 
.btn-login-green:active, 
.btn-login-green.active, 
.open .dropdown-toggle.btn-login-green { 
  background-image: none; 
} 

/*BOTON PARA FORMULARIOS*/
.btn-forms { 
  color: #fff; 
  background-color: #00BF76; 
  border-color: #00BF76;
	border-radius: 15px;
	font-family: "Nunito";
	font-size: 1.2em;
	margin: 0 auto;
	margin-block-start: 1rem;
    margin-block-end: 1rem;
} 
 
.btn-forms:hover, 
.btn-forms:focus, 
.btn-forms:active, 
.btn-forms.active, 
.open .dropdown-toggle.btn-forms { 
  color: #000; 
  background-color: #fff; 
  border-color: #00BF76;
	border-radius: 15px;
	font-family: "Nunito";
	font-size: 1.2em;
} 
 
.btn-forms:active, 
.btn-forms.active, 
.open .dropdown-toggle.btn-forms { 
  background-image: none; 
} 

.btn-opt-curso{
	display: inline-block;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
    white-space: nowrap;
   line-height:1em;
   position:relative;
   outline: none;
   overflow: visible;
   cursor: pointer;
   border:1px solid #00BF76;
   background:#80E890;
   color:#FFF;
   font-size:16px;
   font-weight:bold;
   font-style:normal;
   padding:20px 25px 20px 25px;
	margin: 5px 0px 10px 0px;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
	-moz-box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
	box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);	
}

#link_blanco a:link {
		color: #1C75BC;
		text-decoration:none;
		padding: 0px;
	}
#link_blanco a:active, #link_blanco a:visited {
		color: #1C75BC;
		text-decoration:none;
		padding: 0px;
	}
#link_blanco a:hover {
		color: #000;
		font-style: italic;
		padding:0px;
	}
/*-----------------FINALIZA: BOTONES--------------------*/

h1{
	color: #1C75BC;
	font-size: 1.8em;
	font-family:"NunitoBold";
}

h3{
	color: #1C75BC;
	font-size: 1.4em;
	font-family:"NunitoBold";
	text-transform: uppercase;
}



/*----------------INICIA: TABLAS--------------------------*/

/*
TAMAÑO DE TABLA, REVISAR SI ES NECESARIO PARA LOS CONTENIDOS DE LOS CURSOS, EN CASO QUE SI GENERAR UNA SUBCLASE
.table{width: auto !important;}
*/

#hor-zebra
{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	margin: 10px;
	padding:10px;
	/*width: 780px;*/
	border-collapse: collapse;

}
#hor-zebra th
{
	font-size: 16px;
	font-weight: normal;
	background: #333;
	padding: 5px;
	color: #FFF;
	border-bottom: 1px solid #fff;
	border-top: 1px solid transparent;
}
/*#hor-zebra tr:hover td
{
	background: #666;	
	color: #FFF;
}*/
#hor-zebra tr{
	height:40px;
	font-size:16px;
	color: #333;
	padding:5px;
	margin:5px;
	line-height:1.6em;
	border-bottom: 1px dotted #CCC;
}
#hor-zebra .normal
{
	padding: 4px;
	background: #EEE;	 
	border-bottom: 1px solid #fff;
	color: #333;
	border-top: 1px solid transparent;
	
}
#hor-zebra .odd
{
	background: #b9c9fe;
	padding: 15px;
	color: #000;
	border-right:2px solid #000;
}

#hor-zebra a:link {
	color: #09F;
	text-decoration: none;
		
}
#hor-zebra a:active, #hor-zebra a:visited {
	color: #09F;
	text-decoration: none;
}
#hor-zebra a:hover {
	color: #999;
	text-decoration: underline;
	
}

.revisado{
	background:#00BF76;
	color: #FFF;
}

#t_registro{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	margin: 10px;
	padding:10px;
	/*width: 780px;*/
	border-collapse: collapse;
}
#t_registro th{
	font-size: 18px;
	font-weight: normal;
	background: #FFF;
	padding: 5px;
	color: #ea2f3c;
	border-bottom: 1px solid #ea2f3c;
	border-top: 1px solid #ea2f3c;
}
#t_registro tr:hover td{
	background: #666;	
	color: #FFF;
}
#t_registro tr{
	height:40px;
	font-size:16px;
	color: #333;
	padding:5px;
	margin:5px;
	line-height:1.6em;
	border-bottom: 1px dotted #CCC;
}
#t_registro .normal{
	padding: 4px;
	background: #EEE;	 
	border-bottom: 1px solid #fff;
	color: #333;
	border-top: 1px solid transparent;
	
}
#t_registro a:link {
	color: #000;
	text-decoration: underline;		
}
#t_registroa:active, #t_registro a:visited {
	color: #000;
	text-decoration: underline;
}
#t_registro a:hover {
	color: #999;
	text-decoration: none;
	
}

/*---------TABLAS DE TIPO COLAPSE:  CURSOS-----------------*/

.hiddenRow {
    padding: 0 !important;
}
/**/
tr.hide-table-padding td {
  padding: 0;
}

.expand-button {
	position: relative;
}

.accordion-toggle .expand-button:after
{
  position: absolute;
  left:.75rem;
  top: 50%;
  transform: translate(0, -50%);
  content: '-';
}
.accordion-toggle.collapsed .expand-button:after
{
  content: '+';
}

/*----------------FINALIZA: TABLAS--------------------------*/

/*---------INICIA :  ELEMENTOS DE ACTIVIDADES-----------------*/
#opt_subact16{
		width: auto;
    height: auto;
    background-color: #00BF76;
    color: #fff;
    font-family:"NunitoBold";
    text-align: center;
    font-size:1.1em;
		font-style:italic;
		padding:5px 20px 2px 20px;
    margin: 10px;
    -webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		white-space: nowrap;
		position:relative;
		outline: none;
		overflow: visible;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
	-moz-box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
	box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
		}

	#contenedorAct16{
		width: auto;
    height: 35px;
    background-color: #F2F2F2;
    color: #000;
    font-family:"NunitoBold";
    text-align: center;
    font-size:1.1em;
		font-style:italic;
		padding:5px 20px 2px 20px;
    margin: 10px;
    -webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		border: 1px #00BF76 dashed;
		white-space: nowrap;
		position:relative;
		outline: none;
		overflow: visible;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
	-moz-box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
	box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
		}	

#opt_subact10{
		display: inline-block;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
    white-space: nowrap;
   line-height:1em;
   position:relative;
   outline: none;
   overflow: visible;
   cursor: pointer;
   border:1px solid #00BF76;
   background:#80E890;
   color:#FFF;
   font-size:14px;
   font-weight:bold;
   font-style:normal;
   padding:10px 15px 10px 15px;
	margin: 10px ;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
	-moz-box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
	box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
		}

		.dropboxAct10 {
        width: 350px;
        height: 40px;
        padding: 15px;
        border: 1px solid #292828;
    	}

    	p.textAct10{
    		width: auto;
    		height: auto;
    		font-family: "NunitoBold";
    		font-size: 1.2em;
    		float: left;
    		margin: 5px;
    		border: 1 px red;
    	}

/*
		#drag{
			width: 100px;
			height: 100px;
			background-color: orange;
		}

		#drop{
			width: 150px;
			height: 150px;
			background-color: dimgray;
		}

		#caja{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		#contenedor{
			width: 300px;
			height: 300px;
			border:  1px solid black;
			border-radius: 20px;
			margin: 20px;
		}*/

		/*-----------------------------------------------
		-------ACTIVIDAD 16:  RELACIONAR COLUMNAS--------
		-------------------------------------------------
		---Se toma la idea del puzzle para poder generar la información de la actividad
		--------------------------------------------------*/
		#colum_act16 { /*en lugar del puzzle*/
            border: 1px solid black;
            width: 90%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            margin: auto;
        }

      #rel_colum{
      	line-height: 2.5;
      	font-family:"NunitoBold";
        		font-size:1.1em;
      }  

     .placeholderAct16 {
            background-color: #F2F2F2;
            outline: 1px solid #333;
            width: 100%;
            height: 35px;
            margin: 5px;
            transition: 1s;
        }

        .placeholderAct16.hover {
            background-color: #00BF76;
        }

        .placeholderAct16 .pieza {
            margin: 0;
        }   


		#piezas {
            display: flex;
            flex-wrap: wrap;
            width: 400px;
            margin: auto;
            justify-content: center;
        }

        #puzzle2 {
            border: 1px solid black;
            width: 400px;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            margin: auto;
        }

        .pieza {
            width: auto;
            height: auto;
            text-align: left;
            background-color: #00BF76;
            color: #fff;
            font-family:"NunitoBold";
        		text-align: center;
        		font-size:1.1em;
				   font-style:italic;
				   padding:5px;
            margin: 5px;
            cursor: pointer;
            -webkit-border-radius: 10px;
				   -moz-border-radius: 10px;
				   border-radius: 10px;
				    white-space: nowrap;
				   position:relative;
				   outline: none;
				   overflow: visible;
        }

        #pieza {
            width: auto;
            height: auto;
            text-align: left;
            background-color: #00BF76;
            color: #fff;
            font-family:"NunitoBold";
        		text-align: center;
        		font-size:1.1em;
				   font-style:italic;
				   padding:5px;
            margin: 5px;
            cursor: pointer;
            -webkit-border-radius: 10px;
				   -moz-border-radius: 10px;
				   border-radius: 10px;
				    white-space: nowrap;
				   position:relative;
				   outline: none;
				   overflow: visible;
        }

        .placeholder {
            background-color: #F2F2F2;
            outline: 1px solid #333;
            width: 120px;
            height: 35px;
            transition: 1s;
        }

        .placeholder.hover {
            background-color: #00BF76;
        }

        .placeholder .pieza {
            margin: 0;
        }
/*
		#piezas {
            display: flex;
            flex-wrap: wrap;
            margin: auto;
            justify-content: center;
            background: skyblue;
        }

        #puzzle {
            border: 1px solid black;
            width: 148px;
            height: 495px;
            display: flex;
            flex-wrap: wrap;
            margin: auto;
        }

        .pieza {
        	width: 120px;
            height: 35px;
        	font-family:"NunitoBold";
        	text-align: center;
            background-size: cover;
            display: inline-block;
				   -webkit-border-radius: 10px;
				   -moz-border-radius: 10px;
				   border-radius: 10px;
				    white-space: nowrap;
				   position:relative;
				   outline: none;
				   overflow: visible;
				   cursor: pointer;
				   border:1px solid #1C75BC;
				   background: #1C75BC ;
				   color: #FFF;
				   font-size:1.1em;
				   font-style:italic;
				   padding:5px 20px 2px 20px;
					margin: 10px ;
				  -webkit-box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
					-moz-box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
					box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
				        }

        .placeholder {
            background-color: #F2F2F2;
            outline: 1px solid #333;
            width: 120px;
            height: 45px;
            transition: 1s;
        }

        .placeholder.hover {
            background-color: #00BF76;
        }

        .placeholder .pieza {
            margin: 0;
        }
*/
	#opt_subact11{
		display: inline-block;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
    white-space: nowrap;
   line-height:1em;
   position:relative;
   outline: none;
   overflow: visible;
   cursor: pointer;
   border:1px solid #00BF76;
   background:#80E890;
   color:#FFF;
   font-size:14px;
   font-weight:bold;
   font-style:normal;
   padding:10px 15px 10px 15px;
	margin: 10px ;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
	-moz-box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
	box-shadow: 0px 5px 10px 0px rgba(171,162,171,1);
		}	

		   #contenedor2 {
            background-color: #F2F2F2;
            outline: 1px solid #333;
            width: 250px;
            height: 40px;
            transition: 1s;
        }

        #contenedor2.hover {
            background-color: orange;
        }
/*---------FINALIZA :  ELEMENTOS DE ACTIVIDADES-----------------*/


/* ESTILO PARA CREAR LA CONFIGURACIÓN DEL USUARIO, CAMBIO DE SESIÓN, CERRAR SESIÓN, CAMBIO DE PARAMETROS DEL USUARIO */

.dropdown{}
.submenu{
background: #fff;
position: relative;
left: 0px;
z-index: 100;
width: auto;
display: none;
margin-left: 10px;
padding: 0px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 14px;
line-height: 16px;
color: #3CF;
position: relative;
z-index: 110;
display: block;
padding:0px;
height: 20px;
width: auto;
margin: 0 0 0 0;
text-decoration: none;
cursor:pointer;
}

.root{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
}

.error{
font-size: 11px;
color: #F00;
}