@charset "UTF-8";
/*!
 * KST FAUCHI APP FRONTEND PROTOTYPE V2
 * based on Bootstrap v5.1.3 (https://getbootstrap.com/docs/5.1/)
 */

/***********************************************************/
/*  ||  ADMIN DASHBOARD                                    */

.coursefilters {
    display: flex;
    gap: 1.5rem;
}

.filterinput {
    flex-grow: 1;
}

.sidebuttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nofilter-notification {
    margin: 3rem 0;
    text-align: center;
}

.nofilter-notification .fa-solid {
    display: block;
    font-size: 2rem;
}

/* container for show-details- and load-all-buttons */
.table-options {
    display: flex;
    align-items: baseline;
    gap: 2rem;
    margin: 0.5rem;
}

/* checkbox in top left table cell */
.kst-table thead .row-check {
    border-color: var(--kst-table-head-bg);
}

.kst-table .row-options:hover,
.kst-table .row-options:focus,
.kst-table .row-options:active {
    color: var(--kst-link-fontcolor-highlight);
}

/* icon-button in table cell for info dropdown */
.kst-table .missing-data {
    background: 0;
    border: 0;
    color: var(--kst-table-body-btn-alert-fontcolor);
}

.modal-section .carer:not(:last-child) {
    margin-bottom: 2rem;
}

@media (min-width: 992px) {
    /* wrapper for arranging modal sections in 2-column layout */
    .modal-2col {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .modal-2col .modal-section {
        width: 370px;
        flex-shrink: 0;
        gap: 4rem;
    }
}


/***********************************************************/
/*  ||  REPORT                                             */

.note-item,
.email-item {
    margin-bottom: 1rem;
}

.note-date,
.email-date {
    margin-left: 0.7rem;
    font-size: 0.85rem;
    line-height: 1rem;
}

.note-text,
.email-content {
    border-radius: 1rem;
    background: var(--kst-form-bg-dim);
    margin-bottom: 0;
    padding: 0.6rem 0.8rem;
}


/***********************************************************/
/*  ||  REPORT-DAY                                         */

.date-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin-bottom: 0.5rem;
}

.date-range {
    min-width: 13.5rem;
}

@media (min-width: 768px) {
    .date-range {
        min-width: 18.5rem;
    }
}

.date-buttons {
    display: flex;
    gap: 1rem;
}

.feedback-indicator {
    display: inline-block;
    position: relative;
    width: 2rem;
    height: 0.75rem;
    border: 0.15rem solid black;
    border-radius: 50rem;
    background-color: transparent;
}

.feedback-indicator .fi-progress {
    position: absolute;
    height: 100%;
    /* width 0-100% is to be changed dynamically with inline styles */
}

.feedback-indicator[role=button]:hover,
.feedback-indicator[role=button]:focus {
    background-color: rgba(255, 255, 255, 0.6);
}

.feedback-indicator[role=button]:active {
    background-color: rgba(255, 255, 255, 0.9);
}

.feedback-indicator:not(:last-child) {
    margin-right: 0.1rem;
}

.feedback-indicator.fi-1 {
    border-color: var(--kst-feedback-1);
}

.feedback-indicator.fi-1 .fi-progress {
    background-color: var(--kst-feedback-1);
}

.feedback-indicator.fi-2 {
    border-color: var(--kst-feedback-2);
}

.feedback-indicator.fi-2 .fi-progress {
    background-color: var(--kst-feedback-2);
}

.feedback-indicator.fi-3 {
    border-color: var(--kst-feedback-3);
}

.feedback-indicator.fi-3 .fi-progress {
    background-color: var(--kst-feedback-3);
}

.feedback-indicator.fi-4 {
    border-color: var(--kst-feedback-4);
}

.feedback-indicator.fi-4 .fi-progress{
    background-color: var(--kst-feedback-4);
}

.feedback-indicator.fi-5 {
    border-color: var(--kst-feedback-5);
}

.feedback-indicator.fi-5 .fi-progress {
    background-color: var(--kst-feedback-5);
}

.feedback-indicator.fi-6 {
    border-color: var(--kst-feedback-6);
}

.feedback-indicator.fi-6 .fi-progress {
    background-color: var(--kst-feedback-6);
}

.feedback-indicator.off {
    border-color: var(--kst-feedback-off);
    background-color: var(--kst-feedback-off);
}

.feedback-indicator.off .fi-progress {
    background-color: var(--kst-feedback-off);
}


/***********************************************************/
/*  ||  SUPPORT                                            */

.support-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background-color: var(--kst-body-bg);
    box-shadow: 0 0.2rem 0.2rem 0 var(--kst-body-bg);
    position: sticky;
    top: 45px;
    margin-top: 1.75rem;
    padding-bottom: 1rem;
    /* set z-index to BS standard sticky value */
    z-index: 1020; 
}

.support-header h1 {
    margin: 0;
}

@media (min-width: 768px) {
    .support-header {
        top: 51px;
        margin-top: 2rem;
    }
}

.support-header .spinner-border {
    height: 1.5rem;
    width: 1.5rem;
}

/* inline-styles for display:none */
.support-header .spinner-border {
    height: 1.5rem;
    width: 1.5rem;
}

ol.support-convo {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    list-style: none;
    padding-left: 0;
    margin-bottom: 3rem;
}

.support-datetime {
    text-align: center;
    margin-bottom: 0.5rem;
}

/* inline-styles for: opacity */
.support-datetime#date-overlay {
    position: fixed;    
    left: 50%;
    translate: -50% -45px;
    border-radius: 1rem;
    padding: 0.2rem 1rem;
    background-color: var(--kst-support-stickydate-bg);
    box-shadow: var(--kst-dropshadow);
    transition: opacity 0.1s ease-in-out;
    /* overlay sits beneath nav-dropdowns */
    z-index: 1020;
}

@media (min-width: 768px) {
    .support-datetime#date-overlay {
        translate: -50% -51px;
    }
}

.support-datetime.divider {
    margin-top: 3rem;
    border-top: 1px solid var(--kst-fontcolor);
    padding-top: 1rem;
}

.support-msg {
    margin-bottom: 1rem;
}

.msg-client,
.msg-assistance,
.msg-news {
    padding: 0.5rem 1rem;
    margin: 0;
    border-radius: 1rem;
    width: fit-content;
}

.msg-client,
.msg-assistance {
    max-width: 80%;
}

.msg-client,
.msg-news {
    background: var(--kst-support-msg-light-bg);
    border: 1px solid var(--kst-support-msg-light-border);
}

.msg-assistance {
    margin-left: auto;
    color: var(--kst-support-msg-dark-fontcolor);
    background: var(--kst-support-msg-dark-bg);
}

.msg-assistance a {    
    color: var(--kst-support-msg-dark-link-fontcolor);
    text-decoration-color: var(--kst-support-msg-dark-link-fontcolor);
}

.msg-assistance a:hover,
.msg-assistance a:focus {    
    color: var(--kst-support-msg-dark-link-fontcolor-highlight);
    text-decoration-color: var(--kst-support-msg-dark-link-fontcolor-highlight);   
}

.support-msg small {
    display: block;
    margin-right: 1rem;
    text-align: right;
}

.support-msg .attachment {
    display: inline-block;
    margin-top: 0.25rem;
}

.support-msg .attachment a {
    font-size: 0.75rem;
    /* color: #c3ced5; */
    text-decoration: none;
    margin-right: 0.75rem;
}

.support-msg .attachment i.fa-solid {
    padding-right: 0.25rem;
}

.support-convo .closed-issue,
.support-convo .opened-issue {
    color: var(--kst-body-fontcolor);
    max-width: 70%;
    margin: 3rem auto;
    text-align: center;
}

/* TODO evtl support buttons mit btn-inline umsetzen und hier nur die 0.75 fontsize mitnehmen, wäre sauberer */
.support-msg .attachment button[data-bs-toggle=dropdown] {
    background-color: transparent;
    border: 0 none;
    font-size: 0.75rem;    
    color: var(--kst-link-fontcolor);
    margin-right: 1rem;
    box-shadow: none;
    padding: 0;
    text-transform: inherit;
}

.support-input {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.support-input .msg-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-right: 0.5rem;
}

.support-input .msg-textarea {
    position: relative;
    flex-grow: 1;
}

.support-input .msg-textarea .invalid-tooltip {
    top: -2.35rem;
    border-radius: 1rem;
    background-color: var(--kst-form-validation-fail);
}

.support-input .msg-textarea .tooltip-arrow {
    position: absolute;
    top: 1.75rem;
    left: 2rem;
    border: 0.6rem solid transparent;
    border-top-color: var(--kst-form-validation-fail);
    border-bottom: 0;
}

.support-input .current-uploads {
    margin-top: 1rem;
}

.current-uploads {
    margin: 0 2.5rem 1rem;
}

.current-uploads .badge-upload {
    font-weight: 400;
    font-size: 0.85rem;
    border-radius: 50rem;
    color: var(--kst-support-uploadbadge-fontcolor);
    background-color: var(--kst-support-uploadbadge-bg);
    box-shadow: var(--kst-dropshadow);
}

.current-uploads .dismiss-upload {
    border: 0;
    background: transparent;
    color: var(--kst-support-uploadbadge-fontcolor);
}

.support-adminoptions {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 1rem;
    border-top: 3px double var(--kst-support-adminoptions-border);
    margin-top: 2rem;
}

.support-adminoptions .managedby {
     margin-bottom: 1rem;
}
 
.support-adminoptions .adminbuttons > * {
     margin-left: 2rem;
}

.support-adminoptions .adminbuttons {
    display: flex;
    flex-grow: 1;
    justify-content: end;
    align-items: baseline;
}

.btn.back-to-bottom {
    bottom: 1rem;
    position: sticky !important;
    left: 100%;
    transition: opacity 0.1s ease-in-out;
}


/***********************************************************/
/*  ||  SUPPORT LIST                                       */

ol.support-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.support-list > li {
    margin: 1rem 0;
    width: 100%;  /* changed on breakpoint */    
}

.support-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.support-list-issue,
.issue-archive {
    flex-grow: 1;
    display: flex;
    border-radius: 1rem;
    background-color: var(--kst-supportlist-issue-bg);
}

.support-list-issue p {
    margin-bottom: 0;
    padding: 0.6rem 0.8rem;
}

.support-list-issue.new-issue {
    font-weight: 700;
}

.issue-name {
    flex: 3 0 0%; /*width name:date = 3:2*/
}

.issue-date {
    flex: 2 0 0%;
}

.support-list > li > small {
    margin-left: 0.8rem;
}

@media (min-width: 768px) {
    .support-list li {
        width: 45%;
    }
}


/***********************************************************/
/*  ||  DASHBOARD - VUEPERSLIDES                           */

.db_slider_center {
    width: 480px;
    max-width: 100%;
    margin: 0 auto 2rem;
}

/* showing 2 slides */
@media (min-width: 870px) {
    .db_slider_center {
        width: 720px;
    }
}

/* showing 3 slides */
@media (min-width: 1220px) {
    .db_slider_center {
        width: 1080px;
    }
}

/* prevent absolute positioning of slider bullets */
.vueperslides__bullets {
    position: relative !important;
    top: -0.75rem !important;
}

/* increase clickable area around the visible bullet button */
.vueperslides__bullet {
    margin: 0 0.25rem !important;
    padding: 0.5rem !important;
}

.vueperslides__bullet .default {
    box-shadow: none !important;
    border: 0 !important;
    background-color: var(--kst-dashboard-slider-bullet-bg) !important;
}

.vueperslides__bullet--active .default {
    background-color: var(--kst-dashboard-slider-bullet-bg-highlight) !important;
}

.vueperslides__arrows .vueperslides__arrow {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: var(--kst-btn-primary-fontcolor);
    background-color: var(--kst-btn-primary-bg);
    box-shadow: var(--kst-dropshadow);
    opacity: 1;
    transition-duration: 0.2s;
}

.vueperslides__arrows .vueperslides__arrow:hover,
.vueperslides__arrows .vueperslides__arrow:focus {
    background-color: var(--kst-btn-primary-bg-highlight);
}

