/***************************************************************************
/***************************************************************************
    
    THIS FILE IS ONLY FOR STYLES THAT ENTIRELY TARGET A TELERIK CONTROL.

    Do not put any BudgetPak styles here, even if they interact with 
    or modify Telerik styles.  For example, this style would not go here, 
    because the selector targets a Telerik class that is a descendent of
    a BudgetPak class:
                .bp-import-radios .k-radio-label {
                    font-weight: normal;
                }
        So the above style belongs in budgetpak.css

    All classes that begin with bp- or use a bp- class have now been moved
    into budgetpak.css at the bottom. 
    
    Also, any class without a prefix has been changed to have 
    a bp- prefix and moved to budgetpak.css.

****************************************************************************/

/*.k-header .k-link .k-column-title {*/
    /*min-width: 0;*/
    /*text-overflow: ellipsis !important;*/
    /*white-space: normal !important;*/
/*    flex-shrink: 1;
    overflow: hidden;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
*//*}*/

/* +++ Defect 1819, and now 1949 +++  THIS ALLOWED WRAPPED COLUMN HEADERS    */
.k-column-title {
    min-width: 0;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    flex-shrink: 1;
    overflow: hidden;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}

.k-grid .k-grid-md .k-table-th > .k-cell-inner > .k-link, .k-grid-md .k-table-th > .k-cell-inner > .k-link {
    padding-inline: 0px !important;
}

/* --- Defect 1819/1949 --- */

    .k-grid-md .k-table-th > .k-cell-inner {
    margin-block: -4px -8px;
    margin-inline: 0px;
}

:not(.k-filterable) > .k-cell-inner {
    padding: 1px 0px;
}

.k-grid-header th.k-table-th {
    justify-content: center;
    text-align: center;
}

.k-grid-md .k-grid-header .k-grid-filter, .k-grid-md .k-grid-header .k-header-column-menu, .k-grid-md .k-grid-header .k-grid-header-menu {
    height: 1rem;
    width: 1rem;
}

.k-dropzone-hint {
    display: none;
}

/* ++++++++++++++++++++++++++++++++++
    GRID
++++++++++++++++++++++++++++++++++ */
.k-grid .k-grid-container {
    /*    border-bottom-left-radius: .67rem;
    border-bottom-right-radius: .67rem;*/
    border-radius: .67rem
}

.k-grid-edit-row > td > .k-textbox, .k-grid-edit-row > td > .k-numerictextbox,
.k-grid-edit-row > td > .k-widget:not(.k-switch) {
    margin-left: 0px;
    width: 100% !important;
    border-style: none;
}

.k-grid {
    font-size: 1rem;
    line-height: 1.2rem;
    border-radius: .67rem;
}
    /* CP 8/15/2022:  We don't want a top or bottom margin on grid column headers. */
    .k-grid th, .k-command-cell th {
        padding: 0rem 0.5rem !important;
    }

    .k-grid td, .k-command-cell td {
        padding: 0.17rem 0.5rem !important;
    }

        .k-grid td .k-numerictextbox {
            padding: 0rem 0.5rem !important;
        }

            .k-grid td .k-numerictextbox .k-input-inner {
                height: 1.1rem;
                line-height: 1.1rem;
            }

        .k-grid td.k-command-cell {
            padding: 0.05rem 0.5rem !important;
        }

            .k-grid td.k-command-cell .k-button {
                padding: 0.05rem 0.5rem !important;
            }

        .k-grid td.bp-status-icon {
            padding: 0.083rem 0.5rem !important;
        }

    .k-grid .k-button {
        font-size: 1rem;
        padding: 0.084rem 0.5rem;
        line-height: 1.2;
        border: 1px solid var(--color-btn-grid-border);
    }

    .k-grid thead {
        text-align: center;
        height: max-content;
    }

    .k-grid .k-grid-header-wrap {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .k-grid .k-grid-header th {   /* Adjust grid header height */
        height: 1.2rem;
    }

    .k-grid .bp-lid-grid {
        border-width: 0px;
    }

.k-filterable > .k-cell-inner {
        margin: 0px;
    }

.k-filterable > .k-grid-filter.k-grid-column-menu {
    margin-bottom: 0.5rem;
}

.k-grid-column-menu {
    color: white !important;
}

.k-cell-inner > .k-link {
    justify-content: center;
    /* CP 8/15/22: Telerik puts a link in the column header when the column is sortable, and the link has ridiculous padding.  Get rid of it. */
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    min-height: 2.1rem; /* This is needed to cover the case where none of the column headers are sortable. Without a minimum height, they collapse! */
}

.k-grid-header .k-header {
    vertical-align: middle;
}

.k-grid-header .k-grid-filter, .k-grid-header .k-header-column-menu {
    padding: 0px;
    /*display: flex;*/
}

.k-icon {
    /*width: 1rem;
    height: 1rem;*/
    font-size: 1.06rem;
}

.k-grid-toolbar {
    padding: 0rem 0.67rem !important;
}

/*Turn off grid toolbar with k-grid-notoolbar class */
.k-grid-no-toolbar .k-grid-toolbar {
    display: none !important;
}

.k-grid .k-hierarchy-cell > .k-icon, .k-grid .k-drag-cell > .k-icon {
    padding: 0rem;
}

.k-pager-wrap {
    height: 2rem;
}

.k-grid-pager, .k-pager-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 2px;
    padding-bottom: 2px;
}

