html{
	--brhig: 56px;
	--althig: 0px;
	--hig: calc(var(--vh, 1vh) * 100 - var(--brhig));
	--svgcorange: invert(62%) sepia(17%) saturate(5036%) hue-rotate(360deg) brightness(102%) contrast(105%);
	--selc: invert(41%) sepia(98%) saturate(3101%) hue-rotate(339deg) brightness(95%) contrast(101%);
	--svgcblue: invert(62%) sepia(69%) saturate(4722%) hue-rotate(167deg) brightness(97%) contrast(103%);

    --bs-border-width: 1px;
    --bs-border-radius: .375rem;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[light]{
    --bkc1: #ffffff;
    --bkc2: #f5f5f5;
    --bkc3: #ebebeb;
    --bkc4: #e0e0e0;
	--ftc: #000000;
	--ftc2: #555555;
	--afc: #2196f3;
	--svgc: invert(0%);
	--svgc2: invert(33%);
	--svgc3: invert(62%);
	--line: #00000033;
	--green: #4caf50;
	--green2: #4caf501a;
	--green3: #4caf5033;
	--svgcgreen: invert(67%) sepia(17%) saturate(1346%) hue-rotate(73deg) brightness(83%) contrast(98%);
	--red: #c80000;
	--red2: #c800001a;
	--red3: #ff756b33;
	--svgcred: invert(8%) sepia(100%) saturate(6597%) hue-rotate(22deg) brightness(104%) contrast(124%);
	--blue: #2196f3;
	--blue2: #2196f326;
	--blue3: #2196f34d;
	--yellow: #ff9800;
	--yellow2: #ff98001a;
	--yellow3: #ff980033;
	--pink: #ab4fbb;
	--pink2: #ab4fbb1a;
	--pink3: #ab4fbb33;
    --hovc: #0000001a;
    --hovc2: #00000033;
    --actc: #00000033;
    --actc2: #0000004d;
}
html[dark]{
    color-scheme: dark;
    --bkc1: #35363b;
    --bkc2: #2e2f33;
    --bkc3: #27272b;
    --bkc4: #1f2023;
	--ftc: #ffffff;
	--ftc2: #9e9e9e;
	--afc: #03a9f4;
	--svgc: invert(100%);
	--svgc2: invert(62%);
	--svgc3: invert(62%);
	--line: #ffffff33;
	--green: #4eb453;
	--green2: #4eb45326;
	--green3: #4eb4534d;
	--svgcgreen: invert(61%) sepia(11%) saturate(2109%) hue-rotate(73deg) brightness(97%) contrast(90%);
	--red: #ff756b;
	--red2: #ff756b26;
	--red3: #ff756b4d;
	--svgcred: invert(53%) sepia(76%) saturate(1211%) hue-rotate(320deg) brightness(109%) contrast(115%);
	--blue: #03a9f4;
	--blue2: #03a9f426;
	--blue3: #03a9f44d;
	--yellow: #ffc107;
	--yellow2: #ffc10726;
	--yellow3: #ffc1074d;
	--pink: #e96bff;
	--pink2: #e96bff26;
	--pink3: #e96bff4d;
    --hovc: #ffffff1a;
    --hovc2: #ffffff33;
    --actc: #ffffff33;
    --actc2: #ffffff4d;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[light][profile]{
	--profile: 0;
	--profile2: 0%;
	--bkc1: hsl(var(--profile), var(--profile2), 94%);
	--bkc2: hsl(var(--profile), var(--profile2), 90%);
	--bkc3: hsl(var(--profile), var(--profile2), 86%);
	--bkc4: hsl(var(--profile), var(--profile2), 82%);
}
html[dark][profile]{
	--profile: 0;
	--profile2: 0%;
	--bkc1: hsl(var(--profile), var(--profile2), 19%);
	--bkc2: hsl(var(--profile), var(--profile2), 16%);
	--bkc3: hsl(var(--profile), var(--profile2), 13%);
	--bkc4: hsl(var(--profile), var(--profile2), 10%);
}
body{
    margin: 0;
    font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
	color: var(--ftc);
	background-color: var(--bkc1);
    overflow: hidden;
}
img{
	pointer-events: none;	
}
img, #frbar, #fralt, #frMlist, #moreMenu, .itBox, #frPageInfo .title, #frPageInfo .users .it .name, #frPageInfo .direction, #frPageInfo .direction1, #frPageInfo .direction2, .btn, #frPageInfo .editBox, #eventList, .tab, .rig, .label, #frPageInfo .hboxOut0, #chartRange, #chartBox, #frPageInfo .line, #frPageInfo #loginBox, #plansBox{
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#frbar{
    position: fixed;
    width: 100vw;
    z-index: 990;
	top: 0;
	left: 0;
	background-color: var(--bkc4);
	border-bottom: 1px solid var(--line);
}
#frbar > div{
    padding: 10px;
	height: 35px;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    display: flex;
    align-items: center;
}
#fralt{
    top: var(--brhig);
    position: fixed;
    width: 100%;
    color: var(--ftc);
    font-size: 15px;
    font-weight: 400;
    font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
}
#fralt > div{
	height: 38px;
    border: 1px solid var(--tc);
    background-color: var(--tc2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#fralt .close{
    padding: 4px 12px;
    margin-right: 12px;
    color: var(--ftc2);
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}
#fralt .info{
    margin-left: 18px;
    display: flex;
    align-items: center;
}
@media (hover: hover) and (pointer: fine) {
	#fralt .close:hover{
		background-color: var(--hovc);
	}
}
#fralt .close:active{
	background-color: var(--actc);
}
#frmenu{
    margin-right: 4px;
}
#frmore{
    position: absolute;
    top: 8px;
    right: 14px;
}
#frLogin{
    position: absolute;
    right: 70px;
}
#frLogin > a {
    text-decoration: none;
    color: var(--ftc);
}
#frLogin > a div {
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	#frLogin > a div:hover {
		background-color: var(--hovc);
	}
}
#frLogin > a div:active {
	background-color: var(--actc);
}
#frNotice{
    position: absolute;
    top: 10px;
    right: 72px;
}
#frmenu i, #frmore i, #frNotice i{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    padding: 6px;
}
#frmore i{
    width: 40px;
    height: 40px;
    padding: 0px;
}
#frNotice i{
    width: 30px;
    height: 30px;
    padding: 3px;
}
#frmore i img, #frmore i div, #frNotice i div{
    height: 90%;
    width: 90%;
    border-radius: 50px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 4px #9e9e9e;
}
#frmenu i img, #frNotice i div{
    height: 80%;
    width: 80%;
    filter: var(--svgc);
    -moz-filter: var(--svgc);
    -webkit-filter: var(--svgc);
	transform: translateZ(0);
	perspective: 1000;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}
#frNotice i div{
	box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
	#frmenu i:hover, #frmore i:hover, #frNotice i:hover, .icon:hover, .edit:hover, .del:hover{
		border-radius: 50px;
		background-color: var(--hovc);
		-webkit-tap-highlight-color: transparent;
	}
}
#frmenu i:active, #frmore i:active, #frNotice i:active, .icon:active, .edit:active, .del:active{
    border-radius: 50px;
	background-color: var(--actc);
	-webkit-tap-highlight-color: transparent;
}
#frNotice i div{
    background-image: url(/img/bell-regular.svg);	
}
.frNoticeOpen #frNotice i div{
    background-image: url(/img/bell-solid.svg);	
}
#frNotice span{
    background-color: var(--red);
    position: absolute;
    top: 0px;
    right: -2px;
    min-width: 12px;
    padding: 0 2px;
    height: 16px;
    line-height: 16px;
    border-radius: 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    font-family: auto;
	color: #ffffff;
    border: 2px solid var(--bkc4);
    font-family: "Roboto","Arial",sans-serif;
}
#frlogo{
    height: 38px;
    width: 220px;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}
#frmin{
    margin-top: calc(var(--brhig) + var(--althig));
    position: relative;
    display: flex;
	--wid: 270px;
	background-color: var(--bkc1);
}
#frmin, #frMlist, #frPage{
	height: calc(var(--hig) - var(--althig));
	max-height: calc(var(--hig) - var(--althig));
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;
    transition-property: height, margin-top, max-height;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-property: height, margin-top, max-height;
}
#frMlistBk{
	content: '';
	width: 100vw;
	height: 100vh;
	background-color: rgb(0 0 0 / 70%);
	position: fixed;
	opacity: 0;
	transition: opacity 0.5s;
	transform: translateZ(0);
	perspective: 1000;
	backface-visibility: hidden;
	-webkit-transition: opacity 0.5s;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
	pointer-events: none;
	z-index: 985;
}
#frMlist{
    background-color: var(--bkc2);
    width: var(--wid);
	min-width: var(--wid);
	max-width: var(--wid);
	border-right: 1px solid var(--line);
	z-index: 980;
}
#frMlist .it{
    color: var(--ftc2);
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: .3rem .65rem;
    font-size: 1rem;
    line-height: 1.5rem;
    transition-property: border-left;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    border-radius: .5rem;
    margin: .2rem .3rem;
}
#frMlist .it.sel{
    background-color: var(--bkc3);	
}
@media (hover: hover) and (pointer: fine) {
	#frMlist .it:hover{
		background-color: var(--bkc3);	
	}
}
#frMlist .it.sel{
    color: #f44336;
}
#frMlist .it i, #fralt i, #frPageInfo .pgList .btn2 i{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    text-align: center;
    margin-right: 16px;
}
#frMlist .it i img, #fralt i img, #frPageInfo .pgList .btn2 i img{
    height: 80%;
    filter: var(--svgc2);
    -moz-filter: var(--svgc2);
    -webkit-filter: var(--svgc2);
	transform: translateZ(0);
	perspective: 1000;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}
#frMlist .it.sel i img{
    filter: var(--selc);
    -moz-filter: var(--selc);
    -webkit-filter: var(--selc);
	transform: translateZ(0);
	perspective: 1000;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}
#frMlist hr, #moreMenu .hr, #frPageInfo hr{
    border: none;
	border-top: 1px solid var(--line);
    margin: 0;
}
#frMlist .itf{
    color: var(--ftc2);
    padding: .2rem 0;
    margin: 0 .3rem;
    font-size: 13px;
    line-height: 16px;
}
#frMlist .itf > div{
    padding: .25rem .5rem;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#frMlist .itf.bx > div{
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	#frMlist .itf.bx:hover > div{
		background-color: var(--hovc);
	}
}
#frMlist .itf div img{
    height: 16px;
    width: 16px;
    filter: var(--svgc2);
    transition: transform .2s ease-in-out;
    -webkit-transition: transform .2s ease-in-out;
}
#frMlist .itf-sub{
    min-width: 100%;
    overflow: hidden;
}
body:not(.close) #frMlist .itf-sub > .it:first-child{
    margin-top: 0;
}
#moreMenu{
    position: fixed;
    right: 14px;
    top: 52px;
    min-width: 200px;
    background-color: var(--bkc2);
    z-index: 995;
    border: 1px solid var(--line);
    box-shadow: 0 0 4px var(--line);
    display: none;
    cursor: default;
    border-radius: .5rem;
    overflow: hidden;
}
#moreMenu .scrollbar{
    max-height: calc(var(--hig) - var(--brhig));
}
#moreMenu .it, #moreMenu .back{
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
    padding: .25rem .5rem;
    margin: .25rem;
    border-radius: .5rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--ftc);
}
@media (hover: hover) and (pointer: fine) {
	#moreMenu .it:hover{
		background-color: var(--hovc);
	}
}
#moreMenu .it:active{
	background-color: var(--actc);
}
#moreMenu .it > div, #moreMenu .back > div{
    display: flex;
    align-items: center;
}
#moreMenu .it .na, #moreMenu .back .na{
	padding: 0 .5rem;
	font-size: .9rem;
    line-height: 1rem;
}
.icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: .25rem;
	cursor: pointer;
    position: relative;
}
.icon img{
    height: 80%;
    filter: var(--svgc);	
    -moz-filter: var(--svgc);
    -webkit-filter: var(--svgc);
	transform: translateZ(0);
	perspective: 1000;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}
