@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff');
}

@page {
  margin: 1cm;
  size: landscape;
}

body,
.certification-info,
.custom-info-vietcafe {
  font-family: 'Noto Sans JP', Arial, sans-serif;
}

.vietcafe-logo {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 4rem;
}

.confirm-red-mark {
  width: 100%;
  padding-top: 2.5rem;
  display: flex;
}

.certification-content {
  padding-top: 2rem;
  margin-bottom: 2rem
}

.text-certification {
  color: #000;
  font-family: Noto Sans JP;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  /* line-height: 3rem; */
  letter-spacing: 0.24px;
  display: grid;
}

.date-of-issue {
  color: #000;
  font-family: Noto Sans JP;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  /* line-height: normal; */
  letter-spacing: 1.44px;
  padding-top: 3rem;
}

.invoice {
  width: 595px;
  height: 842px;
  margin: auto;
  /* border: 1px solid #ccc; */
  page-break-after: always;
  padding-top: 6rem;
}

.header {
  text-align: center;
  color: #000;
  font-family: "Noto Sans JP";
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.tb_top {
  display: flex;
  justify-content: flex-end;
  width: 80%;
  padding-top: 3rem;
  border: none;
  color: #000;
  font-family: Noto Sans JP;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

table.bill-info td {
  text-align: left;
}

td.certification-value {
  padding-left: 2rem;
}

.invoice-details {
  margin-top: 20px;
  padding-bottom: 10px;
}

.customer-info {
  width: 60%;
  display: flex;
  margin-top: 4px;
}

.customer-name-wraper {
  width: 100%;
  display: flex;
}

.customer-name {
  width: 90%;
  font-size: 15px;
  font-family: 'Noto Sans JP';
  font-weight: bold;
}

.signature-vietcafe {
  padding-top: 2rem;
  padding-left: 45%;
}

.custom-info-vietcafe {
  color: #000;
  font-family: Noto Sans JP;
  font-size: 15px;
  /* line-height: 4rem; */
  text-align: left;
  padding-top: 60px;
  /* padding-right: 1rem; */
}

.certification-value {
  font-weight: normal;
}

.signature_company {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.logo_company {
  width: 200px;
  height: 45px;
  flex-shrink: 0;
}

#certification-section {
  padding: 7em 0;
  /* background: #f9f9f9; */

  @media screen and (max-width: 780px) {
    margin-top: 0px;
    padding: 3em 0;
  }

  & h2 {
    font-size: 2em;
  }

  .member-search-form {
    padding: 10px 20px;
    height: 43px;
    background-color: white;
  }

  .fix {
    position: sticky;
    left: 0;
    color: #fff;
    background: #333;
  }

  .admin-form {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-left: none;
    height: 54px;
    font-size: 18px;
    font-weight: 300;
    background: white;
    padding: 10px 10px 15px 10px;
    width: 100%;
  }

  .form-group {
    margin-bottom: 5px;
  }

  .label-custom {
    color: #fff;
    background-color: #376439;
    display: flex;
    align-items: center;

    & label {
      margin-bottom: 0;
    }
  }

  .custom-input {
    height: 3.2rem;
    padding: 0 10px;
  }

  .form-select {
    max-width: 30%;
    width: 30%;
    margin-top: -6px;
    height: 4.2rem;
    padding: 0;
    font-size: initial;
  }

  .btn-create {
    background-color: #376439;
    color: #fff;
  }

  @media screen and (max-width: 1024px) {
    .label-custom {
      width: 50%;
    }


    .form-select {
      max-width: 100%;
      width: 100%;
    }
  }

  /* style css admin create insert */
  .error {
    overflow: auto;
    background: #fff0f0;
    padding: 15px;
    margin-bottom: 15px;
    color: red;

    & p:last-child {
      margin-bottom: 0;
    }
  }

  .pagination {
    justify-content: center;
    float: right;
    margin-top: 20px;

    & a {
      line-height: inherit;
    }
  }

  & nav {
    width: max-content;
    margin: 0;
  }

  .pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 0 4px;
  }

  .pagination .active .page-link {
    background-color: #42633e !important;
    color: white !important;
    border: 1px solid #42633e !important;
  }

  .pagination .disabled .page-link {
    pointer-events: none;
    background-color: #ddd;
    border: 1px solid #ddd;
    color: #555;
  }

  .admin-header-menu {
    display: flex;
    justify-content: flex-end;
    height: 40px;
  }

  .vocabulary-title {
    background: #376439;
    padding: 2.5px 10px;
    color: white;
  }

  .edit-done {
    background: #ff0000;
    padding: 2px 10px;
    color: white;
    font-size: 12px;
  }

  .admin-list {

    & input:not(.member-search-form) {
      margin: 2px;
      line-height: 1em;
      border: solid 1px;
    }

    & input[type="submit"] {
      padding: 7px 5px;
      width: auto;
      background: #376439;
      color: white;
    }

    & input[type="datetime-local"] {
      line-height: 1.5em;
    }

    & input[type="month"] {
      line-height: 1.7em;
    }

    & select {
      margin: 2px;
    }

    .file-upload {
      border: none !important;
      width: auto !important;
    }

    .require {
      background-color: #fce7e7;
      line-height: 1em;
      border: solid 1px;
    }

    .fix {
      position: sticky;
      left: 0;
      color: #fff;
      background: #333;
    }

    .file-upload {
      border: none !important;
      width: auto !important;
    }

    .important {
      background: #666666;
      color: white;
    }

    .important_result {
      background: #ebebeb;
    }

  }
}