/*---------------
Banc de Sang i Teixits - Comandes
Juny 2006
----------------------------------------------------------------------------------*/
* {
	margin: 0;
	padding: 0;
}
body {
	margin: 0 10px;
	padding: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	line-height: 120%;
	background: #ffffff;
}
body.imprimir {
	margin: 0 20px;
	padding: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	line-height: 120%;
	background: none;
}
#contenidor {
/*	margin: 0 auto 0 auto;*/
	/*width: 556px;*/
	background: #fff;
	width: 960px;
	margin:0 auto;
}
.imprimir #contenidor {
	width: 556px;
	background: #fff;
}
.clearit {
	clear: both;
}
.flotaesq {
	float: left;
}
.flotadreta {
	float: right;
}
p{line-height:1.45}


/*---------------
Capçalera
----------------------------------------------------------------------------------*/
#capcalera_print,
#capcalera {
	background: #fff;
	overflow: hidden;
/*	height: 40px;*/
	border-bottom: 1px solid #A3222A;
	margin-bottom: 15px;
	text-decoration: none;
	font-family:Arial,Verdana, sans-serif;
	font-weight: bold;
	color:#A3222A;
}
#capcalera_print {
	height: 52px;
}
h1 {
/*	float: left;*/
	font-size: 20px;
	padding: 0 0 12px 0;
/*	width: 60%;
	text-indent: -10000px;
	background: #fff url(../imatges/tit_comandes.gif) no-repeat top left;
	height: 28px;*/
	margin-top: 12px;
}
#capcalera_print h1 {
/*	background: #fff url(../imatges/tit_comandes_logo.gif) no-repeat top left;
	height: 52px;
	width: 450px;
	margin-top: 0;*/
}
#capcalera h1{margin:10px 0;}
#capcalera img{margin-top:10px;}
/*#log #capcalera p,
#canviclau #capcalera p,
#inici #capcalera p,
#novaComanda #capcalera p,
#confirmacioComanda #capcalera p,
#historicComandes #capcalera p,
#fitxa #capcalera p {
	float: right;
	width: 9%;
	text-align: right;
	background: #fff url(../imatges/icon_tornar.gif) no-repeat 0 0;
	font-size: 12px;
	color: #A3222A;
	margin-top: 14px;
}*/
#capcalera p.ajuda{float:right;text-align: right;/*background: url("../imatges/ico-info.gif") no-repeat scroll 100% 50% #FFFFFF;*/margin-top: 10px;padding: 4px 25px 4px 0;}

#inici #capcalera p,
#novaComanda #capcalera p,
#confirmacioComanda #capcalera p,
#historicComandes #capcalera p,
#fitxa #capcalera p {
	background: none;

	margin-top: 25px;
}
#capcalera p a {
		padding: 14px 0 14px 50px;
		color: #A3222A;
		text-decoration: none;
		background: #fff url(../imatges/ico-info.gif) no-repeat 0 50%;
}
#capcalera p a:hover {
	/*color: #ca040d;*/
	text-decoration: underline;
}
#dades {
	border-bottom: 1px solid #A3222A;
	margin-bottom: 10px;
	clear:both;
	min-height:70px;
}
#dades:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	padding-bottom: 15px;
}
* html #dades { /*Hack per a IE, perquè no entén la pseudo-classe :after que hem utilitzat per a fer el clear. + info: http://www.positioniseverything.net/easyclearing.html*/
	height: 1%;
	padding-bottom: 15px;
}
#identificacio p, #eines {
	display: block;
	float: left;
	width: 33%;
}
#identificacio a {
	color: #A3222A;
	text-decoration: none;
}
#identificacio a:hover {
	/*color: #ca040d;*/
	text-decoration: underline;
}
#identificacio em {
	font-style: normal;
	font-weight: bold;
}
#dades #eines p {
/*	text-indent: 60px;*/
	margin-bottom: 5px;
	padding-left: 15px;
	background: #fff url(../imatges/kland_doble_flecha.gif) no-repeat 0 50%;
}
#dades #eines a {
	color: #A3222A;
	text-decoration: none;

}
#dades #eines a:hover {
	/*color: #ca040d;*/
	text-decoration: underline;
}
#dades #eines em {
	font-style: normal;
	font-weight: bold;
}


