/*	|---------------------------------------------------------------------------/*/
/*|special css for "perizinan" added by Mr.Kei a.k.a HKM-EDP/*/
/*|-------------------------------------------------------------------------/*/
/*	special root*/
:root {
	--bs-cl-1: #b0e7ee;
	--bs-cl-2: #fee50f;
	--bs-cl-3: #ffd900;
}

/*begin::new data set*/ 
	/*button*/
	.btn.btn-esdm {
	  color: #000000;
	  border-color: var(--bs-cl-2);
	  background-color: var(--bs-cl-2);
	}
	.btn-check:active + .btn.btn-active-esdm, .btn-check:checked + .btn.btn-active-esdm, 
	.btn.btn-active-esdm.active, 
	.btn.btn-active-esdm.show, 
	.btn.btn-active-esdm:active:not(.btn-active), 
	.btn.btn-active-esdm:focus:not(.btn-active), 
	.btn.btn-active-esdm:hover:not(.btn-active), 
	.show > .btn.btn-active-esdm,
	.btn-check:active + .btn.btn-esdm, 
	.btn-check:checked + .btn.btn-esdm, 
	.btn.btn-esdm.active, 
	.btn.btn-esdm.show, 
	.btn.btn-esdm:active:not(.btn-active), 
	.btn.btn-esdm:focus:not(.btn-active), 
	.btn.btn-esdm:hover:not(.btn-active), 
	.show > .btn.btn-esdm {
	  color: #000000;
	  border-color: var(--bs-cl-3);
	  background-color: var(--bs-cl-3) !important;
	}
	.btn-check:active + .btn.btn-active-esdm, .btn-check:checked + .btn.btn-active-esdm i, 
	.btn.btn-active-esdm.active i, 
	.btn.btn-active-esdm.show i, 
	.btn.btn-active-esdm:active:not(.btn-active) i, 
	.btn.btn-active-esdm:focus:not(.btn-active) i, 
	.btn.btn-active-esdm:hover:not(.btn-active) i, 
	.show > .btn.btn-active-esdm i,
	.btn-check:active + .btn.btn-esdm i, 
	.btn-check:checked + .btn.btn-esdm i, 
	.btn.btn-esdm.active i, 
	.btn.btn-esdm.show i, 
	.btn.btn-esdm:active:not(.btn-active) i, 
	.btn.btn-esdm:focus:not(.btn-active) i, 
	.btn.btn-esdm:hover:not(.btn-active) i, 
	.show > .btn.btn-esdm i {
	  color: #000000;
	}

	.btn.btn-old-danger {
	  color: #ffffff;
	  background-color: var(--old-danger);
	  border-color: var(--old-danger);
	}
	.btn.btn-old-danger:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-old-danger:focus:not(.btn-text), .btn.btn-old-danger.focus:not(.btn-text) {
	  color: #ffffff;
	  background-color: var(--old-danger-active);
	  border-color: var(--old-danger-active);
	}

	.btn.btn-old-success {
	  color: #ffffff;
	  background-color: var(--old-success);
	  border-color: var(--old-success);
	}
	.btn.btn-old-success:hover:not(.btn-text):not(:disabled):not(.disabled), .btn.btn-old-success:focus:not(.btn-text), .btn.btn-old-success.focus:not(.btn-text) {
	  color: #ffffff;
	  background-color: var(--old-success-active);
	  border-color: var(--old-success-active);
	}

	/*	background*/
	.bg-bs-cl-1 {
		background-color: var(--bs-cl-1);
	}
	.text-bs-cl-1 {
		color: var(--bs-cl-1);
	}
	.bg-bs-cl-2 {
		background-color: var(--bs-cl-2);
	}
	.text-bs-cl-2 {
		color: var(--bs-cl-2);
	}
	.bg-bs-cl-3 {
		background-color: var(--bs-cl-3);
	}
	.text-bs-cl-3 {
		color: var(--bs-cl-3);
	}
	.bg-old-danger {
		background-color: var(--old-danger);
	}
	.text-old-danger {
		color: var(--old-danger);
	}
	.bg-old-success {
		background-color: var(--old-success);
	}
	.text-old-success {
		color: var(--old-success);
	}

/*end::new data set*/

	.login-form {
		display: none;
	}

	.login-form.active {
		display: block;
	}

	[data-theme="light"] #kt_app_content {
		background-color: #b0e7ee;
	}
  @media (min-width: 992px) {
		.app-header {
		  height: 90px;
		}
		.app-header .app-header-brand {
		  width: unset;
		}
		#kt_app_wrapper {
			margin-top: 90px;
		}
  }

