@charset "UTF-8";
@media print {
    .no-print, .no-print * {
        display: none !important;
    }

    .avoid-break {
        break-inside: avoid;
    }

    #main-content {
        margin-left: 0 !important
    }

    html, body {
        width: 210mm;
        height: 297mm;
    }
}


:root {
    /* Font Awesome 7 defaults icons to a fixed 1.25em width; keep the natural
       glyph widths we had under FA5. fa-fw still works (it sets its own --fa-width). */
    --fa-width: auto;
    --font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --blue: #34b4e9;
    --blue-2: #1780AB;
    --orange-1: #E65D24;
    --yellow: #FBCB00;
    --green: #19833B;
    --red: #BE4144;
    --navy: #474C69;
    --placeholder-grey: #aaa;
    --muted: #acb3b9;
    --bg-page: #fbfbf8;
    --bg-surface: #f6f6f3;
}

html {
    height: 100%;
    /* keeps focused/anchored elements clear of the 60px fixed top navbar when scrolled to */
    scroll-padding-top: 70px;
}

body {
    background-color: var(--bg-page);
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: var(--navy);
    height: 100%;
    font-size: .95rem;
}

body.no-scroll {
    height: 100%;
    overflow: hidden
}

@font-face {
    font-family: 'slab-icomoon';
    src: url('/static/fonts/slab3.3-icomoon.eot?9ngzob');
    src: url('/static/fonts/slab3.3-icomoon.eot?9ngzob#iefix') format('embedded-opentype'), url('/static/fonts/slab3.3-icomoon.ttf?9ngzob') format('truetype'), url('/static/fonts/slab3.3-icomoon.woff?9ngzob') format('woff'), url('/static/fonts/slab3.3-icomoon.svg?9ngzob#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

small, .small {
    font-size: 0.8em;
}

::selection {
  background: #FFCC00;
  color: black;
}

p a::selection, p a::selection {
    color: #888
}

.walkthrus-icon {
    height: 1.2em !important;
    width: 1.2em !important;
    background: url('/static/images/walkthrus-logo-tiny.png');
    display: inline-block;
    background-size: contain;
    position: relative;
    top: 1px;
}

.fa-sm .walkthrus-icon, .fa-sm.walkthrus-icon {
    width: calc(1.2em * .875) !important;
    height: calc(1.2em * .875) !important;
}

.tlac-icon {
    height: 1.2em !important;
    width: 1.2em !important;
    background: url('/static/images/tlac-logo-tiny.png');
    display: inline-block;
    background-size: contain;
    position: relative;
    top: 1px;
}

.fa-sm .tlac-icon, .fa-sm.tlac-icon {
    width: calc(1.2em * .875) !important;
    height: calc(1.2em * .875) !important;
}

.shake {
    transform-origin: center center
}

.shake-freeze, .shake-constant.shake-constant--hover:hover, .shake-trigger:hover .shake-constant.shake-constant--hover {
    animation-play-state: paused
}

.shake-freeze:hover, .shake-trigger:hover .shake-freeze, .shake:hover, .shake-trigger:hover .shake {
    animation-play-state: running;
}

@keyframes shake {
    2% {
        transform: translate(-.5px, -.5px) rotate(-.5deg)
    }
    4% {
        transform: translate(2.5px, -.5px) rotate(.5deg)
    }
    6% {
        transform: translate(-.5px, 2.5px) rotate(-.5deg)
    }
    8% {
        transform: translate(.5px, 2.5px) rotate(-.5deg)
    }
    10% {
        transform: translate(1.5px, 1.5px) rotate(-.5deg)
    }
    12% {
        transform: translate(2.5px, .5px) rotate(1.5deg)
    }
    14% {
        transform: translate(1.5px, -.5px) rotate(.5deg)
    }
    16% {
        transform: translate(.5px, -1.5px) rotate(.5deg)
    }
    18% {
        transform: translate(-.5px, 1.5px) rotate(1.5deg)
    }
    20% {
        transform: translate(2.5px, -1.5px) rotate(-.5deg)
    }
    22% {
        transform: translate(-1.5px, -.5px) rotate(1.5deg)
    }
    24% {
        transform: translate(-1.5px, 2.5px) rotate(-.5deg)
    }
    26% {
        transform: translate(.5px, 2.5px) rotate(.5deg)
    }
    28% {
        transform: translate(1.5px, .5px) rotate(1.5deg)
    }
    30% {
        transform: translate(-.5px, -1.5px) rotate(.5deg)
    }
    32% {
        transform: translate(-1.5px, 1.5px) rotate(.5deg)
    }
    34% {
        transform: translate(2.5px, 1.5px) rotate(1.5deg)
    }
    36% {
        transform: translate(.5px, -.5px) rotate(.5deg)
    }
    38% {
        transform: translate(-.5px, -.5px) rotate(1.5deg)
    }
    40% {
        transform: translate(-.5px, -1.5px) rotate(1.5deg)
    }
    42% {
        transform: translate(-1.5px, 1.5px) rotate(1.5deg)
    }
    44% {
        transform: translate(-1.5px, .5px) rotate(-.5deg)
    }
    46% {
        transform: translate(-.5px, .5px) rotate(-.5deg)
    }
    48% {
        transform: translate(-1.5px, 2.5px) rotate(-.5deg)
    }
    50% {
        transform: translate(1.5px, 1.5px) rotate(1.5deg)
    }
    52% {
        transform: translate(-.5px, .5px) rotate(.5deg)
    }
    54% {
        transform: translate(.5px, -1.5px) rotate(1.5deg)
    }
    56% {
        transform: translate(-1.5px, -1.5px) rotate(-.5deg)
    }
    58% {
        transform: translate(-1.5px, 2.5px) rotate(1.5deg)
    }
    60% {
        transform: translate(-1.5px, 1.5px) rotate(-.5deg)
    }
    62% {
        transform: translate(-1.5px, 1.5px) rotate(-.5deg)
    }
    64% {
        transform: translate(1.5px, 2.5px) rotate(1.5deg)
    }
    66% {
        transform: translate(.5px, .5px) rotate(1.5deg)
    }
    68% {
        transform: translate(-.5px, .5px) rotate(-.5deg)
    }
    70% {
        transform: translate(1.5px, -.5px) rotate(-.5deg)
    }
    72% {
        transform: translate(-.5px, 1.5px) rotate(.5deg)
    }
    74% {
        transform: translate(1.5px, .5px) rotate(-.5deg)
    }
    76% {
        transform: translate(-1.5px, 1.5px) rotate(-.5deg)
    }
    78% {
        transform: translate(2.5px, 2.5px) rotate(.5deg)
    }
    80% {
        transform: translate(2.5px, 2.5px) rotate(1.5deg)
    }
    82% {
        transform: translate(-.5px, -.5px) rotate(1.5deg)
    }
    84% {
        transform: translate(-1.5px, -1.5px) rotate(.5deg)
    }
    86% {
        transform: translate(-.5px, -.5px) rotate(1.5deg)
    }
    88% {
        transform: translate(2.5px, .5px) rotate(-.5deg)
    }
    90% {
        transform: translate(1.5px, 2.5px) rotate(1.5deg)
    }
    92% {
        transform: translate(1.5px, -1.5px) rotate(-.5deg)
    }
    94% {
        transform: translate(-1.5px, 2.5px) rotate(1.5deg)
    }
    96% {
        transform: translate(2.5px, -.5px) rotate(.5deg)
    }
    98% {
        transform: translate(-1.5px, 1.5px) rotate(.5deg)
    }
    0%, 100% {
        transform: translate(0, 0) rotate(0)
    }
}

.shake:hover, .shake-trigger:hover .shake, .shake.shake-freeze, .shake.shake-constant {
    animation-name: shake;
    animation-duration: 100ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite
}

.shake-and-level-up-plus-one {
    /* STEP-991: var(--blue) #34b4e9 is only ~2.4:1 on white and fails WCAG AA
       (1.4.3). Use --blue-2 (#1780AB) so the "+1" increment meets AA everywhere
       this celebration animation appears. */
    color: var(--blue-2);
    font-weight: bold;
    position: absolute;
    margin-top: 50px;
    margin-left: -15px;
    font-size: 30px;
    -webkit-animation-name: shake-and-level-up-ascend;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-name: shake-and-level-up-ascend;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


@keyframes shake-and-level-up-ascend {
    from {
        top: 0;
        opacity: 100%;
    }
    to {
        opacity: 0%;
        top: -5em;
    }
}

a {
    color: var(--blue);
    text-decoration: none;
    background-color: transparent;
    transition: color 0.15s ease-in-out;
}

a:hover {
    color: #148bbc;
    text-decoration: underline;
}

a.no-underline:hover {
    text-decoration: none;
}

.no-underline {
    text-decoration: none !important;
}

[class^="icon-slab"], [class*=" icon-slab"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'slab-icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Around 50 of these icomoon icons borrow a Font Awesome size class (fa-xs,
       fa-sm) purely for sizing. FA7 added a vertical-align to those classes,
       computed for FA's own glyph geometry, which silently lifted these icons
       out of the position they were tuned in. Opt back out of it. */
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class^="icon-slab"], [class*=" icon-slab"] {
    text-decoration: none !important;
}

.icon-slab:before {
    content: "\e900";
}

.icon-slab-msg:before {
    content: "\e901";
}

.icon-slab-nudge:before {
    content: "\e902";
}

.icon-slab-shoutout:before {
    content: "\e903";
}

.icon-slab-arrow:before {
    content: "\e904";
    font-weight: 900;
    top: 3px;
    position: relative;
    margin-left: 4px;
}

.icon-slab-arrow.icon-slab-arrow-no-down:before {
    top: 0px;
}

.icon-slab-lens:before {
    content: "\e666";
    position: relative;
    top: 1px;
}

.icon-slab-lens.fa-fw {
    display: inline-block;
}

.icon-slab-passkey:before {
  content: "\e905";
}

.dropdown-menu .dropdown-divider:last-child, .dropdown-menu .dropdown-divider:first-child {
    display: none;
}

.big {
    font-size: 120%;
    line-height: 1.2;
}

.bigger {
    font-size: 110%;
    line-height: 1.1;
}

.lh-1-5 {
    line-height: 1.5;
}

.helptt-icon[role="tooltip"], .helptt-icon[role="button"] {
    position: relative;
    z-index: 2;
    outline: none;

    &::after {
        content: "";
    }

    &:is(:focus)::after {
        box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
        border-radius: 50%;
    }

    &:is(:active)::after {
        box-shadow: none !important;
    }
}

.tt-content.tt-content-bypass-title h1,
.tt-content.tt-content-bypass-title .helptt-header {
    display: none
}

.helptt .helptt-header, .helptt h1 {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 10px;
}

.helptt .helptt-header:before, .helptt h1:not(.noinfoicon):before {
    content: '\f05a';
    font-family: 'Font Awesome 5 Pro';
    padding-right: 6px;
}

.helptt .rocket-box p:first-child:before {
    content: "🚀";
    margin-right: 5px;    
}

.helptt .rocket-box :last-child, .helptt .info-box :last-child, .helptt .box :last-child {
    margin-bottom: 0
}

.helptt .kb-link {
    margin-top: 30px;
}

.helptt .info-box {
    font-size: 80%;
}
.helptt .info-box p:first-child:before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f05a';
    padding-right: 4px;
    position: relative;
    top: -1px;
    display: inline;
    font-weight: 900;
    font-size: 80%;    
}


.helptt .kb-link:before {
    content: 'Tutorials';
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}

.helptt .kb-link ~ .kb-link {
    margin-top: 0
}

.helptt .kb-link ~ .kb-link:before,
.helptt .helptt-header + .kb-link:before {
    content: '';
    display: none;
}

.helptt .kb-link:before {
    content: 'Tutorials' !important;
}

img.helptt-img {
    margin: auto;
    box-shadow: #aaa 0px 0px 10px 0px;
    border-radius: 0.75rem;
}

.introjs-tooltiptext img.helptt-img {
    max-width: 315px;
}

/* A11y (WCAG 2.4.7): the vendored intro.js stylesheet sets outline:0 on its
   buttons/bullets and only styles :hover, leaving keyboard focus invisible. */
.introjs-button:focus,
.introjs-skipbutton:focus,
.introjs-bullets ul li a:focus,
.introjs-hint:focus {
    outline: 2px solid var(--navy) !important;
    outline-offset: 2px;
}

.introjs-tooltiptext img.helptt-img.fadeout::after {
    background-color: white;
    width: 315px;
    height: 50px;
}

.fade-out-panel-wrapper {
    position: relative;
    overflow: hidden;
    position: relative;
    left: -20px;
    width: calc(100% + 40px);
    text-align: center;
}

.fade-out-panel {
    position: absolute;
    bottom: -14px;
    background-color: white;
    z-index: 2;
    width: calc(100% + 30px);
    height: 20px;
    left: -10px;
    box-shadow: white -1px -1px 20px 20px;
}

.slim-hr hr {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.slim-br {
    line-height: 0.5;
}

ul.slim-margin, ol.slim-margin {
    padding-inline-start: 20px;
}

#ckok_ask {
    position: fixed;
    z-index: 10000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: black;
    opacity: 0.5;
}

#ckok_ask_pane {
    z-index: 10001;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    left: 0;
    right: 0;
    top: 25px;
    background: white;
    padding: 20px 35px;
    border-radius: 7px;
}

@keyframes rotateit {
    100% {
        transform: rotate(360deg);
    }
}

#main-content {
    top: 110px;
    padding: 0;
    background-color: var(--bg-page);
    width: 100%;
}

@media print {
    #main-content, body, #header-top-page-hider {
        background-color: white;
    }
}

.current-mark:before, .grey-mark:before {
    content: '\0000B7';
    font-weight: 900;
    color: #C85021;
    margin-right: 5px;
    top: 0;
}

.grey-mark:before {
    color: #999;
}

[data-help] {
    cursor: pointer;
    transition: font-size 0.2s ease-in-out;
}

[data-help]:not(.no-data-help-hover):hover {
    font-weight: 900;
    font-size: 110%;
}

.inherit-color, .inherit-color:hover {
    color: inherit;
}

.inherit-decoration {
    text-decoration: inherit;
}

a.stretched-link {
    text-decoration: inherit;
    color: inherit
}

.inherit-bg, .btn-primary.inherit-bg {
    background-color: inherit;
}

.sl-wrap, .sl-nowrap {
    display: block;
    width: 100%;
    position: relative;
}

.sl-wrap:focus-visible, .sl-wrap:-webkit-direct-focus, .sl-wrap:focus, .sl-wrap a:focus, .sl-wrap a:focus-visible, .sl-wrap a:-webkit-direct-focus, .sl-wrap a {
    outline: 0 !important;
    outline-width: 0px;
}

.sl-wrap .sl-body [tabindex] {
    transition: all 0.1s;
}

/* Slabs without a title (e.g. notifications) carry their link in .sl-subtitle, so the
   focus treatment must cover both containers or those slabs get no visible focus state. */
.sl-wrap {
    &:has(.sl-body :is(.sl-title, .sl-subtitle) a:focus, .sl-body :is(.sl-title, .sl-subtitle) [tabindex]:not([data-help]):focus) {
        background-color: rgb(0 123 255 / 5%);
        box-shadow: 0 0 0.2rem 0.2rem rgb(0 123 255 / 5%);
        margin: 3px 0;
        scale: 1.02;
    }
    &:has(.sl-body :is(.sl-title, .sl-subtitle) a:active, .sl-body :is(.sl-title, .sl-subtitle) [tabindex]:not([data-help]):active) {
        background-color: inherit;
        box-shadow: none;
        outline: none;
    }
}

.underlineOnFocus:focus {
    text-decoration: underline;
}

.sl-wrap.sl-noicon [tabindex]:focus:before {
    left: -1px;
}

.sl-circle a, .sl-circle a:focus {
    outline: 0 !important;
}

.sl-wrap .stretched-link, .sl-nowrap .stretched-link {
    color: inherit;
    text-decoration: inherit;
}

/* Do not show optional label for Symptom Checker Examples */
.sl-wrap.sl-track[data-is-linked-content="true"] .stretched-link .optional-label {
    display: none;
}

.sl-wrap.noinfo .sl-body {
    position: relative;
    top: 6px;
}

.sl-wrap.sl-sz-xs.noinfo .sl-body {
    top: 3px;
}

.sl-wrap.sl-sz-sm.noinfo .sl-body {
    top: 7px;
}

.sl-wrap.noinfo.sl-track .sl-body {
    position: relative;
    top: -2px;
}

.sl-wrap .step {
    border-radius: 5px;
    background-color: var(--bg-surface);
    font-size: 13px;
    padding: 7px 10px;
    margin-top: 6px;
}

.sl-track-completestatus:before {
    content: 'Not yet completed';
}

.sl-track.current:not(.loading-mark):before,
.sl-track.active:not(.loading-mark):before {
    line-height: 20px;
}

.sl-h-complete .sl-track-completestatus:before {
    content: 'Completed';
}

.sl-circle {
    vertical-align: top;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin: auto;
    margin-bottom: 15px;
    background-color: var(--bg-surface);
    line-height: 45px;
    text-align: center;
    transition: all 0.1s;
    color: var(--navy);
    position: relative;
}

.sl-circle .fas, .sl-circle .fab, .sl-circle .far {
    line-height: 45px;
}

.sl-sz-sm .sl-circle .fas, .sl-sz-sm .sl-circle .fab, .sl-sz-sm .sl-circle .far {
    line-height: 35px;
}

.sl-sz-sm.sl-align-md .sl-icon {
    padding-left: 5px;
    padding-right: 5px;
}

.sl-sz-xs .sl-circle .fas, .sl-sz-xs .sl-circle .fab, .sl-sz-xs .sl-circle .far, .sl-circle.xs .fas, .sl-circle.xs .fab, .sl-circle.xs .far {
    line-height: 28px;
}

.sl-sz-xs.sl-align-md .sl-icon {
    padding-left: 8px;
    padding-right: 8px;
}

.sl-sz-xs.sl-align-md .sl-action .sl-icon {
    padding-left: 0px;
    padding-right: 0px;
}

.sl-sz-xs.sl-align-sm .sl-icon {
    padding-left: 3px;
    padding-right: 5px;
}

.sl-sz-xs.sl-align-sm .sl-action .sl-icon {
    padding-left: 0px;
    padding-right: 0px;
}

.sl-sz-xxs .sl-circle .fas, .sl-sz-xxs .sl-circle .fab, .sl-sz-xxs .sl-circle .far {
    line-height: 22px;
}

.sl-sz-xxl .sl-circle .fas, .sl-sz-xxl .sl-circle .fab, .sl-sz-xxl .sl-circle .far {
    line-height: 120px;
}

.sl-sz-xxl .sl-circle, .sl-sz-xxl.rosette .sl-circle {
    height: 120px;
    width: 120px;
    line-height: 120px;
    font-size: 45px;
}

.sl-list.is_complete .sl-wrap:not(.sl-h-complete) .sl-circle.sl-circle-track,
.sl-list.is_complete.highlight-sl-circles .sl-wrap:not(.sl-h-complete) .sl-circle,
.sl-list.complete-faded-circles .sl-wrap.sl-h-faded .sl-circle {
    border: 3px solid #34b4e9;
}

.sl-h-partial.sl-wrap .sl-icon .sl-circle {
    border: 3px solid #34b4e9;
}

.sl-h-partial-top.sl-wrap .sl-icon .sl-circle {
    border: 1px solid #34b4e9;
}
.sl-h-partial-bottom.sl-wrap .sl-icon .sl-circle {
    border: 1px solid #34b4e9;
}

.sl-h-partial.sl-wrap .sl-icon .sl-circle .fas,
.sl-h-partial.sl-wrap .sl-icon .sl-circle .fab,
.sl-h-partial.sl-wrap .sl-icon .sl-circle .far,
.complete-faded-circles .sl-h-faded.sl-wrap .sl-icon .sl-circle .fas,
.complete-faded-circles .sl-h-faded.sl-wrap .sl-icon .sl-circle .fab,
.complete-faded-circles .sl-h-faded.sl-wrap .sl-icon .sl-circle .far,
.sl-list.is_complete .sl-h-faded.sl-wrap .sl-icon .sl-circle .fas,
.sl-list.is_complete .sl-h-faded.sl-wrap .sl-icon .sl-circle .fab,
.sl-list.is_complete .sl-h-faded.sl-wrap .sl-icon .sl-circle .far,
.sl-h-partial.sl-wrap .sl-icon > .sl-circle > span:before,
.sl-h-partial.sl-wrap .sl-icon > .sl-circle > a > span:before {
    position: relative;
    top: -3px;
}

.sl-h-border.sl-wrap .sl-icon .sl-circle {
    border: 2px solid #D7D8DE;
}

.sl-h-border.sl-wrap .sl-icon .sl-circle span {
    top: -2px;
    position: relative;
}

.sl-h-partial.sl-wrap .sl-action .sl-icon .sl-circle,
.sl-h-slim-partial.sl-wrap .sl-action .sl-icon .sl-circle {
    border: inherit
}

.sl-sz-sm > .sl-icon > .sl-circle, .sl-circle.sm {
    width: 35px;
    height: 35px;
    font-size: 15px;
    line-height: 35px;
    margin-bottom: 10px;
}

.sl-sz-sm > .sl-body > .sl-title {
    font-size: 16px;
    margin-top: 0px;
    margin-bottom: -2px;
}

.sl-sz-sm > .sl-body > .sl-info {
    margin-bottom: 10px;
}

.sl-sz-xs > .sl-icon > .sl-circle, .sl-circle.xs {
    width: 28px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    margin-bottom: 8px
}

.sl-sz-xxs > .sl-icon > .sl-circle, .sl-circle.xxs {
    width: 22px;
    height: 22px;
    font-size: 11px;
    line-height: 22px;
    margin-bottom: 8px
}

.sl-circle.xs.align-md {
    margin-left: 10px;
    margin-bottom: 0px
}

.sl-sz-xs > .sl-body > .sl-title {
    font-size: 15px;
    margin-top: 0px;
    margin-bottom: -1px;
}

.sl-sz-xxs > .sl-body > .sl-title {
    font-size: 15px;
    margin-top: -2px;
    margin-bottom: 1px;
}

.sl-sz-sm > .sl-body > .sl-info {
    margin-bottom: 8px;
}

.sl-noinfomb .sl-info {
    margin-bottom: 0px !important;
}

.sl-h-complete > .sl-icon > .sl-circle {
    background-color: var(--blue);
    color: white;
}

.sl-h-gold > .sl-icon > .sl-circle {
    background-color: #FBCB00;
    color: white;
}

.sl-h-orange > .sl-icon > .sl-circle {
    background-color: #C85021;
    color: white;
}

.sl-h-inverted > .sl-icon > .sl-circle {
    background-color: #474c69;
    color: white;
}

.sl-h-faded > .sl-icon > .sl-circle-thumb {
    opacity: 0.5;
}

.sl-h-faded > .sl-icon > .sl-circle:not(.sl-circle-thumb) {
    border: 1px solid var(--bg-surface);
    background-color: var(--bg-surface);
    color: #ccc;
}

.sl-h-faded > .sl-body > .sl-title, .sl-h-faded > .sl-body > .sl-subtitle {
    color: #A4A9AC;
}

.sl-h-incomplete > .sl-icon > .sl-circle:not(.sl-circle-thumb) {
    border: 2px solid #e9e9e9;
    background-color: white;
}

.sl-h-pending > .sl-icon > .sl-circle:not(.sl-circle-thumb) {
    background-color: var(--bg-surface);
}

.sl-title .pd-title {
    color: #A9AAAE;
    font-size: 13px;
    display: block;
    margin-bottom: 2px;
    margin-top: -8px;
    font-weight: 400;
}

.sl-circle.sl-circle-thumb {
    background-size: cover;
    background-position: center;
}

/* Realm-icon initials in a slab circle (slab('realm', ...)): colour comes from
   the .switcher-realm-icon-<preset> class, size/centering from the per-size
   .sl-circle rules; only the weight is needed here. */
.sl-circle.sl-circle-realm-initials {
    font-weight: bold;
}

.sl-wrap.sl-hover {
    cursor: pointer;
}

.sl-wrap.sl-hover:hover > .sl-icon > .sl-circle,
.sl-hover-outer:hover .sl-wrap.sl-hover-inner > .sl-icon > .sl-circle {
    width: 47px;
}

.sl-wrap.sl-track.sl-hover:hover > .sl-icon > .sl-circle,
.sl-hover-outer:hover .sl-wrap.sl-hover-inner.sl-track > .sl-icon > .sl-circle {
    width: 27px;
}

.sl-wrap.sl-hover.sl-sz-sm:hover > .sl-icon > .sl-circle,
.sl-hover-outer:hover .sl-wrap.sl-hover-inner.sl-sz-sm > .sl-icon > .sl-circle {
    width: 38px;
}

.sl-wrap.sl-hover.sl-sz-xs:hover > .sl-icon > .sl-circle,
.sl-hover-outer:hover .sl-wrap.sl-hover-inner.sl-sz-xs > .sl-icon > .sl-circle {
    width: 31px;
}

.sl-wrap.sl-hover:hover > .sl-body > .sl-title,
.sl-hover-outer:hover .sl-wrap.sl-hover-inner > .sl-body > .sl-title {
    color: #767DA2;
}

.sl-wrap:focus-visible:before, .sl-wrap a:-webkit-direct-focus {
    content: '>' !important;
    position: absolute;
    font-weight: 900;
    font-size: 30px;
    left: -10px;
}

.sl-wrap.current:not(.loading-mark):before,
.sl-wrap.active:not(.loading-mark):before {
    content: '\0000B7';
    position: absolute;
    font-weight: 900;
    font-size: 30px;
    left: -10px;
    color: #C85021;
    z-index: 2;
}

.sl-wrap.loading-mark:before {
    content: '\f110';
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    font-weight: 900;
    font-size: 12px;
    left: -15px;
    top: 13px;
    color: #ccc;
    animation: fa-spin 2s infinite linear;
}

.sl-wrap.sl-sz-sm.loading-mark:before {
    top: 8px;
}

.sl-wrap.sl-sz-xs.loading-mark:before {
    top: 4px;
}

.sl-wrap.sl-noicon.current:not(.loading-mark):before,
.sl-wrap.sl-noicon.active:not(.loading-mark):before {
    left: -12px;
    top: -7px;
}

.sl-wrap.sl-sz-sm.current:not(.loading-mark):before,
.sl-wrap.sl-sz-sm.active:not(.loading-mark):before {
    line-height: 30px;
}

.sl-wrap.sl-sz-xs.current:not(.loading-mark):before,
.sl-wrap.sl-sz-xs.active:not(.loading-mark):before {
    line-height: 23px;
}

.sl-wrap.sl-sz-xs.sl-noicon.current:not(.loading-mark):before,
.sl-wrap.sl-sz-xs.sl-noicon.active:not(.loading-mark):before {
    top: -1px;
    left: -8px;
}

/* Notification slabs run to several lines, so the dot must not key off the slab's
   own height — that drags it well below the icon. Centre it on the circle instead:
   line-height = circle height minus 5, the same relationship the sl-sz-sm/xs rules
   above use. Notification slabs are always sl-sz-md, so the circle is 45px. */
.sl-wrap.sl-ntf.current:not(.loading-mark):before {
    top: 0;
    line-height: 40px;
}

.sl-circle-due span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f3c5";
}

.sl-circle-step span:before {
    font-family: 'slab-icomoon' !important;
    content: '\e900';
    font-size: 110%;
    position: relative;
    top: -1px;
}