.k-pager-numbers k-link {
    padding-top: 2px;
    padding-bottom: 2px;
}

.k-pager-sizes .k-dropdownlist {
    width: 70px;
}

/*Grid Header & Footer*/
.k-grid-header .k-header, .k-grid tfoot {
    overflow: visible !important;
    white-space: normal !important;
}

.k-grid-header {
    /*border-top-left-radius: .67rem;
    border-top-right-radius:.67rem;*/
    border-radius: .67rem;
}

.k-grid-footer {
    border-bottom-left-radius: .67rem;
    border-bottom-right-radius: .67rem;
}

.k-grid-header, .k-grid-header .k-grid-header-sticky, .k-grid-toolbar {
    color: white !important;
    background-color: #151515 !important;
    /*    border-top-left-radius: .67rem;
    border-top-right-radius:.67rem;*/
    /*border-radius: .67rem !important;*/
}

    .k-grid-header tr:hover, .k-grid-footer tr:hover {
        color: white !important;
        background-color: #151515 !important;
    }

.k-grid tfoot td {
    border: none;
}

.k-grid-footer, .k-grid-footer .k-grid-footer-sticky {
    color: white !important;
    background-color: #151515 !important;
    /*border-left-width: 0px; */
    border-width: 0px !important;
}

    .k-grid-footer td {
        color: white !important;
        background-color: #151515 !important;
        border-width: 0px !important;
    }

.k-grid .k-grid-footer-sticky {
    /*border-left-width: 0px !important;*/
    border-width: 0px !important;
}

/* Grid grouping:  Make the grouping rows look like column headers */
.k-grouping-row td, .k-group-footer td {
    color: white !important;
    background-color: #151515 !important;
    border: none !important;
}

/* Give the grouping cells the read-only background color.
    Selector:  All group-cell within td (but not within a group footer, which we want to remain footer style) */
tr:not(.k-group-footer) td.k-group-cell {
    background-color: var(--color-grid-readonlybackground); /* !important; */
}

tfoot td.k-group-cell {
    color: white !important;
    background-color: #151515 !important;
}

    tfoot td.k-group-cell:first-child, tfoot td.k-table-td:first-child {
        border-bottom-left-radius: 0.67rem;
    }

.k-grid th {
    color: white !important;
    background-color: #151515 !important;
}

/*Grid Header Sort*/
.k-grid-header .k-i-sort-asc-sm, .k-grid-header .k-i-sort-desc-sm, .k-grid-header .k-sort-order {
    color: #fff;
}

.k-grid .k-grouping-row .k-icon {
    color: white !important;
}

/*Grid Filtering*/
.k-filtercell {
    padding: 0 0.7rem;
    width: 100%;
}

    .k-filtercell .k-filtercell-wrapper {
        width: inherit;
    }

    .k-filtercell .k-numerictextbox {
        font-size: 1rem;
    }

        .k-filtercell .k-numerictextbox .k-numeric-wrap {
            height: 27px;
        }

    .k-filtercell .k-dateinput {
        font-size: 1rem;
    }

    .k-filtercell .k-datepicker .k-picker-wrap {
        height: 27px;
    }

.k-grid-header .k-grid-header-sticky .k-dropdownlist .k-dropdown-wrap, .k-grid-header .k-dropdownlist .k-dropdown-wrap {
    background-color: #151515;
    background-image: none;
    color: #fff;
}

.k-grid-filter-menu {
    color: white !important;
}

.k-grid-filter-popup {
    background-color: #151515;
    color: white;
    font-size: 1rem;
}

