:root,
[data-theme="light"],
:host(:not([data-theme="dark"])),
:root:not([data-theme="dark"]) {
  --violet-850: #321856;
  --violet-800: #3f1e6d;
  --violet-700: #5b2d9c;
  --violet-600: #7540bf;
  --violet-450: #9b71cf;
  --violet-250: #c9afe4;
  --violet-100: #e8dff2;
  --violet-50: #f3eff7;
  --grey-bg: #f5f5f5;
  --grey-850: #262626;
  --grey-700: #474747;
  --grey-500: #777777;
  --grey-200: #c6c6c6;
  --grey-100: #e2e2e2;
  --pink-550: #c72259;
	--pink-50: #fbedef;
  --red-550: #c52f21;
  --red-50: #faeeeb;
  --fuchsia-350: #f869bf;
  --fuchsia-550: #c1208b;
  --fuchsia-650: #98176d;
  --fuchsia-700: #700e4f;
  --azure-550: #0172ad;
  --pumpkin-550: #9c5900;
  --green-600: #2c6c0c;
  --button-type1-background-color: var(--violet-600);
  --button-type1-active-color: var(--violet-600);

  --pico-outline-width: 0;
  --pico-background-color: #ffffff;
  --pico-primary-background: var(--violet-600);
  --pico-primary-hover-background: transparent;
  --pico-primary-border: var(--violet-600);
  --pico-primary-hover-border: var(--violet-600);
  /* --pico-primary-inverse: var(--violet-600); */
  --pico-primary: var(--pink-550);
  --pico-primary-underline: var(--pink-550);
  --pico-color: #262626;
  --pico-primary-hover: var(--violet-800);
  --pico-primary-focus: var(--violet-50);
  /* --pico-text-color: #232946; */
  --pico-h1-color: var(--pink-550);
  --pico-h2-color: var(--pink-550);
  --pico-h3-color: var(--pink-550);
  --pico-h4-color: var(--pink-550);
  --pico-h5-color: var(--pink-550);
  --pico-h6-color: var(--pink-550);
  --pico-button-bgcolor: var(--pink-550);
  --pico-form-element-background-color: #fbfcfc;
  --pico-form-element-border-color: #cfd5e2;
  --pico-form-element-color: var(--grey-850);
  --pico-form-element-active-background-color: #fff;
  --pico-border-radius: 5px;
  --pico-border-color: var(--grey-850);
  --pico-form-element-focus-color: #ccc;
  --pico-form-element-active-border-color: #eee;
  /* --pico-form-element-placeholder-color: var(--grey-200); */
  --accordion-arrow: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5267 18.9046L13.2361 8.614C13.038 8.4239 12.7741 8.31776 12.4996 8.31776C12.2251 8.31776 11.9612 8.4239 11.7632 8.614L1.47878 18.8984L0.00585938 17.4255L10.2902 7.14108C10.8857 6.57288 11.6771 6.25586 12.5001 6.25586C13.3232 6.25586 14.1146 6.57288 14.71 7.14108L24.9996 17.4317L23.5267 18.9046Z' fill='%237540BF'/%3E%3C/svg%3E%0A");
  --accordion-arrow-disable: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5267 18.9046L13.2361 8.614C13.038 8.4239 12.7741 8.31776 12.4996 8.31776C12.2251 8.31776 11.9612 8.4239 11.7632 8.614L1.47878 18.8984L0.00585938 17.4255L10.2902 7.14108C10.8857 6.57288 11.6771 6.25586 12.5001 6.25586C13.3232 6.25586 14.1146 6.57288 14.71 7.14108L24.9996 17.4317L23.5267 18.9046Z' fill='%23c6c6c6'/%3E%3C/svg%3E%0A");
  --arrow-grey: url("data:image/svg+xml,%3Csvg width='13' height='25' viewBox='0 0 13 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-0.000326315 23.5208L10.2903 13.2302C10.4804 13.0322 10.5865 12.7683 10.5865 12.4937C10.5865 12.2192 10.4804 11.9553 10.2903 11.7573L0.00592384 1.47292L1.47884 9.13345e-08L11.7632 10.2844C12.3314 10.8798 12.6484 11.6712 12.6484 12.4943C12.6484 13.3173 12.3314 14.1087 11.7632 14.7042L1.47259 24.9937L-0.000326315 23.5208Z' fill='%23c6c6c6'/%3E%3C/svg%3E%0A");
  --arrow-fuchsia: url("data:image/svg+xml,%3Csvg width='13' height='25' viewBox='0 0 13 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-0.000326315 23.5208L10.2903 13.2302C10.4804 13.0322 10.5865 12.7683 10.5865 12.4937C10.5865 12.2192 10.4804 11.9553 10.2903 11.7573L0.00592384 1.47292L1.47884 9.13345e-08L11.7632 10.2844C12.3314 10.8798 12.6484 11.6712 12.6484 12.4943C12.6484 13.3173 12.3314 14.1087 11.7632 14.7042L1.47259 24.9937L-0.000326315 23.5208Z' fill='%23C1208B'/%3E%3C/svg%3E%0A");
}
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :host:not([data-theme]) {
    /* --pico-h1-color: blue; */
  }
}
input::-webkit-input-placeholder,
input::placeholder,
select:invalid,
textarea::-webkit-input-placeholder,
textarea::placeholder {
  --pico-form-element-placeholder-color: var(--grey-850);
}
select option {
}
select option:hover,
select option:focus,
select option:checked {
  background-color: var(--violet-50);
  color: var(--violet-800);
}
details summary:after {
  transform: rotate(180deg);
  height: 1.5rem;
  background-image: var(--accordion-arrow);
}
.aCenter {
  text-align: center;
}
[role="button"]:is(:hover, :active, :focus),
[type="button"]:is(:hover, :active, :focus) {
  --pico-primary-inverse: var(--violet-600);
}
.button2 {
  --pico-primary-background: var(--violet-800);
  --pico-primary-border: var(--violet-800);
}
.button2:is(:hover, :active, :focus) {
  --pico-primary-hover-border: var(--violet-800);
  --pico-primary-inverse: var(--violet-800);
}
input:not([type="checkbox"], [type="radio"]),
select,
textarea {
  margin: 0;
}
input:not([type="checkbox"], [type="radio"]).err,
select.err,
textarea.err {
  --pico-border-color: var(--red-550) !important;
  --pico-form-element-focus-color: var(--red-550) !important;
}
[type="button"],
[type="reset"],
[type="submit"] {
  margin-bottom: 0;
}
[type="checkbox"],
[type="radio"] {
  --pico-primary-focus: rgba(117, 64, 191, 0.3);
}
input,
select,
textarea {
  --pico-color: var(--grey-850);
  /* --pico-form-element-placeholder-color: var(--grey-850); */
  --pico-form-element-focus-color: rgba(117, 64, 191, 0.3);
  --pico-border-radius: 4px;
}
textarea {
  resize: none;
}
:where(a:not([role="button"])):is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ),
[role="link"]:is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ) {
  text-decoration: none;
}
:where(a:not([role="button"])):focus-visible,
[role="link"]:focus-visible {
  box-shadow: none;
}
button.disable {
  --pico-background-color: var(--grey-200);
  --pico-primary-border: var(--grey-200);
  pointer-events: none;
}
table {
  --pico-table-border-color: var(--grey-100);
  --table-cell-bgcolor: rgba(243, 239, 247, 0.4);
  --table-cell-bgcolor-2: #f3eff7;
}
[role="button"],
[type="button"] {
  --pico-form-element-spacing-vertical: 0.65rem;
  --pico-form-element-spacing-horizontal: 2rem;
  --pico-border-width: 2px;
  --pico-font-weight: 700;
}
#btnSearch,
main section [role="button"],
main table [role="button"],
main section [type="button"],
main table [type="button"] {
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.1;
}
main table button.btnBrowse {
  --pico-form-element-spacing-horizontal: 1rem;
}
table thead input[type="checkbox"],
table thead input[type="checkbox"]:checked,
table thead input[type="checkbox"]:checked:active,
table thead input[type="checkbox"]:checked:focus {
  --pico-border-color: #fff;
  --pico-background-color: transparent;
}
form input[type="radio"],
table tbody input[type="checkbox"] {
  --pico-border-color: var(--grey-850);
  --pico-background-color: transparent;
}
table th {
  --pico-background-color: var(--fuchsia-650);
  --pico-color: #fff;
}
table thead th {
  /* font-size: 0.9rem; */
  font-size: 0.75rem;
  border-bottom: none;
  padding: 15px var(--pico-spacing);
}
table tbody td {
  background: var(--table-cell-bgcolor);
}
table thead tr th:first-child {
  border-top-left-radius: 5px;
}
table thead tr th:last-child {
  border-top-right-radius: 5px;
}
table thead tr th {
  /* background-color: var(--table-header-bgcolor);
  color: var(--table-header-color); */
}
table label {
  margin-bottom: 0;
}
table tbody tr.summary td {
  background: var(--table-cell-bgcolor-2);
}
body {
  margin: 0;
  padding: 0;
  font-family: "Microsoft JhengHei", sans-serif;
  background: var(--grey-bg);
  color: var(--pico-color);
  line-height: 1.4;
  font-weight: 400;
  min-height: 100vh;
}
h1 + #btnClose {
  position: absolute;
  right: 2rem;
  top: 2.5rem;
}
#btnClose {
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.25;
  width: 40px;
  height: 40px;
  text-indent: -9999px;
  background: none;
  border: none;
}
#btnClose:before,
#btnClose:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15px;
  height: 2px;
  width: 30px;
  background-color: var(--violet-600);
  transition: width 0.3s ease 0s;
}
#btnClose:hover:before,
#btnClose:hover:after {
  width: 34px;
}
#btnClose:before {
  transform: rotate(45deg);
}
#btnClose:after {
  transform: rotate(135deg);
}
#wrapperOutter {
  /* display: flex; */
  position: relative;
}
#mainMenu {
  background: var(--violet-800);
  position: fixed;
  padding-top: 100px;
  width: 50px;
  height: 100vh;
  transition: width 0.3s ease 0s;
  z-index: 2000;
  left: 0;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#wrapperOutter.showMenu #mainMenu {
  width: 250px;
}
#mainMenu:after {
  content: "";
  width: 5px;
  height: 100%;
  background-color: var(--violet-600);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
