/*
    PLEASE TO USE crystaltrack-nx-ws\libs\pm4pi-lib\src\assets\css\lib\lib.scss FILE INSTEAD
*/

@font-face {
    font-family: 'droidkufi';
    src: url('../fonts/droidkufi/DroidKufi-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'droidkufi';
    src: url('../fonts/droidkufi/DroidKufi-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: bold
}

@font-face {
    font-family: 'sora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/sora/sora-v17-latin-regular.woff2') format('woff2');
  }

:root {
    --app-font-family: droidkufi;
  }
  
*:not(pm4pi-grid):not(pm4pi-grid *):not(app-process-modeler):not(app-process-modeler *) {
    font-family: var(--app-font-family) ;
}

.nav.nav-tabs.nav-top-border .nav-item a.nav-link:not(.active) {
    box-shadow: inset 0 2px 0 #49505747;
    color: #495057a6;
}

/* Drag-to-reorder affordance for the tab bar (cdkDropList/cdkDrag on .nav-item) */
.nav.nav-tabs.nav-top-border .nav-item.cdk-drag {
    cursor: grab;
}

.nav.nav-tabs.nav-top-border .nav-item.cdk-drag:active {
    cursor: grabbing;
}

/* CDK clones the dragged .nav-item into its own overlay, detached from the
   ul.nav ancestor that normally suppresses the <li> marker via inherited
   list-style: none - so it falls back to the browser default disc bullet.
   Match the clone directly (it keeps the nav-item class) rather than via a
   descendant selector, which can't reach an element outside the original
   <ul> anymore, and explicitly kill the marker. */
.nav-item.cdk-drag-preview {
    list-style: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
    background: #fff;
    z-index: 1000;
}

.nav.nav-tabs.nav-top-border .nav-item.cdk-drag-placeholder {
    opacity: 0.3;
}

.nav.nav-tabs.nav-top-border.cdk-drop-list-dragging .nav-item:not(.cdk-drag-placeholder) {
    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
}

.nav.nav-tabs.nav-top-border .nav-item a {
    color: #42a5f5;
    font-family: 'sora';
    font-size: 12.5px;
    font-weight: 600;
}


/* grid styling */

.jqx-grid .jqx-widget-header {
    background: #f6f8fa !important;
}

.content-page.contain-sections:not(app-scheduler *):not(app-ct-schedule *):not(app-profile *):not(app-task-detail *):not(app-execution-steps-domain-detail *) {
    margin-left: 200px;
    width: calc(100% - 200px);
}

.actions {
    background-color: #F3F4F5;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    line-height: 36px;
    height: 36px;
}

.actions>li:first-child {
    margin-left: 10px;
}

.actions>li {
    position: relative;
    background-color: transparent;
    display: inline-block;
    margin-right: 5px;
}

.actions>li>a,
.actions>li>button {
    display: inline-block;
    position: relative;
    color: inherit;
    padding: 1px 5px;
    text-decoration: none !important;
    line-height: 1.5;
    border-radius: 2px;
    background: transparent;
    border: none;
}

.actions>li>a span {
    font-size: 14px;
}

.body-bg-default .actions>li>a:hover,
.body-bg-default .actions>li>button:hover {
    background: #55595c;
    border-color: #55595c;
}

.body-bg-primary .actions>li>a:hover,
.body-bg-primary .actions>li>button:hover {
    background: #007bff;
    border-color: #007bff;
}

.body-bg-danger .actions>li>a:hover,
.body-bg-danger .actions>li>button:hover {
    background: #dc3545;
    border-color: #dc3545;
}

.body-bg-success .actions>li>a:hover,
.body-bg-success .actions>li>button:hover {
    background: #28a745;
    border-color: #28a745;
}

.body-bg-blue .actions>li>a:hover,
.body-bg-blue .actions>li>button:hover {
    background: #2196f3;
    border-color: #2196f3;
}

.body-bg-cyan .actions>li>a:hover,
.body-bg-cyan .actions>li>button:hover {
    background: #00bcd4;
    border-color: #00bcd4;
}

.body-bg-pink .actions>li>a:hover,
.body-bg-pink .actions>li>button:hover {
    background: #e91e63;
    border-color: #e91e63;
}

.body-bg-default .actions>li>a span,
.body-bg-default .actions>li>button span {
    border-bottom-color: #55595c;
    color: #55595c;
}

.body-bg-primary .actions>li>a span,
.body-bg-primary .actions>li>button span {
    border-bottom-color: #007bff;
    color: #007bff;
}

.body-bg-danger .actions>li>a span,
.body-bg-danger .actions>li>button span {
    border-bottom-color: #dc3545;
    color: #dc3545;
}

.body-bg-success .actions>li>a span,
.body-bg-success .actions>li>button span {
    border-bottom-color: #28a745;
    color: #28a745;
}

.body-bg-blue .actions>li>a span,
.body-bg-blue .actions>li>button span {
    border-bottom-color: #2196f3;
    color: #2196f3;
}

.body-bg-cyan .actions>li>a span,
.body-bg-cyan .actions>li>button span {
    border-bottom-color: #00bcd4;
    color: #00bcd4;
}

.body-bg-pink .actions>li>a span,
.body-bg-pink .actions>li>button span {
    border-bottom-color: #e91e63;
    color: #e91e63;
}

.actions>li>a:hover span,
.actions>li>button:hover span {
    color: white !important;
}

.actions>li>button span {
    font-size: 14px;
}

.toolbar-menu:not(.horizontal) {
    position: absolute;
    width: 200px;
    background-color: #F3F4F5;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    bottom: 0;
    top: 36px;
    left: 0;
    padding: 0 !important;
}

.toolbar-menu:not(.horizontal) .btn-group {
    width: 100%;
    display: block;
}

.toolbar-menu:not(.horizontal) .btn-group button {
    border: none;
    width: 200px;
}

.toolbar-menu:not(.horizontal) button {
    background-color: transparent !important;
    text-align: left;
    padding: 10px 5px;
}

.toolbar-menu.horizontal {
    padding: 5px;
    padding-left: 0px;
}

.toolbar-menu.horizontal .btn {
    background: white !important;
    border-radius: 0 !important;
}

.nav-tabs .nav-item .nav-link {
    padding-right: 30px !important;
}

a.close-tab {
    position: absolute;
    top: 9px;
    right: 0;
    text-decoration: none !important;
    cursor: pointer;
    display: none;
}

.nav-tabs .nav-item:hover a.close-tab {
    display: block;
}

.nav-tabs .nav-link {
    border: none;
    height: 40px;
    line-height: 40px;
    padding: 0 8px !important;
}


/* multi theme */

.nav.nav-tabs.nav-top-border .nav-item a:not(.active),
.nav.nav-tabs.nav-top-border .nav-item i:not(.active) {
    color: inherit;
}

.body-bg-default .nav.nav-tabs.nav-top-border .nav-item i.tab-icon-ft.active {
    color: #55595c;
}

.body-bg-primary .nav.nav-tabs.nav-top-border .nav-item i.tab-icon-ft.active { 
    color: #007bff;
}

.body-bg-danger .nav.nav-tabs.nav-top-border .nav-item i.tab-icon-ft.active {
    color: #dc3545;
}

.body-bg-success .nav.nav-tabs.nav-top-border .nav-item i.tab-icon-ft.active {
    color: #28a745;
}

.body-bg-blue .nav.nav-tabs.nav-top-border .nav-item i.tab-icon-ft.active {
    color: #2196f3;
}

.body-bg-cyan .nav.nav-tabs.nav-top-border .nav-item i.tab-icon-ft.active {
    color: #00bcd4;
}

.body-bg-pink .nav.nav-tabs.nav-top-border .nav-item i.tab-icon-ft.active {
    color: #e91e63;
}

a:not([href]):not([tabindex]) {
    text-decoration: none;
}

.content-page {
    overflow-y: auto;
    width: 100%;
    overflow-x: hidden !important;
}

.jqx-grid-cell.jqx-item a {
    text-align: center;
    margin-right: 2px;
    position: relative;
    top: 5px;
}


/* Alert Dialog */

.absence-win .modal-dialog {
    width: 900px !important;
    min-width: 900px !important;
    padding: 24px !important;
}

.modal-lookups {
    margin-top: 120px;
}

html,
body {
    overflow: hidden;
}

.header-navbar {
    min-height: auto !important;
}

.header-navbar .navbar-container ul.nav li>a.nav-link {
    padding: 0.5rem 1rem;
}

.header-navbar .navbar-header .navbar-brand {
    padding: 5px 0;
}

.navbar {
    padding: 0 1rem !important;
}

.header-navbar.navbar-border {
    border-bottom: none !important;
}

html body .content .content-wrapper {
    padding: 0;
    background: white;
}

.app-content.center-layout,
html body .content.app-content {
    background: white;
}

.navbar-semi-light .navbar-header {
    background: none;
}

.navbar-semi-light .navbar-header .brand-text {
    color: white;
}

.nav.nav-tabs.nav-top-border .nav-item a {
    color: #42a5f5;
}


.tab-content>.tab-pane {
    position: relative;
}


/* grid styling */

.jqx-grid .jqx-widget-header {
    background: #f6f8fa !important;
    border-bottom: solid 0.5px lightgray !important;
}

.jqx-widget .jqx-grid-column-header {
    background: transparent !important;
    border-color: transparent !important;
    border-bottom: 2px solid #c8d6e5 !important;
}


.jqx-widget .jqx-grid-column-header>div>div {
    text-align: center;
}

/* Sort/filter/menu buttons inherit the header background */
.jqx-widget .jqx-grid-column-menubutton,
.jqx-widget .jqx-grid-column-sortascbutton,
.jqx-widget .jqx-grid-column-sortdescbutton,
.jqx-widget .jqx-grid-column-filterbutton {
    background-color: #f6f8fa !important;
}


/* Alt rows — subtle tint visible when no dynamic row color is applied */
.jqx-grid-cell-alt {
    background: #f8fafc !important;
}

.page-content {
    overflow: auto;
}

.toolbar-menu {
    padding: 5px;
    padding-left: 0px;
}

.toolbar-menu .btn {
    background: white !important;
    border-radius: 0 !important;
}

.toolbar-menu .btn,
.toolbar-menu .btn:not(.active):hover,
.toolbar-menu .btn:not(.active):focus {
    color: #007bff !important;
    border-color: #007bff !important;
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

form .form-group {
    margin-bottom: 8px;
}

body[dir="rtl"] {
    font-family: 'droidkufi' !important;
}

[dir="rtl"] .navbar-nav {
    padding-right: 0 !important;
}

.nav-tabs {
    border-bottom: 1px solid #dee2e6;
    background: rgba(0, 0, 0, .03);
    padding: 0 !important;
}

[dir="rtl"] .header-navbar {
    font-family: 'droidkufi' !important;
}

[dir="rtl"] .jqx-widget-content {
    font-family: 'droidkufi' !important;
}

.form-control:focus {
    box-shadow: none !important;
}

.nav-tabs .nav-item {
    position: relative;
}

.nav-tabs .nav-item .nav-link {
    padding-right: 26px !important;
    padding-left: 20px !important;
}

i.tab-icon-ft {
    background: transparent;
    position: absolute;
    top: 15px;
    left: 3px;
    color: #cecece;
}

a.close-tab {
    position: absolute;
    top: 9px;
    right: 0;
    text-decoration: none !important;
    cursor: pointer;
}

/* Full mirror of the LTR layout ([icon][text][close], close flush at the
   outer edge) instead of just moving close-tab next to the icon's
   unmoved left:3px position — the two were landing almost on top of each
   other (Ali, 2026-10-03: "the close link appears over the icon"). The
   icon now moves to the right (mirroring its own left:3px), freeing the
   left edge entirely for the close button, which gets the same generous
   clearance as it has in LTR (26px of nav-link padding, not 4px). */
[dir="rtl"] i.tab-icon-ft {
    left: auto;
    right: 7px;
}

[dir="rtl"] a.close-tab {
    right: auto;
    left: 0;
}

[dir="rtl"] .nav-tabs .nav-item .nav-link {
    padding-left: 26px !important;
    padding-right: 26px !important;
}

[dir="rtl"] .infobar-right {
    left: 0;
    position: fixed;
}

.container-fluid {
    padding: 15px;
}

.dropdown-menu.show {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
}

.login .alert {
    margin: 10px;
}

.nav.nav-tabs.nav-top-border .nav-item a.nav-link {
    border-right: 1px solid #ddd;
    border-top: 0 !important;
}

.nav.nav-tabs.nav-top-border .nav-item a.nav-link:not(.active) {
    background: white;
    border-radius: 0;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.nav-tabs .nav-item {
    margin-bottom: 0 !important;
}

.nav-tabs .nav-link {
    border: none;
    height: 35px;
    line-height: 35px;
    padding: 0 8px !important;
    margin-top: 5px;
    border-top-right-radius: 8px !important;
}

.nav.nav-tabs .nav-item .nav-link {
    padding: 3px;
}

#main-menu-navigation a.nav-link {
    display: block;
    height: 100%;
}

#main-menu-navigation a.nav-link i {
    display: inline-block !important;
    text-align: center !important;
    font-size: 23px !important;
    margin-bottom: 8px !important;
    margin-right: 0.5rem !important;
}

html body[dir="rtl"] {
    direction: rtl !important;
}

/* pm4pi-form-builder-grid and app-process-modeler corrupt under the inherited RTL
   direction flip above (jqxGrid-driven task-detail layout, bpmn-js's SVG-based
   process-modeler canvas) - opt them back out to LTR. */
[dir="rtl"] pm4pi-form-builder-grid,
[dir="rtl"] app-process-modeler .canvas-editor {
    direction: ltr !important;
}

/* app-process-modeler is already excluded from the global droidkufi font
   (see the *:not(app-process-modeler) rule near the top of this file) because
   bpmn-js pre-computes its SVG label <tspan> wrap positions against its own
   default font - swapping fonts after the fact misaligns/corrupts the labels.
   body[dir="rtl"] below sets droidkufi on <body> itself with !important, which
   process-modeler's elements then inherit (the :not() exemption only stops
   them matching THAT rule, it doesn't stop inheritance from body) - reset it
   back here for RTL mode too. */
[dir="rtl"] app-process-modeler .canvas-editor,
[dir="rtl"] app-process-modeler .canvas-editor * {
    font-family: initial !important;
}

/* The two rules above don't actually fix bpmn-js label corruption under RTL,
   because diagram-js measures every label's wrap width using a SHARED HIDDEN
   SVG (#helper-svg) that it appends directly to <body> - a sibling of
   app-process-modeler, not a descendant (see node_modules/diagram-js/lib/util/
   Text.js, getHelperSvg()). That helper inherits straight from <body>, so it
   was always measuring against body[dir="rtl"]'s !important droidkufi
   override above, regardless of any app-process-modeler-scoped exemption.
   #helper-svg's ID selector outweighs body[dir="rtl"]'s specificity, so this
   wins the !important vs. !important tie. */
#helper-svg,
#helper-svg * {
    direction: ltr !important;
    font-family: initial !important;
}

