:root {
	--ansc-hlp-input-background-color: white;
	--ansc-hlp-input-border-color: gray;
	--ansc-hlp-input-background-color-disabled: silver;
	--ansc-hlp-input-border-color-disabled: gray;
	--ansc-hlp-input-box-color: transparent;
	--ansc-hlp-input-foreground-color: black;
	--ansc-hlp-input-innerheight: 26px;
	--ansc-hlp-input-outerheight: 30px;
	--ansc-hlp-input-inner-border: 1px;
	--ansc-hlp-input-inner-padding: 2px;
	--ansc-hlp-input-padding: 2px;
	--ansc-hlp-input-labelwidth: 120px;
	--ansc-hlp-input-margin-top: 0px;
	--ansc-hlp-input-flipdown-titelheight: 20px;
	--ansc-hlp-input-width: 220px;
	
	--ansc-hlp-input-toggle-oncolor: #22CC00;
	--ansc-hlp-input-toggle-offcolor: #ccc;
	--innert_button_width: 0px;

/* Berechnungswerte */
	--col_left: 0;
	--col_main:	auto;
	--col_butA:	0;
	--col_butB:	0;
	--col_butC:	0;
	--col_right: 0;
}
/*===== Reset durchführen =====*/
hlpAnsicmaInput {
	margin-top: var(--ansc-hlp-input-margin-top);
	display: grid;
	grid-template-columns: var(--col_left) var(--col_main) var(--col_butA) var(--col_butB) var(--col_butC) var(--col_right);

	label:empty {
		display:none !important;
	}
}
hlpAnsicmaInput.checkbox {
	label {
		width:auto !important;
	}
}

