@charset "UTF-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
  background-color: #f6f6f6;
}
body.white-bg{
  background-color: #fff;
}
ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

* html .clearfix {
  height: 1%;
}

*:first-child + html .clearfix {
  min-height: 1%;
}

a {
  text-decoration: none;
  outline: none;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

a:hover {
  text-decoration: none;
}

*:link,
*:visited,
*:hover,
*:active,
*:focus,
* {
  border: none;
  outline: none;
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: "Noto Sans TC", Arial, "微軟正黑體", "新細明體", sans-serif;
  font-weight: normal;
  color: #333;
}

p {
  font-size: 0.9375em;
}

a {
  cursor: pointer;
  text-decoration: none;
  outline: none;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

a:hover {
  text-decoration: none;
}

body {
  font-size: 100%;
  border-color: #9e9e9e;
}

.c-red {
  color: #f44336;
}

.btn--primary-xl {
  font-size: 0.875rem;
  background-color: #11948a;
  color: #fff;
  border-radius: 50px;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  min-width: 150px;
  height: 54px;
  line-height: 54px;
  cursor: pointer;
  border: 1px transparent solid;
  background-color: #11948a;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.btn--primary-xl:hover {
  opacity: 0.9;
}

.btn--primary-l {
  font-size: 0.875rem;
  background-color: #11948a;
  color: #fff;
  border-radius: 50px;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  min-width: 150px;
  height: 46px;
  line-height: 46px;
  cursor: pointer;
  border: 1px transparent solid;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.btn--primary-l:hover {
  opacity: 0.9;
}

.btn--primary-m {
  font-size: 0.875rem;
  background-color: #11948a;
  color: #fff;
  border-radius: 50px;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  min-width: 130px;
  height: 42px;
  line-height: 42px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.btn--primary-m:hover {
  opacity: 0.9;
}
.btn--primary-m span {
  padding-left: 6px;
}

.btn--primary-line-m {
  font-size: 0.875rem;
  border: 1px #11948a solid;
  color: #11948a;
  border-radius: 50px;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  min-width: 130px;
  height: 42px;
  line-height: 42px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
}
.btn--primary-line-m span {
  padding-left: 6px;
}

.btn--primary-s {
  min-width: 122px;
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  background-color: #ebf5f4;
  border-radius: 10px;
  color: #11948a;
  font-size: 0.875rem;
}
.btn--primary-s:hover {
  opacity: 0.9;
}
.btn--primary-s span {
  padding-left: 6px;
}

.btn--bg-w {
  background-color: #fff;
  color: #11948a;
}


.login-container input {
  box-sizing: border-box;
  border: 1px transparent solid;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.login-container input:hover {
  border: 1px #e2e2e2 solid;
}
.login-container input:focus {
  border: 1px #64b9b3 solid;
}

.popup-container .fillin-box input, .middle-container .main-container input {
  height: 46px;
  line-height: 46px;
  padding: 0 22px;
  border-radius: 50px;
}

.popup-container textarea,#blank-detail-info textarea {
  width: 100%;
  min-height: 105px;
  padding: 16px 22px;
  line-height: 24px;
  border-radius: 18px;
}

.the-select {
  position: relative;
  background-color: #f8f8f8;
  display: block;
  border-radius: 50px;
  position: relative;
}
.the-select::after {
  content: "";
  position: absolute;
  top: calc(50% - 4.5px);
  right: 15px;
  display: inline-block;
  width: 25px;
  height: 9px;
  background: url(../images/svg/arrow-down.svg) center center no-repeat;
  background-size: contain;
  font-weight: 900;
  pointer-events: none;
}
.the-select select {
  width: 100%;
  height: 46px;
  padding: 0px 32px 0px 22px;
  font-size: 0.875rem;
  line-height: 46px;
  color: #333;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 0.01px;
  background-color: transparent;
  word-break: break-all;
  text-overflow: ellipsis;
}
.the-select select::-ms-expand {
  display: none;
}
.the-select select option::-ms-expand {
  display: none;
}
.the-select select option {
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari 和 Chrome */
  appearance: none;
}

input.default {
  width: 100%;
  height: 46px;
  border-radius: 50px;
}

input.has-error {
  border: 1px #f44336 solid;
}
input.has-error:hover, input.has-error:focus {
  border: 1px #f44336 solid;
}

.option-list {
  position: relative;
  padding: 10px 0;
}
.option-list input[type=checkbox]:not(old),
.option-list input[type=radio]:not(old) {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100% !important;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.option-list input[type=checkbox]:not(old) + label {
  display: inline-block;
  padding-left: 36px;
  line-height: 24px;
  z-index: 1;
  font-size: 0.875rem;
}
.option-list input[type=checkbox]:not(old) + label span {
  font-size: 0.688rem;
}
.option-list input[type=checkbox]:not(old) + label span.day {
  color: #7c7c7c;
  display: block;
}
.option-list input[type=checkbox]:not(old) + label::before {
  position: absolute;
  content: "";
  left: 1px;
  top: 10px;
  background-color: #ebf5f4;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.option-list input[type=checkbox]:not(old) + label::after {
  position: absolute;
  content: "";
  left: 4px;
  top: 11px;
  width: 23px;
  height: 18px;
  display: none;
  background: url("../images/svg/check-yello.svg") no-repeat center center;
  pointer-events: none;
}
.option-list input[type=checkbox]:not(old):checked + label {
  color: #11948a;
  font-weight: bold;
}
.option-list input[type=checkbox]:not(old):checked + label span.day {
  color: #7c7c7c;
  font-weight: normal;
}
.option-list input[type=checkbox]:not(old):checked + label::after {
  display: block;
}
.option-list input[type=radio]:not(old) + label {
  cursor: pointer;
  display: inline-block;
  padding-left: 34px;
  line-height: 24px;
  font-size: 0.875rem;
}
.option-list input[type=radio]:not(old) + label::before {
  position: absolute;
  content: "";
  left: 1px;
  top: 12px;
  background-color: #ebf5f4;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.option-list input[type=radio]:not(old) + label::after {
  position: absolute;
  content: "";
  left: 4px;
  top: 11px;
  width: 23px;
  height: 18px;
  display: none;
  background: url("../images/svg/check-yello.svg") no-repeat center center;
}
.option-list input[type=radio]:not(old):checked + label {
  color: #11948a;
  font-weight: bold;
}
.option-list input[type=radio]:not(old):checked + label::after {
  display: block;
}

.btn-switch {
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.btn-switch p {
  color: #333;
  padding-right: 10px;
}
.btn-switch p.open {
  color: #11948a;
  font-weight: bold;
}

.switch-type {
  position: relative;
}
.switch-type .switch-button {
  display: inline-block;
  position: relative;
  height: 22px;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  border-radius: 22px;
}
.switch-type .switch-button:before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 22px;
  background-color: #fff;
  border-radius: 22px;
  box-sizing: border-box;
  border: 2px solid #eee;
  transition: all 0.2s linear;
}
.switch-type .switch-button:after {
  position: absolute;
  left: 2px;
  top: 2px;
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 18px;
  transition: all 0.2s linear;
  box-shadow: 0px 1px 3px #bbb;
}
.switch-type input {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.switch-type input:checked ~ .switch-button:before {
  background-color: #11948a;
  border: 1px solid #11948a;
}
.switch-type input:checked ~ .switch-button:after {
  left: 22px;
}

.show-add-list {
  width: 100%;
  position: absolute;
  top: 46px;
  z-index: 2;
}
.show-add-list ul {
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
}
.show-add-list ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px 10px 18px;
  min-height: 42px;
  background-color: #ebf5f4;
  position: relative;
  transition: none;
}
.show-add-list ul li a p {
  width: calc(100% - 10px);
  font-size: 0.813rem;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 15px;
  overflow: hidden;
}
.show-add-list ul li a p span {
  color: #11948a;
}
.show-add-list ul li a p span.icon {
  padding-left: 10px;
}
.show-add-list ul li a::after {
  content: "";
  position: absolute;
  right: 18px;
  top: calc(50% - 6px);
  width: 12px;
  height: 12px;
  display: block;
  background: url(../images/svg/plus-solid-w.svg) center center no-repeat;
  background-size: contain;
  opacity: 0;
}
.show-add-list ul li a:hover {
  background-color: #11948a;
}
.show-add-list ul li a:hover p {
  color: #fff;
}
.show-add-list ul li a:hover p span {
  color: #fff;
}
.show-add-list ul li a:hover::after {
  opacity: 1;
}
.show-add-list ul li.set a::after {
  display: none;
}
.show-add-list ul li.set a span {
  padding-left: 5px;
}

.logo {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 248px;
  height: 50px;
  background-image: url(../images/svg/logo.svg);
}

p.text-remind {
  padding: 5px 0;
  color: #888888;
  font-size: 0.688rem;
  line-height: 18px;
}

.bg-c-1 {
  background-color: #11948a;
  color: #fff;
}

.bg-c-2 {
  background-color: #b0e745;
  color: #fff;
}

.bg-c-3 {
  background-color: #7487e7;
  color: #fff;
}

.bg-c-4 {
  background-color: #ca8dbe;
  color: #fff;
}

.bg-c-org {
  background-color: #ffad0a;
}

.footer-container {
  padding: 10px;
  text-align: center;
  width: 100%;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-container p {
  font-size: 0.813rem;
  color: #333333;
}
.footer-container p a {
  color: #11948a;
  text-decoration: underline;
}
.footer-container p a:hover {
  text-decoration: none;
}
.circle-btn{
  color: white;
  width:30px;
  height: 30px;
  background-color: #11948A;
  display: block;
  border-radius: 30px;
  margin: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle-btn:hover{
  background-color: #09564f;
}
.apply-operate{
  display: flex;
  justify-content: center;
}
@media all and (max-width: 600px) {
  .footer-container p a {
    font-size: 0.688rem;
  }
}

.login-container {
  width: 100%;
  height: calc(100vh - 80px);
  min-height: 540px;
  background-color: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-container input {
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
}
.login-container .content {
  padding: 40px 0;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.login-container .logo {
  margin: 0 auto;
}
@media all and (max-width: 760px) {
  .login-container .logo {
    max-width: 210px;
  }
}
.login-container h2.main-title {
  font-size: 0.875rem;
  letter-spacing: 10px;
  padding: 30px 10px;
  text-align: center;
  color: #5e5e5e;
  font-weight: bold;
}
.login-container p.sub-title {
  text-align: center;
  font-size: 0.875rem;
  color: #5e5e5e;
}
.login-container p a {
  color: #11948a;
}
.login-container form {
  max-width: 300px;
  padding: 60px 0 20px 0;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.login-container form input {
  display: block;
}
.login-container form button {
  width: 100%;
}
.login-container form p.text-error {
  color: #f44336;
  position: absolute;
  width: 100%;
  top: 35px;
  font-size: 0.875rem;
}
.login-container form p.text-forget {
  padding: 10px 0 30px 0;
  font-size: 0.813rem;
  text-align: right;
  text-decoration: underline;
}
.login-container form p.text-forget:hover {
  text-decoration: none;
}
.login-container form fieldset {
  padding: 8px 0;
}

.header-container {
  padding: 9px 10px;
  width: 100%;
  min-width: 320px;
  background-color: #fff;
  -webkit-position: sticky;
  -moz-position: sticky;
  -ms-position: sticky;
  -o-position: sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
}
.header-container .logo {
  width: 140px;
  margin-left: 10px;
  background-position: center 12px;
}
@media all and (max-width: 760px) {
  .header-container .logo {
    width: 100px;
    height: 36px;
    background-position: center center;
  }
}
.header-container p {
  padding: 0 20px;
  font-size: 0.688rem;
  line-height: 50px;
  letter-spacing: 3px;
  color: #5e5e5e;
}
@media all and (max-width: 760px) {
  .header-container p.text-title {
    line-height: inherit;
    letter-spacing: 2px;
    position: absolute;
    top: 42px;
    left: 55px;
    font-size: 0.688rem;
    color: #a7a7a7;
    transform-origin: 0;
    transform: scale(0.8);
  }
}
.header-container .user-info {
  margin-left: auto;
  padding-top: 3px;
  position: relative;
}
.header-container .user-info .profile {
  cursor: pointer;
}
.header-container .user-info .photo-portrait {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  border-radius: 50px;
  background-color: #11948a;
  color: #fff;
}
.header-container .user-info p.user-name {
  display: inline-block;
  float: none;
  padding: 0 10px;
  line-height: 40px;
}
.header-container .user-info .menu {
  display: none;
  position: absolute;
  top: 50px;
  right: 0px;
}
.header-container .user-info .menu ul {
  border-radius: 18px;
  overflow: hidden;
}
.header-container .user-info .menu ul li {
  text-align: center;
  overflow: hidden;
}
.header-container .user-info .menu ul li a {
  width: 120px;
  display: block;
  color: #fff;
  font-size: 0.813rem;
  line-height: 48px;
  background-color: rgba(0, 0, 0, 0.7);
}
.header-container .user-info .menu ul li a:hover {
  background-color: rgb(0, 0, 0);
}

ul.edit-tool li {
  float: left;
  padding: 0 3px;
}
ul.edit-tool li a {
  color: #11948a;
  width: 45px;
  height: 45px;
  display: block;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul.edit-tool li a:hover {
  background-color: #fff;
}
@media all and (max-width: 1200px) {
  ul.edit-tool li a {
    width: 40px;
    height: 40px;
  }
}

.middle-container {
  min-width: 320px;
  min-height: calc(100vh - 68px);
  display: flex;
  flex-grow: inherit;
}
.middle-container .side-menu {
  width: 180px;
  min-width: 180px;
  -webkit-position: sticky;
  -moz-position: sticky;
  -ms-position: sticky;
  -o-position: sticky;
  position: sticky;
  top: 68px;
  height: calc(100vh - 68px);
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.middle-container .side-menu ul {
  width: 190px;
  padding-bottom: 20px;
}
.middle-container .side-menu ul li a {
  color: #333;
}
.middle-container .side-menu ul li a:hover {
  color: #11948a;
}
.middle-container .side-menu h4 {
  color: #333;
  font-size: 0.813rem;
  padding-left: 64px;
  position: relative;
  line-height: 50px;
  font-weight: bold;
}
.middle-container .side-menu h4 a {
  color: #333;
  display: block;
}
.middle-container .side-menu h4::before {
  position: absolute;
  content: "";
}
.middle-container .side-menu h4.icon-order::before {
  top: calc(50% - 14.5px);
  left: 19px;
  width: 23px;
  height: 28px;
  background-image: url(../images/svg/icon_menu_order.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.middle-container .side-menu h4.icon-customer::before {
  top: calc(50% - 14px);
  left: 15px;
  width: 36px;
  height: 28px;
  background-image: url(../images/svg/icon_menu_customer.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.middle-container .side-menu h4.icon-product::before {
  top: calc(50% - 12px);
  left: 15px;
  width: 30px;
  height: 24px;
  background-image: url(../images/svg/icon_menu_product.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.middle-container .side-menu h4.icon-permission::before {
  top: calc(50% - 15.5px);
  left: 15px;
  width: 31px;
  height: 31px;
  background-image: url(../images/svg/icon_menu_permission.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.middle-container .side-menu h4.icon-user::before {
  top: calc(50% - 15.5px);
  left: 15px;
  width: 33px;
  height: 34px;
  background-image: url(../images/svg/icon_menu_user.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.middle-container .side-menu h4.icon-payment::before {
  top: calc(50% - 17.5px);
  left: 14px;
  width: 30px;
  height: 35px;
  background-image: url(../images/svg/icon_menu_payment.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.middle-container .side-menu p {
  padding-left: 64px;
  line-height: 24px;
  margin: 5px 0;
  font-size: 0.813rem;
  color: #333;
}
.middle-container .side-menu p:first {
  margin-top: 10px;
}
.middle-container .side-menu .hide-subtitle {
  width: 60px;
}
.middle-container .side-menu .hide-subtitle ul {
  width: 190px;
}
.middle-container .side-menu .hide-subtitle p {
  display: none;
}
.middle-container .side-menu .selected-2 h4 {
  background-color: #ebf5f4;
}
.middle-container .side-menu .selected h4 {
  background-color: #11948a;
  color: #fff;
}
.middle-container .side-menu .selected h4 a {
  color: #fff;
}
.middle-container .side-menu .selected h4:hover {
  background-color: #11948a;
}
.middle-container .side-menu .selected h4:hover a {
  color: #fff;
}
.middle-container .side-menu .selected h4.icon-order::before {
  background-image: url(../images/svg/icon_menu_order_w.svg);
}
.middle-container .side-menu .selected h4.icon-customer::before {
  background-image: url(../images/svg/icon_menu_customer_w.svg);
}
.middle-container .side-menu .selected h4.icon-product::before {
  background-image: url(../images/svg/icon_menu_product_w.svg);
}
.middle-container .side-menu .selected h4.icon-permission::before {
  background-image: url(../images/svg/icon_menu_permission_w.svg);
}
.middle-container .side-menu .selected h4.icon-user::before {
  background-image: url(../images/svg/icon_menu_user_w.svg);
}
.middle-container .side-menu .selected h4.icon-payment::before {
  background-image: url(../images/svg/icon_menu_payment_w.svg);
}
.middle-container .side-menu .sub-selected {
  color: #11948a;
}
@media all and (max-width: 650px) {
  .middle-container .side-menu {
    position: fixed;
    z-index: 5;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
  }
}
.middle-container .menu-show-off {
  width: 60px;
  min-width: 60px;
}
.middle-container .menu-show-off p {
  display: none;
}
.middle-container .menu-show-off h4:hover {
  background-color: #ebf5f4;
  cursor: pointer;
}
@media all and (max-width: 650px) {
  .middle-container .menu-show-off {
    width: 0;
    min-width: 0;
  }
}
.middle-container .main-container {
  border-left: 1px #dddddd solid;
  padding: 25px 30px;
  min-height: calc(100vh - 68px);
  flex: auto;
}
.middle-container .main-container h3.main-title {
  font-size: 1.25rem;
  color: #21534f;
  font-weight: bold;
  letter-spacing: 10px;
  padding: 10px 20px;
}
.middle-container .main-container h4.co-name {
  font-size: 1.25rem;
  color: #11948a;
  font-weight: bold;
  padding: 10px 0px;
}
.middle-container .main-container .tools-bar {
  padding: 10px 0 10px 0;
  width: 100%;
}
.middle-container .main-container .tools-bar.tool-bar-black-card-expired {
    display: flex;
    align-items: center;
}
.middle-container .main-container .tools-bar h4.main-title {
  min-width: 125px;
  line-height: 42px;
  float: left;
  letter-spacing: 3px;
  padding-right: 10px;
  font-size: 1.125rem;
  color: #11948a;
  font-weight: bold;
}
.middle-container .main-container .tools-bar .search-box {
  position: relative;
  width: 100%;
  max-width: 465px;
  float: left;
  margin: 0 15px 15px 0;
}
.middle-container .main-container .tools-bar .search-box input {
  line-height: 42px;
  height: 42px;
  text-align: left;
  padding: 0 20px 0 50px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
}
.middle-container .main-container .tools-bar .search-box input:hover, .middle-container .main-container .tools-bar .search-box input:focus {
  border: 1px transparent solid;
}
/*20250917 upd start*/
.middle-container .main-container .tools-bar .search-box .reimburse {
  position: absolute;
  right: 105px;
  top: 0;
  width: 75px;
  text-align: center;
  line-height: 42px;
  font-weight: bold;
  font-size: 0.813rem;
}
.middle-container .main-container .tools-bar .search-box .reimburse input[type="checkbox"] {
  height: 20px;
  width: 20px;
  vertical-align: middle;
}
/*20250917 upd end*/
.middle-container .main-container .tools-bar .search-box .btn-text {
  position: absolute;
  right: 0;
  top: 0;
  width: 105px;
  text-align: center;
  border-radius: 0% 50px 50px 0;
  line-height: 42px;
  color: #11948a;
  font-weight: bold;
  font-size: 0.813rem;
}
.middle-container .main-container .tools-bar .search-box .btn-text a {
  display: block;
  background-color: #ebf5f4;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  border-radius: 0 50px 50px 0;
}
.middle-container .main-container .tools-bar .search-box .btn-text a:hover {
  background-color: #dfedeb;
}
.middle-container .main-container .tools-bar .search-box::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 21px;
  width: 17px;
  height: 17px;
  display: block;
  background-image: url(../images/svg/search-solid.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media all and (max-width: 900px) {
  .middle-container .main-container .tools-bar .search-box {
    width: 100%;
    max-width: inherit;
  }
}
.middle-container .main-container .tools-bar .filter-box {
  float: left;
  position: relative;
}
.middle-container .main-container .tools-bar .filter-box a {
  font-size: 13px;
  font-weight: bold;
}
.middle-container .main-container .tools-bar .filter-box .filter-list {
  display: none;
  position: absolute;
  left: 0;
  top: 52px;
  z-index: 3;
  width: 100%;
}
.middle-container .main-container .tools-bar .filter-box .filter-list::after {
  content: "";
  position: absolute;
  top: -8px;
  left: calc(50% - 8.5px);
  border-style: solid;
  border-width: 0 8.5px 8px 8.5px;
  border-color: transparent transparent #11948a transparent;
}
.middle-container .main-container .tools-bar .filter-box .filter-list ul {
  background-color: #11948a;
  border-radius: 20px;
  padding: 10px 0;
  overflow: hidden;
}
.middle-container .main-container .tools-bar .filter-box .filter-list ul li {
  padding: 0px 5px 0px 20px;
}
.middle-container .main-container .tools-bar .filter-box .filter-list ul li:hover {
  background-color: #289e95;
}
.middle-container .main-container .tools-bar .filter-box .filter-list ul li .option-list {
  padding: 5px 0;
}
.middle-container .main-container .tools-bar .filter-box .filter-list ul li .option-list input[type=checkbox]:not(old) + label,
.middle-container .main-container .tools-bar .filter-box .filter-list ul li .option-list input[type=checkbox]:not(old):checked + label,
.middle-container .main-container .tools-bar .filter-box .filter-list ul li .option-list input[type=radio]:not(old) + label,
.middle-container .main-container .tools-bar .filter-box .filter-list ul li .option-list input[type=radio]:not(old):checked + label {
  color: #fff;
  font-weight: bold;
  font-size: 13px;
}
.middle-container .main-container .tools-bar .filter-box .filter-list ul li .option-list input[type=checkbox]:not(old) + label::after,
.middle-container .main-container .tools-bar .filter-box .filter-list ul li .option-list input[type=radio]:not(old) + label::after {
  top: 5px;
}
.middle-container .main-container .tools-bar .filter-box .filter-list ul li .option-list input[type=checkbox]:not(old) + label::before,
.middle-container .main-container .tools-bar .filter-box .filter-list ul li .option-list input[type=radio]:not(old) + label::before {
  top: 7px;
}
.middle-container .main-container .tools-bar .filter-box .for-audit {
  left: -18px;
  width: 165px;
}
.middle-container .main-container .tools-bar .filter-box .percentage-step {
  width: 150px;
  left: -10px;
}
.middle-container .main-container .tools-bar .filter-box .percentage-step ul li .option-list label {
  padding-left: 75px;
}
.middle-container .main-container .tools-bar .filter-box .percentage-step ul li .option-list::before {
  position: absolute;
  top: calc(50% - 2.5px);
  left: 33px;
  content: "";
  width: 35px;
  height: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.middle-container .main-container .tools-bar .filter-box .percentage-step ul li .step-one::before {
  background-image: url(../images/svg/percentage-01.svg);
}
.middle-container .main-container .tools-bar .filter-box .percentage-step ul li .step-two::before {
  background-image: url(../images/svg/percentage-02.svg);
}
.middle-container .main-container .tools-bar .filter-box .percentage-step ul li .step-three::before {
  background-image: url(../images/svg/percentage-03.svg);
}
.middle-container .main-container .tools-bar .filter-box .percentage-step ul li:first-child .option-list label {
  padding-left: 34px;
}
.middle-container .main-container .tools-bar .filter-search {
  width: 355px;
  float: left;
}
.middle-container .main-container .tools-bar .filter-search p.filter-title {
  float: left;
  line-height: 42px;
  padding: 0 15px;
  font-size: 0.875rem;
  color: #11948a;
  font-weight: bold;
}
.middle-container .main-container .tools-bar .filter-search .who {
  font-size: 0.875rem;
  border: 1px #11948a solid;
  color: #11948a;
  border-radius: 50px;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  float: left;
  padding: 0 40px 0 15px;
  position: relative;
  margin: 0 8px 5px 0;
}
.middle-container .main-container .tools-bar .filter-search .who p {
  color: #11948a;
  text-align: left;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.middle-container .main-container .tools-bar .filter-search .who a {
  position: absolute;
  width: 40px;
  right: 0;
  top: 0;
  text-align: center;
  line-height: 42px;
}
.middle-container .main-container .tools-bar .filter-search .search-box {
  margin-right: 0;
  max-width: 236px;
}
.middle-container .main-container .tools-bar .filter-search .search-box:after {
  left: initial;
  right: 20px;
}
.middle-container .main-container .tools-bar .filter-search .search-box .show-add-list {
  top: 42px;
  z-index: 3;
}
.middle-container .main-container .tools-bar .filter-search .search-box input {
  padding: 0 50px 0 22px;
}
@media all and (max-width: 900px) {
  .middle-container .main-container .tools-bar .filter-search {
    width: 100%;
  }
}
.middle-container .main-container .tools-bar .filter-w100 {
  width: 100%;
}
.middle-container .main-container .tools-bar .audit-filter {
  float: left;
  padding-right: 20px;
}
.middle-container .main-container .tools-bar .audit-filter ul {
  border: 1px solid #11948a;
  border-radius: 50px;
  overflow: hidden;
}
.middle-container .main-container .tools-bar .audit-filter ul li {
  float: left;
}
.middle-container .main-container .tools-bar .audit-filter ul li a {
  display: block;
}
.middle-container .main-container .tools-bar .audit-filter ul li a p {
  color: #11948a;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  min-width: 90px;
  padding: 0 10px;
  font-size: 0.813rem;
  letter-spacing: 1px;
}
.middle-container .main-container .tools-bar .audit-filter ul li a:hover {
  background-color: #ebf5f4;
}
.middle-container .main-container .tools-bar .audit-filter ul li a.selected {
  background-color: #11948a;
  color: #fff;
}
.middle-container .main-container .tools-bar .audit-filter ul li a.selected p {
  color: #fff;
}
.middle-container .main-container .tools-bar .audit-filter ul li:first-child {
  border-right: 1px solid #11948a;
}
.middle-container .main-container .tools-bar a.btn-add {
  float: right;
  font-size: 0.813rem;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
}
@media all and (max-width: 900px) {
  .middle-container .main-container .tools-bar h4.main-title {
    font-size: 1rem;
    width: 100%;
  }
  .middle-container .main-container .tools-bar .audit-filter {
    padding-bottom: 15px;
  }
}
@media all and (max-width: 600px) {
  .middle-container .main-container .tools-bar h4.main-title {
    text-align: center;
    padding-right: 0;
  }
}
.middle-container .main-container .tools-date {
  padding: 18px 25px;
  background-color: #fff;
  border-radius: 18px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
  margin: 0 0 25px 0;
}
.middle-container .main-container .tools-date form {
  position: relative;
}
.middle-container .main-container .tools-date form fieldset {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.middle-container .main-container .tools-date form fieldset.dotted-text {
  padding: 8px 5px;
  border-bottom: 1px dashed #AEAEAE;
  margin-bottom: 10px;
}
.middle-container .main-container .tools-date label.item-title {
  width: 92px;
  padding: 0 5px;
  color: #11948a;
  line-height: 42px;
  font-size: 0.875rem;
  font-weight: bold;
}
.middle-container .main-container .tools-date p.btn-text {
  width: 105px;
  text-align: center;
  line-height: 42px;
  color: #11948a;
  font-weight: bold;
  font-size: 0.813rem;
}
.middle-container .main-container .tools-date p.btn-text a {
  display: block;
  background-color: #ebf5f4;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  border-radius: 50px 50px;
}
.middle-container .main-container .tools-date p.btn-text a:hover {
  background-color: #dfedeb;
}
.middle-container .main-container .tools-date .confirm {
  width: calc(100% - 92px);
}
.middle-container .main-container .tools-date .confirm .w_50 {
  max-width: 348px;
}
.middle-container .main-container .tools-date .confirm .the-select select {
  height: 42px;
  line-height: 42px;
  font-size: 0.813rem;
}
.middle-container .main-container .tools-date .confirm .both-for-date {
  width: 100%;
  max-width: 330px;
  background-color: #F8F8F8;
  border-radius: 50px 0 0 50px;
  position: relative;
  float: left;
}
.middle-container .main-container .tools-date .confirm .both-for-date::before {
  content: "～";
  line-height: 42px;
  position: absolute;
  top: 0;
  left: calc(50% - 8px);
  color: #11948a;
  font-weight: bold;
}
.middle-container .main-container .tools-date .confirm .both-for-date input {
  float: left;
  width: 50%;
  background: transparent;
  height: 42px;
  line-height: 42px;
}
.middle-container .main-container .tools-date .confirm .has-error {
  background-color: #ffe9e9;
}
.middle-container .main-container .tools-date .confirm p.text-error {
  color: #f44336;
  position: absolute;
  left: 20px;
  bottom: -13px;
  font-size: 0.688rem;
}
.middle-container .main-container .tools-date .confirm p.btn-text {
  float: left;
}
.middle-container .main-container .tools-date .confirm p.btn-text a {
  border-radius: 0 50px 50px 0;
}
.middle-container .main-container .tools-date .bottom-btn {
  position: absolute;
  right: 0;
  bottom: 0;
}
.middle-container .main-container .tools-date .bottom-btn p.btn-text {
  margin: 0 auto;
}
.middle-container .main-container .tools-date .bottom-btn p.btn-text a {
  background-color: #11948a;
  color: #fff;
}
.middle-container .main-container .tools-date .bottom-btn p.btn-text a:hover {
  opacity: 0.9;
}
@media all and (max-width: 760px) {
  .middle-container .main-container .tools-date {
    padding: 15px 20px;
  }
  .middle-container .main-container .tools-date .confirm {
    width: 100%;
  }
  .middle-container .main-container .tools-date .confirm .both-for-date {
    float: none;
    max-width: 100%;
    border-radius: 50px;
  }
  .middle-container .main-container .tools-date .confirm p.btn-text {
    float: none;
    padding-top: 15px;
    margin: 0 auto;
  }
  .middle-container .main-container .tools-date .confirm p.btn-text a {
    border-radius: 50px;
  }
  .middle-container .main-container .tools-date .confirm .filter-tools {
    max-width: 100%;
  }
  .middle-container .main-container .tools-date .bottom-btn {
    padding-top: 10px;
    position: initial;
  }
}
.middle-container .main-container .pages {
  width: 100%;
  padding: 30px 0 15px 0;
  font-size: 0.813rem;
  text-align: left;
}
.middle-container .main-container .pages p {
  display: inline-block;
  color: #21534f;
  letter-spacing: 2px;
  padding-right: 25px;
}
.middle-container .main-container .pages ul {
  display: inline-block;
  text-align: left;
}
.middle-container .main-container .pages ul li {
  display: inline-block;
}
.middle-container .main-container .pages ul li a {
  padding: 0 5px;
  letter-spacing: 2px;
  display: inline-block;
  color: #21534f;
  position: relative;
}
.middle-container .main-container .pages ul li a:hover {
  text-decoration: underline;
}
.middle-container .main-container .pages ul li a.selected {
  color: #64b9b3;
  font-size: 1.188rem;
  font-weight: bold;
}
.middle-container .main-container .pages ul li a.selected:hover {
  cursor: text;
  text-decoration: none;
}
.middle-container .main-container .pages ul li a.selected::after {
  position: absolute;
  content: "";
  width: 12px;
  height: 3px;
  display: block;
  bottom: -6px;
  left: calc(50% - 6px);
  background-color: #ffad0a;
}
.middle-container .main-container .pages ul li a.none {
  color: #a0a0a0;
  cursor: text;
}
.middle-container .main-container .pages ul li a.none:hover {
  text-decoration: none;
}
@media all and (max-width: 1200px) {
  .middle-container .main-container .pages {
    text-align: center;
  }
}
.middle-container .main-container .member-content {
  position: relative;
  width: 100%;
  margin-top: 20px;
  max-width: 695px;
  background-color: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
}
.middle-container .main-container .member-content ul.edit-tool {
  position: absolute;
  bottom: 20px;
  right: 15px;
}
.middle-container .main-container .member-content ul.edit-tool li a {
  background-color: #ebf5f4;
}
.middle-container .main-container .member-content ul.edit-tool li a:hover {
  background-color: #fff;
}
.middle-container .main-container .member-content .top-info {
  width: 100%;
  background-color: #ebf5f4;
  padding: 30px 50px;
}
.middle-container .main-container .member-content .top-info h4.name {
  float: left;
  color: #11948a;
  font-size: 1.063rem;
  font-weight: bold;
}
.middle-container .main-container .member-content .top-info p {
  float: right;
  font-size: 0.875rem;
  padding-top: 5px;
}
.middle-container .main-container .member-content ul.member-info {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 15px 50px;
  border-bottom: 1px dashed #aeaeae;
}
.middle-container .main-container .member-content ul.member-info li {
  width: 100%;
  padding: 12px 0;
}
.middle-container .main-container .member-content ul.member-info li p {
  font-size: 0.875rem;
  line-height: 0.938rem;
}
.middle-container .main-container .member-content ul.member-info li p a {
  color: #333;
}
.middle-container .main-container .member-content ul.member-info li p a.mail {
  text-decoration: underline;
}
.middle-container .main-container .member-content ul.member-info li p a.mail:hover {
  text-decoration: none;
}
.middle-container .main-container .member-content ul.member-info li p a:hover {
  text-decoration: underline;
}
.middle-container .main-container .member-content ul.member-info li p a.change-pw {
  color: #11948a;
  text-decoration: underline;
  margin-left: 30px;
  display: inline-block;
  font-size: 0.813rem;
}
.middle-container .main-container .member-content ul.member-info li p a.change-pw:hover {
  text-decoration: none;
}
.middle-container .main-container .member-content ul.member-info li .item-title {
  float: left;
  width: 120px;
  text-align: right;
  padding-right: 40px;
  font-weight: bold;
}
.middle-container .main-container .member-content ul.member-info li .input-value {
  float: left;
  width: calc(100% - 120px);
}
.middle-container .main-container .member-content ul.member-info:last-child {
  border: none;
}
@media all and (max-width: 600px) {
  .middle-container .main-container {
    padding: 20px;
  }
  .middle-container .main-container .member-content .top-info {
    padding: 20px 25px;
  }
  .middle-container .main-container .member-content .top-info h4.name,
  .middle-container .main-container .member-content .top-info p {
    float: none;
    text-align: center;
  }
  .middle-container .main-container .member-content ul.member-info {
    padding: 15px 25px;
  }
  .middle-container .main-container .member-content ul.member-info li .item-title {
    width: 90px;
    padding-right: 20px;
  }
  .middle-container .main-container .member-content ul.member-info li .input-value {
    width: calc(100% - 90px);
  }
}
@media all and (max-width: 479px) {
  .middle-container .main-container {
    padding: 20px 15px;
  }
}
.middle-container .data-list {
  width: 100%;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 18px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
}
.middle-container .data-list .card {
  width: 100%;
  border-bottom: 1px dashed #aeaeae;
  position: relative;
}
.middle-container .data-list .card .go-detail {
  width: 100%;
  display: block;
  min-height: 70px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.middle-container .data-list .card p.label-audit {
  position: absolute;
  right: 0px;
  top: 0px;
  font-size: 0.688rem;
  color: #fff;
  background-color: #ffad0a;
  float: none;
  width: initial;
  padding: 5px 6px;
  z-index: 1;
  margin-top: 0;
  border-radius: 0 0 0 8px;
  text-align: center;
}
.middle-container .data-list .card p.label-audit svg {
  font-size: 0.938rem;
}
.middle-container .data-list .card p.label-audit img {
  max-width: 21px;
  padding-left: 3px;
  max-height: 22px;
}
.middle-container .data-list .card p.label-audit span {
  padding: 8px 0 2px 0;
  display: block;
}
.middle-container .data-list .card p.audit-hide {
  background-color: #9e9e9e;
}
.middle-container .data-list .card p.audit-agree {
  background-color: #11948a;
}
.middle-container .data-list .card p.audit-reject {
  background-color: #d54848;
}
.middle-container .data-list .card h4.product-name {
  float: left;
  color: #21534f;
  font-size: 0.938rem;
  line-height: 1.2rem;
  width: calc(70% - 150px);
  position: relative;
  font-weight: bold;
  letter-spacing: 1px;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 18px;
  overflow: hidden;
}
.middle-container .data-list .card h4.customer-name {
  float: left;
  color: #21534f;
  font-size: 0.938rem;
  line-height: 1.2rem;
  width: 40%;
  padding-left: 8px;
  position: relative;
  font-weight: bold;
  letter-spacing: 1px;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 18px;
  overflow: hidden;
}
.middle-container .data-list .card .order-name {
  float: left;
  color: #21534f;
  font-size: 0.938rem;
  line-height: 1.2rem;
  width: calc(68% - 476px);
  padding-left: 75px;
  position: relative;
  letter-spacing: 1px;
}
.middle-container .data-list .card .order-name::before {
  position: absolute;
  top: calc(50% - 2.5px);
  left: 25px;
  content: "";
  width: 35px;
  height: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.middle-container .data-list .card .order-name .department {
  font-size: 0.813rem;
  color: #5e5e5e;
  display: block;
}
.middle-container .data-list .card h4.order-name {
  font-weight: bold;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 18px;
  overflow: hidden;
}
.middle-container .data-list .card .controller-order {
  float: left;
  width: 40%;
}
.middle-container .data-list .card .controller-order h4 {
  color: #21534f;
  font-size: 0.938rem;
  line-height: 1.2rem;
  position: relative;
  font-weight: bold;
  letter-spacing: 1px;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 18px;
  overflow: hidden;
}
.middle-container .data-list .card .controller-order span.day {
  font-size: 0.813rem;
  color: #9e9e9e;
  padding-top: 5px;
  display: block;
}
.middle-container .data-list .card .controller {
  width: 15%;
  float: left;
  line-height: 1.25rem;
}
.middle-container .data-list .card .order-nb {
  float: left;
  width: 130px;
}
.middle-container .data-list .card .order-nb p {
  float: none;
  width: initial;
  line-height: 18px;
}
.middle-container .data-list .card .order-day {
  float: left;
  width: 95px;
}
.middle-container .data-list .card .order-day p {
  float: none;
  width: initial;
  line-height: 18px;
}
.middle-container .data-list .card .step-one::before {
  background-image: url(../images/svg/percentage-01.svg);
}
.middle-container .data-list .card .step-two::before {
  background-image: url(../images/svg/percentage-02.svg);
}
.middle-container .data-list .card .step-three::before {
  background-image: url(../images/svg/percentage-03.svg);
}
.middle-container .data-list .card .level-tag .level {
  width: 25px;
  height: 25px;
  position: absolute;
  border-radius: 50%;
  background-color: #FFAD0A;
  color: #fff;
  font-size: 0.813rem;
  text-align: center;
  line-height: 25px;
  z-index: 1;
  font-weight: bold;
  left: 10px;
}
.middle-container .data-list .card p {
  float: left;
  color: #5e5e5e;
  width: 30%;
  font-size: 0.875rem;
  padding: 0 8px;
  line-height: 1.2;
}
.middle-container .data-list .card p.customer-number,
.middle-container .data-list .card p.blackcard-expiration,
.middle-container .data-list .card p.customer-contact {
  width: 8%;
}
.middle-container .data-list .card p.order-owner {
  width: 12%;
  line-height: 18px;
}
.middle-container .data-list .card p.customer-address {
  width: 36%;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 18px;
  overflow: hidden;
}
.middle-container .data-list .card p.product-description,
.middle-container .data-list .card p.product-valid-period {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 18px;
  height: 15px;
  overflow: hidden;
}
.middle-container .data-list .card p.product-valid-period span.calendar {
  padding-right: 10px;
  color: #11948a;
}
.middle-container .data-list .card p.date {
  width: 150px;
  color: #949494;
  font-size: 0.813rem;
}
.middle-container .data-list .card .order-percentage {
  float: left;
  width: 60px;
}
.middle-container .data-list .card .order-percentage p {
  text-align: center;
  font-weight: bold;
  width: initial;
  float: none;
  line-height: 18px;
}
.middle-container .data-list .card .order-percentage p.c-red {
  color: #f44336;
}
.middle-container .data-list .card .order-percentage p.c-green {
  color: #11948a;
}
.middle-container .data-list .card .order-percentage p.c-orange {
  color: #ffad0a;
}
.middle-container .data-list .card ul.edit-tool {
  width: 256px;
  opacity: 0;
  position: absolute;
  right: 15px;
  top: calc(50% - 22.5px);
  background-color: #ebf5f4;
  z-index: 0;
}
.middle-container .data-list .card ul.edit-tool li a {
  color: #11948a;
}
@media all and (max-width: 1200px) {
  .middle-container .data-list .card ul.edit-tool {
    top: inherit;
    bottom: 10px;
    right: 0;
  }
}
.middle-container .data-list .card:last-child {
  border: none;
}
.middle-container .data-list .card:hover {
  background-color: #ebf5f4;
}
.middle-container .data-list .card:hover .edit-tool {
  opacity: 1;
}
.middle-container .data-list .card ul.f-r {
  width: initial;
  right: 20px;
}
.middle-container .data-list .card ul.f-r li {
  float: right;
}
.middle-container .data-list .card ul.audit-yes-no {
  position: absolute;
  width: 100px;
  min-height: 10px;
  display: block;
  top: 7px;
  left: 10px;
  z-index: 1;
}
.middle-container .data-list .card ul.audit-yes-no li {
  width: 50%;
  float: left;
}
.middle-container .data-list .card ul.audit-yes-no li a {
  padding-top: 40px;
  position: relative;
  display: block;
  text-align: center;
  font-size: 0.688rem;
  color: #b5d3d0;
}
.middle-container .data-list .card ul.audit-yes-no li a::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  top: 8px;
  left: calc(50% - 12.5px);
}
.middle-container .data-list .card ul.audit-yes-no li a.yes::after {
  background-image: url(../images/svg/audit-yes-lightgreen.svg);
}
.middle-container .data-list .card ul.audit-yes-no li a.yes:hover, .middle-container .data-list .card ul.audit-yes-no li a.selected-yes {
  color: #11948a;
}
.middle-container .data-list .card ul.audit-yes-no li a.yes:hover::after, .middle-container .data-list .card ul.audit-yes-no li a.selected-yes::after {
  background-image: url(../images/svg/audit-yes.svg);
}
.middle-container .data-list .card ul.audit-yes-no li a.no::after {
  background-image: url(../images/svg/audit-no-lightgreen.svg);
}
.middle-container .data-list .card ul.audit-yes-no li a.no:hover, .middle-container .data-list .card ul.audit-yes-no li a.selected-no {
  color: #d54848;
}
.middle-container .data-list .card ul.audit-yes-no li a.no:hover::after, .middle-container .data-list .card ul.audit-yes-no li a.selected-no::after {
  background-image: url(../images/svg/audit-no.svg);
}
.middle-container .data-list .card h4.audit-name {
  float: left;
  width: 22%;
  color: #21534f;
  font-size: 0.875rem;
  line-height: 1.2rem;
  font-weight: bold;
  letter-spacing: 1px;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 18px;
  overflow: hidden;
}
.middle-container .data-list .card .audit-type {
  width: 205px;
  padding-left: 105px;
}
.middle-container .data-list .card .audit-time, .middle-container .data-list .card .order-time {
  float: left;
  width: 20%;
}
.middle-container .data-list .card p.audit-money {
  float: left;
  width: 120px;
}
.middle-container .data-list .card p.audit-project {
  float: left;
  width: 15%;
}
.middle-container .data-list .card p.audit-ae {
  float: left;
  width: calc(32% - 250px);
}
.middle-container .data-list .card p.staff-area {
  float: left;
  width: 70px;
}
.middle-container .data-list .card p.staff-area .bg-circle {
  width: 27px;
  height: 27px;
  line-height: 27px;
  border-radius: 50%;
  background-color: #11948A;
  background-color: #11948a;
  display: block;
  text-align: center;
  color: #fff;
}
.middle-container .data-list .card p.staff-area .bg-green-apple {
  background-color: #62CB6C;
}
.middle-container .data-list .card h4.staff-name {
  float: left;
  width: 18%;
  color: #21534f;
  font-size: 0.938rem;
}
.middle-container .data-list .card .staff-jobtitle {
  float: left;
  width: calc(64% - 405px);
}
.middle-container .data-list .card .staff-jobtitle p {
  width: 100%;
}
.middle-container .data-list .card .staff-ext {
  float: left;
  width: 75px;
}
.middle-container .data-list .card .staff-mobile {
  float: left;
  width: 120px;
}
.middle-container .data-list .card .staff-supervisor {
  float: left;
  width: 18%;
}
.middle-container .data-list .card .staff-supervisor p {
  width: 100%;
}
.middle-container .data-list .card .staff-day {
  float: left;
  width: 140px;
}
.middle-container .data-list .card .staff-day p {
  width: 100%;
}
.middle-container .data-list .toptitle-style {
  border-bottom: 1px solid #11948a;
  padding: 12px 20px;
  -webkit-position: sticky;
  -moz-position: sticky;
  -ms-position: sticky;
  -o-position: sticky;
  position: sticky;
  z-index: 2;
  top: 60px;
  background-color: #ebf5f4;
}
.middle-container .data-list .toptitle-style .controller-order h4,
.middle-container .data-list .toptitle-style h4.audit-name,
.middle-container .data-list .toptitle-style p.audit-type,
.middle-container .data-list .toptitle-style p.audit-time,
.middle-container .data-list .toptitle-style p.audit-money,
.middle-container .data-list .toptitle-style p.audit-project,
.middle-container .data-list .toptitle-style p.audit-ae,
.middle-container .data-list .toptitle-style p.order-owner,
.middle-container .data-list .toptitle-style p.order-time,
.middle-container .data-list .toptitle-style h4.order-name,
.middle-container .data-list .toptitle-style h4.product-name,
.middle-container .data-list .toptitle-style h4.customer-name,
.middle-container .data-list .toptitle-style .order-percentage p,
.middle-container .data-list .toptitle-style .order-day p,
.middle-container .data-list .toptitle-style .order-nb p,
.middle-container .data-list .toptitle-style .product-description p,
.middle-container .data-list .toptitle-style p.controller,
.middle-container .data-list .toptitle-style p.product-valid-period,
.middle-container .data-list .toptitle-style p.customer-number,
.middle-container .data-list .toptitle-style p.blackcard-expiration,
.middle-container .data-list .toptitle-style p.customer-contact,
.middle-container .data-list .toptitle-style p.customer-address,
.middle-container .data-list .toptitle-style h4.staff-name,
.middle-container .data-list .toptitle-style .staff-area,
.middle-container .data-list .toptitle-style .staff-jobtitle p,
.middle-container .data-list .toptitle-style .staff-ext,
.middle-container .data-list .toptitle-style .staff-mobile,
.middle-container .data-list .toptitle-style .staff-supervisor p,
.middle-container .data-list .toptitle-style .staff-day p {
  color: #11948a;
  font-weight: bold;
  line-height: 1.375rem;
  min-height: 22px;
  margin-top: 0;
}
.middle-container .data-list .toptitle-style h4.product-name::before {
  display: none;
}
.middle-container .data-list .toptitle-style:hover {
  background-color: #ebf5f4;
}
.middle-container .data-list .toptitle-style .icon-sort {
  padding-left: 5px;
}
.middle-container .data-list .toptitle-style .click-sort {
  cursor: pointer;
}
.middle-container .data-list .toptitle-style .click-sort:hover {
  opacity: 0.8;
}
.middle-container .data-list .state-off h4.product-name, .middle-container .data-list .state-hide h4.product-name {
  font-weight: normal;
  color: #5e5e5e;
}
.middle-container .data-list .state-off h4.product-name::before, .middle-container .data-list .state-hide h4.product-name::before {
  background-color: #d9d9d9;
}
.middle-container .data-list .state-off h4.customer-name,
.middle-container .data-list .state-off h4.order-name, .middle-container .data-list .state-hide h4.customer-name,
.middle-container .data-list .state-hide h4.order-name {
  font-weight: normal;
}
.middle-container .data-list .state-hide h4.product-name {
  color: #21534f;
}
.middle-container .data-list .state-hide h4.product-name::before {
  top: calc(50% - 7px);
  width: 10px;
  height: 10px;
  background-color: transparent;
  border: 2px solid #11948a;
}
@media all and (max-width: 1000px) {
  .middle-container .data-list .card .go-detail {
    display: inline-block;
  }
  .middle-container .data-list .card h4.product-name,
  .middle-container .data-list .card h4.order-name,
  .middle-container .data-list .card .controller-order {
    width: 100%;
  }
  .middle-container .data-list .card .controller-order p {
    font-size: 0.688rem;
  }
  .middle-container .data-list .card h4.order-name {
    padding-left: 35px;
  }
  .middle-container .data-list .card h4.order-name::before {
    width: 26px;
    left: 0px;
    top: 6px;
    background-size: contain;
  }
  .middle-container .data-list .card h4.customer-name {
    width: 100%;
    padding-left: 0;
  }
  .middle-container .data-list .card h4.audit-name {
    width: calc(70% - 205px);
  }
  .middle-container .data-list .card .level-tag .level {
    width: 20px;
    height: 20px;
    line-height: 20px;
    left: 0px;
    top: 0px;
    border-radius: 0 0 8px 0;
    font-size: 0.688rem;
  }
  .middle-container .data-list .card p {
    padding-left: 35px;
    width: 100%;
    margin-top: 8px;
  }
  .middle-container .data-list .card p.blackcard-expiration ,
  .middle-container .data-list .card p.customer-number {
    width: initial;
    padding: 0;
  }
  .middle-container .data-list .card p.customer-contact {
    width: initial;
    padding: 0 0 0 20px;
    position: relative;
  }
  .middle-container .data-list .card p.customer-contact::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 4px;
    display: block;
    background-color: #11948a;
    position: absolute;
    left: 8px;
    top: calc(50% - 2px);
  }
  .middle-container .data-list .card p.customer-address {
    width: 100%;
    padding: 0;
  }
  .middle-container .data-list .card p.order-time {
    width: 50%;
  }
  .middle-container .data-list .card p.order-owner {
    float: right;
    padding-right: 0px;
    width: 25%;
    text-align: right;
  }
  .middle-container .data-list .card .order-percentage {
    width: 25%;
  }
  .middle-container .data-list .card .order-percentage p {
    padding: 0;
    font-size: 0.875rem;
    text-align: right;
  }
  .middle-container .data-list .card p.controller {
    width: 25%;
    padding-left: 0;
  }
  .middle-container .data-list .card p.audit-time {
    width: 30%;
    height: 18px;
  }
  .middle-container .data-list .card p.audit-money {
    width: 205px;
    padding-left: 105px;
    line-height: 18px;
  }
  .middle-container .data-list .card p.audit-project {
    padding-left: 0;
    width: calc(70% - 205px);
  }
  .middle-container .data-list .card p.audit-ae {
    width: 30%;
    float: right;
  }
  .middle-container .data-list .card p.order-time {
    width: 50%;
  }
  .middle-container .data-list .card .order-day {
    width: 25%;
  }
  .middle-container .data-list .card .staff-area {
    padding-left: 0;
  }
  .middle-container .data-list .card h4.staff-name {
    width: 40%;
  }
  .middle-container .data-list .card .staff-jobtitle {
    width: calc(60% - 145px);
    padding-left: 0;
  }
  .middle-container .data-list .card .staff-jobtitle p {
    padding-left: 0;
  }
  .middle-container .data-list .card .staff-ext {
    padding-left: 0;
    text-align: right;
    color: #11948a;
    font-weight: bold;
  }
  .middle-container .data-list .card .staff-ext p {
    padding-left: 0;
  }
  .middle-container .data-list .card .staff-supervisor {
    width: calc(100% - 140px);
    padding-left: 70px;
  }
  .middle-container .data-list .card .staff-supervisor p {
    padding-left: 0;
  }
  .middle-container .data-list .card .staff-mobile {
    width: calc(100% - 70px);
    padding-left: 0px;
  }
  .middle-container .data-list .card .staff-day {
    padding-left: 0;
    float: right;
    text-align: right;
  }
  .middle-container .data-list .card .staff-day p {
    padding-left: 0;
  }
  .middle-container .data-list .toptitle-style .staff-mobile {
    width: calc(40% + 70px);
    padding-left: 70px;
  }
}
@media screen and (max-width: 900px) {
  .middle-container .data-list .toptitle-style p.audit-money {
    padding-left: 105px;
  }
  .middle-container .data-list .card ul.audit-yes-no {
    top: 10px;
  }
  .middle-container .data-list .card p.audit-type {
    margin-top: 0;
  }
  .middle-container .data-list .card h4.audit-name {
    margin-top: 0;
  }
  .middle-container .data-list .card p.audit-time {
    margin-top: 0;
  }
  .middle-container .data-list .card p.audit-money {
    width: 205px;
    line-height: initial;
  }
  .middle-container .data-list .card p.audit-project {
    padding-left: 0px;
    width: calc(70% - 250px);
  }
  .middle-container .data-list .card p.audit-ae {
    width: 30%;
    float: right;
  }
}
@media screen and (max-width: 760px) {
  .middle-container .data-list .card p {
    padding-right: 0;
  }
  .middle-container .data-list .card p.controller {
    width: 50%;
  }
  .middle-container .data-list .card ul.audit-yes-no {
    left: calc(50% - 50px);
    top: initial;
    bottom: 10px;
  }
  .middle-container .data-list .card p.audit-type {
    padding-left: 0;
  }
  .middle-container .data-list .card h4.audit-name {
    width: calc(100% - 205px);
    text-align: right;
    padding-left: 0;
    margin-bottom: 5px;
  }
  .middle-container .data-list .card p.audit-time {
    width: calc(100% - 90px);
    padding-left: 0;
    margin-bottom: 2px;
  }
  .middle-container .data-list .card p.audit-money {
    padding-left: 0px;
    width: 90px;
    text-align: right;
    margin-top: 0;
  }
  .middle-container .data-list .card p.audit-project {
    width: calc(100% - 150px);
    padding-left: 0px;
  }
  .middle-container .data-list .card p.audit-ae {
    width: 90px;
    padding-left: 0px;
    text-align: right;
    margin-top: 0;
    padding-bottom: 40px;
  }
  .middle-container .data-list .card p.order-owner {
    width: 100%;
  }
  .middle-container .data-list .card .order-percentage {
    width: 50px;
  }
  .middle-container .data-list .card p.order-time {
    width: calc(100% - 50px);
    margin-bottom: 2px;
  }
  .middle-container .data-list .card .order-day, .middle-container .data-list .card .order-nb {
    width: 50%;
  }
  .middle-container .data-list .card .day-2, .middle-container .data-list .card .order-nb {
    text-align: right;
  }
  .middle-container .data-list .card .day-2 p, .middle-container .data-list .card .order-nb p {
    padding-right: 0;
  }
  .middle-container .data-list .card h4.staff-name {
    width: calc(100% - 70px);
  }
  .middle-container .data-list .card .staff-ext {
    position: absolute;
    top: 20px;
    right: 20px;
    margin-top: 0;
  }
  .middle-container .data-list .card .staff-jobtitle {
    width: calc(100% - 70px);
  }
  .middle-container .data-list .card .staff-jobtitle p {
    padding-left: 70px;
  }
  .middle-container .data-list .card .staff-mobile {
    padding-left: 70px;
  }
  .middle-container .data-list .card .staff-supervisor {
    width: 100%;
  }
  .middle-container .data-list .card .staff-day {
    width: 100%;
    text-align: left;
    padding-left: 70px;
  }
  .middle-container .data-list .toptitle-style p.controller {
    margin-top: 0;
  }
  .middle-container .data-list .toptitle-style h4.audit-name {
    margin-bottom: 0;
  }
  .middle-container .data-list .toptitle-style p.audit-ae {
    padding-bottom: 0;
  }
  .middle-container .data-list .toptitle-style p.audit-time {
    margin-bottom: 0;
  }
  .middle-container .data-list .toptitle-style p.order-time {
    margin-bottom: 0;
  }
  .middle-container .data-list .toptitle-style .staff-ext {
    top: 12px;
  }
  .middle-container .data-list .toptitle-style .staff-jobtitle {
    width: calc(100% - 75px);
  }
}
@media screen and (max-width: 1000px) {
  .middle-container .data-list .card .edit-tool {
    opacity: 1;
    background-color: transparent;
  }
}
.middle-container .form-list .has-fl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.middle-container .form-list .has-fl > div {
  flex: 1;
  padding: 0 5px;
}
.middle-container .form-list .has-fl p {
  padding: 0;
  width: initial;
  line-height: 1.3;
  word-break: break-all;
}
.middle-container .form-list .has-fl .pay-nb {
  max-width: 95px;
}
.middle-container .form-list .has-fl .pay-nb p {
  color: #11948a;
  font-weight: bold;
}
.middle-container .form-list .has-fl .pay-day {
  max-width: 90px;
}
.middle-container .form-list .has-fl .pay-source,
.middle-container .form-list .has-fl .pay-association {
  max-width: 92px;
}
.middle-container .form-list .has-fl .pay-amount {
  /* max-width: 110px; */
}
.middle-container .form-list .has-fl .pay-amount p {
  width: 100%;
  text-align: right;
  padding-right: 10px;
}
.middle-container .form-list .has-fl.table-header .pay-amount p {
  text-align: left;
}
.middle-container .form-list .has-fl .pay-available {
  max-width: 125px;
  display: flex;
}
.middle-container .form-list .has-fl .pay-available p {
  margin-left: auto;
}
.middle-container .form-list .has-fl .pay-company p {
  font-size: 0.813rem;
}
.middle-container .form-list .has-fl .pay-note p {
  font-size: 0.813rem;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.middle-container .form-list .has-fl .pay-media, .middle-container .form-list .has-fl .pay-other {
  max-width: 90px;
  text-align: center;
}
.middle-container .form-list .has-fl .pay-media p, .middle-container .form-list .has-fl .pay-other p {
  width: 100%;
}
.middle-container .form-list .has-fl .pay-amount-a, .middle-container .form-list .has-fl .pay-amount-b {
  max-width: 110px;
  text-align: right;
}
.middle-container .form-list .has-fl .pay-amount-a p, .middle-container .form-list .has-fl .pay-amount-b p {
  width: 100%;
}
.middle-container .form-list .f-ss {
  font-size: 0.688rem;
  display: block;
}
.middle-container .form-list .f-ss.excluding-tax {
  display: inline;
  margin-left: 5px;
}
.middle-container .form-list .toptitle-style p {
  font-size: 0.875rem;
  font-weight: bold;
  color: #11948a;
}
.middle-container .form-list .toptitle-style .pay-company p, .middle-container .form-list .toptitle-style .pay-note p {
  font-size: 0.875rem;
}
.middle-container .form-list .toptitle-style .pay-amount p {
  padding-right: 0;
}
.middle-container .form-list .toptitle-style .pay-media p, .middle-container .form-list .toptitle-style .pay-other p {
  font-size: 0.813rem;
}
.middle-container .form-list .search-bottom {
  border-radius: 0 0 18px 18px;
  margin-top: -1px;
  border-top: 1px solid #11948a !important;
}
.middle-container .form-list .search-bottom p {
  padding-right: 5px !important;
}
.middle-container .form-list .card .go-detail {
  min-height: 58px;
  padding: 10px 20px;
}
@media screen and (max-width: 1000px) {
  .middle-container .form-list .toptitle-style > div {
    flex: 50%;
    max-width: initial !important;
  }
  .middle-container .form-list .toptitle-style > div.pay-nb, .middle-container .form-list .toptitle-style > div.pay-day {
    flex: 25%;
  }
  .middle-container .form-list .toptitle-style > div.pay-acc-virtua p, .middle-container .form-list .toptitle-style > div.pay-company p, .middle-container .form-list .toptitle-style > div.pay-acc-virtual p, .middle-container .form-list .toptitle-style > div.pay-note p {
    width: 100%;
    text-align: right;
  }
  .middle-container .form-list .toptitle-style > div.pay-amount, .middle-container .form-list .toptitle-style > div.pay-source {
    flex: 33.33%;
  }
  .middle-container .form-list .toptitle-style > div.pay-association {
    flex: 33.33%;
    text-align: right;
  }
  .middle-container .form-list .toptitle-style > div.pay-association p {
    float: initial;
  }
  .middle-container .form-list .toptitle-style > div.pay-available {
    flex: 66.66%;
  }
  .middle-container .form-list .card .go-detail {
    display: flex;
    align-items: self-start;
  }
  .middle-container .form-list .card .go-detail > div {
    flex: 50%;
    max-width: initial;
  }
  .middle-container .form-list .card .go-detail > div.pay-nb, .middle-container .form-list .card .go-detail > div.pay-day {
    flex: 25%;
  }
  .middle-container .form-list .card .go-detail > div.pay-acc-virtua p, .middle-container .form-list .card .go-detail > div.pay-company p, .middle-container .form-list .card .go-detail > div.pay-acc-virtual p, .middle-container .form-list .card .go-detail > div.pay-note p {
    width: 100%;
    text-align: right;
  }
  .middle-container .form-list .card .go-detail > div.pay-amount p {
    padding-right: 0;
  }
  .middle-container .form-list .card .go-detail > div.pay-amount, .middle-container .form-list .card .go-detail > div.pay-source {
    flex: 33.33%;
  }
  .middle-container .form-list .card .go-detail > div.pay-association {
    flex: 33.33%;
    text-align: right;
  }
  .middle-container .form-list .card .go-detail > div.pay-association p {
    float: initial;
  }
  .middle-container .form-list .card .go-detail > div.pay-available {
    flex: 66%;
  }
  .middle-container .form-list .card .go-detail > div.pay-available span {
    margin-top: 8px;
  }
  .middle-container .form-list .has-fl .pay-amount p {
    padding-right: initial;
  }
  .middle-container .form-list .search-bottom {
    padding: 5px 20px;
  }
  .middle-container .form-list .search-bottom .pay-nb,
  .middle-container .form-list .search-bottom .pay-day,
  .middle-container .form-list .search-bottom .pay-company,
  .middle-container .form-list .search-bottom .pay-acc,
  .middle-container .form-list .search-bottom .pay-acc-virtual {
    display: none;
  }
}
@media screen and (max-width: 1000px) {
  .middle-container .distribute-list .card .go-detail,
  .middle-container .distribute-list .toptitle-style {
    align-items: self-start;
  }
  .middle-container .distribute-list .card .go-detail > div.pay-nb,
  .middle-container .distribute-list .toptitle-style > div.pay-nb {
    max-width: 60px;
  }
  .middle-container .distribute-list .card .go-detail > div.pay-company,
  .middle-container .distribute-list .toptitle-style > div.pay-company {
    max-width: calc(100% - 60px);
  }
  .middle-container .distribute-list .card .go-detail > div.pay-media, .middle-container .distribute-list .card .go-detail > div.pay-other,
  .middle-container .distribute-list .toptitle-style > div.pay-media,
  .middle-container .distribute-list .toptitle-style > div.pay-other {
    flex: 20%;
    text-align: left;
  }
  .middle-container .distribute-list .card .go-detail > div.pay-day,
  .middle-container .distribute-list .toptitle-style > div.pay-day {
    flex: 50%;
  }
  .middle-container .distribute-list .card .go-detail > div.pay-amount-a p,
  .middle-container .distribute-list .toptitle-style > div.pay-amount-a p {
    width: 100%;
    text-align: left;
  }
  .middle-container .distribute-list .card .go-detail > div.pay-amount-b p,
  .middle-container .distribute-list .toptitle-style > div.pay-amount-b p {
    width: 100%;
    text-align: right;
  }
  .middle-container .distribute-list .card .go-detail > div.pay-note,
  .middle-container .distribute-list .toptitle-style > div.pay-note {
    padding-right: 0;
  }
}
@media screen and (max-width: 700px) {
  .middle-container .distribute-list .card .go-detail p,
  .middle-container .distribute-list .toptitle-style p {
    margin-top: 2px;
  }
}
.middle-container .report-list .has-fl .pay-media,
.middle-container .report-list .has-fl .pay-other,
.middle-container .report-list .has-fl .pay-amount-b {
  max-width: initial;
  text-align: right;
}
.middle-container .report-list .has-fl.table-header .pay-media,
.middle-container .report-list .has-fl.table-header .pay-other,
.middle-container .report-list .has-fl.table-header .pay-amount-b,
.middle-container .report-list .has-fl.table-header .pay-amount-a{
  text-align: start;
}
.middle-container .report-list .has-fl .pay-media p,
.middle-container .report-list .has-fl .pay-other p,
.middle-container .report-list .has-fl .pay-amount-b p {
  width: 100%;
}
.middle-container .report-list .has-fl .pay-amount-b {
  padding-right: 0;
}
@media screen and (max-width: 1000px) {
  .middle-container .report-list .has-fl .pay-media,
  .middle-container .report-list .has-fl .pay-amount-b {
    text-align: right;
  }
  .middle-container .report-list .has-fl .pay-other {
    text-align: right !important;
  }
}
.middle-container .dashboard-list {
  margin-bottom: 25px;
}
.middle-container .dashboard-list .card .order-name {
  width: calc(70% - 270px);
}
.middle-container .dashboard-list .card .controller-order {
  width: calc(70% - 320px);
}
.middle-container .dashboard-list .toptitle-style .order-name h4,
.middle-container .dashboard-list .toptitle-style .order-percentage p,
.middle-container .dashboard-list .toptitle-style p.product-valid-period,
.middle-container .dashboard-list .toptitle-style p.date {
  font-size: 0.875rem;
  color: #11948a;
  font-weight: bold;
  min-height: 22px;
  line-height: 1.375rem;
}
@media screen and (max-width: 1000px) {
  .middle-container .dashboard-list .card .order-name,
  .middle-container .dashboard-list .card .controller-order {
    width: 100%;
  }
  .middle-container .dashboard-list .card p.product-valid-period {
    padding-left: 55px;
  }
  .middle-container .dashboard-list .card p.audit-money {
    width: 50%;
    padding-left: 55px;
    margin-top: 8px;
  }
  .middle-container .dashboard-list .card p.date {
    width: 50%;
  }
  .middle-container .dashboard-list .card .order-percentage {
    width: 80px;
  }
}
@media screen and (max-width: 760px) {
  .middle-container .dashboard-list .card p.audit-money {
    text-align: left;
  }
  .middle-container .dashboard-list .toptitle-style p.product-valid-period,
  .middle-container .dashboard-list .toptitle-style p.audit-money,
  .middle-container .dashboard-list .toptitle-style p.date {
    margin: 0;
  }
}
@media screen and (max-width: 1000px) {
  .middle-container .pd-none .card p.product-valid-period {
    padding-left: 0px;
  }
  .middle-container .pd-none .card p.audit-money {
    padding-left: 0px;
    width: calc(50% - 40px);
  }
  .middle-container .pd-none .toptitle-style .order-percentage p {
    margin-top: 0;
  }
}
.middle-container .audit-final-list .card ul.audit-yes-no {
  width: 50px;
}
.middle-container .audit-final-list .card ul.audit-yes-no li {
  width: 100%;
}
.middle-container .audit-final-list .card p.final-time {
  float: left;
  padding-left: 50px;
  width: 15%;
  font-size: 0.813rem;
  line-height: 1.063rem;
  color: #21534f;
}
.middle-container .audit-final-list .card h4.audit-name {
  width: 20%;
  padding-left: 0;
}
.middle-container .audit-final-list .card p.audit-ae {
  width: 8%;
  padding: 0;
}
.middle-container .audit-final-list .card p.audit-money {
  width: 10%;
}
.middle-container .audit-final-list .card .execution-status {
  float: left;
  width: 6%;
  text-align: center;
}
.middle-container .audit-final-list .card .execution-status p {
  width: initial;
  font-size: 0.688rem;
  float: none;
  padding: 18px 0 0 0;
  position: relative;
}
.middle-container .audit-final-list .card .execution-status p::before {
  position: absolute;
  top: 2px;
  left: calc(50% - 17.5px);
  content: "";
  width: 35px;
  height: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.middle-container .audit-final-list .card .execution-status .step-one::before {
  background-image: url(../images/svg/percentage-01.svg);
}
.middle-container .audit-final-list .card .execution-status .step-two::before {
  background-image: url(../images/svg/percentage-02.svg);
}
.middle-container .audit-final-list .card .execution-status .step-three::before {
  background-image: url(../images/svg/percentage-03.svg);
}
.middle-container .audit-final-list .toptitle-style p.final-time,
.middle-container .audit-final-list .toptitle-style .execution-status {
  font-size: 0.875rem;
  color: #11948a;
  font-weight: bold;
  min-height: 22px;
  line-height: 1.375rem;
}
.middle-container .audit-final-list .toptitle-style .execution-status {
  font-size: 0.813rem;
}
@media screen and (max-width: 1000px) {
  .middle-container .audit-final-list .card ul.audit-yes-no {
    top: initial;
    bottom: 10px;
    left: 22px;
  }
  .middle-container .audit-final-list .card p {
    margin-top: 0;
    padding-left: 0;
  }
  .middle-container .audit-final-list .card p.final-time {
    width: 90px;
    padding-bottom: 35px;
    padding-left: 0;
  }
  .middle-container .audit-final-list .card p.audit-time {
    width: calc(70% - 90px);
    margin-bottom: 8px;
  }
  .middle-container .audit-final-list .card h4.audit-name {
    width: calc(100% - 160px);
    margin-bottom: 5px;
  }
  .middle-container .audit-final-list .card p.audit-money {
    width: 30%;
    text-align: right;
    padding: 0;
  }
  .middle-container .audit-final-list .card p.audit-project {
    padding-left: 0;
    width: calc(80% - 90px);
  }
  .middle-container .audit-final-list .card .execution-status {
    width: 70px;
  }
  .middle-container .audit-final-list .card .execution-status p {
    padding-top: 0px;
    text-align: right;
  }
  .middle-container .audit-final-list .card .execution-status p::before {
    top: -10px;
    left: initial;
    right: 0;
  }
  .middle-container .audit-final-list .card p.audit-ae {
    width: 20%;
    text-align: right;
  }
  .middle-container .audit-final-list .toptitle-style h4.audit-name,
  .middle-container .audit-final-list .toptitle-style p.audit-time {
    margin-bottom: 0;
  }
  .middle-container .audit-final-list .toptitle-style .execution-status {
    text-align: right;
  }
}
@media screen and (max-width: 760px) {
  .middle-container .audit-final-list .card p.audit-project {
    width: calc(70% - 90px);
  }
  .middle-container .audit-final-list .card p.audit-ae {
    width: 30%;
  }
}
.middle-container .company-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.middle-container .company-content ul.edit-record-user {
  padding-left: 10px;
}
.middle-container .company-content ul.edit-record-user li {
  float: left;
}
.middle-container .company-content ul.edit-record-user li p {
  color: #707070;
}
.middle-container .company-content ul.edit-record-user a.history {
  font-size: 16px;
  display: inline-block;
  padding: 4px;
  color: #11948a;
}
.middle-container .company-content ul.edit-record-user a.history:hover {
  opacity: 0.5;
}
.middle-container .company-content .company-information {
  position: relative;
  width: 100%;
  padding: 10px;
  border-radius: 18px;
}
.middle-container .company-content .company-information .edit-tool {
  position: absolute;
  right: 10px;
  top: 10px;
}
.middle-container .company-content .company-information .edit-tool li a {
  font-size: 0.875rem;
  width: 40px;
  height: 40px;
  background-color: #ebf5f4;
}
.middle-container .company-content .company-information .edit-tool li a:hover {
  background-color: #11948a;
  color: #fff;
}
.middle-container .company-content .company-information .edit-tool li a.add {
  background-color: #11948a;
  color: #fff;
}
.middle-container .company-content .company-information .edit-tool li a.add:hover {
  opacity: 0.9;
}
.middle-container .company-content .company-information .menu {
  position: absolute;
  z-index: 2;
  right: -14px;
  top: 62px;
}
.middle-container .company-content .company-information .menu::after {
  content: "";
  position: absolute;
  top: -8px;
  left: calc(50% - 8.5px);
  border-style: solid;
  border-width: 0 8.5px 8px 8.5px;
  border-color: transparent transparent #ebf5f4 transparent;
}
.middle-container .company-content .company-information .menu ul {
  width: 94px;
  background-color: #ebf5f4;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
}
.middle-container .company-content .company-information .menu ul li a {
  font-weight: bold;
  color: #11948a;
  font-size: 0.813rem;
  padding: 0 10px;
  line-height: 35px;
  text-align: center;
  display: block;
}
.middle-container .company-content .company-information .menu ul li a:hover {
  background-color: #289e95;
  color: #fff;
}
.middle-container .company-content .company-information ul.info {
  display: flex;
  flex-wrap: wrap;
}
.middle-container .company-content .company-information ul.info li {
  display: flex;
  flex: 25%;
  padding: 2.5px 5px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.middle-container .company-content .company-information ul.info li p {
  width: 100%;
  line-height: 18px;
  font-size: 0.875rem;
  text-align: left;
  word-wrap: break-word;
}
.middle-container .company-content .company-information ul.info li p a {
  color: #333;
}
.middle-container .company-content .company-information ul.info li p a:hover {
  text-decoration: underline;
}
.middle-container .company-content .company-information ul.info li p span {
  display: inline-block;
  line-height: 24px;
  flex-wrap: nowrap;
  vertical-align: top;
}
.middle-container .company-content .company-information ul.info li p span:nth-child(2) {
  max-width: calc(100% - 90px);
}
.middle-container .company-content .company-information ul.info li .bg {
  padding: 3px 10px;
  font-size: 0.813rem;
  display: inline-block;
  border-radius: 10px;
  margin: 0 10px 5px 0;
  line-height: 18px;
  min-width: 75px;
  text-align: center;
}
.middle-container .company-content .company-information ul.info li .bg-greenlight {
  color: #11948a;
  background-color: #ebf5f4;
}
.middle-container .company-content .company-information ul.info li .bg-green {
  background-color: #11948a;
  color: #fff;
}
.middle-container .company-content .company-information ul.info li.flex-2 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 50%;
}
.middle-container .company-content .company-information ul.info li.flex-3 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100%;
}
.middle-container .company-content .company-information ul.info li.b-line {
  border-bottom: 1px solid #D1E6E3;
  margin-bottom: 8px;
}
.middle-container .company-content .company-information ul.info li.b-line p span:nth-child(2) {
  max-width: calc(100% - 180px);
}
.middle-container .company-content .company-information ul.info .report-list {
  flex: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.middle-container .company-content .company-information ul.info .report-list .btn-switch {
  margin-right: 10px;
}
.middle-container .company-content .company-information ul.info .report-list p {
  width: initial;
}
.middle-container .company-content .company-information ul.info .report-list p a {
  margin: 0 10px;
}
.middle-container .company-content .company-information ul.info .report-list p a:hover {
  color: #11948a;
}
.middle-container .company-content .company-information ul.blackcard-info li {
  flex: initial;
  min-width: 220px;
}
@media all and (max-width: 1200px) {
  .middle-container .company-content .company-information ul.blackcard-info li {
    min-width: 33%;
  }
  .middle-container .company-content .company-information ul.blackcard-info li.flex-2 {
    flex-basis: 100%;
  }
}
.middle-container .company-content,
.middle-container .company-department-list {
  width: 100%;
  background-color: #fff;
  border-radius: 18px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
  margin-bottom: 30px;
}
.middle-container .company-department-list {
  margin: 20px 0 15px 0;
  background-color: #ebf5f4;
}
.middle-container .company-department-list h4.main-title {
  width: 86px;
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: bold;
  float: left;
  color: #11948a;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 10px;
  text-align: center;
}
.middle-container .company-department-list ul.info {
  min-height: 72px;
  float: left;
  background-color: #fff;
  width: calc(100% - 86px);
  border-radius: 0 18px 18px 0;
}
.middle-container .company-department-list ul.info li {
  position: relative;
}
.middle-container .company-department-list ul.info li:nth-child(even) {
  background-color: #f6f6f6;
}
.middle-container .company-department-list ul.info li .edit {
  opacity: 0;
  position: absolute;
  top: calc(50% - 15px);
  right: 20px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background-color: #ebf5f4;
  color: #11948a;
  font-size: 0.813rem;
  text-align: center;
  z-index: 1;
}
.middle-container .company-department-list ul.info li .edit:hover {
  background-color: #11948a;
  color: #fff;
}
.middle-container .company-department-list ul.info li a {
  width: 100%;
  display: block;
}
.middle-container .company-department-list ul.info li a:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
}
.middle-container .company-department-list ul.info li a p {
  flex: 0 0 calc(30% - 20px);
  display: flex;
  align-items: flex-start;
  justify-content: left;
  line-height: 20px;
  min-height: 38px;
  font-size: 0.875rem;
  padding: 8px 10px;
  word-wrap: break-word;
  align-items: center;
}
.middle-container .company-department-list ul.info li a p.name {
  padding-left: 15px;
}
.middle-container .company-department-list ul.info li a p.flex-2 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 38%;
  max-width: 39%;
  display: initial;
}
.middle-container .company-department-list ul.info li a:hover p {
  text-decoration: underline;
  color: #11948a;
}
.middle-container .company-department-list ul.info li:hover a.edit {
  opacity: 1;
}
.middle-container .company-report-list {
  margin: 20px 0 15px 0;
  background-color: #ebf5f4;
  border-radius: 18px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
}
.middle-container .company-report-list h4.main-title {
  width: 86px;
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: bold;
  float: left;
  color: #11948a;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px;
  text-align: center;
}
.middle-container .company-report-list ul.info {
  min-height: 48px;
  float: left;
  background-color: #fff;
  width: calc(100% - 86px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px;
  border-radius: 0 18px 18px 0;
}
.middle-container .company-report-list ul.info li {
  padding: 5px 15px;
}
.middle-container .company-report-list ul.info li:first-child {
  padding: 0 10px 0 6px;
}
.middle-container .company-report-list ul.info li p {
  font-size: 0.875rem;
}
.middle-container .company-report-list ul.info li p a {
  color: #333;
}
.middle-container .company-report-list ul.info li p a:hover {
  color: #11948a;
  text-decoration: underline;
}
.middle-container p.text-more {
  padding: 10px 10px 5px;
  text-align: right;
}
.middle-container p.text-more a {
  color: #11948a;
  text-decoration: underline;
}
.middle-container p.text-more a:hover {
  text-decoration: none;
}
.middle-container .company-title {
  width: 100%;
  background-color: #fff;
  border-radius: 18px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 6px;
  border: 2px solid #11948a;
  padding: 25px 35px;
  margin-bottom: 20px;
}
.middle-container .company-title h3 {
  font-size: 22px;
  font-weight: bold;
  color: #11948a;
  padding-bottom: 10px;
  line-height: 1.3;
}
.middle-container .company-title p {
  line-height: 1.3;
}
.middle-container .data-list-fl {
  width: 100%;
  margin: 10px auto 30px auto;
  background-color: #fff;
  border-radius: 18px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
}
.middle-container .data-list-fl .a-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  min-height: 50px;
  border-bottom: 1px dashed #aeaeae;
}
.middle-container .data-list-fl .a-row .edit-tool {
  background-color: #ebf5f4;
  position: absolute;
  top: calc(50% - 22.5px);
  right: 10px;
  opacity: 0;
}
.middle-container .data-list-fl .a-row:hover {
  background-color: #ebf5f4;
}
.middle-container .data-list-fl .a-row:hover .edit-tool {
  opacity: 1;
}
.middle-container .data-list-fl .a-row:last-child {
  border: none;
  border-radius: 0 0 18px 18px;
}
.middle-container .data-list-fl .a-row p {
  line-height: 1.2;
  padding: 2.5px 0;
}
.middle-container .data-list-fl .fl {
  display: flex;
  align-items: center;
}
.middle-container .data-list-fl .w1 {
  flex: 1;
}
.middle-container .data-list-fl .w2 {
  flex: 2;
}
.middle-container .data-list-fl .w3 {
  flex: 3;
}
.middle-container .data-list-fl .name p {
  color: #21534f;
}
.middle-container .data-list-fl .go-detail {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 5px 20px;
}
.middle-container .data-list-fl .go-detail p {
  padding: 2.5px 0;
  font-size: 0.875rem;
  word-break: break-all;
}
.middle-container .data-list-fl .mail-notify {
  right: 65px;
  position: absolute;
  min-width: 85px;
  border: 1px solid #DCDCDC;
  padding: 5px 8px;
  border-radius: 18px;
  font-size: 12px;
  background-color: #fff;
  color: #333;
  display: inline-block;
}
.middle-container .data-list-fl .mail-notify i, .middle-container .data-list-fl .mail-notify svg {
  color: #11948a;
  margin-right: 5px;
}
.middle-container .data-list-fl .mail-notify:hover {
  color: #11948a;
  border-color: #11948a;
}
.middle-container .data-list-fl .top-title {
  border-bottom: 1px solid #11948a;
  padding: 5px 20px;
  -webkit-position: sticky;
  -moz-position: sticky;
  -ms-position: sticky;
  -o-position: sticky;
  position: sticky;
  z-index: 2;
  top: 60px;
  background-color: #ebf5f4;
}
.middle-container .data-list-fl .top-title p {
  color: #11948a;
  font-size: 0.938rem;
  font-weight: bold;
  line-height: 1.5;
  min-height: 22px;
  margin-top: 0;
}
@media all and (max-width: 800px) {
  .middle-container .data-list-fl .go-detail p {
    font-size: 0.813rem;
  }
}
.middle-container .company-contact-list .a-row {
  padding-right: 150px;
}
.middle-container .company-contact-list .top-title {
  padding-right: 170px;
}
@media all and (max-width: 1000px) {
  .middle-container .company-contact-list .a-row {
    padding-right: 0px;
    flex-wrap: wrap;
    min-height: 40px;
  }
  .middle-container .company-contact-list .a-row .edit-tool {
    top: initial;
    bottom: 10px;
  }
  .middle-container .company-contact-list .go-detail {
    flex-wrap: wrap;
    padding-right: 20px;
  }
  .middle-container .company-contact-list .top-title {
    padding-right: 20px;
    padding-bottom: 40px;
    padding-bottom: 5px;
  }
  .middle-container .company-contact-list .w1, .middle-container .company-contact-list .w2 {
    flex: 50%;
  }
  .middle-container .company-contact-list .w1:nth-child(even) {
    text-align: right;
  }
  .middle-container .company-contact-list .mail-notify {
    position: initial;
    margin: 0 0 10px 20px;
  }
}
.middle-container .order-compare {
  width: 100%;
  min-width: 945px;
  overflow-x: auto;
  padding: 0;
  line-height: 1.5;
}
.middle-container .order-compare tr {
  border-bottom: 2px solid #EBF5F4;
}
.middle-container .order-compare tr.toptitle {
  background-color: #ebf5f4;
}
.middle-container .order-compare tr.toptitle th {
  min-width: 110px;
  border-bottom: 2px solid #11948a;
}
.middle-container .order-compare tr.toptitle td {
  width: 45%;
  border-bottom: 2px solid #11948a;
  border-left: 2px solid #D8EEEB;
}
.middle-container .order-compare tr.toptitle p {
  color: #11948a;
  font-weight: bold;
  font-size: 1rem;
}
.middle-container .order-compare tr td {
  padding: 10px 15px;
  border-left: 2px solid #EBF5F4;
}
.middle-container .order-compare tr th {
  text-align: right;
  padding: 10px 15px;
}
.middle-container .order-compare tr th p {
  color: #21534f;
  font-weight: bold;
}
.middle-container .order-compare tr:last-child {
  border: none;
  padding: 10px;
}
.middle-container .order-compare .media-details {
  width: 100%;
  margin-bottom: 10px;
}
.middle-container .order-compare .media-details h4 {
  padding: 10px 0;
  font-weight: bold;
  color: #11948a;
  font-size: 0.875rem;
}
.middle-container .order-compare .media-details h4 span {
  font-size: 0.688rem;
}
.middle-container .order-compare .media-details ul li {
  position: relative;
  border-bottom: 1px #cdcdcd dashed;
  padding: 4px 0;
  display: flex;
  flex-wrap: wrap;
}
.middle-container .order-compare .media-details ul li div {
  flex: 1;
  padding: 0 5px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.middle-container .order-compare .media-details ul li div p {
  line-height: 1.2;
  font-size: 0.75rem;
  text-align: center;
}
.middle-container .order-compare .media-details ul li div p span {
  font-size: 0.688rem;
}
.middle-container .order-compare .media-details ul li div p.c-green {
  color: #11948a;
  font-weight: bold;
}
.middle-container .order-compare .media-details ul li div input {
  text-align: center;
  width: 100%;
  height: 40px;
  padding: 0 5px;
}
.middle-container .order-compare .media-details ul li div.ad-title-other {
  text-align: left;
  justify-content: left;
  padding: 0 15px;
}
.middle-container .order-compare .media-details ul li div.ad-money input, .middle-container .order-compare .media-details ul li div.ad-subtotal input {
  color: #11948a;
  font-weight: bold;
}
.middle-container .order-compare .media-details ul li div.ad-note {
  flex: 2;
  margin: 0 5px;
}
.middle-container .order-compare .media-details ul li div.ad-note input {
  font-size: 0.688rem;
}
.middle-container .order-compare .media-details ul li div.ad-date {
  width: 10%;
}
.middle-container .order-compare .media-details ul li div.ad-other a {
  color: #11948a;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  text-align: center;
  background-color: #fff;
}
.middle-container .order-compare .media-details ul li div.ad-other a:hover {
  opacity: 0.7;
}
.middle-container .order-compare .media-details ul li div.ad-description {
  flex: 100%;
  height: initial;
  padding: 10px 15px 5px 15px;
}
.middle-container .order-compare .media-details ul li div.ad-description p {
  width: 100%;
  font-size: 0.688rem;
  color: #7c7c7c;
  text-align: left;
  line-height: 18px;
}
.middle-container .order-compare .media-details ul li div.ad-note-edit {
  flex: 100%;
  padding-top: 8px;
}
.middle-container .order-compare .media-details ul li div.ad-note-edit p {
  background-color: #f8f8f8;
  width: 100%;
  padding: 6px 5px;
}
.middle-container .order-compare .media-details ul li div.total p {
  color: #11948a;
  font-size: 0.9rem;
}
.middle-container .order-compare .media-details ul li.media-title {
  border: none;
  background-color: #ebf5f4;
}
.middle-container .order-compare .media-details ul li.media-title .ad-other {
  justify-content: center;
}
.middle-container .order-compare .media-details ul li:last-child {
  margin-top: 3px;
  border-bottom: none;
  padding: 10px 0;
}
.middle-container .order-compare .media-details ul li:hover .ad-other {
  opacity: 1;
}
.middle-container .order-compare .media-details .discount-title {
  position: relative;
}
.middle-container .order-compare .media-details .discount-title h4 {
  padding-right: 70px;
}
.middle-container .order-compare .media-details .discount-title .other-tools {
  position: absolute;
  top: -8px;
  right: 5px;
  display: flex;
}
.middle-container .order-compare .media-details .discount-title a {
  padding: 10px;
  display: block;
  color: #11948a;
}
.middle-container .order-compare .media-details .discount-title a:hover {
  opacity: 0.7;
}
.middle-container .order-compare .media-details .bottom-total {
  width: 100%;
  padding: 15px;
  background-color: #ebf5f4;
  border-top: 1px #11948a solid;
}
.middle-container .order-compare .media-details .bottom-total p {
  font-size: 0.813rem;
  float: left;
  font-weight: bold;
}
.middle-container .order-compare .media-details .bottom-total p.total {
  float: right;
  flex: 2;
}
.middle-container .order-compare .media-details .bottom-total p.total span.c-green {
  color: #11948a;
}
.middle-container .order-compare .media-details .bottom-total .ad-media {
  flex: 2;
}
.middle-container .order-compare .media-details .confirm {
  max-width: 100%;
  float: none;
  padding: 0 0 10px 15px;
}
.middle-container .order-compare .media-details .confirm h4 {
  padding-top: 0;
}
.middle-container .order-compare .media-details .confirm .input-value {
  max-width: 100%;
  font-size: 0.813rem;
}
.middle-container .order-compare .media-details .check-item {
  position: relative;
}
.middle-container .order-compare .media-details .check-item .w-80 {
  max-width: calc(100% - 120px);
}
.middle-container .order-compare .media-details .check-item label {
  max-width: calc(100% - 150px);
  line-height: 1.5;
}
.middle-container .order-compare .media-details .check-item .ad-nb {
  position: absolute;
  width: 140px;
  top: 10px;
  right: 0;
  display: flex;
  gap: 5px;
}
.middle-container .order-compare .media-details .check-item .ad-nb input {
  width: 100%;
  flex: 1;
  height: 36px;
  color: #11948a;
  font-weight: bold;
  padding: 0 5px;
  text-align: center;
}
.middle-container .order-compare .media-details .check-item .ad-nb input.amount {
  flex: 2;
}
.middle-container .order-compare .media-details .check-item .discount-nb {
  position: absolute;
  width: 160px;
  right: 0;
  top: 0;
  padding: 0 15px 0 0;
}
.middle-container .order-compare .media-details .check-item .discount-nb .input-value {
  display: flex;
  width: 100%;
}
.middle-container .order-compare .media-details .check-item .discount-nb .input-value span {
  flex: 1;
  width: 100%;
  text-align: right;
}
.middle-container .order-compare .media-details .check-item .discount-nb .input-value span.amount {
  flex: 4;
}
.middle-container .order-compare .order-total {
  width: 100%;
  padding: 20px 15px 10px 15px;
  background-color: #ebf5f4;
  border-top: 1px #11948a solid;
  text-align: right;
}
.middle-container .order-compare .order-total p {
  display: inline-block;
  font-size: 0.688rem;
  padding-bottom: 10px;
}
.middle-container .order-compare .order-total p span {
  padding-left: 10px;
  font-size: 1.063rem;
  font-weight: bold;
  color: #11948a;
}
.middle-container .order-compare .order-total p span.c-red {
  color: #f44336;
}
.middle-container .order-compare .order-total p.all {
  padding-left: 25px;
}
.middle-container .order-compare .order-total p.all span {
  font-size: 1.25rem;
}
.middle-container .order-compare .ad-note-edit {
  flex: 100%;
  padding-top: 8px;
}
.middle-container .order-compare .ad-note-edit p {
  background-color: #f8f8f8;
  width: 100%;
  padding: 6px 5px;
  font-size: 0.813rem;
}
.middle-container .order-compare ul.file-list {
  text-align: left;
}
.middle-container .order-compare ul.file-list li {
  display: inline-block;
  margin: 0 5px 8px 0;
}
.middle-container .order-compare ul.file-list li a {
  display: inline-block;
  padding: 10px 15px;
  background-color: #ebf5f4;
  border: 1px solid #ebf5f4;
  border-radius: 10px;
}
.middle-container .order-compare ul.file-list li a p {
  color: #11948a;
  line-height: 1.125rem;
}
.middle-container .order-compare ul.file-list li a:hover {
  border-color: #11948a;
}
.middle-container .order-compare ul.file-list li.c-red a {
  background-color: transparent;
  background-color: rgb(255, 242, 242);
}
.middle-container .order-compare ul.file-list li.c-red a p {
  color: #f44336;
}
.middle-container .order-compare ul.file-list li.c-red:hover a {
  border-color: #f44336;
}
.middle-container .order-compare .form-details .a-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid #F6F6F6;
}
.middle-container .order-compare .form-details .a-row p {
  font-size: 0.813rem;
  word-break: break-all;
  line-height: 1.3;
}
.middle-container .order-compare .form-details .a-row p a {
  color: #11948a;
  text-decoration: underline;
}
.middle-container .order-compare .form-details .a-row p a:hover {
  text-decoration: none;
}
.middle-container .order-compare .form-details .a-row > div {
  flex: 1;
  padding: 10px;
}
.middle-container .order-compare .form-details .a-row .pay-acc-virtual {
  flex: 2;
}
.middle-container .order-compare .form-details .a-row .pay-nb,
.middle-container .order-compare .form-details .a-row .pay-source,
.middle-container .order-compare .form-details .a-row .pay-day {
  max-width: 95px;
}
.middle-container .order-compare .form-details .a-row .pay-amount {
  text-align: right;
}
.middle-container .order-compare .form-details .a-row .pay-amount .c-red {
  color: #f44336;
}
.middle-container .order-compare .form-details .a-row .pay-edit {
  flex: 1.5;
  text-align: center;
}
.middle-container .order-compare .form-details .a-row .pay-edit input {
  text-align: center;
  font-weight: bold;
  color: #11948a;
  height: initial;
  line-height: 40px;
}
.middle-container .order-compare .form-details .a-row .other-tools {
  max-width: 55px;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  padding: 0;
}
.middle-container .order-compare .form-details .a-row .other-tools a {
  padding: 10px;
  color: #11948a;
}
.middle-container .order-compare .form-details .a-row .other-tools a:hover {
  opacity: 0.5;
}
.middle-container .order-compare .form-details .bg-top-title {
  background-color: #ebf5f4;
  border-radius: 4px 4px 0 0;
  border: none;
}
.middle-container .order-compare .form-details .bg-top-title p {
  font-weight: bold;
}
.middle-container .order-compare .form-details .c-red p {
  color: #f44336;
}
@media all and (max-width: 650px) {
  .middle-container .order-compare .form-details {
    padding-top: 10px;
  }
  .middle-container .order-compare .form-details .item-title {
    padding-top: 0px;
  }
  .middle-container .order-compare .form-details .a-row .pay-amount {
    min-width: 85px;
  }
}
.middle-container .order-compare .show-all .a-row .pay-nb,
.middle-container .order-compare .show-all .a-row .pay-source,
.middle-container .order-compare .show-all .a-row .pay-day {
  max-width: initial;
}
.middle-container .order-compare .show-all .a-row:nth-child(even) {
  background-color: #f6f6f6;
}
.middle-container .order-compare .show-all .bg-top-title, .middle-container .order-compare .show-all .bottom-total {
  background-color: #ebf5f4 !important;
}
.middle-container .order-compare .show-all .bottom-total {
  border-top: 1px solid #11948a;
}
.middle-container .order-compare .show-all .bottom-total p {
  font-size: 0.813rem;
}
.middle-container .order-compare .show-all .bottom-total p span {
  padding-left: 5px;
  color: #11948a;
  font-weight: bold;
  font-size: 0.938rem;
}
@media all and (max-width: 1050px) {
  .middle-container .company-content .company-information {
    width: 100%;
    padding: 5px;
  }
  .middle-container .company-content .company-information ul.info li {
    padding: 3px 5px;
  }
  .middle-container .company-content .company-information ul.info li p {
    font-size: 0.688rem;
  }
  .middle-container .company-department-list h4.main-title,
  .middle-container .company-report-list h4.main-title {
    font-size: 0.875rem;
  }
  .middle-container .company-department-list ul.info li a p,
  .middle-container .company-report-list ul.info li a p {
    flex: calc(30% - 10px);
    padding: 5px;
    font-size: 0.813rem;
  }
}
@media all and (max-width: 900px) {
  .middle-container .company-content .company-information ul.info li p span {
    font-size: 0.688rem;
  }
  .middle-container .company-content .company-information ul.info li:nth-child(2) p span:nth-child(2) {
    max-width: calc(100% - 90px);
  }
  .middle-container .company-department-list ul.info li p,
  .middle-container .company-report-list ul.info li p {
    font-size: 0.688rem;
  }
  .middle-container .company-department-list ul.info li a p,
  .middle-container .company-report-list ul.info li a p {
    font-size: 0.688rem;
  }
  .middle-container p.text-more {
    font-size: 0.813rem;
  }
}
@media all and (max-width: 700px) {
  .middle-container .company-content {
    display: block;
  }
  .middle-container .company-content .company-information {
    border-radius: 0 0 18px 18px;
  }
  .middle-container .company-content .company-information ul.edit-tool {
    top: initial;
    bottom: 10px;
  }
  .middle-container .company-content .company-information .menu {
    top: 132px;
  }
  .middle-container .company-content .company-information ul.info li {
    flex: 50%;
  }
  .middle-container .company-department-list h4.main-title,
  .middle-container .company-report-list h4.main-title {
    width: 100%;
    min-height: initial;
  }
  .middle-container .company-department-list ul.info,
  .middle-container .company-report-list ul.info {
    width: 100%;
    border-radius: 0 0 18px 18px;
    min-height: initial;
  }
  .middle-container .company-department-list ul.info li a p.name {
    padding-left: 15px;
  }
  .middle-container .company-title {
    padding: 16px 25px;
    margin-bottom: 10px;
  }
  .middle-container .company-title h3 {
    font-size: 18px;
    padding-bottom: 5px;
  }
  .middle-container .company-title p {
    font-size: 0.875rem;
  }
}
@media all and (max-width: 479px) {
  .middle-container .company-content .company-information {
    max-width: 100%;
  }
  .middle-container .company-content .company-information ul.edit-tool {
    bottom: initial;
    top: 10px;
  }
  .middle-container .company-content .company-information .menu {
    top: 62px;
  }
  .middle-container .company-content .company-information ul.info li {
    flex: 100%;
  }
  .middle-container .company-content .company-information ul.info li.report-list .btn-switch {
    margin-right: 0;
  }
}

ul.edit-record-user li {
  padding: 4px 0;
}
ul.edit-record-user li p {
  float: left;
  font-size: 0.75rem;
  line-height: 24px;
  padding-right: 10px;
}
ul.edit-record-user li p.id span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin-right: 8px;
  font-size: 0.688rem;
  font-weight: bold;
}

.footer-inside {
  float: right;
  padding: 10px 40px;
  text-align: right;
}
.footer-inside p {
  font-size: 0.688rem;
  color: #a0a0a0;
}
.footer-inside p a {
  color: #11948a;
  text-decoration: underline;
}
.footer-inside p:hover {
  text-decoration: none;
}
@media all and (max-width: 1200px) {
  .footer-inside {
    width: 100%;
    text-align: center;
    float: none;
  }
}

.sidemenu-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: url(../images/svg/icon_menu_hamburger.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  background-size: 40%;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  cursor: pointer;
}
.sidemenu-btn:hover {
  background-color: #EBF5F4;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

.bg-c-circle {
  background-color: #EBF5F4;
}

.menu-btn {
  margin: 0;
  padding: 0;
  background: none;
}

.menu-btn span {
  position: relative;
  font-size: 20px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  color: #7c7c7c;
  display: block;
  cursor: pointer;
}

/*popup - style---------*/
.white-popup {
  position: relative;
  background: #fff;
  width: auto;
  max-width: 800px;
  margin: 20px auto;
  border-radius: 18px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.1) 10px 10px 6px;
}

.mfp-fade .mfp-bg {
  opacity: 0;
  transition: all 0.15s ease-out;
}

.mfp-fade .mfp-bg .mfp-ready {
  opacity: 0.5;
}
.mfp-fade .mfp-bg .mfp-removing {
  opacity: 0;
}
.mfp-fade .mfp-bg .mfp-content {
  opacity: 0;
  transition: all 0.15s ease-out;
}

.mfp-fade .mfp-wrap .mfp-fade.mfp-wrap .mfp-ready .mfp-content {
  opacity: 1;
}

.mfp-fade .mfp-wrap .mfp-removing .mfp-content {
  opacity: 0;
}

.popup-width-m {
  max-width: 600px;
}

.popup-width-s {
  max-width: 445px;
}

.popup-container {
  width: 100%;
}
.popup-container textarea,#blank-detail-info textarea {
  background-color: #f8f8f8;
}
.popup-container .top-title,#blank-detail-info .top-title {
  width: 100%;
  padding: 40px 0;
  text-align: center;
}
#blank-detail-info .top-title{
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
#blank-detail-info .top-title .btn-add{
  position: absolute;
  right: 0;
}
.popup-container .top-title h4,#blank-detail-info .top-title h4 {
  color: #21534f;
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 12px;
  position: relative;
  padding-left: 5px;
}
.popup-container .top-title h4::before {
  position: absolute;
  left: calc(50% - 36.5px);
  bottom: -20px;
  content: "";
  width: 73px;
  height: 2px;
  display: block;
  background-color: #ffad0a;
}
.popup-container .text-center {
  text-align: center;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-container .text-center p {
  line-height: 1.5;
}
.popup-container .order-history,#blank-detail-info .order-history {
  position: absolute;
  right: 15px;
  top: 115px;
  width: 45px;
  height: 45px;
  display: block;
  border-radius: 50%;
  background: url(../images/svg/icon_order_history.svg) center center no-repeat #EBF5F4;
  background-size: 55%;
  z-index: 2;
}
.popup-container .order-history:hover {
  background: url(../images/svg/icon_order_history_white.svg) center center no-repeat #11948a;
  background-size: 55%;
}
.popup-container .review-note {
  line-height: 1.5;
  text-align: center;
  padding: 10px;
}
.popup-container ul.order-step-list,#blank-detail-info ul.order-step-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 0px 10px 5px;
  justify-content: center;
}
.popup-container ul.order-step-list li,#blank-detail-info ul.order-step-list li {
  flex: 1;
  text-align: center;
  position: relative;
}
#blank-detail-info ul.order-step-list li{
  flex: none;
  width: 12%;
}
.popup-container ul.order-step-list li::after,#blank-detail-info ul.order-step-list li::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: -3px;
  width: 8.5px;
  height: 7.5px;
  display: block;
  background: url(../images/svg/icon_step_arr.svg) center center no-repeat;
  background-size: contain;
}
.popup-container ul.order-step-list li:last-child::after {
  display: none;
}
.popup-container ul.order-step-list li .icon {
  border-radius: 50px;
  background-color: #fff;
  text-align: center;
  display: inline-block;
}
.popup-container ul.order-step-list li .icon p,#blank-detail-info ul.order-step-list li .icon p {
  font-size: 13px;
  font-weight: bold;
  color: #87C9C4;
  position: relative;
  padding-top: 52px;
  line-height: 1.2;
}
.popup-container ul.order-step-list li .icon p::before,#blank-detail-info ul.order-step-list li .icon p::before {
  position: absolute;
  content: "";
  width: 34px;
  height: 32px;
  display: block;
  top: 10px;
  left: calc(50% - 15px);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.popup-container ul.order-step-list li .icon-a p::before,#blank-detail-info ul.order-step-list li .icon-a p::before {
  background-image: url(../images/svg/icon_order_step_a.svg);
}
.popup-container ul.order-step-list li .icon-b p::before,#blank-detail-info ul.order-step-list li .icon-b p::before {
  width: 29px;
  background-image: url(../images/svg/icon_order_step_b.svg);
}
.popup-container ul.order-step-list li .icon-c p::before,#blank-detail-info ul.order-step-list li .icon-c p::before {
  width: 29px;
  background-image: url(../images/svg/icon_order_step_c.svg);
}
.popup-container ul.order-step-list li .icon-d p::before,#blank-detail-info ul.order-step-list li .icon-d p::before {
  width: 29px;
  background-image: url(../images/svg/icon_order_step_d.svg);
}
.popup-container ul.order-step-list li .icon-e p::before,#blank-detail-info ul.order-step-list li .icon-e p::before {
  width: 29px;
  background-image: url(../images/svg/icon_order_step_e.svg);
}
.popup-container ul.order-step-list li .icon-f p::before,#blank-detail-info ul.order-step-list li .icon-f p::before {
  width: 36px;
  height: 36px;
  top: 7px;
  left: calc(50% - 18px);
  background-image: url(../images/svg/icon_order_step_f.svg);
}
.popup-container ul.order-step-list li .icon-g p::before,#blank-detail-info ul.order-step-list li .icon-g p::before {
  width: 29px;
  background-image: url(../images/svg/icon_order_step_g.svg);
}
.popup-container ul.order-step-list li.on p,#blank-detail-info ul.order-step-list li.on p {
  color: #11948a;
}
.popup-container ul.order-step-list li.on .icon-a p::before,#blank-detail-info ul.order-step-list li.on .icon-a p::before {
  background-image: url(../images/svg/icon_order_step_a_on.svg);
}
.popup-container ul.order-step-list li.on .icon-b p::before,#blank-detail-info ul.order-step-list li.on .icon-b p::before {
  background-image: url(../images/svg/icon_order_step_b_on.svg);
}
.popup-container ul.order-step-list li.on .icon-c p::before,#blank-detail-info ul.order-step-list li.on .icon-c p::before {
  background-image: url(../images/svg/icon_order_step_c_on.svg);
}
.popup-container ul.order-step-list li.on .icon-d p::before,#blank-detail-info ul.order-step-list li.on .icon-d p::before {
  background-image: url(../images/svg/icon_order_step_d_on.svg);
}
.popup-container ul.order-step-list li.on .icon-e p::before,#blank-detail-info ul.order-step-list li.on .icon-e p::before {
  background-image: url(../images/svg/icon_order_step_e_on.svg);
}
.popup-container ul.order-step-list li.on .icon-f p::before,#blank-detail-info ul.order-step-list li.on .icon-f p::before {
  background-image: url(../images/svg/icon_order_step_f_on.svg);
}
.popup-container ul.order-step-list li.on .icon-g p::before,#blank-detail-info ul.order-step-list li.on .icon-g p::before {
  background-image: url(../images/svg/icon_order_step_g_on.svg);
}
.popup-container ul.order-step-list li.no .icon p,#blank-detail-info ul.order-step-list li.no .icon p {
  color: #d54848;
}
.popup-container ul.order-step-list li.no .icon-b p::before,#blank-detail-info ul.order-step-list li.no .icon-b p::before {
  background-image: url(../images/svg/icon_order_step_b_no.svg);
}
.popup-container ul.order-step-list li.no .icon-c p::before,#blank-detail-info ul.order-step-list li.no .icon-c p::before {
  background-image: url(../images/svg/icon_order_step_c_no.svg);
}
.popup-container ul.order-step-list li.no .icon-d p::before,#blank-detail-info ul.order-step-list li.no .icon-d p::before {
  background-image: url(../images/svg/icon_order_step_d_no.svg);
}
.popup-container ul.order-step-list li.no .icon-e p::before,#blank-detail-info ul.order-step-list li.no .icon-e p::before {
  background-image: url(../images/svg/icon_order_step_e_no.svg);
}
.popup-container ul.order-step-list li.no .icon-g p::before,#blank-detail-info ul.order-step-list li.no .icon-g p::before {
  background-image: url(../images/svg/icon_order_step_e_no.svg);
}
.popup-container ul.order-step-list li.no a:hover p {
  text-decoration: underline;
}
.popup-container .fillin-box,#blank-detail-info .fillin-box  {
  width: 100%;
  padding: 15px;
  max-width: 670px;
  margin: 0 auto;
}
#blank-detail-info .fillin-box{
  max-width: none;
}
.popup-container .fillin-box input {
  background-color: #f8f8f8;
}
.popup-container .fillin-box input.w30 {
  max-width: 30%;
}
.popup-container .fillin-box .field,#blank-detail-info .fillin-box .field {
  width: 100%;
  padding: 15px 0;
  border-bottom: 1px #cdcdcd dashed;
}
.popup-container .fillin-box .field.border_4,#blank-detail-info .fillin-box .field.border_4 {
  border-bottom: 4px #EBF5F4 solid;
}
.popup-container .fillin-box .field:last-child,#blank-detail-info .fillin-box .field:last-child {
  border: none;
}
.popup-container .fillin-box .field .left-sub-title,#blank-detail-info .fillin-box .field .left-sub-title {
  float: left;
  width: 87px;
  min-height: 70px;
  display: block;
  border-radius: 10px;
  background-color: #ebf5f4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 5px;
  position: relative;
}
.popup-container .fillin-box .field .left-sub-title p,#blank-detail-info .fillin-box .field .left-sub-title p {
  color: #11948a;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.2rem;
}
.popup-container .fillin-box .field .left-sub-title p.change-btn {
  position: absolute;
  bottom: -42px;
  left: 0;
  width: 100%;
}
.popup-container .fillin-box .field .left-sub-title p.change-btn a.change {
  padding: 7px 10px;
  background-color: #ebf5f4;
  border: 1px solid #ebf5f4;
  border-radius: 10px;
  display: block;
}
.popup-container .fillin-box .field .left-sub-title p.change-btn a.change span {
  position: relative;
  color: #11948a;
  line-height: 1.125rem;
  padding-left: 18px;
  font-size: 0.688rem;
}
.popup-container .fillin-box .field .left-sub-title p.change-btn a.change span::after {
  position: absolute;
  content: "";
  left: 0;
  top: calc(50% - 6px);
  height: 12px;
  display: block;
  z-index: 2;
  width: 14px;
  position: absolute;
  background: url(../images/svg/icon_change_media.svg) center center no-repeat;
  background-size: contain;
}
.popup-container .fillin-box .field .left-sub-title p.change-btn a.change:hover {
  border-color: #11948a;
}
.popup-container .fillin-box .field .fillin-info {
  float: left;
  width: calc(100% - 97px);
}
.popup-container .fillin-box .field .fillin-info .pay-t-note {
  width: 100%;
  padding-top: 0;
}
.popup-container .fillin-box .field .fillin-info .pay-t-note .confirm {
  max-width: initial;
  margin-left: 18px;
}
@media all and (max-width: 650px) {
  .popup-container .fillin-box .field .fillin-info .pay-t-note .confirm {
    margin-left: initial;
  }
}
.popup-container .fillin-box .field .pay-note-w {
  padding-left: 40px;
}
.popup-container .fillin-box .field .pay-note-w p.input-value {
  max-width: 100%;
}
@media all and (max-width: 650px) {
  .popup-container .fillin-box .field .pay-note-w {
    padding: 10px;
  }
}
.popup-container .fillin-box .field fieldset {
  width: 100%;
  padding: 8px 0;
  position: relative;
}
.popup-container .fillin-box .field fieldset .text-error {
  position: absolute;
  font-size: 0.688rem;
  bottom: -5px;
  right: 0px;
}
.popup-container .fillin-box .field fieldset .c-red {
  color: #f44336;
}
.popup-container .fillin-box .field fieldset label.item-title {
  float: left;
  width: 156px;
  text-align: right;
  padding-right: 18px;
  line-height: 1.5;
  font-size: 0.875rem;
  font-weight: bold;
  padding-top: 10px;
}