[dir="rtl"] .navbar-brand {
    margin-right: 0;
    left: 0;
    right: -1em;
}

[dir="rtl"] #main-menu-navigation a.nav-link i {
    margin-right: 0;
    margin-left: 0.5rem;
}

[dir="rtl"] .float-left {
    float: right !important;
}

[dir="rtl"] .mr-auto,
[dir="rtl"] .mx-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

[dir="rtl"] .actions {
    left: 0;
    right: auto;
}

app-permissions .pm4pi-vle-edit-btn {
    border: none !important;
}

[dir="rtl"] .card-header .card-title {
    text-align: right;
}

[dir="rtl"] app-permissions span.component-status.all {
    margin-left: 5px;
}

[dir="rtl"] app-permissions .column-scrollable {
    left: 10px !important;
}

[dir="rtl"] label:not(.checkbox-custom):not(.radio-custom) {
    width: 100%;
    text-align: right;
}

[dir="rtl"] .fa-pull-right,
[dir="rtl"] .pull-right {
    float: left !important;
}

[dir="rtl"] .btn-group>.btn-group:not(:last-child)>.btn,
[dir="rtl"] .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

[dir="rtl"] .btn-group>.btn-group:not(:first-child)>.btn,
.btn-group>.btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

[dir="rtl"] .btn-group {
  
}

[dir="rtl"] .customizer {
    left: -400px;
    right: auto;
    transition: left .4s cubic-bezier(.05, .74, .2, .99)
}

[dir="rtl"] .customizer.open {
    left: 0;
    right: auto;
}

[dir="rtl"] .custom-control {
    padding-right: 1.5rem;
    padding-left: 0;
}

[dir="rtl"] .custom-control-label::before {
    left: auto;
    right: -1.5rem;
}

[dir="rtl"] .custom-control-label::after {
    left: auto;
    right: -1.5rem;
}

body[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] app-task-detail,
[dir="rtl"] app-process-modeler {
    text-align: left;
}

[dir="rtl"] .customizer .customizer-close {
    right: auto;
    left: 10px;
}

[dir="rtl"] .modal-header .close {
    padding: 0px !important;
    margin: 0px !important;
}

.custom-radio .custom-control-input[checked="true"]~.custom-control-label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
}


/* multi theme */

.nav.nav-tabs.nav-top-border .nav-item a:not(.active) {
    color: inherit;
}

.nav.nav-tabs.nav-top-border .nav-item a.nav-link.active {
    border-left: 0 !important;
}

.body-bg-default .nav.nav-tabs.nav-top-border .nav-item a.nav-link.active {
    box-shadow: inset 0 2px 0 #55595c;
    color: #55595c;
}

.body-bg-primary .nav.nav-tabs.nav-top-border .nav-item a.nav-link.active {
    box-shadow: inset 0 2px 0 #007bff;
    color: #007bff;
}

.body-bg-danger .nav.nav-tabs.nav-top-border .nav-item a.nav-link.active {
    box-shadow: inset 0 2px 0  #dc3545;
    color: #dc3545;
}

.body-bg-success .nav.nav-tabs.nav-top-border .nav-item a.nav-link.active {
    box-shadow: inset 0 2px 0 #28a745;
    color: #28a745;
}

.body-bg-blue .nav.nav-tabs.nav-top-border .nav-item a.nav-link.active {
    box-shadow: inset 0 2px 0  #2196f3;
    color: #2196f3;
}

.body-bg-cyan .nav.nav-tabs.nav-top-border .nav-item a.nav-link.active {
    box-shadow: inset 0 2px 0  #00bcd4;
    color: #00bcd4;
}

.body-bg-pink .nav.nav-tabs.nav-top-border .nav-item a.nav-link.active {
    box-shadow: inset 0 2px 0  #e91e63;
    color: #e91e63;
}

.body-bg-default .nav.nav-tabs.nav-top-border .nav-item a.active~.close-tab {
    color: #55595c;
}

.body-bg-primary .nav.nav-tabs.nav-top-border .nav-item a.active~.close-tab {
    color: #007bff;
}

.body-bg-danger .nav.nav-tabs.nav-top-border .nav-item a.active~.close-tab {
    color: #dc3545;
}

.body-bg-success .nav.nav-tabs.nav-top-border .nav-item a.active~.close-tab {
    color: #28a745;
}

.body-bg-blue .nav.nav-tabs.nav-top-border .nav-item a.active~.close-tab {
    color: #2196f3;
}

.body-bg-cyan .nav.nav-tabs.nav-top-border .nav-item a.active~.close-tab {
    color: #00bcd4;
}

.body-bg-pink .nav.nav-tabs.nav-top-border .nav-item a.active~.close-tab {
    color: #e91e63;
}

.body-bg-default .btn-outline-primary:not(:disabled):not(.disabled).active,
.body-bg-default .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: #55595c !important;
    border-color: #55595c !important;
}

.body-bg-primary .btn-outline-primary:not(:disabled):not(.disabled).active,
.body-bg-primary .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.body-bg-danger .btn-outline-primary:not(:disabled):not(.disabled).active,
.body-bg-danger .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.body-bg-success .btn-outline-primary:not(:disabled):not(.disabled).active,
.body-bg-success .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.body-bg-blue .btn-outline-primary:not(:disabled):not(.disabled).active,
.body-bg-blue .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
}

.body-bg-cyan .btn-outline-primary:not(:disabled):not(.disabled).active,
.body-bg-cyan .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: #00bcd4 !important;
    border-color: #00bcd4 !important;
}

.body-bg-pink .btn-outline-primary:not(:disabled):not(.disabled).active,
.body-bg-pink .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: #e91e63 !important;
    border-color: #e91e63 !important;
}

.body-bg-default .toolbar-menu .btn,
.body-bg-default .toolbar-menu .btn:not(.active):hover,
.body-bg-default .toolbar-menu .btn:not(.active):focus {
    color: #55595c !important;
    border-color: #55595c !important;
}

.body-bg-primary .toolbar-menu .btn,
.body-bg-primary .toolbar-menu .btn:not(.active):hover,
.body-bg-primary .toolbar-menu .btn:not(.active):focus {
    color: #007bff !important;
    border-color: #007bff !important;
}

