@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-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";
}

html {
    height: 100%;
}

body {
    background-color: #F6F6F6;
    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: #474C68;
    height: 100%;
    font-size: .95rem;
}

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

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

::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/v3/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/v3/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 {
    color: #34b4e9;
    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: #34b4e9;
    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;
    /* Better Font Rendering =========== */
    -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;
}

.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"] {
    position: relative;
    z-index: 2;
    outline: none;

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

    &:is(:active)::before {
        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;
    /*color: #aaa;*/
}

.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;
}

.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;
    /* background-image: linear-gradient(to bottom, rgba(246,246,246,1) 40%, rgba(246,246,246,0)); */
    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;
    /*text-align: center;
  */
    /*left: calc(50% - 200px);
  */
    background: white;
    padding: 20px 35px;
    border-radius: 7px;
}

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

#main-content {
    top: 110px;
    padding: 0;
    background-color: #F6F6F6;
    /*height: 100%;
  */
    width: 100%;
}

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

.current-mark:before, .grey-mark:before {
    content: '\0000B7';
    /*position: absolute;
  */
    font-weight: 900;
    /*font-size: 30px;
  */
    /*left: -10px;
  */
    color: #EB642D;
    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;
}

.sl-wrap {
    &:has(.sl-body .sl-title a:focus, .sl-body .sl-title [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 .sl-title a:active, .sl-body .sl-title [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;
}

.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: #F6F6F7;
    font-size: 13px;
    padding: 7px 10px;
    margin-top: 6px;
    /*color: #aaa;*/
}

.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: thin solid #ccc;
  */
    border-radius: 50%;
    margin: auto;
    margin-bottom: 15px;
    background-color: #F6F6F6;
    line-height: 45px;
    text-align: center;
    transition: all 0.1s;
    color: #474C69;
    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 {
    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: #34b4e9;
    color: white;
}

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

.sl-h-orange > .sl-icon > .sl-circle {
    background-color: #EB642D;
    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 #f6f6f6;
    background-color: #f6f6f6;
    /*background-color: white;
  */
    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;
    /*border: 2px solid #ddd;
  */
    background-color: white;
}

.sl-h-pending > .sl-icon > .sl-circle:not(.sl-circle-thumb) {
    background-color: #ECECEB;
    /* border: 2px solid #ddd;
  background-color: white;
  */
}

.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;
}

.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: #EB642D;
    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: -10px;
  */
    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-noicon.sl-sz-xs.current:not(.loading-mark):before {
  line-height: 15px;
}*/
.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;
}

.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: #34b4e9;
}

.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-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-h-navy .sl-circle {
    background-color: #474C69;
    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/v3/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/v3/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(#f6f6f6, #f6f6f6) 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: #474C69;
    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: #B5B9BC;
    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: #474C69;
    /*font-size: 15px;
  */
    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: 1em;
  */
    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;
    /*overflow: hidden;
  */
    margin-bottom: -15px;
}

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

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

.rosettes-list li span {
    width: 0.8em;
    height: 9px;
    background: #F6F6F6;
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    /*left: 1em;
  */
    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;
}

/*/
/ Small devices (landscape phones, 576px and up)*/
#stickies-box {
    /* min-height: 60px;
  width: calc(100% - 200px);
  margin-top: -85px;
  */
    color: white !important;
    background-color: #EB642D;
    padding-top: 10px;
    min-height: 60px;
}

#stickies-box.slab-announcement {
    background-color: #e8a42c;
    border: 3px solid #FFCC00;
    /*background-color: #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;
    /*position: absolute;
  */
    margin-right: 6px;
    font-size: 12px;
    margin-top: 1px;
}

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

@media (max-width: 576px) {
    #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: 577px) {
    #stickies-box {
        min-height: 60px;
        width: calc(100% - 200px);
        margin-top: -85px;
    }

    #sidebar {
        width: 92px !important;
        min-width: 92px !important;
        display: block
    }

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

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

.menu-tt.tooltip {
    display: none
}


@media only screen and (min-width: 577px) and (max-width: 992px) {
    .menu-tt.tooltip {
        display: block !important;
    }
}

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

    .sidebar-menu-item span {
        display: inline-block !important;
    }

    .sidebar-menu-item .fa-fw {
        font-size: .75em !important;
    }

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