.popup-container .fillin-box .field fieldset input.default,
.popup-container .fillin-box .field fieldset textarea,
.popup-container .fillin-box .field fieldset .the-select,
.popup-container .fillin-box .field fieldset .confirm {
  width: 100%;
  max-width: calc(100% - 156px);
  float: left;
}
.popup-container .fillin-box .field fieldset .fillin-pay {
  position: relative;
}
.popup-container .fillin-box .field fieldset .fillin-pay input {
  width: 100%;
  max-width: 100%;
}
.popup-container .fillin-box .field fieldset .fillin-pay .pay-howmuch {
  position: absolute;
  right: 28px;
  top: 16px;
  font-size: 0.813rem;
}
.popup-container .fillin-box .field fieldset .fillin-pay .pay-howmuch span {
  padding-left: 5px;
  font-size: 0.938rem;
  color: #11948a;
  font-weight: bold;
}
.popup-container .fillin-box .field fieldset .both-for-add {
  position: relative;
}
.popup-container .fillin-box .field fieldset .both-for-add .the-select {
  max-width: calc(50% - 5px);
  margin-bottom: 7px;
}
.popup-container .fillin-box .field fieldset .both-for-add .the-select:nth-child(2) {
  float: right;
}
.popup-container .fillin-box .field fieldset .both-for-add input {
  max-width: 100%;
}
.popup-container .fillin-box .field fieldset .both-for-date {
  border: 1px solid #f6f6f6;
  background-color: #f6f6f6;
  border-radius: 50px;
  position: relative;
}
.popup-container .fillin-box .field fieldset .both-for-date input {
  float: left;
  width: 50%;
  padding: 0 20px 0 20px;
  text-align: center;
  height: 44px;
  line-height: 44px;
}
.popup-container .fillin-box .field fieldset .both-for-date input[type=date]::-webkit-inner-spin-button,
.popup-container .fillin-box .field fieldset .both-for-date input[type=date]::-webkit-calendar-picker-indicator {
  color: #21534f;
}
.popup-container .fillin-box .field fieldset .both-for-date::before {
  content: "～";
  line-height: 46px;
  position: absolute;
  top: 0;
  left: 50%;
  color: #11948a;
  font-weight: bold;
}
.popup-container .fillin-box .field fieldset .both-for-date .text-error {
  bottom: -14px;
}
.popup-container .fillin-box .field fieldset .one-field-date input {
  width: 100%;
  text-align: left;
}
.popup-container .fillin-box .field fieldset .one-field-date::before {
  display: none;
}
.popup-container .fillin-box .field fieldset .disabled-bg {
  background-color: #e1e1e1;
}
.popup-container .fillin-box .field fieldset .disabled-bg input {
  color: #9e9e9e;
  background: transparent;
}
.popup-container .fillin-box .field fieldset .disabled-bg::before {
  color: #9e9e9e;
}
.popup-container .fillin-box .field fieldset .has-error {
  border: 1px #f44336 solid;
}
.popup-container .fillin-box .field fieldset .both-for-discount input {
  width: 100%;
}
.popup-container .fillin-box .field fieldset .both-for-discount .option-list {
  float: left;
  width: 28%;
  min-width: 100px;
  padding-right: 10px;
}
.popup-container .fillin-box .field fieldset .both-for-discount .option-other {
  width: 100%;
}
.popup-container .fillin-box .field fieldset .both-for-discount .discount {
  position: relative;
  width: 42%;
  min-width: 120px;
  max-width: 158px;
  float: left;
}
.popup-container .fillin-box .field fieldset .both-for-discount .discount::before {
  content: "%";
  line-height: 46px;
  position: absolute;
  top: 0;
  right: 30px;
  font-size: 0.875rem;
}
.popup-container .fillin-box .field fieldset .both-for-invoice .option-list {
  float: left;
  width: 100%;
}
.popup-container .fillin-box .field fieldset .both-for-invoice .option-other {
  padding-right: 10px;
}
.popup-container .fillin-box .field fieldset .both-for-invoice input.other {
  width: 100%;
  max-width: calc(100% - 100px);
}
.popup-container .fillin-box .field fieldset .both-for-phone input {
  float: left;
}
.popup-container .fillin-box .field fieldset .both-for-phone input:first-child {
  width: calc(70% - 10px);
  margin-right: 10px;
}
.popup-container .fillin-box .field fieldset .both-for-phone input:nth-child(2) {
  width: 30%;
}
.popup-container .fillin-box .field fieldset .search-list {
  position: relative;
}
.popup-container .fillin-box .field fieldset .search-list input {
  width: 100%;
}
.popup-container .fillin-box .field fieldset .search-list .btn-search {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50px;
  height: 46px;
  display: block;
  text-align: center;
  line-height: 46px;
  color: #bcbcbc;
}
.popup-container .fillin-box .field fieldset .search-list .btn-search:hover {
  color: #11948a;
}
.popup-container .fillin-box .field fieldset .width100 {
  max-width: 100%;
  float: none;
}
.popup-container .fillin-box .field .width-100 {
  width: 100%;
}
.popup-container .fillin-box .field .width-100 fieldset input,
.popup-container .fillin-box .field .width-100 fieldset input.default,
.popup-container .fillin-box .field .width-100 fieldset textarea {
  max-width: 100%;
}
.popup-container .fillin-box .field .width-100 fieldset textarea {
  max-width: 100%;
  height: 200px;
}
.popup-container .fillin-box .field .form-details,#blank-detail-info .fillin-box .field .form-details {
  float: left;
  padding: 15px 0 10px 0;
  width: 100%;
}
#blank-detail-info .fillin-box .field .form-details {
  float: left;
  padding: 15px 0;
  width: 100%;
}
#blank-detail-info .fillin-box{
  width: 80%;
  margin: auto;
}
.popup-container .fillin-box .field#advance_payment_editform .form-details{
  float: none;
}
.popup-container .fillin-box .field .form-details .item-title,#blank-detail-info .fillin-box .field .form-details .item-title {
  font-size: 0.875rem;
  padding: 20px 0 10px 12px;
  color: #11948a;
  display: block;
  font-weight: bold;
}
#blank-detail-info .fillin-box .field .form-details .item-title{
  font-size: 1rem;
  display: inline-block;
  margin-right: 10px;
  width: 100px;
}
.popup-container .fillin-box .field .form-details .a-row,#blank-detail-info .fillin-box .field .form-details .a-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid #F6F6F6;
}
.popup-container .fillin-box .field .form-details .a-row p,#blank-detail-info .fillin-box .field .form-details .a-row p {
  font-size: 0.813rem;
  word-break: break-all;
  line-height: 1.3;
}
.popup-container .fillin-box .field .form-details .a-row p a {
  color: #11948a;
  text-decoration: underline;
}
.popup-container .fillin-box .field .form-details .a-row p a:hover {
  text-decoration: none;
}
.popup-container .fillin-box .field .form-details .a-row > div,#blank-detail-info .fillin-box .field .form-details .a-row > div {
  flex: 1;
  padding: 10px;
}
.popup-container .fillin-box .field .form-details .a-row .pay-acc-virtual {
  flex: 2;
}
.popup-container .fillin-box .field .form-details .a-row .pay-nb,
.popup-container .fillin-box .field .form-details .a-row .pay-source,
.popup-container .fillin-box .field .form-details .a-row .pay-day {
  max-width: 95px;
}
.popup-container .fillin-box .field .form-details .a-row .pay-amount,#blank-detail-info .fillin-box .field .form-details .a-row .pay-amount {
  text-align: right;
}
#blank-detail-info fieldset.remark{
  clear: both;
}
#blank-detail-info fieldset.remark textarea{
  width: 100%;
  margin-top: 15px;
}
.popup-container .fillin-box .field .form-details .a-row .pay-edit  {
  flex: 1.5;
  text-align: center;
}
.popup-container .fillin-box .field .form-details .a-row .pay-edit input {
  text-align: center;
  font-weight: bold;
  color: #11948a;
  height: initial;
  line-height: 40px;
}
.popup-container .fillin-box .field .form-details .a-row .other-tools {
  max-width: 55px;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  padding: 0;
}
.popup-container .fillin-box .field .form-details .a-row .other-tools a {
  padding: 10px;
  color: #11948a;
}
.popup-container .fillin-box .field .form-details .a-row .other-tools a:hover {
  opacity: 0.5;
}
.popup-container .fillin-box .field .form-details .bg-top-title,#blank-detail-info .fillin-box .field .form-details .bg-top-title {
  background-color: #ebf5f4;
  border-radius: 4px 4px 0 0;
  border: none;
}
#blank-detail-info .fillin-box .field .form-details .bg-top-title {
  border-top: 1px solid #11948a;
}
.popup-container .fillin-box .field .form-details .bg-top-title p,#blank-detail-info .fillin-box .field .form-details .bg-top-title p {
  font-weight: bold;
}
@media all and (max-width: 650px) {
  .popup-container .fillin-box .field .form-details {
    padding-top: 10px;
  }
  .popup-container .fillin-box .field .form-details .item-title {
    padding-top: 0px;
  }
  .popup-container .fillin-box .field .form-details .a-row .pay-amount {
    min-width: 85px;
  }
}
.popup-container .fillin-box .field .show-all .item-title {
  border-bottom: 1px solid #11948a;
  color: #333;
}
.popup-container .fillin-box .field .show-all .a-row .pay-nb,
.popup-container .fillin-box .field .show-all .a-row .pay-source,
.popup-container .fillin-box .field .show-all .a-row .pay-day {
  max-width: initial;
}
.popup-container .fillin-box .field .show-all .a-row:nth-child(even),#blank-detail-info .field .show-all .a-row:nth-child(even) {
  background-color: #f6f6f6;
}
.popup-container .fillin-box .field .show-all .a-row:nth-child(even) .the-select,.popup-container .fillin-box .field .show-all .a-row:nth-child(even) input{
  background-color: white;
}
.popup-container .fillin-box .field .show-all .bg-top-title {
  background-color: #ebf5f4 !important;
}
.popup-container .fillin-box .field .show-all .bottom-total,#blank-detail-info .fillin-box .field .show-all .bottom-total {
  border-top: 1px solid #11948a;
}
.popup-container .fillin-box .field .show-all .bottom-total p,#blank-detail-info .fillin-box .field .show-all .bottom-total p {
  font-size: 0.813rem;
}
.popup-container .fillin-box .field .show-all .bottom-total p span,#blank-detail-info .fillin-box .field .show-all .bottom-total p span {
  padding-left: 5px;
  color: #11948a;
  font-weight: bold;
  font-size: 0.938rem;
}
.popup-container .fillin-box .field ul.list-terms-single {
  float: left;
  width: 100%;
  padding: 10px 0 0 30px;
  list-style-type: disc;
  color: #707070;
}
.popup-container .fillin-box .field ul.list-terms-single li {
  position: relative;
  padding: 15px 0;
}
.popup-container .fillin-box .field ul.list-terms-single li p {
  color: #707070;
  font-size: 0.813rem;
  line-height: 22px;
  white-space: pre-wrap;
}
.popup-container .fillin-box .field ul.list-terms-single li .delete {
  position: absolute;
  width: calc(100% + 40px);
  height: 100%;
  display: inline-table;
  left: -30px;
  top: 0;
  color: #11948a;
  border-radius: 10px;
  z-index: 5;
  text-align: right;
  padding: 5px;
}
.popup-container .fillin-box .field ul.list-terms-single li .delete a.icon {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  display: inline-block;
  opacity: 0;
  border-radius: 50%;
  background-color: #fff;
}
.popup-container .fillin-box .field ul.list-terms-single li .delete a.icon:hover {
  background-color: #11948a;
  color: #fff;
}
.popup-container .fillin-box .field ul.list-terms-single li .delete:hover {
  background-color: rgba(246, 246, 246, 0.568627451);
}
.popup-container .fillin-box .field ul.list-terms-single li .delete:hover a.icon {
  display: inline-block;
  opacity: 1;
}
.popup-container .fillin-box .field ul.list-terms-single .terms-description ul li {
  padding: 0;
}
.popup-container .fillin-box .field ul.list-project-single {
  padding: 15px 0;
  float: left;
  width: 100%;
}
.popup-container .fillin-box .field ul.list-project-single li {
  font-size: 0.875rem;
  border: 1px #11948a solid;
  color: #11948a;
  border-radius: 50px;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  float: left;
  cursor: initial;
  padding: 0 40px 0 15px;
  position: relative;
  margin: 0 10px 10px 0;
}
.popup-container .fillin-box .field ul.list-project-single li p {
  color: #11948a;
  text-align: left;
  height: 42px;
  line-height: 42px;
  font-weight: bold;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.popup-container .fillin-box .field ul.list-project-single li a {
  position: absolute;
  width: 40px;
  right: 0;
  top: 0;
  text-align: center;
  line-height: 42px;
}
.popup-container .fillin-box .field ul.list-product-single {
  float: right;
  width: 100%;
  max-width: calc(100% - 156px);
}
.popup-container .fillin-box .field ul.list-product-single li {
  cursor: initial;
  position: relative;
  padding: 8px 0;
  border-bottom: 1px #cdcdcd dashed;
}
.popup-container .fillin-box .field ul.list-product-single li:last-child {
  border: none;
}
.popup-container .fillin-box .field ul.list-product-single li p.project {
  float: left;
  width: calc(100% - 100px);
  text-align: left;
  height: 42px;
  line-height: 42px;
  font-size: 0.875rem;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  padding: 0 5px 0 10px;
}
.popup-container .fillin-box .field ul.list-product-single li p.input-value {
  float: right;
  word-break: break-all;
}
.popup-container .fillin-box .field ul.list-product-single li .delete {
  position: absolute;
  width: calc(100% - 100px);
  height: 46px;
  display: block;
  left: 0;
  top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #11948a;
  border-radius: 10px;
}
.popup-container .fillin-box .field ul.list-product-single li .delete a.icon {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  display: block;
  opacity: 0;
  border-radius: 50%;
  background-color: #fff;
}
.popup-container .fillin-box .field ul.list-product-single li .delete a.icon:hover {
  background-color: #11948a;
  color: #fff;
}
.popup-container .fillin-box .field ul.list-product-single li .delete:hover {
  background-color: rgba(246, 246, 246, 0.568627451);
}
.popup-container .fillin-box .field ul.list-product-single li .delete:hover a.icon {
  display: block;
  opacity: 1;
}
.popup-container .fillin-box .field ul.list-product-single li input {
  float: right;
  width: 95px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-weight: bold;
  font-size: 0.875rem;
  color: #11948a;
}
.popup-container .fillin-box .field ul.list-product-single li.project-group .group {
  float: left;
  width: calc(100% - 100px);
  padding-bottom: 10px;
}
.popup-container .fillin-box .field ul.list-product-single li.project-group .group p {
  line-height: 2;
}
.popup-container .fillin-box .field ul.list-product-single li.project-group .group p.p-title {
  padding-top: 8px;
}
.popup-container .fillin-box .field ul.list-product-single li.project-group .group p .c-gray {
  color: #9D9D9D;
}
.popup-container .fillin-box .field ul.list-product-single li.project-group .group .f-ss {
  color: #666666;
  font-size: 11px;
}
.popup-container .fillin-box .field ul.show-contact-list {
  padding: 3px 0;
}
.popup-container .fillin-box .field ul.show-contact-list li {
  position: relative;
  border-bottom: 1px #cdcdcd dashed;
  margin: 5px 0;
}
.popup-container .fillin-box .field ul.show-contact-list li p {
  letter-spacing: 1px;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 2px 5px;
  word-break: break-all;
}
.popup-container .fillin-box .field ul.show-contact-list li p.name {
  font-weight: bold;
  cursor: pointer;
  position: relative;
}
.popup-container .fillin-box .field ul.show-contact-list li p.name::before {
  content: "";
  position: absolute;
  right: 10px;
  top: calc(50% - 2.5px);
  width: 14px;
  height: 5px;
  display: block;
  background-image: url(../images/svg/arr-down-green.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.popup-container .fillin-box .field ul.show-contact-list li p.name-pay {
  padding-left: 4px;
}
.popup-container .fillin-box .field ul.show-contact-list li p.arr-down::before {
  background-image: url(../images/svg/arr-up-green.svg);
}
.popup-container .fillin-box .field ul.show-contact-list li .info {
  width: 100%;
}
.popup-container .fillin-box .field ul.show-contact-list li .info p {
  font-size: 0.813rem;
  float: left;
  width: 100%;
}
.popup-container .fillin-box .field ul.show-contact-list li .info p span {
  vertical-align: top;
  min-width: 50px;
  padding-right: 5px;
}
.popup-container .fillin-box .field ul.show-contact-list li .info .add {
  width: 100%;
}
.popup-container .fillin-box .field ul.show-contact-list li .info .phone,
.popup-container .fillin-box .field ul.show-contact-list li .info .fax {
  width: 50%;
  background-color: #f6f6f6;
}
.popup-container .fillin-box .field ul.show-contact-list li .info .mail {
  width: 100%;
}
.popup-container .fillin-box .field ul.show-contact-list li .info .mail a {
  color: #11948a;
}
.popup-container .fillin-box .field ul.show-contact-list li .info .mail a:hover {
  text-decoration: underline;
}
.popup-container .fillin-box .field ul.show-contact-list li .info .mail span:nth-child(2) {
  max-width: calc(100% - 52px);
  word-wrap: break-word;
}
.popup-container .fillin-box .field ul.show-contact-list li .info label.item-title {
  width: 100px;
  text-align: left;
  font-weight: normal;
  font-size: 0.813rem;
  line-height: 30px;
  padding: 0 15px 10px 5px;
}
.popup-container .fillin-box .field ul.show-contact-list li .info .the-select {
  border-radius: 0;
  float: right;
  max-width: calc(100% - 100px);
}
.popup-container .fillin-box .field ul.show-contact-list li .info .the-select select {
  height: 30px;
  line-height: 30px;
  font-size: 0.813rem;
}
.popup-container .fillin-box .field ul.show-contact-list li:last-child {
  border: none;
}
.popup-container .fillin-box .field ul.no-pad li {
  padding: 0;
}
.popup-container .fillin-box .field .media-details {
  float: right;
  width: 100%;
  max-width: 530px;
}
.popup-container .fillin-box .field .media-details h4 {
  padding: 10px 0;
  font-weight: bold;
  color: #11948a;
  font-size: 0.875rem;
}
.popup-container .fillin-box .field .media-details h4 span {
  font-size: 0.688rem;
}
.popup-container .fillin-box .field .media-details ul li {
  position: relative;
  border-bottom: 1px #cdcdcd dashed;
  padding: 4px 0;
  display: flex;
  flex-wrap: wrap;
}
.popup-container .fillin-box .field .media-details ul li div {
  flex: 1;
  padding: 0 5px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-container .fillin-box .field .media-details ul li div p {
  line-height: 1.2;
  font-size: 0.75rem;
  text-align: center;
}
.popup-container .fillin-box .field .media-details ul li div p span {
  font-size: 0.688rem;
}
.popup-container .fillin-box .field .media-details ul li div p.c-green {
  color: #11948a;
  font-weight: bold;
}
.popup-container .fillin-box .field .media-details ul li div input {
  text-align: center;
  width: 100%;
  height: 40px;
  padding: 0 5px;
}
.popup-container .fillin-box .field .media-details ul li div.ad-title-other {
  text-align: left;
  justify-content: left;
  padding: 0 15px;
}
.popup-container .fillin-box .field .media-details ul li div.ad-money input, .popup-container .fillin-box .field .media-details ul li div.ad-subtotal input {
  color: #11948a;
  font-weight: bold;
}
.popup-container .fillin-box .field .media-details ul li div.ad-note {
  flex: 2;
  margin: 0 5px;
}
.popup-container .fillin-box .field .media-details ul li div.ad-note input {
  font-size: 0.688rem;
}
.popup-container .fillin-box .field .media-details ul li div.ad-date {
  width: 10%;
}
.popup-container .fillin-box .field .media-details ul li div.ad-other a {
  color: #11948a;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  text-align: center;
  background-color: #fff;
}
.popup-container .fillin-box .field .media-details ul li div.ad-other a:hover {
  opacity: 0.7;
}
.popup-container .fillin-box .field .media-details ul li div.ad-description {
  flex: 100%;
  height: initial;
  padding: 10px 15px 5px 15px;
}
.popup-container .fillin-box .field .media-details ul li div.ad-description p {
  width: 100%;
  font-size: 0.688rem;
  color: #7c7c7c;
  text-align: left;
  line-height: 18px;
}
.popup-container .fillin-box .field .media-details ul li div.ad-note-edit {
  flex: 100%;
  padding-top: 8px;
}
.popup-container .fillin-box .field .media-details ul li div.total p {
  color: #11948a;
  font-size: 0.9rem;
}
.popup-container .fillin-box .field .media-details ul li.media-title {
  border: none;
  background-color: #ebf5f4;
}
.popup-container .fillin-box .field .media-details ul li.media-title .ad-other {
  justify-content: center;
}
.popup-container .fillin-box .field .media-details ul li:last-child {
  margin-top: 3px;
  border-bottom: none;
  padding: 10px 0;
}
.popup-container .fillin-box .field .media-details ul li:hover .ad-other {
  opacity: 1;
}
.popup-container .fillin-box .field .media-details .discount-title {
  position: relative;
}
.popup-container .fillin-box .field .media-details .discount-title h4 {
  padding-right: 70px;
}
.popup-container .fillin-box .field .media-details .discount-title .other-tools {
  position: absolute;
  top: -8px;
  right: 5px;
  display: flex;
}
.popup-container .fillin-box .field .media-details .discount-title a {
  padding: 10px;
  display: block;
  color: #11948a;
}
.popup-container .fillin-box .field .media-details .discount-title a:hover {
  opacity: 0.7;
}
.popup-container .fillin-box .field .media-details .bottom-total {
  width: 100%;
  padding: 15px;
  background-color: #ebf5f4;
  border-top: 1px #11948a solid;
}
.popup-container .fillin-box .field .media-details .bottom-total p {
  font-size: 0.813rem;
  float: left;
  font-weight: bold;
}
.popup-container .fillin-box .field .media-details .bottom-total p.total {
  float: right;
  flex: 2;
}
.popup-container .fillin-box .field .media-details .bottom-total p.total span.c-green {
  color: #11948a;
}
.popup-container .fillin-box .field .media-details .bottom-total .ad-media {
  flex: 2;
}
.popup-container .fillin-box .field .media-details .confirm {
  max-width: 100%;
  float: none;
  padding: 0 0 10px 15px;
}
.popup-container .fillin-box .field .media-details .confirm h4 {
  padding-top: 0;
}
.popup-container .fillin-box .field .media-details .confirm .input-value {
  max-width: 100%;
}
.popup-container .fillin-box .field .media-details .check-item {
  position: relative;
}
.popup-container .fillin-box .field .media-details .check-item .w-80 {
  max-width: calc(100% - 120px);
}
.popup-container .fillin-box .field .media-details .check-item label {
  max-width: calc(100% - 150px);
  line-height: 1.5;
}
.popup-container .fillin-box .field .media-details .check-item .ad-nb {
  position: absolute;
  width: 140px;
  top: 10px;
  right: 0;
  display: flex;
  gap: 5px;
}
.popup-container .fillin-box .field .media-details .check-item .ad-nb input {
  width: 100%;
  flex: 1;
  height: 36px;
  color: #11948a;
  font-weight: bold;
  padding: 0 5px;
  text-align: center;
}
.popup-container .fillin-box .field .media-details .check-item .ad-nb input.amount {
  flex: 2;
}
.popup-container .fillin-box .field .media-details .check-item .discount-nb {
  position: absolute;
  width: 160px;
  right: 0;
  top: 0;
  padding: 0 15px 0 0;
}
.popup-container .fillin-box .field .media-details .check-item .discount-nb .input-value {
  display: flex;
  width: 100%;
}
.popup-container .fillin-box .field .media-details .check-item .discount-nb .input-value span {
  flex: 1;
  width: 100%;
  text-align: right;
}
.popup-container .fillin-box .field .media-details .check-item .discount-nb .input-value span.amount {
  flex: 4;
}
.popup-container .fillin-box .field .order-total {
  float: left;
  width: 100%;
  margin-top: 10px;
  padding: 20px 15px 10px 15px;
  background-color: #ebf5f4;
  border-top: 1px #11948a solid;
  text-align: right;
}
.popup-container .fillin-box .field .order-total p {
  display: inline-block;
  font-size: 0.688rem;
  padding-bottom: 10px;
}
.popup-container .fillin-box .field .order-total p span {
  padding-left: 10px;
  font-size: 1.063rem;
  font-weight: bold;
  color: #11948a;
}
.popup-container .fillin-box .field .order-total p.all {
  padding-left: 25px;
}
.popup-container .fillin-box .field .order-total p.all span {
  font-size: 1.25rem;
}
.popup-container .fillin-box .field ul.pa-none {
  padding: 0;
}
.popup-container .fillin-box .field ul.add-row-bg li {
  border: none;
}
.popup-container .fillin-box .field ul.add-row-bg li p {
  line-height: 18px;
}
.popup-container .fillin-box .field ul.add-row-bg li .info {
  padding: 6px 10px;
}
.popup-container .fillin-box .field ul.add-row-bg li:nth-child(odd) {
  background-color: #f6f6f6;
}
.popup-container .fillin-box .field ul.file-list {
  float: left;
  width: 100%;
  text-align: left;
}
.popup-container .fillin-box .field ul.file-list li {
  display: inline-block;
  margin: 0 5px 8px 0;
}
.popup-container .fillin-box .field ul.file-list li a {
  display: inline-block;
  padding: 10px 15px;
  background-color: #ebf5f4;
  border: 1px solid #ebf5f4;
  border-radius: 10px;
}
.popup-container .fillin-box .field ul.file-list li a p {
  color: #11948a;
  line-height: 1.125rem;
}
.popup-container .fillin-box .field ul.file-list li a:hover {
  border-color: #11948a;
}
.popup-container .fillin-box .field ul.file-list li.btn-add {
  width: 100%;
}
.popup-container .fillin-box .field ul.file-list li.btn-add a {
  min-width: 122px;
  padding: 10px 15px;
  border-color: #11948a;
  background-color: #fff;
}
.popup-container .fillin-box .field ul.file-list li.btn-add a p {
  text-align: center;
}
.popup-container .fillin-box .field ul.file-list li.btn-add a span {
  padding-left: 6px;
}
.popup-container .fillin-box .field ul.file-list li.btn-add a:hover {
  background-color: #ebf5f4;
}
.popup-container .fillin-box .field .ad-note-edit {
  float: left;
  width: 100%;
  height: initial;
  padding-top: 8px;
  padding-left: 5px;
}
.popup-container .fillin-box .field .ad-note-edit textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 30px;
  max-height: 100px;
  line-height: 18px;
  background-color: #f8f8f8;
  padding: 5px 12px;
  font-size: 0.688rem;
  border-radius: 4px;
}
.popup-container .fillin-box .field .ad-note-edit p {
  background-color: #f8f8f8;
  width: 100%;
  padding: 6px 5px;
}
.popup-container .fillin-box .field .order-change {
  display: flex;
  width: calc(100% - 87px);
}
.popup-container .fillin-box .field .order-change ul.order-step-list {
  width: 100%;
}
.popup-container .fillin-box .field .order-change ul.order-step-list li {
  max-width: 86px;
}
.popup-container .fillin-box .field .order-change ul.change-btn {
  margin-left: auto;
  text-align: left;
  display: flex;
  flex-flow: column;
  gap: 5px;
}
.popup-container .fillin-box .field .order-change ul.change-btn li a {
  display: block;
  padding: 10px 5px 10px 12px;
  background-color: #ebf5f4;
  border: 1px solid #ebf5f4;
  border-radius: 10px;
  min-width: 110px;
}
.popup-container .fillin-box .field .order-change ul.change-btn li a p {
  position: relative;
  color: #11948a;
  line-height: 1.125rem;
  padding-left: 30px;
  font-size: 13px;
}
.popup-container .fillin-box .field .order-change ul.change-btn li a p::before {
  position: absolute;
  content: "";
  left: 0;
  top: calc(50% - 10px);
  height: 20px;
  display: block;
  z-index: 2;
}
.popup-container .fillin-box .field .order-change ul.change-btn li a.change p::before {
  width: 24px;
  background: url(../images/svg/icon_change_history.svg) center center no-repeat;
  background-size: contain;
}
.popup-container .fillin-box .field .order-change ul.change-btn li a.history p::before {
  width: 20px;
  left: 2px;
  background: url(../images/svg/icon_order_history.svg) center center no-repeat;
  background-size: contain;
}
.popup-container .fillin-box .field .order-change ul.change-btn li a.compare p::before {
  width: 17px;
  left: 2px;
  background: url(../images/svg/icon_change_compare.svg) center center no-repeat;
  background-size: contain;
}
.popup-container .fillin-box .field .order-change ul.change-btn li a:hover {
  border-color: #11948a;
}
.popup-container .fillin-box .no-line {
  border-bottom: none;
}
.popup-container .fillin-box .text-add {
  padding: 15px 0px 15px 36px;
}
.popup-container .fillin-box .text-add a {
  font-size: 0.875rem;
  color: #11948a;
}
.popup-container .fillin-box .text-add a:hover {
  text-decoration: underline;
}
.popup-container .fillin-box .contact-list .option-list label {
  float: left;
  padding-left: 50px;
  width: 160px;
}
.popup-container .fillin-box .contact-list .option-list .mail,
.popup-container .fillin-box .contact-list .option-list .phone {
  float: left;
  width: calc(54% - 90px);
  font-size: 0.813rem;
  margin-right: 10px;
  word-wrap: break-word;
  word-break: break-all;
}
.popup-container .fillin-box .contact-list .option-list .phone {
  width: calc(44% - 85px);
}
.popup-container .fillin-box .contact-list .option-list:nth-child(even) {
  background-color: #f6f6f6;
}
.popup-container .fillin-box .contact-list input[type=checkbox]:not(old) + label::before {
  left: 13px;
}
.popup-container .fillin-box .contact-list input[type=checkbox]:not(old) + label::after {
  left: 16px;
}
.popup-container .fillin-box .contact-list .text-add {
  padding-left: 50px;
}
.popup-container .fillin-box .order-list .option-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.popup-container .fillin-box .order-list .option-list label {
  width: 45%;
  padding-left: 50px;
  display: initial;
  overflow: initial !important;
  -webkit-line-clamp: initial;
  pointer-events: none;
}
.popup-container .fillin-box .order-list .option-list .date {
  width: 33%;
  font-size: 0.813rem;
  word-wrap: break-word;
  word-break: break-all;
}
.popup-container .fillin-box .order-list .option-list .pay-amount {
  width: 22%;
  padding-right: 8px;
  text-align: right;
  font-size: 0.813rem;
}
.popup-container .fillin-box .order-list .option-list:nth-child(odd) {
  background-color: #f6f6f6;
}
.popup-container .fillin-box .order-list .bg-top-title {
  background-color: #ebf5f4 !important;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
  border-bottom: 1px solid #11948a;
  color: #11948a;
  font-size: 0.875rem;
  position: sticky;
  z-index: 2;
  top: 0;
}
.popup-container .fillin-box .order-list .bg-top-title .date,
.popup-container .fillin-box .order-list .bg-top-title .pay-amount {
  word-break: break-all;
  color: #11948a;
}
.popup-container .fillin-box .order-list input[type=checkbox]:not(even) + label::before {
  left: 13px;
}
.popup-container .fillin-box .order-list input[type=checkbox]:not(even) + label::after {
  left: 16px;
}
.popup-container .fillin-box .pay-list .option-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.popup-container .fillin-box .pay-list .option-list label {
  width: 25%;
  max-width: 140px;
  padding-left: 50px;
  display: initial;
  overflow: initial !important;
  -webkit-line-clamp: initial;
  pointer-events: none;
}
.popup-container .fillin-box .pay-list .option-list span {
  flex: 1;
  font-size: 0.813rem;
  word-wrap: break-word;
  word-break: break-all;
}
.popup-container .fillin-box .pay-list .option-list .date, .popup-container .fillin-box .pay-list .option-list .pay-source {
  max-width: 85px;
}
.popup-container .fillin-box .pay-list .option-list .pay-amount {
  max-width: 95px;
  padding-right: 8px;
  text-align: right;
  font-size: 0.813rem;
}
.popup-container .fillin-box .pay-list .option-list:nth-child(odd) {
  background-color: #f6f6f6;
}
.popup-container .fillin-box .pay-list .bg-top-title {
  background-color: #ebf5f4 !important;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
  border-bottom: 1px solid #11948a;
  color: #11948a;
  font-size: 0.875rem;
  position: sticky;
  z-index: 2;
  top: 0;
}
.popup-container .fillin-box .pay-list .bg-top-title .date,
.popup-container .fillin-box .pay-list .bg-top-title .pay-amount {
  word-break: break-all;
  color: #11948a;
}
.popup-container .fillin-box .pay-list input[type=checkbox]:not(even) + label::before {
  left: 13px;
}
.popup-container .fillin-box .pay-list input[type=checkbox]:not(even) + label::after {
  left: 16px;
}
.popup-container .fillin-box .department-list .option-list label {
  float: left;
  padding-left: 50px;
  width: 220px;
}
.popup-container .fillin-box .department-list .option-list .add {
  width: calc(98% - 220px);
  font-size: 0.813rem;
  display: inline-block;
  padding-right: 10px;
}
.popup-container .fillin-box .terms-description {
  width: 100%;
}
.popup-container .fillin-box .terms-description .title_underline {
  border-bottom: 1px solid #333;
  padding: 2px 0px;
  display: inline-block;
  font-size: 13px;
  line-height: 1.3;
  font-weight: bold;
  margin-bottom: 5px;
}
.popup-container .fillin-box .terms-description ul {
  padding: 2.5px 0;
  width: 100%;
}
.popup-container .fillin-box .terms-description ul li {
  padding-bottom: 2.5px;
}
.popup-container .fillin-box .terms-description ul li p {
  font-size: 13px;
  line-height: 1.5;
  text-align: justify;
}
.popup-container .fillin-box .terms-description ul.ul_decimal {
  list-style-type: decimal;
  padding-inline-start: 15px;
  font-size: 13px;
  padding-top: 5px;
}
.popup-container .fillin-box .terms-description ul.ul_upper_alpha {
  list-style-type: upper-alpha;
  padding-inline-start: 20px;
}
.popup-container .fillin-box .terms-description ul.ul_lower_alpha {
  list-style-type: lower-alpha;
  padding-inline-start: 20px;
}
.popup-container .fillin-box .terms-description ul.ul_lower_alpha li {
  padding-left: 10px;
}
.popup-container .order-mode {
  padding: 10px 10px 30px 10px;
}
.popup-container .order-mode .field {
  border: none;
  text-align: center;
  padding: 5px 0;
}
.popup-container .order-mode .field .btn--primary-line-m {
  width: 100%;
  min-width: initial;
  max-width: 300px;
  background-color: #fff;
}
.popup-container .order-mode .field .btn--primary-line-m:hover {
  background-color: #11948a;
  color: #fff;
}
.popup-container .pw-box p {
  font-size: 0.875rem;
  text-align: center;
}
.popup-container .pw-box input {
  width: 100%;
  text-align: center;
  border: 1px transparent solid;
}
.popup-container .pw-box form {
  position: relative;
  padding-top: 20px;
}
.popup-container .pw-box form p.text-error {
  color: #f44336;
  position: absolute;
  width: 100%;
  top: 15px;
  font-size: 0.875rem;
}
.popup-container .pw-box .field {
  max-width: 300px;
  margin: 0 auto;
}
.popup-container .bottom-btn-tool,#blank-detail-info .bottom-btn-tool {
  padding: 25px 20px;
  background-color: #ebf5f4;
  text-align: center;
  border-radius: 0 0 18px 18px;
}
.popup-container .bottom-btn-tool fieldset {
  position: relative;
}
.popup-container .bottom-btn-tool .edit-tool {
  position: absolute;
  right: 0;
  top: calc(50% - 20px);
}
.popup-container .bottom-btn-tool .edit-tool li {
  padding: 0 5px;
}
#blank-detail-info .edit-record-user,#blank-detail-info .edit-tool{
  display: flex;
  justify-content: center;
}
#blank-detail-info .edit-record-user{
  margin-bottom: 20px;
}
.popup-container .bottom-btn-tool .edit-tool li a,#blank-detail-info .bottom-btn-tool .edit-tool li a {
  background-color: #fff;
}
.popup-container .bottom-btn-tool .edit-tool li a:hover,#blank-detail-info .bottom-btn-tool .edit-tool li a:hover {
  background-color: #11948a;
  color: #fff;
}
.popup-container .bottom-btn-tool .edit-tool li a.change,#blank-detail-info .bottom-btn-tool .edit-tool li a.change {
  display: block;
  background: url(../images/svg/icon_order_change.svg) 13px center no-repeat #fff;
  background-size: 38%;
}
.popup-container .bottom-btn-tool .edit-tool li a.change:hover,#blank-detail-info .bottom-btn-tool .edit-tool li a.change:hover {
  background: url(../images/svg/icon_order_change_w.svg) 13px center no-repeat #11948a;
  background-size: 38%;
}
.popup-container .bottom-btn-tool .edit-tool li a.change-cancel {
  width: 40px;
  height: 40px;
  font-size: 0.688rem;
  line-height: 1.2;
  align-items: center;
  justify-content: center;
  display: flex;
  font-weight: bold;
}
.popup-container .bottom-btn-tool ul.edit-record-user {
  padding-left: 25px;
}
.popup-container .bottom-btn-tool ul.edit-record-user li p.time {
  padding-right: 10px;
}
.popup-container .both-btn .btn--primary-xl {
  margin: 0 5px;
}
.popup-container .both-btn .btn-audit-yes,
.popup-container .both-btn .btn-audit-no {
  text-indent: 44px;
  letter-spacing: 3px;
}
.popup-container .both-btn .btn-audit-yes {
  background: url(../images/svg/audit-yes-white.svg) 42px center no-repeat #11948a;
}
.popup-container .both-btn .btn-audit-no {
  background: url(../images/svg/audit-no-white.svg) 42px center no-repeat #d54848;
}
@media all and (max-width: 650px) {
  #blank-detail-info .top-title{
    flex-direction: column;
  }
  #blank-detail-info .top-title .btn-add{
    position: static;
    margin-top: 20px;
  }
  .popup-container .fillin-box {
    padding: 15px;
    padding-top: 0;
  }
  .popup-container .fillin-box .field .left-sub-title,#blank-detail-info .fillin-box .field .left-sub-title {
    float: none;
    margin: 0 auto 5px auto;
    min-height: 50px;
    width: 100%;
    padding: 5px;
    -webkit-position: sticky;
    -moz-position: sticky;
    -ms-position: sticky;
    -o-position: sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .popup-container .fillin-box .field ul.order-step-list {
    padding: 0;
  }
  .popup-container .fillin-box .field ul.order-step-list li .icon p {
    font-size: 11px;
  }
  .popup-container .fillin-box .field .fillin-info {
    width: 100%;
  }
  .popup-container .fillin-box .field .fillin-info fieldset {
    display: inline-block;
    padding: 5px 0;
  }
  .popup-container .fillin-box .field .fillin-info fieldset label.item-title {
    text-align: left;
    padding-left: 10px;
    padding-bottom: 10px;
  }
  .popup-container .fillin-box .field .fillin-info fieldset input.default,
  .popup-container .fillin-box .field .fillin-info fieldset textarea,
  .popup-container .fillin-box .field .fillin-info fieldset .confirm,
  .popup-container .fillin-box .field .fillin-info fieldset .the-select {
    max-width: 100%;
  }
  .popup-container .fillin-box .field .fillin-info fieldset .both-for-add .the-select {
    max-width: calc(50% - 5px);
  }
  .popup-container .fillin-box .field .fillin-info fieldset .both-for-discount .discount {
    width: 40%;
  }
  .popup-container .fillin-box .field .fillin-info fieldset p.text-error {
    top: 102px;
  }
  .popup-container .fillin-box .field ul.show-contact-list li .info p {
    font-size: 0.688rem;
  }
  .popup-container .fillin-box .field ul.list-product-single {
    max-width: 100%;
  }
  .popup-container .fillin-box .contact-list .option-list label {
    width: 100%;
  }
  .popup-container .fillin-box .contact-list .option-list .mail,
  .popup-container .fillin-box .contact-list .option-list .phone,
  .popup-container .fillin-box .contact-list .option-list .add {
    width: 100%;
    padding-left: 50px;
    padding-bottom: 5px;
  }
  .popup-container .order-mode {
    padding-bottom: 30px;
  }
  .popup-container .bottom-btn-tool ul.edit-tool {
    position: initial;
    text-align: center;
    padding-top: 15px;
  }
  .popup-container .bottom-btn-tool ul.edit-tool li {
    display: inline-block;
    float: none;
  }
}
@media all and (max-width: 600px) {
  .popup-container .bottom-btn-tool {
    padding: 12px;
  }
}

