input:required:invalid, input:focus:invalid {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC);
	background-position: right top;
	background-repeat: no-repeat;
	box-shadow: none;
}
input:required:valid {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=);
	background-position: right top;
	background-repeat: no-repeat;
}
input[type=text] {
	
  max-width:380px;
	font-size: var(--small-font-size);  
	color: var(--main-text-color);
	box-sizing:border-box;
	transition: width 0.4s ease-in-out;
	background-color:rgb(196, 221, 219);
	padding-left: 40px;
	border-left-style:inset;
	border-left-color:rgba(97, 94, 98, 0.83);
	border-left-width:2px;
	border-bottom-style:inset;
	border-bottom-color:rgba(97, 94, 98, 0.83);
	border-bottom-width:2px;
	border-top-style:inset;
	border-top-color:rgba(97, 94, 98, 0.83);
	border-top-width: 2px;
	border-radius:4px;
	padding: 12px 0px 0px 3px;
	transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  background-color: #7ff7f7c4;;
}

input[type=email] {
  width: 100%;
  font-size: var(--normal-font-size);  
  color: var(--main-text-color);
  box-sizing:border-box;
  transition: width 0.4s ease-in-out;
  background-color:rgb(6, 39, 37);
  padding-left: 40px;
  border-left-style:groove;
  border-left-color:rgba(97, 94, 98, 0.83);
  border-left-width:4px;
  border-bottom-style:inset;
  border-bottom-color:rgba(97, 94, 98, 0.83);
  border-bottom-width:4px;
  border-top-style:inset;
  border-top-color:rgba(233, 227, 241, 0.73);
  border-top-width: 2px;
  border-radius:4px;
  padding: 12px 20px 12px 40px;
  transition: width 0.4s ease-in-out;

}



input[type=email]:focus {
background-color: var(--background-color);
}


input[type=date] {
  width: 100%;
  font-size: var(--normal-font-size);  
  color: var(--main-text-color);
  box-sizing:border-box;
  transition: width 0.4s ease-in-out;
  background-color:rgb(6, 39, 37);
  padding-left: 40px;
  border-left-style:groove;
  border-left-color:rgba(97, 94, 98, 0.83);
  border-left-width:4px;
  border-bottom-style:inset;
  border-bottom-color:rgba(97, 94, 98, 0.83);
  border-bottom-width:4px;
  border-top-style:inset;
  border-top-color:rgba(233, 227, 241, 0.73);
  border-top-width: 2px;
  border-radius:4px;
  padding: 12px 20px 12px 40px;
  transition: width 0.4s ease-in-out;
}
input[type=date]:focus {
background-color: var(--background-color);
}


input[type=password] {
	width: 100%;
	font-size: var(--normal-font-size);  
	color: var(--main-text-color);
	box-sizing:border-box;
	transition: width 0.4s ease-in-out;
	background-color:rgb(6, 39, 37);
	padding-left: 40px;
	border-left-style:groove;
	border-left-color:rgba(97, 94, 98, 0.83);
	border-left-width:4px;
	border-bottom-style:inset;
	border-bottom-color:rgba(97, 94, 98, 0.83);
	border-bottom-width:4px;
	border-top-style:inset;
	border-top-color:rgba(233, 227, 241, 0.73);
	border-top-width: 2px;
	border-radius:4px;
	padding: 12px 20px 12px 40px;
	transition: width 0.4s ease-in-out;
}
input[type=password]:focus {
background-color: var(--background-color);
}




.hidden{
display:none;
visibility:hidden;

}

textarea {
  width: 100%;
  height: 150px;
  font-size: var(--normal-font-size);  
  padding: 12px 20px;
  box-sizing: border-box;
  border: 1px inset #56dfdc;
  border-radius: var(--border-radius);
  background-color:rgb(180, 244, 234);
  resize: none;
}
textarea:focus{
  background-color:rgb(247, 247, 247);
}