Structures

<div style="height: 250px;">
	<div id="accordion" class="accordion">
		<div>
			<div class="g-content light g-data-table">
				<div class=" g-data-table-header g-h-sm">
					<span class="g-text-1 g-clickable-underline"> Lista de consentimentos não assinalados (13)</span>
				</div>
			</div>
		</div>
		<div class="g-content light g-data-table">
			<div class="g-data-table-body">
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div>
			<div class="g-content light g-data-table">
				<div class=" g-data-table-header g-h-sm">
					<span class="g-text-1 g-clickable-underline"> Lista de consentimentos não assinalados (13)</span>
				</div>
			</div>
		</div>
		<div class="g-content light g-data-table">
			<div class="g-data-table-body">
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div>
			<div class="g-content light g-data-table">
				<div class=" g-data-table-header g-h-sm">
					<span class="g-text-1 g-clickable-underline"> Lista de consentimentos não assinalados (13)</span>
				</div>
			</div>
		</div>
		<div class="g-content light g-data-table">
			<div class="g-data-table-body">
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
				<div class="g-data-table-row g-h-sm">
					<div class="g-row">
						<div class="pure-u-1-24"></div>
						<div class="pure-u-2-24">
							<span class="g-text-10">17 MAR</span>
						</div>
						<div class="pure-u-14-24">
							<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
						</div>
						<div class="pure-u-4-24">
							<span class="g-text-12 ">Data Proposta 17-03-2016</span>
						</div>
						<div class="pure-u-2-24">
							<select class="g-select-1 ">
								<option>estado</option>
								<option>estado2</option>
							</select>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {
			$("#accordion").accordion({
				heightStyle: 'fill',
				collapsible: true
			});
		});
	});
</script>

<div class="g-alarmistic info">
	<div class="g-title">
		<div class="g-icon g-icon-tools-notificacoes"></div>
		<div class="g-message-title">
			<div class="g-text-21">Título da notificação</div>
			<div class="g-text-21">Detalhe critico da notificação</div>
		</div>
		<div class="g-icon-close"></div>
	</div>
	<div class="separator"></div>
	<div class="g-message">
		<div class="g-text-7">Algum detalhe sobre a notificação</div>
	</div>
</div>

<div class="g-alarmistic error">
	<div class="g-title">
		<div class="g-icon g-icon-tools-alerta"></div>
		<div class="g-message-title">
			<div class="g-text-21">Título da notificação</div>
			<div class="g-text-21">Detalhe critico da notificação</div>
		</div>
		<div class="g-icon-close"></div>
	</div>
	<div class="separator"></div>
	<div class="g-message">
		<div class="g-text-7">Algum detalhe sobre a notificação</div>
	</div>
</div>

<div class="g-alarmistic sucess">
	<div class="g-title">
		<div class="g-icon g-icon-tools-visto"></div>
		<div class="g-message-title">
			<div class="g-text-21">Título da notificação</div>
			<div class="g-text-21">Detalhe critico da notificação</div>
		</div>
		<div class="g-icon-close"></div>
	</div>
	<div class="separator"></div>
	<div class="g-message">
		<div class="g-text-7">Algum detalhe sobre a notificação</div>
	</div>
</div>

<div class="g-alarmistic generic">
	<div class="g-title">
		<div class="g-icon g-icon-tools-notificacoes"></div>
		<div class="g-message-title">
			<div class="g-text-21">Título da notificação</div>
			<div class="g-text-21">Detalhe critico da notificação</div>
		</div>
		<div class="g-icon-close"></div>
	</div>
	<div class="separator"></div>
	<div class="g-message">
		<div class="g-text-7">Algum detalhe sobre a notificação</div>
	</div>
</div>

<div class="g-c-container light">
	<div class="title">
		<span class="g-text-1 g-clickable-underline">Título do conteúdo</span>
	</div>
	<div class="body">
		(Insira aqui o conteúdo desejado)
	</div>
</div>

<div class="g-content light g-data-table">
	<div class="g-data-table-header g-h-sm">
		<span class="g-text-1 g-clickable-underline"> Lista de consentimentos não assinalados (13)</span>
	</div>
	<div class="g-data-table-body">
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-sm">
			<div class="g-row">
				<div class="pure-u-1-24"></div>
				<div class="pure-u-2-24">
					<span class="g-text-10">17 MAR</span>
				</div>
				<div class="pure-u-14-24">
					<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
				</div>
				<div class="pure-u-4-24">
					<span class="g-text-12 ">Data Proposta 17-03-2016</span>
				</div>
				<div class="pure-u-2-24">
					<select class="g-select-1 ">
						<option>estado</option>
						<option>estado2</option>
					</select>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="g-content light g-data-table g-collapse">
	<div data-toggle="collapse" data-target="#demo" class="g-data-table-header g-h-md">
		<span class="g-text-1 g-clickable-underline"> Lista de consentimentos não assinalados (13)</span>
	</div>
	<div id="demo" class="collapse" aria-expanded="false">
		<div class="g-data-table-body">
			<div class="g-data-table-row g-h-sm">
				<div class="g-row">
					<div class="pure-u-1-24"></div>
					<div class="pure-u-2-24">
						<span class="g-text-10">17 MAR</span>
					</div>
					<div class="pure-u-14-24">
						<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
					</div>
					<div class="pure-u-4-24">
						<span class="g-text-12 ">Data Proposta 17-03-2016</span>
					</div>
					<div class="pure-u-2-24">
						<select class="g-select-1 ">
							<option>estado</option>
							<option>estado2</option>
						</select>
					</div>
				</div>
			</div>
			<div class="g-data-table-row g-h-sm">
				<div class="g-row">
					<div class="pure-u-1-24"></div>
					<div class="pure-u-2-24">
						<span class="g-text-10">17 MAR</span>
					</div>
					<div class="pure-u-14-24">
						<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
					</div>
					<div class="pure-u-4-24">
						<span class="g-text-12 ">Data Proposta 17-03-2016</span>
					</div>
					<div class="pure-u-2-24">
						<select class="g-select-1 ">
							<option>estado</option>
							<option>estado2</option>
						</select>
					</div>
				</div>
			</div>
			<div class="g-data-table-row g-h-sm">
				<div class="g-row">
					<div class="pure-u-1-24"></div>
					<div class="pure-u-2-24">
						<span class="g-text-10">17 MAR</span>
					</div>
					<div class="pure-u-14-24">
						<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
					</div>
					<div class="pure-u-4-24">
						<span class="g-text-12 ">Data Proposta 17-03-2016</span>
					</div>
					<div class="pure-u-2-24">
						<select class="g-select-1 ">
							<option>estado</option>
							<option>estado2</option>
						</select>
					</div>
				</div>
			</div>
			<div class="g-data-table-row g-h-sm">
				<div class="g-row">
					<div class="pure-u-1-24"></div>
					<div class="pure-u-2-24">
						<span class="g-text-10">17 MAR</span>
					</div>
					<div class="pure-u-14-24">
						<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
					</div>
					<div class="pure-u-4-24">
						<span class="g-text-12 ">Data Proposta 17-03-2016</span>
					</div>
					<div class="pure-u-2-24">
						<select class="g-select-1 ">
							<option>estado</option>
							<option>estado2</option>
						</select>
					</div>
				</div>
			</div>
			<div class="g-data-table-row g-h-sm">
				<div class="g-row">
					<div class="pure-u-1-24"></div>
					<div class="pure-u-2-24">
						<span class="g-text-10">17 MAR</span>
					</div>
					<div class="pure-u-14-24">
						<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
					</div>
					<div class="pure-u-4-24">
						<span class="g-text-12 ">Data Proposta 17-03-2016</span>
					</div>
					<div class="pure-u-2-24">
						<select class="g-select-1 ">
							<option>estado</option>
							<option>estado2</option>
						</select>
					</div>
				</div>
			</div>
			<div class="g-data-table-row g-h-sm">
				<div class="g-row">
					<div class="pure-u-1-24"></div>
					<div class="pure-u-2-24">
						<span class="g-text-10">17 MAR</span>
					</div>
					<div class="pure-u-14-24">
						<span class="g-text-13 ">Ecocardiograma com Estudo Doppler - Cardiologia</span>
					</div>
					<div class="pure-u-4-24">
						<span class="g-text-12 ">Data Proposta 17-03-2016</span>
					</div>
					<div class="pure-u-2-24">
						<select class="g-select-1 ">
							<option>estado</option>
							<option>estado2</option>
						</select>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="/assets/toolkit/lib/jQuery/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
	$(".g-content.light.g-data-table > div[data-toggle='collapse']").click(function() {
		$(".g-content.light.g-data-table").has("div[data-toggle='collapse']").toggleClass("g-collapse");
	});
