* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a {
	color: inherit;
	text-decoration: none;
}

body {
	color: #34495e;
	font-weight: 400;
	font-size: 13px;
	background-color: #eff2f6;
	font-family: 'Inter', Helvetica, Arial, sans-serif;
}

input {
	font-family: 'Inter', Helvetica, Arial, sans-serif;
}

body ::selection {
	background-color: #6772E5;
	color: #fff;
}

.clearfix {
	clear: both;
}

.nav-account-name {
	top: 16px;
	right: 70px;
	font-size: 18px;
	position: fixed;
}

.nav-logout {
	top: 12px;
	right: 10px;
	font-size: 14px;
	position: fixed;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	border: 1px solid #ccc;
}

.dnone {
	display: none !important;
}

.login-pin-link {
	right: 20px;
	bottom: 20px;
	position: fixed;
	color: #fff;
	line-height: 34px;
	border-radius: 18px;
	padding: 0 10px;
	height: 38px;
	font-weight: 500;
	cursor: pointer;
	display: none;
	text-transform: uppercase;
	border: 2px solid #fff;
}

.login-pin-link.is-chat-active {
	bottom: 75px;
}

.login-pin-link:hover {
	color: #fff;
	background-color: #59a4fa;
}

.bg-login .login-pin-link {
	display: block;
}

@media (min-width: 601px) {
	.bg-login {
		min-height: 100vh;
		background-color: #f0f3f7;
		background: url(../svg/bg-login.svg) bottom/cover no-repeat #f0f3f7;
	}
}

@media (max-width: 600px) {
	.bg-login .login-pin-link {
		display: none;
	}
}

/* Breakpoints: 1160px, 1100px e 600px */

.logo-wrapper {
	display: none;
}

@media (min-width: 900px) {
	.logo-wrapper {
		display: block;
		position: fixed;
		top: 18px;
		left: 20px;
	}

	.logo-icon {
		float: left;
		width: 36px;
		height: 36px;
		fill: #6772E5;
	}

	.logo {
		color: #6772E5;
		float: left;
		height: 40px;
		font-size: 28px;
		font-weight: 300;
		line-height: 40px;
		margin-left: 5px;
		letter-spacing: -0.5px;
		font-family: 'Ropa Sans', Helvetica, Arial, sans-serif;
	}
}

.box {
	top: 50%;
	left: 50%;
	width: 400px;
	height: 510px;
	padding: 40px;
	overflow: hidden;
	border-radius: 16px;
	margin-top: -255px;
	margin-left: -200px;
	position: absolute;
	background-color: #fff;
	box-shadow: 0 12px 18px 2px rgba(34,0,51,.04),0 6px 22px 4px rgba(7,48,114,.12),0 6px 10px -4px rgba(14,13,26,.12);
}

.box-title {
	font-size: 18px;
	text-align: center;
	margin-top: -10px;
	font-weight: 500;
}

.box-codes {
	width: 280px;
	height: 70px;
	margin: 20px auto 30px;
}

.box-code {
	width: 60px;
	height: 70px;
	float: left;
	line-height: 62px;
	margin: 0 5px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	border-radius: 10px;
	border: 4px solid #eaeaea;
	background-color: #fff;
	box-shadow: 0 12px 18px 2px rgba(34,0,51,.04);
}

.box-code.current {
	background-color: #f8fafc;
	border-color: #6772E5;
}

.keyboard-wrapper {
	float: left;
	width: 400px;
	height: 350px;
	margin-left: -40px;
	padding-top: 30px;
	background-color: #f8fafc;
	border-top: 1px solid #eaeaea;
}

.keyboard {
	width: 210px;
	margin: 0 auto;
}

.keyboard-key {
	width: 60px;
	height: 60px;
	float: left;
	margin: 5px;
	cursor: pointer;
	text-align: center;
	line-height: 58px;
	font-size: 24px;
	user-select: none;
	border-radius: 10px;
	border: 2px solid #eaeaea;
	background-color: #fff;
	box-shadow: 0 12px 18px 2px rgba(34,0,51,.04);
}

.keyboard-key.double {
	width: 130px;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
}

.keyboard-key:hover {
	color: #6772E5;
	border-color: #6772E5;
}

