body {
    background: #ECEFF4;
    font-family: "Open Sans","Lucida Sans Unicode","Lucida Grande",sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.fragment-error {
    background: #ff5252 !important;
    padding: 20px;
    color: #fff;
}




/* General */
.Input {display: flex; padding: 20px;}
/* Input */
    .Input input{ height: 100%; -webkit-appearance: none; margin: 0; outline: none; resize: vertical;  font-size:0.9em; box-sizing: border-box;  padding:10px 15px; width: 100%; border-radius:0px 5px 5px 0px; border:1px solid #ddd;}
    .Input input:read-only{color: #aaa;}
/* Label */
    .Input input:last-child{ order: 2; border-radius: 5px; }
    .Input label{ white-space: nowrap; order: -1; border: 1px solid #ddd; border-right: none; border-radius: 5px 0px 0px 5px; text-align: right; display: block;  font-size:0.7em; padding: 13px 15px;  padding-right: 1.5em;  background: rgb(247, 247, 247);}
/* Focus */
    .Input input:focus{ border-top-color: #000;border-right-color: #000;border-bottom-color: #000;}
    .Input input:last-child:focus{ border-left-color: #000;}
    .Input input:focus + label{ border-color: #000;}
/* Read Only */
    .Input input:read-only{color: #888; background-size: 12px auto; background-position:right 20px top 15px; background-image: url(./lock.svg); background-repeat: no-repeat;}
/* Zoom iOS */
    @supports (-webkit-touch-callout: none) { .Input input{ font-size: 16px; } }


.Input {
  display: block;
}