:root,
.light {
  --white: #fff;
  --yellow-light: #fff3c4;
  --yellow: #ffce07;
  --yellow-dark: #ffce07;
  --yellow-darker: #8a6e00;
  --blue-light: #eefaff;
  --blue: #217097;
  --blue-dark: #0c4561;
  --red: #c8102e;
  --red-light: rgba(255, 165, 180, 0.2);
  --green: #047e2a;
  --green-light: rgba(115, 255, 160, 0.2);
  --gray-lightest: #f9fafb;
  --gray-lighter: #d4d8da;
  --gray-light: #d4d8da;
  --gray: #8c9193;
  --gray-dark: #6c7072;
  --gray-darker: #404448;
  --gray-darkest-white: #f4f4f4;
  --gray-darkest: #191d1f;
  --blackish: #191d1f;
  --hover-lighten: rgba(255, 255, 255, 0.1);
  --hover-darken: rgba(25, 29, 31, 0.05);
}
.dark {
  --white: #404448;
  --yellow-light: #fff6d3;
  --yellow: #ffce07;
  --yellow-dark: #ffce07;
  --yellow-darker: #ffce07;
  --blue-light: #fff;
  --blue: #fff;
  --blue-dark: #fff;
  --red: #ff3556;
  --green: #00de45;
  --gray-lightest: #191d1f;
  --gray-lighter: #404448;
  --gray-light: #6c7072;
  --gray: #8c9193;
  --gray-dark: #d4d8da;
  --gray-darker: #d4d8da;
  --gray-darkest-white: #24282a;
  --gray-darkest: #f9fafb;
  --blackish: #fff;
  --hover-lighten: rgba(25, 29, 31, 0.05);
  --hover-darken: rgba(255, 255, 255, 0.1);
  /* buttons (commented out ones could be overridden but will default properly by color variables above) */
  --button-primary--border: transparent;
  --button-primary--color: #217097;
  --button-primary--background: #fff;
  --button-primary--background-hover: rgba(255, 255, 255, 0.9);
  --button-primary--shadow: #217097;
  --button-primary--border-width: 2px;
  --button-primary--shadow-width: 2px;
  --button-secondary--border: #fff;
  --button-secondary--color: #fff;
  --button-secondary--background: transparent;
  --button-secondary--background-hover: rgba(255, 255, 255, 0.1);
  --button-tertiary--border: #fff;
  --button-tertiary--color: #fff;
  --button-tertiary--background: transparent;
  --button-tertiary--background-hover: rgba(255, 255, 255, 0.1);
  --button-text--focus-color: #fff;
  --button-primaryText--color: #fff;
  --button-secondaryText--color: #fff;
  /* dialogs */
  /* forms */
  /* inputs */
  /* loading indicators */
  /* tabs */
  --tabs-tab--selected-color: #fff;
  /* links */
  /* text */
  /* misc */
  --warningIcon-color: #ffce07;
  /*menu items*/
  --menu-background-color: #404448;
  --navbar--background: #191d1f;
  --toast-button--color: #6c7072;
  --infobox-warning--color: #ffce07;
}
.dark-new {
  --white: #0a0c0c;
  --yellow-light: #8a6e00;
  --yellow: #ffce07;
  --yellow-dark: #ffce07;
  --yellow-darker: #fff3c4;
  --blue-light: #002c42;
  --blue: #4b9ac1;
  --blue-dark: #eefaff;
  --red: #ff8a9d;
  --red-light: #9e001e;
  --green: #00e84a;
  --green-light: #005815;
  --gray-lightest: #191d1f;
  --gray-lighter: #6c7072;
  --gray-light: #404448;
  --gray: #6c7072;
  --gray-dark: #8c9193;
  --gray-darker: #d4d8da;
  --gray-darkest-white: #222426;
  --gray-darkest: #f9fafb;
  --blackish: #f9fafb;
  --hover-lighten: rgba(25, 29, 31, 0.05);
  --hover-darken: hsla(0, 0%, 100%, 0.1);
  --button-primary--border: transparent;
  --button-primary--background-hover: #327190;
  --button-primary--shadow: #fff;
  --button-primary--border-width: 2px;
  --button-primary--shadow-width: 2px;
  --button-secondary--background-hover: hsla(0, 0%, 100%, 0.05);
  --button-tertiary--border: #8c9193;
  --button-tertiary--background: transparent;
  --button-tertiary--background-hover: hsla(0, 0%, 100%, 0.05);
  --button-primaryText--color: #fff;
  --button-secondaryText--color: #fff;
  --loading-fullscreen--color: var(--gray-darkest);
  --tabs-tab--selected-indicator-color: var(--gray-darkest);
  --popup--background-color: var(--gray-lightest);
  --popup--box-shadow--color: rgba(0, 0, 0, 0.4);
  --filter-background--color: #d4d8da1a;
  --table--header-color: #f9fa9b1a;
  --table---alternating-rows-color: #f9fafb0a;
  --campus-header--gradient--opacity: 0.5;
  --course-image--opacity: 0.6;
  --course-intro-image--opacity: 0.4;
  --course-intro--text--color: var(--gray-darkest);
  --course-chapter--gradient--start-color: #0c7db680;
  --course-chapter--gradient--end-color: #6e419b80;
  --course-chapter--svg--opacity: 0.6;
  --course-section--gradient--start-color: #0b866d80;
  --course-section--gradient--end-color: #0c7db680;
  --course-section--svg--opacity: 0.6;
  --course-resource--gradient--start-color: #404448cc;
  --course-resource--gradient--end-color: #404448b3;
  --course-resource--svg--opacity: 0.6;
  --class-details--ended-message--background: var(--red-light);
  --videoViewer--menuItem--color: var(--gray-darkest);
  --videoViewer--playButton--color: var(--gray-darkest);
  --content-text-gray-lightest: var(--gray-lightest);
  --content-text-gray-light: var(--gray-light);
  --content-text-gray-dark: var(--gray-dark);
  --content-text-gray-darkest: var(--gray-darkest);
  --content-text-blue: var(--blue);
}


