/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, * {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	/*	vertical-align: baseline;*/
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

body {
	margin: 0px;
	background: #000;
	text-align: center;
	font-size: 11px;
	height: 100%;
}

img {
	border: 0px
}

.mainbg {
	width: 1280px;
	margin: auto;
}

.both {
	clear: both;
}

#mainboi {
	width: 1280px;
	margin: 0 auto 0 auto;
	padding: 0px;
	height: auto;
	text-align: center;
	background: #000 url(../../../template/main/bg.jpg) no-repeat center top;
}
/*HEAD MENU*/
#topmenu {
	height: 150px;
	width: 1280px;
	padding: 0px;
	text-align: center;
}

#menu {
	height: 150px;
	float: left;
	margin: 0 0 0 150px;
}

	#menu li {
		display: inline;
		height: 150px;
		float: left;
		list-style: none;
	}

		#menu li a {
			text-indent: -9999px;
			float: left;
		}

		#menu li.news a {
			height: 106px;
			width: 97px;
			background: url(../../../template/main/mainmenu_01.gif) no-repeat;
			float: left;
		}

		#menu li.infogame a {
			height: 106px;
			width: 118px;
			background: url(../../../template/main/mainmenu_02.gif) no-repeat;
			float: left;
		}

		#menu li.shop a {
			height: 106px;
			width: 130px;
			background: url(../../../template/main/mainmenu_03.gif) no-repeat;
			float: left;
		}

		#menu li.boi a {
			height: 150px;
			width: 255px;
			background: url(../../../template/main/logo_boi.gif) no-repeat;
			float: left;
		}

		#menu li.download a {
			height: 106px;
			width: 118px;
			background: url(../../../template/main/mainmenu_05.html) no-repeat;
			float: left;
		}

		#menu li.community a {
			height: 106px;
			width: 131px;
			background: url(../../../template/main/mainmenu_06.gif) no-repeat;
			float: left;
		}

		#menu li.support a {
			height: 106px;
			width: 105px;
			background: url(../../../template/main/mainmenu_07.gif) no-repeat;
			float: left;
		}


#topmenu-new {
	float: left;
}

#topmenu-infogame {
	float: left;
}

#topmenu-shop {
	float: left;
}

#topmenu-logo {
	float: left;
}

#topmenu-download {
	float: left;
}

#topmenu-commu {
	float: left;
}

#topmenu-sup {
	float: left;
}


/*box8slotnew*/
/*boxnew8slot background: url(../../images/br_evenbn.gif) no-repeat center  top;*/
#boxnew8slot {
	height: 92px;
	width: 1280px;
	padding: 0px;
	margin: 0px;
}

	#boxnew8slot a {
		background: url(../../../template/main/spacer.gif);
		height: 92px;
		width: 1280px;
		float: left;
	}

#boxwarleft {
	margin: 0 0 0 40px;
	width: 320px;
	height: 160px;
}

	#boxwarleft a {
		background: url(../../../template/main/spacer.gif);
		height: 160px;
		width: 320px;
		float: left;
	}

#box8 {
	width: 415px;
	height: 179px;
	float: left;
	margin: 15px 0 0 60px;
}

	#box8 a {
		background: url(../../../template/main/spacer.gif);
		width: 415px;
		height: 179px;
		float: left;
	}

#box8num {
	float: left;
}

.box8num1 {
	width: 25px;
	height: 22px;
	text-align: center;
}

#boxwar {
	margin: 0 0 0 40px;
	width: 240px;
	height: 160px;
}

	#boxwar a {
		background: url(../../../template/main/spacer.gif);
		height: 160px;
		width: 240px;
		float: left;
	}

#boxpatch {
	height: 40px;
	width: 240px;
	background: #363636;
	border: 2px dashed #666;
	margin: 0 0 0 40px;
	text-align: left;
}

	#boxpatch ul li {
		margin: 4px 0 0 10px;
	}

