.no-padding {
    padding: 0 !important;
}

.font-primary {
    font-family: var(--bs-font-sans-serif) !important;
}

.text-gray-500 {
    --bs-text-opacity: 1;
    color: var(--bs-gray-500) !important;
}


/* for AbsenceReason lookup */
.combo-dropdown {
    max-height: 500px !important;
}

    .combo-dropdown .dxbl-listbox {
        max-height: 500px !important;
        border: 1px solid rgba(28, 117, 188, 0.80);
    }

/* for custom popups. OK and Cancel buttons width */
.btn-width-148 {
    width: 148px;
}
.btn-width-100 {
    width: 100px;
}

/* for LeaveDateRangeComponent. May be in future we need to redesign it */
.bkg-white {
    background-color: white;
}

/* for custom popups. Cancel button border => darker */
.btn-secondary-border {
    --dxbl-btn-border-color: #737E8C !important;
}

/* ATT CALC styles */

/* for AttendanceCalculation_DetailView.ProgressText */
.text-align-center {
    text-align: center;
}

/* for att calc summary */
.nothing {
    height: 0px !important;
    display: none !important;
}

/* for att calc summary */
.group-errors {
    /*background-color: #fdeeee;*/
}

/* for AttendanceCalculation_DetailView.InfoString */
.status-success {
    background-color: #EEF9EF;
    margin-left: 10px;
    padding: 10px;
    color: #27AE60;
    width: 97%;
    border: 1px solid #C9EBD7;
    border-radius: 3px;
}

/* for AttendanceCalculation_DetailView.WarningString */
.status-warning {
    background-color: #FFF7EC;
    margin-left: 10px;
    padding: 10px;
    color: #f2994a;
    width: 97%;
    border: 1px solid #f2994a;
    border-radius: 3px;
}

/* for AttendanceCalculation_DetailView.ErrorString */
.status-error {
    background-color: #fdeeee;
    margin-left: 10px;
    padding: 10px;
    color: #EB5758;
    width: 97%;
    border: 1px solid #F9B9BC;
    border-radius: 3px;
}

/* for att calc summary */
.popup-note {
    color: #363853;
    margin-top: 0;
    margin-bottom: 5px;
}


/* add people \ add punch: dropdown menu style. NEED TO REVISIT THIS STYLE LATER, because now we use small action buttons */
.add-people-button-dropdown {
    width: auto;
    --dxbl-toolbar-dropdown-btn-padding-x: 6px;
    --dxbl-toolbar-dropdown-btn-padding-y: 7px;
    --dxbl-toolbar-dropdown-btn-color: var( --bs-blue);
    --dxbl-toolbar-dropdown-padding-y: 0;
}

.w-max {
    width: max-content;
}

.confirm-dialog-text-style {
    background: white !important;
    text-align: center;
    font-family: Poppins !important;
    color: #737E8C !important;
    font-size: 16px !important;
    font-weight: 400;
}

.import-employee-validation-box {
    margin-left: 108px !important;
    margin-right: 110px !important;
    margin-top: 10px !important;
}

.header-plus {
    align-self: center !important;
    align-items: center !important;
    border-radius: 30%;
    border: none !important;
    padding: 4px;
    margin-top: 8px;
    margin-bottom: 8px;
    width: 24px;
    height: 22px;
    margin-right: 5px;
    --dxbl-btn-focus-outline-color: transparent !important;
}

    .header-plus img {
        height: 26px;
        width: 26px;
        max-width: 26px;
        max-height: 26px;
        filter: invert(33%) sepia(84%) saturate(907%) hue-rotate(177deg) brightness(95%) contrast(100%);
    }

    .header-plus span {
        height: 18px;
        width: 18px;
        background-color: #EB5757;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: -10px !important;
        margin-top: -20px;
        color: white;
        font-size: 12px;
    }

    .header-plus .dxbl-toolbar-dropdown-toggle {
        display: none;
    }

.header-plus-dd {
    margin-top: 13px;
}

    .header-plus-dd .dxbl-dropdown-item {
    }

    .header-plus-dd button {
        gap: 6px;
        padding-left: 10px !important;
        padding-top: 5px !important;
        padding-right: 10px !important;
        padding-bottom: 3px !important;
        height: 40px !important;
    }

    .header-plus-dd .dxbl-dropdown-item img {
        height: 24px;
        width: 24px;
        max-width: 24px;
        max-height: 24px;
        filter: invert(33%) sepia(84%) saturate(907%) hue-rotate(177deg) brightness(95%) contrast(100%);
    }

.notifications-action-image {
    filter: invert(33%) sepia(84%) saturate(907%) hue-rotate(177deg) brightness(75%) contrast(100%);
}

.side-filters-action-image {
    filter: invert(33%) sepia(84%) saturate(907%) hue-rotate(177deg) brightness(75%) contrast(100%);
}

/*.account-button .xaf-image {
    filter: invert(33%) sepia(84%) saturate(907%) hue-rotate(177deg) brightness(80%) contrast(100%);
}*/

