.ob-migration {
	padding-top: 20px;
	margin-bottom: 20px;

	.card.starter-site-card {
		margin-right: auto !important;
		margin-left: auto !important;

		.image {
			height: auto;
		}
	}

	.actions {
		margin: 30px auto 0;
		display: flex;
		justify-content: center;
	}

	button:last-child {
		margin-left: 10px;
	}
}

.ob-head > .header-container >, .ob-migration > {
	h2 {
		font-size: 21px;
		color: $black;
		margin: 0;
		line-height: 1.6;
		display: flex;
		align-items: center;

		> img {
			margin-right: 20px;
		}
	}

	p {
		margin: 20px 0;
		font-size: 15px;
		color: $black;
	}

	button {
		margin-bottom: 20px;
	}
}

.header-form {
	margin-top: 20px;
	display: flex;
	align-items: center;
	flex-direction: column;

	input {
		margin: 0;
		display: block;
		flex-grow: 1;
		border: 1px solid $grey;
		height: 52px;
		padding: 5px 30px 5px 50px;
		font-size: 17px;
		font-weight: 300;
	}
}

@mixin ob-header--tablet {
	.ob-head > .header-container >, .ob-migration > {
		h2 {
			font-size: 30px;
		}

		p {
			font-size: 22px;
		}
	}
	.header-form {
		flex-direction: row;
	}
}

@mixin ob-header--laptop {
	.header-form {
		margin-top: 25px;
	}
}


.is-sync {
	background-color: #f1f1f1;
	color: #0073aa !important;
	border-radius: 6px;

	&:before {
		padding: 10px 5px 10px 15px;
		content: attr(data-content);
		margin-right: 5px;
		font-size: 15px;
		display: none;
	}

	&:hover:before {
		display: block;
	}
}