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

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

	>.left{
		background-color: extract(@CLR_1, 8);
		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%;

			> .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;

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

	>.right{
		width: 100%;
    height: 100%;

    >.scrollpage{
      height: 100%;
      position: relative;
      touch-action: none;
      transition: all 1000ms ease;
      transform: translate3d(0px, 0px, 0px);
    }
	}
}