.sl-sz-sm .sl-circle-step span:before {
    top: 0px;
    left: -1px;
}

.sl-sz-xs .sl-circle-step span:before {
    top: -1px;
    left: 0px;
    font-size: 95%;
}

.solo-step .sl-circle-step span:before {
    color: var(--blue);
}

.sl-circle-mod span:before, .sl-circle-crs span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f5fd";
}

.sl-circle-gs span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f036";
}

.sl-circle-goal span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f648";
}

.sl-circle-seq span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f0cb";
}

.sl-circle-pending span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f252";
}

.sl-circle-prac span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f364";
}

.sl-circle-feedback span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f004";
}

/* ptmod is two layers! here's how you do duotone: */
.sl-circle-ptmod span:before {
    font-family: "Font Awesome 5 Duotone";
    font-weight: 900;
    content: "\10f5fd";
    color: white;
    position: absolute;
    top: 0;
    left: 15px;
    z-index: 2;
}

.sl-circle-ptmod span:after {
    font-family: "Font Awesome 5 Duotone";
    font-weight: 900;
    content: "\f5fd";
    color: white;
    position: absolute;
    top: 0;
    left: 15px;
    opacity: 0.5;
    z-index: 1;
}

.sl-circle-school span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f549";
}

.sl-sz-sm .sl-circle-ptmod span:after, .sl-sz-sm .sl-circle-ptmod span:before {
    left: 10px;
}
.sl-sz-xs .sl-circle-ptmod span:after, .sl-sz-xs .sl-circle-ptmod span:before {
    left: 8px;
}

.sl-circle-study span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f518";
}

.sl-circle-unit span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    content: "\f5fd";
}

.sl-circle-observe span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f06e";
}

.sl-circle-prg span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    content: "\f1b2";
}

.sl-circle-survey span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    content: "\f681";
}

.sl-circle-flag span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f024";
}

.sl-circle-filecheck span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f316";
}

.sl-circle-filetimes span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f317";
}

.sl-h-navy .sl-circle {
    background-color: var(--navy);
    color: white;
}

.sl-circle-bulletin span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f0a1";
}

.sl-circle-pledge span:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f2b5";
}

.sl-circle-walkthrus span {
    height: 90%;
    width: 90%;
    background: url('/static/images/walkthrus-logo-tiny.png');
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 5%;
}

.sl-circle-tlac span {
    height: 90%;
    width: 90%;
    background: url('/static/images/tlac-logo-tiny.png');
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 5%;
}

.sl-icon {
    display: table-cell;
    text-align: center;
    width: 45px;
}

.sl-list > div.sl-wrap:not(:last-of-type) > .sl-icon {
    background: linear-gradient(var(--bg-surface), var(--bg-surface)) no-repeat center/3px 100%;
}

div.sl-wrap.sl-line-complete:not(:last-of-type) > .sl-icon {
    background: linear-gradient(#34b4e9, #34b4e9) no-repeat center/3px 100%;
}

.sl-list.is_complete > .sl-wrap > .sl-icon {
  background: transparent;
}

.sl-list.is_complete > .sl-wrap:not(.d-none):has(~ .sl-wrap:not(.d-none)) > .sl-icon {
    background: linear-gradient(#34b4e9, #34b4e9) no-repeat center/3px 100%;
}

div.sl-wrap.sl-line-dark:not(:last-of-type) > .sl-icon {
    background: linear-gradient(#474c6838, #474c6838) no-repeat center / 3px 100%
}

.sl-list > div.sl-wrap.sl-nolist > .sl-icon {
    background: none
}

.sl-body {
    display: table-cell;
    vertical-align: top;
    padding-left: 5px;
    transition: padding-right 0.1s;
    width: 100%;
    position: relative;
}

.sl-noicon .sl-body {
    padding-right: 7px;
}

.sl-action {
    display: table-cell;
    vertical-align: top;
    transition: padding-right 0.1s;
}

.sl-action .btn:not(.btn-nomw) {
    padding-left: 13px;
    padding-right: 13px;
}

.sl-hover:not(.sl-noicon):hover .sl-body,
.sl-hover-outer:hover .sl-wrap.sl-hover-inner:not(.sl-noicon) .sl-body {
    padding-right: 7px;
}

.sl-wrap:not(.sl-noicon) > .sl-body {
    padding-left: 10px;
}

.sl-title {
    color: var(--navy);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;
    margin-top: 5px;
}

.sl-track .sl-title {
    margin-top: 1px;
}

.sl-info {
    margin-top: 1px;
    margin-bottom: 15px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.sl-info + .sl-debug {
    margin-top: -20px;
}

.sl-tight .sl-info {
    margin-bottom: 7px;
}

.sl-wrap:last-child > .sl-body > .sl-info {
    margin-bottom: 0px;
}

.sl-wrap:last-child > .sl-icon > .sl-circle {
    margin-bottom: 0px;
}

.sl-subtitle {
    margin-top: 0px;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.1;
    margin-bottom: 4px;
}

.sl-wrap.sl-sz-xs > .sl-body > .sl-subtitle {
    margin-top: 2px;
}

.rosette .sl-circle {
    font-size: 20px;
    margin-bottom: 15px !important;
}

.rosette .sl-circle div.x {
    width: 0.8em;
    height: 11px;
    background: #FBCB00;
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    left: 15px;
    top: 43px;
    z-index: 2;
    transition: left 0.1s;
}

.sl-hover.rosette:hover .sl-circle div.x {
    left: 18px;
}

.rosette .sl-circle div.x:after {
    content: "";
    display: block;
    position: absolute;
    height: 0;
    width: 0;
    bottom: -1px;
    left: 0;
    border: .4em solid rgba(255, 255, 255, 1);
    border-top: .4em solid rgba(255, 255, 255, 0);
    border-left: .4em solid rgba(255, 255, 255, 0);
    border-right: .4em solid rgba(255, 255, 255, 0);
}

.rosette.sl-sz-sm .sl-circle div.x {
    left: 11px;
    top: 31px;
}

.rosette.sl-sz-xxl .sl-circle div.x {
    left: 42px;
    top: 113px;
    height: 28px;
}

.rosettes-list {
    text-align: justify;
    position: relative;
    margin-bottom: -15px;
}

.rosettes-list li {
    position: relative;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    border-radius: 50%;
    background: var(--bg-page);
    display: inline-block;
    color: white;
    margin-bottom: 10px;
}

.rosettes-list li.achieved {
    background: #FBCB00;
}

.rosettes-list li span {
    width: 0.8em;
    height: 9px;
    background: var(--bg-page);
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    left: 0.6em;
    top: 29px;
    z-index: 2;
}

.rosettes-list li.achieved span {
    background: #FBCB00;
}

.rosettes-list li span:after {
    content: "";
    display: block;
    position: absolute;
    height: 0;
    width: 0;
    bottom: -1px;
    left: 0;
    border: .4em solid rgba(255, 255, 255, 1);
    border-top: .4em solid rgba(255, 255, 255, 0);
    border-left: .4em solid rgba(255, 255, 255, 0);
    border-right: .4em solid rgba(255, 255, 255, 0);
}

.rosettes-list:after {
    content: "";
    display: inline-block;
    width: 100%;
}

.sl-wrap.sl-center, .sl-wrap.sl-center .sl-body, .sl-wrap.sl-center .sl-icon {
    display: block;
}

.sl-wrap.sl-center .sl-icon {
    width: 100%;
}

.sl-wrap.sl-center.sl-rev .sl-icon {
    padding-top: 10px;
}

/* Toasts and callouts share a lot of the same stylings */

.callout {
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.04);
    padding: 8px;
    position: relative;
    padding-left: 35px;
}


.callout:before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 600;
    position: absolute;
    left: 10px;
    content: '\f05a';
    color: var(--blue-2);
}


#toast-container {
    position: fixed;
    top: 70px;
    right: 30px;
    z-index: 1080;
    pointer-events: none;
}

#toast-container .toast {
    pointer-events: auto;
    min-width: 400px;
    max-width: 400px;
    box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    background-color: white;
    cursor: grab;
}

#toast-container .toast.grabbing {
    cursor: grabbing;
}

#toast-container .toast-body {
    padding: 8px;
    font-size: 16px;
}

#toast-container .toast .toast-body:before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    display: inline-block;
    margin-left: 2px;
    margin-right: 6px;
    position: relative;
    content: '\f05a';
    color: var(--blue-2);
}


/* default toast/callouts are 'info' */
#toast-container .toast,
.callout {
    border-left: 6px solid var(--blue-2);
}

#toast-container .toast.error-toast .toast-body:before,
.callout.callout-error:before {
    content: '\f06a';
    color: var(--red);
}

#toast-container .toast.error-toast,
.callout.callout-error {
    border-left-color: var(--red);
}

#toast-container .toast.success-toast .toast-body:before,
.callout.callout-success:before {
    content: '\f058';
    color: var(--green);
}

#toast-container .toast.success-toast,
.callout.callout-success {
    border-left-color: var(--green);
}

#toast-container .toast.warning-toast .toast-body:before,
.callout.callout-warning:before {
    content: '\f024';
    color: var(--orange-1);
}

#toast-container .toast.warning-toast,
.callout.callout-warning {
    border-left-color: var(--orange-1);
}

#toast-container .toast .toast-header {
    border-top-left-radius: 0.61em;
    border-top-right-radius: 0.61em;
}

@media (max-width: 576px) {
    #toast-container {
        right: 0;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    #toast-container .toast {
        min-width: unset;
        max-width: unset;
        width: 100%;
    }
}


/*/
/ Small devices (landscape phones, 576px and up)*/
#stickies-box {
    color: white !important;
    background-color: #C85021;
    padding-top: 10px;
    min-height: 60px;
}

#stickies-box.slab-announcement {
    background-color: #e8a42c;
    border: 3px solid #FFCC00;
}

#stickies-box.multi {
    box-shadow: 0px 6px 0px -2px #f6a994;
}

#stickies-box .sticky-text[data-slab]:before {
    font-family: 'slab-icomoon';
    content: "\e900";
    font-weight: 600;
    margin-right: 6px;
    font-size: 12px;
    margin-top: 1px;
}

#stickies-box.slab-announcement .btn-orange-inverse {
    color: #e8a42c;
    border-color: #FFCC00;
}

@media (max-width: 991.98px) {
    #sidebar-close-layer {
        position: fixed;
        display: block;
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(3.5px);
        -webkit-backdrop-filter: blur(5.5px);
    }
}

@media (min-width: 992px) {
    #stickies-box {
        min-height: 60px;
        width: calc(100% - 200px);
        margin-top: -85px;
    }

    /*Adds a vertical line to the right of the sidebar*/
    #sidebar-inner::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 1px;
        background: #dfdfdf;
    }

    #header-menu {
        display: none !important;
    }

    .brand-title {
        display: inline-block !important;
        margin-left: .5rem;
    }

    .brand-title:hover {
        text-decoration: none;
    }
}


/* Large devices (desktops, 992px and up)! */
@media (min-width: 992px) {
    #sidebar {
        width: 190px !important;
        min-width: 190px !important;
        display: block
    }

    #sidebar-inner, #sidebar-whiter {
        width: 190px !important;
    }

    /* The +/- box is exempt: this rule is about showing the label text once
       there is room for it, and its `inline-block !important` was also landing
       on the indicator, which needs to stay the flex box that centres the mark
       in its 24px square. */
    .sidebar-menu-item span:not(.sidebar-menu-group-indicator) {
        display: inline-block !important;
    }

    .sidebar-menu-item .icon {
        font-size: .75em !important;
        top: 0px !important;
    }

    .sidebar-menu-item {
        padding: 0.375rem 0.75rem;
        font-size: 1.1rem;
        line-height: 1.5;
    }
}

@media (max-width: 991.98px) {
    .sidebar-menu-item {
        padding: .5rem 1rem;
        font-size: 1.25rem;
        line-height: 1.5;
    }
}

#top-header {
    position: fixed;
    top: 0;
    right: 0;
    padding-left: 25px;
    padding-right: 25px;
    z-index: 25;
    padding-top: 15px;
    /* actual value set in 576px @media below */
    transition: padding-top 0.5s ease;
}

body {
    overflow-x: hidden;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#header-menu {
    position: fixed;
    top: 12px;
    left: 25px;
    z-index: 5;
    width: 65px;
    margin-left: -3px;
    margin-bottom: 5px;
    height: 67px;
    transition: color 0.1s, top 0.5s ease;
}

#header-box, #header-menu {
    border: 3px solid var(--bg-page);
}

#header-box {
    margin-left: auto;
    margin-right: -3px;
    display: table;
    margin-top: -3px;
    margin-bottom: 0px;
    height: 60px;
    padding: 5px 5px;
    transition: opacity 0.5s ease;
}

#header-top-page-hider {
    display: block;
    height: 85px;
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    background-color: var(--bg-page);
    z-index: 4;
}

@media screen and (min-width: 577px) {
    .opacity-focus-hider:not(:hover):not(.force-visible) {
        opacity: 0.2;
    }
}

@media screen and (min-width: 992px) {
    #header-top-page-hider {
        display: none;
    }

    #top-header {
        padding-top: 25px;
    }

    #header-menu {
        top: 25px;
    }
}

@media screen and (max-width: 576px) {
}

#header .fa-fw {
    font-size: 24px;
    transition: color 0.1s;
}

#header .btn:not(:disabled):hover {
    background-color: white;
}

#header .btn:not(:disabled):hover .fa-fw {
    color: var(--blue);
}

.dropdown-divider:first-child {
    display: none;
}

#header-menu .fa-bars {
    left: -4px;
    position: relative;
}

#header-photo-dropdown .dropdown-toggle {
    width: 60px;
    height: 40px;
    display: inline-block
}

#header-photo-dropdown .dropdown-toggle:after {
    position: relative;
    left: 42px;
    top: 3px;
}

#header-photo-dropdown .dropdown-toggle:focus {
    outline: 0 !important;
}

#header-photo-dropdown .dropdown-toggle:focus #header-photo {
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}

#header-photo {
    width: 40px;
    height: 40px;
    background-size: cover;
    display: inline-block;
    border-radius: 50%;
    margin-left: 2px;
    margin-top: -8px;
    position: absolute;
    background-color: var(--bg-page);
}

.header-region-flag {
    position: absolute;
    z-index: 2;
    margin-left: 41px;
    font-size: 1.25rem;
    margin-top: -6px;
}

#sidebar {
    display: block;
    height: 100%;
    width: 100%;
    background-color: white;
    overflow-x: hidden;
    text-align: center;
}

#sidebar-whiter2 {
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: white;
    z-index: 2;
    width: 0%;
}

#sidebar-inner {
    z-index: 3;
}

#sidebar-inner .sidebar-inner-partner-logo {
    position: absolute;
    bottom: 90px;
    width: 100%;
}

#sidebar-inner .sidebar-inner-partner-logo-sm {
    display: none;
}

@media (max-width: 991.98px) {
    #sidebar-inner .sidebar-inner-partner-logo {
        max-width: 130px;
        padding-left: 20px;
    }
}

#sidebar-inner .sidebar-inner-partner-logo img {
    max-width: 130px;
}

#sidebar-inner .sidebar-inner-partner-logo-sm img {
    margin-bottom: 30px;
    max-width: 28px;
}

/* master shrank the banner to its icon between 577px and 991px, the thin rail
   the sidebar used to collapse to, and left every other width the wordmark.
   That band is gone — 992px now separates the full column from the hamburger
   drawer, and both have room for the wordmark — so the rule that hid it there
   went with it, rather than being re-pointed at the whole desktop.

   The icon is kept for a short viewport, where the full banner would run into
   the menu above it. master left that corner empty; an icon reads better than
   nothing, and it is what the thin rail showed at those heights anyway. The
   two-class selector is what carries it over the display:none beside it. */
@media (max-height: 710px) {
    #sidebar-inner .sidebar-inner-partner-logo {
        display: none;
    }

    #sidebar-inner .sidebar-inner-partner-logo.sidebar-inner-partner-logo-sm {
        display: block;
    }
}

@media (max-width: 991.98px) {
    #sidebar.open {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 325px;
        z-index: 100;
        transition: left 0.3s;
        box-shadow: -3px 0 7px 4px #ccc;
    }

    #sidebar.open #sidebar-inner {
        width: 100%;
        max-width: 325px;
    }

    #sidebar.open.off-screen {
        left: -100vw;
    }

    /* Same exemption as the desktop rule above: the indicator keeps its own
       flex display so the mark stays centred in its square. */
    #sidebar.open .sidebar-menu-item span:not(.sidebar-menu-group-indicator) {
        display: inline-block;
    }

    #sidebar.open .brand-title {
        display: inline-block;
        margin-left: .5rem;
    }

    #navbar-mw #navbar-brand {
        display: none;

    }

    #sidebar.open #sidebar-close {
        display: block;
    }
}

/* The header runs out of room on a phone once the account switcher pill is in
   it: the menu button ends at 62px, the nav needs 310px plus a 16px right
   margin, so the two collide below ~390px. Drop the "Drop-in" text link first —
   it is a shortcut to a page the menu already reaches, whereas search,
   notifications and the switcher have no other home up here. 420px keeps it on
   the larger phones (428px+). */
@media (max-width: 419px) {
    /* Outweighs the display the .top-nav-bunch > .btn layout rule sets. */
    .top-nav-bunch > .btn.top-nav-dropin {
        display: none;
    }
}

#navbar-mw {
    max-width: 1500px;
    width: 100%;
    margin: auto;
    flex-flow: row nowrap;
    justify-content: flex-start;
    display: flex;
    align-items: center;
}

#navbar-prx {
    max-width: 1500px;
    width: 100%;
    margin: auto;
    flex-flow: row nowrap;
    justify-content: flex-start;
    display: flex;
    align-items: center;
}

#navbar-prx .navbar-brand .brand-name .hide {
    display: none;
}

@media (min-width: 577px) {
    #navbar-prx .navbar-brand .brand-name .hide {
        display: inline;
    }
}

.disable-select {
    user-select: none;
    /* supported by Chrome and Opera */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
}

.page-header-title {
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 600;
}

.box, .alt-box {
    background: white;
    border-radius: .75em;
    overflow-wrap: break-word;
}

.box, .alt-box, .box-spacing {
    padding: 15px 20px;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 25px;
}

.box.completed, .sub-box.completed {
    border-left: 5px solid #34b4e9;
}

.box.height-hack {
    height: calc(100% - 25px);
}

.box-top-controls.box-top-controls-float {
    padding-left: 5px;
    position: inherit;
    top: inherit;
    right: inherit;
    float: right;
    margin-top: -1px;
    z-index: 5;
    padding-right: 0px;
}

.box-top-controls {
    position: absolute;
    right: 10px;
    top: 12px;
    z-index: 5;
    padding-right: 10px;
}

.modal-header .box-top-controls {
    top: 7px;
}

.box-top-controls .open-link {
    margin-right: 30px;
    font-weight: bold;
    color: inherit;
}

.box-top-controls .btn, .box-bottom-controls .btn {
    position: relative;
    right: -10px;
}

.box-top-controls .kebab, .box-bottom-controls .kebab {
    position: relative;
    right: -20px;
}

.page-control-previous {
    padding-right: 4px;
}

.page-control-next {
    padding-left: 4px;
}

.box-page-controls {
    margin-right: -10px;
    text-align: right;
}

.box-top-controls .box-page-controls {
    margin-top: -5px;
    margin-right: 0px;
}

.box-bottom-controls {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.box-title {
    color: #A9AAAE;
    font-size: 16px;
    margin-bottom: 12px;
}

.box-title a:not(.dropdown-item) {
    color: #A9AAAE;
}

.box-title a:not(.dropdown-item):hover {
    color: #bbb;
}

.box-heading {
    font-size: 18px;
    font-weight: 600;
}

.sub-box {
    background-color: var(--bg-surface);
    padding: 10px 15px;
    border-radius: 15px;
    overflow-wrap: break-word;
    transition: border-left 0.1s ease-in-out;
}

.sub-box.background-box {
    background-color: var(--bg-page);
}

.sub-box:empty, .line-box:empty, .box:empty {
    display: none;
}

.sub-box.sub-box-hover:hover {
    border-left: 3px solid #34b4e9;
}

.sub-box-header {
    background-color: var(--navy);
    color: white;
    margin-bottom: 0px !important;
    border-radius: 0.75em 0.75em 0 0;
    padding: 10px 15px;
}

.sub-box-header + .sub-box {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0px !important;
}

.line-box {
    padding: 10px 15px;
    border-radius: 15px;
    border: 1px solid #efefef;
}

.box.colour-box {
    background: url('/static/images/coloursplash2.png');
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

.colour-box .box-title {
    color: white;
    font-weight: bold;
}

.bg-slate {
    background-color: var(--navy) !important;
}

.bg-light {
    background-color: var(--bg-surface) !important;
}

.slab-yellow {
    color: #FFCC00
}

.bg-slab-yellow {
    background-color: #FFCC00 !important
}

.bg-warning {
    background-color: #FFCC00 !important
}

#navbar-brand {
    font-size: 25px;
    text-align: center;
    margin-left: 14px;
    margin-top: -4px;
    position: relative;
    max-width: 200px;
}

/* Only the site header centres the mark and the wordmark on the bar and on
   each other, the way the React TopBar does. The other bars reusing
   #navbar-brand / .brand-title keep their own hand-tuned offsets.

   Desktop only: below 992px the header shows the burger instead, and the
   `display: flex` here would otherwise beat the earlier `#navbar-mw
   #navbar-brand { display: none }` on cascade order — same specificity, later
   rule — putting the yellow mark back on the phone bar next to the burger. */
@media (min-width: 992px) {
    #navbar-mw-nav #navbar-brand {
        display: flex;
        align-items: center;
        margin-top: 0;
    }

    #navbar-mw-nav #navbar-brand .brand-title {
        top: 0;
        margin-left: .75rem;
    }
}

#navbar-brand.dev {
    font-size: 20px;
}

#navbar-brand .brand-title {
    display: none;
    position: relative;
    top: -2px;
}

#navbar-brand .brand-title:hover {
    text-decoration: none;
}

#navbar-brand.dev .brand-name strong:before {
    content: 'dev.';
    color: var(--blue);
    font-weight: lighter;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--blue);
}

.dropdown-item:focus:not(.active), .dropdown-item:hover:not(.active) {
    background-color: #f0efea;
}

/* Selected items keep a blue, just a darker one: the beige hover colour left
   Bootstrap's white .active text on a near-white background. */
.dropdown-item.active:focus, .dropdown-item.active:hover {
    background-color: var(--blue-2);
}

.more-less-button {
    z-index: 3;
}

.collapse + .more-less-button > .btn:before {
    content: 'More';
}

.collapse.show + .more-less-button > .btn:before {
    content: 'Less';
}

.collapse + .more-less-button > .btn[data-more-text]:before {
    content: attr(data-more-text);
}

.collapse.show + .more-less-button > .btn[data-less-text]:before {
    content: attr(data-less-text);
}

.collapsing + .more-less-button > .btn {
    opacity: 0;
}

.collapsing + .more-less-button > .btn:before {
    content: ' ';
}

.collapse + .more-less-button > .btn > .more-less-icon:before {
    content: '\f078';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 600;
    margin-left: 5px;
    font-size: 80%;
}

.collapse.show + .more-less-button > .btn > .more-less-icon:before {
    content: '\f077';
}

.collapse-link[aria-expanded] > .more-less-icon:before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 600;
    margin-left: 5px;
    font-size: 80%;

}

.collapse-link[aria-expanded=false] > .more-less-icon:before {
    content: '\f078';
}

.collapse-link[aria-expanded=true] > .more-less-icon:before {
    content: '\f077';
}

.collapse-link[aria-expanded="false"] > .link-text:after {
    content: attr(data-more-text);
}

.collapse-link[aria-expanded="true"] > .link-text:after {
    content: attr(data-less-text);
}

div.fake-input, div.form-control {
    height: 100%;
    min-height: 38px;
}

input[type="file"].form-control {
    height: unset;
}

input.form-control[readonly]:not(.flatpickr-input) {
    border: 1px solid #eee !important;
    background-color: #fff !important;
}

input[type="hidden"].flatpickr-input + input[readonly] {
    border: inherit !important;
    background-color: var(--bg-surface) !important;
}

.shortcut-buttons-flatpickr-button {
    border-radius: 15px;
    color: var(--navy);
    background-color: white;
    border: 1px solid #ccc;
}

textarea.form-control {
    padding: 7px 10px;
}

input.form-control, select.form-control, textarea.form-control, .input-group-text, div.form-control {
    border: 0;
    border-radius: 15px;
    background-color: var(--bg-surface);
    -webkit-appearance: none;
    text-align-last: left;
    text-align: left;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #F0EFEA;
}

div.dt-container div.dt-length select {
    margin-left: 0.3em !important;
    margin-right: 0.3em !important;
}

.form-control-sm .selectize-input.not-full input {
    font-size: .875rem;
    line-height: 1.5;
}

.form-control-sm .selectize-input.not-full {
    min-height: calc(1.5em + .5rem + 2px) !important;
    height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem !important;
}

.form-control .selectize-input.dropdown-active {
    border-radius: inherit;
}

.input-group-prepend + input + .selectize-control > .selectize-input,
.input-group-prepend + label + input + .selectize-control > .selectize-input {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.selectize-dropdown .optgroup-header {
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
}

.selectize-dropdown-content {
    max-height: 250px;
}

.selectize-control.single.plugin-remove_button .remove-single {
    right: 35px;
}

label + .field-preamble {
    position: relative;
    top: -9px;
    margin-bottom: -1px;
}

.input-group-text {
    color: #bbb;
}

.text-dark {
    color: var(--navy) !important;
}

a.text-dark:hover {
    color: var(--navy) !important;
}

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

.text-success {
    color: var(--green) !important;
}

.form-control:not(.selectize-dropdown) {
    &:focus, &:active {
        outline: 0;
        border: 0;
        background-color: var(--bg-surface);
    }

    &:focus {
        box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
    }

    &:active {
        box-shadow: none;
    }
}

input::placeholder {
    color: var(--placeholder-grey) !important;
}

.form-control::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--placeholder-grey);
}

.form-control::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--placeholder-grey);
}

.form-control:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--placeholder-grey);
}

.form-control:-moz-placeholder {
    /* Firefox 18- */
    color: var(--placeholder-grey);
}

.fade {
    -webkit-transition: opacity .1s linear;
    transition: opacity .1s linear;
}

.modal-content {
    border: 0;
    border-radius: .75em;
    margin-bottom: 100px;
}

.modal-footer {
    border-top: 0;
}

.modal-header .close {
    padding: 1rem 1rem;
}

.modal-content.modal-nobezel {
    border: 0;
    padding-top: 0;
    background-color: rgba(0, 0, 0, 0);
}

@media (min-width: 577px) {
    .modal-sm {
        min-width: 400px;
    }
}

.modal.show {
    -webkit-perspective: 2000px;
    -moz-perspective: 2000px;
    -ms-perspective: 2000px;
    -o-perspective: 2000px;
    perspective: 2000px;
}