.vueperslides__arrows .vueperslides__arrow:active {
    background-color: var(--kst-btn-primary-bg-active);
}

.vueperslides__arrows .fa-solid {
    font-size: 1.2rem;
}

/***  General setup for single slides ***/
.db-slider-box {
    width: 324px;
    height: 324px;
    border-radius: 1.5rem;
    background: var(--kst-dashboard-slider-bg);
    box-shadow: var(--kst-dropshadow);
    padding: 1rem 1.25rem;
}

.db-slider-box.db-slider-flex {
    display: flex;
    flex-direction: column;
}

.db-slider-box h3 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: unset;
    text-align: left;
    margin-bottom: 1rem;
}

.db-slider-box hr {
    background-color: var(--kst-dashboard-divider);
    opacity: 1;
    margin: 0.5rem 0;
}

/* fix disappearing hr if it is a flex item */
.db-slider-box.db-slider-flex hr {
    border-bottom: 1px solid var(--kst-dashboard-divider);
}

.db-slider-box .db-slider-pagination {
    display: flex;
    justify-content: end;
    gap: 0.5rem;
}

/***  Slide: Minutes this week (progress cup & bullet list)  ***/
.db-slider-box #progress_week {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.db-slider-box #progress_week > div:last-child {
    margin-right: 15px;
}

.db-slider-box #progress_cup {
    width: 150px;
    height: 140px;
    border: 10px solid var(--kst-dashboard-slider-progresscup-border);
    border-radius: 0 0 25px 25px;
    border-top: none;
}

/* HTML inline stlyes for: top*/
.db-slider-box #progress_cup_indicator {
    position: absolute;
    color: var(--kst-dashboard-slider-progresscup-indicator);
}

/* HTML inline stlyes for: top, height, background-color */
.db-slider-box #progress_cup_liquid {
    position: relative;
    border-radius: 0 0 15px 15px;
}

.db-slider-box .big_icon {
    font-size: 48px;
    font-size: 52px;
} 

.progress-bullet-list {
    display: flex;
    justify-content: space-around;
}

.db-slider-box .progress-bullet-list .progress_circle {
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    background-color: var(--kst-dashboard-slider-circle-bg);
}

.db-slider-box .progress-bullet-list .progress_circle.pass {
    border: 0;
    background-color: var(--kst-dashboard-slider-circle-bg-pass);
}

.db-slider-box .progress-bullet-list .progress_circle.fail {
    background-color: var(--kst-dashboard-slider-circle-bg-fail);
    border: 2px solid var(--kst-dashboard-slider-circle-border-fail);
}

/***   Slide: Minutes this month & weekly regularity (progress bar & red/green week badges)   ***/
.db-slider-box .month {
    font-size: 12px;
    margin-bottom: 1rem;
}

.db-slider-box .month .bar, 
.db-slider-box .month .bar-inner {
    position: relative;
    width: 100%;
    height: 1.5rem;
    background-color: var(--kst-dashboard-slider-progressbar-bg);
    border-radius: 22px;
}

.db-slider-box .month .bar-inner.green {
    background-color: var(--kst-dashboard-slider-progressbar-fill);
}

.db-slider-box .month .bar-line {
    position: absolute;
    width: 4px;
    height: 31px;
    top: -4px;
    background: linear-gradient(
        var(--kst-dashboard-slider-progressbar-line) 0% 17.5%,
        transparent 17.5% 27.5%,
        var(--kst-dashboard-slider-progressbar-line) 27.5% 45%,
        transparent 45% 55%,
        var(--kst-dashboard-slider-progressbar-line) 55% 72.5%,
        transparent 72.5% 82.5%,
        var(--kst-dashboard-slider-progressbar-line) 82.5% 100%
    );
    z-index: 1100;
}

.db-slider-box .week {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.55rem 0.6rem;
    margin-bottom: 0.25rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.db-slider-box .week > :is(div,span) { 
    white-space: nowrap;
    text-align: center;
    background-color: var(--kst-dashboard-slider-weekbadge-bg-pass);
    border: 2px solid var(--kst-dashboard-slider-weekbadge-bg-pass);    
    font-size: 0.85rem;
    line-height: 1.4rem;
    border-radius: 50rem;
    padding-bottom: 0.125rem;
    width: 31%;
}

.db-slider-box .week > .red {
    color: var(--kst-dashboard-slider-weekbadge-fontcolor-fail);
    background-color: var(--kst-dashboard-slider-weekbadge-bg-fail);
    border: 2px solid var(--kst-dashboard-slider-weekbadge-bg-fail);
}

.db-slider-box .week > .white {
    background-color: var(--kst-dashboard-slider-weekbadge-bg);
    border: 2px solid var(--kst-dashboard-slider-weekbadge-border);
}

/***   Slide: Quality (ring charts)  ***/
.db-slider-box .quality {
    display: flex;
}

.db-slider-box .quality-summary {
    padding-top: 4rem;
}

.db-slider-box .quality-details {
    display: grid;
    grid-template-columns: 45% 45%;
    gap: 0.75rem 10%;
    margin-left: 1rem;
    font-size: 0.85rem;
    line-height: 1.1em;
}


/***   Slide: Starry sky   ***/
.db-slider-box #starry-sky {
    width: 100%;
    height: 220px;
}

.db-slider-box #starry-sky i {
    position: absolute;
    font-size: 24px;
    text-shadow: 
        var(--kst-dropshadow),
        -1px 0 var(--kst-dashboard-slider-star-outline),
        0 1px var(--kst-dashboard-slider-star-outline), 
        1px 0 var(--kst-dashboard-slider-star-outline), 
        0 -1px var(--kst-dashboard-slider-star-outline);
}

/***   Slide: Months this year (upright bar chart)   ***/
.db-slider-box #progress-year {
    height: 125px;
}

.db-slider-box #progress-year .container-month {
    margin-right: 3px;
    width: 8%;
}
.db-slider-box #progress-year .container-month:last-child {
    margin-right: 0;
}

/* HTML inline styles for: height */
.db-slider-box #progress-year .progressbar-month {
    background-color: var(--kst-dashboard-slider-barchart-bg);
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: left;
    font-size: 0.7rem;
    line-height: 1rem;
    padding:7px 1px;
    border-radius: 10px;
    width: 20px;
    box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.25);
}

.db-slider-box #progress-year .progressbar-month.nodata {
    padding:3px;
}

.db-slider-box #progress-year .progressbar-month.active {
    background-color: var(--kst-dashboard-slider-barchart-bg-highlight);
}

/***   Slide: Speech history (div/span bar chart of the last 7 days)   ***/
/* this slide version uses div/span instead of input[range]  and is most likely to be discarded */
.db-slider-box .barchart {
    display: flex;
    height: 215px;
    margin-bottom: 0.5rem;
}

.db-slider-box .barchart .barchart-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% / 7);
}

.db-slider-box .barchart .single-bar {
    width: 50%;
    height: 160px;
    border-radius: 50rem;
    background-color: var(--kst-grey-light5);
    position: relative;
    /* default value 0% will be overwritten with inline styles for each bar */
    --kst-barchart-fill: 0%;
}

.db-slider-box .barchart .single-bar.no-data {
    background-color: var(--kst-grey-light3);
}

.db-slider-box .barchart .single-bar .bar-fill {
    border-bottom-left-radius: 50rem;
    border-bottom-right-radius: 50rem;
    position: absolute;
    width: 100%;
    height: var(--kst-barchart-fill);
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--kst-yellow);
}

.db-slider-box .barchart .single-bar .bar-handle {
    border-radius: 50rem;
    position: absolute;
    width: calc(100% + 0.4rem);
    left: -0.2rem;
    height: 0.5rem;
    bottom: var(--kst-barchart-fill);
    translate: 0 0.25rem;
    background-color: rgba(0, 0, 0, 0.2);
    background-color: var(--kst-blue);
}

.db-slider-box .barchart .no-data .bar-handle,
.db-slider-box .barchart .no-data .bar-fill {
    display: none;
}

.db-slider-box .barchart .bar-date {
    line-height: 1.5rem;
}

.db-slider-box .barchart .bar-note {
    line-height: 1.5rem;
}


/***   Slide: Speech history (range chart of the last 7 days)   ***/
.history-container {
    --range-track-color: var(--kst-grey-light4);
    --range-track-progress-color: var(--kst-yellow);
    --range-track-dot-color: rgba(255,255,255,0.9);
    --range-track-dot-radius: 0.075rem;
    --range-thumb-color: var(--kst-blue);
    --range-noentry-thumb-color: var(--kst-grey-light3);
    --range-noentry-track-color: var(--kst-grey-light6);
    --range-disabled-thumb-color: var(--kst-gold);
    --range-disabled-track-color: var(--kst-grey-light4);
    --range-disabled-track-progress-color: var(--kst-yellow);
    --range-dummy-thumb-color: transparent;
    --range-dummy-track-bg-color: var(--kst-grey-light6);

    --range-length: 155px;
    --range-height: 24px;

    position: relative;
    width: calc(100% - 1rem);
    margin-bottom: 0.5rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.history-day {            
    display: grid;
    grid-template-rows: var(--range-length) 1fr 1fr;
    align-items: center;
    justify-items: center;
}

.history-range {
    width: var(--range-height);
    height: var(--range-length);
}

.history-range .form-range {
    --range-min: 1;
    --range-max: 10;
    --range-value: 0; /* will be changed with JS */
    --range-progress-percent: calc(1% * (100 / (var(--range-max) - var(--range-min) + 1 )) * var(--range-value));

    width: var(--range-length);
    transform: rotate(-90deg) translateX(calc(-1 * var(--range-length)));
    transform-origin: top left;
}

.history-range .form-range::-moz-range-track,
.history-day:last-child .history-range .form-range.missing-entry::-moz-range-track,
.history-day:last-child .history-range .form-range.missing-entry:disabled::-moz-range-track {
    background:
        radial-gradient(
                circle at 0.25rem 0.25rem, 
                var(--range-track-dot-color) var(--range-track-dot-radius),
                transparent var(--range-track-dot-radius)) 
            0.2rem / calc(var(--range-length) / 10),
        linear-gradient(
                90deg, 
                var(--range-track-progress-color) calc(var(--range-progress-percent) - 7px), 
                var(--range-track-color) 0);

}
.history-range .form-range::-webkit-slider-runnable-track,
.history-day:last-child .history-range .form-range.missing-entry::-webkit-slider-runnable-track,
.history-day:last-child .history-range .form-range.missing-entry:disabled::-webkit-slider-runnable-track {
    background:
        radial-gradient(
                circle at 0.25rem 0.25rem, 
                var(--range-track-dot-color) var(--range-track-dot-radius),
                transparent var(--range-track-dot-radius)) 
            0.2rem / calc(var(--range-length) / 10),
        linear-gradient(
                90deg, 
                var(--range-track-progress-color) calc(var(--range-progress-percent) - 7px), 
                var(--range-track-color) 0);
}

.history-range .form-range::-moz-range-thumb,
.history-range .form-range::-moz-range-thumb:active {
    background-color: var(--range-thumb-color);
}
.history-range .form-range::-webkit-slider-thumb,
.history-range .form-range::-webkit-slider-thumb:active {
    background-color: var(--range-thumb-color);
}

.history-range .form-range.missing-entry::-moz-range-track,
.history-range .form-range.missing-entry:disabled::-moz-range-track {
    background: 
        radial-gradient(
                    circle at 0.25rem 0.25rem, 
                    var(--range-track-dot-color) var(--range-track-dot-radius),
                    transparent var(--range-track-dot-radius)) 
                0.2rem / calc(var(--range-length) / 10),
        var(--range-noentry-track-color);            
}
.history-range .form-range.missing-entry::-webkit-slider-runnable-track, 
.history-range .form-range.missing-entry:disabled::-webkit-slider-runnable-track {
    background: 
        radial-gradient(
                    circle at 0.25rem 0.25rem, 
                    var(--range-track-dot-color) var(--range-track-dot-radius),
                    transparent var(--range-track-dot-radius)) 
                0.2rem / calc(var(--range-length) / 10),
        var(--range-noentry-track-color);
}


.history-range .form-range.missing-entry::-moz-range-thumb,
.history-range .form-range.missing-entry::-moz-range-thumb:active,
.history-range .form-range.missing-entry:disabled::-moz-range-thumb {
    background-color: var(--range-noentry-thumb-color);
}
.history-range .form-range.missing-entry::-webkit-slider-thumb,
.history-range .form-range.missing-entry::-webkit-slider-thumb:active,
.history-range .form-range.missing-entry:disabled::-webkit-slider-thumb {
    background-color: var(--range-noentry-thumb-color);
}

.history-range .form-range:disabled::-moz-range-track {
    background: 
        radial-gradient(
                    circle at 0.25rem 0.25rem, 
                    var(--range-track-dot-color) var(--range-track-dot-radius),
                    transparent var(--range-track-dot-radius)) 
                0.2rem / calc(var(--range-length) / 10),
        linear-gradient(
            90deg, 
            var(--range-disabled-track-progress-color) calc(var(--range-progress-percent) - 7px), 
            var(--range-disabled-track-color) 0);
}
.history-range .form-range:disabled::-webkit-slider-runnable-track {
    background: 
        radial-gradient(
                    circle at 0.25rem 0.25rem, 
                    var(--range-track-dot-color) var(--range-track-dot-radius),
                    transparent var(--range-track-dot-radius)) 
                0.2rem / calc(var(--range-length) / 10),
        linear-gradient(
            90deg, 
            var(--range-disabled-track-progress-color) calc(var(--range-progress-percent) - 7px), 
            var(--range-disabled-track-color) 0);
}

.history-range .form-range:disabled::-moz-range-thumb {
    background-color: var(--range-disabled-thumb-color);
}
.history-range .form-range:disabled::-webkit-slider-thumb {
    background-color: var(--range-disabled-thumb-color);
}

.history-range .form-range.dummy:disabled::-moz-range-thumb {
    background-color: var(--range-dummy-thumb-color);
}
.history-range .form-range.dummy:disabled::-webkit-slider-thumb {
    background-color: var(--range-dummy-thumb-color);
}

.history-range .form-range.dummy:disabled::-moz-range-track {
    background: var(--range-dummy-track-bg-color);
}
.history-range .form-range.dummy:disabled::-webkit-slider-runnable-track {
    background: var(--range-dummy-track-bg-color);
}

.history-range datalist#history-range-values {
    position: absolute;
    left: 100%;
    top: 0;
    height: calc( var(--range-length) - 0px );  
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.1rem;
}

