/* properties */
:root {
    --font-size-xs: 9px;
    --font-size-small: 11px;
    --font-size-medium: 14px;
    --font-size-large: 16px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-size-xxxl: 32px;
    --icon-size-xs: 12px;
    --icon-size-small: 14px;
    --icon-size-medium: 16px;
    --icon-size-large: 20px;
    --icon-size-xl: 24px;
    --icon-size-xxl: 32px;
    --icon-size-xxxl: 48px;
    --ccs-color-req-default: #1F3862;
    --ccs-color-tab-strip-default: #1F3862;
    --ccs-banner-overflow-default: 0px;
}

body {
    --kendo-font-size: 1rem;
}

/* browser print options */
@media not print {
    .only-print {
        display: none !important;
    }
}

@media print {
    .hide-print {
        display: none !important;
    }
}

/* lets dialog popups support multi-line text */
.k-dialog-content {
    white-space: pre-line;
}

/* make sure dialogs don't stretch too far if content is too tall or wide */
div.k-dialog {
    max-height: 95vh;
    max-width: 90vw;
    min-width: 200px;
}

/* link buttons, image buttons, icon buttons - remove standard button styling */
button.ccs-button.ccs-link-button, button.ccs-button.ccs-image-button, button.ccs-button.ccs-icon-button {
    padding-block: initial;
    padding-inline: initial;
    border: none;
    background-color: inherit;
    background-image: none;
    transition: none;
}

button.ccs-button.ccs-link-button {
    color: blue;
    text-decoration: none;
    vertical-align: initial;
}

button.ccs-button.ccs-link-button > .k-button-text {
    line-height: initial;
}

    button.ccs-button.ccs-link-button:focus, button.ccs-button.ccs-image-button:focus, button.ccs-button.ccs-icon-button:focus {
        box-shadow: none;
    }

    button.ccs-button.ccs-link-button:active {
        color: red;
    }

    button.ccs-button.ccs-link-button:hover {
        text-decoration: underline;
    }

    button.ccs-button.ccs-link-button:disabled, button.ccs-button.ccs-link-button.k-disabled {
        text-decoration: none;
        cursor: default;
        color: inherit;
        opacity: initial
    }

/* grid link button styling */
.ccs-link-column-wrapper {
    text-align: inherit;
}

.ccs-link-column-wrapper > .ccs-link-button.ccs-link-column-button {
    text-decoration: none;
    text-align: inherit;
    color: initial;
    opacity: initial;
}

    .ccs-link-column-wrapper > .ccs-link-button.ccs-link-column-button:hover {
        text-decoration: underline;
    }

    .ccs-link-column-wrapper > .ccs-link-button.ccs-link-column-button:disabled,
    .ccs-link-column-wrapper > .ccs-link-button.ccs-link-column-button.k-disabled {
        text-decoration: none;
        cursor: default;
    }

.ccs-link-column-wrapper > .ccs-link-button.ccs-link-column-button > .k-button-text {
    white-space: normal;
    text-align: inherit;
    color: initial;
}

/* link button in template column styling */
.ccs-template-column-wrapper button.ccs-button.ccs-link-button {
    color: initial;
}

/* fix group name header on dropdown with no groups */
.ccs-dropdown-no-groups .k-list > .k-list-group-sticky-header,
.ccs-searchable-dropdown-no-groups .k-list > .k-list-group-sticky-header,
.ccs-multiselect-no-groups .k-list > .k-list-group-sticky-header,
.ccs-autocomplete-no-groups .k-list > .k-list-group-sticky-header {
    padding-block: 0px;
    height: 0px;
}

/* alignment */
.ccs-radio-button-list.align-start {
    align-items: flex-start;
}

.ccs-radio-button-list.align-center {
    align-items: center;
}

.ccs-radio-button-list.align-end {
    align-items: flex-end;
}

.ccs-radio-button-list.align-stretch {
    align-items: stretch;
}

/* text align */
.ccs-panel.text-align-left {
    text-align: left;
}

.ccs-panel.text-align-center {
    text-align: center;
}

.ccs-panel.text-align-right {
    text-align: right;
}

.ccs-panel.text-align-justify {
    text-align: justify;
}

.ccs-panel.ccs-layout-box.text-align-left {
    text-align: start;
}

.ccs-panel.ccs-layout-box.text-align-center, .ccs-panel.ccs-layout-box.text-align-justify {
    text-align: center;
}

.ccs-panel.ccs-layout-box.text-align-right {
    text-align: end;
}

