@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,700&display=swap&subset=chinese-traditional");
input[type=button], input[type=submit], button, #login input[type=submit], #login button {
  background: #68a2f7;
  background: linear-gradient(180deg, #68a2f7 0%, #68a2f7 100%); }

.msg {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3); }

.logowrap, #login, .msg, #loginInfo {
  border-radius: 0.625em; }

body, select, input[type=password], input[type=text], input[type=number], input[type=email], textarea, input[type=button], input[type=submit], button {
  font-family: 'Noto Sans TC',Microsoft JhengHei; }

.hidden {
  display: none; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0; }

body {
  font-size: 16px;
  color: #555;
  background: #f3f3f3;
  font-weight: 400; }

button:hover, input[type=submit]:hover {
  opacity: 0.8; }

.btn-sm, button#copyBtn, button#insertBtn, button#printBtn, button#previewBtn {
  padding: 5px 10px;
  letter-spacing: 0.1em; }

.btn-sm, button#copyBtn, button#insertBtn, button#printBtn, button#previewBtn {
  padding: 5px 10px;
  letter-spacing: 0.1em; }

.btn-basic, button#copyBtn, button#insertBtn, button#printBtn {
  background: #555555; }

button#copyBtn, button#insertBtn, button#printBtn, button#previewBtn {
  float: right; }
button[disabled=disabled], button .disabled {
  background: #999; }

select, input[type=password], input[type=text], input[type=number], input[type=email], textarea {
  width: 95%;
  border: 1px solid #d7d7d7;
  padding: 0.5em 1em;
  font-size: 1em;
  color: #555;
  border-radius: 0.2em;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 #FFF, 0 0px 0 #FFF; }

select {
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); }

input[type=button], input[type=submit], button {
  padding: 0.5em 2em 0.5em 2em;
  font-size: 1em;
  border: none;
  border-radius: 50em;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #fff; }

.errormessage {
  font-size: 0.9em;
  background: #D05353;
  color: #fff;
  padding: 0.3em 0.5em;
  display: inline-block;
  border-radius: 0.5em;
  letter-spacing: 0.1em;
  margin-bottom: 0.5em;
  position: absolute;
  bottom: 2.8em;
  right: 0; }
  .errormessage:before {
    display: inline-block;
    content: '!';
    color: #fff;
    border-radius: 10em;
    width: 1.3em;
    height: 1.3em;
    line-height: 1.3em;
    background: #D05353;
    margin-right: 0.5em;
    text-align: center;
    position: absolute;
    bottom: -2em;
    right: 0.5em; }
  .errormessage:after {
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.6em 0.6em 0 0.6em;
    border-color: #D05353 transparent transparent transparent;
    position: absolute;
    bottom: -0.5em;
    right: 1em; }

.heading {
  font-size: 1.3em;
  color: #4d93fa;
  font-weight: 500;
  letter-spacing: 0.5em;
  border-style: solid;
  border-color: #d7d7d7;
  border-width: 1px 0;
  margin: 1em 0;
  padding: 0.3em 0.5em; }

.h3 {
  font-size: 1.1em;
  font-weight: 600; }

header {
  background: #68a2f7;
  position: relative; }

.basicinfo {
  position: absolute;
  right: 1em;
  top: 1em;
  color: #fff;
  font-weight: 400;
  width: calc( 100% - 18em); }
  .mobilever .basicinfo {
    width: calc( 100% - 2em); }
  .basicinfo .left {
    float: left; }
  .basicinfo .right {
    float: right; }
  .basicinfo:after {
    content: '';
    display: inline-block;
    clear: both; }
  .basicinfo span, .basicinfo #username, .basicinfo #date {
    display: inline-block;
    padding: 0.3em 1em;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5em;
    font-size: 0.8em;
    color: #fff;
    font-weight: 400; }
  .basicinfo #date, .basicinfo #username {
    background: transparent;
    padding-left: 0.3em;
    padding-right: 0.5em;
    font-size: 1.05em; }
  .basicinfo #LogoutButton {
    background: #555;
    color: #fff;
    padding: 0.3em 1.5em;
    margin-left: 2em;
    border-radius: 50em;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.3em; }

