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


/***********************************************************/
/*  ||  FONTS AND GLOBAL VARIABLES                         */

@font-face {
    font-family: "Palanquin";
    src: url("../fonts/palanquin/Palanquin-Regular.woff2") format("woff2"), url("../fonts/palanquin/Palanquin-Regular.woff") format("woff");
    font-weight: 400;
}

@font-face {
    font-family: "Palanquin";
    src: url("../fonts/palanquin/Palanquin-SemiBold.woff2") format("woff2"), url("../fonts/palanquin/Palanquin-SemiBold.woff") format("woff");
    font-weight: 600;
}

@font-face {
    font-family: "Palanquin";
    src: url("../fonts/palanquin/Palanquin-Bold.woff2") format("woff2"), url("../fonts/palanquin/Palanquin-Bold.woff") format("woff");
    font-weight: 700;
}

:root {
    --kst-sansserif-fontlist: Palanquin, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

     /* base color variables */
    --kst-white: #fff;
    --kst-white-rgba80: rgba(255, 255, 255, 0.8);
    --kst-white-rgba50: rgba(255, 255, 255, 0.5);
    --kst-black: #000;
    --kst-grey: #585858;
    --kst-grey-light1: #808080;
    --kst-grey-light2: #a8a8a8; /* form placeholder */
    --kst-grey-light3: #c7d2da;
    --kst-grey-light4: #ddd;
    --kst-grey-light5: #e2e8eb; /* form-control bg */
    --kst-grey-light6: #f4f6f7; /* body-bg */
    --kst-grey-light7: #fafcfd; /* btn-bg-secondary */
        --kst-blue-light0: #008bd0; /*info*/
        --kst-blue-light0: #dbecff; /*link-light-active*/
        --kst-blue-light0: #dbecff; /*link-light-hover*/
        --kst-blue-light0: #9dcbff; /*link-light*/
        --kst-blue-light0: #2ba5fc; /**/
        --kst-blue-light0: #6da2d6; /**/
        --kst-blue-light0: #85b4dd; /**/   
    --kst-skyblue: #0a8eed; /* link/button hover*/
    --kst-skyblue-rgba65: rgba(10, 142, 237, 0.65); /* link underline hover */
    --kst-skyblue-light1: #38a3f0;
    --kst-skyblue-light2: #79c0f3; /* table sortby hover*/
    --kst-skyblue-light3: #b9dcf5;
    --kst-blue: #0057a3; /* header/footer */
    --kst-blue-rgba65: rgba(0, 87, 163, 0.65); /* link underline */
    --kst-blue-light1: #2e7abd;
    --kst-blue-light2: #4682be; /*link*/
    --kst-blue-light2-rgb65: rgb(70, 130, 190, 0.65); /* link underline */
    --kst-blue-light3: #008bd0; /*modal-suggestion*/
    --kst-blue-light4: #95c1e7;
    --kst-blue-light5: #ceddeb;
    --kst-nightblue: #0a3f70; /* button active */
    --kst-green: #2c982e;
    --kst-green-dark1: #207521; /* quiz input right bg-img */
    --kst-lime: #a4be04;
    --kst-yellow: #ffe500;
    --kst-gold: #fac80a;
    --kst-orange: #eb6a27;
    --kst-red: #e2001a;
    --kst-red-light1: #ff4057; /* inline-button alert hover */
    --kst-red-light2: #ff808e; /* quiz input wrong bg */
    --kst-red-dark1: #9e0012; /* quiz input wrong bg-img */
    --kst-magenta: #cd007b;
    --kst-violet: #81197f;

    /* KST element variables */
    --kst-header-bg: var(--kst-blue);
    --kst-footer-fontcolor: var(--kst-white);
    --kst-footer-bg: var(--kst-blue);
    --kst-nav-fontcolor: var(--kst-white);
    --kst-nav-fontcolor-highlight: var(--kst-grey);
    --kst-nav-fontcolor-disabled: var(--kst-white-rgba50);
    --kst-nav-bg-highlight: var(--kst-yellow);
    --kst-navsub-fontcolor-highlight: var(--kst-yellow);
    --kst-nav-badge-fontcolor: var(--kst-white);
    --kst-nav-badge-bg: var(--kst-red);
    --kst-body-bg: var(--kst-grey-light6);
    --kst-body-fontcolor: var(--kst-grey);
    --kst-link-fontcolor: var(--kst-blue-light2);
    --kst-link-underline: var(--kst-blue-light2-rgb65); 
    --kst-link-fontcolor-highlight: var(--kst-skyblue);
    --kst-link-underline-highlight: var(--kst-skyblue-rgba65);
    --kst-mark-highlight: var(--kst-yellow);
    --kst-btn-primary-fontcolor: var(--kst-white);
    --kst-btn-primary-bg: var(--kst-blue);
    --kst-btn-primary-bg-highlight: var(--kst-skyblue);
    --kst-btn-primary-bg-active: var(--kst-nightblue);
    --kst-btn-secondary-fontcolor: var(--kst-blue);
    --kst-btn-secondary-bg: var(--kst-grey-light7);
    --kst-btn-secondary-fontcolor-highlight: var(--kst-skyblue);
    --kst-btn-secondary-bg-highlight: var(--kst-grey-light7);
    --kst-btn-secondary-fontcolor-active: var(--kst-nightblue);
    --kst-btn-secondary-bg-active: var(--kst-grey-light2);
    --kst-btn-fontcolor-disabled: var(--kst-grey);
    --kst-btn-bg-disabled: var(--kst-grey-light2);
    --kst-btn-link-disabled: var(--kst-grey);
    --kst-btn-badge-fontcolor: var(--kst-white);
    --kst-btn-badge-bg: var(--kst-red);
    --kst-btn-inline-alert-fontcolor: var(--kst-red);
    --kst-btn-inline-alert-fontcolor-highlight: var(--kst-red-light1);
    --kst-btn-inline-alert-fontcolor-active: var(--kst-magenta);
    --kst-table-bordercolor: var(--kst-blue);
    --kst-table-head-fontcolor: var(--kst-white);
    --kst-table-head-bg: var(--kst-blue);
    --kst-table-row-bg-highlight: var(--kst-skyblue-light3);
    --kst-table-head-sortby-fontcolor-highlight: var(--kst-skyblue-light2);
    --kst-table-body-btn-alert-fontcolor: var(--kst-red);
    --kst-form-fontcolor: var(--kst-grey);
    --kst-form-bg-dim: var(--kst-grey-light5); 
    --kst-form-bg-light: var(--kst-grey-light7);
    --kst-form-placeholder-fontcolor: var(--kst-grey-light2);
    --kst-form-border: var(--kst-grey-light2);
    --kst-form-contrast-dark: var(--kst-nightblue);
    --kst-form-contrast-light: var(--kst-gold);
    --kst-form-contrast-light-disabled: var(--kst-grey-light3);
    --kst-form-validation-fail: var(--kst-red);
    --kst-form-validation-pass: var(--kst-green);
    --kst-accordion-bg: var(--kst-white);
    --kst-accordion-titlebutton-fontcolor: var(--kst-blue);
    --kst-progress-bg: var(--kst-grey-light5);
    --kst-progress-bar: var(--kst-lime);
    --kst-progress-label-fontcolor: var(--kst-grey-light1);
    --kst-modal-section-bg: var(--kst-grey-light6);
    --kst-alert-fontcolor: var(--kst-white);
    --kst-alert-bg-neutral: var(--kst-grey-light1);
    --kst-alert-bg-success: var(--kst-lime);
    --kst-alert-bg-warning: var(--kst-gold);
    --kst-alert-bg-danger: var(--kst-red);
    --kst-alert-link-fontcolor: var(--kst-blue-light4);
    --kst-alert-link-fontcolor-highlight: var(--kst-skyblue-light1);

    --kst-form-gauge-bg: var(--kst-grey-light2);
    --kst-form-gauge-bg-on: var(--kst-blue);

    /* KST page variables */
    --kst-dashboard-slider-bg: var(--kst-white);
    --kst-dashboard-slider-bullet-bg: var(--kst-grey-light5);
    --kst-dashboard-slider-bullet-bg-highlight: var(--kst-yellow);
    --kst-dashboard-slider-star-outline: var(--kst-grey);
    --kst-dashboard-slider-circle-bg: var(--kst-grey-light3);
    --kst-dashboard-slider-circle-bg-pass: var(--kst-lime);
    --kst-dashboard-slider-circle-bg-fail: var(--kst-white);
    --kst-dashboard-slider-circle-border-fail: var(--kst-grey-light3);
    --kst-dashboard-slider-progressbar-bg: var(--kst-grey-light5);
    --kst-dashboard-slider-progressbar-fill: var(--kst-lime);
    --kst-dashboard-slider-progressbar-line: var(--kst-grey);
    --kst-dashboard-slider-weekbadge-bg: var(--kst-white);
    --kst-dashboard-slider-weekbadge-border: var(--kst-grey-light3);
    --kst-dashboard-slider-weekbadge-bg-pass: var(--kst-lime);
    --kst-dashboard-slider-weekbadge-bg-fail: var(--kst-red);
    --kst-dashboard-slider-weekbadge-fontcolor-fail: var(--kst-white);
    --kst-dashboard-slider-progresscup-border: var(--kst-grey);
    --kst-dashboard-slider-progresscup-indicator: var(--kst-lime);
    --kst-dashboard-slider-barchart-bg: var(--kst-grey-light3);
    --kst-dashboard-slider-barchart-bg-highlight: var(--kst-yellow);
    --kst-dashboard-divider: var(--kst-grey-light2);
    --kst-dashboard-iconname-fontcolor: var(--kst-body-fontcolor);
    --kst-dashboard-iconflipside-bg: var(--kst-white);
    --kst-support-stickydate-bg: var(--kst-grey-light7);
    --kst-support-msg-light-bg: var(--kst-white);
    --kst-support-msg-light-border: var(--kst-grey-light5);
    --kst-support-msg-dark-bg: var(--kst-blue);
    --kst-support-msg-dark-fontcolor: var(--kst-white);
    --kst-support-msg-dark-link-fontcolor: var(--kst-blue-light4);
    --kst-support-msg-dark-link-fontcolor-highlight: var(--kst-skyblue-light3);
    --kst-support-uploadbadge-bg: var(--kst-blue);
    --kst-support-uploadbadge-fontcolor: var(--kst-white);
    --kst-support-adminoptions-border: var(--kst-grey-light2);
    --kst-supportlist-issue-bg: var(--kst-grey-light5);
    --kst-modal-calibtxt-bg: var(--kst-white-rgba80);
    --kst-modal-goals-squarebtn-fontcolor: var(--kst-black);
    --kst-modal-goals-squarebtn-bg: var(--kst-grey-light5);
    --kst-modal-goals-squarebtn-bg-highlight: var(--kst-yellow);
    --kst-modal-goals-meh-fontcolor: var(--kst-orange);
    --kst-modal-goals-yay-fontcolor: var(--kst-lime);

    /* --kst-warning: var(--kst-gold);
    --kst-success: var(--kst-lime); */

    --kst-feedback-1: var(--kst-green);
    --kst-feedback-2: var(--kst-lime);
    --kst-feedback-3: var(--kst-gold);
    --kst-feedback-4: var(--kst-orange);
    --kst-feedback-5: var(--kst-magenta);
    --kst-feedback-6: var(--kst-violet);
    --kst-feedback-bg: var(--kst-white);
    --kst-feedback-disabled: var(--kst-grey-light3);
    --kst-feedback-bg-disabled: var(--kst-grey-light5);


    --kst-rainbow-gradient:
        var(--kst-green) 0%, 
        var(--kst-lime) 16.67%, 
        var(--kst-yellow) 33.33%, 
        var(--kst-orange) 50%,
        var(--kst-red) 66.67%, 
        var(--kst-magenta) 83.33%, 
        var(--kst-violet) 100%;

    --kst-dropshadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    --kst-focusvisible-outline: 1px solid var(--kst-skyblue-light2);

    --kst-centeredmain-width: 932px;
}