#moreMenu .back{
	cursor: default;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: .5rem .75rem;
    margin: 0;
}
#moreMenu .back .na{
	font-size: 1rem;
}
#moreMenu .itf{
    color: var(--ftc2);
    margin: .25rem .75rem;
    font-size: .75rem;
}
#moreMenu .user{
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding: .75rem 1rem;
}
#moreMenu .user .img{
    height: 42px;
    width: 42px;
	margin-right: 12px;
    border-radius: 50px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 4px #9e9e9e;
}
#moreMenu .user .display{
    font-size: 16px;
    margin-bottom: 2px;
}
#moreMenu .user .login{
    font-family: sans-serif;
    font-size: 12px;
}
#moreMenu .profile{
	--size: 30px;
	width: var(--size);
	height: var(--size);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
}
#moreMenu .profile img{
    height: 100%;
    border-radius: var(--size);
    box-shadow: 0 0 4px #9e9e9e;
}
#moreMenu .it .na > div{
    margin: 4px 0;
}
#moreMenu .it .na > div:nth-child(1){
    font-size: 15px;
}
#moreMenu .it .na > div:nth-child(2){
	color: var(--ftc2);
}
#frMlist .it > div, #moreMenu .it > div, #frmenu i img, #frmore i img{
    pointer-events: none;
}
.frmoreOpen #moreMenu{
	display: block;
    animation: show 0.2s linear;
}
@keyframes show {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.frmoreOpen #frMlistBk, .eventListOpen #frMlistBk{
	pointer-events: all;
}
#frPage{
    width: 100%;
}
#frPageLoading, #frPageError, #frPageConstruction{
	pointer-events: none;
    height: calc(var(--hig) - var(--brhig));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#frPageError img, #frPageConstruction img{
	width: 60px;
	height: 60px;
    padding: 24px;
}
#frPageError > div, #frPageConstruction > div{
    font-size: 20px;
    padding-right: 24px;
}
.circle-loader-box {
    position: absolute;
    right: 50%;
    width: 40px;
    height: 40px;
    zoom: 1.5;
}
.circle-loader {
    margin-left: 48%;  
	fill: transparent;
	stroke: var(--blue);
	stroke-width: 5;
	animation: dash 2s ease infinite, rotate 2s linear infinite;
}
@keyframes dash {
	0% {
		stroke-dasharray: 1,95;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 85,95;
		stroke-dashoffset: -25;
	}
	100% {
		stroke-dasharray: 85,95;
		stroke-dashoffset: -93;
	}
}
@keyframes rotate {
	0% {transform: rotate(0deg); }
	100% {transform: rotate(360deg); }
}
#frPageInfo > div{
	padding: 12px 24px;
    border-bottom: 1px solid var(--line);
}
#frPageInfo .maxLimit{
	max-width: 900px;
}
#frflor{
    text-align: left;
    font-size: 12px;
    padding: 8px 20px;
	color: var(--ftc2);
}
#frflor a{
	color: var(--ftc2);
    text-decoration: none;
}
#frflor > div{
	margin-bottom: 8px;
}
#frflor .links{
    display: flex;
    flex-wrap: wrap;
	margin-bottom: 4px;
}
#frflor .links a{
	cursor: default;
	margin-right: 8px;
	margin-bottom: 4px;
}
#frflor .links:hover{
	text-decoration: none !important;
}
#frflor a[href]:hover{
	text-decoration: underline;
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	#frflor .links:hover{
		text-decoration: none !important;
	}
	#frflor a[href]:hover{
		text-decoration: underline;
		cursor: pointer;
	}
}
.scrollbar{
    overflow: overlay;
	/*scrollbar-gutter: stable both-edges;*/
}
#frPageInfo .links{
    color: var(--blue);
    text-decoration: none;
}
#frPageInfo .links:hover{
	text-decoration: underline;
}
#frPageInfo .jimg{
    width: 100%;
    max-width: 800px;
    border-radius: 6px;
	margin: 12px 0;
    box-shadow: 0 0 4px var(--line);
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
#frPageInfo .jinput{
    width: calc(100% - 16px);
    border: 1px solid var(--line);
    border-radius: 6px;
    margin: 4px 0 8px 0;
    padding: 6px 8px;
    font-size: 14px;
    font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
    outline: none;
	color: var(--ftc);
    background-color: var(--bkc1);
}
@media all and (min-width: 801px) {
	#frMlist, .close #frMlist{
		transition: width 0.5s;
		transform: translateZ(0);
		perspective: 1000;
		backface-visibility: hidden;
		-webkit-transition: width 0.5s;
		-webkit-transform: translateZ(0);
		-webkit-perspective: 1000;
		-webkit-backface-visibility: hidden;
	}
	.close #frMlist{
		width: auto;
		min-width: auto;
		max-width: auto;
	}
	.close #frMlist .it .na, .close #frMlist .itf, .close #frMlist .cb-pro, .close #frMlist .cb-beta, .close #frMlist .cb-new{
		display: none;
	}
	.close #frMlist .it i{
		margin-right: 0px;
	}
	.close #frflor{
		display: none;
	}
}

.scrollbar::-webkit-scrollbar {
	width: 14px;
	height: 8px;
}
.scrollbar::-webkit-scrollbar-button {
	background: transparent;
	border-radius: 0px;
	height: 2px;
	width: 2px;
}
.scrollbar::-webkit-scrollbar-corner{
	background: transparent;
}
.scrollbar::-webkit-scrollbar-track-piece {
	background: transparent;
}
.scrollbar::-webkit-scrollbar-thumb {
	/*background-color: transparent;*/
	background-color: var(--hovc);
	border: 4px solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
	border-radius: 9999px;
	cursor: pointer;
}
.scrollbar::-webkit-scrollbar-track {
	box-shadow: none;
}
.scrollbar:hover::-webkit-scrollbar-thumb{
	background-color: var(--hovc);
}
.scrollbar:hover::-webkit-scrollbar-thumb:hover{
	background-color: var(--actc);
	cursor: pointer;
}
	
.cb-pro, .cb-new, .cb-beta{
    font-style: normal;
    font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
    line-height: normal;
    padding: 3px 8px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    margin: auto;
	margin-left: 8px;
    text-shadow: 0 0 4px #000;
    display: inline-block;
}
.cb-pro {
    background-color: #ffc107;	
}
.cb-pro::after {
    content: "Pro";
}
.cb-new {
    padding: 0px 4px;
    font-size: 18px;
    text-shadow: none;
	margin-left: 4px;
}
.cb-new::after {
    content: "New ";
	background: linear-gradient(to right, #f436eb, #ffc107);
    background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
    font-style: italic;
    text-shadow: 0 0 8px #ffeb3b80;
    width: 36px;
    display: inherit;
}
.cb-beta {
    background-color: #ef5350;
}
.cb-beta::after {
    content: "Beta";
}
.edit::before, .del::before, #frPageInfo .title img, .itBox .tit img, #frPageInfo .plus::before, #frPageInfo .btn.own::before, #frPageInfo .btn.mod::before, #frPageInfo .save::before, #frPageInfo .btn.down::before, #frPageInfo .btn.bic::before, #frPageInfo .btn.allow::before, #frPageInfo .btn.ban::before, .tIcon::before, #frPageInfo .userPlus::before, #frPageInfo .rotate::before, #frPageInfo .userMinus::before, #frPageInfo .trash::before, #frPageInfo .users .it a::before, .what::before, #dashAlertBox .title img, #dashConfirmBox .title img, #dashPromptBox .title img, #dashLoadingBox .title img, #eventList .eit img, .options_list > div > div img, #wordbox .iconBtn i::before, #wordbox .word i::before, .wordbox .iconBtn i::before, .wordbox .word i::before, .tab .ic::before, .search i::before{
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: var(--svgc);
    -moz-filter: var(--svgc);
    -webkit-filter: var(--svgc);
    transform: translateZ(0);
    perspective: 1000;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}
