.col-form-label > label,
.col-form-label > label.control-label,
.col-form-label.align-items-end {
    text-align: right;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 0
}

/* override btn-secondary color 
.btn-secondary {
    color: var(--bs-gray-900);
    background-color: var(--bs-gray-400) !important;
}

.btn-check:checked + .btn.btn-secondary, .btn-check:active + .btn.btn-secondary, .btn.btn-secondary:focus:not(.btn-active), .btn.btn-secondary:hover:not(.btn-active), .btn.btn-secondary:active:not(.btn-active), .btn.btn-secondary.active, .btn.btn-secondary.show, .show > .btn.btn-secondary {
    color: var(--bs-gray-900);
    background-color: var(--bs-gray-500) !important;
}*/
.btn.btn-secondary.disabled {
    opacity: 0.4;
}

/* make table borders more distinct */
table.border, .table-primary, .table:not(.table-bordered) tr, .table:not(.table-bordered) th, .table:not(.table-bordered) td {
    border-color: var(--bs-gray-600) !important;
}

.table:not(.table-bordered).table-row-bordered tr {
    border-bottom-color: var(--bs-gray-500);
}

/* remove rounded corners from tables until they can be correctly colored */
.table:not(.table-bordered).table-rounded {
    border-radius: 0;
}

/* make flatpickr today's date more distinct */
.flatpickr-day.today, .flatpickr-day.today:hover, .flatpickr-day.today:focus {
    background: var(--bs-warning);
    color: var(--bs-warning-text);
}
.flatpickr-day.today:hover, .flatpickr-day.today:focus {
    border-color: var(--bs-gray-600);
}

/* darkens form input borders */
.form-control, .form-select {
    border: 1.5px solid var(--bs-gray-500);
}

    .form-control:disabled {
        border: 1.5px solid var(--bs-gray-400);
    }

/* darkens text for checkbox/radio button text */
.form-check-label {
    color: var(--bs-gray-800);
}

.form-check, .form-check-input {
    border-color: var(--bs-gray-500);
}

td .form-check-input {
    background-color: var(--bs-body-bg);
}

.form-check, .form-check-input:checked {
    /*background-color: var(--bs-primary);*/
    border-color: var(--bs-primary);
}

input {
}


.scroll-div {
    height: 600px;
    overflow-y: scroll;
}
    /* width */
    .scroll-div::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    .scroll-div::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    .scroll-div::-webkit-scrollbar-thumb {
        background: #888;
    }

        /* Handle on hover */
        .scroll-div::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

/* the lookup inv key button was overflowing its column */
#btn_InvKey > span.svg-icon {
    margin-right: 0;
}

#btn_InvKey > span > i {
    padding-right: 0;
}

/* z-index fix for multiple modals at once */
https://stackoverflow.com/questions/19528173/bootstrap-open-another-modal-in-modal
/*#modal_inventory_lookup {
    z-index: 1052 !important;
}
#modal_bin_location {
    z-index: 1051 !important;
}*/
/*.modal:nth-of-type(even) {
    z-index: 1062 !important;
}

.modal-backdrop.show:nth-of-type(even) {
    z-index: 1061 !important;
}*/
/* promoted apps */
#sec-promoted-applications {
    height: 300px;
    padding: 0 !important;
}

.pa-label {
    position: absolute;
    padding: 10px;
    border-radius: 0;
    top: 0;
    color: #fff !important;
}

.promoted-apps-container,
.promoted-apps-container.container,
.promoted-apps-container.container > .row,
.promoted-apps-container.container > .row > a,
.promoted-apps-container.container > article,
.promoted-apps-container.container > article > a,
.promoted-apps-container > .row,
.promoted-apps-container > .row > a,
.promoted-apps-container > article,
.promoted-apps-container > article > a,
.promoted-apps-container > a {
    height: inherit;
    padding: 0;
}