.modal.show .modal-dialog.aside {
    -webkit-transform: -340px;
    -moz-transform: -340px;
    -ms-transform: -340px;
    -o-transform: -340px;
    transform: -340px;
    -webkit-transform: scale(0.9) translateZ(-340px);
    -ms-transform: scale(0.9) translateZ(-340px);
    -o-transform: scale(0.9) translateZ(-340px);
    transform: scale(0.9) translateZ(-340px);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.modal.show .modal-dialog.aside.aside-1 {
    -webkit-transform: calc(-340px + 40px);
    -moz-transform: calc(-340px + 40px);
    -ms-transform: calc(-340px + 40px);
    -o-transform: calc(-340px + 40px);
    transform: calc(-340px + 40px);
    -webkit-transform: scale(0.9) translateZ(calc(-340px + 40px));
    -ms-transform: scale(0.9) translateZ(calc(-340px + 40px));
    -o-transform: scale(0.9) translateZ(calc(-340px + 40px));
    transform: scale(0.9) translateZ(calc(-340px + 40px));
}

.modal.show .modal-dialog.aside.aside-2 {
    -webkit-transform: calc(-340px + (40px * 2));
    -moz-transform: calc(-340px + (40px * 2));
    -ms-transform: calc(-340px + (40px * 2));
    -o-transform: calc(-340px + (40px * 2));
    transform: calc(-340px + (40px * 2));
    -webkit-transform: scale(0.9) translateZ(calc(-340px + (40px * 2)));
    -ms-transform: scale(0.9) translateZ(calc(-340px + (40px * 2)));
    -o-transform: scale(0.9) translateZ(calc(-340px + (40px * 2)));
    transform: scale(0.9) translateZ(calc(-340px + (40px * 2)));
}

.modal.show .modal-dialog.aside.aside-3 {
    -webkit-transform: calc(-340px + (40px * 3));
    -moz-transform: calc(-340px + (40px * 3));
    -ms-transform: calc(-340px + (40px * 3));
    -o-transform: calc(-340px + (40px * 3));
    transform: calc(-340px + (40px * 3));
    -webkit-transform: scale(0.9) translateZ(calc(-340px + (40px * 3)));
    -ms-transform: scale(0.9) translateZ(calc(-340px + (40px * 3)));
    -o-transform: scale(0.9) translateZ(calc(-340px + (40px * 3)));
    transform: scale(0.9) translateZ(calc(-340px + (40px * 3)));
}

.modal.show .modal-dialog.aside.aside-4 {
    -webkit-transform: calc(-340px + (40px * 4));
    -moz-transform: calc(-340px + (40px * 4));
    -ms-transform: calc(-340px + (40px * 4));
    -o-transform: calc(-340px + (40px * 4));
    transform: calc(-340px + (40px * 4));
    -webkit-transform: scale(0.9) translateZ(calc(-340px + (40px * 4)));
    -ms-transform: scale(0.9) translateZ(calc(-340px + (40px * 4)));
    -o-transform: scale(0.9) translateZ(calc(-340px + (40px * 4)));
    transform: scale(0.9) translateZ(calc(-340px + (40px * 4)));
}

.modal.show .modal-dialog.aside.aside-5 {
    -webkit-transform: calc(-340px + (40px * 5));
    -moz-transform: calc(-340px + (40px * 5));
    -ms-transform: calc(-340px + (40px * 5));
    -o-transform: calc(-340px + (40px * 5));
    transform: calc(-340px + (40px * 5));
    -webkit-transform: scale(0.9) translateZ(calc(-340px + (40px * 5)));
    -ms-transform: scale(0.9) translateZ(calc(-340px + (40px * 5)));
    -o-transform: scale(0.9) translateZ(calc(-340px + (40px * 5)));
    transform: scale(0.9) translateZ(calc(-340px + (40px * 5)));
}

.modal.show .modal-dialog.aside {
    opacity: 0.4;
}

.modal.show.aside + .modal-backdrop {
    opacity: 0.2 !important;
}

.progress {
    background-color: var(--bg-surface);
}

.progress-bar-gold {
    background-color: #FBCB00;
}

.progress, .progress-bar {
    border-radius: .5rem;
}

.progress-bar {
    z-index: 2;
    background-color: var(--blue);
}

.progress-bar-bottom {
    z-index: 1;
    background-color: var(--bg-surface);
}

.progress-bottom {
    position: relative;
    top: -16px;
    background-color: #fff;
    border: 1px solid var(--bg-surface);
}

.btn {
    border-radius: 15px;
    color: var(--navy);
    background-color: transparent;
}

.btn:not(.disabled):not(:disabled) {
    cursor: pointer;
}

.btn.btn-no-hover:not(.disabled):not(:disabled) {
    cursor: default;
}

.btn-primary, .btn-primary:hover, .btn-primary.focus, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
    color: inherit;
    background-color: white;
    outline: 0;
    box-shadow: none;
    border-color: transparent;

    &:focus, &.focus {
        box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%) !important;
    }
}

.btn-primary {
    &:focus, &:active {
        color: inherit;
        background-color: white;
        outline: 0 !important;
    }

    &:focus {
        box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%) !important;
    }

    &:active {
        box-shadow: none !important;
    }
}

.btn-secondary:focus, .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active {
    color: inherit;
    outline: 0;
    box-shadow: none;
    background-color: #F0EFEA;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:focus, .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:focus {
    box-shadow: none;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #aaa;
    border: 1px solid #eee;
    background-color: white;
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: #aaa;
    border: 1px solid #eee;
    background-color: transparent;
}

.btn.btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0);
    color: inherit;
}

.btn.btn-border-subtle {
    border: 1px solid #DFDFDF;
    color: inherit;
}

.btn.btn-primary, .btn-primary-spacer {
    border: 1px solid #eee;
}

.btn-primary-spacer {
    background: white;
}

.btn-group-toggle .btn.btn-primary.active {
    background-color: var(--navy);
    color: white;
}

.btn-link {
    background-color: transparent;
}

.btn:not(:disabled):hover {
    background-color: #D1D4E0;
}

.btn.btn-link:not(:disabled):hover {
    background-color: inherit;
}

.btn.btn-link-action {
    color: var(--blue);
    background-color: transparent;
    padding: 0 0.25rem;
    vertical-align: unset;

    &:hover {
        cursor: pointer;
        color: #148bbc;
    }
}

.btn-primary:not(:disabled):hover, .btn-secondary:not(:disabled):hover {
    border: 1px solid #D1D4E0;
}

.btn.active {
    background-color: var(--navy);
    color: white;
}

.btn.active:hover {
    color: white;
    background-color: #767DA2;
}

.btn.btn-orange {
    background-color: #C85021;
    color: white;
}

.btn.btn-orange:hover {
    background-color: #A94016;
}

.btn.btn-orange-inverse {
    color: #C85021;
    background-color: white;
    border-color: #C85021;
}

.btn.btn-orange-inverse:hover {
    color: #A94016;
    background-color: var(--bg-page);
    border-color: #A94016;
}

/* The design system's secondary button. React draws it from Button.tsx (variant
   "secondary", size "default"); this is the same button in plain CSS so both
   frontends render it alike. The values are that component's tokens resolved:
   --sl-neutral-0/75/200/800 and --shadow-sl-default/hover from
   react_frontend/src/root.css. */
.btn.btn-slab-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 36px;
    padding: 8px 16px;
    border: 1px solid #dfdfdf;
    border-radius: 10px;
    background-color: #fff;
    color: #3D3D3A;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
}

.btn.btn-slab-secondary:not(:disabled):hover {
    color: #3D3D3A;
    background-color: #f6f6f6;
    text-decoration: none;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.08);
}

/* Bootstrap draws .btn:focus as a box-shadow, which the shadow above replaces, so
   without this the button focuses invisibly. Same ring the React shell puts on
   everything focusable, and the same one the header actions carry. */
.btn.btn-slab-secondary:focus-visible {
    outline: 2px solid var(--blue-2);
    outline-offset: 2px;
}

.btn.btn-action {
    background-color: var(--blue);
    color: white;
}

.btn.btn-action-inverse {
    color: var(--blue);
    border-color: var(--blue);
    background-color: white;
}

.btn.btn-action-inverse:hover {
    background-color: var(--bg-page);
}

.btn.btn-action.btn-radio:not(.active) {
    background: none;
    color: var(--navy);
    border: 1px solid #ccc;
}

.btn.btn-action:hover {
    background-color: #2aa7db;
}

.btn.btn-outline-white {
    color: white;
    background-color: transparent;
    border-color: white;
    text-decoration: none;
}

.btn.btn-outline-white:hover {
    background-color: rgba(255, 255, 255, 0.2);
}


.btn-xs {
    padding: 2px 6px;
    font-size: 13px;
}

.btn-box {
    margin-bottom: 25px;
}

.btn-xl {
    padding: 15px 20px;
    font-size: 1.5rem;
    width: 100%;
}

.btn-short, .btn-selector.btn-short {
    padding: 5px 3px;
}

.badge.badge-light {
    color: #aaa;
}

.badge-dark {
    background-color: var(--navy);
}

.badge-orange {
    background-color: #C85021;
    color: #fff;
}

.badge.badge-primary {
    background-color: var(--blue) !important;
}

.bg-primary {
    background-color: var(--blue) !important;
}

.badge.badge-secondary {
    background-color: #939393
}

.badge.badge-bordered {
    background-color: none;
    border: 1px solid #ddd;
}

.badge.badge-secondary [data-help].text-muted {
    color: white !important;
}

.subtle-border {
    border: 1px solid rgba(0,0,0,.125) !important;
}

#sidebar-menu {
    top: 10px;
    position: relative;
    text-align: left;
    /* Left and right chosen so a row lands on the same box as the React
       sidebar's: 16px in from the edge and 160px wide, given this menu's
       190px column. */
    padding: 15px 14px 15px 16px;
}

/* The 14px above is arithmetic for the 190px column, and the drawer is 325px
   wide, so it left every drawer row 2px wider than the React drawer's and put
   the row's right edge — and with it the +/- mark — 2px out. The drawer pads
   evenly, as MobileMenu does. */
@media (max-width: 991.98px) {
    #sidebar-menu {
        padding-right: 16px;
    }
}

#sidebar #sidebar-close {
    float: right;
    display: none;
    margin-right: 21px;
    margin-top: 12px;
}

@media (max-width: 991.98px) {
    #sidebar-menu {
        top: 50px;
    }
}

#sidebar #sidebar-close:hover {
    color: #959ab7;
    cursor: pointer;
}

.sidebar-menu-item {
    text-align: left;
    display: block;
    font-weight: 600;
    margin-bottom: 12px;
    border-radius: 0 10px 10px 0;
    /* The only border a row has is the left one — the active row's bar. These
       rows are also Bootstrap .btn, which adds a transparent 1px on all four
       sides and made them 2px taller than the React sidebar's rows. */
    border: 0;
    border-left: 2px solid transparent;
}

/* Hover lights the same 2px gutter the active row's bar sits in, a step quieter
   than that bar so the two states stay apart at a glance.

   `:not(:disabled)` is here for weight, not for meaning: these rows are also
   Bootstrap .btn, and `.btn:not(:disabled):hover` above outranks a plain
   `.sidebar-menu-item:hover`, so without it the row hovered to that rule's
   generic #D1D4E0 rather than the beige the React sidebar uses. */
.sidebar-menu-item:not(:disabled):hover {
    background-color: #f0efea;
    border-left-color: var(--muted);
}

.sidebar-menu-group {
    display: flex;
    flex-direction: column;
}

/* The labelled section row is one disclosure control: its label and its +/-
   indicator sit at either end of the same button, so the whole row highlights
   and the whole row toggles. This mirrors SideMenuNavGroup in the React
   sidebar.

   A flex row, so the label and the +/- mark are pushed apart. */
.sidebar-menu-item.sidebar-menu-group-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: pointer;
}

/* `.sidebar-menu-item span` hides every span in a row — a rule written for the
   label text, back when that was the only span a row had. This wrapper holds the
   section icon as well, so it has to keep its box or the row loses the icon too.
   The text span nested inside it is still hidden by that rule. */
.sidebar-menu-item .sidebar-menu-group-label {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

/* Fixed square box with a fixed-width glyph, so the row does not reflow as the
   mark swaps between plus and minus. */
.sidebar-menu-group-indicator {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #474c68;
}

/* Shown exactly where the row's label is shown — the full sidebar from 992px,
   and the opened mobile sidebar — so the mark never appears without the text it
   belongs to.

   Both selectors name the element twice, as a span and as the indicator, so
   they outweigh `.sidebar-menu-item span`, which sets `display: none` further
   down for the collapsed rail. Being the heavier rule is what lets this one
   both reveal the box and keep it a flex box — with `inline-block` winning
   instead, the mark stopped being centred in its square and sat against the
   left of it. */
@media (min-width: 992px) {
    .sidebar-menu-item span.sidebar-menu-group-indicator {
        display: inline-flex;
    }

    .sidebar-menu-item.sidebar-menu-group-row {
        justify-content: space-between;
    }
}

@media (max-width: 991.98px) {
    #sidebar.open .sidebar-menu-item span.sidebar-menu-group-indicator {
        display: inline-flex;
    }

    #sidebar.open .sidebar-menu-item.sidebar-menu-group-row {
        justify-content: space-between;
    }
}

.sidebar-submenu {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.2s ease-in-out, visibility 0.2s;
}

.sidebar-submenu-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding-left: 30px;
    position: relative;
}

/* A rule down the children's left edge, marking them as belonging to this
   group. It starts on the same left edge as each child's own left border, so an
   active child's 2px orange bar covers this 1px rule and reads as a lit, heavier
   segment of it rather than a second line beside it. A border on this container
   would instead push every child aside and the two would no longer share an
   edge. `bottom` clears the last row's 12px margin so the rule stops with the
   last child.

   The indent and the rule's offset are always the same number, and that number
   is the middle of the parent row's icon, so the rule hangs from the glyph the
   group is named by: the row's 2px gutter, plus its left padding, plus half the
   icon's fixed 1.25em box. Below 992px that is 2 + 16 + 12.5 against a 20px
   glyph; from 992px the row sets in and the glyph shrinks, giving
   2 + 12 + 8.25. SideMenuNavGroup.tsx does the same two sums. */
.sidebar-submenu-inner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 12px;
    left: 30px;
    width: 1px;
    background-color: #dfdfdf;
}

@media (min-width: 992px) {
    .sidebar-submenu-inner {
        padding-left: 22px;
    }

    .sidebar-submenu-inner::before {
        left: 22px;
    }
}

/* Rows paint over the rule: an absolutely positioned pseudo-element otherwise
   covers the in-flow rows and hides the active bar. A row's fill therefore runs
   under its own 2px gutter and covers the rule for the height of that row, which
   is what keeps a hover pill flush with the rule instead of leaving a bare strip
   beside it — the gutter is wider than the 1px rule, so clipping the fill to the
   padding box would expose the leftover pixel as a gap. */
.sidebar-submenu .sidebar-menu-item {
    position: relative;
}

/* No font-size of its own: a child row takes .sidebar-menu-item's 1.1rem like
   every other row, so a submenu reads as part of the same list rather than a
   footnote to it. Only the nowrap is particular to children — they sit inside
   the group's indent, so a wrapped label would step out of the column. */
@media (min-width: 992px) {
    .sidebar-submenu .sidebar-menu-item {
        white-space: nowrap;
    }
}

/* Steplab's step mark standing in for a Font Awesome glyph on the PD overview
   row (_icon_step_mark.html). Font Awesome sizes its icons from the element's
   own font-size, so the mark takes .fa-xs's 0.75em and then fills the 1.25em
   box .fa-fw gives the glyphs beside it. Matching that box is what keeps every
   row's label starting in the same place. The square is centred in it by the
   viewBox's default fit.

   Sitting the box on the baseline puts the mark where the glyphs beside it
   already are: measured at this size, their ink runs from 12.07px above the
   baseline to 0.07px below it, and a 1em box resting on the baseline covers
   the same 12px. `baseline` is spelled out because Bootstrap's reboot centres bare
   <svg> on the text instead, which drops the mark by half its height. It is
   also what the React sidebar's own <svg> icons compute to, so the two stacks
   put the mark in the same place. */
.sidebar-step-mark {
    display: inline-block;
    font-size: 0.75em;
    width: 1.25em;
    height: 1em;
    vertical-align: baseline;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-submenu {
        transition: none;
    }
}

.sidebar-menu-group-restoring .sidebar-submenu {
    transition: none;
}

.sidebar-menu-group.expanded .sidebar-submenu {
    grid-template-rows: 1fr;
    visibility: visible;
}

.sidebar-menu-item span {
    display: none;
}

.sidebar-menu-item .icon {
    font-size: 20px;
    top: 2px;
    position: relative;
    margin-right: 3px;
}

/* In-page tabs for the Lead clusters on the new nav (lead_tab_bar.html) */
.lead-tab-bar-wrap {
    display: flex;
    flex-direction: column;
}

/* The rule under the tabs sits on the row, not on the wrap: the actions below it
   are page content, and a border on the wrap would draw the line beneath them.
   .lead-tab's -1px bottom margin still pulls the active underline over it. */
.lead-tab-bar {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    border-bottom: 1px solid #dfdfdf;
}

.lead-tab-list {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.lead-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: -1px;
    border-radius: 10px 10px 0 0;
    border-bottom: 2px solid transparent;
    color: #3D3D3A;
    font-size: 14px;
    text-decoration: none;
}

.lead-tab:hover {
    background-color: #f0efea;
    color: #3D3D3A;
    text-decoration: none;
}

.lead-tab.active {
    background-color: #f0efea;
    border-bottom-color: #c85021;
    font-weight: bold;
}

.lead-tab-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
}

/* The chip that stands in for the whole row on mobile. It wears .lead-tab, so
   it only has to shed the button chrome the anchors never had. */
.lead-tab-summary {
    display: none;
    border-width: 0 0 2px;
    border-style: solid;
    background: none;
    font: inherit;
    text-align: left;
}

.lead-tab-summary-caret {
    font-size: 12px;
}

/* Bootstrap's dropdown JS leaves .show on the menu, and Popper writes position
   and transform inline, so a menu opened on a phone and then widened to desktop
   would stay a floating panel without these. */
@media (min-width: 992px) {
    .lead-tab-bar .lead-tab-list.dropdown-menu {
        position: static !important;
        display: flex !important;
        transform: none !important;
        /* Shedding the dropdown's position is not enough to shed its stacking.
           This is a flex item of .lead-tab-bar, and flex items honour z-index
           even while position is static, so Bootstrap's .dropdown-menu z-index of
           1000 still lifted the row into its own stacking context. That beat
           #top-header (z-index 25 — the navbar's 1029 is local to it), so the
           tabs painted over the site header once the page scrolled far enough. */
        z-index: auto;
        float: none;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}

/* Mobile: the row collapses to the chip, and the tabs become its menu
   (lead_tab_bar.html; Figma "Impact report" -> Existing lead changes). */
@media (max-width: 991.98px) {
    .lead-tab-bar-collapsible .lead-tab-summary {
        display: inline-flex;
    }

    .lead-tab-bar-collapsible .lead-tab-list.dropdown-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-width: 220px;
        padding: 4px;
        border: 1px solid #dfdfdf;
        border-radius: 10px;
    }

    .lead-tab-bar-collapsible .lead-tab-list.dropdown-menu.show {
        display: flex;
    }

    .lead-tab-bar-collapsible .lead-tab-list .lead-tab {
        margin-bottom: 0;
        border-bottom: 0;
        border-radius: 6px;
    }
}

.box-selector {
    width: 100%;
    margin-bottom: 25px;
}

.btn-selector, .btn-selector.btn-no-hover:hover {
    padding: 10px 3px;
    background-color: white;
}

.btn-selector.active.btn-no-hover:hover {
    background-color: var(--navy);
    color: white;    
}

.alert.alert-primary {
    color: white;
    background-color: #34B5E9;
    border-color: #34B5E9;
}

.alert.alert-danger {
    color: white;
    background-color: #C85021;
    border-color: #C85021;
}

.alert.alert-warning {
    color: white;
    background-color: #ffb80e;
    border-color: #ffb80e;
}

.alert.alert-secondary {
    background-color: #F0EFEA;
    border-color: #E4E4E0;
}

.alert.alert-secondary-light {
    background-color: var(--bg-page);
    border-color: var(--bg-page);
}

.alert.alert-left-orange-border {
    border-left: 5px solid #C85021;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.alert.alert-primary a:not(.btn), .alert.alert-primary a:not(.btn) {
    text-decoration: underline;
}

.alert .close {
    text-shadow: none;
}

.box .btn-selector:not(.active) {
    border: 1px solid #EEE;
}

#ntf_launcher:not([data-ntf-count="0"]) .fa-bell {
    color: #C85021;
}

/* Both overlays hang off the bell button itself rather than off the fixed
   navbar, so they follow the glyph instead of needing absolute coordinates. */
#ntf_launcher {
    position: relative;
}

/* Sat on the bell's top-right corner, overlapping the glyph by 10px, which is
   where master drew it. master got there by leaving the count at its static
   position after the glyph and nudging it back with margins; that only works
   while the button is inline and its padding never changes, which is why it
   was re-anchored to the button. Re-anchoring moved the button box out from
   around the glyph, though, and nothing compensated — so the count ended up
   clear of the bell and reading as part of the profile switcher instead.

   -18px is the button's own 8px right padding plus master's 10px overlap.
   Sizes are master's too: 11px on a 13px line with 1px/5px padding gives the
   same 15px pill. Measured against master's rendering rather than derived. */
#ntf_launcher[data-ntf-count]:not([data-ntf-count="0"]):after {
    content: attr(data-ntf-count);
    color: white;
    font-size: 11px;
    line-height: 13px;
    position: absolute;
    top: -5px;
    left: 100%;
    transform: translateX(-18px);
    background-color: #474c68;
    border-radius: 20px;
    padding: 1px 5px;
    font-weight: bold;
    text-align: center;
}

/* Account switcher: the header photo sits in a pill with the pinned account's
   organisation icon, and the accounts list lives in the profile dropdown */
#header-photo-dropdown.switcher-pill .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 4px;
    width: auto;
    height: 40px;
    padding: 0;
    background-color: transparent;
}

#header-photo-dropdown.switcher-pill .switcher-pill-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 0 0 8px;
    background-color: #f0efea;
    border-radius: 40px;
}

#header-photo-dropdown.switcher-pill .dropdown-toggle:after {
    display: none;
}

#header-photo-dropdown.switcher-pill .dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}

#header-photo-dropdown.switcher-pill .dropdown-toggle:focus #header-photo {
    box-shadow: none;
}

#header-photo-dropdown.switcher-pill #header-photo {
    position: static;
    margin: 0;
}

#header-photo-dropdown.switcher-pill .switcher-caret {
    color: #3d3d3a;
    font-size: 14px;
    width: 17.5px;
    text-align: center;
}

#header-photo-dropdown .dropdown-header .header-region-flag {
    position: static;
    margin: 0 6px 0 0;
    font-size: 1.1rem;
    line-height: 1;
    vertical-align: middle;
}

/* Organisation icon (Realm.icon_json): an uploaded image, or the initials/text
   circle coloured by the stored preset. Shared by the organisation-icon
   settings page and anywhere else the icon is rendered. */
.switcher-icon-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.switcher-realm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: white;
    background-size: cover;
    background-position: center;
}

.switcher-realm-initials {
    /* The blue preset is the default style — used when icon_json carries no
       preset, or an unrecognised one (the preset classes below override it) */
    background-color: var(--blue-2);
    color: white;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

/* Colour presets for the initials/text circle (icon_json["preset"]). Names
   must match REALM_ICON_COLOUR_PRESETS in app/admin/worker.py. Only colour is
   set here so the classes work on both the switcher (24px) and the larger
   settings-page preview. */
.switcher-realm-icon-blue {
    background-color: var(--blue-2);
    color: white;
}

.switcher-realm-icon-green {
    background-color: var(--green);
    color: white;
}

.switcher-realm-icon-navy {
    background-color: var(--navy);
    color: white;
}

.switcher-realm-icon-orange {
    background-color: var(--orange-1);
    color: white;
}

.switcher-realm-icon-red {
    background-color: var(--red);
    color: white;
}

.switcher-realm-icon-yellow {
    background-color: var(--yellow);
    color: var(--navy);
}

.switcher-shared-badge {
    /* Shared (cross-account) mode: a small badge overlaid on the current
       account's icon. The account stays pinned; the badge signals the page
       applies to every account. */
    position: absolute;
    bottom: -3px;
    right: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--blue-2);
    color: white;
    border: 1.5px solid white;
    font-size: 7px;
    line-height: 1;
}

.dropdown-item:focus .switcher-shared-badge,
.dropdown-item:hover .switcher-shared-badge {
    border-color: #f0efea;
}

.switcher-shared-note {
    padding: 0.25rem 1.5rem 0.5rem;
    font-size: 12px;
    color: var(--blue-2);
}

/* While the account-switcher tour is open (start_account_switcher_tour), keep the
   highlighted profiles clickable so a click switches account instead of being
   swallowed by intro.js's overlay. The dropdown lives inside the fixed #top-header,
   which establishes the header's stacking context; lifting that header above intro's
   overlay (999999) — but below its tooltip (100000000) — carries the dropdown with
   it, and letting the highlight box pass clicks through reaches the account links
   underneath. Scoped to the tour so normal pages are unaffected. */
body.switcher-tour-active #top-header {
    z-index: 10000000;
}

body.switcher-tour-active .introjs-helperLayer {
    pointer-events: none;
}

.switcher-ntf-badge {
    position: absolute;
    top: -6px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: #474C69;
    border: 1px solid white;
    color: white;
    font-size: 11px;
    font-weight: bold;
    line-height: 14px;
    text-align: center;
}

.switcher-ntf-badge::after {
    content: attr(data-count);
}

.switcher-ntf-badge[data-count="0"] {
    display: none;
}

.dropdown-item:focus .switcher-ntf-badge ,
.dropdown-item:hover .switcher-ntf-badge {
    border-color: #f0efea;
}

#header-photo-dropdown.switcher-pill {
    margin-left: 0;
}

#header-photo-dropdown.switcher-pill .dropdown-menu {
    min-width: 253px;
}

.switcher-menu .switcher-account {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0 12px;
    padding: 8px 12px;
    border-radius: 10px;
    position: relative;
}

.switcher-menu .switcher-account.active,
.switcher-menu .switcher-account:active {
    background-color: #f0efea;
    color: inherit;
}

.switcher-menu div.switcher-account {
    cursor: default;
}

.switcher-menu .switcher-account-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 200px;
    line-height: 20px;
}

.switcher-menu .switcher-account-org,
.switcher-menu .switcher-account-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switcher-menu .switcher-account-org {
    color: #222529;
}

.switcher-menu .switcher-account-email {
    font-size: 12px;
}

.switcher-menu .switcher-account-check {
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    color: #C85021;
    font-size: 16px;
}

.other-accounts-toggle {
    /* Inherit the callout's font-size instead of Bootstrap's .btn default
       (1rem), so this inline toggle matches the surrounding notice text. */
    font-size: inherit;
    vertical-align: baseline;
}

