:root {
  /* ------------------------------------------------------------------------ */
  /* START: DEPRECATED VARIABLES -------------------------------------------- */
  /* ------------------------------------------------------------------------ */

  /*
  NOTE: The variables in this section are deprecated and will be removed from
  production in the future. If you rely on these, then please begin the process
  of replacing them with the newer variables defined below.
  */

  --ct-blue-very-light: hsl(207deg, 100%, 91%);
  --ct-blue-light: hsl(207deg, 100%, 76%);
  --ct-blue-medium-light: hsl(207deg, 100%, 66%);
  --ct-blue: hsl(207deg, 90%, 61%);
  --ct-blue-medium-dark: hsl(207deg, 80%, 56%);
  --ct-blue-dark: hsl(207deg, 80%, 46%);
  --ct-blue-very-dark: hsl(207deg, 80%, 31%);

  --grey-1: hsl(0, 0%, 95%);
  --grey-2: hsl(0, 0%, 90%);
  --grey-3: hsl(0, 0%, 85%);
  --grey-4: hsl(0, 0%, 80%);
  --grey-5: hsl(0, 0%, 75%);
  --grey-6: hsl(0, 0%, 70%);
  --grey-7: hsl(0, 0%, 65%);
  --grey-8: hsl(0, 0%, 60%);
  --grey-9: hsl(0, 0%, 55%);
  --grey-10: hsl(0, 0%, 50%);
  --grey-11: hsl(0, 0%, 45%);
  --grey-12: hsl(0, 0%, 40%);
  --grey-13: hsl(0, 0%, 35%);
  --grey-14: hsl(0, 0%, 30%);
  --grey-15: hsl(0, 0%, 25%);
  --grey-16: hsl(0, 0%, 20%);
  --grey-17: hsl(0, 0%, 15%);
  --grey-18: hsl(0, 0%, 10%);
  --grey-19: hsl(0, 0%, 5%);

  --fuchsia: hsl(345deg, 90%, 61%);

  --text-color: hsl(0deg, 0%, 31.4%);

  /* ------------------------------------------------------------------------ */
  /* END: DEPRECATED VARIABLES ---------------------------------------------- */
  /* ------------------------------------------------------------------------ */

  /* ------------------------------------------------------------------------ */
  /* START: NEW VARIABLES --------------------------------------------------- */
  /* ------------------------------------------------------------------------ */

  /*
  The following variables supersede the above deprecated variables and are safe
  to use in production.

  NOTE: There are some utility classes below as well if you'd prefer to use
  those instead than the variables.

  NOTE: If you change the names of these variables, then be sure to change the
  names of the corresponding utility classes! For example, if you rename the
  variable "--color-danger" to "--color-error", then you should also rename the
  ".has-background-danger", ".has-border-danger", and ".has-text-danger" classes
  as well (to ".has-background-error", ".has-border-error", and ".has-text-
  error" respectively).
  */

  --color-accent-dark: hsl(200, 33.96%, 20.78%);
  --color-accent-light-1: hsl(47.86, 99.21%, 50.2%);
  --color-accent-light-2: hsl(32.04, 94.04%, 53.92%);
  --color-accent-light-3: hsl(38.18, 64.71%, 93.33%);
  --color-danger-light: hsl(344.67, 75%, 92.94%);
  --color-danger: hsl(344.67, 75%, 52.94%);
  --color-danger-dark: hsl(344.67, 75%, 27.94%);
  --color-grey-light: hsl(0, 0%, 80%);
  --color-grey: hsl(0, 0%, 50%);
  --color-grey-dark: hsl(0, 0%, 20%);
  --color-grey-very-light: hsl(0, 0%, 95%);
  --color-grey-medium-light: hsl(0, 0%, 65%);
  --color-grey-medium-dark: hsl(0, 0%, 35%);
  --color-grey-very-dark: hsl(0, 0%, 5%);
  --color-info-light: hsl(208.75, 94.49%, 90.2%);
  --color-info: hsl(208.75, 94.49%, 50.2%);
  --color-info-dark: hsl(208.75, 94.49%, 25.2%);
  --color-primary-light: hsl(208.75, 94.49%, 80.2%);
  --color-primary: hsl(208.75, 94.49%, 50.2%);
  --color-primary-dark: hsl(208.75, 94.49%, 30.2%);
  --color-primary-very-light: hsl(208.75, 94.49%, 95.2%);
  --color-primary-medium-light: hsl(208.75, 94.49%, 65.2%);
  --color-primary-medium-dark: hsl(208.75, 94.49%, 40.2%);
  --color-primary-very-dark: hsl(208.75, 94.49%, 20.2%);
  --color-success-light: hsl(92.65, 88.7%, 85.1%);
  --color-success: hsl(92.65, 88.7%, 45.1%);
  --color-success-dark: hsl(92.65, 88.7%, 20.1%);
  --color-warning-light: hsl(47.86, 99.21%, 90.2%);
  --color-warning: hsl(47.86, 99.21%, 50.2%);
  --color-warning-dark: hsl(47.86, 99.21%, 25.2%);

  --border-width: 1px;
  --font-family-primary: "Avenir";
  --font-family-secondary: "Inter", "Arial";
  --filter-hover: brightness(105%);
  --filter-active: brightness(90%);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

  /* ------------------------------------------------------------------------ */
  /* END: NEW VARIABLES ----------------------------------------------------- */
  /* ------------------------------------------------------------------------ */
}

