/* Fonts & Icons */
.e-input-group-icon.e-date-icon::before, 
*.e-control-wrapper .e-input-group-icon.e-date-icon::before,
.e-datetime-wrapper .e-time-icon.e-icons::before,
.e-time-wrapper .e-time-icon.e-icons::before,
.e-grid .e-icon-rowdragicon::before {
    font-family: "Font Awesome 6 Pro"; font-weight: 900;
}

.e-input-group-icon.e-date-icon::before, *.e-control-wrapper .e-input-group-icon.e-date-icon::before {
    content: "\f133" !important;
}
.e-datetime-wrapper .e-time-icon.e-icons::before,
.e-time-wrapper .e-time-icon.e-icons::before{
    content: "\f017" !important;
}
.e-grid .e-icon-rowdragicon::before {
    content: "\e411" !important;
    color: var(--basic-black) !important;
    opacity: 1 !important;
}

.e-grid .e-active .e-icon-rowdragicon::before {
    content: "\e411" !important;
    color: var(--basic-white) !important;
    opacity: 1 !important;
}

/* Combobox */
.e-control-wrapper {
    background: var(--input-background-color) !important;
    color: var(--input-text-color) !important;
    border-color: var(--input-border-color) !important;
    border-width: var(--input-border-size) !important;
    border-radius: var(--input-border-radius) !important;
}    

.e-control-wrapper.e-input-focus {
    box-shadow: none !important;
    border-color: var(--input-focus-border-color) !important;
}

.e-input-focus {
    box-shadow: none !important;
    border-color: var(--input-focus-border-color) !important;
}
        
.e-combobox, .e-autocomplete, .e-datetimepicker, .e-timepicker, .e-dropdownlist,
.e-repeat-interval, .e-month-day, .e-recurrence-count, .e-until-date, .e-numerictextbox {
    height: var(--syncfusion-input-height) !important;
}

.e-datetimepicker.e-popup.e-control.e-popup-open,
.e-timepicker.e-popup.e-control.e-popup-open
{
    height: 200px !important;
}

.e-multiselect {
    min-height: var(--input-height) !important;
}

/* Dropdowns */
.e-ddl.e-popup.e-lib.e-control.e-popup-open, .e-dropdown-popup.e-popup.e-control.e-popup-open,
.e-datetimepicker.e-lib.e-control.e-popup-open, .e-timepicker.e-popup.e-control.e-popup-open {
    background-color: var(--dropdown-background-color);
    border: 1px solid var(--dropdown-background-color);
}

.e-dropdownbase .e-list-item, .e-item, .e-datetimepicker .e-list-item, .e-timepicker .e-list-item {
    -webkit-tap-highlight-color: transparent;
    background-color: var(--dropdown-background-color);
    border-bottom: 0;
    border-color: var(--dropdown-background-color);
    color: var(--dropdown-item-text-color);
}

.e-dropdownbase .e-list-item.e-item-focus, .e-dropdownbase .e-list-item:hover, .e-dropdownbase .e-list-item:active,
.e-datetimepicker .e-list-item.e-item-focus, .e-datetimepicker .e-list-item:hover, .e-datetimepicker .e-list-item:active,
.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item.e-active, .e-list-item:hover,
.e-list-item.e-hover, .e-list-item.e-hover:hover, .e-list-item.e-hover:active,
.e-timepicker .e-list-item.e-item-focus, .e-timepicker .e-list-item:hover, .e-timepicker .e-list-item:active,
.e-timepicker.e-popup .e-list-parent.e-ul .e-list-item.e-active, 
.e-dropdown-popup .e-item.e-active {
    background-color: var(--dropdown-item-hover-color) !important;
    color: var(--dropdown-item-selected-text-color) !important;
}

.e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-item-focus, .e-dropdownbase .e-list-item.e-active.e-hover, .e-item:hover,
.e-datetimepicker.e-list-item.e-active, .e-datetimepicker .e-list-item.e-active.e-hover, .e-list-item.e-active,
.e-timepicker.e-list-item.e-active, .e-timepicker .e-list-item.e-active.e-hover{
    background-color: var(--dropdown-item-selected-color) !important;
    color: var(--dropdown-item-selected-text-color) !important;
}

.e-dropdownbase .e-list-item.e-item-focus:hover {
    background-color: var(--dropdown-item-hover-color) !important;
    color: var(--dropdown-item-selected-text-color) !important;
}