.body-bg-danger .toolbar-menu .btn,
.body-bg-danger .toolbar-menu .btn:not(.active):hover,
.body-bg-danger .toolbar-menu .btn:not(.active):focus {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.body-bg-success .toolbar-menu .btn,
.body-bg-success .toolbar-menu .btn:not(.active):hover,
.body-bg-success .toolbar-menu .btn:not(.active):focus {
    color: #28a745 !important;
    border-color: #28a745 !important;
}

.body-bg-blue .toolbar-menu .btn,
.body-bg-blue .toolbar-menu .btn:not(.active):hover,
.body-bg-blue .toolbar-menu .btn:not(.active):focus {
    color: #2196f3 !important;
    border-color: #2196f3 !important;
}

.body-bg-cyan .toolbar-menu .btn,
.body-bg-cyan .toolbar-menu .btn:not(.active):hover,
.body-bg-cyan .toolbar-menu .btn:not(.active):focus {
    color: #00bcd4 !important;
    border-color: #00bcd4 !important;
}

.body-bg-pink .toolbar-menu .btn,
.body-bg-pink .toolbar-menu .btn:not(.active):hover,
.body-bg-pink .toolbar-menu .btn:not(.active):focus {
    color: #e91e63 !important;
    border-color: #e91e63 !important;
}


/* Switch */

.switch {
    display: inline-block;
    position: relative;
    top: 5px;
}

.onoffswitch {
    position: relative;
    width: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #999999;
    border-radius: 0px;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 18px;
    padding: 0;
    line-height: 18px;
    font-size: 14px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
}

.onoffswitch-inner:before {
    content: "";
    padding-left: 10px;
    background-color: #42A5F5;
    color: #FFFFFF;
}

.onoffswitch-inner:after {
    content: "";
    padding-right: 10px;
    background-color: #EEEEEE;
    color: #D91515;
    text-align: right;
}

.onoffswitch-switch {
    display: block;
    width: 14px;
    margin: 2px;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 22px;
    border: 2px solid #999999;
    border-radius: 0px;
    transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
    right: 0px;
}

.switch label {
    margin-bottom: 0 !important;
}

a:not([href]):not([tabindex]) {
    text-decoration: none !important;
}

.invalid-feedback {
    display: block !important;
}

.toast {
    opacity: 1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.toast-top-center {
    top: 50px;
}

.content-page:not(app-scheduler *):not(app-ct-schedule *):not(app-profile *):not(app-task-detail *):not(app-execution-steps-domain-detail *) {
    overflow-y: auto;
    width: 100%;
    overflow-x: hidden !important;
}

app-scheduler .content-page {
    overflow-y: hidden;
    width: 100%;
    overflow-x: hidden !important;
}

app-ct-schedule .content-page {
    overflow-y: hidden;
    width: 100%;
    overflow-x: hidden !important;
}

app-profile .content-page {
    overflow-y: hidden;
    width: 100%;
    overflow-x: hidden !important;
}

.jqx-grid-cell .jqx-grid-widget a {
    color: #222 !important;
    text-decoration: underline;
}

form label {
    color: #414141;
    font-weight: 500;
}

@media (min-width: 992px) {
    .modal-lg {
        max-width: 1000px;
    }
}

html body.fixed-navbar {
    padding-top: 47px !important;
}

@media (max-width: 767.98px) {
    .header-navbar .navbar-header {
        padding: 0 10px !important;
    }

    .header-navbar .navbar-header .navbar-brand {
        background: transparent;
        border-bottom: 0;
    }

    .header-navbar .navbar-header .navbar-brand .brand-logo {
        width: 35px !important;
        height: 35px !important;
        top: -1px !important;
        float: none !important;
        left: 5px !important;
    }

    .navbar-semi-light .navbar-header .navbar-nav .nav-link {
        color: white;
    }
}

.fixed-top {
    padding: 0 !important;
}

.horizontal-top-icon-menu.menu-collapsed.fixed-navbar #main-menu-navigation .nav-item a span {
    display: inline-block !important;
}

.header-navbar .navbar-header {
    height: 47px;
}

.main-menu.menu-fixed {
    top: 47px;
}

.menu-expanded .header-navbar .navbar-container ul.nav li>a.nav-link {
    padding: 0 10px;
}


/*==================================================
  Radios and Checkboxes
==================================================== */

.radio-custom,
.checkbox-custom {
    background-color: transparent;
    color: inherit;
}


/* hide default input */

.radio-custom input,
.checkbox-custom input {
    display: none;
}

.checkbox-custom label:empty,
.radio-custom label:empty {
    padding-left: 10px;
}


/* radio container */

.radio-custom span {
    cursor: pointer;
    position: relative;
    padding-left: 32px;
    margin-right: 15px;
    margin-bottom: 5px;
}


/* radio border */

.radio-custom span:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 64px;
    width: 20px;
    height: 20px;
    border: 2px solid #666;
}


/* check radio icon */

.radio-custom input[type=radio]:checked+span:after,
.radio-custom input[type=checkbox]:checked+span:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 64px;
    width: 10px;
    height: 10px;
    color: #666;
    background-color: #666;
}


/* alt style - square */

.radio-custom.square span:before {
    border-radius: 2px;
}

.radio-custom.square input[type=radio]:checked+span:after,
.radio-custom.square input[type=checkbox]:checked+span:after {
    border-radius: 2px;
}


/* checkbox container */

.checkbox-custom span {
    cursor: pointer;
    position: relative;
    padding-left: 32px;
    margin-right: 15px;
    margin-bottom: 5px;
}


/* checkbox border */

.checkbox-custom span:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 21px;
    background-color: #FFF;
    border: 1px solid #666;
    border-width: 2px;
    border-radius: 1px;
}


/* checked state icon */

.checkbox-custom input[type=checkbox]:checked+span:after,
.checkbox-custom input[type=radio]:checked+span:after {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f00c";
    font-size: 12px;
    top: 2px;
    left: 3px;
    width: auto;
    height: 0;
    transform: rotate(-13deg);
}


/* alt style - filled bg ".fill" */

.checkbox-custom.fill span {
    cursor: pointer;
    position: relative;
    padding-left: 32px;
    margin-right: 15px;
    margin-bottom: 5px;
}

.checkbox-custom.fill span:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 2px;
    width: 22px;
    height: 21px;
    background-color: #666;
}

.checkbox-custom.fill input[type=checkbox]:checked+span:after,
.checkbox-custom.fill input[type=radio]:checked+span:after {
    position: absolute;
    font-family: FontAwesome;
    content: "\f00c";
    font-size: 12px;
    top: 3px;
    left: 3px;
    width: 0;
    height: 0;
    color: #fff !important;
    transform: rotate(-13deg);
}

/* .checkbox-custom's glyph is drawn entirely via the span's own :before/
   :after pseudo-elements (padding-left reserves room for the box before
   the label text) — absolute-positioned left/right offsets don't flip
   with `direction`, so without this the box stays stuck on the physical
   left even once the text itself right-aligns under [dir="rtl"], putting
   the box and label on the wrong sides of each other. Mirror the padding
   and box position so the box sits after the label text instead of
   before it, matching a true RTL reading order. */
[dir="rtl"] .checkbox-custom span {
    padding-left: 0;
    padding-right: 32px;
    margin-right: 0;
    margin-left: 15px;
}
[dir="rtl"] .checkbox-custom span:before {
    left: auto;
    right: 0;
}
[dir="rtl"] .checkbox-custom input[type=checkbox]:checked+span:after,
[dir="rtl"] .checkbox-custom input[type=radio]:checked+span:after {
    left: auto;
    right: 8px;
}
[dir="rtl"] .checkbox-custom.fill span:before {
    left: auto;
    right: 0;
}
[dir="rtl"] .checkbox-custom.fill input[type=checkbox]:checked+span:after,
[dir="rtl"] .checkbox-custom.fill input[type=radio]:checked+span:after {
    left: auto;
    right: 3px;
}

[dir="rtl"] .dropdown-user.not-mobile-user {
    right: auto !important;
    left: -25px;
}

[dir="rtl"] .dropdown-menu-right {
    left: 0;
    right: auto;
}

.no {
    background-color: #ddd;
    color: #fff;
}

.center-v-h {
    position: relative;
    top: 7px;
    display: inline-block;
    padding: 2px;
}

app-query-builder .center-v-h{
    margin-left: 25%;
}

app-query-builder .jqx-grid-cell-filter-row{
    background: transparent !important;
}

.qb-grid-action-btn{
    margin-top: 4px;
}

.stroke {
    text-decoration: line-through;
}

.jqx-grid-widget {
    text-align: center;
}

.jqx-grid-cell.jqx-item a {
    text-align: center;
    margin-right: 2px;
    position: static;
    top: 5px;
    padding: 5px !important;
}

.td.jqx-grid-cell.jqx-item a {
    top: 0;
}

.-primary {
    width: 100%;
}

.--hidden {
    display: none;
}

.-secondary {
    padding: 10px;
    display: none;
    position: absolute;
    width: 200px;
    top: 45px;
    right: 0;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -ms-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 0.21rem;
    background: #42a5f5;
    z-index: 999;
}

.-secondary li {
    list-style: none;
}

.-secondary li a {
    text-align: left !important;
}

.more-btn.--hidden {
    display: none;
}

.--show-secondary .-secondary {
    display: block;
    transform: scale(1, 1);
}

.horizontal-top-icon-menu.menu-collapsed #main-menu-navigation .nav-item a span,
.vertical-overlay-menu .main-menu .navigation .navigation-header .ft-minus {
    display: inline-block;
}

.not-mobile .user-menu {
    position: absolute;
    right: 0;
    top: 0;
}

@media (max-width: 767.98px) {
    .header-navbar .navbar-header .navbar-brand {
        width: calc(100% - 108px);
        position: absolute;
        left: 54px;
        top: 0;
        /* background: red !important; */
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.body-bg-default .lds-ring div {
    border-color: #55595c transparent transparent transparent !important;
}

.body-bg-primary .lds-ring div {
    border-color: #007bff transparent transparent transparent !important;
}

.body-bg-danger .lds-ring div {
    border-color: #dc3545 transparent transparent transparent !important;
}

.body-bg-success .lds-ring div {
    border-color: #28a745 transparent transparent transparent !important;
}

.body-bg-blue .lds-ring div {
    border-color: #2196f3 transparent transparent transparent !important;
}

.body-bg-cyan .lds-ring div {
    border-color: #00bcd4 transparent transparent transparent !important;
}

.body-bg-pink .lds-ring div {
    border-color: #e91e63 transparent transparent transparent !important;
}

.-header {
    background: rgba(0, 0, 0, 0.04);
    padding: 5px 10px;
}

.-secondary .dropdown-menu .dropdown-submenu>.dropdown-menu {
    left: -100% !important;
    width: 200px;
}

.selected-role-components ul {
    padding: 0 19px;
}

.selected-role-actions ul {
    padding: 0 19px;
}

li.actions-name {
    float: left;
    width: calc(100% / 3);
}

.role-rep .table td,
.table th {
    border-top: none !important;
}

.role-rep .table .table .table td,
.table .table .table th {
    border-bottom: none !important;
}

.form-group.required label:after {
    content: "*";
    color: red;
}


/* Alert Dialog */

.alert-window {}

.body-bg-default .modal-header {
    border-bottom-color: #55595c;
    background: #55595c;
}

.body-bg-primary .modal-header {
    border-bottom-color: #007bff;
    background: #007bff;
}

.body-bg-danger .modal-header {
    border-bottom-color: #dc3545;
    background: #dc3545;
}

.body-bg-success .modal-header {
    border-bottom-color: #28a745;
    background: #28a745;
}

.body-bg-blue .modal-header {
    border-bottom-color: #2196f3;
    background: #2196f3;
}

.body-bg-cyan .modal-header {
    border-bottom-color: #00bcd4;
    background: #00bcd4;
}

.body-bg-pink .modal-header {
    border-bottom-color: #e91e63;
    background: #e91e63;
}

.modal-title {
    color: #FFFFFF;
}

#descAlert {
    margin-left: 30px;
}

#descAlert2 {
    margin-left: 30px;
}

#modal-basic-title {
    margin-left: -7px;
    margin-top: -8px;
}

.open-help {
    position: absolute;
    right: 14px;
    top: 9px;
    text-decoration: none !important;
}

.body-bg-default .open-help {
    color: #55595c;
}

.body-bg-primary .open-help {
    color: #007bff;
}

.body-bg-danger .open-help {
    color: #dc3545;
}

.body-bg-success .open-help {
    color: #28a745;
}

.body-bg-blue .open-help {
    color: #2196f3;
}

.body-bg-cyan .open-help {
    color: #00bcd4;
}

.body-bg-pink .open-help {
    color: #e91e63;
}

.pm4pi-scrollbar {
    scrollbar-width: thin;
    overflow: auto;
    overflow-x: hidden;
}

.pm4pi-scrollbar::-webkit-scrollbar {
    background-color: #fff;
    width: 6px;
    height: 16px
}

.pm4pi-scrollbar::-webkit-scrollbar-track {
    background-color: #fff
}

.pm4pi-scrollbar::-webkit-scrollbar-track:hover {
    background-color: #fff
}

.pm4pi-scrollbar::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 16px;
    border: 5px solid #fff
}

