.icon-btn.ui-button {
  background: transparent;
  border: none; }
.icon-btn.ui-button.ui-state-hover {
  background: transparent;
  filter: saturate(180%); }
.icon-btn.ui-button.ui-state-active,
.icon-btn.ui-button.ui-state-down {
  background-color: transparent;
  filter: saturate(180%); }
  
.icon-view.ui-icon {
  background-image: url(../resources/img/icon/icon_view.svg);
  background-size: cover;
  font-size: 2.143em; }
  
.icon-edit.ui-icon {
  background-image: url(../resources/img/icon/icon_edit.svg);
  background-size: cover;
  font-size: 2.143em; }

.icon-delete.ui-icon {
  background-image: url(../resources/img/icon/icon_remove.svg);
  background-size: cover;
  font-size: 2.143em; }

.icon-register.ui-icon {
  background-image: url(../resources/img/icon/icon_daftar_ulang.svg);
  background-size: cover;
  font-size: 2.143em; }

.icon-terminated.ui-icon {
  background-image: url(../resources/img/icon/icon_terminasi.svg);
  background-size: cover;
  font-size: 2.143em; }
  
.centerThisImage{
	display: block;
 	margin-left: auto;
  	margin-right: auto;
}

.centerThisPG{
	text-align: center;
	margin: 0px auto;
}

.newButton{
	padding: 10px 20px;
	box-shadow: 1px 5px 15px rgba(46, 204, 113, 0.2) !important;
	background-color: #61B5A1 !important;
	color: white !important;
	border: 0px !important;
	text-align: center !important;
	font-weight: bold;
}

.newButton:hover{
	filter: saturate(180%);
}



.newButtonDarkerSmallPadding{
	padding: 10px 5px;
	box-shadow: 1px 5px 15px #4C767B 0.1 !important;
	background-color: #4C767B !important;
	color: white !important;
	border: 0px !important;
	text-align: center !important;
  	font-weight: bold; }

.newButtonDarkerSmallPadding:hover{
	filter: saturate(180%); }	   

.newButtonSmallPadding{
  padding: 10px 5px;
  box-shadow: 1px 5px 15px rgba(46, 204, 113, 0.2) !important;
  background-color: #61B5A1 !important;
  color: white !important;
  border: 0px !important;
  text-align: center !important;
  font-weight: bold !important;}
  
.newButtonSmallPadding:hover {
	filter: saturate(180%); }	    

.newButtonLighterSmallPadding{
	padding: 10px 20px;
	box-shadow: 1px 5px 15px #4C767B 0.1 !important;
	background-color: #ECEFF1 !important;
	color: #90A4AE !important;
	border: 0px !important;
	font-weight:bold;
}

.newButtonLighterSmallPadding:hover{
	filter: saturate(180%);
}

.newButtonSmallestPaddingNoBold{
  padding: 5px 5px;
  box-shadow: 1px 5px 15px rgba(46, 204, 113, 0.2) !important;
  background-color: #61B5A1 !important;
  color: white !important;
  border: 0px !important;
  text-align: center !important;
} 
.newButtonSmallestPaddingNoBold:hover {
	filter: saturate(180%); 
}	    

.newButtonLighterSmallestPaddingNoBold{
	padding: 5px 5px;
	box-shadow: 1px 5px 15px #4C767B 0.1 !important;
	background-color: #ECEFF1 !important;
	color: #61B5A1 !important;
	border: 0px !important;
}
.newButtonLighterSmallestPaddingNoBold:hover{
	filter: saturate(180%);
}

.dangerButton{
	padding: 10px 20px;
	box-shadow: 1px 5px 15px rgba(247,111, 108, 0.2) !important;
	background-color: #F76F6C !important;
	color: white !important;
	border: 0px !important;
	text-align: center !important;
	font-weight: bold;
}

.dangerButton:hover{
	filter: saturate(180%);
}