/* Standalone switcher dropdown (outside the header pill) */
.other-accounts-menu {
    min-width: 260px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.top-link {
    transition: all .25s ease-in-out;
    position: fixed;
    bottom: 0;
    right: 0;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin: 0 2em 2em 0;
    border-radius: 50%;
    padding: .15em;
    width: 50px;
    height: 50px;
    background-color: white;
    z-index: 10;
    color: #ccc;
}

.top-link:hover {
    text-decoration: none;
    color: #aaa;
}

.top-link.show {
    visibility: visible;
    opacity: 1;
}

.top-link.hide {
    visibility: hidden;
    opacity: 0;
}

.text-orange, .text-orange .sl-title {
    color: #C85021 !important;
}

.text-primary {
    color: var(--blue) !important;
}

.text-navy, .text-slate {
    color: var(--navy) !important;
}

.multi-line {
    white-space: pre-wrap;
    word-break: break-word;
}

/*################*/
@media (max-width: 1200px) {
    .modal-xl {
        max-width: calc(100% - 30px);
    }
}

.modal_x {
    position: absolute;
    background: none;
    color: grey;
    font-weight: bold;
    border: 0;
    padding: 0px !important;
    height: 30px;
    width: 30px;
    max-width: 30px;
    border-radius: 15px;
    right: 15px;
    top: 12px;
    line-height: 26px;
    text-align: center;
    z-index: 15;
}

.modal-noheader .modal_x {
    right: 8px;
    top: 8px;
}

.modal-noheader.modal-nobezel .modal_x {
    right: 22px;
    top: 22px;
}

.modal_x {
    &:focus, &:active {
        outline: 0;
    }

    &:focus {
        box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
    }

    &:active {
        box-shadow: none;
    }
}

.previewMediaModal .modal-body {
    padding: 0;
}

.previewMediaModal .modal_x {
    color: white;
    background: #9c9c9c;
    border-radius: 100%;
}

.modal-sl-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
    border-radius: .3rem;
    display: block;
    text-align: center;
}

.modal-sl-overlay .fa-spin {
    top: 20px;
    position: relative;
    font-size: 40px;
    color: #ddd;
    margin: auto;
}

.selectize-input, .selectize-input.input-active, .selectize-input.focus {
    display: block;
    border: 0;
    background-color: var(--bg-surface) !important;
    width: 100%;
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
}

.selectize-input {
    border-radius: 15px;
}

.selectize-control {
    border-radius: 15px !important;
}

.input-group-prepend + select + .selectize-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    
}

.selectize-input input {
    color: #495057;
}

.selectize-input.focus {
    box-shadow: none;
    outline: 0;
    border: none;
    background-color: var(--bg-surface);
}

.selectize-full-width .selectize-input.items .item,
.selectize-input.items.selectize-full-width .item {
    width: calc(100% - 20px)
}

.form-control.selectize-control {
    height: auto;
}

.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid, select.is-invalid + .selectize-control {
    background-color: #fdefea;
}

.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label {
    color: #A43537;
}

.invalid-feedback {
    color: #A43537;
}

.is-invalid .selectize-input {
    border: 1px solid #C85021;
}

.form-check.form-check-sm {
    font-size: 80%;
    font-weight: 400;    
}

.form-check.form-check-sm input[type="checkbox"] {
    width: 10px;
    height: 10px;
    margin-left: -1rem;
}    

.multi-checkbox-list .multi-checkbox-list-item {
    margin-bottom: 10px;
}

.multi-checkbox-list + .invalid-feedback.displaying-errors:not(:empty) {
    display: block;
}


.input-container.is-invalid .invalid-feedback {
    display: block;
}

.input-group:has(.is-invalid) + .invalid-feedback {
    display: block;
}

.input-group .selectize-input {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.input-group select:first-child + .selectize-control .selectize-input {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23EB642D' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23EB642D' stroke='none'/%3e%3c/svg%3e");
}

.selectize-control.multi .selectize-input > div {
    cursor: pointer;
    margin: 1px 3px 3px 0;
    padding: 1px 5px;
    background: #ddd;
    color: #343a40;
    border: 0 solid #dee2e6;
}

.selectize-control.multi .selectize-input > div.active {
    background: #666;
}

.selectize-input .item .info, .selectize-input .item .path {
    font-size: 85%;
    color: #999;
}

.selectize-input .item .info:not(:empty):before {
    content: "\002022 ";
    font-size: 85%;
    color: #999;
    margin-right: 2px;
    margin-left: 3px;
}

.form-control:disabled {
    color: #888;
}

.cursor-hover {
    cursor: pointer;
}

.text-muted {
    color: var(--muted) !important;
}

.text-muted-darker {
    color: #8d9397 !important;
}

.text-muted-lighter {
    color: #DFDFDF !important;
}

/* Muted text that keeps WCAG AA contrast (4.5:1) on white backgrounds */
.text-muted-contrast {
    color: #6D7085;
}

a.text-muted-contrast:hover,
a.text-muted-contrast:focus {
    color: var(--navy);
}

.text-faded {
    opacity: 0.7 !important;
}

.text-muted-link {
    cursor: pointer;
    color: var(--muted) !important;
}

.text-muted-link:hover {
    color: #848484 !important;
}

.opacity-5 {
    opacity: 0.5;
}

.table-faded {
    background-color: #eee;
}

.rosettes-list:after {
    content: "";
    display: inline-block;
    width: 100%;
}

.flex-chart {
    height: 85px;
    display: flex;
    list-style: none;
    margin: 0 0 30px 0;
    padding: 24px 0 0 0;
    font-size: 16px;
    line-height: 1;
    justify-content: space-around;
    align-items: flex-end;
}

.flex-chart > li {
    display: inline-block;
    background-color: #FBCB00;
    height: 100%;
    flex-grow: 1;
    margin: 0 5px;
    min-width: 18px;
    display: flex;
    justify-content: center;
    position: relative;
    transition: height 0.2s ease;
    box-sizing: border-box;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom: none;
    cursor: pointer;
}

.flex-chart > li:hover {
    background-color: #ffe67d;
}

.flex-chart > li:before,
.flex-chart > li:after {
    position: absolute;
    color: #aaa;
    font-size: 12px;
    white-space: pre;
    text-align: center;
}

.flex-chart > li[data-yataaa="true"]:before {
    color: #FBCB00;
    font-weight: 600;
}

.flex-chart > li:not([data-value=""]):not([data-value="none"]):before {
    content: attr(data-value) '%';
    bottom: 100%;
    margin-bottom: 6px;
}

.flex-chart > li:after {
    content: attr(data-label);
    top: 100%;
    margin-top: 6px;
}

.flex-chart > li[data-value='0'] {
    height: 1px !important;
}

.flex-chart > li[data-value='none'] {
    height: 1px !important;
    cursor: default;
}

.flex-chart > li[data-key=""][data-pc]:not([data-pc=""]):before {
    content: '-';
    white-space: nowrap;
}

.rosettes-list:after {
    content: "";
    display: inline-block;
    width: 100%;
}

/* Font Awesome 5 shipped .sr-only and we relied on it in ~200 places; FA7
   dropped it (renamed to .fa-sr-only). Bootstrap 4 also provides it, but not
   every page loads Bootstrap, and Bootstrap 5 renames it to .visually-hidden -
   so own the definition here rather than depending on either library. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.nudge-d-1 {
    position: relative;
    top: 1px;
}

.nudge-d-2 {
    position: relative;
    top: 2px;
}

.nudge-d-3 {
    position: relative;
    top: 3px;
}

.nudge-u-1 {
    position: relative;
    top: -1px;
}

.nudge-u-2 {
    position: relative;
    top: -2px;
}

.nudge-u-3 {
    position: relative;
    top: -3px;
}

.nudge-l-1 {
    position: relative;
    left: -1px;
}

.nudge-l-2 {
    position: relative;
    left: -2px;
}

.nudge-l-3 {
    position: relative;
    left: -3px;
}

.nudge-l-4 {
    position: relative;
    left: -4px;
}

.nudge-l-5 {
    position: relative;
    left: -5px;
}

.nudge-r-1 {
    position: relative;
    left: 1px;
}

.nudge-r-2 {
    position: relative;
    left: 2px;
}

.nudge-r-3 {
    position: relative;
    left: 3px;
}

@media (min-width: 577px) {
    .affix {
        position: sticky;
        top: 30px;
    }
}

@media (min-width: 768px) {
    .affix-md {
        position: sticky;
        top: 30px;
    }
}

@media (min-width: 992px) {
    .affix-lg {
        position: sticky;
        top: 30px;
    }
}

@media (min-width: 1200px) {
    .affix-xl {
        position: sticky;
        top: 30px;
    }
}

/* password validator stuff */

.pwform-fake-button-container[data-pw-requirements-met="false"] .pwform_match_fake_button,
.pwform-fake-button-container[data-pw-requirements-met="true"] .pwform_pwreq_fake_button,
.pwform-fake-button-container[data-pw-requirements-met="true"][data-pws-match="true"] .pwform_match_fake_button,
.pwform-fake-button-container[data-pw-requirements-met="true"][data-pws-match="true"] .pwform_pwreq_fake_button {
    display: none;
}

/* Use opacity/max-height instead of display:none so password managers (e.g. 1Password) can still autofill the confirm field */
.pw2-form-group {
    max-height: 300px;
    transition: max-height 0.25s ease, opacity 0.25s ease, margin-bottom 0.25s ease;
}
.pw2-form-group.pw2-hidden {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0 !important;
    pointer-events: none;
}

.req-valid {
    color: var(--navy);
}

.req-valid::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 700;
    content: "\f058";
    margin-right: 5px;
    text-decoration: none;
    color: var(--green);
}

.req-invalid::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    content: "\f056";
    margin-right: 5px;
    text-decoration: none;
    color: #8d9397;
}

.req-info::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 700;
    content: "\f05a";
    margin-right: 5px;
    text-decoration: none;
    color: #8d9397
}

.table:not(.noslabstyle) tr:first-of-type th {
    color: #A9AAAE;
    font-size: 16px;
    font-weight: normal;
    border-top: 0;
    padding-top: 0;
}

.table:not(.noslabstyle) tr:first-of-type th:first-child {
    padding-left: 0;
}

.table:not(.noslabstyle) tr:not(:first-of-type) th {
    padding: 3px 8px;
}

.misc-errors {
    color: #dc3545;
}

.misc-errors:not(:empty):before {
    font-family: "Font Awesome 5 Pro";
    content: "\f06a";
    font-weight: 900;
    font-size: 75%;
    margin-right: 3px;
}

light {
    font-weight: lighter;
}

.files-browser[allowed_mc] .fbo {
    opacity: 0.3;
}

.files-browser[allowed_mc*="a"] .fbo[data-mc="a"],
.files-browser[allowed_mc*="p"] .fbo[data-mc="p"],
.files-browser[allowed_mc*="v"] .fbo[data-mc="v"],
.files-browser[allowed_mc*="m"] .fbo[data-mc="m"],
.files-browser[allowed_mc*="q"] .fbo[data-mc="q"],
.files-browser[allowed_mc*="t"] .fbo[data-mc="t"],
.files-browser[allowed_mc*="r"] .fbo[data-mc="r"] {
    opacity: 1;
}

.files-browser[allowed_mc] .fbo .fbo-ac div.btn-group {
    display: none;
}

.files-browser[allowed_mc*="a"] .fbo[data-mc="a"] .fbo-ac div.btn-group,
.files-browser[allowed_mc*="p"] .fbo[data-mc="p"] .fbo-ac div.btn-group,
.files-browser[allowed_mc*="v"] .fbo[data-mc="v"] .fbo-ac div.btn-group,
.files-browser[allowed_mc*="m"] .fbo[data-mc="m"] .fbo-ac div.btn-group,
.files-browser[allowed_mc*="q"] .fbo[data-mc="q"] .fbo-ac div.btn-group,
.files-browser[allowed_mc*="t"] .fbo[data-mc="t"] .fbo-ac div.btn-group,
.files-browser[allowed_mc*="r"] .fbo[data-mc="r"] .fbo-ac div.btn-group {
    display: inline-flex
}

.files-browser[allowed_mc] [data-cr="content"] {
    display: none;
}

.files-browser[allowed_mc*="t"] [data-cr="content"][data-obj-mc="p"],
.files-browser[allowed_mc*="v"] [data-cr="content"][data-obj-mc="v"],
.files-browser[allowed_mc*="m"] [data-cr="content"][data-obj-mc="m"],
.files-browser[allowed_mc*="q"] [data-cr="content"][data-obj-mc="q"],
.files-browser[allowed_mc*="t"] [data-cr="content"][data-obj-mc="t"],
.files-browser[allowed_mc*="r"] [data-cr="content"][data-obj-mc="r"] {
    display: inline-flex
}

.fb-content {
    display: block;
    overflow-y: auto;
    height: 300px;
    width: 100%;
    position: relative;
}

.files-browser.fb-is-loading {
    position: relative;
}

.fb-content.fb-loader-loading {
    filter: blur(1.5px);
    pointer-events: none;
    overflow-y: hidden;
    animation: fb-loading-content-pulse 0.6s ease-in-out infinite alternate;
}

.files-browser.fb-is-loading .fbo,
.files-browser.fb-is-loading .fbf {
    animation: fb-loading-row-pulse 0.6s ease-in-out infinite alternate;
}

.fb-loading-status {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1060;
    width: max-content;
    max-width: calc(100vw - 2.5rem);
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 6px 18px rgba(71, 76, 105, 0.18);
    color: var(--navy);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    pointer-events: none;
}

.fb-loading-status .fa-spinner {
    color: var(--blue-2);
    margin-right: 0.35rem;
}

@keyframes fb-loading-content-pulse {
    from {
        opacity: 0.64;
    }

    to {
        opacity: 0.86;
    }
}

@keyframes fb-loading-row-pulse {
    from {
        opacity: 0.62;
    }

    to {
        opacity: 0.9;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fb-content.fb-loader-loading,
    .files-browser.fb-is-loading .fbo,
    .files-browser.fb-is-loading .fbf {
        animation: none;
    }

    .fb-content.fb-loader-loading {
        opacity: 0.8;
    }
}

.fbf-na, .fbo-na, .fbo-na-outer {
    width: 100%;
}

.fbo-mo, .fbf-mo {
    min-width: 120px;
}

.table-sm .fbo-mo, .table-sm .fbf-mo {
    padding-top: 10px;
}

.fb-hr th {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 0px;
    padding: 0 !important;
    padding-top: 7px;
    background-color: #474c68 !important;
}

.fb-hr {
    padding: 0;
}

.fb-date-th {
    padding: 5px !important;
    display: inline-flex;
    width: calc(100% - 50px);
    justify-content: right;
}

.fb-ht {
    padding: 5px !important;
}

.fb-th {
    padding-top: 2px;
    display: flex !important;
    align-items: center;
    justify-content: right;
    align-content: center;
}

.fb-th .btn {
    margin: 5px;
}

.fb-ht-th .fb-search-bar-padder {
    padding: 5px;
}

.fbh {
    background-color: #eee;
}

.fbh-f:not(:last-child):after {
    content: ' / '
}

.fbh-f:first-child:before {
    content: '\f07b';
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    font-size: .75em;
    margin-right: 10px;
}

.fbh-f.global:first-child:before {
    content: '\e900';
    font-family: "slab-icomoon";
    font-weight: 600;
    font-size: .75em;
    margin-right: 10px;
}

.fbh-f.brand:first-child:before {
    content: '\f890';
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    font-size: .75em;
    margin-right: 10px;
}

.fb-f-path {
    color: #9A9EB2 !important;
    font-size: 80%;
    font-weight: 400;
}

.fb-f-path:before {
    color: #9A9EB2 !important;
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    font-size: .75em;
    margin-right: 5px;
    content: '\f07b';
}

.fbh-s:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    font-size: .75em;
    margin-right: 5px;
    content: '\f002';
}

.fbh-s:hover {
    cursor: pointer;
    font-weight: bolder;
}

.fb-dragover {
    font-size: 20px;
    font-weight: bold;
    color: var(--blue) !important;
}

.fbf .fn:hover {
    font-weight: bold;
}

.fbo .fn:hover, .fbf .fn:hover {
    cursor: pointer;
    color: #9A9EB2;
}

.fbh-f[data-fid]:hover {
    font-weight: bold;
    cursor: pointer;
}

.fbo .fbo-ico:before, .efbo .fbo-ico:before, .fbf .fbf-ico:before, .fbf .fbf-cs-ico:before {
    color: #616161;
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    font-size: .75em;
    margin-right: 5px;
}

.fbf-cs-ico:before {
    content: '\f1ad';
}

[data-fid="_global_"].fbf .fbf-cs-ico:before {
    font-family: 'slab-icomoon';
    content: "\e900";
    font-weight: 600;
}

.fbf-ico, .fbo-ico, .fbf-cs-ico {
    min-width: 25px;
    width: 25px;
    padding-right: 0px !important;
    text-align: center;
}

.fbo .fn:before {
    left: 1.25rem;
    position: absolute;
    margin-top: 5px;
    width: 1.25rem;
}

.fbo.fb-loading, .fbf.fb-loading {
    opacity: 0.7 !important;
    pointer-events: none;
}

.fbo[data-mc="a"] .fbo-ico:before, .efbo[data-mc="a"] .fbo-ico:before {
    content: "\f0e8";
}

.fbo[data-mc="m"] .fbo-ico:before, .efbo[data-mc="m"] .fbo-ico:before {
    content: "\f15c";
}

.fbo[data-mc="q"] .fbo-ico:before, .efbo[data-mc="q"] .fbo-ico:before {
    content: "\f60b";
}

.fbo[data-mc="z"] .fbo-ico:before, .efbo[data-mc="z"] .fbo-ico:before {
    content: "\f0ae";
}

.fbo[data-mc="r"] .fbo-ico:before, .efbo[data-mc="r"] .fbo-ico:before {
    content: "\f5dc";
}

.fbo[data-mc="f"] .fbo-ico:before, .efbo[data-mc="f"] .fbo-ico:before {
    content: "\f5dc";
}

.fbo[data-mc="v"] .fbo-ico:before, .efbo[data-mc="v"] .fbo-ico:before {
    content: "\f03d";
}

.fbo[data-mc="t"] .fbo-ico:before, .efbo[data-mc="t"] .fbo-ico:before {
    content: "\f0ae";
    font-weight: 400;
}

.fbo[data-mc="p"] .fbo-ico:before, .efbo[data-mc="p"] .fbo-ico:before,
.fbo[data-mc="l"] .fbo-ico:before, .efbo[data-mc="l"] .fbo-ico:before {
    content: "\f164";
    font-weight: 400;
}

.fbf .fbf-ico:before {
    content: "\f07b";
}

.fbf[data-gf="rt"] .fbf-ico:before {
    content: '\f1ad';
}

.fbf[data-gf="up"] .fbf-ico:before {
    content: '\f3bf';
}

.fbf[data-gf="brand"] .fbf-ico:before {
    content: '\f890';
}

.fbo[data-mc="a"] .fn::after, .efbo[data-mc="a"] .fn::after {
    content: ".pf";
}

.fbo[data-mc="m"] .fn::after, .efbo[data-mc="m"] .fn::after {
    content: ".md";
}

.fbo[data-mc="q"] .fn::after, .efbo[data-mc="q"] .fn::after {
    content: ".qz";
}

.fbo[data-mc="z"] .fn::after, .efbo[data-mc="z"] .fn::after {
    content: ".qzi";
}

.fbo[data-mc="r"] .fn::after, .efbo[data-mc="r"] .fn::after {
    content: ".refl";
}

.fbo[data-mc="f"] .fn::after, .efbo[data-mc="f"] .fn::after {
    content: ".refli";
}

.fbo[data-mc="v"] .fn::after, .efbo[data-mc="v"] .fn::after {
    content: ".vid";
}

.fbo[data-mc="t"] .fn::after, .efbo[data-mc="t"] .fn::after {
    content: ".list";
}

.fbo[data-mc="p"] .fn::after, .efbo[data-mc="p"] .fn::after {
    content: ".plan";
}


.fbo .unpublished-badge, .efbo[data-st]:not([data-st^=p]) .fbo-na::after {
    margin-left: 3px;
    color: #474D67;
    background-color: var(--bg-page);
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    
}

.efbo[data-st]:not([data-st^=p]) .fbo-na::after {
    content: "Unpublished";
}

.fbo .fn::after {
    color: #9A9EB2 !important;
    font-size: 80%;
    font-weight: 400;
    margin-left: 4px;
}

.fbo .fbo-mo {
    color: #9A9EB2;
    font-size: 80%;
    font-weight: 400;
    line-height: 1;
}

.fbf .fn {
    font-weight: bold;
}

@media (min-width: 992px) {
    .fbo-mo > div {
        display: table-cell;
    }

    .fbo-mo {
        width: 120px;
    }
}

@media (max-width: 992px) {
    .fbo-mo > div {
        display: none;
    }

    .fbo-mo {
        width: 2px;
    }
}

.fbo-ac {
    width: 80px !important;
}

.fbo-ac .btn {
    padding-top: 0;
    padding-bottom: 0;
}

/*AUTO SAVE*/
.autosave-status {
    font-size: 10px;
}

[data-autosave="error"] input, [data-autosave="error"] textarea {
    color: #dc3545 !important;
    border: 1px dashed #dc3545 !important;
}

[data-autosave="error"] label, [data-autosave="error"] .as-error-c {
    color: #dc3545 !important;
}

[data-autosave="error"] .autosave-error {
    display: block;
}

.autosave-error {
    display: none;
}

button#autosave-manual-submit {
    display: none !important;
}

/*QUIZ STUFF*/
.question-list h5:not(:first-child), .question-list .h5:not(:first-child) {
    margin-top: 10px;
}

.quiz .answered .answer-feedback {
    display: block;
}

.quiz .question-list {
    padding-inline-start: 20px;
}

.quiz ol.answer-list {
    padding-inline-start: 0px;
}

.quiz ol.answer-list li {
    list-style-type: none
}

.quiz .answer {
    background-color: var(--bg-page);
    border-radius: 4px;
    padding: 3px 10px;
    margin-bottom: 7px;
}

/* Some extra styling here as some answer elements are using <button>, so this prevents them from looking odd: */
 button.answer, button.ref-choice {
    background: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
}

/* Once answer buttons inside the correct or incorrect div, remove cursor styling - so that they don't appear selectable: */
.correct-answers button.answer, .correct-answers button.ref-choice, .incorrect-answers button.answer, .question-complete .answers-list button {
    cursor: inherit;
}

.quiz .question.sl-h-complete .select-all-text {
    display: none !important;
}

.quiz .question.sl-h-complete div.right-answer.answered:before, .quiz .question.complete .answer.right-answer.answered span.answer-text:before {
    content: '\f00c';
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    color: var(--blue);
    font-size: .75em;
    margin-right: 5px;
}

.quiz .question span.static-question-title::after {
    content: '\f252';
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    color: #aaa;
    font-size: .75em;
    margin-left: 5px;
    margin-right: 0px;
}

.quiz .question.complete span.static-question-title::after {
    content: '\f00c';
    color: var(--blue);
}

.quiz .answer.right-answer.answered {
    border-left: 5px solid #34b4e9;
}

.quiz .answer.wrong-answer.answered .answer-feedback {
    color: maroon;
}

.quiz .answer.right-answer.answered .answer-feedback {
    color: var(--blue);
}

.quiz .question:not(.complete) .answer:not(.answered):hover {
    cursor: pointer;
    color: #2F80FF;
}

.quiz .question.complete .answer:not(.right-answer) {
    opacity: 0.5;
}

.quiz .question .answer:last-of-type {
    margin-bottom: 20px;
}

.quiz .question .answer:last-of-type + span.more-questions {
    position: relative;
    top: -12px;
    font-style: italic;
}

/* QUIZ V2 */
.quiz-v2-pane[data-loading="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.quiz-v2-pane .question-title {
    font-weight: bold;
    font-size: 1rem;
}

.quiz-v2-pane .question-count-title {
    color: #aaa;
    font-weight: normal;
    font-size: 0.8rem;
}

.quiz-v2-pane.quiz-v2-compact .question-title,
.quiz-v2-pane .quiz-v2-compact .question-title {
    font-weight: bold;
    font-size: 1rem;
}

.quiz-v2-pane .question-subtitle {
    color: #aaa;
    font-size: 0.8rem;
}

.quiz-v2-pane .question-header {
    margin-bottom: 15px;
}

.quiz-v2-pane.quiz-v2-compact .question-header,
.quiz-v2-pane .quiz-v2-compact .question-header {
    margin-bottom: 8px;
}

.quiz-v2-pane .post-answer-feedback {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.quiz-v2-pane .post-answer-feedback:focus,
.quiz-v2-pane .answer:focus
{
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%) !important;
}

.quiz-v2-pane .answer-feedback,
.ref-choice .answer-feedback,
.ref-choice-static .answer-feedback {
    margin-bottom: .5rem;
}

.quiz-v2-pane .answer .answer-feedback,
.ref-choice .answer-feedback,
.ref-choice-static .answer-feedback {
    margin-top: .7rem;
}

.quiz-v2-pane .answer-feedback,
.ref-choice .answer-feedback,
.ref-choice-static .answer-feedback {
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
    background-color: var(--bg-page);
    font-weight: normal;
}

.quiz-v2-pane .answer[data-is-correct="true"] .answer-feedback {
    background-color: #DCF2FB;
    color: var(--navy);
}

.quiz-v2-pane .answer[data-is-correct="true"][data-selected="false"] .answer-feedback,
.quiz-v2-pane .answer[data-is-correct="false"] .answer-feedback {
    background-color: #F0EFEA;
    color: #666E70;
}


.quiz-v2-pane .answer[data-is-correct="true"][data-selected="true"] .answer-feedback .answer-feedback-icon {
    color: #1693C8;
}

.quiz-v2-pane .answer[data-is-correct="true"][data-selected="false"] .answer-feedback .answer-feedback-icon {
    color: #e57140;
}

.quiz-v2-pane .answer[data-is-correct="false"][data-selected="true"] .answer-feedback .answer-feedback-icon {
    color: #666E70;
}

.quiz-v2-pane .answer {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 7px;
}

.quiz-v2-pane [data-open="show-selects"] .answer {
    border: 0;
}

.quiz-v2-pane.quiz-v2-compact .answer,
.quiz-v2-pane .quiz-v2-compact .answer {
    padding: 3px 8px;
    min-height: 34px;
}

.quiz-v2-pane.quiz-v2-compact .answer:last-child,
.quiz-v2-pane .quiz-v2-compact .answer:last-child {
    margin-bottom: 20px;
}

.quiz-v2-pane:not([data-loading="true"]) .question[data-open="true"] .answer {
    cursor: pointer;
}

.quiz-v2-pane .answer[data-selected="true"] {
    border-left: 8px solid #bbb;
}

.quiz-v2-pane .feedback-pane {
    margin-top: 15px;
}

.quiz-v2-pane .static-quiz .answer[data-selected="true"] {
    border-left: 1px solid #ddd;
}

.quiz-v2-pane .question-complete .answer[data-selected="true"],
.quiz-v2-pane .answer[data-selected="true"][data-is-correct="true"] {
    border-left: 8px solid #34b4e9;
}

.quiz-v2-pane .question-complete .answer[data-selected="false"],
.quiz-v2-pane .question[data-open="show-selects"] .answer[data-selected="false"][data-is-correct="false"],
.quiz-v2-pane .question[data-open="show-selects"] .answer[data-selected="false"][data-is-correct="true"] {
    border-left: 0;
    padding-left: 18px;
}

.quiz-v2-pane .question-complete .answer[data-selected="true"],
.quiz-v2-pane .answer[data-is-correct="true"] {
    background-color: #E8F6FD;
}

.quiz-v2-pane .answer[data-is-correct="false"] {
    background-color: var(--bg-page);
}

.quiz-v2-pane [data-open="false"] .question-complete .answer[data-selected="true"] .answer-text:before,
.quiz-v2-pane [data-open="false"] .answer[data-is-correct="true"] .answer-text:before {
    content: '\f00c';
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    color: var(--blue);
    font-size: .75em;
    margin-right: 5px;
}

.quiz-v2-pane [data-open="false"] .answer[data-selected="true"]:not([data-is-correct="true"]) .answer-text:before {
    content: '\f00d';
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    color: #aaa;
    font-size: .75em;
    margin-right: 5px;
}

