/* Login */
form#loginForm
{
font-size:22px;
}
h1{ text-align:center; margin:auto;}
form#loginForm input.button{ text-transform:uppercase;height:26px; }
form#loginForm input.ltxt{ border:1px solid #ccc;height:30px; width:220px;border-radius:5px;font-size:16px;padding:5px;}
form#loginForm div#loginMsg{color:#676767;width: 400px;margin:auto auto 10px auto;}

form#loginForm table#loginTable td
{
text-align:center;
padding:2px 0;
}
form#loginForm table#loginTable td.submit
{
padding-top:10px;
}

/* Common */
h2{ font-size:16px; }
body,table{font: 14px arial,helvetica,sans-serif; }
td{ text-align:left; }

div#kioskContainer
{
text-align:center;
vertical-align:middle;
margin:auto;
font: 16px arial,helvetica,sans-serif;
color:#676767;
}
div#kioskHeader{ height:50px;text-align:center; width:700px;background:white; margin:auto;padding:10px 30px 0px 0px;}

div#kioskHeader span,
div#kioskHeader a span,
div#kioskHeader a,
div#kioskHeader a#eventAttendees
{
text-decoration:none;
cursor:pointer;
color:#999;
background:#f5f5f5;
padding:3px;
border:1px solid #eee;
display:inline-block;
margin-bottom:5px;
}
div#kioskHeader span#eventName,div#kioskHeader span#eventChange,div#kioskHeader a#eventChange/*,div#kioskHeader a#eventAttendees*/
{ display:none; }

div#kioskHeader span#eventVenue,div#kioskHeader span#eventHost
{
	display:block;
	background:none;
	border:none;
	font-size:14px;


}

div#kioskHeader a:hover{ background:#eee; }
div#kioskHeader img{ width:100px; }

	div#kioskHeader div#eventName
	{
	padding:15px 0;
	}


	div#kioskPanel{
		margin:auto;text-align:center;
		padding-top:60px;
	}
div.instructions{
	padding: 0px 0px 45px 80px;color:#898989;
}


div#kioskContainer div.instructions ul
{
list-style:disc;
text-align:left;
margin:10px 0 0 20px;
}

div#kioskContainer input.fmtxt,
div#kioskContainer input.fdate{ border:1px solid #ccc;height:30px; width:220px;border-radius:5px;font-size:16px;}
div#kioskContainer select.fsel{ border:1px solid #ccc;height:40px; width:260px;border-radius:5px;font-size:16px;}
div#kioskContainer select.fsel#event{
	width:auto;
	max-width:620px;
}
div#kioskContainer div#attendeeAssessment input.fmtxt{ width:244px; }

div#kioskContainer input.fdate{ width:150px;}

