@import url("fonts.css");

/*****/
body {
	/*background: #f4f4f4;*/
	background: url(../images/bg.jpg) top fixed;
	background-size: 100% auto;
}
@media screen and (max-width:767px) {
	body {
		/*padding-top: 0;	*/
	}
	
}

/****/
.navbar.navbar-inverse.navbar-fixed-top {
	background: #FFFFFF;
	border: none;

	height: 70px;

	border-radius: 35px;

	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
}
@media screen and (max-width:767px) {
	.navbar.navbar-inverse.navbar-fixed-top {
		margin-top: inherit;
		margin-left: inherit;
		margin-right: inherit;

		/*border-radius: 15px;*/

		-webkit-border-radius: 0px;
		-webkit-border-bottom-right-radius: 15px;
		-webkit-border-bottom-left-radius: 15px;
		-moz-border-radius: 0px;
		-moz-border-radius-bottomright: 15px;
		-moz-border-radius-bottomleft: 15px;
		border-radius: 0px;
		border-bottom-right-radius: 15px;
		border-bottom-left-radius: 15px;
	}
}
.nav-link {
	margin-top: 10px;
	margin-right: 10px;
	border: 1px solid #dadada;

	border-radius: 25px;

}
.nav-link:hover {
	background: #1daeec !important;
	border: none;
}
.navbar-brand {
	/*border: 1px solid red;*/
	padding: 0 0;
	height: 70px;
}
.navbar-brand .logo {
	/*border: 1px solid red;*/
	height: 100%;
	float: left;

	padding: 0 15px 0 30px;
}

.navbar-brand .logo img {
	height: 100%;
}
.navbar-brand .nama-aplikasi {
	float: left;
	line-height: 70px;
	color: #333333;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: bold;
}
@media screen and (max-width:767px) {
	button.navbar-toggle {
		background: #999;
		margin-top: 17px;
		display: none;
	}
	.navbar-brand {
		width: calc(100% - 60px);
		/*border: 1px solid red;	*/
	}
	.navbar-inverse .navbar-brand {
		height: 70px;
	}
	.navbar-brand .logo {
		/*border: 1px solid red;*/
		/*width: calc(50% + 10px);*/
		width: 100%;
		padding: 0 10px;

		display: flex;
		justify-content: center; /* align horizontal */
		align-items: center; /* align vertical */
	}
	.navbar-brand .logo img {
		width: auto;
		height: 60px !important;
		max-height: inherit;
	}
	.navbar-brand .nama-aplikasi {
		width: calc(50% - 10px);
		/*border: 1px solid cyan;*/
		font-size: 14px;
	}
}


/****/
.area-konten {
	/*border: 1px solid red;*/
	/*min-height: calc(100vh - 70px - 40px);*/
	min-height: calc(100vh - 50px - 40px - 2px);
}
@media screen and (max-width:767px) {
	.area-konten {
		min-height: 0;
		/*border: 1px solid red;*/
	}
}
.area-banner {
	/*border: 1px solid cyan;*/
	position: relative;
	z-index: 9;

	-webkit-border-radius: 1px;
	-webkit-border-bottom-right-radius: 30px;
	-webkit-border-bottom-left-radius: 30px;
	-moz-border-radius: 1px;
	-moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 30px;
	border-radius: 1px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;

	overflow: hidden;
	/*display: none;*/
	top: 40px;
}
.area-banner img {
	width: 100%;
	height: auto;
}
@media screen and (max-width:767px) {
	.area-banner {
		margin-left: -15px;
		margin-right: -15px;
	}
}

/****/
.tv {
	position: relative;
	/*width: 200px;*/
	/*width: calc(100vw - 300px);*/
	width: 100%;
	/*height: 150px;*/
	height: calc(50vh - 0px);
	margin: 20px 0;
	/*background: red;*/
	border-radius: 50% / 20%;
	color: white;
	text-align: center;
	/*text-indent: .1em;*/

	overflow: hidden;
}
.tv:before {
	content: '';
	position: absolute;
	top: 10%;
	bottom: 10%;
	right: -5%;
	left: -5%;
	background: inherit;
	border-radius: 5% / 50%;
}

/****/
.area-konten .inner {
	position: relative;
	z-index: 10;
	/*border: 2px solid blue;*/
	/*margin-top: -270px;*/
	margin-top: -200px;
	margin-left: 40px;
	margin-right: 40px;
}
@media screen and (max-width:767px) {
	.area-konten .inner {
		/*margin-top: -60px;*/
		margin-top: 0px;
	}
}