.edit::before, .del::before, .switch::before, #frPageInfo .users .it a::before, .what i::before, #wordbox .iconBtn i::before, #wordbox .word i::before, .wordbox .iconBtn i::before, .wordbox .word i::before, .tab .ic::before, .search i::before{
	content: "";
    position: absolute;
    pointer-events: none;
    width: 20px;
    height: 20px;
}
.edit, .del, .switch{
    margin-left: 10px;
    cursor: pointer;
    display: inline-block;
    position: relative;
}
.edit, .del{
    width: 26px;
    height: 26px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.edit{
	--url: url("/img/pen-to-square-regular.svg");
}
.edit::before{
    background-image: var(--url);
}
.del::before{
    background-image: url(/img/xmark-solid.svg);
}
.del.del2::before{
    background-image: url(/img/trash-can-regular.svg);
}
.edit.up-line::before{
    background-image: url(/img/arrow-up-to-line.svg);
}
.edit.down-line::before{
    background-image: url(/img/arrow-down-to-line.svg);
}
.edit.add::before{
    background-image: url(/img/plus-solid.svg);
}
.edit.mute::before{
    background-image: url(/img/volume-xmark-solid.svg);
}
.edit.volume::before{
    background-image: url(/img/volume-high-solid.svg);
}
.edit.volume-low::before{
    background-image: url(/img/volume-low-solid.svg);
}
.edit.play::before{
    background-image: url(/img/play-solid.svg);
}
.edit.pause::before{
    background-image: url(/img/pause-solid.svg);
}
.edit.playnext::before{
    background-image: url(/img/forward-step-solid.svg);
}
.edit.heart-air::before{
    background-image: url(/img/heart-regular.svg);
}
.edit.heart-full::before{
    background-image: url(/img/heart-solid.svg);
}
.edit.minus::before{
    background-image: url(/img/minus-solid.svg);
}
.edit.v-dot::before{
    background-image: url(/img/ellipsis-vertical-solid.svg);
}
.edit.dot::before{
    background-image: url(/img/ellipsis-solid.svg);
}
.what{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
    width: 34px;
    height: 24px;
}
.what > div{
    position: absolute;
    top: 38px;
    z-index: 800;
	display: none;
}
.what > div > div{
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    width: max-content;
    max-width: 230px;
    background-color: var(--bkc3);
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--line);
    box-shadow: 0 0 4px var(--line);
    margin: 8px;
	margin-top: 0;
}
@media (hover: hover) and (pointer: fine) {
	.what:hover > div{
		display: block;
	}
}
.what i{
    width: 34px;
    height: 34px;
    cursor: pointer;
}
.what i::before{
    width: 18px;
    height: 16px;
    margin: 9px;
    background-image: url(/img/circle-question-solid.svg);
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: var(--svgc3);
    -moz-filter: var(--svgc3);
    -webkit-filter: var(--svgc3);
}
.switch {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    padding: 4px;
    position: relative;
    border-radius: 50px;
    background-color: var(--bkc4);
    height: 20px;
    transition-property: background-color;
    transition-duration: 0.2s;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.2s;
    border: 1px solid var(--line);
}
.switch::before{
    left: 4px;
    transition-property: left;
    transition-duration: 0.2s;
    -webkit-transition-property: left;
    -webkit-transition-duration: 0.2s;
    background-image: url(/img/circle-xmark-solid.svg);
	filter: invert(62%);
}
.switch.on {
    background-color: var(--green);
}
.switch.on::before {
    left: 26px;
	filter: invert(100%);
    background-image: url(/img/circle-check-solid.svg);
}
.itBox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* flex-wrap: wrap; */
    background-color: var(--bkc2);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 6px 0;
    border: 1px solid var(--line);
}
.itBox.ghost{
    opacity: 0;
}
.itBoxList .itBox > div:nth-child(1){
    max-width: calc(100% - 110px);
}
.itBox > div:nth-child(2){
    display: flex;
    align-items: center;
}
.itBox .tit{
    display: -webkit-box;
    box-orient: vertical;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
	/* padding-left: 4px; */
}
.itBox .tit{
    color: var(--ftc);
    font-size: 20px;
    font-weight: 400;
    display: flex;
    align-items: center;
}
.itBox .tit img {
    height: 18px;
    width: 18px;
    margin: 4px 18px 4px 2px;
}
.itBox .inf{
    color: var(--ftc2);
    font-size: 16px;
    line-height: 21px;
    margin-top: 4px;
}
.itBox .itIcon{
    display: flex;
    align-items: center;
}
.itBox .itIcon .tIcon{
	margin-right: 16px;
    margin-left: 6px;
}
.itBox .itIcon .tIcon::before{
    --size: 30px;
    width: var(--size);
    height: var(--size);
}
.itBox .itIcon .tIcon.drag{
    padding: 0 12px 0 6px;
    margin: 0;
    cursor: grab;
}
.itBox .itIcon .tIcon.drag::before{
    width: 12px;
    height: 50px;
}
.stBoxList .itBox > div:nth-child(1){
    max-width: calc(100% - 70px);
}
.stBoxList .itBox .inf{
    white-space: unset;
}
#frPageInfo .loading, #dashLoadingBox .loading {
    position: relative;
    height: 240px;
    display: flex;
    align-items: center;
}
#frPageInfo .empty{
    position: relative;
    height: 180px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#frPageInfo .empty div{
	width: 80px;
	height: 80px;
    background-image: url(/img/no-data.png);
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#frPageInfo .empty span{
    font-size: 16px;
	margin-top: 8px;
}
#frPageInfo .title{
    font-size: 24px;
    line-height: 24px;
    display: flex;
    align-items: center;
    padding: 8px 0;
}
#frPageInfo .title span{
    font-size: 20px;
    font-weight: 400;
}
#frPageInfo .title img{
    height: 22px;
    width: 22px;
    margin-left: 2px;
    margin-right: 24px;
}
#frPageInfo .title b{
	font-weight: 400;
}
#frPageInfo .direction{
    font-size: 16px;
    padding: 4px 0;
    color: var(--ftc2);
    cursor: default;
}
#frPageInfo .direction.ctr{
    text-align: center;
}
#frPageInfo .line{
    font-size: 18px;
    padding: 4px 0;
    margin-top: 4px;
    color: var(--ftc);
    cursor: default;
}
#frPageInfo .direction1{
    font-size: 16px;
    padding: 4px 0;
    color: var(--ftc);
}
#frPageInfo .users{
    margin-top: 8px;
    padding-bottom: 8px;
}
#frPageInfo .users > div{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
#frPageInfo .users .it{
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    margin: 8px;
    cursor: pointer;
}
#frPageInfo .users .it img{
    border-radius: 100px;
    width: 65px;
    height: 65px;
    box-shadow: 0 0 4px 2px var(--line);
}
#frPageInfo .users .it a{
    position: absolute;
    top: -1px;
    left: -1px;
    width: 67px;
    height: 67px;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background-color: #00000080;
	display: none;
}
#frPageInfo .users .it a::before{
	--svgc: invert(100%);
    background-image: url(/img/arrow-up-right-from-square-solid.svg);
}
#frPageInfo .users .it .name{
    background-color: var(--bkc2);	
    font-size: 14px;
    border-radius: 6px;
    min-width: 50px;
    text-align: center;
    position: absolute;
    padding: 2px 4px;
    bottom: -10px;
    box-shadow: 0 0 4px var(--line);
    border: 1px solid var(--line);
	display: none;
	z-index: 800;
    white-space: nowrap;
}
#frPageInfo .users .sel .name{
	z-index: 799;
}
#frPageInfo .users .sel .name{
    display: block;
}
#frPageInfo .users .sel img{
    box-shadow: 0 0 6px 4px var(--blue);
}
@media (hover: hover) and (pointer: fine) {
	#frPageInfo .users .it:hover .name{
		display: block;
	}
	#frPageInfo .users .it:hover img{
		box-shadow: 0 0 4px 4px #ff9800;;
	}
	#frPageInfo .users .sel:hover img{
		box-shadow: 0 0 6px 4px var(--blue);
	}
	#frPageInfo .users .sel:hover a, #frPageInfo .users .it2:hover a{
		display: flex;
	}
}
#frPageInfo .rig, #frPageInfo .ctr, #frPageInfo .lef, #frPageInfo .between{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
#frPageInfo .rig{
    justify-content: flex-end;	
}
#frPageInfo .ctr{
    justify-content: center;	
}
#frPageInfo .lef{
    justify-content: flex-start;	
}
#frPageInfo .between{
    justify-content: space-between;	
}
#frPageInfo .plus, #frPageInfo .btn.own, #frPageInfo .btn.mod, #frPageInfo .save, #frPageInfo .btn.down, #frPageInfo .btn.allow, #frPageInfo .btn.bic, #frPageInfo .btn.ban, #frPageInfo .userPlus, #frPageInfo .rotate, #frPageInfo .userMinus, #frPageInfo .trash, .tIcon{
    display: flex;
    align-items: center;
}
#frPageInfo .plus::before, #frPageInfo .btn.own::before, #frPageInfo .btn.mod::before, #frPageInfo .save::before, #frPageInfo .btn.down::before, #frPageInfo .btn.allow::before, #frPageInfo .btn.bic::before, #frPageInfo .btn.ban::before, #frPageInfo .userPlus::before, #frPageInfo .rotate::before, #frPageInfo .userMinus::before, #frPageInfo .trash::before, .tIcon::before{
	content: "";
    width: 14px;
    height: 14px;
	margin-right: 8px;
    pointer-events: none;
    background-image: url(/img/plus-solid.svg);
}
button.btn {
    border: unset;
    background-color: transparent;
}
.btn{
    font-weight: 400;
    font-size: 1rem;
    padding: .25rem .65rem;
    display: inline-block;
    border-radius: .5rem;
    cursor: pointer;
    width: fit-content;
    color: var(--blue);
	--svgc: invert(44%) sepia(91%) saturate(1400%) hue-rotate(184deg) brightness(98%) contrast(95%);
	white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
    .btn:hover:not(.dis){
        background-color: var(--blue3);
    }
}
.btn:active.btn:active:not(.dis){
    background-color: var(--blue2);
}
.btn.dis{
    color: var(--ftc2);
	--svgc: var(--svgc2);
    cursor: default;
}
.btn.dis:active{
    background-color: transparent;
}
.btn2{
    border: 1px solid var(--line);
    border-radius: 50px;
    padding: 4px 10px;
    margin-right: 12px;
    font-size: 14px;
    line-height: 15px;
    color: var(--ftc2);
	--svgc: var(--svgc2);
    display: flex;
    align-items: center;
}
#frPageInfo .pgList .btn2 i{
    width: 16px;
    height: 16px;
    margin-right: 6px;
}
#frPageInfo .btn2::before{
    margin-right: 6px;
}
.btn2.sel{
    border: 1px solid var(--blue);
    color: var(--blue);
    background-color: var(--blue2);
	--svgc: invert(44%) sepia(91%) saturate(1400%) hue-rotate(184deg) brightness(98%) contrast(95%);
	--svgc2: var(--svgc);
}
.tIcon{
    justify-content: center;
}
.tIcon::before{
    width: 16px;
    height: 16px;
	margin-right: 0;
}
#frPageInfo .userPlus::before{
    background-image: url(/img/user-plus-solid.svg);
}
#frPageInfo .rotate::before{
    background-image: url(/img/rotate-solid.svg);
}
#frPageInfo .userMinus::before{
    background-image: url(/img/user-minus-solid.svg);
}
#frPageInfo .trash::before{
    background-image: url(/img/trash-can-regular.svg);
}
#frPageInfo .save::before{
    background-image: url(/img/floppy-disk-regular.svg);
}
#frPageInfo .btn.own::before{
    background-image: url(/img/own.svg);
}
#frPageInfo .btn.mod::before{
    background-image: url(/img/mod.svg);
}
#frPageInfo .btn.down::before{
    background-image: url(/img/download-solid.svg);
}
#frPageInfo .btn.allow::before{
    background-image: url(/img/check-solid.svg);
}
#frPageInfo .btn.ban::before{
    background-image: url(/img/ban-solid.svg);
}
#frPageInfo .btn.robot::before{
    background-image: url(/img/robot-solid.svg);
}
#frPageInfo .btn.person::before{
    background-image: url(/img/person-solid.svg);
}
#frPageInfo .btn.unlock::before{
    background-image: url(/img/lock-open-solid.svg);
}
#frPageInfo .btn.play::before{
    background-image: url(/img/play-solid.svg);
}
#frPageInfo .btn.play.green:not(.dis){
    --blue: var(--green);
    --svgc: var(--svgcgreen);
}
#frPageInfo .btn.stop::before{
    background-image: url(/img/stop-solid.svg);
}
#frPageInfo .btn.stop.red:not(.dis){
    --blue: var(--red);
    --svgc: var(--svgcred);
}
#frPageInfo .btn.connect::before{
    background-image: url(/img/link-solid.svg);
}
#frPageInfo .btn.disconnect::before{
    background-image: url(/img/link-slash-solid.svg);
}
#frPageInfo .btn.eye::before{
    background-image: url(/img/eye-regular.svg);
}
#frPageInfo .btn.eye-slash::before{
    background-image: url(/img/eye-slash-regular.svg);
}
#frPageInfo .btn.minus::before{
    background-image: url(/img/minus-solid.svg);
}
#frPageInfo .btn.clock::before{
    background-image: url(/img/clock-regular.svg);
}
#frPageInfo .btn.find::before{
    background-image: url(/img/magnifying-glass-solid.svg);
}
#frPageInfo .btn.share::before{
    background-image: url(/img/arrow-up-right-from-square-solid.svg);
}
#frPageInfo .btn.down-line::before{
    background-image: url(/img/arrow-down-to-line.svg);
}
#frPageInfo .btn.arrow-left::before{
    background-image: url(/img/arrow-left-solid.svg);
}
#frPageInfo .chartPgList {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
#frPageInfo .pgList {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
#frPageInfo .pgList .btn2{
	margin-bottom: 12px;
}
#frPageInfo .pgList .btn3{
	margin-bottom: 0px;
	margin-top: 12px;
}
#frPageInfo .hboxOut0{
	padding: 12px;
}
#frPageInfo .hboxOut{
    /*display: flex;
    flex-wrap: wrap;*/
    padding: 10px;
	margin: 0;
	list-style: none;
    column-gap: 16px;
	column-count: 4;
}
#frPageInfo .hboxOut .hbox{
	--fixWidth: 0px;
    /*width: calc(25% - 50px + var(--fixWidth));*/
	border: 1px solid var(--line);
    border-radius: 6px;
	padding: 8px 10px;
	margin-bottom: 16px;
    height: 0%;
	min-height: 200px;
	break-inside: avoid;
}
#frPageInfo .hboxOut .hbox .title{
	font-size: 20px;
	word-wrap: break-word;
	padding: 8px 2px;
}
#frPageInfo .hboxOut .hbox .title img {
    height: 18px;
    width: 18px;
    margin-left: 6px;
    margin-right: 20px;
}
#frPageInfo .hboxOut .hbox .line{
    padding: 2px 10px;
	font-size: 16px;
	color: var(--ftc);
	word-wrap: break-word;
}
#frPageInfo .hboxOut .hbox .line2{
	font-size: 13px;
    display: flex;
    justify-content: space-between;
	margin-top: 4px;
}
#frPageInfo .hboxOut .hbox .direction{
    padding: 2px 10px;
    font-size: 14px;
    color: var(--ftc2);
	word-wrap: break-word;
}
#frPageInfo .hboxOut .hbox hr{
	margin: 4px 0;
}
#frPageInfo .hboxOut .hbox a{
    color: var(--blue);
	text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
	#frPageInfo .hboxOut .hbox a:hover{
		text-decoration: underline;
	}
}
#frPageInfo .disBox{
	pointer-events: none;
	opacity: 0.5;
}
@media (min-width: 1201px) and (max-width: 1600px) {
	#frPageInfo .hboxOut{
		column-count: 3;
	}
}
@media (min-width: 901px) and (max-width: 1200px) {
	#frPageInfo .hboxOut{
		column-count: 2;
	}
}
@media all and (max-width: 900px) {
	#frPageInfo .hboxOut{
		column-count: 1;
		padding: 0;
	}
}
@media all and (max-width: 800px) {
	#frPageInfo .hboxOut0{
		padding: 0;
		border: none;
	}
	#frPageInfo .hboxOut .hbox{
		border-radius: 0;
		border: none;
		border-bottom: 1px solid var(--line);
		padding: 8px 14px;
		margin: 0;
	}
	#frPageInfo .hboxOut .hbox .title img {
		margin-left: 2px;
	}
}
.tIcon.lock::before{
    filter: var(--svgcorange);	
    -moz-filter: var(--svgcorange);
    -webkit-filter: var(--svgcorange);
    background-image: url(/img/lock-solid.svg);
}
.tIcon.unlock::before{
    filter: var(--svgcgreen);	
    -moz-filter: var(--svgcgreen);
    -webkit-filter: var(--svgcgreen);
    background-image: url(/img/lock-open-solid.svg);
}
.tIcon.remove::before{
    filter: var(--svgc2);	
    -moz-filter: var(--svgc2);
    -webkit-filter: var(--svgc2);
    background-image: url(/img/trash-can-regular.svg);
}
.tIcon.down::before{
    filter: var(--svgc2);	
    -moz-filter: var(--svgc2);
    -webkit-filter: var(--svgc2);
    background-image: url(/img/sort-down-solid.svg);
}
.tIcon.stream::before{
    width: 18px;
    height: 18px;
    filter: var(--svgc);	
    -moz-filter: var(--svgc);
    -webkit-filter: var(--svgc);
    background-image: url(/img/stream.svg);
}
.tIcon.aup, .tIcon.adown{
	margin-left: 6px;
}
.tIcon.aup::before{
    filter: var(--svgcgreen);	
    -moz-filter: var(--svgcgreen);
    -webkit-filter: var(--svgcgreen);
    background-image: url(/img/circle-arrow-up-solid.svg);
}
.tIcon.adown::before{
    filter: var(--svgc2);	
    -moz-filter: var(--svgc2);
    -webkit-filter: var(--svgc2);
    background-image: url(/img/circle-arrow-down-solid.svg);
}
.tIcon.copy::before{
    background-image: url(/img/copy-regular.svg);
}
.tIcon.twitter::before{
    background-image: url(/img/twitter.svg);
}
.tIcon.twitch::before{
    background-image: url(/img/twitch.svg);
}
.tIcon.discord::before{
    background-image: url(/img/discord.svg);
}
.tIcon.fingerprint::before{
    background-image: url(/img/fingerprint-solid.svg);
}
.tIcon.key::before{
    background-image: url(/img/key-solid.svg);
}
.tIcon.usb::before{
    background-image: url(/img/usb.svg);
}
.tIcon.apple::before{
    background-image: url(/img/apple.svg);
}
.tIcon.mobile::before{
    background-image: url(/img/mobile-screen-solid.svg);
}
.tIcon.windows::before{
    background-image: url(/img/windows.svg);
}
.tIcon.drag::before{
    background-image: url(/img/grip-lines-solid.svg);
}
#msgAlertBox{
	position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    margin: auto;
	pointer-events: none;
	z-index: 995;
}
#msgAlertBox div{
    width: fit-content;
    right: 0;
    left: 0;
    margin: auto;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 16px;
	margin-bottom: 12px;
	min-width: 80px;
	text-align: center;
	color: #000000;
}
#msgAlertBox .error{
    background-color: #fbd2e0;
	box-shadow: 0 0 4px 1px #f44336;
}
#msgAlertBox .done{
    background-color: #edf7ed;
	box-shadow: 0 0 4px 1px #4caf50;
}
#msgAlertBox .info{
	color: var(--ftc);
    background-color: var(--bkc2);
    box-shadow: 0 0 4px 1px #9e9e9e;
}
#dashAlertBox, #dashConfirmBox, #dashPromptBox, #dashLoadingBox{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00000080;
    backdrop-filter: blur(3px);
}
#dashAlertBox .inBox, #dashConfirmBox .inBox, #dashPromptBox .inBox, #dashLoadingBox .inBox{
    max-width: 480px;
    background-color: var(--bkc1);
    border-radius: 8px;
    margin: 12px;
    width: 100%;
    color: var(--ftc);
    font-size: 16px;
}
#dashAlertBox .inBox > div, #dashConfirmBox .inBox > div, #dashPromptBox .inBox > div, #dashLoadingBox .inBox > div{
    margin: 14px 16px;
    position: relative;
}
#dashAlertBox .title, #dashConfirmBox .title, #dashPromptBox .title, #dashLoadingBox .title{
    position: relative;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
    padding-left: 6px;
    color: var(--ftc);
    display: flex;
    align-items: center;
}
#dashAlertBox .title i, #dashConfirmBox .title i, #dashPromptBox .title i, #dashLoadingBox .title i{
    width: 24px;
    text-align: center;
    margin-right: 20px;
}
#dashAlertBox .title img, #dashConfirmBox .title img, #dashPromptBox .title img, #dashLoadingBox .title img{
    height: 20px;
    width: 20px;
    margin-right: 20px;
}
#dashPromptBox .inputCountText{
    position: absolute;
    right: 0;
    bottom: 44px;
    font-size: 14px;
    color: var(--ftc2);
}
#dashAlertBtn, #dashConfirmBtn , #dashPromptBtn {
    text-align: right;
    padding-bottom: 2px;
    padding-right: 6px;
}
#dashAlertBtn .btn, #dashConfirmBtn .btn, #dashPromptBtn .btn{
    min-width: 50px;
    text-align: center;
}
#dashAlertInfo, #dashConfirmInfo , #dashPromptInfo, #dashLoadingInfo {
    font-size: 20px;
    margin-top: 12px;
    margin-bottom: 32px;
}
#dashLoadingBox .inBox{
	max-width: 340px;
}
#dashLoadingInfo .loading{
	height: 120px;
}
#dashConfirmBtn > div:nth-child(2), #dashPromptBtn > div:nth-child(2){
	margin-left: 6px;
    color: var(--ftc2);
}
#dashPromptInfo{
    margin-bottom: 16px;
}
#dashPromptInput{
    width: calc(100% - 22px);
    font-size: 16px;
    outline: none;
    padding: 6px 10px;
    margin: 4px 0;
    border-radius: 6px;
    border: 1px solid var(--line);
    font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
    background-color: var(--bkc1);
    color: var(--ftc);
    margin-bottom: 32px;
}
#frPageInfo .airBox{
    height: 10rem;
    border-bottom: none;
}
#frPageInfo .ctnHigBox{
    height: calc(var(--hig) - var(--brhig));
    padding: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
