.vp-shipping-rate-settings {
	&-pricing {
		border-radius: 4px;
		border: 1px solid #8c8f94;
		background: #fff;
		margin: 0 0 10px 0;
		max-width: 750px;

		&-add {
			padding: 0 0 5px 0;

			a.button {
				display: flex;
				align-items: center;
				text-decoration: none;
				outline: none;
				padding: 0 10px 0 6px;
				margin: 0 0 10px 0;
				float: left;

				.dashicons {
					line-height: 1 !important;
				}

				&:focus {
					outline: none;
					box-shadow: none;
				}

				span:first-child {
					margin-right: 6px;
				}
			}

			p.description {
				max-width: 750px;
				clear: both;
			}
		
		}

		&-comment {
			padding: 0;

			.comment-display {
				display: block;
				cursor: pointer;
				padding: 10px 20px;
				color: #666;
				border-bottom: 1px solid #CCD0D4;

				&:empty {
					display: none;
				}
			}

			input.comment-field {
				display: none;
				width: 100% !important;
				max-width: 100%;
			}

			&.editing {
				padding: 10px 20px;
				border-bottom: 1px solid #CCD0D4;

				input.comment-field {
					display: block;
				}

				.comment-display {
					display: none;
				}
			}
		}

		&-title {
			display: flex;
			align-items: center;
			padding: 20px 20px;
			border-bottom: 1px solid #CCD0D4;
			background: #fafafa;
			border-radius: 5px 5px 0 0;

			.cost-field {
				display: flex;
				margin-right: 10px;

				small {
					background: rgba(0,0,0,0.1);
					padding: 8px 12px;
					border-radius: 0 5px 5px 0;
					font-size: 14px;
					border: 1px solid #8c8f94;
					margin-left: -1px;
				}

				input {
					width: auto !important;
					border-radius: 5px 0 0 5px;
				}
			}

			> .edit-comment {
				color: #666;
				text-decoration: none;
				line-height: 1;
				margin-right: auto;

				&:hover {
					color: #2271b1;
				}
			}

			span.text {
				margin: 0 10px;
			}

			.weight-toggle {
				margin-right: 10px;
			}

			.actions {
				display: flex;
				align-items: center;
				gap: 10px;

				a {
					text-decoration: none;
				}

				a.delete-pricing {
					color: #a00;
				}
			}

		}

		&-weight {
			border-bottom: 1px solid #CCD0D4;
			padding: 20px 20px 12px 20px;

			select, input {
				width: auto !important;
				line-height: 24px !important;
				min-height: 0px !important;
				width: 100% !important;
				margin: 0 !important;
			}

			.cost-field {
				display: flex;

				small {
					background: rgba(0,0,0,0.1);
					padding: 0px 6px;
					line-height: 24px;
					border-radius: 0 5px 5px 0;
					font-size: 14px;
					border: 1px solid #8c8f94;
					margin-left: -1px;
				}

				input {
					width: 100% !important;
					border-radius: 5px 0 0 5px;
				}
			}

			table {
				border-collapse: collapse;
				border-spacing: 0;

				td, th {
					padding: 0 8px 8px 0;
					margin: 0;
				}

				thead th {
					font-weight: normal;
					color: #666;
					padding-top: 0 !important;
				}

				tbody {

					td {
						a {
							width: 27px;
							height: 26px;
							display: flex;
							align-items: center;
							justify-content: center;
							text-align: center;
							line-height: 27px;
							text-decoration: none;
							color: #CCCCCC;
						}
					}

					td:last-child {
						div {
							display: flex;
						}
					}

					tr:first-child td a.delete-weight-row {
						visibility: hidden;
					}
					
				}

			}
		}

		&-if {
			padding: 20px 20px 12px 20px;

			&-header {
				display: flex;
				align-items: center;
				color: #666666;
				padding-bottom: 8px;

				select {
					margin: 0 10px !important;
					width: auto !important;
					line-height: 24px !important;
					min-height: 0px !important;
				}
			}

			.add-condition {
				display: flex;
				align-items: center;
				gap: 6px;
				text-decoration: none;
				outline: none;

				&:focus {
					outline: none;
					box-shadow: none;
				}
			}

			&-options {
				margin: 0;
				padding: 0 0 0 0;
				list-style-type: none;

				select, input {
					width: auto !important;
					line-height: 24px !important;
					min-height: 0px !important;
				}

				li {
					display: flex;
					align-items: center;
					margin: 0 0 8px 0;

					select, input[type="text"] {
						margin-right: 8px !important;

						&.value {
							display: none;

							&.selected {
								display: block;
							}
						}
					}

					a {
						width: 27px;
						height: 27px;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;
						line-height: 27px;
						text-decoration: none;
						color: #CCCCCC;
					}

				}
			}
		}

		&-option {
			margin-right: 20px;
			margin-bottom: 20px;
			position: relative;

			small {
				position: absolute;
				line-height: 34px;
				bottom: 0;
				padding-right: 10px;
				right: 0;
			}

			input[type=text], select {
				width: 100% !important;
			}

			input[type=text] {
				padding: 2px 8px !important;
			}

			input[type="checkbox"] {
				margin-top: 9px;
			}

			label {
				margin: 0 0 5px 0;
				display: block;
			}

		}
	}

}