html{
}
body{

}
body.hasOverlay{
	overflow:hidden;
}

.UIHelp{
	cursor:help;
}

.UIPwdMeter {
    background: #EEE;
    width: 100%;
    height: 5px;
    margin:5px 0;
    transition: background-color 0.3s ease-in-out;
}

.UIPwdMeter.darkred {
    background: darkred;
}

.UIPwdMeter.red {
    background: red;
}

.UIPwdMeter.orange {
    background: orange;
}
.UIPwdMeter.yellow {
    background: yellow;
}
.UIPwdMeter.green {
    background: green;
}

#UIBlur{
	display:none;
	transition: filter 0.3s ease;
}/*
    button {
        width: 30px;
        height: 30px;
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#FDFDFD), to(#E8E8E8));
        border: 1px solid #CCC;
        aspect-ratio: 1 / 1;
        padding: .12em;
        margin: 0 .25em;
        -webkit-box-shadow: 0px 0px 2px 0px rgba(255,255,255,1);
        -moz-box-shadow: 0px 0px 2px 0px rgba(255,255,255,1);
        box-shadow: 0px 0px 2px 0px rgba(255,255,255,1);
        text-align: center;
        border-radius: 3px;
    }

    button:hover {
        -webkit-box-shadow: inset 0px 0px 5px 1px rgba(255,255,255,1);
        -moz-box-shadow: inset 0px 0px 5px 1px rgba(255,255,255,1);
        box-shadow: inset 0px 0px 5px 1px rgba(255,255,255,1);
        background: #DEFa9C;
    }
*/
body.hasOverlay #UIBlur{
	position: fixed;
	display:block;
	top: 0;
	right: 0;
	bottom:0;
	left:0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index:1001;
}
aside#UISidebar{
	position:fixed;
	width:40%;
	right:-100%;
	top:0;
	height:100%;
	overflow:auto;
	transition:width 0.5s linear,
	           right 0.5s linear;
	background:#FFF;
	border-left:1px solid #CCC;
	z-index:1001;
	-webkit-box-shadow: 0 6px 10px 0 rgb(0 0 0 / 3%), 0 1px 18px rgb(0 0 0 / 7%), 0 5px 26px 0 rgb(67 94 131 / 15%);
	box-shadow: 0 6px 10px 0 rgb(0 0 0 / 3%), 0 1px 18px rgb(0 0 0 / 7%), 0 5px 26px 0 rgb(67 94 131 / 15%);
}
	aside#UISidebar.active{
		position:fixed;
		right:0;
		width:50%;
		min-width:500px;
	}

	aside#UISidebar.active.full{
		width:100%;
	}

	aside#UISidebar header{
		position:sticky;
		left:0;
		right:0;
		top:0;
		z-index:100;
	}
.UISidebarResizer{
    border-right: 1px solid #CCC;
    width: 15px;
    height: 100%;
    margin-top:-1.5em;
    margin-bottom:-1.5em;
    text-shadow: 1px 1px 1px #fff;
    text-align: center;
    line-height: 44px;
    font-size: 20px;
    z-index: 1000;
    position:sticky;
	}
	#UISidebar.active  .UISidebarResizer:before{
		content:'«';
	}
	#UISidebar.full  .UISidebarResizer:before{
		content:'»';
	}
	#UISidebar.active  .UISidebarResizer:hover{
		border:1px solid #CCC;
		background:#003b65;
		color:#FFF;
		text-shadow:none;
		cursor:pointer;
	}


