@charset
"utf-8"
;
/* CSS Document */

.textfieldRequiredMsg,
  .textfieldInvalidFormatMsg,
  .textfieldMinValueMsg,
  .textfieldMaxValueMsg,
  .textfieldMinCharsMsg,
  .textfieldMaxCharsMsg,
  .textfieldValidMsg {
  display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg,
  .textfieldInvalidFormatState .textfieldInvalidFormatMsg,
  .textfieldMinValueState .textfieldMinValueMsg,
  .textfieldMaxValueState .textfieldMaxValueMsg,
  .textfieldMinCharsState .textfieldMinCharsMsg,
  .textfieldMaxCharsState .textfieldMaxCharsMsg,
  .badEmailPasswordCombo {
  display: inline;
  color: #EF6612;

}

/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid
* There are two selectors for each state, to cover the two main usecases for the widget:
* - the widget id is placed on the top level container for the INPUT
* - the widget id is placed on the INPUT element itself (there are no error messages)
*/

/* When the widget is in the valid state the INPUT has a green background applied on it. */

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
.fieldWithErrors input,
  input.textfieldRequiredState, .textfieldRequiredState input,
  input.textfieldInvalidFormatState, .textfieldInvalidFormatState input,
  input.textfieldMinValueState, .textfieldMinValueState input,
  input.textfieldMaxValueState, .textfieldMaxValueState input,
  input.textfieldMinCharsState, .textfieldMinCharsState input,
  input.textfieldMaxCharsState, .textfieldMaxCharsState input {
  border: 1px solid #EF6612;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */

/* 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 {
  color: #EF6612 !important;
}

.selectRequiredMsg, .selectInvalidMsg {
  display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states (required, invalid).
 * These classes set a default red border and color for the error text.
 * The state class (.selectRequiredState or .selectInvalidState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.selectRequiredState .selectRequiredMsg,
  .selectInvalidState .selectInvalidMsg {
  display: inline;
  color: #EF6612;

}

/* The next three group selectors control the way the core element (SELECT) looks like when the widget is in one of the states:
 * focus, required / invalid, valid
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the SELECT
 * - the widget id is placed on the SELECT element itself (there are no error messages)
 */

/* When the widget is in the valid state the SELECT has a green background applied on it. */
.selectValidState select, select.selectValidState {

}

/* When the widget is in an invalid state the SELECT has a red background applied on it. */
select.selectRequiredState, .selectRequiredState select,
  select.selectInvalidState, .selectInvalidState select {

  border: 1px solid #EF6612;
}

/* When the widget has received focus, the SELECT has a yellow background applied on it. */
.selectFocusState select, select.selectFocusState {

}

/* These are the classes applied on the error messages
* which prevent them from being displayed by default.
*/
.textareaRequiredMsg,
  .textareaMinCharsMsg,
  .textareaMaxCharsMsg,
  .textareaValidMsg {
  display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textareaRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textareaRequiredState .textareaRequiredMsg,
  .textareaMinCharsState .textareaMinCharsMsg,
  .textareaMaxCharsState .textareaMaxCharsMsg {
  display: inline;
  color: #EF6612;

}

/* The next three group selectors control the way the core element (TEXTAREA) looks like when the widget is in one of the states: * focus, required / minChars / maxChars , valid
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the TEXTAREA
 * - the widget id is placed on the TEXTAREA element itself (there are no error messages)
 */

/* When the widget is in the valid state the TEXTAREA has a green background applied on it. */
.textareaValidState textarea, textarea.textareaValidState {

}

/* When the widget is in an invalid state the TEXTAREA has a red background applied on it. */
textarea.textareaRequiredState, .textareaRequiredState textarea,
  textarea.textareaMinCharsState, .textareaMinCharsState textarea,
  textarea.textareaMaxCharsState, .textareaMaxCharsState textarea {
  border: 1px solid #EF6612;
}

/* When the widget has received focus, the TEXTAREA has a yellow background applied on it. */
.textareaFocusState textarea, textarea.textareaFocusState {

}

/* This class applies only for a short period of time and changes the way the text in the textarea looks like.
 * It applies only when the widget has enforce max chars enabled and the user tries to type some more.
 */
.textareaFlashState textarea, textarea.textareaFlashState {
  color: #EF6612 !important;
}

.checkboxRequiredMsg, .checkboxMinSelectionsMsg, .checkboxMaxSelectionsMsg {
  display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and font color for the error text.
 * The state class (e.g. .checkboxRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.checkboxRequiredState .checkboxRequiredMsg,
  .checkboxMinSelectionsState .checkboxMinSelectionsMsg,
  .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg {
  display: block;
  color: #CC3333;

}