.pure-material-textfield-outlined {
     position: relative;
     display: inline-block;
     padding-top: 6px;
     font-size: 16px;
     line-height: 1.5;
     overflow: hidden;
     width: 100%;
}
/* Input, Textarea */
 .pure-material-textfield-outlined > input {
     box-sizing: border-box;
     margin: 0;
    /* Safari */
     padding: 5px;
     width: 100%;
     height: inherit;
     color: rgba(0, 0, 0, 0.87);
     box-shadow: none;
    /* Firefox */
     font-family: inherit;
     font-size: 14px;
     line-height: inherit;
     caret-color: rgb(33, 150, 243);
     transition: border 0.2s, box-shadow 0.2s;
     border: 1px solid #e2e2e2;
}
/* Span */
 .pure-material-textfield-outlined > span.material-span {
     position: absolute;
     top: 16px;
     left: 15px;
     border-color: rgba(0, 0, 0, 0.6);
     max-height: 100%;
     color: #adbac9;
     font-size: 14px;
     line-height: 14px;
     cursor: text;
     transition: color 0.2s, font-size 0.2s, line-height 0.2s,top 0.2s;
}
/* Focus */
 .pure-material-textfield-outlined > input:focus {
     border-color: rgb(33, 150, 243);
     border: 0px;
     -webkit-box-shadow: inset 0px 0px 0px 1px rgb(33, 150, 243);
     -moz-box-shadow: inset 0px 0px 0px 1px rgb(33, 150, 243);
     box-shadow: inset 0px 0px 0px 1px rgb(33, 150, 243);
     outline: none;
     background: transparent;
}
 .pure-material-textfield-outlined > input:valid {
     background: transparent;
}
 .reg-white-container .pure-material-textfield-outlined > input:disabled {
     background: transparent;
}
 .pure-material-textfield-outlined input:focus ~ span.material-span {
     color: rgb(33, 150, 243);
     font-size: 75%;
     top: -1px;
     background: #fff;
     padding: 0px 2px;
     left: 5px;
}
 .reg-white-container .pure-material-textfield-outlined input:disabled ~ span.material-span {
     color: rgb(33, 150, 243);
     font-size: 75%;
     top: -1px;
     background: #fff;
     padding: 0px 2px;
     left: 5px;
}
 .pure-material-textfield-outlined > input:not(:placeholder-shown) ~ span.material-span {
     font-size: 75%;
     top: -1px;
     background: #fff;
     padding: 0px 2px;
     left: 5px;
     color: rgba(0,0,0,0.6);
}
/* Faster transition in Safari for less noticable fractional font-size issue */
 @media not all and (min-resolution:.001dpcm) {
     @supports (-webkit-appearance: none) {
         .pure-material-textfield-outlined > input, .pure-material-textfield-outlined > input ~ span.material-span, .pure-material-textfield-outlined > input ~ span.material-span::before, .pure-material-textfield-outlined > input ~ span.material-span::after {
             transition-duration: 0.1s;
        }
    }
}
/* select starting stylings ------------------------------*/
 .material-select {
     width: 100%;
     position: relative;
     padding-top: 6px;
}
 .material-select .select-text {
     position: relative;
     font-family: inherit;
     font-size: 14px;
     padding: 5px;
     width: 100%;
     line-height: 1.5;
     border: 1px solid #e2e2e2;
}
/* Remove focus */
/* Use custom arrow */
 .material-select .select-text {
     appearance: none;
     -webkit-appearance: none 
}
 .material-select:after {
     position: absolute;
     top: 22px;
     right: 10px;
    /* Styling the down arrow */
     width: 0;
     height: 0;
     padding: 0;
     content: '';
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     border-top: 6px solid rgba(0, 0, 0, 0.12);
     pointer-events: none;
}
/* LABEL ======================================= */
 .material-select .select-label {
     color: #adbac9;
     font-size: 14px;
     font-weight: normal;
     position: absolute;
     pointer-events: none;
     left: 14px;
     top: 10px;
     transition: 0.2s ease all;
     padding: 3px;
}
/* active state */
 .material-select .select-text:focus {
     border-color: rgb(33, 150, 243);
     border: none;
     -webkit-box-shadow: inset 0px 0px 0px 1px rgb(33, 150, 243);
     -moz-box-shadow: inset 0px 0px 0px 1px rgb(33, 150, 243);
     box-shadow: inset 0px 0px 0px 1px rgb(33, 150, 243);
     outline: none;
     background: transparent !important;
}
 .material-select .select-text:valid {
     background: transparent !important;
}
 .material-select .select-text:focus ~ .select-label, .material-select .select-text:valid ~ .select-label {
     color: #2F80ED;
     top: -5px;
     left: 10px;
     transition: 0.2s ease all;
     font-size: 75%;
     line-height: 15px;
     background: #fff !important;
}
 .material-select .select-text:valid ~ .select-label {
     color: rgba(0, 0, 0, 0.6);
     font-size: 75%;
     line-height: 15px;
}
/* HIGHLIGHTER ================================== */
 .material-select .select-highlight {
     position: absolute;
     height: 60%;
     width: 100px;
     top: 25%;
     left: 0;
     pointer-events: none;
     opacity: 0.5;
}