.roundedButton{
	box-shadow: 1px 5px 15px rgba(46, 204, 113, 0.2) !important;
	color: white !important;
	border: 0px !important;
	text-align: center !important;
}

.roundedButton:hover{
	filter: saturate(180%);
}

.disabledButton{
	background-color : #61B5A1 !important;
	color: white !important;
	opacity: 1 !important;
	filter: saturate(100%);
	border: 0px !important;
	height: 35px;
}

.disabledButton:hover{
	cursor: not-allowed !important;
}

.newButtonDarker{
	padding: 10px 20px;
	box-shadow: 1px 5px 15px #4C767B 0.1 !important;
	background-color: #4C767B !important;
	color: white !important;
	border: 0px !important;
}

.newButtonDarker:hover{
	background-color : #355356 !important;
}

.newButtonDarkerBold{
	padding: 10px 20px;
	box-shadow: 1px 5px 15px #4C767B 0.1 !important;
	background-color: #4C767B !important;
	color: white !important;
	border: 0px !important;
	font-weight:bold;
}

.newButtonDarkerBold:hover{
	background-color : #355356 !important;
}

.newButtonLighterBold{
	padding: 10px 20px;
	box-shadow: 1px 5px 15px #4C767B 0.1 !important;
	background-color: #ECEFF1 !important;
	color: #90A4AE !important;
	border: 0px !important;
	font-weight:bold;
}

.newButtonLighterBold:hover{
	background-color : #8497a4 !important;
}

.newButtonNoBold{
	padding: 10px 20px;
	box-shadow: 1px 5px 15px rgba(46, 204, 113, 0.2) !important;
	background-color: #61B5A1 !important;
	color: white !important;
	border: 0px !important;
	text-align: center !important;
}

.newButtonNoBold:hover{
	filter: saturate(180%);
}

.newButtonLighterNoBold{
	padding: 10px 20px;
	box-shadow: 1px 5px 15px #4C767B 0.1 !important;
	background-color: #ECEFF1 !important;
	color: #61B5A1 !important;
	border: 0px !important;
}
.newButtonLighterNoBold:hover{
	filter: saturate(180%);
}

.newButton:focus{
	box-shadow: 0px;
}

.labelSmall{
	color: #23818E;
	font-size: 12px !important;
}

.labelSmallReason{
	color: #90A4AE;
	font-size: 12px !important;
}

.greenBackground {
	background-color: #61B5A1 !important;
}

.borderGreen{
	font-size: 11px !important;
	background-color: white !important;
	transition: background-color 0.5s ease;
	height: 35px;
}

.borderGreen:hover{
	color: white !important;
	background-color: #61b5a1 !important;
}

.chooseButton{
	background-color: white !important;
	transition: background-color 0.5s ease;
	height: 35px;
}

.chooseButton:hover{
	color: white !important;
	background-color: #61B5A1 !important
}

.borderGreenSubmit{
	background-color: #61b5a1 !important;
	transition: background-color 0.5s ease;
	color: white !important;
	padding: 5px;
}

.borderGreenSubmit:hover{
	color: white !important;
	background-color: #279279 !important;
}
		
.borderGreenAdd{
	border: 1px solid #61B5A1;
	border-radius: 15px;
	background-color: white !important;
	padding: 10px 25px;
	font-size: 10pt;
	color: #61B5A1 !important;
	transition: background-color 0.5s ease;
}

.borderGreenAdd:hover{
	color: white;
	background-color: #4da48e;
}

.roundedLabel{
   	text-align: center;
   	display: block;
   	width: 180px;
   	height: 25px;
   	border-radius: 10px;
}

.grid30 {
	width: 49%;
}

.grid25{
	width: 21%;
}
.grid22{
	width: 27%;
}
.grid20{
	width: 17%;
}

.redColorPanel {
	background-color : #ff6961 !important;
	color: white !important;
}

.orangeBackground {
 	background-color: #ffa500;
 }
    
.greenBackground {
	background-color: #61B5A1;
}

.redBackground {
	background-color: #ff6961;
}

