/* START GENAI@CHATGPT4 */
.hydrated {
  /* You can use the theme's colors to define a standard look and feel. */
  --primary-color: var(--classic-primary-color);
  --primary-light-color: var(--classic-primary-light-color);
  --primary-dark-color: var(--classic-primary-dark-color);
  --secondary-color: var(--classic-secondary-color);
  --secondary-light-color: var(--classic-secondary-color-light);
  --secondary-dark-color: var(--classic-secondary-color-dark);
  --tertiary-7-color: var(--classic-tertiary-7-color);
  --tertiary-6-color: var(--classic-tertiary-6-color);
  --tertiary-5-color: var(--classic-tertiary-5-color);
  --tertiary-4-color: var(--classic-tertiary-4-color);
  --tertiary-3-color: var(--classic-tertiary-3-color);
  --tertiary-2-color: var(--classic-tertiary-2-color);
  --tertiary-1-color: white;

  /* font family definition */
  --font-light: var(--classic-font-latin-light), var(--classic-font-greek-light), var(--classic-font-cyrillic-light), sans-serif;
  --font-semi-bold: var(--classic-font-latin-semi-bold), var(--classic-font-greek-semi-bold), var(--classic-font-cyrillic-semi-bold), sans-serif;

  /* heading theme definition */
  --heading-font-family: var(--font-semi-bold);
  --heading-color: var(--tertiary-7-color);
  --heading-lead-color: var(--tertiary-7-color);
  --heading-font-weight: 600;

  /* button theme definition */
  --button-font-family: var(--font-light);
  --button-primary-color: var(--tertiary-1-color);
  --button-primary-background: var(--primary-color);
  --button-primary-background-hover: var(--primary-light-color);
  --button-primary-border-focus: var(--tertiary-1-color);

  /* text theme definition */
  --text-font-family: var(--font-light);
  --text-strong-font-family: var(--font-semi-bold);
  --text-color: var(--tertiary-7-color);
  --text-error: #D50000;
  --text-success: #077844;
  --text-required: #a94442;

  /* link theme definition */
  --link-font-family: var(--font-light);
  --link-strong-font-family: var(--font-semi-bold);
  --text-link-color: var(--primary-color);
  --text-link-alt-color: var(--tertiary-1-color);
  --text-link-icon-alt-color: var(--secondary-color);
  --text-link-focus-color: var(--primary-dark-color);
  --text-link-focus-outline-color: var(--tertiary-7-color);

  /* form field theme definition */
  --form-input-font-family: var(--font-light);
  --form-input-color: var(--tertiary-7-color);
  --form-input-focus-color: var(--primary-color);
  --form-input-border-color: var(--tertiary-5-color);
  --form-input-border-focus-color: var(--tertiary-7-color);
  --form-input-outline-focus-color: var(--primary-color);
  --form-input-placeholder-color: var(--tertiary-5-color);

  /* radio button and checkbox group button background */
  --radio-background: var(--tertiary-1-color);
  --radio-border-focus-color: var(--tertiary-7-color);
  --checkbox-background: var(--primary-color);
}

.hydrated .vs-main-form {
  /* set background color of the form here */
}


.hydrated .vs-container h1.vs-h2 {
  /* set form heading customisation here */
}

.hydrated .vs-container p.vs-description {
  /* set form description customisation here*/
}

/* form label configuration */
.hydrated .vs-form .vs-text,
.hydrated .vs-form .vs-label {
  font-size: 17px;
}

/* form field style configuration by default */
.hydrated .vs-form .vs-form-group .vs-form-control,
.hydrated .vs-form .vs-form-group .form-control,
.hydrated .vs-form .vs-input-group .vs-input {
  border: 1px solid gray;
  border: 1px solid var(--form-input-border-color);
  border-radius: 0;
  color: var(--form-input-color);
  font-family: sans-serif;
  font-family: var(--form-input-font-family);
  font-size: 17px;
  font-weight: 100;
  width: 100%;
}

/* form field style configuration when on focus */
.hydrated .vs-form .vs-form-group .form-control:hover,
.hydrated .vs-form .vs-form-group .form-control:focus,
.hydrated .vs-form .vs-input:hover,
.hydrated .vs-form .vs-input:focus {
  border: 1px solid var(--form-input-border-focus-color);
  outline: 1px dashed var(--form-input-outline-focus-color);
  outline-offset: 4px;
}

/* form error message configuration */
.hydrated .vs-form .vs-alert {
  color: var(--text-error);
}

/* form field style configuration when on error */
.hydrated .vs-form .vs-form-group .form-control.has-error,
.hydrated .vs-form .vs-input.vs-error {
  -webkit-box-shadow: 0 0 2px 0 var(--text-error);
  box-shadow: 0 0 2px 0 var(--text-error);
  border: 1px solid var(--text-error);
}

/* Main error message summary table customisation */
#errorFormMessage {
  background: var(--tertiary-2-color);
  padding: 2px;
}

.hydrated .vs-form .vs-text a.error-link {
  color: var(--text-error);
}

/* radio button configurations */
.hydrated .vs-form input.vs-input-radio:after {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  top: 0px !important;
  left: -4px !important;
  position: relative;
  background-color: var(--radio-background);
  content: "";
  display: inline-block;
  visibility: visible;
  border: 1px solid #fcc015;
  border: 1px solid var(--radio-border-focus-color);
}

.hydrated .vs-form input.vs-input-radio:focus,
.hydrated .vs-form input.vs-input-radio:hover {
  border: 1px solid var(--radio-border-focus-color);
}

.hydrated .vs-form input.vs-input-radio:checked:after {
  background-color: var(--radio-border-focus-color);
  border: 1px solid var(--radio-border-focus-color);
  box-shadow: inset 0 0 0 5px var(--tertiary-1-color);
}

.hydrated .vs-form input.vs-input-radio.has-error:after {
  border: 3px solid red;
  border-radius: 50px;
}

/* checkbox group configurations */
.hydrated .vs-form input.vs-checkbox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  height: 24px;
  width: 24px;
  margin: 0;
  background-color: var(--tertiary-1-color);
  border: 1px solid gray;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  padding: 9px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.hydrated .vs-form input.vs-checkbox:focus,
.hydrated .vs-form input.vs-checkbox:hover {
  border: 1px solid var(--tertiary-7-color);
  outline: 1px dashed var(--tertiary-7-color);;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.hydrated .vs-form input.vs-checkbox:checked {
  background-color: var(--checkbox-background);
}

.hydrated .vs-form input.vs-checkbox.has-error {
  border: 3px solid var(--text-error);
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.hydrated .vs-form input.vs-checkbox + label {
  display: inline;
  margin: 0;
  padding-left: 14px;
  position: relative;
  top: 2px;
}

/* Reset button customisation */

.hydrated .vs-form .vs-btn {
}

.hydrated .vs-form .vs-btn:hover {
}

/* Submit button customisation */
.hydrated .vs-form .vs-btn.vs-btn-primary {
  background-color: var(--button-primary-background);
  color: var(--button-primary-color);
  font-family: var(--button-font-family);
  font-size: 17px;
  padding: 15px 30px;
}

.hydrated .vs-form .vs-btn.vs-btn-primary:hover {
  background-color: var(--button-primary-background-hover);
}

/* Required text css customisation */
.hydrate .vs-form .required {
  color: var(--text-required);
  font-size: 12px;
  padding: 0;
}

/* Tooltip customisation */
.hydrated .vs-form .vs-tooltip-dialog {
}

.hydrated .vs-sr-only {
  border:0;
  clip:rect(0 0 0 0);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px
}

/* END GENAI@CHATGPT4 */