/*boxcontent*/
#boxcontent {
	width: 870px;
	height: auto;
	margin: 5px 0;
	float: left;
}

#boxcontent-left {
	width: 261px;
	float: left;
	margin: 90px 0 0 140px;
}

#boxmenuhero {
	width: 260px;
	height: 180px;
	margin: 0;
	text-align: center;
}

#boxmenuherobt {
	padding: 15px 0 0 0;
	height: 193px;
}

#btnhero {
	height: 48px;
}

#btnhero1 {
	height: 90px;
}

#btnhero2 {
	height: 75px;
}


#boxquickl {
	width: 300px;
	height: auto;
	margin: 0 0 0 0;
}

#boxquickl-head {
	height: 48px;
	width: 300px;
	background: url(../../../template/main/quicklink01.gif) no-repeat;
	margin: 10px 0 0 0;
}

#boxquickl-content {
	width: 300px;
	display: block;
}

#boxquickl-content2 {
	width: 300px;
	background: url(../../../template/main/login_bg_extend.gif) repeat-y;
	display: block;
}

#boxquickl-contentmenu {
	width: 225px;
	height: auto;
	margin: auto;
	display: inline-block;
}

	#boxquickl-contentmenu li {
		display: inline;
		list-style: none;
		float: left;
	}

#boxquickl-content li a {
	text-indent: -9999px;
	float: left
}

#boxquickl-content li.guildBook a {
	float: left;
	height: 93px;
	width: 214px;
	background: url(../../../template/main/load_ebook_bt.jpg) no-repeat;
}

#boxquickl-content li.refill a {
	float: left;
	height: 48px;
	width: 225px;
	background: url(../../../template/main/bt_refillzen.jpg) no-repeat;
}

	#boxquickl-content li.refill a:hover {
		float: left;
		height: 48px;
		width: 225px;
		background: url(../../../template/main/bt_refillzen2.jpg) no-repeat;
	}

#boxquickl-content li.payment a {
	float: left;
	height: 48px;
	width: 225px;
	background: url(../../../template/main/bt_payment.jpg) no-repeat;
}

	#boxquickl-content li.payment a:hover {
		float: left;
		height: 48px;
		width: 225px;
		background: url(../../../template/main/bt_payment2.jpg) no-repeat;
	}

#boxquickl-content li.getitem a {
	float: left;
	height: 48px;
	width: 225px;
	background: url(../../../template/main/bt_getcode.jpg) no-repeat;
}

	#boxquickl-content li.getitem a:hover {
		float: left;
		height: 48px;
		width: 225px;
		background: url(../../../template/main/bt_getcode2.jpg) no-repeat;
	}

#boxquickl-content li.bug a {
	float: left;
	height: 48px;
	width: 225px;
	background: url(../../../template/main/bt_noticebug.jpg) no-repeat;
}

	#boxquickl-content li.bug a:hover {
		float: left;
		height: 48px;
		width: 225px;
		background: url(../../../template/main/bt_noticebug2.jpg) no-repeat;
	}


#boxquickgameinfo-head {
	height: 47px;
	width: 261px;
	background: url(../../../template/main/q_guide.jpg) no-repeat;
}

#boxquickl-content2 li.gameshows {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_recominfo.jpg) no-repeat;
}

#boxquickl-content2 li.gameinfo {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_basicinfo.jpg) no-repeat;
}

#boxquickl-content2 li.gamexpabitity a {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_xpability.jpg) no-repeat;
}

#boxquickl-content2 li.gamespec a {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_spec.jpg) no-repeat;
}

#boxquickl-content2 li.gameatoroute a {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_autor.jpg) no-repeat;
}

#boxquickl-content2 li.gamestory a {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_story.jpg) no-repeat;
}

#boxquickl-content2 li.gameshow a {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_accomgame.jpg) no-repeat;
}

#boxquickl-content2 li.gameclass a {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_class.jpg) no-repeat;
}

#boxquickl-content2 li.gamepet a {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/listmenu_pet.jpg) no-repeat;
}

