.phx-scroll-wizard-pane{
	width: 100%;
	height: 100%;

	> div{
		float: left;
		height: 100%;
	}

	>.left{
		// background-color: extract(@CLR_1, 8);
		background-color: hsv(0, 0%, 99%);

		width: 20%;
		position: relative;
		border-right: @PAGE_BORDER_THICKNESS solid @CLR_BORDER_COLOR;

		// has left right to be 70%
		& + .right{
			width: 80%;
		}

		> .header{
			text-align: center;
			position: absolute;
			top: 0;
			width: 100%;
			color: extract(@CLR_0, 9);

			> div {
				margin-top: 20pt;
			}

			> .header-image{
				> img {
					width: 50pt;
				}
			}

			> .header-label{
				padding-left: 12%;
				padding-right: 12%;
				text-align: initial;
			}
		}

		> .footer{
			text-align: center;
			position: absolute;
			bottom: 0;
			width: 100%;
			color: extract(@CLR_0, 9);
		}

		> .body{
			overflow-y: auto;
			height: 100%;

			> div {
				width: 100%;
			}

			> .step{
				height: @WIZARD_STEP_HEIGHT;
				line-height: @WIZARD_STEP_LINE_HEIGHT; // as same as height
				text-align: center;
				color: extract(@CLR_0, 9);
        z-index: -1;
				cursor: pointer;

				&.active{
					color: extract(@CLR_BRAND_HUE, 5);
					// background-color: extract(@CLR_1, 9);
				}
			}
		}
	}

	>.right{
		width: 100%;
		overflow-y: scroll;

		&::-webkit-scrollbar-track{
			-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
			background-color: extract(@CLR_1, 9);
		}

		&::-webkit-scrollbar{
			width: @SCROLL_WIDTH_HEIGHT;
			background-color: extract(@CLR_1, 9);
		}

		&::-webkit-scrollbar-thumb{
		border-radius: 10px;
			background-color: extract(@CLR_1, 5);
		}

     	> component-wrapper + *{
  			display: block;
  		}

  		> component-wrapper.active + *{
  			display: block;
  		}

	}
}