/* Need to check with designer */
/* Need to check with designer */
:host {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

*,
::after,
::before {
  box-sizing: border-box;
}

.input-container {
  margin-bottom: 16px;
  width: inherit;
  height: inherit;
}

label {
  font-size: 12px;
  color: #475867;
  font-weight: 500;
  margin-bottom: 0;
  padding-bottom: 4px;
  padding-left: 2px;
  display: block;
}
label.required::after {
  content: "*";
  position: relative;
  display: inline-block;
  top: 2px;
  font-size: 14px;
  color: #d72d30;
  padding-left: 2px;
  font-weight: 700;
}

.input-container-inner {
  display: block;
  width: 100%;
  position: relative;
}
.input-container-inner input {
  width: 100%;
  border: 0;
  border: 1px solid #cfd7df;
  margin: 5px 0 0;
  border-radius: 4px;
  padding: 4px 12px 5px;
  resize: none;
  background-color: #fff;
  box-shadow: none;
  min-height: 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 20px;
  color: #183247;
  box-sizing: border-box;
  cursor: text;
  display: inline-block;
  font-family: inherit;
}
.input-container-inner input:hover {
  border: 1px #475867 solid;
  transition: 0.2s linear;
}
.input-container-inner input:focus {
  outline: none;
  background: #fff;
  background-color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 0 0 2px #2c5cc5;
}
.input-container-inner input[disabled] {
  color: #92a2b1;
  background-color: #f5f7f9;
  border-style: solid;
  pointer-events: none;
}
.input-container-inner input[disabled]:hover {
  border: 1px solid #cfd7df;
}
.input-container-inner .clear-button {
  top: 13px;
  position: absolute;
  right: 10px;
  display: inline-block;
}
.input-container-inner .clear-button:hover {
  cursor: pointer;
  pointer-events: initial;
}
.input-container-inner .clear-button .clear-button-img {
  width: 15px;
  height: 15px;
}
.input-container-inner + .help-block {
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
  font-size: 11px;
  margin-top: 3px;
  color: #acb6be;
  position: inherit;
  margin-bottom: 0;
  display: block;
  padding-left: 2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.input-container-inner.error > input {
  border-color: #d72d30;
}
.input-container-inner.error > input:focus {
  box-shadow: none;
  border-color: #d72d30;
}
.input-container-inner.error > input:hover {
  border-color: #d72d30;
}
.input-container-inner.error + .help-block {
  color: #d72d30;
}
.input-container-inner.warning > input {
  border-color: #f8ab59;
}
.input-container-inner.warning > input:focus {
  box-shadow: none;
  border-color: #f8ab59;
}
.input-container-inner.warning > input:hover {
  border-color: #f8ab59;
}
.input-container-inner.warning + .help-block {
  color: #f8ab59;
}

::-webkit-input-placeholder {
  color: #acb6be;
}

::-moz-placeholder {
  color: #acb6be;
}

:-ms-input-placeholder {
  color: #acb6be;
}

:-moz-placeholder {
  color: #acb6be;
}

.icon {
  position: absolute;
  top: 8px;
  left: 3px;
  width: 25px;
  height: 25px;
  border-radius: 3px;
  padding: 3px 0 0 6px;
  display: block;
  -ms-flex-pack: center;
  align-items: center;
  background-color: #ebeff3;
}
.icon.left {
  left: 3px;
}
.icon.left::after {
  left: 28px;
  content: "";
  width: 1px;
  display: block;
  height: 20px;
  background-color: #ebeff3;
  position: absolute;
  top: 3px;
}
.icon.right {
  left: auto;
  right: 3px;
}
.icon.right::before {
  right: 28px;
  content: "";
  width: 1px;
  display: block;
  height: 20px;
  background-color: #ebeff3;
  position: absolute;
  top: 3px;
}

.left-icon input {
  padding-left: 38px;
}

.right-icon input {
  padding-right: 38px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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