.admin_page_vp-woo-pont-walkthrough {
	#wpcontent {
		background: linear-gradient(180deg, #fff 50%, #f0f7ff 100%);
		padding: 0 24px;
		min-height: 100vh;
	}
}

.about__container {
	.vp-woo-pont-walkthrough {

		&-header {
			padding: 2rem;
			background: url(../images/bg-walkthrough.png) no-repeat center;
			background-size: cover;
			color: #fff;
			min-height: 15rem;
			display: flex;
			flex-direction: column;
			margin: 0 0 2rem 0;

			h1,
			h2 {
				font-weight: 400;
				color: #fff;
			}

			h1 {
				font-size: 3rem;
				line-height: 1;
				margin: 0 0 .5rem 0;
			}

			h2 {
				font-size: 2rem;
				line-height: 1.15;
			}

			p {
				margin: 0;
				margin-top: auto;
				max-width: 20rem;
			}
		}

		&-steps {
			padding: 0 2rem;
			margin: 0 0 2rem 0;

			h3 {
				max-width: 40rem;
			}

			p.description {
				max-width: 50rem;

				strong {
					color: #000;
				}
			}
		}

		&-nav {
			display: flex;
			align-items: center;
			padding: 0 2rem;

			&-next.button-primary,
			&-previous.button-hero {
				font-size: 1.2em !important;
				display: flex !important;
				align-items: center;
				padding: 0 1rem 0 2rem !important;

				span.dashicons {
					margin-left: 1rem;
					line-height: 1 !important;
				}
			}

			&-previous.button-hero {
				padding: 0 2rem 0 1rem !important;
				margin-right: 1rem !important;

				span.dashicons {
					margin-right: 1rem;
					margin-left: 0;
					line-height: 1 !important;
				}
			}

			&-cancel {
				margin-left: 2rem;
				font-size: 1.2em;
				display: none;
			}
		}

		&-step-field {
			margin: 0 0 1rem 0;

			input {
				padding: 10px;
				width: 100%;
				max-width: 30rem;
			}
		}

		&-step-design {
			&-color {
				margin-top: 2rem !important;
			}

			.wp-picker-open+.wp-picker-input-wrap {
				display: flex;
			}
		}

		&-step-cost {
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0 0 1rem;

				li {
					list-style-type: none;
					margin: 0 0 1rem;
					padding: 0;
					display: flex;
					align-items: center;

					label {
						display: flex;
						align-items: center;
						width: 15rem;

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

					small {
						margin-left: 10px;
					}
				}
			}
		}

		&-step-providers {
			ul {
				display: flex;
				flex-wrap: wrap;
				margin: 0 !important;
				padding: 0;
				list-style-type: none;
				max-width: 40rem;

				li {
					margin: 0 10px 10px 0;
					padding: 0;
					list-style-type: none;

					input[type="checkbox"] {
						display: none;
					}

					input[type="checkbox"]:checked + label:after {
						display: block;
					}

					input[type="checkbox"]:checked + label:before {
						background: rgba(35, 113, 177, 1);
					}

					input[type="checkbox"]:checked + label {
						background: rgba(35, 113, 177, 0.1);
						box-shadow: none;
					}

					label {
						display: block;
						margin: 0;
						padding: 7px 10px 7px 36px;
						line-height: 1;
						box-shadow: inset 0px 0px 0px 1px rgba(35, 113, 177, 0.2);
						border-radius: 4px;
						position: relative;
						cursor: pointer;
						width: auto;
						display: flex;
						align-items: center;

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

						&:before {
							width: 16px;
							height: 16px;
							border-radius: 3px;
							box-shadow: inset 0px 0px 0px 2px rgba(35, 113, 177, 1);;
							left: 10px;
							top: 50%;
							margin-top: -8px;
							position: absolute;
							display: block;
							content: '';
							box-sizing: border-box;
						}

						&:after {
							display: none;
							left: 15px;
							top: 50%;
							margin-top: -6px;
							position: absolute;
							width: 5px;
							height: 10px;
							border: 2px solid #fff;
							border-top: 0;
							border-left: 0;
							transform: rotate(45deg);
							content: '';
							box-sizing: border-box;
						}

						strong {
							padding: 5px 0;
						}
					}
				}
			}

			.step-packeta {
				padding: 2rem 0 0 0;
				display: none;
			}

			.step-dpd {
				padding: 2rem 0 0 0;
				display: none;

				input:first-child {
					margin-bottom: 1em;
				}
			}

			.step-expressone {
				padding: 2rem 0 0 0;
				display: none;

				input:first-child {
					margin-bottom: 1em;
				}
			}
		}

		&-step-zone {
			ul {
				display: flex;
				flex-wrap: wrap;
				margin: 0 !important;
				padding: 0;
				list-style-type: none;
				max-width: 40rem;

				li {
					margin: 0 10px 10px 0;
					list-style-type: none;
					padding: 0;

					input[type="checkbox"] {
						display: none;
					}

					input[type="checkbox"]:checked + label:after {
						display: block;
					}

					input[type="checkbox"]:checked + label:before {
						background: rgba(35, 113, 177, 1);
					}

					input[type="checkbox"]:checked + label {
						background: rgba(35, 113, 177, 0.1);
						box-shadow: none;
					}

					label {
						display: block;
						margin: 0;
						padding: 7px 10px 7px 36px;
						line-height: 1;
						box-shadow: inset 0px 0px 0px 1px rgba(35, 113, 177, 0.2);
						border-radius: 4px;
						position: relative;
						cursor: pointer;
						width: auto;
						display: flex;
						flex-direction: column;

						&:before {
							width: 16px;
							height: 16px;
							border-radius: 3px;
							box-shadow: inset 0px 0px 0px 2px rgba(35, 113, 177, 1);;
							left: 10px;
							top: 50%;
							margin-top: -8px;
							position: absolute;
							display: block;
							content: '';
							box-sizing: border-box;
						}

						&:after {
							display: none;
							left: 15px;
							top: 50%;
							margin-top: -6px;
							position: absolute;
							width: 5px;
							height: 10px;
							border: 2px solid #fff;
							border-top: 0;
							border-left: 0;
							transform: rotate(45deg);
							content: '';
							box-sizing: border-box;
						}

						strong {
							padding: 5px 0;
						}
					}
				}
			}
		}

		&-step-pro {
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0 0 0 0;

				li {
					list-style-type: none;
					margin: 0 0 1rem 0;
					padding: 0 0 0 2rem;
					position: relative;

					&:after {
						display: block;
						left: 5px;
						top: 50%;
						margin-top: -10px;
						position: absolute;
						width: 8px;
						height: 16px;
						border: 3px solid #49B654;
						border-top: 0;
						border-left: 0;
						transform: rotate(45deg);
						content: '';
						box-sizing: border-box;
					}

				}
			}

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

				a {
					height: 40px;
					display: flex;
					align-items: center;
					padding: 0 12px 0 8px;
					background: #46B450;
					border-radius: 3px;
					margin: 0 12px 0 0;
					color: #fff;
					text-decoration: none;
					font-size: 14px;
					font-weight: 600;

					&:hover,
					&:active {
						background: #46B450;
						color: #fff;
					}

					.dashicons {
						font-size: 24px;
						width: 24px;
						height: 24px;
						margin: 0 8px 0 0;
					}
				}

				span small {
					font-size: 13px;
					display: block;
					color: rgba(34,34,34,0.5);
				}

				span strong {
					font-weight: bold;
					color: #46B450;
					display: block;
					font-size: 16px;
				}
			}
		}

		&-step-kvikk {
			h3 {
				width: 100%;
				height: 48px;
				background: url(../images/logo-kvikk.svg) no-repeat left top;
				background-size: contain;
				font-size: 0;
			}

			ul {
				list-style-type: none;
				margin: 0;
				padding: 0 0 0 0;

				li {
					list-style-type: none;
					margin: 0 0 1rem 0;
					padding: 0 0 0 2rem;
					position: relative;

					&:after {
						display: block;
						left: 5px;
						top: 50%;
						margin-top: -10px;
						position: absolute;
						width: 8px;
						height: 16px;
						border: 3px solid #35C287;
						border-top: 0;
						border-left: 0;
						transform: rotate(45deg);
						content: '';
						box-sizing: border-box;
					}

				}
			}

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

				a {
					height: 40px;
					display: flex;
					align-items: center;
					padding: 0 12px 0 8px;
					background: #35C287;
					border-radius: 3px;
					margin: 0 12px 0 0;
					color: #fff;
					text-decoration: none;
					font-size: 14px;
					font-weight: 600;

					&:hover,
					&:active {
						background: #35C287;
						color: #fff;
					}

					.dashicons {
						font-size: 24px;
						width: 24px;
						height: 24px;
						margin: 0 0 0 8px;
					}

					&.button-alt {
						color: #35C287;
						background: #EAF8F2;
						box-shadow: inset 0px 0px 0px 1px #35C287;

					}
				}

				span small {
					font-size: 13px;
					display: block;
					color: rgba(34,34,34,0.5);
				}

				span strong {
					font-weight: bold;
					color: #35C287;
					display: block;
					font-size: 16px;
				}
			}
		}

		&-step-success {
			h3:before {
				display: block;
				width: 30px;
				height: 60px;
				border: 8px solid #2371B1;
				border-top: 0;
				border-left: 0;
				transform: rotate(45deg);
				content: '';
				box-sizing: border-box;
				margin: 0 0 2rem 2rem;
			}
		}

		&-step {
			display: none;

			&.active {
				display: block;
			}
		}
	}

	&.vp-woo-pont-walkthrough .fail {
		animation: vp_woo_pont_walkthrough_shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
		transform: translate3d(0, 0, 0);
		backface-visibility: hidden;
		perspective: 1000px;
	}
}

.vp-woo-pont-walkthrough[data-step="first"] .vp-woo-pont-walkthrough-nav-previous {
	display: none !important;
}

.vp-woo-pont-walkthrough[data-step="first"] .vp-woo-pont-walkthrough-nav-cancel {
	display: block !important;
}

.vp-woo-pont-walkthrough[data-step="last"] .vp-woo-pont-walkthrough-nav {
	display: none !important;
}

@keyframes vp_woo_pont_walkthrough_shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}