/* Telerik Styles */

.k-window{
    border-radius: 6px;
}

.darkMode.k-window {
    border: 1px solid white;
}

.lightMode.k-window{
    border: none;
}

.k-window-titlebar {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: var(--IQDarkBlue);
    color: white;
    font-size: 1.2em;
    font-weight: 600;
}

/*.k-button-solid-primary {
    border-radius: 6px;
    width: 150px;
    background-color: var(--IQLightBlue);
    font-weight: 600;
}

.k-button-solid-base {
    border-radius: 6px;
    width: 150px;
    background-color: var(--IQLightBlue);
    font-weight: 600;
}*/

.k-header .k-window-title {
    font-family: 'Work Sans', sans-serif;
    padding: 0.5rem 1rem;
}

    .k-header .k-window-actions .k-window-action {
        padding: 1em !important;
    }

        .k-header .k-window-actions .k-window-action .k-icon{
            font-size: 1.5em;
        }


.k-window-content, .k-prompt-container {
    background-color: var(--BackgroundColour);
    color: var(--ForegoundColour);
    padding: 2em;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

    .k-window-content:last-child {
        padding-bottom: clamp(2rem, 2rem, 2rem);
    }


    .k-grid,
    .k-grid-header,
    .k-grid-pager,
    .k-popup,
    .k-grouping-header,
    .k-toolbar {
        background-color: var(--BackgroundColour);
        color: var(--ForegoundColour);
    }

.darkMode .k-grid .k-alt {
    background-color: rgba(0, 0, 0, 0.5);
}

.lightMode .k-grid .k-alt {
    background-color: rgba(0, 0, 0, 0.05);
}

.k-grid tbody > tr:not(.k-detail-row):hover {
    background-color: var(--IQLightBlue);
    color: white;
    cursor: pointer;
}


/*Display and style ON/OFF Switch labels*/
.k-switch-label-on, .k-switch-label-off {
    display: inline;
}

.k-switch-track{
    border-radius: 8px;
}
.k-rounded-sm {
    border-radius: 8px;
}

.k-switch-label-on {
    left: 7px;
    color: #ffffff;
    text-transform: uppercase;
}

.k-switch-label-off {
    right: 5px;
    color: #424242;
    text-transform: uppercase;
}

.k-switch-on .k-switch-track {
    border-color: green;
    background-color: green;
}

.k-switch-off .k-switch-track {
    border-color: darkred;
    background-color: darkred;
}

.k-switch-label-off {
    color: white;
}

.k-editor{
    border-radius: 6px;
}

.k-toolbar {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: var(--BackgroundSecondary);
}

.k-content{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.answerplaceholder-dropdown{
    margin: 1em;
}

.trv-report-viewer{
    border-radius: 6px;
}

.k-menu:not(.k-context-menu) {
    background-color: var(--Grey20);
}

.darkMode .k-menu:not(.k-context-menu) > .k-item:hover,
.darkMode .k-menu-group .k-item > .k-link:hover {
    background-color: #ffffff56
}

.lightMode .k-menu:not(.k-context-menu) > .k-item:hover,
.lightMode .k-menu-group .k-item > .k-link:hover {
    background-color: rgb(0, 0, 0, 0.2)
}

.k-menu-group, .k-menu.k-context-menu {
    border-color: var(--Grey50);
    color: var(--ForegoundColour);
    background-color: var(--BackgroundSecondary);
}


.k-splitter {
    background-color: var(--BackgroundColour);
    border-color: var(--Grey50);
}

.k-button-md.k-icon-button .k-button-icon{
    font-size: 1.5rem;
}

.k-table {
    color: var(--ForegoundColour);
}


/* Shoelace styles */

sl-tab-group {
    --indicator-color: var(--IQLightBlue);
    --track-color: var(--sl-color-neutral-200);
    --track-width: 3px;
}


    sl-tab-group.edit-preview-group {
        --indicator-color: var(--IQTeal);
        --track-color: var(--sl-color-neutral-100);
        --track-width: 5px;
        --sl-color-primary-600: var(--IQDarkBlue);
    }

        sl-tab-group.edit-preview-group::part(tabs){
        }


sl-badge::part(base) {
    font-size: 0.6rem;
    max-height: 16px;
}

sl-badge.progress-status::part(base) {
    font-size: 0.8rem;
    max-height: 24px;
    background-color: var(--Grey20);
    color: var(--Grey70);
    font-weight: 600;
    padding: 0.8rem;

}

.k-colorpicker{
    max-height: 38px;
    margin: auto 0;
}