</script>

<div class="g-content warnings g-data-table g-collapse">
	<div data-target="#demo_warnings" data-toggle="collapse" class="g-data-table-header g-h-md">
		<div>
			<span class="g-icon g-icon-delete g-warnings"></span>
			<span class="g-text-15 g-clickable-underline"> Lista de consentimentos não assinalados (13)</span>
		</div>
	</div>
	<div id="demo_warnings" class="collapse" aria-expanded="false">
		<div class="g-data-table-body bg-light">
			<div id='g_glist_warnings' class="g-glist"></div>
		</div>
	</div>
</div>



<script id="glist_template" type="text/x-jquery-tmpl">
	<div class="g-data-table-row g-h-sm">
        <div class="g-row">
            <div class="pure-u-1-24">
                <div class="g-container g-color-dark"></div>
            </div>
            <div class="pure-u-23-24">
                <span class="g-text-13 g-clickable-underline">{{Description}}</span>
            </div>
        </div>
    </div>
</script>
<script>
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {

			function onRowSelected(element, item) {}

			$('#g_glist_warnings').GList({
				isEditable: true,
				datasource: [],
				scrollBarCustomization: {
					avanced: {
						updateOnBrowserResize: false,
						updateOnContentResize: false
					},
					scrollButtons: {
						enable: false
					}
				},
				createScroll: false,
				templates: $("#glist_template").html(),
				controlsdata: [{
					controlClass: 'g-data-table-row-warnings',

					initialization: {
						onRowSelected: onRowSelected
					}
				}]
			});

			var dataSource = [{
					Id: 1,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 2,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 3,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 4,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 5,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 6,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 7,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				}
			]

			$('#g_glist_warnings').data('GList').setDataSource(dataSource);
		});
	});
</script>

<div class="g-content dark g-data-table">
	<div class="g-data-table-header g-h-md">
		<div class="g-row">
			<div>
				<span class="g-text-15">Ações Contextuais</span>
			</div>
		</div>
	</div>
	<div class="g-data-table-body">
		<div class="g-data-table-row g-h-md">
			<div class="g-row">
				<div class="pure-u-1-24">
					<span class="g-icon g-icon-delete g-row-icon"></span>
				</div>
				<div>
					<span class="g-text-15">Desistência</span>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-md">
			<div class="g-row">
				<div class="pure-u-1-24">
					<span class="g-icon g-icon-delete g-row-icon"></span>
				</div>
				<div>
					<span class="g-text-15">Desistência</span>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-md">
			<div class="g-row">
				<div class="pure-u-1-24">
					<span class="g-icon g-icon-delete g-row-icon"></span>
				</div>
				<div>
					<span class="g-text-15">Desistência</span>
				</div>
			</div>
		</div>
		<div class="g-data-table-row g-h-md">
			<div class="g-row">
				<div class="pure-u-1-24">
					<span class="g-icon g-icon-delete g-row-icon"></span>
				</div>
				<div>
					<span class="g-text-15">Desistência</span>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="g-expandable-menu-collapsed">
	<p class="g-icon g-icon-tools-seta-esquerda g-collapse"></p>
</div>
<div class="g-content dark g-data-table g-expandable-menu hidden">
	<div class="g-data-table-header">
		<div class="g-row">
			<div>
				<span class="g-text-17">Ações Contextuais</span>
			</div>
			<div class="g-icon g-icon-tools-seta-direita g-header-icon collapse-me"></div>
		</div>
	</div>
	<div class="g-data-table-body">
		<div class="g-data-table-row">
			<div class="g-row">
				<div class="pure-u-1-24">
					<span class="g-icon g-icon-delete g-row-icon"></span>
				</div>
				<div>
					<span class="g-text-17">Desistência</span>
				</div>
			</div>
		</div>
		<div class="g-data-table-row">
			<div class="g-row">
				<div class="pure-u-1-24">
					<span class="g-icon g-icon-delete g-row-icon"></span>
				</div>
				<div>
					<span class="g-text-17">Desistência</span>
				</div>
			</div>
		</div>
		<div class="g-data-table-row">
			<div class="g-row">
				<div class="pure-u-1-24">
					<span class="g-icon g-icon-delete g-row-icon"></span>
				</div>
				<div>
					<span class="g-text-17">Desistência</span>
				</div>
			</div>
		</div>
		<div class="g-data-table-row">
			<div class="g-row">
				<div class="pure-u-1-24">
					<span class="g-icon g-icon-delete g-row-icon"></span>
				</div>
				<div>
					<span class="g-text-17">Desistência</span>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(document).ready(function() {
		$('.g-content.dark .g-data-table-row').click(function() {
			$(this).addClass('selected').siblings().removeClass('selected')
		})

		$(".g-expandable-menu-collapsed").click(function(e) {
			$(".g-expandable-menu-collapsed").addClass("hidden");
			$(".g-expandable-menu").removeClass("hidden");
		});

		$(".collapse-me").click(function(e) {
			$(".g-expandable-menu").addClass("hidden");
			$(".g-expandable-menu-collapsed").removeClass("hidden");
		});
	});
</script>

<div class="g-content light g-data-table-2-rows">

	<div class="header-row g-h-md">
		<div class="g-row">
			<div>
				<span class="g-text-1">Colheitas</span>
			</div>
		</div>
	</div>

	<div class="header-row g-h-md">
		<span class="g-text-13">21389381297312</span>
		<div class="pull-right pointer">
			<span class="g-text-12">25/08/2016</span>
		</div>
		<div> <span class="g-text-13">Cenas Cenas |</span> <span class="g-text-12"> Cenas</span></div>
	</div>

</div>

<div class="g-content warnings g-data-table">
	<div id='g_glist_warnings_id' class="g-glist"></div>
</div>

<script id="glist_header_template" type="text/x-jquery-tmpl">
	<div class="g-data-table-header g-h-md">
        <div>
            <span id="g_checkbox_test_glist" class="g-md light check-controller"></span>
            <span class="g-text-15 g-clickable-underline"> Lista de consentimentos não assinalados (13)</span>
        </div>
    </div>
</script>


<script id="glist_template_2" type="text/x-jquery-tmpl">
	<div class="g-data-table-row g-h-sm">
        <div class="g-row">
            <div class="pure-u-1-24">
                <div class="check text-center circle g-md"></div>
            </div>
            <div class="pure-u-1-24">
                <div class="g-container"></div>
            </div>
            <div class="pure-u-22-24">
                <span class="g-text-13 g-clickable-underline">{{Description}}</span>
            </div>
        </div>
    </div>
</script>
<script>
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {

			function onRowSelected(element, item) {}

			$('#g_glist_warnings_id').GList({
				isEditable: true,
				headerTemplate: $("#glist_header_template").html(),
				datasource: [],
				scrollBarCustomization: {
					avanced: {
						updateOnBrowserResize: false,
						updateOnContentResize: false
					},
					scrollButtons: {

						enable: false
					}
				},
				checkboxCreatorClass: 'check',
				checkboxController: {
					controlClass: 'check-controller'
				},
				templates: $("#glist_template_2").html(),
				controlsdata: [{
						controlClass: 'g-data-table-row-warnings',
						initialization: {
							onRowSelected: onRowSelected
						}
					},
					{
						controlName: 'popover',
						controlClass: 'g-clickable-underline',
						initialization: {
							placement: "bottom",
							container: 'body',
							content: "Escreve a tua mensagem aqui!",
							trigger: "click",
							shown: function() {
								alert("popover aberta");
							}
						}
					}
				]
			});

			var dataSource = [{
					Id: 1,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 2,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 3,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 4,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 5,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 6,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 7,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 8,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 9,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 10,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 11,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 12,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 13,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 14,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 15,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 16,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
				{
					Id: 17,
					Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013"
				},
			]

			$('#g_glist_warnings_id').data('GList').setDataSource(dataSource);

		});
	});
</script>

<div class="g-content warnings g-data-table">
	<div id='g_glist_warnings_id_no_items' class="g-glist"></div>
</div>

<script id="glist_header_template_no_items" type="text/x-jquery-tmpl">
	<div class="g-data-table-header g-h-md">
        <div>
            <span class="g-icon g-icon-delete g-warnings"></span>
            <span class="g-text-15 g-clickable-underline"> Lista de consentimentos não assinalados (13)</span>
        </div>
    </div>