#toggleMenu {
  width: 45px;
  height: 45px;
  margin: 8px 0;
  position: absolute;
  right: 5px;
  top: 0;
  border: none;
  background-image: url(../images/btn-menu.svg);
  background-color: transparent;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
}
.admin #menu{
}
#menu {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 100;
  width: 250px;
  opacity: 0;
  left: -250px;
  transition: opacity 0.3s ease 0s, left 0.3s ease 0s;
}
#wrapperOutter.showMenu #mainMenu #menu {
  opacity: 1;
  left: 0;
}
#wrapperOutter.showMenu #mainMenu #toggleMenu {
  background-image: url(../images/btn-menu-close.svg);
}
#menu li {
  list-style: none;
}
#menu li a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.65rem;
  color: var(--violet-250);
  text-decoration: none;
  border-right: 5px solid transparent;
}
#menu li.selected > a,
#menu li > a:hover {
  color: #fff;
  background-color: var(--violet-850);
  border-right-color: var(--fuchsia-350);
}
#wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.a-center {
  text-align: center;
}
#siteHeader {
  background: var(--violet-700);
  color: #fff;
  display: flex;
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;
}
#siteHeader a {
  color: #fff;
  text-decoration: none;
}
#headerLeft {
  display: flex;
  align-items: center;
  column-gap: 40px;
  padding: 12px 20px;
}
#textRTMS {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
}
#textRTMS > span {
  display: inline-block;
  font-weight: 700;
}
#logoWrap {
  width: 220px;
  max-width: 220px;
}
#logoWrap > a {
  display: block;
}
#logoWrap img {
  max-width: 220px;
  transition: max-width 0.3s ease 0s;
}
#headerRight {
  margin-left: auto;
  display: flex;
  align-items: center;
}
#headerRight > a {
  display: inline-block;
  text-indent: -9999px;
  width: 60px;
  height: 100%;
}
#btnLogin {
  background: var(--violet-800) url(../images/btn-user.svg) no-repeat 50% 50%;
  background-size: 26px 26px;
}
#btnLogin:hover {
  background-color: var(--violet-700);
}
#btnNotice {
  background: url(../images/btn-notice.svg) no-repeat 50% 50%;
  background-size: 26px 26px;
}
main {
  flex: 1 0 auto;
  padding: 2.5rem 2rem;
}
#loginWrap {
  padding-top: 50px;
}
#loginMain {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
main h1 {
  width: 100%;
  text-align: center;
  color: var(--pink-550);
  margin-bottom: 1.5rem;
}
#loginForm {
  border-radius: 10px;
  width: 500px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
}
#loginForm p {
  font-size: 0.9rem;
}
#loginForm form label {
  margin-bottom: 20px;
  position: relative;
}
#loginForm form label > button.togglePassword {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: url(../images/icon-eye-close.svg) no-repeat 50% 50%;
  border: none;
  padding: 1rem;
}
#loginForm form label > button.togglePassword.show {
  background: url(../images/icon-eye.svg) no-repeat 50% 50%;
}
.notes {
  font-size: 0.8em;
  color: var(--grey-500);
  margin-bottom: var(--pico-typography-spacing-vertical);
}
#captchaWrap {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#captchaMain {
  /* border: 1px solid var(--grey-200);
  border-radius: 4px;
  min-height: 95px; */
  max-width: 375px;
  margin: 0 auto;
}
.btnWrap {
  padding-top: 1.25rem;
}
.btnWrap > button:last-child {
  margin-bottom: 0;
}
#btnConfirm {
  display: block;
  width: 100%;
}
#bottomNav {
  width: 100%;
  background: var(--violet-100);
  padding: 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  z-index: 1000;
}