@media (max-width: 992px) {
    .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;
    /* text-align: right;
  width: 110px;
  margin-left: -45px;
  */
    margin-bottom: 5px;
    height: 67px;
    transition: color 0.1s, top 0.5s ease;
}

#header-box, #header-menu {
    border: 3px solid #F6F6F6;
}

/*#header-menu:hover {
  color: #34b4e9;
  cursor: pointer;
}
*/
#header-box {
    margin-left: auto;
    margin-right: -3px;
    display: table;
    margin-top: -3px;
    /*margin-bottom: 25px;
  */
    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: #F6F6F6;
    z-index: 4;
}

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

    #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 {
    /*font-size: 26px;
  */
    color: #34b4e9;
}

.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: #F6F6F6;
}

.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 (min-width: 577px) and (max-width: 991px) {
    #sidebar-inner .sidebar-inner-partner-logo.sidebar-inner-partner-logo-sm {
        display: block;
    }

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

@media (max-width: 576px) {
    #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;
}

@media (max-height: 710px) {
    #sidebar-inner .sidebar-inner-partner-logo {
        display: none;
    }
}

@media (max-width: 576px) {
    #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;
    }

    #sidebar.open .sidebar-menu-item span {
        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;
    }
}

#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;
    /*position: absolute;
  */
    /*right: 10px;
  */
    float: right;
    /*top: 6px;
  */
    margin-top: -1px;
    /*z-index: 10;
  */
    z-index: 5;
    /*padding-right: 7px;
  */
    padding-right: 0px;
}

.box-top-controls {
    position: absolute;
    right: 10px;
    /*float: right;
  */
    top: 12px;
    /*margin-top: -1px;
  */
    /*z-index: 10;
  */
    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: #F6F6F6;
    padding: 10px 15px;
    border-radius: 15px;
    overflow-wrap: break-word;
    transition: border-left 0.1s ease-in-out;
}

.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: #474C68;
    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/v3/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: #474C68 !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;
}

#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: #34b4e9;
    font-weight: lighter;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #34b4e9
}

.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';
}

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

}

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

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

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

a.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: #f6f6f6 !important;
}

.shortcut-buttons-flatpickr-button {
    border-radius: 15px;
    color: #474C69;
    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: #f6f6f6;
    -webkit-appearance: none;
    text-align-last: left;
    text-align: left;
}

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

input.form-control:not([type="button"]):not(.nomw), select.form-control:not(.nomw), textarea.form-control:not(.nomw), .selectize-control:not(.nomw), .selectize-control:not(.nomw) .selectize-input {
    /*max-width: 480px !important;
  */
}

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

.nomw input:not([type="button"]).form-control, .nomw select.form-control, .nomw .selectize-control, .nomw .selectize-input, .nomw textarea.form-control {
    /*max-width: none !important;
  */
}

.form-group label:not(input + label):not(.btn) {
    /*font-weight: bold;
  */
}

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

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

.text-dark {
    color: #474C68 !important;
}

a.text-dark:hover {
    color: #474C68 !important;
}

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

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

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

.form-control::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #bbb;
}

.form-control::-moz-placeholder {
    /* Firefox 19+ */
    color: #bbb;
}

.form-control:-ms-input-placeholder {
    /* IE 10+ */
    color: #bbb;
}

.form-control:-moz-placeholder {
    /* Firefox 18- */
    color: #bbb;
}

.fade {
    /*opacity: 0;
  */
    -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;
    /*margin: -1.4rem -1.2rem -1.5rem auto;
  */
}

.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: #f2f2f2;
}

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

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

.progress-bar {
    z-index: 2;
    background-color: #34b4e9;
    /* position: absolute;
  left: 20px;
  height: 16px;
  */
}

.progress-bar-bottom {
    z-index: 1;
    background-color: #f2f2f2;
}

.progress-bottom {
    position: relative;
    top: -16px;
    background-color: #fff;
    border: 1px solid #f2f2f2;
}

.btn {
    border-radius: 15px;
    color: #474C69;
    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: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;
}

