/* GENERAL */

body 	{ font-family: 'Roboto', sans-serif; margin-bottom: 60px; }
a 		{ color: #333; }
a:hover { color: #309c40; text-decoration: none; }

/* IDIOMES */

nav#idiomes {
	height: 30px;
	float:right; 
	margin-right: 50px; }

nav#idiomes li { 
	display: inline;
	font-size: 0.9em; 
	margin-right: 5px; }
nav#idiomes li.actiu a { 
	color: rgba(48, 156, 64, 0.5);
	border-bottom: 1px solid;
	cursor:not-allowed; }

/* HEADER */

header {
	background: #E7ECEA; 
	height: 100px; 
	line-height: 2em; }

#contenidorHeader {
	margin: 0; 
	display: table;
	width: 100%;
	-webkit-box-shadow: 0px 15px 20px -10px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 15px 20px -10px rgba(0,0,0,0.15);
	box-shadow: 0px 15px 20px -10px rgba(0,0,0,0.15); }

#logoUAB { 
	display: table-cell;
	vertical-align: middle;
	background-color: #163A48 ; 
	background-image: url('../img/logoUAB.svg');
	background-position: 50% 50%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    text-indent: -9999px; 
    width: 15%;
    height: 100px; }

#titolServei { 
	display: table-cell;
	background-color: #1D5D66;
	background-image: url('../img/teclat.jpg');
	vertical-align: middle; 
	width: 40%;table-layout: fixed;
    height: 100px; }

	#titolServei h1 {
		color: #fff;
		font-weight: normal;
		text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.52);
		margin: 0 25px;	}

nav#seleccio {
	background: #1D5D66;
	display: table-cell;
	text-align: center;
	width: 45%;
	vertical-align: middle; }

nav#seleccio div {
	display: table-cell;
	width: 15%;
	text-align: center;
    height: 100px;
	background-color: #E7ECEA;
    background-position: 50% 30%;
    background-size: 40px;
    background-repeat: no-repeat; }

	nav#seleccio div:hover {
		background-color: #F3F5F4 ; }

nav#seleccio div a {
	display: block;
	height: 100px;
	width: 100%;
	padding-top: 45%;
	font-weight: bold; }
	
nav#seleccio div.actiu { 
	background-color: #fff; 
	position: relative; }

nav#seleccio div.actiu:after, 
nav#seleccio div.actiu:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	z-index: 900 }

nav#seleccio div.actiu:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 15px;
	margin-left: -15px; }

nav#seleccio div.actiu:before {
	border-color: rgba(208, 213, 213, 0);
	border-top-color: #D0D5D5;
	border-width: 23px;
	margin-left: -23px; }

	/* Sortir de la pà gina  */

	nav#seleccio.sortir div {
		float: right; }


.selAlumnes {
	background-image: url('../img/icona_alumnes.svg'); }
.selPDI {
	background: url('../img/icona_pdi.svg'); }
.selPAS {
	background-image: url('../img/icona_pas.svg'); }
.selTanca {
	background-image: url('../img/icona_tancar.svg');
	background-position: 50% 50% !important; }

/* CONTINGUT */

#content { 
	margin-top: 4em;
	padding: 10px 50px; 
	color: #333; 
	font-size: 0.9em; 
	line-height: 1.2em; }