/* justification */
.ccs-stack-layout.justify-start,
.ccs-grid-layout.justify-start,
.ccs-tile-layout.justify-start {
    justify-self: flex-start;
}

.ccs-stack-layout.justify-center,
.ccs-grid-layout.justify-center,
.ccs-tile-layout.justify-center {
    justify-self: center;
}

.ccs-stack-layout.justify-end,
.ccs-grid-layout.justify-end,
.ccs-tile-layout.justify-end {
    justify-self: flex-end;
}

.ccs-stack-layout.justify-stretch,
.ccs-grid-layout.justify-stretch,
.ccs-tile-layout.justify-stretch {
    justify-self: stretch;
}

/* fix for breadcrumb background color */
.ccs-breadcrumb.k-breadcrumb {
    background-color: inherit;
}

/* fix for layout box in a grid layout not stretching to full height if vertical align is set to stretch */
.ccs-grid-layout.ccs-grid-layout-vstretch > .ccs-grid-item:has(> .ccs-layout-box) {
    display: flex;
}

.ccs-grid-layout.ccs-grid-layout-vstretch > .ccs-grid-item > .ccs-layout-box {
    flex: 1;
}

/* layout box layout */
.ccs-layout-box {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 5px;
}

.ccs-layout-box > .ccs-layout-box-content {
    flex: 1;
    flex-basis: var(--panel-height, 0%);
}

/* style built-in labels of date range picker to match LabeledControl */
.ccs-date-range-picker label.k-floating-label {
    cursor: default;
    font-size: var(--font-size-small);
    line-height: normal;
}

.ccs-date-range-picker label.k-floating-label::after {
    content: ':';
}

.ccs-date-range-picker .k-floating-label-container {
    padding-top: 1em;
}

/* chooser css fixes */
.ccs-chooser > .k-window-content {
    display: flex;
    flex: 1 1 auto;
}

.ccs-chooser > .k-window-content > .ccs-chooser-grid {
    flex: 1 1 auto;
}

/* fix for window when minimized */
.ccs-window.k-window.k-window-minimized {
    min-height: initial !important;
}

/* fix for window when maximized */
.ccs-window.k-window.ccs-window-max {
    max-height: initial !important;
    max-width: initial !important;
    border-radius: 0;
}

/* hide window footer when it's empty */
.ccs-window.k-window > .k-actions.k-window-actions:not(.k-actions.k-window-actions:has(*)) {
    padding: 0;
    border: none;
}

/* text size */
span.text-xs, div.text-xs {
    font-size: var(--font-size-xs);
}

span.text-small, div.text-small {
    font-size: var(--font-size-small);
}

span.text-medium, div.text-medium {
    font-size: var(--font-size-medium);
}

span.text-large, div.text-large {
    font-size: var(--font-size-large);
}

span.text-xl, div.text-xl {
    font-size: var(--font-size-xl);
}

span.text-xxl, div.text-xxl {
    font-size: var(--font-size-xxl);
}

span.text-xxxl, div.text-xxxl {
    font-size: var(--font-size-xxxl);
}

/* icon size */
.ccs-svg-icon.icon-size-xs {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    font-size: calc(16px * 0.75);
}

.ccs-svg-icon.icon-size-small {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    font-size: calc(16px * 0.875);
}

.ccs-svg-icon.icon-size-medium {
    width: var(--icon-size-medium);
    height: var(--icon-size-medium);
    font-size: 16px;
}

.ccs-svg-icon.icon-size-large {
    width: var(--icon-size-large);
    height: var(--icon-size-large);
    font-size: calc(16px * 1.25);
}

.ccs-svg-icon.icon-size-xl {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    font-size: calc(16px * 1.5);
}

.ccs-svg-icon.icon-size-xxl {
    width: var(--icon-size-xxl);
    height: var(--icon-size-xxl);
    font-size: calc(16px * 2);
}

.ccs-svg-icon.icon-size-xxxl {
    width: var(--icon-size-xxxl);
    height: var(--icon-size-xxxl);
    font-size: calc(16px * 3);
}

/* text styles */
span.text-bold, div.text-bold {
    font-weight: bold;
}

span.text-italic, div.text-italic {
    font-style: italic;
}

span.text-underline, div.text-underline {
    text-decoration: underline;
}

/* filter container */
.filter-container {
    display: flex;
    flex-flow: row wrap;
    column-gap: 10px;
    row-gap: 10px;
    padding: 5px;
    min-width: 800px;
}

.filter-container:empty {
    padding: 0px;
}

.ccs-window .filter-container {
    /* no min width for filters in popups */
    min-width: unset;
}

