/* ------------------------------ */
/* GENERAL */
/* ------------------------------ */
	
	.helper {
		display: flex;
		flex-direction: column;
	}	

	.fullname {
		font-weight: 700;
	}

	.mark {
		text-decoration: underline;
	}
	.name-preview {
		background-color: var(--n96);
		
		/**/
		display: flex;
		flex-direction: column;
		column-gap: var(--sp400);
		row-gap: var(--sp400);	
		justify-content: center;
		align-items: center;
		

		padding: 8rem 8rem;


	}

	.name-preview .preview-avatar,
	.name-preview .preview-similar {
		display: flex;
		flex-direction: column;
		column-gap: var(--sp100);
		row-gap: var(--sp100);
		justify-content: center;
		align-items: center;				
	}

	/* Avatar ------------------------------------------------------------ */


	#floatingAvatar {

		position: absolute !important;
		bottom: 5rem;
		right: 5rem;
		z-index: 999999999;		

		animation-name: showAvatar;
		animation-duration: 0.5s;
		animation-iteration-count: 1;

		display: none;

		width: 12rem;
		height: 12rem;		
	}	

	@keyframes showAvatar {
		0%   {
			transform: scale(0.5);
			opacity: 0;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
	@keyframes hideAvatar {
		0%   {
			transform: scale(1);
			opacity: 1;
		}
		100% {
			transform: scale(0.5);
			opacity: 0;			
		}
	}	


	.avatar.floating {		
	
		width: 100%;
		height: 100%;

		box-shadow: var(--elevation-big);

		font-size: 2.8rem;

	}

	.name-preview .avatar {

		width: 20rem;
		height: 20rem;

		font-size: 4.8rem;
		line-height: 6.4rem;

		text-align: center;

	}	

	.preview-avatar h1{
		text-align: center;
	}

/* ------------------------------ */
/* ADAVNCED SETTINGS */
/* ------------------------------ */

	.form-wrapper.name .input-wrapper {
		max-width: 40rem;
	}
	#digits .input-wrapper {
		max-width: 40rem;
	}	

	.upload-wrapper {
		display: flex;
		flex-direction: row;	
		column-gap: var(--sp200);
		row-gap: var(--sp100);
		justify-content: flex-start !important;
		flex-wrap: wrap;
		align-items: center;
	}

	.pill-wrapper {
		position: relative !important;		
		background-color: ;		
		flex-wrap: wrap !important;
		margin: 0 !important;
		left: 0 !important;
		top: 0 !important;
		max-width: 100% !important;
		z-index: 0 !important;
	}

	.preview-similar .pill-wrapper {			
		justify-content: center;

	}	
	.preview-similar .pill-wrapper .pill {
		background-color: var(--n90);
	}

	.preview-similar .pill-wrapper .pill.invalid {
		background-color: var(--r96) !important;
	}



	#sectionAdvancedSettings .column {
		display: flex;
		flex-direction: column;	
		row-gap: var(--sp200);
		column-gap: var(--sp200);;
		width: 100%;
	}
	#sectionAdvancedSettings .form-wrapper {
		display: flex;
		flex-direction: row;	
		column-gap: var(--sp200);	
		row-gap: var(--sp200);
		align-content: stretch;
		align-items: stretch;
	}
	#sectionAdvancedSettings .form-wrapper .section {
		width: 100%;
		display: flex;
		flex-direction: column;
		row-gap: var(--sp100);
	}

	

/* ------------------------------------------------------------ */
/* ------------------------------ */
/* RESPONSIVE */
/* ------------------------------ */
/* < 640 ------------------------------------------------------------ */
	@media screen and (max-width: 640px) {

		#sectionAdvancedSettings .column { 
			flex-direction: column;	
		}
		#sectionAdvancedSettings .form-wrapper {
			flex-direction: column;		
		}							

	}
/* 640 ------------------------------------------------------------ */
	@media (max-width:767px) and (min-width:640px) {	


		#sectionAdvancedSettings .column { 
			flex-direction: column;	
		}
		#sectionAdvancedSettings .form-wrapper {
			flex-direction: column;					
		}


	}
/* 768 ------------------------------------------------------------ */
	@media (max-width:1023px) and (min-width:768px) {
		
		#sectionAdvancedSettings .column { 
			flex-direction: column;	
		}
		#sectionAdvancedSettings .form-wrapper {
			flex-direction: column;					
		}
								
	}
/* 1024 ------------------------------------------------------------ */
	@media (max-width:1279px) and (min-width:1024px) {

		form {
			flex-wrap: nowrap !important;
		}

	}	
/* 1280 ------------------------------------------------------------ */
	@media (max-width:1919px) and (min-width:1280px) {



	}
/* 1440 ------------------------------------------------------------ */
	@media (max-width:1919px) and (min-width:1440px) {



	}	
/* 1920 ------------------------------------------------------------ */
	@media (max-width:2559px) and (min-width:1920px) {



	}
/* > 2560 ------------------------------------------------------------ */
	@media screen and (min-width: 2560px) {



	}