.card {
  /* Add shadows to create the "card" effect */
  /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
  transition: 0.3s;
  width: auto; 
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 0px 2px 0 rgba(0,0,0,0.5);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 2px;
}

.card {
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px; /* 5px rounded corners */
  /*height: 100%;*/
  width: auto;
  padding: 5pt 5px;
  margin: 10px 15px 10px auto;
}

/* Add rounded corners to the top left and the top right corner of the image */
.imagecard {
  border-radius: 5px 5px 0 0;
  max-height: 300px;
  background-image: url(/assets/image-not-found.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.card {
	text-align:center;
	width:100%;
	border-top: 1px solid #eee;
	overflow:auto;
	text-align: left;
	}

.skeleton-produk-container {
  display: flex;
  width: 100%;
  padding-right: 24px;
}