.e-datetimepicker.e-popup .e-list-parent.e-ul,
.e-timepicker.e-popup .e-list-parent.e-ul{
    background-color: var(--dropdown-background-color) !important;    
}

.e-input-group.e-ddl-icon.e-search-icon {
    color: var(--input-text-color) !important;
}

/* Buttons */

.albi-primary-btn.e-btn {
    font-weight: normal;
}

.albi-primary-btn.e-btn:hover, .albi-primary-btn:hover {
    color: var(--primary-button-text-color);
}

.albi-primary-btn.e-btn:focus, .albi-primary-btn.e-btn:active {
    outline: none;
    border: none;
    box-shadow: none;
    background-color: var(--primary-button-hover-color);
}

.albi-primary-btn.e-btn.e-active, .e-split-btn-wrapper .e-btn:active, .e-split-btn-wrapper .e-btn:focus {
    background-color: var(--primary-button-hover-color);
    border-color: var(--primary-button-hover-color);
    box-shadow: none;
    color: var(--primary-button-text-color);
}

.albi-secondary-btn.e-btn {
    font-weight: normal;
}

.albi-secondary-btn.e-btn:hover, .albi-secondary-btn.e-btn:active, .albi-secondary-btn.e-btn:focus {
    background-color: var(--secondary-button-hover-color);
    border-color: var(--secondary-button-border-color);
}

.e-dropdown-btn {
    height: var(--button-height);
}

/* Switches */
.e-switch-handle {
    background-color: var(--switch-toggle-color) !important;
}

.e-switch-off {
    background-color: var(--switch-off-color) !important;
    border-color: var(--switch-off-color) !important;
}

.e-switch-inner.e-switch-active, .e-switch-on  {
    background-color: var(--switch-on-color) !important;
    border-color: var(--switch-on-color) !important;
}

/* Datetime picker */
.e-datepicker .e-calendar {
    background-color: var(--dropdown-background-color) !important;
    color: var(--input-text-color) !important;
}

.e-footer-container {
    background-color: var(--dropdown-background-color) !important;
}

.e-calendar .e-footer-container .e-btn.e-today {
    background-color: var(--primary-button-color) !important;
    color: var(--primary-button-text-color) !important;    
}
.e-calendar .e-footer-container .e-btn.e-today:hover {
    border-color: var(--primary-button-color) !important;
    background-color: var(--primary-button-hover-color) !important;
}

.e-calendar .e-content td.e-today span.e-day{
    color: var(--primary-color) !important;
    box-shadow: inset 1px 0 var(--primary-color), inset 0 1px var(--primary-color), inset -1px 0 var(--primary-color), inset 0 -1px var(--primary-color) !important;
}

.e-calendar .e-content td.e-selected.e-focused-date span.e-day {
    background-color: var(--primary-color) !important;
    color: var(--on-primary-color) !important;
}

/* Color Picker */
.e-colorpicker .e-control, .e-container .e-slider-preview, .e-container .e-selected-value,
.e-dropdown-popup.e-colorpicker-popup .e-container .e-switch-ctrl-btn{
    background-color: var(--dropdown-background-color) !important;
}

.e-container .e-switch-ctrl-btn .e-ctrl-btn .e-btn.e-apply {
    background-color: var(--primary-button-color) !important;
    color: var(--primary-button-text-color) !important;
}

.e-container .e-switch-ctrl-btn .e-ctrl-btn .e-btn.e-apply:hover {
    border-color: var(--primary-button-color) !important;
    background-color: var(--primary-button-hover-color) !important;
}

.e-container .e-switch-ctrl-btn .e-ctrl-btn .e-btn.e-cancel {
    background-color: var(--secondary-button-color) !important;
    color: var(--secondary-button-text-color) !important;
}

.e-container .e-switch-ctrl-btn .e-ctrl-btn .e-btn.e-cancel:hover {
    border-color: var(--secondary-button-color) !important;
    background-color: var(--secondary-button-hover-color) !important;
}

.e-split-colorpicker.e-control.e-lib.e-btn.e-icon-btn.e-split-btn:focus,
.e-split-colorpicker.e-control.e-lib.e-btn.e-icon-btn.e-split-btn:active {
    background-color: var(--primary-button-color) !important;
    border-color: var(--primary-button-color) !important;
}