</script>


<script id="glist_template_2_no_items" type="text/x-jquery-tmpl">

	<div class="g-data-table-row g-h-sm">
                <div class="g-row">
                    <div class="pure-u-1-24">
                        <div class="g-container"></div>
                    </div>
                    <div class="pure-u-23-24">
                        <span class="g-text-13 g-clickable-underline">{{Description}}</span>
                    </div>
                </div>

    </div>
</script>
<script>
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {

			function onRowSelected(element, item) {}

			$('#g_glist_warnings_id_no_items').GList({
				isEditable: true,
				headerTemplate: $("#glist_header_template_no_items").html(),
				datasource: [],
				showDefaultOption: true,
				createScroll: false,
				templates: $("#glist_template_2_no_items").html(),
				controlsdata: [{
					controlClass: 'g-data-table-row-warnings',

					initialization: {
						onRowSelected: onRowSelected
					}
				}]
			});

			// var dataSource = [
			// 	{ Id: 1, Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013" },
			// 	{ Id: 2, Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013" },
			// 	{ Id: 3, Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013" },
			//     { Id: 4, Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013" },
			//     { Id: 5, Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013" },
			//     { Id: 6, Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013" },
			//     { Id: 7, Description: "Valor em débito: 150€ relativos à fatura HCPF2013-20103 em 12-Fev-2013" }
			// ]

			//$('#g_glist_warnings_id_no_items').data('GList').setDataSource(dataSource);
			//$('#g_glist_warnings_id_no_items').data('GList').setDataSource([]);
		});
	});
</script>

<div class="table-align">
	<div class="row">
		<div class="cell"><span class="g-text-3">teste:</span><span class="g-text-4"> teste</span></div>
		<div class="cell"><span class="g-text-3">teste:</span><span class="g-text-4"> teste</span></div>
		<div class="cell"><span class="g-text-3">teste:</span><span class="g-text-4"> teste</span></div>
		<div class="cell"><span class="g-text-3">teste:</span><span class="g-text-4"> teste</span></div>
	</div>
	<div class="row">
		<div class="cell"><span class="g-text-3">teste:</span><span class="g-text-4"> teste</span></div>
		<div class="cell"><span class="g-text-3">teste:</span><span class="g-text-4"> teste</span></div>
		<div class="cell"><span class="g-text-3">teste:</span><span class="g-text-4"> teste</span></div>
		<div class="cell"><span class="g-text-3">teste:</span><span class="g-text-4"> teste</span></div>
	</div>
</div>

<div>
	<span class="g-text-3">Ações Disponíveis:</span>
	<span class="g-text-6 g-clickable-underline">Assinar</span>
	<span class="g-text-6 g-clickable-underline">Digitalizar</span>
	<span class="g-text-6 g-clickable-underline">Imprimir</span>
</div>

<div class="g-filter">
	<span class="g-first">
		Ver:
	</span>
	<span class="g-property">
		Todos
	</span>
	<span class="g-property">
		Nome da mãe
	</span>
	<span class="g-property">
		Internamento
	</span>
	<span class="g-property">
		Falecido
	</span>
</div>

<script>
	(function() {
		$("span.g-property").click(function() {
			$("span.g-property").removeClass("selected");
			$(this).addClass("selected");
		});
	});
</script>

<div class="g-layout-filters">
	<div class="g-filter-right g-row pure-u-1">
		<div class="filter">
			<div class="g-filter">
				<span class="g-first">
					Filtrar por:
				</span>
				<span class="g-property">
					Serviço
				</span>
			</div>
		</div>

		<div class="filter">
			<span class="g-text-13">
				Data
			</span>
			<span class="g-text-12">
				Inicio
			</span>
			<div id="g_datepicker_begin" class="g-datepicker filter"> </div>
			<span class="g-text-12">
				Fim
			</span>
			<div id="g_datepicker_end" class="g-datepicker filter"> </div>
		</div>

		<div class="filter">
			<span class="g-text-13">
				Data Proposta
			</span>
			<span class="g-text-12">
				Inicio
			</span>
			<div id="g_datepicker_begin_1" class="g-datepicker filter"> </div>
			<span class="g-text-12">
				Fim
			</span>
			<div id="g_datepicker_end_1" class="g-datepicker filter"> </div>
		</div>
	</div>
</div>

<script>
	(function() {
		$("span.g-property").click(function() {
			$("span.g-property").removeClass("selected");
			$(this).addClass("selected");
		});
	});
</script>
<script>
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {

			$('#g_datepicker_begin').GlinttDatePicker({
				theme: 'medium',
				format: 'YYYY-MM-DD',
				placeholder: '<aaaa/mm/dd>',
				showIcon: true,
				iconClass: 'g-icon g-icon-tools-seta-baixo',
				showCleanIcon: false,
				includeTime: false,
				hasPrefix: false,
				isEditable: true,
				onChange: function(plug, val) {
					if (val != undefined) {}
				}
			});

			$('#g_datepicker_end').GlinttDatePicker({
				theme: 'medium',
				format: 'YYYY-MM-DD',
				placeholder: '<aaaa/mm/dd>',
				showIcon: true,
				iconClass: 'g-icon g-icon-tools-seta-baixo',
				showCleanIcon: false,
				includeTime: false,
				hasPrefix: false,
				isEditable: true,
				onChange: function(plug, val) {
					if (val != undefined) {}
				}
			});

			$('#g_datepicker_begin_1').GlinttDatePicker({
				theme: 'medium',
				format: 'YYYY-MM-DD',
				placeholder: '<aaaa/mm/dd>',
				showIcon: true,
				iconClass: 'g-icon g-icon-tools-seta-baixo',
				showCleanIcon: false,
				includeTime: false,
				hasPrefix: false,
				isEditable: true,
				onChange: function(plug, val) {
					if (val != undefined) {}
				}
			});

			$('#g_datepicker_end_1').GlinttDatePicker({
				theme: 'medium',
				format: 'YYYY-MM-DD',
				placeholder: '<aaaa/mm/dd>',
				showIcon: true,
				iconClass: 'g-icon g-icon-tools-seta-baixo',
				showCleanIcon: false,
				includeTime: false,
				hasPrefix: false,
				isEditable: true,
				onChange: function(plug, val) {
					if (val != undefined) {}
				}
			});

		});
	});
</script>

<div class="g-layout-filters">
	<div class="g-filter-right g-row pure-u-1">
		<div class="filter">
			<div class="g-filter">
				<span class="g-first">
					Filtrar por:
				</span>
			</div>
		</div>

		<div class="filter">
			<div id="g_checkbox_porto"></div>
		</div>


		<div class="filter">
			<span class="g-text-13">
				Unidade
			</span>
			<div id="g_glinttcombo_unidade" class="g-glinttcombo-filter-multi"></div>
		</div>

		<div class="filter">
			<span class="g-text-13">
				A Partir de
			</span>
			<div id="g_datepicker_apartir" class="g-datepicker filter"> </div>
		</div>

		<div class="filter">
			<div class="g-filter">
				<span class="g-text-13">
					ou
				</span>
				<span class="g-property">
					1 Semana
				</span>
				<span class="g-property">
					2 Semanas
				</span>
				<span class="g-property">
					1 Mês
				</span>
				<span class="g-property">
					3 Meses
				</span>
				<span class="g-property">
					6 Meses
				</span>
				<span class="g-property">
					1 Ano
				</span>
			</div>
		</div>

		<div class="filter">
			<div class="g-filter">
				<span class="g-text-13">
					Preferências
				</span>
				<span class="g-property">
					Seg
				</span>
				<span class="g-property">
					Ter
				</span>
				<span class="g-property">
					Qua
				</span>
				<span class="g-property">
					Qui
				</span>
				<span class="g-property">
					Sex
				</span>
				<span class="g-property">
					Sáb
				</span>
				<span>
					|
				</span>
				<span class="g-property">
					Manhã
				</span>
				<span class="g-property">
					Tarde
				</span>
			</div>
		</div>

	</div>
</div>


