/*
* field
*/

/* reset */

.field{
  --uiFieldPaddingTop: var(--fieldPaddingTop, 0px);
  --uiFieldPaddingRight: var(--fieldPaddingRight, 0px);
  --uiFieldPaddingBottom: var(--fieldPaddingBottom, 0px);
  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 0px);

  --uiFieldBorderColor: var(--fieldBorderColor, transpatent);
  --uiFieldBorderTop: var(--fieldBorderTop, 0px);
  --uiFieldBorderRight: var(--fieldBorderRight, 0px);
  --uiFieldBorderBottom: var(--fieldBorderBottom, 0px);
  --uiFieldBorderLeft: var(--fieldBorderLeft, 0px);

  --uiFieldBgColor: var(--fieldBgColor, transpatent);
  --uiFieldPlaceholderColor: var(--fieldPlaceholderColor, #767676);
  --uiFieldAnimationDuration: var(--fieldAnimationDuration, .3s);
  --uiFieldFonstSize: var(--fieldFontSize, 16px);

  position: relative;  
  display: block;

}

.field__input{
  width: 800px;
  box-sizing: border-box;
  background-color: var(--uiFieldBgColor);

  /* for iOS */
  appearance: none;
  border-radius: 0;

  border-style: solid;
  border-color: var(--uiFieldBorderColor);

  border-top-width: var(--uiFieldBorderTop);
  border-right-width: var(--uiFieldBorderRight);
  border-bottom-width: var(--uiFieldBorderBottom);
  border-left-width: var(--uiFieldBorderLeft);

  padding-top: var(--uiFieldPaddingTop);
  padding-right: var(--uiFieldPaddingRight);
  padding-bottom: var(--uiFieldPaddingBottom);
  padding-left: var(--uiFieldPaddingLeft);

  font-family: inherit;
  font-size: 100%;
  color: inherit;

}

.field__input::-webkit-input-placeholder{ 
  color: var(--uiFieldPlaceholderColor);
  opacity: 0;
}

.field__input::-moz-placeholder{ 
  color: var(--uiFieldPlaceholderColor);
  opacity: 0;
}

.field__input:focus{
  outline: none;  
}

.field__input:focus::-webkit-input-placeholder{ 
  transition: opacity var(--uiFieldAnimationDuration) ease-out var(--uiFieldAnimationDuration);
  opacity: 1;
}

.field__input:focus::-moz-placeholder{ 
  transition: opacity var(--uiFieldAnimationDuration) ease-out var(--uiFieldAnimationDuration);
  opacity: 1;
}

.field__label-wrap{
  height: 100%;
  display: block;
}

.field__label{
  position: absolute;
  top: calc(0px + var(--uiFieldPaddingTop) + var(--uiFieldBorderTop));
  left: calc(0px + var(--uiFieldPaddingLeft) + var(--uiFieldBorderLeft));

  pointer-events: none;
  font-size: 1.1em;

  transition: top var(--uiFieldAnimationDuration) cubic-bezier(0.9,-0.15, 0.1, 1.15), opacity var(--uiFieldAnimationDuration) ease-out;
  will-change: top, opacity;
}

.field__input:not(:placeholder-shown) ~ .field__label-wrap .field__label{
  opacity: 0;
  top: calc(0px + var(--uiFieldPaddingTop) + var(--uiFieldBorderTop));
}

.field__input:focus ~ .field__label-wrap .field__label{
  opacity: 1;
  top: calc(-1 * calc(var(--uiFieldPaddingTop) + var(--uiFieldBorderTop) + 15px));
}

/* type1 */

.field_type1{
  --uiFieldPaddingTop: var(--fieldPaddingTop, 15px);
  --uiFieldPaddingRight: var(--fieldPaddingRight, 15px);
  --uiFieldPaddingBottom: var(--fieldPaddingBottom, 15px);
  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 15px);

  --uiFieldBorderTop: var(--fieldBorderTop, 2px);
  --uiFieldBorderRight: var(--fieldBorderRight, 2px);
  --uiFieldBorderBottom: var(--fieldBorderBottom, 2px);
  --uiFieldBorderLeft: var(--fieldBorderLeft, 2px);  
}

