#js_player {
	width: 100%;
	height: auto;
	max-width: auto;
	max-height: auto;
}

.roulette-wrapper {
	position: relative;
	margin: 0;
	overflow: hidden;
}
#roulette {
	margin: auto;
	width: 100%;
	transition: all 0.044s linear;
}

#roulette[data-stage="0"] { transform: scale(0.76) }
#roulette[data-stage="1"] { transform: scale(0.85) }
#roulette[data-stage="2"] { transform: scale(0.92) }
#roulette[data-stage="3"] { transform: scale(0.97) }
#roulette[data-stage="4"] { transform: scale(1.00) }

.layout-grid {
	position: relative;
	display: -ms-grid;
	display: grid;
	width: 100%;
	height: 100%;
}
.layout-grid > .layout-child {
	background-size: contain;
	background-repeat: no-repeat;
}

.layout-grid[data-direction="above"] { grid-template-rows: 1fr 6px auto }
.layout-grid[data-direction="above"] > .layout-child { background-position: center bottom }
.layout-grid[data-direction="above"] > .layout-child:nth-child(1) { grid-row: 1 }
.layout-grid[data-direction="above"] > .layout-child:nth-child(2) { grid-row: 3 }

.layout-grid[data-direction="side"] { grid-template-columns: 3fr 6px 7fr }
.layout-grid[data-direction="side"] > .layout-child { background-position: right center }
.layout-grid[data-direction="side"] > .layout-child:nth-child(1) { grid-column: 1 }
.layout-grid[data-direction="side"] > .layout-child:nth-child(2) { grid-column: 3 }

.layout-grid[data-direction="banner"] { grid-template-rows: 1fr }
.layout-grid[data-direction="banner"] > .layout-child:nth-child(1) { grid-row: 1 }
.layout-grid[data-direction="banner"] > .layout-child:nth-child(2) {
	position: absolute;
	display: table;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	z-index: -1;
}

.layout-grid[data-direction="roulette"] { grid-template-rows: auto 6px 1fr 6px auto }
.layout-grid[data-direction="roulette"] > .layout-child { background-position: center }
.layout-grid[data-direction="roulette"] > .layout-child:nth-child(1) { grid-row: 1 }
.layout-grid[data-direction="roulette"] > .layout-child:nth-child(2) { grid-row: 3 }
.layout-grid[data-direction="roulette"] > .layout-child:nth-child(3) { grid-row: 5 }

.layout-grid[data-direction="video"] {
	display: flex;
	min-height: 100%;
	max-height: 100%;
	flex-direction: column;
	justify-content: flex-end;
}
.layout-grid[data-direction="video"] > .layout-child:nth-child(1) {
	display: flex;
	min-height: 0;
	flex: 1 1 auto;
}
.layout-grid[data-direction="video"] > .layout-child:nth-child(2) {
	margin-top: 6px;
	flex: 0 0 auto;
}

#div_disconnect:not(.hidden-force) { display: block !important }


.hidden {
	display: unset !important;
	opacity: 0;
}

.marquee {
	overflow: hidden;
	position: relative;
}
.marquee > div {
	position: absolute;
	/* width: 100%; */
	height: 100%;
	margin: 0;
	text-align: center;

	padding-left: 100%;
	white-space: nowrap;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-animation: scroll-left linear infinite;
	animation: scroll-left linear infinite;
}
@-webkit-keyframes scroll-left {
	0% { -webkit-transform: translateX(0) }
	100% { -webkit-transform: translateX(-100%) }
}
@keyframes scroll-left {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

.widget-message-layer {
	display: flex;
}
.widget-message-layer > div {
	position: relative;
	display: flex;
	margin: auto 20px 20px;
	width: 100%;
	border-radius: 6vw;
	background: #22252f;
	font-size: 3.6vw;
	color: #fff;
	overflow: hidden;
	flex-direction: column;
	z-index: -2;
}
.widget-message-layer > div::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-image: url(/assets/images/logo-blue.png);
	background-position: right 35%;
	background-repeat: no-repeat;
	background-size: 90%;
	opacity: 0.2;
	z-index: -1;
  }
.widget-message-layer > div > header {
	height: 18px;
	background: -moz-linear-gradient(90deg, #29b6f6 0%, #3376e0 50%, #694cd8 100%);
	background: -webkit-linear-gradient(90deg, #29b6f6 0%, #3376e0 50%, #694cd8 100%);
	background: linear-gradient(90deg, #29b6f6 0%, #3376e0 50%, #694cd8 100%);
}
.widget-message-layer > div > article {
	margin: 0 auto;
	padding: 5vh 1.6vw;
}
.widget-message-layer > div > article span:not(.localized) {
	color: #29b6f6;
}
.title-name-effect {
	position: relative;
	-webkit-text-fill-color: transparent;
}
.title-name-effect::after {
	position: absolute;
	content: attr(data-title);
	left: 0; top: 0;
	right: 0; bottom: 0;
	line-height: 110%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
	z-index: 1;
}
.title-name-effect[data-title="금수저"]::after {
	background-image: linear-gradient(to bottom, #fac916, #ffffff);
}
.title-name-effect[data-title="다이아"]::after {
	background-image: linear-gradient(to bottom, #00cde2, #ffffff);
}
.title-name-effect[data-title="투네이션 헬퍼"]::after {
	background-image: linear-gradient(to bottom, #fe1088, #ffffff);
}