#bottomNav button {
}

#bottomNav button.back {
  background: #bdbdbd;
  color: #222;
}

#bottomNav button.submit {
  background: #1976d2;
  color: #fff;
}
#bottomNav button.btnPrint {
  background: var(--pico-button-bgcolor);
  color: #fff;
}
.rwd-table-wrapper {
  position: relative;
}
.rwd-table-wrapper:not(:last-child) {
  margin-bottom: 1rem;
}
.rwd-table-wrapper table {
  margin: 0;
}
.rwd-table-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.rwd-table-scroll:has(#tblClearance){
  min-height: 400px;
}

.rwd-table-scroll::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 6px;
}
.rwd-table-scroll::-webkit-scrollbar-track {
  background-color: #ddd;
}
.rwd-table-scroll::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.25);
}

.rwd-table-wrapper::before,
.rwd-table-wrapper::after {
  opacity: 0;
  transition: opacity 0.3s ease 0s;
}
.rwd-table-wrapper.has-overflow:not(.at-right)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1.2rem;
  pointer-events: none;
  z-index: 20;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  opacity: 1;
}

.rwd-table-wrapper.has-overflow.scrolled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1.4rem;
  pointer-events: none;
  z-index: 20;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
  opacity: 1;
}

/*tab menu starts*/
.tab-container {
  position: relative;
  z-index: 100;
}
.tab-container .tab-menu ul li:before {
  display: none;
}