.history-range datalist#history-range-values option {
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
}

.history-day .history-date {
    font-size: 0.75rem;
}

.history-day .btn-history {
    font-size: 0.85rem;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    justify-content: center;
    background-color: transparent;
    box-shadow: none;
    color: var(--kst-grey-light1);
}

.btn-history:hover,
.btn-history:focus,
.btn-history:hover:focus {
    color: var(--kst-grey);
    background-color: var(--kst-grey-light6);
}

.history-day .btn-history.no-comment {
    color: var(--kst-grey-light4);
}

.btn-history.no-comment:hover,
.btn-history.no-comment:focus,
.btn-history.no-comment:hover:focus {
    color: var(--kst-grey-light2);
    background-color: var(--kst-grey-light6);
}

.btn-history:focus:active,
.btn-history.nocomment:focus:active {
    background-color: var(--kst-grey-light5);
    color: var(--kst-grey-light1) !important;
    box-shadow: none;
}


/***   Slide: focus notes   ***/

.db-focus {
    display: flex;
    flex-direction: column;
}

.db-focus .h3-sub {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-focusnote-input {
    flex-grow: 1;
    resize: none;
    margin-bottom: 1rem;
}

/***********************************************************/
/*  ||  DASHBOARD - FLIP ICONS                             */

.db-icon-line {
    border-bottom: 1px solid var(--kst-dashboard-divider);
}

.db-icon-line:last-child {
    border: 0;
    margin-bottom: 2rem;
}

.db-icon-h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1.25rem 0;
    text-align: center;
}

.db-icon-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.db-icon-row a {
    color: unset;
    text-decoration: none;
}

.db-icon-flip {
    width: 78px;
    height: 78px;
    margin-bottom: 0.65rem;
}

.db-icon-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.db-icon-flip-inner.turn {
    transform: rotateY(180deg);
}

.db-icon {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    background-color: var(--kst-dashboard-iconflipside-bg);
    border-radius: 14px;
    box-shadow: var(--kst-dropshadow);
}

.db-icon img {
    width: 78px;
    border-radius: 14px;
}

.db-icon.back {
    transform: rotateY(180deg);
}

.c100 {
    font-size: 38px;
}

.repeat {
    font-size: 0.75rem;
    line-height: 1rem;
    margin-top: 0.15rem;
}

.repeat .fa-solid {
    font-size: 0.65rem;
}

.db-icon-name {
    width: 80px;
    line-height: 1.25rem;
    text-align: center;
    margin: 0;
}

@media (min-width: 768px) {
    .db-icon-h2 {
        font-size: 2rem;
    }
        
    .db-icon-row {
        gap: 2rem;
    }
    
    .db-icon-flip {
        width: 120px;
        height: 120px;
    }
    
    .db-icon {
        border-radius: 18px;
    }

    .db-icon img {
        width: 120px;
        height: 120px;
        border-radius: 18px;
    }
    
    .c100 {
        font-size: 64px;
    }
    
    .repeat {
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.5rem;
    }
        
    .repeat .fa-solid {
        font-size: 0.75rem;
    }

    .db-icon-name {
        width: 120px;
        font-size: 1.25rem;
        line-height: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .db-icon-row {
        gap: 4rem;
    }
}

/***********************************************************/
/*  ||  DUMMY DEMOPAGE MODALS                              */

/*** JUE calibration modals on exercise page ***/

.gauge-select {
    position: relative;
}

.gauge {
	position: absolute;
    /* z-index value doesn't seem to matter as long as it is set */
    z-index: 1000;
    top: 13px;
    left: 13px;
}

.gauge.off {
	display: none;
}

.gauge div {
	width: 10px;
	height: 1px;
	background-color: var(--kst-form-gauge-bg);
	margin-bottom: 1px;
}

.gauge div.on {
	background: var(--kst-form-gauge-bg-on);
}

.form-select.calib {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.calib-hl {
	font-weight: 600;
	text-align: center;
}

.calib-img-box {
	position: relative;
}

.calib-img-box.blur > div {
	filter: blur(3px);
	-webkit-filter: blur(3px);
}

.calib-img-box .calib-txt {
	position: absolute;
	bottom: 0;
    width: 100%;
    min-height: 3.25rem;
    background-color: var(--kst-modal-calibtxt-bg);
	padding-top: 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}

.calib-txt > p {
	line-height: 1.25rem;
	padding-left: 5rem;
    padding-right: 0.5rem;
    margin: 0;
}

.calib-txt > span:before {
	position: absolute;
	content: '';
	width: 5rem;
	height: 2.5rem;
    /* SVG: melon slice in speech bubble */
	background-image: url("data:image/svg+xml,%3Csvg width='67' height='40' viewBox='0 0 67 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.14716 48.7446C3.01739 48.749 2.851 48.7534 2.59551 48.7043C2.46776 48.6798 2.31519 48.642 2.13709 48.5689C1.95898 48.4957 1.54797 48.2149 1.54658 48.2137C1.54519 48.2126 1.00734 47.5488 1.00658 47.5474C1.00581 47.5459 0.781388 46.7583 0.781252 46.7565C0.781115 46.7547 0.789427 46.3102 0.82787 46.1451C0.866317 45.98 0.915866 45.854 0.963841 45.7497C1.34765 44.9158 1.51018 45.0048 1.64759 44.893C2.19722 44.4457 2.67795 44.1852 3.71436 43.5823C5.48738 42.5505 6.26464 40.554 6.53481 38.5334C6.77897 36.7073 6.56871 35.4503 6.52703 35.1651C3.13408 31.8562 0.886135 27.8397 0.886135 23.3942C0.886135 17.2503 4.85499 11.8366 10.8004 8.09394C16.7459 4.35127 24.7546 2.12247 33.5544 2.12247C42.3541 2.12247 50.3595 4.35123 56.3044 8.09394C62.2494 11.8367 66.2188 17.2504 66.2188 23.3942C66.2188 29.538 62.2494 34.9555 56.3044 38.6982C50.3595 42.4409 42.3541 44.666 33.5544 44.666C27.6596 44.666 22.5861 43.8697 17.7778 42.0738C17.0068 42.4564 13.0398 44.4272 9.20375 46.255C7.10584 47.2545 5.35548 48.0771 4.30487 48.4737C4.17354 48.5232 4.04875 48.5681 3.90084 48.6128C3.75293 48.6575 3.66628 48.7269 3.14716 48.7446V48.7446ZM10.4663 40.8546C13.1082 39.5646 16.4763 37.922 16.4763 37.922C16.7764 37.773 17.1083 37.6897 17.4473 37.6783C17.7863 37.6668 18.1237 37.7276 18.4343 37.8561C22.8823 39.6971 27.592 40.4153 33.5544 40.4153C41.5385 40.4153 48.7341 38.3499 53.7987 35.1614C58.8632 31.973 61.7084 27.8154 61.7084 23.3942C61.7084 18.9731 58.8632 14.8155 53.7987 11.627C48.7341 8.43859 41.5385 6.37682 33.5544 6.37682C25.5703 6.37682 18.3713 8.43855 13.3062 11.627C8.24114 14.8155 5.39653 18.9732 5.39653 23.3942C5.39653 26.8494 7.10821 30.105 10.2954 32.9244C10.66 33.247 10.9005 33.6745 10.9792 34.1399C10.9792 34.1399 11.3691 36.3803 11.0102 39.0643C10.9361 39.619 10.6211 40.2533 10.4663 40.8546Z' fill='%23585858'/%3E%3Cpath d='M48.6714 10.6271C48.5392 10.5777 48.3972 10.5539 48.2536 10.5572C48.11 10.5605 47.9676 10.5908 47.8345 10.6464C47.5656 10.7582 47.3509 10.9662 47.2374 11.2244C47.124 11.4826 47.1212 11.77 47.2296 12.0234C48.8778 15.8691 48.9564 20.3582 47.0683 24.5821C43.3252 32.956 33.3148 37.0599 24.6659 33.7543C20.3001 32.0857 17.1293 28.8447 15.538 24.9724C15.4861 24.8461 15.4084 24.7316 15.3092 24.6355C15.21 24.5393 15.0914 24.4634 14.9599 24.4121C14.8285 24.3608 14.687 24.3351 14.5434 24.3364C14.3998 24.3377 14.2569 24.366 14.123 24.4197C13.8527 24.5281 13.635 24.7333 13.5179 24.9901C13.4008 25.2469 13.3939 25.5344 13.4986 25.7893C15.2929 30.1555 18.8823 33.8184 23.7975 35.697C33.5319 39.4175 44.8631 34.7718 49.0751 25.3491C51.1999 20.5956 51.1158 15.515 49.2575 11.1792C49.2038 11.0537 49.1244 10.9404 49.0239 10.8457C48.9233 10.7509 48.8035 10.6767 48.6714 10.6271L48.6714 10.6271Z' fill='%23585858'/%3E%3Cpath d='M44.9764 23.7699C41.7323 31.0273 33.0294 34.5954 25.5327 31.7302C21.748 30.2837 18.5697 27.5993 17.6105 24.1086C17.4977 23.698 17.5353 23.0269 17.952 22.8565L30.964 17.5357L43.7894 12.2911C44.2474 12.1039 44.8585 12.4777 45.1166 12.8702C47.1106 15.9018 46.6128 20.109 44.9764 23.7699Z' fill='%23585858'/%3E%3Cpath d='M33.6542 20.8412C33.9156 21.4654 34.0987 23.344 33.4632 23.6047C32.8277 23.8653 31.6143 22.4092 31.3529 21.7849C31.0915 21.1607 31.3948 20.4433 32.0303 20.1827C32.6658 19.9221 33.3928 20.2169 33.6542 20.8412Z' fill='white' fill-opacity='0.75'/%3E%3Cpath d='M41.1035 18.2017C41.3649 18.826 41.5479 20.7046 40.9124 20.9653C40.2769 21.2259 39.0635 19.7697 38.8021 19.1455C38.5407 18.5213 38.844 17.8039 39.4795 17.5433C40.115 17.2827 40.8421 17.5775 41.1035 18.2017Z' fill='white' fill-opacity='0.75'/%3E%3Cpath d='M26.1093 23.7051C26.3707 24.3293 26.5538 26.208 25.9183 26.4686C25.2828 26.7292 24.0694 25.2731 23.808 24.6489C23.5466 24.0246 23.8499 23.3073 24.4853 23.0467C25.1208 22.7861 25.8479 23.0809 26.1093 23.7051Z' fill='white' fill-opacity='0.75'/%3E%3Cpath d='M32.1711 26.7911C32.4322 27.4153 32.6146 29.2941 31.9791 29.555C31.3436 29.8158 30.1309 28.3599 29.8698 27.7356C29.6086 27.1114 29.9121 26.3939 30.5476 26.1331C31.183 25.8722 31.9099 26.1668 32.1711 26.7911Z' fill='white' fill-opacity='0.75'/%3E%3Cpath d='M39.6222 24.1517C39.8834 24.7759 40.0658 26.6547 39.4303 26.9156C38.7948 27.1764 37.5821 25.7205 37.3209 25.0962C37.0598 24.472 37.3632 23.7545 37.9987 23.4937C38.6342 23.2328 39.3611 23.5274 39.6222 24.1517Z' fill='white' fill-opacity='0.75'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 0;
}

.calib-img-box img {
	border-radius: 20px;
}

.calib-img-box > button {
	position: absolute;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
}

.fa-solid.fa-icon-giant {
    font-size: 7rem;
}

/*** goals modals ***/

.modal .goals-img > img {
    width: 100%;
}

.fa-solid.fa-icon-big {
    font-size: 4rem;
}

.btn-goals-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
}

.btn-goals,
.btn-goals:focus,
.btn-goals:active {
    width: 90px;
    height: 75px;
    font-size: 0.75rem;
    text-transform: none;
    color: var(--kst-black);
    border: 0;
    border-radius: 1.25rem;
    background: var(--kst-modal-goals-squarebtn-bg);
    box-shadow: var(--kst-dropshadow);
    text-align: center;
    vertical-align: middle;
}

.btn-goals .fa-solid {
    display: block;
    font-size: 1.5rem;
    padding: 0.5rem 0 0.25rem;
}

.btn-goals.on {
    background-color: var(--kst-modal-goals-squarebtn-bg-highlight);
}

.goals-meh {
    color: var(--kst-modal-goals-meh-fontcolor);
}

.goals-yay {
    color: var(--kst-modal-goals-yay-fontcolor);    
}

/*** other modals ***/

.icon_speaker {
    position: absolute;
    font-size: 60px;
    color: #ffe500;
    cursor: pointer;
}

/*** green/pink/blue response-modals ***/

.modal-content.modal-cheer {
    background-color: var(--kst-lime);
    color: var(--kst-white);
}

.modal-content.modal-attention {
    background-color: var(--kst-magenta);
    color: var(--kst-white);
}

.modal-content.modal-suggestion {
    background-color: var(--kst-blue-light3);
    color: var(--kst-white);
}

.modal-content:is(.modal-cheer, .modal-attention, .modal-suggestion) :is(lottie-player, Vue3Lottie) {
    margin: 0 auto;
}

.testme {
    background-color: red;
}

.modal-star-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.modal-star-box .icon-star {
    width: 75px;
    height: 72px;
    background-size: 75px 72px;
}

.modal-star-box .icon-star-counter {
    font-size: 1rem;
}

.modal-bullet-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    max-width: 8rem;
}

.modal-bullet-icons > .fa-solid {
    color: var(--kst-grey-light5);
    text-shadow: var(--kst-dropshadow);
}

.modal-bullet-icons > .fa-solid.on {
    color: var(--kst-yellow);
}


/***********************************************************/
/*  ||  FAQ                                                */

.faq-back-to-top {
    position: sticky;
    top: 5rem;
    left: 100%;
    z-index: 1000;
    transition: opacity 0.1s ease-in-out;
}

.faq-list {
    margin-top: 1rem;
    padding-left: 1rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--kst-grey-light3);
    margin-bottom: 3rem;
}

