.props-sort-wrapper{
    background: #E2EBED;
}
.prop-drag-item{
    display: flex;
    cursor: move;
    cursor: -webkit-grabbing;
    border-left: 1px solid #C4CED2;
    border-right: 1px solid #C4CED2;
}
.prop-drag-item--group{
    border: 1px solid #C4CED2;
    border-bottom: none;
}
.prop-drag-item--group ~ .prop-drag-item{
    /* border-left: 1px solid #C4CED2;
    border-right: 1px solid #C4CED2; */
    
}
.prop-drag-item--group ~ .prop-drag-item:not(.prop-drag-item--group){
    padding-left: 15px;
    padding-right: 15px;
}
.prop-drag-item--group ~ .prop-drag-item:last-of-type{
    border-bottom: 1px solid #C4CED2;
}
.prop-drag-item__inner{
    width: 100%;
    /* border-radius: 3px; */
    border-top: 1px solid #C4CED2;
}
.prop-drag-item--group ~ .prop-drag-item .prop-drag-item__inner{
    border-top: 1px dashed #C4CED2;
}
.prop-drag-item--group .prop-drag-item__inner,
.prop-drag-item--group ~ .prop-drag-item--group .prop-drag-item__inner{
    border-top: none;
}
.prop-drag-item:hover .prop-drag-item__inner{
    background: #F2F5F6;
    margin-bottom: -1px;
    z-index: 1;
    border-bottom: 1px solid #F2F5F6;
    border-top: 1px solid #F2F5F6;
    border-radius: 3px;
}
.prop-drag-item--group:hover .prop-drag-item__inner{
    border-top: none;
}
.props-sort-wrapper .prop-drag-item:first-child:not(.prop-drag-item--group) {
    border-top: 1px solid #C4CED2;
}
.props-sort-wrapper .prop-drag-item:first-child:not(.prop-drag-item--group) .prop-drag-item__inner{
    border-top: none;
}

/* .props-item__group-name{
    width: 100%;
} */

.prop-drag-item--editable .props-item__group-name{
    cursor: auto;
    outline: none;
    background: #FFFFFF;
    border: 1px solid #C1D2DB;
    border-radius: 3px;

}

.prop-drag-item--editable {
    background: #F2F5F6;
    position: relative;
    margin-bottom: -1px;
    z-index: 1;
    border-bottom: 1px solid #F2F5F6;
}

.prop-drag-item--editable .props-item__group-edit{
    display: none;
}
.prop-drag-item--editable .props-item__group-apply{
    display: block;
}

.props-sort-wrapper .drag{
    opacity: 0.4;
    text-align: center;
    position: absolute;
    left: 16px;
    top: 50%;
    margin-top: -11px;
    width: 20px;
    height: 20px;
    cursor: move;
    cursor: -webkit-grabbing;
    background: url(../../images/aspro.max/dragarrow_admin.svg) center center no-repeat;
}
.prop-drag-item:hover .prop-drag-item__inner .drag{
    opacity: 1;
}

.prop-drag-item__inner{
    position: relative;
    padding: 10px 50px;
}
.prop-drag-item--group .prop-drag-item__inner{
    padding: 7px 65px 7px 30px;
}
.props-item__group-name{
    padding: 7px 9px 7px 9px;
    border: 1px solid transparent;
}
.prop-drag-item--group .drag{
    left: 6px;
}

/*group actions*/
.props-item__group-action{
    position: absolute;
    right: 7px;
    width: 42px;
    height: 20px;
    transform: translateY(-50%);
    top: 50%;
    display: flex;
    justify-content: space-between;
}
.props-item__group-delete,
.props-item__group-edit,
.props-item__group-apply{
    width: 50%;
    height: 20px;
    cursor: pointer;
    opacity: 0.4;
}
.props-item__group-delete:hover,
.props-item__group-edit:hover,
.props-item__group-apply:hover{
    opacity: 1;
}
.props-item__group-apply{
    display: none;
}
.props-item__group-delete{
    background: url(../../images/aspro.max/cross_sm.svg) center center no-repeat;
}
.props-item__group-edit{
    background: url(../../images/aspro.max/edit_sm.svg) center center no-repeat;
}
.props-item__group-apply{
    background: url(../../images/aspro.max/tick_sm.svg) center center no-repeat;
}
/*end group actions*/

/*drag in action*/
.prop-drag-item.sortable-fallback {
    opacity: 1!important;
    border: none!important;
}
.prop-drag-item.sortable-fallback .prop-drag-item__inner{
    background: #F2F5F6;
    border: 1px solid #C1D2DB;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}
.prop-drag-item.sortable-fallback .drag{
    opacity:1;
}
/**/

/*top group*/
.props-group-add{
    margin-bottom: 20px;
}
.props-group-add__title{
    margin-bottom: 5px;
}
body .props-group-add__text[type="text"]{
    height: 33px;
    width: 222px;
    border: 1px solid #C1D2DB;
    padding: 2px 10px;
    margin-right: 6px;
    box-sizing: border-box;
}
.props-group-add__button{
    background: linear-gradient(180deg, #24B7E2 0%, #1B95D4 100%);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), inset -1px -1px 0px #008CC3, inset 1px 1px 0px #3BD8EF!important;
    border-radius: 4px;
    border: none;
    color: #fff;
    user-select: none;
    outline: none;
    height: 33px;
    padding: 5px 18px;
    cursor: pointer;
    font-weight: 700;
}
.props-group-add__button:hover{
    background: #24B7E2;
}
/*end top group*/