ol#UIMessagesConainer{
		position:fixed;
		right:1vh;
		bottom:1vh;
		z-index:100001;
		font-size:14px;
	}
	ol#UIMessagesConainer li{
		min-width:500px;
		list-style:none;
		padding:0;
		margin:1em 0;
		padding:20px 5px;
		border-left:3px solid #CCC;
		background:#EEE;
		-webkit-box-shadow: 1px 0px 4px 3px rgba(255,255,255,0.3);
		-moz-box-shadow: 1px 0px 4px 3px rgba(255,255,255,0.3);
		box-shadow: 1px 0px 4px 3px rgba(255,255,255,0.3);
	}
	ol#UIMessagesConainer li:before{
		content:'\f05a';
		font-family:'Fontawesome';
		font-size:16px;
		padding-right:5px;
	}
		ol#UIMessagesConainer li:hover{
			-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
			-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
			box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
		}

		ol#UIMessagesConainer li.info{
			border-left:3px solid rgba(60, 132, 197);
			background:#d8e6f3;
		}
		ol#UIMessagesConainer li.info:before{
			color: rgba(60, 132, 197);
		}
		ol#UIMessagesConainer li.warning{
			border-left:3px solid rgb(255, 153, 0);
			background:#ffebcc;
		}
		ol#UIMessagesConainer li.warning:before{
			content:'\f071';
			color:rgb(255, 153, 0);
		}
		ol#UIMessagesConainer li.error{
			border-left:3px solid rgb(153, 0, 0);
			background:#ebcccc;
		}
		ol#UIMessagesConainer li.error:before{
			content:'\f06a';
			color:rgb(153, 0, 0);
		}
		ol#UIMessagesConainer li.success{
			border-left:3px solid rgb(0, 153, 0);
			background:#ccebcc;
		}
		ol#UIMessagesConainer li.success:before{
			content:'\f058';
			color:rgb(0, 153, 0);
		}
		ol#UIMessagesConainer li.failed{
			border-left:3px solid rgb(153, 0, 0);
			background:#ebcccc;
		}
		ol#UIMessagesConainer li.failed:before{
			content:'\f057';
			color:rgb(153, 0, 0);
		}
		ol#UIMessagesConainer button.UIMessageClose{
		float:right;
		color:#666;
		background:#fff;
		border:1px solid #CCC;
		background:rgba(255,255,255,.9);
	}

	ol#UIMessagesConainer.hide > ol#UIMessagesConainer button.UIMessageClose{
		display:none;
	}
.UIBooleanSwitch.js {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 20px;
	overflow: hidden;
}
.UIBooleanSwitch.js input{
	display:none;
}
.UIBooleanSwitch.js .knob {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    background-color: #CCC;
    display: block;
    transition: all 0.3s;
    border-radius: 3.4rem;
    cursor: pointer;
}
.UIBooleanSwitch.js .knob:hover{
	background:#A6CD4f;
}
.UIBooleanSwitch.js .knob:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    border-radius: 100%;
    display: block;
    left: 2px;
    bottom: 2px;
    background-color: #FFF;
    transition: all 0.3s;
}

.UIBooleanSwitch.js input:checked + .knob {
    background-color: #629a1e;
}
.UIBooleanSwitch.js input:checked + .knob:hover {
    background-color: #888;
}

.UIBooleanSwitch.js input:checked + .knob:before  {
    transform: translate(20px, 0);
}
.UIBooleanSwitchLabel{
	line-height:20px;
    vertical-align: super;
    padding-left: 0.5em;
}
body.UILoadingOverlay{
	overflow:hidden;
	visibility:hidden;
}
#UILoadingOverlay{
	z-index:10000;
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	right:0;
	visibility:hidden;
	opacity:0;
	background:#000;
	color:#FFF;
	text-align:center;
	vertical-align:middle;
	padding:150px 0;
	transition: opacity 0.2s ease;
	transition-delay:.2s;
}
#UILoadingOverlay.active{
	visibility:visible;
	opacity:.9;
}
#UILoadingOverlay .container {
	width: 117px;
	margin: 0 auto;
}
.UILoadingOverlayCircle1{height: 117px; width: 117px; background: rgb(18,28,37);          }
.UILoadingOverlayCircle2{height:  97px; width:  97px; background: rgb(25,50,68);          }
.UILoadingOverlayCircle3{height:  78px; width:  78px; background: rgb(29,100,138);        }
.UILoadingOverlayCircle4{height:  58px; width:  58px; background: rgb(23,125,176);        }
.UILoadingOverlayCircle5{height:  39px; width:  39px; background: rgb(87,168,223);        }
.UILoadingOverlayCircle6{height:  19px; width:  19px; background: rgb(128,185,229);       }
.UILoadingOverlayCircle7{height:  10px; width:  10px; background: rgba(163,202,236,0.98); }
.UILoadingOverlayCircle8{height:  5px;  width:   5px; background: rgb(195,219,242);       }