.k-grid-header .k-grid-filter:hover, .k-grid-header .k-grid-filter-menu:hover, .k-grid-header .k-grid-column-menu:hover {
    background-color: var(--color-dark) !important;
    color: var(--color-btn-hover) !important;
}


/*Column menu chooser*/
.k-grid .k-grid-filter {
    color: #fff;
    height: 1rem;
    width: 1rem;
    border-radius: .25rem;
}

.k-grid-columnmenu-popup, .k-grid-columnmenu-popup .k-columnmenu-item {
    font-size: 1rem;
    background-color: #151515;
    color: #fff;
    border-radius: .5rem;
}

/*Grid SearchBox*/
.k-grid .k-grid-search {
    float: left;
}

/*Grid Data*/
.k-grid .k-table-row.k-table-alt-row {
    /* Remove alternating grid row background */
    background-color: var(--color-light);
}

/*.k-grid tr.k-alt {
    background-color: inherit;
}*/

.k-grid table, .k-grid td, .k-grid td.k-table-td {
    border-color: #cccccc;
    border-bottom-width: 1px;
}

    .k-grid table.k-grid-footer-table {
        border-bottom-width: 0px;
    }

/*.k-grid tr {
    color: var(--color-dark);
}*/

/*Frozen/Locked Columns*/
.k-master-row .k-grid-content-sticky, .k-master-row.k-alt .k-grid-content-sticky {
    border-color: #cccccc !important;
    background-color: var(--color-light);
}

.k-master-row:hover .k-grid-content-sticky, .k-master-row.k-alt:hover .k-grid-content-sticky {
    border-color: #cccccc !important;
    background-color: #ebebeb;
}

/*Grid Selection*/
/* Hilite selection ONLY if bp-no-selection-highlight is not set */
.k-grid td.k-selected:not(.bp-no-selection-highlight), .k-grid tr.k-selected > td:not(.bp-no-selection-highlight) {
    background-color: var(--color-blue) !important;
    color: var(--color-light);
}

/* Handles not hiliting the checkbox background in a TreeListCheckboxColumn */
.k-grid td.k-selected.bp-no-checkbox-highlight, .k-grid tr.k-selected > td.bp-no-checkbox-highlight {
    background-color: inherit !important;
}


/*Grid Button*/
.k-grid-table td span > .k-button, .k-grid-table td div > .k-button, .k-grid-table td > .k-button {
    /* 4/19/2023 CP:  Commented out the background color and color so that the buttons would inherit the standard BudgetPak color scheme, and not be gray. */
    /* background-color: #ededed !important;*/
    /* color: var(--color-dark) !important;*/
    font-size: 1rem;
}

/*Grid Edit DatePicker*/
.k-grid-edit-row > td > .k-datepicker {
    font-size: 1rem;
    margin: 0px 0.5rem !important;
    width: 94% !important;
}

.k-grid-edit-row td span > .k-dateinput .k-dateinput-wrap .k-input {
    font-size: 1rem;
}

/*Grid Hierarchy*/
.k-grid .k-hierarchy-cell .k-icon {
    font-size: 1rem;
    /*padding: 0.3rem 0.7rem 0.3rem 0.7rem;*/ /* not needed as of Telerik 4.1 */
    color: inherit;
}

/* ---------------------------------------------
    End GRID
--------------------------------------------- */

/* ++++++++++++++++++++++++++++++++++
    TABLE
++++++++++++++++++++++++++++++++++ */
.k-table-md {
    font-size: 1rem;
    line-height: 1.2rem;
}

    .k-table-md .k-table-th {
        padding: 0rem 0.5rem !important;
    }

    .k-table-md .k-table-td {
        padding: 0.17rem 0.5rem !important;
    }

    .k-table-md .k-table-list .k-table-group-td > span {
        padding: 0 4px
    }

    .k-table-md .k-table-list .k-table-group-row::before {
        padding: 8px 0
    }
/* ---------------------------------------------
    End TABLE
--------------------------------------------- */

/* ++++++++++++++++++++++++++++++++++
    CHECKBOX
++++++++++++++++++++++++++++++++++ */
.k-checkbox {
    width: 1rem;
    height: 1rem;
    border-color: #cccccc;
}

    .k-checkbox.k-checked, .k-checkbox:checked {
        color: var(--color-light);
        background-color: var(--color-blue);
        border-color: #cccccc;
    }

    .k-checkbox:indeterminate {
        color: var(--color-light);
        background-color: var(--color-blue);
    }

    .k-checkbox:indeterminate, .k-checkbox.k-indeterminate {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='square' stroke-linejoin='square' stroke-width='4' d='M4,8 h8'/%3e%3c/svg%3e")
    }
