<style class="cp-pen-styles">@charset "UTF-8";

/* Prevent the text contents of draggable elements from being selectable. */

.divClass {
	border: 3px solid black;
	font-size: 25px;
	background-color: lightgray;
	width: 250px;
	padding: 5px;
	display: inline-table;
	
}

li {
	font-size: 20px;
}

.highlight {
	background-color:green;
	color:white;
	border:3px solid grey;
}

.dragable {
	cursor: move;
}

	
.no-seleccionable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}	
	
/***********/
	
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.light hr {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #fff;
}

.dark hr {
  border-top: 1px solid #111;
  border-bottom: 1px solid rgba(102, 102, 102, 0.45);
}

html,
body {
  height: 100%;
}
html.dark,
body.dark {
  background-color: #333;
}
html.light,
body.light {
  background-color: #fff;
}

.dark .widget {
  border-color: #222;
  background-color: #383838;
}
.dark .widget .widget-head  {
  text-shadow: 0 0.5px 0 #000;
  background-color: #222;
}
.dark .widget .widget-body-table {
  background-color: #2b2b2b;
}
.dark .widget .widget-body-table span {
  text-shadow: 0 1px 1px #383838;
  color: #161616;
}

.light .widget-LU {
  border-color: #aeeff7;
}
.light .widget-LU .widget-head-LU {
  text-shadow: 0 0.5 #fff;
  background-color: #aeeff7;
}

.light .widget-MA {
  border-color: #dfaef7;
}
.light .widget-MA .widget-head-MA {
  text-shadow: 0 0.5 #fff;
  background-color: #dfaef7;
}	

.light .widget-MI {
  border-color: #bcf7ae;
}
.light .widget-MI .widget-head-MI {
  text-shadow: 0 0.5 #fff;
  background-color: #bcf7ae;
}	
	
.light .widget-JU {
  border-color: #fabf49;
}
.light .widget-JU .widget-head-JU {
  text-shadow: 0 0.5 #fff;
  background-color: #fabf49;
}	

.light .widget-VI {
  border-color: #49a7fa;
}
.light .widget-VI .widget-head-VI {
  text-shadow: 0 0.5 #fff;
  background-color: #49a7fa;
}		

.light .widget-SA {
  border-color: #f8fa49;
}
.light .widget-SA .widget-head-SA {
  text-shadow: 0 0.5 #fff;
  background-color: #f8fa49;
}	
	
.light .widget-DO {
  border-color: #f7b2ae;
}
.light .widget-DO .widget-head-DO {
  text-shadow: 0 0.5 #fff;
  background-color: #f7b2ae;
}	
	
.light .widget {
  border-color: #ddd;
}
.light .widget .widget-head {
  text-shadow: 0 0.5 #fff;
  background-color: #ddd;
}
.light .widget .widget-body-table {
  background-color: #fff;
}

.light .widget-LU,.widget-MA,.widget-MI,.widget-JU,.widget-VI,.widget-SA,.widget-DO .widget-body-table {
  background-color: #fff;
}	
	
.light .widget .widget-body-table span {
  color: #c8c8c8;
}

.light .widget-container {
  border-right-color: #ddd;
}

.dark .widget-container {
  border-right-color: #222;
}

.widget-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  width: 100%;
  margin: 25px;

}

.widget, .widget-LU, .widget-MA, 
.widget-MI, .widget-JU, 
.widget-VI, .widget-SA, 
.widget-DO ,.papelera{
  -moz-transition: left 0.1s ease, top 0.1s ease;
  -o-transition: left 0.1s ease, top 0.1s ease;
  -webkit-transition: left 0.1s ease, top 0.1s ease;
  transition: left 0.1s ease, top 0.1s ease;
}

