p{
	span {
		cursor: pointer;
		margin-right: 6px;
	}
}
.videoViewerContainer {
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
	min-width: 200px;
	min-height: 200px;
	background-color: #3E3E3E;
	.videoViewer {
		position: relative;
		margin-bottom: 53px;
		video {
			display: block;
			margin-left: 50%;
			transform: translateX(-50%);
		}
		div {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: rgba(62, 62, 62, 0.5);

			span {
				font-size: 80px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -40px;
				margin-top: -40px;
				color: #E2E2E2;
				transition: color 0.8s;

				&:hover {
					color: #4BCEF2;
					cursor: pointer;
				}
			}
		}
	}

	.videoToolbar {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		font-size: 40px;
		color: #BFB9B9;

		.videoToolbar_play_btn {
			float: left;
			padding: 0 10px;

			& > span {
				display: inline-block;
				margin-right: 20px;
			}

			& > span.playBtn:hover {
				color: #45bdde;
				cursor: pointer;
			}

			& > span.playTime {
				font-size: 0.5em;
				vertical-align: middle;

				span {
					color: #E2E2E2;
				}
			}
		}

		.videoToolbar_volume_btn {
			float: right;
			padding: 0 15px;

			span {
				display: inline-block;
				cursor: pointer;
				font-size: 0.8em;

				&.mutedBtn {
					height: 32px;
					width: 32px;
					text-align: left;
					line-height: 32px;
				}

				&.volume_val {
					position: relative;
					width: 100px;
					margin-bottom: 3px;
					height: 6px;
					vertical-align: middle;
					cursor: pointer;

					& > span {
						width: 100%;
						height: 100%;
						position: absolute;
						border-radius: 2px;

						&.volume_val_ball {
							bottom: 0;
							height: 16px;
							width: 16px;
							border-radius: 16px;
							background: #E2E2E2;
							z-index: 3;
							margin-bottom: -5px;

							span {
								position: absolute;
								display: none;
								font-size: 12px;
								top: -25px;
								left: -8px;
								padding: 2px;
								background: #000000;
								color: #FFFFFF;
							}

							&:hover span {
								display: inline-block;
							}
						}

						&.volume_val_active {
							z-index: 2;
							background: #45bdde;
						}

						&.volume_val_notActive {
							z-index: 1;
							background: #989393;
						}
					}
				}
			}
		}

		.videoToolbar_progress {
			position: relative;
			width: 100%;
			background: rgba(112, 109, 109, 0.6);
			transition: height 0.5s;
			cursor: pointer;

			.timeTip {
				position: absolute;
				display: none;
				top: -25px;
				left: -16px;
				padding: 2px;
				background: #000000;
				font-size: 12px;
				color: #FFFFFF;
			}

			.progress_val_ball {
				position: absolute;
				left: 0;
				bottom: 0;
				height: 16px;
				width: 16px;
				border-radius: 16px;
				background: #f7f7f7;
				z-index: 3;
				opacity: 0;
				transition: opacity 0.5s;
				font-size: 12px;

				span {
					position: absolute;
					display: none;
					top: -25px;
					left: -16px;
					padding: 2px;
					background: #000000;
					color: #FFFFFF;
				}

				&:hover span {
					display: inline-block;
				}
			}

			div {
				position: absolute;
				width: 0;
				height: 100%;
				border-radius: 16px;

				&.videoToolbar_play_progress {
					z-index: 2;
					background: #45bdde;

					&:hover ~ .timeTip {
						display: inline-block;
					}
				}

				&.videoToolbar_buffer_progress {
					width: 100%;
					z-index: 1;
					background: rgba(191, 185, 185, 0.6);

					&:hover ~ .timeTip {
						display: inline-block;
					}
				}
			}
		}
	}
}