.notification-action {
    padding-left: 10px;
    padding-right: 5px;
}

.notifications-badge {
    height: 18px;
    width: 18px;
    background-color: #EB5757;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-left: -10px !important; */
    /* margin-top: -20px; */
    color: white;
    font-size: 12px;
    position: absolute;
    /* top: 12px; */
    /* right: 0px; */
    margin-left: 26px;
    margin-top: -19px;
}

.filters-badge {
    height: 18px;
    width: 18px;
    background-color: var(--bs-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-left: -10px !important; */
    /* margin-top: -20px; */
    color: white;
    font-size: 12px;
    position: absolute;
    /* top: 12px; */
    /* right: 0px; */
    margin-left: 34px;
    margin-top: -30px;
}

.notification-popup-text {
    max-height: 400px;
    overflow: overlay;
}

/* left nav menu icon */
.xaf-nav-menu-item-icon {
    max-width: 22px !important;
    max-height: 22px !important;
    width: 22px !important;
    height: 22px !important;
    /* https://codepen.io/sosuke/pen/Pjoqqp */
    filter: invert(33%) sepia(84%) saturate(907%) hue-rotate(177deg) brightness(95%) contrast(100%);
}

/* CALENDAR and SUMMARY COMMON */

.checkbox-filter {
    width: 136px;
    height: 36px;
    background: #FFFFFF;
    border-radius: 4px;
    font-size: 14px;
    line-height: 200%;
    font-weight: 500;
    align-items: center;
    --dxbl-checkbox-checked-focus-shadow-color: white;
    --dxbl-checkbox-check-element-unchecked-border-color: #CFD4DE;
    margin-top: 0px;
}

.cb-attendance {
    border: 0.50px var(--bs-calendar-attendance) solid;
    border-left: 5px var(--bs-calendar-attendance) solid;
    --dxbl-checkbox-check-element-checked-bg: var(--bs-calendar-attendance);
    --dxbl-checkbox-check-element-checked-hover-bg: var(--bs-calendar-attendance-hover);
    --dxbl-checkbox-unchecked-focus-shadow-blur: var(--bs-calendar-attendance-hover);
    --dxbl-checkbox-check-element-unchecked-hover-border-color: var(--bs-calendar-attendance-hover);
    margin-right: 8px;
}

.cb-leave {
    border: 0.50px var(--bs-calendar-leave) solid;
    border-left: 5px var(--bs-calendar-leave) solid;
    --dxbl-checkbox-check-element-checked-bg: var(--bs-calendar-leave);
    --dxbl-checkbox-check-element-checked-hover-bg: var(--bs-calendar-leave-hover);
    --dxbl-checkbox-unchecked-focus-shadow-blur: var(--bs-calendar-leave-hover);
    --dxbl-checkbox-check-element-unchecked-hover-border-color: var(--bs-calendar-leave-hover);
    margin-right: 8px;
}

.cb-schedule {
    border: 0.50px var(--bs-calendar-schedule) solid;
    border-left: 5px var(--bs-calendar-schedule) solid;
    --dxbl-checkbox-check-element-checked-bg: var(--bs-calendar-schedule);
    --dxbl-checkbox-check-element-checked-hover-bg: var(--bs-calendar-schedule-hover);
    --dxbl-checkbox-unchecked-focus-shadow-blur: var(--bs-calendar-schedule-hover);
    --dxbl-checkbox-check-element-unchecked-hover-border-color: var(--bs-calendar-schedule-hover);
    margin-right: 8px;
}

.icon-xlsx {
    background-image: url(/IImageService/Action_Export_ToXlsx);
    height: 16px;
    width: 16px;
}

.cb-caption-right {
    flex-direction: row-reverse !important;
    align-items: center;
    gap: 1.5rem !important;
}

    .cb-caption-right label {
        margin-top: 3px !important;
    }

.cb-caption-right-mon {
    flex-direction: row-reverse !important;
    align-items: center;
    gap: 1.5rem !important;
}

    .cb-caption-right-mon label {
        /*margin-left: 15px !important;*/
        padding-right: 0px;
        margin-top: 3px !important;
    }

.cb-caption-right-select-all {
    flex-direction: row-reverse !important;
    align-items: center;
    gap: 1.5rem !important;
    width: 118px !important;
}

    .cb-caption-right-select-all label {
        /*margin-left: 15px !important;*/
        padding-right: 0px;
        margin-top: 3px !important;
    }

.input-custom-font {
    font-family: "Poppins" !important;
}

.margin-right-10 {
    margin-right: 10px !important;
}

.grid-header-row {
    height: 42px;
    text-transform: none !important;
}

.cursor-pointer {
    cursor: pointer;
}

.combobox-ex-attendance {
    align-items: center !important;
    display: flex !important;
    gap: 9px;
    color: var(--bs-blue);
}

    .combobox-ex-attendance input {
        width: 100px;
        padding-top: 1px !important;
    }

.font-16::before {
    font-size: 16px;
}

/* popup filters */

.popup-filters {
    margin-right: 0 !important;
}

.dxbl-popup.popup-filters .dxbl-modal-content {
    border-radius: 6px 0px 0px 6px !important;
    border-right: none !important;
}

.dxbl-popup.popup-filters {
    right: -300px; /* Positioning it to the right end initially */
    animation: slideInSidebar 0.5s forwards; /* Animation applied when appearing */
}

@keyframes slideInSidebar {
    from {
        right: -300px;
    }

    to {
        right: 0;
    }
}

.dxbl-modal > .dxbl-modal-root {
    scrollbar-color: transparent transparent;
}

.popup-filters-nested-dropdown-body {
    max-width: 270px !important;
}

/* date range editor: quick range buttons */

.quick-range-selectors-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 0.4rem;
    row-gap: 0.4rem;
    max-width: 280px;
}