.UILoadingOverlayCircle1,.UILoadingOverlayCircle2,.UILoadingOverlayCircle3,.UILoadingOverlayCircle4,
.UILoadingOverlayCircle5,.UILoadingOverlayCircle6,.UILoadingOverlayCircle7,.UILoadingOverlayCircle8 {
	border-bottom: none;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.46);
		-o-box-shadow: 1px 1px 1px rgba(0,0,0,0.46);
		-ms-box-shadow: 1px 1px 1px rgba(0,0,0,0.46);
		-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.46);
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.46);
	animation-name: cssload-spin;
		-o-animation-name: cssload-spin;
		-ms-animation-name: cssload-spin;
		-webkit-animation-name: cssload-spin;
		-moz-animation-name: cssload-spin;
	animation-duration: 3800ms;
		-o-animation-duration: 3800ms;
		-ms-animation-duration: 3800ms;
		-webkit-animation-duration: 3800ms;
		-moz-animation-duration: 3800ms;
	animation-iteration-count: infinite;
		-o-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
	animation-timing-function: linear;
		-o-animation-timing-function: linear;
		-ms-animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
		-moz-animation-timing-function: linear;
}



@keyframes cssload-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@-o-keyframes cssload-spin {
	from {
		-o-transform: rotate(0deg);
	}
	to {
		-o-transform: rotate(360deg);
	}
}

@-ms-keyframes cssload-spin {
	from {
		-ms-transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
	}
}

@-webkit-keyframes cssload-spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes cssload-spin {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}

.UILoadingOverlayDots{
  position: relative;
  right: 0px;
  bottom: 0px;
}

.UILoadingOverlayDot {
  width: 3px;
  height: 3px;
  background: #FFF;
  display: inline-block;
  border-radius: 50%;
  right: 0px;
  bottom: 0px;
  margin: 0px 2px;
  position: relative;
  animation: loadingDotJump 1s infinite;
}

.UILoadingOverlayDot.dot-1 {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}