/*------ PIN ONLINE STATUS ---------*/

.pin-online-status {
	width: 20px;
	height: 20px;
	right: 10px;
	bottom: 10px;
	position: fixed;
	display: none;
	border-radius: 50%;
}

.pin-online-status.online {
	display: block;
	background-color: #2ecc71;
	border: 1px solid #27ae60;
}

.pin-online-status.offline {
	display: block;
	background-color: #c0392b;
	border: 1px solid #e74c3c;
}

/*------ HIT TIMECARD ---------*/

.box-close {
	display: none;
	font-size: 14px;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	border: 1px solid #ccc;
}

@media (min-width: 601px) {
	.box.hit-enabled {
		height: 330px;
		margin-top: -165px;
	}

	.box.hit-enabled.location-enabled {
		height: 570px;
		margin-top: -285px;
	}

	.box.hit-enabled.location-enabled.has-timecard {
		height: 620px;
		margin-top: -310px;
	}

	.box.hit-enabled.location-disabled.has-timecard {
		height: 375px;
		margin-top: -187px;
	}

	@media (max-height: 650px) {
		.box.hit-enabled.location-enabled {
			top: 20px;
			margin-top: 0;
		}
	}
}

.box.hit-enabled .box-close {
	display: block;
}

.title-user-name {
	padding: 0 20px;
	margin-bottom: 25px;
	line-height: 24px
}

.box-timecard-info {
    font-size: 14px;
	margin-bottom: 15px;
	text-align: center;
	color: #6772e5;
	padding-top: 20px;
	border-top: 1px solid #eaeaea;
}

.box-timecard-info.empty {
	color: inherit;
}

.box-timecards {
	width: auto;
	display: none;
	margin-top: 20px;
	margin: 0 auto;
	text-align: center;
}

.box-timecard {
	width: 60px;
	display: inline-block;
    font-size: 16px;
    border: 2px solid #eaeaea;
	background-color: #fff;
    padding: 5px 0;
	text-align: center;
    border-radius: 5px;
    margin: 0 3px;
	box-shadow: 0 12px 18px 2px rgba(34,0,51,.04);
}

.box-time {
    font-size: 30px;
	margin-top: -10px;
}

.box-button,
.box-button-extra,
.box-button-close {
	cursor: pointer;
	font-size: 13px;
	padding: 0 14px;
	margin: 15px 5px 25px;
	text-align: center;
	height: 36px;
	line-height: 36px;
	border-radius: 4px;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
}

.box-button {
	color: #fff;
	background: #6772E5;
}

.box-button-extra {
	color: inherit;
	background-color: #fff;
	border: 1px solid #eaeaea;
}

.box-button-close {
	background-color: #fff;
	border: 1px solid #eaeaea;
}

.box-button:hover,
.box-button-extra:hover,
.box-button-close:hover {
	transform: translateY(-1px);
	box-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
}

.box-button:hover {
	color: #fff;
	background-color: #7795f8;
}

.box-timecard-location {
	font-size: 14px;
	padding-top: 15px;
	border-top: 1px solid #eaeaea;
}

.box-timecard + .box-timecard-location {
	margin-top: 20px;
}

.box-timecard-location-map {
	margin-top: 15px;
	background-color: #f8fafc;
	border-top: 1px solid #eaeaea;
}

.box-button.loading {
	position: relative;
	padding-left: 30px;
}

.box-button-loading {
   width: 4.8px;
   height: 4.8px;
   border-radius: 4.8px;
   animation: spinner-z355kx 1.4s infinite linear;
   box-shadow: 12px 0px 0 0 #ffffff, 7.4px 9.4px 0 0 #ffffff, -2.6px 11.6px 0 0 #ffffff, -10.8px 5.2px 0 0 #ffffff, -10.8px -5.2px 0 0 #ffffff, -2.6px -11.6px 0 0 #ffffff, 7.4px -9.4px 0 0 #ffffff;
   /* personalizado */
   display: none;
   left: 13px;
   top: 15px;
   position: absolute;
}

.box-button.loading .box-button-loading {
	display: block;
}

@keyframes spinner-z355kx {
	from {
		transform: rotate(0) scale(0.7);
	}
	to {
		transform: rotate(360deg) scale(0.7);
	}
}

