/*---------------
    KUI Font
-----------------*/

@font-face {
  font-family: 'kui';
  src:   url('kui.eot?kv0.0044');
  src:   url('kui.eot?kv0.0044#iefix') format('embedded-opentype'),
         url('kui.ttf?kv0.0044') format('truetype'),
         url('kui.woff?kv0.0044') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.bold, .kft.bold { font-weight:bold; }

.kft {
   font-family: 'kui' !important;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
.kftb:before {
   width:16px;
}

div.kftbd { position: relative; padding-left:20px; }
.kft.kftb {
   display: inline-block;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   min-width:16px; 
   position: absolute;
}

.kuib { padding-left: 20px; }

.kuib:before, 
.kuia:after {
   font-family: 'kui' !important;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: absolute;

.kuia:after {
   top: 50%;
   transform: translateY(-50%);
   right: 10px;
}
.kuib:before {}
   top: 50%;
   transform: translateY(-50%);
   left: 15px;
}


.ui i.icon { font-size:inherit; }

i.icon, .kft, i.kft, .kfta:after {
   display: inline-block; 
   position:relative; 
}
i.kft { width:inherit; height: inherit; }

button.btn i.kft { width:36px; float:left; }
button.btn i.kft.sml { margin-right: -16px; }
button.btn i.kft:before { transform: translate(-50%,-51%); }
button.btn i.kft.abs { float:unset; display:unset; }

.kft:before, i.kft:before {
   position: absolute;
   top:50%; left:50%;
   transform: translate(-50%,-50%);
   min-height: 16px;
}
.kfta:after {
   position: absolute;
   top:50%; right:10%;
   transform: translateY(-50%);
   min-height: 16px;
}

.field .kft.static { top:unset; left:unset; transform: unset; right:unset; }
.kft.static:before { position: relative; top:unset; left:unset; transform: unset; }
.kft.baseline:before { position: relative; top:unset; left:unset; transform: unset; display: inline-block; vertical-align: baseline; }

.kft.green { color:lightgreen; }

.kft.zero { top:0; left:0; }

.kft.s16:before { font-size:16px !important; }
.kft.s18:before { font-size:18px !important; }
.kft.s19:before { font-size:19px !important; }
.kft.s20:before { font-size:20px !important; }
.kft.s22:before { font-size:22px !important; }
.kft.s24:before { font-size:24px !important; }

.kft.kb:before { content: "\e901"; }
.kft.k:before { content: "\e902"; }

.kft.ch:before { content: "\e952"; }
.kft.chh:before { content: "\e945"; }
.kft.chc:before { content: "\e946"; }
.kft.chl:before { content: "\e947"; }
footer .kft.ch:before { font-size: 68px; }

.kft.active:before { content:"\e94b"; }
.kft.active.on:before { content:"\e949"; }
@media (hover: hover) { .kft.hover.active:hover:before { color:yellow; } }
@media (hover: hover) { .kft.hover:hover:before { color:lightgreen; } }

.kft.arw-right:before { content:"\f356"; }
.kft.arw-left:before { content:"\f355"; }
.kft.right-left:before { content:"\e971"; }
.kft.arw-right-l:before { content:"\f356"; }
.kft.arw-left-l:before { content:"\e935"; }
.kft.arw-up:before { content:"\f357"; }
.kft.arw-dn:before { content:"\f354"; }

.kft.cirleft:before { content: "\e96b"; }
.kft.cirright:before { content: "\e96c"; }
.kft.circle_l:before { content: "\E969"; }
.kft.circle_r:before { content: "\E96A"; }

.kft.chevup:before { content: "\e903"; }
.kft.chevdown:before { content: "\e94a"; }
.kft.chevleft:before, i.icon.chevron.left:before { content: "\e92f"; font-family: kui; }
.kft.chevright:before, i.icon.chevron.right:before { content: "\e904"; font-family: kui; }

.kft.angle-right-b:before { content: "\e904"; }
.kft.angle-right:before { content: "\e905"; }
.kft.angle-left:before { content: "\e930"; }
.kft.angle-left-b:before { content: "\e92f"; }
.kft.angles-right:before { content: "\e931"; }
.kft.angles-left:before { content: "\e92e"; }
.kft.right:before { content:"\e936"; }
.kft.right-long:before { content: "\e906"; }
.kft.down:before { content:"\f354"; }
.kft.caret-down:before { content: "\f0d7"; }
.kft.caret-up:before { content: "\e97a"; }
.kft.cart:before { content: "\e90a"; }
.kft.trashcan:before { content: "\e90d"; }
.kft.backward:before { content: "\e97c"; }
.kft.forward:before { content: "\e97d"; }

.kft.circle:before { content:"\e93b";  }
.kft.circle.chk:before { content:"\e92b"; }
.kft.circle.chkb:before { content:"\e92c"; }
.kft.circle.x:before { content:"\E89D"; }
.kft.circle.xb:before { content:"\e92a"; }

.kft.map:before { content:"\e965"; }
.kft.filter:before { content:"\e953"; }
.kft.page:before { content: "\e908"; }
.kft.file-plus:before { content: "\e909"; }
.kft.file-pdf:before { content: "\e943"; }
.kft.excl:before { content:"\e96d"; }
.kft.excl-b:before { content:"\e96e"; }
.kft.chk:before { content: "\e90b"; }
.kft.chkcb:before { content: "\e92c"; }
.kft.delete:before { content: "\e92a"; }
.kft.x:before,
.kft.remove:before { content: "\f00d"; }
.kft.close:before { content: "\f00d"; font-weight: bold; }
.kft.circle-x:before, 
.kft.del:before { content: "\E89D"; }
.kft.trash:before { content: "\e90d"; }
.kft.logout:before { content: "\e911"; }
.kft.music:before { content: "\e912"; }
.kft.edit:before { content: "\e913"; }
.kft.note:before { content: "\e970"; }
.kft.eye:before { content: "\e933"; }
.kft.eye.off:before { content: "\e934"; }
.kuib.plus:before, 
.kft.plus:before { content: "\e914"; }
.kft.minus:before { content: "\e98a"; }
.kft.rotate:before, 
.kft.sync:before { content: "\e915"; }
.kft.cat:before { content: "\e950"; }
.kft.grid:before { content: "\e98f"; }
.kft.tag:before { content: "\e951"; }
.kft.print:before { content: "\e907"; }
.kft.img:before { content: "\f03e"; }
.kft.imgb:before { content: "\f03f"; }
.kft.user:before { content: "\e939"; }
.kft.user-book:before { content: "\e93d"; }
.kft.potion:before { content: "\e966"; }
.kft.book:before { content: "\e95e"; }
.kft.eye:before { content: "\e933"; }
.kft.eye.active:before { content: "\e934"; }
.kft.check:before { content:"\e974"; }
.kft.invoice:before { content:"\E89C"; }
.kft.camera:before { content:"\e993"; }

/* Social */
.kft.s-st:before  { content: "\e919"; }
.kft.s-pp:before  { content: "\e91a"; }
.kft.s-ig:before  { content: "\e91b"; }
.kft.s-yt:before  { content: "\e91c"; }
.kft.s-vm:before  { content: "\e91d"; }
.kft.s-fb:before  { content: "\e91e"; }
.kft.s-fbc:before { content: "\e91f"; }
.kft.s-tw:before  { content: "\e920"; }
.kft.s-pn:before  { content: "\e906"; }
.kft.s-wa:before  { content: "\e921"; }
.kft.s-zm:before  { content: "\e94e"; }
.kft.video:before { content: "\e988"; }
.kft.s-ap:before  { content: "\e975"; }
.kft.s-go:before  { content: "\e976"; }

/* Admin */
.kft.calc:before { content: "\e938"; }
.kft.copy:before { content: "\e93e"; }
.kft.copyChk:before { content:"\e92b" !important; color:lightgreen; font-weight: bold; font-size: 18px; }
.kuia.copyChk:after { content:"\e92b" !important; color:lightgreen; font-weight: bold; font-size: 18px; }
.btnChk { color: transparent !important; text-shadow: none !important; position:relative !important; right:unset !important; }

.kft.clipboardv:before { content: "\e927"; }
.kft.code:before { content: "\e928"; }
.kft.cards:before { content: "\e97e"; }
.kft.slides:before { content: "\e991"; }
.kft.calendarstar:before { content:"\e95b"; }
.kft.list-check:before { content:"\e964"; }
.kft.dots:before { content:"\e97f"; }
.kft.db:before { content: "\e925"; }
.kft.download:before { content: "\e923"; }
.kft.duplicate:before { content: "\f0c5"; }
.kft.gear:before { content: "\e90f"; }
.kft.gear-bold:before { content: "\e90e"; }
.kft.link:before { content: "\e910"; }
.kft.url:before { content: "\e93f"; }
.kft.social:before { content: "\e956"; }
.kft.news:before { content:"\e957"; }
.kft.contact:before { content:"\e958"; }
.kft.lock:before { content: "\e937"; }
.kft.mail:before { content: "\e90c"; }
.kft.mails:before { content: "\e922"; }
.kft.paper-plane:before { content: "\e992"; }
.kft.panel:before { content: "\e929"; }
.kft.search:before { content: "\e917"; }
.kft.search-bold:before { content: "\e916"; }
.kft.directions:before { content: "\e977"; }
.kft.folder:before { content: "\e979"; }
.kft.folder-heart:before { content: "\e978"; }
.kft.folder-plus:before { content: "\e990"; }
.kft.star:before { content:"\e95a"; }
.kft.starb:before { content:"\e959"; }

.kft.at:before { content: "\e97b"; }
.kft.call:before { content: "\e940"; }
.kft.phone:before { content: "\e94d"; }
.kft.sms:before { content: "\e926"; }
.kft.txt:before { content: "\e941"; }
.kft.vcard:before { content: "\e942"; }

.kft.upload:before { content: "\e924"; }
.kft.import:before { content: "\e900"; }
.kft.cloud-up:before { content:"\e972"; }
.kft.cloud-down:before { content:"\e973"; }
.kft.sq:before { content:"\f0c8"; font-size: 18px; }
.kft.sq.checked:before { content:"\f14a"; font-size: 18px; }
.kft.sq-plus:before { content:"\e98a"; }

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

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

/*.field :not(button i).kft {
   color:#9d9d9d;
   width: 30px;
   height: 40px;
   position: absolute;
   right: 14px;
   font-size: 14px;
}
*/
.field .kft:before { transition: color .2s ease-in-out; }
.field .kft.static { position:relative; right:unset; bottom:unset; }

/* +30px per Pos. */
.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); } 
}