@font-face
{
   font-family: "fuente_empresa";
   src: url("../fuentes/empresa.eot");
   src: url("../fuentes/empresa.eot?#amocristalab") format("embedded-opentype"),
        url("../fuentes/empresa.woff") format("woff"),
        url("../fuentes/empresa.ttf") format("truetype"),
        url("../fuentes/empresa.svg#IDdelafuente") format("svg");
}
@font-face
{
   font-family: "fuente_texto";
   src: url("../fuentes/fuente_texto.eot");
   src: url("../fuentes/fuente_texto.eot?#amocristalab") format("embedded-opentype"),
        url("../fuentes/fuente_texto.woff") format("woff"),
        url("../fuentes/fuente_texto.ttf") format("truetype"),
        url("../fuentes/fuente_texto.svg#IDdelafuente") format("svg");
}
@font-face {
    font-family: "fuente_titulo";
   src: url("../fuentes/fuente_titulo.eot");
   src: url("../fuentes/fuente_titulo.eot?#amocristalab") format("embedded-opentype"),
        url("../fuentes/fuente_titulo.woff") format("woff"),
        url("../fuentes/fuente_titulo.ttf") format("truetype"),
        url("../fuentes/fuente_titulo.svg#IDdelafuente") format("svg");}
@font-face {
    font-family: "fuente_letra";
   src: url("../fuentes/fuente_letra.eot");
   src: url("../fuentes/fuente_letra.eot?#amocristalab") format("embedded-opentype"),
        url("../fuentes/fuente_letra.woff") format("woff"),
        url("../fuentes/fuente_letra.ttf") format("truetype"),
        url("../fuentes/fuente_letra.svg#IDdelafuente") format("svg");}
@font-face {
    font-family: "icono-menu";
   src: url("../dist/iconos/iconos.eot");
   src: url("../dist/iconos/iconos.eot?#amocristalab") format("embedded-opentype"),
        url("../dist/iconos/iconos.ttf") format("truetype"),
        url("../dist/iconos/iconos.svg#IDdelafuente") format("svg");}
body {
	color:rgba(0,0,0,0.85);
	font-family: 'fuente_texto';
	font-size: 14px;
	height: 100%;
	margin: 0px;
	text-align: justify;
	animation: cambio_color 30s linear 1s infinite alternate;
	-webkit-animation: cambio_color 30s infinite;
	background-imagen: url(../imagenes/fondo-logo.png);
	background-size: 80%;
	background-repeat:no-repeat;
	background-position: bottom;
}
@keyframes cambio_color
{
	0%  {background:rgba(255,0,4,0.08);}
	14% {background:rgba(255,253,0,0.08);}
	28% {background:rgba(0,163,18,0.08);}
	42% {background:rgba(31,189,203,0.08);}
	56% {background:rgba(0,44,255,0.08);}
	70% {background:rgba(81,21,177,0.08);}
	84% {background:rgba(201,8,182,0.08);}
	100%{background:rgba(255,0,4,0.08);}
}

