/*------------------------------------------------------------------
 * 2018 Color Palette
 *----------------------------------------------------------------*/
/*------------------------------------------------------------------
 * Core Palette
 *----------------------------------------------------------------*/
:root {
  /* Basic */
  --white: #ffffff;
  --black: #000000;
  /*//Yellow*/
  --yellow-c70: #443808;
  --yellow-c65: #5e4d08;
  --yellow-c60: #6b5706;
  --yellow-c55: #78670a;
  --yellow-c50: #857513;
  --yellow-c45: #998712;
  --yellow-c40: #a6940a;
  --yellow-c35: #d9c814;
  --yellow-c30: #ebdd26;
  --yellow-c25: #f2e749;
  --yellow-c20: #f5ed5f;
  --yellow-c15: #f7f283;
  --yellow-c10: #faf6a7;
  --yellow-c5: #fffccc;
  /*//Golden*/
  --golden-c70: #4d2c0b;
  --golden-c65: #613c0c;
  --golden-c60: #7a4b09;
  --golden-c55: #915e11;
  --golden-c50: #9e6d1e;
  --golden-c45: #b57d22;
  --golden-c40: #c2891f;
  --golden-c35: #d49f24;
  --golden-c30: #dea82a;
  --golden-c25: #e8b53c;
  --golden-c20: #f0c560;
  --golden-c15: #f5d58c;
  --golden-c10: #f7e5b2;
  --golden-c5: #fff5d9;
  /*//Orange*/
  --orange-c70: #571f08;
  --orange-c65: #703111;
  --orange-c60: #913d0c;
  --orange-c55: #ad4c0a;
  --orange-c50: #ba5b02;
  --orange-c45: #d4720b;
  --orange-c40: #de7c14;
  --orange-c35: #ed912f;
  --orange-c30: #f59c3d;
  --orange-c25: #faaa55;
  --orange-c20: #fcb665;
  --orange-c15: #fccc95;
  --orange-c10: #ffe0bd;
  --orange-c5: #ffedd9;
  /*//Red*/
  --red-c70: #5e0707;
  --red-c65: #7d0000;
  --red-c60: #a30303;
  --red-c55: #bf1313;
  --red-c50: #d62424;
  --red-c45: #e54343;
  --red-c40: #f05454;
  --red-c35: #f56464;
  --red-c30: #f77474;
  --red-c25: #fa8282;
  --red-c20: #fa9d9d;
  --red-c15: #ffb8b8;
  --red-c10: #ffd6d4;
  --red-c5: #ffe8e8;
  /*//Cerise*/
  --cerise-c70: #610030;
  --cerise-c65: #850045;
  --cerise-c60: #a8085b;
  --cerise-c55: #bd2272;
  --cerise-c50: #d13485;
  --cerise-c45: #e34b97;
  --cerise-c40: #ed64a1;
  --cerise-c35: #f76fad;
  --cerise-c30: #fa89c0;
  --cerise-c25: #ff8cbe;
  --cerise-c20: #faa0ce;
  --cerise-c15: #ffbfe0;
  --cerise-c10: #ffdeef;
  --cerise-c5: #ffebf8;
  /*//Purple*/
  --purple-c70: #421d54;
  --purple-c65: #56287a;
  --purple-c60: #6f3799;
  --purple-c55: #853fba;
  --purple-c50: #8d4cc7;
  --purple-c45: #975dd9;
  --purple-c40: #a270df;
  --purple-c35: #ad7cf2;
  --purple-c30: #b58bef;
  --purple-c25: #bc97f0;
  --purple-c20: #c9a9f5;
  --purple-c15: #ddc4ff;
  --purple-c10: #e9dcfc;
  --purple-c5: #f5edff;
  /*//Blue*/
  --blue-c70: #00326b;
  --blue-c65: #003e85;
  --blue-c60: #004fa8;
  --blue-c55: #065ec2;
  --blue-c50: #0072db;
  --blue-c45: #1183ed;
  --blue-c40: #2390f7;
  --blue-c35: #3b9fff;
  --blue-c30: #4fa5ff;
  --blue-c25: #64b0ff;
  --blue-c20: #86c1ff;
  --blue-c15: #afd6ff;
  --blue-c10: #cee6ff;
  --blue-c5: #eaf4ff;
  /*//Aqua*/
  --aqua-c70: #003d4f;
  --aqua-c65: #004a61;
  --aqua-c60: #005e7a;
  --aqua-c55: #0f6d8c;
  --aqua-c50: #127e99;
  --aqua-c45: #0793b3;
  --aqua-c40: #0fa3bd;
  --aqua-c35: #26b1c9;
  --aqua-c30: #4ebbcf;
  --aqua-c25: #67cadb;
  --aqua-c20: #83d3e5;
  --aqua-c15: #a7dfeb;
  --aqua-c10: #cbedf2;
  --aqua-c5: #e3f7fa;
  /*//Turquoise*/
  --turquoise-c70: #054240;
  --turquoise-c65: #0d4f4c;
  --turquoise-c60: #106361;
  --turquoise-c55: #117370;
  --turquoise-c50: #12827a;
  --turquoise-c45: #149690;
  --turquoise-c40: #14a69e;
  --turquoise-c35: #2eb8ac;
  --turquoise-c30: #4dc4b6;
  --turquoise-c25: #69d1c5;
  --turquoise-c20: #89d9cd;
  --turquoise-c15: #ace3da;
  --turquoise-c10: #cbf2ea;
  --turquoise-c5: #e3faf5;
  /*//Green*/
  --green-c70: #0c4207;
  --green-c65: #14540a;
  --green-c60: #15660c;
  --green-c55: #197811;
  --green-c50: #2f8717;
  --green-c45: #3e961a;
  --green-c40: #50a82a;
  --green-c35: #67b543;
  --green-c30: #79c756;
  --green-c25: #91db69;
  --green-c20: #a2e080;
  --green-c15: #b6ed95;
  --green-c10: #d8f7c6;
  --green-c5: #ebfae1;
  /*//Apple*/
  --apple-c70: #2a400a;
  --apple-c65: #374f0d;
  --apple-c60: #42610e;
  --apple-c55: #527310;
  --apple-c50: #5c8211;
  --apple-c45: #729617;
  --apple-c40: #7da11b;
  --apple-c35: #9bba3d;
  --apple-c30: #abc951;
  --apple-c25: #bad667;
  --apple-c20: #c8e378;
  --apple-c15: #d8ed9a;
  --apple-c10: #e6f5b5;
  --apple-c5: #f2fad9;
  /*//Gray*/
  --gray-c70: #2d2d2d;
  --gray-c65: #424242;
  --gray-c60: #565757;
  --gray-c55: #5d5f5f;
  --gray-c50: #6a6d6d;
  --gray-c45: #7f8282;
  --gray-c40: #898d8d;
  --gray-c35: #a0a2a2;
  --gray-c30: #b2b2b2;
  --gray-c25: #bfc0c0;
  --gray-c20: #cbcdcf;
  --gray-c15: #dcdcdc;
  --gray-c10: #ededed;
  --gray-c5: #f7f7f8;
  /*//Cool Gray*/
  --cool-gray-c70: #3d3f3f;
  --cool-gray-c65: #4c4e50;
  --cool-gray-c60: #54585a;
  --cool-gray-c55: #62676b;
  --cool-gray-c50: #6f757a;
  --cool-gray-c45: #7c8388;
  --cool-gray-c40: #899196;
  --cool-gray-c35: #989fa3;
  --cool-gray-c30: #a6adb1;
  --cool-gray-c25: #b3babd;
  --cool-gray-c20: #c0c6c8;
  --cool-gray-c15: #d5dadc;
  --cool-gray-c10: #e8eced;
  --cool-gray-c5: #f4f4f4;
  /*//Warm Gray*/
  --warm-gray-c70: #3c3530;
  --warm-gray-c65: #4c4541;
  --warm-gray-c60: #5b534f;
  --warm-gray-c55: #6b615c;
  --warm-gray-c50: #7f726b;
  --warm-gray-c45: #8d7f76;
  --warm-gray-c40: #9b8b81;
  --warm-gray-c35: #a69990;
  --warm-gray-c30: #b2a79f;
  --warm-gray-c25: #bdb3ac;
  --warm-gray-c20: #cec4bf;
  --warm-gray-c15: #ded6d1;
  --warm-gray-c10: #efecea;
  --warm-gray-c5: #f7f5f2;
  /*------------------------------------------------------------------
   * Muted Palette
   *----------------------------------------------------------------*/
  /*//Yellow*/
  --yellow-m60: #624e19;
  --yellow-m55: #76611b;
  --yellow-m50: #8a7517;
  --yellow-m45: #988530;
  --yellow-m40: #a59449;
  --yellow-m30: #c1b37a;
  --yellow-m20: #dcd2ac;
  --yellow-m15: #ebe5cb;
  --yellow-m10: #fbf8eb;
  /*//Golden*/
  --golden-m60: #77471e;
  --golden-m55: #8b5820;
  --golden-m50: #9e6b20;
  --golden-m45: #a77a36;
  --golden-m40: #b0884b;
  --golden-m30: #c3a577;
  --golden-m20: #d5c2a2;
  --golden-m15: #ecdfc4;
  --golden-m10: #f7f3e5;
  /*//Orange*/
  --orange-m60: #8a3e22;
  --orange-m55: #9d4e27;
  --orange-m50: #af602b;
  --orange-m45: #b56e40;
  --orange-m40: #bb7c54;
  --orange-m30: #c7997d;
  --orange-m20: #d3b5a6;
  --orange-m15: #e5d2c6;
  --orange-m10: #f7f0e5;
  /*//Red*/
  --red-m60: #972d37;
  --red-m55: #aa3944;
  --red-m50: #c15359;
  --red-m45: #c56368;
  --red-m40: #ca7277;
  --red-m30: #d39294;
  --red-m20: #ddb1b2;
  --red-m15: #e6d0d0;
  --red-m10: #f8eeee;
  /*//Cerise*/
  --cerise-m60: #562b4a;
  --cerise-m55: #683661;
  --cerise-m50: #7c4371;
  --cerise-m45: #8a5683;
  --cerise-m40: #976895;
  --cerise-m30: #b08bae;
  --cerise-m20: #c8afc6;
  --cerise-m15: #e0d3df;
  --cerise-m10: #f9eff5;
  /*//Purple*/
  --purple-m60: #423165;
  --purple-m55: #533e79;
  --purple-m50: #654c8e;
  --purple-m45: #755d99;
  --purple-m40: #846ea4;
  --purple-m30: #a390ba;
  --purple-m20: #c1b1cf;
  --purple-m15: #e0d3e5;
  --purple-m10: #f5edf7;
  /*//Blue*/
  --blue-m60: #293665;
  --blue-m55: #344479;
  --blue-m50: #42548e;
  --blue-m45: #536499;
  --blue-m40: #6374a3;
  --blue-m30: #8494b7;
  --blue-m20: #a5b4cc;
  --blue-m15: #c6d4e0;
  --blue-m10: #e4eef4;
  /*//Aqua*/
  --aqua-m60: #244753;
  --aqua-m55: #2e5866;
  --aqua-m50: #396b7a;
  --aqua-m45: #4b7986;
  --aqua-m40: #5c8792;
  --aqua-m30: #7fa2ab;
  --aqua-m20: #a1bdc3;
  --aqua-m15: #c4d9db;
  --aqua-m10: #e5f2f3;
  /*//Turquoise*/
  --turquoise-m60: #335245;
  --turquoise-m55: #406456;
  --turquoise-m50: #4f7769;
  --turquoise-m45: #5d8779;
  --turquoise-m40: #6a9688;
  --turquoise-m30: #81aa9d;
  --turquoise-m20: #a1c3ba;
  --turquoise-m15: #c2ddd6;
  --turquoise-m10: #e2f6f3;
  /*//Green*/
  --green-m60: #324826;
  --green-m55: #415930;
  --green-m50: #506d3c;
  --green-m45: #617b4d;
  --green-m40: #71895e;
  --green-m30: #91a581;
  --green-m20: #b2c1a3;
  --green-m15: #d2ddc5;
  --green-m10: #f1f7e7;
  /*------------------------------------------------------------------
   * Saturated Palette
   *----------------------------------------------------------------*/
  /*//Yellow*/
  --yellow-s10: #fffbb3;
  --yellow-s15: #fff875;
  --yellow-s20: #fff200;
  --yellow-s25: #f2e500;
  --yellow-s30: #decf00;
  --yellow-s35: #c1b300;
  --yellow-s40: #9e9400;
  --yellow-s45: #908400;
  --yellow-s50: #908400;
  --yellow-s55: var(--yellow-c55);
  --yellow-s60: var(--yellow-c60);
  --yellow-s65: var(--yellow-c65);
  --yellow-s70: var(--yellow-c70);
  /*//Golden*/
  --golden-s10: #ffe5ad;
  --golden-s15: #ffd77f;
  --golden-s20: #ffc849;
  --golden-s25: #ffbb00;
  --golden-s30: #f0ad00;
  --golden-s35: #da9b00;
  --golden-s40: #c78800;
  --golden-s45: #b57300;
  --golden-s50: #a36700;
  --golden-s55: var(--golden-c55);
  --golden-s60: var(--golden-c60);
  --golden-s65: var(--golden-c65);
  --golden-s70: var(--golden-c70);
  /*//Orange*/
  --orange-s10: #ffe0c7;
  --orange-s15: #ffc69e;
  --orange-s20: #ffab6d;
  --orange-s25: #ff9445;
  --orange-s30: #ff8420;
  --orange-s35: #ff780b;
  --orange-s40: #ee6b00;
  --orange-s45: #dd6003;
  --orange-s50: #c25400;
  --orange-s55: var(--orange-c55);
  --orange-s60: var(--orange-c60);
  --orange-s65: var(--orange-c65);
  --orange-s70: var(--orange-c70);
  /*//Red*/
  --red-s10: #ffe6e6;
  --red-s15: #ffcccc;
  --red-s20: #ffabab;
  --red-s25: #ff9090;
  --red-s30: #ff7777;
  --red-s35: #ff5858;
  --red-s40: #ff3333;
  --red-s45: #f80800;
  --red-s50: #eb0000;
  --red-s55: var(--red-c55);
  --red-s60: var(--red-c60);
  --red-s65: var(--red-c65);
  --red-s70: var(--red-c70);
  /*//Cerise*/
  --cerise-s10: #ffe6f5;
  --cerise-s15: #ffcceb;
  --cerise-s20: #ffa6db;
  --cerise-s25: #ff92d3;
  --cerise-s30: #ff75c8;
  --cerise-s35: #ff55bb;
  --cerise-s40: #ff2eab;
  --cerise-s45: #f200ac;
  --cerise-s50: #e00097;
  --cerise-s55: var(--cerise-c55);
  --cerise-s60: var(--cerise-c60);
  --cerise-s65: var(--cerise-c65);
  --cerise-s70: var(--cerise-c70);
  /*//Purple*/
  --purple-s10: #f4e6ff;
  --purple-s15: #ebd1ff;
  --purple-s20: #deb3ff;
  --purple-s25: #d6a0ff;
  --purple-s30: #cb88ff;
  --purple-s35: #c26cff;
  --purple-s40: #b95dff;
  --purple-s45: #af46ff;
  --purple-s50: #a733ff;
  --purple-s55: var(--purple-c55);
  --purple-s60: var(--purple-c60);
  --purple-s65: var(--purple-c65);
  --purple-s70: var(--purple-c70);
  /*//Blue*/
  --blue-s10: #e6f0ff;
  --blue-s15: #d1e4ff;
  --blue-s20: #b3d2ff;
  --blue-s25: #99c4ff;
  --blue-s30: #73adff;
  --blue-s35: #529aff;
  --blue-s40: #3388ff;
  --blue-s45: #1476ff;
  --blue-s50: #006aff;
  --blue-s55: var(--blue-c55);
  --blue-s60: var(--blue-c60);
  --blue-s65: var(--blue-c65);
  --blue-s70: var(--blue-c70);
  /*//Aqua*/
  --aqua-s10: #d9f9ff;
  --aqua-s15: #b3f2ff;
  --aqua-s20: #82eaff;
  --aqua-s25: #4bdbf7;
  --aqua-s30: #23c3eb;
  --aqua-s35: #00aede;
  --aqua-s40: #009dd1;
  --aqua-s45: #008ac6;
  --aqua-s50: #007db3;
  --aqua-s55: var(--aqua-c55);
  --aqua-s60: var(--aqua-c60);
  --aqua-s65: var(--aqua-c65);
  --aqua-s70: var(--aqua-c70);
  /*//Turquoise*/
  --turquoise-s10: #d9fff6;
  --turquoise-s15: #b5fff2;
  --turquoise-s20: #85ffeb;
  --turquoise-s25: #12f3e0;
  --turquoise-s30: #00d7cf;
  --turquoise-s35: #00c4c3;
  --turquoise-s40: #00a3a3;
  --turquoise-s45: #009393;
  --turquoise-s50: #008080;
  --turquoise-s55: var(--turquoise-c55);
  --turquoise-s60: var(--turquoise-c60);
  --turquoise-s65: var(--turquoise-c65);
  --turquoise-s70: var(--turquoise-c70);
  /*//Green*/
  --green-s10: #e1fae1;
  --green-s15: #bfffbf;
  --green-s20: #99ff99;
  --green-s25: #6df26d;
  --green-s30: #45e545;
  --green-s35: #00cc00;
  --green-s40: #00ad00;
  --green-s45: #009900;
  --green-s50: #008a00;
  --green-s55: var(--green-c55);
  --green-s60: var(--green-c60);
  --green-s65: var(--green-c65);
  --green-s70: var(--green-c70);
  /*//Apple*/
  --apple-s10: #ecffc0;
  --apple-s15: #dcffa1;
  --apple-s20: #caff59;
  --apple-s25: #b1ec00;
  --apple-s30: #a0d600;
  --apple-s35: #8ab800;
  --apple-s40: #779e00;
  --apple-s45: #698c00;
  --apple-s50: #608000;
  --apple-s55: var(--apple-c55);
  --apple-s60: var(--apple-c60);
  --apple-s65: var(--apple-c65);
  --apple-s70: var(--apple-c70);
  /*//Text Colors*/
  --text-dark: var(--cool-gray-c65);
  --text-medium: var(--gray-c50);
  --text-light: var(--gray-c35); /* Not contrast compliant to WCAG 2.0 */
  --text-color: var(--text-dark);
  --text-white: var(--white);
  /*//Action Colors*/
  /*//Colors for main buttons*/
  --action-transparent: transparent;
  --action-xxlight: var(--white);
  --action-xlight: var(--blue-c10);
  --action-light: var(--blue-c15);
  --action-mid: var(--blue-c40);
  --action-dark: var(--blue-c45);
  --action-xdark: var(--blue-c50);
  --action-mid-small: var(--blue-c50);
  --action-dark-small: var(--blue-c55);
  --action-xdark-small: var(--blue-c60);
  --link-color: #2a4dc1;
  /*//Brand Colors*/
  --hmh-golden: var(--golden-c30);
  --hmh-dark-gray: var(--cool-gray-c60);
  --hmh-light-gray: var(--cool-gray-c40);
}