/* ListView */
.e-control.e-listview {
    border-radius: var(--input-border-radius) !important;
    border-color: var(--input-border-color) !important;
}

.e-list-group-item {
    background-color: var(--listview-header-color) !important;
    color: var(--listview-header-text-color) !important;
}

.e-listview .e-list-parent .e-list-item, .e-listview .e-list-parent .e-list-group-item,
.e-listview .e-list-header {
    border-bottom: solid 1px var(--input-border-color);
}

.e-listview .e-list-parent .e-list-item {
    background-color: var(--listview-item-color);
    color: var(--listview-item-text-color);    
}

.e-listview .e-list-header  {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    background-color: var(--listview-header-color);
    color: var(--listview-header-text-color);
}

.e-listview .e-list-group-item {
    padding-top: .65rem;
    padding-bottom: 1.85rem;    
}

.listview-header,
.e-listview .e-list-header .e-text .e-headertext,
.e-listview .e-list-parent .e-list-group-item .e-text-content .e-list-text {
    text-transform: none !important;
    font-size: 14px !important;
}

.e-headertemplate-text {
    width: 100%;
}

/* Syncfusion Grid */
.e-grid .e-headercontent .e-columnheader .e-headertext {
    text-transform: none !important;    
}

.e-grid {
    border-radius: var(--input-border-radius);
    border-color: var(--input-border-color);
}

.e-grid .e-gridheader {
    border-top-left-radius: var(--input-border-radius);
    border-top-right-radius: var(--input-border-radius);
    border-color: var(--input-border-color);
}

.e-grid .e-gridpager,
.e-grid .e-gridcontent{
    border-bottom-left-radius: var(--input-border-radius);
    border-bottom-right-radius: var(--input-border-radius);
    border-color: var(--input-border-color);
}

.e-grid .e-headercell {
    color: var(--listview-header-text-color);
    background-color: var(--listview-header-color);
}

.e-grid .e-rowdragheader {
    background-color: var(--listview-header-color);
}

.e-grid .e-content,
.e-grid .e-content .e-table,
.e-grid .e-gridpager,
.e-grid .e-gridpager .e-pagercontainer,
.e-grid .e-pager-default {
    background-color: var(--listview-item-color);
    color: var(--listview-item-text-color);
    border-color: var(--input-border-color);
}

.e-pager .e-firstpagedisabled,
.e-pager .e-prevpagedisabled,
.e-pager .e-nextpagedisabled,
.e-pager .e-lastpagedisabled {
    opacity: 60%;
    border-color: var(--input-border-color);
    cursor:not-allowed;
}

.e-pager .e-currentitem,
.e-pager .e-pager-default:focus,
.e-pager .e-pager-default:active{
    background-color: var(--primary-button-color) !important;
    color: var(--primary-button-text-color) !important;
}
.e-pager .e-currentitem:hover,
.e-pager .e-pager-default:hover {
    background-color: var(--primary-button-hover-color) !important;
    color: var(--primary-button-text-color) !important;
}

.e-grid td.e-selectionbackground,
.e-grid td.e-cellselectionbackground,
.e-grid .e-columnselection {
    background-color: var(--dropdown-item-selected-color) !important;
    color: var(--dropdown-item-selected-text-color) !important;
}

.e-grid .e-rowcell {
    border-color: var(--input-border-color);
}

.e-grid.e-gridhover .e-frozenhover,
.e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover tr[role=row]:not(.e-disable-gridhover):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover tr[role=row]:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell)
{
    background-color: var(--dropdown-item-hover-color) !important;
    color: var(--dropdown-item-selected-text-color) !important;
}

.e-grid .e-headercelldiv {
    font-size: 14px !important;
}

.e-grid .e-flmenu,
.e-grid .e-flmenu .e-dlg-content,
.e-grid .e-flmenu .e-footer-content {
    background-color: var(--dropdown-background-color);
}

.e.grid .e-flmenu .e-footer-content .e-flmenu-okbtn {
    background-color: var(--primary-button-color) !important;
    color: var(--primary-button-text-color) !important;
}

.e-footer-content .e-btn:hover.e-primary.e-flat:not([DISABLED]),
.e.grid .e-flmenu .e-footer-content .e-flmenu-okbtn:hover {
    border-color: var(--primary-button-color) !important;
    background-color: var(--primary-button-hover-color) !important;
}

