
.ewec_ui_palyer_container{
    width:100%;
    height:500px;
    display: flex;
    flex-direction: column;
    &:hover{
        .ewec_ui_palyer_operate_left{
            display: flex;
        }
        .ewec_ui_palyer_operate_right{
            display: flex;
        }
    }
    .ewec_ui_palyer_title{
        height:30px;
        width:100%;
        border:1px solid #ccc;
    }
    .ewec_ui_palyer_content{
        flex:1;
        height:0;
        position: relative;
        >div:first-child{
            padding-top: 0 !important;
            height:100% !important;
        }
        .video-react .video-react-play-progress:before{
            top:-0.35em !important
        }
        .video-react .video-react-slider-vertical .video-react-volume-level:before{
            left:-0.45em !important
        }
    }
    .ewec_ui_palyer_operate_prev{
        height:100%;
        width:30px;
        cursor:pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        &:hover{
            .ewec_ui_palyer_operate_prev_box,.ewec_ui_palyer_operate_next_box{
                background: rgba(255,255,255,0.3);
                border-radius: 50%;
                box-shadow: 2px 2px 2px rgba(255,255,255,0.3),-2px -2px 2px rgba(255,255,255,0.3),-2px 2px 2px rgba(255,255,255,0.3),2px -2px 2px rgba(255,255,255,0.3);
            }
        }
        .ewec_ui_palyer_operate_prev_icon_line{
            height:8px;
            width:2px;
            background: #fff;
        }
        .ewec_ui_palyer_operate_prev_box,.ewec_ui_palyer_operate_next_box{
            width:60%;
            height: 60%;
            display: flex;
            align-items: center;
            justify-content: center;
            .ewec_ui_palyer_operate_prev_icon{
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent;
                border-right: 9px solid #fff;
            }
            .ewec_ui_palyer_operate_next_icon{
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent;
                border-left: 9px solid #fff;
            }
        }
        
    }
    .ewec_ui_palyer_list_container_right{
        position: absolute;        
        top:0;
        right:0;
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .ewec_ui_palyer_list_show{
            width:15px;
            height:50px;
            background: rgba(255,255,255,0.7);
            box-sizing: border-box;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor:pointer;
            .ewec_ui_palyer_list_show_icon{
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-right: 8px solid #fff;
            }
        }
        .ewec_ui_palyer_source_list{
            width:250px;
            height:100%;
            background: rgba(1,1,1,0.6);
            display: flex;
            align-items: center;
            border:1px solid #ccc;
            .ewec_ui_palyer_list_close{
                width:15px;
                height:50px;
                background: rgba(0,0,0,0.6);
                border:1px solid #fff;
                box-sizing: border-box;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor:pointer;
                .ewec_ui_palyer_list_close_icon{
                    border-top: 8px solid transparent;
                    border-bottom: 8px solid transparent;
                    border-left: 8px solid #fff;
                }
            }
        }
        
    }
    .ewec_ui_palyer_source_list{
        .ewec_ui_palyer_source_list_box{
            flex:1;
            height:100%;
            width:0;
            overflow: auto;
            &::-webkit-scrollbar {
                width: 5px !important;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 20px !important;
                -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3) !important;
                background: #f0f0f0 !important;
            }

            &::-webkit-scrollbar-track {
                //-webkit-box-shadow: inset 0 0 5px #f0f0f0 !important;
                border-radius: 20px !important;
                background: transparent !important;
            }
            .ewec_ui_palyer_source_list_item{
                padding:0 10px;
                color:#fff;
                height:30px;
                width: 100%;
                line-height: 30px;
                cursor:pointer;
                overflow: hidden;
                white-space: nowrap;
                text-overflow:ellipsis;
                box-sizing: border-box;
            }
            .ewec_ui_palyer_source_list_item_play{
                padding:0 10px;
                color:#fff;
                height:30px;
                width: 100%;
                line-height: 30px;
                cursor:pointer;
                overflow: hidden;
                white-space: nowrap;
                text-overflow:ellipsis;
                background: #515251;
                box-sizing: border-box;
            }
        }
    }
    .ewec_ui_palyer_list_container_left{
        position: absolute;        
        top:0;
        left:0;
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .ewec_ui_palyer_list_show{
            width:15px;
            height:50px;
            background: rgba(255,255,255,0.7);
            box-sizing: border-box;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor:pointer;
            .ewec_ui_palyer_list_show_icon{
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-left: 8px solid #fff;
            }
        }
        .ewec_ui_palyer_source_list{
            width:250px;
            height:100%;
            background: rgba(1,1,1,0.6);
            display: flex;
            align-items: center;
            border:1px solid #ccc;
            .ewec_ui_palyer_list_close{
                width:15px;
                height:50px;
                background: rgba(0,0,0,0.6);
                border:1px solid #fff;
                box-sizing: border-box;
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor:pointer;
                .ewec_ui_palyer_list_close_icon{
                    border-top: 8px solid transparent;
                    border-bottom: 8px solid transparent;
                    border-right: 8px solid #fff;
                }
            }
            
        }
        
    }
}