.UILoadingOverlayDot.dot-2 {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

.UILoadingOverlayDot.dot-3 {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}

@keyframes loadingDotJump {
   0%   {bottom: 0px;}
   20%  {bottom: 5px;}
   40%  {bottom: 0px;}
}
ui-sheet{
	font-size:14px;
}

.UISidebarUpdateButton{
}
ui-sheet h2{
	background:#DDD;
	text-align:left;
	font-size:16px;
	border-bottom:1px solid #CCC;
	margin: 0;
	height:50px;
	line-height: 50px;
	padding: 0 10px 0 20px;
  position: sticky;
  z-index:3;
	left:0;
	right:0;
	top:0;
}
	ui-sheet header button,
	ui-sheet header .btn{
		display:inline-block;
		align-items:center;
		width:32px !important;
		height:32px !important;
		text-align:center;
	}
	ui-sheet header button[name="update"]{
		width:120px !important;
		align-items:center;
		padding-left:10px;
	}
	ui-sheet header button[name="update"] i{
		margin-right:5px;
		font-size:18px
	}
	ui-sheet header button[name="update"]:hover{
		box-shadow:none !important;
		-webkit-box-shadow:none !important;
	}
	ui-sheet header button i,
	ui-sheet header .btn i{
		padding-right:0px;
	}
ui-sheet dl{
		width:100%;
		display:flex;
		flex-wrap:wrap;
	}
	ui-sheet  dl > dt,
	ui-sheet  dl dd{
		margin:0;
		padding:0;
		padding:0 .5em;
		margin-bottom:.5em;
	}
	ui-sheet  dl > dt > p,
	ui-sheet  dl > dd > p{
		margin:0;
		padding:.5em .5em .5em 0;
	}
	ui-sheet  dl > dt.full,
	ui-sheet  dl > dd.full{
		width:100%;
		padding:0;
		flex:1 1 100%;
	}
	ui-sheet dd.full h4{
		padding:.5em;background:#F4F4F4;text-align:center;margin:0
	}
	ui-sheet  dl > dt.full.headline{
		background:#EEE;
		text-align:center;
		padding:.5em;
		font-weight:bold;
	}
	ui-sheet  dl > dt:not(.full){
		width:30%;
		background:#FFF;
		line-height:35px;
	}
	ui-sheet  dl > dd:not(.full){
		width:70%;
		padding-right:0;
	}
	ui-sheet  dl > dt.hr{
		margin:0 0 5px 0 !important;
		background:#DDD;
		width:100% !important;
		height:5px;
	}
	ui-sheet input,
	ui-sheet select,
	ui-sheet textarea{
		width:100%;
		border:0;
		outline:0;
		padding:7px;
		background:#EEE;
	}
	ui-sheet input[type="text"]:focus,
	ui-sheet input[type="number"]:focus,
	ui-sheet input[type="password"]:focus,
	ui-sheet textarea:focus,
	ui-sheet textarea:hover{
		border:0;
		padding:7px;
		outline:0;
		background:#dbe6f8;
	}

	ui-sheet table input:hover,
	ui-sheet table textarea:hover{
		background:#EEE;
	}

	ui-sheet table input:focus,
	ui-sheet table textarea:focus{
		background:#FFF;
	}


	ui-sheet input[type="checkbox"],
	ui-sheet input[type="radio"]{
		width:auto !important;
	}

	ui-sheet input[type="file"]{
		padding:5px .4em;
	}
	ui-sheet input[type="button"],
	ui-sheet input[type="submit"]{
		border:0;
	}
	ui-sheet button{
		height:35px;
		width:35px;
	}

	ui-sheet button[name="create"],
	ui-sheet button[name="update"]{
		width:240px;
		background:#629a1e;
		color:#FFF;
		border:0;
		transition:background .2s linear;
	}
	ui-sheet button[name="create"]:hover,
	ui-sheet button[name="update"]:hover{
		background:#060;
	}
	ui-sheet button[name="delete"]{
		width:140px;
		background:#900;
		color:#FFF;
		border:0;
		transition:background .2s linear;
	}
	ui-sheet button[name="delete"]:hover{
		background:#600;
	}

	ui-sheet input:required,
	ui-sheet select:required { border: 1px solid #b9cef1; background: #dbe6f8; }
	ui-sheet input:invalid,
	ui-sheet select:invalid  { border: 1px solid hsl(5,30%,70%); background: hsl(5,30%,90%); }

.ui-loading-circle-1{height: 117px; width: 117px; background: rgb(18,28,37);          }
.ui-loading-circle-2{height:  97px; width:  97px; background: rgb(25,50,68);          }
.ui-loading-circle-3{height:  78px; width:  78px; background: rgb(29,100,138);        }
.ui-loading-circle-4{height:  58px; width:  58px; background: rgb(23,125,176);        }
.ui-loading-circle-5{height:  39px; width:  39px; background: rgb(87,168,223);        }
.ui-loading-circle-6{height:  19px; width:  19px; background: rgb(128,185,229);       }
.ui-loading-circle-7{height:  10px; width:  10px; background: rgba(163,202,236,0.98); }
.ui-loading-circle-8{height:  5px;  width:   5px; background: rgb(195,219,242);       }

.ui-loading-circle-1,.ui-loading-circle-2,.ui-loading-circle-3,.ui-loading-circle-4,
.ui-loading-circle-5,.ui-loading-circle-6,.ui-loading-circle-7,.ui-loading-circle-8 {
	border-bottom: none;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.46);
		-o-box-shadow: 1px 1px 1px rgba(0,0,0,0.46);
		-ms-box-shadow: 1px 1px 1px rgba(0,0,0,0.46);
		-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.46);
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.46);
	animation-name: cssload-spin;
		-o-animation-name: cssload-spin;
		-ms-animation-name: cssload-spin;
		-webkit-animation-name: cssload-spin;
		-moz-animation-name: cssload-spin;
	animation-duration: 3800ms;
		-o-animation-duration: 3800ms;
		-ms-animation-duration: 3800ms;
		-webkit-animation-duration: 3800ms;
		-moz-animation-duration: 3800ms;
	animation-iteration-count: infinite;
		-o-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
	animation-timing-function: linear;
		-o-animation-timing-function: linear;
		-ms-animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
		-moz-animation-timing-function: linear;
}



