:root {
  --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%);
}

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

*::selection,
button::selection,
input::selection,
textarea::selection {
  background-color: var(--ct-blue-very-light);
  color: var(--ct-blue-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: 0 !important;
}

.points .change.negative {
  color: var(--fuchsia) !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(--ct-blue-very-dark) !important;
}

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

.program_container .main a:link {
  color: var(--ct-blue) !important;
}

.program_container .main a:hover {
  color: var(--ct-blue-medium-light) !important;
}

.program_container .main a:active,
.program_container .main a:visited {
  color: var(--ct-blue-dark) !important;
}

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

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

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

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

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

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

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

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

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

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

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

.btn:hover,
.btn-primary:hover,
.day.active:hover,
.submit:hover {
  background-color: var(--ct-blue-medium-light) !important;
}

.btn:active,
.btn-primary:active,
.day.active:active,
.submit:active {
  background-color: var(--ct-blue-dark) !important;
}

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

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

.today::before {
  border-bottom-color: var(--ct-blue-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(--grey-1) !important;
}

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

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

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

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

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

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

*[role="checkbox"][aria-checked="true"] {
  color: white !important;
  background-color: var(--ct-blue-very-dark) !important;
  border: 1px solid var(--ct-blue-very-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(--ct-blue-light) !important;
}

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

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

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

.slider .slider-track {
  border: 1px solid var(--ct-blue-very-dark) !important;
}

.slider .slider-track .slider-selection {
  background-color: var(--ct-blue-very-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(--grey-18) !important;
}

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

.slider .slider-handle {
  border: 1px solid var(--ct-blue-very-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(--grey-1) !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(--grey-18) !important;
  color: white !important;
}

.multimedia_node:not(:has(.multimedia-node-video)) .multimedia_caption {
  background-color: var(--grey-1) !important;
  color: var(--text-color) !important;
}

audio {
  width: 100% !important;
}

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

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

/* -------------------------------------------------------------------------- */
/* 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;
}

.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(--ct-blue-very-light) !important;
}

.dropdown-menu li[role="menuitem"]:active,
.dropdown-menu li[role="menuitem"]:active * {
  background-color: var(--ct-blue-dark) !important;
  color: white !important;
}

.dropdown-menu li[role="menuitem"]:active .glyphicon,
.dropdown-menu li[role="menuitem"]:active .glyphicon::before {
  color: var(--ct-blue-light) !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;
  }

  .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) ---------------------------------- */
/* -------------------------------------------------------------------------- */