body {
	--button_background: #ddd;
	--button_border_color: var(--button_background);
	--button_border_radius: var(--input_border_radius);
	--button_border_width: var(--input_border_width);
	--button_box_shadow: none;
	--button_color: #000;
	--button_filter: var(--input_filter);
	--button_font_family: var(--input_font_family);
	--button_font_size: var(--input_font_size);
	--button_line_height: var(--input_line_height);
	--button_margin: 0 4px 2px 0;
	--button_outline: var(--input_outline);
	--button_padding: var(--button_padding_v) var(--button_padding_h);
	--button_padding_h: 10px;
	--button_padding_v: var(--input_padding_v);
	--button_transition: var(--input_transition);

	--button_focus_background: #f96;
	--button_focus_border_color: var(--button_focus_background);
	--button_focus_border_radius: var(--button_border_radius);
	--button_focus_border_width: var(--button_border_width);
	--button_focus_box_shadow: var(--button_box_shadow);
	--button_focus_color: var(--button_color);
	--button_focus_filter: var(--button_filter);
	--button_focus_font_family: var(--button_font_family);
	--button_focus_font_size: var(--button_font_size);
	--button_focus_line_height: var(--button_line_height);
	--button_focus_margin: var(--button_margin);
	--button_focus_outline: var(--button_outline);
	--button_focus_padding: var(--button_padding);
	--button_focus_transition: var(--button_transition);

	--button_hover_background: #fda;
	--button_hover_border_color: var(--button_hover_background);
	--button_hover_border_radius: var(--button_border_radius);
	--button_hover_border_width: var(--button_border_width);
	--button_hover_box_shadow: var(--button_box_shadow);
	--button_hover_color: var(--button_color);
	--button_hover_filter: var(--button_filter);
	--button_hover_font_family: var(--button_font_family);
	--button_hover_font_size: var(--button_font_size);
	--button_hover_line_height: var(--button_line_height);
	--button_hover_margin: var(--button_margin);
	--button_hover_outline: var(--button_outline);
	--button_hover_padding: var(--button_padding);
	--button_hover_transition: var(--button_transition);


	--input_background: #fff;
	--input_border_color: #999;
	--input_border_radius: 0;
	--input_border_width: 1.02px;
	--input_box_shadow: none;
	--input_color: #000;
	--input_filter: none;
	--input_font_family: sans-serif;
	--input_font_size: 1rem;
	--input_line_height: 1.5;
	--input_margin: 0 4px 2px 0;
	--input_outline: none;
	--input_padding: var(--input_padding_v) var(--input_padding_h);
	--input_padding_h: 6px;
	--input_padding_v: 3px;
	--input_transition: 0.2s ease;

	--input_readonly_border_color: #ddd;

	--input_focus_background: var(--input_background);
	--input_focus_border_color: #f96;
	--input_focus_border_radius: var(--input_border_radius);
	--input_focus_border_width: var(--input_border_width);
	--input_focus_box_shadow: var(--input_box_shadow);
	--input_focus_color: var(--input_color);
	--input_focus_filter: var(--input_filter);
	--input_focus_font_family: var(--input_font_family);
	--input_focus_font_size: var(--input_font_size);
	--input_focus_line_height: var(--input_line_height);
	--input_focus_margin: var(--input_margin);
	--input_focus_outline: var(--input_outline);
	--input_focus_padding: var(--input_padding);
	--input_focus_transition: var(--input_transition);

	--input_hover_background: var(--input_background);
	--input_hover_border_color: #000;
	--input_hover_border_radius: var(--input_border_radius);
	--input_hover_border_width: var(--input_border_width);
	--input_hover_box_shadow: var(--input_box_shadow);
	--input_hover_color: var(--input_color);
	--input_hover_filter: var(--input_filter);
	--input_hover_font_family: var(--input_font_family);
	--input_hover_font_size: var(--input_font_size);
	--input_hover_line_height: var(--input_line_height);
	--input_hover_margin: var(--input_margin);
	--input_hover_outline: var(--input_outline);
	--input_hover_padding: var(--input_padding);
	--input_hover_transition: var(--input_transition);

	--disabled_opacity: .45;
}


