﻿.v-code-box {
    position: relative;
    user-select: none;
}

.v-code-box .v-code-bar {
    position: relative;
    background: no-repeat 50% 50%;
    text-align: center;
}

.v-code-box .v-code-bar-left {
    position: absolute;
    left: 0;
    top: 0;
    background: no-repeat 50% 50%;
    text-align: center;
}

.v-code-box .v-code-bar-right {
    position: absolute;
    right: 0;
    top: 0;
    background: no-repeat 50% 50%;
    text-align: center;
}

.v-code-box .v-code-bar {
    background-image: url("../img/bar-middle.png");
}

.v-code-box .v-code-bar-left {
    background-image: url("../img/bar-left.png");
}

.v-code-box .v-code-bar-right {
    background-image: url("../img/bar-right.png");
}

.v-code-box .v-code-range {
    position: absolute;
    top: 0;
    left: 0;
    background: no-repeat 50% 50%;
    cursor: move;
    z-index: 300;
}

.v-code-box .v-code-range-cold {
    background-image: url("../img/icon.png");
}

.v-code-box .v-code-range-normal {
    background-image: url("../img/icon-normal.png");
}

.v-code-box .v-code-range-warm {
    background-image: url("../img/icon-warm.png");
}

.v-code-box .v-code-status {
    position: absolute;
    display: none;
    top: 0;
    background: no-repeat 50% 50%;
    border-radius: 50%;
    overflow: hidden;
}

.v-code-box .v-code-status-cold {
    background-image: url("../img/success.png");
}

.v-code-box .v-code-status-normal {
    background-image: url("../img/success-normal.png");
}

.v-code-box .v-code-status-warm {
    background-image: url("../img/success-warm.png");
}

.v-code-box .v-code-fail {
    background-image: url("../img/fail.png");
}

.v-code-box .v-code-text {
    color: white;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 100;
}

.v-code-box .v-code-pic {
    position: absolute;
    border-radius: 10px;
    border: 1px solid #e4e4e4;
    padding: 10px;
    z-index: 19920615;
    background: #ffffff no-repeat 50% 50%;
    display: none;
    box-sizing: content-box;
}

.v-code-box .v-code-shade {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 19920616;
}

.v-code-box .v-code-hide {
    position: absolute;
    display: none;
    z-index: 19920617;
}

.v-code-box .v-code-show {
    position: absolute;
    z-index: 19920618;
    display: none;
}