<style>
    /* Custom font and styling */
    .custom-heading {
      font-family: 'Arial', sans-serif;
      font-weight: bold;
      font-size: 24px;
      color: #333;
    }

    .custom-font {
      font-family: 'Verdana', sans-serif;
      font-size: 16px;
      color: #555;
    }

    .table-custom th, .table-custom td {
      background-color: #f8f9fa;
      color: #333;
      padding: 5px; /* Reduce padding to reduce row height */
      line-height: 1.2; /* Reduce line height for compact rows */
    }

    .btn-custom {
      margin-bottom: 10px;
    }

    .btn-custom-spacing {
      margin-right: 10px;
    }

    /* Form styling for compact layout */
    .form-group-inline {
        display: flex;
        align-items: center;
        margin-bottom: 10px; /* Reduce bottom margin */
    }

    .form-group-inline label {
        margin-right: 10px;
        min-width: 100px;
        font-weight: bold;
        color: #1c1c1c;
        font-size: 16px;
    }

    .form-group-inline .form-control {
        flex: 1;
        border: 1px solid #ced4da;
        padding: 5px; /* Reduce padding inside input fields */
        line-height: 1.2; /* Reduce line height for more compact input fields */
    }

    .form-group-inline input,
    .form-group-inline select {
        flex: 1;
        padding: 5px; /* Adjust padding for more compact layout */
        line-height: 1.2; /* Reduce line height */
    }

    .btn-container {
        display: flex;
        justify-content: flex-start;
        margin-top: 20px;
    }

    /* Reduce table row height */
    .table-custom th, .table-custom td {
        padding: 5px; /* Reduce padding for table cells */
        line-height: 1.2; /* Adjust line height for more compact rows */
    }
  

    .form-group-inline {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    }

    .label-container {
        min-width: 150px; /* Fixed width for label container to ensure alignment */
        text-align: left;
    }

    .form-control {
        width: 300px; /* Width for input and select elements */
    }

    .btn-container {
        display: flex;
        justify-content: flex-start;
        margin-top: 20px;
    }


    </style>

    <style>
    /* Page-specific styling for the stone entry page */
  .stone-page table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
  }

  .stone-page th, .stone-page td {
    border: 1px solid #ddd;
    padding: 2px;
    text-align: left;
  }

  .stone-page th {
    background-color: #f2f2f2;
    font-weight: bold;
  }

  .stone-page input[type="text"], .stone-page input[type="number"], .stone-page select {
    width: 90%;
    padding: 2px;
    margin: 1px 0;
    box-sizing: border-box;
  }

  .stone-page .uppercase-label {
    text-transform: uppercase;
  }

  .stone-page .total-output {
    font-weight: bold;
    color: #333;
  }

  .total-output1 {
    font-weight: bold !important;
    color: #333 !important;
}

  .stone-page #add-stone-btn {
    background-color: #4CAF50;
    color: white;
    padding: 5px 5px;
    border: none;
    cursor: pointer;
    margin-top: 5px;
  }

  .stone-page #add-stone-btn:hover {
    background-color: #45a049;
  }

  .total-carat-weight {
    font-weight: bold;
    color: #333;
    text-align: right; /* Aligns the text to the right */
    margin-top: 10px; /* Add some space above */
}


/* Add this right-align class to your CSS */
.text-right {
  text-align: right; /* Aligns text to the right */
}

/* Price list item styling =========================================== */
/* Reset default list styles */
ul.price-list {
  list-style-type: none; /* Remove default bullet points */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
}

/* Price list item styling */
.price-list-item {
  margin-bottom: 10px; /* Space between items */
}

/* Price item container */
.price-item {
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space between label and value */
  width: 300px; /* Set a fixed width */
}

/* Price label styling */
.price-label {
  font-weight: bold; /* Make the label bold */
  color: #1c1c1c; /* Label color */
  text-align: left; /* Left align the label */
}

/* Price value styling */
.price-value {
  text-align: right; /* Right align the price values */
  margin-left: auto; /* Push the value to the far right */
  white-space: nowrap; /* Prevent wrapping */
}
/* ========================================== */

/* ========================================== */
.stone-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8em !important; /* Ensure font size is small and important */
  color: inherit; /* Ensure text color is inherited from the parent */
}

.stone-details-table th,
.stone-details-table td {
  border: 1px solid #ddd;
  padding: 8px;
  padding-left: 12px; /* Add left padding for space between columns */
  padding-right: 12px; /* Add right padding for space between columns */
  color: inherit; /* Ensure text color is inherited from the parent */
  font-size: 0.8em !important; /* Force font size for cells */
}

/* Header styling */
.stone-details-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* Alternate row color */
.stone-details-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Hover effect */
.stone-details-table tbody tr:hover {
  background-color: #f1f1f1;
}

/* Align text to the left */
.stone-details-table th, 
.stone-details-table td {
  text-align: left;
}

.product__details .stone-details-table {
  font-size: 0.8em !important; /* Set a specific font size for the top table */
}
/* ========================================== */




</style>



