﻿.xos-tabs-control_title {
	padding: 0.25rem;
	font-size: 1.5rem;
	text-align: center;
	margin-bottom: 0.25rem;
}

.xos-tabs-control > ul.xos-tabs-control_tabs-strip {
	list-style: none;
	margin-bottom: 0.25em;
	padding: 0;
	margin: 0;
}

	.xos-tabs-control > ul.xos-tabs-control_tabs-strip > li {
		margin: 0 0 -1px 0;
		padding: 0.25em 0.5em;
		display: inline-block;
		cursor: pointer;
	}

.xos-tabs-control_tab-button {
	padding: 0;
	margin: 0;
}

	.xos-tabs-control_tab-button.active {
		border: 1px solid;
		border-bottom: none;
	}

.xos-tabs-control_page-holder {
	border: 1px solid;
	margin: 0;
	padding: 0.5em;
}

.xos-tabs-control_navigation-holder {
	margin: 0.25rem 0;
}

.xos-tabs-control_wizard-progress {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-around;
	list-style: none;
	overflow: hidden;
	margin: 1rem 0;
}

.xos-tabs-control_wizard-progress > li {
	padding: 0;
	margin: 0;
	flex-grow: 1;
	flex-shrink: 1;
	text-align: center;
	position: relative;
}

	.xos-tabs-control_wizard-progress > li::before {
		content: ' ';
		width: 2em;
		height: 2em;
		padding-top: 0.5em;
		margin: 0 auto 0.25em auto;
		border-radius: 50%;
		display: block;
		background-color: #ccc;
		text-align: center;
		vertical-align: middle;
		color: white;
		z-index: 1000;
		transition: background-color linear 0.5s;
	}

	.xos-tabs-control_wizard-progress > li.error::before {
		content: '\f00d';
		background-color: red;
	}

	.xos-tabs-control_wizard-progress > li.active.error::before {
		content: '\f00d';
		background-color: red;
	}

	.xos-tabs-control_wizard-progress > li.complete::before {
		content: '\f00c';
	}

	.xos-tabs-control_wizard-progress > li.complete.error::before {
		content: '\f00d';
		background-color: red;
	}


	.xos-tabs-control_wizard-progress > li::after {
		content: ' ';
		width: 5000%;
		height: 0.5em;
		margin: 0 auto 0.25em auto;
		border-radius: 0;
		background-color: #ccc;
		position: absolute;
		left: calc(-4950% - 1em);
		top: 0.75em;
		z-index: 0;
		transition: background-color linear 0.5s 0.2s;
	}

