.lity, .lity-container {
	transition: opacity .5s ease;
}

.lity-active, .lity-active body {
	overflow: initial;
}

#wpbody-content .notice,
#wpbody-content .update-nag {
	display: none !important;
}

.simpay-plugin-page {
	.notice {
		display: none !important;
	}
	.loader {
		margin: 0 auto;
		position: relative;
		text-indent: -9999em;
		border-top: 4px solid #969696;
		border-right: 4px solid #969696;
		border-bottom: 4px solid #969696;
		border-left: 4px solid #404040;
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-animation: load8 1.1s infinite linear;
		animation: load8 1.1s infinite linear;
		background-color: transparent;

		&, &:after {
			display: block;
			border-radius: 50%;
			width: 50px;
			height: 50px;
		}
	}
}

@-webkit-keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

#simpay-plugin-page-smtp {

	width: 700px;
	margin: 0 auto;

	*, *::before, *::after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	section {
		margin: 50px 0;
		text-align: left;
		clear: both;
	}

	p {
		font-size: 15px;
	}

	.top {
		text-align: center;

		img {
			margin-bottom: 38px;
		}
		h1 {
			font-size: 26px;
			font-weight: 600;
			margin-bottom: 0;
			padding: 0;
		}
		p {
			font-size: 17px;
			color: #777777;
			margin-top: .5em;
		}

		.updated {
			display: none;
		}
	}

	.screenshot {
		& > * {
			vertical-align: middle;
		}
		.cont {
			display: inline-block;
			position: relative;
			width: 315px;
			padding: 5px;
			background-color: #ffffff;
			-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.05);
			-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.05);
			box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.05);
			border-radius: 3px;
			img {
				max-width: 100%;
				display: block;
			}
			.hover {
				position: absolute;
				opacity: 0;
				height: 100%;
				width: 100%;
				top: 0;
				left: 0;
				border: 5px solid #ffffff;
				background-color: rgba(0,0,0,0.15);
				background-image: url('../../images/smtp/zoom.svg');
				background-repeat: no-repeat;
				background-position: center;
				background-size: 50px;
				transition: all 0.3s;
			}
			&:hover .hover {
				opacity: 1;
				transition: all 0.3s;
			}
		}
		ul {
			display: inline-block;
			margin: 0 0 0 30px;
			list-style-type: none;
			max-width: calc(100% - 350px);
		}
		li {
			margin: 16px 0;
			padding: 0 0 0 24px;
			font-size: 15px;
			background-image: url('../../images/smtp/arrow-right.svg');
			background-position: left 3px;
			background-repeat: no-repeat;
			background-size: 14px;
			color: #777777;
		}
	}

	.step {
		background-color: #F9F9F9;
		-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.05);
		-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.05);
		box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.05);
		border: 1px solid #E5E5E5;
		margin: 0 0 25px 0;

		& > * {
			vertical-align: middle;
		}
		.num {
			display: inline-block;
			position: relative;
			width: 100px;
			height: 50px;
			text-align: center;
		}
		.loader {
			margin-top: -54px;
			transition: all .3s;
			opacity: 1;
		}
		div {
			display: inline-block;
			width: calc(100% - 104px);
			background-color: #ffffff;
			padding: 30px;
			border-left: 1px solid #eeeeee;
		}
		h2 {
			font-size: 24px;
			line-height: 22px;
			margin-top: 0;
			margin-bottom: 15px;
		}
		p {
			font-size: 16px;
			color: #777777;
		}
		.error {
			font-size: 14px;
			color: #b97474;
			margin-bottom: 0;
		}
		.link {
			text-decoration: none;
		}
		.button {
			font-weight: 500;
			box-shadow: none;
			padding: 12px;
			min-width: 200px;
			height: auto;
			line-height: 13px;
			text-align: center;
			font-size: 15px;
			transition: all .3s;

			&.grey {
				background: #F6F6F6;
				border: 1px solid #dddddd;
				text-shadow: none;
				color: #9FA5AA;
			}

			&.disabled {
				cursor: default;
			}
		}
		.hidden {
			opacity: 0;
			transition: all .3s;
		}
	}

	.grey {
		opacity: 0.5;
	}
}

@media (max-width: 767px) {

	#simpay-admin-smtp {

		width: auto;
		margin: 0 20px;

		.screenshot {
			.cont {
				width: auto;
			}

			ul {
				margin: 20px 0 0 15px;
				max-width: 100%;
			}
		}

		.button {
			white-space: normal;
		}
	}
}