@obaidazoqili/skysoftware-styles 1.0.0 → 1.1.0

package/package.json

@@ -1,11 +1,15 @@
 {
     "name": "@obaidazoqili/skysoftware-styles",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "Shared styles",
     "main": "index.js",
     "files": [
-      "styles/**/*"
+        "styles/**/*"
+    ],
+    "keywords": [
+        "styles",
+        "angular",
+        "SkySoftware"
     ],
-    "keywords": ["styles","angular","SkySoftware"],
     "license": "MIT"
-  }
+}

package/styles/dx-styles.scss

@@ -0,0 +1,1423 @@
+@import "../../themes/generated/variables.base";
+$side-panel-min-width: 60px;
+$base-border-width: 2px;
+$base-border-tab-width: 3px;
+
+
+.dx-calendar-cell span {
+  border-radius: 16px;
+}
+
+.dx-calendar-body thead th {
+  text-align: center;
+}
+
+.dx-calendar-cell.dx-state-active span {
+  background-color: rgba(36, 158, 160, 0.4)
+}
+
+.dx-calendar-cell-range-hover.dx-calendar-cell-end-in-row::after {
+  border-inline-end-color: rgba(36, 158, 160, 0.24);
+}
+
+.dx-calendar-cell.dx-state-hover span {
+  background-color: rgba(36, 158, 160, 0.24);
+}
+
+.dx-calendar-cell-range-hover::after {
+  border-color: rgba(36, 158, 160, 0.24) transparent;
+}
+
+.dx-calendar-cell-range-hover.dx-calendar-cell-range-hover-end::after {
+  border-inline-end-color: rgba(36, 158, 160, 0.24);
+}
+
+.dx-calendar-cell-range-hover.dx-calendar-cell-start-in-row::after {
+  border-inline-start-color: rgba(36, 158, 160, 0.24);
+}
+
+.dx-calendar-cell-in-range::before {
+  background-color: rgba(36, 158, 160, 0.24);
+  border-color: rgba(36, 158, 160, 0.24) transparent;
+}
+
+.dx-calendar-cell-in-range.dx-calendar-range-end-date::before {
+  border-start-end-radius: 16px;
+  border-end-end-radius: 16px;
+  border-inline-end-color: rgba(36, 158, 160, 0.24);
+}
+
+.dx-calendar-cell-in-range.dx-calendar-range-start-date::before {
+  border-inline-start-color: rgba(36, 158, 160, 0.24);
+  border-start-start-radius: 16px;
+  border-end-start-radius: 16px;
+}
+
+.dx-calendar-cell.dx-calendar-contoured-date span {
+  box-shadow: 0 0 0 2px rgba(36, 158, 160, 0.24);
+}
+
+.dx-calendar-cell.dx-calendar-selected-date span {
+  color: #fff !important;
+  background-color: #00796B !important;
+  z-index:100
+}
+
+.dx-calendar-cell.dx-calendar-today span {
+  border: 2px solid #00796B;
+}
+
+html, body {
+  margin: 0px;
+  min-height: 100%;
+  height: 100%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.content {
+  line-height: 1.5;
+  flex-grow: 1;
+  max-height: 100%;
+
+  h2 {
+    font-size: 30px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+}
+
+.container {
+  height: 100%;
+  flex-direction: column;
+  display: flex;
+}
+
+.breadcrumb-container {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  background-color: #f9fafb;
+  height: auto !important;
+  flex-direction: column;
+  display: flex;
+}
+
+.layout-body {
+  flex: 1;
+  min-height: 0;
+}
+
+.side-nav-outer-toolbar .dx-drawer {
+  height: calc(100% - 56px)
+}
+
+.content-block {
+  margin-left: 40px;
+  margin-right: 40px;
+  margin-top: 20px;
+
+  .screen-x-small & {
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+}
+
+.responsive-paddings {
+  padding: 20px;
+
+  .screen-large & {
+    padding: 40px;
+  }
+}
+
+.dx-card.wide-card {
+  border-radius: 0;
+  margin-left: 0;
+  margin-right: 0;
+  border-right: 0;
+  border-left: 0;
+}
+
+.with-footer > .dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-content {
+  height: 100%;
+
+  & > .dx-scrollview-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    height: inherit;
+  }
+}
+/* sidebar-menu design */
+
+.sidebar-menu-container {
+  min-height: 100%;
+  display: flex;
+  flex: 1;
+
+  ::ng-deep .dx-treeview {
+    white-space: nowrap;
+    transition: all 0.5s ease;
+
+    .dx-treeview-item {
+      padding: 5px 10px;
+      padding-left: 0;
+      flex-direction: row-reverse;
+
+      .dx-icon {
+        width: $side-panel-min-width !important;
+        margin: 0 !important;
+      }
+    }
+
+    .dx-treeview-item.dx-state-hover {
+
+      .dx-treeview-item-content {
+        color: $base-accent;
+        background: $base-bg;
+      }
+    }
+
+    .dx-treeview-node {
+      padding: 0 0 !important;
+    }
+
+    .dx-treeview-toggle-item-visibility {
+      right: 10px;
+      left: auto;
+    }
+
+    .dx-rtl .dx-treeview-toggle-item-visibility {
+      left: 10px;
+      right: auto;
+    }
+
+    .dx-treeview-node {
+      color: $base-label-color;
+      padding: 6px 6px 14px 6px;
+
+      &[aria-level='1'] {
+        font-size: 14px;
+        font-weight: 700;
+      }
+
+      &[aria-level='2'] .dx-treeview-item-content {
+        font-size: 14px;
+        font-weight: normal;
+        padding: 0 30px;
+        margin-left: 30px;
+        border: none;
+      }
+    }
+
+    .dx-treeview-node[aria-level="2"] .dx-treeview-item {
+      padding: 8px 10px;
+    }
+  }
+  // ## Selected & Focuced items customization
+  ::ng-deep .dx-treeview {
+    .dx-treeview-node-container {
+      .dx-treeview-node {
+        &.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item {
+          background: transparent;
+        }
+
+        &.dx-state-selected > .dx-treeview-item * {
+          color: $base-accent;
+        }
+
+        &:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover {
+          background-color: rgb(249, 250, 251);
+        }
+      }
+    }
+  }
+
+  .dx-treeview-item .dx-treeview-item-content .dx-icon {
+    color: $base-accent;
+  }
+
+  .dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item {
+    color: $base-accent;
+    background: inherit;
+  }
+
+  .dx-treeview-item-without-checkbox > .dx-treeview-item.dx-state-hover {
+    color: $base-accent;
+    background: inherit;
+  }
+}
+/*topbar menu header design */
+
+.topbar-header .dx-toolbar {
+  background: #222;
+  padding: 10px 0;
+
+  ::ng-deep .dx-toolbar-item.menu-button > .dx-toolbar-item-content .dx-icon {
+    color: $base-bg;
+  }
+
+  ::ng-deep .dx-toolbar-item.dx-toolbar-button.menu-button > .dx-button .dx-button-mode-text .dx-state-hover {
+    background: $base-accent;
+  }
+
+  ::ng-deep .dx-toolbar-items-container .dx-toolbar-after {
+    padding: 0 20px;
+  }
+
+  ::ng-deep .dx-toolbar-item.menu-button {
+    width: $side-panel-min-width;
+    text-align: center;
+    padding: 0;
+  }
+
+  ::ng-deep div.dx-button-mode-contained {
+    background: $base-accent;
+    color: $base-accent;
+    border-color: transparent;
+  }
+
+  ::ng-deep div.dx-button-mode-contained .dx-icon {
+    color: $base-bg;
+  }
+
+  :host-context(.dx-theme-generic) {
+    .user-button > .dx-button-content {
+      padding: 3px;
+    }
+  }
+}
+
+.dx-toolbar .header-toolbar div.dx-button-mode-contained {
+  background: #222;
+  color: $base-bg;
+}
+/* data grid and grid pager */
+.dx-datagrid-borders > .dx-datagrid-headers, .dx-treelist-borders > .dx-treelist-headers {
+  border: none !important;
+}
+
+.dx-datagrid-headers {
+  border-bottom: none !important;
+}
+
+.dx-datagrid-borders .dx-datagrid-rowsview, .dx-datagrid-headers + .dx-datagrid-rowsview {
+  border-top: none !important;
+}
+
+.dx-datagrid-borders > .dx-datagrid-pager {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.dx-datagrid-pager {
+  border-top: none;
+  border-bottom: none;
+  /*border-top: 2px solid $pager-page-selected-bg;*/
+  /*border-bottom: 1px solid $base-border-color;*/
+}
+
+.dx-pager .dx-page-sizes .dx-page-size {
+  padding: 5px 9px 5px 10px;
+}
+
+.dx-pager .dx-pages .dx-page {
+  padding: 5px 9px 5px;
+}
+
+.dx-pager .dx-pages .dx-info {
+  margin-left: 5px !important;
+  margin-right: 5px !important;
+}
+
+.dx-datagrid tr.dx-data-row.dx-column-lines > td,
+.dx-datagrid tr.dx-freespace-row.dx-column-lines > td {
+  border: none;
+}
+
+.dx-rtl .dx-datagrid tr.dx-data-row.dx-column-lines > td,
+.dx-rtl .dx-datagrid tr.dx-freespace-row.dx-column-lines > td {
+  border: none;
+}
+
+.dx-cell-modified {
+  background-color: #d6e4f1 !important;
+}
+/* tab control */
+.dx-tab.dx-tab-selected {
+  border-bottom: $base-border-tab-width solid $base-accent !important;
+}
+
+
+.dx-dropdownbutton-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content {
+  padding: 7px 8px;
+}
+
+.dx-tab, .dx-tabs-wrapper {
+  background-color: white !important;
+  border-top: none !important;
+}
+
+.dx-tabpanel-container {
+  display: none
+}
+
+.dx-tabs-nav-button {
+  background-color: white;
+  border-color: white;
+}
+
+dx-scroll-view#scrollview {
+  min-height: 480px;
+}
+
+::ng-deep .btn-disabled.dx-button-mode-outlined {
+  background-color: #ECECEC !important;
+  border-color: #c9c7c7 !important;
+  color: #333;
+}
+
+.property-menu {
+  .dx-button-mode-outlined {
+    color: $base-bg !important;
+    border: none;
+  }
+
+  .dx-icon {
+    color: $base-bg !important;
+  }
+
+  @media only screen and (max-width: 845px) {
+    .dx-button-mode-outlined {
+      color: black !important;
+      border: none;
+    }
+
+    .dx-icon {
+      color: black !important;
+    }
+  }
+
+  .dx-button-text {
+    max-width: 245px;
+    display: flex;
+    justify-content: end;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .dx-button-content {
+    justify-content: end;
+  }
+}
+
+.dx-dropdownbutton-popup-wrapper {
+  min-width: 200px;
+}
+
+.dx-overlay-content.dx-popup-normal.dx-resizable.dx-popup-inherit-height {
+  top: 10px !important;
+}
+
+.dx-scrollview-scrollbottom {
+  display: none !important;
+}
+
+.dx-accordion-item {
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25) inset;
+  top: 647.24px;
+  left: 175px;
+  gap: 0px;
+  border-radius: 7px;
+  background: var(--Card-bg, rgba(255, 255, 255, 1));
+  opacity: 1;
+}
+
+.dx-accordion-item-opened {
+  border-color: transparent;
+}
+
+.dx-layout-manager .dx-field-item:not(.dx-first-row) {
+  padding-top: 16px;
+}
+
+.dx-texteditor.dx-state-readonly {
+  border-style: solid;
+}
+
+.dx-textbox.dx-texteditor.dx-state-disabled,
+.dx-numberbox.dx-texteditor.dx-state-disabled,
+.dx-textarea.dx-texteditor.dx-state-disabled,
+.dx-state-disabled.dx-checkbox .dx-checkbox-icon,
+.dx-dropdownbutton.dx-state-disabled,
+.dx-switch.dx-state-disabled,
+.dx-datebox.dx-state-disabled,
+.dx-colorbox.dx-texteditor.dx-state-disabled {
+  background: #F8F7F7;
+  opacity: 1;
+}
+
+.dx-textarea.dx-texteditor.dx-state-disabled {
+  .dx-texteditor-container {
+    .dx-texteditor-input {
+      overflow: hidden;
+    }
+  }
+}
+
+.dx-state-disabled.dx-item.dx-box-item {
+  .dx-texteditor-input, .dx-texteditor {
+    background: #F8F7F7;
+    opacity: 1;
+  }
+}
+
+.dx-state-disabled .dx-checkbox-text {
+  opacity: 1;
+}
+
+.dx-toolbar-item {
+  .dx-dropdownbutton.dx-state-disabled,
+  .dx-button.dx-state-disabled {
+    opacity: .8 !important;
+    background: inherit !important;
+  }
+}
+
+.dx-popover-wrapper .dx-popup-content-scrollable {
+  padding: 7px;
+}
+
+.dx-overlay-wrapper .dx-overlay-content.dx-popup-flex-height > .dx-popup-title {
+  padding-bottom: 2px;
+  padding-top: 2px;
+}
+
+.dx-popup-title.dx-toolbar .dx-toolbar-item:last-child {
+  font-size: medium;
+}
+
+.dx-radiogroup .dx-radiobutton,
+.dx-radiogroup .dx-radiobutton-icon {
+  margin-bottom: 4px !important;
+}
+
+
+.accordion-view .dx-accordion-item-title {
+  color: var(--accent-color);
+}
+
+.dx-toolbar-after .dx-toolbar-item {
+  padding-inline-start: .5rem;
+}
+
+.dx-treelist-none-header .dx-treelist-header-panel {
+  border-bottom: none;
+}
+
+.dx-datagrid-search-text, .dx-treelist-search-text {
+  color: inherit;
+  background-color: #ffff00;
+}
+
+.dx-treelist-headers .dx-treelist-table .dx-row > td {
+  border-bottom: 3px solid $base-accent !important;
+}
+
+::ng-deep {
+  .primary-slider .ngx-slider .ngx-slider-selection {
+    background: $base-accent;
+  }
+
+  .primary-slider .ngx-slider .ngx-slider-pointer {
+    width: 8px;
+    height: 16px;
+    top: auto;
+    bottom: 0;
+    background-color: $base-accent;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+
+  .primary-slider .ngx-slider .ngx-slider-pointer:after {
+    display: none;
+  }
+
+  .primary-slider .ngx-slider .ngx-slider-bubble {
+    bottom: 14px;
+  }
+
+  .primary-slider .ngx-slider .ngx-slider-bubble.ngx-slider-limit {
+    font-weight: bold;
+    color: $base-accent;
+  }
+
+  .primary-slider .ngx-slider .ngx-slider-tick {
+    width: 1px;
+    height: 10px;
+    margin-left: 4px;
+    border-radius: 0;
+    background: $base-accent;
+    top: -1px;
+  }
+
+  .primary-slider .ngx-slider .ngx-slider-tick.ngx-slider-selected {
+    background: $base-accent;
+  }
+}
+
+::ng-deep .dx-gridbase-container > .dx-treelist-rowsview.dx-scrollable > .dx-scrollable-wrapper {
+  padding-right: 9px !important;
+}
+
+.dx-widget, .dx-box-item-content {
+  font-size: 13px !important;
+}
+
+.dx-popup-title {
+  color: var(--dark-text-color) !important;
+}
+
+.dx-checkbox-text {
+  -webkit-padding-start: 10px !important;
+  padding-inline-start: 10px !important;
+}
+
+.dx-popup-wrapper > .dx-overlay-content {
+  border: 1px solid rgba(0,0,0,.175) !important;
+  border-radius: 0.2rem !important;
+}
+
+.dx-dropdownbutton-popup-wrapper.dx-popup-wrapper .dx-overlay-content {
+  border-top-width: 1px !important;
+  min-width: 150px !important;
+}
+
+.dx-form-group-caption {
+  font-size: 16px !important;
+}
+
+.dx-form-group-with-caption > .dx-form-group-content {
+  padding-top: 5px !important;
+  margin-top: 0px !important;
+  border-top: 0 !important;
+  padding-bottom: 5px !important;
+}
+
+.dx-theme-generic-typography .dx-font-xs,
+.dx-theme-generic-typography h6,
+.dx-theme-generic-typography small {
+  font-weight: 500 !important;
+}
+
+.dx-widget {
+  font-size: 12px !important;
+}
+
+.dx-checkbox-text {
+  -webkit-padding-start: 10px !important;
+  padding-inline-start: 10px !important;
+}
+
+.dx-dropdownbutton-popup-wrapper.dx-popup-wrapper .dx-overlay-content {
+  border-top-width: 1px !important;
+}
+
+.dx-treelist-rowsview tr:not(.dx-row-focused) .dx-treelist-empty-space {
+  color: var(--bs-secondary) !important;
+}
+
+.dx-state-focused.dx-accordion-item {
+  border-color: #c9c7c7 !important;
+}
+
+.dx-treeview-toggle-item-visibility {
+  color: #4b5563 !important;
+}
+
+.dx-treelist-headers {
+  border-bottom: none !important;
+}
+
+.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active,
+.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused.dx-list-item-selected,
+.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused {
+  background-color: rgba(0, 0, 0, .07) !important;
+  color: #4b5563 !important;
+}
+
+.dx-treelist-headers {
+  color: var(--bs-dark);
+  font-weight: 500;
+}
+
+.dx-state-disabled .dx-widget, .dx-state-disabled.dx-widget {
+  opacity: 1 !important;
+}
+
+::ng-deep .dx-state-disabled .dx-button {
+  cursor: not-allowed !important;
+}
+
+::ng-deep .dx-widget .dx-button {
+  height: 36px !important;
+}
+
+::ng-deep div:has(#dxPopupWithoutPadding) {
+  padding: 0px !important;
+}
+
+::ng-deep .composite-selectbox-start .dx-selectbox {
+  border-start-end-radius: 0px !important;
+  border-end-end-radius: 0px !important;
+  border-right: none !important;
+}
+
+::ng-deep .composite-selectbox-end .dx-selectbox {
+  border-end-start-radius: 0px !important;
+  border-start-start-radius: 0px !important;
+}
+
+/*.dx-popover-arrow {
+ background-color:black
+}
+
+.dx-tooltip-wrapper.dx-popover-wrapper .dx-popover-arrow::after {
+  background-color: black;
+}*/
+
+.dx-tooltip-wrapper.dx-popover-wrapper .dx-popover-arrow::after {
+  border: 1px solid #000000;
+  background: #444040;
+}
+
+.dx-tooltip-wrapper .dx-overlay-content .dx-popup-content {
+  display: inline-block;
+  padding: 12px 17px;
+  font-size: .85em;
+  line-height: normal;
+  white-space: nowrap;
+  background-color: black;
+  border-color: black;
+  color: white;
+  border-radius: 15px;
+  background-color: #444040 !important;
+  border-color: #444040 !important;
+}
+
+.dx-tooltip-wrapper.dx-popover-wrapper .dx-popover-arrow:after {
+  border: 1px solid #444040;
+  background: #444040;
+}
+
+.dx-tooltip-wrapper .dx-overlay-content {
+  min-width: 34px;
+  min-height: 26px;
+  text-align: center;
+  line-height: 0;
+  border: 1px solid #444040;
+  background-color: #444040;
+  color: #4b5563;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
+  border-radius: 4px;
+  border-radius: 15px !important;
+}
+
+::ng-deep .dx-tooltip-wrapper {
+  z-index: 1515 !important
+}
+
+::ng-deep .team-scheduler tr.dx-scheduler-date-table-row,
+::ng-deep .team-scheduler .dx-scheduler-group-row .dx-scheduler-group-header {
+  max-height: 70px !important;
+}
+
+::ng-deep .team-scheduler .dx-scheduler-group-flex-container .dx-scheduler-group-row:last-child .dx-scheduler-group-header {
+  width: 200px;
+}
+
+::ng-deep .team-scheduler th.dx-scheduler-header-panel-cell.dx-scheduler-cell-sizes-horizontal {
+  max-width: 100px !important
+}
+
+
+::ng-deep .team-scheduler .dx-scheduler-timeline .dx-scheduler-date-table .dx-scheduler-date-table-cell {
+  flex: 1 1 auto;
+  width: 100px !important;
+}
+
+::ng-deep .team-scheduler tr.dx-scheduler-date-table-row:last-child,
+::ng-deep .team-scheduler .dx-scheduler-group-header:last-child {
+  max-height: 100% !important;
+}
+
+::ng-deep .team-scheduler tr.dx-scheduler-date-table-row:first-child,
+::ng-deep .team-scheduler .dx-scheduler-group-header:first-child {
+  background-color: blanchedalmond;
+}
+
+::ng-deep .team-scheduler .dx-scheduler-timeline .dx-scheduler-appointment {
+  height: auto !important;
+}
+
+::ng-deep .team-scheduler.dx-rtl .dx-scheduler-last-group-cell {
+  border-left: none !important;
+}
+
+::ng-deep .button-boeder-none .dx-button {
+  border-style: none;
+}
+
+.dx-field-item-custom-label-content {
+  font-size: var(--font-size-12);
+  color: #000;
+  margin-top: .2rem;
+}
+
+.dx-radiogroup.dx-state-disabled, .dx-button.dx-state-disabled {
+  opacity: .75 !important;
+}
+
+::ng-deep .dx-searchbox .dx-icon-search::before {
+  color: #e67e0f
+}
+
+::ng-deep .dx-popup-title.dx-toolbar .dx-toolbar-item:last-child {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+::ng-deep .dx-field-item-custom-label-content {
+  font-size: 0.875rem;
+  color: #333;
+  font-weight: 500;
+}
+
+::ng-deep .dx-toolbar.dx-widget.dx-visibility-change-handler.dx-collection.dx-popup-title {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+::ng-deep .dx-button {
+  font-size: var(--font-size-14) !important;
+  font-weight: 500 !important;
+}
+
+::ng-deep .dx-popup-title.dx-toolbar .dx-toolbar-label {
+  max-width: 100% !important;
+}
+
+::ng-deep .dx-texteditor-input-container .dx-texteditor-input {
+  font-size: 1.1em;
+}
+
+::ng-deep .more-button .dx-button-text {
+  font-size: var(--font-size-13) !important;
+}
+
+::ng-deep .dx-calendar-cell.dx-calendar-today span {
+  border: none !important;
+}
+
+.custom-switch-dark .form-check-input {
+  background-color: var(--bs-gray-dark);
+  border-color: var(--bs-gray-dark);
+}
+
+.custom-switch-dark .form-check-input:checked {
+  background-color: var(--bs-primary) !important;
+  border-color: var(--bs-primary);
+}
+
+::ng-deep .dx-overlay-content.dx-popup-normal.dx-resizable.dx-popup-inherit-height {
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+.custom-switch-dark .form-check-input:focus {
+  border-color: var(--dark-text-color);
+  box-shadow: none;
+}
+
+.custom-switch-dark .form-check-input:focus {
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+  border-color: var(--bs-gray-dark);
+}
+
+.custom-switch-dark .form-check-input {
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
+}
+
+.custom-switch-dark .form-check-input:checked:focus {
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
+}
+
+::ng-deep .dx-toolbar .dx-toolbar-after {
+  margin-right: 12px !important;
+}
+
+
+::ng-deep .dx-state-disabled .dx-button {
+  background: #f8f7f7 !important;
+  pointer-events: auto !important;
+  cursor: not-allowed !important;
+}
+
+::ng-deep .dx-datebox-wrapper-calendar .dx-calendar {
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-bottom: 0px;
+}
+
+.dx-scrollable-content {
+  width: 100%;
+}
+
+::ng-deep .dx-texteditor.dx-state-focused.dx-editor-filled {
+  border-color: transparent !important;
+}
+/*
+
+:ng-deep .dx-autocomplete .dx-texteditor-buttons-container .dx-clear-button-area {
+  background: #6d5555e8 !important;
+  border-top-right-radius: 5px !important;
+  border-bottom-right-radius: 5px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+*/
+::ng-deep .dx-autocomplete .dx-texteditor-input-container .dx-placeholder {
+  color: white !important;
+}
+
+.dx-popup-content:not(.dx-popup-content-scrollable) .dx-calendar {
+  margin: 5px !important;
+}
+
+.dx-calendar-body .dx-calendar-views-wrapper .dx-widget {
+  padding: 0px 8px 0 10px;
+}
+
+.dx-daterangebox .dx-icon.dx-icon-to::before {
+  color: var(--bs-bg-dark-gray);
+}
+
+.dx-selectbox-popup-wrapper .dx-scrollable-container {
+  overflow-y: scroll !important;
+}
+
+.dx-button i.dx-icon.dx-icon-collapse {
+  transform: rotate(45deg);
+  font-size: 22px !important;
+}
+
+.dx-scheduler-timeline-month .dx-scheduler-header-panel-cell:not(.dx-scheduler-header-panel-week-cell) {
+  display: flex;
+  flex-flow: wrap;
+  text-wrap: auto;
+  font-size: 9px;
+  font-weight: 600;
+}
+
+.custom-date-range-popup {
+  z-index: 16000 !important;
+}
+
+.dx-overlay-wrapper.dx-overlay-shader.dx-loadpanel-wrapper {
+  z-index: 20000 !important;
+}
+
+.custom-date-range-popup .dx-calendar-other-month {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+
+.dx-toast-wrapper {
+  z-index: 10000 !important;
+}
+
+.dx-datagrid .dx-row .dx-header-row {
+  background: #F2F2F2 !important;
+}
+
+.dx-datagrid .dx-datagrid-rowsview .dx-data-row td.dx-pointer-events-none {
+  border-left: 1px solid #00000019 !important;
+}
+
+.dx-pager .dx-page-sizes .dx-selection, .dx-pager .dx-pages .dx-selection {
+  border-radius: 50%;
+}
+
+.dx-datagrid-borders > .dx-datagrid-pager {
+  padding-top: 15px !important;
+}
+
+.dx-gridbase-a11y-status-container {
+  display: none !important;
+}
+
+.dx-datagrid-group-opened, .dx-datagrid-group-closed {
+  color: #000000 !important;
+}
+
+.dx-gridbase-container > .dx-datagrid-rowsview.dx-scrollable {
+  padding-bottom: 3px !important;
+  background: #FFF;
+}
+
+.dx-datagrid-header-panel .dx-toolbar .dx-toolbar-after {
+  margin-right: 0 !important;
+}
+
+.dx-datagrid-header-panel .dx-toolbar .dx-toolbar-after {
+  -webkit-padding-start: 0 !important;
+  padding-inline-start: 0 !important;
+}
+
+.dx-datagrid-filter-row .dx-menu-item-content .dx-icon,
+.dx-datagrid-container.dx-filter-menu .dx-menu-item-has-icon .dx-icon,
+.dx-datagrid.dx-filter-menu .dx-menu-item-has-icon .dx-icon {
+  color: #ADB5BD !important;
+}
+
+.dx-datagrid-rowsview .dx-datagrid-table .dx-row.dx-freespace-row > td {
+  border: none !important;
+}
+
+.dx-datagrid-summary-item {
+  color: #333 !important;
+}
+
+.dx-datagrid.dx-filter-menu .dx-menu-item-content .dx-icon {
+  font-size: 12px;
+}
+
+.dx-gridbase-container > .dx-datagrid-rowsview.dx-scrollable {
+  min-height: 100px;
+}
+
+.dx-datagrid .dx-datagrid-total-footer {
+  background: #f9f9f9 !important;
+  border-radius: 2px;
+}
+
+.dx-datagrid .dx-datagrid-total-footer tr {
+  background: #f9f9f9 !important;
+}
+
+.dx-datagrid-total-footer > .dx-datagrid-content {
+  padding-top: 3px !important;
+  padding-bottom: 3px !important;
+}
+
+.dx-datagrid-total-footer td {
+  border: none !important;
+}
+
+.dx-datagrid-content .dx-datagrid-table .dx-row > td,
+.dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
+  vertical-align: middle;
+}
+
+td.dx-group-cell {
+  position: sticky !important;
+  left: 30px !important;
+  z-index: 100 !important;
+  background-color: #f5f5f5 !important;
+}
+
+.dx-datagrid tr.dx-row.dx-column-lines.dx-header-row > td {
+  background: #f9f9f9 !important;
+  font-weight: 600 !important;
+  color: #333333;
+}
+
+.dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none,
+.dx-datagrid .dx-datagrid-rowsview .dx-data-row td.dx-pointer-events-none,
+.dx-datagrid .dx-datagrid-rowsview .dx-freespace-row td.dx-pointer-events-none,
+.dx-datagrid .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none,
+.dx-datagrid .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none {
+  border-left: 1px solid #00000014 !important;
+}
+
+.dx-datagrid tr.dx-row.dx-column-lines.dx-header-row,
+.dx-datagrid .dx-column-lines > td {
+  border: 1px solid #00000014 !important;
+}
+
+.dx-datagrid tr.dx-row.dx-column-lines.dx-header-row > td,
+.dx-datagrid-rowsview .dx-row.dx-group-row td {
+  border: 1px solid #00000014 !important;
+}
+
+.dx-datagrid .dx-row-lines .dx-column-lines > td {
+  border: 1px solid #00000014 !important;
+}
+
+.dx-datagrid tr.dx-row.dx-column-lines.dx-datagrid-filter-row > td,
+.dx-datagrid tr.dx-row.dx-column-lines.dx-datagrid-filter-row > td.dx-editor-cell {
+  border-bottom: none !important;
+}
+
+.dx-datagrid tr.dx-data-row.dx-column-lines > td {
+  white-space: nowrap;
+}
+
+.dx-datagrid-borders > .dx-datagrid-headers,
+.dx-datagrid-borders > .dx-datagrid-rowsview,
+.dx-datagrid-borders > .dx-datagrid-total-footer {
+  border: 1px solid #00000014 !important;
+}
+
+.dx-datagrid-header-panel .dx-toolbar-text-auto-hide .dx-button .dx-button-text {
+  display: flex !important;
+  padding-right: 2px;
+  padding-left: 2px;
+}
+
+::ng-deep .dx-textbox.dx-texteditor {
+  min-height: 37px !important;
+}
+
+::ng-deep .dx-button.dx-button-mode-text.dx-button-normal.dx-button-has-icon {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+::ng-deep .dx-datagrid-export-menu .dx-overlay-content.dx-popup-normal.dx-resizable.dx-popup-inherit-height {
+  border: 1px solid #d5d5d5 !important;
+}
+
+::ng-deep .text-danger .dx-texteditor-input {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
+}
+
+.dxc-legend {
+  transform: translateY(79px) !important;
+}
+
+.dx-rtl .dxc-legend {
+  transform: translate(-315px, 79px) !important;
+}
+
+g.dxc-series-group {
+  transform: translate(72px,16px);
+}
+.dx-rtl .dxc-series-group {
+  transform: translate(10px,19px)
+}
+
+.dxc-hole-template {
+  transform: translate(19px, 64px) !important
+}
+::ng-deep #pie-mobile .dxc-series-group {
+  transform: translate(-100px, -16px);
+}
+::ng-deep #pie-mobile .dxc-legend {
+  transform: translate(-180px,49px) !important;
+}
+::ng-deep #pie-mobile.dx-rtl .dxc-legend {
+  transform: translate(-10px, 49px) !important;
+}
+::ng-deep #pie-mobile.dx-rtl .dxc-series-group {
+  transform: translate(75px,-16px);
+}
+
+.dx-datagrid-action.circle-header .dx-datagrid-text-content {
+  text-align: center;
+  display: inline-block;
+  border-radius: 50%;
+  border: 1px solid #249EA0;
+  padding: .5rem !important;
+}
+
+.dx-datagrid-action.circle-header-danger .dx-datagrid-text-content {
+  text-align: center;
+  display: inline-block;
+  border-radius: 50%;
+  border: 1px solid #B71C1C;
+  padding: .5rem !important;
+}
+::ng-deep .custom-calendar .dx-calendar-cell {
+  min-width: 65px;
+  min-height: 60px;
+  font-size: 14px;
+}
+
+::ng-deep .custom-calendar .dx-calendar {
+  width: auto;
+  height: 470px;
+}
+
+::ng-deep .custom-calendar .dx-calendar-cell span {
+  min-width: 65px;
+  min-height: 60px;
+  background-color: #F8F7F7;
+  color: black
+}
+
+::ng-deep .custom-calendar tr {
+  height: 60px;
+}
+
+.custom-calendar .dx-calendar-cell-in-range:before,
+.custom-calendar .dx-calendar-cell-in-range:after,
+.custom-calendar .dx-calendar-cell-range-hover:after,
+.custom-calendar .dx-calendar-cell-range-hover.dx-calendar-cell-range-hover-start:after {
+  min-height: 60px;
+}
+
+.custom-calendar .dx-calendar-cell-in-range:before,
+.custom-calendar .dx-calendar-cell-in-range:after {
+  z-index: 100;
+  min-width: 81px;
+}
+
+.custom-calendar .dx-calendar-cell-in-range.dx-calendar-cell-end-in-row:before {
+  min-width: 85px !important;
+  right: auto;
+}
+
+.custom-calendar .dx-calendar-cell-start-in-row.dx-calendar-range-start-date:after,
+.custom-calendar .dx-calendar-other-month.dx-calendar-range-start-date:after {
+  width: 32px !important;
+  right: 0;
+  left: auto;
+}
+
+.custom-calendar .dx-calendar-cell-end-in-row.dx-calendar-range-end-date:before,
+.custom-calendar .dx-calendar-range-end-date:after,
+.custom-calendar .dx-calendar-other-month.dx-calendar-cell-in-range.dx-calendar-cell-start-in-row:before {
+  width: 32px !important;
+}
+
+.custom-calendar .dx-calendar-range-end-date:after {
+  left: 0;
+  right: auto;
+}
+
+.custom-calendar .dx-calendar-other-month.dx-calendar-cell-in-range.dx-calendar-cell-start-in-row:before {
+  left: auto;
+  right: 0;
+}
+
+.custom-calendar .dx-calendar-range-end-date.dx-calendar-cell-end-in-row:after {
+  display: none !important;
+}
+
+.calendar-cell-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 2px;
+}
+
+.holiday-label {
+  font-size: 8px;
+  text-align: center;
+}
+
+::ng-deep .custom-calendar .dx-calendar-selected-date::before,
+::ng-deep .custom-calendar .dx-calendar-selected-date::after {
+  min-width: 65px !important;
+  min-height: 60px !important;
+}
+
+::ng-deep .custom-calendar .dx-calendar-cell.dx-calendar-selected-date.dx-calendar-range-start-date::before,
+::ng-deep .custom-calendar .dx-calendar-cell.dx-calendar-selected-date.dx-calendar-range-end-date::before {
+  min-width: 45px !important;
+}
+
+::ng-deep .custom-calendar .dx-calendar-cell-in-range.dx-calendar-cell-start-in-row.dx-calendar-cell-end:before,
+::ng-deep .custom-calendar .dx-calendar-cell-in-range.dx-calendar-cell-start-in-row.dx-calendar-cell-in-range-date:before {
+  width: 2em;
+  inset-inline-start: calc(50% - 2em);
+  inset-inline-end: auto;
+}
+
+::ng-deep .custom-calendar .dx-calendar-selected-date.dx-calendar-cell-in-range.dx-calendar-cell-start-in-row.dx-calendar-cell-end:before,
+.dx-calendar-cell-in-range.dx-calendar-cell-start-in-row.dx-calendar-range-end-date:before {
+  inset-inline-start: calc(50% - 1.2em);
+}
+
+::ng-deep .custom-calendar .dx-calendar-cell.dx-calendar-other-view.dx-calendar-other-month {
+  visibility: hidden !important;
+}
+
+::ng-deep .custom-calendar .dx-calendar-cell-range-hover.dx-calendar-cell-end-in-row.dx-calendar-cell-range-hover-start:after {
+  inset-inline-start: calc(50% - 2em);
+}
+
+::ng-deep .custom-calendar .dx-widget .dx-button {
+  border: none;
+}
+
+::ng-deep .custom-calendar .dx-calendar-navigator {
+  display: block;
+  text-align: center;
+}
+
+::ng-deep .custom-calendar .dx-button-mode-outlined .dx-icon {
+  color: var(--bs-primary);
+}
+
+::ng-deep .custom-calendar .dx-widget.dx-button.dx-button-mode-outlined.dx-button-normal.dx-button-has-text.dx-calendar-caption-button {
+  width: 215px;
+  pointer-events: none;
+}
+
+::ng-deep .custom-calendar .dx-calendar-cell.dx-calendar-cell-start-in-row.dx-calendar-cell-end.dx-calendar-cell-in-range:before {
+  width: 55px;
+}
+::ng-deep .custom-calendar .dx-calendar-cell.dx-calendar-contoured-date span {
+  box-shadow:none
+}
+.dx-rtl .custom-calendar .dx-calendar-cell-in-range.dx-calendar-cell-end-in-row:before {
+  min-width: 82px !important;
+}
+.dx-rtl .custom-calendar .dx-calendar-cell.dx-calendar-selected-date.dx-calendar-range-end-date:before {
+  min-width: 74px !important;
+  right: 0
+}
+.dx-rtl .custom-calendar .dx-calendar-cell.dx-calendar-selected-date.dx-calendar-range-start-date:before {
+  right: auto
+}
+
+.dx-datagrid-focus-overlay {
+  border: 0px !important;
+}
+
+#overtimeDataGrid .dx-datagrid-revert-tooltip {
+  display: none;
+}
+
+#overtimeDataGrid .dx-datagrid-summary-item {
+  color: #333;
+  font-size: var(--font-size-12);
+  font-style: normal;
+  font-weight: 600;
+  background-color: transparent !important;
+}
+#overtimeDataGrid .dx-cell-modified {
+  background-color: transparent !important;
+}
+::ng-deep .dx-textbox.dx-texteditor.grid-cell-text-box {
+  min-height: unset !important;
+  max-height: 20px !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none !important;
+  border-radius: 0 !important;
+}
+
+::ng-deep .dx-datagrid-rowsview .dx-row.batch-grid-cell-text {
+    height: 55px !important;
+}
+
+
+::ng-deep .dx-treeview-item-without-checkbox.dx-state-focused > .dx-treeview-item {
+  background-color: #F182061A;
+  color: #333333;
+}
+
+#overtimeDataGrid {
+  background-color: transparent !important;
+  border: 1px solid #E0E0E0C7 !important;
+  box-shadow: 0 4px 4px #00000040 !important;
+  border-radius: 5px !important;
+}
+#overtimeDataGrid .dx-datagrid-rowsview .dx-row.dx-group-row {
+  font-weight: 600 !important;
+}
+#overtimeDataGrid .dx-row .dx-data-row,
+#overtimeDataGrid .dx-row.dx-group-row {
+  background-color: transparent !important;
+  border: none !important;
+}
+
+#overtimeDataGrid .dx-group-row td, #overtimeDataGrid td.dx-group-cell {
+  background-color: transparent !important;
+  border: none !important;
+  border-bottom: 1px solid #000000 !important;
+  border-top: 1px solid #E0E0E0C7 !important;
+}
+#overtimeDataGrid .dx-datagrid {
+    padding-left: 8px;
+    padding-right: 8px;
+}
+#overtimeDataGrid .dx-group-row td > div {
+  font-weight: 600 !important;
+}
+
+#overtimeDataGrid .dx-datagrid-rowsview .dx-datagrid-content {
+  /*border-bottom: 1px solid #E0E0E0C7 !important;*/
+}
+
+
+#overtimeDataGrid .dx-datagrid .dx-header-row .circle-header div.dx-datagrid-text-content {
+  text-align: center;
+  display: inline-block;
+  border-radius: 50%;
+  border: 1px solid #249EA0;
+  padding: .5rem !important;
+}
+
+#overtimeDataGrid .dx-datagrid .dx-header-row .circle-header-danger div.dx-datagrid-text-content {
+  text-align: center;
+  display: inline-block;
+  border-radius: 50%;
+  border: 1px solid #B71C1C;
+  padding: .5rem !important;
+}
+#overtimeDataGrid .dx-datagrid .dx-datagrid-headers .dx-row td,
+#overtimeDataGrid .dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none,
+#overtimeDataGrid .dx-datagrid-rowsview .dx-row {
+  border: inherit !important;
+  border-bottom: 1px solid #d5d5d5 !important;
+}
+
+#overtimeDataGrid .dx-datagrid .dx-datagrid-headers .dx-row td,
+#overtimeDataGrid .dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none {
+  border-bottom: none !important;
+}
+
+#overtimeDataGrid .dx-datagrid .dx-datagrid-content-fixed .dx-row td.dx-pointer-events-none {
+  border-left: none !important;
+  border-right: none !important;
+  font-size: 12px !important;
+}
+#overtimeDataGrid .dx-datagrid-total-footer {
+
+  border-top:none; 
+}
+.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-edit-with-icons .dx-link {
+    font-size: 15px;
+}
+
+dx-button.legend-tab span.dx-button-text {
+  font-size: 11px;
+}
+
+#overtimeDataGrid .dx-datagrid-summary-item.dx-datagrid-text-content.dx-datagrid-group-text-content {
+  border: none !important;
+}
+
+::ng-deep .custom-popup-wrapper .dx-popup-content {
+  padding: 0px !important;
+}
+
+#overtimeDataGrid .dx-datagrid-table .dx-row .dx-command-expand {
+    width: 0px !important;
+    min-width: 0px !important;
+}