.field_type1 .field__input{  
  transition: border-color var(--uiFieldAnimationDuration) ease-out;
  will-change: border-color;
}

.field_type1 .field__input:focus{
  --uiFieldBorderColor: var(--fieldBorderColorActive);
}

/* type 2 */

.field_type2{
  --uiFieldBorderBottom: var(--fieldBorderBottom, 1px);
  --uiFieldPaddingTop: var(--fieldPaddingTop, 5px);
  --uiFieldPaddingRight: var(--fieldPaddingRight, 15px);
  --uiFieldPaddingBottom: var(--fieldPaddingBottom, 10px);
  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 15px);  
}

.field_type2 .field__label-wrap:after{
  content: "";
  width: 0;
  height: var(--uiFieldBorderBottom);
  background-color: var(--fieldBorderColorActive);

  position: absolute;
  bottom: 0;
  left: 0;

  will-change: width;
  transition: width var(--uiFieldAnimationDuration) ease-out;
}

.field_type2 .field__input:focus ~ .field__label-wrap:after{
  width: 100%;
}

/* type 3 */

.field_type3{
  --uiFieldBorderBottom: var(--fieldBorderBottom, 2px);
  --uiFieldPaddingTop: var(--fieldPaddingTop, 5px);
  --uiFieldPaddingRight: var(--fieldPaddingRight, 15px);
  --uiFieldPaddingBottom: var(--fieldPaddingBottom, 10px);
  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 15px);  
}

.field_type3 .field__label-wrap:before, .field_type3 .field__label-wrap:after{
  content: "";
  width: 0;
  height: var(--uiFieldBorderBottom);
  background-color: var(--fieldBorderColorActive);

  position: absolute;
  bottom: 0;

  will-change: width;
  transition: width var(--uiFieldAnimationDuration) ease-out;
}

.field_type3 .field__label-wrap:before{
  left: 50%;
}

.field_type3 .field__label-wrap:after{
  right: 50%;
}

.field_type3 .field__input:focus ~ .field__label-wrap:before,
.field_type3 .field__input:focus ~ .field__label-wrap:after{
  width: 50%;
}

/* type 4 */

.field_type4{
  --uiFieldBorderBottom: var(--fieldBorderBottom, 2px);
  --uiFieldPaddingTop: var(--fieldPaddingTop, 15px);
  --uiFieldPaddingRight: var(--fieldPaddingRight, 15px);
  --uiFieldPaddingBottom: var(--fieldPaddingBottom, 10px);
  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 15px);  
}

.field_type4 .field__label-wrap:after{
  content: "";
  width: 100%;
  height: 0;
  box-sizing: border-box;
  
  border-width: var(--uiFieldBorderBottom);
  border-style: solid;
  border-color: var(--fieldBorderColorActive);
    
  position: absolute;
  left: 0;
  bottom: 0;
  
  opacity: 0;
  will-change: opacity, height;
  transition: height var(--uiFieldAnimationDuration, .2s) ease-out, opacity var(--uiFieldAnimationDuration, .2s) ease-out;
}

.field_type4 .field__input:focus ~ .field__label-wrap:after{
  height: 100%;
  opacity: 1;
}

/*
* demo styles
*/

.field{
  --fieldBorderColor: #757575;
  --fieldBorderColorActive: #D92819;
  --fieldPlaceholderColor: #757575;
  color: black;
}

.main_content textarea {
  margin-top: 14px;

  width: 800px;
  height: 70px;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 rgba(227, 227, 227, 0.01);
  border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;
  border-image: none;
  border-radius: 6px 6px 6px 6px;
  border-style: none solid solid none;
  border-width: medium 1px 1px medium;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
  color: #555555;
  font-family: "Roboto",Helvetica,Arial,sans-serif;
  font-size: 1em;
  line-height: 1.4em;
  padding: 5px 8px;
  transition: background-color 0.2s ease 0s;
}


.main_content textarea:focus {
    background: none repeat scroll 0 0 #FFFFFF;
    outline-width: 0;
}