*{
	
	
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	outline: none;
	list-style: none;

}


*,
*::before,
*::after {
    margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	outline: none;
	list-style: none;
}


:root {
  --step--2: clamp(0.69rem, calc(0.58rem + 0.60vw), 1.00rem);
  --step--1: clamp(0.83rem, calc(0.67rem + 0.81vw), 1.25rem);
  --step-0: clamp(1.00rem, calc(0.78rem + 1.10vw), 1.56rem);
  --step-1: clamp(1.20rem, calc(0.91rem + 1.47vw), 1.95rem);
  --step-2: clamp(1.44rem, calc(1.05rem + 1.95vw), 2.44rem);
  --step-3: clamp(1.73rem, calc(1.21rem + 2.58vw), 3.05rem);
  --step-4: clamp(2.07rem, calc(1.39rem + 3.40vw), 3.82rem);
  --step-5: clamp(2.49rem, calc(1.60rem + 4.45vw), 4.77rem);
	
	/* Font style */
	
	--ff-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	
	/* Color style */
	

	
	--color-primary: #0092ca;
	--color-secondary: #6dd5ed;
	--color-primary-dark:#192294;
	--color-error:#cc3333;
	--color-success:#4bb544;
	--color-link:#606470;
	--color-link-dark:#3c4245;
	--color-background:#f5f9ee;
	--color-border-sc:#ececec;
	--color-border-focus:#a9d7f6;
	--color-border:#eeeeee;
	--bs:#ffa857;
	--color-dark-grey:#a4a3a3;
	--gradient: linear-gradient(135deg var(--color-primary), var(--color-secondary));
	
	
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults 
html:focus-within {
  scroll-behavior: smooth;
}*/

/* Set core body defaults 
body {
  min-height:  100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-family: var(--ff-primary);
}
*/

/* A elements that don't have a class get default styles 
a:not([class]) {
 text-decoration-skip-ink: auto;
}*/

/* Make images easier to work with 
img,
picture {
  max-width: 100%;
  display: block;
}
*/
/* Inherit fonts for inputs and buttons 
input,
button,
textarea,
select {
  font: inherit;
}
*/
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them 
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}*/
hr {
      
    background-color: currentColor;
    border: 1px solid var(--color-primary);
    opacity: 1.25;
    width: 50px;
    margin-left:44%;
    margin-bottom:10%;
  }
  
  hr:not([size]) {
    height: 1px;
  }
  #user {
    padding-left: 30px; /* Adjust as needed to make room for the icon */
}

#user-icon{
    color: #07a5f2;
    position: absolute;
	top: 12%;
    left: -35px;
  }

  .eye-icon {
    position: relative;
    cursor: pointer;
  }
  
  #eye {
    position: absolute;
    top: 12%;
    left: -40px;
    color: #07a5f2;

  }
/* ======================================================================== */ 

 /*                     										             */

/* ======================================================================== */
body, html {
  height:100%;
}

.container {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
    background-color: #d8d7d7;
	column-gap: 3rem;
}

.form{
	position: absolute;
	width: 100%;
	max-width: 480px;
	background: #fff;
	border-radius: 1rem;
	 box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
	padding: 3em 2.2em;
	transition: all .3s ease-in-out;
}

.form.sign-up {
	opacity: 0;
	pointer-events: none;
}

.forms.show-signup .form.sign-up {
	opacity: 1;
	pointer-events: auto;
}

.forms.show-signup .form.sign-in {
	opacity: 0;
	pointer-events: none;
}

.header {
	color: var(--color-primary);
	font-size: var(--step-1);
	font-weight: 500;
	text-align: center;
	letter-spacing: 1px;
}



span.under__social {
	display: grid;
	place-items: center;
	letter-spacing: 1px;
	margin-top: 1.7rem;
}


.button-input-group {
	display: grid;
	place-items: center;
	margin-top: .6rem;
}

.group {
	width: 90%;
	height: 47px;
	margin-bottom: 1.3rem;
    margin-top: 3%;
}

.group input,
.group button {
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	border-radius: .4rem;
}

.group.button-group {
	width: 60%;
}

.group input {
	border: 2px solid var(--color-border);
	padding: 0 1.1rem;
}

.group input::placeholder {
	opacity: .9;
}

.form-link {
	margin: 1.6rem 0 1.8rem 0;
}

.alert-text.signup__alert {
	margin-bottom: 2.2rem;
}

.alert-text .help__text {
	position: absolute;
	left: 4rem;
	font-size: var(--step--2);
	margin-top: -1rem;
	opacity: .7;
}

a.link,
a.login-link,
.alert-text .help__text {
	color: var(--color-link);
}

