:root {
    --font-family: Arial, sans-serif;
    --font-size: 12px;
    /* Common colors */
    --color-primary: #428bca;
    --color-primary-light: #76abd9;
    --color-secondary: #f5f5f5;
    --color-text: #333;
    --color-border: #ccc;
    --color-background: #ebebeb;
    --color-disabled: #a6a6a6;
}

* {
    font-family: var(--font-family);
    font-size: var(--font-size);
}

html {
    overflow: hidden;
}

body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

/* start datepicker */
.k-child-animation-container {
    height: auto;
}

.k-calendar-container.k-popup {
    border: 1px solid var(--color-border);
    border-radius: 0px 0px 4px 4px;
}

.k-calendar-container.k-popup .k-calendar.k-calendar-md {
    padding: 0px !important;
    line-height: 1.42857143;
    border: 3px solid var(--color-secondary);
    border-radius: 0px 0px 4px 4px;
}

.k-calendar > .k-header {
    border-color: var(--color-border);
    color: var(--color-text);
    background-color: var(--color-secondary);
}

.k-calendar .k-header {
    padding: 3px 3px;
    border-bottom-width: 0;
    border-bottom-style: solid;
    text-align: center;
    position: relative;
    z-index: 1;
}

.k-calendar-view {
    min-height: 170px !important;
    padding: 0px;
}

.k-calendar .k-calendar-th {
    color: #212529 !important;
    font-size: 12px;
}

.k-calendar-th::first-letter {
    text-transform: uppercase;
}

.k-calendar-th {
    text-transform: lowercase;
}

.k-calendar .k-other-month {
    color: #a1a1a1;
    background-color: transparent;
}

.k-calendar .k-calendar-td.k-focus .k-link {
    box-shadow: inset 0 0 7px 0 var(--color-primary-light) !important;
}

.k-calendar-footer {
    padding: 2px;
}

.k-calendar .k-calendar-td.k-selected.k-focus .k-link {
    box-shadow: none;
}

