.imgCell {
    background-image: url('../Admin/images/TableBgImage.gif');
    font-family: Calibri;
    font-style: italic;
    font-size: 18px;
    text-align: center;
    color: white;
    font-weight: bold;
    height: 20px; /* Set a height */
    width: 250px; /* Set a width */
}

 
.Row {
    display: table-row;
    border: 1px solid;
    background-color: #dce7fc;
}

.Cell {
    display: table-cell; /* Makes these divs behave like <td> or <th> */
    padding: 8px; /* Add padding for spacing */
    border: 1px solid #ccc; /* Add borders for visual separation */
    background-color: #e5ecf4;
    font-family: Calibri;
    font-size: 16px;
}
.txtBox {
    font-family: Calibri;
    font-size: 16px;      
    border: 1px solid #ccc;
    border-radius: 4px;
}
.drpdown {
    width: 50%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}
.lblControl {
    /* Standard for long words like email addresses */
    overflow-wrap: break-word;
    /* Legacy name for better browser support */
    word-wrap: break-word;
    /* Aggressively breaks words */
    word-break: break-all;
}
.i {
    position: absolute;
    top: 20px;
    right: -7px;
    /* border: 1px solid; */
    border-radius: 50%;
    /* padding: 11px; */
    height: 30px;
    width: 30px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: cornflowerblue;
    box-shadow: 0 0 8px 3px #B8B8B8;
}
.labelLikeTextBox {
    border: none;
    background-color: transparent;
    outline: none;
    resize: none; 
    cursor: default; 
    color: #333;
    font-family: Arial, sans-serif; 
    font-size: 14px; 
    padding: 0; 
    width: 100%;    
}
.labelLikeSmallTextBox {
    border: none;
    background-color: transparent;
    outline: none;
    resize: none;
    cursor: default;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 0;
    width: 20%;
}
.smalltxtbox {
    width: 13%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
   
}
.myTextBoxClass {
    background-color: #dce7fc;
    width: 10%;
    border: 0px solid #ccc;
}
.btnAdd {
    background-color: #415f9e;
    border: 2px solid #dce7fc; /* Green */
    border-color: #dce7fc;
    padding: 8px 15px;
    text-align: center;
    color: white;
    width: 150px;
}
  
.FrmHeading{
    padding: 5px;
    color:white;
    background-color: #dce7fc;
    text-align: center;
    font-family: Calibri;
    font-size: 18px;
    font-weight: bold;
}
   



.ClientGrid {
    display: grid;
    grid-template-columns: auto;
    background-color: dodgerblue;
    padding: 0px;
    width:70%;
   margin-left:-2%;
}
    .ClientGrid > table {
        background-color: #dce7fc;
        border: 0px solid black;
        border-collapse: collapse;
        padding: 0px;
        border-spacing: 2px;
        font-size: 30px;
        text-align: center;
        width: 100%;
    }

.PickUPTable {
    display: table;
    background-color: #dce7fc;
    width: 100%;
    border-spacing: 2px;
}
.DeliveryTable {
    display: table;
    width: 100%;
    border-spacing:2px;
}

.innerTabCell{
    display:table-cell;
    width:33.33%;

}

.CHeadingCell {
    display: table-cell;
    font-family: Calibri;
    font-size: 17px;
    background-color: #dce7fc;
    text-align: left;
}
.CCell {
    display: table-cell;
    font-family: Calibri;
    font-size: 16px;
    padding-right: 12px;
    background-color: #dce7fc;
    text-align:left;
}
.GridTable {
    display: table;
    width: 100%;
}

.GrdDescCell {
    display: table-cell;
    padding-left: 12px;
    padding-right: 12px;
    background-color: #dce7fc;
    width: 100%;
}

.GrdSkuCell {
    display: table-cell;
    padding-left: 12px;
    padding-right: 12px;
    background-color: #dce7fc;
    width: 350%;
}

.GrdCell {
    display: table-cell;
    padding-left: 12px;
    padding-right: 12px;
    background-color: #dce7fc;
    width: 5%;
}

.Grdtxtbox {
    /*width: 60%;*/
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

.responsive-gridview {
    width: 100%;
    overflow-x: auto;
}

    .responsive-gridview table {
        border-collapse: collapse;
    }

    .responsive-gridview th, .responsive-gridview td {
        /*padding: 12px;*/
        text-align: left;
        border: 1px solid #ccc;
    }

@media screen and (max-width: 768px) {
    .responsive-gridview table,
    .responsive-gridview thead,
    .responsive-gridview tbody,
    .responsive-gridview th,
    .responsive-gridview td,
    .responsive-gridview tr {
        display: block;
    }

        .responsive-gridview thead tr {
            display: none;
        }

    .responsive-gridview td {
        /*position: relative;*/
        padding-left: 10%;
    }

        .responsive-gridview td::before {
            position: absolute;
            left: 10px;
            width: 45%;
            /*white-space: nowrap;*/
            font-weight: bold;
            content: attr(data-label);
        }
}

.container {
    display: flex; /* or display: grid */
    border: 1px solid black;
    /* Add other flexbox/grid properties as needed, e.g., flex-wrap, grid-template-columns */
}

.div-table {
    display: table; /* Makes the div behave like a <table> */
    width: 100%; /* Or a specific width */
    border-collapse: collapse; /* Optional: for collapsing cell borders */
}

.div-table-header,
.div-table-row {
    display:flex;
    display: table-row; /* Makes these divs behave like <tr> */
    border: 1px solid black;
}
.div-imgCell {  
    display:table-cell;
    border: 1px solid #ccc; /* Add borders for visual separation */
    background-image: url('../Admin/images/TableBgImage.gif');
    font-family: Calibri;
    font-style: italic;
    font-size: 18px;
    text-align: center;
    color: white;
    font-weight: bold;
    height: 20px; /* Set a height */
    width: 50%; /* Set a width */
}
.div-table-cell {
    display: table-cell; /* Makes these divs behave like <td> or <th> */
    padding: 8px; /* Add padding for spacing */
    border: 1px solid #ccc; /* Add borders for visual separation */
    background-color: #e5ecf4;
   
}

.div-table-header .div-table-cell {
    font-weight: bold; /* Style header cells */
    background-color: #f2f2f2;
    border: 1px solid black;
}

.innerdiv-table {
    display: table; /* Makes the div behave like a <table> */
    width: 100%; /* Or a specific width */
    border-collapse: collapse; /* Optional: for collapsing cell borders */
}
.innerdiv-table-header,
.innerdiv-table-row {
    display: table-row; /* Makes these divs behave like <tr> */
    border: 0px solid black;
}
.innerdiv-table-cell {
    display: table-cell; /* Makes these divs behave like <td> or <th> */
    padding: 8px; /* Add padding for spacing */
    border: 1px solid #ccc; /* Add borders for visual separation */
    font-family: Calibri;
    color:black;
    font-size: 16px;
    padding-right: 12px;
    background-color: #dce7fc;
}

.innerdiv-table-header .innerdiv-table-cell {
    font-weight: bold; /* Style header cells */
    background-color: #f2f2f2;
    border: 1px solid black;
}
.GCell {
    display: table-cell;
    font-family: Calibri;
    font-size: 16px;
    padding-right: 12px;  
    text-align: left;
}

.table-row {
    overflow: hidden; /* Clear floats */
}

.table-cell {
    float: left;
    width: 33.33%; /* Example for 3 columns */
}