/* hedar tab */
.header-group
{
	width:500px;
	margin-left:-40px;
}

.header-tab
{
	cursor:pointer;
	border:solid 1px #52b043;
	float:left;
	padding:5px;
	list-style:none;
	text-align:center;
}

.header-tab.header-active
{
	background:#52b043;
	color:#fefefe;
}
/*==============*/


/* header panel */
.header-panel-group
{
	width:600px;
	clear:left;
	padding-top:5px;
	padding-bottom:5px;
}

.header-panel
{
	display:none;
}

.header-panel.header-show
{
	display:block;
}
/*==============*/


/* 履歴 */
.history
{
	width:fit-content;
}

.log
{
	color:#0063b1;
	margin-left:-10px;
	margin-top:-3px;
}
/*==============*/


/* note */
.note
{
	width:350px;
	/*width:fit-content;*/
	color:#0063b1;
}

.timeinfo
{
	margin-left:-20px;
	margin-top:-5px;
	margin-bottom:0;
}
/*==============*/


/* cookie info */
.cookie
{
	width:fit-content;
	color:#0063b1;
}
/*==============*/


/* about */
.about
{
	width:fit-content;
	color:#0063b1;
}
/*==============*/


/* tab-panel */
.tab-panel
{
	width:fit-content;
	float:left;
}
/*==============*/


/* tab-group */
.tab-group
{
	width:500px;
}
/*==============*/


/* panel-group*/
.panel-group{
	width:500px;
	clear:left;
}
/*==============*/


/* users */
.users
{
	width:490px;
	height:90px;
	padding-top:10px;
	padding-left:10px;
	padding-bottom:10px;
	color:#fefefe;
	background-color:#52b043;
}
/*==============*/

/* xbox */
.xbox
{
	margin-top:40px;
	display:inline-block;
}
/*==============*/


/* twitter */
div.twitter
{
	margin-left:10px;
	display:inline-block;
	width:fit-content;
}
/*==============*/


/* gamertag */
.gamertag
{
	margin-left:5px;
	display:inline-block;
}
/*==============*/

/* alldelete */
.alldelete
{
	text-align:center;
	margin-left:-15px;
}
/*==============*/

/* xboxlogout,twitterlogout */
.xboxlogout,
.twitterlogout
{
	line-height:25px;
	height:25px;
	padding-left:5px;
	border:1px solid #fefefe;
	background-color:#fefefe;
	border-radius:6px;
	margin-right:10px;
	margin-left:-5px;
}

.xboxlogout
{
	margin-top:16px;
}

.twitterlogout
{
	margin-top:5px;
}
/*==============*/

/* link */
.link
{
	border:1px solid #fefefe;
	border-radius:6px;
	background-color:#fefefe;
	height:30px;
	cursor:pointer;
	color:#000;
	padding:5px;
}

.home
{
	height:fit-content;
	width:fit-content;
	padding:0;
}
/*==============*/


/* submit */
.save,
.playsave,
.clips_ss_save,
.hashsave,
.hashdelete,
.remove,
.exclusionsave
{
	background:#52b043;
	color:#fefefe;
	display:inline-block;
	height:fit-content;
	text-align:center;
	padding:3px;
}
/*==============*/


/* check */
.check
{
	display:none;
}

.label
{
	border:1px solid #52b043;
	padding:3px;
	display:inline-block;
	margin:5px 5px 5px auto;
	text-align:center;
	cursor:pointer;
	border-radius:6px;
}
/*==============*/

.scroll_lock
{
	overflow: hidden;
}

/* border-radius */
.msg_preview
{
	border-radius:6px;
}

/* color fefefe */
.tab.active,
.msg_preview,
.save
{
	color:#fefefe;
}

/* cursor */
.tab
{
	cursor:pointer;
}

/* display:inline-block */
.msg,
.preview
{
	display:inline-block;
}

/* border */
.tab,
.save
{
	border:solid 1px #52b043;
}

/* background */
.tab.active,
.save
{
	background-color:#52b043;
}

/* gamerpic */
.gamerpic
{
	clip-path:circle(24px);
	image-rendering:crisp-edges;
	width:48px;
}

/* image-rendering:crisp-edges */
.twitter
{
	image-rendering:crisp-edges;
}


.tab-group
{
	display: flex;
	margin-left:-40px;
}

.tab
{
	flex-grow: 1;
	padding:5px;
	list-style:none;
	text-align:center;
}

.panel
{
	display:none;
}

.panel.show
{
	display:block;
}

.msg_size
{
	float:right;
}

.preview
{
	margin-left:10px;
}

.msg_preview
{
	width:222px;
	height:100px;
}


.info
{
	color:#0063B1;
}

.forms
{
	width:450px;
}

.twitter
{
	width:32px;
}

.twitter + span
{
	margin-left:10px;
}


@keyframes load
{
	0%, 75%, 100%
	{
		transform:scale(1.5);
		opacity:0;
	}
	25%, 50%
	{
		transform:scale(1);
		opacity:1;
	}
}

.load
{
	display:flex;
	position:fixed;
	align-items:center;
	justify-content: center;
	width:100%;
	height:100%;
}
.load span
{
	padding-top:120px;
	position:relative;
	display:inline-block;
	margin:0 -.05em;
	color:rgba(0, 0, 0, .5);
	font-size:x-large;
}

.load span::after
{
	padding-top:120px;
	position:absolute;
	top:0;
	left:0;
	content:attr(data-text);
	color:#52b043;
	opacity:0;
	transform:scale(1.5);
	animation:load 2.5s infinite;
}
.load span:nth-child(2)::after
{
	animation-delay:.1s;
}
.load span:nth-child(3)::after
{
	animation-delay:.2s;
}
.load span:nth-child(4)::after
{
	animation-delay:.3s;
}
.load span:nth-child(5)::after
{
	animation-delay:.4s;
}
.load span:nth-child(6)::after
{
	animation-delay:.5s;
}
.load span:nth-child(7)::after
{
	animation-delay:.6s;
}
.load span:nth-child(8)::after
{
	animation-delay:.7s;
}
.load span:nth-child(9)::after
{
	animation-delay:.8s;
}
.load span:nth-child(10)::after
{
	animation-delay:.9s;
}
.load span:nth-child(11)::after
{
	animation-delay:1s;
}
.load span:nth-child(12)::after
{
	animation-delay:1.1s;
}
.load span:nth-child(13)::after
{
	animation-delay:1.2s;
}
.load span:nth-child(14)::after
{
	animation-delay:1.3s;
}
.load span:nth-child(15)::after
{
	animation-delay:1.4s;
}

/* loading */
@keyframes loader {
	0%
	{
		transform: rotate(0);
	}

	100%
	{
		transform: rotate(360deg);
	}
}

.loading
{
	display: none;
	justify-content: center;
	align-items:center;
	position:fixed;
	background:#fefefe;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
.loading::after
{
	animation: loader 0.8s linear infinite;
	border: 1px solid #52b043;
	border-radius: 50%;
	border-right: 1px solid rgba(82, 176, 67, 0.2);
	border-top: 1px solid rgba(82, 176, 67, 0.2);
	height: 70px;
	width: 70px;
	content:"";
}
/*==============*/