@import url(../../../external.html?link=https://fonts.googleapis.com/css?family=Roboto); :root { --background: #ecf1f3; --nav-top: #ecf1f3; --nav-foot: #e5e9eb; --orange: #e87807; --orange-disable: #8899bf; --orange-blur: #ffebe4; --green-dark: #005E69; --black: #2c2c33; --white: #ffffff; --grey-soft: #f5f5f5; --grey-hard: #ced4da; --grey-disabled: #b1b1b1; --shadow: #ced4da; --transparent: #ffffff00; } body { font-family: 'Roboto'; } a { 	text-decoration: none !important; } .list-otp ol { margin-top: 0; margin-bottom: 10px; padding: 0px 0px 0px 15px; } .mt-20 { 	margin-top: 20px } .mb-20 { 	margin-bottom: 20px } .text-center { 	text-align: center; } /* * Color */ .color-orange { 	color: var(--orange); } /* * Button */ .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline: none; } .btn-bni { width: 100%; background-color: var(--orange); border: none; color: var(--white); padding: 7px 10px 7px 10px; } .btn-bni:hover { color: var(--white); } .btn-bni.active, .btn-bni:active { background-image: none; outline: 0; background-color: var(--orange-disable); } .btn-bni:focus { color: var(--white); } .btn-bni[disabled] { 	color: var(--white); background-color: var(--grey-disabled); opacity: .9; } .btn-bni-2 { background-color: var(--orange); border: none; color: var(--white); padding: 7px 10px 7px 10px; } @media only screen and (max-width: 768px) { 	.btn-bni-2 { 		width: 100%; 	} } .btn-bni-2:hover { color: var(--white); } .btn-bni-2.active, .btn-bni-2:active { background-image: none; outline: 0; background-color: var(--orange-disable); } .btn-bni-2:focus { color: var(--white); } .btn-bni-2[disabled] { 	color: var(--white); background-color: var(--grey-disabled); opacity: .9; } /* * Modal */ .modal { text-align: center; padding: 10px !important; } .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; width: 600px; margin: 0px !important; } @media only screen and (max-width: 768px) { 	.modal-dialog { 	 display: inline-block; 	 text-align: left; 	 vertical-align: middle; 	 width: 100%; 	 margin: 0px !important; 	} } .modal-footer { padding: 15px; text-align: center; border-top: 1px solid #e5e5e5; } .modal-logo { margin-top: 20px; font-size: 50px; } .modal-text { padding: 10px 0px 30px 0px; } /* * Form Control */ .form-control:focus { border-color: var(--grey-hard); outline: 0; -webkit-box-shadow: none !important; box-shadow: none !important; } .has-success .form-control, .has-success .form-control:focus { border-color: var(--grey-hard); box-shadow: none; } .has-error .form-control, .has-error .form-control:focus { border-color: var(--orange); } .has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label { 	color: var(--orange); } .has-success .select2-container--focus .select2-selection, .has-success .select2-container--open .select2-selection { -webkit-box-shadow: none; border-color: var(--grey-hard); box-shadow: none; } .has-success .select2-dropdown, .has-success .select2-selection { border-color: var(--grey-hard); } .has-error .select2-dropdown, .has-error .select2-selection { border-color: var(--orange); } /* * Custom Navbar */ .navbar-inverse { background-color: #e87807; border-bottom: 1px solid #7a7878; box-shadow: 0 1px 2px 0px #c0c0c0; -moz-box-shadow: 0 1px 2px 0px #c0c0c0; -webkit-box-shadow: 0 1px 2px 0px #c0c0c0; } .navbar-header { margin-right: 0; margin-left: 0; margin-top: 5px; margin-bottom: 5px; } .navbar-header-second { margin-right: 0; margin-left: 0; margin-top: 8px; } .navbar-inverse .navbar-brand { color: #ffffff; } .navbar span { 	color:white; 	font-weight:bold; 	font-size:32px; } /* * Container */ .container-margin { 	margin-top: 100px; margin-bottom: 40px; } @media only screen and (max-width: 768px) { 	.container-margin { 		margin-top: 80px; 	 margin-bottom: 20px; 	} } /* * Custom Button */ .btn-warning, .btn-warning:hover, .btn-warning:active, .btn-warning:visited { background-color: #e55300 !important; color: #fff; } /* * All input text upper */ input[type=text] { 	text-transform: uppercase; } /* * Captcha */ .captcha { 	margin: 10px 0px 20px 0px; } .captcha span { 	font-family: "Times New Roman", Times, serif; 	width: auto; 	font-size: 30px; 	padding: 7px 12px 7px 12px; 	border-radius: 3px; 	border: 1px solid #ccc; 	background-color: #eee; } /* * DataDiriOtp */ .box-otp { 	padding: 170px 0px 0px 0px; 	max-width: 300px; 	margin: 0 auto; } .box-otp-header { 	margin: 0px 0px 20px 0px; 	font-weight: bold; 	text-align: center; } @media only screen and (max-width: 768px) { 	.box-otp { 		width: 100%; 		padding: 120px 0px 0px 0px; 	 	margin: 0 auto; 	} } #countdown-text { 	text-align: center; } #countdown-time { 	text-align: center; 	margin: 20px 0px 20px 0px } /* * modal camera */ #boxCanvasSelfie { 	text-align: center; 	margin: 10px 0px 10px 0px; } #canvasSelfie { 	display: none; } .selectCamera { 	width: 50%; } #boxCanvasSelfieKtp { 	text-align: center; 	margin: 10px 0px 10px 0px; } #canvasSelfieKtp { 	display: none; } #boxCanvasKtp { 	text-align: center; 	margin: 10px 0px 10px 0px; } #canvasKtp { 	display: none; } .frame { 	visibility: hidden; 	position: absolute; top: 57.5%; left: 50%; transform: translate(-50%, -50%); z-index: 1; } .ktp-selfie { top: 49.5%; } /* * Face Detection */ canvas { position: absolute; top: 57.5%; 	left: 50%; 	transform: translate(-50%, -50%); } /* * other */ .clear { 	clear: both; } #userContent .panel { 	min-height: 400px; } #userContent.container { 	padding-top: 20px; 	margin-bottom: 30px; 	display: block; } .panel-body .row { 	margin-top: 10px; } .panel-body .judul { 	margin-bottom: 30px; } .panel-body .tab-content { 	padding: 10px; 	border-bottom: 1px solid #e6e6e6; 	border-left: 1px solid #e6e6e6; 	border-right: 1px solid #e6e6e6; } .radio-label { 	width: 100%; } .radio-label label { 	margin-top: 7px; } .radio-label button { 	float: right; } .btnKembali { 	text-align: left; } .btnLanjut { 	text-align: right; } .btnPrint { 	text-align: left; } .btnSelesai { 	text-align: right; } /* * Custom Navbar */ .form-group h4 { 	color: #e55300; margin: 30px 0px 10px 0px; } .nav-tabs>li>a:hover { 	background: none; 	border: none; 	margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 4px 4px 0 0; } @media (max-width : 767px) { 	/* 	 * Custom Navbar 	 */ 	.navbar-inverse .navbar-brand { 	 color: #ffffff; 	 width: 100%; 	 text-align: center; 	} 	#navbar-header-second { 		display: none !important; 	} 	 	/* 	 * Custom batas 	 */ 	.batasAtas { 		margin-top: 80px; 	} 	.batasBawah { 		margin-bottom: 30px; 	} 	.radio-label { 		float: left; 		padding: 5px 0px 0px 0px; 	} 	 	.btnTidak { 		margin-top: 20px; 	} 	.btnKembali { 		text-align: center; 	} 	.btnKembali .btn { 		width: 100%; 	} 	.btnLanjut { 		margin-top: 10px; 		text-align: center; 	} 	.btnLanjut .btn { 		width: 100%; 	} 	 	.btnPrint { 		text-align: center; 	} 	.btnPrint .btn { 		width: 100%; 	} 	.btnSelesai { 		margin-top: 10px; 		text-align: center; 	} 	.btnSelesai .btn { 		width: 100%; 	} }