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