@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --font-family: "Poppins", sans-serif !important;
    --sky-blue-400: #0071c1;
    --white-primary: #fff;
    --grey: #E1E5EA;
    --light-gray: #f7f7f7;
    --dark-blue-500: #384b70;
    --grey-light: #f0f0f0;
    --black-500: #8c8c8c;
    --black-400: #333;
    --black: #000;
    --blue-600: #205781;
    --light-blue-50: #fbfbfb;
    --light-blue-100: #eaf1fa;
    --light-blue-200: #eaf0ff;
    --light-blue-300: #b1c5f5;
    --light-blue-400: #e5f4ff;
    --red: #b20303;
    --light-red: #ff2d2d;
    --green: #008a15;
    --green-light: #26b050;
    --orange: #ff6358;
    --oilve: #918b8a;
    --kendo-error-color: #f0d0cd;
    --kendo-error-border-color: #c77066;
    --kendo-success-color: #d3ecc8;
    --kendo-success-border-color: #89e760;
    --transparent: transparent;
    /*font size*/
    --text-30: 30px;
    --text-28: 28px;
    --text-26: 26px;
    --text-25: 25px;
    --text-24: 24px;
    --text-22: 22px;
    --text-20: 20px;
    --text-18: 18px;
    --text-16: 16px;
    --text-15: 15px;
    --text-14: 14px;
    --text-13: 13px;
    --text-12: 12px;
    --text-11: 11px;
    --text-10: 10px;
    /*font weight*/
    --font-weight-600: 600;
    --font-weight-500: 500;
    --font-weight-400: 400;
    --font-weight-800: 800;
    --font-weight-700: 700;
}
* {
    margin: 0;
    padding: 0;
    font-family: var(--font-family) !important;
    box-sizing: border-box;
}
h1:focus {
    outline: none;
}
a,.btn-link {
    color: var(--sky-blue-400);
}
.page article.content {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--green-light);
}
.k-focus .k-input-inner {
    border: 1px solid var(--blue-600);
    border-radius: 3px;
}
body {
    background: var(--light-blue-100);
}
.invalid {
    outline: 1px solid var(--red);
}
.validation-message {
    color: var(--red);
    font-size: var(--text-13);
}
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
   cursor: pointer;
   position: absolute;
   right: 0.75rem;
   top: 0.5rem;
}
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after {
   content: "An error has occurred."
}
p,h1,h2,h3,h4,h5,h6 {
    margin: 0;
}
.r-container {
    display: flex;
    gap: 20px;
}
.space-20 {
    margin-top: 20px !important ;
}
.borderCard {
    border-radius: 0 0 5px 5px;
    border: 1px solid var(--light-blue-200);
    border-top: none;
    padding: 14px;
    margin-top: 0;
}
.fullWidthColumn {
    grid-column: 1/5;
}
@media (max-width: 991px) {
    .r-container {
        flex-wrap: wrap;
    }
}
.r-container .r-w-33 {
    width: 100%;
    display: flex;
    flex-direction: column;
}
@media (min-width: 992px) {
    .r-container .r-w-33 {
        flex: 1;
    }
}
@media (min-width: 992px) {
    .r-container .r-w-33.open-ticket-counts {
        flex: 0 0 300px;
    }
}
@media (min-width: 992px) {
    .r-container .r-w-33.open-ticket-status {
        flex: 0 0 400px;
    }
}
.dashboard {
   padding: 20px 0px;
}
.dashboardDatePicker {
    max-width: 600px;
    right: 15px;
    left: auto !important;
}
.dashboard .r-dashboard-main-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 10px;
   flex-wrap: wrap;
   margin: 0 0 15px;
}
.dashboard h2 {
   font-size: var(--text-30);
   color: var(--dark-blue);
}
.dashboard .r-card {
   box-shadow: 0px 0px 5px var(--grey-light);
   border-radius: 8px;
   background-color: var(--white-primary);
   position: relative;
   overflow: hidden;
}
.dashboard .filters {
   display: flex;
   gap: 10px;
   align-items: center;
}
.headerFilter .telerik-blazor .k-floating-label {
    display: none
}
.custom-form-select, .filters .telerik-blazor .k-floating-label-container input {
    color: var(--dark-blue-500);
    font-weight: 500;
    line-height: 1.5em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    outline: none !important;
    appearance: none;
    background-color: var(--white-primary);
    border: 1px solid var(--dark-blue-500);
    width: 125px;
    padding: 5px 10px;
    font-size: var(--text-11);
    border-radius: 4px;
    position: relative;
    appearance: auto;
}
.k-floating-label-container {
    padding-top: 0px !important;
}
.dashboard .no-data-found {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-14);
    height: 100%;
}
.dashboard .r-card.r-h-auto {
    min-height: initial;
}
.dashboard .r-card .r-card-head {
    padding: 15px;
}
.dashboard .r-card .r-card-head .r-card-title {
    font-size: var(--text-18);
    font-weight: var(--font-weight-600);
    display: flex;
    justify-content: space-between;
    color: var(--dark-blue-500);
    align-items: center;
    width: 100%;
    grid-gap: 10px;
}
.dashboard .r-card .r-card-head .r-sub-heading {
    font-size: var(--text-13);
}
.dashboard .r-card .r-card-body {
    padding: 0 5px 15px;
    min-height: 200px;
}
.r-tickets-status {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.r-tickets-status .r-item {
    background-color: #4383f9;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    gap: 10px;
    color: var(--white-primary);
    width: calc(25% - 15px)
}
.r-tickets-status .bg-created {
    background-color: #339299;
}
.r-tickets-status .bg-slateBlue {
    background-color: #577b8d;
}
.r-tickets-status .bg-purple {
    background-color: #B771E5;
}
.r-tickets-status .bg-action {
    background-color: #00a2e8;
}
.r-tickets-status .r-item .r-icon {
    background-color: var(--white-primary);
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.r-tickets-status .r-item .r-icon svg path {
    fill: #339299;
}
.r-tickets-status .bg-blue .r-icon svg path {
    fill: #4383f9;
}
.r-tickets-status .bg-green {
    background-color: #00bd8c;
}
.r-tickets-status .bg-green .r-icon svg path {
    fill: #00bd8c;
}
.r-tickets-status .bg-red {
    background-color: #e51d23;
}
.r-tickets-status .bg-red .r-icon svg path {
    fill: #e51d23;
}
.r-tickets-status .bg-yellow {
    background-color: #ffb900;
}
.r-tickets-status .bg-yellow .r-icon svg path {
    fill: #ffb900;
}
.r-tickets-status .r-item .r-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.r-tickets-status .r-item .r-content p {
    font-size: var(--text-14);
    white-space: nowrap;
}
.r-tickets-status .r-item .r-content h4 {
    letter-spacing: 0.5px;
    font-size: var(--text-22);
}
.dashboard .department-widges {
    display: flex;
    margin-top: 20px;
    grid-gap: 12px;
}
.dashboard .department-widges-multiple .department-widges-horizontal {
    display: flex;
    gap: 15px;
    width: 100%;
    flex-wrap: wrap;
    flex-direction:column;
    height:100%;
}
.dashboard .department-widges-multiple .department-widges-horizontal .r-card {
    width: 100%;
    flex:1
}
@media (max-width: 1199px) {
    .dashboard .overview-widges {
        grid-template-columns: 1fr 1fr;
    }
    .dashboard .overview-widges .overview-widges-multiple {
        grid-column: span 2;
    }
}
@media (max-width: 991px) {
    .dashboard .department-widges {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 767px) {
    .dashboard .overview-widges {
       grid-template-columns: 1fr;
    }
    .dashboard .overview-widges .overview-widges-multiple {
       grid-column: span 1;
    }
    .dashboard .department-widges-multiple .department-widges-horizontal {
       flex-direction: column;
    }
}
/*  common table  */
.commonTable .telerik-blazor table {
   width: 100%;
}
.exportBtn button {
   background: var(--blue-600);
   color: var(--white-primary);
}
.commonTable .telerik-blazor table thead tr th {
   background: var(--blue-600) !important;
   padding: 10px 10px;
   position: sticky !important;
   top: 0;
   color: var(--white-primary) !important;;
   font-size: var(--text-11);
}
.commonTable .telerik-blazor table thead tr th .k-svg-icon svg {
   color: var(--white-primary);
}
.commonTable .telerik-blazor table tr td {
   font-size: var(--text-11);
   padding: 12px 10px;
   color: var(--dark-blue-500);
   font-weight: var(--font-weight-500);
   white-space: nowrap;
}
.commonTable .telerik-blazor table tbody tr:nth-child(even) {
   background: var(--grey-light);
}
.commonTable .k-pager {
   width: 100%;
   margin-top: 20px;
   display: flex;
   align-items: center;
   flex-direction: row-reverse;
   justify-content: space-between;
   gap: 10px;
}
.k-pager-info {
   font-size: var(--text-13);
   font-weight: var(--font-weight-500);
   color: #0D1282;
}
.k-pager-numbers .k-button-flat {
   padding: 7px 14px;
   width: 35px;
   height: 35px;
   font-size: var(--text-14);
   border: 1px solid #0D1282;
   color: #0D1282;
}
/*  chart  */
text {
   font-weight: var(--font-weight-600) !important;
   font-size: var(--text-11) !important;
}
.r-ticket-department-col {
   width: calc(33% - 8px);
}
.department-widges-multiple {
   width: calc(67% - 8px)
}
/*  telrik dropdown  */
.telerik-blazor.k-dropdownlist {
   background: var(--white-primary);
   border-radius: 5px;
   border: 1px solid var(--dark-blue-500);
   color: var(--dark-blue-500);
   box-shadow: none;
   font-size: var(--text-13);
}
.k-list-content .k-list-ul {
   font-size: var(--text-11);
}
.k-list-content .k-list-ul li:hover {
   color: var(--white-primary);
   background: var(--dark-blue-500);
}
.k-list-item.k-selected, .k-selected.k-list-optionlabel {
   box-shadow: none !important;
   color: var(--white-primary) !important;
   background-color: var(--dark-blue-500) !important;
}
.k-dropdownlist-popup > .k-list, .k-popup.k-list-container {
   height: auto !important;
   max-height: 300px;
}
.k-list-optionlabel {
   font-size: var(--text-13);
}
.k-popup .k-list .k-nodata {
   min-height: auto;
   padding: 10px 0px;
}
/*  ticket dep table  */
.k-skeleton-text, .k-placeholder-line {
   transform: unset !important;
}
.r-skeleton {
   width: 100%;
}
.r-skeleton .heading-sel {
   width: 100%;
   margin-bottom: 10px
}
r-skeleton .heading-sel .k-skeleton {
    width: 100%;
}
.charts-lines {
   width: 100%;
   display: flex;
   gap: 25px;
   margin-top: 20px;
   align-items: flex-end;
   padding-left: 15px;
}
.charts-line {
   display: flex;
}
.charts-line .k-skeleton {
   height: 400px;
}
/*  donut skeleton  */
.donut-skeleton .r-card-title .k-skeleton {
   width: 300px;
}
.donut-skeleton .r-card-body .k-skeleton {
   margin: 10px auto;
}
/*  table skeleton  */
.table-skeleton .r-card-body {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.table-skeleton .r-card-body .k-skeleton {
   width: 70% !important;
   height: 35px;
}
.table-skeleton .r-card-body .k-skeleton:nth-child(2) {
   width: 80% !important;
}
.table-skeleton .r-card-body .k-skeleton:nth-child(3) {
   width: 90% !important;
}
.widget-skeleton .r-content p {
   width: 130px;
}
.widget-skeleton {
   background: var(--white-primary) !important;
}
/*  chart label  */
.k-chart-legend-item g text {
   transform: translateY(-2px);
}
.k-chart-legend-item g path {
   transform: scale(0.9);
}
.table-widget {
   width: 100%;
   margin-top: 15px;
}
.k-chart .k-label {
   white-space: pre-wrap;
   text-align: center;
}
.r-card-title .k-dropdownlist {
   width: 200px;
}
/*  section success css  */
.btn-primary {
   padding: 10px 20px !important;
   color: var(--dark-blue-500) !important;
   background-color: var(--light-blue-200) !important;
   border-color: var(--light-blue-200) !important;
   font-size: var(--text-14) !important;
   width: 100px !important;
   font-weight: var(--font-weight-600);
}
.btn-primary:hover {
    background-color: var(--light-blue-300) !important;
    border-color: var(--light-blue-300) !important;
}
.btn-check:active + .btn-primary:focus, .btn-check:checked + .btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show > .btn-primary.dropdown-toggle:focus {
    background-color: var(--light-blue-300) !important;
    box-shadow: none !important;
}
.btn-group {
   display: flex;
   gap: 10px;
}
.demo-notification {
   position: absolute;
   position: fixed;
   left: 0;
   right: 0 !important;
   left: unset !important;
   transform: unset !important;
   bottom: -10px;
}
.demo-notification .k-notification {
    width: 300px;
}
.k-notification-container {
    margin: 6px 0;
}
#demo-runner {
    height: 500px;
}
.custom-notification {
    width: 400px;
    height: 100px;
}
.btn-primary.disabled, .btn-primary:disabled {
    background: var(--oilve) !important;
    color: var(--white-primary);
    border-color: var(--oilve) !important;
}
.k-notification {
    min-height: 60px;
}
.k-notification .telerik-blazor {
    width: 30px;
}
.k-notification .k-notification-content {
    font-size: var(--text-15);
}
.k-notification-container {
    width: 310px;
}
.k-stepper .k-step-current.k-disabled .k-step-indicator::before, .k-stepper .k-step-done.k-disabled .k-step-indicator {
    background-color: var(--dark-blue-500) !important;
}
.k-stepper .k-step-done.k-step-disabled .k-step-indicator::before, 
.k-stepper .k-step-done.k-disabled .k-step-indicator::before, 
.k-stepper .k-step-done:disabled .k-step-indicator::before {
    background-color:  color-mix(in srgb, var(--sky-blue-400) 60%, transparent) !important;
}
.k-progressbar .k-selected {
    border-color: var(--sky-blue-400) !important;
    background-color: var(--sky-blue-400) !important;
}
.k-stepper .k-step-done.k-step-disabled .k-step-indicator, 
.k-stepper .k-step-done.k-disabled .k-step-indicator, 
.k-stepper .k-step-done:disabled .k-step-indicator {
    border-color: color-mix(in srgb, var(--sky-blue-400) 60%, transparent) !important;
}
.k-stepper .k-step-current a.k-step-link span.k-step-indicator {
    border-color: var(--dark-blue-500, var(--dark-blue-500));
    color: var(--kendo-color-on-primary, #ffffff);
    background-color: var(--kendo-color-primary, var(--dark-blue-500));
}
.k-stepper .k-step-current.k-disabled .k-step-indicator {
    border-color: var(--dark-blue-500);
}
.k-stepper .k-step.k-disabled span.k-step-label {
    font-weight: var(--font-weight-400);
    color: var(--black);
    font-size: var(--text-12);
}
.k-multiselect-popup .k-list-header {
    padding: 8px 10px;
    border-bottom: 1px solid var(--grey);
}
.k-multiselect-popup .k-list-header .select-all-header {
    display: flex;
    align-items: center;
    padding: 5px 0px;
    border: none;
}
.k-multiselect-popup .k-list-content ul li {
    display: flex;
    align-items: flex-start;
    padding: 4px 10px;
    grid-gap: 8px;
}
/*  thank you popup  */
.head {
    background: var(--green);
    color: var(--white-primary);
    padding: 14px 20px;
    font-size: var(--text-14);
}
.head h1 {
   font-size: var(--text-25);
   font-weight: var(--font-weight-600);
}
.thankyouPopup .hrform-section {
   max-width: 900px;
   width: 100%;
   background-color: transparent;
   margin: 100px auto;
}
.thankyouPopup .successPageInner {
   background: var(--white-primary);
   padding: 60px 30px;
   text-align: center;
}
.Icons {
   margin-bottom: 50px;
   margin-bottom: 50px;
}
.Icons svg {
   width: 90px;
   fill: var(--green);
}
.successPage {
   width: 100%;
   text-align: center
}
.thankyouPopup h2 {
   color: var(--dark-blue-500);
   font-weight: var(--font-weight-600);
   font-size: var(--text-25);
}
.thankyouPopup h3 {
   color: var(--blue-600);
   font-size: var(--text-18);
   margin: 5px 0px 25px;
}
.thankyouPopup p {
   font-size: var(--text-14);
}
/*  maintenance dashboard  */
.maintenanceDashboard .departmentChart {
    display: none;
}
.column-4 {
    width: 33%;
    min-height: 100%;
}
.column-4 .chartData {
   display: flex;
   gap: 15px;
   flex-direction: column;
   height: 100%;
}
.chartData .r-card {
    flex: 1;
}
span.action {
   font-size: var(--text-13);
   background: var(--green);
   border-radius: 5px;
   padding: 5px 10px;
   font-weight: var(--font-weight-500);
   color: #fff;
}
.chartData .r-card-title .k-dropdownlist {
    width: 150px
}
.dashboard .chartData .r-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center
}
.dashboard .column-4 .chartData .ticket-head .r-card-title {
    display: unset;
}
.maintenanceDashboard .flex-box {
    display: flex;
    gap: 16px;
}
/* loader css  */
.k-loader-container .k-loader-container-inner {
    background: transparent;
    border: unset;
}
.k-loader-container, .k-loader-container-overlay {
    position: fixed !important;
}
/*  bank statement form  */
.topSpace-15 {
    margin-top: 15px;
}
.mainHeading {
    padding: 10px 0px;
    border-bottom: 1px solid var(--grey);
    margin-bottom: 20px;    
    font-size: var(--text-20);
    color: var(--dark-blue-500);
    font-weight: var(--font-weight-600);
}
.subHeading {
    padding: 10px 0;
    font-size: var(--text-16);
    color: var(--dark-blue-500);
    font-weight: var(--font-weight-600);
}
.commonFormField {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    margin-top: 10px;
}
.commonFormField .k-input-solid, .commonFormField .k-input-solid:hover {
    border: 1px solid var(--dark-blue-500);
}
.k-dropdownlist .k-input-inner {
    border: none;
}
.commonCard {
    background: var(--white-primary);
    border-radius: 5px;
    margin-bottom: 16px;
}
.k-list-optionlabel span.k-list-item-text:before {
    display:none;
}
.commonFormField .telerik-blazor.k-daterangepicker {
    grid-column: 2 span;
    grid-gap: 20px;
    padding-top: 20px;
}
.commonFormField .telerik-blazor.k-daterangepicker .k-floating-label-container {
   flex: 1;
}
.commonFormField .k-dropdownlist button, .commonFormField .k-multiselect button {
   background: transparent;
}
.commonFormField .k-datepicker button {
   background: var(--blue-600);
   color: var(--white-primary);
}
commonFormField .k-datepicker input, .commonFormField .customField input {
   border: none;
}
.commonFormField .telerik-blazor.k-dropdownlist {
   width: 100%;
   height: 30px;
}
.commonFormField .telerik-blazor.k-daterangepicker .k-floating-label-container input, .commonFormField .telerik-blazor.k-daterangepicker .k-floating-label-container .k-dateinput {
   width: 100%;
}
.commonFormField .telerik-blazor .k-floating-label-container {
   background: var(--white-primary);
   border-radius: 5px;
   border: 1px solid var(--blue-600);
   color: var(--blue-600);
   box-shadow: none;
   font-size: var(--text-13);
}
.customField .k-multiselect .k-input-values {
   flex-flow: row;
}
.commonFormField .k-form-buttons.k-actions-start {
   margin-top: 0px;
}
    .commonFormField .k-form-buttons.k-actions-start .k-button.k-form-submit, .commonFormField .k-form-buttons.k-actions-start .k-button.k-form-submit:hover, .actionBtn button, .actionBtn button:hover {
        border-color: var(--blue-600);
        background-color: var(--blue-600);
        padding: 4px 18px;
    }
.commonFormField form.k-form.telerik-blazor {
   grid-column: 4 span;
   display: flex;
   justify-content: flex-end;
}
.customField .k-multiselect, .customField .k-multiselect:hover, .customField .k-multiselect:focus {
   border: 1px solid var(--blue-600);
}
.customField .k-multiselect button{
   border: none;
}
.customField .k-multiselect .k-input-values {
   flex-flow: row;
}
/*  loader  */
.k-loader-container, .k-loader-container-overlay {
   position: fixed !important;
}
/* default loader */
.loader-container .k-loader .k-loader-segment {
    background-color: var(--blue-600) !important;
}

.k-loader-container-label{
    display: none;
}
/*  date picker calendar  */
.k-calendar-header .k-calendar-title {
   color: var(--blue-600);
   font-weight: var(--font-weight-600);
}
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected .k-link {
   background-color: var(--blue-600) !important;
}
.filter-btn button {
   min-height: 32px;
}  
.telrikTable .k-grid-toolbar svg, .telrikTable .k-grid-toolbar .k-button-text {
   color: var(--blue-600);
}
.telrikTable .k-grid-aria-root {
    overflow: auto;
}
/*  multiselect dropdown  */
.k-multiselect-popup .k-list-header {
    padding: 8px 10px;
    border-bottom: 1px solid var(--grey);
}
.k-multiselect-popup .k-list-header .select-all-header {
    display: flex;
    align-items: center;
}
.k-multiselect-popup .k-list-content ul li {
    display: flex;
    align-items: flex-start;
    padding: 4px 10px;
    grid-gap: 8px;
}
.k-multiselect-popup .k-list-content ul li.k-selected {
    color: var(--black-500) !important;
    background-color: var(--light-blue-200) !important;
}
/*  table filter  */
.actionBtn {
    align-items: flex-end;
    display: flex;
}
.commonTable.commonCard.telrikTable tr td .telerik-blazor.k-dropdownlist, .commonTable.commonCard.telrikTable tr td .telerik-blazor.k-input {
    width: auto;
    height: 26px;
}
.commonTable.commonCard.telrikTable tr td .k-filtercell-operator .k-dropdownlist button {
    padding: 3px;
}
/*  table export btn  */
.tableWrapper .k-toolbar {
    justify-content: flex-end;
}
/* Add Schehule  */
.k-window-titlebar {
    color: var(--white-primary) !important;
    background-color: var(--blue-600) !important;
}
.k-window-actions {
    padding: 16px 25px !important;
}
.actionBtns {
    background: var(--blue-600) !important;
    color: var(--white-primary) !important;
    border-color: var(--blue-600);
}
.k-changed-cell {
    background-color: var(--light-blue-200);
}
.fillButtons {
    background-color: var(--blue-600) !important;
    border: none;
}
.fillButtons .k-button-text, .fillButtons svg{
    color: var(--white-primary) !important;    
}
.hideSubmitBtn button[type='submit'] {
    display: none;
}
.tabHeading {
    color: var(--dark-blue-500);
    font-size: var(--text-16);
    padding: 10px 10px 5px;
    border-bottom: 1px solid var(--light-blue-300);
    display: flex;
    justify-content: space-between;
    background-color: var(--light-blue-100);
}
.commonFormField.assetPopupForm {
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--light-blue-200);
    border-top: none;
    margin: 0;
    padding: 15px;
    grid-gap: 5px 15px;
}  
.assetPopupForm .k-form-field {
    margin-top: 0 !important;
}
.assetPopupForm label{
    font-weight: var(--font-weight-500);
    color: var(--dark-blue-500);
    font-size: var(--text-14);
}
.assetPopupForm .k-form-buttons.k-actions-start {
    grid-column: 1 / span 2;
    justify-content: flex-end;
    margin-top: 20px !important;
}
.flex-end {
    justify-content: flex-end;
    display: flex;
    gap: 10px;
}
/*  common button */
button.fillButton {
    background-color: var(--blue-600);
    color: var(--white-primary);
    border-color: var(--blue-600);
}
.telrikTable button.fillButton .k-button-text, .telrikTable button.fillButton svg{
    color: var(--white-primary);
}
/* table filter */
.k-filter-menu-container .k-button-solid-primary, .k-filter-menu-container .k-button-solid-primary:hover {
    background-color: var(--blue-600) !important;
    color: var(--white-primary);
    border-color: var(--blue-600) !important;
    padding: 4px 5px;
}
.k-grid .k-grid-header .k-grid-header-menu:hover, .k-grid-header .k-grid-filter.k-active, .k-grid-header .k-header-column-menu.k-active,
.k-grid-header .k-grid-header-menu.k-active, .k-grid-header .k-hierarchy-cell .k-icon.k-active {
    background-color: var(--light-blue-300) !important;
}
.k-filter-menu-container .k-checkbox:checked, .k-filter-menu-container .k-checkbox.k-checked {
    border-color: var(--blue-600);
    background-color: var(--blue-600);
}
.k-filter-menu-container .k-checkbox:checked:focus, .k-filter-menu-container .k-checkbox.k-checked.k-focus,
.k-filter-menu-container .k-button-solid-primary:focus, .k-filter-menu-container .k-button-solid-primary.k-focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue-600, #205781) 30%, transparent);
}
.k-filter-menu-container .k-checkbox:indeterminate::before, .k-filter-menu-container .k-checkbox.k-indeterminate::before {
    background-color: var(--blue-600);
}
button.outlineButton {
    color: var(--blue-600);
    border-color: var(--blue-600);
}
.commonFormField label {
    font-weight: var(--font-weight-500);
    color: var(--dark-blue-500);
    font-size: var(--text-14);
}

.k-grid-toolbar button.k-button-solid-base[type='submit']:last-child {
    background: transparent;
    color: var(--blue-600);
    border-color: var(--blue-600);
}
.k-grid-toolbar button.k-button-solid-base[type='submit'] {
        background: var(--blue-600);
        color: var(--white-primary);
        border-color: transparent;
        min-width: 80px;
    }
/*  common button */
button.fillButton {
    background-color: var(--blue-600);
    color: var(--white-primary);
    border-color: var(--blue-600);
    min-width: 90px;
    padding: 4px 5px;
}

button.outlineButton, button.outlineButton:hover {
    color: var(--blue-600);
    border-color: var(--blue-600);
    min-width: 90px;
    padding: 5px;
    background: var(--white-primary);
}

.commonFormField label {
    font-weight: var(--font-weight-500);
    color: var(--dark-blue-500);
    font-size: var(--text-14);
}
/* notification color */
.k-notification-error {
    border-color: var(--kendo-error-border-color) !important;
    color: var(--red) !important;
    background: var(--kendo-error-color) !important;
}
.k-notification-success {
    border-color: var(--kendo-success-border-color) !important;
    color: var(--green) !important;
    background: var(--kendo-success-color) !important;
}


/* Wrapper for the search filter input/button */
.searchFilter {
    position: relative;
    width: max-content;
}

    /* Position the search button inside the filter */
    .searchFilter button {
        position: absolute;
        right: 0;
        height: 100%;
        min-width: inherit;
        padding: 10px;
        background: var(--blue-600);
        color: var(--white-primary);
        border-color: transparent;
        min-width: 36px !important;
    }

    .searchFilter .validation-message {
        position: absolute;
    }

/* Style for the search input field */
.searchBranchCodeWrapper input {
    padding: 8px 50px 8px 8px !important;
}
.text-uppercase input {
    text-transform: uppercase;
}
/* grid header btn */
.gridHeaderBtn .k-button {
    background: transparent;
    color: var(--blue-600);
    border-color: var(--blue-600);
}
.gridHeaderBtn .k-button .k-button-text{
    color: var(--blue-600);
}

/*  delete icon  */
 .deleteBtnIcon {
    border-color: var(--kendo-color-error-emphasis, #e0535a);
    color: var(--kendo-color-error-on-subtle, #4b090c) !important;
}

.tableWrapper .k-grid-footer tr td {
    border-color: transparent !important;
    overflow: visible;
    font-size: var(--text-15);
}
.autoFillButton {
    margin-top: -48px;
}
.footerContent {
    right: 75px;
    margin-top: -7px;
}
/*  calendar  */
.calendar-popup .k-calendar-header button .k-button-text {
    font-size: 12px;
}
.calendar-popup  .k-calendar-header {
    min-width: 180px;
}
.calendar-popup .k-calendar-header span.k-calendar-nav button.telerik-blazor, .calendar-popup .k-calendar-header .k-calendar-nav .k-button-md.k-icon-button  {
    padding: 0;
}
.calendar-popup .k-calendar-view {
    width: 190px;
    inline-size: var(--INTERNAL--kendo-calendar-view-width);
    min-height: 200px;
}
.calendar-popup .k-calendar-md {
    --INTERNAL--kendo-calendar-view-width: 205px;
}
.calendar-popup .k-calendar-md .k-calendar-monthview {
    --INTERNAL--kendo-calendar-cell-size: var(--kendo-calendar-md-month-cell-size, 26px);
}
.k-popup.k-list-container.k-dropdownlist-popup {
    height: 150px !important;
}

.tableWrapper .k-grid-aria-root[aria-label="Data table"] {
    overflow: auto !important;
    width: calc(100vw - 84px);
}
.assetsDataTable.tableWrapper .k-grid-aria-root[aria-label="Data table"] {
    width: 100%;
}
.tableWrapper.expandGrid table tbody tr td {
    white-space: normal;
}
.expandGrid  table colgroup col {
    width: auto !important;
}

/* notification */
.custom-patch-alert {
    background-color: var(--light-blue-400);
    border: none;
    color: var(--dark-blue-500);
    border-radius: 6px;
    padding: 12px 18px;
}

.alert-content {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.icon-left {
    margin-right: 10px;
}

.alert-text span {
    font-weight: 600;
    color: var(--dark-blue-500);
    text-decoration: none;
}

.custom-patch-alert {
    background-color: var(--light-blue-400);
    border: none;
    color: var(--dark-blue-500);
    border-radius: 6px;
    padding: 12px 18px;
    border: 1px solid var(--light-blue-300);
}

.alert-content {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.icon-left {
    margin-right: 10px;
}

/* upload file */


.fileUploadContainer {
    background: transparent;
    flex-direction: column;
    gap: 20px;
    border: 3px dashed var(--light-blue-200);
    padding: 30px;
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    border-radius: 5px;
}

    .fileUploadContainer img {
        width: 50px;
        background: transparent;
        border: none;
        margin: auto;
        opacity: 0.1;
    }
 .fileUploadWrapper.k-upload {
    border: none;
}

   .fileUploadWrapper.k-upload .k-dropzone {
        background: transparent;
        flex-direction: column-reverse;
        gap: 15px;
    }
 .fileUploadWrapper .k-upload-button-wrap button {
    font-size: var(--text-14);
    background-color: var(--blue-600);
    color: var(--white-primary);
    padding: 10px 25px;
    border: none;
    border-radius: 50px;
}
 .fileUploadWrapper ul.k-upload-files {
    border: none;
    gap: 10px;
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}
 .fileUploadWrapper.k-upload .k-upload-files li {
    background-color: var(--light-blue-100);
    border-radius: 5px;
    border: none;
}
 .fileUploadWrapper.k-upload .k-upload-files .k-file-name {
    color: var(--blue-600);
    font-weight: var(--font-weight-600);
}
 .fileUploadWrapper.k-upload .k-upload-files .k-file-info {
    justify-content: flex-start;
    align-items: center;
    display: flex;
}
 .fileUploadWrapper .k-svg-icon {
    width: 30px;
}

    .fileUploadWrapper .k-svg-icon > svg {
        fill: var(--blue-600);
        flex: 1 1 auto;
    }

/* custom loader  */
.k-loader-container {
    backdrop-filter: blur(10px);
}
.customLoader {
    background: rgb(254 254 254);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.customLoader img {
    width: 62px;
/* count */
.doc-wrapper span.doc-badge {
    background-color: var(--light-red);
    color: var(--white-primary);
    padding: 3px;
    position: relative;
    left: -11px;
    top: -9px;
    display: inline-flex;
    border-radius: 50%;
    cursor: pointer;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    line-height: 12px;
    font-size: var(--text-11);
}