html { background-color:#202020; margin:0px; }
body
{
	font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

	background-color: #e0e0e0;

	margin: 0 auto;
	max-width: 1150px;

	font-size:16;
	line-height:1.7;	
	color:#666666;
	overflow-y:auto;
}

a
{
	color:#3399FF;
	text-decoration:none;
}
a:hover,
a:active
{
	color: #FF3399;
	cursor: pointer;
}
a:link
{
	color:#3399FF;
	cursor: pointer;
}
a:visited
{
	color:#9933FF;
	cursor: pointer;
}

#container
{
	width:100%;
}

#main_frame
{
	display: flex;
	width: 100%;
}

.head
{
	padding-top:20px;
	padding-bottom:15px;
	
	border-bottom: #d0d0d0 1px solid;
	background-image:linear-gradient(0deg,  #e0e0e0, #ffffff);
}


button.category-menu-button
{
	display: inline-flex;
	width:20px;
	word-wrap: break-word;
	margin: 0;
	padding:0;
	flex-grow: none;
	flex-basis: auto;
}
@media (max-width: 768px) {
	html{
		background-color: #ffffff;
	}
	#container{
		overflow-y: auto!important;
		overflow-x: hidden!important;
		position: relative!important;
	}
	#category_menu.expand{
		padding-left: 20px!important;
		width: 60%!important;
		max-width: 60%!important;
	}
	.search_field{
		display: block!important;
	}
	.search_box{
		width: calc(100vw - 12px)!important;
		min-width: calc(100vw - 12px)!important;
		position: relative;
	}
	.search_button_clear{
		position: absolute!important;
		top: 0;
		right: 0!important;
		float: none!important;
	}
	.search_filter_list{
		width: 100vw!important;
	}
	#category_menu{
		height: 100%!important;
		position: absolute;
		top: 0;
		z-index: 99;
		background-color: #ffffff;
		padding: 20px 0;
	}
	.category-menu-button-div{
		width: 100vw;
		height: 50px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}
	.bg0{
		background-color: rgba(225, 225, 225, 0);
	}
	.bgf{
		background-color: #ffffff;
		box-shadow: 0 2px 8px 0 rgb(0 0 0 / 12%);
	}
	.category-menu-button{
		position: fixed;
		top: 15px;
		left: 20px;
		z-index: 999;
		width: 25px;
		height: 25px;
		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzdjODc4ZSIgZD0iTTEgMmgxNHYySDF6bTAgNWg3djJIMXptMCA1aDE0djJIMXptMTQtMVY1TDkuOCA4eiIvPjwvc3ZnPg==);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.category-menu-button.off{
		-webkit-transform: rotate(180deg);
        transform: rotate(180deg);
		display: block;
	}
	.category-menu-button.on{
		display: none;
	}
	.main-content-mask{
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99;
		top: 0;
		left: 0;
	}
	.search_example_hint{
		background-color: #d0d0d0;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9999;
		width: calc(100vw - 40px);
		margin-left:0!important;
		padding: 5px 20px;
		font-size: 13px!important;
		line-height: 20px;
		/* height: 20vh; */
		/* transition: 1s ease-out!important; */
	}
	.search_keyword_hint{
		background-color: #d0d0d0;
		margin-left:0!important;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9999;
		width: calc(100vw - 40px);
		padding: 5px 20px;
		/* transition: 1s ease-out!important; */
	}
	.video_player_speed_tunners{
		width: 100vw!important;
		font-size: 14px;
	}
	.search_input{
		height: 26px;
	}
}
#category_menu
{
	overflow-y:auto;
}
#category_menu.fold
{
	transition: all 0.2s ease;
	width:0px;
}
#category_menu.expand
{
	transition: all 0.2s ease;
	padding-left:30px;
	width: 30%;
	max-width: 300px;
}

#session_list
{
	overflow-y:auto;
	width:100%;
}

#session_video_view
{
	overflow-y:auto;
	width:100%;
}

.ai{ background: #FFE0E0; }
.au{ background: #FFF0E0; }
.de{ background: #FFFFE0; }
.mo{ background: #FFE0FF; }
.na{ background: #E0FFFF; }
.pg{ background: #E0F0FF; }
.pr{ background: #F0E0FF; }
.ux{ background: #FFE0F0; }
.ol, .bm, .un,
.va{ background: #F0F0F0; }
.xg{ background: #E0EEE0; }

a, .un
.ai, .au, .de, .mo,
.na, .pg, .pr, .ux,
.ol, .bm, .va, .xg,
.short_category_button
{
	transition-duration: 0.2s;
}

.ai:hover, .au:hover, .de:hover, .mo:hover,
.na:hover, .pg:hover, .pr:hover, .ux:hover,
.ol:hover, .bm:hover, .un:hover, .va:hover,
.xg:hover
{
	background: #ffffff;
}

.remote_comments_panel
{
	width:90%;
	margin:0 auto;
}

.category_menu_link
{
	position: relative;
	z-index: 2;
}

.category_menu_link:after
{
	z-index: -1;
	position: absolute;

	content:' ';

	transition: all 0.5s ease;

	width: 130px;
	height: 0;
	left: 0;
	bottom:0;
	display: block;
}

.category_menu_link:hover::after
{
	height:50%;
}


.category_menu_link:hover a
{
	color:#FF3399;
}

.hover_ai:after{ background: #FFE0E0; }
.hover_au:after{ background: #FFF0E0; }
.hover_de:after{ background: #FFFFE0; }
.hover_mo:after{ background: #FFE0FF; }
.hover_na:after{ background: #E0FFFF; }
.hover_pg:after{ background: #E0F0FF; }
.hover_pr:after{ background: #F0E0FF; }
.hover_ux:after{ background: #FFE0F0; }
.hover_ol:after,
.hover_bm:after,
.hover_un:after,
.hover_va:after{ background: #F0F0F0; }
.hover_xg:after{ background: #E0EEE0; }