/* Common */

	.button,
	.control_button,
	input[type=submit],
	input[type=button],
	button,
	.selectus .select,
	textarea,
	select,
	.input,
	input {
		box-sizing: border-box;
		display: inline-block;
		vertical-align: middle;
	}

	.button,
	.control_button,
	input[type=submit],
	input[type=button],
	button {
		box-sizing: border-box;
		display: inline-block;
		min-height: calc(
			var(--button_line_height) * 1em
			+ 2 * (var(--button_border_width) + var(--button_padding_v))
		);
		vertical-align: middle;
	}

	.selectus .select,
	textarea,
	select,
	.input,
	input {
		box-sizing: border-box;
		display: inline-block;
		min-height: calc(
			var(--input_line_height) * 1em
			+ 2 * (var(--input_border_width) + var(--input_padding_v))
		);
		vertical-align: middle;
	}


/* Inputs */

	.selectus:not(.readonly) .select:hover,
	textarea:not([readonly]):hover,
	select:not([readonly]):not(.readonly):hover,
	.input:not(.readonly):hover,
	input:not([readonly]):hover {
		background: var(--input_hover_background);
		border: var(--input_hover_border_width) solid var(--input_hover_border_color);
		border-radius: var(--input_hover_border_radius);
		box-shadow: var(--input_hover_box_shadow);
		color: var(--input_hover_color);
		filter: var(--input_hover_filter);
		font-family: var(--input_hover_font_family);
		font-size: var(--input_hover_font_size);
		line-height: var(--input_hover_line_height);
		margin: var(--input_hover_margin);
		outline: var(--input_hover_outline);
		padding: var(--input_hover_padding);
		transition: var(--input_hover_transition);
	}

	.selectus:not(.readonly) .focus .select,
	textarea:not([readonly]):focus,
	select:not([readonly]):not(.readonly):focus,
	.input:not(.readonly):focus,
	.focus input:not(.readonly),
	input:not([readonly]):focus {
		background: var(--input_focus_background);
		border: var(--input_focus_border_width) solid  var(--input_focus_border_color);
		border-radius: var(--input_focus_border_radius);
		box-shadow: var(--input_focus_box_shadow);
		color: var(--input_focus_color);
		filter: var(--input_focus_filter);
		font-family: var(--input_focus_font_family);
		font-size: var(--input_focus_font_size);
		line-height: var(--input_focus_line_height);
		margin: var(--input_focus_margin);
		outline: var(--input_focus_outline);
		padding: var(--input_focus_padding);
		transition: var(--input_focus_transition);
	}

	.selectus_control .select,
	textarea,
	select,
	.input,
	input {
		background: var(--input_background);
		border: 1px solid;
		border: var(--input_border_width) solid  var(--input_border_color);
		border-radius: var(--input_border_radius);
		box-shadow: var(--input_box_shadow);
		color: var(--input_color);
		filter: var(--input_filter);
		font-family: var(--input_font_family);
		font-size: var(--input_font_size);
		line-height: var(--input_line_height);
		margin: var(--input_margin);
		padding: 4px;
		padding: var(--input_padding);
		outline: var(--input_outline);
		transition: var(--input_transition);
	}
	textarea {
		resize: vertical;
	}


/* Selectors */

	input[type=checkbox] + label,
	input[type=radio] + label,
	.option label,
	select {
		cursor: pointer;
	}
	select {
		max-width: 100%;
	}
	select.readonly,
	.readonly select {
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
	}


