.design-view-list{
    .screen {
        width: 220px;
        .screenBody {
            background: #fff;
            -webkit-tap-highlight-color: #ffffff;
            height: 260px;
            overflow: auto;
            padding: 2px 8px;
            .view-expander {
                height: 24px;
                cursor: pointer;
                i {
                    padding: 0 6px 0 0;
                    color: #999;
                }
                .expander-icon:before {
                    content: "\f0d7";
                }
                .expander-button {
                    width: 24px;
                    height: 24px;
                    float: right;
                    .fcloud-view-setting {
                        color: #7f939f;
                        padding: 0;
                        vertical-align: middle;
                        margin-left: 5px;
                    }
                    .fcloud-addCity {
                        color: #7f939f;
                        padding: 0;
                        vertical-align: middle;
                        margin-left: 5px;
                    }
                }
                .expander-button:hover {
                    .fcloud-view-setting {
                        color: #3695ff;
                    }
                    .fcloud-addCity {
                        color: #3695ff;
                    }
                }
                .collapsed {
                    i {
                        padding: 0 6px 0 3px;
                    }
                    .expander-icon:before {
                        content: "\f0da";
                    }
                }
            }
            .screen-items {
                height: 24px;
                line-height: 24px;
                border-radius: 2px;
                position: relative;
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .screen-icon {
                    display: inline-block;
                    vertical-align: middle;
                    margin: 0 6px 0 16px;
                    height: 14px;
                    width: 14px;
                    background-image: url("/assets/common/images/configure/toolbar.png");
                }
                .screen-default-web-icon {
                    background-position: -94px -160px;
                }
                .screen-default-app-icon {
                    background-position: -122px -160px;
                }
                .screen-startup-web-icon {
                    background-position: -80px -160px;
                }
                .screen-startup-app-icon {
                    background-position: -108px -160px;
                }
                .screen-thumbnail-icon {
                    background-position: -136px -160px;
                }
                .screen-name {
                    font-size: 12px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    flex: 1;
                    em {
                        font-style: normal;
                    }
                }
                .title {
                    background-position: -128px -160px;
                }
                .more {
                    float: right;
                    width: 24px;
                    .more-icon {
                        background-position: -60px -166px;
                        margin: 0 0 0 4px;
                    }
                }
                .screen-more {
                    box-shadow: 0 0 5px #666;
                    position: absolute;
                    right: 2px;
                    display: none;
                    z-index: 20;
                    background-color: #fff;
                    width: 140px;
                    nav {
                        a {
                            width: 100%;
                            text-decoration: none;
                            display: inline-block;
                            font-size: 12px;
                            padding: 2px 5px;
                            color: #666;
                        }
                        a:hover {
                            background-color: #dae8ff;
                        }
                    }
                }
            }
            .screen-items.selected {
                .title {
                    background-position: -139px -160px;
                }
            }
            .screen-items.selected:hover {
                background-color: #3695ff;
                color: #fff;
                .more:hover {
                    background-color: #2783ea
                }
            }
            .screen-items:hover {
                background-color: #dae8ff;
                color: #333;
                .more:hover {
                    background-color: #c1d8fe;
                }
            }
            .popview-thumbnail-icon{
                background-position: -80px -174px;
            }
        }
    }
}