/***********************************************************************************************/
/* BUTTONS */
/***********************************************************************************************/

.button {
	display: inline-block;
	font-weight: 400;
	color: #333;
	line-height: 1.5;
	text-align: center;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 0.375rem 0.75rem;
	border-radius: 0.25rem;
}

.button_green {
	background-color: #62aa62;
	color: #fff;
	border-width: 1px;
	border-top-color: #7fc07f;
	border-left-color: #7fc07f;
	border-right-color: #589958;
	border-bottom-color: #589958;
}

	.button_green:hover {
		background-color: #589958;
	}

/***********************************************************************************************/
/* DIVIDER */
/***********************************************************************************************/

.divider {
	margin: 1rem 0;
	text-align: center;
	background-image: linear-gradient(180deg,transparent 10px,#ccc 0,#ccc 11px,transparent 0);
}

	.divider span {
		background-color: #fff;
		padding: 0 1rem;
	}

/***********************************************************************************************/
/* LOADER */
/***********************************************************************************************/

.loader {
	display: none;
	position: fixed;
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.7);
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.loader .spinner:before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 70px;
	margin-top: -35px;
	margin-left: -35px;
	border-radius: 50%;
	border: 10px solid #ccc;
	border-top-color: #4a9c44;
	animation: spin 1s linear infinite;
}

/***********************************************************************************************/
/* PRODUCT GALLERY */
/***********************************************************************************************/

.product-gallery {
	border: solid 0px yellow;
}

	.product-gallery .product-list {
		border: solid 0px blue;
		margin: 0 0 1.5rem 0;
		padding: 0;
		display: grid;
		grid-gap: 1rem;
	}

		.product-gallery .product-list .item {
			border: solid 0px blue;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background-color: #fff;
			list-style: none;
			padding: 1rem;
			border-bottom: solid 1px #dfdfdf;
			box-shadow: 0 0.25rem 0.5625rem -0.0625rem rgba(0,0,0,0.03),0 0.275rem 1.25rem -0.0625rem rgba(0,0,0,0.05);
		}

			.product-gallery .product-list .item .image {
				display: block;
				height: 150px;
				margin: 0 auto;
				margin-bottom: 1rem;
			}

			.product-gallery .product-list .item .title {
				font-size: 1rem;
				margin-bottom: 0.2rem;
			}

			.product-gallery .product-list .item .subtitle {
				margin-bottom: 1rem;
			}

			.product-gallery .product-list .item .price {
				margin-bottom: 1rem;
			}

			.product-gallery .product-list .item .buy-button {
			}

				.product-gallery .product-list .item .buy-button a {
					display: block;
					width: 100%;
					line-height: 2.5em;
					text-align: center;
					background-color: #62aa62;
					color: #fff;
					margin-bottom: 0.2rem;
					border-radius: 0.3rem;
				}

			.product-gallery .product-list .item .details-button a {
				display: block;
				width: 100%;
				line-height: 2.5em;
				text-align: center;
				color: #333;
			}


@media only screen and (min-width: 576px) {

	.product-gallery .product-list {
		grid-template-columns: repeat(3, 1fr);
	}

		.product-gallery .product-list .item {
			width: auto;
		}

			.product-gallery .product-list .item .image {
			}
}


/***********************************************************************************************/
/* ASPNET CLASSES */
/***********************************************************************************************/

.input-validation-error {
	background-color: #fbf1f1;
	border-color: #C00;
}

.field-validation-error {
	color: #C00;
}

/***********************************************************************************************/
/* MVC PAGINATION */
/***********************************************************************************************/

.mvc-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 1rem 0;
	padding: 0;
	text-align: center;
	border: solid 0px blue;
}

	.mvc-pagination span, .mvc-pagination a {
		width: 2rem;
		line-height: 2rem;
		text-align: center;
		margin: 0 0.2rem;
		margin-bottom: 0.5rem;
		border: 0;
		border-radius: 0.3rem;
		background-color: #ccc;
	}

	.mvc-pagination a {
		background-color: #62aa62;
		color: #fff;
	}

		.mvc-pagination a:hover {
			background-color: #589958;
		}

		.mvc-pagination a.current {
		}