/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.cameta-sts
{
	display:inline-block;
	width:2.0em;
	height:2.0em;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	background-image:url(../../icon/camera-mute.png);
	vertical-align: text-bottom;
}
.cameta-sts.on
{
	background-image:url(../../icon/camera-active.png);
}
.mic-sts
{
	display:inline-block;
	width:2.0em;
	height:2.0em;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	background-image:url(../../icon/mic-mute.png);
	vertical-align: text-bottom;
}
.mic-sts.on
{
	background-image:url(../../icon/mic-active.png);
}
.toggle-label
{
	line-height:2em;
}
.mic-volume,
.audio-volume
{
	line-height:2.5;
	padding:0 1em;
	width:200px;
}
.mic-volume #microphoneLevel,
.audio-volume #audioLevel
{
	width:calc(200px - 8.0em);
	margin-right:0.5em;
}
.mic-volume .microphoneLevelLabel
{
	width:2.5em;
}
.mic-min,
.mic-max,
.audio-min,
.audio-max
{
	display:inline-block;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	vertical-align: middle;
	width:1.5em;
	height:1.5em;
}
.mic-min
{
	background-image:url(../../icon/mic-min.png);
}
.mic-max
{
	background-image:url(../../icon/mic-max.png);
}
.audio-min
{
	background-image:url(../../icon/mic-min.png);
}
.audio-max
{
	background-image:url(../../icon/mic-max.png);
}

.videos
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-end;
	
	margin:-0.25em -0.25em -0.25em -0.25em;
    
    line-height:1.0;
}
.videos .videos-item
{
	order:1;
	width:calc(25.00000% - 0.50em); margin:0.25em;
	overflow:hidden;
}
.videos .videos-item.my-video
{
	order:0;
	width:calc(50.00000% - 0.50em); margin:0.25em;
}
.videos .videos-item.pickup-video
{
	order:0;
	width:calc(50.00000% - 0.50em); margin:0.25em;
}
.videos .videos-item.small-video
{
	order:1;
	width:calc(25.00000% - 0.50em); margin:0.25em;
}

.videos .videos-item .videos-frame
{
	width:100%;
	padding-top:100%;
	
	background-color:#000000;
}
.videos .videos-item.screen
{
	order:-1 !important;
	width:calc(100.00000% - 0.50em) !important;
	margin:0.25em !important;
}
.videos .videos-item.screen  .videos-frame
{
	width:100%;
	padding-top:75%;
	background-color:#000000;
}

.videos .videos-item .videos-frame video
{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	width:100%;
	height:100%;
	
	/*
	top:50%;
	left:50%;
	
	transform:translate(-50%, -50%);
	*/
}
.videos .videos-item.my-video  .videos-frame video
{
    transform: rotateY(180deg);
}
.videos .videos-item .user-mode
{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	width:100%;
	height:100%;
}
.videos .videos-item .user-mode .mode
{
	width:100%;
	height:100%;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	
	display:none;
}
/* カメラ＆マイク （アイコン表示なし） */
.videos .videos-item.all .user-mode .mode
{
	display:none;
}
/* マイクのみ （スピーカーマーク） */
.videos .videos-item.audio .user-mode .mode
{
	display:block;
	
	width:70%;
	height:100%;
	
	margin:auto;
	
	background-image:url(../../icon/audio-on.png);
}
/* カメラのみ （スピーカーOFF 小さく） */
.videos .videos-item.camera .user-mode .mode
{
	display:block;
	
	width:15%;
	height:15%;
	
	margin:auto;
	
	background-image:url(../../icon/audio-off.png);
	background-color:rgba(0,0,0,0.6);
}
/* マイクミュート （スピーカーマークOFF小さく） */
.videos .videos-item.audio-mute .user-mode .mode
{
	display:block;
	
	width:15%;
	height:15%;
	
	margin:auto;
	
	background-image:url(../../icon/audio-off.png);
	background-color:rgba(0,0,0,0.6);
}
/* マイクのみかつミュート （スピーカーマークOFF） */
.videos .videos-item.audio.audio-mute .user-mode .mode
{
	display:block;
	
	width:70%;
	height:100%;
	
	margin:auto;
	
	background-image:url(../../icon/audio-off.png);
}
/* カメラミュート （スピーカーマーク） */
.videos .videos-item.camera-mute .user-mode .mode
{
	display:block;
	
	width:70%;
	height:100%;
	
	margin:auto;
	
	background-image:url(../../icon/audio-on.png);
}
/* カメラのみかつカメラミュート （退席表示） */
.videos .videos-item.camera.camera-mute .user-mode .mode
{
	display:block;
	
	width:70%;
	height:100%;
	
	margin:auto;
	
	background-image:url(../../icon/leave.png);
}
/* スクリーンかつカメラミュート （退席表示） */
.videos .videos-item.screen.camera-mute .user-mode .mode
{
	display:block;
	
	width:70%;
	height:100%;
	
	margin:auto;
	
	background-image:url(../../icon/leave.png);
}
/* 両方ミュート （退席表示） */
.videos .videos-item.audio-mute.camera-mute .user-mode .mode
{
	display:block;
	
	width:70%;
	height:100%;
	
	margin:auto;
	
	background-image:url(../../icon/leave.png);
}
.videos .videos-item .user-name
{
	position:absolute;
	
	bottom:0;
	left:0;
	right:0;
	
	background-color:rgba(0,0,0,0.6);
	color:#FFFFFF;
	
	line-height:1;
	padding:0.5em;
	font-size:1.2em;
	
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat
{
	height:320px;
	overflow-y:scroll;
	margin-bottom:1em;
}
.chat .chat-item
{
	padding-bottom:0.5em;
	margin-bottom:0.5em;
	border-bottom:1px dotted #CCCCCC;
}
.chat .chat-item .user
{
	font-size:0.8em;
	color:#666666;
	white-space:pre-line;
}
.chat .chat-item .message
{
	line-height:1.2;
	white-space:pre-line;
}
/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1100px) {


}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.chat
	{
		height:15vh;
		overflow-y:scroll;
		margin-bottom:1em;
	}
}