@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

.main-header-bar {
    padding: 0px 25px;
}

.category-tag {
    display: inline-block; /* Ensures the tag behaves like an inline element */
    background-color: #f3f3f3; /* Light gray background for the chip */
    border: 1px solid #d3d3d3; /* Border color */
    color: #333; /* Text color */
    font-size: 0.9em; /* Slightly smaller text size */
    padding: 6px 12px; /* Add padding inside the chip */
    border-radius: 6px; /* Makes the chip rounded */
    margin: 4px; /* Adds spacing between chips */
    font-family: Arial, sans-serif; /* Ensures a clean, simple font */
    text-align: center; /* Center-aligns text inside the chip */
    vertical-align: middle; /* Aligns chips properly with surrounding text */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
    cursor: default; /* Indicates the chip is not clickable by default */
}

.category-tag:hover {
    background-color: #d6d6d6; /* Slightly darker background on hover */
}

.category-tag.removable {
    padding-right: 28px; /* Add extra space for the remove icon */
    position: relative; /* Position relative for icon placement */
}

.category-tag.removable::after {
    content: "×"; /* Unicode for a close 'x' symbol */
    font-size: 0.8em; /* Smaller size for the icon */
    color: #555; /* Slightly dimmed color for the icon */
    position: absolute; /* Absolute positioning for placement */
    right: 8px; /* Position on the right side */
    top: 50%; /* Vertically center the icon */
    transform: translateY(-50%); /* Correct centering offset */
    cursor: pointer; /* Pointer cursor to indicate the icon is clickable */
}

.unstyled-list-group {
    list-style-type: none; /* Removes default bullets */
    padding: 0;
    margin: 0;
}

.unstyled-list-item {
    padding: 5px 0; /* Add spacing between list items */
    margin-bottom: 5px;
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Align icon and text vertically */
}

/* General Material Icons Styling */
.material-list-item-with-icon::before {
    font-family: "Material Icons"; /* Use Material Icons font */
    display: inline-block;
    margin-right: 5px; /* Add space between the icon and text */
    font-size: 2.25em !important; /* Adjust the size of the icon */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.material-icon-right-arrow {
    content: "arrow_right"; /* Add the specific icon */
}

.material-icon-left-arrow {
    content: "circle"; /* Add the specific icon */
}