/*------------------------------------------------------------------
 * CTS Color Palette
 *
 * See component css files for component-specific variables
 *
 * @zepin https://zpl.io/an7lpqn
 *----------------------------------------------------------------*/
/* @import url("colours.css"); */

:root {
  /* --Brand Colors-- */

  /* Primary Colors */
  --ebl-brand: var(--golden-s25);
  --ebl-light-brand: var(--golden-s10);
  --ebl-transparent: transparent;

  /* --Grays-- */
  
  /* MUI THEME: Common */
  --ebl-black: var(--gray-c70);
  --ebl-white: var(--white);
  /*-----*/

  --ebl-dark-gray: var(--gray-c60);
  --ebl-mid-gray: var(--gray-c40);
  --ebl-light-mid-gray: var(--gray-c10);
  --ebl-light-gray: var(--cool-gray-c5);


  /* --Secondary Colors-- */
  --ebl-secondary-1: var(--purple-c55);
  --ebl-secondary-2: var(--aqua-s40);
  --ebl-secondary-3: var(--turquoise-c35);
  --ebl-secondary-4: var(--red-c40);

  /* --Tertiary Colors-- */
  --ebl-tertiary-1: var(--purple-c10);
  --ebl-tertiary-2: var(--blue-c10);
  --ebl-tertiary-3: var(--turquoise-c15);
  --ebl-tertiary-4: var(--red-c5);

  /* --Utility Colors-- */
  --ebl-action-color: var(--blue-c55);
  --ebl-mid-action-color: var(--blue-c15);
  --ebl-light-action-color: var(--blue-c10);
  --ebl-disabled-color: var(--cool-gray-c15);
  --ebl-dark-action-color: var(--blue-c60);

  /* --Alert Colors-- */
  --ebl-alert-brand: var(--golden-s25);
  --ebl-alert-black: var(--ebl-black);
  --ebl-alert-gray: var(--gray-c5);

  /* --Signal Colors-- 🚦 */
  --ebl-signal-error: var(--red-c50);
  --ebl-signal-warning: var(--orange-s40);
  --ebl-signal-success: var(--green-c50);
  --ebl-signal-info: var(--aqua-s50);

  --ebl-signal-error-light: var(--red-c5);
  --ebl-signal-warning-light: var(--orange-c5);
  --ebl-signal-success-light: var(--green-c5);
  --ebl-signal-info-light: var(--aqua-c5);

  /* --Proficiency Colors-- */
  --ebl-proficiency-below: var(--red-c40);
  --ebl-proficiency-basic: var(--orange-c40);
  --ebl-proficiency-proficient: var(--turquoise-c45);
  --ebl-proficiency-advanced: var(--aqua-s40);

  /* --Text Colors */
  --ebl-text-black: var(--gray-c70);
  --ebl-text-gray: var(--gray-c50);
  --ebl-text-white: var(--white);

  /* --Border Colors-- */
  --ebl-card-border-color: var(--cool-gray-c20);

  /* --Background Colors-- */
  --ebl-background: var(--cool-gray-c5);

  /* --Disabled colors-- */
  --ebl-disabled-color: #cacfd1;

  /* --Discipline Theming-- */
  --ebl-discipline-math: var(--purple-c55);
  --ebl-discipline-rla: var(--green-s50);
  --ebl-discipline-sh: var(--cerise-s50);
  --ebl-discipline-ss: var(--orange-c50);
  --ebl-discipline-demo: var(--blue-c45);
  --ebl-discipline-other: var(--ebl-mid-gray);
  --ebl-discipline-multi: var(--blue-c70);
  --ebl-discipline-unassigned: var(--ebl-light-gray);

  --ebl-discipline-math-light: var(--purple-c10);
  --ebl-discipline-rla-light: var(--green-c10);
  --ebl-discipline-sh-light: var(--cerise-c10);
  --ebl-discipline-ss-light: var(--orange-c10);
  --ebl-discipline-demo-light: var(--blue-c5);
  --ebl-discipline-other-light: var(--ebl-light-gray);
  --ebl-discipline-multi-light: var(--blue-c10);
  --ebl-discipline-unassigned-light: var(--ebl-light-gray);

  /* JASPERSOFT INTEGRATION VARS */
  --ebl-widget-chartcolor-red: var(--ebl-signal-error);
  --ebl-widget-chartcolor-yellow: var(--ebl-signal-warning);
  --ebl-widget-chartcolor-green: var(--ebl-signal-success);

  /* -- Hero/Leader/Family Banner Colors-- */
  --ebl-hero-background: #f8f1e8;
  --ebl-hero-floor: #e8e1da;

  --ebl-banner-hero-background-color: #f7f0e7;
  --ebl-banner-hero-floor-color: #e7e0d9;

  --ebl-banner-family-background-color: #f2f2f2;
  --ebl-banner-family-floor-color: #dddddd;

  --ebl-banner-leader-background-color: #dcefe9;
  --ebl-banner-leader-floor-color: #c0e2db;

  --ebl-banner-licensing-background-color: var(--blue-c5);
  --ebl-banner-licensing-floor-color: var(--blue-c10);

  /* --Growth Measure Icon Colors-- */
  --ebl-gm-icon-brand: var(--ebl-brand);
  --ebl-gm-icon-white: var(--ebl-white);
  --ebl-gm-icon-math: #9f4b9c;
  --ebl-gm-icon-spanish: #0ba587;
  --ebl-gm-icon-reading: #00a2c2;

  /* --Mini Banner Background Colors-- */
  --ebl-miniBanner-literacy-bg: #dfdcef;
  --ebl-miniBanner-math-bg: #bdefb2;
  --ebl-miniBanner-hmh-bg: #f9e6c0;
  --ebl-miniBanner-bg: #c0e2db;

  /* --Marketing Colors-- */
  --ebl-mktg-beige1: #FAF8F6;
  --ebl-mktg-beige2: #F7F3EF;
  --ebl-mktg-beige3: #EFE9E1;
  --ebl-mktg-beige4: #E7DDD1;
  --ebl-mktg-beige5: #D6C5B1;

  --ebl-mktg-proficiency-green: #05AD5E;
  --ebl-mktg-proficiency-green-light: #B4E62E;
  --ebl-mktg-proficiency-yellow: #FBDB08;
  --ebl-mktg-proficiency-orange: #FC7600;
  --ebl-mktg-proficiency-red: #FC3411;
  --ebl-mktg-proficiency-turquoise: #33CCBD;
  --ebl-mktg-proficiency-turquoise-light: #e7f6f3;

  --ebl-pagelayout-login-brand-color: var(--blue-c5);


  /*------------------------------------------------------------------
   * FOCUS RING
   *
   * Global focus ring for all interactive elements. Apply as box-shadow
   *----------------------------------------------------------------*/
  --ebl-focus-color: #ca0092; /* use only if unable to use box-shadow */

  --ebl-focus-ring: 0 0 0 1px #ffffff, 0 0 0 3px var(--ebl-focus-color),
    0 0 0 4px #ffffff;

  /* Deprecated */
  --ebl-border-hairline-gray: var(--ebl-disabled-color);
}

:root {
    --ebl-border-width-default: 1px;
    --ebl-border-width-alt: 2px;
}
/*------------------------------------------------------------------
 * CTS Spacing Variables
 *
 * @zeplin https://zpl.io/blkQAQe
 *----------------------------------------------------------------*/

:root {
  --ebl-spacing-base: 16px;

  --ebl-s0: 0.125rem; /* 2px */
  --ebl-s1: 0.25rem; /* 4px */
  --ebl-s2: 0.5rem; /* 8px */
  --ebl-s3: 1rem; /* 16px */
  --ebl-s4: 1.5rem; /* 24px */
  --ebl-s5: 2rem; /* 32px */
  --ebl-s6: 2.5rem; /* 40px */
  --ebl-s7: 4rem; /* 64px */
  --ebl-s8: 4.5rem; /* 72px */
}

/*------------------------------------------------------------------
 * Noto Sans
 * Additional charset support can be found here: https://fonts.googleapis.com/css?family=Noto+Sans:400,700
 *----------------------------------------------------------------*/
/* 
*  --ebl-wf-body-weight-bold: 700;
*  --ebl-wf-body-weight: 400;
*  --ebl-wf-headings-weight-bold: 700;
*  --ebl-wf-headings-weight: 500;
*/
/* latin */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: var(--wf-body-weight-bold);
  src: local("Noto Sans Bold"), local("NotoSans-Bold"),
    url(/ui/login/b36335ad42b404de740f.woff2)
    format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: var(--wf-body-weight);
  src: local("Noto Sans"), local("NotoSans"),
    url(/ui/login/44f6f6c44fcf686daa86.woff2) format("woff2");
}

/*------------------------------------------------------------------
 * Gilroy
 * For license information contact Nathan O'Neal (nathan.oneal@hmhco.com)
 *----------------------------------------------------------------*/
