/* ====================== BUTTON ====================== */
/* ----------- All ----------- */
button.ccs-button {
    transition: none;
    background-color: white;
    color: black;
    border: 1px solid gray;
    border-radius: 9px;
    padding-block: 3px;
    padding-inline: 8px;
}

/* style buttons to be smaller when in a toolbar */
.ccs-toolbar.ccs-grid-toolbar > button.k-button.ccs-button:not(.ccs-toolbar-button),
.ccs-toolbar-button.ccs-toolbar-regular-button.ccs-button,
.ccs-toolbar-button.ccs-toolbar-split-button.ccs-split-button:not(.k-animation-container) {
    padding-block: 0px;
    padding-inline: 4px;
}

.ccs-toolbar.ccs-grid-toolbar > button.k-button.ccs-button:not(.ccs-toolbar-button) .ccs-label.text-size-default,
.ccs-toolbar-button.ccs-toolbar-regular-button.ccs-button .ccs-label.text-size-default,
.ccs-toolbar-button.ccs-toolbar-split-button.ccs-split-button:not(.k-animation-container) .ccs-label.text-size-default {
    font-size: var(--font-size-small);
}

.ccs-toolbar-button.ccs-toolbar-split-button.ccs-split-button .k-button-arrow > .k-icon {
    width: 12px;
    height: 12px;
}

/* ----------- Important Skin ----------- */
button.ccs-button.ccs-button-important {
    background-color: #F95D3B;
    color: white;
    border: none;
}

    button.ccs-button.ccs-button-important:hover {
        background-color: #FB866C;
        color: black;
    }

    button.ccs-button.ccs-button-important:active {
        background-color: #FF532D;
        color: black;
    }

/* ----------- Flat Skin ----------- */
button.ccs-button.ccs-button-flat {
    border-radius: 0;
}

/* ====================== CALENDAR ====================== */
/* ----------- All ----------- */
.ccs-calendar .ccs-calendar-date:hover {
    background-color: #f9f9f9;
}

.ccs-calendar .ccs-calendar-date.ccs-calendar-date-weekend,
.ccs-calendar:not(.ccs-calendar-week-view) .ccs-calendar-date.ccs-calendar-date-outside-current-month {
    background-color: #f5f5f5;
}

.ccs-calendar .ccs-calendar-date.ccs-calendar-date-weekend:hover,
.ccs-calendar:not(.ccs-calendar-week-view) .ccs-calendar-date.ccs-calendar-date-outside-current-month:hover {
    background-color: #f0f0f0;
}

.ccs-calendar .ccs-calendar-toolbar {
    background-color: #f9f9f9;
}

.ccs-calendar .ccs-calendar-date.ccs-calendar-date-today {
    background-color: aliceblue;
}

.ccs-calendar .ccs-calendar-date.ccs-calendar-date-today:hover {
    background-color: #e8f0ff;
}

/* ====================== CHECKBOX ====================== */
/* ----------- All ----------- */
.ccs-checkbox .k-checkbox, .ccs-grid .k-checkbox, .ccs-checkbox .k-checkbox:indeterminate, .ccs-grid .k-checkbox:indeterminate {
    border-color: #767676;
}

.ccs-checkbox .k-checkbox:checked, .ccs-grid .k-checkbox:checked {
    border-color: #ff6358;
}

/* ====================== DATE PICKER ====================== */
/* ----------- All ----------- */
.k-datepicker.ccs-date-picker {
    border: 1px solid lightgrey;
}

/* ====================== DATE RANGE PICKER ====================== */
/* ----------- All ----------- */
.k-daterangepicker.ccs-date-range-picker .k-dateinput {
    border: 1px solid lightgrey;
}

/* ====================== DATE TIME PICKER ====================== */
/* ----------- All ----------- */
.k-datetimepicker.ccs-date-time-picker {
    border: 1px solid lightgrey;
}

/* ====================== DROPDOWN LIST ====================== */
/* ----------- All ----------- */
.k-dropdownlist.ccs-dropdown {
    border: 1px solid lightgrey;
    background-color: #f9f9f9;
}

