@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700");

#billing-editableTable th {
    background-color : #18a689;
    color : white;
}

#billing-editableTable {
    table-layout: auto; /* Allows columns to adjust based on content */
    width: auto; /* Adjust table width based on content */
    border-collapse: collapse;
}

#billing-editableTable th , #billing-editableTable td {
    text-align: center;
    vertical-align: middle;
    padding: 8px;
    white-space: nowrap; /* Prevent text from wrapping */
    /* border: none; */
    height : 55px;
    overflow : hidden;
    max-width : 200px;
}

#billing-editableTable tr {
    height : 55px;
}

.sb-button {
    margin: 30px 15px 30px 30px;
    margin-right: -10%;
}
.billing-buttons{
    margin: 30px 18px 30px -12px;
    margin-right: none;
}
.services-billing-addrow{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-bottom: 30px;
    margin-top: 10px;
    margin-left: -20px;
}

#billing-editableTable {
    font-size: 11px; 
}

#billing-editableTable select {
    font-size: 9px; 
}

#billing-editableTable input {
    font-size: 11px; 
}

#billing-editableTable td {
    font-size: 11px; 
}



#billing-editableTable input {
    padding: 5px 8px; 
    line-height: 1.2; 
    text-align: center;
    vertical-align: middle;
    width: 100px;
}
#billing-editableTable select{
    padding: 5px 8px; 
    line-height: 1.2; 
    text-align: center;
    vertical-align: middle;
    width: 100px;
}
#billing-editableTable td{
    padding: 5px 8px; 
    line-height: 1.2; 
    text-align: center;
    vertical-align: middle;
    /* width: 100px; */
}

.services-billing-header {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    padding-left: 15px;
    height: 40px;

}
.services-billing-buttons{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-right: 40px;
}

.services-billing-header h4 {
    margin: 0;
}

#invoiceTableSB th {
    background-color : #18a689;
    color : white;   
}

#invoiceTableSB th, #invoiceTableSB td {
    text-align: center;
    vertical-align: middle;
    padding: 8px;
    white-space: nowrap; /* Prevent text from wrapping */
    /* border: none; */
    height : 55px;
    overflow : hidden;
    max-width : 200px;
}

#invoiceTableSB th, #invoiceTableSB tr {
     height: 55px;
}

#invoiceTableSB {
    font-size: 11px;
}

#billing-editableTable tbody tr {
    border-bottom: 1px solid #e7e7e7; /* Add bottom border */
}

#billing-editableTable tbody tr:last-child {
    border-bottom: none; /* Remove border from last row */
}

#billing-container {
    width: auto !important; /* Override the global width */
    max-width: 100%; /* Ensure it doesn't exceed the viewport */
    padding: 15px; /* Add padding if needed */
    position: relative;
}
#norecords{
    padding: 5px 8px;
    line-height: 1.2;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 37%;
}

#norecordsservice{
    position: absolute;
    width:97.5%;
}

.billing-table th, .billing-table td {
    text-align: center; /* Center align text in table cells */
}

.billing-table th {
    background-color: #343a40; /* Dark background for header */
    color: #fff; /* White text for header */
}

.billing-table tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Light gray background for even rows */
}

.billing-table tbody tr:hover {
    background-color: #e9ecef; /* Light background on row hover */
}

#fixed-width {
    width: 150px; /* Fixed width for the "Billing Type" column */
}

input[type="text"],
select,
td[contenteditable="true"] {
    border: 1px solid #ccc; /* Light grey border */
    padding: 5px;           /* Some padding for better look */
}

td[contenteditable="true"]:focus {
    border: 1px solid #ccc; /* Blue border on focus */
    outline: none;  
            /* Remove default outline */
}

/* Ensuring select elements have visible borders */
select {
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 4px;
}

/* Ensure that the checkbox has some margin */
.checkbox-margin {
    margin-left: 0;
    margin-right: 10px;
}

/* Style for editable cells */
.editable-cell {
    border: 1px solid #ccc;
    padding: 5px;
    min-width: 100px; /* Adjust the size as needed */
    box-sizing: border-box;
}

/* Smaller size for editable cells with data-type="number" */
.editable-cell[data-type="number"] {
    min-width: 80px; /* Adjust the size as needed */
}