.light-beta {
  --white: #fff;
  --yellow-light: #fff3c4;
  --yellow: #ffce07;
  --yellow-dark: #ffce07;
  --yellow-darker: #8a6e00;
  --blue-light: #eefaff;
  --blue: #217097;
  --blue-dark: #0c4561;
  --red: #c8102e;
  --red-light: rgba(255, 165, 180, 0.2);
  --green: #047e2a;
  --green-light: rgba(115, 255, 160, 0.2);
  --gray-lightest: #f9fafb;
  --gray-lighter: #d4d8da;
  --gray-light: #d4d8da;
  --gray: #8c9193;
  --gray-dark: #6c7072;
  --gray-darker: #404448;
  --gray-darkest-white: #f4f4f4;
  --gray-darkest: #191d1f;
  --blackish: #191d1f;
  --hover-lighten: rgba(255, 255, 255, 0.1);
  --hover-darken: rgba(25, 29, 31, 0.05);
}

.light-beta .dark {
  --white: #404448;
  --yellow-light: #fff6d3;
  --yellow: #ffce07;
  --yellow-dark: #ffce07;
  --yellow-darker: #ffce07;
  --blue-light: #fff;
  --blue: #fff;
  --blue-dark: #fff;
  --red: #ff3556;
  --green: #00de45;
  --gray-lightest: #191d1f;
  --gray-lighter: #404448;
  --gray-light: #6c7072;
  --gray: #8c9193;
  --gray-dark: #d4d8da;
  --gray-darker: #d4d8da;
  --gray-darkest-white: #24282a;
  --gray-darkest: #f9fafb;
  --blackish: #fff;
  --hover-lighten: rgba(25, 29, 31, 0.05);
  --hover-darken: rgba(255, 255, 255, 0.1);
  /* buttons (commented out ones could be overridden but will default properly by color variables above) */
  --button-primary--border: transparent;
  --button-primary--color: #217097;
  --button-primary--background: #fff;
  --button-primary--background-hover: rgba(255, 255, 255, 0.9);
  --button-primary--shadow: #217097;
  --button-primary--border-width: 2px;
  --button-primary--shadow-width: 2px;
  --button-secondary--border: #fff;
  --button-secondary--color: #fff;
  --button-secondary--background: transparent;
  --button-secondary--background-hover: rgba(255, 255, 255, 0.1);
  --button-tertiary--border: #fff;
  --button-tertiary--color: #fff;
  --button-tertiary--background: transparent;
  --button-tertiary--background-hover: rgba(255, 255, 255, 0.1);
  --button-text--focus-color: #fff;
  --button-primaryText--color: #fff;
  --button-secondaryText--color: #fff;
  /* dialogs */
  /* forms */
  /* inputs */
  /* loading indicators */
  /* tabs */
  --tabs-tab--selected-color: #fff;
  /* links */
  /* text */
  /* misc */
  --warningIcon-color: #ffce07;
  /*menu items*/
  --menu-background-color: #404448;
  --navbar--background: #191d1f;
  --toast-button--color: #6c7072;
  --infobox-warning--color: #ffce07;
}
.dark-beta,
.dark-beta .dark,
.dark-theme-beta,
.dark-theme-beta .dark {
  --white: #0a0c0c;
  --yellow-light: #8a6e00;
  --yellow: #ffce07;
  --yellow-dark: #ffce07;
  --yellow-darker: #fff3c4;
  --blue-light: #002c42;
  --blue: #4b9ac1;
  --blue-dark: #eefaff;
  --red: #ff8a9d;
  --red-light: #9e001e;
  --green: #00e84a;
  --green-light: #005815;
  --gray-lightest: #191d1f;
  --gray-lighter: #6c7072;
  --gray-light: #404448;
  --gray: #6c7072;
  --gray-dark: #8c9193;
  --gray-darker: #d4d8da;
  --gray-darkest-white: #222426;
  --gray-darkest: #f9fafb;
  --blackish: #f9fafb;
  --hover-lighten: rgba(25, 29, 31, 0.05);
  --hover-darken: hsla(0, 0%, 100%, 0.1);
  --button-primary--border: transparent;
  --button-primary--background-hover: #327190;
  --button-primary--shadow: #fff;
  --button-primary--border-width: 2px;
  --button-primary--shadow-width: 2px;
  --button-secondary--background-hover: hsla(0, 0%, 100%, 0.05);
  --button-tertiary--border: #8c9193;
  --button-tertiary--background: transparent;
  --button-tertiary--background-hover: hsla(0, 0%, 100%, 0.05);
  --button-primaryText--color: #fff;
  --button-secondaryText--color: #fff;
  --loading-fullscreen--color: var(--gray-darkest);
  --tabs-tab--selected-indicator-color: var(--gray-darkest);
  --popup--background-color: var(--gray-lightest);
  --popup--box-shadow--color: rgba(0, 0, 0, 0.4);
  --nav--selected-color: var(--gray-darkest);
  --filter-background--color: #d4d8da1a;
  --table--header-color: #f9fa9b1a;
  --table---alternating-rows-color: #f9fafb0a;
  --campus-header--gradient--opacity: 0.5;
  --course-image--opacity: 0.6;
  --course-intro-image--opacity: 0.4;
  --course-intro--text--color: var(--gray-darkest);
  --course-chapter--gradient--start-color: #0c7db680;
  --course-chapter--gradient--end-color: #6e419b80;
  --course-chapter--svg--opacity: 0.6;
  --course-section--gradient--start-color: #0b866d80;
  --course-section--gradient--end-color: #0c7db680;
  --course-section--svg--opacity: 0.6;
  --course-resource--gradient--start-color: #404448cc;
  --course-resource--gradient--end-color: #404448b3;
  --course-resource--svg--opacity: 0.6;
  --class-details--ended-message--background: var(--red-light);
  --videoViewer--menuItem--color: var(--gray-darkest);
  --videoViewer--playButton--color: var(--gray-darkest);
  --content-text-gray-lightest: var(--gray-lightest);
  --content-text-gray-light: var(--gray-light);
  --content-text-gray-dark: var(--gray-dark);
  --content-text-gray-darkest: var(--gray-darkest);
  --content-text-blue: var(--blue);
}