/* ====================== DROPDOWN TREE ====================== */
/* ----------- All ----------- */
.k-dropdownlist.ccs-dropdown-tree {
    border: 1px solid lightgrey;
    background-color: #f9f9f9;
}

/* ====================== EXPANDER LIST ====================== */
/* ----------- All ----------- */
.ccs-expander-list.ccs-expander-list-stack.k-panelbar,
.ccs-expander-list.ccs-expander-list-datalist .ccs-expander-list-block.k-panelbar {
    background-color: initial;
    border: none;
}

.ccs-expander-list.ccs-expander-list-stack.k-panelbar > .k-panelbar-header > .k-link {
    background-color: initial;
    padding-block: var(--kendo-spacing-2, 0.5rem);
    padding-inline: var(--kendo-spacing-3, 0.75rem);
}

.ccs-expander-list.ccs-expander-list-datalist .ccs-expander-list-block.k-panelbar > .k-panelbar-header > .k-link {
    background-color: initial;
    padding-block: 0;
    padding-inline: 0;
}

    .ccs-expander-list.ccs-expander-list-stack.k-panelbar > .k-panelbar-header > .k-link:hover,
    .ccs-expander-list.ccs-expander-list-datalist .ccs-expander-list-block.k-panelbar > .k-panelbar-header > .k-link:hover {
        background-color: var(--kendo-color-base-hover, #ebebeb);
    }

    .ccs-expander-list.ccs-expander-list-datalist .ccs-expander-list-block.k-panelbar > .k-panelbar-header > .k-link.k-focus,
    .ccs-expander-list.ccs-expander-list-datalist .ccs-expander-list-block.k-panelbar > .k-panelbar-header > .k-link:focus {
        box-shadow: none;
    }

.ccs-expander-list.ccs-expander-list-stack.k-panelbar > .k-panelbar-header + .k-panelbar-header {
    border-block-start-width: 0px;
}

.ccs-expander-list.ccs-expander-list-stack.k-panelbar > .k-panelbar-header > .k-link,
.ccs-expander-list.ccs-expander-list-datalist .ccs-expander-list-block.k-panelbar > .k-panelbar-header > .k-link {
    font-size: var(--font-size-large);
    font-weight: bold;
    color: darkblue;
}

.ccs-expander-list.ccs-expander-list-stack.k-panelbar .k-panelbar-content {
    padding-left: var(--kendo-spacing-4, 1rem);
    padding-block: var(--kendo-spacing-1, 0.25rem);
}

.ccs-expander-list.ccs-expander-list-datalist .ccs-expander-list-block.k-panelbar .k-panelbar-content {
    padding-inline: 0;
    padding-block: 0;
}

/* ====================== GRID ====================== */
/* ----------- All ----------- */
.ccs-grid .k-table-thead {
    background-color: gainsboro;
    color: navy;
    font-weight: bold;
}

.ccs-grid .k-grid-header .k-header.k-sorted {
    color: darkred;
}

/* ====================== IMAGE & IMAGE BUTTON ====================== */
/* ----------- Thumbnail ----------- */
.ccs-image.ccs-image-thumbnail,
.ccs-image-button.ccs-image-button-thumbnail .ccs-image {
    border-radius: 9px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* ====================== MULTISELECT ====================== */
/* ----------- All ----------- */
.k-multiselect.ccs-multiselect {
    border: 1px solid lightgrey;
}

/* ====================== NUMERIC TEXTBOX ====================== */
/* ----------- All ----------- */
.k-numerictextbox.ccs-numeric-textbox {
    border: 1px solid lightgrey;
}

/* ====================== RADIO BUTTON ====================== */
/* ----------- All ----------- */
.ccs-radio-button .k-radio-list-item .k-radio, .ccs-radio-button .k-radio-list-item .k-radio:indeterminate {
    border-color: #767676;
}

    .ccs-radio-button .k-radio-list-item .k-radio:checked {
        border-color: #ff6358;
    }

/* ====================== RADIO BUTTON LIST ====================== */
/* ----------- All ----------- */
.k-radio-list.ccs-radio-button-list .k-radio, .k-radio-list.ccs-radio-button-list .k-radio:indeterminate {
    border-color: #767676;
}

.k-radio-list.ccs-radio-button-list .k-radio:checked {
    border-color: #ff6358;
}

/* ====================== SPLIT BUTTON ====================== */
/* ----------- All ----------- */
button.ccs-split-button {
    background-color: white;
    color: black;
    border: 1px solid gray;
    border-radius: 9px;
    padding-block: 3px;
    padding-inline: 8px;
}

div.ccs-split-button > button.k-button {
    background-color: white;
    color: black;
    border: 1px solid gray;
    padding-block: 3px;
}

    div.ccs-split-button > button.k-button:active, div.ccs-split-button > button.k-button:focus, div.ccs-split-button > button.k-button:hover {
        background-color: revert;
    }

div.ccs-split-button > button.k-button:first-child {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    border-right: none;
}

div.ccs-split-button > button.k-button.k-split-button-arrow {
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

/* ====================== TAB STRIP & TABS ====================== */
/* ----------- All ----------- */
.k-tabstrip.ccs-tab-strip > .k-tabstrip-content {
    padding-inline: 8px;
    background-color: inherit;
    border-color: transparent;
}

    .k-tabstrip.ccs-tab-strip > .k-tabstrip-content:focus {
        outline-color: transparent;
    }

.k-tabstrip.ccs-tab-strip:not(.ccs-tab-strip-reversed) > .k-tabstrip-items-wrapper.k-hstack {
    border-bottom-width: 3px;
    border-bottom-color: var(--ccs-color-tab-strip, var(--ccs-color-tab-strip-default));
}

.k-tabstrip.ccs-tab-strip:not(.ccs-tab-strip-reversed) > .k-tabstrip-items-wrapper.k-vstack {
    border-right-width: 3px;
    border-right-color: var(--ccs-color-tab-strip, var(--ccs-color-tab-strip-default));
}

.k-tabstrip.ccs-tab-strip.ccs-tab-strip-reversed > .k-tabstrip-items-wrapper.k-hstack {
    border-top-width: 3px;
    border-top-color: var(--ccs-color-tab-strip, var(--ccs-color-tab-strip-default));
}

.k-tabstrip.ccs-tab-strip.ccs-tab-strip-reversed > .k-tabstrip-items-wrapper.k-vstack {
    border-left-width: 3px;
    border-left-color: var(--ccs-color-tab-strip, var(--ccs-color-tab-strip-default));
}

.k-tabstrip.ccs-tab-strip .k-tabstrip-item.k-active.ccs-tab {
    background-color: var(--ccs-color-tab-strip, var(--ccs-color-tab-strip-default));
    color: white;
}

.k-tabstrip.ccs-tab-strip .k-tabstrip-items {
    margin-left: 8px;
}

.k-tabstrip.ccs-tab-strip span + .k-tabstrip-items {
    margin-left: unset;
}

.k-tabstrip.ccs-tab-strip .k-tabstrip-items:not(:has(+ span)) {
    margin-right: 8px;
}

/* ====================== TEXTAREA ====================== */
/* ----------- All ----------- */
.k-textarea.ccs-textarea {
    border: 1px solid lightgrey;
}

/* ----------- Code Skin ----------- */
.k-textarea.ccs-textarea.ccs-textarea-code {
    font-family: Courier New, Courier, monospace;
}

/* ====================== TEXTBOX ====================== */
/* ----------- All ----------- */
.k-textbox.ccs-textbox, .k-maskedtextbox.ccs-textbox {
    border: 1px solid lightgrey;
}

/* ====================== TIME PICKER ====================== */
/* ----------- All ----------- */
.k-timepicker.ccs-time-picker {
    border: 1px solid lightgrey;
}

/* ====================== WINDOW ====================== */
/* ----------- All ----------- */
.k-window.ccs-window {
    border-radius: 9px;
}

.k-window.ccs-window > .k-window-titlebar {
    background-color: #054DB0;
    color: white;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}