/* -------------------------------------------------------------------------- */
/* START: VARIABLE UTILITY CLASSES ------------------------------------------ */
/* -------------------------------------------------------------------------- */

.has-background-accent-dark {
  background-color: hsl(200, 33.96%, 20.78%) !important;
}

.has-border-accent-dark {
  border: var(--border-width) solid hsl(200, 33.96%, 20.78%) !important;
}

.has-text-accent-dark {
  color: hsl(200, 33.96%, 20.78%) !important;
}

.has-background-accent-light-1 {
  background-color: hsl(47.86, 99.21%, 50.2%) !important;
}

.has-border-accent-light-1 {
  border: var(--border-width) solid hsl(47.86, 99.21%, 50.2%) !important;
}

.has-text-accent-light-1 {
  color: hsl(47.86, 99.21%, 50.2%) !important;
}

.has-background-accent-light-2 {
  background-color: hsl(32.04, 94.04%, 53.92%) !important;
}

.has-border-accent-light-2 {
  border: var(--border-width) solid hsl(32.04, 94.04%, 53.92%) !important;
}

.has-text-accent-light-2 {
  color: hsl(32.04, 94.04%, 53.92%) !important;
}

.has-background-accent-light-3 {
  background-color: hsl(38.18, 64.71%, 93.33%) !important;
}

.has-border-accent-light-3 {
  border: var(--border-width) solid hsl(38.18, 64.71%, 93.33%) !important;
}

.has-text-accent-light-3 {
  color: hsl(38.18, 64.71%, 93.33%) !important;
}

.has-background-danger-light {
  background-color: hsl(344.67, 75%, 92.94%) !important;
}

.has-border-danger-light {
  border: var(--border-width) solid hsl(344.67, 75%, 92.94%) !important;
}

.has-text-danger-light {
  color: hsl(344.67, 75%, 92.94%) !important;
}

.has-background-danger {
  background-color: hsl(344.67, 75%, 52.94%) !important;
}

.has-border-danger {
  border: var(--border-width) solid hsl(344.67, 75%, 52.94%) !important;
}

.has-text-danger {
  color: hsl(344.67, 75%, 52.94%) !important;
}

.has-background-danger-dark {
  background-color: hsl(344.67, 75%, 27.94%) !important;
}

.has-border-danger-dark {
  border: var(--border-width) solid hsl(344.67, 75%, 27.94%) !important;
}

.has-text-danger-dark {
  color: hsl(344.67, 75%, 27.94%) !important;
}

.has-background-grey-light {
  background-color: hsl(0, 0%, 80%) !important;
}

.has-border-grey-light {
  border: var(--border-width) solid hsl(0, 0%, 80%) !important;
}

.has-text-grey-light {
  color: hsl(0, 0%, 80%) !important;
}

.has-background-grey {
  background-color: hsl(0, 0%, 50%) !important;
}

.has-border-grey {
  border: var(--border-width) solid hsl(0, 0%, 50%) !important;
}

.has-text-grey {
  color: hsl(0, 0%, 50%) !important;
}

.has-background-grey-dark {
  background-color: hsl(0, 0%, 20%) !important;
}

.has-border-grey-dark {
  border: var(--border-width) solid hsl(0, 0%, 20%) !important;
}

.has-text-grey-dark {
  color: hsl(0, 0%, 20%) !important;
}

.has-background-grey-very-light {
  background-color: hsl(0, 0%, 95%) !important;
}

.has-border-grey-very-light {
  border: var(--border-width) solid hsl(0, 0%, 95%) !important;
}

.has-text-grey-very-light {
  color: hsl(0, 0%, 95%) !important;
}

.has-background-grey-medium-light {
  background-color: hsl(0, 0%, 65%) !important;
}

.has-border-grey-medium-light {
  border: var(--border-width) solid hsl(0, 0%, 65%) !important;
}