#boxquickl-content2 li.gamemount a {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_mount.jpg) no-repeat;
}

#boxquickl-content2 li.gamesoulgear a {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_soulg.jpg) no-repeat;
}

#boxquickl-content2 li.gameinfohigh {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_highlvinfo.jpg) no-repeat;
}

#boxquickl-content2 li.gameguilds a {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_b_guild.jpg) no-repeat;
}

#boxquickl-content2 li.gameshop a {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_purch.jpg) no-repeat;
}

#boxquickl-content2 li.gamenuser a {
	float: left;
	height: 28px;
	width: 225px;
	background: url(../../../template/main/li_newuser.jpg) no-repeat;
}

#boxquickl-bottom {
	width: 260px;
	height: 42px;
	background: url(../../../template/main/login_bg_bottom.gif) no-repeat;
}

#boxquickl-bottom1 {
	width: 261px;
	height: 42px;
	background: url(../../../template/main/quicklink02.gif) no-repeat;
}



/*boxcenter*/
#boxcenter {
	width: 722px;
	float: left;
	margin: 0 0 0 5px;
}

#footer {
	height: 116px;
	width: 1280px;
	text-align: center;
	background: #060606 url(../../../template/main/footer_boi.jpg) no-repeat center;
	margin: 20px 0 0 0px;
	display: block;
}

#boxstat {
	display: inline-block;
	margin: 90px 0 0 0;
}

#footer img {
	margin: 0 0 0 48px;
}


.clearfix {
	clear: both;
}

.boxnews {
	border-bottom: 1px solid #2b2b2b;
	font-family: Tahoma, "MS Sans Serif", "Microsoft Sans Serif";
	/*font-size: 12px;*/
	color: #FFFFFF;
	text-decoration: none;
	/*text-align: left;*/
	vertical-align: middle;
	padding: 3px 0 5px 10px;
}

	.boxnews a:link {
		color: #FFFFFF;
		text-decoration: none;
	}

	.boxnews a:hover {
		color: #C6B28C;
	}

.tx_bblue a:link {
	text-decoration: none;
	color: #3C9DE6;
}

.tx_bblue a:hover {
	color: #33FFFF;
	text-decoration: none;
}

.tx_nwh a:link {
	color: #CCCCCC;
	text-decoration: none;
}

.tx_nwh a:hover {
	color: #FFFFFF;
	text-decoration: none;
}

a:visited {
	color: #3399CC;
	text-decoration: none;
}


.tx_bblue {
	font-family: Tahoma, "MS Sans Serif", "Microsoft Sans Serif";
	font-size: 14px;
	color: #3C9DE6;
	text-decoration: none;
	font-weight: bold;
}

.img_b2 {
	margin: 5px;
	border: 2px solid #000000;
}


.tx_nwh {
	font-family: Tahoma, "MS Sans Serif", "Microsoft Sans Serif";
	font-size: 13px;
	font-weight: normal;
	color: #CCCCCC;
	text-decoration: none;
}

	.tx_nwh a:link {
		color: #CCCCCC;
		text-decoration: none;
		font-size: 13px;
	}

	.tx_nwh a:hover {
		color: #FFFFFF;
		text-decoration: none;
		font-size: 13px;
	}

.videohome {
	height: 168px;
	width: 250px;
	margin: 10px;
}

#listpic ul li {
	list-style-type: none;
	display: inline-block;
	padding: 5px;
	margin: 10px 10px 10px 10px;
	border: 1px solid #C6B28C;
	float: left;
}

/*10-1-2554*/
#boxserverlist {
	margin: 10px 0 0 0;
	width: 262px;
	height: 150px;
	background: url(../../../template/main/bg_server.jpg) no-repeat;
	float: left;
}

	#boxserverlist ul li {
		list-style-type: none;
		height: 30px;
		width: 100px;
		margin: 0 0 0 120px;
	}

#boxbt {
	margin: 5px 0 5px 0;
}

