
.htk-assistant-bar {
	position: relative;
	padding: .8em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;

	& > button {
		border-radius: 50%;
		padding: .5em;
		margin: 0;
		text-align: center;

		& > img {
			display: block;
			width: 1.8em;
			padding: .5em;
		}
	}
	& > .end {
		display: none;
		color: #8cc63f;

		& > .icon {
			font-size: 1.6rem;
		}
	}
	& > .steps {
		display: flex;
		align-items: center;

		& > div {
			background-color: #AAA;
			width: .5em;
			height: .5em;
			cursor: pointer;
			border-radius: 50%;
			margin: .5em;
		
			transition-property: width, height;
			transition-duration: 100ms;
			transition-timing-function: ease-in-out;

			&.selected {
				background-color: #666;
				width: 1em;
				height: 1em;
			}
			&:hover {
				opacity: .7;
			}
		}
		& > img {
			width: 1.3em;
			margin: 0 .2em;
			cursor: pointer;

			&:hover {
				opacity: .7;
			}
		}
	}
}