.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: #e6e6e6;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:focus, .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:focus {
    /*box-shadow: 0 0 3px 1px rgb(52 180 233)*/
    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-primary {
    border: 1px solid #eee;
}

.btn-group-toggle .btn.btn-primary.active {
    background-color: #474C69;
    color: white;
}

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

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

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

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

.btn.active {
    background-color: #474C69;
    color: white;
}

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

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

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

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

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

.btn.btn-action {
    background-color: #34b4e9;
    color: white;
}

.btn.btn-action-inverse {
    color: #34b4e9;
    border-color: #34b4e9;
    background-color: white;
}

.btn.btn-action-inverse:hover {
    background-color: #fafafa;
}

.btn.btn-action.btn-radio:not(.active) {
    background: none;
    /*color: #ccc;*/
    color: #474C68;
    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: #474C68;
}

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

.badge.badge-primary {
    background-color: #34b4e9 !important;
}

.bg-primary {
    background-color: #34b4e9 !important;
}

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

.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;
    padding: 15px;
}

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

@media (max-width: 576px) {
    #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: 8px;
}

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

.sidebar-menu-item .fa-fw {
    font-size: 20px;
}

.sidebar-menu-item .fa-xs {
    position: relative;
    top: -1px;
    margin-right: 3px;
}

.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: #474C69;
    color: white;    
}

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

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

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

.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: #EB642D;
}

#ntf_launcher[data-ntf-count]:not([data-ntf-count="0"]):after {
    content: attr(data-ntf-count);
    padding: 0px;
    color: white;
    font-size: 11px;
    position: absolute;
    margin-left: -10px;
    margin-top: -5px;
    background-color: black;
    border-radius: 20px;
    padding: 1px 5px;
    font-weight: bold;
    opacity: 0.5;
    /*width: 18px;
  */
    text-align: center;
}

.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: #EB642D !important;
}

.text-primary {
    color: #34b4e9 !important;
}

.text-navy, .text-slate {
    color: #474C69 !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: #f6f6f6 !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: #f6f6f6;
}

.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: #EB642D;
}

.invalid-feedback {
    color: #EB642D;
}

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

.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;
}

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

.cursor-hover {
    cursor: pointer;
}

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

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

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

.text-muted-link {
    cursor: pointer;
    color: #acb3b9 !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;
    /*max-width: 100px;*/
    display: flex;
    justify-content: center;
    position: relative;
    /*opacity: 0;*/
    transition: height 0.2s ease;
    /*animation: flex-bars-animation 0.5s ease forwards;*/
    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=""]):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-key=""][data-pc]:not([data-pc=""]):before {
    content: '-';
    white-space: nowrap;
}

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

/*[class^="nudge"] {
  position: relative;
}
*/
.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;
    }
}

.req-valid {
    color: #34b4e9;
}

.req-valid::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    content: "\f14a";
    margin-right: 5px;
    text-decoration: none;
}

.req-invalid {
    color: #bbb;
}

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

.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*="v"] .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*="v"] .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
}

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

.fb-content.fb-loader-loading {
    filter: blur(3.5px);
    opacity: 0.8;
    pointer-events: none;
    overflow-y: hidden;
}

.fb-content-loader-text {
    position: absolute;
    bottom: 270px;
    width: calc(100% - 40px);
    text-align: center;
    font-size: 25px;
    color: #ccc;
}

.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: #34b4e9 !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="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="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: #f8f9fa;
    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 .answer-feedback {
  display: none;
}
*/
.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: #F6F6F6;
    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: #34b4e9;
    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: #34b4e9;
}

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

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

.quiz .answer.right-answer.answered .answer-feedback {
    color: #34b4e9;
}

.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: #fafafa;
    font-weight: normal;
}

.quiz-v2-pane .answer[data-is-correct="true"] .answer-feedback {
    background-color: #DCF2FB;
    color: #474C69;
}

.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: #EFEFEF;
    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: #f6f6f6;
}

.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: #34b4e9;
    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 [data-open="show-selects"] .answer[data-selected="true"][data-is-correct="true"] .answer-text:before {
    /* color: #34b4e9; */
}

.quiz-v2-pane .incorrect-answers .sorted-answers-icon {
    color: #acb3b9;
}