.popup-choose .popup-container .fillin-box {
  border-bottom: 1px dashed #aeaeae;
}
.popup-choose .popup-container .fillin-box .confirm {
  max-height: 35vh;
  min-height: 65px;
  overflow-y: auto;
}
.popup-choose .popup-container .fillin-box .confirm .option-list label {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 24px;
  overflow: hidden;
}
.popup-choose .popup-container .fillin-box .field .fillin-info {
  float: none;
  width: 100%;
}
.popup-choose .popup-container .fillin-box .field fieldset {
  padding-bottom: 20px;
}
.popup-choose .popup-container .fillin-box .field fieldset .search-list {
  min-height: inherit;
  float: none;
  margin: 0 auto;
}
.popup-choose .popup-container .fillin-box .field-four .option-list {
  border-bottom: 1px dashed #cdcdcd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-choose .popup-container .fillin-box .field-four .option-list:last-child {
  border-bottom: none;
}
.popup-choose .popup-container .fillin-box .field-four .option-list p {
  line-height: 24px;
  padding: 0 5px;
}
.popup-choose .popup-container .fillin-box .field-four .option-list .media {
  float: left;
  width: 20%;
  pointer-events: none;
}
.popup-choose .popup-container .fillin-box .field-four .option-list .name {
  float: left;
  width: 30%;
}
.popup-choose .popup-container .fillin-box .field-four .option-list .description {
  color: #7c7c7c;
  float: left;
  width: 37%;
  font-size: 0.813rem;
  line-height: 18px;
}
.popup-choose .popup-container .fillin-box .field-four .option-list .fee {
  float: right;
  width: 13%;
  text-align: right;
}
.popup-choose .popup-container .fillin-box .field-three .option-list {
  border-bottom: 1px dashed #cdcdcd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-choose .popup-container .fillin-box .field-three .option-list:last-child {
  border-bottom: none;
}
.popup-choose .popup-container .fillin-box .field-three .option-list p {
  line-height: 24px;
  padding: 0 5px;
}
.popup-choose .popup-container .fillin-box .field-three .option-list .name {
  float: left;
  width: 35%;
  pointer-events: none;
}
.popup-choose .popup-container .fillin-box .field-three .option-list .description {
  color: #7c7c7c;
  float: left;
  width: 35%;
  font-size: 0.813rem;
  line-height: 18px;
}
.popup-choose .popup-container .fillin-box .field-three .option-list .day {
  color: #7c7c7c;
  font-size: 0.813rem;
  float: right;
  width: 30%;
  text-align: right;
}
.popup-choose .popup-container .fillin-box .field-four .option-list {
  border-bottom: 1px dashed #cdcdcd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-choose .popup-container .fillin-box .field-four .option-list:last-child {
  border-bottom: none;
}
.popup-choose .popup-container .fillin-box .field-four .option-list p {
  line-height: 24px;
  padding: 0 5px;
}
.popup-choose .popup-container .fillin-box .field-four .option-list .media {
  float: left;
  width: 20%;
  pointer-events: none;
}
.popup-choose .popup-container .fillin-box .field-four .option-list .name {
  float: left;
  width: 30%;
}
.popup-choose .popup-container .fillin-box .field-four .option-list .description {
  color: #7c7c7c;
  float: left;
  width: 37%;
  font-size: 0.813rem;
  line-height: 18px;
}
.popup-choose .popup-container .fillin-box .field-four .option-list .fee {
  float: right;
  width: 13%;
  text-align: right;
}
.popup-choose .popup-container .bottom-btn-tool {
  background-color: transparent;
}
@media all and (max-width: 600px) {
  .popup-choose .popup-container .fillin-box .field-four .option-list {
    display: table;
  }
  .popup-choose .popup-container .fillin-box .field-four .option-list .media {
    width: 50%;
  }
  .popup-choose .popup-container .fillin-box .field-four .option-list .name {
    width: 50%;
  }
  .popup-choose .popup-container .fillin-box .field-four .option-list .description {
    width: calc(100% - 70px);
    padding-left: 36px;
  }
  .popup-choose .popup-container .fillin-box .field-four .option-list .fee {
    width: 70px;
  }
}

