.form-group {
	position: relative; 
	margin-bottom:0;
	--label-background-height: 12.5px;
}

.form-group--mail{
	border-top: 1px solid #ccc;
}

.form-group--unavailable input{
	background-color: #D9DDE0;
    user-select: unset;
    cursor: default;
}

.form-group--unavailable label{
	background-image: linear-gradient(0deg, #D9DDE0 var(--label-background-height), transparent 50%);
}

.form-group--margin-10{
	margin-top:10px !important;
	margin-bottom:10px !important;
}

.signin-form__input-group{
	position:relative;
}

.form-group__label{
	top:-20px;
	left:1%;
	margin: 10px 0 0 5px;
	font-size:15px;
	position:absolute;
	transition: all .2s;
	transform:translateY(0px);
	background-image: linear-gradient(0deg, white var(--label-background-height), transparent 50%);
}

 .form-group__label--textarea{
	top:-21px;
}
/* 
 input:placeholder-shown ~ .form-group__label,
 textarea:placeholder-shown ~ .form-group__label,
 select option:first-child:checked ~ .form-group__label{
	opacity:0;
	visibility: hidden;
	transform:translateY(24px);
   
}  */



.form-group__invalid-error-icon{
	position:absolute;
	top:23px;
	left:90%;
	color:#cc0000;
	word-break: break-all;
}

.form-group__valid{
	/* position:absolute; 
	bottom:-3px;
	left:27px; */
	font-size:12px;
	color:#66db23;
	display:block;
}


.form-group__valid--f-14{
	font-size:12px;
	color:#66db23;
	display:block;
}

.form-group__invalid-error--f-14{
	font-size:12px;
	color:#cc0000;
	display:block;
}

.form-group__invalid-error{
	font-size:12px;
	color:#cc0000;
	display:block;
}

.qr-form{
	max-width:500px;
	margin: 0 auto;
	float:none;
}

.qr__image-container{
	width:50%;
	text-align: center;
	margin:0 auto;
}

.qr-code__input{
	margin: 0px 0px 0px 0px !important; 
}

.form-checkbox-group input{
	box-shadow: none;
}
.form-checkbox__input{
	display:none;
}

.form-checkbox__input:checked + .form-checkbox__button--editprofile::after{
	opacity:1;
}

.form-checkbox__button--editprofile{
	width:15px;
	height:15px;
	border-radius: 50%;
	border: solid 1.5px #ef7d00;
	display:inline-block;
	position: absolute;
	top:10px;
	left:5px;
}


.form-checkbox-button::after{
	content:"";
	position: absolute;
	top:50%;
    left:50%;
    transform:translate(-50%,-50%);
	width:6px;
	height:6px;
	border-radius: 50%;
	background-color: #ef7d00;
	display:block;
	opacity:0;
}

/*TODO:refactor form-signin*/

.form-signin textarea{
	margin: 10px 0px 10px 0px; 
	border-radius: 6px;
}


.form-group__input-field{
	font-size: 14px;
	font-weight: 500;
	border-width: 1px;
	transition: border .2s;
	box-shadow:0 0px 1px 0 rgba(0, 0, 0, 0.28) ;
	border-radius: 4px;
	border: 1px solid #ccc;
	background-color: white;
	width: 100%;
    height: 48px;
	padding: 6px 12px;
	display:block;
}

.form-group__input-field:focus{
	outline:none;
	border: 2px solid #ef7d00;
	color: #333;
}

.form-group__input-field--xxxlg{
	height:36px;
}

/*EXPERMINTAL*/
.form-group__input-field:placeholder-shown ~ .form-group__label
/* .form-group__input-field:first-child ~ .form-group__label */
{
   opacity:0;
   visibility: hidden;
   transform:translateY(24px);
  
}