@obaidazoqili/skysoftware-styles 1.0.0

package/styles/styles.rtl.css

@@ -0,0 +1,1930 @@
+/* You can add global styles to this file, and also import other style files */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  :root {
+    font-family: Inter, sans-serif, Arial !important;
+    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
+  }
+  
+  @supports (font-variation-settings: normal) {
+    :root {
+      font-family: InterVariable, sans-serif;
+    }
+  }
+  /*
+  @font-face {
+    font-family: 'Inter';
+    src: url(../Fonts//inter//Inter-VariableFont_opsz,wght.ttf) format('truetype');
+    font-weight: normal;
+    font-style: normal;
+  }
+  */
+  html, body {
+    /*font-family: "Inter", sans-serif, Arial !important;*/
+    min-height: 100%;
+    min-height: 100%;
+    height: 100%;
+    overflow: auto;
+    overflow-x: hidden;
+  }
+  
+  :root {
+    --accent-color: #249EA0;
+    --body-color: #fff;
+    --sidebar-color: #FFF;
+    --primary-color: #e67e0f;
+    --primary-color-light: #ce710d1a;
+    --toggle-color: #DDD;
+    --text-color: rgb(107, 114, 128, 1);
+    --tran-02: all 0.2s ease;
+    --tran-03: all 0.3s ease;
+    --tran-04: all 0.4s ease;
+    --tran-05: all 0.5s ease;
+    --bs-primary: #e67e0f;
+    --bs-primary-rgb: 230, 126, 15;
+    --bs-white: #fff;
+    --bs-gray: #ECECEC;
+    --bs-gray-dark: #9A9A9A;
+    /*--bs-secondary: rgba(107, 114, 128,1);*/
+    --bs-success: #198750;
+    --bs-info: #41ABFE;
+    --bs-danger: #cf223b;
+    --bs-light: #a0a0a0;
+    --bs-dark: #000;
+    --bs-warning: #ffc10740;
+    --bs-warning-rgb: 255, 193, 7;
+    --bs-success-rgb: 25, 135, 80;
+    --bs-info-rgb: 65, 171, 254;
+    --bs-danger-rgb: 207, 34, 59;
+    --bs-light-rgb: 160, 160, 160;
+    --bs-dark-rgb: 0, 0, 0;
+    --bs-link-color: #e67e0f;
+    --bs-link-color-rgb: 230, 126, 15;
+    --bs-link-decoration: underline;
+    --bs-link-hover-color: #bb660c;
+    --bs-link-hover-color-rgb: 187, 102, 12;
+    --bs-primary-text-emphasis: #e67e0f;
+    --bs-light-text-emphasis: #f8f9fa;
+    --bs-dark-text-emphasis: #000;
+    --bs-form-valid-color: #34d399;
+    --bs-form-valid-border-color: #34d399;
+    --bs-form-invalid-color: #cf223b;
+    --bs-form-invalid-border-color: #a81c30;
+    --bs-border-radius: 0.2rem;
+    --bs-primary-bg-subtle: #e67e0f;
+    --bs-primary-border-subtle: #e67e0f;
+    --bs-dark-bg-subtle: #000;
+    --bs-dark-border-subtle: #000;
+    --bs-xs-shadow-box: 0 1px 3px hsla(0,0%,0%,.2);
+    --bs-sm-shadow-box: 0 4px 6px hsla(0,0%,0%,.2);
+    --bs-md-shadow-box: 0 5px 15px hsla(0,0%,0%,.2);
+    --bs-l-shadow-box: 0 10px 24px hsla(0,0%,0%,.2);
+    --bs-xl-shadow-box: 0 15px 35px hsla(0,0%,0%,.2);
+    --bs-overly-background-color: hsla(0,0%,0%,.55);
+    --bs-text-box-shadow: 0 0 50px hsla(0,0%,0%, .4);
+    --tooltip-color: var(--bs-white);
+    --tooltip-bg: var(--bs-dark);
+    --bs-light-primary: #ce710d1a;
+    --bs-light-primary-bg: #F4EDE3;
+    --bs-light-primary-bg-subtle: #ce710d1a;
+    --bs-light-primary-border-subtle: #ce710d1a;
+    --mdc-filled-text-field-caret-color: #e67e0f;
+    --mdc-filled-text-field-focus-active-indicator-color: #e67e0f;
+    --mdc-filled-text-field-focus-label-text-color: rgba(230, 126, 15, 0.87);
+    --mdc-outlined-text-field-caret-color: #e67e0f;
+    --mdc-outlined-text-field-focus-outline-color: #e67e0f;
+    --mdc-outlined-text-field-focus-label-text-color: rgba(230, 126, 15, 0.87);
+    --mat-form-field-focus-select-arrow-color: rgba(230, 126, 15, 0.87);
+    --mat-option-selected-state-label-text-color: #e67e0f;
+    --mat-stepper-header-selected-state-icon-background-color: #e67e0f;
+    --mat-stepper-header-done-state-icon-background-color: #e67e0f;
+    --mat-stepper-header-edit-state-icon-background-color: #e67e0f;
+    --mat-datepicker-calendar-date-selected-state-background-color: #e67e0f;
+    --mat-datepicker-toggle-active-state-icon-color: #e67e0f;
+    --mat-badge-background-color: #e67e0f;
+    --mdc-circular-progress-active-indicator-color: #e67e0f;
+    --mdc-slider-handle-color: #e67e0f;
+    --mdc-slider-focus-handle-color: #e67e0f;
+    --mdc-slider-hover-handle-color: #e67e0f;
+    --mdc-slider-active-track-color: #e67e0f;
+    --mdc-slider-inactive-track-color: #e67e0f;
+    --mdc-slider-with-tick-marks-inactive-container-color: #e67e0f;
+    --mat-slider-ripple-color: #e67e0f;
+    --mdc-switch-selected-focus-state-layer-color: #bb660c;
+    --mdc-switch-selected-handle-color: #bb660c;
+    --mdc-switch-selected-hover-state-layer-color: #bb660c;
+    --mdc-switch-selected-pressed-state-layer-color: #3949ab;
+    --mdc-switch-selected-focus-handle-color: #bb660c;
+    --mdc-switch-selected-hover-handle-color: #bb660c;
+    --mdc-switch-selected-pressed-handle-color: #bb660c;
+    --mdc-switch-selected-focus-track-color: #bb660c;
+    --mdc-switch-selected-hover-track-color: #bb660c;
+    --mdc-switch-selected-pressed-track-color: #bb660c;
+    --mdc-switch-selected-track-color: #bb660c;
+    --mat-select-focused-arrow-color: rgba(230, 126, 15, 0.87);
+    --mat-paginator-container-text-color: #6c757d;
+    --bs-dark-warning: #FFC107;
+    --mat-paginator-container-text-font: "Inter", sans-serif, Arial !important;
+    --bs-light-primary-hover: #ce710d4d;
+    --mdc-chip-label-text-color: rgba(75, 85, 99,1);
+    --bs-box-shadow-xs: 0 3.2px 7.2px 0 rgba(0, 0, 0, .132), 0 .6px 1.8px 0 rgba(0, 0, 0, .108);
+    --bs-bg-dark-gray: #4D4D4D;
+    --bs-light-gray: #F8F7F7;
+    --dark-text-color: #000000e6;
+    --sidebar-color: #eaeaea;
+  }
+  
+  body {
+    height: 100vh;
+    background: var(--body-color);
+    overflow-x: hidden;
+  }
+  
+  .layout-header {
+    z-index: 1501;
+  }
+  
+  .sidebar-menu {
+    background: var(--sidebar-color) !important;
+    white-space: nowrap;
+    transition: all 0.5s ease;
+  }
+  
+  .badge-outline-warning {
+    --bs-bg-opacity: 0.25;
+    background-color: var(--bs-warning) !important;
+    border: 1px solid var(--bs-dark-warning);
+    color: var(--dark-text-color);
+  }
+  
+  .bg-progress {
+    --bs-bg-opacity: 1;
+    background-color: #f3bc50 !important;
+    color: var(--bs-white);
+  }
+  
+  .text-dark-gray {
+    color: #4D4D4D;
+  }
+  
+  .sidebar-menu-container {
+    min-height: 100%;
+    display: flex;
+    flex: 1;
+  }
+  
+  header .topbar-header {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  }
+  
+  .rounded-image-container {
+    overflow: hidden;
+    border-radius: 50%;
+    height: 30px;
+    width: 30px;
+    margin: 0 4px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+  }
+  
+  .cursor-pointer, .active-link {
+    cursor: pointer;
+    text-decoration: none;
+  }
+  
+  a.cursor-pointer:hover {
+    color: var(--bs-link-hover-color);
+  }
+  
+  a.active-link:hover {
+    background: rgba(0, 0, 0, .04);
+  }
+  
+  .text-ellipsis-three-line {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3; 
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .text-ellipsis-two-line {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2; 
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-height: 31px !important
+  }
+  
+  .text-ellipsis-one-line {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    line-clamp: 1; 
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-height: 16px !important
+  }
+  
+  blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
+    margin: 0 !important;
+  }
+  
+  .card-min-height {
+    height: 180px;
+  }
+  
+  .xsmall {
+    font-size: .77em;
+  }
+  
+  .card-height {
+    max-height: 400px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  
+  .sidebar-sub-text {
+    font-size: 1em;
+  }
+  
+    .sidebar-sub-text:hover {
+      border-left: 2px solid var(--bs-primary);
+    }
+  
+  .row div.card:hover {
+    box-shadow: 0 .125rem .25rem rgba(0,0,0, .075);
+  }
+  
+  .toolbar-title {
+    font-size: 1.25rem;
+    font-weight: 500;
+    color: var(--dark-text-color) !important;
+  }
+  
+  .main-toolbar {
+    position: sticky;
+    top: 101px;
+    background-color: white;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    padding-left: .8rem;
+    padding-right: .8rem;
+  }
+  
+  .main-toolbar-z-index {
+    z-index: 1000;
+  }
+  
+  .input-group-text {
+    border: 1px solid rgba(126, 177, 220, 1);
+    border-right: none;
+  }
+  
+  .topbar-header input {
+    width: 20rem !important;
+    outline: none;
+    border: 1px solid rgba(126, 177, 220, 1);
+    border-left: none;
+    border-radius: 5px;
+    padding: 5px 5px;
+    margin-right: 10px;
+    font-size: 14px;
+  }
+  
+  
+  /* Old Styles */
+  .dropdown-menu {
+    --bs-dropdown-link-active-color: #4b5563;
+    --bs-dropdown-link-active-bg: rgba(0, 0, 0, .07);
+    --bs-dropdown-link-hover-color: #4b5563;
+    --bs-dropdown-link-hover-bg: rgba(0, 0, 0, .07);
+  }
+  
+  .dropdown-item:focus, .dropdown-item:hover {
+    color: #4b5563 !important;
+  }
+  
+  .progress, .progress-stacked {
+    --bs-progress-bar-bg: var(--bs-primary);
+  }
+  
+  .btn-primary {
+    color: var(--bs-white) !important;
+    --bs-btn-bg: var(--bs-primary);
+    --bs-btn-border-color: var(--bs-primary);
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #bb660c;
+    --bs-btn-hover-border-color: #bb660c;
+    --bs-btn-focus-shadow-rgb: 49, 132, 253;
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #bb660c;
+    --bs-btn-active-border-color: #bb660c;
+    --bs-btn-disabled-color: #fff;
+    --bs-btn-disabled-bg: var(--bs-primary);
+    --bs-btn-disabled-border-color: var(--bs-primary);
+  }
+  
+  .btn-light-primary {
+    color: var(--primary-color);
+    --bs-btn-bg: var(--primary-color-light);
+    --bs-btn-border-color: var(--primary-color-light);
+    --bs-btn-hover-color: #fff !important; /* ad5f0b var(--primary-color-light)*/
+    --bs-btn-hover-bg: var(--bs-primary); /* #bb660cde */
+    --bs-btn-hover-border-color: var(--bs-primary);
+    --bs-btn-focus-shadow-rgb: rgb(194, 103, 6);
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: var(--bs-primary) !important;
+    --bs-btn-active-border-color: var(--bs-primary);
+    --bs-btn-disabled-color: #fff;
+    --bs-btn-disabled-bg: var(--bs-light-primary-hover);
+    --bs-btn-disabled-border-color: var(--bs-light-primary-hover);
+  }
+  
+  a {
+    color: var(--bs-primary) !important;
+  }
+  
+    a:hover {
+      color: var(--bs-link-hover-color) !important;
+    }
+  
+  .btn-outline-light-primary {
+    --bs-btn-color: var(--bs-primary) !important;
+    --bs-btn-border-color: var(--bs-primary);
+    --bs-btn-hover-bg: var(--bs-light-primary);
+    --bs-btn-hover-border-color: var(--bs-light-primary);
+    --bs-btn-focus-shadow-rgb: 13, 110, 253;
+    --bs-btn-active-bg: var(--bs-light-primary);
+    --bs-btn-active-border-color: var(--bs-light-primary);
+    --bs-btn-disabled-color: var(--bs-light-primary);
+    --bs-btn-disabled-border-color: var(--bs-light-primary);
+    --bs-btn-hover-color: var(--bs-primary);
+  }
+  
+  .btn-light {
+    --bs-btn-bg: #f9fafb;
+    --bs-btn-border-color: #dcdcdc;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #e6e7e7;
+    --bs-btn-hover-border-color: #dcdcdc;
+    --bs-btn-focus-shadow-rgb: 130, 138, 145;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #e6e7e7;
+    --bs-btn-active-border-color: #dcdcdc;
+    --bs-btn-disabled-color: #fff;
+    --bs-btn-disabled-bg: #e6e7e7;
+    --bs-btn-disabled-border-color: #dcdcdc;
+  }
+  
+  .btn-outline-primary {
+    --bs-btn-bg: #FFF;
+    --bs-btn-color: var(--bs-primary);
+    --bs-btn-border-color: var(--bs-primary);
+    --bs-btn-hover-bg: var(--bs-primary);
+    --bs-btn-hover-border-color: var(--bs-primary);
+    --bs-btn-focus-shadow-rgb: 13, 110, 253;
+    --bs-btn-active-bg: var(--bs-link-hover-color);
+    --bs-btn-active-border-color: var(--bs-link-hover-color);
+    --bs-btn-disabled-color: var(--bs-primary);
+    --bs-btn-disabled-border-color: var(--bs-primary);
+    --bs-btn-hover-color: var(--bs-white) !important;
+  }
+  
+  .btn-outline-light {
+    --bs-btn-color: #000;
+    --bs-btn-border-color: #dcdcdc;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #e6e7e7;
+    --bs-btn-hover-border-color: #dcdcdc;
+    --bs-btn-focus-shadow-rgb: 248, 249, 250;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #e6e7e7;
+    --bs-btn-active-border-color: #dcdcdc;
+    --bs-btn-disabled-color: #e6e7e7;
+    --bs-btn-disabled-border-color: #dcdcdc;
+  }
+  
+  .alert {
+    --bs-alert-padding-x: 0.75rem;
+    --bs-alert-padding-y: 0.75rem;
+    --bs-alert-margin-bottom: 0.75rem;
+  }
+  
+  .alert-primary, .alert-dark {
+    --bs-alert-color: var(--bs-white);
+    --bs-alert-link-color: var(--bs-white);
+  }
+  
+  .alert-light, .alert-secondary {
+    --bs-alert-color: var(--bs-dark);
+    --bs-alert-link-color: var(--bs-dark);
+  }
+  
+  .alert-light-primary {
+    --bs-alert-color: var(--accent-color);
+    --bs-alert-bg: #249ea01a;
+    --bs-alert-border-color: var(--accent-color);
+    --bs-alert-link-color: var(--accent-color);
+  }
+  
+  .alert-dismissible .btn-close {
+    font-size: smaller;
+  }
+  
+  a.alert-link {
+    color: inherit;
+  }
+  
+  .nav-pills {
+    --bs-nav-pills-link-active-bg: var(--bs-primary);
+  }
+  
+  .menu-large {
+    position: static !important;
+  }
+  
+  .overly-menu {
+    padding: 10px 5px;
+    width: 94%;
+    margin-top: 10px;
+    height: 90vh;
+    left: 0;
+    border: 1px solid var(--bs-primary);
+    animation: growDown 1000ms ease-in-out forwards;
+    transform-origin: top center
+  }
+  
+  @keyframes growDown {
+    0% {
+      transform: scaleY(0)
+    }
+  
+    80% {
+      transform: scaleY(1.1)
+    }
+  
+    100% {
+      transform: scaleY(1)
+    }
+  }
+  
+  .text-box-shadow {
+    text-shadow: var(--bs-text-box-shadow);
+  }
+  
+  @media (max-width: 768px) {
+    .overly-menu {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  
+      .overly-menu > li {
+        margin-bottom: 30px;
+      }
+  
+        .overly-menu > li:last-child {
+          margin-bottom: 0;
+        }
+  
+      .overly-menu.dropdown-header {
+        padding: 3px 15px !important;
+      }
+  
+    .navbar-nav .open .dropdown-menu .dropdown-header {
+      color: var(--white-color);
+    }
+  }
+  
+  div.scrollable:hover {
+    overflow-y: auto !important;
+  }
+  
+  .shadow-lg {
+    box-shadow: var(--bs-l-shadow-box) !important;
+  }
+  
+  a.menu-link:hover {
+    color: var(--bs-primary) !important;
+  }
+  
+  a.nav-link {
+    cursor: pointer;
+  }
+  
+  mat-divider.mat-divider.mat-divider-vertical {
+    border-width: 2px !important;
+  }
+  
+  .dropdown-menu.user-menu {
+    top: 106%;
+    left: -15px;
+    border-radius: var(--bs-border-radius);
+  }
+  
+  .form-control:focus {
+    border-color: var(--bs-primary);
+    outline: 0;
+    box-shadow: none;
+  }
+  
+  .bs-highlight {
+    border-left-width: .35rem;
+    border-radius: .25rem;
+  }
+  
+  .be-highlight {
+    border-right-width: .35rem;
+    border-radius: .25rem;
+  }
+  
+  .bt-highlight {
+    border-top-width: .35rem;
+    border-radius: .25rem;
+  }
+  
+  .bb-highlight {
+    border: 1px solid #e9ecef;
+    border-bottom-width: .35rem;
+    border-radius: .25rem;
+  }
+  
+  .bs-accent {
+    border-left-color: var(--accent-color);
+  }
+  
+  .bs-primary {
+    border-left-color: var(--bs-primary);
+  }
+  
+  .bs-success {
+    border-left-color: var(--bs-success);
+  }
+  
+  .bs-info {
+    border-left-color: var(--bs-info);
+  }
+  
+  .bs-warning {
+    border-left-color: var(--bs-warning);
+  }
+  
+  .bs-dark {
+    border-left-color: var(--bs-dark);
+  }
+  
+  .bs-danger {
+    border-left-color: var(--bs-danger);
+  }
+  
+  .be-accent {
+    border-right-color: var(--accent-color);
+  }
+  
+  .be-primary {
+    border-right-color: var(--bs-primary);
+  }
+  
+  .be-success {
+    border-right-color: var(--bs-success);
+  }
+  
+  .be-info {
+    border-right-color: var(--bs-info);
+  }
+  
+  .be-warning {
+    border-right-color: var(--bs-warning);
+  }
+  
+  .be-dark {
+    border-right-color: var(--bs-dark);
+  }
+  
+  .be-danger {
+    border-right-color: var(--bs-danger);
+  }
+  
+  .bt-accent {
+    border-top-color: var(--accent-color);
+  }
+  
+  .bt-primary {
+    border-top-color: var(--bs-primary);
+  }
+  
+  .bt-success {
+    border-top-color: var(--bs-success);
+  }
+  
+  .bt-info {
+    border-top-color: var(--bs-info);
+  }
+  
+  .bt-warning {
+    border-top-color: var(--bs-warning);
+  }
+  
+  .bt-dark {
+    border-top-color: var(--bs-dark);
+  }
+  
+  .bt-danger {
+    border-top-color: var(--bs-danger);
+  }
+  
+  .bb-accent {
+    border-top-color: var(--accent-color);
+  }
+  
+  .bb-primary {
+    border-bottom-color: var(--bs-primary);
+  }
+  
+  .bb-success {
+    border-bottom-color: var(--bs-success);
+  }
+  
+  .bb-info {
+    border-bottom-color: var(--bs-info);
+  }
+  
+  .bb-warning {
+    border-bottom-color: var(--bs-warning);
+  }
+  
+  .bb-dark {
+    border-bottom-color: var(--bs-dark);
+  }
+  
+  .bb-danger {
+    border-bottom-color: var(--bs-danger);
+  }
+  
+  .form-label, .col-form-label {
+    margin-bottom: .5rem;
+    font-weight: 600;
+    font-size: .9rem;
+  }
+  
+  .form-select:focus {
+    border-color: var(--bs-primary);
+    outline: 0;
+    box-shadow: none;
+  }
+  
+  select option {
+    padding: 5px;
+  }
+  
+    select option:hover, select option:active, select option:visited,
+    select option:focus, section option:checked {
+      background-color: rgba(0, 0, 0, .1);
+    }
+  
+  input:invalid, textarea:invalid select:invalid,
+  select:required, input:required, textarea:required {
+    border-color: var(--bs-danger);
+  }
+  
+  .card-max-width {
+    max-width: 18rem;
+  }
+  
+  .small, small {
+    font-weight: 400 !important;
+    font-size: .875em !important;
+  }
+  
+  .form-check-input:focus {
+    border-color: var(--accent-color);
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem rgba(1, 153, 146, .25);
+  }
+  
+  .form-check-input:checked {
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+  }
+  
+  a:hover {
+    color: var(--bs-link-hover-color);
+    cursor: pointer;
+  }
+  
+  
+  a.btn-outline-primary:hover {
+    color: var(--bs-white) !important;
+  }
+  
+  a.btn-outline-light-primary:hover {
+    color: var(--bs-secondary) !important;
+  }
+  
+  .sidebar {
+    height: 100%;
+    width: 260px;
+    position: fixed;
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 260px;
+    z-index: 100;
+    transition: all 0.5s ease;
+    background-color: var(--sidebar-color) !important;
+  }
+  
+    .sidebar.close {
+      width: 60px;
+    }
+  
+    .sidebar .nav-links {
+      /*height: 100%;*/
+      padding-top: 30px 0 150px 0;
+      padding-left: 0;
+    }
+  
+    .sidebar.close .nav-links {
+      overflow: visible;
+    }
+  
+    .sidebar .nav-links::-webkit-scrollbar {
+      display: none;
+    }
+  
+    .sidebar .nav-links li {
+      position: relative;
+      list-style: none;
+      transition: all 0.4s ease;
+    }
+  
+      .sidebar .nav-links li .icon-link {
+        display: block;
+      }
+  
+    .sidebar.close .nav-links li .icon-link {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  
+    .sidebar .nav-links li fa-icon.ng-fa-icon {
+      height: 45px;
+      min-width: 60px;
+      padding-left: 18px;
+      line-height: 50px;
+      color: var(--primary-color);
+      font-size: 18px;
+      cursor: pointer;
+    }
+  
+      .sidebar .nav-links li fa-icon.ng-fa-icon.arrow {
+        font-size: 14px;
+      }
+  
+    .sidebar .nav-links li a {
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+    }
+  
+      .sidebar .nav-links li a .link-name {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--dark-text-color) !important;
+        min-width: 150px;
+      }
+  
+    .sidebar.close .nav-links li a .link-name {
+      opacity: 0;
+      pointer-events: none;
+    }
+  
+    .sidebar .nav-links li .sub-menu {
+      padding: 6px 6px 6px 6px;
+      margin-top: -10px;
+      color: var(--dark-text-color);
+      /*background: rgba(234, 234, 234, 0.6) !important;*/
+      display: none;
+      padding-left: 1.6rem;
+    }
+  
+    .sidebar.close .nav-links li .sub-menu {
+      margin-left: 0;
+    }
+  
+    .sidebar .nav-links li.show-nav .sub-menu {
+      display: block;
+    }
+  
+    .sidebar.close .nav-links li fa-icon.ng-fa-icon.logo-icon.arrow {
+      display: none;
+    }
+  
+    .sidebar .nav-links li .sub-menu a {
+      color: var(--dark-text-color) !important;
+      font-size: 13px;
+      padding: 5px 0;
+      white-space: nowrap;
+      opacity: 0.8;
+      transition: all 0.3s ease;
+      font-weight: 400;
+    }
+  
+      .sidebar .nav-links li .sub-menu a:hover,
+      .sidebar .nav-links li .sub-menu a:active,
+      li.sub-menu:hover,
+      li.sub-menu:active {
+        opacity: 1;
+        color: rgba(var(--bs-primary-rgb), 1) !important;
+      }
+  
+    .sidebar.close .nav-links li .sub-menu {
+      position: absolute;
+      left: 20%;
+      top: -10px;
+      margin-top: 0;
+      padding: 10px 20px;
+      border-radius: 0 6px 6px 0;
+      transition: all 0.4s ease;
+      opacity: 0;
+      display: block;
+      pointer-events: none;
+      width: 100%;
+      overflow-y: auto;
+    }
+  
+    .sidebar .nav-links li .sub-menu li {
+      padding-left: 2.1rem;
+      border: none;
+      border-left: 2px solid rgba(221, 221, 221, 0.5);
+    }
+  
+  li.sub-menu {
+    padding-left: .8rem;
+    border: none;
+    border-left: 2px solid rgba(221, 221, 221, 0.5);
+  }
+  
+  .sidebar.close .nav-links li .sub-menu li {
+    padding-left: 0.2rem;
+    border: none;
+  }
+  
+  .sidebar .nav-links li .sub-menu li a:hover, li.sub-menu:hover {
+    color: var(--primary-color) !important;
+    font-weight: 500;
+  }
+  
+  .sidebar .nav-links li .sub-menu li:hover, li.sub-menu:hover, li.sub-menu:active {
+    border-left: 2px solid rgba(var(--bs-primary-rgb), 1) !important;
+  }
+  
+  .sidebar.close .nav-links li .sub-menu li:hover {
+    border-left: none;
+  }
+  
+  .sidebar.close .nav-links li:hover .sub-menu {
+    top: 0;
+    opacity: 1;
+    pointer-events: auto;
+    transition: all 0.4s ease;
+  }
+  
+  .sidebar .nav-links li .sub-menu .link-name {
+    display: none;
+  }
+  
+  .sidebar.close .nav-links li .sub-menu .link-name {
+    font-size: 14px;
+    font-weight: 500;
+    opacity: 1;
+    display: block;
+  }
+  
+  .sidebar .nav-links li .sub-menu .blank {
+    opacity: 1;
+    pointer-events: auto;
+    padding: 3px 20px 6px 16px;
+    opacity: 0;
+    pointer-events: none;
+    transition: 0s;
+  }
+  
+  .sidebar .nav-links li:hover .sub-menu .blank {
+    top: 50%;
+    transform: translate(-50%);
+  }
+  
+  .sidebar li .profile-details fa-icon.ng-fa-icon.collapse-icon:hover {
+    color: var(--primary-color) !important;
+  }
+  
+  .sidebar li .profile-details fa-icon.ng-fa-icon.collapse-icon {
+    font-size: 18px;
+    color: rgba(157, 156, 156, 0.7);
+    height: 20px;
+    min-width: 60px;
+    padding-left: 20px;
+    line-height: 50px;
+  }
+  
+  .main-container {
+    position: relative;
+    left: 260px;
+    top: 60px;
+    width: calc(100% - 260px);
+    transition: all 0.5s ease;
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: 0;
+    margin-right: 0;
+  }
+  
+  .sidebar.close ~ .main-container {
+    left: 60px;
+    width: calc(100% - 60px);
+  }
+  
+  .h-83 {
+    height: 83%;
+  }
+  
+  .h-50 {
+    height: 50%;
+  }
+  
+  .breadcrumb {
+    background: none;
+    font-size: .93em;
+    margin: 0;
+    font-weight: 600;
+    padding-right: 1rem;
+    padding-left: 1rem;
+    position: sticky;
+    top: 0;
+  }
+  
+    .breadcrumb a, .breadcrumb span {
+      color: var(--text-color);
+      font-weight: 300;
+      text-decoration: none;
+    }
+  
+      .breadcrumb a:hover, .breadcrumb span:hover {
+        color: var(--primary-color);
+      }
+  
+  .breadcrumb-container {
+    position: sticky;
+    top: 56px;
+    z-index: 1001;
+    background-color: var(--sidebar-color);
+    height: 100%;
+    flex-direction: column;
+    display: flex;
+  }
+  
+  #form .dx-overlay .dx-invalid-message-content {
+    display: none;
+  }
+  
+  .btn-width {
+    min-width: 80px;
+  }
+  
+  .vh-50 {
+    height: 50vh;
+  }
+  
+  .badge-pink {
+    background-color: var(--accent-color);
+    color: white;
+    border-radius: 5px;
+    padding-inline-start: 0.3rem;
+    padding-inline-end: 0.3rem;
+  }
+  
+  
+  .toggle-description {
+    position: relative;
+    top: 2.7rem;
+    left: 1.5rem;
+    z-index: 1;
+    cursor: pointer;
+    pointer-events: none;
+  }
+  
+  .toggle-switch {
+    position: relative;
+    top: 2.7rem;
+    left: 1.5rem;
+    z-index: 1;
+  }
+  
+  .bg-opacity-07 {
+    --bs-bg-opacity: 0.07;
+  }
+  
+  .drag-drop-placeholder {
+    background: var(--bs-light-text-emphasis);
+    border: none;
+    min-height: 122px;
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+  
+  .quick-action-element {
+    visibility: hidden;
+  }
+  
+  a.quick-action:hover > .quick-action-element {
+    visibility: visible;
+    border-color: var(--accent-color) !important;
+  }
+  
+  a.quick-action:hover > hr.quick-action-element {
+    border-width: 6px;
+  }
+  
+  .smaller {
+    font-weight: 400 !important;
+    font-size: .75em !important;
+  }
+  
+  .menu-outline-primary a.dropdown-item {
+    color: black;
+  }
+  
+  .sticky-container {
+    background-color: white;
+    position: sticky;
+    top: 105px;
+    z-index: 996;
+    padding-bottom: 15px;
+  }
+  
+  /*::-webkit-scrollbar {
+    width: 5px;
+    background-color: var(--sidebar-color);
+    opacity: 0.5;
+  }*/
+  
+  .bg-light-primary {
+    background: var(--bs-light-primary-bg);
+  }
+  
+  .bg-light-gray {
+    background: var(--bs-light-gray);
+  }
+  
+  .bg-dark-gray {
+    background: var(--bs-bg-dark-gray) !important;
+  }
+  
+  .mat-primary {
+    --mat-minimal-pseudo-checkbox-selected-checkmark-color: #019992 !important;
+    --mat-full-pseudo-checkbox-selected-icon-color: #019992 !important;
+  }
+  
+  .mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
+  .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
+    --mdc-chip-elevated-container-color: var(--bs-bg-dark-gray) !important;
+    --mdc-chip-elevated-selected-container-color: var(--bs-bg-dark-gray) !important;
+    --mdc-chip-elevated-disabled-container-color: var(--bs-bg-dark-gray) !important;
+    --mdc-chip-flat-disabled-selected-container-color: var(--bs-bg-dark-gray) !important;
+  }
+  
+  .status-badge {
+    margin-right: -5px;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-bottom-right-radius: 0rem;
+    border-top-right-radius: 0rem;
+    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.075);
+    width: 120px;
+    height: 25px;
+  }
+  
+  .status-badge-triangle {
+    margin-top: 27px;
+    width: 12px;
+    height: 16px;
+    transform: rotate(180deg);
+  }
+  
+  .badge-outline-danger {
+    background: #F3516033;
+    color: #F35160;
+    font-weight: bold;
+    font-size: 10px;
+  }
+  
+  .badge-outline-success {
+    background: #1C95191A;
+    color: #198754;
+    font-weight: bold;
+    font-size: 10px;
+  }
+  
+  .h-10 {
+    height: 10%;
+  }
+  
+  .h-15 {
+    height: 15%;
+  }
+  
+  .h-20 {
+    height: 20%;
+  }
+  
+  .h-30 {
+    height: 30%;
+  }
+  
+  .h-35 {
+    height: 35%;
+  }
+  
+  .h-40 {
+    height: 40%;
+  }
+  
+  .h-45 {
+    height: 45%;
+  }
+  
+  .h-55 {
+    height: 55%;
+  }
+  
+  .h-60 {
+    height: 60%;
+  }
+  
+  .h-65 {
+    height: 65%;
+  }
+  
+  .h-70 {
+    height: 70%;
+  }
+  
+  .h-80 {
+    height: 80%;
+  }
+  
+  .h-85 {
+    height: 85%;
+  }
+  
+  .h-90 {
+    height: 90%;
+  }
+  
+  .h-95 {
+    height: 95%;
+  }
+  
+  .w-10 {
+    width: 10%;
+  }
+  
+  .w-15 {
+    width: 15%;
+  }
+  
+  .w-20 {
+    width: 20%;
+  }
+  
+  .w-30 {
+    width: 30%;
+  }
+  
+  .w-35 {
+    width: 35%;
+  }
+  
+  .w-40 {
+    width: 40%;
+  }
+  
+  .w-45 {
+    width: 45%;
+  }
+  
+  .w-55 {
+    width: 55%;
+  }
+  
+  .w-60 {
+    width: 60%;
+  }
+  
+  .w-65 {
+    width: 65%;
+  }
+  
+  .w-70 {
+    width: 70%;
+  }
+  
+  .w-80 {
+    width: 80%;
+  }
+  
+  .w-85 {
+    width: 85%;
+  }
+  
+  .w-90 {
+    width: 90%;
+  }
+  
+  .w-95 {
+    width: 90%;
+  }
+  
+  .mw-10 {
+    min-width: 10%;
+  }
+  
+  .mw-15 {
+    min-width: 15%;
+  }
+  
+  .mw-20 {
+    min-width: 20%;
+  }
+  
+  .mw-30 {
+    min-width: 30%;
+  }
+  
+  .mw-35 {
+    min-width: 35%;
+  }
+  
+  .mw-40 {
+    min-width: 40%;
+  }
+  
+  .mw-45 {
+    min-width: 45%;
+  }
+  
+  .mw-55 {
+    min-width: 55%;
+  }
+  
+  .mw-60 {
+    min-width: 60%;
+  }
+  
+  .mw-65 {
+    min-width: 65%;
+  }
+  
+  .mw-70 {
+    min-width: 70%;
+  }
+  
+  .mw-80 {
+    min-width: 80%;
+  }
+  
+  .mw-85 {
+    min-width: 85%;
+  }
+  
+  .mw-90 {
+    min-width: 90%;
+  }
+  
+  .mw-95 {
+    min-width: 90%;
+  }
+  
+  .highlight {
+    background-color: #ffff00;
+    color: var(--bs-secondary);
+  }
+  
+  .medium {
+    font-weight: 400 !important;
+    font-size: .9em !important;
+  }
+  
+  .xmedium {
+    font-size: .85em !important;
+  }
+  
+  .large {
+    font-size: .9em !important;
+  }
+  
+  .h-83 {
+    height: 83%;
+  }
+  
+  .h-40 {
+    height: 40%;
+  }
+  
+  .vh-25 {
+    height: 25vh;
+  }
+  
+  .vh-40 {
+    height: 40vh;
+  }
+  
+  .vh-30 {
+    height: 30vh;
+  }
+  
+  .vw-80 {
+    width: 80vw;
+  }
+  
+  .vw-100 {
+    width: 100vw;
+  }
+  
+  .cursor-disabled {
+    cursor: no-drop;
+  }
+  
+  .vh-65 {
+    height: 65vh;
+  }
+  
+  .min-vh-40 {
+    min-height: 40vh;
+  }
+  
+  .pt-01 {
+    padding-top: .1rem;
+  }
+  
+  /* triangle tab wizerd */
+  .nav-pills.nav-wizard {
+    display: flex;
+    flex-grow: 1;
+  }
+  
+    .nav-pills.nav-wizard li {
+      position: relative;
+      overflow: visible;
+      border-right: 15px solid #fff;
+      border-left: 15px solid #fff;
+      width: 49%;
+      display: flex;
+    }
+  
+      .nav-pills.nav-wizard li:first-child {
+        border-left-width: 0;
+      }
+  
+      .nav-pills.nav-wizard li:last-child {
+        border-right: 0;
+      }
+  
+      .nav-pills.nav-wizard li a {
+        border-radius: 0;
+        background-color: #A4A2A2;
+        width: 100%;
+        height: 33px;
+        align-content: center;
+        font-weight: bold;
+        color: white !important;
+        text-decoration: none;
+      }
+  
+      .nav-pills.nav-wizard li .nav-arrow {
+        position: absolute;
+        top: 0px;
+        right: -20px;
+        width: 0px;
+        height: 0px;
+        border-style: solid;
+        border-width: 17px 0 16px 20px;
+        border-color: transparent transparent transparent #A4A2A2;
+        z-index: 150;
+      }
+  
+      .nav-pills.nav-wizard li .nav-widge {
+        position: absolute;
+        top: 0px;
+        left: -20px;
+        width: 0px;
+        height: 0px;
+        border-style: solid;
+        border-width: 17px 0 16px 20px;
+        border-color: #A4A2A2 #A4A2A2 #A4A2A2 transparent;
+        z-index: 150;
+      }
+  
+      .nav-pills.nav-wizard li.active .nav-arrow {
+        border-color: transparent transparent transparent var(--primary-color);
+      }
+  
+      .nav-pills.nav-wizard li.active .nav-widge {
+        border-color: var(--primary-color) var(--primary-color) var(--primary-color) transparent;
+      }
+  
+      .nav-pills.nav-wizard li.active a {
+        background-color: var(--primary-color);
+      }
+  
+      .nav-pills.nav-wizard li:hover a {
+        background-color: #A4A2A2;
+        color: #fff;
+      }
+  
+      .nav-pills.nav-wizard li.active:hover a {
+        background-color: var(--primary-color);
+        color: #fff;
+      }
+  
+      .nav-pills.nav-wizard li.light-wizard a {
+        background-color: #ce710d1a;
+        color: var(--primary-color) !important;
+      }
+  
+      .nav-pills.nav-wizard li.light-wizard .nav-arrow {
+        border-color: transparent transparent transparent #ce710d1a;
+      }
+  /* end of triangle tab wizerd */
+  
+  .bg-dark-warning {
+    background: var(--bs-dark-warning);
+  }
+  
+  .left-0 {
+    left: 0;
+  }
+  
+  .right-0 {
+    right: 0;
+  }
+  
+  .top-n-10 {
+    top: -10px !important;
+  }
+  
+  .min-vh-60 {
+    min-height: 60.5vh !important;
+  }
+  
+  .min-vh-83 {
+    min-height: 83vh !important;
+  }
+  
+  .text-2xl {
+    font-size: 2rem;
+  }
+  
+  .text-xl {
+    font-size: 1.5rem;
+  }
+  
+  .text-lg {
+    font-size: 1.25rem;
+  }
+  
+  .text-md {
+    font-size: 1.125rem;
+  }
+  
+  .text-base {
+    font-size: 1rem;
+  }
+  
+  .text-sm {
+    font-size: .875rem;
+    line-height: 1.5rem;
+  }
+  
+  .text-xs {
+    font-size: 0.75rem;
+  }
+  
+  .text-2xs {
+    font-size: 0.65rem;
+  }
+  
+  .text-3xs {
+    font-size: 0.5rem;
+  }
+  
+  .text-4xs {
+    font-size: 0.55rem;
+  }
+  
+  .text-5xs {
+    font-size: 0.45rem;
+  }
+  
+  .mat-mdc-standard-chip {
+    --mdc-chip-label-text-font: "Inter", sans-serif, Arial !important;
+    --mdc-chip-label-text-size: 13px;
+    --mdc-chip-label-text-weight: 400;
+  }
+  
+  .text-secondary {
+    --bs-text-opacity: 1;
+    color: var(--bs-secondary) !important;
+  }
+  
+  .text-black {
+    --bs-text-opacity: .9;
+    color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
+  }
+  
+  .text-light-gray {
+    color: var(--text-color);
+    font-size: .8rem;
+    font-weight: 500;
+  }
+  
+  h5 {
+    font-size: 15px !important;
+  }
+  
+  .state-card {
+    color: var(--bs-white);
+    background-color: var(--bs-bg-dark-gray);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-content: space-between;
+    box-shadow: var(--bs-box-shadow-sm);
+    border-radius: var(--bs-border-radius);
+    padding: 1rem !important;
+  }
+  
+  .shadow-xs {
+    box-shadow: var(--bs-box-shadow-xs);
+  }
+  
+  .light-gray-card, .light-gray-container {
+    border: none;
+    background: var(--bs-light-gray);
+    box-shadow: var(--bs-box-shadow-xs);
+  }
+  
+  .card-text-2-lg {
+    font-size: 14px !important;
+  }
+  
+  .card-text-3-lg {
+    font-size: 15px !important;
+  }
+  
+  .card-text-lg {
+    font-size: 13px !important;
+  }
+  
+  .card-text-2md {
+    font-size: 11px !important;
+  }
+  
+  .card-text-md {
+    font-size: 1.1em !important;
+  }
+  
+  .card-text-sm {
+    font-size: 1em !important;
+  }
+  
+  .employee-rounded-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 50% !important;
+    box-shadow: var(--bs-box-shadow-sm) !important;
+    background-color: rgba(var(--bs-light-rgb), 1) !important;
+    width: 60px;
+    height: 60px;
+  }
+  
+  .pt-2px {
+    padding-top: 2px !important;
+  }
+  
+  button {
+    border-radius: var(--bs-border-radius) !important;
+  }
+  
+  .text-divider-bold {
+    color: var(--dark-text-color);
+    font-weight: 600 !important;
+  }
+  
+  .text-divider-semibold {
+    color: var(--dark-text-color);
+    font-weight: 500 !important;
+  }
+  
+  .border-15 {
+    border-width: 25px !important;
+    border-color: var(--bs-dark-warning) !important
+  }
+  
+  .light-border-1 {
+    border-radius: var(--bs-border-radius) !important;
+    border: 1px solid var(--bs-border-color);
+    border-width: 1px !important;
+    box-shadow: var(--bs-box-shadow-sm) !important;
+  }
+  
+  .bg-light-success {
+    background: #5cb85c;
+  }
+  
+  .border-shine-primary {
+    border-color: #F88E1D !important;
+  }
+  
+  .popup-header-warning {
+    width: 70px;
+    height: 70px;
+    top: -15%;
+    left: 43%;
+    border: 5px solid var(--bs-dark-warning);
+    box-sizing: border-box;
+  }
+  
+  .popup-header-primary {
+    width: 70px;
+    height: 70px;
+    top: -15%;
+    left: 43%;
+    border: 5px solid #F88E1D;
+    box-sizing: border-box;
+  }
+  
+  .popup-header-success {
+    width: 70px;
+    height: 70px;
+    top: -15%;
+    left: 43%;
+    border: 5px solid var(--bs-success);
+    box-sizing: border-box;
+  }
+  
+  .popup-header-danger {
+    width: 70px;
+    height: 70px;
+    top: -15%;
+    left: 43%;
+    border: 5px solid var(--bs-danger);
+    box-sizing: border-box;
+  }
+  
+  .dxpopup-header-warning {
+    width: 45px;
+    height: 45px;
+    border: 5px solid var(--bs-dark-warning);
+    box-sizing: border-box;
+  }
+  
+  .dxpopup-header-primary {
+    width: 45px;
+    height: 45px;
+    border: 4px solid var(--primary-color);
+    box-sizing: border-box;
+  }
+  
+  .dxpopup-header-success {
+    width: 45px;
+    height: 45px;
+    border: 4px solid var(--bs-success);
+    box-sizing: border-box;
+  }
+  
+  .dxpopup-header-danger {
+    width: 45px;
+    height: 45px;
+    border: 4px solid var(--bs-danger);
+    box-sizing: border-box;
+  }
+  
+  .gauge {
+    width: 120px;
+    max-width: 250px;
+    font-size: 32px;
+  }
+  
+  .gauge__body {
+    width: 100%;
+    height: 0;
+    padding-bottom: 50%;
+    background: #D9D9D9;
+    position: relative;
+    border-top-left-radius: 100% 200%;
+    border-top-right-radius: 100% 200%;
+    overflow: hidden;
+  }
+  
+  .gauge__fill {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: inherit;
+    height: 100%;
+    transform-origin: center top;
+    transform: rotate(0.25turn);
+    transition: transform 0.2s ease-out;
+  }
+  
+  .gauge__cover {
+    width: 75%;
+    height: 150%;
+    background: #ffffff;
+    border-radius: 50%;
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 25%;
+    box-sizing: border-box;
+    --bs-text-opacity: 1;
+    color: rgba(0, 0, 0, .5) !important;
+  }
+  
+  .gauge__label {
+    text-align: center;
+    font-size: 13px;
+    color: #6B6A6A;
+  }
+  
+  .employee-rounded-badge-md {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 50% !important;
+    box-shadow: var(--bs-box-shadow-sm) !important;
+    background-color: #D9D9D9 !important;
+    width: 35px;
+    height: 35px;
+  }
+  
+  .employee-rounded-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 50% !important;
+    box-shadow: var(--bs-box-shadow-sm) !important;
+    background-color: #D9D9D9 !important;
+    color: var(--dark-text-color);
+  }
+  
+  #customPopupContainer .dx-overlay-content {
+    border-top: 5px solid var(--bs-dark-warning) !important;
+    border-radius: 8px !important;
+    box-shadow: 0px 3px 6px #0000005D !important;
+  }
+  
+  .fw-semibold {
+    font-weight: 500 !important;
+  }
+  
+  .link-primary:focus, .link-primary:hover {
+    color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
+    text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
+  }
+  
+  .bg-accent {
+    background-color: var(--accent-color) !important;
+  }
+  
+  .text-accent {
+    color: var(--accent-color) !important;
+  }
+  
+  .border-accent {
+    border-color: var(--accent-color) !important;
+  }
+  
+  .badge-outline-accent {
+    --bs-bg-opacity: 0.25;
+    background-color: #249ea01a !important;
+    border: 1px solid #249ea01a;
+    color: var(--accent-color);
+  }
+  
+  .badge-outline-secondary {
+    background-color: var(--bs-light-gray) !important;
+    border: 1px solid var(--bs-secondary);
+    color: var(--bs-secondary);
+  }
+  
+  .bg-corn-flower {
+    background-color: #52688f !important;
+  }
+  
+  .bg-mauve {
+    background-color: #b7a1a6 !important;
+  }
+  
+  .bg-kelly-green {
+    background-color: #18a558 !important;
+  }
+  
+  .bg-main-content {
+    background-color: rgba(248, 248, 248,1) !important;
+  }
+  
+  h6 {
+    font-weight: 600 !important;
+  }
+  
+  .fs-12 {
+    font-size: 12px !important;
+  }
+  
+  .triangle-down-white {
+    width: 0;
+    height: 0;
+    border-left: 20px solid transparent;
+    border-right: 20px solid transparent;
+    border-top: 20px solid #FFF; /* Adjust color as needed */
+  }
+  
+  .triangle-down-secandary {
+    width: 0;
+    height: 0;
+    border-left: 20px solid transparent;
+    border-right: 20px solid transparent;
+    border-top: 20px solid rgb(108, 117, 125); /* Adjust color as needed */
+  }
+  
+  .start-min-10 {
+    right: -10px;
+    left: auto;
+  }
+  
+  .border-start-10 {
+    border-right-width: 10px !important;
+  }
+  
+  .border-start-primary {
+    border-right-color: var(--bs-primary) !important;
+  }
+  
+  .transform-neg-20 {
+    transform: rotate(20deg) scaleX(-1) !important;
+  }
+  
+  .transform-pos-45 {
+    transform: rotate(-45deg) scaleX(-1) !important;
+  }
+  
+  .transform-neg-180 {
+    transform: scaleX(-1) !important;
+  }
+  
+  .document-card-lg {
+    margin-left: 1rem;
+    margin-right: 0rem;
+    margin-top: .5rem;
+    position: relative;
+    width: 230px;
+    height: 171px;
+  }
+  
+  .document-card-md {
+    margin-right: 0rem;
+    margin-left: 1rem;
+    margin-top: .5rem;
+    position: relative;
+    width: 200px;
+    height: 160px;
+  }
+  start-100 {
+    right: 90% !important;
+  }
+  
+  .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-datagrid-group-space + td {
+    text-align: right;
+  }
+  
+  .dx-datagrid-pager.dx-pager {
+    direction: ltr;
+  }
+