/* Action Buttons styles start */

/*.th-action {
    width: 75px;
}

.td-action{
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
*/
.uppercase {
    text-transform: uppercase;
}


table tr th.th-action {
    width: 75px;
}

table tr td.td-action {
    width: 75px;

}

table tr th.th-action4 {
    width: 105px;
}

table tr td.td-action4 {
    width: 105px;
}

.td-delete {
    width: 30px;
    text-align: center;
}



.icon {
    background: none;
    border: none;
    
}

    .icon:disabled {
        opacity: 0.2;
        pointer-events: none;
    }

    .icon:hover:enabled,
    .icon:focus:enabled {
        background-color: navajowhite;
        border-radius: 3px;
    }

    .icon:focus {
        outline: 1px solid navajowhite;
        outline-offset: -4px;
        border-radius: 3px;
    }

    .icon:active {
        transform: scale(0.99);
    }

    .icon::before {
        padding-left: 1px;
        padding-right: 1px;
        font-family: 'Font Awesome 5 Free'; /* FontAwesome or Font Awesome 5 Free */
        font-size: inherit;
        display: inline-block;
        /* font-style: normal;*/
        /* font-weight: normal;*/
        font-weight: 900;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

.icon-trash::before {
    content: "\f2ed";
    color: red;
    margin: 0 3px;
}

.icon-eye::before {
    content: "\f06e";
    color: green;
    margin: 0 3px;
}

.icon-pencil::before {
    content: "\f303";
    color: darkblue;
    margin: 0 3px;
}

.icon-clone::before {
    content: "\f24d";
    color:blueviolet;
    margin: 0 3px;
}


/* Action Buttons ToolBar */


.plus-circle::before {
    content: "\f055";
    color: green;
    font-size: 18px;
    /* padding: 2px 5px;*/
}

.print::before {
    content: "\f02f";
    color: brown;
    font-size: 18px;
   /* padding: 0;*/
   /* padding: 2px 5px;*/
}

.file-export::before {
    content: "\f56e";
    color: blueviolet;
    font-size: 18px;
    /*  padding: 2px 5px;*/
}


/* table selected row background color*/
.row-selected-background {
    background-color: aliceblue !important;
}

/* Remove/Override shadow from bootstrap button components */

/* not working */
/* Remove/Override shadow from bootstrap input components #86b7fe */
/*.form-group input:focus, select:focus, textarea:focus {
    outline: 0px !important;
    box-shadow: none !important;
}
    */

.form-control:focus {
    outline: 0px !important;
    box-shadow: none !important; /* Remove Bootstrap's shadow */
    
}

/*button:focus
{
    outline: none !important; 
    border: none !important; 
    box-shadow: 0 0 3px rgba(0, 123, 255, 0.5);
}*/

 /*   button.btn,
    button.btn:focus-visible*/

    /*.form-group button:focus, button:active {
    outline: 0px !important;
    box-shadow: none !important;
}*/
    .validation-message {
        font-size: 0.8rem;
    }


.content-group-head {
    margin-top: 10px;
    color: #013179;
    font-weight: 700;
}


.sub-content-head {
    color: #013179;
    display: flex;
    align-items: center;
    border-radius: .25rem;
    font-weight: 700;
    padding: .25rem 0.5rem;
    width: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,.03) 10%, rgba(0,0,0,.01) 30%);
}


/*   Added to show sort icons */
table tr th.sort {
    cursor: pointer;
}

    table tr th.sort.desc:after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f0dd";
        color: darkblue;
        padding-left: 5px;
    }

    table tr th.sort.asc:after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f0de";
        color: darkblue;
        padding-left: 5px;
    }


/* .for-group (inline) classes has been discounted from bootstrap v5 create your own */
.row-top,.row-group {
    margin-top: 20px; /* use top instead of bottom because there is validation error msg in bottom */
}

.form-group-inline {
    margin-top: 20px;
    display: flex !important;
    flex-direction: row !important;
}

