:root {    
    --bs-calendar-attendance: var(--bs-green);
    --bs-calendar-attendance-hover: #88D292;
    --bs-calendar-attendance-light: #CDEDD2;
    --bs-calendar-leave: var(--bs-cyan);
    --bs-calendar-leave-hover: #84D6F4;
    --bs-calendar-leave-light: #CCEEFB;
    --bs-calendar-schedule: #9610AD;
    --bs-calendar-schedule-hover: #C06FCD;
    --bs-calendar-schedule-light: #EFDBF3;
    --bs-calendar-red: #EB5757;
    --bs-calendar-red-light: #FBDDDD;
}

.dxbl-scheduler-color {
    --dxbl-scheduler-primary-color: var(--bs-primary);
    --dxbl-scheduler-light-color: #F4F8FC !important; /* important for calendar (for example, non-working day in Month view)  */
}

/* hide toolbar (with navigator and view switcher buttons) */
dxbl-scheduler .dxbl-sc-tb-wrapper {
    padding: 0rem !important;
    height: 0px !important;
    visibility: hidden !important;
}

/* it hides bottom border in calendar. not sure if it works. may be need !important ? */
/*dxbl-scheduler .table.dxbl-sc-horizontal-view, dxbl-scheduler .table.dxbs-sc-vertical-view {
    border-bottom-style: hidden; 
}*/

/* use horiz resource template instead of vert. rotate it */
dxbl-scheduler .dxbl-v-resource-header .dxbl-resource-header-content > span {
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
}

/* vertical timescale cells style: in day\week view in "Employee Mode" */
dxbl-scheduler .dxbl-hour-time-scale.dxbl-sc-table tr > td.dxbl-sc-hour-cell,
dxbl-scheduler .dxbl-sc-time-rulers-caption {
    height: 40px;
    padding-top: 0px;
    text-align: right;
    padding-right: 10px;
    font-size: 12px;
    font-weight: 400;
    color: var(--bs-gray-500);
    border-right-color: var(--bs-gray-300);
    border-right-style: solid !important;
    border-right-width: 1px;
}

/* hide top borders in some places: day of week, timescale, etc */
dxbl-scheduler .dxbl-sc-empty-cell table,
dxbl-scheduler .dxbl-sc-horizontal-view,
dxbl-scheduler .dxbl-sc-resource-headers,
dxbl-scheduler .dxbl-sc-month .dxbl-sc-headers,
dxbl-scheduler .dxbl-sc-timeline .dxbl-sc-timescale {
    border-top: 0px solid white;
}

.dxbl-scheduler .dxbl-sc-timeline .dxbl-sc-resource-headers > tbody > tr > td {
    border-bottom-style: solid !important;
    border-right-style: solid !important;
    border-right-width: 1px;
}

/* decrease height of resource headers */
.dxbl-scheduler .dxbl-sc-timeline .dxbl-sc-resource-headers > tbody > tr > td {
    height: 48px;
}
.dxbl-scheduler .dxbl-sc-timeline .dxbl-sc-horizontal-view > tbody > tr:not(:first-child) > td {
    height: 55px;
}

/*dxbl-scheduler .dxbs-sc-timecells-container,
dxbl-scheduler .dxbs-sc-resources-container {
    height: 100%;
}
*/

/* increase width of resources area */
dxbl-scheduler .dxbl-sc-empty-cell,
dxbl-scheduler .dxbl-sc-resources-scroll-area {
    width: 200px !important;
}

/* month view cells height 150px => 140px */
dxbl-scheduler .dxbl-sc-month .dxbl-sc-time-cell {
    height: 140px !important;
}

/* hide border in first pseudo-row. I dont know for what devex creates this empty row */
.dxbl-sc-arm {
    border-style: hidden !important;
}



.calendar-icon {
    border-radius: 2px;
    width: 20px;
    height: 20px;
}

.text-current-type {
    font-size: 1rem;
    font-weight: 500;
    padding-top: 2px;
}

.text-leave-type {
    font-size: 0.7rem;
    font-weight: 500;
}

.text-emp-name {
    font-size: 0.9rem;
    font-weight: 400;
    padding-top: 2px;
}

.img-avatar {
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.img-24 {
    width: 24px;
    height: 24px;
}

.img-20 {
    width: 20px;
    height: 20px;
}

.img-24 {
    width: 24px;
    height: 24px;
}

.img-14 {
    width: 14px;
    height: 14px;
}

.img-16 {
    width: 16px;
    height: 16px;
}


.img-12 {
    width: 12px;
    height: 12px;
}

.card-view-container {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: 330px;
}

.card-view-container-max-height {   
    max-height: 340px;
}

.img-box {
    width: 20px;
    height: 20px;
    justify-content: center;
    padding-left: 0px;
}

.border-2-all {
    border-radius: 2px;
}

.border-2-left {
    border-radius: 2px 0px 0px 2px;
}

.calendar-popup-date {
    font-size: 0.9rem;
    font-weight: 400;
}

.calendar-popup-month-header-content-container {
    display: flex;
    justify-content: space-between;
    padding-left: 1rem;
    padding-top: 0.8rem;
    padding-bottom: 0.6rem;
}

.calendar-popup-timeline-header-content-container {
    display: flex;
    justify-content: space-between;
    padding-left: 1rem;
    padding-top: 0.8rem;
    padding-bottom: 0.6rem;
}

.calendar-popup-form-header-content-container {
    display: flex;
    justify-content: space-between;
    padding-left: 1rem;
    padding-top: 0.8rem;
    padding-bottom: 0.6rem;
}

.calendar-popup-form-body-content-container {
    display: flex;
    align-items: center;
    padding: 1rem;    
}

.calendar-popup-form-body-form-labels {
    color: #737E8C !important;
    font-size: 14px;    
    font-weight: 400;
    line-height: 28px;
    word-wrap: break-word
}

.line-horiz {
    height: 1px;
    color: gray;
}

.timeline-popup-bottom-btn {
    height: 36px;
    --dxbl-toolbar-btn-color: var(--bs-gray-500);
    font-size: 16px;
}

.dropdown-listbox {
    --dxbl-list-box-item-hover-bg: #F4F8FC;
    --dxbl-list-box-item-hover-color: #1C75BC;
    --dxbl-list-box-line-height: 34px;
    --dxbl-list-box-item-padding-x: 16px;
    --dxbl-list-box-border-color: white;
}

.colored-box-attendance {
    border-radius: 2px;
    width: 20px;
    height: 20px;
    background: var(--bs-calendar-attendance);
}

.colored-box-schedule {
    border-radius: 2px;
    width: 20px;
    height: 20px;
    background: var(--bs-calendar-schedule);
}

.colored-box-attsummary {
    border-radius: 2px;
    width: 20px;
    height: 20px;
    background: var(--bs-calendar-red);
}

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