/* Mobile */
.mobile-packages {
	margin: 1rem 0;
	display: none;

	@include mobile {
		display: block;
	}
}
.mobile-packages .pck-tab-title {
	font-size: 22px;
	font-weight: 700;
	color: $mainTextColor;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mobile-packages .ui.secondary.pointing.menu .active.item {
	border-bottom-width: 5px;
}
.mobile-packages .pck-name {
	font-weight: 700;
	font-size: 18px;
	padding: 10px 0;
}
.mobile-packages .pck-name::first-letter {
	text-transform: uppercase;
}
.mobile-packages .pck-include .pck-include-title {
	font-weight: 700;
	font-size: 16px;
	padding: 30px 0 0;

	@include small-mobile {
		font-weight: 600;
	}
}
.mobile-packages .pck-include ul.pck-include-list {
	list-style: none;
	padding: 0;
	margin: 5px 0 0;
}
.mobile-packages .pck-include ul.pck-include-list li,
.subscr-features-list {
	padding: 5px 0;
}
.mobile-packages .pck-include ul.pck-include-list li .checkmark.icon {
	color: $greenColor;
}
.mobile-packages .packages-mobile {
	overflow: auto;
	margin-top: 0;
}
.mobile-packages .packages-tabs.menu {
	margin-bottom: 0;
}
.mobile-packages .packages-tabs .item {
	width: 33.333%;
	padding: 10px 0 !important;
	border-bottom-width: 5px !important;
	text-align: center
}
.mobile-packages .pck-mobile-select-package {
	margin: 0;
}
.mobile-packages .pck-price {
	font-weight: 600;
	padding-bottom: 10px;
	font-size: 20px;
}

/* PC */
.pc-packages {
	margin: 30px 0;
	display: block;
	color: $mainTextColor;

	@include mobile {
		display: none;
	}
}
.pc-packages table.packages-table {
	table-layout: fixed;
	width: 100%;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	line-height: 1.2;

	thead {
		th {
			font-size: 18px;
			color: $headlinesColor;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			background: $grayBackground;
			padding: 20px 10px;

			@include medium-desktop {
				font-size: 16px;
			}

			&:nth-child(2) {
				border-top-left-radius: 6px;
				border-left: 1px solid $borderColor;
			}

			&:last-child {
				border-top-right-radius: 6px;
			}

			&:first-child {
				background: $whiteColor;
				padding: 20px 0;
				font-size: 24px;
				color: $headlinesColor;
				font-weight: 600;
				text-transform: none;
				text-align: left;
				letter-spacing: normal;

				@include medium-desktop {
					font-size: 20px;
				}
			}

			&:not(:first-child) {
				text-align: center;
				border-top: 1px solid $borderColor;
				border-right: 1px solid $borderColor;
				border-bottom: 1px solid $borderColor;
			}
		}
	}
}
.pc-packages table.packages-table {
	td {
		vertical-align: top;
		word-wrap: break-word;
		background: $grayBackground;
		border: 1px solid $borderColor;
		padding: 20px 20px;

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

		&:first-child {
			font-size: 18px;
			font-weight: 600;
			color: $mainTextColor;
			background: $grayBackground5;

			@include medium-desktop {
				font-size: 16px;
			}
		}

		&:not(:first-child) {
			text-align: center;
			font-size: 13px;
		}
	}

	tr {
		&:first-child {
			td {
				&:first-child {
					border-top-left-radius: 6px;
				}
			}
		}

		&:last-child {
			td {
				&:first-child {
					border-bottom-left-radius: 6px;
				}
				&:last-child {
					border-bottom-right-radius: 6px;
				}
			}
		}
	}
}
.pc-packages .pck-name {
	text-transform: uppercase;
	font-weight: 600;
	color: $mainTextColor;
}
.pc-packages td.pck-center {
	text-align: center;
	vertical-align: middle;
}
.pc-packages table.packages-table th.active,
.pc-packages table.packages-table td.active {
	background: $whiteColor;
}
.pc-packages .sn-custom-fields .checkmark.icon {
	color: $greenColor;
}
.pc-packages .sn-custom-fields .remove.icon {
	color: $redColor;
}
.pc-packages .pck-center.pck-pc-select-package .text-button:hover,
.pc-packages .pck-center.pck-pc-select-package.active .text-button {
	background-color: $grayBackground3 !important;
	color: $mainTextColor !important;
}
.pc-packages .ui.definition.table tr td:first-child:not(.ignored),
.ui.definition.table tr td.definition,
.packages .ui.definition.table tr td:first-child:not(.ignored),
.ui.definition.table tr td.definition {
	font-weight: 600;
}

/* Sidebar */
.packages-sidebar {
	display: block;

	@include mobile {
		display: none;
	}
}
.packages-sidebar .pck-price-sidebar {
	font-weight: 600;
}
.packages-sidebar .pck-sidebar-title {
	font-size: 1.571rem;
}
.packages-sidebar .mt-5 {
	margin-top: -5px !important;
}
.packages-sidebar .bold {
	font-weight: 600;
}
.packages-sidebar .pck-sidebar-name {
	padding-top: 15px;
	font-size: 1.142rem;
	font-weight: 700;
}
.packages-sidebar .pck-sidebar-fields i.checkmark.icon {
	color: $greenColor;
}
.packages-sidebar .pck-sidebar-fields {
	padding-top: 10px;
}
.packages-sidebar .pck-sidebar-fields p {
	margin: 5px 0 0 0;
}
.packages-sidebar .pck-sidebar-dropdown-select-package {
	margin: 15px 0;

	.icon {
		color: $whiteColor;
	}
}
.packages-sidebar .pck-sidebar-compare-packages {
	text-align: center;
	display: block;
	margin: 0 0 10px;
	color: $secondaryColor;
	font-weight: 600;
}

.packages-sidebar.no-border .pck-sidebar-compare-packages {
	margin: 15px 0;
	color: $secondaryColor;
}

.job-packages-wrapper {
	margin-bottom: 20px;
}

.packages-sidebar {
	padding: 0px 20px;

	.inline-content {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;

		> div {
			font-size: 15px;
			font-weight: 600;
			color: $headlinesColor3;

			@include medium-desktop {
				font-size: 13px;
			}

			.icon {
				font-size: 18px;

				@include medium-desktop {
					font-size: 16px;
				}
			}
		}
	}

	.pck-sidebar-title {
		display: flex;
		align-items: center;

		.pck-price-sidebar {
			font-size: 18px;
			font-weight: 700;
			color: $secondaryColor;
		}

		.pck-title-sidebar {
			font-size: 18px;
			font-weight: 400;
			color: $headlinesColor3;
			margin-left: 10px;
		}

		.right-icon {
			margin-left: auto;
		}
	}
}

.packages-sidebar:not(.no-border) {
	@include default-shape;

	border: 1px solid $borderColor;
	margin-bottom: 15px;
	padding: 5px 15px;
}

.ui.accordion.packages-sidebar .title:not(:first-child) {
	border-top: 1px solid $borderColor;
}

/* Responsive */
@media only screen and (max-width:479px) {
	.mobile-packages .pck-tab-title {
		font-size: 18px;
	}

	.packages .pck-repeater input.pck-inp-custom-name {
		width: 92%;
	}
}

@media only screen and (min-width:768px) {
	.packages .ui.table tr td {
		word-wrap: break-word;
		max-width: 165px;
	}

	.packages .ui.table tr th:first-child,
	.packages .ui.table tr td:first-child {
		max-width: 135px;
	}
}

@media only screen and (max-width:767px) {
	.packages .pck-repeater input.pck-inp-custom-name {
		width: 95%;
	}
	.packages .pck-repeater .pck-center {
		text-align: initial;
	}
}