.material.input{position:relative}.material.input label{position:absolute;top:45%;left:12px;transform:translateY(-50%);transition:.2s ease all;color:#777;pointer-events:none}.material.input label.active{top:8px;font-size:12px;color:#6200ea}.material.input input{width:100%;padding:20px 12px 6px;border:none;border-bottom:2px solid #ccc;background-color:#f5f5f5}.material.input input:focus{border-bottom:2px solid #6200ea;outline:none}.material .helper-text{font-size:12px;margin-top:4px;color:#666}.material.has-error label.active{color:#d32f2f}.material.has-error input{border-bottom:2px solid #d32f2f}.material.has-error .helper-text{color:#d32f2f}.material.select{position:relative;width:100%}.material.select label{position:absolute;top:50%;left:12px;transform:translateY(-50%);transition:.2s ease all;color:#777;pointer-events:none}.material.select label.active{top:8px;font-size:12px;color:#6200ea}.material.select .select-box{padding:20px 12px 6px;background:#f5f5f5;border:none;border-bottom:2px solid #ccc;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.material.select .select-box:focus{outline:none;border-bottom:2px solid #6200ea}.material.select .select-box .icon{width:20px;height:20px;fill:#666}.material.select .dropdown{position:absolute;left:0;width:100%;background:#fff;box-shadow:0 4px 8px #0003;border-radius:4px;z-index:100;max-height:200px;overflow-y:auto;list-style:none;padding:0;margin:4px 0 0}.material.select .dropdown.dropdown-above{bottom:100%;margin:0 0 4px}.material.select .dropdown.dropdown-below{top:100%}.material.select .dropdown li{padding:10px;cursor:pointer}.material.select .dropdown li:hover{background:#eee}