/****/
.area-profil {
	/*background: rgba(255,255,255,0.9);*/

	/*background-color: rgba(255,255,255,0.2);
	background: url(images/linear_bg_2.png);
	background-repeat: repeat-x;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.2)), to(rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,1));
	background: -moz-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,1));
	background: -ms-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,1));
	background: -o-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,1));*/

	/*background-color: rgba(0,0,0,0.4);
	background: url(images/linear_bg_2.png);
	background-repeat: repeat-x;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,0.2)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
	background: -moz-linear-gradient(top, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
	background: -ms-linear-gradient(top, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
	background: -o-linear-gradient(top, rgba(0,0,0,0.4), rgba(0,0,0,0.2));*/

	background: rgba(0,0,0,0.5);
	
	padding: 15px;
	margin-bottom: 20px;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
@media screen and (max-width:767px) {
	.area-profil {
		/*background: #FFFFFF;*/
		/*background: rgba(0,0,0,0.5);*/

		background-color: rgba(0,0,0,0.9);
		background: url(images/linear_bg_2.html);
		background-repeat: repeat-x;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0.5)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,0.9), rgba(0,0,0,0.5));
		background: -moz-linear-gradient(top, rgba(0,0,0,0.9), rgba(0,0,0,0.5));
		background: -ms-linear-gradient(top, rgba(0,0,0,0.9), rgba(0,0,0,0.5));
		background: -o-linear-gradient(top, rgba(0,0,0,0.9), rgba(0,0,0,0.5));
	}
}
.area-profil .foto {
	float: left;
	width: 100px;
}
.area-profil .foto i {
	font-size: 50px;
	color: #FFFFFF;
}
@media screen and (max-width:767px) {
	.area-profil .foto {
		border: 1px solid red;
		/*width: 100%;*/
		height: 100px;
		margin: 0 auto;
		float: none;
		/*padding-bottom: 10px;*/
		display: flex;
		justify-content: center; /* align horizontal */
		align-items: center; /* align vertical */

		border: 6px solid rgba(255,255,255,0.2);
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		margin-bottom: 10px;

	}
}
.area-profil .data {
	float: left;
	width: calc(100% - 100px - 200px - 20px);	
	color: #FFFFFF;
	margin-right: 20px;

	background: #ffba29;
	color: #333333;
	padding: 10px;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.area-profil .nama-nik {
	/*border: 1px solid red;*/
	float: left;
	width: 65%;
}
.area-profil .data .nama {
	font-size: 18px;
	font-weight: bold;
}
.area-profil .data .nik {
	/*font-size: 36px;*/
	/*font-weight: bold;*/
}
.area-profil .data #locationData {
	float: left;
	width: 35%;
	
	/*border: 1px solid red;*/
	
}
@media screen and (max-width:767px) {
	.area-profil .nama-nik {
		width: 100%;
		border-bottom: 1px solid rgba(0,0,0,0.1);
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	.area-profil .data #locationData {
		width: 100%;
	}
}
.area-profil .waktu-sekarang {
	float: left;
	width: 200px;	
	color: #FFFFFF;
	background: #333333;
	/*border: 1px solid red;*/
	height: 100%;
	padding: 10px 10px;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
@media screen and (max-width:767px) {
	.area-profil .data {
		width: 100%;
		/*border: 1px solid red;*/
		border-bottom: 1px solid #dadada;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	.area-profil .waktu-sekarang {
		width: 100%;
		/*border: 1px solid red;*/
	}
}

/****/
.item-absensi {
	padding: 15px;

	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.datang {
	/*background-color: #0098BB;*/
	background-color: #2d699b;
	color: #FFFFFF;
}
@media screen and (max-width:767px) {
	.datang {
		margin-bottom: 20px;
	}
}
.pulang{
	background-color: #55D2D2;
	color: #FFFFFF;
}

.datang .waktu {
	/*background: #00cbff;*/
	/*color: #333333;*/
	/*padding: 10px 25px;*/

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	/*box-shadow: 0 8px 6px -6px rgba(0,0,0,0.1);*/
	background: rgba(0,0,0,0.1);
	/*border: 1px solid rgba(0,0,0,0.2);*/
}
.pulang .waktu {
	/*background: #cfe366;*/
	background: #018989;
	color: #333333;
	padding: 10px 25px;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	box-shadow: 0 8px 6px -6px rgba(0,0,0,0.1);
}
.waktu .ikon {
	float: left;
	width: 50px;
}
.waktu .ikon img {
	width: 40px;
}
.waktu .data {
	float: left;
	width: calc(100% - 50px);
}
.waktu .title {
	color: #FFFFFF;
}

.waktu .pukul {
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;

}

.waktu-selisih {
	/*background: #00cbff;*/
	color: #FFFFFF;
	padding: 10px;
	border: 1px solid rgba(255,255,255,0.4);
	border-top: none;

	-webkit-border-radius: 0px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius: 0px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-radius: 0px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;

	margin-left: 15px;
	margin-right: 15px;

	/*box-shadow: 0 8px 6px -6px rgba(0,0,0,0.1);*/
}
.waktu-selisih .pukul {
	font-size: 20px;
	font-weight: bold;
}

.waktu-selisih .sesuai {
	font-size: 11px;
	font-weight: bold;
	color: #1F903F;

}

.waktu-selisih .tidak {
	font-size: 11px;
	font-weight: bold;
	color: #E53E30;

}

/****/
.area-hasil-assesmen {
	
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 15px;

	/*background-color: #dadada;
	background: url(images/linear_bg_2.png);
	background-repeat: repeat-x;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dadada), to(rgba(0,0,0,0)));
	background: -webkit-linear-gradient(top, #dadada, rgba(0,0,0,0));
	background: -moz-linear-gradient(top, #dadada, rgba(0,0,0,0));
	background: -ms-linear-gradient(top, #dadada, rgba(0,0,0,0));
	background: -o-linear-gradient(top, #dadada, rgba(0,0,0,0));*/

	/*border: 2px dashed #dadada;*/
	/*background: #e9e9e9;*/

	/*background: #b3dcfe url(../images/img-tindak-lanjut.png) left bottom no-repeat;*/
	background: #b3dcfe url(../images/img-absen.png) left bottom no-repeat;
  background-size: auto 180px;

	/*-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;*/

	-webkit-border-radius: 15px;
	-webkit-border-bottom-right-radius: 30px;
	-webkit-border-bottom-left-radius: 30px;
	-moz-border-radius: 15px;
	-moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 30px;
	border-radius: 15px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;
}
@media screen and (max-width:767px) {
	.area-hasil-assesmen {
		background: #b3dcfe url(../images/img-absen.png) left bottom no-repeat;
  	background-size: auto 90px;
	}
}
.area-hasil-assesmen .title {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	/*border-bottom: 1px solid #dadada;*/
	/*padding-bottom: 10px;*/
	margin-bottom: 15px;
	padding-left: 20px;
}
.area-hasil-assesmen .data button {
	/*border: 1px solid red;*/
	/*background: #ff9600;*/
	background: none;
	width: 70% !important;
}
.area-hasil-assesmen .ikon {
	float: left;
	width: 80px;
	height: 80px;
	
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */


	-webkit-border-radius: 20px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 0px;
	-moz-border-radius: 20px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	border-radius: 20px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.area-hasil-assesmen .ikon img{
	width: 50px;
	height: 50px;
}

.area-hasil-assesmen .ikon i {
	font-size: 60px;
}
.area-hasil-assesmen .keterangan {
	float: left;
	/*width: calc(100% - 100px);*/
	width: 100%; /** tanpa icon finger **/
	font-size: 20px;
	/*line-height: 80px;*/
	/*letter-spacing: 2px;*/
	text-transform: uppercase;

	/*border: 1px solid #dadada;*/
	/*background: #FFFFFF;*/
	/*background: #ff9600;*/
	background: #0078c1;
	color: #FFFFFF;
	/*border: 1px solid #de8402;*/
	/*height: 80px;*/
	height: 45px;
	line-height: 45px;

	/*-webkit-border-radius: 0px;
	-webkit-border-top-right-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
	-moz-border-radius: 0px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomright: 20px;
	border-radius: 0px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;*/

	/** tanpa icon finger **/
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}
.area-hasil-assesmen button:hover .keterangan {
	/*background: #eeeeee;*/
	/*background: #FFFFFF;*/
	background: #333333;
	/*border: 1px solid #c5c5c9;*/
}
@media screen and (max-width:767px) {
	.area-hasil-assesmen .keterangan {
		line-height: normal;

		display: flex;
		justify-content: center; /* align horizontal */
		align-items: center; /* align vertical */
	}
}

/****/
.risiko-rendah i {
	color: green;
}
.risiko-sedang i {
	color: orange
}
.risiko-tinggi i {
	color: red
}

/****/
footer {
	height: 40px;
	line-height: 40px;
	
	text-align: center;
	font-size: 12px;
}
footer .copyright {
	/*border-top: 1px dashed rgba(0,0,0,0.2);*/
	border-top: 1px dashed rgba(255,255,255,1);
	color: #999;
	
	display: inline-block;
	width: 100%;
}

/****/
/* (A) BLINKING KEYFRAMES */
@keyframes blinking {
  0% {
    /*background-color: #ff3d50;*/
    background-color: #f4f4f4;
    /*border: 5px solid #871924;*/
  }
  /* ADD MORE KEYFRAMES IF YOU WANT
  50% {
    background-color: #55d66b;
    border: 5px solid #126620;
  } */
  100% {
    /*background-color: #222291;*/
    background-color: #b1dcb1;
    /*border: 5px solid #6565f2;*/
  }
}
 
/* (B) ATTACH BLINKING KEYFRAMES TO CONTAINER */
/* animation: name | time | iterations */
#demo {
  /*width: 300px;*/
  /*height: 300px;*/
  animation: blinking 1s infinite;
}

/****/
.area-link-survey {
	/*border: 1px solid red;*/
	margin-top: 20px;
	height: 140px;

	display: flex;
	justify-content: flex-end; /* align horizontal */
	align-items: flex-end; /* align vertical */
}
.area-link-survey a {
	border-radius: 20px;
	height: 40px;
	line-height: 40px;
	padding: 0 0;
	padding-left: 40px;
	padding-right: 40px;

	border-color: #dadada;

}
@media screen and (max-width:767px) {
	.area-link-survey {
		height: auto;
		justify-content: center; /* align horizontal */
		align-items: center; /* align vertical */

		margin-bottom: 20px;
	}
}


    
/****/
.area-konten #spinner.loader {
    z-index: 9999;
    position: absolute;
    left: calc(50% - 60px - 16px) !important;
    top: calc(50% - 20px - 0px) !important;

    background-color: pink;
}
.area-konten #spinner.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

.area-konten #spinner.loader::before {
    content: ""; /*::before and ::after both require content*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    opacity: .7;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/****/
.area-konten #spinner {
    /*background: rgba(231,76,60,0.8);
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    background-image: linear-gradient(120deg, rgba(234,238,68,0.9), rgba(51,208,255,0.9));
    background-image: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-image: radial-gradient(rgba(215,99,0,0.7), rgba(215,99,0,0.1), rgba(215,99,0,0));*/

    
    
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;

    padding: 30px;
    /*border: 1px solid red;*/
    /*background: pink;*/

    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}