<script>
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {

			(function() {
				$("span.g-property").click(function() {
					$("span.g-property").removeClass("selected");
					$(this).addClass("selected");
				});
			});

			$('#g_checkbox_porto').GlinttCheckBox({
				initialValue: false,
				isEditable: true,
				theme: 'dark',
				labelUnique: 'Porto',
				onSelectionChanged: function(element, value) {

				}
			});

			$('#g_datepicker_apartir').GlinttDatePicker({
				theme: 'medium',
				format: 'YYYY-MM-DD',
				placeholder: '<aaaa/mm/dd>',
				showIcon: true,
				iconClass: 'g-icon g-icon-tools-seta-baixo',
				showCleanIcon: false,
				includeTime: false,
				hasPrefix: false,
				isEditable: true,
				onChange: function(plug, val) {
					if (val != undefined) {}
				}
			});

			var data = [];
			for (var i = 1; i < 100; i++) {
				data.push({
					Id: i,
					Description: "Unidade " + i
				});
			}
			$('#g_glinttcombo_unidade').GlinttCombo({
				id: "g_glinttcombo_id_unidade",
				name: "g_glinttcombo_name_unidade",
				hardcodedOptions: data,
				textProperty: "Description",
				valueProperty: "Id",
				prefix: undefined,
				showDropDownButton: false,
				dropDownOnFocus: true,
				mode: "dropdown",
				enableClearButton: false,
				nullText: '<nºde écran>',
				isFullComboBox: false,
				/*has perfix*/
				theme: "MEDIUM",
				itemTemplate: null,
				multiSelection: {
					enabled: true,
					addWithKeyModifier: false,
					showCheckboxes: true,
					itemSeparator: ', '
				}
			});

		});
	});
</script>

<div class="g-layout-filters no-bold">
	<div class="g-filter-right g-row pure-u-1">
		<div class="filter">
			<div class="g-filter">
				<span class="g-first">
					Filtrar por:
				</span>
				<span class="g-property">
					Serviço
				</span>
			</div>
		</div>

		<div class="filter">
			<span class="g-text-13">
				Data
			</span>
			<span class="g-text-12">
				Inicio
			</span>
			<div id="g_datepicker_begin_2" class="g-datepicker filter"> </div>
			<span class="g-text-12">
				Fim
			</span>
			<div id="g_datepicker_end_2" class="g-datepicker filter"> </div>
		</div>

		<div class="filter">
			<span class="g-text-13">
				Data Proposta
			</span>
			<span class="g-text-12">
				Inicio
			</span>
			<div id="g_datepicker_begin_2_1" class="g-datepicker filter"> </div>
			<span class="g-text-12">
				Fim
			</span>
			<div id="g_datepicker_end_2_1" class="g-datepicker filter"> </div>
		</div>
	</div>
</div>

<script>
	(function() {
		$("span.g-property").click(function() {
			$("span.g-property").removeClass("selected");
			$(this).addClass("selected");
		});
	});
</script>
<script>
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {

			$('#g_datepicker_begin_2').GlinttDatePicker({
				theme: 'medium',
				format: 'YYYY-MM-DD',
				placeholder: '<aaaa/mm/dd>',
				showIcon: true,
				iconClass: 'g-icon g-icon-tools-seta-baixo',
				showCleanIcon: false,
				includeTime: false,
				hasPrefix: false,
				isEditable: true
			});

			$('#g_datepicker_end_2').GlinttDatePicker({
				theme: 'medium',
				format: 'YYYY-MM-DD',
				placeholder: '<aaaa/mm/dd>',
				showIcon: true,
				iconClass: 'g-icon g-icon-tools-seta-baixo',
				showCleanIcon: false,
				includeTime: false,
				hasPrefix: false,
				isEditable: true
			});

			$('#g_datepicker_begin_2_1').GlinttDatePicker({
				theme: 'medium',
				format: 'YYYY-MM-DD',
				placeholder: '<aaaa/mm/dd>',
				showIcon: true,
				iconClass: 'g-icon g-icon-tools-seta-baixo',
				showCleanIcon: false,
				includeTime: false,
				hasPrefix: false,
				isEditable: true
			});

			$('#g_datepicker_end_2_1').GlinttDatePicker({
				theme: 'medium',
				format: 'YYYY-MM-DD',
				placeholder: '<aaaa/mm/dd>',
				showIcon: true,
				iconClass: 'g-icon g-icon-tools-seta-baixo',
				showCleanIcon: false,
				includeTime: false,
				hasPrefix: false,
				isEditable: true
			});

		});
	});
</script>

<div class="pure-g" style="margin-bottom: 10px;">

	<div class="g-input-text inline pure-u-16-24">

		<div class="form-label">
			<label for="input-medium_1">Título</label>
		</div>

		<div class="form-input">
			<input id="input-medium_1" name="g-textbox" class="g-textbox g-form" />
		</div>
	</div>

	<div class="g-input-text inline pure-u-8-24">

		<div class="form-label">
			<label for="input-medium_2">Privacidade</label>
		</div>

		<div class="form-input">
			<input id="input-medium_2" name="g-textbox" class="g-textbox g-form" />
		</div>

	</div>

</div>

<textarea name="g-textarea" class="g-textarea light-dark" style="height: calc(100% - 35px);"> </textarea>


<script>
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {
			$('input#input-medium_1').GlinttTextBox({
				theme: 'medium',
				placeholder: '<inserir motivo>',
				minlength: '0',
				isEditable: true,
				includeClearIcon: false,
				value: null,
				addPrefix: false, //adicionada label
				prefix: null, //nome da label,
				onTextChanged: function(value) {

				}
			});

			$('input#input-medium_2').GlinttTextBox({
				theme: 'medium',
				placeholder: '<inserir motivo>',
				minlength: '0',
				isEditable: true,
				includeClearIcon: false,
				value: null,
				addPrefix: false, //adicionada label
				prefix: null, //nome da label,
				onTextChanged: function(value) {

				}
			});

			$('.g-textarea').GlinttTextArea({
				theme: 'MEDIUM',
				isEditable: true,
				placeholder: "inserir texto"
			});
		});
	});
</script>

<div class="g-layout-header" id="patient_header_1"></div>

<script type="text/javascript">
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {
			var controlsoptions_1 = {
				img: {
					id: 'id4',
					class: 'g-img-circle g-w-md g-h-md',
					url: 'http://www.endlessicons.com/wp-content/uploads/2012/12/male-avatar-icon-614x460.png'
				},
				hightlighted_label: {
					id: 'id5',
					value: 'Eng.º José António Costa Vieira'
				},
				label: {
					id: 'id6',
					value: 'HCIS, 1290120, 00000000, 01-01-1970, 46 anos, Masculino, MULTICARE-SEGUROS DE SAUDE, SA'
				},
				free: [{
					id: 'id7',
					template: '<div class="g-text-2 pull-right"> <span class="g-icon g-icon-calendario-historico"></span> <span class="g-text-2 g-clickable-dotted">Histórico</span></div>',
				}],
				optional_header: [{
						id: 'id8',
						template: '<div>Button</div>'
					},
					{
						id: 'id9',
						template: '<div class="vr"></div>'
					},
					{
						id: 'id10',
						template: '<div>Button</div>'
					}
				]
			};

			HeaderManager.createHeader("patient_header_1", controlsoptions_1);
		});
	});
</script>

<div class="g-layout-header" id="patient_header"></div>

<script type="text/javascript">
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {
			var controlsoptions = {
				hightlighted_label: {
					id: 'id1',
					value: 'Eng.º José António Costa Vieira Eng.º José António Costa Vieira Eng.º José António Costa Vieira Eng.º José António Costa Vieira Eng.º José António Costa Vieira'
				},
				label: {
					id: 'id2',
					value: 'HCIS, 1290120, 00000000, 01-01-1970, 46 anos, Masculino, MULTICARE-SEGUROS DE SAUDE, SA'
				},
				free: [{
					id: 'id3',
					template: '<div class="g-text-2 pull-right"> <span class="g-icon g-icon-calendario-historico"></span> <span class="g-text-2 g-clickable-dotted">Histórico</span></div>',
				}],
				icons: [{
						class: 'g-icon-tools-alerta'
					},
					{
						class: 'g-icon-tools-my-cuf'
					},
					{
						class: 'g-icon-doente-cadeira-de-rodas'
					},
					{
						class: 'g-icon-tools-bandeira'
					},
					{
						class: 'g-icon-clinical-cama-ocupada'
					},
					{
						class: 'g-icon-doente-doente-vip'
					}
				],
				link: {
					fireEventName: "TRANSFER",
					data: {
						teste: "teste"
					},
					linkText: "Transferir Paciente"
				},
				theme: 'dark'
			};

			HeaderManager.createHeader("patient_header", controlsoptions);
		});
	});
</script>

<div class="g-layout-header" id="header_lazy"></div>