.promoted-apps {
    position: relative;
    height: inherit;
    min-height: 135px;
    padding: 50px 0 50px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

    .promoted-apps.force-5 {
        width: 20%;
        float: left;
        position: relative;
    }

    .promoted-apps .pa-icon {
        text-align: center;
        margin: 19px auto 16px;
    }

    .promoted-apps .pa-top {
        width: 70px;
        height: 70px;
        background: #fff;
        color: var(--bs-gray-500);
        border: 2px solid #464646;
        border-radius: 100px;
        padding: 16px 0;
        position: relative;
    }

        .promoted-apps .pa-top:after {
            position: absolute;
            background: transparent;
            content: '';
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 500px;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            transition: all 0.4s;
        }

        .promoted-apps .pa-top span {
            font-size: 30px;
        }

    .promoted-apps .pa-bottom span {
        width: 31px;
        height: 31px;
        padding-top: 6px;
        font-size: 20px;
        color: #929292;
        background: transparent;
        border: 1px solid #464646;
        border-radius: 100px;
    }

    .promoted-apps .pa-text {
        width: 95%;
        text-align: center;
        margin: auto;
    }

    .promoted-apps .pa-content-header {
        text-transform: uppercase;
        font-size: 20px;
    }

    .promoted-apps .pa-content-desc {
        font-size: 16px;
        color: #717171;
        margin-top: 10px;
        margin-bottom: 20px;
        font-weight: 100;
    }

    /* Promoted Applications Hover Styles */

    .promoted-apps:hover {
        background: #009ef7;
        color: #fff;
    }

        .promoted-apps:hover .pa-top {
            border: 2px solid #464646;
            background: #fff;
        }

            .promoted-apps:hover .pa-top:after {
                border: 2px solid white;
                -webkit-transform: scale(1.2);
                -moz-transform: scale(1.2);
                -ms-transform: scale(1.2);
                transform: scale(1.2);
            }

            .promoted-apps:hover .pa-top i {
                color: #009ef7;
            }

        .promoted-apps:hover .pa-text {
            color: #fff;
        }

        .promoted-apps:hover .pa-content-desc {
            color: #fff;
        }

        .promoted-apps:hover .pa-bottom i {
            border: 1px solid #fff;
            color: #fff;
        }

.card {
    background-color: transparent;
}

/* File Modal */
#file-list, #file-form {
    transition: max-width 0.5s ease; /* Adjust 0.5s to control the animation speed */
}

#file-form {
    overflow: hidden;
}

/* Increase popover container size for 320px thumbnails */
/* Scoped only to Materials Lookup thumbnail popovers */
.popover-thumb {
    /* Use Bootstrap theme variables for consistency */
    --bs-popover-max-width: 380px;
    --bs-popover-bg: var(--bs-light); /* matches form bg */
    --bs-popover-border-color: var(--bs-gray-400); /* subtle border */
    --bs-popover-box-shadow: 0 8px 20px rgba(0,0,0,.25);
    max-width: 380px !important; /* fallback safety net */
    border-radius: 0.75rem;
}

    .popover-thumb .popover-body {
        padding: 0.5rem;
    }

    /* outline the preview image a bit for contrast */
    .popover-thumb img {
        display: block;
        border-radius: 0.5rem;
        border: 1px solid var(--bs-gray-500);
        background-color: var(--bs-white);
    }


.btn.btn-secondary {
    background-color: var(--bs-gray-400) !important;
    border-color: var(--bs-gray-400) !important;
}
    .btn-check:checked + .btn.btn-secondary,
    .btn.btn-secondary:hover:not(.btn-active),
    .btn.btn-secondary:focus:not(.btn-active),
    .btn.btn-secondary:active:not(.btn-active),
    .btn.btn-secondary.active,
    .btn.btn-secondary.show,
    .show > .btn.btn-secondary {
        background-color: var(--bs-gray-500) !important;
        border-color: var(--bs-gray-500) !important;
    }

/* ==== DataTables v2 header controls (Bootstrap 5/Metronic solid) ==== */
/* borders on elements in datatable header */
.form-select.form-select-solid {
    border-color: var(--bs-gray-500);
}

