/* First screen */
.ngl-boarding {
	padding: 120px 80px;
	font-size: 16px;
	color: rgba( 0, 0, 0, 0.6 );
	text-align: center;
}

.ngl-boarding p {
	font-size: 16px;
	padding: 0;
	color: #666;
	text-align: center;
    max-width: 280px;
    margin: 0 auto 8px auto;
    font-weight: 400;
}

.ngl-boarding-helper {
	font-size: 13px;
	color: rgba( 0, 0, 0, 0.4 );
	margin: 6px 0 0;
}

.ngl-boarding .ngl-btn {
	width: auto;
	min-width: 200px;
	display: inline-block;
}

.ngl-boarding-btn {
	padding: 30px 0 0;
}

.ngl-boarding-btn .ui.primary.button {
	margin: 0;
}

.ngl-boarding-completed .ngl-boarding-btn {
	padding: 0;
	margin: 0;
}

.ngl-boarding-completed {
	padding-bottom: 60px;
}

.ngl-boarding-completed .ngl-boarding-logo {
	margin-bottom: 20px;
}

.ngl-boarding-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 80px;
	font-size: 24px;
}

.ngl-boarding-logo img {
	max-width: 250px;
	display: block;
}

/* Modal elements */
.ngl-boarding-skip {
	position: absolute;
	bottom: 50px;
	left: 0;
	text-align: center;
	width: 100%;
}

.ngl-boarding-skip a {
	color: rgba( 0, 0, 0, 0.4 );
	text-decoration: underline;
	box-shadow: none !important;
	margin: 0 30px;
}

.ngl-boarding-skip a:hover {
	color: rgba( 0, 0, 0, 0.6 );
}

.ngl-boarding-close {
	position: absolute;
	right: 20px;
	top: 20px;
}

.ngl-boarding-close a {
	display: flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: rgba( 0, 0, 0, 0.4 );
	box-shadow: none !important;
}

.ngl-boarding-close a:hover {
	color: rgba( 0, 0, 0, 0.6 );
}

.ngl-boarding-next,
.ngl-boarding-prev {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	cursor: pointer;
	border-radius: 999px;
}

.ngl-boarding-next {
	right: 40px;
	background: #0D566C;
	color: #fff;
}

.ngl-boarding-next:hover {
	background: #0088A0;
}

.ngl-boarding-next.disabled {
	pointer-events: none;
    opacity: 0.5;
}

.ngl-boarding-prev {
	left: 40px;
	background: #eee;
	color: #999;
}

.ngl-boarding-next span,
.ngl-boarding-prev span {
	font-size: 30px;
}

.ngl-boarding-next.ready .ngl-boarding-next-text,
.ngl-boarding-prev.ready .ngl-boarding-prev-text {
	opacity: 1;
	transition: opacity .2s ease-in-out;
}

.ngl-boarding-next-text,
.ngl-boarding-prev-text {
	position: absolute;
	top: 46px;
	left: 7px;
	color: #666;
	font-size: 14px !important;
	opacity: 0;
}

.ngl-boarding-step {
	font-size: 14px;
    margin: 0 0 10px;
	color: rgba( 0, 0, 0, 0.6 );
}

/* Onboarding */
.ngl-boarding.is-hidden {
	display: none;
}

.ngl-boarding.alt {
	padding-top: 60px;
}

.ngl-boarding.alt .ngl-boarding-logo {
	justify-content: center;
	font-size: 16px;
}

.ngl-boarding h3 {
	text-align: center;
	display: block;
	max-width: 240px;
	margin: auto;
	font-size: 20px;
	color: #222;
	font-weight: 700;
	line-height: 1.4;
	padding-bottom: 30px;
}

.ngl-boarding h3 span {
	display: block;
	color: rgba( 0, 0, 0, 0.6 );
	font-size: 13px;
	margin: 8px 0 0 0;
	font-weight: normal;
}

.ngl-boarding .ngl-card {
	margin: auto;
}

.ngl-boarding .ngl-card .ngl-btn {
	width: 100%;
}

