@import url("animate.css");
@import url(https://fonts.googleapis.com/css?family=Lily+Script+One);
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
  background-image: url(../images/preloader.gif);
  background-repeat: no-repeat;
  background-position: center center;
}

/****/
.area-paket-lelang-wrapper{
	/* background: url(../images/bg-paket-lelang-home.png) bottom right no-repeat; */
	*padding-bottom:20px;

	*border:1px solid pink;


	float:left;
	width:100%;
	clear:both;
}
.area-paket-lelang{
	/* *background:url(../images/bg-waktu-shadow.png) top left no-repeat; */
	*min-height:752px;
	padding-right:20px;
	*border:1px solid yellow;
	float:left;
	width:100%;
	clear:both;
}
@media screen and (max-width:767px) {
	.area-paket-lelang{
		padding-left:15px;
		padding-right:15px;
	}
}
.area-paket-lelang .list{
  	margin-bottom:10px;
  	background:#FFF;
  	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
  	border-width: 0 0 0 6px;
  	border-style: solid;
	 -webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(2,174,218,1)), to(rgba(115, 212, 238, 1))) 1 100%;
	 -webkit-border-image: -webkit-linear-gradient(bottom, rgba(2,174,218,1), rgba(115, 212, 238, 1)) 1 100%;
	 -moz-border-image: -moz-linear-gradient(bottom, rgba(2,174,218,1), rgba(115, 212, 238, 1)) 1 100%;
	 -o-border-image: -o-linear-gradient(bottom, rgba(2,174,218,1), rgba(115, 212, 238, 1)) 1 100%;
	 border-image: linear-gradient(to top, rgba(2,174,218,1), rgba(115, 212, 238, 1)) 1 100%;
}
.area-paket-lelang .list:after {
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	content: ".";
	font-size: 0;
}
.area-paket-lelang .list .waktu{
	*border:1px solid mediumseagreen;
	float:left;
	width:110px;
	height:100%;
	text-align:center;
	line-height:46px;

	display:block;
	/* *background: url(../images/bg-spiral-kiri.png) top right no-repeat; */

}
.area-paket-lelang .list .waktu .tanggal{
	font-size:30px;
	line-height:24px;
	padding-top:14px;
	font-family: 'AvenirBook';
	text-align:center;
}
.area-paket-lelang .list .waktu .bulan-tahun{
	font-size:14px;
	text-align:center;
}
@media screen and (max-width:767px) {
	.area-paket-lelang .list .waktu{
		width:100%;
		*background:red;
		line-height:normal;
		text-align:left;
		padding-left:20px;
		padding-top:15px;
		font-size:12px;
	}
}

.area-paket-lelang .list .keterangan{

	float:left;
	width:calc(100% - 110px);
	/* *background:url(../images/bg-spiral-kanan.png) top left no-repeat; */
	padding:0 30px;

	*border-bottom:1px solid #da1a1a;
}
.area-paket-lelang .list .keterangan.keterangan-daftar{
	width:calc(100% - 110px - 140px);

}
.area-paket-lelang .list .keterangan .judul{
	*border:2px solid red;
	padding-top:13px;
	*width:85%;
	text-transform:uppercase;
}

.area-paket-lelang .list .keterangan .daftar{
	*border:2px solid red;
	margin-top:-65px;
	float:right;
	text-transform:uppercase;
}