/* Buttons */

	input[type=submit]:hover,
	input[type=button]:hover,
	.control_button:hover, .control_button:link:hover, .control_button:visited:hover,
	.button:hover, .button:link:hover, .button:visited:hover,
	button:hover {
		background: var(--button_hover_background);
		border: var(--button_hover_border_width) solid var(--button_hover_border_color);
		border-radius: var(--button_hover_border_radius);
		box-shadow: var(--button_hover_box_shadow);
		color: var(--button_hover_color);
		filter: var(--button_hover_filter);
		font-family: var(--button_hover_font_family);
		font-size: var(--button_hover_font_size);
		line-height: var(--button_hover_line_height);
		margin: var(--button_hover_margin);
		outline: var(--button_hover_outline);
		padding: var(--button_hover_padding);
		transition: var(--button_hover_transition);
	}

	input[type=submit]:focus,
	input[type=button]:focus,
	.control_button:focus, .control_button:visited:focus,
	.button:focus, .button:visited:focus,
	button:focus {
		background: var(--button_focus_background);
		border: var(--button_focus_border_width) solid var(--button_focus_border_color);
		border-radius: var(--button_focus_border_radius);
		box-shadow: var(--button_focus_box_shadow);
		color: var(--button_focus_color);
		filter: var(--button_focus_filter);
		font-family: var(--button_focus_font_family);
		font-size: var(--button_focus_font_size);
		line-height: var(--button_focus_line_height);
		margin: var(--button_focus_margin);
		outline: var(--button_focus_outline);
		padding: var(--button_focus_padding);
		transition: var(--button_focus_transition);
	}

	input[type=submit],
	input[type=button],
	.control_button, .control_button:link, .control_button:visited,
	.button, .button:link, .button:visited,
	button {
		background: var(--button_background);
		border: var(--button_border_width) solid var(--button_border_color);
		border-radius: var(--button_border_radius);
		box-shadow: var(--button_box_shadow);
		color: var(--button_color);
		filter: var(--button_filter);
		font-family: var(--button_font_family);
		font-size: var(--button_font_size);
		line-height: var(--button_line_height);
		margin: var(--button_margin);
		padding: var(--button_padding);
		outline: var(--button_outline);
		transition: var(--button_transition);

		cursor: pointer;
		min-width: calc(
			var(--button_line_height) * 1em
			+ 2 * (var(--button_border_width) + var(--button_padding_v))
		);
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}


/* Control buttons */

	.control_button_dropdown:before {
		content: '\25bc';
	}
	.control_button_inc:before {
		content: '+';
	}
	.control_button_dec:before {
		content: '\2212';
	}


/* Password */

	.control_button_password:before {
		content: '\a9';
	}
	.control_button_password_view:before {
		opacity: 0.5;
	}


/* Datetime */

	.date_control {
		white-space: nowrap;
		text-decoration: none;
	}
	.date_control .year {
		width: calc(var(--input_padding_h) * 2 + var(--input_border_width) * 2 + 2.5em);
	}
	.date_control .day, .date_control .hours, .date_control .minutes {
		width: calc(var(--input_padding_h) * 2 + var(--input_border_width) * 2 + 1.5em);
		margin-right: 2px;
		margin-left: 2px;
	}
	.date_control .day, .date_control .hours {
		text-align: right;
	}
	.time_spliter:before {
		content: ':';
	}
	.date_control .control_button_dec, .date_control .control_button_inc {
		display: none;
	}


/* Number */

	.number .field_control input {
		width: 10em;
	}


/* Suggests */

	.with_suggest {
		display: inline-block;
		position: relative;
	}
	.with_suggest.focus {
		z-index: 888;
	}
	.with_suggest .suggest {
		background: var(--input_focus_background);
		border: var(--input_focus_border_width) solid var(--input_focus_border_color);
		border-radius: var(--input_focus_border_radius);
		box-shadow: var(--input_focus_box_shadow);
		color: var(--input_focus_color);
		font-family: var(--input_focus_font_family);
		font-size: var(--input_focus_font_size);
		line-height: var(--input_focus_line_height);
		margin: -1px 0 1px;
		outline: var(--input_focus_outline);
		padding: 1em;
		height: auto;
		position: absolute;
	}
	.with_suggest:not(.focus) .suggest {
		height: 0;
		padding: 0;
		border: none;
		outline: none;
		box-shadow: none;
		box-sizing: border-box;
		overflow: hidden;
	}
	.suggest .option:hover,
	.suggest > label:hover {
		background: var(--button_hover_background);
		color: var(--button_hover_color);
		filter: var(--button_hover_filter);
	}
	.suggest .selected {
		background: var(--button_hover_background);
		color: var(--button_hover_color);
		filter: var(--button_hover_filter);
	}