/*===== Allgemeine Einrichtung und Größenanpassung =====*/
hlpAnsicmaInput > label,
hlpAnsicmaInput > input,
hlpAnsicmaInput > button,
hlpAnsicmaInput > select:not([size]) {
	height: var(--ansc-hlp-input-innerheight) !important;
/*	vertical-align: bottom;
	display: table-cell;
	width: calc(100% - var(--innert_button_width));
	max-width: calc(100% - var(--innert_button_width));
*/
}
hlpAnsicmaInput > label {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
hlpAnsicmaInput.show-unit > input {
	width: calc(100% - var(--innert_button_width) - 120px);
}

/*
hlpAnsicmaInput > textarea {
	vertical-align: middle;
	display: table-cell;
	width: calc(100% - var(--innert_button_width));
}
*/

.ansc-hlp-align-middle {
	/* display:block; */
	margin-left: auto;
	margin-right: auto;
	/* width: var(--ansc-hlp-input-width); */
}

.ansc-hlp-align-right {
	/* display:block; */
	margin-left: auto;
	margin-right: 0;
	/* width: var(--ansc-hlp-input-width); */
}

.ansc-hlp-input-error {
	font-weight: bold;
	text-align: center;
	color: red;
	display: table-caption;
	white-space: normal;
	line-height:normal;
	height: auto !important;
}


hlpAnsicmaInput > input,
hlpAnsicmaInput > select,
hlpAnsicmaInput > textarea {
	border-color: var(--ansc-hlp-input-border-color);
	border-width: var(--ansc-hlp-input-inner-border);
	color: var(--ansc-hlp-input-foreground-color);
	background-color: var(--ansc-hlp-input-background-color);
	padding: 0px var(--ansc-hlp-input-inner-padding);
	width:100%;
}

/*===== Einheiten (Units)	=====*/
hlpAnsicmaInput > unit {
	display:inline-block;
	white-space: nowrap;
	margin:0px 4px;
}

/* Größenanpassung bei Schaltflächen */
hlpAnsicmaInput.button-1 {
	--col_butA: var(--ansc-hlp-input-innerheight);
}
hlpAnsicmaInput.button-2 {
	--col_butA: var(--ansc-hlp-input-innerheight);
	--col_butB: var(--ansc-hlp-input-innerheight);
}

hlpAnsicmaInput.ansc-label-left > input,
hlpAnsicmaInput.ansc-label-left > select,
hlpAnsicmaInput.ansc-label-left > textarea,
hlpAnsicmaInput.ansc-label-right > input,
hlpAnsicmaInput.ansc-label-right > select,
hlpAnsicmaInput.ansc-label-right > textarea {
/*	width: calc(100% - 2 * var(--ansc-hlp-input-padding) - var(--innert_button_width));*/
}

hlpAnsicmaInput > input[type="checkbox"] {
	height: calc(var(--ansc-hlp-input-innerheight) - 2 * var(--ansc-hlp-input-padding));
	width: calc(var(--ansc-hlp-input-innerheight) - 2 * var(--ansc-hlp-input-padding));
	background-color: transparent;
}

hlpAnsicmaInput > select[size] {
	height: auto;
}

/*===== Deaktivierte Elemente =====*/
hlpAnsicmaInput.ansc-disabled {
	filter: grayscale(80%);
	opacity: 75%;
}
hlpAnsicmaInput.ansc-disabled > input,
hlpAnsicmaInput.ansc-disabled > select,
hlpAnsicmaInput.ansc-disabled > textarea {
	border-color: var(--ansc-hlp-input-border-color-disabled);
	background-color: var(--ansc-hlp-input-background-color-disabled);
}

/*===== Labelausrichtung allgemein =====*/
hlpAnsicmaInput.ansc-label-topleft > .inp-caption,
hlpAnsicmaInput.ansc-label-topright > .inp-caption,
hlpAnsicmaInput.ansc-label-bottomleft > .inp-caption,
hlpAnsicmaInput.ansc-label-bottomright > .inp-caption {
	display: table-row;
	height: initial !important;
	line-height: initial;
	width: initial;
}

hlpAnsicmaInput.ansc-label-bottomleft .inp-caption,
hlpAnsicmaInput.ansc-label-topleft .inp-caption {
	text-align:left !important;
}

hlpAnsicmaInput.ansc-label-bottomright .inp-caption,
hlpAnsicmaInput.ansc-label-topright .inp-caption {
	text-align:right !important;
}

/*
hlpAnsicmaInput.ansc-label-left .inp-caption,
hlpAnsicmaInput.ansc-label-right .inp-caption {
	padding: 0px var(--ansc-hlp-input-padding);
	padding-top: 1px;
	width: var(--ansc-hlp-input-labelwidth);
	max-width: var(--ansc-hlp-input-labelwidth);
}
*/
hlpAnsicmaInput.ansc-label-left {
	--col_left: var(--ansc-hlp-input-labelwidth);
}
hlpAnsicmaInput.ansc-label-right {
}

hlpAnsicmaInput .inp-caption.ansc-force-top,
hlpAnsicmaInput .ansc-hlp-input-button.ansc-force-top {
/*	vertical-align: top; */
}

/*===== Checkbox - Labelausrichtung =====*/

hlpAnsicmaInput.checkbox.ansc-label-right .inp-caption {
	padding-left:10px;
}

/*===== Groupbox Formatierungen	=====*/
hlpAnsicmaInput.groupbox {
	background-color: var(--ansc-hlp-input-box-color);
	margin: var(--ansc-hlp-input-innerheight) var(--ansc-hlp-input-padding) 0px var(--ansc-hlp-input-padding);
	padding: 8px 4px 4px 4px;
	border: groove 2px var(--ansc-hlp-input-border-color);
}

hlpAnsicmaInput.groupbox > autoins {
	display: table-row
}

hlpAnsicmaInput.groupbox > .inp-caption {
	background-color: var(--ansc-hlp-input-box-color);
	margin: calc(0px - var(--ansc-hlp-input-innerheight) / 1.5) 0px 0px 2px;
	float: left;
	padding: 0px calc(2 * var(--ansc-hlp-input-padding));
}
hlpAnsicmaInput.groupbox > autoins { clear:both; }

/*===== Textfelder Behandlung mit Editor =====*/
hlpAnsicmaInput.ck-edit-start,
hlpAnsicmaInput.ck-edit-start > textarea {
	display: block;
}
hlpAnsicmaInput.ck-edit-start #BtnEditor { display:none; }

/*==================================*/
.ansc-hlp-input-button {
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
	border: solid 1px gray;
	padding: 0px;
	cursor: pointer;
	margin: 0px;
	height: var(--ansc-hlp-input-innerheight);
	width: var(--ansc-hlp-input-innerheight);
}
.ansc-hlp-input-button[disabled] {
	filter: gray invert(20%);
	-webkit-filter: grayscale(100%) invert(20%);
	opacity: 0.7;
}

.ansc-symbol-clear {
	background-image: var(--ansc-img-button-clear);
}
.ansc-symbol-password {
	background-image: var(--ansc-img-button-show);
}
.ansc-symbol-pencil {
	background-image: var(--ansc-img-button-edit);
}

.ansc-hlp-input-editor textarea { display:none; }

.ansc-hlp-input-error:empty {
	display:none;
}

.ansc-hlp-input-hinttext {
	display: block;
	background-color: black;
	color: var(--ansc-hlp-input-background-color);
	border: solid 2px #2000ff;
	white-space: nowrap;
	position: absolute;
	left: 30%;
	padding: 4px;
	opacity:0;
}

/*== Groupbox, Detailbox ===*/
hlpAnsicmaInput .ansc-hlp-input-flipdown {
	border: solid 1px silver;
	box-shadow: silver 2px 2px 2px;
	color: black;
	height: var(--ansc-hlp-input-flipdown-titelheight);
	position: absolute;
	left: var(--ansc-hlp-input-padding);
	line-height: normal;
	top: calc(var(--ansc-hlp-input-innerheight) + var(--ansc-hlp-input-padding));
	background-color: var(--ansc-hlp-input-background-color);
	width: 100%;
	min-height: 150px;
	z-index: 1;
}
hlpAnsicmaInput.ansc-label-left .ansc-hlp-input-flipdown {
	width: calc(100% - var(--ansc-hlp-input-labelwidth));
	margin-left: var(--ansc-hlp-input-labelwidth);
}
hlpAnsicmaInput .ansc-hlp-input-flipdowncont {
	max-width:100%;
	height:calc(100% - var(--ansc-hlp-input-flipdown-titelheight));
	padding-top:2px;
	overflow: scroll;
}
hlpAnsicmaInput .ansc-hlp-input-flipdowntitel {
	background-color: silver;
	padding: 2px;
	font-weight: bold;
	max-width:100%;
}

/***** Toggle - Schalter *****/

hlpAnsicmaInput.toggle .switch {
  position: relative;
  display: inline-block;
  width: calc(var(--ansc-hlp-input-innerheight) * 2);
  height: var(--ansc-hlp-input-innerheight);
}
hlpAnsicmaInput.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
hlpAnsicmaInput.toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ansc-hlp-input-toggle-offcolor);
  -webkit-transition: .4s;
  transition: .4s;
}
hlpAnsicmaInput.toggle .slider:before {
  position: absolute;
  content: "";
  height: calc(var(--ansc-hlp-input-innerheight) - 8px);
  width: calc(var(--ansc-hlp-input-innerheight) - 8px);
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
hlpAnsicmaInput.toggle input:checked + .slider {
  background-color: var(--ansc-hlp-input-toggle-oncolor);

}
hlpAnsicmaInput.toggle input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

hlpAnsicmaInput.toggle input:checked + .slider::before {
  -webkit-transform: translateX(var(--ansc-hlp-input-innerheight));
  -ms-transform: translateX(var(--ansc-hlp-input-innerheight));
  transform: translateX(var(--ansc-hlp-input-innerheight));
}
hlpAnsicmaInput.toggle div.mains {
	background-color: transparent;
	border: none;
}
hlpAnsicmaInput.toggle .slider.round {
  border-radius: 34px;
}
hlpAnsicmaInput.toggle .slider.round::before {
  border-radius: 50%;
}