﻿.container {
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.card-content {
	display: grid;
	width: 80vw;
}

	.card-content .card-grid {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

.card {
	position: relative;
	background: #fff;
	max-width: 351px;
	width: 351px;
	height: auto;
	margin-right: 15px;
	margin-left: 15px;
	margin-bottom: 30px;
	border-radius: 19px;
	overflow: hidden;
	transition:.7s ease;
}

	.card:hover {
		background: #fef4ed;
		border-color: #e86c56;
	}
	.card a {
text-decoration:none;
}

.card-grid {
	display: none;
	margin-top: 30px;
}

.card-image {
	max-height: 200px;
}

	.card-image img {
		max-width: 100%;
		height: auto;
	}

.card-info {
	position: relative;
	color: #222;
	padding: 10px 20px 20px;
}

	.card-info h3 {
		font-size: 1.8em;
		font-weight: 800;
		margin-bottom: 5px;
	}

	.card-info.disabled p {
		color: #0c1b3366 !important;
	}


.pagination {
	text-align: center;
	margin: 0px 30px 60px;
	user-select: none;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

	.pagination li {
		display: inline-block;
		margin: 5px;
	}

		.pagination li a {
			color: #fff;
			text-decoration: none;
			font-size: 1.2em;
			line-height: 32px;
		}

.pagination-item-count {
	/*margin-top: -93px;*/
	font-size: 14px;
	color: #96a1b8;
}

.previous-page, .next-page {
	background: #0AB1CE;
	width: 80px;
	border-radius: 45px;
	cursor: pointer;
	transition: 0.3s ease;
}

	.previous-page:hover {
		transform: translateX(-5px);
	}

	.next-page:hover {
		transform: translateX(5px);
	}

.page-item {
	height: 32px;
	width: 32px;
	border-radius: 8px;
}

	.page-item .page-link {
		font-size: 14px;
		color: #6c7485;
		padding: 0;
		height: 32px;
		width: 32px;
		align-content: center;
		border-radius: 8px;
	}


	.page-item.next-page {
		display: none;
	}

	.page-item.previous-page {
		display: none;
	}

	.page-item.active .page-link {
		background-color: #353c8b;
		color: #ffffff;
		border-color: #353c8b;
		border-radius: 8px;
	}

.current-page, .dots {
	width: 45px;
	border-radius: 50%;
	cursor: pointer;
}

/*	.active {
																	background: #0AB1CE;
																}*/

.disable {
	background: #ccc;
}

.card-info {
}

	.card-info p {
		margin-bottom: 0 !important;
		color: #6c7485;
		font-size: 11px;
	}

		.card-info p.city_state {
			font-size: 13px;
			font-weight: normal;
			color: #6c7485;
			text-transform:capitalize;
		}

		.card-info p.city_state .state {
			text-transform:uppercase;
		}

		.card-info p.supplier-name {
			font-size: 14px;
			color: #0c1b33;
			font-weight: bold;
		}

.card.pending {
	background-color: #fef4ed;
	border-color: #f3f4ed;
}

	.card.pending .block-grid-button:hover {
		/*position: absolute;*/
		display: block;
		background-color: #fef4ed;
	}

	.card.pending .block-grid-button {
		background-color: #fef4ed;
	}

/* ******** SQUARE FOR FULL SCREEN IDENTITY DROP DOWN MENU ******** */
.square {
	position: absolute;
	top: -6px;
	left: 8em;
	width: 12px;
	height: 12px;
	border-top: 1px solid rgba(0,0,0,.15);
	border-left: 1px solid rgba(0,0,0,.15);
	background-color: #fff;
	transform: rotate(45deg);
}

.card.disabled .card-info.mt-auto .supplier-name, .card.disabled .card-info.mt-auto .city_state {
	color: #0c1b3366 !important;
}

.card.disabled .dropdown button.block-grid-button .fa-ellipsis {
	color: #0c1b3366 !important;
}

.status-badge {
	margin-top: 20px;
}

.disable-menu {
	margin-top: 15px !important;
}

.card-info {
	margin-top: 42px;
}

.sort-bar .form-select:hover, .sort-bar .form-select:focus {
	box-shadow: none;
}

.alphabet-bar button {
	height: 24px;
	width: 24px;
	border: 1px solid #dadef0;
	font-size: 13px;
	text-align: center;
	color: #6c7485;
	padding: 0px;
}

.search-bar {
	/*margin-left: 15em !important;*/
}

/*.search-input-group {
	margin-left: 170px;
}*/

.search-input {
	height: 50px;
	border-bottom-right-radius: 5px !important;
	border-top-right-radius: 5px !important;
}


.ms-n5 {
	margin-left: -40px;
	margin-top: 1px;
	padding-bottom: 11px;
	padding-top: 10px;
	border: none;
}

.dashboard-container {
	margin-left: 0;
	margin-top: 0;
}

.card-grid-page-container {
	padding-right: 0;
	padding-left: 0;
	margin-right: 0;
	justify-content: start;
	align-items: start;
	max-width: 77vw;
	margin-left: 1.5em;
}

	.card-grid-page-container .cardgidpg-title-row {
		margin-top: 2em;
	}

.supplier-sort {
	width: auto;
	border: none;
	font-size: 18px;
	font-weight: bold;
	color: #353c8b;
	text-decoration: underline;
}

.OrderBy {
	width: auto;
	border: none;
	font-size: 18px;
	font-weight: bold;
	color: #353c8b;
	text-decoration: underline;
}

.disabled-badge-text {
	font-size: 11px;
	color: #96a1b8;
}

	.disabled-badge-text span {
		background-color: #f2f3fd;
		padding: 2px;
		border-radius: 5px;
	}

.pending-badge-text {
	font-size: 11px;
	color: #ffffff;
}

	.pending-badge-text span {
		background-color: #e86c56;
		padding: 2px;
		border-radius: 5px;
	}

.enabled-badge {
	color: #119771;
	margin-bottom:1em;
}

.add-admingridpage-btn {
	background-color: #353c8b;
	border-radius: 36px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	align-items: center;
	width: 210px;
	height: 52px;
	display: flex;
	justify-content: center;
}

	.add-admingridpage-btn:focus {
		background-color: #353c8b;
		border-radius: 36px;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		width: 210px;
		height: 52px;
	}

	.add-admingridpage-btn:hover {
		background-color: #353c8b;
		border-radius: 36px;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		width: 210px;
		height: 52px;
	}

@media screen and (max-width: 1900px) {

	.card-grid-page-container {
		max-width: 77vw;
	}
}

@media screen and (max-width: 1750px) {

	.card-grid-page-container {
		max-width: 75vw;
	}
}

@media screen and (max-width: 1720px) {

	.card-grid-page-container {
		max-width: 74vw;
	}
}

@media screen and (max-width: 1590px) {

	.card-grid-page-container {
		max-width: 72vw;
	}
	.search-input::placeholder{
		font-size:12px;
	}
}

@media screen and (max-width: 1510px) {

.card-grid{
width:70vw;
}
}

@media screen and (max-width: 1440px) {

	.card-grid-page-container {
		max-width: 70vw;
	}
}

@media screen and (max-width: 1350px) {

	.card-grid-page-container {
		max-width: 68vw;
	}
	.search-input::placeholder {
		font-size: 11px;
	}


	.inner-container .card-grid-page-container {
		max-width: 100% !important; /* Takes care of size wonkiness in layout.*/
	}

}

@media screen and (max-width: 1270px) {

	.card-grid-page-container {
		max-width: 66vw;
	}
}

@media screen and (max-width: 1206px) {

	.card-grid-page-container {
		max-width: 64vw;
	}
}

@media screen and (max-width: 1140px) {

	.card-grid-page-container {
		max-width: 62vw;
	}

	.card-grid {
		width: 67vw;
		margin-left:auto;
	}
}

@media screen and (max-width: 1070px) {

	.card-grid-page-container {
		max-width: 60vw;
	}
}

@media screen and (max-width: 990px) {
	.card-grid-page-container {
		max-width: 100vw;
	}
	.search-sort-bar.grid .form-inline.row{
		justify-content:left;
	/*	margin-bottom:2em;*/
	}
	.sort-bar{
	/*	width:100%;	 */
		justify-content:left;
		margin: 1em 0;
		
	}
	.product-preview-card-container .search-bar {
		width: 60%;
	}



	.search-input {
		padding: 0.35em;
	}

	.search-input::placeholder {
		font-size: 11px;
	}
}

@media screen and (max-width:770px){
	/*.add-admingridpage-btn{
	margin-top:2em;
	} */
}



@media screen and (max-width:640px) {
	.search-bar, .sort-bar {
		width: 100%;
	}

	.sort-bar span, .sort-bar select {
		font-size: 14px;
	}
}