.faq-list li {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.faq-topic  {
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--kst-grey-light3);
    margin-bottom: 3rem;
    position: relative;
}

.headline-link {
    text-decoration: none;
    color: currentColor;
}

.headline-link:hover {
    text-decoration: underline;
    color: currentColor;
}

@media (min-width: 992px) {
    .headline-link:hover::before {
        font-family: 'Font Awesome 6 Free';
        content: '\f0c1';
        position: absolute;
        left: -1.75rem;
        top: 0.25rem;
        color: var(--kst-link-fontcolor)
    }
}

.faq-topic h3  {
    text-transform: unset;
    margin-bottom: 1rem;
}


/***********************************************************/
/*  ||  CHRONICLE                                          */

.chronicle-buttons {
    margin: 3rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 4rem;
}

.chronicle-tile {
    width: 8.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.chronicle-tile label {
    text-align: center;
    margin-top: 0.25rem
}


/***********************************************************/
/*  ||  EXERCISE                                           */

/*** exercise page setup ***/

.exercise {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--kst-white);
}

.ex-main-contbox {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ex-main-curve {
    flex-grow: 1;
    background-color: var(--kst-white); /* TODO: color */
}

.topbox {
    padding: 0.5rem;
    background: var(--kst-grey-light6); /* TODO: color */
    display: flex;
    gap: 1rem;
    min-height: 5rem;
}

.icon-box,
.star-box {
    flex: 0 0 50px;
}

@media (min-width: 576px) {
    .icon-box,
    .star-box {
        flex-basis: 85px;
    }
}

@media (min-width: 768px) {
    .topbox {
        gap: 1.5rem
    }
    .icon-box,
    .star-box {
        flex-basis: 160px;
    }
}

@media (min-width: 1200px) {
    .icon-box,
    .star-box {
        flex-basis: 190px;
    }
}

.topbox.front {
    position: absolute;
    width: 100%;
}

/*** topbox > icon-box ***/

.icon-box {
    display: flex;
    align-items: center;
    max-height: 120px;
}

.icon-box button {
    border: 0;
    background-color: transparent;
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 1px;
    color: var(--kst-blue);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.icon-box button:disabled {
    color: var(--kst-grey-light3);
    text-shadow: none;
}

@media (min-width: 768px) {
    .icon-box button {
        width: 50px;
        height: 50px;
        font-size: 26px;
    }
}

@media (min-width: 1200px) {
    .icon-box button {
        width: 60px;
        height: 50px;
        font-size: 36px;
    }
}

/*** topbox > exercise-board ***/

.exercise-board {
    flex: 1 1 auto;
    align-self: center;
    justify-self: center;
    text-align: center;
}

.board-img {
    max-height: 150px;
    max-width: 100%;
    transition: ease-in-out 1s;
}

.topbox.front .board-img.large {
    max-height: 400px;
}

.exercise-board p {
    font-weight: 600;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .board-img {
        max-height: 200px;
    }

    .topbox.front .board-img.large {
        max-height: 600px;
    }

    .exercise-board p {
        font-size: 1.5rem;
        font-weight: 700;
    }
}

@media (min-width: 1024px) {
    .board-img {
        max-height: 300px;
    }
}

/* smartphone and landscape */
/* 
@media (max-width: 1000px) and (orientation: landscape) {
    .topbox {
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .board-img {
        max-height: 100px;
    }

    .board-img.large {
        max-height: 400px;
    }
}
*/

.exercise-board .explanation {
    color: var(--kst-grey-light1); /* TODO: color */
    font-weight: 400;
}

/*** topbox > star-box ***/

.star-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 120px;
}

.icon-star {
    width: 43px;
    height: 41px;
	background-image: url("data:image/svg+xml,%3Csvg width='75' height='72' viewBox='0 0 75 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_3769_15498)'%3E%3Cpath d='M41.0872 2.22477L49.266 18.7745L67.5661 21.4357C70.8499 21.9101 72.1649 25.9468 69.7849 28.2593L56.5473 41.0215L59.6786 59.2087C60.2421 62.4974 56.7748 64.9461 53.8673 63.4211L37.4997 54.9488L21.137 63.5361C18.2245 65.0611 14.762 62.6111 15.3245 59.3237L18.4558 41.1365L5.21444 28.2618C2.83567 25.9493 4.14993 21.9131 7.43321 21.4382L25.7333 18.777L33.9121 2.22727C35.3871 -0.760544 39.6247 -0.723419 41.0872 2.22477Z' fill='%23E2E8EB'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_3769_15498' x='0' y='0' width='75' height='72' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_3769_15498'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_3769_15498' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 43px 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease-in-out 0s;
}

.icon-star.large {
    transform: scale(1.5);
}

.icon-star-counter {
    font-size: 0.75rem;
    color: var(--kst-black);
    translate: 0 -2px;
}

@media (min-width: 768px) { 
    .star-box .icon-star {
        width: 55px;
        height: 52px;
        background-size: 55px 52px;
    }
}

@media (min-width: 1200px) { 
    .star-box .icon-star {
        width: 75px;
        height: 72px;
        background-size: 75px 72px;
    }
    .star-box .icon-star-counter {
        font-size: 1rem;
    }
}

.icon-star.n1 {
	background-image: url("data:image/svg+xml,%3Csvg width='75' height='72' viewBox='0 0 75 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_3769_15499)'%3E%3Cpath d='M41.0872 2.22477L49.266 18.7745L67.5661 21.4357C70.8499 21.9101 72.1649 25.9468 69.7849 28.2593L56.5473 41.0215L59.6786 59.2087C60.2421 62.4974 56.7748 64.9461 53.8673 63.4211L37.4997 54.9488L21.137 63.5361C18.2245 65.0611 14.762 62.6111 15.3245 59.3237L18.4558 41.1365L5.21444 28.2618C2.83567 25.9493 4.14994 21.9131 7.43321 21.4382L25.7333 18.777L33.9121 2.22727C35.3871 -0.760544 39.6247 -0.723419 41.0872 2.22477Z' fill='%23E2E8EB'/%3E%3Cpath d='M69.6372 28.5074L56.5473 41.0214L37.5 34.9299L49.266 18.7744L67.5661 21.4356C70.8575 21.9547 72.0792 25.8589 69.6372 28.5074Z' fill='%23FFE500'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_3769_15499' x='0' y='0' width='75' height='72' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_3769_15499'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_3769_15499' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}

.icon-star.n2 {
	background-image: url("data:image/svg+xml,%3Csvg width='75' height='72' viewBox='0 0 75 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_3769_15502)'%3E%3Cpath d='M41.0872 2.22477L49.266 18.7745L67.5661 21.4357C70.8499 21.9101 72.1649 25.9468 69.7849 28.2593L56.5473 41.0215L59.6786 59.2087C60.2421 62.4974 56.7748 64.9461 53.8673 63.4211L37.4997 54.9488L21.137 63.5361C18.2245 65.0611 14.762 62.6111 15.3245 59.3237L18.4558 41.1365L5.21444 28.2618C2.83567 25.9493 4.14993 21.9131 7.43321 21.4382L25.7333 18.777L33.9121 2.22727C35.3871 -0.760544 39.6247 -0.723419 41.0872 2.22477V2.22477Z' fill='%23E2E8EB'/%3E%3Cpath d='M49.2656 18.7754L37.5 34.9297V54.9492L53.8672 63.4219C57.0946 65.0224 60.1032 62.5138 59.6777 59.209L56.5469 41.0215L69.6367 28.5078C72.0786 25.8593 70.8578 21.9547 67.5664 21.4355L49.2656 18.7754Z' fill='%23FFE500'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_3769_15502' x='0' y='0' width='75' height='72' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_3769_15502'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_3769_15502' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}

.icon-star.n3 {
	background-image: url("data:image/svg+xml,%3Csvg width='75' height='72' viewBox='0 0 75 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_3769_15506)'%3E%3Cpath d='M41.0872 2.22477L49.266 18.7745L67.5661 21.4357C70.8499 21.9101 72.1649 25.9468 69.7849 28.2593L56.5473 41.0215L59.6786 59.2087C60.2421 62.4974 56.7748 64.9461 53.8673 63.4211L37.4997 54.9488L21.137 63.5361C18.2245 65.0611 14.762 62.6111 15.3245 59.3237L18.4558 41.1365L5.21444 28.2618C2.83567 25.9493 4.14993 21.9131 7.43321 21.4382L25.7333 18.777L33.9121 2.22727C35.3871 -0.760544 39.6247 -0.723419 41.0872 2.22477V2.22477Z' fill='%23E2E8EB'/%3E%3Cpath d='M49.2658 18.7754L37.5001 34.9297L18.4552 41.1367L15.3243 59.3242C14.8026 62.8887 18.2789 64.8856 21.2892 63.457L37.5001 54.9492L53.8673 63.4219C57.0947 65.0224 60.1033 62.5138 59.6779 59.209L56.547 41.0215L69.6368 28.5078C72.0788 25.8593 70.8579 21.9547 67.5665 21.4355L49.2658 18.7754Z' fill='%23FFE500'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_3769_15506' x='0' y='0' width='75' height='72' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_3769_15506'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_3769_15506' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}

.icon-star.n4 {
	background-image: url("data:image/svg+xml,%3Csvg width='76' height='72' viewBox='0 0 76 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_3769_15509)'%3E%3Cpath d='M41.9388 2.22477L50.1176 18.7745L68.4177 21.4357C71.7015 21.9101 73.0164 25.9468 70.6364 28.2593L57.3989 41.0215L60.5302 59.2087C61.0937 62.4974 57.6263 64.9461 54.7188 63.4211L38.3513 54.9488L21.9886 63.5361C19.0761 65.0611 15.6136 62.6111 16.1761 59.3237L19.3073 41.1365L6.06601 28.2618C3.68724 25.9493 5.00148 21.9131 8.28476 21.4382L26.5849 18.777L34.7636 2.22727C36.2386 -0.760544 40.4763 -0.723419 41.9388 2.22477V2.22477Z' fill='%23E2E8EB'/%3E%3Cpath d='M50.1174 18.7754L38.3517 34.9297L26.5842 18.7773L8.28534 21.4375C4.73545 22.0508 3.72739 26.1461 6.2248 28.4062L19.3068 41.1367L16.176 59.3242C15.6543 62.8887 19.1305 64.8856 22.1408 63.457L38.3517 54.9492L54.7189 63.4219C57.9463 65.0224 60.9549 62.5138 60.5295 59.209L57.3986 41.0215L70.4885 28.5078C72.9304 25.8593 71.7095 21.9547 68.4182 21.4355L50.1174 18.7754Z' fill='%23FFE500'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_3769_15509' x='0.843262' y='0' width='75.0083' height='72' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_3769_15509'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_3769_15509' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}

.icon-star.n5 {
	background-image: url("data:image/svg+xml,%3Csvg width='76' height='72' viewBox='0 0 76 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_3769_15505)'%3E%3Cpath d='M41.6414 2.22477L49.8202 18.7745L68.1203 21.4357C71.4041 21.9101 72.7191 25.9468 70.3391 28.2593L57.1015 41.0215L60.2328 59.2087C60.7963 62.4974 57.329 64.9461 54.4215 63.4211L38.0539 54.9488L21.6912 63.5361C18.7787 65.0611 15.3162 62.6111 15.8787 59.3237L19.01 41.1365L5.76864 28.2618C3.38987 25.9493 4.70414 21.9131 7.98742 21.4382L26.2875 18.777L34.4663 2.22727C35.9413 -0.760544 40.1789 -0.723419 41.6414 2.22477Z' fill='%23FFE500'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_3769_15505' x='0.554199' y='0' width='75' height='72' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_3769_15505'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_3769_15505' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}

/*** stepper buttons ***/

.stepper {
    position: absolute;
    top: 0.5rem;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

@media (min-width: 768px) {
    .stepper {
        flex-direction: row;
    }
}

/*** articulation feedback & junior feedback ***/

.feedback {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0.75rem;
}

@media (min-width: 768px) {
    .feedback {
        top: 1.25rem;
    }
}

.articulation-feedback {
    display: flex;
    gap: 0.75rem;
}

.arti-but {
    width: 3rem;
    height: 0.85rem;
    border-width: 2px;
    border-radius: 50rem;
	cursor: pointer;
}
@media (min-width: 768px) {
    .arti-but {
        width: 4rem;
    }
}

.arti-but span {
	width: 0;
    height: 100%;
    display: block;
}

.arti-but.fi-1 {
    border: 2px solid var(--kst-feedback-1);
    background: var(--kst-feedback-bg);
}

.arti-but.fi-1 span {
    background: var(--kst-feedback-1);
}

.arti-but.fi-2 {
    border: 2px solid var(--kst-feedback-2);
    background: var(--kst-feedback-bg);
}

.arti-but.fi-2 span {
    background: var(--kst-feedback-2);
}

.arti-but.fi-3 {
    border: 2px solid var(--kst-feedback-3);
    background: var(--kst-feedback-bg);
}

.arti-but.fi-3 span {
    background: var(--kst-feedback-3);
}

.arti-but.fi-4 {
    border: 2px solid var(--kst-feedback-4);
    background: var(--kst-feedback-bg);
}

.arti-but.fi-4 span {
    background: var(--kst-feedback-4);
}

.arti-but.fi-5 {
    border: 2px solid var(--kst-feedback-5);
    background: var(--kst-feedback-bg);
}

.arti-but.fi-5 span {
    background: var(--kst-feedback-5);
}

.arti-but.fi-6 {
    border: 2px solid var(--kst-feedback-6);
    background: var(--kst-feedback-bg);
}

.arti-but.fi-6 span {
    background: var(--kst-feedback-6);
}

.arti-but.disabled {
    border: 2px solid var(--kst-feedback-disabled);
    background: var(--kst-feedback-bg-disabled);
}

.arti-but.disabled span {
    background: var(--kst-feedback-disabled);
}

.junior-bullet-icons {
    display: flex;
    gap: 1rem;
}

.junior-bullet-icons > .fa-solid {
    color: var(--kst-grey-light5);
    text-shadow: var(--kst-dropshadow);
}

.junior-bullet-icons > .fa-solid.on {
    color: var(--kst-yellow);
}

/*** articulation messages ***/

.arti-alert {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    translate: -50% 1.75rem;
    width: 250px;
    font-size: 0.875rem;
    line-height: 1.1rem;
    color: var(--kst-body-fontcolor);
    border-radius: 24px;
    padding: 0.75rem 1rem;
    box-shadow: var(--kst-dropshadow);
    border: 2px solid var(--kst-black);
    background-color: var(--kst-white);
}

@media (min-width: 768px) {
    .arti-alert {
        top: 1.5rem;
        width: 340px;
        font-size: 1rem;
        line-height: 1.5rem;
        padding: 1rem 1.25rem;
    }
}

.arti-alert p {
    margin: 0;
}

.arti-alert.on {
    color: var(--kst-white);
}

.arti-alert.fi-1 {
    border: 2px solid var(--kst-feedback-1);
}

.arti-alert.fi-1.on {
    background: var(--kst-feedback-1);
}

.arti-alert.fi-2 {
    border: 2px solid var(--kst-feedback-2);
}

.arti-alert.fi-2.on {
    background: var(--kst-feedback-2);
}

.arti-alert.fi-3 {
    border: 2px solid var(--kst-feedback-3);
}

.arti-alert.fi-3.on {
    background: var(--kst-feedback-3);
}

.arti-alert.fi-4 {
    border: 2px solid var(--kst-feedback-4);
}

.arti-alert.fi-4.on {
    background: var(--kst-feedback-4);
}

.arti-alert.fi-5 {
    border: 2px solid var(--kst-feedback-5);
}

.arti-alert.fi-5.on {
    background: var(--kst-feedback-5);
}

.arti-alert.fi-6 {
    border: 2px solid var(--kst-feedback-6);
}

.arti-alert.fi-6.on {
    background: var(--kst-feedback-6);
}

/*** calibration button  ***/

.ex-main-contbox .sidebar {
    position: absolute;
    right: 1rem;
    margin-top: 0.5rem;
}

.sidebar .btn-calib {
    width: 1.75rem;
    height: 1.75rem;
}

@media (min-width: 768px) {
    .sidebar .btn-calib {
        font-size: 1.25rem;
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* blue melon SVG, fits secondary color scheme, right size for .btn-icon-sm button */
.icon-melon {
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.1336 3.6879e-06C24.004 0.000949958 23.8759 0.0274206 23.7565 0.0779036C23.6371 0.128386 23.5289 0.201893 23.4379 0.294223C23.2541 0.480452 23.1518 0.732068 23.1534 0.99373C23.1551 1.25539 23.2607 1.50567 23.4469 1.68952C26.2751 4.47958 28.0265 8.34838 28.0265 12.6392C28.0265 21.1458 21.1595 28.026 12.6539 28.026C8.36056 28.026 4.48048 26.2655 1.69004 23.4335C1.59908 23.3411 1.49081 23.2676 1.37142 23.2171C1.25202 23.1665 1.12384 23.1401 0.994201 23.1391C0.864562 23.1381 0.736007 23.1628 0.615881 23.2115C0.495755 23.2603 0.386415 23.3322 0.294107 23.4232C0.107736 23.6069 0.00195434 23.8571 2.68082e-05 24.1188C-0.00190072 24.3804 0.100184 24.6321 0.283829 24.8185C3.43018 28.0118 7.82025 29.9995 12.6539 29.9995C22.2269 29.9995 30 22.2113 30 12.6393C30 7.81039 28.0218 3.43029 24.8332 0.284604C24.741 0.193555 24.6317 0.121561 24.5117 0.0727317C24.3917 0.0239027 24.2632 -0.000805004 24.1336 1.99989e-05L24.1336 3.6879e-06Z' fill='%230057A3'/%3E%3Cpath d='M25.9795 12.6242C25.9795 19.9964 20.0095 25.978 12.6374 25.978C8.91553 25.978 5.23832 24.7029 3.12215 21.9925C2.87324 21.6737 2.65286 21.079 2.93887 20.793L11.87 11.8619L20.673 3.05882C20.9873 2.7445 21.641 2.86624 22.0051 3.12115C24.818 5.09015 25.9795 8.90534 25.9795 12.6242V12.6242Z' fill='%230057A3'/%3E%3Cpath d='M15.3615 13.8452C15.8162 14.2998 16.6769 15.8678 16.2407 16.304C15.8045 16.7402 14.2366 15.8794 13.7819 15.4248C13.3273 14.9701 13.3123 14.2479 13.7485 13.8118C14.1847 13.3756 14.9069 13.3905 15.3615 13.8452V13.8452Z' fill='white'/%3E%3Cpath d='M20.5737 8.9721C21.0283 9.42675 21.8891 10.9947 21.4529 11.4309C21.0167 11.8671 19.4487 11.0064 18.9941 10.5517C18.5394 10.0971 18.5245 9.3749 18.9607 8.93871C19.3969 8.50251 20.119 8.51746 20.5737 8.9721V8.9721Z' fill='white'/%3E%3Cpath d='M10.1494 18.9448C10.604 19.3994 11.4648 20.9674 11.0286 21.4036C10.5924 21.8398 9.0244 20.979 8.56976 20.5244C8.11512 20.0697 8.10016 19.3476 8.53636 18.9114C8.97256 18.4752 9.69473 18.4901 10.1494 18.9448V18.9448Z' fill='white'/%3E%3Cpath d='M16.2961 19.5893C16.7507 20.0439 17.6115 21.6119 17.1753 22.0481C16.7391 22.4843 15.1711 21.6235 14.7165 21.1689C14.2618 20.7143 14.2469 19.9921 14.6831 19.5559C15.1193 19.1197 15.8415 19.1346 16.2961 19.5893V19.5893Z' fill='white'/%3E%3Cpath d='M21.5083 14.7162C21.9629 15.1709 22.8237 16.7389 22.3875 17.1751C21.9513 17.6113 20.3833 16.7505 19.9286 16.2959C19.474 15.8412 19.4591 15.119 19.8952 14.6828C20.3314 14.2466 21.0536 14.2616 21.5083 14.7162V14.7162Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    width: 1rem;
    height: 1rem;
}

/* hovered melon SVG, icon color changed to btn-secondary-highlight (skyblue/#0a8eed), seed-color white*/
.icon-melon:hover:not(:active), 
.icon-melon:focus:not(:active) {
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.1336 3.6879e-06C24.004 0.000949958 23.8759 0.0274206 23.7565 0.0779036C23.6371 0.128386 23.5289 0.201893 23.4379 0.294223C23.2541 0.480452 23.1518 0.732068 23.1534 0.99373C23.1551 1.25539 23.2607 1.50567 23.4469 1.68952C26.2751 4.47958 28.0265 8.34838 28.0265 12.6392C28.0265 21.1458 21.1595 28.026 12.6539 28.026C8.36056 28.026 4.48048 26.2655 1.69004 23.4335C1.59908 23.3411 1.49081 23.2676 1.37142 23.2171C1.25202 23.1665 1.12384 23.1401 0.994201 23.1391C0.864562 23.1381 0.736007 23.1628 0.615881 23.2115C0.495755 23.2603 0.386415 23.3322 0.294107 23.4232C0.107736 23.6069 0.00195434 23.8571 2.68082e-05 24.1188C-0.00190072 24.3804 0.100184 24.6321 0.283829 24.8185C3.43018 28.0118 7.82025 29.9995 12.6539 29.9995C22.2269 29.9995 30 22.2113 30 12.6393C30 7.81039 28.0218 3.43029 24.8332 0.284604C24.741 0.193555 24.6317 0.121561 24.5117 0.0727317C24.3917 0.0239027 24.2632 -0.000805004 24.1336 1.99989e-05L24.1336 3.6879e-06Z' fill='%230A8EED'/%3E%3Cpath d='M25.9795 12.6242C25.9795 19.9964 20.0095 25.978 12.6374 25.978C8.91553 25.978 5.23832 24.7029 3.12215 21.9925C2.87324 21.6737 2.65286 21.079 2.93887 20.793L11.87 11.8619L20.673 3.05882C20.9873 2.7445 21.641 2.86624 22.0051 3.12115C24.818 5.09015 25.9795 8.90534 25.9795 12.6242V12.6242Z' fill='%230A8EED'/%3E%3Cpath d='M15.3615 13.8452C15.8162 14.2998 16.6769 15.8678 16.2407 16.304C15.8045 16.7402 14.2366 15.8794 13.7819 15.4248C13.3273 14.9701 13.3123 14.2479 13.7485 13.8118C14.1847 13.3756 14.9069 13.3905 15.3615 13.8452V13.8452Z' fill='white'/%3E%3Cpath d='M20.5737 8.9721C21.0283 9.42675 21.8891 10.9947 21.4529 11.4309C21.0167 11.8671 19.4487 11.0064 18.9941 10.5517C18.5394 10.0971 18.5245 9.3749 18.9607 8.93871C19.3969 8.50251 20.119 8.51746 20.5737 8.9721V8.9721Z' fill='white'/%3E%3Cpath d='M10.1494 18.9448C10.604 19.3994 11.4648 20.9674 11.0286 21.4036C10.5924 21.8398 9.0244 20.979 8.56976 20.5244C8.11512 20.0697 8.10016 19.3476 8.53636 18.9114C8.97256 18.4752 9.69473 18.4901 10.1494 18.9448V18.9448Z' fill='white'/%3E%3Cpath d='M16.2961 19.5893C16.7507 20.0439 17.6115 21.6119 17.1753 22.0481C16.7391 22.4843 15.1711 21.6235 14.7165 21.1689C14.2618 20.7143 14.2469 19.9921 14.6831 19.5559C15.1193 19.1197 15.8415 19.1346 16.2961 19.5893V19.5893Z' fill='white'/%3E%3Cpath d='M21.5083 14.7162C21.9629 15.1709 22.8237 16.7389 22.3875 17.1751C21.9513 17.6113 20.3833 16.7505 19.9286 16.2959C19.474 15.8412 19.4591 15.119 19.8952 14.6828C20.3314 14.2466 21.0536 14.2616 21.5083 14.7162V14.7162Z' fill='white'/%3E%3C/svg%3E%0A");
}

/* active melon SVG, icon color changed to btn-secondary-active (nightblue/#0a3f70), seed-color btn-secondary-bg-active (grey-light2/#a8a8a8)*/
.icon-melon:active, 
.icon-melon:focus:active {
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.1336 3.6879e-06C24.004 0.000949958 23.8759 0.0274206 23.7565 0.0779036C23.6371 0.128386 23.5289 0.201893 23.4379 0.294223C23.2541 0.480452 23.1518 0.732068 23.1534 0.99373C23.1551 1.25539 23.2607 1.50567 23.4469 1.68952C26.2751 4.47958 28.0265 8.34838 28.0265 12.6392C28.0265 21.1458 21.1595 28.026 12.6539 28.026C8.36056 28.026 4.48048 26.2655 1.69004 23.4335C1.59908 23.3411 1.49081 23.2676 1.37142 23.2171C1.25202 23.1665 1.12384 23.1401 0.994201 23.1391C0.864562 23.1381 0.736007 23.1628 0.615881 23.2115C0.495755 23.2603 0.386415 23.3322 0.294107 23.4232C0.107736 23.6069 0.00195434 23.8571 2.68082e-05 24.1188C-0.00190072 24.3804 0.100184 24.6321 0.283829 24.8185C3.43018 28.0118 7.82025 29.9995 12.6539 29.9995C22.2269 29.9995 30 22.2113 30 12.6393C30 7.81039 28.0218 3.43029 24.8332 0.284604C24.741 0.193555 24.6317 0.121561 24.5117 0.0727317C24.3917 0.0239027 24.2632 -0.000805004 24.1336 1.99989e-05L24.1336 3.6879e-06Z' fill='%230A3F70'/%3E%3Cpath d='M25.9795 12.6242C25.9795 19.9964 20.0095 25.978 12.6374 25.978C8.91553 25.978 5.23832 24.7029 3.12215 21.9925C2.87324 21.6737 2.65286 21.079 2.93887 20.793L11.87 11.8619L20.673 3.05882C20.9873 2.7445 21.641 2.86624 22.0051 3.12115C24.818 5.09015 25.9795 8.90534 25.9795 12.6242V12.6242Z' fill='%230A3F70'/%3E%3Cpath d='M15.3615 13.8452C15.8162 14.2998 16.6769 15.8678 16.2407 16.304C15.8045 16.7402 14.2366 15.8794 13.7819 15.4248C13.3273 14.9701 13.3123 14.2479 13.7485 13.8118C14.1847 13.3756 14.9069 13.3905 15.3615 13.8452V13.8452Z' fill='%23A8A8A8'/%3E%3Cpath d='M20.5737 8.9721C21.0283 9.42675 21.8891 10.9947 21.4529 11.4309C21.0167 11.8671 19.4487 11.0064 18.9941 10.5517C18.5394 10.0971 18.5245 9.3749 18.9607 8.93871C19.3969 8.50251 20.119 8.51746 20.5737 8.9721V8.9721Z' fill='%23A8A8A8'/%3E%3Cpath d='M10.1494 18.9448C10.604 19.3994 11.4648 20.9674 11.0286 21.4036C10.5924 21.8398 9.0244 20.979 8.56976 20.5244C8.11512 20.0697 8.10016 19.3476 8.53636 18.9114C8.97256 18.4752 9.69473 18.4901 10.1494 18.9448V18.9448Z' fill='%23A8A8A8'/%3E%3Cpath d='M16.2961 19.5893C16.7507 20.0439 17.6115 21.6119 17.1753 22.0481C16.7391 22.4843 15.1711 21.6235 14.7165 21.1689C14.2618 20.7143 14.2469 19.9921 14.6831 19.5559C15.1193 19.1197 15.8415 19.1346 16.2961 19.5893V19.5893Z' fill='%23A8A8A8'/%3E%3Cpath d='M21.5083 14.7162C21.9629 15.1709 22.8237 16.7389 22.3875 17.1751C21.9513 17.6113 20.3833 16.7505 19.9286 16.2959C19.474 15.8412 19.4591 15.119 19.8952 14.6828C20.3314 14.2466 21.0536 14.2616 21.5083 14.7162V14.7162Z' fill='%23A8A8A8'/%3E%3C/svg%3E%0A");
}

/* adjust melon icon size for .btn-icon button */
@media (min-width: 768px) {
    .icon-melon {
        background-size: 1.5rem 1.5rem;
        width: 1.5rem;
        height: 1.5rem;    
    }
}

/*** calibration input-range ***/

.sidebar .zoom-range {
    --offsetZoomRange: 0;
    display: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    transform: rotate(270deg);
    transform-origin: left top;
    translate: 6px var(--offsetZoomRange);
    min-width: 100px;
}

.zoom-range::-webkit-slider-thumb, 
.zoom-range::-webkit-slider-thumb:active {
    -webkit-appearance: none;
    background: var(--kst-blue) !important;
    box-shadow: none;
    border: 5px solid var(--kst-white);
    box-shadow: 0 0 0 2px var(--kst-blue) !important;
    padding: 8px;
    margin-top: -10px;
}

.zoom-range::-moz-range-thumb, 
.zoom-range:focus::-moz-range-thumb {
    background: var(--kst-blue);
    box-shadow: none;
    border: 5px solid var(--kst-white);
    box-shadow: 0 0 0 2px var(--kst-blue);
}

.zoom-range::-ms-thumb {
    background: var(--bs-blue);
}

.zoom-range::-moz-range-track {
    background-color: var(--kst-grey-light2);
}

.zoom-range::-webkit-slider-runnable-track {
    background-color: var(--kst-grey-light2);
}

.zoom-range::-ms-track {
    background-color: var(--kst-grey-light2);
}

/*** exercise controls with pagination and profile select ***/

.exercise-controls {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
}

.exercise-controls .switch-profiles {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) { 
    .exercise-controls .switch-profiles {
        gap: 1.5rem;
        margin-bottom: 0.75rem;
    }
}

.exercise-controls .switch-profiles > .btn-icon.on {
    border: 0.1rem solid var(--kst-yellow);  /* TODO: color */
    outline: 0.25rem solid var(--kst-yellow);  /* TODO: color */
}

.exercise-pagination .btn {
    font-size: 1.25rem;
}

.exercise-pagination .btn-browse,
.exercise-pagination .btn-browse:is(:hover,:active) {
    box-shadow: none;
    text-shadow: var(--kst-dropshadow);
    background-color: transparent;
}

.exercise-controls .pagination-text {
    color: var(--kst-blue); /* TODO: color */
    margin: 0;
}

@media (min-width: 768px) {
    .exercise-controls {
        font-size: 1rem;
    }

    .exercise-pagination .btn {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 2rem;
    }
}


/***********************************************************/
/*  ||  EXERCISE - CARD GAMES BASIC STYLES                 */

.game-controls {
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.game-container {
    --kst-game-minwidth: 250px;
    --kst-game-maxwidth: 650px;
    --kst-game-colcount: 1;
    --kst-game-rowcount: 1;
    --kst-game-container-aspectratio: calc(var(--kst-game-colcount) / var(--kst-game-rowcount));
    --kst-game-heightdiff: calc(51px + 8rem + 8rem); /* navbar height + game-container y-margins + estimated topbox-height */
    width: max(var(--kst-game-minwidth), min(var(--kst-game-maxwidth), 100vw, calc(calc(100vh - var(--kst-game-heightdiff)) * var(--kst-game-container-aspectratio))));
    margin: 3rem auto 5rem auto; /* preserve some space for controls */
    display: flex;
    flex-wrap: wrap;
    perspective: 1200px;
}

@media (min-width: 576px) {
    .game-container {
        --kst-game-heightdiff: calc(51px + 8rem + 5.5rem); /* adjust estimated topbox-height */
    }
}

/* generic game-container modifier classes to set up the number of game tiles in a single row */
.game-container.game-2col { --kst-game-colcount: 2; }
.game-container.game-3col { --kst-game-colcount: 3; }
.game-container.game-4col { --kst-game-colcount: 4; }
.game-container.game-5col { --kst-game-colcount: 5; }

/* generic game-container modifier classes to set up the number of game tile rows that are fit into the viewport */
.game-container.game-2row { --kst-game-rowcount: 2; }
.game-container.game-3row { --kst-game-rowcount: 3; }
.game-container.game-4row { --kst-game-rowcount: 4; }
.game-container.game-5row { --kst-game-rowcount: 5; } 

.game-tile {
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    width: calc(100% / var(--kst-game-colcount));
    aspect-ratio: 1;
}

.game-card {
    width: 87%;
    height: 87%;
    text-align: center;
    transform-style: preserve-3d;
    transition: transform 0.8s;
    container-name: game-card;
}

.game-card.turn {
    transform: rotateY(180deg);    
}

.game-card:focus-visible {
    border-radius: 0.85rem;
    outline-offset: 0.15rem;
}

.card-surface {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: var(--kst-blue);
    border-radius: 1rem;
    box-shadow: var(--kst-dropshadow);
}

.card-surface img {
    aspect-ratio: 1;
    width: 100%;
    border-radius: 1rem;
}

.card-surface img.grayscale {
    filter: grayscale(0.9) 
            brightness(1.35) 
            contrast(0.85) 
            blur(0.5px);
    transition: 0.5s filter ease-out;
}

.card-surface img.card-border { 
    border: 0.25rem solid var(--kst-blue);
}

.card-surface.backside {
    transform: rotateY(180deg);
    color: var(--kst-white);
    background-image: repeating-linear-gradient(
        -63.434949deg, 
        rgba(0, 0, 0, 0.1) 0% 25%, 
        transparent 25% 50%,
        rgba(0, 0, 0, 0.1) 50% 75%, 
        transparent 75% 100%
    );
    background-size: 2rem 4rem;
}

.card-surface .card-icon,
.card-surface .card-icon-overlay {
    font-size: 4rem; /* Fallback font-size */
    /* font-size: clamp(2rem, 12vw, 5rem); */
    font-size: min(clamp(2rem, 12vw, 5rem), 10vh);
}

.card-surface .card-icon-overlay {
    position: absolute;
    color: var(--kst-gray);
    --kst-text-shadow-color: var(--kst-white);
    text-shadow: 3px 0 var(--kst-text-shadow-color),
                 0 3px var(--kst-text-shadow-color),
                 -3px 0 var(--kst-text-shadow-color),
                 0 -3px var(--kst-text-shadow-color);
    opacity: 0.85;
}

.game-card:not(.game-card-picked) .card-icon-overlay {
    display: none;
}

.game-card-picked img {
    filter: grayscale(0.9) 
            brightness(1.35) 
            contrast(0.85) 
            blur(0.5px);
    transition: 0.15s filter ease;
}

.card-options {
    position: absolute;
    bottom: 0.4rem;
    width: calc(100% - 0.8rem);
    display: flex;
    justify-content: space-between;
}

.card-options .btn-secondary.btn-gamecard {
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.85);
}

.game-tile .text-success {
    color: var(--kst-lime) !important;
}

.game-tile .text-fail {
    color: var(--kst-red) !important;
}


/* card game variant: rhyme game */

.game-rhyme {
    padding-top: 4rem;
}

.game-rhyme .game-container {
    --kst-game-maxwidth: 750px;
    --kst-game-heightdiff: 510px;
    margin-top: 2rem;
}

.rhyme-question-img {
    text-align: center;
}

.rhyme-question-img > img {
    border-radius: 100%;
    aspect-ratio: 1;
    width: 180px;
    max-width: 50vw;
    outline: 0.3rem solid var(--kst-blue);
    outline-offset: 0.15rem;
}

@media (min-width: 576px) AND (min-height: 720px) {
    .game-rhyme .game-container {
        --kst-game-heightdiff: 550px;
    }
    .rhyme-question-img > img {
        width: 225px;
    }
}


/***********************************************************/
/*  ||  EXERCISE - THEORY                                  */

.auto-columns :is(figure,.accordion,.break-avoid) {
    break-inside: avoid;
}

.auto-columns .break-after {
    break-after: column;
}

.auto-columns :is(h1,h2):not(.accordion-header) {
    column-span: all;
    margin-top: 3rem;
}

@media (min-width:768px) {
    .auto-columns {
        column-count: 2;
        column-gap: 3rem;
        widows: 3;
        orphans: 3;
        margin-bottom: 2rem;
    }
}

.kst-video {
    border-radius: 1.5rem;
}

.theory-pagination {
    margin: 3rem auto;
    width: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theory-infobox {
    position: relative;
    background-color: var(--kst-white);
    border-radius: 1.5rem;
    padding: 0.85rem 1rem 0.1rem 3.5rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.theory-infobox .fa-solid.initial {
    position: absolute;
    top: 1.15rem;
    left: 0.5rem;
}


/***********************************************************/
/*  ||  VIDEO UPLOAD V2                                    */

.video-upload-container video {
    border-radius: 1.5rem;
    width: 100%;
}

.video-upload-container .playback-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.video-upload-container .playback-time {
    border-radius: 1.5rem;
    background: rgba(0,0,0, 0.6);
    color: white;
    text-align: center;
    min-width: 5rem;
    padding: 0 0.5rem 0.15rem;
    position: absolute;
    left: 0.5rem;
    bottom: 0.75rem;
}

.video-editing-controls {
    --trackInset: 1.65rem;
    --track-width: calc(100% - var(--trackInset));
    --trackUnit: calc((var(--track-width) - var(--trackInset) / 2) / 100);
    --sectionStart: ;
    --sectionEnd: ;
    --playbackPosition: ;
    
    display: grid;
    align-content: center;
    position: relative;
    width: 100%;
    height: 2.0rem;
    border-radius: 0.75rem / 50%;
    background-color: var(--kst-grey-light2);
    cursor: pointer;
    margin-bottom: 1rem;
}

.video-editing-controls > * { 
    grid-area: 1/1;
}

/* empty canvas */
.video-editing-controls .video-controls-background {
    z-index: 1; /* lowest manual z-index inside video-editing-controls container */
    width: 100%;
    height: 2em;
    border-radius: 0.75rem / 50%;
    filter: saturate(0.5) brightness(1.5) contrast(0.5);
}

/* selected video section, marked with blue borders */
.video-editing-controls::before {
    position: absolute;
    z-index: 1; /* must be same or higher than z-index of canvas.video-controls-background */
    top: 0;
    bottom: 0;
    left: calc(var(--trackInset) / 2 + var(--sectionStart) * var(--trackUnit));
    width: calc(var(--trackInset) / 2 + (var(--sectionEnd) - var(--sectionStart)) * var(--trackUnit));
    border: 0.15rem solid var(--kst-blue);
    content: "";
    background-color: transparent;
}

.video-editing-controls .mask-start,
.video-editing-controls .mask-end {
    position: absolute;
    height: 100%;
    background-color: var(--kst-body-bg);
    opacity: 0.65;
}

.video-editing-controls .mask-start {
    left: 0;
    width: calc(var(--trackInset) / 2 + var(--sectionStart) * var(--trackUnit));
}

.video-editing-controls .mask-end {
    right: 0;
    width: calc(var(--track-width) - var(--sectionEnd) * var(--trackUnit));
}

.video-editing-controls > input[type=range] {
    z-index: 1; /* must be same or higher than z-index of .video-editing-controls::before (blue-bordered section) */
    width: var(--track-width);
    min-height: 2em;
    background: none;
    pointer-events: none;
}

.video-editing-controls > input#sectionStart {
    margin-right: var(--trackInset);
}

.video-editing-controls > input#sectionEnd {
    margin-left: var(--trackInset);
}

.video-editing-controls > input#playbackPosition {
    margin-left: calc( var(--trackInset) / 2 );
    margin-right: calc( var(--trackInset) / 2 );    
    width: calc(var(--track-width) - 2px); /* avoid-strange-gap-hack */
    padding-left: 2px;
}

.video-editing-controls > input[type=range], 
.video-editing-controls > input[type=range]::-webkit-slider-thumb, 
.video-editing-controls > input[type=range]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
}
.video-editing-controls > input[type=range]::-webkit-slider-runnable-track {
    border: none;
    width: 100%;
    height: 2rem;
    border-radius: 0.75rem / 50%;
}

.video-editing-controls > input[type=range]::-moz-range-track {
    border: none;
    width: 100%;
    height: 2rem;
    border-radius: 0.75rem / 50%;
}

.video-editing-controls > input[type=range]::-ms-track {
    border: none;
    width: 100%;
    height: 2rem;
    border-radius: 0.75rem / 50%;
}

.video-editing-controls > input[type=range]::-webkit-slider-thumb {
    box-sizing: border-box;
    border-color: var(--kst-form-contrast-light);
    margin-top: -0.125rem;
    width: 0.75rem;
    height: 2.2rem;
    border-radius: 0.5rem;
    background-color: var(--kst-form-contrast-light);
    pointer-events: auto;
    cursor: ew-resize;
}
.video-editing-controls > input#sectionStart::-webkit-slider-thumb,
.video-editing-controls > input#sectionEnd::-webkit-slider-thumb {
    margin-top: 0;
    width: 1rem;
    height: 2rem;
    border-radius: 75% / 50%;
    border: 0;
    background-repeat: no-repeat;
    background-color: var(--kst-blue);
    background-position: center;
    background-size: auto 0.75rem;
}
.video-editing-controls > input#sectionStart::-webkit-slider-thumb {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    /* fa-chevron-right, white */            
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z' fill='white'/%3E%3C/svg%3E");
}
.video-editing-controls > input#sectionEnd::-webkit-slider-thumb {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* fa-chevron-left, white */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z' fill='white'/%3E%3C/svg%3E");
}

.video-editing-controls > input[type=range]::-moz-range-thumb {
    box-sizing: border-box;
    margin-top: 0;
    border-color: var(--kst-form-contrast-light);     
    width: 0.75rem;
    height: 2.2rem;
    border-radius: 0.5rem;
    background-color: var(--kst-form-contrast-light);
    pointer-events: auto;
    cursor: ew-resize;
}
.video-editing-controls > input#sectionStart::-moz-range-thumb,
.video-editing-controls > input#sectionEnd::-moz-range-thumb {
    width: 1rem;
    height: 2rem;
    border-radius: 75% / 50%;
    border: 0;
    background-repeat: no-repeat;
    background-color: var(--kst-blue);
    background-position: center;
    background-size: auto 0.75rem;
}       
.video-editing-controls > input#sectionStart::-moz-range-thumb {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    /* fa-chevron-right, white */            
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z' fill='white'/%3E%3C/svg%3E");
}
.video-editing-controls > input#sectionEnd::-moz-range-thumb {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* fa-chevron-left, white */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z' fill='white'/%3E%3C/svg%3E");
}

.video-editing-controls > input[type=range]::-ms-thumb {
    box-sizing: border-box;
    margin-top: 0;
    border-color: var(--kst-form-contrast-light);     
    width: 0.75rem;
    height: 2.2rem;
    border-radius: 0.5rem;
    background-color: var(--kst-form-contrast-light);
    pointer-events: auto;
    cursor: ew-resize;
}
.video-editing-controls > input#sectionStart::-ms-thumbb,
.video-editing-controls > input#sectionEnd::-ms-thumb {
    width: 1rem;
    height: 2rem;
    border-radius: 75% / 50%;
    border: 0;
    background-repeat: no-repeat;
    background-color: var(--kst-blue);
    background-position: center;
    background-size: auto 0.75rem;
}  
.video-editing-controls > input#sectionStart::-ms-thumb {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    /* fa-chevron-right, white */            
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z' fill='white'/%3E%3C/svg%3E");
}
.video-editing-controls > input#sectionEnd::-ms-thumb {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* fa-chevron-left, white */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z' fill='white'/%3E%3C/svg%3E");
}

.video-editing-controls > input[type=range]::-ms-fill-lower {
    display: none;
}

.video-upload-container .video-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3.5rem;
}

.video-upload-container .video-upload-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--kst-grey-light5);
    padding: 0.75rem 1rem 1rem;
    margin-bottom: 2rem;
    border-radius: 1.5rem;
}

.video-upload-progress:not(.progress-finished) .progress-circle {
    margin: 0 0.5rem;
}

.video-upload-progress .c100 {
    font-size: 64px;
}

.video-upload-progress .upload-progress-description {
    margin: 0;
    color: var(--kst-red);
}

.video-upload-progress.progress-finished .upload-progress-description {
    color: var(--kst-lime);
}

.video-upload-progress.progress-finished .progress-circle {
    width: 5rem;
    text-align: center;
    color: var(--kst-lime)
}


/***********************************************************/
/*  ||  VIDEO LIST / MY VIDEOS                             */

.videotiles-container {
    --tile-colgap: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--tile-colgap);
    row-gap: calc(var(--tile-colgap) + 0.5rem);
}

