.group { 
    position:relative; 
    margin-bottom:45px; 
}
input, textarea 				{
    font-size:18px;
    padding:10px 0px 10px 5px;
    display:block;
    width:285px;
    border:none;
    border-bottom:1px solid #757575;
    border-radius: 0;
    background-color:transparent;
    font-family: inherit;
}
input:focus, textarea:focus { outline:none; }

span.error {
    display:none;     
    margin-top:6px;
    margin-left:6px;
}

input.hasError ~ span.error, textarea.hasError ~ span.error, select.hasError ~ span.error {
    display:block !important;    
}

input[type='date'], input[type='datetime-local'], input[type='time'] {
    color:transparent;
}

input[type='date']:focus, input[type='date'].hasValue, input[type='time']:focus, input[type='time'].hasValue, input[type='datetime-local']:focus, input[type='datetime-local'].hasValue {
    color:black;
}


/* LABEL ======================================= */
label 				 {
    color:#999; 
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}

input[type='file'] {
    width:100%;
}

input[type="checkbox" i]:disabled ~label
{
  font-size:10pt;
}

input[type='file'] ~ label, input[type='file']:valid ~ label, input[type='file']:empty ~ label {
    top: -12px !important;
    font-size:11pt !important;    
    height:18px;
    overflow:hidden;
}

/* active state */
input:focus ~ label, input:valid ~ label, input:disabled ~ label, select:focus ~ label, select.hasValue ~label, textarea:focus ~ label, textarea:valid ~ label, span.staticValue ~label {
    top: -12px;
    font-size:10pt;    
}

textarea:focus ~ label, textarea:valid ~ label {
    top:-20px; 
}

span.staticValue { 
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;
}

[required] ~ label:after {    
    content: '*';
    height: 2px;
    color: red;
}

