.pds #page{
    user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    border:1px solid #CCC;
    min-height:400px;
    border-radius:.25rem;
}

.pds #data{
    border:1px solid #CCC;
    border-radius:.25rem;
}


.pds .item{
    border:1px solid #CCC;
    margin-bottom:10px;
    position: relative;
}

.pds .item.selected{
    box-shadow:  0 0 6pt 1pt var(--bs-success);
    border-color: var(--bs-success)
}

.pds .item.drop{
    padding:10px;
    cursor:move;
    box-sizing: border-box;
    border-radius:.25rem;
}
.pds .item.drop .icon{
    margin-right:0.5rem;
}

.pds .item .item-nav{
    padding:10px;
    background: rgba(255,255,255,0.8);
    z-index: 10;
    position: absolute;
}

.pds .item .item-nav a{
    cursor: pointer;
    margin:0 5px;
}

.pds #page .item{
    position: absolute;
}


.pds .item .content{
    position:absolute;
    z-index:0;
    width:100%;
    height:100%;
    left:0;
    top:0;
}

.pds #page.dropzone.allow{
    background:rgb(243, 243, 243);
}

.pds #tips{
    font-style:italic;
    text-align: right;
    line-height:1.9rem;
    padding-right:0.5rem;
}

.modal-body{
    padding:0 !important;
}

/*----------------------------------------------------*/
/* content styles */
/*----------------------------------------------------*/

.pds .item .content img{
    object-fit: cover;
    width:100%;
    height:100%;
}

.pds .item .content .icon-play{
    background:rgba(255,255,255,0.5);
    padding:12px 20px;
    border-radius:5px;
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}