:root {
  --indentX: 80px;
  --indentY: 56px
}
@media screen and (max-width:1000px) {
  :root {
    --indentX: 24px;
    --indentY: 48px
  }
}
@media screen and (max-width:475px) {
  :root {
    --indentX: 20px;
    --indentY: 48px
  }
}
@media screen and (max-width:375px) {
  :root {
    --indentX: 20px;
    --indentY: 40px
  }
}
.input-wrapper {
  display:flex;
  align-items:center;
  position:relative;
  flex-direction:row;
  background-color:var(--input-default);
  border-radius:10px;
  overflow:hidden
}
.input-wrapper .postfix {
  z-index:5;
  position:absolute;
  font-size:16px;
  color:var(--general-white)
}
.input-wrapper .input-icon-wrapper {
  display:flex;
  align-items:center;
  z-index:1;
  position:absolute;
  right:16px
}
.input-wrapper .input {
  padding:18px 16px;
  outline:none;
  border:none;
  font-size:16px;
  line-height:20px;
  letter-spacing:-.01em;
  color:var(--general-dark-grey);
  font-weight:500;
  background-color:var(--input-default);
  flex:1 0
}
.input-wrapper .input::-webkit-outer-spin-button,
.input-wrapper .input::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0
}
.input-wrapper .input[type=number] {
  -moz-appearance:textfield
}
.input-wrapper .input.with-icon {
  padding-right:55px
}
.input-wrapper .input::-moz-placeholder {
  color:var(--general-dark-grey)
}
.input-wrapper .input::placeholder {
  color:var(--general-dark-grey)
}
.input-wrapper .input:-ms-input-placeholder {
  color:var(--general-dark-grey);
  opacity:1
}
.input-wrapper svg {
  fill:var(--general-white)
}
.input-wrapper:hover .input::-moz-placeholder {
  color:var(--general-grey)!important
}
.input-wrapper:hover .input::placeholder {
  color:var(--general-grey)!important
}
.input-wrapper:not(.disabled,
.error):hover {
  border-color:var(--bdrop-input-border-hover)
}
.input-wrapper:not(.disabled,
.error):hover .postfix {
  color:var(--bdrop-input-border-hover)
}
.input-wrapper:not(.disabled,
.error):hover .input {
  color:var(--bdrop-input-color-hover)
}
.input-wrapper.completed:not(.readonly) {
  border-color:var(--bdrop-input-border-completed)
}
.input-wrapper.completed {
  border-color:var(--bdrop-input-border-completed)
}
.input-wrapper.completed .postfix {
  color:var(--bdrop-input-border-completed)
}
.input-wrapper.completed svg {
  fill:var(--bdrop-checkbox-color)
}
.input-wrapper.focused {
  border-color:var(--bdrop-input-border-focus)
}
.input-wrapper.focused .postfix {
  color:var(--bdrop-input-border-focus)
}
.input-wrapper.focused .input {
  color:var(--general-white)
}
.input-wrapper.focused svg {
  fill:var(--general-white)
}
.input-wrapper.disabled {
  border-color:#4b4d5b
}
.input-wrapper.disabled .input {
  color:#4b4d5b;
  cursor:not-allowed
}
.input-wrapper.disabled svg {
  fill:#4b4d5b
}
.input-wrapper.error {
  border-color:#ff4d55
}
.input-wrapper.error .input::-moz-placeholder {
  color:var(--general-white)
}
.input-wrapper.error .input::placeholder {
  color:var(--general-white)
}
.input-wrapper.error .input:-ms-input-placeholder {
  color:var(--general-white);
  opacity:1
}
.input-wrapper.error svg {
  fill:var(--general-white)
}
.input-wrapper.error.completed {
  border-color:#ff4d55
}
.input-wrapper.error.completed .input {
  color:var(--general-white)
}
.input-wrapper.error.completed svg {
  fill:var(--general-white)
}


.input-wrapper:focus .input {
  color: var(--bdrop-input-color-hover);
}