body
{
	overscroll-behavior-y:contain;
	background-color:var(--page-bg-tinted);
}

/* admin view */

/* .is-admin a.select-object */
/* .is-admin #create-form .create-type.select, */
/* .is-admin #clear-series */
body:not(.is-admin) .admin-only
{
	display:none;
}


#head,
#create-form
{
	transition:transform .3s cubic-bezier(0,.49,.73,.99) 0s;
}
#head.no-book
{
	transform:translateY(calc(50vh - 50% - 8px)) scale(3);
}
#head.scan
{
	transform:translateX(calc(-50vw + 50% + 8px));
}

#page-login
{
	display:flex;
	flex-direction:column;
	padding-top:22vh;
}
#page-login .label
{
	margin:8px auto;
}

#page-header 
{
	z-index:2000;
}
#page-header .dev
{
	position:fixed;
	right:8px;
	bottom:8px;

}


#scanner-info,
#book-info
{
	position:fixed;
	top:8px;
	z-index:1100;
}

#no-book,
#page-scan-exit
{
	transition:transform var(--slide-in-fast);
	display:flex;
}
#no-book.off
{
	transform:translateY(calc(-100% - 12px));
}
#no-book > div:first-child
{
	margin-right:8px;
}

#page-book-select,
#page-book-create
{
	display:flex;
	flex-direction: column;
	align-items: center;
	padding-top:50px;
	z-index:1001;
}
#page-book-select > .label,
#page-book-create > .label
{
	margin-bottom:12px;
}
#page-book-create
{
	padding-top:0;
	justify-content: center;	
}
#page-book-create > .label
{
	margin-top:-36px;
}
#create-form
{
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	
}
#create-form section
{
	display:flex;
}
/* .is-admin #create-form */
#create-form input,
#create-form .select,
#create-form textarea
{
	margin-top:0;
	margin-right:8px;
	width:230px;
}
#create-form input.create
{
	width:calc(230px - 30px);
}
#create-form input + .label.round
{
	margin-left:-8px;
	margin-right:8px;
}
#create-form.off
{
	transform:translateY(calc(50vh + 0%));
}

/* 
.is-portrait #create-form,
.is-admin #create-form,
 */
#create-form
{
	padding:0 0 0 8px;
	justify-content: flex-start;
}
.is-portrait #create-form input,
.is-portrait #create-form textarea,
.is-portrait #create-form section,
.is-portrait #create-form .select
{
	width:calc(100%);
}
.is-portrait #create-form input.create
{
	width:calc(100% - 38px);
}
.is-portrait #create-free-type,
.is-portrait .label.create-event
{
	/* width:calc(50% - 8px) !important; */
}


#code
{
	width:250px;
}
#create-code
{
	width:200px;
}
#create-title
{
	/* width:350px; */
}


#scanner-info
{
	right:8px;
	display:flex;
	transform:translateX(100px);
	transition:transform var(--slide-in);
}
#scanner-info.off
{
	transform:translateX(120%);
}
#scanner-info a:not(:last-child)
{
	margin-right:8px;
}
#scanner-info a
{
	display:flex;
	align-items:center;
}
#scanner-info a svg.icon
{
	margin-bottom:0;
}
#username > span
{
	display:inline-block;
	/* max-width:13px; */
	overflow:hidden;
	text-align:right;
	transition:max-width var(--slide-in-fast);
	pointer-events:none;
}
#username span.user
{
	display:inline-block;
	float:right;
	pointer-events:none;
	white-space: nowrap;
}
#scanner-info.expanded
{
	transform:none;
}
#scanner-info.expanded #username > span
{
	max-width:100px;
}


#book-info
{
	left:8px;
	transition:transform var(--slide-in-fast);
}
#messages
{
	margin-top:4px;
}
#messages .message
{
	margin-bottom:8px;
	display: flex;
	transition:transform var(--slide-in-fast);
	/* transition-delay: .25s; */
}
#book-info.off,
#messages .message.off,
#messages.no-book .message
{
	transform:translateX(calc(-100% - 8px))
}
#messages .message .label
{
	margin-right:4px;
	padding:0 10px;
}
/* 
#book-info .label
{
	display:inline-block;
	margin-bottom:8px;
}
 */

#page-scan
{
	transition:transform var(--slide-in-fast);
}
#page-scan-exit
{
	position:absolute;
	left:8px;
	bottom:8px;
}
#page-scan-exit.off
{
	transform:translateY(calc(100% + 12px));
}

#video,
#canvas
{
	margin:auto;
	max-height:100%;
	max-width:100%;
}

#start,
#capture,
#timer,
#rescan
{
	position:fixed;
	right:42px;
	top:50%;
	
	width:80px;
	height:80px;
	margin-top:-40px;
	/* padding-top:24px; */
	text-align:center;
	
	/* border:2px solid var(--white); */
	background-color:var(--accent);
	border-radius:50%;
	
	z-index:10;
}
#capture .circle
{
	display:block;
	position:absolute;
	left:4px;
	top:4px;
	width:72px;
	height:72px;
	border:1px solid var(--page-bg);
	border-radius:50%;
	background-color:var(--lighter);
	pointer-events:none;
}
#timer
{
	width:50px;
	height:50px;
	margin-top:60px;
	right:calc(42px + 15px);
	padding-top:9px;
}
#rescan
{
	background-color:var(--light);
}
#rescan svg
{
	width:20px;
	height:calc(14/16 * 20px);
	margin-top:30px;
}

#start
{
	font-size:60px;
	line-height:84px;
}

#page-timer
{
	font-size:70vh;
	text-shadow:1px 1px 0px rgba(5,1,0,.4);
}

#confirm
{
	background-color:var(--fade);
/* 
	position:absolute;
	right:0;
	top:0;
	width:165px;
	height:100%;
 */
}
#confirm .label
{
	position:absolute;
}
#confirm .button
{
	margin:30px 0;
}
#restart
{
	margin-bottom:32px !important;
}

#uploading
{
	position:absolute;
	padding:24px;
	min-width:180px;
	border-radius:8px;

	font-size:20px;
	line-height:24px;
	text-align:center;
	color:var(--white);
}
#processing
{
	display:inline-block;
	width:30px;
	height:30px;
}
#progress
{
	width:120px;
	margin:5px 0;
}
#bytes
{
	font-size:13px;
	font-weight:450;
}

.guideline
{
	position:fixed;
	top:0;
	left:50%;
	height:100%;
	border-left:1px dotted var(--light)
}
.guideline.horizontal
{
	top:50%;
	left:0;
	width:100%;
	height:0;
	border-top:1px dotted var(--light)
}

#labels
{
	width:100%;
}



#labels,
#labels > div
{
	display:flex;
}
#labels > div
{
	margin:15px;
	flex-basis: 50%;
	flex-direction: column;
	justify-content: center;
}
#labels > div:first-child
{
	align-items: flex-end;
}
#labels > div:last-child
{
	align-items: flex-start;
}

#mask
{
	position:fixed;
}
#mask .fade
{
	fill:var(--dark);
	opacity:.55;
}
#mask .guide
{
	stroke-width:2px;
	stroke:var(--light);
	fill:none;
}

@media (orientation: portrait) { /* for admin logins */
	
	#head.no-book
	{
		transform: translateY(calc(50vh - 50% - 8px)) scale(2);
	}
	#no-book > div:first-child
	{
		display:none;
	}

}