#frPageInfo .ctnHigBox > div{
    position: relative;
    margin: 20px;
}
#frPageInfo .ctnHigBox > div .btn{
    position: absolute;
    left: -10px;
}
.tab{
    width: calc(100% - 0px);
    /* border-top: 1px solid var(--line); */
	border-collapse: collapse;
    font-size: 16px;
}
#frPageInfo .tab td{
    padding:.5rem;
    border-bottom: 1px solid var(--line);
	word-break: break-all;
}
.tab tr.itAir{
    height: 36px;
}
#frPageInfo .tab tr.itAir td{
	border-bottom: none;
}
.tab .c{
    text-align: center;
}
@media (hover: hover) and (pointer: fine) {
	.tab tr:hover{
		background-color: var(--hovc);
        transition: background-color .2s ease-in-out;
        -webkit-transition: background-color .2s ease-in-out;
	}
	.tab tr.nohover:hover{
		background-color: transparent;
	}
	.tab.tabItBox tr:hover{
		background-color: transparent;
	}
	.tab tr.itAir:hover{
		background-color: transparent;
	}
}
.tab tr:last-child td{
    border-bottom: none;
}
.tab tr:first-child td{
    border-bottom: 1px solid var(--line);
}
.tab a{
    color: var(--ftc);
    cursor: pointer;
    text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
	.tab a:hover{
		text-decoration: underline;
	}
}
.tab tr.isBot, .tab tr.isBot td, .tab tr.isBot a{
    color: var(--red);
}
.tab .fa-ban, .tab .fa-square, .tab .fa-square-check{
    color: #9e9e9e;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	.tab .fa-ban:hover{
		color: #f44336;
	}
}
.tab .fa-square-check, .fa-square-check{
    color: #03a9f4;
}
#frPageInfo .tab .line{
    text-decoration: line-through;
    font-size: .9rem;
}
.tab .g, .tab .g a{
	color: var(--ftc2);
	font-size: .9rem;
}
.tab .m{
	margin-bottom: 4px;
}
.tab .flex{
    display: flex;
    align-items: center;
}
.tab .r{text-align: right;}
.tab .w10{width: 10px;}
.tab .w20{width: 20px;}
.tab .w30{width: 30px;}
.tab .w40{width: 40px;}
.tab .w50{width: 50px;}
.tab .w60{width: 60px;}
.tab .w70{width: 70px;}
.tab .w80{width: 80px;}
.tab .w90{width: 90px;}
.tab .w100{width: 100px;}
.tab .w110{width: 110px;}
.tab .w120{width: 120px;}
.tab .w130{width: 130px;}
.tab .w140{width: 140px;}
.tab .w150{width: 150px;}
.tab .w160{width: 160px;}
.tab .w170{width: 170px;}
.tab .w180{width: 180px;}
.tab .w190{width: 190px;}
.tab .w200{width: 200px;}
.tab .wmax{width: 100%;}
.tab .wfit{width: 0%; white-space:nowrap;}
.tab .wfit .btn{white-space: nowrap; font-size: .9rem;}
.tab .wfit a{white-space: nowrap;}
.tab .nowrap {white-space: nowrap;}
.tab .f14{
	font-size: .9rem;
}
.tab.fl .icon img{
	--svgc: var(--svgc2);
}
.tab.fl .icon.r:active img{
	--svgc: var(--svgcred);
}
.tab.fl .icon.g:active img{
	--svgc: var(--svgcgreen);
}
.tab .lc{
    display: flex;
    align-items: center;
}
.tab .ic{
	width: 14px;
	height: 13px;
    position: relative;	
    display: inline-block;
}
.tab .ic::before{
	width: 16px;
	height: 16px;
    left: 0;
    top: 0;
}
.tab .ic.vip, .tab .ic.sub, .tab .ic.mod, .tab .ic.own{
    margin: 0px 6px 0px 2px;
	background-color: #fff;
}
.tab .ic.air{
    margin: 0px 6px 0px 2px;
    opacity: 0.1;
}
.tab .ic.mute{
    margin: 0px 8px 0px 2px;
	height: 16px;
    width: 16px;
}
.tab .ic.vip::before, .tab .ic.sub::before, .tab .ic.mod::before, .tab .ic.own::before, .tab .ic.air::before, .tab .ic.user::before{
	width: 18px;
	height: 18px;
    top: -3px;
    left: -2px;	
}
.tab .ic.vip::before{
	--svgc: invert(21%) sepia(80%) saturate(6810%) hue-rotate(301deg) brightness(94%) contrast(108%);
    background-image: url(/img/vip.svg);
}
.tab .ic.sub::before{
	--svgc: invert(11%) sepia(78%) saturate(3774%) hue-rotate(278deg) brightness(121%) contrast(118%);
    background-image: url(/img/sub.svg);
}
.tab .ic.mod::before{
	--svgc: invert(35%) sepia(84%) saturate(2519%) hue-rotate(100deg) brightness(104%) contrast(106%);
    background-image: url(/img/mod.svg);
}
.tab .ic.own::before{
	--svgc: invert(21%) sepia(99%) saturate(2654%) hue-rotate(350deg) brightness(91%) contrast(101%);
    background-image: url(/img/own.svg);
}
.tab .ic.twitch_affiliate::before{
    --svgc: invert(89%) sepia(22%) saturate(5894%) hue-rotate(350deg) brightness(99%) contrast(105%);
    background-image: url(/img/twitch_affiliate.svg);
}
.tab .ic.twitch_partner::before{
    --svgc: invert(46%) sepia(85%) saturate(2192%) hue-rotate(231deg) brightness(102%) contrast(101%);
    background-image: url(/img/twitch_partner.svg);
}
.tab .ic.twitch_affiliate, .tab .ic.twitch_partner{
    margin-left: 6px;
    margin-right: 2px;
}
.tab .ic.user{
	margin: 0px 6px 0px 2px;
}
.tab .ic.user::before{
    background-image: url(/img/user-solid.svg);
    height: 14px;
    margin-top: 2px;
}
.tab .ic.mute::before{
	--svgc: var(--svgcred);
    background-image: url(/img/volume-xmark-solid.svg);
}
.tab .ic.hand::before{
    background-image: url(/img/pen-solid.svg);
}
.tab .ic.ecpay::before{
    background-image: url(/img/ecpay.svg);
}
.tab .ic.sort, .tab .ic.sortup, .tab .ic.sortdown{
	width: 18px;
	height: 18px;
	cursor: pointer;
}
.tab .ic.sort::before, .tab .ic.sortup::before, .tab .ic.sortdown::before{
	width: 18px;
	height: 14px;
    top: 2px;
	--svgc: var(--svgc2);
    background-position: right;
}
.tab .ic.sort::before{
    background-image: url(/img/sort-solid.svg);
}
.tab .ic.sortup::before{
    background-image: url(/img/sort-up-solid.svg);
}
.tab .ic.sortdown::before{
    background-image: url(/img/sort-down-solid.svg);
}
.tab .ic.allow::before{
    background-image: url(/img/check-solid.svg);
}
.tab .ic.ban::before{
    background-image: url(/img/ban-solid.svg);
}
.tab .st{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.tab .st *{
    cursor: pointer;
}
.tab.fl input[type=checkbox]{
    cursor: pointer;
    width: 24px;
    height: 16px;
}
.tab.fl.hideNotBot .notBot{
	display: none;
}
.tab .img{
	display: flex;
    align-items: center;
    justify-content: center;
}
.tab .img img{
    width: 40px;
    height: 40px;
    border-radius: 100px;
    box-shadow: 0 0 4px var(--line);
}
.tab.notinput input{
	width: 100%;
    border: 0;
    font-size: 16px;
    color: var(--ftc);
    padding: 0;
    margin: 4px 0;
    background-color: transparent;
}
.tab.notinput .tit, .tab.notinput .game, .tab.notinput a{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tab.notinput .game{
    margin: 4px 0;
    color: var(--ftc2);
    font-size: 14px;
}
#frPageInfo .tab.tabItBox td{
    padding: 0;
    position: relative;
    border: none;
}
.tab.tabItBox tr:first-child{
	height: auto;
}
.tab.tabItBox tr.itAir{
    height: 76px;
}
#frPageInfo .tab.tabItBox tr:first-child td{
	padding-bottom: 6px;
}
.tab.tabItBox .tabDisabled{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	color: var(--ftc);
	padding-bottom: 8px;
}
.tab.tabItBox .tabDisabled > div:nth-child(2){
	color: var(--ftc2);
}
.tab.tabItBox .itBox{
	margin: 0 0 6px 0;
}
.tabar{
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 6px 12px;
}
.tabar .icon{
	margin-left: 6px;
    width: 18px;
    height: 18px;
}
.tabar .dis{
    background-color: transparent;
    cursor: default;
}
.tabar .dis img{
    opacity: 0.3;
}
.tabar .info{
	color: var(--ftc2);
	padding-right: 6px;
}
.tabar select{
	width: 60px;
    outline: none;
    border: none;
    padding: 5px 0;
    background-color: var(--bkc1);
    cursor: pointer;
    color: var(--ftc2);
    text-align: center;
    margin-right: 10px;
    font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
    border-radius: 4px;
}
@media (hover: hover) and (pointer: fine) {
	.tabar select:hover{
		color: var(--ftc);
		box-shadow: inset 0 0 0px 20px var(--hovc);
	}
}
#wordbox, .wordbox{
    width: calc(100% - 8px);
    box-shadow: 0 0 4px var(--line);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0px 4px;
    margin: 8px 0px;
    color: var(--ftc);
    display: flex;
}
#wordbox .iconBtn, .wordbox .iconBtn{
    display: flex;
    margin: 0;
}
#wordbox .iconBtn i, .wordbox .iconBtn i{
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    padding: 6px;
    margin: 4px;
    border-radius: 24px;
    position: relative;
}
@media (hover: hover) and (pointer: fine) {
	#wordbox .iconBtn i:hover, #words .word i:hover, .wordbox .iconBtn i:hover, .words .word i:hover{
		background-color: var(--hovc);
	}
}
#wordbox .iconBtn i:active, #words .word i:active, .wordbox .iconBtn i:active, .words .word i:active{
    background-color: var(--actc);
}
@media (hover: hover) and (pointer: fine) {
	#words .word i:hover, .words .word i:hover{
		filter: none;	
		-moz-filter: none;
		-webkit-filter: none;
	}
}
#wordbox .iconBtn i::before, .wordbox .iconBtn i::before{
	width: 14px;
	height: 14px;
}
#wordbox .word i::before, .wordbox .word i::before{
    background-image: url(/img/circle-xmark-regular.svg);
}
#wordbox .iconBtn .copy::before, .wordbox .iconBtn .copy::before{
    background-image: url(/img/copy-regular.svg);
}
#wordbox .iconBtn .clear::before, .wordbox .iconBtn .clear::before{
    background-image: url(/img/xmark-solid.svg);
}
#words, .words{
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: calc(100% - 88px);
    margin: 0;
    padding: 6px 0px;
    overflow: hidden;
	color: var(--ftc);
}
#words .word, .words .word{
    background-color: var(--bkc2);
    border: 1px solid var(--line);
    padding-left: 8px;
    margin: 3px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 15px;
    max-width: calc(100% - 14px);
}
#words .word a, .words .word a{
    width: max-content;
    max-width: calc(100% - 36px);
    word-wrap: break-word;
    padding: 6px 0;
}
#words .word i, .words .word i{
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
	margin: 2px 4px;
    margin-left: 6px;
	padding: 2px;
    cursor: pointer;
    border-radius: 24px;
    filter: var(--svgc2);
    -moz-filter: var(--svgc2);
    -webkit-filter: var(--svgc2);
    position: relative;
}
#wordbox .word i::before, .wordbox .word i::before{
	width: 16px;
	height: 16px;
}
#words input, .words input{
    background-color: transparent;
    border: none;
    outline: none;
    color: var(--ftc);
    font-size: 16px;
    margin: 3px 4px;
    flex: auto;
    cursor: auto;
}
#frPageInfo .editBox{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 990;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00000080;
    backdrop-filter: blur(5px);
	--defLeft: 0px;
}
#frPageInfo .editBox > div{
    width: 100%;
    max-width: 660px;
    background-color: var(--bkc1);
    border-radius: 8px;	
    margin: 8px;
}
#frPageInfo .editBox .it{
    background-color: var(--bkc2);
    border-radius: 8px;	
    border: 1px solid var(--line);
    margin: 8px 0;	
    padding: 6px 8px;
}
#frPageInfo .editBox .it.dis, #frPageInfo .editBox .label .dis{
	opacity: 0.5;
	pointer-events: none;	
}
#frPageInfo .editBox .title{
    padding: 16px 18px;
}
#frPageInfo .editBox .title .edit{
    margin-left: 0;
    margin-right: 16px;
    padding: 0;
    cursor: default;
    background-color: unset;
}
#frPageInfo .editBox .title .edit::before{
    width: 18px;
    height: 18px;
}
#frPageInfo .editBox .scrollbar{
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    height: 420px;
    padding: 8px 2px;
    scrollbar-gutter: stable both-edges;
}
@media all and (max-width: 800px) {
	#frPageInfo .editBox .scrollbar{
		padding: 8px 16px;
	}
}
#frPageInfo .editBox .floor{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 6px 14px;
    font-size: 14px;
}
#frPageInfo .floor > div{
    padding: 6px 14px;
    margin-left: 6px;
	cursor: default;
    color: var(--ftc2);
    font-size: 15px;
}
#frPageInfo .floor > div.en{
    cursor: pointer;
    color: var(--blue);
    border-radius: 4px;
}
#frPageInfo .floor > div.en:hover{
    background-color: var(--blue3);
}
#frPageInfo .floor > div.en:active{
    background-color: var(--blue2);
}
#frPageInfo .editBox .tit{
    font-size: 18px;
    margin-bottom: 4px;
	color: var(--ftc);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 6px;
}
#frPageInfo .editBox .tit > div:nth-child(1){
    display: flex;
    align-items: center;
}
#frPageInfo .editBox .tit > div:nth-child(1) .what, #frPageInfo .editBox .tit > div:nth-child(1) .what i{
    height: 16px;
}
#frPageInfo .editBox .tit > div:nth-child(1) .what i::before{
	margin: 0 9px;
}
#frPageInfo .editBox .tit > div:nth-child(1) .what > div{
	top: 32px;
}
#frPageInfo .editBox .tit > div:nth-child(2){
	font-size: 14px;
	font-weight: 400;
}
#frPageInfo .editBox .dire, #frPageInfo .parameter .dire{
    font-size: 15px;
    margin-bottom: 2px;
	color: var(--ftc2);
    padding: 0 6px;
}
#frPageInfo .editBox .dire2, #frPageInfo .parameter .dire2{
    display: flex;
    flex-wrap: wrap;
}
#frPageInfo .editBox .dire2 > div, #frPageInfo .parameter .dire2 > div{
    margin-right: 24px;
    margin-top: 4px;
}
#frPageInfo .editBox .dire b, #frPageInfo .parameter .dire b{
    -moz-user-select: all;
    -webkit-user-select: all;
    -ms-user-select: all;
    user-select: all;
    font-weight: 400;
}
#frPageInfo .editBox input:not(.uninput):not([type=checkbox]):not([type=radio]), #frPageInfo .editBox select{
    width: calc(100% - 30px - var(--defLeft));
    font-size: 16px;
    outline: none;
    padding: 6px 10px;
    margin: 4px;
    border-radius: 6px;
    border: 1px solid var(--line);
    font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
    background-color: var(--bkc1);
    color: var(--ftc);
}
#frPageInfo .editBox select{
    width: calc(100% - 10px);
    cursor: pointer;
}
#frPageInfo .editBox input[disabled]{
    background-color: var(--bkc3);
    /*color: var(--ftc2);*/
}
#frPageInfo .editBox input[type=range]{
	border: none;
    box-shadow: none;
    padding: 6px 0;
    margin: 4px 10px;
	padding-left: var(--defLeft);
}
#frPageInfo #editMinute, #frPageInfo #editMinChat{
    width: calc(100% - 34px);
	padding-left: 12px;
}
#frPageInfo .editBox .msgSetItem{
    display: flex;
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--line);
    background-color: var(--bkc1);
    margin: 4px 0;
}
#frPageInfo .editBox .msgSetItem .icon{
    width: 23px;
	padding: 2px;
	margin-right: 4px;
}
#frPageInfo .editBox .msgSetItem div{
    padding: 0 9px 0 4px;
    opacity: 0;
	display: none;
}
#frPageInfo .editBox .msgSetItem input:focus + div{
    opacity: 1;
    display: block;
	color: var(--ftc2);
}
#frPageInfo .editBox .msgSetItem input{
    margin: 0;
    border: 0;
}
#editLevel label, #msgSetType label, .label label{
    display: inline-block;
    margin: 2px 4px;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 8px;
    color: var(--ftc);
}
@media (hover: hover) and (pointer: fine) {
	#editLevel label:hover, #msgSetType label:hover, .label label:hover{
		color: var(--blue);
	}
}
#editLevel label:active, #msgSetType label:active, .label label:active{
    background-color: var(--blue2);
}
#editLevel label > div, #msgSetType label > div, .label label > div{
    display: flex;
    align-items: center;
    font-size: 16px;
}
.editBox #editLevel input, .editBox #msgSetType input, #frPageInfo .editBox .label label input, .label label input{
    width: auto;
    box-shadow: none;
    border: none;
	margin-right: 8px;
    cursor: pointer;
}
#frPageInfo .editBox .priceBox .tit{
    font-size: 22px;
}
#frPageInfo .editBox .priceBox .tit .pic{
    font-size: 20px;
    color: var(--ftc2);
    font-weight: bold;
}
#frPageInfo .editBox .priceBox .dire{
    font-size: 20px;
}
#frPageInfo .editBox .priceBox .price{
    color: var(--ftc2);
    padding: 0 6px;
    margin-bottom: 4px;
    font-size: 18px;
}
#frPageInfo .editBox .priceBox .price a{
	color: var(--yellow);
    font-size: 20px;
}
#frPageInfo .editBox .subtotal{
    font-size: 16px;
    color: var(--ftc2);
    padding: 8px 6px 4px 6px;
    text-align: right;	
    border-top: 1px solid var(--line);
}
#frPageInfo .editBox .subtotal a{
    color: var(--ftc);
    font-weight: bold;
}
#frPageInfo .editBox .amountBox{
    display: flex;
    align-items: center;
    padding: 6px;
    margin-bottom: 4px;
}
#frPageInfo .editBox .amountBox .btn{
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 6px;
	--r: 6px;
}
#frPageInfo .editBox .amountBox .btn:nth-child(1){
    border-radius: var(--r) 0 0 var(--r);
}
#frPageInfo .editBox .amountBox .btn:nth-child(3){
    border-radius: 0 var(--r) var(--r) 0;
}
#frPageInfo .editBox .amountBox .btn:before{
	--size: 18px;
	width: var(--size);
	height: var(--size);
	margin-right: 0;
}
#frPageInfo .editBox .amountBox input{
	width: 50px;
    padding: 4px 10px;
    border-radius: 0;
    margin: 0;
    text-align: center;
    border-left: none;
    border-right: none;
}
#frPageInfo .editBox .amountBox input::-webkit-outer-spin-button,
#frPageInfo .editBox .amountBox input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
#frPageInfo .editBox .amountBox input[type=number] {
	appearance: textfield;
	-moz-appearance: textfield;
}
#frPageInfo .editDelete{
    color: var(--red);
    box-shadow: 0 0 2px var(--red);
    padding: 4px 10px;
    margin-top: 12px;
    margin-bottom: 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
