html[data-theme="dark-soft"] {
    color-scheme: dark;
    --bs-white-rgb: 29, 39, 53;
    --bs-light-rgb: 37, 50, 68;
    --bs-dark-rgb: 21, 28, 40;
    --bs-body-bg: var(--ku-bg);
    --bs-body-color: var(--ku-text);
    --bs-border-color: var(--ku-border);
    --bs-heading-color: var(--ku-text);
    --bs-link-color: var(--ku-primary);
    --bs-link-hover-color: var(--ku-primary-hover);
    --bs-secondary-color: var(--ku-text-muted);
    --bs-tertiary-bg: var(--ku-surface-muted);
    --bs-primary-rgb: 121, 184, 255;
    --bs-primary-bg-subtle: var(--ku-subtle-primary-bg);
    --bs-primary-border-subtle: var(--ku-subtle-primary-border);
    --bs-primary-text-emphasis: var(--ku-primary-hover);
}

html[data-theme="dark-soft"],
html[data-theme="dark-soft"] body {
    background: var(--ku-bg);
    color: var(--ku-text);
}

html[data-theme="dark-soft"] .main-wrapper,
html[data-theme="dark-soft"] .content_wrapper,
html[data-theme="dark-soft"] .main_content {
    background-color: var(--ku-bg);
    color: var(--ku-text);
}

html[data-theme="dark-soft"] .sidebar-width,
html[data-theme="dark-soft"] .header-height {
    background-color: var(--ku-surface);
    border-color: var(--ku-border);
}

html[data-theme="dark-soft"] .card,
html[data-theme="dark-soft"] .modal-content,
html[data-theme="dark-soft"] .dropdown-menu,
html[data-theme="dark-soft"] .ef-card {
    background-color: var(--ku-surface);
    color: var(--ku-text);
    border-color: var(--ku-border);
}

html[data-theme="dark-soft"] .RadTabStrip_Bootstrap .rtsSelected .rtsIn span {
    color: var(--ku-tab-active-text) !important;
}