input.empty ~ label, input:not([type='file']).empty:valid ~ label, textarea.empty ~ label {
    top:10px !important;
    font-size:14pt !important;
    font-weight:normal;
    color:#999 !important;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:290px; /*300px;*/ }

textarea ~ span.bar { width:100% !important; }

.bar:before, .bar:after 	{
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;    
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
.bar:before {
    left:50%;
}
.bar:after {
    right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after, select:focus ~ .bar:before, select:focus ~ .bar:after, textarea:focus ~ .bar:before, textarea:focus ~ .bar:after {
    width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
    position:absolute;
    height:60%; 
    width:100%; /*100px;*/ 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
}

/* active state */
input:focus ~ .highlight, select:focus ~ .highlight, textarea:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#015696; }
    to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#015696; }
    to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#015696; }
    to 	{ width:0; background:transparent; }
}


/* ==========  Select Field ========== */

/* Style Select Field */
select {
  font-family: inherit;
  background-color: transparent;
  width: 100%;  
  font-size:14pt;
  font-weight:normal;
  color: black;
  border: none;
  border-bottom: 1px solid #757575;
  border-radius: 0;
  padding:10px 10px 10px 5px;
}

/* Remove focus */
select:focus { outline: none }

.mdl-selectfield { width: 290px; }

.mdl-selectfield select, .mdl-selectfield-whiteArrow select {appearance: none; -moz-appearance:none; -webkit-appearance:none; }
.mdl-selectfield select::-ms-expand, .mdl-selectfield-whiteArrow select::-ms-expand { display: none; }

.mdl-selectfield, .mdl-selectfield-whiteArrow {
  /*font-family: 'Roboto','Helvetica','Arial',sans-serif;*/
  font-family: inherit;
  position: relative;
}

 .mdl-selectfield:after, .mdl-selectfield-whiteArrow:after {
     position: absolute;
        top: 1.2em;
        right: 0.5em;
        /* Styling the down arrow */
        width: 1px;
        height: 0;
        padding: 0;
        content: '';
        border-left: .25em solid transparent;
        border-right: .25em solid transparent;
        border-top: .375em solid #757575;
        pointer-events: none;
 }

.mdl-selectfield-whiteArrow:after {
     border-top: .375em solid white;
}

/*select ~ label:before, select[required] ~ label:before {
    content:'(Pick One)';            
    font-style:italic;
    position:relative;
    float:right;
    width:100px;
}

select:focus ~ label:before, select.hasValue ~ label:before {
    content:'';
}*/

 .btn, .btnLarge {
  position: relative;

  display: block;
  margin: 30px auto;
  padding: 0;

  overflow: hidden;

  border-width: 0;
  outline: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  
  transition: background-color .3s;
}

    .btn:disabled, .btn:disabled:hover, .btn:disabled:before, .btnLarge:disabled, .btnLarge:disabled:hover, .btnLarge:disabled:before {
        background-color: gray !important;
    }

    .btn > *, .btnLarge > * {
        position: relative;
    }

    .btn span, .btnLarge span {
        display: block;
        padding: 12px 24px;
        font-size: 13pt;
    }

    .btn:before, .btnLarge:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 0;
        padding-top: 0;
        border-radius: 100%;
        background-color: rgba(236, 240, 241, .3);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .btn:active:before, .btnLarge:active:before {
        width: 120%;
        padding-top: 120%;
        transition: width .2s ease-out, padding-top .2s ease-out;
    }

/* Styles, not important */

    .btn.green, .btnLarge.green {
        background-color: #74B23B;
    }

        .btn.green:hover, .btn.green:focus, .btnLarge.green:hover, .btnLarge.green:focus {
            background-color: #9EC976;
        }

.btn.orange {
  background-color: #f7911d;
}

.btn.orange:hover, .btn.orange:focus {
  background-color: #d35400;
}

.btn.red {
  background-color: #e74c3c;
}

.btn.red:hover, .btn.red:focus {
  background-color: #c0392b;
}


/* ==========  Checkboxes ========== */
input[type="checkbox"] {
  display: none;
}
label {
  cursor: pointer;
}
input[type="checkbox"] + label:before {
  border: 1px solid silver;
  border-radius:4px;
  content: "\00a0";
  display: inline-block;
  font: 20px/1em sans-serif;
  font-weight: bold;
  height: 20px;
  margin: -.15em .25em 0 0;
  padding:0;
  vertical-align: top;
  width: 20px;
}
input[type="checkbox"]:checked + label:before, input[type="checkbox"]:checked:disabled + label:before {
  background: #fff;
  color: green;
  content: "\2713";
  text-align: center;
}
input[type="checkbox"]:checked:disabled + label:before { color: gray; }

input[type='checkbox'] + label { position:relative;pointer-events:auto;top:-3px; }

.material-icons { vertical-align:bottom !important; }
.material-icons.md-dark { color: black !important; }
.material-icons.md-light { color: white !important; }
.material-icons.md-gray { color: gray !important; }
.material-icons.md-green { color: green !important; }
.material-icons.md-blue { color: #0068AC !important; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-small { font-size: 11pt !important; }
.material-icons.md-orange { color: #f7911d !important;}
.material-icons.md-rpGreen { color: #74B23B !important;}
.material-icons.md-red { color: red !important;}

.iconSelect, .iconSelect-selected {
    padding:2px;cursor:pointer;
}

.iconSelect, .iconSelect-selected {
    border:1px solid silver;
}

.iconSelect-selected {
    border:2px solid blue;padding:1px;    
}

@media only screen and (max-width: 767px)  
{
    label, [required] ~ label, span.error, input:valid.empty ~ label { font-size:12pt !important; }
    input:focus ~ label, input:valid ~ label, select:focus ~ label, select.hasValue ~ label, textarea:focus ~ label, textarea:valid ~ label, span.staticValue ~ label {
        font-size:10pt !important;
    }

    .mdl-selectfield:after, .mdl-selectfield-whiteArrow:after {
     position: absolute;
        top: 2.1em;    
    }

    .mdl-selectfield label { margin-top:18px !important; }

    select { padding-top:28px; }
}

@media only screen and (max-width:400px) {

    input, textarea, .mdl-selectfield { width:260px; }
    .bar { width:265px !important; }
    label, [required] ~ label, span.error, input:valid.empty ~ label { font-size:11pt !important; }
    input:focus ~ label, input:valid ~ label, select:focus ~ label, select.hasValue ~ label, textarea:focus ~ label, textarea:valid ~ label, span.staticValue ~ label {
        font-size:9pt !important;
    }
}

@media only screen and (max-width:320px) {

    input, textarea, .mdl-selectfield { width:210px; }
    .bar { width:215px !important; }
    label, [required] ~ label, span.error, input:valid.empty ~ label { font-size:10pt !important; }
    input:focus ~ label, input:valid ~ label, select:focus ~ label, select.hasValue ~ label, textarea:focus ~ label, textarea:valid ~ label, span.staticValue ~ label {
        font-size:9pt !important;
    }
}