@keyframes cssload-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@-o-keyframes cssload-spin {
	from {
		-o-transform: rotate(0deg);
	}
	to {
		-o-transform: rotate(360deg);
	}
}

@-ms-keyframes cssload-spin {
	from {
		-ms-transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
	}
}

@-webkit-keyframes cssload-spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes cssload-spin {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}

.ui-loading-dots{
  position: relative;
  right: 0px;
  bottom: 0px;
}

.ui-loading-dot {
  width: 3px;
  height: 3px;
  background: #FFF;
  display: inline-block;
  border-radius: 50%;
  right: 0px;
  bottom: 0px;
  margin: 0px 2px;
  position: relative;
  animation: loadingDotJump 1s infinite;
}

.ui-loading-dot.dot-1 {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}

.ui-loading-dot.dot-2 {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

.ui-loading-dot.dot-3 {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}

@keyframes loadingDotJump {
   0%   {bottom: 0px;}
   20%  {bottom: 5px;}
   40%  {bottom: 0px;}
}

table.table-editable{
					height:100%;
				}
					table.table-editable tr[data-editable-id]{
					}
						table.table-editable tr[data-editable-id] td[data-editable-field],
						table.table-editable tr[data-editable-id] span[data-editable-field]{
							position:relative;
							cursor:pointer;
							/*
  						user-select: none;
  						-moz-user-select: none;
  						-webkit-user-select: none;
  						-ms-user-select: none;
  						*/
						}
						table.table-editable tr[data-editable-id] td[data-editable-td]:hover{
  						border:3px dotted #CCC;

						}
						table.table-editable tr[data-editable-id] td.data-editable-td:after{
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							width: 0;
							height: 0;
							display: block;
							border-right: 10px solid transparent;
							border-bottom: 10px solid transparent;
							border-left: 10px solid #EEE;
						}
						table.table-editable tr[data-editable-id].checked td[data-editable-field]:after,
						table.table-editable tr[data-editable-id]:hover td[data-editable-field]:after{
							border-left: 10px solid #CCC;
						}
						table.table-editable tr[data-editable-id] td[data-editable-field]:hover:after{
							border-left: 10px solid #003b65;
						}
						table.table-editable tr[data-editable-id] td[data-editable-field].active{
							border:1px solid #900;
						}
							table.table-editable tr[data-editable-id] td[data-editable-field] div.editable-form,
							table.table-editable tr[data-editable-id] td span[data-editable-field] div.editable-form{
								position:absolute;
								left:0;
								top:0;
								bottom:0;
								right:0;
								width:100%;
								box-shadow: 0px 0px 5px #CCC;
								z-index:999;
								display: flex;
								align-items: center;
								background: #FFF;
							}
							table.table-editable tr[data-editable-id] td span[data-editable-field] div.editable-form{
								position:relative;
							}
							table.table-editable tr[data-editable-id] td span[data-editable-field] div.editable-form{
								display:inline-block;
								background:transparent;
							}
							table.table-editable tr[data-editable-id] td[data-editable-field] div.editable-form input,
							table.table-editable tr[data-editable-id] td[data-editable-field] div.editable-form textarea,
							table.table-editable tr[data-editable-id] td[data-editable-field] div.editable-form select{
								width:100%;
								height: 100%;
							}
							table.table-editable tr[data-editable-id] span[data-editable-field] div.editable-form input,
							table.table-editable tr[data-editable-id] span[data-editable-field] div.editable-form textarea,
							table.table-editable tr[data-editable-id] span[data-editable-field] div.editable-form select{
								background:transparent;
								padding:0;
							}
							table.table-editable tr[data-editable-id] td[data-editable-field] div.editable-form.append{
								position:relative;
							}
							table.table-editable tr[data-editable-id] td[data-editable-field] ul{
								margin:0;
								padding:0;
							}
							table.table-editable tr[data-editable-id] td[data-editable-field] ul li{
								list-style:none;
								display:inline;
								margin:0;
								padding:0;
							}

.table .highlight-th {
	background-color: lightblue !important;
}
.table .highlight-td {
	background-color: lightcoral !important;
}

.table .highlight-cell td:hover{
	background-color: lightgreen !important;
}
.table td .table-editable-value {
	padding:.15em;
	display: inline;
	padding-right:50px;
	outline:1px transparent;
}
.table td .editable-hover{
	outline: 1px dotted #4da6ff;
	background-color: #e6f2ff;
	font-style:italic;
	padding-right:.15em;
}

.UIAccordion dt.headline{
	cursor:pointer;
	background:#D3D3D5;
	color:#333;
}

.UIAccordion dt.headline.active{
	background:#003b65;
	font-weight:normal;
	color:#EEE;
}

.UIButtonSwitch {
 position: relative;
 cursor: pointer;
}

.UIButtonSwitch > ul {
 list-style: none;
 display:none;
 margin: 0;
 padding: 0 !important;
 position: absolute;
 top: calc(100% - 1px);
 left: -1px;
 word-wrap:nowrap;
 border: 1px solid #ccc;
 border-top:0;
 background-color: #EDEDED;
 z-index: 10;
 width:35px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 6px 0px rgba(153,153,153,1);
-moz-box-shadow: 0px 0px 6px 0px rgba(153,153,153,1);
box-shadow: 0px 0px 6px 0px rgba(153,153,153,1);
}

.UIButtonSwitch ul li {
 padding: 5px 10px !important;
 text-align:center;
 cursor: pointer;
 list-style:none;
 margin:0;
}
.UIButtonSwitch ul li:not(last-child){
 border-bottom:2px solid #FFF;
}
.UIButtonSwitch:hover{
	background:#EDEDED;
	border:1px solid #CCC;
	border-bottom:none;
-webkit-box-shadow: 0px 0px 6px 0px rgba(153,153,153,1);
-moz-box-shadow: 0px 0px 6px 0px rgba(153,153,153,1);
box-shadow: 0px 0px 6px 0px rgba(153,153,153,1);
}
.UIButtonSwitch ul li:hover{
	background:#DEFa9C;
}
.UIButtonSwitch:hover ul {
 display: block;
}
.uiModalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100001;
}