/***********************************************************/
/*  ||  PAGE LAYOUT                                        */

/* basic setup for fixed navbar and sticky footer */

html {
    /* prevent fixed header from covering anchor links */
    scroll-padding-top: calc(45px + 0.75rem);
    overflow-y: auto;
    height: 100%;
}

.kst-page {
    height: 100%;
    padding-top: 45px;
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kst-main {
    position: relative;
    margin-bottom: 1.5rem;
}

.kst-header {
    height: 45px;
    padding: 0 0.25rem 7px;
    background-color: var(--kst-header-bg);
    background-image: linear-gradient(90deg,var(--kst-rainbow-gradient));
    background-size: 100% 7px;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

.kst-header .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.centered-main {
    max-width: var(--kst-centeredmain-width);
    margin-left: auto;
    margin-right: auto;
}

.kst-footer {
    margin-top: auto;
    padding: 0.75rem;
}

@media (min-width: 768px) {

    html {
        scroll-padding-top: calc(51px + 1rem);
    }

    .kst-page {
        padding-top: 51px;
    }

    .kst-header {
        height: 51px;
        padding: 0 1rem 0.5rem;
    }

    .kst-header .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .kst-main,
    .dashboard-main {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* exclude some containers from having a max-width when .centered-main is not set */
    .kst-main:not(.centered-main) > :not(:is(.table-responsive,.modal)) {
        max-width: var(--kst-centeredmain-width);
    }

    .kst-footer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}


/***********************************************************/
/*  ||  GENERAL MARKUP STYLINGS                            */

.kst-page {
    font-family: var(--kst-sansserif-fontlist);
    color: var(--kst-body-fontcolor);
    background-color: var(--kst-body-bg);
}

h1, .h1 {
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
}

h2, .h2 {
    /* font-size: 20px; */
    /* font-weight: 700; */
    font-size: 1.5rem;
    text-transform: uppercase;
    
}

h3, .h3 {
    /* font-size: 1.1rem; */
    /* font-weight: 700; */
    /* font-size: 1.2rem; */
    font-size: 1.1rem;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    h1, .h1 {
        font-size: 2rem;
        margin-top: 2rem;
    }

    h2, .h2 {
        font-size: 1.75rem;
    }

    h3, .h3 {
        /* font-size: 1.5rem; */
        font-size: 1.35rem;
    }
}

h4, .h4, 
h5, .h5, 
h6, .h6  {
    font-weight: 600;
}

a,
.btn-link {
    color: var(--kst-link-fontcolor);   
    text-decoration: underline;
    text-decoration-color: var(--kst-link-underline);
    text-underline-offset: 0.25rem;
}

a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus {
    color: var(--kst-link-fontcolor-highlight);
    text-decoration-color: var(--kst-link-underline-highlight);
}

a:focus-visible {
    outline: var(--kst-focusvisible-outline);
}

[target='_blank']:not(.suppress-target-blank-icon) {
    padding-right: 0.8em;
}

[target='_blank']:not(.suppress-target-blank-icon)::after {
    font-family: 'Font Awesome 6 Free';
    content: '\f35d';
    font-size: 0.65em;
    position: absolute;
    margin: 0.15em 0 0 0.2em;
}

b, strong {
    font-weight: 700;
}

mark, .mark {
    padding: 0;
    background-color: var(--kst-mark-highlight);
}

select option {
    font-family: var(--kst-sansserif-fontlist);
}

figcaption {
    font-style: italic;
    margin-top: 0.5rem;
}

audio {
    height: 2.5rem;
    border-radius: 10rem;
    box-shadow: var(--kst-dropshadow);
}

audio::-webkit-media-controls-enclosure {
    background-color: var(--kst-btn-secondary-bg);
}

body.wait, 
body.wait * {
    cursor: wait !important;
}

/***********************************************************/
/*  ||  HEADER + NAVBAR                                    */

.icon_logo {
    display: inline-block;
    width: 42px;
    height: 25px;
    /* KST-logo small size - figurative mark only */
	background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 51 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.853797 18.54C0.844587 18.568 0.830773 18.5913 0.821564 18.6193C3.7363 9.9458 10.74 0.00463867 23.3106 0.00463867C48.8157 0.00463867 50.0544 23.2053 50.0544 27.2974C48.9953 27.2974 44.1742 27.302 38.9157 27.3114C38.9434 26.9012 38.9157 26.4818 38.9157 26.0623C38.9157 15.2356 31.1247 6.44565 20.4097 6.44565C13.8343 6.44565 7.67327 9.75471 3.89286 14.8162C4.91969 14.2056 6.1123 13.8561 7.38778 13.8561C11.2096 13.8561 14.3086 16.9974 14.3086 20.861C14.3086 24.7247 11.205 27.866 7.38778 27.866C3.57053 27.866 0.462402 24.734 0.462402 20.8657C0.462402 20.0501 0.600542 19.2671 0.853797 18.5354V18.54Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    margin: 0.5rem 0.25rem 0 0.75rem
}

.icon_curve {
    display: inline-block;
    width: 1.85rem; /* 29.6px @ 16px base */
    height: 1.2rem; /* 19.2px @ 16px base */
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 37 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg %3E%3Cpath d='M9.588 10.574C7.043 16.024 6.586 16.597 2.428 19.642L1.245 20.397C0.6 20.919 0.279 21.891 0.571 22.659C0.85 23.394 1.484 23.992 2.31 23.993L18.197 24L34.083 23.993C34.91 23.992 35.544 23.394 35.822 22.659C36.114 21.891 35.793 20.919 35.149 20.397L33.965 19.642C29.808 16.597 29.35 16.024 26.805 10.574C24.043 4.087 21.185 0 18.197 0C15.208 0 12.35 4.087 9.588 10.574Z' style='fill:white%3Bfill-rule:nonzero%3B'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.navbar-center {
    flex-grow: 1;
}

.nav-link {
    line-height: 1rem;
    text-transform: uppercase;
    padding: 0.68rem 0.5rem;
}

button.nav-link {
    background-color: transparent;
    border: 0;
}

.nav-link.svg {    
    padding-top: 0.55rem;
    padding-bottom: 0.53rem;
}

.nav-link .fa-solid {
    font-size: 22px;
    line-height: 0;
    vertical-align: -2px;
}

.nav-link.on {
    color: var(--kst-nav-fontcolor-highlight) !important;
    background-color: var(--kst-nav-bg-highlight);
}

.nav-link.on .icon_curve {
    /* same SVG like .icon_curve but with #585858 fill color*/
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 37 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg %3E%3Cpath d='M9.588 10.574C7.043 16.024 6.586 16.597 2.428 19.642L1.245 20.397C0.6 20.919 0.279 21.891 0.571 22.659C0.85 23.394 1.484 23.992 2.31 23.993L18.197 24L34.083 23.993C34.91 23.992 35.544 23.394 35.822 22.659C36.114 21.891 35.793 20.919 35.149 20.397L33.965 19.642C29.808 16.597 29.35 16.024 26.805 10.574C24.043 4.087 21.185 0 18.197 0C15.208 0 12.35 4.087 9.588 10.574Z' style='fill:%23585858%3Bfill-rule:nonzero%3B'/%3E%3C/g%3E%3C/svg%3E");
}

.nav .dropdown-menu {
    background-color: var(--kst-header-bg);
    border: 0;
    border-radius: 0;
    transform: translate(0, 45px) !important;
}

.nav .dropdown-item {
    color: var(--kst-nav-fontcolor);
    text-transform: uppercase;
    padding: 0.25rem 2rem 0.25rem 1rem;
}

.nav .dropdown-item.disabled {
    color: var(--kst-nav-fontcolor-disabled);
}

.nav .dropdown-item:hover,
.nav .dropdown-item:focus,
.nav .dropdown-item.active {
    color: var(--kst-nav-fontcolor-highlight);
    background-color: var(--kst-nav-bg-highlight);
}

.nav .submenu {
	position: relative !important;
	transform: none !important;
	border: 0;
	display: none;
}

.nav .submenu .dropdown-item {
    text-transform: none;
    padding-left: 2rem;
}

.nav .submenu .dropdown-item:is(:hover,:focus,:active,.active) {
    color: var(--kst-navsub-fontcolor-highlight);
    background-color: transparent;
}

.nav .nav-badge {
    position: absolute;
    color: var(--kst-nav-badge-fontcolor);
    background-color: var(--kst-nav-badge-bg);
    border-radius: 50rem;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* top-level nav-badge, top-right corner placement */
.nav-link > .nav-badge {
    left: 100%;
    top: 0;
    transform: translateX(-80%);
    padding: 0.1rem 0.45rem 0.25rem
}

/* sub-level nav-badge, right side placement */
.nav .dropdown-item > .nav-badge {
    margin: 0.2rem 0 0 0.2rem;
    padding: 0.1rem 0.4rem 0.3rem 0.4rem;
}

@media (min-width: 440px) {
    .nav-link {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .icon_logo {  
        margin-right: 0.75rem;
    }
}

@media (min-width: 576px) {
    .nav-link {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .icon_logo {  
        margin-left: 1rem;
        margin-right: 1.25rem;
    }
}

@media (min-width: 768px) {
    .icon_logo {
        width: 111px;
        height: 30px;
        /* KST-logo medium size - figurative mark with "KST" text mark */
	    background-image: url("data:image/svg+xml,%3Csvg width='111' height='29' viewBox='0 0 111 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50.903 0.228088V24.8565H46.9229V0.228088H50.903ZM51.2286 12.1389L60.1198 0.228088H64.5864L55.7719 12.1389L65.2338 24.8565H60.522L51.221 12.1389H51.2286Z' fill='white'/%3E%3Cpath d='M76.569 4.12234C75.1899 4.12234 74.1058 4.39266 73.3205 4.92907C72.5352 5.46548 72.1406 6.19618 72.1406 7.12117C72.1406 7.89834 72.5007 8.51077 73.2171 8.95849C73.9334 9.4062 75.0635 9.90037 76.6073 10.4368C78.1779 10.9732 79.4689 11.4969 80.484 12.0038C81.4992 12.5106 82.3726 13.2582 83.1042 14.2423C83.8359 15.2265 84.1998 16.4809 84.1998 18.0057C84.1998 19.2601 83.8895 20.4301 83.2651 21.5198C82.6407 22.6095 81.6332 23.5049 80.2388 24.2061C78.8444 24.9072 77.0631 25.2578 74.8988 25.2578C73.627 25.2578 72.4624 25.1142 71.4051 24.8312C70.3478 24.5482 69.1182 24.1089 67.7085 23.5092L67.1798 23.2388L68.5206 19.2517L69.1297 19.522C71.5928 20.5357 73.6231 21.0425 75.2206 21.0425C76.6839 21.0425 77.8599 20.768 78.7525 20.2147C79.6451 19.6614 80.0933 18.9222 80.0933 17.9972C80.1201 17.1018 79.7677 16.4218 79.036 15.9614C78.3043 15.501 77.1283 14.9984 75.504 14.462C73.9602 13.9256 72.6884 13.4018 71.6848 12.895C70.6811 12.3881 69.8307 11.649 69.1258 10.6775C68.421 9.70608 68.0685 8.46009 68.0685 6.93955C68.0685 5.59641 68.4057 4.4011 69.0837 3.35785C69.7617 2.31459 70.7347 1.49097 72.0066 0.895426C73.2784 0.299883 74.7532 0 76.4349 0C77.8714 0 79.0896 0.126711 80.0894 0.380134C81.0893 0.633556 82.0661 0.941887 83.0123 1.29668L83.4605 1.47407L82.1619 5.46126C81.1314 5.01354 80.1775 4.67987 79.3003 4.45601C78.4192 4.23216 77.5075 4.11812 76.5575 4.11812L76.569 4.12234Z' fill='white'/%3E%3Cpath d='M86.1957 0.228088H104.798V4.16881H97.4887V24.8565H93.5086V4.16881H86.1995V0.228088H86.1957Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.325614 16.8019C0.317952 16.8272 0.30646 16.8484 0.298799 16.8737C2.72366 9.01338 8.55023 0.00421143 19.0082 0.00421143C40.2267 0.00421143 41.2572 21.0298 41.2572 24.7383C40.3761 24.7383 36.3653 24.7425 31.9906 24.7509C32.0136 24.3792 31.9906 23.9991 31.9906 23.619C31.9906 13.8073 25.509 5.84138 16.5948 5.84138C11.1245 5.84138 5.99895 8.84021 2.85391 13.4272C3.70817 12.8739 4.70033 12.5571 5.76145 12.5571C8.94097 12.5571 11.5191 15.4039 11.5191 18.9053C11.5191 22.4068 8.93714 25.2535 5.76145 25.2535C2.58576 25.2535 0 22.4152 0 18.9095C0 18.1704 0.114923 17.4608 0.325614 16.7977V16.8019Z' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0 2px;
        background-size: 100%;
        margin-left: 0.5rem;
    }
    
    .icon_curve {
        /* adjust SVG size */
        width: 2.1583rem; /* 34.53px @ 16px base */
        height: 1.4rem; /* 22.4px @ 16px base */
    }

    .nav-link {
        padding: 0.87rem 1.1rem;
    }

    .nav-link.svg {    
        padding-bottom: 0.7rem;
    }

    .navbar-end .nav-link {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .nav-link i.fa-solid {
        font-size: 1.5rem;
    }

    .nav > .dropdown > .dropdown-menu {
        transform: translate(0px, 51px) !important;
    }
}

@media (min-width: 1200px) {
    .icon_logo {
        width: 219px;
        height: 30px;
        /* KST-logo large size - figurative mark with "KST" text mark and "Flunatic" lettering */
        background-image: url("data:image/svg+xml,%3Csvg width='239' height='32' viewBox='0 0 239 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M61.649 0.251648V27.4279H56.8647V0.251648H61.649ZM62.0404 13.3947L72.7277 0.251648H78.0967L67.5015 13.3947L78.8749 27.4279H73.2112L62.0312 13.3947H62.0404Z' fill='white'/%3E%3Cpath d='M92.5001 4.54879C90.8424 4.54879 89.5393 4.84707 88.5953 5.43897C87.6514 6.03088 87.1771 6.83717 87.1771 7.85785C87.1771 8.71541 87.61 9.3912 88.471 9.88523C89.3321 10.3793 90.6905 10.9246 92.5461 11.5165C94.434 12.1084 95.9858 12.6863 97.206 13.2456C98.4263 13.8048 99.4761 14.6298 100.356 15.7157C101.235 16.8016 101.673 18.1858 101.673 19.8683C101.673 21.2525 101.3 22.5435 100.549 23.746C99.7984 24.9484 98.5874 25.9365 96.9113 26.7102C95.2352 27.4838 93.0941 27.8707 90.4925 27.8707C88.9637 27.8707 87.5639 27.7122 86.293 27.3999C85.0221 27.0877 83.5441 26.603 81.8496 25.9412L81.2141 25.6429L82.8257 21.2432L83.5579 21.5415C86.5187 22.6601 88.9591 23.2193 90.8793 23.2193C92.6382 23.2193 94.0519 22.9164 95.1247 22.3059C96.1976 21.6953 96.7364 20.8797 96.7364 19.859C96.7686 18.871 96.345 18.1206 95.4655 17.6126C94.586 17.1046 93.1724 16.55 91.22 15.9581C89.3643 15.3661 87.8356 14.7882 86.6292 14.229C85.4228 13.6697 84.4005 12.8541 83.5533 11.7821C82.706 10.7102 82.2824 9.33527 82.2824 7.65744C82.2824 6.17536 82.6876 4.85639 83.5026 3.70521C84.3176 2.55403 85.4872 1.64521 87.016 0.988057C88.5447 0.330906 90.3175 0 92.3389 0C94.0657 0 95.5299 0.139819 96.7318 0.419458C97.9336 0.699097 99.1077 1.03932 100.245 1.43082L100.784 1.62657L99.2229 6.02622C97.9842 5.53219 96.8377 5.164 95.7832 4.91698C94.7241 4.66997 93.6282 4.54413 92.4863 4.54413L92.5001 4.54879Z' fill='white'/%3E%3Cpath d='M104.072 0.251648H126.432V4.60003H117.646V27.4279H112.862V4.60003H104.076V0.251648H104.072Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.853797 18.54C0.844587 18.568 0.830773 18.5913 0.821564 18.6193C3.7363 9.9458 10.74 0.00463867 23.3106 0.00463867C48.8157 0.00463867 50.0544 23.2053 50.0544 27.2974C48.9953 27.2974 44.1742 27.302 38.9157 27.3114C38.9434 26.9012 38.9157 26.4818 38.9157 26.0623C38.9157 15.2356 31.1247 6.44565 20.4097 6.44565C13.8343 6.44565 7.67327 9.75471 3.89286 14.8162C4.91969 14.2056 6.1123 13.8561 7.38778 13.8561C11.2096 13.8561 14.3086 16.9974 14.3086 20.861C14.3086 24.7247 11.205 27.866 7.38778 27.866C3.57053 27.866 0.462402 24.734 0.462402 20.8657C0.462402 20.0501 0.600542 19.2671 0.853797 18.5354V18.54Z' fill='white'/%3E%3Cpath d='M142.202 17H135.802V28H137.122V22.88H141.742V21.74H137.122V18.12H142.202V17ZM146.347 26.98C146.547 26.98 146.773 26.94 147.027 26.86L147.267 27.8C147.227 27.8133 147.067 27.88 146.787 28C146.507 28.12 146.147 28.18 145.707 28.18C145.213 28.18 144.82 28.0133 144.527 27.68C144.233 27.3333 144.08 26.8867 144.067 26.34V17.34H145.327V25.88C145.327 26.24 145.387 26.5133 145.507 26.7C145.627 26.8867 145.907 26.98 146.347 26.98ZM149.773 25.26C149.773 25.9133 149.9 26.38 150.153 26.66C150.406 26.94 150.84 27.08 151.453 27.08C152.08 27.08 152.78 26.9 153.553 26.54V20.32H154.853V28H153.953L153.673 27.44C152.7 27.9467 151.8 28.2 150.973 28.2C150.173 28.2 149.553 27.9667 149.113 27.5C148.686 27.0333 148.473 26.3933 148.473 25.58V20.32H149.773V25.26ZM162.147 23.12C162.147 22.4667 162.02 22 161.767 21.72C161.527 21.44 161.1 21.3 160.487 21.3C159.833 21.3 159.127 21.48 158.367 21.84V28H157.067V20.32H157.967L158.247 20.96C159.167 20.4533 160.067 20.2 160.947 20.2C161.76 20.2 162.38 20.4333 162.807 20.9C163.233 21.3533 163.447 21.9867 163.447 22.8V28H162.147V23.12ZM168.094 21.34C167.814 21.34 167.474 21.3733 167.074 21.44C166.687 21.4933 166.34 21.5667 166.034 21.66L165.774 20.7C166.667 20.3933 167.5 20.24 168.274 20.24C169.14 20.24 169.8 20.3733 170.254 20.64C170.654 20.9333 170.927 21.2467 171.074 21.58C171.234 21.9133 171.314 22.4 171.314 23.04V28H170.334L170.054 27.28C169.294 27.8933 168.514 28.2 167.714 28.2C167.02 28.2 166.434 28 165.954 27.6C165.487 27.2 165.254 26.6933 165.254 26.08C165.254 25.48 165.434 24.9867 165.794 24.6C166.167 24.2 166.62 23.9333 167.154 23.8C167.834 23.6267 168.787 23.5267 170.014 23.5V23.44C170.014 22.8933 169.96 22.4933 169.854 22.24C169.64 21.64 169.054 21.34 168.094 21.34ZM167.894 27.16C168.334 27.16 168.72 27.0867 169.054 26.94C169.387 26.78 169.707 26.56 170.014 26.28V24.44C169.094 24.4533 168.414 24.5067 167.974 24.6C167.48 24.7067 167.114 24.8667 166.874 25.08C166.634 25.28 166.514 25.5667 166.514 25.94C166.514 26.3267 166.647 26.6267 166.914 26.84C167.194 27.0533 167.52 27.16 167.894 27.16ZM176.113 28.16C175.34 28.16 174.786 27.9533 174.453 27.54C174.133 27.1133 173.973 26.4733 173.973 25.62V21.4H172.673V20.32H173.973V18.44L175.273 18.34V20.32H177.793V21.4H175.273V25.54C175.273 26.0733 175.353 26.46 175.513 26.7C175.686 26.94 176.013 27.06 176.493 27.06C176.946 27.06 177.353 27.02 177.713 26.94L177.933 27.82C177.333 28.0467 176.726 28.16 176.113 28.16ZM180.111 18.84C179.871 18.84 179.671 18.76 179.511 18.6C179.351 18.4267 179.271 18.2267 179.271 18C179.271 17.7867 179.351 17.6 179.511 17.44C179.671 17.2667 179.871 17.18 180.111 17.18C180.337 17.18 180.531 17.2667 180.691 17.44C180.851 17.6 180.931 17.7867 180.931 18C180.931 18.2267 180.851 18.4267 180.691 18.6C180.544 18.76 180.351 18.84 180.111 18.84ZM180.751 28H179.451V20.32H180.751V28ZM186.396 28.18C185.209 28.18 184.289 27.84 183.636 27.16C182.996 26.48 182.676 25.5267 182.676 24.3C182.676 23.1533 183.009 22.1667 183.676 21.34C184.342 20.5933 185.336 20.22 186.656 20.22C187.309 20.22 187.962 20.36 188.616 20.64L188.296 21.6C187.829 21.4 187.302 21.3 186.716 21.3C185.809 21.3 185.129 21.54 184.676 22.02C184.222 22.4867 183.996 23.1667 183.996 24.06C183.996 25.2067 184.269 26 184.816 26.44C185.362 26.88 186.036 27.1 186.836 27.1C187.342 27.1 187.829 27.0133 188.296 26.84L188.596 27.74C187.822 28.0333 187.089 28.18 186.396 28.18Z' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .nav-link.svg span:last-of-type {    
        vertical-align: 3px;
    }
}


/***********************************************************/
/*  ||  FOOTER                                             */

.kst-footer {
    color: var(--kst-footer-fontcolor);
    background-color: var(--kst-footer-bg);    
    font-size: 0.67rem;
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.kst-footer [target="_blank"]:not(.suppress-target-blank-icon)::after {
    font-size: 0.9em;
    margin: 0.1em 0 0 0.4em;
    opacity: 0.75;
}

@media (min-width: 440px) {
    .kst-footer {
        font-size: 0.75rem;
        gap: 0.85rem;
    }
}

@media (min-width: 576px) {
    .kst-footer {
        font-size: 0.85rem;
        gap: 1.75rem;
    }
}

@media (min-width: 768px) {
    .kst-footer {
        gap: 2.5rem;
    }
}

.kst-footer :last-child {
    flex-grow: 1;
    text-align: right;
}

.kst-footer a,
.kst-footer a:hover,
.kst-footer a:focus,
.kst-footer a:active {
    color: var(--kst-footer-fontcolor);
    text-decoration: none;
}


/***********************************************************/
/*  ||  BUTTONS                                            */

.btn,
.btn:focus,
.btn:active, 
.btn:active:focus {
    border-radius: 5rem;
    box-shadow: var(--kst-dropshadow);
    transition-timing-function: ease-out;
}

.btn:disabled, 
.btn.disabled, 
fieldset:disabled .btn {
    box-shadow: none;
    opacity: 0.5;
}

.btn-primary {
    text-transform: uppercase;
    color: var(--kst-btn-primary-fontcolor);
    background-color: var(--kst-btn-primary-bg);
    border-color: var(--kst-btn-primary-bg);
}

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

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

.btn-secondary {
    text-transform: uppercase;
    color: var(--kst-btn-secondary-fontcolor);
    background-color: var(--kst-btn-secondary-bg);
    border-color: var(--kst-btn-secondary-bg);
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: var(--kst-btn-secondary-fontcolor-highlight);
    background-color: var(--kst-btn-secondary-bg-highlight);
    border-color: var(--kst-btn-secondary-bg-highlight);
}

.btn-secondary:active {
    color: var(--kst-btn-secondary-fontcolor-active);
    background-color: var(--kst-btn-secondary-bg-active);
    border-color: var(--kst-btn-secondary-bg-active);
}

.btn-secondary:focus-visible {
    outline: var(--kst-focusvisible-outline);
}

.btn-primary:disabled, 
.btn-primary.disabled, 
.btn-secondary:disabled, 
.btn-secondary.disabled {
    color: var(--kst-btn-fontcolor-disabled);
    background-color: var(--kst-btn-bg-disabled);
    border-color: var(--kst-btn-bg-disabled);
}

.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:focus:active {
    box-shadow: none;
}

.btn-link:disabled,
.btn-link.disabled {
    color: var(--kst-btn-link-disabled);
    text-decoration-color: var(--kst-btn-link-disabled);
}

.btn-link:focus-visible {
    outline: var(--kst-focusvisible-outline);
}

.btn-icon,
.btn-icon-sm,
.btn-icon-lg {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 50%;
}

.btn-icon { 
    font-size: 1rem;
    width: 2.25rem;
    height: 2.25rem;
}

.btn-icon-sm { 
    font-size: 0.85rem;
    width: 1.75rem;
    height: 1.75rem;
}

.btn-icon-lg { 
    font-size: 1.75rem;
    width: 3.5rem;
    height: 3.5rem;
}

.btn-sticker {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 0.75rem !important;
    width: 7rem;
    aspect-ratio: 1;
    font-size: 3rem;
}

@media (min-width: 768px) {
    .btn-sticker.btn-responsive {
        width: 7.5rem;
        font-size: 3.25rem;
    }
}

@media (min-width: 1200px) {
    .btn-sticker.btn-responsive {
        width: 8.5rem;
        font-size: 3.75rem;
    }
}

.btn {
    position: relative;
}

.btn .btn-badge {
    position: absolute;
    left: 100%;
    top: 0;
    transform: translate(-0.75rem, -50%);
    padding: 0.15rem 0.45rem 0.35rem;
    border-radius: 50rem;
    color: var(--kst-btn-badge-fontcolor);
    background-color: var(--kst-btn-badge-bg);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.btn-inline,
.btn-inline-alert {
    background: 0;
    border: 0;
    min-width: 1.5rem;
}

.btn-inline {
    color: var(--kst-btn-secondary-fontcolor);
}

.btn-inline:not(:disabled):hover,
.btn-inline:not(:disabled):focus {
    color: var(--kst-btn-secondary-fontcolor-highlight);
}

.btn-inline:not(:disabled):active {
    color: var(--kst-btn-secondary-fontcolor-active);
}

.btn-inline-alert {
    color: var(--kst-btn-inline-alert-fontcolor);
}

.btn-inline-alert:not(:disabled):hover,
.btn-inline-alert:not(:disabled):focus {
    color: var(--kst-btn-inline-alert-fontcolor-highlight);
}

.btn-inline-alert:not(:disabled):active {
    color: var(--kst-btn-inline-alert-fontcolor-active);
}

.btn-inline:focus-visible,
.btn-inline-alert:focus-visible {
    outline: 0;
}

.btn-inline:disabled > .fa-solid,
.btn-inline-alert:disabled > .fa-solid {
    color: var(--kst-btn-bg-disabled);
}


/***********************************************************/
/*  ||  TABLES                                             */

.kst-table {
    margin-bottom: 1rem;
    /* vertical-align: top; */
    white-space: nowrap;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 10px;
    border: 1px solid var(--kst-table-bordercolor);
    overflow: hidden;
}

.kst-table thead {
    background: var(--kst-table-head-bg);
    color: var(--kst-table-head-fontcolor);
    white-space: normal;
    vertical-align: baseline;
}

.kst-table thead th {
    font-weight: normal;
}

.kst-table thead th > div {
    display: flex;
}

.kst-table.table-linewrap tbody {
    white-space: normal;
    vertical-align: baseline;
}

.kst-table .col-sort {
    color: var(--kst-table-head-fontcolor);
    background: none;
    padding: 0;
    border: 0;
    width: 100%;
    text-align: left;
    line-height: 1.5rem;
}

.col-sort > span {
    display: flex;
}

.col-sort:focus-visible {
    outline: var(--kst-focusvisible-outline);
}

.th-text {
    flex-grow: 1;
}

.sortby {
    min-width: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5rem;
    padding-left: 0.5rem;
    color: var(--kst-table-head-fontcolor);
}

.col-sort:hover .sortby {
    color: var(--kst-table-head-sortby-fontcolor-highlight);
    transition: color .2s ease-out;
}

.kst-table > :not(caption) > tr > * {
    padding: 0.3rem 0.5rem;
    border-bottom-width: 1px;
}

.kst-table > :not(caption) > tr:last-of-type > * {
    border-bottom-width: 0;
}

.kst-table.row-highlight > tbody > tr:hover > * {
    background-color: var(--kst-table-row-bg-highlight);
}

/* use and adjust this rule if tablerow-highlight and text mark have too little contrast */
/* .kst-table > tbody tr:hover mark,
.kst-table > tbody tr:hover .mark {
    background-color: var(--kst-mark-highlight);
} */

.kst-table .missing-data {
    background: 0;
    border: 0;
    color: var(--kst-table-body-btn-alert-fontcolor);
}

.kst-table audio {
    height: 1.75rem;
    vertical-align: middle;
}


/***********************************************************/
/*  ||  FORMS                                              */

/* form-control styles */

.form-control,
.form-select {
    line-height: 1.75rem;
    color: var(--kst-form-fontcolor);
    background-color: var(--kst-form-bg-dim);
    border: 0;
    border-radius: 1.5rem;
    box-shadow: var(--kst-dropshadow);
}

.form-control:focus:not(:disabled),
.form-control:active:not(:disabled) {
    color: var(--kst-form-fontcolor);
    background-color: var(--kst-form-bg-dim);
}

.form-control::placeholder {
    color: var(--kst-form-placeholder-fontcolor);
}

.form-control[readonly] {
    background-color: var(--kst-form-bg-light);
    box-shadow: var(--kst-dropshadow);
    /* box-shadow: none; */
}

.form-control[readonly]:focus {
    background-color: var(--kst-form-bg-light);
    box-shadow: var(--kst-dropshadow);
    /* box-shadow: none; */
}

.form-control:focus,
.form-control:active,
.form-control.is-valid:focus,
.form-control.is-invalid:focus {
    box-shadow: var(--kst-dropshadow);
}

textarea.form-control {
    color: var(--bs-body-color);
    background-color: var(--kst-form-bg-light);
    padding: 0.375rem 0.75rem;
    border: 0;
    line-height: 2rem;
}

textarea.form-control,
textarea.form-control:focus:not(:disabled),
textarea.form-control:active:not(:disabled) {
    color: var(--kst-body-fontcolor);
    background-color: var(--kst-form-bg-light);
    box-shadow: var(--kst-dropshadow);
}

textarea.no-resize {
    resize: none;
}

.form-control::-webkit-file-upload-button {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--kst-btn-secondary-fontcolor);
    background-color: var(--kst-btn-secondary-bg);
    border-color: var(--kst-btn-secondary-bg);
}

.form-control::file-selector-button {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--kst-btn-secondary-fontcolor);
    background-color: var(--kst-btn-secondary-bg);
    border-color: var(--kst-btn-secondary-bg);
}

.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button,
.form-control:focus:not(:disabled):not([readonly])::-webkit-file-upload-button {
    color: var(--kst-btn-secondary-fontcolor-highlight);
    background-color: var(--kst-btn-secondary-bg-highlight);
    border-color: var(--kst-btn-secondary-bg-highlight);
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button,
.form-control:focus:not(:disabled):not([readonly])::file-selector-button {
    color: var(--kst-btn-secondary-fontcolor-highlight);
    background-color: var(--kst-btn-secondary-bg-highlight);
    border-color: var(--kst-btn-secondary-bg-highlight);
}

.form-control:active::-webkit-file-upload-button {
    color: var(--kst-btn-secondary-fontcolor-active);
    background-color: var(--kst-btn-secondary-bg-active);
    border-color: var(--kst-btn-secondary-bg-active);
}

.form-control:active:not(:disabled):not([readonly])::file-selector-button {
    color: var(--kst-btn-secondary-fontcolor-active);
    background-color: var(--kst-btn-secondary-bg-active);
    border-color: var(--kst-btn-secondary-bg-active);
}

.form-control:disabled {
    background-color: var(--kst-form-bg-dim);
    opacity: 0.65;
}

/* form-select styles */

.form-select:not(:disabled),
.form-check label,
.form-check input {
    cursor: pointer;
}

.form-select {
    -moz-padding-start: 0.75rem;
}

.form-select:focus,
.form-select.is-invalid:focus {
    box-shadow: var(--kst-dropshadow);
}

.form-select:disabled {
    background-color: var(--kst-form-bg-dim);
    opacity: 0.65;
}

/* square check box & radio button */

.form-check-input {
    /* background-color: transparent; */
    border-color: var(--kst-form-border);
}

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

.form-check-input:checked[type="checkbox"] {
    /* blue checkmark with rounded stroke end */
    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='%230057a3' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
    /* small blue 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='%230057a3'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: var(--kst-form-border);
    box-shadow: none;
}

.form-check-input:focus-visible {
    outline: var(--kst-focusvisible-outline);
}

.form-check-input:checked[type="checkbox"]:focus,
.form-check-input:checked[type="radio"]:focus {
    border-color: var(--kst-form-contrast-light);
} 

.form-check-input:disabled,
.form-check-input:checked:disabled,
.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
    opacity: 0.65;
}

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

/* switch type checkbox */

.form-switch .form-check-input,
.form-switch .form-check-input:hover,
.form-switch .form-check-input:focus,
.form-switch .form-check-input:active,
.form-switch .form-check-input:checked {
    border-color: var(--kst-form-border);
    background-color: var(--kst-form-bg-light);
    /* small blue circle */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230057a3'/%3e%3c/svg%3e");
}

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

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

/* form-range styles */

.form-range::-moz-range-track {
    background-color: var(--kst-grey-light5)
}
.form-range::-webkit-slider-runnable-track {
    background-color: var(--kst-grey-light5)
}

.form-range::-moz-range-thumb,
.form-range::-moz-range-thumb:active {
    background-color: var(--kst-form-contrast-light);
    cursor: pointer;
}

.form-range::-webkit-slider-thumb,
.form-range::-webkit-slider-thumb:active {
    background-color: var(--kst-form-contrast-light);
    cursor: pointer;
}

/* form validation */

.invalid-feedback {
    color: var(--kst-form-validation-fail);
}

/* KST form styles */

.form-item {
    margin-bottom: 1rem;
}

.form-item label {
    display: inline-block;
    margin-left: 0.75rem;
}

.form-item .is-invalid ~ .invalid-feedback {
    display: inline;
    margin-left: 0.25rem;
}

.line-options {
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    gap: 1rem;
}

.line-options > *:not(.btn) {
    flex-grow: 1;
    flex-basis: content;
}

.line-options > .btn {
    margin-top: 0.15rem;
}

.line-options audio {
    width: 100%;
}


/***********************************************************/
/*  || BOOTSTRAP COMPONENT MODIFICATIONS                   */

/***  BS modal  ***/

html:has(> body.modal-open) {
    overflow: visible;
}

.modal-content {
    border-radius: 1.5rem;
}

.modal-section {
    position: relative;
    border-radius: 1rem;
    padding: 1rem;
    background: var(--kst-modal-section-bg);
}

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

.modal-section :is(h2,h3,h4,h5,h6) {
    margin-bottom: 1.25rem;
}

.modal-content.modal-united .modal-header {
    border-bottom: 0;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    padding-bottom: 0;
}

.modal-content.modal-united .modal-footer {
    border-top: 0;
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    padding-top: 0;
}

.modal-content.modal-padded {
    padding: 0.25rem 0.5rem;

}

@media (min-width: 440px) { 
    .modal-m {
        max-width: 340px;
        margin: 1.75rem auto;
    }
}

.modal-content .modal-w100 {
    margin-left: -1rem;
    margin-right: -1rem;
}

.modal-content.modal-padded .modal-w100 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

/***  BS accordion  ***/

.accordion-item,
.accordion-item .accordion-button,
.accordion-item .accordion-button.collapsed,
.accordion-flush .accordion-item .accordion-button {
    background-color: var(--kst-accordion-bg);
    border: 0;
    border-radius: 1.5rem !important;
}

.accordion-item {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--kst-dropshadow);
}

.accordion-button,
.accordion-body {
    padding-left: 0;
    padding-right: 0;
}

.accordion-button {
    font-weight: 600;
    color: var(--kst-accordion-titlebutton-fontcolor);
}

.accordion-button:focus {
    border-color: none;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
    color: var(--kst-accordion-titlebutton-fontcolor);
}

.accordion-button:after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230057a3' class='bi bi-plus-circle-fill' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed):after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230057a3' class='bi bi-plus-circle-fill' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z'/%3e%3c/svg%3e");
}

/* .no-accordion-transition is required for the following reason:
    - when a large accordion-item is collapsed, we need to correct the scroll position via javascript (see utils/accordion:autoScrollAccordion in the VUE app).
    - if we kept the transition, autoScrollAccordion would only start after the transition, leading to a weird down-then-upscroll motion.
    */
    .no-accordion-transition .collapsing {
        transition: none;
    }
    

/***  BS progress bar  ***/

.progress {
	height: 0.75rem;
	border-radius: 1.5rem;
    background-color: var(--kst-progress-bg);
}

.progress-bar {
    border-radius: 1.5rem;
	background-color: var(--kst-progress-bar);
}

.progress-label {
	font-size: 0.75rem;
	color: var(--kst-progress-label-fontcolor);
	padding-left: 1rem;
    margin: 0;
}

/***  BS dropdown  ***/

/* disable Bootstrap's dropdown-button indicator */
.dropdown-toggle.no-caret::after,
.dropdown-toggle.no-caret::before {
    display: none;
}

/* prevent dropdowns containing text from becoming too wide */
.dropdown-menu.dropdown-maxwidth {
    max-width: 18rem;
    white-space: normal;
}

.dropdown-menu.dropdown-maxwidth-xl {
    max-width: 36rem;
    white-space: normal;
}

/* reset dropdown text in case it is nested inside a headline */
.dropdown-menu.dropdown-headlinereset {
    font-weight: normal;
    text-transform: none;
}

/***  BS carousel  ***/

.carousel:has(> .carousel-indicators) {
    margin-bottom: 3rem;
}

.carousel-indicators {
    top: calc(100% + 0.5rem);
    bottom: unset;
    flex-wrap: wrap;
    margin: 0 1rem;
    gap: 0.5rem 1rem;
}
.carousel-indicators [data-bs-target] {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0;
    background-color: var(--kst-dashboard-slider-bullet-bg);
    border: 0;
    border: 0.25rem solid transparent;
    border-radius: 10rem;
    opacity: 1;
    transition: background-color 0.6s ease;
}

.carousel-indicators .active {
    background-color: var(--kst-dashboard-slider-bullet-bg-highlight);
}

.btn-carousel[data-bs-slide] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: left 300ms ease, right 300ms ease;
}

.btn-carousel[data-bs-slide="prev"] {
    left: 0.5rem;
}

.btn-carousel[data-bs-slide="next"] {
    right: 0.5rem;
}

@media (min-width: 972px) {
    .btn-carousel[data-bs-slide="prev"] {
        left: -1.12rem;
    }
    .btn-carousel[data-bs-slide="next"] {
        right: -1.12rem;
    }
}

@media (min-width: 1024px) {
    .btn-carousel[data-bs-slide="prev"] {
        left: -3rem;
    }
    .btn-carousel[data-bs-slide="next"] {
        right: -3rem;
    }
}

.carousel-normalized {
    box-shadow: inset 0 0 0 1px rgba(100,100,100,0.1);
}

.carousel-normalized .carousel-inner {
    display: flex;
    align-items: center;
}

.carousel-normalized .carousel-item {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transition: transform 0.6s ease-in-out, opacity 0.2s ease;
}

.carousel-normalized .carousel-item.active {
    visibility: visible;
    opacity: 1;
}

.carousel-normalized .carousel-item > :not(img) {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}


/***  input range mod for likert ranges  ***/

.likert {
    --options-count: 1; /* js injected inline style */
    margin-bottom: 2rem;
}

.likert .form-range {
    --thumb-inset: 1.5rem;
    display: block;
    width: calc(100% - 100% / var(--options-count) + var(--thumb-inset)); 
    margin-left: calc(50% / var(--options-count) - var(--thumb-inset) / 2);
    padding: 0 0.25rem;
}

.likert .likert-options {
    display: flex;
    width: 100%;
    margin-bottom: 1rem;
}

.likert .likert-options > * {
    position: relative;
    padding: 0.5rem;
    line-height: 1;
    text-align: center;
    width: calc(100% / var(--options-count));
    overflow: hidden;
}
.likert .likert-options > *::after {
    position: absolute;
    display: block;
    font: 0.75rem 'Font Awesome 6 Free';
    color: var(--kst-grey-light1);
    content: '\f0d8';  /*fa-caret-up*/
    line-height: 0;
    width: 1rem; 
    top: 0.25rem;
    left: calc(50% - 0.5rem);
}

@media (width < 576px) {
    .likert-sm .form-range {
        width: calc(100% - 2rem);
        margin: 0 1rem;
    }

    .likert-sm .likert-options {          
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        writing-mode: vertical-lr;
        margin: 0 1rem;
        width: calc(100% - 2rem + 1px);
    }

    .likert-sm .likert-options > * {
        text-align: left;
        padding-top: 1rem;
        width: auto;
        line-height: 0.5rem;        
    }
    
    .likert-sm .likert-options > *::after {
        left: calc(50% - 2px);
        top: 0;
    }
}

@media (width < 768px) {
    .likert-md .form-range {
        width: calc(100% - 2rem);
        margin: 0 1rem;
    }

    .likert-md .likert-options {          
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        writing-mode: vertical-lr;
        margin: 0 1rem;
        width: calc(100% - 2rem + 1px);
    }

    .likert-md .likert-options > * {
        text-align: left;
        padding-top: 1rem;
        width: auto;
        line-height: 0.5rem;        
    }
    
    .likert-md .likert-options > *::after {
        left: calc(50% - 2px);
        top: 0;
    }
}

@media (width < 992px) {
    .likert-lg .form-range {
        width: calc(100% - 2rem);
        margin: 0 1rem;
    }

    .likert-lg .likert-options {          
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        writing-mode: vertical-lr;
        margin: 0 1rem;
        width: calc(100% - 2rem + 1px);
    }

    .likert-lg .likert-options > * {
        text-align: left;
        padding-top: 1rem;
        width: auto;
        line-height: 0.5rem;        
    }
    
    .likert-lg .likert-options > *::after {
        left: calc(50% - 2px);
        top: 0;
    }
}


/***  other Bootstrap components  ***/

.modal-header .btn-close {
    align-self: flex-start;
    margin-top: 0;
}

.btn-close:focus {
    box-shadow: none;
}

.toast-container {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 1rem;
    z-index: 2;
}

.toast-container .toast {
    border-radius: 1.25rem;
}

.toast-container .toast-header {
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
}

.toast-container .toast-cookies {
    width: auto;
    max-width: 500px;
}

/***********************************************************/
/*  || BACK TO TOP/BOTTOM BUTTONS                          */

.back-to-container  {
    position: sticky;
    height: 0;
    overflow: visible;
    text-align: right;
    /* opacity is overridden by JS using inline styles */
    opacity: 0; 
    transition: opacity 150ms ease-out;
}

.back-to-container.back-to-top {
    top: 4.5rem;
}

.back-to-container.back-to-bottom {
    bottom: 4rem;
}

@media (min-width: 1024px) {
    .back-to-container > .btn {
        transform: translateX(2.5rem);
    }
}


/***********************************************************/
/*  || CUSTOM JS/MODAL ALERTS                              */

/***  js alerts  ***/

.kst-alert {
    display: none;
    z-index: 1210;
	position: fixed;
	top: 30px;
    width: 400px;
    left: calc(50% - 200px);
    padding: 1rem;
    border-radius: 1.5rem;
    justify-content: space-between;
    align-items: baseline;
    color: var(--kst-alert-fontcolor);
    background-color: var(--kst-alert-bg-neutral);
    transition: top 0.3s ease-in-out, opacity 0.3s ease-in;
}

.kst-alert > .btn-inline {
    color: inherit;
}

.kst-alert > .alert-message {
    margin: 0 1.5rem;
}

.kst-alert.alert-success {
    background-color: var(--kst-alert-bg-success);
}

.kst-alert.alert-warning {
    color: var(--kst-body-fontcolor);
    background-color: var(--kst-alert-bg-warning);
}

.kst-alert.alert-danger {
    background-color: var(--kst-alert-bg-danger);
}

.kst-alert:not(:is(.alert-success,.alert-warning)) a {
    color: var(--kst-alert-link-fontcolor);
    text-decoration-color: var(--kst-alert-link-fontcolor);
}

.kst-alert a:hover {
    color: var(--kst-alert-link-fontcolor-highlight);
    text-decoration-color: var(--kst-alert-link-fontcolor-highlight);
}

/***  modal alerts  ***/

.modal-alert-warning {
    background-color: var(--kst-alert-bg-warning);
}

.modal-alert-danger {
    background-color: var(--kst-alert-bg-danger);
    color: var(--kst-alert-fontcolor);
}

.modal-alert-message {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.modal-alert-message > p {
    margin-bottom: 0;
}

.modal-alert-message .fa-solid {
    font-size: 2rem;
    margin: 0 1rem;
}

.modal-alert-options {
    display: flex;
    justify-content: space-between;
}


/***********************************************************/
/*  ||  VUE-MULTISELECT                                    */

.multiselect {
    --multiselect-borderradius: 1.25rem;
    --multiselect-form-bgcolor: var(--kst-grey-light5);
    --multiselect-tag-bgcolor: var(--kst-blue);
    --multiselect-tag-closeicon-fontcolor: var(--kst-skyblue-light3);
    --multiselect-tag-closeicon-fontcolor-highlight: var(--kst-white);
    --multiselect-selectlist-hover-bgcolor: var(--kst-yellow);
    color: var(--kst-body-fontcolor);
    margin: 0;
    border-radius: var(--multiselect-borderradius);
    box-shadow: var(--kst-dropshadow);
}

.multiselect__select {
    border-radius: var(--multiselect-borderradius);
    background-color: var(--multiselect-form-bgcolor);
    
}

.multiselect__select::before {
    top: 1.5rem;
}

.multiselect__tags {
    border: 0;
    border-radius: var(--multiselect-borderradius);
    background-color: var(--multiselect-form-bgcolor);
}

.multiselect__single {
    background-color: var(--multiselect-form-bgcolor);
}

.multiselect__input {
    background-color: var(--multiselect-form-bgcolor);
}

.multiselect__input::placeholder {
    color: var(--kst-form-placeholder-fontcolor);            
}

.multiselect__placeholder {
    color: var(--kst-form-placeholder-fontcolor);
    font-size: 1rem;
    padding: 0 0 0 0.25rem;
    margin: 0;
}

.multiselect__tag {
    background-color: var(--multiselect-tag-bgcolor);
    border-radius: 1rem;
}

.multiselect__tag-icon::after {
    color: var(--multiselect-tag-closeicon-fontcolor);
    font-size: 1rem;
    position: relative;
    top: -2px;
}

.multiselect__tag-icon:hover::after {
    color: var(--multiselect-tag-closeicon-fontcolor-highlight);
}

.multiselect__tag-icon:focus, 
.multiselect__tag-icon:hover {
    background-color: var(--multiselect-tag-bgcolor);
}

.multiselect__option--highlight,
.multiselect__option--highlight:after {
    background-color: var(--multiselect-selectlist-hover-bgcolor);
    color: var(--kst-body-fontcolor);
}

.multiselect__option--selected.multiselect__option--highlight,
.multiselect__option--selected.multiselect__option--highlight:after {
    background-color: var(--multiselect-selectlist-hover-bgcolor);
    color: var(--kst-body-fontcolor);
}

.multiselect__spinner {
    right: 7px;
    top: 7px;
    width: 26px;
    height: 26px;
    background:var(--multiselect-form-bgcolor);
}

.multiselect__spinner:after,
.multiselect__spinner:before {
    border-top-color: var(--kst-body-fontcolor);
}


/***********************************************************/
/*  ||  VUE-DATEPICKER                                     */

.dp__input {
    border-radius: 1.5rem;
    border: 0;
    color: var(--kst-form-fontcolor);
    background-color: var(--kst-form-bg-dim);
    line-height: 1.75rem;
    box-shadow: var(--kst-dropshadow);
}

.dp__menu,
.dp__overlay {
    border-radius: 1rem;
}