div#kioskContainer div.instructions{ width:350px; margin:auto;text-align:left;padding-top:100px;}
div#kioskContainer div.allAttendees div.instructions,
div#kioskContainer div.instructions.selectedAttendees
{ width:600px; text-align:right;padding-right:60px;color:#999;margin-bottom:-40px;}

input.finttxt, input.fltxt, input.fmtxt, input.fstxt,
textarea, input.fphtxt, input.fphcodetxt,
select.fssel, select.fsymsel, select.fsel, select.fseldate, select.fselNoWidth
{ font: 16px arial,helvetica,sans-serif;border-color:#ccc;}
textarea{border-radius:5px;  }
input.fmtxt,select.fsel{height:30px; padding: 5px; }
input.fmtxt{height:24px;}

div.buttonPanel input.button{ text-transform:uppercase; }

div.form span.label{ display:inline-block;width:150px; }

div.buttonPanelTop
{
/* text-align:right !important; */
	padding:0;
	display:none;
}
div.buttonPanelTop div
{
	width:200px;
	margin-left:300px;
}
/* Step 0 */

.proceed{ cursor:pointer; }
img.proceed{top:50%;left:50%;position:absolute;margin-top:-66px;margin-left:-121px;}

/* Step 1 */




/* Step 3 */

div#bookings table{ text-align:left; }
div#bookings table td{ padding-left:10px; }
div#bookings table td:first-child{ padding-left:0px; }
div#bookings table td.ticketName{ color:#999; }


/* Step 5 - enter name */

div.element{ padding-bottom:5px; }
div.element span.label{ color:#999; }
div.element input.fstxt{width:200px;height:24px;}

/* Step 6 - confirm name match */
div.match { width:400px; float:none;margin:0px auto 20px auto;}
div.match div{ text-align:left; }
div.option{ text-align:left;}
div.matches{ text-align:center;}



div#confirmation,div#assessment{ width:500px; margin:auto;}
div#userDetails{ float:left; text-align:left;width:50%;height:100%;}
div#bookings{ float:left; text-align:left;width:50%;}
div#options{ text-align:center; margin:40px auto 0px auto;font-size:14px;}

div#userDetails a {
display:inline-block;
text-decoration:none;
color:#999;
background:#f5f5f5;
padding:3px;
border:1px solid #eee;
margin-top:10px;
}

div#attendeeDetails{
	float:left; text-align:left;height:100%;
	color:#676767;
}

div#attendeeDetails input.fchk
{
float:left;display:block;
}
div#attendeeDetails div.attendeeDetails{ float:left; padding-left:15px;}
div#attendeeDetails div.attendee
{
float:left;
clear:both;
padding-bottom:10px;
}
div#attendeeDetails div.attendee.uline
{
border-bottom:1px solid #ccc;
margin-bottom:10px;
}

/* update profile */
div#kioskProfile { padding:15px;text-align:center; }
div#kioskProfile div.form span.label{ display:inline-block;width:100px;padding-left:20px; text-align:left;}
div#kioskProfile div.instructions{ width:380px; }
input.fphtxt, input.fphcodetxt{height:24px;}
input.fphtxt {width:117px;}
div#kioskProfile input{ z-index:500;}
/* Used to display val;idation error in update popup frame */
.error{ color:#990000; }

table#attendeeSelect{
	margin-top:40px;
	min-width:700px;
}
table#attendeeSelect td
{
max-width:300px;
padding:3px 8px;
/* white-space:nowrap;
border-bottom:1px solid #ccc; */
}
table#attendeeSelect tr.main td
{
	border-bottom:0;
}
table#attendeeSelect tr.extra td
{
font-size:90%;color:#999;
padding:5px 3px;
 /* border-bottom:1px solid #ccc; */
}
table#attendeeSelect tr.extra td span.property
{
	color:#676767;
	white-space:nowrap;
	display:inline-block;
	padding-right:10px;

}
table#attendeeSelect tr.extra td span
{

}
table#attendeeSelect tr.main td
{

	border-top:1px solid #ccc;

}
table#attendeeSelect tr.extra td span.sub-label
{

color:#bbb;
}
h1
{
	margin-bottom:30px;margin-top:0px;
}

span.ticketId,td.tid,span.booker
{
/* color:#999; */
}
span.unconfirmed
{
color:#900;
font-weight:bold;
}
span.draft
{
	color:#898989;
	font-size:90%;

}
div#attendeeStatus
{
font-size:80%;
padding:10px 0;
float:right;
top:-20px;
position:relative;
color:#999;
/*clear:both;*/
 }
div#attendeeStatus span
{
border:none;
color:#666;
}
span.done,a.done{ color:#900;font-weight:bold; }
div.allAttendees span.done, div.allAttendees a.done{ color:#333;font-weight:normal; }
div#statusMsg
{
color:#aaa;font-style:italic;
}
div#attendeeAssessment{ text-align:center; margin:auto;}
div#attendeeAssessment div{ width:350px;  margin:auto;}
div#attendeeAssessment span.lbl
{
display:block;
text-align:left;
padding:0 0 10px 0px;
color:#999;
}
div#kioskContainer h1 span.main
{
display:none;
}
div#kioskContainer h1 span.name
{
color:#676767;
display:inline-block;
margin-bottom:10px;
}

div#kioskContainer h1 span.name a#editAttendee
{
	color:#ccc;
	font-size:16px;
	font-weight:normal;
}

div#kioskContainer h1 span.theoryId,div#kioskContainer h1 span.extra
{
color:#666;
font-weight:normal;
font-size:14px;
}
div#kioskContainer h1 span.extraLabel
{
display:inline-block;
width:140px;

}
div#kioskContainer h1 span.extraValue
{



}
@media screen and (min-width:900px){
div#headerContainer
	{
	left:-100px;
position:relative;
	}
}

table#attendeeSelect td.ctl
{
text-align:center;
padding-left:4px;
}

table#attendeeSelect td.ctl a
{
display:inline-block;
  width:90px;
  background:#ccc;
  padding:3px;

}
table#attendeeSelect td.ctl a.done
{
	color:#999;
}
table#attendeeSelect td.ctl a.not-awarded
{
	color:#900;
	background:none;
	border:1px solid #ccc;

}
table#attendeeSelect td.ctl a.awarded
{
color:#090;
	background:none;
	border:1px solid #ccc;
}



div#headerContainer{ text-align:left;margin:auto; }
h1 span.customDate
{
	font-weight:normal;
	font-size:14px;
}
div#event_chosen
{
	text-align:left;

}


/* BARCODE SCANNER */

.icon-barcode {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTAgNGg0djIwaC00ek02IDRoMnYyMGgtMnpNMTAgNGgydjIwaC0yek0xNiA0aDJ2MjBoLTJ6TTI0IDRoMnYyMGgtMnpNMzAgNGgydjIwaC0yek0yMCA0aDF2MjBoLTF6TTE0IDRoMXYyMGgtMXpNMjcgNGgxdjIwaC0xek0wIDI2aDJ2MmgtMnpNNiAyNmgydjJoLTJ6TTEwIDI2aDJ2MmgtMnpNMjAgMjZoMnYyaC0yek0zMCAyNmgydjJoLTJ6TTI0IDI2aDR2MmgtNHpNMTQgMjZoNHYyaC00eiI+PC9wYXRoPjwvc3ZnPg==);
}

.overlay {
	overflow: hidden;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}

.overlay__content {
	top: 50%;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-height: 90%;
	max-width: 800px;
}

.overlay__close {
	position: absolute;
	right: 0;
	padding: 0.5rem;
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	background-color: white;
	cursor: pointer;
	border: 3px solid black;
	font-size: 1.5rem;
	margin: -1rem;
	border-radius: 2rem;
	z-index: 100;
	box-sizing: content-box;
}

.overlay__content video {
	width: 100%;
	height: 100%;
}

.overlay__content canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

#interactive.viewport {
	position: relative;
}

#interactive.viewport > canvas, #interactive.viewport > video {
	max-width: 100%;
	width: 100%;
}

