@obaidazoqili/skysoftware-styles 1.4.0 → 1.6.0

package/styles/styles.css

@@ -1,2752 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-  
-  /* CSS */
-  :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;
-    }
-  }
-  
-  html, body {
-    min-height: 100%;
-    min-height: 100%;
-    height: 100%;
-    overflow: auto;
-    overflow-x: hidden;
-  }
-  
-  :root {
-    --accent-color: #00796B;
-    --dark-accent-color: #00796B;
-    --body-color: #fff;
-    --sidebar-color: #FFF;
-    --primary-color: #e67e0f;
-    --light-info-color: #9D9C9C;
-    --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-info-color-light: #5bc0de1a; /* Light info (blue) */
-    --bs-success-color-light: #5cb85c1a; /* Light success (green) */
-    --bs-danger-color-light: #d9534f1a; /* Light danger (red) */
-    --bs-primary-color-light: #f88e1d1a; /* Light primary (orange) */
-    --bs-default-color-light: #aaaaaa1a; /* Light default (gray) */
-    /*--bs-secondary: rgba(107, 114, 128,1);*/
-    --bs-purple: #A058A2;
-    --bs-success: #198750;
-    --bs-light-orange: #FFDCC4;
-    --bs-light-green: #C4DECA;
-    --bs-info: #41ABFE;
-    --bs-danger: #cf223b;
-    --bs-light: #a0a0a0;
-    --bs-bg-disabled: #f8f7f7;
-    --bs-dark: #333333;
-    --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: #f782041a;
-    --bs-light-primary-bg: #F4EDE3;
-    --bs-light-primary-bg-subtle: #f782041a;
-    --bs-light-primary-border-subtle: #f782041a;
-    --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: #333;
-    --bs-light-gray: #FAFAFA;
-    --bg-light-gray: #d9d9d9;
-    --dark-text-color: #333333;
-    --sidebar-color: #eaeaea;
-    --dark-yellow-color: #FCCF5A;
-    --light-blue: #249EA0;
-    /** font size variables **/
-    --font-size-8: 0.5rem;
-    --font-size-10: 0.625rem;
-    --font-size-11: 0.688rem;
-    --font-size-12: 0.75rem;
-    --font-size-13: 0.813rem;
-    --font-size-14: 0.875rem;
-    --font-size-15: 0.938rem;
-    --font-size-16: 1rem;
-    --font-size-18: 1.125rem;
-    --font-size-20: 1.25rem;
-    --font-size-24: 1.5rem;
-    --font-size-25: 1.563rem;
-    --font-size-28: 1.75rem;
-    --font-size-32: 2rem;
-    --font-size-36: 2.25rem;
-    --font-size-40: 2.5rem;
-    --font-size-44: 2.75rem;
-    --font-size-48: 3rem;
-    --font-size-50: 3.125rem;
-    --font-size-56: 3.5rem;
-    --font-size-64: 4rem;
-    --font-size-72: 4.5rem;
-    --font-size-75: 4.688rem;
-    --font-size-80: 5rem;
-    --font-size-90: 5.625rem;
-    --font-size-100: 6.25rem;
-    --gray-border-color: #9D9C9C;
-  }
-  
-  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: var(--bs-bg-dark-gray) !important;
-  }
-  
-  .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: 2; 
-    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: 2; 
-
-    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: var(--font-size-24);
-    font-weight: 700;
-    color: var(--dark-text-color) !important;
-  }
-  
-  .main-toolbar {
-    position: sticky;
-    top: 101px;
-    background-color: white;
-    padding-top: 1rem;
-    padding-bottom: 1.4rem;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-  
-  .main-toolbar-z-index {
-    z-index: 1000;
-  }
-  
-  .input-group-text {
-    border: 1px solid #6d5555e8;
-    border-right: none;
-  }
-  
-  .topbar-header input {
-    width: 20rem !important;
-    outline: none;
-    border: 1px solid #6d5555e8;
-    border-left: none;
-    padding: 5px 5px;
-    font-size: 14px;
-    background: #6d5555e8 !important;
-    color: white !important;
-    border-radius: 5px;
-  }
-  
-  
-  /* 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;
-    }
-  
-  .text-decoration-underline {
-    text-underline-offset: 3px;
-  }
-  
-  .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-switch .form-check-input {
-    width: 2.4em !important;
-    height: 1.2em !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: 1500;
-    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: 10px;
-    background: var(--sidebar-color);
-  }
-  
-  ::-webkit-scrollbar-thumb {
-    background: lightgray;
-  }*/
-  
-  .bg-light-primary {
-    background: var(--bs-light-primary-bg);
-  }
-  
-  .bg-light-gray {
-    background: #F8F7F7  !important;
-  }
-  
-  .bg-dark-gray {
-    background: var(--bs-bg-dark-gray) !important;
-  }
-  
-  .bg-light-green {
-    background: var(--bs-light-green) !important;
-  }
-  
-  .bg-light-orange {
-    background: var(--bs-light-orange) !important;
-  }
-  
-  .left-orange-border {
-    border-left: 5px solid var(--primary-color)
-  }
-  
-  .label-info {
-    background-color: var(--bs-info-color-light);
-  }
-  .label-purple{
-    background-color: var(--bs-purple);
-  }
-  .label-success {
-    background-color: var(--bs-success-color-light);
-  }
-  
-  .label-danger {
-    background-color: var( --bs-danger);
-  }
-  
-  .label-primary {
-    background-color: var(--bs-primary-color-light);
-  }
-  
-  .label-default {
-    background-color: var(--bs-default-color-light);
-  }
-  .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: #e0e0e0 !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-right-radius: 0.2rem;
-    border-bottom-right-radius: 0.2rem;
-    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.075);
-    width: 120px;
-    height: 25px;
-  }
-  .status-request-badge {
-    margin-right: -5px;
-  
-    border-top-left-radius: 0.2rem;
-    border-bottom-left-radius: 0.2rem;
-     border-bottom-right-radius:0.1rem;
-    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.075);
-    height: 19px;
-  }
-  
-  .status-badge-triangle {
-    margin-top: 27px;
-    width: 12px;
-    height: 16px;
-    transform: rotate(0deg);
-  }
-  .status-request-badge-triangle {
-    margin-top: 4px;
-    width: 29px;
-    height: 32px;
-  }
-  
-  .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%;
-  }
-  
-  .link-dark-gray {
-    color: #333 !important;
-  }
-  
-  .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-5 {
-    width: 5%;
-  }
-  
-  .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-70 {
-    min-height: 70vh !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: darkgray;
-    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-2xl-contaner {
-    width: 60px !important;
-    height: 60px !important;
-  }
-  
-  .employee-rounded-badge-2xl {
-    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);
-    width: 60px !important;
-    height: 60px !important;
-  }
-  
-  .employee-rounded-badge-xl-contaner {
-    width: 50px !important;
-    height: 50px !important;
-  }
-  
-  .employee-rounded-badge-xl {
-    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);
-    width: 50px;
-    height: 50px;
-  }
-  
-  .employee-rounded-badge-lg-contaner {
-    width: 40px !important;
-    height: 40px !important;
-  }
-  
-  .employee-rounded-badge-lg {
-    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);
-    width: 40px;
-    height: 40px;
-  }
-  
-  .employee-rounded-badge-md-contaner {
-    width: 35px !important;
-    height: 35px !important;
-  }
-  
-  .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;
-    color: var(--dark-text-color);
-    width: 35px;
-    height: 35px;
-  }
-  
-  .employee-rounded-badge-sm-contaner {
-    width: 25px !important;
-    height: 25px !important;
-  }
-  
-  .employee-rounded-badge-sm {
-    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);
-    width: 25px;
-    height: 25px;
-  }
-  
-  .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: #F8F7F7 !important;
-  }
-  
-  h6 {
-    font-weight: 600 !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 */
-    color: transparent;
-  }
-  
-  .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 */
-  }
-  
-  .triangle-down-light {
-    width: 0;
-    height: 0;
-    border-left: 20px solid transparent;
-    border-right: 20px solid transparent;
-    border-top: 20px solid rgba(var(--bs-light-rgb), 1); /* Adjust color as needed */
-  }
-  
-  .triangle-down-success {
-    width: 0;
-    height: 0;
-    border-left: 20px solid transparent;
-    border-right: 20px solid transparent;
-    border-top: 20px solid var(--bs-success);
-  }
-  
-  .selecte-card-List:hover {
-    border-color: var(--bs-primary) !important;
-    background-color: #F4EDE3 !important;
-  }
-  
-  .selected-card, .selected-anchor-card {
-    background-color: #F4EDE3 !important;
-    border-color: var(--bs-primary) !important;
-    border-width: 2px !important
-  }
-  .not-selected-event-option {
-    background-color: #F4EDE3 !important;
-  }
-  .selected-event-option {
-    background-color: var(--bs-primary);
-  }
-  
-  .selected-anchor-card::after {
-    content: "";
-    position: absolute;
-    bottom: -1rem;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 1rem solid transparent;
-    border-right: 1rem solid transparent;
-    border-top: 1rem solid var(--bs-primary);
-  }
-  
-  .border-dashed-secondary {
-    border-style: dashed !important;
-    border-width: 1px !important;
-    border-color: var(--bs-secondary) !important;
-  }
-  
-  .custom-dashed-border {
-    position: relative;
-    padding: 20px;
-    background: white; /* or whatever your background is */
-  }
-  
-    .custom-dashed-border::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 0.5rem; 
-      pointer-events: none;
-      z-index: 1;
-      background: repeating-linear-gradient(to right, #9D9C9C 0 20px, transparent 20px 30px) top, repeating-linear-gradient(to right, #9D9C9C 0 20px, transparent 20px 30px) bottom, repeating-linear-gradient(to bottom, #9D9C9C 0 20px, transparent 20px 30px) left, repeating-linear-gradient(to bottom, #9D9C9C 0 20px, transparent 20px 30px) right;
-      background-repeat: no-repeat;
-      background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
-      background-position: top left, bottom left, top left, top right;
-    }
-  
-  
-  .rounded-circle-40 {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    color: var(--bs-white);
-  }
-  
-  .rounded-circle-45 {
-    width: 45px;
-    height: 45px;
-    border-radius: 50%;
-    color: var(--bs-white);
-  }
-  
-  .document-card-lg {
-    margin-right: 1rem;
-    margin-left: 0rem;
-    margin-top: .5rem;
-    position: relative;
-    width: 230px;
-    height: 171px;
-  }
-  
-  .document-card-md {
-    margin-right: 1rem;
-    margin-left: 0rem;
-    margin-top: .5rem;
-    position: relative;
-    width: 200px;
-    height: 160px;
-  }
-  
-  .vacation-color-container-sm {
-    width: 11px !important;
-    height: 11px !important;
-  }
-  
-  /** New Font Size **/
-  .fs-8 {
-    font-size: var(--font-size-8) !important;
-  }
-  .fs-10 {
-    font-size: var(--font-size-10) !important;
-  }
-  
-  .fs-11 {
-    font-size: var(--font-size-11) !important;
-  }
-  
-  .fs-12 {
-    font-size: var(--font-size-12) !important;
-  }
-  
-  .fs-14, .fs-15 {
-    font-size: var(--font-size-15) !important;
-  }
-  
-  .fs-16 {
-    font-size: var(--font-size-16) !important;
-  }
-  
-  .fs-18 {
-    font-size: var(--font-size-18) !important;
-  }
-  
-  .fs-20 {
-    font-size: var(--font-size-20) !important;
-  }
-  
-  .fs-24 {
-    font-size: var(--font-size-24) !important;
-  }
-  
-  .fs-25 {
-    font-size: var(--font-size-25) !important;
-  }
-  
-  .fs-28 {
-    font-size: var(--font-size-28) !important;
-  }
-  
-  .fs-32, .fs-36 {
-    font-size: var(--font-size-32) !important;
-  }
-  
-  .fs-40, .fs-44, .fs-48, .fs-50 {
-    font-size: var(--font-size-40) !important;
-  }
-  
-  .fs-56, .fs-64 {
-    font-size: var(--font-size-56) !important;
-  }
-  
-  .fs-72, .fs-75, .fs-80 {
-    font-size: var(--font-size-72) !important;
-  }
-  
-  .fs-90, .fs-100 {
-    font-size: var(--font-size-90) !important;
-  }
-  
-  .fw-light-bold {
-    font-weight: 600 !important;
-  }
-  
-  .text-yellow {
-    color: var(--dark-yellow-color);
-  }
-  
-  .bg-yellow {
-    background: var(--dark-yellow-color);
-  }
-  
-  .circle-sm {
-    border-radius: 50%;
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-  
-  .text-dark-accent {
-    color: var(--dark-accent-color);
-  }
-  
-  .bg-dark-accent {
-    background-color: var(--dark-accent-color);
-  }
-  
-  .start-min-10 {
-    left: -10px;
-    right: auto;
-  }
-  
-  .wp-60 {
-    width: 60px;
-  }
-  
-  .bg-gray {
-    background: var(--bs-gray) !important;
-  }
-  
-  .border-gray {
-    border-color: var(--gray-border-color) !important;
-  }
-  
-  
-  
-  /** New Font Size **/
-  .fs-10 {
-    font-size: var(--font-size-10) !important;
-  }
-  
-  .fs-11 {
-    font-size: var(--font-size-11) !important;
-  }
-  
-  .fs-12 {
-    font-size: var(--font-size-12) !important;
-  }
-  
-  .fs-13 {
-    font-size: var(--font-size-13) !important;
-  }
-  
-  .fs-14 {
-    font-size: var(--font-size-14) !important;
-  }
-  
-  .fs-15 {
-    font-size: var(--font-size-15) !important;
-  }
-  
-  .fs-16 {
-    font-size: var(--font-size-16) !important;
-  }
-  
-  .fs-18 {
-    font-size: var(--font-size-18) !important;
-  }
-  
-  .fs-20 {
-    font-size: var(--font-size-20) !important;
-  }
-  
-  .fs-24 {
-    font-size: var(--font-size-24) !important;
-  }
-  
-  .fs-25 {
-    font-size: var(--font-size-25) !important;
-  }
-  
-  .fs-28 {
-    font-size: var(--font-size-28) !important;
-  }
-  
-  .fs-32 {
-    font-size: var(--font-size-32) !important;
-  }
-  
-  .fs-36 {
-    font-size: var(--font-size-36) !important;
-  }
-  
-  .fs-40 {
-    font-size: var(--font-size-40) !important;
-  }
-  
-  .fs-44 {
-    font-size: var(--font-size-44) !important;
-  }
-  
-  .fs-48 {
-    font-size: var(--font-size-48) !important;
-  }
-  
-  .fs-50 {
-    font-size: var(--font-size-50) !important;
-  }
-  
-  .fs-56 {
-    font-size: var(--font-size-56) !important;
-  }
-  
-  .fs-64 {
-    font-size: var(--font-size-64) !important;
-  }
-  
-  .fs-72 {
-    font-size: var(--font-size-72) !important;
-  }
-  
-  .fs-75 {
-    font-size: var(--font-size-75) !important;
-  }
-  
-  .fs-80 {
-    font-size: var(--font-size-80) !important;
-  }
-  
-  .fs-90 {
-    font-size: var(--font-size-90) !important;
-  }
-  
-  .fs-100 {
-    font-size: var(--font-size-100) !important;
-  }
-  
-  .fw-extra-light {
-    font-weight: 200 !important;
-  }
-  
-  .fw-extra-light-italic {
-    font-style: italic;
-    font-weight: 200 !important;
-  }
-  
-  .fw-light-italic {
-    font-style: italic;
-    font-weight: 300 !important;
-  }
-  
-  .fw-400 {
-    font-weight: 400 !important;
-  }
-  .fw-300 {
-    font-weight: 300 !important;
-  }
-  .fw-800 {
-    font-weight: 800 !important;
-  }
-  .fw-meduim {
-    font-weight: 500 !important;
-  }
-  
-  .fw-meduim-italic {
-    font-style: italic;
-    font-weight: 500 !important;
-  }
-  
-  
-  .fw-semibold {
-    font-weight: 600 !important;
-  }
-  
-  .fw-semibold-italic {
-    font-style: italic;
-    font-weight: 600 !important;
-  }
-  
-  .fw-extra-bold {
-    font-weight: 800 !important;
-  }
-  
-  .fw-extra-bold-italic {
-    font-style: italic;
-    font-weight: 800 !important;
-  }
-  
-  .lh-header {
-    line-height: 1.2;
-  }
-  
-  .hover-primary:hover {
-    color: var(--bs-primary) !important;
-    text-decoration-color: var(--bs-primary) !important;
-  }
-  
-  .btn-outline-primary:hover fa-icon.ng-fa-icon {
-    color: white !important;
-  }
-  
-  .btn-h-sm {
-    height: 1.875rem;
-    display:flex;
-    justify-content:center;
-    align-items:center;
-  }
-  
-  .property-badge {
-    background-color: #F0E4D5 !important;
-    font-size: var(--font-size-10) !important;
-    font-weight:600 !important;
-    color:black;
-    padding:5px;
-    border-radius:0.25rem;
-    line-height: 100%;
-  }
-  
-  .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;
-  }
-  
-  .p-16 {
-    padding: 1rem !important;
-  }
-  
-  .card-shadow {
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
-  }
-  
-  .card-radius {
-    border-radius: 0.5rem !important;
-  }
-  
-  .bg-disabled {
-    background-color: var(--bs-bg-disabled) !important;
-  }
-  
-  .border-start-10 {
-    border-left-width: 10px !important;
-  }
-  
-  .border-start-primary {
-    border-left-color: var(--bs-primary) !important;
-  }
-  
-  .navbar-brand {
-    float: left;
-    height: 50px;
-    padding: 8px 10px;
-    font-size: 18px;
-    line-height: 21px;
-    padding-bottom: 12px;
-    padding-top: 0px;
-  }
-  
-  .employee-initial-circle {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 0.75rem;
-    font-weight: 700;
-    border-radius: 50%;
-    border: 3px solid #fff;
-    width: 32px;
-    height: 32px;
-    color: #2E1500;
-    background-color: #ffdec2;
-    margin-left: -10px !important;
-  }
-  
-  .top-100-px {
-      top: 101px !important;
-  }
-  
-  .request-tab-shadow {
-    border-radius: 0.5rem !important;
-    background: #FFF;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-  }
-  
-  start-90 {
-      left: 90% !important;
-  }
-  
-  .vertical-text-rotated {
-    writing-mode: vertical-rl;
-    text-orientation: mixed;
-    transform: rotate(180deg);
-  }
-  
-  .stick-position {
-      position: sticky;
-      background-color: white;
-      z-index: 1;
-  }
-  
-  .container-screen {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    box-sizing: border-box;
-  }
-  
-  .btn-white:hover {
-    background-color: var(--bg-light-gray) !important;
-  }
-  
-  .btn-white {
-    background-color: #ffffff !important;
-  }
-  
-  .vh-40 {
-    height: 40vh;
-  }
-  
-  .filter-collapsed {
-    height: 0;
-    overflow: hidden;
-    transition: height 0.3s ease-in-out;
-  }
-  
-  .filter-expanded {
-    height: auto; 
-    transition: height 0.3s ease-in-out;
-  }
-  
-  .page-item.arrow .page-link {
-    border-radius: 50%;
-    box-shadow: 0 5px 6px rgba(0, 0.15, 0, 0.18);
-    border: none;
-  }
-  
-  .page-item.page-number .page-link {
-    border: none;
-    background-color: transparent;
-    color: black !important;
-  }
-  
-  .page-item.active > .page-link {
-    background-color: transparent;
-    color: var(--primary-color) !important;
-    border-color: none;
-  }
-  .page-item:first-child .page-link {
-    border-radius: 50%;
-  }
-  .page-item:last-child .page-link {
-    border-radius: 50%;
-  }
-  
-  .disabled > .page-link, .page-link.disabled {
-    pointer-events: none;
-    background-color: #ECECEC !important;
-    border-color: #c9c7c7 !important;
-  }
-  .page-item.active .page-link {
-    border: none !important;
-    box-shadow: none !important;
-  }
-  .active > .page-link, .page-link.active {
-    border: none !important;
-  }
-  .page-item .page-link:focus,
-  .page-item .page-link:active,
-  .page-item.active .page-link:focus,
-  .page-item.active .page-link:active {
-    outline: none !important;
-    box-shadow: none !important;
-    border: none !important;
-  }
-  .warning-description-truncate {
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    line-clamp: 3; 
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .text-justify {
-    text-align: justify !important;
-  }
-  .light-info{
-      color: var(--light-info-color) !important
-  }
-  
-  .min-h-800{
-      min-height: 800px !important;
-  }
-  .bg-light-info {
-    background-color: var(--light-info-color) !important
-  }
-  .text-light-dark {
-    color: var(--dark-text-color);
-  }
-  .bg-light-secondary {
-    background-color: var(--sidebar-color) !important;
-  }
-  @media only screen and (min-width: 1024px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
-    .w-lg-80 {
-      width: 80% !important;
-    }
-  }
-  .line-clamp-two {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2; 
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-word;
-  }
-  
-  .bg-light-green{
-      background-color:var(--light-blue);
-  }
-  .mh-150{
-      min-height:150px
-  }
-  .disabled-date {
-    opacity: 0.4 !important;
-    color: #ccc !important;
-    background-color: #f5f5f5 !important;
-  }
-  
-  .state-badge {
-    font-size: 12px;
-    font-weight: normal;
-    border-radius: .25rem !important;
-    display: flex;
-    justify-content: center;
-  }
-  
-  .mr-3{
-      margin-right:1rem;
-  }
-  .text-danger {
-    color: #B71C1C;
-  }
-  .cell-disabled {
-    border-radius: 2px;
-    border: 1px solid #DCDCDC;
-    background: var(--bs-bg-disabled) !important;
-  }
-  .cell-vacation {
-    border-radius: 2px;
-    border: 2px solid #FDE7AC;
-    background: rgba(242, 208, 117, 0.50);
-  }
-  .cell-offday {
-    border-radius: 2px;
-    border: 2px solid #FDE7AC;
-    background: rgba(242, 208, 117, 0.50) !important;
-  }
-  .bg-offday {
-    background: rgba(242, 208, 117, 0.50) !important;
-  }
-  .min-h-100{
-      min-height:100px
-  }
-  
-  #overtimeDataGrid .dx-editor-cell .dx-texteditor, .dx-editor-cell .dx-texteditor .dx-texteditor-input {
-    background: transparent !important;
-  }
-  #overtimeDataGrid .dx-datagrid-headers .dx-texteditor-input, .dx-datagrid-rowsview .dx-texteditor-input {
-    padding: 5px 0px;
-    min-height:unset;
-  }
-  .composite-icon-container {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-  }
-  
-    .composite-icon-container .main-icon {
-      font-size: 22px;
-      position: relative;
-      z-index: 1;
-    }
-  
-    .composite-icon-container .badge-icon {
-      position: absolute;
-      bottom: -2px;
-      right: -3px;
-      font-size: 10px;
-      background: white;
-      border-radius: 50%;
-      border: 2px solid currentColor;
-      padding: 2px;
-      width: 16px;
-      height: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 2;
-    }
-