/*
 * Ionic CSS Variables
 * ----------------------------------------------------------------------------
 * Ionic Variables and Theming. For more info, please see:
 * https://ionicframework.com/docs/theming/colors
 */
/*
 *  For example, to add a new color called "favorite":
 *  :root {
 *   --ion-color-favorite: #69bb7b;
 *   --ion-color-favorite-rgb: 105,187,123;
 *   --ion-color-favorite-contrast: #ffffff;
 *   --ion-color-favorite-contrast-rgb: 255,255,255;
 *   --ion-color-favorite-shade: #5ca56c;
 *   --ion-color-favorite-tint: #78c288;
 * }
 *
 * Create a new class that uses these CSS variables.
 * The class must be written in the format,
 *   .ion-color-{COLOR} where {COLOR} is the name of the color to add:
 *   .ion-color-favorite {
 *   --ion-color-base: var(--ion-color-favorite);
 *   --ion-color-base-rgb: var(--ion-color-favorite-rgb);
 *   --ion-color-contrast: var(--ion-color-favorite-contrast);
 *   --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
 *   --ion-color-shade: var(--ion-color-favorite-shade);
 *   --ion-color-tint: var(--ion-color-favorite-tint);
 * }
 *
 * Use:
 * <ion-button color="favorite">Favorite</ion-button>
 */