.has-text-grey-medium-light {
  color: hsl(0, 0%, 65%) !important;
}

.has-background-grey-medium-dark {
  background-color: hsl(0, 0%, 35%) !important;
}

.has-border-grey-medium-dark {
  border: var(--border-width) solid hsl(0, 0%, 35%) !important;
}

.has-text-grey-medium-dark {
  color: hsl(0, 0%, 35%) !important;
}

.has-background-grey-very-dark {
  background-color: hsl(0, 0%, 5%) !important;
}

.has-border-grey-very-dark {
  border: var(--border-width) solid hsl(0, 0%, 5%) !important;
}

.has-text-grey-very-dark {
  color: hsl(0, 0%, 5%) !important;
}

.has-background-info-light {
  background-color: hsl(208.75, 94.49%, 90.2%) !important;
}

.has-border-info-light {
  border: var(--border-width) solid hsl(208.75, 94.49%, 90.2%) !important;
}

.has-text-info-light {
  color: hsl(208.75, 94.49%, 90.2%) !important;
}

.has-background-info {
  background-color: hsl(208.75, 94.49%, 50.2%) !important;
}

.has-border-info {
  border: var(--border-width) solid hsl(208.75, 94.49%, 50.2%) !important;
}

.has-text-info {
  color: hsl(208.75, 94.49%, 50.2%) !important;
}

.has-background-info-dark {
  background-color: hsl(208.75, 94.49%, 25.2%) !important;
}

.has-border-info-dark {
  border: var(--border-width) solid hsl(208.75, 94.49%, 25.2%) !important;
}

.has-text-info-dark {
  color: hsl(208.75, 94.49%, 25.2%) !important;
}

.has-background-primary-light {
  background-color: hsl(208.75, 94.49%, 80.2%) !important;
}

.has-border-primary-light {
  border: var(--border-width) solid hsl(208.75, 94.49%, 80.2%) !important;
}

.has-text-primary-light {
  color: hsl(208.75, 94.49%, 80.2%) !important;
}

.has-background-primary {
  background-color: hsl(208.75, 94.49%, 50.2%) !important;
}

.has-border-primary {
  border: var(--border-width) solid hsl(208.75, 94.49%, 50.2%) !important;
}

.has-text-primary {
  color: hsl(208.75, 94.49%, 50.2%) !important;
}

.has-background-primary-dark {
  background-color: hsl(208.75, 94.49%, 30.2%) !important;
}

.has-border-primary-dark {
  border: var(--border-width) solid hsl(208.75, 94.49%, 30.2%) !important;
}

.has-text-primary-dark {
  color: hsl(208.75, 94.49%, 30.2%) !important;
}

.has-background-primary-very-light {
  background-color: hsl(208.75, 94.49%, 95.2%) !important;
}

.has-border-primary-very-light {
  border: var(--border-width) solid hsl(208.75, 94.49%, 95.2%) !important;
}

.has-text-primary-very-light {
  color: hsl(208.75, 94.49%, 95.2%) !important;
}

.has-background-primary-medium-light {
  background-color: hsl(208.75, 94.49%, 65.2%) !important;
}

.has-border-primary-medium-light {
  border: var(--border-width) solid hsl(208.75, 94.49%, 65.2%) !important;
}

.has-text-primary-medium-light {
  color: hsl(208.75, 94.49%, 65.2%) !important;
}

.has-background-primary-medium-dark {
  background-color: hsl(208.75, 94.49%, 40.2%) !important;
}

.has-border-primary-medium-dark {
  border: var(--border-width) solid hsl(208.75, 94.49%, 40.2%) !important;
}

.has-text-primary-medium-dark {
  color: hsl(208.75, 94.49%, 40.2%) !important;
}

.has-background-primary-very-dark {
  background-color: hsl(208.75, 94.49%, 20.2%) !important;
}

.has-border-primary-very-dark {
  border: var(--border-width) solid hsl(208.75, 94.49%, 20.2%) !important;
}

.has-text-primary-very-dark {
  color: hsl(208.75, 94.49%, 20.2%) !important;
}

.has-background-success-light {
  background-color: hsl(92.65, 88.7%, 85.1%) !important;
}

.has-border-success-light {
  border: var(--border-width) solid hsl(92.65, 88.7%, 85.1%) !important;
}

.has-text-success-light {
  color: hsl(92.65, 88.7%, 85.1%) !important;
}

.has-background-success {
  background-color: hsl(92.65, 88.7%, 45.1%) !important;
}

.has-border-success {
  border: var(--border-width) solid hsl(92.65, 88.7%, 45.1%) !important;
}

