.lc-input-wrapper {
  position: relative;
}

.lc-input {
  padding: 8px 12px;
  line-height: 1.4;
  font-size: 1.6rem;
  border: 1px #eee solid;
  width: 100%;
  background-color: #fff;
  font-family: MultipleSlab, sans-serif;
  position: relative;
}

.lc-input.with-unit {
  padding-right: 50px;
}

.lc-input[type=number] {
  text-align: right;
}

.lc-input[type=number]::-webkit-outer-spin-button,
.lc-input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.lc-input[type=number] {
  -moz-appearance: textfield;
}

.lc-input-wrapper {
  display: flex;
}
.lc-input-wrapper > .col.input {
  position: relative;
  flex-grow: 1;
}
.lc-input-wrapper > .col.input > .unit {
  position: absolute;
  display: flex;
  right: 20px;
  height: 100%;
  top: 0;
  align-items: center;
  pointer-events: none;
  font-family: MultipleSlab, sans-serif;
  color: #666;
  font-size: 1.6rem;
}
.lc-input-wrapper > .col.arrows {
  display: flex;
  flex-direction: column;
}
.lc-input-wrapper > .col.arrows > .arrow {
  flex-grow: 1;
  background-color: #eee;
  width: 30px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border: 0;
}
.lc-input-wrapper > .col.arrows > .arrow > * {
  width: 100%;
  text-align: center;
}
.lc-input-wrapper > .col.arrows > .arrow:hover {
  background-color: #ddd;
}
.lc-input-wrapper > .col.arrows > .arrow:active {
  transform: translateY(1px);
}

textarea.lc-input {
  min-height: 100px;
}

.lc-input.validated-or-edited:invalid,
.lc-input.error {
  border-color: #f22 !important;
  outline-color: #f22;
}

.lc-styled-radio-wrapper.disabled {
  opacity: 0.2;
}
.lc-styled-radio-wrapper > .styled-radio {
  display: none;
}
.lc-styled-radio-wrapper > .styled-radio-alternative {
  display: inline-block;
  width: 20px;
  height: 20px;
  font-size: 0;
  background-color: #fff;
  border: 1px #eee solid;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  cursor: pointer;
  position: relative;
  text-align: center;
  line-height: 21px;
  margin-right: 5px;
}
.lc-styled-radio-wrapper > .styled-radio-alternative > .check {
  font-size: 14px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #d2930f;
}
.lc-styled-radio-wrapper > .text {
  transition: color 0.3s ease;
}
.lc-styled-radio-wrapper > .styled-radio-alternative:hover {
  background-color: #eee;
}
.lc-styled-radio-wrapper > .styled-radio:checked + .styled-radio-alternative > .check {
  visibility: visible;
  opacity: 1;
}

.lc-styled-radio-wrapper:hover > .styled-radio-alternative {
  background-color: #eee;
}

.lc-styled-checkbox-wrapper > .styled-checkbox {
  display: none;
}
.lc-styled-checkbox-wrapper > .styled-checkbox-alternative {
  display: inline-block;
  width: 20px;
  height: 20px;
  font-size: 0;
  background-color: #fff;
  border: 1px #eee solid;
  transition: background-color 0.3s ease;
  cursor: pointer;
  position: relative;
  text-align: center;
  line-height: 21px;
  margin-right: 5px;
}
.lc-styled-checkbox-wrapper > .styled-checkbox-alternative > .check {
  font-size: 14px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #d2930f;
}
.lc-styled-checkbox-wrapper > .text {
  transition: color 0.3s ease;
}
.lc-styled-checkbox-wrapper > .styled-checkbox-alternative:hover {
  background-color: #eee;
}
.lc-styled-checkbox-wrapper > .styled-checkbox:checked + .styled-checkbox-alternative > .check {
  visibility: visible;
  opacity: 1;
}

.lc-styled-checkbox-wrapper:hover > .styled-checkbox-alternative {
  background-color: #eee;
}