/* Selectus */

	.selectus .select {
		display: inline-block;
		text-decoration: none;
		min-width: 8em;
		min-width: min-content;
		position: relative;
		cursor: pointer;
		--input_padding: var(--input_padding_v) 2em var(--input_padding_v) var(--input_padding_h);
		--input_hover_padding: var(--input_padding);
		--input_focus_padding: var(--input_padding);
	}
	.selectus .select > ins {
		display: inline-block;
		min-width: 2em;
	}
	.selectus .select input {
		display: none;
		border: none;
		outline: none;
		padding: 0;
		margin: 0 1em 0 0;
		line-height: 1;
		height: auto;
		min-height: 0;
	}
	.selectus .focus .select input {
		display: inline-block;
		vertical-align: baseline;
	}
	.selectus .select:after {
		content: '\25bc';
		font-size: 9px;
		position: absolute;
		right: calc(var(--input_padding_h) / 2);
		bottom: 50%;
		line-height: 1;
		margin-bottom: -4px;
	}
	.selectus.readonly .select:after {
		content: none;
	}
	.selectus .select > ins:before {
		content: '';
		height: 1px;
		width: 1px;
		display: inline-block;
		margin-left: -1px;
	}
	.selectus .select .selected {
		display: inline-block;
		text-decoration: none;
		margin: 0 2em 0 0;
		min-height: auto;
		border: none;
		padding: 0;
		position: relative;
	}
	.selectus .select .placeholder {
		opacity: var(--disabled_opacity);
	}
	.selectus.checkbox:not(.some) .select {
		padding: calc(var(--input_padding_v) / 2) calc(var(--input_padding_h) / 2) 0;
	}
	.selectus.checkbox .select .selected {
		padding: calc(var(--input_padding_v) / 2 - var(--input_border_width)) 1em;
		padding-right: 2em;
		border: var(--input_border_width) solid var(--input_border_color);
		margin: 0 1em calc(var(--input_padding_v) / 2) 0;
	}
	.selectus .select .selected .unselect {
		position: absolute;
	}
	.selectus .select .selected .unselect:before {
		content: '×';
		color: #c00;
		display: inline-block;
		margin: -.5em -.1em -.5em .1em;
		vertical-align: middle;
		font-size: 145%;
		cursor: pointer;
		opacity: 0.6;
		transition: var(--button_transition);
	}
	.selectus .select .selected .unselect:hover:before {
		opacity: 1;
	}
	.selectus.readonly .select .selected .unselect {
		display: none;
	}
	.selectus .suggest {
		padding: 0;
		min-width: max-content;
	}
	.selectus .suggest input[type=search] {
		width: 100%;
		margin: 0;
		box-sizing: border-box;
		border-radius: var(--input_focus_border_radius) var(--input_focus_border_radius) 0 0;
		border: none;
		border-bottom: var(--input_focus_border_width) solid var(--input_focus_border_color);
	}
	.selectus.no_search .suggest input[type=search] {
		position: absolute;
		opacity: 0;
		right: 2000px;
	}
	.selectus .focus .selectors {
		display: block;
		max-height: 15em;
		min-width: 15em;
		overflow: auto;
		padding: 0;
		position: relative;
		max-width: calc(100vw - 20px - var(--input_focus_border_width) * 2);
		border-radius: 0 0 var(--input_focus_border_radius) var(--input_focus_border_radius);
	}
	.selectus .selectors .option {
		display: block;
		border: 1px solid transparent;
		padding: var(--input_padding_v) 1em;
	}
	.selectus .selectors .focus {
		border: var(--input_focus_border_width) solid var(--input_focus_border_color);
	}


