.canecode_select{
    padding:2px;
    border:2px solid #e3e3e3;
    width:80px;
    height:40px;
    border-radius:100px;
    position: fixed;
    top:40px;
    right: 40px;
    cursor:pointer;
    transition: all 0.2s ease;
    background:#222;
}
.canecode_select span{
    padding:14px;
    border-radius:100px;
    background:#ccc;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left:5px;
    transition: all 0.2s ease;
}
.canecode_select.is_on{
    border:2px solid #409cf8;
    background:-moz-linear-gradient(0deg, var(--grad-color-1), var(--grad-color-2), var(--grad-color-3));
    background:linear-gradient(0deg, var(--grad-color-1), var(--grad-color-2), var(--grad-color-3));
    background: -webkit-linear-gradient(0deg, var(--grad-color-1), var(--grad-color-2), var(--grad-color-3));
}
.canecode_select.is_on span{
    background:#fff;
    left:auto;
    right:5px;
}
.canecode_active{
    display:block;
    visibility: visible;
}
.canecode_hidden{
    display: none;
    visibility: hidden;
}