.has-text-success {
  color: hsl(92.65, 88.7%, 45.1%) !important;
}

.has-background-success-dark {
  background-color: hsl(92.65, 88.7%, 20.1%) !important;
}

.has-border-success-dark {
  border: var(--border-width) solid hsl(92.65, 88.7%, 20.1%) !important;
}

.has-text-success-dark {
  color: hsl(92.65, 88.7%, 20.1%) !important;
}

.has-background-warning-light {
  background-color: hsl(47.86, 99.21%, 90.2%) !important;
}

.has-border-warning-light {
  border: var(--border-width) solid hsl(47.86, 99.21%, 90.2%) !important;
}

.has-text-warning-light {
  color: hsl(47.86, 99.21%, 90.2%) !important;
}

.has-background-warning {
  background-color: hsl(47.86, 99.21%, 50.2%) !important;
}

.has-border-warning {
  border: var(--border-width) solid hsl(47.86, 99.21%, 50.2%) !important;
}

.has-text-warning {
  color: hsl(47.86, 99.21%, 50.2%) !important;
}

.has-background-warning-dark {
  background-color: hsl(47.86, 99.21%, 25.2%) !important;
}

.has-border-warning-dark {
  border: var(--border-width) solid hsl(47.86, 99.21%, 25.2%) !important;
}

.has-text-warning-dark {
  color: hsl(47.86, 99.21%, 25.2%) !important;
}

/* -------------------------------------------------------------------------- */
/* END: VARIABLE UTILITY CLASSES -------------------------------------------- */
/* -------------------------------------------------------------------------- */

body {
  padding-top: 24px !important;
}

*::selection,
button::selection,
input::selection,
textarea::selection {
  background-color: var(--color-primary-very-light);
  color: var(--color-primary-very-dark);
}

a.clearerthinking_brand {
  opacity: 0.67;
}

a.clearerthinking_brand:focus,
a.clearerthinking_brand:focus-visible,
a.clearerthinking_brand:focus-within,
a.clearerthinking_brand:hover {
  opacity: 1;
}

a.clearerthinking_brand img {
  height: 88px;
}

.sidebar {
  width: auto;
  height: auto;
  padding: 1.5em;
  position: fixed;
  left: 0;
  top: 20px;
}

.sidebar a.clearerthinking_brand {
  height: 106px;
}

.addthis_button_facebook,
.addthis_button_twitter,
.addthis_button_google_plusone_share,
.addthis_button_reddit,
.addthis_button_stumbleupon,
.addthis_button_hackernews,
.addthis_button_compact {
  display: none !important;
}

#clearerthinking_brand {
  position: absolute !important;
  top: 22px !important;
  left: 14px !important;
}

.points .change.negative {
  color: var(--color-danger) !important;
}

#program_navigation
  > div.navigation_container
  > ul
  > li[role="button"]:active
  .fa,
#program_navigation
  > div.navigation_container
  > ul
  > li[role="button"]:active
  .fa::before {
  color: var(--color-primary-very-dark) !important;
}

.bottom-bar a.clearerthinking_brand {
  position: relative;
  top: -24px;
  width: 106px;
}

.program_container .main a,
.program_container .main a:link,
.program_container .main a:visited {
  color: var(--color-primary) !important;
}

.program_container .main a:hover {
  filter: var(--filter-hover) !important;
}

.program_container .main a:active {
  filter: var(--filter-active) !important;
}

.program_container *:focus-visible:not(input, textarea) {
  outline: medium auto var(--color-primary) !important;
}

.points .total::before {
  color: var(--color-primary) !important;
}

.progress-bar {
  background-color: var(--color-primary) !important;
}

.maintain {
  background-color: var(--color-grey-very-light) !important;
}

.component > .text > *:last-child,
.panel .text > *:last-child {
  margin-bottom: 0 !important;
}

.panel-heading {
  padding: 0 !important;
}

.panel-heading a.panel-title {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-content: center !important;
  align-items: center !important;
  gap: 1.5em !important;
}

.panel-heading a.panel-title h4.panel-title {
  width: 100% !important;
  min-width: unset !important;
  max-width: unset !important;
  flex-shrink: 999999 !important;
  padding: 10px 15px !important;
}

.panel-heading a.panel-title .toggle-expand {
  position: unset !important;
  top: unset !important;
  bottom: unset !important;
  left: unset !important;
  right: unset !important;
  margin: 0 10px !important;
  padding: 0 !important;
  width: 1.5em !important;
  min-width: 1.5em !important;
  max-width: 1.5em !important;
  height: 1.5em !important;
  min-height: 1.5em !important;
  max-height: 1.5em !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-content: center !important;
  align-items: center !important;
}

