:root {
	/* Formulare */
	--y-field-height: calc( var(--inputs-height,2em) + var(--inputs-border-width,1px) * 2 );
	--y-inputs-font-family: var(--inputs-font-family);
	--y-inputs-font-size: var( --inputs-font-size,inherit );
	--y-inputs-font-weight: var( --inputs-font-weight,inherit );
	--y-inputs-letter-spacing: var( --inputs-letter-spacing,inherit );
	--y-inputs-text-transform: var( --inputs-text-transform,inherit );
	--y-inputs-border-radius :var(--y-border-radius-s,0px );
	--y-inputs-background: var( --inputs-background,transparent );
	--y-inputs-border-color: var( --inputs-border-color,currentColor );
	--y-inputs-text-color: var( --inputs-text-color,inherit );
	--y-inputs-box-shadow: var( --inputs-box-shadow,none );
	--y-inputs-border-width: var( --y-border-size, 1px );
	--y-inputs-padding: var(--inputs-padding,.6em);
	--y-inputs-checkbox-size: var( --inputs-checkbox-size,1.5em );
	--y-color-alert: var(--yuhura-alert);
	--y-button-primary-color: #ffffff;
	--y-button-secondary-color: #ffffff;
	/* Color Dark */
	--y-dark-page-inputs-background: var(--y-dark-page-bg );
	--y-dark-page-inputs-border-color: var( --y-dark-page-border-color, currentColor );
	--y-dark-page-inputs-text-color: var( --y-dark-page-text,inherit );
	--y-dark-page-inputs-box-shadow: none;
}



input:not([type=submit]),textarea,select {
	font-family: var( --y-inputs-font-family,inherit )!important;
	font-size: var( --y-inputs-font-size,inherit )!important;
	font-weight: var( --y-inputs-font-weight,inherit )!important;
	letter-spacing: var( --y-inputs-letter-spacing,inherit )!important;
	text-transform: var( --y-inputs-text-transform,inherit )!important;
	border-radius: var( --y-inputs-border-radius,0px )!important;
	background: var( --y-inputs-background,transparent )!important;
	border-color: var( --y-inputs-border-color,currentColor )!important;
	color: var( --y-inputs-text-color,inherit )!important;
	box-shadow: var( --y-inputs-box-shadow,none )!important;
	border-width: var( --y-inputs-border-width,1px )!important;
	border-style: solid!important;
	width: 100%!important;
	transition: all 0.2s!important;
	line-height: var(--y-field-height,2em)!important;
}
.y-dark input:not([type=submit]),
.y-dark textarea,
.y-dark select {
	background: var( --y-dark-page-inputs-background,transparent )!important;
	border-color: var( --y-dark-page-inputs-border-color,currentColor )!important;
	color: var( --y-dark-page-inputs-text-color,inherit )!important;
	box-shadow: var( --y-dark-page-inputs-box-shadow,none )!important;
	border-width: var( --y-inputs-border-width,1px )!important;
	border-style: solid!important;
}

input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select {
	min-height: var(--y-field-height,2em)!important;
	line-height: var(--y-field-height,2em)!important;
	padding: 0 var(--y-inputs-padding,.6em)!important
}

select {
	height: var(--y-field-height)!important;
}

textarea {
	min-height: var(--y-field-height);
	height: calc( var(--y-field-height,2em) * 5 );
	padding: calc( var(--y-field-height,2em)/2 + var(--y-inputs-border-width,1px) - 0.7em ) var(--y-inputs-padding,.6em);
}

input[type=checkbox],input[type=radio] {
	-webkit-appearance: none;
	appearance: none;
	vertical-align: top;
	flex-shrink: 0;
	text-align: center;
	margin-right: .5em;
	letter-spacing: 0;
	text-transform: none;
	line-height: var( --y-inputs-checkbox-size,1.5em );
	height: var( --y-inputs-checkbox-size,1.5em );
	width: var( --y-inputs-checkbox-size,1.5em );
	padding: 0;
	box-sizing: content-box
}

input[type=checkbox]:before {
	visibility: hidden;
	content: '\f00c';
	font-family: fontawesome;
	font-weight: 900;
	vertical-align: top
}

input[type=radio] {
	border-radius: 50%!important
}

input[type=radio]:before {
	visibility: hidden;
	content: '';
	display: block;
	height: 36%;
	width: 36%;
	margin: 32%;
	border-radius: inherit;
	background: currentColor
}

input:checked::before {
	visibility: visible
}

input[type=range] {
	box-shadow: none!important
}
html button[disabled], 
html input[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}
button.y-btn,
a[type=button].y-btn {
	font-family: var( --y-inputs-font-family,inherit )!important;
	font-size: var( --y-inputs-font-size,inherit )!important;
	font-weight: var( --y-inputs-font-weight,inherit )!important;
	letter-spacing: var( --y-inputs-letter-spacing,inherit )!important;
	text-transform: var( --y-inputs-text-transform,inherit )!important;
	border-radius: var( --y-inputs-border-radius,0px )!important;
	line-height: var(--y-field-height,2em)!important;
	padding-left:  2em!important;
	padding-right:  2em!important;
	white-space: nowrap!important;
	transition: background 0.3s!important;
	border: solid var(--inputs-border-width,1px) transparent!important;
}
button.y-btn.y-btn-primary,
a[type=button].y-btn.y-btn-primary {
	background: var(--y-light-page-primary)!important;
	color: var(--y-button-primary-color)!important;
}
button:not([disabled]).y-btn.y-btn-primary:hover,
a[type=button].y-btn.y-btn-primary:hover {
	background: color-mix(in srgb, var(--y-light-page-primary) 80%, black 20%)!important;
}
.y-dark button.y-btn.y-btn-primary,
.y-dark a[type=button].y-btn.y-btn-primary {
	background: var(--y-dark-page-primary)!important;
}
.y-dark button:not([disabled]).y-btn.y-btn-primary:hover,
.y-dark a[type=button].y-btn.y-btn-primary:hover {
	background: color-mix(in srgb, var(--y-light-page-primary) 80%, white 20%)!important;
}

button.y-btn.y-btn-secondary,
a[type=button].y-btn.y-btn-secondary {
	background: var(--y-light-page-secondary)!important;
	color: var(--y-button-secondary-color)!important;
}
.y-dark button.y-btn.y-btn-primary,
.y-dark a[type=button].y-btn.y-btn-primary {
	background: var(--y-dark-page-secondary)!important;
}
button.y-btn-alert,
a[type=button].y-btn-alert {
	background: var(--y-color-alert)!important;
	color: #ffffff!important;
}
button.y-btn-alert:hover,
a[type=button].y-btn-alert:hover {
	background: color-mix(in srgb, var(--y-color-alert) 80%, black 20%)!important;
}

/* ---------------------- */
/* Form Bar */
/* ---------------------- */

.y-form-bar {
  display: flex;
  width: 100%;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  align-items: flex-start;
}
.y-form-bar-field {
	width: 100%;
	min-width: 0;
}
@media (max-width: 1023px) {
  .y-form-bar {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1rem;
	align-items: stretch;
  }

}