@charset "UTF-8";

.video_container{
    position:   relative;
    top:        0px;
    left:       0px;
    background: #000000;
    width:      100%;
    height:     100%;
}

.video{
    position:   absolute;
    width:      100%;
    height:     100%;
}

.video_area{
    position:   absolute;
    overflow:   hidden;
    width:      100%;
    height:     100%;
}

.video_area_img{
	position:   absolute;
	text-align: center;
	top: 0;
	left: 0;
	right: 0;
    bottom: 0;
    width:      100%;
    margin: auto;
    /*height:     100%;
      width:      100%;*/
}

.video_area_img_back_ground{
	width: 100%;
	height: 100%;
	background:  #000000;
	z-index: 100;
	overflow:   hidden;
}

.console_panel{
    position:   absolute;
    width:      100%;
    height:     36px;
}

.console_back_ground{
    position:   absolute;
    background: rgba(105, 105, 105, 0.8);   /* dimgray */
    width:      100%;
    height:     36px;
}

.volume_panel{
    position:   absolute;
    right:      40px;
    width:      36px;
    height:     144px;
}

.volume_back_ground{
    position:   absolute;
    background: rgba(105, 105, 105, 0.8);   /* dimgray */
    width:      36px;
    height:     108px;
}

.button{
    position:   absolute;
    left:           0px;
    cursor:         pointer;
    user-select:            none;
    -moz-user-select:       none;
    -webkit-user-select:    none;
    -ms-user-select:        none;
}

.play_button{
    top:        8px;
    left:       10px;
    width:      20px;
    height:     20px;
}

.scale_button{
    top:        8px;
    right:      10px;
    width:      24px;
    height:     20px;
    margin-left: auto;
}

.volume_button{
    top: 8px;
    right: 46px;
    width:      28px;
    height:     20px;
    margin-left: auto;
}

.time_label{
    position:   absolute;
    color:      #F5F5F5;    /* whitesmoke */
    font-size:  12px;
    right: 80px;
    white-space:    nowrap;
    user-select:            none;
    -moz-user-select:       none;
    -webkit-user-select:    none;
    -ms-user-select:        none;
    margin-left: auto;
    line-height: 36px;
}

.seek_bar_container{
    position:   absolute;
    background: #FFFFFF;    /* white */
    width:      calc(100% - 250px);
    cursor:     pointer;
    left:       45px;
}

.progress_base{
    position:   absolute;
    background: #666666;
    width:      100%;
    height:     8px;
    cursor:     pointer;
}

.progress_bar{
    position:   absolute;
    background: #4169e1;    /* royalblue */
    height:     8px;
    cursor:     pointer;
    -webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4) inset;
}

.thumb_button{
    right:      12px;
    width:      12px;
}

/* sp device style*/

.console_panel_sp{
    position:   absolute;
    width:      100%;
    height:     36px;
}

.console_back_ground_sp{
    position:   absolute;
    background: rgba(105, 105, 105, 0.8);   /* dimgray */
    width:      100%;
    height:     36px;
}

.play_button_sp{
    top:        8px;
    left:       10px;
    width:      20px;
    height:     20px;
}

.scale_button_sp{
    top:        8px;
    right:      10px;
    width:      24px;
    height:     20px;
    margin-left: auto;
}

.volume_button_sp{
    top: 8px;
    right: 46px;
    width:      28px;
    height:     20px;
    margin-left: auto;
}

.time_label_sp{
    position:   absolute;
    color:      #F5F5F5;    /* whitesmoke */
    font-size:  12px;
    right: 46px;
    white-space:    nowrap;
    user-select:            none;
    -moz-user-select:       none;
    -webkit-user-select:    none;
    -ms-user-select:        none;
    margin-left: auto;
    line-height: 36px;
}

.seek_bar_container_sp{
    position:   absolute;
    background: #FFFFFF;    /* white */
    width:      calc(100% - 220px);
    cursor:     pointer;
    left:       45px;
}

.progress_base_sp{
    position:   absolute;
    background: #666666;
    width:      100%;
    height:     12px;
    cursor:     pointer;
}

.progress_bar_sp{
    position:   absolute;
    background: #4169e1;    /* royalblue */
    height:     12px;
    cursor:     pointer;
    -webkit-box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.4) inset;
}

.thumb_button_sp{
    right:      20px;
    width:      20px;
}

.wm_play{
    position:   absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.wm_play_sp{
    position:   absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.indicator_icon{
    position:   absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.volume_bar_container{
    position:   absolute;
    background: #FFFFFF;    /* white */
    cursor:     pointer;
}

.volume_base{
    position:   absolute;
    background: #666666;
    width:      8px;
    cursor:     pointer;
}

.volume_bar{
    position:   absolute;
    background: #4169e1;    /* royalblue */
    width:      8px;
    cursor:     pointer;
    -webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4) inset;
}

.message_area{
    position:   absolute;
    overflow:   hidden;
    background-color:   rgba(0, 0, 0, 0.6);   /* black */
    width:      100%;
    height:     100%;
}

.message_label{
    position:   absolute;
    text-align: center;
    color:      #F5F5F5;    /* whitesmoke */
    font-size:  12;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: -50px;
}

.svv_player{
    color:      #000000;    /* black */
}

.svv_infomation_label{
    position:   absolute;
    background: #FFFFFF;   /* white */
    font-size:  12;
    bottom: 0px;
}

#div_error{
    position:   relative;
    display:    none;
    top:        0px;
    left:       0px;
    background: #000000;
    width:      100%;
    height:     100%;
}

#error_message_area{
    position:   absolute;
    overflow:   hidden;
    background-color:   rgba(0, 0, 0, 0.6);   /* black */
    width:      100%;
    height:     100%;
}

#error_message_label{
    position:   absolute;
    text-align: center;
    color:      #F5F5F5;    /* whitesmoke */
    font-size:  12;
    
    top: 40%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}