/* ---------------------------------------------
    End CHECKBOX
--------------------------------------------- */
/* ++++++++++++++++++++++++++++++++++
    NUMERIC TEXTBOX
++++++++++++++++++++++++++++++++++ */
.k-numerictextbox {
    font-size: inherit;
    width: 9.4rem;
}

    .k-numerictextbox .k-button.k-icon-button {
        font-size: 1rem;
        padding: 0px;
        width: 1rem;
        min-width: 1rem;
        margin-left: 0px;
    }

    .k-numerictextbox .k-input-spinner.k-spin-button {
        width: 1rem;
    }

    /* NOTE: default numeric textbox alignment 
    to change use 
        bp-numeric-override-left or
        bp-numeric-override-center
    */
    .k-numerictextbox .k-input-inner {
        text-align: right;
    }

/*.k-spin-button .k-button.k-icon-button.k-button-solid-base {
    color: #424242;
    background-color: #f5f5f5;
}

    .k-spin-button .k-button.k-icon-button.k-button-solid-base:hover {
        background-color: #ebebeb;
    }

    .k-spin-button .k-button.k-icon-button.k-button-solid-base:active {
        background-color: #d8d8d8;
    }
*/

/* ---------------------------------------------
    End NUMERIC TEXTBOX
--------------------------------------------- */

/* ++++++++++++++++++++++++++++++++++
    DATEPICKER
++++++++++++++++++++++++++++++++++ */
.k-calendar {
    font-size: 1rem;
    line-height: 1.5;
}

.k-datepicker .k-button.k-input-button.k-icon-button.k-button-solid.k-button-rectangle.k-button-solid-base {
    color: #424242;
    background-color: #f5f5f5;
}

    .k-datepicker .k-button.k-input-button.k-icon-button.k-button-solid.k-button-rectangle.k-button-solid-base:hover {
        color: #424242 !important;
        background-color: #ebebeb !important;
    }

    .k-datepicker .k-button.k-input-button.k-icon-button.k-button-solid.k-button-rectangle.k-button-solid-base:active {
        background-color: #d8d8d8 !important;
    }

/* Hide the "Today" button */
.k-calendar-nav .k-calendar-nav-today {
    display: none;
}

/* Hide cells for days disabled because they are not in our date range */
.k-state-disabled.k-other-month.k-calendar-td {
    visibility: hidden;
}

/* Hide "other month" date cells in the month boundaries...*/
.k-other-month.k-calendar-td {
    visibility: hidden;
}

    /* .. and turn off the link for such cells  */
    .k-other-month.k-calendar-td .k-link {
        visibility: hidden;
    }

/* ---------------------------------------------
    End DATEPICKER
--------------------------------------------- */

/* ++++++++++++++++++++++++++++++++++
    SWITCH
++++++++++++++++++++++++++++++++++ */

.k-switch-md .k-switch-thumb {
    width: 1.5rem;
    height: 1.5rem;
}

.k-switch-md .k-switch-track {
    width: 3rem;
    height: 1.5rem;
}

.k-switch-md.k-switch-off .k-switch-thumb-wrap {
    left: 0.75rem;
}

.k-switch-md.k-switch-on .k-switch-thumb-wrap {
    left: calc( 100% - 0.75rem - 0px);
}

/* ---------------------------------------------
    End SWITCH
--------------------------------------------- */

/* ++++++++++++++++++++++++++++++++++
    ICON
++++++++++++++++++++++++++++++++++ */

.k-icon {
    /*font-size: 1rem;   2/7/2022 CP Removed because this misaligns the checkbox icon in the TreeView.  Is it necessary elsewhere?  */
}

.k-button-icon.k-i-calendar {
    min-height: auto !important;
}

/* ---------------------------------------------
    End ICON
--------------------------------------------- */

/* ++++++++++++++++++++++++++++++++++
    BUTTON
++++++++++++++++++++++++++++++++++ */
.k-button {
    border: none;
    margin-left: 0.15rem;
    margin-right: 0.15rem;
}

.k-button-md {
    font-size: 1.06rem;
    padding: .175rem .75rem;
    line-height: 1.5;
}

/*.k-button.k-button-solid.k-button-rectangle.k-button-solid-base {
    color: var(--color-light);
    background-color: var(--color-blue);
    background-image: none;
}*/

