@layer kform {

form.kui {
	--input-height:40px;
	--textarea-line-height:24px; 

  --input-placeholder: rgba(191,191,191,.87);
	--input-color:var(--white);
	--input-disabled:#77777b;
	--input-size:16px;
	--input-hover:rgba(73, 161, 100, 1);
	--input-background-color: #262626;
  --input-border:#262626;
	--border-focus:rgba(79, 126, 230, 1);

	--error-color: #e7bdbc;
	--error-border: #a5393b;

	--label-color: #7b7b7f;

	--selection-background:rgba(79, 126, 230, .8);
	--selection-color:var(--white);
	--hr-border:var(255,255,255,.15);


	&.light {
		--input-placeholder: rgba(191,191,191,.87);
		--input-color:var(--darkgray);
		--input-hover:rgba(73, 161, 100, 1);
		--input-background-color: rgba(255,255,255,.8);

/*	    --input-border:#262626;
		--border-focus:rgba(79, 126, 230, 1);
*/
		--error-color: #e7bdbc;
		--error-border: #a5393b;
		--hr-border:var(0,0,0,.15);

		--label-color: var(--darkgray);

		--selection-background:silver;
		--selection-color:var(--input-color);

	}
}
input:autofill, 
input:-webkit-autofill, 
input:-moz-autofill {
	filter: none !important;
	box-shadow: 0 0 0 1000px var(--input-background-color) inset !important;
	-webkit-text-fill-color: var(--input-color) !important;
	color: #fff !important;
}

form.kui {
	--field-gap: 14px;

	& .fields {
		display: flex;
		flex-wrap: wrap;
		gap: var(--field-gap);
		justify-content: space-between;

		&.left { justify-content: flex-start; }

		--cols: 16;

		&.two      { --cols: 2; }
		&.three    { --cols: 3; }
		&.four     { --cols: 4; }
		&.five     { --cols: 5; }
		&.six      { --cols: 6; }
		&.seven    { --cols: 7; }
		&.eight    { --cols: 8; }
		&.nine     { --cols: 9; }
		&.ten      { --cols: 10; }
		&.eleven   { --cols: 11; }
		&.twelve   { --cols: 12; }
		&.thirteen { --cols: 13; }
		&.fourteen { --cols: 14; }
		&.fifteen  { --cols: 15; }
		&.sixteen  { --cols: 16; }

		& > .field,
		& > .fields {
			flex: 0 0 calc(
				((100% - (var(--cols) - 1) * var(--field-gap)) / var(--cols)) * var(--span)
				+ (var(--span) - 1) * var(--field-gap));
		}

		& > .field.max,
		& > .field[data-type=checkbox],
		& > .field[class^="w"],
		& > .field[class*=" w"],
		& > .fields[class^="w"],
		& > .fields[class*=" w"],
		& > .field[style*="width"],
		& > .fields[style*="width"] {
			flex: 0 0 auto;
			width: max-content;
		}

		&.nomar .field { margin-bottom: 0; }

	}

	.field,
	.fields {
		position: relative;
		max-width: 100%;
		min-width: 0;

		--span: 1;
		&.two      { --span: 2; }
		&.three    { --span: 3; }
		&.four     { --span: 4; }
		&.five     { --span: 5; }
		&.six      { --span: 6; }
		&.seven    { --span: 7; }
		&.eight    { --span: 8; }
		&.nine     { --span: 9; }
		&.ten      { --span: 10; }
		&.eleven   { --span: 11; }
		&.twelve   { --span: 12; }
		&.thirteen { --span: 13; }
		&.fourteen { --span: 14; }
		&.fifteen  { --span: 15; }
		&.sixteen  { --span: 16; }

	}

	.field {
		margin-bottom:14px;
		&.nomar { margin-bottom: 0; }
		&.max { width:max-content }
		&.tac input[type=text] { text-align:center; }

	}
}

form.kui  {

	label {
		font-weight: normal;
		text-transform: uppercase !important;
		font-size: 11px !important;
		margin: 0 8px 8px 10px;
		color:var(--label-color);
		display: block;
	}

	.field:has(.input.kft:nth-of-type(1)) input { padding-right: 50px; }
	.field:has(.input.kft:nth-of-type(2)) input { padding-right: 80px; }
	.field:has(.input.kft:nth-of-type(3)) input { padding-right: 110px; }
	.field:has(.input.kft:nth-of-type(4)) input { padding-right: 130px; }
	.field:has(.input.kft:nth-of-type(5)) input { padding-right: 160px; }
	.field:has(.input.kft:nth-of-type(6)) input { padding-right: 190px; }

	input:not([type=radio]):not([type=checkbox]) {
        height: var(--input-height);
        line-height: var(--input-height);
        box-sizing: border-box;
        border: 2px solid var(--input-border);
        color: var(--input-color);
        width: 100%;
        font-size: var(--input-size);
        border-radius: 5px;
        transition: border-color .2s ease-in-out;
        background-color: var(--input-background-color);
        padding: 0 12px;
        outline: none;
        white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
        &:not([disabled]):hover, 
        &:focus { border-color:var(--border-focus); }
        &::selection { background:var(--selection-background); color:var(--selection-color); }
        &[disabled] { color:var(--input-disabled); }
   }

	::placeholder { color: var(--input-placeholder); opacity: .87; }

	textarea {
		box-sizing: border-box;
		border: 2px solid var(--input-border);
		color: var(--input-color);
		width: 100%;
		font-size: var(--input-size);
		line-height: var(--textarea-line-height);
		border-radius: 5px;
		transition: border-color .2s ease-in-out;
		background-color: var(--input-background-color);
		padding: 12px;
		outline: none;
		&:hover, &:focus { border-color:var(--border-focus); }
		&::selection { background:var(--selection-background); color:var(--selection-color); }
		font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
		scrollbar-color: rgba(255,255,255,.12) transparent;
		::-webkit-scrollbar-track { background: transparent; }
		::-webkit-scrollbar-thumb {
			background-color: rgba(255,255,255,.12);
			border-radius: 8px;
			border: 2px solid transparent;
		}

   }

    & .field.error input { border-color: var(--error-border); }

	& div.hr {
		border-top: 1px solid var(--hr-border) !important;
		height: 1px;
		width: 100%;
		margin-block: 10px 20px;
	}

}


.field a.input.kft {
   color:#9d9d9d !important;
   &:hover { color:lightgreen !important; }
   transition: color .3s ease-in-out;

   width: 30px;
   height: 40px;
   position: absolute;
   font-size: 14px;
   bottom: 0;
   right:14px;
}
.field:not(:has(label)) a.input.kft { top:0; }

.field { --start-from: 0px; }
.field[data-type=text-uploader] { --start-from: 60px; }

.field > :nth-child(1 of a.input.kft) { right: calc(var(--start-from) + 14px); }
.field > :nth-child(2 of a.input.kft) { right: calc(var(--start-from) + 44px); }
.field > :nth-child(3 of a.input.kft) { right: calc(var(--start-from) + 78px); }
.field > :nth-child(4 of a.input.kft) { right: calc(var(--start-from) + 112px); }
.field > :nth-child(5 of a.input.kft) { right: calc(var(--start-from) + 146px); }
.field > :nth-child(6 of a.input.kft) { right: calc(var(--start-from) + 180px); }
.field > :nth-child(7 of a.input.kft) { right: calc(var(--start-from) + 214px); }




/* +30px per Pos. */
.field a.input.kft.pos2 { right:44px; }
.field a.input.kft.pos3 { right:74px; } 
.field a.input.kft.pos4 { right:104px; }
@media (hover: hover) { 
   .field .kft:hover { color:lightgreen; } 
   form.light .field .kft:hover { color:var(--blue); } 
}

.field .kft.static { position:relative; right:unset; bottom:unset; }
.field .kft.pos2 { right:44px; }
.field .kft.pos3 { right:74px; } 
.field .kft.pos4 { right:104px; }
@media (hover: hover) { 
   .field .kft:hover { color:lightgreen; } 
   form.light .field .kft:hover { color:var(--blue); } 
}


/* ----~~~~ Trumbowyg Editor ~~~~---- */

.field.h100 .trumbowyg-box { height:100%; }
.trumbowyg-editor-box { background: white; color: #333; border-radius:10px; scrollbar-color: rgba(0,0,0,.2) transparent; }
.h100 .trumbowyg-box { height:100%; }
.trumbowyg-box { border-radius:10px; background:white; min-height: unset !important; height:calc(100% - 44px); overflow: hidden; }
.trumbowyg-button-pane { border-radius:10px 10px 0 0; }
.trumbowyg textarea { scrollbar-color: rgba(0,0,0,.2) transparent; display:none; }
.trumbowyg textarea::selection { background: rgba(37, 114, 218, .25) !important; color: #333 !important; }
#trumbowyg-icons { display:none; }
.trumbowyg-editor-box :is(p, h1, h2, h3, h4, h5, h6) { user-select:text !important; color: #333 !important; }
.trumbowyg-editor-box a { color:var(--blue); }
.field[data-type=textedit] .trumbowyg-editor img, .trumbowyg-editor video { height: revert-layer; }

/* ----~~~~ Text Expand ~~~~---- */


form.text_expand {
  height:100%;
  & .ux-panels { height:100%; }
  & .panel.text_expand {
      height: calc(100% - 40px);
      display: flex;
      flex-direction: column;

      & .field[data-name="html"] {
        flex: 1 1 0;
        min-height: 0;
        height: auto !important;
      }
      & .field[data-name="html"] .trumbowyg-box {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      & .field[data-name="html"] .trumbowyg-editor-box {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
      }
      & .field[data-name="html"] .trumbowyg-editor {
        height: 100%;
        box-sizing: border-box;
      }
  }
}


} /* @layer */