/*
    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.ar {
    font-family: 'droidkufi' !important;
}

.ar .navbar-nav {
    padding-right: 0 !important;
}

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

.ar .header-navbar {
    font-family: 'droidkufi' !important;
}

.ar .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;
}

.ar a.close-tab {
    right: auto;
    left: 4px;
}

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

.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.ar {
    direction: rtl !important;
}

.ar .navbar-brand {
    margin-right: 0;
    left: 0;
    right: -1em;
}

.ar #main-menu-navigation a.nav-link i {
    margin-right: 0;
    margin-left: 0.5rem;
}

.ar .float-left {
    float: right !important;
}

.ar .mr-auto,
.ar .mx-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.ar .actions {
    left: 0;
    right: auto;
}

.ar .card-header .card-title {
    text-align: right;
}

.ar label {
    width: 100%;
    text-align: right;
}

.ar .fa-pull-right,
.ar .pull-right {
    float: left !important;
}

.ar .btn-group>.btn-group:not(:last-child)>.btn,
.ar .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ar .btn-group>.btn-group:not(:first-child)>.btn,
.btn-group>.btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ar .btn-group {
    width: 100%;
    text-align: right;
}

.ar .customizer {
    left: -400px;
    right: auto;
    transition: left .4s cubic-bezier(.05, .74, .2, .99)
}

.ar .customizer.open {
    left: 0;
    right: auto;
}

.ar .custom-control {
    padding-right: 1.5rem;
    padding-left: 0;
}

.ar .custom-control-label::before {
    left: auto;
    right: -1.5rem;
}

.ar .custom-control-label::after {
    left: auto;
    right: -1.5rem;
}

body.ar {
    text-align: right;
}

.ar .customizer .customizer-close {
    right: auto;
    left: 10px;
}

.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);
}

.ar .dropdown-user.not-mobile-user {
    right: auto !important;
    left: -25px;
}

.ar .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;
}

/* ---- 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;
 }

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

.ar #navbar-mobile>ul:nth-child(2) {
    right: unset !important;
    left: 0;
}

.ar .toolbar-menu {
    right: 0px;
}

.ar .content-page.contain-sections {
    margin-right: 150px;
}

.ar .btn.btn-outline-primary {
    display: inline-flex;
}

.ar li.dropdown.dropdown-notification.nav-item {
    right: 8px;
}

.ar li.dropdown.dropdown-modules.nav-item {
    right: 4px;
}

.ar .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;
}

.ar #main-menu-navigation>li.dropdown.nav-item.first-level.show>ul {
    text-align: right;
}

.ar div.total-count {
    direction: ltr;
}

.ar 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;
}

.ar div.export-panel.popover-panel.open {
    right: unset !important;
    left: 200px;
    direction: ltr;
}

.ar div.show-hide-columns-panel.popover-panel.open {
    right: unset !important;
    left: 25px;
    direction: ltr;
}

.ar button.btn.btn-outline-danger {
    margin-right: 0% !important;
}

.ar 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;
}

.ar div>div>div:nth-child(2)>div>div.role-rep>table>thead>tr>th:nth-child(2)>div {
    display: flex;
}

.ar 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%);
    }
}

.ar 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%;
}

.project-dropdown {
    width: 100% !important;
}

.create-message-modal .modal-footer {
    display: block;
}


.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;	
}