:root{--surface-color:#fff}.floating-label-input{position:relative;background:var(--surface-color)}.floating-label-input input:-webkit-autofill,.floating-label-input input:-webkit-autofill:active,.floating-label-input input:-webkit-autofill:focus,.floating-label-input input:-webkit-autofill:hover{-webkit-background-clip:text}.input-text{width:100%;background:var(--surface-color);border:1px solid #c2c2c2;border-radius:5px}.input-text::placeholder{opacity:0}.floating-label-input>label{position:absolute;top:50%;left:1em;color:#999;background:var(--surface-color);transform:translateY(-50%);cursor:text;transition:all .1s ease-out}.input-text:focus+label,.input-text:not(:placeholder-shown)+label{padding:0 .5em;top:0;left:.8em;font-size:.8em;font-weight:500}.input-text:focus+label{color:#6e6e73}.floating-label-select{position:relative;background:var(--surface-color)}.select-box{width:100%;background:var(--surface-color);border:1px solid #c2c2c2;border-radius:5px;appearance:none;color:#999}.select-box:focus{outline:none}.floating-label-select.active select,.select-box:focus{color:#000}.floating-label-select>label{position:absolute;top:50%;left:1em;color:#999;background:var(--surface-color);transform:translateY(-50%);pointer-events:none;transition:all .2s ease-out;opacity:0}.floating-label-select.active>label{opacity:1;padding:0 .5em;top:0;left:.8em;font-size:.8em;font-weight:500}.select-box:focus+label{color:#6e6e73}