.card{
	border: 2px solid orange;
	border-radius:15px;
	padding: 8px;
	margin-right:15px;
	margin-bottom:8px;
	width: 23%;
}
.card-image{
	width:100%;
	height:100%;
}
.name{
	white-space: nowrap; 
	width: 100%; 
	overflow: hidden;
	text-overflow: ellipsis; 
}
.badge{
	background-color:#BC604C;
}
.quantity{
	border:1px solid;
	width:100%;
}


@media only screen and (max-device-width: 700px) {
	.card{
		border: 2px solid orange;
		border-radius:15px;
		padding: 8px;
		margin-bottom:10px;
		margin-right:15px;
		width: 100%;
	}
	.card-image{
		width:100%;
		height:100%;
	}
	.name{
		white-space: nowrap; 
		width: 100%; 
		overflow: hidden;
		text-overflow: ellipsis; 
	}
	.badge{
		background-color:#BC604C;
	}
	.quantity{
		border:1px solid;
		width:100%;
	}
}


@media only screen and (max-device-width: 1200px) {
	.card{
		border: 2px solid orange;
		border-radius:15px;
		padding: 8px;
		margin-bottom:10px;
		margin-right:15px;
		width: 100%;
	}
	.card-image{
		width:100%;
		height:100%;
	}
	.name{
		white-space: nowrap; 
		width: 100%; 
		overflow: hidden;
		text-overflow: ellipsis; 
	}
	.badge{
		background-color:#BC604C;
	}
	.quantity{
		border:1px solid;
		width:100%;
	}
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
   background-color: #BC604C;
  color: white;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-bottom:5px;
 
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #BC604C;
}


.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}