@media screen and (max-width:767px) {
	.area-paket-lelang .list .keterangan{
		width:100%;
		*background:mediumseagreen;
		padding:0 20px;
	}
	.area-paket-lelang .list .keterangan.keterangan-daftar{
		width:100%;
	}
	.area-paket-lelang .list .keterangan .judul{
		padding-top:5px;
		font-weight:bold;
	}
}
.area-paket-lelang .list .keterangan .judul a{
	color:#333;
}
.area-paket-lelang .list .keterangan .judul a:hover{
	color: #8CC152;
}
.area-paket-lelang .list .keterangan .lokasi{
	padding-bottom:15px;
	*border-bottom:1px solid #da1a1a;
	*float:left;
	*width:calc(100% - 160px);
	*border:1px solid mediumseagreen;
	*font-size:14px;
	*color:rgba(0,0,0,0.5);
}
.area-paket-lelang .list .daftar-paket-ini{
	float:right;
	width:120px;
	margin-top:18px;
	margin-right:20px;
	text-align:center;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	background: mediumseagreen;
}
@media screen and (max-width:767px) {
	.area-paket-lelang .list .daftar-paket-ini{
		margin-top:0px;
		margin-bottom:18px;
	}
}
.area-paket-lelang .list .daftar-paket-ini a{
	display:block;
	color:#FFF;
	padding-top:5px;
	padding-bottom:5px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border-bottom:2px solid rgba(0,0,0,0.2);
}
.area-paket-lelang .list .daftar-paket-ini a:hover{
	background: #8CC152;
	text-decoration:none;
	border-bottom:2px solid rgba(0,0,0,0.5);
}
.area-paket-lelang .list .daftar-paket-ini a i{
	color:rgba(255,255,255,0.8);
	vertical-align:middle;
}
.area-paket-lelang .list .daftar-paket-ini a:hover i{
  background: #8CC152;
	color: white;
}
@media screen and (max-width:767px) {
	.area-paket-lelang .list .keterangan .lokasi{
		font-size:12px;
	}
}
.area-paket-lelang .list .keterangan .batas-bawah{
	border-bottom:1px solid #da1a1a;
}
.area-paket-lelang .list .keterangan .info-bs-daftar{
	background:rgba(255,255,255,0.2);
	border-left:10px solid rgba(255,255,255,1);
}