.tab-container .tab-menu ul li.mobileSelected a {
  text-align: left;
  background-color: var(--violet-800);
  color: #fff;
  font-weight: 700;
  padding-right: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  line-height: 24px;
  padding: 10px 30px 10px 20px;
}

.tab-container .tab-menu ul li.mobileSelected a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 0;
  height: 0;
  border-top: 6px solid #fff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  z-index: 50;
  margin-top: -3px;
  transition: transform 0.3s ease 0s;
}

.tab-container .tab-menu ul li.mobileSelected.active a:after {
  transform: rotate(180deg);
}

.tab-container .tab-menu {
}

.tab-container .tab-menu ul {
  display: flex;
  column-gap: 10px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 100;
  list-style-type: none;
}

.tab-container .tab-menu ul li {
  min-height: 55px;
  padding: 0;
  margin: 0;
}

.tab-container .tab-menu ul li:before {
  display: none;
}

.tab-container .tab-menu ul li a {
  text-align: center;
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  padding: 10px 30px;
  position: relative;
  height: 100%;
  transition: background-color 0.3s ease 0s;
}

.tab-container .tab-menu ul li.selected a {
  font-weight: 700;
  color: var(--violet-600);
}

.tab-container .tab-menu ul li:not(.mobileSelected) a:hover,
.tab-container .tab-menu ul li:not(.mobileSelected) a.focus {
  color: #fff;
  background-color: var(--violet-600);
}

.tab-container .tab-content {
  /* background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
  padding: 1rem; */
}

.tab-container .tab-content .tabpanel {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease 0s;
}

.tab-container .tab-content .tabpanel.shownOp {
  opacity: 1;
}

#content .tab-container .tab-content .tabpanel p:last-of-type {
  margin-bottom: 0;
}
.tab-container section {
  border-top-left-radius: 0;
}
/*tab menu ends*/

/*pagination*/
.pagination {
  margin: 30px 0;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
}
.pagination .custom-select {
  min-width: 80px;
}
.pageNav {
  font-weight: 300;
  /*padding:0 110px;*/
}

#page-filter.disabled {
  opacity: 0.3;
}

.pageNav a {
  font-size: 0.9rem;
  display: inline-block;
  margin: 0 2px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  position: relative;
  width: 40px;
  height: 40px;
  background-position: 50% 100%;
  border-radius: var(--pico-border-radius);
  overflow: hidden;
}

.pageNav > span {
  width: 40px;
  height: 40px;
  margin: 0 2px;
  color: var(--grey-850);
  padding-top: 10px;
  display: inline-block;
  vertical-align: top;
}

.pageNav a span {
  background-color: var(--grey-100);
  color: var(--grey-850);
  display: block;
  transition: background-color 0.3s ease 0s;
  -webkit-transition: background-color 0.3s ease 0s;
  width: 100%;
  height: 100%;
  line-height: 40px;
}