.area-konten #spinner .inner-spinner {
  /*border: 2px solid cyan;*/
  /*padding-left: 140px;*/
  /*padding-right: 140px;*/
  padding: 20px;

  /*background-image: linear-gradient(to right, rgba(215,99,0,0),rgba(215,99,0,0.4),rgba(215,99,0,0));*/
  /*background-image: radial-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0), rgba(0,0,0,0.2));*/
  /*background: rgba(0,0,0,0.4);*/

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%; 
  border-radius: 50%;

}
.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;

  z-index: 10000;
  /*background-color: red;*/

  
}
/*.lds-roller:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: #2f4f8b;
  background: rgba(47,79,139,0.4);
}*/
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/****/
.lds-facebook {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: #fff;
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.lds-facebook div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.lds-facebook div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes lds-facebook {
  0% {
    top: 8px;
    height: 64px;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}

/****/
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 100px;
  height: 100px;

  background: rgba(0,0,0,0.4);

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%; 
  border-radius: 50%;

  padding: 10px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/****/
.item-absensi.datang {

}
.item-absensi.datang .waktu {
	padding: 10px 5px;
}
.item-absensi.datang .waktu .data .title {
/*	font-size: 16px;
	line-height: 40px;
	text-transform: uppercase;*/
	/*background: pink;*/

	font-family: 'Lexend Bold';
  font-size: 16px;
  /*font-size: 1.1250em;*/
  border-bottom: 1px solid #ffba29;
  margin-bottom: 12px;
  padding-bottom: 8px;
}
.item-absensi.datang .waktu-selisih {
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 10px;
	margin-top: 5px;
}
.item-absensi.datang .waktu-selisih:nth-child(2) {
	border-top: none;
	margin-top: 0px;

	-webkit-border-radius: 0px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius: 0px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-radius: 0px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}


/****/
.data-checklog {

}
.data-checklog .item {
	border-bottom: 1px solid rgba(255,255,255,0.2);
	padding-bottom: 7px;
	margin-bottom: 7px;
}
.data-checklog .item:last-child {
	/*background: pink;*/
	border-bottom: none;
	margin-bottom: 0px;
}

.data-checklog .item > .data {
	/*border: 1px solid red;*/
	float: left;
	width: calc(100% - 80px);
}
.data-checklog .item > .ikon {
	/*border: 1px solid cyan;	*/
	float: left;
	width: 80px;
	padding-top: 10px;
}
.data-checklog .item > .ikon i {
	font-size: 30px;
}
.data-checklog .item > .ikon i.fa-hijau {
	color: green;
	color: #00e115;
}
.data-checklog .item > .ikon i.fa-merah {
	color: red;
}

/****/