a.link:hover,
a.login-link:hover {
	color: var(--color-primary);
	text-decoration: underline;
	transition: all .4s ease;
}



/* -----------------The start of Validation* ----------------- */

.form input:focus,
.forum input:not(:placeholder-shown) {
	background-color: var(--color-background);
	border-color: var(--color-border-focus);
}

.form input:focus,
.forum input:placeholder-shown {
	box-shadow: 0 0 0 2px var(--color-border-focus);
}


/* -----------------The end of Validation* ----------------- */



/* -----------------The start of Button Design* ----------------- */


.group button {
	position: relative;
	background: transparent;
	cursor: pointer;
}

.group button span {
	width: 100%;
	height: 100%;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	font-weight: 500;
	color: var(--color-primary);
	letter-spacing: 1px;
	background: transparent;
	border-radius: .6rem;
	z-index: 99;
}

.group button:hover span {
	background-color: var(--color-primary);
	color: #fff;
	transform: scale(1.1);
	transition: all .2s ease;
	transition-delay: .3s;
	
}

.group button::before {
	position: absolute;
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	top: 1px;
	left: 1px;
	border-top: 2px solid var(--color-primary);
	border-left: 2px solid var(--color-primary);
	border-top-left-radius: .6rem;
	transition: all .3s ease;
	transition-delay: 0s;
}

.group button::after {
	position: absolute;
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	bottom: 1px;
	right: 1px;
	border-bottom: 2px solid var(--color-primary);
	border-right: 2px solid var(--color-primary);
	border-bottom-right-radius: .6rem;
	transition: all .3s ease;
	transition-delay: 0s;
}

.group button:hover {
	box-shadow: 0 0 1.6rem var(--color-primary);
	transform: scale(1.1);
	transition: all .2s ease;
	transition-delay: .3s;
}

.group button:hover::before,
.group button:hover::after {
	width: 99%;
	height: 96%;
	border-radius: .6rem;
}


/*Change password*/
.tile {
	width: 60%;
	position: relative;
	background: #ffffff;
	border-radius: 3px;
	padding: 30px;
	-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
	margin-bottom: 30px;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
  }

  
.formbold-input-flex {
	display: flex;
    gap: 20px;
    margin-bottom: 15px;
    padding: 0px 20px 10px 20px;
    margin-left: 10%;
  
}
  .formbold-input-flex > div {
	width: 100%;
  }
  .formbold-form-input {
	
	width: 80%;
	padding: 13px 13px;
	border-radius: 5px;
	border: 1px solid #b0bdd1;
	background: #ffffff;
	font-weight: 500;
	font-size: 15px;
	color: #009688;
	outline: none;
	resize: none;
  }
  .formbold-form-input:focus {
	border-color: #009688;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
  }
  .formbold-form-label {
	color: #536387;
	font-size: 14px;
	line-height: 24px;
	display: block;
	margin-bottom: 10px;
	
  }
  .form-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*align-items: center;
	padding: 0px 0px 0px 30px;*/
  }
  
 
  .formbold-form-title {
	text-align: center;
	margin-bottom:5%;
  }
  .btn-primary {
    color: #FFF;
    background-color: #009688;
    border-color: #009688;
    margin-left: 32%;
    padding: 8px;
    width: 30%;
}

.eye-icon {
    position: relative;
    cursor: pointer;
  }
  
  #eyeOld {
    position: absolute;
    top: 12%;
    left: -40px;
    color: #009688;

  }

  #eyeNew {
    position: absolute;
    top: 12%;
    left: -40px;
    color: #009688;

  }

  #eyeConfirm {
    position: absolute;
    top: 12%;
    left: -40px;
    color: #009688;

  }

  @media only screen and (max-width: 768px) {

	.tile {
		width: 100%;
		position: relative;
		background: #ffffff;
		border-radius: 3px;
		padding: 30px;
		-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
		margin-bottom: 30px;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.formbold-input-flex {
		display: flex;
		gap: 20px;
		margin-bottom: 15px;
		padding: 0px 10px 10px 10px;
		margin-left: 0;
		
	}
	.formbold-form-input {
		width: 100%;
		padding: 13px 13px;
		border-radius: 5px;
		border: 1px solid #b0bdd1;
		background: #ffffff;
		font-weight: 500;
		font-size: 15px;
		color: #009688;
		outline: none;
		resize: none;
	}
	#eyeOld {
		position: absolute;
		top: 12%;
		left: -20px;
		color: #009688;
	}
	#eyeNew {
		position: absolute;
		top: 12%;
		left: -20px;
		color: #009688;
	}
	#eyeConfirm {
		position: absolute;
		top: 12%;
		left: -20px;
		color: #009688;
	}
	

  }