input[type="text"], input[type="password"], input[type="date"], input[type="numbmer"], select, [data-role="textbox"] {
    font-size: 14px !important;
    line-height: 20px !important;
    border: 2px rgba(0,0,0,.5) solid;
    color: #000000;
}

input[readonly="readonly"] {
    background-color: #ddd;
}

input[type="date"] { 
    line-height: 20px !important;
}

.ctl-saving {
    background-color: rgba(0,255,0,.3);
}
.ctl-err {
    background-color: rgba(255,0,0,.3);
}

input[type="number"].iaj-input {
    padding: 1px !important;
    font-size: 12px !important;
    line-height: 12px !important;
}

.ctl input[type="checkbox"] {
    position: relative;
    top: 2px;
}
input[type="checkbox"][readonly="readonly"] {
    background-color: green;
}

.ctl-wrap > .ctl > input[type="number"] {
    width: 75px;
}
    .ctl-wrap > .ctl > input[type="number"].large {
        width: 100px;
    }
    .ctl-wrap > .ctl > input[type="number"].x-large {
        width: 125px;
    }
    .ctl-wrap > .ctl > input[type="number"].full {
        width: 100%;
    }

.fs-icon-tr input[type="checkbox"]:checked {
    background-color: #ffffff !important;
    color: #000000 !important;
}
.fs-icon-tr input:checked~.checkbox-container {
    background-color: #ffffff !important;
    color: #000000 !important;
}
 

input[type="checkbox"].large {
    height: 20px;
    width: 20px;
    font-size: 20px;
    line-height: 20px;
    position: relative;
    top: 0px;
    margin-top: 0px;
}
input[type="checkbox"].large.down {
    top: 4px !important;
    left: 4px !important;
    margin: -4px 0 0 -4px !important;
}
select {
    height: 25px;
    border-radius: 1px;
    border-color: rgb(118,118,118);
}

.lbl.required::after {
    content: "*";
   position: absolute;
    top: -2px;
/*     right: 8px;*/
}

.val-err {
    border: 2px #ff0000 solid !important;
    background-color: #ffff00;
}

div.cb-wrap { /* used to wrap vertical CB options */
    font-size: 14px;
    line-height: 14px;
    padding: 0px;
    box-sizing: border-box;
    height: 14px;
    margin-bottom: 4px;
}

input[type="number"].nospin::-webkit-inner-spin-button {
    display: none;
}

.input.money, .input.percent { position: relative; }

div.ctl.money > input, .input.money > input {
    padding-left: 12px;
}
div.ctl.money::before, .input.money::before {
    content: "$";
    font-weight:bold;
    position: absolute;
    font-size: 14px;
    top: 3px;
    left: 2px;
}

div.ctl.percent > input, .input.percent > input {
    padding-right: 20px;
    text-align: right;
}

div.ctl.percent::after, .input.percent::after {
    content: "%";
    font-weight: bold;
    position: absolute;
    font-size: 14px;
    top: 2px;
    right: 4px;
}

::placeholder {
    xxcolor: #bbb;
    opacity: .8;
}

[data-role="autocomplete"].k-input-inner {
     padding-block: 0px !important; 
     padding-inline: 0px !important;
     padding: 1px 2px 1px 2px !important;
}

.btn-row {
    text-align: right;
    margin-bottom: 12px;
}


/*--- TOGGLES ---*/
.tgl-wrap  { cursor: pointer; font-size: 14px; }
.tgl-wrap[data-state="off"] > .tgl-on { display: none; }
.tgl-wrap[data-state="on"] > .tgl-off { display: none; }
.tgl-on {
    color: green;
    font-size: 18px;
}
.tgl-off {
    color: #ff0000;
    font-size: 18px;
}

/*--- FLOATING TABLE HEADER ---*/
div.th-float-wrap {
    position: relative;
    height: 450px;
    overflow: hidden;
    overflow-y: auto;
    display: inline-block;
}
div.th-floater {
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: 999;
}

/*--- SIZE CONFIG ---*/
[data-loc="sz-cfg-row"]:not(.szcfg-on) {
    display: none;
}
.szcfg-wrap.sc-data:not(#szcfg-wrap--1) {
    display: none;
    background-color: #f1f1f1;
    z-index: 20;
}
.szcfg-wrap.sc-nodata {
    z-index: 10;
}
#szcfg-grid {
    position: relative;
}
.szcfg-wrap {
    position: absolute;
}