canvas.drawing, canvas.drawingBuffer {
	position: absolute;
	left: 0;
	top: 0;
}
	div#mDetect{
		display:block;
	}

	/* ROLL CALL */
	table#attendeeSelect tr.primary td
	{
		padding-top:8px;
		background:#f7f7f7;
	}
	tr.extra.form,	tr.extra.cert
	{

		display:none;
	}
	tr.extra.cert	input.fchk
	{
		position:relative;
		top:5px;
	}
	tr.extra.cert	span.cert-label
	{
		font-weight:bold;
	}
	tr.extra.cert	input.smallButton
	{
		margin-left:15px;
	}
	tr.extra.cert	input.fstxt
	{
    display: inline-block;
    border-color: #ccc;
    width: 80px;

	font: 13px arial,helvetica,sans-serif;
    padding: 3px;
    height: 20px !important;
	border-radius:5px
	}
	div.formControl
	{

		display:inline-block;
		vertical-align:middle;
		white-space:nowrap;

	}
	div.formControl span.formLabel
	{
		float:left;
		padding:0px 10px;
		position:relative;
		top:5px;

	}
	div.formControl textarea
	{

		display:inline-block;
		border-color:#ccc;
		width:220px;
		max-width:230px;
		font-size:13px;
		padding:3px;
		line-height:14px;
		height:30px !important;
		max-height:30px !important;
	}

	div.toggler
	{
		float:right;
		color:#ccc;
		vertical-align:middle;
		cursor:pointer;
		margin:0;
	}

	table#attendeeSelect tr.extra td	div.toggler span {