#borderpatch {
	border: 1px solid #333;
	padding: 5px;
	margin: 10px 0 0 0;
}

#newspadding p {
	padding: 0 0 15px 0;
}

.tbldata {
	background: #000000;
	width: 650px;
	padding: 5px;
}

	.tbldata th {
		background: #0099FF;
		color: #FFFF00;
		font-weight: bold;
		border-bottom: 1px solid #75C8FF;
		font-size: 12px;
		padding: 3px;
	}

	.tbldata td {
		color: #FFFFFF;
		font-weight: bold;
		border-bottom: 1px solid #75C8FF;
		font-size: 12px;
		padding: 5px;
	}

:host {
	all: initial;
	pointer-events: inherit;
	--ruffle-blue: #37528c;
	--ruffle-orange: #ffad33;
	display: inline-block;
	font-family: Arial,sans-serif;
	height: 400px;
	letter-spacing: .4px;
	position: relative;
	touch-action: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	width: 550px;
	-webkit-tap-highlight-color: transparent
}

:host(:-webkit-full-screen) {
	display: block;
	height: 100% !important;
	width: 100% !important
}

.hidden {
	display: none !important
}

#container, #message-overlay, #panic, #play-button, #splash-screen, #unmute-overlay, #unmute-overlay .background {
	inset: 0;
	position: absolute
}

#container {
	outline: none;
	overflow: hidden
}

	#container canvas {
		height: 100%;
		width: 100%
	}

#play-button, #unmute-overlay {
	cursor: pointer;
	display: none
}

	#unmute-overlay .background {
		background: #000;
		opacity: .7
	}

	#play-button .icon, #unmute-overlay .icon {
		height: 50%;
		left: 50%;
		max-height: 384px;
		max-width: 384px;
		opacity: .8;
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 50%
	}

	#play-button:hover .icon, #unmute-overlay:hover .icon {
		opacity: 1
	}

#unmute-overlay-svg {
	scale: .8
}

#panic {
	background: linear-gradient(180deg,#fd3a40,#fda138);
	color: #fff;
	display: flex;
	flex-flow: column;
	font-size: 20px;
	justify-content: space-around;
	overflow: auto;
	text-align: center
}

	#panic a {
		color: var(--ruffle-blue);
		font-weight: 700
	}

#panic-title {
	font-size: xxx-large;
	font-weight: 700
}

#panic-body.details {
	flex: 0.9;
	margin: 0 10px
}

#panic-body textarea {
	height: 100%;
	resize: none;
	width: 100%
}

#panic ul {
	display: flex;
	justify-content: space-evenly;
	list-style-type: none;
	padding: 0
}

#message-overlay {
	align-items: center;
	background: var(--ruffle-blue);
	color: var(--ruffle-orange);
	display: flex;
	justify-content: center;
	opacity: 1;
	overflow: auto;
	position: absolute;
	z-index: 2
}

	#message-overlay .message {
		font-size: 20px;
		max-height: 100%;
		max-width: 100%;
		padding: 5%;
		text-align: center
	}

	#message-overlay p {
		margin: .5em 0
	}

	#message-overlay .message div {
		-moz-column-gap: 1em;
		column-gap: 1em;
		display: flex;
		flex-wrap: wrap;
		justify-content: center
	}

	#message-overlay a, #message-overlay button {
		background: var(--ruffle-blue);
		border: 2px solid var(--ruffle-orange);
		border-radius: .6em;
		color: var(--ruffle-orange);
		cursor: pointer;
		font-size: 1.25em;
		font-weight: 700;
		margin: 2% 0;
		padding: 10px;
		text-decoration: none
	}

		#message-overlay a:hover, #message-overlay button:hover {
			background: #ffffff4c
		}

#continue-btn {
	background: var(--ruffle-blue);
	border: 2px solid var(--ruffle-orange);
	border-radius: 20px;
	color: var(--ruffle-orange);
	cursor: pointer;
	font-size: 20px;
	font-weight: 700;
	padding: 10px
}

	#continue-btn:hover {
		background: #ffffff4c
	}

