@charset "UTF-8";

/* These are the classes applied on the error messages which prevent them from being displayed by default. */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg,
.textareaRequiredMsg,
.textareaMinCharsMsg,
.textareaMaxCharsMsg,
.textareaValidMsg,
.selectRequiredMsg, 
.selectInvalidMsg,
.radioRequiredMsg, 
.radioInvalidMsg,
.confirmRequiredMsg, 
.confirmInvalidMsg, 
.confirmValidMsg {
	display: none;
}

/* Error states. Default red border and color for the error text. */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg,
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg,
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg,
.radioRequiredState .radioRequiredMsg,
.radioInvalidState .radioInvalidMsg,
.confirmRequiredState .confirmRequiredMsg,
.confirmInvalidState .confirmInvalidMsg {
	display: inline;
	color: #F88888;
	border: 1px solid #CC3333;
}

/* INPUT APPEARANCE: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState,
.textareaValidState textarea, textarea.textareaValidState,
.selectValidState select, select.selectValidState,
.confirmValidState input, input.confirmValidState {
	background-color: #B8F5B1;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input,
textarea.textareaRequiredState, .textareaRequiredState textarea, 
textarea.textareaMinCharsState, .textareaMinCharsState textarea, 
textarea.textareaMaxCharsState, .textareaMaxCharsState textarea,
select.selectRequiredState, .selectRequiredState select,
select.selectInvalidState, .selectInvalidState select,
input.confirmRequiredState, .confirmRequiredState input, 
input.confirmInvalidState, .confirmInvalidState input {
	background-color: #FF9F9F;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState,
.textareaFocusState textarea, textarea.textareaFocusState,
.selectFocusState select, select.selectFocusState,
.confirmFocusState input, input.confirmFocusState {
	background-color: #9CF;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character. */
.textfieldFlashText input, input.textfieldFlashText,
.textareaFlashState textarea, textarea.textareaFlashState {
	color: #F88888 !important;
}

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input, input.textfieldHintState,
textarea.textareaHintState, .textareaHintState textarea {
	color: #F88888 !important;
}