/*.k-switch-sm {
    width: 50px !important;
    height: 22px !important;
    font-size: unset !important;
}

    .k-switch-sm .k-switch-track {
        height: 22px !important;
    }

    .k-switch-sm .k-switch-thumb {
        width: 18px !important;
        height: 18px !important;
    }

    .k-switch-sm.k-switch.k-switch-on .k-switch-track {
        width: 54px !important;
    }

    .k-switch-sm.k-switch-on .k-switch-thumb-wrap {
    }

    .k-switch-sm.k-switch-off .k-switch-thumb-wrap {
        inset-inline-start: 13px !important;
    }

.k-switch-md {
    width: 60px !important;
    height: 30px !important;
    font-size: unset !important;
}

    .k-switch-md .k-switch-track {
        height: 30px !important;
    }

    .k-switch-md .k-switch-thumb {
        width: 24px !important;
        height: 24px !important;
    }

    .k-switch-md.k-switch-on .k-switch-thumb-wrap {
    }

    .k-switch-md.k-switch-off .k-switch-thumb-wrap {
        inset-inline-start: 13px !important;
    }


    .k-switch-md.k-switch-off .k-switch-thumb-wrap {
        inset-inline-start: 15px !important;
    }

    .k-switch-md.k-switch-on .k-switch-thumb-wrap {
        inset-inline-start: calc(100% - 15px) !important;
    }

.k-switch-lg {
    width: 62px !important;
    height: 32px !important;
    font-size: unset !important;
}

    .k-switch-lg .k-switch-track {
        height: 32px !important;
    }

    .k-switch-lg .k-switch-thumb {
        width: 26px !important;
        height: 26px !important;
    }

    .k-switch-lg.k-switch-on .k-switch-thumb-wrap {
        inset-inline-start: calc(100% - 17px) !important;
    }

    .k-switch-lg.k-switch-off .k-switch-thumb-wrap {
        inset-inline-start: 17px !important;
    }

.k-switch-label-on {
    left: 7px !important;
}

.k-switch-label-off {
    right: 5px !important;
}*/

/*.k-switch-md.k-switch-off .k-switch-thumb-wrap {
    inset-inline-start: 15px !important;
}

.k-switch-md.k-switch-on .k-switch-thumb-wrap {
    inset-inline-start: calc(100% - 15px) !important;
}

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

.k-switch-label-off {
    right: 5px;
    text-transform: uppercase;
}*/

/*
    Theme builder won't let you style a link button specfically and goes with a theme builder default class that doesn't always work.
    When in a popover the secondary color is too dark compared to the background
*/
@media (prefers-color-scheme: dark) {
    .k-popover-body .k-button-link-secondary {
        color: var(--kendo-color-on-app-surface) !important;
    }
}

/*  When upgrading from Telerik UI 8.1.1 to 9.1.1 an additional DOM div element was added which to the toolbar.
    Telerik listed no rendering changes.
*/
.k-grid > .k-toolbar > .k-toolbar-items {
    width: 100%;
}

/*When 'freezing' telerik grid columns the header gets a magic white background color for reasons only Telerik must know..*/
.k-grid-header .k-table-th.k-grid-header-sticky, .k-grid-header td.k-grid-header-sticky, .k-grid-header .k-table-td.k-grid-header-sticky, .k-grid-header .k-grid-header-sticky.k-sorted {
    border: none !important;
}

/*removes the default chevron from the telerik grid detail template*/
.k-grid tr.no-children td.k-hierarchy-cell * {
    display: none;
}

.k-grid tr.no-children td.k-hierarchy-cell {
    pointer-events: none;
}

.k-notification-container .k-notification {
    padding: .25rem !important;
}

/*
    Pointer within the cell to indicate that it can be clicked. Theme builder doesn't give such an option
*/
td.k-hierarchy-cell {
    cursor: pointer;
}

/*
    Changes the default TelerikGrid details template icons from their default of + -. 
    Theme builder doesn't allow changing the content
*/
/*Chevron double down*/
.k-hierarchy-cell .k-svg-icon.k-svg-i-plus:before {
    content: "\F27E";
    font-family: "bootstrap-icons";
}

/*Chevron double up*/
.k-hierarchy-cell .k-svg-icon.k-svg-i-minus:before {
    content: "\F281";
    font-family: "bootstrap-icons";
}

/*  
    Fixes a dropdown popup container bug in the themebuilder
    where extra spacing can appear and dropdown options become
    extremely offset
*/
.k-animation-container {
    height: fit-content !important;
}

/*
    Telerik ThemeBuilder doesn't give a way to style this class directly. 
    The default is the --k-color-dark class which is the text color when on top of a dark background.
*/
.k-overlay-dark {
    background-color: var(--k-body) !important;
}