/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
	
	.loginform{
		height: 88vh;
		background: #f0f8ff !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	  }
	  .row{
		width: 700px;
		margin: auto !important;
	  }
	.card{
		overflow: hidden;
		border: 0 !important;
		border-radius: 20px !important;
		box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
	  }
	
	  
	  .card-body{
		padding: 2rem;
	  }
	  
	  .title{
		margin-bottom: 2rem;
	  }
	  
	  .form-input{
		position: relative;
	  }
	  
	  .form-input input{
		width: 100%;
		height: 45px;
		padding-left: 40px;
		margin-bottom: 20px;
		box-sizing: border-box;
		box-shadow: none;
		border: 1px solid #00000020;
		border-radius: 50px;
		outline: none;
		background: transparent;
	  }
	  
	  .form-input span{
		position: absolute;
		top: 10px;
		padding-left: 15px;
		color: #007bff;
	  }
	  
	  .form-input input::placeholder{
		color: black;
		padding-left: 0px;
	  }
	  
	  .form-input input:focus, .form-input input:valid{
		border: 2px solid #007bff;
	  }
	  
	  .form-input input:focus::placeholder{
		color: #454b69;
	  }
	  
	  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before{
		background-color: #007bff !important;
		border: 0px;
	  }
	  
	  .form-box button[type="submit"]{
		margin-top: 10px;
		border: none;
		cursor: pointer;
		border-radius: 50px;
		background: #007bff;
		color: #fff;
		font-size: 90%;
		font-weight: bold;
		letter-spacing: .1rem;
		transition: 0.5s;
		padding: 12px;
		width: 100%;
	  }
	  
	  .form-box button[type="submit"]:hover{
		background: #0069d9;
	
	  }
	
		  .form-box input[type="submit"]{
		margin-top: 10px;
		border: none;
		cursor: pointer;
		border-radius: 50px;
		background: #007bff;
		color: #fff;
		font-size: 90%;
		font-weight: bold;
		letter-spacing: .1rem;
		transition: 0.5s;
		padding: 12px;
		width: 100%;
	  }
	  
	  .form-box input[type="submit"]:hover{
		background: #0069d9;
	
	  }
	  .forget-link, .register-link{
		color: #007bff;
		font-weight: bold;
	  }
	  
	  .forget-link:hover, .register-link:hover{
		color: #0069d9;
		text-decoration: none;
	  }
	  
	 
	  
	  

	  .registerForm{
		/* height: 100vh; */
		background: #f0f8ff !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	  }
	  .row{
		width: 700px;
		margin: auto !important;
	  }
		.card{
			overflow: hidden;
			border: 0 !important;
			border-radius: 20px !important;
			box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
		}
		
		
		
		.card-body{
			padding: 2rem;
		}
		
		.title{
			margin-bottom: 2rem;
		}
		
		.form-input{
			position: relative;
		}
		
		.form-input input{
			width: 100%;
			height: 35px;
			padding-left: 40px;
			margin-bottom: 15px;
			box-sizing: border-box;
			box-shadow: none;
			border: 1px solid #00000020;
			border-radius: 50px;
			outline: none;
			background: transparent;
			font-size: 14px;
		}
		.custom-control-label{
			font-size: 13px;
		}
		.form-input span{
			position: absolute;
			top: 10px;
			padding-left: 15px;
			color: #007bff;
		}
		.floatingTextarea{
			color: black !important;
			padding-left: 0px;
			font-size: 13px;
			width: 100%;
		}
		.form-input input::placeholder{
			color: black;
			padding-left: 0px;
			font-size: 15px;
		}
		
		.form-input input:focus, .form-input input:valid{
			border: 2px solid #007bff;
		}
		
		.form-input input:focus::placeholder{
			color: #454b69;
		}
		
		.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before{
			background-color: #007bff !important;
			border: 0px;
		}
		
		.form-box button[type="submit"]{
			margin-top: 10px;
			border: none;
			cursor: pointer;
			border-radius: 50px;
			background: #007bff;
			color: #fff;
			font-size: 90%;
			font-weight: bold;
			letter-spacing: .1rem;
			transition: 0.5s;
			padding: 12px;
			width: 100%;
		}
		
		.form-box button[type="submit"]:hover{
			background: #0069d9;
		
		}
		
		.forget-link, .register-link{
			color: #007bff;
			font-weight: bold;
			font-size: 13px;
		}
		
		.forget-link:hover, .register-link:hover{
			color: #0069d9;
			text-decoration: none;
		}
		.my-4{
			margin-top: 10px !important;
			margin-bottom: 10px !important;
		}
		.Already-account{

			font-size: 13px;
		}
	
	  @media (min-width:320px) and (max-width:780px){
		.btn-social{
		  font-size: 12px !important;
		  padding: 9px 7px !important;
		}
		.card-body{
		  padding: 1rem;
		}
		.row{
			width: 100%;
			margin: auto !important;
		  }
		  .form-input input::placeholder{
			color: black;
			padding-left: 0px;
			font-size: 12px;
		}
		.form-input input{
			padding-left:20px ;
		}
		h4{
			font-size: 15px !important;
		}
		.custom-control-label{
			font-size: 12px;
		}
		.form-box button[type="submit"]{
			font-size: 80%;
			padding: 8px;
		}
		.forget-link{
			font-size: 12px;
		}
		.register-link{
			font-size: 12px;
		}
	  }
	  
header{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
}
header h4{
    background: linear-gradient(to right, #0c3df4 0%, #02b5ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 

    padding: 10px 0;
}