.quiz-v2-pane [data-open="show-selects"] .answer[data-selected="true"] .answer-text:before {
    display: inline-block;
    content: "You selected: ";
    font-weight: 600;
    margin-right: 5px;
}

.quiz-v2-pane.other-user-summary [data-open="show-selects"] .answer[data-selected="true"] .answer-text:before {
    content: "They selected: ";
}

.quiz-v2-pane .incorrect-answers .sorted-answers-icon {
    color: var(--muted);
}

.quiz-v2-pane .question .request-error {
    color: #C85021;
    margin-top: 5px;
}

.quiz-v2-pane .question .request-error:before {
    content: '\f5f2';
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    font-size: .75em;
    margin-right: 5px;
}

.quiz-v2-history .answer-text {
    width: calc(100% - 65px);
}

.quiz-v2-pane .sorted-answers-header {
    font-size: 15px;
    font-weight: bold;
}

.quiz-v2-history .answer-tally-pane .answer-tally {
    display: inline-block;
    width: 3px;
    background-color: #bbb;
    margin-right: 3px;
    height: 80%;
    padding: 0px;
    margin-bottom: 2px;
}

.quiz-v2-history [data-is-correct="true"] .answer-tally-pane .answer-tally {
    background-color: var(--blue);
}

.quiz-v2-history .answer-tally-pane .answer-tally.answer-tally-blank {
    background-color: transparent !important;
}

.quiz-v2-history .answer-tally-pane .answer-tally:before {
    content: 'x';
    color: transparent;
}

.quiz-v2-history .answer {
    display: grid;
    align-items: start;
    justify-items: start;
    grid-template-columns: minmax(30px, min-content) 1fr;
}

.quiz-v2-history .answer-flexible-tally-pane + .answer-text {
    width: calc(100% - 70px);
}

.quiz-v2-history .answer-flexible-tally-pane {
    width: 70px;
}

.quiz-v2-history .answer-tally-mouse-pane + .answer-text {
    width: calc(100% - 70px);
}

.quiz-v2-history .answer-tally-mouse-pane {
    width: 70px;
}

.quiz-v2-history .answer-tally-pane.answer-tally-count-pane + .answer-text {
    width: calc(100% - 45px);
}

.quiz-v2-history .answer-tally-pane.answer-tally-count-pane {
    width: 45px;
}

.quiz-v2-history .answer-tally-pane.answer-tally-count-pane.single-attempt + .answer-text {
    width: calc(100% - 30px);
}

.quiz-v2-history .answer-tally-pane.answer-tally-count-pane.single-attempt {
    width: 30px;
}

/*REFLECTION STUFF*/
.reflection-form .ref-question td {
    padding-bottom: 20px;
}

.ref-required-answers {
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.ref-choice, .ref-choice-static {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 7px;
    position: relative;
}

.ref-question[data-display-unselected-choices="false"][data-readonly="true"] .ref-choice[data-selected="false"], 
.ref-question[data-display-unselected-choices="false"][data-readonly="true"] .ref-choice-static[data-selected="false"] {
    display: none !important
}

.ref-question[data-display-unselected-choices="false"][data-readonly="true"] .ref-likert .ref-choice-static[data-selected="false"] {
    display: block !important
}

.ref-question[data-display-unselected-choices="false"][data-readonly="true"] .ranking-readonly-unranked {
    display: none !important
}

.ref-question .question-feedback p:last-child {
    margin-bottom: 0;
}

.ref-choice {
    cursor: pointer;
}

.ref-choice[data-disabled-by-exclusive="true"],
.ref-choice-static[data-disabled-by-exclusive="true"] {
    opacity: 0.5;
}

.ref-choice[data-disabled-by-exclusive="true"] {
    cursor: not-allowed;
    pointer-events: none;
}

.ref-choice .exclusive-choice-tag {
    margin-left: 0.5rem;
}

/* Ranking drag-and-drop container */
.ref-ranking-container {
    margin-top: 0.5rem;
}

.ref-ranking-section {
    margin-bottom: 1rem;
}

.ref-ranking-section-header {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--sl-dark);
}

.ref-ranking-section-header i {
    margin-right: 0.35rem;
}

/* Lists */
.ref-ranking-ranked,
.ref-ranking-unranked {
    min-height: 50px;
    border: 2px dashed transparent;
    border-radius: 8px;
}

/* Empty list styling (uses .is-empty class added by JS since :empty doesn't work with whitespace) */
.ref-ranking-ranked.is-empty,
.ref-ranking-unranked.is-empty {
    min-height: 50px;
    border: 2px dashed #dee2e6;
    background-color: var(--bg-page);
}

/* Rows */
.ref-ranking-row {
    will-change: transform;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ref-ranking-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.ref-ranking-ranked .ref-ranking-row {
    border-left: 3px solid #34b4e9 !important;
    padding-left: 12px;
}

.ref-ranking-row-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Drag handle area (covers badge, label, grip icon) */
.ref-ranking-drag-handle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    cursor: grab;
}

.ref-ranking-drag-handle:active {
    cursor: grabbing;
}

/* Responsive: stack controls below text on narrow screens */
@media (max-width: 576px) {
    .ref-ranking-row-inner {
        flex-wrap: wrap;
    }
    
    .ref-ranking-drag-handle {
        flex: 1 1 100%;
        order: 1;
    }
    
    .ref-ranking-controls {
        order: 2;
        margin-left: auto;
        padding-top: 0.5rem;
    }
}

/* Rank badge */
.ref-ranking-badge {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 50%;
    background-color: var(--blue);
    color: white;
    flex-shrink: 0;
}

.ref-ranking-badge:empty {
    background-color: #F0EFEA;
}

.ref-ranking-unranked .ref-ranking-badge {
    background-color: #F0EFEA;
    color: #6c757d;
}

/* Label */
.ref-ranking-label {
    flex: 1;
    margin-right: 0;
    min-width: 0;
}

/* Button controls */
.ref-ranking-controls {
    flex-shrink: 0;
    display: flex;
    gap: 0.25rem;
}

.ref-ranking-controls-ranked,
.ref-ranking-controls-unranked {
    display: flex;
    gap: 0.25rem;
}

/* Show/hide controls based on list */
.ref-ranking-ranked .ref-ranking-controls-unranked {
    display: none;
}

.ref-ranking-unranked .ref-ranking-controls-ranked {
    display: none;
}

/* Button styling */
.ref-ranking-controls .btn {
    padding: 0.25rem 0.5rem;
    line-height: 1;
    cursor: pointer;
}

.ref-ranking-controls .btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Prevent text selection during drag */
.ref-ranking-row {
    user-select: none;
    padding-left: 13px;
    padding-right: 12px;
}

.ref-ranking-btn-add-text {
    font-size: 0.8rem;
}

/* Hide add text on smaller screens */
@media (max-width: 576px) {
    .ref-ranking-btn-add-text {
        display: none;
    }
}

/* Drag handle icon */
.ref-ranking-handle-icon {
    padding: 0.5rem 0.25rem;
    opacity: 0.4;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.ref-ranking-row:hover .ref-ranking-handle-icon {
    opacity: 1;
}

/* Sortable states */
.ref-ranking-ghost {
    opacity: 0.4;
    background-color: var(--sl-primary-light, #e3f2fd) !important;
}

.ref-ranking-chosen {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

.ref-ranking-drag {
    opacity: 1;
}

/* On touch devices, hide the fallback clone (only show ghost placeholder) */
.ref-ranking-fallback-clone {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Readonly styles */
.ref-ranking-readonly-rank {
    width: 30px;
}

.ranking-hint {
    font-style: italic;
}

/* Legacy support */
.ref-ranking-control {
    width: 140px;
}

.ref-ranking-row.readonly .badge {
    width: 60px;
    text-align: center;
}

.ref-likert .ref-choice, .ref-likert .ref-choice-static {
    flex: 1 1 0;
    margin-bottom: 7px;
    padding: 5px;
}

.ref-likert {
    display: flex;
    align-items: end;
    background-color: var(--bg-page);
    padding: 15px 3px;
    border-radius: 15px;
    margin-bottom: 7px;
}

.ref-likert:empty {
    display: none
}

.ref-likert .ref-choice, .ref-likert .ref-choice-static {
    border: 0;
    margin-bottom: 0;
}

div.ref-question:not(:last-of-type) {
    margin-bottom: 30px !important;
}

.ref-non-likert .ref-choice .ref-choice-text:before,
.ref-non-likert .ref-choice-static .ref-choice-text:before,
.ref-likert .ref-choice .ref-choice-text:after,
.ref-likert .ref-choice-static .ref-choice-text:after {
    content: '\f0c8';
    font-family: 'Font Awesome 5 Pro';
    padding-right: 7px;
    color: #aaa;
    font-size: 14px !important;
}

.ref-likert .ref-choice .ref-choice-text:after,
.ref-likert .ref-choice-static .ref-choice-text:after {
    content: '\f111';
}

.ref-non-likert .ref-choice[data-selected="true"] .ref-choice-text:before,
.ref-non-likert .ref-choice-static[data-selected="true"] .ref-choice-text:before {
    content: '\f14a';
    color: #666;
}

.ref-likert .ref-choice[data-selected="true"] .ref-choice-text:after,
.ref-likert .ref-choice-static[data-selected="true"] .ref-choice-text:after {
    content: '\f058';
    color: #666;
    font-weight: 900;
}

.ref-likert .ref-choice .ref-choice-text,
.ref-likert .ref-choice-static .ref-choice-text {
    font-size: 95%;
}

@media (max-width: 767px) {
    .ref-likert .ref-choice .ref-choice-text,
    .ref-likert .ref-choice-static .ref-choice-text {
        font-size: 85%;
    }
}

.ref-likert .ref-choice[data-selected="true"] .ref-choice-text,
.ref-likert .ref-choice-static[data-selected="true"] .ref-choice-text {
    font-weight: bold;
}

.ref-likert .ref-choice .ref-choice-text:after, .ref-likert .ref-choice-static .ref-choice-text:after {
    position: relative;
    display: block;
    text-align: center;
    padding-top: 10px;
    width: 100%;
    padding-right: 0;
}

.ref-likert .ref-choice-text {
    display: block;
    line-height: 1.3;
    text-align: center;
}

.ref-question [data-showing="false"] {
    display: none;
}

.ref-question .ref-required-answers[data-valid="false"] .ref-required-answers-text:after {
    content: " Not yet completed";
    color: #C85021;

}

.ref-invalid-feedback {
    display: none;
}

.reflection-form-manual-save .ref-required-answers[data-valid="false"] + .ref-invalid-feedback {
    display: block;
    color: #C85021;
    font-size: 85%;
    margin-bottom: 3px;
}

.reflection-form-manual-save .ref-required-answers[data-valid="false"] + .ref-invalid-feedback:before {
    content: '\f071';
    font-family: 'Font Awesome 5 Pro';
    padding-right: 5px;
    font-size: 85%;
}

.ref-submit-pane {
    display: grid;
}

.reflection-outer[data-ref-started="false"] [data-tap-to-start="true"] .ref-reveal-subject {
    display: none !important;
}

.reflection-outer .start-reflection-button, .reflection-outer .ref-tap-to-start-text {
    display: none;
}
.reflection-outer[data-ref-started="false"] [data-tap-to-start="true"] .start-reflection-button,
.reflection-outer[data-ref-started="false"] [data-tap-to-start="true"] .ref-tap-to-start-text {
    display: block;
}

/* PLEDGE */
.pledge-form .pledge-question td {
    padding-bottom: 20px;
}

.pledge-required-answers {
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.pledge-question .question-feedback p:last-child {
    margin-bottom: 0;
}

.pledge-choice {
    cursor: pointer;
}

div.pledge-question:not(:last-of-type) {
    margin-bottom: 30px !important;
}

.pledge-submit-pane {
    display: grid;
}

.pledge-question .pledge-required-answers[data-valid="false"] .pledge-required-answers-text:after {
    content: " Not yet completed";
    color: #C85021;
}

.pledge-outer[data-pledge-started="false"] [data-tap-to-start="true"] .pledge-reveal-subject {
    display: none !important
}

.pledge-outer .start-pledge-button, .pledge-outer .pledge-tap-to-start-text {
    display: none;
}

.pledge-outer[data-pledge-started="false"] [data-tap-to-start="true"] .start-pledge-button,
.pledge-outer[data-pledge-started="false"] [data-tap-to-start="true"] .pledge-tap-to-start-text {
    display: block;
}

.pledge-invalid-feedback {
    display: none;
}

.pledge-form-manual-save .pledge-invalid-feedback,
.pledge-form[data-show-invalid-feedback="true"] .pledge-invalid-feedback {
    display: block;
    color: #C85021;
    font-size: 85%;
    margin-bottom: 3px;
}

.pledge-form-manual-save .pledge-invalid-feedback:not(:empty):before,
.pledge-form[data-show-invalid-feedback="true"] .pledge-invalid-feedback:not(:empty):before {
    content: '\f071';
    font-family: 'Font Awesome 5 Pro';
    padding-right: 5px;
    font-size: 85%;
}

/*TRACK CIRCLE*/
.sl-h-complete > .track-circle .sl-circle:not(.sl-circle-status), .sl-h-complete.sl-circle-status, .sl-h-complete .sl-circle-track {
    background-color: var(--blue);
    color: #fff;
}

.sl-h-error.track-circle .sl-circle {
    background-color: #C85021;
    color: #fff;
}

.sl-blob-yes:before,
.sl-blob-no:before,
.sl-bigblob-yes:before,
.sl-bigblob-no:before,
.sl-blob-inc:before,
.sl-blob-orange:before {
    font-family: "Font Awesome 5 Pro";
    margin-right: 3px;
    font-size: 70%;
    position: relative;
    top: -1px;
}

.sl-bigblob-yes:before, .sl-bigblob-no:before {
    font-size: 120%;
}

.sl-blob-yes:before, .sl-bigblob-yes:before {
    font-weight: 600;
    content: "\f111";
    color: var(--blue);
}

.sl-blob-yes.sl-blob-yes-check:before, .sl-bigblob-check.sl-bigblob-yes-check:before {
    content: "\f058";
}

.sl-blob-no:before, .sl-bigblob-no:before {
    font-weight: 300;
    content: "\f111";
    color: #ccc;
}

.sl-blob-inc:before, .sl-bigblob-inc:before {
    font-weight: 600;
    content: "\f111";
    color: #ddd;
}

.sl-blob-orange:before, .sl-bigblob-orange:before {
    font-weight: 600;
    content: "\f111";
    color: #C85021;
}

.sl-bigblob-yes:before, .sl-bigblob-no:before {
    font-family: "Font Awesome 5 Pro";
    margin-right: 3px;
    font-size: 70%;
    position: relative;
    top: -1px;
}

.sl-blob-bullet .sl-blob-yes,
.sl-blob-bullet .sl-blob-no,
.sl-blob-bullet .sl-blob-inc,
.sl-blob-bullet .sl-blob-orange {
    margin-left: -17px;
}

.sl-blob-bullet {
    padding-left: 17px;
}

.sl-circle-track {
    width: 25px;
    height: 25px;
}

.sl-icon-track {
    min-width: 45px;
}

.track .track-circle {
    width: 45px;
    vertical-align: top;
}

.track .track-circle + td, .track .track-circle + .table-td {
    padding-left: 5px;
}

.track .q-title {
    padding-bottom: 7px;
}

.track tr:not(:last-child) .q-border,
.track .table-tr:not(:last-child) .q-border {
    height: 100%;
    padding: 0;
    background: linear-gradient(var(--bg-surface), var(--bg-surface)) no-repeat center/3px 100%;
}

.track-crits {
    font-size: 85%;
    font-style: italic;
}

.track.is_complete .q-border,
.track.is_complete tr:not(:last-child) .q-border,
.track[data-progress="complete"] tr:not(:last-child) .q-border,
[data-progress="complete"] .track tr:not(:last-child) .q-border,
.track[data-progress="complete"] .table-tr:not(:last-child) .q-border,
[data-progress="complete"] .track .table-tr:not(:last-child) .q-border {
    background: linear-gradient(#34b4e9, #34b4e9) no-repeat center/3px 100%;
}

.track .sl-circle {
    margin: auto;
    position: relative;
    top: -1px;
}

.track .track-complete-status, .track.is_complete .track-incomplete-status {
    display: none;
}

.track.is_complete .track-complete-status, .track .track-incomplete-status {
    display: table-row;
}

.modal .box.track, .modal .box.dropin-box {
    border: 1px solid #dedede;
}

.smaller {
    font-size: 90%;
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(0, 123, 255, .1)
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: var(--blue);
    border-color: #ddd;
    background-color: white;
}

.custom-switch .custom-control-label::after {
    background-color: #c2c2ad;
}

.freeze .custom-control-label::before {
    pointer-events: none;
}

.custom-switch .custom-control-label::before {
    border-color: #ddd !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--blue);
}

.custom-switch.two-ender .custom-control-input ~ .custom-control-label::after {
    background-color: var(--blue);
}

.custom-control.custom-switch.neutral .custom-control-label::after, .custom-switch.neutral .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(0.36rem);
    background-color: #474D67;
    width: 10px;
    height: 10px;
    top: 7px;
    left: -33px;
    box-shadow: 0 0 0 0 rgba(52, 180, 233, 1);
    animation: pulse 2.5s infinite;
}

}
.custom-control.custom-switch.neutral .custom-control-label:before {
    color: var(--blue);
    background-color: white;
}

@keyframes neutral-pulse {
    0% {
        background-color: var(--blue);
    }
    50% {
        background-color: #474D67;
    }
    100% {
        background-color: var(--blue);
    }
}

.shine-elem {
    box-shadow: 0 0 0 0 rgba(52, 180, 233, 1);
    animation: pulse 2.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 #474D67;
    }
    100% {
        box-shadow: 0 0 0 5px rgba(52, 180, 233, 0);
    }
}

.custom-control-label, .custom-control-input {
    cursor: pointer;
}

.custom-control-input + label .custom-control-input-status:before {
    content: attr(data-off-label);
}

.custom-control-input:checked + label .custom-control-input-status:before {
    content: attr(data-on-label);
}

.sl-crits .custom-control {
    margin-bottom: 0.25em;
}

.sc-static {
    position: relative;
}

.sc-static-label:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f111";
    color: #ccc;
    font-style: normal;
    position: absolute;
    font-size: 85%;
    top: 3px;
    left: 3px;
}

.sl-step-crits .sc-static-label:before {
    left: 20px;
    transition: color 0.2s;
}

.sc-static-label[data-checked="yes"]:before {
    font-weight: 600;
    color: var(--blue);
}

.sl-step.sc .custom-control-label, .sl-step.sc .sc-static-label {
    font-style: italic;
}

.sl-step.sc .custom-control, .sl-step.sc .sc-static {
    margin-bottom: 5px;
}

.sl-crits .sc-static-label {
    padding-left: 23px;
}

.sl-crits .custom-control, .sl-crits .sc-static {
    margin-bottom: 5px
}

.sl-crits .sc-static:first-child, .sl-tasks .task-check:first-child {
    margin-top: 0.5rem !important;
}

.step-display, .goal-display {
    overflow-wrap: anywhere;
}

.step-display, .ico-display, .goal-display {
    padding-left: 43px;
    min-height: 36px;
}

.step-display-sm, .ico-display-sm, .goal-display-sm {
    padding-left: 27px;
}

.step-display::before, .ico-display::before, .goal-display::before {
    font-family: 'slab-icomoon';
    content: "\e900";
    font-weight: 600;
    position: absolute;
    margin-left: -34px;
    font-size: 23px;
    margin-top: 1px;
}

.goal-display::before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f648";
    font-weight: 600;
    position: absolute;
    margin-left: -34px;
    font-size: 23px;
    margin-top: 1px;
}


.ico-display.shoutout::before {
    content: "\e903";
}

.ico-display.msg::before {
    content: "\e901";
}

.ico-display.nudge::before {
    content: "\e902";
}

.crit-display::before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f05b";
}

.step-display.step-display-sm::before, .ico-display-sm::before {
    margin-left: -25px;
    font-size: 16px;
}

.sl-crits .custom-control label, .sl-crits .sl-crit-label, .sl-crits .sc-static-label {
    font-style: italic;
    font-weight: 300;
}

.sl-step-crits .sl-crits .custom-switch, .sl-step-crits .sl-crits .sc-static-label {
    padding-left: calc(2.25rem + 7px);
}

.trailer {
    color: var(--muted);
    font-weight: 400;
    font-size: 14px;
    font-style: italic;
}

.step-footer {
    margin-top: 3px;
    color: var(--muted);
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 10px;
}

.step-footer .domain-text {
    font-style: italic;
}

.prac-prompt {
    background: var(--navy);
    padding: 5px 10px;
    text-align: center;
    color: #fff;
    position: relative;
    display: inline-block;
    border-radius: 5px;
    margin-right: 10px;
    margin-bottom: 15px;
}

.prac-prompt:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 5px solid #474C68;
    border-right: 5px solid transparent;
    border-top: 5px solid #474C68;
    border-bottom: 5px solid transparent;
    left: 19px;
    bottom: -9px;
}

.roundcount-btn {
    padding: 0;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: inline-block;
    line-height: 46px;
    font-size: 26px;
    text-align: center;
    position: relative;
}

.btn.roundcount-btn.btn-action.btn-radio:not(.active) {
    color: var(--navy);
    border-color: var(--muted);
}

.btn.roundcount-btn.btn-action.btn-radio.active {
    background: none;
    color: var(--navy);
    border: 2px solid #C85021;
    line-height: 44px;
}

.btn.roundcount-btn.btn-action.btn-radio.active:hover {
    background: none;
}

.btn.roundcount-btn.btn-action.btn-radio.active:after {
    content: '\f00c';
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    border-radius: 50%;
    background-color: #C85021;
    color: #fff;
}

.link {
    cursor: pointer;
}

button.link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
}

button.link.small {
    font-size: 0.8em;
}

.error {
    color: #C85021;
    margin-top: 5px;
}

.collapse-caret {
    text-decoration: none !important;
}

.collapse-caret[data-showing="true"].collapsed:after,
.collapse-caret[aria-expanded="true"]:after,
[aria-expanded="true"] .collapse-caret:after {
    content: "\f106";
}

.collapse-caret.loading:after {
    content: "\f110";
    position: absolute;
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}

.collapse-caret:after {
    font-family: "Font Awesome 5 Pro";
    margin-left: 6px;
    content: "\f107";
}

.f-title {
    font-size: 1.1em;
    color: var(--navy);
}

label:has(+ .label-subheader) {
    margin-bottom: 0;
}

.label-subheader {
    font-size: .9em;
    color: #717171;
    margin-top: 2px;
    margin-bottom: .5rem;
    white-space: pre-line;
}

input::placeholder {
    color: var(--placeholder-grey) !important;
}

.file_uploads_pane .file-upload:first-child {
    margin-top: .75em;
}

.file_uploads_pane .file-upload {
    font-size: 14px;
}

.file_uploads_pane[data-uploading="true"] + div #file_upload_button {
    display: none;
}

.file_uploads_pane[data-uploading="false"] + div .uploading-status-message {
    display: none;
}

.file_uploads_pane:empty {
    display: none;
}

[contenteditable]:empty:not(:focus):before {
    content: attr(data-ph);
    color: #bbb;
}

.comment.deleted {
    opacity: 0.5;
}

.comment_input {
    border: 1px solid #bbb;
    border-radius: 5px;
    font-size: 14px;
    padding: 2px 5px;
    min-height: 30px
}

.comment_input:focus {
    box-shadow: 0 0 3px 1px rgb(52 180 233) !important;
}

.comment_actions {
    text-align: right;
    font-size: 13px;
    padding-bottom: 3px;
}

.comment_actions button {
    font-size: 13px;
    padding-left: 3px;
    padding-right: 3px;
    background: none;
}

.comment_actions .side-date {
    font-size: 13px;
    padding-left: 3px;
    padding-right: 3px;
    padding: .25rem .4rem;
    line-height: .5;
    vertical-align: middle;
}

.comment_actions button:focus {
    outline: none;
    box-shadow: 0 0 3px 1px rgb(52 180 233);
}

.pl-circle-xs.comment_profpic {
    bottom: 0px;
    border: 0;
}

.social-count[data-social-c]::after {
    content: attr(data-social-c);
    margin-right: 5px;
}

.social-count[data-social-c="0"]::after {
    content: attr(data-social-c);
    color: #ddd;
}

.social-count[data-social-c] .count:before {
    color: inherit;
    margin-right: 2px;
}

.social-count[data-social-c="0"] .count:before {
    color: #ddd;
}

[data-liked="true"] .count:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f164";
    font-size: .65rem;
    position: relative;
    top: -1px;
}

[data-liked="true"] {
    color: var(--blue);
}

[data-liked="false"] .count:before, .social-count[data-social="likes"] .count:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f164";
    font-size: .65rem;
    position: relative;
    top: -1px;
}

[data-liked="false"] .count:before,
[data-liked="false"] .like-btn-text {
    color: #aaa;
}

[data-comment-count]::after {
    content: attr(data-comment-count);
}

[data-comment-count]::after {
    color: #aaa;
}

[data-comment-count]:before, .social-count[data-social="comments"] .count:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f075";
    margin-right: 3px;
    font-size: .65rem;
    position: relative;
    top: -1px;
}

[data-comment-count]:before {
    font-weight: 300;
    color: #aaa;
}

[data-comment-count="0"]:before {
    font-weight: 300;
}

[data-tlike-count]::after {
    content: attr(data-tlike-count);
}

[data-tlike-count]::after {
    color: #aaa;
}

[data-tlike-count]:before, [data-clike-count]:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f164";
    margin-right: 3px;
    font-size: .65rem;
    position: relative;
    top: -1px;
}

[data-tlike-count]:before {
    font-weight: 300;
    color: #aaa;
}

[data-tlike-count="0"]:before {
    font-weight: 300;
}

[data-clike-count]::after {
    content: attr(data-clike-count);
}

.remove_comment_btn:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f1f8";
    color: #aaa;
    font-size: .65rem;
    position: relative;
    top: -1px;
}

.comment-upload-input.hidden, .upload-input.hidden {
    opacity: 0;
    height: 0.1px;
    width: 0.1px;
    position: absolute;
    z-index: -1
}

.comment-upload-input-container.hidden, .upload-input-container.hidden {
    opacity: 0;
    height: 0.1px;
    width: 0.1px;
    position: absolute;
    z-index: -1
}

.comments_reply:not([data-comment-id="_base_"]) .comment-upload-filename {
    margin-left: 28px;
}

.comment-upload-filename:not(:empty):before, .upload-filename:not(:empty):before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 600;
    content: "\f0c6";
    font-size: 80%;
    margin-right: 3px;
    color: #aaa;
}

.comment-upload-filename:empty + .comment-upload-discard {
    display: none;
}

.comment-upload-discard {
    margin-left: 3px;
    top: 1px;
    position: relative;
    cursor: pointer;
}

.comment-upload-discard:hover {
    color: #ddd;
}

.comments_reply {
    margin-top: 10px;
    margin-bottom: 20px;
}

.comments_reply.loading {
    opacity: 0.5;
    cursor: default !important;
}

.comments_reply.hidden {
    display: none;
}

.comment_comment {
    background-color: var(--bg-page);
    min-height: 30px;
    border-radius: 15px;
    padding: 6px 9px;
    font-size: 14px;
    display: table-cell;
    vertical-align: middle;
    width: 100%
}

.comment_comment.hc {
    border-left: 5px solid #34b4e9;
    background-color: #ebf0f5;
}

.like-btn:focus, .reply-btn:focus {
    outline: none;
    box-shadow: none;
}