.quick-range-selector-btn {
    padding: 0px 6px 0px 6px;
    flex: 0 1 calc(50% - 10px); /* Two elements in a row with some spacing */
}

/* LEFT NAV MENU */

.dxbl-group {
    --dxbl-group-header-color: #737E8C;
}

.dxbl-accordion .dxbl-accordion-group .dxbl-accordion-item:not(.dxbl-accordion-group):not(.dxbl-disabled):not(:disabled).dxbl-active, .dxbl-accordion .dxbl-accordion-group .dxbl-accordion-item:not(.dxbl-accordion-group):not(.dxbl-disabled):not(:disabled):hover, .dxbl-accordion .dxbl-accordion-group .dxbl-accordion-item:not(.dxbl-accordion-group):not(.dxbl-disabled):not(:disabled):active {
    background-color: white;
    color: #1C75BC;
}

.dxbl-accordion .dxbl-accordion-group:not(:first-child) {
    --dxbl-group-header-bg: white;
}

.clickable-xaf-nav-item > a .xaf-nav-link, .clickable-xaf-nav-item > div > a .xaf-nav-link {
    text-decoration: unset;
}

.dxbl-accordion {
    --dxbl-accordion-group-header-font-size: 15px;
    --dxbl-accordion-group-header-line-height: 1.8;
    --dxbl-accordion-group-item-font-size: 0.9rem;
    --dxbl-accordion-group-item-line-height: 2.3;
    --dxbl-accordion-group-border-width: 0px;
    --dxbl-accordion-group-header-hover-bg: #f3f8fb;
}

    .dxbl-accordion .dxbl-accordion-group:not(:first-child).expanded > .dxbl-accordion-group-header {
        --dxbl-group-header-bg: #f3f8fb !important;
        --dxbl-group-header-color: #1C75BC;
    }

.clickable-xaf-nav-item > a .xaf-nav-link, .clickable-xaf-nav-item > div > a .xaf-nav-link {
    text-decoration: unset !important;
    font-size: 15px;
}

.dxbl-accordion .dxbl-accordion-group:first-child:not(:last-child), .dxbl-accordion .dxbl-accordion-group:first-child:not(:last-child) > .dxbl-accordion-group-header {
    background-color: white;
}

.dxbl-accordion .dxbl-accordion-group .dxbl-accordion-item:not(.dxbl-accordion-group):not(.dxbl-disabled):not(:disabled).dxbl-active > .dxbl-accordion-item-content {
    text-decoration: underline;
    /*border-right: inset;
    border-right-color: #1C75BC !important;
    border-right-width: 5px !important;*/
    /*border-radius: 0px;
    border-left: 5px var(--bs-blue) solid;*/

    margin-right: 6px !important;
    margin-top: 4px;
    margin-bottom: 3px;
}

.dxbl-accordion .dxbl-accordion-group:not(:first-child):last-child, .dxbl-accordion .dxbl-accordion-group:not(:first-child):last-child > .dxbl-accordion-group-header {
    padding-right: 5px;
    border-top: 1px var(--bs-gray-200) solid;
}


/* nav menu width */
.sidebar {
    min-width: 250px !important;
    width: 250px !important;
}

/* keep the same right padding when collapse nav menu */
.collapse-toggle .main {
    /*padding-left: 0.5rem;*/
    padding-right: 0rem !important;
}

.dxbl-pager button[aria-label="First page"],
.dxbl-pager button[aria-label="Previous page"],
.dxbl-pager button[aria-label="Next page"],
.dxbl-pager button[aria-label="Last page"] {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.dxbl-pager-container > .dxbl-pager-page-size-selector > .dxbl-text-edit {
    width: 80px !important;
}

.dxbl-pager > .dxbl-pager-page-edit {
    width: 3.4em !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* nav menu header filter icon */
.dxbl-accordion-group-header > .dxbl-text-edit > .dxbl-btn-icon > .dxbl-image {
    width: 21px !important;
    height: 21px !important;
    color: #505459 !important;
}

.dxbl-btn-primary.dxbl-btn-split-dropdown {
    border-left: 1px #EEF2F940 solid;
}

/* remove border between columns in listview */

.dxbl-grid {
    --dxbl-grid-border-style: none;
}

/* small checkbox */

.dxbl-checkbox {
    --dxbl-checkbox-check-element-size: 0.9rem;
}

    .dxbl-checkbox .dxbl-checkbox-check-element {
        margin: 0.6rem 0;
    }

    .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio).dxbl-checkbox-checked .dxbl-checkbox-check-element .dxbl-image {
        width: 0.575rem;
        height: 0.575rem;
    }

    .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio).dxbl-checkbox-indeterminate {
        --dxbl-checkbox-indeterminate-element-height: 1px;
        --dxbl-checkbox-indeterminate-element-width: 8px;
    }

