@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&family=Roboto:wght@400&display=swap');

:root {
	--primary-color:#32a852;
	--primary-color-dark:#2c5f2d;
	--primary-color-dark2:#2b8242;
	--primary-color-moderate:#2bae66;
	--primary-color-light:#8fd694;
	--primary-color-light2:#88d18a;
	--primary-color-moderate2:#7dba84;
	--secondary-color-light:#d5f0dc;
	--secondary-color-light2:#b8d1bf;
	--secondary-color:#758279;
	--secondary-color-dark:#474d49;
	--secondary-color-dark2:#504b43;
	--special-color:#ffe77a;
	--special-color-2:#ffd76a;
	--special-color-light:#fcf6f5;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body {
	min-height:100%;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
.nav-fixed {
	position:absolute;
	top:20px;
	left:20px;
	z-index:5;
	width:100%;
}
.optional {
	color:#6a6a6a;
	margin-bottom:5px;
}
.footer {
	position:relative;
	bottom:15px;
	text-align:center;
	width:100%;
	margin:0 auto;
	font-size:.8rem;
    cursor:pointer;
}
.footer a{
	text-decoration:none;
	color:#ddd;
}

.footer a:hover{
	color:#aaa;
}

form .font-size {
	font-size:.8rem;
}

button {
	border-style:none;
	background:transparent;
}

.logo img {
	border-radius:20px;
	opacity:.6;
}
.logo {
	margin:0 2rem 2rem 2rem;
}

.container{
    min-height:95vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 30px;
}
.form{
    position: relative;
	width:clamp(100px,90%,420px);
    padding:20px 30px;
    border-radius:6px;
    background: #fff;
	min-height:350px;
	box-shadow:0 0 10px #0004;
}

.form.login {
	width:clamp(100px,90%,370px);
	padding:20px 30px;
}

.form-content {
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	gap:20px;
}

.form .signup{
    opacity: 1;
}

h3 {
    font-size: 28px;
    font-weight: 600;
    color: #232836;
    text-align: center;
}

.form .fieldinput,
.form .field{
    position: relative;
    height:35px;
	display:flex;
    width:100%;
    margin-top:15px;
    border-radius:3px;
}


.fieldinput input,
.fieldinput button, 
.field input,
.field button{
    height:100%;
    width:calc(100% - 90px);
    border:none;
    font-size:.85rem;
    font-weight:400;
    border-radius:3px;
}

.fieldinput input,
.fieldinput button, 
.field button{
	width:100%;
}

.field label {
	min-width:90px;
	display:inline-block;
	padding:.5rem 0;
}

.fieldinput input,
.field input{
    outline: none;
    padding: 0 15px;
    border: 1px solid #cacaca;
}

.fieldinput input:focus,
.field input:focus{
    border-bottom-width: 2px;
}
.field-checkbox {
	margin-top:20px;
	margin-left:10px;
}
.field-checkbox label{
	font-size:16px;
}
.field-checkbox input[type="checkbox"] {
	font-size:10px;
	font-weight:300;
}
.eye-icon{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #8b8b8b;
    cursor: pointer;
    padding: 5px;
}
.field button{
    color: #fff;
	background: linear-gradient(to top, var(--primary-color), var(--primary-color-light));
    transition: all 0.3s ease;
    cursor: pointer;
}
.field button:hover{
	background: linear-gradient(to top, var(--primary-color-dark), var(--primary-color));
}
.form-link{
    text-align: center;
    margin-top: 10px;
}
.form-link span,
.form-link a{
    font-size:.85rem;
    font-weight: 400;
    color: #232836;
}
.form a{
    color: #0171d3;
    text-decoration: none;
}
.form-content a:hover{
    text-decoration: underline;
}
.line{
    position: relative;
    height: 1px;
    width: 100%;
    margin: 36px 0;
    background-color: #d4d4d4;
}
.line::before{
    content: 'Or';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFF;
    color: #8b8b8b;
    padding: 0 15px;
}
.media-options a{
    display: flex;
    align-items: center;
    justify-content: center;
}

.field-checkbox .font-size {
	font-size:.85rem;
}

.message-wrapper {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transform:translateY(-100%);
	transition:transform 100ms;
	background:#fff;
	box-shadow:0 0 10px #0005;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:transform 10ms 500ms;
	z-index:5;
}

.message-wrapper.active-message {
	transform:translateY(0);
	transition:transform 10ms;
}

.message-content { 
    width:clamp(200px,100%,300px);
	height:max-content;
	padding:30px 20px;
	padding-bottom:10px;
	color:#888;
	background:#fff;
	border-radius:5px;
	margin-inline:1rem;
	box-shadow:0 0 10px #0005;
	transform-origin:top;
	transform:scale(0,0) translateY(-40%);
	transition:transform 500ms ease-in-out 150ms;
}

.message-content.active-content {
	transform:scale(1,1) translateY(0);
}

.message-content h3{
	font-weight:500;
	margin-bottom:15px;
}

.message-content p{
	font-size:.85rem;
	margin-bottom:30px;
	text-align:center;
	line-height:20px;
}

.message-content button {
	position:relative;
	left:50%;
	transform:translate(-50%);
	width:100px;
	padding:.5rem 0;
	border-radius:3px;
	background:var(--primary-color);
	color:#fff;
	cursor:pointer;
}

.message-content button:hover {
	background:var(--primary-color-dark);
}

/**/
.loader-wrapper{
	position:fixed;
	top:0;
	left:0;
	z-index:100;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width:100%;
    background:#fff;
    transform:translateY(100%);
    transition:transform 250ms;
}

.loader-wrapper.active-loader {
	transform:translateY(0);
}

.ring2,
.ring1,	
.ring{
  position: absolute;
  width: 20px;
  height: 20px;
  background:#4d9e47;
  border-radius:50%;
  box-shadow:0 0 2px #fff;
}
.ring{
  animation: ring 4.5s linear infinite;
}

.ring1{
  animation: ring 4.5s 1.5s linear infinite;
}

.ring2{
  animation: ring 4.5s 3s linear infinite;
}

@keyframes ring {
  0%{
    transform: rotate(0deg) scale(1);
	transform-origin: 0px 0px;
    background:#e65c00;
  }
  25% {
	transform: rotate(180deg) scale(.75); 
    transform-origin: 0px 0px;	
  }
  50%{
    transform: rotate(360deg) scale(.5);
	transform-origin: 0px 0px;
    background:#18b201;
  }
  75% {
	transform: rotate(540deg) scale(.75); 
    transform-origin: 0px 0px;	
  }
  100%{
    transform: rotate(720deg) scale(1);
	transform-origin: 0px 0px;
    background:#0456c8;
  }
}


.ring:before{
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255,255,255,.3);
}

.loader{
  font-size:1rem;
  display:inline-block;
  height:25px;
  line-height:25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height:100px;
  color:#d1d1d1;
  animation: text 5s ease-in-out infinite;
}
@keyframes text {
  50%{
    color:#333;
  }
}
/**/
.success,
.message {
	color:#d22;
	font-size:.85rem;
	text-align:center;
	width:100%;
	padding-inline:5px;
}

.success {
	color:#43ba63;
}

@media screen and (max-width: 400px) {
    .form{
        padding: 20px 10px;
    }
    
}
@media (max-width: 55em) {
	 
	 .back {
		height:30px;
		width:30px;
		bottom:40px;
	
	 }
	 .footer {
		bottom:4px; 
	 }

}

@media (max-width: 425px) {
	.field label {
		min-width:85px;
		font-size:.9rem;
	}
	h3 {
		font-size: 24px;
	}	
}

@media (max-width: 350px) {
	.field label {
		min-width:80px;
		font-size:.85rem;
	}
	
	h3 {
		font-size: 22px;
		font-weight: 600;
		color: #232836;
		text-align: center;
	}
}