div.progress_tree
{
width: 100%;
color: #000;
background-image: url('/assets/texture-light.jpg');
background-position: center;
background-size: cover;
padding: 1rem 2rem;
border: none;
border-radius: 1rem;
/*outline: dashed 1px red;*/
}

div.progress_tree div.chapter
{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
margin-top: 0.25rem;
padding-top: 0.5rem;
border-top: solid 1px;
}

div.progress_tree div.chapter:first-child
{
margin-top: 0;
border-top: none;
}

div.progress_tree div.chapter:last-child
{
padding-bottom: 0.75rem;
}

div.progress_tree div.chapter div.name
{
width: 35%;
flex-shrink: 0;
flex-grow: 0;
font-family: 'Prata', serif;
font-size: 1.5rem;
line-height: 2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

div.progress_tree div.chapter div.pages
{
width: auto;
flex-shrink: 1;
flex-grow: 1;
margin-left: 2rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
/*outline: dashed 1px red;*/
}

div.progress_tree div.chapter div.pages a.page
{
display: block;
width: 30%;
margin-right: 3%;
margin-bottom: 1%;
padding-left: 1.5rem;
position: relative;
color: #444;
text-decoration: none;
font-size: 0.85rem;
line-height: 1rem;
/*outline: dashed 1px red;*/
}

div.progress_tree div.chapter div.pages a.page:hover
{
text-decoration: underline;
color: #000;
}

div.progress_tree div.chapter div.pages a.page.current
{
font-weight: 900;
/*outline: dashed 1px red;*/
}

div.progress_tree div.chapter div.pages a.page:before
{
content: '\f111';
position: absolute;
left: 0;
top: 0;
font-family: "Font Awesome 5 Free";
font-weight: 400;
}

div.progress_tree div.chapter div.pages a.page.read
{
color: #000;
}

div.progress_tree div.chapter div.pages a.page.read:before
{
content: '\f058';
}

@media (max-width: 720px)
{
div.progress_tree { padding: 1rem; }
div.progress_tree div.chapter { display: block; border: none; }
div.progress_tree div.chapter div.name { width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; line-height: 1rem; }
div.progress_tree div.chapter div.pages { display: block; margin-left: 0; }
div.progress_tree div.chapter div.pages a.page { display: block; width: 100%; margin: 0;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	}