/*.k-button.k-button-solid.k-button-rectangle.k-button-solid-base:hover {
    color: var(--color-light);
    background-color: var(--color-btn-hover) !important;
    border-color: var(--color-btn-hover-border) !important;
}*/

.k-button-solid-base:hover {
    color: var(--color-light);
    background-color: var(--color-btn-hover) !important;
    border-color: var(--color-btn-hover-border) !important;
}

.k-button.k-button-solid.k-button-rectangle.k-button-solid-base:not(:disabled):not(.disabled):active, .k-button.k-button-solid.k-button-rectangle.k-button-solid-base:not(:disabled):not(.disabled).active {
    color: var(--color-light) !important;
    background-color: var(--color-btn-hover-border) !important;
    border-color: var(--color-btn-not-border) !important;
}

    .k-button.k-button-solid.k-button-rectangle.k-button-solid-base:not(:disabled):not(.disabled):active:focus, .k-button.k-button-solid.k-button-rectangle.k-button-solid-base:not(:disabled):not(.disabled).active:focus {
        box-shadow: 0 0 0 0.2rem rgba(33, 155, 217, 0.5);
    }

.k-rounded-md {
    border-radius: .25rem;
}


/*   .k-icon-button.k-button-md > .k-button-icon {
        min-width: auto;
        min-height: auto;
    }
*/
/* ---------------------------------------------
    End BUTTON
--------------------------------------------- */

/* ++++++++++++++++++++++++++++++++++
    SPLITBUTTON
++++++++++++++++++++++++++++++++++ */
/* The below removes the white gap between the button & the down arrow */
/*.k-split-button .k-button {
    margin-right: 0px;
}*/

.k-grid .k-split-button {
    font-size: 1rem !important;
    height: 1.5rem !important;
    line-height: 1.3 !important;
    border-radius: .67rem;
}

.grid-split-button-item {
    color: var(--color-light);
    background-color: var(--color-blue);
    border: none;
}

.k-menu-group .grid-split-button-item {
    line-height: 1.2;
}

    .k-menu-group .grid-split-button-item.k-focus {
        box-shadow: none;
    }

.k-grid td.k-grid-cell .k-split-button {
    padding: 0.05rem 0.5rem !important;
}

/* ---------------------------------------------
    End SPLITBUTTON
--------------------------------------------- */

/* ++++++++++++++++++++++++++++++++++
    DROPDOWNLIST
++++++++++++++++++++++++++++++++++ */

.k-picker {
    font-size: 1rem !important;
    height: 1.5rem !important;
    line-height: 1.3 !important;
    border-radius: .67rem;
}

    .k-picker:hover {
        color: var(--color-light);
        background-color: var(--color-btn-hover) !important;
        border-color: var(--color-btn-hover-border) !important;
    }

.k-input-md .k-input-inner, .k-picker-md .k-input-inner {
    padding-left: 0.5rem;
    padding-right: 0.67rem;
    font-size: 1rem !important;
}

.k-list-filter {
    padding: 4px 8px;
}

/* below is good for k-list-filter, k-textbox, k-numerictextbox, k-dateinput */
input.k-input-inner {
    padding: 0px;
    height: 1.5rem;
    line-height: 1.5rem;
}

.k-list-md {
    font-size: 1rem;
    line-height: 1.2rem;
}

    .k-list-md .k-list-item {
        font-size: 1rem !important;
        height: 1.5rem !important;
        padding-right: 0.67rem;
        color: var(--color-dark);
        border-radius: .67rem;
    }

        .k-list-md .k-list-item.k-selected, .k-list-md .k-list-item:hover, .k-list-md .k-list-item:active {
            color: var(--color-light);
        }

.k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover, .k-list-item.k-selected.k-hover, .k-selected.k-hover.k-list-optionlabel {
    color: var(--color-light);
    background-color: var(--color-btn-hover);
}

.k-list-item-text {
    white-space: nowrap; /* Do not wrap in a DDL drop-down list*/
    margin-top: 2px;
}

.k-input-md .k-input-icon {
    width: 1rem;
    height: 1rem;
}


/*.k-dropdownlist.k-picker .k-button.k-input-button.k-icon-button.k-button-solid.k-button-rectangle.k-button-solid-base {
    color: #424242;
    background-color: #f5f5f5;
}

    .k-dropdownlist.k-picker .k-button.k-input-button.k-icon-button.k-button-solid.k-button-rectangle.k-button-solid-base:hover {
        color: #424242 !important;
        background-color: #ebebeb !important;
    }
*/
/*   .k-dropdownlist.k-picker .k-button.k-input-button.k-icon-button.k-button-solid.k-button-rectangle.k-button-solid-base:active {
        background-color: #d8d8d8 !important;
    }
*/
.k-dropdownlist .k-input-value-text {
    margin-top: 2px;
}