.pm4pi-scrollbar::-webkit-scrollbar-button {
    display: none
}

.pm4pi-scrollbar::-webkit-scrollbar {
    background-color: transparent
}

.pm4pi-scrollbar::-webkit-scrollbar-track {
    background-color: transparent
}

.pm4pi-scrollbar::-webkit-scrollbar-track:hover {
    background-color: transparent
}

.pm4pi-scrollbar::-webkit-scrollbar-thumb {
    border-color: #ddd
}

.pm4pi-scrollbar::-webkit-scrollbar-thumb:hover {
    border-color: #ddd;
}

.page-actions {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    height: 36px;
    position: relative;
    line-height: 32px;
}

pm4pi-grid .page-actions {
    height: 45px !important;
}

.page-actions button {
    margin-right: 0px;
    margin-top: 3px;
}

.page-view-actions {
    position: absolute;
    top: 0;
    right: 10px;
}

.page-business-actions {
    top: 0;
    left: 20px;
    padding-top: 0px;
}

.page-reset-actions {
    top: 0;
    left: 20px;
}

.page-actions-toolbar {
    position: absolute;
    background: #F3F4F5;
    left: 0;
    right: 0;
    height: 36px;
    padding-left: 15px;
    height: 36px;
}



pm4pi-grid  .page-actions-toolbar {
    height: 32px !important;
}

pm4pi-grid  .page-business-actions{
    height: 32px !important;
}


.separator {
    height: 15px;
    width: 2px;
    background: #ddd;
    margin-left: 2px;
    margin-right: 2px;
    position: relative;
    top: 4px;
    display: inline-block;
}

/* ================================================================
   PROJECTED page-actions-toolbar CONTENT (ng-content into pm4pi-grid)
   Consumer components (request lists, project lists, settings grids,
   etc.) render their own "Create" / "Actions" / dropdown buttons
   inside <pm4pi-grid>, which pm4pi-grid projects into its own
   .page-actions-toolbar via <ng-content>. Angular view encapsulation
   means pm4pi-grid's own component styles can never reach that
   projected markup, so the shared button/dropdown/separator skin has
   to live here, globally, scoped by the .page-actions-toolbar
   ancestor that pm4pi-grid always renders. Mirrors
   libs/pm4pi-lib/.../grid/grid.component.css's .btn / .dropdown-menu /
   .dropdown-item / .separator rules — keep the two in sync.
   The doubled .page-actions-toolbar class is a specificity bump so
   this reliably wins over the body-bg-* theme rules below, which
   also use !important on the same button/total-count selectors.
   ================================================================ */
.page-actions-toolbar.page-actions-toolbar .btn {
    display: inline-flex !important;
    align-items: center;
    gap: 1px;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid #b9c2da !important;
    background: #ffffff !important;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
    transition: border-color .14s ease, color .14s ease, background .14s ease, box-shadow .14s ease;
    opacity: 0.8;
}

.page-actions-toolbar.page-actions-toolbar .btn i,
.page-actions-toolbar.page-actions-toolbar .btn .fa {
    color: inherit;
}

.page-actions-toolbar.page-actions-toolbar .btn:hover {
    border-color: #9aa6f5 !important;
    color: #4f46e5 !important;
    background: #eef0ff !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, .16) !important;
    opacity: 1;
}

.page-actions-toolbar.page-actions-toolbar .separator {
    align-self: stretch;
    width: 1.2px;
    height: 25px !important;
    background: #c1c8d6 !important;
    margin: 0px 2px 0px -10px;
    position: relative;
    top: 7px;
    display: inline-block;
    flex-shrink: 0;
}

.page-actions-toolbar.page-actions-toolbar div.dropdown,
.page-actions-toolbar.page-actions-toolbar [ngbDropdown] {
    display: inline-flex !important;
    padding: 0 !important;
    top: 2px !important;
    margin-left: 6px;
}

.page-actions-toolbar.page-actions-toolbar .dropdown-menu {
    min-width: 190px;
    border: 1px solid #d0d7de;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(149, 157, 165, .25), 0 3px 10px rgba(0, 0, 0, .07);
    padding: 6px;
    margin-top: 6px !important;
}

.page-actions-toolbar.page-actions-toolbar .dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none !important;
    background: transparent !important;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600 !important;
    color: #24292f !important;
    padding: 8px 10px !important;
    height: auto !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.page-actions-toolbar.page-actions-toolbar .dropdown-item:hover,
.page-actions-toolbar.page-actions-toolbar .dropdown-item:focus {
    background: #f6f8fa !important;
    color: #4f46e5 !important;
}

.page-actions-toolbar.page-actions-toolbar .dropdown-item i {
    width: 16px;
    text-align: center;
    color: #8a8aa3;
}

.page-actions-toolbar.page-actions-toolbar .dropdown-item:hover i {
    color: #4f46e5;
}


.body-bg-default .common-action-style  {
    color: #55595c;
}
 
.body-bg-primary .common-action-style  {
    color: #007bff;
}
 
.body-bg-danger .common-action-style  {
    color: #dc3545;
}
 
.body-bg-success .common-action-style  {
    color: #28a745;
}
 
.body-bg-blue .common-action-style {
    color: #2196f3;
}
 

.body-bg-cyan .common-action-style  {
    color: #00bcd4;
} 
.body-bg-pink .common-action-style  {
    color: #e91e63;
}


.body-bg-default .page-actions-toolbar button,
.body-bg-default .page-actions-toolbar .total-count {
    color: #55595c !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-default .page-actions-toolbar button:hover {
    color: white !important;
    background: #55595c !important;
}

.body-bg-primary .page-actions-toolbar button,
.body-bg-primary .page-actions-toolbar .total-count {
    color: #007bff !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-primary .page-actions-toolbar button:hover {
    color: white !important;
    background: #007bff !important;
}

.body-bg-danger .page-actions-toolbar button,
.body-bg-danger .page-actions-toolbar .total-count {
    color: #dc3545 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-danger .page-actions-toolbar button:hover {
    color: white !important;
    background: #dc3545 !important;
}

.body-bg-success .page-actions-toolbar button,
.body-bg-success .page-actions-toolbar .total-count {
    color: #28a745 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
    padding: 1px 3px 0px 3px !important;
}

.body-bg-success .page-actions-toolbar button:hover {
    color: white !important;
    background: #28a745 !important;
}

.body-bg-blue .page-actions-toolbar button,
.body-bg-blue .page-actions-toolbar .total-count {
    color: #2196f3 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
    height: 36px;
}

.body-bg-blue .page-actions-toolbar button:hover {
    color: white !important;
    background: #2196f3 !important;
}

.body-bg-cyan .page-actions-toolbar button,
.body-bg-cyan .page-actions-toolbar .total-count {
    color: #00bcd4 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-cyan .page-actions-toolbar button:hover {
    color: white !important;
    background: #00bcd4 !important;
}

.body-bg-pink .page-actions-toolbar button,
.body-bg-pink .page-actions-toolbar .total-count {
    color: #e91e63 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-pink .page-actions-toolbar button:hover {
    color: white !important;
    background: #e91e63 !important;
}

.body-bg-default .page-actions-toolbar .filtersBtn,
.body-bg-default .page-actions-toolbar .show-indicators-btn {
    color: #55595c;
    background-color: #55595c !important;
}

.body-bg-primary .page-actions-toolbar .filtersBtn,
.body-bg-primary .page-actions-toolbar .show-indicators-btn {
    color: #007bff;
    background-color: #007bff !important;
}

.body-bg-danger .page-actions-toolbar .filtersBtn,
.body-bg-danger .page-actions-toolbar .show-indicators-btn {
    color: #dc3545;
    background-color: #dc3545 !important;
}

.body-bg-success .page-actions-toolbar .filtersBtn,
.body-bg-success .page-actions-toolbar .show-indicators-btn {
    color: #28a745;
    background-color: #28a745 !important;
}

.body-bg-blue .page-actions-toolbar .filtersBtn,
.body-bg-blue .page-actions-toolbar .show-indicators-btn {
    color: #2196f3 ;
    background-color: #2196f3 !important;
}

.body-bg-cyan .page-actions-toolbar .filtersBtn,
.body-bg-cyan .page-actions-toolbar .show-indicators-btn {
    color: #00bcd4 ;
    background-color: #00bcd4 !important;
}

.body-bg-pink .page-actions-toolbar .filtersBtn,
.body-bg-pink .page-actions-toolbar .show-indicators-btn {
    color: #e91e63;
    background-color: #e91e63 !important;
}
.table-button.edit-button:hover {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.4) !important;
}
.table-button.delete-button:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(239, 68, 68, 0.4) !important;
}
.table-button.download-button:hover {
    background: #f59e0b !important;
    color: #ffffff !important;
    border-color: #f59e0b !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.4) !important;
}
.undo-button:hover {
    background: #06b6d4 !important;
    color: #ffffff !important;
    border-color: #06b6d4 !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(6, 182, 212, 0.4) !important;
}
.table-button.custom-action-button:hover {
    background: #7c3aed !important;
    color: #ffffff !important;
    border-color: #7c3aed !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(124, 58, 237, 0.4) !important;
}

/* Inner jqx-grid-widget div is position:absolute+width:100% — flex it to align buttons */
.grid-actions-cell div.jqx-grid-widget {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
}

/* ---- Pinned columns — right shadow separates from scrollable area ---- */
.jqx-grid-cell.jqx-grid-cell-pinned {
    background-color: white;
    font-weight: bold !important;
    box-shadow: none;
}

.jqx-grid-cell.jqx-grid-cell-pinned-alt {
    font-weight: bold !important;
    background: #f8fafc;
}

/* ---- Sorted column — very subtle tint ---- */
.jqx-grid-cell.jqx-grid-cell-sort {
    background: #fafbfc;
}

.jqx-grid-cell.jqx-grid-cell-sort-alt {
    background: #f2f5f8;
}

/* ---- Filtered column ---- */
.jqx-grid-cell.jqx-grid-cell-filter {
    background: #fafbfc;
}

.jqx-grid-cell.jqx-grid-cell-alt.jqx-grid-cell-filter {
    background: #f2f5f8;
}

/* ---- Selected rows — clearly distinct from hover ---- */
.jqx-grid-cell.jqx-grid-cell-selected {
    background: white !important;
}

.jqx-grid-cell.jqx-grid-cell-alt.jqx-grid-cell-filter.jqx-grid-cell-selected {
    background: transparent !important;
}

/* ---- project-plan's tree grid: selection needs to stay visible on the td,
   unlike flat grids above where white-on-selection is intentional ---- */
.project-planning-grid .jqx-grid-cell.jqx-grid-cell-selected {
    background: #E1F5FE !important;
}

.project-planning-grid .jqx-grid-cell.jqx-fill-state-hover {
    background: #E1F5FE !important;
}

/* ---- portfolio-plan's tree grid: same "selection needs to stay visible"
   fix as project-planning-grid above (Ali, 2026-10-12) -- portfolio-plan's
   jqxTreeGrid never opted into that fix (no matching class), so its
   selected rows fell through to the generic white-on-selection rule above
   and looked unselected. ---- */
.portfolio-planning-grid .jqx-grid-cell.jqx-grid-cell-selected {
    background: #E1F5FE !important;
}

.portfolio-planning-grid .jqx-grid-cell.jqx-fill-state-hover {
    background: #E1F5FE !important;
}

