body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px; /* Adjust this value to suit your design */
    margin: 0 auto; /* Centers the content */
    padding: 0 20px; /* Adds some padding on the sides */
    background-color: #f4f4f4;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px; /* Adjust based on your preference */
    margin: 0 auto; /* This centers the container */
}

/* Hide the actual file input */
#imageUpload {
    display: none;
}

/* Style the custom upload button */
.upload-button {
    margin: 20px;
    padding: 10px 40px;
    background-color: #a7059a;
    color: white;
    border: none;
    cursor: pointer;
}

.clear-all-button{
    margin: 20px;
    padding: 10px 20px;
    background-color: #ff0000;
    color: white;
    border: #ec971f;
    cursor: pointer;
}

.activate-cropper-button{
    margin: 20px;
    padding: 10px 20px;
    background-color: #0044ff;
    color: white;
    border: none;
    cursor: pointer;
}

.crop-button{
    margin: 20px;
    padding: 10px 20px;
    background-color: #0044ff;
    color: white;
    border: none;
    cursor: pointer;
}

.reset-image-button {
    margin: 20px;
    padding: 10px 20px;
    background-color: #ebb609;
    color: white;
    border: none;
    cursor: pointer;
}

.firstButtonRow {
    display: flex;
    justify-content: space-around; /* Adjust as needed */
    flex-wrap: wrap; /* Allows items to wrap onto the next line */
}

.secondButtonRow {
    display: flex;
    justify-content: space-around; /* Adjust as needed */
    flex-wrap: wrap; /* Allows items to wrap onto the next line */
}

.clear-all-button:hover, .activate-cropper-button:hover, .crop-button:hover, .reset-image-button:hover {
    background-color: #cc0000;
}

#receiptList {
    display: flex;
    flex-direction: row;
    align-items: center; /* Vertically centers items */
    justify-content: center; /* Horizontally centers items */
    flex-wrap: wrap; /* Allow wrapping if there's not enough space */
    gap: 10px; /* Space between boxes */
    margin: 0 auto; /* Ensures the list itself is centered in its parent */
    max-width: 800px; /* Adjust based on your preference */
    border: 1px solid #161616; /* Optional: Adds a border around each box */
    background-color: #bdbdbd10;
}

.media-box {
    width: calc(800px / 8);
    position: relative;
    border: 1px solid #ccc; /* Optional: Adds a border around each box */
    padding: 10px; /* Adds some padding inside the boxes */
    display: flex; /* Makes sure the content inside each box is also flexibly aligned */
    flex-direction: column; /* Aligns items vertically inside the box */
    align-items: center; /* Centers items horizontally */
    justify-content: center; /* Centers items vertically */
}

.handle {
    display: block;
    width: 100%;
    text-align: center;
    cursor: grab; /* or pointer */
    margin-top: auto; /* This helps push the handle to the bottom if the container is a flex container */
}

.media-image {
    max-width: 100px; /* Ensure the image does not exceed the box size */
    max-height: 100px; /* Ensure the image does not exceed the box size */
    object-fit: cover; /* Cover the container without losing aspect ratio */
}

.media-pdf {
    font-size: 14px; /* Starting font size */
    overflow-wrap: break-word; /* Breaks long words to prevent overflow */
    max-width: 100%; /* Ensures content does not overflow the box's width */
    word-wrap: break-word; /* Legacy support for breaking long words */
    line-height: 1.2; /* Adjust line height to ensure readability */
    margin-bottom: 5px;
}

.selected-box {
    border: 2px solid blue; /* Example style for selected state */
}

.remove-button {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.image-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #cccccc;
    background-color: white;
    border: 2px solid #dddddd;
    max-width: 600px;
    max-height: 600px;
    width: auto;
    height: auto;
    margin-bottom: 20px; /* Added margin */
    overflow: hidden; /* Ensure content doesn't overflow */
    font-size: 20px; /* Increased font size */
    padding: 16px; /* Added padding */
}

.image-preview__image {
    width: 100%;
    height: auto;
    border: 2px solid #dddddd8e;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures image fits within container without stretching */
    display: none; /* Hidden by default */
    align-items: center;
}

.reset-image-button {
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #f0ad4e;
    color: white;
    border: none;
    cursor: pointer;
}

.reset-image-button:hover {
    background-color: #ec971f;
}

.form-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin: 20px auto;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.expense-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 800px;
}

.expense-form label {
    display: block;
    margin-bottom: 5px;
}

.form-row {
    display: flex;
    flex-direction: column; /* Change to column to stack label above input */
    align-items: flex-start; /* Align items to the start (left) */
}

input[type=text], input[type=number], input[type=date], textarea {
    width: 100%;
    padding: 6px 10px;
    margin: 8px 0;
    box-sizing: border-box;
  }

.expense-form input[type="text"],
.expense-form input[type="number"],
.expense-form input[type="date"],
.expense-form textarea {
    width: 100%; /* Make input fields take full width of their container */
    margin-left: 0; /* Ensures alignment to the left */
}

.expense-form input[type="text"],
.expense-form input[type="number"],
.expense-form input[type="date"],
.expense-form textarea {
        flex-grow: 1; /* Makes input fields take up the remaining space */
    /* Set a specific width if you want all textboxes to have the same fixed width */
}

.name-row {
    display: flex;
    gap: 30px; /* Adjust the gap between the two fields as needed */
}

.amount-date-row {
    display: flex;
    gap: 30px; /* Adjust the gap between the two fields as needed */
}

.account-clearing-row {
    display: flex;
    gap: 30px; /* Adjust the gap between the two fields as needed */
}

.create-pdf-button {
    margin: 20px;
    padding: 10px 20px;
    background-color: #5cb85c; /* Green color to differentiate from the reset button */
    color: white;
    border: none;
    cursor: pointer;
}

.create-pdf-button:hover {
    background-color: #4cae4c; /* Darker green on hover */
}


.selectTempletType {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 5px;
    font-size: 14px;          /* Make the label text bigger */
}

/* Style the select element to make it larger */
#templetTypeOptions {
    font-size: 14px;          /* Increase the font size of the select */
    padding: 10px 12px;       /* Add padding for height and width */
    width: 100px;             /* Set a larger width */
    height: 40px;             /* Set a fixed height */
    border-radius: 5px;       /* Optional: rounded corners */
    border: 1px solid #ccc;   /* Optional: add a border for style */
    background-color: #f8f8f8;/* Optional: light background color */
}