<script type="text/javascript">
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {
			HeaderManager.initHeader("header_lazy", [0, 1, 2, 3, 4]);

			setTimeout(function() {
				HeaderManager.update(0, [{
					template: '<div class="g-text-2 pull-right"> <span class="g-icon g-icon-calendario-historico"></span> <span class="g-text-2 g-clickable-dotted">Histórico</span></div>'
				}]);
			}, 5500);

			setTimeout(function() {
				HeaderManager.update(1, {
					value: "Eng.º José António Costa Vieira José António Costa Vieira José António Costa Vieira",
					callback: function() {
						console.log("I'm Lazy");
					}
				});
			}, 4500);

			setTimeout(function() {
				HeaderManager.update(2, [{
						class: "g-icon-tools-alerta"
					},
					{
						class: "g-icon-tools-my-cuf"
					},
					{
						class: "g-icon-doente-cadeira-de-rodas"
					},
					{
						class: "g-icon-tools-bandeira"
					},
					{
						class: "g-icon-clinical-cama-ocupada"
					},
					{
						class: "g-icon-doente-doente-vip"
					}
				]);
			}, 6000);

			setTimeout(function() {
				HeaderManager.update(3, {
					class: "g-img-circle g-w-md g-h-md",
					url: "http://www.endlessicons.com/wp-content/uploads/2012/12/male-avatar-icon-614x460.png"
				});
			}, 4000);

			setTimeout(function() {
				HeaderManager.update(4, {
					value: "HCIS, 1290120, 00000000, 01-01-1970, 46 anos, Masculino, MULTICARE-SEGUROS DE SAUDE, SA"
				});
			}, 5000);
		});
	});
</script>

<table id="grid" class="g-grid"></table>

<script id="colPatient" type="text/x-jquery-tmpl">
	<img class="g-img-circle g-lg-lg" src="https://image.freepik.com/free-icon/male-user-close-up-shape-for-facebook_318-37635.png">
    <div class="g-cell-template-info">
        <div class="ellipsis"><span class="g-text g-clickable-underline g-text-13"> ${Name}</span> <span class="g-icon g-icon-doente-sexo-masculino"></span> </div>
        <div class="g-text g-text-12">${EpisodeType}</div>
        <div class="g-text g-text-12"><span>${Age} Anos</span> <span>(${DateOfBirth})</span> | <span> ${Occupation} </span></div>
    </div>
</script>
<script id="colPriority" type="text/x-jquery-tmpl">
	<div class="g-priority g-container" style="background: ${Priority};"> </div>
</script>
<script>
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {
			var data = [];

			for (var i = 0; i < 20; i++) {
				data.push({
					"Id": i,
					"Name": i % 2 == 0 ? "Nome do Doente Exemplo" : "Nome",
					"Sex": 'M',
					"Age": i % 2 == 0 ? (25 + 1) : (25 + i),
					"DateOfBirth": "22-10-1988",
					"EpisodeType": "HS-0000",
					"Occupation": "Professora",
					"Priority": 'green'
				});
			}

			var columns = [{
					key: "Priority",
					headerText: "",
					width: "40px",
					dataType: "string",
					template: $("#colPriority").html()
				},
				{
					key: "Name",
					headerText: "Doente",
					width: "95%",
					dataType: "string",
					template: $("#colPatient").html()
				}
			];

			var igGridOptions = {
				autoCommit: true,
				dataSource: data,
				width: "100%",
				height: "400px",
				autoGenerateColumns: false,
				localSchemaTransform: false,
				columns: columns,
				primaryKey: "Id",
				alternateRowStyles: false,
				features: [{
						name: "Sorting",
						type: "local",
						firstSortDirection: "descending",
						sortByProp: [{
							columnKey: "Name",
							orderText: "Ordem",
							defaultOrder: "ascending",
							source: [{
								key: "Name",
								value: "Name"
							}],
							//onSorting: function(columnKey, direction) {
							//Escrever aqui a tua função para fazer sorte remotamente
							// }
						}],
					},
					{
						name: "Selection",
						mode: "row",
						multiSelection: true,
						activation: true
					},
					{
						name: "RowSelectors",
						inherit: true,
						enableCheckBoxes: true,
						enableRowNumbering: false
					}
				]
			};

			ControlsManager.addIgGrid("#grid", '', igGridOptions);
		});
	});
</script>

<div id="hierarchicalGrid"></div>

<!-- Template da Coluna Favoritos -->
<script id="colFavoritos" type="text/x-jquery-tmpl">
	<div class="text-center">
    <span class="g-icon-tools-favorito"></span>
  </div>
</script>


<!-- Template da Coluna Doentes -->
<script id="colDoentes" type="text/x-jquery-tmpl">
	<div class="g-row">
    {{if  ${EpisodeType} == null}}
        <div class="g-icon-doente-doentes pure-u-2-24 text-center"></div>
        <div class="g-cell-template-1 pure-u-22-24">
            <p class="g-cell g-text g-text-13 ellipsis">${Name} (${Doentes.length})</p>
        </div>
    {{else}}
        <div class="g-icon-doente-doente pure-u-2-24 text-center"></div>
        <div class="g-cell-template-3 pure-u-18-24">
            <div class="g-cell-1-3 g-text g-text-12">
                <div class="g-cell-text ellipsis">
                    <span>${EpisodeType}</span>
                    <span class="g-icon-doente-doente-vip"></span>
                </div>
            </div>
            <div class="g-cell-2-3 g-text g-text-13">
                <span class="g-cell-text ellipsis">${Name} ${Name} ${Name}</span>
            </div>
            <div class="g-cell-3-3 g-text g-text-12">
                <div class="g-cell-text ellipsis">
                    <span>${Age} Anos (${DateOfBirth})</span> | <span>Médis</span>
                </div>
            </div>
        </div>
        <div class="text-right pure-u-4-24">
            <span class="g-icon-tools-correio "></span>
            <span class="g-icon-edificios-transportes-hospital-edificio"></span>
        </div>
    {{/if}} 
    </div>
</script>


<!-- Template da Coluna Especialidade/Ato/Medico -->
<script id="colEspecialidade" type="text/x-jquery-tmpl">
	<div class="g-especialidade">
        <div class="g-text g-text-12">${Especialidade}</div>
        <div class="g-text g-text-12">${Ato}</div>
        <div class="g-text g-text-12">${Medico} | ${Local}</div>
    </div>
</script>

<!-- Template da Coluna Marcacao -->
<script id="colMarcacao" type="text/x-jquery-tmpl">
	<div class="text-center">
        <div class="g-text g-text-12">${Marcacao}</div>
        {{if  ${MarcacaoExtra} == true}}
            <div class="g-text g-text-23">EXTRA!</div>
        {{/if}} 
    </div>
</script>

<!-- Template da Coluna Marcacao -->
<script id="colPresenca" type="text/x-jquery-tmpl">
	<div class="text-center">
        <div class="g-text g-text-12">${Presenca}</div>
    </div>
</script>

<!-- Template da Coluna Marcacao -->
<script id="colInicio" type="text/x-jquery-tmpl">
	<div class="text-center">
        <div class="g-text g-text-12">${Inicio}</div>
    </div>
</script>

<!-- Template da Coluna Marcacao -->
<script id="colFim" type="text/x-jquery-tmpl">
	<div class="text-center">
        <div class="g-text g-text-12">${Fim}</div>
    </div>
</script>