/* ---- project-model-plan's tree grid: same "selection/hover needs to stay
   visible" fix as project-planning-grid/portfolio-planning-grid above
   (Ali, 2026-10-14) -- its jqxTreeGrid never opted into that fix (no
   matching class), so selected/hovered rows (including the pinned "Name"
   column) fell through to the generic white-on-selection rule above and
   looked unselected. ---- */
.project-model-planning-grid .jqx-grid-cell.jqx-grid-cell-selected {
    background: #E1F5FE !important;
}

.project-model-planning-grid .jqx-grid-cell.jqx-fill-state-hover {
    background: #E1F5FE !important;
}

/* ---- Inline-edit state colors (kept as-is — these are applied colors) ---- */
.jqx-grid-cell.updatedRows {
    color: black !important;
    background: #EFA50B !important;
}

.jqx-grid-cell.deletedRows {
    color: white !important;
    background: #D52A3B !important;
}

.jqx-grid-cell.addedRows {
    color: white !important;
    background: #30A487 !important;
}

.body-bg-default .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button {
    color: white !important;
    background: #55595c !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-default .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button:hover {
    color: white !important;
    background: #55595c !important;
}

.body-bg-primary .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button {
    color: white !important;
    background: #007bff !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-primary .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button:hover {
    color: white !important;
    background: #007bff !important;
}

.body-bg-danger .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button {
    color: white !important;
    background: #dc3545 !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-danger .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button:hover {
    color: white !important;
    background: #dc3545 !important;
}

.body-bg-success .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button {
    color: white !important;
    background: #28a745 !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-success .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button:hover {
    color: white !important;
    background: #28a745 !important;
}

.body-bg-blue .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button {
    color: white !important;
    background: #2196f3 !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-blue .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button:hover {
    color: white !important;
    background: #2196f3 !important;
}

.body-bg-cyan .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button {
    color: white !important;
    background: #00bcd4 !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-cyan .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button:hover {
    color: white !important;
    background: #00bcd4 !important;
}

.body-bg-pink .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button {
    color: white !important;
    background: #e91e63 !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-pink .btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle button:hover {
    color: white !important;
    background: #e91e63 !important;
}

.body-bg-default .btn-outline-info.langcustomize {
    color: #55595c !important;
    border-color: #55595c !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-default .btn-outline-info.langcustomize:hover {
    color: white !important;
    background: #55595c !important;
}

.body-bg-primary .btn-outline-info.langcustomize {
    color: white !important;
    color: #007bff !important;
    border-color: #007bff !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-primary .btn-outline-info.langcustomize:hover {
    color: white !important;
    background: #007bff !important;
}

