@-webkit-keyframes rotate-forever {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

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

@-moz-keyframes rotate-forever {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

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

@keyframes rotate-forever {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

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

.treasure-overlay-spinner-active .treasure-overlay-spinner {
    -webkit-animation-duration: .75s;
    -moz-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: rotate-forever;
    -moz-animation-name: rotate-forever;
    animation-name: rotate-forever;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;
    height: 30px;
    width: 30px;
    border: 5px solid rgba(0,0,0,0.7);
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    border-top: 5px solid rgba(0,0,0,0.25);
    border-right: 5px solid rgba(0,0,0,.75);
    border-bottom: 5px solid rgba(0,0,0,.75);
    border-left: 5px solid rgba(0,0,0,.75)
}

    .treasure-overlay-spinner-active .treasure-overlay-spinner, .treasure-overlay-spinner-active .treasure-overlay-spinner:after {
        border-radius: 50%;
        width: 30px;
        height: 30px
    }

.treasure-overlay-spinner {
    position: absolute;
    z-index: 1;
    top: 40vh;
    left: 50%;
    margin: -15px 0 0 -15px;
    width: 30px;
    height: 30px;
    border: 8px solid #fff;
    border-right-color: transparent;
    border-radius: 50%
}

treasure-overlay-spinner.treasure-overlay-spinner-active-remove {
    transition: all 750ms ease-in
}

.treasure-overlay-spinner-container {
    position: absolute;
    min-height: 50px;
    min-width: 50px;
    z-index: 1;
    top: -9999999px;
    left: -9999999px;
    bottom:0px;
    width: 100%;
    height: 99999px;
    background-color: rgba(255,255,255,.85);
    opacity: 0;
    transition: opacity 500ms ease-in
}

.treasure-overlay-spinner-active .treasure-overlay-spinner-container, .treasure-overlay-spinner-active-add .treasure-overlay-spinner-container, .treasure-overlay-spinner-active-add-active .treasure-overlay-spinner-container {
    top: 0;
    left: 0;
    opacity: 1
}

.treasure-overlay-spinner-active-remove .treasure-overlay-spinner-container, .treasure-overlay-spinner-active-remove-active .treasure-overlay-spinner-container {
    top: 0;
    left: 0;
    opacity: 0
}

.treasure-overlay-spinner-content {
    position: relative
}


/*@keyframes loading {
    0% {
        width: 0
    }

    100% {
        width: 100%
    }
}

@keyframes percentage {
    0% {
        content: "0%"
    }

    5% {
        content: "5%"
    }

    10% {
        content: "10%"
    }

    20% {
        content: "20%"
    }

    30% {
        content: "30%"
    }

    40% {
        content: "40%"
    }

    50% {
        content: "50%"
    }

    60% {
        content: "60%"
    }

    70% {
        content: "70%"
    }

    80% {
        content: "80%"
    }

    90% {
        content: "90%"
    }

    95% {
        content: "95%"
    }

    96% {
        content: "96%"
    }

    97% {
        content: "97%"
    }

    98% {
        content: "98%"
    }

    99% {
        content: "99%"
    }

    100% {
        content: "100%"
    }
}


.treasure-overlay-spinner-active .treasure-overlay-spinner {
    display: block;
    position: relative;
    height: 32px;
    width: 200px;
    background: #a7a9ac;
    border: 2px solid #a7a9ac;
    color: #808080;
    overflow: hidden;
}

    .treasure-overlay-spinner-active .treasure-overlay-spinner::before {
        content: '';
        background: #808080;
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        animation: loading 10s linear normal;
    }

    .treasure-overlay-spinner-active .treasure-overlay-spinner:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 24px;
        line-height: 32px;
        color: rgb(47,225,231);
        mix-blend-mode: difference;
        animation: percentage 10s linear normal;
    }



.treasure-overlay-spinner {
    position: fixed;
    z-index: 1;
    top: 40%;
    left: 50%;
    margin: -15px 0 0 -15px;
    height: 32px;
    width: 200px;
    background: #a7a9ac;
    border: 2px solid #a7a9ac;
    color: #808080;
    overflow: hidden;
}

treasure-overlay-spinner.treasure-overlay-spinner-active-remove {
    transition: all 750ms ease-in
}

.treasure-overlay-spinner-container {
    position: fixed;
    min-height: 50px;
    min-width: 50px;
    z-index: 1;
    top: -9999999px;
    left: -9999999px;
    width: 100%;
    height: 100%;   
    opacity: 0;
    transition: opacity 500ms ease-in
}

.treasure-overlay-spinner-active .treasure-overlay-spinner-container, .treasure-overlay-spinner-active-add .treasure-overlay-spinner-container, .treasure-overlay-spinner-active-add-active .treasure-overlay-spinner-container {
    top: 0;
    left: 0;
    opacity: 1
}

.treasure-overlay-spinner-active-remove .treasure-overlay-spinner-container, .treasure-overlay-spinner-active-remove-active .treasure-overlay-spinner-container {
    top: 0;
    left: 0;
    opacity: 0
}

.treasure-overlay-spinner-content {
    position: relative
}*/