.item-box {
    position: relative;
    display: flex;
    align-items: center;
    margin: 10px 15px;
}


.del-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: red;
    width: 60px;
}

.item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 15px;
    box-shadow: 0 0 10px #CCC;
    border-radius: 8px;
    background-color: #FFF;
    width: 100%;
    position: relative;
    transition: margin-left 0.5s, opacity 0.5s;
    opacity: 1;

    &.disabled {
        opacity: 0.6;
    }

    .content {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 14px;
        color: #666;
        position: relative;

        ::ng-deep {

            .img-box {
                margin-right: 15px;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                max-width: 80px;
                width: 50px;
                height: 100%;

                b-device-img {
                    position: relative;
                    height: 100%;

                    img {
                        height: 100%;
                    }
                }

                i.fal {
                    font-size: 30px;
                    color: #959595;
                }

                .avatar {
                    width: 60px;
                    border-radius: 50%;
                }

                .mode {
                    position: absolute;
                    width: 14px !important;
                    height: 14px !important;
                    left: -8px;
                    top: 5px;
                }

            }

            .icon-box {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                color: #389BEE;
                margin-right: 10px;

                i {
                    font-size: 18px !important;

                    &.red {
                        color: #f00000;
                    }
                }
            }

            .text-box {
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 100%;

                .name {
                    font-size: 14px;
                    color: #595959;
                }

                .other {
                    margin-top: 3px;
                    font-size: 12px;
                    color: #959595;
                }

            }

            .title {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .title-box {
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
            }

            .btn-box {
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                padding: 0 20px;
                font-size: 15px;
                color: #389BEE;
            }

            .arrow-box {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                top: 0;
                right: 15px;
                height: 100%;
                width: 10vw;

                img {
                    height: 25%;
                }
            }


            .num {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #959595;
                position: absolute;
                right: 30px;
                top: 0;
                height: 100%;
            }

            .right-box {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #959595;
                position: absolute;
                right: 30px;
                top: 0;
                height: 100%;
                font-size: 15px;
            }

            .right-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #959595;
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                color: #389bee;
                font-size: 13px;
            }


            .selected {
                position: absolute;
                right: 30px;
                color: #389bee;
            }
        }
    }
}

.handle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 60px;
    right: 0;
    font-size: 21px;
    color: #959595;
    cursor: move;
    cursor: -webkit-grabbing;
}

.toggle-box {
    position: absolute;
    right: 30px;
}

.arrow {
    position: absolute;
    right: 15px;
    color: #aaa;
    font-size: 16px;
}