#frPageInfo .editDelete::before{
    filter: var(--svgcred);
    -moz-filter: var(--svgcred);
    -webkit-filter: var(--svgcred);
}
#frPageInfo .editDelete:hover{
    background-color: var(--red3);
}
#frPageInfo .editDelete:active{
    background-color: var(--red2);
}
#eventList{
    position: absolute;
    top: -2px;
    right: 8px;
    z-index: 986;
	padding-bottom: .75rem;
	display: none;
}
.eventListOpen #eventList{
	display: block;
}
#eventList > div{
    min-width: 11rem;
    background-color: var(--bkc3);
    border-radius: .5rem;
    border: 1px solid var(--line);
    box-shadow: 0 0 4px var(--line);
}
#eventList .eit{
    display: flex;
    align-items: center;
    font-size: 1rem;
    padding: .25rem .75rem;
    margin: .25rem;
    border-radius: .5rem;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	#eventList .eit:hover{
		background-color: var(--hovc);
	}
}
#eventList .eit:active{
	background-color: var(--actc);
}
#eventList .eit img{
    width: .9rem;
    height: .9rem;
	margin-right: .9rem;
}
.search{
    border: 1px solid var(--line);
    border-radius: 50px;
    overflow: hidden;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding: 2px;
}
.search input{
    outline: none;
    background-color: var(--bkc1);
    border: none;
    color: var(--ftc);
    font-size: 16px;
    padding: 5px 12px;
    font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
}
.search i{
    width: 20px;
    height: 20px;
    padding: 4px;
}
.search i::before{
    width: 16px;
    height: 16px;
    background-image: url(/img/magnifying-glass-solid.svg);
}
.hovtit{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.hovtit .hovtitdiv{
    z-index: 800;
    position: absolute;
    top: 42px;
	display: none;
}
.hovtit .hovtitdiv > div{
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    padding: 4px 6px;
    border-radius: 6px;
    background-color: var(--bkc3);
    border: 1px solid var(--line);
    box-shadow: 0 0 4px var(--line);
    margin: 8px;
    margin-top: 0;
    white-space: nowrap;
    font-style: normal;
}
@media (hover: hover) and (pointer: fine) {
	.hovtit:hover .hovtitdiv{
		display: block;
	}
}
#goalDonateOutBox {
	--ss: min(calc((var(--vw) * 100 - 18) / 2000), 0.25);
	height: calc(300px * var(--ss));
}
#goalDonateOutBox > div {
    transform: scale(var(--ss));
    width: 0px;
    height: 0px;
}
#goalDonate {
    border: none;
    width: 2000px;
    height: 300px;
}
#chartBox {
    width: fit-content;
    font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
}
#chartBox > div{
    position: relative;	
}
#chartBox .selfn{
    display: flex;
    justify-content: space-around;
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}
#chartBox .selfn .it{
	width: 100%;
    padding: 16px 0 26px 0;
    border-left: 1px solid var(--line);
    border-top: 4px solid transparent;
    border-bottom: 1px solid var(--line);
	background-color: var(--bkc2);
    cursor: pointer;
	color: var(--ftc);
    text-align: center;
}
@media (hover: hover) and (pointer: fine) {
	#chartBox .selfn .it:hover{
		background-color: var(--hovc);
	}
}
#chartBox .selfn .it:active{
	background-color: var(--actc);
}
#chartBox .selfn .it:first-child{
	border-left: none;
}
#chartBox .selfn .it.sel{
	background-color: var(--bkc1);
    border-top: 4px solid var(--sc1);
    border-bottom: 1px solid transparent;
    cursor: default;
}
#chartBox .selfn .it .tit{
    font-size: 12px;
    line-height: 12px;
	height: 22px;
	color: var(--ftc2);
}
#chartBox .selfn .it .num{
    font-size: 24px;
    line-height: 26px;
	height: 26px;
	color: var(--ftc);
    display: flex;
    align-items: center;
    justify-content: center;
}
#chartBox .selfn .it .inf{
    font-size: 12px;
    line-height: 18px;
	height: 16px;
	margin-top: 10px;
	color: var(--ftc2);
}
#chartBox .svgbox {
    border-radius: 0 0 6px 6px;
    border: 1px solid var(--line);
    border-top: none;
    min-height: 223px;
}
#chartBox .toolshow{
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: center;
	pointer-events: none;
}
#chartBox .toolshow > div{
    border: 1px solid var(--line);
    padding: 10px 14px;
    border-radius: 4px;
    position: fixed;
    z-index: 980;
    min-width: 120px;
    font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
    background-color: var(--bkc2);
    text-align: left;
}
#chartBox .toolshow > div .tit{
	color: var(--ftc2);
    font-size: 14px;
    line-height: 14px;
	margin-bottom: 4px;
}
#chartBox .toolshow > div .inf{
	color: var(--sc1);
    font-size: 20px;
    line-height: 20px;
}
#chartBox .toolshow > div .non{
	color: var(--ftc2);
    font-size: 12px;
    line-height: 20px;
}
#chartBox .svgbox svg .ylabel, #chartBox .svgbox svg .dbar{
	fill: var(--ftc2);
}
#chartBox .svgbox svg .ylabel text, #chartBox .svgbox svg .dbar text{
    font-size: 12px;
    font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
    cursor: default;
}
#chartBox .svgbox svg .ylabel line, #chartBox .svgbox svg .dbar line{
	stroke: var(--line);
	stroke-width: 0.5px;
}
#chartBox .svgbox svg .chat path{
	stroke-width: 2px;
	fill: none;
	stroke: var(--sc1);
    clip-path: url(#chatclip);
	stroke-linejoin: round;
}
#chartBox .svgbox svg .chat path.f{
    stroke: var(--line);
}
#chartBox .svgbox svg .chat path.b{
	fill: var(--sc2);
	stroke: transparent;
}
#chartBox .svgbox svg .chat path.n{
	stroke: transparent;
    fill: url(#patten_none);
}
#chartBox .svgbox svg .mouse line{
	stroke: var(--line);
	stroke-width: 0.5px;
    clip-path: url(#mouseclip);
}
#chartBox .svgbox svg .mouse circle{
	stroke: var(--bkc1);
	stroke-width: 2px;
	fill: var(--sc1);
}
#chartBox .livebar{
    position: absolute;
    left: 10px;
    bottom: 38px;
    height: 30px;
}
#chartBox .livebar .it{
    height: 18px;
    width: 18px;
    line-height: 18px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: var(--bkc2);
    border: 1px solid var(--line);
    color: var(--ftc);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
	font-size: 12px;
}
@media (hover: hover) and (pointer: fine) {
	#chartBox .livebar .it:hover{
		background-color: var(--hovc);
	}
}
#chartBox .livebar .it.none{
	background-color: transparent;
	border: 1px solid transparent;
}
#chartBox .livebar .it .listout{
    position: relative;
    width: fit-content;
}
#chartBox .livebar .it .list{
	display: none;
    position: relative;
    z-index: 1;
    width: fit-content;
    max-height: 200px;
    overflow: overlay;
    padding: 0 6px;
    margin: 4px 8px;
	border: 1px solid var(--line);
    border-radius: 4px;
	background-color: var(--bkc2);
}
@media (hover: hover) and (pointer: fine) {
	#chartBox .livebar .it:hover .list{
		display: inline-block;
		cursor: default;
	}
	#chartBox .livebar .it:hover .tIcon:before{
		filter: var(--svgc2);	
		-moz-filter: var(--svgc2);
		-webkit-filter: var(--svgc2);
	}
	#chartBox .livebar .it:hover .list .count{
		color: var(--ftc2);
		padding: 6px 8px;
		font-size: 12px;
		text-align: left;
	}
	#chartBox .livebar .it:hover .list .game {
		width: 260px;
		border-top: 1px solid var(--line);
		display: flex;
		padding: 8px;
		font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
		text-align: left;
	}
	#chartBox .livebar .it:hover .list .game .img{
		width: 60px;
		height: 80px;
		margin-right: 12px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url('https://static-cdn.jtvnw.net/ttv-static/404_boxart-144x192.jpg');
	}
	#chartBox .livebar .it:hover .list .game .inf{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	#chartBox .livebar .it:hover .list .game .tit, .game .gam{
		color: var(--ftc);
		font-size: 14px;
		margin-bottom: 4px;
		width: 188px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	#chartBox .livebar .it:hover .list .game .gam{
		color: var(--ftc2);
		font-size: 12px;
	}
	#chartBox .livebar .it:hover .list .game .tim{
		color: var(--ftc2);
		font-size: 12px;
	}
}
#chartRange {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 200px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}
#frPageInfo .chartPgList > div:nth-child(2){
    position: relative;
}
#frPageInfo .chartPgList > div:nth-child(2) .list{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 986;
    padding-bottom: 10px;
    display: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#frPageInfo .chartPgList > div:nth-child(2) .list > div{
    min-width: 218px;
    background-color: var(--bkc3);
    border-radius: 6px;
    padding: 4px 0;
    border: 1px solid var(--line);
    box-shadow: 0 0 4px var(--line);
}
#frPageInfo .chartPgList > div:nth-child(2) .list > div .it{
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 10px 20px;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	#frPageInfo .chartPgList > div:nth-child(2) .list > div .it:hover{
		background-color: var(--hovc);
	}
}
#frPageInfo .chartPgList > div:nth-child(2) .list > div .it:active{
	background-color: var(--actc);
}
.eventListOpen #frPageInfo .chartPgList > div:nth-child(2) .list {
    display: block;
}
@media (hover: hover) and (pointer: fine) {
	#chartRange:hover{
		background-color: var(--hovc);
	}
}
#chartRange:active{
	background-color: var(--actc);
}
#chartRange .range{
	color: var(--ftc2);
	font-size: 12px;
    line-height: 14px;
}
#chartRange .name{
	color: var(--ftc);
	margin-top: 6px;
	font-size: 14px;
    line-height: 16px;
}
#frPageInfo .itBox .device{
    position: relative;
	margin-right: 10px;
}
#frPageInfo .itBox .device > div{
	width: 40px;
	height: 40px;
    padding: 8px;
}
#frPageInfo .itBox .device img{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: var(--svgc);
    -moz-filter: var(--svgc);
    -webkit-filter: var(--svgc);
    transform: translateZ(0);
    perspective: 1000;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}