.widget, .widget-LU, .widget-MA, 
.widget-MI, .widget-JU, 
.widget-VI, .widget-SA, 
.widget-DO,
.placeholder,
.papelera	{
  -webkit-flex-grow: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  -webkit-align-self: center;
  align-self: center;
  -webkit-flex-basis: 120px;
  flex-basis: 120px;
  position: relative;
  height: 90px;
  margin: 12px 8px;
  padding-top: 12px;
  border-width: 3px;
  border-style: solid;
  border-radius: 2px;
  border-color: transparent;
}

.widget-head, .widget-head-LU, 
.widget-head-MA, .widget-head-MI, 
.widget-head-JU, .widget-head-VI, 
.widget-head-SA, .widget-head-DO {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  width: 100%;
  height: 12px;
  padding-left: 5px;
  font-size: 14px;
  line-height: 0.8;
  letter-spacing: 1px;
  color: orange;
  cursor: move;
}

.widget-head:before, .widget-head:after, .widget-head-LU:before, 
.widget-head-MA:before, .widget-head-MI:before, 
.widget-head-JU:before, .widget-head-VI:before, 
.widget-head-SA:before, .widget-head-DO:before, .widget-head-LU:after, 
.widget-head-MA:after, .widget-head-MI:after, 
.widget-head-JU:after, .widget-head-VI:after, 
.widget-head-SA:after, .widget-head-DO:after{
  content: "•";
}
.widget-head:before, .widget-head-LU:before, 
.widget-head-MA:before, .widget-head-MI:before, 
.widget-head-JU:before, .widget-head-VI:before, 
.widget-head-SA:before, .widget-head-DO:before {
  color: tomato;
}
.widget-head:after, .widget-head-LU:after, 
.widget-head-MA:after, .widget-head-MI:after, 
.widget-head-JU:after, .widget-head-VI:after, 
.widget-head-SA:after, .widget-head-DO:after {
  color: #00b300;
}

.widget-body-table {
  position: relative;
  display: table;
  width: 100%;
  height: 100%;
  padding: 2px 8px;
}

.widget-body-table .framework {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  opacity: 0.25;
}

.widget-body-table .foto {
/* -webkit-filter: grayscale(100%);
  filter: grayscale(100%);*/
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 45px;
  height: 45px;
  opacity: 1;
}

.widget-body-content {
  display: table-cell;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}
.widget-body-content span {
  font-size: 15px;

}

.widget-body-content p {
 position: absolute;
  top: 0;
  text-align: left;
  font-size: 12px;
    color: red;
}
.widget-body-content img  {
     border:none;
     padding:0;
     margin:0;
     width:30%;
     height:auto;
}
.widget-body-content edad {

  font-size: 20px;   
  color: green;

}
.widget-body-content numTotal {

  font-size: 22px;   
  color: black;

}
.widget-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: block;
  width: 100%;
  height: 20px;
  padding-left: 5px;
  font-size: 14px;
  line-height: 0.8;
  letter-spacing: 1px;
  color: orange;

}
	
.widget-footer numTotal {

  font-size: 22px;   
  color: black;

}	
	
.widget-footer chica {
color: #FF66CC;
}

.widget-footer chico {
	color: blue;
}

.placeholder {
  border: 1px solid orange;
  background-color: rgba(255, 165, 0, 0.25);
}

.ui-sortable-helper {
  -moz-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  -webkit-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
  -moz-box-shadow: 0 32px 32px -16px rgba(66, 66, 66, 0.65);
  -webkit-box-shadow: 0 32px 32px -16px rgba(66, 66, 66, 0.65);
  box-shadow: 0 32px 32px -16px rgba(66, 66, 66, 0.65);
}
.nonselectable {
	-webkit-user-select:none;
	-khtml-user-drag:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-moz-user-select:-moz-none;-ms-user-select:none;
	user-select:none;	
}
.titulo {
		
	font-size: 25px;
	background-color: #008CBA;
	color: white;
	width: 950px;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 15px;
	padding: 5px;
	text-align: center;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
	
	
}
.titulo #filtro {
	font-size: 15px;
	margin-left: auto;
	margin-right: auto;	
	padding: 5px;
	color: black;
}
	

</style>