@-webkit-keyframes cambio_color
{
	0%  {background:rgba(255,0,4,0.08);}
	14% {background:rgba(255,253,0,0.08);}
	28% {background:rgba(0,163,18,0.08);}
	42% {background:rgba(31,189,203,0.08);}
	56% {background:rgba(0,44,255,0.08);}
	70% {background:rgba(81,21,177,0.08);}
	84% {background:rgba(201,8,182,0.08);}
	100%{background:rgba(255,0,4,0.08);}
}
@-webkit-keyframes girando {
	from { -webkit-transform: rotateY(0deg);    }
	to   { -webkit-transform: rotateY(-360deg); }
}
@-moz-keyframes girando {
	from { -moz-transform: rotateY(0deg);    }
	to   { -moz-transform: rotateY(-360deg); }
}
#girando {
	margin: 20px auto;
	width: 60%;
	padding: 10px;
	height: 50%;
	font-weight: bold;
	text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
	color:rgba(255,255,255,0.6);
	font-family: 'fuente_letra';
	font-size: 120px;
	border-radius: 5px;
	-webkit-animation-name: girando;
	-moz-animation-name: girando;
	animation-name: girando;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-duration: 5s;
	-moz-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;

}
.parpadear {
	font-family:Arial Black;
	font-weight: 900;
	color:rgba(255,0,4,0.6);
	animation-name: parpadeo;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name:parpadeo;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

@keyframes parpadeo {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

#Mensaje_Div {
	font-size: 12px;
	width: 25%;
	color: rgba(0,0,0,0.81);
	background-color:rgba(203,12,12,0.6);
	border: 1px solid rgba(203,12,12,0.8);
	border-radius: 8px;
	padding: 10px;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-animation: seconds 1.0s forwards;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 5s;
	animation: seconds 1.0s forwards;
	animation-iteration-count: 1;
	animation-delay: 5s;
	position: absolute;
	top: 100px;
	right: 0px;
	z-index: 300;
}
@-webkit-keyframes seconds {
	0% {
	opacity: 1;
	}
	100% {
	opacity: 0;
	visibility: hidden;
	/*left: -9999px;*/
	position: absolute;   
	}
}
@keyframes seconds {
	0% {
	opacity: 1;
	}
	100% {
	opacity: 0;
	visibility: hidden;
	/*left: -9999px;*/
	position: absolute;     
	}
}

ol, ul {
	list-style: none;
	padding-left:0px;
}
.icono{
	padding: 5px;
	color: red;
	float: left;
	cursor: pointer;
}
.eliminarfix {
	clear: both;
}
.cabeza{
	position:fixed;
	margin:0px;
	background-image: url(../imagenes/bg-cabeza.png);
	background-color:rgb(145,145,145);
	width:100%;
	height:100px;
	z-index: 110;
}
.navegador {
	position:fixed;
	width: 90%;
	margin: 4em auto;
	padding-left:5%;
	z-index:100;
	top:-2px;
}

nav {
	background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#d2d2d2));
	background-image: linear-gradient(#fff, #d2d2d2);
	border-radius: 5px;
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
	padding: 0 5px;
	position: relative;
}

.menu li {
	float: left;
	position: relative;
}

.menu li a {
	color: #444;
	display: block;
	font-size: 13px;
	line-height: 12px;
	padding: 6px 12px;
	margin: 2px 2px;
	vertical-align: middle;
	text-decoration: none;
}

.menu li a:hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
	background-image: linear-gradient(#ededed, #fff);
	border-radius: 12px;
	box-shadow: inset 0px 0px 2px 2px rgba(0,0,0,0.1);
	color: #222;
}

.menu ul {
	position: absolute;
	left: -9999px;
	list-style: none;
	opacity: 0;
	transition: opacity 1s ease;
}

.menu ul li {
	float: none;
}

.menu ul a {
	white-space: nowrap;
}

.menu li:hover ul {
	background: rgba(208,208,208,0.8);
	border-radius: 0 0 6px 6px;
	box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
	left: 0px;
	opacity: 1;
}

.menu li:hover a {
	background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));
	background-image: linear-gradient(#ccc, #ededed);
	border-radius: 12px;
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
	color: #222;
}

.menu li:hover ul a {
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.menu li:hover ul li a:hover {
	background: -webkit-gradient(linear,center top, center bottom, from(#eee), to(#fff));
	background-image: linear-gradient(#ededed, #fff);
	border-radius: 10px;
	box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
}

.iconic {
	color:rgba(255,0,0,0.6);
	font-family: "icono-menu";
	font-size: 30px;
	line-height: 15px;
	vertical-align: middle;
}
a.iconic:hover {
	color:inherit;
}

.iconic.home:before { content: '!'; }
.iconic.at:before { content: "@"; }
.iconic.quote:before { content: '"'; }
.iconic.quote-alt:before { content: "'"; }
.iconic.arrow-up:before { content: "3"; }
.iconic.arrow-right:before { content: "4"; }
.iconic.arrow-bottom:before { content: "5"; }
.iconic.arrow-left:before { content: "6"; }
.iconic.arrow-up-alt:before { content: "#"; }
.iconic.arrow-right-alt:before { content: "$"; }
.iconic.arrow-bottom-alt:before { content: "%"; }
.iconic.arrow-left-alt:before { content: "^"; }
.iconic.move:before { content: "9"; }
.iconic.move-vertical:before { content: "8"; }
.iconic.move-horizontal:before { content: "7"; }
.iconic.move-alt:before { content: "("; }
.iconic.move-vertical-alt:before { content: "*"; }
.iconic.move-horizontal-alt:before { content: "&"; }
.iconic.cursor:before { content: ")"; }
.iconic.plus:before { content: "+"; }
.iconic.plus-alt:before { content: "="; }
.iconic.minus:before { content: "-"; }
.iconic.minus-alt:before { content: "_"; }
.iconic.new-window:before { content: "1"; }
.iconic.dial:before { content: "2"; }
.iconic.lightbulb:before { content: "0"; }
.iconic.link:before { content: "/"; }
.iconic.image:before { content: "?"; }
.iconic.article:before { content: ">"; }
.iconic.read-more:before { content: "."; }
.iconic.headphones:before { content: ","; }
.iconic.equalizer:before { content: "<"; }
.iconic.fullscreen:before { content: ":"; }
.iconic.exit-fullscreen:before { content: ";"; }
.iconic.spin:before { content: "["; }
.iconic.spin-alt:before { content: "{"; }
.iconic.moon:before { content: "]"; }
.iconic.sun:before { content: "}"; }
.iconic.map-pin:before { content: "\\"; }
.iconic.pin:before { content: "|"; }
.iconic.eyedropper:before { content: "~"; }
.iconic.denied:before { content: "`"; }
.iconic.calendar:before { content: "a"; }
.iconic.calendar-alt:before { content: "A"; }
.iconic.bolt:before { content: "b"; }
.iconic.clock:before { content: "c"; }
.iconic.document:before { content: "d"; }
.iconic.book:before { content: "e"; }
.iconic.book-alt:before { content: "E"; }
.iconic.magnifying-glass:before { content: "f"; }
.iconic.tag:before { content: "g"; }
.iconic.heart:before { content: "h"; }
.iconic.info:before { content: "i"; }
.iconic.chat:before { content: "j"; }
.iconic.chat-alt:before { content: "J"; }
.iconic.key:before { content: "k"; }
.iconic.unlocked:before { content: "l"; }
.iconic.locked:before { content: "L"; }
.iconic.mail:before { content: "m"; }
.iconic.mail-alt:before { content: "M"; }
.iconic.phone:before { content: "n"; }
.iconic.box:before { content: "o"; }
.iconic.pencil:before { content: "p"; }
.iconic.pencil-alt:before { content: "P"; }
.iconic.comment:before { content: "q"; }
.iconic.comment-alt:before { content: "Q"; }
.iconic.rss:before { content: "r"; }
.iconic.star:before { content: "s"; }
.iconic.trash:before { content: "t"; }
.iconic.user:before { content: "u"; }
.iconic.volume:before { content: "v"; }
.iconic.mute:before { content: "V"; }
.iconic.cog:before { content: "w"; }
.iconic.cog-alt:before { content: "W"; }
.iconic.x:before { content: "x"; }
.iconic.x-alt:before { content: "X"; }
.iconic.check:before { content: "y"; }
.iconic.check-alt:before { content: "Y"; }
.iconic.beaker:before { content: "z"; }
.iconic.beaker-alt:before { content: "Z"; }

.separador-cabeza{
	padding-top:100px;
}
.mensaje-invalido{
	padding:2px 2px 0px 20px;
	clear:left;
	color:#c0272b;
	font:normal 11px 'fuente_texto';
	line-height:16px;
	background:url(../imagenes/formulario/invalido.gif)no-repeat 0 2px;
}
.mensaje-valido{
	padding:2px 2px 0px 20px;
	clear:left;
	color:#06A24D;
	font:normal 11px 'fuente_texto';
	line-height:16px;
	background:url(../imagenes/formulario/valido.gif)no-repeat 0 2px;
}
.busqueda{
	overflow-y: scroll;
	max-height: 300px;
}
.progress {
	height: 20px;
	background: #ebebeb;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-radius: 10px;
	font-family: Arial;
}
.progress > span {
	position: relative;
	float: left;
	margin: 0 -1px;
	min-width: 30px;
	height: 18px;
	line-height: 16px;
	text-align: right;
	background: #cccccc;
	border: 1px solid;
	border-color: #bfbfbf #b3b3b3 #9e9e9e;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(top, #f0f0f0, #dbdbdb 70%, #cccccc);
	background-image: -moz-linear-gradient(top, #f0f0f0, #dbdbdb 70%, #cccccc);
	background-image: -o-linear-gradient(top, #f0f0f0, #dbdbdb 70%, #cccccc);
	background-image: linear-gradient(to bottom, #f0f0f0, #dbdbdb 70%, #cccccc);
	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.progress > span > span {
	padding: 0 8px;
	font-size: 11px;
	font-weight: bold;
	color: #404040;
	color: rgba(0, 0, 0, 0.7);
	text-shadow: 0 1px rgba(255, 255, 255, 0.4);
}
.progress > span:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	height: 18px;
	background: url("../img/progress.png") 0 0 repeat-x;
	border-radius: 10px;
}
.progress .verde {
	background: #85c440;
	border-color: #78b337 #6ba031 #568128;
	background-image: -webkit-linear-gradient(top, #b7dc8e, #99ce5f 70%, #85c440);
	background-image: -moz-linear-gradient(top, #b7dc8e, #99ce5f 70%, #85c440);
	background-image: -o-linear-gradient(top, #b7dc8e, #99ce5f 70%, #85c440);
	background-image: linear-gradient(to bottom, #b7dc8e, #99ce5f 70%, #85c440);
}
.progress .rojo {
	background: #db3a27;
	border-color: #c73321 #b12d1e #8e2418;
	background-image: -webkit-linear-gradient(top, #ea8a7e, #e15a4a 70%, #db3a27);
	background-image: -moz-linear-gradient(top, #ea8a7e, #e15a4a 70%, #db3a27);
	background-image: -o-linear-gradient(top, #ea8a7e, #e15a4a 70%, #db3a27);
	background-image: linear-gradient(to bottom, #ea8a7e, #e15a4a 70%, #db3a27);
}
.progress .morado {
	background:#500FB8;
	border-color: #8342DF #6C2EC4 #5416AC;
	background-image: -webkit-linear-gradient(top, #8342DF, #6C2EC4 70%, #5416AC);
	background-image: -moz-linear-gradient(top, #8342DF, #6C2EC4 70%, #5416AC);
	background-image: -o-linear-gradient(top, #8342DF, #6C2EC4 70%, #5416AC);
	background-image: linear-gradient(to bottom, #8342DF, #6C2EC4 70%, #5416AC);
}
.progress .naranja {
	background: #f2b63c;
	border-color: #f0ad24 #eba310 #c5880d;
	background-image: -webkit-linear-gradient(top, #f8da9c, #f5c462 70%, #f2b63c);
	background-image: -moz-linear-gradient(top, #f8da9c, #f5c462 70%, #f2b63c);
	background-image: -o-linear-gradient(top, #f8da9c, #f5c462 70%, #f2b63c);
	background-image: linear-gradient(to bottom, #f8da9c, #f5c462 70%, #f2b63c);
}
.progress .azul {
	background: #5aaadb;
	border-color: #459fd6 #3094d2 #277db2;
	background-image: -webkit-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
	background-image: -moz-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
	background-image: -o-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
	background-image: linear-gradient(to bottom, #aed5ed, #7bbbe2 70%, #5aaadb);
}
.ingreso{
	padding-top: 10%;
	position:relative;
}
.datos-expediente{
	color: rgba(255,0,4,0.6);
	font-family: 'fuente_texto';
	font-size: 10px;
	margin: 0px;
}
td.ver_datos{
	color:rgba(255,0,4,0.8);
	font-size:15px;
}
.detalle_casos{
	float:left;
	width:20%;
}
.detalle_casos_titulo{
	font-family:Arial;
	font-size:11px;
	color:rgba(204,16,19,0.78);
}
.detalle_casos_datos{
	font-family:Arial;
	font-size:11px;
	color:rgba(3,11,152,0.87);
	font-weight: 800;
}
td.cabecera {
	-moz-box-shadow: inset 0 0 0 1px #63ad0d;
	-webkit-box-shadow: inset 0 0 0 1px #63ad0d;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px #f5f5f5;
	color: rgba(0,0,0,0.8);
	font: 18px 'fuente_titulo';
	width: 100%;
	padding:3px 0px 5px 10px;
	text-decoration: none;
	background: #d1d1d1;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d1d1d1), to(rgba(0,0,0,0.6)));
	background: -moz-linear-gradient(#d1d1d1, rgba(0,0,0,0.6));
	background: linear-gradient(#d1d1d1, rgba(0,0,0,0.6));
	border: solid 1px rgba(0,0,0,0.05);
	border-bottom: solid 3px rgba(0,0,0,0.6);
	text-shadow: 0 1px 0 #d6d6d6;
	font-weight: bold;
	text-shadow:   0 1px 0 #ccc, 
				   0 1px 0 #c9c9c9,
				   0 1px 0 #bbb,
				   0 1px 0 #b9b9b9,
				   0 1px 0 #aaa,
				   1px 1px 2px rgba(0,0,0,.25),
				   1px 2px 3px rgba(0,0,0,.2),
				   1px 3px 4px rgba(0,0,0,.5);
	color:rgba(255,255,255,0.70);
}
tr.cabeza-listado{
	color: rgba(98,1,3,1.00);
	font-family: 'fuente_texto';
	font-size: 13px;
	padding: 3px 3px;
	background: -moz-linear-gradient(center top , #e5e5e5 0%, #b4b4b4 100%) repeat scroll 0 0 transparent;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#b4b4b4));
	-moz-border-radius: 3px;
	border-radius:3px;
	-webkit-border-radius: 3px;
	line-height: 20px;
	height: 20px;
}
.botones{
	-moz-box-shadow: inset 0 0 0 1px #63ad0d;
	-webkit-box-shadow: inset 0 0 0 1px #63ad0d;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: inset 0 0 0 1px #f5f5f5;
	color: rgba(0,0,0,0.8);
	display: inline-block;
	font: bold 12px Arial;
	margin: 1px 1px 1px 0;
	padding: 0.15em 20px;
	position: relative;
	text-align: center;
	text-decoration: none;
	background: #d1d1d1;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d1d1d1), to(#afafaf));
	background: -moz-linear-gradient(#d1d1d1, #afafaf);
	background: linear-gradient(#d1d1d1, #afafaf);
	border: solid 1px #b4b4b4;
	border-bottom: solid 3px #878787;
	text-shadow: 0 1px 0 #d6d6d6;
	cursor: pointer;
}
.botones:hover{
    box-shadow: inset 0 0 0 1px #e67e7b;
    color: #fff;
    text-shadow: 0 1px 0 #bd2524;
    background: #ce2424;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ce2424), to(#f97779));
    background: -moz-linear-gradient(#ce2424, #f97779);
    background: linear-gradient(#ce2424, #f97779);
    border: solid 1px #be2424;
    border-bottom: solid 3px #bd2524;
    box-shadow: inset 0 0 0 1px #e67e7b;
}
.paginacion {
	position: absolute;
	top: 120px;
	right:3%;
	font-size: 14px;
}
.paginacion a {
	font-size: 12px;
	font-weight: bold;
}
.nombre-sistema {
	border:0;
	top:0px;
	font-family: 'fuente_empresa';
	font-size: 35px;
	letter-spacing: 0.06em;
	padding-left: 1%;
	z-index: 199;
  text-shadow: 0 0.04em 0 #ccc, 
               0 0.06em 0 #c9c9c9,
               0 0.08em 0 #bbb,
               /*0 4px 0 #b9b9b9,
               0 5px 0 #aaa,*/
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
	color: #FFF;
}
.tooltip{
    display: inline;
    position: relative;
}
.tooltip:hover:after{
    background: rgba(255,0,0,.8);
	border:2px double rgba(177,26,29,0.3);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}
.tooltip:hover:before{
    border: solid;
    border-color: rgba(177,26,29,0.7) transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}
a{
	cursor:pointer;
	color: rgba(192,0,3,0.93);
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
}
.perfil{
	position: absolute;
	/*border:1px solid rgba(3,44,156,0.62);*/
	color: rgba(255,255,255,0.8);
	right: 0px;
	top: 0px;
	width: 300px;
	height: 100px;
	z-index: 200;
	text-align: right;
	line-height: 11px;
	padding-right: 105px;
}
.foto-perfil{
	position: absolute;
	/*border:1px solid rgba(3,44,156,0.62);*/
	right: 0px;
	top: 0px;
	width: 100px;
	height: 100px;
	border-radius:8px;
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
	background-color:rgba(210,210,210,0.95);
	background-repeat: no-repeat;
	background-size: 100px;
	background-position: right;
}
table.centro{
	z-index: 10;
	border-radius:4px;
	background-color:#f3f3f3;
	padding: 1%;
	margin:10px auto;
	position:static;
	-webkit-box-shadow:0 10px 10px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow:0 10px 10px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow:0 10px 10px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	opacity:0.9;
	font-weight:bold;
	letter-spacing:0.03em;
}
.centro{
	z-index: 10;
	border-radius:4px;
	background-color:#f3f3f3;
	padding: 0.5%;
	margin:10px auto;
	position:static;
	-webkit-box-shadow:0 10px 10px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow:0 10px 10px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow:0 10px 10px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	opacity:0.9;
	font-weight:bold;
	letter-spacing:0.03em;
}
table{
	border-color:transparent;
}
table.listado-bordes{
	border-collapse: collapse;
	border-bottom:1px solid rgba(135,135,135,0.20);
	border-left:1px solid rgba(135,135,135,0.20);
	border-right:1px solid rgba(135,135,135,0.20);
}
.espacio-tabla-principal{
	padding-top: 10px;
}
.puntero:hover{
	background-color: rgba(255,0,0,0.60);
	color: rgba(0,0,0,1.00);
	cursor: default;
	text-shadow: 0px 1px 0px rgba(0,0,0,0.30);
}
.formulario-datos{
	float: left;
	width: 25%;
	padding-top: 2px;
	padding-bottom: 2px;
}
.ventana-respuesta{
	background:#000000;
	width: 100%; 
	height: 100%;
	filter:alpha(opacity=50); 
	opacity:0.5; 
	margin: 0px;
	position: absolute; 
	left: 0px; 
	top: 0px;
	right: 0px;
	z-index:1000; 
	cursor: wait;   
	margin: 0px;
	padding: 0px;
	display: none;
}
.respuesta{
	position: absolute;
	padding-left: 2%;
	padding-top: -50px;
}
.img-ingreso{
	background-image: url(../imagenes/login.png);
	background-size: 30%;
	background-repeat: no-repeat;
	
}

/**************ventana emergente*******************/

.respuesta-div{
	width:45%; 
	position:absolute; 
	top:50%; left:51.5%; 
	margin-top:-15%; 
	margin-left:-25%; 
	padding:20px 10px 10px 20px;
	color: rgba(255,0,0,1.00);
	font-family:'fuente_texto'; 
	font-size:20px;
	background: rgba(255,255,255,0.8);
	border-radius: 10px;
	-webkit-box-shadow:0 10px 10px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 0, 0, 0.25) inset;
	-moz-box-shadow:0 10px 10px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 0, 0, 0.25) inset;
	box-shadow:0 10px 10px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 0, 0, 0.25) inset;
}

.ver_menu, .visible {
	display:block;
}
.ocultar_menu, .invisible {
	display:none;
}

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

.alerta{
	background-image: url(../imagenes/alerta.png);
	background-repeat: no-repeat;
	background-position:0px -3px;
	padding-left: 45px;
	padding-bottom: 10px;
	line-height: 60px;
}
hr {
	padding-bottom: -10px;
	margin: 0px;
}
fieldset{
	border-radius: 5px;
	border:1px solid rgba(0,0,0,0.35);
}
legend{
	color: rgba(0,0,0,0.8);
}
input[type="text"] {
	display: block;
	margin: 0;
	font-family: 'fuente_texto';
	font-size: 14px;
	appearance: none;
	box-shadow: none;
	padding: 1px 1px 1px 10px;
	border: solid 1px rgba(0,0,0,0.5);
	transition: box-shadow 0.3s, border 0.3s;
	font-weight: bold;
}
input[type="text"]:focus {
	border: solid 1px #707070;
	box-shadow: 0 0 5px 1px #969696;
	background: rgba(255,0,0,0.1);
}
input[type="text"]:disabled {
	box-shadow: 0 0 1px 1px rgba(255,0,0,0.7);
	background: rgba(0,0,0,0.2);
}
input[type="date"] {
	border-radius: 3px;
	display: block;
	margin: 0;
	font-family: 'fuente_texto';
	font-size: 14px;
	appearance: none;
	box-shadow: none;
	padding: 1px 1px 1px 10px;
	border: solid 1px rgba(0,0,0,0.5);
	transition: box-shadow 0.3s, border 0.3s;
	font-weight: bold;
}
input[type="date"]:focus {
	border: solid 1px #707070;
	box-shadow: 0 0 5px 1px #969696;
	background: rgba(255,0,0,0.1);
}
select {
	border-radius: 3px;
	display: block;
	margin: 0;
	font-family: 'fuente_texto';
	font-size: 14px;
	appearance: none;
	box-shadow: none;
	padding: 1px 1px 1px 10px;
	border: solid 1px rgba(0,0,0,0.4);
	transition: box-shadow 0.3s, border 0.3s;
	font-weight: bold;
}
select:focus {
	border: solid 1px #707070;
	box-shadow: 0 0 5px 1px #969696;
	background: rgba(255,0,0,0.1);
}
textarea {
	display: block;
	margin: 0;
	font-family: 'fuente_texto';
	font-size: 14px;
	appearance: none;
	box-shadow: none;
	padding: 1px 1px 1px 10px;
	border: solid 1px rgba(0,0,0,0.5);
	transition: box-shadow 0.3s, border 0.3s;
	font-weight: bold;
}
textarea:focus {
	border: solid 1px #707070;
	box-shadow: 0 0 5px 1px #969696;
	background: rgba(255,0,0,0.1);
}
input[type="password"] {
	display: block;
	margin: 0;
	font-family: 'fuente_texto';
	font-size: 14px;
	appearance: none;
	box-shadow: none;
	padding: 1px 1px 1px 10px;
	border: solid 1px rgba(0,0,0,0.5);
	transition: box-shadow 0.3s, border 0.3s;
}
input[type="password"]:focus {
	border: solid 1px #707070;
	box-shadow: 0 0 5px 1px #969696;
	background: rgba(255,0,0,0.1);
}

.txt-completo{
	width: 95%;
}

input[type="button"] {
    -moz-box-shadow: inset 0 0 0 1px #63ad0d;
    -webkit-box-shadow: inset 0 0 0 1px #63ad0d;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #f5f5f5;
    color: rgba(0,0,0,0.8);
    display: inline-block;
    font: bold 13px Arial;
    margin: 1px 1px 1px 0;
    padding: 5px 20px;
    position: relative;
    text-align: center;
    text-decoration: none;
    background: #d1d1d1;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d1d1d1), to(#afafaf));
    background: -moz-linear-gradient(#d1d1d1, #afafaf);
    background: linear-gradient(#d1d1d1, #afafaf);
    border: solid 1px #b4b4b4;
    border-bottom: solid 3px #878787;
    text-shadow: 0 1px 0 #d6d6d6;
	cursor: pointer;
}
 
input[type="button"]:hover {
    box-shadow: inset 0 0 0 1px #e67e7b;
    color: #fff;
    text-shadow: 0 1px 0 #bd2524;
    background: #ce2424;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ce2424), to(#f97779));
    background: -moz-linear-gradient(#ce2424, #f97779);
    background: linear-gradient(#ce2424, #f97779);
    border: solid 1px #be2424;
    border-bottom: solid 3px #bd2524;
    box-shadow: inset 0 0 0 1px #e67e7b;
}
 
input[type="button"]:active {
    background: #ce2424;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ce2424), to(#f97779));
    background: -moz-linear-gradient(#ce2424, #f97779);
    background: linear-gradient(#ce2424, #f97779);
    border: solid 1px #be2424;
    box-shadow: inset 0 10px 15px 0 #bd2524;
}
input[type="submit"] {
    -moz-box-shadow: inset 0 0 0 1px #63ad0d;
    -webkit-box-shadow: inset 0 0 0 1px #63ad0d;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #f5f5f5;
    color: rgba(0,0,0,0.8);
    display: inline-block;
    font: bold 13px Arial;
    margin: 1px 1px 1px 0;
    padding: 5px 20px;
    position: relative;
    text-align: center;
    text-decoration: none;
    background: #d1d1d1;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d1d1d1), to(#afafaf));
    background: -moz-linear-gradient(#d1d1d1, #afafaf);
    background: linear-gradient(#d1d1d1, #afafaf);
    border: solid 1px #b4b4b4;
    border-bottom: solid 3px #878787;
    text-shadow: 0 1px 0 #d6d6d6;
	cursor: pointer;
}
 
input[type="submit"]:hover {
    box-shadow: inset 0 0 0 1px #e67e7b;
    color: #fff;
    text-shadow: 0 1px 0 #bd2524;
    background: #ce2424;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ce2424), to(#f97779));
    background: -moz-linear-gradient(#ce2424, #f97779);
    background: linear-gradient(#ce2424, #f97779);
    border: solid 1px #be2424;
    border-bottom: solid 3px #bd2524;
    box-shadow: inset 0 0 0 1px #e67e7b;
}
 
input[type="submit"]:active {
    background: #ce2424;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ce2424), to(#f97779));
    background: -moz-linear-gradient(#ce2424, #f97779);
    background: linear-gradient(#ce2424, #f97779);
    border: solid 1px #be2424;
    box-shadow: inset 0 10px 15px 0 #bd2524;
}

.pricing-table-highlighted .pricing-table-sign-up a {
    background: #628842;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#76a04f), to(#648a43));
    background-image: -webkit-linear-gradient(top, #76a04f, #648a43);
    background-image: -moz-linear-gradient(top, #76a04f, #648a43);
    background-image: -o-linear-gradient(top, #76a04f, #648a43);
    background-image: -ms-linear-gradient(top, #76a04f, #648a43);
    background-image: linear-gradient(to bottom, #76a04f, #648a43);
}

/*****************************/
/*********************
 * Graph Holder styles *
 *********************/

/** Graph Holder container **/
.graph-container {
    position: relative; /* required Y axis stuff, Graph Holder's left and bottom sides to be positions properly */
    display: inline-block; /* display: table may also work.. */
    padding: 0; /* let the bars position themselves */
    list-style: none; /* we don't want to see any default <ul> markers */
	margin: 20px 0 0 27%;
	font-size: 0.7em;
    /* Graph Holder's Background */
    background-image: -webkit-linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);
    background-image: -moz-linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);
    background-image: -o-linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);
    background-image: -ms-linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);
    background-image: linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);
    background-repeat: no-repeat;
    background-position: 0 -2.5em;
}

/* Graph Holder bottom side */
.graph-container:before {
    position: absolute;
    content: "";

    bottom: 0;
    left: -1.25em; /* skew pushes it left, so we move it a bit in opposite direction */

    width: 100%; /* make sure it is as wide as the whole graph */

    height: 2.5em;
    background-color: rgba(183, 183, 183, 1);

    /* Make it look perspective */
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    transform: skew(-45deg);
}

/* Graph Holder left side */
.graph-container:after {
    position: absolute;
    content: "";

    top: 1.25em; /* skew pushes it up so we move it down a bit */
    left: -2.5em;

    width: 2.5em;
    background-color: rgba(129, 129, 129, 0.4);

    /* Make it look perspective */
    -webkit-transform: skew(0deg, -45deg);
    -moz-transform: skew(0deg, -45deg);
    -o-transform: skew(0deg, -45deg);
    -ms-transform: skew(0deg, -45deg);
    transform: skew(0deg, -45deg);
}

/* Bars and X-axis labels holder */
.graph-container > li {
    float: left; /* Make sure bars are aligned one next to another */
    position: relative; /* Make sure X-axis labels are positioned relative to this element */
}
/* A small hack to make Graph Holder's background side be wide enough
   ..because our bottom side is skewed and pushed to the right, we have to compensate it in Graph Holder's background */
.graph-container > li:nth-last-child(2) {
    margin-right: 2.5em;
}
/* X-axis labels */
.graph-container > li > span {
    position: absolute;
    left: -2em;
    bottom: -2em;
    width: 80%; /* play with this one if you change perspective depth */
    text-align: center;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
	color: #777;
    font-size: 1.2em;
}

/*******************************
 * Graph Y-axis Markers styles *
 *******************************/

/* Markers container */
.graph-container > li:last-child {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

/* Y-axis Markers list */
.graph-marker-container > li {
    position: absolute;
    left: -2.5em;
    bottom: 0;
    width: 100%;
    margin-bottom: 2.5em;
    list-style: none;
}

/* Y-axis lines general styles */
.graph-marker-container > li:before,
.graph-marker-container > li:after {
    content: "";
    position: absolute;
    border-style: none none dotted;
    border-color: rgba(100, 100, 100, .15);
    border-width: 0 0 .15em;
    background: rgba(133, 133, 133, .15);
}

/* Y-axis Side line */
.graph-marker-container > li:before {
    width: 3.55em;
    height: 0;
    bottom: -1.22em;
    left: -.55em;
    z-index: 2; /* be above .graph-container:after */

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* Y-axis Background line */
.graph-marker-container li:after {
    width: 100%;
    bottom: 0;
    left: 2.5em;
}

/* Y-axis text Label */
.graph-marker-container span {
    position: absolute;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
    top: 1em;
    left: -3.5em; /* just to push it away from the graph.. */
    width: 3.5em; /* give it absolute value of left offset */

    font-size: 1.5em;
}

/*********************
 * Graph Bars styles *
 *********************/

/* Bar wrapper - hides the inner bar when it goes below the bar, required */
.bar-wrapper {
    overflow: hidden;
}
/* Bar container - this guy is a real parent of a bar's parts - they all are positioned relative to him */
.bar-container {
    position: relative;
    margin-top: 2.5em; /* should be at least equal to the top offset of background casing */
    /* because back casing is positioned higher than actual bar */
    width: 12.5em; /* required, we have to define the width of a bar */
}
/* right bottom patch - make sure inner bar's right bottom corner is "cut" when it slides down */
.bar-container:before {
    content: "";
    position: absolute;
    z-index: 3; /* to be above .bar-inner */

    bottom: 0;
    right: 0;

    /* Use bottom border to shape triangle */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 2.5em 2.5em;
    border-color: transparent transparent rgba(183,183,183,1);
}

/** BACK CASING **/
/* Back panel */
.bar-background {
    width: 10em;
    height: 100%;
    position: absolute;
    top: -2.5em;
    left: 2.5em;
    z-index: 1; /* just for reference */
}

.bar-background:before,
.bar-background:after {
    content: "";
    position: absolute;
}

/* Bottom panel */
.bar-background:before {
    bottom: -2.5em;
    right: 1.25em;
    width: 10em;
    height: 2.5em;
	-webkit-backface-visibility: hidden;
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    transform: skew(-45deg);
}

/* Left back panel */
.bar-background:after {
    top: 1.25em;
    right: 10em;
    width: 2.5em;
    height: 100%;
	-webkit-backface-visibility: hidden;
    /* skew only the Y-axis */
    -webkit-transform: skew(0deg, -45deg);
    -moz-transform: skew(0deg, -45deg);
    -o-transform: skew(0deg, -45deg);
    -ms-transform: skew(0deg, -45deg);
    transform: skew(0deg, -45deg);
}

/** FRONT CASING **/
/* Front panel */
.bar-foreground {
    z-index: 3; /* be above .bar-background and .bar-inner */
}
.bar-foreground,
.bar-inner {
    position: absolute;
    width: 10em;
    height: 100%;
    top: 0;
    left: 0;
}

.bar-foreground:before,
.bar-foreground:after,
.bar-inner:before,
.bar-inner:after {
    content: "";
    position: absolute;
}

/* Right front panel */
.bar-foreground:before,
.bar-inner:before {
    top: -1.25em;
    right: -2.5em;
    width: 2.5em;
    height: 100%;
    background-color: rgba(160, 160, 160, .27);
    -webkit-transform: skew(0deg, -45deg);
    -moz-transform: skew(0deg, -45deg);
    -o-transform: skew(0deg, -45deg);
    -ms-transform: skew(0deg, -45deg);
    transform: skew(0deg, -45deg);
}

/* Top front panel */
.bar-foreground:after,
.bar-inner:after {
    top: -2.5em;
    right: -1.25em;
    width: 100%;
    height: 2.5em;
    background-color: rgba(160, 160, 160, .2);
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    transform: skew(-45deg);
}

/** BAR's inner block **/
.bar-inner {
    z-index: 2; /* to be above .bar-background */
    top: auto; /* reset position top */
    background-color: rgba(5, 62, 123, .6);
    height: 0;
    bottom: -2.5em;
    color: transparent; /* hide text values */
    -webkit-transition: height 0.8s ease-out, bottom 0.8s ease-out;
    -moz-transition: height 0.8s ease-out, bottom 0.8s ease-out;
    -o-transition: height 0.8s ease-out, bottom 0.8s ease-out;
    -ms-transition: height 0.8s ease-out, bottom 0.8s ease-out;
    transition: height 0.8s ease-out, bottom 0.8s ease-out;
}

/* Right panel */
.graph-container li:nth-child(1) .bar-inner,
.graph-container li:nth-child(1) .bar-inner:before { background-color: rgba(196, 109, 59, .6); }
.graph-container li:nth-child(1) .bar-inner:after { background-color: rgba(216, 143, 102, .7); }
.graph-container li:nth-child(2) .bar-inner,
.graph-container li:nth-child(2) .bar-inner:before { background-color: rgba(5, 123, 5, .3); }
.graph-container li:nth-child(2) .bar-inner:after { background-color: rgba(63, 122, 47, .4); }
.graph-container li:nth-child(3) .bar-inner,
.graph-container li:nth-child(3) .bar-inner:before { background-color: rgba(255, 0, 0, .3); }
.graph-container li:nth-child(3) .bar-inner:after { background-color: rgba(255, 71, 71, .3); }
.graph-container li:nth-child(4) .bar-inner,
.graph-container li:nth-child(4) .bar-inner:before { background-color: rgba(5, 62, 123, .6); }
.graph-container li:nth-child(4) .bar-inner:after { background-color: rgba(47, 83, 122, .7); }
.graph-container li:nth-child(5) .bar-inner,
.graph-container li:nth-child(5) .bar-inner:before { background-color: rgba(255, 248, 136, .3); }
.graph-container li:nth-child(5) .bar-inner:after { background-color: rgba(252, 248, 182, .5); }

/****************
 * FILL BUTTONS  *
 ****************/
input[name^="fill-"] {
    width:100px;
	height: 20px;
	position: absolute;
	opacity: 0;
	cursor: pointer;
	z-index: 100;
}

input[name^="fill-"] + label {
	width:100px;
	display: inline-block;
	margin: 0px;
	padding: 0px 2px;
	color: #777;
	line-height: 20px;	
	font-size: 12px;
	text-shadow: 1px 1px 1px #fff;
	border: 1px solid #fff;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
	box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
input[name^="fill-"]:checked + label {
    background: rgba(34, 35, 36, .7);
	border-color: #333;
	color: #fff;
	text-shadow: none;
	box-shadow: 0px 1px 1px rgba(255,255,255, 0.4);
}

/****************
 * SIZE BUTTONS  *
 ****************/
input[name^="resize-"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	z-index: 100;
	width: 70px;
	height: 20px;
	z-index: 100;
}
/* unselected color switch */
input[name^="resize-"] + label {
    color: #fff;
	display: inline-block;
    background: rgba(183, 172, 172, .7); 
	width: 70px;
	line-height: 20px;
	height: 20px;
    text-align: center;
	position: relative;
}
input[name^="resize-"]:checked + label {
    background: rgba(34, 35, 36, .7);
    color: #fff;
	box-shadow: 0px 1px 1px rgba(255,255,255,0.3);
}

input#graph-small:checked ~ .graph-container .bar-container,
input#graph-small:checked ~ .graph-container:after,
input#graph-small:checked ~ .graph-container > li:last-child  {
    height: 10em;
}

input#graph-normal:checked ~ .graph-container .bar-container,
input#graph-normal:checked ~ .graph-container:after,
input#graph-normal:checked ~ .graph-container > li:last-child  {
    height: 30em;
}

input#graph-large:checked ~ .graph-container .bar-container,
input#graph-large:checked ~ .graph-container:after,
input#graph-large:checked ~ .graph-container > li:last-child  {
    height: 60em;
}

/******************************************************************************
 **                                                                          **
 ** VARIABLES                                                                **
 **                                                                          **
 ******************************************************************************/

/****************
 * SPACING      *
 ****************/

/* spacing between bars */
.graph-container > li .bar-container {
    margin-right: 1.5em;
}
/* spacing before first bar */
.graph-container > li:first-child {
    margin-left: 1.5em;
}
/* spacing after last bar */
.graph-container > li:nth-last-child(2) .bar-container {
    margin-right: 1em;
}


.bar-background {
    background-color: rgba(160, 160, 160, .1);
}

.bar-background:before {
    background-color: rgba(160, 160, 160, .2);
}

.bar-background:after {
    background-color: rgba(160, 160, 160, .05);
}

.bar-foreground {
    background-color: rgba(160, 160, 160, .1);
}

.button-label{
	font-weight: bold;
	color: #000;
	line-height: 20px;
	display: inline;
	margin: 0 5px 0 5px;
}
.button-label:before { 
	content: " "; 
	white-space: wrap; 
}

.main span:first-of-type{
	margin-left: 20px;
	margin-bottom: 10px;
}
@media screen and (max-width: 1125px) {
	.graph-container{ font-size: 0.7em; }
}
@media screen and (max-width: 1050px) {
	.graph-container{ font-size: 0.6em; }
}
@media screen and (max-width: 900px) {
	.button-label{ margin: 0 10px 0 0; }
	.button-label:before { content:"\A"; white-space: pre;  }
	.main { padding: 20px 20px 40px; }
}
@media screen and (max-width: 765px) {
	.graph-container { font-size: 0.5em; }
}
@media screen and (max-width: 720px) {
	.graph-container { font-size: 0.45em; }
}
@media screen and (max-width: 630px) {
	.graph-container { font-size: 0.32em; }
}
@media screen and (max-width: 360px) {
	.graph-container { font-size: 0.22em; }
	.button-label{ margin: 0 5px 0 0;}
}
/**********************************/