*{
			padding: 0px;
			margin: 0px;
			box-sizing: border-box;
			font-family: 'Roboto', sans-serif;
		}
		.clearfix::after {
			content: "";
			clear: both;
			display: table;
		}
		.outerWrapper{
			float: left;
			width: 100%;
			min-height: 100vh;
			position: relative;
			padding-bottom: 99px;
		}
		.outerWrapper .innerWrapper{
			float: left;
			width: 100%;
			height: 300px;
			position: relative;
		}
		.outerWrapper .innerWrapper .bannerWrapper{
			height:100%;
			width: 100%;
			position: absolute;
			float: left;
			background-image: url('./../img/registrationProceeBanner3.png');
						background-repeat: round;
			
		}
		.outerWrapper .innerWrapper  header{
			position: absolute;
    width: 100%;
    background: linear-gradient(34deg,#0c0c0b2b, #fbb71340,#ef323a);
    padding: 15px 20px;
    height: 72px;
    display: flex;
    align-items: center;
		}
		.outerWrapper .innerWrapper  header .logoWrapper{
			min-width: 120px;
			height: 160%;
		}
		.outerWrapper .innerWrapper   header .logoWrapper img{
			
			height: 100%;
		}
		.welcomeTextWrapper{
			float: left;
			width: 100%;
			position: relative;
			z-index: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-flow: column;
		}
		.welcomeHeading{
			color: #fff;
			font-size: 30px;
		}
		.welcomeSubheading{
			color: #fff;
			font-size: 18px;
			line-height: 29px;
		}
		.outerFormWrapper{
			float: left;
			width: 100%;
		}
		.innerFormWrapper{
			max-width: 450px;
			margin: auto; 
			padding: 30px 30px;
			box-shadow: 0 0 15px 0 rgba(0,0,0,.08);
			min-height: 100px;
			position: relative;
			top: -50px;
			background-color: #fff;
			border-radius: 5px;
		}
		.formHeading{
			width: 100%;
			text-align: center;
			font-size: 26px;
			font-weight: 500;
			padding: 20px;
		}
		.formWrapper{

		}
		.formWrapper .registrationButton{
			width: calc(100% - 20px);
			margin-left: 10px;
			background-color: #66c9d9;
			color: #fff;
			border: 1px solid #66c9d9;
			padding: 8px;
			font-size: 14px;
			border-radius: 5px;
			cursor: pointer;
			box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
			margin-top: 10px;
			outline: none;

		}
		.formWrapper .registrationButton:hover{
			box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
		}
		.customeCheckBox{
			float: left;
			width: 100%;
			padding: 10px;
		}
		.customeCheckBox input{
			display: none;
		}
		.customeCheckBox label{		   
			width: 15px;
			height: 15px;
			border: 1px solid #ccc;
			float: left;
			border-radius: 3px;
			cursor: pointer;
			display: flex;
			justify-content: center;
			margin-right: 10px;
			align-items: center;
		}

		.customeCheckBox label img{
			display: none;
			width: 10px;
			height: 10px;
		}
		.customeCheckBox input:checked + label img{
			display: block;
		}
		.customeCheckBox p{
			font-size: 14px;
			color: #000;
			
		}
		.customeCheckBox p a{
			text-decoration: none;
			font-size: 14px;

		}
		.customeCheckBox p a:hover{
			text-decoration: underline;
		}
		.inputWrapper{
			float: left;
			width: 100%;
			padding: 10px;
		}
		.inputWrapper input{ 
			font-size: 16px;
			border: none;
			border-bottom: 1px solid #dfe0e8;
			padding: 5px;
			width: 100%;
			outline: none;
		}
		.inputWrapper input:not([value=""]):not(:focus){
		    background-color: #fff !important;
		}
		input:-webkit-autofill,
			input:-webkit-autofill:hover, 
			input:-webkit-autofill:focus, 
			input:-webkit-autofill:active  {
			    -webkit-box-shadow: 0 0 0 30px white inset !important;
		}
		.doubleLinkWrapper{
			padding: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
		}
		.link{
			font-size: 14px;
			color: #2196F3;
			transition: all .2s;
			cursor: pointer;
			opacity: .7;
			text-decoration: none;
		}
		.link:hover{
			text-decoration: underline;
			opacity: 1;
		}

		.footerWrapper{
			top: 87%;
    width: 100%;
    padding: 20px;
    background:linear-gradient(317deg,#fbb713a1,#ef323ad9);
    height: 100px;
    position: absolute;
		}
		.footerWrapper footer{
		}
		.footerWrapper footer p{
			color: #fff;
			margin-top: 7px;
			font-size: 14px;
			text-align: center;
		}
		footer.footerIneerWrapper ul{
			display: flex;
			justify-content: center;
			align-items: center;
			list-style-type: none;

		}
		footer.footerIneerWrapper ul li{
			margin-right: 10px;
		}
		footer.footerIneerWrapper ul li a{ 
			color: #fff;
			padding-right: 10px;
			font-size: 14px;
			border-right: 1px solid #fff;
			text-decoration:none;
			opacity: .9;
			transition: all .3s;
		}
		footer.footerIneerWrapper ul li:last-child a{
			border-right: none;
		}
		footer.footerIneerWrapper ul li a:hover{ 
			text-decoration:underline;
			opacity: 1;
		}
		.formLogoWrapper{
			float: left;
			width: 100%;
			padding: 10px;
			justify-content: center;
			align-items: center;
			display: none;
			margin-bottom: 50px;
		}
		.formLogoWrapper img{
			width: 100px;
		}

		.appLinkWrapper{
			width: 280px;
			margin: auto;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-flow: row;
			padding: 10px;
			border: 1px solid #ccc;
			margin-bottom: 20px;
			margin-top: 20px;
			border-radius: 3px; 
		}
		
		.appLinkWrapper p{
			font-size: 14px;
			font-weight: 500;
			color: #000;
			margin:0px;
		}
		.appLinkWrapper a{

		}

		@media screen and (max-width: 450px) {
		.outerWrapper{
		padding-bottom:150px;
		}
			.innerWrapper{
				display: none
			}
			.innerFormWrapper{
				box-shadow: 0 0 0px 0 rgba(0,0,0,.08);
				top: 0px;
				padding: 20px 10px;
			}
			.footerWrapper{
				height: 135px;
			}
			footer.footerIneerWrapper ul{
				flex-flow: column;
			}
			footer.footerIneerWrapper ul li  a{
				border-right: none;
			}
			.formLogoWrapper{
				display: flex;
			}
		}