.quiz-v2-pane .question .request-error {
    color: #EB642D;
    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: #34b4e9;
}

.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 .question-feedback p:last-child {
    margin-bottom: 0;
}

.ref-choice {
    cursor: pointer;
}

.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: #F6F6F6;
    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-question .invalid-feedback {
  display: block;
  color: #aaa;
  padding-left: 15px;
}
.ref-question .invalid-feedback:not(:empty):before {
  content: "↑";
  color: #EB642D;
  position: absolute;
  margin-left: -13px;
}*/


.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: #EB642D;

}

.ref-invalid-feedback {
    display: none;
}

.reflection-form-manual-save .ref-required-answers[data-valid="false"] + .ref-invalid-feedback {
    display: block;
    color: #EB642D;
    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: #EB642D;
}

.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: #EB642D;
    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: #34b4e9;
    /*border: 1px solid #34b4e9;
  */
    color: #fff;
}

.sl-h-error.track-circle .sl-circle {
    background-color: #EB642D;
    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: #34b4e9;
}

.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: #EB642D;
}

.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 {
    /*position: absolute;
  */
    margin-left: -17px;
}

.sl-blob-bullet {
    /*position: relative;
  */
    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 {
    /*margin-top: 6px;
  */
    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(#f6f6f6, #f6f6f6) 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%;
}

/* DIAGNOSE SHIT */
/*.custom-switch .custom-control-label::before {
  left: -2.45rem;
  width: 2rem;
}
.custom-control.custom-switch.neutral .custom-control-label::after,.custom-switch.neutral .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(8px);
  background-color: #474D67;
  transform: translateX(12px);
  margin-top: 4px;
  width: 10px;
  height: 10px;
}
.custom-control.custom-switch.neutral .custom-control-label:before {
  color: #34b4e9;
  background-color: white;
}
.custom-switch .custom-control-label::after {
  top: 3px;
  left: -40px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border-radius: 50%;
}
*/
.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: #34b4e9;
    border-color: #ddd;
    background-color: white;
}

.custom-switch.two-ender .custom-control-label::after {
}

.custom-switch .custom-control-label::before {
    border-color: #ddd !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #34b4e9;
    /*-webkit-transform: translateX(17px);
  */
    /*transform: translateX(17px);
  */
}

.custom-switch.two-ender .custom-control-input ~ .custom-control-label::after {
    background-color: #34b4e9;
    /*-webkit-transform: translateX(17px);
  */
    /*transform: translateX(17px);
  */
}

.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;
    /* animation-name: neutral-pulse;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  */
    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: #34b4e9;
    background-color: white;
}

@keyframes neutral-pulse {
    0% {
        /*background-color: #247da3;
  */
        background-color: #34b4e9;
        /*transform: translateX(0.42rem);
  */
    }
    50% {
        background-color: #474D67;
        /*transform: translateX(0.3rem);
  */
    }
    100% {
        background-color: #34b4e9;
        /*transform: translateX(0.42rem);
  */
    }
}

.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;
    }
    /* 80% {
  box-shadow: 0 0 0 10px rgba(52,180,233, 0);
}
*/
    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: #34b4e9;
}

.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: #acb3b9;
    font-weight: 400;
    font-size: 14px;
    font-style: italic;
}

.step-footer {
    margin-top: 3px;
    color: #acb3b9;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 10px;
}

.step-footer .domain-text {
    font-style: italic;
}

.prac-prompt {
    background: #474C68;
    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;
}

.btn.roundcount-btn.btn-action.btn-radio:not(.active) {
    color: #acb3b9;
}

.link {
    cursor: pointer;
}

.error {
    color: #EB642D;
    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: #474C68;
}

input::placeholder {
    color: #bbb !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 {
    /* position: relative;
top: -5px;
*/
    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;
    /*font-weight: 400;
*/
    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: #34b4e9;
}

[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: #f6f6f6;
    /*border: 1px solid #eee;
  */
    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;
}

.box[data-tag="fts"], .alt-box[data-tag="fts"] {
    background-color: #34b4e9;
    color: white;
    border-color: #34b4e9 !important;
}