/* Date Picker */

	.date_picker_control input {
		width: calc(var(--input_padding_h) * 2 + var(--input_border_width) * 2 + 8em);
	}
	.date_picker_control .calendar {
		position: absolute;
		display: flex;
		gap: 1em;
	}
	.date_picker_control .calendar .close {
		cursor: pointer;
		position: absolute;
		right: 7px;
		top: 5px;
	}
	.date_picker_control .calendar .days .d,
	.date_picker_control .calendar .days .dn {
		cursor: pointer;
		padding: var(--input_padding);
		text-align: right;
	}
	.date_picker_control .calendar .days .dn {
		cursor: default;
	}
	.date_picker_control .calendar .control_button_inc:before,
	.date_picker_control .calendar .control_button_dec:before {
		content: '';
	}
	.date_picker_control .calendar .days .invalid {
		cursor: default;
		background: #ccc;
		opacity: var(--disabled_opacity);
	}
	.date_picker_control .calendar .control_button_now {
		clear: both;
		display: block;
		margin: 4px 0 0;
	}
	.date_picker_control .calendar .month,
	.date_picker_control .calendar .year,
	.date_picker_control .calendar .time {
		white-space: nowrap;
		text-align: center;
	}
	.date_picker_control .calendar .year .title,
	.date_picker_control .calendar .month .title {
		display: inline-block;
		margin-right: 4px;
		min-width: 6em;
		text-align: center;
	}
	.date_picker_control .calendar .hour:after {
		content: ': ';
	}
	.datemonth_picker .year .title,
	.datemonth_picker .month .title {
		cursor: pointer;
	}
	.datemonth_picker .year .title.invalid,
	.datemonth_picker .month .title.invalid {
		opacity: var(--disabled_opacity);
		cursor: default;
	}


/* Files */

	.field input[type=file] ~ .selected {
		display: block;
		text-decoration: none;
	}
	input[type=file] ~ .selected ins {
		text-decoration: none;
	}
	input[type=file] ~ .selected .file {
		display: block;
		margin: 0 0 .5em;
	}
	input[type=file] ~ .selected .file .name {
		margin-right: .4em;
	}
	input[type=file] ~ .selected .file .size {
		opacity: .6;
	}


/* Dependencies */

	.invalid > .fields_label, .fields_label.invalid,
	.field.invalid input, .field.invalid textarea, .field.invalid select,
	input.invalid, textarea.invalid, select.invalid {
		color: red;
	}
	.valid > .fields_label, .fields_label.valid,
	.field.valid input, .field.valid textarea, .field.valid select,
	input.valid, textarea.valid, select.valid {
		color: green;
	}
	.required > .fields_label, .fields_label.required,
	.field.required label, label.required {
		font-weight: bold;
	}
	.disabled *,
	.disabled {
		cursor: default ! important;
	}
	.disabled {
		opacity: var(--disabled_opacity);
	}
	.disabled .disabled {
		opacity: 1;
	}


/* Disabled */

	.disabled label, label.disabled,
	.disabled input, input.disabled,
	.disabled textarea, textarea.disabled,
	.disabled select, select.disabled,
	.disabled .selectus .select, .selectus .select.disabled,
	.disabled .option, .option.disabled,
	.disabled button, button.disabled,
	.disabled .button, .button.disabled,
	.disabled .control_button, .control_button.disabled {
		pointer-events: none;
	}

/* Readonly */

	[readonly],
	.readonly *:not(.some),
	.readonly {
		cursor: inherit;
		--input_border_color: var(--input_readonly_border_color);
	}
	.readonly .control_button {
		display: none;
	}