/**
 * Stylesheet
 *
 * @namespace Lungo.Widgets
 * @class Form
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */
/* DIMENSIONS */
/* COLORS */
form {
  margin: 3%;
}
form.wrapper input:not([type=checkbox]),
form textarea,
form select {
  margin: 3px 0px 3px 0px;
}
form.rounded input:not([type=checkbox]),
form.rounded textarea,
form.rounded select {
  width: 94%;
  padding: 1.0% 3% ;
}
form.rounded input:not([type=checkbox]):first-of-type,
form.rounded textarea:first-of-type,
form.rounded select:first-of-type {
  -webkit-border-radius: 2px 2px 0px 0px;
  -moz-border-radius: 2px 2px 0px 0px;
  border-radius: 2px 2px 0px 0px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
form.rounded input:not([type=checkbox]):last-of-type,
form.rounded textarea:last-of-type,
form.rounded select:last-of-type {
  -webkit-border-radius: 0px 0px 2px 2px;
  -moz-border-radius: 0px 0px 2px 2px;
  border-radius: 0px 0px 2px 2px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
input[type=text],
textarea,
select {
  display: block;
  width: 96%;
  padding: 0 2%;
  height: 30px;
  font-size: 14px;
  font-weight: bold;
  -webkit-appearance: none;
  -webkit-user-select: text;
  -webkit-font-smoothing: antialiased;
}
textarea {
  padding-top: 1.5%;
  min-height: 48px;
}
/* @group search */
input[type=search] {
  width: 85%;
  display: inline-block;
}
input[type=search]  + .button {
  float: right;
  padding: 0px;
  width: 13%;
  height: 30px;
}
input[type=search]  + .button .icon {
  top: -3px;
  float: none;
}
/* @end */
/* @group select */
select {
  width: 100%;
  height: 30px;
}
label.select {
  position: relative;
  display: inline-block;
  width: 100%;
}
.select:after {
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  width: 30px;
  content: "▼";
  pointer-events: none;
  line-height: 31px;
}
.no-pointer-events .select:after {
  content: none;
}
/* @end */
input[type=range] {
  -webkit-appearance: none;
  outline: none;
}
input[type=range]:not(.checkbox) {
  height: 12px;
  width: 100%;
  padding: 0px;
  margin: 8px 0 12px 0;
  border: 0;
  cursor: ew-resize;
}
input[type=range]:not(.checkbox)::-webkit-slider-thumb {
  top: -1px;
}
input[type=range].checkbox {
  background: #aaaaaa;
  width: 70px;
  height: 30px;
  padding: 1px 2px;
  font-family: 'lungojsicon';
}
input[type=range].checkbox:after {
  content: "\0055";
  position: relative;
  float: right;
  top: -23px;
  padding: 0 8px;
  font-size: 1.5em;
}
input[type=range].checkbox.active:after {
  float: left;
  content: "\0051";
  font-weight: bold;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 24px;
  border-radius: 2px;
  position: relative;
  margin: 2px 2px 2px 2px;
  border: none;
}
input[type=range]::-webkit-slider-thumb::after {
  width: 13px;
  height: 13px;
  display: block;
  content: "";
  position: relative;
  border-radius: 7.5px;
  z-index: 9;
  top: 5px;
  left: 9px;
}
/* @group range */
/* @end */
/* @group progress */
.progress {
  width: 100%;
  margin-bottom: 8px;
}
.progress .labels {
  font-size: 1.0em;
  display: block;
}
.progress .labels span:last-child {
  float: right;
}
.progress .bar {
  height: 12px;
  line-height: 12px;
  display: block;
}
.progress .bar .value {
  display: block;
  height: inherit;
  width: 0%;
  -webkit-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.progress .bar .value .label {
  float: right;
  margin-right: 4px;
  font-size: 0.75em;
}
/* @end */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .custom-select select {
    padding-right: 30px;
  }
}