/*---------------
Centre
----------------------------------------------------------------------------------*/
/*
p.foto {
	aabackground: #fff url(../imatges/foto_comandes.jpg) no-repeat 50% 0;
	apadding-top: 150px;
	apadding-bottom: 15px;
}
*/
p.suport {
	margin: 8px 0;
	background: #fff url(../imatges/kland_doble_flecha.gif) no-repeat 0 50%;
	padding-left: 15px;
}
p.suport a {
	color: #A3222A;
	text-decoration: none;
}
p.suport a em {
	font-style: normal;
	font-weight: bold;
}
p.suport a:hover {
	/*color: #ca040d;*/
	text-decoration: underline;
}
h2 {
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	background: #A3222A;
	padding: 7px 8px;
}
#novaComanda h2,
#confirmacioComanda h2,
#historicComandes h2,
#fitxa h2 {
	/*background: #A3222A url(../imatges/icon_nova_comanda.gif) no-repeat 5px 50%;*/
	padding:12px 10px;
	clear: both;
	margin-top: 20px;
}
/*#confirmacioComanda h2 {
	background-image: url(../imatges/icon_confirmacio_comanda.gif);
	margin-top: 17px;
}
#historicComandes h2,
#fitxa h2 {
	background-image: url(../imatges/icon_historic_comandes.gif);
}*/
#canviclau h2 {
	margin-top: 10px;
}
p.enrera {
	float: right;
	margin-top: -20px;
	margin-right: 8px;
	background: #A3222A url(../imatges/icon_tornar.gif) no-repeat 100% 50%;
	padding-right: 25px;
}
p.enrera a {
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	text-decoration: none;

}
p.enrera a:hover {
	/*color: #ca040d;*/
	text-decoration: underline;
}
#confirmacioComanda h3,
#fitxa h3 {
	font-size: 13px;
	font-weight: bold;
	background: #fff url(../imatges/kland_pastigris.gif) no-repeat 0 50%;
	padding-left: 13px;
	margin-top: 10px;
}
#confirmacioComanda #dadesComanda p,
#fitxa #dadesComanda p {
	padding-left: 13px;
	margin: 8px 0;
}
#confirmacioComanda #dadesComanda p em,
#fitxa #dadesComanda p em {
	font-style: normal;
	font-weight: bold;
}
p.flotaesq {
	width: 50%;
	font-size: 12px;
	padding:15px 0;
}
p.flotadreta {
	width: 40%;
	text-align: right;
	padding-right: 13px;
	margin-right: 4px;
	padding:15px 0;
}
p.flotadreta a {
	font-size: 12px;
	color: #A3222A;
	text-decoration: none;
	background: #fff url(../imatges/icon_historic_comandes.gif) no-repeat 0 50%;
	padding:14px  0 14px 50px;
}
p.flotadreta a:hover {
	/*color: #ca040d;*/
	text-decoration: underline;

}
p.print {
	padding-right: 0;
	margin-top: 20px;
}
p.print a{
	background: #fff url(../imatges/icon_vprint.gif) no-repeat 0 50%;
	padding:14px 0 14px 50px;
	margin-top: 10px;
}
* html #fitxa p.print {
	margin-right: -65px;
}
p.comandes {
	border: 1px solid #ccc;
	height: 4em;
	margin-top: 8px;
	padding-top:13px;
	display:block;
	padding-left: 20px;
	margin-bottom:25px;
}
p.comandes a{
	padding:12px 5px 12px 55px;
}
p.nova a {
	background: #fff url(../imatges/icon_nova_comanda.gif) no-repeat 0 50%;
}
p.novaComanda {background:none;padding:10px 0 0;float:none;display:block;width:100%;}
p.novaComanda a{
	background: #fff url(../imatges/icon_nova_comanda.gif) no-repeat 0 50%;
	padding: 14px 0 14px 55px;
}
p.historic a{
	background: url(../imatges/icon_historic_comandes.gif) no-repeat 0 50%;
}
/* Alex */
/* Anticosos */
/* Caixeta anticosos */
p.anticossos {
	border: 1px solid #ccc;
	height: 3em;
	margin-top: 8px;
	padding-left: 30px;
	background: #fff url(../imatges/icon_nova_comanda.gif) no-repeat 5px 50%;
}
p.anticossos a
{
	font-size: 14px;
	font-weight: bold;
	color: #A3222A;
	text-decoration: none;
	line-height: 250%;
}
p.anticossos a:hover {
	/*color: #ca040d;*/
	text-decoration: underline;
}
/* Fi Anticosos */


