.hn-configurator

{

	max-width: 920px;

}



.hn-configurator h1

{

	color: #445588;

	font-size: 16pt;

	margin: 0 0 12px 0;

}



.hn-intro

{

	margin: 0 0 20px 0;

	line-height: 1.4;

}



.hn-layout

{

	display: table;

	width: 100%;

	border-collapse: separate;

	border-spacing: 24px 0;

}



.hn-controls,

.hn-preview-wrap

{

	display: table-cell;

	vertical-align: top;

}



.hn-controls

{

	width: 360px;

}



.hn-fieldset

{

	border: 1px solid #445588;

	margin: 0 0 16px 0;

	padding: 10px 12px 12px;

}



.hn-fieldset legend

{

	color: #445588;

	font-weight: bold;

	padding: 0 6px;

}



.hn-fieldset label

{

	display: block;

	margin: 8px 0 4px;

}



.hn-fieldset textarea,

.hn-fieldset input[type="number"],

.hn-fieldset input[type="file"]

{

	width: 100%;

	box-sizing: border-box;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 10pt;

}



.hn-text-panel

{

	border: 1px solid #ccc;

	padding: 8px 10px;

	margin-bottom: 10px;

	background: #fafafa;

	cursor: pointer;

}



.hn-text-panel-selected

{

	border-color: #445588;

	background: #f0f4fa;

	box-shadow: 0 0 0 1px #445588;

}



.hn-text-panel-head

{

	display: flex;

	justify-content: space-between;

	align-items: center;

	margin-bottom: 6px;

}



.hn-text-panel-title

{

	font-weight: bold;

	color: #445588;

	font-size: 9pt;

}



.hn-text-remove

{

	border: none;

	background: transparent;

	color: #445588;

	font-size: 18px;

	line-height: 1;

	cursor: pointer;

	padding: 0 4px;

}



.hn-text-remove:hover

{

	color: #c00;

}



.hn-text-panel textarea

{

	resize: vertical;

	min-height: 56px;

	margin-bottom: 6px;

}



.hn-row

{

	margin-top: 8px;

}



.hn-row input[type="number"]

{

	width: 80px;

}



.hn-checkbox

{

	margin-top: 8px;

	cursor: pointer;

	display: block;

}



.hn-checkbox input

{

	margin-right: 6px;

	vertical-align: middle;

}



.hn-colors

{

	display: flex;

	gap: 20px;

	margin-top: 4px;

}



.hn-color-option

{

	display: flex;

	flex-direction: column;

	align-items: center;

	cursor: pointer;

	margin: 0;

}



.hn-color-option input

{

	position: absolute;

	opacity: 0;

	width: 0;

	height: 0;

}



.hn-swatch

{

	display: block;

	width: 56px;

	height: 56px;

	border: 2px solid #445588;

	box-sizing: border-box;

}



.hn-swatch-green

{

	background-color: #C0FF3E;

}



.hn-swatch-yellow

{

	background-color: #FFFF33;

}



.hn-color-option input:checked + .hn-swatch

{

	outline: 3px solid #445588;

	outline-offset: 2px;

}



.hn-color-label

{

	margin-top: 6px;

	font-size: 9pt;

	text-align: center;

}



.hn-hint

{

	font-size: 9pt;

	color: #333;

	margin: 8px 0 0;

	line-height: 1.35;

}



.hn-export-note

{

	margin-top: 12px;

}



.hn-actions

{

	margin-top: 8px;

	display: flex;

	flex-wrap: wrap;

	gap: 8px;

}



.hn-status

{

	margin-top: 12px;

	padding: 8px 10px;

	font-size: 9pt;

	border: 1px solid #445588;

}



.hn-status-error

{

	border-color: #c00;

	color: #900;

	background: #fff0f0;

}



.hn-status-ok

{

	background: #f0f4fa;

	color: #445588;

}



.hn-btn-secondary

{

	margin-top: 8px;

	width: auto;

	min-width: 130px;

}



.hn-preview-wrap

{

	width: 300px;

}



.hn-preview-title

{

	font-weight: bold;

	color: #445588;

	margin: 0 0 8px 0;

}



.hn-preview-hint

{

	font-weight: normal;

	font-size: 9pt;

	color: #666;

}



.hn-preview-frame

{

	border: 1px solid #445588;

	padding: 8px;

	background: #fff;

	display: inline-block;

}



#hn_canvas

{

	display: block;

	width: 280px;

	height: 280px;

	cursor: default;

	user-select: none;

	-webkit-user-select: none;

}



#hn_canvas.hn-canvas-dragging

{

	cursor: move;

}