formgen/source/style.css

html
{
	background-color: #000000;
	color: #FFFFFF;
	
	font-family: sans-serif;
}

body
{
	min-width: 960px;
	max-width: 100vw;
	margin: auto;
	padding: 16px;
	
	background-color: #202020;
	color: #D0D0D0;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#left,#middle,#right
{
	flex-basis: 0;
	flex-shrink: 1;
	flex-grow: 1;
	
	padding: 16px;
}

#description_kind
{
	margin-bottom: 8px;
}

.codepane
{
	width: 100%;
	min-height: 640px;
	tab-size: 16px;

	background-color: #404040;
	color: #FFFFFF;
	
	border-color: #808080;
	border-width: 1px;
	border-style: solid;
	
	padding: 8px;
	margin-bottom: 16px;
}

.action
{
	text-transform: uppercase;
}

#form
{
	width: 100%;
	min-height: 240px;

	margin-bottom: 16px;
}

.formgen-info
{
	cursor: help;
	margin: 2px;
	font-weight: bold;
	/*
	font-size: 75%;
	 */
}

.formgen-ioc > label
{
	display: block;
	font-size: 80%;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 2px;
}

.formgen-form-button
{
	text-transform: uppercase;
}

.formgen-ioc-list-action
{
	padding: 0 8px;
	font-weight: bold;
}

.formgen-ioc-list-entries
,
.formgen-ioc-list-action-add
{
	margin-left: 32px;
}

.formgen-ioc-list-entry
{
	margin-bottom: 16px;
}

.formgen-ioc-list-entry-input
{
	margin-top: 4px;
}

.formgen-ioc-group-fields
{
	margin-left: 32px;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.formgen-ioc-group-field
{
	flex-basis: 50%;
	flex-grow: 1;
	flex-shrink: 1;
	
	margin-bottom: 8px;
}

.formgen-ioc-group-field-marked > .formgen-ioc > label::before
{
	content: "* ";
}

.formgen-ioc-sum-selection
{
	margin-bottom: 32px;
}

.formgen-ioc-sum-item-selector:not(:first-child)
{
	margin-top: 8px;
}

.formgen-ioc-sum-item-selector > label
{
	margin-left: 4px;
}

.formgen-ioc-sum-item-input:not(.formgen-ioc-sum-item-input-active)
{
	display: none;
}

.formgen-ioc-sum-item-input > .formgen-ioc > label
{
	display: none;
}