.box[data-tag="fts"]:empty,
.alt-box[data-tag="fts"]:empty {
    display: none;
}

.box[data-tag="fts"] a[target],
.alt-box[data-tag="fts"] a[target] {
    color: white;
    font-weight: bold;
}

.prg-status {
    display: block;
    font-size: 80%;
    font-weight: 600;
    margin-left: 5px;
    /*margin-top: 3px;
  */
}

.prg-status .h {
    font-weight: 400;
    color: #acb3b9;
}

.prg-status:before {
    content: '\0021B3 ';
    /*font-size: 120%;
  */
}

.ellipsis-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

mark {
    border-radius: 3px;
    /*padding: 0.1em 0.1em 0.2em 0.1em;
  background-color: #ddd;
  */
    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;
    /* margin-left: 1px;
  margin-right: 1px;
  */
}

#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: #34b4e9;
    border-color: #34b4e9;
}

.page-link {
    color: #34b4e9;
}

.dt-paging-button a,
.dataTables_paginate a {
    color: #474C68;
}

.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: #34b4e9 !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: #474C69;
    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: #474C69;
  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: #474C69;
    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: #f6f6f6;
    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: #34b4e9;
}

.simple-role.c {
    background-color: #EB642D;
}

.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: #f6f6f6;
    background-image: url('/static/v3/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 #F6F6F6;
}

[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: #474C69 !important;
    padding: 0;
    padding-left: 5px;
}

.table {
    color: #474C68;
}

.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: #acb3b9;
}

.selectize-loading .selectize-dropdown .no-results:after, .loading .selectize-dropdown .no-results:after {
    content: "Searching...";
    margin-left: 19px;
    color: #acb3b9;
}

.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: #acb3b9;
    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: #777;
}

.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: #777;
}

.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: #777;
}

.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: #777;
}

.tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: #fff;
    text-align: left;
    background-color: #777;
    border-radius: 0.25rem;
}

.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;
}

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: #acb3b9;
}

div.lead-top-link > a:hover {
    text-decoration: none;
    color: #777;
}

div.lead-top-link.active {
    border-bottom: 3px solid #EB642D;
}

div.lead-top-link.active > a {
    color: #474C68;
}

.slab-breadcrumbs ol.breadcrumb {
    padding-bottom: 0;
    padding-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    color: #acb3b9;
}

.slab-breadcrumbs ol.breadcrumb a {
    color: #acb3b9;
}

.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: #acb3b9;
}

.slab-breadcrumbs .add-btn {
    border-radius: 50%;
}

.slab-group-breadcrumbs {
    /* background-color: #474C68;
  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;
    /*width: calc(100% - 56px)*/
}

.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;
}

#flash_messages, #stickies_messages {
    margin-top: 35px;
}

#stickies_messages:not(:empty) + #flash_messages:not(:empty) {
    margin-top: 20px;
}

#stickies_messages + #flash_messages:empty {
    margin-top: 20px;
}

/*#flash_messages:not(:empty) {
  padding-top: 7px;
}*/

#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: #f7f7f6;
    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: #34b4e9 !important;
    color: white !important;
    transition: all 0.2s linear;
}

textarea.is-shoutout::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #9ad9f4;
    opacity: 1;
    /* Firefox */
}

textarea.is-shoutout:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #9ad9f4;
}

textarea.is-shoutout::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #9ad9f4;
}

.mini-done {
    background-color: #34b4e9;
    border-radius: 50%;
    padding: 3px;
    font-size: 80%;
    color: white;
    width: 16px;
    height: 16px;
}

.mini-not-done, .mini-unavailable {
    background-color: #ECECEB;
    border-radius: 50%;
    padding: 3px;
    font-size: 80%;
    color: #ECECEB;
    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: #acb3b9;
    position: absolute;
    bottom: 70px;
    left: 50px;
}

@media (max-width: 576px) {
    #copyright-text {
        left: 30px;
    }
}

@media (min-width: 577px) and (max-width: 991px) {
    #copyright-text {
        left: 5px;
        width: 80px;
    }
}

.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-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;
    /*color: #A9AAAE;
  */
}

.box.card .card-header, .card-header-title {
    font-size: 17px;
    font-weight: bold;
}