.panel-heading a.panel-title .toggle-expand .glyphicon {
  top: unset !important;
  bottom: unset !important;
  left: unset !important;
  right: unset !important;
}

.component.clickable:focus,
.component.clickable:focus-visible,
.component.clickable:focus-within,
.component.clickable:hover {
  border: 1px solid var(--color-primary) !important;
  filter: var(--filter-hover) !important;
}

.component.clickable:active {
  border: 1px solid var(--color-primary-very-light) !important;
  filter: var(--filter-active) !important;
}

.fa,
.fa::before,
.glyphicon,
.glyphicon::before {
  color: var(--color-primary) !important;
}

.fa-grip-vertical,
.fa-grip-vertical::before {
  color: var(--color-grey-light) !important;
}

.fa-share-square,
.fa-share-square::before {
  color: #333333 !important;
}

#run-menu-toggle .glyphicon,
#run-menu-toggle .glyphicon::before {
  color: var(--color-grey-medium-dark) !important;
}

.btn,
.btn-primary,
.day.active,
.submit {
  background-color: var(--color-primary) !important;
  border: 1px solid var(--color-primary-medium-dark) !important;
}

.btn:hover,
.btn-primary:hover,
.day.active:hover,
.submit:hover {
  filter: var(--filter-hover) !important;
}

.btn:active,
.btn-primary:active,
.day.active:active,
.submit:active {
  filter: var(--filter-active) !important;
}

.btn:disabled,
.submit:disabled {
  background-color: var(--color-grey-very-light) !important;
  border: 1px solid var(--color-grey-very-light) !important;
}

.day.active {
  border: none !important;
}

.today::before {
  border-bottom-color: var(--color-primary-light) !important;
}

.btn[data-action="decrementHours"],
.btn[data-action="incrementHours"],
.btn[data-action="decrementMinutes"],
.btn[data-action="incrementMinutes"] {
  background-color: white !important;
}

.btn[data-action="decrementHours"]:hover,
.btn[data-action="incrementHours"]:hover,
.btn[data-action="decrementMinutes"]:hover,
.btn[data-action="incrementMinutes"]:hover {
  background-color: var(--color-grey-very-light) !important;
}

.btn[data-action="decrementHours"]:active,
.btn[data-action="incrementHours"]:active,
.btn[data-action="decrementMinutes"]:active,
.btn[data-action="incrementMinutes"]:active {
  background-color: var(--color-grey-very-light) !important;
}

.answer:focus,
.answer:focus-visible,
.answer:focus-within {
  border: 1px solid var(--color-primary-light) !important;
}

.summary .answer {
  border: none !important;
}

.answer:has(*[role="checkbox"][aria-checked="true"]) {
  background-color: var(--color-primary-very-light) !important;
  border: 1px solid var(--color-primary) !important;
}

.answer:active,
.answer:active:has(*[role="checkbox"][aria-checked="true"]),
.answer.dragging {
  background-color: var(--color-primary-very-light) !important;
  border: 1px solid var(--color-primary) !important;
  filter: var(--filter-active);
}

.unexpected_answer {
  color: var(--color-danger) !important;
}

*[role="checkbox"],
*[role="checkbox"]::after {
  color: var(--color-grey) !important;
  font-weight: bold !important;
}

*[role="checkbox"][aria-checked="true"] {
  color: white !important;
  background-color: var(--color-primary-dark) !important;
  border: 1px solid var(--color-primary-dark) !important;
}

*[role="checkbox"][aria-checked="true"]::after {
  color: white !important;
}

input[type="text"],
textarea {
  padding: 8px !important;
}

input[type="text"]:focus,
input[type="text"]:focus-visible,
input[type="text"]:focus-within,
textarea:focus,
textarea:focus-visible,
textarea:focus-within {
  border: 1px solid var(--color-primary-light) !important;
}

.input-group-addon {
  background-color: var(--color-primary-very-light) !important;
  color: var(--color-primary-very-dark) !important;
}

.input-group-addon:first-child {
  border-top: 1px solid var(--color-primary-light) !important;
  border-right: none !important;
  border-bottom: 1px solid var(--color-primary-light) !important;
  border-left: 1px solid var(--color-primary-light) !important;
}

.input-group-addon:last-child {
  border-top: 1px solid var(--color-primary-light) !important;
  border-right: 1px solid var(--color-primary-light) !important;
  border-bottom: 1px solid var(--color-primary-light) !important;
  border-left: none !important;
}

.slider .slider-track {
  border: 1px solid var(--color-primary-dark) !important;
}

.slider .slider-track .slider-selection {
  background-color: var(--color-primary-dark) !important;
}