/****/
.area-paket-lelang .list.main{
	-webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(2,174,218,1)), to(rgba(115, 212, 238, 1))) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(bottom, rgba(2,174,218,1), rgba(115, 212, 238, 1)) 1 100%;
	-moz-border-image: -moz-linear-gradient(bottom, rgba(2,174,218,1), rgba(115, 212, 238, 1)) 1 100%;
	-o-border-image: -o-linear-gradient(bottom, rgba(2,174,218,1), rgba(115, 212, 238, 1)) 1 100%;
	border-image: linear-gradient(to top, rgba(2,174,218,1), rgba(115, 212, 238, 1)) 1 100%;
}
.area-paket-lelang .list.tps{
	-webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(#142267), to(#3c4c96)) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(bottom, #142267, #3c4c96) 1 100%;
	-moz-border-image: -moz-linear-gradient(bottom, #142267, #3c4c96) 1 100%;
	-o-border-image: -o-linear-gradient(bottom, #142267, #3c4c96) 1 100%;
	border-image: linear-gradient(to top, #142267, #3c4c96) 1 100%;
}

.area-paket-lelang .list.phc{
	-webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(#ddb41d), to(#fed640)) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(bottom, #ddb41d, #fed640) 1 100%;
	-moz-border-image: -moz-linear-gradient(bottom, #ddb41d, #fed640) 1 100%;
	-o-border-image: -o-linear-gradient(bottom, #ddb41d, #fed640) 1 100%;
	border-image: linear-gradient(to top, #ddb41d, #fed640) 1 100%;
}

.area-paket-lelang .list.bjti{
	-webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(#bfc139), to(#dee353)) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(bottom, #bfc139, #dee353) 1 100%;
	-moz-border-image: -moz-linear-gradient(bottom, #bfc139, #dee353) 1 100%;
	-o-border-image: -o-linear-gradient(bottom, #bfc139, #dee353) 1 100%;
	border-image: linear-gradient(to top, #bfc139, #dee353) 1 100%;
}

.area-paket-lelang .list.pms{
	-webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(#d76001), to(#fd7100)) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(bottom, #d76001, #fd7100) 1 100%;
	-moz-border-image: -moz-linear-gradient(bottom, #d76001, #fd7100) 1 100%;
	-o-border-image: -o-linear-gradient(bottom, #d76001, #fd7100) 1 100%;
	border-image: linear-gradient(to top, #d76001, #fd7100) 1 100%;
}

.area-paket-lelang .list.lamong{
	-webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(#78a348), to(#9dc872)) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(bottom, #78a348, #9dc872) 1 100%;
	-moz-border-image: -moz-linear-gradient(bottom, #78a348, #9dc872) 1 100%;
	-o-border-image: -o-linear-gradient(bottom, #78a348, #9dc872) 1 100%;
	border-image: linear-gradient(to top, #78a348, #9dc872) 1 100%;
}
.area-paket-lelang .list.pds{
	-webkit-border-image: -webkit-gradient(linear, 0 100%, 0 0, from(#bb1e22), to(#e03336)) 1 100%;
	-webkit-border-image: -webkit-linear-gradient(bottom, #bb1e22, #e03336) 1 100%;
	-moz-border-image: -moz-linear-gradient(bottom, #bb1e22, #e03336) 1 100%;
	-o-border-image: -o-linear-gradient(bottom, #bb1e22, #e03336) 1 100%;
	border-image: linear-gradient(to top, #bb1e22, #e03336) 1 100%;
}

/****/
.area-paket-lelang-kosong{
	padding-right:30px;
}
@media screen and (max-width:767px) {
	.area-paket-lelang-kosong{
		padding-right:15px !important ;
		padding-left:15px !important;
		margin-top:10px;
	}
}
.area-paket-lelang-kosong .judul-halaman{

}
.area-paket-lelang-kosong .inner{
	/* background:url(../images/bg-data-kosong.png) top left no-repeat; */
	height:300px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border:1px solid rgba(0,0,0,0.1);
	border-width:0 1px 1px 1px;
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}
@media screen and (max-width:767px) {
	.area-paket-lelang-kosong .inner{
		/* background:url(../images/bg-data-kosong.png) center center no-repeat; */
		height:160px;
	}
}
.area-paket-lelang-kosong .list{
	color:red;
	*height:200px;
	padding-top:40px;
	padding-bottom:40px;
	*display: flex;
	*justify-content: center; /* align horizontal */
	*align-items: center; /* align vertical */
}
.area-paket-lelang-kosong .list div{
  /* background:url(../images/bg-data-kosong.png) center center no-repeat; */
}


/****/

/****/
.area-paket-lelang-tambah{

}
.area-paket-lelang-tambah input[name=reqNamaPaket]{
	width:700px;
}
.area-paket-lelang-tambah input[name=reqNilaiPekerjaan],
.area-paket-lelang-tambah input[name=reqLokasiPekerjaan],
.area-paket-lelang-tambah input[name=reqEmailPanitia]{
	width:400px;
}
@media screen and (max-width:767px) {
	.area-paket-lelang-tambah input[name=reqNamaPaket]{
		width:100%;
	}
	.area-paket-lelang-tambah input[name=reqNilaiPekerjaan],
	.area-paket-lelang-tambah input[name=reqLokasiPekerjaan],
	.area-paket-lelang-tambah input[name=reqEmailPanitia]{
		width:100%;
	}

}
@media only screen and (max-width: 1280px) {
	.area-paket-lelang-tambah input[name=reqNamaPaket]{
		*border:4px solid green;
		width:100%;
	}
}
/****/

/****/
.judul-grup{
	background: mediumseagreen;
	border-bottom:3px solid #d7d7d7;
	color:#FFF;
	padding-left:10px;
	padding-right:10px;
	height:34px;
	line-height:30px;
	margin-bottom:10px;

	*-webkit-border-radius: 4px;
	*-moz-border-radius: 4px;
	*border-radius: 4px;
}
@media screen and (max-width:767px) {
	.judul-grup{
		height:auto;
		line-height:normal;

		padding-top:5px;
		padding-bottom:5px;

	}
}

/****/


/****/
.judul-halaman{
	font-family: 'AvenirHeavy';
	font-size:18px;
	text-transform:uppercase;
	background:#3CB371;
	color:#FFF;
	letter-spacing:1px;

	padding:13px 20px 12px;

	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
@media screen and (max-width:767px) {
	.judul-halaman{
		height:auto;
		line-height:normal;
		*padding-top:15px;
		*padding-bottom:15px;

		padding:15px 20px 15px;

		float:left;
		width:100%;
	}

}
/*.judul-halaman:before{
	font-family: 'FontAwesome';
	*content:"\f0c8";
	content:"\f04d";
	color:#da1a1a;
	margin-right:10px;
}*/

.judul-halaman .area-cari-lelang{
	*background:mediumseagreen;
	float:right;
	line-height:normal;
}
@media screen and (max-width:767px) {
	.judul-halaman.paket-lelang{
		float:left;
		width:100%;
		clear:both;
	}
	.judul-halaman .area-cari-lelang{
		width:100%;
		*background:#ddd;

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

		padding:5px 0;

		border-top: 1px solid rgba(255,255,255,0.2);
		margin-top: 8px;
		padding-top: 8px;

		text-transform: none;
		font-size: 12px;
	}
}
.judul-halaman .area-cari-lelang input{
	border:none;
	*background-color:transparent;
	color:#FFF;
	font-size:15px;

	height:30px;
	line-height:30px;

	*border:1px solid red;

	*background:rgba(255,255,255,0.2);
	background:rgba(0,0,0,0.1);
	padding:0px 20px;

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


}

.judul-halaman .area-cari-lelang ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #FFF;
}
.judul-halaman .area-cari-lelang ::-moz-placeholder { /* Firefox 19+ */
  color: #FFF;
}
.judul-halaman .area-cari-lelang :-ms-input-placeholder { /* IE 10+ */
  color: #FFF;
}
.judul-halaman .area-cari-lelang :-moz-placeholder { /* Firefox 18- */
  color: #FFF;
}

/*.judul-halaman .area-cari-lelang:after{
	font-family: 'FontAwesome';
	content:"\f002";
	color:#b3b3b3;
}
*/
.judul-halaman .area-cari-lelang button{
	background-color:transparent;
	border:none;
}
@media screen and (max-width:767px) {
	.judul-halaman .area-cari-lelang input{
		width:calc(100% - 50px);
		*border:1px solid red;
		padding-left:10px;
	}
}


/****/
.judul-halaman.merah{
	*background:#8c1a1f;
	background:rgba(140,26,31,0.5);
	color:#FFF;
}
.judul-halaman.merah:before{
	color:#FFF;
}
.judul-halaman.hitam{
	background:#333333;
	color:#FFF;
}
.judul-halaman.hitam a{
	color:#FFF;
}
.judul-halaman.hitam i{
	color:#a51e24;
}
.judul-halaman.hitam:before{
	color:#292929;
	content:"\f007";
	font-size:40px;
	vertical-align:middle;
}

.judul-halaman .info{
	*background:#f4f4f4;
	background:rgba(0,0,0,0.2);
	border:1px solid rgba(0,0,0,0.1);
	font-size:14px;
	text-transform:none;
	float:right;
	letter-spacing:normal;
	padding:2px 5px;

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

}

/****/

#tbl_bidang.paket-lelang td.tgl{

}
#tbl_bidang.paket-lelang td.tgl .bln-thn{
	*border:1px solid limegreen;
	*background:#a51e24;
	background:limegreen;
	color:#FFF;
	text-align:center;
	font-size:14px;
	padding:4px 10px;
}
#tbl_bidang.paket-lelang td.tgl .tgl{
	background:rgba(0,0,0,0.2);
	*border:1px solid #a51e24;
	text-align:center;
	font-size:30px;
}
.area-tabel-paket table tbody tr td .tgl-awal{
	*background:rgba(0,0,0,0.1);
	background:rgb(242,88,36);
	color:#FFF;
	white-space:nowrap;
	padding-left:5px;
	padding-right:5px;

	float:left;
	*font-size:12px;

	*border:1px solid red;
}
.area-tabel-paket table tbody tr td .tgl-akhir{
	*background:rgba(255,255,255,0.4);
	background:rgb(111,161,82);
	color:#FFF;
	white-space:nowrap;
	padding-left:5px;
	padding-right:5px;

	float:left;
	*font-size:12px;
	*border:1px solid red;
}

.m-shadows {
	-webkit-box-shadow: -33px 11px 43px -34px rgba(0,0,0,1);
	-moz-box-shadow: -33px 11px 43px -34px rgba(0,0,0,1);
	box-shadow: -33px 11px 43px -34px rgba(0,0,0,1);
}

.box-details {
    float: left;
    width: 100%;
    background: url(../images/bg-main.png);
    padding: 20px 30px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
		margin-bottom: 50px;
}

.box-details-inner {
	background: rgba(255,255,255,0.6) url(../images/bg-main2.png) top right no-repeat fixed;
	border: 1px solid rgba(209,209,208,0.85);
	padding: 20px 20px;
}

.scroll-to-top {
  display: inline-block;
  width: 45px;
  height: 45px;
  background: #8CC152;
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 99;
  text-align: center;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  display: none;
  border-radius: 50%;
}
.scroll-to-top:after, .scroll-to-top:before {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #8CC152;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation-delay: .9s;
          animation-delay: .9s;
  content: "";
  position: absolute;
  -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
          box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  -webkit-animation: ripple 3s infinite;
          animation: ripple 3s infinite;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}
.scroll-to-top:after {
  -webkit-animation-delay: .6s;
          animation-delay: .6s;
}
.scroll-to-top i {
  font-size: 18px;
  line-height: 45px;
  color: #fff;
  position: relative;
  z-index: 10;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}
.scroll-to-top:hover {
  background: #90EE90;
}
.scroll-to-top:hover i {
  color: #18212E;
}
.scroll-to-top:hover:before, .scroll-to-top:hover:after {
  background-color: #90EE90;
}
@-webkit-keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}


/* Login */
.costum-login{
	float:left !important;
	*border:1px solid white;
}
@media screen and (max-width:767px) {
	.costum-login{
    text-align: center;
		*border:1px solid white;
	}
}

.costum-login form{
	float:left;
	margin-top:5px;
}

@media screen and (max-width:767px) {
	.costum-login form{
		margin-top:8px;
		margin-bottom:5px;
		padding-left: 15px;
		padding-left: 10px;
		padding-right: 5px;
	}
}

.costum-login form input[type=text],
.costum-login form input[type=password],
.costum-login form input.input-captcha{
	border:none;
	background: whitesmoke;
	color: black;
	height:34px;
	*line-height:34px;
	padding-left:20px;
	padding-right:20px;
	float:left;
	*margin-left:10px;
	*width:180px;
	*width:130px;
	width:150px;
}

.costum-login input:hover {
  background: black;
  color: white;
  text-shadow: 0 0 10px azure;
  padding: 0 80px 0 20px;
  /* border-radius: 30px; */
  box-shadow: 0 0 25px 0 azure,
              0 20px 25px 0 rgba(0, 0, 0, 0.2);
  transition: all 1s;
  /* opacity: 0; */
  /* z-index: 5; */
  /* font-weight: bolder; */
  letter-spacing: 0.1em;
  /* box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4); */
}

.costum-login form input[type=text]{
	background: whitesmoke /* url(../images/xxxxxx.png) right no-repeat */;
	-webkit-border-top-left-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
	-moz-border-radius-topleft: 17px;
	-moz-border-radius-bottomleft: 17px;
	border-top-left-radius: 17px;
	border-bottom-left-radius: 17px;
}

.costum-login form input.input-captcha{
	*background:rgba(0,0,0,0.4) /* url(../images/xxxxxx.png) left no-repeat */;
	background:rgba(0,0,0,0.4);
	*background:rgba(255,255,255,0.4) /* url(../images/xxxxxx.png) left no-repeat */;
	*background:rgba(0,0,0,0.1) /* url(../images/xxxxxx.png) left no-repeat */;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	width:100px;

}
.costum-login form .area-captcha{
	*border:1px solid red;
	float:left;
	position:relative;
	z-index:1px;
	*background:#6a7392;
	*background:rgba(0,0,0,0.2);
	background:#FFF;
}
.costum-login form .area-captcha img#captchaImage{
	*height:100%;
	*background:red;
}
.costum-login form .area-captcha img.refresh-captcha{
	width:25px;
	*height:25px;
	margin-right:14px;
	background:#FFF;
	*-webkit-border-radius: 50%;
	*-moz-border-radius: 50%;
	*border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	*position:absolute;
	*left:0;
}

.costum-login form button[type=submit]{
	width:48px;
	height:48px;
	margin-top:-7px;
	margin-left:-10px;
	background:#8CC152/*25b8eb*//*02b4e2*/ /* url(../images/login.png) center center no-repeat */;
	-webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.3);
  box-shadow: 0 8px 6px -6px rgba(0,0,0,0.3);
	float:left;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border:none;
	position:relative;
	z-index:2;
}

.costum-login form button[type=submit]{
  color: white;
	width:48px;
	height:48px;
	margin-top:-7px;
	margin-left:-10px;
	background:#8CC152/*25b8eb*//*02b4e2*/ /* url(../images/login.png) center center no-repeat */;
	-webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.3);
  box-shadow: 0 8px 6px -6px rgba(0,0,0,0.3);
	float:left;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border:none;
	position:relative;
	/* z-index:2; */
}

.costum-login form button[type=submit]:hover{
  background: #8CC152;
  color: black;
  box-shadow: 0 0 25px 0 black,
              0 20px 25px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.1s;
}

.costum-login a.forgot-pwd{
	border:1px solid #8CC152;
	/* background:rgba(255,255,255,0.2) url(../images/icon-forgot-pwd.png) center center no-repeat; */
	color: white;
	float:left;
	width:48px;
	height:48px;
	line-height:48px;
	margin-top:-7px;
	margin-left:4px;
	padding-left:15px;
	padding-right:10px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.costum-login a.forgot-pwd:hover{
  background: #8CC152;
  color: black;
  box-shadow: 0 0 25px 0 black,
              0 20px 25px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.1s;
}

.daftar-popup {
  border-top: 1px solid #CCC;
  text-align: center;
  padding-top: 15px;
  margin-top: 15px;
}

@media screen and (max-width: 767px) {
  .login-popup {
    width: calc(100% - 80px);
  }
}

@media screen and (max-width:767px) {
	.costum-login a.forgot-pwd{
		width: 34px;
		height: 34px;
		line-height: 34px;
		margin-top: 0px;
		background-size: 70%;
    padding-left: 9px;
	}
}

.container-cs{
  width: 300px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  justify-content: center;
  align-items: center;
}
.filds{
  width: 100%;
  height: auto;
  display: inline-block;
  position: relative;
  margin-bottom: 5px
}
.login-input{
  width: 100%;
  height: 45px;
  border: 0px;
  border-bottom: 1px solid #9e9e9e;
  transition: border-bottom, box-shadow .25s ease-in-out;
  color: black;
}
.label-login{
  position: absolute;
  top: 0;
  left: 0;
  cursor: text;
  color: #9e9e9e;
  transform: translateY(18px);
  transition: transform .25s ease-in-out;
  transform-origin: 0% 100%;
}
.login-input:focus{
  border-bottom: 1px solid #26a96a;
  box-shadow: 0 1px 0 0 #26a96a;
  outline: 1px solid transparent;
}
.login-input:focus + .label-login{
  transform: translateY(-14px) scale(.8);
}
.login-input::-webkit-input-placeholder,
.login-input::-moz-input-placeholder{
	color: transparent;
}
.login-input::placeholder{
	color: transparent;
}
.login-input:not(:placeholder-shown){
  border-bottom: 1px solid #9e9e9e;
}
.login-input:not(:placeholder-shown) + .label-login{
  transform: translateY(-14px) scale(.8);
}
.login-btn{
  margin-top: 10px;
  padding: 15px 50px;
  width: auto;
  background: #8CC152;
  border: none;
  border-radius: 25px;
  color: white;
  cursor: pointer;
  display: inline-block;
  float: center;
  clear: center;
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -ms-transition: 0.2s ease all;
  -o-transition: 0.2s ease all;
  transition: 0.2s ease all;
}
.login-btn:hover{
  -webkit-box-shadow: 0px 0px 55px -14px rgba(120,184,43,1);
  -moz-box-shadow: 0px 0px 55px -14px rgba(120,184,43,1);
  box-shadow: 0px 0px 55px -14px rgba(120,184,43,1);

}
/** END LOGIN **/