.pageNav a.arrow {
  background-color: var(--grey-100);
  color: var(--grey-850);
}

.pageNav a:not(.arrow):hover span,
.pageNav a:not(.arrow).focus span,
.pageNav a:not(.arrow).selected span {
  color: #fff;
  background-color: var(--violet-600);
}

.pageNav .arrow {
  position: relative;
  text-indent: -9999px;
  color: #000;
  transition: opacity 0.3s ease 0s;
}

.pageNav .arrow:not(.disabled):hover,
.pageNav .arrow:not(.disabled).focus {
  color: #fff;
  background-color: var(--violet-600);
}

.pageNav .arrow:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  transition: border-color 0.3s ease 0s;
  -webkit-transition: border-color 0.3s ease 0s;
  border: 2px solid var(--grey-700);
}

.pageNav .prev_page:before {
  transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  border-left-width: 0;
  border-top-width: 0;
  margin-left: -5px;
}

.pageNav .next_page:before {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-left-width: 0;
  border-bottom-width: 0;
  margin-left: -8px;
}

.pageNav a.prev_page.disabled,
.pageNav a.next_page.disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.pageNav .arrow:not(.disabled):hover:before,
.pageNav .arrow:not(.disabled):focus:before {
  border-color: #fff;
}

/*page nav ends*/

table.formTable tbody tr td.btnsCell {
  text-align: right;
  white-space: nowrap;
  padding: 0.2rem 1rem;
}
main {
  position: relative;
}
main section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
  padding: 1rem;
  position: relative;
}
main section h2 {
  color: var(--violet-700);
  font-size: 1.25rem;
}
main section p:last-child {
  margin-bottom: 0;
}
.detailsBlk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1.5rem;
  column-gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.detailsBlk:first-of-type {
  margin-top: 2rem;
}
.detailsBlk:last-child {
  margin-bottom: 0;
}
.detailsBlk .detailItem .title {
  font-size: 0.95rem;
  color: var(--violet-700);
  margin-bottom: 0.25rem;
}
.detailsBlk .detailItem .detail {
}
.twoColumns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.twoColumns .column section {
  margin-bottom: 0.5rem;
}
.twoColumns .column section:last-child {
  margin-bottom: 0;
}
.boldTxt,
.boldTxt th,
.boldTxt td {
  font-weight: 700;
}
.formItems {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
  background: rgba(243, 239, 247, 0.4);
  border-bottom: 1px solid var(--grey-100);
  padding: 12px 16px;
}
.formItems .inputTitle {
  font-size: 0.95rem;
  color: var(--violet-700);
  margin-bottom: 0.25rem;
}
table.formTable .inputWrap {
  /* min-height: calc(100% - 36px); */
}
table.formTable .inputWrap.radioInputs {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: var(--pico-form-element-spacing-vertical)
    var(--pico-form-element-spacing-horizontal);
}
.formItems .formItem label {
  margin-bottom: 0;
}
table.formTable tbody tr td label {
  font-size: 0.95rem;
  color: var(--violet-700);
}
.comp {
  color: var(--red-550);
}
table tr th,
table tr td {
  padding: 0.799rem 0.762rem;
}
section table tbody tr td {
  height: 80px;
}
table.formTable thead tr th {
  white-space: nowrap;
}
table.formTable thead tr th {
  padding: 0.65rem 0 0.65rem 0.762rem;
}
table.formTable tbody tr td {
  padding: 0.81rem 0 0.81rem 0.762rem;
}
table.formTable thead tr th:first-child {
  padding: 0.65rem 0 0.65rem 0.762rem;
}
table.formTable tbody tr td:first-child {
  padding: 0.81rem 0 0.81rem 0.762rem;
}
table.formTable thead tr th:last-child {
  padding: 0.65rem 0.762rem 0.65rem 0.762rem;
}
table.formTable tbody tr td:last-child {
  padding: 0.81rem 0.762rem 0.81rem 0.762rem;
}
table.formTable thead tr th:first-child:last-child {
  padding: 0.65rem 0.762rem;
}
table.formTable tbody tr td:first-child:last-child {
  padding: 0.81rem 0.762rem;
}
table.formTable tbody tr td .inputTitle {
  margin-bottom: 0.25rem;
  white-space: nowrap;
}
table.formTable.threecol tbody tr td {
  width: calc(100% / 3);
}
table.formTable.twocol tbody tr td {
  width: calc(100% / 2);
}
table.formTable .detailsTbl td,
table.formTable .subTblWrap td {
  background: var(--violet-50);
  vertical-align: top;
}
table.formTable .subTblWrap {
  display: none;
}
table.formTable .subTblWrap.shown {
  display: table-row;
}
table.formTable .checkboxWrap label {
  font-size: 0.95rem;
  color: var(--grey-850);
}
table.formTable .radioInputs label {
  color: var(--grey-850);
}
table.formTable .radioInputs label:hover,
table.formTable .radioInputs input[type="radio"]:checked + label {
  color: var(--violet-700);
}
.checkboxWrap {
  display: flex;
}
.checkboxWrap > div:first-child {
  width: 35px;
}
.checkboxWrap > div:last-child {
  flex: 1;
}
.checkboxWrap label {
  margin-bottom: 0;
}
.actionMenuWrap {
  display: inline-block;
  position: relative;
}
.actionMenuWrap .activeMenu {
  position: absolute;
  top: calc(100% + 8px);
  right: -15px;
  width: 265px;
  padding: 15px;
  display: none;
  flex-wrap: wrap;
  background: #fff;
  gap: 5px;
  border-radius: 10px;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.15);
  z-index: 100;
}
/* table.formTable
  tbody
  tr:not(.subTblWrap):nth-last-child(2)
  td.btnsCell
  .actionMenuWrap
  .activeMenu,
table.formTable
  tbody
  tr:not(.subTblWrap):nth-last-child(3)
  td.btnsCell
  .actionMenuWrap
  .activeMenu {
  top: inherit;
  bottom: calc(100% + 8px);
} */
table.formTable tbody tr.last-row td.btnsCell .actionMenuWrap .activeMenu {
  top: inherit;
  bottom: calc(100% + 8px);
}
table.formTable
  tbody
  tr.highlight-row:nth-last-type
  td.btnsCell
  .actionMenuWrap
  .activeMenu {
  top: inherit;
  bottom: calc(100% + 8px);
}
.actionMenuWrap.active .activeMenu {
  display: flex;
}
.actionMenuWrap.active .btnAction {
  --pico-primary-inverse: var(--violet-600);
  --pico-border-color: var(--pico-primary-hover-border);
  --pico-background-color: var(--pico-primary-hover-background);
}

