.fields-grid{
	display:grid;
	grid-template-columns: auto 1fr;
	gap: 20px 10px;
	padding: 10px;
	align-content: start;
	line-height: normal;


	.field-help{
		margin-top: 10px;
		margin-bottom: 5px;
		padding: 10px;
		background-color: #eee;
		grid-column: span 2;
		border-left: 5px solid #3fa9c5;
		display:none;
		font-size:16px;
		user-select: none;
		text-align: justify;

		&.displayed{
			display: block;
		}
	}

	.field-label{
		line-height: 30px;
		font-size: 15px;
		padding:0px 5px;
		display: flex;
		grid-column: 1;

		label{
			flex:1 1 auto;
			padding-right:10px
		}

		.bt-field-help{
			flex:0 0 auto;
			background-color:#3fa9c5;
			color:#fff;
			text-transform: uppercase;
			font-size:12px;
			margin:8px 0 6px 0;
			padding:0 4px;
			line-height:16px;
			height:16px;
			cursor: pointer;
			user-select: none;
			font-weight: bold;
		}

		.bt-field-help.in-use{
			color:#3fa9c5;
			background-color:#fff;
			border: 1px solid #3fa9c5;
		}
	}

	.field-input{
		grid-column: 2;

		.field-text{
			font-family: Arial, Helvetica, sans-serif;
			padding:20px 10px 10px 10px;
			border-left: 1px solid;
			border-left-color : var(--group-color, #999);
			background-color : var(--group-light-color, #eee);
			text-align: justify;
			font-size: 16px;
			padding: 0 10px 10px 0;
			display: flex;
			flex: auto;
			gap: 10px;

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

			ul{
				list-style: square;
				padding-left:20px;
			}

			.drop-cap{
				width: 40px;
				background-color: var(--group-color, #999);
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				font-weight: bold;
				padding: 0px 5px 0px 4px;
			}

			.content{
				margin-top: 10px;
			}
		}

		a{
			font-size:16px;
			line-height: 30px;
			color: rgb(45, 136, 136);
			transition: all 0.3s ease;

			&:hover{
				color:rgb(13, 175, 175);
			}
		}
	}
}

.vertical{
	.field-input{
		grid-column : 1;
	}
}