input {
  font-family: 'Ubuntu Mono', monospace;
  border: 1px solid grey;
  font-size: 100%;
}

/* text */
input[type=text] {
  padding: 6px;
}

/* email */
input[type=email] {
  padding: 6px;
}

/* password */
input[type=password] {
  padding: 6px;
}

/* number */
input[type=number] {
  padding: 6px;
  text-align: right;
}

/* color */
input[type=color] {
  height: 30px;
  width: 30px!important;
  cursor: pointer;
  border: 1px solid grey;
  padding: 0px;
  background: white;
}
input[type=color]:disabled {
  background: #eeeeee;
  cursor: default;
}

/* date */
input[type=date] {
  max-width: 120px;
  padding: 2.5px;
  height: 30px;
}
input[type=date]::-webkit-clear-button, input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-calendar-picker-indicator {
  margin-left: 0px;
  cursor: pointer;
}
input[type=date]:disabled {
  padding: 5px;
}
input[type=date]:disabled::-webkit-clear-button, input[type=date]:disabled::-webkit-inner-spin-button, input[type=date]:disabled::-webkit-calendar-picker-indicator {
  display: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
  filter: opacity(0.3);
}
input[type=date]::-webkit-calendar-picker-indicator:hover {
  filter: none;
}

/* time */
input[type=time] {
  max-width: 120px;
  padding: 2.5px;
  height: 30px;
}
input[type=time]::-webkit-clear-button, input[type=time]::-webkit-inner-spin-button, input[type=time]::-webkit-calendar-picker-indicator {
  margin-left: 0px;
  cursor: pointer;
}
input[type=time]::-webkit-calendar-picker-indicator {
  filter: opacity(0.3);
}
input[type=time]::-webkit-calendar-picker-indicator:hover {
  filter: none;
}

/* datetime */
input[type=datetime-local] {
  padding: 4px;
}

/* button */
input[type=button] {
  padding: 6px;
  cursor: pointer;
}
input[type=button]:hover {
  background: var(--btn_primary_bg_hover);
  color: var(--btn_primary_fg_hover);
}
input[type=button].save {
  background: var(--btn_primary_bg);
  color: var(--btn_primary_fg);
  float: right;
}

/* search */
input.search {
  padding: 5px;
  padding-left: 30px;
  background-image: url(../../img/icon/search.svg);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: 5px;
}

/* textarea */
textarea {
  padding: 6px;
  border: 1px solid grey;
  resize: none;
  overflow-y: scroll;
}