<script type="text/javascript">
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {
			var jsonData = {
				"d": [{
						"ID": 0,
						"EpisodeType": "HS-0003",
						"Name": "Maria Alice Carvalho",
						"Age": "72",
						"DateOfBirth": "01-01-1944",
						"Especialidade": "Cardiologia",
						"Ato": "Ecocardiograma com estudo Dopier",
						"Medico": "Miguel Afonso Filipe",
						"Local": "Gab. 01",
						"Marcacao": "00:00",
						"MarcacaoExtra": true,
						"Presenca": "00:00",
						"Inicio": "00:00",
						"Fim": "-",
						"Favorito": 1,
						"Doentes": []
					},
					{
						"ID": 1,
						"EpisodeType": null,
						"Name": "Grupo de Tabagismo",
						"Age": null,
						"DateOfBirth": null,
						"Especialidade": "Cardiologia",
						"Ato": "Ecocardiograma com estudo Dopier",
						"Medico": "Miguel Afonso Filipe",
						"Local": "Gab. 01",
						"Marcacao": "00:00",
						"MarcacaoExtra": true,
						"Presenca": "00:00",
						"Inicio": "00:00",
						"Fim": "00:00",
						"Favorito": 2,
						"Doentes": [{
								"ID": 1,
								"EpisodeType": "HS-0002",
								"Name": "Pedro",
								"Age": "72",
								"DateOfBirth": "01-01-1944",
								"Especialidade": "Cardiologia",
								"Ato": "Ecocardiograma com estudo Dopier",
								"Medico": "Miguel Afonso Filipe",
								"Local": "Gab. 01",
								"Marcacao": "00:00",
								"MarcacaoExtra": false,
								"Presenca": "00:00",
								"Inicio": "00:00",
								"Fim": "-",
								"Favorito": 3,
								"Doentes": []
							},
							{
								"ID": 2,
								"EpisodeType": "HS-0001",
								"Name": "Paulo",
								"Especialidade": "Cardiologia",
								"Ato": "Ecocardiograma com estudo Dopier",
								"Medico": "Miguel Afonso Filipe",
								"Local": "Gab. 01",
								"Age": "72",
								"DateOfBirth": "01-01-1944",
								"Marcacao": "00:00",
								"MarcacaoExtra": false,
								"Presenca": "00:00",
								"Inicio": "00:00",
								"Fim": "00:00",
								"Favorito": 2,
								"Doentes": []
							}
						]
					},
				]
			}

			$("#hierarchicalGrid").igHierarchicalGrid({
				dataSource: jsonData,
				dataSourceType: "json",
				responseDataKey: "d",
				width: "100%",
				height: "100%",
				localSchemaTransform: false,
				autoGenerateColumns: false,
				autoGenerateLayouts: false,
				primaryKey: "ID",
				odata: true,
				features: [{
						name: "RowSelectors",
						inherit: true,
						enableCheckBoxes: true,
						enableRowNumbering: false
					},
					{
						name: "Selection",
						mode: "row",
						multipleSelection: true,
						rowSelectionChanging: function(e, ui) {
							if ($(ui.row.element.context).closest("tr").length > 0) {
								if ($(ui.row.element).attr("aria-selected") === "true") {
									ui.owner.deselectRowById(ui.row.id);
								} else {
									ui.owner.selectRowById(ui.row.id);
								}
								return false;
							}
						}
					}
				],
				rowExpanding: function(evt, args) {
					evt.preventDefault();
				},
				rowCollapsing: function(evt, args) {
					evt.preventDefault();
				},
				columns: [{
						headerText: 'Doentes',
						key: "EpisodeType",
						width: "30%",
						dataType: "string",
						template: $("#colDoentes").html()
					},
					{
						headerText: "Especialidades / Ato / Médico",
						key: "Name",
						width: "40%",
						dataType: "string",
						template: $("#colEspecialidade").html()
					},
					{
						headerText: '<div class="text-center"><div class="g-icon-calendario-calendario"></div><div>Marcação</div></div>',
						key: "Name",
						width: "6%",
						dataType: "string",
						template: $("#colMarcacao").html()
					},
					{
						headerText: '<div class="text-center"><div class="g-icon-doente-doente"></div><div>Presença</div></div>',
						key: "Name",
						width: "6%",
						dataType: "string",
						template: $("#colPresenca").html()
					},
					{
						headerText: '<div class="text-center"><div class="g-icon-doente-entrada-doente"></div><div>Início</div></div>',
						key: "Name",
						width: "6%",
						dataType: "string",
						template: $("#colInicio").html()
					},
					{
						headerText: '<div class="text-center"><div class="g-icon-doente-saida-alta-doente"></div><div>Fim</div></div>',
						key: "Name",
						width: "6%",
						dataType: "string",
						template: $("#colFim").html()
					},
					{
						headerText: '',
						key: "Favorito",
						width: "6%",
						dataType: "numbet",
						template: $("#colFavoritos").html()
					}
				],
				columnLayouts: [{
					key: "Doentes",
					width: "100%",
					height: "100%",
					showHeader: false,
					childrenDataProperty: "Doentes",
					localSchemaTransform: false,
					autoGenerateColumns: false,
					primaryKey: "ID",
					columns: [{
							headerText: '',
							key: "EpisodeType",
							width: '30%',
							dataType: "string",
							template: $("#colDoentes").html()
						},
						{
							headerText: '',
							key: "Name",
							width: "40%",
							dataType: "string",
							template: $("#colEspecialidade").html()
						},
						{
							headerText: '',
							key: "Name",
							width: "6%",
							dataType: "string",
							template: $("#colMarcacao").html()
						},
						{
							headerText: '',
							key: "Name",
							width: "6%",
							dataType: "string",
							template: $("#colPresenca").html()
						},
						{
							headerText: '',
							key: "Name",
							width: "6%",
							dataType: "string",
							template: $("#colInicio").html()
						},
						{
							headerText: '',
							key: "Name",
							width: "6%",
							dataType: "string",
							template: $("#colFim").html()
						},
						{
							headerText: '',
							key: "Favorito",
							width: "6%",
							dataType: "number",
							template: $("#colFavoritos").html()
						}
					]
				}]
			});

			$('.ui-iggrid-root').on('click', 'td', function(e) {
				var row = $(e.target).closest('tr')[0],
					$hGrid = $('.ui-iggrid-root'),
					isExpanded = $hGrid.igHierarchicalGrid('expanded', row),
					method = isExpanded ? 'collapse' : 'expand';
				$hGrid.igHierarchicalGrid(method, row);
			});
		});
	});
</script>

<table id="treegrid" class="g-tree-grid"></table>

<!-- Template da Coluna Favoritos -->
<script id="colFavoritosTree" type="text/x-jquery-tmpl">
	<div class="text-center">
    <span class="g-icon-tools-favorito"></span>
  </div>
</script>

<!-- Template da Coluna Doentes -->
<script id="colDoentesTree" type="text/x-jquery-tmpl">
	<div class="g-row">
    {{if  ${EpisodeType} == null}}
        <div class="g-icon-doente-doentes pure-u-2-24 text-center"></div>
        <div class="g-cell-template-1 pure-u-22-24">
            <p class="g-cell g-text g-text-13 ellipsis">${Name} (${Doentes.length})</p>
        </div>
    {{else}}
        <div class="g-icon-doente-doente pure-u-2-24 text-center"></div>
        <div class="g-cell-template-3 pure-u-18-24">
            <div class="g-cell-1-3 g-text g-text-12">
                <div class="g-cell-text ellipsis">
                    <span>${EpisodeType}</span>
                    <span class="g-icon-doente-doente-vip"></span>
                </div>
            </div>
            <div class="g-cell-2-3 g-text g-text-13">
                <span class="g-cell-text ellipsis">${Name} ${Name} ${Name}</span>
            </div>
            <div class="g-cell-3-3 g-text g-text-12">
                <div class="g-cell-text ellipsis">
                    <span>${Age} Anos (${DateOfBirth})</span> | <span>Médis</span>
                </div>
            </div>
        </div>
        <div class="text-right pure-u-4-24">
            <span class="g-icon-tools-correio "></span>
            <span class="g-icon-edificios-transportes-hospital-edificio"></span>
        </div>
    {{/if}} 
    </div>
</script>


<!-- Template da Coluna Especialidade/Ato/Medico -->
<script id="colEspecialidadeTree" type="text/x-jquery-tmpl">
	<div class="g-especialidade">
        <div class="g-text g-text-12">${Especialidade}</div>
        <div class="g-text g-text-12">${Ato}</div>
        <div class="g-text g-text-12">${Medico} | ${Local}</div>
    </div>
</script>

<!-- Template da Coluna Marcacao -->
<script id="colMarcacaoTree" type="text/x-jquery-tmpl">
	<div class="text-center">
        <div class="g-text g-text-12">${Marcacao}</div>
        {{if  ${MarcacaoExtra} == true}}
            <div class="g-text g-text-23">EXTRA!</div>
        {{/if}} 
    </div>
</script>

<!-- Template da Coluna Marcacao -->
<script id="colPresencaTree" type="text/x-jquery-tmpl">
	<div class="text-center">
        <div class="g-text g-text-12">${Presenca}</div>
    </div>
</script>

<!-- Template da Coluna Marcacao -->
<script id="colInicioTree" type="text/x-jquery-tmpl">
	<div class="text-center">
        <div class="g-text g-text-12">${Inicio}</div>
    </div>
</script>

<!-- Template da Coluna Marcacao -->
<script id="colFimTree" type="text/x-jquery-tmpl">
	<div class="text-center">
        <div class="g-text g-text-12">${Fim}</div>
    </div>
</script>

