input[type="text"], input[type="number"], input[type="password"], input[type="email"], 
input[type="date"], input[type="url"], input.datepicker, select {
/*   height: 34px; 給高度之後底線"_"會被蓋掉*/
  border-radius: 4px;
  padding: 6px 12px;
  border: 1px solid #ccc;
}

input[type=checkbox] {
  transform: scale(1.2);
}

input.address {
  width: 25em;
}

input[type="date"]{
  width: 10em !important;
}

input.dateWidth,
input.datepicker, input.timepicker {
  width: 50px !important;  /*寬度50px 但是最小允許值是110px? */
  min-width: 110px;
}

input.yearWidth {
  width:80px !important;
}

input.monthWidth, select.monthWidth {
  width: 60px !important;
}

input.width1 {
  width: 1.5em !important;
}

input.width2 {
  width: 2em !important;
}

input.width3 {
  width: 3em !important;
}

input.width4 {
  width: 4em !important;
}

input.width5 {
  width: 5em !important;
}

input.width7, input.money {
  width: 7em !important;
}

input.width8 {
  width: 8em !important;
}

input.width10 {
  width: 10em !important;
}

input.width13 {
  width: 13em !important;
}

input.width15 {
  width: 15em !important;
}

input.width20 {
  width: 20em !important;
}

input.width30 {
  width: 30em !important;
}

input.width40 {
  width: 40em !important;
}

input:disabled {
  background: #dddddd;
}

/* 必填欄位樣式 */

/* input:not([type="radio"]):not([type="checkbox"]):required { */
/*     background-size: 1em 1em; */
/*     background-image: radial-gradient(farthest-side,transparent 0%,transparent 40%,hsl(10,100%,60%) 40%,hsl(10,100%,60%) 80%,transparent 80%); */
/*     background-repeat: no-repeat; */
/*     background-position: right; */
/*     padding-right: 1em; */
/* } */

fieldset input[type=text]:focus {
}

fieldset input:valid:not([type="button"]):not([type="submit"]),
fieldset input:invalid:not([type="button"]):not([type="submit"]) {
/*   border-left: 3px solid; */
}

input:valid {
/*   border-left-color: palegreen; */
}
input:invalid,
textarea:invalid,
input.invalid {
/*   border-left: 3px solid; */
/*   border-radius: 5px; */
/*   border-left-color: salmon; */
  border: 1px solid red;
}

/* 必填欄位樣式 */


div.searchDiv input:not([type="submit"]):not([type="button"]):not([type="radio"]), 
div.searchDiv select {
/*   width: 80%; */
  max-width: 195px;
  text-align: center;
}

input[type="file"] {
  width: 8em;
}

select {
  vertical-align:top;
  padding-bottom: 8px;
}

input, select{
  box-sizing: border-box;
}

.deleteConfirm {
  font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";
  font-weight: 900;
}

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

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  border: 2px solid #ddd;
  display: inline-flex;
  border-radius: 7px;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline:none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input input[type=number] {
  max-width: 5rem;
  padding: .5rem;
  border: none;
  border-width: 0 2px;
  font-size: 1rem;
  height: 1.5rem;
  font-weight: bold;
  text-align: center;
  color: #9F9F9F;
}

.number-input i {
  color: #AAA;
}