#frPageInfo .itBox .device > div:nth-child(2){
	width: 20px;
	height: 20px;
    position: absolute;
    right: -4px;
    bottom: 0px;
    padding: 4px;
    border-radius: 24px;
    background-color: var(--bkc2);
}
#frPageInfo .session > div > span{
    display: inline-block;
}
#frPageInfo .session > div > span:nth-child(2){
    width: 100%;
}
#frPageInfo .session > div:nth-child(1){
    max-width: calc(100% - 40px);
    display: flex;
    align-items: center;
    overflow: hidden;
}
#frPageInfo .session .ip, #frPageInfo .session .inf{
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
    white-space: normal;
}
#frPageInfo .donorGoalColorType{
    display: flex;
    align-items: center;
}
#frPageInfo .donorGoalColorType .cit{
	width: calc(100% - 174px);
}
#frPageInfo .donorGoalColorType .cit > div{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
#frPageInfo .donorGoalColorType .cit > div > div{
    min-width: 24px;
    height: 24px;
    border-radius: 24px;
    background-color: var(--c);
    box-shadow: 0 0 6px 0 #000;
    cursor: pointer;
    margin: 6px 20px;
    margin-left: 0px;
}
#frPageInfo .copybox{
	width: fit-content;
    position: relative;
}
#frPageInfo .copybox i{
    position: absolute;
    top: 5px;
    right: 1px;
    height: 30px;
    width: 30px;
    background-color: #000;
    --svgc: invert(100%);
    border-radius: 0 6px 6px 0;
    cursor: pointer;
}
#frPageInfo .donorGoalColorType .cit .t1{--c: #2196f3;}
#frPageInfo .donorGoalColorType .cit .t2{--c: #8b64ce;}
#frPageInfo .donorGoalColorType .cit .t3{--c: #ef5d8d;}
#frPageInfo .donorGoalColorType .cit .t4{--c: #ff764d;}
#frPageInfo .donorGoalColorType .cit .t5{--c: #e6cf00;}
#frPageInfo .donorGoalColorType .cit .t6{--c: #4caf50;}
#frPageInfo .homeBox{
	padding-bottom: 32px;
}
#frPageInfo .homeBox h1{
	font-family: 'Dancing Script', monospace;
	text-align: center;
	font-size: 48px;
    cursor: default;
    user-select: none;
}
#frPageInfo .homeBox .logoRow{
    text-align: center;
    margin-bottom: 32px;
}
#frPageInfo .homeBox .logoRow img{
	width: min(100%, 400px);
}
#frPageInfo .homeBox .btnRow{
    text-align: center;
	margin-top: 56px;
}
#frPageInfo .homeBox .btnRow .btn{
    padding: 6px 24px;
    border: 1px solid var(--line);
	font-size: 20px;
	color: var(--ftc2);
    margin: 12px;
}
#frPageInfo .homeBox .btnRow .btn:nth-child(1){
	color: #000;
	background-color: #03a9f4bf;
}
#frPageInfo .homeBox .maxLimit{
    margin: auto;
    max-width: 1300px;
}
#frPageInfo .homeBox:nth-child(1){
	height: max(80vh, 420px);
	display: flex;
    align-items: center;
    justify-content: center;
}
#frPageInfo .homeBox:nth-child(odd){
	background-color:#0000000d;
}
html[dark] #frPageInfo .homeBox:nth-child(odd){
	background-color:#ffffff0d;
}
#frPageInfo .homeBox .maxLimit .title{
    font-size: 24px;
    line-height: unset;
    flex-direction: column;
    font-weight: 400;
}
#frPageInfo .homeBox .maxLimit .title img{
    height: 48px;
    width: 48px;
	--svgc: var(--svgcblue);
	margin: 0;
    margin-bottom: 16px;
}
#frPageInfo .homeBox .hImgB{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,350px),1fr));
}
#frPageInfo .homeBox .hImgB > div{
	padding: 8px;
}
#frPageInfo .homeBox .hImgB > div > div{
    border-radius: 16px;
    padding: 12px 0;
	background-color:#00000012;
}
html[dark] #frPageInfo .homeBox .hImgB > div > div{
	background-color:#ffffff0d;
}
#frPageInfo .homeBox .hImgB .imgBox{
	border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
    position: relative;
    margin: 12px;
    margin-bottom: 0;
    background-color: var(--bkc1);
}
#frPageInfo .homeBox .hImgB .imgBox > .text{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 90%;
    height: 100%;
    margin: auto;
    font-size: 20px;
    line-height: 32px;
    cursor: default;
    user-select: none;
}
#frPageInfo .homeBox .hImgB .imgBox > .img{
    background-size: cover;
    background-position: center;
    cursor: pointer;
}
#frPageInfo .homeBox .hImgB .imgBox1 > .img{
	width: 100%;
	height: 100%;
}
#frPageInfo .homeBox .hImgB .imgBox2 > .img{
    position: absolute;
	width: calc(50% - 1px);
	height: 100%;
}
#frPageInfo .homeBox .hImgB .imgBox2 > .img:nth-child(2){
	right: 0;
}
#frPageInfo .homeBox .hImgB .imgBox3 > .img{
    position: absolute;
	width: calc(50% - 1px);
	height: calc(50% - 1px);
	left: calc(50% + 2px);
}
#frPageInfo .homeBox .hImgB .imgBox3 > .img:nth-child(1){
	height: 100%;
	left: 0;
}
#frPageInfo .homeBox .hImgB .imgBox3 > .img:nth-child(3){
	bottom: 0;
}
#frPageInfo .homeBox .hImgB .imgBox4 > .img{
    position: absolute;
	width: calc(50% - 1px);
	height: calc(50% - 1px);
	left: calc(50% + 2px);
}
#frPageInfo .homeBox .hImgB .imgBox4 > .img:nth-child(1), #frPageInfo .homeBox .hImgB .imgBox4 > .img:nth-child(3){
	left: 0;
}
#frPageInfo .homeBox .hImgB .imgBox4 > .img:nth-child(3), #frPageInfo .homeBox .hImgB .imgBox4 > .img:nth-child(4){
	bottom: 0;
}
#frPageInfo .ext img{
    width: min(100% - 16px, 600px);
    box-shadow: 0 0 4px var(--line);
    border-radius: 12px;
}
#frPageInfo .ext a{
    color: var(--blue);
    text-decoration: none;
    font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
}
@media (hover: hover) and (pointer: fine) {
	#frPageInfo .ext a:hover{
		text-decoration: underline;
	}
}
#frPageInfo .homeFlr{
    border: none;
    padding: 20px 12px;
}
#frPageInfo .homeFlr .twitter{
	--svgc4: invert(64%) sepia(78%) saturate(4772%) hue-rotate(179deg) brightness(99%) contrast(89%);
}
#frPageInfo .homeFlr .twitch{
	--svgc4: invert(46%) sepia(95%) saturate(5277%) hue-rotate(249deg) brightness(100%) contrast(101%);
}
html[dark] #frPageInfo .homeFlr .twitch{
	--svgc4: invert(47%) sepia(59%) saturate(2644%) hue-rotate(230deg) brightness(104%) contrast(109%);
}
#frPageInfo .homeFlr > div{
	margin: auto;
}
#frPageInfo .homeFlr > div > div{
	display: flex;
    justify-content: center;
}
#frPageInfo .homeFlr > div > div:nth-child(1) a{
    margin: 0 16px;
}
#frPageInfo .homeFlr > div > div:nth-child(1) a::before{
    width: 28px;
    height: 28px;
    filter: var(--svgc3);
    -moz-filter: var(--svgc3);
    -webkit-filter: var(--svgc3);
}
@media (hover: hover) and (pointer: fine) {
	#frPageInfo .homeFlr > div > div:nth-child(1) a:hover::before{
		filter: var(--svgc4);
		-moz-filter: var(--svgc4);
		-webkit-filter: var(--svgc4);
	}
}
#frPageInfo .homeFlr > div > div:nth-child(2){
    padding: 18px 0 0 0;
}
#frPageInfo #homeImgBoxView{
    width: 100vw;
    height: 100vh;
    background-color: rgb(0 0 0 / 70%);
    position: fixed;
    top: 0;
    left: 0;
	padding: 0;
}
#homeImgBoxView .imgView, #homeImgBoxView .btnBar{
    position: absolute;
    top: var(--brhig);
	left: 0;
	width: 100%;
    height: calc(100% - var(--brhig));
}
#homeImgBoxView .imgView{
	display: flex;
    overflow: hidden;
}
#homeImgBoxView .imgView > div{
    width: 100vw;
	min-width: 100vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#homeImgBoxView .imgView > div img{
	max-width: 100%;
	max-height: 100%;
}
#homeImgBoxView .btnBar{
    padding: 16px;
    width: calc(100% - 32px);
    height: calc(100% - var(--brhig) - 32px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#homeImgBoxView .btnBar .icon{
	border-radius: 50px;
    background-color: rgb(0 0 0 / 70%);
	--svgc: invert(100%);
    box-shadow: 0 0 4px gray;
}
@media (hover: hover) and (pointer: fine) {
	#homeImgBoxView .btnBar .icon:hover{
		background-color: #0000004d;
	}
}
#homeImgBoxView .btnBar .close{
    position: absolute;
    top: 16px;
}
#homeImgBoxView .btnBar .left{
    position: absolute;
    left: 16px;
}
#homeImgBoxView .btnBar .right{
    position: absolute;
    right: 16px;
}
#frPageInfo .stBoxList.cards{
	display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
	margin: 8px 0;
}
#frPageInfo .stBoxList .enCards{
    background-color: var(--bkc2);
    border-radius: 8px;
    padding: 4px 8px;
    margin: 6px;
    border: 1px solid var(--line);
    min-width: fit-content;
    position: relative;
}
#frPageInfo .stBoxList .enCards.dis{
    opacity: 0.5;
	pointer-events: none;
}
#frPageInfo .stBoxList .enCards > div:nth-child(1){
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
}
#frPageInfo .stBoxList .enCards > div:nth-child(1) .title{
	margin-right: 8px;
    font-size: 20px;
    white-space: nowrap;
}
#frPageInfo .stBoxList .enCards > div:nth-child(1) .title img{
	margin-left: 4px;
}
#frPageInfo .stBoxList .enCards > div:nth-child(2){
    padding: 0px 10px;
    font-size: 18px;
}
#frPageInfo .stBoxList .enCards > a{
    position: absolute;
    bottom: 8px;
}
.md-block{
	cursor: default;
}
.md-block h2{
    border-top: 1px solid var(--line);
    padding-block-start: 0.83em;
    margin-block-start: 120px;
}
.md-block h3{
	margin-block-start: 2em;
}
.md-block a[href], a.url[href]{
	color: var(--blue);
    text-decoration: none;
}
.md-block a[href]:hover, a.url[href]:hover{
    text-decoration: underline;
}
@media all and (max-width: 800px) {
	#frMlist{
		position: fixed;
		left: calc(calc(-1 * var(--wid)) - 1px);
		transition: left 0.5s;
		transform: translateZ(0);
		perspective: 1000;
		backface-visibility: hidden;
		-webkit-transition: left 0.5s;
		-webkit-transform: translateZ(0);
		-webkit-perspective: 1000;
		-webkit-backface-visibility: hidden;
		z-index: 985;
	}
	#frlogo{
		height: 30px;
		width: 173px;
	}
	#frMlistBk{
		z-index: 980;
	}
	.close #frMlist{
		left: 0;
	}
	.close #frMlistBk{
		opacity: 1;
		pointer-events: all;
	}
	#moreMenu .it, #moreMenu .back{
		padding: 4px 10px;
	}
	#moreMenu .user{
		padding: 12px 16px;
	}
	#moreMenu .user .display{
		font-size: 14px;
	}
	#frPageInfo .users .it .name{
		font-size: 12px;
	}
	#frPageInfo .users .it a, #frPageInfo .users .it img{
		width: 55px;
		height: 55px;
		top: 0px;
		left: 0px;
	}
	#frPageInfo > div{
		padding: 8px 10px;
	}
	.circle-loader-box{
		zoom: 1;
	}
	#frPageInfo .title{
		font-size: 20px;
	}
	#frPageInfo .title span{
		font-size: 18px;
	}
	#frPageInfo .title img{
		height: 18px;
		width: 18px;
		margin-left: 6px;
		margin-right: 20px;
	}
	#frPageInfo .direction{
		font-size: 14px;
	}
	.btn{
		font-size: 14px;
	}
	.itBox{
		padding: 6px 10px;
	}
	.itBox .tit, .itBox .inf{
		padding-left: 2px;
	}
	.itBox .tit{
		font-size: 18px;
	}
	.itBox .inf{
		font-size: 14px;
	}
	.scrollbar::-webkit-scrollbar {
		width: 0px;
		height: 0px;
	}
	.tabar .m, .tab .mb {
		display: none;
	}
	.tabar .icon:hover > div{
		display: none;
	}
	#frPageInfo .homeBox{
		padding: 4px 0;
	}
	#frPageInfo .homeBox .hImgB > div{
		padding: 8px 0;
	}
	#frPageInfo .homeBox .hImgB > div > div{
		border-radius: 0;
	}
	#frPageInfo .homeBox .hImgB .imgBox{
		margin: 12px 6px;
		border-radius: 8px;
	}
}
@media all and (max-width: 500px) {
	#chartRange, #chartBox .livebar{
		display: none;
	}
}
#frPageInfo #loginBox, #frPageInfo #plansBox{
    border-bottom: none;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#frPageInfo #loginBox > div > div > img{
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
#frPageInfo #loginBox .loginMenu{
    min-height: 266px;
    min-width: min(300px, calc(100vw - 40px));
    max-width: min(400px, calc(100vw - 40px));
    background-color: var(--bkc2);
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 32px;
    border: 1px solid var(--line);
}
#frPageInfo #loginBox .loginBtn{
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin: 20px 0;
    justify-content: center;
	font-size: 14px;
    cursor: pointer;
    border-radius: 6px;
	color: #ffffff;
    -webkit-box-shadow: 0 0 8px #00000080;
    box-shadow: 0 0 8px #00000080;
    border: 1px solid var(--line);
}
#frPageInfo #loginBox .loginBtn:hover{
    -webkit-box-shadow: inset 0 0 8px #00000080;
    box-shadow: inset 0 0 8px #00000080;
}
#frPageInfo #loginBox .loginBtn .tIcon{
	margin-right: 12px;
	--svgc: invert(100%);
}
#frPageInfo #loginBox .loginMenu .centerBar{
	margin: 16px 0 20px 0;
}
#frPageInfo #loginBox .loginMenu .centerBar .btn{
    box-shadow: 0 0 4px var(--line);
    border-radius: 100px;
    padding: 6px 20px;
    width: -webkit-fill-available;
    text-align: center;
    border: 1px solid var(--line);
}
#frPageInfo #loginBox .loginMenu .list{
    min-height: 150px;
    max-height: max(calc(50vh - 116px), 150px);
}
#frPageInfo #loginBox .loginMenu .uItem{
    display: flex;
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--line);
    background-color: var(--bkc1);
    margin-bottom: 10px;
    padding: 6px 16px;
    cursor: pointer;
}
#frPageInfo #loginBox .loginMenu .uItem:hover{
    background-color: var(--hovc);
}
#frPageInfo #loginBox .loginMenu .uItem:active{
    background-color: var(--actc);
}
#frPageInfo #loginBox .loginMenu .uItem .profile{
    --size: 36px;
    width: var(--size);
    height: var(--size);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
}
#frPageInfo #loginBox .loginMenu .uItem .profile img{
    height: 100%;
    border-radius: var(--size);
    box-shadow: 0 0 4px #9e9e9e;
}
#frPageInfo #loginBox .loginMenu .uItem .na> div:nth-child(1) {
    font-size: 16px;
}
#frPageInfo #loginBox .loginMenu .uItem .na> div:nth-child(2) {
    font-size: 14px;
    color: var(--ftc2);
}
#frPageInfo #plansBox{
	background-color: #ffffff0d;
    border-bottom: 1px solid var(--line);
}
#accountCard{
    background-color: var(--bkc2);
    border-radius: 6px;
    padding: 2px 12px;
    margin-top: 8px;
    border: 1px solid var(--line);
}
#accountCard > div:nth-child(1){
	display: flex;
    align-items: center;
}
#accountCard > div:nth-child(1) > div:nth-child(1){
    display: flex;
    align-items: center;
    justify-content: center;
	padding: 8px 16px 8px 4px;
}
#accountCard > div:nth-child(1) > div:nth-child(1) img{
	--size: 60px;
	width: var(--size);
	height: var(--size);
	border-radius: var(--size);
}
#accountCard > div:nth-child(1) > div:nth-child(2) > div:nth-child(1){
    font-size: 20px;
	margin-bottom: 4px;
}
#accountCard > div:nth-child(1) > div:nth-child(2) > div:nth-child(2){
    font-size: 15px;
    color: var(--ftc2);
}
#accountCard > div:nth-child(2){
	border-top: 1px solid var(--line);
    padding: 0 4px;
    margin-top: 8px;
}
#accountCard input{
    width: calc(100% - 22px - 50px);
    outline: none;
    border-radius: 6px;
    font-size: 16px;
    margin: 4px 0;
	padding: 6px 10px;
	border: 1px solid var(--line);
    font-family: "Noto Sans Mono", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", monospace;
    background-color: var(--bkc1);
    color: var(--ftc);
}
#accountCard input[disabled] {
    background-color: var(--bkc3);
    color: var(--ftc2);
	opacity: 1;
}
#accountCard .btn.bic.eye, #accountCard .btn.bic.eye-slash{
	margin-left: 12px;
}
#accountCard .btn.bic.eye::before, #accountCard .btn.bic.eye-slash::before{
    margin-right: 0;
	--size: 18px;
	width: var(--size);
	height: var(--size);
}
#frPageInfo .itBoxTab .itBox{
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
}
#frPageInfo .itBoxTab .itBox .device > div:nth-child(2){
    background-color: var(--bkc1);
}
.edit.up::before{
    background-image: url(/img/arrow-up-solid.svg);
}
.edit.down::before{
    background-image: url(/img/arrow-down-solid.svg);
}
.edit.dollar::before{
    background-image: url(/img/dollar-sign-solid.svg);
}
.edit.dis{
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}
.grabbing *{
    cursor: grabbing !important;
}
.planTime{
    display: flex;
    padding: 32px 0;
    justify-content: center;
}
.planTime > div{
	--r: 6px;
    border: 1px solid var(--line);
    cursor: pointer;
    width: 160px;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	color: var(--ftc2);
	font-size: 15px;
}
@media (max-width: 340px){
	.planTime > div{
		width: calc(50vw - 10px);
	}
}
.planTime > div:nth-child(1){
    border-radius: var(--r) 0 0 var(--r);
	border-right: 1px solid transparent;
}
.planTime > div:nth-child(2){
    border-radius: 0 var(--r) var(--r) 0;
	border-left: 1px solid transparent;
}
.planTime > div:nth-child(2) > div{
	text-align: center;
}
.planTime > div:nth-child(2) > div > div:nth-child(2){
	font-size: 12px;
}
.planTime > div:hover{
    background-color: var(--hovc);
}
.planTime > div:active{
    background-color: var(--actc);
}
.planTime > div.sel{
	color: var(--blue);
    border: 1px solid var(--blue);
    background-color: var(--blue2);
}
.planList{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.planList .planCard{
	width: 200px;
    border: 1px solid var(--line);
    box-shadow: 0 0 4px var(--line);
	border-radius: 6px;
	margin: 8px;
    padding: 16px 24px;
    text-align: center;
	background-color: var(--bkc2);
}
@media (max-width: 550px){
	.planList .planCard{
		width: 100%;
	}
}
.planList .planCard .tit{
    font-size: 28px;
    margin-bottom: 14px;
    font-weight: bold;
}
.planList .planCard .infDiv{
	height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.planList .planCard .infDiv > .monthly, .planList .planCard .infDiv > .annual{
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.planList .planCard .infDiv .selBtn{
    font-size: 14px;
    border: 1px solid var(--line);
    padding: 5px 14px;
    margin: 14px 0;
}
.planList .planCard .inf{
    font-size: 14px;
    color: var(--ftc2);
    margin: 10px 0;
    line-height: 16px;
}
.planList .planCard .price, .planExtra .price{
    font-size: 16px;
    color: var(--ftc2);
}
.planList .planCard .price a, .planExtra .price a{
    font-size: 22px;
	color: var(--ftc);
}
.planList .planCard .price.s, .planExtra .price.s{
    font-size: 14px;
    position: relative;
    line-height: 16px;
}
.planList .planCard .price.s a, .planExtra .price.s a{
    font-size: 14px;
    color: var(--ftc2);
}
.planList .planCard .price.s > div{
    border-top: 1px solid var(--ftc2);
    position: absolute;
    width: 100%;
    top: 11px;
}
.planList .planCard .annual_save{
    font-size: 14px;
	color: var(--green);
    margin: 4px 0;
    line-height: 16px;
    margin: 10px 0;
}
.planList .planCard .its{
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.planList .planCard .its .it{
    display: flex;
    justify-content: space-between;
    margin: 6px 0px;
    color: var(--ftc2);
}
.planList .planCard .its .it .lv1{color: var(--red); font-weight: bold;}
.planList .planCard .its .it .lv2{color: var(--yellow); font-weight: bold;}
.planList .planCard .its .it .lv3{color: var(--green); font-weight: bold;}
.planExtra{
	display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
	justify-items: center;
}
.planExtra > div{
    width: calc(100% - 60px);
    margin: 6px;
    padding: 14px 24px;
    border-radius: 6px;
    border: 1px solid var(--line);
    box-shadow: 0 0 4px var(--line);
    background-color: var(--bkc2);
}
.planExtra > div > div:nth-child(1){
    display: flex;
    justify-content: space-between;
	margin-bottom: 8px;
	font-size: 20px;
}
.planExtra > div > div:nth-child(1) > a:nth-child(2){
	color: var(--green);
	font-weight: bold;
}
.planExtra .price a{
	font-size: 18px;
}

.itBox-warp{
    flex-wrap: nowrap;
}
.itBox-warp .tit, .itBox-warp .inf{
    -webkit-line-clamp: none;
    line-clamp: none;
}

.subgift .ic , .cheer .ic{
    background-size: contain;
    background-position: center;
    margin: 0 .5rem;
    width: 1.125rem;
    height: 1.125rem;
}
.cheer1{color:#979797;} .cheer1 .ic{background-image: url(https://d3aqoihi2n8ty8.cloudfront.net/actions/cheer/dark/static/1/1.png);}
.cheer100{color:#9c3ee8;} .cheer100 .ic{background-image: url(https://d3aqoihi2n8ty8.cloudfront.net/actions/cheer/dark/static/100/1.png);}
.cheer1000{color:#1db2a5;} .cheer1000 .ic{background-image: url(https://d3aqoihi2n8ty8.cloudfront.net/actions/cheer/dark/static/1000/1.png);}
.cheer5000{color:#0099fe;} .cheer5000 .ic{background-image: url(https://d3aqoihi2n8ty8.cloudfront.net/actions/cheer/dark/static/5000/1.png);}
.cheer10000{color:#f43021;} .cheer10000 .ic{background-image: url(https://d3aqoihi2n8ty8.cloudfront.net/actions/cheer/dark/static/10000/1.png);}
.cheer100000{color:#f3a71a;} .cheer100000 .ic{background-image: url(https://d3aqoihi2n8ty8.cloudfront.net/actions/cheer/dark/static/100000/1.png);}

.queue-box, .checkin-box{
    background-color: var(--bkc2);
    border: 1px solid var(--line);
    border-radius: .5rem;
    padding: .25rem .75rem;
}
#frPageInfo .queue-box .loading{
    height: 180px;
}
.queue-box .itBox{
    background-color: var(--bkc1);
}
.checkin-box .it{
    width: 100%;
    align-items: center;
    background-color: var(--bkc1);
    border-radius: 8px;
    padding: 6px 8px;
    margin: .5rem;
    border: 1px solid var(--line);
    position: relative;
    transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
}
.checkin-box .it > i{
    --size: 3rem;
    position: absolute;
    top: calc(50% - var(--size) / 2);
    left: calc(50% - var(--size) / 2);
}
.checkin-box .it > i::before{
    content: "";
    position: absolute;
    pointer-events: none;
    width: var(--size);
    height: var(--size);
    background-image: url(/img/circle-check-regular.svg);
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: var(--svgcgreen);
    -moz-filter: var(--svgcgreen);
    -webkit-filter: var(--svgcgreen); 
}
@media all and (max-width: 1000px) {
    .checkin-box .it > i{
        --size: 2.5rem;
    }
    .checkin-box{
        padding: .0625rem .1875rem;
    }
    .checkin-box > div.d-flex.justify-content-between{
        padding: 0 .75rem;
    }
    .checkin-box .it{
        margin: .125rem;
    }
}
@media all and (max-width: 850px) {
    .checkin-box .it > i{
        --size: 2rem;
    }
}
@media all and (max-width: 700px) {
    .checkin-box{
        padding: 0;
    }
    .checkin-box .it{
        margin: 0;
        border-radius: 0;
    }
    .checkin-box .it > i{
        --size: 1.5rem;
    }
    .checkin-box .it > div:first-child{
        font-size: 12px;
    }
}

.options_list{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 986;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
.options_list > div{
    min-width: 10rem;
    background-color: var(--bkc3);
    border-radius: .5rem;
    border: 1px solid var(--line);
    box-shadow: 0 0 4px var(--line);
}
.options_list > div > div{
    display: flex;
    align-items: center;
    font-size: 1rem;
    padding: .25rem .75rem;
    margin: .25rem;
    border-radius: .5rem;
    cursor: pointer;
}
.options_list > div > div.red{
    color: var(--red);
    --svgc: var(--svgcred);
}
@media (hover: hover) and (pointer: fine) {
	.options_list > div > div:hover{
		background-color: var(--hovc);
	}
}
.options_list > div > div:active{
	background-color: var(--actc);
}
.options_list > div > div img{
    width: .9rem;
    height: .9rem;
	margin-right: .9rem;
}

.d-flex{display: flex;}
.d-flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.zoom-0-5{zoom:.5;}
.zoom-0-6{zoom:.6;}
.zoom-0-7{zoom:.7;}
.zoom-0-8{zoom:.8;}
.zoom-0-9{zoom:.9;}

.text-overflow-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    box-orient: vertical;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ftc);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bkc1);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--line);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-sizing: border-box;
}
.form-control:focus {
    color: var(--ftc);
    background-color: var(--bkc1);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ftc);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bkc1);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--line);
    border-radius: var(--bs-border-radius);
    transition: border-color .15sease-in-out, box-shadow .15sease-in-out;
    -webkit-transition: border-color .15sease-in-out, box-shadow .15sease-in-out;
    box-sizing: border-box;
}
.form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.form-control-color {
    width: 3rem;
    height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));
    padding: .06rem .25rem;
}
.form-control-color:not(:disabled):not([readonly]) {
    cursor: pointer;
}
.form-control-color::-moz-color-swatch {
    border: 0!important;
    border-radius: var(--bs-border-radius)
}
.form-control-color::-webkit-color-swatch {
    border: 0!important;
    border-radius: var(--bs-border-radius)
}
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.5;
}
.input-group>.form-control, .input-group>.form-floating, .input-group>.form-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.input-group .btn {
    position: relative;
    z-index: 2;
    border: var(--bs-border-width) solid var(--line);
    border-radius: var(--bs-border-radius);
}
.input-group>.form-control:focus, .input-group>.form-floating:focus-within, .input-group>.form-select:focus {
    z-index: 5;
}
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control, .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select, .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group-text {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ftc);
    text-align: center;
    white-space: nowrap;
    background-color: var(--bkc2);
    border: var(--bs-border-width) solid var(--line);
    border-radius: var(--bs-border-radius);
}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: calc(var(--bs-border-width)* -1);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.form-check *, .form-check ::after, .form-check ::before {
    box-sizing: border-box;
}
.form-check {
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .75rem;
}
.form-check-input {
    --bs-form-check-bg: var(--bkc1);
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .125rem;
    margin-right: 0;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-form-check-bg);
    background-image: var(--bs-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--bs-border-width) solid var(--line);
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
    cursor: pointer;
}
.form-check .form-check-label{
    padding-left: .75rem;
    cursor: pointer;
}
.form-check .form-check-input {
    float: left;
    margin-left: -1.5em;
}
.form-check-input[type=radio] {
    border-radius: 50%;
}
.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.col-1{flex: 0 0 auto; width: calc(100% / 12 * 1);}
.col-2{flex: 0 0 auto; width: calc(100% / 12 * 2);}
.col-3{flex: 0 0 auto; width: calc(100% / 12 * 3);}
.col-4{flex: 0 0 auto; width: calc(100% / 12 * 4);}
.col-5{flex: 0 0 auto; width: calc(100% / 12 * 5);}
.col-6{flex: 0 0 auto; width: calc(100% / 12 * 6);}
.col-7{flex: 0 0 auto; width: calc(100% / 12 * 7);}
.col-8{flex: 0 0 auto; width: calc(100% / 12 * 8);}
.col-9{flex: 0 0 auto; width: calc(100% / 12 * 9);}
.col-10{flex: 0 0 auto; width: calc(100% / 12 * 10);}
.col-11{flex: 0 0 auto; width: calc(100% / 12 * 11);}
.col-12{flex: 0 0 auto; width: calc(100% / 12 * 12);}