html[data-theme="dark-soft"] .RadTabStrip_Bootstrap .rtsIn span {
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .card-body span {
    color: var(--ku-surface);
}

html[data-theme="dark-soft"] a {
    color: var(--ku-primary);
}

html[data-theme="dark-soft"] a:hover {
    color: var(--ku-primary-hover);
}

html[data-theme="dark-soft"] .text-dark {
    color: var(--ku-text) !important;
}

html[data-theme="dark-soft"] .text-muted {
    color: var(--ku-text-muted) !important;
}

html[data-theme="dark-soft"] .badge.bg-light,
html[data-theme="dark-soft"] .ku-inline-filter {
    background-color: var(--ku-surface-muted) !important;
    color: var(--ku-text-secondary) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(1.35);
    opacity: 0.75;
}

html[data-theme="dark-soft"] .offcanvas {
    background-color: var(--ku-surface);
    color: var(--ku-text);
    border-color: var(--ku-border);
}

html[data-theme="dark-soft"] .doc-pdf-link a,
html[data-theme="dark-soft"] a.doc-pdf-link {
    background-color: var(--ku-doc-action-bg) !important;
    background-image: none !important;
    border-color: var(--ku-doc-action-border) !important;
    color: var(--ku-doc-action-text) !important;
}

html[data-theme="dark-soft"] .doc-pdf-link a:hover,
html[data-theme="dark-soft"] a.doc-pdf-link:hover {
    background-color: var(--ku-doc-action-bg-hover) !important;
    border-color: var(--ku-doc-action-border-hover) !important;
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .reports-page .reports-menu.RadMenu,
html[data-theme="dark-soft"] .reports-page .reports-menu.RadMenu_Bootstrap,
html[data-theme="dark-soft"] .reports-page .reports-menu .rmRootGroup {
    background-color: var(--ku-reports-menu-bg) !important;
    background-image: none !important;
    border-color: var(--ku-reports-menu-border) !important;
    color: var(--ku-reports-menu-text) !important;
}

html[data-theme="dark-soft"] .reports-page .reports-menu .rmRootLink,
html[data-theme="dark-soft"] .reports-page .reports-menu .rmLink,
html[data-theme="dark-soft"] .reports-page .reports-menu .rmText {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--ku-reports-menu-text) !important;
}

html[data-theme="dark-soft"] .reports-page .reports-menu .rmRootLink:hover,
html[data-theme="dark-soft"] .reports-page .reports-menu .rmLink:hover,
html[data-theme="dark-soft"] .reports-page .reports-menu .rmFocused > .rmLink,
html[data-theme="dark-soft"] .reports-page .reports-menu .rmExpanded > .rmLink {
    background-color: var(--ku-reports-menu-hover-bg) !important;
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .reports-page .reports-menu .rmSelected > .rmLink,
html[data-theme="dark-soft"] .reports-page .reports-menu .rmSelected.rmLink,
html[data-theme="dark-soft"] .reports-page .reports-menu .rmSelected .rmText {
    background-color: var(--ku-reports-menu-active-bg) !important;
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .reports-page .reports-menu .rmGroup,
html[data-theme="dark-soft"] .reports-page .reports-menu .rmMultiColumn,
html[data-theme="dark-soft"] .RadMenuPopup,
html[data-theme="dark-soft"] .RadMenuPopup .rmGroup {
    background-color: var(--ku-reports-menu-bg) !important;
    background-image: none !important;
    border-color: var(--ku-reports-menu-border) !important;
    box-shadow: var(--ku-reports-menu-shadow) !important;
    color: var(--ku-reports-menu-text) !important;
}

html[data-theme="dark-soft"] .reports-page .reports-menu .rmExpandRight,
html[data-theme="dark-soft"] .reports-page .reports-menu .rmExpandDown {
    border-color: var(--ku-control-icon) !important;
    color: var(--ku-control-icon) !important;
}

html[data-theme="dark-soft"] .telerik-pill-tabs {
    border-bottom: 1px solid var(--ku-tab-border);
}

html[data-theme="dark-soft"] .telerik-pill-tabs .rtsUL {
    gap: 6px;
}

html[data-theme="dark-soft"] .telerik-pill-tabs .rtsLink {
    background-color: var(--ku-tab-bg);
    color: var(--ku-tab-text);
    border-color: var(--ku-tab-border);
    border-bottom-color: transparent;
}

html[data-theme="dark-soft"] .telerik-pill-tabs .rtsLI.rtsSelected .rtsLink {
    background-color: var(--ku-tab-active-bg);
    color: var(--ku-tab-active-text);
    border-color: var(--ku-tab-active-border);
    border-bottom-color: var(--ku-tab-active-bg);
    box-shadow: none;
}

html[data-theme="dark-soft"] .telerik-pill-tabs .rtsLink:hover:not(.rtsSelected .rtsLink) {
    background-color: var(--ku-tab-hover-bg);
    color: var(--ku-primary-hover);
}

html[data-theme="dark-soft"] .sidebar-nav-container .nav-link,
html[data-theme="dark-soft"] .sidebar-footer .nav-link {
    color: var(--ku-text-muted);
}

html[data-theme="dark-soft"] .sidebar-nav-container .nav-link:hover,
html[data-theme="dark-soft"] .sidebar-footer .nav-link:hover {
    background-color: rgba(45, 59, 80, 0.72);
    color: var(--ku-primary-hover);
}

html[data-theme="dark-soft"] .sidebar-nav-container .sub-menu {
    background-color: rgba(37, 50, 68, 0.95);
    border-left-color: var(--ku-border);
}

html[data-theme="dark-soft"] .sidebar-nav-container .sub-menu .sub-menu {
    background-color: rgba(45, 59, 80, 0.95);
}

html[data-theme="dark-soft"] .sidebar-nav-container .sub-menu .nav-link {
    color: var(--ku-text-secondary);
}

html[data-theme="dark-soft"] .sidebar-nav-container .nav-link.active,
html[data-theme="dark-soft"] .sidebar-nav-container .nav-item.is-active-branch > .nav-link {
    color: var(--ku-brand-red);
}

html[data-theme="dark-soft"] .sidebar-nav-container .nav-level-0 > .nav-link.active,
html[data-theme="dark-soft"] .sidebar-nav-container .nav-link.active {
    background-color: rgba(255, 127, 159, 0.14);
}

html[data-theme="dark-soft"] .sidebar-nav-container .sub-menu .nav-link[href$="/Views/Timesheet"],
html[data-theme="dark-soft"] .sidebar-nav-container .sub-menu .nav-link[href$="/Views/SessionNotes"] {
    background: linear-gradient(180deg, #1f7bf2 0%, #0d6efd 100%) !important;
    border-color: #0b5ed7 !important;
    color: #fff !important;
}

html[data-theme="dark-soft"] .sidebar-nav-container .sub-menu .nav-link[href$="/Views/TakeNotes"],
html[data-theme="dark-soft"] .sidebar-nav-container .sub-menu .nav-link[href$="/Views/DOEForms"] {
    background: linear-gradient(180deg, #249b61 0%, #198754 100%) !important;
    border-color: #157347 !important;
    color: #fff !important;
}

html[data-theme="dark-soft"] .sidebar-nav-container .sub-menu .nav-link[href$="/Views/Timesheet"] i,
html[data-theme="dark-soft"] .sidebar-nav-container .sub-menu .nav-link[href$="/Views/SessionNotes"] i,
html[data-theme="dark-soft"] .sidebar-nav-container .sub-menu .nav-link[href$="/Views/TakeNotes"] i,
html[data-theme="dark-soft"] .sidebar-nav-container .sub-menu .nav-link[href$="/Views/DOEForms"] i {
    color: #fff !important;
}

html[data-theme="dark-soft"] .sidebar-toggle-float {
    background: linear-gradient(180deg, #f8fbff 0%, #dbeafe 100%);
    border-color: #60a5fa;
    color: #1d4ed8;
    box-shadow: 0 0 0 4px rgba(96,165,250,0.2), 0 5px 18px rgba(96,165,250,0.45);
}

html[data-theme="dark-soft"] .sidebar-toggle-float:hover {
    background: #2563eb;
    border-color: #93c5fd;
    color: #fff;
    box-shadow: 0 0 0 5px rgba(96,165,250,0.26), 0 7px 22px rgba(96,165,250,0.58);
}

html[data-theme="dark-soft"] .sidebar-mobile-close-btn:hover {
    background-color: var(--ku-surface-alt);
}

html[data-theme="dark-soft"] .ku-message-content,
html[data-theme="dark-soft"] .ku-message-content h2,
html[data-theme="dark-soft"] .ku-message-content h3,
html[data-theme="dark-soft"] .ku-message-content p,
html[data-theme="dark-soft"] .ku-message-content li,
html[data-theme="dark-soft"] .ku-message-content div,
html[data-theme="dark-soft"] .ku-message-content span,
html[data-theme="dark-soft"] .ku-message-content strong,
html[data-theme="dark-soft"] .ku-message-content b,
html[data-theme="dark-soft"] .ku-message-content em,
html[data-theme="dark-soft"] .ku-message-content u,
html[data-theme="dark-soft"] .ku-message-content ul,
html[data-theme="dark-soft"] .ku-message-content ol {
    color: var(--ku-text) !important;
}

html[data-theme="dark-soft"] .ku-message-content h2,
html[data-theme="dark-soft"] .ku-message-content h3 {
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .ku-message-content a,
html[data-theme="dark-soft"] .ku-message-content a span {
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .ku-message-content hr {
    border-top-color: var(--ku-border);
}

html[data-theme="dark-soft"] .form-control,
html[data-theme="dark-soft"] .form-select,
html[data-theme="dark-soft"] .RadInput_Bootstrap .riTextBox,
html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbInput,
html[data-theme="dark-soft"] .RadPicker_Bootstrap .riTextBox,
html[data-theme="dark-soft"] .RadDropDownList_Bootstrap .rddlFakeInput,
html[data-theme="dark-soft"] .RadTextBox_Bootstrap {
    background-color: var(--ku-control-bg) !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-control-border) !important;
}

html[data-theme="dark-soft"] .form-control::placeholder,
html[data-theme="dark-soft"] .RadInput_Bootstrap .riEmpty,
html[data-theme="dark-soft"] .RadInput_Bootstrap .riTextBox::placeholder {
    color: var(--ku-text-muted) !important;
    opacity: 1;
}

html[data-theme="dark-soft"] .form-control:focus,
html[data-theme="dark-soft"] .form-select:focus,
html[data-theme="dark-soft"] .RadInput_Bootstrap .riTextBox:focus,
html[data-theme="dark-soft"] .RadComboBox_Bootstrap.rcbFocused .rcbInputCell {
    border-color: var(--ku-primary) !important;
    box-shadow: 0 0 0 0.16rem var(--ku-focus-ring) !important;
}

html[data-theme="dark-soft"] select option {
    background-color: var(--ku-popup-bg);
    color: var(--ku-control-text);
}

html[data-theme="dark-soft"] label,
html[data-theme="dark-soft"] .form-label,
html[data-theme="dark-soft"] .form-check label,
html[data-theme="dark-soft"] .form-check-label,
html[data-theme="dark-soft"] .rcbLabel,
html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbLabel,
html[data-theme="dark-soft"] .RadDropDownList_Bootstrap .rddlLabel,
html[data-theme="dark-soft"] .RadPicker_Bootstrap .riLabel {
    color: var(--ku-text-secondary) !important;
}

html[data-theme="dark-soft"] .form-check-input {
    background-color: var(--ku-control-bg);
    border-color: var(--ku-control-border);
}

html[data-theme="dark-soft"] .form-check-input:checked {
    background-color: var(--ku-primary-soft);
    border-color: var(--ku-primary);
}

html[data-theme="dark-soft"] body .RadForm.rfdCheckbox span.aspNetDisabled > input[type="checkbox"][disabled],
html[data-theme="dark-soft"] body span.aspNetDisabled > input[type="checkbox"][disabled] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: var(--ku-control-bg) !important;
    background-image: none !important;
    border: 1px solid var(--ku-control-border) !important;
    border-radius: 2px !important;
    box-shadow: inset 0 1px 2px rgba(4, 10, 20, 0.35) !important;
    opacity: 0.9;
}

html[data-theme="dark-soft"] body .RadForm.rfdCheckbox span.aspNetDisabled > input[type="checkbox"][disabled]:checked,
html[data-theme="dark-soft"] body .RadForm.rfdCheckbox span.aspNetDisabled > input[type="checkbox"][disabled][checked],
html[data-theme="dark-soft"] body span.aspNetDisabled > input[type="checkbox"][disabled]:checked,
html[data-theme="dark-soft"] body span.aspNetDisabled > input[type="checkbox"][disabled][checked] {
    background-color: var(--ku-control-bg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.4 2.4L11 4' fill='none' stroke='%238cc5ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
    border-color: var(--ku-primary) !important;
    opacity: 1;
}

html[data-theme="dark-soft"] body span.aspNetDisabled > label {
    color: var(--ku-text-secondary) !important;
    opacity: 0.9;
}

html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbInner,
html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbInputCell,
html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbArrowCell,
html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbActionButton,
html[data-theme="dark-soft"] .RadDropDownList_Bootstrap .rddlInner,
html[data-theme="dark-soft"] .RadDropDownList_Bootstrap .rddlFakeInput,
html[data-theme="dark-soft"] .RadDropDownList_Bootstrap .rddlSelect {
    background-color: var(--ku-control-bg) !important;
    background-image: none !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-control-border) !important;
}

html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbHovered .rcbInner,
html[data-theme="dark-soft"] .RadComboBox_Bootstrap.rcbHovered .rcbInner,
html[data-theme="dark-soft"] .RadDropDownList_Bootstrap.rddlHovered .rddlInner,
html[data-theme="dark-soft"] .RadDropDownList_Bootstrap .rddlInner:hover {
    background-color: var(--ku-control-bg-hover) !important;
    border-color: var(--ku-primary) !important;
}

html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbFocused .rcbInner,
html[data-theme="dark-soft"] .RadComboBox_Bootstrap.rcbFocused .rcbInner,
html[data-theme="dark-soft"] .RadDropDownList_Bootstrap.rddlFocused .rddlInner {
    border-color: var(--ku-primary) !important;
    box-shadow: 0 0 0 0.16rem var(--ku-focus-ring) !important;
}

html[data-theme="dark-soft"] .RadComboBoxDropDown_Bootstrap,
html[data-theme="dark-soft"] .RadComboBoxDropDown,
html[data-theme="dark-soft"] .RadComboBoxDropDown_Bootstrap .rcbScroll,
html[data-theme="dark-soft"] .RadComboBoxDropDown .rcbScroll,
html[data-theme="dark-soft"] .RadComboBoxDropDown_Bootstrap .rcbList,
html[data-theme="dark-soft"] .RadComboBoxDropDown .rcbList,
html[data-theme="dark-soft"] .RadDropDownListDropDown_Bootstrap,
html[data-theme="dark-soft"] .RadDropDownListDropDown,
html[data-theme="dark-soft"] .RadDropDownListDropDown .rddlList,
html[data-theme="dark-soft"] .RadDropDownListDropDown_Bootstrap .rddlList {
    background-color: var(--ku-popup-bg) !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-popup-border) !important;
    box-shadow: var(--ku-popup-shadow) !important;
}

html[data-theme="dark-soft"] .RadComboBoxDropDown_Bootstrap .rcbItem,
html[data-theme="dark-soft"] .RadComboBoxDropDown .rcbItem,
html[data-theme="dark-soft"] .RadDropDownListDropDown .rddlItem,
html[data-theme="dark-soft"] .RadDropDownListDropDown_Bootstrap .rddlItem {
    background-color: var(--ku-popup-bg) !important;
    color: var(--ku-control-text) !important;
}

html[data-theme="dark-soft"] .RadComboBoxDropDown_Bootstrap .rcbHovered,
html[data-theme="dark-soft"] .RadComboBoxDropDown .rcbHovered,
html[data-theme="dark-soft"] .RadComboBoxDropDown_Bootstrap .rcbItem:hover,
html[data-theme="dark-soft"] .RadComboBoxDropDown .rcbItem:hover,
html[data-theme="dark-soft"] .RadDropDownListDropDown .rddlItemHovered,
html[data-theme="dark-soft"] .RadDropDownListDropDown_Bootstrap .rddlItemHovered,
html[data-theme="dark-soft"] .RadDropDownListDropDown .rddlItem:hover,
html[data-theme="dark-soft"] .RadDropDownListDropDown_Bootstrap .rddlItem:hover {
    background-color: var(--ku-control-bg-hover) !important;
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .RadComboBoxDropDown_Bootstrap .rcbSelected,
html[data-theme="dark-soft"] .RadComboBoxDropDown .rcbSelected,
html[data-theme="dark-soft"] .RadDropDownListDropDown .rddlItemSelected,
html[data-theme="dark-soft"] .RadDropDownListDropDown_Bootstrap .rddlItemSelected {
    background-color: var(--ku-control-bg-active) !important;
    color: var(--ku-control-text) !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgPager .RadComboBox_Bootstrap .rcbInner,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgPager .RadComboBox_Bootstrap .rcbInputCell,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgPager .RadComboBox_Bootstrap .rcbArrowCell {
    background-color: var(--ku-control-bg) !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-control-border) !important;
}

html[data-theme="dark-soft"] .RadPicker_Bootstrap .rcCalPopup,
html[data-theme="dark-soft"] .RadPicker_Bootstrap .rcTimePopup,
html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbArrowCell a,
html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbActionButton,
html[data-theme="dark-soft"] .RadDropDownList_Bootstrap .rddlSelect {
    background-color: var(--ku-control-bg) !important;
    color: var(--ku-control-icon) !important;
    border-color: var(--ku-control-border) !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgFooterWrapper {
    border-top-color: var(--ku-border);
}

html[data-theme="dark-soft"] .RadGridCellsBordered .rgMasterTable .row-under-hours td {
    border-top-color: var(--ku-border) !important;
    border-top-width: 1px !important;
}

html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbIcon,
html[data-theme="dark-soft"] .RadDropDownList_Bootstrap .rddlIcon {
    color: var(--ku-control-icon) !important;
    opacity: 0.95;
}

html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbIcon,
html[data-theme="dark-soft"] .RadDropDownList_Bootstrap .rddlIcon {
    filter: invert(1) brightness(1.25) saturate(0.8);
}

html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbArrowCell,
html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbArrowCell a {
    background-image: none !important;
}

html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbArrowCell a {
    position: relative;
}

html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbArrowCell a:after {
    border-top: 5px solid var(--ku-control-icon);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0;
}

html[data-theme="dark-soft"] .RadInput_Bootstrap .riUp,
html[data-theme="dark-soft"] .RadInput_Bootstrap .riDown {
    background-color: var(--ku-control-bg) !important;
    background-image: none !important;
    border-color: var(--ku-control-border) !important;
    color: var(--ku-control-icon) !important;
    display: inline-block;
    overflow: hidden;
    text-indent: -9999px;
}

html[data-theme="dark-soft"] .RadInput_Bootstrap .riUp:hover,
html[data-theme="dark-soft"] .RadInput_Bootstrap .riDown:hover {
    background-color: var(--ku-control-bg-hover) !important;
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .RadInput_Bootstrap .riUp span,
html[data-theme="dark-soft"] .RadInput_Bootstrap .riDown span {
    visibility: hidden !important;
}

html[data-theme="dark-soft"] .RadInput_Bootstrap .riUp:after,
html[data-theme="dark-soft"] .RadInput_Bootstrap .riDown:after {
    content: "";
    left: 50%;
    margin-left: -4px;
    position: absolute;
    text-indent: 0;
    top: 50%;
}

html[data-theme="dark-soft"] .RadInput_Bootstrap .riUp:after {
    border-bottom: 5px solid var(--ku-control-icon);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    margin-top: -4px;
}

html[data-theme="dark-soft"] .RadInput_Bootstrap .riDown:after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--ku-control-icon);
    margin-top: -2px;
}

html[data-theme="dark-soft"] .RadInput_Bootstrap .riUp:hover:after {
    border-bottom-color: var(--ku-primary-hover);
}

html[data-theme="dark-soft"] .RadInput_Bootstrap .riDown:hover:after {
    border-top-color: var(--ku-primary-hover);
}

html[data-theme="dark-soft"] .RadPicker_Bootstrap .rcCalPopup[title="Open the monthyear view popup."] {
    background-image: none !important;
    position: relative;
}

html[data-theme="dark-soft"] .RadPicker_Bootstrap .rcCalPopup[title="Open the monthyear view popup."]:before {
    border: 2px solid var(--ku-control-icon);
    border-radius: 2px;
    content: "";
    height: 14px;
    left: 50%;
    margin-left: -7px;
    margin-top: -7px;
    position: absolute;
    top: 50%;
    width: 14px;
}

html[data-theme="dark-soft"] .RadPicker_Bootstrap .rcCalPopup[title="Open the monthyear view popup."]:after {
    background: var(--ku-control-icon);
    box-shadow: 0 4px 0 rgba(174, 192, 213, 0.55);
    content: "";
    height: 2px;
    left: 50%;
    margin-left: -5px;
    margin-top: -3px;
    position: absolute;
    top: 50%;
    width: 10px;
}

html[data-theme="dark-soft"] .RadPicker_Bootstrap .rcCalPopup:hover,
html[data-theme="dark-soft"] .RadPicker_Bootstrap .rcTimePopup:hover,
html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbArrowCell a:hover,
html[data-theme="dark-soft"] .RadComboBox_Bootstrap .rcbActionButton:hover,
html[data-theme="dark-soft"] .RadDropDownList_Bootstrap .rddlSelect:hover {
    background-color: var(--ku-control-bg-hover) !important;
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .RadCalendar_Bootstrap,
html[data-theme="dark-soft"] .RadCalendar_Bootstrap .rcMain,
html[data-theme="dark-soft"] .RadCalendar_Bootstrap .rcMainTable,
html[data-theme="dark-soft"] .RadCalendarMonthView,
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap,
html[data-theme="dark-soft"] .RadCalendarMonthView table,
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap table,
html[data-theme="dark-soft"] .RadCalendarTimeView,
html[data-theme="dark-soft"] .RadCalendarTimeView_Bootstrap,
html[data-theme="dark-soft"] .RadCalendarTimeView table,
html[data-theme="dark-soft"] .RadCalendarTimeView_Bootstrap table,
html[data-theme="dark-soft"] .RadCalendarMonthView .rcButtons,
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap .rcButtons {
    background-color: var(--ku-calendar-bg) !important;
    background-image: none !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-popup-border) !important;
    box-shadow: var(--ku-popup-shadow);
}

html[data-theme="dark-soft"] .RadCalendar_Bootstrap .rcTitlebar,
html[data-theme="dark-soft"] .RadCalendar_Bootstrap .rcHeader,
html[data-theme="dark-soft"] .RadCalendar_Bootstrap .rcFooter,
html[data-theme="dark-soft"] .RadCalendarMonthView .rcHeader,
html[data-theme="dark-soft"] .RadCalendarTimeView .rcHeader,
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap .rcHeader {
    background-color: var(--ku-control-bg-hover) !important;
    background-image: none !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-popup-border) !important;
}

html[data-theme="dark-soft"] .RadCalendar_Bootstrap td,
html[data-theme="dark-soft"] .RadCalendar_Bootstrap th,
html[data-theme="dark-soft"] .RadCalendar_Bootstrap a,
html[data-theme="dark-soft"] .RadCalendarMonthView td,
html[data-theme="dark-soft"] .RadCalendarMonthView a,
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap td,
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap a,
html[data-theme="dark-soft"] .RadCalendarTimeView td,
html[data-theme="dark-soft"] .RadCalendarTimeView a,
html[data-theme="dark-soft"] .RadCalendarTimeView_Bootstrap td,
html[data-theme="dark-soft"] .RadCalendarTimeView_Bootstrap a {
    background-color: var(--ku-calendar-cell-bg) !important;
    color: var(--ku-primary) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .RadCalendar_Bootstrap .rcHover a,
html[data-theme="dark-soft"] .RadCalendar_Bootstrap td:hover a,
html[data-theme="dark-soft"] .RadCalendarMonthView td:hover,
html[data-theme="dark-soft"] .RadCalendarMonthView a:hover,
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap td:hover,
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap a:hover,
html[data-theme="dark-soft"] .RadCalendarTimeView td:hover,
html[data-theme="dark-soft"] .RadCalendarTimeView a:hover,
html[data-theme="dark-soft"] .RadCalendarTimeView_Bootstrap td:hover,
html[data-theme="dark-soft"] .RadCalendarTimeView_Bootstrap a:hover {
    background-color: var(--ku-calendar-cell-hover-bg) !important;
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .RadCalendar_Bootstrap .rcSelected a,
html[data-theme="dark-soft"] .RadCalendar_Bootstrap .rcSelected,
html[data-theme="dark-soft"] .RadCalendarMonthView .rcSelected,
html[data-theme="dark-soft"] .RadCalendarMonthView .rcSelected a,
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap .rcSelected,
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap .rcSelected a,
html[data-theme="dark-soft"] .RadCalendarTimeView .rcSelected,
html[data-theme="dark-soft"] .RadCalendarTimeView .rcSelected a,
html[data-theme="dark-soft"] .RadCalendarTimeView_Bootstrap .rcSelected,
html[data-theme="dark-soft"] .RadCalendarTimeView_Bootstrap .rcSelected a {
    background-color: var(--ku-calendar-cell-selected-bg) !important;
    color: var(--ku-calendar-cell-selected-text) !important;
}

html[data-theme="dark-soft"] .RadCalendar_Bootstrap .rcToday a,
html[data-theme="dark-soft"] .RadCalendarMonthView .rcToday,
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap .rcToday {
    border-color: var(--ku-calendar-today-border) !important;
    box-shadow: inset 0 0 0 1px var(--ku-calendar-today-border) !important;
}

html[data-theme="dark-soft"] .RadCalendar_Bootstrap .rcOutOfRange,
html[data-theme="dark-soft"] .RadCalendar_Bootstrap .rcDisabled,
html[data-theme="dark-soft"] .RadCalendarMonthView .rcDisabled,
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap .rcDisabled {
    color: var(--ku-control-muted) !important;
    opacity: 0.55;
}

html[data-theme="dark-soft"] .RadCalendarMonthView input[type="button"],
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap input[type="button"],
html[data-theme="dark-soft"] .RadCalendarTimeView input[type="button"],
html[data-theme="dark-soft"] .RadCalendarTimeView_Bootstrap input[type="button"],
html[data-theme="dark-soft"] .RadCalendar_Bootstrap input[type="button"] {
    background-color: var(--ku-control-bg) !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-control-border) !important;
}

html[data-theme="dark-soft"] .RadCalendarMonthView input[type="button"]:hover,
html[data-theme="dark-soft"] .RadCalendarMonthView_Bootstrap input[type="button"]:hover,
html[data-theme="dark-soft"] .RadCalendarTimeView input[type="button"]:hover,
html[data-theme="dark-soft"] .RadCalendarTimeView_Bootstrap input[type="button"]:hover,
html[data-theme="dark-soft"] .RadCalendar_Bootstrap input[type="button"]:hover {
    background-color: var(--ku-control-bg-hover) !important;
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .RadScheduler_Bootstrap,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsContent,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsContentTable,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsContentScrollArea,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsMonthView {
    background-color: var(--ku-scheduler-bg) !important;
    color: var(--ku-scheduler-text) !important;
    border-color: var(--ku-scheduler-border) !important;
}

html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsHeader,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsTopWrap,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsToolbar,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsHorizontalHeaderTable th,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsMonthView .rsHorizontalHeaderTable th {
    background-color: var(--ku-scheduler-header-bg) !important;
    background-image: none !important;
    color: var(--ku-scheduler-text) !important;
    border-color: var(--ku-scheduler-border) !important;
}

    html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsHeader ul li a {
        background-color: var(--ku-button-primary-bg-hover) !important;
        background-image: none !important;
        border-color: var(--ku-button-primary-border-hover) !important;
        box-shadow: none !important;
        color: var(--ku-button-primary-text-hover) !important;
    }

html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsMonthView .rsContentTable td,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsMonthView .rsContentTable th,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsMonthView .rsWrap,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsMonthView .rsDateWrap,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsMonthView .rsDateBox,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsMonthView .rsDateHeader {
    background-color: var(--ku-scheduler-cell-bg) !important;
    background-image: none !important;
    color: var(--ku-scheduler-text) !important;
    border-color: var(--ku-scheduler-border) !important;
}

html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsMonthView .rsOtherMonth,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsMonthView .rsOtherMonth .rsWrap,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsMonthView .rsSatCol,
html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsMonthView .rsSunCol {
    background-color: var(--ku-scheduler-alt-cell-bg) !important;
    color: var(--ku-text-muted) !important;
}

html[data-theme="dark-soft"] .RadScheduler_Bootstrap .rsMonthView a.settings img {
    filter: invert(1) brightness(1.22) saturate(0.8);
    opacity: 0.8;
}

html[data-theme="dark-soft"] .RadTabStrip_Bootstrap .rtsLevel,
html[data-theme="dark-soft"] .RadTabStrip_Bootstrap .rtsUL {
    border-color: var(--ku-tab-border) !important;
}

html[data-theme="dark-soft"] .RadTabStrip_Bootstrap .rtsLink,
html[data-theme="dark-soft"] .RadTabStrip_Bootstrap .rtsIn {
    background-color: var(--ku-tab-bg) !important;
    background-image: none !important;
    color: var(--ku-tab-text) !important;
    border-color: var(--ku-tab-border) !important;
}

html[data-theme="dark-soft"] .RadTabStrip_Bootstrap .rtsHovered .rtsLink,
html[data-theme="dark-soft"] .RadTabStrip_Bootstrap .rtsLink:hover {
    background-color: var(--ku-tab-hover-bg) !important;
    color: var(--ku-primary-hover) !important;
    border-color: var(--ku-tab-active-border) !important;
}

html[data-theme="dark-soft"] .RadTabStrip_Bootstrap .rtsHovered .rtsIn,
html[data-theme="dark-soft"] .RadTabStrip_Bootstrap .rtsIn:hover {
    background-color: transparent !important;
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .RadTabStrip_Bootstrap .rtsSelected .rtsLink {
    background-color: var(--ku-tab-active-bg) !important;
    color: var(--ku-tab-active-text) !important;
    border-color: var(--ku-tab-active-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark-soft"] .RadTabStrip_Bootstrap .rtsSelected .rtsIn {
    background-color: transparent !important;
    color: var(--ku-tab-active-text) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark-soft"] .btn,
html[data-theme="dark-soft"] .RadButton_Bootstrap,
html[data-theme="dark-soft"] .RadButton_Bootstrap .rbDecorated {
    border-color: var(--ku-border-strong);
}

html[data-theme="dark-soft"] .ep-action-button,
html[data-theme="dark-soft"] .RadUpload_Bootstrap .ruButton,
html[data-theme="dark-soft"] .btn-primary,
html[data-theme="dark-soft"] .RadButton_Bootstrap.rbPrimaryButton,
html[data-theme="dark-soft"] .RadButton_Bootstrap.rbHovered {
    background-color: var(--ku-button-primary-bg) !important;
    background-image: none !important;
    border-color: var(--ku-button-primary-border) !important;
    box-shadow: none !important;
    color: var(--ku-button-primary-text) !important;
}

html[data-theme="dark-soft"] .RadButton_Bootstrap.rbPrimaryButton .rbDecorated,
html[data-theme="dark-soft"] .RadButton_Bootstrap.rbHovered .rbDecorated {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

html[data-theme="dark-soft"] .btn-primary:hover,
html[data-theme="dark-soft"] .RadButton_Bootstrap.rbPrimaryButton:hover,
html[data-theme="dark-soft"] .RadButton_Bootstrap.rbHovered:hover {
    background-color: var(--ku-button-primary-bg-hover) !important;
    background-image: none !important;
    border-color: var(--ku-button-primary-border-hover) !important;
    box-shadow: none !important;
    color: var(--ku-button-primary-text-hover) !important;
}

html[data-theme="dark-soft"] .RadButton_Bootstrap.rbPrimaryButton:hover .rbDecorated {
    background: transparent !important;
    border-color: transparent !important;
    color: inherit !important;
}

html[data-theme="dark-soft"] .btn-outline-primary,
html[data-theme="dark-soft"] .btn-outline-secondary {
    color: var(--ku-primary);
    border-color: var(--ku-border-strong);
}

html[data-theme="dark-soft"] .btn-outline-primary:hover,
html[data-theme="dark-soft"] .btn-outline-secondary:hover {
    background-color: var(--ku-surface-alt);
    color: var(--ku-primary-hover);
}

html[data-theme="dark-soft"] .btn-light,
html[data-theme="dark-soft"] .btn-secondary {
    background-color: var(--ku-surface-muted);
    border-color: var(--ku-border-strong);
    color: var(--ku-text);
}

html[data-theme="dark-soft"] .btn-light:hover,
html[data-theme="dark-soft"] .btn-secondary:hover {
    background-color: var(--ku-surface-alt);
    color: var(--ku-text);
}

html[data-theme="dark-soft"] .table {
    --bs-table-bg: var(--ku-grid-row-bg);
    --bs-table-color: var(--ku-control-text);
    --bs-table-border-color: var(--ku-border);
    --bs-table-striped-bg: var(--ku-grid-alt-row-bg);
    --bs-table-striped-color: var(--ku-control-text);
    --bs-table-hover-bg: var(--ku-grid-hover-bg);
    --bs-table-hover-color: var(--ku-control-text);
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap,
html[data-theme="dark-soft"] .RadGridCellsBordered,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgMasterTable,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgFooter td,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgDataDiv,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgFooter,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgCommandRow,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgCommandCell {
    background-color: var(--ku-grid-row-bg) !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgHeaderWrapper,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgHeaderDiv,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgHeader,
html[data-theme="dark-soft"] .RadGrid_Bootstrap th.rgHeader,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgHeader {
    background-color: var(--ku-grid-header-bg) !important;
    background-image: none !important;
    color: var(--ku-primary-hover) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgRow,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgRow > td,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgRow,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgRow td {
    background-color: var(--ku-grid-row-bg) !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgAltRow,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgAltRow > td,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgAltRow,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgAltRow td {
    background-color: var(--ku-grid-alt-row-bg) !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgRow:hover > td,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgAltRow:hover > td,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgHoveredRow,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgHoveredRow td {
    background-color: var(--ku-grid-hover-bg) !important;
    color: var(--ku-control-text) !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgPager,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgPagerCell,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgPager {
    background-color: var(--ku-grid-pager-bg) !important;
    color: var(--ku-text-secondary) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgCurrentPage,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgCurrentPage {
    background-color: var(--ku-grid-current-bg) !important;
    border-color: var(--ku-grid-current-bg) !important;
    color: var(--ku-grid-current-text) !important;
}

html[data-theme="dark-soft"] .RadGridCellsBordered .rgCommandRow,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgCommandCell,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgCommandRow,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgCommandCell {
    background-color: var(--ku-grid-command-to) !important;
    background-image: linear-gradient(90deg, var(--ku-grid-command-from) 0%, var(--ku-grid-command-to) 100%) !important;
    color: var(--ku-grid-command-text) !important;
    border-color: var(--ku-grid-command-border) !important;
}

html[data-theme="dark-soft"] .RadGridCellsBordered .rgCommandRow a,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgCommandCell a,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgCommandRow a,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgCommandCell a {
    color: var(--ku-grid-command-text) !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgGroupHeader,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgGroupHeader td,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgGroupHeader,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgGroupHeader td {
    background-color: var(--ku-grid-group-bg) !important;
    background-image: none !important;
    border-color: var(--ku-grid-group-border) !important;
    color: var(--ku-grid-group-text) !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgGroupHeader:hover,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgGroupHeader:hover td,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgGroupHeader:hover,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgGroupHeader:hover td {
    background-color: var(--ku-grid-group-hover-bg) !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgGroupCol,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgGroupCol,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgGroupHeader .rgGroupCol,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgGroupHeader .rgGroupCol {
    background-color: var(--ku-grid-group-toggle-bg) !important;
    border-color: var(--ku-grid-group-border) !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgExpand,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgCollapse,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgExpand,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgCollapse {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: content-box;
    color: transparent !important;
    cursor: pointer;
    display: inline-block;
    font-size: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-indent: -9999px;
    width: 0 !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgExpand,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgExpand {
    border-bottom: 5px solid transparent !important;
    border-left: 7px solid var(--ku-grid-group-toggle-text) !important;
    border-top: 5px solid transparent !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgCollapse,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgCollapse {
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 7px solid var(--ku-grid-group-toggle-text) !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap a,
html[data-theme="dark-soft"] .RadGridCellsBordered a {
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .weekly .wb-grid-wrap {
    border-bottom-color: var(--bs-white-rgb) !important;
}

html[data-theme="dark-soft"] .RadAjaxLoadingPanel,
html[data-theme="dark-soft"] .RadAjaxLoadingPanel_Bootstrap,
html[data-theme="dark-soft"] .KUAjaxLoadingPanel,
html[data-theme="dark-soft"] .raDiv,
html[data-theme="dark-soft"] .raColor {
    background-color: var(--ku-loading-overlay-bg) !important;
    color: var(--ku-loading-text) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .RadAjaxLoadingPanel .raDiv,
html[data-theme="dark-soft"] .RadAjaxLoadingPanel_Bootstrap .raDiv,
html[data-theme="dark-soft"] .KUAjaxLoadingPanel .raDiv {
    background-color: var(--ku-loading-panel-bg) !important;
    color: var(--ku-loading-text) !important;
}

html[data-theme="dark-soft"] .RadAjaxLoadingPanel img,
html[data-theme="dark-soft"] .RadAjaxLoadingPanel_Bootstrap img,
html[data-theme="dark-soft"] .KUAjaxLoadingPanel img {
    filter: invert(1) brightness(1.25) saturate(0.8);
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap td.rgSorted,
html[data-theme="dark-soft"] .RadGridCellsBordered td.rgSorted {
    background-color: inherit !important;
}

html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgSelectedRow td,
html[data-theme="dark-soft"] .RadGrid_Bootstrap .rgSelectedRow td.rgSorted,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgSelectedRow td,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgSelectedRow td.rgSorted {
    background-color: var(--primary-color) !important;
    color: var(--ku-surface) !important;
    border-color: var(--primary-color) !important;
}

html[data-theme="dark-soft"] .wb-header {
    background-color: var(--ku-weekly-header-bg) !important;
    border-color: var(--ku-weekly-header-border) !important;
    color: var(--ku-weekly-header-text) !important;
}

html[data-theme="dark-soft"] .wb-header h4 {
    color: var(--ku-weekly-header-text) !important;
}

html[data-theme="dark-soft"] .wb-header a {
    color: var(--ku-weekly-link) !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap {
    background-color: var(--ku-grid-row-bg) !important;
    border-color: var(--ku-border) !important;
    box-shadow: 0 1px 4px rgba(4, 10, 20, 0.32) !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid .rgMasterTable,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid .rgDataDiv {
    background-color: var(--ku-grid-row-bg) !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid .rgHeader,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid th {
    background-color: var(--ku-grid-header-bg) !important;
    background-image: none !important;
    color: var(--ku-primary-hover) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid td,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.rgRow td {
    background-color: var(--ku-grid-row-bg) !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.rgAltRow td {
    background-color: var(--ku-grid-alt-row-bg) !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr:hover td {
    background-color: var(--ku-grid-hover-bg) !important;
    color: var(--ku-control-text) !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid .rgFooter td,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tfoot td {
    background-color: var(--ku-grid-pager-bg) !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-border-strong) !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid a,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid td.wb-student-cell a {
    color: var(--ku-weekly-link) !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid a:hover,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid td.wb-student-cell a:hover {
    color: var(--ku-primary-hover) !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.rgRow.row-readonly td,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.rgAltRow.row-readonly td,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.row-readonly td {
    background-color: var(--ku-weekly-readonly-bg) !important;
    color: var(--ku-weekly-readonly-text) !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.rgRow.row-under-hours td,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.rgAltRow.row-under-hours td,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.row-under-hours td {
    background-color: var(--ku-weekly-under-bg) !important;
    color: var(--ku-weekly-under-text) !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.rgRow td.cell-over-hours,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.rgAltRow td.cell-over-hours,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr td.cell-over-hours {
    background-color: var(--ku-weekly-over-bg) !important;
    color: var(--ku-weekly-over-text) !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.rgRow.row-payroll-exported-doe-present td:not(.doe_cell),
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.rgAltRow.row-payroll-exported-doe-present td:not(.doe_cell),
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.row-payroll-exported-doe-present td:not(.doe_cell),
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.row-payroll-exported-doe-present td.wb-student-cell a,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.row-payroll-exported-doe-present td a {
    color: #7bd88f !important;
}

html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.rgRow.row-payroll-exported-doe-deleted td:not(.doe_cell),
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.rgAltRow.row-payroll-exported-doe-deleted td:not(.doe_cell),
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.row-payroll-exported-doe-deleted td:not(.doe_cell),
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.row-payroll-exported-doe-deleted td.wb-student-cell a,
html[data-theme="dark-soft"] .wb-grid-wrap .RadGrid tr.row-payroll-exported-doe-deleted td a {
    color: #fbbf24 !important;
}

html[data-theme="dark-soft"] .k-grid,
html[data-theme="dark-soft"] .k-grid .k-grid-header,
html[data-theme="dark-soft"] .k-grid .k-grid-content,
html[data-theme="dark-soft"] .k-grid .k-table,
html[data-theme="dark-soft"] .k-pager,
html[data-theme="dark-soft"] .k-toolbar {
    background-color: var(--ku-grid-row-bg) !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .k-grid .k-table-th,
html[data-theme="dark-soft"] .k-grid th {
    background-color: var(--ku-grid-header-bg) !important;
    color: var(--ku-primary-hover) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .k-grid .k-table-td,
html[data-theme="dark-soft"] .k-grid td {
    background-color: var(--ku-grid-row-bg) !important;
    color: var(--ku-control-text) !important;
    border-color: var(--ku-border) !important;
}

html[data-theme="dark-soft"] .k-grid tr.k-alt .k-table-td,
html[data-theme="dark-soft"] .k-grid tr.k-alt td {
    background-color: var(--ku-grid-alt-row-bg) !important;
}

html[data-theme="dark-soft"] .k-grid tr:hover .k-table-td,
html[data-theme="dark-soft"] .k-grid tr:hover td {
    background-color: var(--ku-grid-hover-bg) !important;
}

html[data-theme="dark-soft"] .alert p {
    color: var(--ku-grid-command-text) !important;
}

html[data-theme="dark-soft"] .avatar-circle {
    color: var(--ku-avatar-text) !important;
}

html[data-theme="dark-soft"] span.RadButton_Bootstrap.rbLinkButton {
    color: var(--bs-link-color) !important;
}

html[data-theme="dark-soft"] .card .card-header h6 {
    color: var(--ku-text) !important;
}

html[data-theme="dark-soft"] .RadUpload_Bootstrap .ruFakeInput {
    background: var(--bs-tertiary-bg);
}

html[data-theme="dark-soft"] .ev-field-row {
    border-bottom: 1px solid transparent;
}

html[data-theme="dark-soft"] .RadGridCellsBordered .rgHeaderDiv .rgSortAsc,
html[data-theme="dark-soft"] .RadGridCellsBordered .rgHeaderDiv .rgSortDesc {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: var(--ku-grid-sort-bg) !important;
    border: 1px solid var(--ku-grid-sort-border) !important;
    border-radius: 4px;
    box-shadow: none !important;
    font-size: 0;
    height: 18px;
    margin-left: 4px;
    min-height: 18px;
    min-width: 18px !important;
    vertical-align: middle;
    width: 18px !important;
    color: inherit!important;
}

html[data-theme="dark-soft"] .RadGridCellsBordered .rgHeaderDiv .rgSortAsc {
    background: var(--ku-grid-sort-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M5 11.5 9 6l4 5.5z' fill='%23b9dcff'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
}

html[data-theme="dark-soft"] .RadGridCellsBordered .rgHeaderDiv .rgSortDesc {
    background: var(--ku-grid-sort-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M5 6.5 9 12l4-5.5z' fill='%23b9dcff'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
}