:root {

    /* Font Sizes */
    --font-size-base: 1rem; /* based on html / html-mobile font size */
    --font-size-base-extended: 1.5px;
    --padding-base-extended: 1.5px;

    --font-size-base-3xs: calc(var(--font-size-base) - 3px);
    --font-size-base-2xs: calc(var(--font-size-base) - 2px);
    --font-size-base-xs: calc(var(--font-size-base) - 1px);
    --font-size-base-sm: var(--font-size-base);
    --font-size-base-md: calc(var(--font-size-base) + 1px);
    --font-size-base-lg: calc(var(--font-size-base) + 2px);
    --font-size-base-xl: calc(var(--font-size-base) + 3px);
    --font-size-base-2xl: calc(var(--font-size-base) + 4px);
    --font-size-base-3xl: calc(var(--font-size-base) + 5px);
    --font-size-base-4xl: calc(var(--font-size-base) + 6px);
    --font-size-base-5xl: calc(var(--font-size-base) + 7px);

    --font-size-3xs: calc(var(--font-size-base-3xs) + var(--font-size-base-extended));
    --font-size-2xs: calc(var(--font-size-base-2xs) + var(--font-size-base-extended));
    --font-size-xs: calc(var(--font-size-base-xs) + var(--font-size-base-extended));
    --font-size-sm: calc(var(--font-size-base-sm) + var(--font-size-base-extended));
    --font-size-md: calc(var(--font-size-base-md) + var(--font-size-base-extended));
    --font-size-lg: calc(var(--font-size-base-lg) + var(--font-size-base-extended));
    --font-size-xl: calc(var(--font-size-base-xl) + var(--font-size-base-extended));
    --font-size-2xl: calc(var(--font-size-base-2xl) + var(--font-size-base-extended));
    --font-size-3xl: calc(var(--font-size-base-3xl) + var(--font-size-base-extended));
    --font-size-4xl: calc(var(--font-size-base-4xl) + var(--font-size-base-extended));
    --font-size-5xl: calc(var(--font-size-base-5xl) + var(--font-size-base-extended));

    --html-font-size: 12px;
    --html-mobile-font-size: 14px;
    --body-font-size: var(--font-size-sm);

    --smallish-font-size: 80%;
    --xsmall-font-size: 70%;

    --topbar-mobile-font-size: var(--font-size-lg);
    --topbar-company-label-font-size: var(--font-size-3xs);
    --topbar-beta-toggle-font-size: var(--body-font-size);
    --topbar-navbar-brand-first-font-size: var(--font-size-xl);
    --topbar-navbar-brand-last-font-size: var(--font-size-lg);
    --topbar-app-map-content-font-size: var(--font-size-2xl);

    --app-name-title-font-size: var(--font-size-4xl);
    --app-name-title-mobile-font-size: var(--font-size-3xl);
    --app-name-subtitle-font-size: var(--font-size-lg);

    --secondary-menu-font-size: var(--font-size-lg);
    --secondary-menu-myhome-font-size: var(--body-font-size);

    --generative-response-modal-font-size: var(--font-size-4xl);
    --chars-remaining-font-size: var(--font-size-xs);
    --col-form-label-font-size: var(--body-font-size);
    --single-record-odd-font-size: var(--body-font-size);
    --form-element-font-size: var(--body-font-size);

    --modal-font-size: var(--body-font-size);
    --modal-title-font-size: var(--font-size-4xl);

    --input-placeholder-font-size: var(--font-size-xs);

    --gs-text-xsmall-font-size: var(--font-size-xs);
    --gs-text-small-font-size: var(--font-size-sm);
    --gs-text-med-font-size: var(--font-size-md);
    --gs-text-large-font-size: var(--font-size-lg);
    --gs-text-xlarge-font-size: var(--font-size-xl);

    --thumbnail-label-font-size: var(--font-size-xl);

    --layout-selected-font-size: var(--font-size-xl);

    --step-three-labels-font-size: var(--font-size-lg);

    --insight-tab-label-font-size: var(--body-font-size);

    /* Padding & Font Sizes */

    /* Bootstrap */
    --btn-padding-base-y: .35rem;
    --btn-padding-base-x: .75rem;
    --btn-padding-y: calc(var(--btn-padding-base-y) + var(--padding-base-extended));
    --btn-padding-x: calc(var(--btn-padding-base-x) + var(--padding-base-extended));
    --btn-font-size: var(--body-font-size);

    --btn-lg-padding-base-y: .35rem;
    --btn-lg-padding-base-x: .75rem;
    --btn-lg-padding-y: calc(var(--btn-lg-padding-base-y) + var(--padding-base-extended));
    --btn-lg-padding-x: calc(var(--btn-lg-padding-base-x) + var(--padding-base-extended));
    --btn-lg-font-size: var(--font-size-xl);

    --btn-sm-padding-base-y: .12rem;
    --btn-sm-padding-base-x: .5rem;
    --btn-sm-padding-y: calc(var(--btn-sm-padding-base-y) + var(--padding-base-extended));
    --btn-sm-padding-x: calc(var(--btn-sm-padding-base-x) + var(--padding-base-extended));
    --btn-sm-font-size: var(--font-size-xs);

    --dropdown-header-padding-base-y: .5rem;
    --dropdown-header-padding-y: calc(var(--dropdown-header-padding-base-y) + var(--padding-base-extended));
    --dropdown-header-font-size: var(--font-size-2xs);

    --dropdown-item-padding-base-y: .25rem;
    --dropdown-item-padding-base-x: 1.5rem;
    --dropdown-item-padding-y: calc(var(--dropdown-item-padding-base-y) + var(--padding-base-extended));
    --dropdown-item-padding-x: calc(var(--dropdown-item-padding-base-x) + var(--padding-base-extended));
    --dropdown-font-size: var(--body-font-size);

    --nav-link-padding-base-y: .5rem;
    --nav-link-padding-base-x: 1rem;
    --nav-link-padding-y: calc(var(--nav-link-padding-base-y) + var(--padding-base-extended));
    --nav-link-padding-x: calc(var(--nav-link-padding-base-x) + var(--padding-base-extended));

    --tooltip-font-size: var(--body-font-size);

    --table-mobile-font-size: var(--body-font-size);

    --card-header-font-size: var(--font-size-md);
    --card-header-gennyai-font-size: var(--font-size-xs);

    --tabs-header-font-size: var(--body-font-size);

    /* Plugins */
    --font-awesome-2xs-font-size: .625rem;
    --font-awesome-xs-font-size: .75rem;
    --font-awesome-sm-font-size: .875rem;
    --font-awesome-150-font-size: 1.15rem;
    --font-awesome-md-150-font-size: 1.5rem;
    --font-awesome-8x-font-size: 8.3em;
    
    --dt-btn-padding-base-y: .15rem;
    --dt-btn-padding-base-x: .45rem;
    --dt-btn-padding-y: calc(var(--dt-btn-padding-base-y) + var(--padding-base-extended));
    --dt-btn-padding-x: calc(var(--dt-btn-padding-base-x) + var(--padding-base-extended));
    --dt-btn-font-size: var(--font-size-2xs);
    --dt-pagination-font-size: var(--font-size-md);

    --date-picker-font-size: var(--font-size-xs);

    /* Heights */
    --form-element-height-base: 2.25rem;
    --form-element-height-base-extended: 0px;
    --input-height: calc(var(--form-element-height-base) + var(--form-element-height-base-extended));
    --select-height: calc(var(--form-element-height-base) + var(--form-element-height-base-extended));
}