.e.grid .e-flmenu .e-footer-content .e-flmenu-cancelbtn {
    background-color: var(--secondary-button-color) !important;
    color: var(--secondary-button-text-color) !important;
}

.e-footer-content .e-btn:hover.e-flat:not([DISABLED]),
.e.grid .e-flmenu .e-footer-content .e-flmenu-cancelbtn:hover {
    border-color: var(--secondary-button-color) !important;
    background-color: var(--secondary-button-hover-color) !important;
}

/* MultiSelect */
.e-multi-select-wrapper {
    margin-top: 0.25rem !important;
}
.e-multi-select-wrapper .e-chips-close.e-close-hooker {
    top:85%;
}

.e-multiselect .e-multi-select-wrapper .e-searcher .e-dropdownbase {
    min-width: 250px;
}

.e-chips {
    border-radius: var(--input-border-radius) !important;
}

/* Scheduler */
.e-schedule .e-toolbar-item {
    background-color: var(--surface-color) !important;
}

.e-schedule .e-schedule-toolbar .e-toolbar-items,
.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
.e-schedule .e-timeline-view .e-date-header-wrap table tbody td.e-time-slots,
.e-schedule .e-vertical-view .e-time-cells-wrap table td{
    background-color: var(--surface-color) !important;
}

/* Tabs */
.e-tab .e-content .e-item {
    color: var(--text-color-base);
}
.e-tab .e-item:hover {
    background-color: transparent !important;
    color: var(--text-color-base) !important;
}

.e-tab .e-toolbar-item {
    background-color: var(--background-color) !important;
}

.e-tab .e-toolbar-item {
    background-color: var(--surface-color) !important;
}

.e-tab .e-tab-header .e-toolbar-item:not(.e-separator), .e-tab .e-tab-header, .e-tab-header .e-control .e-toolbar .e-lib .e-keyboard {
    height: 50px !important;
}

.e-tab-header.e-vertical {
    height: auto !important;
}

.e-tab .e-tab-header .e-toolbar-item {
    padding: 0 1rem !important;
}

/* Syncfusion File Uploader */
.e-upload .e-file-drop {
}

.e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-name,
.e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-type {
    color: var(--input-text-color);
}

.e-upload .e-btn {
    background-color: var(--primary-button-color);
    color: var(--primary-button-text-color);
    height: var(--small-button-height);
    border-radius: var(--input-border-radius);
    border-color: var(--primary-button-color);
}
.e-upload .e-btn:hover {
    background-color: var(--primary-button-hover-color);
    color: var(--primary-button-text-color);
    border-color: var(--primary-button-hover-color);
}

.e-upload .e-btn:focus {
    background-color: var(--primary-button-hover-color);
    color: var(--primary-button-text-color);
    border-color: var(--primary-button-hover-color);
    box-shadow: none;
}

.e-upload .e-btn:active {
    background-color: var(--primary-button-hover-color);
    color: var(--primary-button-text-color);
    border-color: var(--primary-button-hover-color);
}

/* Syncfusion Charts */
.e-chart, .e-chart text {
    font-family: var(--albi-font) !important;
    fill: var(--text-color-base);
}

/* Syncfusion Rich Text Editor */
.e-richtexteditor {
    border: .125rem solid var(--input-border-color) !important;
    border-radius: var(--input-border-radius);
}

.e-richtexteditor .e-rte-toolbar, .e-richtexteditor .e-rte-toolbar .e-toolbar-items {
    border-radius: var(--input-border-radius) !important;
    background-color: var(--surface-color) !important;
}

.e-richtexteditor .e-rte-dropdown-btn-text {
    color: var(--dropdown-item-text-color);
}

.e-richtexteditor .e-rte-content {
    border-bottom-left-radius: var(--input-border-radius);
    border-bottom-right-radius: var(--input-border-radius);
    color: var(--input-text-color);
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item.e-overlay {
    background-color: var(--surface-color) !important;
    opacity: 1;
    cursor: pointer !important;
    pointer-events: all;
}

.e-richtexteditor .e-rte-content .rte-placeholder {
    color: var(--input-placeholder-color);
}

.e-richtexteditor .e-rte-content {
    background-color: var(--input-background-color);
}