.group-item{
	grid-column: span 6;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

	&.third{
		grid-column : span 2;
	}
	&.half{
		grid-column : span 3;
	}
	.group-top{
		display:flex;
		position: relative;
	}

	.group-icon{
		position: absolute;
		top:0px;
		left:-1px;
		height:50px;
		width:50px;
		display:flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		background-color:var(--group-color, #333);
		color:#fff;
		font-size:30px;
		cursor: pointer;
	}

	.group-title-line{
		flex: 0 0 40px;
		box-sizing: border-box;
		background-color:#f5f5f5;
		color:#000;
		display: flex;
		padding-left:10px;
		position: relative;
		border-left: 1px solid;
		border-color : var(--group-color, #999);

		&.has-icon{
			padding-left:60px;
		}
	}

	.group-title{
		flex:1 1 auto;
		font-family: "Gravity";
		font-weight: 300;
		font-size:25px;
		line-height: 40px;
		cursor: pointer;
		user-select: none;
	}

	.group-doc{
		flex:0 0 40px;
		height:40;
		background-color : var(--group-color, #333);
		color:#fff;
		box-sizing: border-box;
		display:flex;
		justify-content: center;
		align-items: center;
		font-size:20px;
	}
	.group-expand{
		flex:0 0 40px;
		height:40px;
		background-color: #888;
		color:#fff;
		box-sizing: border-box;
		display:flex;
		justify-content: center;
		align-items: center;
		font-size:20px;
		cursor: pointer;
		&:hover{
			opacity:0.8;
		}
	}
	.group-help{
		font-family: Arial, Helvetica, sans-serif;
		padding:20px 10px 10px 10px;
		border-left: 1px solid;
		border-left-color : var(--group-color, #999);
		border-right: 5px solid;
		border-right-color : var(--group-color, #333);
		background-color : var(--group-light-color, #eee);
		text-align: justify;
		font-size: 16px;

		b, strong{
			color:var(--group-color, #016087);
		}

		ul{
			list-style: square;
			padding-left:20px;
		}
	}
	.group-content{
		flex:1 1 auto;
		font-family: Arial, Helvetica, sans-serif;
		padding: 10px;
		border: 1px solid #999;
		border-color : var(--group-color, #999);
		border-right: 5px solid;
		border-right-color : var(--group-color, #333);
		border-top: none;
		background-color: #fff;

		&.collapsed{
			display:none;
		}

		.group-spanned{
			grid-column: span 2;
		}
	}
}
.vertical{
	.group-content{
		grid-template-columns: 1fr;
	}
}