#context-menu-overlay, .modal {
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: 1
}

#context-menu {
	background-color: var(--modal-background);
	border: 1px solid gray;
	box-shadow: 0 5px 10px -5px #000;
	color: rgb(var(--modal-foreground-rgb));
	font-size: 14px;
	list-style: none;
	margin: 0;
	padding: 3px 0;
	position: absolute;
	text-align: start;
	white-space: nowrap
}

	#context-menu .menu-item {
		color: rgb(var(--modal-foreground-rgb));
		padding: 5px 10px
	}

		#context-menu .menu-item.disabled {
			color: rgb(var(--modal-foreground-rgb),.5);
			cursor: default
		}

		#context-menu .menu-item:not(.disabled):hover {
			background-color: rgb(var(--modal-foreground-rgb),.15)
		}

	#context-menu .menu-separator hr {
		border: none;
		border-bottom: 1px solid rgb(var(--modal-foreground-rgb),.2);
		margin: 3px
	}

#splash-screen {
	align-items: center;
	background: var( --splash-screen-background,var(--preloader-background,var(--ruffle-blue)) );
	display: flex;
	flex-direction: column;
	justify-content: center
}

.loadbar {
	background: #253559;
	height: 20%;
	max-height: 10px;
	max-width: 316px;
	width: 100%
}

.loadbar-inner {
	background: var(--ruffle-orange);
	height: 100%;
	max-width: 100%;
	width: 0
}

.logo {
	display: var(--logo-display,block);
	max-height: 150px;
	max-width: 380px
}

.loading-animation {
	aspect-ratio: 1;
	margin-bottom: 2%;
	max-height: 28px;
	max-width: 28px;
	width: 10%
}

.spinner {
	stroke-dasharray: 180;
	stroke-dashoffset: 135;
	stroke: var(--ruffle-orange);
	animation: a 1.5s linear infinite;
	transform-origin: 50% 50%
}

@keyframes a {
	to {
		transform: rotate(1turn)
	}
}

#virtual-keyboard {
	height: 1px;
	opacity: 0;
	position: absolute;
	top: -100px;
	width: 1px
}

.modal {
	background-color: #0008
}

.modal-area {
	background-color: var(--modal-background);
	border-radius: 12px;
	box-shadow: 0 2px 6px 0 #0008;
	color: rgb(var(--modal-foreground-rgb));
	left: 50%;
	padding: 8px 12px;
	position: relative;
	transform: translateX(-50%);
	width: -moz-fit-content;
	width: fit-content
}

#modal-area {
	height: 300px;
	width: 450px
}

.close-modal {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 -960 960 960'%3E%3Cpath d='M480-392 300-212q-18 18-44 18t-44-18-18-44 18-44l180-180-180-180q-18-18-18-44t18-44 44-18 44 18l180 180 180-180q18-18 44-18t44 18 18 44-18 44L568-480l180 180q18 18 18 44t-18 44-44 18-44-18z'/%3E%3C/svg%3E");
	cursor: pointer;
	filter: var(--modal-foreground-filter);
	height: 16px;
	width: 16px
}

.modal-button {
	background-color: rgb(var(--modal-foreground-rgb),.2);
	border-radius: 6px;
	color: rgb(var(--modal-foreground-rgb));
	cursor: pointer;
	display: inline-block;
	padding: 4px 8px;
	text-decoration: none
}

:not(#volume-controls) > .close-modal {
	position: absolute;
	right: 16px;
	top: 14px
}

.general-save-options {
	border-bottom: 2px solid rgb(var(--modal-foreground-rgb),.3);
	padding-bottom: 8px;
	text-align: center
}

