input, select {
	vertical-align: middle;
}


form .checkbox {
	margin: 0;
	padding: 0;
}

form .text,
form .select {
	border: 1px solid #70ba1f;
	padding: 2px;
	background: #FFFFFF;
	margin-bottom:2px;
}

.submit,.button,button {
	color:#FFFFFF;
	cursor:pointer;
	border:0px;
}

input, select, textarea, .inputbox, .selectbox, .inputbox-login, .button {
	font-family: Arial,Helvetica,sans-serif;
	font-size:100%;
}

textarea {
    resize: vertical;
}

.inputbox-login {
	background:#f8f8f8 none repeat scroll 0 0;
	border: 1px solid #DDD;
	font-size: 100%;
	font-weight: bold;
	padding: 3px 5px;
	width: 150px;
}

.inputbox, .inputboxTime, .inputboxSelect {
	background:#fff none repeat scroll 0 0;
	border: 1px solid #DDD;
	font-size: 100%;
	font-weight: bold;
	padding: 3px 3px;
	width: 300px;
    border-radius: 6px;
    box-sizing: content-box;
}

.selectbox {
	background:#fff none repeat scroll 0 0;
	border: 1px solid #DDD;
	font-size: 100%;
	font-weight: bold;
	padding: 3px 3px;
	width: 200px;
    border-radius: 6px;
    box-sizing: content-box;
}

.inputbox select  {
	width: 300px;
}

.unit {
	width: 100px;
}

.inputboxTime {
	width: 56px;
}

/*.inputboxSelect {*/
/*	width: 300px;*/
/*}*/

.inputbox:hover, .inputbox-login:hover, .inputboxTime:hover, .inputboxTime:hover, .inputboxSelect:hover, .inputboxSelect:hover  {
	border: 1px solid #70Ba1f;
}

/* Eigener Fokus-Stil statt des nativen Browser-Outlines (:focus-visible im
   User-Agent-Stylesheet). Der native Ring wird ausserhalb der Border-Box
   gezeichnet und an bündigen Dialogkanten (.ui-dialog-content { overflow:auto })
   abgeschnitten. Ein inset-Shadow bleibt innerhalb der Border-Box -> wird nie
   geclippt und sieht in Chrome wie Firefox identisch aus. */
.inputbox:focus, .inputbox-login:focus, .inputboxTime:focus, .inputboxSelect:focus,
.inputbox:focus-visible, .inputbox-login:focus-visible, .inputboxTime:focus-visible, .inputboxSelect:focus-visible {
	outline: none;
	border-color: #55ab26;
	box-shadow: inset 0 0 0 1px #55ab26;
}

/* --------------------------------------------------------------------------
   ECON-2338: Rounded options list on the native <select>.

   The open options list of a native <select> is normally drawn by the
   browser/OS and cannot be styled with classic CSS (border-radius on the
   <select> only rounds the closed box). The new "Customizable Select"
   (appearance: base-select + ::picker(select)) makes the popup styleable.

   Progressive enhancement: browsers without support (Firefox, Safari, older
   Chromium < 135) ignore the @supports block and keep the native select ->
   no risk, no crash. No extra markup, no JS.

   base-select also re-renders the closed button, so the rules below restore the
   previous native look (compact, single-line, hard cut for long values, native
   chevron, flat selects stay flat).
   -------------------------------------------------------------------------- */
