/*:root {
    --primary-color: #0061f2;
    --primary-card-color: #339ab7;
    --secondary-card-color: #337ab7;
    --tertiary-card-color: #00b1cb;
    --mainImagePrimary: #0061f2;
    --mainImageSecondary: #6900c7cc;
    --primary-MainImage: linear-gradient(135deg, var(--mainImagePrimary) 0%, var(--mainImageSecondary)) !important;
    --dashboard-admin-image: url("https://source.unsplash.com/1600x900/?abstract,blue");
    --dashboard-supplier-image: url("https://source.unsplash.com/1600x900/?abstract,blue");
    --primary-text-color: #363d47;
    --secondary-text-color: #69707A;
    --tertiary-text-color: #a7aeb8;
    --alternative-text-color: #ffffff;
    --primary-panel-color: #ffffff;
    --seconday-panel-color: #2128320d;
    --primary-shadow-color: rgb(33 40 50 / 15%);
    --primary-background-color: #f2f6fc;
    --notification-color: #e81500;
    --notification-success-color: green;
    --notification-danger-color: blue;
    --login-page-panel-color: white;
    --login-background-image: url("https://source.unsplash.com/1600x900/?abstract,blue");
}
*/
html {
  font-size: 14px;
}


.dx-datagrid-content .dx-datagrid-table .dx-row > td, .dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
    vertical-align: middle !important;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #f8f9fa;
    border-radius: 4px;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}


#autocomplete {
    width: 300px;
    padding: 7px;
} 

.ui-widget-content {
    text-align: left;
    z-index:9999 !important;
}

.autocomplete-suggestions {
    text-align: left;
    border: 1px solid #999;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background: #FFF;
    overflow: auto;
}

.autocomplete-suggestion {
    padding: 5px 5px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399FF;
}

.autocomplete-group {
    padding: 2px 5px;
}

    .autocomplete-group strong {
        display: block;
        border-bottom: 1px solid #000;
    }

.ui-autocomplete .highlight {
    color: blue;
}


/* Custom tooltip offset */
.custom-tooltip-offset .tooltiptreeview {
    top: calc(100% + 10px) !important; /* Adjust the offset as needed */
}

.tree {
    position: relative;
    background: white;
    margin-top: 20px;
    padding: 30px;
    font-weight: 400;
    color: #212529;
}

    .tree span {
        font-size: 13px;
        font-style: italic;
        letter-spacing: .4px;
        color: #a8a8a8;
    }

    .tree .fa-folder-open, .tree .fa-folder {
        color: #007bff;
    }

    .tree .fa-html5 {
        color: #f21f10;
    }

    .tree ul {
        padding-left: 5px;
        list-style: none;
    }

    .tree li {
        position: relative;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 15px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .tree &:before {
        position: absolute;
        top: 15px;
        left: 0;
        width: 10px;
        height: 1px;
        margin: auto;
        content: '';
        background-color: #666;
    }

    .tree &:after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 1px;
        height: 100%;
        content: '';
        background-color: #666;
    }

    .tree &:last-child:after {
        height: 15px;
    }



    .tree a, .tree .contextMenu {
        cursor: pointer;
    }

    .tree &:hover {
        text-decoration: none;
    }

    .tree .context-menu {
        display: none;
        position: absolute;
        z-index: 1000;
    }

    .tree .contextMenu {
        font-size: 1rem;
    }

    .tree .context-menu .dropdown-menu {
        display: block;
        position: static;
        float: none;
    }

    /* Adjust tooltip positioning within the tree view */
    .tree .tooltip {
        /* Add custom positioning styles here */
        /* For example: */
        left: 50%;
        transform: translateX(-50%);
    }

.dx-datagrid-rowsview .dx-data-row:hover {
    cursor: pointer !important;
}

#sidebarToggleArrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc((0.875rem * 1) + (0.875rem * 2) + (2px)) !important;
    height: calc((0.875rem * 1) + (0.875rem * 2) + (2px)) !important;
    padding: 0;
    margin: 1.5rem auto 0;
    background-color: var(--seconday-panel-color);
    border: 1px solid #ccc;
    border-radius: 50%;
    color: var(--primary-text-color);
    font-size: 1rem;
    cursor: pointer;
}

.dx-icon-folder:before,
.dx-icon-activefolder:before {
    content: none !important;
}

/* 2) Inject your SVG as a background */
.dx-icon-folder,
.dx-icon-activefolder {
    /* make sure it still sizes like an icon */
    display: inline-block !important;
    width: 1.125rem; /* tweak to taste */
    height: 1.125rem; /* tweak to taste */
    background: url('/img/thumbnails/mini-folder-icon.svg') center center no-repeat !important;
    background-size: contain !important;
    font-size: 0 !important; /* hide any leftover text */
}

.dx-filemanager-dirs-tree
.dx-treeview-node
.dx-treeview-toggle-item-visibility,
.dx-filemanager-dirs-tree
.dx-treeview-node
.dx-treeview-expander-icon-stub {
    display: inline-block !important;
    width: 18px !important;
    min-width: 18px !important;
    text-overflow: ellipsis;
}