#local-saves {
	border-collapse: collapse;
	color: inherit;
	display: block;
	height: calc(100% - 45px);
	min-height: 30px;
	overflow-y: auto
}

	#local-saves td {
		border-bottom: 2px solid rgb(var(--modal-foreground-rgb),.15);
		height: 30px
	}

		#local-saves td:first-child {
			width: 100%;
			word-break: break-all
		}

.save-option {
	cursor: pointer;
	display: inline-block;
	filter: var(--modal-foreground-filter);
	height: 24px;
	opacity: .4;
	vertical-align: middle;
	width: 24px
}

#local-saves > tr:hover .save-option {
	opacity: 1
}

#download-save {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -960 960 960'%3E%3Cpath d='M480-337q-8 0-15-2.5t-13-8.5L308-492q-12-12-11.5-28t11.5-28q12-12 28.5-12.5T365-549l75 75v-286q0-17 11.5-28.5T480-800t28.5 11.5T520-760v286l75-75q12-12 28.5-11.5T652-548q11 12 11.5 28T652-492L508-348q-6 6-13 8.5t-15 2.5M240-160q-33 0-56.5-23.5T160-240v-80q0-17 11.5-28.5T200-360t28.5 11.5T240-320v80h480v-80q0-17 11.5-28.5T760-360t28.5 11.5T800-320v80q0 33-23.5 56.5T720-160z'/%3E%3C/svg%3E")
}

#replace-save {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -1080 960 1200'%3E%3Cpath d='M440-367v127q0 17 11.5 28.5T480-200t28.5-11.5T520-240v-127l36 36q6 6 13.5 9t15 2.5T599-323t13-9q11-12 11.5-28T612-388L508-492q-6-6-13-8.5t-15-2.5-15 2.5-13 8.5L348-388q-12 12-11.5 28t12.5 28q12 11 28 11.5t28-11.5zM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v447q0 33-23.5 56.5T720-80zm280-560q0 17 11.5 28.5T560-600h160L520-800z'/%3E%3C/svg%3E")
}

#delete-save {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -1020 960 1080'%3E%3Cpath d='M280-120q-33 0-56.5-23.5T200-200v-520q-17 0-28.5-11.5T160-760t11.5-28.5T200-800h160q0-17 11.5-28.5T400-840h160q17 0 28.5 11.5T600-800h160q17 0 28.5 11.5T800-760t-11.5 28.5T760-720v520q0 33-23.5 56.5T680-120zm120-160q17 0 28.5-11.5T440-320v-280q0-17-11.5-28.5T400-640t-28.5 11.5T360-600v280q0 17 11.5 28.5T400-280m160 0q17 0 28.5-11.5T600-320v-280q0-17-11.5-28.5T560-640t-28.5 11.5T520-600v280q0 17 11.5 28.5T560-280'/%3E%3C/svg%3E")
}

.replace-save {
	display: none
}

#video-modal .modal-area {
	box-sizing: border-box;
	height: 95%;
	width: 95%
}

#video-holder {
	box-sizing: border-box;
	height: 100%;
	padding: 36px 4px 6px
}

	#video-holder video {
		background-color: #000;
		height: 100%;
		width: 100%
	}

#volume-controls {
	align-items: center;
	display: flex;
	gap: 6px
}

#mute-checkbox {
	display: none
}

label[for=mute-checkbox] {
	cursor: pointer;
	filter: var(--modal-foreground-filter);
	height: 24px;
	line-height: 0;
	width: 24px
}

#volume-mute {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -960 960 960'%3E%3Cpath d='m719.13-419.35-71.67 71.68Q634.78-335 617.13-335t-30.33-12.67q-12.67-12.68-12.67-30.33t12.67-30.33L658.48-480l-71.68-71.67q-12.67-12.68-12.67-30.33t12.67-30.33Q599.48-625 617.13-625t30.33 12.67l71.67 71.68 71.67-71.68Q803.48-625 821.13-625t30.33 12.67q12.67 12.68 12.67 30.33t-12.67 30.33L779.78-480l71.68 71.67q12.67 12.68 12.67 30.33t-12.67 30.33Q838.78-335 821.13-335t-30.33-12.67zM278-357.87H161.22q-17.66 0-30.33-12.67-12.67-12.68-12.67-30.33v-158.26q0-17.65 12.67-30.33 12.67-12.67 30.33-12.67H278l130.15-129.91q20.63-20.63 46.98-9.45 26.35 11.19 26.35 39.77v443.44q0 28.58-26.35 39.77-26.35 11.18-46.98-9.45z'/%3E%3C/svg%3E")
}

