/* _content/KeiFlow.UI.Base/Components/BookLoaderComponent.razor.rz.scp.css */
.book-loader[b-et7gb6390r] {
    --background: linear-gradient(135deg, #23C4F8, #275EFE);
    --shadow: rgba(39, 94, 254, 0.28);
    --text: #6C7486;
    --page: rgba(255, 255, 255, 0.36);
    --page-fold: rgba(255, 255, 255, 0.52);
    --duration: 3s;
    width: 200px;
    height: 140px;
    position: relative;
}

    .book-loader[b-et7gb6390r]:before, .book-loader[b-et7gb6390r]:after {
        --r: -6deg;
        content: "";
        position: absolute;
        bottom: 8px;
        width: 120px;
        top: 80%;
        box-shadow: 0 16px 12px var(--shadow);
        transform: rotate(var(--r));
    }

    .book-loader[b-et7gb6390r]:before {
        left: 4px;
    }

    .book-loader[b-et7gb6390r]:after {
        --r: 6deg;
        right: 4px;
    }

    .book-loader div[b-et7gb6390r] {
        width: 100%;
        height: 100%;
        border-radius: 13px;
        position: relative;
        z-index: 1;
        perspective: 600px;
        box-shadow: 0 4px 6px var(--shadow);
        background-image: var(--background);
    }

        .book-loader div ul[b-et7gb6390r] {
            margin: 0;
            padding: 0;
            list-style: none;
            position: relative;
        }

            .book-loader div ul li[b-et7gb6390r] {
                --r: 180deg;
                --o: 0;
                --c: var(--page);
                position: absolute;
                top: 10px;
                left: 10px;
                transform-origin: 100% 50%;
                color: var(--c);
                opacity: var(--o);
                transform: rotateY(var(--r));
                -webkit-animation: var(--duration) ease infinite;
                animation: var(--duration) ease infinite;
            }

                .book-loader div ul li:nth-child(2)[b-et7gb6390r] {
                    --c: var(--page-fold);
                    -webkit-animation-name: page-2;
                    animation-name: page-2-b-et7gb6390r;
                }

                .book-loader div ul li:nth-child(3)[b-et7gb6390r] {
                    --c: var(--page-fold);
                    -webkit-animation-name: page-3;
                    animation-name: page-3-b-et7gb6390r;
                }

                .book-loader div ul li:nth-child(4)[b-et7gb6390r] {
                    --c: var(--page-fold);
                    -webkit-animation-name: page-4;
                    animation-name: page-4-b-et7gb6390r;
                }

                .book-loader div ul li:nth-child(5)[b-et7gb6390r] {
                    --c: var(--page-fold);
                    -webkit-animation-name: page-5;
                    animation-name: page-5-b-et7gb6390r;
                }

                .book-loader div ul li svg[b-et7gb6390r] {
                    width: 90px;
                    height: 120px;
                    display: block;
                }

                .book-loader div ul li:first-child[b-et7gb6390r] {
                    --r: 0deg;
                    --o: 1;
                }

                .book-loader div ul li:last-child[b-et7gb6390r] {
                    --o: 1;
                }

    .book-loader span[b-et7gb6390r] {
        display: block;
        left: 0;
        right: 0;
        top: 100%;
        margin-top: 20px;
        text-align: center;
        color: var(--text);
    }

@-webkit-keyframes page-2 {
    0% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    35%, 100% {
        opacity: 0;
    }

    50%, 100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-2-b-et7gb6390r {
    0% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    35%, 100% {
        opacity: 0;
    }

    50%, 100% {
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes page-3 {
    15% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }

    65%, 100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-3-b-et7gb6390r {
    15% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }

    65%, 100% {
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes page-4 {
    30% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    65%, 100% {
        opacity: 0;
    }

    80%, 100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-4-b-et7gb6390r {
    30% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    65%, 100% {
        opacity: 0;
    }

    80%, 100% {
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes page-5 {
    45% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    65% {
        opacity: 1;
    }

    80%, 100% {
        opacity: 0;
    }

    95%, 100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-5-b-et7gb6390r {
    45% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    65% {
        opacity: 1;
    }

    80%, 100% {
        opacity: 0;
    }

    95%, 100% {
        transform: rotateY(0deg);
    }
}
/* _content/KeiFlow.UI.Base/Components/PaginationComponent.razor.rz.scp.css */
.dark[b-es54lbx26a] {
    --border-color: rgba(0,0,0,0.50);
    --fore-color: #888;
    --active-fore-color: #ccc;
    --hover-fore-color: var(--bs-blue);
    --disabled-fore-color: #333;
}

.green[b-es54lbx26a] {
    --border-color: var(--bs-green);
    --fore-color: var(--bs-light);
    --active-fore-color: var(--bs-danger);
    --hover-fore-color: var(--bs-danger);
    --disabled-fore-color: var(--bs-gray-500);
}

.blue[b-es54lbx26a] {
    --border-color: var(--bs-blue);
    --fore-color: var(--bs-light);
    --active-fore-color: var(--bs-yellow);
    --hover-fore-color: var(--bs-yellow);
    --disabled-fore-color: var(--bs-gray-500);
}

.pagination-component[b-es54lbx26a] {
    text-align: center;
}

    .pagination-component ul[b-es54lbx26a] {
        display: inline-block;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .pagination-component li[b-es54lbx26a] {
        border-top-color: var(--border-color);
        border-bottom-color: var(--border-color);
        cursor: pointer;
        border-left: 0;
        border-right: 10px solid transparent;
        border-bottom-width: 17px;
        border-top-width: 17px;
        border-style: solid;
        transform: rotate(360deg);
        height: 0;
        float: left;
        margin-right: 3px;
        position: relative;
    }

        .pagination-component li[b-es54lbx26a]::before,
        .pagination-component .info[b-es54lbx26a]::after,
        .pagination-component .info[b-es54lbx26a]::before,
        .pagination-component .info ~ li[b-es54lbx26a]::before {
            border-left-color: var(--border-color);
            border-right-color: var(--border-color);
        }

    .pagination-component a[b-es54lbx26a] {
        color: var(--fore-color);
        font-size: 15px;
        font-weight: bold;
        text-decoration: none;
        transition: all 0.2s linear;
        line-height: 34px;
        margin-top: -17px;
        display: block;
        height: 34px;
        min-width: 30px;
    }

        .pagination-component a:hover[b-es54lbx26a] {
            color: var(--hover-fore-color); /*#c9282d*/
        }


    .pagination-component .active a[b-es54lbx26a] {
        color: var(--active-fore-color);
    }

    .pagination-component .disabled a[b-es54lbx26a],
    .pagination-component .disabled:hover a[b-es54lbx26a] {
        color: var(--disabled-fore-color);
        cursor: default;
    }

    .pagination-component li[b-es54lbx26a]::before {
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-top-color: transparent;
        border-width: 17px 10px 17px 0;
        border-style: solid;
        position: absolute;
        content: "";
        left: -10px;
        height: 0px;
        top: -17px;
        width: 0px;
    }

    .pagination-component .info ~ li[b-es54lbx26a]::before {
        border-bottom-color: transparent;
        border-top-color: transparent;
        border-width: 17px 0 17px 10px;
        right: -10px;
        left: auto;
    }

    .pagination-component .info ~ li[b-es54lbx26a] {
        border-left: 10px solid transparent;
        border-right: 0;
    }

    .pagination-component .info[b-es54lbx26a] {
        border-right: 0;
        border-left: 0;
    }

        .pagination-component .info[b-es54lbx26a]::after,
        .pagination-component .info[b-es54lbx26a]::before {
            border-bottom-color: transparent;
            border-top-color: transparent;
            border-width: 17px 10px 17px 0;
            border-style: solid;
            position: absolute;
            content: "";
            height: 0px;
            width: 0px;
            top: -17px;
            left: -10px;
        }

        .pagination-component .info[b-es54lbx26a]::after {
            border-right-color: transparent;
            border-width: 17px 0 17px 10px;
            left: 100%;
        }

    .pagination-component .first[b-es54lbx26a],
    .pagination-component .next[b-es54lbx26a],
    .pagination-component .last[b-es54lbx26a] {
        margin-right: 0px;
    }

    .pagination-component .first[b-es54lbx26a] {
        margin-right: -5px; /* border-right / 2 */
    }

    .pagination-component .last[b-es54lbx26a] {
        margin-left: -5px; /* border-left / 2 */
    }

    .pagination-component .first[b-es54lbx26a],
    .pagination-component .prev[b-es54lbx26a] {
        -webkit-border-radius: 20px 0 0 20px;
        -moz-border-radius: 20px 0 0 20px;
        border-radius: 20px 0 0 20px;
    }

    .pagination-component .next[b-es54lbx26a],
    .pagination-component .last[b-es54lbx26a] {
        -webkit-border-radius: 0 20px 20px 0;
        -moz-border-radius: 0 20px 20px 0;
        border-radius: 0 20px 20px 0;
        border-right: 0;
        border-left: 10px solid transparent;
    }


        .pagination-component .first a[b-es54lbx26a],
        .pagination-component .prev a[b-es54lbx26a],
        .pagination-component .next a[b-es54lbx26a],
        .pagination-component .last a[b-es54lbx26a] {
            font-size: 20px;
        }


    .pagination-component .prev a[b-es54lbx26a] {
        text-indent: 4px;
    }

    .pagination-component .first a[b-es54lbx26a] {
        text-indent: 2px;
    }

    .pagination-component .next a[b-es54lbx26a] {
        text-indent: -4px;
    }

    .pagination-component .last a[b-es54lbx26a] {
        text-indent: -2px;
    }

    .pagination-component .first[b-es54lbx26a]::before,
    .pagination-component .prev[b-es54lbx26a]::before,
    .pagination-component .next[b-es54lbx26a]::before,
    .pagination-component .last[b-es54lbx26a]::before {
        content: none;
    }