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

.channel-box .channel-lookover {
	background: rgba(0, 0, 0, 0.3);
	font-size: 14px;
	height: 26px;
	position: absolute;
	border-radius: 28px;
	left: 50%;
	top: 30px;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	color: #e3eefd;
	background: #131821;
	padding: 16px 16px 16px 0px;
	opacity: 0.8;
}

.channel-box .channel-lookover:hover {
	opacity: 1 !important;
}

.channel-box .channel-lookover .channel-lookover-label {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ff7600;
	font-size: 14px;
	white-space: nowrap;
	margin: 0 12px;
	cursor: default;
}

.channel-box .channel-lookover .channel-lookover-btn {
	/* flex: 0 0 60px; */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	background: #f3383f;
	border-radius: 14px;
	padding: 2px 8px;
	margin-right: -10px;
	cursor: pointer;
}

.channel-box .coopen {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	width: 101%;
	background: #131821;
	user-select: none;
	pointer-events: none;
}

.channel-box .coopen .robot {
	width: 180px;
	height: 212px;
}
.channel-box .coopen .robot img {
	width: 100%;
	height: 100%;
}

.channel-box .coopen .wave-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	margin-top: 8px;
	color: white;
}

.channel-box .coopen .wave-loading span {
	display: inline-block;
	font-size: 24px;
	font-weight: bold;
	font-family: 'Courier New', Courier, monospace;
	animation: wave-loading 1s ease-in-out infinite;
	animation-delay: calc(0.1s * var(--time));
}

@keyframes wave-loading {
	0% {
		transform: translateY(0px);
	}

	25% {
		transform: translateY(-20px);
	}

	50%,
	100% {
		transform: translateY(0px);
	}
}

.channel-box .channel-cw-refresh {
	font-size: 24px;
	width: 240px;
	height: 80px;
	position: absolute;
	border-radius: 28px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	cursor: pointer;
	color: #fff;
	background-color: #f1c40f;
	text-shadow: -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0),
		-2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0);
	box-shadow: 0px 15px 0px 0px #f39c12;
	transition: all 0.5s;
}

.channel-box .channel-replay {
	background: rgba(0, 0, 0, 0.3);
	font-size: 16px;
	width: 80px;
	height: 26px;
	position: absolute;
	border-radius: 28px;
	left: 50%;
	top: 64px;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	color: #e3eefd;
}

.channel-box .channel-cw-refresh:hover {
	background-color: #fcdc5e;
}

.channel-box .channel-cw-refresh:active {
	transform: translate(0, 4px);
	box-shadow: 0px 1px 0px 0px #f39c12;
}

.channel-box .channel-permission-box {
	position: absolute;
	top: 0;
	right: 0;
	width: 108px;
	height: 100%;
	pointer-events: none;
	z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center;
}

.channel-box .channel-permission-box .channel-permission-tag {
	width: 100%;
	height: auto;
}

.channel-box .channel-permission-box .channel-permission-tag.allow {
	background: url(./allow.png) no-repeat 0 0/108px 48px;
}
.channel-box .channel-permission-box .channel-permission-tag.deny {
	background: url(./deny.png) no-repeat 0 0/108px 48px;
}