.slider .slider-track .slider-selection,
.slider .slider-track .slider-track-high,
.slider .slider-track .slider-track-low {
  box-sizing: border-box !important;
  margin: -1px !important;
  height: 10px !important;
}

.slider .tooltip .tooltip-arrow {
  border-top-color: var(--color-grey-dark) !important;
}

.slider .tooltip .tooltip-inner {
  background-color: var(--color-grey-dark) !important;
}

.slider .slider-handle {
  border: 1px solid var(--color-primary-dark) !important;
}

.summary {
  margin-top: 1.5em !important;
  margin-bottom: 1.5em !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

.multimedia_node {
  display: block !important;
  margin-top: 1.5em !important;
  margin-bottom: 1.5em !important;
  width: 100% !important;
  max-width: 100% !important;
}

.multimedia_node:not(:has(.multimedia-node-video)) {
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.multimedia_node:has(.multimedia_caption) {
  background-color: var(--color-grey-very-light) !important;
}

.multimedia_node img {
  margin-bottom: 0 !important;
}

.multimedia_node .multimedia-node-video {
  margin-bottom: 0 !important;
  border: 0 !important;
}

.multimedia_node .multimedia_caption {
  margin-top: -8px !important;
  margin-bottom: 0 !important;
  padding: 0.75em !important;
  background-color: var(--color-grey-very-dark) !important;
  color: white !important;
}

.multimedia_node:not(:has(.multimedia-node-video)) .multimedia_caption {
  background-color: var(--color-grey-very-light) !important;
  color: var(--color-grey-medium-dark) !important;
}

audio {
  width: 100% !important;
}

.fb_iframe_widget {
  margin: 1.5em 0 !important;
}

.component.end-card-inner-container {
  margin: 1.5em 0 !important;
}

#countdown #clock_face {
  color: var(--color-grey) !important;
}

#countdown #countdown_progress_container #countdown_progress {
  background-color: var(--color-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* START: GUIDEDTRACK-SPECIFIC STYLES (2025-04-03) -------------------------- */
/* -------------------------------------------------------------------------- */

/*
The following `.branding` styles apply to the "Powered by GuidedTrack" button at
the bottom right corner of the page. I think they're supposed to be included in
GuidedTrack's own stylesheets eventually; but since they're not yet present
there as I write this, I'm including them here.

Josh Castle
joshrcastle@gmail.com
2025-04-03
*/

.branding {
  bottom: 12px;
  box-sizing: border-box;
  color: rgb(51, 51, 51);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  position: fixed;
  right: 6px;
  --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
  --fa-style-family-brands: "Font Awesome 6 Brands";
  --fa-style-family-classic: "Font Awesome 6 Free";
}

.branding a.link {
  background-color: rgb(247, 247, 247);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-sizing: border-box;
  color: rgb(128, 128, 128);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 8px;
  text-decoration-color: rgb(128, 128, 128);
  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
  --fa-style-family-brands: "Font Awesome 6 Brands";
  --fa-style-family-classic: "Font Awesome 6 Free";
}

.branding a.link:hover {
  background-color: rgb(227, 227, 227);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-sizing: border-box;
  color: rgb(128, 128, 128);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 8px;
  text-decoration-color: rgb(128, 128, 128);
  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
  --fa-style-family-brands: "Font Awesome 6 Brands";
  --fa-style-family-classic: "Font Awesome 6 Free";
}

.branding a.link strong {
  box-sizing: border-box;
  color: rgb(33, 158, 151);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
  --fa-style-family-brands: "Font Awesome 6 Brands";
  --fa-style-family-classic: "Font Awesome 6 Free";
}

.branding a.link .glyphicon {
  box-sizing: border-box;
  color: rgb(164, 164, 164) !important;
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  position: relative;
  top: 1px;
  --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
  --fa-style-family-brands: "Font Awesome 6 Brands";
  --fa-style-family-classic: "Font Awesome 6 Free";
}

.branding a.link .glyphicon::before {
  box-sizing: border-box;
  color: rgb(164, 164, 164) !important;
  content: "";
  font-family: "Glyphicons Halflings";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
  --fa-style-family-brands: "Font Awesome 6 Brands";
  --fa-style-family-classic: "Font Awesome 6 Free";
}

/* -------------------------------------------------------------------------- */
/* END: GUIDEDTRACK-SPECIFIC STYLES (2025-04-03) ---------------------------- */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* START: MOBILE UPDATES (2023-11-22) --------------------------------------- */
/* -------------------------------------------------------------------------- */

/*
NOTE: These updates modify the mobile layout a little so that:
1. The ShareThis buttons don't cover up the navigation items at the bottom of
   the page when *navigation is used in the GT program.
2. A "Share" button is added to the bar at the top of the page.
3. A small CT magnifying glass logo icon is added to the top bar. It links to
   clearerthinking.org.
4. Some small bugs are fixed in the dropdown menu (which wasn't displaying
   correctly in some browsers).
5. Points are centered in the top bar. The animation that's displayed when
   are added or subtracted covers the top bar.
6. The shadow already applied to the top bar is moved down 4px to account for
   occlusion by the progress bar.
*/

.dropdown-menu {
  left: 0 !important;
  width: fit-content !important;
  max-width: fit-content !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
}

.dropdown-menu li[role="menuitem"] {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  list-style-type: none !important;
  list-style-position: unset !important;
  filter: brightness(100%) !important;
}

.dropdown-menu li[role="menuitem"],
.dropdown-menu li[role="menuitem"]:active,
.dropdown-menu li[role="menuitem"]:focus,
.dropdown-menu li[role="menuitem"]:focus-visible,
.dropdown-menu li[role="menuitem"]:focus-within,
.dropdown-menu li[role="menuitem"]:hover,
.dropdown-menu li[role="menuitem"] *,
.dropdown-menu li[role="menuitem"] .glyphicon,
.dropdown-menu li[role="menuitem"] .glyphicon::before {
  transition: none !important;
  animation: none !important;
}

.dropdown-menu li[role="menuitem"]:last-child {
  border-radius: 0 0 6px 6px !important;
}

.dropdown-menu li[role="menuitem"]:focus,
.dropdown-menu li[role="menuitem"]:focus-visible,
.dropdown-menu li[role="menuitem"]:focus-within,
.dropdown-menu li[role="menuitem"]:hover {
  background-color: var(--color-primary-very-light) !important;
  filter: var(--filter-hover) !important;
}

.dropdown-menu li[role="menuitem"]:active,
.dropdown-menu li[role="menuitem"]:active * {
  filter: var(--filter-active) !important;
}

#ct-logo,
#navigation_share_button {
  display: none;
}

@media (max-width: 960px) {
  #clearerthinking_brand {
    display: none !important;
  }

  #ct-logo {
    width: 48px;
    height: 48px;
    display: flex;
    flex: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    opacity: 0.67;
  }

  #ct-logo:focus,
  #ct-logo:focus-visible,
  #ct-logo:focus-within,
  #ct-logo:hover {
    opacity: 1;
  }

  #ct-logo:focus {
    background-color: rgb(211, 211, 211);
  }

  #ct-logo img {
    height: 1.5em;
    min-height: 1.5em;
    max-height: 1.5em;
  }
}