.row-button {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.row-button-center {
    display: flex;
    justify-content:center;
    gap: 10px;
}

/* bootstrap modal overrides */
.modal-lg {
    max-width: 950px;
}

.modal-xxl {
    max-width: 1300px;
}

.modal-xxxl {
    max-width: 1700px;
}


.modal-body-padding {
    padding: 0 5px;
}

.modal-header-border {
    border-bottom: 0;
    padding-bottom: 5px
}

.modal-footer-border {
    border-top: 0;
    padding-top: 0
}

/* FYLabel Class */
.fy-label-red {
    font-weight: 700;
    display: flex;
    color: red;
    width: 100px;
    align-items: center;
}

.fy-label-green {
    font-weight: 700;
    display: flex;
    color: green;
    width: 100px;
    align-items: center;
}

/* Fixed labels */
.fixed-group {
    position: relative;
}

.fixed-label {
    position: relative;
    margin-top: 20px;
}

    .fixed-label label, .fixed-group label {
        position: absolute;
        font-size: 0.81rem; /* old was 0.8rem */
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: white;
        color: gray;
        padding: 0 0.3rem;
        margin: 0 0.5rem;
        transition: 0.1s ease-out;
        transform-origin: left top;
        pointer-events: none;
    }


    .fixed-label input, .fixed-group input,
    .fixed-label select, .fixed-group select,
    .fixed-label textarea, .fixed-group textarea
    {
        transition: 0.1s ease-out;
    }

        .fixed-label input:focus, .fixed-group input:focus,
        .fixed-label select:focus, .fixed-group select:focus,
        .fixed-label textarea:focus, .fixed-group textarea:focus {
            border-color: #4891FE;
            box-shadow: none !important;
        }

            .fixed-label input:focus + label, .fixed-group input:focus + label,
            .fixed-label select:focus + label, .fixed-group select:focus + label,
            .fixed-label textarea:focus + label, .fixed-group textarea:focus + label 
            {
                color: #4891FE;
                top: 0;
                transform: translateY(-50%) scale(0.9) !important;
            }

        .fixed-label input:not(:placeholder-shown) + label, .fixed-group input:not(:placeholder-shown) + label,
        .fixed-label select:not(:placeholder-shown) + label, .fixed-group select:not(:placeholder-shown) + label,
        .fixed-label textarea:not(:placeholder-shown) + label, .fixed-group textarea:not(:placeholder-shown) + label
        {
            top: 0;
            transform: translateY(-50%) scale(0.9) !important;
        }

        .fixed-label input:disabled + label, .fixed-group input:disabled + label,
        .fixed-label select:disabled + label, .fixed-group select:disabled + label,
        .fixed-label textarea:disabled + label, .fixed-group textarea:disabled + label 
        {
            top: 0;
            transform: translateY(-50%) scale(0.9) !important;
            background: linear-gradient(#ffffff 60%,#e9ecef 0%);
            color: gray;
        }



/* end fixed labels */

/* start input group */
.input-search-left {
    border-radius: 0px;
    border-top-left-radius: .25rem .25rem;
    border-bottom-left-radius: .25rem .25rem;
}

.input-search-right {
    border-left: 0px;
    border-radius: 0px;
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

.input-search-both {
    border-left: 0px;
    border-radius: 0px;
}

.btn-search-right {
    border-left: 0px;
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
    padding: 0 5px;
}



/* end input group */
.form-textarea {
    font-size: .75rem;
}

.btn-default {
    background-color: #f8f9fa;
    border-color: #ddd;
    color: #444;
    border-radius: 0px;
}

.btn-block {
    display: block;
    width: 100%;
}

.lines-wrapper {
    max-height: 300px;
    overflow: auto;
    margin-bottom: 2px;
    margin-top: 1px;
}

/*  table cell display format colors */
.color-qty, .color-credit, .color-fe-amount {
    text-align: right;
    color: green;
}

.color-rate {
    text-align: right;
    color: darkblue;
}

.color-amount, .color-debit {
    text-align: right;
    color: darkred;
}

.fe-background-color, .backcolor-pack {
    background-color: floralwhite !important;
}


/*** start *** add scrolling to div-table (fixed header & footer) */
.table-wrapper {
    max-height: calc(100vh - 210px); /* 50 + 35 + 25 + 45  + (35 error message) */
   /*max-height: 220px;*/
    overflow-x: hidden;
    overflow-y: auto; /*overflow-y: scroll;*/
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

/* sticky-header */
.table-sticky {
    border-collapse: collapse;
}

.sticky-thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-sticky th {
    position: sticky;
    top: 0;
    z-index: 2;
}

    .table-sticky th:after,
    .table-sticky th:before {
        content: "";
        position: absolute;
        left: 0px; /* sort icon display issue*/
        width: 100%;
    }

    .table-sticky th:before {
        top: -1px;
        border-top: 1px solid #dfe0e1;
    }

    .table-sticky th:after {
        bottom: -1px;
        border-bottom: 1px solid #dfe0e1;
    }


/* sticky-footer */
.table-sticky tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 11;   
    background-color: #f8f9fa;
}

    .table-sticky tfoot td:after, .table-sticky tfoot td:before {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
    }

    .table-sticky tfoot td:before {
        top: -1px;
        border-top: 1px solid #dfe0e1;
    }

    .table-sticky tfoot td:after {
        bottom: -1px;
        border-bottom: 1px solid #dfe0e1;
    }


/* this is new class for sticky table header 
   table-sticky was working but generate issues with sort icons and cell borders in header
   for now on use following CSS class whenever sticky header is required in a table
*/

.sticky-container {
    position: relative;
    max-height: calc(100vh - 210px); /* Total height for the table */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    /* background-color: #f8f9fa; */ /* Adjust based on your theme */
    border: 1px solid #dee2e6; /* Add border to the entire container */
    /*border-top: none;*/ /* Remove top border to avoid double border effect */
}

.sticky-table {
    border-collapse: separate; /* Ensure table borders are separate */
    border-spacing: 0; /* Remove extra space between cells */
    width: 100%; /* Make the table take the full width of the container */
}

    /* table-header */
    .sticky-table thead {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: #f8f9fa;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Add a subtle shadow instead of a border */
    }


    .sticky-table th,
    .sticky-table td {
        border: 1px solid #dee2e6; /* Ensure all cells have borders */
        border-width: 1px 0 0 1px; /* Prevent double borders by specifying border sides */
    }

        .sticky-table th:first-child,
        .sticky-table td:first-child {
            border-left: none; /* Remove left border from the first column */
        }

        .sticky-table th:last-child,
        .sticky-table td:last-child {
            border-right: 1px solid #dee2e6; /* Ensure the right-most cell has a border */
        }


    .sticky-table tfoot {
        position: sticky;
        bottom: 0;
        z-index: 1;
        background-color: #f8f9fa;
    }

   






/* Line-Edit and summary totals - start */

.line-validate {
    border: none;
}

.line-label {
    font-weight: 600;
    vertical-align: middle;
    border-right: none;
}

.line-total {
    text-align: right;
    color: darkgreen;
    font-weight: 600;
    background-color: ivory !important;
}

.line-total-label {
    text-align: right;
    font-weight: 600;
    vertical-align: middle;
}

.line-amount {
    text-align: right;
    vertical-align: middle;
    color: maroon;
}

.line-check {
    text-align: center;
    vertical-align: middle;
    border-left: none;
}

.line-qty-thead {
    width: 125px;
    border-right: none;
}

.line-check-thead {
    width: 30px;
    text-align: center;
    border-left: none;
}

.line-rate-thead {
    width: 125px;
}

/* not working */
.Inline-edit-padding {
    padding: 1px;
}

/* not working */
.line-edit-padding {
    padding: 0px;
}


.form-control-md {
    text-align: right;
    margin: 0;
    padding: 0;
    border: none;
}

.form-control-inline {
    /*  text-align: left;*/
    margin: 0;
    padding: 0;
    border: none;
}


.form-control-left {
    text-align: left;
}

.form-control-header {
    text-align: right;
    width: 100%;
    padding: 2px 4px;     
    border-radius: 4px;
}



/* Line-Edit and summary totals end CSS */

/* Approval management system (AMS) */
.mark-status-box {
    display: flex;
    float: right;
    width: 100px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(83, 97, 212, 0.05);
    border-radius: 1.25rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    background-color: rgba(83, 97, 212, 0.1);
    color: black;
}



/* table fetch data loading bar */
.loading-bar-container {
    width: 100%;
    background-color: #e0e0e0;
    overflow: hidden;
    position: relative;
}

.loading-bar {
    width: 0;
    height: 5px; /* Increased height for better visibility */
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient colors */
    animation: loading 5s infinite;
}

@keyframes loading {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}


/* Inline search input */
.input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.form-control-search {
    width: 100%;
    padding: 2px 32px 2px 4px; /* Adjusted for clear icon */
    /* border: 1px solid #ccc;*/
    border-radius: 4px;
}

.clear-icon-padding {
    padding: 4px 32px 4px 8px; /* Adjusted for clear icon */
}

.clear-icon {
    position: absolute;
    right: 8px;
    font-size: 14px;
    cursor: pointer;
    color: #888;
}

.highlighted {
    background-color: #007bff;
    color: white;
    transition: background-color 0.3s ease-in-out; /* Smooth color transition */
}





/* Form header input control grid -- [start] */
.form-row {
    display: flex;
    align-items: center;
    /*   justify-content: space-between; */
    gap: 20px;
}

.form-col1 {
    width: 100%;
}

.form-col2 {
    width: 50%;
}

.form-col3 {
    width: 33.33%;
}

.form-col4 {
    width: 25%;
}

.form-col75 {
    width: 75%;
}


/* Form header input control grid -- [end] */

/* 16-Column Layout */
.col1-16 {
    width: 6.25%;
}

.col2-16 {
    width: 12.5%;
}

.col3-16 {
    width: 18.75%;
}

.col4-16 {
    width: 25%;
}

.col5-16 {
    width: 31.25%;
}

.col6-16 {
    width: 37.5%;
}

.col7-16 {
    width: 43.75%;
}

.col8-16 {
    width: 50%;
}

.col9-16 {
    width: 56.25%;
}

.col10-16 {
    width: 62.5%;
}

.col11-16 {
    width: 68.75%;
}

.col12-16 {
    width: 75%;
}

.col13-16 {
    width: 81.25%;
}

.col14-16 {
    width: 87.5%;
}

.col15-16 {
    width: 93.75%;
}

.col16-16 {
    width: 100%;
}

/* 24-Column Layout */
/*  .col-1 {
        width: 4.1667%;
    }

    .col-2 {
        width: 8.3333%;
    }

    .col-3 {
        width: 12.5%;
    }

    .col-4 {
        width: 16.6667%;
    }

    .col-5 {
        width: 20.8333%;
    }

    .col-6 {
        width: 25%;
    }

    .col-7 {
        width: 29.1667%;
    }

    .col-8 {
        width: 33.3333%;
    }

    .col-9 {
        width: 37.5%;
    }

    .col-10 {
        width: 41.6667%;
    }

    .col-11 {
        width: 45.8333%;
    }

    .col-12 {
        width: 50%;
    }

    .col-13 {
        width: 54.1667%;
    }

    .col-14 {
        width: 58.3333%;
    }

    .col-15 {
        width: 62.5%;
    }

    .col-16 {
        width: 66.6667%;
    }

    .col-17 {
        width: 70.8333%;
    }

    .col-18 {
        width: 75%;
    }

    .col-19 {
        width: 79.1667%;
    }

    .col-20 {
        width: 83.3333%;
    }

    .col-21 {
        width: 87.5%;
    }

    .col-22 {
        width: 91.6667%;
    }

    .col-23 {
        width: 95.8333%;
    }

    .col-24 {
        width: 100%;
    } */

/* report-index styles */
.mud-icon-button {
    padding: 5px;
    font-size: 1rem;
}

.report-index-size {
    width: 65%;
}

.filter-size {
    width: 120px;
}

.variant-thumbnail {
    text-align: center;
    vertical-align: middle;
}

    .variant-thumbnail img {
        max-width: 120px; /* Prevent going wider than 120px */
        /* height: auto;*/ /* Keep height proportional unless overridden */
        height: 100px; /* Fixed height */
        object-fit: cover; /*will crop any overflow while maintaining the image’s aspect ratio*/
    }