/*背景底*/
/*加!important覆寫原本樣式*/
.blockOverlay {
    background-color: #fff !important; /*白色底，視自己需求看要不要加*/
    opacity:1!important;
    cursor: default !important; /*預設游標*/
}
/*loading icon*/
.blockMsg {
    width: 100px; /*width、height改變圓的直徑大小*/
    height: 100px;
    top: 40% !important;
    left: 45% !important;
    display: inline-block !important;
    animation: container-rotate 1568ms linear infinite;
}

.spinner-layer {
    height: 100%;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4,0,0.2,1) infinite both;
}

.circle-clipper {
    display: inline-block;
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

    .circle-clipper .circle {
        box-sizing: border-box;
        width: 200%;
        border-width: 7px; /*線條粗細*/
        border-style: solid;
        border-color: #4285f4;
        border-bottom-color: transparent !important;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .circle-clipper.left .circle {
        left: 0;
        border-right-color: transparent !important;
        animation: left-spin 1333ms cubic-bezier(0.4,0,0.2,1) infinite both
    }

    .circle-clipper.right .circle {
        border-left-color: transparent !important;
        animation: right-spin 1333ms cubic-bezier(0.4,0,0.2,1) infinite both
    }

/*定義動畫*/
@keyframes container-rotate {
    to {
        transform: rotate(360deg)
    }
}

@keyframes fill-unfill-rotate {
    12.5% {
        transform: rotate(135deg)
    }

    25% {
        transform: rotate(270deg)
    }

    37.5% {
        transform: rotate(405deg)
    }

    50% {
        transform: rotate(540deg)
    }

    62.5% {
        transform: rotate(675deg)
    }

    75% {
        transform: rotate(810deg)
    }

    87.5% {
        transform: rotate(945deg)
    }

    to {
        transform: rotate(1080deg)
    }
}

@keyframes left-spin {
    from {
        transform: rotate(130deg)
    }

    50% {
        transform: rotate(-5deg)
    }

    to {
        transform: rotate(130deg)
    }
}

@keyframes right-spin {
    from {
        transform: rotate(-130deg)
    }

    50% {
        transform: rotate(5deg)
    }

    to {
        transform: rotate(-130deg)
    }
}