.box.card .card-header.card-header-no-style {
    font-size: inherit;
    font-weight: inherit;
}

.card-header-navy, .box-navy {
    background: #474C68 !important;
    color: white;
}

.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: #474C68 !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: #474C69 !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: #474C69; 
}

.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: #474C68;
}

.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: 577px) {
    #sidebar, #sidebar-whiter, #sidebar-inner, .sidebar-menu-item {
        background-color: transparent;
    }
}

.sidebar-menu-item {
    font-weight: normal;
}

.sidebar-menu-item.active {
    background-color: #e8e9ef;
    color: inherit;
    font-weight: bold;
}

.sidebar-menu-item.active:hover {
    background-color: #D1D4E0;
    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: 50px;
    width: 100%;
}

@media (min-width: 577px) {
    #main-wrapper-primary {
        width: calc(100% - 92px);
    }
}

@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: 15px;
    padding-right: 25px;
    padding-bottom: 70px;
}

@media (max-width: 576px) {
    #main-wrapper-primary {
        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: 576px) {
    #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;
}

@media (min-width: 577px) {
    .sidebar-menu-item {
        text-align: center;
    }
}

@media (min-width: 992px) {
    .sidebar-menu-item {
        text-align: left;
    }
}

.navbar.bg-light {
    background-color: white !important;
    border-bottom: 1px solid #dfdfdf;
}

.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 {
    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-check {
    margin-left: 25px;
}

.task-check.hide-task-heading:before {
    display: none;
}

.task-check.hide-task-heading {
    margin-left: 5px;
}


.task-check .task-check:before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f111';
    font-weight: 300;
    font-size: 6px;
    margin-top: 7px;
    margin-left: -15px;
}

.task-check .task-check {
    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: #e6e6e6;
}

.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: #F6F6F6
}

.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;
}

.sticky-note-header .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: #474C68;
}

#sticky-notes-bay[data-loaded="true"]:not(:empty) + .tips-sticky-note {
    margin-top: -10px;
}

.pseudoFullStop::after {
    color: #474C68;
    content: '.'
}

.nav-tabs > .nav-item {
    margin-right: 5px;
}

.nav-pills .nav-link.active {
    background-color: #34b4e9
}

.nav-pills.nav-pills-dark .nav-link.active {
    background-color: #474C68
}

.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: #474C68;
}

.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: #34b4e9;
    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;
}

.shoutout-box {
    background-color: #34b4e9;
    color: white;
    border-color: #34b4e9;
}

.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: #34b4e9;
    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: #34b4e9 !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";
    top: 20px;
    margin-left: 12px;
    position: absolute;
    font-size: 11px;
}

.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-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;
    bottom: 20px;
}
    
.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: #EB642D;
}

.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 {
    /* height: 100%; */
    width: 100%;
}
.lead-menu {
    vertical-align: top !important;
}

.lead-menu.lead-menu-open .btn:not(:disabled).lead-menu-btn.active:hover {
    background-color: #474C69;
}

.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);
}

/* .lead-menu .lead-menu-btn:focus {
    box-shadow: none;
} */

@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: #474C69;
    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: inline-block;
}

.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/v3/images/video-thumb-placeholder.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 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: #474C69;
        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: #34b4e9;
        margin-left: 5px;
    }
    
    .section.completed-section.completed-section-with-errors .section-title:after {
        content: '\f071';
        color: #EB642D;
    }

    .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 #EB642D;
        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: #f1f1f1;
    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: #34b4e9;
    color: white;
    border-color: #34b4e9;
}

.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;
    /* opacity: 0; */
}

.imp-roadmap-toggle-mod .sl-title {
    margin-bottom: 15px !important;
}

/* .imp-roadmap-skip-include-toggle .btn.active span:before {
    opacity: 1;
} */

.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: #34b4e9;
    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: #34b4e9;
    background: #34b4e9;
    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: #EB642D;
}

.ticklist-job[data-complete-status="not_completed"][data-completed="true"] .ticklistbox-checkbox > .ticklistbox-visuals {
    border-color: #EB642D;
    background: #EB642D;
}


.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 */
.ssoBrandIcon {
    width: 22px;
}

.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;
}

.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;
}