/* ---------------------------------------------
    End DROPDOWNLIST
--------------------------------------------- */
/* ++++++++++++++++++++++++++++++++++
    TEXTBOX
++++++++++++++++++++++++++++++++++ */
.k-textbox {
    font-size: 1rem;
    border-color: lightgray;
    font-style: inherit;
    font-weight: inherit;
}

    .k-textbox:hover {
        border-color: gray;
    }

    .k-textbox.k-state-invalid, .k-numerictextbox .k-numeric-wrap.k-state-invalid {
        border-color: #df4759;
        border-width: 2px;
    }

    .k-textbox.k-input {
        height: 1.5rem !important;
    }

.k-textbox-container.k-state-empty > .k-label, .k-floating-label-container.k-state-empty > .k-label {
    top: 1.75rem;
    left: 0.75rem;
}

.k-floating-label-container > .k-label {
    font-size: 1rem;
}

.k-floating-label-container.k-state-empty > .k-label {
    font-size: 1rem;
}

.k-floating-label-container.k-state-focused > .k-label {
    font-size: 1rem;
}

/* ---------------------------------------------
    End TEXTBOX
--------------------------------------------- */

/* ++++++++++++++++++++++++++++++++++
    TOOLTIP
++++++++++++++++++++++++++++++++++ */

.k-tooltip {
    height: inherit !important;
    font: inherit;
    /*color: var(--color-brown);
    background-color: #f0f0f0;*/
    color: #fff !important;
    background: rgba(0, 102, 153); /*BlueX with a little transparency*/
    border-radius: 0.67rem;
    box-shadow: 0rem 0rem 0.35rem var(--color-gray);
}

    .k-tooltip .k-callout {
        /*color: #c0c0c0;*/
        color: rgba(0, 102, 153);
    }


/* ---------------------------------------------
    End TOOLTIP
--------------------------------------------- */
/*+++++++++++++++++++++++++++++++++++
    TABPSTRIP
+++++++++++++++++++++++++++++++++++*/

.k-tabstrip {
    border: 1px solid var(--color-blue);
    border-radius: .67rem;
    font-size: inherit;
}

    .k-tabstrip-content, .k-tabstrip .k-content {
        padding: 0.5rem;
    }

.k-tabstrip-md .k-tabstrip-items .k-link {
    line-height: 2.17rem !important;
}

/* settings for the parent of the tab strip to showcase how the rules below work.  Does not need to be used if it's known that the # of tabs will not overflow the width of the screen. */
.tab-container {
    width: 100%;
}