/* Placeholder style */
.editable-cell::before {
    /* content: attr(data-placeholder); */
    color: #888;
    pointer-events: none;
    display: block;
    padding: 16px;
    border: 1px solid grey; /* Ensure the placeholder text is displayed */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

/* Hide placeholder when the cell is focused or has content */
.editable-cell:focus::before,
.editable-cell:not(:empty)::before {
    display: none;
    padding: 0;
    border: none;
}

.resourceName{
    display: inline-block;
    width: 160px !important;
}


    /* Add a border to editable columns */
    #billing-editableTable  td[contenteditable="true"] {
        border: 2px solid #b0b0b0; /* Medium grey border for editable cells */
        background-color: #ffffff; /* White background for editable cells */
        padding: 8px; /* Adjust padding for better spacing */
        border-radius: 4px; /* Rounded corners */
        transition: all 0.3s ease; /* Smooth transition for effects */
    }
    #billing-editableTable  td[contenteditable="false"] {
        /* border: 2px solid #b0b0b0; Medium grey border for editable cells */
         /* White background for editable cells */
        padding: 8px; /* Adjust padding for better spacing */
        border-radius: 4px; /* Rounded corners */
        transition: all 0.3s ease; /* Smooth transition for effects */
    }
    /* Change the border color on focus */
    #billing-editableTable td[contenteditable="true"]:hover {
        border-color: #a0a0a0; /* Slightly darker grey border on hover */
        background-color: #f9f9f9; /* Slightly darker white background on hover */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    }
    #billing-editableTable td[contenteditable="true"]:focus {
        border-color: #888888; /* Darker grey border when focused */
        background-color: #e9e9e9; /* Light grey background when focused */
        outline: none; /* Remove default focus outline */
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Slight shadow for focus */
    }


    /* Style for non-editable columns */
    td {
        padding: 5px;
    }
    
    /* Optional: Add some padding and margin for buttons */
    .btn {
        margin-right: 5px;
    }

    .delete-gif {
        width: 22px; /* Adjust width as needed */
        height: 22px; /* Adjust height as needed */
        cursor: pointer; /* Pointer cursor on hover */
        transition: opacity 0.3s ease; /* Smooth transition for opacity */
    }

    .delete-gif:hover {
        opacity: 0.8; /* Slightly fade the GIF on hover for feedback */
    }
    
    .delete-gif:disabled {
        cursor: not-allowed; /* Change cursor when disabled */
        opacity: 0.5; /* Fade the GIF when disabled */
    }
    .reset-gif {
        width: 24px; /* Adjust width as needed */
        height: 24px; /* Adjust height as needed */
        cursor: pointer; /* Pointer cursor on hover */
        transition: opacity 0.3s ease; /* Smooth transition for opacity */
    }

    .reset-gif:hover {
        opacity: 0.8; /* Slightly fade the GIF on hover for feedback */
    }
    
    .reset-gif:disabled {
        cursor: not-allowed; /* Change cursor when disabled */
        opacity: 0.5; /* Fade the GIF when disabled */
    }

    .disabled {
        opacity: 0.3;
        pointer-events: none; /* Prevents click events */
      }


      .notes-gif {
        width: 24px; /* Adjust width as needed */
        height: 24px; /* Adjust height as needed */
        cursor: pointer; /* Pointer cursor on hover */
        transition: opacity 0.3s ease; /* Smooth transition for opacity */
    }

    .notes-gif:hover {
        opacity: 0.8; /* Slightly fade the GIF on hover for feedback */
    }
    
    .notes-gif:disabled {
        cursor: not-allowed; /* Change cursor when disabled */
        opacity: 0.5; /* Fade the GIF when disabled */
    }

    .expandable-content {
        background-color: #f9f9f9;
        padding: 10px;
        border-top: 1px solid #ddd;
    }

    .toggle-btn {
        cursor: pointer;
    }

    .duplicate-btn {
        cursor: pointer;
        color: #007bff; /* Bootstrap primary color or any color you prefer */
    }

    .duplicate-btn:hover {
        text-decoration: underline;
    }

    .editable-field {
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 4px;
    }

    .hidden-header {
        display: none; /* Hide the header for duplicated rows */
    }


    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-left: 10px !important;
        font-size: 11px!important;
        color: currentColor !important;
    }


    .delete-btn {
        cursor: pointer;
        color: #dc3545; /* Bootstrap danger color or any color you prefer */
    }

    .delete-btn:hover {
        text-decoration: underline;
    }
    .ellipsis {
        white-space: nowrap;      /* Prevents text from wrapping to a new line */
        overflow: hidden;         /* Ensures the overflowed content is hidden */
        text-overflow: ellipsis;  /* Adds the ellipsis when text overflows */
    }

    .disabled {
        background-color: #f0f0f0; /* Light gray background for disabled cells */
        color: #a0a0a0; /* Light gray text color for disabled cells */
        pointer-events: none; /* Disable mouse events on the cell */
        cursor: not-allowed; /* Show a not-allowed cursor */
    }
    .disabled[contenteditable="true"] {
        pointer-events: none; /* Disable all mouse interactions */
    }



/* Style for delete button */
.duplicated-row td {
    padding: 4px; /* Reduce padding for a compact look */
    font-size: 12px; /* Smaller font size for a more compact appearance */
}
.duplicated-row td:nth-child(5) {
    width: 50px; /* Width for "Discount (%)" */
}

.delete-btn {
    margin-left: 73px;
    cursor: pointer;
    color: #dc3545; /* Bootstrap danger color or any color you prefer */
}

.delete-btn:hover {
    text-decoration: underline;
}

/* Ensure editable fields are styled consistently */
.editable-field {
    border: 1px solid #ccc;
    border-radius: 4px;
}

.editable-field[disabled] {
    background-color: #f5f5f5;
    color: #999;
}

/* Expandable content container styling */
.expandable-content-container {
    margin-top: 10px;
    padding: 5px; /* Reduce padding */
    font-size: 10px; /* Smaller font size for compact view */
    overflow-x: auto;
}