button.btn i {
    margin-right: 5px; /* Adds a small space after the icon if you keep any text next to it */
}

.fab-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050; /* More than 1040 which is for modal & backdrop */
}

.fab {
    width: 56px; /* Standard FAB size */
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.24), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
}

.image-upload-container {
    position: relative;
}

.close-preview {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    background: none;
    border: none;
    color: red;
    font-size: 20px;
    display: none; /* Initially hidden */
}

.book-cover-preview {
    display: none; /* Initially hidden */
}

#bookCategory {
    float: right;
}

/* Custom select styling */
.select-category {
    border: none; /* Removes border */
    outline: none; /* Removes outline on focus */
}

/* To retain some visual cue when the select box is focused */
.select-category:focus {
    box-shadow: 0 0 0 1px #000; /* Example for a subtle border effect on focus */
}

#bookDropdown {
    position: absolute;
    margin-top: -25px;
    margin-left: 17%;
}

.btn-clear {
    background-color: transparent; /* Clear background */
    color: inherit; /* Inherits color from parent or you can set a specific color */
    border: none; /* Removes border */
    padding: 0; /* Removes padding */
    box-shadow: none; /* Removes box shadow if any */
}

.btn-clear:hover, .btn-clear:focus {
    background-color: transparent; /* Keeps background clear on hover/focus */
    outline: none; /* Removes outline on focus */
}
.description-container {
    position: relative;
    overflow: hidden;
    max-height: 80px; /* Adjust this depending on how much text you want to show */
}

.toggleButtonSeeMore {
    display: block;
    margin-top: 5px;
    color: #007bff; /* Link color */
    cursor: pointer;
    text-align: right; /* Align button to the right */
}
.description-container {
    max-height: 80px; /* Initial height */
    overflow: hidden; /* Hide the overflow */
    transition: max-height 0.3s ease-in-out; /* Smooth expansion */
}

.fullText {
    display: none;
}

.card-body.expanded {
    max-height: none; /* Allow it to expand fully */
}
.description-container {
    max-height: 80px;  /* Initial height to show short text */
    overflow: hidden;  /* Hide overflow */
    transition: max-height 0.3s ease;  /* Smooth transition */
}

.fullText {
    display: none;  /* Initially hidden */
}

/* When showing the full description */
.card.expanded .description-container {
    max-height: none;  /* Remove height limit to allow expansion */
    overflow: visible;  /* Allow content to be shown */
}

/* Make sure the card itself can grow */
.card {
    transition: max-height 0.3s ease;  /* Smooth transition for card height */
}