/* Container für den Modal-Inhalt */
.uiModalContainer {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 640px;
    max-height: 400px;
    overflow: auto;
    position: relative;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* Sichtbare Modal-Animation */
.uiModalVisible {
    opacity: 1;
    transform: scale(1);
}

/* Responsive Anpassung */
@media (max-width: 600px) {
    .uiModalContainer {
        width: 90vw;
        height: auto;
        max-height: 90vh;
    }
}

/* Schließen-Button */
.uiModalCloseButton {
position: absolute;
    top: 22px;
    right: 22px;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    line-height: 1em;
    padding: 7px;
    margin: 0;
}

.UIMultiSelect {
  position: relative;
  border: none;
  padding: 0;
  display: inline-block; /* wichtig, damit max-content greift */
}

.UIMultiSelect legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5em .75em;
  border: 1px solid #ccc;
  border-radius: .5em;
  background: #fff;
  color:#000;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.UIMultiSelect .arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .5em;
  vertical-align: middle;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #555;
  transition: transform 0.2s;
}

.UIMultiSelect.open .arrow {
  transform: rotate(180deg);
}

.UIMultiSelect .options {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: max-content; /* Breite an längstes Element anpassen */
  min-width: 100%;    /* Mindestens so breit wie das Legend-Element */
  background: #fff;
  border: 1px solid #ccc;
  border-radius: .5em;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: .5em;
  box-sizing: border-box;
  z-index: 10;
  white-space: nowrap; /* kein Zeilenumbruch */
}

.UIMultiSelect.open .options {
  display: block;
}

.UIMultiSelect .options label {
  display: block;
  padding: .25em 0;
  cursor: pointer;
}
.UIMultiSelect .options label span{
	padding:0 .5em;
}