.loading_div{display:flex;justify-content:center;height:100%;flex-direction:column}.book_loader_container{--color:#eee;--line-width:0.5ch;--_border-width:calc(var(--line-width) / 2);--duration:2s;--spine-length:5ch;--spine-height:calc(var(--spine-length) * 0.5);--page-length:7ch;--cover-length:calc(var(--page-length) + 0ch);--page-offset-y:0.4ch;--page-offset-x:0.5ch;--page-anim-offset:calc(2s / 4);--_width:calc(2 * var(--cover-length) + var(--spine-length) + 2 * var(--line-width));--_wrapper-width:calc(var(--cover-length) + var(--line-width) + var(--spine-length) / 2);--_height:calc(var(--_wrapper-width) + var(--spine-height) + var(--page-offset-y));position:relative;width:var(--_width);height:var(--_height);& .spine{border:var(--line-width) var(--color) solid;border-radius:0 0 9px 9px;border-top:none;position:absolute;width:var(--spine-length);height:var(--spine-height);left:50%;transform:translateX(-50%);bottom:0;&:after,&:before{--border-radius:15px;content:"";position:absolute;border:solid var(--_border-width) var(--color);border-radius:15px;width:calc(var(--cover-length) + var(--line-width));top:0}&:after{border-radius:0 var(--border-radius) var(--border-radius) 0;left:0;transform:translatex(calc(var(--spine-length) - var(--line-width)))}&:before{border-radius:var(--border-radius) 0 0 var(--border-radius);right:0;transform:translatex(calc(-1 * var(--spine-length) + var(--line-width)))}}& .book_loader_page{width:var(--_wrapper-width);position:absolute;right:0;bottom:calc(var(--spine-height) + var(--page-offset-y));transform-origin:left center;rotate:0deg;&:not(.static){animation:rotation var(--duration) linear infinite;animation-delay:calc((var(--page-num) - 1) * var(--page-anim-offset))}&.left{left:0}&.right{right:0}&:after{content:"";display:block;--_radius:calc(var(--page-length) + var(--line-length));border:solid var(--_border-width) var(--color);border-radius:15px;width:var(--page-length)}&.left:after{transform:translatex(calc(1 * (var(--_wrapper-width) - var(--page-length)) - (var(--spine-length) / 2) + var(--line-width) - var(--page-offset-x)))}&:not(.left):after{transform:translatex(calc((var(--spine-length) / 2 - var(--line-width)) + var(--page-offset-x)))}}}.loading_wrapper{min-width:10ch;min-height:10ch;display:flex;justify-content:center}@keyframes rotation{to{rotate:-180deg}}.dot_loading_container{width:100%;height:350px;max-width:100%;display:flex;justify-content:center;align-items:center}.dot_loading_div{display:flex;transform:scale(4)}.dot_loading_div .loading_ball{width:.4rem;height:.4rem;border-radius:.5rem;transition:transform infinite .3s}.loading_ball+.loading_ball{margin-left:.4rem}.dot_loading_div .loading_ball.one{animation:loadingBall .5s infinite alternate;background:#650071}.dot_loading_div .loading_ball.two{animation:loadingBall2 .5s .2s infinite alternate;background:#c833d8}.dot_loading_div .loading_ball.three{animation:loadingBall3 .5s .35s infinite alternate;background:#d616eb}.dot_loading_div .loading_ball.four{animation:loadingBall4 .5s .5s infinite alternate;background:#70077b}@keyframes loadingBall{0%{transform:translateY(-10px) scale(1.2);background:#ac1cbc;box-shadow:0 0 2px #c833d8}to{transform:translateY(5px)}}@keyframes loadingBall2{0%{transform:translateY(-10px) scale(1.2);background:#db59e9;box-shadow:0 0 2px #5b2860}to{transform:translateY(5px)}}@keyframes loadingBall3{0%{transform:translateY(-10px) scale(1.2);background:#c833d8;box-shadow:0 0 2px #c85ed4}to{transform:translateY(5px)}}@keyframes loadingBall4{0%{transform:translateY(-10px) scale(1.2);background:#cc27de;box-shadow:0 0 2px #612668}to{transform:translateY(5px)}}.svgContainer path{opacity:0;animation:fadeIn 2s forwards}.svgContainer path:nth-child(2){animation-delay:.2s}.svgContainer path:first-child{animation-delay:.4s}.svgContainer path:nth-child(3){animation-delay:.6s}.svgContainer path:nth-child(5){animation-delay:.8s}.svgContainer path:nth-child(4){animation-delay:1.1s}.svgContainer path:nth-child(6){animation-delay:1.3s}@keyframes fadeIn{to{opacity:1}}