p.mostrant {
	border-bottom: 1px solid #A3222A;
	padding: 10px 0 10px 5px;
}
p.mostrant em {
	font-style: normal;
	font-weight: bold;
}
p.comandes a {
	font-size: 14px;
	font-weight: bold;
	color: #A3222A;
	text-decoration: none;
	line-height: 250%;
}
p.comandes a:hover {
	color: #ca040d;
	text-decoration: none;

}
p.errors {
	border: 1px solid #ccc;
	margin-top: 8px;
	padding: 13px 30px;
	font-weight: bold;
}
#canviclau p.errors,
#log p.errors {
	margin-top: 0;
	margin-bottom: 8px;
}

/*---------------
Formulari login
----------------------------------------------------------------------------------*/
p.intro{margin-bottom:20px;}
#log form {
	/*background: #e3e3e3 url(../imatges/ombra_log_psw2.gif) no-repeat 50% 100%;*/
	background-color: #e3e3e3;
	height: 50px;
	margin-bottom: 10px;
}
#log fieldset {
	border: 0;
	padding-top: 6px;
	margin-left: 15px;;
}
#log legend {
	display: none;
}
#log form p {
	display: inline;
	margin: 0 5px;
}
#log label#usuari,
#log label#clau1,
#log label#clau2,
#log label#clau {
	font-size: 12px;
	color: #666;
	background: #e3e3e3 url(../imatges/icon_usuari.gif) no-repeat 0 50%;
	padding-left: 12px;
}
#log label#clau {
	background-image: url(../imatges/icon_clau.gif);
	padding-left: 15px;
}
#log label#clau1,
#log label#clau2 {
	background-image: url(../imatges/icon_clau.gif);
	padding-left: 15px;
}
#log input.caixaText {
	font-size: 12px;
	padding: 5px;
	color: #666;
	width: 130px;
	height: 12px;
	border: 1px solid #ccc;
}
* html #log input.caixaText {
	height: 10px;
	padding: 3px;
}
#log input.boto {
	width: 71px;
	font-size: 12px;
}

/*---------------
Formulari canviclau
----------------------------------------------------------------------------------*/
#canviclau form {
	background-color: #e3e3e3;
	height: auto;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
#canviclau .info {
	padding: 10px 0 10px 0;
}

#canviclau fieldset {
	border: 0;
	padding-top: 6px;
	margin-left: 15px;;
}
#canviclau legend {
	display: none;
}
#canviclau form p {
	display: inline;
	margin: 0 5px;
}
#canviclau label#clau1,
#canviclau label#clau2 {
	font-size: 12px;
	color: #666;
	background: #e3e3e3 url(../imatges/icon_usuari.gif) no-repeat 0 50%;
	padding-left: 12px;
}
#canviclau label#clau1,
#canviclau label#clau2 {
	background-image: url(../imatges/icon_clau.gif);
	padding-left: 15px;
}
#canviclau input.caixaText {
	font-size: 12px;
	padding: 5px;
	color: #666;
	width: 100px;
	height: 12px;
	border: 1px solid #ccc;
}
* html #canviclau input.caixaText {
	height: 10px;
	padding: 3px;
}
#canviclau input.boto {
	width: 71px;
	font-size: 12px;
}