.text-start{text-align: left !important;}
.text-center{text-align: center !important;}
.text-end{text-align: right !important;}
.justify-content-center{justify-content: center !important;}
.justify-content-start{justify-content: flex-start !important;}
.justify-content-end{justify-content: flex-end !important;}
.justify-content-between{justify-content: space-between !important;}
.justify-content-evenly{justify-content: space-evenly !important;}
.align-items-center{align-items:center !important;}
.align-items-start{align-items:flex-start !important;}
.align-items-end{align-items:flex-end !important;}
.align-items-stretch{align-items:stretch !important;}
.align-items-baseline{align-items:baseline !important;}
.flex-wrap{flex-wrap:wrap !important;}
.flex-nowrap{flex-wrap:nowrap !important;}
.m-0{margin: 0 !important;}
.m-1{margin: .25rem !important;}
.m-2{margin: .5rem !important;}
.m-3{margin: 1rem !important;}
.m-4{margin: 1.5rem !important;}
.m-5{margin: 3rem !important;}
.p-0{padding: 0 !important;}
.p-1{padding: .25rem !important;}
.p-2{padding: .5rem !important;}
.p-3{padding: 1rem !important;}
.p-4{padding: 1.5rem !important;}
.p-5{padding: 3rem !important;}
.opacity-0{opacity:0 !important;}
.opacity-25{opacity:.25 !important;}
.opacity-50{opacity:.5 !important;}
.opacity-75{opacity:.75 !important;}
.opacity-100{opacity:1 !important;}