@font-face {
  font-family: "Gilroy";
  src: url(/ui/login/05118a41b2698989b89e.eot?#iefix);
  src: url(/ui/login/05118a41b2698989b89e.eot?#iefix)
    format("eot"),
    url(/ui/login/17a32f687ec6cccd43f3.woff2)
    format("woff2"),
    url(/ui/login/57fd3a18a97620ca6f65.woff)
    format("woff"),
    url(/ui/login/f3345a07bbf361c49ba5.ttf)
    format("truetype");
  font-weight: var(--ebl-wf-headings-weight-bold);
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  src: url(/ui/login/f09a231d6d15eb8de7bf.eot?#iefix);
  src: url(/ui/login/f09a231d6d15eb8de7bf.eot?#iefix)
    format("eot"),
    url(/ui/login/5fdc3462dadeaa9d0e48.woff2)
    format("woff2"),
    url(/ui/login/0414bf2d9f5093ac8123.woff)
    format("woff"),
    url(/ui/login/42043485b3040897fe67.ttf)
    format("truetype");
  font-weight: var(--ebl-wf-headings-weight-bold);
  font-style: italic;
}

@font-face {
  font-family: "Gilroy";
  src: url(/ui/login/b21aca227df6e8466de3.eot?#iefix);
  src: url(/ui/login/b21aca227df6e8466de3.eot?#iefix)
    format("eot"),
    url(/ui/login/80dc906ae564ca2f9667.woff2)
    format("woff2"),
    url(/ui/login/5f7fceba105697e38070.woff)
    format("woff"),
    url(/ui/login/6db5e25dba7051a4d8c9.ttf)
    format("truetype");
  font-style: normal;
  font-weight: var(--ebl-wf-headings-weight);
}
@font-face {
  font-family: "Gilroy";
  src: url(/ui/login/5eea8e1bd67c71ab2717.eot?#iefix);
  src: url(/ui/login/5eea8e1bd67c71ab2717.eot?#iefix)
    format("eot"),
    url(/ui/login/37f337cffc4200207025.woff2)
    format("woff2"),
    url(/ui/login/7986f6289269ad1d252e.woff)
    format("woff"),
    url(/ui/login/7ac66ae02ba8776713ba.ttf)
    format("truetype");
  font-style: italic;
  font-weight: var(--ebl-wf-headings-weight);
}

/*------------------------------------------------------------------
 * General Font stylings for CTS
 *
 * See component css files for component-specific variables
 *
 * @zeplin https://zpl.io/V1pKz6J
 *----------------------------------------------------------------*/

:root {
  /* The base font size, from which all others are derived */
  --ebl-font-size-base: 16px;

  /* --Font Waterfalls-- */
  --ebl-wf-headings: "Gilroy", "Futura", Helvetica, sans-serif;
  --ebl-wf-body: "Noto Sans", "Helvetica Neue", Helvetica, sans-serif;

  /* --Font Weight-- */
  --ebl-wf-headings-weight-bold: 700;
  --ebl-wf-headings-weight: 500;

  --ebl-wf-body-weight-bold: 700;
  --ebl-wf-body-weight: 400;

  /* --Headings-- */
  --ebl-h1: 2.75rem; /* 44px */
  --ebl-h1-line-height: 3.5rem; /* 56px */
  --ebl-h1-letter-spacing: 0; 
  --ebl-h1-color: var(--ebl-text-black);
  --ebl-h1-weight: var(--ebl-wf-headings-weight-bold);

  --ebl-h2: 2.25rem; /* 36px */
  --ebl-h2-line-height: 3rem; /* 48px */
  --ebl-h2-letter-spacing: 0;
  --ebl-h2-color: var(--ebl-text-black);
  --ebl-h2-weight: var(--ebl-wf-headings-weight-bold);

  --ebl-h3: 1.5rem; /* 24px */
  --ebl-h3-line-height: 2rem; /* 32px */
  --ebl-h3-letter-spacing: 0.0125rem; /* .2px */
  --ebl-h3-color: var(--ebl-text-black);
  --ebl-h3-weight: var(--ebl-wf-headings-weight-bold);

  --ebl-h4: 1.125rem; /* 18px */
  --ebl-h4-line-height: 1.75rem; /* 28px */
  --ebl-h4-letter-spacing: 0.01875rem; /* .3px */
  --ebl-h4-color: var(--ebl-text-black);
  --ebl-h4-weight: var(--ebl-wf-headings-weight-bold);

  --ebl-h5: 1.125rem; /* 18px */
  --ebl-h5-line-height: 1.75rem; /* 28px */
  --ebl-h5-letter-spacing: 0.0125rem; /* .2px */
  --ebl-h5-color: var(--ebl-text-black);
  --ebl-h5-weight: var(--ebl-wf-headings-weight);

  --ebl-h6: 1rem; /* 16px */
  --ebl-h6-line-height: 1.625rem; /* 26px */
  --ebl-h6-letter-spacing: 0.01875rem; /* .3px */;
  --ebl-h6-color: var(--ebl-text-black);
  --ebl-h6-weight: var(--ebl-wf-headings-weight-bold);

  /* --Subheadings-- */

  --ebl-sh1: 1rem; /* 16px */
  --ebl-sh1-line-height: 1.625rem; /* 26px */
  --ebl-sh1-letter-spacing: 0.0125rem; /* .2px */
  --ebl-sh1-color: var(--ebl-text-black);
  --ebl-sh1-weight: var(--ebl-wf-headings-weight);

  --ebl-sh2: 0.875rem; /* 14px */
  --ebl-sh2-line-height: 1.5rem; /* 24px */
  --ebl-sh2-letter-spacing: 0.03125rem; /* .5px */
  --ebl-sh2-color: var(--ebl-text-black);
  --ebl-sh2-weight: var(--ebl-wf-headings-weight-bold);

  --ebl-sh3: 0.875rem; /* 14px */
  --ebl-sh3-line-height: 1.5rem; /* 24px */
  --ebl-sh3-letter-spacing: 0.0125rem; /* .2px */
  --ebl-sh3-color: var(--ebl-text-black);
  --ebl-sh3-weight: var(--ebl-wf-headings-weight);

  --ebl-sh4: 0.8125rem; /* 13px */
  --ebl-sh4-line-height: 1.5rem; /* 24px */
  --ebl-sh4-letter-spacing: 0.0125rem; /* .2px */
  --ebl-sh4-color: var(--ebl-text-black);
  --ebl-sh4-weight: var(--ebl-wf-headings-weight);
  --ebl-sh4-text-transform: none;

  /* --Body-- */

  --ebl-p1: 1rem;
  --ebl-p1-line-height: 1.5rem; /* 24px */
  --ebl-p1-letter-spacing: 0;
  --ebl-p1-color: var(--ebl-text-black);

  --ebl-p2: 0.875rem; /* 14px */
  --ebl-p2-line-height: 1.25rem; /* 20px */
  --ebl-p2-letter-spacing: 0.0125rem; /* .2px */
  --ebl-p2-color: var(--ebl-text-black);

  /* --Error Pages-- */
  --ebl-h1-error: 5.5rem; /* 88px */
  --ebl-h1-error-line-height: 6.625rem; /* 106px */
  --ebl-h1-error-letter-spacing: 0;
  --ebl-h1-error-color: var(--ebl-action-color);
  --ebl-h1-error-weight: var(--ebl-wf-headings-weight-bold);

  /* --Links-- */

  --ebl-link-normal-color: var(--ebl-action-color);
  --ebl-link-normal-text-decoration: underline;

  --ebl-link-hover-color: var(--ebl-black);
  --ebl-link-hover-text-decoration: underline;

  --ebl-link-active-color: var(--ebl-text-black);
  --ebl-link-active-text-decoration: underline;

  --ebl-link-visited-color: var(--ebl-secondary-1);
  --ebl-link-visited-text-decoration: underline;

  --ebl-link-disabled-color: var(--ebl-disabled-color);
}
/* Mobile */
@media screen and (max-width: 599px) {
  :root {
    --ebl-h1: 2.25rem; /* 36px */
    --ebl-h1-line-height: 2.5rem; /* 40px */
    --ebl-h1-letter-spacing: -0.0125rem; /* -.2px */
  }
}

/*------------------------------------------------------------------
 * CTS Shadow Variables
 *
 * @zeplin https://zpl.io/beeWL4p
 *
 * See component css files for component-specific variables
 *----------------------------------------------------------------*/

:root {
  /* Used for buttons in their resting state */
  --ebl-shadow-0: none;

  --ebl-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.2),0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.14);

  /* Used for: Drag and drop drag item initial state, Button hover states */
  --ebl-shadow-3: 0 1px 8px 0 rgba(0, 0, 0, 0.2),0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 3px 4px 0 rgba(0, 0, 0, 0.14);

  /* Used for: Drag and drop drag item hover state */
  --ebl-shadow-8: 0 3px 14px 2px rgba(0, 0, 0, 0.12),0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 5px 5px -3px rgba(0, 0, 0, 0.2);

  /* Used for: Drag and drop drag item dragging state */
  --ebl-shadow-12: 0 7px 8px -4px rgba(0, 0, 0, 0.2),0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14);

  /* Used for: Modals */
  --ebl-shadow-24: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20);
  
}

:root {
    --ebl-stack-index-1: 1001;
    --ebl-stack-index-2: 1002;
    --ebl-stack-index-3: 1003;
    --ebl-stack-index-4: 1004;
    --ebl-stack-index-5: 1005;
    --ebl-stack-index-6: 1006;
}
/*------------------------------------------------------------------
 * Icon Variables
 *
 * @zeplin https://zpl.io/bWmogrp
 *----------------------------------------------------------------*/

:root {
  --ebl-icon-sm: 1rem; /* 16px */
  --ebl-icon-md: 1.5rem; /* 24px */
  --ebl-icon-lg: 2rem; /* 32px */
  --ebl-icon-xl: 4rem; /* 64px */

  --ebl-icon-color: var(--ebl-black); /* Default color */
}

/*------------------------------------------------------------------
 * Avatar Variables
 *
 * @zeplin https://zpl.io/VKQBjR8
 *         https://zpl.io/amwAe5e (avatar menu)
 *----------------------------------------------------------------*/

:root {
  /* --Avatars-- */
  --ebl-avatar-base: 16px;

  --ebl-avatar-sm: 2rem; /* 32px */
  --ebl-avatar-md: 3.5rem; /* 56px */
  --ebl-avatar-lg: 7rem; /* 112px */
  --ebl-avatar-xl: 160px; /* 160px */

  --ebl-avatar-font-family: var(--ebl-wf-headings);

  --ebl-avatar-sm-font-size: 1rem; /* 16px */
  --ebl-avatar-sm-letter-spacing: 0.01875rem; /* .3px */
  --ebl-avatar-sm-weight: var(--ebl-wf-headings-weight);

  --ebl-avatar-md-font-size: 1.5rem; /* 24px */
  --ebl-avatar-md-letter-spacing: 0.016875rem; /* .27px */
  --ebl-avatar-md-weight: var(--ebl-wf-headings-weight);

  --ebl-avatar-lg-font-size: 3.5rem; /* 56px */
  --ebl-avatar-lg-letter-spacing: 0.03875rem; /* .62px */
  --ebl-avatar-lg-weight: var(--ebl-wf-headings-weight-bold);

  --ebl-avatar-xl-font-size: 4rem; /* 64px */
  --ebl-avatar-xl-letter-spacing: 0.044375rem; /* .71px */
  --ebl-avatar-xl-weight: var(--ebl-wf-headings-weight-bold);

  /* --Avatar Menu (in top nav)-- */
  --ebl-m-avatar-size: var(--ebl-avatar-sm);
  --ebl-m-avatar-hover-active-size: 2.5rem; /* 40px */
  --ebl-m-avatar-active-radius: 0; /* square */

  --ebl-m-avatar-bg-color: var(--ebl-brand);
  --ebl-m-avatar-text-color: var(--ebl-text-black);

  --ebl-m-avatar-transition-duration: 150ms;
  --ebl-m-avatar-transition: cubic-bezier(
    0.55,
    0.055,
    0.675,
    0.19
  ); /* Ease-in cubic */

  /* PL styles */
  --ebl-avatarblock-padding: var(--ebl-s2);
  --ebl-avatarblock-avatar-marginbottom: var(--ebl-s4);
  --ebl-avatarblock-avatar-marginbottom-md: var(--ebl-s5);
  --ebl-avatarblock-subtitle-marginbottom: var(--ebl-s4);
  --ebl-avatarblock-divider-marginbottom: var(--ebl-s4);
  --ebl-authorpage-content-marginbottom: var(--ebl-s8);
  --ebl-authorpage-content-marginbottom-sm: var(--ebl-s7);

  /* PL Author page - Single/Multiple Author treatments */
  --ebl-avatarblocksm-margintop: var(--ebl-s3);
  --ebl-avatarblocksm-marginbottom: var(--ebl-s6);
  --ebl-avatarblocksm-text-marginleft: var(--ebl-s3);
  --ebl-avatarblocksm-text-marginleft-sm: var(--ebl-s2);
  --ebl-avatarblocksm-marginbottom-sm: var(--ebl-s5);
  --ebl-avatarblocksm-separator: var(--ebl-s6);
  --ebl-avatarblocksm-separator-sm: var(--ebl-s3);
  --ebl-avatarblocksm-popover-marginleft: var(--ebl-s4);
  
}

/*------------------------------------------------------------------
 * Button Variables
 *
 * @zeplin https://zpl.io/bJ0BvvJ
 * @zeplin https://zpl.io/2pGNxQr (xl button)
 *----------------------------------------------------------------*/

:root {
  /* --General Button Variables-- */
  --ebl-button-height-lg: 2.5rem; /* 40px */
  --ebl-button-height-sm: 2rem; /* 32px */
  --ebl-button-text-size-lg: 1rem; /* 16px */
  --ebl-button-text-size-sm: 0.875rem; /* 14px */
  --ebl-button-radius: 0.25rem; /* 4px */
  --ebl-button-hover-shadow: var(--ebl-shadow-3);
  --ebl-button-m-margin: var(--ebl-s3);
  --ebl-button-paddingleft: var(--ebl-s4); /* 24px */
  --ebl-button-paddingright: var(--ebl-s4); /* 24px */
  --ebl-button-icon-padding: var(--ebl-s2); /* 8px */

  /* LG Button styles (i.e., connected program buttons) */
  --ebl-button-lg-maxwidth: 18rem; /* 288px */
  --ebl-button-lg-minwidth: 7.938rem; /* 127px */
  --ebl-button-lg-padding: var(--ebl-s3);
  --ebl-button-lg-maxheight: 9.6875rem; /* 155px; */
  --ebl-button-lg-minheight: 5.625rem; /* 90px; */

  /* XL Button Styles */
  --ebl-button-xl-min-width: 8.5rem; /* 136px */
  --ebl-button-xl-padding: var(--ebl-s4);
  --ebl-button-xl-icon-margin-bottom: var(--ebl-s2);

  --ebl-button-xl-m-icon-margintop: calc(var(--ebl-s2) * -1); /* -4px */
  --ebl-button-xl-m-padding: var(--ebl-s3) var(--ebl-s4); /* 16px 24px */
  --ebl-button-xl-m-icon-marginright: var(--ebl-s3);

  /* 24px horizontal padding */
  --ebl-button-padding: var(--ebl-s4);

  /* 16px for any spacing between button text & icon */
  --ebl-button-icon-text-padding: var(--ebl-s3);

  /* --Contained Buttons-- */
  --ebl-button-contained-text-color: var(--ebl-text-white);
  --ebl-button-contained-text-decoration: none;
  --ebl-button-contained-normal-bg: var(--ebl-action-color);
  --ebl-button-contained-hover-bg: var(--ebl-button-contained-normal-bg);
  --ebl-button-contained-active-bg: var(--ebl-dark-action-color);
  --ebl-button-contained-selected-bg: var(--ebl-white);
  --ebl-button-contained-selected-border-color: var(--ebl-action-color);
  --ebl-button-contained-selected-border: solid 1px var(--ebl-button-contained-selected-border-color);
  --ebl-button-contained-selected-text-color: var(--ebl-action-color);
  --ebl-button-disabled-bg: var(--ebl-disabled-color);
  --ebl-button-disabled-text-color: var(--ebl-text-white);
  --ebl-button-disabled-blend-mode: multiply;

  /* --Outlined Buttons-- */
  --ebl-button-outlined-text-color: var(--ebl-action-color);
  --ebl-button-outlined-text-decoration: none;
  --ebl-button-outlined-normal-bg: var(--ebl-button-contained-selected-bg);
  --ebl-button-outlined-normal-border: solid 1px var(--ebl-button-contained-selected-border-color);
  --ebl-button-outlined-hover-bg: var(--ebl-button-outlined-normal-bg);
  --ebl-button-outlined-hover-border: solid 1px var(--ebl-button-contained-selected-border-color);
  --ebl-button-outlined-active-bg: var(--ebl-light-action-color);
  --ebl-button-outlined-active-border: var(--ebl-action-color);
  --ebl-button-outlined-disabled-bg: transparent;
  --ebl-button-outlined-disabled-border-color: var(--ebl-disabled-color);
  --ebl-button-outlined-disabled-border: solid 1px var(--ebl-button-outlined-disabled-border-color);
  --ebl-button-outlined-disabled-text-color: var(--ebl-disabled-color);

  /* --Frameless Buttons-- */
  --ebl-button-frameless-text-color: var(--ebl-action-color);
  --ebl-button-frameless-text-decoration: underline;
  --ebl-button-frameless-normal-bg: var(--ebl-white);
  --ebl-button-frameless-normal-border: none;
  --ebl-button-frameless-hover-bg: var(--ebl-button-frameless-normal-bg);
  --ebl-button-frameless-hover-border: var(
    --ebl-button-frameless-normal-border
  );
  --ebl-button-frameless-active-bg: var(--ebl-light-action-color);
  --ebl-button-frameless-active-border-color: var(--ebl-action-color);
  --ebl-button-frameless-active-border: var(--ebl-button-frameless-active-border-color);

  --ebl-button-frameless-disabled-bg: transparent;
  --ebl-button-frameless-disabled-border: none;
  --ebl-button-frameless-disabled-text-color: var(--ebl-disabled-color);

  /* --Toggle Buttons-- */
  --ebl-toggle-button-height-lg: 2.125rem; /* 34px */
  --ebl-toggle-button-height-sm: 1.625rem; /* 26px */
  --ebl-button-toggle-container-border-color: var(--ebl-action-color);
  --ebl-button-toggle-container-border: solid 1px var(--ebl-button-toggle-container-border-color);
  --ebl-button-toggle-container-border-disabled-color: var(--ebl-disabled-color);
  --ebl-button-toggle-container-border-disabled: var(--ebl-button-toggle-container-border-disabled-color);
  --ebl-button-toggle-container-padding: 0.125rem; /* 2px */
  --ebl-button-toggle-container-radius: 0.25rem; /* 4px */
  --ebl-button-toggle-radius: 0.125rem; /* 2px */
  --ebl-button-toggle-text-color: var(--ebl-action-color);
  --ebl-button-toggle-bg: var(--ebl-white);
  --ebl-button-toggle-text-decoration: underline;
  --ebl-button-toggle-active-text-color: var(--ebl-text-white);
  --ebl-button-toggle-active-bg: var(--ebl-action-color);
  --ebl-button-toggle-active-text-decoration: none;
  --ebl-button-toggle-hover-bg: var(--ebl-light-gray);

  --ebl-button-toggle-filter-height: 2.5rem; /* 40px */
  --ebl-button-toggle-filter-border-color: var(--ebl-card-border-color);
  --ebl-button-toggle-filter-border: var(--ebl-button-toggle-filter-border-color);
  --ebl-button-toggle-filter-padding: var(--ebl-s4);
  --ebl-button-toggle-filter-margin: var(--ebl-s1);
  --ebl-button-toggle-filter-radius: calc(var(--ebl-button-toggle-filter-height) / 2);

  /* --Button Group-- */
  --ebl-button-group-margintop-xl: var(--ebl-s7); /* 64px */
  --ebl-button-group-margintop: var(--ebl-s2); /* 8px */
  --ebl-button-group-marginbottom-sm: var(--ebl-s2); /* 8px */
  --ebl-button-group-marginbottom: var(--ebl-s3); /* 16px */
  --ebl-button-group-margin-bottom: var(--ebl-button-group-marginbottom);

  /* --Program Cards/Button Block-- */
  --ebl-button-block-marginbottom: var(--ebl-s6);

  /* --Chips-- */ 
  --ebl-button-chip-padding: var(--ebl-s1) var(--ebl-s1) var(--ebl-s1) var(--ebl-s5);
  --ebl-button-chip-margin: var(--ebl-s2);
  --ebl-button-chip-icon-marginleft: var(--ebl-s2);

  --ebl-button-chip-bg: var(--ebl-white);
  --ebl-button-chip-border: var(--ebl-card-border-color);
  --ebl-button-chip-bg-hover-color: var(--ebl-light-mid-gray);
  --ebl-button-chip-border-hover-color: var(--ebl-black);
  --ebl-button—chip-bg-selected-color: var(--ebl-light-action-color);
  --ebl-button-chip-bg-selected-color: var(--ebl-light-action-color);
  --ebl-button—chip-border-selected-color: var(--ebl-action-color);
  --ebl-button-chip-border-selected-color: var(--ebl-action-color);

}

/*------------------------------------------------------------------
 * Card Variables
 *
 * @zeplin https://zpl.io/bLnNzpB (subject card)
 *         https://zpl.io/a8v46zd (dashboard card)
 *         https://zpl.io/VOnGxeX (dashboard card title)
 *         https://zpl.io/2vkGk0n (lesson card)
 *         https://zpl.io/2y0pyAL (resource card)
 *         https://zpl.io/a3OYnP1 (resource card tile)
 *         https://zpl.io/VxeBBYg (roster card)
 *         https://zpl.io/29R55oy (roster card tile)
 *         https://zpl.io/2GJrjOr (recent uploads tile)
 *
 *----------------------------------------------------------------*/

:root {
  --ebl-card-radius: 0.5rem; /* 8px */
  --ebl-card-border-color: #C0C6C8;
  --ebl-card-border: solid 1px var(--ebl-card-border-color);
  --ebl-card-border-hover: var(--ebl-black);
  --ebl-card-box-shadow: none;
  --ebl-card-accent: var(--ebl-secondary-1);

  --ebl-card-base-padding: var(--ebl-s3);
  --ebl-card-base-heading-marginbottom: var(--ebl-s3);
  --ebl-card-base-button-margintop: var(--ebl-s3);
  --ebl-card-base-minwidth: 18rem; /* 288px */
  --ebl-card-base-button-margintop: var(--ebl-s2); /* 8px */
/* REMAPPED FROM ABOVE TO CONFORM W NAMING CONVENTION */
  --ebl-base-card-padding: var(--ebl-card-base-padding);
  --ebl-base-card-heading-marginbottom: var(--ebl-card-base-heading-marginbottom);
  --ebl-base-card-button-margintop: var(--ebl-card-base-button-margintop);
  --ebl-base-card-minwidth: var(--ebl-card-base-minwidth); /* 288px */
  --ebl-base-card-button-margintop: var(--ebl-card-base-button-margintop); /* 8px */

  --ebl-base-card-margintop: var(--ebl-s3);
  --ebl-base-card-heading-marginbottom: var(--ebl-s3);
  --ebl-base-card-media-bg: var(--ebl-signal-info-light);
  --ebl-base-card-icon-color: var(--ebl-secondary-2);


  /* --Subject Card--  */
  --ebl-s-card-avatar-margin: 1rem; /* 16px */
  --ebl-s-card-title-color: var(--ebl-white);
  --ebl-s-card-title-font-size: var(--ebl-h4);
  --ebl-s-card-subtitle-font-size: var(--ebl-sh4);
  --ebl-s-card-subtitle-color: var(--ebl-white);
  --ebl-s-card-padding-left: var(--ebl-s3);
  --ebl-s-card-padding-right: var(--ebl-s3);
  --ebl-s-card-padding-bottom: var(--ebl-s3);

  --ebl-s-card-list-padding-top: var(--ebl-s2);
  --ebl-s-card-list-padding-bottom: var(--ebl-s2);

  --ebl-s-card-li-icon-margin-right: var(--ebl-s2);

  --ebl-s-card-list-hover-color: var(--ebl-light-gray);

  /* --Dashboard Card-- */
  --ebl-db-card-min-width: 18rem; /* 288px */
  --ebl-db-card-height: 24.3125rem; /* 389px */

  --ebl-db-card-empty-message-height: 20.375rem; /* 326px */

  --ebl-db-card-padding-top: var(--ebl-s3);
  --ebl-db-card-padding-left: var(--ebl-s4);
  --ebl-db-card-padding-right: var(--ebl-s4);
  --ebl-db-card-padding-bottom: 0;
  --ebl-db-card-header-padding-bottom: var(--ebl-s2);
  --ebl-db-card-header-count-margin-right: var(--ebl-s2);

  --ebl-db-card-label-marginbottom: var(--ebl-s3);
  --ebl-db-card-button-margintop: var(--ebl-s3);
  --ebl-db-card-button-marginbottom: var(--ebl-s3);

  --ebl-db-card-header-separator-color: var(--golden-c30);

  --ebl-card-db-assignments-paddingbottom: var(--ebl-s4);

  /* The card header count label is optically adjusted to sit next to the count baseline  */
  --ebl-db-card-header-count-label-margin-bottom: 0.125rem; /* 2px */

  /* --Dashboard Card Tile-- */
  --ebl-db-card-tile-min-width: 15rem; /* 240px */
  --ebl-db-card-tile-text-max-width: 14.875rem; /* 238px */

  --ebl-db-card-tile-padding: var(--ebl-s4) var(--ebl-s3);

  --ebl-db-card-tile-padding-horz: var(--ebl-s4);
  --ebl-db-card-tile-padding-vert: var(--ebl-s3);

  --ebl-db-card-tile-text-margin-left: var(--ebl-s3);

  --ebl-db-card-tile-iconshim: 0.375rem; /* 6px */
  --ebl-db-card-tile-duedate-margintop: var(
    --ebl-s2
  ); /* b/w left icon & card text */

  --ebl-db-card-tile-text-margin-right: var(
    --ebl-s6
  ); /* b/w card text & count */
  --ebl-db-card-tile-count-margin-right: var(--ebl-s3); /* b/w count & arrow */

  --ebl-db-card-tile-border-color: var(--ebl-card-border-color);
  --ebl-db-card-tile-hover-border-color: var(--ebl-black);

  /* --Resource Card-- */
  --ebl-rs—card-min-width: 18rem; /* 288px */
  --ebl-rs-card-min-width: 18rem; /* 288px */
  --ebl-rs—card-radius: 0.5rem; /* 8px */
  --ebl-rs-card-radius: 0.5rem; /* 8px */
  --ebl-rs—card-padding: var(--ebl-s4);
  --ebl-rs-card-padding: var(--ebl-s4);
  --ebl-rs—card-padding-top: var(--ebl-s3);
  --ebl-rs-card-padding-top: var(--ebl-s3);
  --ebl-rs-card-border: solid 1px var(--ebl-card-border-color);

  --ebl-rs—card-margin-bottom: var(--ebl-s3);
  --ebl-rs-card-margin-bottom: var(--ebl-s3);
  --ebl-rs—card-li-margin-bottom: var(--ebl-s2);
  --ebl-rs-card-li-margin-bottom: var(--ebl-s2);

  --ebl-rs-card-li-height: 31rem; /* 496px */
  --ebl-rs—card-height: 32.5rem; /* 520px */
  --ebl-rs-card-height: 32.5rem; /* 520px */

  /* --Resource Card Tile-- */
  --ebl-rs-card-tile-min-width: 15rem; /* 240px */
  --ebl-rs-card-tile-radius: 0.5rem; /* 8px */
  --ebl-rs-card-tile-padding: var(--ebl-s3);
  --ebl-rs-card-tile-border: solid 1px var(--ebl-card-border-color);
  --ebl-rs-card-tile-icon-shim: var(--ebl-s1);

  --ebl-rs-card-tile-text-margin-bottom: var(
    --ebl-s2
  ); /* b/w chip & card text */
  --ebl-rs-card-tile-text-margin-left: var(
    --ebl-s3
  ); /* b/w left icon & card text */
  --ebl-rs-card-tile-date-margin-left: var(
    --ebl-s2
  ); /* b/w main icon and card text */
  --ebl-rs-card-tile-date-margin-right: var(--ebl-s2); /* b/w date and chip */
  --ebl-rs-card-tile-button-margin-left: var(
    --ebl-s6
  ); /* b/w card content & buttons */

  /* --Lesson Card-- */
  --ebl-lesson-card-padding: var(--ebl-s3);
  --ebl-lesson-card-text-margin-left: var(--ebl-rs-card-tile-text-margin-left);
  --ebl-lesson-card-button-margin-left: var(--ebl-s3);
  --ebl-lesson-card-m-title-margin-bottom: var(--ebl-s2);

  --ebl-lesson-card-assign-marginleft: var(--ebl-s3);
  --ebl-lesson-card-assign-paddingtop: var(--ebl-s3);
  --ebl-lesson-card-assign-paddingright: var(--ebl-s3);
  --ebl-lesson-card-assign-paddingbottom: var(--ebl-s3);

  /* --Lesson Resource Card--*/
  --ebl-lesson-card-subtitle-marginbottom: var(--ebl-s4);
  --ebl-lesson-card-content-marginbottom: var(--ebl-s5);

  /* --Roster Card-- */
  --ebl-ro-card-min-width: 18rem; /* 288px */
  --ebl-ro-card-padding: var(--ebl-s4); /* left & right */
  --ebl-ro-card-padding-top: var(--ebl-s4);
  --ebl-ro-card-padding-bottom: var(--ebl-s4);

  --ebl-ro-card-header-button-margin-top: var(
    --ebl-s2
  ); /* above frameless button */
  --ebl-ro-card-header-title-margin-left: var(
    --ebl-s3
  ); /* b/w icon and title */
  --ebl-ro-card-header-title-margin-bottom: var(
    --ebl-s3
  ); /* b/w title & button */
  --ebl-ro-card-header—button-margin-bottom: var(
    --ebl-s3
  ); /* b/w button & content */

  /* --Roster Card Tile-- */
  --ebl-ro—card-tile-min-width: 15rem; /* 240px */
  --ebl-ro-card-tile-min-width: 15rem; /* 240px */
  --ebl-ro-card-tile-padding: var(--ebl-s3);
  --ebl-ro-card-tile-text-margin-bottom: var(--ebl-s4);

  --ebl-ro-card-tile-margin-left: 0; /* b/w icon & checkbox */
  --ebl-ro-card-tile-margin-right: var(--ebl-s3); /* b/w icon & title */
  --ebl-ro-card-tile-title-margin-top: 0.375rem; /* 6px */
  --ebl-ro-card-tile-icon-margin-left: var(--ebl-s6); /* b/w content & icon */

  /* --Recent Uploads Tile-- */
  --ebl-db-uploads-tile-status-width: 4.75rem; /* 76px */
  --ebl-db-uploads-tile-statis-inidcator-marginright: var(--ebl-db-uploads-tile-status-indicator-marginright);
  --ebl-db-uploads-tile-status-indicator-marginright: var(--ebl-s1);
  --ebl-db-uploads-tile-status-marginleft: var(--ebl-s6);

  /* --DB Assignment Card-- */
  --ebl-db-card-assignments-headercount-paddingright: 0.875rem; /* 14px */
  --ebl-db-card-assignments-m-headercount-paddingright: 0.625rem; /* 10px */

  /* --Blockbuster Section-- */
  --ebl-card-blockbuster-height-lg: 14.375rem; /* 230px */
  --ebl-card-blockbuster-marginbottom: var(--ebl-s6);

  /* --Assessment Card-- */
  --ebl-card-assessment-padding: var(--ebl-s3);
  --ebl-card-assessment—icon-marginleft: var(--ebl-s3);
  --ebl-card-assessment-icon-marginleft: var(--ebl-s3);
  --ebl-card-assessment—icon-marginright: var(--ebl-s2);
  --ebl-card-assessment-icon-marginright: var(--ebl-s2);
  --ebl-card-assessment-text-marginleft: var(--ebl-s3);
  --ebl-card-assessment-m-title-marginbottom: var(--ebl-s2); 

  /* --Question Card-- */ 
  --ebl-card—question-padding: var(--ebl-s3);
  --ebl-card-question-padding: var(--ebl-s3);
}

@media screen and (max-width: 599px) {
  :root {
    --ebl-lesson-card-text-margin-left: var(--ebl-s2);
  }
}

/*------------------------------------------------------------------
 * Dot Navigation
 *----------------------------------------------------------------*/

:root {
  --dot-nav-base: 16px;

  --dot-nav-size: 0.5rem; /* 8px */
  --dot-nav-spacing: var(--ebl-s3); /* 16px) */

  --dot-nav-color: var(--ebl-dark-gray);

  --dot-nav-active-bg: var(--dot-nav-color);
  --dot-nav-active-border: solid 1px var(--dot-nav-color);

  --dot-nav-inactive-bg: transparent;
  --dot-nav-inactive-border: var(--dot-nav-active-border);
}

/*------------------------------------------------------------------
 * Checkboxes
 *
 * @zeplin https://zpl.io/259eO8W
 *----------------------------------------------------------------*/

:root {
  --ebl-checkbox-size: 1.5rem; /* 24px */

  --ebl-checkbox-color: var(--ebl-dark-gray);
  --ebl-checkbox-partial-color: var(--ebl-mid-gray);
  --ebl-checkbox-selected-color: var(--ebl-action-color);
  --ebl-checkbox-disabled-color: var(--ebl-disabled-color);

  /* Distance from checkbox to label */
  --ebl-checkbox-margin-right: var(--ebl-s3);

  /* If using inline, add 24px to right of checkbox+label */
  --ebl-checkbox-inline-margin-right: var(--ebl-s6);

  /* For avatar checkbox selects */
  --ebl-avatar-checkbox-margin-right: var(--ebl-s3);
  --ebl-avatar-checkbox-label-margin-right: var(--ebl-s2);
}

/*------------------------------------------------------------------
 * Expansion Panels
 *
 * @zeplin https://zpl.io/2pjdrK8
 *----------------------------------------------------------------*/

:root {
  --ebl-exp-panel-margin-bottom: var(--ebl-s3);
  --ebl-exp-panel-margintop: var(--ebl-s4);
}

/*------------------------------------------------------------------
 * Simple Notification
 *
 * @zeplin https://zpl.io/bzRYLPl
 *----------------------------------------------------------------*/

:root {
  /* Simple notifications get Subhead 1 text styles */
  --ebl-notify-simple-font-family: var(--ebl-wf-headings);
  --ebl-notify-simple-font-size: var(--ebl-sh3);
  --ebl-notify-simple-line-height: var(--ebl-sh3-line-height);
  --ebl-notify-simple-letter-spacing: var(--ebl-sh3-letter-spacing);
  --ebl-notify-simple-color: var(--ebl-sh3-color);
  --ebl-notify-simple-font-weight: var(--ebl-sh3-weight);
  --ebl-notify-simple-marginbottom: var(--ebl-s4);

  --ebl-notify-simple-icon-margin: var(--ebl-s2);
}

/*------------------------------------------------------------------
 * Lists
 *
 * @zeplin https://zpl.io/adwA1N7
 *----------------------------------------------------------------*/

:root {
  --ebl-li-font-size: var(--ebl-sh3);
  --ebl-li-line-height: var(--ebl-sh3-line-height);
  --ebl-li-letter-spacing: var(--ebl-sh3-letter-spacing);
  --ebl-li-color: var(--ebl-sh3-color);
  --ebl-li-weight: var(--ebl-sh3-weight);

  --ebl-li-margin-bottom: var(--ebl-s3);
  --ebl-li-large-marginbottom: var(--ebl-s7);

  --ebl-li-icon-margin-right: var(--ebl-s3);

  --ebl-simple-list-margintop: var(--ebl-s3);

  /* LIST VARIANT USED W ACCORDION IN TOC COMPONENT */
  --ebl-list-generic1-icon-marginright: var(--ebl-s2);
  --ebl-list-generic1-minwidth: 19rem;/* 304px */
  --ebl-list-generic1-listitem-height: calc(var(--ebl-s6) + var(--ebl-s3));
  --ebl-list-generic1-padding: var(--ebl-s2);
}

/*------------------------------------------------------------------
 * Messaging
 *
 * @zeplin https://zpl.io/agpY5M1 Alert
 *         https://zpl.io/blAN6GD Empty
 *         https://zpl.io/2j9GkzO Info Banner
 *----------------------------------------------------------------*/

:root {
  /* --Alert Banner-- */
  --ebl-alert-notif-min-width: 18rem; /* 288px */
  --ebl-alert-banner-radius: 0.5rem; /* 8px */
  --ebl-alert-notif-margintop: var(--ebl-s3); /* 16px */
  --ebl-alertnotif-sm-margintop: var(--ebl-s2); /* 8px */
  --ebl-alertnotif-label-marginright: var(--ebl-s2); /* 8px */
  --ebl-alertnotif-marginbottom: var(--ebl-s3); /* 16px */
  --ebl-alertnotif-sm-marginbottom: var(--ebl-s2);/* 8px */

  --ebl-alert-notif-sm-padding: var(--ebl-s3); /* 16px all around */
  --ebl-alert-notif-padding: var(--ebl-s4); /* 24px all around */

  --ebl-alert-notif-icon-sm-margin-right: var(--ebl-3);
  --ebl-alert-notif-icon-sm-padding: 0.125rem; /* 2px */

  --ebl-alert-notif-icon-margin-right: var(--ebl-s4);

  --ebl-alert-notif-error-bg: var(--ebl-signal-error-light);
  --ebl-alert-notif-error-icon-color: var(--ebl-signal-error);

  --ebl-alert-notif-warning-bg: var(--ebl-signal-warning-light);
  --ebl-alert-notif-warning-icon-color: var(--ebl-signal-warning);

  --ebl-alert-notif-info-bg: var(--ebl-signal-info-light);
  --ebl-alert-notif-info-icon-color: var(--ebl-signal-info);

  --ebl-alert-notif-success-bg: var(--ebl-signal-success-light);
  --ebl-alert-notif-success-icon-color: var(--ebl-signal-success);

  /* --Empty Messaging-- */
  --ebl-empty-headline-bg: var(--ebl-mktg-beige1);

  --ebl-empty-headline-padding: var(--ebl-s3);

  --ebl-empty-headline-compact-margin-bottom: 0;
  --ebl-empty-headline-title-margin-bottom: var(--ebl-s2);
  --ebl-empty-headline—text-margin-bottom: var(--ebl-s2);
  --ebl-empty-headline-icon-margin-bottom: var(--ebl-s3);

  /* --Info Banner-- */
  --ebl-info-banner-min-width: 18rem; /* 288px */
  --ebl-info-banner-padding: var(--ebl-s4); /* 24px all around */
  --ebl-info-banner-radius: 0.5rem; /* 8px */
  --ebl-info-banner-shadow: var(--ebl-shadow-8);
  --ebl-infobanner—text-marginbottom: var(--ebl-s3);
  --ebl-infobanner-text-marginbottom: var(--ebl-s3); 
  --ebl-infobanner-margin: var(--ebl-s4);

  --ebl-info-banner-icon-margin-right: var(--ebl-s4);
  --ebl-info-banner—button-margin-left: var(--ebl-s6);
  --ebl-info-banner—button-margin-top: var(--ebl-s3);
  --ebl-info-banner—button-margin-bottom: var(--ebl-s2);
  --ebl-info-banner-button-margin-left: var(--ebl-s6);
  --ebl-info-banner-button-margin-top: var(--ebl-s3);
  --ebl-info-banner-button-margin-bottom: var(--ebl-s2);

  --ebl-info-banner-error-bg: var(--ebl-signal-error-light);
  --ebl-info-banner-error-icon-color: var(--ebl-signal-error);

  --ebl-info-banner-warning-bg: var(--ebl-signal-warning-light);
  --ebl-info-banner-warning-icon-color: var(--ebl-signal-warning);

  --ebl-info-banner-info-bg: var(--ebl-signal-info-light);
  --ebl-info-banner-info-icon-color: var(--ebl-signal-info);

  --ebl-info-banner-success-bg: var(--ebl-signal-success-light);
  --ebl-info-banner-success-icon-color: var(--ebl-signal-success);
}

/*------------------------------------------------------------------
 * Dropdown Menus
 *
 * @zeplin https://zpl.io/2ZB14yq (inline)
 *         https://zpl.io/amwAe5e (user)
 *----------------------------------------------------------------*/

:root {
  /* --Dropdown Frame (closed state)-- */
  --ebl-dropdown-min-width: 8.1875rem; /* 131px */
  --ebl-dropdown-height: 2.5rem; /* 40px -- the closed height */
  --ebl-dropdown-border-radius: 0.25rem; /* 4px */
  --ebl-dropdown-padding-right: var(--ebl-s6);
  --ebl-dropdown-padding-left: var(--ebl-s3);

  --ebl-dropdown-border-color: var(--ebl-mid-gray);
  --ebl-dropdown-hover-border-color: var(--ebl-black);

  /* --Icon-- */
  --ebl-dropdown-icon-margin-right: var(--ebl-s3);
  --ebl-dropdown-icon-margin-left: var(--ebl-s6);

  /* --Dropdown Panel-- */
  --ebl-dropdown-panel-max-height: 14.375rem; /* 230px -- the max open panel height before scrolling */
  --ebl-dropdown-panel-maxwidth: 31.25rem; /* 500px */
  --ebl-dropdown-panel-footer-maxheight: 18.375rem; /* 294px */
  --ebl-dropdown-panel-minwidth: 18rem; /* 288px */
  --ebl-dropdown-panel-padding: var(--ebl-s2) var(--ebl-s3);
  --ebl-dropdown-panel-padding-top: var(--ebl-s2);
  --ebl-dropdown-panel-padding-bottom: var(--ebl-s2);
  --ebl-dropdown-panel-padding-left: var(--ebl-s3);
  --ebl-dropdown-panel-padding-right: var(--ebl-s3);
  --ebl-dropdown-panel-shadow: var(--ebl-shadow-8);
  --ebl-dropdown-button-group-margintop: var(--ebl-s3);

  /* --Dropdown List Items-- */
  --ebl-dropdown-li-height: 2.5rem; /* 40px -- each list item */
  --ebl-dropdown-li-hover-color: var(--ebl-light-gray);
  --ebl-dropdown-li-selected-color: var(--ebl-light-mid-gray);

  /* --Combo Box (closed state)-- */
  --ebl-Combo-box-padding-right: var(--ebl-s7);

  --ebl-dropdown-page-margin-bottom: var(--ebl-s2);
}

/*------------------------------------------------------------------
 * Primary & Secondary Navigation
 *
 * @zeplin https://zpl.io/aR0p0y0 (main nav)
 *         https://zpl.io/bPnJgPx (secondary nav)
           https://zpl.io/2EpPPJM (tertiary nav)

 *----------------------------------------------------------------*/

/* --Main Navigation-- */
:root {
  --ebl-nav-height: 4rem; /* 64px */

  --ebl-nav-padding-right: var(--ebl-s2);
  --ebl-nav-padding-left: 0;

  --ebl-nav-shadow: var(--ebl-shadow-1);
  --ebl-nav-bg: var(--ebl-white);

  /* --Logo-- */
  --ebl-logo-color: var(--ebl-mid-gray);
  --ebl-logo-color-hover: var(--ebl-black);

  /* --Hamburger Menu-- */
  --ebl-menu-color: var(--ebl-logo-color);
  --ebl-menu-color-hover-selected: var(--ebl-logo-color-hover);

  /* --Hamburger Menu Items (top-level)-- */
  --ebl-burger-padding-left: var(--ebl-s6);
  --ebl-burger-padding-right: var(--ebl-s4);

  /* --Pill-shaped Buttons-- */
  --ebl-nav-btn-height: var(--ebl-button-height-lg);
  --ebl-nav-btn-radius: calc(var(--ebl-button-height-lg) / 2);
  --ebl-nav-btn-padding: 0 var(--ebl-s4);
  --ebl-nav-btn-margin: var(--ebl-s1); /* total of 8px between buttons */

  --ebl-nav-btn-font-color: var(--ebl-text-black);
  --ebl-nav-btn-bg: var(--ebl-nav-bg);
  --ebl-nav-btn-bg-hover: var(--ebl-light-brand);
  --ebl-nav-btn-bg-selected: var(--ebl-brand);

  /* --Settings Cog-- */
  --ebl-settings-color: var(--ebl-logo-color);
  --ebl-settings-hover-selected: var(--ebl-logo-color-hover);

  /* --Avatar-- */
  --ebl-avatar-margin-left: var(--ebl-s3);
  /* Additional avatar variables in avatars.css */
}

/* Update margins & paddings from sm + md breakpoints */
@media screen and (min-width: 600px) and (max-width: 1279px) {
  :root {
    --ebl-nav-padding-left: var(--ebl-s2);
  }
}

/* Update margins & paddings from lg breakpoint */
@media screen and (min-width: 1280px) {
  :root {
    --ebl-nav-padding-left: var(--ebl-s3);
    --ebl-nav-padding-right: var(--ebl-s3);
  }
}

/* --Sub Navigation-- */
:root {
  --ebl-subnav-height: 3rem; /* 48px */
  --ebl-subnav-border-top: solid 1px var(--ebl-disabled-color);
  --ebl-subnav-border-top-color: var(--ebl-disabled-color);
  --ebl-subnav-border-top-style: solid;
  --ebl-subnav-border-top-width: 1px;
  /* NOT ADDED TO FIGMA */
  --ebl-subnav-border-bottom: var(--ebl-shadow-1);


  --ebl-subnav-indicator-padding: 0 var(--ebl-s6);
  --ebl-subnav-indicator-bottom-border: solid 0.25rem transparent; /* 4px */
  --ebl-subnav-indicator-bottom-border-color: transparent;
  --ebl-subnav-indicator-bottom-border-width: 0.25rem /* 4px */;
  --ebl-subnav-indicator-bottom-border-style: solid;

  /* these colors refer to the bottom border on subnav indicators */
  --ebl-subnav-indicator-selected: var(--ebl-action-color);
  --ebl-subnav-indicator-hover: var(--ebl-light-action-color);

  /* hamburger list items at smaller BPs */
  --ebl-subnav-li-height: var(--ebl-s7);

  --ebl-subnav-li-bg: var(--ebl-background);

  --ebl-subnav-li-padding-top: var(--ebl-s2);
  --ebl-subnav-li-padding-right: var(--ebl-s4);
  --ebl-subnav-li-padding-bottom: var(--ebl-s2);
  --ebl-subnav-li-padding-left: var(--ebl-s7);

  /* added unified declaration for use in Figma */
  --ebl-subnav-li-padding: var(--ebl-s2) var(--ebl-s4) var(--ebl-s2) var(--ebl-s7);
}

/* --Tertiary Navigation-- */
:root {
  --ebl-tert-nav-height: 3rem; /* 48px */

  --ebl-tert-nav-border-bottom: solid 0.0625rem var(--ebl-disabled-color); /* 1px */
  /* Split above values for consumption in Figma */
  --ebl-tert-nav-border-bottom-color: var(--ebl-disabled-color);
  --ebl-tert-nav-border-bottom-width: 0.0625rem; /* 1px */
  --ebl-tert-nav-border-bottom-style: solid;

  --ebl-tert-nav-indicator-border: solid 0.125rem transparent; /* 2px */
  /* Split above values for consumption in Figma */
  --ebl-tert-nav-indicator-border-color: transparent;
  --ebl-tert-nav-indicator-border-width: 0.125rem; /* 2px */
  --ebl-tert-nav-indicator-border-style: solid;

  --ebl-tert-nav-tabs-padding: var(--ebl-s4);

  /* these colors refer to the bottom border on tertiary indicators */
  --ebl-tert-nav-indicator-selected: var(--ebl-action-color);
  --ebl-tert-nav-indicator-hover: var(--ebl-light-action-color);

  --ebl-tert-nav-scroll-hover: var(--ebl-light-gray);

  /* For lg BP and above */
  --ebl-tert—nav-radius: 0.25rem; /* 4px */
  /* REMAPPED TO REMOVE EMDASH CHARACTER IN VAR NAME */
  --ebl-tert-nav-radius: 0.25rem; /* 4px */

  --ebl-tert-nav-bg-selected: var(--ebl-light-gray);
  --ebl-tert-nav-bg-hover: var(--ebl-light-mid-gray);

  --ebl-tert-nav-indicator-border-radius: 0.25rem 0rem 0rem 0.25rem;

  --ebl-tert-nav-padding-left: var(--ebl-s3);
  --ebl-tert-nav-padding-right: var(--ebl-s3);

  --ebl-tert-nav-margin: var(--ebl-s3);
  --ebl-tert-nav-icon-margin: var(
    --ebl-s5
  ); /* B/w left icon and right list item text */
}

/* updates border from lg BP */
@media screen and (min-width: 1280px) {
  :root {
    --ebl-tert-nav-indicator-border: solid 0.25rem var(--ebl-action-color); /* 4px */
  }
}

/* --Dot Navigation-- */
:root {
  --ebl-dot-nav-base: 16px;

  --ebl-dot-nav-size: 0.5rem; /* 8px */
  --ebl-dot-nav-spacing: var(--ebl-s3); /* 16px) */

  --ebl-dot-nav-color: var(--ebl-dark-gray);

  --ebl-dot-nav-active-bg: var(--ebl-dot-nav-color);
  --ebl-dot-nav-active-border: solid 1px var(--ebl-dot-nav-color);
  /* Split above values for consumption in Figma */
  --ebl-dot-nav-active-border-color: var(--ebl-dot-nav-color);
  --ebl-dot-nav-active-border-width: 1px;
  --ebl-dot-nav-active-border-style: solid;

  --ebl-dot-nav-inactive-bg: transparent;
  --ebl-dot-nav-inactive-border: var(--ebl-dot-nav-active-border);
}

/* --Drawer-- */
:root {
 --ebl-drawer-header-padding: var(--ebl-s3) var(--ebl-s3) var(--ebl-s3) var(--ebl-s4);
 --ebl-drawer-padding: var(--ebl-s4);
 --ebl-drawer-m-header-padding: var(--ebl-s2) var(--ebl-s2) var(--ebl-s2) var(--ebl-s3);
 --ebl-drawer-m-padding: var(--ebl-s3);
 --ebl-drawer-width-default: 31.25rem; /* 500px */
 --ebl-drawer-width-mobile: 20rem; /* 320px */
}

/* Filter TOC */
:root {
--ebl-tocfilter-listitem-paddingleft: var(--ebl-s3);
--ebl-tocfilter-listitem-paddingright: var(--ebl-s3);
--ebl-tocfilter-listitem-paddingtop: var(--ebl-s3);
--ebl-tocfilter-listitem-paddingbottom: var(--ebl-s3);

--ebl-tocfilter-listitem-title-color: var(--ebl-text-black);
--ebl-tocfilter-listitem-subtitle-color: var(--ebl-text-black);
--ebl-tocfilter-listitem-icon-color: var(--ebl-dark-gray);

--ebl-tocfilter-listitem-selected-backgroundcolor: var(--ebl-light-gray);
--ebl-tocfilter-listitem-selected-icon-color: var(--ebl-dark-gray);
--ebl-tocfilter-listitem-selected-indicator-color: var(--ebl-action-color);
}
/* FILTER TOC */

/*------------------------------------------------------------------
 * Inputs
 *
 * @zeplin https://zpl.io/2jRGkw6
 *----------------------------------------------------------------*/
:root {
  /* Standard Text Input */
  --ebl-input-min-width: 8.1875rem; /* 131px */
  --ebl-input-radius: 0.25rem; /* 4px */
  --ebl-input-height: 2.5rem; /* 40px */
  --ebl-input-marginbottom: var(--ebl-s3); /* 16px */
  --ebl-input-shim-marginbottom: var(--ebl-s1);

  --ebl-input-border-color: var(--ebl-mid-gray);
  --ebl-input-border-hover-color: var(--ebl-alert-black);

  --ebl-input-marginbottom-xl: var(--ebl-s6); /* 40px */

  /* Error State - border thickens from 1px -> 2px */
  --ebl-input-border-error: solid 2px var(--ebl-signal-error);
  --ebl-input-bordercolor-error: var(--ebl-signal-error);
  --ebl-input-borderwidth-error: 2px;
  --ebl-input-borderstyle-error: solid;

  --ebl-input-padding-left: var(--ebl-s3);
  --ebl-input-padding-right: var(--ebl-s3);

  --ebl-input-label-margin-bottom: 0;

  /* Combo Box */
  --ebl-combo-box-padding-right: var(--ebl-s7);

  /* --Multiline Text Input-- */
  --ebl-input-max-height: 6.25rem; /* 100 */
}

/*------------------------------------------------------------------
 * Linear Progress Variables
 *
 * @zeplin https://zpl.io/VQngmZP
 *----------------------------------------------------------------*/

:root {
  --ebl-linear-progress-text-color: var(--ebl-signal-success);

  --ebl-linear-progress-range-color: var(--ebl-border-hairline-gray);
  --ebl-linear-progress-value-color: var(--ebl-signal-success);

  --ebl-linear-progress-margin-left: var(--ebl-s1); /* 4px */

  --ebl-linear-progress-bar-height: 0.5rem; /* 8px */
  --ebl-linear-progress-bar-radius: calc(
    var(--ebl-linear-progress-bar-height) / 2
  );
  --ebl-linear-progress-margin: var(--ebl-s2); /* 8px */
  --ebl-linear-progress-padding: var(--ebl-s4); /* 24px */
}

/*------------------------------------------------------------------
 * Data Tables
 *
 * * sortable table
 * * pagination
 *----------------------------------------------------------------*/

:root {
  --ebl-table-header-border-color: var(--ebl-secondary-2); /* default color */
  --ebl-table-header-border-width: 0.25rem; /* 4px */
  --ebl-table-radius: 0.25rem; /* 4px */
  --ebl-table-border-color: var(--ebl-card-border-color);
  --ebl-table-border-width: 0.0625rem; /* 1px */
  --ebl-table-border: solid var(--ebl-table-border-width)
    var(--ebl-table-border-color);

  --ebl-table-zebra-bg: var(--ebl-background);

  --ebl-table-header-cell-padding: var(--ebl-s3); /* 16px all around */
  --ebl-table-header-text-color: var(--ebl-text-gray);

  /* between label & sort arrow (when visible) */
  --ebl-table-header-text-margin-right: var(--ebl-s2);

  --ebl-table-cell-padding: var(--ebl-s3);

  /* --Table Interactions-- */
  --ebl-table-header-text-active: var(--ebl-text-black);
  --ebl-table-row-hover-color: var(--ebl-light-action-color);
  --ebl-table-row-selected-color: var(--ebl-mid-action-color);

  /* --Compact Tables-- */
  --ebl-table-c-header-border-width: 0.125rem; /* 2px for compact tables */
  --ebl-table-c-cell-padding: var(--ebl-s2) var(--ebl-s3);

  /* --Table Pagination-- */
  --ebl-table-pagination-border: var(--ebl-card-border);

  --ebl-table-pagination-min-width: 18rem; /* 288px */

  --ebl-table-pagination-padding: var(--ebl-s1);
  --ebl-table-pagination-radius: 0.5rem; /* 8px */

  --ebl-table-pagination-button-margin-left: var(--ebl-s4);
  --ebl-table-pagination-m-margin-top: var(--ebl-s2);
  --ebl-table-pagination-m-margin-bottom: 0.5rem; /* 8px */

  /* --Mobile Table-- */
  --ebl-table-m-sort-margin-left: var(--ebl-s2);
  --ebl-table-m-sort-margin-bottom: var(--ebl-s3);
  --ebl-table-m-sort-minWidth: 9.375rem; /* 150px */

  /* min height here in case of long title */
  --ebl-table-m-header-min-height: 4rem; /* 64px */

  --ebl-table-m-header-icon-margin-left: var(--ebl-s3);

  --ebl-table-m-padding-left: var(--ebl-s3);
  --ebl-table-m-padding-right: var(--ebl-s3);

  /* only needed when table has selectable rows */
  --ebl-table-m-checkbox-margin-right: var(--ebl-s3);
  --ebl-table-m-checkbox-accordion-indent: var(--ebl-s6);

  --ebl-table-m-accordion-open-padding-top: var(--ebl-s4);
  --ebl-table-m-accordion-open-padding-bottom: var(--ebl-s4);

  --ebl-table-m-accordion-open-bg: var(--ebl-background);
  --ebl-table-m-accordion-child-padding: var(--ebl-s2) 0;
  --ebl-table-m-accordion-child-border: solid 1px var(--ebl-table-border-color);

  --ebl-table-m-accordion-selected-open-bg: var(--ebl-light-action-color);
  --ebl-table-m-accordion-selected-open-child-border: solid 1px
    var(--ebl-dark-gray);
}

/*------------------------------------------------------------------
 * Page Header Variables
 *
 * @zeplin https://zpl.io/VxX8kRk(Page Header)
 *----------------------------------------------------------------*/

:root {
  --ebl-page-header-eyebrow-color: var(--ebl-text-gray);
  --ebl-page-header-subhead-color: var(--ebl-text-black);

  --ebl-page-header-max-width: 37.5rem; /* 600px */
  --ebl-page-header-margin-top: var(--ebl-s6);
  --ebl-page-header-margin-bottom: var(--ebl-s7);
  --ebl-header-margin-bottom: var(--ebl-page-header-margin-bottom);
}

/* Mobile */
@media screen and (max-width: 600px) {
  :root {
    --ebl-h1: 2.25rem; /* 36px */
    --ebl-h1-line-height: 3rem; /* 48px */
    --ebl-h1-letter-spacing: -0.0125rem; /* -.2px */
  }
}

:root {
  --ebl-modal-margin: var(--ebl-s7);
  --ebl-modal-title-margin-bottom: var(--ebl-s3);
  --ebl-modal-text-margin-bottom: var(--ebl-s4);
  --ebl-modal-label-margin-bottom: var(--ebl-s3);
  --ebl-modal-input-margin-bottom: var(--ebl-s3);
  --ebl-modal-date-picker-margin-bottom: var(--ebl-s3);
  --ebl-modal-m-text-input-margin-bottom: var(--ebl-s3);
  --ebl-modal-filter-margin-bottom: var(--ebl-s2);
  --ebl-modal-button-group-margin-top: var(--ebl-s6);
  --ebl-modal-padding: var(--ebl-s4);
  --ebl-modal-header-icon-marginright: var(--ebl-s2);
  --ebl-modal-alert-marginbottom: var(--ebl-s4);


  /* --Roster Modal-- */
  --ebl-modal-stepper-margin-bottom: var(--ebl-s6);
  --ebl-modal-stepper-margin-bottom: var(--ebl-s5);
  --ebl-modal-details-header-margin-bottom: var(--ebl-s2);
  --ebl-modal-details-header-margin-shim: var(--ebl-s2);
  --ebl-modal-details-block-margin-bottom: var(--ebl-s4);
  --ebl-modal-alert-notif-margin-bottom: var(--ebl-s2);
  --ebl-modal-search-width: 18.375rem; /* 294px */
  --ebl-search-marginright: var(--ebl-s5);
  --ebl-modal-radio-margin-bottom: var(--ebl-s2);
  --ebl-modal-form-fields-header-margin-top: var(--ebl-s3);
  --ebl-modal-form-fields-header-margin-bottom: var(--ebl-s2);
  --ebl-modal-form-fields-block-margin-bottom: var(--ebl-s4);
  --ebl-modal-upload-button-margin-left: var(--ebl-s2);
  --ebl-modal-upload-button-margin-bottom: var(--ebl-s2);
  --ebl-modal-checkbox-block-margin-bottom: var(--ebl-s4);
  --ebl-modal-feedback-block-padding: var(--ebl-s4);

  /* --Messaging Modal (success/error)-- */
  --ebl-modal-toaster-margintop: var(--ebl-s3);
  --ebl-modal-toaster-marginbottom: var(--ebl-s3);

  /* --Book Modal-- */
  --ebl-book-margin-right: var(--ebl-s4);
  --ebl-book-margin-bottom: var(--ebl-s2);
  --ebl-book-title-margin-bottom: var(--ebl-s2);
  --ebl-modal-book-title-margin-bottom: var(--ebl-s3);
  --ebl-modal-details-margin-bottom: var(--ebl-s3);

  /* --Standard Detail Modal-- */
  --ebl-modal-sdm-content-maxheight: 30.4375rem; /* 487px */
  --ebl-modal-sdm-list-item-bordertop: solid 1px var(--ebl-card-border);
  --ebl-modal-sdm-list-item-bordertop-color: var(--ebl-card-border);
  --ebl-modal-sdm-list-item-bordertop-style: solid;
  --ebl-modal-sdm-list-item-bordertop-width: 1px;

  --ebl-modal-sdm-item-padding: var(--ebl-s4);
  --ebl-modal-sdm-item-bg-color: var(--ebl-background);

  --ebl-modal-sdm-item-status-correct-marginright: var(--ebl-s3);
  --ebl-modal-sdm-item-status-icon-marginright: var(--ebl-s1);
  --ebl-modal-sdm-item-status-correct-color: var(--ebl-signal-success);

  /* --Virtual Classroom Passcode Modal-- */
  --ebl-modal-button-shim-paddingLeft: var(--ebl-s2);
  --ebl-modal-button-shim-paddingTop: var(--ebl-s3);

  /* --Filter Modal-- */
  --ebl-modal-filter-button-margintop: var(--ebl-s3);
  --ebl-modal-filter-button-marginbottom: var(--ebl-s4);

}

:root {
  --ebl-book-cover-radius: var(--ebl-s2);
  --ebl-book-title-margin-bottom: var(--ebl-s2);
  --ebl-book-cover-min-width: 136px;
}

:root {
  --ebl-popover-width: 18rem; /* 288px */
  --ebl-popover-padding: var(--ebl-s2) 0 var(--ebl-s2) var(--ebl-s3);
  --ebl-popover-header-margintop: var(--ebl-s2);
  --ebl-popover-header-margin-bottom: var(--ebl-s4);
  --ebl-popover-header-icon-marginright: var(--ebl-s2);
  --ebl-popover-header-text-marginbottom: var(--ebl-s3); /* 16px */
  --ebl-popover-header-button-marginright: var(--ebl-s2);
  --ebl-popover-content-minheight: 8.375rem; /* 134px */
  --ebl-popover-content-maxheight: 20rem; /* 320px */
  --ebl-popover-content-marginbottom: var(--ebl-s2);
  --ebl-popover-content-marginright: var(--ebl-s3);
  --ebl-popover-button-margintop: var(--ebl-s4);
  --ebl-popover-button-marginbottom: var(--ebl-s3); /* 16px */
  --ebl-popover-alertnotif-margintop: var(--ebl-s4);
}

:root {
  --ebl-logo-tile-height: 6.625rem; /*106px*/
  --ebl-logo-tile-min-width: 13.75rem; /*288px*/
}

:root {
  --ebl-fp-min-width: 18rem; /*288px*/
  --ebl-fp-padding: var(--ebl-s3);
  --ebl-fp-text-margin-bottom: var(--ebl-s4);
  --ebl-fp-input-margin-top: var(--ebl-s2);
  --ebl-fp-input-margin-bottom: var(--ebl-s3);
}

:root {
  --ebl-error-block-margin-bottom: var(--ebl-s6);
}

:root {
    --ebl-accordion-header-margintop: var(--ebl-s0);
    --ebl-accordion-padding: var(--ebl-s3);
    --ebl-accordion-radio-marginbottom: var(--ebl-s2);
    --ebl-accordion-label-marginbottom: var(--ebl-s2);
    --ebl-accordion-input-marginbottom: var(--ebl-s3);
    --ebl-accordion-formfields-marginbottom: var(--ebl-s4);
    --ebl-accordion-body-marginbottom: var(--ebl-s4);
    --ebl-accordion-checkbox-marginbottom: var(--ebl-s2);
    --ebl-accordion-checkbox-block-marginbottom: var(--ebl-s3);
    --ebl-accordion-label-slim-marginbottom: var(--ebl-s2);
    --ebl-accordion-label-marginbottom-lg: var(--ebl-s5);
    --ebl-accordion-error-marginbottom: var(--ebl-s6);
    --ebl-accordion-label-margintop: var(--ebl-s3);
    --ebl-accordion-icon-marginleft: var(--ebl-s2);
    --ebl-accordion-icon-marginright: var(--ebl-s2);

    /* ADDED FOR TOC ACCORDION */

    --ebl-accordion-header-icon-marginright: var(--ebl-s3);
    --ebl-accordion-header-padding: var(--ebl-s3) var(--ebl-s4) var(--ebl-s3) var(--ebl-s4);
    --ebl-accordion-minwidth: 20rem; /* 320px */;
    --ebl-accordion-borderradius: var(--ebl-s2);
    --ebl-accordion-header-bg-padding: var(--ebl-s2);
    --ebl-accordion-list-borderradius: var(--ebl-s2);

}
:root {
  /* TODO: move to buttongroup.css */
  --ebl-button-group-margintop-xl: var(--ebl-s7); /* 64px */
  --ebl-button-group-margintop: var(--ebl-s2); /* 8px */
  --ebl-button-group-marginbottom: var(--ebl-s3); /* 16px */
  --ebl-button-group-margin-bottom: var(--ebl-s3); /* 16px */

  /* TODO: move to label.css */
  --ebl-label-margintop-lg: var(--ebl-s6);
  --ebl-label-marginbottom: var(--ebl-s2);
  --ebl-label-error-marginbottom: var(--ebl-s6);
  --ebl-label-marginbottom-md: var(--ebl-s4);
  --ebl-label-margin-bottom: var(--ebl-label-marginbottom); /* maps new var */

  /* TODO: define back-button component or refactor; move to backbutton.css */
  --ebl-back-button-margin-top: var(--ebl-s4);
  --ebl-backbutton-icon-marginleft: var(--ebl-s2);
  --ebl-backbutton-margin: var(--ebl-s2);

  /* TODO: move to filter-component.css */
  --ebl-filterblock-margintop: var(--ebl-s4);
  --ebl-filterblock-header-marginbottom: var(--ebl-s3);
  --ebl-filterblock-inputs-marginbottom: var(--ebl-s4);
  --ebl-filterblock-marginbottom: var(--ebl-s4);
  --ebl-filterblock-button-marginleft: var(--ebl-s4);

  /* TODO: remove, to be subsumed by per-component spacing when globally available */
  --ebl-content-margin-3: var(--ebl-s3);
  --ebl-content-margin-4: var(--ebl-s4);
  --ebl-content-margin-6: var(--ebl-s6);

  /* TODO: move to progressbar component file */
  --ebl-linear-progress-margin: var(--ebl-s2);
  --ebl-linear-progress-padding: var(--ebl-s4);

  /* TODO: move to component-specific file when ready */
  --ebl-badge-margintop: var();
  --ebl-badge-marginright: 0.8rem; /* 20px */
  --ebl-badge-marginleft: var(--ebl-s2);

  /* TODO: encapsulate hero banner styles and substyles to separate file, move this when ready */
  --ebl-hero-image-margintop: var(--ebl-s4);
  --ebl-hero-image-marginbottom: var(--ebl-s4);
  --ebl-herobanner-title-marginbottom: var(--ebl-s2);
  --ebl-herobanner-marginbottom: var(--ebl-s8);

  /* PL styles -- to be moved at a future date */
  --ebl-avatarblock-avatar-marginbottom: var(--ebl-s4);
  --ebl-avatarblock-avatar-marginbottom-md: var(--ebl-s5);
  --ebl-avatarblock-subtitle-marginbottom: var(--ebl-s4);
  --ebl-avatarblock-divider-marginbottom: var(--ebl-s4);
  --ebl-authorpage-content-marginbottom: var(--ebl-s8);
  --ebl-authorpage-content-marginbottom-sm: var(--ebl-s7);

  /* PL Author page - Single/Multiple Author treatments */
  --ebl-avatarblocksm-margintop: var(--ebl-s3);
  --ebl-avatarblocksm-marginbottom: var(--ebl-s6);
  --ebl-avatarblocksm-text-marginleft: var(--ebl-s3);
  --ebl-avatarblocksm-text-marginleft-sm: var(--ebl-s2);
  --ebl-avatarblocksm-marginbottom-sm: var(--ebl-s5);
  --ebl-avatarblocksm-separator: var(--ebl-s6);
  --ebl-avatarblocksm-separator-sm: var(--ebl-s3);
  --ebl-avatarblocksm-popover-marginleft: var(--ebl-s4);

  /* Library Landing page */
  --ebl-librarypage-searchheader-marginbottom: var(--ebl-s4);
  --ebl-librarypage-contentblock-marginbottom: var(--ebl-s8);
  --ebl-library-gridheader-marginbottom: var(--ebl-s5);

  /* PL 404 Page Vars */
  --ebl-pageerror-margintop: var(--ebl-s3);
  --ebl-pageerror-heading-marginbottom: var(--ebl-s2);
  --ebl-pageerror-subhead-marginbottom: var(--ebl-s6);
  --ebl-pageerror-content-marginbottom: var(--ebl-s6);

  --ebl-pagination-margintop: var(--ebl-s3);
  --ebl-pagination-marginbottom: var(--ebl-s3);

   /* Licence Permission Page */
   --ebl-divider—horizontal-marginbottom: var(--ebl-s3); /* 16px */
   --ebl-divider—vertical-marginleft: var(--ebl-s3); /* 16px */
   --ebl-divider—vertical-marginright: var(--ebl-s3); /* 16px */
   --ebl-text—marginleft: var(--ebl-s2); /* 8px */
  /* REMAPPED TO REMOVE EMDASH CHARACTER IN VAR NAME */
   --ebl-divider-horizontal-marginbottom: var(--ebl-s3); /* 16px */
   --ebl-divider-vertical-marginleft: var(--ebl-s3); /* 16px */
   --ebl-divider-vertical-marginright: var(--ebl-s3); /* 16px */
   --ebl-text-marginleft: var(--ebl-s2); /* 8px */

  /* Teacher Dashboard */
   --ebl-carousel-marginbottom: var(--ebl-s6);
   --ebl-assignments-block-marginbottom: var(--ebl-s5);

  /* Generic Content Block */
   --ebl-contentblock-marginbottom: var(--ebl-s6); 
   --ebl-contentblock-label-marginbottom: var(--ebl-s3);
   --ebl-contentblock-icon-primary-marginright: var(--ebl-s3);
   --ebl-contentblock-icon-secondary-marginright: var(--ebl-s2);
   --ebl-contentblock-icon-shim: var(--ebl-s0);
}

:root {
    --ebl-tile-margintop: var(--ebl-s3);
    --ebl-tile-button-padding: var(--ebl-s2);
    --ebl-tile-text-paddingleft: var(--ebl-s3);
}
/*------------------------------------------------------------------
 * Data Viz
 *
 * @zeplin https://zpl.io/blqrmkD
 *
 *----------------------------------------------------------------*/

:root {
  /* --Clustered Row Chart-- */
  --ebl-chart-cr-bar-height: 3rem; /* 48px */
  --ebl-chart-cr-bar-radius: 4px;
  --ebl-chart-cr-bar-maxWidth: 9.375rem; /* 150px */
  --ebl-chart-cr-hover-active-borderwidth: 2px;

  --ebl-chart-cr-title-marginbottom: var(--ebl-s4);
  --ebl-chart-cr-label-marginright: var(--ebl-s3);
  --ebl-chart-cr-row-marginbottom: var(--ebl-s1);
  --ebl-chart-cr-bar-marginleft: var(--ebl-s2);
  --ebl-chart-cr-avatar-marginleft: var(--ebl-s2);
  --ebl-chart-cr-legend-margintop: var(--ebl-s6);
  --ebl-chart-cr-legend-item-marginright: var(--ebl-s6);

  --ebl-chart-cr-belowlevel-color: var(--ebl-signal-error);
  --ebl-chart-cr-onlevel-color: var(--ebl-signal-warning);
  --ebl-chart-cr-abovelevel-color: var(--ebl-signal-success);

  --ebl-chart-cr-belowlevel-color-light: var(--ebl-signal-error-light);
  --ebl-chart-cr-onlevel-color-light: var(--ebl-signal-warning-light);
  --ebl-chart-cr-abovelevel-color-light: var(--ebl-signal-success-light);

  --ebl-chart-cr-hoverborder-color: var(--ebl-black);

  /* --Stacked Horizontal Bar Chart-- */
  --ebl-chart-shbc-band-height: 0.5rem; /* 8px */

  --ebl-chart-shbc-node-size-sm: 0.75rem; /* 12px */
  --ebl-chart-shbc-node-size-md: 1.5rem; /* 24px */
  --ebl-chart-shbc-node-size-lg: 2rem; /* 32px */

  --ebl-chart-shbc-node-border-sm-md: solid 0.25rem var(--ebl-white); /* 4px */

  --ebl-chart-shbc-node-shadow: var(--ebl-shadow-3);

  --ebl-chart-shbc-class-avg-node-bgcolor: var(--ebl-black);
  --ebl-chart-shbc-avg-combo-node-bg-color: var(--ebl-white);

  --ebl-chart-shbc-band-marginbottom: var(--ebl-s2);
  --ebl-chart-shbc-band-marginright: var(--ebl-s2);

  --ebl-chart-shbc-band-value-color: var(--ebl-text-gray);

  --ebl-chart-shbc-band-label-margintop: var(--ebl-s6);
  --ebl-chart-shbc-band-label-dot-marginright: var(--ebl-s2);

 /* --Donut Chart-- */
  --ebl-chart-donut-band-gap: var(--ebl-s1);
  --ebl-chart-donut-outer-circumfrence: 12rem; /* 192px */
  --ebl-chart-donut-inner-circumfrence: 7.5rem; /* 120px */

  --ebl-chart-donut-legend-nodata-color: var(--ebl-disabled-color);
  --ebl-chart-donut-legend-below-color: var(--ebl-signal-error);
  --ebl-chart-donut-legend-on-color: var(--ebl-signal-warning);
  --ebl-chart-donut-legend-above-color: var(--ebl-signal-success);
  --ebl-chart-donut-legend-value-color: var(--ebl-text-gray);

  --ebl-chart-donut-legend-margintop: var(--ebl-s6);
  --ebl-chart-donut-legend-row-spacing: var(--ebl-s4);
  --ebl-chart-donut-legend-dot-marginright: var(--ebl-s2);
  --ebl-chart-donut-legend-item-marginright: var(--ebl-s6);

  --ebl-chart-donut-selected-border: solid 2px inset var(--ebl-black);
}

/*------------------------------------------------------------------
 * Banner Variables
 *
 *----------------------------------------------------------------*/

:root {
  /* --Profile Banner-- */
  --ebl-miniBanner-backButton-clearance: var(--ebl-page-header-margin-top);
  --ebl-miniBanner-height-lg: 14.3125rem; /* 229px */
  --ebl-miniBanner-height-sm: 10.5rem; /* 168px */

  --ebl-miniBanner-image-width-lg: 20.625rem; /* 330px */
  --ebl-miniBanner-image-height-lg: 10.3125rem; /* 165px */
  --ebl-miniBanner-image-width-sm: 13rem; /* 208px */
  --ebl-miniBanner-image-height-sm: 6.5rem; /* 104px */

  /* --Virtual Classroom-- */
  --ebl-vc-bannerbutton-marginleft: 1.25rem; /* 20px */
  --ebl-vc-bannerbutton-marginright: 1.25rem; /* 20px */
  --ebl-vc-bannerbutton-icon-paddingright: var(--ebl-s2);
  --ebl-vc-bannerbutton-icon-paddingleft: var(--ebl-s2);

  /* --Hero Banner-- */
  --ebl-hero-image-margintop: var(--ebl-s4);
  --ebl-hero-image-marginbottom: var(--ebl-s4);
  --ebl-herobanner-title-marginbottom: var(--ebl-s2);
  --ebl-herobanner-marginbottom: var(--ebl-s8);
}

/*------------------------------------------------------------------
 * Slider w Textboxes Variables
 *
 * @zeplin https://app.zeplin.io/project/5db9c5069ca4192c4b948be8/screen/5f7dad613ec88dbae0c6e394
 *
 *----------------------------------------------------------------*/

 :root {
     --ebl-slider-padding: calc(var(--ebl-s4) / 2);
     --ebl-slider-minwidth: 216px;
     --ebl-slider-margintop: var(--ebl-s3);
     --ebl-slider-input-margintop: var(--ebl-s3);
     --ebl-slider-marginbottom: var(--ebl-s4);
     --ebl-slider-range-height: var(--ebl-s1);
     --ebl-slider-thumb-border: solid 1px var(--ebl-mid-gray);
     /* Split above values for consumption in Figma */
     --ebl-slider-thumb-border-color: var(--ebl-mid-gray);
     --ebl-slider-thumb-border-width: 1px;
     --ebl-slider-thumb-border-style: solid;
     
     --ebl-slider-thumb-padding: calc(var(--ebl-s4) / 2);
     --ebl-slider-thumb-borderradius: calc(var(--ebl-s4) / 2);
     --ebl-slider-range-borderradius: var(--ebl-s0);
 }
:root{
    /* default  State */
    
    /* unchecked */
    --ebl-switch-slider-unchecked-default: var(--ebl-mid-gray);
    --ebl-switch-icon-unchecked-default: var(--ebl-mid-gray);
    --ebl-switch-thumb-unchecked-default: var(--ebl-white);
    
    /* checked */
    --ebl-switch-slider-checked-default: var(--ebl-action-color);
    --ebl-switch-icon-checked-default: var(--ebl-action-color);
    --ebl-switch-thumb-checked-default: var(--white);
    
    /* hover */
    /* unchecked */
    --ebl-switch-slider-unchecked-hover: var(--gray-c55);
    --ebl-switch-icon-unchecked-hover: var(--gray-c55);
    --ebl-switch-thumb-unchecked-hover: var(--white);
    
    /* checked */
    --ebl-switch-slider-checked-hover: var(--blue-c65);
    --ebl-switch-icon-checked-hover: var(--blue-c65);
    --ebl-switch-thumb-checked-hover: var(--white);
    
    /* disabled */
    /* unchecked */
    --ebl-switch-slider-unchecked-disabled: var(--ebl-disabled-color);
    --ebl-switch-icon-unchecked-disabled: var(--ebl-disabled-color);
    --ebl-switch-thumb-unchecked-disabled: var(--white);
    
    /* checked */
    --ebl-switch-slider-checked-disabled: var(--ebl-disabled-color);
    --ebl-switch-icon-checked-disabled: var(--ebl-disabled-color);
    --ebl-switch-thumb-checked-disabled: var(--white);
    
    /* active */
    /* unchecked */
    --ebl-switch-slider-unchecked-active: var(--gray-c65);
    --ebl-switch-icon-unchecked-active: var(--gray-c65);
    --ebl-switch-thumb-unchecked-active: var(--white);
    
    /* checked */
    --ebl-switch-slider-checked-active: var(--blue-c70);
    --ebl-switch-icon-checked-active: var(--blue-c70);
    --ebl-switch-thumb-checked-active: var(--white);
    
    /* focused */
    /* unchecked */
    --ebl-switch-slider-unchecked-focus: var(--ebl-mid-gray);
    --ebl-switch-icon-unchecked-focus: var(--ebl-mid-gray);
    --ebl-switch-thumb-unchecked-focus: var(--white);
    --ebl-switch-thumb-unchecked-outline-focus: var(--ebl-focus-color);
    
    /* checked */
    --ebl-switch-slider-checked-focus: var(--ebl-action-color);
    --ebl-switch-icon-checked-focus: var(--ebl-action-color);
    --ebl-switch-thumb-checked-focus: var(--white); 
    --ebl-switch-thumb-checked-outline-focus: var(--ebl-focus-color)
    
    }
:root {
    --ebl-layout-content-margintop: var(--ebl-s6);

    --ebl-spacing-vert-xxxsmall: var(--ebl-s0); /* 2px */
    --ebl-spacing-vert-xxsmall: var(--ebl-s1); /* 4px */
    --ebl-spacing-vert-xsmall: var(--ebl-s2); /* 8px */
    --ebl-spacing-vert-small: var(--ebl-s3); /* 16px */
    --ebl-spacing-vert-medium: var(--ebl-s4); /* 24px */
    --ebl-spacing-vert-large: var(--ebl-s5); /* 32px */
    --ebl-spacing-vert-xlarge: var(--ebl-s6); /* 40px */
    --ebl-spacing-vert-xxlarge: var(--ebl-s7); /* 64px */
    --ebl-spacing-vert-xxxlarge: var(--ebl-s8); /* 72px */
}
/*------------------------------------------------------------------
 * Base theme properties for xDS Components
 *
 *----------------------------------------------------------------*/

 :root {

  /* GLOBAL VALUES */
  --ebl-global-active-color: var(--ebl-action-color);

  /* Text Colors */
  --ebl-global-textcolor: var(--ebl-text-black);
  --ebl-global-textcolor-secondary: var(--ebl-text-gray);

  --ebl-global-textlinkcolor: var(--ebl-global-active-color);
  --ebl-global-textlinkcolor-hover: var(--ebl-text-black);
  --ebl-global-textlinkcolor-focus: var(--ebl-global-active-color);
  --ebl-global-textlinkcolor-active: var(--ebl-global-active-color);
  --ebl-global-textlinkcolor-disabled: var(--ebl-disabled-color);
  --ebl-global-textlinkcolor-read-only: var(--ebl-text-gray);
  
  /* Icon Colors */
  --ebl-global-iconcolor: var(--ebl-text-black);
  --ebl-global-iconcolor-secondary: var(--ebl-text-gray);
  --ebl-global-iconlinkcolor: var(--ebl-action-color);

  /* Background Colors */
  --ebl-global-surface-backgroundcolor: var(--ebl-white);
  --ebl-global-overlay-color: var(--ebl-mid-gray);
  --ebl-global-slots-space-between: var(--ebl-s3);
  --ebl-rightrail-slots-space-between: var(--ebl-global-slots-space-between);

  /* PADDINGS */
  --ebl-global-padding: var(--ebl-s3);



  /* BUTTONS */

  --ebl-button-borderradius: var(--ebl-s1);
  --ebl-button-intercontentspacing: var(--ebl-s2);
  --ebl-button-lg-padding-x: var(--ebl-s4);
  --ebl-button-lg-padding-y: var(--ebl-s2);
  --ebl-button-sm-padding-x: var(--ebl-s4);
  --ebl-button-sm-padding-y: var(--ebl-s2);
  --ebl-button-contained-default-backgroundcolor: var(--ebl-action-color);
  --ebl-button-contained-active-backgroundcolor: var(--ebl-dark-action-color);
  --ebl-button-contained-hover-backgroundcolor: var(--ebl-action-color);
  --ebl-button-contained-focus-backgroundcolor: var(--ebl-action-color);
  --ebl-button-contained-disabled-backgroundcolor: var(--ebl-disabled-color);

  --ebl-button-contained-text-color: var(--ebl-white);
  --ebl-button-contained-active-text-color: var(--ebl-white);
  --ebl-button-contained-hover-text-color: var(--ebl-white);
  --ebl-button-contained-focus-text-color: var(--ebl-white);
  --ebl-button-contained-disabled-text-color: var(--ebl-white);

  --ebl-button-contained-icon-color: var(--ebl-white);
  --ebl-button-contained-active-icon-color: var(--ebl-white);
  --ebl-button-contained-hover-icon-color: var(--ebl-white);
  --ebl-button-contained-focus-icon-color: var(--ebl-white);
  --ebl-button-contained-disabled-icon-color: var(--ebl-white);

  --ebl-button-contained-border-color: var(--ebl-transparent);
  --ebl-button-contained-hover-border-color: var(--ebl-transparent);
  --ebl-button-contained-active-border-color: var(--ebl-transparent);
  --ebl-button-contained-focus-border-color: var(--ebl-transparent);
  --ebl-button-contained-disabled-border-color: var(--ebl-transparent);
  
  --ebl-button-contained-border-width: 1px;
  --ebl-button-contained-hover-border-width: 1px;
  --ebl-button-contained-active-border-width: 1px;
  --ebl-button-contained-focus-border-width: 1px;
  --ebl-button-contained-disabled-border-width: 1px;

  --ebl-button-outlined-default-backgroundcolor: var(--ebl-white);
  --ebl-button-outlined-active-backgroundcolor: var(--ebl-mid-action-color);
  --ebl-button-outlined-hover-backgroundcolor: var(--ebl-white);
  --ebl-button-outlined-focus-backgroundcolor: var(--ebl-white);
  --ebl-button-outlined-disabled-backgroundcolor: var(--ebl-white);
  --ebl-button-outlined-text-color: var(--ebl-action-color);
  --ebl-button-outlined-active-text-color: var(--ebl-action-color);
  --ebl-button-outlined-hover-text-color: var(--ebl-action-color);
  --ebl-button-outlined-focus-text-color: var(--ebl-action-color);
  --ebl-button-outlined-disabled-text-color: var(--ebl-disabled-color);

  --ebl-button-outlined-icon-color: var(--ebl-action-color);
  --ebl-button-outlined-active-icon-color: var(--ebl-action-color);
  --ebl-button-outlined-hover-icon-color: var(--ebl-action-color);
  --ebl-button-outlined-focus-icon-color: var(--ebl-action-color);
  --ebl-button-outlined-disabled-icon-color: var(--ebl-disabled-color);

  --ebl-button-outlined-border-color: var(--ebl-action-color);
  --ebl-button-outlined-hover-border-color: var(--ebl-action-color);
  --ebl-button-outlined-active-border-color: var(--ebl-action-color);
  --ebl-button-outlined-focus-border-color: var(--ebl-action-color);
  --ebl-button-outlined-disabled-border-color: var(--ebl-disabled-color);
  --ebl-button-outlined-border-width: 1px;
  --ebl-button-outlined-hover-border-width: 1px;
  --ebl-button-outlined-active-border-width: 1px;
  --ebl-button-outlined-focus-border-width: 1px;
  --ebl-button-outlined-disabled-border-width: 1px;

  --ebl-button-frameless-default-backgroundcolor: var(--ebl-white);
  --ebl-button-frameless-active-backgroundcolor: var(--ebl-white);
  --ebl-button-frameless-hover-backgroundcolor: var(--ebl-white);
  --ebl-button-frameless-focus-backgroundcolor: var(--ebl-white);
  --ebl-button-frameless-disabled-backgroundcolor: var(--ebl-disabled-color);

  --ebl-button-frameless-text-color: var(--ebl-action-color);
  --ebl-button-frameless-active-text-color: var(--ebl-action-color);
  --ebl-button-frameless-hover-text-color: var(--ebl-action-color);
  --ebl-button-frameless-focus-text-color: var(--ebl-action-color);
  --ebl-button-frameless-disabled-text-color: var(--ebl-white);

  --ebl-button-frameless-border-color: var(--ebl-transparent);
  --ebl-button-frameless-hover-border-color: var(--ebl-transparent);
  --ebl-button-frameless-active-border-color: var(--ebl-transparent);
  --ebl-button-frameless-focus-border-color: var(--ebl-transparent);
  --ebl-button-frameless-disabled-border-color: var(--ebl-transparent);

  --ebl-button-frameless-border-width: 1px;
  --ebl-button-frameless-hover-border-width: 1px;
  --ebl-button-frameless-active-border-width: 1px;
  --ebl-button-frameless-focus-border-width: 1px;
  --ebl-button-frameless-disabled-border-width: 1px;

  --ebl-button-xl-default-backgroundcolor: var(--ebl-white);
  --ebl-button-xl-active-backgroundcolor: var(--ebl-light-action-color);
  --ebl-button-xl-hover-backgroundcolor: var(--ebl-white);
  --ebl-button-xl-focus-backgroundcolor: var(--ebl-white);
  --ebl-button-xl-disabled-backgroundcolor: var(--ebl-disabled-color);

  --ebl-button-xl-text-color: var(--ebl-global-textcolor);
  --ebl-button-xl-active-text-color: var(--ebl-action-color);
  --ebl-button-xl-hover-text-color: var(--ebl-action-color);
  --ebl-button-xl-focus-text-color: var(--ebl-global-textcolor);
  --ebl-button-xl-disabled-text-color: var(--ebl-disabled-color);

  --ebl-button-xl-icon-color: var(--ebl-global-textcolor);
  --ebl-button-xl-active-icon-color: var(--ebl-action-color);
  --ebl-button-xl-hover-icon-color: var(--ebl-action-color);
  --ebl-button-xl-focus-icon-color: var(--ebl-global-textcolor);
  --ebl-button-xl-disabled-icon-color: var(--ebl-disabled-color);

  --ebl-button-xl-border-color: var(--ebl-transparent);
  --ebl-button-xl-hover-border-color: var(--ebl-action-color);
  --ebl-button-xl-active-border-color: var(--ebl-transparent);
  --ebl-button-xl-focus-border-color: var(--ebl-action-color);
  --ebl-button-xl-disabled-border-color: var(--ebl-transparent);

  --ebl-button-xl-border-width: 1px;
  --ebl-button-xl-hover-border-width: 1px;
  --ebl-button-xl-active-border-width: 1px;
  --ebl-button-xl-focus-border-width: 1px;
  --ebl-button-xl-disabled-border-width: 1px;

  /* FORM ELEMENTS */
  --ebl-formelement-backgroundcolor: var(--ebl-white);
  --ebl-formelement-backgroundcolor-hover: var(--ebl-white);
  --ebl-formelement-backgroundcolor-focus: var(--ebl-white);
  --ebl-formelement-backgroundcolor-active: var(--ebl-white);
  --ebl-formelement-backgroundcolor-disabled: var(--ebl-white);
  --ebl-formelement-backgroundcolor-error: var(--ebl-white);
  --ebl-formelement-backgroundcolor-readonly: var(--ebl-transparent);

  --ebl-formelement-text-color: var(--ebl-global-textcolor);
  --ebl-formelement-text-color-hover: var(--ebl-global-textcolor);
  --ebl-formelement-text-color-focus: var(--ebl-global-textcolor);
  --ebl-formelement-text-color-active: var(--ebl-global-textcolor);
  --ebl-formelement-text-color-disabled: var(--ebl-disabled-color);
  --ebl-formelement-text-color-error: var(--ebl-signal-error);
  --ebl-formelement-text-color-readonly: var(--ebl-disabled-color);

  --ebl-formelement-placeholder-color: var(--ebl-text-gray);
  --ebl-formelement-placeholder-color-hover: var(--ebl-text-gray);
  --ebl-formelement-placeholder-color-focus: var(--ebl-text-gray);
  --ebl-formelement-placeholder-color-active: var(--ebl-text-gray);
  --ebl-formelement-placeholder-color-disabled: var(--ebl-disabled-color);
  --ebl-formelement-placeholder-color-error: var(--ebl-text-gray);
  --ebl-formelement-placeholder-color-readonly: var(--ebl-text-black);

  --ebl-formelement-border-color: var(--ebl-mid-gray);
  --ebl-formelement-border-color-hover:  var(--ebl-black);
  --ebl-formelement-border-color-focus:  var(--ebl-mid-gray);
  --ebl-formelement-border-color-active: var(--ebl-black);
  --ebl-formelement-border-color-disabled:  var(--ebl-disabled-color);
  --ebl-formelement-border-color-error:  var(--ebl-signal-error);
  --ebl-formelement-border-color-readonly:  var(--ebl-transparent);

  --ebl-formelement-border-width: 1px;
  --ebl-formelement-border-width-hover: 1px;
  --ebl-formelement-border-width-focus: 1px;
  --ebl-formelement-border-width-active: 1px;
  --ebl-formelement-border-width-disabled: 1px;
  --ebl-formelement-border-width-error: 1px;
  --ebl-formelement-border-width-readonly: 1px;

  --ebl-formelement-icon-color: var(--ebl-dark-gray);
  --ebl-formelement-icon-color-hover: var(--ebl-dark-gray);
  --ebl-formelement-icon-color-focus: var(--ebl-dark-gray);
  --ebl-formelement-icon-color-active: var(--ebl-dark-gray);
  --ebl-formelement-icon-color-disabled: var(--ebl-disabled-color);
  --ebl-formelement-icon-color-error: var(--ebl-signal-error);
  --ebl-formelement-icon-color-readonly: var(--ebl-text-black);

  --ebl-formelement-borderradius: var(--ebl-s2);
  --ebl-formelement-unchecked-color: var(--ebl-dark-gray);
  --ebl-formelement-checked-color: var(--ebl-action-color);
  --ebl-formelement-indeterminate-color: var(--ebl-text-gray);

   /* ACCORDION */
   --ebl-accordion-padding: var(--ebl-s3);
   --ebl-accordion-borderradius: var(--ebl-s2);
   --ebl-accordion-minwidth: 288px;
   --ebl-accordion-slots-space-between: var(--ebl-s3);

   --ebl-accordion-backgroundcolor: var(--ebl-white);
   --ebl-accordion-backgroundcolor-hover: var(--ebl-white);
   --ebl-accordion-backgroundcolor-focus: var(--ebl-white);
   --ebl-accordion-backgroundcolor-active: var(--ebl-white);
   --ebl-accordion-backgroundcolor-disabled: var(--ebl-white);
   --ebl-accordion-backgroundcolor-error: var(--ebl-white);
   --ebl-accordion-backgroundcolor-readonly: var(--ebl-white);

   --ebl-accordion-textcolor: var(--ebl-white);
   --ebl-accordion-textcolor-hover: var(--ebl-white);
   --ebl-accordion-textcolor-focus: var(--ebl-white);
   --ebl-accordion-textcolor-active: var(--ebl-white);
   --ebl-accordion-textcolor-disabled: var(--ebl-white);
   --ebl-accordion-textcolor-error: var(--ebl-white);
   --ebl-accordion-textcolor-readonly: var(--ebl-white);

   --ebl-accordion-iconcolor: var(--ebl-white);
   --ebl-accordion-iconcolor-hover: var(--ebl-white);
   --ebl-accordion-iconcolor-focus: var(--ebl-white);
   --ebl-accordion-iconcolor-active: var(--ebl-white);
   --ebl-accordion-iconcolor-disabled: var(--ebl-white);
   --ebl-accordion-iconcolor-error: var(--ebl-white);
   --ebl-accordion-iconcolor-readonly: var(--ebl-white);

   --ebl-accordion-bordercolor: var(--cool-gray-c20);
   --ebl-accordion-bordercolor-hover: var(--cool-gray-c20);
   --ebl-accordion-bordercolor-focus: var(--cool-gray-c20);
   --ebl-accordion-bordercolor-active: var(--cool-gray-c20);
   --ebl-accordion-bordercolor-disabled: var(--cool-gray-c20);
   --ebl-accordion-bordercolor-error: var(--cool-gray-c20);
   --ebl-accordion-bordercolor-readonly: var(--cool-gray-c20);

   --ebl-accordion-active-backgroundcolor: var(--ebl-mid-action-color);
   --ebl-accordion-textcolor: var(--ebl-global-textcolor);
   --ebl-accordion-iconcolor: var(--ebl-global-textcolor);

   /* CARD */
   --ebl-card-borderradius: var(--ebl-s2);
   --ebl-card-padding: var(--ebl-s3);
   --ebl-card-slots-space-between: var(--ebl-global-slots-space-between);
   --ebl-card-minwidth: 288px;
   --ebl-card-media-backgroundcolor: var(--ebl-signal-info-light);

   --ebl-card-backgroundcolor: var(--ebl-global-surface-backgroundcolor);
   --ebl-card-backgroundcolor-hover: var(--ebl-global-surface-backgroundcolor);
   --ebl-card-backgroundcolor-focus: var(--ebl-global-surface-backgroundcolor);
   --ebl-card-backgroundcolor-active: var(--ebl-global-surface-backgroundcolor);
   --ebl-card-backgroundcolor-disabled: var(--ebl-global-surface-backgroundcolor);
   --ebl-card-backgroundcolor-error: var(--ebl-global-surface-backgroundcolor);
   --ebl-card-backgroundcolor-loading: var(--ebl-global-surface-backgroundcolor);

  --ebl-card-bordercolor: var(--ebl-transparent);
  --ebl-card-bordercolor-hover: var(--ebl-black);
  --ebl-card-bordercolor-focus: var(--ebl-transparent);
  --ebl-card-bordercolor-active: var(--ebl-transparent);
  --ebl-card-bordercolor-disabled: var(--ebl-transparent);
  --ebl-card-bordercolor-error: var(--ebl-transparent);
  --ebl-card-bordercolor-loading: var(--ebl-transparent);

   --ebl-card-textcolor: var(--ebl-global-textcolor); 
   --ebl-card-textcolor-hover: var(--ebl-global-textcolor);
   --ebl-card-textcolor-focus: var(--ebl-global-textcolor);
   --ebl-card-textcolor-active: var(--ebl-global-textcolor);
   --ebl-card-textcolor-disabled: var(--ebl-disabled-color);
   --ebl-card-textcolor-error: var(--ebl-signal-error);
   --ebl-card-textcolor-loading: var(--ebl-global-textcolor);

   --ebl-card-iconcolor: var(--ebl-black);
   --ebl-card-iconcolor-hover: var(--ebl-dark-gray);
   --ebl-card-iconcolor-focus: var(--ebl-dark-gray);
   --ebl-card-iconcolor-active: var(--ebl-dark-gray);
   --ebl-card-iconcolor-disabled: var(--ebl-disabled-color);
   --ebl-card-iconcolor-error: var(--ebl-signal-error);
   --ebl-card-iconcolor-loading: var(--ebl-dark-gray);

   --ebl-card-hover-bordercolor: var(--ebl-black);
   --ebl-card-accent: var(--ebl-secondary-1);

   
   --ebl-card-header-backgroundcolor: var(--ebl-global-surface-backgroundcolor);
   --ebl-card-content-backgroundcolor: var(--ebl-global-surface-backgroundcolor);
   --ebl-card-actions-backgroundcolor: var(--ebl-global-surface-backgroundcolor);
   --ebl-card-textlink-color: var(--ebl-action-color);

   /* CHIP */
   --ebl-chip-outlined-backgroundcolor-default: var(--ebl-white);
   --ebl-chip-outlined-backgroundcolor-hover: var(--ebl-mid-gray);
   --ebl-chip-outlined-backgroundcolor-focus: var(--ebl-white);
   --ebl-chip-outlined-backgroundcolor-active: var(--ebl-white);
   --ebl-chip-outlined-backgroundcolor-disabled: var(--ebl-white);

   --ebl-chip-outlined-bordercolor-default: var(--ebl-white);
   --ebl-chip-outlined-bordercolor-hover: var(--ebl-mid-gray);
   --ebl-chip-outlined-bordercolor-focus: var(--ebl-white);
   --ebl-chip-outlined-bordercolor-active: var(--ebl-white);
   --ebl-chip-outlined-bordercolor-disabled: var(--ebl-disabled-color);

   --ebl-chip-outlined-textcolor-default: var(--ebl-white);
   --ebl-chip-outlined-textcolor-hover: var(--ebl-mid-gray);
   --ebl-chip-outlined-textcolor-focus: var(--ebl-white);
   --ebl-chip-outlined-textcolor-active: var(--ebl-white);
   --ebl-chip-outlined-textcolor-disabled: var(--ebl-disabled-color);

   --ebl-chip-outlined-iconcolor-default: var(--ebl-white);
   --ebl-chip-outlined-iconcolor-hover: var(--ebl-mid-gray);
   --ebl-chip-outlined-iconcolor-focus: var(--ebl-white);
   --ebl-chip-outlined-iconcolor-active: var(--ebl-white);
   --ebl-chip-outlined-iconcolor-disabled: var(--ebl-disabled-color);


   --ebl-chip-contained-backgroundcolor-default: var(--ebl-white);
   --ebl-chip-contained-backgroundcolor-hover: var(--ebl-mid-gray);
   --ebl-chip-contained-backgroundcolor-focus: var(--ebl-white);
   --ebl-chip-contained-backgroundcolor-active: var(--ebl-white);
   --ebl-chip-contained-backgroundcolor-disabled: var(--ebl-white);

   --ebl-chip-contained-bordercolor-default: var(--ebl-white);
   --ebl-chip-contained-bordercolor-hover: var(--ebl-mid-gray);
   --ebl-chip-contained-bordercolor-focus: var(--ebl-white);
   --ebl-chip-contained-bordercolor-active: var(--ebl-white);
   --ebl-chip-contained-bordercolor-disabled: var(--ebl-disabled-color);

   --ebl-chip-contained-textcolor-default: var(--ebl-white);
   --ebl-chip-contained-textcolor-hover: var(--ebl-mid-gray);
   --ebl-chip-contained-textcolor-focus: var(--ebl-white);
   --ebl-chip-contained-textcolor-active: var(--ebl-white);
   --ebl-chip-contained-textcolor-disabled: var(--ebl-disabled-color);

   --ebl-chip-contained-iconcolor-default: var(--ebl-white);
   --ebl-chip-contained-iconcolor-hover: var(--ebl-mid-gray);
   --ebl-chip-contained-iconcolor-focus: var(--ebl-white);
   --ebl-chip-contained-iconcolor-active: var(--ebl-white);
   --ebl-chip-contained-iconcolor-disabled: var(--ebl-disabled-color);

   /* MODAL/DIALOG */
   --ebl-modal-backgroundcolor: var(--ebl-white);
   --ebl-modal-header-backgroundcolor: var(--ebl-global-surface-backgroundcolor);
   --ebl-modal-content-backgroundcolor: var(--ebl-global-surface-backgroundcolor);
   --ebl-modal-actions-backgroundcolor: var(--ebl-global-surface-backgroundcolor);
   --ebl-modal-header-textcolor: var(--ebl-text-black);
   --ebl-modal-content-textcolor: var(--ebl-text-black);
   --ebl-modal-padding: var(--ebl-s4);
   --ebl-modal-borderradius: var(--ebl-s2);

   /* PAGE LAYOUT */
   --ebl-pagelayout-backgroundcolor: var(--ebl-white);
   --ebl-pagelayout-login-brand-color: #ffeefe;
   --ebl-page-slots-space-between: var(--ebl-s4);

   /* EMPTY MESSAGE */
   --ebl-emptymessage-backgroundcolor: var(--ebl-mktg-beige1);
   --ebl-emptymessage-textcolor: var(--ebl-text-black);
   --ebl-emptymessage-title-marginbottom: var(--ebl-s2);

   /* TABLE/DATA GRID */
   --ebl-table-backgroundcolor: var(--ebl-white);
   --ebl-table-cell-backgroundcolor: var(--ebl-white);
   --ebl-table-cell-alt-backgroundcolor: var(--ebl-white);
   --ebl-table-cell-textcolor: var(--ebl-text-black);
   --ebl-table-cell-alt-textcolor: var(--ebl-white);
   --ebl-table-header-textcolor: var(--ebl-text-gray);
   --ebl-table-header-bordercolor: var(--ebl-brand);

  /* TREEVIEW */
  --ebl-treeview-listitem-backgroundcolor: var(--ebl-global-surface-backgroundcolor);
  --ebl-treeview-listitem-hover-backgroundcolor: var(--ebl-light-action-color);
  --ebl-treeview-listitem-hover-strokecolor: var(--ebl-dark-gray);
  --ebl-treeview-listitem-active-backgroundcolor: var(--ebl-light-gray);
  --ebl-treeview-listitem-active-strokecolor: var(--ebl-action-color);
  --ebl-treeview-listitem-textcolor: var(--ebl-text-black);
  --ebl-treeview-listitem-iconcolor: var(--ebl-dark-gray);
  --ebl-treeview-listitem-dividercolor: var(--ebl-card-border-color);

  /* LIST AND LIST ELEMENTS */
  --ebl-list-listitem-bgcolor: var(--ebl-navigation-secondary-default-backgroundcolor);

  /* NAVIGATION */
  --ebl-navigation-backgroundcolor: var(--ebl-white);
  --ebl-navigation-elevation: var();
  --ebl-navigation-iconcolor: var(--ebl-mid-gray);
  --ebl-leftnav-slots-space-between: var(--ebl-s3);

  --ebl-navigation-primary-spacing: var(--ebl-s1);
  --ebl-navigation-primary-default-backgroundcolor: var(--ebl-white);
  --ebl-navigation-primary-active-backgroundcolor: var(--ebl-brand);
  --ebl-navigation-primary-hover-backgroundcolor: var(--ebl-transparent);
  --ebl-navigation-primary-focus-backgroundcolor: var(--ebl-white);
  --ebl-navigation-primary-disabled-backgroundcolor: var(--ebl-white);
  --ebl-navigation-primary-text-color: var(--ebl-text-black);
  --ebl-navigation-primary-text-active-color: var(--ebl-text-black);
  --ebl-navigation-primary-text-hover-color: var(--ebl-text-black);
  --ebl-navigation-primary-text-focus-color: var(--ebl-text-black);
  --ebl-navigation-primary-text-disabled-color: var(--ebl-disabled-color);
  --ebl-navigation-primary-icon-color: var(--ebl-black);
  --ebl-navigation-primary-icon-active-color: var(--ebl-black);
  --ebl-navigation-primary-icon-hover-color: var(--ebl-black);
  --ebl-navigation-primary-icon-focus-color: var(--ebl-black);
  --ebl-navigation-primary-icon-disabled-color: var(--ebl-black);
  --ebl-navigation-primary-border-color: var(--ebl-transparent);
  --ebl-navigation-primary-border-hover-color: var(--ebl-black);
  --ebl-navigation-primary-border-active-color: var(--ebl-black);
  --ebl-navigation-primary-border-focus-color: var(--ebl-transparent);
  --ebl-navigation-primary-border-disabled-color: var(--ebl-transparent);
  --ebl-navigation-primary-border-width: 1px;
  --ebl-navigation-primary-border-hover-width: 1px;
  --ebl-navigation-primary-border-active-width: 1px;
  --ebl-navigation-primary-border-focus-width: 1px;
  --ebl-navigation-primary-border-disabled-width: 1px;
  --ebl-navigation-primary-borderradius: 20px;

  --ebl-navigation-secondary-spacing: 0px;
  --ebl-navigation-secondary-default-backgroundcolor: var(--ebl-white);
  --ebl-navigation-secondary-active-backgroundcolor: var(--ebl-white);
  --ebl-navigation-secondary-hover-backgroundcolor: var(--ebl-white);
  --ebl-navigation-secondary-focus-backgroundcolor: var(--ebl-white);
  --ebl-navigation-secondary-disabled-backgroundcolor: var(--ebl-white);
  --ebl-navigation-secondary-text-color: var(--ebl-text-black);
  --ebl-navigation-secondary-text-active-color: var(--ebl-text-black);
  --ebl-navigation-secondary-text-hover-color: var(--ebl-text-black);
  --ebl-navigation-secondary-text-focus-color: var(--ebl-text-black);
  --ebl-navigation-secondary-text-disabled-color: var(--ebl-text-black);
  --ebl-navigation-secondary-icon-color: var(--ebl-black);
  --ebl-navigation-secondary-icon-active-color: var(--ebl-black);
  --ebl-navigation-secondary-icon-hover-color: var(--ebl-black);
  --ebl-navigation-secondary-icon-focus-color: var(--ebl-black);
  --ebl-navigation-secondary-icon-disabled-color: var(--ebl-black);
  --ebl-navigation-secondary-border-color: var(--ebl-transparent);
  --ebl-navigation-secondary-border-hover-color: var(--ebl-transparent);
  --ebl-navigation-secondary-border-active-color: var(--ebl-transparent);
  --ebl-navigation-secondary-border-focus-color: var(--ebl-transparent);
  --ebl-navigation-secondary-border-disabled-color: var(--ebl-transparent);
  --ebl-navigation-secondary-border-width: 1px;
  --ebl-navigation-secondary-border-hover-width: 1px;
  --ebl-navigation-secondary-border-active-width: 1px;
  --ebl-navigation-secondary-border-focus-width: 1px;
  --ebl-navigation-secondary-border-disabled-width: 1px;
  --ebl-navigation-secondary-hover-accent-color: var(--ebl-light-action-color);
  --ebl-navigation-secondary-active-accent-color: var(--ebl-action-color);
  --ebl-navigation-secondary-borderradius: var();
  
  --ebl-navigation-tertiary-text-color: var(--ebl-text-black);
  --ebl-navigation-tertiary-text-active-color: var(--ebl-text-black);
  --ebl-navigation-tertiary-text-hover-color: var(--ebl-text-black);
  --ebl-navigation-tertiary-text-focus-color: var(--ebl-text-black);
  --ebl-navigation-tertiary-text-disabled-color: var(--ebl-text-white);
  --ebl-navigation-tertiary-default-backgroundcolor: var(--ebl-white);
  --ebl-navigation-tertiary-active-backgroundcolor: var(--ebl-light-gray);
  --ebl-navigation-tertiary-hover-backgroundcolor: var(--ebl-light-action-color);
  --ebl-navigation-tertiary-focus-backgroundcolor: var(--ebl-white);
  --ebl-navigation-tertiary-disabled-backgroundcolor: var(--ebl-disabled-color);
  --ebl-navigation-tertiary-icon-color: var(--ebl-dark-gray);
  --ebl-navigation-tertiary-icon-hover-color: var(--ebl-dark-gray);
  --ebl-navigation-tertiary-icon-active-color: var(--ebl-dark-gray);
  --ebl-navigation-tertiary-icon-focus-color: var(--ebl-dark-gray);
  --ebl-navigation-tertiary-icon-disabled-color: var(--ebl-dark-gray);
  --ebl-navigation-tertiary-border-color: var(--ebl-transparent);
  --ebl-navigation-tertiary-border-hover-color: var(--ebl-transparent);
  --ebl-navigation-tertiary-border-active-color: var(--ebl-transparent);
  --ebl-navigation-tertiary-border-focus-color: var(--ebl-transparent);
  --ebl-navigation-tertiary-border-disabled-color: var(--ebl-transparent);
  --ebl-navigation-tertiary-border-width: 1px;
  --ebl-navigation-tertiary-border-hover-width: 1px;
  --ebl-navigation-tertiary-border-active-width: 1px;
  --ebl-navigation-tertiary-border-focus-width: 1px;
  --ebl-navigation-tertiary-border-disabled-width: 1px;
  --ebl-navigation-tertiary-hover-accent-color: var(--ebl-light-action-color);
  --ebl-navigation-tertiary-active-accent-color: var(--ebl-action-color);
  --ebl-navigation-tertiary-borderradius: var(--ebl-s2);

  /* SLIDER */
  --ebl-slider-thumb-border-color: var(--ebl-dark-gray);
  --ebl-slider-thumb-backgroundcolor: var(--ebl-white);
  --ebl-slider-track-color: var(--ebl-mid-gray);
  --ebl-slider-highlight-color: var(--ebl-action-color);
  --ebl-slider-thumb-size-lg: var(--ebl-s4);
  --ebl-slider-thumb-size-sm: var(--ebl-s3);
  --ebl-slider-track-size-lg: var(--ebl-s1);
  --ebl-slider-track-size-sm: var(--ebl-s0);

  /* TILE */
  --ebl-tile-borderradius: var(--ebl-s2);
  --ebl-tile-padding: var(--ebl-s3);
--ebl-tile-backgroundcolor-default: var(--ebl-white);
--ebl-tile-backgroundcolor-hover: var(--ebl-white);
--ebl-tile-backgroundcolor-active: var(--ebl-white);
--ebl-tile-backgroundcolor-focus: var(--ebl-white);
--ebl-tile-backgroundcolor-disabled: var(--ebl-white);

--ebl-tile-bordercolor-default: var(--ebl-card-border-color);
--ebl-tile-bordercolor-hover: var(--ebl-white);
--ebl-tile-bordercolor-active: var(--ebl-white);
--ebl-tile-bordercolor-focus: var(--ebl-white);
--ebl-tile-bordercolor-disabled: var(--ebl-white);

--ebl-tile-textcolor-default: var(--ebl-global-textcolor);
--ebl-tile-textcolor-hover: var(--ebl-global-textcolor);
--ebl-tile-textcolor-active: var(--ebl-global-textcolor);
--ebl-tile-textcolor-focus: var(--ebl-global-textcolor);
--ebl-tile-textcolor-disabled: var(--ebl-global-textcolor);

/* POPOVER */
--ebl-popover-slots-space-between: var(--ebl-s3);

/* LOADING SKELETON */
--ebl-loading-backgroundcolor: var(--ebl-light-mid-gray);
--ebl-loading-borderradius: var(--ebl-s2);

/* AVATAR */
--ebl-avatar-sm: 32px;
--ebl-avatar-md: 56px;
--ebl-avatar-lg: 112px;
--ebl-avatar-xl: 160px;
--ebl-avatar-type1-backgroundcolor-default: var(--ebl-text-gray);
--ebl-avatar-type2-backgroundcolor-default: var(--ebl-light-gray);
--ebl-avatar-type3-backgroundcolor-default: var(--ebl-white);
--ebl-avatar-type1-textcolor-default: var(--ebl-white);
--ebl-avatar-type2-textcolor-default: var(--ebl-text-gray);
--ebl-avatar-type3-textcolor-default: var(--ebl-text-gray);
--ebl-avatar-type1-iconcolor-default: var(--ebl-white);
--ebl-avatar-type2-iconcolor-default: var(--ebl-white);
--ebl-avatar-type3-iconcolor-default: var(--ebl-text-gray);
--ebl-avatar-type1-bordercolor-default: var(--ebl-transparent);
--ebl-avatar-type2-bordercolor-default: var(--ebl-text-gray);
--ebl-avatar-type3-bordercolor-default: var(--ebl-text-gray);

/* LIST */
--ebl-list-listitem-backgroundcolor-default: var(--ebl-transparent);
--ebl-list-listitem-backgroundcolor-hover: var(--ebl-light-action-color);
--ebl-list-listitem-backgroundcolor-focus: var(--ebl-transparent);
--ebl-list-listitem-backgroundcolor-active: var(--ebl-light-gray);
--ebl-list-listitem-backgroundcolor-disabled: var(--ebl-transparent);

--ebl-list-listitem-textcolor-default: var(--ebl-text-black);
--ebl-list-listitem-textcolor-hover: var(--ebl-text-black);
--ebl-list-listitem-textcolor-focus: var(--ebl-text-black);
--ebl-list-listitem-textcolor-active: var(--ebl-text-black);
--ebl-list-listitem-textcolor-disabled: var(--ebl-disabled-color);

--ebl-list-listitem-iconcolor-default: var(--ebl-text-black);
--ebl-list-listitem-iconcolor-hover: var(--ebl-text-black);
--ebl-list-listitem-iconcolor-focus: var(--ebl-text-black);
--ebl-list-listitem-iconcolor-active: var(--ebl-text-black);
--ebl-list-listitem-iconcolor-disabled: var(--ebl-disabled-color);

--ebl-list-listitem-bordercolor-default: var(--ebl-transparent);
--ebl-list-listitem-bordercolor-hover: var(--ebl-dark-gray);
--ebl-list-listitem-bordercolor-focus: var(--ebl-transparent);
--ebl-list-listitem-bordercolor-active: var(--ebl-action-color);
--ebl-list-listitem-bordercolor-disabled: var(--ebl-transparent);

/* LIST VARIANT: DROPDOWN */
--ebl-list-dropdown-listitem-backgroundcolor-default: var(--ebl-white);
--ebl-list-dropdown-listitem-backgroundcolor-hover: var(--ebl-mid-gray);
--ebl-list-dropdown-listitem-backgroundcolor-focus: var(--ebl-white);
--ebl-list-dropdown-listitem-backgroundcolor-active: var(--ebl-white);
--ebl-list-dropdown-listitem-backgroundcolor-disabled: var(--ebl-white);

--ebl-list-dropdown-listitem-textcolor-default: var(--ebl-text-black);
--ebl-list-dropdown-listitem-textcolor-hover: var(--ebl-text-black);
--ebl-list-dropdown-listitem-textcolor-focus: var(--ebl-text-black);
--ebl-list-dropdown-listitem-textcolor-active: var(--ebl-text-black);
--ebl-list-dropdown-listitem-textcolor-disabled: var(--ebl-disabled-color);

}
/*------------------------------------------------------------------
 * CTS Component Variables
 *----------------------------------------------------------------*/
/*===========================================================================================
 *  dP""b8 888888 .dP"Y8     Yb    dP    db    88""Yb 88    db    88""Yb 88     888888 .dP"Y8 
 * dP   `"   88   `Ybo."      Yb  dP    dPYb   88__dP 88   dPYb   88__dP 88     88__   `Ybo." 
 * Yb        88   o.`Y8b       YbdP    dP__Yb  88"Yb  88  dP__Yb  88""Yb 88  .o 88""   o.`Y8b 
 *  YboodP   88   8bodP'        YP    dP""""Yb 88  Yb 88 dP""""Yb 88oodP 88ood8 888888 8bodP' 
 *===========================================================================================*/

/* global style variables */

/* CTS-specific style variables */