.menu {
  width: 16em; }
  .menu input[type=button], .menu input[type=submit], .menu button {
    width: 100%;
    background: #f5f5f5;
    border-style: solid;
    border-color: #d7d7d7;
    border-width: 0 0 1px 0;
    color: #555;
    border-radius: 0;
    text-align: left;
    font-weight: 500;
    cursor: pointer;
    padding-top: 1.1em;
    padding-bottom: 1.1em; }
    .menu input[type=button].active, .menu input[type=submit].active, .menu button.active {
      border-left: 5px solid #555;
      background: #fff;
      color: #4d93fa; }
    .menu input[type=button]:hover, .menu input[type=submit]:hover, .menu button:hover {
      background: #fff; }
    .menu input[type=button]:focus, .menu input[type=submit]:focus, .menu button:focus {
      outline: none; }
  .menu #ExitBtn {
    margin-top: 3em;
    border-top-width: 1px; }
  .mobilever .menu {
    width: 100%;
    display: flex; }
    .mobilever .menu input[type=button], .mobilever .menu input[type=submit], .mobilever .menu button {
      text-align: center; }
      .mobilever .menu input[type=button]:not(:first-of-type), .mobilever .menu input[type=submit]:not(:first-of-type), .mobilever .menu button:not(:first-of-type) {
        border-left-width: 1px; }

header #ExitBtn {
  background: #555;
  color: #fff;
  padding: 0.3em 1.5em;
  margin-left: 2em;
  border-radius: 50em;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.3em; }

.contentwrap {
  display: flex;
  /*min-height:100%;*/ }
  .mobilever .contentwrap {
    flex-direction: column; }

#content {
  /*height:100%;*/ }

.content {
  width: calc(100% - 17em);
  /*min-height:calc(100% + 16em);*/
  padding-bottom: 11em;
  background: #fff;
  margin-top: -16em;
  margin-bottom: -25em;
  z-index: 990;
  border-radius: 0.625em 0.625em 0 0; }
  .mobilever .content {
    width: calc(100% - 0em);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0; }

.row {
  display: flex; }
  .row .input-group {
    padding-right: 2em;
    margin-right: 0.5em; }