.dxbl-fl-item-horizontal .dxbl-fl-ctrl .xaf-validation-message-container .dxbl-checkbox .dxbl-checkbox-check-element {
    /*margin: 0.4rem 0 0.6rem 0;*/
    margin-top: 7px;
}

.dxbl-checkbox > label {
    align-self: center;
}

/* remove underline in links */
a {
    text-decoration: none;
}

/* header toolbar right part (with cur page header on the left, and add\notifications\account icons on the right): use blue bkg instead of white */
.header-right-side {
    background-color: var(--bs-blue);
}

/* header toolbar left part (above nav menu): use blue bkg instead of white */
.header-left-side {
    background-color: var(--bs-blue);
}

/* white hamburger menu icon */
.btn-hamburger {
    color: white !important;
}

/* white account icon */
.account-button .xaf-image {
    height: 41.98px !important;
    width: 42px !important;
    -webkit-mask-size: 40px !important;

    filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(150%);
}

/* white notifications icon */
.notifications-action-image {
    filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(150%);
}

/* white color for page captions */
.header-right-side .view-caption-root .xaf-caption-container .xaf-view-caption-lg,
.header-right-side .view-caption-root .xaf-caption-container .xaf-view-caption-sm,
.header-right-side .view-caption-root .xaf-caption-container .xaf-object-caption {
    color: white;
    cursor: default;
}

/* don't change bkg color when user hover header buttons */
.btn-header:hover {
    background-color: transparent !important;
}

/*.btn-header:not(.account-button) .xaf-image:not(.notifications-action-image):hover {
    background-color: #f7f8f9;
}*/

.btn-hamburger .xaf-image:hover {
    background-color: #f7f8f9 !important;
}

.btn-header .notifications-action-image:hover, .account-button .xaf-image:hover {
    filter: invert(97%) sepia(71%) saturate(291%) hue-rotate(178deg) brightness(102%) contrast(94%);
}

/* bkg color when user focus (click) header buttons */
.btn-header:focus {
    background-color: #4990c9 !important;
}

/* white navigate-back icon */
.navigate-back-icon-container {
    color: white !important;
}

    /* fix left margin for navigate-back icon */
    .navigate-back-icon-container .xaf-image {
        margin-left: 0px !important;
    }

/* SMALL ICONS */

.sp-custom-action {
    border: var(--dxbl-btn-border-width) var(--dxbl-btn-border-style) var(--dxbl-btn-border-color);
    /*padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 18px;
    width: 18px;*/
}

.dxbl-btn-secondary:not(.dxbl-btn-standalone) {
    --dxbl-toolbar-btn-padding-x: 10px;
}

.dxbl-btn-toolbar > .dxbl-btn.dxbl-btn-secondary, .dxbl-btn-toolbar > .dxbl-btn-split > .dxbl-btn.dxbl-btn-secondary, .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn.dxbl-btn-secondary, .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-split > .dxbl-btn.dxbl-btn-secondary, .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group > .dxbl-btn.dxbl-btn-secondary, .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group > .dxbl-btn-split > .dxbl-btn.dxbl-btn-secondary {
    width: 36px;
    height: 36px;
}

.dxbl-toolbar-btn:not(.dxbl-lg):not(.dxbl-btn-primary):not(.header-plus) {
    height: 36px !important;
}

.dxbl-toolbar-btn.dxbl-btn-primary:not(.dxbl-lg):not(.xaf-action) {
    height: 36px !important;
}

/* filter dropdown Cancel button height */
.dxbl-dropdown-footer .dxbl-btn-secondary {
    height: 36px !important;
}

.dxbl-btn-primary:not(.dxbl-toolbar-btn):not(.dxbl-lg):not(.xaf-action):not(.dd-dialog-btn-apply) {
    /*height: 42px !important;*/
}

.dxbl-toolbar-btn.dxbl-btn-primary.xaf-action:not(.dxbl-lg)[data-action-name="Save"] {
    height: 36px !important;
}

/* grid header font size => 13px */

.dxbl-grid-header-content {
    font-size: 13px;
}

.dxbl-grid {
    --dxbl-grid-header-color: #172542;
    --dxbl-grid-header-font-weight: 500;
}

.dxbl-accordion .dxbl-accordion-group .dxbl-accordion-item:not(.dxbl-accordion-group) > .dxbl-accordion-item-content {
    text-decoration: none !important;
}