.dx-filemanager-dirs-tree .dx-treeview-item-content {
    display: flex !important;
    align-items: center !important;
    text-overflow: ellipsis;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* let the text grow and ellipsize */
.dx-filemanager-dirs-tree .dx-filemanager-dirs-tree-item-text {
    flex: 1 1 auto !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* push the overflow “⋮” button to the far right */
.dx-filemanager-dirs-tree .dx-filemanager-file-actions-button {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
}

.dx-filemanager-dirs-tree .dx-treeview-item-content .dx-filemanager-dirs-tree-item-text {
    display: inline-block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    font-weight: 700;
}
.dx-datagrid-content .dx-datagrid-table.dx-datagrid-table-fixed { 
    color: black !important;
}
.dx-datagrid-borders > .dx-datagrid-pager {
    margin-top: -1px; 
}

.dx-widget {
    font-size: 12px !important;
    font-family: var(--bs-body-font-family) !important;
}

.dx-datagrid-table .dx-row > td[role="columnheader"],
.dx-datagrid-table .dx-row > td[role="gridcell"] {
    padding: 5px 5px !important; 
}
.dx-texteditor-input {
    padding: 5px !important;
    min-height: 30px !important;
}
.dx-button .dx-button-content {
    padding-block: 5px !important;
}
.dx-datagrid-group-panel {
    font-size: 12px !important;
}
.dx-datagrid-group-panel .dx-group-panel-item {
    padding: 5px !important;
}


.btn-transparent-dark svg,
.sidenav-light,
.dropdown-user-details-name,
.breadcrumb-item,
.page-header.page-header-light .page-header-title,
.dx-datagrid-content .dx-datagrid-table.dx-datagrid-table-fixed,
.dx-datagrid-rowsview .dx-row.dx-group-row:not(.dx-row-focused),
.dx-texteditor-input,
.dx-button-mode-outlined,
.dx-button-mode-contained,
.dx-button-mode-contained .dx-icon,
.dx-dropdowneditor-icon,
.dx-datagrid-group-opened,
.dx-menu-item,
.dx-widget,
h5,
form-group,
.dx-button-text,
.dx-datagrid-nodata,
.dx-button-mode-outlined .dx-icon,
.form-control:focus,
h4,
.topnav.navbar-light .navbar-brand {
    color: var(--primary-text-color) !important;
}

.dx-toolbar .dx-button-text {
    color: var(--primary-text-color);
}

.dx-filemanager .dx-toolbar .dx-button-text {
    color: black !important;
}

.modal {
    --bs-modal-color: var(--primary-text-color);
}

.dropdown-notifications-header {
    color: var(--alternative-text-color);
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

.btn:focus {
    box-shadow: unset !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

.dropdown-item-icon svg,
.page-header-icon svg,
.sidenav-light .sidenav-menu .sidenav-menu-heading,
.sidenav-light .sidenav-menu .nav-link .nav-link-icon,
.sidenav-light .sidenav-menu .nav-link,
.sidenav-light .sidenav-footer .sidenav-footer-subtitle,
.btn-transparent-dark,
.text-dark,
.dx-placeholder,
.dx-searchbox .dx-icon-search::before,
.dx-datagrid .dx-header-filter::before,
.dx-datagrid-group-panel .dx-sort,
.dx-datagrid-group-panel .dx-group-panel-item,
.footer-admin.footer-light,
.dx-field-item-label-text,
.dropdown-user-details-email,
.recent-activity {
    color: var(--secondary-text-color) !important;
}
.page-header.page-header-dark .page-header-subtitle {
    color: rgb(255 255 255);
}
.dx-filemanager-file-actions-button .dx-button .dx-icon,
.dx-menu-item-text {
    color: #000 !important;
}

.sidenav-light .sidenav-menu .nav-link.active,
.sidenav-light .sidenav-menu .nav-link.active .nav-link-icon,
.card:not([class*=bg-]) .card-header,
a,
.text-primary,
.nav-link,
.dx-checkbox-checked .dx-checkbox-icon,
.activity {
    color: var(--primary-color) !important;
}

.bg-gradient-primary-to-secondary {
    background-image: var(--primary-MainImage) !important;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.card {
    --bs-card-bg: var(--primary-panel-color) !important;
    box-shadow: 0 0 0.5rem var(--primary-shadow-color) !important;
}

.card1{
    background-color: var(--primary-card-color)
}
.card2 {
    background-color: var(--secondary-card-color)
}
.card3 {
    background-color: var(--tertiary-card-color)
}

.timeline-item-marker-text {
    color: var(--tertiary-text-color) !important;
}

.page-header-title,
.feather-activity svg,
.text-white,
.dropdown-notifications-header,
.text-white-75 {
    color: var(--alternative-text-color) !important;
}

#layoutAuthentication .btn-primary {
    color: #fff !important;
}

svg.feather.feather-activity {
    color: var(--alternative-text-color) !important;
}

.bg-white,
.dx-datagrid > .dx-datagrid-headers,
.dx-button-mode-contained,
.dx-datagrid > .dx-datagrid-rowsview,
.modal-content,
.sidenav-light {
    --bs-bg-opacity: 1;
    background-color: var(--primary-panel-color) !important;
}

.card-header {
    --bs-card-bg: var(--primary-panel-color) !important;
    --bs-card-cap-bg: var(--seconday-panel-color) !important;
}

.sidenav-light .sidenav-footer,
.form-control[readonly],
.dx-datagrid-rowsview .dx-row.dx-group-row:not(.dx-row-focused) {
    background-color: var(--seconday-panel-color) !important;
}

.bg-light {
    background-color: var(--seconday-panel-color) !important;
    color: var(--primary-text-color);
}

input {
    background-color: var(--primary-panel-color) !important;
    border: 1px solid var(--seconday-panel-color) !important;
}

.btn-light {
    background-color: var(--seconday-panel-color) !important;
    border: 1px solid var(--seconday-panel-color) !important;
    color: var(--primary-color) !important;
}

.dx-datagrid .dx-row-alt > td, .dx-datagrid .dx-row-alt > tr > td {
    background-color: var(--seconday-panel-color) !important;
}

.dx-button-mode-contained,
dx-texteditor-input,
.dx-texteditor.dx-editor-outlined,
.dx-datagrid-table {
    background-color: var(--primary-panel-color);
}

.shadow-right,
.shadow {
    box-shadow: 0 0.15rem 1rem var(--primary-shadow-color) !important;
}

.dropdown-menu,
.dx-master-detail-cell,
body {
    background-color: var(--primary-background-color) !important;
}


.notification-bell {
    color: var(--alternative-text-color) !important;
    background-color: var(--notification-color) !important;
}



* {
    --scrollbar-color-thumb: var(--primary-color);
    --scrollbar-color-track: var(--primary-panel-color);
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers */
@supports (scrollbar-width: auto) {
    * {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* WebKit-based browsers (Chrome, Edge, Safari, etc.) */
@supports selector(::-webkit-scrollbar) {
    *::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }

    *::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }

    *::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

.bg-info {
    background-color: var(--primary-color) !important;
    color: var(--primary-text-color) !important; 
}

.bg-danger,
.bg-warning {
    background-color: var(--notification-danger-color) !important;
    color: var(--primary-text-color) !important;
}

.bg-success {
    background-color: var(--notification-success-color) !important;
    color: var(--primary-text-color) !important;
}

.form-control {
    background-color: var(--seconday-panel-color);
    color: var(--primary-text-color);
}

.dx-button-mode-contained.dx-button-default {
    background-color: var(--primary-color);
    border-color: #ddd;
}

.table {
    --bs-table-color: var(--primary-text-color);
}

.btn-secondary {
    --bs-btn-color: var(--alternative-text-color);
    --bs-btn-bg: var(--secondary-card-color);
    --bs-btn-border-color: var(--secondary-card-color);
    --bs-btn-hover-color: var(--alternative-text-color);
    --bs-btn-hover-bg: var(--secondary-card-color);
    --bs-btn-hover-border-color: var(--secondary-card-color);
    --bs-btn-focus-shadow-rgb: 128, 38, 207;
    --bs-btn-active-color: var(--alternative-text-color);
    --bs-btn-active-bg: var(--secondary-card-color);
    --bs-btn-active-border-color: var(--secondary-card-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--alternative-text-color);
    --bs-btn-disabled-bg: var(--secondary-card-color);
    --bs-btn-disabled-border-color: var(--secondary-card-color);
    color: var(--alternative-text-color) !important;
}

.btn-primary {
    --bs-btn-color: var(--alternative-text-color);
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: var(--alternative-text-color);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: 38, 121, 244;
    --bs-btn-active-color: var(--alternative-text-color);
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--alternative-text-color);
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: #0061f2;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
}


.btn-sm {
    border: 1px solid var(--primary-text-color) !important;
    color: var(--primary-text-color) !important;
    background-color: transparent !important;
}

#layoutAuthentication .card {
    background-color: var(--login-page-panel-color);
}

.logInForm {
    background-color: var(--login-page-panel-color) !important;
}

    .logInForm .btn-secondary {
        color: #fff !important;
    }

    .form-group {
        color: var(--primary-text-color) !important;
    }

.form-control:focus {
    background-color: var(--primary-background-color) !important;
    border: 1px solid var(--primary-text-color) !important;
    box-shadow: 0 0 0 0 white !important;
}

.dropdown-item:active {
    background-color: var(--bs-dropdown-link-hover-bg) !important;
    color: var(--primary-color) !important;
}

.dropdown-user .dropdown-item-icon:active,
.dropdown-user .dropdown-item:active {
    color: var(--primary-color) !important;
}

.dropdown-menu .dropdown-item.active .dropdown-item-icon, .dropdown-menu .dropdown-item:active .dropdown-item-icon {
    color: var(--primary-color) !important;
}

.bg-select {
    background-color: #27a8f7 !important;
    color: var(--primary-text-color) !important;
}

input[type=checkbox] {
    border-radius: .25em;
    background-color: var(--primary-color) !important;
}