.input-group {
  margin-bottom: 0.5em; }
  .input-group label.error {
    float: right;
    color: #D05353; }
  .input-group:after {
    content: '';
    display: inline-block;
    clear: both; }

.input-label {
  font-size: 0.95em;
  font-weight: 700;
  margin-bottom: 0.3em; }

.logowrap {
  background: #68a2f7;
  padding: 0;
  border-bottom-right-radius: unset;
  border-bottom-left-radius: unset; }

.logo {
  background: #68a2f7;
  display: inline-block;
  width: 18em;
  margin: 0 -1em;
  transform: scale(0.7); }
  .logo .logoimg {
    background: url("../images/logo.png") no-repeat 50% 50%/contain;
    width: 9em;
    padding-top: 66%;
    margin: 0 auto; }
  .logo .logotxt {
    margin-left: 0;
    font-weight: 500;
    text-align: center; }
    .logo .logotxt .h1chi {
      font-size: 1.85em;
      color: #fff;
      letter-spacing: 0.3em; }
    .logo .logotxt .h1eng {
      font-size: 0.75em;
      color: #fff;
      letter-spacing: 0.06em;
      margin-left: -0.7em; }
    .logo .logotxt .h2 {
      font-size: 1.3em;
      color: #cce1ff;
      letter-spacing: 0.7em;
      margin-top: 0.3em; }
      .logo .logotxt .h2 span {
        display: block; }
  .mobilever .logo {
    width: 100%;
    margin-left: auto;
    margin-right: auto; }
    .mobilever .logo .logoimg {
      padding-top: 0;
      height: 13em; }

#login {
  width: 90vw;
  max-width: 41.8em;
  margin: 2em auto 0 auto;
  background: #fff;
  border: 1px solid #d7d7d7; }
  #login select, #login input[type=password] {
    padding: 1em;
    width: 100%; }
  #login .heading {
    font-weight: 500;
    letter-spacing: 0.8em;
    text-align: center;
    padding: 0.5em;
    border-top-width: 0;
    margin: 0; }
  #login .logowrap {
    padding: clamp(1em, 7vw, 3em) 0; }
  #login .logo {
    display: flex;
    max-width: 30em;
    width: 80%;
    transform: none;
    margin: 0 auto; }
    #login .logo .logoimg {
      width: 25%;
      max-width: 7.2em;
      padding-top: 18%; }
    #login .logo .logotxt {
      margin-left: auto;
      margin-right: auto;
      text-align: center; }
      #login .logo .logotxt .h1chi {
        font-size: clamp(1.05em, 4vw, 2.25em); }
      #login .logo .logotxt .h1eng {
        font-size: clamp(0.5em, 2vw, 1em);
        margin-left: 0; }
      #login .logo .logotxt .h2 {
        font-size: clamp(0.8em, 2vw, 1em);
        margin-left: 0.6em; }
        #login .logo .logotxt .h2 span {
          display: inline-block; }
  #login #loginForm {
    width: 20.6em;
    margin: 0 auto;
    padding: 1em 0;
    text-align: center; }
  #login .input-group {
    display: flex;
    margin-bottom: 0.5em;
    color: #555;
    position: relative; }
  #login .input-label {
    flex: 1; }
  #login .input-field {
    flex: 2; }
  #login input[type=text], #login input[type=password] {
    margin-top: 0.2em;
    text-align: center;
    padding: 0.5em;
    width: 95%; }
  #login input[type=submit], #login button {
    width: 100%;
    color: #fff;
    letter-spacing: 0.2em;
    text-align: center;
    border-radius: 50em;
    margin: 1em 0 0.3em 0;
    font-size: 1.1em;
    padding: 0.8em;
    border: 0;
    font-weight: 700; }
  #login #checkRegistered {
    display: flex;
    gap: 0.5em;
    padding: 0 0.9em;
    margin-top: 1em; }
  #login.publicver h3 {
    margin-bottom: 0;
    text-align: left;
    padding: 0 0.9em;
    font-size: 1.1em; }
  #login.publicver button {
    width: 60%; }
  #login.publicver #loginForm {
    width: 100%; }
    #login.publicver #loginForm form {
      margin: 0 0 -0.8em;
      padding: 0.5em 5em 2em;
      background: #f9f9f9; }
  #login.publicver input[type=text] {
    text-align: left;
    padding-left: 1em;
    padding-right: 1em; }
  #login.publicver input[type=password] {
    text-align: left;
    padding-left: 1em;
    padding-right: 1em; }
  #login.publicver input[type=submit] {
    width: 5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin: 0; }
  #login.publicver .divider {
    margin: 1em; }

#historydiv,
#updatediv {
  width: 90%;
  margin: 0 auto 2em auto; }

.floating {
  position: fixed;
  bottom: 1em;
  right: 0;
  display: flex;
  align-items: center;
  width: calc(100% - 17.5em);
  z-index: 999; }
  .mobilever .floating {
    width: calc(100% - 2em); }

#hotkey {
  display: flex;
  width: calc(94% - 7em);
  align-items: center;
  border-radius: 0.625em;
  background: #f3f3f3; }
  #hotkey .heading {
    border-width: 0 1px 0 0;
    font-size: 1em;
    letter-spacing: 0.2em;
    width: 19em;
    text-align: center;
    padding: 1.3em 0; }
    #hotkey .heading span {
      font-size: 0.75em;
      letter-spacing: 0.15em;
      color: #555; }
  #hotkey #col1, #hotkey #col2 {
    font-size: 0.8em;
    padding-left: 1em; }
    #hotkey #col1 span, #hotkey #col2 span {
      display: inline-block;
      width: 6.3em; }
  #hotkey #col2 {
    border-left: 1px solid #d7d7d7; }

#actionkey {
  display: flex; }

#InsertBtn {
  font-size: 3em;
  padding: 0 0.2em;
  text-align: center;
  letter-spacing: 0;
  line-height: 1em;
  margin: 0 0.15em; }
  #InsertBtn:focus {
    outline: none; }

#SaveBtn {
  padding: 0.8em 1em; }
  #SaveBtn:focus {
    outline: none; }

.btns {
  padding: 1em 0; }
  .btns button {
    background: transparent;
    display: block;
    color: #555;
    letter-spacing: 0;
    width: 5em; }
    .btns button:focus {
      outline: none; }

.fields {
  border-left: 1px dotted #d7d7d7;
  padding: 1em 2em;
  flex: 1;
  -ms-flex: 1; }