/*    pointer-events: none;
    position: absolute !important;*/
    right: 0;
    color: #007fe3;
/*    top:14px;
    margin-top: -12px;*/
	right:-10px;
	top:-5px;
    display: inline-block;
    fill: currentColor;
    height: 24px;
    line-height: 24px;
    position: relative;
    width: 24px;
	}
	div.toggler span.rotate {
		transform: rotate(180deg);
	}

	div.toggler span svg {
    display: block;
    height: 100%;
    width: 100%;
	}
	input.button#editAttendeeButton{
		display:none;
	}

@media
only screen and (max-width: 760px) {
	div.formControl,
	#attendeeSelect,
	#attendeeSelect thead,
	#attendeeSelect tbody,
	#attendeeSelect th,
	#attendeeSelect td,
	#attendeeSelect tr {
		display: block;
	}
	div.formControl
	{

		padding-bottom:10px;
	}

	div.formControl span.formLabel
	{
		display:block;
		float:none;
		padding:0px 10px 0px 0px;
		position:relative;
		top:0px;

	}
	div.formControl textarea
	{

		height:50px !important;
		max-height:70px !important;
	}
	div.toggler
	{
		margin:-5em 4em 0 0;
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	#attendeeSelect thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	table#attendeeSelect tr.primary td
	{

		background:#fff;
	}

/*	#attendeeSelect tr { border: 1px solid #ccc; }*/

	#attendeeSelect td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}

	#attendeeSelect td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
	table#attendeeSelect tr.primary td
	{
		padding-top:0px;
	}

		/*
	Label the data
	   */
	/*
	td:nth-of-type(1):before { content: "Attending"; }
	td:nth-of-type(2):before { content: "Name"; }
	td:nth-of-type(3):before { content: "Ticket #"; }
	td:nth-of-type(4):before { content: "Company"; }
	td:nth-of-type(5):before { content: "Email"; }
*/
}
@media screen and (max-width:760px){

	div#mDetect{
		display:none;
	}

	#attendeeSelect tr.extra.form
	{
		display:none;
	}

	div#kioskHeader{padding-bottom:30px;width:420px;}
	div#kioskPanel{padding-bottom:30px;width:420px;}

	div#kioskContainer select.fsel#event {
		max-width:400px;
	}
h1
{
	margin-bottom:30px;margin-top:30px;
}

	div#attendeeStatus
	{
		float:none;
		top:0;
		padding:0 0 50px 0;
		right:-150px;


	}
	div#kioskHeader span.totals,
	div#kioskHeader span.totals span
	{
	text-decoration:none;
	cursor:default;
	color:#999;
	background:#ffffff;

	display:inline-block;
	}
	div#attendeeDetails div.attendeeDetails{ padding-left:5px;}
	p.scanNote{padding-left:5px;}

	span.done em,a.done em{font-style:normal; }

	div#kioskContainer div.instructions{padding-top:0px;}
	table#attendeeSelect{

		margin-left:20px;
	}
	table#attendeeSelect td
	{
/*		display:block;*/
		padding:2px;
		border-bottom:0;
	}
	table#attendeeSelect td.name{font-weight:bold;}
	/*table#attendeeSelect td.chk{display:inline;}*/
	table#attendeeSelect  tr.extra td.blank{display:none;}
	table#attendeeSelect td,
	table#attendeeSelect tr.extra td
	{border-bottom:none;}
	table#attendeeSelect tr.main td
	{
		border-top:none;
	}

	table#attendeeSelect tr.extra td
	{
		border-bottom:1px solid #ccc;
		border-bottom:none;
	}
	table#attendeeSelect tr.primary td.chk
	{

		/* border-top:1px solid #ccc; */
	}
	table#attendeeSelect tr.extra td.blank
	{border-bottom:none;}

	div#confirmation{
		float:left;
		width:400px;
		max-width:400px;

	}

	table#attendeeSelect tr.extra.form td
	{
		padding-bottom:10px;


	}
	table#attendeeSelect tr.primary td.chk
	{
		padding-top:20px;
	}
	div.formControl.save{display:inline-block;}
	div#confirmation.group{
		padding-left:20px;
	}
	div#buttonPanel{
		float:left;
		width:180px;

	}
	div.failure{

		max-width:380px;
		padding-left:20px;
	}
	div#attendeeDetails span.name
	{
		font-size:120%;
	}
	span.booker
	{
		color:#999;
	}

	div#kioskContent.scanning div#buttonPanel
	{
		float:left;
		padding-left:50px;
	}

	div#kioskHeader div#eventName
	{
	padding:3px 0;
	}


	div#kioskPanel{

		padding:0px;
	}

