/*
 * Main stylesheet for dressing
 * Description: This file contains CSS styles for individual dressing components
 * It should be imported into any individual Svelte platform component and provides
 * a centralized css file that can be used to match the styles of the HRST 3.0 app.

 * When it's time to update the styles of the app, this file should in a puff of smoke.

 * Author: Alex Davis
 * Created on: Jan 5 2025
 */

/* Sveltestrap renders modals outside
 * the <main> element so we include in
 * in the vars definition
 */

@import url("minty-theme.css");


.rotate-with-hunt {
    animation: spin .756s infinite cubic-bezier(0.79, -0.05, 0.51, 1.18);
    display: inline-flex;
}


@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

a {
    color: currentColor;
    filter: brightness(1);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em !important;
    transition: filter .5s ease-out;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
    text-decoration-thickness: .1rem;
    filter: brightness(1.3);
}


:where(:root), :host {

    /**
        If we bring the anchor tag styles back, don't make it so global
     */


    .modal, main, body {
        --bs-success: var(--hrst-green-400);
        --bs-primary: var(--hrst-blue-800);
        --bs-danger: var(--hrst-red-800);

        --bs-primary-rgb: 11, 74, 140;
        --hrst-blue-50: #f0f7ff;
        --hrst-blue-50-rgb: 240, 247, 255;
        --hrst-blue-100: #e1edfd;
        --hrst-blue-100-rgb: 225, 237, 253;
        --hrst-blue-200: #bcdbfb;
        --hrst-blue-200-rgb: 188, 219, 251;
        --hrst-blue-300: #80bef9;
        --hrst-blue-300-rgb: 128, 190, 249;
        --hrst-blue-300-hsl: 210, 90%, 60%;
        --hrst-blue-400: #3d9df3;
        --hrst-blue-400-rgb: 61, 157, 243;
        --hrst-blue-500: #1481e3;
        --hrst-blue-500-rgb: 20, 129, 227;
        --hrst-blue-600: #0764c2;
        --hrst-blue-600-rgb: 7, 100, 194;
        --hrst-blue-700: #07509d;
        --hrst-blue-700-rgb: 7, 80, 157;
        --hrst-blue-800: #0b4a8c;
        --hrst-blue-800-rgb: 11, 74, 140;
        --hrst-blue-800-hsl: 211, 85%, 30%;
        --hrst-blue-900: #0e3a6c;
        --hrst-blue-950: #0a2547;
        --hrst-blue-950-rgb: 10, 37, 71;

        --hrst-green-50: #f5faeb;
        --hrst-green-50-rgb: 245, 250, 235;
        --hrst-green-100: #e7f5d2;
        --hrst-green-100-rgb: 231, 245, 210;
        --hrst-green-200: #d2ebab;
        --hrst-green-200-rgb: 210, 235, 171;
        --hrst-green-300: #b9e182;
        --hrst-green-300-rgb: 185, 225, 130;
        --hrst-green-400: #99d158;
        --hrst-green-400-rgb: 153, 209, 88;
        --hrst-green-500: #78c23f;
        --hrst-green-500-rgb: 120, 194, 63;
        --hrst-green-500-hsl: 94, 52%, 50%;
        --hrst-green-600: #5c9e31;
        --hrst-green-600-rgb: 92, 158, 49;
        --hrst-green-700: #486b20;
        --hrst-green-700-rgb: 72, 107, 32;
        --hrst-green-800: #33491e;
        --hrst-green-800-rgb: 51, 73, 30;
        --hrst-green-900: #223115;
        --hrst-green-900-rgb: 34, 49, 21;
        --hrst-green-950: #0a190b;
        --hrst-green-950-rgb: 10, 25, 11;

        --hrst-warning-50: #fef5ee;
        --hrst-warning-50-rgb: 254, 245, 238;
        --hrst-warning-100: #fde7d7;
        --hrst-warning-100-rgb: 253, 231, 215;
        --hrst-warning-200: #fbccad;
        --hrst-warning-300: #f8a779;
        --hrst-warning-400: #f47943;
        --hrst-warning-500: #f15a24;
        --hrst-warning-500-rgb: 241, 90, 36;
        --hrst-warning-500-hsl: 16, 88%, 54%;
        --hrst-warning-600: #e23d14;
        --hrst-warning-600-rgb: 226, 61, 20;
        --hrst-warning-700: #bb2b13;
        --hrst-warning-800: #952517;
        --hrst-warning-900: #782116;
        --hrst-warning-950: #410d09;

        --hrst-secondary-50: #f5f7f8;
        --hrst-secondary-50-rgb: 245, 247, 248;
        --hrst-secondary-100: #ecf1f3;
        --hrst-secondary-100-rgb: 236, 241, 243;
        --hrst-secondary-200: #dde3e8;
        --hrst-secondary-200-rgb: 221, 227, 232;
        --hrst-secondary-300: #c8d1d9;
        --hrst-secondary-300-rgb: 200, 209, 217;
        --hrst-secondary-400: #b1bcc8;
        --hrst-secondary-500: #9ca8b8;
        --hrst-secondary-500-rgb: 156, 168, 184;
        --hrst-secondary-600: #8690a5;
        --hrst-secondary-600-rgb: 134, 144, 165;
        --hrst-secondary-600-hsl: 208, 10%, 60%;
        --hrst-secondary-700: #737c8f;
        --hrst-secondary-700-rgb: 115, 124, 143;
        --hrst-secondary-700-hsl: 210, 10%, 63%;
        --hrst-secondary-800: #5e6575;
        --hrst-secondary-900: #4f5460;
        --hrst-secondary-900-rgb: 79, 84, 96;
        --hrst-secondary-950: #2e3138;
        --hrst-secondary-950-rgb: 46, 49, 56;

        --bs-body-color-rgb: var(--hrst-secondary-950-rgb);

        --hrst-red-50: #fff0f0;
        --hrst-red-50-rgb: 255, 240, 240;
        --hrst-red-100: #ffdddd;
        --hrst-red-100-rgb: 255, 221, 221;
        --hrst-red-200: #ffc1c1;
        --hrst-red-200-rgb: 255, 193, 193;
        --hrst-red-300: #ff9595;
        --hrst-red-300-rgb: 255, 149, 149;
        --hrst-red-400: #ff5959;
        --hrst-red-400-rgb: 255, 89, 89;
        --hrst-red-400-hsl: 0, 100%, 67%;
        --hrst-red-500: #ff2626;
        --hrst-red-500-rgb: 255, 38, 38;
        --hrst-red-500-hsl: 0, 100%, 57%;
        --hrst-red-600: #fc0606;
        --hrst-red-600-rgb: 252, 6, 6;
        --hrst-red-600-hsl: 0, 98%, 51%;
        --hrst-red-700: #d70000;
        --hrst-red-800: #af0505;
        --hrst-red-900: #900c0c;
        --hrst-red-950: #500000;

        --hrst-error-50: #fffbea;
        --hrst-error-100: #fff3c5;
        --hrst-error-200: #ffe685;
        --hrst-error-300: #ffd246;
        --hrst-error-400: #ffbd1b;
        --hrst-error-500: #f99600;
        --hrst-error-600: #e27200;
        --hrst-error-700: #bb4d02;
        --hrst-error-800: #983b08;
        --hrst-error-900: #7c310b;
        --hrst-error-950: #481700;

        --bs-success-light: var(--hrst-green-100);
    }

    .sv-hidden-element {
        position: absolute !important;
    }


    /* TODO: set academy theme primary and secondary colors */

    .lms-theme {
        --academy-primary-50: #fef5ee;
        --academy-primary-100: #fde7d7;
        --academy-primary-200: #fbccad;
        --academy-primary-300: #f8a779;
        --academy-primary-400: #f47943;
        --academy-primary-500: #f15a24;
        --academy-primary-600: #e23d14;
        --academy-primary-700: #bb2b13;
        --academy-primary-800: #952517;
        --academy-primary-900: #782116;
        --academy-primary-950: #410d09;

        --academy-secondary-50: #f4f2f2;
        --academy-secondary-100: #e2e0df;
        --academy-secondary-200: #c7c3c1;
        --academy-secondary-300: #a7a09d;
        --academy-secondary-400: #8e8481;
        --academy-secondary-500: #7f7673;
        --academy-secondary-600: #6c6462;
        --academy-secondary-700: #585150;
        --academy-secondary-800: #4d4646;
        --academy-secondary-900: #443f40;
        --academy-secondary-950: #262222;

        --hrst-primary-50: var(--academy-primary-50);
        --hrst-primary-100: var(--academy-primary-100);
        --hrst-primary-200: var(--academy-primary-200);
        --hrst-primary-300: var(--academy-primary-300);
        --hrst-primary-400: var(--academy-primary-400);
        --hrst-primary-500: var(--academy-primary-500);
        --hrst-primary-600: var(--academy-primary-600);
        --hrst-primary-700: var(--academy-primary-700);
        --hrst-primary-800: var(--academy-primary-800);
        --hrst-primary-900: var(--academy-primary-900);

        --hrst-secondary-50: var(--academy-secondary-50);
        --hrst-secondary-100: var(--academy-secondary-100);
        --hrst-secondary-200: var(--academy-secondary-200);
        --hrst-secondary-300: var(--academy-secondary-300);
        --hrst-secondary-400: var(--academy-secondary-400);
        --hrst-secondary-500: var(--academy-secondary-500);
        --hrst-secondary-600: var(--academy-secondary-600);
        --hrst-secondary-700: var(--academy-secondary-700);
        --hrst-secondary-800: var(--academy-secondary-800);
        --hrst-secondary-900: var(--academy-secondary-900);

        --scrollbarBG: var(--hrst-primary-400);
        --thumbBG: var(--hrst-green-400);

    }

    html:not(.lms-theme) {

        --hrst-primary-50: var(--hrst-blue-50);
        --hrst-primary-100: var(--hrst-blue-100);
        --hrst-primary-200: var(--hrst-blue-200);
        --hrst-primary-300: var(--hrst-blue-300);
        --hrst-primary-400: var(--hrst-blue-400);
        --hrst-primary-500: var(--hrst-blue-500);
        --hrst-primary-600: var(--hrst-blue-600);
        --hrst-primary-700: var(--hrst-blue-700);
        --hrst-primary-800: var(--hrst-blue-800);
        --hrst-primary-900: var(--hrst-blue-900);
        --hrst-primary-950: var(--hrst-blue-950);

        --scrollbarBG: var(--hrst-primary-400);
        --thumbBG: var(--hrst-green-400);
    }

    body {
        --scrollbarBG: white;
        --thumbBG: var(--hrst-primary-400);
    }

    *::-webkit-scrollbar {
        width: 11px;
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: var(--thumbBG) var(--scrollbarBG);
    }

    *::-webkit-scrollbar-track {
        background: var(--scrollbarBG);
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--thumbBG);
        border-radius: 6px;
        border: 3px solid var(--scrollbarBG);
    }

    main {
        margin: 0;
        padding: 0;
        background: #fefefe;
    }

    .modal, main {
        font-family: "Arimo", Arial, sans-serif;
        font-weight: normal;
        line-height: 1.5;
        color: #0a0a0a;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        white-space-collapse: collapse;
        text-wrap: stable;
        hyphens: none;
        text-rendering: optimizeLegibility;
    }

    h2, h3, h4, h5, h6 {
        font-family: "Play", Arial, sans-serif;
        font-style: normal;
        font-weight: normal;
        color: var(--hrst-blue-700) !important;
    }

    h1, .h1 {
        color: var(--hrst-blue-700) !important;
        font-family: "Play", Arial, sans-serif;
        font-size: calc(2rem + 1vw) !important;
        font-style: normal;
        font-weight: normal;
        line-height: 1.4;
        margin: 0;
    }

    .progress {
        height: 1rem;
        margin-bottom: 1rem;
        border-radius: 0;
        background-color: #cacaca
    }

    .progress.primary .progress-meter {
        background-color: #004a8f
    }

    .progress.secondary .progress-meter {
        background-color: #8dc63f
    }

    .progress.success .progress-meter {
        background-color: #8dc63f
    }

    .progress.warning .progress-meter {
        background-color: #EFD423
    }

    .progress.alert .progress-meter {
        background-color: #f04124
    }

    .progress.info .progress-meter {
        background-color: #a0d3e8
    }

    .progress-meter {
        position: relative;
        display: block;
        width: 0%;
        height: 100%;
        background-color: #004a8f
    }

    .progress-meter-text {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin: 0;
        font-size: 0.75rem;
        font-weight: bold;
        color: #fefefe;
        white-space: nowrap
    }

    .superfilter {
        width: 100%;
        background: #e0e0e0;
        border: 2px solid #a3a3a3;
        border-radius: 8px;
        padding: .8rem 1.7rem;
        margin-bottom: .25rem;
        font-size: .8rem;
    }

    .superfilter .range {
        width: unset;
    }

    .superfilter {
        label {
            font-size: .864rem;
            line-height: 1.8;
        }

        select, input, label {
            width: 100%;
        }

        select, input {
            height: 1.8125rem !important;
            padding: 0 1.5rem 0 0.5rem;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: 1px solid #cacaca;
            border-radius: 0;
            background-color: #fefefe;
            font-family: inherit;
            font-size: 1rem;
            font-weight: normal;
            line-height: 1.5;
            color: #0a0a0a;
            -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
            transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
        }

        select {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
            background-origin: content-box;
            background-position: right -1rem center;
            background-repeat: no-repeat;
            background-size: 9px 6px;
        }

        .dropdown-menu {
            --bs-dropdown-link-active-bg: var(--bs-primary);
            max-height: 200px;
            overflow: hidden;
            overflow-y: auto;
        }

        .dropdown-menu li {
            /* overwrite wa native style */
            margin-inline-start: 0;
        }

        button.dropdown-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            line-height: 1.4;
            height: 1.8125rem !important;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: 1px solid #cacaca;
            border-radius: 0;
            background-color: #fefefe;
            box-shadow: none;
            text-align: left;
        }

        button.dropdown-toggle > span {
            /* hide overflow in the drop down button text*/
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .tab-content .nav-link {
        margin-bottom: 0;
    }

    .pointer {
        cursor: pointer;
    }

    /* Bootstrap and other keepers */

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

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

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

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

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

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

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

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

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

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

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

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

    .text-secondary {
        color: var(--hrst-secondary-700) !important;
    }

    .text-secondary-50 {
        color: var(--hrst-secondary-50) !important;
    }

    .text-secondary-100 {
        color: var(--hrst-secondary-100) !important;
    }

    .text-secondary-200 {
        color: var(--hrst-secondary-200) !important;
    }

    .text-secondary-300 {
        color: var(--hrst-secondary-300) !important;
    }

    .text-secondary-400 {
        color: var(--hrst-secondary-400) !important;
    }

    .text-secondary-500 {
        color: var(--hrst-secondary-500) !important;
    }

    .text-secondary-600 {
        color: var(--hrst-secondary-600) !important;
    }

    .text-secondary-700 {
        color: var(--hrst-secondary-700) !important;
    }

    .text-secondary-800 {
        color: var(--hrst-secondary-800) !important;
    }

    .text-secondary-900 {
        color: var(--hrst-secondary-900) !important;
    }

    .text-secondary-950 {
        color: var(--hrst-secondary-950) !important;
    }

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

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

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

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

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

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

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

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

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

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

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

    .text-warning {
        color: var(--hrst-error-700) !important;
    }

    .text-warning-100 {
        color: var(--hrst-error-100) !important;
    }

    .text-warning-200 {
        color: var(--hrst-error-200) !important;
    }

    .text-warning-300 {
        color: var(--hrst-error-300) !important;
    }

    .text-warning-400 {
        color: var(--hrst-error-400) !important;
    }

    .text-warning-500 {
        color: var(--hrst-error-500) !important;
    }

    .text-warning-600 {
        color: var(--hrst-error-600) !important;
    }

    .text-warning-700 {
        color: var(--hrst-error-700) !important;
    }

    .text-warning-800 {
        color: var(--hrst-error-800) !important;
    }

    .text-warning-900 {
        color: var(--hrst-error-900) !important;
    }

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

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

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

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

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

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

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

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

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

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

    .btn {
        --bs-btn-disabled-opacity: 0.4;
        --bs-btn-line-height: 1;
        box-shadow: -5px 5px 0 0 rgba(0, 0, 0, 0.25);
    }

    .btn-close {
        --bs-btn-close-focus-shadow: 0px 0px 2px 0.2rem rgb(var(--hrst-green-500-rgb) / 25%);
        border-radius: 50%;
        padding: 13px !important;
        background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
    }

    .btn-sm {
        padding: .125rem .25rem .1875rem;
        --bs-btn-font-size: .6875rem;
    }

    .btn-primary {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-color: var(--bs-primary);
        --bs-btn-hover-bg: white;
        --bs-btn-active-color: #fff;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
        --bs-btn-hover-border-color: var(--bs-primary);
        --bs-btn-focus-shadow-rgb: var(--hrst-blue-600-rgb);
        --bs-btn-active-bg: var(--bs-primary);
        --bs-btn-active-border-color: var(--bs-primary);
        --bs-border-width: 5px;
    }

    .btn-danger {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--bs-danger);
        --bs-btn-border-color: var(--bs-danger);
        --bs-btn-hover-color: var(--bs-danger);
        --bs-btn-hover-bg: white;
        --bs-btn-active-color: #fff;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: var(--bs-danger);
        --bs-btn-disabled-border-color: var(--bs-danger);
        --bs-btn-hover-border-color: var(--bs-danger);
        --bs-btn-focus-shadow-rgb: var(--hrst-red-600-rgb);
        --bs-btn-active-bg: var(--bs-danger);
        --bs-btn-active-border-color: var(--bs-danger);
        --bs-border-width: 5px;
    }

    .bg-success {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-green-600-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-success-100 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-green-100-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-success-200 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-green-200-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-primary {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-blue-600-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-primary-50 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-blue-50-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-primary-100 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-blue-100-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-primary-200 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-blue-200-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-primary-300 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-blue-300-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-primary-400 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-blue-400-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-primary-500 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-blue-500-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-primary-600 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-blue-600-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-warning {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-warning-600-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-warning-50 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-warning-50-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-warning-100 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-warning-100-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-secondary {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-secondary-600-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-secondary-50 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-secondary-50-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-secondary-100 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-secondary-100-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-secondary-200 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-secondary-200-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-secondary-300 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-secondary-300-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-secondary-400 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-secondary-400-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-secondary-500 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-secondary-500-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-danger-50 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-red-50-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-danger-100 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-red-100-rgb), var(--bs-bg-opacity)) !important;
    }

    .bg-danger-200 {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--hrst-red-200-rgb), var(--bs-bg-opacity)) !important;
    }

    /* Used in the FlexList component for the custom-`cell` column property */

    .custom-cell {
        padding-top: 1.625rem;
        padding-bottom: .625rem;
        transform: translateY(-1.275rem) translateX(0rem);
    }

    .custom-cell-label {
        color: rgba(var(--bs-body-color-rgb), .65);
        font-weight: bold;
        transform: scale(.85);
        transform-origin: left;
        margin: 0;
        padding: 0;
    }

    .custom-cell-value {
        font-size: .875rem;
        line-height: 1.25rem;
        text-box: trim-both text;
    }

    .rotate {
        animation: spin .756s infinite cubic-bezier(0.79, -0.05, 0.51, 1.18);
        display: inline-flex;
    }

    .beat-fade {
        animation: fa-beat-fade 1s infinite;
    }

    @keyframes fa-beat-fade {
        0%, to {
            opacity: .4;
            transform: scale(1);
        }
        50% {
            opacity: 1;
            transform: scale(1.125);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg)
        }

        to {
            transform: rotate(1turn)
        }
    }

    .bounce {
        animation-name: fa-bounce;
        animation-delay: 0s;
        animation-direction: normal;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(.28, .84, .42, 1);
    }

    @keyframes fa-bounce {
        0% {
            transform: scale(1) translateY(0)
        }

        10% {
            transform: scale(1.1, .9) translateY(0)
        }

        30% {
            transform: scale(.9, 1.1) translateY(-.5em)
        }

        50% {
            transform: scale(1.05, .95) translateY(0)
        }

        57% {
            transform: scale(1) translateY(-.125em)
        }

        64% {
            transform: scale(1) translateY(0)
        }

        to {
            transform: scale(1) translateY(0)
        }
    }


    .popover.fade:not(.show) {
        pointer-events: none;
    }

    .popover-success {
        --bs-popover-header-bg: var(--hrst-green-50);
        --bs-popover-header-color: var(--hrst-green-800);
        --bs-popover-body-color: var(--hrst-green-950);
        --bs-popover-border-color: var(--hrst-green-500);
    }

    .popover-warning {
        --bs-popover-header-bg: var(--hrst-error-50);
        --bs-popover-header-color: var(--hrst-error-800);
        --bs-popover-body-color: var(--hrst-error-950);
        --bs-popover-border-color: var(--hrst-error-500);
    }

    /* create a crossfade transition between the value placeholder */

    .crossfade {
        display: grid;
    }

    .crossfade-item {
        /*height: 2em;*/
        grid-column: 1/2;
        grid-row: 1/2;
        margin: .5em 0;
    }

    /* TODO: remove after implementing new breadcrumb component */

    .breadcrumbs {

        .breadcrumb {
            --bs-breadcrumb-padding-x: 1rem;
            --bs-breadcrumb-padding-y: .6rem;
            --bs-breadcrumb-margin-bottom: 0rem;
            --bs-breadcrumb-bg: var(--bs-success-light);
            --bs-breadcrumb-border-radius: 3px;
            --bs-breadcrumb-item-padding-x: 0.0rem;
            --bs-breadcrumb-font-size: 11px;
            --bs-breadcrumb-color: #395118;

            border: 1px solid #b9dc8a;
            text-transform: uppercase;
        }

        a, span, li {
            color: #395118;
            /*cursor: default;*/

        }

        a {
            color: #395118;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        span {
            color: #78ab33;
        }
    }

    .h-100vh {
        height: 100vh !important;
    }

    .w-90vw {
        width: 90vw !important;
    }

    .rangeSlider {

        .rangeNub {
            transform: rotate(0) !important;
            background-color: #F6F6F6 !important;
            border-radius: 3px !important;
            border: 1px solid #333 !important;
            transition: all 0.2s ease-in-out !important;
        }

        .rangeNub:hover {
            background-color: #d1d1d1 !important;
        }

        .rangeBar {
            height: 11px !important;
            border: 1px solid #333 !important;
            background-color: #DDD !important;
        }
    }

    .link-primary {
        border: none !important;
    }

    .rotatable {
        transform-origin: center;
        transform: rotate(0deg);
        transition: transform var(--timing, .35s) cubic-bezier(0.15, 0.65, 0.73, 1.54);
    }

    .icon-inline {
        vertical-align: middle;
    }

    .rotate-right-90 {
        transform: rotate(90deg) !important;
    }

    .expandable-row .collapsing {
        --timing: .35s;
        transition: height var(--timing, .35s) cubic-bezier(0.29, 0.64, 0.54, 1.03)
    }

    @media (min-width: 992px) {
        .w-lg-35 {
            width: 35% !important;
        }

        .w-lg-100 {
            width: 100% !important;
        }

        .w-lg-auto {
            width: auto !important;
        }
    }

    /* FONT AWESOME STYLES */

    :host, :root {
        --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Pro";
        --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Pro";
        --fa-font-light: normal 300 1em/1 "Font Awesome 6 Pro";
        --fa-font-thin: normal 100 1em/1 "Font Awesome 6 Pro";
        --fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone";
        --fa-font-duotone-regular: normal 400 1em/1 "Font Awesome 6 Duotone";
        --fa-font-duotone-light: normal 300 1em/1 "Font Awesome 6 Duotone";
        --fa-font-duotone-thin: normal 100 1em/1 "Font Awesome 6 Duotone";
        --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
        --fa-font-sharp-solid: normal 900 1em/1 "Font Awesome 6 Sharp";
        --fa-font-sharp-regular: normal 400 1em/1 "Font Awesome 6 Sharp";
        --fa-font-sharp-light: normal 300 1em/1 "Font Awesome 6 Sharp";
        --fa-font-sharp-thin: normal 100 1em/1 "Font Awesome 6 Sharp";
        --fa-font-sharp-duotone-solid: normal 900 1em/1 "Font Awesome 6 Sharp Duotone";
        --fa-font-sharp-duotone-regular: normal 400 1em/1 "Font Awesome 6 Sharp Duotone";
        --fa-font-sharp-duotone-light: normal 300 1em/1 "Font Awesome 6 Sharp Duotone";
        --fa-font-sharp-duotone-thin: normal 100 1em/1 "Font Awesome 6 Sharp Duotone";
    }

    svg.svg-inline--fa:not(:host), svg.svg-inline--fa:not(:root) {
        overflow: visible;
        box-sizing: initial;
    }

    .svg-inline--fa {
        display: var(--fa-display, inline-block);
        height: 1em;
        overflow: visible;
        vertical-align: -.125em;
    }

    .svg-inline--fa.fa-2xs {
        vertical-align: .1em;
    }

    .svg-inline--fa.fa-xs {
        vertical-align: 0;
    }

    .svg-inline--fa.fa-sm {
        vertical-align: -.07143em;
    }

    .svg-inline--fa.fa-lg {
        vertical-align: -.2em;
    }

    .svg-inline--fa.fa-xl {
        vertical-align: -.25em;
    }

    .svg-inline--fa.fa-2xl {
        vertical-align: -.3125em;
    }

    .svg-inline--fa.fa-pull-left {
        margin-right: var(--fa-pull-margin, .3em);
        width: auto;
    }

    .svg-inline--fa.fa-pull-right {
        margin-left: var(--fa-pull-margin, .3em);
        width: auto;
    }

    .svg-inline--fa.fa-li {
        width: var(--fa-li-width, 2em);
        top: .25em;
    }

    .svg-inline--fa.fa-fw {
        width: var(--fa-fw-width, 1.25em);
    }

    .fa-layers svg.svg-inline--fa {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }

    .fa-layers-counter, .fa-layers-text {
        display: inline-block;
        position: absolute;
        text-align: center;
    }

    .fa-layers {
        display: inline-block;
        height: 1em;
        position: relative;
        text-align: center;
        vertical-align: -.125em;
        width: 1em;
    }

    .fa-layers svg.svg-inline--fa {
        transform-origin: center center;
    }

    .fa-layers-text {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transform-origin: center center;
    }

    .fa-layers-counter {
        background-color: var(--fa-counter-background-color, #ff253a);
        border-radius: var(--fa-counter-border-radius, 1em);
        box-sizing: border-box;
        color: var(--fa-inverse, #fff);
        line-height: var(--fa-counter-line-height, 1);
        max-width: var(--fa-counter-max-width, 5em);
        min-width: var(--fa-counter-min-width, 1.5em);
        overflow: hidden;
        padding: var(--fa-counter-padding, .25em .5em);
        right: var(--fa-right, 0);
        text-overflow: ellipsis;
        top: var(--fa-top, 0);
        transform: scale(var(--fa-counter-scale, .25));
        transform-origin: top right;
    }

    .fa-layers-bottom-right {
        bottom: var(--fa-bottom, 0);
        right: var(--fa-right, 0);
        top: auto;
        transform: scale(var(--fa-layers-scale, .25));
        transform-origin: bottom right;
    }

    .fa-layers-bottom-left {
        bottom: var(--fa-bottom, 0);
        left: var(--fa-left, 0);
        right: auto;
        top: auto;
        transform: scale(var(--fa-layers-scale, .25));
        transform-origin: bottom left;
    }

    .fa-layers-top-right {
        top: var(--fa-top, 0);
        right: var(--fa-right, 0);
        transform: scale(var(--fa-layers-scale, .25));
        transform-origin: top right;
    }

    .fa-layers-top-left {
        left: var(--fa-left, 0);
        right: auto;
        top: var(--fa-top, 0);
        transform: scale(var(--fa-layers-scale, .25));
        transform-origin: top left;
    }

    .fa-1x {
        font-size: 1em;
    }

    .fa-2x {
        font-size: 2em;
    }

    .fa-3x {
        font-size: 3em;
    }

    .fa-4x {
        font-size: 4em;
    }

    .fa-5x {
        font-size: 5em;
    }

    .fa-6x {
        font-size: 6em;
    }

    .fa-7x {
        font-size: 7em;
    }

    .fa-8x {
        font-size: 8em;
    }

    .fa-9x {
        font-size: 9em;
    }

    .fa-10x {
        font-size: 10em;
    }

    .fa-2xs {
        font-size: .625em;
        line-height: .1em;
        vertical-align: .225em;
    }

    .fa-xs {
        font-size: .75em;
        line-height: .08333em;
        vertical-align: .125em;
    }

    .fa-sm {
        font-size: .875em;
        line-height: .07143em;
        vertical-align: .05357em;
    }

    .fa-lg {
        font-size: 1.25em;
        line-height: .05em;
        vertical-align: -.075em;
    }

    .fa-xl {
        font-size: 1.5em;
        line-height: .04167em;
        vertical-align: -.125em;
    }

    .fa-2xl {
        font-size: 2em;
        line-height: .03125em;
        vertical-align: -.1875em;
    }

    .fa-fw {
        text-align: center;
        width: 1.25em;
    }

    .fa-ul {
        list-style-type: none;
        margin-left: var(--fa-li-margin, 2.5em);
        padding-left: 0;
    }

    .fa-ul > li {
        position: relative;
    }

    .fa-li {
        left: calc(var(--fa-li-width, 2em) * -1);
        position: absolute;
        text-align: center;
        width: var(--fa-li-width, 2em);
        line-height: inherit;
    }

    .fa-border {
        border-radius: var(--fa-border-radius, .1em);
        border: var(--fa-border-width, .08em) var(--fa-border-style, solid) var(--fa-border-color, #eee);
        padding: var(--fa-border-padding, .2em .25em .15em);
    }

    .fa-pull-left {
        float: left;
        margin-right: var(--fa-pull-margin, .3em);
    }

    .fa-pull-right {
        float: right;
        margin-left: var(--fa-pull-margin, .3em);
    }

    .fa-beat {
        animation-name: fa-beat;
        animation-delay: var(--fa-animation-delay, 0s);
        animation-direction: var(--fa-animation-direction, normal);
        animation-duration: var(--fa-animation-duration, 1s);
        animation-iteration-count: var(--fa-animation-iteration-count, infinite);
        animation-timing-function: var(--fa-animation-timing, ease-in-out);
    }

    .fa-bounce {
        animation-name: fa-bounce;
        animation-delay: var(--fa-animation-delay, 0s);
        animation-direction: var(--fa-animation-direction, normal);
        animation-duration: var(--fa-animation-duration, 1s);
        animation-iteration-count: var(--fa-animation-iteration-count, infinite);
        animation-timing-function: var(--fa-animation-timing, cubic-bezier(.28, .84, .42, 1));
    }

    .fa-fade {
        animation-name: fa-fade;
        animation-iteration-count: var(--fa-animation-iteration-count, infinite);
        animation-timing-function: var(--fa-animation-timing, cubic-bezier(.4, 0, .6, 1));
    }

    .fa-beat-fade, .fa-fade {
        animation-delay: var(--fa-animation-delay, 0s);
        animation-direction: var(--fa-animation-direction, normal);
        animation-duration: var(--fa-animation-duration, 1s);
    }

    .fa-beat-fade {
        animation-name: fa-beat-fade;
        animation-iteration-count: var(--fa-animation-iteration-count, infinite);
        animation-timing-function: var(--fa-animation-timing, cubic-bezier(.4, 0, .6, 1));
    }

    .fa-flip {
        animation-name: fa-flip;
        animation-delay: var(--fa-animation-delay, 0s);
        animation-direction: var(--fa-animation-direction, normal);
        animation-duration: var(--fa-animation-duration, 1s);
        animation-iteration-count: var(--fa-animation-iteration-count, infinite);
        animation-timing-function: var(--fa-animation-timing, ease-in-out);
    }

    .fa-shake {
        animation-name: fa-shake;
        animation-duration: var(--fa-animation-duration, 1s);
        animation-iteration-count: var(--fa-animation-iteration-count, infinite);
        animation-timing-function: var(--fa-animation-timing, linear);
    }

    .fa-shake, .fa-spin {
        animation-delay: var(--fa-animation-delay, 0s);
        animation-direction: var(--fa-animation-direction, normal);
    }

    .fa-spin {
        animation-name: fa-spin;
        animation-duration: var(--fa-animation-duration, 2s);
        animation-iteration-count: var(--fa-animation-iteration-count, infinite);
        animation-timing-function: var(--fa-animation-timing, linear);
    }

    .fa-spin-reverse {
        --fa-animation-direction: reverse;
    }

    .fa-pulse, .fa-spin-pulse {
        animation-name: fa-spin;
        animation-direction: var(--fa-animation-direction, normal);
        animation-duration: var(--fa-animation-duration, 1s);
        animation-iteration-count: var(--fa-animation-iteration-count, infinite);
        animation-timing-function: var(--fa-animation-timing, steps(8));
    }

    @media (prefers-reduced-motion: reduce) {
        .fa-beat, .fa-beat-fade, .fa-bounce, .fa-fade, .fa-flip, .fa-pulse, .fa-shake, .fa-spin, .fa-spin-pulse {
            animation-delay: -1ms;
            animation-duration: 1ms;
            animation-iteration-count: 1;
            transition-delay: 0s;
            transition-duration: 0s;
        }
    }

    @keyframes fa-beat {
        0%, 90% {
            transform: scale(1);
        }
        45% {
            transform: scale(var(--fa-beat-scale, 1.25));
        }
    }

    @keyframes fa-bounce {
        0% {
            transform: scale(1) translateY(0)
        }
        10% {
            transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0)
        }
        30% {
            transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em))
        }
        50% {
            transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0)
        }
        57% {
            transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em));
        }
        64% {
            transform: scale(1) translateY(0);
        }
        to {
            transform: scale(1) translateY(0);
        }
    }

    @keyframes fa-fade {
        50% {
            opacity: var(--fa-fade-opacity, .4);
        }
    }

    @keyframes fa-beat-fade {
        0%, to {
            opacity: var(--fa-beat-fade-opacity, .4);
            transform: scale(1);
        }
        50% {
            opacity: 1;
            transform: scale(var(--fa-beat-fade-scale, 1.125));
        }
    }

    @keyframes fa-flip {
        50% {
            transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
        }
    }

    @keyframes fa-shake {
        0% {
            transform: rotate(-15deg);
        }
        4% {
            transform: rotate(15deg);
        }
        8%, 24% {
            transform: rotate(-18deg);
        }
        12%, 28% {
            transform: rotate(18deg);
        }
        16% {
            transform: rotate(-22deg);
        }
        20% {
            transform: rotate(22deg);
        }
        32% {
            transform: rotate(-12deg);
        }
        36% {
            transform: rotate(12deg);
        }
        40%, to {
            transform: rotate(0deg);
        }
    }

    @keyframes fa-spin {
        0% {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(1turn);
        }
    }

    .fa-rotate-90 {
        transform: rotate(90deg);
    }

    .fa-rotate-180 {
        transform: rotate(180deg);
    }

    .fa-rotate-270 {
        transform: rotate(270deg);
    }

    .fa-flip-horizontal {
        transform: scaleX(-1);
    }

    .fa-flip-vertical {
        transform: scaleY(-1);
    }

    .fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
        transform: scale(-1);
    }

    .fa-rotate-by {
        transform: rotate(var(--fa-rotate-angle, 0));
    }

    .fa-stack {
        display: inline-block;
        vertical-align: middle;
        height: 2em;
        position: relative;
        width: 2.5em;
    }

    .fa-stack-1x, .fa-stack-2x {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        z-index: var(--fa-stack-z-index, auto);
    }

    .svg-inline--fa.fa-stack-1x {
        height: 1em;
        width: 1.25em;
    }

    .svg-inline--fa.fa-stack-2x {
        height: 2em;
        width: 2.5em;
    }

    .fa-inverse {
        color: var(--fa-inverse, #fff);
    }

    .fa-sr-only, .fa-sr-only-focusable:not(:focus), .sr-only, .sr-only-focusable:not(:focus) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .svg-inline--fa .fa-primary {
        fill: var(--fa-primary-color, currentColor);
        opacity: var(--fa-primary-opacity, 1)
    }

    .svg-inline--fa .fa-secondary {
        fill: var(--fa-secondary-color, currentColor);
    }

    .svg-inline--fa .fa-secondary, .svg-inline--fa.fa-swap-opacity .fa-primary {
        opacity: var(--fa-secondary-opacity, .4);
    }

    .svg-inline--fa.fa-swap-opacity .fa-secondary {
        opacity: var(--fa-primary-opacity, 1);
    }

    .svg-inline--fa mask .fa-primary, .svg-inline--fa mask .fa-secondary {
        fill: #000;
    }
}