.videotiles-container .videotile {
    width: 100%;
    background-color: var(--kst-white);
    border-radius: 1.75rem;
    padding: 0.75rem;
}

@media (min-width: 576px) {
    .videotiles-container .videotile {
        width: calc((100% - var(--tile-colgap)) / 2 )
    }
}

.videotile .kst-video {
    width: 100%;
    max-height: 330px;
}

/***********************************************************/
/*  ||  QUIZ FORM ELEMENTS                                 */

.kst-quiz {
    background-color: var(--kst-grey-light5);
    padding: 0.75rem 1rem 1rem;
    margin-bottom: 2rem;
    border-radius: 1.5rem;
}

.kst-quiz legend {
    font-size: 1.35rem;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.kst-quiz .quiz-group {
    margin-bottom: 2rem;
}

.kst-quiz .quiz-question {
    margin-bottom: 0.5rem;
    position: relative;
}

.kst-quiz .quiz-question-info {
    color: var(--kst-grey-light2);
    white-space: nowrap;
}

.kst-quiz .form-check-input:disabled,
.kst-quiz .form-check-input:disabled ~ .form-check-label {
    opacity: 1;
    pointer-events: none;
}

.kst-quiz .form-check-input:checked:disabled {
    border-color: var(--kst-form-contrast-light);
    background-color: var(--kst-form-contrast-light);
}

.kst-quiz .form-check.quiz-right .form-check-input:checked {
    border-color: var(--kst-green);
    background-color: var(--kst-lime);
}

.kst-quiz .form-check.quiz-right input ~ .form-check-label {
    font-weight: 600;
    color: var(--kst-green);
}

.kst-quiz .form-check.quiz-wrong .form-check-input {
    border-color: var(--kst-red);
    background-color: var(--kst-red-light2);
}

.kst-quiz .quiz-right .form-check-input:checked[type="checkbox"] {
    /* green checkmark */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23207521' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.kst-quiz .quiz-wrong .form-check-input:checked[type="checkbox"] {
    /* red checkmark */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%239e0012' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.kst-quiz .quiz-right .form-check-input:checked[type="radio"] {
    /* small darkgreen circle in the center of the radio button */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23207521'/%3e%3c/svg%3e");
}

.kst-quiz .quiz-wrong .form-check-input:checked[type="radio"] {
    /* small darkred circle in the center of the radio button */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%239e0012'/%3e%3c/svg%3e");
}

.kst-quiz.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%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='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.125rem;
    background-position: top 1rem right 1rem;
}