@media (max-width: 768px) {
  #program_navigation {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1) !important;
  }

  .progress + #program_navigation {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  }

  #program_navigation * {
    z-index: 2;
  }

  #program_navigation #back-button,
  #program_navigation #run-menu {
    position: unset;
    top: unset;
    right: unset;
    bottom: unset;
    left: unset;
  }

  #program_navigation #back-button:empty,
  #program_navigation #run-menu:empty {
    display: none;
  }

  #program_navigation #back-button:active,
  #program_navigation #back-button:focus {
    background-color: rgb(211, 211, 211);
  }

  #ct-logo {
    position: relative;
  }

  #navigation_spacer {
    width: 1px;
    flex-grow: 999999;
  }

  #navigation_share_button {
    display: unset;
    width: auto;
    height: 48px;
    padding: 0.5em;
    line-height: 1em;
    margin: 0;
    padding: 0.5em;
    border: 0;
    background-color: transparent;
    opacity: 0.67;
  }

  #navigation_share_button:focus,
  #navigation_share_button:focus-visible,
  #navigation_share_button:focus-within,
  #navigation_share_button:hover {
    opacity: 1;
  }

  #navigation_share_button:active {
    background-color: rgb(211, 211, 211);
    z-index: 1001;
  }

  .dropdown-menu {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1) !important;
  }

  .dropdown-menu li[role="menuitem"],
  .dropdown-menu li[role="menuitem"]:last-child {
    border-radius: 0 !important;
  }

  #program_navigation:has(.dropdown.open) ~ .main,
  #program_navigation:has(.dropdown.open) .navigation_container {
    filter: blur(5px) !important;
  }

  .points {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  .points .change.positive,
  .points .change.negative {
    height: 48px;
  }

  .points .change.positive:empty,
  .points .change.negative:empty {
    display: none !important;
  }

  .clearerthinking_brand.clearerthinking_brand_lg {
    display: none;
  }

  .sharethis-sticky-share-buttons {
    position: fixed !important;
    bottom: -48px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: bottom 0.1s ease-out !important;
    box-shadow: var(--shadow);
  }

  .sharethis-sticky-share-buttons.are-visible {
    bottom: 0px !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }

  .navigation_container {
    transition: bottom 0.1s ease-out !important;
  }

  .navigation_container.sharethis-buttons-are-visible {
    bottom: 48px !important;
    transition: bottom 0.1s ease-out !important;
  }
}

