@keyframes loader 
    0%, 80%, 100%
        box-shadow 0 1em 0 -1.3em #ffffff
    40% 
        box-shadow 0 1em 0 0 #FFF
        
@keyframes loaderPoint
    0%, 80%, 100%
        box-shadow 0 1em 0 -1.3em #21d376
    40% 
        box-shadow 0 1em 0 0 #21d376
        
@keyframes loaderCircle
    0%
        transform rotate(0deg)
    100%
        transform rotate(360deg)

.ocPopTop
    transform translateY(-100%)

.ocScroll
    &::-webkit-scrollbar 
        width 3px
        height 3px
    &::-webkit-scrollbar-thumb
        background transparent
        background #eee
    &:hover
        &::-webkit-scrollbar-thumb
            background #A9A9AA

.loader::before, .loader::after, .loader
    border-radius 20px
    width 8px
    height 8px
    animation-fill-mode both
    animation loader 1.3s infinite ease-in-out
    display block
    margin 0 auto
    position relative
    text-indent -9999em

.loader
    top -1em
    animation-delay -0.2s
    margin 0 8px
    &:before
        left -1em
        animation-delay -0.4s
    &:after
        left 1em

    &:before, &:after
        content ''
        position absolute
        top 0
    
.ocLoaderPoint::before, .ocLoaderPoint::after, .ocLoaderPoint 
    border-radius 20px
    width 10px
    height 10px
    animation-fill-mode both
    animation loaderPoint 1.3s infinite ease-in-out
    display block
    margin 0 auto
    position relative
    text-indent -9999em
.ocLoaderPoint
    top -1em
    animation-delay -0.15s
    margin 0 20px
    &:before
        left -1.2em
        animation-delay -0.3s
    &:after
        left 1.2em

    &:before, &:after
        content ''
        position absolute
        top 0


.ocLoaderCircle
    opacity 0.9
    filter blur(1px)
    &:before, &:after
        position absolute
        left 50%
        top 50%
        transform translate(-50%, -50%)
        z-index 100
    &:before
        content ""
        display block
        border-radius 50%
        width 50px
        height 50px
        border-top 10px solid rgba(100, 100, 100, 0.2)
        border-right 10px solid rgba(100, 100, 100, 0.2)
        border-bottom 10px solid rgba(100, 100, 100, 0.2)
        border-left 10px solid #21d376
        animation loaderCircle 1.1s infinite linear
    &:after
        content ""
        border-radius 50%
        width 10px
        height 10px


@keyframes scale
    to 
        transform rotate(360deg)

.oc-loader
    position absolute
    z-index 9999
    top calc(50% - 35px)
    left calc(50% - 35px)
    width 70px
    height 70px
    background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAYAAACuwEE+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzlGMjM5RTBCMzE4MTFFOEFDOEZDQTg4MzJGM0MwMkQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzlGMjM5RTFCMzE4MTFFOEFDOEZDQTg4MzJGM0MwMkQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozOUYyMzlERUIzMTgxMUU4QUM4RkNBODgzMkYzQzAyRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozOUYyMzlERkIzMTgxMUU4QUM4RkNBODgzMkYzQzAyRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqEH9lAAAAh8SURBVHja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')
    background-size contain
    animation scale 1s linear infinite

.ocPageLoaderAnker
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    width 100%
    height 100%
    text-align center
    // background-image radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%)
    background-image linear-gradient(to right, #6a11cb 0%, #2575fc 100%)
    
    * 
        position fixed
        left 50%
        top 50%
        transform translate3d(-50%, -50%, 0) rotate(0deg)

    img
        width 200px
        
    .dots 
        .dot
            width 300px
            height 300px
            animation loading-block 5s ease-in-out infinite
            &:after
                content ""
                display inline-block
                width 60px
                height 60px
                background-color #fff
                border-radius 50%
                position absolute
                transform scale(0.17)
                animation loading-dot 5s ease-in-out infinite

            &:nth-child(1)
                top 196px
                left -82px
                animation-delay 0s
                &:after
                    width 70px
                    height 70px
                    transform-origin top right
                    top 0
                    right 0
                    animation-delay 0s
            
            &:nth-child(2)
                top -105px
                left -60px
                animation-delay 0.25s
                &:after
                    width 80px
                    height 80px
                    transform-origin bottom right
                    bottom 0
                    right 0
                    animation-delay 0.25s
            &:nth-child(3)
                top -138px
                left -50px
                animation-delay 0.5s
                &:after
                    width 110px
                    height 110px
                    transform-origin bottom right
                    bottom 0
                    right 0
                    animation-delay 0.5s
            &:nth-child(4)
                top 104px
                left 208px
                animation-delay 0.75s
                &:after
                    width 140px
                    height 140px
                    transform-origin top left
                    top 0
                    left 0
                    animation-delay 0.75s
            &:nth-child(5) 
                top -181px
                left 155px
                animation-delay 1s
                &:after 
                    width 170px
                    height 170px
                    transform-origin bottom left
                    bottom 0
                    left 0
                    animation-delay 1s

@keyframes loading-block
    50%,100% 
        transform translate3d(-50%, -50%, 0) rotate(360deg)
    

@keyframes loading-dot 
    25% 
        transform scale(1)
    
    50% 
        transform scale(0.17)


@keyframes transitionDropIn
    0% 
        opacity 0
        transform scaleY(0.8)
    
    100% 
        opacity 1
        transform scaleY(1)
        
@keyframes transitionDropInTop
    0% 
        opacity 0
        transform scaleY(0.8) translateY(-100%)
    
    100% 
        opacity 1
        transform scaleY(1) translateY(-100%)

@keyframes transitionDropOut
    0% 
        opacity 1
        transform scaleY(1)
    
    100% 
        opacity 0
        transform scaleY(0.8)
        
 @keyframes transitionDropOutTop
    0% 
        opacity 1
        transform scaleY(1) translateY(-100%)
    
    100% 
        opacity 0
        transform scaleY(0.8) translateY(-100%)

.drop-enter-active
    transform-origin 0 0
    animation transitionDropIn .2s
    animation-timing-function ease-in-out
    &.ocPopTop
        animation transitionDropInTop .2s
        

.drop-leave-active
    transform-origin 0 0
    animation transitionDropOut .2s
    animation-timing-function ease-in-out
    &.ocPopTop
        animation transitionDropOutTop .2s