:root {
  /* primary color */
  --ion-color-custom-black: #333333;
  --ion-color-custom-dark-black: #3a3a3a;
  --ion-color-custom-light-black: #424242;
  --ion-color-custom-white: #ffffff;

  /* gold */
  --ion-color-custom-light-gold: #fef9f6;
  --ion-color-custom-dark-gold: #958600;
  --ion-color-custom-satin-sheen-gold: #d2a03c;

  /* blue */
  --ion-color-custom-dark-blue: #003c7b;
  --ion-color-custom-blue: #0a73dd;
  --ion-color-custom-cyan-blue: #0d6ccb;
  --ion-color-custom-deep-blue: #0b3b6d;
  --ion-color-custom-dull-blue: #336395;
  --ion-color-custom-light-blue: #b3c4d7;
  --ion-color-custom-hyper-light-blue: #dfeefd;
  --ion-color-custom-ultra-light-blue: #e7f3ff;
  --ion-color-custom-yale-blue: #00479d;
  --ion-color-custom-endeavour-blue: #0051aa;
  --ion-color-custom-mariner-blue: #1e64c8;

  /* pink */
  --ion-color-custom-pink: #fcecec;
  --ion-color-custom-dark-pink: #edd3c4;
  --ion-color-custom-dark-pink-orange: #edd3c5;
  --ion-color-custom-light-pink: #fcebee;
  --ion-color-custom-ultra-dark-pink: #bc3b53;
  --ion-color-custom-soft-pink: #ea758b;
  --ion-color-custom-ultra-soft-pink: #f0b7c2;

  /* green */
  --ion-color-custom-dark-green: #00341d;
  --ion-color-custom-green: #004831;
  --ion-color-custom-fluorescent-green: #c4d700;
  --ion-color-custom-muddy-green: #3d7764;
  --ion-color-custom-opal-green: #bcd2cb;
  --ion-color-custom-light-green: #e0f0b7;
  --ion-color-custom-ice-green: #e2f2ed;
  --ion-color-custom-ultra-light-green: #f3f9e2;

  /* orange */
  --ion-color-custom-orange: #ea5504;
  --ion-color-custom-light-orange: #f8ccb4;
  --ion-color-custom-bright-orange: #ffe7da;
  --ion-color-custom-super-orange: #ffebe0;
  --ion-color-custom-ultra-light-orange: #fff5ef;
  --ion-color-custom-light-red-orange: #ffe8dc;
  --ion-color-custom-bright-red-orange: #ffeee5;
  --ion-color-custom-hyper-light-orange: #fff0e8;
  --ion-color-custom-light-dark-orange: #d28254;
  --ion-color-custom-shallow-orange: #ee7736;
  --ion-color-custom-dark-orange: #d85209;
  --ion-color-custom-menu-orange: #f87d3b;
  --ion-color-custom-member-top-orange-light: #f6840c;
  --ion-color-custom-member-top-orange-middle: #ee6306;
  --ion-color-custom-point-orange: #ed6003;
  --ion-color-custom-brown: #954800;
  --ion-color-custom-watusi-orange: #ffd9c4;

  /* yellow */
  --ion-color-custom-yellow: #ffbd2f;
  --ion-color-custom-bright-yellow: #ffe501;
  --ion-color-custom-light-yellow: #fff9c4;
  --ion-color-custom-hyper-light-yellow: #fffbda;
  --ion-color-custom-golden-yellow: #ffe100;
  --ion-color-custom-cream-yellow: #ffffcc;
  --ion-color-custom-brass-yellow: #b9ad40;
  --ion-color-custom-supernova-yellow: #ffc800;
  --ion-color-custom-festival-yellow: #ffed69;
  --ion-color-custom-rose-yellow: #fff000;
  --ion-color-custom-pale-canary-yellow: #ffff99;
  --ion-color-custom-antique-bronze: #625909;

  /* red */
  --ion-color-custom-red: #ec1919;
  --ion-color-custom-light-red: #ea4362;
  --ion-color-custom-ultra-light-red: #ffece2;

  /* gray */
  --ion-color-custom-gray: #eeeeee;
  --ion-color-custom-light-gray: #f5f6f8;
  --ion-color-custom-mud-gray: #bbbbbb;
  --ion-color-custom-dark-gray: #e2e2e2;
  --ion-color-custom-ultra-light-gray: #f0f3f5;
  --ion-color-custom-repayment-gray: #f7f7f7;
  --ion-color-custom-beige-gray: #b5aeaa;
  --ion-color-custom-orange-gray: #94857d;
  --ion-color-custom-spanish-gray: #999999;
  --ion-color-custom-silver-gray: #bfbfbf;

  /* opacity */
  --ion-color-custom-white-opacity: rgba(255, 255, 255, 0.2);
  --ion-color-custom-light-black-opacity: rgba(0, 0, 0, 0.15);
  --ion-color-custom-black-opacity: rgba(0, 0, 0, 0.5);
  --ion-color-custom-middle-light-black-opacity: rgba(0, 0, 0, 0.3);
  --ion-color-custom-light-gold-opacity: rgba(255, 245, 239, 0.5);
  --ion-color-custom-yale-blue-opacity001: rgba(0, 71, 157, 0.01);
  --ion-color-custom-yale-blue-opacity005: rgba(0, 71, 157, 0.05);
  --ion-color-custom-yale-blue-opacity025: rgba(0, 71, 157, 0.25);
  --ion-color-custom-yale-blue-opacity050: rgba(0, 71, 157, 0.5);
  --ion-color-custom-silver-gray-opacity005: rgba(191, 191, 191, 0.05);
  --ion-color-custom-silver-gray-opacity030: rgba(191, 191, 191, 0.3);
  --ion-color-custom-silver-gray-opacity070: rgba(191, 191, 191, 0.7);
  --ion-color-custom-cream-yellow-opacity095: rgb(255, 255, 204, 0.95);


  /************* ionic default button color *****************/
  /* main */
  --ion-color-main: var(--ion-color-custom-golden-yellow);
  --ion-color-main-rgb: 234, 85, 4;
  --ion-color-main-contrast: #ffffff;
  --ion-color-main-contrast-rgb: 255, 255, 255;
  --ion-color-main-shade: #ce4b04;
  --ion-color-main-tint: var(--ion-color-custom-yale-blue);
  /* accent */
  --ion-color-accent: var(--ion-color-custom-yale-blue);
  --ion-color-accent-rgb: 0, 60, 123;
  --ion-color-accent-contrast: #ffffff;
  --ion-color-accent-contrast-rgb: 255, 255, 255;
  --ion-color-accent-shade: #00356c;
  --ion-color-accent-tint: #1a5088;
  /* error */
  --ion-color-error: var(--ion-color-custom-red);
  --ion-color-error-rgb: 236, 25, 25;
  --ion-color-error-contrast: #ffffff;
  --ion-color-error-contrast-rgb: 255, 255, 255;
  --ion-color-error-shade: #d01616;
  --ion-color-error-tint: #ee3030;
  /* link */
  --ion-color-link: var(--ion-color-custom-blue);
  --ion-color-link-rgb: 10, 115, 221;
  --ion-color-link-contrast: #ffffff;
  --ion-color-link-contrast-rgb: 255, 255, 255;
  --ion-color-link-shade: #0965c2;
  --ion-color-link-tint: #2381e0;
  /* disabled */
  --ion-color-disabled: var(--ion-color-step-150);
  --ion-color-disabled-rgb: 220, 220, 220;
  --ion-color-disabled-contrast: #000000;
  --ion-color-disabled-contrast-rgb: 0, 0, 0;
  --ion-color-disabled-shade: #c2c2c2;
  --ion-color-disabled-tint: #e0e0e0;
  /* footer */
  --ion-color-footer: var(--ion-color-step-100);
  --ion-color-footer-rgb: 220, 220, 220;
  --ion-color-footer-contrast: var(--ion-color-custom-black);
  --ion-color-footer-contrast-rgb: 0, 0, 0;
  --ion-color-footer-shade: #c2c2c2;
  --ion-color-footer-tint: #e0e0e0;
  /************* ionic custumized preset button color *****************/
  /************* gray scale color color *****************/
  --ion-color-step-100: #f6f5f3;
  --ion-color-step-150: #dcdcdc;
  --ion-color-step-400: #9c9c9c;
  --ion-color-step-650: #5b5b5b;
  --ion-color-step-800: #333333;
  --ion-color-step-1000: #000000;
  /************* branding theme *****************/
  /* text color */
  --ion-default-text-color: var(--ion-color-custom-black);
  --ion-form-supplement-text-color: var(--ion-color-step-650);
  --ion-accordion-image-text-color: var(--ion-color-step-650);
  --ion-label-text-color: var(--ion-color-custom-yale-blue);
  --ion-tab-box-text-color: var(--ion-color-custom-yale-blue);

  /* background color */
  --ion-default-bg-color: var(--ion-color-step-100);
  --ion-accordion-white-bg-color: var(--ion-color-custom-white);
  --ion-modal-backdrop-color: var(--ion-color-custom-middle-light-black-opacity);
  --ion-header-accent-bg-color: var(--ion-color-custom-yale-blue);

  /* border color */
  --ion-form-border-color: var(--ion-color-step-150);
  --ion-separator-border-color: var(--ion-color-step-150);
  --ion-boxgroup-border-color: var(--ion-color-step-150);
  --ion-table-border-color: var(--ion-color-custom-gray);
  --ion-tab-border-color: var(--ion-color-custom-gray);
  --ion-footer-border-color: var(--ion-color-custom-dark-gray);
  --ion-footer-border-line-color: var(--ion-color-custom-golden-yellow);
  --ion-info-box-border-color: var(--ion-color-custom-golden-yellow);
  --ion-box-calc-border-color: var(--ion-color-custom-golden-yellow);
  --ion-header-border-color: var(--ion-color-step-150);

  /* button */
  /* primary */
  --ion-primary-button-bg-color: var(--ion-color-custom-golden-yellow);
  --ion-primary-button-text-color: var(--ion-color-custom-yale-blue);
  --ion-primary-button-border-color: var(--ion-color-custom-yale-blue);
  --ion-primary-button-shadow-bg-color: var(--ion-color-custom-mud-gray);
  --ion-primary-button-focused-bg-color: var(--ion-color-custom-rose-yellow);
  --ion-primary-button-pressed-bg-color: var(--ion-color-custom-supernova-yellow);

  /* secondary */
  --ion-secondary-button-bg-color: var(--ion-color-custom-white);
  --ion-secondary-button-text-color: var(--ion-color-custom-yale-blue);
  --ion-secondary-button-border-color: var(--ion-color-custom-yale-blue);
  --ion-secondary-button-shadow-bg-color: var(--ion-color-custom-mud-gray);
  --ion-secondary-button-focused-bg-color: var(--ion-color-custom-yale-blue-opacity005);
  --ion-secondary-button-pressed-bg-color: var(--ion-color-custom-yale-blue-opacity025);

  /* square */
  --ion-square-button-bg-color: var(--ion-color-custom-white);
  --ion-square-button-text-color: var(--ion-color-custom-yale-blue);
  --ion-square-button-border-color: var(--ion-color-custom-yale-blue);
  --ion-square-button-shadow-bg-color: var(--ion-color-custom-yale-blue);
  --ion-square-button-focused-bg-color: var(--ion-color-custom-yale-blue-opacity005);
  --ion-square-button-pressed-bg-color: var(--ion-color-custom-yale-blue-opacity025);

  /* link */
  --ion-link-text-color: var(--ion-color-custom-blue);
  --ion-link-visited-text-color: var(--ion-color-custom-dark-blue);

  /* icon color */
  --ion-accordion-icon-color: var(--ion-color-step-400);
  --ion-call-box-chevron-icon-color: var(--ion-color-step-400);
  --ion-accordion-box-icon-color: var(--ion-color-custom-yale-blue);
  --ion-step-icon-color: var(--ion-color-custom-golden-yellow);
  --ion-call-icon-color: var(--ion-color-custom-yale-blue);

  /* tag */
  --ion-tag-base-bg-color: var(--ion-color-custom-golden-yellow);
  --ion-tag-base-border-color: var(--ion-color-custom-golden-yellow);
  --ion-tag-base-text-color: var(--ion-color-custom-yale-blue);
  --ion-tag-square-merit-text-color: var(--ion-color-step-650);
  --ion-tag-square-merit-inner-text-color: var(--ion-color-custom-yale-blue);
  --ion-tag-circle-bg-color: var(--ion-color-custom-golden-yellow);
  --ion-tag-circle-border-color: var(--ion-color-custom-golden-yellow);
  --ion-tag-circle-text-color: var(--ion-color-custom-yale-blue);

  /* graph_wrap */
  --ion-ex-limit-bg-color: var(--ion-color-custom-hyper-light-blue);
  --ion-ex-spend-bg-color: var(--ion-color-custom-cream-yellow);
  --ion-ex-limit-border-color: var(--ion-color-custom-yale-blue);
  --ion-ex-spend-border-color: var(--ion-color-custom-golden-yellow);
  --ion-ex-limit-text-color: var(--ion-color-custom-yale-blue);
  --ion-ex-spend-text-color: var(--ion-color-custom-satin-sheen-gold);

  /* title */
  --ion-title-heading-border-color: var(--ion-color-custom-gray);
  --ion-title-heading-corner-border-color: var(--ion-color-custom-golden-yellow);
  --ion-title-text-color: var(--ion-color-step-1000);
  --ion-title-heading-color: var(--ion-color-custom-dark-black);
  --ion-listbox-title-text-color: var(--ion-color-custom-dark-black);
  --ion-table-title-bg-color: var(--ion-color-step-100);
}

