/* Style for the table */
.page-id-15 #receipt-table {
    min-width: 800px; /* Set a minimum width for the table */
    border-collapse: collapse;
    overflow-x: auto; /* Add horizontal scrollbar if content overflows */
    width: 100%; /* Make the table responsive */
    border: none;
}

.page-id-15 td#info-project{
    width:11%;
}

.page-id-15 td#info-sub-project{
    width:11%;
}

.page-id-15 td#info-expense {
    width:11%;
}

.page-id-15 td#info-r-description {
    width:22%;
}

.page-id-15 td#info-i-description{
    width:22%;
}

.page-id-15 td#info-qty {
    width:5%;
}

.page-id-15 td#info-pereach {
    width:10%;
}

.page-id-15 td#info-amount {
    width:10%;
}

/* Style for the table cells */
.page-id-15 #receipt-table td {
    padding: 8px;
    border-bottom: 1.0px solid silver;
    border-right: 1.0px solid silver; /* Add right border to all cells */
}

/* Style for the table header */
.page-id-15 #receipt-table th {
    text-align: left;
    padding: 8px;
    border-bottom: 1.0px solid silver;
    border-right: 1.0px solid silver;
}
/* Style for the form rows */
.page-id-15 .form-row {
    border-bottom: 1.0px solid silver; /* Add a line between rows */
}

/* Style for the last table cell */
.page-id-15 #receipt-table tr td:last-child {
    border: none; /* Remove all borders from the last cell */
    text-align: center; /* Center the buttons */
    white-space: nowrap; /* Prevent buttons from wrapping */
}

/* Style for the table footer cell */
.page-id-15 #receipt-table tfoot td {
    border: none; /* Remove all borders from the footer cell */
    padding: 0; /* Remove padding to eliminate extra space */
}

/* Style for the inputs and selects */
.page-id-15 #receipt-table input[type="text"],
.page-id-15 #receipt-table select {
    margin-right: 10px; /* Add space between inputs */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Style for the select boxes */
.page-id-15 #receipt-table select {
    width: 100%; /* Make selects responsive */
    max-width: 250px; /* Adjust the max-width as needed */
}

/* Style for the text boxes */
.page-id-15 #receipt-table input[type="text"] {
    width: 100%; /* Make text inputs responsive */
    max-width: 100px; /* Adjust the max-width as needed */
}

/* Style for the receipt description text box */
.page-id-15 #receipt-table #info_receipt_description {
    max-width: 100%; /* Adjust the max-width as needed */
}

/* Style for the item description text box */
.page-id-15 #receipt-table #info_item_description {
    max-width: 100%; /* Adjust the max-width as needed */
}

/* Style for the qty text box */
.page-id-15 #receipt-table #info_qty {
    max-width: 100%; /* Adjust the max-width as needed */
}

/* Style for the per each text box */
.page-id-15 #receipt-table #info_per_each {
    max-width: 100%; /* Adjust the max-width as needed */
}

/* Style for the amount text box */
.page-id-15 #receipt-table #info_amount {
    max-width: 100%; /* Adjust the max-width as needed */
}

/* Style for the button container */
.page-id-15 #button-container {
    margin-bottom: 10px; /* Add space below the buttons */
    display: flex;
    justify-content: center;
}

/* Style for the delete button */
.delete-row-button.custom-new-row-button {
    background-color: red; /* Change the background color to red */
    color: silver; /* Change the text color to white */
    border: none; /* Remove the border */
    padding: 5px 10px; /* Add some padding */
    border-radius: 4px; /* Add rounded corners */
    cursor: pointer; /* Change the cursor to a pointer */
    white-space: nowrap; /* Prevent text from wrapping */
}

.delete-row-button.custom-new-row-button:hover {
    background-color: darkred;
}

.page-id-15 tfoot#info-receipt-table-footer{

    border: none;
}

.page-id-15 .hidden-field {
    display: none;
}

.custom-new-row-button {
    padding: 5px 10px; /* Adjust padding as needed */
    font-size: 14px; /* Adjust font size as needed */
    width: auto; /* Adjust width as needed, or use a fixed value */
    height: auto; /* Adjust height as needed, or use a fixed value */
    background-color: #4CAF50; /* Example background color */
    color: silver; /* Example text color */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 2px;
    white-space: nowrap; /* Prevent text from wrapping */
}