.filter-container > .vis-container {
    /* pass along column gap from filter container to date range filter */
    column-gap: inherit;
}

.filter-container > .filter-checkbox,
.filter-container > .filter-container-buttons,
.filter-container > .filter-popup {
    /* vertically center certain filters */
    align-self: center;
}

/* required class */
.req > .k-input-inner,
.ccs-date-range-picker.req .k-dateinput > .k-input-inner,
.ccs-multiselect.req > .k-input-values,
.ccs-autocomplete-multi.req > .k-input-values,
button.ccs-button.ccs-chooser-block.req {
    border-left: 6px solid var(--ccs-color-req, var(--ccs-color-req-default));
}

.ccs-radio-button-list.req .k-radio,
.ccs-radio-button.req .k-radio,
.ccs-checkbox.req .k-checkbox,
.ccs-checkbox-list.req .k-checkbox {
    outline: 2px solid var(--ccs-color-req, var(--ccs-color-req-default));
}

/* chooser blocks */
div.ccs-chooser-block {
    display: inline-flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    gap: 4px;
}

/* fix for lightning icons */
.ccs-svg-icon.k-svg-icon[class^='k-svg-i-ccs-lightning'] > svg,
.ccs-svg-icon.k-svg-icon[class*=' k-svg-i-ccs-lightning'] > svg {
    fill: none;
}

/* better color for dates not in month range on date pickers */
.ccs-date-picker .k-calendar .k-other-month,
.ccs-date-time-picker .k-calendar .k-other-month,
.ccs-date-range-picker .k-calendar .k-other-month {
    color: #CCCCCC;
}

/* remove padding beneath tab strip if tab strip has no content */
.ccs-tab-strip .k-tabstrip-content:not(.k-tabstrip-content:has(*)) {
    padding: 0;
}

/* hide tab strip if only one tab */
.ccs-tab-strip.ccs-tab-strip-hide-if-one-tab .k-tabstrip-items-wrapper:has(> .k-tabstrip-items > .k-tabstrip-item:only-child) {
    display: none;
}

/* increase notification font size */
.ccs-notification .k-notification {
    font-size: var(--kendo-font-size-md, inherit);
}

/* still show tooltips on disabled buttons */
.ccs-button.k-button:disabled, .ccs-button.k-button.k-disabled {
    pointer-events: auto;
}

/* fix images in flex boxes being too large when their size is constrained */
.ccs-image.k-avatar {
    flex-basis: auto !important;
}

/* tile layout */
.ccs-tile-layout.k-tilelayout {
    background-color: initial;
}

.ccs-tile-layout.ccs-tile-layout-fixed-width {
    grid-template-columns: repeat(auto-fit, minmax(0px, var(--ccs-tile-layout-col-width))) !important;
}

.tile-layout-item.tile-layout-item-all-cols {
    grid-column: 1/-1 !important;
}

/* splitter */
.ccs-splitter.k-splitter {
    background-color: initial;
    border: none;
}

.ccs-splitter .k-splitbar {
    background-color: #F2F2F2;
}

.ccs-splitter .k-splitbar.k-splitbar-static-horizontal, .ccs-splitter .k-splitbar.k-splitbar-static-vertical {
    visibility: hidden;
}

/* banners in windows */
.k-window-content:has(> .ccs-banner) {
    padding-top: 0px;
    overflow-x: hidden;
}

/* standalone radio button */
ul.ccs-radio-button.k-radio-list {
    display: inline-flex;
}

.ccs-radio-button > .k-radio-list-item:has(input[value="-2147483648"]) {
    display: none;
}

/* wrapping for a link button in a checkbox list */
.ccs-checkbox-list .ccs-checkbox-list-edit-wrapper > .ccs-link-button {
    white-space: inherit;
    text-align: inherit;
}

/* labeled control layout */
.labeled-control {
    display: flex;
    flex-flow: column nowrap;
}

/* hide built-in date range picker labels if wrapped in a LabeledControl */
.labeled-control > .labeled-control-content > .ccs-date-range-picker.k-daterangepicker > .k-floating-label-container {
    padding-top: 0;
}

.labeled-control > .labeled-control-content > .ccs-date-range-picker.k-daterangepicker > .k-floating-label-container > .k-floating-label {
    display: none;
}

.labeled-control > .labeled-control-content > .ccs-date-range-picker-view .labeled-control-label > .ccs-label {
    display: none;
}

.labeled-control > .labeled-control-content > .ccs-date-range-picker-view .labeled-control {
    width: max-content;
}

