.edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
  background-color: rgb(164, 231, 208);
  background-image: url('../img/icons/edit.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease, background-color 180ms ease;
}

/* hover / focus / active states */
.edit:hover,
.edit:focus {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12);
  opacity: 0.95;
}

.edit:active {
  transform: scale(0.98);
  box-shadow: 0 4px 8px rgba(16, 24, 40, 0.10);
}

.edit:focus {
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12), 0 0 0 3px rgba(164, 231, 208, 0.25);
}

/* respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {

  .edit,
  .edit:hover,
  .edit:focus,
  .edit:active {
    transition: none;
    transform: none;
  }
}

.edit-fixed-right {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.light-color {
  color: #dbdee3;
}

.buttons_wrapper {
  margin-top: 12px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.input_wrapper {
  position: relative;
  margin: 9px 0;
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}