/*
 loading modal by nanda 2013/10/04
 usage: 

<div id="loading" class="modal active hide" role="dialog" aria-hidden="false" data-backdrop="static" data-keyboard="false">
	<div class="spinner"></div>
	<div class="div-notif">
		<span id="notif" class="label label-important">Tunggu sebentar...</span>
	</div>
</div>
$("#loading").modal('show');//menampilkan loading screen
$("#loading").modal('hide');//menyembunyikan loading screen
*/
.modal-scrollable.bg-loading {
	/*background: transparent url('../img/bg-loading-banner.png') center center no-repeat;*/
	/*background-size: cover;*/
}
#loading{
	background-color: transparent;
	border: none;
	box-shadow: none;
	clear: both;
}
#loading > .spinner{
	/*background: transparent url('../img/spinner-128.gif') 0 0 no-repeat;*/
	background: transparent url('../img/spinner-box.gif') 0 0 no-repeat;
	text-align: center;
	position: relative;
	margin: 0 auto;
	width: 130px;
	height: 130px;
	/*width: 100%;*/
	/*height: 100%;*/
}

.loading {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  position: relative; }

/*Animation*/
#loading > .div-notif{
	text-align: center;
	position: relative;
  margin: 0 auto;
	padding-top: 10px;
}
.small-loading-bar{
	background: transparent url('../img/loading-bar-19x15.gif') center 5px no-repeat;
	display: inline-block;
	height: 25px;
	text-align: center;
	vertical-align: middle;
	width: 100%;
}
.small-spinner{
	background: transparent url('../img/spinner-20.gif') 0 0 no-repeat;
	display: inline-block;
	height: 20px;
	text-align: center;
	vertical-align: middle;
	width: 20px;
}
	.small-spinner.spinner-white{
		background: transparent url('../img/spinner-white-20.gif') 0 0 no-repeat;
	}

#loading-notif.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 1.2em;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

/*
  New Loading
  by Nanda W

  USAGE 
  add class:; "show-loading" to whatever visible element
  add attribute:; data-loading-text="YOUR LOADING TEXT HERE" to show loading text
 */
.show-loading,
.element-loading {
	position: relative;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; 
  cursor: wait;
}
.show-loading:after {
  content: "L O A D I N G";
  content: attr(data-loading-text);
  font-family: monospace;
  font-weight: 600;
  font-size: 1.3em;
  text-transform: uppercase;
  letter-spacing: 3px;
  position: absolute;
  text-align: center;
  display: block;
  line-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,.8) url(/assets/img/spinner-box.gif) no-repeat center center;
  background-position: center 150px;
  background-position: center calc(50% - 50px);
  padding-top: 50px;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1234567890;
  transition: none;
}
html.show-loading:after,
body.show-loading:after {
  position: fixed;
  background: rgba(255,255,255,.8) url(/assets/img/spinner-rainbow.gif) no-repeat center center;
  background-position: center calc(50% - 50px);
  transition: none;
}
/* EOF New Loading */



p#notifTeks{
	font-size: 1.2em;
}

.legend{
	color: #777;
}

/* fonts */
/* BEGIN Light */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Light/OpenSans-Light.eot?v=1.1.0");
  src: url("../fonts/Light/OpenSans-Light.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Light/OpenSans-Light.woff2?v=1.1.0") format("woff2"), url("../fonts/Light/OpenSans-Light.woff?v=1.1.0") format("woff"), url("../fonts/Light/OpenSans-Light.ttf?v=1.1.0") format("truetype"), url("../fonts/Light/OpenSans-Light.svg?v=1.1.0#Light") format("svg");
  font-weight: 300;
  font-style: normal; }
/* END Light */
/* BEGIN Light Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/LightItalic/OpenSans-LightItalic.eot?v=1.1.0");
  src: url("../fonts/LightItalic/OpenSans-LightItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/LightItalic/OpenSans-LightItalic.woff2?v=1.1.0") format("woff2"), url("../fonts/LightItalic/OpenSans-LightItalic.woff?v=1.1.0") format("woff"), url("../fonts/LightItalic/OpenSans-LightItalic.ttf?v=1.1.0") format("truetype"), url("../fonts/LightItalic/OpenSans-LightItalic.svg?v=1.1.0#LightItalic") format("svg");
  font-weight: 300;
  font-style: italic; }
/* END Light Italic */
/* BEGIN Regular */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Regular/OpenSans-Regular.eot?v=1.1.0");
  src: url("../fonts/Regular/OpenSans-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Regular/OpenSans-Regular.woff2?v=1.1.0") format("woff2"), url("../fonts/Regular/OpenSans-Regular.woff?v=1.1.0") format("woff"), url("../fonts/Regular/OpenSans-Regular.ttf?v=1.1.0") format("truetype"), url("../fonts/Regular/OpenSans-Regular.svg?v=1.1.0#Regular") format("svg");
  font-weight: normal;
  font-style: normal; }
