#mainBody		{padding-left:0px; padding-right:0px; padding-bottom:0px; background-color:var(--mainBlack);}
#mainBodyH1		{color:#ffffff; display:none;} 
#bigTitle		{display:flex; justify-content:center; flex-direction:row; gap:2rem; align-items:center}

#signInContain	{display:flex; justify-content:flex-start; flex-direction:column; align-items:center; padding:20px;
					> div {flex:0 0 350px;}
}
#signupBox		{display:flex; flex-direction:column; gap:1.5rem;
			.label, .label2	{color:#ffffff; margin-bottom:7px}
			.label::before	{content:'* ';}
			> div			{display:flex; flex-direction:column;}
}
#signUpForm			{display:flex; flex-direction:row; gap:1rem; flex-wrap: wrap;
						> div {flex:1 1 350px}
}
#iconTextIntro	{font-size:2rem; font-weight:500; margin:2rem auto; color:var(--mainPurpleLight);}
.iconText		{display:flex; flex-direction:row; justify-content:flex-start; gap:1rem; margin-bottom:1.5rem;
				> div:nth-child(1)	{font-size:2.5rem; flex:0 0 50px; color:var(--mainPurple); }
				> div:nth-child(2)	{font-size:1rem;}
}


.signUpInput	{font-size:1.2rem; padding:10px 20px; border-radius:var(--rounded); min-width:15ch; width:90%; max-width:45ch}
#formErrorMessage	{width:fit-content; height:0; transition-property:height; transition-duration:750ms; margin-top:2rem;}
.errorText		{padding:1rem; max-width:350px; width:fit-content; background-color:var(--mainOrange); border-radius:var(--rounded);
					> div:nth-child(1)	{font-size:20px; font-weight:800; color:#ffffff; margin-bottom:0rem;}
					> div:nth-child(2)	{color:#ffffff;
						> ul {margin-top:5px}
					}
}
.button			{font-size:1.2rem; font-weight:800; padding:10px 20px; border-radius:25px; border:0px;
					cursor:pointer;
}
.pink			{background-color:var(--mainFuchsia); color:#ffffff;
					transition-property:background-color,color; transition-duration:400ms;
}
.pink:hover		{background-color:var(--mainBlue); color:var(--mainPurple)}
p.intro			{font-weight:500; color:var(--mainBlack); line-height:180%; font-size:clamp(1.2rem, 8vw, 1.5rem); margin-bottom:5px}

#leftContent	{background-color:#ffffff; padding:1rem; display:inline-flex; flex-direction:column; justify-content:flex-start; 
					
		.title	{font-size:clamp(3rem, 8vw, 4.5rem); font-weight:800; color:var(--mainPurple);}	
}


#cards	> div	{display:flex; flex-direction:row; gap:1rem; padding:0.5rem;justify-content:center; flex-wrap:wrap;}
#cards > div > div {background-color:#ffffff; padding:10px; width:150px; border-radius:25px;
				transition-property:width; transition-duration:1000ms; margin:5px 5px;
				display:flex; justify-content: center; align-items: center; border:0px solid red;
				
		> img {width:100%;}
}

#errorMessage	{transition-property:height; transition-duration:800ms}
#messageData	{transition-property:height; transition-duration:2s;}


#signUpSubmitButtonCase	{position:absolute; top:0px; opacity:100; z-index: 10;
							transition-property:opacity; transition-duration:250ms; 
}
#loadingImage		{position:absolute; top:0px; opacity:0; z-index:1;
				transition-property:opacity; transition-duration:375ms; transition-delay:150ms; }
.textProcessing		{color:var(--mainOrange); font-weight:bold; font-size:1.5rem; margin-bottom:5px; margin-top:-5px;}
#signUpFormBox		{opacity:1; transition-property:opacity; transition-duration:375ms; transition-delay:150ms;
						display:flex; flex-direction:column; justify-content:center; z-index:10;
}
#signUpPlans		{opacity:0; transition-property:opacity; transition-duration:500ms; transition-delay:250ms; color:#ffffff;
						display:none;
}


.bigSteps			{width:100%; color:#ffffff; margin-bottom:1.2rem; display:flex; flex-direction:column; gap:1rem;
						> div:nth-child(1)	{font-size:clamp(1.5rem, 8vw, 2rem); width:100%; border-bottom:2px solid var(--mainPurpleLight); padding-bottom:1rem}
						> div:nth-child(2)	{font-size:clamp(1rem, 8vw, 1.2rem)}
}


.best				{background-color:var(--mainBlue); font-weight:bold; border-radius:25px;}
.best2				{background-color:var(--mainPurpleLight); font-weight:bold; border-radius:25px;}
.leftBest			{border-top-left-radius:25px; border-bottom-left-radius: 25px}
.rightBest			{border-top-right-radius:25px; border-bottom-right-radius: 25px}
th 					{padding:5px}
th > span:nth-child(2) {display:none}
tr.billing td > span:nth-child(2) {display:none}
th > span:nth-child(1) {display:block}
tr.billing td > span:nth-child(1) {display:block}
@media (max-width:450px){
	th > span:nth-child(2) {display:block}
	tr.billing td > span:nth-child(2) {display:block}
	
	th > span:nth-child(1) {display:none}
	tr.billing td > span:nth-child(1) {display:none}
	
}