/* Apply 12px font size to the body and all child elements */
body {
    font-size: 12px !important;
    overflow-x: hidden;
}

/* Override Bootstrap's default font size for input fields */
input, textarea, select, button, a {
    font-size: 12px !important;
}

/* Ensure the font size for input fields is 12px */
.form-control {
    font-size: 12px !important;
    padding: 4px 8px !important; /* Adjust padding for a 12px font size */
    height: auto !important; /* Ensure height adjusts with font size */
    line-height: 1.5 !important; /* Make sure the line height is appropriate */
}



/* Optional: Adjust textarea fields to match as well */
textarea.form-control {
    height: auto !important;
}

.error-div {
    display: block;
    height: 20px;
    color: red;
}

.mt-2-1 {
    margin-top: 2.1rem !important;
}

/*.td-data {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100px !important;
}*/

.td-data {
    white-space: nowrap; /* Allows text to wrap grGrpWorkOrNormalTable*/
    /*overflow-wrap: anywhere;*/ /* Break long words if needed */
}

.td-data-word {
    white-space: normal; /* Allows text to wrap grGrpWorkOrNormalTable*/
    overflow-wrap: break-word; /*/* Break long words if needed */
}


.display-none {
    display: none;
}

.m-right-5 {
    margin-right: 5px;
}

.mt-2-5 {
    margin-top: 2.5rem !important;
}

.mt-2-3 {
    margin-top: 2.3rem !important;
}

.mt-1-2 {
    margin-top: 1.2rem !important;
}

.mt-1-6 {
    margin-top: 1.6rem !important;
}

.mt-8 {
    margin-top: 8rem !important;
}

.mt-3-rem {
    margin-top: 3rem !important;
}

/* for select 2 dropdown - start */
.select2-selection__rendered {
    /*line-height: 34px !important;*/
    /*line-height: 25px !important;*/
    line-height: 1.5 !important;
}

.select2-container .select2-selection--single {
    /*height: 38px !important;*/

    height: 30px !important;
}

.select2-selection__arrow {
    height: 26px !important;
}

.modalDDL .select2-container {
    width: 100% !important;
}
/* for select 2 dropdown - end */

.hidden {
    display: none !important;
}

.inline-block {
    display: inline-block;
    vertical-align: middle;
}

.mtop-31 {
    margin-top: 31px;
}

.m-left {
    margin-left: 12px;
}

.big-closeModal {
    font-size: 1.5rem; /* You can adjust to 2.5rem, 3rem, etc. */
}

#grGrpWorkOrNormalTable tbody tr {
    cursor: pointer;
}

    #grGrpWorkOrNormalTable tbody tr.selected { /* nothing here—color is set in JS */
    }

.sticky {
    top: 5rem;
    right: 10rem;
}

.position-absolute {
    position: absolute;
}

.btn-sm {
    padding: .15rem .4rem !important;
    /*font-size: .875rem;*/
    line-height: 1.5;
    border-radius: .2rem;
}

.top-3-4 {
    top: 2.4rem !important;
}

#overlay {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.5);*/ /* Semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
}

#progress {
    background: rgba(0, 0, 0, 0.7); /* Darker background for the loader */
    padding: 20px; /* Padding around the loader */
    border-radius: 10px; /* Rounded corners */
}

#overlay .spinner-border {
    display: inline-block;
    vertical-align: middle;
}

.ml-0 {
    margin-left: 0rem !important;
}

.mt-30 {
    margin-top: 25px;
}

.mt-35 {
    margin-top: 35px;
}

.padding-l-0 {
    padding-left: 0 !important;
}

.padding-r-0 {
    padding-right: 0 !important;
}

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

.padding-b-0 {
    padding-bottom: 0 !important;
}

.hold-backColor {
    background-color: BlanchedAlmond !important;
}

.grouping-backColor {
    background-color: #5983FF !important;
}

.text-alert {
    color: green;
    font-size: 14px !important;
}

.headerTitle {
    font-size: 14px !important;
    margin-top: 6px !important;
}

.divsuggesions {
    position: absolute;
    height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 1px solid #eee;
    background: white;
    z-index: 9999;
    top: 38px;
}

.divItem {
    margin-top: 15px;
    color: #666;
    text-align: left;
    cursor: pointer;
}

.padding-t-b-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ht-30 {
    height: 35px;
}

.m-top-wrapper {
    margin-top: calc(2.2rem + 1px) !important;
}

.min-ht {
    min-height: 660px !important;
}

.m-b-0 {
    margin-bottom: 0px !important
}



.woAddPanelTable th,
.woAddPanelTable td {
    padding: 2px;
    white-space: normal;
    /* overflow: hidden; */
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    vertical-align: middle !important;
}



@media (min-width: 992px) {
    .sidebar-mini.sidebar-collapse .main-sidebar, .sidebar-mini.sidebar-collapse .main-sidebar::before {
        margin-left: -5rem !important;
        width: 4.6rem;
    }
}

@media (min-width: 992px) {
    .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .main-footer, .sidebar-mini.sidebar-collapse .main-header {
        margin-left: 0rem !important;
    }

    .m-top21 {
        margin-top: 32px !important;
    }

    .m-top26 {
        margin-top: 26px !important;
    }

    .pad-30 {
        padding-left: 50px;
    }

    .m-top38 {
        margin-top: 38px !important;
    }

    .m-top31 {
        margin-top: 31px !important;
    }
}

:root {
    --app-min-width: 1366px;
}
/* pick 1280/1366/1440 etc. to match your design */

html, body,
.wrapper,
.content-wrapper,
.main-header,
.main-footer {
    min-width: var(--app-min-width);
}

 /*If screen < min width, scroll horizontally instead of reflowing*/ 
body, .content-wrapper {
    overflow-x: hidden;
}

/* Prevent header/KPI rows from wrapping when window is narrow */
.row.nowrap {
    flex-wrap: nowrap !important;
}

 /*Your big grid: keep a wide minimum so columns don't collapse */
#grGrpWorkOrNormalTable,
#grGrpWorkOrNormalTable table {
    min-width: 100%; /* at least full container */
    width: max-content;
    table-layout: auto;
}

.table-responsive {
    overflow-x: auto;
}


.main-sidebar {
    width: 250px !important;
    transition: all 0.3s ease; /* Smooth open/close animation */
    transform: translateX(-100%); /* Hidden by default */
    visibility: hidden;
    opacity: 0;
}

    .main-sidebar.sidebar-open,
    .main-sidebar.hover-open {
        transform: translateX(0); /* Fully visible when open */
        visibility: visible;
        opacity: 1;
    }

.big-closeModal {
    font-size: 1.5rem; /* You can adjust to 2.5rem, 3rem, etc. */
}