/* END Regular */
/* BEGIN Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Italic/OpenSans-Italic.eot?v=1.1.0");
  src: url("../fonts/Italic/OpenSans-Italic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Italic/OpenSans-Italic.woff2?v=1.1.0") format("woff2"), url("../fonts/Italic/OpenSans-Italic.woff?v=1.1.0") format("woff"), url("../fonts/Italic/OpenSans-Italic.ttf?v=1.1.0") format("truetype"), url("../fonts/Italic/OpenSans-Italic.svg?v=1.1.0#Italic") format("svg");
  font-weight: normal;
  font-style: italic; }
/* END Italic */
/* BEGIN Semibold */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Semibold/OpenSans-Semibold.eot?v=1.1.0");
  src: url("../fonts/Semibold/OpenSans-Semibold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Semibold/OpenSans-Semibold.woff2?v=1.1.0") format("woff2"), url("../fonts/Semibold/OpenSans-Semibold.woff?v=1.1.0") format("woff"), url("../fonts/Semibold/OpenSans-Semibold.ttf?v=1.1.0") format("truetype"), url("../fonts/Semibold/OpenSans-Semibold.svg?v=1.1.0#Semibold") format("svg");
  font-weight: 600;
  font-style: normal; }
/* END Semibold */
/* BEGIN Semibold Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/SemiboldItalic/OpenSans-SemiboldItalic.eot?v=1.1.0");
  src: url("../fonts/SemiboldItalic/OpenSans-SemiboldItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/SemiboldItalic/OpenSans-SemiboldItalic.woff2?v=1.1.0") format("woff2"), url("../fonts/SemiboldItalic/OpenSans-SemiboldItalic.woff?v=1.1.0") format("woff"), url("../fonts/SemiboldItalic/OpenSans-SemiboldItalic.ttf?v=1.1.0") format("truetype"), url("../fonts/SemiboldItalic/OpenSans-SemiboldItalic.svg?v=1.1.0#SemiboldItalic") format("svg");
  font-weight: 600;
  font-style: italic; }
/* END Semibold Italic */
/* BEGIN Bold */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/Bold/OpenSans-Bold.eot?v=1.1.0");
  src: url("../fonts/Bold/OpenSans-Bold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/Bold/OpenSans-Bold.woff2?v=1.1.0") format("woff2"), url("../fonts/Bold/OpenSans-Bold.woff?v=1.1.0") format("woff"), url("../fonts/Bold/OpenSans-Bold.ttf?v=1.1.0") format("truetype"), url("../fonts/Bold/OpenSans-Bold.svg?v=1.1.0#Bold") format("svg");
  font-weight: bold;
  font-style: normal; }
/* END Bold */
/* BEGIN Bold Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/BoldItalic/OpenSans-BoldItalic.eot?v=1.1.0");
  src: url("../fonts/BoldItalic/OpenSans-BoldItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/BoldItalic/OpenSans-BoldItalic.woff2?v=1.1.0") format("woff2"), url("../fonts/BoldItalic/OpenSans-BoldItalic.woff?v=1.1.0") format("woff"), url("../fonts/BoldItalic/OpenSans-BoldItalic.ttf?v=1.1.0") format("truetype"), url("../fonts/BoldItalic/OpenSans-BoldItalic.svg?v=1.1.0#BoldItalic") format("svg");
  font-weight: bold;
  font-style: italic; }
/* END Bold Italic */
/* BEGIN Extrabold */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/ExtraBold/OpenSans-ExtraBold.eot?v=1.1.0");
  src: url("../fonts/ExtraBold/OpenSans-ExtraBold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/ExtraBold/OpenSans-ExtraBold.woff2?v=1.1.0") format("woff2"), url("../fonts/ExtraBold/OpenSans-ExtraBold.woff?v=1.1.0") format("woff"), url("../fonts/ExtraBold/OpenSans-ExtraBold.ttf?v=1.1.0") format("truetype"), url("../fonts/ExtraBold/OpenSans-ExtraBold.svg?v=1.1.0#ExtraBold") format("svg");
  font-weight: 800;
  font-style: normal; }
/* END Extrabold */
/* BEGIN Extrabold Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("../fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?v=1.1.0");
  src: url("../fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff2?v=1.1.0") format("woff2"), url("../fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff?v=1.1.0") format("woff"), url("../fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.ttf?v=1.1.0") format("truetype"), url("../fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.svg?v=1.1.0#ExtraBoldItalic") format("svg");
  font-weight: 800;
  font-style: italic; }
/* END Extrabold Italic */

/*# sourceMappingURL=open-sans.css.map */

@font-face {
  font-family: 'Pathway Gothic One';
  src: url("../font/PathwayGothicOne-Regular.ttf");
}

