@import url("https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap");
body {
		font-family: "Spline Sans", sans-serif;
		line-height: 1.5;
		min-height: 100vh;
		background-color: #eaeef6;
	}
	.input-group input.not-empty~label {
		top: 0 !important;
		font-size: 12px !important;
		background: #2b577e !important;
		border-color: #1FCAC5 !important;
	}

	#application-form .input-group input.not-empty {
		border: 2px solid #2b577e !important;
	}
	.input-group #id_firstname{
		border: 1px solid #fff !important;
	}
	#application-form .input-group input::placeholder{
		visibility: hidden;
	}
	.input-group #id_firstname+label {
		position: absolute;
		top: 50%;
		left: 5px;
		transform: translateY(-50%);
		font-size: 16px;
		color: #fff;
		padding: 0 5px;
		pointer-events: none;
		transition: .5s;
		background: transparent;
	}

/* Start - Signup page*/
#page-auth-coupreg-couponforms-signup {
    .mform {
        .form-label-addon {
            display: none !important;
        }
    }

	.header-heading {
		color: white;
	}

	#signup-form-and-card {
		position: relative;
	}

	[role="main"] {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	@media (max-width: 767.98px) {
    	#signup-form-and-card {
            padding-bottom: 110px !important;
        }

		[role="main"] {
			align-items: center;
		}
    }

    #page {
		background: linear-gradient(77deg, rgba(146,198,251,1) 50%, rgba(220,193,252,1) 100%);

        #topofscroll > .container {
            #page-content {
                padding-bottom: 0 !important;
            }

            #page-header .header-wrapper {
                display: flex;
                justify-content: center;
                padding-top: 30px;
            }

            [role="main"] {
                background-color: white;
				border-radius: 10px;
                position: relative;
            }
        }

        @media (min-width: 992px) {
            .mform {
                max-width: 660px;
                min-width: 600px;
            }
        }

		@media (max-width: 991.98px) {
			#fitem_id_passwordpolicyinfo {
                min-width: 320px!important;

                .felement {
                    min-width: 100%!important;
                }
            }

			#fitem_id_select_package {
				min-width: 320px!important;
			}
        }

		#fitem_id_recaptcha_element .felement {
			justify-content: center
		}

		#fitem_id_coupon {
			z-index: 2;
		}

		#id_coupon.form-control.has-content {
			font-size: 20px;
			font-weight: bold;
			text-align: center;
			letter-spacing: 4px;
		}

        .mform {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;

            #fitem_id_select_package, #fitem_id_recaptcha_element {
                min-width: 100%;
                justify-content: center;
            }

			#fitem_id_select_package .felement {
				min-width: 100% !important;
			}

            .row {
                margin: 0;
                display: flex;
                align-items: start;

                .form-control {
                    background: transparent;
                    border: 2px solid #2b577e;
                    transition: all ease 0.4s;
                    color: black;
                    min-width: 320px;
                    max-width: 320px;
					font-weight: 500;
                    font-size: 15px;
                }

                .form-control.has-content {
                    background: transparent;
                    border: 2px solid #2b577e;
                    transition: all ease 0.4s;
                    box-shadow: none;
                }

                .felement {
                    min-width: 320px;
                    max-width: 320px;
                    min-height: 40px;

					.custom-select {
						min-width: 100% !important;

						&:focus {
							box-shadow: 0 0 0 .2rem rgba(44, 89, 128, 0.75);
						}
					}

                    .form-control.is-invalid {
                        min-width: 320px;
                        max-width: 320px;
                        min-height: 40px;
                    }
                }


                .col-form-label {
                    display: flex;
                    align-items: center;
                    position: absolute;
                    z-index: 1;
                    max-width: fit-content;

                    .edw-form-label {
                        padding: 0px 5px;
                        font-size: 16px !important;
                        background-color: transparent;
                        transform: translate(5px, 9px);
                        transition: all ease 0.4s;
						cursor: auto;
                    }

                    .edw-form-label.has-content {
                        background-color: #2b577e !important;
                        transform: translate(10px, -10px) !important;
                        transition: all ease 0.4s;
                        font-size: 12px!important;
						color: white;
                    }

					@media (max-width: 1050.98px) {
						.edw-form-label {
							padding: 0px 5px;
							font-size: 16px !important;
							background-color: transparent;
							transform: translate(5px, 11px)!important;
							transition: all ease 0.4s;
							cursor: auto;
							-webkit-transform: translate(5px, 11px)!important;
							-moz-transform: translate(5px, 11px)!important;
							-ms-transform: translate(5px, 11px)!important;
							-o-transform: translate(5px, 11px)!important;
						}

						.edw-form-label.has-content {
							background-color: #2b577e !important;
							transform: translate(10px, -7px) !important;
							transition: all ease 0.4s;
							font-size: 12px!important;
							color: white;
							-webkit-transform: translate(10px, -7px) !important;
							-moz-transform: translate(10px, -7px) !important;
							-ms-transform: translate(10px, -7px) !important;
							-o-transform: translate(10px, -7px) !important;
						}
					}
                }
            }

            #fitem_id_passwordpolicyinfo {
                min-width: 100%;
				text-align: center;

                .felement {
                    min-width: 100%;
                }
            }

            @media (min-width: 768px) {
                 #fgroup_id_buttonar {
                    top: 42%;
                }
            }

            @media (max-width: 767.98px) {
                #fgroup_id_buttonar {
                    bottom: 0 !important;
                }

                #fgroup_id_buttonar {
                    & .felement {
                        .inner-reverse {
                            min-width: 100% !important;
                            justify-content: space-evenly !important;
                        }
                    }
                }
            }

            #fgroup_id_buttonar {
                background-color: transparent;
                min-width: 100%;
                position: absolute;

                > .col-form-label {
                    display: none;
                }

                .felement {
                    min-width: 100%;

                    .inner-reverse{
                        min-width: 100%;
                        justify-content: space-between;
                        flex-direction: row-reverse;

                        @media (min-width: 768px) {
                            > .fitem {
								margin-right: -65px !important;
                            }
                            > .fitem.btn-cancel {
								margin-left: -65px !important;
                            }
                        }
						> .fitem.btn-cancel {
							display: none;
						}
                    }
                }
            }

            .fdescription.required {
                display: none;
            }
        }
    }

	/* Submit and Cancel button styles */
	.fitem.btn-cancel > span[data-fieldtype='submit'],
	.fitem > span[data-fieldtype='submit'] {
		display: inline-block;
		position: relative;
		z-index: 1;
		overflow: hidden;
		text-decoration: none;
		font-family: sans-serif;
		font-weight: 600;
		font-size: 16px;
		padding: 0.75em 1em;
		color: white;
		white-space: normal;
		width: 130px;
		min-height: 105px;
		background-color: rgba(44, 89, 128);
		border: 0.15em solid rgba(44, 89, 128, 0.75);
		border-radius: calc(0.75em + 0.5em + 0.15em);
		transition: 0.5s;
		justify-content: center;
		display: flex;
		cursor: pointer;
		animation: pulse 2s infinite;
		-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
		-ms-transition: 0.5s;
		-o-transition: 0.5s;

		input.btn {
			border: none;
			background: transparent;
			font-family: inherit;
			color: inherit;
			cursor: pointer;
			padding: 0;
			font-size: 16px;
			font-weight: 700;
			white-space: normal;

			&:active {
				background-color: transparent;
				color: white;
			}

			&:focus {
				box-shadow: none;
			}
		}

		&:before, &:after {
			content: "";
			position: absolute;
			top: -1.5em;
			z-index: -1;
			width: 200%;
			aspect-ratio: 1;
			border: none;
			border-radius: 40%;
			background-color: rgba(44, 89, 128, 0.25);
			transition: 5s;
			-webkit-transition: 5s;
			-moz-transition: 5s;
			-ms-transition: 5s;
			-o-transition: 5s;
		}

		&:before {
			left: -80%;
			transform: translate3d(0, 8em, 0) rotate(-340deg);
			-webkit-transform: translate3d(0, 8em, 0) rotate(-340deg);
			-moz-transform: translate3d(0, 8em, 0) rotate(-340deg);
			-ms-transform: translate3d(0, 8em, 0) rotate(-340deg);
			-o-transform: translate3d(0, 8em, 0) rotate(-340deg);
		}
		&:after {
			right: -80%;
			transform: translate3d(0, 9em, 0) rotate(390deg);
			-webkit-transform: translate3d(0, 9em, 0) rotate(390deg);
			-moz-transform: translate3d(0, 9em, 0) rotate(390deg);
			-ms-transform: translate3d(0, 9em, 0) rotate(390deg);
			-o-transform: translate3d(0, 9em, 0) rotate(390deg);
		}

		&:hover, &:focus {
			color: white;
			border: 1px solid rgba(44, 89, 128);
			background-color: transparent;

			&:after, &:before {
				transform: none;
				background-color: rgba(44, 89, 128, 0.75);
			}
		}
	}
}
/* End -Signup page*/

@keyframes pulse {
		0% {
			-moz-box-shadow: 0 0 0 0 rgb(44, 89, 128, 0.4);
			-webkit-box-shadow: 0 0 0 0 rgb(44, 89, 128, 0.4);
			box-shadow: 0 0 0 0 rgb(44, 89, 128, 0.4);
		}
		70% {
			-moz-box-shadow: 0 0 0 30px rgba(44, 89, 128, 0);
			-webkit-box-shadow: 0 0 0 30px rgba(44, 89, 128, 0);
			box-shadow: 0 0 0 30px rgba(44, 89, 128, 0);
		}
		100% {
			-moz-box-shadow: 0 0 0 0 rgba(44, 89, 128, 0);
			-webkit-box-shadow: 0 0 0 0 rgba(44, 89, 128, 0);
			box-shadow: 0 0 0 0 rgba(44, 89, 128, 0);
		}
	}