.actionMenuWrap .activeMenu > button {
  width: 100%;
}
.expandSubtbl {
  background: none;
  position: relative;
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.25;
  width: 25px;
  border: none;
  text-indent: -9999px;
}
.expandSubtbl:after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-135deg);
  width: 14px;
  height: 14px;
  border-top-left-radius: 4px;
  border-left: 2px solid var(--violet-600);
  border-top: 2px solid var(--violet-600);
  transition: transform var(--pico-transition);
}
.expandSubtbl.expanded:after {
  transform: translate(-50%, -50%) rotate(45deg);
}
.noticeWrap {
  background: rgba(243, 239, 247, 0.4);
  padding: 1.25rem 1rem;
  margin-bottom: 1.25rem;
}
section > .noticeWrap:last-child {
  margin-bottom: 0;
}
.highlightGreen .checkboxWrap input {
  --pico-background-color: transparent;
  border-radius: 3px;
}
.highlight {
  background-color: var(--fuchsia-650);
  color: #fff;
  font-weight: 700;
}
.highlightGreen {
  background-color: var(--green-600);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
}
.highlightGreen label {
  color: #fff;
  font-weight: 700;
}
.highlightGreen .checkboxWrap [type="checkbox"]:checked {
  --pico-primary-border: #fff;
}
.footNote {
  margin-top: 1rem;
  font-size: 0.9rem;
}
.footNote:not(:last-child) {
  margin-bottom: 1rem;
}
.footNote > p {
  margin-bottom: 0.5rem;
}
.unsold {
  color: var(--azure-550) !important;
}
.lost {
  color: var(--pumpkin-550) !important;
}
.error {
  color: var(--green-600) !important;
}
.errormsg {
  color: var(--red-550);
  font-size: 0.762rem;
}
.alert {
  display: inline-block;
  width: 35px;
  height: 35px;
  background: url(../images/icon-alert.svg) no-repeat 50% 50%;
}
.fileExcel {
  display: inline-block;
  text-indent: -9999px;
  width: 35px;
  height: 35px;
  background: url(../images/icon-excel.png) no-repeat 50% 50%;
}
section > details {
  margin: 0;
}
details > summary,
details[open] > summary {
  margin: 0;
}
details > summary > h2 {
  margin-bottom: 0;
  display: inline-block;
  max-width: calc(100% - 30px);
}
details[open] > summary > h2 {
  margin-bottom: 15px;
}
.uploadWrap {
  display: flex;
  column-gap: 15px;
  align-items: center;
}
.uploadWrap .uploadBox {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 1.25rem;
  height: calc(
    1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) *
      2 + var(--pico-border-width) * 2
  );
}
.uploadWrap .uploadInput {
  border-radius: var(--pico-border-radius);
  border: var(--pico-border-width) solid var(--pico-form-element-border-color);
  flex: 1;
  min-width: 360px;
  padding: 0 0.625rem;
}
.uploadWrap .fileInput {
  display: none;
}

