/* START GENAI */
     :root.classic {
       /* 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);
       --checkbox-focus-color: var(--tertiary-1-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*/
     }

     .hydrated .vs-position-static {
       position: static;
     }

     /* 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 {
       border: 1px solid var(--text-error);
       padding: 0px;
     }

     .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-right.vs-input-radio:after {
       left: 9px !important;
    }

     .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-background);
       border: 1px solid var(--radio-border-focus-color);
       box-shadow: inset 0 0 0 5px var(--radio-border-focus-color);
     }

     .hydrated .vs-form input.vs-input-radio.has-error:after {
       border: 3px solid var(--text-error);
       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: 2px;
       background-color: var(--tertiary-1-color);
       border: 1px solid var(--tertiary-7-color);
       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(--checkbox-background);
       outline: 1px dashed var(--checkbox-background);
       outline-offset: 4px;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     }

     .hydrated .vs-form input.vs-checkbox:checked {
       border: 1px solid var(--checkbox-background);
       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-group .vs-checkbox:checked::after {
       color: var(--checkbox-focus-color);
       background-color: var(--checkbox-background);
     }

     .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 {}

     .hydrated .vs-btn.vs-rounded,
     .hydrated .vs-image.vs-rounded {
       border-radius: 30px !important;
     }

     .hydrated .vs-small-card-image.vs-rounded {
       border-radius: 15px !important;
     }

     .hydrated .vs-btn.vs-btn-share::after,
     .vs-btn.vs-btn-new-window::after,
     .vs-btn.vs-btn-icon::after {
       color: inherit;
     }

     .hydrated .vs-grow {
       flex-grow: 1;
     }

     /* 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;
     }

     .vs-row.vs-2-per-row {
       gap: 2rem;

       &>.vs-col-md-4 {
         padding: 1rem;

         @media (min-width: 768px) {
           margin: 0 1rem;
         }
       }
     }

     .vs-cards-grid {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 2rem;
       margin: 0 auto;
     }

     @media (max-width: 768px) {
       .vs-cards-grid {
         gap: 1rem;
       }
     }

     a:not(.vs-btn):not([class*="wscr"]) {
       color: inherit !important;
     }
      /* END GENAI */