input[disabled='disabled'] {background-color:var(--COLOUR_GREY_LIGHT); color:#333 !important;}
input[disabled='disabled']:hover {border: var(--BORDER_WIDTH_NORMAL) solid #dddddd; transition: all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out;}

input[readonly='readonly'] { background-color: var(--COLOUR_GREY_LIGHT); color: #333 !important; }
input[readonly='readonly']:hover { border: var(--BORDER_WIDTH_NORMAL) solid #dddddd; transition: all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out;}

input {outline: none;}
input.uppercase {text-transform:uppercase;}

input:not([type='button']) {border-radius: var(--UNIT_01); border: var(--BORDER_WIDTH_NORMAL) solid #dddddd; color: var(--COLOUR_BLACK); font-family: var(--FONT_FAMILY_INPUT); font-size:var(--FONT_SIZE_NORMAL); height:var(--UNIT_09); line-height: var(--LINE_HEIGHT_HUGE); padding:var(--UNIT_01) var(--UNIT_02); transition: all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; width:100%;}
input:not([type='button']):hover {border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_GREY_MEDIUM); transition: all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out;}
input:not([type='button']):focus {border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_GREEN); transition: all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out;}
input:not([type='button']).invalid {border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_RED);}

input[type='checkbox'] {border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_GREY_LIGHT); border: var(--BORDER_WIDTH_NORMAL) solid #dddddd; color: var(--COLOUR_BLACK); background-color: var(--COLOUR_WHITE); height:var(--UNIT_04); width:var(--UNIT_04);}
input[type='checkbox']:checked {background-color: var(--COLOUR_GREY_MEDIUM);}

input[type=number] {-moz-appearance: textfield;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}

input[type='radio'] { border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_GREY_LIGHT); border: var(--BORDER_WIDTH_NORMAL) solid #dddddd; color: var(--COLOUR_BLACK); background-color: var(--COLOUR_WHITE); height: var(--UNIT_04); width: var(--UNIT_04); }
input[type='radio']:checked { background-color: var(--COLOUR_BLUE); }


select {background-color: var(--COLOUR_WHITE); border-radius: var(--UNIT_01); border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_GREY_LIGHT); color: var(--COLOUR_BLACK); font-family: var(--FONT_FAMILY_HEADING2); font-size:var(--FONT_SIZE_NORMAL); line-height: var(--LINE_HEIGHT_HUGE); padding:var(--UNIT_01) var(--UNIT_02); transition: all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; width:100%;}
select:hover {border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_GREY_MEDIUM); transition: all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out;}
select:focus {border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_GREEN); transition: all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out;}


textarea {border-radius: var(--UNIT_01); border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_GREY_LIGHT); color: var(--COLOUR_BLACK); font-family: var(--FONT_FAMILY_BOLD); font-size:var(--FONT_SIZE_NORMAL); height:var(--UNIT_16); line-height: var(--LINE_HEIGHT_NORMAL); outline:none; padding:var(--UNIT_01) var(--UNIT_02); transition: all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; width:100%;}
textarea:hover {border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_GREY_MEDIUM); transition: all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out;}
textarea:focus {border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_GREEN); transition: all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out;}
textarea.invalid {border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_RED);}


/******************************************************************************
* Custom styling for TFWX input controls with containers and floating labels
******************************************************************************/
.tfwx {position:relative; }
.tfwx label {border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_TRANSPARENT); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#666; cursor:text; font-family: var(--FONT_FAMILY_HEADING2); font-size:var(--FONT_SIZE_NORMAL); line-height:calc(var(--UNIT_09) - var(--BORDER_WIDTH_NORMAL) - var(--BORDER_WIDTH_NORMAL)); margin:0; position:absolute; padding:0 var(--UNIT_02); pointer-events:none; top:0; transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; width:100%; z-index:2;}

.tfwx label.required:before { content: " * "; color:red;}
.tfwx label.active {font-family: var(--FONT_FAMILY_NORMAL); font-size:var(--FONT_SIZE_TINY); line-height:var(--LINE_HEIGHT_TINY);  /*transform:scale(0.7) translateY(-35%) translateX(-17.5%);*/ padding:3px var(--UNIT_02); pointer-events:none; transition: all 0.3s linear; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear;}
.tfwx input.centre {text-align:center;}
.tfwx input {line-height:var(--LINE_HEIGHT_NORMAL); padding-top:var(--UNIT_03);}
.tfwx textarea {line-height:var(--LINE_HEIGHT_NORMAL); padding-top:var(--UNIT_03);}

/*input[type="date"]::-webkit-calendar-picker-indicator {display: none; -webkit-appearance: none; -moz-appearance:none;}*/
/******************************************************************************
* Custom styling for TFWX input overriding Telerik styling
******************************************************************************/
.tfwx span.k-datepicker { border: var(--BORDER_WIDTH_NORMAL) solid var(--COLOUR_GREY_MEDIUM); }
.tfwx span.k-datepicker input.k-input-inner {  border: unset;  padding-top: var(--UNIT_03);}
.tfwx span.k-datepicker input.k-input-inner::selection {background-color:transparent;}


@media all and (min-width:600px){
    .tfwx label { max-width: 200px;}
}