:root {
     --main-brand-container-width: 1400px;
    /* Fonts */
     --main-brand-font: "Mulish", sans-serif;
     --main-brand-heading-font: "Merriweather", serif;
     --main-brand-font-size: 18px;
    /* Brand colors */
     --main-brand-color: #17375E;
     --main-brand-secondary-color: #78CCC8;
     --main-brand-body-color: #17375E;
     --main-brand-body-bg-color: #fffff;
     /* icons */
     --main-brand-icons-color: #17375E;
    /* Base */
     --main-brand-card-border: 1px solid #CBD5E1;
     --main-brand-card-bg-color: #FFFFFF;
     --main-brand-card-border-radius: 0px;
     --main-brand-card-shadow: 0 10px 22px rgba(15, 23, 42, .08);
     --main-brand-card-hover-shadow: 0 22px 50px rgba(15, 23, 42, 0.12);
    /* Page Banner */
     --main-brand-tabs-banner-heading-color: #FFFFFF;
    /* Sections/Cards */
     --main-brand-tabs-sections-heading-color: #17375E;
    /* Buttons */
     --main-brand-button-border-radius: 4px;
     --main-brand-button-padding: 10px 18px;
     --main-brand-button-font-weight: 600;
     --main-brand-primary-button-bg: var(--main-brand-color);
     --main-brand-primary-border-color: 1px solid var(--main-brand-color);
     --main-brand-primary-button-color: #F9FAFB;
     --main-brand-primary-button-shadow: 0 18px 36px color-mix(in srgb, var(--main-brand-primary-button-bg) 22%, transparent);
     --main-brand-primary-button-hover-bg: #fff;
     --main-brand-primary-border-hover-color: 1px solid var(--main-brand-color);
     --main-brand-primary-button-hover-color: var(--main-brand-color);
     --main-brand-primary-button-hover-shadow: none;
     --main-brand-secondary-button-bg: #F2F4F7;
     --main-brand-secondary-border-color: 1px solid var(--main-brand-color);
     --main-brand-secondary-button-color: var(--main-brand-color);
     --main-brand-secondary-button-shadow: none;
     --main-brand-secondary-button-hover-bg: #78CCC8;
     --main-brand-secondary-border-hover-color: 1px solid #78CCC8;
     --main-brand-secondary-button-hover-color: #17375E;
     --main-brand-secondary-button-hover-shadow: none;
     --main-brand-portal-button-bg: transparent;
     --main-brand-portal-border-color: 2px solid var(--main-brand-secondary-color);
     --main-brand-portal-button-color: var(--main-brand-secondary-color);
     --main-brand-portal-button-shadow: 0 10px 22px color-mix(in srgb, var(--main-brand-secondary-color, var(--main-brand-color)) 7%, transparent), inset 0 1px 0 color-mix(in srgb, var(--main-brand-card-bg-color, #fff) 96%, transparent);
     --main-brand-portal-button-hover-bg: linear-gradient(180deg, rgba(255, 255, 255, 1), color-mix(in srgb, var(--main-brand-color) 10%, white));
     --main-brand-portal-border-hover-color: 2px solid color-mix(in srgb, var(--main-brand-color) 48%, transparent);
     --main-brand-portal-button-hover-color: var(--main-brand-color);
     --main-brand-portal-button-hover-shadow: 0 16px 30px color-mix(in srgb, var(--main-brand-color) 15%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.98);
    /* Radius */
     --main-brand-border-radius: 4px;
     --main-brand-sm-border-radius: 4px;
     --main-brand-input-border-radius: 8px;
     --main-brand-border-color: #D5D7DA;
     --main-brand-web-form-sec-border-radius: 0px;
     --main-brand-listCard-border-radius: 0px;
    /* Inputs */
     --main-brand-input-label-font-weight: 600;
     --main-brand-input-border-color: 1px solid #CBD5E1;
     --main-brand-input-padding: 10px 14px;
     --main-brand-input-label-color: #17375E;
     --main-brand-input-bg-color: #FFFFFF;
     --main-brand-readOnly-input-bg-color: #F5F7FA;
     --main-brand-readOnly-input-border: 1px solid #D5D7DA;
     --main-brand-file-upload-border-color: 2px dashed #D5D7DA;
     --main-brand-input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 20px rgba(37, 99, 235, 0.05);
    /* Hero */
     --main-brand-hero-bg: #17375E;
     --main-brand-hero-color: #FFFFFF;
    /* Page Banner */
     --main-brand-page-banner-heading-font-size: 36px;
    /* Cards / Forms */
     --main-brand-web-form-sec-bg-color: #FFFFFF;
     --main-brand-web-form-sec-border: 1px solid #CBD5E1;
     --main-brand-web-form-header-bg-color: #17375E;
     --main-brand-web-form-header-color: #FFFFFF;
     --main-brand-web-form-header-border-radius: 0px;
     --main-brand-web-form-badge-bg-color: #78CCC8;
     --main-brand-web-form-badge-color: #17375E;
    /* Tables */
     --main-brand-table-header: #EEF3F6;
     --main-brand-table-header-bg: #EEF3F6;
     --main-brand-table-header-color: #17375E;
    /* Notifications */
     --main-brand-notification-bg-color: #F5F7FA;
     --main-brand-notification-border-color: 1px solid #D5D7DA;
     --main-brand-notification-color: #17375E;
    /* 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: #17375E;
     --main-brand-sidemenu-hover-bg-color: #EEF8F6;
     --main-brand-sidemenu-active-bg-color: #EEF8F6;
     --main-brand-sidemenu-active-color: #17375E;
     --main-brand-sidemenu-active-border-width: 0px 0px 2px 0px;
     --main-brand-sidemenu-active-border-color: solid #78CCC8;
     --main-brand-sidemenu-active-font-weight: 700;
     --main-brand-sidemenu-active-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
    /* Links */
     --main-brand-dashboard-link-color: #17375E;
     --main-brand-dashboard-link-hover-color: #78CCC8;
     --main-brand-portal-link-color: #17375E;
     --main-brand-portal-link-hover-color: #78CCC8;
     --main-brand-primary-link-color: #17375E;
     --main-brand-primary-link-hover-color: #0F2A49;
     --main-brand-secondary-link-color: #17375E;
     --main-brand-secondary-link-hover-color: #78CCC8;
    /* Divider */
     --main-brand-half-divider-bg-color: #78CCC8;
    /* Dashboard / Banner */
     --main-brand-dashboard-hero-banner-bg: #17375E;
     --main-brand-dashboard-hero-banner-color: #FFFFFF;
     --main-brand-dashboard-hero-banner-padding: 0;
     --main-brand-dashboard-hero-banner-border-radius: 0px;
     --main-brand-dashboard-hero-banner-font-weight: 700;
     --main-brand-dashboard-hero-banner-font-size: 30px;
     --main-brand-dashboard-hero-bg: #17375E;
     --main-brand-dashboard-hero-color: #FFFFFF;
     --main-brand-dashboard-hero-padding: 1rem;
     --main-brand-dashboard-hero-border-radius: 0px;
     --main-brand-dashboard-hero-font-weight: 700;
     --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: #F5F7FA;
	 --main-brand-payment-summary-right-card-head-bg: linear-gradient(140deg, color-mix(in srgb, var(--main-brand-color) 15%, white), color-mix(in srgb, var(--main-brand-secondary-color) 40%, white));
     --main-brand-payment-summary-card-border: 1px solid #D5D7DA;
     --main-brand-payment-summary-selected-card-shadow: 0 0 0 1px color-mix(in srgb, var(--main-brand-color, #E64E00) 24%, transparent), 0 12px 24px color-mix(in srgb, var(--main-brand-color, #E64E00) 18%, transparent);
    /* Directory */
     --main-brand-directory-hero-content-bg: rgba(23, 55, 94, 0.72);
     --main-brand-directory-hero-content-Heading-color: #FFFFFF;
     --main-brand-directory-hero-content-subtext-color: #FFFFFF;
     --main-brand-directory-badge1-bg: #B7E7DD;
     --main-brand-directory-badge1-color: #17375E;
     --main-brand-directory-badge2-bg: #17375E;
     --main-brand-directory-badge2-color: #FFFFFF;
    /* List Cards */
     --main-brand-listCard-bg-color: #FFFFFF;
     --main-brand-listCard-border: #D5D7DA;
    /* Delete Dialog */
     --main-brand-delete-dialog-model-header-bg: #17375E;
     --main-brand-delete-dialog-model-header-color: #FFFFFF;
    /* Event / Grid */
     --main-brand-event-view-bg-color: #EEF3F6;
     --main-brand-grid-img-border-radius: 0px;
     --main-brand-grid-img-label: 0px 0px 12px 0px;
    /* Collapse Icon */
     --main-brand-collapse-icon-bg-color: #FFFFFF;
     --main-brand-collapse-icon-color: #17375E;
     --main-brand-collapse-icon-border-radius: 0;
     --main-brand-collapse-icon-padding: 5px;
     --main-brand-collapse-icon-hover-bg-color: #EEF8F6;
     --main-brand-collapse-icon-hover-color: #17375E;
     --main-brand-collapse-icon-hover-border-radius: 4px;
     --main-brand-collapse-icon-hover-padding: 5px;
    /* Toggle */
     --main-brand-toggle-icon-bg-color: #B7E7DD;
     --main-brand-toggle-icon-color: #17375E;
     --main-brand-toggle-icon-shadow: 0 16px 34px color-mix(in srgb, var(--main-brand-toggle-icon-bg-color) 28%, transparent);
     --main-brand-toggle-icon-hover-shadow: 0 16px 32px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -1px 0 rgba(255,255,255,0.10);
    /* Sections */
     --main-brand-card-preview-intro-color: #17375E;
     --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: var(--main-brand-heading-font);
    /* 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 #D9E1E8;
     --main-brand-section-action-tray-border-radius: var(--main-brand-card-border-radius);
     --main-brand-section-action-tray-bg: transparent;
     --main-brand-section-action-tray-shadow: none;
    /* Gradient Helpers */
     --main-brand-login-card-glow-right-top: color-mix(in srgb, var(--main-brand-color) 16%, transparent);
     --main-brand-login-card-glow-bottom-left: color-mix(in srgb, var(--main-brand-secondary-color) 14%, transparent);
     --main-brand-social-login-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 24px rgba(15, 23, 42, .05);
     --main-brand-social-login-card-hover-border-color: var(--main-brand-color);
     --main-brand-social-login-card-hover-shadow: 0 18px 34px color-mix(in srgb, var(--main-brand-color) 13%, transparent);
     --main-brand-social-auth-card-bg-gradient: linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--main-brand-color, #E64E00) 10%, transparent) 100%);
    /* Thanks SVG */
     --main-brand-thanks-svg-could-bg: #78CCC8;
     --main-brand-thanks-svg-plane-mid-cloud-bg: #DDF4EF;
     --main-brand-thanks-svg-plane-outline: #17375E;
     --main-brand-thanks-svg-plane-triangle-outlined-solid: #17375E;
     --main-brand-thanks-svg-plane-triangle-dark: #0F2A49;
}