//	=================
//    	Imports
//	=================

@import '../base/color_variables';   	// Color Variables
@import '../base/fonticons';   			// Fonticons Variables
@import '../base/urls';   				// URLS Variables
@import '../base/utilities_variables';  // Utilities Variables

.products-cart-top-section {
	.card-section {
		background-color: $white;
		padding: 15px;
	}
	.card-title {
		color: $black;
		font-weight: 600;
	}
	.pc-cards {
		.icon {
			border-bottom: $b-width-3 $solid $light-gray;
		}
		i {
			background-color: $color_3;
			color: $white;
			padding: $p-10;
			border-radius: 50%;
			font-size: $fs-30;
		}
		.ico-customer {
			i {
				background-color: $success;
			}
		}
		.ico-products {
			i {
				background-color: $color_86;
			}
		}
		.ico-in-cart {
			i {
				background-color: $color_58;
			}
		}
		.ico-placing-order {
			i {
				background-color: $additional-color-7;
			}
		}
		h5 {
			color: $additional-color-11;
		}
		h6 {
			font-weight: 600;
			color: $color_325;
		}
		&:hover {
			cursor: pointer;
			.icon.ico-customer {
				border-color: $success;
			}
			.icon.ico-products {
				border-color: $color_86;
			}
			.icon.ico-in-cart {
				border-color: $color_58;
			}
			.icon.ico-placing-order {
				border-color: $additional-color-7;
			}
			h5.txt-pc-customer {
				color: $success;
			}
			h5.txt-pc-products {
				color: $color_86;
			}
			h5.txt-pc-in-cart {
				color: $color_58;
			}
			h5.txt-pc-placing-order {
				color: $additional-color-7;
			}
			h6.numeric-pc-customer {
				color: $success;
			}
			h6.numeric-pc-products {
				color: $color_86;
			}
			h6.numeric-pc-in-cart {
				color: $color_58;
			}
			h6.numeric-pc-placing-order {
				color: $additional-color-7;
			}
		}
	}
}
button.dt-button {
	border: none;
	border-radius: $br-30;
	font-size: 13px;
	margin-right: 12px;
	padding: 6px $p-20;
	color: $white;
	background-color: $additional-color-2;
	background-image: none;
	box-shadow: $shadow-4;
	will-change: opacity, transform;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	&:hover {
		&:not(.disabled) {
			border: none;
			background-image: none;
			background-color: $color_59;
			color: $white !important;
			font-size: 13px;
			margin-right: 12px;
			padding: 6px $p-20;
			box-shadow: $shadow-36;
			will-change: opacity, transform;
			transition: all 0.3s ease-out;
			-webkit-transition: all 0.3s ease-out;
		}
	}
	&:active {
		&:not(.disabled) {
			border: none;
			background-image: none;
			background-color: $color_59;
			color: $white;
			font-size: 13px;
			margin-right: 12px;
			padding: 6px $p-20;
			box-shadow: $shadow-36;
			will-change: opacity, transform;
			transition: all 0.3s ease-out;
			-webkit-transition: all 0.3s ease-out;
			&:hover {
				&:not(.disabled) {
					border: none;
					background-image: none;
					background-color: $color_59;
					color: $white;
					font-size: 13px;
					margin-right: 12px;
					padding: 6px $p-20;
					box-shadow: $shadow-33;
				}
			}
		}
	}
	&:focus {
		&:not(.disabled) {
			border: none;
			background-image: none;
			background-color: $color_59;
			color: $white;
			font-size: 13px;
			margin-right: 12px;
			padding: 6px $p-20;
		}
	}
}
.dataTables_filter {
	input {
		position: relative;
		margin-left: $m-5;
		border-radius: $br-30;
		padding-bottom: $p-5;
		padding-top: $p-5;
		border: $solid $b-width-1 $color_622;
	}
}
table.dataTable.display {
	tbody {
		tr.odd {
			background-color: $white;
			>.sorting_1 {
				background-color: $white;
			}
		}
		tr.even {
			>.sorting_1 {
				background-color: $white;
			}
		}
		tr {
			&:hover {
				>.sorting_1 {
					background-color: $white;
				}
			}
		}
	}
}
table.dataTable {
	tbody {
		tr {
			background-color: $white;
		}
	}
}
.table {
	>thead {
		>tr {
			>th {
				color: $additional-color-2;
			}
		}
	}
	thead {
		th {
			vertical-align: bottom;
			border-bottom: $b-width-1 $solid $color_370;
		}
	}
	>tbody {
		>tr {
			>td {
				padding: 11px 14px;
				font-size: 14px;
			}
		}
	}
}
.dataTables_wrapper.dt-bootstrap4 {
	.table {
		>thead {
			>tr {
				>th {
					&:hover {
						color: $black;
						border-bottom: $solid $b-width-1 $black;
					}
				}
			}
		}
	}
}
.table-bordered {
	td {
		border: $b-width-1 $solid $color_369;
	}
}
td {
	color: $color_2;
}
.table-hover {
	tbody {
		tr {
			&:hover {
				>td {
					color: $additional-color-2;
				}
				>th {
					color: $additional-color-2;
				}
			}
		}
	}
}
#product-in-cart_paginate {
	.pagination {
		>.active {
			>a {
				background-color: $additional-color-2;
				border-color: $additional-color-2;
				color: $white;
				border-radius: $br-4;
				will-change: opacity, transform;
				transition: all 0.3s ease-out;
				-webkit-transition: all 0.3s ease-out;
			}
		}
	}
	ul.pagination {
		li {
			a {
				&:hover {
					&:not(.active) {
						background-color: $color_57;
						color: $white;
						border-radius: $br-4;
						will-change: opacity, transform;
						transition: all 0.3s ease-out;
						-webkit-transition: all 0.3s ease-out;
					}
				}
			}
		}
	}
}
div#product-in-cart_paginate {
	.page-link {
		&:focus {
			box-shadow: none;
		}
	}
}
.customer-name-1 {
	color: $color_56;
	font-weight: 600;
}
.customer-name-2 {
	color: $color_56;
	font-weight: 600;
}
.customer-name-3 {
	color: $color_56;
	font-weight: 600;
}
.customer-name-4 {
	color: $color_56;
	font-weight: 600;
}
.customer-name-5 {
	color: $color_56;
	font-weight: 600;
}
.customer-name-6 {
	color: $color_56;
	font-weight: 600;
}
.customer-name-7 {
	color: $color_56;
	font-weight: 600;
}
.customer-name-8 {
	color: $color_56;
	font-weight: 600;
}
.customer-name-9 {
	color: $color_56;
	font-weight: 600;
}
.customer-name-10 {
	color: $color_56;
	font-weight: 600;
}
.price-1 {
	color: $color_56;
	font-weight: 600;
}
.price-2 {
	color: $color_56;
	font-weight: 600;
}
.price-3 {
	color: $color_56;
	font-weight: 600;
}
.price-4 {
	color: $color_56;
	font-weight: 600;
}
.price-5 {
	color: $color_56;
	font-weight: 600;
}
.price-6 {
	color: $color_56;
	font-weight: 600;
}
.price-7 {
	color: $color_56;
	font-weight: 600;
}
.price-8 {
	color: $color_56;
	font-weight: 600;
}
.price-9 {
	color: $color_56;
	font-weight: 600;
}
.price-10 {
	color: $color_56;
	font-weight: 600;
}