body {
  zoom: 100%;
  width: 100%;
}


#load-error {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ffebee;
    color: #c62828;
    padding: 20px;
    z-index: 9999;
    display: none;
    text-align: center;
}

#preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1.5s ease-out; /* Slower fade-out */
    z-index: 9999;
}

#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease-out, visibility 0s linear 1.5s;
}



/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.custom-event {
  background-color: transparent !important; /* force it */
}
.rbc-event {
  background-color: transparent !important;
}

/* ---- Global Styling ---- */

/* Apply Material UI font to all DevExtreme components */
.dx-widget {
    font-family: var(--font-family) !important;
    font-size: var(--font-size) !important;
}

/* ---- Buttons ---- */

/* Styling for the DevExtreme button (normal state) */
.dx-button {
    border-color: var(--border-color) !important; /* Override default border color */
    color: var(--text-color) !important;  /* Use custom text color */
    background-color: var(--background-color) !important;  /* Use custom background */
    transition: all 0.3s ease; /* Smooth transition for hover and focus */
}

/* Focus styling for the button */
.dx-button:focus, .dx-button.dx-button-focused {
    border-color: var(--primary-color) !important; /* Match Material UI theme primary color */
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2) !important; /* Optional box-shadow for focus */
    outline: none !important; /* Remove default blue outline */
}

/* Hover state styling for DevExtreme button */
.dx-button:hover {
    border-color: var(--primary-light-color) !important; /* Set border color to Material UI's primary light color */
    background-color: var(--primary-light-color) !important; /* Optional: Change background color on hover */
}

/* ---- Text Editors ---- */

/* Normal styling for the text editor */
.dx-texteditor, .dx-htmleditor-content {
    border-color: var(--border-color) !important; /* Initial border color */
    color: var(--text-color) !important; /* Text color */
    background-color: var(--background-color) !important; /* Background color */
    transition: all 0.3s ease; /* Smooth transition for hover and focus */
}

/* Focus state styling for text editor content */
.dx-texteditor.dx-state-focused, .dx-htmleditor-content.dx-state-focused {
    border-color: var(--primary-dark-color) !important; /* Set border color to primary dark when focused */
    box-shadow: 0 0 0 2px rgba(var(--primary-dark-color-rgb), 0.2) !important; /* Optional: Add focus effect with shadow */
    outline: none !important; /* Remove default focus outline */
}

/* Hover state styling (when hovering over the text editor content) */
.dx-texteditor:hover, .dx-htmleditor-content:hover {
    border-color: var(--primary-light-color) !important; /* Set border color to primary light on hover */
}

/* Focus and hover combined state (when both focused and hovered) */
.dx-texteditor.dx-state-focused:hover, .dx-htmleditor-content.dx-state-focused:hover {
    border-color: white !important; /* Ensure the border color is white when both focused and hovered */
}

/* ---- Icons ---- */

/* Global icon styling */
.dx-icon {
    color: var(--primary-dark-color) !important; /* Default icon color to primary dark */
    transition: color 0.3s ease; /* Smooth color transition on hover/focus */
}

/* Change color of icons on hover/focus */
.dx-icon:hover, .dx-icon:focus {
    color: var(--primary-light-color) !important; /* Change icon color on hover/focus */
}

/* Styling for the specific properties panel icon */
.dx-icon.dx-diagram-i.dx-diagram-i-button-properties-panel-open {
    color: var(--primary-dark-color) !important; /* Set the icon color to primary dark color */
}

/* ---- Dropdowns & Selectors ---- */

/* Dropdown and select component styling */
.dx-dropdowneditor, .dx-selectbox, .dx-selectbox-item {
    border-color: var(--border-color) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size) !important;
    color: var(--text-color) !important;
    background-color: var(--background-color) !important;
    transition: all 0.3s ease;
}

/* Focus styling for dropdown and select components */
.dx-dropdowneditor.dx-state-focused, .dx-selectbox.dx-state-focused {
    border-color: var(--primary-dark-color) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-dark-color-rgb), 0.2) !important;
    outline: none !important;
}

/* Hover state styling for dropdown and select components */
.dx-dropdowneditor:hover, .dx-selectbox:hover {
    border-color: var(--primary-light-color) !important;
}

/* ---- Text and Date Inputs ---- */

/* Styling for input fields (text, date, number, etc.) */
.dx-textbox, .dx-datebox, .dx-numberbox {
    border-color: var(--border-color) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size) !important;
    color: var(--text-color) !important;
    background-color: var(--background-color) !important;
    transition: all 0.3s ease;
}

/* Focus styling for input fields */
.dx-textbox.dx-state-focused, .dx-datebox.dx-state-focused, .dx-numberbox.dx-state-focused {
    border-color: var(--primary-dark-color) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-dark-color-rgb), 0.2) !important;
    outline: none !important;
}

/* Hover state styling for input fields */
.dx-textbox:hover, .dx-datebox:hover, .dx-numberbox:hover {
    border-color: var(--primary-light-color) !important;
}

/* ---- Slider and Range Inputs ---- */

/* Styling for the slider */
.dx-slider, .dx-range-slider {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
    transition: all 0.3s ease;
}

/* Focus and hover styling for sliders */
.dx-slider:focus, .dx-range-slider:focus {
    border-color: var(--primary-dark-color) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-dark-color-rgb), 0.2) !important;
}

.dx-slider:hover, .dx-range-slider:hover {
    border-color: var(--primary-light-color) !important;
}

/* ---- Date and Time Pickers ---- */

/* Styling for the date picker */
.dx-datepicker, .dx-timepicker, .dx-datetimepicker {
    border-color: var(--border-color) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size) !important;
    color: var(--text-color) !important;
    background-color: var(--background-color) !important;
    transition: all 0.3s ease;
}

/* Focus styling for date and time pickers */
.dx-datepicker.dx-state-focused, .dx-timepicker.dx-state-focused, .dx-datetimepicker.dx-state-focused {
    border-color: var(--primary-dark-color) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-dark-color-rgb), 0.2) !important;
    outline: none !important;
}

/* Hover state styling for date and time pickers */
.dx-datepicker:hover, .dx-timepicker:hover, .dx-datetimepicker:hover {
    border-color: var(--primary-light-color) !important;
}

/* ---- Miscellaneous Styles ---- */

/* General widget borders */
.dx-widget {
    border-color: var(--border-color) !important;
}

/* Global focus outline for all components */
.dx-widget:focus {
    outline: none !important; /* Removes default focus outline */
}

/* Remove default blue box shadow for focused widgets */
.dx-widget.dx-state-focused {
    box-shadow: none !important;
}