.canvas{
    height: 350px;
    width: 450px;
    border: #bababa;
    align-items: center;
}
#slider-panel {
    height: 100vh;
    /*display: flex;*/
    z-index: 99999;
    justify-content: center;
    align-items: center;
    opacity: 1;
    position: absolute;
    top: 0;
    right: 1000px;
    width: 450px;
    visibility: hidden;
}

#loading {
    width: 100%;
    height: 100%;
    /*display: flex;*/
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0.4;
    position: absolute;
    top: 0;
    visibility: hidden;
    background-color: #000
}
/* 小拼图 */
.block {
    position: absolute;
    opacity: 1;
    left: 20px;
    top: 20px;
}

#captcha {
    position: relative;
    border-radius: 20px;
    overflow: inherit;
    padding: 20px;
    width: 450px;
    top: 22%;
    left: 38%;
    height: 380px;
    background: #363c4b;
}

/* 滑动条 */

.slider-container {
    position: relative;
    top: 45px;
    left: -21px;
    text-align: center;
    width:490px;
    height: 38px;
    line-height: 40px;
    margin-top: 15px;
    background-color: #363c4b;
    color: #fff;
    border: 1px solid #363c4b;
    border-radius: 30px;
}
.message-container {
    position: absolute;
    z-index: 999999;
    top: 365px;
    left: 20px;
    text-align: center;
    width: 490px;
    height: 38px;
    line-height: 40px;
    margin-top: 15px;
    color: #f57a7a;
    visibility: hidden;
}
.slider-mask {

    position: absolute;
    left: -1px;
    top: -1px;
    height: 40px;
    border: 0px solid #1991fa;
    background-color: #d1e9fe;
    border-radius: 30px;
}

.slider {
    background-size: 40px 40px;
    background: url('sliderImages/icon-pt.png') no-repeat 0 0px;
    position: absolute;
    left: 0px;
    top: 1px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: background 0.2s linear;
    border-radius: 30px;

}

.slider-icon {
    position: absolute;
    left: -4px;
    top: -2px;
    width: 40px;
    height: 40px;
    background-size: 40px 40px;
    background: url('sliderImages/icon-pt.png') no-repeat 0 0px;
}

/* 滑动条活动态 */

.slider-container-active .slider {

    height: 38px;

    top: -1px;

    border: 1px solid #1991fa;

}

.slider-container-active .slider-mask {

    height: 38px;

    border-width: 1px;

}

/* 滑动条成功态 */

.slider-container-success .slider {

    height: 38px;

    top: -1px;

    border: 1px solid #52ccba;

    background-color: #52ccba !important;

}

.slider-container-success .slider-mask {

    height: 38px;

    border: 1px solid #52ccba;

    background-color: #d2f4ef;

}

/* 成功图标 */

.slider-container-success .slider-icon {

    background-position: 0 0 !important;

}
.message{

}
/* 滑动条失败态 */

.slider-container-fail .slider {

    height: 38px;

    top: -1px;

    border: 1px solid #f57a7a;

    background-color: #f88383 !important;
}

.slider-container-fail .slider-mask {

    height: 38px;

    border: 1px solid #f57a7a;

    background-color: #fce1e1;

}
.message{

}
/* 失败图标 */

.slider-container-fail.slider-icon {
    background-position: 0 -83px !important;
}

.slider-container-active.slider-text{
    background-color: #52ccba;
    visibility: hidden;
}
.slider-container-success.slider-text{
    left: 12px;
    background-color: #52ccba;
    visibility: hidden;
}
.slider-container-fail.slider-text {
    left: 12px;
    background-color: #f57a7a;
    visibility: hidden;
}

/*.slider:hover .slider-icon {

    background-position: 0 -13px;

}*/
.refresh-icon {
    position: absolute;
    left: 18px;
    top: 380px;
    width: 50px;
    height: 50px;
    background-size: 36px 36px;
    cursor: pointer;
    background: url('sliderImages/icon-sx.png') no-repeat 0 0px;

}