/* General styles for book container wrapper */
.bookContainerWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
	justify-content: space-around;
}


    .bookMonthThumbnail {
        width: 200px;
        height: auto;
        cursor: pointer;
        border-radius: 10px;
    }
    

.bookGrid {	 
display: flex;	 
flex-wrap: wrap;	 
gap: 10px;
justify-content: space-around;	 
 }	 

.bookGridYear{	 
display: flex;	 
flex-wrap: wrap;	 
gap: 10px;
justify-content: flex-start;	 
 }	 

 .bookGridMonth{
    display: flex;	 
    flex-wrap: wrap;	 
    gap: 1rem;
    justify-content: flex-start;	 
     }	

#currentlyReadingGrid{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
justify-content: space-between;
}

#currentlyReadingGrid .bookThumbnail{
    width: 200px;
    height: auto;
    cursor: pointer;
    border-radius: 10px;
}


/* Styles for book thumbnails */
.bookThumbnail, #bookGridToRead .bookThumbnail {
    width: 100px;
    height: auto;
    cursor: pointer;
    border-radius: 10px;
}

.bookThumbnail a, #bookGridToRead .bookThumbnail a {
    text-decoration: none;
}

/* Styles for progress bars */
.progressBar {
    width: 100%;
    height: 10px;
    background-color: #eee;
    border-radius: 5px;
    margin-top: 5px;
    overflow: hidden;
}

.progressBarInner {
    height: 100%;
    width: 0;
    background-color: #4caf50;
}

/* Material Icons styles */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: local('Material Symbols Outlined'), local('MaterialSymbolsOutlined-Regular'),
        url(https://example.com/path/to/material-symbols-outlined.woff2) format('woff2');
}

.material-icons-outlined, .filled-icon {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-variation-settings: 'FILL'1, 'wght'400, 'GRAD'0, 'opsz'24;
}

.material-icons-outlined {
    color: #efefef;
}

.filled-icon {
    color: #e84d90;
}

#dateGridContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Updated to align to the left */
    margin-bottom: 2rem;
}

#dateGridContainer>span:last-child {
    margin-left: auto;
}

#dateGridContainer>div>span {
    margin-left: 4px;
}

/* Media query to hide the chart on screens smaller than 768px */
@media (max-width: 900px) {
    #dateGridContainer {
        display: none;
    }


    .bookMonthThumbnail {
        width: 200px;
        height: auto;
        cursor: pointer;
        border-radius: 10px;
    }
    

}