.money {
  flex-basis: 5em; }

.maintype {
  flex-basis: 9em; }

.checkbox {
  padding-top: 2em; }

#Main_rows > .row {
  border-bottom: 1px dotted #d7d7d7; }

.contentbeforerow {
  border-bottom: 1px dotted #d7d7d7; }

.contentmargin, .msg, #loginInfo {
  padding: 0.8em 1.5em; }

.recordListTitle {
  display: flex;
  justify-content: space-between; }

.msg, #loginInfo {
  width: calc(100% - 6em);
  display: block;
  margin: 1em 1.5em; }

.msg {
  position: relative; }
  .msg.msg-success:after, .msg.msg-warn:after, .msg.msg-tips:after {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #555;
    border-radius: 100em;
    position: absolute;
    left: 1em;
    top: 0.8em;
    z-index: 1; }
  .msg.msg-success {
    color: green; }
    .msg.msg-success:before {
      content: '';
      display: inline-block;
      position: relative;
      transform: rotate(45deg);
      height: 12px;
      width: 5px;
      margin-right: 1.5em;
      border-bottom: 3px solid #fff;
      border-right: 3px solid #fff;
      z-index: 888; }
    .msg.msg-success:after {
      background: green; }
  .msg.msg-warn {
    color: #D05353; }
    .msg.msg-warn:before {
      content: '!';
      display: inline-block;
      position: relative;
      height: 15px;
      width: 9px;
      margin-right: 1.5em;
      font-weight: 600;
      color: #fff;
      text-align: center;
      z-index: 888; }
    .msg.msg-warn:after {
      background: #D05353; }
  .msg.msg-tips {
    color: #555; }
    .msg.msg-tips:before {
      content: 'i';
      display: inline-block;
      position: relative;
      height: 15px;
      width: 9px;
      margin-right: 1.5em;
      font-weight: 600;
      color: #fff;
      text-align: center;
      z-index: 888; }
    .msg.msg-tips:after {
      background: #555; }

#loginInfo {
  margin-bottom: 2em;
  background: #f5f5f5; }
  #loginInfo .title {
    font-weight: 600; }
  #loginInfo a {
    margin-left: 1em; }

#rows.recordDisplay {
  border-radius: 5px;
  border: 1px solid #d7d7d7;
  margin: 0 1.7em 1em 1.7em;
  padding: 0; }
  #rows.recordDisplay .fields {
    border: 0;
    padding: 0; }
  #rows.recordDisplay .row {
    padding: 1em 1.3em; }
    #rows.recordDisplay .row:not(:last-of-type) {
      border-bottom: 1px solid #d7d7d7; }

.paymentprocess.floating {
  background: #f5f5f5;
  padding: 1em 1.7em;
  width: calc(100% - 17.5em - 3.4em - 2.7em);
  right: 2.7em;
  border: 1px solid #d7d7d7;
  border-radius: 5px;
  font-weight: 900;
  display: flex;
  justify-content: space-between; }
  .mobilever .paymentprocess.floating {
    width: calc(100% - 0em - 3.4em - 2em);
    right: 1em; }

#confirmDiv {
  font-weight: 400;
  color: #4d93fa; }

    /*#tabletlist {
    #rows,
    #Main_rows {
        margin-bottom: 20px;
        width: 75%;
        float: left;
    }

    .row {
        border-top: 1px darkgray solid;
        border-bottom: 1px darkgray solid;
        padding: 5px;
    }

    #hotkey {
        font-size: .95em;
        width: 18%;
        float: right;
        border: 1px darkgray solid;
        padding: 10px;
        margin-bottom: 50px;

        #col1,
        #col2 {
            width: 45%;
            float: left;
            padding: 10px 0;
        }
    }

    #actionkey {
        width: 75%;
        float: left;
        margin-bottom: 40px;
    }
}*/
#loading {
  background: rgba(255, 255, 255, 0.7);
  position: fixed;
  top: 4em;
  left: 16em;
  right: 1em;
  bottom: 0;
  z-index: 990;
  padding: 2em;
  text-align: center; }

@media screen and (max-width: 767px) {
  #login #checkRegistered {
    flex-direction: column;
    align-items: center; }

  #login.publicver h3 {
    text-align: center; } }
@media print {
  header, .menu {
    display: none; }

  .content {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh; } }