/*------ MODAL TIMECARD PHOTO ---------*/

.box-timecard-photo {
	top: 50%;
	left: 50%;
	width: 480px;
	height: 480px;
	position: fixed;
	overflow: hidden;
	margin-top: -240px;
	margin-left: -240px;
	border-radius: 16px;
	background-color: #fff;
	border: 1px solid #eaeaea;
	box-shadow: 0 12px 118px 52px rgba(34,0,51,.1),0 6px 122px 54px rgba(7,48,114,.12),0 6px 10px -4px rgba(14,13,26,.12);
}

.box-timecard-photo-video,
.box-timecard-photo-canvas {
	width: 480px;
	height: 480px;
	display: block;
}

.box-timecard-photo-canvas {
	object-fit: contain;
}

.box-timecard-photo.done .box-timecard-photo-video,
.box-timecard-photo.pending .box-timecard-photo-canvas {
	display: none;
}

.box-timecard-photo-capture,
.box-timecard-photo-capture-retry,
.box-timecard-photo-capture-approved {
	left: 182px;
	bottom: 20px;
	position: absolute;
	padding: 7px 13px;
	border-radius: 5px;
	cursor: pointer;
}

.box-timecard-photo-capture,
.box-timecard-photo-capture-approved {
	background-color: #eff3f6;
	border: 1px solid rgba(27,31,35,.2);
	background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
	color: #24292e;
}

.box-timecard-photo-capture-retry {
	left: 237px;
	color: #fff;
	border-color: #dc3545;
	background-color: #dc3545;
	border: 1px solid #dc3545;
}

.box-timecard-photo-capture-approved {
	left: 162px;
}

.box-timecard-photo.done .box-timecard-photo-capture,
.box-timecard-photo.pending .box-timecard-photo-capture-retry,
.box-timecard-photo.pending .box-timecard-photo-capture-approved {
	display: none;
}

/*------ MODAL ---------*/

.modal-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    overflow-y: auto;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-overlay.show {
    display: block;
}

.modal-box {
	top: 50%;
	left: 50%;
	width: 300px;
	padding: 30px 10px;
	position: fixed;
	font-size: 14px;
	text-align: center;
	border-radius: 16px;
	margin-top: -200px;
	margin-left: -150px;
	background-color: #fff;
	box-shadow: 0 12px 27.26px 1.74px rgba(0,0,0,.25);
}

.modal-box-icon {
	width: 50px;
	height: 50px;
	margin: 0 auto 20px;
}

.modal-box-icon.success {
	background-size: contain;
	background-image: url(../svg/check.svg);
}

.modal-box-icon.error {
	color: #dc3545;
	line-height: 40px;
	font-size: 36px;
	border-radius: 50%;
	border: 3px solid #dc3545;
}

/*------ LOADING ---------*/

.cssload-wrapper {
	width: 160px;
	margin: 70px auto 0;
}

.cssload-container {
	padding: 11px;
	height: 113px;
	width: 113px;
	margin: 34px 23px;
	position: relative;
	text-align: center;
}

.cssload-loading-center {
	display: inline-block;
	position: absolute;
	background: #6772E5;
	height: 34px;
	width: 34px;
	left: 41px;
	top: 42px;
	transform: rotate(45deg);
	border-radius: 3px;
	animation: pulse 1s ease infinite;
}

.cssload-loading {
	display: inline-block;
	position: relative;
	width: 84px;
	height: 84px;
	margin-top: 3px;
	transform: rotate(45deg);
}
.cssload-loading:after, .cssload-loading:before {
	position: absolute;
	content: '';
	height: 11px;
	width: 11px;
	display: block;
	top: 0;
	background: #e1e3fa;
	border-radius: 3px;
	animation-delay: -.8s;
}
.cssload-loading:after {
	right: 0;
	animation: square-tr 2.8s ease infinite;
	animation-delay: .200s;
}
.cssload-loading:before {
	animation: square-tl 2.8s ease infinite;
	animation-delay: .200s;
}

.cssload-loading.cssload-two {
	position: relative;
	top: -90px;
}
.cssload-loading.cssload-two:after, .cssload-loading.cssload-two:before {
	bottom: 0;
	top: initial;
}
.cssload-loading.cssload-two:after {
	animation: square-br 2.8s ease infinite;
	animation-direction: reverse;
}
.cssload-loading.cssload-two:before {
	animation: square-bl 2.8s ease infinite;
	animation-direction: reverse;
}