<script type="text/javascript">
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {
			var jsonData = [{
					"ID": 0,
					"EpisodeType": "HS-0003",
					"Name": "Maria Alice Carvalho",
					"Age": "72",
					"DateOfBirth": "01-01-1944",
					"Especialidade": "Cardiologia",
					"Ato": "Ecocardiograma com estudo Dopier",
					"Medico": "Miguel Afonso Filipe",
					"Local": "Gab. 01",
					"Marcacao": "00:00",
					"MarcacaoExtra": true,
					"Presenca": "00:00",
					"Inicio": "00:00",
					"Fim": "-",
					"Favorito": 1,
					"Doentes": []
				},
				{
					"ID": 1,
					"EpisodeType": null,
					"Name": "Grupo de Tabagismo",
					"Age": null,
					"DateOfBirth": null,
					"Especialidade": "Cardiologia",
					"Ato": "Ecocardiograma com estudo Dopier",
					"Medico": "Miguel Afonso Filipe",
					"Local": "Gab. 01",
					"Marcacao": "00:00",
					"MarcacaoExtra": true,
					"Presenca": "00:00",
					"Inicio": "00:00",
					"Fim": "00:00",
					"Favorito": 2,
					"Doentes": [{
							"ID": 2,
							"EpisodeType": "HS-0002",
							"Name": "Pedro",
							"Age": "72",
							"DateOfBirth": "01-01-1944",
							"Especialidade": "Cardiologia",
							"Ato": "Ecocardiograma com estudo Dopier",
							"Medico": "Miguel Afonso Filipe",
							"Local": "Gab. 01",
							"Marcacao": "00:00",
							"MarcacaoExtra": false,
							"Presenca": "00:00",
							"Inicio": "00:00",
							"Fim": "-",
							"Favorito": 3,
							"Doentes": []
						},
						{
							"ID": 3,
							"EpisodeType": "HS-0001",
							"Name": "Paulo",
							"Especialidade": "Cardiologia",
							"Ato": "Ecocardiograma com estudo Dopier",
							"Medico": "Miguel Afonso Filipe",
							"Local": "Gab. 01",
							"Age": "72",
							"DateOfBirth": "01-01-1944",
							"Marcacao": "00:00",
							"MarcacaoExtra": false,
							"Presenca": "00:00",
							"Inicio": "00:00",
							"Fim": "00:00",
							"Favorito": 2,
							"Doentes": []
						}
					]
				}
			];

			var igTreeGridOptions = {
				width: "100%",
				height: "200px",
				indentation: "50px",
				dataSource: jsonData,
				featureChooserIconDisplay: "always",
				autoGenerateColumns: false,
				localSchemaTransform: false,
				rowExpanding: function(evt, args) {
					evt.preventDefault();
				},
				rowCollapsing: function(evt, args) {
					evt.preventDefault();
				},
				primaryKey: "ID",
				childDataKey: "Doentes",
				features: [{
						name: "Selection",
						mode: "cell",
						multipleSelection: true,
						activation: true,
					},
					{
						name: "Sorting",
						type: "local",
						firstSortDirection: "descending",
						currentSortDirection: "descending",
						mode: "multi",
						persist: true,
						columnSettings: [{
								columnIndex: 1,
								currentSortDirection: "descending",
							},
							{
								columnIndex: 2,
								currentSortDirection: "descending",
							},
							{
								columnIndex: 3,
								currentSortDirection: "descending",
							},
							{
								columnIndex: 4,
								currentSortDirection: "descending",
							},
							{
								columnIndex: 5,
								currentSortDirection: "descending",
							}
						],
						sortByProp: [{
							columnKey: "Name",
							orderText: "Ordem",
							defaultOrder: "ascending",
							source: [{
								key: "Name",
								value: "Name"
							}],
							//onSorting: function(columnKey, direction) {
							//Escrever aqui a tua função para fazer sorte remotamente
							// }
						}],
					},
					{
						name: "RowSelectors",
						enableCheckBoxes: true,
						enableRowNumbering: false
					}
				],
				initialExpandDepth: 0,
				columns: [{
						headerText: 'ID',
						key: "ID",
						width: "0%",
						dataType: "number",
						hidden: true
					},
					{
						headerText: "<div class='g-header-ml g-header-mt'>Doentes</div>",
						key: "Name",
						width: "30%",
						dataType: "string",
						template: $("#colDoentesTree").html()
					},
					{
						headerText: '<div class="g-header-mt">Especialidades / Ato / Médico</div>',
						key: "Especialidade",
						width: "40%",
						dataType: "string",
						template: $("#colEspecialidade").html()
					},
					{
						headerText: '<div class="text-center"><div class="g-icon-calendario-calendario"></div><div>Marcação</div></div>',
						key: "Marcacao",
						width: "6%",
						dataType: "string",
						template: $("#colMarcacaoTree").html()
					},
					{
						headerText: '<div class="text-center"><div class="g-icon-doente-doente"></div><div>Presença</div></div>',
						key: "Presenca",
						width: "6%",
						dataType: "string",
						template: $("#colPresencaTree").html()
					},
					{
						headerText: '<div class="text-center"><div class="g-icon-doente-entrada-doente"></div><div>Início</div></div>',
						key: "Inicio",
						width: "6%",
						dataType: "string",
						template: $("#colInicioTree").html()
					},
					{
						headerText: '<div class="text-center"><div class="g-icon-doente-saida-alta-doente"></div><div>Fim</div></div>',
						key: "Fim",
						width: "6%",
						dataType: "string",
						template: $("#colFimTree").html()
					},
					{
						headerText: '',
						key: "Favorito",
						width: "6%",
						dataType: "string",
						template: $("#colFavoritosTree").html()
					}
				]
			};

			ControlsManager.addIgTreeGrid("#treegrid", '', igTreeGridOptions);

			$('.g-tree-grid').on('click', 'td', function(e) {
				var row = $(e.target).closest('tr');
				$tGrid = $('.g-tree-grid'),
					$tGrid.igTreeGrid('toggleRow', row);
			});
		});
	});
</script>

<div id="calendar"></div>

<script>
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {
			var options = {
				onSlotSelected: function(slot) {
					console.log(slot);
				},
				onScheduleBack: function(date) {
					console.log("Back: " + date);
				},
				onScheduleForward: function(date) {
					console.log("Forward: " + date);
				},
				hourConfig: {
					step: 2,
					borderStep: 15,
					startTime: '09:00',
					endTime: '18:00',
					hourStep: 30
				},
				slotConfig: {
					startTimeProperty: 'startTime',
					endTimeProperty: 'endTime',
					slotTemplate: '<div class="slot  "><div class="slot-bar"></div><div class="slot-content"></div></div>'
				},
				headerConfig: {
					columnNumber: 5,
					headerTemplate: '<p class="g-text-13">  </p>' +
						'<div class="g-text-12"></div>'
				}
			}

			var cal = ControlsManager.addGlinttScheduleManager('#calendar', "", options);

			cal.setDataSource([{
					Date: moment('27-04-2017', 'DD-MM-YYYY'),
					DayDescription: '09',
					WeekDescription: 'Segunda-Feira',
					MonthDescription: 'Abril',
					SlotList: [{
						startTime: moment('9:30', 'hh:mm'),
						endTime: moment('12:30', 'hh:mm'),
						SlotDescription: 'Slot00',
						isBlocked: true,
						hasAppointment: true
					}]
				},
				{
					Date: moment('28-04-2017', 'DD-MM-YYYY'),
					DayDescription: '10',
					WeekDescription: 'Terça-Feira',
					MonthDescription: 'Abril',
					SlotList: [{
						startTime: moment('12:30', 'hh:mm'),
						endTime: moment('13:00', 'hh:mm'),
						SlotDescription: 'Slot01',
						hasAppointment: false
					}]
				},
				{
					Date: moment('29-04-2017', 'DD-MM-YYYY'),
					DayDescription: '11',
					WeekDescription: 'Quarta-Feira',
					MonthDescription: 'Abril',
					SlotList: [{
						startTime: moment('10:30', 'hh:mm'),
						endTime: moment('11:00', 'hh:mm'),
						SlotDescription: 'Slot02',
						hasAppointment: true
					}]
				},
				{
					Date: moment('30-04-2017', 'DD-MM-YYYY'),
					DayDescription: '12',
					WeekDescription: 'Quinta-Feira',
					MonthDescription: 'Abril',
					SlotList: [{
							startTime: moment('9:30', 'hh:mm'),
							endTime: moment('12:30', 'hh:mm'),
							SlotDescription: 'Slot03',
							hasAppointment: true
						},
						{
							startTime: moment('15:30', 'hh:mm'),
							endTime: moment('17:30', 'hh:mm'),
							SlotDescription: 'Slot03',
							hasAppointment: false
						}
					]
				},
				{
					Date: moment('31-04-2017', 'DD-MM-YYYY'),
					DayDescription: '13',
					WeekDescription: 'Sexta-Feira',
					MonthDescription: 'Abril',
					SlotList: [{
						startTime: moment('12:30', 'hh:mm'),
						endTime: moment('15:30', 'hh:mm'),
						SlotDescription: 'Slot04',
						hasAppointment: true
					}]
				}
			]);
		});
	});
