.vdr {
    box-sizing: border-box;
    border: solid 1px transparent;
    &:hover {
        & > .move-stick {
            visibility: visible;
        }
    }
    & > div{
        height: 100%;
    }
    & > .move-stick {
        visibility: hidden;
        position: absolute;
        bottom: calc(100% + 1px);
        left: calc(50% - 25px);
        width: 50px;
        height: 26px;
        background-color: #ffffff;
        box-shadow: 0px 6px 8px 0px 
            rgba(96, 96, 97, 0.15);
        border-radius: 6px;
        text-align: center;
        z-index: 5;
    }
    &.active:before{
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        outline: 1px dashed #565658;
    }
    &:hover{
        border: dotted 1px #d6d6d6
    }
    .vdr-stick {
        box-sizing: border-box;
        position: absolute;
        border-radius: 2px;
        font-size: 1px;
        background: #ffffff;
        z-index: 2;
        & > i {
            position: relative;
            top: -3px;
            left: 1px;
        }
        &.not-resizable{
            display: none;
        }
    }
    &.inactive>.vdr-stick {
        display: none;
    }
}
.vdr-stick-tl, .vdr-stick-br {
    cursor: nwse-resize;
}
.vdr-stick-tm, .vdr-stick-bm {
    left: 50%;
    cursor: ns-resize;
}
.vdr-stick-tr, .vdr-stick-bl {
    cursor: nesw-resize;
}
.vdr-stick-ml, .vdr-stick-mr {
    top: 50%;
    cursor: ew-resize;
}
.vdr .set-icon{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: #E0E0E0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-bottom-right-radius: 20px;
    display: none;
    i{
        margin-left: 2px;
        color: white;
        font-size: 10px;
    }
    &:hover{
        background: #5873D7;
    }
}
.vdr:hover .set-icon{
    display: inline-block;
}

.set-position{
    padding: 8px;
    span{
        display: inline-block;
        vertical-align: middle;
    }
    input{
        width: 65px;
        height: 32px;
    }
    p{
        display: inline-block;
        width: 80px;
        height: 32px;
        line-height: 32px;
        padding-left: 4px;
        color: #000;
        border: solid 1px #AAAAAA;
        position: relative;
        top: 2px;
    }
    i{
        margin-left: 10px;
        color: #000;
        font-size: 15px;
        &:hover{
            color: #76BCEF;
        }
    }
    select{
        width: 80px;
        height: 32px;
        position: relative;
        top: 2px;
    }
    button{
        padding: 3px 8px;
        margin: 0 35px;
    }
}