/* Clean Form Elements | MIT License */

/*** UNIVERSAL STYLES ***/
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #888888;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #888888;
}

input,
textarea,
select,
button,
.button {
  width: auto;
  height: auto; 
}

/* all controls except file upload, range, and inputs without a type */
[type="button"],
[type="checkbox"],
[type="color"],
[type="date"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="radio"],
[type="reset"],
[type="search"],
[type="submit"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
textarea,
select,
button,
.button {
  box-sizing: border-box;
  background-clip: padding-box;
  outline: 0;
  vertical-align: central;
  border: 1px solid #ccc;
  padding: 4px;
  border-radius: 4px;
  text-decoration: none;
}

/* non-button controls */
textarea,
select,
[type="color"],
[type="date"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"] {
  background-color: white;
  color: black;
  text-align: left;
  box-shadow: inset 0 1px 3px #ddd;
}

/* size corrections */
select,
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
  padding: 3px 4px;
}

[type="color"] {
  padding: 1px 4px;
  min-width: 2em;
  min-width: calc(1.25em + 10px);
  height: 2em;
  height: calc(1.25em + 10px);
}

[size="0"],
[size="1"] {
  height: 1.8em;
}

/* style corrections */
[type="radio"],
[type="checkbox"] {
  box-shadow: none;
  border-color: transparent;
}

select {
  background-color: white;
}

[type="search"]::-webkit-search-decoration {
  display: none;
}

/* button styles */
button,
.button,
[type="reset"],
[type="submit"],
[type="button"] {
  -webkit-appearance: none;
  background-image: linear-gradient(#ffffff, #dddddd);
  color: #333333;
  border-color: #dddddd #bbbbbb #999999;
  cursor: pointer;
  padding: 4px 10px;
  text-shadow: white 0 1px 1px;
  overflow: visible;
}

.button {
	font-family: Arial, "Lucida Grande", sans-serif;
	font-size: 0.83rem;
}
/* Prevent Firefox from increasing the size of buttons */
button::-moz-focus-inner,
.button::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}


/*** STATES ***/

/* HOVER */
/* darken buttons a bit on hover */
button:hover,
.button:hover,
[type="reset"]:hover,
[type="submit"]:hover,
[type="button"]:hover {
  background-image: linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
}


/* FOCUS */
/* highlight the selected control */
[type="button"]:focus,
[type="checkbox"]:focus,
[type="color"]:focus,
[type="date"]:focus,
[type="datetime-local"]:focus,
[type="email"]:focus,
[type="month"]:focus,
[type="number"]:focus,
[type="password"]:focus,
[type="radio"]:focus,
[type="reset"]:focus,
[type="search"]:focus,
[type="submit"]:focus,
[type="tel"]:focus,
[type="text"]:focus,
[type="time"]:focus,
[type="url"]:focus,
[type="week"]:focus,
button:focus,
a.button:focus,
select:focus,
textarea:focus {
  box-shadow: #0066ff 0 0 5px 0; /* blue highlight */
}

/* focus on non-button controls that have a natural border */
[type="text"]:focus,
[type="password"]:focus,
[type="email"]:focus,
[type="url"]:focus,
[type="date"]:focus,
[type="month"]:focus,
[type="time"]:focus,
[type="datetime-local"]:focus,
[type="week"]:focus,
[type="number"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="color"]:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: #129FEA; /* blue border */
}

/* focus for controls that don't have a natural border */
[type="radio"]:focus,
[type="checkbox"]:focus {
  box-shadow: none;
  outline: 1px auto #129FEA; /* blue outline */
}

/* pressed button appearance */
button:active,
.button:active,
[type="reset"]:active,
[type="submit"]:active,
[type="button"]:active {
  background-image: linear-gradient(#dddddd, #eeeeee);
  box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
  border-color: #999999 #bbbbbb #dddddd;
}


/* INVALID */
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
  box-shadow: none;
}

[type="radio"]:focus:invalid,
[type="checkbox"]:focus:invalid {
  outline-color: #e9322d;
}


/* DISABLED */
[disabled],
[disabled] option,
[disabled] optgroup {
  box-shadow: none;
  user-select: none;
  color: #888888;
  cursor: default;
}

[disabled] {
  background-color: #eaeded;
}

/* READONLY */
[readonly] {
  background: #eee; /* menu hover bg color */
  color: #777; /* menu text color */
  border-color: #ccc;
}


/*** STYLING ***/

textarea {
  min-height: 40px;
  overflow: auto;
  resize: vertical;
  width: 100%;
}

optgroup {
  color: black;
  font-style: normal;
  font-weight: normal;
}

/* Prevent Firefox from increasing the size of optgroup */
optgroup::-moz-focus-inner {
  border: 0;
  padding: 0;
}

fieldset {
  margin: 0.5em 0;
  padding: 0.5em 0;
  border: 1px solid #ddd;
  border-left:0;
  border-right:0;
}

legend {
  display: block;
  width: 100%;
  padding: 0 0 0.3em;
  margin:0;
  border-bottom: 1px solid #ddd;
}