:root {
  --highlight:ease;
  --inner-transition:all 0.3s ease; 
  --input-transition:0.2s ease;
  --label-transition:0.2s ease all;

  --fazette-color:#adadad;
  --not-so-soft-text-color:#B1B1B1;
  --soft-text-color:#949494;
  --softer-text-color:#d6d6d6;
  --textcolor:#3C3C3C;
}

.nope{
  display:none;
}

.form {
  display: block; 
  width: 100%;
  min-height: 400px;

}
.form > h1 {
  font-size: calc(11px + 1vw);
  display: block;
  margin: 0 0 10% 0;
  color: var(--textcolor);
  font-weight: 300;
}

.group { 
  position: relative; 
  margin-bottom: 25px; 
}

input {
  font-size: 13px;
  box-sizing: border-box;
  height: 45px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  outline: none;
  border-bottom: 1px solid var(--fazette-color);
  color: var(--textcolor);
  background: rgba(0,0,0,0);
  opacity: 0.8;
  transition: var(--input-transition);
}

textarea{
  box-sizing: border-box;
  min-height: 10.5rem;
  height:11rem;
  max-height:40vh;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  outline: none;
  border-bottom: 1px solid var(--fazette-color);
  color: var(--textcolor);
  background: rgba(255, 255, 255, 0);
  transition: var(--input-transition);
  resize: vertical;
  cursor: auto;
  opacity:0.9;
  font-size: 13px;
  font-family: 'Roboto', sans-serif;;
  scrollbar-color: #414141 auto; /* thumb and track color */
  scrollbar-width: thin;
}



textarea::-webkit-scrollbar{
  width: 0.3em;
  cursor: pointer;
  }
  
  textarea::-webkit-scrollbar-button{
    display:none; 
  }
  
  textarea::-webkit-scrollbar-thumb{
    background-color:#bebebe;
    cursor: pointer;
  }
  textarea::-webkit-scrollbar-thumb:hover{
    background-color:#9c9c9c;
  }
  textarea::-webkit-scrollbar-thumb:active{
    background-color:#aaaaaa;
  }
  
  textarea::-webkit-scrollbar-track{
  background-color:transparent;
  cursor: pointer;
  }
  textarea::-webkit-scrollbar-track-piece{
  background-color:transparent;
  cursor: pointer;
  }
  
  textarea::-webkit-scrollbar-corner{
    background-color: transparent;
    width:8px;
    height:8px;
  }
  
  textarea::-webkit-resizer{
    background-color: transparent;
    /*
    background-image:url(img/icons/corner-resize-icon-adjust-setting-260nw-1902260464.png); 
    background-size: cover;
    */
    width:4px;
    height:4px;
  }
  
  
  
  
  

input:focus {
  outline: none;
  opacity: 1;
}
textarea:focus {
  outline: none;
  opacity: 1;
}



label {
  color: var(--soft-text-color); 
  font-size: 13px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 15px;
  opacity: 0.5;
  transition: var(--label-transition); 
  -moz-transition: var(--label-transition); 
  -webkit-transition: var(--label-transition);
}



.sent{
  -webkit-animation:inputHighlighter 0.3s var(--highlight);
  -moz-animation:inputHighlighter 0.3s var(--highlight);
  animation:inputHighlighter 0.3s var(--highlight);
}

/* active state */
.animated-input:focus ~ label, .animated-input:valid ~ label 		{
  top: -10px;
  font-size: 12px;
  color: var(--softer-text-color);
  opacity: 1;
}

.simple-input:focus ~ .dissapearing-label, .simple-input:valid ~ .dissapearing-label		{
  display:none;
}

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



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

.simple-input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s var(--highlight);
  -moz-animation:inputHighlighter 0.3s var(--highlight);
  animation:inputHighlighter 0.3s var(--highlight);
}
*/


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


/*

xy:focus
xy:active

or outline:none


*/

.send-btn {
  font-size: 11px;
  outline:none;

  transition: 0.2s ease;
  float:right;
}

.send-btn:hover {
  opacity:0.91;
  
  cursor: pointer;
}

.send-btn:active{
  border-right: 1px dotted #B1B1B1;
  border-bottom: 1px dotted #B1B1B1;
}