/* カスタマイズ用CSS */
/**
 *      スクロールページャー
 */

/* ページ区切り帯 */
.pageSeparator {
    text-align: right;
    background: #888888;
    height: 32px;
    margin-bottom: 30px;
    padding-top: 6px;
    padding-right: 20px;

    color: white;
    font-weight: bold;
}

/* 「前のページへ」リンク文字 */
.pageSeparatorPrevLink {
    color: white;
    content: '前のページへ';
}

/* 「先頭ページへ」リンク文字 */
.pageSeparatorTopLink {
    color: white;
    content: '先頭ページへ';
}

/* スクロールアイコン */
.scrollDisabled {
    /* 非アクティブ時 */
    color: rgba(128, 128, 128, 0.3);
}

.scrollDisabled.sdActive {
    /* アクティブ時 */
    color: forestgreen;
}

/* ページローディングアイコン */
/* https://mamewaza.com/tools/loading.html */
span.pagerLoadingIcon,
span.pagerLoadingIcon:after {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-image:
        -webkit-gradient(radial, 4 center, 0, 4 center, 4, from(#aee650), color-stop(0.5, #aee650), color-stop(0.9, transparent), to(transparent)),
        -webkit-gradient(radial, center 4, 0, center 4, 4, from(#aee650), color-stop(0.5, #aee650), color-stop(0.9, transparent), to(transparent)),
        -webkit-gradient(radial, 46 center, 0, 46 center, 4, from(#aee650), color-stop(0.5, #aee650), color-stop(0.9, transparent), to(transparent)),
        -webkit-gradient(radial, center 46, 0, center 46, 4, from(#aee650), color-stop(0.5, #aee650), color-stop(0.9, transparent), to(transparent));
    background-image:
        -webkit-radial-gradient(10% 50%, 4px 4px, #aee650, #aee650 95%, #aee650 95%, transparent),
        -webkit-radial-gradient(50% 10%, 4px 4px, #aee650, #aee650 95%, #aee650 95%, transparent),
        -webkit-radial-gradient(90% 50%, 4px 4px, #aee650, #aee650 95%, #aee650 95%, transparent),
        -webkit-radial-gradient(50% 90%, 4px 4px, #aee650, #aee650 95%, #aee650 95%, transparent);
    background-image:
        radial-gradient(4px 4px at 10% 50%, #aee650, #aee650 95%, transparent),
        radial-gradient(4px 4px at 50% 10%, #aee650, #aee650 95%, transparent),
        radial-gradient(4px 4px at 90% 50%, #aee650, #aee650 95%, transparent),
        radial-gradient(4px 4px at 50% 90%, #aee650, #aee650 95%, transparent);
}

span.pagerLoadingIcon {
    position: relative;
    margin: 0 10px;
    vertical-align: middle;
    -webkit-animation: pagerLoadingIcon_animation 1.5s linear infinite;
    animation: pagerLoadingIcon_animation 1.5s linear infinite;
}

span.pagerLoadingIcon:after {
    position: absolute;
    content: " ";
    left: 0;
    top: 0;
    margin: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

@-webkit-keyframes pagerLoadingIcon_animation {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes pagerLoadingIcon_animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/**
 *      スクロールページャー ここまで
 */