#volume-min {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='161 -960 960 960'%3E%3Cpath d='M438.65-357.87H321.87q-17.65 0-30.33-12.67-12.67-12.68-12.67-30.33v-158.26q0-17.65 12.67-30.33 12.68-12.67 30.33-12.67h116.78L568.8-732.04q20.63-20.63 46.98-9.45 26.35 11.19 26.35 39.77v443.44q0 28.58-26.35 39.77-26.35 11.18-46.98-9.45z'/%3E%3C/svg%3E")
}

#volume-mid {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='80 -960 960 960'%3E%3Cpath d='M357.98-357.87H241.2q-17.66 0-30.33-12.67-12.67-12.68-12.67-30.33v-158.26q0-17.65 12.67-30.33 12.67-12.67 30.33-12.67h116.78L487.65-731.8q20.63-20.64 47.1-9.57t26.47 39.65v443.44q0 28.58-26.47 39.65t-47.1-9.57zM741.8-480q0 42.48-20.47 80.09-20.48 37.61-54.94 60.82-10.22 5.98-20.19.25-9.98-5.73-9.98-17.44v-248.44q0-11.71 9.98-17.32 9.97-5.61 20.19.37 34.46 23.71 54.94 61.45Q741.8-522.48 741.8-480'/%3E%3C/svg%3E")
}

#volume-max {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='9 -960 960 960'%3E%3Cpath d='M754.22-480.5q0-78.52-41.88-143.9t-111.91-98.62q-14.47-6.74-20.47-20.96t-.53-28.93q5.74-15.72 20.34-22.46t29.58 0q92.48 42.46 147.97 127.05 55.48 84.6 55.48 187.82t-55.48 187.82q-55.49 84.59-147.97 127.05-14.98 6.74-29.58 0t-20.34-22.46q-5.47-14.71.53-28.93t20.47-20.96q70.03-33.24 111.91-98.62t41.88-143.9M286.98-357.87H170.2q-17.66 0-30.33-12.67-12.67-12.68-12.67-30.33v-158.26q0-17.65 12.67-30.33 12.67-12.67 30.33-12.67h116.78L416.65-731.8q20.63-20.64 47.1-9.57t26.47 39.65v443.44q0 28.58-26.47 39.65t-47.1-9.57zM670.8-480q0 42.48-20.47 80.09-20.48 37.61-54.94 60.82-10.22 5.98-20.19.25-9.98-5.73-9.98-17.44v-248.44q0-11.71 9.98-17.32 9.97-5.61 20.19.37 34.46 23.71 54.94 61.45Q670.8-522.48 670.8-480'/%3E%3C/svg%3E")
}

#volume-slider-text {
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	width: 4.8ch
}

#hardware-acceleration-modal .modal-area {
	box-sizing: border-box;
	padding: 16px 48px;
	text-align: center;
	width: 95%
}

#acceleration-text {
	display: block;
	margin-bottom: 8px
}

#clipboard-modal h2 {
	margin-right: 36px;
	margin-top: 4px
}

#clipboard-modal p:last-child {
	margin-bottom: 2px
}

@media (prefers-color-scheme:light) {
	:host {
		--modal-background: #fafafa;
		--modal-foreground-rgb: 0,0,0;
		--modal-foreground-filter: none
	}
}

@media (prefers-color-scheme:dark) {
	:host {
		--modal-background: #282828;
		--modal-foreground-rgb: 221,221,221;
		--modal-foreground-filter: invert(90%)
	}
}