/*begin::Panduan css*/
	.guide-infographic .guide-item {
	  border-radius: 20px;
	  margin-top: 5px;
	  border-top-color: transparent !important;
	  border-left-color: transparent !important;
	}
	.guide-infographic .numb {
	  position: absolute;
	  top: -15px;
	  width: 35px;
	  height: 35px;
	  background: white;
	  text-align: center;
	  padding: 5px;
	  border-radius: 5rem;
	  left: -8px;
	  color: var(--kt-dark);
	  font-weight: 700;
	  line-height: 1.7;
	}
	.guide-infographic .overlay {
	  position: absolute;
	  right: 15px;
	  top: 15px;
	  font-size: xxx-large;
	  opacity: .4;
	  color: white;
	}
	.guide-infographic [class*="next"] {
	  position: absolute;
	  font-size: xx-large;
	  padding: 5px;
	  border-radius: 5rem;
	  background: white;
	  z-index: 1;
	  box-shadow: 0 .5rem 1.5rem .5rem rgba(0,0,0,.075);
	}
	.guide-infographic .nextRight {
	  right: -30px;
	  top: 50%;
	  translate: 0-50%;
	}
	.guide-infographic .nextBottom {
	  bottom: -30px;
	  left: 50%;
	  translate: -50%;
	  transform: rotate(90deg);
	}
	.guide-infographic .nextLeft {
	  left: -30px;
	  top: 50%;
	  translate: 0-50%;
	  transform: rotate(180deg);
	}
/*end::Panduan css*/

/*begin::Recaptcha*/
	.g-recaptcha > div {
		width: 301px!important;
		height: 76px!important;
	}
	.grecaptcha-badge {
		z-index: 111;
	}
/*end::Recaptcha*/

/*begin::Switch Panel*/
	.switchPanelTabContent {
		display: none;
		opacity: 0;
	}

	.switchPanelTabContent.active {
		display: block;
	}
	
	.switchPanelTabContent.active.show {
		opacity: 1;
		transition: .3s all;
	}
/*end::Switch Panel*/



/*begin::Tracking stepper*/
	.stepper-nav .stepper-item .stepper-wrapper.default {
		background-color: var(--kt-secondary)!important;
	}
	.stepper-nav .stepper-item .stepper-wrapper.default .stepper-icon {
		background-color: var(--kt-light);
	}
	.stepper-nav .stepper-item .stepper-wrapper.default .stepper-number,
	.stepper-nav .stepper-item .stepper-wrapper.default .stepper-title {
		color: var(--kt-text-dark)!important;
	}
	.stepper-nav .stepper-item .stepper-wrapper.default .stepper-desc {
		color: var(--kt-text-muted) !important;
	}

	.stepper-nav .stepper-item .stepper-wrapper.proses {
		background-color: var(--kt-primary)!important;
	}
	.stepper-nav .stepper-item .stepper-wrapper.proses .stepper-icon {
		background-color: var(--kt-primary-light);
	}
	.stepper-nav .stepper-item .stepper-wrapper.proses .stepper-number {
		color: var(--kt-text-primary)!important;
	}
	.stepper-nav .stepper-item .stepper-wrapper.proses .stepper-title {
		color: var(--kt-primary-light) !important
	}
	.stepper-nav .stepper-item .stepper-wrapper.proses .stepper-desc {
		color: var(--kt-text-muted) !important;
	}

	.stepper-nav .stepper-item .stepper-wrapper.overdue {
		background-color: var(--kt-warning)!important;
	}
	.stepper-nav .stepper-item .stepper-wrapper.overdue .stepper-icon {
		background-color: var(--kt-warning-light);
	}
	.stepper-nav .stepper-item .stepper-wrapper.overdue .stepper-number {
		color: var(--kt-text-warning)!important;
	}
	.stepper-nav .stepper-item .stepper-wrapper.overdue .stepper-title {
		color: var(--kt-warning-light) !important
	}
	.stepper-nav .stepper-item .stepper-wrapper.overdue .stepper-desc {
		color: var(--kt-text-light) !important;
	}

	.stepper-nav .stepper-item .stepper-wrapper.ditolak {
		background-color: var(--kt-danger)!important;
	}
	.stepper-nav .stepper-item .stepper-wrapper.ditolak .stepper-icon {
		background-color: var(--kt-danger-light);
	}
	.stepper-nav .stepper-item .stepper-wrapper.ditolak .stepper-number {
		color: var(--kt-text-danger)!important;
	}
	.stepper-nav .stepper-item .stepper-wrapper.ditolak .stepper-title {
		color: var(--kt-danger-light) !important
	}
	.stepper-nav .stepper-item .stepper-wrapper.ditolak .stepper-desc {
		color: var(--kt-text-muted) !important;
	}

	.stepper-nav .stepper-item .stepper-wrapper.selesai {
		background-color: var(--kt-success)!important;
	}
	.stepper-nav .stepper-item .stepper-wrapper.selesai .stepper-icon {
		background-color: var(--kt-success-light);
	}
	.stepper-nav .stepper-item .stepper-wrapper.selesai .stepper-number {
		color: var(--kt-text-success)!important;
	}
	.stepper-nav .stepper-item .stepper-wrapper.selesai .stepper-title {
		color: var(--kt-success-light) !important
	}
	.stepper-nav .stepper-item .stepper-wrapper.selesai .stepper-desc {
		color: var(--kt-text-light) !important;
	}
/*begin::Tracking stepper*/

/*loading dot animation*/
		@keyframes blink {50% { color: transparent }}
		.loader__dot { animation: 1s blink infinite }
		.loader__dot:nth-child(2) { animation-delay: 250ms }
		.loader__dot:nth-child(3) { animation-delay: 500ms }
/*loading dot animation*/