section.mod_flipbook_magazine{
  isolation: isolate;
}

section.mod_flipbook_magazine div.Magazine>ul>li{
  --flipbook-item-max-height: calc(100vh - 40px);
}

body.fadetopnav section.mod_flipbook_magazine div.Magazine>ul>li{
  --flipbook-item-max-height: calc(100vh - var(--top-nav-height) - 40px - (10px * (var(--total-items))));
}

body.fadetopnav:has(div.topnav.hasTicker) section.mod_flipbook_magazine div.Magazine>ul>li{
  --flipbook-item-max-height: calc(100vh - var(--top-nav-height) - var(--ticker-height) - 40px - (10px * (var(--total-items))));
}

section.mod_flipbook_magazine div.Magazine>ul{
	display: flex;
	flex-direction: column-reverse;
	position: relative;
}

section.mod_flipbook_magazine div.Magazine>ul>li{
	bottom: calc(20px + (10px * (var(--total-items))));
	position: sticky;
	background-color: rgb(var(--grey9));
	border-radius: var(--general-border-radius);
	overflow: auto;
	max-height: var(--flipbook-item-max-height);
	order: calc(1 + var(--total-items) - var(--item-num));
	width: calc(100% - (4vw * var(--item-num)));
	margin-inline: auto;
	transform: translateY(calc(10px * (var(--total-items) - var(--item-num))));
	margin-bottom: calc(10px + (20px * (var(--total-items) - var(--item-num))));
	overscroll-behavior-y: auto;
	padding: 40px calc(40px + 4vw);
	flex: 0 0 10%;
	transition: width 0.5s, padding 0.5s;
}

section.mod_flipbook_magazine div.Magazine>ul>li.flipbookDone{
    width: calc(100% - 4vw);
    padding: 40px calc(40px + 4vw);
}

section.mod_flipbook_magazine div.Magazine>ul>li.flipbookDone:has(~li.flipbookDone){
    width: calc(100% - 8vw);
    padding: 40px calc(40px + 2vw);
}

section.mod_flipbook_magazine div.Magazine>ul>li:nth-child(even){
	background-color: rgb(var(--grey8));
}

section.mod_flipbook_magazine div.Magazine .flipbookTitles{
  padding: 10px 0px;
  background-color: rgb(var(--grey10));
  z-index: 1;
  position: sticky;
  width: 100%;
  top: 200px;
}

/* ITEM STYLING */

section.mod_flipbook_magazine div.Magazine .Item{
	flex-direction: row-reverse;
	padding-bottom: 0;
}

section.mod_flipbook_magazine div.Magazine .Item .ItemBefore{
	width: 45%;
	max-width: none;
	position: static;
	transition: unset;
}

section.mod_flipbook_magazine div.Magazine .Item .ItemInner{
	padding: 0 40px 0 0;
}

section.mod_flipbook_magazine div.Magazine .Item .ItemInner .ItemIcon{
	left: auto;
	right: 10px;
}