.input-field {
  font: 400 14px/20px 'Roboto', sans-serif;
  color: #171e2b;
  width: 100%;
  height: 40px;
  letter-spacing: 0.1px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #b0b3ba;
  background: #fff; }
  .input-field.width-50 {
    width: 50px; }
  .input-field.width-192 {
    width: 192px; }
  .input-field.width-400 {
    width: 400px; }
  .input-field__icon {
    padding-left: 40px;
    display: flex;
    align-items: center; }
  .input-field__edit {
    padding-right: 40px; }
  .input-field_grey {
    background: #f9f9f9; }
  .input-field.right {
    text-align: right; }
  .input-field.clear:focus {
    border: 1px solid #b0b3ba; }
  .input-field:focus {
    border: 1px solid #376fd8;
    background: #fff; }

.select-field {
  font: 400 14px 'Roboto', sans-serif;
  color: #171e2b;
  letter-spacing: 0.1px;
  padding: 0 12px;
  padding-right: 30px;
  width: 100%;
  height: 40px;
  min-width: 160px;
  border-radius: 6px;
  border: 1px solid #b0b3ba;
  background: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; }
  .select-field span {
    color: #666; }

.select-between {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: 5px; }
  .select-between > div {
    width: 50%; }
  .select-between__right {
    color: #666;
    text-align: right; }
  .select-between__selection {
    align-items: center; }
    .select-between__selection > div {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }

.red-field .select-field {
  border: 1px solid #e35151;
  background: rgba(227, 81, 81, .03); }

.blue-field .select-field {
  border: 1px solid #376fd8;
  background: rgba(83, 128, 213, .03); }

.green-field .select-field {
  border: 1px solid #42b975;
  background: rgba(66, 185, 117, .03); }

.yellow-field .select-field {
  border: 1px solid #ecc746;
  background: rgba(236, 199, 70, .03); }

.textarea-field {
  font: 400 14px/20px 'Roboto', sans-serif;
  color: #171e2b;
  letter-spacing: 0.1px;
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #b0b3ba; }

.input-container {
  position: relative; }
  .input-container__icon {
    position: absolute;
    top: 0;
    left: 12px;
    bottom: 0;
    margin: auto; }
  .input-container__edit {
    width: 32px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; }
  .input-container__search {
    max-width: 356px; }
  .input-container.postfix {
    display: flex;
    align-items: center; }
    .input-container.postfix .input-field {
      padding-right: 4px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right: none; }
      .input-container.postfix .input-field:focus + .postfix__title {
        border-color: #376fd8; }
    .input-container.postfix .postfix__title {
      font: 400 14px 'Roboto', sans-serif;
      color: #666;
      letter-spacing: 0.1px;
      padding-right: 12px;
      height: 40px;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      border: 1px solid #b0b3ba;
      border-left: none;
      background: #fff;
      display: flex;
      align-items: center; }

.select-container {
  position: relative; }

.attach-file__title {
  font: 400 14px 'Roboto', sans-serif;
  color: #666;
  margin: 0 0 4px; }
  .attach-file__button {
    font: 400 14px/20px 'Roboto', sans-serif;
    color: #171e2b;
    letter-spacing: 0.1px;
    cursor: pointer;
    padding: 0 14px;
    height: 40px;
    border: 1px solid #376fd8;
    border-radius: 6px;
    background: rgba(83, 128, 213, .03);
    display: flex;
    align-items: center;
    justify-content: center; }
    .attach-file__button .button {
      display: none; }
    .attach-file__button:before {
      content: '';
      width: 20px;
      height: 20px;
      margin-right: 8px;
      background: url(/images/upload_icon.svg) no-repeat center;
      background-size: 20px 20px; }

.textarea-field-line-numbers-wrapper {
  overflow-y: auto;
  position: relative; }
  .textarea-field-line-numbers-wrapper textarea {
    padding-left: 35px; }

.line-numbers {
  font: 400 14px/20px 'Roboto', sans-serif;
  color: #171e2b;
  letter-spacing: 0.1px;
  padding: 10px 0;
  border: 1px solid transparent;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 25px; }

.line-numbers span {
  counter-increment: linenumber; }

.line-numbers span::before {
  content: counter(linenumber);
  display: block;
  width: 25px;
  text-align: right;
  color: #666; }