.dxbl-grid .dxbl-grid-table > thead > tr > th, .dxbl-grid .dxbl-grid-table > thead > tr > td, .dxbl-grid .dxbl-grid-table > tbody > tr > th, .dxbl-grid .dxbl-grid-table > tbody > tr > td, .dxbl-grid .dxbl-grid-table > tfoot > tr > th, .dxbl-grid .dxbl-grid-table > tfoot > tr > td {
    border-top: 1px var(--bs-gray-200) solid;
}

.dxbl-checkbox input:not([readonly]) {
    cursor: pointer;
}

.dxbl-grid .dxbl-scroll-viewer {
    box-shadow: var(--grid-box-shadow);
}



.dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary {
    height: 26px;
    width: 26px;
    padding: 7px !important;
}

:not(.dxbl-btn-plain-toolbar) > .dxbl-btn-group > .dxbl-btn:not(:last-child):not(.dxbl-btn-last), :not(.dxbl-btn-plain-toolbar) > .dxbl-btn-group > .dxbl-btn-split:not(:last-child):not(.dxbl-btn-last) > .dxbl-btn:last-child, :not(.dxbl-btn-plain-toolbar) > .dxbl-btn-group > .dxbl-text-edit:not(:last-child), :not(.dxbl-btn-plain-toolbar) > .dxbl-btn-group > .dxbl-text-edit:not(:last-child) > .dxbl-btn-group-right > .dxbl-btn:last-child, :not(.dxbl-btn-plain-toolbar) > .dxbl-btn-group.dxbl-btn-group-left > .dxbl-btn, :not(.dxbl-btn-plain-toolbar) > .dxbl-btn-group > .dxbl-btn-group > .dxbl-btn:not(:last-child):not(.dxbl-btn-last), :not(.dxbl-btn-plain-toolbar) > .dxbl-btn-group > .dxbl-btn-group > .dxbl-btn-split:not(:last-child):not(.dxbl-btn-last) > .dxbl-btn:last-child, :not(.dxbl-btn-plain-toolbar) > .dxbl-btn-group > .dxbl-btn-group > .dxbl-text-edit:not(:last-child), :not(.dxbl-btn-plain-toolbar) > .dxbl-btn-group > .dxbl-btn-group > .dxbl-text-edit:not(:last-child) > .dxbl-btn-group-right > .dxbl-btn:last-child, :not(.dxbl-btn-plain-toolbar) > .dxbl-btn-group > .dxbl-btn-group.dxbl-btn-group-left > .dxbl-btn {
    padding: 5px;
}

.dxbl-pager-page-edit, .dxbl-pager-page-edit-text {
    height: 26px;
    font-size: 13px;
    color: var(--bs-gray-700);
}

.dxbl-pager-page-size-selector {
    height: 26px;
    font-size: 13px;
    color: var(--bs-gray-700);
}

    .dxbl-pager-page-size-selector .dxbl-text-edit {
        font-size: 13px;
    }



.dxbl-pager-container > .dxbl-pager-page-size-selector > label {
    color: var(--bs-gray-700);
}

.dxbl-text-edit .dxbl-text-edit-input {
    color: var(--bs-gray-700);
}

.dxbl-pager-container .dxbl-pager-page-size-selector .dxbl-text-edit .dxbl-btn-group-right .dxbl-edit-btn-dropdown > svg {
    color: var(--bs-gray-700);
}

.dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary:not(.dxbl-pager-page-btn) > svg.dxbl-image {
    color: var(--bs-gray-700);
}

/*.dxbl-toolbar-btn .dxbl-toolbar-dropdown-toggle {
    display: none;
}*/

/* grid column resize anchor style */

.dxbl-grid .dxbl-grid-table > thead > tr > th:not(.dxbl-grid-selection-cell) > .dxbl-grid-column-resize-anchor {
    width: 1px;
    height: 60%;
    opacity: 1;
    background-color: var(--bs-gray-400);
    margin-top: 8px;
    margin-right: 5px;
}

/* dropdown icon */

.dxbl-toolbar-item-tmpl dxbl-combobox .dxbl-btn-group-right .dxbl-edit-btn-dropdown, .dxbl-btn-split-dropdown:not(.dxbl-btn-primary) {
    border-left: none;
}

    dxbl-combobox .dxbl-btn-group-right .dxbl-edit-btn-dropdown > svg > use, .dxbl-btn-split-dropdown:not(.dxbl-btn-primary) > svg > use {
        display: none;
    }

dxbl-combobox .dxbl-btn-group-right .dxbl-edit-btn-dropdown > svg, .dxbl-toolbar-item .dxbl-toolbar-item .dxbl-btn-split-dropdown:not(.dxbl-btn-primary) > svg {
    background-image: url("../images/icon_down.svg");
    background-repeat: no-repeat;
    background-position: center;
}

/* calendar icon */

dxbl-date-edit .dxbl-btn-group-right .dxbl-edit-btn-dropdown > svg > use {
    display: none;
}