.labeled-control > .labeled-control-content > .ccs-date-range-picker-view > .labeled-control:first-child > .labeled-control-content:after {
    content: '-';
    font-size: var(--font-size-medium);
    font-weight: bold;
    margin-left: 5px;
}

.ccs-date-range-picker-view {
    gap: 5px;
}

/* chooser block styling */
button.ccs-button.ccs-chooser-block {
    background-color: #f9f9f9;
    border-color: lightgrey;
    color: #3d3d3d;
    border-radius: 0.25rem;
    padding-block: 1.75px;
    cursor: initial;
    width: 100%;
}

button.ccs-button.ccs-chooser-block > .k-button-text {
    width: 100%;
}

button.ccs-button.ccs-chooser-block.ccs-chooser-block-empty.ccs-chooser-block-enabled {
    cursor: pointer;
}

button.ccs-button.ccs-chooser-block.ccs-chooser-block-empty {
    background-color: #fefefe;
    color: #7f7f7f;
}

button.ccs-button.ccs-chooser-block.ccs-chooser-block-empty.ccs-chooser-block-enabled:hover {
    background-color: #f3f3f3;
}

button.ccs-button.ccs-chooser-block.ccs-chooser-block-full.ccs-chooser-block-full-has-action {
    cursor: pointer;
}

button.ccs-button.ccs-chooser-block.ccs-chooser-block-full {
    background-color: #efefef;
}

button.ccs-button.ccs-chooser-block.ccs-chooser-block-full.ccs-chooser-block-full-has-action:hover {
    background-color: #e5e5e5;
}

button.ccs-button.ccs-chooser-block .ccs-chooser-block-container {
    display: grid;
    grid-template-columns: 1fr max-content max-content;
    gap: 5px;
    align-items: center;
    justify-items: flex-start;
}

.ccs-chooser-block .ccs-chooser-block-label {
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100%);
    text-align: start;
}

.ccs-chooser-block.ccs-chooser-block-empty .ccs-chooser-block-label {
    font-style: italic;
}

.ccs-chooser-block .ccs-chooser-block-icon-wrapper {
    line-height: normal;
}

.ccs-chooser-block .ccs-chooser-block-icon-btn svg {
    color: #7f7f7f;
}

/* show notifications above modal windows */
/* https://feedback.telerik.com/blazor/1511070-bring-notifications-in-front-of-window-modal-overlay */
.k-notification-group.ccs-notification {
    z-index: 20000;
}

/* image button alignment fix when inside a card (like a tile layout) */
.k-card .ccs-image-button .k-avatar {
    margin-right: initial;
}

/* link button wrapping */
button.ccs-link-button {
    white-space: normal;
    text-align: initial;
}

/* styling for the multi-select chooser selected items popup */
.ccs-chooser-block-multi-items-popup .k-chip-list.ccs-chooser-block-multi-selected-items {
    flex-flow: column nowrap;
    align-items: flex-start;
}

/* fix for treeview leaf wrapping when text is too long */
.ccs-treeview .k-treeview-leaf, .ccs-dropdown-tree-treeview .k-treeview-leaf {
    white-space: normal;
}

/* no data template */
.no-data-template {
    align-self: center;
    text-align: center;
    padding-block: 10px;
}

/* inherit font size for labels within labels that don't set a different font size */
.ccs-label .ccs-button,
.ccs-label .ccs-label.text-size-default {
    font-size: inherit;
}

/* slider padding */
.ccs-slider.k-slider.k-slider-horizontal,
.ccs-range-slider.k-slider.k-slider-horizontal {
    padding-bottom: 1rem;
}

.ccs-slider.k-slider.k-slider-vertical:not(.ccs-slider-show-buttons),
.ccs-range-slider.k-slider.k-slider-vertical {
    padding-block: 0.5rem;
}

.ccs-slider.k-slider.k-slider-horizontal.ccs-slider-min-size-s:not(.ccs-slider-show-buttons),
.ccs-range-slider.k-slider.k-slider-horizontal.ccs-range-slider-min-size-s {
    padding-left: 0.5rem;
}

.ccs-slider.k-slider.k-slider-horizontal.ccs-slider-min-size-m:not(.ccs-slider-show-buttons),
.ccs-range-slider.k-slider.k-slider-horizontal.ccs-range-slider-min-size-m {
    padding-left: 1rem;
}

.ccs-slider.k-slider.k-slider-horizontal.ccs-slider-min-size-l:not(.ccs-slider-show-buttons),
.ccs-range-slider.k-slider.k-slider-horizontal.ccs-range-slider-min-size-l {
    padding-left: 1.5rem;
}