.k-tabstrip-items {
    font-size: 1rem;
    line-height: 2.17rem !important;
    background-color: var(--color-darkblue);
    border: none;
    border-top: 7px solid var(--color-darkblue);
    border-top-left-radius: .67rem;
    border-top-right-radius: .67rem;
    /* tab titles will now produce a scrollbar when too wide */
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.k-tabstrip-left .k-tabstrip-items {
    overflow-x: hidden;
    border-radius: .67rem;
}

.k-tabstrip-items .k-item {
    padding: 0rem;
    margin: 0rem;
    border: none;
    white-space: nowrap;
}

    .k-tabstrip-items .k-item .k-link {
        background-color: transparent;
        color: var(--color-light);
        padding: 0 1.2rem;
    }

        .k-tabstrip-items .k-item .k-link:hover {
            text-decoration: underline;
        }

    .k-tabstrip-items .k-item.k-active .k-link:hover {
        text-decoration: none;
    }

    .k-tabstrip-items .k-item.k-active {
        background-color: transparent;
    }

        .k-tabstrip-items .k-item.k-active .k-link {
            background-color: var(--color-light);
            color: var(--color-blue);
            font-weight: bold;
            border: 1px solid #09c;
            border-top-right-radius: 1em;
            border-top-color: #09c;
            border-left-color: var(--color-light);
            border-bottom-color: var(--color-light);
        }

.k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-items-wrapper .k-item.k-selected {
    border-color: rgba(0, 0, 0, 0.08);
    color: #424242;
    background-color: transparent;
}

.k-tabstrip-top > .k-content {
    border-bottom-left-radius: .67rem;
    border-bottom-right-radius: .67rem;
}

.k-tabstrip-left > .k-content {
    border-top-right-radius: .67rem;
    border-bottom-right-radius: .67rem;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper {
    border-bottom-width: 0px;
    background-color: var(--color-darkblue);
    border-top-left-radius: 0.67rem;
    border-top-right-radius: 0.67rem;
}
/*----------------------------------------------
    End TABPSTRIP
----------------------------------------------*/
/* ++++++++++++++++++++++++++++++++++
    TREEVIEW
++++++++++++++++++++++++++++++++++ */
/* default size is md */
.k-treeview-md .k-treeview-leaf {
    padding: 1px 8px;
}

.k-treeview-leaf {
    padding: 1px 8px;
}

.k-treeview {
    font-size: 1rem;
}

.k-treeview-leaf.k-selected {
    border-radius: .67rem;
}

.k-treeview-leaf:hover, .k-treeview-leaf.k-hover {
    border-radius: .67rem;
}

k-treeview-leaf:focus, .k-treeview-leaf.k-focus {
    box-shadow: none;
}


/* ---------------------------------------------
    End TREEVIEW
--------------------------------------------- */
/* ++++++++++++++++++++++++++++++++++
    LOADER
++++++++++++++++++++++++++++++++++ */
.k-loader-button .k-loader-segment::after {
    background-color: var(--color-light);
}

/* Override change from Telerik 6 - start */
.k-loader-container-lg .k-loader-container-label {
    font-size: 16px !important;
}

.k-loader-spinner-4.k-loader-lg .k-loader-canvas {
    width: 5rem;
    height: 5rem;
}

.k-loader-lg .k-loader-segment {
    width: 1.3rem;
    height: 1.3rem;
}

.k-loader-container-lg .k-loader-container-inner {
    padding: 24px;
    gap: 12px;
}
/* Override change from Telerik 6 - end */

/*---------------------------------------------
    End LOADER
---------------------------------------------*/

/* ++++++++++++++++++++++++++++++++++
    LOADER CONTAINER
++++++++++++++++++++++++++++++++++ */

.k-loader-container-panel {
    border-radius: .67rem;
    border-width: 1px;
    border-color: var(--color-blue);
}

/*.k-text-primary {
    color: #1173aa !important;
}

.\!k-text-primary {
    color: #1173aa !important;
}*/

/*---------------------------------------------
    End LOADER
---------------------------------------------*/

/*---------------------------------------------
    RADIO BUTTONS
---------------------------------------------*/

.k-radio {
    border-color: gray;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.25rem;
}

    .k-radio:hover {
        border-color: black;
    }

    .k-radio:checked,
    .k-radio.k-checked {
        border-color: #1173aa;
        color: #1173aa;
        background-color: #ffffff;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%' cy='50%' r='4' fill='rgb(17,115,170)'/%3e%3c/svg%3e");
    }

.k-radio-item {
    line-height: 1.5rem;
    align-items: start;
}

.k-radio-list .k-radio-item {
    margin-bottom: 0.25rem;
    padding: 0px;
}

.k-radio-item .k-radio-label, .k-radio-list-item .k-radio-label {
    margin-left: 4px;
}

.k-radio-label {
    font-weight: normal !important;
}

/*---------------------------------------------
    End RADIO BUTTONS
---------------------------------------------*/

/*---------------------------------------------
    TEXTAREA
---------------------------------------------*/

.k-textarea {
    font-family: Roboto, Arial, sans-serif;
    font-size: 1rem;
    border-color: lightgray;
}

    .k-textarea > .k-input {
        height: auto !important;
        min-height: 1.2rem !important;
        padding: 0.083rem 0.67rem;
    }

    .k-textarea:hover {
        border-color: gray;
    }

/*---------------------------------------------
    END TEXTAREA
---------------------------------------------*/

/*---------------------------------------------
    MENUITEM
---------------------------------------------*/

.k-menu:not(.k-context-menu) {
    font-size: 1rem;
    color: var(--color-light);
    background-color: var(--color-blue);
    background-image: none;
    border-radius: .25rem;
    border: none;
    margin-left: 0.15rem;
    margin-right: 0.15rem;
}

.k-menu-link {
    padding: 0.25rem 0.75rem !important;
}

.k-menu:not(.k-context-menu) > .k-item, .k-menu:not(.k-context-menu) > .k-item > .k-active {
    color: var(--color-light);
}

.k-menu-group {
    background-color: var(--color-blue);
    color: var(--color-light);
    border-radius: .25rem;
    font-size: 1rem;
}

    .k-menu-group .k-item:hover {
        border-radius: .25rem;
    }

    .k-menu-group .k-menu-item {
        font-size: 1rem;
    }
/*---------------------------------------------
    END MENUITEM
---------------------------------------------*/

/*---------------------------------------------
    CONTEXT MENU ITEM
---------------------------------------------*/
.k-menu.k-context-menu {
    font-size: 1.06rem;
    color: var(--color-light);
    background-color: var(--color-blue);
    background-image: none;
    border-radius: .25rem;
    border: none;
}
/*---------------------------------------------
    END CONTEXTMENUITEM
---------------------------------------------*/

/* ++++++++++++++++++++++++++++++++++
    WINDOW
++++++++++++++++++++++++++++++++++ */

.k-window {
    font-family: Roboto, Arial, sans-serif;
    font-size: 12px;
    border-radius: .67rem;
}

.k-window-titlebar {
    border-top-left-radius: .67rem;
    border-top-right-radius: .67rem;
    color: var(--color-light);
    background-color: var(--color-blue);
    padding: 0.7rem 1.25rem;
}

/*This is so that a context-menu appears in front of the window instead of behind it.*/
.k-animation-container {
    z-index: 15000 !important;
}

.k-treeview-item .k-animation-container {
    z-index: 100 !important;
}

.k-list-optionlabel {
    font-style: italic;
    padding-top: 0.15rem;
}

/*---------------------------------------------
    END WINDOW
---------------------------------------------*/

/* ++++++++++++++++++++++++++++++++++
    SPLITTER
++++++++++++++++++++++++++++++++++ */
.k-splitter {
    border: 1px solid var(--color-blue);
    border-radius: 0.67rem;
}

.k-splitbar {
    border-top: 1px solid var(--color-blue);
    border-collapse: collapse;
}

/*---------------------------------------------
    END SPLITTER
---------------------------------------------*/

/* ++++++++++++++++++++++++++++++++++
    PROGRESS BAR
++++++++++++++++++++++++++++++++++ */

.k-progressbar {
    border-radius: .67rem;
}

    .k-progressbar .k-selected {
        border-radius: .67rem;
    }

/*---------------------------------------------
    END PROGRESSBAR
---------------------------------------------*/

/* ++++++++++++++++++++++++++++++++++++++++++++
    BP WIZARD COMPONENT
++++++++++++++++++++++++++++++++++++++++++++ */

.k-stepper {
    height: min-content;
}

.k-wizard-step {
    padding: 0px !important;
}

.k-stepper .k-step {
    width: inherit !important;
    height: 30px !important;
    background-color: var(--color-blue);
    user-select: none;
    font-weight: normal;
    padding-left: 1rem;
    padding-right: 1rem;
}

    .k-stepper .k-step.k-step-current {
        background-color: #0099cc;
        width: calc(100% + 1rem) !important;
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        font-weight: bold;
    }

.k-stepper .k-step-label:only-child {
    background-color: inherit;
    color: white;
}

.k-stepper .k-step-focus .k-step-label:only-child,
.k-stepper .k-step-link:focus .k-step-label:only-child {
    box-shadow: none;
}

.k-step-list-vertical .k-step {
    min-height: 30px !important;
}

/*---------------------------------------------
    END BP WIZARD COMPONENT
---------------------------------------------*/

/* ++++++++++++++++++++++++++++++++++++++++++++
    SLIDER
++++++++++++++++++++++++++++++++++++++++++++ */

.k-slider .k-button .k-icon {
    color: var(--color-light);
}

.k-slider .k-button {
    background-color: var(--color-blue);
}

/*---------------------------------------------
    END SLIDER
---------------------------------------------*/

/* ++++++++++++++++++++++++++++++++++++++++++++
    UPLOAD
++++++++++++++++++++++++++++++++++++++++++++ */

.k-upload-button {
    background-color: var(--color-blue);
    color: var(--color-light);
    border-radius: 0.25rem;
}

    .k-upload-button:hover {
        background-color: var(--color-btn-hover) !important;
        color: var(--color-light);
        border-color: var(--color-btn-hover-border) !important;
    }
/*---------------------------------------------
    END UPLOAD
---------------------------------------------*/

/* ++++++++++++++++++++++++++++++++++
    CHART
++++++++++++++++++++++++++++++++++ */

.k-card {
    font-size: 12px;
}

.k-card-body {
    padding: 4px 8px;
}

/*---------------------------------------------
    END UPLOAD
---------------------------------------------*/