.k-calendar .k-calendar-td.k-selected .k-link, .k-calendar .k-calendar-td.k-selected.k-hover .k-link {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.k-calendar .k-calendar-view .k-today .k-link {
    box-shadow: inset 0 0 0 1px var(--color-primary);
    font-weight: 400;
}

.k-calendar-td.k-today.k-selected.k-focus {
    color: #fff;
}

.k-calendar-td.k-today .k-link {
    color: var(--color-primary);
}

.k-button-md.k-icon-button {
    border-color: var(--color-border);
    background-color: #ffffff;
    color: var(--color-text);
}

.k-button-md.k-icon-button:hover {
    background-color: var(--color-background);
    border-color: #aeaeae;
}

.k-toolbar .k-input:hover, .k-input-inner:hover {
    border-color: #aeaeae;
}

.k-datepicker:hover .k-button-md.k-icon-button {
    background-color: var(--color-background);
    border-color: #aeaeae;
}

.k-datepicker:focus-within .k-button-md.k-icon-button {
    background-color: var(--color-background);
}

.k-calendar-nav-today span {
    color: #428bca !important;
}

.k-calendar-nav-today:hover {
    color: var(--color-primary) !important;
}

.k-calendar-nav-today.k-flex.k-button.k-button-md.k-button-flat.k-button-flat-primary.k-rounded-md {
    background-color: #fff !important;
    color: #fff !important;
}

.k-calendar-nav-today.k-flex.k-button.k-button-md.k-button-flat.k-button-flat-primary.k-rounded-md:hover {
    text-decoration: underline #428bca;
}

.k-datepicker:has(.k-input-inner[aria-expanded="true"]) {
    box-shadow: none;
    border-color: var(--color-border);
}

.k-datepicker.k-focus.k-hover {
    border-color: var(--color-border) !important;
}

.k-button-flat-primary {
    color: #3681c1;
}

.k-input-solid:focus-within, .k-picker-solid:focus-within {
    box-shadow: 0 0 7px 0 var(--color-primary-light);
}

.k-picker-solid {
    border-color: var(--color-border);
}
/* end datepicker */

/* start scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px #99bbe8;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px #084aa1;
}

.k-pager-numbers-wrap .k-button-md.k-icon-button {
    border-color: var(--color-border) !important;
    background-color: #ffffff !important;
}
/* end scrollbar */

/* start Loader */
.k-loading-image {
    color: var(--color-primary);
}
/* end Loader */

/* --- input, textbox,textarea Start --- */
input.k-textbox {
    padding: 3px 0px 3px 8px;
    color: var(--color-text);
    background-color: #fff;
}

input.k-input:disabled, input.k-input[disabled], textarea.k-textarea:disabled, textarea.k-textarea[disabled] {
    opacity: 0.6;
}

.k-textbox {
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

.k-textbox:focus, .k-textarea:focus {
    box-shadow: 0 0 7px 0 var(--color-primary-light);
    border-color: var(--color-border);
}

input.k-textbox:focus-visible {
    outline: none;
}

/* --- Checkbox Start --- */
.k-checkbox:checked {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #fff;
}

 .k-checkbox:checked:focus {
     box-shadow: 0 0 0 2px rgba(66, 139, 202, .3);
     border-color: var(--color-primary);
 }
/* --- Checkbox End --- */

/* Button Start*/
.k-button:focus {
    border-color: #69ace6 !important;
    box-shadow: 0 0 7px 0 var(--color-primary-light) !important;
    transition: none;
}

.k-button {
    color: #FFF;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: 4px;
}

.k-button:hover {
    color: var(--color-text);
    border-color: #aeaeae;
    background-color: var(--color-background);
}
/* --- Button End --- */

/* --- ToolBar Start --- */
#toolbar {
    padding: 5px;
}
/* --- ToolBar End --- */

/* --- Popup Window Start--- */
div.k-window {
    border: 5px solid #d0def0 !important;
    border-radius: 4px;
    background-color: #d0def0;
    box-shadow: none;
    border-bottom: 1px solid var(--color-border);
    border-top: 0px;
}

.k-overlay {
    background-color: #000000c2;
}

.k-window-title {
    font-size:12px;
    font-weight: 700 !important;
    color: #15428b;
}

.k-window-titlebar {
    background: #d0def0;
    font-weight: 700;
    color: #15428b;
    height: 2.5px;
}

div.k-window-content {
    padding: 12px;
    background: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: hidden;
}
/* --- Popup Window End--- */

/* --- Kendo Alert Start --- */
.deleteWarningMsg {
    padding-left: 8px;
}

.alertLeftPadding {
    padding-left: 10px;
}

.fa-sharp.fa-solid.fa-circle-question {
    font-family: "Font Awesome 6 Pro";
}

.fa-triangle-exclamation {
    position: absolute;
    font-size: 34px;
    font-family: var(--fa-style-family,"Font Awesome 6 Pro") !important;
    color: rgb(240, 173, 78);
    left: 14px !important;
    top: 12px !important;
}

.fa-circle-question, .fa-circle-info {
    position: absolute;
    background: linear-gradient(142deg, #2683b1 20%, #24dae2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Font Awesome 6 Pro";
    font-size: 32px;
    line-height: 33px;
    padding-right: 4px;
    left: 12px !important;
    top: 11px !important;
}

.k-ext-dialog-content {
    font: normal 12px tahoma, arial, helvetica, sans-serif !important;
    margin-left: 9px;
    margin-top: 1px;
    color: var(--color-text);
}

.k-ext-dialog-content > .fa-circle-xmark,.fa-circle-xmark {
    background: linear-gradient(142deg, #ff4631 20%, #f18d10 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 32px;
}
/* --- Kendo Alert End --- */

/* --- Grid start--- */
#grid {
    background-color: white;
    width: 100%;
}

.k-grid-toolbar {
    padding: .3em .3em .3em .5em;
    border: 1px solid;
}

.k-column-title {
    font-weight: bold;
}

.k-grid-footer td {
    background-color: #f2f2f2;
}

.table-width {
    width: 100%;
}

.k-grid table {
    width: 100%;
}

.no-scrollbar .k-grid-content {
    overflow-y: auto;
}

.k-grid td, .k-grid .k-table-td {
    vertical-align: middle;
    border-width: 1px;
    border-inline-start-width: 0;
    color: var(--color-text);
    border-block-end: none;
}

.k-grid {
    -webkit-tap-highlight-color: var(--color-secondary);
}


.k-grid .k-table-th {
    border-color: var(--color-border);
    background-color: var(--color-secondary);
    left: -1px;
}

td.k-table-td {
    border-bottom: 1px solid var(--color-border);
    border-top: none;
}

.k-grid .k-table {
    width: 100% !important;
}

.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: 8px 5.2px;
    text-align: start;
}

.k-grid .k-table-td {
    border-color: var(--color-border);
    padding: 4.8px 7.2px;
}

.k-grid td:first-child {
    border-right-width: 1px;
}

.k-grid-md .k-table-th > .k-cell-inner > .k-link {
    padding: 6px 7.200px 7.800px !important;
}

.k-grid .k-grid-header .k-table-th {
    align-items: start;
    font-size: 12px;
    color: var(--color-text);
}

.k-grid td {
    line-height: 1.2em;
}

.k-grid tr:hover {
    background-color: var(--color-background);
}

.k-grid-content.k-auto-scrollable, .k-grid-footer-wrap.k-auto-scrollable, .k-grid-header-wrap.k-auto-scrollable {
    color: #000000;
}

.k-grid tbody .k-button {
    background: none;
    border: 0;
}

.k-toolbar.k-grid-toolbar {
    height: auto;
    display: block;
    border-bottom: 1px solid var(--color-border) !important;
}

.k-grid tbody .k-button:hover {
    background: #c6daf3;
}

.k-grid-header th.k-header {
    vertical-align: middle;
}

.k-grid-header:first-child, .k-grid > .k-grouping-header {
    border-radius: 3px 3px 0 0;
}

.k-grid .k-table-th, .k-table-td {
    box-shadow: none !important;
}

.k-grid .k-grid-pager:focus, .k-grid .k-grid-pager.k-focus {
    box-shadow: none;
}

.k-grid .k-cell-inner > .k-link {
    text-overflow: ellipsis;
}

.k-grid .k-grid-header {
    border-color: var(--color-border);
}

.k-pager.k-grid-pager.k-pager-md {
    border: 1px solid var(--color-border);
    color: var(--color-disabled);
    border-width: 1px 0px 1px;
    padding: 1px 4px 4px 4px;
    background-color: var(--color-secondary);
    border-radius: 0px;
    margin-bottom: 0px !important;
}

.k-grid .k-grid-header .k-cell-inner > .k-link > .k-sort-icon .k-icon {
    margin-left: -8px;
}

.k-grid .k-grid-container {
    overflow: visible;
}

.k-grid .k-grid-header {
    padding-right: 15px;
}

.k-pager-md .k-pager-numbers-wrap {
    border-right-width: 1px;
    border-left-width: 0px;
    margin-top: 3px;
}

.k-pager-numbers > .k-button span.k-button-text {
    color: var(--color-primary);
}

.k-pager-numbers > .k-button.k-selected span.k-button-text {
    color: #ffffff;
}

.k-pager-md .k-pager-numbers-wrap .k-button {
    border-color: var(--color-border) !important;
    margin-left: -1px !important;
    background-color: #fff !important;
}

.k-pager-md .k-pager-numbers-wrap .k-pager-nav.k-button:focus {
    box-shadow: inset 0 0 7px 0 var(--color-primary-light) !important;
}

.k-pager-input .k-numerictextbox {
    padding-top: 1px;
    padding-bottom: 1px;
    background-color: #fff !important;
}

.k-pager-wrap.k-pager-sm .k-pager-sizes {
    display: block;
}

.k-pager-sizes {
    margin-top: 4px;
}

.k-window-titlebar-actions {
    display: none;
}

.k-pager-sizes .k-input-value-text {
    padding-top: 2px;
    padding-left: 4px;
}

.k-pager-wrap > .k-link {
    border-right-style: solid;
    border-right-color: var(--color-border);
    border-right-width: 1px;
}

.k-pager-wrap .k-link.k-state-disabled {
    color: var(--color-disabled);
}

.k-pager-numbers > .k-button span.k-button-text {
    color: var(--color-primary);
}

.k-pager-numbers > .k-button.k-selected span.k-button-text {
    color: #ffffff;
}

.k-pager-md .k-pager-numbers-wrap {
    border-right-width: 1px;
    border-left-width: 0px;
}

button.k-pager-nav.k-button.k-button-flat.k-button-flat-base.k-icon-button.k-button-md.k-disabled > .k-svg-icon > svg {
    color: var(--color-disabled) !important;
}

k-button k-button-flat-base k-button-md k-icon-button:hover {
    background-color: var(--color-background) !important;
}

span.k-button-icon.k-icon.k-svg-icon.k-svg-i-caret-alt-right {
    color: var(--color-text);
}

.k-picker, .k-picker-solid {
    cursor: pointer;
    background-color: #fff !important;
    border: 1px solid var(--color-border) !important;
}

.k-pager-info {
    justify-content: flex-end;
    display: block !important;
    margin-right: 12px;
    margin-left: 12px;
}

span.k-button-icon.k-icon.k-svg-icon.k-svg-i-caret-alt-to-left {
    color: var(--color-primary) !important;
}

span.k-button-icon.k-icon.k-svg-icon.k-svg-i-caret-alt-to-right {
    color: var(--color-primary) !important;
}

.k-pager-nav > span.k-button-icon.k-icon.k-svg-icon.k-svg-i-caret-alt-right {
    color: var(--color-primary) !important;
}

.k-pager-nav > span.k-button-icon.k-icon.k-svg-icon.k-svg-i-caret-alt-left {
    color: var(--color-primary) !important;
}

.k-pager-wrap .k-link:hover {
    color: var(--color-primary) !important;
    border-color: var(--color-border) !important;
    background: var(--color-background) !important;
}

.k-input-value-text {
    color: black;
}

.k-input-solid:hover, .k-input-solid.k-hover {
    border-color: #aeaeae !important;
}

input.k-input-inner.k-disabled {
    padding-left: 0px;
}

.k-pager-numbers-wrap {
    border-radius: 4px 0px 0px 4px;
}

.k-input-solid:focus-within {
    box-shadow: 0 0 7px 0 var(--color-primary-light);
}

.k-input-md .k-input-icon {
    left: 179px;
}

.k-pager-md .k-pager-numbers-wrap .k-pager-nav.k-button:focus {
    box-shadow: inset 0 0 7px 0 var(--color-primary-light) !important;
}

.k-pager-wrap {
    color: rgb(166, 166, 166);
}

.k-pager-md .k-pager-sizes .k-dropdownlist {
    display: inline-flex !important;
    width: 60px;
}

.k-pager-input .k-input-inner {
    text-align: center;
    padding: 0px;
}

.k-pager-numbers-wrap > button.k-button.k-button-md.k-icon-button:hover {
    background-color: var(--color-background) !important;
}

.k-pager-sizes .k-widget.k-dropdown {
    position: absolute;
}

.k-pager-input .k-numerictextbox .k-input-validation-icon {
    display: none !important;
}

.k-pager-input .k-numerictextbox .k-input-inner.k-invalid {
    border: 1px solid red !important;
    box-shadow: none !important;
}

.k-input-solid.k-invalid:focus-within {
    border: 1px solid red !important;
    box-shadow: 0 0 7px 0 #76abd9;
}
/*/----Grid end--------/*/

/* start dropdownlist */
.k-dropdownlist .k-button-md.k-icon-button {
    border: none;
}

.k-dropdownlist .k-input-inner,
.k-dropdownlist .k-input-button {
    padding: 4px;
    transition: none !important;
}

.k-dropdownlist:hover .k-input-inner,
.k-dropdownlist:hover .k-input-button {
    background-color: var(--color-background);
    transition: none !important;
}

.k-picker.k-dropdownlist[aria-expanded="true"] {
    box-shadow: none !important;
    border-color: var(--color-border);
}

.k-dropdownlist:focus-within .k-input-inner,
.k-dropdownlist:focus-within .k-input-button {
    transition: none !important;
    box-shadow: none !important;
}

.k-dropdownlist:focus .k-input-inner,
.k-dropdownlist:focus .k-input-button {
    box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
}

.k-list-item {
    transition-duration: unset;
}

.k-list-content {
    overflow-x: auto;
}

.k-list-ul {
    padding: 2px;
}

.k-list-item, .k-list-optionlabel:hover {
    margin-bottom: 2px;
}

.k-list-md .k-list-item, .k-list-md .k-list-optionlabel {
    padding-inline: 6.5px;
}

.k-list-item:hover {
    background-color: var(--color-background);
    border-radius: 4px;
}

.k-input-value-text {
    padding-left: 4px;
}

.k-list-item.k-selected {
    box-shadow: rgb(50, 118, 177) 0px 0px 10px 3px inset !important;
    border-radius: 4px;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.k-selected.k-list-optionlabel {
    border-radius: 4px;
    background-color: var(--color-primary);
    box-shadow: none;
    margin: 2px;
}

.k-selected.k-list-optionlabel:hover {
    border: 1px solid #aeaeae;
    background-color: var(--color-background);
    color: black;
    box-shadow: rgb(50, 118, 177) 0px 0px 10px 3px inset !important;
    padding: 2.2px 5px 2.2px 6.5px;
}

.k-list-item.k-selected:hover {
    box-shadow: rgb(50, 118, 177) 0px 0px 10px 3px inset !important;
    background-color: var(--color-background);
    color: black;
    border: 1px solid transparent;
}

.k-listbox .k-item, .k-popup .k-list .k-item {
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    padding: 0 4px;
}
/* end dropdownlist */

/* start KendoAlert Css */
.k-dialog-actions {
    background: #fff;
    border: none;
    justify-content: center;
}

    .k-dialog-actions .k-button {
        max-width: 60px;
    }

.k-window-content.k-dialog-content {
    border-radius: 0px;
}

.alert-content {
    margin-left: 55px;
}
/* end KendoAlert Css */