.kst-quiz.is-invalid > .invalid-feedback {
    display: block !important;
}

.kst-quiz .quiz-group.is-invalid > .invalid-feedback {
    display: block;
}

.kst-quiz .quiz-group.is-invalid ~ .invalid-feedback {
    display: none;
}

.kst-quiz .quiz-group.is-invalid .quiz-question::after {
    display: inline-block;
    content: "";
    width: 1.125rem;
    height: 1.125rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%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='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.125rem;
    position: absolute;
    top: 0.25rem;
    margin-left: 0.25rem;
}


/***********************************************************/
/*  ||  LIKERT QUIZ ELEMENTS                               */

.likert-quiz .form-range.quiz-new::-moz-range-thumb,
.likert-quiz .form-range.quiz-new::-moz-range-thumb:active {
    background-color: var(--kst-grey-light2);
}
.likert-quiz .form-range.quiz-new::-webkit-slider-thumb,
.likert-quiz .form-range.quiz-new::-webkit-slider-thumb:active {
    background-color: var(--kst-grey-light2);
}

.likert-quiz .form-range.quiz-right:disabled::-moz-range-thumb {
    background-color: var(--kst-green);
}
.likert-quiz .form-range.quiz-right:disabled::-webkit-slider-thumb {
    background-color: var(--kst-green);
}

