/* Table */
.wpj-dashboard-table-wrapper {
	padding: 1em;
	position: relative;

	.wpj-dashboard-table-search {
		position: absolute;
		right: 0;
		top: -51px;

		@include tablet {
			position: relative;
			top: initial;
			right: initial;
			margin-left: -1em;
			margin-right: -1em;
			margin-top: -1em;
			margin-bottom: 2.5em;
		}

		.ui.input {
			width: 100%;
			height: 31px;
			float: right;

			@include medium-desktop {
				width: 60%;
			}

			@include big-tablet {
				width: 100%;
			}

			@include breakpoint-down(lg) {
				width: 60%;
			}

			@include tablet {
				width: 100%;
				height: 40px;
				float: initial;
			}

			input {
				border: 1px solid #e8ebf6;

				@include tablet {
					border-radius: 6px;
				}
			}
		}
	}

	.wpj-dashboard-table {
		@include default-shape();

		border: 1px solid $borderColor;
		box-shadow: none;
		color: $mainTextColor;

		&.list-wrapper ul {
			padding: 0;
			margin: 0;
			list-style: none;

			li {
				display: inline-block;
			}
		}

		.wpj-dashboard-table-header {
			border-bottom: 3px solid $mainColor;

			&.row {
				padding: 0;

				.column {
					padding: 15px 10px;

					@include small-desktop {
						padding: 10px 10px;
					}

					@include tablet {
						padding: 10px 15px;
					}
				}
			}

			.table-label {
				font-size: 15px;
				font-weight: 600;
				color: $headlinesColor3;
				line-height: 1;
			}
		}

		.row:not(.wpj-dashboard-table-header) {
			.item-content:nth-child(even) {
				background: $grayBackground4;
			}
		}

		&.ui.grid.wpj-grid-table > .row + .row > .grid + .grid {
			border: 0;
		}

		&.ui.grid.wpj-grid-table > .row + .row {
			border: 0;
		}

		.service-avatar {
			img {
				border: 2px solid $whiteColor;

				@include tablet {
					max-width: 40px;
				}
			}
		}

		.df.flex-thumb-text > div + div {
			@include tablet {
				padding-left: 10px;
			}
		}

		.service-avatar-wrapper {
			margin-right: 10px;
			flex-shrink: 0;

			@include medium-desktop {
				margin-right: 5px;
			}
		}

		.service-title,
		.service-title > a {
			font-size: 17px;
			font-weight: 600;
			margin-bottom: 3px;
			color: $secondaryColor;
			letter-spacing: normal;
			line-height: 130%;
			text-transform: none;
			word-break: break-word;

			@include small-desktop {
				font-size: 15px;
			}
		}

		.service-action-buttons {
			display: inline-flex;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: -5px;

			> * {
				margin-right: 5px;
				margin-bottom: 5px;
			}
		}

		.service-price {
			font-size: 14px;
			color: $headlinesColor3;

			.small-job {
				text-transform: none;
				font-size: 14px;
				color: $mainTextColor;
				letter-spacing: normal;
				font-weight: 400;
			}
		}

		.under-review-warning {
			position: relative;
			font-style: italic;
			color: #cccdce;
			font-size: 13px;
			display: block;
		}

		.ui.grid {
			> .column {
				padding: 15px 10px;

				@include small-desktop {
					padding: 10px 10px;
				}

				@include tablet {
					padding: 10px 15px;
				}
			}
		}
	}
}

/* Responsive */
@media only screen and (max-width:767px) {
	.wpj-grid-table {
		.ui.stackable.grid > .column + .column {
			padding-top: 0 !important;
		}
		.ui.grid.item-content {
			text-align: center;
			.df { display: block !important; }
			.oe-status-btn { width: 60%; margin: 0 auto; }
			.bookmark-icon-smaller { margin: 0 auto; }
			.y-center-x-left { align-items: center; flex-direction: row; }
		}
	}
}

@media only screen and (max-width:497px) {
	.wpj-grid-table {
		.ui.grid.item-content {
			text-align: left;
			.df { display: flex !important; }
			.oe-status-btn { width: 100%; }
			.y-center-x-left { align-items: start; flex-direction: column; }
		}
		.table-label { float: left; }
		.table-value {
			float: right;
			&.first-row { float: left; }
		}
	}
}