.bookshelf { position: relative; }
.bookshelf .card {border-width: 0;flex-basis: 96px;cursor: pointer;background-position:center;background-size:cover;overflow:hidden;min-height:600px;transition-property: flex-basis,flex; transition-duration: 0.5s}
.bookshelf .card:hover {flex-basis: 132px;}
.bookshelf .card.open {flex:1;cursor:default;}
.bookshelf *:not(input) {color:#fff}
.bookshelf .book-name {
	position: absolute;
	top: 40px; right: 48px;
	text-align: right;
	white-space: nowrap;
	transform-origin: right;
	transform: rotate(-90deg);
	transition-duration: .5s;
	transition-property: transform,top;
}
.bookshelf .card:hover .book-name { transform: rotate(-90deg) translateY(-18px); }
.bookshelf .card.open .book-name { transform: rotate(0) translateX(16px); }
.bookshelf .book-buttons, .bookshelf .book-closed { position: absolute; bottom: 40px; right: 30px; transition: transform 0.5s; }
.bookshelf .card:hover .book-closed { transform: translateX(-18px); }
.bookshelf .book-content { height: 100%; width: 62vw; padding-bottom: 40px; padding-top: 112px; }
.bookshelf .book-content {opacity:0;transition:opacity .5s;font-size:20px;line-height: 1.7;}
.bookshelf .book-buttons { display: none; }
.bookshelf .open > .book-content { opacity: 1; }
.bookshelf .open > .book-buttons { display: block; }
.bookshelf .open > .book-closed {opacity:0}
.bookshelf .book-overlay {content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:transparent;backdrop-filter:blur(20px);pointer-events:none;transition:opacity .5s}
.bookshelf .card.open .book-overlay {opacity:0}
.bookshelf .btn.rounded-circle { line-height: 1; }
.bookshelf button[data-step] {color:#fff!important;border-color:#fff}
.bookshelf button[data-step] * {pointer-events:none}
.bookshelf .book-header { padding-left: 80px; }
.bookshelf .book-footer { position: relative; margin: 0 80px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .3); }
.bookshelf .book-progress { position: absolute; top: -2px; left: 0; width: 0; height: 2px; background: #fff; }
.bookshelf.inited .open .book-progress { transition: width 20s linear; width: 100%; }
.bookshelf.inited .open .book-progress.animate { width: 100%; }
.bookshelf .book-form {
	--bs-btn-border-radius: 0.375rem;
	--bs-border-radius-lg: 0.5rem;
	color: inherit;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 30px;
	width: 300px;
}
.bookshelf .book-form .card-header {
	font-size: var(--bs-body-font-size);
	position: absolute;
	top: 50%;
	width: 188px;
	left: 0;
	background-color: var(--bs-primary-hover);
	padding: .375rem .75rem;
	line-height: 1.5;
	border: var(--bs-border-width) solid var(--bs-secondary);
	border-radius: var(--bs-btn-border-radius);
	transform: rotate(-90deg) translateX(18px) translateY(-65px);
}
.bookshelf .book-form form > div  {
	padding-left: 58px !important;
}
@media (max-width: 768px) {
	.bookshelf .book { flex-basis: 0 !important; transition: flex-basis .5s, margin .5s; }
	.bookshelf .book.open { flex-basis: 100% !important; margin: 0 1rem; }
	.bookshelf .book:not(.open) { pointer-events:none; }
	.bookshelf .book-buttons { opacity: 1; }
	.bookshelf .book-closed { opacity: 0; }
	.bookshelf .book-name { top: 20px; right: 30px; transform: rotate(0) translateX(16px); }
	.bookshelf .book-content { padding: 46px 20px 0; width: 90vw; }
	.bookshelf .book-header { padding-left: 0; }
	.bookshelf .book-footer { margin: 0 20px; }
}