:root .ion-color-main {
  --ion-color-base: var(--ion-color-main);
  --ion-color-base-rgb: var(--ion-color-main-rgb);
  --ion-color-contrast: var(--ion-color-main-contrast);
  --ion-color-contrast-rgb: var(--ion-color-main-contrast-rgb);
  --ion-color-shade: var(--ion-color-main-shade);
  --ion-color-tint: var(--ion-color-main-tint);
}

:root .ion-color-accent {
  --ion-color-base: var(--ion-color-accent);
  --ion-color-base-rgb: var(--ion-color-accent-rgb);
  --ion-color-contrast: var(--ion-color-accent-contrast);
  --ion-color-contrast-rgb: var(--ion-color-accent-contrast-rgb);
  --ion-color-shade: var(--ion-color-accent-shade);
  --ion-color-tint: var(--ion-color-accent-tint);
}

:root .ion-color-link {
  --ion-color-base: var(--ion-color-link);
  --ion-color-base-rgb: var(--ion-color-link-rgb);
  --ion-color-contrast: var(--ion-color-link-contrast);
  --ion-color-contrast-rgb: var(--ion-color-link-contrast-rgb);
  --ion-color-shade: var(--ion-color-link-shade);
  --ion-color-tint: var(--ion-color-link-tint);
}