.ngl-boarding .ngl-card .ngl-card-view .ngl-btn {
	width: 250px;
}

.ngl-boarding .ui.selection.active.dropdown .menu {
	box-sizing: inherit;
}

.ngl-boarding .ngl-metabox-flex .ui.dropdown {
	font-size: 14px;
}

.ngl-boarding .ngl-metabox-flex {
	text-align: left;
	flex-direction: column;
    justify-content: center;
    width: 300px;
    justify-content: center;
    margin: auto;
}

.ngl-boarding .ngl-process.ngl-ajax.is-hidden {
	display: none;
}

.ngl-boarding .ngl-process.ngl-ajax {
	display: flex;
}

.ngl-boarding .ui.input {
	display: block !important;
}

.ngl-boarding input[type=text] {
	border: 1px solid #e2e2e2 !important;
    box-sizing: inherit;
    min-width: 250px;
    padding: 0.572em 1em;
    line-height: 1;
	border-radius: 8px;
	width: 100%;
	display: block !important;
}

.ngl-boarding input[type=text]:focus {
	border-color: #0088A0 !important;
}

/* Iframe */
.ngl-video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.ngl-video iframe,  
.ngl-video object,  
.ngl-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ngl-video img, 
.ngl-video iframe, 
.ngl-video object, 
.ngl-video embed {
    max-width: 100%;
}

/* License activation step */
.ngl-boarding .ngl-license-wrap {
	margin: auto;
	background: none;
	box-shadow: none;
	text-align: left;
	padding: 40px 0 0;
}

.ngl-boarding .ngl-license-wrap-help,
.ngl-boarding .ngl-license-wrap-title {
	display: none;
}

.ngl-boarding .ngl-license-wrap-flex input {
	box-sizing: border-box !important;
}

.ngl-boarding .ngl-license-wrap-flex input:focus {
	border-color: #bbc4c5 !important;
	border-right: 0 !important;
}

.ngl-boarding .ngl-license-wrap-label {
	font-size: 14px;
	font-weight: 600;
	color: #444;
}

.ngl-boarding .ngl-license-wrap-goto a,
.ngl-boarding .ngl-license-try-again {
	font-size: 13px;
    line-height: 1;
    font-weight: normal;
}

@media screen and (max-height: 800px) {

	.ngl-modal-overlay.onboarding .ngl-modal {
		overflow: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.onboarding .ngl-modal {
		width: 100%;
		height: 100%;
	}

	.ngl-boarding {
		padding: 40px 20px !important;
		width: 100%;
	}

	.ngl-boarding-logo {
		margin-bottom: 20px;
	}

	.ngl-boarding-btn {
		padding: 0;
	}

	.ngl-boarding-skip {
		bottom: 15px;
	}

	.ngl-boarding h3 {
		font-size: 15px;
		padding-bottom: 10px;
	}

	.ngl-boarding-next {
		right: 20px;
	}

	.ngl-boarding-prev {
		left: 20px;
	}

	.ngl-boarding .ngl-metabox-flex {
		padding: 20px 50px 20px 60px;
		justify-content: center;
	}

}

@media screen and (max-width: 800px) {

	.ngl-modal-overlay.onboarding .ngl-modal {
		overflow: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.onboarding .ngl-modal {
		width: 100%;
		height: 100%;
	}

	.ngl-boarding {
		padding: 40px 20px !important;
		width: 100%;
	}

	.ngl-boarding-logo {
		margin-bottom: 20px;
	}

	.ngl-boarding-btn {
		padding: 0;
	}

	.ngl-boarding-skip {
		bottom: 15px;
	}

	.ngl-boarding h3 {
		font-size: 15px;
		padding-bottom: 10px;
	}

	.ngl-boarding-next {
		right: 20px;
	}

	.ngl-boarding-prev {
		left: 20px;
	}

	.ngl-boarding .ngl-metabox-flex {
		padding: 20px 50px 20px 60px;
		justify-content: center;
	}

}