/*---------------
Formulari novaComanda
----------------------------------------------------------------------------------*/
#novaComanda h3 {
	background: #ebebeb url(../imatges/kland_pastigris.gif) no-repeat 10px 47%;
	font-size: 14px;
	font-weight: bold;
	padding: 5px 0 7px 23px;
	border: 1px solid #ccc;
	border-bottom: none;
}
#novaComanda h4 {
	width: 40%;
	color: #666;
	padding: 5px 0 4px 19px;
	font-size: 12px;
	font-weight: bold;
}
#novaComanda h4.flotadreta {
	text-align: right;
	padding-right: 14px;
}

div.missatge {
	clear: both;
	background: #FFF9BE url(../imatges/icon_avis.gif) no-repeat 10px 47%;
	margin: 34px 0 -14px 0;
	padding: 12px 4px 12px 38px;
}



#novaComanda p.missatge {
	clear: both;
	background: #FFF9BE url(../imatges/icon_avis.gif) no-repeat 10px 47%;
	margin: 34px 0 -14px 0;
	padding: 12px 4px 12px 38px;
}
* html #novaComanda p.missatge {
	margin-top: 8px;
	padding: 8px 4px 8px 38px;
}

#novaComanda p.color0 {
	background-color: #FFF9BE;
}
#novaComanda p.color1 {
	background-color: #FFBEBE;
}
#novaComanda p.color2 {
	background-color: #BECEFF;
}
#novaComanda p.color3 {
	background-color: #FFD6BE;
}
#novaComanda p.color4 {
	background-color: #BEFFCE;
}




#novaComanda p.avisos {
	clear: both;
	background-color: #FFBEC7;
	margin: 0 0 8px 0;
	padding: 12px;
	text-align: center;
}
#novaComanda form {
	width: 100%;
	margin-top: 13px;
}
#novaComanda form fieldset {
	border: 1px solid #ccc;
	border-top: none;
	margin-bottom: 15px;
	padding-left: 13px;
	padding-right: 13px;
	padding-bottom: 3px;
}
#novaComanda form legend {
	display: none;
}
#novaComanda form p {
	border-bottom: 1px solid #ccc;
	margin: 0 14px 0 19px;
	padding: 3px 0 15px 0;
	line-height: 200%;
	font-weight: bold;
}
#novaComanda form p.confirma {
	margin-left: 0;
	margin-right: 0;
}
#novaComanda form p.urgent {
	margin-left: 0;
	margin-right: 0;
}
* html #novaComanda form p {
	height: 1%;
}
#novaComanda form p:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
#novaComanda form p.ultim {
	border-bottom: none;
}
#novaComanda form p.confirma label {
	width: auto;
	float: left;
	background: #fff url(../imatges/kland_flecha_confirma.gif) no-repeat 0 50%;
	padding-left: 12px;
	margin-left: 5px;
}
#novaComanda form p.urgent label {
	width: auto;
	float: left;
	/*background: #fff url(../imatges/kland_flecha_confirma.gif) no-repeat 0 50%;*/
	padding-left: 12px;
	margin-left: 5px;
}
#novaComanda form input.check {
	width: auto;
	float: left;
	margin-top: 2px;
	border: none;
	margin-right: auto;
}
#novaComanda form p.enviar {
	margin: 10px 0;
	border: none;
}
#novaComanda form p.usuari {
	margin: 25px 0 3px 0;
	border: none;
}
#confirmacioComanda form input.boto,
#novaComanda form input.boto {
	/*width: 150px;*/
	float: none;
	margin: 8px 0 -7px 0;
	font-weight: bold;
	height: 35px;
	padding:0 10px;
	font-size: 12px;
	color: #333;
	font-weight: bold;
}
* html #confirmacioComanda form input.boto,
* html #novaComanda form input.boto {
	margin-bottom: 0;
