@import '../variables.less';
@import '../mixins.less';
@import '../front-end.less';

/**********************
lk-form.less
*************************/
#ecf-creator.ecf-output-fields-wrapper {
	padding: 0;
	margin: 0;
	min-height: unset;
	background: transparent;
}

.ecf-output-fields-wrapper {

	.ecf-lk-form-wrapper {
		border: 1px solid @grey_2;
	  background: @white;
	  height: calc(~"100vh - 135px");
	  width: calc(~"100% - 20px");
		padding: 80px;
		margin-top: 20px;

		.ecf-deactivate-form,
		.ecf-lk-form {
			h1 {
				color: @black;	
				margin-bottom: 30px;			
				font-size: 24px;
		    font-weight: 600 !important;
		    line-height: 1.2;
			}
		}

		.ecf-deactivate-form {
			margin-bottom: 100px;

			.ecf-confirmation {
				position: relative;
				max-width: 120px;
				margin: auto;
				text-align: left;
			}
		}

	  .ecf-lk-form {
	  	max-width: 715px;
	  	margin-bottom: 100px;

	  	.se-waring {
	  		margin-bottom: 50px;

	  		p {
	  			a {
	  				font-size: 16px;
	  				font-weight: 500;
	  			}
	  		}
	  	}

	  	h1 {
	  		margin-bottom: 70px;
	  	}

	  	p {
	  		color: @text_2;
	  		font-size: 14px;
	  		font-weight: 400;

	  		a {
	  			font-weight: 500;
	  			color: @primary;
	  		}
	  	}
	  }

		.ecf-form-field {
			margin-right: 15px;
			> input {
				.transition(all, 0.15s, ease-out);
				.roundedcorners(5px);				
				.box-shadow(none);
				outline: none;
				border: 1px solid @grey_2;
				background: @grey_1;
				height: 50px;
				padding: 0 15px;
				width: 500px;
				max-width: 100%;
				font-size: 16px;
				&:focus, &:focus-visible {
					.box-shadow(0 0 0 2px @grey_2);
					background: @white;
					border-color: @grey_2;
				}
			}
		}
		.ecf-button {
			height: 50px;
			.ecf-button-inner {
				line-height: 46px;
			}
			&:active, &:focus {
			  color: @white;
			  .box-shadow(0 0 0 3px @white, 0 0 0 5px fade(@primary, 40););
			}
		}
	}
}


@media (max-width: 767px) {

	.ecf-output-fields-wrapper {
		.ecf-lk-form-wrapper {
			width: calc(~"100% - 10px");
			padding: 20px;
		}
	}

}