@import "variables";
@import "tm_mixins";

.popup-type-signup {
	.cherry-popup-title {
		text-align: center;
	}

	.cherry-popup-register{
		input[type="text"],
		input[type="email"], {
			width: 100%;
		}

		label {
			margin-bottom: 0.5em;
			display: inline-block;
		}

		&__form {

		}

		&__input-group{
			display: flex;
			flex-flow: column nowrap;
			align-items: stretch;
		}

		&__wrap {
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			margin: 0.75em 0;

			&:last-child {
				margin-bottom: 0;
			}
		}

		&__sign-up {
			padding: 10px 40px;
			color: white;
			cursor: pointer;
			background-color: $blue_color;
			border-radius: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 600;

			&:hover {
				background-color: $blue_color_h;
			}
		}

		&__message{
			display: none;
			margin: 1em 0;
			text-align: center;

			span 		{
				font-size: 18px;
				color: $red_color;
			}

			&.success-type{
				span{
					color: $green_color;
				}
			}
		}

		.cherry-popup-signup__new-user {
			display: flex;
			align-items: center;
			margin: 20px 0;

			span {
				text-align: center;
				flex: 1 1 auto;
				margin: 0 25px;
			}

			&:before {
				flex: 1 1 auto;
				display:block;
				position: relative;
				height: 1px;
				background-color: $grey_color_3;
				content:'';
			}

			&:after {
				flex: 1 1 auto;
				display:block;
				position: relative;
				height: 1px;
				background-color: $grey_color_3;
				content:'';
			}
		}

		.cherry-popup-signup__login-user {
			display: flex;
			justify-content: center;
			margin: 20px 0;

				span {
					margin: 0 5px;
				}
		}

	}
}