.group { 
  	position:relative; 
}

input {
  	font-size: 1rem;
  	padding:22px 10px 10px 10px;
  	display:block;
  	border:none;
  	border:1px solid var(--control-border-color);
	border-radius:3px;
	width:100%;
}

input:focus { 
	outline:none;
	border-color:var(--control-focus-border-color);
}

/* LABEL ======================================= */
label {
  	color:var(--grey-forecolor-6); 
  	font-size: 1rem;
  	font-weight:normal;
  	position:absolute;
  	pointer-events:none;
  	left:10px;
  	top:15px;
  	transition:0.2s ease all; 
  	-moz-transition:0.2s ease all; 
  	-webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label {
  	top:2px;
  	font-size:.9rem;
  	color:var(--grey-forecolor-6);
}

/* BOTTOM BARS ================================= */
/*.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}*/

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  	width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight-input {
  	position:absolute;
  	height:60%; 
  	width:100px; 
  	top:25%; 
  	left:0;
  	pointer-events:none;
  	opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  	-webkit-animation:inputHighlighter 0.3s ease;
  	-moz-animation:inputHighlighter 0.3s ease;
  	animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

/* select starting stylings ------------------------------*/
.select {
  /*font-family:
    'Roboto','Helvetica','Arial',sans-serif;
	position: relative;
	width: 350px;*/
	
	position:relative; 
}

.select-text {
	font-size: 1rem;
  	padding:22px 10px 10px 10px;
  	display:block;
  	border:none;
  	border:1px solid var(--control-border-color);
	border-radius:3px;
	width:100%;
}

/* Remove focus */
.select-text:focus {
	outline: none;
	border-color:var(--control-focus-border-color);
}

/* Use custom arrow */
.select .select-text {
	appearance: none;
	-webkit-appearance:none
}

.select:after {
	position: absolute;
	top: 26px;
    right: 15px;
	/* Styling the down arrow */
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid var(--control-dropdown-arrow-color);
	pointer-events: none;
}

/* LABEL ======================================= */
.select-label {
	/*color: rgba(0,0,0, 0.26);
	font-size: 18px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 0;
	top: 10px;
	transition: 0.2s ease all;*/
	color:var(--grey-forecolor-6); 
  	font-size: 1rem;
  	font-weight:normal;
  	position:absolute;
  	pointer-events:none;
  	left:10px;
  	top:15px;
  	transition:0.2s ease all; 
  	-moz-transition:0.2s ease all; 
  	-webkit-transition:0.2s ease all;
}

/* active state */
.select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
	/*color: #2F80ED;
	top: -20px;
	transition: 0.2s ease all;
	font-size: 14px;*/
	top:2px;
  	font-size:.9rem;
  	color:var(--grey-forecolor-6);
}

/* BOTTOM BARS ================================= */
/*.select-bar {
	position: relative;
	display: block;
	width: 350px;
}

.select-bar:before, .select-bar:after {
	content: '';
	height: 2px;
	width: 0;
	bottom: 1px;
	position: absolute;
	background: #2F80ED;
	transition: 0.2s ease all;
}

.select-bar:before {
	left: 50%;
}

.select-bar:after {
	right: 50%;
}*/

/* active state */
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
	width: 50%;
}

/* HIGHLIGHTER ================================== */
.select-highlight {
	/*position: absolute;
	height: 60%;
	width: 100px;
	top: 25%;
	left: 0;
	pointer-events: none;
	opacity: 0.5;*/
	position:absolute;
  	height:60%; 
  	width:100px; 
  	top:25%; 
  	left:0;
  	pointer-events:none;
  	opacity:0.5;
}

textarea {
  	font-size: 1rem;
  	padding:22px 10px 10px 10px;
  	display:block;
  	border:none;
  	border:1px solid var(--control-border-color);
	border-radius:3px;
	width:100%;
}
textarea:focus { 
	outline:none;
	border-color:var(--control-focus-border-color);
}

/* LABEL ======================================= */
/*label {
  	color:var(--grey-forecolor-6); 
  	font-size: 1rem;
  	font-weight:normal;
  	position:absolute;
  	pointer-events:none;
  	left:10px;
  	top:15px;
  	transition:0.2s ease all; 
  	-moz-transition:0.2s ease all; 
  	-webkit-transition:0.2s ease all;
}*/

/* active state */
textarea:focus ~ label, textarea:valid ~ label {
  	top:2px;
  	font-size:.9rem;
  	color:var(--grey-forecolor-6);
}

/* BOTTOM BARS ================================= */
/*.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}*/

/* active state */
textarea:focus ~ .bar:before, textarea:focus ~ .bar:after {
  	width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight-textarea {
  	position:absolute;
  	height:60%; 
  	width:100px; 
  	top:25%; 
  	left:0;
  	pointer-events:none;
  	opacity:0.5;
}

/* active state */
textarea:focus ~ .highlight {
  	-webkit-animation:textareaHighlighter 0.3s ease;
  	-moz-animation:textareaHighlighter 0.3s ease;
  	animation:textareaHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes textareaHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

@-moz-keyframes textareaHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

@keyframes textareaHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}