/* 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, 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, 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;
    width: auto;
}

.hydrated .vs-form .vs-btn.vs-btn-primary::after {
    content: "";
    display: inline-block;
    font-family: "visa-icon";
    font-size: 14px;
    margin-left: 5px;
    position: relative;
    top: 2px;
    color: #f7b600;
}

.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 */
