﻿
.ºgrid.view-card > .container{
	display: flex;
	flex-direction: column;
}
	.ºgrid.view-card > .container > .header{
		display: none;
	}
	
.ºgrid.view-card .row{
	display: flex;
	height: auto;
	padding: 2.5px 8px;
	border: 0;
	border-radius: var(--control-border-radius-2);
	transition: background .5s;
}
	.ºgrid.view-card .cell{
		padding: 0;
		border: 0 !important;
	}
	
	.ºgrid.view-card .cell.avatar{
		width: var(--size-7);
	}
		.ºgrid.view-card .cell.avatar > *{
			border-radius: 100%;
		}
		.ºtile.grid .cell.avatar img{
			width: var(--size-7);
			height: var(--size-7);
		}
		.ºgrid.view-card .cell.avatar .icon{
			position: relative;
			background-color: var(--control-border-color);
			color: var(--color-12);
			font-size: 36px;
			overflow: hidden;
		}
			.ºgrid.view-card .cell.avatar .icon:before{
				position: absolute;
				top: 13px;
				left: 0; right: 0;
				text-align: center;
			}
	.ºgrid.view-card .row .cell.status{
		position: relative;
		overflow: visible;
		display: flex;
		align-items: end;
	}
	.ºgrid.view-card .row .cell.status .ºicon{
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		left: -12px;
		width: 16px;
		height: 16px;
		border: 2px solid var(--color-12);
		border-radius: 100%;
	}
	.ºgrid.view-card .row .cell.status .ºicon:before{
		color: var(--color-12);
	}

.ºgrid.view-card .cell.card{
	width: 100% !important;
}
	.ºgrid.view-card .cell.card > div{
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: var(--size-3);
	}
		.ºgrid.view-card .cell.card > div > *,
		.ºgrid.view-card .cell.card span{
			line-height: 14px;
			transition: color .3s ease-out;
		}
			.fontSize2 .ºgrid.view-card .cell.card > div > *{
				line-height: 16px
			}
			.fontSize3 .ºgrid.view-card .cell.card > div > *{
				line-height: 18px
			}
		.ºgrid.view-card .cell.card .label{
			font-size: 1.1em;
			font-weight: 400;
			line-height: 16px;
			white-space: nowrap;
			color: var(--color-4);
		}
		.ºgrid.view-card .cell.card em{
			font-weight: 400;
		}
		.ºgrid.view-card .cell.card .button{
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 15px;
			width: 36px;
			height: 36px;
			background: var(--color-5);
			color: var(--color-12);
			font-size: 20px;
			border-radius: 100%;
			cursor: pointer;
		}
	.ºgrid.view-card .row:hover{
		background: var(--color-7);
	}
		.ºgrid.view-card .row:hover .text-size,
		.ºgrid.view-card .row:hover span{
			color: var(--color-12);
		}	
	
	.ºgrid .row .cell.status .ºcontrol.ºicon:before{
		font-size: 14px;
	}
	.grid .ºicon.fa-employee.status.v0{ /*absent*/
		background: #AAA;
	}
		.grid .ºicon.fa-employee.status.v0:before{
			content: '\f128';
			font-size: 11px !important;
		}
		
	.grid .ºicon.fa-employee.status.v1,
	.grid .ºicon.fa-employee.status.v12{ /*in office*/
		background: #090;
	}
		.grid .ºicon.fa-employee.status.v1:before,
		.grid .ºicon.fa-employee.status.v12:before{
			content: '\f106';
		}
		
	.grid .ºicon.fa-employee.status.v2{ /*out office*/
		background: #900;
	}
		.grid .ºicon.fa-employee.status.v2:before{
			content: '\f107';
		}
	.grid .ºicon.fa-employee.status.v3{ /*out office*/
		background: #FFF;
	}
		.grid .ºicon.fa-employee.status.v3:before{/*baja*/
			content: '\f05e';
			color: #777 !important;
			font-size: 16px !important;
		}

	.grid .ºicon.fa-employee.status.v4{ /*error baja dentro*/
		background: #EA0;
	}
		.grid .ºicon.fa-employee.status.v4:before,
		.grid .ºicon.fa-employee.status.v5:before,
		.grid .ºicon.fa-employee.status.v45:before{
			content: '\f12a';
			font-size: 11px;
		}
	.grid .ºicon.fa-employee.status.v5,
	.grid .ºicon.fa-employee.status.v45{ /*error fuera*/
		background: #90F;
	}
	
	.grid .ºicon.fa-employee.status.v9{ /*error horario*/
		background: #E00;
	}
		.grid .ºicon.fa-employee.status.v9:before{
			content: '\f00d';
			font-size: 11px;
		}