@keyframes square-tl {
	0% { transform: translate(0, 0); }
	25% { transform: translate(0, 70.5px); }
	50% { transform: translate(70.5px, 70.5px); }
	75% { transform: translate(70.5px, 0); }
}

@keyframes square-bl {
	0% { transform: translate(0, 0); }
	25% { transform: translate(0, -70.5px); }
	50% { transform: translate(70.5px, -70.5px); }
	75% { transform: translate(70.5px, 0); }
}

@keyframes square-tr {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-70.5px, 0); }
	50% { transform: translate(-70.5px, 70.5px); }
	75% { transform: translate(0, 70.5px); }
}
@keyframes square-br {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-70.5px, 0);}
	50% { transform: translate(-70.5px, -70.5px); }
	75% { transform: translate(0, -70.5px); }
}

@keyframes pulse {
	0%, 100% { transform: scale(inherit) rotate(45deg); }
	75% { transform: scale(0.25) rotate(45deg); }
}


/*-------- MOBILE ---------*/

@media (max-width: 600px) {
	body {
		background-color: #f8fafc;
	}

    .box {
		top: 0;
		left: 0;
        width: 100%;
        height: auto;
		padding: 40px 0 0 0;
		position: static;
		border-radius: 0;
		margin-top: 0;
		margin-left: 0;
		box-shadow: none;
    }

	.keyboard-wrapper {
        width: 100%;
		height: auto;
		margin-left: 0;
		min-height: 350px;
	}

	.nav-logout {
		top: inherit;
		bottom: 10px;
	}
	.nav-account-name {
		display: none;
	}
}

/*-------- HIDE/SHOW STATUS ---------*/

.box .title-account,
.box.user-enabled .title-user,
.box.hit-enabled .box-timecards,
.box.hit-enabled .title-user-name,
.box.loading .cssload-wrapper {
	display: block;
}

.box .title-user,
.box .title-user-name,
.box .cssload-wrapper,
.box.loading .box-codes,
.box.loading .box-title,
.box.user-enabled .title-account,
.box.hit-enabled .title-account,
.box.hit-enabled .title-user,
.box.hit-enabled .keyboard,
.box.hit-enabled .box-codes,
.box.hit-enabled.loading .box-timecards,
.box.loading .keyboard {
	display: none;
}

.box.loading {
	padding: 0;
}

@media (min-width: 600px) {
	.box.loading {
		width: 325px;
		height: 330px !important;
		padding: 0;
		margin-left: -162px;
		margin-top: -165px !important;
	}
}



/*-------- PERMISSIONS ---------*/

.permissions {
	left: 20px;
	bottom: 20px;
	position: fixed;
	white-space: nowrap;
}

.permission-photo,
.permission-location {
	float: left;
	border-radius: 10px;
	padding: 8px 10px;
	border: 2px solid #fff;
	background-color: #fff;
	border: 1px solid #fff;
	margin-right: 10px;
	margin-top: 10px;
}

.permission-photo:hover,
.permission-location:hover {
	border-color: #ccc;
	box-shadow: 0 12px 18px 2px rgba(34,0,51,.04);
}

.permission-icon {
	fill: #28a745;
	width: 28px;
	height: 28px;
	float: left;
	margin-top: 4px;
	margin-bottom: 1px;
}

.permission-icon.error {
	fill: #dc3545;
}

.permission-title {
	font-weight: 600;
	color: #dc3545;
	margin-left: 33px;
}

.permission-description {
	margin-left: 33px;
}

@media (max-width: 600px), (max-height: 670px) {
	.permissions {
		left: 0;
		bottom: 0;
	}

	.permission-title,
	.permission-description {
		display: none;
	}

	.permission-photo,
	.permission-location {
		padding: 5px;
		margin-right: 0;
		border-radius: 0;
		border: 1px solid #ccc;
	}

	.permission-photo + .permission-location {
		margin-left: -1px;
	}

	.permission-icon {
		width: 20px;
		height: 20px;
		margin: 0;
	}
}