.button-greenAdrena{
	background-color: #61B5A1;
}

.borderGreenWhite{
	border: 1px solid #61B5A1;
	border-radius: 15px;
	padding: 5px 20px;
	font-size: 10pt;
	color: #61B5A1;
	transition: background-color 0.5s ease !important;
	background-color: white !important;
}

.borderGreenWhite:hover{
	color: white !important;
	background-color: #4da48e !important;
}

.borderGreen{
	border: 1px solid #61B5A1;
	border-radius: 15px;
	padding: 5px 20px;
	font-size: 10pt;
	color: #61B5A1;
	transition: background-color 0.5s ease;
}

.borderGreen:hover{
	color: white;
	background-color: #4da48e;
}

.borderGreenAdd{
	border: 1px solid #61B5A1 !important;
	border-radius: 15px !important;
	padding: 10px 25px !important;
	font-size: 10pt !important;
	color: #61B5A1 !important;
	transition: background-color 0.5s ease !important;
}

.borderGreenAdd:hover{
	color: white !important;
	background-color: #4da48e !important;
}


.borderGreenMobile{
	border: 1px solid #61B5A1 !important;
	border-radius: 15px !important;
	padding: 5px 27px !important;
	font-size: 10pt !important;
	color: #61B5A1 !important;
	transition: background-color 0.5s ease !important;
}

.borderGreenMobile:hover{
	color: white !important;
	background-color: #4da48e !important;
}


.borderGreenSubmitSmall{
	border: 1px solid #61B5A1;
	border-radius: 15px !important;
	padding: 3px 27px !important;
	background-color: #61b5a1 !important;
	transition: background-color 0.5s ease !important;
	color: white !important;
}

.borderGreenSubmitSmall:hover{
	color: white !important;
	background-color: #279279 !important;
}

.text-blueAdrena{
	color: #23818E
}

.text-greenAdrena{
	color: #61B5A1 !important;
}

.text-navyAdrena{
	color: #4C767B !important;
}

.underline{
	text-decoration: underline !important;
}

.text-greenAdrena:hover{
	color: #4C767B !important;
}

.opacity3{
	opacity: 0.3;
}
.opacity7{
	opacity: 0.7;
}