.reply-btn {
    margin-left: 5px;
    color: #aaa;
}

/* Shared shoutout box styling (drop-in/obs fts boxes and coaching quality
   checks), WCAG 2.2 AA contrast */
.box[data-tag="fts"], .alt-box[data-tag="fts"], .shoutout-box {
    background-color: rgba(23, 128, 171, 0.08); /* --blue-2 at 8% */
    color: #16486E;
    border-color: transparent !important;
}

.box[data-tag="fts"]:empty,
.alt-box[data-tag="fts"]:empty {
    display: none;
}

.box[data-tag="fts"] .box-title,
.alt-box[data-tag="fts"] .box-title,
.shoutout-box .box-title,
.box[data-tag="fts"] .link,
.alt-box[data-tag="fts"] .link,
.shoutout-box .link {
    color: #16486E;
}

.box[data-tag="fts"] .fa-heart,
.alt-box[data-tag="fts"] .fa-heart,
.shoutout-box .fa-heart {
    color: #2AADE3;
}

.box[data-tag="fts"] a[target],
.alt-box[data-tag="fts"] a[target] {
    color: #16486E;
    font-weight: bold;
}

.prg-status {
    display: block;
    font-size: 90%;
    font-weight: 600;
    margin-left: 5px;
    color: #aaa;
}

.prg-status .h {
    font-weight: 400;
    color: var(--muted);
}

.prg-status:before {
    content: '→ ';
    color: #aaa;
    font-weight: 300;
}

.ellipsis-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

mark {
    border-radius: 3px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    padding: 0;
    background-color: #eee;
    color: #666;
    font-weight: 600;
    padding-left: 2px;
    padding-right: 2px;
}

#pickerSearchGoals .results {
    /* padding-left: .5rem;
  border-left: 3px dotted #ddd;
  */
    /*padding-bottom: 15px;
  */
}

#pickerSearchGoals .results .btn-choice:last-child {
    margin-bottom: 25px;
}

.goal-text, .step-header {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3;
}

.goal-header {
    font-size: 23px !important;
    font-weight: 600 !important;
    line-height: 1.1;
    position: relative;
    top: 5px;
    padding-bottom: 5px;
}

.goal-text-outer {
    color: #888C9F
}

.page-item.active .page-link {
    background-color: var(--blue);
    border-color: var(--blue);
}

.page-link {
    color: var(--blue);
}

.dt-paging-button a,
.dataTables_paginate a {
    color: var(--navy);
}

.dataTables_info .select-info .select-item {
    display: block;
    margin-left: 0;
}

.dt-search {
    display: flex !important;
    justify-content: end !important;
    align-items: center !important;
}

div.dt-container div.dt-search {
    margin-bottom: 0.5rem !important;
}

div.dt-container div.dt-info {
    padding-top: 0.85em;
}

div.dt-container div.dt-scroll-body {
    border-bottom: 0 !important;
}

table.dataTable thead > tr > th {
    outline: 0px !important;
}

table.dataTable thead > tr:hover > th {
    outline: 0px !important;
}

table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
    background-color: var(--blue) !important;
}

table.dataTable tbody > tr.selected, table.dataTable tbody > tr.selected .text-muted {
    color: white !important;
}

table.dataTable tbody > tr.selected:hover, table.dataTable tbody > tr:hover > .selected {
    background-color: #2aa7db !important;
}

table.dataTable.table.table-hover > tbody > tr.selected:hover > *, table.dataTable.table > tbody > tr.selected > * {
    box-shadow: none !important;
}

table.dataTable.table-hover tr {
    cursor: pointer;
}

table.dataTable.dataTableSelector tr td:first-child:before {
    content: '\f0c8';
    font-family: "Font Awesome 5 Pro";
    margin-right: 7px;
    font-size: 80%;
}

table.dataTable.dataTableSelector tr td:first-child.dataTables_empty:before {
    content: '';
    margin-right: 7px;
}

table.dataTable.dataTableSelector tr.selected td:first-child:before {
    content: '\f14a';
}

table.heatmap {
    width: 100%;
}

.heatmap td {
    position: relative;
    padding: 3px 3px;
    font-size: 13px;
}

.heatmap td:not(.total-row) {
    border-left: 1px solid #ccc;
}

.heatmap td[data-tdf]:not(.total-row):hover > div {
    background-color: #FECA4A;
    border-right: 0
}

.heatmap td[data-tdf] {
    cursor: pointer;
}

.heatmap td:not(.total-row) > div {
    background-color: #c4eeff;
    /*border-right: 2px solid #b2e6fb;
  */
    position: absolute;
    /*top: 0;
  */
    left: 0;
    height: 76%;
    margin: auto;
    z-index: 1;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: background-color 0.15s ease-in-out;
}

.heatmap td span {
    z-index: 2;
    position: relative;
    transition: color 0.15s ease-in-out;
}

.heatmap td:hover span:not(.badge) {
    color: #000;
}

.heatmap td .badge {
    top: -1px;
    right: -2px;
    position: relative;
    transition: background-color 0.15s ease-in-out;
}

.heatmap td:hover .badge {
    background-color: #e8ae1e;
}

.heatmap .total-row {
    /* background-color: #aaa;
  color: white;
  */
    font-weight: bold;
}

.whats-going-on {
    background-color: var(--navy);
    color: white;
    border-radius: .75em;
    position: relative;
    /*margin-left: 25px;
  */
    margin-left: 10px;
    /*top: -15px;
  */
    padding: 15px 20px;
    padding-bottom: 25px;
}

/* .whats-going-on:after {
  content: '';
  position: absolute;
  top: 15%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-right-color: var(--navy);
  border-left: 0;
  border-bottom: 0;
  margin-top: -5px;
  margin-left: -7px;
}
*/
.whats-going-on:before {
    content: '';
    position: absolute;
    top: 15%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: var(--navy);
    border-left: 0;
    border-top: 0;
    margin-top: 3px;
    margin-left: -30px;
}

.whats-going-on-link:not(.collapsed) {
    display: none;
}

.whats-going-on .dismiss {
    position: absolute;
    bottom: 10px;
    right: 20px;
}

._debug {
    display: none;
}

._debug-on ._debug {
    padding: 2px;
    font-size: 12px;
    background-color: var(--bg-page);
    position: absolute;
    z-index: 100;
    opacity: 0.2;
}

._debug-on [data-debug]:after {
    content: attr(data-debug);
}

._debug-on ._debug:hover, ._debug-on .sl-wrap:hover ._debug {
    display: inline-block;
    opacity: 1;
}

.rainbow-text {
    background-image: linear-gradient(to left, violet, indigo, blue, green, orange, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

::selection .rainbow-text {
    background: #FFCC00;
    color: black;
  }

.rainbow-fill {
    background-image: linear-gradient(to left, violet, indigo, blue, green, orange, red);
    color: white;
}

#navbar-brand .icon-slab {
    transition: font-size 0.2s ease-in-out;
}

#navbar-brand .icon-slab[data-clicks="3"] {
    font-size: 27px;
}

#navbar-brand .icon-slab[data-clicks="4"] {
    font-size: 28px;
}

#navbar-brand .icon-slab[data-clicks="5"] {
    font-size: 29px;
}

.simple-role {
    width: 25px;
    height: 25px;
    text-align: center !important;
    text-align-last: center !important;
    font-size: 16px;
    display: inline-block;
    border-radius: 50%;
    color: white;
    font-weight: 900;
    margin-right: 2px;
    margin-bottom: 5px;
}

.simple-role.t {
    background-color: var(--blue);
}

.simple-role.c {
    background-color: #C85021;
}

.simple-role.l {
    background-color: #FFCC00;
}

.simple-role.no {
    background-color: #eee;
    color: #ddd;
}

.start-it-btn.start-it-read span::after {
    content: "Start reading";
}

.is_complete .start-it-btn.start-it-read span::after {
    content: "Read again";
}

.start-it-btn.start-it-watch span::after {
    content: "Start watching";
}

.is_complete .start-it-btn.start-it-watch span::after {
    content: "Watch again";
}

.start-it-btn.start-it-watchread span::after {
    content: "Watch & read";
}

.is_complete .start-it-btn.start-it-watchread span::after {
    content: "Watch & read again";
}

.is_complete .start-it-btn {
    border: 1px solid #eee;
    background-color: white;
    color: #474D67;
}

.is_complete .start-it-btn:hover {
    background-color: #eee;
}

.video-placeholder {
    position: relative;
    width: 100%;
}

.video-placeholder .play-link {
    width: 50px;
    height: 50px;
    background-color: black;
}

.video-placeholder .play-link .play-icon, .video-placeholder .play-link .play-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 53px;
    line-height: 0;
    margin-left: -26px;
    z-index: 2;
    transition: all 0.2s ease-in-out;
    opacity: 0.6;
    color: white;
}

.video-placeholder .play-link .play-circle {
    /*border: 3px solid #34b4e9;
  */
    border: 3px solid white;
    height: 90px;
    width: 90px;
    margin-left: -42px;
    border-radius: 50%;
    margin-top: -48px;
    color: white;
    /*background-color: white;
  */
    z-index: 1;
    box-shadow: 0 0 20px 2px #bbbbbb33;
}

.video-placeholder:hover .play-link .play-circle {
    /*border: 3px solid #148bbc;
  */
    border: 4px solid white;
    box-shadow: 0 0 20px 4px #bbbbbb33;
}

.video-placeholder:hover .play-link .play-icon, .video-placeholder:hover .play-link .play-circle {
    opacity: 0.6;
}

.video-placeholder .cover-image {
    padding-bottom: 56%;
    border-radius: 5px;
    background-color: var(--bg-page);
    background-image: url('/static/images/sl-logo.png');
    background-position: center;
    background-size: 40%;
    background-repeat: no-repeat;
}

.apply-show-solo, .apply-show-nonsolo, [data-total-participants="1"] .apply-hide-solo {
    display: none;
}

[data-total-participants="1"] .apply-show-solo, [data-total-participants="2"] .apply-show-solo, [data-total-participants="3"] .apply-show-solo {
    display: block;
}

[data-total-participants="1"] .apply-fade-solo .sl-circle-track {
    background-color: #fff;
    border: 2px solid var(--bg-page);
}

[data-total-participants="1"] .grey-bg-circle .apply-fade-solo .sl-circle-track {
    background-color: transparent;
    border-color: #eee;
}

[data-total-participants="1"] .apply-fade-solo.sl-h-complete .sl-circle-track {
    border: 2px solid #34b4e9;
}

[data-total-participants="1"] .apply-fade-solo .sl-title {
    color: #bbb;
}

[data-total-participants="1"] .apply-fade-solo .sl-track-completestatus:before {
    content: "Not applicable" !important;
}

.table thead th:first-child {
    /*border-top-left-radius: 10px;
  */
}

.table thead th:last-child {
    /*border-top-right-radius: 10px;
  */
}

.table thead th {
    padding: 5px;
}

.table thead tr.thead-dark th {
    background-color: var(--navy) !important;
    padding: 0;
    padding-left: 5px;
}

.table {
    color: var(--navy);
}

.box-page-controls button:disabled, .box-top-controls button:disabled {
    opacity: 0.3;
}

/*.selectize-loading .selectize-input {
  padding-left: 30px;
  position: relative;
}
.selectize-loading:before {
  content: '\f110';
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  font-weight: 900;
  font-size: 12px;
  left: 10px;
  top: 9px;
  color: #ccc;
  animation: fa-spin 2s infinite linear;
  z-index: 2;
}
*/
.selectize-dropdown .no-results:before {
    content: "No results found";
    color: var(--muted);
}

.selectize-loading .selectize-dropdown .no-results:after, .loading .selectize-dropdown .no-results:after {
    content: "Searching...";
    margin-left: 19px;
    color: var(--muted);
}

.selectize-loading .selectize-dropdown .no-results:before, .loading .selectize-dropdown .no-results:before {
    content: '\f110';
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    font-weight: 900;
    font-size: 12px;
    animation: fa-spin 2s infinite linear;
    color: var(--muted);
    margin-top: 3px;
}

.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
    padding: 0.4rem 0;
}

.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
    bottom: 0;
}

.bs-tooltip-top .arrow:before, .bs-tooltip-auto[x-placement^="top"] .arrow:before {
    top: 0;
    border-width: 0.4rem 0.4rem 0;
    border-top-color: var(--navy);
}

.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
    padding: 0 0.4rem;
}

.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
    left: 0;
    width: 0.4rem;
    height: 0.8rem;
}

.bs-tooltip-right .arrow:before, .bs-tooltip-auto[x-placement^="right"] .arrow:before {
    right: 0;
    border-width: 0.4rem 0.4rem 0.4rem 0;
    border-right-color: var(--navy);
}

.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
    padding: 0.4rem 0;
}

.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
    top: 0;
}

.bs-tooltip-bottom .arrow:before, .bs-tooltip-auto[x-placement^="bottom"] .arrow:before {
    bottom: 0;
    border-width: 0 0.4rem 0.4rem;
    border-bottom-color: var(--navy);
}

.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
    padding: 0 0.4rem;
}

.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
    right: 0;
    width: 0.4rem;
    height: 0.8rem;
}

.bs-tooltip-left .arrow:before, .bs-tooltip-auto[x-placement^="left"] .arrow:before {
    left: 0;
    border-width: 0.4rem 0 0.4rem 0.4rem;
    border-left-color: var(--navy);
}

.tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: #fff;
    text-align: left;
    /* A11y (WCAG 1.4.3): #777 at Bootstrap's 0.9 tooltip opacity composited
       to #848484 - only 3.7:1 behind the white copy. Navy at full opacity
       is 8.4:1. */
    background-color: var(--navy);
    border-radius: 0.25rem;
}

.tooltip.show {
    opacity: 1;
}

.take-tour-btn {
    position: relative;
    top: -10px;
    margin-bottom: -10px;
}

.btn-pill.dark-pill {
    border: 1px solid #474D67;
    border-radius: 20px;
    padding: 3px 11px 4px 11px;
    color: #474D67;
    transition: background-color 0.15s ease-in-out;
}

.btn-pill.dark-pill:hover {
    border: 1px solid #474D67;
}

.btn-pill {
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 3px 11px 4px 11px;
    color: #474D67;
    transition: background-color 0.15s ease-in-out;
}

.btn-pill:hover {
    border: 1px solid #eee;
    background-color: #eee;
    text-decoration: none !important;
    color: inherit;
}

.btn-pill.active {
    border: 1px solid #eee;
    background-color: #eee;
    font-weight: bold;
}

/* this controls li that aren't in a list */
li:not(ul li):not(ol li):not(.crit):not(.ro-crit):not(.list-group-item) {
    padding-inline-start: 7px;
    list-style-position: outside;
    margin-left: 1.95em;
    padding-left: 0;
}

ul.no-pad, ol.no-pad {
    padding-inline-start: 20px;
}
ul.less-pad, ol.less-pad, .helptt ul, .helptt ol {
    padding-inline-start: 30px;
}

@keyframes step-flash {
    from, 50%, to {
        opacity: 1;
    }
    25%, 75% {
        opacity: .5;
    }
}

.step-flash {
    animation-name: step-flash;
    animation-timing-function: ease;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
}

.step-indicator-box {
    border-bottom-style: solid;
    border-right-style: solid;
    border-color: white;
    border-width: 2.5px;
    width: 2em;
    height: 2em;
}

.vjs-fullscreen .step-indicator-text-container {
    font-size: 2rem;
    margin-top: 1em;
}

.vjs-fullscreen .step-indicator-box {
    width: 7em;
    height: 7em;
    border-width: 4px;
}

@media (min-width: 500px) {
    .step-indicator-box {
        width: 4em;
        height: 4em;
    }
}

@media (min-width: 800px) {
    .step-indicator-box {
        width: 6em;
        height: 6em;
    }
}

@media (min-width: 1920px) {
    .vjs-fullscreen .step-indicator-box {
        width: 8em;
        height: 8em;
        border-width: 5px;
    }

    .vjs-fullscreen .step-indicator-text-container {
        font-size: 2.5rem;
        margin-top: 0.85em;
    }
}

.step-indicator-text-container {
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 1.5em;
    margin-right: 1.5em;
    width: 80%;
}

.step-indicator-dot {
    margin-right: 3px;
    height: 1em;
    width: 1em;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
}

.step-jump-to-button {
    cursor: pointer;
    bottom: 20px;
    position: relative;
    opacity: .7;
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 2px;
    margin-left: 10px;
    border-radius: 15px;
}

div.lead-top-link {
    display: inline-block;
    margin: 0px 10px 5px 3px;
}

div.lead-top-link > a, div.lead-top-link > div.dropdown > a {
    color: var(--muted);
}

div.lead-top-link > a:hover {
    text-decoration: none;
    color: #777;
}

div.lead-top-link.active {
    border-bottom: 3px solid #C85021;
}

div.lead-top-link.active > a {
    color: var(--navy);
}

.slab-breadcrumbs ol.breadcrumb {
    padding-bottom: 0;
    padding-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    color: var(--muted);
}

.slab-breadcrumbs ol.breadcrumb a {
    color: var(--muted);
}

.crumb-title {
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 700;
}

.slab-breadcrumbs .truncate {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.slab-breadcrumbs .breadcrumb {
    background-color: transparent;
}

.slab-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: '\f054';
    font-family: 'Font Awesome 5 Pro';
    font-size: 80%;
    margin-top: 3px;
    color: var(--muted);
}

.slab-breadcrumbs .add-btn {
    border-radius: 50%;
}

.slab-group-breadcrumbs {
    /* background-color: var(--navy);
  color: white;
  padding: 10px 10px 10px 20px;
  border-radius: 15px;
  margin-bottom: 30px;
  */
}

.freeze {
    opacity: 0.5;
    pointer-events: none;
}

.blurred {
    filter: blur(3px);
    -webkit-filter: blur(3px);
}

.crumb-div {
    margin-bottom: 20px;
    display: table;
    width: 100%;
}

.crumb-div .crumb-btn {
    /*position: absolute;
  */
    top: 0;
    left: 0;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    font-size: 23px;
    line-height: 32px;
}

.crumb-div .crumb-btn:not(.btn-orange) {
    border: 1px solid #dedede;
}

.crumb-div .crumb-btn-pane {
    width: 46px;
    position: relative;
}

.crumb-div-right {
    width: auto;
    margin-left: auto;
    position: relative;
}

.crumb-div-row {
    display: table-row;
}

.crumb-div-row > div {
    display: table-cell;
    vertical-align: top;
}

.crumb-div-right .crumb-path-pane {
    text-align: right;
}

.crumb-div-right ol.breadcrumb {
    padding-left: inherit;
    padding-right: 0;
}

.crumb-div:not(.crumb-div-right) .crumb-path-pane {
    padding-left: 10px;
}

.crumb-div.crumb-div-right .crumb-path-pane {
    padding-right: 10px;
}

.crumb-v3-div {
    margin-top: -15px;
}

#main-header:has(.alert) + .crumb-v3-div {
    margin: 0px;
}

#stickies-box {
    margin-top: 15px !important;
    width: calc(100% - 25px) !important;
}

#peekaboo {
    position: fixed;
    z-index: 10;
    left: 100px;
    height: 59px;
    top: 0;
    transition: top 2s linear;
}

.manage-btn {
    font-size: 16px;
    padding: 17px;
    color: inherit;
    font-weight: bold;
    margin-top: -10px;
    display: block;
    line-height: 1.2;
    word-break: break-word;
}

.icon-square {
    width: 80px;
    margin: auto;
    height: 70px;
    border-radius: 10px;
    background-color: var(--bg-surface);
    padding-top: 20px;
}

.manage-btn-outer {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 575px) {
    .icon-square {
        display: inline-block;
        font-size: 8px;
        height: auto;
        width: auto;
        background-color: transparent;
        padding-top: 0;
    }
    
    .has-info .icon-square .icon-square-icon {
        position: relative;
        top: -15px;
    }

    .manage-btn {
        display: inline-block;
        padding-left: 10px;
    }

    .manage-btn-outer {
        text-align: left;
        padding-left: 15px;
        padding-right: 15px;
    }
}

.grey-bg-circle .sl-circle {
    border: 2px solid #ddd;
}

.grey-bg-circle .sl-h-complete .sl-circle {
    border: 0;
}

.sl-list.grey-bg-circle:not(.is_complete) > .sl-wrap > .sl-icon {
  background: transparent;
}

.sl-list.grey-bg-circle:not(.is_complete) > .sl-wrap:not(.d-none):has(~ .sl-wrap:not(.d-none)) > .sl-icon {
    background: linear-gradient(#ddd, #ddd) no-repeat center/2px 100%;
}

textarea.is-shoutout {
    background-color: rgba(23, 128, 171, 0.08) !important; /* --blue-2 at 8% */
    color: #16486E !important;
    /* border + shadow form a 2px ring so the shoutout state change is
       unmistakable, without shifting layout like bolder text would */
    border-color: var(--blue-2) !important;
    box-shadow: 0 0 0 1px var(--blue-2) !important;
    transition: all 0.2s linear;
}

textarea.is-shoutout::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--blue-2);
    opacity: 1;
    /* Firefox */
}

textarea.is-shoutout:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: var(--blue-2);
}

textarea.is-shoutout::-ms-input-placeholder {
    /* Microsoft Edge */
    color: var(--blue-2);
}

.mini-done {
    background-color: var(--blue);
    border-radius: 50%;
    padding: 3px;
    font-size: 80%;
    color: white;
    width: 16px;
    height: 16px;
}

.mini-not-done, .mini-unavailable {
    background-color: #F0EFEA;
    border-radius: 50%;
    padding: 3px;
    font-size: 80%;
    color: #F0EFEA;
    width: 16px;
    height: 16px;
}

.mini-unavailable {
    background-color: transparent;
    color: white;
    border: 2px solid #dedede;
    color: transparent;
}

.break-word {
    word-break: break-all;
}

.cursor-default, .cursor-default:hover {
    cursor: default !important;
}

/*OVERWRITE*/
#copyright-text {
    font-size: 12px;
    color: var(--muted);
    position: absolute;
    bottom: 70px;
    left: 50px;
}

@media (max-width: 576px) {
    #copyright-text {
        left: 30px;
    }
}

.alert {
    border-radius: 0.75em;
}

.box.card {
    padding: 0;
    border-radius: 0.75em;
}

.box.card .card-header {
    border-radius: 0.61em 0.61em 0 0;
}

.box.card .card-header:last-child {
    border-bottom-left-radius: 0.61em;
    border-bottom-right-radius: 0.61em;
}

/* Do not show optional label for Symptom Checker Examples */
.box.card[data-is-linked-content="true"] .card-header i.optional-label {
    display: none;
}

.box.card .card-body,
.box-card-body-spacing {
    padding: 15px 20px 15px 20px;
}

.box.card .card-body.card-body-short-for-collapse {
    padding-top: 5px;
    padding-bottom: 5px;
}

.box.card .card-body .collapse-short-card-body-filler {
    padding-top: 10px;
    padding-bottom: 10px;
}

.card .card-body.card-body-tight,
.box-card-body-tight-spacing {
    padding: 10px 15px;
}

.box.card .card-header {
    background-color: white;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 18px;
}

.box.card .card-header, .card-header-title {
    font-size: 17px;
    font-weight: bold;
}

/* These headers were <div>/<p> before being promoted to real headings, so they
   need line-height and margins reset to the body defaults they used to inherit —
   Bootstrap's heading reset (line-height 1.2) would otherwise shrink them. */
.box.card .card-header, h2.card-header-title, h3.card-header-title {
    margin: 0;
    line-height: inherit;
}

.card-header-title h2 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0 0 1rem;
}

.box.card .card-header.card-header-no-style {
    font-size: inherit;
    font-weight: inherit;
}

.card-header-navy, .box-navy {
    background: var(--navy) !important;
    color: white;
}

.card.under-card .card-header, .card.under-card {
    background-color: transparent;
}
.card.under-card .card-header {
    border-bottom: 0;
}

.card.under-card .card-body {
    border-radius: 0.75em;
    background: white;
    border-top: 1px solid rgba(0,0,0,.125);
    border-bottom: 0;
}

.card.under-card.filled-under-card {
    background-color: var(--bg-page) !important;
    border: 0;
}

.card.under-card.filled-under-card {
    background-color: var(--bg-page) !important;
}

.card.under-card.filled-under-card .card-body {
    border: 1px solid rgba(0, 0, 0, .125);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    box-shadow: 0 0 6px 0px rgba(0, 0, 0, 0.1);
}


.card-image {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0 !important;
    padding-bottom: 56.25% !important;
    position: relative;
}

.card-image.card-image-banner {
    padding-bottom: 15% !important;
}

.box.card .card-image.card-header {
    border-bottom: 1px solid #ddd;
    background-position: center;
    background-size: cover;
}

.box.card .card-image:last-child {
    border-radius: 0.61em;
}

.box.card .card-image:not(:last-child) {
    border-bottom: 0 !important;
}

.box.card .card-image:first-child,
.box.card .card-img-top {
    border-top-left-radius: 0.61em;
    border-top-right-radius: 0.61em;
}

.card-borderless, .card-borderless .card-body, .card-borderless .card-header, .card-borderless .card-footer {
    border: 0 !important;
}

.card-image-text {
    padding: 25px 0 25px 0;
    text-align: left;
    font-size: 40px;
    font-weight: 900;
    color: white;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .card-image-text {
        font-size: 30px;
    }
}

@media (min-width: 992px) and (max-width: 1400px) {
    .card-image-text {
        font-size: 30px;
    }
}

.card-image-text-top {
    bottom: inherit;
    top: 0px;
    border-radius: 0.25em 0.25em 0 0;
}

.card-footer-navy, .card-header-navy {
    background: var(--navy) !important;
    color: white !important;
}

.card-footer-navy:last-child {
    border-radius: 0 0 calc(.75rem - 1px) calc(.75rem - 1px)
}

.card-rounded {
    border-radius: 0.75em;
}

.slim-card-header-image {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
    font-size: 20px;
    border-radius: .66em;
    background-size: 110px; /* quite like this */
    background-position-y: center;
    background-position-x: right;
    background-repeat: no-repeat;
}

.slim-card-header-image-title {
    font-weight: bold;
    color: var(--navy) !important;   
}

.slim-card-header-image-title.text-white {
    color: white !important;
}

.slim-card-header-image-intro {
    border: 1px solid #ccc;
    background-color: white !important;
}

.slim-card-header-image-intro .slim-card-header-image-title {
  color: var(--navy); 
}

.mods-collapse-sub-pane {
    padding-left: 1em;   
    margin-left: .15em;   
    border-left: 2px dotted #eee;
}

.mods-collapse-sub-pane .slim-card-header-image {
    height: 60px;
    line-height: 60px;
    
}

.modal-header {
    font-size: 17px;
    font-weight: bold;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 18px;
}

.modal_x {
    right: 8px;
    top: 5px;
}

.box.card .card-header .box-top-controls {
    color: var(--navy);
}

.box.card .box-top-controls {
    top: inherit;
}

.box.card.invisible-card,
.box.card.invisible-card .card-header {
    background-color: transparent;
    border: 0;
}

.box-top-controls .btn-secondary {
    top: -32px;
}

.box-bottom-controls .btn-secondary {
    top: 24px;
    right: -15px;
}

@media (min-width: 992px) {
    #sidebar, #sidebar-whiter, #sidebar-inner, .sidebar-menu-item {
        background-color: transparent;
    }
}

.sidebar-menu-item {
    font-weight: normal;
}

.sidebar-menu-item.active {
    background-color: #f0efea;
    border-left-color: #c85021;
    color: inherit;
    font-weight: bold;
}