</script>

<button id="dialog" type="button" class="g-btn g-lg-md g-btn-secondary">
	<span class="g-text-1">Dialog Manager</span>
</button>

<script id="modal-body" type="text/x-jquery-tmpl">
	<div class="g-filter pure-g">
      <div class="text-left pure-u-13-24">
          <span class="g-first">
             Ver:
          </span>
          <span class="g-property">
              Todos
          </span>
          <span class="g-property">
              Os meus texto automáticos
          </span>
      </div>
      <div class="text-right pure-u-11-24">
          <div class="g-options">
              <span class="g-text-6 g-clickable-underline">
                  Eliminar
              </span>
              <span class="g-text-6 g-clickable-underline">
                  Editar
              </span>
              <span class="g-text-6 g-clickable-underline">
                  Adicionar
              </span>
          </div>
      </div> 
  </div>
  <div class="g-content light g-data-table" style="height: calc(100% - 30px);">
      <div class="g-data-table-body no-border-bottom">
          <!-- Primeira Linha -->
          <div class="g-data-table-row no-hover">
              <div class="title" data-toggle="collapse" data-target="#row11" aria-expanded="false">
                  <div class="g-data-table-row g-h-sm no-border-bottom">
                      <div class="g-row">
                          <div class="text-left">
                              <span class="g-text-26">Título de nota</span>
                          </div>
                          <div class="text-right">
                              <span class="g-text-3">Privacidade</span>
                              <span class="g-text-12">Médicos de Cardiologia</span>
                          </div>
                      </div>
                  </div>
              </div>

               <div id="row11" class="collapse">
                   <div class="g-data-table-row g-h-sm no-hover no-border-bottom light-dark">
                      <span class="g-text-12">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula quis justo nec aliquet. Nam eget porttitor felis, vel malesuada mi. Donec sit amet urna posuere, pharetra lacus ut, congue.
                      </span>
                  </div>
              </div>
          </div>
           <!-- Segunda Linha -->
          <div class="g-data-table-row no-hover">
              <div class="title" data-toggle="collapse" data-target="#row21" aria-expanded="false">
                  <div class="g-data-table-row g-h-sm no-border-bottom">
                      <div class="g-row">
                          <div class="text-left">
                              <span class="g-text-26">Título de nota</span>
                          </div>
                          <div class="text-right">
                              <span class="g-text-3">Privacidade</span>
                              <span class="g-text-12">Médicos de Cardiologia</span>
                          </div>
                      </div>
                  </div>
              </div>

               <div id="row21" class="collapse">
                   <div class="g-data-table-row g-h-sm no-hover no-border-bottom light-dark">
                      <span class="g-text-12">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula quis justo nec aliquet. Nam eget porttitor felis, vel malesuada mi. Donec sit amet urna posuere, pharetra lacus ut, congue.
                      </span>
                  </div>
              </div>
          </div>
          <!-- Terceira Linha -->
          <div class="g-data-table-row no-hover">
              <div class="title" data-toggle="collapse" data-target="#row31" aria-expanded="false">
                  <div class="g-data-table-row g-h-sm no-border-bottom">
                      <div class="g-row">
                          <div class="text-left">
                              <span class="g-text-26">Título de nota</span>
                          </div>
                          <div class="text-right">
                              <span class="g-text-3">Privacidade</span>
                              <span class="g-text-12">Médicos de Cardiologia</span>
                          </div>
                      </div>
                  </div>
              </div>

               <div id="row31" class="collapse">
                   <div class="g-data-table-row g-h-sm no-hover no-border-bottom light-dark">
                      <span class="g-text-12">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula quis justo nec aliquet. Nam eget porttitor felis, vel malesuada mi. Donec sit amet urna posuere, pharetra lacus ut, congue.
                      </span>
                  </div>
              </div>
          </div>
      </div>
  </div>
</script>

<script>
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {
			$("span.g-property").click(function() {
				$("span.g-property").removeClass("selected");
				$(this).addClass("selected");
			});

			$('#medium_example_dialog_manager').GlinttTextBox({
				theme: 'dark',
				placeholder: 'Pesquisar',
				minlength: '0',
				isEditable: true,
				includeClearIcon: false,
				value: null,
				addPrefix: false, //adicionada label
				prefix: null, //nome da label,
				onTextChanged: function(value) {}
			});

			$("#dialog").click(function() {
				DialogManager.customDialog2({
					id: 'dialog',
					content: $("#modal-body").html(),
					dialogClass: 'g-dialog light',
					modal: true,
					resizable: false,
					draggable: false,
					title: 'Textos Automáticos',
					height: '500px',
					width: '800px',
					buttons: [{
							text: "Confirmar",
							class: "g-btn g-btn-success g-sm-md disabled",
							icon: "g-icon-tools-visto"
						},
						{
							text: "Cancelar",
							class: "g-btn g-btn-cancel g-sm-md",
							icon: "g-icon-tools-x"
						},
						{
							text: "Gravar",
							class: "g-btn g-btn-info g-sm-md",
							icon: "g-icon-tools-gravar"
						}
					]
				});
			});
		});
	});
</script>

<div class="section light">
	<div class="title"></div>
	<div class="content"></div>
</div>

<div class="section light">
	<div class="content"></div>
</div>

<div class="section light">
	<div class="title"></div>
	<div class="content section light-dark">
		<div class="title"></div>
		<div class="content"></div>
	</div>
</div>

<div style="height: 300px;">
	<div class="g-tree-list">
		<div class="g-expandable-menu-collapsed g-content light g-clickable pointer hidden">
			<p class="g-icon g-icon-tools-seta-direita g-collapse"></p>
		</div>
		<div class="g-content light g-data-table g-expandable-menu modifiable-area">
			<div class="g-data-table-header g-h-md">
				<div class="g-row">
					<div class="pure-u-1">
						<span class="g-text-1" data-i18n="ADD_MCDT_INDEX">Índice</span>
						<span class="g-icon g-icon-tools-seta-esquerda pull-right collapse-me g-clickable pointer"></span>
					</div>
				</div>
			</div>
			<div class="g-data-table-body no-border-bottom">
				<div id="index_list" class="g-glist">
				</div>
			</div>
		</div>
	</div>

	<div id="results_list_body" class="g-content light g-data-table g-tree-results">
		<div class="g-data-table-header g-h-md">
			<div class="g-row">
				<div class="pure-u-1">
					<span class="g-text-1" data-i18n="MCDT_EXAMSGROUP_INDEX_RESULTS_LIST">Lista de Resultados de Índice</span>
				</div>
			</div>
		</div>
		<div class="g-data-table-body">
			<div id="tree_navigation"></div>
		</div>
	</div>
</div>

<script>
	$(document).ready(function() {
		requirejs(["assets/toolkit/lib/globalcare/globalCare.js"], function() {

			var fakeDataSource = [{
					"Code": "FREQUENT",
					"speciality_id": "1",
					"Description": "TAC"
				},
				{
					"Code": "RECENT",
					"speciality_id": "2",
					"Description": "Ressonância Magnética"
				},
				{
					"Code": "FAVORITE",
					"speciality_id": "3",
					"Description": "Raio-X"
				}
			];

			var GlinttTreeOptions = {};
			GlinttTreeOptions.listID = '#index_list';
			GlinttTreeOptions.navigationID = '#tree_navigation';
			GlinttTreeOptions.acelerators = [];
			GlinttTreeOptions.rowTemplate = $('#tree_list').html();
			GlinttTreeOptions.dataSource = fakeDataSource;
			GlinttTreeOptions.textKey = 'Description';
			GlinttTreeOptions.navigationKey = 'Code';
			GlinttTreeOptions.renderParent = false;
			GlinttTreeOptions.baseURL = 'http://localhost:3003';
			ControlsManager.addGlinttTree('', '', GlinttTreeOptions);
		});
	});
</script>