#toastr-spot {
    position: fixed; /* Keep it in a fixed position, so it floats over the content */
    top: 20px; /* Adjust the position as needed */
    right: 20px; /* You can also align it to the left or center */
    z-index: 9999; /* Ensure the alert appears on top of other content */
}

.alert-dismissible {
    width: 300px;
    margin-bottom: 10px;
}


.transaction-table.table-responsive {
    max-height: 250px; 
    overflow-y: auto;
}

table.table-transaction {
    border-collapse: collapse;
    width: 100%;
}

.table-transaction thead th {
    position: sticky;
    top: 0;
    background-color: #f1f1f1; 
    z-index: 1;
}

table-transaction th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.tagsinput span.tag {
    background-color: #6571ff !important; /* Primary color for filled tag */
    color: white !important; /* White text inside the tag */
    border-radius: 5px; /* Rounded corners */
    padding: 2px 8px; /* Padding inside the tag */
    position: relative; /* Ensure relative positioning for close icon */
}

.tagsinput span.tag a {
    color: white !important; /* Make the "X" white to stand out */
    font-size: 14px; /* Increase the font size for better visibility */
    margin-left: 8px; /* Add some space between the tag text and the "X" */
    text-decoration: none; /* Remove underline from the "X" */
}
.tagsinput span.tag a:hover {
    color: #ff5e5e !important; /* Change the "X" color on hover for better UX */
    cursor: pointer; /* Show pointer cursor on hover */
}

/* Custom styles for the input field */
.tagsinput input {
    color: #6c757d !important; /* Secondary color for input text */
    border: none; /* Remove the input border */
}

/* Placeholder color customization */
.tagsinput input::placeholder {
    color: #6c757d !important; /* Secondary color for the placeholder */
    opacity: 1; /* Ensure full opacity for the placeholder */
}