form.kui .field { margin-bottom:10px; position: relative; }

form.ui .field.no_label { padding-top: 21px; }

form.kui label { 
	display: block;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 11px !important;
	color: rgba(0,0,0,.75);
	margin: 0 8px 5px 10px;
}
form.kui.light label { color: rgba(0,0,0,.75); }
form.kui.dark label { color: rgba(255,255,255,.55); }

form.kui input:not([type=checkbox]):not([type=radio]),
form.kui textarea {
	border: 2px solid #dededf;    
    border-radius: 5px !important;
    color:var(--darkgray);
    padding: 4px 10px;
    transition: border-color .2s ease-in-out;
    width:100%;
    background-color: rgba(255,255,255,.8);
}
form.kui input:not([type=checkbox]):not([type=radio]) {  height: 40px; }

form.kui .field input:not([type=checkbox]):not([type=radio]):focus,
form.kui .field textarea:focus {
	border: 2px solid var(--blue);
	outline: none;
}

form.kui input:autofill { background: #fff; filter: none; }

form.kui input.error:not([type=checkbox]):not([type=radio]),
form.kui input.error:not([type=checkbox]):not([type=radio]):focus,
form.kui textarea.error,
form.kui textarea.error:focus { border: 2px solid var(--darkred) !important; }

form.kui.dark .field.error input:not([type=checkbox]):not([type=radio]),
form.kui.dark .field.error  textarea { border: 2px solid #9f3a38 !important; }

form.kui.dark input:not([type=checkbox]):not([type=radio]),
form.kui.dark textarea {
	background-color: #262626 !important;
	border: 2px solid #262626;    
    color:var(--white);
}

form.kui.dark input:not([type=checkbox]):not([type=radio])::selection,
form.kui.dark textarea::selection {
	color:#000;
	background-color: rgba(255,255,255,.65);
}


form.kui .fields { display: flex; gap: 10px; flex-wrap: wrap; }
.mobile form.kui .fields { gap:0; }
.mobile form.kui .fields .field { width:100% !important; }
form.kui .fields.two .field { width:calc(50% - 5px); }
form.kui .fields.three .field { width:calc(100%/3 - 20px/3) }
form.kui .fields.four .field { width:calc(100%/4 - 30px/4); }

form.kui .ui.error.message:empty { display:none; }

/* --------~~~~~~~~ ux.Select ~~~~~~~~-------- */

.ux-select { 
	width:calc(100% - 30px); 
	margin-inline:auto; 
	user-select: none; -webkit-user-select: none; -ms-user-select: none;
}

.ux-select label {
	text-align: center;
	display: block;
	font-size: .9em;
	font-weight: bold;
}

.ux-select a.menu { 
	border-radius: 13px;
	background-color: var(--light-border);
	display: block;
	position: relative;
	margin-block: 5px;
	padding-inline: 20px;
	height: 26px;
	line-height: 26px;
	color: #333;
	transition: all .2s ease-in-out;
}
.ux-select a.menu:after { content:"\f0d7"; right: 13px; color:#959697; transition: rotate .2s ease-in-out; }
.ux-select.open a.menu:after { transform:rotate(180deg); top: 6px; }

@media (hover: hover) { 
	.ux-select a.menu:hover, 
	.ux-select ul li a:hover { background-color: var(--prime); color:white; }

	.ux-select a.menu:hover { box-shadow: 0 0 2px 4px #c2d1f3; }

	.ux-select a.menu:hover:after { color:white; }
}

.ux-select.open ul { display:block; }
.ux-select ul {
	display: none;
	list-style: none;
	padding: 0;
	margin: 0;
	border-radius: 5px;
	border:1px solid var(--light-border);
	box-shadow: 0px 0px 5px 2px rgba(0,0,0,.12);
}
.ux-select ul li a { 
	height: 28px;
	line-height: 28px;
	display:block; 
	position: relative;
	color:#333;
	padding-left: 30px;
	transition: all .2s ease-in-out;
	border-radius: 5px;
	margin: 2px;
	font-size: .9em;
}
.ux-select ul li a.selected:before { 
	content:"\e90b";
	font-family: 'kui';
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
	font-size: 0.7em;
}