/**
 * Stylesheet
 *
 * @namespace Lungo.Widgets
 * @class Form
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */
form label:not(.select),
.form label:not(.select) {
  font-size: 0.9em;
}
form input,
.form input,
form textarea,
.form textarea,
form select,
.form select,
form .progress,
.form .progress {
  margin-bottom: 8px;
}
form input[type="text"],
.form input[type="text"],
form input[type="password"],
.form input[type="password"],
form input[type="date"],
.form input[type="date"],
form input[type="datetime"],
.form input[type="datetime"],
form input[type="email"],
.form input[type="email"],
form input[type="number"],
.form input[type="number"],
form input[type="search"],
.form input[type="search"],
form input[type="tel"],
.form input[type="tel"],
form input[type="time"],
.form input[type="time"],
form input[type="url"],
.form input[type="url"],
form select,
.form select,
form textarea,
.form textarea {
  display: block;
  width: 100%;
  padding: 6px;
  height: 30px;
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  transition: all 0.15s linear;
  font-family: inherit;
  font-size: inherit;
  -webkit-appearance: none;
  -webkit-user-select: text;
  -webkit-font-smoothing: antialiased;
}
form input[type="text"]:focus,
.form input[type="text"]:focus,
form input[type="password"]:focus,
.form input[type="password"]:focus,
form input[type="date"]:focus,
.form input[type="date"]:focus,
form input[type="datetime"]:focus,
.form input[type="datetime"]:focus,
form input[type="email"]:focus,
.form input[type="email"]:focus,
form input[type="number"]:focus,
.form input[type="number"]:focus,
form input[type="search"]:focus,
.form input[type="search"]:focus,
form input[type="tel"]:focus,
.form input[type="tel"]:focus,
form input[type="time"]:focus,
.form input[type="time"]:focus,
form input[type="url"]:focus,
.form input[type="url"]:focus,
form select:focus,
.form select:focus,
form textarea:focus,
.form textarea:focus {
  outline: none !important;
}
form textarea,
.form textarea {
  min-height: 48px;
}
form input[type=search],
.form input[type=search] {
  width: 89%;
  display: inline-block;
}
form input[type=search] + .button,
.form input[type=search] + .button {
  float: right;
  padding: 0px;
  width: 10%;
  height: 30px;
  line-height: 30px;
}
form select,
.form select {
  width: 100%;
  height: 30px;
}
form select label.select,
.form select label.select {
  position: relative;
  display: inline-block;
  width: 100%;
}
form select .select:after,
.form select .select:after {
  text-align: center;
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 0;
  height: 30px;
  width: 30px;
  content: "▼";
  pointer-events: none;
  line-height: 33px;
}
form select .no-pointer-events .select:after,
.form select .no-pointer-events .select:after {
  content: none;
}
form input[type=range],
.form input[type=range] {
  -webkit-appearance: none;
  outline: none;
}
form input[type=range]:not(.checkbox),
.form input[type=range]:not(.checkbox) {
  height: 12px;
  width: 100%;
  padding: 0px;
  margin-top: 2px;
  border: 0;
  cursor: ew-resize;
}
form input[type=range]:not(.checkbox)::-webkit-slider-thumb,
.form input[type=range]:not(.checkbox)::-webkit-slider-thumb {
  top: -1px;
}
form input[type=range].checkbox,
.form input[type=range].checkbox {
  width: 70px;
  height: 30px;
  padding: 1px 2px;
  font-family: 'lungojsicon';
}
form input[type=range].checkbox:after,
.form input[type=range].checkbox:after {
  content: "\0055";
  position: relative;
  float: right;
  top: -23px;
  padding: 0 8px;
  font-size: 1.5em;
}
form input[type=range].checkbox.active:after,
.form input[type=range].checkbox.active:after {
  float: left;
  content: "\0051";
  font-size: 1.6em;
}
form input[type=range]::-webkit-slider-thumb,
.form input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 24px;
  position: relative;
  margin: 2px 2px 2px 2px;
  border: none;
}
form input[type=range]::-webkit-slider-thumb::after,
.form input[type=range]::-webkit-slider-thumb::after {
  width: 12px;
  height: 12px;
  display: block;
  content: "";
  position: relative;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  z-index: 9;
  top: 6px;
  left: 9px;
}
form .progress,
.form .progress {
  width: 100%;
  margin-bottom: 8px;
}
form .progress .labels,
.form .progress .labels {
  font-size: 1em;
  display: block;
}
form .progress .labels span:last-child,
.form .progress .labels span:last-child {
  float: right;
}
form .progress .bar,
.form .progress .bar {
  height: 12px;
  line-height: 12px;
  display: block;
}
form .progress .bar .value,
.form .progress .bar .value {
  display: block;
  height: inherit;
  width: 0%;
  -webkit-transition: width 500ms easeOutSine;
  -moz-transition: width 500ms easeOutSine;
  transition: width 500ms easeOutSine;
}
form .progress .bar .value .label,
.form .progress .bar .value .label {
  float: right;
  margin-right: 4px;
  font-size: 0.75em;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .custom-select select {
    padding-right: 30px;
  }
}