
@import "../../../variables.less";
@import "../../../mixins.less";

body {
    background: url("@{images-path}/platform/portlets/extensions/login_texture.jpg") repeat;
    font-family: @baseFontFamily;
    font-size: @baseFontSize;
    color: @textColor;
    overflow: auto;
    height: auto;
}

a {
    color: @linkColor;
}

.backLight {
    .border-radius(80px);
    .box-shadow(0 0 200px @baseBackground);
    .square(280px);
    margin: 140px auto 0;
}

.uiWelcomeBox {
	background-color: @baseBackground;
	.box-shadow(0 1px 3px #3d3d3d);
	margin: -380px auto 0;
	width: 512px;
	.border-radius(8px); 
    border: 1px solid @baseColorDark;
	.header {
		.gradientBar(@toolbarDarkEndBackground, @toolbarDarkStartBackground);
		padding: 0 10px;
		border: 1px solid @baseColorDark;
		margin: -1px;
		.border-radius(6px 6px 0 0);
		height: 42px;
		.box-shadow(none);
		.logo{
			background: url("@{images-path}/platform/portlets/extensions/Logo.png") no-repeat scroll 18px center;
			color: @header-popup-title;
			font-size: 18px;
			font-weight: bold;
			text-shadow: 1px 0 1px rgba(0, 0, 0, 0.2);
			line-height: 42px;
			text-align: center;
		}
	}
	.content {
		background-color: @baseBackground;
		margin: 0 auto;
		padding: 10px 23px;
		position: static;
		width: auto;
		vertical-align: text-top;
		 p {
			text-align: center;
		}
		.btn-buy {
 			font-size: large;
 			padding: 10px 50px;
 		}
		.product-label {
			margin-bottom: 5%;
			margin-left: 3%;
			span {
				font-size: large;
				font-weight: bold;
				vertical-align: middle;
			}
			input {
				font-size: large;
				letter-spacing: 1px;
				width: 64%;
				margin: 0px;
			}
		}

		.steps {
			margin: 0 0 35px;
		}
		.rightCol {
			strong{
				padding: 10px 0;
				display: block;
			}
			.form-input{
				overflow: hidden;
				padding: 0 10px;
			}
			.btn-unlock{
				float: right;
			}
			.unlock-label {
				font-size: medium;
				font-weight: bold;
				float: left;
			}
			.Text {
				width: 100%;
				margin: 0 5px 0 0;
			}
		}
		.stepsNumber {
			background: #B5B5B5;
			.border-radius(19px);
			color: @baseBackground;
			display: block;
			font-size: 24px;
			font-weight: bold;
			height: 38px;
			line-height: 40px;
			text-align: center;
			width: 38px;
			float: left;
			margin-right: 15px;
		}
		
		.alert.alert-error {
			margin: 0 43px 15px 0;
			.uiIconError {
				background: url("@{images-path}/platform/portlets/extensions/errorIcon.png") no-repeat left center;
				white-space: nowrap;
			}
	 	}
	}
	.bottom {
		background: url("@{images-path}/platform/portlets/extensions/loginLeftBG.png") no-repeat left bottom, 
    			url("@{images-path}/platform/portlets/extensions/loginRightBG.png") no-repeat right bottom,
    			url("@{images-path}/platform/portlets/extensions/loginCenterBG.png") repeat-x bottom;
		text-align: center;
		 padding: 30px 0;
         border-radius: 8px;
        color:@textColor;
		  a {
			text-decoration: none;
		}
	}

	.backOutdated {
		background: #e97f7f;
		color: @baseBackground;
		 .border-radius(4px);
		text-align: center;
		padding: 8px;
		margin: 10px 0 15px;
	}
	.backNotOutdated {
		background: #b5b5b5;
		color: @baseBackground;
		.border-radius(4px);
		text-align: center;
		padding: 8px;
		margin: 10px 0 15px;
	}

}

// remove clear button on IE
input::-ms-clear,input[type=password]::-ms-reveal{
  display: none;
}

@media (max-width: 600px) {
	.uiWelcomeBox {
		width: auto;
		margin: -380px 15px 0;
		.header {
			.logo{ background: none;}
		}
		.content {
			.product-label {
				input {
					width: 90%;
				}
			}
		}
		.rightCol {
			width: auto;
			.center {
				padding-right: 0px;		
	 		}
		}
		.bottom {
			padding: 22px 0;
		}
	}
}
@media (max-width: 480px) {
	.uiWelcomeBox {
		.content{
			.rightCol {
				.form-input{
					padding: 0 10px 0 0;
				}
				.btn-unlock{
					float: right;
					margin-top: 20px;
				}
				.unlock-label {
					float: none;
					width: 100%;
				}
			}
		}
	}
}