.body-bg-danger .btn-outline-info.langcustomize {
    color: white !important;
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-danger .btn-outline-info.langcustomize:hover {
    color: white !important;
    background: #dc3545 !important;
}

.body-bg-success .btn-outline-info.langcustomize {
    color: white !important;
    color: #28a745 !important;
    border-color: #28a745 !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-success .btn-outline-info.langcustomize:hover {
    color: white !important;
    background: #28a745 !important;
}

.body-bg-blue .btn-outline-info.langcustomize {
    color: white !important;
    color: #2196f3 !important;
    border-color: #2196f3 !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-blue .btn-outline-info.langcustomize:hover {
    color: white !important;
    background: #2196f3 !important;
}

.body-bg-cyan .btn-outline-info.langcustomize {
    color: white !important;
    color: #00bcd4 !important;
    border-color: #00bcd4 !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-cyan .btn-outline-info.langcustomize:hover {
    color: white !important;
    background: #00bcd4 !important;
}

.body-bg-pink .btn-outline-info.langcustomize {
    color: white !important;
    color: #e91e63 !important;
    border-color: #e91e63 !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-pink .btn-outline-info.langcustomize:hover {
    color: white !important;
    background: #e91e63 !important;
}

.body-bg-default .user-menu-info>div {
    background: #55595c !important;
}

.body-bg-primary .user-menu-info>div {
    background: #007bff !important;
}

.body-bg-danger .user-menu-info>div {
    background: #dc3545 !important;
}

.body-bg-success .user-menu-info>div {
    background: #28a745 !important;
}

.body-bg-blue .user-menu-info>div {
    background: #2196f3 !important;
}

.body-bg-cyan .user-menu-info>div {
    background: #00bcd4 !important;
}

.body-bg-pink .user-menu-info>div {
    background: #e91e63 !important;
}

.jqx-grid-toolbar.jqx-grid-toolbar-material div:first-child {
    top: 38% !important;
    margin-top: 0 !important;
}

.not-mobile .user-menu.no-menu {
    position: absolute;
    right: 0;
    top: -15px !important;
}

li.nav-item.module-name {
    position: relative;
    top: 8px;
}

.dropdown-modules a.dropdown-toggle {
    color: white;
    font-size: 18px;
}

.cdk-overlay-container {
    z-index: 9999999999 !important;
}

.form-group.required label.not-required:after {
    content: "" !important;
}

.d-flex.align-items-center.q-tr {
    visibility: hidden;
}

.d-flex .align-items-center .q-tr {
    visibility: hidden;
}

.d-flex .align-items-center .q-transition {
    visibility: hidden;
}

.d-flex.align-items-center.q-transition {
    visibility: hidden;
}

.selected-group-details {
    background-color: aliceblue;
}

.as-horizontal>.as-split-area {
    overflow: hidden !important;
}

query-builder.grid-filters .d-flex.px-2 {
    display: none !important;
}

.grid-filters .row.q-connector {
    border: 1px solid #ddd !important;
}

.grid-filters .row.q-connector .btn-group.order-12 {
    display: none !important;
}

.grid-filters .rule-field {
    width: 100%;
    background: rgba(0, 0, 0, 0.04);
    padding: 5px;
}

.grid-filters .rule-operators {
    position: absolute;
    top: 47px;
}

.rule-operators .ng-select-container {
    /* height: 25px !important;
    min-height: 25px !important;
    border-radius: 0 !important; */
}

.grid-filters .q-tree {
    margin: 0 !important;
    padding: 0 !important;
}

.grid-filters .rule-value-container-margin {
    width: 100%;
    margin-top: 5px;
    padding-left: 80px;
}

.grid-filters .filters-action {
    background: rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid #ddd;
    padding: 3px;
}

.grid-filters .rule-value-container-margin input[type="text"],
.grid-filters .rule-value-container-margin input[type="number"] {
    height: 36px;
}

/* === GRID ACTION BUTTONS (section 2 — mirrors section 1) === */
.table-button,
.undo-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    margin: 0 2px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer;
    text-decoration: none !important;
    vertical-align: middle !important;
    transition: background-color 0.15s ease,
                color 0.15s ease,
                border-color 0.15s ease,
                transform 0.1s ease,
                box-shadow 0.15s ease !important;
}
.table-button.edit-button     { background: #dbeafe !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
.table-button.edit-button:hover { background: #3b82f6 !important; color: #fff !important; border-color: #3b82f6 !important; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(59,130,246,.4) !important; }
.table-button.delete-button     { background: #fee2e2 !important; color: #dc2626 !important; border-color: #fecaca !important; }
.table-button.delete-button:hover { background: #ef4444 !important; color: #fff !important; border-color: #ef4444 !important; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(239,68,68,.4) !important; }
.table-button.download-button   { background: #fef3c7 !important; color: #d97706 !important; border-color: #fde68a !important; }
.table-button.download-button:hover { background: #f59e0b !important; color: #fff !important; border-color: #f59e0b !important; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(245,158,11,.4) !important; }
.undo-button                    { background: #cffafe !important; color: #0e7490 !important; border-color: #a5f3fc !important; }
.undo-button:hover              { background: #06b6d4 !important; color: #fff !important; border-color: #06b6d4 !important; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(6,182,212,.4) !important; }
.table-button.custom-action-button { background: #ede9fe !important; color: #6d28d9 !important; border-color: #ddd6fe !important; }
.table-button.custom-action-button:hover { background: #7c3aed !important; color: #fff !important; border-color: #7c3aed !important; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(124,58,237,.4) !important; }
.jqx-grid-cell.grid-actions-cell { overflow: hidden !important; }
.grid-actions-cell div.jqx-grid-widget {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 0px !important;
    box-sizing: border-box !important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center !important;
 }

/**********************************/
[dir="rtl"] .bar-right {
    margin-right: auto !important;
    margin-left: 0 !important;
}


/* .ct-drawer's own right:0 (unconditional for [dir="rtl"], open or
   closed) now lives in header.component.css — this redundant !important
   override was removed 2026-10-05 while chasing a drawer slide-path bug,
   to cut down on moving parts; it duplicated, never conflicted with, the
   component rule. */

[dir="rtl"] #navbar-mobile>ul:nth-child(2) {
    right: unset !important;
    left: 0;
}

[dir="rtl"] .toolbar-menu {
    right: 0px;
}

[dir="rtl"] .content-page.contain-sections:not(app-scheduler *):not(app-ct-schedule *):not(app-profile *):not(app-task-detail *):not(app-execution-steps-domain-detail *) {
    margin-right: 200px;
}

[dir="rtl"]  app-profile .content-page.contain-sections,
[dir="rtl"] app-scheduler .content-page.contain-sections,
[dir="rtl"] app-ct-schedule .content-page.contain-sections,
[dir="rtl"] app-task-detail .content-page.contain-sections,
[dir="rtl"] app-execution-steps-domain-detail .content-page.contain-sections {
    margin-right: 0px !important;
}

[dir="rtl"] .btn.btn-outline-primary {
    display: inline-flex;
}

[dir="rtl"] li.dropdown.dropdown-notification.nav-item {
    right: 8px;
}

[dir="rtl"] li.dropdown.dropdown-modules.nav-item {
    right: 4px;
}

[dir="rtl"] .btn-outline-primary {
    font-size: small;
}

#navbar-mobile>ul.nav.navbar-nav.float-right.user-menu>li.dropdown.dropdown-user.nav-item.not-mobile-user.show>div>div.user-menu-info>div {
    direction: initial;
}

[dir="rtl"] #main-menu-navigation>li.dropdown.nav-item.first-level.show>ul {
    text-align: right;
}

[dir="rtl"] div.total-count {
    direction: ltr;
}

[dir="rtl"] div.page-view-actions {
    right: unset;
    left: 0;
}

div.jqx-rc-all.jqx-rc-all-material.jqx-widget.jqx-widget-material.jqx-input-group.jqx-input-group-material {
    left: 50px !important;
    border: none;
}

div.jqx-widget-header.jqx-widget-header-material.jqx-grid-toolbar.jqx-grid-toolbar-material>div:nth-child(1) {
    top: 20% !important;
}

.jqx-rc-all.jqx-rc-all-material.jqx-widget.jqx-widget-material.jqx-input-group.jqx-input-group-material input {
    border-color: #d0d7de;
    border-radius: 5px;
    font-size: 12px;
    color: #374151;
    padding: 3px 7px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jqx-rc-all.jqx-rc-all-material.jqx-widget.jqx-widget-material.jqx-input-group.jqx-input-group-material input:focus {
    border-color: #0969da;
    box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.12);
    outline: none;
}

/* ================================================================
   COLUMN FILTER POPUP — modern floating card
   ================================================================ */

/* Outer popup card — white, rounded, elevated */
.jqx-popup-material {
    background: #ffffff !important;
    border: 1px solid #d0d7de !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(149, 157, 165, 0.22), 0 3px 10px rgba(0, 0, 0, 0.07) !important;
}

/* Column menu popup specifically — add 5 px to jqwidgets' calculated 209 px width.
   jqx-grid-menu is only on the column menu, not on condition-dropdown list popups. */
.jqx-grid-menu {
    min-width: 214px !important;
}

/* ── Sort / Group top-level menu items ──
   Actual HTML class is jqx-menu-item-top-material (confirmed from rendered DOM). */
.jqx-menu-item-top-material {
    font-size: 12px !important;
    color: #374151 !important;
    padding: 6px 14px !important;
    transition: background 0.1s ease, color 0.1s ease !important;
}

.jqx-menu-item-top-hover-material {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

/* Fallback for any nested menu items */
.jqx-menu-item-material {
    font-size: 12px !important;
    color: #374151 !important;
    padding: 6px 14px !important;
}

.jqx-menu-item-hover-material {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

/* ── Kill Material Design animated underline bars inside popup ──
   jqwidgets injects <span class="jqx-input-bar-material" style="top:28px">
   inside every dropdown — renders as a 2 px blue line at the bottom edge. */
.jqx-popup-material .jqx-input-bar-material {
    display: none !important;
}

/* Kill floating label (not needed in filter popup) */
.jqx-popup-material .jqx-input-label-material {
    display: none !important;
}

/* Thin 1 px separator between menu sections */
.jqx-menu-item-separator-material,
.jqx-separator-material {
    background: #e8eaed !important;
    height: 1px !important;
    margin: 3px 0 !important;
}

/* ── Dropdown list items (condition type list, And/Or list) ── */
.jqx-listitem-state-normal-material {
    font-size: 12px;
    color: #374151;
    padding: 5px 10px;
}

.jqx-listitem-state-hover-material {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

/* Built-in jqwidgets filter-row toolbar area */
.jqx-widget-header-material.jqx-grid-toolbar-material {
    background: #f6f8fa !important;
}

/* ── "Advanced Filters" checkbox — padding only, separator li above handles dividing ── */
#checkBoxContainer {
    font-size: 12px !important;
    color: #4b5563;
    padding: 6px 12px;
}

/* ── "Show rows where:" label — quiet uppercase section caption ── */
.filter.showwhere {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 9px 12px 4px !important;
}

/* ── Condition rows (filter1/2) and And/Or connector row (filter3) ── */
.filter.filter1,
.filter.filter2,
.filter.filter3 {
    padding: 3px 8px !important;
}

/* ── Value text inputs inside condition rows ──
   Actual HTML class is jqx-filter-input-material (not filtert).
   height !important overrides jqwidgets inline height:16px. ── */
input.jqx-filter-input-material {
    border: 1px solid #d0d7de !important;
    border-radius: 5px !important;
    padding: 4px 8px !important;
    height: 28px !important;
    font-size: 12px !important;
    line-height: 20px !important;
    color: #374151 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input.jqx-filter-input-material:focus {
    border-color: #0969da !important;
    box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.12) !important;
    outline: none !important;
}

/* ── Condition-type dropdowns ("contains", "starts with" …) ── */
.jqx-popup-material .jqx-dropdownlist-state-normal-material,
.jqx-popup-material .jqx-dropdownlist-state-hover-material,
.jqx-popup-material .jqx-dropdownlist-state-selected-material {
    border: 1px solid #d0d7de !important;
    border-radius: 5px !important;
    background: #ffffff !important;
    overflow: hidden;
}

.jqx-popup-material .jqx-dropdownlist-state-hover-material,
.jqx-popup-material .jqx-dropdownlist-state-selected-material {
    border-color: #0969da !important;
    background: #f0f6ff !important;
}

/* Selected item text inside the dropdown button */
.jqx-popup-material .jqx-dropdownlist-content {
    font-size: 12px !important;
    color: #374151 !important;
    padding: 0 6px !important;
}

/* ── Built-in Filter button (primary) ──
   Double-class selector gives specificity 0,2,0 so it beats any popup-scoped
   fill-state override that might otherwise overwrite the blue background. ── */
.filterbutton.jqx-button-material {
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #0077BE !important;
    border-color: #006aa8 !important;
    color: #ffffff !important;
    transition: background 0.12s ease, box-shadow 0.12s ease !important;
}

.filterbutton.jqx-button-material:hover {
    background: #005a8e !important;
    box-shadow: 0 2px 8px rgba(0, 119, 190, 0.4) !important;
}

/* ── Built-in Clear button (secondary) ── */
.filterclearbutton.jqx-button-material {
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: #ffffff !important;
    border: 1px solid #d0d7de !important;
    color: #374151 !important;
    transition: background 0.12s ease, border-color 0.12s ease !important;
}

.filterclearbutton.jqx-button-material:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
}

/* ── Distinct-values mini-grid wrapper ── */
.filterGridContainer {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.filterGridContainer .jqx-grid-cell {
    font-size: 12px !important;
    color: #374151 !important;
}

.filterGridContainer .jqx-grid-cell-alt {
    background: #f5f8ff !important;
}

.filterGridContainer .jqx-grid-cell-selected {
    background: #dbeafe !important;
    color: #1e40af !important;
}

.filterGridContainer .jqx-widget-header {
    background: #f0f4f9 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

/* ── Custom Filter button (primary) ── */
#filterButtonContainer2 .jqx-button-material {
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #0077BE !important;
    border-color: #006aa8 !important;
    color: #ffffff !important;
    transition: background 0.12s ease, box-shadow 0.12s ease !important;
}

#filterButtonContainer2 .jqx-button-material:hover {
    background: #005a8e !important;
    box-shadow: 0 2px 8px rgba(0, 119, 190, 0.4) !important;
}

/* ── Custom Clear button (secondary) ── */
#filterClearButtonContainer .jqx-button-material {
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: #ffffff !important;
    border: 1px solid #d0d7de !important;
    color: #374151 !important;
    transition: background 0.12s ease, border-color 0.12s ease !important;
}

#filterClearButtonContainer .jqx-button-material:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
}

/* ================================================================
   GRID SCROLLBARS — minimal pill style
   ================================================================ */

/* Track — subtle off-white strip, no border noise */
.jqx-scrollbar-state-normal-material {
    background-color: #f1f4f8 !important;
    border: none !important;
    border-radius: 10px !important;
}

/* Thumb normal — visible soft slate, pill shaped */
.jqx-scrollbar-thumb-state-normal-material,
.jqx-scrollbar-thumb-state-normal-horizontal-material {
    background: #c8d0da !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: background 0.15s ease !important;
}

/* Thumb hover — clearly darker */
.jqx-scrollbar-thumb-state-hover-material,
.jqx-scrollbar-thumb-state-hover-horizontal-material {
    background: #8f9eb0 !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* Thumb pressed */
.jqx-scrollbar-thumb-state-pressed-material,
.jqx-scrollbar-thumb-state-pressed-horizontal-material {
    background: #6b7a8d !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* Arrow buttons — fade to invisible (opacity 0), keep space so jqwidgets
   scroll-area calculations remain correct */
.jqx-scrollbar-button-state-normal-material,
.jqx-scrollbar-button-state-hover-material,
.jqx-scrollbar-button-state-pressed-material {
    background: #f1f4f8 !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0;
}

/* ── Native scrollbars on any grid content areas that use browser scrolling ── */
.jqx-widget-content::-webkit-scrollbar,
.jqx-grid-content::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.jqx-widget-content::-webkit-scrollbar-track,
.jqx-grid-content::-webkit-scrollbar-track {
    background: #f1f4f8;
    border-radius: 10px;
}

.jqx-widget-content::-webkit-scrollbar-thumb,
.jqx-grid-content::-webkit-scrollbar-thumb {
    background: #c8d0da;
    border-radius: 10px;
    border: 2px solid #f1f4f8;
}

.jqx-widget-content::-webkit-scrollbar-thumb:hover,
.jqx-grid-content::-webkit-scrollbar-thumb:hover {
    background: #8f9eb0;
}

[dir="rtl"] div.export-panel.popover-panel.open {
    right: unset !important;
    left: 200px;
    direction: ltr;
}

[dir="rtl"] div.show-hide-columns-panel.popover-panel.open {
    right: unset !important;
    left: 25px;
    direction: ltr;
}

[dir="rtl"] button.btn.btn-outline-danger {
    margin-right: 0% !important;
}

[dir="rtl"] div.modal-footer {
    place-content: center !important;
}

.modal-dialog .modal-footer button.btn-outline-secondary {
    margin-right: 0px !important;
}

/*********************************/

.vertical-overlay-menu .main-menu .navigation li.has-sub>a:not(.mm-next):after {
    right: unset !important;
    left: 20px;
    transform: rotate(180deg);
}

.main-menu.menu-light {
    left: unset;
    right: 240px;
}

[dir="rtl"] div>div>div:nth-child(2)>div>div.role-rep>table>thead>tr>th:nth-child(2)>div {
    display: flex;
}

[dir="rtl"] div>div>div:nth-child(2)>div>div.role-rep>table>thead>tr>th:nth-child(2)>div>span {
    margin-right: 128px;
}

.jqx-grid.jqx-grid-material.jqx-reset.jqx-reset-material.jqx-rc-all.jqx-rc-all-material.jqx-widget.jqx-widget-material.jqx-widget-content.jqx-widget-content-material.jqx-touch.jqx-touch-material>div:nth-child(2) {
    z-index: 0;
}

.jqx-reset.jqx-reset-material {
    z-index: 0;
}


/**************************************************/

@media (max-width: 767.98px) {
    .header-navbar .navbar-header .navbar-brand {
        margin-right: auto !important;
        right: 0 !important;
    }
}

@media(max-width:1165px) {
    li.actions-name {
        float: left;
        width: calc(100%/2);
    }
}

@media(max-width:1163px) {
    li.actions-name {
        float: left;
        width: calc(100%);
    }
}

[dir="rtl"] app-dcl-wrapper>app-profile>div>div>div:nth-child(2)>div>div.role-rep>table>thead>tr>th:nth-child(2)>div>span {
    margin-left: 0px !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}

.visually-hidden {
    display: none;
}

.alert-dismissible .btn-close {
    box-sizing: content-box;
    width: 0.5em;
    height: 0.5em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: none;
    opacity: .5;
    float: right;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem;
}


app-tree-comments {
    width: 100%;
}




.comment-wrapper img {
    height: 50px;
    width: 50px;
    border-radius: 25px;
    margin: 12px;
}

comment {
    display: grid;
    grid-template-columns: 8% 92%;
}

comment .comment-sub-details-panel {
    display: grid;
    grid-template-columns: 25% 20% 55%;
}

comment .reply-to {
    text-align: right;
    margin-right: 15px;
    cursor: pointer;
    color: blue;
}


comment .comment-text textarea {
    width: 99%;
    margin: 8px 0px 0px 0px;
    border: solid 1px #b5b0b0;
}




.body-bg-default button.close-all-tabs-button {
    color: #55595c !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-default .button.close-all-tabs-button:hover {
    color: white !important;
    background: #55595c !important;

}

.body-bg-primary button.close-all-tabs-button {
    color: #007bff !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-primary button.close-all-tabs-button:hover {
    color: white !important;
    background: #007bff !important;

}


.body-bg-danger button.close-all-tabs-button {
    color: #dc3545 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-danger button.close-all-tabs-button:hover {
    color: white !important;
    background: #dc3545 !important;

}

.body-bg-success button.close-all-tabs-button {
    color: #28a745 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-success button.close-all-tabs-button:hover {
    color: white !important;
    background: #28a745 !important;

}


.body-bg-blue button.close-all-tabs-button {
    color: #2196f3;
    background: transparent !important;
    border: none;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-blue button.close-all-tabs-button:hover {
    color: white !important;
    background: #2196f3 !important;

}


.body-bg-cyan button.close-all-tabs-button {
    color: #00bcd4 !important;
    background: transparent !important;
    border: none;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-cyan button.close-all-tabs-button:hover {
    color: white !important;
    background: #00bcd4 !important;

}


.body-bg-pink button.close-all-tabs-button {
    color: #e91e63 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-pink button.close-all-tabs-button:hover {
    color: white !important;
    background: #e91e63 !important;

}

.dashboard-page-actions {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    line-height: 32px;
}

.dashboard-page-actions button {
    margin-right: 5px;
}

.dashboard-page-actions-toolbar {
    background-color: #F3F4F5;
    padding-left: 15px;
}

.body-bg-default .dashboard-page-actions-toolbar button {
    color: #55595c !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-default .dashboard-page-actions-toolbar button:hover {
    color: white !important;
    background: #55595c !important;
}

.body-bg-primary .dashboard-page-actions-toolbar button {
    color: #007bff !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-primary .dashboard-page-actions-toolbar button:hover {
    color: white !important;
    background: #007bff !important;
}

.body-bg-danger .dashboard-page-actions-toolbar button {
    color: #dc3545 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-danger .dashboard-page-actions-toolbar button:hover {
    color: white !important;
    background: #dc3545 !important;
}

.body-bg-success .dashboard-page-actions-toolbar button {
    color: #28a745 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-success .dashboard-page-actions-toolbar button:hover {
    color: white !important;
    background: #28a745 !important;
}

.body-bg-blue .dashboard-page-actions-toolbar button {
    color: #2196f3 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-blue .dashboard-page-actions-toolbar button:hover {
    color: white !important;
    background: #2196f3 !important;
}

.body-bg-cyan .dashboard-page-actions-toolbar button {
    color: #00bcd4 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-cyan .dashboard-page-actions-toolbar button:hover {
    color: white !important;
    background: #00bcd4 !important;
}

.body-bg-pink .dashboard-page-actions-toolbar button {
    color: #e91e63 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-pink .dashboard-page-actions-toolbar button:hover {
    color: white !important;
    background: #e91e63 !important;
}

.field-content {
	height: 100%;
	width: 100%;
	text-align: center;
	padding: 10px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: scroll;
	/* Firefox */
	scrollbar-width: none;
	/* Internet Explorer and Edge */
	-ms-overflow-style: none;
}

/* Hide scrollbar in WebKit browsers */
.field-content::-webkit-scrollbar {
	display: none;
}

.no-chart-data-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 20px;
  background: #f9fafb;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  color: #6b7280;
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
}

.no-chart-data-title:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.no-chart-data-title i {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #9ca3af;
}

jqxlistbox span[selected-for-ordering] {
    box-sizing: content-box;
    border-color: #999;
    background: #d1d1d1;
}



.body-bg-default .user-template-action-buttons-container button {
    color: #55595c !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-default .user-template-action-buttons-container button:hover {
    color: white !important;
    background: #55595c !important;
}

.body-bg-primary .user-template-action-buttons-container button {
    color: #007bff !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-primary .user-template-action-buttons-container button:hover {
    color: white !important;
    background: #007bff !important;
}

.body-bg-danger .user-template-action-buttons-container button {
    color: #dc3545 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-danger .user-template-action-buttons-container button:hover {
    color: white !important;
    background: #dc3545 !important;
}

.body-bg-success .user-template-action-buttons-container button {
    color: #28a745 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-success .user-template-action-buttons-container button:hover {
    color: white !important;
    background: #28a745 !important;
}

.body-bg-blue .user-template-action-buttons-container button {
    color: #2196f3 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-blue .user-template-action-buttons-container button:hover {
    color: white !important;
    background: #2196f3 !important;
}

.body-bg-cyan .user-template-action-buttons-container button {
    color: #00bcd4 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-cyan .user-template-action-buttons-container button:hover {
    color: white !important;
    background: #00bcd4 !important;
}

.body-bg-pink .user-template-action-buttons-container button {
    color: #e91e63 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-pink .user-template-action-buttons-container button:hover {
    color: white !important;
    background: #e91e63 !important;
}

pm4pi-grid p-divider > div{
    margin: 5px !important;
}


.aggregation-type-label-in-footer {
    float: left;
    font-size: 10px;
    color: red;
}


.my-reject-confirmation-button,
.my-accept-confirmation-button {
    margin: 5px;
    padding: 8px;
}

.my-reject-confirmation-button i,
.my-accept-confirmation-button i {
    margin: 5px;
}

i.groupable-column-header-title {
    position: absolute;
    color: #13d191;
    font-size: 12px;
    margin: 3px;
    left: 0px;
}

i.aggregatable-column-header-title {
      position: absolute;
    color: #d113a6;
    font-size: 12px;
    margin: 3px;
    margin-left: 20px;
    left: 0px;
}


.email-message-create-card .p-card.p-component{
    border-radius: 0px !important;
    padding: 0px !important;
}

.email-message-create-card .p-card-title {
    font-size: 15px;
}

.email-message-create-card  .p-card-body {
    padding: 12px !important;
}

.email-message-create-card p-autocomplete ul{ 
    border-radius: 0px !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
}

.email-message-create-card input[type="text"]{ 
  border-radius: 0px !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
}

.email-body .angular-editor-textarea {
    min-height: 300px !important;
}

.to-container .p-togglebutton {
    padding: 0px 0px 0px 5px !important;
    width: 140px;
    height: 38px;
    background-color: transparent;
    color: #007bff;
    border: none;
}

.to-container .p-togglebutton span:first-child{
    color: #007bff;
    font-size: 18px;
}

.pi-pi-users:before {
    content: "\e941";
    --webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-family: 'primeicons';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
}
 

.categories-settings-container .jqx-grid-cell-nowrap,
.categories-settings-container .jqx-cell.jqx-grid-cell.jqx-item {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.process-validation-dialog .p-dialog-content {
    min-height: 69vh;
}


.format-line .p-selectbutton.p-buttonset div{
	padding: 0.5rem 0.75rem !important;
}



  .ui-autocomplete {
  max-height: 200px;  /* You can adjust this value */
  overflow-y: auto;
  overflow-x: hidden;
}

:host ::ng-deep   .ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}


/* Optional: Better scrollbar look */
  .ui-autocomplete::-webkit-scrollbar {
  width: 6px;
}
  .ui-autocomplete::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}
  .ui-autocomplete::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.report-format-container .p-card-title {
    color: #007bff !important;
    font-size: 17px;
}

.report-format-container .p-card-body {
    padding: 3px 16px 3px 16px;
}

.report-format-container p-card {
    line-height: 1.7;
}

.my-request-list .customizable-crystl-grid-cell[grid-datafield="status"] {
    height: 87% !important;
    width: 94% !important;
    margin-left: 7px !important;
    margin-top: 3px !important;
    border-radius: 4px;
}


.message-card-warning p-tag span:first-child:not(.p-tag-icon){
    width: 100% !important;
    background: #ffedd5;
    color: #c4541f;
}

.message-card-warning p-tag .p-tag-icon {
    font-size: 16px;
}

.message-card-warning p-tag span.p-tag-value {
    width: 100% !important;
    font-size: 14px;
    font-weight: 100;
}

.message-card-warning {
    margin: 5px;
}

message-card-create{
    width:100%;
}

a.module-item:has(> .communication-management-icon) {
        padding: 4px !important;
}

.tiles-row .icon:has(> .communication-management-icon) {
    top: 17px !important;
    left: 47% !important;
}

.communication-management-icon{
    background-image: url('../icons/communication-icon.png');
    height: 46px;
    width: 46px;
    background-size: cover;
    display: inline-block !important;
    vertical-align: middle;
}

.create-message-modal .modal-dialog {
    max-width: 50%;
}


.float-right-witch-group .q-button-group{
    float: right;
}

expression-builder .q-tree-container,
simple-expression-builder .q-tree-container{
    overflow: visible !important;
}

expression-builder .ng-dropdown-panel ,
simple-expression-builder .ng-dropdown-panel {
  z-index: 999999 !important;
}

.applied-if-variable .ng-select.ng-select-single .ng-select-container,
.validated-if-variable .ng-select.ng-select-single .ng-select-container {
    height: 36px;
    max-width: 224px;
    min-width: 224px;
}



.simple-query-builder .expression-builder-drop-down-operator {
    height: 34px;
    min-width: 150px !important;
    margin: 3px 3px 3px 3px;
    border-radius: 4px;
    text-align: center;
}

#chartdataContainer thead tr th{
    background-color: #f2f5f5; 
    border-top: solid 1px lightgray; 
    border-bottom: solid 1px lightgray;
}

.report-items-card {
    display: block;
    margin: 10px;
    height: 65vh;
}

.report-items-card .p-card-body {
    height: 74vh;
    overflow-y: auto;
}


app-user-reports-list .report-item-parent {
    display: inline;
    margin: 5px;
    font-weight: bold;
}

app-user-reports-list .report-item-leaf {
    display: inline;
    color: blue;
    cursor: pointer;
}
 

.process-flow-condition-value > div > div {
    padding: 0px;
}

pm4pi-grid .page-view-actions > * {
    padding-top: 0px;
}

pm4pi-grid .page-view-actions > input[name="goto_index"]{
    position: static;
}

gridster label{
    margin-bottom: 0px !important;
}


gridster-item app-checkbox label {
    margin-top: 10px;
}

label.df-label {
    color: #6b7280;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px !important;
}


app-request-card .duration-input {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

app-request-card app-duration input.form-control {
    width: 34px !important;
}

label.df-label {
    width: 100%;
}

.mygrid-component-container .jqx-widget-header {
    border: none;
    margin-top: 0px;
}

.jqx-grid-column-header .jqx-checkbox-default.jqx-checkbox-default-material {
    margin-top: 0px;
}


jqxgrid > div {
    border: 1px solid #cdcdcd !important;
    border-radius: 10px !important;
}


.jqx-checkbox-default.jqx-checkbox-default-material {
    height: 18px;
    width: 18px;
}

jqxgrid div[role="row"]:has(.jqx-grid-cell-hover) .jqx-grid-cell {
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.07),
        rgba(0, 0, 0, 0.07)
      ) !important;
}

jqxgrid div[role="row"]:has(.jqx-grid-cell-selected) {
    border-bottom:none ;
    border-top: none ;
}

div[role="gridcell"] > div{
    height: 97%;
}

jqxgrid div[role="row"] *{
    max-height: 97% !important;
}

/* ================================================================
   GROUPS GRID — tree grouping panel
   ================================================================ */

/* Groups-by chips panel at the top */
.groupsGrid .jqx-grid-groups-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    min-height: 38px !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    border-bottom: none !important;
    box-shadow: 0 2px 8px rgba(102,126,234,0.25) !important;
}

/* Each group chip (e.g. "Situation ×") */
.groupsGrid .jqx-grid-groups-header > div {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 20px !important;
    color: #808080 !important;
    padding: 0px 0px 0px 0px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: -12px;
}

/* Remove (×) inside chip */
.groupsGrid .jqx-grid-groups-header > div .jqx-button {
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.7) !important;
    padding: 0 !important;
    transition: color 0.15s !important;
}

.groupsGrid .jqx-grid-groups-header > div .jqx-button:hover {
    color: #fff !important;
    background: transparent !important;
}

/* Column header bar */
.groupsGrid .jqx-widget-header {
    background: linear-gradient(to bottom, #f4f5ff 0%, #eceeff 100%) !important;
    box-shadow: 0 1px 0 rgba(102,126,234,0.15) !important;
}

.groupsGrid .jqx-grid-column-header {
    background: transparent !important;
    border-right: 1px solid rgba(102,126,234,0.14) !important;
    border-bottom: 2px solid rgba(102,126,234,0.32) !important;
}

.groupsGrid .jqx-grid-column-header .column-title,
.groupsGrid .jqx-grid-column-header > div {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #4b4f82 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

/* Grid body */
.groupsGrid .jqx-widget-content {
    background: #fafbff !important;
}

/* Row cells */
.groupsGrid .jqx-grid-cell {
    border-color: rgba(102,126,234,0.07) !important;
    transition: background 0.12s !important;
}

.groupsGrid .jqx-grid-cell:hover {
    background: rgba(102,126,234,0.05) !important;
}

.groupsGrid .jqx-grid-cell-alt {
    background: rgba(102,126,234,0.025) !important;
}

/* Tree expand / collapse toggle */
.groupsGrid .jqx-grid-group-expand,
.groupsGrid .jqx-grid-group-collapse {
    color: #667eea !important;
    opacity: 0.65;
    transition: opacity 0.15s !important;
}

.groupsGrid .jqx-grid-group-expand:hover,
.groupsGrid .jqx-grid-group-collapse:hover {
    opacity: 1 !important;
}

/* Slim scrollbar */
.groupsGrid ::-webkit-scrollbar       { width: 5px !important; height: 5px !important; }
.groupsGrid ::-webkit-scrollbar-thumb { background: rgba(102,126,234,0.32) !important; border-radius: 3px !important; }
.groupsGrid ::-webkit-scrollbar-track { background: transparent !important; }

.jqx-grid-group-column-line {
    top: 2px !important;
}


.jqx-grid-group-column{
    border-radius: 7px !important;
}

.jqx-grid-group-cell{
    border: none !important;
}


.mygrid-component-container .jqx-grid-column-header:not(:has(.jqx-checkbox-default)) > div{
    position: relative !important;
}

.mygrid-component-container .jqx-grid-column-header:not(:has(.jqx-checkbox-default)) > div::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;                      /* vertical center */
    transform: translateY(-50%);   /* true centering */
    width: 1px;
    height: 55%;                   /* < 100% = partial height */
    border-radius: 0 2px 2px 0;
    background: linear-gradient(to right, #f2e6e6, #ccc);
    box-shadow:
      inset -1px 0 1px rgba(255, 255, 255, 0.4),  /* highlight */
      inset  1px 0 1px rgba(0, 0, 0, 0.3);         /* shadow */
  }

i.grid-cell-cond-icon {
    padding: 4px;
    display: table;
}

i.grid-cell-cond-icon {
    margin: 10px 6px 10px 0px;
}


pm4pi-grid .page-view-actions .total-count,
pm4pi-grid .page-view-actions button,
pm4pi-grid .page-view-actions div.dropdown {
    top: 0px;
    display: block;
    padding: 4px 3px 3px 0px !important;
}
 

pm4pi-grid   .dropdown-menu .pm4pi-scrollbar {
    scrollbar-width: none; /* Firefox */
}

pm4pi-grid  .dropdown-menu .pm4pi-scrollbar::-webkit-scrollbar {
    width: 0; /* Chrome/Edge/Safari — no gutter */
}

pm4pi-grid  .dropdown-menu .pm4pi-scrollbar:hover {
    scrollbar-width: thin; /* Firefox */
}

pm4pi-grid  .dropdown-menu .pm4pi-scrollbar:hover::-webkit-scrollbar {
    width: 4px; /* Chrome/Edge/Safari — appear on hover */
}

pm4pi-grid  .dropdown-menu .pm4pi-scrollbar:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border: none;
}

pm4pi-grid  .dropdown-menu .pm4pi-scrollbar:hover::-webkit-scrollbar-track {
    background: transparent;
}

pm4pi-grid  .dropdown-menu.show {
    min-width: 100px;
    min-height: 50px;
}


pm4pi-grid .additional-cell-content:empty {
    display: none !important;
}

.additional-cell-content {
    position: absolute !important;
    right: 15px;
}

pm4pi-grid  div[grid-datafield]:empty {
    background-color: transparent !important;
}

app-date-time-picker .ngb-tp-input-container{
    width: 10em !important;
}


ngb-modal-window:has(.column-style-settings-dialog-header) .modal-content{
    width: 1200px !important;
  }

/* ── Custom theme color ──────────────────────────────────────────────────
   Applied when the user picks an arbitrary color via the color picker.
   All values reference --app-theme-color, which is set on :root via JS.
   ──────────────────────────────────────────────────────────────────── */

.bg-custom {
    background-color: var(--app-theme-color) !important;
}

.body-bg-custom .actions>li>a:hover,
.body-bg-custom .actions>li>button:hover {
    background: var(--app-theme-color);
    border-color: var(--app-theme-color);
}

.body-bg-custom .actions>li>a span,
.body-bg-custom .actions>li>button span {
    border-bottom-color: var(--app-theme-color);
    color: var(--app-theme-color);
}

.body-bg-custom .nav.nav-tabs.nav-top-border .nav-item a.nav-link.active {
    box-shadow: inset 0 2px 0  var(--app-theme-color);
    color: var(--app-theme-color);
}

.body-bg-custom .nav.nav-tabs.nav-top-border .nav-item i.tab-icon-ft.active {
    color: var(--app-theme-color);
}

.body-bg-custom .nav.nav-tabs.nav-top-border .nav-item a.active~.close-tab {
    color: var(--app-theme-color);
}

.body-bg-custom .btn-outline-primary:not(:disabled):not(.disabled).active,
.body-bg-custom .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--app-theme-color) !important;
    border-color: var(--app-theme-color) !important;
}

.body-bg-custom .toolbar-menu .btn,
.body-bg-custom .toolbar-menu .btn:not(.active):hover,
.body-bg-custom .toolbar-menu .btn:not(.active):focus {
    color: var(--app-theme-color) !important;
    border-color: var(--app-theme-color) !important;
}

.body-bg-custom .lds-ring div {
    border-color: var(--app-theme-color) transparent transparent transparent !important;
}

.body-bg-custom .modal-header {
    border-bottom-color: var(--app-theme-color);
    background: var(--app-theme-color);
}

.body-bg-custom .open-help {
    color: var(--app-theme-color);
}

.body-bg-custom .page-actions-toolbar button,
.body-bg-custom .page-actions-toolbar .total-count {
    color: var(--app-theme-color) !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-custom .page-actions-toolbar button:hover {
    color: white !important;
    background: var(--app-theme-color) !important;
}

.body-bg-custom .page-actions-toolbar .filtersBtn,
.body-bg-custom .page-actions-toolbar .show-indicators-btn {
    color:  var(--app-theme-color);
    background-color: var(--app-theme-color) !important;
}

.body-bg-custom .dashboard-page-actions-toolbar button {
    color: var(--app-theme-color) !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-custom .dashboard-page-actions-toolbar button:hover {
    color: white !important;
    background: var(--app-theme-color) !important;
}

.body-bg-custom .common-action-style {
    color: var(--app-theme-color);
}

.body-bg-custom .btn-outline-info.langcustomize {
    color: var(--app-theme-color) !important;
    border-color: var(--app-theme-color) !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-custom .btn-outline-info.langcustomize:hover {
    color: white !important;
    background: var(--app-theme-color) !important;
}

.body-bg-custom .btn-outline-info:not(:disabled):not(.disabled).active {
    color: white !important;
    background: var(--app-theme-color) !important;
    border-color: var(--app-theme-color) !important;
}

.body-bg-custom .user-menu-info>div {
    background: var(--app-theme-color) !important;
}

.body-bg-custom button.close-all-tabs-button {
    color: var(--app-theme-color) !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-custom button.close-all-tabs-button:hover {
    color: white !important;
    background: var(--app-theme-color) !important;
}

.body-bg-custom .user-template-action-buttons-container button {
    color: var(--app-theme-color) !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px;
    box-shadow: none;
}

.body-bg-custom .user-template-action-buttons-container button:hover {
    color: white !important;
    background: var(--app-theme-color) !important;
}

  
app-query-builder jqxgrid .jqx-filter-input{
    padding: 0px !important;
    margin: 4px 0px 0px 4px !important;
}

pm4pi-grid  div[role="row"]:has(.full-row-cond-applied){
    border-radius: 7px 0px 0px 7px;
 }
 
 pm4pi-grid div[role="row"]:has(.full-row-cond-applied) div[columnindex="0"]{
    border-radius: 7px 0px 0px 7px;
 }
 

 app-request-card app-user-defined-attributes .df-field-group {
    display: flex;
    justify-content: flex-start;
    gap: 7px;
    margin-bottom: 5px;
}


app-request-card app-user-defined-attributes label.df-label {
    width: 40% !important;
}

app-request-card app-user-defined-attributes .df-control {
    width: 100%;
}

pm4pi-grid .page-actions button {
    font-size: 12px !important;
    font-family: 'sora' !important;
}


pm4pi-grid .jqx-checkbox-check-indeterminate {
    margin: -3px 0px 0px -2px !important;
    background: transparent center center no-repeat !important;
}

jqxgrid  div[role="gridcell"].jqx-grid-cleared-cell {
    border: none !important;
}

pm4pi-grid .jqx-checkbox-check-checked {
    margin: -2px 0px 0px 2px !important;
}

app-query-builder .jqx-checkbox-check-indeterminate {
    margin: 0.7px 0px 0px 0.7px !important;
}


app-query-builder .jqx-checkbox-check-checked {
    margin: 0px 0px 0px -1px !important;
}

.multiple-requests-completion-dialog-container .request-content{
	height: 150px !important;
}

.multiple-request-complete-dialog .modal-dialog {
    max-width: 60%;
}

div[data-query-id]{
    cursor: pointer;
}

pm4pi-grid  .jqx-checkbox-default {
    height: 14px !important;
    width: 14px !important;
}

pm4pi-grid .jqx-checkbox-check-checked::before {
    color: white;
    font-size: 10px;
}


pm4pi-grid .jqx-checkbox-check-checked:not(jqxlistbox *){
    background: transparent  center center no-repeat !important;
}

pm4pi-grid .custom-grid-actions-container{
    display: flex;
    top: 3px;
    position: absolute;
}

pm4pi-grid  .page-actions-toolbar .custom-grid-actions-container .dropdown-item span {
    width: 16px;
    text-align: center;
    color: #8a8aa3 !important;
}

pm4pi-grid .page-actions-toolbar .custom-grid-actions-container .dropdown-item:hover span {
    color: #4f46e5 !important;
}


.cdk-overlay-pane:has(.task-actions){
    background-color: white;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
    border-radius: 7px;
    border: solid 0.6px lightgray;
  }

  .precondition-modal-body .ng-select,
  .action-modal-body .ng-select,
  .precondition-modal-body input[type="text"]:not(.ng-select *),
  .action-modal-body input[type="text"]:not(.ng-select *) {
    border: solid 0.5px lightgray !important;
    border-radius: 7px !important;
  }


.request-current-task-dialog .modal-content .request-content .pm4pi-scrollbar  {
    height: 77vh !important;
}

.request-current-task-dialog .modal-content .request-content {
    height: 78vh !important;
}

.multiple-request-complete-dialog .ccut-modal-body{
    min-height: 15vh !important;
    max-height: 64vh !important;
}

.multiple-request-complete-dialog .request-content{
	min-height: 38vh !important;	
}