/* The active row keeps its own bar when hovered: it wins on specificity today,
   but only by sitting later in the file than the hover rule, so say it here. */
.sidebar-menu-item.active:hover {
    background-color: #f0efea;
    border-left-color: #c85021;
    color: inherit;
    font-weight: bold;
}

.box-bottom-controls {
    position: inherit;
    right: inherit;
    bottom: inherit;
    float: right;
}

.navbar-nav .dropdown-menu {
    position: absolute;
}

.navbar.fixed-top {
    z-index: 1029;
    height: 60px;
}

#stickies-box {
    margin-top: inherit !important;
    width: 100% !important;
}

#main-content {
    top: 60px;
}

#main-wrapper {
    display: flex;
    flex-direction: row;
    max-width: 1500px;
    margin: auto
}

#main-wrapper-primary {
    margin-top: 85px;
    width: 100%;
}

@media (min-width: 992px) {
    #main-wrapper-primary {
        width: calc(100% - 190px);
    }
}

.sticky-msg {
    margin-left: auto;
    position: relative;
    z-index: 20
}

#main-wrapper-primary {
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 70px;
}

#stickies-box {
    margin-bottom: 40px !important;
}

@media (max-width: 991.98px) {
    #main-wrapper-primary {
        padding-left: 15px;
        padding-right: 15px;
    }

    #sidebar {
        display: none;
    }

    #sidebar.open {
        display: block !important;
    }
}

#header-top-page-hider {
    display: none;
}

#sidebar {
    z-index: 9;
    top: 60px;
    position: relative;
}

@media (max-width: 991.98px) {
    #sidebar.open {
        margin-top: 0;
    }
}

#header-menu {
    z-index: 1031;
    border: 0;
    top: 5px;
    left: 10px;
    padding: 0;
    height: 48px;
    width: 55px;
}

#header-menu .fa-bars {
    left: -1px;
}

/* The site header's burger floated over the bar on `position: fixed`, which put
   its icon a couple of pixels off the React TopBar's, and it was the only
   control up here still wearing Bootstrap's button chrome: a grey hover fill and
   a focus glow around its 55x48 rounded box. closeMobileMenu() sends focus back
   to it, so after a tap that glow stayed on screen and the phone bar read as a
   button where React shows a bare icon.

   Sitting it in the header's flex row instead lines it up for free — the
   navbar's own 1rem padding is the same gutter the React TopBar uses, and the
   row centres it vertically. ::after keeps the old touch target — 55x47 —
   without drawing a box, and the focus ring is left to :focus-visible, so only
   keyboard users see it. Scoped to #navbar-mw: the preview shell's own
   #header-menu sits outside the bar and keeps its positioning. */
#navbar-mw #header-menu {
    position: relative;
    display: flex;
    align-items: center;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
}

#navbar-mw #header-menu::after {
    content: "";
    position: absolute;
    inset: -11px -12px;
}

/* line-height so the button hugs the 25px glyph, giving the same box — and so
   the same focus ring — as the React burger. */
#navbar-mw #header-menu .fa-bars {
    left: 0;
    line-height: 1;
}

/* Bootstrap fills .btn with #D1D4E0 and darkens it to #212529 on hover, which
   is what made this read as a button. #6d7085 is the React shell's
   --color-sl-secondary-text, the colour its header icons lighten to. */
#navbar-mw #header-menu:not(:disabled):hover {
    background-color: transparent;
    color: #6d7085;
}

#navbar-mw #header-menu:focus {
    box-shadow: none;
}

/* --blue-2 is the same #1780AB the React shell focuses everything with, so the
   ring is the one a keyboard user already knows from the SPA. */
#navbar-mw #header-menu:focus-visible {
    outline: 2px solid var(--blue-2);
    outline-offset: 2px;
}

.navbar.bg-light {
    background-color: white !important;
    border-bottom: 1px solid #dfdfdf;
}

.bg-dark {
    background-color: var(--navy) !important;
}

.btn-selector:not(.active) {
    border: 1px solid #dfdfdf;
}

@media (min-width: 992px) {
    .affix-lg {
        top: 80px
    }
}

.achievements .ach-cont {
    display: table;
    width: 100%
}

.achievements .ach-row {
    display: table-row
}

.achievements .ach-cell {
    display: table-cell;
    width: 55px;
    height: 60px;
    padding-bottom: 7px;
    position: relative;
}

.achievements .ach-circle {
    border-radius: 50%;
    text-align: center;
}

.achievements .steps .ach-circle:before {
    color: #FBCB00;
    font-family: 'Font Awesome 5 Pro';
    content: '\f0a3';
    font-weight: 900;
    position: absolute;
    font-size: 45px;
    top: -13px;
    margin-left: -22px;
}

.achievements .study .ach-circle:before {
    color: #FBCB00;
    font-family: 'Font Awesome 5 Pro';
    content: '\f111';
    font-weight: 900;
    position: absolute;
    font-size: 40px;
    top: -10px;
    margin-left: -20px;
}

.achievements .fbs .ach-circle:before {
    color: #FBCB00;
    font-family: 'Font Awesome 5 Pro';
    content: '\f004';
    font-weight: 900;
    position: absolute;
    font-size: 45px;
    top: -13px;
    margin-left: -23px;
}

.achievements .ach-count {
    width: 100%;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    top: 10px;
    color: #5E450E;
    font-weight: 900;
    font-size: 18px;
}

.achievements .ach-sz-xl .ach-count {
    font-size: 55px;
    margin-top: 23px;
}

.achievements .ach-sz-xl .ach-cell {
    height: 155px;
}

.achievements .ach-sz-xl .ach-descr {
    font-size: 24px;
    margin-top: 10px;
}

.achievements .ach-count.supa-count {
    font-size: 16px;
    top: 11px;
}

.achievements .ach-descr {
    font-weight: bold;
    white-space: pre-line;
    line-height: 1.3;
    padding-left: 5px;
    vertical-align: middle;
    top: -15px;
    position: relative;
    display: block;
}

.achievements .ach-sz-xl .ach-cell,
.achievements .ach-sz-xl .ach-descr {
    display: block;
    text-align: center;
    width: 100%;
}

.achievements .ach-sz-xl .ach-row {
    display: block
}

.achievements .ach-sz-xl .ach-circle {
    margin: auto;
}

.achievements .ach-sz-xl .ach-descr {
    padding-left: 0;
    padding-top: 15px;
}

.achievements .ach-sz-xl .ach-cell.study svg {
    margin-top: -7px;
}

.achievements .ach-sz-xl .ach-cell.study .ach-count {
    top: 15px;
}

@media (min-width: 992px) and (max-width: 1229px) {
    .achievements .ach-cell, .achievements .ach-descr {
        display: block;
        text-align: center;
        width: 100%;
    }

    .achievements .ach-row {
        display: block
    }

    .achievements .ach-circle {
        margin: auto;
    }

    .achievements .ach-descr {
        padding-left: 0;
        padding-top: 15px;
    }

    .achievements .ach-cell.study svg {
        margin-top: -7px;
    }

    .achievements .ach-cell.study .ach-count {
        top: 15px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .col-md-6 .achievements .ach-cell, .col-md-6 .achievements .ach-descr {
        display: block;
        text-align: center;
        width: 100%;
    }

    .col-md-6 .achievements .col-sm-4 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-md-6 .achievements .ach-row {
        display: block
    }

    .col-md-6 .achievements .ach-circle {
        margin: auto;
    }

    .col-md-6 .achievements .ach-descr {
        padding-left: 0;
        padding-top: 15px;
    }

    .col-md-6 .achievements .ach-cell.study svg {
        margin-top: -7px;
    }

    .col-md-6 .achievements .ach-cell.study .ach-count {
        top: 15px;
    }
}

.achievements svg {
    margin-top: -13px;
}

@media (max-width: 576px) {
    .achievements .ach-descr {
        padding-bottom: 15px;
    }

    .achievements .ach-descr.study {
        padding-bottom: 0px;
    }
}

.achievements.centered {
    text-align: center;
}

.achievements.centered .ach-row,
.achievements.centered .ach-cell {
    display: block;
    width: 100%;
}

.achievements.centered .ach-cell {
    margin-bottom: 15px;
}

.achievements.centered .ach-descr {
    padding: 0;
    font-size: 125%;
}

.achievements.centered .col-sm-4,
.achievements.centered .col-sm-6 {
    max-width: none !important;
}

.achievements .ach-row.link:hover .ach-descr {
    color: #767DA2;
    margin-top: -2px;
}

.achievements .ach-descr {
    transition: color 0.15s ease-in-out, margin 0.15s ease;
}

.show-on-overlay {
    display: none;
}

.elem-overlay .show-on-overlay {
    display: inherit;
}

.fake-input {
    border: 1px solid #eee !important;
    background-color: #fff !important;
    border-radius: 15px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
}

.task-check:before,
.task-round:before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 600;
    margin-left: 5px;
    font-size: 80%;
    content: '\f00c';
    position: absolute;
    margin-left: -20px;
    margin-top: 3px;
}

.task-round:before {
    content: '\f01e';
}

.task-check,
.task-round {
    margin-left: 25px;
}

.task-check.hide-task-heading:before {
    display: none;
}

.task-check.hide-task-heading {
    margin-left: 5px;
}


.task-check .task-check:before,
.task-round .task-round:before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f111';
    font-weight: 300;
    font-size: 6px;
    margin-top: 7px;
    margin-left: -15px;
}

.task-check .task-round:before {
    content: '\f01e';
}

.task-check .task-check,
.task-round .task-round {
    margin-left: 16px;
}

.font-size-1rem, .font-size-1rem .sl-title {
    font-size: 1rem !important;
}

.navbar-icon-hider .icon {
    display: none;
}

@media (max-width: 520px) {
    .navbar-icon-hider .icon {
        display: inline;
    }

    .navbar-icon-hider .label {
        display: none
    }
}

.progress-counts-display {
    width: 55px;
    text-align: right;
    font-size: 0.8rem;
    color: #aaa;
    padding-right: 6px;
    position: relative;
    top: -3px;
}

.progress-bar-display .progress {
    background-color: #F0EFEA;
}

.progress-display {
    display: table-cell;
    min-width: 140px; /* counts + display + 5px */
    width: 40%;
}

.plank {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 10px 15px;
    background-color: white;
    z-index: 2;
    position: relative;
}

.plank[data-node-type="s"] {
    background-color: var(--bg-page)
}

.plank-outer:not(:first-child) {
    margin-top: 20px;
    position: relative;
}

.plank-outer:not(:first-child) .plank-spout {
    position: absolute;
    border-left: 1px solid #ddd;
    height: 60px;
    top: -35px;
    z-index: 1;
    margin-left: -2%;
    border-bottom: 1px solid #ddd;
    width: 30px;
    border-radius: 2px;
}

@media (max-width: 650px) {
    .plank-spout {
        border: 0 !important;
        left: 50%;
    }

    .plank-outer:not(:first-child) .plank-spout:before {
        content: '\f175';
        font-family: 'Font Awesome 5 Pro';
        top: 14px;
        position: relative;
        left: -5px;
        color: #bbb;
        font-weight: 300;
    }

    .plank-outer {
        padding-left: 0 !important;
    }
}

.sticky-note-div {
    margin-bottom: 25px;
}

.sticky-note {
    margin-bottom: 15px;
    padding: 15px 0px 20px 20px;
    background: #FFCC00;
    position: relative;
    width: calc(100% - 26px);
    border-radius: 0.75em 0em 0em 0.75em;
    overflow-wrap: anywhere;
}

.sticky-note:after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    height: calc(100% - 26px);
    border-width: 13px;
    border-style: solid;
    border-color: #FFCC00;
    border-top-right-radius: 0.75em;
}

.sticky-note:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 100%;
    border-width: 26px 26px 0 0;
    border-style: solid;
    border-color: #f2b114 transparent;
}

.sticky-note .sticky-note-header[aria-expanded="true"] .sticky-note-summary {
    display: none;
}

.sticky-note.sticky-note-grey {
    background: #dedede;
}

.sticky-note.sticky-note-grey:after {
    border-color: #dedede;
}

.sticky-note.sticky-note-grey:before {
    border-color: #ccc transparent;
}

/* Scoped to toggling headers only: previews rendered without a body carry no
   collapse target, so the expand/collapse icon would promise a control that
   isn't there (WCAG 1.3.1). */
.sticky-note-header[aria-expanded] .sticky-note-group-name:before {
    content: '\f146';
    font-family: 'Font Awesome 5 Pro';
    margin-right: 5px;
    font-weight: 300;
    font-size: 75%;
    top: -1px;
    position: relative;
}

.sticky-note-header[aria-expanded="false"] .sticky-note-group-name:before {
    content: '\f0fe';
}

.sticky-note a {
    color: var(--navy);
}

#sticky-notes-bay[data-loaded="true"]:not(:empty) + .tips-sticky-note {
    margin-top: -10px;
}

.pseudoFullStop::after {
    color: var(--navy);
    content: '.'
}

.nav-tabs > .nav-item {
    margin-right: 5px;
}

.nav-pills .nav-link.active {
    background-color: var(--blue);
}

.nav-pills.nav-pills-dark .nav-link.active {
    background-color: var(--navy)
}

.nav-pills .nav-link {
    border-radius: 15px
}

.nav-pills.nav-pills-outline .nav-link {
    border: 1px solid #eee;
    transition: background-color 0.15s ease-in-out;
}
.nav-pills.nav-pills-outline.nav-pills-dark .nav-link.active {
    border: 1px solid #474C68
}

.nav-pills.nav-pills-outline {
    gap: 5px;
}
.nav-pills.nav-pills-dark .nav-link:not(.active) {
    color: var(--navy);
}

.nav-pills.nav-pills-outline.nav-pills-hover .nav-link:hover {
    background-color: #eee;
}

.nav-pills.nav-pills-center .nav-link {
    align-items: center;
    display: flex;
    justify-content: center;
}

@media (max-width: 576px) {
    .nav.nav-pills.nav-sm-full-width {
        display:block;
    }
    .nav.nav-pills.nav-sm-full-width .nav-link + .nav-link {
        margin-top: 10px;
    }
}

.nav-pills.nav-pills-showhide-labels.nav-pills-toggle-hide .nav-link.active:after {
    content: "\f0d8";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    margin-left: 5px;
}

.nav-pills.nav-pills-toggle-hide:not([data-showing-tabs="true"]) .nav-link {
    background-color: var(--blue);
    color: white;
    margin-right: 10px;
}


.nav-pills.nav-pills-showhide-labels .nav-link[data-obj-mc="v"]:not(.active) .navpill-object-label:before {
    content: "Watch model video " attr(data-model-count) "";
}

.nav-pills.nav-pills-showhide-labels .nav-link[data-obj-mc="m"]:not(.active) .navpill-object-label:before {
    content: "Read model article " attr(data-model-count) "";
}

.nav-pills.nav-pills-showhide-labels.nav-pills-single-model .nav-link.active[data-obj-mc="v"] .navpill-object-label:before {
    content: "Hide model video " attr(data-model-count) "";
}

.nav-pills.nav-pills-showhide-labels.nav-pills-single-model .nav-link.active[data-obj-mc="m"] .navpill-object-label:before {
    content: "Hide model article " attr(data-model-count) "";
}

.nav-pills.nav-pills-showhide-labels .nav-link.active[data-obj-mc="v"] .navpill-object-label:before {
    content: "Model video " attr(data-model-count) "";
}

.nav-pills.nav-pills-showhide-labels .nav-link.active[data-obj-mc="m"] .navpill-object-label:before {
    content: "Model article " attr(data-model-count) "";
}

.nav-pills:not(.nav-pills-showhide-labels) .nav-link[data-obj-mc="v"] .navpill-object-label:before {
    content: "Model video " attr(data-model-count) "";
}

.nav-pills:not(.nav-pills-showhide-labels) .nav-link[data-obj-mc="m"] .navpill-object-label:before {
    content: "Model article " attr(data-model-count) "";
}

.nav-model-switcher {
    align-items: stretch;
}

.nav-model-switcher .nav-item {
    flex: 0 0 calc(33.3% - 5px); /* Do not grow, do not shrink, base width 33.3% */
    max-width: calc(33.3% - 5px); /* Ensure they don't grow beyond 33.3% */
}

.nav-model-switcher .nav-link {
    width: 100%; /* Make the link fill the entire nav-item */
    text-align: center; /* Center the text */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
}

.nav-model-switcher .nav-link .content-icon {
    padding-right: 17px;
    top: 1px;
}

@media (max-width: 700px) {
    .nav-model-switcher .nav-item {
        flex: 0 0 calc(50% - 5px); /* Do not grow, do not shrink, base width 50% */
        max-width: calc(50% - 5px); /* Ensure they don't grow beyond 50% */
    }
}

@media (max-width: 500px) {
    .nav-model-switcher .nav-item {
        flex: 0 0 100%; /* Do not grow, do not shrink, base width 100% */
        max-width: 100%; /* Ensure they don't grow beyond 100% */
    }
}

.ui-tooltip {
    display: none !important;
}

@media (max-width: 576px) {
    .scaredycat-outer {
        display: none
    }
}

.scaredycat-outer {
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    z-index: 10000
}

.scaredycat-container {
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.scaredycat-bounds {
    padding: 16px;
    padding-top: 15px;
    padding-bottom: 0px;
    position: absolute;
}

.scaredycat {
    width: 130px;
}

.top-nav-bunch {
    display: flex;
    align-items: center;
    gap: 24px;
    transition: margin-top 0.2s
}

/* No Bootstrap border, and the glyph is centred rather than sat on a text
   baseline. The padding is what Bootstrap's .btn hover fill needs to read as a
   pill around the label rather than gripping it, so it is set here rather than
   left to the p-0 the markup used to carry. Radius matches the React header's
   rounded-md. */
.top-nav-bunch > .btn {
    display: inline-flex;
    align-items: center;
    border: 0;
    padding: 6px 8px;
    /* Cancels the padding out of the layout box, so the hover fill overhangs the
       label without moving anything: the 24px gap still measures 24px between
       labels, the bar keeps its height, and the pills sit 8px apart. */
    margin: -6px -8px;
    border-radius: 6px;
}

/* The React header sets this label at 16px/600 (text-base font-semibold), and
   Bootstrap's btn-lg + font-weight-bold had it at 20px/700 — the same link
   noticeably heavier on one side of the crossing than the other. */
.top-nav-bunch > .btn.top-nav-dropin {
    font-size: 16px;
    font-weight: 600;
}

/* The theme leaves .btn:focus with no visible ring, so tabbing through these
   showed nothing at all while the same three in React draw one. Same ring as
   #header-menu above and as the React header: --blue-2 is the #1780AB the SPA
   focuses everything with. */
#navbar-mw .top-nav-bunch > .btn:focus-visible {
    outline: 2px solid var(--blue-2);
    outline-offset: 2px;
}

.top-nav-bunch.scaredycat-passerby {
    margin-top: -100px !important;
}

.story-card[data-track-umo] > .card-header, .box.card.faux-story-card > .card-header {
    font-size: 20px
}

.story-card.is_complete .card-header > span:after {
    color: var(--blue);
    font-family: 'Font Awesome 5 Pro';
    font-weight: 600;
    content: "\f00c";
    margin-left: 10px;
    font-size: 17px;
}

.story-card .card-header + .card-body {
    padding-top: 7px !important
}

.story-card {
    transition: margin-bottom 0.2s ease-in-out;
}

.story-card-collapsed {
    margin-bottom: 12px;
}

.story-card .unhide-button {
    display: none;
}

.story-card.story-card-collapsed .unhide-button {
    display: block;
    padding: 0.2rem 0.5rem 0.2rem 0.5rem !important;
    position: relative;
    left: 12px;
    pointer-events: none;
    transition: color 0.2s ease-in-out;
}

.story-card .card-header:hover .unhide-button {
    color: var(--blue) !important
}

.label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.skip-to-main-content-link {
    transform: translateY(-200%);
    color: #000;
    display: flex;
    z-index: 999;
    text-align: center;
    position: absolute;
    height: 40px;
    background-color: #FFF;
    border: 1px black solid;
    top: 10px;
    right: 35%;
    left: 35%;
    width: 28%;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.skip-to-main-content-link:focus {
    transform: translateY(0%);
}

.table {
    display: table;
    border-collapse: collapse;
    text-indent: initial;
    border-spacing: 2px;
}

.table-tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    box-sizing: border-box
}

.table-td {
    display: table-cell;
    vertical-align: inherit;
}

#ntf_launcher.has_surveys:before {
    color: white;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 600;
    content: "\f681";
    position: absolute;
    top: 8px;
    left: 8px;
    line-height: 1;
    font-size: 9px;
}

.clip:not(:empty) {
    background: rgba(0, 0, 0, 0.5);
    color: white !important;
    padding: 2px 5px;
    border-radius: 5px;
    position: absolute;
    top: -20px;
    right: 0px;
    width: 145px;
}
.clip-static .clip:not(:empty), .clip-static.clip:not(:empty) {
    position: inherit;
    top: inherit;
    right: inherit;
}

.article-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


@keyframes moveUpDown {
    0%, 100% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(-5px);
    }
}

.move-up-and-down {
    text-align: center;
    animation: moveUpDown 3s infinite;
}

#scroll-up-message,
#scroll-down-message {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    transition: opacity 0.3s ease;
    display: block;
    text-align: center;    
    z-index: 1030;
}

#scroll-down-message {
    bottom: 20px;
}

#scroll-up-message {
    top: 70px;
}
    
.lead-menu .lead-menu-title {
    display: block;
    width: max-content;
    margin: auto;
}

.lead-menu .lead-menu-item {
    display: block;
    margin: auto;
}

.lead-menu .lead-menu-item:hover {
    text-decoration: none;
}

.lead-menu.lead-menu-open .lead-menu-item {
    text-align: left;
}

.lead-menu .lead-menu-btn-row .lead-menu-btn {
    height: 77px;
}

.lead-menu.lead-menu-collapsed .lead-menu-item {
    display: none
}

.lead-menu.lead-menu-collapsed .lead-menu-item.lead-menu-item-active {
    display: block;
    font-size: 80%;
    cursor: default;
    text-decoration: none !important;
}

.lead-menu.lead-menu-open .lead-menu-btn-row .lead-menu-item.lead-menu-item-active {
    display: none;
}

.lead-menu.lead-menu-open .lead-menu-item.lead-menu-item-active {
    font-weight: bold;
}

.lead-menu .lead-menu-item.lead-menu-item-active:before {
    content: "•";
    position: relative;
    left: -5px;
    text-decoration: none;
    color: #C85021;
}

.lead-menu .lead-menu-item:not(.lead-menu-item-active):before {
    content: ">" / "";
    position: relative;
    left: -5px;
    text-decoration: none;
    color: #474C6844;
}

.lead-menu .lead-menu-caret:before {
    content: "\f0d8";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 85%;
    top: -1px;
    right: -2px;
    position: relative;
}

.lead-menu.lead-menu-collapsed .lead-menu-caret:before {
    content: "\f0d7";
}

.lead-menu .lead-menu-btn {
    width: 33.3%
}

.lead-menu.lead-menu-open .lead-menu-btn-row .lead-menu-box {
    width: 100%;
}
.lead-menu {
    vertical-align: top !important;
}

.lead-menu.lead-menu-open .btn:not(:disabled).lead-menu-btn.active:hover {
    background-color: var(--navy);
}

.lead-menu.lead-menu-open .lead-menu-title:hover {
    cursor: pointer;
    font-weight: bold;
}

.lead-menu.lead-menu-open .lead-menu-endpoints {
    position: absolute;
    width: 100%;
    background-color: white;
    color: black;
    z-index: 1000000000000;
    margin-top: 11px;
    padding: 20px;
    left: 0;
    border-bottom: 1px solid #ddd;
    min-height: 150px;
}

.lead-menu.lead-menu-open .lead-menu-endpointz {
    width: max-content;
    margin: auto;
}

.lead-menu.lead-menu-open .lead-menu-btn:first-child .lead-menu-endpoints {
    border-left: 1px solid #ddd;    
}
.lead-menu.lead-menu-open .lead-menu-btn:last-child .lead-menu-endpoints {
    border-right: 1px solid #ddd;    
}

.lead-menu.lead-menu-open .lead-menu-btn {
    border-bottom-right-radius:  0;
    border-bottom-left-radius:  0;
}

.lead-menu .lead-menu-endpoints-row .lead-menu-box {
    height: 100%;
}

.lead-menu.lead-menu-collapsed .lead-menu-endpoints-row  {
    display: none
}

.lead-menu.lead-menu-open .lead-menu-btn:hover {
    background-color: white;
}

.lead-menu {
    z-index: 15;
}

.lead-menu.lead-menu-open {
    z-index: 1005;
}

.lead-menu-backdrop {
    z-index: 1002 !important;
    background: rgba(0,0,0, 0.3);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(3.5px);
}

@media (min-width: 769px) {
    .lead-menu.lead-menu-open .lead-menu-endpoints-row  {
        position: absolute;
        top: 77px;
    }
    
    .lead-menu.lead-menu-collapsed .lead-menu-btn-row .lead-menu-btn:first-child {
        border-bottom-left-radius: 15px;
    }
    .lead-menu.lead-menu-collapsed .lead-menu-btn-row .lead-menu-btn:last-child {
        border-bottom-right-radius: 15px;    
    }
    .lead-menu.lead-menu-open .lead-menu-endpoints-row .lead-menu-btn:first-child {
        border-bottom-left-radius: 15px;
    }
    .lead-menu.lead-menu-open .lead-menu-endpoints-row .lead-menu-btn:last-child {
        border-bottom-right-radius: 15px;    
    }
    .lead-menu .lead-menu-mini-title {
        display: none;
    }    
}

@media (max-width: 768px) {
    .lead-menu.lead-menu-open .lead-menu-item {
        text-align: center;
    }

    .lead-menu .lead-menu-item:not(.lead-menu-item-active):before {
        content: ''
    }
    
    .lead-menu.lead-menu-open {
        position: fixed;
        top: 0;
        left: 0;
        padding: 10px 30px;
        height: 100%;
        overflow-y: auto;
    }
    
    .lead-menu .lead-menu-mini-title {
        font-size: 110%;
    }

    .lead-menu.lead-menu-open .lead-menu-btn-row .lead-menu-btn {
        display: none !important;
    }
    
    .lead-menu.lead-menu-collapsed .lead-menu-btn:not(.active) {
        display: none
    }
    
    .lead-menu .btn-group {
        display: block;
    }
    .lead-menu .lead-menu-btn {
        width: 100%;
    }
    .lead-menu.lead-menu-collapsed .lead-menu-btn.active {
        border-top-right-radius:  15px;
        border-bottom-right-radius:  15px;
        border-top-left-radius:  15px;
        border-bottom-left-radius:  15px;
    }
    .lead-menu.lead-menu-open .lead-menu-btn {
        border-radius: 0;
    }
    .lead-menu.lead-menu-open .lead-menu-btn:first-child {
        border-top-right-radius:  15px;
        border-bottom-right-radius:  0;
        border-top-left-radius:  15px;
        border-bottom-left-radius:  0;
    }
    .lead-menu.lead-menu-open .lead-menu-btn:last-child {
        border-top-right-radius:  0;
        border-bottom-right-radius:  15px;
        border-top-left-radius:  0;
        border-bottom-left-radius:  15px;
    }
    
    /* moved */
    .lead-menu.lead-menu-open .btn:not(:disabled).lead-menu-btn:hover {
        cursor: inherit;
        background-color: white;
    }
    .lead-menu .lead-menu-btn.active .lead-menu-item {
        color: white;
    }
}