.ccs-slider.k-slider.k-slider-horizontal.ccs-slider-max-size-s:not(.ccs-slider-show-buttons),
.ccs-range-slider.k-slider.k-slider-horizontal.ccs-range-slider-max-size-s {
    padding-right: 0.5rem;
}

.ccs-slider.k-slider.k-slider-horizontal.ccs-slider-max-size-m:not(.ccs-slider-show-buttons),
.ccs-range-slider.k-slider.k-slider-horizontal.ccs-range-slider-max-size-m {
    padding-right: 1rem;
}

.ccs-slider.k-slider.k-slider-horizontal.ccs-slider-max-size-l:not(.ccs-slider-show-buttons),
.ccs-range-slider.k-slider.k-slider-horizontal.ccs-range-slider-max-size-l {
    padding-right: 1.5rem;
}

.ccs-slider.k-slider.k-slider-vertical.ccs-slider-min-size-s,
.ccs-slider.k-slider.k-slider-vertical.ccs-slider-max-size-s,
.ccs-range-slider.k-slider.k-slider-vertical.ccs-range-slider-min-size-s,
.ccs-range-slider.k-slider.k-slider-vertical.ccs-range-slider-max-size-s {
    padding-right: 1rem;
}

.ccs-slider.k-slider.k-slider-vertical.ccs-slider-min-size-m,
.ccs-slider.k-slider.k-slider-vertical.ccs-slider-max-size-m,
.ccs-range-slider.k-slider.k-slider-vertical.ccs-range-slider-min-size-m,
.ccs-range-slider.k-slider.k-slider-vertical.ccs-range-slider-max-size-m {
    padding-right: 2rem;
}

.ccs-slider.k-slider.k-slider-vertical.ccs-slider-min-size-l,
.ccs-slider.k-slider.k-slider-vertical.ccs-slider-max-size-l,
.ccs-range-slider.k-slider.k-slider-vertical.ccs-range-slider-min-size-l,
.ccs-range-slider.k-slider.k-slider-vertical.ccs-range-slider-max-size-l {
    padding-right: 3rem;
}

/* slider hide ticks */
.ccs-slider.k-slider.ccs-slider-hide-ticks-small .k-tick:not(.k-tick-large, .k-first, .k-last),
.ccs-range-slider.k-slider.ccs-range-slider-hide-ticks-small .k-tick:not(.k-tick-large, .k-first, .k-last) {
    visibility: hidden;
}

.ccs-slider.k-slider.ccs-slider-hide-ticks-large.ccs-slider-hide-ticks-small .k-tick.k-tick-large:not(.k-first, .k-last),
.ccs-range-slider.k-slider.ccs-range-slider-hide-ticks-large.ccs-range-slider-hide-ticks-small .k-tick.k-tick-large:not(.k-first, .k-last) {
    /* only hide large tick marks if small ticks are also hidden */
    visibility: hidden;
}

.ccs-slider.k-slider.ccs-slider-hide-ticks-large .k-tick.k-tick-large:not(.k-first, .k-last),
.ccs-range-slider.k-slider.ccs-range-slider-hide-ticks-large .k-tick.k-tick-large:not(.k-first, .k-last) {
    /* revert it to look like a small tick */
    background-position-y: -92px;
}

.ccs-slider.k-slider.ccs-slider-hide-ticks-large .k-tick.k-tick-large:not(.k-first, .k-last) .k-label,
.ccs-range-slider.k-slider.ccs-range-slider-hide-ticks-large .k-tick.k-tick-large:not(.k-first, .k-last) .k-label{
    visibility: hidden;
}

.ccs-slider.k-slider.ccs-slider-hide-ticks-large .k-tick.tick-small-hide:not(.k-first, .k-last),
.ccs-slider.k-slider .k-tick.tick-small-hide:not(.k-tick-large, .k-first, .k-last),
.ccs-range-slider.k-slider.ccs-range-slider-hide-ticks-large .k-tick.tick-small-hide:not(.k-first, .k-last),
.ccs-range-slider.k-slider .k-tick.tick-small-hide:not(.k-tick-large, .k-first, .k-last) {
    visibility: hidden;
}

/* make sure view mode text in grid columns looks normal */
.ccs-dropdown-column-wrapper > .view-mode-display > .ccs-label.text-style-default,
.ccs-template-column-wrapper > .view-mode-display > .ccs-label.text-style-default {
    font-weight: normal;
}

/* hide time picker now button since it returns server time */
.k-time-header .k-time-now {
    display: none;
}

/* hide the searchable dropdown's down-arrow button for search boxes */
.search-box.ccs-searchable-dropdown > button.k-button {
    display: none;
}