password-manager-mirror/frontend/delta/scss/style/registrationPage.scss

#registrationPage {
	background-color: $main-alternate-color;
	color: $main-alternate-text-color;

	.registrationForm {
		@include flexbox;
		@include flex-direction(column);
		@include align-items(stretch);

		height: 100%;
		
		text-align: center;
		background-color: $main-alternate-color;

		header {
			@include flex(1);
			@include icon-font();

			font-size: 48pt;
			line-height: 90pt;
			color: white;
//			color: $main-color;
		}

		div.form {
			@include flex(4);

			form {
				background: $main-alternate-text-color;

				padding: 20px;
				margin-bottom: 50px;
				max-width: 400px;

				margin-left: auto;
				margin-right: auto;

				.steps {
					text-align: center;
					margin-left: auto;
					margin-right: auto;
					width: 400px;

					.step {
						display: none;

						&.center {
							display: block;
						}

						h1 {
							color: $solarize-Accent-Blue;
							font-size: 24pt;
							font-weight: 700;
							margin: 0px;
							padding-top: 15px;
						}
						p {
							color: $solarize-Content-50;
							font-size: 14pt;
							font-weight: 100;
							margin: 0px;
							padding: 5px 0px;
						}

						label {
							display: none;
						}

						input {
							font-family: "clipperz-font";
							display: block;
							padding: 5px;
		//					margin-top: 5px;
							margin-bottom: 10px;
							font-size: 100%;
							font-size: 24pt;
							width: 100%;
						}

						&.TERMS_OF_SERVICE {
							.checkboxBlock {
//								margin-top: 10px;
//								margin-bottom: 10px;
//								clear: both;

								input {
									display: block;
									float: left;
//									margin: 5px;
									margin-top: 10px;
									width: 30px;
								}

								p {
									font-size: 12pt;
									font-weight: 500;
									display: block;
									text-align: left;
									margin-left: 50px;
									line-height: 1.5em;

									a {
										color: $solarize-Accent-Red;
									}
								}
							}
							
							.stepIndex {
								margin-top: 10px;
							}
						}
				
						.stepBody {
							min-height: 140px;
						}

						.stepIndex {
							
							text-align: center;
							.stepIndexItem {
								font-weight: 900;
								font-size: 28pt;
								display: inline;
								color: lightgrey;

								&.center {
									color: gray;
								}
							}
						}	

						.buttons {
							text-align: center;
							margin-top: 10px;

							.button {
								margin: 10px;
								text-align: center;
								vertical-align: middle;
								display: inline-block;
								width: 80px;

								font-weight: 900;
								line-height: 45px;
								font-size: 24px;

								&.back {
									background-color: lightgrey;

									&.step_-1 {
										visibility: hidden;
									}
								}

								&.disabled {
									background-color: #c0c0c0;
									cursor: default;
								}
								
								&.enabled {
									background-color: $main-color;
								}
							}
						}
					}
				}




			}
		}

		footer {
			@include flex(1);

//			color: $main-alternate-text-color;
			color: $main-text-color;
			background-color: $main-color;
			cursor: pointer;
			font-size: 24pt;

			&:before {
				content: "< ";
			};

			a {
				line-height: 50pt;
			}
		}
	}
}