.menuItem-left{
 	 width : 4em;
     height: 6em;
     display: block;
     margin: 0 auto;
 }
 
 .body .ui-paginator{
 	border: 0px !important;
 }
 
 .home-icon {
     background: url(../resources/img/icon/icon_home.svg) no-repeat !important;
 }
 
 .billing-icon {
     background: url(../resources/img/icon/icon_billing.svg) no-repeat !important;
 }
 
 .home-icon:hover {
     filter: brightness(80%);
 }
 
 .billing-icon:hover{
 	 filter: brightness(80%);
 }
 
 .logout-icon {
     background: url(../resources/img/icon/icon_logout.svg) no-repeat !important;
 }
 
 .reRegister-icon{
 	 background: url(../resources/img/icon/icon_daftar_ulang.svg) no-repeat !important;
     background-size: 30px 50px !important;
     height: 43px;
     width: 35px;
     margin: 0 auto;
     border: 0px !important;
 }
 
 .reRegister-icon:hover{
 	filter: saturate(400%);
 	transition: background-color 0.5s ease !important;
 }
 
 .edit-icon {
     background: url(../resources/img/icon/icon_edit.svg) no-repeat !important;
     background-size: 30px 35px !important;
     height: 35px;
     width: 35px;
     margin: 0 auto;
     border: 0px !important;
 }
 
 .edit-icon:hover{
 	filter: brightness(70%);
 	transition: background-color 0.5s ease !important;
 }
 
 .history-icon {
     background: url(../resources/img/icon/icon_history.svg) no-repeat !important;
     background-size: 30px 35px !important;
     height: 35px;
     width: 35px;
     margin: 0 auto;
     border: 0px !important;
 }
 
 .history-icon:hover{
 	filter: brightness(70%);
 	transition: background-color 0.5s ease !important;
 }
 
 .pdf-icon {
     background: url(../resources/img/icon/icon_pdf.svg) no-repeat !important;
     background-size: 30px 35px !important;
     height: 35px;
     width: 35px;
     margin: 0 auto;
     border: 0px !important;
 }
 
 .pdf-icon:hover{
 	filter: brightness(70%);
 	transition: background-color 0.5s ease !important;
 }
 
 .termination-icon{
 	 background: url(../resources/img/icon/icon_terminasi.svg) no-repeat !important;
     background-size: 30px 50px !important;
     height: 40px;
     width: 35px;
     margin: 0 auto;
     border: 0px !important;
 }
 
 .termination-icon:hover{
 	filter: brightness(50%);
 	transition: background-color 0.5s ease !important;
 }
 
 
 .view-icon {
     background: url(../resources/img/icon/icon_view.svg) no-repeat !important;
     background-size: 30px 35px !important;
     height: 35px;
     width: 35px;
     margin: 0 auto;
     border: 0px !important;
 }
 
 .view-icon:hover{
 	filter: brightness(80%);
 	transition: background-color 0.5s ease !important;
 }
 
 .remove-icon {
     background: url(../resources/img/icon/icon_remove.svg) no-repeat !important;
     background-size: 30px 35px !important;
     height: 35px;
     width: 35px;
     margin: 0 auto;
     border: 0px !important;
 }
 
 .remove-icon:hover{
 	filter: saturate(400%);
 	transition: background-color 0.5s ease !important;
 }
 
 .edit-icon-admin{
     background: url(../resources/img/icon/icon_edit.svg) no-repeat !important;
     background-size: 30px 50px !important;
     height: 50px;
     width: 35px;
     border: 0px !important;
 }
 
 .edit-icon-admin:hover{
 	filter: brightness(70%);
 	transition: background-color 0.5s ease !important;
 }
 
 .backButton{
 	font-size: 24px;
 	color: #61B5A1 !important;
 }
 
 .backButton:hover{
 	 filter: brightness(70%);
 }
 
 .email-user-icon{
 	 background: url(../resources/img/icon/icon_email_user.svg) no-repeat !important;
     background-size: 110px 100px !important;
     height: 100px;
     width: auto; 
     margin: 0 auto;
 }
 
 .phone-user-icon{
 	 background: url(../resources/img/icon/icon_phone_user.svg) no-repeat !important;
     background-size: 110px 100px !important;
     height: 100px;
     width: auto; 
     margin: 0 auto;
 }
 
 .verified{
	background-color: #DEF0EF; 
	padding: 5px;
 	border-radius: 10px; 
 	color: #61B5A1 !important;
}

.pendingStatus{
	background-color: #FFECC7; 
	padding: 5px;
 	border-radius: 10px; 
 	color: #FAB42E !important;
}

.ditolakStatus{
	background-color: #E4E9EB; 
	padding: 5px;
 	border-radius: 10px; 
 	color: #90A4AE !important;
}

.notVerified {
	background-color: #ff6961; 
	padding: 5px;
 	border-radius: 10px; 
 	color: white !important;
}

.cardLeft-ruler {
	height: 35px;
	width: 1px; 
	opacity: 0.5;
	background-color: grey; 
	margin: -9px 14px -15px;
}

@media screen and (min-width: 500px) {
	.cardLeft-register{
		position: fixed !important; 
		width: 260px; height: 270px; 
		margin-top:50px; margin-left: 25px; 
	}
}

@media screen and (max-width: 500px) {
	.cardLeft-register{
		display: none;
	}
}

@media screen and (max-width: 1000px) {
	.image-login{
		display: none;
	}
}

@media screen and (min-width: 1000px) {
	.image-login{
		z-index: -1; position: absolute; height: auto; width: 42%; margin-left: -50px;
	}
}


@media screen and (min-width: 1000px) {
	.image-login-small{
		display: none;
	}
}