dxbl-date-edit .dxbl-btn-group-right .dxbl-edit-btn-dropdown > svg {
    background-image: url("../images/icon_calendar.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    --dxbl-image-height: 20px;
    --dxbl-image-width: 20px;
}

/* calendar date picker icon */

.calendar-date-picker > svg > use {
    display: none;
}

.calendar-date-picker > svg {
    background-image: url("../images/icon_calendar.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    --dxbl-image-height: 20px;
    --dxbl-image-width: 20px;
}

/* leave summary period dropdown icon */

.leave-summary-period .dxbl-btn-group-right .dxbl-edit-btn-dropdown > svg > use {
    display: none;
}

.leave-summary-period .dxbl-btn-group-right .dxbl-edit-btn-dropdown > svg {
    background-image: url("../images/icon_calendar.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    --dxbl-image-height: 20px;
    --dxbl-image-width: 20px;
}


/* main sidebar */

.sidebar {
    background-color: var(--nav-menu-bkg) !important;
}

/* root items */

.dxbl-accordion .dxbl-accordion-group:not(.dxbl-disabled):not(:disabled):not(.dxbl-accordion-filter):not(.dxbl-active) > .dxbl-accordion-group-header {
    background-color: var(--nav-menu-bkg) !important;
}

/* child not active items + right spacing for all items  */

.dxbl-accordion .dxbl-accordion-group:not(:first-child):not(:last-child), .dxbl-accordion .dxbl-accordion-group:not(:first-child):not(:last-child) > .dxbl-accordion-group-header {
    background-color: var(--nav-menu-bkg);
}

/* active item. more dark than other  */

.dxbl-accordion .dxbl-accordion-group .dxbl-accordion-item:not(.dxbl-accordion-group):not(.dxbl-disabled):not(:disabled).dxbl-active, .dxbl-accordion .dxbl-accordion-group .dxbl-accordion-item:not(.dxbl-accordion-group):not(.dxbl-disabled):not(:disabled):hover, .dxbl-accordion .dxbl-accordion-group .dxbl-accordion-item:not(.dxbl-accordion-group):not(.dxbl-disabled):not(:disabled):active {
    background-color: var(--nav-menu-bkg-active) !important;
    color: #1C75BC;
}

/* last item. Settings in our case  */

.dxbl-accordion .dxbl-accordion-group:not(:first-child):last-child, .dxbl-accordion .dxbl-accordion-group:not(:first-child):last-child > .dxbl-accordion-group-header {
    padding-right: 5px;
    border-top: 1px var(--bs-gray-200) solid;
    background-color: var(--nav-menu-bkg);
}

/* filter  */

.dxbl-accordion .dxbl-accordion-group:first-child:not(:last-child), .dxbl-accordion .dxbl-accordion-group:first-child:not(:last-child) > .dxbl-accordion-group-header {
    background-color: var(--nav-menu-bkg) !important;
}


/* filter by text action icon */

.xaf-action-fulltextsearch {
    flex-direction: row-reverse;
    width: 200px !important;
}

    .xaf-action-fulltextsearch > input {
        padding-left: 4px !important;
    }

    .xaf-action-fulltextsearch .dxbl-btn-group-right .dxbl-text-edit-btn {
        border: none;
        padding-left: 8px;
        width: 30px !important;
    }

/* bkg color for grid table data rows on hover */

.dxbl-grid .dxbl-grid-table > tbody > tr:not([data-virtual-item-index="-1"]):hover {
    background-color: var(--bs-gray-100);
}

.xaf-caption-icon, .xaf-context-menu-item-icon, .dxbl-btn[title]:not([title="Filter records by text"]) .xaf-toolbar-item-icon, .xaf-layout-tab-icon, .xaf-layout-group-icon, .xaf-combobox-icon, .dxbl-context-menu-item-icon {
    max-width: 16px;
    max-height: 16px;
    width: 16px;
    height: 16px;
    filter: invert(33%) sepia(84%) saturate(907%) hue-rotate(177deg) brightness(70%) contrast(100%);
}

/* hide loading caption */

.loading-caption {
    display: none;
}

.visibility-hidden {
    visibility: hidden;
}

/* calendar toolbar popup calendar */
.dxbl-toolbar-item-tmpl {
    padding: 0 !important;
}

.dxbl-toolbar.dxbl-toolbar-adaptive > .dxbl-btn-toolbar,
.dxbl-toolbar.dxbl-toolbar-adaptive .dxbl-virtual-toolbar {
    -webkit-justify-content: end;
    justify-content: end;
}

/* fix grid filters padding, and multi-select component popup padding */
.dxbl-grid-filter-menu-values-view {
    padding: 8px 10px;
}

.dxbl-edit-btn-dropdown,
.dxbl-spin-btn-inc {
    width: 33px;
}

/*XAF Confirmation Dialog Style*/
/*Dialog Header Style*/
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-header {
    cursor: default;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center !important;
    font-size: var(--dxbl-popup-header-font-size);
    line-height: var(--dxbl-popup-header-line-height);
    font-weight: var(--dxbl-popup-header-font-weight);
    border-bottom: none !important;
    padding: var(--dxbl-popup-header-padding-y) var(--dxbl-popup-header-padding-x);
    position: relative;
    background-color: white !important;
    color: var(--dxbl-popup-header-color);
    padding: 1rem;
}
    /*Center Dialog header Text*/
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-header .dxbl-modal-header-default {
        display: flex;
        justify-content: center !important;
        flex: 1 1 auto;
    }
        /*Hide Dialog Close Button */
        .dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-header .dxbl-modal-header-default > button {
            display: none !important;
        }

/*Dialog Body Style*/
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-body {
    padding-left: 3rem;
    padding-right: 3rem;
    margin-bottom: 1rem;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}
/*Dialog Footer Style*/
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-footer {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    border-top: var(--dxbl-popup-border-width) var(--dxbl-popup-border-style) var(--dxbl-popup-border-color);
    padding: var(--dxbl-popup-footer-padding-y) var(--dxbl-popup-footer-padding-x);
    margin-top: auto;
    position: relative;
    background-color: white;
    color: var(--dxbl-popup-footer-color);
    padding: 1rem;
}

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-footer .dxbl-toolbar-placeholder {
        display: none !important;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-footer .dxbl-toolbar.dxbl-toolbar-adaptive {
        position: relative;
        z-index: 0;
        flex: 1 1 auto;
        justify-content: center;
        transition: height ease 0.3s;
        will-change: height;
        white-space: nowrap;
    }

/* dialog Yes No buttons */

.dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-footer .dxbl-btn-toolbar {
    flex-direction: row-reverse;
}

.dxbl-toolbar .dxbl-btn-toolbar .dxbl-toolbar-group .dxbl-toolbar-item > .dxbl-btn-secondary[data-action-name="Preview"],
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-footer .dxbl-toolbar .dxbl-btn-toolbar .dxbl-toolbar-group .dxbl-toolbar-item > .dxbl-toolbar-btn.dxbl-btn-secondary[data-action-name="Yes"] {
    --dxbl-btn-bg: var(--bs-primary) !important;
    --dxbl-btn-border-color: var(--bs-primary) !important;
    --dxbl-btn-color: #fff !important;
    --dxbl-btn-active-bg: #1863a0 !important;
    --dxbl-btn-active-color: #fff !important;
    --dxbl-btn-active-border-color: #1863a0 !important;
    --dxbl-btn-hover-bg: #1969a9 !important;
    --dxbl-btn-hover-color: #fff !important;
    --dxbl-btn-hover-border-color: #1969a9 !important;
    --dxbl-btn-disabled-bg: #77acd7 !important;
    --dxbl-btn-disabled-color: #fff !important;
    --dxbl-btn-disabled-border-color: #77acd7 !important;
    --dxbl-btn-disabled-opacity: 1 !important;
    --dxbl-btn-focus-shadow-color: rgba(28, 117, 188, 0.5) !important;
    --dxbl-btn-focus-shadow-spread: 0.125rem !important;
    --dxbl-btn-focus-shadow-blur: 0rem !important;
    /* !!! custom !!! */
    min-height: 36px; /* without = 30px */
    --dxbl-toolbar-btn-padding-x: 14px;
    min-width: 100px;
}

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-footer .dxbl-toolbar .dxbl-btn-toolbar .dxbl-toolbar-group .dxbl-toolbar-item > .dxbl-toolbar-btn.dxbl-btn-secondary[data-action-name="Yes"] > span {
        font-size: 0px;
    }

        .dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-footer .dxbl-toolbar .dxbl-btn-toolbar .dxbl-toolbar-group .dxbl-toolbar-item > .dxbl-toolbar-btn.dxbl-btn-secondary[data-action-name="Yes"] > span::before {
            content: "Confirm";
            font-size: 14px;
        }

.dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-footer .dxbl-toolbar .dxbl-btn-toolbar .dxbl-toolbar-group .dxbl-toolbar-item > .dxbl-toolbar-btn.dxbl-btn-secondary[data-action-name="No"] {
    min-width: 100px;
}

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-footer .dxbl-toolbar .dxbl-btn-toolbar .dxbl-toolbar-group .dxbl-toolbar-item > .dxbl-toolbar-btn.dxbl-btn-secondary[data-action-name="No"] > span {
        font-size: 0px;
    }

        .dxbl-modal > .dxbl-modal-root > .dxbl-popup.xaf-confirmation-dialog > .dxbl-modal-content > .dxbl-modal-footer .dxbl-toolbar .dxbl-btn-toolbar .dxbl-toolbar-group .dxbl-toolbar-item > .dxbl-toolbar-btn.dxbl-btn-secondary[data-action-name="No"] > span::before {
            content: "Cancel";
            font-size: 14px;
        }

/* borderless */

.borderless {
}

    .borderless .dxbl-text-edit.dxbl-readonly::before {
        background: none !important;
    }

    .borderless .dxbl-text-edit {
        border: none !important;
    }

    .borderless textarea {
        background: white !important;
        text-align: center;
        font-family: Poppins !important;
        /* margin-bottom: 0rem; */
        line-height: 2rem !important;
        padding: 0;
        resize: none !important;
    }

    .borderless input {
        background: white !important;
        text-align: center;
        font-family: Poppins !important;
        color: red !important;
        font-weight: 700;
    }

.prev.available 
{   
    font-size: 19px;
}
    .prev.available > span::before {
        content: "<";
    }

.next.available 
{
    font-size: 19px;
}
    .next.available > span::before {
        content: ">";
    }

.daterange-bottom-label {
    margin-left: 6px;
    margin-top: 2px;
    font-size: 13px;
    color: var(--bs-gray);
    cursor: default;
}

.pl-1-3{
    padding-left: 1.3rem !important;
}

.progress-custom{    
}

    .progress-custom.dxbl-progress-bar .dxbl-progress-bar-label.dxbl-progress-circular-bar-label .dxbl-progress-bar-label-container > p {        
        font-size: 24px !important;        
    }

    .progress-custom.dxbl-progress-bar .dxbl-progress-bar-label .dxbl-progress-bar-label-container > svg {        
        scale: 2.0 !important;
    }

.progress-leave-summary .dxbl-progress-bar-indicator {
    background-color: rgb(51, 187, 237) !important;
    border-radius: 100px !important;
}

.progress-leave-summary .dxbl-progress-bar-track {
    background-color: #34bced40 !important;
    opacity: 1 !important;
    border-radius: 100px !important;
}

.progress-upload{
    width: 100% !important;
}

.progress-upload .dxbl-progress-bar-indicator {
    background-color: #33BBED !important;
    border-radius: 100px !important;
}

.progress-upload .dxbl-progress-bar-track {
    background-color: #FFFFFF !important;
    opacity: 1 !important;
    border-radius: 100px !important;
}

@-moz-document url-prefix() {
    /* system options */
    .main-content.xaf-flex-auto .dxbl-fl-ctrl:has(.d-none[data-item-name="Default Attendance Type"]) dxbl-combobox.dxbl-text-edit .dxbl-text-edit-template .dxbl-text-edit-input {
        padding-left: 0.4rem;
    }
    /*new punch*/
    .dxbl-fl-ctrl:has(.d-none[data-item-name="Employee"]) dxbl-combobox.dxbl-text-edit .dxbl-text-edit-template .dxbl-text-edit-input {
        padding-left: 0.7rem;
    }
}

.file-data-link .dxbl-text-edit-input {
    cursor: pointer !important;
}

.calendar-table .today {
    border: 2px solid #33bbed !important;
    /*border-radius: 16px !important;*/
}

.validation-box{
    min-height: fit-content;
}

/*.employee-editor-toobar {
    min-width: 38px;
    background: white;
    margin-left: 0rem;
    margin-right: 0;
    padding-bottom: 0;
    margin-bottom: 2px !important;
    padding-left: 0px !important;
    height: 40px !important;
}*/

/*.xaf-action.data-cell:has(.dxbl-checkbox) {
    text-align: center;
    vertical-align: middle !important;
}*/

.dxbl-grid .dxbl-grid-table > tbody > tr > td > .dxbl-checkbox, .dxbl-grid .dxbl-grid-table > tfoot > tr > td > .dxbl-checkbox, .dxbl-grid .dxbl-grid-table > thead > tr > td > .dxbl-checkbox {

    vertical-align: middle;
}

.dxbl-col:has(.xaf-item-range) .dxbl-fl-ctrl {
    align-self: center;
}

.cursor-default {
    cursor: default;
}

.dxbl-group > .dxbl-group-header > .dxbl-text {
    cursor: default;
}

.dxbl-popup.xafPopup .dxbl-modal-header .dxbl-modal-header-default, .xaf-caption-container {
    cursor: default;
}

.xaf-empty-data-text{
    cursor: default;
}
.dxbl-toolbar-btn.dxbl-btn-secondary[data-action-name="Switch to Design Mode"] {
    padding-right: 24px !important;
}

.popup-header-btn-close:hover {
    /*filter: invert(4%) sepia(8%) saturate(3125%) hue-rotate(304deg) brightness(96%) contrast(100%);*/
    opacity: 70%;
}

.employee-filters-editor {
    min-width: 38px;
    background: white;
    margin-left: 0rem;
    margin-right: 0;
    padding-bottom: 0;
    margin-bottom: 2px !important;
    margin-top: -7px;
    flex-wrap: wrap;
}

.leave-balances-filters-editor {
    min-width: 38px;
    background: white;
    margin-left: 0rem;
    margin-right: 0;
    padding-bottom: 0;
    margin-bottom: 2px !important;
    margin-top: 1px;
    flex-wrap: wrap;
}

.calendar-summary-filters-editor {
    margin-bottom: 20px !important;
    margin-top: 20px !important;
    flex-wrap: wrap;
}

.action-download-attachment{
    gap: 38px;
}