$color_1: #ccc;
$color_2: #428bca;
$color_3: #999;
$color_4: #5bc0de;
$color_5: #5cb85c;
$color_6: #d9534f;
$color_7: #eee;
$background-color_1: #fff;
$background-color_2: #f5f5f5;
$border-top-color_1: #ddd;
$border-bottom-color_1: #ddd;

.ng-wizard-theme-dots {
	.ng-wizard-container {
		min-height: 300px;
	}
	.step-content {
		padding: 10px 0;
		border: none;
		background-color: $background-color_1;
		text-align: left;
	}
	.ng-wizard-toolbar {
		background: #fff;
		border-radius: 0 !important;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 0 !important;
	}
	.ng-wizard-toolbar-top {
		border-bottom-color: $border-bottom-color_1 !important;
	}
	.ng-wizard-toolbar-bottom {
		border-top-color: $border-top-color_1 !important;
		border-bottom-color: $border-bottom-color_1 !important;
	}
	>ul.step-anchor {
		position: relative;
		background: #fff;
		border: 0 solid #ccc !important;
		list-style: none;
		&:before {
			content: " ";
			position: absolute;
			top: 70px;
			bottom: 0;
			width: 100%;
			height: 5px;
			background-color: $background-color_2;
			border-radius: 3px;
			z-order: 0;
			z-index: 95;
		}
		>li {
			border: none;
			>a {
				position: relative;
				text-align: center;
				font-weight: 700;
				background: 0 0;
				border: none;
				color: $color_1;
				text-decoration: none;
				outline-style: none;
				z-index: 96;
				display: block;
				&:before {
					content: ' ';
					position: absolute;
					bottom: 2px;
					left: 40%;
					margin-top: 10px;
					display: block;
					border-radius: 50%;
					color: $color_2;
					background: #f5f5f5;
					border: none;
					width: 30px;
					height: 30px;
					text-decoration: none;
					z-index: 98;
				}
				&:after {
					content: ' ';
					position: relative;
					left: 43%;
					bottom: 2px;
					margin-top: 10px;
					display: block;
					width: 15px;
					height: 15px;
					background: #f5f5f5;
					border-radius: 50%;
					z-index: 99;
				}
				&:hover {
					color: $color_1;
					background: 0 0;
				}
				&:focus {
					color: $color_1;
					border: none;
				}
			}
		}
		>li.clickable {
			>a {
				&:hover {
					color: $color_3;
				}
			}
		}
		>li.active {
			>a {
				color: $color_4;
				&:hover {
					border: none;
				}
				&:after {
					background: #5bc0de;
				}
			}
		}
		>li.done {
			>a {
				color: $color_5;
				&:after {
					background: #5cb85c;
				}
			}
		}
		>li.danger {
			>a {
				color: $color_6;
				&:after {
					background: #d9534f;
				}
			}
		}
		>li.disabled {
			>a {
				color: $color_7 !important;
				&:hover {
					color: $color_7 !important;
				}
				&:after {
					background: #eee;
				}
			}
		}
	}
}
@media screen and (max-width:768px) {
	.ng-wizard-theme-dots {
		>ul.step-anchor {
			&:before {
				top: 0;
				bottom: 0;
				left: 10px;
				width: 5px;
				height: 100%;
				background-color: $background-color_2;
				display: block;
				margin-right: 10px;
			}
			>li {
				margin-left: 20px;
				display: block;
				clear: both;
				>a {
					text-align: left;
					margin-left: 0;
					display: block;
					&:before {
						top: 5px;
						left: -23px;
						margin-right: 10px;
						display: block;
					}
					&:after {
						top: -38px;
						left: -31px;
						margin-right: 10px;
						display: block;
					}
				}
			}
		}
	}
}