/*	width: 100px; */
}
#novaComanda form input, #novaComanda form select.producte,#novaComanda form select.tipus  {padding: 3px;}
select option { padding-left: 3px;}
#novaComanda form textarea{margin-top:5px;}
#novaComanda form input.caixaText {
	font-size: 12px;
	color: #666;
	width: 69px;
	height: 15px;
	border: 1px solid #7f90b9;

	text-align: center;
}
#novaComanda form input.caixaNom {
	font-size: 12px;
	color: #666;
	width: 200px;
	border: 1px solid #7f90b9;
	padding: 3px;
}
#novaComanda form textarea.caixaObs {
	font-size: 13px;
	color: #666;
	width: 98%;
	height: 50px;
	border: 1px solid #7f90b9;
	padding: 3px;
}
#novaComanda form select.producte {
	font-size: 12px;
	color: #666;
	width: 80px;
}
#novaComanda form select.tipus {
	font-size: 12px;
	color: #666;
	width: 320px;
}
#novaComanda form select.subtipus {
	font-size: 12px;
	color: #666;
	width: 100px;
}
#novaComanda form select.productellarg {
	width: 250px;
}

#novaComanda #contenidor table {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	border: none;
	border-collapse: collapse;
}
#novaComanda #contenidor table caption {
	display: none;
}
#novaComanda #contenidor table thead th {
	color: #666;
	font-size: 12px;
	font-weight: bold;
	padding: 10px 0 0 2px;
	text-align: left;
}
#novaComanda #contenidor table tbody td {
	border-bottom: 1px solid #efefef;
	/*padding: 3px 0 3px 2px;*/
	font-size: 12px;
	color: #333;
	text-align: left;
	padding:10px 0 10px 2px;;
}

tr.linia:hover{background-color:#F7F7F7;}
#novaComanda #contenidor table tbody td.info-estocs {padding-left:10px;border-color:#fff;}
tr.info-estocs{background-color:#EBEBEB;}
tr.info-estocs:hover{background-color:#F7F7F7;}
/**
Alex
*/
.label_bold  {
	color: #666;
	font-size: 12px;
	font-weight: bold;
	padding: 3px 0 3px 2px;
}


#novaComanda #contenidor table tbody td.subtitol {
	color: #666;
	font-size: 12px;
	font-weight: bold;
}
#novaComanda .tit-subtractament{
color: #666;
font-weight: bold;
display:block;
margin-top:10px;
}
#novaComanda ul.subtractament {
	list-style: none;
	display:block;
}
#novaComanda ul.subtractament li {
	float: left;
	width: 14%;
	padding: .4em 0;
}
#novaComanda ul.subtractament li input{
margin-right:5px;
}

/*---------------
Taula confirmació de comanda
----------------------------------------------------------------------------------*/
#confirmacioComanda #contenidor table,
#fitxa #contenidor table {
	width: 100%;
	margin-top: 0;
	margin-bottom: 8px;
	border: none;
	border-collapse: collapse;
}
#confirmacioComanda #contenidor table caption,
#fitxa table caption {
	display: none;
}
#confirmacioComanda #contenidor table thead th,
#fitxa #contenidor table thead th {
	background: #ebebeb;
	font-size: 13px;
	font-weight: bold;
	padding: 4px 0 5px 13px;
	text-align: left;
}
#confirmacioComanda #contenidor table tbody td,
#fitxa #contenidor table tbody td {
	border-bottom: 1px solid #ccc;
	padding: 7px 0 8px 13px;
	font-size: 12px;
	color: #333;
}
#confirmacioComanda #contenidor table tbody td.ultim,
#fitxa #contenidor div.ultim {
	border-color: #A3222A;
}
#confirmacioComanda #contenidor table tbody td.subtitol,
#fitxa #contenidor table tbody td.subtitol {
	border-bottom: 2px solid #ebebeb;
	color: #666;
	font-size: 12px;
	font-weight: bold;
}
#confirmacioComanda #contenidor table tbody td.grup,
#fitxa #contenidor table tbody td.grup {
	font-weight: normal;
}
#confirmacioComanda #contenidor table tbody td.quantitat,
#fitxa #contenidor table tbody td.quantitat {
	text-align: right;
	padding-right: 2px;
}

