body {
	font-family: 'Poppins', sans-serif;
	background: rgb(250,250,250);
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400; 
	overflow-x: hidden;
	width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	color: #3B4D70;
}
h3 { font-size: 1.9em; line-height: 1em; margin-bottom: 25px }
h3 span.sub { font-weight: 400; font-size: .8em; display: inline-block; top: -1px; position: relative }
h4 { line-height: 1.2em; margin-bottom: 13px; font-size: 1.1em }
p { font-size: 1.1em; font-family: 'Poppins', sans-serif; line-height: 1.2em }
p strong, ul li a strong, ul li strong, a strong { font-weight: 600 }
#shade { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(86,112,129,.5); z-index: 50; opacity: 0; transition: opacity 0.3s ease; display: none }
.button.alert { background: #9f2214; border: 0; opacity: .8 }
.button.alert:hover { background: #9f2214 !important; transform: scale(1.05); opacity: 1 }
a.redLink { color: #9f2214; padding-left: 20px; border-top: 1px solid #DDD; display: block; padding-top: 20px; margin-top: 30px }
a.redLink:hover span { text-decoration: underline }

/* -----------------------------------------
 HEADER
----------------------------------------- */
header, header a { color: #577181 }
header { background: white; margin-bottom: 20px; padding: 10px 0; box-shadow: 0 0 10px rgba(0,0,0,.1) }
img.logo { max-width: 290px }
div.logo { background: #567081; height: 40px; width: 40px; border-radius: 50%; line-height: 40px; text-align: center; font-size: 1.1em; font-weight: 700; color: white; margin: 0 auto }
header > .row > .column { position: relative; width: 100% }
img.profile { border-radius: 50% }
div.inits.small.profile, div.inits.medium.profile { display: inline-block }
div.inits.medium.profile { vertical-align: top }
div.inits { background: transparent; height: 60px; width: 60px; border-radius: 50%; line-height: 60px; text-align: center; font-size: 1.6em; font-weight: 700; color: #515A8A; border: 1px solid #abb8c0 }
div.inits.small { height: 40px; width: 40px; line-height: 40px; font-size: 1.1em }
div.inits.medium { height: 60px; width: 60px; line-height: 60px; font-size: 1.1em }
div.inits.large { height: 150px; width: 150px; line-height: 150px; font-size: 3.5em; margin-bottom: 10px; border: 1px solid rgb(106, 136, 181); background: white; color: #515A8A }
body.drawer, body.group-checkin { overflow-y: hidden }
body.drawer #shade, body.group-checkin #shade { opacity: 1; display: block }
body.drawer .SIDEBAR { right: 0; overflow-y: scroll }
body.group-checkin .SIDEBAR-group { right: 0; overflow-y: scroll }
.SIDEBAR { right: -600px; background: white; width: 430px; position: fixed; bottom: 0; top: 0; z-index: 990; padding: 90px 20px 0; color: #567081; transition: all .3s; }
.SIDEBAR-group { right: -600px; background: white; width: 430px; position: fixed; bottom: 0; top: 0; z-index: 996; padding: 70px 20px 0; color: #567081; transition: all .3s; }
.SIDEBAR h3 { margin-left: 10px; font-size: 1.4em; margin-bottom: 20px }
.SIDEBAR h5 { font-size: 1.1em; display: inline-block; margin-left: 10px; margin-bottom: 0 }
.SIDEBAR img.profile { display: block; margin-left: 10px; margin-bottom: 15px }
.SIDEBAR .me { margin-bottom: 20px }
.SIDEBAR ul { padding-bottom: 15px; padding-left: 10px; padding-right: 30px; margin-bottom: 20px }
.SIDEBAR p { margin-left: 10px; padding-right: 30px; font-size: 1.1em; line-height: 1.4em }
.SIDEBAR ul li { margin-bottom: 10px }
.SIDEBAR ul li a { color: inherit; padding: 0 0 0 15px; color: #567081; font-size: 1.1em }
.SIDEBAR li a i { float: left; line-height: inherit; width: 15px; color: #abb8c0 }
.SIDEBAR li a:hover { text-decoration: underline }

.SIDEBAR ul.no-icon { padding-left: 0; border-bottom: 0 }
.SIDEBAR ul.no-icon li { margin-bottom: 5px }
.SIDEBAR ul.no-icon li a { padding-left: 10px; padding-block: 8px; border-bottom: 1px solid #E1E1E1; display: block; font-size: 1.4em  }

div.subtle { background: whitesmoke; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-top: 30px }
.SIDEBAR div.subtle h3 { margin-bottom: 30px }
#menuBtn, #menuBtn-group { display: block; z-index: 995; position: absolute; right: 30px; top: 4px; height: 30px; padding: 10px }
#menuBtn-group { z-index: 997; display: none }
.doubledouble { background: transparent; width: 30px; text-indent: -9999px }
.doubledouble .line { height: 2px;background-color: white; display: block; margin-bottom: 7px; position: relative }
.doubledouble .line { transition: all .3s; background-color: #567081 }
.doubledouble .line.three { margin-bottom: 0 }
body.drawer a#menuBtn .doubledouble .line.one { -ms-transform: translate(0,4px) rotate(-45deg); -webkit-transform: translate(0,4px) rotate(-45deg); transform: translate(0,4px) rotate(-45deg) }
body.drawer a#menuBtn .doubledouble .line.three { -ms-transform: translate(0,-5px) rotate(45deg); -webkit-transform: translate(0,-5px) rotate(45deg); transform: translate(0,-5px) rotate(45deg) }

body.group-checkin a#menuBtn-group { display: block }
body.group-checkin a#menuBtn-group .doubledouble .line.one { -ms-transform: translate(0,4px) rotate(-45deg); -webkit-transform: translate(0,4px) rotate(-45deg); transform: translate(0,4px) rotate(-45deg) }
body.group-checkin a#menuBtn-group .doubledouble .line.three { -ms-transform: translate(0,-5px) rotate(45deg); -webkit-transform: translate(0,-5px) rotate(45deg); transform: translate(0,-5px) rotate(45deg) }

/* DRAWER #2 */
.user { border-bottom: 1px solid #E1E1E1; padding-bottom: 20px }
.user img { border-radius: 50%; vertical-align: top; margin-right: 10px }
.user h4 { margin-bottom: 0 } 
.user .userText { display: inline-block; margin-top: 9px }
.action { display: block; height: 100px; position: sticky; bottom: 0; left: 0; right: 0; text-align: center; padding-top: 22px; border-top: 1px solid #E1E1E1; background: white }
.action .button { padding: 15px 25px }

.profile_container{
	height: auto;
	margin-bottom: 50px;
	overflow: hidden;
	box-shadow: 2.5px 1.5px 1.5px rgba(0, 0, 0, 0.014), 6.1px 3.6px 3.7px rgba(0, 0, 0, 0.02), 11.5px 6.8px 6.9px rgba(0, 0, 0, 0.025), 20.5px 12.1px 12.3px rgba(0, 0, 0, 0.03), 38.4px 22.6px 23px rgba(0, 0, 0, 0.036), 92px 54px 55px rgba(0, 0, 0, 0.05);
	word-break: break-word;
	max-width: 450px; position: relative
}
.my-profile p {
	color: #666666;
	font-family: 'Poppins', sans-serif;
	line-height: 1.3em;
	margin-bottom: 5px;
}
div.role { position: absolute; right: 20px; top: 168px; padding: 3px 10px; border-radius: 5px; text-transform: uppercase; font-weight: 600 }
div.role.admin { border: 1px solid #9f2214; color: #9f2214 }
div.role.visitor { border: 1px solid #567081; color: #567081 }
.callout p { color: #333 }
.my-profile p.time { font-size: .85em; margin-top: 25px; text-align: center }
.image_container {
	height: 150px;
	/* background: linear-gradient(180deg, #3B4D70 0%, #6A88B5 100%); */
	background: url('/assets/img/profile-bg.jpg');
	background-size: cover
}
a.print { position: absolute; right: 40px; top: 40px; color: #567080; background: white; width: 40px; height: 40px; text-align: center; line-height: 42px; border-radius: 50%; font-size: 1.2em; padding-left: 2px }
a.print:hover { background: #567080; color: white }
.objective { max-width: 230px; margin: 0 auto }
.image_container.checked-in { background: url('/assets/img/profile-bg-green.jpg'); background-size: cover }
.image {
	background: transparent;
	height: 150px;
	width: 150px;
	padding: 0px;
	border-color: #3B4D70;;
	border-radius: 50%;
	transform: translate(0px,50px);
	margin: 0 auto;
}
.image img {
	height: 150px;
	width: 150px;
	border-radius: 50%;
	
}
.text_container {
	height: auto;
	background: #fff;
	padding: 80px 15px 30px
}
.text_container .title {
	padding-bottom: 20px;
	padding-left: 18px
}
.text_container .button { max-width: none !important; margin-top: 15px !important  }
.login-content { padding: 200px 0 }

/* FORMS */
#loginForm{
	width: 100%;
	margin: auto;
	margin-top: 3%;
}
/* img#avatarPreview { border-radius: 50% } */
form .form-control {
	background-color: white ;
	padding: 17px 20px;
	color: #000;
	font-size: 18px;
	font-weight: 400;
	font-family: 'Poppins', sans-serif;
	line-height: 27px;
	box-shadow: inherit;
	border: 0;
	height: auto;
}
div#visitorCheckedIn form .form-control { border: 1px solid #DDD }
form .form-control::placeholder { 
	color: #000;
}
a.button:focus, .button:focus { background: transparent !important; color: #515A8A }

.button.scan { color: white; background: #515A8A }
.button.btn-2 { color: #515A8A; border: 1px solid #515A8A; width: 49% !important; float: right }
.button.btn-2 i { margin-right: 15px; font-size: 20px; line-height: 20px; display: none }
.button.btn-2.group { border: 1px solid #7d8950; color: #7d8950 }
.button.btn-2.group:hover { background: #7d8950 !important; color: white }
.button.green-btn, .button.btn-dismiss { width: 49% !important; float: left }
.SIDEBAR .button.green-btn { width: 100% !important; float: none }
.button.green-btn { background: #7d8950; color: white; border-color: #7d8950 }
.button.btn-dismiss { border: 1px solid #9f2214; color: #9f2214 }
.button:hover { background: #515A8A !important; color: #F3F3F3 }
.button.green-btn:hover { background: #8aa037 !important }
.button.btn-dismiss:hover { background: #9f2214 !important; color: white }
.button[disabled] { color: #7d8950 }
.button[disabled] { background-color: inherit }
.button.compact { padding: 3px 15px; font-weight: 400; font-size: .85em }
.button.compact i { margin-right: 8px }
.button.compact.solid { background: #515A8A; color: white }
.button.compact.solid.green { background: transparent; border-color: #7d8950; color: #7d8950; font-weight: 600 }
.button.compact.solid.green:hover { background: #8aa037 !important; border-color: #8aa037; color: white }
form .input-login, .button {
	background: transparent;
	color: #515A8A;
	font-size: 18px;
	font-weight: 600;
	font-family: 'Poppins', sans-serif;
	line-height: 27px;
	padding: 15px 5px;
	text-align: center;
	height: auto;
	/* margin: 1.5rem 0; */
	box-shadow: inherit;
	border: 1px solid #515A8A;
	border-radius: 6px;
	cursor: pointer;
	transition: .5s all;
}
.my-profile .button {
	width: 100%;
	max-width: 350px;
	margin-top: 0;
}
p.howto { margin-top: 30px; max-width: 350px; margin: 0 auto }
p.howto a { color: #3B4D70 }
p.howto a:hover { text-decoration: underline }

.my-profile .button.small { width: inherit; padding: 0 10px; margin: 0 0 0 10px }

.print-card { margin-top: .5rem }

form .input-login:hover, .button:hover, .guest-status .print-card .button:hover {
	background: #0078a0;
	color: #fff;
}
form .button { width: 100% }
.forgot-text p {
	font-weight: 400;
	font-family: 'Poppins', sans-serif;
	line-height: 27px;
	font-size: 18px;
	color: #000;
	margin-bottom: .5rem;
}
.forgot-text p a {
	color: #515A8A;
	font-weight: 600;
}
#registrationform{ margin: 4rem auto 0 auto }
.registration-content {
	padding: 100px 0;
}
.registration-content form .form-control {
	margin-bottom: 2rem;
}
input#photo, #user-photo { background-color: transparent }

/* CHECKING IN */
.checkbox-btn {
	margin-top: 2rem;
	border: solid 1px #7d8950;
	padding: 28px 10px;
	text-align: center;
	font-size: 24px;
		line-height: 36px;
		font-weight: 600;
		color: #7d8950;
		font-family: 'Poppins', sans-serif;
}

.not-checkbox-btn {
	border:solid 1px #abb8c0;
}
.not-checkbox-btn {
		color: #abb8c0;
}
.checkbox-btn .checkbox-custom {
	opacity: 0;
	position: absolute;
}
.checkbox-btn .checkbox-custom,
.checkbox-btn .checkbox-custom-label {
	display: inline-block;
	vertical-align: middle;
	margin: 5px;
	cursor: pointer;
}
.checkbox-btn.checkbox-custom span:before {
		content: "";
		display: inline-block;
	 width: 12px;
		height: 24px;
		border: solid #7d8950;
		border-width: 0 4px 4px 0;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		border-radius: 0px;
		margin: 0px 20px 0 5px;
}
.not-checkbox-btn .checkbox-custom:checked + .checkbox-custom-label:before {
		border: solid #abb8c0;
		border-width: 0 4px 4px 0;
}
label.error {
	margin-bottom: 17px;
	color: red;
}
input[type=text]::placeholder, input[type=email]::placeholder, input[type=password]::placeholder { color: #AAA; opacity: 1 }
input[type=text]:-ms-input-placeholder { color: #AAA }
input[type=text]::-ms-input-placeholder { color: #AAA }

.checkbox-btn.pending { color: #9f2214 }
.checkbox-btn.pending span:before { content:"\f06a"; font:13px/1 "Font Awesome\ 5 Pro"; margin: 0px 13px 0 5px; }

.reveal h5 { margin-left: -16px; margin-top: 20px }

/* -----------------------------------------
 TABLE
----------------------------------------- */
table, table a { color: #567081 }
table a:hover { color: #3B4D70 }
table tbody td { line-height: 1.2em }
table tbody td span.company { font-size: .8em }
table img { border-radius: 50% }
table .button { padding: 5px 10px; font-size: .8em; border: 1px solid #9f2214; color: #9f2214; margin-bottom: 0; width: 100% }
table .button:hover { background: #9f2214 !important; color: white }
td.name a:after{ content:"\f0a9"; font:13px/1 "Font Awesome\ 5 Pro"; margin-left: 5px }
table .checkbox-btn.checkbox-custom span:before { width: 8px; height: 15px; border-width: 0 3px 3px 0; margin: 0px 13px 0 5px }
table .checkbox-btn { font-size: .9em; line-height: 1em; margin-top: 0; padding: 0; border: 0; text-align: left }
td.checkedCol { width: 35% }

div.list { padding-top: 20px; min-height: calc(100% - 185px); padding-bottom: 20px }
div.list form { padding-left: 20px }
.form-check { display: inline-block; margin-right: 20px; font-size: 1em; color: #567081; margin-bottom: 10px }
.form-check input, input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; background-color: white; color: white; top: 7px; height: 25px; width: 25px; border: 0; border-radius: 50px; cursor: pointer; outline: none; margin-bottom: 0; margin-right: 8px; border: 2px solid #EEE }
.form-check input:checked::before, input[type="radio"]:checked::before { position: absolute; font: 15px/1 'Open Sans', sans-serif; left: 6px; top: 1px; content: '\02143'; transform: rotate(40deg); font-weight: 600; color: #849f6e }
.form-check input:hover, input[type="radio"]:hover { background-color: white }
.form-check input:checked, input[type="radio"]:checked { border: 2px solid #849f6e; font-weight: 600 }

@media (min-width: 0em) and (max-width: 30.5em) { 
	.SIDEBAR, .SIDEBAR-group { width: 100% }
	#registrationform{ width: 100%;}
 }

@media screen and (min-width: 40em) {
	.button.btn-2 i { display: inline-block }
	.button.green-btn, .button.btn-2, .button.btn-dismiss { float: none; width: 100% !important }
	.multi-buttons { margin: 30px 0 0px 0 }
	form .input-login, .button { padding: 22px 5px }
	table tbody td span.company { display: none }
	td.checkedCol { width: 20% }
}
@media screen and (min-width: 48.0625em) {
	header { margin-bottom: 50px }
	h4, p { font-size: 1.2em }
	img.logo { max-width: 370px }
	.text_container{ padding: 80px 60px 60px 60px }
	#loginForm { width: 35% }
	.row.my-profile .columns:nth-of-type(2), .row.my-profile .columns:first-of-type { padding: 0 35px }
}
@media screen and (min-width: 64.0625em) {
	.multi-buttons { margin: 50px 0 0px 0 }
	td.checkedCol { width: inherit }
}

@media print{
	body {
		font-family: 'Poppins', sans-serif;
		margin: 0;
		padding: 0;
		font-size: 16px;
		line-height: 24px;
		font-weight: 400;
	}
	h1, h2, h3, h4, h5, h6 {
		font-family: 'Poppins', sans-serif;
		font-weight: 600;
		color: #3B4D70;
	}
	p {
		font-family: 'Poppins', sans-serif;
	}
	.row { margin-top: 100px }

	.profile_container {
	    height: auto;
	    margin-top: 20px;
	    overflow: hidden;
	    box-shadow: 0 !important;
	    word-break: break-word
	}
	.image {
	    background: transparent;
	    height: 200px;
	    width: 200px;
	    padding: 0px;
	    border-color: #3B4D70;
	    border-radius: 50%;
	    transform: translate(0px,40px);
	    margin: 0 auto;
	}
	.image img {
	    height: 150px;
	    width: 150px;
	    border-radius: 50%;
	}
	.text_container {
	    height: auto;
	    background: #fff;
	    padding: 50px 20px 20px 20px;
	}
	.text_container .title {
	    padding-bottom: 20px;
	}
	.my-profile p {
	    color: red;
	    font-weight: 400;
	    font-family: 'Poppins', sans-serif;
	    line-height: 1.2em;
	    font-size: 1.2em;
	    margin-bottom: 0px;
	}
	.objective img {
	    width: 80%;
	    margin: 0 auto;
	}
}