.uploadWrap .filename {
  flex: 1;
  font-size: 16px;
  color: #444;
  padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
}
.uploadWrap .btnRemove {
  color: var(--grey-850);
  font-size: 20px;
  cursor: pointer;
  user-select: none;

  position: relative;
}
.uploadWrap .uploadBtn{ white-space: nowrap;}
.paymentWrap {
  display: flex;
  gap: 10px;
}
.paymentWrap .selectpay {
  flex: 1;
}
.paymentWrap .selectedPayment {
  min-width: 220px;
}
.paymentWrap .inputCheque {
  min-width: 250px;
}
.paymentTbl td {
  vertical-align: top;
}

.paymentSummary {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 60px;
  text-align: center;
  font-weight: 700;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
}

.paymentSummary::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 6px;
}
.paymentSummary::-webkit-scrollbar-track {
  background-color: #ddd;
}
.paymentSummary::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.25);
}

.paymentSummary .subItem {
  position: relative;
}
.paymentSummary .subItem > span {
  display: block;
  width: 100%;
  white-space: nowrap;
}
.paymentSummary .subItem:before {
  position: absolute;
  top: 50%;
  left: -36px;
  transform: translateY(-50%);
}
.paymentSummary .subItem:first-child:before {
  display: none;
}
.paymentSummary .subItem:not(.totalAmount):not(:first-child):before {
  content: "+";
}
.paymentSummary .totalAmount:before {
  content: "=";
}
.paymentSummary .subItem:not(.totalAmount) > span:first-child {
  font-size: 0.9rem;
}
.paymentSummary .subItem:not(.totalAmount) > span.amount {
  font-size: 2rem;
  color: var(--red-550);
}
.paymentSummary .totalAmount > span:first-child {
  font-size: 1.2rem;
}
.paymentSummary .totalAmount > span.amount {
  font-size: 3rem;
  color: var(--red-550);
}
.noticeWrap #salesSummaryWrap {
  margin-bottom: 0;
}
#salesSummaryWrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 60px;
  text-align: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
  margin: 0 auto 30px;
  width: fit-content;
  max-width: 100%;
}
#salesSummaryWrap::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 6px;
}
#salesSummaryWrap::-webkit-scrollbar-track {
  background-color: #ddd;
}
#salesSummaryWrap::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.25);
}
#salesSummary {
  display: flex;
  flex-wrap: nowrap;
  column-gap: 60px;
  position: relative;
}
#salesSummaryWrap > div {
}
#salesSummaryWrap .subItem {
  position: relative;
}
#salesSummaryWrap .subItem > span {
  display: block;
  width: 100%;
  white-space: nowrap;
}
#salesSummary .subItem > span:first-child {
  font-size: 0.9rem;
}
#salesSummary .subItem > span.amount {
  font-size: 2rem;
  color: var(--violet-700);
  font-weight: 700;
}
#SalesTotal .subItem > span:first-child {
  font-size: 0.9rem;
  font-weight: 700;
}
#SalesTotal .subItem > span.amount {
  font-size: 2rem;
  color: var(--red-550);
  font-weight: 700;
}
#salesSummaryWrap .subItem:before {
  position: absolute;
  top: 50%;
  left: -40px;
  transform: translateY(-50%);
}
#salesSummary .subItem:not(:first-child):before {
  content: "-";
  font-size: 1.5rem;
}
#SalesTotal .subItem:before {
  content: "=";
  font-size: 1.5rem;
}
#salesSummaryWrap.multiply #salesSummary:before,
#salesSummaryWrap.multiply #salesSummary:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#salesSummaryWrap.multiply #salesSummary:before {
  content: "(";
  left: -20px;
}
#salesSummaryWrap.multiply #salesSummary:after {
  content: ")";
  right: -20px;
}
#multiply10 {
  position: relative;
}
#multiply10:before {
  content: "x";
  position: absolute;
  left: -20px;
}
#declareSteps {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  column-gap: 45px;
}
#declareSteps .step {
  position: relative;
}
#declareSteps .step:not(:last-child):before {
  content: "";
  width: 13px;
  height: 25px;
  display: block;
  position: absolute;
  background-image: var(--arrow-grey);
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
}
#declareSteps .step.done:before {
  background-image: var(--arrow-fuchsia);
}
#declareSteps .step {
  text-align: center;
}
#declareSteps .step a {
  display: inline-block;
  border-radius: 30px;
  border: 2px solid;
  padding: 0.65rem 1.5rem;
  color: var(--grey-200);
  font-weight: 700;
  text-decoration: none;
  min-width: 280px;
  text-align: center;
  pointer-events: none;
}
#declareSteps .step.active > a {
  pointer-events: visible;
  background-color: var(--fuchsia-550);
  color: #fff;
}
#declareSteps .step.done > a {
  pointer-events: visible;
  background-color: var(--fuchsia-700);
  color: #fff;
}
#ifSoldoutWrap {
  padding: 2.6rem 2rem;
  background-image: url(../images/sold-out-bg.jpg);
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
  text-align: center;
  margin-bottom: 1.5rem;
  border-radius: 10px;
}
#ifSoldoutWrap h2 {
  color: var(--violet-700);
  font-size: 2.25rem;
}
#ifSoldoutBtns button {
  margin: 0 10px 10px;
  background-color: #fff;
  min-width: 200px;
  font-weight: 700;
}
#btnSoldoutNo {
  color: var(--red-550);
  border-color: var(--red-550);
}
#btnSoldoutNo.active,
#btnSoldoutNo:hover,
#btnSoldoutNo:focus-within {
  background-color: var(--red-550);
  color: #fff;
}
#btnSoldoutYes {
  color: var(--green-600);
  border-color: var(--green-600);
}
#btnSoldoutYes.active,
#btnSoldoutYes:hover,
#btnSoldoutYes:focus-within {
  background-color: var(--green-600);
  color: #fff;
}
#ticketDeclaration .disable {
  pointer-events: none;
}
#ticketDeclaration .disable * {
  color: var(--grey-200) !important;
}
#ticketDeclaration .disable details summary:after {
  background-image: var(--accordion-arrow-disable);
}
.totalAmountWrap {
  padding: 0.785rem 1rem;
  border-radius: var(--pico-border-radius);
  background-color: var(--red-50);
  color: var(--red-550);
  font-weight: 700;
  text-align: center;
}
.totalAmountWrap span {
  font-size: 1.575rem;
  padding: 0 10px;
}
/*flatpickr*/
.flatpickrInput {
  background-image: url(../images/calendar_month.svg);
  background-color: transparent;
  background-repeat: no-repeat no-repeat;
  background-position: 96% center;
  background-size: 24px 24px;
}
.flatpickr-calendar {
  background: var(--pink-50);
}
span.flatpickr-weekday,
.flatpickr-day {
  color: var(--grey-850);
}
.flatpickr-day:hover,
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background-color: var(--violet-600);
  border-color: var(--violet-600);
}
.flatpickr-day:not(.nextMonthDay, .prevMonthDay):hover {
  color: #fff;
}
.flatpickr-current-month
  .flatpickr-monthDropdown-months
  .flatpickr-monthDropdown-month {
  background: #fff;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--violet-600);
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--violet-850);
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: var(--pico-icon-chevron);
  background-size: 1rem auto;
  background-position: center right 0.75rem;
  background-repeat: no-repeat;
  padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
  --pico-box-shadow: none;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  left: 10px;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  right: 5px;
}
.flatpickr-months .flatpickr-prev-month > svg,
.flatpickr-months .flatpickr-next-month > svg {
  display: none;
}
.flatpickr-months .flatpickr-prev-month:before,
.flatpickr-months .flatpickr-next-month:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  transition: border-color 0.3s ease 0s;
  -webkit-transition: border-color 0.3s ease 0s;
  border: 2px solid var(--violet-600);
}

.flatpickr-months .flatpickr-prev-month:before {
  transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  border-left-width: 0;
  border-top-width: 0;
  margin-left: -5px;
}

.flatpickr-months .flatpickr-next-month:before {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-left-width: 0;
  border-bottom-width: 0;
  margin-left: -8px;
}

#tblClearance tbody td, #tblClearance tbody button{
	font-size: 0.75rem;
}

#tblClearance tbody .invoiceParent td, #tblClearance tbody .subTblWrap td, #tblClearance tbody .invoiceChild td{
	border-bottom: none;
}
#tblClearance tbody .invoiceParent:not(:first-child) td{
	border-top: var(--pico-border-width) solid var(--pico-table-border-color);
}

.noticeWrap.bigYellow{
	background: #ffbf00;
	font-size: 1.25rem;
    font-weight: 600;
}

.overViewTable table thead th{
	font-size: 1rem;
}