#sidebar { margin-top:2em; }

	#sidebar a { 
		text-decoration: underline;
		color: #309c40; }
		#sidebar a:hover { color: #333 }

	.avis {
		border: 2px solid #E7ECEA;
		border-radius: 3px;
		margin-bottom: 5px;
		background: #fff; }

	.avis h3 {
		margin: 15px;
		font-size: 1.4em;
		font-weight: bold; 
		color: #7C7F7F; }

	.avis table, .avis p {
		font-size: 0.95em; }
	.avis p {
		margin: 15px;
		line-height: 1.4em; }
	
	.avis.nou {
		border: 2px solid #163A48;
		border-radius: 0 3px 3px 3px;
		margin-top: 2.5em; }

	.avis.nou:before {
		float: left;
		height: 25px;
		line-height: 8px;
		margin: -25px 0 0 -2px;
		padding: 7px;
		color: #fff;
		background: #163A48;
		border: 2px solid #163A48;
		border-radius: 3px 3px 0 0;	}

	.avis.alerta {
		border: 2px solid #DC2E14;
		border-radius: 0 3px 3px 3px;
		margin-top: 2.5em; }

	.avis.alerta:before {
		float: left;
		height: 25px;
		line-height: 8px;
		margin: -25px 0 0 -2px;
		padding: 7px;
		color: #fff;
		background: #DC2E14;
		border: 2px solid #DC2E14;
		border-radius: 3px 3px 0 0;	}

	.avis.nou.ca:before 		{ content: "Nou avís!"; }
	.avis.nou.es:before 		{ content: "Nuevo aviso!"; }
	.avis.nou.en:before 		{ content: "New warning!"; }
	.avis.alerta.ca:before 		{ content: "Alerta"; }
	.avis.alerta.es:before 		{ content: "Alerta"; }
	.avis.alerta.en:before 		{ content: "Alert"; }

/* LLISTAT */

ul.grup { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
	border-top: 1px solid #d8d8d8; 
	border-bottom: 1px solid #fff; }

ul.grup li.item { 
	display: table;
	width: 100%;
	border-bottom: 1px solid #d8d8d8;
	border-top: 1px solid #fff;
	margin: 0;
	padding: 0; }

ul.grup li.item .desc {
	padding: 6px 7px;
    float: none;
    display: table-cell;
	vertical-align: middle; }

ul.grup li.item.pulsor .desc {
	font-weight: bold; }

ul.grup li.item .status {
	display: table-cell;
	vertical-align: middle;
	width: 20px; }

	li.item.multi .status {width: 18px }
	
	div.semafor {
		margin: 0 auto;
		width: 14px;
		height: 14px;
		border-radius: 50%; }
		
	.status.inactiu 	.semafor 	{ background: #cccccc; }
	.status.obert 		.semafor 	{ background: #309c40; }
	.status.obert25 	.semafor 	{ background: linear-gradient(180deg, #309c40 50%, #FAA72C 50%); }
	.status.obert50 	.semafor 	{ background: #FAA72C; }
	.status.obert75 	.semafor 	{ background: linear-gradient(180deg, #FAA72C 50%, #DC2E14 50%); }
	.status.tancat 		.semafor 	{ background: #DC2E14; }

	.status.pletemp 	.semafor 	{ 
		background: #FAA72C; border-radius: 50%; overflow: hidden; position: relative; z-index: 9; }
	.status.pletemp 	.semafor:before {
		content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: #DC2E14;  
		-webkit-animation: animtop 3s forwards, animtop2 2s forwards;;
		animation: animtop 3s forwards, animtop2 2s forwards;
		animation-iteration-count:infinite; }
		@-webkit-keyframes animtop 	{ 0%{top: 100%;} 	100%{top: 0} 	}
		@keyframes animtop 			{ 0%{top: 100%;} 	100%{top: 0%} 	}
		@-webkit-keyframes animtop2 { 0%{top: 0%;} 		100%{top: 100} 	}
		@keyframes animtop2 		{ 75%{top: 0%;}  	100%{top: 100}	}

	.idiomaND .desc::after	{ 
		width: 28px; height: 12px; background-image: url('../img/idiomaND.svg'); content:" "; display: inline-block;
		background-size: 12px 28px; background-repeat: no-repeat; background-position: center center; }

	.pagament { display: inline; margin-left: 5px}
	.pagament::before { 
		width: 24px; height: 12px; background-image: url('../img/visa.svg'); content:" "; display:inline-block;
		background-size: 85%;  background-repeat: no-repeat; background-position: center center;}
	.pagament::after { 
		width: 24px; height: 12px; background-image: url('../img/mastercard.svg'); content:" "; display:inline-block;
		background-size: 24px 12px;  background-repeat: no-repeat; background-position: center center;}

/* FOOTER */

footer { 
	position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
	background: #fff;
	padding: 0; 
	font-size: 0.85em; 
	-webkit-box-shadow: 0px -10px 40px -20px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px -10px 40px -20px rgba(0,0,0,0.25);
	box-shadow: 0px -10px 40px -20px rgba(0,0,0,0.25);}

footer h3 { 
	margin: -20px 25px 0;
	padding: 7px 14px;
	float: left;
	background: #fff;
	border-radius: 3px 3px 0 0;
	font-size: 1.1em;
	font-weight: bold; }

footer .row { 
	margin: 10px 0 0 0; 
	padding: 0; 
	clear: both; }

footer ul, footer .item { 
	border: none !important; }

footer .item a:hover::after { 
	display:none !important; }



/* Entorn TST / CCR */

.entorn {
  width: 200px;
  background: #e43;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  position: fixed;
  box-shadow: 0 0 3px rgba(0,0,0,.3);
  font-weight: bold;
  font-size: 2em;
  z-index: 9000;
}


/* ATERRATGE */

.popover {
    font-family: "Roboto";
    background-color: #E7ECEA;
    border: none;
    border: none;
    border-radius: 3px;
    -webkit-box-shadow: 0 3px 3pxpx rgba(0, 0, 0, .25);
    box-shadow: 0 3px 3px rgba(0, 0, 0, .25);
    line-break: auto;
}
.popover.bottom {
    margin-top: 15px;
}
.popover.bottom > .arrow {
	left: -10px;
}
.popover.bottom > .arrow:after {
    border-bottom-color: #E7ECEA;
}
.popover button.tanca {
	float: right;
	margin: 10px;
	border: none;
	border-radius: 3px;
	padding: 4px 10px;
	background: #fff;
	outline: 0;
	text-transform: uppercase;
	font-weight: bold;
	color: #1D5D66;
}
.popover button.tanca:hover {
	background: #1D5D66;
	color: #fff;
}

.tour-tour-element { 
	border: none !important;
	box-shadow: 0 0 5px rgba(0,0,0,.3); 
	background: #fff;
	-webkit-animation: pulsate .8s infinite alternate;
	-moz-animation: pulsate .8s infinite alternate;
	-animation: pulsate .8s infinite alternate; }

	@-webkit-keyframes pulsate {
	    from { box-shadow: 0 0 8px #FF9B05; }
	    to { box-shadow: 0 0 20px #FF9B05; }	}
	@-moz-keyframes pulsate {
	    from { box-shadow: 0 0 10px #121212; }
	    to { box-shadow: 0 0 20px #ffffff; }	}
	@keyframes pulsate {
	    from { box-shadow: 0 0 10px #121212; }
	    to { box-shadow: 0 0 20px #ffffff; }	}
	
	.tour-tour-element .status {
		width: 30px !important; }

.tour-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1100;
	background-color:#172126;
	opacity: 0.85;
	filter: alpha(opacity=85); }

.tour-step-backdrop {
	position: relative;
	z-index: 1101; }
.tour-step-backdrop > td {
	position: relative;
	z-index: 1101; }
.tour-step-background {
	position: absolute !important;
	z-index: 1100;
	background: inherit;
	border-radius: 6px; }
.popover[class*="tour-"] {
	z-index: 1102; }
.popover[class*="tour-"] .popover-navigation {
	padding: 9px 14px;
	overflow: hidden; }
.popover[class*="tour-"] .popover-navigation *[data-role="end"] {
	float: right; }
.popover[class*="tour-"] .popover-navigation *[data-role="prev"],
.popover[class*="tour-"] .popover-navigation *[data-role="next"],
.popover[class*="tour-"] .popover-navigation *[data-role="end"] {
	cursor: pointer; }
.popover[class*="tour-"] .popover-navigation *[data-role="prev"].disabled,
.popover[class*="tour-"] .popover-navigation *[data-role="next"].disabled,
.popover[class*="tour-"] .popover-navigation *[data-role="end"].disabled {
	cursor: default; }
.popover[class*="tour-"].orphan {
	position: fixed;
	margin-top: 0; }
.popover[class*="tour-"].orphan .arrow {
	display: none; }




/*! TOOLTIPS basat en:
* http://kushagragour.in/lab/hint/
* Copyright (c) 2016 Kushagra Gour 

 * HINT.css is a tooltip library made in pure CSS.
 * Source: https://github.com/chinchang/hint.css
 * Release under The MIT License
 *
 */

[class*="hint"] {
	position: relative;
	display: inline-block; }

	[class*="hint"]:before, [class*="hint"]:after {
		position: absolute;
		bottom: 100%;
		left: 50%;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		visibility: hidden;
		opacity: 0;
		z-index: 1000000;
		pointer-events: none;
		-webkit-transition: 0.3s ease;
		-moz-transition: 0.3s ease;
		transition: 0.3s ease;
		-webkit-transition-delay: 0ms;
		-moz-transition-delay: 0ms;
		transition-delay: 0ms; }

	[class*="hint"]:hover:before, [class*="hint"]:hover:after {
		visibility: visible;
		opacity: 1; }

	[class*="hint"]:hover:before, [class*="hint"]:hover:after {
		-webkit-transition-delay: 100ms;
		-moz-transition-delay: 100ms;
		transition-delay: 100ms; }

	[class*="hint"]:before {
		content: '';
		position: absolute;
		margin-bottom: -11px;
		left: calc(50% - 6px);
		background: transparent;
		border: 6px solid transparent;
		border-top-color: #383838;
		z-index: 1000001; }

	[class*="hint"]:after {
		width: 300px;
		background: #383838;
		color: white;
		padding: 8px 10px;
		font-size: 13px;
		font-family: Consolas;
		line-height: 14px;
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		transform: translateX(0); 
		text-shadow: 0 -1px 0px black;
		box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
		
		margin-left: -12px; }

	.hint:hover:before {
		-webkit-transform: translateY(-8px);
		-moz-transform: translateY(-8px);
		transform: translateY(-8px); }

	.hint:hover:after {
		-webkit-transform: translateY(-8px);
		-moz-transform: translateY(-8px);
		transform: translateY(-8px); }

	[class*="hint"][aria-label]:after {
		content: attr(aria-label); }
	[class*="hint"][data-hint]:after {
		content: attr(data-hint); }
	[aria-label='']:before, [aria-label='']:after,
	[data-hint='']:before,
	[data-hint='']:after {
		display: none !important; }

	.hint.obert:after 		{ border-left:4px solid #309c40; }
	.hint.inactiu:after 	{ border-left:4px solid #cccccc; }
	.hint.pletemp:after,
	.hint.obert25:after,
	.hint.obert50:after,
	.hint.obert75:after 	{ border-left:4px solid #FAA72C; }
	.hint.tancat:after 		{ border-left:4px solid #DC2E14; }

	.desc .hint:after,
	.navstatus.hint:after {
		background: #ffffff;
		color: #383838; 
		font-family: Roboto;
		font-size: 12px;
		line-height: 14px;
		text-shadow: 0 -1px 0px #ffffff; }
		.navstatus.hint:after {
		width: auto;}
	.desc .hint:before,
	.navstatus.hint:before {
		border-top-color: #fff; }
	.desc .hint:before, .desc .hint:after,
	.navstatus.hint:before, .navstatus.hint:after {
		position: absolute;
		bottom: 100%;
		left: 10%;}

/* PÃ gines Extres: Info Box */

body.missatge #content {
    display: table;
	position: absolute;
    height: 70%;
    width: 100%; }
body.missatge #content .row {
	display: table-cell;
    vertical-align: middle; }

body.missatge .avis h3 	{ font-size: 1.75em; }
body.missatge .avis p 	{ font-size: 1.15em; }

/* PÃ gines Extres: Requeriments SIGMA */
.table {border-bottom: 1px solid #fff;}
.table > thead > tr > th {
    border-bottom: 2px solid #2C8A91;
	box-shadow: none;
	border-top: none !important; }
.table td, 
.table th {
    border-top: 1px solid #ffffff !important; 
	box-shadow: inset 0px -1px 0px 0px rgba(216,216,216,1);
 }

.navstatus {
	display: block;
	width: 25px;
	height: 25px; }

.avis .nota {
	margin: 10px;
	background: #F3F5F4; }
.avis .nota h4 {
	font-size: 1em;
	font-weight: bold;
	padding: 5px; }
.avis .nota p {
	margin: 0; 
	padding: 5px; }

.anim { margin: 15px; float: left;}

/* Pà gines Extres: Taula Matrícula */

.table.matricula { margin: 20px 0 40px; }
.table.matricula a { 
	text-decoration: underline;
	color: #309c40; }
	.table.matricula a:hover { color: #333 }
.superat {
	color: #309c40;
	font-weight: bold; }
.nosuperat {
	color: #DC2E14;
	font-weight: bold; }

/* MEDIA QUERIES */

@media all and (max-width: 991px) {
	body {
    	margin-bottom: 0; }
	footer {
		position: relative; 
		margin-top: 4em;
		height: auto; }
	footer .row {
		margin: 0; }
	body.info header {
    	height: 100px; }
}

@media all and (max-width: 750px) {
	nav#idiomes {
    	margin-right: 5px; }
	header {
    	height: 200px; }
	#contenidorHeader {
		display: block;
		clear: both; }
	#logoUAB {
		display: block;
		float: left;
		width: 30%; }
	#titolServei {
		display: table;   
		float: left;
		width: 70%; }
	#titolServei h1 {
		display: table-cell;
		vertical-align: middle;
		padding-left: 25px;
		font-size: 32px; }
	nav#seleccio {
		display: table;
		width: 100%; }
		nav#seleccio.sortir {
			display: none; }
	nav#seleccio div {
		width: 1%;
		background-position: 30% 50%;
		text-align: left;
		height: 70px; }
	nav#seleccio div a {
		height: 70px;
		padding: 0;
    	text-indent: 49%;
		line-height: 70px; }
	#content {
    	margin-top: 1em;
		padding: 5px; }	
		body.info #content {
			margin: 10px;
			margin-top: 2.2em; }	
	#sidebar {
	    clear: both;
	    margin: 15px;
    	margin-top: 4em; }	
}