@supports (appearance: base-select) {
	/* Opt-in for all simple selects (classes are inconsistent across the app:
	   inputbox / inputboxSelect / selectbox / ui-corner-all / plain <select> ...).
	   Multiple selects (multiple / size>1) stay a listbox and are left untouched.
	   The opt-in must be set on the select AND on its picker. */
	select:not([multiple]),
	select:not([multiple])::picker(select) {
		appearance: base-select;
	}

	/* base-select gives the button its own, taller default box. Make it compact
	   like the native select again. clip-path hard-cuts an overlong value at the
	   box edge (a <select> ignores overflow); position:relative anchors the
	   pinned arrow. No padding-right: the arrow cover (::after) is absolutely
	   positioned, so it needs no reserved space - adding padding would widen
	   content-box selects with a fixed width and break their layout. */
	select:not([multiple]) {
		min-height: 1lh;                /* one line tall: keeps an empty select from collapsing */
		line-height: normal;
		white-space: nowrap;            /* single-line (inherits to the button text) */
		position: relative;             /* anchor for the pinned arrow */
		clip-path: inset(0 round 6px);  /* hard-cut long values (select ignores overflow) */
	}

	/* base-select applies a default radius to the button. Reset it to 0 with low
	   specificity (type selector, 0-0-1): classes that intentionally round
	   (.inputbox/.inputboxSelect/.inputboxTime 6px, .borderinput 10px,
	   .ui-corner-all ...) have at least 0-1-0 and still win. Flat selects
	   (border-bottom only, e.g. .flatinput) therefore stay square automatically -
	   without touching every single class. Affects only the button, not
	   ::picker(select). */
	select {
		border-radius: 0;
	}

	/* Match the clip-path radius to each box (default above = 6px). */
	select.flatinput:not([multiple]) {
		clip-path: inset(0);
	}
	select.borderinput:not([multiple]) {
		clip-path: inset(0 round 10px);
	}

	/* base-select's default arrow (::picker-icon) does not stretch to full height,
	   so it can't reliably cover the text. Hide it and draw arrow + cover via a
	   full-height ::after instead. */
	select:not([multiple])::picker-icon {
		display: none;
	}

	/* Pinned cover on the right edge: the box background color hard-cuts the text
	   behind it, with the native chevron centered on top (background-position is
	   reliable here, unlike object-position on the picker-icon). Right corners are
	   rounded to match the select; pointer-events stay with the select. */
	select:not([multiple])::after {
		content: "";
		position: absolute;
		/* Inset by 1px so the focus ring (box-shadow: inset 0 0 0 1px) stays
		   visible around the cover instead of being painted over. */
		top: 1px;
		right: 1px;
		bottom: 1px;
		width: 24px;
		background-color: var(--white-color);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23646464' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		border-radius: 0 5px 5px 0;  /* select radius (6px) minus the 1px inset */
		pointer-events: none;
	}
	/* Match the cover color/corner radius to the box (flatinput flat #f9f9f9,
	   borderinput 10px - 1px inset). */
	select.flatinput:not([multiple])::after {
		background-color: #f9f9f9;
		border-radius: 0;
	}
	select.borderinput:not([multiple])::after {
		border-radius: 0 9px 9px 0;
	}

	/* The options list like the closed box: white, 1px #ddd, rounded. */
	select:not([multiple])::picker(select) {
		border: 1px solid var(--border-color);
		border-radius: 6px;
		background: var(--white-color);
		padding: 4px;
		box-shadow: var(--shadow-ui);
	}

	/* Individual options + hover/selection in the CI secondary color. */
	select:not([multiple]) option {
		padding: 4px 8px;
		border-radius: 4px;
	}
	select:not([multiple]) option:hover,
	select:not([multiple]) option:checked {
		background-color: var(--secondary-color);
		color: var(--text-color);
	}

	/* Hide the default selection checkmark - we indicate selection via the
	   background (like the previous native rendering). */
	select:not([multiple]) option::checkmark {
		display: none;
	}
}

.button {
	cursor:pointer;
	padding: 2px 3px;
}

.button-170{
	width:172px;
	height:30px;
	background-image:url('/resources/images/icons/button-170.png');
}

.buttonWidth{
	width: 160px;
	height: 30px;
}

form .text-30 {
	width: 30px;
	text-align: center;
}

form .text-60 {
	width: 60px;
}

form .text-90 {
	width: 90px;
}

form .text-120 {
	width: 120px;
}

form .text-166 {
	width: 166px;
}

form .text-100 {
	width: 80px;
}

form .text-150 {
	width: 150px;
}

form .text-180 {
	width: 180px;
}

form .text-210 {
	width: 210px;
}
form .select-210 {
	width: 216px;
}

form .text-240 {
	width: 240px;
}

form .text-270 {
	width: 270px;
}

form .text-300 {
	width: 300px;
}

form .text-fullsize {
	width: 95%;
}

form .textarea-60{
	height:60px;
}

form .textarea-90{
	height:90px;
}

form .textarea-120{
	height:120px;
}

form .textarea-150{
	height:150px;
}

form .textarea-180{
	height:180px;
}

form .textarea-210{
	height:210px;
}