@media (max-width: 384px) {
  #navigation_share_button .share-button-label {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/* END: MOBILE UPDATES (2023-11-22) ----------------------------------------- */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* START: THREE-DOT MENU UPDATES (2024-11-04) ------------------------------- */
/* -------------------------------------------------------------------------- */

#program_navigation ul.dropdown-menu {
  width: fit-content !important;
  max-width: fit-content !important;
  max-height: calc(100vh - 3em) !important;
  overflow-y: auto !important;
}

#program_navigation ul.dropdown-menu li.new-dropdown-menu-item,
#program_navigation ul.dropdown-menu li.new-dropdown-menu-item * {
  white-space: normal !important;
  text-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
}

#program_navigation ul.dropdown-menu li a {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}

#program_navigation ul.dropdown-menu li a .glyphicon,
#program_navigation ul.dropdown-menu li a .glyphicon::before,
#program_navigation ul.dropdown-menu li a .fa,
#program_navigation ul.dropdown-menu li a .fa::before,
#program_navigation ul.dropdown-menu li a .emoji,
#program_navigation ul.dropdown-menu li.new-dropdown-menu-item a .glyphicon,
#program_navigation
  ul.dropdown-menu
  li.new-dropdown-menu-item
  a
  .glyphicon::before,
#program_navigation ul.dropdown-menu li.new-dropdown-menu-item a .fa,
#program_navigation ul.dropdown-menu li.new-dropdown-menu-item a .fa::before,
#program_navigation ul.dropdown-menu li.new-dropdown-menu-item a .emoji {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  display: inline-block !important;
}

#program_navigation
  ul.dropdown-menu
  li
  a
  .glyphicon:not(.glyphicon-new-window) {
  position: relative !important;
  top: -0.025em !important;
}

#program_navigation ul.dropdown-menu li a .fa {
  position: relative !important;
  top: -0.025em !important;
}

#program_navigation ul.dropdown-menu li a .fa.fa-home {
  position: relative !important;
  top: -0.05em !important;
}

#program_navigation
  ul.dropdown-menu
  li.new-dropdown-menu-item
  a
  .glyphicon-new-window,
#program_navigation
  ul.dropdown-menu
  li.new-dropdown-menu-item
  a
  .glyphicon-new-window::before {
  color: rgb(192, 192, 192) !important;
}

#program_navigation
  ul.dropdown-menu
  li.new-dropdown-menu-item
  a
  .glyphicon-new-window {
  margin-left: 0.5em !important;
}

#program_navigation
  ul.dropdown-menu
  li.new-dropdown-menu-item
  a
  .glyphicon-new-window::before {
  font-size: 0.85em !important;
}

#program_navigation ul.dropdown-menu li.new-dropdown-menu-item a span.text {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--themeColor-text) !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  #program_navigation ul.dropdown-menu {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
  }

  #program_navigation
    ul.dropdown-menu
    li
    a
    .glyphicon:not(.glyphicon-new-window) {
    position: relative !important;
    top: -0.1em !important;
  }

  #program_navigation ul.dropdown-menu li a .fa {
    position: relative !important;
    top: 0 !important;
  }

  #program_navigation ul.dropdown-menu li a .fa.fa-home {
    position: relative !important;
    top: -0.05em !important;
  }

  #program_navigation ul.dropdown-menu li a .glyphicon,
  #program_navigation ul.dropdown-menu li a .glyphicon::before,
  #program_navigation ul.dropdown-menu li a .fa,
  #program_navigation ul.dropdown-menu li a .fa::before,
  #program_navigation ul.dropdown-menu li a .emoji,
  #program_navigation ul.dropdown-menu li.new-dropdown-menu-item a .glyphicon,
  #program_navigation
    ul.dropdown-menu
    li.new-dropdown-menu-item
    a
    .glyphicon::before,
  #program_navigation ul.dropdown-menu li.new-dropdown-menu-item a .fa,
  #program_navigation ul.dropdown-menu li.new-dropdown-menu-item a .fa::before,
  #program_navigation ul.dropdown-menu li.new-dropdown-menu-item a .emoji {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* END: THREE-DOT MENU UPDATES (2024-11-04) --------------------------------- */
/* -------------------------------------------------------------------------- */