@import "common";
body {
	background: #f4f4f4;
	.login-container {
		width: 100%;
		height: 100vh;
		.flex-center();
		.card {
			width: 480px;
			height: auto;
			min-height: 520px;
			background: #fff;
			overflow: hidden;
			.box-shadow();
			border: 0 solid #f6f6f6;
			border-radius: 0.25rem;
			.card-header {
				.flex-between();
				background: rgba(85,110,230,.25)!important;
				
				.col-title {
					width: 60%;
					.wrapper {
						padding: 20px;
						h3 {
							font-size: 18px;
						}
						.intro {
							font-size: 14px;
							line-height: 30px;
							color: #666;
						}
					}
					
				}
				.col-img {
					width: 40%;
					img {
						width: 100%;
						display: block;
						padding: 0;
						margin: 0; 
						border: 0;
					}
				}
			}
			.card-body {
				padding: 1.25rem 1.25rem;
				.avatar-box {
					width: 4.5rem;
					height: 4.5rem;
					background: #eff2f7;
					margin-top: -40px;
					border-radius: 50%;
					.flex-center();
				}
				.form {
					width: 100%;
					.form-row {
						padding: 10px 5px 0 5px;
						label {
							display: block;
							font-size: 14px;
							font-weight: bold;
							line-height: 32px;
						}
						input {
							display: block;
							border-radius: 3px;
							width: 90%;
							padding: 0 10px;
							height: 36px;
							line-height: 36px;
						}
						button {
							display: block;
							width: 95%;
							color: #fff;
							background: #556ee6;
							height: 36px;
							border-radius: 3px;
						}
						&.buttons {
							margin-top: 20px;	
						}
					}
				}
				.row {
					padding: 10px 5px;
				}
			}
			
		}
	}
}