.setting-box{
    padding: .5rem .75rem;
    margin: .5rem -.5rem;
    position: relative;
}
.setting-box.dis .itBox{
    opacity: .3;
}
.setting-box.dis .tabDisabled{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	color: var(--ftc);
    padding: .5rem .75rem;
    text-align: center;
    border-radius: .5rem;
    background-color: rgb(0 0 0 / 25%);
}

#frPageInfo .chatlogs tr:not(.nohover) td{
    --size: 1rem;
    font-size: var(--size);
    line-height: calc(var(--size) * 1.5);
    padding: .25rem .5rem;
    border-bottom: none;
}
#frPageInfo .chatlogs img.twitchEmote{
    margin: -.7rem 0;
    --size: 2rem;
    width: var(--size);
    /* height: var(--size); */
}
#frPageInfo .chatlogs span{
    vertical-align: middle;
}
#frPageInfo .chatlogs td > .reply{
    --size: .8rem;
    color: var(--ftc2);
    font-size: var(--size);
    line-height: calc(var(--size) * 1.5);
}
#frPageInfo .chatlogs td > .reply img{
    width: var(--size);
    height: var(--size);
    margin-right: calc(var(--size) / 2);
    vertical-align: middle;
    filter: var(--svgc2);
    -moz-filter: var(--svgc2);
    -webkit-filter: var(--svgc2);
}
#frPageInfo .chatlogs td > .reply span{
    vertical-align: middle;
}
#frPageInfo .chatlogs td > .msg .mention{
    margin: -.065rem 0;
    padding: .125rem .25rem;
    background-color: var(--bkc2);
    border-radius: 6px;
}
#frPageInfo .chatlogs .date td{
    position: relative;
    display: flex;
    justify-content: center;
    padding: .25rem;
    border-bottom: none;
    font-size: .8rem;
    color: var(--ftc2);
}
#frPageInfo .chatlogs .date td > hr{
    position: absolute;
    top: 50%;
    width: 80%;
}
#frPageInfo .chatlogs .date td > div{
    background-color: var(--bkc1);
    padding: .25rem .75rem;
    z-index: 1;
}