.on-desktop {
	display: block;
}
.on-mobile {
	display: none;
}

@media only screen and (max-width: 560px) {
	.content    { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;}    
  	.row        { margin: 0; padding:0;}    
  	.card       { border-radius: 0; }
  	.mobile-hide  { visibility: hidden; display: none;}
  	.col-mobile-left    { padding-left: 0;}    
  	.col-mobile-right    { padding-right: 0;}    

	.on-desktop {
		display: none;
	}
	.on-mobile {
		display: block;
	}
	
}
.text-strike    {text-decoration: line-through;}
.shake {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.8s;
  
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
  }
  
  @keyframes shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-1px, 0px) rotate(1deg); }
    30% { transform: translate(2px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-2px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}
  
.flips {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: flips 2.5s;
  
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}
  
@keyframes flips {
    0% { transform: scaleX(1); }
    10% { transform: scaleX(0); }
    20% { transform: scaleX(-1); }
    30% { transform: scaleX(0); }
    40% { transform: scaleX(1); }
    50% { transform: scaleX(0); }
    60% { transform: scaleX(-1); }
    70% { transform: scaleX(0); }
    80% { transform: scaleX(1); }
    90% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}
.text-top {
	vertical-align: text-top;
}
.table th, td, .list-icons a {
  	line-height: 1.5em !important;
}
.table_custom_1 tr td,th {
  	padding: 3px 5px 3px 5px !important;
}
.table_custom_2 tr td,th {
	padding: 7px !important;
}

.pull-left  { float: left; }
.pull-right  { float: right; }

.preloader { width: 100%; }

.preloader .text {
	color: #71a6c8;
  	display: inline-block;
  	margin-left: 5px;
}

.preloader .bounceball {
  	position: relative;
  	display: inline-block;
  	height: 37px;
  	width: 15px;
}
.preloader .bounceball:before {
  	position: absolute;
  	content: "";
  	display: block;
  	top: 0;
  	width: 15px;
  	height: 15px;
  	border-radius: 50%;
  	background-color: #71a6c8;
  	transform-origin: 50%;
  	-webkit-animation: bounce 500ms alternate infinite ease;
	animation: bounce 500ms alternate infinite ease;
}

@-webkit-keyframes bounce {
  	0% {
		top: 30px;
		height: 5px;
		border-radius: 60px 60px 20px 20px;
		transform: scaleX(2);
  	}
  	35% {
		height: 15px;
		border-radius: 50%;
		transform: scaleX(1);
  	}
  	100% {
    	top: 0;
  	}
}

@keyframes bounce {
  	0% {
		top: 30px;
		height: 5px;
		border-radius: 60px 60px 20px 20px;
		transform: scaleX(2);
  	}
  	35% {
		height: 15px;
		border-radius: 50%;
		transform: scaleX(1);
  	}
  	100% {
    	top: 0;
  	}
}


.fade-loop {
  animation: fadeInOut 1.7s ease-in-out infinite;
  /* kamu bisa ubah durasi (3s) sesuai kecepatan yang diinginkan */
}

@keyframes fadeInOut {
  0%   { opacity: 0.3; }
  50%  { opacity: 1; }
  100% { opacity: 0.3; }
}

/* Versi lebih lembut dengan delay sedikit (opsional) */
.fade-loop-slow {
  animation: fadeInOut 6s ease-in-out infinite;
}