﻿.w-sliding-right {
    height: 32px;
    line-height: 32px;
    width: 100%;
    border: 1px solid #ddd;
    background-color: #f5f7fa;
    position: relative;
    text-align: center;
    color: #dcdcdc;
}

    .w-sliding-right .w-sliding-inner {
        height: 100%;
        padding-right: 34px;
        position: relative;
    }

    .w-sliding-right .w-sliding-box {
        height: 100%;
        width: 0;
        position: relative;
        background-color: #8abc27;
        z-index: 15;
    }

        .w-sliding-right .w-sliding-box .w-sliding-bar {
            position: absolute;
            width: 34px;
            top: -1px;
            bottom: -1px;
            right: -35px;
            border: 1px solid #ddd;
            background: #fff  no-repeat center;
            cursor: move;
            z-index: 20;
        }

    .w-sliding-right .w-sliding-inner-text {
        position: absolute;
        font-size: 12px;
        background: -webkit-gradient(linear, left top, right top, color-stop(0, #888), color-stop(.4, #888), color-stop(.5, white), color-stop(.6, #888), color-stop(1, #888));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-size-adjust: none;
        -webkit-animation: slidetounlock 3s infinite;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 5;
        color: #aaa;
    }

    .w-sliding-right .w-sliding-text-mask {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
    }

    .w-sliding-right.is-ok {
        border-color: #8abc27;
    }

        .w-sliding-right.is-ok .w-sliding-inner-text {
            z-index: 20;
            color: #fff;
            -webkit-text-fill-color: #fff;
            background: none;
            margin-left: -34px;
        }

        .w-sliding-right.is-ok .w-sliding-text-mask {
            z-index: 25;
        }

        .w-sliding-right.is-ok .w-sliding-bar {
            background-image: ;
            border-color: #8abc27;
        }

@-webkit-keyframes slidetounlock {
    0% {
        background-position: -50px 0;
    }

    100% {
        background-position: 50px 0;
    }
}
#lz-sliding-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 999999999999999999999;
}