/* wrapper */
div.form-wrapper{
	overflow: hidden;
	position: relative;
	width: 100%;
}
div#wrapperReadonly{
	display: none;
	height: 100%;
	width: 100%;
	right: 0;
	background: transparent;
	background: rgba(255, 255, 255, 0.4);
	position: absolute;
	z-index: 999;
}

.subheader{
	vertical-align: middle;
	padding-top: 10px;
	text-align: right;
}
	.blinker {
		color: #6D0000;
		font-family: "Trebuchet MS", Helvetica, sans-serif !important;
		font-weight: bold;
		font-size: 16px;
		text-align: center;

		animation-name: blinker;
		animation-duration: 4s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;

		-webkit-animation-name: blinker;
		-webkit-animation-duration: 4s;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;
	}

	@-moz-keyframes blinker {
		0% { opacity: 1.0; }
		50% { opacity: 0.2; }
		100% { opacity: 1.0; }
	}

	@-webkit-keyframes blinker {
		0% { opacity: 1.0; }
		50% { opacity: 0.2; }
		100% { opacity: 1.0; }
	}

	@keyframes blinker {
		0% { opacity: 1.0; }
		50% { opacity: 0.2; }
		100% { opacity: 1.0; }
	}

  /* give blinker on background
   * usage: give class bg-blinker on element;
   */
  .bg-blinker {
    background-color: #7CB342;

    animation-name: bg-blinker;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    -webkit-animation-name: bg-blinker;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
  }
  .bg-blinker.bg-success {
    background-color: #7CB342;
  }
  .bg-blinker.bg-info {
    background-color: #29abe0;
  }
  .bg-blinker.bg-warning {
    background-color: #f47c3c;
  }
  .bg-blinker.bg-danger {
    background-color: #d9534f;
  }

  @-moz-keyframes bg-blinker {
    50% { background-color: rgba(255,255,255,0.2); }
  }

  @-webkit-keyframes bg-blinker {
    50% { background-color: rgba(255,255,255,0.2); }
  }

  @keyframes bg-blinker {
    50% { background-color: rgba(255,255,255,0.2); }
  }

div.modal.bootbox {
	font-size: 12px;
	line-height: normal;
	text-align: center;
}
	div.modal.bootbox > div.modal-footer{
		font-weight: bold;
		text-align: center;
	}
	div.modal.bootbox.fade{
		-webkit-transition: opacity .1s linear;
		-moz-transition: opacity .1s linear;
		-ms-transition: opacity .1s linear;
		-o-transition: opacity .1s linear;
		transition: opacity .1s linear;
	}

/* bof form isian by Nanda Widyatama */
	.toolbar { position: absolute; opacity: .5; }
	.toolbar:hover { opacity: 1;}
	.toolbar .btn-large { padding: 5px 8px; }
	.fields-container { width: 100%; }
/* eof form isian */

.link-unstyled,
.link-unstyled:hover,
.link-unstyled:active,
.link-unstyled:focus,
.link-unstyled:visited {
	color: inherit;
	background: transparent;
	text-decoration: none;
}

.pill-title {
  display: inline-block;
  background: #66BB6A;
  color: #fff;
  padding: 8px 20px 8px 15px;
  margin-left: -15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* by nanda untuk menampilkan loading pada box, semisal panel/well,  
 * usage: berikan class "contain-loading-box" pada div kotak anda
 *        berikan class "is-loading" untuk menampilkan loading animation
*/
div.contain-loading-box {
  position: relative;
}
div.contain-loading-box.is-loading:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255,255,255,0.8) url(/assets/img/spinner-box.gif) center center no-repeat;
  z-index: 10;
  pointer-events: none;
}
input.element-loading {
  background-image: url(/assets/img/loading-bar-19x15.gif);
  background-repeat: no-repeat;
  background-position: center;
}


/* add loading icon animation for report download by nanda*/
.loading-report-icon {
  height: 100px;
  background: transparent;
  background-image: url(/assets/img/loading-report.gif);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
.ui-dialog .ui-dialog-titlebar-close {
  background-image: url(/assets/img/clear.png);
  background-position: center center;
  background-repeat: no-repeat;
}


/* styling hack select 2*/
span.select2-container.select2-container--open {
  z-index: 10000;
}

.alert .close {
  position: initial;
}

/* Paper effect by nanda.w */
.paper-fx {
  position: relative;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #ddd;
  padding: 1em;
  margin: 1em auto;
  display: inline-block;
}
.paper-fx:before,
.paper-fx:after {
  content: '';
  position: absolute;
  bottom: 10px;
  width: 40%;
  height: 10px;
  box-shadow: 0 5px 14px rgba(0,0,0,.7);
  z-index: -1;
}

.paper-fx:before {
  left: 15px;
  transform: skew(-5deg) rotate(-5deg);
}

.paper-fx:after {
  right: 15px;
  transform: skew(5deg) rotate(5deg);
}