* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.row {
  /* 讓內部元素橫著排 */
  display: flex;
  /* 不要自動縮放，讓內部元素擺不下就換行 */
  flex-wrap: wrap;
}

.user-items {
  color: #0e8142;
  font-size: 14px;
  text-decoration: none;
}

.nav-items {
  margin-top: 20px;
  color: #0e8142;
  font-size: 18px;
  text-decoration: none;
}

.nav-items:hover,
.user-items:hover {
  color: rgb(0, 179, 179);
}

.container {
  display: flex;
}

#from {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
  width: 150px;
  height: 30px;
}

#to {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
  width: 150px;
  height: 30px;
}

h1,
h2,
.option-menu {
  display: inline;
}

.option-menu {
  height: 30px;
}

#source,
#relationship,
#changePassword,
#items {
  float: left;
  flex-wrap: wrap;
}

.comfirm {
  background-color: #39c229;
  color: #ffffff;
  border: none;
  border-radius: 3px;
}

.cancel {
  background-color: #da0e0e;
  color: #ffffff;
  border: none;
  border-radius: 3px;
}

.btntype {
  background-color: #9dc7c2;
  color: white;
  border: none;
  border-radius: 3px;
  box-shadow: 0.2px 0px 5px rgb(100, 100, 100);
  width: fit-content;
}

.bad-debt {
  background-color: rgb(4, 78, 78);
  color: white;
  border: none;
  border-radius: 3px;
  box-shadow: 0.2px 0px 5px rgb(100, 100, 100);
  width: fit-content;
}

.do-bad-debt {
  background-color: #9dc7c2;
  color: white;
  border: none;
  border-radius: 3px;
  box-shadow: 0.2px 0px 5px rgb(100, 100, 100);
  width: fit-content;
  opacity: 0.5;
}

.unrecovered {
  background-color: rgb(4, 78, 78);
  color: white;
  border: none;
  border-radius: 3px;
  box-shadow: 0.2px 0px 5px rgb(100, 100, 100);
  width: fit-content;
}

.do-unrecovered {
  background-color: #9dc7c2;
  color: white;
  border: none;
  border-radius: 3px;
  box-shadow: 0.2px 0px 5px rgb(100, 100, 100);
  width: fit-content;
  opacity: 0.5;
}

.entryInput {
  margin-bottom: 15px;
  width: 200px;
  height: 25px;
  border-radius: 3px;
  border: none;
  opacity: 0.7;
  box-shadow: 0.5px 0.5px 6px rgb(100, 100, 100);
}

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 14px;
}

.pagination a:hover:not(.active) {
  background-color: #9dc7c2;
  color: #ffffff;
  border-radius: 3px;
}

.link {
  text-decoration: none;
  font-weight: bold;
}

.link:hover {
  color: #9dc7c2;
}

.overdue {
  color: #da0e0e;
  font-weight: bold;
}

.complete {
  color: #39c229;
  font-weight: bold;
}

.popout-title {
  font-size: 18px;
  font-weight: bold;
  color: rgb(4, 78, 78);
}

@media print {
  * {
    -webkit-print-color-adjust: economy !important;
  }
  .noBreak {
    break-inside: avoid;
  }
  .noPrint {
    display: none;
  }
}