/* custom assessment forms */
	a#editAttendee{
		display:none;
	}

	input.button#editAttendeeButton{
		display:inline-block;
		margin-left:35px;

	}
	div#assessment,div#details,h1.assessment span.name
	{
		padding-left:15px;
	}
	table#attendeeSelect tr.extra td span.property
	{
		white-space:normal;
	}
	table#attendeeSelect td
	{
		max-width:auto;
		padding:3px 8px;
	}
	table#attendeeSelect td.ctl
	{
		text-align:left;
	}
	table#attendeeSelect td.ctl a
	{
		padding:5px; text-align:center;
	}
}

/* custom assessment forms */

h1.assessment
{
width:600px;
margin-bottom:20px;
text-align:left;
font-size:19px;
line-height:1.1em;
padding:20px;
	 margin-bottom:0px;
	 padding-left:0px;

}

h1.assessment div#details
{
padding:6px 0;


}
h1.assessment div#details div#switch
{
float:right;
width:50px;
height:10px;
cursor:pointer;
font-size:12px;
text-transform:uppercase;
font-weight:normal;
color:#ccc;
}
div#attendeeAssessment div
{
	width:400px;
}

div#attendeeAssessment span.lbl::after
{
content:''
}
div#attendeeAssessment div.field
{
text-align:left;
padding:15px;
}
div#attendeeAssessment textarea
{
width:300px;
height:80px;
}
div#attendeeAssessment label
{
/* top:3px; */
}


div#kioskContainer div#attendeeAssessment input.fmtxt {
    width: 300px;
}
div#kioskForm div#details span#guts
{
	display:block;
	border:1px solid #ccc;
	border-radius:5px;
	padding:10px;
}
h1.assessment div#details div#switch
{
	display:none;
}
div#attendeeAssessment span.lbl
{
    display: inline-block;
    text-align: left;
    padding: 0 15px 0px 0px;
    color: #999;
	width:110px;

}
div#attendeeAssessment span.lbl.vert
{
	width:auto;
}
div#attendeeAssessment span.lbl.header {
    display: block;
    text-align: left;
    padding: 0 0 10px 0px;
    color:black;
		width:500px;
}
div#attendeeAssessment div.field
{
padding:5px 15px;
}
div#attendeeAssessment {
    border-top: none;
}
input.finttxt
{
	border-radius: 5px;
	position:relative;
	margin-left:20px;
}
div#attendeeAssessment div.section
{
	padding:10px 0px;
	text-align:left;
}
div#attendeeAssessment div.section.extra
{
	padding-left:20px;
}
div#kioskContainer  span.extra {

    color: #666;
    font-weight: normal;
    font-size: 14px;
}
div#kioskContainer span.extraLabel {
    display: inline-block;
    width: 110px;
}
}
 div#kioskContainer h1 span.name
 {
	 color:black;
 }
div#attendeeAssessment span.lbl.disabled,.disabled{ color:#ccc; }
div#attendeeAssessment div.cert-info
{
font-size: 13px;
padding: 5px 0 0 10px;
}
div#kioskContainer h1 span.extra.missing-value
{
	color:#900;
}
div#attendeeAssessment div.fields label
{
	display:inline-block;
	width:170px;
}
div#attendeeAssessment div.fields label.concise
{

	width:auto;
}

table#attendeeSelect tr.extra td span.property .failed
{
	color:#c00;
}
table#attendeeSelect tr.extra td span.property .in-progress
{
	color:#f59323;
}
table#attendeeSelect tr.extra td span.property .completed
{
	color:#3ab73c;
}