@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dialog-loading {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
button, .button {
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  background-color: #3f51b5;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 15px 30px;
  font-weight: 500;
  cursor: pointer;
  color: white;
  line-height: normal;
  margin-right: 10px;
}
button.green, .button.green {
  background-color: #009688;
}
button.red, .button.red {
  background-color: #f44336;
}
button.blue, .button.blue {
  background-color: #2196f3;
}
button.orange, .button.orange {
  background-color: #ff5722;
}
button.yellow, .button.yellow {
  background-color: #ffc300;
}
button.green-yellow, .button.green-yellow {
  background-color: #b6d91c;
}
button:disabled, .button:disabled {
  background-color: #aaa;
  cursor: default;
}
button:disabled.yellow, .button:disabled.yellow {
  cursor: not-allowed;
}
button:last-child, .button:last-child {
  margin-top: 15px;
}
button.loading, .button.loading {
  background-color: #3f51b5;
  overflow: hidden;
  opacity: 0.7;
}
button.loading:before, .button.loading:before {
  animation: loading 800ms linear infinite;
  border: 2px solid white;
  border-top-color: transparent;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: -3px;
  border-radius: 100%;
  margin-left: -15px;
  margin-right: 10px;
  height: 15px;
  width: 15px;
  content: "";
}
button.small, .button.small {
  font-size: 13px;
  padding: 10px 20px;
}
button.no-margin-top, .button.no-margin-top {
  margin-top: 0;
}

textfield, selector {
  margin-bottom: 16px;
  position: relative;
  min-height: 42px;
  display: block;
}
textfield.location, selector.location {
  background: url("../icon/location.svg") right -5px bottom 5px no-repeat;
  background-size: 24px;
}
textfield:after, selector:after {
  display: table;
  content: "";
  clear: both;
}
textfield:last-child, selector:last-child {
  margin-bottom: 0;
}
textfield[active] input ~ label,
textfield[active] text ~ label, selector[active] input ~ label,
selector[active] text ~ label {
  font-size: 13px;
  top: 0;
}
textfield:not([multiline]) text, selector:not([multiline]) text {
  white-space: nowrap;
  overflow: hidden;
}
textfield text, textfield input, selector text, selector input {
  border-bottom: 1px solid #ccc;
  background-color: transparent;
  -webkit-appearance: none;
  display: inline-block;
  padding-bottom: 5px;
  padding-top: 18px;
  position: relative;
  border-radius: 0;
  min-height: 18px;
  color: #424242;
  height: 18px;
  float: left;
  width: 100%;
  z-index: 2;
}
textfield text:focus ~ label, textfield text:not(:empty) ~ label, textfield text:valid ~ label, textfield input:focus ~ label, textfield input:not(:empty) ~ label, textfield input:valid ~ label, selector text:focus ~ label, selector text:not(:empty) ~ label, selector text:valid ~ label, selector input:focus ~ label, selector input:not(:empty) ~ label, selector input:valid ~ label {
  font-size: 13px;
  top: 0;
}
textfield text:focus ~ label, textfield input:focus ~ label, selector text:focus ~ label, selector input:focus ~ label {
  color: #3f51b5;
}
textfield text:focus ~ highlightbar, textfield input:focus ~ highlightbar, selector text:focus ~ highlightbar, selector input:focus ~ highlightbar {
  width: 100%;
  opacity: 1;
}
textfield[multiline=true] text, selector[multiline=true] text {
  height: auto;
}
textfield label, selector label {
  transition: color, 100ms linear, top 100ms linear, font-size 100ms linear, opacity 100ms linear;
  will-change: color, top, font-size, opacity;
  display: inline-block;
  position: absolute;
  color: #828282;
  z-index: 1;
  top: 20px;
  left: 0;
}
textfield highlightbar, selector highlightbar {
  transition: width 200ms;
  background-color: #3f51b5;
  transform: translateX(-50%);
  position: absolute;
  height: 2px;
  opacity: 0;
  z-index: 3;
  bottom: 0;
  left: 50%;
  width: 0;
}

selector text {
  width: calc(100% - 20px);
  padding-right: 20px;
}
selector text:after {
  white-space: pre;
  content: " ";
}
selector:after {
  background: url("../img/arrow-down.svg") center no-repeat;
  transition: transform 200ms;
  will-change: transform;
  background-size: 16px;
  position: absolute;
  height: 32px;
  width: 16px;
  content: "";
  bottom: 0;
  right: 0;
}
selector:focus:after {
  transform: rotate(180deg);
}
selector:focus label {
  color: #3f51b5;
  font-size: 13px;
  top: 0;
}
selector:focus highlightbar {
  width: 100%;
  opacity: 1;
}
selector:focus options {
  animation-name: show-options;
  animation-duration: 200ms;
  display: block;
}
selector opt {
  display: none;
}
selector options {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  background-color: white;
  top: calc(100% + 4px);
  position: absolute;
  border-radius: 3px;
  max-height: 192px;
  overflow: auto;
  display: none;
  width: 100%;
  z-index: 3;
  left: 0;
}
selector options opt {
  transition: 100ms background-color;
  will-change: background-color;
  white-space: nowrap;
  line-height: 48px;
  padding: 0 16px;
  cursor: pointer;
  display: block;
  height: 48px;
}
selector options opt:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
selector options opt[active] {
  background-color: rgba(0, 0, 0, 0.1);
}

checkbox {
  overflow: hidden;
  cursor: pointer;
  display: block;
}
checkbox:last-child label {
  padding-bottom: 0;
}
checkbox input {
  display: none;
}
checkbox label {
  padding-bottom: 15px;
  line-height: 18px;
  overflow: hidden;
  display: block;
}
checkbox label .fakeInput {
  background-color: #ddd;
  text-align: center;
  color: transparent;
  border-radius: 3px;
  margin-right: 10px;
  height: 18px;
  width: 18px;
  float: left;
}
checkbox label .fakeInput i {
  display: block;
  line-height: 18px;
  font-size: 10px !important;
}
checkbox label span {
  width: calc(100% - 28px);
  display: block;
  float: right;
}
checkbox input:checked + label .fakeInput {
  background-color: #3f51b5;
  color: white;
}
checkbox[inline] {
  display: inline-block;
  margin-right: 10px;
}
checkbox[inline]:last-child {
  margin-right: 0;
}
checkbox[inline] label {
  padding: 0;
}

.input_tipsy {
  transform: translateY(-12px);
  font-size: 13px;
  color: #f44336;
}

[contenteditable] {
  -webkit-user-modify: read-write;
  -webkit-user-modify: read-write-plaintext-only;
  -webkit-user-select: auto;
  user-select: auto;
}

input[type=checkbox] {
  display: none;
}
input[type=checkbox].show {
  display: block;
}

.check {
  transition: border-color 200ms, background-color 200ms;
  border: 2px solid #ddd;
  background-color: #ddd;
  border-radius: 18px;
  position: relative;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  height: 18px;
  width: 40px;
}
.check:before {
  transition: transform 200ms;
  background-color: white;
  border-radius: 100%;
  position: absolute;
  height: 18px;
  width: 18px;
  content: "";
  left: 0;
  top: 0;
}

input[type=checkbox]:checked + .check {
  background-color: #03a9f4;
  border-color: #03a9f4;
}
input[type=checkbox]:checked + .check:before {
  transform: translateX(calc(100% + 4px));
}

.inline-form textfield, .inline-form .selector {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 0;
  min-height: unset;
}
.inline-form textfield text, .inline-form .selector text {
  padding: 0 9px;
  margin-left: 5px;
}
.inline-form textfield label, .inline-form .selector label {
  flex-shrink: 0;
  position: static;
  font-size: 15px !important;
  color: #000;
  font-weight: 500;
}
.inline-form textfield highlightbar, .inline-form .selector highlightbar {
  display: none;
}
.inline-form .selector {
  padding-top: 0;
  margin-bottom: 15px;
}
.inline-form .selector select {
  padding: 0 9px;
}
.inline-form .input_wrapper {
  width: 100%;
  position: relative;
}
.inline-form .input_wrapper .input_tipsy {
  position: absolute;
  transform: none;
  font-size: 12px;
  top: calc(100% - 2px);
}

/*# sourceMappingURL=inputs.css.map */