form .textarea-240{
	height:240px;
}

form .textarea-270{
	height:270px;
}

form .textarea-300{
	height:300px;
	width: 99%;
}

form .textarea-360{
	height:360px;
}

.disabled {
	border-color: #B0B0B0;
	color: #B0B0B0;
}

.disabled option {
	color: #000000;
}

.disabled option.selected {
	color: #B0B0B0 !important;
}

.error{
	color: #ff0000;
}

.ajax-loader{
	/* jQuery UI Bilder befinden sich im CSS-Ordner */
    background: url("south-street/images/ui-anim_basic_16x16.gif") no-repeat 10px center transparent;
    padding: 10px 10px 10px 35px;
    border: 1px solid #000000;
    position: relative;
    top: -3px;
    vertical-align: middle;
}

.flatinput {
	border:none;
	border-bottom: 1px solid #70BA1F;
	font-size: 100%;
	font-weight: bold;
	padding: 3px 3px;
	width: 200px;
	background: none repeat scroll 0 0 #f9f9f9;
}

select.borderinput, input[type="text"].borderinput, input[type="password"].borderinput {
	border: 1px solid #cccccc;
	border-radius: 10px;
	background: none repeat scroll 0 0 white;
	color: var(--mono-color);
	font-family: "Calibri","Helvetica Neue Light","Helvetica","Calibri-Light","Calibri Light",sans-serif;
	font-size: 1.2em;
	font-weight: 100;
	padding: 12px 16px;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
}

select.borderinput:focus-visible, input[type="text"].borderinput:focus-visible, input[type="password"].borderinput:focus-visible {
	border-color: #55ab26;
	outline: none;
	box-shadow: 0 1px 15px rgba(85, 171, 38, 0.30);
}

input[type="checkbox"].borderinput {
	display:none;
}

input[type="checkbox"].borderinput:checked + label:before {
	/* color: #666; */
	color: #aaaaaa;
	content: "✓";
}

input[type="checkbox"].borderinput + label {
	color: #646464;
	font-size: 1.2em;
	font-weight: normal;
	line-height: 20px;
	vertical-align: middle;
}

input[type="checkbox"].borderinput + label:before {
	background: none repeat scroll 0 0 #fff;
	border: 1px solid #aaaaaa;
	border-radius: 3px;
	content: " ";
	display: inline-block;
	font-size: 16px;
	font-weight: 100;
	height: 18px;
	line-height: 18px;
	margin: 0 0.25em 0 0;
	padding: 0;
	text-align: center;
	vertical-align: bottom;
	width: 18px;
	transform: translateY(-0.1em);
}

select.flatinput {
	padding-bottom: 2px;
	padding-top: 2px;
}

.flatinput.small {
	width : 50px;
}

.suggest {
	position: relative;
	z-index: 9999;
}

.suggest ul {
	margin: 0;
	padding: 0;
	position: absolute;
	min-width: 206px;
	overflow: hidden;
	border: 1px solid;
	background-color: #fff;
}

.suggest ul li {
	display: block;
	margin: 0;
	padding: 1px;
	cursor:pointer;
}

.suggest ul li:hover {
	background-color: #eee;
}

.suggest_input {
	width: 204px;
}

.financial_year_form {
	font-weight: bold;
}

.financial_year_form td {
	vertical-align: middle;
}

.financial_year_form input {
	padding: 3px;
	width: 20px;
	height: 15px;
	text-align: center;
}

.shift_table input {
	height: 15px;
	width: 20px;
	text-align: center;
	padding: 3px;
}

.shift_table .field_color {
	position: relative;
}

.timeframe_table input {
	height: 15px;
	width: 20px;
	text-align: center;
	padding: 3px;
}

.timeframe_table .field_color {
	position: relative;
}

.is_color_select {
	cursor: pointer;
}

.color_overlay {
	position: absolute;
	top: 0px;
	width: 74px;
	border: 1px solid #84938E;
	z-index: 100;
}

.color_overlay .color_menufield {
	padding: 0px;
	border: 1px solid transparent;
	width: 35px;
	height: 35px;
	float: left;
	cursor: pointer;
}

.color_overlay .color_menufield:hover {
	border: 1px solid #ffffff;
}

.formgroup {
	margin-bottom: 8px;
}

.dialogMeasuring {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}