.w-inp-eye {
  position: relative;
}

.w-inp-eye .form-control {
  padding-right: 30px;
}

.w-inp-eye .i-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 30px;
  height: 31px;
  background-color: #f0f0f0;
  color: #373737;
  border-radius: 6px;
  cursor: pointer;
}

.w-inp-eye .i-eye i {
  display: inline-block;
}

.w-inp-eye .i-eye .off {
  display: none;
}

.w-inp-eye .i-eye.text .off {
  display: inline-block;
}

.w-inp-eye .i-eye.text .on {
  display: none;
}

.w-inp-eye .i-eye:hover {
  background-color: #e0e0e0;
}

.w-inp-eye .i-eye:active {
  background-color: #d0d0d0;
}