@font-face {
    font-family: 'Montserrat Medium';
    src: url('fonts/Montserrat-Medium.eot');
    src: url('fonts/Montserrat-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-Medium.woff2') format('woff2'),
        url('fonts/Montserrat-Medium.woff') format('woff'),
        url('fonts/Montserrat-Medium.ttf') format('truetype'),
        url('fonts/Montserrat-Medium.svg#Montserrat-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Bold';
    src: url('fonts/Montserrat-Bold.eot');
    src: url('fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-Bold.woff2') format('woff2'),
        url('fonts/Montserrat-Bold.woff') format('woff'),
        url('fonts/Montserrat-Bold.ttf') format('truetype'),
        url('fonts/Montserrat-Bold.svg#Montserrat-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Regular';
    src: url('fonts/Montserrat-Regular.eot');
    src: url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-Regular.woff2') format('woff2'),
        url('fonts/Montserrat-Regular.woff') format('woff'),
        url('fonts/Montserrat-Regular.ttf') format('truetype'),
        url('fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.grecaptcha-badge{
	visibility: hidden;
}

html, body{
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: #4192c7;
	background-image: url('../../images/header.jpg'), url('../../images/footer.png');
	background-repeat: no-repeat, no-repeat;
	background-size: 100% auto, 100% auto;
	background-position: top center, bottom center;
}

button,
input,
select,
textarea{
	outline: none;
}

.err{
	position: relative;
	display: block;
	color: #f00;
	text-align: left;
	display: none;
	font-family: 'Montserrat Regular';
	font-size: 14px;
	margin-top:5px;
}
	.text-error,
	.text-error:focus{
		border: solid 1px red;
	}
	
	.body{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		left: 50%;
		transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		overflow: hidden;
	}
		.box-register{
			position: relative;
			display: block;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);
			top: 22vh;
			font-family: 'Montserrat Regular';
			background-color: #fff;
			color: #000;
			font-size: 14px;
			padding: 20px;
			box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
			-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
			-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
			border-radius: 30px;
		}
			.judul-register{
				position: relative;
				display: block;
				width: 100%;
				text-align: center;
				font-family: 'Montserrat Bold';
				font-size: 28px;
				margin-bottom: 10px;
			}
				.text-input{
					position: relative;
					display: block;
					border-radius: 10px;
					padding: 7px 10px;
					border: solid 1px #000;
				}
				.input-group .text-input{
					border-radius: 10px 0 0 10px;
				}
				.select-input{
					position: relative;
					display: block;
					border-radius: 10px;
					padding: 10px;
					border: solid 1px #000;
					width: 100%;
					background-color: #fff;
				}
				.btn-submit{
					background-color: #0b76ba;
					color: #fff;
					font-family: 'Montserrat Medium';
					font-size: 18px;
					border-radius: 10px;
					border: none;
					width: 100%;
					padding: 7px 10px;
					text-align: center;
				}
				.input-group .btn-submit{
					font-size: 15px;
					padding: 7px 10px;
					border-radius: 0 10px 10px 0;
				}
		
		.box-thanks{
			position: relative;
			display: block;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);
			top: 30vh;
			font-family: 'Montserrat Regular';
			color: #fff;
			font-size: 18px;
			padding: 20px;
			border-radius: 30px;
			text-align: center;
		}
		
		.link-qr{
			text-decoration:none;
			color:#fff;
		}


/*Tablet / iPad / Laptop Portraid*/
@media only screen
and (min-width: 601px) {
	.body{
		max-width: 60vh;
	}
		.box-register{
			width: 80%;
			top: 28vh;
			font-size: 16px;
			padding-top: 30px;
		}
}


/*Tablet / iPad / Laptop Landscape*/
@media only screen
and (min-width: 1024px) {
html, body{
	background-image: url('../../images/BG-desktop.jpg');
	background-size: cover;
	background-color: transparent;
}

.err{
	font-size: 16px;
}

	.body{
		max-width: 80vh;
	}
		.box-register{
			width: 80%;
			top: 25vh;
			font-size: 16px;
			padding-top: 30px;
		}
		
			.judul-register{
				font-size: 32px;
				margin-bottom: 20px;
			}
				.text-input{
					padding: 10px;
				}
				.btn-submit{
					font-size: 20px;
					padding: 10px;
				}
		
		.box-thanks{
			background-color: #fff;
			color: #000;
			width: 90%;
			top: 30vh;
			padding-top: 50px;
			padding-bottom: 50px;
		}
		.link-qr{
			color:#00f;
		}
		
	
	/* Absen */
	.body-absen{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		background-image: url('../../images/BG-scanner.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
	}
		.nama-tenant{
			position: absolute;
			display: block;
			width: 100%;
			text-align: center;
			top: 35vh;
			font-family: 'Montserrat Bold';
			font-size: 3vw;
		}
		.box-absen{
			position: absolute;
			display: block;
			background-color: rgb(255, 255, 255, .9);
			width: 40%;
			height: 35vh;
			left: 50%;
			transform: translateX(-50%);
			top: 50vh;
			border-radius: 50px;
			box-shadow: 5px 5px 5px -2px rgba(0,0,0,0.75);
			-webkit-box-shadow: 5px 5px 5px -2px rgba(0,0,0,0.75);
			-moz-box-shadow: 5px 5px 5px -2px rgba(0,0,0,0.75);
		}
			.judul-absen{
				position: absolute;
				display: block;
				width: 100%;
				text-align: center;
				left: 50%;
				transform: translateX(-50%);
				top: 25%;
				font-family: 'Montserrat Regular';
				font-size: 2vw;
				color: #000;
			}
			.text-input-absen{
				border: none;
				margin-top: 20px;
				border-radius: 10px;
				width: 60% !important;
				padding: 5px 10px;
				font-size: 32px;
				text-align: center;
			}
		.box-result-absen{
			width: 90%;
			left: 50%;
			transform: translateX(-50%);
			top: 20%;
			position: absolute;
			color: #000;
			text-align: center;
			font-family: 'Montserrat Regular';
			font-size: 1.4vw;
			line-height: 1vw;
			display: block;
		}
			.welcome-absen{
				font-size: 1.5vw;
				font-family: 'Montserrat Bold';
				margin-bottom: 30px;
			}
			.nama-absen{
				font-family: 'Montserrat Bold';
				font-size: 2vw;
				margin-bottom: 20px;
			}
			.fungsi-absen{
				font-family: 'Montserrat Regular';
				font-size: 1.5vw;
				line-height: 1.7vw;
				margin-bottom: 20px;
			}
			.instansi-absen{
				margin-top: 20px;
				font-size: 1.5vw;
				font-family: 'Montserrat Regular';
			}
		
		.box-button{
			position: relative;
			display: block;
			width: 100%;
			padding-top: 20px;
		}
		.box-info-scan{
			position: relative;
			display: block;
			width: 100%;
			font-family: 'Montserrat Regular';
			margin-top: 30px;
		}
			.info-ok{
				font-size: 30px;
			}
			.info-no{
				font-size: 26px;
			}
	
	.footer-absen{
		position: absolute;
		display: block;
		width: 100%;
		text-align: center;
		bottom: 2.5vh;
		border: solid 1px #f00;
	}
		.link-tenant{
			font-family: 'Montserrat Regular';
			font-size: 20px;
			margin: 0px 30px;
		}
		
	/* Undian */
	.content-undian{
		width: 100%;
		min-height: 100%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: top center;
	}
		.undian-1{
			background-image: url('../../images/BG-undian-500.jpg');
		}
		.undian-2{
			background-image: url('../../images/BG-undian-1jt.jpg');
		}
		.undian-3{
			background-image: url('../../images/BG-undian-logam-2gr.jpg');
		}
		.undian-4{
			background-image: url('../../images/BG-undian-bone-conductor.jpg');
		}
		.undian-5{
			background-image: url('../../images/BG-undian-logam-5gr.jpg');
		}
		.undian-6{
			background-image: url('../../images/BG-undian-jam-garmin.jpg');
		}
		.undian-7{
			background-image: url('../../images/BG-undian-iphone.jpg');
		}
		.undian-8{
			background-image: url('../../images/BG-undian-brompton.jpg');
		}
		.undian-9{
			background-image: url('../../images/BG-undian-vespa.jpg');
		}
		.undian-17{
			/*background-image: url('../../images/undian-17-nama.jpg');*/
			background-image: url('../../images/undian-alva.jpg');
		}
		
		.judul-undian{
			position: relative;
			display: block;
			width: 100%;
			text-align: center;
			font-family: 'Montserrat Bold';
			font-size: 2vw;
			top: 17vh;
			color: #000;
		}
			.acak{
				position: relative;
				display: block;
				left: 50%;
				transform: translateX(-50%);
				text-align: center;
			}
				.acak1{
					top: 35vh;
					width: 90%;
				}
				.acak2{
					top: 25vh;
					width: 90%;
				}
				.acak3{
					top: 20vh;
					width: 90%;
				}
				.acak4{
					top: 30vh;
					width: 100%;
				}
				.acak5,
				.acak6{
					top: 20vh;
					width: 100%;
				}
				.acak15{
					top: 20vh;
					width: 100%;
				}
				.acak20{
					top: 20vh;
					width: 100%;
				}
				.acak25{
					top: 20vh;
					width: 100%;
				}
				.acak35{
					top: 20vh;
					width: 100%;
				}
				.acak40{
					top: 20vh;
					width: 100%;
				}
				
				.acak17{
					top: 14vh;
					width: 95%;
				}
				
				#acak-nama{
					position: relative;
					display: inline-block;
					vertical-align: top;
				}
					.undi1{
						width: 100%;
						height: 20vh;
						margin: 2vh;
					}
					.undi2{
						width: 100%;
						height: 20vh;
						margin: 2vh;
					}
					.undi3{
						width: 100%;
						height: 18vh;
						margin: 1vh;
					}
					.undi4,
					.undi5,
					.undi6{
						width: 43%;
						height: 20vh;
						margin: 1vh;
					}
					.undi15{
						width: 32%;
						height: 12vh;
						margin: 1vh;
					}
					.undi20{
						width: 21%;
						height: 12vh;
						margin: 1vh;
					}
					.undi25{
						width: 18%;
						height: 12vh;
						margin: 1vh;
					}
					.undi35{
						width: 18%;
						height: 9vh;
						margin: .5vh;
					}
					.undi40{
						width: 18%;
						height: 7vh;
						margin: .5vh;
					}
					
					.undi17{
						width: 30%;
						height: 8vh;
						margin: 1vh;
					}
					
					.tabel-nama{
						position: relative;
						display: table;
						width: 100%;
						height: 100%;
						color: #fff;
					}
						.nama{
							position: relative;
							display: table-cell;
							vertical-align: middle;
							font-family: "Montserrat Regular";
						}
						.hp{
							font-family: "Montserrat Regular";
						}
							.undi1 .nama,
							.undi2 .nama,
							.undi3 .nama{
								line-height: 15vh;
								font-size: 4vw;
							}
							.undi1 .hp,
							.undi2 .hp,
							.undi3 .hp{
								line-height: 5vh;
								font-size: 3vw;
							}
							.undi4 .nama,
							.undi5 .nama,
							.undi6 .nama{
								line-height: 8vh;
								font-size: 2.5vw;
							}
							.undi4 .hp,
							.undi5 .hp,
							.undi6 .hp{
								line-height: 5vh;
								font-size: 2vw;
							}
							.undi15 .nama{
								line-height: 5vh;
								font-size: 1.5vw;
							}
							.undi15 .hp{
								line-height: 3vh;
								font-size: 1.3vw;
							}
							.undi20 .nama{
								line-height: 5vh;
								font-size: 1.2vw;
							}
							.undi20 .hp{
								line-height: 3vh;
								font-size: 1.1vw;
							}
							.undi25 .nama{
								line-height: 5vh;
								font-size: 1vw;
							}
							.undi25 .hp{
								line-height: 2vh;
								font-size: 0.8vw;
							}
							.undi35 .nama,
							.undi40 .nama{
								line-height: 4vh;
								font-size: 0.9vw;
							}
							.undi35 .hp,
							.undi40 .hp{
								line-height: 1vh;
								font-size: 0.8vw;
							}
							
							.undi17 .nama{
								line-height: 3vh;
								font-size: 1.5vw;
							}
}


/*Laptop / Desktop*/
@media only screen
and (min-width: 1280px) {
	
}


/*Desktop 1366*/
@media only screen
and (min-width: 1366px) {
	.body{
		max-width: 80vh;
	}
		.box-register{
			width: 80%;
			top: 28vh;
			font-size: 16px;
			padding-top: 10px;
		}
		
			.judul-register{
				font-size: 22px;
				margin-bottom: 0px;
			}
				.text-input{
					padding: 7px;
				}
				.btn-submit{
					font-size: 18px;
					padding: 7px;
				}
}


/*Desktop MAC*/
@media only screen
and (min-width: 1440px) {
	.body{
		max-width: 70vh;
	}
		.box-register{
			width: 80%;
			top: 28vh;
			font-size: 16px;
			padding-top: 30px;
		}
		
			.judul-register{
				font-size: 32px;
				margin-bottom: 20px;
			}
				.text-input{
					padding: 10px;
				}
				.btn-submit{
					font-size: 20px;
					padding: 10px;
				}
				.input-group .btn-submit{
					font-size: 18px;
					padding: 10px;
					padding-bottom: 9px;
				}
}


/*Desktop Full HD MAC*/
@media only screen
and (min-width: 1680px) {
	
}


/*Desktop Full HD*/
@media only screen
and (min-width: 1920px) {
		
}

@media print {
	html, body{
		color: #000;
		background-color: #fff;
		margin: 0px;
		padding: 0px;
	}
		iframe{
			background-color: #fff;
			color: #000;
			font-size: 5%;
		}
}