/* == themeing css from admin config == */





:root {

    --event-theme-header-font: "event-theme-header-font", "Red Hat Display", sans-serif;
    --event-theme-sub-header-font: "event-theme-sub-header-font", "Red Hat Display", sans-serif;
    --event-theme-body-font: "event-theme-body-font", "Red Hat Text", sans-serif;
    --event-theme-button-font: "event-theme-button-font", "Red Hat Text", sans-serif;

    /* == default variables from the defaults json == */

    --settings-logo-image: none;

    --event-default-logo-height: 100px;
    --settings-logo-height: var(--event-default-logo-height);

    --event-default-logo-alignment: center;
    --settings-logo-alignment: var(--event-default-logo-alignment);

    --event-default-logo-top-margin: 25px;
    --settings-logo-top-margin: var(--event-default-logo-top-margin);

    --event-default-logo-left-margin: 25px;
    --settings-logo-left-margin: var(--event-default-logo-left-margin);

    --event-default-logo-right-margin: 25px;
    --settings-logo-right-margin: var(--event-default-logo-right-margin);

    --event-default-logo-bottom-margin: 25px;
    --settings-logo-bottom-margin: var(--event-default-logo-bottom-margin);

    --event-default-background-color: #ffffff;
    --settings-background-color: var(--event-default-background-color);

    --event-default-header-color: #000000;
    --settings-header-color: var(--event-default-header-color);

    --event-default-sub-header-color: #000000;
    --settings-sub-header-color: var(--event-default-sub-header-color);

    --event-default-body-color: #000000;
    --settings-body-color: var(--event-default-body-color);

    --event-default-link-color: #0a0aff;
    --settings-link-color: var(--event-default-link-color);

    --event-default-link-interact-color: #0a0aff;
    --settings-link-interact-color: var(--event-default-link-interact-color);

    --event-default-form-label-color: #000000;
    --settings-form-label-color: var(--event-default-form-label-color);

    --event-default-form-input-background-color: #ffffff;
    --settings-form-input-background-color: var(--event-default-form-input-background-color);

    --event-default-form-input-text-color: #000000;
    --settings-form-input-text-color: var(--event-default-form-input-text-color);

    --event-default-form-input-border-color: #ced4da;
    --settings-form-input-border-color: var(--event-default-form-input-border-color);

    --event-default-form-error-color: #8e261a;
    --settings-form-error-color: var(--event-default-form-error-color);

    --event-default-primary-button-background-color: #000000;
    --settings-primary-button-background-color: var(--event-default-primary-button-background-color);

    --event-default-primary-button-text-color: #ffffff;
    --settings-primary-button-text-color: var(--event-default-primary-button-text-color);

    --event-default-primary-button-interact-background-color: #333333;
    --settings-primary-button-interact-background-color: var(--event-default-primary-button-interact-background-color);

    --event-default-primary-button-interact-text-color: #eeeeee;
    --settings-primary-button-interact-text-color: var(--event-default-primary-button-interact-text-color);

    --event-default-primary-button-border-rounded-corner-value: 50px;
    --settings-primary-button-border-rounded-corner-value: var(--event-default-primary-button-border-rounded-corner-value);

    --event-default-secondary-button-background-color: #dddddd;
    --settings-secondary-button-background-color: var(--event-default-secondary-button-background-color);
    
    --event-default-secondary-button-text-color: #000000;
    --settings-secondary-button-text-color: var(--event-default-secondary-button-text-color);

    --event-default-secondary-button-interact-background-color: #ededed;
    --settings-secondary-button-interact-background-color: var(--event-default-secondary-button-interact-background-color);

    --event-default-secondary-button-interact-text-color: #222222;
    --settings-secondary-button-interact-text-color: var(--event-default-secondary-button-interact-text-color);

    --event-default-secondary-button-border-rounded-corner-value: 50px;
    --settings-secondary-button-border-rounded-corner-value: var(--event-default-secondary-button-border-rounded-corner-value);

    /* == default variables from the defaults json == */


    /* == settings variables == */

        --settings-logo-image: none;
        --settings-logo-position: Center;
        --settings-logo-left-margin: 0px;
        --settings-logo-right-margin: 0px;
        


        --settings-background-color: #222222;

        --settings-header-color: #ffffff;
        --settings-sub-header-color: #ffffff;
        --settings-body-color: #ffffff;

        --settings-link-color: #007bff;
        --settings-link-interact-color: #0056b3;

        --settings-form-label-color: #ffffff;


        --settings-primary-button-background-color: #01b7f1;
        --settings-primary-button-interact-background-color: #0abef7;
        --settings-primary-button-text-color: #ffffff;
        --settings-primary-button-interact-text-color: #ffffff;
        --settings-primary-button-border-rounded-corner-value: 50px;

        --settings-secondary-button-background-color: #555555;
        --settings-secondary-button-interact-background-color: #666666;
        --settings-secondary-button-text-color: #ffffff;
        --settings-secondary-button-interact-text-color: #ffffff;
        --settings-secondary-button-border-rounded-corner-value: 50px;

    /* == settings variables == */



    /* == theme css variables for use in the event theme css == */
    
    --event-theme-logo-image: var(--settings-logo-image, none);
    --event-theme-logo-height: var(--settings-logo-height);
    --event-theme-logo-position: var(--settings-logo-position);
    --event-theme-logo-top-margin: var(--settings-logo-top-margin);
    --event-theme-logo-left-margin: var(--settings-logo-left-margin);
    --event-theme-logo-right-margin: var(--settings-logo-right-margin);
    --event-theme-logo-bottom-margin: var(--settings-logo-bottom-margin);

    --event-theme-background-color: var(--settings-background-color);
    --event-theme-background-primary-image: var(--settings-background-primary-image, none);
    --event-theme-background-secondary-image: var(--settings-background-secondary-image, none);

    --event-theme-header-color: var(--settings-header-color);
    --event-theme-sub-header-color: var(--settings-sub-header-color);
    --event-theme-body-color: var(--settings-body-color);

    --event-theme-link-color: var(--settings-link-color);
    --event-theme-link-interact-color: var(--settings-link-interact-color);

    --event-theme-form-label-color: var(--settings-form-label-color);
    --event-theme-form-input-background-color: var(--settings-form-input-background-color);
    --event-theme-form-input-text-color: var(--settings-form-input-text-color);
    --event-theme-form-input-border-color: var(--settings-form-input-border-color);
    
    --event-theme-form-error-color: var(--settings-form-error-color);

    --event-theme-primary-button-background-color: var(--settings-primary-button-background-color);
    --event-theme-primary-button-text-color: var(--settings-primary-button-text-color);
    --event-theme-primary-button-interact-background-color: var(--settings-primary-button-interact-background-color);
    --event-theme-primary-button-interact-text-color: var(--settings-primary-button-interact-text-color);
    --event-theme-primary-button-border-rounded-corner-value: var(--settings-primary-button-border-rounded-corner-value);

    --event-theme-secondary-button-background-color: var(--settings-secondary-button-background-color);
    --event-theme-secondary-button-text-color: var(--settings-secondary-button-text-color);
    --event-theme-secondary-button-interact-background-color: var(--settings-secondary-button-interact-background-color);
    --event-theme-secondary-button-interact-text-color: var(--settings-secondary-button-interact-text-color);
    --event-theme-secondary-button-border-rounded-corner-value: var(--settings-secondary-button-border-rounded-corner-value);

    /* == theme css variables for use in the event theme css == */

}

    /* == background fill styles - created via the image fill style settings - does not get created if background inactive == */


    :root {
        --event-theme-background-image: none;
    }

    /* == fillPage == */

    .background-image-fill-style {
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
    }

    @media (min-width: 768px) {

    :root {
        --event-theme-background-image: none;
    }

    }

    /* == background fill styles - created via the image fill style settings - does not get created if background inactive == */