.ºgrid{
	display: grid;
}
	.ºgrid > .container > .header{
		display: flex;
	}
		.ºgrid > .container > .header .head{
			display: flex;
		}
	.ºgrid > .container{
		display: grid;
		grid-template-rows: min-content auto min-content;
		box-sizing: border-box;
	}
		.ºgrid > .container > .body{
			height: 100%;
		}
			.ºgrid .row{
				display: flex;
			}
				.ºgrid .row .cell{
					display: flex;
				}
				.ºgrid .row .cell.hidden{
					display: none;
				}
	.ºgrid .footer{
		display: flex;
		justify-content: space-between;
	}
		.ºgrid .footer .left,
		.ºgrid .footer .center,
		.ºgrid .footer .right{
			display: flex;
			align-items: center;
		}

	.ºgrid .ºgraph{
		position: absolute !important;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: var(--color-12);
	}

.ºgrid.view-table{
}	
	.ºgrid.view-table > .container{
	}
		.ºgrid.view-table .header{
			display: grid;
			height: var(--control-height);
			border-radius: var(--control-border-radius-2) var(--control-border-radius-2) 0 0;
			overflow: hidden;
		}
			.ºgrid.view-table .header .head{
				position: relative;
				display: flex;
				box-sizing: border-box;
				height: var(--control-height);
				padding: var(--size-1) var(--size-2);
				background: var(--control-border-color-2);
				align-items: center;
				justify-content: space-between;
				overflow: hidden;
			}
				.ºgrid.view-table .header .head:not(:first-child):after{
					content: '';
					position: absolute;
					top: 50%;
					left: 0;
					width: 1px;
					height: 1.6em;
					background: var(--control-border-color-3);
					transform: translateY(-50%);
				}
				.ºgrid.view-table .header .head > .text-size{
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.ºgrid.view-table .header .head .icons{
					display: flex;
					margin-right: calc(var(--size-2) * -1);
				}
					.ºgrid.view-table .header .head .icons *{
						margin: var(--size-1) 4px;
						color: var(--color-text-2);
						font-size: var(--size-3);
						line-height: 14px;
					}
					.ºgrid.view-table .header .head .icons *:last-child{
						margin-right: 9px;
					}
						.ºgrid.view-table .header .head.sortable{
							cursor: pointer;
						}
							.ºgrid.view-table .header .head.sortable:hover{
								background: var(--color-5);
							}
								.ºgrid.view-table .header .head.sortable:hover *{
									color: var(--color-12);
								}
				
	.ºgrid.view-table > .container > .body{
		background: var(--color-12);
		min-height: calc(var(--control-height)*3);
	}
		.ºgrid.view-table .row{
			display: grid;
			min-height: var(--control-height);
			transition: 
				background-color .5s ease-in-out;
		}
			.ºgrid.view-table .row .cell{
				position: relative;
				display: flex;
				align-items: center;
				border-bottom: 1px solid var(--control-border-color-2);
			}
			.ºgrid.view-table .row .cell .ºcontrol{
				width: 100%;
			}

				.ºgrid.view-table .row .cell.text,
				.ºgrid.view-table .row .cell .ºlabel{
					overflow: hidden;
				}
				.ºgrid.view-table .row .cell.link{
					color: var(--color-4);
				}
					.ºgrid.view-table .row .cell.link .ºlabel,
					.ºgrid.view-table .row .cell.link .text-size{
						color: var(--color-4);
					}
				.ºgrid.view-table .row .cell .ºlabel .text-size{
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.ºgrid.view-table .row .cell .image{
					display: flex; 
					justify-content: center;
					align-items: center;
					background-size: cover;
					background-position: center center;
					background-repeat: no-repeat;
				}
		.ºgrid.view-table.clickable .row.focus{
			background: var(--color-7);
		}
		
		.ºgrid.view-table.clickable .row .cell,
		.ºgrid.view-table .row .cell.clickable,
		.ºgrid.view-table .row .cell.clickable *{	
			cursor: pointer;
		}	
		.ºgrid.view-table.clickable .row:hover .cell{
			color: #FFF;
			background: var(--color-8);
			border-color: transparent;
			cursor: pointer;
		}
		
	.ºgrid .footer{
		padding: 0 var(--size-1) 0 0;
		height: var(--control-height);
		background: var(--control-border-color-2);
		border-radius: 0 0 var(--control-border-radius-2) var(--control-border-radius-2);
		overflow: hidden;
	}
		.ºgrid .footer .left,
		.ºgrid .footer .center,
		.ºgrid .footer .right{
			height: calc(var(--control-height) - 1px);
		}
			.ºgrid .footer .container{
				position: relative;
				display: flex;
				align-items: center;
				padding: 0 var(--size-1);
			}
			.ºgrid .footer .container:before,
			.ºgrid .footer .container:after{
				content: '';
				position: absolute;
				top: 50%;
				width: 1px;
				height: 1.6em;
				background: var(--control-border-color-3);
				transform: translateY(-50%);				
			}
				.ºgrid .footer .container:before{
					left: 0;
				}
				.ºgrid .footer .container:after{
					right: 0;
				}
				
			.ºgrid .footer .button{
				padding: calc(var(--size-1) + 2px);
				border-radius: var(--control-border-radius);
				cursor: pointer;
				transition: 
					background-color .3s ease-in;
			}
				.ºgrid .footer .button.disabled{
					opacity: .4;
					pointer-events: none;
				}
				.ºgrid .footer .left .button{
					padding: calc(var(--size-1) + 2px) var(--size-2);
				}
					.no-editable .ºgrid .footer .left .button{
						display: none;
					}
				.ºgrid .footer .button:before{
					color: var(--color-text-2);
				}
					.ºgrid .footer .button:not(:empty):before{
						margin-right: var(--size-1);	
					}
					.ºgrid .footer .button:empty:before{
						display: flex;
						font-size: 16px;
						padding: 0 calc(var(--size-1) / 2);
					}
				.ºgrid .footer .center .label{
					padding: 0 var(--size-2);
				}
				.ºgrid .footer .center .fa-caret-left:before,
				.ºgrid .footer .center .fa-caret-right:before{
					font-size: 19.4px;
				}
				.ºgrid .footer .button .icon{
					background: url(image/icons16.png) 0 0 no-repeat;
					width: 16px;
					height: 16px;
					filter: grayscale(1) brightness(.5);
					transition: filter .3s ease-out;
				}
					.ºgrid .footer .button .icon.file-pdf{ background-position: 0 0; }
					.ºgrid .footer .button .icon.file-csv{ background-position: -16px 0; }
					.ºgrid .footer .button .icon.file-xml{ background-position: -32px 0; }
					.ºgrid .footer .button .icon.file-excel{ background-position: -48px 0; }
					.ºgrid .footer .button .icon.print{ background-position: -64px 0; }

				.ºgrid .footer .button:hover{
					background: var(--color-5);
					color: var(--color-12);
				}
					.ºgrid .footer .button:hover:before{
						color: var(--color-12);
					}
					.ºgrid .footer .button:hover .icon{
						filter: none;	
					}

.ºgrid.view-table.with-title > .container{
	grid-template-rows: min-content min-content auto min-content;
}
	.ºgrid.view-table.with-title .title{
		padding: var(--size-1) var(--size-2);
		background: var(--control-border-color);
		border-radius: var(--control-border-radius-2) var(--control-border-radius-2) 0 0;
	}
		.ºgrid.view-table.with-title .header{
			border-radius: 0;
		}
		
.ºgrid.view-table.without-headers .header{
	display: none;
}		

.ºgrid.view-table .actions{
	display: none;
}
.ºgrid.view-table.has-actions{
	grid-template-rows: min-content auto;
}
	.ºgrid.view-table.has-actions .actions{
		display: block;
		justify-content: flex-end;
		margin-bottom: 2px;
		border-radius: var(--control-border-radius-2);
		overflow: hidden;
	}
		.ºgrid.view-table.has-actions .actions > *{
			display: flex;
			background: var(--control-border-color-2);
			height: var(--size-5);
		}
		.ºgrid.view-table.has-actions .actions .ºlabel{
			padding-left: var(--size-2);
		}
		.ºgrid.view-table.has-actions .actions .ºbutton{
			background: transparent;
			border-radius: 0;
		}
			.ºgrid.view-table.has-actions .actions .ºbutton *{
				color: var(--color-text-2);
			}
			.ºgrid.view-table.has-actions .actions .ºbutton:hover{
				background: var(--color-5);
			}
				.ºgrid.view-table.has-actions .actions .ºbutton:hover *{
					color: var(--color-12);
				}

.ºgrid.has-graph{
	perspective: 220vw;
}
	.ºgrid.has-graph > .container,
	.ºgrid.has-graph > .ºgraph{ 
		backface-visibility: hidden;
		transition: transform .5s ease-in-out;
	}
		.ºgrid.has-graph > .container{
			transform: rotateY(0deg);
		}
		.ºgrid.has-graph > .ºgraph{
			transform: rotateY(-180deg);
		}
		
		.ºgrid.has-graph.show-graph > .container{
			transform: rotateY(180deg);
		}
		.ºgrid.has-graph.show-graph > .ºgraph{ 
			transform: rotateY(0deg);
		}
		
.ºgrid .cell{
	box-sizing: border-box;
	padding: calc(var(--size-1)/2) calc(var(--size-1)/2);
	--padding: calc((var(--size-1)/2)*3);
	--control-height: calc(var(--size-5) - 4px);
	--control-height-2: calc(var(--size-5) - 6px);
}
	.ºgrid .ºcontrol.hidden{
		opacity: 0 !important;
	}
	.ºgrid .row .cell .ºlabel .text-size{
		line-height: unset;
		width: 100%
	}
		.ºgrid .row .cell .ºlabel .text-size .icon{
			float: right;
			display: inline-block;
		}
			.ºgrid .row .cell .ºlabel .text-size .icon:last-child{
				padding-right: 0;
			}
		
	.ºgrid .row .cell .ºtextbox,
	.ºgrid .row .cell .ºtimebox,
	.ºgrid .row .cell .ºdatepicker,
	.ºgrid .row .cell .ºcombobox{
		min-width: auto;
		border-color: transparent;
		background: transparent;
	}
		.ºgrid .row .cell .ºtextbox input,
		.ºgrid .row .cell .ºcombobox .label{
			padding: 0 calc(var(--padding) - 1px);
		}
		.ºgrid .row:hover .cell .ºtextbox,
		.ºgrid .row.focus .cell .ºtextbox,
		.ºgrid .row:hover .cell .ºtimebox,
		.ºgrid .row.focus .cell .ºtimebox,
		.ºgrid .row:hover .cell .ºdatepicker,
		.ºgrid .row.focus .cell .ºdatepicker,	
		.ºgrid .row:hover .cell .ºcombobox,
		.ºgrid .row.focus .cell .ºcombobox{
			border-color: var(--control-border-color);
		}
		.ºgrid .row .cell .ºtextbox:hover,
		.ºgrid .row .cell .ºtextbox.focus,
		.ºgrid .row .cell .ºtimebox:hover,
		.ºgrid .row .cell .ºtimebox.focus,
		.ºgrid .row .cell .ºdatepicker:hover,
		.ºgrid .row .cell .ºdatepicker.focus,
		.ºgrid .row .cell .ºcombobox:hover,
		.ºgrid .row .cell .ºcombobox.focus{
			border-color: var(--color-border-focus);
			box-shadow: none;
		}
		.ºgrid .row .cell .ºcontrol.disabled{
			border-color: transparent;
		}
	.ºgrid .row .cell .ºlabel,
	.ºgrid .row .cell .ºcheckbox{
		padding: 0 var(--padding);
	}
	.ºgrid .row .cell .ºbutton{
		justify-content: left;
		padding: 0 var(--size-1);
		background: transparent !important;
		box-shadow: none;
	}
		.ºgrid .row .cell .ºbutton > *{
			color: var(--color-text);
			transition: 
				color .3s ease-in;
		}
		.ºgrid .row .cell .ºbutton .icon{
			color: var(--color-text-2);
			font-size: calc(var(--size-3) + 2px);
		}
			.ºgrid .row .cell .ºbutton .icon:before{
				margin-top: -2px;
			}
		.ºgrid .row .cell .ºbutton:hover > *,
		.ºgrid .row .cell .ºbutton:focus > *{
			color: var(--color-4);
		}
		.ºgrid .row .cell:last-child .ºbutton:last-child,
		.ºgrid .row .cell.last .ºbutton:last-child{
			padding-right: var(--size-3);
		}
		
		.ºgrid .row .cell.alt .ºbutton{
			background: var(--color-8) !important;
		}
			.ºgrid .row .cell.alt .ºbutton .icon:before{
				margin-top: 0px;
			}
			.ºgrid .row .cell.alt .ºbutton .label{
				margin-top: 2px;
			}
		
		
	.ºgrid.view-table.clickable .row.focus *,
	.ºgrid.view-table.clickable .row.focus *::before{
				border-color: var(--color-13);
				color: var(--color-12);
			}
			
	.ºgrid .row .cell .ºcontrol.ºicon{
		display: flex;
		justify-content: center;
		align-items: center;
		width: var(--size-4);
		height: var(--size-4);
	}
		.ºgrid .row .cell .ºcontrol.ºicon:before{
			font-size: 20px;
		}

	.ºgrid .row .cell.expand{
		padding: 0 var(--size-2);
	}
		.ºgrid .row .cell.expand .container{
			display: flex;
			justify-content: center;
			align-items: center;
			width: var(--size-3);
			height: var(--size-3);
			border-radius: var(--control-border-radius);
			background: var(--color-5);
			transition: 
				background-color .5s ease-in-out;			
		}
			.ºgrid .row .cell.expand .container:hover{
				background: var(--color-4);
			}
			.ºgrid .row .cell.expand .container .simbol{
				color: var(--color-12);
			}
				.ºgrid .row .cell.expand .container .simbol::before{
					font-size: 11px;
				}
			
		
		.ºgrid .row.collapsed .simbol::before{
			content: '\2b';
		}
		.ºgrid .row.expanded .simbol::before{
			content: '\f068';
		}
	.ºgrid .progress{
		position: relative;
		width: 100%;
	}
		.ºgrid .progress .bar{
			background: var(--color-7);
			border-radius: 3px;
			height: var(--size-4);
			transition: 
				width 1s;
		}
		.ºgrid .progress .text-size{
			position: absolute;
			top: 0;
			width: 100%;
			line-height: var(--size-4);
			text-align: center;
		}
	
	.ºgrid .row.container{
		min-height: var(--size-4);
	}
		.ºgrid .row.container .cell{
			--control-height: calc(var(--size-4) - 1px);
			background: var(--control-border-color-2) !important;
			border-bottom: 1px solid var(--control-border-color-4);
		}
			.ºgrid .row.container .cell .ºcontrol{
				width: auto;
			}
			.ºgrid .row.container .text-size{
				font-weight: 400;
			}
	
	.ºgrid .row-container{
		grid-column: 1/-1;
		height: 0;
		overflow: hidden;
		transition: 
			height .3s ease;
	}
		.ºgrid .row-container.expanded{
			overflow: inherit;
		}
		.ºgrid .row-container .subitem{
			padding: var(--size-2);
			padding-left: var(--size-6);
			background: var(--color-12);
		}		
		.ºgrid .row-container .subitem:last-child{
			border-bottom: 1px solid var(--control-border-color-2);
		}
			.ºgrid .row-container .subitem.title{
				padding: calc(var(--size-1) / 2) 0 calc(var(--size-1) / 2) var(--size-5);
				background: var(--color-9);
				color: var(--color-1);
			}
			.ºgrid .row-container .subitem.table{
				padding: 0;
			}

	
.ºgrid.view-table .row.error{
	background: var(--control-error-background);
}
	.ºgrid.view-table .row.error:hover{
		background: var(--control-error-focus);
	}
		.ºgrid .row .cell.error .ºtextbox,
		.ºgrid .row .cell.error .ºtimebox,
		.ºgrid .row .cell.error .ºdatepicker,
		.ºgrid .row .cell.error .ºcombobox{
			border-color: var(--control-error-color);
		}
		.ºgrid .row .cell.error .ºtextbox.focus,
		.ºgrid .row .cell.error .ºtimebox.focus,
		.ºgrid .row .cell.error .ºdatepicker.focus,
		.ºgrid .row .cell.error .ºcombobox.focus{	
			box-shadow: 0 0 0 3px var(--control-error-focus);
		}
		
.ºgrid{
	margin-bottom: var(--size-2);
}
	.ºgrid:last-child,
	.ºlayout .ºgrid{
		margin-bottom: 0;
	}
	
.ºgrid.scrollable > .container{	
	border-radius: 0 0 var(--control-border-radius-2) var(--control-border-radius-2);
	overflow: auto;
}
		.ºgrid.scrollable > .container > .body{
			flex: 1;
			overflow-y: auto;
		}
	
.ºgrid .row.warn{
	--cell-color: 255, 140, 0;
	background: rgba(var(--cell-color), .05);
}
	.ºgrid .row.warn *{
		color: rgb(var(--cell-color));
	}
	
.ºgrid.view-table .cell.highlight{
	background: var(--color-9);
	border-color: transparent;
}
	.ºgrid.view-table .cell.highlight,
	.ºgrid.view-table .cell.highlight *{
		color: var(--color-3);
	}
.ºgrid.view-table .cell.highlight2{
	background: var(--color-11);
	border-color: transparent;
}

.ºgrid.hasLoader > *{
	pointer-events: none;
}

.ºgrid .cell.colspan-2{
	grid-column: span 2;
}
.ºgrid .cell.colspan-2 + .cell{
	display: none;
}
.ºgrid.errorInData > .container > .body, .ºgrid.errorLoading > .container > .header, .ºgrid.errorLoading > .container > .footer{
	background-color: var(--control-error-background);
}