/*---------------
Taula històric de comandes
----------------------------------------------------------------------------------*/
#historicComandes #contenidor table {
	width: 100%;
	margin-top: 8px;
	margin-bottom: 0;
	border: none;
	border-collapse: collapse;
}
#historicComandes #contenidor table caption {
	display: none;
}
#historicComandes #contenidor table tbody td  {
	padding: 7px 0 8px 10px;
	font-size: 12px;
	color: #333;
	background: #ebebeb;
	border-bottom: 6px solid #fff;
}
#historicComandes #contenidor table tbody td.numComanda,
#historicComandes #contenidor table tbody td em {
	font-style: normal;
	font-weight: bold;
}
#historicComandes #contenidor table tbody td.fitxa {
	color: #A3222A;
	font-weight: bold;
/*	background: #ebebeb url(../imatges/icon_mes_fitxa.gif) no-repeat 90% 50%;*/
	padding-right: 3px;
	text-align: right;
}
#historicComandes #contenidor table tbody td.fitxa a {
	color: #A3222A;
	text-decoration: none;
	padding-right: 5px;
}
#historicComandes #contenidor table tbody td.fitxa a:hover {
	/*color: #ca040d;*/
	text-decoration: underline;
}
#historicComandes #contenidor table tbody td.fitxa a img{
	border: none;
}


#historicComandes #navegacioHistoric {
	border-top: 1px solid #ccc;
	margin: 5px auto 0 auto;
	padding: 7px 0 2px 0;
	font-size: 12px;
	color: #666;
	text-align: center;
	position: relative;
}
* html #historicComandes #navegacioHistoric { /*Li donem una dimensió per a que funcioni el posicionament dels links "Anterior" i "Següent"*/
	width: 100%;
}
#historicComandes #navegacioHistoric p.pagines {
	width: 60%;
}
* html #historicComandes #navegacioHistoric p.pagines {
	margin: 0;
}
#historicComandes #navegacioHistoric p.pagines em {
	font-style: normal;
	font-weight: bold;
}
#historicComandes #navegacioHistoric p.pagines span.paginaActual {
	color: #A3222A;
	font-weight: bold;
}
#historicComandes #navegacioHistoric p.anterior {
	position: absolute;
	top: 7px;
	left: 0;
}
#historicComandes #navegacioHistoric p.seguent {
	position: absolute;
	top: 7px;
	right: 0;
}
#historicComandes #navegacioHistoric p.anterior {
	background: #fff url(../imatges/icon_flecha_anterior.gif) no-repeat 0 50%;
	padding-left: 15px;
}
#historicComandes #navegacioHistoric p.seguent {
	background: #fff url(../imatges/icon_fletxa_seguent.gif) no-repeat 100% 50%;
	padding-right: 15px;
}
#historicComandes #navegacioHistoric p.pagines {
	margin: auto;
}
#historicComandes #navegacioHistoric p a {
	color: #666;
	text-decoration: none;
}
#historicComandes #navegacioHistoric p a:hover {
	color: #666;
	text-decoration: underline;
}


/*---------------
Peu
----------------------------------------------------------------------------------*/
p#pujar {
	background: #fff url(../imatges/icon_pujar.gif) no-repeat 0 50%;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #666;
	margin-top: 15px;
	padding: 8px 15px;
	font-size: 12px;
	font-weight: bold;
}
#historicComandes p#pujar {
	margin-top: 5px;
}
#fitxa p#pujar {
	border-top: none;
}
p#pujar a {
	text-decoration: none;
	color: #666;
}
p#pujar a:hover {
	text-decoration: underline;
}
p#peu-comandes {
	color: #333;
	text-align: center;
	padding: 10px 0;
	background: #fff;
}
p#peu-comandes a {
	color: #A3222A;
}
p#peu-comandes a:hover {
	/*color: #ca040d;*/
	text-decoration: underline;
}


