:root .ion-color-error {
  --ion-color-base: var(--ion-color-error);
  --ion-color-base-rgb: var(--ion-color-error-rgb);
  --ion-color-contrast: var(--ion-color-error-contrast);
  --ion-color-contrast-rgb: var(--ion-color-error-contrast-rgb);
  --ion-color-shade: var(--ion-color-error-shade);
  --ion-color-tint: var(--ion-color-error-tint);
}

:root .ion-color-disabled {
  --ion-color-base: var(--ion-color-disabled);
  --ion-color-base-rgb: var(--ion-color-disabled-rgb);
  --ion-color-contrast: var(--ion-color-disabled-contrast);
  --ion-color-contrast-rgb: var(--ion-color-disabled-contrast-rgb);
  --ion-color-shade: var(--ion-color-disabled-shade);
  --ion-color-tint: var(--ion-color-disabled-tint);
}

:root .ion-color-footer {
  --ion-color-base: var(--ion-color-footer);
  --ion-color-base-rgb: var(--ion-color-footer-rgb);
  --ion-color-contrast: var(--ion-color-footer-contrast);
  --ion-color-contrast-rgb: var(--ion-color-footer-contrast-rgb);
  --ion-color-shade: var(--ion-color-footer-shade);
  --ion-color-tint: var(--ion-color-footer-tint);
}