.popup-bg-white .popup-container .fillin-box {
  padding-bottom: 0;
}
.popup-bg-white .popup-container .bottom-btn-tool {
  background-color: transparent;
}

.popup-finish p {
  font-size: 0.875rem;
}
.popup-finish .popup-container .top-title,#blank-detail-info .top-title {
  background-color: #ebf5f4;
  border-radius: 18px 18px 0 0;
}
.popup-finish .fillin-box p.product-title {
  text-align: center;
  color: #11948a;
  padding: 10px 0 20px 0;
  font-weight: bold;
  font-size: 1rem;
  line-height: 22px;
}
.popup-finish .fillin-box p.product-description,
.popup-finish .fillin-box p.product-valid-period {
  line-height: 24px;
  text-align: justify;
}
.popup-finish .fillin-box .field ul.list-terms-single {
  padding-top: 0;
}
.popup-finish .fillin-box .field ul.list-terms-single li {
  padding: 0;
}
.popup-finish .fillin-box .field ul.list-project-single {
  padding: 0 0 0 20px;
}
.popup-finish .fillin-box .field ul.list-project-single li {
  padding: 0 20px;
}
.popup-finish .fillin-box .field ul.list-product-single li {
  padding: 1px 0;
}
.popup-finish .fillin-box .field ul.list-product-single li p.project {
  padding-left: 0;
  width: calc(100% - 72px);
}
.popup-finish .fillin-box .field ul.show-contact-list {
  width: calc(100% - 156px);
  float: left;
  padding-top: 0;
}
.popup-finish .fillin-box .field ul.show-contact-list li {
  margin: 0;
}
.popup-finish .fillin-box .field .confirm .list-project-single {
  padding: 0;
}
.popup-finish .fillin-box .field .ad-note-edit p {
  font-size: 0.813rem;
  text-align: center;
}
.popup-finish .fillin-box .fl-w100 .fillin-info {
  width: 100%;
}
.popup-finish .fillin-box .fl-w100 .fillin-info .item-title {
  text-align: left !important;
  padding-left: 0 !important;
}
.popup-finish .fillin-box .fl-w100 .form-details .item-title {
  color: #333;
  padding: 0 0 15px 0;
}
.popup-finish .fillin-box .fl-w100 .form-details .a-row .other-tools {
  max-width: 96px;
}
.popup-finish .fillin-box .fl-w100 .form-details .a-row .pay-note {
  flex: 2;
}
.popup-finish .history-box {
  padding: 0 20px 20px 20px;
}
.popup-finish .history-box .fillin-box {
  max-width: 480px;
}
.popup-finish .history-box .fillin-box ul.edit-record-user li p.time {
  padding-right: 10px;
}
.popup-finish .history-box .fillin-box ul.edit-record-user li p.id {
  width: 100%;
  max-width: 120px;
  float: right;
  padding-right: 0;
}
.popup-finish .history-box .order-record li {
  position: relative;
}
.popup-finish .history-box .order-record li::before {
  position: absolute;
  content: "";
  width: 2px;
  height: calc(100% - 13px);
  top: 0;
  left: 18px;
  display: block;
  background-color: #ebf5f4;
  visibility: initial;
  z-index: 0;
}
.popup-finish .history-box .order-record li::after {
  position: absolute;
  content: "";
  width: 2px;
  height: calc(100% - 13px);
  top: 13px;
  left: 18px;
  display: block;
  background-color: #ebf5f4;
  visibility: initial;
  z-index: 0;
}
.popup-finish .history-box .order-record li:first-child::before {
  display: none;
}
.popup-finish .history-box .order-record li:last-child::after {
  display: none;
}
.popup-finish .history-box .order-record li .info {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}
.popup-finish .history-box .order-record li p {
  font-size: 0.813rem;
  flex: 1;
}
.popup-finish .history-box .order-record li p.time {
  padding-left: 25px;
  position: relative;
}
.popup-finish .history-box .order-record li p.time::before {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  top: 3px;
  left: 5px;
  display: block;
  border-radius: 50%;
  background-color: #11948a;
  z-index: 1;
}
.popup-finish .history-box .order-record li p.text .c-green {
  color: #11948a;
}
.popup-finish .history-box .order-record li p.text .c-red {
  color: #f44336;
}
.popup-finish .history-box .order-record li a.info .time::before {
  background-color: #f44336;
}
.popup-finish .history-box .order-record li a.info:hover {
  background-color: #ebf5f4;
  border-radius: 20px;
}
.popup-finish .changes-info {
  padding: 0 20px 12px 20px;
}
.popup-finish .changes-info .fillin-box {
  margin-bottom: 10px;
}
.popup-finish .changes-info .fillin-box .product-title {
  padding-bottom: 10px;
}
.popup-finish .changes-info .fillin-box .fillin-info {
  width: 100%;
}
.popup-finish .changes-info .bottom-btn-tool .edit-tool {
  right: -25px;
}
.popup-finish .fillin-info p.input-value {
  float: left;
  letter-spacing: 1px;
  max-width: calc(100% - 156px);
  display: flex;
  align-items: center;
  line-height: 1.5;
  padding-top: 10px;
}
.popup-finish .fillin-info p.input-value span {
  color: #11948a;
  font-weight: bold;
}
.popup-finish .fillin-info p.input-value span.calendar {
  padding-right: 10px;
}
.popup-finish .fillin-info p.input-value a {
  color: #333;
}
.popup-finish .fillin-info p.input-value a:hover {
  text-decoration: underline;
}
.popup-finish .fillin-info p.input-value a.c-green {
  color: #11948a;
  font-weight: bold;
  font-size: 0.813rem;
  margin-left: 15px;
}
.popup-finish .fillin-info .pay-available span:first-child {
  padding-top: 2px;
  padding-right: 7px;
}
.popup-finish .terms-info {
  border-bottom: 3px solid #ebf5f4;
}
.popup-finish .terms-info .terms-field {
  background-color: #fff;
  max-width: 694px;
  padding: 0px 0px 30px 0px;
  margin: 0 auto;
  border-radius: 18px;
}
.popup-finish .terms-info .terms-field p.terms-title {
  padding: 15px 0 20px 0;
  font-size: 1.063rem;
  font-weight: bold;
  text-align: center;
}
.popup-finish p.text-confirm {
  float: left;
  width: 100%;
  background-color: #fffde3;
  text-align: center;
  padding: 10px 15px;
  min-height: 60px;
  border-radius: 10px;
  color: #11948a;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-finish p.text-confirm span {
  padding-left: 35px;
  position: relative;
}
.popup-finish p.text-confirm span::after {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  left: 0px;
  display: inline-block;
  width: 22px;
  height: 20px;
  background: url(../images/svg/check-yello.svg) center center no-repeat;
  background-size: contain;
}
.popup-finish .bottom-btn-tool {
  padding: 25px 20px;
}
.popup-finish .liaison-info {
  background-color: #ebf5f4;
  border-radius: 0 0 18px 18px;
}
.popup-finish .liaison-info .fillin-box {
  position: relative;
  background-color: #fff;
  border-radius: 18px;
}
.popup-finish .liaison-info .fillin-box p.product-title {
  letter-spacing: 2px;
}
.popup-finish .liaison-info .fillin-box .field {
  padding: 0;
}
.popup-finish .liaison-info .fillin-box .fillin-info {
  float: none;
  margin: 0 auto;
}
.popup-finish .liaison-info .fillin-box .fillin-info fieldset {
  padding: 2px 0px;
  align-items: center;
}
.popup-finish .liaison-info .fillin-box .fillin-info fieldset label.item-title,
.popup-finish .liaison-info .fillin-box .fillin-info fieldset p.input-value {
  padding-right: 33px;
  line-height: 30px;
  word-wrap: break-word;
  min-height: 30px;
  word-break: break-all;
}
.popup-finish .liaison-info .fillin-box .fillin-info fieldset p.input-value {
  width: calc(100% - 156px);
}
.popup-finish .liaison-info .fillin-box .fillin-info fieldset .show-contact-list .info p.input-value {
  width: 100%;
  max-width: 100%;
}
.popup-finish .liaison-info .fillin-box p.staff-area {
  font-size: 0.938rem;
  font-weight: bold;
  position: absolute;
  left: 20px;
  top: 20px;
}
.popup-finish .liaison-info .fillin-box p.staff-area .bg-circle {
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 50%;
  background-color: #11948A;
  background-color: #11948a;
  display: block;
  text-align: center;
  color: #fff;
}
.popup-finish .liaison-info .fillin-box p.staff-area .bg-green-apple {
  background-color: #62CB6C;
}
.popup-finish .liaison-info .bottom-btn-tool {
  background-color: transparent;
}
@media all and (max-width: 650px) {
  .popup-finish .fillin-box p.product-title {
    font-size: 0.938rem;
  }
  .popup-finish .fillin-box .field .fillin-info fieldset label.item-title {
    width: 120px;
    text-align: right;
    padding-left: 10px;
  }
  .popup-finish .fillin-box .field .fillin-info p.input-value {
    letter-spacing: 0;
    max-width: calc(100% - 120px);
    line-height: 1.125rem;
  }
  .popup-finish .fillin-box .field .fillin-info ul.list-project-single {
    padding: 10px 0 0 0;
  }
  .popup-finish .fillin-box .field .fillin-info ul.list-terms-single {
    padding: 10px 0 0 20px;
  }
  .popup-finish .fillin-box .field .fillin-info ul.list-product-single {
    float: left;
    width: calc(100% - 120px);
  }
  .popup-finish .fillin-box .field .fillin-info ul.list-product-single .project-group .group {
    max-width: calc(100% - 70px);
  }
  .popup-finish .fillin-box .field .fillin-info ul.list-product-single .project-group .group .p-title {
    line-height: 1.5;
  }
  .popup-finish .fillin-box .field .fillin-info ul.show-contact-list {
    width: calc(100% - 120px);
    padding-top: 10px;
  }
  .popup-finish .fillin-box .field .fillin-info ul.show-contact-list li .info .phone,
  .popup-finish .fillin-box .field .fillin-info ul.show-contact-list li .info .fax {
    width: 100%;
  }
  .popup-finish .history-box .fillin-box {
    padding-top: 20px;
  }
  .popup-finish .terms-info .terms-field {
    padding: 15px 20px;
  }
  .popup-finish .terms-info .terms-field p.terms-title {
    font-size: 0.938rem;
    padding: 10px 0 15px;
  }
  .popup-finish p.text-confirm {
    text-align: left;
  }
  .popup-finish .liaison-info .fillin-box .fillin-info fieldset label.item-title {
    padding-left: 0;
    width: 156px;
  }
}
@media all and (max-width: 600px) {
  .popup-finish .bottom-btn-tool {
    padding: 15px;
  }
  .popup-finish .liaison-info .fillin-box .fillin-info fieldset label.item-title {
    padding-left: 0;
    width: 120px;
  }
  .popup-finish .liaison-info .fillin-box .fillin-info fieldset p.input-value {
    width: calc(100% - 120px);
  }
  .popup-finish .changes-info .bottom-btn-tool {
    padding: 5px;
  }
  .popup-finish .changes-info .bottom-btn-tool .edit-tool {
    padding-top: 0;
    display: flex;
    justify-content: center;
  }
}

