:root
{
	--slide-scale: 1;
	--slide-top: 0px;
	--slide-left: 0px;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

body
{
	width:100vw;
	height:100%;
	background:#dddfe7;
	overflow-y:hidden;
}

.modal-content-0b
{
	border:none;
	border-radius:none;
}

#qr_room
{
	text-align: center;
	min-width: 20vh;
	max-width: 360px;
}

#qr_room img
{
	width:20vh;
	height:20vh;
	margin:22px;
	background: #fffa;
	border-radius: 20%;
	border: 5px solid #fff;
}

.crLbl
{
	/*padding: 2px 10px 0 10px;
	background: #ccc0;
	height: 30px;
	display: inline-block;
	border-radius: 15px;*/
	font-size: 10pt;
	color: #678;
}

.t-selectable
{
	-webkit-user-select: unset !important;
	-ms-user-select: unset !important;
	user-select: unset !important;
}

#all_slides_warpper
{
	padding-top:0 !important;
	/*max-height:100vh !important;*/
	border:none !important;
	border-radius:0 !important;
	transform:scale(var(--slide-scale));
	transform-origin: top left;
	height:720px !important;
	width:1280px;
	overflow:hidden;
	margin-top: var(--slide-top);
	margin-left: var(--slide-left);
}



#all_slides_warpper .slide
{
	margin-bottom:-720px;
	border-radius:0;
	z-index:101;
	opacity:0;
	animation-fill-mode: forwards;
	border: none;
}

#small_slides_warpper
{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-around;
	width:100%;
	height:140px;
	overflow-x:auto;
}

#small_slides_warpper .slide
{
	width:160px;
	height:90px;
	margin: 0 8px;
	overflow:hidden;
	position:relative;
}

#small_slides_warpper .slide_thumb
{
	transform:scale(0.125);
	transform-origin: top left;
	position:absolute;
	top:0;
	left:0;
}

#small_slides_warpper .slide_btn
{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#0000;
	transition: 0.5s;
}

#small_slides_warpper .slide_btn_label
{
	position:absolute;
	right:0;
	bottom:0;
	padding:4px;
	width:44px;
	height:32px;
	text-align:center;
	background-color:#333;
	border-top-left-radius: 8px;
	color:#fff;
}

#small_slides_warpper .slide_btn:hover
{
	background-color:#0008;
}

#small_slides_warpper .slide_btn:active
{
	background-color:#000c;
}

#myModal .modal-dialog, #myModal .modal-content
{
	margin:0;
	max-width:unset;
	width:100vw;
	height:100vh;
	overflow:hidden;
}

#myModal .slides-toolbar
{
	/*display:none;*/
}

.slide-overlay
{
	padding-top:0 !important;
	/*max-height:100vh !important;*/
	border:none;
	border-radius:0 !important;
	transform:scale(var(--slide-scale));
	transform-origin: top left;
	height:720px;
	width:1280px;
	overflow:hidden;
	z-index:1000;
	position:fixed;
	top:var(--slide-top);
	left:var(--slide-left);
}

.slide-overlay-focus
{
	z-index:1001;
}

#slide-control-2
{
	transition: opacity 0.3s;
}

.sl_hl
{
	width:28px;
	height:28px;
	border-radius:14px;
	background-color:#fff;
	overflow:hidden;
	position:fixed;
	top:0;
	left:0;
	border:7px solid #c56;
	box-shadow: 0 0 7px #c56;
	opacity: 0.8;
}

.slide-overlay-pl
{
	width:20vw;
	height:calc(100vw * 9 / 16);
	z-index:103;
	position:fixed;
	top:0;
	left:0;
}

.slide-overlay-pr
{
	width:20vw;
	height:calc(100vw * 9 / 16);
	z-index:103;
	position:fixed;
	top:0;
	right:0;
}

.slide-overlay-pc
{
	width:60vw;
	height:calc(100vw * 9 / 16);
	z-index:103;
	position:fixed;
	top:0;
	left:20vw;
}

.ft-btn
{
	opacity:1;
	transition:0.5s;
	width:25vw;
	text-align:center;
	cursor:pointer;
}

.ft-btn:hover
{
	opacity:0.7;
}

.ft-btn:active
{
	opacity:0.4;
	transform:scale(0.8);
}

.bav-btn
{
	opacity:1;
	transition:0.5s;
	width:25vw;
	text-align:center;
	cursor:pointer;
}

.bav-btn:hover
{
	opacity:0.7;
}

.bav-btn:active
{
	opacity:0.4;
	transform:scale(0.8);
}

.bav-btn-icon
{
	overflow: hidden;
	width: 64px;
	height: 64px;
	padding: 8px;
	display: inline-block;
	color:#fff;
	background:#ccc;
	border:2px solid #fff;
	border-radius:16px;
	font-size: 21pt;
	
}

.bav-btn-text
{
	margin-top:10px;
	color:#999;
	overflow:hidden;
	text-overflow:ellipsis;
	text-wrap:nowrap;
}

.bav-btn-locked
{
	
}

.bav-btn-completed > .bav-btn-icon
{
	background:#777;
	border: 2px solid #49d;
}

.bav-btn-completed > .bav-btn-text
{
	color:#49d;
}

.bav-btn-during > .bav-btn-icon
{
	background:#49d;
	border: 2px solid #fff;
}

.bav-btn-during > .bav-btn-text
{
	color:#49d;
}

#bav_trans_progress
{
	position: absolute;
	transition: 0.1s;
	top: 0;left: 0;
	height: 64px;
	width: 0;
	background: #49d;
}

.ft-btn-icon
{
	overflow: hidden;
	width: 32px;
	height: 32px;
	padding: 4px;
	display: inline-block;
}

.ft-btn-icon svg
{
	fill:#777;
	stroke:#fff;
}

.ft-btn-text
{
	ttext-align: center;
	text-overflow: ellipsis;
	color: #777;
	overflow:hidden;
}

.ft-btn:hover > .ft-btn-icon > svg
{
	fill:#77d;
}

.ft-btn:hover > .ft-btn-text
{
	color:#77d;
}

.ft-btn:active > .ft-btn-icon > svg
{
	fill:#77d;
}

.ft-btn:active > .ft-btn-text
{
	color:#77d;
}

.ft-btn-selected > .ft-btn-text
{
	color:#5ad !important;
}

.ft-btn-selected  > .ft-btn-icon > svg
{
	fill:#5ad !important;
}

.control-panels
{
	position:fixed;
	z-index:1001;
	bottom:-140px;
	left:16px;
	right:16px;
	transition: 0.5s;
}

.control-panels-show
{
	bottom:96px;
}

.control-panel
{
	display:none;
	background-color:#fffe;
	border-radius:8px;
	box-shadow: 0 0 4px #ccc;
	padding: 0 8px;
}

.control-panel-show
{
	display:block;
}

.slide-menu
{
	background-color:#fff;
	flex-wrap:wrap;
	justify-content:space-evenly;
	height:80px;
	box-shadow: 0 0 4px #ccc;
	margin-top:20px;
	padding-bottom:10px;
}

/*
.slide-menu-show
{
	margin-top:0px;
}
*/


#slide-menu-container
{
	height:100px;
	background:#0000;
	position:fixed;
	bottom:-100px;
	z-index: 1001;
	transition:0.5s;
	text-align:center;
}

.slide-menu-show
{
	bottom:0 !important;
}

.slide
{
	/*border:2px solid #333;*/
}

.sm-se-slide
{
	border:2px solid #c94;
}

.sm-se-slide .slide_btn_label
{
	background:#c94 !important;
}

.room_id_box
{
	height: 40px;
	text-align: left;
	border: 1px solid #ccc;
	border-radius: 0;
	text-wrap: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	padding: 8px 16px;
}

.connect-btn
{
	width: 100%;
	height: 40px;
	border-radius: 0 0 8px 8px;
	border: 2px solid #aaa;
	background: #ccc;
	color: #fff;
	cursor:pointer;
	transition:0.5s;
	opacity:1;
	text-align: center;
	padding-top: 6px;
}

.connect-btn:hover
{
	opacity:0.8;
}

.connect-btn:active
{
	opacity:0.4;
}

.paint-tools
{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-around;
	width:100%;
	height:140px;
	overflow-x:auto;
}

.paint-tool
{
	height:90px;
	overflow:hidden;
	position:relative;
}

.pt-icon
{
	width:100%;
	height:40px;
	text-align:center;
}

.pt-text
{
	text-align:center;
	height:40px;
	margin-top:10px;
}

.opa-btn
{
	opacity:1;
	transition:0.5s;
	cursor:pointer;
}

.opa-btn:hover
{
	opacity:0.7;
}

.opa-btn:active
{
	opacity:0.4;
	transform:scale(0.8);
}

.rc-box
{
	display:none;
}

.rc-box-show
{
	display:flex;
}

@media (orientation: portrait) {
	/* Styles for portrait orientation */
	.control-panels
	{
		bottom: 96px;
	}
	#slide-menu-container
	{
		bottom: 0;
	}
}