.likert-quiz .form-range.quiz-wrong:disabled::-moz-range-thumb {
    background-color: var(--kst-red);
}
.likert-quiz .form-range.quiz-wrong:disabled::-webkit-slider-thumb {
    background-color: var(--kst-red);
}

.likert-quiz .likert-options > .quiz-right,
.likert-quiz .likert-options > .quiz-right::after {
    color: var(--kst-green);
}

.likert-quiz .likert-options > .quiz-wrong,
.likert-quiz .likert-options > .quiz-wrong::after {
    color: var(--kst-red);
}


/***********************************************************/
/*  ||  INTERACTIVE - PYRAMID                              */

.noscroll-main {
    background-color: var(--kst-white);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.heading-container {
    --topbox-x-spacer: 4rem;
    padding-right: var(--topbox-x-spacer);
    background-color: var(--kst-grey-light6);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
@media (min-width: 768px) {
    .heading-container {
        --topbox-x-spacer: 5rem;
        min-height: 3.5rem;
    }
}

.heading-container .icon-box {
    flex: 0 0 var(--topbox-x-spacer);
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.heading-container .heading {
    flex: 1 0 0;
}

.heading-container .heading :is(h1,.h1) {
    font-size: 1.2rem;
    text-transform: initial;
    margin: 0.75rem;
}
@media (min-width: 768px) {
    .heading-container .heading :is(h1,.h1) {
        font-size: 1.5rem;
        margin: 1rem;
    }       
}

.heading-container .heading > * {
    text-align: center;
}

.input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 4rem;
    padding: 0 0.75rem;
}

.situationstack-container {
    --input-width: 16rem;
}

.situationstack-label {
    margin-left: 0.75rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.situationstack {
    min-width: var(--input-width);
    min-height: 3rem;
}

.situation-item,
.situation-item-background {
    position: absolute;
    width: var(--input-width);
}

.situation-item-background > .form-control {
    border-bottom: 1px solid var(--kst-grey-light2);
    transform: translateY(3px);
    box-shadow: none;
}

.situation-item > .form-control[readonly] {
    background-color: var(--kst-form-bg-dim);
}

.situation-item > .form-control.situation-hard {
    background-color: var(--kst-red);
    color: var(--kst-white);
}

.situation-item > .form-control.situation-medium {
    background-color: var(--kst-yellow);
}

.situation-item > .form-control.situation-easy {
    background-color: var(--kst-green);
    color: var(--kst-white);
}

.situation-item > .form-control.situation-grey {
    background-color: var(--kst-grey);
    color: var(--kst-white);
}

.situation-item > .form-control.situation-lightgrey {
    background-color: var(--kst-grey-light2);
}

.situation-item > .form-control.situation-skyblue {
    background-color: var(--kst-skyblue);
    color: var(--kst-white);
}

.situation-item > .form-control.situation-blue {
    background-color: var(--kst-blue);
    color: var(--kst-white);
}

.situation-item > .form-control.situation-nightblue {
    background-color: var(--kst-nightblue);
    color: var(--kst-white);
}

.situation-item > .form-control.situation-green {
    background-color: var(--kst-green);
    color: var(--kst-white);
}

.situation-item > .form-control.situation-lime {
    background-color: var(--kst-lime);
}

.situation-item > .form-control.situation-yellow {
    background-color: var(--kst-yellow);
}

.situation-item > .form-control.situation-gold {
    background-color: var(--kst-gold);
}

.situation-item > .form-control.situation-orange {
    background-color: var(--kst-orange);
    color: var(--kst-white);
}

.situation-item > .form-control.situation-red {
    background-color: var(--kst-red);
    color: var(--kst-white);
}

.situation-item > .form-control.situation-magenta {
    background-color: var(--kst-magenta);
    color: var(--kst-white);
}

.situation-item > .form-control.situation-violet {
    background-color: var(--kst-violet);
    color: var(--kst-white);
}

.situation-item:not(.situation-item-placed):nth-of-type(n+4) > .form-control {
    box-shadow: none;
}

.situation-item-placed > .form-control {
    height: 1.75rem;
    width: 8rem;
    overflow: hidden;
    font-size: 0.85rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 1.75rem;
}
@media (min-width: 768px) {
    .situation-item-placed > .form-control {
        width: 12rem;
    }
}

.situation-item-placed > .dismiss-item {
    position: absolute;
    top: 0;
    right: 0.33rem;
    border: 0;
    background: transparent;
}

.situation-item-placed > .form-control:is(
    .situation-easy,
    .situation-hard,
    .situation-grey,
    .situation-skyblue,
    .situation-blue,
    .situation-nightblue,
    .situation-green,
    .situation-orange,
    .situation-red,
    .situation-magenta,
    .situation-violet
    ) + .dismiss-item {
    color: var(--kst-white);
}

.situation-item.situation-item-placed {
    transition: transform 0.5s ease-in-out 0s;
}

.situation-item.situation-item-placed.large {
    transform: scale(1.5);
}

.noscroll-grow {
    background-color: var(--kst-white);
    min-height: 20rem;
    width: 100%;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.noscroll-grow .dropzone-img-container {
    --input-width: auto;
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
}

.noscroll-grow .dropzone-img-container .img-fluid {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.noscroll-grow .dropzone-img-container .dropzone {
    position: absolute;
    border-radius: 0.5rem;
}

.dropzone-highlight {
    border: 2px dotted var(--kst-grey-light2);
}

.noscroll-grow .dropzone-img-container  .dropzone:hover {
    border: 2px dotted var(--kst-grey-light2);
}

/* modification of the stepper buttons from the exercise page: different position */
.stepper-pyramid {
    top: unset;
    bottom: 1rem;
}


/***********************************************************/
/*  ||  EXERCISE PDF FULLSCREEN                            */

.heading-container.heading-pdf-options {
    padding: 0.25rem var(--topbox-x-spacer) 0.5rem;
    justify-content: center;
    gap: 0.5rem;
}

.heading-pdf-options .pdf-pagenumber {
    width: 4rem;
    text-align: center;
}


/***********************************************************/
/*  ||  JS-EDITOR STYLES                                   */

.editor-grid {
    --grid-columns: 1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: 1rem;
}

.editor-grid.editor-grid-2col {
    --grid-columns: 2;
}

.editor-grid.editor-grid-2col > .colspan-2 {
    grid-column: 1 / 3;
}

.editor-grid > :not(.polygon) {
    padding: 0.5rem 0.75rem;
    margin: 0;
    border-radius: 1rem;
    border: 1px solid var(--kst-grey-light5);
    background-color: var(--kst-white);
}

.editor-grid .polygon {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.editor-grid .polygon .arrow-body {
    background-color: var(--kst-blue);
    color: var(--kst-white);
    width: 150px;
    width: clamp(10rem, 75%, 14rem);
    min-height: 50px;
    padding: 0 0.5rem;
    flex-grow: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.editor-grid .polygon .arrow-tip {
    background-color: var(--kst-blue);
    width: 200px;
    width: clamp(10rem, 75%, 14rem);
    min-height: 2rem;
    clip-path: polygon(0 0, 0 -5%, 100% -5%, 100% 0, 50% 100%);
}