.print-order-info {
  padding: 20px;
  padding-bottom: 75px;
}
.print-order-info table {
  background-color: #fff;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.print-order-info table thead .title {
  font-size: 24px;
  padding: 20px 10px 0px 10px;
  border-bottom: none;
}
.print-order-info table thead .logo {
  margin: 0 auto 10px auto;
}
.print-order-info table tr td,
.print-order-info table tr th {
  padding: 5px;
  border-right: 1px solid #a5a5a5;
  border-bottom: 1px solid #a5a5a5;
  font-size: 15px;
}
.print-order-info table .f-l {
  font-size: 19px;
}
.print-order-info table .f-m {
  font-size: 17px;
}
.print-order-info table .f-ss {
  font-size: 11px;
}
.print-order-info table .c-red {
  color: #f44336;
}
.print-order-info table .c-blue {
  color: #274bff;
}
.print-order-info .bg-blue {
  background-color: #e5f5fa;
}
.print-order-info .border-b {
  border-bottom: 2px solid #333;
}
.print-order-info .border-b-dashed {
  border-bottom: 1px dashed #cecece;
}
.print-order-info .border-r {
  border-right: 2px solid #333;
}
.print-order-info .border-r-none {
  border-right: none;
}
.print-order-info .bottom-btn-tool {
  background-color: rgba(0, 0, 0, 0.25);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
}/*# sourceMappingURL=style.css.map */

.popup-container .fillin-box .field .form-details .item-title.advance_payment_title{
  display: flex;
  justify-content: space-between;
  align-items: center;
}