//Generate metabox
#vp_woo_pont_metabox,
#vp_woo_pont_metabox_tracking {
	.inside {
	  padding: 0;
	  margin: 0 !important;
	}
}

#vp_woo_pont_metabox_tracking .inside ul.order_notes li {
	padding: 0 10px;

	.note_content {
		transition: all ease 1s;
	}
}

#vp_woo_pont_metabox_tracking .add_note {
	padding: 10px;
}

//Invoice order metabox
.vp-woo-pont-metabox {
	&-unsupported {
		padding: 0 10px;
	}

	&-no-shipping {
		padding: 0 10px 10px 10px;
	}

	&-settings {
	  display: flex;
	  padding: 15px 10px;
	  text-decoration: none;
	  align-items: center;
	  color: inherit;

		&:hover {
			text-decoration: none;
			color: inherit;
		}

		span.dashicons {
			color: #FF6767;
		}
	}

	&-disabled {
		padding: 15px 10px;
		display: none;

		&.show {
			display: block;
		}

		p {
			margin: 0;

			&:first-child {
				margin: 0 0 10px 0;
			}
		}
	}

	&-rows {
		margin: 0;
		padding: 0;

		&-label {

			&-download {
				display: flex;
				flex-direction: column;

				> span {
					font-weight: 600;
				}

				> span,
				> small {
					margin-bottom: 5px;
				}

				a {
					text-decoration: none;
					display: flex;
					align-items: center;

					strong {
						text-decoration: underline;
						font-weight: normal;
						margin-left: 3px;
					}
				}
			}

			&-print {
				margin-left: auto;

				a {
					width: 42px;
					height: 30px;
					background: rgba(35,113,177,0.10);
					border: 1px solid #2371B1;
					border-radius: 2px;
					display: flex;
					align-items: center;
					justify-content: center;
					text-decoration: none;
					color: #2371B1;
				}

				&[data-format="A4-L"] {
					display: flex;
					flex-wrap: wrap;
					width: 92px;
					height: 65px;
					display: grid;
					gap: 5px;

					&[data-layout="grid"] {
						&[data-sections="4"] {
							grid-template-columns: 1fr 1fr;
						}

						&[data-sections="2"] {
							grid-template-columns: 1fr 1fr;
						}
					}
				}

				&[data-format="A4"] {
					display: flex;
					flex-wrap: wrap;
					width: 65px;
					height: 100px;
					display: grid;
					gap: 5px;

					&.multiple_parcels {
						width: 44px;
						height: 32px;
					}

					&.multiple_parcels {
						div {
							display: none;

							&:first-child {
								display: block;
							}
						}
					}

					&[data-layout="grid"] {
						grid-template-columns: 1fr 1fr;
					}

					&[data-sections="16"] {
						width: 88px;
						height: 125px;
					}
				}

				div {
					border: 1px dashed #979797;
					border-radius: 2px;
					background: #fff;
					position: relative;
					cursor: pointer;

					&:before {
						content: "\f193";
						font-family: dashicons;
						font-size: 20px;
						width: 20px;
						height: 20px;
						line-height: 20px;
						text-align: center;
						position: absolute;
						left: 50%;
						top: 50%;
						margin: -10px;
						opacity: 0;
						transition: all ease 0.2s;
						color: #979797;
					}

					&:hover {
						&:before {
							opacity: 1;
						}
					}

					&.selected {
						background: rgba(35,113,177,0.10);
						border: 1px solid #2371B1;

						&:before {
							opacity: 1;
							color: #2371B1;
						}
					}
				}

			}
		}

		&-data {
			display: none;
			padding: 14px 10px;
			border-bottom: 1px solid #eee;
			margin: 0;

			&-inside {
				align-items: center;
				justify-content: space-between;
				display: flex;
				flex-wrap: wrap;
			}

			&-provider {

				strong {
					margin-right: auto;
				}

				span {
					text-align: right;
				}

				i {
					width: 24px;
					height: 24px;
					background-position: center;
					background-size: 100% auto;
					background-repeat: no-repeat;
					margin-right: 10px;
				}

			}

			&-home-delivery-providers {
				padding: 0;

				&-info {
					padding: 0 10px;
					display: none;

					&.show {
						display: block;
					}
				}

				ul {
					padding: 0;
					margin: 0;

					li {
						margin: 0;
						padding: 0;
						border-bottom: 1px solid #eee;
						position: relative;

						input {
							position: absolute;
							left: 10px;
							top: 20px;
							margin: 0;
						}

						.shipping-cost {
							padding: 0 10px 10px 10px;
						}


						label {
							display: block;
							font-weight: bold;
							padding: 14px 10px 14px 36px;
							display: flex;
							align-items: center;

							i {
								width: 24px;
								height: 24px;
								background-position: center;
								background-size: 100% auto;
								background-repeat: no-repeat;
								margin-right: 10px;
								display: block;
							}

							&:hover {
								background: rgba(0,0,0,0.02);
							}
						}
					}
				}
			}

			&-remove {
				a {
					color: var(--wc-red);
				}
			}

			&.show {
				display: block;
			}

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

			&-weight {
				position: relative;

				input {
					width: 128px;
				}

				em {
					height: 30px;
					position: absolute;
					right: 18px;
					top: 50%;
					margin-top: -15px;
					line-height: 30px;
					opacity: 0.5;
					font-style: normal;
					transition: all ease 0.3s;
					display: block;
				}

				&.saved {
					em:after {
						opacity: 1;
					}
				}
			}
		}
	}

	&-generate {
		display: none;

		&.show {
			display: block;
		}

		&-buttons {
			padding: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			a:first-child {
				display: flex;
				font-weight: 600;
				align-items: center;
				text-decoration: none;
				outline: none;

				&:focus {
					box-shadow: none;
				}

				span.dashicons {
					color: #CCD0D4;
					font-weight: normal;
					margin-right: 5px;
					transition: all ease 0.5s;
				}

				&.active span.dashicons {
					transform: rotate(45deg);
					color: #0073AA;
				}
			}

			a.button {
				margin-left: auto;
			}
		}

		&-options {
			margin: 0;
			padding: 10px 10px 0;
			border-top: 1px solid #eee;

			li {
				margin: 0 0 20px 0;
				position: relative;

				li {
					margin: 0 0 10px 0;
				}

				label {
					display: block;
					margin: 0 0 5px 0;
					color: #555D66;
					white-space: nowrap;
				}

				em {
					height: 30px;
					position: absolute;
					right: 8px;
					bottom: 0px;
					line-height: 30px;
					opacity: 0.5;
					font-style: normal;
				}

				textarea, input[type="number"], input[type="text"], select {
					width: 100%;
					margin: 0;
				}

				select {
					min-height: 30px;
					max-width: none;
				}

				&.vp-woo-pont-package-weight {
					em {
						display: block;
					}

					em:after {
						position: absolute;
						left: 0;
						top: 1px;
						right: 0;
						bottom: 1px;
						background-color: #fff;
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cpath fill='%232271b1' d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z'/%3E%3C/g%3E%3C/svg%3E");
						background-position: center right;
						background-repeat: no-repeat;
						opacity: 0;
						transition: all ease 0.3s;
						display: block;
						content: '';
					}

					&.saved {
						em {
							opacity: 1;

							&:after {
								opacity: 1;
							}
						}
					}
				}

				&.vp-woo-pont-package-size {
					ul {
						border: 1px solid #8c8f94;
						border-radius: 4px;
						display: flex;
						flex-direction: column;
	
						li {
							display: flex;
							align-items: center;
							border-bottom: 1px solid #8c8f94;
							margin: 0;

							input {
								margin: 0;
								position: absolute;
								left: 10px;
								top: 50%;
								transform: translateY(-50%);
							}

							label {
								padding: 10px 10px 10px 36px;
								width: 100%;
								margin: 0;
								display: flex;
								align-items: center;
								justify-content: space-between;
							}

							&:last-child {
								border: none;
							}
						}
					}

					.vp-woo-pont-package-size-custom {
						display: flex;
						align-items: center;
						gap: 10px;
						padding-top: 10px;
				
						label {
							display: block;
							margin: 0 0 5px 0;
						}
				
						input[type="text"] {
							width: 100%;
						}
					}
				}
			}

			&-type label {
				margin: 0 0 5px 0;
			}

			&-group ul {
				display: flex;

				li {
					margin: 0;
				}

				li:first-child {
					flex: 1;
				}

				li:last-child {
					padding-left: 20px;
				}

				input[type="number"]::-webkit-outer-spin-button,
				input[type="number"]::-webkit-inner-spin-button {
						-webkit-appearance: none;
						margin: 0;
				}
				input[type="number"] {
						-moz-appearance: textfield;
				}
			}
		}
	}

	&-messages {
		background: #cfede3;
		padding: 0 2px 0 10px;
		color: rgba(0,0,0,0.7);

		&-error {
			background: #eccccc;
		}

		&-content {
			display: flex;
		}

		a {
			width: 32px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			margin-left: 10px;
			color: #aa0000;
			color: rgba(0,0,0,0.5);
			flex-grow: 0;
			flex-shrink: 0;
			outline: 0;

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

		ul {
			margin: 0;
			padding: 15px 0;
			width: 100%;

			li {
				margin: 0;
				padding: 0;
				overflow-wrap: break-word;
			}
		}
	}

	&-pro-cta {
		margin: 20px;
		background: url(../images/hero-pro.svg) no-repeat center top;
		background-size: contain;
		padding-top: 170px;
		text-align: center;
	
		&-buttons {
			display: flex;
			flex-direction: column;
			align-items: center;
	
			a.button {
				display: flex;
				align-items: center;
				font-weight: 500;
				margin: 0 0 10px 0;
	
				.dashicons {
					margin-right: 10px;
				}
			}
	
			strong {
				font-weight: normal;
				color: #666666;
				padding-top: 10px;
				display: block;
					
				span {
					font-weight: bold;
					color: var(--wp-admin-theme-color);
				}
			}
		}
	
	}
}

.vp-woo-pont-modal-replace {

	.wc-backbone-modal-main {
		padding-bottom: 0;
	}

	article {
		padding: 0 !important
	}

	&-map {
		height: 300px;

		&-selected {
			display: flex;
			align-items: center;
			padding: 0 15px 10px 15px;

			div {
				display: flex;
				flex-direction: column;
				padding: 5px 10px 5px 10px;
				border: 1px solid #CCD0D4;
				position: relative;
				cursor: pointer;
				border-radius: 4px;
				width: 100%;

				&:after {
					position: absolute;
					right: 15px;
					top: 50%;
					transform: translateY(-50%);
					content: "\f12a";
					font-family: 'dashicons';
					font-size: 24px;
					line-height: 24px;
					opacity: 0;
					transition: all ease 0.2s;
					color: #2271b1
				}

				&:hover {
					background: #f0f6fc;

					&:after {
						opacity: 1;
					}
				}
			}
		}
	}

	&-providers {
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		padding: 0 15px 5px 15px;

		li {
			label {
				display: flex;
				align-items: center;
				padding: 5px 10px 5px 10px;
				border-radius: 4px;

				i {
					width: 24px;
					height: 24px;
					background-size: contain;
					margin: 0 10px;
				}

				input {
					margin: 0;
				}
			}

			&.selected label {
				background: #f0f6fc;
			}
		}
	}

	&-results {
		border-top: 1px solid #CCD0D4;
		margin: 0;
	}

	&-options {

		&-search {
			padding: 15px;
			position: relative;

			input[type="text"] {
				width: 100%;
				padding: 10px 10px 10px 44px;
				margin: 0;
			}

			.dashicons {
				position: absolute;
				left: 30px;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		ul {
			margin: 0;
			min-height: 300px;
		}

		> ul > li {
			display: none;
			margin: 0;

			&.selected {
				display: block;
			}

			ul {
				height: 300px;
				overflow: auto;

				li {
					padding: 5px 15px;
					margin: 0;
					border-bottom: 1px solid #CCD0D4;
					cursor: pointer;
					position: relative;

					strong {
						display: block;
					}

					&:after {
						position: absolute;
						right: 15px;
						top: 50%;
						transform: translateY(-50%);
						content: "\f12a";
						font-family: 'dashicons';
						font-size: 24px;
						line-height: 24px;
						opacity: 0;
						transition: all ease 0.2s;
						color: #2271b1
					}

					&:hover {
						background: #f0f6fc;

						&:after {
							opacity: 1;
						}
					}

					&:last-child {
						border: none;
					}
				}
			}
		}
	}

	.autocomplete-field {
		width: 100%;
		margin: 0;
	}

	.autocomplete {
		&-list {
			background: #fff;
			border-radius: 4px;
			border: 1px solid #CCD0D4;
			margin: 10px 0 0 0;
			max-height: 200px;
			overflow: auto;

			li {
				list-style-type: none;
				display: block;
				padding: 8px 20px;
				margin: 0;
			}

			li.autocomplete-item {
				cursor: pointer;

				&:hover {
					background: rgba(0,0,0,0.1);
				}
			}
		}
	}

	.vp-woo-pont-marker {
		div {
			width: 100%;
			height: 100%;
			position: relative;
			background: url(../images/marker-pin-bg.svg) no-repeat center;
		}

		&.selected div:before,
		&-selected div:before {
			position: absolute;
			width: 36px;
			height: 36px;
			content: '';
			background: rgba(#2471B1, 0.3);
			left: 6px;
			top: 6px;
			border-radius: 4px;
			display: block;
		}

		&-selected {
			filter: grayscale(1);
		}

		i {
			position: absolute;
			width: 32px;
			height: 32px;
			left: 8px;
			top: 8px;
			background-position: center;
			background-size: 100% auto;
			background-repeat: no-repeat;
		}

		&.selected div {
			animation: vp_woo_pont_bounce_anim 2s infinite
		}

	}

	.marker-cluster.marker-cluster-small {
		background-color: #49B654;
	}

	.marker-cluster.marker-cluster-medium {
		background-color: #F7CB1E;
	}

	.marker-cluster.marker-cluster-large {
		background-color: #E86100;
	}

}

@keyframes vp_woo_pont_blink {
	0% {
		opacity: .2;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: .2;
	}
}


.vp-woo-pont-modal-layout-selector {
	article {
		background: #f5f5f5;
		text-align: center;
	}

	&-paper {
		position: relative;
		width: 210px;
		height: 297px;
		background: #fff;
		box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
		margin: 0 auto;

		&.A4-L {
			width: 297px;
			height: 210px;
		}

		div {
			position: absolute;
			cursor: pointer;

			&:before {
				position: absolute;
				left: 3px;
				top: 3px;
				right: 3px;
				bottom: 3px;
				border: 1px dashed #dbdbdb;
				content: '';
				display: block;
				border-radius: 2px;

				&:hover {
					background: rgba(35,113,177,0.10);
				}
			}

			&.selected {
				&:before {
					background: rgba(35,113,177,0.10);
					border: 1px solid #2371B1;
				}
			}
		}
	}
}

.vp-woo-pont-transsped-packaging {

	> label {
		display: flex !important;
		align-items: center;
	}

	> label i {
		background: #C7DBEB;
		border-radius: 12px;
		color: #2371B1;
		padding: 3px 3px;
		text-align: center;
		min-width: 24px;
		font-style: normal;
		margin-left: 5px;
	}

	ul li {
		display: flex;
		margin: 0 0 5px 0;
		padding: 0;
		border-radius: 4px;
		border: 1px solid #8c8f94;
		padding: 0 0 0 8px;
		align-items: center;

		&.active {
			background: #E7EFF6;
			color: #2371B1;
		}

		label {
			margin: 0;
		}

		input {
			display: none;
		}

		.qty {
			margin-left: auto;
			display: flex;
			align-items: center;

			span.value {
				font-weight: bold;
				min-width: 20px;
				text-align: center;
			}
			
			a {
				text-decoration: none;
				padding: 10px;
				outline: none;
				cursor: pointer;

				&:focus,
				&:active {
					box-shadow: none;
					color: #2371B1;
				}
			}

			.dashicons-plus {
				line-height: 22px;
			}
		}
	}
}

#vp_woo_pont_metabox_kvikk {
	.inside {
		padding: 0;
		margin: 0 !important;
	}

	h2.hndle {
		color: rgba(0,0,0,0);
		background: url(../images/logo-kvikk.svg) no-repeat 10px center;
		background-size: auto 24px;
	}

	li:last-child {
		border: none;
	}
}

.vp-woo-pont-kvikk-parcel {
	display: flex;
	flex-direction: column;
	gap: 5px;

	&-main-fields {
		display: flex;
		gap: 5px;
	}

	&-unit {
		position: relative;

		span {
			height: 30px;
			position: absolute;
			right: 10px;
			top: 50%;
			margin-top: -15px;
			line-height: 30px;
			opacity: 0.5;
			font-style: normal;
			transition: all ease 0.3s;
			display: block;
		}
	}

	&-package-size {
		display: flex;
		gap: 5px;
	}

	&-packaging-types {
		display: flex;
		flex-direction: column;
		border: 1px solid #8c8f94;
		border-radius: 4px;

		li {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #8c8f94;
			margin: 0 !important;
			padding: 0;

			input {
				margin: 0;
				position: absolute;
				left: 10px;
				top: 50%;
				transform: translateY(-50%);
			}

			label {
				padding: 10px 10px 10px 36px;
				width: 100%;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			&:last-child {
				border: none;
			}
		}
	}

	&-boxes-btn {
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		text-decoration: none;
		flex-grow: 0;
		flex-shrink: 0;
		border: 1px solid #2271b1;
		background: #f6f7f7;
		border-radius: 3px;
	}

}