.btn-group>.btn-group:not(:first-child), .btn-group>.lead-menu-btn:not(:first-child) {
    margin-left: -1px
}

.btn-group-vertical>.lead-menu-btn, .btn-group>.lead-menu-btn {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.lead-menu-btn:not(.btn-selector.active) {
    padding: 10px 3px;
    background-color: white;
    color: var(--navy);
    border: 1px solid #dfdfdf;
    font-size: 1.25rem;
    line-height: 1.5;
    display: inline-block;
    font-weight: 400;
    text-align: center;
}

a#reset_button {
    &:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
        border-radius: 5px;
    }

    &:active {
        outline: none;
        box-shadow: none;
    }
}

.unit-explainer-text {
    display: none
}

@media (max-width: 890px) {
    .unit-explainer, .unit-explainer-header {
        display: none
    }
}

/* video */

/*https://stackoverflow.com/questions/28153166/android-chrome-chromecast-icon-over-html5-video-position*/
video::-internal-media-controls-overlay-cast-button {
    display: none;
}

.video-grid {
    display: grid;
    column-gap: 18px;
    row-gap: 30px;
}

.video-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.video-item {
    background-color: #fff;
    margin: auto;
    max-width: 400px;
    position: relative; /* POSS ADDITION IN VIDEO LIBRARY */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.video-item .video-item-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.video-item .video-item-inner-ready {
    &:focus, &:active {
        outline: none;
    }

    &:focus {
        box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
    }

    &:active {
        box-shadow: none;
    }
}

.video-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 4%;
    position: relative;
    background-image:
        url('/static/images/video-thumb-placeholder-transparent.png'),
        radial-gradient(circle, #FFF 0%, var(--bg-surface) 80%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain, cover;
}

.video-thumb-media {
    border-radius: 0;
}

.video-thumb video, .video-thumb img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-info {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    width: 100%;
    height: 80px;
    word-break: break-word;
}

.video-grid-show-select .video-info {
    height: 80px;
}

@media only screen and (max-width: 1440px) and (min-width: 1250px) {
    .video-grid-show-select .video-info {
        min-height: 97px;
    }
}

.video-title {
    font-size: 16px;
    margin-bottom: 4px;
}

.video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
}

.video-duration-hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 200ms, opacity 200ms linear;
}

.video-duration-visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 100ms linear;
}

.video-display-header-row {
    display: flex;
    justify-content: space-between;
    align-items: top;    
}

.video-display-header-row .video-display-title-div {
    flex-grow: 1;
}

.video-display-header-row .video-display-title {    
    font-weight: bold;
    font-size: 1.7rem;
    line-height: 2.1rem;
    word-break: break-word;
}


.video-display-header-row .video-display-buttons {
    display: flex;
    gap: 10px; /* Adjust the gap between buttons as needed */
    align-items: flex-start; 
}

@media (max-width: 600px) {
    .video-display-header-row {
        flex-direction: column;
    }

    .video-display-buttons, .video-display-title {
        width: 100%;
    }
            
    .video-display-buttons {
        justify-content: end;
        margin-top: 5px;
    }
}

.order-list-item-ghost {
    opacity: 0.5;
}

.order-list-item {
    cursor: pointer;
    overflow-wrap: anywhere;
}

.fa-stack-1-5x {
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: 1.5em;
    top: 3px;
}

.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}


.ptmod {
    .current-section .current-dark-box {
        background: var(--navy);
        color: white;            
    }

    .subsection-title {
        font-size: 1.25em;
        line-height: 1.2;
        margin-bottom: 10px;
    }
    
    .section-duration {
        float: right;
        position: relative;
        top: -2px;
    }
    
    .batch-title {
        font-size: 1.05em;
        line-height: 1.2;
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    .batch {
        margin-bottom: 1rem;
    }
    
    .batch-line:not(.bump-line) {
        margin-bottom: 10px;
    }
    
    .batch-line-text {
        padding-right: 6px;
    }

    .comment-btn {
        position: absolute;
        display: none;
    }
    
    [data-has-comment="false"] .batch-line-text + .comment-btn {
        display: inline-block;
    }
    
    [data-has-comment="true"] .comment-btn {
        display: none
    }

    .section.completed-section .section-title:after {
        content: '\f00c';
        font-family: 'Font Awesome 5 Pro';
        color: var(--blue);
        margin-left: 5px;
    }
    
    .section.completed-section.completed-section-with-errors .section-title:after {
        content: '\f071';
        color: #C85021;
    }

    .choice-line .form-check-input:checked + label {
        font-weight: bold;
    }
    
    .choice-line[data-input-given="true"] .choice-line-select-label {
        display: none
    }
    
    .choice-line:not(.bump-line) {
        border-left: 5px solid #C85021;
        padding-left: 13px;
        margin-left: 3px;
    }
    .choice-line:not(.bump-line)[data-input-given="true"] {
        border-left: 5px solid #34b4e9;
    }
            
    .subsection-article {
        border-left: 2px solid #eee;
        padding-left: 30px;
    }
    
    .path-btn-selector.disabled:hover {
        cursor: not-allowed;
        background-color: white;
    }
    
    #path-btn-selector-nav .path-btn-selector .check-square-icon:before {
        content: '\f0c8'
    }
    #path-btn-selector-nav .path-btn-selector.active .check-square-icon:before {
        content: '\f14a'
    }
    
    .batch-blurb {
        margin-bottom: 20px;
    }

    .batch-blurb.batch-blurb-highlight {
        border-radius: 0.75em;
        background-color: #DBF1FB;
        padding: 1rem;          
    }
    
    .line-highlight {
        font-weight: bold;
    }
}

.sl-h-complete.sl-h-orange .sl-track-completestatus:before {
    content: "Completed with errors";
}

div.bump-line {
    position: relative;            
    margin: 0;
    padding-bottom: 1em;
    padding-left: 20px;
}

div.bump-line.bump-line-connected:before {
    background-color: var(--bg-surface);
    width: 2px;
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 5px;
}

/* Small bullets for normal list items */
div.bump-line::after {
    content: '';
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23dedede' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    left: 0;
    top: 6px;
    width: 12px;
    height: 12px;
}

div.bump-line.has-error::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23EB642D' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E");            
}

/* Start the line further down on the first list item */
div.bump-line:first-child:before {
    top: 15px;
}

/* Stop the line short on the final list item */
div.bump-line:last-child:before {
    height: 9px;
}

div.bump-line:last-child:first-child:before {
    height: 0px;
}

.primary-and-secondary-width-container {
    display: flex;
    width: 100%;
}
.primary-and-secondary-width-container.bottom-align {
    align-items: flex-end
}
.primary-and-secondary-width-container .primary-container {
    flex: 1;
}

.flash-bumpable {
    transition: scale 0.1s linear, opacity 0.1s linear;
    scale: 1;
    opacity: 1;
}
.flash-bumpable.flashed {
    scale: 1.02;
    opacity: 0.7;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.list-group-item.primary {
    background-color: var(--blue);
    color: white;
    border-color: var(--blue);
}

.list-group.list-group-rounded {
    border-radius: .75em;
}

/* imp roadmap! */
.imp-roadmap-skip-include-toggle .btn {
    width: 50%;
}
.imp-roadmap-skip-include-toggle {
    width: 100%;
}
.imp-roadmap-skip-include-toggle .btn.active span:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f00c";
    font-size: 80%;
    margin-right: 3px;
}

.imp-roadmap-toggle-mod .sl-title {
    margin-bottom: 15px !important;
}

.imp-roadmap-min-width-action {
    min-width: 170px;
    display: block;
    text-align: right
}

.card-image-imp-roadmap-hover-div {
    border-radius: 0.61em;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00000066;
    opacity: 0;
    margin: auto;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.3s;
    padding: 25%;
    pointer-events: none;
}

.card-image:hover .card-image-imp-roadmap-hover-div {
    opacity: 1;
}

.card-image:has(.card-image-imp-roadmap-hover-div) {
    cursor: pointer;
}

.imp-roadmap-path-border {
    position: relative;
    padding-left: 15px; /* Bootstrap's pl-3 is 16px */
}

.imp-roadmap-path-border::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 10px;
    width: 2px;
    background-color: #ddd;
}


.ticklistbox-visuals {
    cursor: pointer;
    margin: 0px;
    display: inline-block;
    position: relative;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    border: 1px solid #B9B8C3;
    transition: all .2s ease;
    user-select: none;
    -webkit-user-select: none;
}
.ticklistbox-visuals:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--blue);
    transform: scale(0);
    opacity: 1;
    transition-delay: .2s;
}

.ticklist-job[data-frozen="true"] .ticklistbox-visuals,
.ticklist-job[data-frozen="true"] .ticklistbox-item-title {
    cursor: default;
}

.ticklist-job:not([data-frozen="true"]) .ticklistbox-visuals:hover {
    background-color: #eee;
}

.ticklistbox-visuals, .ticklistbox-visuals:before {
    border-radius: 35%;
}
.ticklistbox-visuals svg, .ticklistbox-visuals .ticklist-job-box-loader {
    position: absolute;
    z-index: 1;
    top: 7px;
    left: 5px;
    fill: none;
    stroke: white;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all .3s ease;
    transition-delay: .1s;
}

.ticklistbox-visuals .ticklist-job-box-loader {
    color: #aaa;
    top: 4px;
    left: 4px;
    font-size: 14px;
}

.ticklist-job[data-frozen="true"] .ticklist-box-item-title-text {
    color: #ccc;
}
.ticklist-job[data-frozen="true"] .ticklistbox-item-title .collapse-caret {
    display: none;
}


.ticklist-job[data-completed="true"] .ticklistbox-checkbox > .ticklistbox-visuals {
    border-color: var(--blue);
    background: var(--blue);
    animation: ticklistcheckanimation .6s ease;
}

.ticklist-job[data-complete-status="partially_completed"] .ticklistbox-checkbox > .ticklistbox-visuals:before {
    background: #aaa;
}

.ticklist-job[data-complete-status="partially_completed"][data-completed="true"] .ticklistbox-checkbox > .ticklistbox-visuals {
    border-color: #aaa;
    background: #aaa;
}

.ticklist-job[data-complete-status="not_completed"] .ticklistbox-checkbox > .ticklistbox-visuals:before {
    background: #C85021;
}

.ticklist-job[data-complete-status="not_completed"][data-completed="true"] .ticklistbox-checkbox > .ticklistbox-visuals {
    border-color: #C85021;
    background: #C85021;
}


.ticklist-job[data-completed="true"] .ticklistbox-checkbox > .ticklistbox-visuals svg {
    stroke-dashoffset: 0;
}

.ticklistbox-visuals svg, .ticklistbox-visuals .ticklist-job-box-loader {
    display: none
}

.ticklist-job[data-complete-status="partially_completed"] .ticklistbox-checkbox > .ticklistbox-visuals svg.svg-slash,
.ticklist-job[data-complete-status="not_completed"] .ticklistbox-checkbox > .ticklistbox-visuals svg.svg-cross,
.ticklist-job[data-complete-status="completed"] .ticklistbox-checkbox > .ticklistbox-visuals svg.svg-check,
.ticklist-job[data-loading="true"] .ticklistbox-checkbox > .ticklistbox-visuals .ticklist-job-box-loader {
    display: block;   
}

.ticklist-job[data-complete-status="partially_completed"] .ticklistbox-checkbox > .ticklistbox-visuals svg.svg-slash,
.ticklist-job[data-complete-status="not_completed"] .ticklistbox-checkbox > .ticklistbox-visuals svg.svg-cross,
.ticklist-job[data-complete-status="completed"] .ticklistbox-checkbox > .ticklistbox-visuals svg.svg-check,
.ticklist-job[data-loading="true"] .ticklistbox-checkbox > .ticklistbox-visuals .ticklist-job-box-loader {
    display: block;   
}

.ticklist-outer[data-ticklist-started="false"] [data-tap-to-start="true"] .ticklist-reveal-subject {
    display: none !important;
}

.ticklist-outer .start-ticklist-button, .ticklist-outer .ticklist-tap-to-start-text {
    display: none;
}
.ticklist-outer[data-ticklist-started="false"] [data-tap-to-start="true"] .start-ticklist-button,
.ticklist-outer[data-ticklist-started="false"] [data-tap-to-start="true"] .ticklist-tap-to-start-text {
    display: block;
}

@keyframes ticklistcheckanimation {
    50% { transform: scale(1.2);}
}

/* sso login buttons */
.sso-disabled-button {
    cursor: not-allowed;
    color: #8d9397 !important;
    
}

.ssoBrandIcon {
    width: 22px;
}

.ssoInfoText {
    color: #6D7085;
}

.ambition-expander-button.btn-primary,
.ambition-expander-button.btn-primary:hover,
.ambition-expander-button.btn-primary:focus,
.ambition-expander-button.btn-primary:active {
    border: 0 !important;
}

.btn-primary:not(.btn-orange):not(.btn-action):focus {
    background-color: inherit;
}

.btn.focus-color-white:focus {
    color: #fff !important;
}

.ambition-expander-container {
    border-radius: 15px;
    border: 1px solid #eee;
}

.ambition-sso-top-brand-icon {
    transition: opacity 0.2s ease-in-out;
}

.ambition-expander-button:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

.ambition-expander-button:not(.collapsed):hover {
    background: none !important;
}


.click-positioned-popup {
    position: absolute;
    background: rgba(30, 30, 30, 0.75);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

.tc-editor .tc-item {
    padding: 5px;
    background-color: var(--bg-page);
    border: 1px solid #ddd;
    list-style-type: none;
    border-radius: 0.61em;
}

.tc-editor .tc-item:not(:last-child) {
    margin-bottom: .5rem;
}

.invisible-tc-item.form-control {
    background: none;
    outline: none;
    display: block;
    border: 0;
    width: calc(100% - 110px);
    resize: none;
}

.kbc-button {
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    color: var(--navy);
    background: #fff;
    font-size: 110%;
    font-weight: bold;
    font-style: normal;
    margin: 0rem 0.3rem;
}

.group-session-logo {
    max-width: 300px;
    max-height: 60px;
}

.fa-beat {
    animation-name: fa-beat;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

@keyframes fa-beat {
    45% {
        transform: scale(var(--fa-beat-scale, 1.25));
    }
}

.slab-ql .ql-editor ol, .slab-ql .ql-editor ul {
    padding-left: 0;
}

.slab-ql .ql-editor.ql-blank::before {
    color: #bbb;
    left: 0;
    font-style: normal;
}

.slab-ql .ql-container {
    font-family: inherit;
}

.slab-ql .ql-editor {
    padding: 0;
    font-size: .95rem;
}

.slab-ql .ql-editor li:not(:last-of-type) {
    margin-bottom: 10px
}

.slab-ql .ql-editor li[data-list=bullet] > .ql-ui:before {
    color: var(--navy);
    scale: 0.85;  
}

.nav-tabs.slab-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 0 !important;
    color: var(--navy);
    padding-left: 0;
    padding-right: 0;
    margin-left: 15px;
    background-color: transparent;
}

.nav-tabs.slab-tabs .nav-item:first-of-type .nav-link {
    margin-left: 0;

}

.nav-tabs.slab-tabs {
    margin-bottom: 10px;  
}

.nav-tabs.slab-tabs .nav-link.active {
    border: none;
    border-bottom: 2px solid #474C68;
    font-weight: bolder;
}


.nav-tabs.slab-tabs .nav-link.disabled {
    color: #888;
}

.line-around-text-separator {
    display: flex;
    align-items: center;
    text-align: center;
}

.line-around-text-separator::before,
.line-around-text-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}

.line-around-text-separator:not(:empty)::before {
    margin-right: .25em;
}

.line-around-text-separator:not(:empty)::after {
    margin-left: .25em;
}

[data-toggle="buttons"] > label.btn.active > .data-toggle-button-icon:before {
    content: "\f14a";
    opacity: 1;
}
[data-toggle="buttons"] > label.btn > .data-toggle-button-icon:before {
    content: "\f0c8";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    position: relative;
    margin-right: 5px;
    margin-left: 5px;
    opacity: 0.5;
}

#switchGroupModalNext .buttons-hover-row {
    min-height: 40px;
    padding: .3rem .5rem;
    align-items: center;
}

#switchGroupModalNext .buttons-hover-row:hover, .buttons-hover-row:focus-within {
    background-color: var(--bg-page);
}

#switchGroupModalNext .freeze {
    opacity: 0.5;
}

@media (pointer: coarse) {
    .hide-on-touch-devices {
        display: none !important;
        pointer-events: none;
        visibility: hidden;
    }
}
@media (pointer: fine) {
    /* these are for fingers */
    #switchGroupModalNext .buttons-hover-row .buttons .nav-button {
        position: relative;
        top: -1px;
        opacity: 0;
        pointer-events: none;
    }

    #switchGroupModalNext  .buttons-hover-row:hover .buttons .nav-button,
    #switchGroupModalNext  .buttons-hover-row:focus-within .buttons .nav-button {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 500px) {
    .groupcrumbs-new .card {
        width: 100% !important;
    }
}

.groupcrumbs-v3 .groupcrumbs-v3-crumb-divider {
    display: inline-block;
}

.groupcrumbs-v3 .groupcrumbs-v3-crumb-with-divider:before {
    content: "\f105";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    color: var(--muted);
    scale: 1.1;
    margin-right: 10px;
    margin-left: 0;
}

.groupcrumbs-v3 .groupcrumbs-v3-group-name {
    margin-right: 10px;
}

.groupcrumbs-v3 .groupcrumbs-v3-crumb {
    margin-right: 10px;
    display: inline;
}

.groupcrumbs-v3 .groupcrumbs-v3-crumb-container {
    display: inline;
}

.crumb-prefix {
    white-space: nowrap;
    display: inline;
    align-items: center;
}

.crumb-prefix-icon {
    display: inline;
}

@media (max-width: 576px) {
    .groupcrumbs-v3 .groupcrumbs-v3-crumb-with-divider:before {
        margin-right: 0;
        margin-left: 0;
        content: ''
    }
    
    .groupcrumbs-v3 .groupcrumbs-v3-crumb {
        display: block;
    }

    .groupcrumbs-v3 .groupcrumbs-v3-crumb-container {
        display: block;
    }

    .crumb-prefix-icon {
        display: inline-block;
    }

}

.nav-tabs.slab-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 0 !important;
    color: var(--navy);
    padding-left: 0;
    padding-right: 0;
    margin-left: 15px;
    background-color: transparent;
}

.nav-tabs.slab-tabs .nav-item:first-of-type .nav-link {
    margin-left: 0;

}

.nav-tabs.slab-tabs {
    margin-bottom: 10px;  
}

.nav-tabs.slab-tabs .nav-link.active {
    border: none;
    border-bottom: 2px solid black;
    font-weight: bolder;
}

.group-crumbs-col-v3 {
    margin-top: -25px;
    margin-left: -15px;
    padding-left: 15px;
    padding-top: 15px;   
    padding-bottom: 15px;         
}

.crumb-bar {
    width: 5px;
    background-color: var(--blue); 
    border-radius: .25rem;
    margin-right: 0.9rem;
}

#switcher-top-menu .crumb-bar {
    margin-right: 0.7rem;
}

@keyframes crumbBarPulseGlow {
    0% {
        box-shadow: 0 0 6px 0px #34b3e900;  /* matches original */
    }
    50% {
        box-shadow: 0 0 6px 5px #34b3e987; /* brighter pulse */
    }
    100% {
        box-shadow: 0 0 6px 0px #34b3e900;  /* matches original */
    }
}

.crumb-bar.crumb-bar-animate-on-show {
    animation: crumbBarPulseGlow 2s ease-in-out 1 0.6s;            
}

@media (prefers-reduced-motion: reduce) {
    .crumb-bar.crumb-bar-animate-on-show {
        animation: none !important;
    }
}

hr.switcher-border {
    margin-top: 0;
    border-top: 0;
    position: absolute;
    width: calc(100% + 50px);
    left: -25px;

}

@media (min-width: 1510px) {
    hr.switcher-border {
        width: calc(100% + 50px);

        mask-image: linear-gradient(to right, black 0%, black calc(100% - 50px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 50px), transparent 100%);
    }
}

hr.switcher-grey-border {
    border-bottom: 1px solid #ddd;            
}

.switcher-border-container {
    height: 20px;
}    

.switcher-v2-fade-card {
    position: relative;
    overflow: hidden;
    background: transparent; /* We handle background separately */
    border: none; /* Remove border from outer card */
    padding: 0;
}

/* This is the full-size fading background card */
.switcher-v2-fade-card-mask {
    border-radius: 0.75em;
}

.switcher-v2-fade-card-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background: white;
    border: 1px solid rgba(0, 0, 0, 0.125);
    box-sizing: border-box;

    /* New gradient mask: fade only the top 80px */
    mask-image: linear-gradient(to bottom,
        black 0px,
        black 10px,
        transparent 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(to bottom,
        black 0px,
        black 10px,
        transparent 90%,
        transparent 100%
    );
}

@media (max-width: 576px) {
    .switcher-v2-fade-card {
        margin-bottom: 20px !important;
        margin-top: 10px !important;
    }
}

/* Content floats above with no fade */
.switcher-v2-fade-card-content {
    position: relative;
    z-index: 1;
    background: transparent;
}

.switcher-v2-showing, .switcher-v2-button {
    background-color: #C85021;
    border-color: #C85021 !important;
    color: white;
    padding: 0.5em;
    border-radius: 0.75em;
    position: relative;
    box-shadow: 0px 2px 8px 0px rgba(200, 80, 33, 0.24);
    transition: 
        transform 0.2s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
    cursor: pointer;
    min-height: 42px;
    top: 2px;
}

.switcher-v2-button:hover, .switcher-v2-showing:hover {
    transform: scale(1.02);
    background-color: #A94016;
    box-shadow: 0 0 10px 2px rgba(200, 80, 33, 0.5);
    color: white;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

#switcher-top-menu .switcher-v2-button {
    scale: 0.9;
}

#switcher-top-menu .switcher-v3-button {
    align-items: center;
    padding: 0.5em;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, .125) !important;
    transition: 
    transform 0.2s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
    cursor: pointer;
    height: 37px;
    top: 5px;
    overflow-y: hidden;
    margin-right: 10px;
}

#switcher-top-menu .switcher-v3-button .crumb-bar {
    height: 100%;
}

#switcher-top-menu .btn.switcher-v3-button:hover,
.btn.switcher-v3-showing:hover {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
    background: var(--bg-page)
}

.switcher-v3-button-outer {
    position: relative;
}

.switcher-v3-button.change-group-link:hover,
.switcher-v3-button.change-group-link:focus,
.switcher-v3-button-outer:hover a.switcher-v3-button,
.switcher-v3-button-outer:focus-within a.switcher-v3-button {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.switcher-v3-button-outer:focus-within {
    outline: 3px solid #1a5cff;
    outline-offset: 3px;
    border-radius: 8px;
}

.switcher-v3-button-outer:focus-within .switcher-v3-button.change-group-link {
    outline: none;
}

#switcher-top-menu .switcher-v3-button.change-group-link:focus {
    outline: 3px solid #1a5cff;
    outline-offset: 3px;
}

#switcher-top-menu .switcher-v3-button.change-group-link:focus:not(:focus-visible) {
    outline: none;
}

#switcher-top-menu .switcher-v3-button.change-group-link:focus-visible {
    outline: 3px solid #1a5cff;
    outline-offset: 3px;
}



.switcher-v2-button-vr-inner,
.switcher-v3-button-vr-inner {
    margin-left: 0.5em;
    margin-right: 0.5em;
    border-left: 1px #fff solid;
    opacity: 0.4;
    width: 1px;
    margin-top: 10%;
    margin-bottom: 10%;
}
.switcher-v3-button-vr-inner {
    border-left: 1px #aaa solid;
}

.switcher-v3-showing {
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: white;
    padding: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0,0,0,.125) !important;
}

.switcher-v3-tap-to-return-here {
    transition: color 0.3s ease;
}

.switcher-v2-group-type-display {
    font-size: .75rem;
}

.buttons-hover-row .switcher-v2-group-type-display {
    color: #8d9397;
    font-weight: 400 !important;
}

#switcher-top-menu {
    max-width: 300px;
}

#switcher-top-menu .switcher-v2-group-type-display,
#switcher-top-menu .switcher-v3-group-type-display {
    display: none;
}

#switcher-top-menu .switcher-v2-button-group-name,
#switcher-top-menu .switcher-v3-button-group-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switcher-touch-buttons .buttons:empty {
    display: none;
}

.btn-reset {
    border: inherit;
}

@media (max-width: 576px) {
    .scaredycat-outer {
        display: none
    }
  }
  
.scaredycat-outer {
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    z-index: 10000
}

.scaredycat-container {
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.scaredycat-bounds {
    padding: 16px;
    padding-top: 15px;
    padding-bottom: 0px;
    position: absolute;
}

.scaredycat {
    width: 130px;
}
  
.scaredycat-shifted .icon-slab, .scaredycat-shifted .brand-title {
    background-image: url('/static/images/ice.jpg');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: contain;
    position: relative;
    -webkit-text-stroke: 1px #4f90ab66;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2)) drop-shadow(0 0 2px rgba(41, 131, 172, 0.2)) drop-shadow(0 0 30px rgba(125, 204, 239, 0.2)) drop-shadow(0 0 30px rgba(58, 122, 155, 0.2));
}

.top-nav-bunch {
    transition: margin-top 0.2s
}

.top-nav-bunch.scaredycat-passerby {
    margin-top: -100px !important;
}

.laser-bullet {
  position: fixed;
  width: 40px;
  height: 3px;
  background: red;
  z-index: 9999;
  border-radius: 2px;
  transform-origin: left center;
  pointer-events: none;
  box-shadow: 0 0 8px red;
}

@keyframes scaredyTeasingWiggle {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(10deg); }
  20%  { transform: rotate(-10deg); }
  30%  { transform: rotate(8deg); }
  40%  { transform: rotate(-8deg); }
  50%  { transform: rotate(6deg); }
  60%  { transform: rotate(-6deg); }
  70%  { transform: rotate(4deg); }
  80%  { transform: rotate(-4deg); }
  90%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

.scaredy-teasing {
  display: inline-block;
  animation: scaredyTeasingWiggle 2s ease-in-out infinite;
  transform-origin: center center;
}

#scaredy-fader {
    position:fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    background-color: black; 
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 10000;
}

#splash-boi {
    background: url("/static/images/coloursplash.png");
    color: white;
    background-size: cover;
    font-size: 30px;
    border-radius: 15px;
    padding: 10px 20px;
    margin-bottom: 25px;
    background-color: #11B5E9;
}

#welcome-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #F0EFEA;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 25px;
}

#welcome-banner img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid white;
    background-color: #DFDFDF;
    object-fit: cover;
}

#welcome-banner h1 {
    min-width: 0;
    overflow-wrap: break-word;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    color: #3D3D3A;
}

.designer-underline {
    text-decoration: underline !important;
    /* undecided about these: */
    /* text-decoration-thickness: 1.2px !important;
    text-underline-offset: 0.3rem !important; */
}

.designer-underline.text-muted-darker {
    text-decoration-color: rgb(141 147 151 / 66%) !important;
    -webkit-text-decoration-color: rgb(141 147 151 / 66%) !important; /* Safari */
}

/* A11y (WCAG 1.4.11): introjs's white close icon on #FFCC02 is only ~1.6:1, needs 3:1 */
.modal-intro .modal_x {
    color: var(--navy) !important;
}