.custom-new-row-button:hover {
    background-color: #367c39;
}

/* Style for the table container */
.page-id-15 #receipt-table-container {
    width: 100%; /* Make the container responsive */
    max-width: 1900px; /* Set a maximum width for the table container */
    margin: 0 auto; /* Center the container */
}

/* Style for the receipt selection container */
.page-id-15 #receipt-selection-container {
    margin-top: 20px; /* Add some space above the select */
    text-align: center; /* Center the select */
}

/* Style for the receipt image container */
.page-id-15 #receipt-image-container {
    margin-top: 20px; /* Add some space above the image */
    text-align: center; /* Center the image */
}

/* Style for the bottom container */
.page-id-15 #receipt-info-bottom-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}



/* Responsive adjustments for smaller screens */
/* Media query for smaller screens */
@media (max-width: 854px) and (orientation: landscape){
div#receipt-info-form-container {
    zoom: 35%;
    -moz-transform: scale(100%);/* Firefox Property */
    -moz-transform-origin: 0 0;
    -o-transform: scale(100%);/* Opera Property */
    -o-transform-origin: 0 0;
    -webkit-transform: scale(100%);/* Safari Property */
    -webkit-transform-origin: 0 0;
    transform: scale(100%); /* Standard Property */
    transform-origin: 0 0;  /* Standard Property */
    float: left
    }
}

/* Responsive adjustments for smaller screens */
/* Media query for smaller screens */
@media (max-width: 750px) and (orientation: portrait){
    div#receipt-info-form-container{

        display: none !important;
    }
}
    



/* Style for the footer */

.page-id-15 #info-receipt-table-footer {
    margin-top: 20px; /* Add some space above the footer */
    text-align: center; /* Center the footer text */
    font-size: 14px; /* Adjust font size as needed */
}

/* Style for the submit button */
.page-id-15 #receipt-table tfoot button[type="submit"] {
    margin-top: 10px; /* Add some space above the button */
    padding: 5px 10px; /* Add some padding */
    background-color: #7e7853; /* Example background color */
    color: silver; /* Example text color */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    height: 30px;
}

/* Style for the Total Amount */
.page-id-15 input#total-amount {
    margin-top: 10px; /* Add some space above the button */
    margin-right: 0px;
    margin-left: 10px;
    padding: 0px 0px 0px 10px; /* Add some padding */
    background-color: #c1c4c1; /* Example background color */
    color: green; /* Example text color */
    max-width: 200px !important;
    width:140px !important;
    height:35px;
    font-size: 20px;
    border: 2px solid silver;
    border-radius: 5px;;
}

.page-id-15 #receipt-table tfoot button[type="submit"]:hover {
    background-color: #367c39;
}

/* Style for the table footer row */
.page-id-15 #receipt-table tfoot tr {
    border: none; /* Remove border from the footer row */
}

/* Style for the receipt image container */
#receipt-image-container {
    border: 1.0px solid silver; /* Add a border for visual clarity */
    padding: 0px; /* Add some padding around the iframe */
    margin-top: 20px; /* Add some space above the container */
    width: fit-content; /* Adjust width to fit content */
    max-width: 100%; /* Ensure it doesn't overflow on smaller screens */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
  }
  
  /* Style for the iframe (optional, but good practice) */
  #info_receipt_image {
    width: 600px; /* Make the iframe fill the container width */
    height: 600px; /* Set a fixed height for the iframe */
    border: none; /* Remove the default iframe border */
    display: block; /* Remove extra space below the iframe */
  }
  div#receipt-info-form-container{

    display:inline-flex;
  }

  .page-id-15 #info-iframe-header{

    border-bottom: 1.0px solid silver;
  }

.page-id-15 td#total-text-box{

    font-size: 25px;
    color: #b8a680;

}

.page-id-15 input#total-amount{

    color: green !important;
    font-size: 25px

}

div.recinfomessage{

    color:#a4936b;
    text-align: left;
}