.form-control.form-control-solid {
    border-color: var(--bs-gray-500);
}
/* Put label + input on the same row for the search area */
#TblResults_wrapper .col-12.col-sm-3 > div {
    display: flex;
    align-items: center;
    gap: .5rem; /* space between label and input */
}

#TblResults_wrapper label[for^="dt-search"] {
    margin: 0;
    white-space: nowrap;
}

/* Optional: control the width of the search input */
#TblResults_wrapper input#dt-search-0.form-control {
    width: 16rem; /* ~256px; adjust if you like */
    max-width: 100%;
}

/* Restore borders on Metronic “solid” controls inside DT header */
#TblResults_wrapper .form-control.form-control-solid,
#TblResults_wrapper .form-select.form-select-solid {
    border: 1.5px solid var(--bs-gray-500) !important;
    background-color: var(--bs-body-bg) !important;
    border-radius: .375rem; /* match Bootstrap look */
    line-height: 1.5;
    padding: .375rem .75rem; /* match your site’s inputs */
}

    /* Disabled state to match your global style */
    #TblResults_wrapper .form-control.form-control-solid:disabled,
    #TblResults_wrapper .form-select.form-select-solid:disabled {
        border-color: var(--bs-gray-400) !important;
    }

/* Keep the page-length <select> compact */
#TblResults_wrapper select#dt-length-0.form-select {
    width: auto;
    min-width: 70px;
}

/* ---------------------------------------------------------
   Fix icon centering inside <a class="btn btn-icon ...">
   Metronic 8.3 changed flex/padding behavior
   --------------------------------------------------------- */
a.btn.btn-icon {
    display: inline-flex !important; /* ensure flex layout applies */
    align-items: center !important; /* vertical centering */
    justify-content: center !important; /* horizontal centering */
    line-height: 1 !important; /* prevents extra vertical space */
    padding: 0 !important; /* remove inherited uneven padding */
    height: calc(1.5rem + 1.5rem) !important; /* match icon button sizing */
    width: calc(1.5rem + 1.5rem) !important; /* make it square */
}

    /* tighten icon itself so it remains visually centered */
    a.btn.btn-icon i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

/* Give the dropdown a visible border + contrast + elevation */
.select2-container--bootstrap5.select2-container--open .select2-dropdown {
    border: 1px solid var(--bs-gray-500) !important;
    background: var(--bs-body-bg) !important;
    border-radius: .475rem !important;
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.15) !important;
}

/* Ensure it sits above neighboring fields */
.select2-container--bootstrap5.select2-container--open {
    z-index: 2000 !important; /* higher than form fields, lower than modals */
}

/* Tidy the search box inside the dropdown */
.select2-container--bootstrap5 .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--bs-gray-400) !important;
    border-radius: .375rem !important;
    padding: .375rem .5rem !important;
}

/* Make the results list readable & scrollable */
.select2-container--bootstrap5 .select2-results__options {
    max-height: 320px !important;
    overflow-y: auto !important;
    background: var(--bs-body-bg) !important;
}

/* Row styling + separators */
.select2-container--bootstrap5 .select2-results__option {
    padding: .5rem .75rem !important;
    border-bottom: 1px solid var(--bs-gray-200) !important;
}

/* Hover/keyboard highlight state */
.select2-container--bootstrap5 .select2-results__option--highlighted {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary-text) !important;
}

/* “Please enter … digits” message style */
.select2-container--bootstrap5 .select2-results__message {
    color: var(--bs-gray-700) !important;
    padding: .5rem .75rem !important;
    border-top: 1px dashed var(--bs-gray-300) !important;
}

/* ApexCharts toolbar export menu - force readable colors */
.apexcharts-toolbar .apexcharts-menu {
    background: var(--bs-black) !important; /* dark background */
    border: 1px solid var(--bs-gray-400) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.35) !important;
}

    .apexcharts-toolbar .apexcharts-menu .apexcharts-menu-item {
        color: var(--bs-gray-100) !important; /* light text */
    }

        .apexcharts-toolbar .apexcharts-menu .apexcharts-menu-item:hover {
            background: var(--bs-gray-800) !important;
            color: var(--bs-white) !important;
        }