/* reserve */
.graph-container {
    position: relative;
    display: inline-block;
    padding: 0;
    list-style: none;
    margin: 40px 0 0;
    font-size: 0.8em;
    width: 100%;
}
.graph-container > li {
    display: block;
    float: left;
    height: auto;
    padding: 0 0 1.5rem;

	width: 11.11111%;
    position: relative;
    margin-bottom: 3rem;
    list-style: none;
    margin-left: 0;
}
main .graph-container > li:before{
    content:none;
}
.graph-container > li > span {
    position: absolute;
    left: 0;
    top: -1.5em;
    width: 80%;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
    color: #000;
    font-size: 1.25em;
}
.bar-container {
    position: relative;
    margin-top: 1em;
    width: 52px;
    background-color:#E4E4E4;
    height: 10rem;
}
.bar-inner {
    z-index: 2;
    position: absolute;
    background-color: #bc2b30;
    height: 0;
    width: 100%;
    bottom: 0;
    color: transparent;
    -webkit-transition: height 0.8s ease-in-out, bottom 0.8s ease-in-out;
    -moz-transition: height 0.8s ease-in-out, bottom 0.8s ease-in-out;
    -o-transition: height 0.8s ease-in-out, bottom 0.8s ease-in-out;
    -ms-transition: height 0.8s ease-in-out, bottom 0.8s ease-in-out;
    transition: height 0.8s ease-in-out, bottom 0.8s ease-in-out;
}
.bar-inner span{
    bottom: 5px;
    position: absolute;
    /*color:#fff;*/
    color:#000;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 2s ease-in-out, bottom 0.8s ease-in-out;
    text-transform: uppercase;
    font-size:12px;
    min-width: 48px;
}
.bar-inner img{
   position: absolute;
   left: 50%;
   top:0;
   opacity: 0;
}
.bar-inner img.complet{
   transform: translate(-50%,-88%);
}
.bar-inner img.avis{
   transform: translate(-50%,-130%);
}
.in-view .bar-inner img{
    opacity: 1;
}
.in-view .bar-inner span{
    opacity: 1;
}

.avis-reserva-donar-sang{
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.25s ease-in-out,visibility 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out,visibility 0.25s ease-in-out;
    background-color: #34342F;
    padding: 1em 1em 0;
    font-size: rem-calc(14);
    max-width: 250px;
    text-align: left;
    color:#fff;
    z-index: 10;
    transform: translate(-5%,-136%);
}
.avis-reserva-donar-sang.active{
        opacity: 1;
        visibility: visible;
}
.avis-reserva-donar-sang:after{
    position: absolute;
    left: 10%;
    bottom: -29px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0 0;
    border-color: #34342F transparent transparent transparent;
}

/*@media only screen and (min-width: 64.0625em){*/
	.graph-container > li > span {
		font-size: 1.8em;
	}

    .bar-container {
        height: 15rem;
        width: 86px;
    }
    .bar-inner img.complet{
        transform: translate(-50%,-100%);
    }
    .bar-inner span{
        min-width: 80px;
        font-size:16px;
        bottom: 10px;
        line-height: 1.2em;
        text-align: center;
    }

	.bar-inner span em {
		display: block;
		font-size: .7em;
	}

    .graph-container > li {
        margin-bottom: .5rem;
    }
/*}*/



.bar-inner.emergencia {
        background-color: #f8696b;
}
.bar-inner.alarma {
        background-color: #fb9d75;
}
.bar-inner.pre-alarma {
        background-color: #fed17f;
}
.bar-inner.normal {
        background-color: #dfe282;
}
.bar-inner.optim {
        background-color: #a1d07e;
}
.bar-inner.superlatiu {
        background-color: #63be7b;
}