:root {
    /* ========================================
       Container / Fonts
       ======================================== */
    --main-brand-container-width: 1400px;
    --main-brand-font: "Source Sans 3", sans-serif;
    --main-brand-heading-font: "Literata", serif;
    --main-brand-font-size: 18px;


    /* ========================================
       Brand Colours
       ======================================== */
    --main-brand-color: #3D2499;
    --main-brand-secondary-color: #005F9D;
    --main-brand-body-color: #0D0916;
    --main-brand-body-bg-color: #FFFFFF;
    --main-brand-icons-color: #0D0916;


    /* ========================================
       Base / Cards
       ======================================== */
    --main-brand-card-border: 1px solid #E5E6EB;
    --main-brand-card-bg-color: #FFFFFF;
    --main-brand-card-border-radius: 15px;
    --main-brand-card-shadow: none;
    --main-brand-card-hover-shadow: none;


    /* ========================================
       Page Banner
       ======================================== */
    --main-brand-tabs-banner-heading-color: #0D0916;
    --main-brand-page-banner-heading-font-size: 36px;
    --main-brand-tabs-sections-heading-color: #0D0916;


    /* ========================================
       Buttons
       ======================================== */
    --main-brand-button-border-radius: 10px;
    --main-brand-button-padding: 10px 15px;
    --main-brand-button-font-weight: 600;

    /* Primary */
    --main-brand-primary-button-bg: #3D2499;
    --main-brand-primary-border-color: 1px solid #3D2499;
    --main-brand-primary-button-color: #FFFFFF;
    --main-brand-primary-button-shadow: none;
    --main-brand-primary-button-hover-bg: #005F9D;
    --main-brand-primary-border-hover-color: 1px solid #005F9D;
    --main-brand-primary-button-hover-color: #FFFFFF;
    --main-brand-primary-button-hover-shadow: none;

    /* Secondary */
    --main-brand-secondary-button-bg: transparent;
    --main-brand-secondary-border-color: 1px solid #0D0916;
    --main-brand-secondary-button-color: #0D0916;
    --main-brand-secondary-button-shadow: none;
    --main-brand-secondary-button-hover-bg: #3D2499;
    --main-brand-secondary-border-hover-color: 1px solid #3D2499;
    --main-brand-secondary-button-hover-color: #FFFFFF;
    --main-brand-secondary-button-hover-shadow: none;

    /* Portal */
    --main-brand-portal-button-bg: #005F9D;
    --main-brand-portal-border-color: 1px solid #005F9D;
    --main-brand-portal-button-color: #FFFFFF;
    --main-brand-portal-button-shadow: none;
    --main-brand-portal-button-hover-bg: #FFFFFF;
    --main-brand-portal-border-hover-color: 1px solid #005F9D;
    --main-brand-portal-button-hover-color: #005F9D;
    --main-brand-portal-button-hover-shadow: none;


    /* ========================================
       Radius / Borders
       ======================================== */
    --main-brand-border-radius: 15px;
    --main-brand-sm-border-radius: 0px;
    --main-brand-input-border-radius: 10px;
    --main-brand-border-color: #E5E6EB;
    --main-brand-web-form-sec-border-radius: 10px;
    --main-brand-listCard-border-radius: 15px;


    /* ========================================
       Inputs / Forms
       ======================================== */
    --main-brand-input-label-font-weight: 400;
    --main-brand-input-border-color: 1px solid #A4A7AF;
    --main-brand-input-padding: 10px;
    --main-brand-input-label-color: #0D0916;
    --main-brand-input-bg-color: #FFFFFF;
    --main-brand-readOnly-input-bg-color: #CCCCCC;
    --main-brand-readOnly-input-border: 1px solid #CCCCCC;
    --main-brand-input-shadow: none;
    --main-brand-field-instruction-color:
        color-mix(
            in srgb,
            #0D0916,
            white 30%
        );
    --main-brand-file-upload-border-color: 2px dashed #CCCCCC;


    /* ========================================
       Hero
       ======================================== */
    --main-brand-hero-bg:
		linear-gradient(
		180deg,
		rgba(0, 102, 153, 0) 0%,
		rgba(0, 102, 153, 0.09) 50%,
		rgba(0, 102, 153, 0.09) 100%
		);
    --main-brand-hero-color: #FFFFFF;


    /* ========================================
       Web Forms
       ======================================== */
    --main-brand-web-form-sec-bg-color:
        linear-gradient(
            180deg,
            rgba(61,36,153,0) 0%,
            rgba(61,36,153,0.09) 50%,
            rgba(61,36,153,0.09) 100%
        );
    --main-brand-web-form-sec-border: none;
    --main-brand-web-form-header-bg-color: #0D0916;
    --main-brand-web-form-header-color: #FFFFFF;
    --main-brand-web-form-header-border-radius: 10px 10px 0px 0px;
    --main-brand-web-form-badge-bg-color: #3D2499;
    --main-brand-web-form-badge-color: #FFFFFF;


    /* Existing Member Form Variables */
    --main-brand-member-form-sec-bg-color:
        var(--main-brand-web-form-sec-bg-color);
    --main-brand-member-form-sec-border-radius: 10px;
    --main-brand-member-form-header-bg-color: #0D0916;
    --main-brand-member-form-header-color: #FFFFFF;
    --main-brand-member-form-header-border-radius: 10px 10px 0px 0px;
    --main-brand-member-form-badge-bg-color: #3D2499;
    --main-brand-member-form-badge-color: #FFFFFF;
    --main-brand-member-form-grid-bg-color: #FFFFFF;


    /* ========================================
       Tables
       ======================================== */
    --main-brand-table-header: #EAECF0;
    --main-brand-table-header-bg: #EAECF0;
    --main-brand-table-header-color: #0D0916;


    /* ========================================
       Notifications
       ======================================== */
    --main-brand-notification-bg-color: #EAECF0;
    --main-brand-notification-border-color: 1px solid #E5E6EB;
    --main-brand-notification-color: #0D0916;


    /* ========================================
       Side Menu
       ======================================== */
    --main-brand-side-menu-bg-color: #FFFFFF;
    --main-brand-sidemenu-border-radius: 0px;
    --main-brand-sidemenu-padding: 8px 0px;
    --main-brand-sidemenu-color: #0D0916;
    --main-brand-sidemenu-font-weight: 400;
    --main-brand-sidemenu-hover-bg-color: #F3F1FA;
    --main-brand-sidemenu-active-bg-color: transparent;
    --main-brand-sidemenu-active-color: #FFFFFF;
    --main-brand-sidemenu-active-border-width: 0px;
    --main-brand-sidemenu-active-border-color: solid #3D2499;
    --main-brand-sidemenu-active-font-weight: 600;
    --main-brand-sidemenu-active-shadow: none;


    /* ========================================
       Links
       ======================================== */
    --main-link-color: #3D2499;
    --main-link-weight: 600;
    --main-link-decoration: none;
    --main-link-hover: underline;
    --main-brand-link-color: #0D0916;
    --main-brand-link-hover-color: #3D2499;
    --main-brand-dashboard-link-color: #3D2499;
    --main-brand-dashboard-link-hover-color: #005F9D;
    --main-brand-portal-link-color: var();
    --main-brand-portal-link-color: var();
    --main-brand-portal-link-color: var(-);
    --main-brand-portal-link-color: var(--);
    --main-brand-portal-link-color: var(--main-brand-body-color);
    --main-brand-secondary-link-hover-color: #3D2499;


    /* ========================================
       Divider
       ======================================== */
    --main-brand-half-divider-bg-color: #005F9D;


    /* ========================================
       Dashboard / Banner
       ======================================== */
    --main-brand-dashboard-hero-banner-bg: #3D2499;
    --main-brand-dashboard-hero-banner-color: #FFFFFF;
    --main-brand-dashboard-hero-banner-padding: 0;
    --main-brand-dashboard-hero-banner-border-radius: 15px;
    --main-brand-dashboard-hero-banner-font-weight: 600;
    --main-brand-dashboard-hero-banner-font-size: 30px;
    --main-brand-dashboard-hero-bg: #3D2499;
    --main-brand-dashboard-hero-color: #FFFFFF;
    --main-brand-dashboard-hero-padding: 1rem;
    --main-brand-dashboard-hero-border-radius: 15px;
    --main-brand-dashboard-hero-font-weight: 600;
    --main-brand-dashboard-hero-font-size: 22px;
    --main-brand-dashboard-hero-card-bg:
        rgba(255,255,255,0.96);


    /* ========================================
       Payment
       ======================================== */
    --main-brand-payment-summary-card-bg: #FFFFFF;
    --main-brand-payment-summary-right-card-head-bg:
        linear-gradient(
            140deg,
            #F3F1FA,
            #FFF8DC
        );
    --main-brand-payment-summary-card-border:
        1px solid #E5E6EB;
    --main-brand-payment-summary-selected-card-shadow:
        0 0 0 1px rgba(61,36,153,0.24),
        0 12px 24px rgba(61,36,153,0.12);


    /* ========================================
       Directory
       ======================================== */
    --main-brand-directory-hero-content-bg:
        rgba(61,36,153,0.72);
    --main-brand-directory-hero-content-Heading-color: #FFFFFF;
    --main-brand-directory-hero-content-subtext-color: #FFFFFF;
    --main-brand-directory-badge1-bg: #F3F1FA;
    --main-brand-directory-badge1-color: #3D2499;
    --main-brand-directory-badge2-bg: #005F9D;
    --main-brand-directory-badge2-color: #FFFFFF;


    /* ========================================
       List Cards
       ======================================== */
    --main-brand-listCard-bg-color: #FFFFFF;
    --main-brand-listCard-border: #E5E6EB;


    /* ========================================
       Delete Dialog
       ======================================== */
    --main-brand-delete-dialog-model-header-bg: #3D2499;
    --main-brand-delete-dialog-model-header-color: #FFFFFF;


    /* ========================================
       Event / Grid
       ======================================== */
    --main-brand-event-view-bg-color: #EAECF0;
    --main-brand-grid-img-border-radius: 15px;
    --main-brand-grid-img-label: 0px 0px 12px 0px;


    /* ========================================
       Collapse Icon
       ======================================== */
    --main-brand-collapse-icon-bg-color: #FFFFFF;
    --main-brand-collapse-icon-color: #3D2499;
    --main-brand-collapse-icon-border-radius: 0;
    --main-brand-collapse-icon-padding: 5px;
    --main-brand-collapse-icon-hover-bg-color: #F3F1FA;
    --main-brand-collapse-icon-hover-color: #3D2499;
    --main-brand-collapse-icon-hover-border-radius: 4px;
    --main-brand-collapse-icon-hover-padding: 5px;


    /* ========================================
       Toggle
       ======================================== */
    --main-brand-toggle-icon-bg-color: #005F9D;
    --main-brand-toggle-icon-color: #FFFFFF;
    --main-brand-toggle-icon-shadow: 0;
    --main-brand-toggle-icon-hover-shadow:
        0 14px 28px rgba(61,36,153,0.15);


    /* ========================================
       Sections
       ======================================== */
    --main-brand-card-preview-intro-color: #3D2499;
    --main-brand-card-preview-intro-font-weight: 600;
    --main-brand-section-heading-font-weight: 700;
    --main-brand-section-heading-font-size: 28px;
    --main-brand-section-heading-font: "Literata", serif;


    /* ========================================
       Section Actions Tray
       ======================================== */
    --main-brand-section-action-tray-padding: 16px 18px;
    --main-brand-section-action-tray-margin-top: 20px;
    --main-brand-section-action-tray-border: 1px solid #E5E6EB;
    --main-brand-section-action-tray-border-radius: 15px;
    --main-brand-section-action-tray-bg: transparent;
    --main-brand-section-action-tray-shadow: none;


    /* ========================================
       Login / Social
       ======================================== */
    /* --main-brand-login-card-glow-right-top:
        rgba(61,36,153,0.10); */
    /* --main-brand-login-card-glow-bottom-left:
        rgba(255,189,0,0.10); */
    --main-brand-social-login-card-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        0 12px 24px rgba(13,9,22,0.05);
    --main-brand-social-login-card-hover-border-color:
        #3D2499;
    --main-brand-social-login-card-hover-shadow:
        0 18px 34px rgba(61,36,153,0.13);
    /* --main-brand-social-auth-card-bg-gradient:
        linear-gradient(
            135deg,
            transparent 0%,
            rgba(61,36,153,0.10) 100%
        ); */


    /* ========================================
       Thanks SVG
       ======================================== */
    --main-brand-thanks-svg-could-bg: #3D2499;
    --main-brand-thanks-svg-plane-mid-cloud-bg: #D8D3EB;
    --main-brand-thanks-svg-plane-outline: #3D2499;
    --main-brand-thanks-svg-plane-triangle-outlined-solid: #3D2499;
    --main-brand-thanks-svg-plane-triangle-dark: #281D52;
}